@redvars/peacock 3.8.3 → 3.8.4

package/dist/menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.js","sources":["../../src/menu/menu/menu.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport type { Placement } from '@floating-ui/dom';\nimport styles from './menu.scss';\nimport { FloatingController } from '../../__internal/controllers/floating-controller.js';\nimport { MenuItem } from '../menu-item/menu-item.js';\nimport IndividualComponent from '@/IndividualComponent.js';\n\ntype CloseReason =\n  | { kind: 'click-selection' }\n  | { kind: 'keydown'; key: string }\n  | { kind: 'outside-click' }\n  | { kind: 'focusout' }\n  | { kind: 'programmatic' };\n\n/**\n * @label Menu\n * @tag wc-menu\n * @rawTag menu\n * @summary A list of menu items.\n * @tags navigation\n *\n * @example\n * ```html\n * <wc-menu preview>\n *   <wc-menu-item>Item 1</wc-menu-item>\n *   <wc-menu-item selected>Item 2</wc-menu-item>\n * </wc-menu>\n * ```\n */\n@IndividualComponent\nexport class Menu extends LitElement {\n  static styles = [styles];\n\n  static Item = MenuItem;\n\n  /** Whether the menu is currently visible. */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /** Visual variant of the menu. `\"vibrant\"` applies stronger color emphasis. */\n  @property({ type: String, reflect: true }) variant: 'standard' | 'vibrant' =\n    'standard';\n\n  /** ID of the anchor element the menu is positioned relative to. */\n  @property({ type: String }) anchor = '';\n\n  /** When true, renders the menu in a static preview state (always visible, no animation). */\n  @property({ type: Boolean, reflect: true }) preview = false;\n\n  /** When true, the menu will not close when a click occurs outside it. */\n  @property({ type: Boolean, attribute: 'stay-open-on-outside-click' })\n  stayOpenOnOutsideClick = false;\n\n  /** When true, the menu will not close when focus leaves it. */\n  @property({ type: Boolean, attribute: 'stay-open-on-focusout' })\n  stayOpenOnFocusout = false;\n\n  /** Set to true when this menu is being used as a submenu inside another menu. */\n  @property({ type: Boolean, attribute: 'is-submenu' }) isSubmenu = false;\n\n  /** Floating UI placement of the menu relative to its anchor. */\n  @property({ type: String }) placement: Placement = 'bottom-start';\n\n  /** Distance in pixels between the menu and its anchor element. */\n  @property({ type: Number }) offset = 6;\n\n  /** Index of the currently focused/active item within the enabled items list. */\n  @state() private activeIndex = -1;\n\n  @query('.menu') private readonly menuListElement!: HTMLElement;\n\n  /** Direct reference to the anchor element; takes precedence over the `anchor` ID property. */\n  anchorElement: HTMLElement | null = null;\n\n  /** Controller managing floating-UI positioning. */\n  private readonly _floatingController = new FloatingController(this, {\n    trigger: 'manual',\n    closeOnClickOutside: false,\n    strategy: 'fixed',\n    onOpenChange: isOpen => {\n      if (isOpen || !this.open) {\n        return;\n      }\n\n      this.close({ kind: 'outside-click' });\n    },\n  });\n\n  /** Element that had focus before the menu opened; restored on close. */\n  private _lastFocusedElement: HTMLElement | null = null;\n\n  /** Reason that triggered the most recent close, included in the `closed` event detail. */\n  private _closeReason: CloseReason = { kind: 'programmatic' };\n\n  connectedCallback() {\n    // eslint-disable-next-line wc/guard-super-call\n    super.connectedCallback();\n    this.setAttribute('role', 'menu');\n\n    this.addEventListener('keydown', this._onKeyDown);\n    this.addEventListener('click', this._onClick);\n    this._syncAnchorAria();\n  }\n\n  disconnectedCallback() {\n    this.removeEventListener('keydown', this._onKeyDown);\n    this.removeEventListener('click', this._onClick);\n    this._floatingController.close();\n    super.disconnectedCallback();\n  }\n\n  get items(): MenuItem[] {\n    const slot = this.shadowRoot?.querySelector('slot');\n    const elements = slot?.assignedElements({ flatten: true }) ?? [];\n    const items: MenuItem[] = [];\n\n    for (const element of elements) {\n      if (element instanceof MenuItem) {\n        items.push(element);\n      } else {\n        const maybeItem = (element as { item?: unknown }).item;\n        if (maybeItem instanceof MenuItem) {\n          items.push(maybeItem);\n        }\n      }\n    }\n\n    return items;\n  }\n\n  show() {\n    if (this.open) {\n      return;\n    }\n\n    this._closeReason = { kind: 'programmatic' };\n    this.open = true;\n  }\n\n  close(reason: CloseReason = { kind: 'programmatic' }) {\n    if (!this.open) {\n      return;\n    }\n\n    this._closeReason = reason;\n    this.open = false;\n  }\n\n  override focus() {\n    const target = this._getActiveItem() ?? this._getFirstEnabledItem();\n    target?.focus();\n  }\n\n  private _resolveAnchorElement() {\n    if (this.anchorElement) {\n      return this.anchorElement;\n    }\n\n    if (!this.anchor) {\n      return null;\n    }\n\n    const root = this.getRootNode() as Document | ShadowRoot;\n    if ('getElementById' in root) {\n      return root.getElementById(this.anchor);\n    }\n\n    return document.getElementById(this.anchor);\n  }\n\n  private _syncAnchorAria() {\n    const anchorEl = this._resolveAnchorElement();\n    if (!anchorEl) {\n      return;\n    }\n\n    if (!this.id) {\n      this.id = `wc-menu-${Math.random().toString(36).slice(2, 9)}`;\n    }\n\n    anchorEl.setAttribute('aria-haspopup', 'menu');\n    anchorEl.setAttribute('aria-controls', this.id);\n    anchorEl.setAttribute('aria-expanded', String(this.open));\n  }\n\n  private _enabledItems() {\n    return this.items.filter(item => !item.disabled);\n  }\n\n  private _syncRovingTabIndex() {\n    const ownedItems = this.items;\n    const enabledItems = this._enabledItems();\n    for (const item of ownedItems) {\n      item.tabIndex = -1;\n    }\n\n    if (!enabledItems.length) {\n      this.activeIndex = -1;\n      return;\n    }\n\n    if (this.activeIndex < 0 || this.activeIndex >= enabledItems.length) {\n      this.activeIndex = 0;\n    }\n\n    enabledItems[this.activeIndex].tabIndex = 0;\n  }\n\n  private _setActiveByOffset(offset: 1 | -1) {\n    const enabledItems = this._enabledItems();\n    if (!enabledItems.length) {\n      return;\n    }\n\n    if (this.activeIndex < 0) {\n      this.activeIndex = 0;\n    } else {\n      const count = enabledItems.length;\n      this.activeIndex = (this.activeIndex + offset + count) % count;\n    }\n\n    this._syncRovingTabIndex();\n    enabledItems[this.activeIndex]?.focus();\n  }\n\n  private _setBoundaryActive(index: number) {\n    const enabledItems = this._enabledItems();\n    if (!enabledItems.length) {\n      return;\n    }\n\n    this.activeIndex = index;\n    this._syncRovingTabIndex();\n    enabledItems[this.activeIndex]?.focus();\n  }\n\n  private _getActiveItem() {\n    const enabledItems = this._enabledItems();\n    if (!enabledItems.length || this.activeIndex < 0) {\n      return null;\n    }\n\n    return enabledItems[this.activeIndex] ?? null;\n  }\n\n  private _getFirstEnabledItem() {\n    return this._enabledItems()[0] ?? null;\n  }\n\n  private _isEventFromThisMenu(event: Event) {\n    const path = event.composedPath();\n    const sourceMenu = path.find(target => target instanceof Menu);\n\n    return sourceMenu === this;\n  }\n\n  private _ownedItemFromEvent(event: Event) {\n    if (!this._isEventFromThisMenu(event)) {\n      return null;\n    }\n\n    const path = event.composedPath();\n    const ownedItems = this.items;\n\n    for (const target of path) {\n      if (target instanceof MenuItem) {\n        const ownedItem = ownedItems.find(item => item === target);\n        if (ownedItem) {\n          return ownedItem;\n        }\n      }\n    }\n\n    return null;\n  }\n\n  private _setActiveItem(item: MenuItem) {\n    const enabledItems = this._enabledItems();\n    const nextIndex = enabledItems.indexOf(item);\n    if (nextIndex < 0) {\n      return;\n    }\n\n    this.activeIndex = nextIndex;\n    this._syncRovingTabIndex();\n  }\n\n  private _dispatchItemActivate(item: MenuItem) {\n    this.dispatchEvent(\n      new CustomEvent('menu-item-activate', {\n        bubbles: true,\n        composed: true,\n        detail: { item },\n      }),\n    );\n  }\n\n  private _onClick = (event: Event) => {\n    if (!this.open) {\n      return;\n    }\n\n    const item = this._ownedItemFromEvent(event);\n    if (!item) {\n      return;\n    }\n\n    this._setActiveItem(item);\n    this._dispatchItemActivate(item);\n    if (item.keepOpen) {\n      return;\n    }\n\n    this.close({ kind: 'click-selection' });\n  };\n\n  private _onKeyDown = (event: KeyboardEvent) => {\n    if (!this.open) {\n      return;\n    }\n\n    if (!this._isEventFromThisMenu(event)) {\n      return;\n    }\n\n    const eventItem = this._ownedItemFromEvent(event);\n    if (eventItem) {\n      this._setActiveItem(eventItem);\n    }\n\n    switch (event.key) {\n      case 'ArrowDown':\n        event.preventDefault();\n        this._setActiveByOffset(1);\n        break;\n      case 'ArrowUp':\n        event.preventDefault();\n        this._setActiveByOffset(-1);\n        break;\n      case 'Home':\n        event.preventDefault();\n        this._setBoundaryActive(0);\n        break;\n      case 'End': {\n        event.preventDefault();\n        const last = Math.max(this._enabledItems().length - 1, 0);\n        this._setBoundaryActive(last);\n        break;\n      }\n      case 'Escape':\n        event.preventDefault();\n        this.close({ kind: 'keydown', key: 'Escape' });\n        break;\n      case 'Tab':\n        this.close({ kind: 'keydown', key: 'Tab' });\n        break;\n      case 'Enter':\n      case ' ': {\n        event.preventDefault();\n        const activeItem = this._getActiveItem() ?? this._getFirstEnabledItem();\n        if (!activeItem) {\n          return;\n        }\n\n        this._setActiveItem(activeItem);\n        activeItem.click();\n        break;\n      }\n      default:\n        break;\n    }\n  };\n\n  private _onSlotChange = () => {\n    this._syncRovingTabIndex();\n  };\n\n  private _applyPositioning() {\n    if (!this.open || !this.menuListElement) {\n      return;\n    }\n\n    const anchorEl = this._resolveAnchorElement();\n    if (!anchorEl) {\n      return;\n    }\n\n    this._floatingController.setOptions({\n      placement: this.placement,\n      offset: this.offset,\n      strategy: 'fixed',\n      closeOnClickOutside: !this.stayOpenOnOutsideClick,\n    });\n    this._floatingController.setElements(anchorEl, this.menuListElement);\n    this._floatingController.open();\n  }\n\n  protected override updated(changedProperties: Map<string, unknown>) {\n    if (changedProperties.has('anchor') || changedProperties.has('open')) {\n      this._syncAnchorAria();\n    }\n\n    if (changedProperties.has('open')) {\n      if (this.open) {\n        this._lastFocusedElement = document.activeElement as HTMLElement | null;\n        this._syncRovingTabIndex();\n        this.dispatchEvent(\n          new CustomEvent('opened', {\n            bubbles: true,\n            composed: true,\n          }),\n        );\n\n        this._applyPositioning();\n      } else {\n        this._floatingController.close();\n\n        const reason = this._closeReason;\n        this.dispatchEvent(\n          new CustomEvent('close-menu', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              reason,\n              itemPath: [],\n            },\n          }),\n        );\n        this.dispatchEvent(\n          new CustomEvent('closed', {\n            bubbles: true,\n            composed: true,\n            detail: { reason },\n          }),\n        );\n\n        const shouldRestoreFocus =\n          reason.kind !== 'keydown' || reason.key !== 'Tab';\n\n        if (!this.isSubmenu && shouldRestoreFocus) {\n          this._lastFocusedElement?.focus();\n        }\n      }\n    }\n\n    if (\n      (changedProperties.has('open') ||\n        changedProperties.has('anchor') ||\n        changedProperties.has('placement') ||\n        changedProperties.has('offset')) &&\n      this.open\n    ) {\n      this._applyPositioning();\n    }\n  }\n\n  render() {\n    return html`<div\n      class=${classMap({\n        menu: true,\n        open: !this.preview && this.open,\n        closed: !this.preview && !this.open,\n        preview: this.preview,\n        [`variant-${this.variant}`]: true,\n      })}\n      aria-hidden=${String(!this.open)}\n    >\n      <div class=\"background\"></div>\n\n      <div class=\"menu-content\">\n        <slot @slotchange=${this._onSlotChange}></slot>\n      </div>\n    </div>`;\n  }\n}\n"],"names":["LitElement","html","classMap","styles","property","state","query"],"mappings":"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"}
+{"version":3,"file":"menu.js","sources":["../../src/menu/menu/menu.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport type { Placement } from '@floating-ui/dom';\nimport styles from './menu.scss';\nimport { FloatingController } from '../../__internal/controllers/floating-controller.js';\nimport { MenuItem } from '../menu-item/menu-item.js';\nimport IndividualComponent from '@/IndividualComponent.js';\n\ntype CloseReason =\n  | { kind: 'click-selection' }\n  | { kind: 'keydown'; key: string }\n  | { kind: 'outside-click' }\n  | { kind: 'focusout' }\n  | { kind: 'programmatic' };\n\n/**\n * @label Menu\n * @tag wc-menu\n * @rawTag menu\n * @summary A list of menu items.\n * @tags navigation\n *\n * @example\n * ```html\n * <wc-menu preview>\n *   <wc-menu-item>Item 1</wc-menu-item>\n *   <wc-menu-item selected>Item 2</wc-menu-item>\n * </wc-menu>\n * ```\n */\n@IndividualComponent\nexport class Menu extends LitElement {\n  static styles = [styles];\n\n  static Item = MenuItem;\n\n  /** Whether the menu is currently visible. */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /** Visual variant of the menu. `\"vibrant\"` applies stronger color emphasis. */\n  @property({ type: String, reflect: true }) variant: 'standard' | 'vibrant' =\n    'standard';\n\n  /** ID of the anchor element the menu is positioned relative to. */\n  @property({ type: String }) anchor = '';\n\n  /** When true, renders the menu in a static preview state (always visible, no animation). */\n  @property({ type: Boolean, reflect: true }) preview = false;\n\n  /** When true, the menu will not close when a click occurs outside it. */\n  @property({ type: Boolean, attribute: 'stay-open-on-outside-click' })\n  stayOpenOnOutsideClick = false;\n\n  /** When true, the menu will not close when focus leaves it. */\n  @property({ type: Boolean, attribute: 'stay-open-on-focusout' })\n  stayOpenOnFocusout = false;\n\n  /** Set to true when this menu is being used as a submenu inside another menu. */\n  @property({ type: Boolean, attribute: 'is-submenu' }) isSubmenu = false;\n\n  /** Floating UI placement of the menu relative to its anchor. */\n  @property({ type: String }) placement: Placement = 'bottom-start';\n\n  /** Distance in pixels between the menu and its anchor element. */\n  @property({ type: Number }) offset = 6;\n\n  /** Index of the currently focused/active item within the enabled items list. */\n  @state() private activeIndex = -1;\n\n  @query('.menu') private readonly menuListElement!: HTMLElement;\n\n  /** Direct reference to the anchor element; takes precedence over the `anchor` ID property. */\n  anchorElement: HTMLElement | null = null;\n\n  /** Controller managing floating-UI positioning. */\n  private readonly _floatingController = new FloatingController(this, {\n    trigger: 'manual',\n    closeOnClickOutside: false,\n    strategy: 'fixed',\n    onOpenChange: isOpen => {\n      if (isOpen || !this.open) {\n        return;\n      }\n\n      this.close({ kind: 'outside-click' });\n    },\n  });\n\n  /** Element that had focus before the menu opened; restored on close. */\n  private _lastFocusedElement: HTMLElement | null = null;\n\n  /** Reason that triggered the most recent close, included in the `closed` event detail. */\n  private _closeReason: CloseReason = { kind: 'programmatic' };\n\n  connectedCallback() {\n    // eslint-disable-next-line wc/guard-super-call\n    super.connectedCallback();\n    this.setAttribute('role', 'menu');\n\n    this.addEventListener('keydown', this._onKeyDown);\n    this.addEventListener('click', this._onClick);\n    this._syncAnchorAria();\n  }\n\n  disconnectedCallback() {\n    this.removeEventListener('keydown', this._onKeyDown);\n    this.removeEventListener('click', this._onClick);\n    this._floatingController.close();\n    super.disconnectedCallback();\n  }\n\n  get items(): MenuItem[] {\n    const slot = this.shadowRoot?.querySelector('slot');\n    const elements = slot?.assignedElements({ flatten: true }) ?? [];\n    const items: MenuItem[] = [];\n\n    for (const element of elements) {\n      if (element instanceof MenuItem) {\n        items.push(element);\n      } else {\n        const maybeItem = (element as { item?: unknown }).item;\n        if (maybeItem instanceof MenuItem) {\n          items.push(maybeItem);\n        }\n      }\n    }\n\n    return items;\n  }\n\n  show() {\n    if (this.open) {\n      return;\n    }\n\n    this._closeReason = { kind: 'programmatic' };\n    this.open = true;\n  }\n\n  close(reason: CloseReason = { kind: 'programmatic' }) {\n    if (!this.open) {\n      return;\n    }\n\n    this._closeReason = reason;\n    this.open = false;\n  }\n\n  override focus() {\n    const target = this._getActiveItem() ?? this._getFirstEnabledItem();\n    target?.focus();\n  }\n\n  private _resolveAnchorElement() {\n    if (this.anchorElement) {\n      return this.anchorElement;\n    }\n\n    if (!this.anchor) {\n      return null;\n    }\n\n    const root = this.getRootNode() as Document | ShadowRoot;\n    if ('getElementById' in root) {\n      return root.getElementById(this.anchor);\n    }\n\n    return document.getElementById(this.anchor);\n  }\n\n  private _syncAnchorAria() {\n    const anchorEl = this._resolveAnchorElement();\n    if (!anchorEl) {\n      return;\n    }\n\n    if (!this.id) {\n      this.id = `wc-menu-${Math.random().toString(36).slice(2, 9)}`;\n    }\n\n    anchorEl.setAttribute('aria-haspopup', 'menu');\n    anchorEl.setAttribute('aria-controls', this.id);\n    anchorEl.setAttribute('aria-expanded', String(this.open));\n  }\n\n  private _enabledItems() {\n    return this.items.filter(item => !item.disabled);\n  }\n\n  private _syncRovingTabIndex() {\n    const ownedItems = this.items;\n    const enabledItems = this._enabledItems();\n    for (const item of ownedItems) {\n      item.tabIndex = -1;\n    }\n\n    if (!enabledItems.length) {\n      this.activeIndex = -1;\n      return;\n    }\n\n    if (this.activeIndex < 0 || this.activeIndex >= enabledItems.length) {\n      this.activeIndex = 0;\n    }\n\n    enabledItems[this.activeIndex].tabIndex = 0;\n  }\n\n  private _setActiveByOffset(offset: 1 | -1) {\n    const enabledItems = this._enabledItems();\n    if (!enabledItems.length) {\n      return;\n    }\n\n    if (this.activeIndex < 0) {\n      this.activeIndex = 0;\n    } else {\n      const count = enabledItems.length;\n      this.activeIndex = (this.activeIndex + offset + count) % count;\n    }\n\n    this._syncRovingTabIndex();\n    enabledItems[this.activeIndex]?.focus();\n  }\n\n  private _setBoundaryActive(index: number) {\n    const enabledItems = this._enabledItems();\n    if (!enabledItems.length) {\n      return;\n    }\n\n    this.activeIndex = index;\n    this._syncRovingTabIndex();\n    enabledItems[this.activeIndex]?.focus();\n  }\n\n  private _getActiveItem() {\n    const enabledItems = this._enabledItems();\n    if (!enabledItems.length || this.activeIndex < 0) {\n      return null;\n    }\n\n    return enabledItems[this.activeIndex] ?? null;\n  }\n\n  private _getFirstEnabledItem() {\n    return this._enabledItems()[0] ?? null;\n  }\n\n  private _isEventFromThisMenu(event: Event) {\n    const path = event.composedPath();\n    const sourceMenu = path.find(target => target instanceof Menu);\n\n    return sourceMenu === this;\n  }\n\n  private _ownedItemFromEvent(event: Event) {\n    if (!this._isEventFromThisMenu(event)) {\n      return null;\n    }\n\n    const path = event.composedPath();\n    const ownedItems = this.items;\n\n    for (const target of path) {\n      if (target instanceof MenuItem) {\n        const ownedItem = ownedItems.find(item => item === target);\n        if (ownedItem) {\n          return ownedItem;\n        }\n      }\n    }\n\n    return null;\n  }\n\n  private _setActiveItem(item: MenuItem) {\n    const enabledItems = this._enabledItems();\n    const nextIndex = enabledItems.indexOf(item);\n    if (nextIndex < 0) {\n      return;\n    }\n\n    this.activeIndex = nextIndex;\n    this._syncRovingTabIndex();\n  }\n\n  private _dispatchItemActivate(item: MenuItem) {\n    this.dispatchEvent(\n      new CustomEvent('menu-item-activate', {\n        bubbles: true,\n        composed: true,\n        detail: { item },\n      }),\n    );\n  }\n\n  private _onClick = (event: Event) => {\n    if (!this.open) {\n      return;\n    }\n\n    const item = this._ownedItemFromEvent(event);\n    if (!item) {\n      return;\n    }\n\n    this._setActiveItem(item);\n    this._dispatchItemActivate(item);\n    if (item.keepOpen) {\n      return;\n    }\n\n    this.close({ kind: 'click-selection' });\n  };\n\n  private _onKeyDown = (event: KeyboardEvent) => {\n    if (!this.open) {\n      return;\n    }\n\n    if (!this._isEventFromThisMenu(event)) {\n      return;\n    }\n\n    const eventItem = this._ownedItemFromEvent(event);\n    if (eventItem) {\n      this._setActiveItem(eventItem);\n    }\n\n    switch (event.key) {\n      case 'ArrowDown':\n        event.preventDefault();\n        this._setActiveByOffset(1);\n        break;\n      case 'ArrowUp':\n        event.preventDefault();\n        this._setActiveByOffset(-1);\n        break;\n      case 'Home':\n        event.preventDefault();\n        this._setBoundaryActive(0);\n        break;\n      case 'End': {\n        event.preventDefault();\n        const last = Math.max(this._enabledItems().length - 1, 0);\n        this._setBoundaryActive(last);\n        break;\n      }\n      case 'Escape':\n        event.preventDefault();\n        this.close({ kind: 'keydown', key: 'Escape' });\n        break;\n      case 'Tab':\n        this.close({ kind: 'keydown', key: 'Tab' });\n        break;\n      case 'Enter':\n      case ' ': {\n        event.preventDefault();\n        const activeItem = this._getActiveItem() ?? this._getFirstEnabledItem();\n        if (!activeItem) {\n          return;\n        }\n\n        this._setActiveItem(activeItem);\n        activeItem.click();\n        break;\n      }\n      default:\n        break;\n    }\n  };\n\n  private _onSlotChange = () => {\n    this._syncRovingTabIndex();\n  };\n\n  private _applyPositioning() {\n    if (!this.open || !this.menuListElement) {\n      return;\n    }\n\n    const anchorEl = this._resolveAnchorElement();\n    if (!anchorEl) {\n      return;\n    }\n\n    this._floatingController.setOptions({\n      placement: this.placement,\n      offset: this.offset,\n      strategy: 'fixed',\n      closeOnClickOutside: !this.stayOpenOnOutsideClick,\n    });\n    this._floatingController.setElements(anchorEl, this.menuListElement);\n    this._floatingController.open();\n  }\n\n  protected override updated(changedProperties: Map<string, unknown>) {\n    if (changedProperties.has('anchor') || changedProperties.has('open')) {\n      this._syncAnchorAria();\n    }\n\n    if (changedProperties.has('open')) {\n      if (this.open) {\n        this._lastFocusedElement = document.activeElement as HTMLElement | null;\n        this._syncRovingTabIndex();\n        this.dispatchEvent(\n          new CustomEvent('opened', {\n            bubbles: true,\n            composed: true,\n          }),\n        );\n\n        this._applyPositioning();\n      } else {\n        this._floatingController.close();\n\n        const reason = this._closeReason;\n        this.dispatchEvent(\n          new CustomEvent('close-menu', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              reason,\n              itemPath: [],\n            },\n          }),\n        );\n        this.dispatchEvent(\n          new CustomEvent('closed', {\n            bubbles: true,\n            composed: true,\n            detail: { reason },\n          }),\n        );\n\n        const shouldRestoreFocus =\n          reason.kind !== 'keydown' || reason.key !== 'Tab';\n\n        if (!this.isSubmenu && shouldRestoreFocus) {\n          this._lastFocusedElement?.focus();\n        }\n      }\n    }\n\n    if (\n      (changedProperties.has('open') ||\n        changedProperties.has('anchor') ||\n        changedProperties.has('placement') ||\n        changedProperties.has('offset')) &&\n      this.open\n    ) {\n      this._applyPositioning();\n    }\n  }\n\n  render() {\n    return html`<div\n      class=${classMap({\n        menu: true,\n        open: !this.preview && this.open,\n        closed: !this.preview && !this.open,\n        preview: this.preview,\n        [`variant-${this.variant}`]: true,\n      })}\n      aria-hidden=${String(!this.open)}\n    >\n      <div class=\"background\"></div>\n\n      <div class=\"menu-content\">\n        <slot @slotchange=${this._onSlotChange}></slot>\n      </div>\n    </div>`;\n  }\n}\n"],"names":["LitElement","html","classMap","styles","property","state","query"],"mappings":"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"}

package/dist/modal.js

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

package/dist/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","sources":["../../src/modal/modal.ts"],"sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport IndividualComponent from '../IndividualComponent.js';\nimport styles from './modal.scss';\n\ntype ModalSize = 'xs' | 'sm' | 'md' | 'lg' | 'fullscreen';\n\n/**\n * @label Modal\n * @tag wc-modal\n * @rawTag modal\n * @summary A dialog/modal for displaying content in a layer above the page, with optional header, body, and footer slots.\n *\n * @cssprop --modal-container-color - Background color of the dialog container.\n * @cssprop --modal-scrim-color - Color of the scrim backdrop.\n * @cssprop --modal-shape - Corner radius of the dialog container.\n * @cssprop --modal-min-width - Minimum width of the dialog.\n * @cssprop --modal-max-width - Maximum width of the dialog.\n * @cssprop --modal-max-height - Maximum height of the dialog.\n *\n * @example\n * ```html\n * MODAL\n * ```\n * @tags overlay, dialog, feedback\n */\n@IndividualComponent\nexport class Modal extends LitElement {\n  static styles = [styles];\n\n  /** Whether the modal is open. */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /** Heading text shown in the modal header. */\n  @property({ type: String, reflect: true }) heading = '';\n\n  /** Optional subheading / label text shown above the heading. */\n  @property({ type: String, reflect: true }) subheading = '';\n\n  /**\n   * Size of the modal dialog.\n   * - `\"xs\"`: Extra-small.\n   * - `\"sm\"`: Small.\n   * - `\"md\"`: Medium (default).\n   * - `\"lg\"`: Large.\n   * - `\"fullscreen\"`: Full-screen dialog.\n   */\n  @property({ type: String, reflect: true }) size: ModalSize = 'md';\n\n  /** When true, hides the close button in the header. */\n  @property({ type: Boolean, reflect: true, attribute: 'hide-close' })\n  hideClose = false;\n\n  /** When true, renders a loading overlay inside the modal. */\n  @property({ type: Boolean, reflect: true, attribute: 'show-loader' })\n  showLoader = false;\n\n  /** When true, clicking the scrim will not close the modal. */\n  @property({ type: Boolean, attribute: 'no-scrim-close' }) noScrimClose = false;\n\n  @state() private _visible = false;\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('modal-close', {\n        detail: { reason },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private _handleScrimClick() {\n    if (!this.noScrimClose) {\n      this._close('scrim');\n    }\n  }\n\n  private _handleCloseClick() {\n    this._close('close-button');\n  }\n\n  private readonly _handleKeydown = (e: KeyboardEvent) => {\n    if (e.key === 'Escape') {\n      this._close('escape');\n    }\n  };\n\n  protected updated(changedProperties: Map<string, unknown>) {\n    if (changedProperties.has('open')) {\n      if (this.open) {\n        this._visible = true;\n        document.body.style.overflow = 'hidden';\n        document.addEventListener('keydown', this._handleKeydown);\n      } else {\n        document.body.style.overflow = '';\n        document.removeEventListener('keydown', this._handleKeydown);\n      }\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    document.body.style.overflow = '';\n    document.removeEventListener('keydown', this._handleKeydown);\n  }\n\n  private _handleAnimationEnd(e: AnimationEvent) {\n    if (e.animationName === 'modal-exit') {\n      this._visible = false;\n    }\n  }\n\n  render() {\n    if (!this.open && !this._visible) return nothing;\n\n    const hasHeader = this.heading || this.subheading || !this.hideClose;\n\n    return html`\n      <div\n        class=${classMap({ scrim: true, visible: this.open })}\n        @click=${this._handleScrimClick}\n        aria-hidden=\"true\"\n      ></div>\n\n      <div class=\"dialog-wrapper\" role=\"presentation\">\n        <div\n          class=${classMap({\n            dialog: true,\n            open: this.open,\n            [`size-${this.size}`]: true,\n            'show-loader': this.showLoader,\n          })}\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-labelledby=${this.heading ? 'modal-heading' : nothing}\n          @animationend=${this._handleAnimationEnd}\n        >\n          ${hasHeader\n            ? html`\n                <div class=\"dialog-header\">\n                  <div class=\"dialog-heading-section\">\n                    ${this.subheading\n                      ? html`<p class=\"dialog-subheading\">${this.subheading}</p>`\n                      : nothing}\n                    ${this.heading\n                      ? html`<h2 id=\"modal-heading\" class=\"dialog-heading\">\n                          ${this.heading}\n                        </h2>`\n                      : nothing}\n                  </div>\n                  ${!this.hideClose\n                    ? html`<wc-icon-button\n                        class=\"dialog-close\"\n                        variant=\"text\"\n                        aria-label=\"Close dialog\"\n                        @click=${this._handleCloseClick}\n                      >\n                        <wc-icon name=\"close\"></wc-icon>\n                      </wc-icon-button>`\n                    : nothing}\n                </div>\n              `\n            : nothing}\n\n          <div class=\"dialog-content\">\n            <slot></slot>\n          </div>\n\n          <div class=\"dialog-footer\">\n            <slot name=\"footer\"></slot>\n          </div>\n\n          ${this.showLoader\n            ? html`<div class=\"dialog-loader\" aria-hidden=\"true\">\n                <div class=\"dialog-loader-scrim\"></div>\n                <wc-spinner></wc-spinner>\n              </div>`\n            : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","nothing","html","classMap","styles","property","state"],"mappings":"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"}
+{"version":3,"file":"modal.js","sources":["../../src/modal/modal.ts"],"sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport IndividualComponent from '../IndividualComponent.js';\nimport styles from './modal.scss';\n\ntype ModalSize = 'xs' | 'sm' | 'md' | 'lg' | 'fullscreen';\n\n/**\n * @label Modal\n * @tag wc-modal\n * @rawTag modal\n * @summary A dialog/modal for displaying content in a layer above the page, with optional header, body, and footer slots.\n *\n * @cssprop --modal-container-color - Background color of the dialog container.\n * @cssprop --modal-scrim-color - Color of the scrim backdrop.\n * @cssprop --modal-shape - Corner radius of the dialog container.\n * @cssprop --modal-min-width - Minimum width of the dialog.\n * @cssprop --modal-max-width - Maximum width of the dialog.\n * @cssprop --modal-max-height - Maximum height of the dialog.\n *\n * @example\n * ```html\n * MODAL\n * ```\n * @tags overlay, dialog, feedback\n */\n@IndividualComponent\nexport class Modal extends LitElement {\n  static styles = [styles];\n\n  /** Whether the modal is open. */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /** Heading text shown in the modal header. */\n  @property({ type: String, reflect: true }) heading = '';\n\n  /** Optional subheading / label text shown above the heading. */\n  @property({ type: String, reflect: true }) subheading = '';\n\n  /**\n   * Size of the modal dialog.\n   * - `\"xs\"`: Extra-small.\n   * - `\"sm\"`: Small.\n   * - `\"md\"`: Medium (default).\n   * - `\"lg\"`: Large.\n   * - `\"fullscreen\"`: Full-screen dialog.\n   */\n  @property({ type: String, reflect: true }) size: ModalSize = 'md';\n\n  /** When true, hides the close button in the header. */\n  @property({ type: Boolean, reflect: true, attribute: 'hide-close' })\n  hideClose = false;\n\n  /** When true, renders a loading overlay inside the modal. */\n  @property({ type: Boolean, reflect: true, attribute: 'show-loader' })\n  showLoader = false;\n\n  /** When true, clicking the scrim will not close the modal. */\n  @property({ type: Boolean, attribute: 'no-scrim-close' }) noScrimClose = false;\n\n  @state() private _visible = false;\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('modal-close', {\n        detail: { reason },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private _handleScrimClick() {\n    if (!this.noScrimClose) {\n      this._close('scrim');\n    }\n  }\n\n  private _handleCloseClick() {\n    this._close('close-button');\n  }\n\n  private readonly _handleKeydown = (e: KeyboardEvent) => {\n    if (e.key === 'Escape') {\n      this._close('escape');\n    }\n  };\n\n  protected updated(changedProperties: Map<string, unknown>) {\n    if (changedProperties.has('open')) {\n      if (this.open) {\n        this._visible = true;\n        document.body.style.overflow = 'hidden';\n        document.addEventListener('keydown', this._handleKeydown);\n      } else {\n        document.body.style.overflow = '';\n        document.removeEventListener('keydown', this._handleKeydown);\n      }\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    document.body.style.overflow = '';\n    document.removeEventListener('keydown', this._handleKeydown);\n  }\n\n  private _handleAnimationEnd(e: AnimationEvent) {\n    if (e.animationName === 'modal-exit') {\n      this._visible = false;\n    }\n  }\n\n  render() {\n    if (!this.open && !this._visible) return nothing;\n\n    const hasHeader = this.heading || this.subheading || !this.hideClose;\n\n    return html`\n      <div\n        class=${classMap({ scrim: true, visible: this.open })}\n        @click=${this._handleScrimClick}\n        aria-hidden=\"true\"\n      ></div>\n\n      <div class=\"dialog-wrapper\" role=\"presentation\">\n        <div\n          class=${classMap({\n            dialog: true,\n            open: this.open,\n            [`size-${this.size}`]: true,\n            'show-loader': this.showLoader,\n          })}\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-labelledby=${this.heading ? 'modal-heading' : nothing}\n          @animationend=${this._handleAnimationEnd}\n        >\n          ${hasHeader\n            ? html`\n                <div class=\"dialog-header\">\n                  <div class=\"dialog-heading-section\">\n                    ${this.subheading\n                      ? html`<p class=\"dialog-subheading\">${this.subheading}</p>`\n                      : nothing}\n                    ${this.heading\n                      ? html`<h2 id=\"modal-heading\" class=\"dialog-heading\">\n                          ${this.heading}\n                        </h2>`\n                      : nothing}\n                  </div>\n                  ${!this.hideClose\n                    ? html`<wc-icon-button\n                        class=\"dialog-close\"\n                        variant=\"text\"\n                        aria-label=\"Close dialog\"\n                        @click=${this._handleCloseClick}\n                      >\n                        <wc-icon name=\"close\"></wc-icon>\n                      </wc-icon-button>`\n                    : nothing}\n                </div>\n              `\n            : nothing}\n\n          <div class=\"dialog-content\">\n            <slot></slot>\n          </div>\n\n          <div class=\"dialog-footer\">\n            <slot name=\"footer\"></slot>\n          </div>\n\n          ${this.showLoader\n            ? html`<div class=\"dialog-loader\" aria-hidden=\"true\">\n                <div class=\"dialog-loader-scrim\"></div>\n                <wc-spinner></wc-spinner>\n              </div>`\n            : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","nothing","html","classMap","styles","property","state"],"mappings":"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"}

package/dist/navigation-rail-item.js

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

package/dist/navigation-rail-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"navigation-rail-item.js","sources":["../../src/navigation-rail/navigation-rail-item.ts"],"sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport {\n  dispatchActivationClick,\n  isActivationClick,\n} from '@/__internal/utils/dispatch-event-utils.js';\nimport { observerSlotChangesWithCallback } from '@/__internal/utils/observe-slot-change.js';\nimport { throttle } from '@/__internal/utils/throttle.js';\nimport { isLink } from '@/__internal/utils/is-link.js';\nimport styles from './navigation-rail-item.scss';\nimport IndividualComponent from '@/IndividualComponent.js';\n\n/**\n * @label Navigation Rail Item\n * @tag wc-navigation-rail-item\n * @rawTag navigation-rail-item\n *\n * @summary An individual item within a navigation rail.\n * @overview\n * <p>Navigation rail items display a destination with an icon and optional label.</p>\n *\n * @example\n * ```html\n * <wc-navigation-rail-item>\n *   <wc-icon slot=\"icon\">home</wc-icon>\n *   Home\n * </wc-navigation-rail-item>\n * ```\n * @tags navigation\n */\n@IndividualComponent\nexport class NavigationRailItem extends LitElement {\n  #id = crypto.randomUUID();\n\n  static styles = [styles];\n\n  /** Whether this item is currently active/selected. */\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  /** Whether this item is disabled. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Whether the parent rail is in collapsed mode (labels hidden). */\n  @property({ type: Boolean, reflect: true }) collapsed = false;\n\n  /** If provided, the item renders as a link. */\n  @property({ reflect: true }) href?: string;\n\n  /** Link target. */\n  @property() target: string = '_self';\n\n  /** Value used for identification when managing active state externally. */\n  @property({ reflect: true }) value?: string;\n\n  /** Reason the item is disabled (shown to screen readers). */\n  @property({ attribute: 'disabled-reason' }) disabledReason: string = '';\n\n  /** Sets the delay for throttle in milliseconds. When null (default), no throttle is applied. */\n  @property({ type: Number }) throttleDelay: number | null = null;\n\n  /** True when the default slot contains label content. */\n  @state() private _hasLabel = false;\n\n  /** True when the `active-icon` slot contains content. */\n  @state() private _hasActiveIcon = false;\n\n  @query('.item-element') readonly itemElement!: HTMLElement | null;\n\n  constructor() {\n    super();\n    this.addEventListener('click', this.__dispatchClickWithThrottle);\n  }\n\n  override focus() {\n    this.itemElement?.focus();\n  }\n\n  override blur() {\n    this.itemElement?.blur();\n  }\n\n  override firstUpdated() {\n    if (typeof this.throttleDelay === 'number') {\n      this.__dispatchClickWithThrottle = throttle(\n        this.__dispatchClick,\n        this.throttleDelay,\n      );\n    }\n\n    observerSlotChangesWithCallback(\n      this.renderRoot.querySelector('slot.label'),\n      hasContent => {\n        this._hasLabel = hasContent;\n        this.requestUpdate();\n      },\n    );\n\n    observerSlotChangesWithCallback(\n      this.renderRoot.querySelector('slot.active-icon-slot'),\n      hasContent => {\n        this._hasActiveIcon = hasContent;\n        this.requestUpdate();\n      },\n    );\n  }\n\n  __dispatchClickWithThrottle: (event: MouseEvent | KeyboardEvent) => void =\n    event => {\n      this.__dispatchClick(event);\n    };\n\n  __dispatchClick = (event: MouseEvent | KeyboardEvent) => {\n    if (this.disabled && this.href) {\n      event.stopImmediatePropagation();\n      event.preventDefault();\n      return;\n    }\n\n    if (!isActivationClick(event) || !this.itemElement) {\n      return;\n    }\n\n    this.focus();\n    dispatchActivationClick(this.itemElement);\n  };\n\n  __getDisabledReasonID() {\n    return this.disabled && this.disabledReason\n      ? `disabled-reason-${this.#id}`\n      : nothing;\n  }\n\n  __renderDisabledReason() {\n    const disabledReasonID = this.__getDisabledReasonID();\n    if (disabledReasonID)\n      return html`<div\n        id=\"disabled-reason-${this.#id}\"\n        role=\"tooltip\"\n        aria-label=${this.disabledReason}\n        class=\"screen-reader-only\"\n      >\n        ${this.disabledReason}\n      </div>`;\n    return nothing;\n  }\n\n  __renderItemContent() {\n    return html`\n      <wc-focus-ring class=\"focus-ring\" for=\"item\"></wc-focus-ring>\n\n      <div class=\"item-content\">\n        <div class=\"indicator\">\n          <wc-ripple class=\"ripple\"></wc-ripple>\n          <div class=\"icon-container\">\n            <slot name=\"active-icon\" class=\"active-icon-slot\"></slot>\n            <slot name=\"icon\" class=\"icon-slot\"></slot>\n          </div>\n        </div>\n        <div class=\"label ${this.collapsed ? 'hidden' : ''}\"><slot></slot></div>\n      </div>\n\n      ${this.__renderDisabledReason()}\n    `;\n  }\n\n  render() {\n    const cssClasses = {\n      item: true,\n      'item-element': true,\n      active: this.active,\n      disabled: this.disabled,\n      'has-label': this._hasLabel,\n      'has-active-icon': this._hasActiveIcon,\n    };\n\n    if (!isLink(this)) {\n      return html`<button\n        id=\"item\"\n        class=${classMap(cssClasses)}\n        ?disabled=${this.disabled}\n        aria-disabled=${`${this.disabled}`}\n        aria-current=${this.active ? 'page' : nothing}\n        ?aria-describedby=${this.__getDisabledReasonID()}\n      >\n        ${this.__renderItemContent()}\n      </button>`;\n    }\n\n    return html`<a\n      id=\"item\"\n      class=${classMap(cssClasses)}\n      href=${this.href}\n      target=${this.target}\n      aria-current=${this.active ? 'page' : nothing}\n      aria-disabled=${`${this.disabled}`}\n      ?aria-describedby=${this.__getDisabledReasonID()}\n    >\n      ${this.__renderItemContent()}\n    </a>`;\n  }\n}\n"],"names":["LitElement","nothing","html","classMap","styles","property","state","query"],"mappings":"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"}
+{"version":3,"file":"navigation-rail-item.js","sources":["../../src/navigation-rail/navigation-rail-item.ts"],"sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport {\n  dispatchActivationClick,\n  isActivationClick,\n} from '@/__internal/utils/dispatch-event-utils.js';\nimport { observerSlotChangesWithCallback } from '@/__internal/utils/observe-slot-change.js';\nimport { throttle } from '@/__internal/utils/throttle.js';\nimport { isLink } from '@/__internal/utils/is-link.js';\nimport styles from './navigation-rail-item.scss';\nimport IndividualComponent from '@/IndividualComponent.js';\n\n/**\n * @label Navigation Rail Item\n * @tag wc-navigation-rail-item\n * @rawTag navigation-rail-item\n *\n * @summary An individual item within a navigation rail.\n * @overview\n * <p>Navigation rail items display a destination with an icon and optional label.</p>\n *\n * @example\n * ```html\n * <wc-navigation-rail-item>\n *   <wc-icon slot=\"icon\">home</wc-icon>\n *   Home\n * </wc-navigation-rail-item>\n * ```\n * @tags navigation\n */\n@IndividualComponent\nexport class NavigationRailItem extends LitElement {\n  #id = crypto.randomUUID();\n\n  static styles = [styles];\n\n  /** Whether this item is currently active/selected. */\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  /** Whether this item is disabled. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Whether the parent rail is in collapsed mode (labels hidden). */\n  @property({ type: Boolean, reflect: true }) collapsed = false;\n\n  /** If provided, the item renders as a link. */\n  @property({ reflect: true }) href?: string;\n\n  /** Link target. */\n  @property() target: string = '_self';\n\n  /** Value used for identification when managing active state externally. */\n  @property({ reflect: true }) value?: string;\n\n  /** Reason the item is disabled (shown to screen readers). */\n  @property({ attribute: 'disabled-reason' }) disabledReason: string = '';\n\n  /** Sets the delay for throttle in milliseconds. When null (default), no throttle is applied. */\n  @property({ type: Number }) throttleDelay: number | null = null;\n\n  /** True when the default slot contains label content. */\n  @state() private _hasLabel = false;\n\n  /** True when the `active-icon` slot contains content. */\n  @state() private _hasActiveIcon = false;\n\n  @query('.item-element') readonly itemElement!: HTMLElement | null;\n\n  constructor() {\n    super();\n    this.addEventListener('click', this.__dispatchClickWithThrottle);\n  }\n\n  override focus() {\n    this.itemElement?.focus();\n  }\n\n  override blur() {\n    this.itemElement?.blur();\n  }\n\n  override firstUpdated() {\n    if (typeof this.throttleDelay === 'number') {\n      this.__dispatchClickWithThrottle = throttle(\n        this.__dispatchClick,\n        this.throttleDelay,\n      );\n    }\n\n    observerSlotChangesWithCallback(\n      this.renderRoot.querySelector('slot.label'),\n      hasContent => {\n        this._hasLabel = hasContent;\n        this.requestUpdate();\n      },\n    );\n\n    observerSlotChangesWithCallback(\n      this.renderRoot.querySelector('slot.active-icon-slot'),\n      hasContent => {\n        this._hasActiveIcon = hasContent;\n        this.requestUpdate();\n      },\n    );\n  }\n\n  __dispatchClickWithThrottle: (event: MouseEvent | KeyboardEvent) => void =\n    event => {\n      this.__dispatchClick(event);\n    };\n\n  __dispatchClick = (event: MouseEvent | KeyboardEvent) => {\n    if (this.disabled && this.href) {\n      event.stopImmediatePropagation();\n      event.preventDefault();\n      return;\n    }\n\n    if (!isActivationClick(event) || !this.itemElement) {\n      return;\n    }\n\n    this.focus();\n    dispatchActivationClick(this.itemElement);\n  };\n\n  __getDisabledReasonID() {\n    return this.disabled && this.disabledReason\n      ? `disabled-reason-${this.#id}`\n      : nothing;\n  }\n\n  __renderDisabledReason() {\n    const disabledReasonID = this.__getDisabledReasonID();\n    if (disabledReasonID)\n      return html`<div\n        id=\"disabled-reason-${this.#id}\"\n        role=\"tooltip\"\n        aria-label=${this.disabledReason}\n        class=\"screen-reader-only\"\n      >\n        ${this.disabledReason}\n      </div>`;\n    return nothing;\n  }\n\n  __renderItemContent() {\n    return html`\n      <wc-focus-ring class=\"focus-ring\" for=\"item\"></wc-focus-ring>\n\n      <div class=\"item-content\">\n        <div class=\"indicator\">\n          <wc-ripple class=\"ripple\"></wc-ripple>\n          <div class=\"icon-container\">\n            <slot name=\"active-icon\" class=\"active-icon-slot\"></slot>\n            <slot name=\"icon\" class=\"icon-slot\"></slot>\n          </div>\n        </div>\n        <div class=\"label ${this.collapsed ? 'hidden' : ''}\"><slot></slot></div>\n      </div>\n\n      ${this.__renderDisabledReason()}\n    `;\n  }\n\n  render() {\n    const cssClasses = {\n      item: true,\n      'item-element': true,\n      active: this.active,\n      disabled: this.disabled,\n      'has-label': this._hasLabel,\n      'has-active-icon': this._hasActiveIcon,\n    };\n\n    if (!isLink(this)) {\n      return html`<button\n        id=\"item\"\n        class=${classMap(cssClasses)}\n        ?disabled=${this.disabled}\n        aria-disabled=${`${this.disabled}`}\n        aria-current=${this.active ? 'page' : nothing}\n        ?aria-describedby=${this.__getDisabledReasonID()}\n      >\n        ${this.__renderItemContent()}\n      </button>`;\n    }\n\n    return html`<a\n      id=\"item\"\n      class=${classMap(cssClasses)}\n      href=${this.href}\n      target=${this.target}\n      aria-current=${this.active ? 'page' : nothing}\n      aria-disabled=${`${this.disabled}`}\n      ?aria-describedby=${this.__getDisabledReasonID()}\n    >\n      ${this.__renderItemContent()}\n    </a>`;\n  }\n}\n"],"names":["LitElement","nothing","html","classMap","styles","property","state","query"],"mappings":"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"}

package/dist/navigation-rail.js

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

package/dist/navigation-rail.js.map

@@ -1 +1 @@
-{"version":3,"file":"navigation-rail.js","sources":["../../src/navigation-rail/navigation-rail.ts"],"sourcesContent":["import { html, LitElement, PropertyValues } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport styles from './navigation-rail.scss';\nimport { NavigationRailItem } from './navigation-rail-item.js';\nimport IndividualComponent from '@/IndividualComponent.js';\n\n/**\n * @label Navigation Rail\n * @tag wc-navigation-rail\n * @rawTag navigation-rail\n *\n * @summary A vertical side navigation for medium-sized screens,.\n * @overview\n * <p>Navigation rail provides access to primary destinations in an app using icons—with or without labels—on a vertical rail.</p>\n * <p>Use navigation rail on medium-sized screens (tablets) with 3–7 destinations.</p>\n *\n * @slot header - Content displayed above the rail items.\n * @slot footer - Content pinned to the bottom of the rail.\n *\n * @cssprop --nav-rail-width - Width of the rail container. Defaults to 5rem (80dp).\n * @cssprop --nav-rail-container-color - Background color of the rail. Defaults to surface color.\n * @cssprop --nav-rail-indicator-color - Color of the active indicator. Defaults to secondary-container.\n * @cssprop --nav-rail-indicator-shape - Shape (border-radius) of the active indicator. Defaults to full (pill).\n * @cssprop --nav-rail-indicator-width - Width of the active indicator. Defaults to 3.5rem (56dp).\n * @cssprop --nav-rail-indicator-height - Height of the active indicator. Defaults to 2rem (32dp).\n * @cssprop --nav-rail-inactive-icon-color - Color of inactive icons. Defaults to on-surface-variant.\n * @cssprop --nav-rail-active-icon-color - Color of active icons. Defaults to on-secondary-container.\n * @cssprop --nav-rail-inactive-label-color - Color of inactive labels. Defaults to on-surface-variant.\n * @cssprop --nav-rail-active-label-color - Color of active labels. Defaults to on-surface.\n *\n * @example\n * ```html\n * <wc-navigation-rail>\n *   <wc-navigation-rail-item active>\n *     <wc-icon slot=\"icon\" name=\"home\"></wc-icon>\n *     Home\n *   </wc-navigation-rail-item>\n *   <wc-navigation-rail-item>\n *     <wc-icon slot=\"icon\" name=\"search\"></wc-icon>\n *     Search\n *   </wc-navigation-rail-item>\n * </wc-navigation-rail>\n * ```\n * @tags navigation\n */\n@IndividualComponent\nexport class NavigationRail extends LitElement {\n  static styles = [styles];\n\n  static Item = NavigationRailItem;\n\n  /**\n   * Display mode of the navigation rail.\n   * - `\"expanded\"`: shows labels.\n   * - `\"collapsed\"`: hides labels.\n   */\n  @property({ reflect: true }) mode: 'expanded' | 'collapsed' = 'expanded';\n\n  /**\n   * Whether to show a divider between the header and items sections.\n   */\n  @property({ type: Boolean, attribute: 'show-divider' }) showDivider = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('click', this._handleItemClick);\n    this.setAttribute('role', 'navigation');\n    this.setAttribute('aria-label', this.getAttribute('aria-label') ?? 'Main navigation');\n  }\n\n  disconnectedCallback() {\n    this.removeEventListener('click', this._handleItemClick);\n    super.disconnectedCallback();\n  }\n\n  protected override firstUpdated() {\n    this._syncItemMode();\n  }\n\n  protected override updated(changedProperties: PropertyValues<this>) {\n    if (changedProperties.has('mode')) {\n      this._syncItemMode();\n    }\n  }\n\n  private _handleItemClick = (event: Event) => {\n    const target = event.target as HTMLElement;\n    const item = target.closest('wc-navigation-rail-item') as NavigationRailItem | null;\n\n    if (!item || item.disabled) return;\n\n    // Deactivate all items and activate the clicked one\n    for (const railItem of this._getItems()) {\n      railItem.active = railItem === item;\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('nav-change', {\n        detail: {\n          value: item.value,\n          item,\n        },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  };\n\n  private _getItems(): NavigationRailItem[] {\n    return Array.from(\n      this.querySelectorAll('wc-navigation-rail-item'),\n    ) as NavigationRailItem[];\n  }\n\n  private _syncItemMode = () => {\n    const isCollapsed = this.mode === 'collapsed';\n    for (const railItem of this._getItems()) {\n      railItem.collapsed = isCollapsed;\n    }\n  };\n\n  render() {\n    const cssClasses = {\n      rail: true,\n      [`mode-${this.mode}`]: true,\n    };\n\n    return html`\n      <div class=${classMap(cssClasses)}>\n        <div class=\"header\">\n          <slot name=\"header\"></slot>\n        </div>\n        ${this.showDivider ? html`<wc-divider></wc-divider>` : ''}\n        <nav class=\"items\" role=\"presentation\">\n          <slot @slotchange=${this._syncItemMode}></slot>\n        </nav>\n        <div class=\"footer\">\n          <slot name=\"footer\"></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","html","classMap","styles","property"],"mappings":"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"}
+{"version":3,"file":"navigation-rail.js","sources":["../../src/navigation-rail/navigation-rail.ts"],"sourcesContent":["import { html, LitElement, PropertyValues } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport styles from './navigation-rail.scss';\nimport { NavigationRailItem } from './navigation-rail-item.js';\nimport IndividualComponent from '@/IndividualComponent.js';\n\n/**\n * @label Navigation Rail\n * @tag wc-navigation-rail\n * @rawTag navigation-rail\n *\n * @summary A vertical side navigation for medium-sized screens,.\n * @overview\n * <p>Navigation rail provides access to primary destinations in an app using icons—with or without labels—on a vertical rail.</p>\n * <p>Use navigation rail on medium-sized screens (tablets) with 3–7 destinations.</p>\n *\n * @slot header - Content displayed above the rail items.\n * @slot footer - Content pinned to the bottom of the rail.\n *\n * @cssprop --nav-rail-width - Width of the rail container. Defaults to 5rem (80dp).\n * @cssprop --nav-rail-container-color - Background color of the rail. Defaults to surface color.\n * @cssprop --nav-rail-indicator-color - Color of the active indicator. Defaults to secondary-container.\n * @cssprop --nav-rail-indicator-shape - Shape (border-radius) of the active indicator. Defaults to full (pill).\n * @cssprop --nav-rail-indicator-width - Width of the active indicator. Defaults to 3.5rem (56dp).\n * @cssprop --nav-rail-indicator-height - Height of the active indicator. Defaults to 2rem (32dp).\n * @cssprop --nav-rail-inactive-icon-color - Color of inactive icons. Defaults to on-surface-variant.\n * @cssprop --nav-rail-active-icon-color - Color of active icons. Defaults to on-secondary-container.\n * @cssprop --nav-rail-inactive-label-color - Color of inactive labels. Defaults to on-surface-variant.\n * @cssprop --nav-rail-active-label-color - Color of active labels. Defaults to on-surface.\n *\n * @example\n * ```html\n * <wc-navigation-rail>\n *   <wc-navigation-rail-item active>\n *     <wc-icon slot=\"icon\" name=\"home\"></wc-icon>\n *     Home\n *   </wc-navigation-rail-item>\n *   <wc-navigation-rail-item>\n *     <wc-icon slot=\"icon\" name=\"search\"></wc-icon>\n *     Search\n *   </wc-navigation-rail-item>\n * </wc-navigation-rail>\n * ```\n * @tags navigation\n */\n@IndividualComponent\nexport class NavigationRail extends LitElement {\n  static styles = [styles];\n\n  static Item = NavigationRailItem;\n\n  /**\n   * Display mode of the navigation rail.\n   * - `\"expanded\"`: shows labels.\n   * - `\"collapsed\"`: hides labels.\n   */\n  @property({ reflect: true }) mode: 'expanded' | 'collapsed' = 'expanded';\n\n  /**\n   * Whether to show a divider between the header and items sections.\n   */\n  @property({ type: Boolean, attribute: 'show-divider' }) showDivider = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('click', this._handleItemClick);\n    this.setAttribute('role', 'navigation');\n    this.setAttribute('aria-label', this.getAttribute('aria-label') ?? 'Main navigation');\n  }\n\n  disconnectedCallback() {\n    this.removeEventListener('click', this._handleItemClick);\n    super.disconnectedCallback();\n  }\n\n  protected override firstUpdated() {\n    this._syncItemMode();\n  }\n\n  protected override updated(changedProperties: PropertyValues<this>) {\n    if (changedProperties.has('mode')) {\n      this._syncItemMode();\n    }\n  }\n\n  private _handleItemClick = (event: Event) => {\n    const target = event.target as HTMLElement;\n    const item = target.closest('wc-navigation-rail-item') as NavigationRailItem | null;\n\n    if (!item || item.disabled) return;\n\n    // Deactivate all items and activate the clicked one\n    for (const railItem of this._getItems()) {\n      railItem.active = railItem === item;\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('nav-change', {\n        detail: {\n          value: item.value,\n          item,\n        },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  };\n\n  private _getItems(): NavigationRailItem[] {\n    return Array.from(\n      this.querySelectorAll('wc-navigation-rail-item'),\n    ) as NavigationRailItem[];\n  }\n\n  private _syncItemMode = () => {\n    const isCollapsed = this.mode === 'collapsed';\n    for (const railItem of this._getItems()) {\n      railItem.collapsed = isCollapsed;\n    }\n  };\n\n  render() {\n    const cssClasses = {\n      rail: true,\n      [`mode-${this.mode}`]: true,\n    };\n\n    return html`\n      <div class=${classMap(cssClasses)}>\n        <div class=\"header\">\n          <slot name=\"header\"></slot>\n        </div>\n        ${this.showDivider ? html`<wc-divider></wc-divider>` : ''}\n        <nav class=\"items\" role=\"presentation\">\n          <slot @slotchange=${this._syncItemMode}></slot>\n        </nav>\n        <div class=\"footer\">\n          <slot name=\"footer\"></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","html","classMap","styles","property"],"mappings":"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"}

package/dist/notification-manager.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/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

@@ -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/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":"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"}

package/dist/number-counter.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 {

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/pagination.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/pagination.js.map

@@ -1 +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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"}
+{"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

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

package/dist/popover-content.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover-content.js","sources":["../../src/popover/popover-content.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport styles from './popover-content.scss';\n\n/**\n * @label Popover Content\n * @tag wc-popover-content\n * @rawTag popover-content\n * @summary Content container for the wc-popover component.\n * @tags display\n *\n * @cssprop --popover-content-background - Background color of the popover content. Defaults to `var(--color-surface-container)`.\n * @cssprop --popover-content-padding - Padding of the popover content. Defaults to `var(--spacing-200)`.\n * @cssprop --popover-content-border-radius - Border radius of the popover content. Defaults to `var(--shape-corner-small)`.\n * @cssprop --popover-content-min-width - Minimum width of the popover content. Defaults to `10rem`.\n *\n * @example\n * ```html\n * <wc-popover-content>\n *   <p>Popover body text</p>\n * </wc-popover-content>\n * ```\n */\n@IndividualComponent\nexport class PopoverContent extends LitElement {\n  static styles = [styles];\n\n  /**\n   * Whether the popover content is visible.\n   */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          'popover-content': true,\n          open: this.open,\n        })}\n        part=\"container\"\n      >\n        <slot></slot>\n        <wc-elevation class=\"elevation\"></wc-elevation>\n        <div class=\"arrow\" part=\"arrow\"></div>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","html","classMap","styles","property"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA;;;;;;;;;;;;;;;;;;AAkBG;AAEI,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQA,GAAU,CAAA;AAAvC,IAAA,WAAA,GAAA;;AAGL;;AAEG;QACyC,IAAA,CAAA,IAAI,GAAG,KAAK;IAiB1D;IAfE,MAAM,GAAA;AACJ,QAAA,OAAOC,CAAI,CAAA;;AAEC,cAAA,EAAAC,CAAQ,CAAC;AACf,YAAA,iBAAiB,EAAE,IAAI;YACvB,IAAI,EAAE,IAAI,CAAC,IAAI;SAChB,CAAC;;;;;;;KAOL;IACH;;AArBO,cAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;AAKoB,UAAA,CAAA;IAA3CC,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;AAAe,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,MAAA,EAAA,MAAA,CAAA;AAN9C,cAAc,GAAA,UAAA,CAAA;IAD1B;AACY,CAAA,EAAA,cAAc,CAuB1B;;;;"}
+{"version":3,"file":"popover-content.js","sources":["../../src/popover/popover-content.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport styles from './popover-content.scss';\n\n/**\n * @label Popover Content\n * @tag wc-popover-content\n * @rawTag popover-content\n * @summary Content container for the wc-popover component.\n * @tags display\n *\n * @cssprop --popover-content-background - Background color of the popover content. Defaults to `var(--color-surface-container)`.\n * @cssprop --popover-content-padding - Padding of the popover content. Defaults to `var(--spacing-200)`.\n * @cssprop --popover-content-border-radius - Border radius of the popover content. Defaults to `var(--shape-corner-small)`.\n * @cssprop --popover-content-min-width - Minimum width of the popover content. Defaults to `10rem`.\n *\n * @example\n * ```html\n * <wc-popover-content>\n *   <p>Popover body text</p>\n * </wc-popover-content>\n * ```\n */\n@IndividualComponent\nexport class PopoverContent extends LitElement {\n  static styles = [styles];\n\n  /**\n   * Whether the popover content is visible.\n   */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          'popover-content': true,\n          open: this.open,\n        })}\n        part=\"container\"\n      >\n        <slot></slot>\n        <wc-elevation class=\"elevation\"></wc-elevation>\n        <div class=\"arrow\" part=\"arrow\"></div>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","html","classMap","styles","property"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA;;;;;;;;;;;;;;;;;;AAkBG;AAEI,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQA,GAAU,CAAA;AAAvC,IAAA,WAAA,GAAA;;AAGL;;AAEG;QACyC,IAAA,CAAA,IAAI,GAAG,KAAK;IAiB1D;IAfE,MAAM,GAAA;AACJ,QAAA,OAAOC,CAAI,CAAA;;AAEC,cAAA,EAAAC,CAAQ,CAAC;AACf,YAAA,iBAAiB,EAAE,IAAI;YACvB,IAAI,EAAE,IAAI,CAAC,IAAI;SAChB,CAAC;;;;;;;KAOL;IACH;;AArBO,cAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;AAKoB,UAAA,CAAA;IAA3CC,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;AAAe,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,MAAA,EAAA,MAAA,CAAA;AAN9C,cAAc,GAAA,UAAA,CAAA;IAD1B;AACY,CAAA,EAAA,cAAc,CAuB1B;;;;"}

package/dist/popover.js

@@ -4,6 +4,7 @@ import { F as FloatingController } from './floating-controller-CnUZnOhK.js';
 
 var css_248z = i`* {
   box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .screen-reader-only {