issue-#1, #2 - Updated x-ripple component implementation to ensure it…

…'s css props. update lifecycle callback only happens once per update lifecycle.

- Added text color styles for ':active', and ':hover' css states, for button styles.

css/modules/form-controls/button.css

@@ -9,7 +9,9 @@
   text-decoration: none;
   text-align: center;
   font-weight: bold;
-  transition: all 0.13s;
+  transition: border-color 0.13s, color 0.13s, background-color 0.13s,
+  transform 0.13s ease-in-out, opacity 0.13s,
+  box-shadow 0.13s ease-in-out;
 }
 
 :where(.x-button, .x-btn, button):not(:disabled):hover {

css/modules/material-design/button.css

@@ -55,6 +55,7 @@
   color: var(--x-color-4);
 }
 
+:where(.x-button, .x-btn):not(.x-filled):has(> [rippleactive]),
 :where(.x-button, .x-btn):not(.x-filled):active {
   color: var(--x-color-3);
 }
@@ -74,6 +75,7 @@
     color: var(--x-color-7);
   }
 
+  :where(.x-button, .x-btn):not(.x-filled):has(> [rippleactive]),
   :where(.x-button, .x-btn):not(.x-filled):active {
     color: var(--x-color-8);
   }
@@ -114,8 +116,8 @@
 }
 
 :where(.x-button, .x-btn).x-filled {
-  background-color: var(--x-color-4);
-  border-color: var(--x-color-4);
+  background-color: var(--x-color-5);
+  border-color: var(--x-color-5);
   color: var(--x-color-12);
 }
 

stories/index.js

@@ -19,7 +19,10 @@ window.addEventListener('DOMContentLoaded', () => {
     html = $('html'),
 
     mainIframeHeightResize = (iframe) => {
-      iframe.style.height = document.body.scrollHeight + (-1 * (header.offsetHeight + footer.offsetHeight)) - 4 + 'px';
+      const possNewHeight = window.innerHeight +
+          (-1 * (header.scrollHeight + footer.scrollHeight));
+
+      iframe.style.height = possNewHeight + 'px';
     },
 
     iframeMutObserver = new MutationObserver(records => {
@@ -36,16 +39,14 @@ window.addEventListener('DOMContentLoaded', () => {
     subtree: true
   });
 
-  iframe.onload = e => mainIframeHeightResize(e.currentTarget);
+  // Listen for iframe load for resize
+  iframe.addEventListener('load', e => mainIframeHeightResize(e.currentTarget));
 
   hamburgerBtn.addEventListener('click', () => {
     html.classList.toggle('x-nav-hidden');
     nav.classList.toggle('x-display-none');
   });
 
-  // Listen for iframe load for resize
-  // iframe.addEventListener('load', () => resizeIframe(iframe));
-
   // Load stories into iframe
   menus.forEach(menu => menu.addEventListener('click', e => {
     if (e.target.localName === 'a') {

x-ripple/index.css

@@ -37,7 +37,7 @@ x-ripple {
   --x-ripple-y: -50%;
 
   --x-ripple-opacity: 0.13;
-  --x-ripple-active-opacity: 0.21;
+  --x-ripple-active-opacity: 0.13;
   --x-ripple-active-opacity-end: 0.13;
   --x-ripple-inactive-opacity: 0;
   --x-ripple-active-scale: 1;

x-ripple/x-ripple.js

@@ -28,7 +28,9 @@ const _mouseOverEventName = 'mouseenter',
    */
   _onRippleAnimationEnd = function (e) {
     const ctx = _rippleCtxFromEvent(e);
+    ctx.pauseUpdates = true;
     if (ctx.rippleActive) ctx.rippleActive = false;
+    ctx.pauseUpdates = false;
   },
 
   /**
@@ -41,6 +43,7 @@ const _mouseOverEventName = 'mouseenter',
       _updateCssProps(rippleCtx, e);
       return;
     }
+
     _rippleActive(rippleCtx, e);
   },
 
@@ -49,7 +52,10 @@ const _mouseOverEventName = 'mouseenter',
    * @param {MouseEvent} [e]
    */
   _updateCssProps = (ctx, e) => {
-    let rippleRadius;
+    let rippleRadius,
+      rippleOffsetX = e?.offsetX,
+      rippleOffsetY = e?.offsetY;
+
     if (ctx.childElementCount) rippleRadius = Math.max(ctx.offsetHeight, ctx.offsetWidth);
     else if (ctx.parentElement) rippleRadius = Math.max(ctx.parentElement.offsetHeight, ctx.parentElement.offsetWidth);
     else return;
@@ -59,22 +65,30 @@ const _mouseOverEventName = 'mouseenter',
       `${rippleRadius * ctx.radiusMultiplier}px`
     );
 
-    if (!e || ctx.childElementCount) return;
+    if (!e || ctx.childElementCount) {
+      rippleOffsetX = ctx.offsetHeight / 2;
+      rippleOffsetY = ctx.offsetWidth / 2;
+    } else if (rippleOffsetX === undefined) return;
 
-    const rippleX = `${e.offsetX - (rippleRadius + (ctx.offsetWidth / 2))}px`,
-      rippleY = `${e.offsetY - (rippleRadius + (ctx.offsetHeight / 2))}px`;
+    const rippleX = `${rippleOffsetX - (rippleRadius + (ctx.offsetWidth / 2))}px`,
+      rippleY = `${rippleOffsetY - (rippleRadius + (ctx.offsetHeight / 2))}px`;
 
     ctx.style.setProperty(_rippleXCssPropName, rippleX);
     ctx.style.setProperty(_rippleYCssPropName, rippleY);
   },
 
   _rippleActive = (ctx, e) => {
+    ctx.pauseUpdates = true;
     _updateCssProps(ctx, e);
+
     if (ctx.rippleActive) {
       ctx.getAnimations({subtree: true})
+        .reverse()
         .find(ani => ani.animationName === _rippleInAniName)?.play();
     }
+
     ctx.rippleActive = true;
+    ctx.pauseUpdates = false;
   },
 
   addRippleEffect = (ctx) => {
@@ -88,6 +102,7 @@ const _mouseOverEventName = 'mouseenter',
     _updateCssProps(ctx);
     eventTarget.addEventListener(_mouseOverEventName, _onRippleElementMouseDown);
     eventTarget.addEventListener(_mouseDownEventName, _onRippleElementMouseDown);
+    // eventTarget.addEventListener(_animationEndEventName, _onRippleAnimationEnd);
     eventTarget.addEventListener('focusout', _onRippleAnimationEnd);
 
     return ctx;
@@ -96,6 +111,7 @@ const _mouseOverEventName = 'mouseenter',
   removeRippleEffect = (ctx) => {
     ctx.removeEventListener(_mouseOverEventName, _onRippleElementMouseDown);
     ctx.removeEventListener(_mouseDownEventName, _onRippleElementMouseDown);
+    // ctx.removeEventListener(_animationEndEventName, _onRippleAnimationEnd);
     ctx.removeEventListener('focusout', _onRippleAnimationEnd);
     return ctx;
   },
@@ -108,29 +124,39 @@ const _mouseOverEventName = 'mouseenter',
   _resizeObserver = new ResizeObserver(debounce((records) => {
     if (!records?.length) return;
 
-    records[0].target.update();
+    let lastTarget;
+
+    records.forEach(record => {
+      const {target} = record;
+
+      // Only allow update if target hasn't already been updated in parent iteration
+      if (!lastTarget || !lastTarget.isSameNode(target)) {
+        lastTarget = target;
+        target.update()
+      } else {
+        lastTarget = target;
+      }
+    });
   }, 377)),
 
   _mutObserver = new MutationObserver((records) => {
     const recordsLen = records.length;
 
-    let requiresUpdate = false,
-      target;
+    let target;
 
     for (let i = 0; i < recordsLen; i += 1) {
       const r = records[i];
 
       if (r.addedNodes.length || r.removedNodes.length) {
+        if (!target || !target.isSameNode(r.target)) {
+          r.target.update();
+        }
         target = r.target;
-        requiresUpdate = true;
-        break;
       }
     }
-
-    if (requiresUpdate && target) target.update();
   }),
 
-  _mutObserverConfig = {childList: true};
+  _mutObserverConfig = {childList: true, subtree: true};
 
 export {addRippleEffect, removeRippleEffect, RIPPLE_ACTIVE_NAME, RADIUS_MULTIPLIER_NAME}
 
@@ -141,6 +167,8 @@ export class XRippleElement extends HTMLElement {
     return observedAttributes;
   }
 
+  pauseUpdates = false;
+
   #initialized = false;
   #radiusMultiplier = 2;
   #rippleActive = false;
@@ -169,7 +197,7 @@ export class XRippleElement extends HTMLElement {
     } else {
       delete this.#attrsChangedMap[RIPPLE_ACTIVE_NAME];
     }
-    this.update();
+    if (!this.pauseUpdates) this.update();
   }
 
   get localName() {
@@ -195,8 +223,6 @@ export class XRippleElement extends HTMLElement {
   }
 
   attributeChangedCallback(attrName, prevValue, newValue) {
-    // console.log(attrName, prevValue, newValue);
-
     switch (attrName) {
       // Reflected attribute
       case RIPPLE_ACTIVE_NAME: