@redvars/peacock 3.8.2 → 3.8.4

package/dist/side-sheet.js

@@ -5,6 +5,7 @@ import './directive-ZPhl09Yt.js';
 
 var css_248z = i`* {
   box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .screen-reader-only {
@@ -165,7 +166,7 @@ let SideSheet = class SideSheet extends i$1 {
         aria-modal=${this.variant === 'modal' ? 'true' : 'false'}
         aria-hidden=${!this.open ? 'true' : 'false'}
       >
-        <div class="content">
+        <div class="content" ?inert=${!this.open}>
           <slot></slot>
         </div>
       </div>

package/dist/side-sheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"side-sheet.js","sources":["../../src/side-sheet/side-sheet.ts"],"sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport IndividualComponent from '../IndividualComponent.js';\nimport styles from './side-sheet.scss';\n\n/**\n * @label Side Sheet\n * @tag wc-side-sheet\n * @rawTag side-sheet\n * @summary Side sheets slide in from the edge of the screen to reveal supplemental content. Supports standard and modal variants.\n *\n * @cssprop --side-sheet-container-color - Background color of the sheet container.\n * @cssprop --side-sheet-scrim-color - Color of the modal scrim overlay.\n * @cssprop --side-sheet-shape - Corner radius of the leading edge.\n * @cssprop --side-sheet-width - Width of the side sheet.\n *\n * @example\n * ```html\n * Side Sheet\n\n * ```\n * @tags navigation, overlay\n */\n@IndividualComponent\nexport class SideSheet extends LitElement {\n  static styles = [styles];\n\n  /** Whether the sheet is visible. */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /**\n   * Sheet variant.\n   * - `\"standard\"`: Coexists with page content; no scrim.\n   * - `\"modal\"`: Overlays page content with a scrim backdrop.\n   */\n  @property({ type: String, reflect: true }) variant: 'standard' | 'modal' =\n    'modal';\n\n  /**\n   * Side from which the sheet slides in.\n   * - `\"left\"`: Sheet opens from the left edge.\n   * - `\"right\"`: Sheet opens from the right edge.\n   */\n  @property({ type: String, reflect: true }) position: 'left' | 'right' =\n    'right';\n\n  show() {\n    this.open = true;\n  }\n\n  hide() {\n    this._close('programmatic');\n  }\n\n  private _close(reason: string) {\n    if (!this.open) return;\n    this.open = false;\n    this.dispatchEvent(\n      new CustomEvent('side-sheet-close', {\n        detail: { reason },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private _handleScrimClick() {\n    if (this.variant === 'modal') {\n      this._close('scrim');\n    }\n  }\n\n  render() {\n    return html`\n      ${this.variant === 'modal'\n        ? html`<div\n            class=${classMap({ scrim: true, visible: this.open })}\n            @click=${this._handleScrimClick}\n          ></div>`\n        : nothing}\n\n      <div\n        class=${classMap({\n          sheet: true,\n          open: this.open,\n          [`variant-${this.variant}`]: true,\n          [`position-${this.position}`]: true,\n        })}\n        role=\"dialog\"\n        aria-modal=${this.variant === 'modal' ? 'true' : 'false'}\n        aria-hidden=${!this.open ? 'true' : 'false'}\n      >\n        <div class=\"content\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","html","classMap","nothing","styles","property"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA;;;;;;;;;;;;;;;;;AAiBG;AAEI,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQA,GAAU,CAAA;AAAlC,IAAA,WAAA,GAAA;;;QAIuC,IAAA,CAAA,IAAI,GAAG,KAAK;AAExD;;;;AAIG;QACwC,IAAA,CAAA,OAAO,GAChD,OAAO;AAET;;;;AAIG;QACwC,IAAA,CAAA,QAAQ,GACjD,OAAO;IAsDX;IApDE,IAAI,GAAA;AACF,QAAA,IAAI,CAAC,IAAI,GAAG,IAAI;IAClB;IAEA,IAAI,GAAA;AACF,QAAA,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC;IAC7B;AAEQ,IAAA,MAAM,CAAC,MAAc,EAAA;QAC3B,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE;AAChB,QAAA,IAAI,CAAC,IAAI,GAAG,KAAK;AACjB,QAAA,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,kBAAkB,EAAE;YAClC,MAAM,EAAE,EAAE,MAAM,EAAE;AAClB,YAAA,OAAO,EAAE,IAAI;AACb,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA,CAAC,CACH;IACH;IAEQ,iBAAiB,GAAA;AACvB,QAAA,IAAI,IAAI,CAAC,OAAO,KAAK,OAAO,EAAE;AAC5B,YAAA,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC;QACtB;IACF;IAEA,MAAM,GAAA;AACJ,QAAA,OAAOC,CAAI,CAAA;QACP,IAAI,CAAC,OAAO,KAAK;cACfA,CAAI,CAAA,CAAA;AACM,kBAAA,EAAAC,CAAQ,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC;AAC5C,mBAAA,EAAA,IAAI,CAAC,iBAAiB;AACzB,iBAAA;AACV,cAAEC,CAAO;;;AAGD,cAAA,EAAAD,CAAQ,CAAC;AACf,YAAA,KAAK,EAAE,IAAI;YACX,IAAI,EAAE,IAAI,CAAC,IAAI;AACf,YAAA,CAAC,WAAW,IAAI,CAAC,OAAO,CAAA,CAAE,GAAG,IAAI;AACjC,YAAA,CAAC,YAAY,IAAI,CAAC,QAAQ,CAAA,CAAE,GAAG,IAAI;SACpC,CAAC;;qBAEW,IAAI,CAAC,OAAO,KAAK,OAAO,GAAG,MAAM,GAAG,OAAO;sBAC1C,CAAC,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,OAAO;;;;;;KAM9C;IACH;;AAxEO,SAAA,CAAA,MAAM,GAAG,CAACE,QAAM,CAAC;AAGoB,UAAA,CAAA;IAA3CC,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;AAAe,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,MAAA,EAAA,MAAA,CAAA;AAOd,UAAA,CAAA;IAA1CA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AAC/B,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,SAAA,EAAA,MAAA,CAAA;AAOiC,UAAA,CAAA;IAA1CA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AAC/B,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;AApBC,SAAS,GAAA,UAAA,CAAA;IADrB;AACY,CAAA,EAAA,SAAS,CA0ErB;;;;"}
+{"version":3,"file":"side-sheet.js","sources":["../../src/side-sheet/side-sheet.ts"],"sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport IndividualComponent from '../IndividualComponent.js';\nimport styles from './side-sheet.scss';\n\n/**\n * @label Side Sheet\n * @tag wc-side-sheet\n * @rawTag side-sheet\n * @summary Side sheets slide in from the edge of the screen to reveal supplemental content. Supports standard and modal variants.\n *\n * @cssprop --side-sheet-container-color - Background color of the sheet container.\n * @cssprop --side-sheet-scrim-color - Color of the modal scrim overlay.\n * @cssprop --side-sheet-shape - Corner radius of the leading edge.\n * @cssprop --side-sheet-width - Width of the side sheet.\n *\n * @example\n * ```html\n * Side Sheet\n\n * ```\n * @tags navigation, overlay\n */\n@IndividualComponent\nexport class SideSheet extends LitElement {\n  static styles = [styles];\n\n  /** Whether the sheet is visible. */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /**\n   * Sheet variant.\n   * - `\"standard\"`: Coexists with page content; no scrim.\n   * - `\"modal\"`: Overlays page content with a scrim backdrop.\n   */\n  @property({ type: String, reflect: true }) variant: 'standard' | 'modal' =\n    'modal';\n\n  /**\n   * Side from which the sheet slides in.\n   * - `\"left\"`: Sheet opens from the left edge.\n   * - `\"right\"`: Sheet opens from the right edge.\n   */\n  @property({ type: String, reflect: true }) position: 'left' | 'right' =\n    'right';\n\n  show() {\n    this.open = true;\n  }\n\n  hide() {\n    this._close('programmatic');\n  }\n\n  private _close(reason: string) {\n    if (!this.open) return;\n    this.open = false;\n    this.dispatchEvent(\n      new CustomEvent('side-sheet-close', {\n        detail: { reason },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private _handleScrimClick() {\n    if (this.variant === 'modal') {\n      this._close('scrim');\n    }\n  }\n\n  render() {\n    return html`\n      ${this.variant === 'modal'\n        ? html`<div\n            class=${classMap({ scrim: true, visible: this.open })}\n            @click=${this._handleScrimClick}\n          ></div>`\n        : nothing}\n\n      <div\n        class=${classMap({\n          sheet: true,\n          open: this.open,\n          [`variant-${this.variant}`]: true,\n          [`position-${this.position}`]: true,\n        })}\n        role=\"dialog\"\n        aria-modal=${this.variant === 'modal' ? 'true' : 'false'}\n        aria-hidden=${!this.open ? 'true' : 'false'}\n      >\n        <div class=\"content\" ?inert=${!this.open}>\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","html","classMap","nothing","styles","property"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA;;;;;;;;;;;;;;;;;AAiBG;AAEI,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQA,GAAU,CAAA;AAAlC,IAAA,WAAA,GAAA;;;QAIuC,IAAA,CAAA,IAAI,GAAG,KAAK;AAExD;;;;AAIG;QACwC,IAAA,CAAA,OAAO,GAChD,OAAO;AAET;;;;AAIG;QACwC,IAAA,CAAA,QAAQ,GACjD,OAAO;IAsDX;IApDE,IAAI,GAAA;AACF,QAAA,IAAI,CAAC,IAAI,GAAG,IAAI;IAClB;IAEA,IAAI,GAAA;AACF,QAAA,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC;IAC7B;AAEQ,IAAA,MAAM,CAAC,MAAc,EAAA;QAC3B,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE;AAChB,QAAA,IAAI,CAAC,IAAI,GAAG,KAAK;AACjB,QAAA,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,kBAAkB,EAAE;YAClC,MAAM,EAAE,EAAE,MAAM,EAAE;AAClB,YAAA,OAAO,EAAE,IAAI;AACb,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA,CAAC,CACH;IACH;IAEQ,iBAAiB,GAAA;AACvB,QAAA,IAAI,IAAI,CAAC,OAAO,KAAK,OAAO,EAAE;AAC5B,YAAA,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC;QACtB;IACF;IAEA,MAAM,GAAA;AACJ,QAAA,OAAOC,CAAI,CAAA;QACP,IAAI,CAAC,OAAO,KAAK;cACfA,CAAI,CAAA,CAAA;AACM,kBAAA,EAAAC,CAAQ,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC;AAC5C,mBAAA,EAAA,IAAI,CAAC,iBAAiB;AACzB,iBAAA;AACV,cAAEC,CAAO;;;AAGD,cAAA,EAAAD,CAAQ,CAAC;AACf,YAAA,KAAK,EAAE,IAAI;YACX,IAAI,EAAE,IAAI,CAAC,IAAI;AACf,YAAA,CAAC,WAAW,IAAI,CAAC,OAAO,CAAA,CAAE,GAAG,IAAI;AACjC,YAAA,CAAC,YAAY,IAAI,CAAC,QAAQ,CAAA,CAAE,GAAG,IAAI;SACpC,CAAC;;qBAEW,IAAI,CAAC,OAAO,KAAK,OAAO,GAAG,MAAM,GAAG,OAAO;sBAC1C,CAAC,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,OAAO;;sCAEb,CAAC,IAAI,CAAC,IAAI,CAAA;;;;KAI3C;IACH;;AAxEO,SAAA,CAAA,MAAM,GAAG,CAACE,QAAM,CAAC;AAGoB,UAAA,CAAA;IAA3CC,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;AAAe,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,MAAA,EAAA,MAAA,CAAA;AAOd,UAAA,CAAA;IAA1CA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AAC/B,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,SAAA,EAAA,MAAA,CAAA;AAOiC,UAAA,CAAA;IAA1CA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AAC/B,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;AApBC,SAAS,GAAA,UAAA,CAAA;IADrB;AACY,CAAA,EAAA,SAAS,CA0ErB;;;;"}

package/dist/skeleton.js

@@ -3,6 +3,7 @@ import { n } from './property-B49QQ8pS.js';
 
 var css_248z = i`* {
   box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .screen-reader-only {

package/dist/skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.js","sources":["../../src/skeleton/skeleton.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport styles from './skeleton.scss';\nimport IndividualComponent from '@/IndividualComponent.js';\n\n/**\n * @label Skeleton\n * @tag wc-skeleton\n * @rawTag skeleton\n * @summary Adds a skeleton effect to an element.\n * @tags display\n *\n * @example\n * ```html\n * <wc-skeleton visible></wc-skeleton>\n * ```\n */\n@IndividualComponent\nexport class Skeleton extends LitElement {\n  static styles = [styles];\n\n  /** When true, the skeleton animation is shown. */\n  @property({ type: Boolean, reflect: true }) visible: boolean = false;\n\n  render() {\n    return html` <div class=\"skeleton\"></div>`;\n  }\n}\n"],"names":["LitElement","html","styles","property"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA;;;;;;;;;;;AAWG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQA,GAAU,CAAA;AAAjC,IAAA,WAAA,GAAA;;;QAIuC,IAAA,CAAA,OAAO,GAAY,KAAK;IAKtE;IAHE,MAAM,GAAA;QACJ,OAAOC,CAAI,CAAA,CAAA,6BAAA,CAA+B;IAC5C;;AAPO,QAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;AAGoB,UAAA,CAAA;IAA3CC,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;AAA2B,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,SAAA,EAAA,MAAA,CAAA;AAJ1D,QAAQ,GAAA,UAAA,CAAA;IADpB;AACY,CAAA,EAAA,QAAQ,CASpB;;;;"}
+{"version":3,"file":"skeleton.js","sources":["../../src/skeleton/skeleton.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport styles from './skeleton.scss';\nimport IndividualComponent from '@/IndividualComponent.js';\n\n/**\n * @label Skeleton\n * @tag wc-skeleton\n * @rawTag skeleton\n * @summary Adds a skeleton effect to an element.\n * @tags display\n *\n * @example\n * ```html\n * <wc-skeleton visible></wc-skeleton>\n * ```\n */\n@IndividualComponent\nexport class Skeleton extends LitElement {\n  static styles = [styles];\n\n  /** When true, the skeleton animation is shown. */\n  @property({ type: Boolean, reflect: true }) visible: boolean = false;\n\n  render() {\n    return html` <div class=\"skeleton\"></div>`;\n  }\n}\n"],"names":["LitElement","html","styles","property"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA;;;;;;;;;;;AAWG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQA,GAAU,CAAA;AAAjC,IAAA,WAAA,GAAA;;;QAIuC,IAAA,CAAA,OAAO,GAAY,KAAK;IAKtE;IAHE,MAAM,GAAA;QACJ,OAAOC,CAAI,CAAA,CAAA,6BAAA,CAA+B;IAC5C;;AAPO,QAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;AAGoB,UAAA,CAAA;IAA3CC,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;AAA2B,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,SAAA,EAAA,MAAA,CAAA;AAJ1D,QAAQ,GAAA,UAAA,CAAA;IADpB;AACY,CAAA,EAAA,QAAQ,CASpB;;;;"}

package/dist/snackbar.js

@@ -6,6 +6,7 @@ import './directive-ZPhl09Yt.js';
 
 var css_248z = i`* {
   box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .screen-reader-only {

package/dist/snackbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"snackbar.js","sources":["../../src/snackbar/snackbar.ts"],"sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport styles from './snackbar.scss';\nimport IndividualComponent from '@/IndividualComponent.js';\n\ntype SnackbarCloseReason = 'timeout' | 'dismiss' | 'action' | 'programmatic';\n\n/**\n * @label Snackbar\n * @tag wc-snackbar\n * @rawTag snackbar\n * @summary Snackbars provide brief messages about app processes at the bottom of the screen.\n *\n * @cssprop --snackbar-container-color - Container color for the snackbar.\n * @cssprop --snackbar-label-text-color - Label text color for the snackbar.\n * @cssprop --snackbar-action-text-color - Action text color.\n * @cssprop --snackbar-close-icon-color - Close icon color.\n * @cssprop --snackbar-border-radius - Border radius of the snackbar surface.\n * @cssprop --snackbar-offset-inline - Inline offset from viewport edges.\n * @cssprop --snackbar-offset-bottom - Bottom offset from viewport edge.\n * @cssprop --snackbar-z-index - Stacking order for the snackbar.\n *\n * @example\n * ```html\n * <wc-snackbar preview message=\"Message archived\" action-label=\"Undo\"></wc-snackbar>\n * ```\n * @tags display, feedback\n */\n@IndividualComponent\nexport class Snackbar extends LitElement {\n  static styles = [styles];\n\n  private static readonly GLOBAL_OPEN_EVENT = 'wc-snackbar-will-open';\n\n  private static readonly EXIT_ANIMATION_MS = 180;\n\n  /** Whether the snackbar is currently visible. */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /** The message text to display. Can also be provided via the default slot. */\n  @property({ type: String }) message = '';\n\n  /** Label for the optional action button. When empty, no action button is rendered. */\n  @property({ type: String, attribute: 'action-label' }) actionLabel = '';\n\n  /** When true, a dismiss icon button is shown on the trailing end. */\n  @property({ type: Boolean, attribute: 'show-close-icon' })\n  showCloseIcon = false;\n\n  /** Auto-hide duration in milliseconds. Set to `0` to disable auto-hide. */\n  @property({ type: Number }) duration = 4000;\n\n  /** When true, the snackbar content is allowed to wrap to multiple lines. */\n  @property({ type: Boolean, reflect: true }) multiline = false;\n\n  /** When true, renders the snackbar in a static preview state (always visible, no animation). */\n  @property({ type: Boolean, reflect: true }) preview = false;\n\n  /** True while the exit animation is running before the snackbar fully closes. */\n  @state() private dismissing = false;\n\n  // ── Private fields ────────────────────────────────────────────────────────\n\n  /** Timer handle for the auto-hide timeout. */\n  private hideTimer: ReturnType<typeof setTimeout> | null = null;\n\n  /** Timer handle for the exit animation duration timeout. */\n  private exitTimer: ReturnType<typeof setTimeout> | null = null;\n\n  private readonly handleGlobalSnackbarOpen = (\n    event: Event,\n  ) => {\n    const { source } = (event as CustomEvent<{ source?: Snackbar }>).detail;\n    if (source && source !== this) {\n      this.hide();\n    }\n  };\n\n  connectedCallback() {\n    super.connectedCallback();\n    document.addEventListener(\n      Snackbar.GLOBAL_OPEN_EVENT,\n      this.handleGlobalSnackbarOpen,\n    );\n  }\n\n  disconnectedCallback() {\n    document.removeEventListener(\n      Snackbar.GLOBAL_OPEN_EVENT,\n      this.handleGlobalSnackbarOpen,\n    );\n    this.clearExitTimer();\n    this.clearTimer();\n    super.disconnectedCallback();\n  }\n\n  protected updated(changedProperties: Map<string, unknown>) {\n    if (changedProperties.has('open')) {\n      if (this.open) {\n        document.dispatchEvent(\n          new CustomEvent(Snackbar.GLOBAL_OPEN_EVENT, {\n            detail: { source: this },\n          }),\n        );\n      }\n\n      this.scheduleAutoHide();\n    }\n  }\n\n  // ── Public methods ────────────────────────────────────────────────────────\n\n  show() {\n    this.dismissing = false;\n    this.clearExitTimer();\n    if (!this.open) {\n      this.open = true;\n      return;\n    }\n\n    this.scheduleAutoHide();\n  }\n\n  hide() {\n    this.close('programmatic');\n  }\n\n  private close(reason: SnackbarCloseReason) {\n    if (!this.open || this.dismissing) {\n      return;\n    }\n\n    this.clearTimer();\n    this.dismissing = true;\n    this.clearExitTimer();\n    this.exitTimer = setTimeout(() => {\n      this.completeDismiss();\n    }, Snackbar.EXIT_ANIMATION_MS);\n\n    this.dispatchEvent(\n      new CustomEvent('snackbar-close', {\n        detail: { reason },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private completeDismiss() {\n    this.clearExitTimer();\n    this.dismissing = false;\n    this.open = false;\n  }\n\n  private dispatchActionEvent() {\n    this.dispatchEvent(\n      new CustomEvent('snackbar-action', {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private handleActionClick() {\n    this.dispatchActionEvent();\n    this.close('action');\n  }\n\n  private handleCloseClick() {\n    this.close('dismiss');\n  }\n\n  private clearTimer() {\n    if (this.hideTimer !== null) {\n      clearTimeout(this.hideTimer);\n      this.hideTimer = null;\n    }\n  }\n\n  private clearExitTimer() {\n    if (this.exitTimer !== null) {\n      clearTimeout(this.exitTimer);\n      this.exitTimer = null;\n    }\n  }\n\n  private handleAnimationEnd(event: AnimationEvent) {\n    if (event.animationName === 'snackbar-exit' && this.dismissing) {\n      this.completeDismiss();\n    }\n  }\n\n  private scheduleAutoHide() {\n    this.clearTimer();\n    if (!this.open || this.duration <= 0) {\n      return;\n    }\n\n    this.hideTimer = setTimeout(() => {\n      this.close('timeout');\n    }, this.duration);\n  }\n\n  render() {\n    const liveRole =\n      this.actionLabel || this.showCloseIcon ? 'alert' : 'status';\n\n    return html`\n      <div\n        class=${classMap({\n          snackbar: true,\n          open: !this.preview && this.open,\n          preview: this.preview,\n          dismissing: this.dismissing,\n          multiline: this.multiline,\n        })}\n        role=${liveRole}\n        aria-live=\"polite\"\n        @animationend=${this.handleAnimationEnd}\n      >\n        <div class=\"label\">\n          <slot>${this.message}</slot>\n        </div>\n\n        ${this.actionLabel\n          ? html`<wc-button class=\"action\" variant='text' size='small' @click=${this.handleActionClick}>\n              ${this.actionLabel}\n            </wc-button>`\n          : nothing}\n\n        ${this.showCloseIcon\n          ? html`<wc-icon-button\n              class=\"close\"\n              variant='text' \n              size='small'\n              aria-label=\"Dismiss notification\"\n              @click=${this.handleCloseClick}\n            >\n              <wc-icon name=\"close\"></wc-icon>\n            </wc-icon-button>`\n          : nothing}\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","html","classMap","nothing","styles","property","state"],"mappings":"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"}
+{"version":3,"file":"snackbar.js","sources":["../../src/snackbar/snackbar.ts"],"sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport styles from './snackbar.scss';\nimport IndividualComponent from '@/IndividualComponent.js';\n\ntype SnackbarCloseReason = 'timeout' | 'dismiss' | 'action' | 'programmatic';\n\n/**\n * @label Snackbar\n * @tag wc-snackbar\n * @rawTag snackbar\n * @summary Snackbars provide brief messages about app processes at the bottom of the screen.\n *\n * @cssprop --snackbar-container-color - Container color for the snackbar.\n * @cssprop --snackbar-label-text-color - Label text color for the snackbar.\n * @cssprop --snackbar-action-text-color - Action text color.\n * @cssprop --snackbar-close-icon-color - Close icon color.\n * @cssprop --snackbar-border-radius - Border radius of the snackbar surface.\n * @cssprop --snackbar-offset-inline - Inline offset from viewport edges.\n * @cssprop --snackbar-offset-bottom - Bottom offset from viewport edge.\n * @cssprop --snackbar-z-index - Stacking order for the snackbar.\n *\n * @example\n * ```html\n * <wc-snackbar preview message=\"Message archived\" action-label=\"Undo\"></wc-snackbar>\n * ```\n * @tags display, feedback\n */\n@IndividualComponent\nexport class Snackbar extends LitElement {\n  static styles = [styles];\n\n  private static readonly GLOBAL_OPEN_EVENT = 'wc-snackbar-will-open';\n\n  private static readonly EXIT_ANIMATION_MS = 180;\n\n  /** Whether the snackbar is currently visible. */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /** The message text to display. Can also be provided via the default slot. */\n  @property({ type: String }) message = '';\n\n  /** Label for the optional action button. When empty, no action button is rendered. */\n  @property({ type: String, attribute: 'action-label' }) actionLabel = '';\n\n  /** When true, a dismiss icon button is shown on the trailing end. */\n  @property({ type: Boolean, attribute: 'show-close-icon' })\n  showCloseIcon = false;\n\n  /** Auto-hide duration in milliseconds. Set to `0` to disable auto-hide. */\n  @property({ type: Number }) duration = 4000;\n\n  /** When true, the snackbar content is allowed to wrap to multiple lines. */\n  @property({ type: Boolean, reflect: true }) multiline = false;\n\n  /** When true, renders the snackbar in a static preview state (always visible, no animation). */\n  @property({ type: Boolean, reflect: true }) preview = false;\n\n  /** True while the exit animation is running before the snackbar fully closes. */\n  @state() private dismissing = false;\n\n  // ── Private fields ────────────────────────────────────────────────────────\n\n  /** Timer handle for the auto-hide timeout. */\n  private hideTimer: ReturnType<typeof setTimeout> | null = null;\n\n  /** Timer handle for the exit animation duration timeout. */\n  private exitTimer: ReturnType<typeof setTimeout> | null = null;\n\n  private readonly handleGlobalSnackbarOpen = (\n    event: Event,\n  ) => {\n    const { source } = (event as CustomEvent<{ source?: Snackbar }>).detail;\n    if (source && source !== this) {\n      this.hide();\n    }\n  };\n\n  connectedCallback() {\n    super.connectedCallback();\n    document.addEventListener(\n      Snackbar.GLOBAL_OPEN_EVENT,\n      this.handleGlobalSnackbarOpen,\n    );\n  }\n\n  disconnectedCallback() {\n    document.removeEventListener(\n      Snackbar.GLOBAL_OPEN_EVENT,\n      this.handleGlobalSnackbarOpen,\n    );\n    this.clearExitTimer();\n    this.clearTimer();\n    super.disconnectedCallback();\n  }\n\n  protected updated(changedProperties: Map<string, unknown>) {\n    if (changedProperties.has('open')) {\n      if (this.open) {\n        document.dispatchEvent(\n          new CustomEvent(Snackbar.GLOBAL_OPEN_EVENT, {\n            detail: { source: this },\n          }),\n        );\n      }\n\n      this.scheduleAutoHide();\n    }\n  }\n\n  // ── Public methods ────────────────────────────────────────────────────────\n\n  show() {\n    this.dismissing = false;\n    this.clearExitTimer();\n    if (!this.open) {\n      this.open = true;\n      return;\n    }\n\n    this.scheduleAutoHide();\n  }\n\n  hide() {\n    this.close('programmatic');\n  }\n\n  private close(reason: SnackbarCloseReason) {\n    if (!this.open || this.dismissing) {\n      return;\n    }\n\n    this.clearTimer();\n    this.dismissing = true;\n    this.clearExitTimer();\n    this.exitTimer = setTimeout(() => {\n      this.completeDismiss();\n    }, Snackbar.EXIT_ANIMATION_MS);\n\n    this.dispatchEvent(\n      new CustomEvent('snackbar-close', {\n        detail: { reason },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private completeDismiss() {\n    this.clearExitTimer();\n    this.dismissing = false;\n    this.open = false;\n  }\n\n  private dispatchActionEvent() {\n    this.dispatchEvent(\n      new CustomEvent('snackbar-action', {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private handleActionClick() {\n    this.dispatchActionEvent();\n    this.close('action');\n  }\n\n  private handleCloseClick() {\n    this.close('dismiss');\n  }\n\n  private clearTimer() {\n    if (this.hideTimer !== null) {\n      clearTimeout(this.hideTimer);\n      this.hideTimer = null;\n    }\n  }\n\n  private clearExitTimer() {\n    if (this.exitTimer !== null) {\n      clearTimeout(this.exitTimer);\n      this.exitTimer = null;\n    }\n  }\n\n  private handleAnimationEnd(event: AnimationEvent) {\n    if (event.animationName === 'snackbar-exit' && this.dismissing) {\n      this.completeDismiss();\n    }\n  }\n\n  private scheduleAutoHide() {\n    this.clearTimer();\n    if (!this.open || this.duration <= 0) {\n      return;\n    }\n\n    this.hideTimer = setTimeout(() => {\n      this.close('timeout');\n    }, this.duration);\n  }\n\n  render() {\n    const liveRole =\n      this.actionLabel || this.showCloseIcon ? 'alert' : 'status';\n\n    return html`\n      <div\n        class=${classMap({\n          snackbar: true,\n          open: !this.preview && this.open,\n          preview: this.preview,\n          dismissing: this.dismissing,\n          multiline: this.multiline,\n        })}\n        role=${liveRole}\n        aria-live=\"polite\"\n        @animationend=${this.handleAnimationEnd}\n      >\n        <div class=\"label\">\n          <slot>${this.message}</slot>\n        </div>\n\n        ${this.actionLabel\n          ? html`<wc-button class=\"action\" variant='text' size='small' @click=${this.handleActionClick}>\n              ${this.actionLabel}\n            </wc-button>`\n          : nothing}\n\n        ${this.showCloseIcon\n          ? html`<wc-icon-button\n              class=\"close\"\n              variant='text' \n              size='small'\n              aria-label=\"Dismiss notification\"\n              @click=${this.handleCloseClick}\n            >\n              <wc-icon name=\"close\"></wc-icon>\n            </wc-icon-button>`\n          : nothing}\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","html","classMap","nothing","styles","property","state"],"mappings":"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"}

package/dist/spinner.js

@@ -2,6 +2,7 @@ import { i, _ as __decorate, I as IndividualComponent, a as i$1, b } from './Ind
 
 var css_248z = i`* {
   box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .screen-reader-only {

package/dist/spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"spinner.js","sources":["../../src/spinner/spinner.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\n\nimport styles from './spinner.scss';\nimport IndividualComponent from '@/IndividualComponent.js';\n\n/**\n * @label Spinner\n * @tag wc-spinner\n * @rawTag spinner\n * @summary A spinner component that animates a circular shape.\n * @cssprop --spinner-track-color - The color of the track.\n * @cssprop --spinner-shape-color - The color of the shape.\n * @tags display\n *\n * @example\n * ```html\n * <wc-spinner></wc-spinner>\n * ```\n */\n@IndividualComponent\nexport class Spinner extends LitElement {\n  static styles = [styles];\n\n  render() {\n    return html`\n      <div class=\"spinner track\">\n        <div class=\"shape\"></div>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","html","styles"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA;;;;;;;;;;;;;AAaG;AAEI,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQA,GAAU,CAAA;IAGrC,MAAM,GAAA;AACJ,QAAA,OAAOC,CAAI,CAAA;;;;KAIV;IACH;;AARO,OAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;AADb,OAAO,GAAA,UAAA,CAAA;IADnB;AACY,CAAA,EAAA,OAAO,CAUnB;;;;"}
+{"version":3,"file":"spinner.js","sources":["../../src/spinner/spinner.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\n\nimport styles from './spinner.scss';\nimport IndividualComponent from '@/IndividualComponent.js';\n\n/**\n * @label Spinner\n * @tag wc-spinner\n * @rawTag spinner\n * @summary A spinner component that animates a circular shape.\n * @cssprop --spinner-track-color - The color of the track.\n * @cssprop --spinner-shape-color - The color of the shape.\n * @tags display\n *\n * @example\n * ```html\n * <wc-spinner></wc-spinner>\n * ```\n */\n@IndividualComponent\nexport class Spinner extends LitElement {\n  static styles = [styles];\n\n  render() {\n    return html`\n      <div class=\"spinner track\">\n        <div class=\"shape\"></div>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","html","styles"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA;;;;;;;;;;;;;AAaG;AAEI,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQA,GAAU,CAAA;IAGrC,MAAM,GAAA;AACJ,QAAA,OAAOC,CAAI,CAAA;;;;KAIV;IACH;;AARO,OAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;AADb,OAAO,GAAA,UAAA,CAAA;IADnB;AACY,CAAA,EAAA,OAAO,CAUnB;;;;"}

package/dist/split-button.js

@@ -9,6 +9,7 @@ import './directive-ZPhl09Yt.js';
 var css_248z$2 = i`@charset "UTF-8";
 * {
   box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .screen-reader-only {

package/dist/split-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"split-button.js","sources":["../../src/split-button/split-button.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport styles from './split-button.scss';\nimport colorStyles from './split-button-colors.scss';\nimport sizeStyles from './split-button-sizes.scss';\n\n/**\n * @label Split Button\n * @tag wc-split-button\n * @rawTag split-button\n *\n * @summary A split button lets users perform a default action or choose from a set of related actions via a dropdown menu.\n * @overview\n * <p>A split button combines a primary action button with a dropdown arrow that opens a menu. Following M3 Material Design, the split button provides a default action alongside a set of secondary options, reducing clutter while keeping alternative actions accessible.</p>\n *\n * @cssprop --split-button-container-shape: Defines the border radius of the split button container shape.\n *\n * @cssprop --filled-split-button-container-color: Color of the filled split button container.\n * @cssprop --filled-split-button-label-text-color: Text color of the filled split button label.\n *\n * @cssprop --outlined-split-button-container-color: Color of the outlined split button container.\n * @cssprop --outlined-split-button-label-text-color: Text color of the outlined split button label.\n *\n * @cssprop --tonal-split-button-container-color: Color of the tonal split button container.\n * @cssprop --tonal-split-button-label-text-color: Text color of the tonal split button label.\n *\n * @fires {MouseEvent} click - Dispatched when the primary action button is clicked.\n * @fires {CustomEvent} toggle-menu - Dispatched when the dropdown menu is opened or closed.\n *\n * @example\n * ```html\n * <wc-split-button>\n *   Save\n *   <wc-menu-item slot=\"menu\">Save as draft</wc-menu-item>\n *   <wc-menu-item slot=\"menu\">Save and publish</wc-menu-item>\n * </wc-split-button>\n * ```\n * @tags controls\n */\n@IndividualComponent\nexport class SplitButton extends LitElement {\n  static override styles = [styles, colorStyles, sizeStyles];\n\n  /**\n   * Button size.\n   * Possible values are `\"xs\"`, `\"sm\"`, `\"md\"`, `\"lg\"`, `\"xl\"`. Defaults to `\"sm\"`.\n   */\n  @property({ reflect: true }) size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'sm';\n\n  /**\n   * The visual style of the split button.\n   *\n   * Possible variant values:\n   * `\"filled\"` is a filled button.\n   * `\"outlined\"` is an outlined button.\n   * `\"tonal\"` is a light color button.\n   */\n  @property({ reflect: true }) variant: 'filled' | 'tonal' | 'outlined' =\n    'filled';\n\n  /**\n   * Defines the primary color of the split button.\n   */\n  @property({ reflect: true }) color:\n    | 'primary'\n    | 'secondary'\n    | 'tertiary'\n    | 'success'\n    | 'danger'\n    | 'warning'\n    | 'surface'\n    | 'on-surface' = 'primary';\n\n  /**\n   * Whether the split button is disabled.\n   */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  @state() private _menuOpen = false;\n\n  @query('.dropdown-trigger') private readonly _dropdownButton!: HTMLElement;\n\n  @query('wc-menu') private readonly _menu!: HTMLElement & {\n    open: boolean;\n    anchorElement: HTMLElement | null;\n    show: () => void;\n    close: () => void;\n  };\n\n  private _menuId = `split-menu-${Math.random().toString(36).slice(2, 9)}`;\n\n  override focus() {\n    const btn =\n      this.shadowRoot?.querySelector<HTMLElement>('.action-button');\n    btn?.focus();\n  }\n\n  private _onActionClick(event: MouseEvent) {\n    if (this.disabled) {\n      event.stopImmediatePropagation();\n      event.preventDefault();\n      return;\n    }\n\n    // Close menu if open\n    if (this._menuOpen) {\n      this._menu?.close();\n    }\n  }\n\n  private _onDropdownClick(event: MouseEvent) {\n    event.stopPropagation();\n    if (this.disabled) return;\n\n    if (this._menuOpen) {\n      this._menu?.close();\n    } else {\n      this._menu.anchorElement = this;\n      this._menu?.show();\n    }\n  }\n\n  private _onMenuOpened = () => {\n    this._menuOpen = true;\n    this.dispatchEvent(\n      new CustomEvent('toggle-menu', {\n        detail: { open: true },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  };\n\n  private _onMenuClosed = () => {\n    this._menuOpen = false;\n    this.dispatchEvent(\n      new CustomEvent('toggle-menu', {\n        detail: { open: false },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  };\n\n  private _onKeyDown = (event: KeyboardEvent) => {\n    if (this.disabled) return;\n\n    if (\n      event.key === 'ArrowDown' &&\n      event.target === this._dropdownButton\n    ) {\n      event.preventDefault();\n      if (!this._menuOpen) {\n        this._menu.anchorElement = this;\n        this._menu?.show();\n      }\n      // Focus the menu so keyboard nav works\n      requestAnimationFrame(() => this._menu?.focus());\n    }\n\n    if (event.key === 'Escape' && this._menuOpen) {\n      this._menu?.close();\n      this._dropdownButton?.focus();\n    }\n  };\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('keydown', this._onKeyDown);\n  }\n\n  override disconnectedCallback() {\n    this.removeEventListener('keydown', this._onKeyDown);\n    super.disconnectedCallback();\n  }\n\n  override render() {\n    const actionClasses = {\n      'action-button': true,\n      disabled: this.disabled,\n    };\n\n    const dropdownClasses = {\n      'dropdown-trigger': true,\n      active: this._menuOpen,\n      disabled: this.disabled,\n    };\n\n    const containerClasses = {\n      'split-button': true,\n      [`variant-${this.variant}`]: true,\n      disabled: this.disabled,\n    };\n\n    return html`\n      <div class=${classMap(containerClasses)}>\n        <wc-button\n          class=${classMap(actionClasses)}\n          size=${this.size}\n          variant=${this.variant}\n          ?disabled=${this.disabled}\n          @click=${this._onActionClick}\n        >\n          <slot></slot>\n        </wc-button>\n\n        <wc-icon-button\n          class=${classMap(dropdownClasses)}\n          size=${this.size}\n          variant=${this.variant}\n          ?disabled=${this.disabled}\n          .configAria=${{\n            'aria-haspopup': 'menu',\n            'aria-expanded': String(this._menuOpen),\n            'aria-controls': this._menuId,\n            'aria-label': 'Open split button menu',\n          }}\n          @click=${this._onDropdownClick}\n        >\n          <wc-icon class=\"dropdown-icon\" name=\"arrow_drop_down\" aria-hidden=\"true\"></wc-icon>\n        </wc-icon-button>\n      </div>\n\n      <wc-menu\n        id=${this._menuId}\n        placement=\"bottom-end\"\n        @opened=${this._onMenuOpened}\n        @closed=${this._onMenuClosed}\n      >\n        <slot name=\"menu\"></slot>\n      </wc-menu>\n    `;\n  }\n}\n"],"names":["LitElement","html","classMap","styles","colorStyles","sizeStyles","property","state","query"],"mappings":"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"}
+{"version":3,"file":"split-button.js","sources":["../../src/split-button/split-button.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport styles from './split-button.scss';\nimport colorStyles from './split-button-colors.scss';\nimport sizeStyles from './split-button-sizes.scss';\n\n/**\n * @label Split Button\n * @tag wc-split-button\n * @rawTag split-button\n *\n * @summary A split button lets users perform a default action or choose from a set of related actions via a dropdown menu.\n * @overview\n * <p>A split button combines a primary action button with a dropdown arrow that opens a menu. Following M3 Material Design, the split button provides a default action alongside a set of secondary options, reducing clutter while keeping alternative actions accessible.</p>\n *\n * @cssprop --split-button-container-shape: Defines the border radius of the split button container shape.\n *\n * @cssprop --filled-split-button-container-color: Color of the filled split button container.\n * @cssprop --filled-split-button-label-text-color: Text color of the filled split button label.\n *\n * @cssprop --outlined-split-button-container-color: Color of the outlined split button container.\n * @cssprop --outlined-split-button-label-text-color: Text color of the outlined split button label.\n *\n * @cssprop --tonal-split-button-container-color: Color of the tonal split button container.\n * @cssprop --tonal-split-button-label-text-color: Text color of the tonal split button label.\n *\n * @fires {MouseEvent} click - Dispatched when the primary action button is clicked.\n * @fires {CustomEvent} toggle-menu - Dispatched when the dropdown menu is opened or closed.\n *\n * @example\n * ```html\n * <wc-split-button>\n *   Save\n *   <wc-menu-item slot=\"menu\">Save as draft</wc-menu-item>\n *   <wc-menu-item slot=\"menu\">Save and publish</wc-menu-item>\n * </wc-split-button>\n * ```\n * @tags controls\n */\n@IndividualComponent\nexport class SplitButton extends LitElement {\n  static override styles = [styles, colorStyles, sizeStyles];\n\n  /**\n   * Button size.\n   * Possible values are `\"xs\"`, `\"sm\"`, `\"md\"`, `\"lg\"`, `\"xl\"`. Defaults to `\"sm\"`.\n   */\n  @property({ reflect: true }) size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'sm';\n\n  /**\n   * The visual style of the split button.\n   *\n   * Possible variant values:\n   * `\"filled\"` is a filled button.\n   * `\"outlined\"` is an outlined button.\n   * `\"tonal\"` is a light color button.\n   */\n  @property({ reflect: true }) variant: 'filled' | 'tonal' | 'outlined' =\n    'filled';\n\n  /**\n   * Defines the primary color of the split button.\n   */\n  @property({ reflect: true }) color:\n    | 'primary'\n    | 'secondary'\n    | 'tertiary'\n    | 'success'\n    | 'danger'\n    | 'warning'\n    | 'surface'\n    | 'on-surface' = 'primary';\n\n  /**\n   * Whether the split button is disabled.\n   */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  @state() private _menuOpen = false;\n\n  @query('.dropdown-trigger') private readonly _dropdownButton!: HTMLElement;\n\n  @query('wc-menu') private readonly _menu!: HTMLElement & {\n    open: boolean;\n    anchorElement: HTMLElement | null;\n    show: () => void;\n    close: () => void;\n  };\n\n  private _menuId = `split-menu-${Math.random().toString(36).slice(2, 9)}`;\n\n  override focus() {\n    const btn =\n      this.shadowRoot?.querySelector<HTMLElement>('.action-button');\n    btn?.focus();\n  }\n\n  private _onActionClick(event: MouseEvent) {\n    if (this.disabled) {\n      event.stopImmediatePropagation();\n      event.preventDefault();\n      return;\n    }\n\n    // Close menu if open\n    if (this._menuOpen) {\n      this._menu?.close();\n    }\n  }\n\n  private _onDropdownClick(event: MouseEvent) {\n    event.stopPropagation();\n    if (this.disabled) return;\n\n    if (this._menuOpen) {\n      this._menu?.close();\n    } else {\n      this._menu.anchorElement = this;\n      this._menu?.show();\n    }\n  }\n\n  private _onMenuOpened = () => {\n    this._menuOpen = true;\n    this.dispatchEvent(\n      new CustomEvent('toggle-menu', {\n        detail: { open: true },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  };\n\n  private _onMenuClosed = () => {\n    this._menuOpen = false;\n    this.dispatchEvent(\n      new CustomEvent('toggle-menu', {\n        detail: { open: false },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  };\n\n  private _onKeyDown = (event: KeyboardEvent) => {\n    if (this.disabled) return;\n\n    if (\n      event.key === 'ArrowDown' &&\n      event.target === this._dropdownButton\n    ) {\n      event.preventDefault();\n      if (!this._menuOpen) {\n        this._menu.anchorElement = this;\n        this._menu?.show();\n      }\n      // Focus the menu so keyboard nav works\n      requestAnimationFrame(() => this._menu?.focus());\n    }\n\n    if (event.key === 'Escape' && this._menuOpen) {\n      this._menu?.close();\n      this._dropdownButton?.focus();\n    }\n  };\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('keydown', this._onKeyDown);\n  }\n\n  override disconnectedCallback() {\n    this.removeEventListener('keydown', this._onKeyDown);\n    super.disconnectedCallback();\n  }\n\n  override render() {\n    const actionClasses = {\n      'action-button': true,\n      disabled: this.disabled,\n    };\n\n    const dropdownClasses = {\n      'dropdown-trigger': true,\n      active: this._menuOpen,\n      disabled: this.disabled,\n    };\n\n    const containerClasses = {\n      'split-button': true,\n      [`variant-${this.variant}`]: true,\n      disabled: this.disabled,\n    };\n\n    return html`\n      <div class=${classMap(containerClasses)}>\n        <wc-button\n          class=${classMap(actionClasses)}\n          size=${this.size}\n          variant=${this.variant}\n          ?disabled=${this.disabled}\n          @click=${this._onActionClick}\n        >\n          <slot></slot>\n        </wc-button>\n\n        <wc-icon-button\n          class=${classMap(dropdownClasses)}\n          size=${this.size}\n          variant=${this.variant}\n          ?disabled=${this.disabled}\n          .configAria=${{\n            'aria-haspopup': 'menu',\n            'aria-expanded': String(this._menuOpen),\n            'aria-controls': this._menuId,\n            'aria-label': 'Open split button menu',\n          }}\n          @click=${this._onDropdownClick}\n        >\n          <wc-icon class=\"dropdown-icon\" name=\"arrow_drop_down\" aria-hidden=\"true\"></wc-icon>\n        </wc-icon-button>\n      </div>\n\n      <wc-menu\n        id=${this._menuId}\n        placement=\"bottom-end\"\n        @opened=${this._onMenuOpened}\n        @closed=${this._onMenuClosed}\n      >\n        <slot name=\"menu\"></slot>\n      </wc-menu>\n    `;\n  }\n}\n"],"names":["LitElement","html","classMap","styles","colorStyles","sizeStyles","property","state","query"],"mappings":"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"}

package/dist/src/accordion/accordion-item.d.ts

@@ -15,7 +15,7 @@ import { LitElement } from 'lit';
  * @part description - The description text container.
  * @part content - The expandable content region wrapper.
  *
- * @fires {CustomEvent<{ open: boolean }>} accordion-item:toggle - Fired when the panel is expanded or collapsed.
+ * @fires {CustomEvent<{ open: boolean }>} accordion-item-toggle - Fired when the panel is expanded or collapsed.
  *
  * @example
  * ```html

package/dist/src/accordion/accordion.d.ts

@@ -28,13 +28,13 @@ export declare class Accordion extends LitElement {
      * Whether multiple panels can be expanded simultaneously.
      * When `false` (default), expanding one panel collapses all others.
      */
-    multi: boolean;
+    multiple: boolean;
     /**
-     * Display mode for the accordion.
+     * Variant for the accordion.
      * `'default'` renders panels with a subtle background on expand and dividers between items.
      * `'flat'` renders panels without borders or background changes — suitable for use inside cards.
      */
-    displayMode: 'default' | 'flat';
+    variant: 'default' | 'flat';
     items: Array<AccordionItem>;
     connectedCallback(): void;
     disconnectedCallback(): void;

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

@@ -48,8 +48,8 @@ export declare class Button extends Button_base {
     /** @nocollapse */ static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResultGroup[];
     /**
-     * Icon alignment.
-     * Possible values are `"start"`, `"end"`. Defaults to `"end"`.
+     * When `true` (default), the icon is placed after the label (trailing).
+     * When `false`, the icon is placed before the label (leading).
      */
     trailingIcon: boolean;
     /**

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

@@ -10,14 +10,14 @@ import { IconButton } from '../icon-button/icon-button.js';
 
  * @example
  * ```html
- * <wc-button-group connected="true">
- *  <wc-icon-button toggle="true" shaped="wide">
+ * <wc-button-group connected>
+ *  <wc-icon-button toggle="true" shape="wide" selected>
  *    <wc-icon name="format_bold"></wc-icon>
  *  </wc-icon-button>
- *  <wc-icon-button toggle="true" shaped="wide">
+ *  <wc-icon-button toggle="true" shape="wide">
  *    <wc-icon name="format_italic"></wc-icon>
  *  </wc-icon-button>
- *  <wc-icon-button toggle="true" shaped="wide">
+ *  <wc-icon-button toggle="true" shape="wide">
  *    <wc-icon name="format_underlined"></wc-icon>
  *  </wc-icon-button>
  * </wc-button-group>

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

@@ -1,5 +1,5 @@
 import { LitElement } from 'lit';
-import { BundledLanguage } from 'shiki';
+import type { BundledLanguage } from 'shiki';
 /**
  * @label Code Highlighter
  * @tag wc-code-highlighter
@@ -34,7 +34,7 @@ export declare class CodeHighlighter extends LitElement {
     firstUpdated(): void;
     private decode;
     private __highlightCode;
-    protected updated(): void;
+    protected updated(changed: Map<PropertyKey, unknown>): void;
     private __handleCopyClick;
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist/src/color-picker/color-picker.d.ts

@@ -0,0 +1,85 @@
+import { LitElement } from 'lit';
+/**
+ * @label Color Picker
+ * @tag wc-color-picker
+ * @rawTag color-picker
+ *
+ * @summary A color picker component for selecting colors via a hue/saturation/value interface.
+ *
+ * @overview
+ * <p>The color picker presents a 2D saturation–brightness panel with a hue slider below it.
+ * An optional alpha slider allows controlling opacity. The current hex value is displayed in
+ * an editable text field.</p>
+ *
+ * @cssprop --color-picker-width - Overall width of the component. Defaults to 240px.
+ * @cssprop --color-picker-sv-height - Height of the saturation/brightness panel. Defaults to 160px.
+ *
+ * @fires {CustomEvent<{value: string, alpha: number}>} input - Dispatched continuously while the color is being changed.
+ * @fires {CustomEvent<{value: string, alpha: number}>} change - Dispatched when a color change is committed (pointer up, key, or input blur).
+ *
+ * @example
+ * ```html
+ * <wc-color-picker value="#2352d5"></wc-color-picker>
+ * ```
+ *
+ * @example
+ * ```html
+ * <wc-color-picker value="#ff573380" alpha></wc-color-picker>
+ * ```
+ */
+export declare class ColorPicker extends LitElement {
+    static styles: import("lit").CSSResultGroup[];
+    /**
+     * The current color as a 6-digit hex string (e.g. `"#ff5733"`).
+     */
+    value: string;
+    /**
+     * Whether to show the alpha (opacity) slider and input.
+     */
+    alpha: boolean;
+    /**
+     * Whether the color picker is disabled.
+     */
+    disabled: boolean;
+    /** Current hue, 0–360. */
+    private _hue;
+    /** Current saturation, 0–1 (x-axis of the SV panel). */
+    private _sat;
+    /** Current brightness (value in HSV), 0–1 (y-axis, 1 = bright). */
+    private _bri;
+    /** Current opacity, 0–1. */
+    private _opacity;
+    /** Intermediate value for the hex text input (without `#`). */
+    private _hexInput;
+    private _svPanel?;
+    private _hueTrack?;
+    private _alphaTrack?;
+    /** Tracks which drag handle is currently active. */
+    private _dragging;
+    /** The last `value` we set ourselves, used to skip redundant re-syncs in `updated`. */
+    private _lastEmittedValue;
+    connectedCallback(): void;
+    updated(changed: Map<PropertyKey, unknown>): void;
+    private _syncFromValue;
+    private _computeHex;
+    private _emitValue;
+    private _onSvPointerDown;
+    private _onSvPointerMove;
+    private _onSvPointerUp;
+    private _updateSv;
+    private _onSvKeyDown;
+    private _onHuePointerDown;
+    private _onHuePointerMove;
+    private _onHuePointerUp;
+    private _updateHue;
+    private _onHueKeyDown;
+    private _onAlphaPointerDown;
+    private _onAlphaPointerMove;
+    private _onAlphaPointerUp;
+    private _updateAlpha;
+    private _onAlphaKeyDown;
+    private _onHexInput;
+    private _onHexChange;
+    private _onAlphaNumberChange;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/src/color-picker/index.d.ts

@@ -0,0 +1 @@
+export { ColorPicker } from './color-picker.js';

package/dist/src/index.d.ts

@@ -45,6 +45,7 @@ export { Image } from './image/index.js';
 export { Svg } from './svg/index.js';
 export { Tab, TabGroup, TabPanel, Tabs } from './tabs/index.js';
 export { Slider } from './slider/index.js';
+export { ColorPicker } from './color-picker/index.js';
 export { ChartDoughnut } from './chart-doughnut/index.js';
 export { ChartPie } from './chart-pie/index.js';
 export { ChartBar, ChartStackedBar } from './chart-bar/index.js';

package/dist/src/item/item.d.ts

@@ -12,7 +12,6 @@ declare const Item_base: import("../__internal/mixins/mixin.js").MixinReturn<imp
  * <wc-item>
  *   <wc-icon slot="start" name="notifications"></wc-icon>
  *
- *   <span slot="overline">Settings</span>
  *   <span slot="headline">Notifications</span>
  *   <span slot="supporting-text">Manage alerts and reminders</span>
  *

package/dist/src/list/list-item.d.ts

@@ -23,6 +23,7 @@ export declare class ListItem extends ListItem_base {
     selected: boolean;
     /** When true, renders the list-item in a loading skeleton state. */
     skeleton: boolean;
+    actionable: boolean;
     readonly itemElement: HTMLElement | null;
     constructor();
     connectedCallback(): void;
@@ -30,7 +31,8 @@ export declare class ListItem extends ListItem_base {
     blur(): void;
     __dispatchClick: (event: MouseEvent | KeyboardEvent) => void;
     private __hasNamedSlot;
+    isClickable(): boolean;
     render(): import("lit-html").TemplateResult<1>;
-    renderContent(): import("lit-html").TemplateResult<1>;
+    renderContent(clickable: boolean): import("lit-html").TemplateResult<1>;
 }
 export {};

package/dist/src/list/list.d.ts

@@ -15,6 +15,13 @@ import { ListItem } from './list-item.js';
  *     Inbox
  *     <span slot="trailing">24</span>
  *   </wc-list-item>
+ *    <wc-list-item>
+ *       <wc-avatar slot="leading" name="Shivaji Varma"></wc-avatar>
+ *        Shivaji Varma
+ *       <span slot="supporting-text">Software Engineer</span>
+ *       <span slot="trailing-supporting-text">7</span>
+ *       <wc-icon slot="trailing" name="chevron_right"></wc-icon>
+ *     </wc-list-item>
  * </wc-list>
  * ```
  * @tags display
@@ -24,6 +31,23 @@ export declare class List extends LitElement {
     static Item: typeof ListItem;
     /**  */
     variant: 'standard' | 'segmented';
+    /** Index of the currently active item within the clickable items list. */
+    private activeIndex;
     connectedCallback(): void;
+    disconnectedCallback(): void;
+    focus(): void;
+    get items(): ListItem[];
+    private _clickableItems;
+    private _syncRovingTabIndex;
+    private _setActiveByOffset;
+    private _setBoundaryActive;
+    private _getActiveItem;
+    private _getFirstClickableItem;
+    private _isEventFromThisList;
+    private _clickableItemFromEvent;
+    private _setActiveItem;
+    private _onKeyDown;
+    private _onClick;
+    private _onSlotChange;
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist/src/menu/menu-item/menu-item.d.ts

@@ -1,5 +1,4 @@
 import { LitElement } from 'lit';
-import { Item } from '@/item/item.js';
 declare const MenuItem_base: typeof LitElement & import("../../__internal/mixins/MixinConstructor.js").MixinConstructor<import("@/__internal/mixins/NativeHyperlinkMixin.js").NativeHyperlinkInterface> & import("../../__internal/mixins/MixinConstructor.js").MixinConstructor<import("@/__internal/mixins/NativeButtonMixin.js").NativeButtonInterface>;
 /**
  * @label Menu Item
@@ -27,7 +26,7 @@ export declare class MenuItem extends MenuItem_base {
     submenuOpen: boolean;
     /** Visual variant of the menu item. */
     variant: 'standard' | 'vibrant';
-    readonly itemElement: Item | null;
+    readonly itemElement: HTMLElement | null;
     /** MutationObserver that triggers re-render when slotted content changes. */
     private readonly _contentObserver;
     /** Roving tabindex value managed by the parent Menu. */