@redvars/peacock 3.8.1 → 3.8.2

package/dist/notification-manager.js.map

@@ -1 +1 @@
-{"version":3,"file":"notification-manager.js","sources":["../../src/notification-manager/notification-manager.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-manager.scss';\n\ntype NotificationVariant = 'success' | 'error' | 'info' | 'warning';\n\ntype NotificationEntry = {\n  id: string;\n  title: string;\n  subtitle?: string;\n  action?: string;\n  variant: NotificationVariant;\n  dismissible: boolean;\n  timeout: number;\n  hide: boolean;\n  width?: string;\n};\n\nlet notificationCounter = 0;\nfunction nextId(): string {\n  return `wc-notification-${++notificationCounter}`;\n}\n\n/**\n * @label Notification Manager\n * @tag wc-notification-manager\n * @rawTag notification-manager\n * @summary The Notification Manager handles the organization and display of notifications within the application.\n *\n * @fires {CustomEvent} notification-manager-action - Fired when the action button of a managed notification is clicked. Detail: `{ id: string }`.\n * @fires {CustomEvent} notification-manager-dismiss - Fired when a managed notification is dismissed. Detail: `{ id: string }`.\n *\n * @example\n * ```html\n * <wc-notification-manager position=\"bottom-right\"></wc-notification-manager>\n * <script>\n *   window.dispatchEvent(new CustomEvent('notification', {\n *     detail: { title: 'Record saved', variant: 'success', dismissible: true }\n *   }));\n * </script>\n * ```\n * @tags display, feedback\n */\n@IndividualComponent\nexport class NotificationManager extends LitElement {\n  static styles = [styles];\n\n  /**\n   * Name of this manager instance. Only notifications whose `target` matches\n   * this name (or whose `target` is absent and this manager's `name` is\n   * `'global'`) will be handled.\n   */\n  @property({ type: String, reflect: true }) name = 'global';\n\n  /**\n   * Screen position where notifications are stacked.\n   */\n  @property({ type: String, reflect: true })\n  position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' =\n    'bottom-right';\n\n  @state() private notifications: NotificationEntry[] = [];\n\n  private readonly handleWindowNotification = (event: Event) => {\n    const evt = event as CustomEvent;\n    const detail = evt.detail ?? {};\n\n    // Route by target: accept if target matches our name, or if we are global\n    // and no specific target is set.\n    const target: string | undefined = detail.target;\n    const isForUs =\n      target === this.name || (!target && this.name === 'global');\n\n    if (!isForUs || detail.processed) {\n      return;\n    }\n\n    evt.stopPropagation();\n    detail.processed = true;\n\n    const entry: NotificationEntry = {\n      id: nextId(),\n      title: detail.title ?? '',\n      subtitle: detail.subtitle,\n      action: detail.action,\n      variant: detail.variant ?? 'info',\n      dismissible: detail.dismissible ?? false,\n      timeout: detail.timeout ?? 5000,\n      hide: false,\n      width: detail.width,\n    };\n\n    this.notifications = [...this.notifications, entry];\n\n    if (typeof detail.callback === 'function') {\n      detail.callback(entry.id);\n    }\n\n    if (!entry.dismissible) {\n      setTimeout(() => {\n        this._hideNotification(entry.id);\n      }, entry.timeout);\n    }\n  };\n\n  private readonly handleWindowDismiss = (event: Event) => {\n    const evt = event as CustomEvent;\n    const ids: string[] = evt.detail?.notifications ?? [];\n    ids.forEach(id => this._hideNotification(id));\n  };\n\n  connectedCallback() {\n    super.connectedCallback();\n    window.addEventListener('notification', this.handleWindowNotification);\n    window.addEventListener(\n      'notification-dismiss',\n      this.handleWindowDismiss,\n    );\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener(\n      'notification',\n      this.handleWindowNotification,\n    );\n    window.removeEventListener(\n      'notification-dismiss',\n      this.handleWindowDismiss,\n    );\n    super.disconnectedCallback();\n  }\n\n  private _hideNotification(id: string) {\n    this.notifications = this.notifications.map(n =>\n      n.id === id ? { ...n, hide: true } : n,\n    );\n  }\n\n  private _handleDismiss(id: string) {\n    this._hideNotification(id);\n    this.dispatchEvent(\n      new CustomEvent('notification-manager-dismiss', {\n        detail: { id },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private _handleAction(id: string) {\n    this.dispatchEvent(\n      new CustomEvent('notification-manager-action', {\n        detail: { id },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private renderNotification(n: NotificationEntry) {\n    return html`\n      <div\n        id=${n.id}\n        class=${classMap({ notification: true, hidden: n.hide })}\n        style=${n.width ? `width: ${n.width}` : nothing}\n      >\n        <wc-notification\n          variant=${n.variant}\n          ?dismissible=${n.dismissible}\n          managed\n          action=${n.action ?? nothing}\n          @notification-dismiss=${() => this._handleDismiss(n.id)}\n          @notification-action-click=${() => this._handleAction(n.id)}\n        >\n          <span slot=\"title\">${n.title}</span>\n          ${n.subtitle\n            ? html`<span slot=\"subtitle\">${n.subtitle}</span>`\n            : nothing}\n        </wc-notification>\n      </div>\n    `;\n  }\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          'notification-manager': true,\n          [`position-${this.position}`]: true,\n        })}\n      >\n        ${this.notifications.map(n => this.renderNotification(n))}\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","html","classMap","nothing","styles","property","state"],"mappings":"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"}
+{"version":3,"file":"notification-manager.js","sources":["../../src/notification-manager/notification-manager.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-manager.scss';\n\ntype NotificationVariant = 'success' | 'error' | 'info' | 'warning';\n\ntype NotificationEntry = {\n  id: string;\n  title: string;\n  subtitle?: string;\n  action?: string;\n  variant: NotificationVariant;\n  dismissible: boolean;\n  timeout: number;\n  hide: boolean;\n  width?: string;\n};\n\nlet notificationCounter = 0;\nfunction nextId(): string {\n  return `wc-notification-${++notificationCounter}`;\n}\n\n/**\n * @label Notification Manager\n * @tag wc-notification-manager\n * @rawTag notification-manager\n * @summary The Notification Manager handles the organization and display of notifications within the application.\n *\n * @fires {CustomEvent} notification-manager-action - Fired when the action button of a managed notification is clicked. Detail: `{ id: string }`.\n * @fires {CustomEvent} notification-manager-dismiss - Fired when a managed notification is dismissed. Detail: `{ id: string }`.\n *\n * @example\n * ```html\n * <wc-notification-manager position=\"bottom-right\"></wc-notification-manager>\n * <script>\n *   window.dispatchEvent(new CustomEvent('notification', {\n *     detail: { title: 'Record saved', variant: 'success', dismissible: true }\n *   }));\n * </script>\n * ```\n * @tags display, feedback\n */\n@IndividualComponent\nexport class NotificationManager extends LitElement {\n  static styles = [styles];\n\n  /**\n   * Name of this manager instance. Only notifications whose `target` matches\n   * this name (or whose `target` is absent and this manager's `name` is\n   * `'global'`) will be handled.\n   */\n  @property({ type: String, reflect: true }) name = 'global';\n\n  /**\n   * Screen position where notifications are stacked.\n   */\n  @property({ type: String, reflect: true })\n  position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' =\n    'bottom-right';\n\n  @state() private notifications: NotificationEntry[] = [];\n\n  private readonly handleWindowNotification = (event: Event) => {\n    const evt = event as CustomEvent;\n    const detail = evt.detail ?? {};\n\n    // Route by target: accept if target matches our name, or if we are global\n    // and no specific target is set.\n    const target: string | undefined = detail.target;\n    const isForUs =\n      target === this.name || (!target && this.name === 'global');\n\n    if (!isForUs || detail.processed) {\n      return;\n    }\n\n    evt.stopPropagation();\n    detail.processed = true;\n\n    const entry: NotificationEntry = {\n      id: nextId(),\n      title: detail.title ?? '',\n      subtitle: detail.subtitle,\n      action: detail.action,\n      variant: detail.variant ?? 'info',\n      dismissible: detail.dismissible ?? false,\n      timeout: detail.timeout ?? 5000,\n      hide: false,\n      width: detail.width,\n    };\n\n    this.notifications = [...this.notifications, entry];\n\n    if (typeof detail.callback === 'function') {\n      detail.callback(entry.id);\n    }\n\n    if (!entry.dismissible) {\n      setTimeout(() => {\n        this._hideNotification(entry.id);\n      }, entry.timeout);\n    }\n  };\n\n  private readonly handleWindowDismiss = (event: Event) => {\n    const evt = event as CustomEvent;\n    const ids: string[] = evt.detail?.notifications ?? [];\n    ids.forEach(id => this._hideNotification(id));\n  };\n\n  connectedCallback() {\n    super.connectedCallback();\n    window.addEventListener('notification', this.handleWindowNotification);\n    window.addEventListener(\n      'notification-dismiss',\n      this.handleWindowDismiss,\n    );\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener(\n      'notification',\n      this.handleWindowNotification,\n    );\n    window.removeEventListener(\n      'notification-dismiss',\n      this.handleWindowDismiss,\n    );\n    super.disconnectedCallback();\n  }\n\n  private _hideNotification(id: string) {\n    this.notifications = this.notifications.map(n =>\n      n.id === id ? { ...n, hide: true } : n,\n    );\n  }\n\n  private _handleDismiss(id: string) {\n    this._hideNotification(id);\n    this.dispatchEvent(\n      new CustomEvent('notification-manager-dismiss', {\n        detail: { id },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private _handleAction(id: string) {\n    this.dispatchEvent(\n      new CustomEvent('notification-manager-action', {\n        detail: { id },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private renderNotification(n: NotificationEntry) {\n    return html`\n      <div\n        id=${n.id}\n        class=${classMap({ notification: true, hidden: n.hide })}\n        style=${n.width ? `width: ${n.width}` : nothing}\n      >\n        <wc-notification\n          variant=${n.variant}\n          ?dismissible=${n.dismissible}\n          managed\n          action=${n.action ?? nothing}\n          @notification-dismiss=${() => this._handleDismiss(n.id)}\n          @notification-action-click=${() => this._handleAction(n.id)}\n        >\n          <span slot=\"title\">${n.title}</span>\n          ${n.subtitle\n            ? html`<span slot=\"subtitle\">${n.subtitle}</span>`\n            : nothing}\n        </wc-notification>\n      </div>\n    `;\n  }\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          'notification-manager': true,\n          [`position-${this.position}`]: true,\n        })}\n      >\n        ${this.notifications.map(n => this.renderNotification(n))}\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","html","classMap","nothing","styles","property","state"],"mappings":"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"}

package/dist/notification.js

@@ -1,7 +1,7 @@
-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 { i, _ as __decorate, I as IndividualComponent, a as i$1, A, b } from './IndividualComponent-Bdwyrvd6.js';
+import { n } from './property-B49QQ8pS.js';
+import { r } from './state-DkTK9EGF.js';
+import { e } from './class-map-DG7CA1et.js';
 import './directive-ZPhl09Yt.js';
 
 var css_248z = i`* {
@@ -12,6 +12,10 @@ var css_248z = i`* {
   display: none !important;
 }
 
+[hidden] {
+  display: none !important;
+}
+
 :host {
   --notification-container-color: var(--color-primary-container);
   --notification-text-color: var(--color-on-primary-container);

package/dist/notification.js.map

@@ -1 +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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"}
+{"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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,MAAM,cAAc,GAAwC;AAC1D,IAAA,OAAO,EAAE,SAAS;AAClB,IAAA,KAAK,EAAE,OAAO;AACd,IAAA,IAAI,EAAE,aAAa;AACnB,IAAA,OAAO,EAAE,SAAS;CACnB;AAED,MAAM,aAAa,GAAwC;AACzD,IAAA,OAAO,EAAE,cAAc;AACvB,IAAA,KAAK,EAAE,OAAO;AACd,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,OAAO,EAAE,SAAS;CACnB;AAED;;;;;;;;;;;;;;;;;;;;;;AAsBG;AAEI,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQA,GAAU,CAAA;AAArC,IAAA,WAAA,GAAA;;AAGL;;AAEG;QACyC,IAAA,CAAA,MAAM,GAAG,KAAK;AAE1D;;AAEG;QAEH,IAAA,CAAA,OAAO,GAAwB,MAAM;AAErC;;AAEG;QAEH,IAAA,CAAA,YAAY,GAAG,KAAK;AAEpB;;AAEG;QACyC,IAAA,CAAA,WAAW,GAAG,KAAK;AAE/D;;AAEG;QACyB,IAAA,CAAA,MAAM,GAAG,EAAE;AAEvC;;AAEG;QACyC,IAAA,CAAA,OAAO,GAAG,KAAK;QAE1C,IAAA,CAAA,QAAQ,GAAG,KAAK;QAEhB,IAAA,CAAA,WAAW,GAAG,KAAK;IA0HtC;AAxHE;;AAEG;IACH,IAAI,GAAA;AACF,QAAA,IAAI,CAAC,QAAQ,GAAG,KAAK;IACvB;AAEA;;AAEG;IACH,OAAO,GAAA;AACL,QAAA,IAAI,CAAC,kBAAkB,CAAC,cAAc,CAAC;IACzC;AAEA,IAAA,IAAY,WAAW,GAAA;AACrB,QAAA,OAAO,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC;IACpC;AAEA,IAAA,IAAY,YAAY,GAAA;AACtB,QAAA,OAAO,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC;IACrC;IAEQ,eAAe,GAAA;AACrB,QAAA,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,2BAA2B,EAAE;AAC3C,YAAA,OAAO,EAAE,IAAI;AACb,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA,CAAC,CACH;IACH;AAEQ,IAAA,kBAAkB,CAAC,MAAkC,EAAA;AAC3D,QAAA,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;AACjB,YAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;QACtB;AAEA,QAAA,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,sBAAsB,EAAE;YACtC,MAAM,EAAE,EAAE,MAAM,EAAE;AAClB,YAAA,OAAO,EAAE,IAAI;AACb,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA,CAAC,CACH;IACH;AAEQ,IAAA,wBAAwB,CAAC,KAAY,EAAA;AAC3C,QAAA,MAAM,IAAI,GAAG,KAAK,CAAC,MAAyB;QAC5C,IAAI,CAAC,WAAW,GAAG;AAChB,aAAA,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE;AAC/B,aAAA,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,CAAC;IAC3C;IAEA,MAAM,GAAA;AACJ,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACjB,YAAA,OAAOC,CAAO;QAChB;AAEA,QAAA,OAAOC,CAAI,CAAA;;AAEC,cAAA,EAAAC,CAAQ,CAAC;AACf,YAAA,YAAY,EAAE,IAAI;YAClB,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,eAAe,EAAE,IAAI,CAAC,YAAY;YAClC,cAAc,EAAE,IAAI,CAAC,WAAW;AAChC,YAAA,CAAC,WAAW,IAAI,CAAC,OAAO,CAAA,CAAE,GAAG,IAAI;SAClC,CAAC;;;AAGW,mBAAA,EAAA,IAAI,CAAC,YAAY;;;;AAIV,0BAAA,EAAA,IAAI,CAAC,WAAW,CAAA;;;;;;;;;;;;AAYM,gDAAA,EAAA,IAAI,CAAC,wBAAwB,CAAA;;;;AAInE,UAAA,EAAA,IAAI,CAAC;cACHD,CAAI,CAAA,CAAA;;;;4BAIU,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,UAAU;AAClC,yBAAA,EAAA,IAAI,CAAC,eAAe;;AAE3B,kBAAA,EAAA,IAAI,CAAC,MAAM;;AAEV,oBAAA;AACT,cAAED,CAAO;;;AAGX,QAAA,EAAA,IAAI,CAAC;cACHC,CAAI,CAAA,CAAA;;;;;;AAMS,uBAAA,EAAA,MAAK;AACZ,gBAAA,IAAI,CAAC,kBAAkB,CAAC,SAAS,CAAC;YACpC,CAAC;;;;AAIE,kBAAA;AACT,cAAED,CAAO;;KAEd;IACH;;AA7JO,YAAA,CAAA,MAAM,GAAG,CAACG,QAAM,CAAC;AAKoB,UAAA,CAAA;IAA3CC,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;AAAiB,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,QAAA,EAAA,MAAA,CAAA;AAM3D,UAAA,CAAA;IADCA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AACH,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,SAAA,EAAA,MAAA,CAAA;AAMtC,UAAA,CAAA;AADC,IAAAA,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,eAAe,EAAE;AACjD,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,cAAA,EAAA,MAAA,CAAA;AAKuB,UAAA,CAAA;IAA3CA,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;AAAsB,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,aAAA,EAAA,MAAA,CAAA;AAKpC,UAAA,CAAA;AAA3B,IAAAA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE;AAAc,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,QAAA,EAAA,MAAA,CAAA;AAKI,UAAA,CAAA;IAA3CA,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;AAAkB,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,SAAA,EAAA,MAAA,CAAA;AAE3C,UAAA,CAAA;AAAhB,IAAAC,CAAK;AAA4B,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;AAEjB,UAAA,CAAA;AAAhB,IAAAA,CAAK;AAA+B,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,aAAA,EAAA,MAAA,CAAA;AArC1B,YAAY,GAAA,UAAA,CAAA;IADxB;AACY,CAAA,EAAA,YAAY,CA+JxB;;;;"}

package/dist/number-counter.js

@@ -1,6 +1,6 @@
-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-DVmWOuYy.js';
+import { i, _ as __decorate, I as IndividualComponent, a as i$1, b, A } from './IndividualComponent-Bdwyrvd6.js';
+import { n } from './property-B49QQ8pS.js';
+import { o } from './style-map-BQD5Et1D.js';
 import './directive-ZPhl09Yt.js';
 
 var css_248z = i`* {
@@ -11,6 +11,10 @@ var css_248z = i`* {
   display: none !important;
 }
 
+[hidden] {
+  display: none !important;
+}
+
 :host {
   display: block;
   --number-counter-font-size: 1rem;

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';\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;;;;"}
+{"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-D8Xg-kSS.js → observe-slot-change-DPxaZrZF.js}

@@ -4,8 +4,7 @@ function hasMeaningfulContent(slotElement) {
         if (node.nodeType === Node.ELEMENT_NODE) {
             return true;
         }
-        if (node.nodeType === Node.TEXT_NODE &&
-            (node.textContent?.trim().length || 0) > 0) {
+        if (node.nodeType === Node.TEXT_NODE && node.textContent?.match(/\S/)) {
             return true;
         }
     }
@@ -56,5 +55,5 @@ function observerSlotChangesWithCallback(slot, callback) {
     };
 }
 
-export { observerSlotChangesWithCallback as o };
-//# sourceMappingURL=observe-slot-change-D8Xg-kSS.js.map
+export { hasMeaningfulContent as h, observerSlotChangesWithCallback as o };
+//# sourceMappingURL=observe-slot-change-DPxaZrZF.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"observe-slot-change-DPxaZrZF.js","sources":["../../src/__internal/utils/observe-slot-change.ts"],"sourcesContent":["export 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 (node.nodeType === Node.TEXT_NODE && node.textContent?.match(/\\S/)) {\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  if (!slot) return () => {};\n\n  // Keep track of observers for current assigned nodes so we can reconnect\n  let observers: MutationObserver[] = [];\n\n  const observeAssignedNodes = () => {\n    // disconnect previous observers\n    observers.forEach(o => o.disconnect());\n    observers = [];\n\n    const assigned = slot.assignedNodes({ flatten: true }) || [];\n    assigned.forEach(node => {\n      const obs = new MutationObserver(() => {\n        callback(hasMeaningfulContent(slot));\n      });\n      try {\n        obs.observe(node as Node, {\n          attributes: true,\n          childList: true,\n          characterData: true,\n          subtree: true,\n        });\n        observers.push(obs);\n      } catch (e) {\n        // ignore nodes that cannot be observed\n      }\n    });\n\n    // initial check\n    callback(hasMeaningfulContent(slot));\n  };\n\n  // When assigned nodes change (elements added/removed), the slot emits a slotchange\n  // event — re-run observer setup so we track the new nodes. This fixes the case\n  // where an element (e.g. <wc-icon>) is removed from light DOM: previously we\n  // only observed the old node and wouldn't detect its removal.\n  const onSlotChange = () => observeAssignedNodes();\n  slot.addEventListener('slotchange', onSlotChange);\n\n  // Start observing\n  observeAssignedNodes();\n\n  // Return a cleanup function so callers can disconnect observers when needed.\n  return () => {\n    observers.forEach(o => o.disconnect());\n    slot.removeEventListener('slotchange', onSlotChange);\n  };\n}\n"],"names":[],"mappings":"AAAM,SAAU,oBAAoB,CAAC,WAAmC,EAAA;AACtE,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,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,WAAW,EAAE,KAAK,CAAC,IAAI,CAAC,EAAE;AACrE,YAAA,OAAO,IAAI;QACb;IACF;AAEA,IAAA,OAAO,KAAK;AACd;AAEM,SAAU,+BAA+B,CAC7C,IAA4B,EAC5B,QAAuC,EAAA;AAEvC,IAAA,IAAI,CAAC,IAAI;AAAE,QAAA,OAAO,MAAK,EAAE,CAAC;;IAG1B,IAAI,SAAS,GAAuB,EAAE;IAEtC,MAAM,oBAAoB,GAAG,MAAK;;AAEhC,QAAA,SAAS,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,UAAU,EAAE,CAAC;QACtC,SAAS,GAAG,EAAE;AAEd,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,IAAI,EAAE;AAC5D,QAAA,QAAQ,CAAC,OAAO,CAAC,IAAI,IAAG;AACtB,YAAA,MAAM,GAAG,GAAG,IAAI,gBAAgB,CAAC,MAAK;AACpC,gBAAA,QAAQ,CAAC,oBAAoB,CAAC,IAAI,CAAC,CAAC;AACtC,YAAA,CAAC,CAAC;AACF,YAAA,IAAI;AACF,gBAAA,GAAG,CAAC,OAAO,CAAC,IAAY,EAAE;AACxB,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,SAAS,EAAE,IAAI;AACf,oBAAA,aAAa,EAAE,IAAI;AACnB,oBAAA,OAAO,EAAE,IAAI;AACd,iBAAA,CAAC;AACF,gBAAA,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC;YACrB;YAAE,OAAO,CAAC,EAAE;;YAEZ;AACF,QAAA,CAAC,CAAC;;AAGF,QAAA,QAAQ,CAAC,oBAAoB,CAAC,IAAI,CAAC,CAAC;AACtC,IAAA,CAAC;;;;;AAMD,IAAA,MAAM,YAAY,GAAG,MAAM,oBAAoB,EAAE;AACjD,IAAA,IAAI,CAAC,gBAAgB,CAAC,YAAY,EAAE,YAAY,CAAC;;AAGjD,IAAA,oBAAoB,EAAE;;AAGtB,IAAA,OAAO,MAAK;AACV,QAAA,SAAS,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,UAAU,EAAE,CAAC;AACtC,QAAA,IAAI,CAAC,mBAAmB,CAAC,YAAY,EAAE,YAAY,CAAC;AACtD,IAAA,CAAC;AACH;;;;"}

package/dist/option.js

@@ -0,0 +1,121 @@
+import { i, _ as __decorate, I as IndividualComponent, a as i$1, A, b } from './IndividualComponent-Bdwyrvd6.js';
+import { n } from './property-B49QQ8pS.js';
+import { e } from './query-CHb9Ft_d.js';
+import './base-Cl6v8-BZ.js';
+
+/**
+ * @label Select Option
+ * @tag wc-option
+ * @rawTag option
+ *
+ * @summary A declarative option element for use inside wc-select.
+ *
+ * @example
+ * ```html
+ * <wc-select label="Fruit">
+ *   <wc-option value="apple">Apple</wc-option>
+ *   <wc-option value="banana">Banana</wc-option>
+ * </wc-select>
+ * ```
+ */
+let SelectOptionElement = class SelectOptionElement extends i$1 {
+    constructor() {
+        super(...arguments);
+        /**
+         * The option's submitted value.
+         */
+        this.value = '';
+        /**
+         * Optional Material Symbol icon name shown before the label.
+         */
+        this.icon = '';
+        /**
+         * Disables the option so it cannot be selected.
+         */
+        this.disabled = false;
+        // ── Managed by wc-select ──────────────────────────────────────────────────
+        /** Reflects whether this option is currently selected. Set by wc-select. */
+        this.selected = false;
+        /**
+         * When true the menu stays open after selection (used for multi-select).
+         * Set by wc-select.
+         */
+        this.keepOpen = false;
+        /**
+         * When true the option is hidden and excluded from keyboard navigation
+         * because it does not match the current typeahead search query.
+         * Set by wc-select.
+         */
+        this.filtered = false;
+    }
+    /**
+     * Returns the inner `wc-menu-item` element.
+     * `wc-menu` discovers this via its `items` getter which checks `el.item`
+     * as a `MenuItem` proxy, so keyboard navigation and activation work
+     * without `wc-option` extending `MenuItem` directly.
+     */
+    get item() {
+        const el = this._menuItemEl;
+        // Narrow to MenuItem — the shadow DOM only ever contains a wc-menu-item
+        // (a MenuItem subclass), so this cast is safe by construction.
+        return el != null ? el : null;
+    }
+    render() {
+        return b `
+      <wc-menu-item
+        value=${this.value}
+        ?disabled=${this.disabled || this.filtered}
+        ?selected=${this.selected}
+        ?keep-open=${this.keepOpen}
+      >
+        ${this.icon
+            ? b `<wc-icon name=${this.icon} slot="start"></wc-icon>`
+            : A}
+        <slot>${this.value === '' ? 'None' : ''}</slot>
+        ${this.selected && this.keepOpen
+            ? b `<wc-icon
+              name="check"
+              slot="trailing-supporting-text"
+            ></wc-icon>`
+            : A}
+      </wc-menu-item>
+    `;
+    }
+};
+SelectOptionElement.styles = [
+    i `
+      :host {
+        display: contents;
+      }
+      :host([filtered]) {
+        display: none;
+      }
+    `,
+];
+__decorate([
+    n({ type: String, reflect: true })
+], SelectOptionElement.prototype, "value", void 0);
+__decorate([
+    n({ type: String, reflect: true })
+], SelectOptionElement.prototype, "icon", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], SelectOptionElement.prototype, "disabled", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], SelectOptionElement.prototype, "selected", void 0);
+__decorate([
+    n({ type: Boolean, attribute: 'keep-open' })
+], SelectOptionElement.prototype, "keepOpen", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], SelectOptionElement.prototype, "filtered", void 0);
+__decorate([
+    e('wc-menu-item')
+], SelectOptionElement.prototype, "_menuItemEl", void 0);
+SelectOptionElement = __decorate([
+    IndividualComponent
+], SelectOptionElement);
+
+export { SelectOptionElement };
+//# sourceMappingURL=option.js.map

package/dist/option.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"option.js","sources":["../../src/select/option.ts"],"sourcesContent":["import { css, html, LitElement, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport type { MenuItem } from '../menu/menu-item/menu-item.js';\nimport IndividualComponent from '@/IndividualComponent.js';\n\n/**\n * @label Select Option\n * @tag wc-option\n * @rawTag option\n *\n * @summary A declarative option element for use inside wc-select.\n *\n * @example\n * ```html\n * <wc-select label=\"Fruit\">\n *   <wc-option value=\"apple\">Apple</wc-option>\n *   <wc-option value=\"banana\">Banana</wc-option>\n * </wc-select>\n * ```\n */\n@IndividualComponent\nexport class SelectOptionElement extends LitElement {\n  static override styles = [\n    css`\n      :host {\n        display: contents;\n      }\n      :host([filtered]) {\n        display: none;\n      }\n    `,\n  ];\n\n  /**\n   * The option's submitted value.\n   */\n  @property({ type: String, reflect: true })\n  value: string = '';\n\n  /**\n   * Optional Material Symbol icon name shown before the label.\n   */\n  @property({ type: String, reflect: true })\n  icon: string = '';\n\n  /**\n   * Disables the option so it cannot be selected.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean = false;\n\n  // ── Managed by wc-select ──────────────────────────────────────────────────\n\n  /** Reflects whether this option is currently selected. Set by wc-select. */\n  @property({ type: Boolean, reflect: true })\n  selected: boolean = false;\n\n  /**\n   * When true the menu stays open after selection (used for multi-select).\n   * Set by wc-select.\n   */\n  @property({ type: Boolean, attribute: 'keep-open' })\n  keepOpen: boolean = false;\n\n  /**\n   * When true the option is hidden and excluded from keyboard navigation\n   * because it does not match the current typeahead search query.\n   * Set by wc-select.\n   */\n  @property({ type: Boolean, reflect: true })\n  filtered: boolean = false;\n\n  @query('wc-menu-item')\n  private readonly _menuItemEl?: HTMLElement;\n\n  /**\n   * Returns the inner `wc-menu-item` element.\n   * `wc-menu` discovers this via its `items` getter which checks `el.item`\n   * as a `MenuItem` proxy, so keyboard navigation and activation work\n   * without `wc-option` extending `MenuItem` directly.\n   */\n  get item(): MenuItem | null {\n    const el = this._menuItemEl;\n    // Narrow to MenuItem — the shadow DOM only ever contains a wc-menu-item\n    // (a MenuItem subclass), so this cast is safe by construction.\n    return el != null ? (el as unknown as MenuItem) : null;\n  }\n\n  override render() {\n    return html`\n      <wc-menu-item\n        value=${this.value}\n        ?disabled=${this.disabled || this.filtered}\n        ?selected=${this.selected}\n        ?keep-open=${this.keepOpen}\n      >\n        ${this.icon\n          ? html`<wc-icon name=${this.icon} slot=\"start\"></wc-icon>`\n          : nothing}\n        <slot>${this.value === '' ? 'None' : ''}</slot>\n        ${this.selected && this.keepOpen\n          ? html`<wc-icon\n              name=\"check\"\n              slot=\"trailing-supporting-text\"\n            ></wc-icon>`\n          : nothing}\n      </wc-menu-item>\n    `;\n  }\n}\n"],"names":["LitElement","html","nothing","css","property","query"],"mappings":";;;;;AAKA;;;;;;;;;;;;;;AAcG;AAEI,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQA,GAAU,CAAA;AAA5C,IAAA,WAAA,GAAA;;AAYL;;AAEG;QAEH,IAAA,CAAA,KAAK,GAAW,EAAE;AAElB;;AAEG;QAEH,IAAA,CAAA,IAAI,GAAW,EAAE;AAEjB;;AAEG;QAEH,IAAA,CAAA,QAAQ,GAAY,KAAK;;;QAMzB,IAAA,CAAA,QAAQ,GAAY,KAAK;AAEzB;;;AAGG;QAEH,IAAA,CAAA,QAAQ,GAAY,KAAK;AAEzB;;;;AAIG;QAEH,IAAA,CAAA,QAAQ,GAAY,KAAK;IAuC3B;AAlCE;;;;;AAKG;AACH,IAAA,IAAI,IAAI,GAAA;AACN,QAAA,MAAM,EAAE,GAAG,IAAI,CAAC,WAAW;;;QAG3B,OAAO,EAAE,IAAI,IAAI,GAAI,EAA0B,GAAG,IAAI;IACxD;IAES,MAAM,GAAA;AACb,QAAA,OAAOC,CAAI,CAAA;;AAEC,cAAA,EAAA,IAAI,CAAC,KAAK;AACN,kBAAA,EAAA,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;AAC9B,kBAAA,EAAA,IAAI,CAAC,QAAQ;AACZ,mBAAA,EAAA,IAAI,CAAC,QAAQ;;AAExB,QAAA,EAAA,IAAI,CAAC;AACL,cAAEA,CAAI,CAAA,iBAAiB,IAAI,CAAC,IAAI,CAAA,wBAAA;AAChC,cAAEC,CAAO;gBACH,IAAI,CAAC,KAAK,KAAK,EAAE,GAAG,MAAM,GAAG,EAAE,CAAA;AACrC,QAAA,EAAA,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC;cACpBD,CAAI,CAAA,CAAA;;;AAGQ,uBAAA;AACd,cAAEC,CAAO;;KAEd;IACH;;AAtFgB,mBAAA,CAAA,MAAM,GAAG;AACvB,IAAAC,CAAG,CAAA;;;;;;;AAOF,IAAA,CAAA;AACF,CATqB;AAetB,UAAA,CAAA;IADCC,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AACtB,CAAA,EAAA,mBAAA,CAAA,SAAA,EAAA,OAAA,EAAA,MAAA,CAAA;AAMnB,UAAA,CAAA;IADCA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AACvB,CAAA,EAAA,mBAAA,CAAA,SAAA,EAAA,MAAA,EAAA,MAAA,CAAA;AAMlB,UAAA,CAAA;IADCA,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;AAChB,CAAA,EAAA,mBAAA,CAAA,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;AAM1B,UAAA,CAAA;IADCA,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;AAChB,CAAA,EAAA,mBAAA,CAAA,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;AAO1B,UAAA,CAAA;IADCA,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE;AACzB,CAAA,EAAA,mBAAA,CAAA,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;AAQ1B,UAAA,CAAA;IADCA,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;AAChB,CAAA,EAAA,mBAAA,CAAA,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;AAGT,UAAA,CAAA;IADhBC,CAAK,CAAC,cAAc;AACsB,CAAA,EAAA,mBAAA,CAAA,SAAA,EAAA,aAAA,EAAA,MAAA,CAAA;AApDhC,mBAAmB,GAAA,UAAA,CAAA;IAD/B;AACY,CAAA,EAAA,mBAAmB,CAwF/B;;;;"}

package/dist/pagination.js

@@ -0,0 +1,255 @@
+import { i, _ as __decorate, I as IndividualComponent, a as i$1, b } from './IndividualComponent-Bdwyrvd6.js';
+import { n } from './property-B49QQ8pS.js';
+
+var css_248z = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+:host {
+  display: block;
+}
+
+.pagination {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--spacing-200, 1rem);
+  background: var(--color-surface, #fff);
+  padding: var(--spacing-150, 0.75rem) var(--spacing-200, 1rem);
+}
+@media (max-width: 48rem) {
+  .pagination {
+    flex-wrap: wrap;
+    justify-content: space-between;
+    row-gap: var(--spacing-100, 0.5rem);
+  }
+}
+.pagination .page-size {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-100, 0.5rem);
+  min-inline-size: max-content;
+}
+.pagination .page-size-label {
+  font-family: var(--typography-body-small-font-family);
+  font-size: var(--typography-body-small-font-size);
+  font-weight: var(--typography-body-small-font-weight);
+  line-height: var(--typography-body-small-line-height);
+  letter-spacing: var(--typography-body-small-letter-spacing);
+  color: var(--color-on-surface-variant);
+  white-space: nowrap;
+}
+.pagination .page-size-select {
+  inline-size: 5.5rem;
+  min-inline-size: 5.5rem;
+  --field-container-height: 2.5rem;
+}
+.pagination .pagination-item-count {
+  margin-inline-start: auto;
+  display: flex;
+  align-items: center;
+}
+@media (max-width: 48rem) {
+  .pagination .pagination-item-count {
+    order: 3;
+    margin-inline-start: 0;
+    inline-size: 100%;
+  }
+}
+.pagination .pagination-text {
+  font-family: var(--typography-body-medium-font-family);
+  font-size: var(--typography-body-medium-font-size);
+  font-weight: var(--typography-body-medium-font-weight);
+  line-height: var(--typography-body-medium-line-height);
+  letter-spacing: var(--typography-body-medium-letter-spacing);
+  color: var(--color-on-surface-variant);
+}
+.pagination .pagination-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-025, 0.125rem);
+}
+.pagination .nav-button {
+  --button-container-shape: 999px;
+}`;
+
+const DEFAULT_PAGE_SIZES = [10, 25, 50, 100];
+/**
+ * @label Pagination
+ * @tag wc-pagination
+ * @rawTag pagination
+ * @summary A pagination control with page size selector, item count display, and previous/next navigation.
+ * @overview
+ * <p>The pagination component provides controls for navigating through paged data sets.</p>
+ *
+ * @fires {CustomEvent} page - Dispatched when the page or page size changes. Detail: `{ page, pageSize }`.
+ *
+ * @example
+ * ```html
+ * <wc-pagination style="width: 100%;" page="1" page-size="10" total-items="100"></wc-pagination>
+ * ```
+ * @tags navigation, data
+ */
+let Pagination = class Pagination extends i$1 {
+    constructor() {
+        super(...arguments);
+        /**
+         * The current page number (1-based). Defaults to `1`.
+         */
+        this.page = 1;
+        /**
+         * The number of rows per page. Defaults to `10`.
+         */
+        this.pageSize = 10;
+        /**
+         * Total number of items.
+         */
+        this.totalItems = 0;
+        /**
+         * Supported page size options.
+         */
+        this.pageSizes = DEFAULT_PAGE_SIZES;
+        this.handlePreviousPage = () => {
+            this.setPage(this.page - 1);
+        };
+        this.handleNextPage = () => {
+            this.setPage(this.page + 1);
+        };
+    }
+    willUpdate(changedProperties) {
+        // Normalize page-size options so the select always has valid numeric values.
+        const normalizedPageSizes = [...new Set(this.pageSizes
+                .map(size => Number(size))
+                .filter(size => Number.isFinite(size) && size > 0)
+                .map(size => Math.trunc(size)))];
+        if (!normalizedPageSizes.length) {
+            normalizedPageSizes.push(...DEFAULT_PAGE_SIZES);
+        }
+        if (changedProperties.has('pageSizes') &&
+            (this.pageSizes.length !== normalizedPageSizes.length ||
+                this.pageSizes.some((size, index) => size !== normalizedPageSizes[index]))) {
+            this.pageSizes = normalizedPageSizes;
+        }
+        if (!this.pageSizes.includes(this.pageSize)) {
+            this.pageSize = this.pageSizes[0] ?? DEFAULT_PAGE_SIZES[0];
+        }
+        if (!Number.isFinite(this.totalItems) || this.totalItems < 0) {
+            this.totalItems = 0;
+        }
+        if (!Number.isFinite(this.page) || this.page < 1) {
+            this.page = 1;
+        }
+        const maxPage = this.getTotalPages();
+        if (this.page > maxPage) {
+            this.page = maxPage;
+        }
+    }
+    getTotalPages() {
+        if (this.totalItems <= 0)
+            return 1;
+        return Math.max(1, Math.ceil(this.totalItems / this.pageSize));
+    }
+    setPage(nextPage) {
+        const clampedPage = Math.min(Math.max(1, nextPage), this.getTotalPages());
+        if (clampedPage === this.page)
+            return;
+        this.page = clampedPage;
+        this.dispatchPageEvent();
+    }
+    handlePageSizeChange(event) {
+        const rawValue = event.detail?.value;
+        const parsedPageSize = Number.parseInt(rawValue ?? '', 10);
+        if (!Number.isFinite(parsedPageSize) || parsedPageSize <= 0) {
+            return;
+        }
+        this.pageSize = parsedPageSize;
+        this.page = 1;
+        this.dispatchPageEvent();
+    }
+    dispatchPageEvent() {
+        this.dispatchEvent(new CustomEvent('page', {
+            detail: { page: this.page, pageSize: this.pageSize },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    render() {
+        const startItem = this.totalItems === 0 ? 0 : this.pageSize * (this.page - 1) + 1;
+        const endItem = Math.min(this.pageSize * this.page, this.totalItems);
+        const isFirstPage = this.page === 1;
+        const isLastPage = this.pageSize * this.page >= this.totalItems;
+        return b `
+      <div class="pagination">
+        <div class="page-size">
+          <span class="page-size-label">Items per page:</span>
+          <wc-select
+            class="page-size-select"
+            .value=${String(this.pageSize)}
+            aria-label="Items per page"
+            @change=${this.handlePageSizeChange}
+          >
+            ${this.pageSizes.map(size => b `<wc-option value=${String(size)}>${size}</wc-option>`)}
+          </wc-select>
+        </div>
+
+        <div class="pagination-item-count">
+          <span class="pagination-text">
+            ${startItem} - ${endItem} of ${this.totalItems}
+          </span>
+        </div>
+
+        <div class="pagination-actions">
+          <wc-icon-button
+            class="nav-button"
+            color="secondary"
+            variant="text"
+            size="sm"
+            title="Previous page"
+            ?disabled=${isFirstPage}
+            @click=${this.handlePreviousPage}
+          >
+            <wc-icon name="keyboard_arrow_left"></wc-icon>
+          </wc-icon-button>
+          <wc-icon-button
+            class="nav-button"
+            color="secondary"
+            variant="text"
+            size="sm"
+            title="Next page"
+            ?disabled=${isLastPage}
+            @click=${this.handleNextPage}
+          >
+            <wc-icon name="keyboard_arrow_right"></wc-icon>
+          </wc-icon-button>
+        </div>
+      </div>
+    `;
+    }
+};
+Pagination.styles = [css_248z];
+__decorate([
+    n({ type: Number })
+], Pagination.prototype, "page", void 0);
+__decorate([
+    n({ type: Number, attribute: 'page-size' })
+], Pagination.prototype, "pageSize", void 0);
+__decorate([
+    n({ type: Number, attribute: 'total-items' })
+], Pagination.prototype, "totalItems", void 0);
+__decorate([
+    n({ type: Array, attribute: 'page-sizes' })
+], Pagination.prototype, "pageSizes", void 0);
+Pagination = __decorate([
+    IndividualComponent
+], Pagination);
+
+export { Pagination };
+//# sourceMappingURL=pagination.js.map

package/dist/pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.js","sources":["../../src/pagination/pagination.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport type { PropertyValues } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport styles from './pagination.scss';\nimport IndividualComponent from '@/IndividualComponent.js';\n\nconst DEFAULT_PAGE_SIZES = [10, 25, 50, 100];\n\n/**\n * @label Pagination\n * @tag wc-pagination\n * @rawTag pagination\n * @summary A pagination control with page size selector, item count display, and previous/next navigation.\n * @overview\n * <p>The pagination component provides controls for navigating through paged data sets.</p>\n *\n * @fires {CustomEvent} page - Dispatched when the page or page size changes. Detail: `{ page, pageSize }`.\n *\n * @example\n * ```html\n * <wc-pagination style=\"width: 100%;\" page=\"1\" page-size=\"10\" total-items=\"100\"></wc-pagination>\n * ```\n * @tags navigation, data\n */\n@IndividualComponent\nexport class Pagination extends LitElement {\n  static styles = [styles];\n\n  /**\n   * The current page number (1-based). Defaults to `1`.\n   */\n  @property({ type: Number })\n  page: number = 1;\n\n  /**\n   * The number of rows per page. Defaults to `10`.\n   */\n  @property({ type: Number, attribute: 'page-size' })\n  pageSize: number = 10;\n\n  /**\n   * Total number of items.\n   */\n  @property({ type: Number, attribute: 'total-items' })\n  totalItems: number = 0;\n\n  /**\n   * Supported page size options.\n   */\n  @property({ type: Array, attribute: 'page-sizes' })\n  pageSizes: number[] = DEFAULT_PAGE_SIZES;\n\n  protected override willUpdate(\n    changedProperties: PropertyValues<Pagination>,\n  ): void {\n    // Normalize page-size options so the select always has valid numeric values.\n    const normalizedPageSizes = [...new Set(\n      this.pageSizes\n        .map(size => Number(size))\n        .filter(size => Number.isFinite(size) && size > 0)\n        .map(size => Math.trunc(size)),\n    )];\n\n    if (!normalizedPageSizes.length) {\n      normalizedPageSizes.push(...DEFAULT_PAGE_SIZES);\n    }\n\n    if (\n      changedProperties.has('pageSizes') &&\n      (this.pageSizes.length !== normalizedPageSizes.length ||\n        this.pageSizes.some((size, index) => size !== normalizedPageSizes[index]))\n    ) {\n      this.pageSizes = normalizedPageSizes;\n    }\n\n    if (!this.pageSizes.includes(this.pageSize)) {\n      this.pageSize = this.pageSizes[0] ?? DEFAULT_PAGE_SIZES[0];\n    }\n\n    if (!Number.isFinite(this.totalItems) || this.totalItems < 0) {\n      this.totalItems = 0;\n    }\n\n    if (!Number.isFinite(this.page) || this.page < 1) {\n      this.page = 1;\n    }\n\n    const maxPage = this.getTotalPages();\n    if (this.page > maxPage) {\n      this.page = maxPage;\n    }\n  }\n\n  private getTotalPages(): number {\n    if (this.totalItems <= 0) return 1;\n    return Math.max(1, Math.ceil(this.totalItems / this.pageSize));\n  }\n\n  private setPage(nextPage: number) {\n    const clampedPage = Math.min(Math.max(1, nextPage), this.getTotalPages());\n    if (clampedPage === this.page) return;\n    this.page = clampedPage;\n    this.dispatchPageEvent();\n  }\n\n  private handlePageSizeChange(event: CustomEvent<{ value?: string }>) {\n    const rawValue = event.detail?.value;\n    const parsedPageSize = Number.parseInt(rawValue ?? '', 10);\n\n    if (!Number.isFinite(parsedPageSize) || parsedPageSize <= 0) {\n      return;\n    }\n\n    this.pageSize = parsedPageSize;\n    this.page = 1;\n    this.dispatchPageEvent();\n  }\n\n  private handlePreviousPage = () => {\n    this.setPage(this.page - 1);\n  };\n\n  private handleNextPage = () => {\n    this.setPage(this.page + 1);\n  };\n\n  private dispatchPageEvent() {\n    this.dispatchEvent(\n      new CustomEvent('page', {\n        detail: { page: this.page, pageSize: this.pageSize },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  render() {\n    const startItem = this.totalItems === 0 ? 0 : this.pageSize * (this.page - 1) + 1;\n    const endItem = Math.min(this.pageSize * this.page, this.totalItems);\n    const isFirstPage = this.page === 1;\n    const isLastPage = this.pageSize * this.page >= this.totalItems;\n\n    return html`\n      <div class=\"pagination\">\n        <div class=\"page-size\">\n          <span class=\"page-size-label\">Items per page:</span>\n          <wc-select\n            class=\"page-size-select\"\n            .value=${String(this.pageSize)}\n            aria-label=\"Items per page\"\n            @change=${this.handlePageSizeChange}\n          >\n            ${this.pageSizes.map(\n              size => html`<wc-option value=${String(size)}>${size}</wc-option>`,\n            )}\n          </wc-select>\n        </div>\n\n        <div class=\"pagination-item-count\">\n          <span class=\"pagination-text\">\n            ${startItem} - ${endItem} of ${this.totalItems}\n          </span>\n        </div>\n\n        <div class=\"pagination-actions\">\n          <wc-icon-button\n            class=\"nav-button\"\n            color=\"secondary\"\n            variant=\"text\"\n            size=\"sm\"\n            title=\"Previous page\"\n            ?disabled=${isFirstPage}\n            @click=${this.handlePreviousPage}\n          >\n            <wc-icon name=\"keyboard_arrow_left\"></wc-icon>\n          </wc-icon-button>\n          <wc-icon-button\n            class=\"nav-button\"\n            color=\"secondary\"\n            variant=\"text\"\n            size=\"sm\"\n            title=\"Next page\"\n            ?disabled=${isLastPage}\n            @click=${this.handleNextPage}\n          >\n            <wc-icon name=\"keyboard_arrow_right\"></wc-icon>\n          </wc-icon-button>\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","html","styles","property"],"mappings":"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"}

package/dist/popover-content.js

@@ -1,6 +1,6 @@
-import { a as i, _ as __decorate, I as IndividualComponent, i as i$1, b } from './IndividualComponent-DUINtMGK.js';
-import { n } from './property-1psGvXOq.js';
-import { e } from './class-map-YU7g0o3B.js';
+import { i, _ as __decorate, I as IndividualComponent, a as i$1, b } from './IndividualComponent-Bdwyrvd6.js';
+import { n } from './property-B49QQ8pS.js';
+import { e } from './class-map-DG7CA1et.js';
 import './directive-ZPhl09Yt.js';
 
 var css_248z = i`* {
@@ -11,6 +11,10 @@ var css_248z = i`* {
   display: none !important;
 }
 
+[hidden] {
+  display: none !important;
+}
+
 :host {
   position: fixed;
   top: 0;