@redvars/peacock 3.1.1 → 3.1.3

package/dist/assets/styles/tokens.css

@@ -18,21 +18,8 @@
   --color-blue-95: #eff0ff;
   --color-blue-98: #faf8ff;
   --color-blue-100: #ffffff;
-  --color-error: var(--color-red);
-  --color-error-0: var(--color-red-0);
-  --color-error-10: var(--color-red-10);
-  --color-error-20: var(--color-red-20);
-  --color-error-30: var(--color-red-30);
-  --color-error-40: var(--color-red-40);
-  --color-error-50: var(--color-red-50);
-  --color-error-60: var(--color-red-60);
-  --color-error-70: var(--color-red-70);
-  --color-error-80: var(--color-red-80);
-  --color-error-90: var(--color-red-90);
-  --color-error-95: var(--color-red-95);
-  --color-error-98: var(--color-red-98);
-  --color-error-100: var(--color-red-100);
-  --color-error-container: var(--color-error-90);
+  --color-error: var(--color-red-40);
+  --color-error-container: var(--color-red-90);
   --color-green: #2e6f40;
   --color-green-0: #000000;
   --color-green-10: #00210b;
@@ -47,10 +34,11 @@
   --color-green-95: #c4ffcb;
   --color-green-98: #eaffe9;
   --color-green-100: #ffffff;
-  --color-inverse-error: var(--color-error-80);
+  --color-inverse-error: var(--color-red-80);
   --color-inverse-on-surface: var(--color-neutral-95);
   --color-inverse-primary: var(--color-primary-80);
   --color-inverse-secondary: var(--color-secondary-80);
+  --color-inverse-success: var(--color-green-80);
   --color-inverse-surface: var(--color-neutral-20);
   --color-inverse-tertiary: var(--color-tertiary-80);
   --color-neutral: #747878;
@@ -101,12 +89,14 @@
   --color-neutral-variant-98: #f2fbfd;
   --color-neutral-variant-99: #f6feff;
   --color-neutral-variant-100: #ffffff;
-  --color-on-error: var(--color-error-100);
-  --color-on-error-container: var(--color-error-10);
+  --color-on-error: var(--color-red-100);
+  --color-on-error-container: var(--color-red-10);
   --color-on-primary: var(--color-primary-100);
   --color-on-primary-container: var(--color-primary-10);
   --color-on-secondary: var(--color-secondary-100);
   --color-on-secondary-container: var(--color-secondary-10);
+  --color-on-success: var(--color-green-100);
+  --color-on-success-container: var(--color-green-10);
   --color-on-surface: var(--color-neutral-10);
   --color-on-surface-variant: var(--color-neutral-variant-30);
   --color-on-tertiary: var(--color-tertiary-100);
@@ -187,20 +177,8 @@
   --color-secondary-100: #ffffff;
   --color-secondary-container: var(--color-secondary-90);
   --color-shadow: var(--color-neutral-0);
-  --color-success: var(--color-green);
-  --color-success-0: var(--color-green-0);
-  --color-success-10: var(--color-green-10);
-  --color-success-20: var(--color-green-20);
-  --color-success-30: var(--color-green-30);
-  --color-success-40: var(--color-green-40);
-  --color-success-50: var(--color-green-50);
-  --color-success-60: var(--color-green-60);
-  --color-success-70: var(--color-green-70);
-  --color-success-80: var(--color-green-80);
-  --color-success-90: var(--color-green-90);
-  --color-success-95: var(--color-green-95);
-  --color-success-98: var(--color-green-98);
-  --color-success-100: var(--color-green-100);
+  --color-success: var(--color-green-40);
+  --color-success-container: var(--color-green-90);
   --color-surface: var(--color-neutral-99);
   --color-surface-container: var(--color-neutral-94);
   --color-surface-container-high: var(--color-neutral-92);
@@ -224,20 +202,6 @@
   --color-tertiary-98: #fff7fa;
   --color-tertiary-100: #ffffff;
   --color-tertiary-container: var(--color-tertiary-90);
-  --color-warning: var(--color-yellow);
-  --color-warning-0: var(--color-yellow-0);
-  --color-warning-10: var(--color-yellow-10);
-  --color-warning-20: var(--color-yellow-20);
-  --color-warning-30: var(--color-yellow-30);
-  --color-warning-40: var(--color-yellow-40);
-  --color-warning-50: var(--color-yellow-50);
-  --color-warning-60: var(--color-yellow-60);
-  --color-warning-70: var(--color-yellow-70);
-  --color-warning-80: var(--color-yellow-80);
-  --color-warning-90: var(--color-yellow-90);
-  --color-warning-95: var(--color-yellow-95);
-  --color-warning-98: var(--color-yellow-98);
-  --color-warning-100: var(--color-yellow-100);
   --color-white: #ffffff;
   --color-yellow: #ffed29;
   --color-yellow-0: #000000;
@@ -276,7 +240,7 @@
   --font-weight-regular: 400; /* Standard weight for regular text. 400 weight. */
   --font-weight-semi-bold: 600; /* Heavier than medium weight. 600 weight. */
   --global-avatar-border-radius: var(--shape-corner-full);
-  --global-badge-color: var(--color-error-40);
+  --global-badge-color: var(--color-error);
   --shape-corner-full: 9999px;
   --shape-corner-large: 12px;
   --shape-corner-medium: 8px;
@@ -481,20 +445,23 @@
 }
 
 [data-theme='dark'] {
-  --color-error: var(--color-error-80);
-  --color-error-container: var(--color-error-30);
-  --color-inverse-error: var(--color-error-40);
+  --color-error: var(--color-red-80);
+  --color-error-container: var(--color-red-30);
+  --color-inverse-error: var(--color-red-40);
   --color-inverse-on-surface: var(--color-neutral-20);
   --color-inverse-primary: var(--color-primary-40);
   --color-inverse-secondary: var(--color-secondary-40);
+  --color-inverse-success: var(--color-green-40);
   --color-inverse-surface: var(--color-neutral-90);
   --color-inverse-tertiary: var(--color-tertiary-40);
-  --color-on-error: var(--color-error-20);
-  --color-on-error-container: var(--color-error-90);
+  --color-on-error: var(--color-red-20);
+  --color-on-error-container: var(--color-red-90);
   --color-on-primary: var(--color-primary-20);
   --color-on-primary-container: var(--color-primary-90);
   --color-on-secondary: var(--color-secondary-20);
   --color-on-secondary-container: var(--color-secondary-90);
+  --color-on-success: var(--color-green-20);
+  --color-on-success-container: var(--color-green-90);
   --color-on-surface: var(--color-neutral-90);
   --color-on-surface-variant: var(--color-neutral-variant-80);
   --color-on-tertiary: var(--color-tertiary-20);
@@ -507,6 +474,8 @@
   --color-secondary: var(--color-secondary-80);
   --color-secondary-container: var(--color-secondary-30);
   --color-shadow: var(--color-neutral-0);
+  --color-success: var(--color-green-80);
+  --color-success-container: var(--color-green-30);
   --color-surface: var(--color-neutral-10);
   --color-surface-container: var(--color-neutral-12);
   --color-surface-container-high: var(--color-neutral-17);
@@ -517,6 +486,5 @@
   --color-surface-variant: var(--color-neutral-variant-30);
   --color-tertiary: var(--color-tertiary-80);
   --color-tertiary-container: var(--color-tertiary-30);
-  --global-badge-color: var(--color-error-80);
 }
 

package/dist/avatar/avatar.d.ts

@@ -0,0 +1,28 @@
+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").CSSResultGroup[];
+    name: string;
+    src?: string;
+    render(): import("lit-html").TemplateResult<1>;
+    private __getInitials;
+}
+//# sourceMappingURL=avatar.d.ts.map

package/dist/avatar/avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../src/avatar/avatar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAKvC;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBAAa,MAAO,SAAQ,UAAU;IACpC,MAAM,CAAC,MAAM,iCAAY;IAEkB,IAAI,EAAE,MAAM,CAAM;IAElB,GAAG,CAAC,EAAE,MAAM,CAAC;IAExD,MAAM;IAgBN,OAAO,CAAC,aAAa;CAItB"}

package/dist/avatar/index.d.ts

@@ -0,0 +1,2 @@
+export { Avatar } from './avatar.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/avatar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/avatar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC"}

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

@@ -0,0 +1,4 @@
+import { Avatar } from './avatar.js';
+export declare class PAvatar extends Avatar {
+}
+//# sourceMappingURL=p-avatar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"p-avatar.d.ts","sourceRoot":"","sources":["../../src/avatar/p-avatar.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,qBACa,OAAQ,SAAQ,MAAM;CAAG"}

package/dist/avatar.js

@@ -0,0 +1,100 @@
+import { _ as __decorate, n } from './property-CR1ZrEd9.js';
+import { i, a as i$1, b } from './lit-element-CkD27PXL.js';
+import { e } from './class-map-Cavm-B1S.js';
+import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
+import './directive-BKuZRRPO.js';
+
+var css_248z = i`:host {
+  display: inline-block;
+  pointer-events: none;
+  --avatar-size: 2rem;
+  --avatar-background-color: var(--color-primary);
+  --avatar-text-color: var(--color-on-primary);
+  --avatar-border-radius: var(--global-avatar-border-radius);
+}
+
+.avatar-container {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-050);
+  line-height: 0;
+}
+
+.avatar {
+  border-radius: var(--avatar-border-radius);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--avatar-text-color);
+  width: var(--avatar-size);
+  height: var(--avatar-size);
+  font-family: var(--typography-body-large-emphasized-font-family) !important;
+  font-size: var(--typography-body-large-emphasized-font-size) !important;
+  font-weight: var(--typography-body-large-emphasized-font-weight) !important;
+  line-height: var(--typography-body-large-emphasized-line-height) !important;
+  letter-spacing: var(--typography-body-large-emphasized-letter-spacing) !important;
+  background-color: var(--avatar-background-color);
+  font-size: calc(var(--avatar-size) * 0.4);
+}
+.avatar .image {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  border-radius: inherit;
+}`;
+styleInject(css_248z);
+
+/**
+ * @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
+ */
+class Avatar extends i$1 {
+    constructor() {
+        super(...arguments);
+        this.name = '';
+    }
+    render() {
+        return b `<div class="avatar-container">
+      <div
+        class=${e({
+            avatar: true,
+            initials: !this.src,
+            image: !!this.src,
+        })}
+      >
+        ${this.src
+            ? b `<img class="image" src=${this.src} alt=${this.name} />`
+            : b `<div class="initials">${this.__getInitials()}</div>`}
+      </div>
+    </div>`;
+    }
+    __getInitials() {
+        const [first = '', last = ''] = this.name.split(' ');
+        return `${first.charAt(0)}${last.charAt(0)}`.toUpperCase();
+    }
+}
+Avatar.styles = [css_248z];
+__decorate([
+    n({ type: String, reflect: true })
+], Avatar.prototype, "name", void 0);
+__decorate([
+    n({ type: String, reflect: true })
+], Avatar.prototype, "src", void 0);
+
+export { Avatar };
+//# sourceMappingURL=avatar.js.map

package/dist/avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.js","sources":["../../src/avatar/avatar.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport styles from './avatar.scss';\n\n/**\n * @label Avatar\n * @tag p-avatar\n * @rawTag avatar\n * @summary The Avatar component is used to represent user, and displays the profile picture, initials or fallback icon.\n *\n * @cssprop --avatar-border-radius - Controls the border radius of the avatar.\n * @cssprop --avatar-background-color - Controls the color of the avatar.\n * @cssprop --avatar-size - Controls the size of the avatar.\n * @cssprop --avatar-text-color - Controls the color of the text inside the avatar.\n *\n *\n * @example\n * ```html\n * <p-avatar name=\"Shivaji Varma\" src=\"https://peacock.redvars.com/assets/img/avatar.webp\"></p-avatar>\n * ```\n *\n * @tags display\n */\nexport class Avatar extends LitElement {\n  static styles = [styles];\n\n  @property({ type: String, reflect: true }) name: string = '';\n\n  @property({ type: String, reflect: true }) src?: string;\n\n  render() {\n    return html`<div class=\"avatar-container\">\n      <div\n        class=${classMap({\n          avatar: true,\n          initials: !this.src,\n          image: !!this.src,\n        })}\n      >\n        ${this.src\n          ? html`<img class=\"image\" src=${this.src} alt=${this.name} />`\n          : html`<div class=\"initials\">${this.__getInitials()}</div>`}\n      </div>\n    </div>`;\n  }\n\n  private __getInitials() {\n    const [first = '', last = ''] = this.name.split(' ');\n    return `${first.charAt(0)}${last.charAt(0)}`.toUpperCase();\n  }\n}\n"],"names":["LitElement","html","classMap","styles","property"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA;;;;;;;;;;;;;;;;;;AAkBG;AACG,MAAO,MAAO,SAAQA,GAAU,CAAA;AAAtC,IAAA,WAAA,GAAA;;QAG6C,IAAA,CAAA,IAAI,GAAW,EAAE;IAwB9D;IApBE,MAAM,GAAA;AACJ,QAAA,OAAOC,CAAI,CAAA,CAAA;;AAEC,cAAA,EAAAC,CAAQ,CAAC;AACf,YAAA,MAAM,EAAE,IAAI;AACZ,YAAA,QAAQ,EAAE,CAAC,IAAI,CAAC,GAAG;AACnB,YAAA,KAAK,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG;SAClB,CAAC;;AAEA,QAAA,EAAA,IAAI,CAAC;cACHD,CAAI,CAAA,CAAA,uBAAA,EAA0B,IAAI,CAAC,GAAG,CAAA,KAAA,EAAQ,IAAI,CAAC,IAAI,CAAA,GAAA;cACvDA,CAAI,CAAA,CAAA,sBAAA,EAAyB,IAAI,CAAC,aAAa,EAAE,CAAA,MAAA,CAAQ;;WAE1D;IACT;IAEQ,aAAa,GAAA;AACnB,QAAA,MAAM,CAAC,KAAK,GAAG,EAAE,EAAE,IAAI,GAAG,EAAE,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC;AACpD,QAAA,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAA,EAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,WAAW,EAAE;IAC5D;;AAzBO,MAAA,CAAA,MAAM,GAAG,CAACE,QAAM,CAAC;AAEmB,UAAA,CAAA;IAA1CC,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AAAoB,CAAA,EAAA,MAAA,CAAA,SAAA,EAAA,MAAA,EAAA,MAAA,CAAA;AAElB,UAAA,CAAA;IAA1CA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AAAe,CAAA,EAAA,MAAA,CAAA,SAAA,EAAA,KAAA,EAAA,MAAA,CAAA;;;;"}

package/dist/badge/badge.d.ts

@@ -0,0 +1,24 @@
+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 {
+    static styles: import("lit").CSSResultGroup[];
+    name: string;
+    src?: string;
+    slotHasContent: boolean;
+    firstUpdated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=badge.d.ts.map

package/dist/badge/badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../src/badge/badge.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAMvC;;;;;;;;;;;;;GAaG;AACH,qBAAa,KAAM,SAAQ,UAAU;IACnC,MAAM,CAAC,MAAM,iCAAY;IAEkB,IAAI,EAAE,MAAM,CAAM;IAElB,GAAG,CAAC,EAAE,MAAM,CAAC;IAGxD,cAAc,UAAS;IAEvB,YAAY;IAUZ,MAAM;CAUP"}

package/dist/badge/index.d.ts

@@ -0,0 +1,2 @@
+export { Badge } from './badge.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/badge/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC"}

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

@@ -0,0 +1,4 @@
+import { Badge } from './badge.js';
+export declare class PBadge extends Badge {
+}
+//# sourceMappingURL=p-badge.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"p-badge.d.ts","sourceRoot":"","sources":["../../src/badge/p-badge.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,qBACa,MAAO,SAAQ,KAAK;CAAG"}

package/dist/badge.js

@@ -0,0 +1,90 @@
+import { _ as __decorate, n } from './property-CR1ZrEd9.js';
+import { i, a as i$1, b } from './lit-element-CkD27PXL.js';
+import { r, o as observerSlotChangesWithCallback } from './utils-CY3RyfcA.js';
+import { e } from './class-map-Cavm-B1S.js';
+import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
+import './directive-BKuZRRPO.js';
+
+var css_248z = i`:host {
+  display: inline-block;
+  --badge-color: var(--global-badge-color);
+}
+
+.badge {
+  pointer-events: none;
+  z-index: var(--z-index-badge);
+  color: var(--color-white);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--badge-color);
+  border-radius: var(--shape-corner-full);
+  box-sizing: border-box;
+}
+.badge.slot-has-content {
+  height: 1rem;
+  min-width: 1rem;
+  padding-inline: var(--spacing-050);
+  font-family: var(--typography-label-small-font-family) !important;
+  font-size: var(--typography-label-small-font-size) !important;
+  font-weight: var(--typography-label-small-font-weight) !important;
+  line-height: var(--typography-label-small-line-height) !important;
+  letter-spacing: var(--typography-label-small-letter-spacing) !important;
+  color: var(--color-on-error);
+}
+.badge:not(.slot-has-content) {
+  height: 0.375rem;
+  width: 0.375rem;
+}`;
+styleInject(css_248z);
+
+/**
+ * @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
+ */
+class Badge extends i$1 {
+    constructor() {
+        super(...arguments);
+        this.name = '';
+        this.slotHasContent = false;
+    }
+    firstUpdated() {
+        observerSlotChangesWithCallback(this.renderRoot.querySelector('slot'), hasContent => {
+            this.slotHasContent = hasContent;
+            this.requestUpdate();
+        });
+    }
+    render() {
+        return b `<div
+      class=${e({
+            badge: true,
+            'slot-has-content': this.slotHasContent,
+        })}
+    >
+      <slot></slot>
+    </div>`;
+    }
+}
+Badge.styles = [css_248z];
+__decorate([
+    n({ type: String, reflect: true })
+], Badge.prototype, "name", void 0);
+__decorate([
+    n({ type: String, reflect: true })
+], Badge.prototype, "src", void 0);
+__decorate([
+    r()
+], Badge.prototype, "slotHasContent", void 0);
+
+export { Badge };
+//# sourceMappingURL=badge.js.map

package/dist/badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.js","sources":["../../src/badge/badge.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport styles from './badge.scss';\nimport { observerSlotChangesWithCallback } from '../utils.js';\n\n/**\n * @label Badge\n * @tag p-badge\n * @rawTag badge\n * @summary The badge component is used to display a small amount of information to the user.\n *\n * @cssprop --badge-color - Controls the color of the badge.\n *\n * @example\n * ```html\n * <p-badge>1</p-badge>\n * ```\n * @tags display\n */\nexport class Badge extends LitElement {\n  static styles = [styles];\n\n  @property({ type: String, reflect: true }) name: string = '';\n\n  @property({ type: String, reflect: true }) src?: string;\n\n  @state()\n  slotHasContent = false;\n\n  firstUpdated() {\n    observerSlotChangesWithCallback(\n      this.renderRoot.querySelector('slot'),\n      hasContent => {\n        this.slotHasContent = hasContent;\n        this.requestUpdate();\n      },\n    );\n  }\n\n  render() {\n    return html`<div\n      class=${classMap({\n        badge: true,\n        'slot-has-content': this.slotHasContent,\n      })}\n    >\n      <slot></slot>\n    </div>`;\n  }\n}\n"],"names":["LitElement","html","classMap","styles","property","state"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA;;;;;;;;;;;;;AAaG;AACG,MAAO,KAAM,SAAQA,GAAU,CAAA;AAArC,IAAA,WAAA,GAAA;;QAG6C,IAAA,CAAA,IAAI,GAAW,EAAE;QAK5D,IAAA,CAAA,cAAc,GAAG,KAAK;IAsBxB;IApBE,YAAY,GAAA;AACV,QAAA,+BAA+B,CAC7B,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,EACrC,UAAU,IAAG;AACX,YAAA,IAAI,CAAC,cAAc,GAAG,UAAU;YAChC,IAAI,CAAC,aAAa,EAAE;AACtB,QAAA,CAAC,CACF;IACH;IAEA,MAAM,GAAA;AACJ,QAAA,OAAOC,CAAI,CAAA,CAAA;AACD,YAAA,EAAAC,CAAQ,CAAC;AACf,YAAA,KAAK,EAAE,IAAI;YACX,kBAAkB,EAAE,IAAI,CAAC,cAAc;SACxC,CAAC;;;WAGG;IACT;;AA5BO,KAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;AAEmB,UAAA,CAAA;IAA1CC,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AAAoB,CAAA,EAAA,KAAA,CAAA,SAAA,EAAA,MAAA,EAAA,MAAA,CAAA;AAElB,UAAA,CAAA;IAA1CA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AAAe,CAAA,EAAA,KAAA,CAAA,SAAA,EAAA,KAAA,EAAA,MAAA,CAAA;AAGxD,UAAA,CAAA;AADC,IAAAC,CAAK;AACiB,CAAA,EAAA,KAAA,CAAA,SAAA,EAAA,gBAAA,EAAA,MAAA,CAAA;;;;"}

package/dist/button/button.d.ts

@@ -0,0 +1,103 @@
+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 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;
+    /**
+     * If true, the button will be in a toggled state.
+     */
+    toggle: boolean;
+    /**
+     * Sets the delay for throttle in milliseconds. Defaults to 200 milliseconds.
+     */
+    throttleDelay: number;
+    /**
+     * The `appendData` property allows you to attach additional data to the button component. This data can be of any type, making it versatile for various use cases. It's particularly useful for passing extra context or information that can be accessed in event handlers or other component logic.
+     */
+    appendData: any;
+    /**
+     * States
+     */
+    private isPressed;
+    private slotHasContent;
+    focus(): void;
+    blur(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    private __handleClickWithThrottle;
+    __handleClick: (event: MouseEvent | KeyboardEvent) => void;
+    __renderDisabledReason(): import("lit-html").TemplateResult<1> | null;
+    private __isLink;
+    render(): import("lit-html").TemplateResult<1>;
+    getVariant(): {
+        variant: string;
+        subVariant: string | undefined;
+    };
+    renderButtonContent(): import("lit-html").TemplateResult<1>;
+    renderLink(): import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=button.d.ts.map

package/dist/button/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/button/button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAMvC;;;;;;;;;;;;;;;;;GAiBG;AACH,qBAAa,MAAO,SAAQ,UAAU;;IACpC,OAAgB,MAAM,iCAAY;IAMhB,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAsB;IAE1C,QAAQ,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CACxD;IAEX;;;;;;;;;OASG;IACS,OAAO,EACf,UAAU,GACV,QAAQ,GACR,OAAO,GACP,UAAU,GACV,MAAM,GACN,KAAK,CAAY;IAErB;;;OAGG;IACS,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAE1D;;OAEG;IAC2C,QAAQ,EAAE,OAAO,CAAS;IAExE;;OAEG;IACS,cAAc,EAAE,MAAM,CAAM;IAExC;;OAEG;IAC0B,KAAK,EAC9B,SAAS,GACT,WAAW,GACX,SAAS,GACT,QAAQ,GACR,SAAS,GACT,OAAO,GACP,OAAO,CAAa;IAExB;;;OAGG;IACS,SAAS,EAAE,OAAO,GAAG,KAAK,CAAS;IAE/C;;OAEG;IAC0B,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,UAAU,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAC;IAEjE;;OAEG;IACS,MAAM,EAAE,MAAM,CAAW;IAErC;;OAEG;IACS,MAAM,EAAE,OAAO,CAAS;IAEpC;;OAEG;IACS,aAAa,SAAO;IAEhC;;OAEG;IACS,UAAU,EAAE,GAAG,CAAC;IAE5B;;OAEG;IAEH,OAAO,CAAC,SAAS,CAAS;IAG1B,OAAO,CAAC,cAAc,CAAS;IAEtB,KAAK;IAIL,IAAI;IAIJ,iBAAiB;IAKjB,oBAAoB;IAKpB,YAAY;IAerB,OAAO,CAAC,yBAAyB,CAEvB;IAGV,aAAa,GAAI,OAAO,UAAU,GAAG,aAAa,UAoBhD;IAEF,sBAAsB;IA6CtB,OAAO,CAAC,QAAQ;IAIP,MAAM;IA8Bf,UAAU;;;;IASV,mBAAmB;IAuBnB,UAAU;CA2BX"}

package/dist/button/index.d.ts

@@ -0,0 +1,2 @@
+export { Button } from './button.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC"}