@redvars/peacock 3.8.0 → 3.8.2

package/dist/src/table/table.d.ts

@@ -88,10 +88,15 @@ export declare class Table extends LitElement {
      * Description text shown when the table has no data.
      */
     emptyStateDescription: string;
+    /** Tracks the currently hovered row and column for hover-highlight CSS. */
     private hoveredCell;
+    /** True when all rows on the current page are selected. */
     private isSelectAll;
+    /** True when some (but not all) rows on the current page are selected. */
     private isSelectAllIntermediate;
+    /** True when the scroll container has been scrolled horizontally. */
     private isHorizontallyScrolled;
+    /** Throttled version of the cell-mouseover handler to avoid excessive state updates. */
     private onCellMouseOverThrottled;
     private onSelectAllClick;
     private onRowSelectClick;

package/dist/src/tabs/tab.d.ts

@@ -31,17 +31,13 @@ export declare class Tab extends LitElement {
     target: string;
     href?: string;
     /**
-     * Sets the delay for throttle in milliseconds. Defaults to 200 milliseconds.
+     * Sets the delay for throttle in milliseconds. When null (default), no throttle is applied.
      */
-    throttleDelay: number;
+    throttleDelay?: number;
     hasFocus: boolean;
     slotHasContent: boolean;
     slotHasIcon: boolean;
     slotHasBadge: boolean;
-    /**
-     * States
-     */
-    isPressed: boolean;
     private _tabindex;
     readonly tabElement: HTMLElement | null;
     focus(): void;
@@ -50,7 +46,6 @@ export declare class Tab extends LitElement {
     firstUpdated(): void;
     __dispatchClickWithThrottle: (event: MouseEvent | KeyboardEvent) => void;
     __dispatchClick: (event: MouseEvent | KeyboardEvent) => void;
-    __handlePress: (event: KeyboardEvent | MouseEvent) => void;
     __getParentTabsVariant(): Tabs['variant'];
     render(): import("lit-html").TemplateResult<1>;
     renderTabContent(variant: Tabs['variant']): import("lit-html").TemplateResult<1>;

package/dist/src/toolbar/toolbar.d.ts

@@ -4,9 +4,9 @@ import { LitElement } from 'lit';
  * @tag wc-toolbar
  * @rawTag toolbar
  *
- * @summary A Material 3 toolbar / app bar for navigation and actions.
+ * @summary A toolbar / app bar for navigation and actions.
  * @overview
- * <p>The toolbar component implements the Material 3 app bar pattern. It supports a
+ * <p>The toolbar component implements the app bar pattern. It supports a
  * docked (attached) variant for bottom-panel navigation and a floating (detached pill-shaped)
  * variant. The floating variant supports both horizontal and vertical orientations.</p>
  *

package/dist/{state-DwbEjqVk.js → state-DkTK9EGF.js}

@@ -1,4 +1,4 @@
-import { n } from './property-1psGvXOq.js';
+import { n } from './property-B49QQ8pS.js';
 
 /**
  * @license
@@ -7,4 +7,4 @@ import { n } from './property-1psGvXOq.js';
  */function r(r){return n({...r,state:true,attribute:false})}
 
 export { r };
-//# sourceMappingURL=state-DwbEjqVk.js.map
+//# sourceMappingURL=state-DkTK9EGF.js.map

package/dist/{state-DwbEjqVk.js.map → state-DkTK9EGF.js.map}

@@ -1 +1 @@
-{"version":3,"file":"state-DwbEjqVk.js","sources":["../node_modules/@lit/reactive-element/decorators/state.js"],"sourcesContent":["import{property as t}from\"./property.js\";\n/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */function r(r){return t({...r,state:!0,attribute:!1})}export{r as state};\n//# sourceMappingURL=state.js.map\n"],"names":["t"],"mappings":";;AACA;AACA;AACA;AACA;AACA,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,OAAOA,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,IAAE,CAAC,SAAS,CAAC,KAAE,CAAC,CAAC;;;;","x_google_ignoreList":[0]}
+{"version":3,"file":"state-DkTK9EGF.js","sources":["../node_modules/@lit/reactive-element/decorators/state.js"],"sourcesContent":["import{property as t}from\"./property.js\";\n/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */function r(r){return t({...r,state:!0,attribute:!1})}export{r as state};\n//# sourceMappingURL=state.js.map\n"],"names":["t"],"mappings":";;AACA;AACA;AACA;AACA;AACA,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,OAAOA,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,IAAE,CAAC,SAAS,CAAC,KAAE,CAAC,CAAC;;;;","x_google_ignoreList":[0]}

package/dist/{style-map-DVmWOuYy.js → style-map-BQD5Et1D.js}

@@ -1,4 +1,4 @@
-import { E } from './IndividualComponent-DUINtMGK.js';
+import { E } from './IndividualComponent-Bdwyrvd6.js';
 import { e, i as i$1, t } from './directive-ZPhl09Yt.js';
 
 /**
@@ -8,4 +8,4 @@ import { e, i as i$1, t } from './directive-ZPhl09Yt.js';
  */const n="important",i=" !"+n,o=e(class extends i$1{constructor(t$1){if(super(t$1),t$1.type!==t.ATTRIBUTE||"style"!==t$1.name||t$1.strings?.length>2)throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.")}render(t){return Object.keys(t).reduce((e,r)=>{const s=t[r];return null==s?e:e+`${r=r.includes("-")?r:r.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,"-$&").toLowerCase()}:${s};`},"")}update(e,[r]){const{style:s}=e.element;if(void 0===this.ft)return this.ft=new Set(Object.keys(r)),this.render(r);for(const t of this.ft)null==r[t]&&(this.ft.delete(t),t.includes("-")?s.removeProperty(t):s[t]=null);for(const t in r){const e=r[t];if(null!=e){this.ft.add(t);const r="string"==typeof e&&e.endsWith(i);t.includes("-")||r?s.setProperty(t,r?e.slice(0,-11):e,r?n:""):s[t]=e;}}return E}});
 
 export { o };
-//# sourceMappingURL=style-map-DVmWOuYy.js.map
+//# sourceMappingURL=style-map-BQD5Et1D.js.map

package/dist/{style-map-DVmWOuYy.js.map → style-map-BQD5Et1D.js.map}

@@ -1 +1 @@
-{"version":3,"file":"style-map-DVmWOuYy.js","sources":["../node_modules/lit-html/directives/style-map.js"],"sourcesContent":["import{noChange as t}from\"../lit-html.js\";import{directive as e,Directive as r,PartType as s}from\"../directive.js\";\n/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */const n=\"important\",i=\" !\"+n,o=e(class extends r{constructor(t){if(super(t),t.type!==s.ATTRIBUTE||\"style\"!==t.name||t.strings?.length>2)throw Error(\"The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.\")}render(t){return Object.keys(t).reduce((e,r)=>{const s=t[r];return null==s?e:e+`${r=r.includes(\"-\")?r:r.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,\"-$&\").toLowerCase()}:${s};`},\"\")}update(e,[r]){const{style:s}=e.element;if(void 0===this.ft)return this.ft=new Set(Object.keys(r)),this.render(r);for(const t of this.ft)null==r[t]&&(this.ft.delete(t),t.includes(\"-\")?s.removeProperty(t):s[t]=null);for(const t in r){const e=r[t];if(null!=e){this.ft.add(t);const r=\"string\"==typeof e&&e.endsWith(i);t.includes(\"-\")||r?s.setProperty(t,r?e.slice(0,-11):e,r?n:\"\"):s[t]=e}}return t}});export{o as styleMap};\n//# sourceMappingURL=style-map.js.map\n"],"names":["r","t","s"],"mappings":";;;AACA;AACA;AACA;AACA;AACA,GAAQ,MAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,cAAcA,GAAC,CAAC,WAAW,CAACC,GAAC,CAAC,CAAC,GAAG,KAAK,CAACA,GAAC,CAAC,CAACA,GAAC,CAAC,IAAI,GAAGC,CAAC,CAAC,SAAS,EAAE,OAAO,GAAGD,GAAC,CAAC,IAAI,EAAEA,GAAC,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,KAAK,CAAC,4GAA4G,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,mCAAmC,CAAC,KAAK,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,IAAI,CAAC,EAAE,CAAC,IAAI,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,MAAM,CAAC,IAAI,IAAI,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,QAAQ,EAAE,OAAO,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAC,CAAC,CAAC,OAAOA,CAAC,CAAC,CAAC;;;;","x_google_ignoreList":[0]}
+{"version":3,"file":"style-map-BQD5Et1D.js","sources":["../node_modules/lit-html/directives/style-map.js"],"sourcesContent":["import{noChange as t}from\"../lit-html.js\";import{directive as e,Directive as r,PartType as s}from\"../directive.js\";\n/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */const n=\"important\",i=\" !\"+n,o=e(class extends r{constructor(t){if(super(t),t.type!==s.ATTRIBUTE||\"style\"!==t.name||t.strings?.length>2)throw Error(\"The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.\")}render(t){return Object.keys(t).reduce((e,r)=>{const s=t[r];return null==s?e:e+`${r=r.includes(\"-\")?r:r.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,\"-$&\").toLowerCase()}:${s};`},\"\")}update(e,[r]){const{style:s}=e.element;if(void 0===this.ft)return this.ft=new Set(Object.keys(r)),this.render(r);for(const t of this.ft)null==r[t]&&(this.ft.delete(t),t.includes(\"-\")?s.removeProperty(t):s[t]=null);for(const t in r){const e=r[t];if(null!=e){this.ft.add(t);const r=\"string\"==typeof e&&e.endsWith(i);t.includes(\"-\")||r?s.setProperty(t,r?e.slice(0,-11):e,r?n:\"\"):s[t]=e}}return t}});export{o as styleMap};\n//# sourceMappingURL=style-map.js.map\n"],"names":["r","t","s"],"mappings":";;;AACA;AACA;AACA;AACA;AACA,GAAQ,MAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,cAAcA,GAAC,CAAC,WAAW,CAACC,GAAC,CAAC,CAAC,GAAG,KAAK,CAACA,GAAC,CAAC,CAACA,GAAC,CAAC,IAAI,GAAGC,CAAC,CAAC,SAAS,EAAE,OAAO,GAAGD,GAAC,CAAC,IAAI,EAAEA,GAAC,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,KAAK,CAAC,4GAA4G,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,mCAAmC,CAAC,KAAK,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,IAAI,CAAC,EAAE,CAAC,IAAI,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,MAAM,CAAC,IAAI,IAAI,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,QAAQ,EAAE,OAAO,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAC,CAAC,CAAC,OAAOA,CAAC,CAAC,CAAC;;;;","x_google_ignoreList":[0]}

package/dist/sub-menu.js

@@ -0,0 +1,241 @@
+import { i, _ as __decorate, I as IndividualComponent, a as i$1, b } from './IndividualComponent-Bdwyrvd6.js';
+import { n } from './property-B49QQ8pS.js';
+import { o } from './query-assigned-elements-BJaGSqM0.js';
+import { MenuItem } from './menu-item.js';
+import { Menu } from './menu.js';
+import './base-Cl6v8-BZ.js';
+import './query-CHb9Ft_d.js';
+import './if-defined-BXZpRQ4P.js';
+import './NativeHyperlinkMixin-D9J4aBTy.js';
+import './state-DkTK9EGF.js';
+import './class-map-DG7CA1et.js';
+import './directive-ZPhl09Yt.js';
+import './floating-controller-CnUZnOhK.js';
+
+var css_248z = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+:host {
+  display: contents;
+}`;
+
+let subMenuIdCounter = 0;
+/**
+ * @label Sub Menu
+ * @tag wc-sub-menu
+ * @rawTag sub-menu
+ * @summary Connects a menu item to a nested menu.
+ */
+let SubMenu = class SubMenu extends i$1 {
+    constructor() {
+        super(...arguments);
+        this.hoverOpenDelay = 120;
+        this.hoverCloseDelay = 180;
+        this.anchorCorner = 'start-end';
+        this.menuCorner = 'start-start';
+        this._onChildMenuOpened = () => {
+            const { item } = this;
+            if (!item) {
+                return;
+            }
+            item.submenuOpen = true;
+            item.setAttribute('aria-expanded', 'true');
+        };
+        this._onChildMenuClosed = () => {
+            const { item } = this;
+            if (!item) {
+                return;
+            }
+            item.submenuOpen = false;
+            item.setAttribute('aria-expanded', 'false');
+        };
+        this._onSlotChange = () => {
+            const { item, menu } = this;
+            if (!item || !menu) {
+                return;
+            }
+            if (!menu.id) {
+                subMenuIdCounter += 1;
+                menu.id = `wc-sub-menu-${subMenuIdCounter}`;
+            }
+            item.keepOpen = true;
+            item.hasSubmenu = true;
+            item.submenuOpen = menu.open;
+            item.setAttribute('aria-haspopup', 'menu');
+            item.setAttribute('aria-expanded', String(menu.open));
+            item.setAttribute('aria-controls', menu.id);
+            menu.removeEventListener('opened', this._onChildMenuOpened);
+            menu.removeEventListener('closed', this._onChildMenuClosed);
+            menu.addEventListener('opened', this._onChildMenuOpened);
+            menu.addEventListener('closed', this._onChildMenuClosed);
+            menu.isSubmenu = true;
+            menu.anchorElement = this._resolveAnchorElement(item);
+            menu.placement =
+                getComputedStyle(this).direction === 'rtl' ? 'left-start' : 'right-start';
+            menu.offset = 4;
+        };
+        this._onItemClick = () => {
+            if (this.menu?.open) {
+                this.close();
+                return;
+            }
+            this.show();
+        };
+        this._onItemKeyDown = async (event) => {
+            const isRtl = getComputedStyle(this).direction === 'rtl';
+            const arrowEnter = isRtl ? 'ArrowLeft' : 'ArrowRight';
+            const shouldOpen = event.key === arrowEnter || event.key === 'Enter' || event.key === ' ';
+            if (!shouldOpen) {
+                return;
+            }
+            event.preventDefault();
+            if (event.key === arrowEnter) {
+                event.stopPropagation();
+            }
+            await this.show();
+            const firstItem = this.menu?.items.find(menuItem => !menuItem.disabled);
+            if (firstItem) {
+                firstItem.tabIndex = 0;
+                firstItem.focus();
+            }
+        };
+        this._onMenuKeyDown = async (event) => {
+            const isRtl = getComputedStyle(this).direction === 'rtl';
+            const arrowExit = isRtl ? 'ArrowRight' : 'ArrowLeft';
+            if (event.key !== 'Escape' && event.key !== arrowExit) {
+                return;
+            }
+            event.preventDefault();
+            event.stopPropagation();
+            await this.close();
+            const { item } = this;
+            if (item) {
+                item.tabIndex = 0;
+                item.focus();
+            }
+        };
+        this._onCloseMenu = async (event) => {
+            const { reason } = event.detail ?? {};
+            const { key } = reason ?? {};
+            if (reason?.kind === 'keydown' && key === 'Escape') {
+                event.stopPropagation();
+                await this.close();
+                this.item?.focus();
+            }
+        };
+        this._onMouseEnter = () => {
+            window.clearTimeout(this._closeTimeout);
+            this._openTimeout = window.setTimeout(() => {
+                this.show();
+            }, this.hoverOpenDelay);
+        };
+        this._onMouseLeave = (event) => {
+            const { relatedTarget: related } = event;
+            if (related instanceof Node && this.contains(related)) {
+                return;
+            }
+            window.clearTimeout(this._openTimeout);
+            this._closeTimeout = window.setTimeout(() => {
+                this.close();
+            }, this.hoverCloseDelay);
+        };
+    }
+    _resolveAnchorElement(item) {
+        //@ts-ignore
+        return item.itemElement?.itemElement ?? item.itemElement ?? item;
+    }
+    get item() {
+        const [candidate] = this._items ?? [];
+        return candidate instanceof MenuItem ? candidate : null;
+    }
+    get menu() {
+        const [candidate] = this._menus ?? [];
+        return candidate instanceof Menu ? candidate : null;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('mouseenter', this._onMouseEnter);
+        this.addEventListener('mouseleave', this._onMouseLeave);
+    }
+    disconnectedCallback() {
+        const { menu } = this;
+        menu?.removeEventListener('opened', this._onChildMenuOpened);
+        menu?.removeEventListener('closed', this._onChildMenuClosed);
+        this.removeEventListener('mouseenter', this._onMouseEnter);
+        this.removeEventListener('mouseleave', this._onMouseLeave);
+        window.clearTimeout(this._openTimeout);
+        window.clearTimeout(this._closeTimeout);
+        super.disconnectedCallback();
+    }
+    async show() {
+        const { item, menu } = this;
+        if (!item || !menu) {
+            return;
+        }
+        menu.anchorElement = this._resolveAnchorElement(item);
+        menu.isSubmenu = true;
+        menu.show();
+        item.hasSubmenu = true;
+        item.submenuOpen = true;
+        item.setAttribute('aria-expanded', 'true');
+    }
+    async close() {
+        const { item, menu } = this;
+        if (!item || !menu) {
+            return;
+        }
+        menu.close({ kind: 'programmatic' });
+        item.submenuOpen = false;
+        item.setAttribute('aria-expanded', 'false');
+    }
+    render() {
+        return b `
+      <slot
+        name="item"
+        @slotchange=${this._onSlotChange}
+        @click=${this._onItemClick}
+        @keydown=${this._onItemKeyDown}
+      ></slot>
+      <slot
+        name="menu"
+        @slotchange=${this._onSlotChange}
+        @close-menu=${this._onCloseMenu}
+        @keydown=${this._onMenuKeyDown}
+      ></slot>
+    `;
+    }
+};
+SubMenu.styles = [css_248z];
+__decorate([
+    n({ type: Number, attribute: 'hover-open-delay' })
+], SubMenu.prototype, "hoverOpenDelay", void 0);
+__decorate([
+    n({ type: Number, attribute: 'hover-close-delay' })
+], SubMenu.prototype, "hoverCloseDelay", void 0);
+__decorate([
+    n({ type: String, attribute: 'anchor-corner' })
+], SubMenu.prototype, "anchorCorner", void 0);
+__decorate([
+    n({ type: String, attribute: 'menu-corner' })
+], SubMenu.prototype, "menuCorner", void 0);
+__decorate([
+    o({ slot: 'item' })
+], SubMenu.prototype, "_items", void 0);
+__decorate([
+    o({ slot: 'menu' })
+], SubMenu.prototype, "_menus", void 0);
+SubMenu = __decorate([
+    IndividualComponent
+], SubMenu);
+
+export { SubMenu };
+//# sourceMappingURL=sub-menu.js.map

package/dist/sub-menu.js.map

@@ -0,0 +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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"}

package/dist/svg.js

@@ -0,0 +1,273 @@
+import { i, _ as __decorate, I as IndividualComponent, a as i$1, b } from './IndividualComponent-Bdwyrvd6.js';
+import { n } from './property-B49QQ8pS.js';
+import { r } from './state-DkTK9EGF.js';
+import { f as fetchSVG, s as sanitizeSvg, o } from './datasource-B2eRh6Or.js';
+import './directive-ZPhl09Yt.js';
+import './unsafe-html-Ct0N2_UU.js';
+
+var css_248z = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+:host {
+  display: inline-flex;
+  vertical-align: middle;
+  --svg-size: inherit;
+  --svg-color: inherit;
+}
+
+.svg-wrapper {
+  height: var(--svg-size, 1rem);
+  width: var(--svg-size, 1rem);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.svg-content {
+  height: 100%;
+  width: 100%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.svg-content svg {
+  fill: var(--svg-color);
+  height: 100%;
+  width: 100%;
+}
+
+.svg-content.clickable {
+  cursor: zoom-in;
+}
+
+.placeholder {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.preview-overlay {
+  display: none;
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  background: rgba(0, 0, 0, 0.85);
+  align-items: center;
+  justify-content: center;
+  cursor: zoom-out;
+}
+
+.preview-overlay.open {
+  display: flex;
+}
+
+.preview-close {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  background: transparent;
+  border: none;
+  color: #fff;
+  font-size: 1.5rem;
+  cursor: pointer;
+  line-height: 1;
+  padding: 0.25rem 0.5rem;
+}
+.preview-close:focus-visible {
+  outline: 2px solid #fff;
+  outline-offset: 2px;
+}
+
+.preview-content {
+  max-width: 90vw;
+  max-height: 90vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: default;
+}
+.preview-content svg {
+  max-width: 90vw;
+  max-height: 90vh;
+  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
+  border-radius: 4px;
+}`;
+
+/**
+ * @label SVG
+ * @tag wc-svg
+ * @rawTag svg
+ * @summary An SVG component with lazy loading and optional preview support.
+ * @overview Renders an inline SVG fetched from a URL, with lazy loading via IntersectionObserver and an optional click-to-preview lightbox.
+ *
+ * @cssprop --svg-color - Controls the fill color of the SVG.
+ * @cssprop [--svg-size=1rem] - Controls the size of the SVG. Defaults to "1rem"
+ *
+ * @example
+ * ```html
+ * <wc-svg src="/icons/my-icon.svg" image-title="My icon"></wc-svg>
+ * ```
+ */
+let Svg = class Svg extends i$1 {
+    constructor() {
+        super(...arguments);
+        /** URL of the SVG asset to fetch and render inline. */
+        this.src = '';
+        /** Accessible title / alt text for the SVG. */
+        this.imageTitle = '';
+        /** Enable click-to-preview lightbox. */
+        this.preview = false;
+        /** True once the element has entered the viewport and the SVG fetch has been initiated. */
+        this._loaded = false;
+        /** True when the lightbox preview overlay is visible. */
+        this._previewOpen = false;
+        /** Sanitized inline SVG markup ready for rendering. */
+        this._svgContent = '';
+        // ── Private fields ────────────────────────────────────────────────────────
+        /** Monotonically incrementing token used to discard stale fetch results. */
+        this._fetchId = 0;
+        /** IntersectionObserver that triggers the SVG fetch when the element enters the viewport. */
+        this._intersectionObserver = null;
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._intersectionObserver?.disconnect();
+    }
+    firstUpdated() {
+        this._setupIntersectionObserver();
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('src')) {
+            // Reset lazy-load state so the new src is fetched when visible
+            this._loaded = false;
+            this._svgContent = '';
+            this._setupIntersectionObserver();
+        }
+    }
+    _setupIntersectionObserver() {
+        this._intersectionObserver?.disconnect();
+        const wrapper = this.shadowRoot?.querySelector('.svg-wrapper');
+        if (!wrapper)
+            return;
+        this._intersectionObserver = new IntersectionObserver(entries => {
+            if (entries[0].isIntersecting) {
+                this._loaded = true;
+                this._intersectionObserver?.disconnect();
+                this._fetchSvg();
+            }
+        }, { rootMargin: '200px' });
+        this._intersectionObserver.observe(wrapper);
+    }
+    async _fetchSvg() {
+        if (!this.src)
+            return;
+        this._fetchId += 1;
+        const currentId = this._fetchId;
+        try {
+            const raw = await fetchSVG(this.src);
+            if (currentId !== this._fetchId)
+                return;
+            this._svgContent = raw ? sanitizeSvg(raw) : '';
+        }
+        catch {
+            if (currentId === this._fetchId) {
+                this._svgContent = '';
+            }
+        }
+    }
+    _handleClick() {
+        if (this.preview) {
+            this._previewOpen = true;
+            // Move focus into the dialog after render
+            this.updateComplete.then(() => {
+                const closeBtn = this.shadowRoot?.querySelector('.preview-close');
+                closeBtn?.focus();
+            });
+        }
+    }
+    _closePreview(e) {
+        e.stopPropagation();
+        const wasOpen = this._previewOpen;
+        this._previewOpen = false;
+        if (wasOpen) {
+            // Return focus to the trigger
+            const trigger = this.shadowRoot?.querySelector('.svg-content');
+            trigger?.focus();
+        }
+    }
+    render() {
+        return b `
+      <div class="svg-wrapper">
+        ${this._loaded && this._svgContent
+            ? b `<div
+              class="svg-content ${this.preview ? 'clickable' : ''}"
+              role=${this.imageTitle ? 'img' : 'presentation'}
+              aria-label=${this.imageTitle || ''}
+              @click=${this._handleClick}
+            >
+              ${o(this._svgContent)}
+            </div>`
+            : b `<span class="placeholder" aria-hidden="true"></span>`}
+      </div>
+
+      <div
+        class="preview-overlay ${this._previewOpen ? 'open' : ''}"
+        role="dialog"
+        aria-modal="true"
+        aria-label=${this.imageTitle
+            ? `Preview: ${this.imageTitle}`
+            : 'SVG preview'}
+        @click=${this._closePreview}
+        @keydown=${(e) => e.key === 'Escape' && this._closePreview(e)}
+      >
+        <button
+          class="preview-close"
+          aria-label="Close preview"
+          @click=${this._closePreview}
+        >
+          &#x2715;
+        </button>
+        <div
+          class="preview-content"
+          @click=${(e) => e.stopPropagation()}
+        >
+          ${o(this._svgContent)}
+        </div>
+      </div>
+    `;
+    }
+};
+Svg.styles = [css_248z];
+__decorate([
+    n({ type: String, reflect: true })
+], Svg.prototype, "src", void 0);
+__decorate([
+    n({ attribute: 'image-title' })
+], Svg.prototype, "imageTitle", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Svg.prototype, "preview", void 0);
+__decorate([
+    r()
+], Svg.prototype, "_loaded", void 0);
+__decorate([
+    r()
+], Svg.prototype, "_previewOpen", void 0);
+__decorate([
+    r()
+], Svg.prototype, "_svgContent", void 0);
+Svg = __decorate([
+    IndividualComponent
+], Svg);
+
+export { Svg };
+//# sourceMappingURL=svg.js.map