@redvars/peacock 3.1.1 → 3.1.3

package/dist/ripple-X3U_R8lT.js

@@ -0,0 +1,106 @@
+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(:after) {
+      opacity: var(--ripple-state-opacity);
+      content: '';
+      pointer-events: none;
+      position: absolute;
+
+      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-X3U_R8lT.js.map

package/dist/ripple-X3U_R8lT.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ripple-X3U_R8lT.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(:after) {\n      opacity: var(--ripple-state-opacity);\n      content: '';\n      pointer-events: none;\n      position: absolute;\n\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;;;AAuEE,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;;AA3GO,MAAA,CAAA,MAAM,GAAGC,CAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsClB,EAAA,CAtCY;;;;"}

package/dist/ripple.js

@@ -0,0 +1,128 @@
+import { i, a as i$1, b } from './lit-element-CkD27PXL.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 };
+//# sourceMappingURL=ripple.js.map

package/dist/ripple.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ripple.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;;;;"}

package/dist/src/LoaderUtils.d.ts

@@ -9,7 +9,6 @@ interface LoaderConfig {
 }
 export { LoaderConfig };
 export declare class LoaderUtils {
-    private loaderConfig;
     private _loaderConfig;
     private _observer;
     constructor(loaderConfig: LoaderConfig);

package/dist/src/avatar/avatar.d.ts

@@ -1,6 +1,25 @@
 import { LitElement } from 'lit';
+/**
+ * @label Avatar
+ * @tag p-avatar
+ * @rawTag avatar
+ * @summary The Avatar component is used to represent user, and displays the profile picture, initials or fallback icon.
+ *
+ * @cssprop --avatar-border-radius - Controls the border radius of the avatar.
+ * @cssprop --avatar-background-color - Controls the color of the avatar.
+ * @cssprop --avatar-size - Controls the size of the avatar.
+ * @cssprop --avatar-text-color - Controls the color of the text inside the avatar.
+ *
+ *
+ * @example
+ * ```html
+ * <p-avatar name="Shivaji Varma" src="https://peacock.redvars.com/assets/img/avatar.webp"></p-avatar>
+ * ```
+ *
+ * @tags display
+ */
 export declare class Avatar extends LitElement {
-    static styles: import("lit").CSSResult[];
+    static styles: import("lit").CSSResultGroup[];
     name: string;
     src?: string;
     render(): import("lit-html").TemplateResult<1>;

package/dist/src/avatar/p-avatar.d.ts

@@ -1,10 +1,3 @@
 import { Avatar } from './avatar.js';
-/**
- * @summary The Avatar component is used to represent user, and displays the profile picture, initials or fallback icon.
- *
- * @cssprop --avatar-background-color - Controls the color of the avatar.
- * @cssprop --avatar-size - Controls the size of the avatar.
- * @cssprop --avatar-text-color - Controls the color of the text inside the avatar.
- */
 export declare class PAvatar extends Avatar {
 }

package/dist/src/badge/badge.d.ts

@@ -1,9 +1,23 @@
 import { LitElement } from 'lit';
+/**
+ * @label Badge
+ * @tag p-badge
+ * @rawTag badge
+ * @summary The badge component is used to display a small amount of information to the user.
+ *
+ * @cssprop --badge-color - Controls the color of the badge.
+ *
+ * @example
+ * ```html
+ * <p-badge>1</p-badge>
+ * ```
+ * @tags display
+ */
 export declare class Badge extends LitElement {
-    #private;
-    static styles: import("lit").CSSResult[];
+    static styles: import("lit").CSSResultGroup[];
     name: string;
     src?: string;
     slotHasContent: boolean;
+    firstUpdated(): void;
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist/src/badge/p-badge.d.ts

@@ -1,8 +1,3 @@
 import { Badge } from './badge.js';
-/**
- * @summary The badge component is used to display a small amount of information to the user.
- *
- * @cssprop --badge-color - Controls the color of the badge.
- */
 export declare class PBadge extends Badge {
 }

package/dist/src/button/button.d.ts

@@ -0,0 +1,99 @@
+import { LitElement } from 'lit';
+/**
+ * @label Button
+ * @tag p-button
+ * @rawTag button
+ *
+ * @summary Buttons help people initiate actions, from sending an email, to sharing a document, to liking a post.
+ * @overview
+ * <p>Buttons are clickable elements that are used to trigger actions. They communicate calls to action to the user and allow users to interact with pages in a variety of ways. Button labels express what action will occur when the user interacts with it.</p>
+ *
+ * @cssprop --divider-color - Controls the color of the divider.
+ * @cssprop --divider-padding - Controls the padding of the divider.
+ *
+ * @example
+ * ```html
+ * <pc-button>Button</pc-button>
+ * ```
+ * @tags display
+ */
+export declare class Button extends LitElement {
+    #private;
+    static styles: import("lit").CSSResultGroup[];
+    private readonly buttonElement;
+    htmlType: 'button' | 'submit' | 'reset';
+    /**
+     * The visual style of the button.
+     *
+     *  Possible variant values:
+     * `"filled"` is a filled button.
+     * `"outlined"` is an outlined button.
+     * `"text"` is a transparent button.
+     * `"tonal"` is a light color button.
+     *
+     */
+    variant: 'elevated' | 'filled' | 'tonal' | 'outlined' | 'text' | 'neo';
+    /**
+     * Button size.
+     * Possible values are `"sm"`, `"md"`, `"lg"`. Defaults to `"md"`.
+     */
+    size: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /**
+     * If true, the user cannot interact with the button. Defaults to `false`.
+     */
+    disabled: boolean;
+    /**
+     * If true, the user cannot interact with the button and the button is visually styled as disabled. But the button is still focusable. Defaults to `false`.
+     */
+    softDisabled: boolean;
+    /**
+     * If button is disabled, the reason why it is disabled.
+     */
+    disabledReason: string;
+    /**
+     * Defines the primary color of the button. This can be set to predefined color names to apply specific color themes.
+     */
+    color: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'white' | 'black';
+    /**
+     * Icon alignment.
+     * Possible values are `"start"`, `"end"`. Defaults to `"end"`.
+     */
+    iconAlign: 'start' | 'end';
+    /**
+     * Hyperlink to navigate to on click.
+     */
+    href?: string;
+    configAria?: {
+        [key: string]: any;
+    };
+    /**
+     * Sets or retrieves the window or frame at which to target content.
+     */
+    target: string;
+    selected: boolean;
+    /**
+     * Sets the delay for throttle in milliseconds. Defaults to 200 milliseconds.
+     */
+    throttleDelay: number;
+    /**
+     * States
+     */
+    private isPressed;
+    private slotHasContent;
+    focus(): void;
+    blur(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    private __dispatchClickWithThrottle;
+    __dispatchClick: (event: MouseEvent | KeyboardEvent) => void;
+    __renderDisabledReason(): import("lit-html").TemplateResult<1> | null;
+    __handlePress: (event: KeyboardEvent | MouseEvent) => void;
+    private __isLink;
+    render(): import("lit-html").TemplateResult<1>;
+    getVariant(): {
+        variant: string;
+        subVariant: string | undefined;
+    };
+    renderButtonContent(): import("lit-html").TemplateResult<1>;
+}

package/dist/src/button/index.d.ts

@@ -0,0 +1 @@
+export { Button } from './button.js';

package/dist/src/clock/ClockController.d.ts

@@ -0,0 +1,10 @@
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+export declare class ClockController implements ReactiveController {
+    host: ReactiveControllerHost;
+    value: Date;
+    timeout: number;
+    private _timerID?;
+    constructor(host: ReactiveControllerHost, timeout?: number);
+    hostConnected(): void;
+    hostDisconnected(): void;
+}

package/dist/src/clock/clock.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/src/clock/clock.d.ts

@@ -0,0 +1,25 @@
+import { LitElement } from 'lit';
+import { ClockController } from './ClockController.js';
+/**
+ * @label Clock
+ * @tag p-clock
+ * @rawTag clock
+ *
+ * @summary Displays the current time in a given timezone.
+ * @overview
+ *  - Clocks are used to display the current time in a specified timezone.
+ *  - They can be displayed in various formats, including 12-hour and 24-hour time.
+ *
+ * @example
+ * ```html
+ * <p-clock></p-clock>
+ * ```
+ * @tags display
+ */
+export declare class Clock extends LitElement {
+    static styles: import("lit").CSSResultGroup[];
+    clockController: ClockController;
+    timezone?: string;
+    __formatDate(date: Date): string;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/src/clock/index.d.ts

@@ -0,0 +1 @@
+export { Clock } from './clock.js';

package/dist/src/code-highlighter/code-highlighter.d.ts

@@ -0,0 +1,26 @@
+import { LitElement } from 'lit';
+/**
+ * @label Code Highlighter
+ * @tag p-code-highlighter
+ * @rawTag code-highlighter
+ *
+ * @summary The code highlighter component is used to display code snippets with syntax highlighting.
+ * @overview
+ * <p>The <strong>Code Highlighter</strong> component allows you to display code snippets with syntax highlighting for various programming languages. It supports features like line numbers, code formatting, and a copy-to-clipboard button.</p>
+ *
+ * @cssprop --divider-color - Controls the color of the divider.
+ * @cssprop --divider-padding - Controls the padding of the divider.
+ *
+ * @example
+ * ```html
+ * <p-divider style="width: 12rem;">or</p-divider>
+ * ```
+ * @tags display
+ */
+export declare class CodeHighlighter extends LitElement {
+    static styles: import("lit").CSSResultGroup[];
+    vertical: boolean;
+    slotHasContent: boolean;
+    firstUpdated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/src/code-highlighter/index.d.ts

@@ -0,0 +1 @@
+export { CodeHighlighter } from './code-highlighter.js';

package/dist/src/code-highlighter/local.d.ts

@@ -0,0 +1,6 @@
+export declare const locale: {
+    loading: string;
+    copyToClipboard: string;
+    copied: string;
+    copiedCode: string;
+};

package/dist/src/divider/divider.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/src/divider/divider.d.ts

@@ -0,0 +1,27 @@
+import { LitElement } from 'lit';
+/**
+ * @label Divider
+ * @tag p-divider
+ * @rawTag divider
+ *
+ * @summary The divider component is used to visually separate content.
+ * @overview
+ *  - Dividers are used to separate content into clear groups, making it easier for users to scan and understand the information presented.
+ *  - They can be oriented either vertically or horizontally, depending on the layout requirements.
+ *
+ * @cssprop --divider-color - Controls the color of the divider.
+ * @cssprop --divider-padding - Controls the padding of the divider.
+ *
+ * @example
+ * ```html
+ * <p-divider style="width: 12rem;">or</p-divider>
+ * ```
+ * @tags display
+ */
+export declare class Divider extends LitElement {
+    static styles: import("lit").CSSResultGroup[];
+    vertical: boolean;
+    slotHasContent: boolean;
+    firstUpdated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/src/divider/index.d.ts

@@ -0,0 +1 @@
+export { Divider } from './divider.js';

package/dist/src/elevation/elevation.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/src/elevation/elevation.d.ts

@@ -0,0 +1,27 @@
+import { LitElement } from 'lit';
+/**
+ * @label Elevation
+ * @tag p-elevation
+ * @rawTag elevation
+ *
+ * @summary Adds elevation to an element.
+ * @overview
+ *  - Elevation adds a shadow effect to an element to give it depth.
+ *  - It can be used to create a sense of hierarchy or to draw attention to a particular element.
+ *
+ * @cssprop --elevation-level - Controls the elevation level of the shadow.
+ * @cssprop --elevation-color - Controls the color of the shadow.
+ *
+ * @example
+ * ```html
+ *   <div style="position: relative; padding: var(--spacing-200); border-radius: var(--shape-corner-small);">
+ *     <p-elevation style='--elevation-level: 2'></p-elevation>
+ *     Level 2
+ *   </div>
+ * ```
+ * @tags display
+ */
+export declare class Elevation extends LitElement {
+    static styles: import("lit").CSSResultGroup[];
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/src/elevation/index.d.ts

@@ -0,0 +1 @@
+export { Elevation } from './elevation.js';

package/dist/src/focus-ring/FocusAttachableController.d.ts

@@ -0,0 +1,9 @@
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+export declare class FocusAttachableController implements ReactiveController {
+    host: ReactiveControllerHost;
+    getControlElement: () => HTMLElement;
+    visible: boolean;
+    constructor(host: ReactiveControllerHost, getControlElement: () => HTMLElement);
+    hostConnected(): void;
+    hostDisconnected(): void;
+}

package/dist/src/focus-ring/focus-ring.d.ts

@@ -0,0 +1,35 @@
+import { LitElement } from 'lit';
+/**
+ * @label Elevation
+ * @tag p-elevation
+ * @rawTag elevation
+ *
+ * @summary Adds elevation to an element.
+ * @overview
+ *  - Elevation adds a shadow effect to an element to give it depth.
+ *  - It can be used to create a sense of hierarchy or to draw attention to a particular element.
+ *
+ * @cssprop --elevation-level - Controls the elevation level of the shadow.
+ * @cssprop --elevation-color - Controls the color of the shadow.
+ *
+ * @example
+ * ```html
+ *   <div style="position: relative; padding: var(--spacing-200); border-radius: var(--shape-corner-small);">
+ *     <p-elevation style='--elevation-level: 2'></p-elevation>
+ *     Level 2
+ *   </div>
+ * ```
+ * @tags display
+ */
+export declare class FocusRing extends LitElement {
+    static styles: import("lit").CSSResultGroup[];
+    visible: boolean;
+    render(): symbol;
+    _control?: HTMLElement;
+    get control(): HTMLElement | null;
+    set control(control: HTMLElement | null);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attach(): void;
+    detach(): void;
+}

package/dist/src/focus-ring/index.d.ts

@@ -0,0 +1 @@
+export { FocusRing } from './focus-ring.js';