@redvars/peacock 3.1.1 → 3.1.3

package/dist/ripple-DYnhXK5d.js

@@ -0,0 +1,118 @@
+import { i, a as i$1, b } from './style-inject.es--nCJ9F_D.js';
+
+class Ripple extends i$1 {
+    constructor() {
+        super(...arguments);
+        // Arrow function to bind 'this' automatically
+        this._createRipple = (event) => {
+            const parent = this.parentElement;
+            if (!parent)
+                return;
+            const rect = parent.getBoundingClientRect();
+            // 1. Calculate diameter (furthest corner)
+            const diameter = Math.max(rect.width, rect.height) * 2.5;
+            const radius = diameter / 2;
+            // 2. Calculate position relative to the parent
+            const x = event.clientX - rect.left;
+            const y = event.clientY - rect.top;
+            // 3. Create the ripple element
+            // We create this manually to avoid triggering a full Lit render cycle
+            // for a transient, fire-and-forget animation.
+            const ripple = document.createElement('div');
+            ripple.classList.add('ripple-effect');
+            ripple.style.width = `${diameter}px`;
+            ripple.style.height = `${diameter}px`;
+            ripple.style.left = `${x - radius}px`;
+            ripple.style.top = `${y - radius}px`;
+            // 4. Append to Shadow DOM
+            this.renderRoot.appendChild(ripple);
+            // 5. Cleanup
+            ripple.addEventListener('animationend', () => {
+                ripple.remove();
+            });
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // We defer slightly to ensure the parent DOM is ready
+        requestAnimationFrame(() => {
+            this._setupParent();
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.parentElement) {
+            this.parentElement.removeEventListener('pointerdown', this._createRipple);
+        }
+    }
+    _setupParent() {
+        const parent = this.parentElement;
+        if (!parent)
+            return;
+        // 1. Force parent to be relative so we can position absolutely inside it
+        const style = window.getComputedStyle(parent);
+        if (style.position === 'static') {
+            parent.style.position = 'relative';
+        }
+        // 2. Attach listener to the parent
+        parent.addEventListener('pointerdown', this._createRipple);
+    }
+    render() {
+        // No HTML needed in the template, we inject ripples dynamically
+        return b `<div class="ripple"></div>`;
+    }
+}
+Ripple.styles = i `
+    :host {
+      position: absolute;
+      inset: 0; /* top/left/bottom/right: 0 */
+      pointer-events: none; /* Let clicks pass through to parent */
+      overflow: hidden;
+      border-radius: inherit; /* Inherit parent's rounded corners */
+      z-index: 0;
+      --ripple-state-opacity: 0;
+      --ripple-pressed-color: var(--color-on-surface);
+    }
+
+    .ripple:before {
+      content: '';
+      opacity: var(--ripple-state-opacity);
+      pointer-events: none;
+      position: absolute;
+
+      background-color: var(--ripple-pressed-color);
+      inset: 0;
+      transition:
+        opacity 15ms linear,
+        background-color 15ms linear;
+    }
+
+    .ripple:after {
+      content: '';
+      background: radial-gradient(
+        closest-side,
+        var(--ripple-pressed-color) max(100% - 70px, 65%),
+        transparent 100%
+      );
+      transform-origin: center center;
+      transition: opacity 375ms linear;
+    }
+
+    .ripple-effect {
+      position: absolute;
+      background-color: var(--ripple-pressed-color);
+      opacity: 0.12; /* Material 3 State Layer Opacity */
+      transform: scale(0);
+      animation: ripple-anim 600ms linear forwards;
+    }
+
+    @keyframes ripple-anim {
+      to {
+        transform: scale(1);
+        opacity: 0;
+      }
+    }
+  `;
+
+export { Ripple as R };
+//# sourceMappingURL=ripple-DYnhXK5d.js.map

package/dist/ripple-DYnhXK5d.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ripple-DYnhXK5d.js","sources":["../../src/ripple/ripple.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\n\nexport class Ripple extends LitElement {\n  static styles = css`\n    :host {\n      position: absolute;\n      inset: 0; /* top/left/bottom/right: 0 */\n      pointer-events: none; /* Let clicks pass through to parent */\n      overflow: hidden;\n      border-radius: inherit; /* Inherit parent's rounded corners */\n      z-index: 0;\n      --ripple-state-opacity: 0;\n      --ripple-pressed-color: var(--color-on-surface);\n    }\n\n    .ripple:before {\n      content: '';\n      opacity: var(--ripple-state-opacity);\n      pointer-events: none;\n      position: absolute;\n\n      background-color: var(--ripple-pressed-color);\n      inset: 0;\n      transition:\n        opacity 15ms linear,\n        background-color 15ms linear;\n    }\n\n    .ripple:after {\n      content: '';\n      background: radial-gradient(\n        closest-side,\n        var(--ripple-pressed-color) max(100% - 70px, 65%),\n        transparent 100%\n      );\n      transform-origin: center center;\n      transition: opacity 375ms linear;\n    }\n\n    .ripple-effect {\n      position: absolute;\n      background-color: var(--ripple-pressed-color);\n      opacity: 0.12; /* Material 3 State Layer Opacity */\n      transform: scale(0);\n      animation: ripple-anim 600ms linear forwards;\n    }\n\n    @keyframes ripple-anim {\n      to {\n        transform: scale(1);\n        opacity: 0;\n      }\n    }\n  `;\n\n  connectedCallback() {\n    super.connectedCallback();\n    // We defer slightly to ensure the parent DOM is ready\n    requestAnimationFrame(() => {\n      this._setupParent();\n    });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    if (this.parentElement) {\n      this.parentElement.removeEventListener('pointerdown', this._createRipple);\n    }\n  }\n\n  _setupParent() {\n    const parent = this.parentElement;\n    if (!parent) return;\n\n    // 1. Force parent to be relative so we can position absolutely inside it\n    const style = window.getComputedStyle(parent);\n    if (style.position === 'static') {\n      parent.style.position = 'relative';\n    }\n\n    // 2. Attach listener to the parent\n    parent.addEventListener('pointerdown', this._createRipple);\n  }\n\n  // Arrow function to bind 'this' automatically\n  _createRipple = (event: PointerEvent) => {\n    const parent = this.parentElement;\n    if (!parent) return;\n\n    const rect = parent.getBoundingClientRect();\n\n    // 1. Calculate diameter (furthest corner)\n    const diameter = Math.max(rect.width, rect.height) * 2.5;\n    const radius = diameter / 2;\n\n    // 2. Calculate position relative to the parent\n    const x = event.clientX - rect.left;\n    const y = event.clientY - rect.top;\n\n    // 3. Create the ripple element\n    // We create this manually to avoid triggering a full Lit render cycle\n    // for a transient, fire-and-forget animation.\n    const ripple = document.createElement('div');\n    ripple.classList.add('ripple-effect');\n\n    ripple.style.width = `${diameter}px`;\n    ripple.style.height = `${diameter}px`;\n    ripple.style.left = `${x - radius}px`;\n    ripple.style.top = `${y - radius}px`;\n\n    // 4. Append to Shadow DOM\n    this.renderRoot.appendChild(ripple);\n\n    // 5. Cleanup\n    ripple.addEventListener('animationend', () => {\n      ripple.remove();\n    });\n  };\n\n  render() {\n    // No HTML needed in the template, we inject ripples dynamically\n    return html`<div class=\"ripple\"></div>`;\n  }\n}\n"],"names":["LitElement","html","css"],"mappings":";;AAEM,MAAO,MAAO,SAAQA,GAAU,CAAA;AAAtC,IAAA,WAAA,GAAA;;;AAmFE,QAAA,IAAA,CAAA,aAAa,GAAG,CAAC,KAAmB,KAAI;AACtC,YAAA,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa;AACjC,YAAA,IAAI,CAAC,MAAM;gBAAE;AAEb,YAAA,MAAM,IAAI,GAAG,MAAM,CAAC,qBAAqB,EAAE;;AAG3C,YAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,GAAG,GAAG;AACxD,YAAA,MAAM,MAAM,GAAG,QAAQ,GAAG,CAAC;;YAG3B,MAAM,CAAC,GAAG,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI;YACnC,MAAM,CAAC,GAAG,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG;;;;YAKlC,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC;AAC5C,YAAA,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,eAAe,CAAC;YAErC,MAAM,CAAC,KAAK,CAAC,KAAK,GAAG,CAAA,EAAG,QAAQ,IAAI;YACpC,MAAM,CAAC,KAAK,CAAC,MAAM,GAAG,CAAA,EAAG,QAAQ,IAAI;YACrC,MAAM,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,CAAC,GAAG,MAAM,CAAA,EAAA,CAAI;YACrC,MAAM,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,MAAM,CAAA,EAAA,CAAI;;AAGpC,YAAA,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,MAAM,CAAC;;AAGnC,YAAA,MAAM,CAAC,gBAAgB,CAAC,cAAc,EAAE,MAAK;gBAC3C,MAAM,CAAC,MAAM,EAAE;AACjB,YAAA,CAAC,CAAC;AACJ,QAAA,CAAC;IAMH;IApEE,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE;;QAEzB,qBAAqB,CAAC,MAAK;YACzB,IAAI,CAAC,YAAY,EAAE;AACrB,QAAA,CAAC,CAAC;IACJ;IAEA,oBAAoB,GAAA;QAClB,KAAK,CAAC,oBAAoB,EAAE;AAC5B,QAAA,IAAI,IAAI,CAAC,aAAa,EAAE;YACtB,IAAI,CAAC,aAAa,CAAC,mBAAmB,CAAC,aAAa,EAAE,IAAI,CAAC,aAAa,CAAC;QAC3E;IACF;IAEA,YAAY,GAAA;AACV,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa;AACjC,QAAA,IAAI,CAAC,MAAM;YAAE;;QAGb,MAAM,KAAK,GAAG,MAAM,CAAC,gBAAgB,CAAC,MAAM,CAAC;AAC7C,QAAA,IAAI,KAAK,CAAC,QAAQ,KAAK,QAAQ,EAAE;AAC/B,YAAA,MAAM,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU;QACpC;;QAGA,MAAM,CAAC,gBAAgB,CAAC,aAAa,EAAE,IAAI,CAAC,aAAa,CAAC;IAC5D;IAqCA,MAAM,GAAA;;QAEJ,OAAOC,CAAI,CAAA,CAAA,0BAAA,CAA4B;IACzC;;AAvHO,MAAA,CAAA,MAAM,GAAGC,CAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkDlB,EAAA,CAlDY;;;;"}

package/dist/ripple-DnudV47f.js

@@ -0,0 +1,102 @@
+import { i, a as i$1, b } from './style-inject.es--nCJ9F_D.js';
+
+class Ripple extends i$1 {
+    constructor() {
+        super(...arguments);
+        // Arrow function to bind 'this' automatically
+        this._createRipple = (event) => {
+            const parent = this.parentElement;
+            if (!parent)
+                return;
+            const rect = parent.getBoundingClientRect();
+            // 1. Calculate diameter (furthest corner)
+            const diameter = Math.max(rect.width, rect.height) * 2.5;
+            const radius = diameter / 2;
+            // 2. Calculate position relative to the parent
+            const x = event.clientX - rect.left;
+            const y = event.clientY - rect.top;
+            // 3. Create the ripple element
+            // We create this manually to avoid triggering a full Lit render cycle
+            // for a transient, fire-and-forget animation.
+            const ripple = document.createElement('div');
+            ripple.classList.add('ripple-effect');
+            ripple.style.width = `${diameter}px`;
+            ripple.style.height = `${diameter}px`;
+            ripple.style.left = `${x - radius}px`;
+            ripple.style.top = `${y - radius}px`;
+            // 4. Append to Shadow DOM
+            this.renderRoot.appendChild(ripple);
+            // 5. Cleanup
+            ripple.addEventListener('animationend', () => {
+                ripple.remove();
+            });
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // We defer slightly to ensure the parent DOM is ready
+        requestAnimationFrame(() => {
+            this._setupParent();
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.parentElement) {
+            this.parentElement.removeEventListener('pointerdown', this._createRipple);
+        }
+    }
+    _setupParent() {
+        const parent = this.parentElement;
+        if (!parent)
+            return;
+        // 1. Force parent to be relative so we can position absolutely inside it
+        const style = window.getComputedStyle(parent);
+        if (style.position === 'static') {
+            parent.style.position = 'relative';
+        }
+        // 2. Attach listener to the parent
+        parent.addEventListener('pointerdown', this._createRipple);
+    }
+    render() {
+        // No HTML needed in the template, we inject ripples dynamically
+        return b ``;
+    }
+}
+Ripple.styles = i `
+    :host {
+      position: absolute;
+      inset: 0; /* top/left/bottom/right: 0 */
+      pointer-events: none; /* Let clicks pass through to parent */
+      overflow: hidden;
+      border-radius: inherit; /* Inherit parent's rounded corners */
+      z-index: 0;
+      --ripple-state-opacity: 0;
+    }
+
+    :host(:hover) {
+      opacity: var(--ripple-state-opacity);
+      background-color: #ffffff;
+      inset: 0;
+      transition:
+        opacity 15ms linear,
+        background-color 15ms linear;
+    }
+
+    .ripple-effect {
+      position: absolute;
+      background-color: currentColor;
+      opacity: 0.12; /* Material 3 State Layer Opacity */
+      transform: scale(0);
+      animation: ripple-anim 600ms linear forwards;
+    }
+
+    @keyframes ripple-anim {
+      to {
+        transform: scale(1);
+        opacity: 0;
+      }
+    }
+  `;
+
+export { Ripple as R };
+//# sourceMappingURL=ripple-DnudV47f.js.map

package/dist/ripple-DnudV47f.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ripple-DnudV47f.js","sources":["../../src/ripple/ripple.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\n\nexport class Ripple extends LitElement {\n  static styles = css`\n    :host {\n      position: absolute;\n      inset: 0; /* top/left/bottom/right: 0 */\n      pointer-events: none; /* Let clicks pass through to parent */\n      overflow: hidden;\n      border-radius: inherit; /* Inherit parent's rounded corners */\n      z-index: 0;\n      --ripple-state-opacity: 0;\n    }\n\n    :host(:hover) {\n      opacity: var(--ripple-state-opacity);\n      background-color: #ffffff;\n      inset: 0;\n      transition:\n        opacity 15ms linear,\n        background-color 15ms linear;\n    }\n\n    .ripple-effect {\n      position: absolute;\n      background-color: currentColor;\n      opacity: 0.12; /* Material 3 State Layer Opacity */\n      transform: scale(0);\n      animation: ripple-anim 600ms linear forwards;\n    }\n\n    @keyframes ripple-anim {\n      to {\n        transform: scale(1);\n        opacity: 0;\n      }\n    }\n  `;\n\n  connectedCallback() {\n    super.connectedCallback();\n    // We defer slightly to ensure the parent DOM is ready\n    requestAnimationFrame(() => {\n      this._setupParent();\n    });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    if (this.parentElement) {\n      this.parentElement.removeEventListener('pointerdown', this._createRipple);\n    }\n  }\n\n  _setupParent() {\n    const parent = this.parentElement;\n    if (!parent) return;\n\n    // 1. Force parent to be relative so we can position absolutely inside it\n    const style = window.getComputedStyle(parent);\n    if (style.position === 'static') {\n      parent.style.position = 'relative';\n    }\n\n    // 2. Attach listener to the parent\n    parent.addEventListener('pointerdown', this._createRipple);\n  }\n\n  // Arrow function to bind 'this' automatically\n  _createRipple = (event: PointerEvent) => {\n    const parent = this.parentElement;\n    if (!parent) return;\n\n    const rect = parent.getBoundingClientRect();\n\n    // 1. Calculate diameter (furthest corner)\n    const diameter = Math.max(rect.width, rect.height) * 2.5;\n    const radius = diameter / 2;\n\n    // 2. Calculate position relative to the parent\n    const x = event.clientX - rect.left;\n    const y = event.clientY - rect.top;\n\n    // 3. Create the ripple element\n    // We create this manually to avoid triggering a full Lit render cycle\n    // for a transient, fire-and-forget animation.\n    const ripple = document.createElement('div');\n    ripple.classList.add('ripple-effect');\n\n    ripple.style.width = `${diameter}px`;\n    ripple.style.height = `${diameter}px`;\n    ripple.style.left = `${x - radius}px`;\n    ripple.style.top = `${y - radius}px`;\n\n    // 4. Append to Shadow DOM\n    this.renderRoot.appendChild(ripple);\n\n    // 5. Cleanup\n    ripple.addEventListener('animationend', () => {\n      ripple.remove();\n    });\n  };\n\n  render() {\n    // No HTML needed in the template, we inject ripples dynamically\n    return html``;\n  }\n}\n"],"names":["LitElement","html","css"],"mappings":";;AAEM,MAAO,MAAO,SAAQA,GAAU,CAAA;AAAtC,IAAA,WAAA,GAAA;;;AAmEE,QAAA,IAAA,CAAA,aAAa,GAAG,CAAC,KAAmB,KAAI;AACtC,YAAA,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa;AACjC,YAAA,IAAI,CAAC,MAAM;gBAAE;AAEb,YAAA,MAAM,IAAI,GAAG,MAAM,CAAC,qBAAqB,EAAE;;AAG3C,YAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,GAAG,GAAG;AACxD,YAAA,MAAM,MAAM,GAAG,QAAQ,GAAG,CAAC;;YAG3B,MAAM,CAAC,GAAG,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI;YACnC,MAAM,CAAC,GAAG,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG;;;;YAKlC,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC;AAC5C,YAAA,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,eAAe,CAAC;YAErC,MAAM,CAAC,KAAK,CAAC,KAAK,GAAG,CAAA,EAAG,QAAQ,IAAI;YACpC,MAAM,CAAC,KAAK,CAAC,MAAM,GAAG,CAAA,EAAG,QAAQ,IAAI;YACrC,MAAM,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,CAAC,GAAG,MAAM,CAAA,EAAA,CAAI;YACrC,MAAM,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,MAAM,CAAA,EAAA,CAAI;;AAGpC,YAAA,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,MAAM,CAAC;;AAGnC,YAAA,MAAM,CAAC,gBAAgB,CAAC,cAAc,EAAE,MAAK;gBAC3C,MAAM,CAAC,MAAM,EAAE;AACjB,YAAA,CAAC,CAAC;AACJ,QAAA,CAAC;IAMH;IApEE,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE;;QAEzB,qBAAqB,CAAC,MAAK;YACzB,IAAI,CAAC,YAAY,EAAE;AACrB,QAAA,CAAC,CAAC;IACJ;IAEA,oBAAoB,GAAA;QAClB,KAAK,CAAC,oBAAoB,EAAE;AAC5B,QAAA,IAAI,IAAI,CAAC,aAAa,EAAE;YACtB,IAAI,CAAC,aAAa,CAAC,mBAAmB,CAAC,aAAa,EAAE,IAAI,CAAC,aAAa,CAAC;QAC3E;IACF;IAEA,YAAY,GAAA;AACV,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa;AACjC,QAAA,IAAI,CAAC,MAAM;YAAE;;QAGb,MAAM,KAAK,GAAG,MAAM,CAAC,gBAAgB,CAAC,MAAM,CAAC;AAC7C,QAAA,IAAI,KAAK,CAAC,QAAQ,KAAK,QAAQ,EAAE;AAC/B,YAAA,MAAM,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU;QACpC;;QAGA,MAAM,CAAC,gBAAgB,CAAC,aAAa,EAAE,IAAI,CAAC,aAAa,CAAC;IAC5D;IAqCA,MAAM,GAAA;;QAEJ,OAAOC,CAAI,CAAA,CAAA,CAAE;IACf;;AAvGO,MAAA,CAAA,MAAM,GAAGC,CAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkClB,EAAA,CAlCY;;;;"}

package/dist/ripple-DsC-h31M.js

@@ -0,0 +1,119 @@
+import { i, a as i$1, b } from './style-inject.es--nCJ9F_D.js';
+
+class Ripple extends i$1 {
+    constructor() {
+        super(...arguments);
+        // Arrow function to bind 'this' automatically
+        this._createRipple = (event) => {
+            const parent = this.parentElement;
+            if (!parent)
+                return;
+            const rect = parent.getBoundingClientRect();
+            // 1. Calculate diameter (furthest corner)
+            const diameter = Math.max(rect.width, rect.height) * 2.5;
+            const radius = diameter / 2;
+            // 2. Calculate position relative to the parent
+            const x = event.clientX - rect.left;
+            const y = event.clientY - rect.top;
+            // 3. Create the ripple element
+            // We create this manually to avoid triggering a full Lit render cycle
+            // for a transient, fire-and-forget animation.
+            const ripple = document.createElement('div');
+            ripple.classList.add('ripple-effect');
+            ripple.style.width = `${diameter}px`;
+            ripple.style.height = `${diameter}px`;
+            ripple.style.left = `${x - radius}px`;
+            ripple.style.top = `${y - radius}px`;
+            // 4. Append to Shadow DOM
+            this.renderRoot.appendChild(ripple);
+            // 5. Cleanup
+            ripple.addEventListener('animationend', () => {
+                ripple.remove();
+            });
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // We defer slightly to ensure the parent DOM is ready
+        requestAnimationFrame(() => {
+            this._setupParent();
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.parentElement) {
+            this.parentElement.removeEventListener('pointerdown', this._createRipple);
+        }
+    }
+    _setupParent() {
+        const parent = this.parentElement;
+        if (!parent)
+            return;
+        // 1. Force parent to be relative so we can position absolutely inside it
+        const style = window.getComputedStyle(parent);
+        if (style.position === 'static') {
+            parent.style.position = 'relative';
+        }
+        // 2. Attach listener to the parent
+        parent.addEventListener('pointerdown', this._createRipple);
+    }
+    render() {
+        // No HTML needed in the template, we inject ripples dynamically
+        return b `<div class="ripple"></div>`;
+    }
+}
+Ripple.styles = i `
+    :host {
+      position: absolute;
+      inset: 0; /* top/left/bottom/right: 0 */
+      pointer-events: none; /* Let clicks pass through to parent */
+      overflow: hidden;
+      border-radius: inherit; /* Inherit parent's rounded corners */
+      z-index: 0;
+      --ripple-state-opacity: 0;
+      --ripple-pressed-color: var(--color-on-surface);
+    }
+
+    .ripple:before {
+      content: '';
+      opacity: var(--ripple-state-opacity);
+      pointer-events: none;
+      position: absolute;
+
+      background-color: var(--ripple-pressed-color);
+      inset: 0;
+      transition:
+        opacity 15ms linear,
+        background-color 15ms linear;
+    }
+
+    .ripple:after {
+      content: '';
+      opacity: var(--ripple-state-opacity);
+      background: radial-gradient(
+        closest-side,
+        var(--ripple-pressed-color) max(100% - 70px, 65%),
+        transparent 100%
+      );
+      transform-origin: center center;
+      transition: opacity 375ms linear;
+    }
+
+    .ripple-effect {
+      position: absolute;
+      background-color: var(--ripple-pressed-color);
+      opacity: 0.12; /* Material 3 State Layer Opacity */
+      transform: scale(0);
+      animation: ripple-anim 600ms linear forwards;
+    }
+
+    @keyframes ripple-anim {
+      to {
+        transform: scale(1);
+        opacity: 0;
+      }
+    }
+  `;
+
+export { Ripple as R };
+//# sourceMappingURL=ripple-DsC-h31M.js.map

package/dist/ripple-DsC-h31M.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ripple-DsC-h31M.js","sources":["../../src/ripple/ripple.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\n\nexport class Ripple extends LitElement {\n  static styles = css`\n    :host {\n      position: absolute;\n      inset: 0; /* top/left/bottom/right: 0 */\n      pointer-events: none; /* Let clicks pass through to parent */\n      overflow: hidden;\n      border-radius: inherit; /* Inherit parent's rounded corners */\n      z-index: 0;\n      --ripple-state-opacity: 0;\n      --ripple-pressed-color: var(--color-on-surface);\n    }\n\n    .ripple:before {\n      content: '';\n      opacity: var(--ripple-state-opacity);\n      pointer-events: none;\n      position: absolute;\n\n      background-color: var(--ripple-pressed-color);\n      inset: 0;\n      transition:\n        opacity 15ms linear,\n        background-color 15ms linear;\n    }\n\n    .ripple:after {\n      content: '';\n      opacity: var(--ripple-state-opacity);\n      background: radial-gradient(\n        closest-side,\n        var(--ripple-pressed-color) max(100% - 70px, 65%),\n        transparent 100%\n      );\n      transform-origin: center center;\n      transition: opacity 375ms linear;\n    }\n\n    .ripple-effect {\n      position: absolute;\n      background-color: var(--ripple-pressed-color);\n      opacity: 0.12; /* Material 3 State Layer Opacity */\n      transform: scale(0);\n      animation: ripple-anim 600ms linear forwards;\n    }\n\n    @keyframes ripple-anim {\n      to {\n        transform: scale(1);\n        opacity: 0;\n      }\n    }\n  `;\n\n  connectedCallback() {\n    super.connectedCallback();\n    // We defer slightly to ensure the parent DOM is ready\n    requestAnimationFrame(() => {\n      this._setupParent();\n    });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    if (this.parentElement) {\n      this.parentElement.removeEventListener('pointerdown', this._createRipple);\n    }\n  }\n\n  _setupParent() {\n    const parent = this.parentElement;\n    if (!parent) return;\n\n    // 1. Force parent to be relative so we can position absolutely inside it\n    const style = window.getComputedStyle(parent);\n    if (style.position === 'static') {\n      parent.style.position = 'relative';\n    }\n\n    // 2. Attach listener to the parent\n    parent.addEventListener('pointerdown', this._createRipple);\n  }\n\n  // Arrow function to bind 'this' automatically\n  _createRipple = (event: PointerEvent) => {\n    const parent = this.parentElement;\n    if (!parent) return;\n\n    const rect = parent.getBoundingClientRect();\n\n    // 1. Calculate diameter (furthest corner)\n    const diameter = Math.max(rect.width, rect.height) * 2.5;\n    const radius = diameter / 2;\n\n    // 2. Calculate position relative to the parent\n    const x = event.clientX - rect.left;\n    const y = event.clientY - rect.top;\n\n    // 3. Create the ripple element\n    // We create this manually to avoid triggering a full Lit render cycle\n    // for a transient, fire-and-forget animation.\n    const ripple = document.createElement('div');\n    ripple.classList.add('ripple-effect');\n\n    ripple.style.width = `${diameter}px`;\n    ripple.style.height = `${diameter}px`;\n    ripple.style.left = `${x - radius}px`;\n    ripple.style.top = `${y - radius}px`;\n\n    // 4. Append to Shadow DOM\n    this.renderRoot.appendChild(ripple);\n\n    // 5. Cleanup\n    ripple.addEventListener('animationend', () => {\n      ripple.remove();\n    });\n  };\n\n  render() {\n    // No HTML needed in the template, we inject ripples dynamically\n    return html`<div class=\"ripple\"></div>`;\n  }\n}\n"],"names":["LitElement","html","css"],"mappings":";;AAEM,MAAO,MAAO,SAAQA,GAAU,CAAA;AAAtC,IAAA,WAAA,GAAA;;;AAoFE,QAAA,IAAA,CAAA,aAAa,GAAG,CAAC,KAAmB,KAAI;AACtC,YAAA,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa;AACjC,YAAA,IAAI,CAAC,MAAM;gBAAE;AAEb,YAAA,MAAM,IAAI,GAAG,MAAM,CAAC,qBAAqB,EAAE;;AAG3C,YAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,GAAG,GAAG;AACxD,YAAA,MAAM,MAAM,GAAG,QAAQ,GAAG,CAAC;;YAG3B,MAAM,CAAC,GAAG,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI;YACnC,MAAM,CAAC,GAAG,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG;;;;YAKlC,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC;AAC5C,YAAA,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,eAAe,CAAC;YAErC,MAAM,CAAC,KAAK,CAAC,KAAK,GAAG,CAAA,EAAG,QAAQ,IAAI;YACpC,MAAM,CAAC,KAAK,CAAC,MAAM,GAAG,CAAA,EAAG,QAAQ,IAAI;YACrC,MAAM,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,CAAC,GAAG,MAAM,CAAA,EAAA,CAAI;YACrC,MAAM,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,MAAM,CAAA,EAAA,CAAI;;AAGpC,YAAA,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,MAAM,CAAC;;AAGnC,YAAA,MAAM,CAAC,gBAAgB,CAAC,cAAc,EAAE,MAAK;gBAC3C,MAAM,CAAC,MAAM,EAAE;AACjB,YAAA,CAAC,CAAC;AACJ,QAAA,CAAC;IAMH;IApEE,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE;;QAEzB,qBAAqB,CAAC,MAAK;YACzB,IAAI,CAAC,YAAY,EAAE;AACrB,QAAA,CAAC,CAAC;IACJ;IAEA,oBAAoB,GAAA;QAClB,KAAK,CAAC,oBAAoB,EAAE;AAC5B,QAAA,IAAI,IAAI,CAAC,aAAa,EAAE;YACtB,IAAI,CAAC,aAAa,CAAC,mBAAmB,CAAC,aAAa,EAAE,IAAI,CAAC,aAAa,CAAC;QAC3E;IACF;IAEA,YAAY,GAAA;AACV,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa;AACjC,QAAA,IAAI,CAAC,MAAM;YAAE;;QAGb,MAAM,KAAK,GAAG,MAAM,CAAC,gBAAgB,CAAC,MAAM,CAAC;AAC7C,QAAA,IAAI,KAAK,CAAC,QAAQ,KAAK,QAAQ,EAAE;AAC/B,YAAA,MAAM,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU;QACpC;;QAGA,MAAM,CAAC,gBAAgB,CAAC,aAAa,EAAE,IAAI,CAAC,aAAa,CAAC;IAC5D;IAqCA,MAAM,GAAA;;QAEJ,OAAOC,CAAI,CAAA,CAAA,0BAAA,CAA4B;IACzC;;AAxHO,MAAA,CAAA,MAAM,GAAGC,CAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmDlB,EAAA,CAnDY;;;;"}

package/dist/ripple-DvM0SPd9.js

@@ -0,0 +1,128 @@
+import { i, a as i$1, b } from './style-inject.es--nCJ9F_D.js';
+
+class Ripple extends i$1 {
+    constructor() {
+        super(...arguments);
+        // Arrow function to bind 'this' automatically
+        this._createRipple = (event) => {
+            const parent = this.parentElement;
+            if (!parent)
+                return;
+            const rect = parent.getBoundingClientRect();
+            // 1. Calculate diameter (furthest corner)
+            const diameter = Math.max(rect.width, rect.height) * 2.5;
+            const radius = diameter / 2;
+            // 2. Calculate position relative to the parent
+            const x = event.clientX - rect.left;
+            const y = event.clientY - rect.top;
+            // 3. Create the ripple element
+            // We create this manually to avoid triggering a full Lit render cycle
+            // for a transient, fire-and-forget animation.
+            const ripple = document.createElement('div');
+            ripple.classList.add('ripple-effect');
+            ripple.style.width = `${diameter}px`;
+            ripple.style.height = `${diameter}px`;
+            ripple.style.left = `${x - radius}px`;
+            ripple.style.top = `${y - radius}px`;
+            // 4. Append to Shadow DOM
+            this.renderRoot.appendChild(ripple);
+            // 5. Cleanup
+            ripple.addEventListener('animationend', () => {
+                ripple.remove();
+            });
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // We defer slightly to ensure the parent DOM is ready
+        requestAnimationFrame(() => {
+            this._setupParent();
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.parentElement) {
+            this.parentElement.removeEventListener('pointerdown', this._createRipple);
+        }
+    }
+    _setupParent() {
+        const parent = this.parentElement;
+        if (!parent)
+            return;
+        // 1. Force parent to be relative so we can position absolutely inside it
+        const style = window.getComputedStyle(parent);
+        if (style.position === 'static') {
+            parent.style.position = 'relative';
+        }
+        // 2. Attach listener to the parent
+        parent.addEventListener('pointerdown', this._createRipple);
+    }
+    render() {
+        // No HTML needed in the template, we inject ripples dynamically
+        return b `<div class="ripple"></div>`;
+    }
+}
+Ripple.styles = i `
+    :host {
+      position: absolute;
+      inset: 0; /* top/left/bottom/right: 0 */
+      pointer-events: none; /* Let clicks pass through to parent */
+      overflow: hidden;
+      border-radius: inherit; /* Inherit parent's rounded corners */
+      z-index: 0;
+      --ripple-state-opacity: 0;
+      --ripple-pressed-color: var(--color-on-surface);
+    }
+
+    .ripple:before {
+      content: '';
+      opacity: var(--ripple-state-opacity);
+      pointer-events: none;
+      position: absolute;
+
+      background-color: var(--ripple-pressed-color);
+      inset: 0;
+      transition:
+        opacity 15ms linear,
+        background-color 15ms linear;
+    }
+
+    .ripple:after {
+      content: '';
+      border-radius: 50%;
+      opacity: var(--ripple-state-opacity);
+      pointer-events: none;
+      position: absolute;
+      background: radial-gradient(
+        closest-side,
+        var(--ripple-pressed-color) max(100% - 70px, 65%),
+        transparent 100%
+      );
+      transform-origin: center center;
+      transition: opacity 375ms linear;
+
+      width: 25px;
+      top: 0px;
+      transform: translate(51.4375px, 7.5px) scale(8.75941);
+      left: 0px;
+      height: 25px;
+    }
+
+    .ripple-effect {
+      position: absolute;
+      background-color: var(--ripple-pressed-color);
+      opacity: 0.12; /* Material 3 State Layer Opacity */
+      transform: scale(0);
+      animation: ripple-anim 600ms linear forwards;
+    }
+
+    @keyframes ripple-anim {
+      to {
+        transform: scale(1);
+        opacity: 0;
+      }
+    }
+  `;
+
+export { Ripple as R };
+//# sourceMappingURL=ripple-DvM0SPd9.js.map

package/dist/ripple-DvM0SPd9.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ripple-DvM0SPd9.js","sources":["../../src/ripple/ripple.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\n\nexport class Ripple extends LitElement {\n  static styles = css`\n    :host {\n      position: absolute;\n      inset: 0; /* top/left/bottom/right: 0 */\n      pointer-events: none; /* Let clicks pass through to parent */\n      overflow: hidden;\n      border-radius: inherit; /* Inherit parent's rounded corners */\n      z-index: 0;\n      --ripple-state-opacity: 0;\n      --ripple-pressed-color: var(--color-on-surface);\n    }\n\n    .ripple:before {\n      content: '';\n      opacity: var(--ripple-state-opacity);\n      pointer-events: none;\n      position: absolute;\n\n      background-color: var(--ripple-pressed-color);\n      inset: 0;\n      transition:\n        opacity 15ms linear,\n        background-color 15ms linear;\n    }\n\n    .ripple:after {\n      content: '';\n      border-radius: 50%;\n      opacity: var(--ripple-state-opacity);\n      pointer-events: none;\n      position: absolute;\n      background: radial-gradient(\n        closest-side,\n        var(--ripple-pressed-color) max(100% - 70px, 65%),\n        transparent 100%\n      );\n      transform-origin: center center;\n      transition: opacity 375ms linear;\n\n      width: 25px;\n      top: 0px;\n      transform: translate(51.4375px, 7.5px) scale(8.75941);\n      left: 0px;\n      height: 25px;\n    }\n\n    .ripple-effect {\n      position: absolute;\n      background-color: var(--ripple-pressed-color);\n      opacity: 0.12; /* Material 3 State Layer Opacity */\n      transform: scale(0);\n      animation: ripple-anim 600ms linear forwards;\n    }\n\n    @keyframes ripple-anim {\n      to {\n        transform: scale(1);\n        opacity: 0;\n      }\n    }\n  `;\n\n  connectedCallback() {\n    super.connectedCallback();\n    // We defer slightly to ensure the parent DOM is ready\n    requestAnimationFrame(() => {\n      this._setupParent();\n    });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    if (this.parentElement) {\n      this.parentElement.removeEventListener('pointerdown', this._createRipple);\n    }\n  }\n\n  _setupParent() {\n    const parent = this.parentElement;\n    if (!parent) return;\n\n    // 1. Force parent to be relative so we can position absolutely inside it\n    const style = window.getComputedStyle(parent);\n    if (style.position === 'static') {\n      parent.style.position = 'relative';\n    }\n\n    // 2. Attach listener to the parent\n    parent.addEventListener('pointerdown', this._createRipple);\n  }\n\n  // Arrow function to bind 'this' automatically\n  _createRipple = (event: PointerEvent) => {\n    const parent = this.parentElement;\n    if (!parent) return;\n\n    const rect = parent.getBoundingClientRect();\n\n    // 1. Calculate diameter (furthest corner)\n    const diameter = Math.max(rect.width, rect.height) * 2.5;\n    const radius = diameter / 2;\n\n    // 2. Calculate position relative to the parent\n    const x = event.clientX - rect.left;\n    const y = event.clientY - rect.top;\n\n    // 3. Create the ripple element\n    // We create this manually to avoid triggering a full Lit render cycle\n    // for a transient, fire-and-forget animation.\n    const ripple = document.createElement('div');\n    ripple.classList.add('ripple-effect');\n\n    ripple.style.width = `${diameter}px`;\n    ripple.style.height = `${diameter}px`;\n    ripple.style.left = `${x - radius}px`;\n    ripple.style.top = `${y - radius}px`;\n\n    // 4. Append to Shadow DOM\n    this.renderRoot.appendChild(ripple);\n\n    // 5. Cleanup\n    ripple.addEventListener('animationend', () => {\n      ripple.remove();\n    });\n  };\n\n  render() {\n    // No HTML needed in the template, we inject ripples dynamically\n    return html`<div class=\"ripple\"></div>`;\n  }\n}\n"],"names":["LitElement","html","css"],"mappings":";;AAEM,MAAO,MAAO,SAAQA,GAAU,CAAA;AAAtC,IAAA,WAAA,GAAA;;;AA6FE,QAAA,IAAA,CAAA,aAAa,GAAG,CAAC,KAAmB,KAAI;AACtC,YAAA,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa;AACjC,YAAA,IAAI,CAAC,MAAM;gBAAE;AAEb,YAAA,MAAM,IAAI,GAAG,MAAM,CAAC,qBAAqB,EAAE;;AAG3C,YAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,GAAG,GAAG;AACxD,YAAA,MAAM,MAAM,GAAG,QAAQ,GAAG,CAAC;;YAG3B,MAAM,CAAC,GAAG,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI;YACnC,MAAM,CAAC,GAAG,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG;;;;YAKlC,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC;AAC5C,YAAA,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,eAAe,CAAC;YAErC,MAAM,CAAC,KAAK,CAAC,KAAK,GAAG,CAAA,EAAG,QAAQ,IAAI;YACpC,MAAM,CAAC,KAAK,CAAC,MAAM,GAAG,CAAA,EAAG,QAAQ,IAAI;YACrC,MAAM,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,CAAC,GAAG,MAAM,CAAA,EAAA,CAAI;YACrC,MAAM,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,MAAM,CAAA,EAAA,CAAI;;AAGpC,YAAA,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,MAAM,CAAC;;AAGnC,YAAA,MAAM,CAAC,gBAAgB,CAAC,cAAc,EAAE,MAAK;gBAC3C,MAAM,CAAC,MAAM,EAAE;AACjB,YAAA,CAAC,CAAC;AACJ,QAAA,CAAC;IAMH;IApEE,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE;;QAEzB,qBAAqB,CAAC,MAAK;YACzB,IAAI,CAAC,YAAY,EAAE;AACrB,QAAA,CAAC,CAAC;IACJ;IAEA,oBAAoB,GAAA;QAClB,KAAK,CAAC,oBAAoB,EAAE;AAC5B,QAAA,IAAI,IAAI,CAAC,aAAa,EAAE;YACtB,IAAI,CAAC,aAAa,CAAC,mBAAmB,CAAC,aAAa,EAAE,IAAI,CAAC,aAAa,CAAC;QAC3E;IACF;IAEA,YAAY,GAAA;AACV,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa;AACjC,QAAA,IAAI,CAAC,MAAM;YAAE;;QAGb,MAAM,KAAK,GAAG,MAAM,CAAC,gBAAgB,CAAC,MAAM,CAAC;AAC7C,QAAA,IAAI,KAAK,CAAC,QAAQ,KAAK,QAAQ,EAAE;AAC/B,YAAA,MAAM,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU;QACpC;;QAGA,MAAM,CAAC,gBAAgB,CAAC,aAAa,EAAE,IAAI,CAAC,aAAa,CAAC;IAC5D;IAqCA,MAAM,GAAA;;QAEJ,OAAOC,CAAI,CAAA,CAAA,0BAAA,CAA4B;IACzC;;AAjIO,MAAA,CAAA,MAAM,GAAGC,CAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4DlB,EAAA,CA5DY;;;;"}

package/dist/ripple-NWIiDgX2.js

@@ -0,0 +1,128 @@
+import { i, a as i$1, b } from './style-inject.es--nCJ9F_D.js';
+
+class Ripple extends i$1 {
+    constructor() {
+        super(...arguments);
+        // Arrow function to bind 'this' automatically
+        this._createRipple = (event) => {
+            const parent = this.parentElement;
+            if (!parent)
+                return;
+            const rect = parent.getBoundingClientRect();
+            // 1. Calculate diameter (furthest corner)
+            const diameter = Math.max(rect.width, rect.height) * 2.5;
+            const radius = diameter / 2;
+            // 2. Calculate position relative to the parent
+            const x = event.clientX - rect.left;
+            const y = event.clientY - rect.top;
+            // 3. Create the ripple element
+            // We create this manually to avoid triggering a full Lit render cycle
+            // for a transient, fire-and-forget animation.
+            const ripple = document.createElement('div');
+            ripple.classList.add('ripple-effect');
+            ripple.style.width = `${diameter}px`;
+            ripple.style.height = `${diameter}px`;
+            ripple.style.left = `${x - radius}px`;
+            ripple.style.top = `${y - radius}px`;
+            // 4. Append to Shadow DOM
+            this.renderRoot.appendChild(ripple);
+            // 5. Cleanup
+            ripple.addEventListener('animationend', () => {
+                ripple.remove();
+            });
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // We defer slightly to ensure the parent DOM is ready
+        requestAnimationFrame(() => {
+            this._setupParent();
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.parentElement) {
+            this.parentElement.removeEventListener('pointerdown', this._createRipple);
+        }
+    }
+    _setupParent() {
+        const parent = this.parentElement;
+        if (!parent)
+            return;
+        // 1. Force parent to be relative so we can position absolutely inside it
+        const style = window.getComputedStyle(parent);
+        if (style.position === 'static') {
+            parent.style.position = 'relative';
+        }
+        // 2. Attach listener to the parent
+        parent.addEventListener('pointerdown', this._createRipple);
+    }
+    render() {
+        // No HTML needed in the template, we inject ripples dynamically
+        return b `<div class="ripple"></div>`;
+    }
+}
+Ripple.styles = i `
+    :host {
+      position: absolute;
+      inset: 0; /* top/left/bottom/right: 0 */
+      pointer-events: none; /* Let clicks pass through to parent */
+      overflow: hidden;
+      border-radius: inherit; /* Inherit parent's rounded corners */
+      z-index: 0;
+      --ripple-state-opacity: 0;
+      --ripple-pressed-color: var(--color-on-surface);
+    }
+
+    .ripple:before {
+      content: '';
+      opacity: var(--ripple-state-opacity);
+      pointer-events: none;
+      position: absolute;
+
+      background-color: var(--ripple-pressed-color);
+      inset: 0;
+      transition:
+        opacity 15ms linear,
+        background-color 15ms linear;
+    }
+
+    .ripple:after {
+      content: '';
+      opacity: var(--ripple-state-opacity);
+      pointer-events: none;
+      position: absolute;
+      background: radial-gradient(
+        closest-side,
+        var(--ripple-pressed-color) max(100% - 70px, 65%),
+        transparent 100%
+      );
+      transform-origin: center center;
+      transition: opacity 375ms linear;
+
+      width: 25px;
+      top: 0px;
+      transform: translate(51.4375px, 7.5px) scale(8.75941);
+      left: 0px;
+      height: 25px;
+    }
+
+    .ripple-effect {
+      position: absolute;
+      border-radius: 50%;
+      background-color: var(--ripple-pressed-color);
+      opacity: 0.12; /* Material 3 State Layer Opacity */
+      transform: scale(0);
+      animation: ripple-anim 600ms linear forwards;
+    }
+
+    @keyframes ripple-anim {
+      to {
+        transform: scale(1);
+        opacity: 0;
+      }
+    }
+  `;
+
+export { Ripple as R };
+//# sourceMappingURL=ripple-NWIiDgX2.js.map

package/dist/ripple-NWIiDgX2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ripple-NWIiDgX2.js","sources":["../../src/ripple/ripple.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\n\nexport class Ripple extends LitElement {\n  static styles = css`\n    :host {\n      position: absolute;\n      inset: 0; /* top/left/bottom/right: 0 */\n      pointer-events: none; /* Let clicks pass through to parent */\n      overflow: hidden;\n      border-radius: inherit; /* Inherit parent's rounded corners */\n      z-index: 0;\n      --ripple-state-opacity: 0;\n      --ripple-pressed-color: var(--color-on-surface);\n    }\n\n    .ripple:before {\n      content: '';\n      opacity: var(--ripple-state-opacity);\n      pointer-events: none;\n      position: absolute;\n\n      background-color: var(--ripple-pressed-color);\n      inset: 0;\n      transition:\n        opacity 15ms linear,\n        background-color 15ms linear;\n    }\n\n    .ripple:after {\n      content: '';\n      opacity: var(--ripple-state-opacity);\n      pointer-events: none;\n      position: absolute;\n      background: radial-gradient(\n        closest-side,\n        var(--ripple-pressed-color) max(100% - 70px, 65%),\n        transparent 100%\n      );\n      transform-origin: center center;\n      transition: opacity 375ms linear;\n\n      width: 25px;\n      top: 0px;\n      transform: translate(51.4375px, 7.5px) scale(8.75941);\n      left: 0px;\n      height: 25px;\n    }\n\n    .ripple-effect {\n      position: absolute;\n      border-radius: 50%;\n      background-color: var(--ripple-pressed-color);\n      opacity: 0.12; /* Material 3 State Layer Opacity */\n      transform: scale(0);\n      animation: ripple-anim 600ms linear forwards;\n    }\n\n    @keyframes ripple-anim {\n      to {\n        transform: scale(1);\n        opacity: 0;\n      }\n    }\n  `;\n\n  connectedCallback() {\n    super.connectedCallback();\n    // We defer slightly to ensure the parent DOM is ready\n    requestAnimationFrame(() => {\n      this._setupParent();\n    });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    if (this.parentElement) {\n      this.parentElement.removeEventListener('pointerdown', this._createRipple);\n    }\n  }\n\n  _setupParent() {\n    const parent = this.parentElement;\n    if (!parent) return;\n\n    // 1. Force parent to be relative so we can position absolutely inside it\n    const style = window.getComputedStyle(parent);\n    if (style.position === 'static') {\n      parent.style.position = 'relative';\n    }\n\n    // 2. Attach listener to the parent\n    parent.addEventListener('pointerdown', this._createRipple);\n  }\n\n  // Arrow function to bind 'this' automatically\n  _createRipple = (event: PointerEvent) => {\n    const parent = this.parentElement;\n    if (!parent) return;\n\n    const rect = parent.getBoundingClientRect();\n\n    // 1. Calculate diameter (furthest corner)\n    const diameter = Math.max(rect.width, rect.height) * 2.5;\n    const radius = diameter / 2;\n\n    // 2. Calculate position relative to the parent\n    const x = event.clientX - rect.left;\n    const y = event.clientY - rect.top;\n\n    // 3. Create the ripple element\n    // We create this manually to avoid triggering a full Lit render cycle\n    // for a transient, fire-and-forget animation.\n    const ripple = document.createElement('div');\n    ripple.classList.add('ripple-effect');\n\n    ripple.style.width = `${diameter}px`;\n    ripple.style.height = `${diameter}px`;\n    ripple.style.left = `${x - radius}px`;\n    ripple.style.top = `${y - radius}px`;\n\n    // 4. Append to Shadow DOM\n    this.renderRoot.appendChild(ripple);\n\n    // 5. Cleanup\n    ripple.addEventListener('animationend', () => {\n      ripple.remove();\n    });\n  };\n\n  render() {\n    // No HTML needed in the template, we inject ripples dynamically\n    return html`<div class=\"ripple\"></div>`;\n  }\n}\n"],"names":["LitElement","html","css"],"mappings":";;AAEM,MAAO,MAAO,SAAQA,GAAU,CAAA;AAAtC,IAAA,WAAA,GAAA;;;AA6FE,QAAA,IAAA,CAAA,aAAa,GAAG,CAAC,KAAmB,KAAI;AACtC,YAAA,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa;AACjC,YAAA,IAAI,CAAC,MAAM;gBAAE;AAEb,YAAA,MAAM,IAAI,GAAG,MAAM,CAAC,qBAAqB,EAAE;;AAG3C,YAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,GAAG,GAAG;AACxD,YAAA,MAAM,MAAM,GAAG,QAAQ,GAAG,CAAC;;YAG3B,MAAM,CAAC,GAAG,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI;YACnC,MAAM,CAAC,GAAG,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG;;;;YAKlC,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC;AAC5C,YAAA,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,eAAe,CAAC;YAErC,MAAM,CAAC,KAAK,CAAC,KAAK,GAAG,CAAA,EAAG,QAAQ,IAAI;YACpC,MAAM,CAAC,KAAK,CAAC,MAAM,GAAG,CAAA,EAAG,QAAQ,IAAI;YACrC,MAAM,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,CAAC,GAAG,MAAM,CAAA,EAAA,CAAI;YACrC,MAAM,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,MAAM,CAAA,EAAA,CAAI;;AAGpC,YAAA,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,MAAM,CAAC;;AAGnC,YAAA,MAAM,CAAC,gBAAgB,CAAC,cAAc,EAAE,MAAK;gBAC3C,MAAM,CAAC,MAAM,EAAE;AACjB,YAAA,CAAC,CAAC;AACJ,QAAA,CAAC;IAMH;IApEE,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE;;QAEzB,qBAAqB,CAAC,MAAK;YACzB,IAAI,CAAC,YAAY,EAAE;AACrB,QAAA,CAAC,CAAC;IACJ;IAEA,oBAAoB,GAAA;QAClB,KAAK,CAAC,oBAAoB,EAAE;AAC5B,QAAA,IAAI,IAAI,CAAC,aAAa,EAAE;YACtB,IAAI,CAAC,aAAa,CAAC,mBAAmB,CAAC,aAAa,EAAE,IAAI,CAAC,aAAa,CAAC;QAC3E;IACF;IAEA,YAAY,GAAA;AACV,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa;AACjC,QAAA,IAAI,CAAC,MAAM;YAAE;;QAGb,MAAM,KAAK,GAAG,MAAM,CAAC,gBAAgB,CAAC,MAAM,CAAC;AAC7C,QAAA,IAAI,KAAK,CAAC,QAAQ,KAAK,QAAQ,EAAE;AAC/B,YAAA,MAAM,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU;QACpC;;QAGA,MAAM,CAAC,gBAAgB,CAAC,aAAa,EAAE,IAAI,CAAC,aAAa,CAAC;IAC5D;IAqCA,MAAM,GAAA;;QAEJ,OAAOC,CAAI,CAAA,CAAA,0BAAA,CAA4B;IACzC;;AAjIO,MAAA,CAAA,MAAM,GAAGC,CAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4DlB,EAAA,CA5DY;;;;"}