@redvars/peacock 3.4.0 → 3.5.1

package/dist/notification.js

@@ -0,0 +1,418 @@
+import { a as i, _ as __decorate, I as IndividualComponent, i as i$1, A, b } from './IndividualComponent-DUINtMGK.js';
+import { n } from './property-1psGvXOq.js';
+import { r } from './state-DwbEjqVk.js';
+import { e } from './class-map-YU7g0o3B.js';
+import './directive-ZPhl09Yt.js';
+
+var css_248z = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+:host {
+  --notification-container-color: var(--color-primary-container);
+  --notification-text-color: var(--color-on-primary-container);
+  --notification-leading-icon-color: var(--color-on-primary-container);
+  --notification-accent-color: var(--color-primary);
+  --notification-border-radius: var(--shape-corner-medium);
+  display: block;
+}
+
+:host(:not([inline])) {
+  width: min(100%, 28rem);
+}
+
+.notification {
+  align-items: flex-start;
+  background: var(--notification-container-color);
+  border-inline-start: 4px solid var(--notification-accent-color);
+  border-radius: var(--notification-border-radius);
+  color: var(--notification-text-color);
+  display: grid;
+  gap: var(--spacing-100);
+  grid-template-columns: auto 1fr auto;
+  padding: var(--spacing-150) var(--spacing-100) var(--spacing-150) var(--spacing-150);
+}
+
+.state-icon {
+  align-items: center;
+  color: var(--notification-leading-icon-color);
+  display: inline-flex;
+  justify-content: center;
+  min-height: 2rem;
+  --icon-size: 1.25rem;
+  --icon-color: var(--notification-leading-icon-color);
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-100);
+  min-width: 0;
+}
+
+.content-text {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-025);
+  min-width: 0;
+}
+
+.title {
+  font-family: var(--typography-label-large-font-family) !important;
+  font-size: var(--typography-label-large-font-size) !important;
+  font-weight: var(--typography-label-large-font-weight) !important;
+  line-height: var(--typography-label-large-line-height) !important;
+  letter-spacing: var(--typography-label-large-letter-spacing) !important;
+  color: var(--notification-text-color);
+  overflow-wrap: anywhere;
+}
+
+.subtitle {
+  font-family: var(--typography-body-medium-font-family) !important;
+  font-size: var(--typography-body-medium-font-size) !important;
+  font-weight: var(--typography-body-medium-font-weight) !important;
+  line-height: var(--typography-body-medium-line-height) !important;
+  letter-spacing: var(--typography-body-medium-letter-spacing) !important;
+  color: var(--notification-text-color);
+  opacity: 0.88;
+  overflow-wrap: anywhere;
+}
+
+.title ::slotted(*),
+.subtitle ::slotted(*) {
+  margin: 0;
+}
+
+.actions {
+  display: inline-flex;
+  gap: var(--spacing-100);
+}
+
+.action {
+  --outlined-button-label-text-color: var(--notification-text-color);
+  --outlined-button-outline-color: color-mix(in srgb, var(--notification-text-color) 40%, transparent);
+  --text-button-label-text-color: var(--notification-text-color);
+}
+
+.close-button-container {
+  display: inline-flex;
+}
+
+.close-button {
+  --text-button-label-text-color: var(--notification-text-color);
+}
+
+.notification.inline {
+  align-items: center;
+}
+
+.notification.inline .content {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  gap: var(--spacing-150);
+}
+
+.notification.inline .content-text {
+  display: inline;
+  flex: 1;
+}
+
+.notification.inline .title,
+.notification.inline .subtitle,
+.notification.inline .title ::slotted(*),
+.notification.inline .subtitle ::slotted(*) {
+  display: inline;
+}
+
+.notification:not(.has-subtitle) {
+  align-items: center;
+}
+
+.notification:not(.has-subtitle) .content {
+  gap: 0;
+}
+
+.notification.variant-info {
+  --notification-container-color: var(--color-primary-container);
+  --notification-text-color: var(--color-on-primary-container);
+  --notification-leading-icon-color: var(--color-on-primary-container);
+  --notification-accent-color: var(--color-primary);
+}
+
+.notification.variant-success {
+  --notification-container-color: var(--color-success-container);
+  --notification-text-color: var(--color-on-success-container);
+  --notification-leading-icon-color: var(--color-on-success-container);
+  --notification-accent-color: var(--color-success);
+}
+
+.notification.variant-warning {
+  --notification-container-color: var(--color-warning-container);
+  --notification-text-color: var(--color-on-warning-container);
+  --notification-leading-icon-color: var(--color-on-warning-container);
+  --notification-accent-color: var(--color-warning);
+}
+
+.notification.variant-error {
+  --notification-container-color: var(--color-error-container);
+  --notification-text-color: var(--color-on-error-container);
+  --notification-leading-icon-color: var(--color-on-error-container);
+  --notification-accent-color: var(--color-error);
+}
+
+.notification.high-contrast {
+  --notification-container-color: var(--color-inverse-surface);
+  --notification-text-color: var(--color-inverse-on-surface);
+  --notification-leading-icon-color: var(--color-inverse-on-surface);
+}
+
+.notification.high-contrast.variant-info {
+  --notification-accent-color: var(--color-primary);
+}
+
+.notification.high-contrast.variant-success {
+  --notification-accent-color: var(--color-success);
+}
+
+.notification.high-contrast.variant-warning {
+  --notification-accent-color: var(--color-warning);
+}
+
+.notification.high-contrast.variant-error {
+  --notification-accent-color: var(--color-error);
+}
+
+@media (max-width: 640px) {
+  :host(:not([inline])) {
+    width: 100%;
+  }
+  .notification.inline {
+    align-items: flex-start;
+  }
+  .notification.inline .content {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: var(--spacing-100);
+  }
+  .notification.inline .content-text {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-025);
+  }
+  .notification.inline .title,
+  .notification.inline .subtitle,
+  .notification.inline .title ::slotted(*),
+  .notification.inline .subtitle ::slotted(*) {
+    display: initial;
+  }
+}`;
+
+const VARIANT_LABELS = {
+    success: 'Success',
+    error: 'Error',
+    info: 'Information',
+    warning: 'Warning',
+};
+const VARIANT_ICONS = {
+    success: 'check_circle',
+    error: 'error',
+    info: 'info',
+    warning: 'warning',
+};
+/**
+ * @label Notification
+ * @tag wc-notification
+ * @rawTag notification
+ * @summary Notifications communicate contextual status, errors, warnings, and success messages.
+ *
+ * @cssprop --notification-container-color - Surface color for the notification container.
+ * @cssprop --notification-text-color - Label and supporting text color.
+ * @cssprop --notification-leading-icon-color - Leading state icon color.
+ * @cssprop --notification-accent-color - Start border color for status emphasis.
+ * @cssprop --notification-border-radius - Border radius of the notification container.
+ *
+ * @fires {CustomEvent} notification-dismiss - Fired when the notification is dismissed.
+ * @fires {CustomEvent} notification-action-click - Fired when the action button is clicked.
+ *
+ * @example
+ * ```html
+ * <wc-notification variant="success" action="Undo" dismissible>
+ *   <span slot="title">Record saved</span>
+ * </wc-notification>
+ * ```
+ * @tags display, feedback
+ */
+let Notification = class Notification extends i$1 {
+    constructor() {
+        super(...arguments);
+        /**
+         * If true, content and actions are laid out in a single row.
+         */
+        this.inline = false;
+        /**
+         * The visual variant of the notification.
+         */
+        this.variant = 'info';
+        /**
+         * Enables a high contrast appearance.
+         */
+        this.highContrast = false;
+        /**
+         * If true, renders a dismiss icon button.
+         */
+        this.dismissible = false;
+        /**
+         * Action label text. When provided, an action button is shown.
+         */
+        this.action = '';
+        /**
+         * If true, the host controls visibility when dismissed.
+         */
+        this.managed = false;
+        this.isHidden = false;
+        this.hasSubtitle = false;
+    }
+    /**
+     * Programmatically reveals the notification.
+     */
+    show() {
+        this.isHidden = false;
+    }
+    /**
+     * Programmatically dismisses the notification.
+     */
+    dismiss() {
+        this.hideAndEmitDismiss('programmatic');
+    }
+    get variantIcon() {
+        return VARIANT_ICONS[this.variant];
+    }
+    get variantLabel() {
+        return VARIANT_LABELS[this.variant];
+    }
+    emitActionClick() {
+        this.dispatchEvent(new CustomEvent('notification-action-click', {
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    hideAndEmitDismiss(reason) {
+        if (!this.managed) {
+            this.isHidden = true;
+        }
+        this.dispatchEvent(new CustomEvent('notification-dismiss', {
+            detail: { reason },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    handleSubtitleSlotChange(event) {
+        const slot = event.target;
+        this.hasSubtitle = slot
+            .assignedNodes({ flatten: true })
+            .some(node => node.textContent?.trim());
+    }
+    render() {
+        if (this.isHidden) {
+            return A;
+        }
+        return b `
+      <div
+        class=${e({
+            notification: true,
+            inline: this.inline,
+            'high-contrast': this.highContrast,
+            'has-subtitle': this.hasSubtitle,
+            [`variant-${this.variant}`]: true,
+        })}
+        role="alert"
+        aria-live="polite"
+        aria-label=${this.variantLabel}
+      >
+        <div class="state-icon" aria-hidden="true">
+          <slot name="icon">
+            <wc-icon name=${this.variantIcon}></wc-icon>
+          </slot>
+        </div>
+
+        <div class="content">
+          <div class="content-text">
+            <div class="title">
+              <slot name="title"></slot>
+              <slot></slot>
+            </div>
+
+            <div class="subtitle">
+              <slot name="subtitle" @slotchange=${this.handleSubtitleSlotChange}></slot>
+            </div>
+          </div>
+
+          ${this.action
+            ? b `<div class="actions">
+                <wc-button
+                  class="action"
+                  size="sm"
+                  variant=${this.inline ? 'text' : 'outlined'}
+                  @click=${this.emitActionClick}
+                >
+                  ${this.action}
+                </wc-button>
+              </div>`
+            : A}
+        </div>
+
+        ${this.dismissible
+            ? b `<div class="close-button-container">
+              <wc-icon-button
+                class="close-button"
+                variant="text"
+                size="sm"
+                aria-label="Close notification"
+                @click=${() => {
+                this.hideAndEmitDismiss('dismiss');
+            }}
+              >
+                <wc-icon name="close"></wc-icon>
+              </wc-icon-button>
+            </div>`
+            : A}
+      </div>
+    `;
+    }
+};
+Notification.styles = [css_248z];
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Notification.prototype, "inline", void 0);
+__decorate([
+    n({ type: String, reflect: true })
+], Notification.prototype, "variant", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true, attribute: 'high-contrast' })
+], Notification.prototype, "highContrast", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Notification.prototype, "dismissible", void 0);
+__decorate([
+    n({ type: String })
+], Notification.prototype, "action", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Notification.prototype, "managed", void 0);
+__decorate([
+    r()
+], Notification.prototype, "isHidden", void 0);
+__decorate([
+    r()
+], Notification.prototype, "hasSubtitle", void 0);
+Notification = __decorate([
+    IndividualComponent
+], Notification);
+
+export { Notification };
+//# sourceMappingURL=notification.js.map

package/dist/notification.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"notification.js","sources":["../../src/notification/notification.ts"],"sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport IndividualComponent from '@/IndividualComponent.js';\nimport styles from './notification.scss';\n\ntype NotificationVariant = 'success' | 'error' | 'info' | 'warning';\n\nconst VARIANT_LABELS: Record<NotificationVariant, string> = {\n  success: 'Success',\n  error: 'Error',\n  info: 'Information',\n  warning: 'Warning',\n};\n\nconst VARIANT_ICONS: Record<NotificationVariant, string> = {\n  success: 'check_circle',\n  error: 'error',\n  info: 'info',\n  warning: 'warning',\n};\n\n/**\n * @label Notification\n * @tag wc-notification\n * @rawTag notification\n * @summary Notifications communicate contextual status, errors, warnings, and success messages.\n *\n * @cssprop --notification-container-color - Surface color for the notification container.\n * @cssprop --notification-text-color - Label and supporting text color.\n * @cssprop --notification-leading-icon-color - Leading state icon color.\n * @cssprop --notification-accent-color - Start border color for status emphasis.\n * @cssprop --notification-border-radius - Border radius of the notification container.\n *\n * @fires {CustomEvent} notification-dismiss - Fired when the notification is dismissed.\n * @fires {CustomEvent} notification-action-click - Fired when the action button is clicked.\n *\n * @example\n * ```html\n * <wc-notification variant=\"success\" action=\"Undo\" dismissible>\n *   <span slot=\"title\">Record saved</span>\n * </wc-notification>\n * ```\n * @tags display, feedback\n */\n@IndividualComponent\nexport class Notification extends LitElement {\n  static styles = [styles];\n\n  /**\n   * If true, content and actions are laid out in a single row.\n   */\n  @property({ type: Boolean, reflect: true }) inline = false;\n\n  /**\n   * The visual variant of the notification.\n   */\n  @property({ type: String, reflect: true })\n  variant: NotificationVariant = 'info';\n\n  /**\n   * Enables a high contrast appearance.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'high-contrast' })\n  highContrast = false;\n\n  /**\n   * If true, renders a dismiss icon button.\n   */\n  @property({ type: Boolean, reflect: true }) dismissible = false;\n\n  /**\n   * Action label text. When provided, an action button is shown.\n   */\n  @property({ type: String }) action = '';\n\n  /**\n   * If true, the host controls visibility when dismissed.\n   */\n  @property({ type: Boolean, reflect: true }) managed = false;\n\n  @state() private isHidden = false;\n  \n  @state() private hasSubtitle = false;\n\n  /**\n   * Programmatically reveals the notification.\n   */\n  show() {\n    this.isHidden = false;\n  }\n\n  /**\n   * Programmatically dismisses the notification.\n   */\n  dismiss() {\n    this.hideAndEmitDismiss('programmatic');\n  }\n\n  private get variantIcon() {\n    return VARIANT_ICONS[this.variant];\n  }\n\n  private get variantLabel() {\n    return VARIANT_LABELS[this.variant];\n  }\n\n  private emitActionClick() {\n    this.dispatchEvent(\n      new CustomEvent('notification-action-click', {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private hideAndEmitDismiss(reason: 'dismiss' | 'programmatic') {\n    if (!this.managed) {\n      this.isHidden = true;\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('notification-dismiss', {\n        detail: { reason },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private handleSubtitleSlotChange(event: Event) {\n    const slot = event.target as HTMLSlotElement;\n    this.hasSubtitle = slot\n      .assignedNodes({ flatten: true })\n      .some(node => node.textContent?.trim());\n  }\n\n  render() {\n    if (this.isHidden) {\n      return nothing;\n    }\n\n    return html`\n      <div\n        class=${classMap({\n          notification: true,\n          inline: this.inline,\n          'high-contrast': this.highContrast,\n          'has-subtitle': this.hasSubtitle,\n          [`variant-${this.variant}`]: true,\n        })}\n        role=\"alert\"\n        aria-live=\"polite\"\n        aria-label=${this.variantLabel}\n      >\n        <div class=\"state-icon\" aria-hidden=\"true\">\n          <slot name=\"icon\">\n            <wc-icon name=${this.variantIcon}></wc-icon>\n          </slot>\n        </div>\n\n        <div class=\"content\">\n          <div class=\"content-text\">\n            <div class=\"title\">\n              <slot name=\"title\"></slot>\n              <slot></slot>\n            </div>\n\n            <div class=\"subtitle\">\n              <slot name=\"subtitle\" @slotchange=${this.handleSubtitleSlotChange}></slot>\n            </div>\n          </div>\n\n          ${this.action\n            ? html`<div class=\"actions\">\n                <wc-button\n                  class=\"action\"\n                  size=\"sm\"\n                  variant=${this.inline ? 'text' : 'outlined'}\n                  @click=${this.emitActionClick}\n                >\n                  ${this.action}\n                </wc-button>\n              </div>`\n            : nothing}\n        </div>\n\n        ${this.dismissible\n          ? html`<div class=\"close-button-container\">\n              <wc-icon-button\n                class=\"close-button\"\n                variant=\"text\"\n                size=\"sm\"\n                aria-label=\"Close notification\"\n                @click=${() => {\n                  this.hideAndEmitDismiss('dismiss');\n                }}\n              >\n                <wc-icon name=\"close\"></wc-icon>\n              </wc-icon-button>\n            </div>`\n          : nothing}\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","nothing","html","classMap","styles","property","state"],"mappings":"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"}

package/dist/number-counter.js

@@ -1,7 +1,7 @@
 import { a as i, _ as __decorate, I as IndividualComponent, i as i$1, b, A } from './IndividualComponent-DUINtMGK.js';
 import { n } from './property-1psGvXOq.js';
-import { o } from './style-map-CRFEoCEg.js';
-import './directive-Cuw6h7YA.js';
+import { o } from './style-map-DVmWOuYy.js';
+import './directive-ZPhl09Yt.js';
 
 var css_248z = i`* {
   box-sizing: border-box;

package/dist/number-counter.js.map

@@ -1 +1 @@
-{"version":3,"file":"number-counter.js","sources":["../../src/number-counter/number-counter.ts"],"sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport IndividualComponent from 'src/IndividualComponent.js';\nimport styles from './number-counter.scss';\n\n/**\n * @label Number Counter\n * @tag wc-number-counter\n * @rawTag number-counter\n * @summary Displays a number with commas for thousands.\n *\n * @example\n * ```html\n * <wc-number-counter id=\"number-counter\" value=\"123456789\"></wc-number-counter>\n * <script>\n *   customElements.whenDefined('wc-number-counter').then(() => {\n      const $counter = document.querySelector('#number-counter');\n\n      setInterval(() => {\n        $counter.value = $counter.value + Math.floor(Math.random() * 1000);\n      }, 1000);\n    });\n * </script>\n * ```\n * @tags display\n */\n@IndividualComponent\nexport class NumberCounter extends LitElement {\n  static styles = [styles];\n\n  @property({ type: Number }) value = 0;\n\n  /**\n   * Optional: Allow users to pass a locale, defaulting to 'en-US' for commas.\n   */\n  @property() locale = 'en-US';\n\n  render() {\n    return html`<div class=\"number-counter\">${this.renderDigits()}</div>`;\n  }\n\n  renderDigits() {\n    if (this.value === undefined || this.value === null) return nothing;\n\n    // 1. Format the number with commas (e.g., 1234 -> \"1,234\")\n    const formattedValue = new Intl.NumberFormat(this.locale).format(\n      this.value,\n    );\n\n    // 2. Split the string into individual characters\n    const chars = formattedValue.split('');\n\n    return html`${chars.map(char => {\n      // 3. Check if the character is a digit or a separator (comma/dot)\n      const digit = parseInt(char, 10);\n\n      // eslint-disable-next-line no-restricted-globals\n      if (isNaN(digit)) {\n        return html`<div class=\"digit-separator\">${char}</div>`;\n      }\n\n      return this.renderDigit(digit);\n    })}`;\n  }\n\n  // eslint-disable-next-line class-methods-use-this\n  renderDigit(digit: number) {\n    // Each 'each-digit' is 10% of the 'digit-content' height (since there are 10 numbers)\n    const offset = digit * 10;\n    const style = {\n      transform: `translateY(-${offset}%)`,\n    };\n\n    return html` <div class=\"digit\">\n      <div class=\"digit-content\" style=${styleMap(style)}>\n        ${[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(\n          n => html`<div class=\"each-digit\">${n}</div>`,\n        )}\n      </div>\n    </div>`;\n  }\n}\n"],"names":["LitElement","html","nothing","styleMap","styles","property"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA;;;;;;;;;;;;;;;;;;;;AAoBG;AAEI,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQA,GAAU,CAAA;AAAtC,IAAA,WAAA,GAAA;;QAGuB,IAAA,CAAA,KAAK,GAAG,CAAC;AAErC;;AAEG;QACS,IAAA,CAAA,MAAM,GAAG,OAAO;IA8C9B;IA5CE,MAAM,GAAA;QACJ,OAAOC,CAAI,CAAA,CAAA,4BAAA,EAA+B,IAAI,CAAC,YAAY,EAAE,QAAQ;IACvE;IAEA,YAAY,GAAA;QACV,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI;AAAE,YAAA,OAAOC,CAAO;;AAGnE,QAAA,MAAM,cAAc,GAAG,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,MAAM,CAC9D,IAAI,CAAC,KAAK,CACX;;QAGD,MAAM,KAAK,GAAG,cAAc,CAAC,KAAK,CAAC,EAAE,CAAC;QAEtC,OAAOD,CAAI,CAAA,CAAA,EAAG,KAAK,CAAC,GAAG,CAAC,IAAI,IAAG;;YAE7B,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,EAAE,EAAE,CAAC;;AAGhC,YAAA,IAAI,KAAK,CAAC,KAAK,CAAC,EAAE;AAChB,gBAAA,OAAOA,CAAI,CAAA,CAAA,6BAAA,EAAgC,IAAI,QAAQ;YACzD;AAEA,YAAA,OAAO,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;QAChC,CAAC,CAAC,EAAE;IACN;;AAGA,IAAA,WAAW,CAAC,KAAa,EAAA;;AAEvB,QAAA,MAAM,MAAM,GAAG,KAAK,GAAG,EAAE;AACzB,QAAA,MAAM,KAAK,GAAG;YACZ,SAAS,EAAE,CAAA,YAAA,EAAe,MAAM,CAAA,EAAA,CAAI;SACrC;AAED,QAAA,OAAOA,CAAI,CAAA,CAAA;yCAC0BE,CAAQ,CAAC,KAAK,CAAC,CAAA;AAC9C,QAAA,EAAA,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAClC,CAAC,IAAIF,CAAI,CAAA,CAAA,wBAAA,EAA2B,CAAC,QAAQ,CAC9C;;WAEE;IACT;;AApDO,aAAA,CAAA,MAAM,GAAG,CAACG,QAAM,CAAC;AAEI,UAAA,CAAA;AAA3B,IAAAC,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE;AAAY,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,OAAA,EAAA,MAAA,CAAA;AAK1B,UAAA,CAAA;AAAX,IAAAA,CAAQ;AAAoB,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,QAAA,EAAA,MAAA,CAAA;AARlB,aAAa,GAAA,UAAA,CAAA;IADzB;AACY,CAAA,EAAA,aAAa,CAsDzB;;;;"}
+{"version":3,"file":"number-counter.js","sources":["../../src/number-counter/number-counter.ts"],"sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\n\nimport IndividualComponent from '@/IndividualComponent.js';\n\nimport styles from './number-counter.scss';\n\n/**\n * @label Number Counter\n * @tag wc-number-counter\n * @rawTag number-counter\n * @summary Displays a number with commas for thousands.\n *\n * @example\n * ```html\n * <wc-number-counter id=\"number-counter\" value=\"123456789\"></wc-number-counter>\n * <script>\n *   customElements.whenDefined('wc-number-counter').then(() => {\n      const $counter = document.querySelector('#number-counter');\n\n      setInterval(() => {\n        $counter.value = $counter.value + Math.floor(Math.random() * 1000);\n      }, 1000);\n    });\n * </script>\n * ```\n * @tags display\n */\n@IndividualComponent\nexport class NumberCounter extends LitElement {\n  static styles = [styles];\n\n  @property({ type: Number }) value = 0;\n\n  /**\n   * Optional: Allow users to pass a locale, defaulting to 'en-US' for commas.\n   */\n  @property() locale = 'en-US';\n\n  render() {\n    return html`<div class=\"number-counter\">${this.renderDigits()}</div>`;\n  }\n\n  renderDigits() {\n    if (this.value === undefined || this.value === null) return nothing;\n\n    // 1. Format the number with commas (e.g., 1234 -> \"1,234\")\n    const formattedValue = new Intl.NumberFormat(this.locale).format(\n      this.value,\n    );\n\n    // 2. Split the string into individual characters\n    const chars = formattedValue.split('');\n\n    return html`${chars.map(char => {\n      // 3. Check if the character is a digit or a separator (comma/dot)\n      const digit = parseInt(char, 10);\n\n      // eslint-disable-next-line no-restricted-globals\n      if (isNaN(digit)) {\n        return html`<div class=\"digit-separator\">${char}</div>`;\n      }\n\n      return this.renderDigit(digit);\n    })}`;\n  }\n\n  // eslint-disable-next-line class-methods-use-this\n  renderDigit(digit: number) {\n    // Each 'each-digit' is 10% of the 'digit-content' height (since there are 10 numbers)\n    const offset = digit * 10;\n    const style = {\n      transform: `translateY(-${offset}%)`,\n    };\n\n    return html` <div class=\"digit\">\n      <div class=\"digit-content\" style=${styleMap(style)}>\n        ${[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(\n          n => html`<div class=\"each-digit\">${n}</div>`,\n        )}\n      </div>\n    </div>`;\n  }\n}\n"],"names":["LitElement","html","nothing","styleMap","styles","property"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA;;;;;;;;;;;;;;;;;;;;AAoBG;AAEI,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQA,GAAU,CAAA;AAAtC,IAAA,WAAA,GAAA;;QAGuB,IAAA,CAAA,KAAK,GAAG,CAAC;AAErC;;AAEG;QACS,IAAA,CAAA,MAAM,GAAG,OAAO;IA8C9B;IA5CE,MAAM,GAAA;QACJ,OAAOC,CAAI,CAAA,CAAA,4BAAA,EAA+B,IAAI,CAAC,YAAY,EAAE,QAAQ;IACvE;IAEA,YAAY,GAAA;QACV,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI;AAAE,YAAA,OAAOC,CAAO;;AAGnE,QAAA,MAAM,cAAc,GAAG,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,MAAM,CAC9D,IAAI,CAAC,KAAK,CACX;;QAGD,MAAM,KAAK,GAAG,cAAc,CAAC,KAAK,CAAC,EAAE,CAAC;QAEtC,OAAOD,CAAI,CAAA,CAAA,EAAG,KAAK,CAAC,GAAG,CAAC,IAAI,IAAG;;YAE7B,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,EAAE,EAAE,CAAC;;AAGhC,YAAA,IAAI,KAAK,CAAC,KAAK,CAAC,EAAE;AAChB,gBAAA,OAAOA,CAAI,CAAA,CAAA,6BAAA,EAAgC,IAAI,QAAQ;YACzD;AAEA,YAAA,OAAO,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;QAChC,CAAC,CAAC,EAAE;IACN;;AAGA,IAAA,WAAW,CAAC,KAAa,EAAA;;AAEvB,QAAA,MAAM,MAAM,GAAG,KAAK,GAAG,EAAE;AACzB,QAAA,MAAM,KAAK,GAAG;YACZ,SAAS,EAAE,CAAA,YAAA,EAAe,MAAM,CAAA,EAAA,CAAI;SACrC;AAED,QAAA,OAAOA,CAAI,CAAA,CAAA;yCAC0BE,CAAQ,CAAC,KAAK,CAAC,CAAA;AAC9C,QAAA,EAAA,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAClC,CAAC,IAAIF,CAAI,CAAA,CAAA,wBAAA,EAA2B,CAAC,QAAQ,CAC9C;;WAEE;IACT;;AApDO,aAAA,CAAA,MAAM,GAAG,CAACG,QAAM,CAAC;AAEI,UAAA,CAAA;AAA3B,IAAAC,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE;AAAY,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,OAAA,EAAA,MAAA,CAAA;AAK1B,UAAA,CAAA;AAAX,IAAAA,CAAQ;AAAoB,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,QAAA,EAAA,MAAA,CAAA;AARlB,aAAa,GAAA,UAAA,CAAA;IADzB;AACY,CAAA,EAAA,aAAa,CAsDzB;;;;"}

package/dist/observe-slot-change-BGJfgg2E.js

@@ -0,0 +1,31 @@
+function hasMeaningfulContent(slotElement) {
+    const nodes = slotElement?.assignedNodes({ flatten: true }) || [];
+    for (const node of nodes) {
+        if (node.nodeType === Node.ELEMENT_NODE) {
+            return true;
+        }
+        if (node.nodeType === Node.TEXT_NODE &&
+            (node.textContent?.trim().length || 0) > 0) {
+            return true;
+        }
+    }
+    return false;
+}
+function observerSlotChangesWithCallback(slot, callback) {
+    const observer = new MutationObserver(() => {
+        callback(hasMeaningfulContent(slot));
+    });
+    const assignedNodes = slot?.assignedNodes({ flatten: true }) || [];
+    assignedNodes.forEach(node => {
+        observer.observe(node, {
+            attributes: true,
+            childList: true,
+            characterData: true,
+            subtree: true,
+        });
+    });
+    callback(hasMeaningfulContent(slot));
+}
+
+export { observerSlotChangesWithCallback as o };
+//# sourceMappingURL=observe-slot-change-BGJfgg2E.js.map

package/dist/observe-slot-change-BGJfgg2E.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"observe-slot-change-BGJfgg2E.js","sources":["../../src/__utils/observe-slot-change.ts"],"sourcesContent":["function hasMeaningfulContent(slotElement: HTMLSlotElement | null) {\n  const nodes = slotElement?.assignedNodes({ flatten: true }) || [];\n\n  for (const node of nodes) {\n    if (node.nodeType === Node.ELEMENT_NODE) {\n      return true;\n    }\n    if (\n      node.nodeType === Node.TEXT_NODE &&\n      (node.textContent?.trim().length || 0) > 0\n    ) {\n      return true;\n    }\n  }\n\n  return false;\n}\n\nexport function observerSlotChangesWithCallback(\n  slot: HTMLSlotElement | null,\n  callback: (hasContent: boolean) => void,\n) {\n  const observer = new MutationObserver(() => {\n    callback(hasMeaningfulContent(slot));\n  });\n\n  const assignedNodes = slot?.assignedNodes({ flatten: true }) || [];\n  assignedNodes.forEach(node => {\n    observer.observe(node, {\n      attributes: true,\n      childList: true,\n      characterData: true,\n      subtree: true,\n    });\n  });\n\n  callback(hasMeaningfulContent(slot));\n}"],"names":[],"mappings":"AAAA,SAAS,oBAAoB,CAAC,WAAmC,EAAA;AAC/D,IAAA,MAAM,KAAK,GAAG,WAAW,EAAE,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,IAAI,EAAE;AAEjE,IAAA,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE;QACxB,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY,EAAE;AACvC,YAAA,OAAO,IAAI;QACb;AACA,QAAA,IACE,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,SAAS;AAChC,YAAA,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,EAC1C;AACA,YAAA,OAAO,IAAI;QACb;IACF;AAEA,IAAA,OAAO,KAAK;AACd;AAEM,SAAU,+BAA+B,CAC7C,IAA4B,EAC5B,QAAuC,EAAA;AAEvC,IAAA,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,MAAK;AACzC,QAAA,QAAQ,CAAC,oBAAoB,CAAC,IAAI,CAAC,CAAC;AACtC,IAAA,CAAC,CAAC;AAEF,IAAA,MAAM,aAAa,GAAG,IAAI,EAAE,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,IAAI,EAAE;AAClE,IAAA,aAAa,CAAC,OAAO,CAAC,IAAI,IAAG;AAC3B,QAAA,QAAQ,CAAC,OAAO,CAAC,IAAI,EAAE;AACrB,YAAA,UAAU,EAAE,IAAI;AAChB,YAAA,SAAS,EAAE,IAAI;AACf,YAAA,aAAa,EAAE,IAAI;AACnB,YAAA,OAAO,EAAE,IAAI;AACd,SAAA,CAAC;AACJ,IAAA,CAAC,CAAC;AAEF,IAAA,QAAQ,CAAC,oBAAoB,CAAC,IAAI,CAAC,CAAC;AACtC;;;;"}

package/dist/peacock-loader.js

@@ -1,20 +1,28 @@
-import { U as TreeView, A as Accordion, q as SelectOptionElement, p as Select, t as Snackbar, P as Pagination, z as Table, s as Slider, j as Image, f as Container, v as SubMenu, m as MenuItem, M as Menu, h as EmptyState, u as Spinner, R as Radio, C as Checkbox, w as Switch, c as BreadcrumbItem, b as Breadcrumb, O as Tooltip, K as TimePicker, D as DatePicker, J as Textarea, N as NumberField, k as Input, F as Field, r as Skeleton, e as CircularProgress, L as LinearProgress, H as Tag, d as Chip, l as Link, y as TabPanel, T as Tab, x as TabGroup, G as Tabs, n as Ripple, E as Elevation, g as Divider, o as SegmentedButtonGroup, S as SegmentedButton, B as Badge, a as Avatar, i as FocusRing, I as Icon } from './select-C3XAzenC.js';
-import { B as Button } from './button-COYCtuA8.js';
-import { B as ButtonGroup, I as IconButton } from './button-group-DsXquZQn.js';
+import { A as Accordion, n as NavigationRailItem, N as NavigationRail, s as SelectOptionElement, r as Select, y as Snackbar, v as SidebarSubMenu, u as SidebarMenuItem, t as SidebarMenu, P as Pagination, O as Table, x as Slider, j as Image, f as Container, G as SubMenu, m as MenuItem, M as Menu, h as EmptyState, z as Spinner, R as Radio, C as Checkbox, H as Switch, c as BreadcrumbItem, b as Breadcrumb, X as Tooltip, W as TimePicker, D as DatePicker, V as Textarea, o as NumberField, Y as UrlField, k as Input, F as Field, w as Skeleton, e as CircularProgress, L as LinearProgress, U as Tag, d as Chip, l as Link, K as TabPanel, T as Tab, J as TabGroup, Q as Tabs, p as Ripple, E as Elevation, g as Divider, q as SegmentedButtonGroup, S as SegmentedButton, B as Badge, a as Avatar, i as FocusRing, I as Icon } from './navigation-rail-Lxetd5-Z.js';
+import { B as Button } from './button-DouvOfEU.js';
+import { B as ButtonGroup, I as IconButton } from './button-group-CEdMwvJJ.js';
+import { Fab } from './fab.js';
 import { Card } from './card.js';
 import { CardContent } from './card-content.js';
+import { Banner } from './banner.js';
+import { Notification } from './notification.js';
 import { BottomSheet } from './bottom-sheet.js';
 import { SideSheet } from './side-sheet.js';
+import { Search } from './search.js';
+import { Toolbar } from './toolbar.js';
 import './IndividualComponent-DUINtMGK.js';
 import './property-1psGvXOq.js';
 import './state-DwbEjqVk.js';
-import './directive-Cuw6h7YA.js';
-import './unsafe-html-D3GHRaGQ.js';
-import './dispatch-event-utils-B4odODQf.js';
-import './class-map-3TAnCMAX.js';
+import './directive-ZPhl09Yt.js';
+import './unsafe-html-BsGUjx94.js';
+import './class-map-YU7g0o3B.js';
+import './observe-slot-change-BGJfgg2E.js';
 import './query-QBcUV-L_.js';
-import './style-map-CRFEoCEg.js';
-import './observe-theme-change-DKAIv5BB.js';
+import './BaseHyperlinkMixin-BNuwbiEf.js';
+import './style-map-DVmWOuYy.js';
+import './dispatch-event-utils-CuEqjlPT.js';
+import './BaseButton-DuASuVth.js';
+import './is-dark-mode-DicqGkCJ.js';
 
 class LoaderUtils {
     constructor(loaderConfig) {
@@ -161,6 +169,9 @@ const loaderConfig = {
         'wc-icon-button': {
             CustomElementClass: IconButton,
         },
+        'wc-fab': {
+            CustomElementClass: Fab,
+        },
         'wc-button-group': {
             CustomElementClass: ButtonGroup,
         },
@@ -212,6 +223,12 @@ const loaderConfig = {
         'wc-card-content': {
             CustomElementClass: CardContent,
         },
+        'wc-banner': {
+            CustomElementClass: Banner,
+        },
+        'wc-notification': {
+            CustomElementClass: Notification,
+        },
         'wc-tag': {
             CustomElementClass: Tag,
         },
@@ -230,6 +247,9 @@ const loaderConfig = {
         'wc-input': {
             CustomElementClass: Input,
         },
+        'wc-url-field': {
+            CustomElementClass: UrlField,
+        },
         'wc-number-field': {
             CustomElementClass: NumberField,
         },
@@ -299,11 +319,14 @@ const loaderConfig = {
         'wc-pagination': {
             CustomElementClass: Pagination,
         },
-        'wc-tree-view': {
-            CustomElementClass: TreeView,
+        'wc-sidebar-menu': {
+            CustomElementClass: SidebarMenu,
+        },
+        'wc-sidebar-menu-item': {
+            CustomElementClass: SidebarMenuItem,
         },
-        'wc-tree-node': {
-            CustomElementClass: TreeView.Node,
+        'wc-sidebar-sub-menu': {
+            CustomElementClass: SidebarSubMenu,
         },
         'wc-snackbar': {
             CustomElementClass: Snackbar,
@@ -320,6 +343,18 @@ const loaderConfig = {
         'wc-option': {
             CustomElementClass: SelectOptionElement,
         },
+        'wc-search': {
+            CustomElementClass: Search,
+        },
+        'wc-toolbar': {
+            CustomElementClass: Toolbar,
+        },
+        'wc-navigation-rail': {
+            CustomElementClass: NavigationRail,
+        },
+        'wc-navigation-rail-item': {
+            CustomElementClass: NavigationRailItem,
+        },
         'wc-chart-doughnut': {
             importPath: `${distDirectory}/chart-doughnut.js`,
         },