@redvars/peacock 3.8.2 → 3.8.4

package/dist/sub-menu.js

@@ -7,13 +7,15 @@ import './base-Cl6v8-BZ.js';
 import './query-CHb9Ft_d.js';
 import './if-defined-BXZpRQ4P.js';
 import './NativeHyperlinkMixin-D9J4aBTy.js';
-import './state-DkTK9EGF.js';
+import './is-link-Dk2OV3PM.js';
 import './class-map-DG7CA1et.js';
 import './directive-ZPhl09Yt.js';
+import './state-DkTK9EGF.js';
 import './floating-controller-CnUZnOhK.js';
 
 var css_248z = i`* {
   box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .screen-reader-only {
@@ -26,6 +28,10 @@ var css_248z = i`* {
 
 :host {
   display: contents;
+}
+
+slot::slotted(wc-menu) {
+  display: contents;
 }`;
 
 let subMenuIdCounter = 0;

package/dist/sub-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"sub-menu.js","sources":["../../src/menu/sub-menu/sub-menu.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, queryAssignedElements } from 'lit/decorators.js';\nimport styles from './sub-menu.scss';\nimport { MenuItem } from '../menu-item/menu-item.js';\nimport { Menu } from '../menu/menu.js';\nimport IndividualComponent from '@/IndividualComponent.js';\n\nlet subMenuIdCounter = 0;\n\n/**\n * @label Sub Menu\n * @tag wc-sub-menu\n * @rawTag sub-menu\n * @summary Connects a menu item to a nested menu.\n */\n@IndividualComponent\nexport class SubMenu extends LitElement {\n  static styles = [styles];\n\n  @property({ type: Number, attribute: 'hover-open-delay' })\n  hoverOpenDelay = 120;\n\n  @property({ type: Number, attribute: 'hover-close-delay' })\n  hoverCloseDelay = 180;\n\n  @property({ type: String, attribute: 'anchor-corner' })\n  anchorCorner = 'start-end';\n\n  @property({ type: String, attribute: 'menu-corner' })\n  menuCorner = 'start-start';\n\n  @queryAssignedElements({ slot: 'item' })\n  private readonly _items!: Element[];\n\n  @queryAssignedElements({ slot: 'menu' })\n  private readonly _menus!: Element[];\n\n  private _openTimeout?: number;\n\n  private _closeTimeout?: number;\n\n  private _resolveAnchorElement(item: MenuItem) {\n    //@ts-ignore\n    return item.itemElement?.itemElement ?? item.itemElement ?? item;\n  }\n\n  private readonly _onChildMenuOpened = () => {\n    const { item } = this;\n    if (!item) {\n      return;\n    }\n\n    item.submenuOpen = true;\n    item.setAttribute('aria-expanded', 'true');\n  };\n\n  private readonly _onChildMenuClosed = () => {\n    const { item } = this;\n    if (!item) {\n      return;\n    }\n\n    item.submenuOpen = false;\n    item.setAttribute('aria-expanded', 'false');\n  };\n\n  get item(): MenuItem | null {\n    const [candidate] = this._items ?? [];\n    return candidate instanceof MenuItem ? candidate : null;\n  }\n\n  get menu(): Menu | null {\n    const [candidate] = this._menus ?? [];\n    return candidate instanceof Menu ? candidate : null;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('mouseenter', this._onMouseEnter);\n    this.addEventListener('mouseleave', this._onMouseLeave);\n  }\n\n  disconnectedCallback() {\n    const { menu } = this;\n    menu?.removeEventListener('opened', this._onChildMenuOpened);\n    menu?.removeEventListener('closed', this._onChildMenuClosed);\n    this.removeEventListener('mouseenter', this._onMouseEnter);\n    this.removeEventListener('mouseleave', this._onMouseLeave);\n    window.clearTimeout(this._openTimeout);\n    window.clearTimeout(this._closeTimeout);\n    super.disconnectedCallback();\n  }\n\n  async show() {\n    const { item, menu } = this;\n    if (!item || !menu) {\n      return;\n    }\n\n    menu.anchorElement = this._resolveAnchorElement(item);\n    menu.isSubmenu = true;\n    menu.show();\n\n    item.hasSubmenu = true;\n    item.submenuOpen = true;\n    item.setAttribute('aria-expanded', 'true');\n  }\n\n  async close() {\n    const { item, menu } = this;\n    if (!item || !menu) {\n      return;\n    }\n\n    menu.close({ kind: 'programmatic' });\n    item.submenuOpen = false;\n    item.setAttribute('aria-expanded', 'false');\n  }\n\n  render() {\n    return html`\n      <slot\n        name=\"item\"\n        @slotchange=${this._onSlotChange}\n        @click=${this._onItemClick}\n        @keydown=${this._onItemKeyDown}\n      ></slot>\n      <slot\n        name=\"menu\"\n        @slotchange=${this._onSlotChange}\n        @close-menu=${this._onCloseMenu}\n        @keydown=${this._onMenuKeyDown}\n      ></slot>\n    `;\n  }\n\n  private _onSlotChange = () => {\n    const { item, menu } = this;\n    if (!item || !menu) {\n      return;\n    }\n\n    if (!menu.id) {\n      subMenuIdCounter += 1;\n      menu.id = `wc-sub-menu-${subMenuIdCounter}`;\n    }\n\n    item.keepOpen = true;\n    item.hasSubmenu = true;\n    item.submenuOpen = menu.open;\n    item.setAttribute('aria-haspopup', 'menu');\n    item.setAttribute('aria-expanded', String(menu.open));\n    item.setAttribute('aria-controls', menu.id);\n\n    menu.removeEventListener('opened', this._onChildMenuOpened);\n    menu.removeEventListener('closed', this._onChildMenuClosed);\n    menu.addEventListener('opened', this._onChildMenuOpened);\n    menu.addEventListener('closed', this._onChildMenuClosed);\n\n    menu.isSubmenu = true;\n    menu.anchorElement = this._resolveAnchorElement(item);\n    menu.placement =\n      getComputedStyle(this).direction === 'rtl' ? 'left-start' : 'right-start';\n    menu.offset = 4;\n  };\n\n  private _onItemClick = () => {\n    if (this.menu?.open) {\n      this.close();\n      return;\n    }\n\n    this.show();\n  };\n\n  private _onItemKeyDown = async (event: KeyboardEvent) => {\n    const isRtl = getComputedStyle(this).direction === 'rtl';\n    const arrowEnter = isRtl ? 'ArrowLeft' : 'ArrowRight';\n\n    const shouldOpen =\n      event.key === arrowEnter || event.key === 'Enter' || event.key === ' ';\n\n    if (!shouldOpen) {\n      return;\n    }\n\n    event.preventDefault();\n    if (event.key === arrowEnter) {\n      event.stopPropagation();\n    }\n\n    await this.show();\n    const firstItem = this.menu?.items.find(menuItem => !menuItem.disabled);\n    if (firstItem) {\n      firstItem.tabIndex = 0;\n      firstItem.focus();\n    }\n  };\n\n  private _onMenuKeyDown = async (event: KeyboardEvent) => {\n    const isRtl = getComputedStyle(this).direction === 'rtl';\n    const arrowExit = isRtl ? 'ArrowRight' : 'ArrowLeft';\n\n    if (event.key !== 'Escape' && event.key !== arrowExit) {\n      return;\n    }\n\n    event.preventDefault();\n    event.stopPropagation();\n\n    await this.close();\n\n    const { item } = this;\n    if (item) {\n      item.tabIndex = 0;\n      item.focus();\n    }\n  };\n\n  private _onCloseMenu = async (\n    event: CustomEvent<{ reason?: { kind?: string; key?: string } }>,\n  ) => {\n    const { reason } = event.detail ?? {};\n    const { key } = reason ?? {};\n    if (reason?.kind === 'keydown' && key === 'Escape') {\n      event.stopPropagation();\n      await this.close();\n      this.item?.focus();\n    }\n  };\n\n  private _onMouseEnter = () => {\n    window.clearTimeout(this._closeTimeout);\n    this._openTimeout = window.setTimeout(() => {\n      this.show();\n    }, this.hoverOpenDelay);\n  };\n\n  private _onMouseLeave = (event: MouseEvent) => {\n    const { relatedTarget: related } = event;\n    if (related instanceof Node && this.contains(related)) {\n      return;\n    }\n\n    window.clearTimeout(this._openTimeout);\n    this._closeTimeout = window.setTimeout(() => {\n      this.close();\n    }, this.hoverCloseDelay);\n  };\n}\n"],"names":["LitElement","html","styles","property","queryAssignedElements"],"mappings":"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"}
+{"version":3,"file":"sub-menu.js","sources":["../../src/menu/sub-menu/sub-menu.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, queryAssignedElements } from 'lit/decorators.js';\nimport styles from './sub-menu.scss';\nimport { MenuItem } from '../menu-item/menu-item.js';\nimport { Menu } from '../menu/menu.js';\nimport IndividualComponent from '@/IndividualComponent.js';\n\nlet subMenuIdCounter = 0;\n\n/**\n * @label Sub Menu\n * @tag wc-sub-menu\n * @rawTag sub-menu\n * @summary Connects a menu item to a nested menu.\n */\n@IndividualComponent\nexport class SubMenu extends LitElement {\n  static styles = [styles];\n\n  @property({ type: Number, attribute: 'hover-open-delay' })\n  hoverOpenDelay = 120;\n\n  @property({ type: Number, attribute: 'hover-close-delay' })\n  hoverCloseDelay = 180;\n\n  @property({ type: String, attribute: 'anchor-corner' })\n  anchorCorner = 'start-end';\n\n  @property({ type: String, attribute: 'menu-corner' })\n  menuCorner = 'start-start';\n\n  @queryAssignedElements({ slot: 'item' })\n  private readonly _items!: Element[];\n\n  @queryAssignedElements({ slot: 'menu' })\n  private readonly _menus!: Element[];\n\n  private _openTimeout?: number;\n\n  private _closeTimeout?: number;\n\n  private _resolveAnchorElement(item: MenuItem) {\n    //@ts-ignore\n    return item.itemElement?.itemElement ?? item.itemElement ?? item;\n  }\n\n  private readonly _onChildMenuOpened = () => {\n    const { item } = this;\n    if (!item) {\n      return;\n    }\n\n    item.submenuOpen = true;\n    item.setAttribute('aria-expanded', 'true');\n  };\n\n  private readonly _onChildMenuClosed = () => {\n    const { item } = this;\n    if (!item) {\n      return;\n    }\n\n    item.submenuOpen = false;\n    item.setAttribute('aria-expanded', 'false');\n  };\n\n  get item(): MenuItem | null {\n    const [candidate] = this._items ?? [];\n    return candidate instanceof MenuItem ? candidate : null;\n  }\n\n  get menu(): Menu | null {\n    const [candidate] = this._menus ?? [];\n    return candidate instanceof Menu ? candidate : null;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('mouseenter', this._onMouseEnter);\n    this.addEventListener('mouseleave', this._onMouseLeave);\n  }\n\n  disconnectedCallback() {\n    const { menu } = this;\n    menu?.removeEventListener('opened', this._onChildMenuOpened);\n    menu?.removeEventListener('closed', this._onChildMenuClosed);\n    this.removeEventListener('mouseenter', this._onMouseEnter);\n    this.removeEventListener('mouseleave', this._onMouseLeave);\n    window.clearTimeout(this._openTimeout);\n    window.clearTimeout(this._closeTimeout);\n    super.disconnectedCallback();\n  }\n\n  async show() {\n    const { item, menu } = this;\n    if (!item || !menu) {\n      return;\n    }\n\n    menu.anchorElement = this._resolveAnchorElement(item);\n    menu.isSubmenu = true;\n    menu.show();\n\n    item.hasSubmenu = true;\n    item.submenuOpen = true;\n    item.setAttribute('aria-expanded', 'true');\n  }\n\n  async close() {\n    const { item, menu } = this;\n    if (!item || !menu) {\n      return;\n    }\n\n    menu.close({ kind: 'programmatic' });\n    item.submenuOpen = false;\n    item.setAttribute('aria-expanded', 'false');\n  }\n\n  render() {\n    return html`\n      <slot\n        name=\"item\"\n        @slotchange=${this._onSlotChange}\n        @click=${this._onItemClick}\n        @keydown=${this._onItemKeyDown}\n      ></slot>\n      <slot\n        name=\"menu\"\n        @slotchange=${this._onSlotChange}\n        @close-menu=${this._onCloseMenu}\n        @keydown=${this._onMenuKeyDown}\n      ></slot>\n    `;\n  }\n\n  private _onSlotChange = () => {\n    const { item, menu } = this;\n    if (!item || !menu) {\n      return;\n    }\n\n    if (!menu.id) {\n      subMenuIdCounter += 1;\n      menu.id = `wc-sub-menu-${subMenuIdCounter}`;\n    }\n\n    item.keepOpen = true;\n    item.hasSubmenu = true;\n    item.submenuOpen = menu.open;\n    item.setAttribute('aria-haspopup', 'menu');\n    item.setAttribute('aria-expanded', String(menu.open));\n    item.setAttribute('aria-controls', menu.id);\n\n    menu.removeEventListener('opened', this._onChildMenuOpened);\n    menu.removeEventListener('closed', this._onChildMenuClosed);\n    menu.addEventListener('opened', this._onChildMenuOpened);\n    menu.addEventListener('closed', this._onChildMenuClosed);\n\n    menu.isSubmenu = true;\n    menu.anchorElement = this._resolveAnchorElement(item);\n    menu.placement =\n      getComputedStyle(this).direction === 'rtl' ? 'left-start' : 'right-start';\n    menu.offset = 4;\n  };\n\n  private _onItemClick = () => {\n    if (this.menu?.open) {\n      this.close();\n      return;\n    }\n\n    this.show();\n  };\n\n  private _onItemKeyDown = async (event: KeyboardEvent) => {\n    const isRtl = getComputedStyle(this).direction === 'rtl';\n    const arrowEnter = isRtl ? 'ArrowLeft' : 'ArrowRight';\n\n    const shouldOpen =\n      event.key === arrowEnter || event.key === 'Enter' || event.key === ' ';\n\n    if (!shouldOpen) {\n      return;\n    }\n\n    event.preventDefault();\n    if (event.key === arrowEnter) {\n      event.stopPropagation();\n    }\n\n    await this.show();\n    const firstItem = this.menu?.items.find(menuItem => !menuItem.disabled);\n    if (firstItem) {\n      firstItem.tabIndex = 0;\n      firstItem.focus();\n    }\n  };\n\n  private _onMenuKeyDown = async (event: KeyboardEvent) => {\n    const isRtl = getComputedStyle(this).direction === 'rtl';\n    const arrowExit = isRtl ? 'ArrowRight' : 'ArrowLeft';\n\n    if (event.key !== 'Escape' && event.key !== arrowExit) {\n      return;\n    }\n\n    event.preventDefault();\n    event.stopPropagation();\n\n    await this.close();\n\n    const { item } = this;\n    if (item) {\n      item.tabIndex = 0;\n      item.focus();\n    }\n  };\n\n  private _onCloseMenu = async (\n    event: CustomEvent<{ reason?: { kind?: string; key?: string } }>,\n  ) => {\n    const { reason } = event.detail ?? {};\n    const { key } = reason ?? {};\n    if (reason?.kind === 'keydown' && key === 'Escape') {\n      event.stopPropagation();\n      await this.close();\n      this.item?.focus();\n    }\n  };\n\n  private _onMouseEnter = () => {\n    window.clearTimeout(this._closeTimeout);\n    this._openTimeout = window.setTimeout(() => {\n      this.show();\n    }, this.hoverOpenDelay);\n  };\n\n  private _onMouseLeave = (event: MouseEvent) => {\n    const { relatedTarget: related } = event;\n    if (related instanceof Node && this.contains(related)) {\n      return;\n    }\n\n    window.clearTimeout(this._openTimeout);\n    this._closeTimeout = window.setTimeout(() => {\n      this.close();\n    }, this.hoverCloseDelay);\n  };\n}\n"],"names":["LitElement","html","styles","property","queryAssignedElements"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,IAAI,gBAAgB,GAAG,CAAC;AAExB;;;;;AAKG;AAEI,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQA,GAAU,CAAA;AAAhC,IAAA,WAAA,GAAA;;QAIL,IAAA,CAAA,cAAc,GAAG,GAAG;QAGpB,IAAA,CAAA,eAAe,GAAG,GAAG;QAGrB,IAAA,CAAA,YAAY,GAAG,WAAW;QAG1B,IAAA,CAAA,UAAU,GAAG,aAAa;QAiBT,IAAA,CAAA,kBAAkB,GAAG,MAAK;AACzC,YAAA,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI;YACrB,IAAI,CAAC,IAAI,EAAE;gBACT;YACF;AAEA,YAAA,IAAI,CAAC,WAAW,GAAG,IAAI;AACvB,YAAA,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC;AAC5C,QAAA,CAAC;QAEgB,IAAA,CAAA,kBAAkB,GAAG,MAAK;AACzC,YAAA,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI;YACrB,IAAI,CAAC,IAAI,EAAE;gBACT;YACF;AAEA,YAAA,IAAI,CAAC,WAAW,GAAG,KAAK;AACxB,YAAA,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,OAAO,CAAC;AAC7C,QAAA,CAAC;QAwEO,IAAA,CAAA,aAAa,GAAG,MAAK;AAC3B,YAAA,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,IAAI;AAC3B,YAAA,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE;gBAClB;YACF;AAEA,YAAA,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE;gBACZ,gBAAgB,IAAI,CAAC;AACrB,gBAAA,IAAI,CAAC,EAAE,GAAG,CAAA,YAAA,EAAe,gBAAgB,EAAE;YAC7C;AAEA,YAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;AACpB,YAAA,IAAI,CAAC,UAAU,GAAG,IAAI;AACtB,YAAA,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,IAAI;AAC5B,YAAA,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC;AAC1C,YAAA,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YACrD,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,IAAI,CAAC,EAAE,CAAC;YAE3C,IAAI,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,kBAAkB,CAAC;YAC3D,IAAI,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,kBAAkB,CAAC;YAC3D,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,kBAAkB,CAAC;YACxD,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,kBAAkB,CAAC;AAExD,YAAA,IAAI,CAAC,SAAS,GAAG,IAAI;YACrB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC;AACrD,YAAA,IAAI,CAAC,SAAS;AACZ,gBAAA,gBAAgB,CAAC,IAAI,CAAC,CAAC,SAAS,KAAK,KAAK,GAAG,YAAY,GAAG,aAAa;AAC3E,YAAA,IAAI,CAAC,MAAM,GAAG,CAAC;AACjB,QAAA,CAAC;QAEO,IAAA,CAAA,YAAY,GAAG,MAAK;AAC1B,YAAA,IAAI,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE;gBACnB,IAAI,CAAC,KAAK,EAAE;gBACZ;YACF;YAEA,IAAI,CAAC,IAAI,EAAE;AACb,QAAA,CAAC;AAEO,QAAA,IAAA,CAAA,cAAc,GAAG,OAAO,KAAoB,KAAI;YACtD,MAAM,KAAK,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC,SAAS,KAAK,KAAK;YACxD,MAAM,UAAU,GAAG,KAAK,GAAG,WAAW,GAAG,YAAY;AAErD,YAAA,MAAM,UAAU,GACd,KAAK,CAAC,GAAG,KAAK,UAAU,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG;YAExE,IAAI,CAAC,UAAU,EAAE;gBACf;YACF;YAEA,KAAK,CAAC,cAAc,EAAE;AACtB,YAAA,IAAI,KAAK,CAAC,GAAG,KAAK,UAAU,EAAE;gBAC5B,KAAK,CAAC,eAAe,EAAE;YACzB;AAEA,YAAA,MAAM,IAAI,CAAC,IAAI,EAAE;AACjB,YAAA,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC;YACvE,IAAI,SAAS,EAAE;AACb,gBAAA,SAAS,CAAC,QAAQ,GAAG,CAAC;gBACtB,SAAS,CAAC,KAAK,EAAE;YACnB;AACF,QAAA,CAAC;AAEO,QAAA,IAAA,CAAA,cAAc,GAAG,OAAO,KAAoB,KAAI;YACtD,MAAM,KAAK,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC,SAAS,KAAK,KAAK;YACxD,MAAM,SAAS,GAAG,KAAK,GAAG,YAAY,GAAG,WAAW;AAEpD,YAAA,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,EAAE;gBACrD;YACF;YAEA,KAAK,CAAC,cAAc,EAAE;YACtB,KAAK,CAAC,eAAe,EAAE;AAEvB,YAAA,MAAM,IAAI,CAAC,KAAK,EAAE;AAElB,YAAA,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI;YACrB,IAAI,IAAI,EAAE;AACR,gBAAA,IAAI,CAAC,QAAQ,GAAG,CAAC;gBACjB,IAAI,CAAC,KAAK,EAAE;YACd;AACF,QAAA,CAAC;AAEO,QAAA,IAAA,CAAA,YAAY,GAAG,OACrB,KAAgE,KAC9D;YACF,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,IAAI,EAAE;AACrC,YAAA,MAAM,EAAE,GAAG,EAAE,GAAG,MAAM,IAAI,EAAE;YAC5B,IAAI,MAAM,EAAE,IAAI,KAAK,SAAS,IAAI,GAAG,KAAK,QAAQ,EAAE;gBAClD,KAAK,CAAC,eAAe,EAAE;AACvB,gBAAA,MAAM,IAAI,CAAC,KAAK,EAAE;AAClB,gBAAA,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE;YACpB;AACF,QAAA,CAAC;QAEO,IAAA,CAAA,aAAa,GAAG,MAAK;AAC3B,YAAA,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,aAAa,CAAC;YACvC,IAAI,CAAC,YAAY,GAAG,MAAM,CAAC,UAAU,CAAC,MAAK;gBACzC,IAAI,CAAC,IAAI,EAAE;AACb,YAAA,CAAC,EAAE,IAAI,CAAC,cAAc,CAAC;AACzB,QAAA,CAAC;AAEO,QAAA,IAAA,CAAA,aAAa,GAAG,CAAC,KAAiB,KAAI;AAC5C,YAAA,MAAM,EAAE,aAAa,EAAE,OAAO,EAAE,GAAG,KAAK;YACxC,IAAI,OAAO,YAAY,IAAI,IAAI,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE;gBACrD;YACF;AAEA,YAAA,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC;YACtC,IAAI,CAAC,aAAa,GAAG,MAAM,CAAC,UAAU,CAAC,MAAK;gBAC1C,IAAI,CAAC,KAAK,EAAE;AACd,YAAA,CAAC,EAAE,IAAI,CAAC,eAAe,CAAC;AAC1B,QAAA,CAAC;IACH;AAhNU,IAAA,qBAAqB,CAAC,IAAc,EAAA;;QAE1C,OAAO,IAAI,CAAC,WAAW,EAAE,WAAW,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI;IAClE;AAsBA,IAAA,IAAI,IAAI,GAAA;QACN,MAAM,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC,MAAM,IAAI,EAAE;QACrC,OAAO,SAAS,YAAY,QAAQ,GAAG,SAAS,GAAG,IAAI;IACzD;AAEA,IAAA,IAAI,IAAI,GAAA;QACN,MAAM,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC,MAAM,IAAI,EAAE;QACrC,OAAO,SAAS,YAAY,IAAI,GAAG,SAAS,GAAG,IAAI;IACrD;IAEA,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE;QACzB,IAAI,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,aAAa,CAAC;QACvD,IAAI,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,aAAa,CAAC;IACzD;IAEA,oBAAoB,GAAA;AAClB,QAAA,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI;QACrB,IAAI,EAAE,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,kBAAkB,CAAC;QAC5D,IAAI,EAAE,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,kBAAkB,CAAC;QAC5D,IAAI,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,aAAa,CAAC;QAC1D,IAAI,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,aAAa,CAAC;AAC1D,QAAA,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC;AACtC,QAAA,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,aAAa,CAAC;QACvC,KAAK,CAAC,oBAAoB,EAAE;IAC9B;AAEA,IAAA,MAAM,IAAI,GAAA;AACR,QAAA,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,IAAI;AAC3B,QAAA,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE;YAClB;QACF;QAEA,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC;AACrD,QAAA,IAAI,CAAC,SAAS,GAAG,IAAI;QACrB,IAAI,CAAC,IAAI,EAAE;AAEX,QAAA,IAAI,CAAC,UAAU,GAAG,IAAI;AACtB,QAAA,IAAI,CAAC,WAAW,GAAG,IAAI;AACvB,QAAA,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC;IAC5C;AAEA,IAAA,MAAM,KAAK,GAAA;AACT,QAAA,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,IAAI;AAC3B,QAAA,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE;YAClB;QACF;QAEA,IAAI,CAAC,KAAK,CAAC,EAAE,IAAI,EAAE,cAAc,EAAE,CAAC;AACpC,QAAA,IAAI,CAAC,WAAW,GAAG,KAAK;AACxB,QAAA,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,OAAO,CAAC;IAC7C;IAEA,MAAM,GAAA;AACJ,QAAA,OAAOC,CAAI,CAAA;;;AAGO,oBAAA,EAAA,IAAI,CAAC,aAAa;AACvB,eAAA,EAAA,IAAI,CAAC,YAAY;AACf,iBAAA,EAAA,IAAI,CAAC,cAAc;;;;AAIhB,oBAAA,EAAA,IAAI,CAAC,aAAa;AAClB,oBAAA,EAAA,IAAI,CAAC,YAAY;AACpB,iBAAA,EAAA,IAAI,CAAC,cAAc;;KAEjC;IACH;;AArHO,OAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;AAGxB,UAAA,CAAA;IADCC,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE;AACpC,CAAA,EAAA,OAAA,CAAA,SAAA,EAAA,gBAAA,EAAA,MAAA,CAAA;AAGrB,UAAA,CAAA;IADCA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,mBAAmB,EAAE;AACpC,CAAA,EAAA,OAAA,CAAA,SAAA,EAAA,iBAAA,EAAA,MAAA,CAAA;AAGtB,UAAA,CAAA;IADCA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE;AAC3B,CAAA,EAAA,OAAA,CAAA,SAAA,EAAA,cAAA,EAAA,MAAA,CAAA;AAG3B,UAAA,CAAA;IADCA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,EAAE;AACzB,CAAA,EAAA,OAAA,CAAA,SAAA,EAAA,YAAA,EAAA,MAAA,CAAA;AAGV,UAAA,CAAA;AADhB,IAAAC,CAAqB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE;AACH,CAAA,EAAA,OAAA,CAAA,SAAA,EAAA,QAAA,EAAA,MAAA,CAAA;AAGnB,UAAA,CAAA;AADhB,IAAAA,CAAqB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE;AACH,CAAA,EAAA,OAAA,CAAA,SAAA,EAAA,QAAA,EAAA,MAAA,CAAA;AAnBzB,OAAO,GAAA,UAAA,CAAA;IADnB;AACY,CAAA,EAAA,OAAO,CAyOnB;;;;"}

package/dist/svg.js

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

package/dist/svg.js.map

@@ -1 +1 @@
-{"version":3,"file":"svg.js","sources":["../../src/svg/svg.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\n\nimport { sanitizeSvg } from '@/__internal/utils/sanitize-svg.js';\nimport { fetchSVG } from '../icon/datasource.js';\n\nimport styles from './svg.scss';\nimport IndividualComponent from '@/IndividualComponent.js';\n\n/**\n * @label SVG\n * @tag wc-svg\n * @rawTag svg\n * @summary An SVG component with lazy loading and optional preview support.\n * @overview Renders an inline SVG fetched from a URL, with lazy loading via IntersectionObserver and an optional click-to-preview lightbox.\n *\n * @cssprop --svg-color - Controls the fill color of the SVG.\n * @cssprop [--svg-size=1rem] - Controls the size of the SVG. Defaults to \"1rem\"\n *\n * @example\n * ```html\n * <wc-svg src=\"/icons/my-icon.svg\" image-title=\"My icon\"></wc-svg>\n * ```\n */\n@IndividualComponent\nexport class Svg extends LitElement {\n  static styles = [styles];\n\n  /** URL of the SVG asset to fetch and render inline. */\n  @property({ type: String, reflect: true }) src = '';\n\n  /** Accessible title / alt text for the SVG. */\n  @property({ attribute: 'image-title' }) imageTitle = '';\n\n  /** Enable click-to-preview lightbox. */\n  @property({ type: Boolean, reflect: true }) preview = false;\n\n  /** True once the element has entered the viewport and the SVG fetch has been initiated. */\n  @state() private _loaded = false;\n\n  /** True when the lightbox preview overlay is visible. */\n  @state() private _previewOpen = false;\n\n  /** Sanitized inline SVG markup ready for rendering. */\n  @state() private _svgContent: string = '';\n\n  // ── Private fields ────────────────────────────────────────────────────────\n\n  /** Monotonically incrementing token used to discard stale fetch results. */\n  private _fetchId = 0;\n\n  /** IntersectionObserver that triggers the SVG fetch when the element enters the viewport. */\n  private _intersectionObserver: IntersectionObserver | null = null;\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this._intersectionObserver?.disconnect();\n  }\n\n  firstUpdated() {\n    this._setupIntersectionObserver();\n  }\n\n  updated(changedProperties: Map<string, unknown>) {\n    if (changedProperties.has('src')) {\n      // Reset lazy-load state so the new src is fetched when visible\n      this._loaded = false;\n      this._svgContent = '';\n      this._setupIntersectionObserver();\n    }\n  }\n\n  private _setupIntersectionObserver() {\n    this._intersectionObserver?.disconnect();\n\n    const wrapper = this.shadowRoot?.querySelector('.svg-wrapper');\n    if (!wrapper) return;\n\n    this._intersectionObserver = new IntersectionObserver(\n      entries => {\n        if (entries[0].isIntersecting) {\n          this._loaded = true;\n          this._intersectionObserver?.disconnect();\n          this._fetchSvg();\n        }\n      },\n      { rootMargin: '200px' },\n    );\n\n    this._intersectionObserver.observe(wrapper);\n  }\n\n  private async _fetchSvg() {\n    if (!this.src) return;\n\n    this._fetchId += 1;\n    const currentId = this._fetchId;\n\n    try {\n      const raw = await fetchSVG(this.src);\n      if (currentId !== this._fetchId) return;\n\n      this._svgContent = raw ? sanitizeSvg(raw) : '';\n    } catch {\n      if (currentId === this._fetchId) {\n        this._svgContent = '';\n      }\n    }\n  }\n\n  private _handleClick() {\n    if (this.preview) {\n      this._previewOpen = true;\n      // Move focus into the dialog after render\n      this.updateComplete.then(() => {\n        const closeBtn =\n          this.shadowRoot?.querySelector<HTMLElement>('.preview-close');\n        closeBtn?.focus();\n      });\n    }\n  }\n\n  private _closePreview(e: Event) {\n    e.stopPropagation();\n    const wasOpen = this._previewOpen;\n    this._previewOpen = false;\n    if (wasOpen) {\n      // Return focus to the trigger\n      const trigger =\n        this.shadowRoot?.querySelector<HTMLElement>('.svg-content');\n      trigger?.focus();\n    }\n  }\n\n  render() {\n    return html`\n      <div class=\"svg-wrapper\">\n        ${this._loaded && this._svgContent\n          ? html`<div\n              class=\"svg-content ${this.preview ? 'clickable' : ''}\"\n              role=${this.imageTitle ? 'img' : 'presentation'}\n              aria-label=${this.imageTitle || ''}\n              @click=${this._handleClick}\n            >\n              ${unsafeSVG(this._svgContent)}\n            </div>`\n          : html`<span class=\"placeholder\" aria-hidden=\"true\"></span>`}\n      </div>\n\n      <div\n        class=\"preview-overlay ${this._previewOpen ? 'open' : ''}\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-label=${this.imageTitle\n          ? `Preview: ${this.imageTitle}`\n          : 'SVG preview'}\n        @click=${this._closePreview}\n        @keydown=${(e: KeyboardEvent) =>\n          e.key === 'Escape' && this._closePreview(e)}\n      >\n        <button\n          class=\"preview-close\"\n          aria-label=\"Close preview\"\n          @click=${this._closePreview}\n        >\n          &#x2715;\n        </button>\n        <div\n          class=\"preview-content\"\n          @click=${(e: Event) => e.stopPropagation()}\n        >\n          ${unsafeSVG(this._svgContent)}\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","html","unsafeSVG","styles","property","state"],"mappings":"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"}
+{"version":3,"file":"svg.js","sources":["../../src/svg/svg.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\n\nimport { sanitizeSvg } from '@/__internal/utils/sanitize-svg.js';\nimport { fetchSVG } from '../icon/datasource.js';\n\nimport styles from './svg.scss';\nimport IndividualComponent from '@/IndividualComponent.js';\n\n/**\n * @label SVG\n * @tag wc-svg\n * @rawTag svg\n * @summary An SVG component with lazy loading and optional preview support.\n * @overview Renders an inline SVG fetched from a URL, with lazy loading via IntersectionObserver and an optional click-to-preview lightbox.\n *\n * @cssprop --svg-color - Controls the fill color of the SVG.\n * @cssprop [--svg-size=1rem] - Controls the size of the SVG. Defaults to \"1rem\"\n *\n * @example\n * ```html\n * <wc-svg src=\"/icons/my-icon.svg\" image-title=\"My icon\"></wc-svg>\n * ```\n */\n@IndividualComponent\nexport class Svg extends LitElement {\n  static styles = [styles];\n\n  /** URL of the SVG asset to fetch and render inline. */\n  @property({ type: String, reflect: true }) src = '';\n\n  /** Accessible title / alt text for the SVG. */\n  @property({ attribute: 'image-title' }) imageTitle = '';\n\n  /** Enable click-to-preview lightbox. */\n  @property({ type: Boolean, reflect: true }) preview = false;\n\n  /** True once the element has entered the viewport and the SVG fetch has been initiated. */\n  @state() private _loaded = false;\n\n  /** True when the lightbox preview overlay is visible. */\n  @state() private _previewOpen = false;\n\n  /** Sanitized inline SVG markup ready for rendering. */\n  @state() private _svgContent: string = '';\n\n  // ── Private fields ────────────────────────────────────────────────────────\n\n  /** Monotonically incrementing token used to discard stale fetch results. */\n  private _fetchId = 0;\n\n  /** IntersectionObserver that triggers the SVG fetch when the element enters the viewport. */\n  private _intersectionObserver: IntersectionObserver | null = null;\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this._intersectionObserver?.disconnect();\n  }\n\n  firstUpdated() {\n    this._setupIntersectionObserver();\n  }\n\n  updated(changedProperties: Map<string, unknown>) {\n    if (changedProperties.has('src')) {\n      // Reset lazy-load state so the new src is fetched when visible\n      this._loaded = false;\n      this._svgContent = '';\n      this._setupIntersectionObserver();\n    }\n  }\n\n  private _setupIntersectionObserver() {\n    this._intersectionObserver?.disconnect();\n\n    const wrapper = this.shadowRoot?.querySelector('.svg-wrapper');\n    if (!wrapper) return;\n\n    this._intersectionObserver = new IntersectionObserver(\n      entries => {\n        if (entries[0].isIntersecting) {\n          this._loaded = true;\n          this._intersectionObserver?.disconnect();\n          this._fetchSvg();\n        }\n      },\n      { rootMargin: '200px' },\n    );\n\n    this._intersectionObserver.observe(wrapper);\n  }\n\n  private async _fetchSvg() {\n    if (!this.src) return;\n\n    this._fetchId += 1;\n    const currentId = this._fetchId;\n\n    try {\n      const raw = await fetchSVG(this.src);\n      if (currentId !== this._fetchId) return;\n\n      this._svgContent = raw ? sanitizeSvg(raw) : '';\n    } catch {\n      if (currentId === this._fetchId) {\n        this._svgContent = '';\n      }\n    }\n  }\n\n  private _handleClick() {\n    if (this.preview) {\n      this._previewOpen = true;\n      // Move focus into the dialog after render\n      this.updateComplete.then(() => {\n        const closeBtn =\n          this.shadowRoot?.querySelector<HTMLElement>('.preview-close');\n        closeBtn?.focus();\n      });\n    }\n  }\n\n  private _closePreview(e: Event) {\n    e.stopPropagation();\n    const wasOpen = this._previewOpen;\n    this._previewOpen = false;\n    if (wasOpen) {\n      // Return focus to the trigger\n      const trigger =\n        this.shadowRoot?.querySelector<HTMLElement>('.svg-content');\n      trigger?.focus();\n    }\n  }\n\n  render() {\n    return html`\n      <div class=\"svg-wrapper\">\n        ${this._loaded && this._svgContent\n          ? html`<div\n              class=\"svg-content ${this.preview ? 'clickable' : ''}\"\n              role=${this.imageTitle ? 'img' : 'presentation'}\n              aria-label=${this.imageTitle || ''}\n              @click=${this._handleClick}\n            >\n              ${unsafeSVG(this._svgContent)}\n            </div>`\n          : html`<span class=\"placeholder\" aria-hidden=\"true\"></span>`}\n      </div>\n\n      <div\n        class=\"preview-overlay ${this._previewOpen ? 'open' : ''}\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-label=${this.imageTitle\n          ? `Preview: ${this.imageTitle}`\n          : 'SVG preview'}\n        @click=${this._closePreview}\n        @keydown=${(e: KeyboardEvent) =>\n          e.key === 'Escape' && this._closePreview(e)}\n      >\n        <button\n          class=\"preview-close\"\n          aria-label=\"Close preview\"\n          @click=${this._closePreview}\n        >\n          &#x2715;\n        </button>\n        <div\n          class=\"preview-content\"\n          @click=${(e: Event) => e.stopPropagation()}\n        >\n          ${unsafeSVG(this._svgContent)}\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","html","unsafeSVG","styles","property","state"],"mappings":"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"}

package/dist/tab-group.js

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

package/dist/tab-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab-group.js","sources":["../../src/tabs/tab-group.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport styles from './tab-group.scss';\nimport { Tabs } from './tabs.js';\nimport { TabPanel } from './tab-panel.js';\nimport IndividualComponent from '@/IndividualComponent.js';\n\n/**\n * @label Tab Group\n * @tag wc-tab-group\n * @rawTag tab-group\n *\n * @summary The tab group component is used to display multiple panels of content in a container.\n * @overview\n * <p>The tab group component allows users to switch between different views or content sections.</p>\n *\n * @example\n * ```html\n * <wc-tab-group>\n * \n *   <wc-tabs>\n *    <wc-tab selected >Tab 1</wc-tab>\n *    <wc-tab>Tab 2</wc-tab>\n *   </wc-tabs>\n * \n *   <wc-tab-panel>Panel 1</wc-tab-panel>\n *   <wc-tab-panel>Panel 2</wc-tab-panel>\n * </wc-tab-group>\n * ```\n * @tags navigation\n */\n@IndividualComponent\nexport class TabGroup extends LitElement {\n  static styles = [styles];\n\n  static Tabs = Tabs;\n\n  static TabPanel = TabPanel;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('tab-click', this.onTabClick);\n  }\n\n  disconnectedCallback() {\n    this.removeEventListener('tab-click', this.onTabClick);\n    super.disconnectedCallback();\n  }\n\n  firstUpdated() {\n    this.initializeTabs();\n  }\n\n  private onTabClick = (event: Event) => {\n    const custom = event as CustomEvent;\n    event.stopPropagation();\n    const targetValue = custom.detail?.target || custom.detail?.value;\n    if (targetValue) {\n      this.selectTab(targetValue);\n    } else if (typeof custom.detail?.index === 'number') {\n      this.selectTabByIndex(custom.detail.index);\n    }\n  };\n\n  selectTab(target: string) {\n    const tabs = this.getTabs();\n    for (const tab of tabs) {\n      (tab as any).active = false;\n      (tab as any).selected = false;\n      tab.classList.remove('previous-tab', 'next-tab');\n    }\n\n    let selectedIndex = -1;\n    tabs.forEach((tab: HTMLElement, index: number) => {\n      const t = tab.getAttribute('target') || tab.getAttribute('value');\n      if (t === target) {\n        selectedIndex = index;\n      }\n    });\n\n    if (selectedIndex >= 0) {\n      const selectedTab = tabs[selectedIndex];\n      (selectedTab as any).active = true;\n      (selectedTab as any).selected = true;\n      if (tabs[selectedIndex - 1]) {\n        tabs[selectedIndex - 1].classList.add('previous-tab');\n      }\n      if (tabs[selectedIndex + 1]) {\n        tabs[selectedIndex + 1].classList.add('next-tab');\n      }\n    }\n\n    const panels = this.getTabPanels();\n    for (const panel of panels) {\n      const panelValue = panel.getAttribute('value');\n      (panel as any).active = panelValue === target;\n    }\n  }\n\n  selectTabByIndex(index: number) {\n    const tabs = this.getTabs();\n    for (const tab of tabs) {\n      (tab as any).active = false;\n      (tab as any).selected = false;\n      tab.classList.remove('previous-tab', 'next-tab');\n    }\n\n    if (index >= 0 && index < tabs.length) {\n      (tabs[index] as any).active = true;\n      (tabs[index] as any).selected = true;\n      if (tabs[index - 1]) tabs[index - 1].classList.add('previous-tab');\n      if (tabs[index + 1]) tabs[index + 1].classList.add('next-tab');\n    }\n\n    const panels = this.getTabPanels();\n    for (let i = 0; i < panels.length; i += 1) {\n      const panel = panels[i];\n      (panel as any).active = i === index;\n    }\n  }\n\n  private getTabs(): HTMLElement[] {\n    return Array.from(this.querySelectorAll(':scope > wc-tabs wc-tab'));\n  }\n\n  private getTabPanels(): HTMLElement[] {\n    return Array.from(this.querySelectorAll(':scope > wc-tab-panel'));\n  }\n\n  private getTabList(): HTMLElement | null {\n    return this.querySelector(':scope > wc-tabs');\n  }\n\n  private tabsHaveTarget(): boolean {\n    return !!this.querySelector(':scope > wc-tabs wc-tab[target]');\n  }\n\n  private initializeTabs() {\n    const tabs = Array.from(this.getTabs());\n    if (!this.tabsHaveTarget()) {\n      // No target/value attributes — use index-based activation\n      const selectedIndex = tabs.findIndex(\n        tab =>\n          tab.hasAttribute('active') ||\n          (tab as any).active ||\n          tab.hasAttribute('selected') ||\n          (tab as any).selected,\n      );\n      this.selectTabByIndex(selectedIndex >= 0 ? selectedIndex : 0);\n    } else {\n      const selectedTab = tabs.find(\n        tab =>\n          tab.hasAttribute('active') ||\n          (tab as any).active ||\n          tab.hasAttribute('selected') ||\n          (tab as any).selected,\n      );\n      if (selectedTab) {\n        const selectedTarget = selectedTab.getAttribute('target');\n        if (selectedTarget) this.selectTab(selectedTarget);\n      } else if (tabs.length > 0) {\n        const firstTarget = tabs[0].getAttribute('target');\n        if (firstTarget) this.selectTab(firstTarget);\n      }\n    }\n  }\n\n  render() {\n    return html`<slot></slot>`;\n  }\n}\n"],"names":["LitElement","html","styles"],"mappings":"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"}
+{"version":3,"file":"tab-group.js","sources":["../../src/tabs/tab-group.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport styles from './tab-group.scss';\nimport { Tabs } from './tabs.js';\nimport { TabPanel } from './tab-panel.js';\nimport IndividualComponent from '@/IndividualComponent.js';\n\n/**\n * @label Tab Group\n * @tag wc-tab-group\n * @rawTag tab-group\n *\n * @summary The tab group component is used to display multiple panels of content in a container.\n * @overview\n * <p>The tab group component allows users to switch between different views or content sections.</p>\n *\n * @example\n * ```html\n * <wc-tab-group>\n * \n *   <wc-tabs>\n *    <wc-tab selected >Tab 1</wc-tab>\n *    <wc-tab>Tab 2</wc-tab>\n *   </wc-tabs>\n * \n *   <wc-tab-panel>Panel 1</wc-tab-panel>\n *   <wc-tab-panel>Panel 2</wc-tab-panel>\n * </wc-tab-group>\n * ```\n * @tags navigation\n */\n@IndividualComponent\nexport class TabGroup extends LitElement {\n  static styles = [styles];\n\n  static Tabs = Tabs;\n\n  static TabPanel = TabPanel;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('tab-click', this.onTabClick);\n  }\n\n  disconnectedCallback() {\n    this.removeEventListener('tab-click', this.onTabClick);\n    super.disconnectedCallback();\n  }\n\n  firstUpdated() {\n    this.initializeTabs();\n  }\n\n  private onTabClick = (event: Event) => {\n    const custom = event as CustomEvent;\n    event.stopPropagation();\n    const targetValue = custom.detail?.target || custom.detail?.value;\n    if (targetValue) {\n      this.selectTab(targetValue);\n    } else if (typeof custom.detail?.index === 'number') {\n      this.selectTabByIndex(custom.detail.index);\n    }\n  };\n\n  selectTab(target: string) {\n    const tabs = this.getTabs();\n    for (const tab of tabs) {\n      (tab as any).active = false;\n      (tab as any).selected = false;\n      tab.classList.remove('previous-tab', 'next-tab');\n    }\n\n    let selectedIndex = -1;\n    tabs.forEach((tab: HTMLElement, index: number) => {\n      const t = tab.getAttribute('target') || tab.getAttribute('value');\n      if (t === target) {\n        selectedIndex = index;\n      }\n    });\n\n    if (selectedIndex >= 0) {\n      const selectedTab = tabs[selectedIndex];\n      (selectedTab as any).active = true;\n      (selectedTab as any).selected = true;\n      if (tabs[selectedIndex - 1]) {\n        tabs[selectedIndex - 1].classList.add('previous-tab');\n      }\n      if (tabs[selectedIndex + 1]) {\n        tabs[selectedIndex + 1].classList.add('next-tab');\n      }\n    }\n\n    const panels = this.getTabPanels();\n    for (const panel of panels) {\n      const panelValue = panel.getAttribute('value');\n      (panel as any).active = panelValue === target;\n    }\n  }\n\n  selectTabByIndex(index: number) {\n    const tabs = this.getTabs();\n    for (const tab of tabs) {\n      (tab as any).active = false;\n      (tab as any).selected = false;\n      tab.classList.remove('previous-tab', 'next-tab');\n    }\n\n    if (index >= 0 && index < tabs.length) {\n      (tabs[index] as any).active = true;\n      (tabs[index] as any).selected = true;\n      if (tabs[index - 1]) tabs[index - 1].classList.add('previous-tab');\n      if (tabs[index + 1]) tabs[index + 1].classList.add('next-tab');\n    }\n\n    const panels = this.getTabPanels();\n    for (let i = 0; i < panels.length; i += 1) {\n      const panel = panels[i];\n      (panel as any).active = i === index;\n    }\n  }\n\n  private getTabs(): HTMLElement[] {\n    return Array.from(this.querySelectorAll(':scope > wc-tabs wc-tab'));\n  }\n\n  private getTabPanels(): HTMLElement[] {\n    return Array.from(this.querySelectorAll(':scope > wc-tab-panel'));\n  }\n\n  private getTabList(): HTMLElement | null {\n    return this.querySelector(':scope > wc-tabs');\n  }\n\n  private tabsHaveTarget(): boolean {\n    return !!this.querySelector(':scope > wc-tabs wc-tab[target]');\n  }\n\n  private initializeTabs() {\n    const tabs = Array.from(this.getTabs());\n    if (!this.tabsHaveTarget()) {\n      // No target/value attributes — use index-based activation\n      const selectedIndex = tabs.findIndex(\n        tab =>\n          tab.hasAttribute('active') ||\n          (tab as any).active ||\n          tab.hasAttribute('selected') ||\n          (tab as any).selected,\n      );\n      this.selectTabByIndex(selectedIndex >= 0 ? selectedIndex : 0);\n    } else {\n      const selectedTab = tabs.find(\n        tab =>\n          tab.hasAttribute('active') ||\n          (tab as any).active ||\n          tab.hasAttribute('selected') ||\n          (tab as any).selected,\n      );\n      if (selectedTab) {\n        const selectedTarget = selectedTab.getAttribute('target');\n        if (selectedTarget) this.selectTab(selectedTarget);\n      } else if (tabs.length > 0) {\n        const firstTarget = tabs[0].getAttribute('target');\n        if (firstTarget) this.selectTab(firstTarget);\n      }\n    }\n  }\n\n  render() {\n    return html`<slot></slot>`;\n  }\n}\n"],"names":["LitElement","html","styles"],"mappings":"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"}

package/dist/tab-panel.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/tab-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab-panel.js","sources":["../../src/tabs/tab-panel.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport styles from './tab-panel.scss';\nimport IndividualComponent from '@/IndividualComponent.js';\n\n/**\n * @label Tab Panel\n * @tag wc-tab-panel\n * @rawTag tab-panel\n *\n * @summary Content panel for tabs.\n * @overview\n * <p>TabPanel contains the content associated with a tab.</p>\n *\n * @example\n * ```html\n * <wc-tab-panel>Content for this tab</wc-tab-panel>\n * ```\n * @tags navigation\n */\n@IndividualComponent\nexport class TabPanel extends LitElement {\n  static styles = [styles];\n\n  @property({ reflect: true }) value?: string;\n\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  render() {\n    return html`<slot></slot>`;\n  }\n}\n"],"names":["LitElement","html","styles","property"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAKA;;;;;;;;;;;;;;AAcG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQA,GAAU,CAAA;AAAjC,IAAA,WAAA,GAAA;;QAKuC,IAAA,CAAA,MAAM,GAAG,KAAK;IAK5D;IAHE,MAAM,GAAA;QACJ,OAAOC,CAAI,CAAA,CAAA,aAAA,CAAe;IAC5B;;AARO,QAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;AAEK,UAAA,CAAA;AAA5B,IAAAC,CAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE;AAAiB,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,OAAA,EAAA,MAAA,CAAA;AAEA,UAAA,CAAA;IAA3CA,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;AAAiB,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,QAAA,EAAA,MAAA,CAAA;AALhD,QAAQ,GAAA,UAAA,CAAA;IADpB;AACY,CAAA,EAAA,QAAQ,CAUpB;;;;"}
+{"version":3,"file":"tab-panel.js","sources":["../../src/tabs/tab-panel.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport styles from './tab-panel.scss';\nimport IndividualComponent from '@/IndividualComponent.js';\n\n/**\n * @label Tab Panel\n * @tag wc-tab-panel\n * @rawTag tab-panel\n *\n * @summary Content panel for tabs.\n * @overview\n * <p>TabPanel contains the content associated with a tab.</p>\n *\n * @example\n * ```html\n * <wc-tab-panel>Content for this tab</wc-tab-panel>\n * ```\n * @tags navigation\n */\n@IndividualComponent\nexport class TabPanel extends LitElement {\n  static styles = [styles];\n\n  @property({ reflect: true }) value?: string;\n\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  render() {\n    return html`<slot></slot>`;\n  }\n}\n"],"names":["LitElement","html","styles","property"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAKA;;;;;;;;;;;;;;AAcG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQA,GAAU,CAAA;AAAjC,IAAA,WAAA,GAAA;;QAKuC,IAAA,CAAA,MAAM,GAAG,KAAK;IAK5D;IAHE,MAAM,GAAA;QACJ,OAAOC,CAAI,CAAA,CAAA,aAAA,CAAe;IAC5B;;AARO,QAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;AAEK,UAAA,CAAA;AAA5B,IAAAC,CAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE;AAAiB,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,OAAA,EAAA,MAAA,CAAA;AAEA,UAAA,CAAA;IAA3CA,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;AAAiB,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,QAAA,EAAA,MAAA,CAAA;AALhD,QAAQ,GAAA,UAAA,CAAA;IADpB;AACY,CAAA,EAAA,QAAQ,CAUpB;;;;"}

package/dist/tab.js

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

package/dist/tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab.js","sources":["../../src/tabs/tab.ts"],"sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\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 { spread } from '@/__internal/directive/spread.js';\n\nimport styles from './tab.scss';\nimport type { Tabs } from './tabs.js';\nimport IndividualComponent from '@/IndividualComponent.js';\n\n/**\n * @label Tab\n * @tag wc-tab\n * @rawTag tab\n *\n * @summary A tab component for use within tabs.\n * @overview\n * <p>Tab represents an individual tab in a tabs component.</p>\n *\n * @example\n * ```html\n * <wc-tab>Tab Label</wc-tab>\n * ```\n * @tags navigation\n */\n@IndividualComponent\nexport class Tab extends LitElement {\n  #id = crypto.randomUUID();\n\n  static styles = [styles];\n\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  @property({ type: String }) disabledReason = '';\n\n  @property({ type: String }) value?: string;\n\n  @property({ reflect: true })\n  configAria?: { [key: string]: any };\n\n  /**\n   * Sets or retrieves the window or frame at which to target content.\n   */\n  @property() target: string = '_self';\n\n  @property({ type: String, reflect: true }) href?: string;\n\n  /**\n   * Sets the delay for throttle in milliseconds. When null (default), no throttle is applied.\n   */\n  @property() throttleDelay?: number;\n\n  @state() hasFocus = false;\n\n  @state() slotHasContent = false;\n\n  @state() slotHasIcon = false;\n\n  @state() slotHasBadge = false;\n\n  private _tabindex = 0;\n\n  @query('.tab-element') readonly tabElement!: HTMLElement | null;\n\n  override focus() {\n    this.tabElement?.focus();\n  }\n\n  override blur() {\n    this.tabElement?.blur();\n  }\n\n  constructor() {\n    super();\n    this._tabindex = 0;\n    this.addEventListener('click', this.__dispatchClickWithThrottle);\n  }\n\n  override firstUpdated() {\n    if (typeof this.throttleDelay === 'number') {\n      this.__dispatchClickWithThrottle = throttle(\n        this.__dispatchClick,\n        this.throttleDelay,\n      );\n    }\n    observerSlotChangesWithCallback(\n      this.renderRoot.querySelector('slot:not([name])'),\n      hasContent => {\n        this.slotHasContent = hasContent;\n        this.requestUpdate();\n      },\n    );\n\n    observerSlotChangesWithCallback(\n      this.renderRoot.querySelector('slot[name=\"icon\"]'),\n      hasContent => {\n        this.slotHasIcon = hasContent;\n        this.requestUpdate();\n      },\n    );\n\n    observerSlotChangesWithCallback(\n      this.renderRoot.querySelector('slot[name=\"badge\"]'),\n      hasContent => {\n        this.slotHasBadge = 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 the button is soft-disabled or a disabled link, we need to explicitly\n    // prevent the click from propagating to other event listeners as well as\n    // prevent the default action.\n    if (this.disabled && this.href) {\n      event.stopImmediatePropagation();\n      event.preventDefault();\n      return;\n    }\n\n    if (!isActivationClick(event) || !this.tabElement) {\n      return;\n    }\n\n    this.focus();\n    dispatchActivationClick(this.tabElement);\n  };\n\n  __getParentTabsVariant(): Tabs['variant'] {\n    return (this.closest('wc-tabs') as Tabs | null)?.variant ?? 'primary';\n  }\n\n  // private handleKeyDown(evt: KeyboardEvent) {\n  //   if (this.disabled || this.showLoader) return;\n  //   if (evt.key === 'Enter' || evt.key === ' ') {\n  //     evt.preventDefault();\n  //     this.isActive = true;\n  //     this.dispatchTabClick();\n  //   }\n  // }\n\n  render() {\n    const variant = this.__getParentTabsVariant();\n\n    const cssClasses = {\n      tab: true,\n      'tab-element': true,\n      disabled: this.disabled,\n      active: this.active,\n      [`variant-${variant}`]: true,\n      'has-content': this.slotHasContent,\n      'has-icon': this.slotHasIcon,\n      'has-badge': this.slotHasBadge,\n    };\n\n    if (!isLink(this)) {\n      return html`<button\n        id=\"button\"\n        class=${classMap(cssClasses)}\n        tabindex=\"0\"\n        ?aria-describedby=${this.__getDisabledReasonID()}\n        aria-disabled=${`${this.disabled}`}\n        ?disabled=${this.disabled}\n        ${spread(this.configAria)}\n      >\n        ${this.renderTabContent(variant)}\n      </button>`;\n    }\n\n    return html`<a\n      class=${classMap(cssClasses)}\n      id=\"button\"\n      tabindex=\"0\"\n      href=${this.href}\n      target=${this.target}\n      role=\"button\"\n      ?aria-describedby=${this.__getDisabledReasonID()}\n      aria-disabled=${`${this.disabled}`}\n      ${spread(this.configAria)}\n    >\n      ${this.renderTabContent(variant)}\n    </a>`;\n  }\n\n  renderTabContent(variant: Tabs['variant']) {\n    switch (variant) {\n      case 'secondary':\n        return this.renderSecondaryTabContent();\n      case 'contained':\n        return this.renderContainedTabContent();\n      case 'filled':\n        return this.renderFilledTabContent();\n      case 'primary':\n      default:\n        return this.renderPrimaryTabContent();\n    }\n  }\n\n  renderPrimaryTabContent() {\n    return html`\n      <wc-focus-ring class=\"focus-ring\" for=\"button\"></wc-focus-ring>\n      <wc-elevation class=\"elevation\"></wc-elevation>\n      <div class=\"background\"></div>\n      <div class=\"outline\"></div>\n      <wc-ripple class=\"ripple\"></wc-ripple>\n\n      <div class=\"tab-content\">\n        <div class=\"icon-section\">\n          <slot name=\"badge\"></slot>\n          <slot name=\"icon\"></slot>\n        </div>\n        <div class=\"slot-container\">\n          <slot></slot>\n        </div>\n\n        <div class=\"indicator\"></div>\n      </div>\n\n      ${this.__renderDisabledReason()}\n    `;\n  }\n\n  renderSecondaryTabContent() {\n    return html`\n      <wc-focus-ring class=\"focus-ring\" for=\"button\"></wc-focus-ring>\n      <wc-elevation class=\"elevation\"></wc-elevation>\n      <div class=\"background\"></div>\n      <div class=\"outline\"></div>\n      <wc-ripple class=\"ripple\"></wc-ripple>\n\n      <div class=\"tab-content\">\n        <slot name=\"icon\"></slot>\n\n        <div class=\"slot-container\">\n          <slot></slot>\n        </div>\n\n        <slot name=\"badge\"></slot>\n      </div>\n\n      <div class=\"indicator\"></div>\n\n      ${this.__renderDisabledReason()}\n    `;\n  }\n\n  renderContainedTabContent() {\n    return this.renderSegmentedTabContent();\n  }\n\n  renderFilledTabContent() {\n    return this.renderSegmentedTabContent();\n  }\n\n  renderSegmentedTabContent() {\n    return html`\n      <wc-focus-ring class=\"focus-ring\" for=\"button\"></wc-focus-ring>\n      <wc-elevation class=\"elevation\"></wc-elevation>\n      <div class=\"background\"></div>\n      <div class=\"outline\"></div>\n      <wc-ripple class=\"ripple\"></wc-ripple>\n\n      <div class=\"tab-content\">\n        <slot name=\"icon\"></slot>\n\n        <div class=\"slot-container\">\n          <slot></slot>\n        </div>\n\n        <slot name=\"badge\"></slot>\n      </div>\n\n      ${this.__renderDisabledReason()}\n    `;\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"],"names":["LitElement","html","classMap","nothing","styles","property","state","query"],"mappings":"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"}
+{"version":3,"file":"tab.js","sources":["../../src/tabs/tab.ts"],"sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\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 { spread } from '@/__internal/directive/spread.js';\n\nimport styles from './tab.scss';\nimport type { Tabs } from './tabs.js';\nimport IndividualComponent from '@/IndividualComponent.js';\n\n/**\n * @label Tab\n * @tag wc-tab\n * @rawTag tab\n *\n * @summary A tab component for use within tabs.\n * @overview\n * <p>Tab represents an individual tab in a tabs component.</p>\n *\n * @example\n * ```html\n * <wc-tab>Tab Label</wc-tab>\n * ```\n * @tags navigation\n */\n@IndividualComponent\nexport class Tab extends LitElement {\n  #id = crypto.randomUUID();\n\n  static styles = [styles];\n\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  @property({ type: String }) disabledReason = '';\n\n  @property({ type: String }) value?: string;\n\n  @property({ reflect: true })\n  configAria?: { [key: string]: any };\n\n  /**\n   * Sets or retrieves the window or frame at which to target content.\n   */\n  @property() target: string = '_self';\n\n  @property({ type: String, reflect: true }) href?: string;\n\n  /**\n   * Sets the delay for throttle in milliseconds. When null (default), no throttle is applied.\n   */\n  @property() throttleDelay?: number;\n\n  @state() hasFocus = false;\n\n  @state() slotHasContent = false;\n\n  @state() slotHasIcon = false;\n\n  @state() slotHasBadge = false;\n\n  private _tabindex = 0;\n\n  @query('.tab-element') readonly tabElement!: HTMLElement | null;\n\n  override focus() {\n    this.tabElement?.focus();\n  }\n\n  override blur() {\n    this.tabElement?.blur();\n  }\n\n  constructor() {\n    super();\n    this._tabindex = 0;\n    this.addEventListener('click', this.__dispatchClickWithThrottle);\n  }\n\n  override firstUpdated() {\n    if (typeof this.throttleDelay === 'number') {\n      this.__dispatchClickWithThrottle = throttle(\n        this.__dispatchClick,\n        this.throttleDelay,\n      );\n    }\n    observerSlotChangesWithCallback(\n      this.renderRoot.querySelector('slot:not([name])'),\n      hasContent => {\n        this.slotHasContent = hasContent;\n        this.requestUpdate();\n      },\n    );\n\n    observerSlotChangesWithCallback(\n      this.renderRoot.querySelector('slot[name=\"icon\"]'),\n      hasContent => {\n        this.slotHasIcon = hasContent;\n        this.requestUpdate();\n      },\n    );\n\n    observerSlotChangesWithCallback(\n      this.renderRoot.querySelector('slot[name=\"badge\"]'),\n      hasContent => {\n        this.slotHasBadge = 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 the button is soft-disabled or a disabled link, we need to explicitly\n    // prevent the click from propagating to other event listeners as well as\n    // prevent the default action.\n    if (this.disabled && this.href) {\n      event.stopImmediatePropagation();\n      event.preventDefault();\n      return;\n    }\n\n    if (!isActivationClick(event) || !this.tabElement) {\n      return;\n    }\n\n    this.focus();\n    dispatchActivationClick(this.tabElement);\n  };\n\n  __getParentTabsVariant(): Tabs['variant'] {\n    return (this.closest('wc-tabs') as Tabs | null)?.variant ?? 'primary';\n  }\n\n  // private handleKeyDown(evt: KeyboardEvent) {\n  //   if (this.disabled || this.showLoader) return;\n  //   if (evt.key === 'Enter' || evt.key === ' ') {\n  //     evt.preventDefault();\n  //     this.isActive = true;\n  //     this.dispatchTabClick();\n  //   }\n  // }\n\n  render() {\n    const variant = this.__getParentTabsVariant();\n\n    const cssClasses = {\n      tab: true,\n      'tab-element': true,\n      disabled: this.disabled,\n      active: this.active,\n      [`variant-${variant}`]: true,\n      'has-content': this.slotHasContent,\n      'has-icon': this.slotHasIcon,\n      'has-badge': this.slotHasBadge,\n    };\n\n    if (!isLink(this)) {\n      return html`<button\n        id=\"button\"\n        class=${classMap(cssClasses)}\n        tabindex=\"0\"\n        ?aria-describedby=${this.__getDisabledReasonID()}\n        aria-disabled=${`${this.disabled}`}\n        ?disabled=${this.disabled}\n        ${spread(this.configAria)}\n      >\n        ${this.renderTabContent(variant)}\n      </button>`;\n    }\n\n    return html`<a\n      class=${classMap(cssClasses)}\n      id=\"button\"\n      tabindex=\"0\"\n      href=${this.href}\n      target=${this.target}\n      role=\"button\"\n      ?aria-describedby=${this.__getDisabledReasonID()}\n      aria-disabled=${`${this.disabled}`}\n      ${spread(this.configAria)}\n    >\n      ${this.renderTabContent(variant)}\n    </a>`;\n  }\n\n  renderTabContent(variant: Tabs['variant']) {\n    switch (variant) {\n      case 'secondary':\n        return this.renderSecondaryTabContent();\n      case 'contained':\n        return this.renderContainedTabContent();\n      case 'filled':\n        return this.renderFilledTabContent();\n      case 'primary':\n      default:\n        return this.renderPrimaryTabContent();\n    }\n  }\n\n  renderPrimaryTabContent() {\n    return html`\n      <wc-focus-ring class=\"focus-ring\" for=\"button\"></wc-focus-ring>\n      <wc-elevation class=\"elevation\"></wc-elevation>\n      <div class=\"background\"></div>\n      <div class=\"outline\"></div>\n      <wc-ripple class=\"ripple\"></wc-ripple>\n\n      <div class=\"tab-content\">\n        <div class=\"icon-section\">\n          <slot name=\"badge\"></slot>\n          <slot name=\"icon\"></slot>\n        </div>\n        <div class=\"slot-container\">\n          <slot></slot>\n        </div>\n\n        <div class=\"indicator\"></div>\n      </div>\n\n      ${this.__renderDisabledReason()}\n    `;\n  }\n\n  renderSecondaryTabContent() {\n    return html`\n      <wc-focus-ring class=\"focus-ring\" for=\"button\"></wc-focus-ring>\n      <wc-elevation class=\"elevation\"></wc-elevation>\n      <div class=\"background\"></div>\n      <div class=\"outline\"></div>\n      <wc-ripple class=\"ripple\"></wc-ripple>\n\n      <div class=\"tab-content\">\n        <slot name=\"icon\"></slot>\n\n        <div class=\"slot-container\">\n          <slot></slot>\n        </div>\n\n        <slot name=\"badge\"></slot>\n      </div>\n\n      <div class=\"indicator\"></div>\n\n      ${this.__renderDisabledReason()}\n    `;\n  }\n\n  renderContainedTabContent() {\n    return this.renderSegmentedTabContent();\n  }\n\n  renderFilledTabContent() {\n    return this.renderSegmentedTabContent();\n  }\n\n  renderSegmentedTabContent() {\n    return html`\n      <wc-focus-ring class=\"focus-ring\" for=\"button\"></wc-focus-ring>\n      <wc-elevation class=\"elevation\"></wc-elevation>\n      <div class=\"background\"></div>\n      <div class=\"outline\"></div>\n      <wc-ripple class=\"ripple\"></wc-ripple>\n\n      <div class=\"tab-content\">\n        <slot name=\"icon\"></slot>\n\n        <div class=\"slot-container\">\n          <slot></slot>\n        </div>\n\n        <slot name=\"badge\"></slot>\n      </div>\n\n      ${this.__renderDisabledReason()}\n    `;\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"],"names":["LitElement","html","classMap","nothing","styles","property","state","query"],"mappings":"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"}

package/dist/table.js

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

package/dist/table.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.js","sources":["../../src/table/table.ts"],"sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\n\nimport { throttle } from '@/__internal/utils/throttle.js';\n\nimport styles from './table.scss';\nimport IndividualComponent from '@/IndividualComponent.js';\n\nconst DEFAULT_CELL_WIDTH = 16; // in rem\n\nexport interface TableColumn {\n  name: string;\n  label: string;\n  width?: number;\n  fixed?: boolean;\n  template?: (row: any, column: TableColumn) => string;\n}\n\n/**\n * @label Table\n * @tag wc-table\n * @rawTag table\n * @summary A configurable component for displaying tabular data.\n * @overview\n * <p>The table component displays rows of data with support for sorting, pagination, row selection, and fixed columns.</p>\n *\n * @fires {CustomEvent} cell-click - Dispatched when a table cell is clicked.\n * @fires {CustomEvent} selection-change - Dispatched when the row selection changes.\n * @fires {CustomEvent} sort - Dispatched when the table is sorted.\n * @fires {CustomEvent} page - Dispatched when the page or page size changes.\n *\n * @example\n * ```html\n * <wc-table columns=\"[{'name': 'name','label': 'Name','width': 16},{'name': 'age','label': 'Age','width': 7}]\" data=\"[{'name': 'John','age': 30},{'name': 'Jane','age': 25}]\"></wc-table>\n * ```\n * @tags display, data\n */\n@IndividualComponent\nexport class Table extends LitElement {\n  static styles = [styles];\n\n  /**\n   * Grid columns configuration.\n   * Each column can have: name, label, width (px), fixed (boolean), template (function).\n   */\n  @property({ type: Array })\n  columns: TableColumn[] = [];\n\n  /**\n   * Grid data to display on table.\n   */\n  @property({ type: Array })\n  data: any[] = [];\n\n  /**\n   * Row selection type. Set to `\"checkbox\"` to enable checkbox selection.\n   */\n  @property({ type: String, attribute: 'selection-type' })\n  selectionType: 'checkbox' | undefined;\n\n  /**\n   * Array of selected row key values.\n   */\n  @property({ type: Array, attribute: 'selected-row-keys' })\n  selectedRowKeys: string[] = [];\n\n  /**\n   * The field name used as the unique key for each row. Defaults to `\"id\"`.\n   */\n  @property({ type: String, attribute: 'key-field' })\n  keyField: string = 'id';\n\n  /**\n   * If true, sorting and pagination are managed externally (controlled mode).\n   */\n  @property({ type: Boolean })\n  managed: boolean = false;\n\n  /**\n   * If true, columns are sortable. Defaults to `true`.\n   */\n  @property({ type: Boolean })\n  sortable: boolean = true;\n\n  /**\n   * The field name currently used for sorting.\n   */\n  @property({ type: String, attribute: 'sort-by' })\n  sortBy: string = '';\n\n  /**\n   * The current sort order. Possible values are `\"asc\"` and `\"desc\"`. Defaults to `\"asc\"`.\n   */\n  @property({ type: String, attribute: 'sort-order' })\n  sortOrder: 'asc' | 'desc' = 'asc';\n\n  /**\n   * If true, pagination is enabled. Defaults to `true`.\n   */\n  @property({ type: Boolean })\n  paginate: boolean = false;\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 (used in managed/controlled mode).\n   */\n  @property({ type: Number, attribute: 'total-items' })\n  totalItems: number | undefined;\n\n  /**\n   * Headline text shown when the table has no data.\n   */\n  @property({ type: String, attribute: 'empty-state-headline' })\n  emptyStateHeadline: string = 'No items';\n\n  /**\n   * Description text shown when the table has no data.\n   */\n  @property({ type: String, attribute: 'empty-state-description' })\n  emptyStateDescription: string = 'There are no items to display';\n\n  /** Tracks the currently hovered row and column for hover-highlight CSS. */\n  @state()\n  private hoveredCell: { row?: any; column?: any } = {};\n\n  /** True when all rows on the current page are selected. */\n  @state()\n  private isSelectAll: boolean = false;\n\n  /** True when some (but not all) rows on the current page are selected. */\n  @state()\n  private isSelectAllIntermediate: boolean = false;\n\n  /** True when the scroll container has been scrolled horizontally. */\n  @state()\n  private isHorizontallyScrolled: boolean = false;\n\n  // ── Private fields ────────────────────────────────────────────────────────\n\n  /** Throttled version of the cell-mouseover handler to avoid excessive state updates. */\n  private onCellMouseOverThrottled = throttle((row: any, column: any) => {\n    this.hoveredCell = { row, column };\n  }, 30);\n\n  private onSelectAllClick = () => {\n    this.isSelectAll = !this.isSelectAll;\n    let selectedRowKeys: string[] = [];\n    if (this.isSelectAll) {\n      selectedRowKeys = this.data\n        .slice((this.page - 1) * this.pageSize, this.page * this.pageSize)\n        .map(row => row[this.keyField]);\n    }\n    this.onSelectChange(selectedRowKeys);\n  };\n\n  private onRowSelectClick = (row: any) => {\n    let selectedRowKeys = [...this.selectedRowKeys];\n    if (selectedRowKeys.includes(row[this.keyField])) {\n      this.isSelectAll = false;\n      selectedRowKeys = selectedRowKeys.filter(\n        rowId => rowId !== row[this.keyField],\n      );\n    } else {\n      selectedRowKeys.push(row[this.keyField]);\n    }\n    this.onSelectChange(selectedRowKeys);\n  };\n\n  private onSelectChange(selectedRowKeys: string[]) {\n    this.selectedRowKeys = selectedRowKeys;\n    this.dispatchEvent(\n      new CustomEvent('selection-change', {\n        detail: {\n          value: this.selectedRowKeys,\n          isSelectAll: this.isSelectAll,\n        },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private onCellClick(row: any, col: TableColumn, evt: MouseEvent) {\n    this.dispatchEvent(\n      new CustomEvent('cell-click', {\n        detail: {\n          record: row,\n          column: col,\n          altKey: evt.altKey,\n          ctrlKey: evt.ctrlKey,\n          metaKey: evt.metaKey,\n          shiftKey: evt.shiftKey,\n        },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private onScrollContainer = (event: Event) => {\n    const target = event.target as HTMLElement;\n    this.isHorizontallyScrolled = !!target.scrollLeft;\n  };\n\n  private get totalColumnsWidth(): number {\n    let total = 0;\n    if (this.selectionType === 'checkbox') {\n      total += 3; // approximate checkbox column width in rem\n    }\n    this.columns.forEach(col => {\n      total += col.width ?? DEFAULT_CELL_WIDTH;\n    });\n    return total;\n  }\n\n  private getTotalItems(): number {\n    if (this.paginate && !this.managed && this.data) return this.data.length;\n    return this.totalItems ?? 0;\n  }\n\n  private getSortIcon(col: TableColumn): string {\n    if (this.sortBy === col.name) {\n      return this.sortOrder === 'asc'\n        ? 'keyboard_arrow_up'\n        : 'keyboard_arrow_down';\n    }\n    return '';\n  }\n\n  private onSortClick(col: TableColumn) {\n    if (this.sortBy === col.name) {\n      if (this.sortOrder === 'asc') {\n        this.sortOrder = 'desc';\n      } else {\n        this.sortBy = '';\n      }\n    } else {\n      this.sortBy = col.name;\n      this.sortOrder = 'asc';\n    }\n    this.dispatchEvent(\n      new CustomEvent('sort', {\n        detail: { sortBy: this.sortBy, sortOrder: this.sortOrder },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private renderHeader() {\n    const fixedCols: any[] = [];\n    const scrollCols: any[] = [];\n\n    if (this.selectionType === 'checkbox') {\n      fixedCols.push(html`\n        <div class=\"col col-checkbox center\">\n          <div class=\"col-content\">\n            <wc-checkbox\n              class=\"checkbox\"\n              .value=${this.isSelectAll}\n              .indeterminate=${this.isSelectAllIntermediate}\n              @change=${this.onSelectAllClick}\n            ></wc-checkbox>\n          </div>\n        </div>\n      `);\n    }\n\n    this.columns.forEach(col => {\n      const colWidth = col.width\n        ? parseInt(String(col.width), 10)\n        : DEFAULT_CELL_WIDTH;\n      const colEl = html`\n        <div\n          class=${classMap({ col: true, sort: this.sortBy === col.name })}\n          style=\"width: ${colWidth}rem\"\n        >\n          <div class=\"col-content\">\n            <div class=\"col-text\">${col.label}</div>\n            <div class=\"col-actions\">\n              ${this.sortable\n                ? html`\n                    <wc-button\n                      class=\"col-action\"\n                      color=\"secondary\"\n                      variant=\"text\"\n                      @click=${() => this.onSortClick(col)}\n                    >\n                      <wc-icon\n                        slot=\"icon\"\n                        name=${this.getSortIcon(col)}\n                      ></wc-icon>\n                    </wc-button>\n                  `\n                : nothing}\n            </div>\n          </div>\n        </div>\n      `;\n      if (col.fixed) {\n        fixedCols.push(colEl);\n      } else {\n        scrollCols.push(colEl);\n      }\n    });\n\n    return html`\n      <div class=\"header\">\n        <div class=\"row\" style=\"min-width: ${this.totalColumnsWidth}rem\">\n          <div class=\"fixed-columns columns-container\">${fixedCols}</div>\n          <div class=\"scrollable-columns columns-container\">${scrollCols}</div>\n        </div>\n      </div>\n    `;\n  }\n\n  private renderBody() {\n    let data = [...this.data];\n\n    if (!this.managed) {\n      if (this.sortable && this.sortBy) {\n        data = data.sort((a, b) => {\n          if (a[this.sortBy] < b[this.sortBy])\n            return this.sortOrder === 'asc' ? -1 : 1;\n          if (a[this.sortBy] > b[this.sortBy])\n            return this.sortOrder === 'asc' ? 1 : -1;\n          return 0;\n        });\n      }\n      if (this.paginate) {\n        data = data.slice(\n          (this.page - 1) * this.pageSize,\n          this.page * this.pageSize,\n        );\n      }\n    }\n\n    const rows = data.map(row => {\n      const fixedCols: any[] = [];\n      const scrollCols: any[] = [];\n\n      if (this.selectionType === 'checkbox') {\n        fixedCols.push(html`\n          <div class=\"col center col-checkbox\">\n            <div class=\"col-content\">\n              <wc-checkbox\n                class=\"checkbox\"\n                .value=${this.selectedRowKeys.includes(row[this.keyField])}\n                @change=${() => this.onRowSelectClick(row)}\n              ></wc-checkbox>\n            </div>\n          </div>\n        `);\n      }\n\n      this.columns.forEach(column => {\n        const colWidth = column.width\n          ? parseInt(String(column.width), 10)\n          : DEFAULT_CELL_WIDTH;\n        const colEl = html`\n          <div\n            tabindex=\"0\"\n            class=${classMap({\n              col: true,\n              'col-hover':\n                this.hoveredCell.row === row &&\n                this.hoveredCell.column === column,\n            })}\n            style=\"width: ${colWidth}rem\"\n            @mouseover=${() => this.onCellMouseOverThrottled(row, column)}\n            @focus=${() => this.onCellMouseOverThrottled(row, column)}\n            @keydown=${(event: KeyboardEvent) => {\n              if ((event.ctrlKey || event.metaKey) && event.key === 'c') {\n                const elem = event.target as HTMLElement;\n                window.navigator.clipboard\n                  .writeText(elem.innerText)\n                  .catch(() => {});\n              }\n            }}\n            @click=${(evt: MouseEvent) => {\n              const selection = window.getSelection();\n              if (selection?.type !== 'Range') {\n                this.onCellClick(row, column, evt);\n              }\n            }}\n          >\n            <div class=\"col-content\">\n              ${column.template\n                ? html`<div class=\"col-template\">\n                    ${unsafeHTML(column.template(row, column))}\n                  </div>`\n                : html`<div class=\"col-text\" title=${row?.[column.name] ?? ''}>\n                    ${row?.[column.name]}\n                  </div>`}\n            </div>\n          </div>\n        `;\n        if (column.fixed) {\n          fixedCols.push(colEl);\n        } else {\n          scrollCols.push(colEl);\n        }\n      });\n\n      return html`\n        <div\n          class=${classMap({\n            row: true,\n            'row-hover': this.hoveredCell.row === row,\n          })}\n          style=\"min-width: ${this.totalColumnsWidth}rem\"\n        >\n          <div class=\"fixed-columns columns-container\">${fixedCols}</div>\n          <div class=\"scrollable-columns columns-container\">${scrollCols}</div>\n        </div>\n      `;\n    });\n\n    return html`<div class=\"body\">${rows}</div>`;\n  }\n\n  private renderEmptyState() {\n    return html`\n      <div class=\"empty-table\">\n        <wc-empty-state\n          class=\"empty-state content-center\"\n          headline=${this.emptyStateHeadline}\n          description=${this.emptyStateDescription}\n        ></wc-empty-state>\n      </div>\n    `;\n  }\n\n  private renderPagination() {\n    if (!this.paginate) return nothing;\n\n    return html`\n      <wc-pagination\n        .page=${this.page}\n        .pageSize=${this.pageSize}\n        .totalItems=${this.getTotalItems()}\n        @page=${(e: CustomEvent) => {\n          this.page = e.detail.page;\n          this.pageSize = e.detail.pageSize;\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      ></wc-pagination>\n    `;\n  }\n\n  render() {\n    const tableClasses = {\n      table: true,\n      sortable: this.sortable,\n      paginate: this.paginate,\n      'horizontal-scrolled': this.isHorizontallyScrolled,\n    };\n\n    return html`\n      <div class=${classMap(tableClasses)}>\n        <div class=\"table-scroll-container\" @scroll=${this.onScrollContainer}>\n          ${this.renderHeader()}\n          ${this.data && this.data.length\n            ? this.renderBody()\n            : this.renderEmptyState()}\n        </div>\n        <div class=\"table-footer\">${this.renderPagination()}</div>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","html","classMap","nothing","unsafeHTML","styles","property","state"],"mappings":"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"}
+{"version":3,"file":"table.js","sources":["../../src/table/table.ts"],"sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\n\nimport { throttle } from '@/__internal/utils/throttle.js';\n\nimport styles from './table.scss';\nimport IndividualComponent from '@/IndividualComponent.js';\n\nconst DEFAULT_CELL_WIDTH = 16; // in rem\n\nexport interface TableColumn {\n  name: string;\n  label: string;\n  width?: number;\n  fixed?: boolean;\n  template?: (row: any, column: TableColumn) => string;\n}\n\n/**\n * @label Table\n * @tag wc-table\n * @rawTag table\n * @summary A configurable component for displaying tabular data.\n * @overview\n * <p>The table component displays rows of data with support for sorting, pagination, row selection, and fixed columns.</p>\n *\n * @fires {CustomEvent} cell-click - Dispatched when a table cell is clicked.\n * @fires {CustomEvent} selection-change - Dispatched when the row selection changes.\n * @fires {CustomEvent} sort - Dispatched when the table is sorted.\n * @fires {CustomEvent} page - Dispatched when the page or page size changes.\n *\n * @example\n * ```html\n * <wc-table columns=\"[{'name': 'name','label': 'Name','width': 16},{'name': 'age','label': 'Age','width': 7}]\" data=\"[{'name': 'John','age': 30},{'name': 'Jane','age': 25}]\"></wc-table>\n * ```\n * @tags display, data\n */\n@IndividualComponent\nexport class Table extends LitElement {\n  static styles = [styles];\n\n  /**\n   * Grid columns configuration.\n   * Each column can have: name, label, width (px), fixed (boolean), template (function).\n   */\n  @property({ type: Array })\n  columns: TableColumn[] = [];\n\n  /**\n   * Grid data to display on table.\n   */\n  @property({ type: Array })\n  data: any[] = [];\n\n  /**\n   * Row selection type. Set to `\"checkbox\"` to enable checkbox selection.\n   */\n  @property({ type: String, attribute: 'selection-type' })\n  selectionType: 'checkbox' | undefined;\n\n  /**\n   * Array of selected row key values.\n   */\n  @property({ type: Array, attribute: 'selected-row-keys' })\n  selectedRowKeys: string[] = [];\n\n  /**\n   * The field name used as the unique key for each row. Defaults to `\"id\"`.\n   */\n  @property({ type: String, attribute: 'key-field' })\n  keyField: string = 'id';\n\n  /**\n   * If true, sorting and pagination are managed externally (controlled mode).\n   */\n  @property({ type: Boolean })\n  managed: boolean = false;\n\n  /**\n   * If true, columns are sortable. Defaults to `true`.\n   */\n  @property({ type: Boolean })\n  sortable: boolean = true;\n\n  /**\n   * The field name currently used for sorting.\n   */\n  @property({ type: String, attribute: 'sort-by' })\n  sortBy: string = '';\n\n  /**\n   * The current sort order. Possible values are `\"asc\"` and `\"desc\"`. Defaults to `\"asc\"`.\n   */\n  @property({ type: String, attribute: 'sort-order' })\n  sortOrder: 'asc' | 'desc' = 'asc';\n\n  /**\n   * If true, pagination is enabled. Defaults to `true`.\n   */\n  @property({ type: Boolean })\n  paginate: boolean = false;\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 (used in managed/controlled mode).\n   */\n  @property({ type: Number, attribute: 'total-items' })\n  totalItems: number | undefined;\n\n  /**\n   * Headline text shown when the table has no data.\n   */\n  @property({ type: String, attribute: 'empty-state-headline' })\n  emptyStateHeadline: string = 'No items';\n\n  /**\n   * Description text shown when the table has no data.\n   */\n  @property({ type: String, attribute: 'empty-state-description' })\n  emptyStateDescription: string = 'There are no items to display';\n\n  /** Tracks the currently hovered row and column for hover-highlight CSS. */\n  @state()\n  private hoveredCell: { row?: any; column?: any } = {};\n\n  /** True when all rows on the current page are selected. */\n  @state()\n  private isSelectAll: boolean = false;\n\n  /** True when some (but not all) rows on the current page are selected. */\n  @state()\n  private isSelectAllIntermediate: boolean = false;\n\n  /** True when the scroll container has been scrolled horizontally. */\n  @state()\n  private isHorizontallyScrolled: boolean = false;\n\n  // ── Private fields ────────────────────────────────────────────────────────\n\n  /** Throttled version of the cell-mouseover handler to avoid excessive state updates. */\n  private onCellMouseOverThrottled = throttle((row: any, column: any) => {\n    this.hoveredCell = { row, column };\n  }, 30);\n\n  private onSelectAllClick = () => {\n    this.isSelectAll = !this.isSelectAll;\n    let selectedRowKeys: string[] = [];\n    if (this.isSelectAll) {\n      selectedRowKeys = this.data\n        .slice((this.page - 1) * this.pageSize, this.page * this.pageSize)\n        .map(row => row[this.keyField]);\n    }\n    this.onSelectChange(selectedRowKeys);\n  };\n\n  private onRowSelectClick = (row: any) => {\n    let selectedRowKeys = [...this.selectedRowKeys];\n    if (selectedRowKeys.includes(row[this.keyField])) {\n      this.isSelectAll = false;\n      selectedRowKeys = selectedRowKeys.filter(\n        rowId => rowId !== row[this.keyField],\n      );\n    } else {\n      selectedRowKeys.push(row[this.keyField]);\n    }\n    this.onSelectChange(selectedRowKeys);\n  };\n\n  private onSelectChange(selectedRowKeys: string[]) {\n    this.selectedRowKeys = selectedRowKeys;\n    this.dispatchEvent(\n      new CustomEvent('selection-change', {\n        detail: {\n          value: this.selectedRowKeys,\n          isSelectAll: this.isSelectAll,\n        },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private onCellClick(row: any, col: TableColumn, evt: MouseEvent) {\n    this.dispatchEvent(\n      new CustomEvent('cell-click', {\n        detail: {\n          record: row,\n          column: col,\n          altKey: evt.altKey,\n          ctrlKey: evt.ctrlKey,\n          metaKey: evt.metaKey,\n          shiftKey: evt.shiftKey,\n        },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private onScrollContainer = (event: Event) => {\n    const target = event.target as HTMLElement;\n    this.isHorizontallyScrolled = !!target.scrollLeft;\n  };\n\n  private get totalColumnsWidth(): number {\n    let total = 0;\n    if (this.selectionType === 'checkbox') {\n      total += 3; // approximate checkbox column width in rem\n    }\n    this.columns.forEach(col => {\n      total += col.width ?? DEFAULT_CELL_WIDTH;\n    });\n    return total;\n  }\n\n  private getTotalItems(): number {\n    if (this.paginate && !this.managed && this.data) return this.data.length;\n    return this.totalItems ?? 0;\n  }\n\n  private getSortIcon(col: TableColumn): string {\n    if (this.sortBy === col.name) {\n      return this.sortOrder === 'asc'\n        ? 'keyboard_arrow_up'\n        : 'keyboard_arrow_down';\n    }\n    return '';\n  }\n\n  private onSortClick(col: TableColumn) {\n    if (this.sortBy === col.name) {\n      if (this.sortOrder === 'asc') {\n        this.sortOrder = 'desc';\n      } else {\n        this.sortBy = '';\n      }\n    } else {\n      this.sortBy = col.name;\n      this.sortOrder = 'asc';\n    }\n    this.dispatchEvent(\n      new CustomEvent('sort', {\n        detail: { sortBy: this.sortBy, sortOrder: this.sortOrder },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private renderHeader() {\n    const fixedCols: any[] = [];\n    const scrollCols: any[] = [];\n\n    if (this.selectionType === 'checkbox') {\n      fixedCols.push(html`\n        <div class=\"col col-checkbox center\">\n          <div class=\"col-content\">\n            <wc-checkbox\n              class=\"checkbox\"\n              .value=${this.isSelectAll}\n              .indeterminate=${this.isSelectAllIntermediate}\n              @change=${this.onSelectAllClick}\n            ></wc-checkbox>\n          </div>\n        </div>\n      `);\n    }\n\n    this.columns.forEach(col => {\n      const colWidth = col.width\n        ? parseInt(String(col.width), 10)\n        : DEFAULT_CELL_WIDTH;\n      const colEl = html`\n        <div\n          class=${classMap({ col: true, sort: this.sortBy === col.name })}\n          style=\"width: ${colWidth}rem\"\n        >\n          <div class=\"col-content\">\n            <div class=\"col-text\">${col.label}</div>\n            <div class=\"col-actions\">\n              ${this.sortable\n                ? html`\n                    <wc-button\n                      class=\"col-action\"\n                      color=\"secondary\"\n                      variant=\"text\"\n                      @click=${() => this.onSortClick(col)}\n                    >\n                      <wc-icon\n                        slot=\"icon\"\n                        name=${this.getSortIcon(col)}\n                      ></wc-icon>\n                    </wc-button>\n                  `\n                : nothing}\n            </div>\n          </div>\n        </div>\n      `;\n      if (col.fixed) {\n        fixedCols.push(colEl);\n      } else {\n        scrollCols.push(colEl);\n      }\n    });\n\n    return html`\n      <div class=\"header\">\n        <div class=\"row\" style=\"min-width: ${this.totalColumnsWidth}rem\">\n          <div class=\"fixed-columns columns-container\">${fixedCols}</div>\n          <div class=\"scrollable-columns columns-container\">${scrollCols}</div>\n        </div>\n      </div>\n    `;\n  }\n\n  private renderBody() {\n    let data = [...this.data];\n\n    if (!this.managed) {\n      if (this.sortable && this.sortBy) {\n        data = data.sort((a, b) => {\n          if (a[this.sortBy] < b[this.sortBy])\n            return this.sortOrder === 'asc' ? -1 : 1;\n          if (a[this.sortBy] > b[this.sortBy])\n            return this.sortOrder === 'asc' ? 1 : -1;\n          return 0;\n        });\n      }\n      if (this.paginate) {\n        data = data.slice(\n          (this.page - 1) * this.pageSize,\n          this.page * this.pageSize,\n        );\n      }\n    }\n\n    const rows = data.map(row => {\n      const fixedCols: any[] = [];\n      const scrollCols: any[] = [];\n\n      if (this.selectionType === 'checkbox') {\n        fixedCols.push(html`\n          <div class=\"col center col-checkbox\">\n            <div class=\"col-content\">\n              <wc-checkbox\n                class=\"checkbox\"\n                .value=${this.selectedRowKeys.includes(row[this.keyField])}\n                @change=${() => this.onRowSelectClick(row)}\n              ></wc-checkbox>\n            </div>\n          </div>\n        `);\n      }\n\n      this.columns.forEach(column => {\n        const colWidth = column.width\n          ? parseInt(String(column.width), 10)\n          : DEFAULT_CELL_WIDTH;\n        const colEl = html`\n          <div\n            tabindex=\"0\"\n            class=${classMap({\n              col: true,\n              'col-hover':\n                this.hoveredCell.row === row &&\n                this.hoveredCell.column === column,\n            })}\n            style=\"width: ${colWidth}rem\"\n            @mouseover=${() => this.onCellMouseOverThrottled(row, column)}\n            @focus=${() => this.onCellMouseOverThrottled(row, column)}\n            @keydown=${(event: KeyboardEvent) => {\n              if ((event.ctrlKey || event.metaKey) && event.key === 'c') {\n                const elem = event.target as HTMLElement;\n                window.navigator.clipboard\n                  .writeText(elem.innerText)\n                  .catch(() => {});\n              }\n            }}\n            @click=${(evt: MouseEvent) => {\n              const selection = window.getSelection();\n              if (selection?.type !== 'Range') {\n                this.onCellClick(row, column, evt);\n              }\n            }}\n          >\n            <div class=\"col-content\">\n              ${column.template\n                ? html`<div class=\"col-template\">\n                    ${unsafeHTML(column.template(row, column))}\n                  </div>`\n                : html`<div class=\"col-text\" title=${row?.[column.name] ?? ''}>\n                    ${row?.[column.name]}\n                  </div>`}\n            </div>\n          </div>\n        `;\n        if (column.fixed) {\n          fixedCols.push(colEl);\n        } else {\n          scrollCols.push(colEl);\n        }\n      });\n\n      return html`\n        <div\n          class=${classMap({\n            row: true,\n            'row-hover': this.hoveredCell.row === row,\n          })}\n          style=\"min-width: ${this.totalColumnsWidth}rem\"\n        >\n          <div class=\"fixed-columns columns-container\">${fixedCols}</div>\n          <div class=\"scrollable-columns columns-container\">${scrollCols}</div>\n        </div>\n      `;\n    });\n\n    return html`<div class=\"body\">${rows}</div>`;\n  }\n\n  private renderEmptyState() {\n    return html`\n      <div class=\"empty-table\">\n        <wc-empty-state\n          class=\"empty-state content-center\"\n          headline=${this.emptyStateHeadline}\n          description=${this.emptyStateDescription}\n        ></wc-empty-state>\n      </div>\n    `;\n  }\n\n  private renderPagination() {\n    if (!this.paginate) return nothing;\n\n    return html`\n      <wc-pagination\n        .page=${this.page}\n        .pageSize=${this.pageSize}\n        .totalItems=${this.getTotalItems()}\n        @page=${(e: CustomEvent) => {\n          this.page = e.detail.page;\n          this.pageSize = e.detail.pageSize;\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      ></wc-pagination>\n    `;\n  }\n\n  render() {\n    const tableClasses = {\n      table: true,\n      sortable: this.sortable,\n      paginate: this.paginate,\n      'horizontal-scrolled': this.isHorizontallyScrolled,\n    };\n\n    return html`\n      <div class=${classMap(tableClasses)}>\n        <div class=\"table-scroll-container\" @scroll=${this.onScrollContainer}>\n          ${this.renderHeader()}\n          ${this.data && this.data.length\n            ? this.renderBody()\n            : this.renderEmptyState()}\n        </div>\n        <div class=\"table-footer\">${this.renderPagination()}</div>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","html","classMap","nothing","unsafeHTML","styles","property","state"],"mappings":"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"}

package/dist/tabs.js

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

package/dist/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","sources":["../../src/tabs/tabs.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport styles from './tabs.scss';\nimport { Tab } from './tab.js';\nimport IndividualComponent from '@/IndividualComponent.js';\n\n/**\n * @label Tabs\n * @tag wc-tabs\n * @rawTag tabs\n *\n * @summary Container for tab components.\n * @overview\n * <p>Tabs holds the tab buttons and manages their layout.</p>\n *\n * @example\n * ```html\n * <wc-tabs>\n *   <wc-tab active>Tab 1</wc-tab>\n *   <wc-tab>Tab 2</wc-tab>\n * </wc-tabs>\n * ```\n * @tags navigation\n */\n@IndividualComponent\nexport class Tabs extends LitElement {\n  static styles = [styles];\n\n  static Tab = Tab;\n\n  @property({ reflect: true }) \n  variant: 'primary' | 'secondary' | 'contained' | 'filled' = 'primary';\n\n  @property({ type: Boolean }) managed = false;\n\n  private __mutationObserver?: MutationObserver;\n\n  private __lastActiveTab?: Tab;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('click', this.__handleTabClick);\n  }\n\n  firstUpdated() {\n    this.__mutationObserver = new MutationObserver(() => {\n      this.__syncIndicatorsFromActiveState();\n    });\n\n    this.__mutationObserver.observe(this, {\n      subtree: true,\n      childList: true,\n      attributes: true,\n      attributeFilter: ['active', 'disabled'],\n    });\n\n    this.__lastActiveTab = this.__getActiveTab();\n  }\n\n  updated(changedProperties: Map<string, unknown>) {\n    if (changedProperties.has('variant')) {\n      this.__lastActiveTab = this.__getActiveTab();\n    }\n  }\n\n  disconnectedCallback() {\n    this.__mutationObserver?.disconnect();\n\n    this.removeEventListener('click', this.__handleTabClick);\n    super.disconnectedCallback();\n  }\n\n  private __getTabs() {\n    return Array.from(this.querySelectorAll('wc-tab')) as Tab[];\n  }\n\n  private __getActiveTab() {\n    return this.__getTabs().find(tab => tab.active && !tab.disabled);\n  }\n\n  private static __getTabIndicator(tab?: Tab) {\n    if (!tab?.shadowRoot) return undefined;\n    return tab.shadowRoot.querySelector('.indicator') as HTMLElement | null;\n  }\n\n  private static __getTabBackground(tab?: Tab) {\n    if (!tab?.shadowRoot) return undefined;\n    return tab.shadowRoot.querySelector('.background') as HTMLElement | null;\n  }\n\n  private __getAnimationElements(previousTab?: Tab, nextTab?: Tab) {\n    if (this.variant === 'primary' || this.variant === 'secondary') {\n      return {\n        previous: Tabs.__getTabIndicator(previousTab),\n        next: Tabs.__getTabIndicator(nextTab),\n      };\n    }\n\n    if (this.variant === 'filled' || this.variant === 'contained') {\n      return {\n        previous: Tabs.__getTabBackground(previousTab),\n        next: Tabs.__getTabBackground(nextTab),\n      };\n    }\n\n    return {\n      previous: undefined,\n      next: undefined,\n    };\n  }\n\n  private __animateIndicatorTransition(previousTab?: Tab, nextTab?: Tab) {\n    if (!previousTab || !nextTab || previousTab === nextTab) return;\n\n    const { previous: previousAnimationElement, next: nextAnimationElement } =\n      this.__getAnimationElements(previousTab, nextTab);\n    if (!previousAnimationElement || !nextAnimationElement) return;\n\n    const previousRect = previousTab.getBoundingClientRect();\n    const nextRect = nextTab.getBoundingClientRect();\n\n    const incomingOffset = previousRect.left - nextRect.left;\n    const outgoingOffset = nextRect.left - previousRect.left;\n    const incomingScale = previousRect.width / nextRect.width;\n    const outgoingScale = nextRect.width / previousRect.width;\n\n    nextAnimationElement.style.transition = 'none';\n    nextAnimationElement.style.opacity = '0';\n    nextAnimationElement.style.transform = `translateX(${incomingOffset}px) scaleX(${incomingScale})`;\n\n    previousAnimationElement.style.transition = 'none';\n    previousAnimationElement.style.opacity = '1';\n    previousAnimationElement.style.transform = 'translateX(0) scaleX(1)';\n\n    requestAnimationFrame(() => {\n      nextAnimationElement.style.transition = '';\n      previousAnimationElement.style.transition = '';\n\n      nextAnimationElement.style.opacity = '1';\n      nextAnimationElement.style.transform = 'translateX(0) scaleX(1)';\n\n      previousAnimationElement.style.opacity = '0';\n      previousAnimationElement.style.transform = `translateX(${outgoingOffset}px) scaleX(${outgoingScale})`;\n    });\n  }\n\n  private __syncIndicatorsFromActiveState() {\n    const activeTab = this.__getActiveTab();\n    if (this.__lastActiveTab && activeTab && this.__lastActiveTab !== activeTab) {\n      this.__animateIndicatorTransition(this.__lastActiveTab, activeTab);\n    }\n\n    this.__lastActiveTab = activeTab;\n  }\n\n  private __handleTabClick = (event: Event) => {\n    if (this.managed) return;\n\n    const detailEvent = event as CustomEvent;\n    const path = detailEvent.composedPath();\n    const clickedTab: Tab | undefined = path.find(\n      node => node instanceof Element && (node as Element).tagName.toLowerCase() === 'wc-tab',\n    ) as Tab | undefined;\n\n    if (!clickedTab) return;\n\n    const previousActiveTab = this.__getActiveTab();\n    const tabs = this.__getTabs();\n    let clickedIndex = -1;\n    for (let index = 0; index < tabs.length; index += 1) {\n      const tab = tabs[index];\n      tab.active = false;\n      if (tab === clickedTab) clickedIndex = index;\n    }\n    (clickedTab as Tab).active = true;\n    this.__animateIndicatorTransition(previousActiveTab, clickedTab);\n    this.__lastActiveTab = clickedTab;\n\n    this.dispatchEvent(new CustomEvent('tab-click', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        index: clickedIndex,\n        value: (clickedTab as Tab).value,\n      },\n    }));\n  };\n\n  render() {\n    return html`\n      <div class=\"tabs\">\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","html","styles","property"],"mappings":"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"}
+{"version":3,"file":"tabs.js","sources":["../../src/tabs/tabs.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport styles from './tabs.scss';\nimport { Tab } from './tab.js';\nimport IndividualComponent from '@/IndividualComponent.js';\n\n/**\n * @label Tabs\n * @tag wc-tabs\n * @rawTag tabs\n *\n * @summary Container for tab components.\n * @overview\n * <p>Tabs holds the tab buttons and manages their layout.</p>\n *\n * @example\n * ```html\n * <wc-tabs>\n *   <wc-tab active>Tab 1</wc-tab>\n *   <wc-tab>Tab 2</wc-tab>\n * </wc-tabs>\n * ```\n * @tags navigation\n */\n@IndividualComponent\nexport class Tabs extends LitElement {\n  static styles = [styles];\n\n  static Tab = Tab;\n\n  @property({ reflect: true }) \n  variant: 'primary' | 'secondary' | 'contained' | 'filled' = 'primary';\n\n  @property({ type: Boolean }) managed = false;\n\n  private __mutationObserver?: MutationObserver;\n\n  private __lastActiveTab?: Tab;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('click', this.__handleTabClick);\n  }\n\n  firstUpdated() {\n    this.__mutationObserver = new MutationObserver(() => {\n      this.__syncIndicatorsFromActiveState();\n    });\n\n    this.__mutationObserver.observe(this, {\n      subtree: true,\n      childList: true,\n      attributes: true,\n      attributeFilter: ['active', 'disabled'],\n    });\n\n    this.__lastActiveTab = this.__getActiveTab();\n  }\n\n  updated(changedProperties: Map<string, unknown>) {\n    if (changedProperties.has('variant')) {\n      this.__lastActiveTab = this.__getActiveTab();\n    }\n  }\n\n  disconnectedCallback() {\n    this.__mutationObserver?.disconnect();\n\n    this.removeEventListener('click', this.__handleTabClick);\n    super.disconnectedCallback();\n  }\n\n  private __getTabs() {\n    return Array.from(this.querySelectorAll('wc-tab')) as Tab[];\n  }\n\n  private __getActiveTab() {\n    return this.__getTabs().find(tab => tab.active && !tab.disabled);\n  }\n\n  private static __getTabIndicator(tab?: Tab) {\n    if (!tab?.shadowRoot) return undefined;\n    return tab.shadowRoot.querySelector('.indicator') as HTMLElement | null;\n  }\n\n  private static __getTabBackground(tab?: Tab) {\n    if (!tab?.shadowRoot) return undefined;\n    return tab.shadowRoot.querySelector('.background') as HTMLElement | null;\n  }\n\n  private __getAnimationElements(previousTab?: Tab, nextTab?: Tab) {\n    if (this.variant === 'primary' || this.variant === 'secondary') {\n      return {\n        previous: Tabs.__getTabIndicator(previousTab),\n        next: Tabs.__getTabIndicator(nextTab),\n      };\n    }\n\n    if (this.variant === 'filled' || this.variant === 'contained') {\n      return {\n        previous: Tabs.__getTabBackground(previousTab),\n        next: Tabs.__getTabBackground(nextTab),\n      };\n    }\n\n    return {\n      previous: undefined,\n      next: undefined,\n    };\n  }\n\n  private __animateIndicatorTransition(previousTab?: Tab, nextTab?: Tab) {\n    if (!previousTab || !nextTab || previousTab === nextTab) return;\n\n    const { previous: previousAnimationElement, next: nextAnimationElement } =\n      this.__getAnimationElements(previousTab, nextTab);\n    if (!previousAnimationElement || !nextAnimationElement) return;\n\n    const previousRect = previousTab.getBoundingClientRect();\n    const nextRect = nextTab.getBoundingClientRect();\n\n    const incomingOffset = previousRect.left - nextRect.left;\n    const outgoingOffset = nextRect.left - previousRect.left;\n    const incomingScale = previousRect.width / nextRect.width;\n    const outgoingScale = nextRect.width / previousRect.width;\n\n    nextAnimationElement.style.transition = 'none';\n    nextAnimationElement.style.opacity = '0';\n    nextAnimationElement.style.transform = `translateX(${incomingOffset}px) scaleX(${incomingScale})`;\n\n    previousAnimationElement.style.transition = 'none';\n    previousAnimationElement.style.opacity = '1';\n    previousAnimationElement.style.transform = 'translateX(0) scaleX(1)';\n\n    requestAnimationFrame(() => {\n      nextAnimationElement.style.transition = '';\n      previousAnimationElement.style.transition = '';\n\n      nextAnimationElement.style.opacity = '1';\n      nextAnimationElement.style.transform = 'translateX(0) scaleX(1)';\n\n      previousAnimationElement.style.opacity = '0';\n      previousAnimationElement.style.transform = `translateX(${outgoingOffset}px) scaleX(${outgoingScale})`;\n    });\n  }\n\n  private __syncIndicatorsFromActiveState() {\n    const activeTab = this.__getActiveTab();\n    if (this.__lastActiveTab && activeTab && this.__lastActiveTab !== activeTab) {\n      this.__animateIndicatorTransition(this.__lastActiveTab, activeTab);\n    }\n\n    this.__lastActiveTab = activeTab;\n  }\n\n  private __handleTabClick = (event: Event) => {\n    if (this.managed) return;\n\n    const detailEvent = event as CustomEvent;\n    const path = detailEvent.composedPath();\n    const clickedTab: Tab | undefined = path.find(\n      node => node instanceof Element && (node as Element).tagName.toLowerCase() === 'wc-tab',\n    ) as Tab | undefined;\n\n    if (!clickedTab) return;\n\n    const previousActiveTab = this.__getActiveTab();\n    const tabs = this.__getTabs();\n    let clickedIndex = -1;\n    for (let index = 0; index < tabs.length; index += 1) {\n      const tab = tabs[index];\n      tab.active = false;\n      if (tab === clickedTab) clickedIndex = index;\n    }\n    (clickedTab as Tab).active = true;\n    this.__animateIndicatorTransition(previousActiveTab, clickedTab);\n    this.__lastActiveTab = clickedTab;\n\n    this.dispatchEvent(new CustomEvent('tab-click', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        index: clickedIndex,\n        value: (clickedTab as Tab).value,\n      },\n    }));\n  };\n\n  render() {\n    return html`\n      <div class=\"tabs\">\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","html","styles","property"],"mappings":"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"}

package/dist/toolbar.js

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

package/dist/toolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"toolbar.js","sources":["../../src/toolbar/toolbar.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport styles from './toolbar.scss';\nimport colorStyles from './toolbar-colors.scss';\n\n/**\n * @label Toolbar\n * @tag wc-toolbar\n * @rawTag toolbar\n *\n * @summary A toolbar / app bar for navigation and actions.\n * @overview\n * <p>The toolbar component implements the app bar pattern. It supports a\n * docked (attached) variant for bottom-panel navigation and a floating (detached pill-shaped)\n * variant. The floating variant supports both horizontal and vertical orientations.</p>\n *\n * <p>Render toolbar actions directly as children of the component. The docked variant is\n * optimized for a horizontal action row, while the floating variant supports both horizontal\n * and vertical layouts.</p>\n *\n * @cssprop --toolbar-container-color - Background color of the toolbar.\n * @cssprop --toolbar-container-shape - Border radius of the toolbar. Relevant for the floating variant.\n * @cssprop --toolbar-height - Height of the toolbar (docked horizontal / floating horizontal).\n * @cssprop --toolbar-padding-inline - Inline padding of the toolbar.\n * @cssprop --toolbar-gap - Gap between toolbar sections.\n * @cssprop --toolbar-icon-color - Color of icon slots.\n * @cssprop --toolbar-title-color - Color of the title (default slot) text.\n * @cssprop --toolbar-shadow - Box-shadow of the toolbar.\n *\n * @example\n * ```html\n * <!-- Docked toolbar -->\n * <wc-toolbar>\n *   <wc-icon-button variant=\"text\" color=\"surface\"><wc-icon name=\"home\"></wc-icon></wc-icon-button>\n *   <wc-icon-button variant=\"tonal\"><wc-icon name=\"search\"></wc-icon></wc-icon-button>\n *   <wc-icon-button variant=\"text\" color=\"surface\"><wc-icon name=\"favorite\"></wc-icon></wc-icon-button>\n *   <wc-icon-button variant=\"text\" color=\"surface\"><wc-icon name=\"account_circle\"></wc-icon></wc-icon-button>\n * </wc-toolbar>\n * ```\n *\n * @example\n * ```html\n * <!-- Floating horizontal toolbar -->\n * <wc-toolbar variant=\"floating\" orientation=\"horizontal\">\n *   <wc-icon-button variant=\"tonal\"><wc-icon name=\"home\"></wc-icon></wc-icon-button>\n *   <wc-icon-button variant=\"text\"><wc-icon name=\"search\"></wc-icon></wc-icon-button>\n *   <wc-icon-button variant=\"text\"><wc-icon name=\"favorite\"></wc-icon></wc-icon-button>\n * </wc-toolbar>\n * ```\n *\n * @example\n * ```html\n * <!-- Floating vertical toolbar -->\n * <wc-toolbar variant=\"floating\" orientation=\"vertical\">\n *   <wc-icon-button variant=\"tonal\"><wc-icon name=\"home\"></wc-icon></wc-icon-button>\n *   <wc-icon-button variant=\"text\"><wc-icon name=\"search\"></wc-icon></wc-icon-button>\n *   <wc-icon-button variant=\"text\"><wc-icon name=\"favorite\"></wc-icon></wc-icon-button>\n * </wc-toolbar>\n * ```\n * @tags display navigation\n */\n@IndividualComponent\nexport class Toolbar extends LitElement {\n  static styles = [styles, colorStyles];\n\n  /**\n   * Visual and layout variant of the toolbar.\n   * - `\"docked\"`: A full-width bar attached to the edge of the screen (default).\n   * - `\"floating\"`: A detached pill-shaped toolbar that floats over content.\n   */\n  @property({ type: String, reflect: true })\n  variant: 'docked' | 'floating' = 'docked';\n\n  /**\n   * Orientation of the toolbar content.\n   * - `\"horizontal\"`: Items are laid out left to right (default).\n   * - `\"vertical\"`: Items are stacked top to bottom. Primarily useful for the floating variant.\n   */\n  @property({ type: String, reflect: true })\n  orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  /**\n   * Size of the docked toolbar.\n    * - `\"small\"`: 80dp height (default).\n    * - `\"medium\"`: 96dp height.\n    * - `\"large\"`: 112dp height.\n   */\n  @property({ type: String, reflect: true })\n  size: 'small' | 'medium' | 'large' = 'small';\n\n  /**\n   * Whether the toolbar is visually elevated (adds a shadow).\n   */\n  @property({ type: Boolean, reflect: true })\n  elevated: boolean = false;\n\n  override render() {\n    const cssClasses = {\n      toolbar: true,\n      [`variant-${this.variant}`]: true,\n      [`orientation-${this.orientation}`]: true,\n      [`size-${this.size}`]: true,\n      elevated: this.elevated,\n    };\n\n    if (this.variant === 'floating') {\n      return Toolbar.__renderFloating(cssClasses);\n    }\n\n    return Toolbar.__renderDocked(cssClasses);\n  }\n\n  private static __renderDocked(cssClasses: Record<string, boolean>) {\n    return html`\n      <div class=${classMap(cssClasses)} role=\"toolbar\">\n        <div class=\"background\"></div>\n        <div class=\"toolbar-content\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  private static __renderFloating(cssClasses: Record<string, boolean>) {\n    return html`\n      <div class=${classMap(cssClasses)} role=\"toolbar\">\n        <wc-elevation class=\"elevation\"></wc-elevation>\n        <div class=\"background\"></div>\n        <div class=\"toolbar-content\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","html","classMap","styles","colorStyles","property"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuDG;AAEI,IAAM,OAAO,GAAA,SAAA,GAAb,MAAM,OAAQ,SAAQA,GAAU,CAAA;AAAhC,IAAA,WAAA,GAAA;;AAGL;;;;AAIG;QAEH,IAAA,CAAA,OAAO,GAA0B,QAAQ;AAEzC;;;;AAIG;QAEH,IAAA,CAAA,WAAW,GAA8B,YAAY;AAErD;;;;;AAKG;QAEH,IAAA,CAAA,IAAI,GAAiC,OAAO;AAE5C;;AAEG;QAEH,IAAA,CAAA,QAAQ,GAAY,KAAK;IAwC3B;IAtCW,MAAM,GAAA;AACb,QAAA,MAAM,UAAU,GAAG;AACjB,YAAA,OAAO,EAAE,IAAI;AACb,YAAA,CAAC,WAAW,IAAI,CAAC,OAAO,CAAA,CAAE,GAAG,IAAI;AACjC,YAAA,CAAC,eAAe,IAAI,CAAC,WAAW,CAAA,CAAE,GAAG,IAAI;AACzC,YAAA,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAA,CAAE,GAAG,IAAI;YAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB;AAED,QAAA,IAAI,IAAI,CAAC,OAAO,KAAK,UAAU,EAAE;AAC/B,YAAA,OAAO,SAAO,CAAC,gBAAgB,CAAC,UAAU,CAAC;QAC7C;AAEA,QAAA,OAAO,SAAO,CAAC,cAAc,CAAC,UAAU,CAAC;IAC3C;IAEQ,OAAO,cAAc,CAAC,UAAmC,EAAA;AAC/D,QAAA,OAAOC,CAAI,CAAA;mBACIC,CAAQ,CAAC,UAAU,CAAC,CAAA;;;;;;KAMlC;IACH;IAEQ,OAAO,gBAAgB,CAAC,UAAmC,EAAA;AACjE,QAAA,OAAOD,CAAI,CAAA;mBACIC,CAAQ,CAAC,UAAU,CAAC,CAAA;;;;;;;KAOlC;IACH;;AAtEO,OAAA,CAAA,MAAM,GAAG,CAACC,UAAM,EAAEC,QAAW,CAAC;AAQrC,UAAA,CAAA;IADCC,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AACC,CAAA,EAAA,OAAA,CAAA,SAAA,EAAA,SAAA,EAAA,MAAA,CAAA;AAQ1C,UAAA,CAAA;IADCA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AACa,CAAA,EAAA,OAAA,CAAA,SAAA,EAAA,aAAA,EAAA,MAAA,CAAA;AAStD,UAAA,CAAA;IADCA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AACI,CAAA,EAAA,OAAA,CAAA,SAAA,EAAA,MAAA,EAAA,MAAA,CAAA;AAM7C,UAAA,CAAA;IADCA,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;AAChB,CAAA,EAAA,OAAA,CAAA,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;AAhCf,OAAO,GAAA,SAAA,GAAA,UAAA,CAAA;IADnB;AACY,CAAA,EAAA,OAAO,CAwEnB;;;;"}
+{"version":3,"file":"toolbar.js","sources":["../../src/toolbar/toolbar.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport styles from './toolbar.scss';\nimport colorStyles from './toolbar-colors.scss';\n\n/**\n * @label Toolbar\n * @tag wc-toolbar\n * @rawTag toolbar\n *\n * @summary A toolbar / app bar for navigation and actions.\n * @overview\n * <p>The toolbar component implements the app bar pattern. It supports a\n * docked (attached) variant for bottom-panel navigation and a floating (detached pill-shaped)\n * variant. The floating variant supports both horizontal and vertical orientations.</p>\n *\n * <p>Render toolbar actions directly as children of the component. The docked variant is\n * optimized for a horizontal action row, while the floating variant supports both horizontal\n * and vertical layouts.</p>\n *\n * @cssprop --toolbar-container-color - Background color of the toolbar.\n * @cssprop --toolbar-container-shape - Border radius of the toolbar. Relevant for the floating variant.\n * @cssprop --toolbar-height - Height of the toolbar (docked horizontal / floating horizontal).\n * @cssprop --toolbar-padding-inline - Inline padding of the toolbar.\n * @cssprop --toolbar-gap - Gap between toolbar sections.\n * @cssprop --toolbar-icon-color - Color of icon slots.\n * @cssprop --toolbar-title-color - Color of the title (default slot) text.\n * @cssprop --toolbar-shadow - Box-shadow of the toolbar.\n *\n * @example\n * ```html\n * <!-- Docked toolbar -->\n * <wc-toolbar>\n *   <wc-icon-button variant=\"text\" color=\"surface\"><wc-icon name=\"home\"></wc-icon></wc-icon-button>\n *   <wc-icon-button variant=\"tonal\"><wc-icon name=\"search\"></wc-icon></wc-icon-button>\n *   <wc-icon-button variant=\"text\" color=\"surface\"><wc-icon name=\"favorite\"></wc-icon></wc-icon-button>\n *   <wc-icon-button variant=\"text\" color=\"surface\"><wc-icon name=\"account_circle\"></wc-icon></wc-icon-button>\n * </wc-toolbar>\n * ```\n *\n * @example\n * ```html\n * <!-- Floating horizontal toolbar -->\n * <wc-toolbar variant=\"floating\" orientation=\"horizontal\">\n *   <wc-icon-button variant=\"tonal\"><wc-icon name=\"home\"></wc-icon></wc-icon-button>\n *   <wc-icon-button variant=\"text\"><wc-icon name=\"search\"></wc-icon></wc-icon-button>\n *   <wc-icon-button variant=\"text\"><wc-icon name=\"favorite\"></wc-icon></wc-icon-button>\n * </wc-toolbar>\n * ```\n *\n * @example\n * ```html\n * <!-- Floating vertical toolbar -->\n * <wc-toolbar variant=\"floating\" orientation=\"vertical\">\n *   <wc-icon-button variant=\"tonal\"><wc-icon name=\"home\"></wc-icon></wc-icon-button>\n *   <wc-icon-button variant=\"text\"><wc-icon name=\"search\"></wc-icon></wc-icon-button>\n *   <wc-icon-button variant=\"text\"><wc-icon name=\"favorite\"></wc-icon></wc-icon-button>\n * </wc-toolbar>\n * ```\n * @tags display navigation\n */\n@IndividualComponent\nexport class Toolbar extends LitElement {\n  static styles = [styles, colorStyles];\n\n  /**\n   * Visual and layout variant of the toolbar.\n   * - `\"docked\"`: A full-width bar attached to the edge of the screen (default).\n   * - `\"floating\"`: A detached pill-shaped toolbar that floats over content.\n   */\n  @property({ type: String, reflect: true })\n  variant: 'docked' | 'floating' = 'docked';\n\n  /**\n   * Orientation of the toolbar content.\n   * - `\"horizontal\"`: Items are laid out left to right (default).\n   * - `\"vertical\"`: Items are stacked top to bottom. Primarily useful for the floating variant.\n   */\n  @property({ type: String, reflect: true })\n  orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  /**\n   * Size of the docked toolbar.\n    * - `\"small\"`: 80dp height (default).\n    * - `\"medium\"`: 96dp height.\n    * - `\"large\"`: 112dp height.\n   */\n  @property({ type: String, reflect: true })\n  size: 'small' | 'medium' | 'large' = 'small';\n\n  /**\n   * Whether the toolbar is visually elevated (adds a shadow).\n   */\n  @property({ type: Boolean, reflect: true })\n  elevated: boolean = false;\n\n  override render() {\n    const cssClasses = {\n      toolbar: true,\n      [`variant-${this.variant}`]: true,\n      [`orientation-${this.orientation}`]: true,\n      [`size-${this.size}`]: true,\n      elevated: this.elevated,\n    };\n\n    if (this.variant === 'floating') {\n      return Toolbar.__renderFloating(cssClasses);\n    }\n\n    return Toolbar.__renderDocked(cssClasses);\n  }\n\n  private static __renderDocked(cssClasses: Record<string, boolean>) {\n    return html`\n      <div class=${classMap(cssClasses)} role=\"toolbar\">\n        <div class=\"background\"></div>\n        <div class=\"toolbar-content\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  private static __renderFloating(cssClasses: Record<string, boolean>) {\n    return html`\n      <div class=${classMap(cssClasses)} role=\"toolbar\">\n        <wc-elevation class=\"elevation\"></wc-elevation>\n        <div class=\"background\"></div>\n        <div class=\"toolbar-content\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","html","classMap","styles","colorStyles","property"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuDG;AAEI,IAAM,OAAO,GAAA,SAAA,GAAb,MAAM,OAAQ,SAAQA,GAAU,CAAA;AAAhC,IAAA,WAAA,GAAA;;AAGL;;;;AAIG;QAEH,IAAA,CAAA,OAAO,GAA0B,QAAQ;AAEzC;;;;AAIG;QAEH,IAAA,CAAA,WAAW,GAA8B,YAAY;AAErD;;;;;AAKG;QAEH,IAAA,CAAA,IAAI,GAAiC,OAAO;AAE5C;;AAEG;QAEH,IAAA,CAAA,QAAQ,GAAY,KAAK;IAwC3B;IAtCW,MAAM,GAAA;AACb,QAAA,MAAM,UAAU,GAAG;AACjB,YAAA,OAAO,EAAE,IAAI;AACb,YAAA,CAAC,WAAW,IAAI,CAAC,OAAO,CAAA,CAAE,GAAG,IAAI;AACjC,YAAA,CAAC,eAAe,IAAI,CAAC,WAAW,CAAA,CAAE,GAAG,IAAI;AACzC,YAAA,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAA,CAAE,GAAG,IAAI;YAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB;AAED,QAAA,IAAI,IAAI,CAAC,OAAO,KAAK,UAAU,EAAE;AAC/B,YAAA,OAAO,SAAO,CAAC,gBAAgB,CAAC,UAAU,CAAC;QAC7C;AAEA,QAAA,OAAO,SAAO,CAAC,cAAc,CAAC,UAAU,CAAC;IAC3C;IAEQ,OAAO,cAAc,CAAC,UAAmC,EAAA;AAC/D,QAAA,OAAOC,CAAI,CAAA;mBACIC,CAAQ,CAAC,UAAU,CAAC,CAAA;;;;;;KAMlC;IACH;IAEQ,OAAO,gBAAgB,CAAC,UAAmC,EAAA;AACjE,QAAA,OAAOD,CAAI,CAAA;mBACIC,CAAQ,CAAC,UAAU,CAAC,CAAA;;;;;;;KAOlC;IACH;;AAtEO,OAAA,CAAA,MAAM,GAAG,CAACC,UAAM,EAAEC,QAAW,CAAC;AAQrC,UAAA,CAAA;IADCC,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AACC,CAAA,EAAA,OAAA,CAAA,SAAA,EAAA,SAAA,EAAA,MAAA,CAAA;AAQ1C,UAAA,CAAA;IADCA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AACa,CAAA,EAAA,OAAA,CAAA,SAAA,EAAA,aAAA,EAAA,MAAA,CAAA;AAStD,UAAA,CAAA;IADCA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AACI,CAAA,EAAA,OAAA,CAAA,SAAA,EAAA,MAAA,EAAA,MAAA,CAAA;AAM7C,UAAA,CAAA;IADCA,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;AAChB,CAAA,EAAA,OAAA,CAAA,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;AAhCf,OAAO,GAAA,SAAA,GAAA,UAAA,CAAA;IADnB;AACY,CAAA,EAAA,OAAO,CAwEnB;;;;"}

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