@duetds/components 9.4.2 → 9.5.0

package/lib/dist-custom-elements/{p-20670f23.js → p-4ed8da23.js}

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h } from './p-682759c1.js';
+import { p as proxyCustomElement, H, h } from './p-548610a6.js';
 import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
 import { s as sanitizeString } from './p-9c3c64b9.js';
 import { g as getColorByName } from './p-6e022235.js';
@@ -23,6 +23,7 @@ const DuetHeading = /*@__PURE__*/ proxyCustomElement(class DuetHeading extends H
         this.theme = "";
         this.hyphenate = false;
         this.fixedSize = false;
+        this.accessibleLabel = undefined;
     }
     /**
      * Component lifecycle events.
@@ -37,7 +38,7 @@ const DuetHeading = /*@__PURE__*/ proxyCustomElement(class DuetHeading extends H
     render() {
         const TagName = sanitizeString(this.level);
         const color = getColorByName(this.color);
-        return (h(TagName, { key: '9a91dd0a097a00c6412b6b759df13aaa814430e8', class: {
+        return (h(TagName, { key: 'fc35d12a14663418e76f8e17d41efd7fa1990638', class: {
                 "duet-heading": true,
                 "duet-heading-border": this.border !== false,
                 "duet-heading-border-solid": this.border === "solid",
@@ -48,7 +49,7 @@ const DuetHeading = /*@__PURE__*/ proxyCustomElement(class DuetHeading extends H
                 [this.visualLevel ? this.visualLevel : this.level]: true,
                 "duet-theme-turva": this.theme === "turva",
                 "fixed-size": this.fixedSize,
-            }, style: { color }, part: "duet-heading" }, h("slot", { key: '01f466dbadd345dac83e12dea63809ad46a70f2b' })));
+            }, "aria-label": this.accessibleLabel, style: { color }, part: "duet-heading" }, h("slot", { key: 'a6f73f221a78d15399456b9d861906f806725228' })));
     }
     get element() { return this; }
     static get style() { return DuetHeadingStyle0; }
@@ -61,7 +62,8 @@ const DuetHeading = /*@__PURE__*/ proxyCustomElement(class DuetHeading extends H
         "color": [1],
         "theme": [1025],
         "hyphenate": [4],
-        "fixedSize": [4, "fixed-size"]
+        "fixedSize": [4, "fixed-size"],
+        "accessibleLabel": [1, "accessible-label"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

package/lib/dist-custom-elements/{p-84a16ba6.js → p-52df4164.js}

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-682759c1.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-548610a6.js';
 import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
 import { g as getColorByName } from './p-6e022235.js';
 

package/lib/dist-custom-elements/{p-682759c1.js → p-548610a6.js}

@@ -3,7 +3,7 @@
  */
 const NAMESPACE = 'duet';
 const BUILD = /* duet */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: true, cmpDidUnload: false, cmpDidUpdate: true, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: true, cmpWillUpdate: false, connectedCallback: true, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: true, hostListenerTarget: true, hostListenerTargetBody: true, hostListenerTargetDocument: true, hostListenerTargetParent: false, hostListenerTargetWindow: true, hotModuleReplacement: false, hydrateClientSide: true, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", invisiblePrehydration: false, isDebug: false, isDev: false, isTesting: false, lazyLoad: false, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, scoped: true, scopedSlotTextContentFix: false, scriptDataOpts: true, shadowDelegatesFocus: true, shadowDom: true, slot: true, slotChildNodesFix: true, slotRelocation: true, state: true, style: true, svg: true, taskQueue: true, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: true, watchCallback: true };
-const Env = /* duet */ {"cdnURILocal":"http://localhost:3334","cdnURIProd":"https://cdn.duetds.com/api","duetIconVersion":"4.1.10"};
+const Env = /* duet */ {"cdnURILocal":"http://localhost:3334","cdnURIProd":"https://cdn.duetds.com/api","duetIconVersion":"4.1.11"};
 
 /*
  Stencil Client Platform v4.23.0 | MIT Licensed | https://stenciljs.com

package/lib/dist-custom-elements/{p-81287261.js → p-7327e3d5.js}

@@ -1,6 +1,17 @@
 /*!
  * Built with Duet Design System
  */
+import { p as proxyCustomElement, H, h, d as Host } from './p-548610a6.js';
+import { m as media_query_medium, a as media_query_large } from './p-f6000a03.js';
+import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
+import { c as createID } from './p-5e59e970.js';
+import { b as isEscapeKey } from './p-8db11326.js';
+import { a as getLanguage, g as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './p-35375593.js';
+import { d as defineCustomElement$4 } from './p-4ccd7bcc.js';
+import { d as defineCustomElement$3 } from './p-da60c00a.js';
+import { d as defineCustomElement$2 } from './p-d01a8307.js';
+import { d as defineCustomElement$1 } from './p-39b87412.js';
+
 /**
  * Custom positioning reference element.
  * @see https://floating-ui.com/docs/virtual-elements
@@ -1345,4 +1356,256 @@ const computePosition = (reference, floating, options) => {
   });
 };
 
-export { arrow as a, autoUpdate as b, computePosition as c, flip as f, offset as o, shift as s };
+const duetTooltipCss = "*.sc-duet-tooltip,*.sc-duet-tooltip::after,*.sc-duet-tooltip::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.sc-duet-tooltip-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;z-index:200;display:inline-flex;width:auto;margin-top:-16px !important;margin-left:-3px !important;-webkit-tap-highlight-color:transparent}duet-tooltip-button.sc-duet-tooltip{position:relative}duet-tooltip-popup.sc-duet-tooltip{position:absolute}";
+const DuetTooltipStyle0 = duetTooltipCss;
+
+const DuetTooltip = /*@__PURE__*/ proxyCustomElement(class DuetTooltip extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        /**
+         * Own Properties.
+         */
+        this.mql = [
+            window.matchMedia(media_query_medium.replace(/'/g, "")),
+            window.matchMedia(media_query_large.replace(/'/g, "")),
+        ];
+        this.tooltipId = createID("DuetTooltip");
+        this.aboutString = {
+            fi: "aiheesta",
+            en: "about",
+            sv: "om",
+        };
+        /**
+         * Local methods
+         */
+        this.openTooltip = () => {
+            this.active = true;
+            setTimeout(() => {
+                this.contentEl.focus({ preventScroll: true });
+                this.buttonActive = true;
+            }, 200);
+        };
+        this.closeTooltip = (moveFocusToButton = false) => {
+            this.active = false;
+            if (moveFocusToButton) {
+                setTimeout(() => {
+                    this.buttonEl.setFocus({ preventScroll: true });
+                }, 200);
+            }
+            setTimeout(() => {
+                this.buttonActive = false;
+            });
+            setTimeout(() => {
+                this.updatePlacement();
+            }, 200);
+        };
+        this.toggleOpen = () => {
+            this.active ? this.closeTooltip() : this.openTooltip();
+        };
+        this.updatePlacement = async () => {
+            var _a, _b;
+            let preferRight = true;
+            if (this.breakpoint === "large" && !this.mql[1].matches) {
+                preferRight = false;
+            }
+            else if (this.breakpoint === "medium" && !this.mql[0].matches) {
+                preferRight = false;
+            }
+            let placement = preferRight ? "top-start" : "top-end";
+            if (this.direction === "left") {
+                placement = "top-end";
+            }
+            else if (this.direction === "right") {
+                placement = "top-start";
+            }
+            const position = await computePosition(this.buttonEl, this.popupElement, {
+                placement,
+                middleware: [flip(), shift({ padding: 5 }), arrow({ element: this.arrowEl })],
+            });
+            this.tooltipY = position.y;
+            this.tooltipX = position.x;
+            this.placement = position.placement;
+            this.arrowY = (_a = position.middlewareData.arrow) === null || _a === void 0 ? void 0 : _a.y;
+            this.arrowX = (_b = position.middlewareData.arrow) === null || _b === void 0 ? void 0 : _b.x;
+        };
+        this.placement = "bottom";
+        this.tooltipY = undefined;
+        this.tooltipX = undefined;
+        this.arrowX = undefined;
+        this.arrowY = undefined;
+        this.buttonActive = undefined;
+        this.theme = "";
+        this.language = getLanguage();
+        this.accessibleLabelDefault = {
+            fi: "Näytä lisätietoja",
+            en: "Show more information",
+            sv: "Visa mer tilläggsuppgifter",
+        };
+        this.accessibleLabel = getLocaleString(this.accessibleLabelDefault, this.language);
+        this.accessibleAboutLabel = undefined;
+        this.accessibleInputLabel = undefined;
+        this.accessibleCloseLabelDefault = {
+            fi: "Sulje lisätiedot",
+            en: "Close details",
+            sv: "Stäng tilläggsuppgifter",
+        };
+        this.accessibleCloseLabel = getLocaleString(this.accessibleCloseLabelDefault, this.language);
+        this.label = "";
+        this.breakpoint = "medium";
+        this.direction = "auto";
+        this.positionVertical = "0";
+        this.positionHorizontal = "0";
+        this.active = false;
+        this.negative = false;
+    }
+    /**
+     * Component lifecycle events.
+     */
+    componentWillLoad() {
+        inheritGlobalTheme(this);
+        this.buttonActive = this.active;
+    }
+    async componentDidLoad() {
+        this.arrowEl = await this.popupElement.getArrowElement();
+        this.contentEl = await this.popupElement.getContentElement();
+        this.updatePlacement();
+        if (this.active) {
+            this.openTooltip();
+            await this.handleActiveChange(this.active);
+        }
+        this.intersectionObserver = new IntersectionObserver(this.updatePlacement, { root: document.body });
+        this.intersectionObserver.observe(this.element);
+    }
+    connectedCallback() {
+        connectLanguageChangeObserver(this, [
+            { prop: "accessibleLabel", defaults: "accessibleLabelDefault" },
+            { prop: "accessibleCloseLabel", defaults: "accessibleCloseLabelDefault" },
+        ]);
+    }
+    disconnectedCallback() {
+        disconnectLanguageChangeObserver(this);
+    }
+    handleDocumentClick(e) {
+        if (!this.active) {
+            return;
+        }
+        const path = e.composedPath();
+        const isClickOutside = path.every(el => el !== this.element && el !== this.contentEl);
+        if (isClickOutside) {
+            this.closeTooltip();
+        }
+    }
+    handleKeyDown(e) {
+        if (this.active && isEscapeKey(e)) {
+            this.closeTooltip(true);
+        }
+    }
+    handlePopupClose() {
+        if (this.active) {
+            this.closeTooltip(true);
+        }
+    }
+    async handleActiveChange(newActiveValue) {
+        if (newActiveValue) {
+            this.autoUpdateCleanup = autoUpdate(this.buttonEl, this.popupElement, this.updatePlacement);
+        }
+        else {
+            this.autoUpdateCleanup();
+        }
+    }
+    /**
+     * render() function.
+     * Always the last one in the class.
+     */
+    render() {
+        const tooltipStyles = {
+            transform: `translateY(${this.positionVertical}) translateX(${this.positionHorizontal})`,
+            // This is needed to that the active tooltip stacks on
+            // top of other tooltips and the header.
+            zIndex: this.active ? "201" : "",
+        };
+        const popupContainerStyles = {
+            position: "relative",
+            overflow: this.active ? "visible" : "hidden",
+        };
+        const positionStyles = {
+            top: `${this.tooltipY}px`,
+            left: `${this.tooltipX}px`,
+            display: "block",
+            "pointer-events": this.active ? "auto" : "none",
+        };
+        const arrowStyles = {
+            top: this.arrowY ? `${this.arrowY}px` : undefined,
+            left: this.arrowX ? `${this.arrowX}px` : undefined,
+        };
+        return (h(Host, { style: tooltipStyles }, h("duet-tooltip-button", { ref: element => (this.buttonEl = element), active: this.buttonActive, tooltipId: this.tooltipId, label: this.label, accessibleLabel: (this.accessibleInputLabel && `${this.accessibleInputLabel}, ${this.accessibleLabel}`) ||
+                (this.accessibleAboutLabel &&
+                    `${this.accessibleLabel} ${this.aboutString[this.language]} ${this.accessibleAboutLabel}`) ||
+                this.accessibleLabel, onClick: this.toggleOpen, theme: this.theme, negative: this.negative }), h("div", { style: popupContainerStyles }, h("duet-tooltip-popup", { ref: element => (this.popupElement = element), active: this.active, tooltipId: this.tooltipId, arrowStyles: arrowStyles, style: positionStyles, placement: this.placement, accessibleCloseLabel: this.accessibleCloseLabel, theme: this.theme }, h("slot", null)))));
+    }
+    get element() { return this; }
+    static get watchers() { return {
+        "active": ["handleActiveChange"]
+    }; }
+    static get style() { return DuetTooltipStyle0; }
+}, [6, "duet-tooltip", {
+        "theme": [1025],
+        "language": [1025],
+        "accessibleLabelDefault": [1, "accessible-label-default"],
+        "accessibleLabel": [1025, "accessible-label"],
+        "accessibleAboutLabel": [1, "accessible-about-label"],
+        "accessibleInputLabel": [1, "accessible-input-label"],
+        "accessibleCloseLabelDefault": [1, "accessible-close-label-default"],
+        "accessibleCloseLabel": [1025, "accessible-close-label"],
+        "label": [1],
+        "breakpoint": [1],
+        "direction": [1],
+        "positionVertical": [513, "position-vertical"],
+        "positionHorizontal": [513, "position-horizontal"],
+        "active": [1540],
+        "negative": [4],
+        "placement": [32],
+        "tooltipY": [32],
+        "tooltipX": [32],
+        "arrowX": [32],
+        "arrowY": [32],
+        "buttonActive": [32]
+    }, [[4, "click", "handleDocumentClick"], [4, "keydown", "handleKeyDown"], [4, "tooltipPopupClosed", "handlePopupClose"]], {
+        "active": ["handleActiveChange"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["duet-tooltip", "duet-icon", "duet-tooltip-button", "duet-tooltip-popup", "duet-visually-hidden"];
+    components.forEach(tagName => { switch (tagName) {
+        case "duet-tooltip":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DuetTooltip);
+            }
+            break;
+        case "duet-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "duet-tooltip-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "duet-tooltip-popup":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "duet-visually-hidden":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { DuetTooltip as D, autoUpdate as a, computePosition as c, defineCustomElement as d, flip as f, offset as o, shift as s };

package/lib/dist-custom-elements/{p-eb8c49d0.js → p-76415eb2.js}

@@ -1,9 +1,9 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-682759c1.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-548610a6.js';
 import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
-import { d as defineCustomElement$1 } from './p-e40f6f72.js';
+import { d as defineCustomElement$1 } from './p-4ccd7bcc.js';
 
 const duetEmptyStateCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:block;width:100%;height:100%}.duet-empty-state{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;width:100%;height:100%;padding:48px;color:rgb(8, 42, 77);text-align:center;background:rgb(245, 248, 250);border-radius:4px}.duet-empty-state.duet-theme-turva{color:rgb(23, 28, 58);background:rgb(245, 247, 250)}";
 const DuetEmptyStateStyle0 = duetEmptyStateCss;
@@ -28,11 +28,11 @@ const DuetEmptyState = /*@__PURE__*/ proxyCustomElement(class DuetEmptyState ext
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '227d54f00e9a51140efcb258a3b9aabd0403e53c' }, h("div", { key: 'ec272041ba4a302da9529e32cd67fc782102a783', class: {
+        return (h(Host, { key: '15bccd2c13aab1465840c9dcc4318b7a112edf7b' }, h("div", { key: '5952a98691e9c06ae16439f6411ae635f61d3db4', class: {
                 "duet-empty-state": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-is-small": this.size === "small",
-            } }, h("duet-icon", { key: '0a04c1df954274e9e5371101e9756eafacfc803c', color: "currentColor", name: this.icon, size: this.size === "small" ? "large" : "x-large" }), h("div", { key: 'be984ad3dd5092ed1ae6207f72e383cd4398cdc4' }, h("slot", { key: '440fab721d208b694cab78140c322242812e708f' })))));
+            } }, h("duet-icon", { key: '7b46aa60033f7777c3e606baa4d548dfb46d4c9c', color: "currentColor", name: this.icon, size: this.size === "small" ? "large" : "x-large" }), h("div", { key: '0e58a4fea54cfd7cab1f5b611e5e076c03ffffe4' }, h("slot", { key: '57378c8bb666cb31a04d0199c910ecf4b49b402f' })))));
     }
     get element() { return this; }
     static get style() { return DuetEmptyStateStyle0; }

package/lib/dist-custom-elements/{p-43578452.js → p-76f76fab.js}

@@ -1,13 +1,24 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-682759c1.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-548610a6.js';
 import { s as spaceXSmall } from './p-4c179c1e.js';
-import { o as offset, f as flip, s as shift, c as computePosition, b as autoUpdate } from './p-81287261.js';
+import { o as offset, f as flip, s as shift, c as computePosition, a as autoUpdate, d as defineCustomElement$4 } from './p-7327e3d5.js';
 import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
 import { f as focusElement } from './p-e30dc66d.js';
-import { b as isEscapeKey, g as isArrowDownKey, f as isArrowUpKey, d as isTabKey } from './p-8db11326.js';
+import { g as isArrowDownKey, b as isEscapeKey, f as isArrowUpKey, d as isTabKey } from './p-8db11326.js';
+import { a as getLanguage } from './p-35375593.js';
 import { T as Teleport } from './p-ca3cb21e.js';
+import { d as defineCustomElement$b } from './p-87df2d6e.js';
+import { d as defineCustomElement$a } from './p-ed6a907e.js';
+import { d as defineCustomElement$9 } from './p-4ccd7bcc.js';
+import { d as defineCustomElement$8 } from './p-fc9e69ed.js';
+import { d as defineCustomElement$7 } from './p-52df4164.js';
+import { d as defineCustomElement$6 } from './p-b8bae8c7.js';
+import { d as defineCustomElement$5 } from './p-2ecca38c.js';
+import { d as defineCustomElement$3 } from './p-da60c00a.js';
+import { d as defineCustomElement$2 } from './p-d01a8307.js';
+import { d as defineCustomElement$1 } from './p-39b87412.js';
 
 const duetPopupMenuCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.duet-popup-menu-list{position:absolute;top:0;left:0;z-index:950;width:max-content;min-width:175px;padding:8px;margin:0;color:rgb(8, 42, 77);list-style:none;visibility:hidden !important;background:rgb(255, 255, 255);border-radius:8px;box-shadow:0 0 0 1px rgba(0, 0, 0, 0.07), 0 4px 10px 0 rgba(0, 41, 77, 0.15);opacity:0;transition:transform 300ms ease, visibility 300ms ease, opacity 300ms ease;transform:scaleY(0);transform-origin:top center}.duet-popup-menu-list.open{visibility:visible !important;opacity:1;transform:scaleY(1)}.duet-popup-menu-list.fixed{position:fixed}.duet-popup-menu-list.scroll-visible{overflow-y:scroll;scroll-margin:20px}.duet-popup-menu-list.duet-theme-turva{color:rgb(23, 28, 58) !important;background:rgb(255, 255, 255)}::slotted(duet-notification){max-width:360px}";
 const DuetPopupMenuStyle0 = duetPopupMenuCss;
@@ -18,6 +29,11 @@ const DuetPopupMenu = /*@__PURE__*/ proxyCustomElement(class DuetPopupMenu exten
         this.__registerHost();
         this.__attachShadow();
         this.duetToggle = createEvent(this, "duetToggle", 7);
+        this.filterLabel = {
+            en: "Filter menu",
+            fi: "Suodata valikkoa",
+            sv: "Filtrera meny",
+        };
         this.setOpenButton = (element) => {
             if (!element) {
                 return;
@@ -53,9 +69,32 @@ const DuetPopupMenu = /*@__PURE__*/ proxyCustomElement(class DuetPopupMenu exten
             this.menuY = coordinates.y;
             this.menuX = coordinates.x;
         };
+        this.getNonFilteredItems = () => {
+            return this.showFilterInput ? this.itemElements.filter(i => i.style.display !== "none") : this.itemElements;
+        };
+        this.filterItems = () => {
+            var _a;
+            const filterText = (_a = this.filterInput.value) === null || _a === void 0 ? void 0 : _a.toLocaleLowerCase();
+            const items = this.itemElements;
+            items.forEach(item => {
+                item.style.display =
+                    !filterText ||
+                        item.textContent.toLowerCase().includes(filterText) ||
+                        item.value.toLowerCase().includes(filterText)
+                        ? ""
+                        : "none";
+            });
+        };
+        this.handleKeyDownOnFilter = (ev) => {
+            var _a;
+            if (isArrowDownKey(ev)) {
+                (_a = this.getNonFilteredItems()[0]) === null || _a === void 0 ? void 0 : _a.setFocus();
+            }
+        };
         this.open = false;
         this.menuY = undefined;
         this.menuX = undefined;
+        this.language = getLanguage();
         this.accessibleLabel = undefined;
         this.accessibleRole = "menu";
         this.theme = "";
@@ -68,6 +107,7 @@ const DuetPopupMenu = /*@__PURE__*/ proxyCustomElement(class DuetPopupMenu exten
         this.crossAxisOffset = 0;
         this.controllerIcon = "action-arrow-down-small";
         this.scrollLimit = undefined;
+        this.showFilterInput = undefined;
     }
     /**
      * Element, or id of an element, that controls the opening and closing of the popup menu. If id is given,
@@ -142,16 +182,17 @@ const DuetPopupMenu = /*@__PURE__*/ proxyCustomElement(class DuetPopupMenu exten
         }
     }
     async handleKeyDown(evt) {
+        const items = this.getNonFilteredItems();
         if (this.open) {
             if (isArrowDownKey(evt)) {
                 evt.preventDefault();
                 const current = await this.getFocusedItemIndex();
                 if (current !== -1) {
-                    if (current < this.itemElements.length - 1) {
-                        this.itemElements[current + 1].setFocus();
+                    if (current < items.length - 1) {
+                        items[current + 1].setFocus();
                     }
                     else {
-                        this.itemElements[0].setFocus();
+                        items[0].setFocus();
                     }
                 }
             }
@@ -160,10 +201,15 @@ const DuetPopupMenu = /*@__PURE__*/ proxyCustomElement(class DuetPopupMenu exten
                 const current = await this.getFocusedItemIndex();
                 if (current !== -1) {
                     if (current === 0) {
-                        this.itemElements[this.itemElements.length - 1].setFocus();
+                        if (this.showFilterInput) {
+                            this.filterInput.setFocus();
+                        }
+                        else {
+                            items[items.length - 1].setFocus();
+                        }
                     }
                     else {
-                        this.itemElements[current - 1].setFocus();
+                        items[current - 1].setFocus();
                     }
                 }
             }
@@ -227,6 +273,10 @@ const DuetPopupMenu = /*@__PURE__*/ proxyCustomElement(class DuetPopupMenu exten
             if (this.menuElement && this.openButton) {
                 this.autoUpdateCleanup = autoUpdate(this.openButton, this.menuElement, this.updatePlacement);
             }
+            if (this.showFilterInput) {
+                this.filterInput.value = "";
+                this.filterItems();
+            }
             setTimeout(() => {
                 if (this.accessibleRole === "menu") {
                     this.itemElements[0].setFocus();
@@ -268,7 +318,7 @@ const DuetPopupMenu = /*@__PURE__*/ proxyCustomElement(class DuetPopupMenu exten
         }
     }
     async getFocusedItemIndex() {
-        const items = this.itemElements;
+        const items = this.getNonFilteredItems();
         for (let i = 0; i < items.length; i++) {
             if (await items[i].isFocused()) {
                 return i;
@@ -284,14 +334,14 @@ const DuetPopupMenu = /*@__PURE__*/ proxyCustomElement(class DuetPopupMenu exten
             overflowY: "auto",
             height: this.popupMenuStyleHeight,
         };
-        return (h(Host, { key: 'df95a1ca83bfed0e3c2e62e4de9a03563491b7a4' }, h("div", { key: '0da0cb7b5bf6b0950b867af9d93a8937d40c4223', ref: element => {
+        return (h(Host, { key: '245da481a4c3ac550648005777f7f7724c8e7806' }, h("div", { key: '17069b93e411e4f951dcf4f591aacf90a0fcf7ec', ref: element => {
                 this.menuElement = element;
             }, style: styles, class: {
                 open: this.open,
                 "duet-popup-menu-list": true,
                 "duet-theme-turva": this.theme === "turva",
                 "scroll-visible": this.scrollLimit < this.itemElements.length,
-            }, role: this.accessibleRole, "aria-label": this.accessibleLabel }, h("slot", { key: 'f2e56ae51be1d5eb1b8c14a67496079e3dbcd3d1' }))));
+            }, role: this.accessibleRole, "aria-label": this.accessibleLabel }, this.showFilterInput && (h("div", { key: '24e126dbabf9089b5d3bed8d20c4a2d727531a0e' }, h("duet-input", { key: '719101f79b6678a0e7b28694e2c630e902f58bb2', ref: el => (this.filterInput = el), label: this.filterLabel[this.language], "label-hidden": true, expand: true, margin: "none", type: "search", onDuetInput: this.filterItems, onKeyDown: this.handleKeyDownOnFilter }), h("duet-spacer", { key: 'c49e9178d065230acbc63f163b9b31dfa53a56ae', size: "xx-small" }))), h("slot", { key: 'd6e2cbd68cd5f5961d5c486a974b72083f2cbae0' }))));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -313,9 +363,11 @@ const DuetPopupMenu = /*@__PURE__*/ proxyCustomElement(class DuetPopupMenu exten
         "crossAxisOffset": [2, "cross-axis-offset"],
         "controllerIcon": [1, "controller-icon"],
         "scrollLimit": [2, "scroll-limit"],
+        "showFilterInput": [4, "show-filter-input"],
         "open": [32],
         "menuY": [32],
         "menuX": [32],
+        "language": [32],
         "isOpen": [64],
         "show": [64],
         "hide": [64],
@@ -327,13 +379,68 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["duet-popup-menu"];
+    const components = ["duet-popup-menu", "duet-button", "duet-caption", "duet-icon", "duet-input", "duet-label", "duet-spacer", "duet-spinner", "duet-tooltip", "duet-tooltip-button", "duet-tooltip-popup", "duet-visually-hidden"];
     components.forEach(tagName => { switch (tagName) {
         case "duet-popup-menu":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, DuetPopupMenu);
             }
             break;
+        case "duet-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "duet-caption":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "duet-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "duet-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "duet-label":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "duet-spacer":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "duet-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "duet-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "duet-tooltip-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "duet-tooltip-popup":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "duet-visually-hidden":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
     } });
 }
 

package/lib/dist-custom-elements/{p-8c206875.js → p-7b74fee9.js}

@@ -1,15 +1,15 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-682759c1.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-548610a6.js';
 import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
 import { c as createID } from './p-5e59e970.js';
 import { d as debounce } from './p-9e371678.js';
 import { i as isKeyboardClick } from './p-8db11326.js';
 import { g as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './p-35375593.js';
 import { c as capitalizeFirstLetter, g as getColorByName, s as shadeRGBColor } from './p-6e022235.js';
-import { d as defineCustomElement$2 } from './p-e40f6f72.js';
-import { d as defineCustomElement$1 } from './p-2218a02d.js';
+import { d as defineCustomElement$2 } from './p-4ccd7bcc.js';
+import { d as defineCustomElement$1 } from './p-39b87412.js';
 
 const duetActionButtonCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:inline-block;margin:0 auto}.duet-action-button{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;min-height:auto !important;padding:0 !important;margin:0 0 0 8px;color:rgb(8, 42, 77);white-space:nowrap;cursor:pointer;background:rgb(245, 248, 250);border-radius:50%;transition:background-color 300ms ease !important}.duet-action-button.duet-theme-turva{color:rgb(23, 28, 58);background:rgb(245, 247, 250)}.duet-action-button duet-icon{display:block}@media (max-width: 35.9375em){.duet-action-button{width:32px;height:32px}}.duet-action-button:not(:disabled):hover{background:#e9ecee}.duet-action-button:not(:disabled):hover.duet-theme-turva{background:#e9ebee}.duet-action-button:focus{outline:0;box-shadow:0 0 0 2px #0077b3 !important}.duet-action-button:focus.duet-theme-turva{box-shadow:0 0 0 2px #171c3a !important}.duet-action-button:active:focus{background:#dddfe1 !important;box-shadow:none}.duet-action-button:active:focus.duet-theme-turva{background:#dddee1 !important}.duet-action-button:disabled{color:rgb(127, 150, 165);cursor:default;background:rgb(245, 248, 250);opacity:0.75}.duet-action-button.duet-theme-turva:disabled{color:rgb(143, 147, 158);background:rgb(245, 247, 250)}";
 const DuetActionButtonStyle0 = duetActionButtonCss;