@duetds/components 9.1.1 → 9.2.0

package/lib/esm/{duet-chip.entry.js → duet-chip_3.entry.js}

@@ -1,10 +1,13 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-bbae2d5d.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-5d196317.js';
 import { i as inheritGlobalTheme } from './themeable-component-860041c5.js';
 import { c as createID } from './create-id-149a1b6d.js';
-import { s as subscribeTabbingChange, u as unsubscribeTabbingChange } from './keyboard-utils-439bcc8b.js';
+import { s as subscribeTabbingChange, u as unsubscribeTabbingChange, f as isEscapeKey, c as isArrowDownKey, b as isArrowUpKey, o as isTabKey } from './keyboard-utils-439bcc8b.js';
+import { o as offset, f as flip, c as computePosition } from './floating-ui.dom.esm-ebc91b33.js';
+import { f as focusElement } from './focus-utils-3e81bca4.js';
+import { T as Teleport } from './teleport-546f382d.js';
 
 const duetChipCss = "*,*::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;margin-right:8px !important;margin-bottom:12px !important;position:relative;display:inline-block;width:auto;max-width:100%;vertical-align:bottom;-webkit-tap-highlight-color:transparent}:host:last-child,:host:last-of-type{margin-right:0 !important}:host(.input){margin-top:6px !important;margin-right:0 !important;margin-bottom:6px !important;margin-left:4px !important}.duet-chip-container{-webkit-user-select:none;user-select:none;position:relative;z-index:100;display:block;width:100%;padding:1px;hyphens:none;line-height:1.1;color:rgb(0, 41, 77) !important;text-align:center;cursor:pointer;background:rgb(255, 255, 255);border-color:rgb(207, 210, 212);border-style:solid;border-width:1px;border-radius:8px;transition:background-color 300ms ease, color 300ms ease, border-color 300ms ease}.duet-chip-container.duet-p-0{padding:0 !important}.duet-chip-container.duet-m-0{margin:0 !important}.duet-chip-container.duet-theme-turva{color:rgb(23, 28, 58) !important;background:rgb(255, 255, 255);border-color:rgb(207, 207, 209)}.duet-chip-container.duet-theme-turva:hover{border-color:rgb(198, 12, 48)}.duet-chip-container:hover{padding:0 !important;border-color:rgb(0, 119, 179);border-width:2px}.duet-chip-container.duet-chip-disabled{color:rgb(101, 119, 135) !important;cursor:default;background:rgb(245, 248, 250) !important;border-color:rgb(245, 248, 250) !important}.duet-chip-container.duet-chip-disabled.duet-theme-turva{color:rgb(116, 116, 117) !important;background:rgb(245, 245, 247);border-color:rgb(245, 245, 247)}.duet-chip-container.duet-chip-disabled:hover{background:rgb(245, 248, 250);border-color:rgb(245, 248, 250)}.duet-chip-container.duet-chip-disabled:hover.duet-theme-turva{background:rgb(245, 245, 247);border-color:rgb(245, 245, 247)}.duet-chip-container.duet-chip-disabled button,.duet-chip-container.duet-chip-disabled label{cursor:default}.duet-chip-container button,.duet-chip-container label{display:flex;align-items:center;width:100%;height:100%;padding:8px 14px;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:0.875rem;font-weight:600;line-height:1rem;color:rgb(0, 41, 77) !important;cursor:pointer}.duet-chip-container button:focus,.duet-chip-container label:focus{outline:none}.duet-chip-container .duet-chip-icon-container{display:flex;align-items:center;height:16px;padding:0;transition:padding 300ms ease}.duet-chip-container.duet-chip-has-icon .duet-chip-icon-container{width:24px;height:16px;padding-right:10px}.duet-chip-container.duet-chip-has-icon.duet-chip-filter-checked .duet-chip-icon-container,.duet-chip-container.duet-chip-has-icon.duet-chip-radio-checked .duet-chip-icon-container{padding-right:11px;padding-left:3px}.duet-chip-container.duet-chip-has-icon button,.duet-chip-container.duet-chip-has-icon label{padding-left:10px}.duet-chip-container.duet-chip-has-popup button,.duet-chip-container.duet-chip-has-popup label{padding-right:8px}.duet-chip-container duet-icon:not(.check-mark){width:auto;visibility:visible;transition:width 300ms ease, transform 300ms ease;transform:scaleX(1)}.duet-chip-container duet-icon.check-mark{width:0;overflow:hidden;visibility:hidden;transition:width 300ms ease, transform 300ms ease;transform:scaleX(0)}.duet-chip-container.duet-chip-filter-checked,.duet-chip-container.duet-chip-radio-checked{padding:0 !important;background:rgb(230, 242, 248);border-color:rgb(0, 119, 179);border-width:2px}.duet-chip-container.duet-chip-filter-checked:hover,.duet-chip-container.duet-chip-radio-checked:hover{background:rgb(205, 229, 241)}.duet-chip-container.duet-chip-filter-checked.chip-has-icon button,.duet-chip-container.duet-chip-filter-checked.chip-has-icon label,.duet-chip-container.duet-chip-radio-checked.chip-has-icon button,.duet-chip-container.duet-chip-radio-checked.chip-has-icon label{padding-left:10px}.duet-chip-container.duet-chip-filter-checked .duet-chip-icon-container,.duet-chip-container.duet-chip-radio-checked .duet-chip-icon-container{padding-right:10px}.duet-chip-container.duet-chip-filter-checked .duet-chip-icon-container duet-icon:not(.check-mark),.duet-chip-container.duet-chip-radio-checked .duet-chip-icon-container duet-icon:not(.check-mark){width:0;overflow:hidden;visibility:hidden;transition:width 300ms ease, transform 300ms ease;transform:scaleX(0)}.duet-chip-container.duet-chip-filter-checked .duet-chip-icon-container duet-icon.check-mark,.duet-chip-container.duet-chip-radio-checked .duet-chip-icon-container duet-icon.check-mark{width:auto;visibility:visible;transition:width 300ms ease, transform 300ms ease;transform:scaleX(1)}.duet-chip-container.duet-chip-filter-checked.duet-theme-turva,.duet-chip-container.duet-chip-radio-checked.duet-theme-turva{background:rgb(245, 245, 247);border-color:rgb(198, 12, 48)}.duet-chip-container.duet-chip-filter-checked.duet-theme-turva:hover,.duet-chip-container.duet-chip-radio-checked.duet-theme-turva:hover{background:rgb(228, 228, 230)}.duet-chip-container .duet-chip-popup-disclosure{padding-right:4.5px;padding-left:12.5px}.duet-chip-container .duet-chip-popup-disclosure duet-icon{transition:transform 300ms ease}.duet-chip-container.duet-chip-filter-popup-open{background:rgb(243, 249, 252);border-color:rgb(243, 249, 252)}.duet-chip-container.duet-chip-filter-popup-open.duet-theme-turva{background:rgb(245, 245, 247);border-color:rgb(245, 245, 247)}.duet-chip-container.duet-chip-filter-popup-open .duet-chip-popup-disclosure duet-icon{transform:rotate(180deg)}.duet-chip-container.duet-chip-input{display:flex;align-items:center;padding-right:0 !important}.duet-chip-container.duet-chip-input .duet-chip-input-button{flex-grow:1}.duet-chip-container.duet-chip-input .duet-chip-remove-button{width:26px;padding:8px 16px 8px 0;margin:-8px 0}.duet-chip-container.large button,.duet-chip-container.large label{padding:15px 22px}:host(.user-is-tabbing) .duet-chip-focus{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}:host(.user-is-tabbing) .duet-chip-focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-chip-container input,*::slotted([slot=input]){position:absolute !important;top:0;left:0;z-index:-1;width:100%;height:100%;margin:0;cursor:pointer;border-width:2px;border-radius:8px;opacity:0;appearance:none}*::slotted([slot=input]:not([aria-disabled=true])){z-index:1}";
 const DuetChipStyle0 = duetChipCss;
@@ -283,4 +286,325 @@ const DuetChip = class {
 };
 DuetChip.style = DuetChipStyle0;
 
-export { DuetChip as duet_chip };
+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(0, 41, 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.duet-theme-turva{color:rgb(23, 28, 58) !important;background:rgb(255, 255, 255)}";
+const DuetPopupMenuStyle0 = duetPopupMenuCss;
+
+const DuetPopupMenu = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.duetToggle = createEvent(this, "duetToggle", 7);
+        this.setOpenButton = (element) => {
+            if (!element) {
+                return;
+            }
+            try {
+                const button = element;
+                button.accessiblePopup = "true";
+                button.accessibleExpanded = false;
+                if (this.controllerIcon) {
+                    button.setAttribute("trailing-icon", "action-arrow-down-small");
+                }
+                this.openButton = button;
+            }
+            catch (_e) { }
+        };
+        this.openButtonEventListener = () => {
+            this.toggle();
+        };
+        this.updatePlacement = async () => {
+            if (!this.openButton) {
+                return;
+            }
+            const middleware = [
+                offset({ mainAxis: this.mainAxisOffset, crossAxis: this.crossAxisOffset }),
+                flip({ mainAxis: !this.forcePlacement }),
+            ];
+            const coordinates = await computePosition(this.openButton, this.menuElement, {
+                middleware,
+                placement: this.placement,
+                strategy: this.position,
+            });
+            this.menuY = coordinates.y;
+            this.menuX = coordinates.x;
+        };
+        this.open = false;
+        this.menuY = undefined;
+        this.menuX = undefined;
+        this.accessibleLabel = undefined;
+        this.accessibleRole = "menu";
+        this.theme = "";
+        this.skipTeleport = undefined;
+        this.controller = undefined;
+        this.placement = "bottom-start";
+        this.forcePlacement = false;
+        this.position = "absolute";
+        this.mainAxisOffset = 0;
+        this.crossAxisOffset = 0;
+        this.controllerIcon = "action-arrow-down-small";
+    }
+    /**
+     * Component lifecycle events.
+     */
+    componentWillLoad() {
+        inheritGlobalTheme(this);
+    }
+    componentDidLoad() {
+        {
+            this.updatePlacement();
+        }
+    }
+    connectedCallback() {
+        this.handleControllerChange(this.controller, null);
+        if (!this.teleport) {
+            this.teleport = new Teleport(this.element);
+        }
+        if (this.teleport) {
+            this.teleport.activate();
+        }
+    }
+    disconnectedCallback() {
+        if (this.openButton) {
+            this.openButton.removeEventListener("click", this.openButtonEventListener);
+            if (this.controllerIcon) {
+                this.openButton.removeAttribute("trailing-icon");
+            }
+        }
+    }
+    /**
+     * Component event handling.
+     */
+    handleKeyUp(evt) {
+        if (this.open) {
+            // When Esc is pressed the menu should be closed
+            if (isEscapeKey(evt)) {
+                this.focusOpenButton();
+                this.hide();
+            }
+        }
+    }
+    async handleKeyDown(evt) {
+        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();
+                    }
+                    else {
+                        this.itemElements[0].setFocus();
+                    }
+                }
+            }
+            if (isArrowUpKey(evt)) {
+                evt.preventDefault();
+                const current = await this.getFocusedItemIndex();
+                if (current !== -1) {
+                    if (current === 0) {
+                        this.itemElements[this.itemElements.length - 1].setFocus();
+                    }
+                    else {
+                        this.itemElements[current - 1].setFocus();
+                    }
+                }
+            }
+            if (isTabKey(evt) && this.accessibleRole === "menu") {
+                evt.preventDefault();
+                this.hide();
+            }
+        }
+    }
+    handleClick(evt) {
+        const isClickOutside = evt.composedPath().every(node => node !== this.element && node !== this.openButton);
+        if (this.open && isClickOutside) {
+            this.hide();
+        }
+    }
+    /**
+     * isOpen.
+     */
+    async isOpen() {
+        return this.open;
+    }
+    /**
+     * Show.
+     */
+    async show() {
+        this.open = true;
+    }
+    /**
+     * Hide.
+     */
+    async hide() {
+        this.open = false;
+    }
+    /**
+     * Toggle.
+     */
+    async toggle() {
+        if (this.open) {
+            this.hide();
+        }
+        else {
+            this.show();
+        }
+    }
+    handleControllerChange(newValue, oldValue) {
+        if (!!newValue === !!oldValue) {
+            return;
+        }
+        if (typeof this.controller === "string") {
+            this.setOpenButton(document.getElementById(this.controller));
+            if (this.openButton) {
+                this.openButton.addEventListener("click", this.openButtonEventListener);
+            }
+        }
+        else {
+            this.setOpenButton(this.controller);
+        }
+    }
+    handleOpenChange(newValue, oldValue) {
+        if (!!newValue === !!oldValue) {
+            return;
+        }
+        if (this.open && !oldValue) {
+            if (this.openButton) {
+                this.openButton.accessibleExpanded = true;
+            }
+            if (this.accessibleRole !== "listbox") {
+                this.teleport.makeSiblingsInert();
+            }
+            this.updatePlacement();
+            setTimeout(() => {
+                if (this.accessibleRole === "menu") {
+                    this.itemElements[0].setFocus();
+                }
+                this.duetToggle.emit({ open: this.open, component: "duet-popup-menu" });
+            }, 200);
+        }
+        else if (!this.open && oldValue) {
+            if (this.openButton) {
+                this.openButton.accessibleExpanded = false;
+            }
+            setTimeout(() => {
+                if (this.accessibleRole === "menu") {
+                    this.focusOpenButton();
+                }
+                this.duetToggle.emit({ open: this.open, component: "duet-popup-menu" });
+                if (this.accessibleRole !== "listbox") {
+                    this.teleport.removeInertFromSiblings();
+                }
+            }, 200);
+        }
+    }
+    focusOpenButton() {
+        if (this.open) {
+            focusElement(this.openButton);
+        }
+    }
+    get itemElements() {
+        return Array.from(this.element.querySelectorAll(":scope duet-popup-menu-item"));
+    }
+    async getFocusedItemIndex() {
+        const items = this.itemElements;
+        for (let i = 0; i < items.length; i++) {
+            if (await items[i].isFocused()) {
+                return i;
+            }
+        }
+        return -1;
+    }
+    render() {
+        const styles = {
+            top: `${this.menuY}px`,
+            left: `${this.menuX}px`,
+            position: this.position,
+            overflowY: "auto",
+        };
+        return (h(Host, { key: '389d4d1b46db081d29a7fa8d57fd65f9c113f7a9' }, h("div", { key: '8d5e47a1dac1f4a7b17aed4aa69afed4cfa44a39', ref: element => {
+                this.menuElement = element;
+            }, style: styles, class: { open: this.open, "duet-popup-menu-list": true, "duet-theme-turva": this.theme === "turva" }, role: this.accessibleRole, "aria-label": this.accessibleLabel }, h("slot", { key: '09fc711a6dc838d9e345a694c5e45c09a01bf4ed' }))));
+    }
+    get element() { return getElement(this); }
+    static get watchers() { return {
+        "controller": ["handleControllerChange"],
+        "open": ["handleOpenChange"]
+    }; }
+};
+DuetPopupMenu.style = DuetPopupMenuStyle0;
+
+const duetPopupMenuItemCss = "*,*::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:flex;flex-direction:row;gap:8px;align-items:center;justify-content:flex-start}.duet-popup-menu-item{display:flex;flex-grow:1;gap:12px;align-items:center;height:100%;padding:8px;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:400;line-height:1.5;color:rgb(0, 41, 77);text-align:left;text-decoration:none;cursor:pointer}.duet-popup-menu-item:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-theme-turva .duet-popup-menu-item:focus,.duet-popup-menu-item:focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-popup-menu-item.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}.duet-popup-menu-item.active{background:rgb(243, 249, 252)}.duet-popup-menu-item.active.duet-theme-turva{background:rgb(245, 245, 247)}.duet-popup-menu-item:hover{background:rgb(230, 242, 248)}.duet-popup-menu-item:hover.duet-theme-turva{background:rgb(228, 228, 230)}.duet-popup-menu-item .duet-popup-menu-item-label{flex-grow:1}.duet-popup-menu-item .duet-popup-menu-item-trailing{padding-left:20px}.active-descendant{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-theme-turva .active-descendant,.active-descendant.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}";
+const DuetPopupMenuItemStyle0 = duetPopupMenuItemCss;
+
+const DuetPopupMenuItem = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.duetFocus = createEvent(this, "duetFocus", 7);
+        this.duetBlur = createEvent(this, "duetBlur", 7);
+        /**
+         * Component event handling.
+         */
+        this.onFocus = (ev) => {
+            this.focus = true;
+            this.duetFocus.emit({
+                originalEvent: ev,
+                value: this.value,
+                component: "duet-popup-menu-item",
+            });
+        };
+        this.onBlur = (ev) => {
+            this.focus = false;
+            this.duetBlur.emit({
+                originalEvent: ev,
+                value: this.value,
+                component: "duet-popup-menu-item",
+            });
+        };
+        this.focus = false;
+        this.accessibleLabel = undefined;
+        this.accessibleRole = "menuitem";
+        this.theme = "";
+        this.url = undefined;
+        this.external = false;
+        this.targetLanguage = undefined;
+        this.value = undefined;
+        this.leadingIcon = undefined;
+        this.leadingIconColor = undefined;
+        this.trailingIcon = undefined;
+        this.trailingText = undefined;
+        this.active = false;
+        this.activeDescendant = false;
+    }
+    /**
+     * Component lifecycle events.
+     */
+    componentWillLoad() {
+        inheritGlobalTheme(this);
+    }
+    /**
+     * Sets focus. Use this method instead of the global focus().
+     */
+    async setFocus(options) {
+        setTimeout(() => this.itemElement.focus(options), 200);
+    }
+    /**
+     * isFocused.
+     */
+    async isFocused() {
+        return this.focus;
+    }
+    render() {
+        const TagName = this.url ? "a" : "button";
+        const classes = {
+            "duet-popup-menu-item": true,
+            active: this.active,
+            "duet-theme-turva": this.theme === "turva",
+            "active-descendant": this.activeDescendant,
+        };
+        return (h(Host, { key: 'e53141f7390844d3bd55d5204d7dac9334248fdc', role: this.accessibleRole }, h(TagName, { key: '73fe7bb5b8cc6fa57b12e0d210edc4ef25dd401b', ref: element => (this.itemElement = element), tabIndex: this.accessibleRole === "menuitem" || "option" ? -1 : 0, onFocus: this.onFocus, onBlur: this.onBlur, role: `${TagName === "a" ? "link" : "button"}`, "aria-label": this.accessibleLabel, class: classes, value: this.value, href: this.url, target: this.external ? "_blank" : undefined, rel: this.external ? "noopener" : undefined, lang: TagName === "button" ? undefined : this.targetLanguage, hreflang: TagName === "button" ? undefined : this.targetLanguage }, this.leadingIcon && (h("duet-icon", { key: '3fd892272f52814da4c8f14ea7bec580a160e858', name: this.leadingIcon, size: "x-small", color: this.leadingIconColor ? this.leadingIconColor : "currentColor", class: "duet-popup-menu-item-leading", margin: "none" })), h("span", { key: '51b7da7f29ef0f85344e02b1a85aa185bca9b26a', class: "duet-popup-menu-item-label" }, h("slot", { key: '9a72c7fcaeeafe89741760d84c91382b31ab798f' })), (this.trailingIcon || this.active) && (h("duet-icon", { key: '1ddf8f956adbe24208d16c33fe28fde167babcb2', name: this.active ? "messaging-checked-small" : this.trailingIcon, size: this.active ? "xx-small" : "x-small", color: "currentColor", class: "duet-popup-menu-item-trailing", margin: "none" })), this.trailingText && h("span", { key: '30aa34505231dbe1a78af9256920294e967a559a', class: "duet-popup-menu-item-trailing" }, this.trailingText))));
+    }
+    get element() { return getElement(this); }
+};
+DuetPopupMenuItem.style = DuetPopupMenuItemStyle0;
+
+export { DuetChip as duet_chip, DuetPopupMenu as duet_popup_menu, DuetPopupMenuItem as duet_popup_menu_item };

package/lib/esm/duet-choice_2.entry.js

@@ -1,13 +1,13 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-bbae2d5d.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-5d196317.js';
 import { i as inheritGlobalTheme } from './themeable-component-860041c5.js';
 import { D as DuetStringsExternalDefaults } from './common-strings-af765cad.js';
 import { c as createID } from './create-id-149a1b6d.js';
 import { i as isKeyboardClick, h as isQuestionKey, s as subscribeTabbingChange, u as unsubscribeTabbingChange, f as isEscapeKey } from './keyboard-utils-439bcc8b.js';
-import { g as getLocaleString, a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './language-utils-5a2b4259.js';
-import { h as hasSlot, c as checkNamedSlotElement } from './slot-utils-0a3b9dfc.js';
+import { g as getLocaleString, a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './language-utils-97f0a1bb.js';
+import { h as hasSlot, c as checkNamedSlotElement } from './slot-utils-4442cc08.js';
 import './string-utils-192eb3c8.js';
 
 var messagingInfo={"title":"messaging-info","tags":"messaging info information circle","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M13.5 17.25A2.252 2.252 0 0 1 11.25 15v-3.75h-.75a.75.75 0 0 1 0-1.5h.75c.827 0 1.5.673 1.5 1.5V15c0 .414.336.75.75.75h.75a.75.75 0 0 1 0 1.5z\"/><circle cx=\"11.625\" cy=\"7.125\" r=\"1.125\"/><path d=\"M12 24C5.383 24 0 18.617 0 12S5.383 0 12 0s12 5.383 12 12-5.383 12-12 12zm0-22.5C6.21 1.5 1.5 6.21 1.5 12S6.21 22.5 12 22.5 22.5 17.79 22.5 12 17.79 1.5 12 1.5z\"/></svg>"};

package/lib/esm/duet-collapsible.entry.js

@@ -1,13 +1,13 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-bbae2d5d.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-5d196317.js';
 import { a as actionArrowDownSmall } from './action-arrow-down-small-82273dc8.js';
 import { f as font_size_medium, t as tokens } from './tokens-e0e3d241.js';
 import { i as inheritGlobalTheme } from './themeable-component-860041c5.js';
 import { c as createID } from './create-id-149a1b6d.js';
 import { i as isKeyboardClick, s as subscribeTabbingChange, u as unsubscribeTabbingChange } from './keyboard-utils-439bcc8b.js';
-import { h as hasSlot } from './slot-utils-0a3b9dfc.js';
+import { h as hasSlot } from './slot-utils-4442cc08.js';
 import { s as sanitizeString } from './string-utils-192eb3c8.js';
 
 const duetCollapsibleCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}::slotted([slot=after-heading]){display:inline-block}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-bottom:16px !important;display:block;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:600;line-height:1.5;color:rgb(0, 41, 77)}:host(.duet-theme-turva){font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}:host(.duet-m-0){margin:0 !important}.duet-collapsible-content{display:none;padding-left:18px;margin-top:8px;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:400;font-variant-numeric:tabular-nums;-webkit-hyphens:auto;hyphens:auto;line-height:1.5;color:rgb(0, 41, 77)}@media (max-width: 35.9375em){.duet-collapsible-content{font-size:0.875rem}}.duet-collapsible-content.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}:host([open])>.duet-collapsible-content{display:block}.duet-collapsible-heading{-webkit-user-select:none;user-select:none;display:flex;align-items:center;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:600;line-height:1.5;color:rgb(0, 41, 77);text-align:left;cursor:pointer;border-radius:4px}.duet-collapsible-heading.full-width{width:100%}.duet-collapsible-heading.duet-collapsible-heading-centered{margin:auto}.duet-collapsible-heading.duet-collapsible-normal-weight{font-weight:400}.duet-collapsible-heading.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}.duet-collapsible-heading .duet-collapsible-heading-content{min-width:0}.duet-collapsible-heading.has-after-heading .duet-collapsible-heading-content+div{margin-left:16px}.duet-collapsible-heading.has-after-heading .duet-collapsible-heading-content+div.float-right{margin-left:auto}.duet-collapsible-heading:focus{outline:0}:host(.user-is-tabbing) .duet-collapsible-heading:focus{border-radius:4px;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}:host(.user-is-tabbing) .duet-collapsible-heading.duet-theme-turva:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-collapsible-heading-icon{margin-right:8px !important;display:flex;align-items:center;justify-content:center;color:rgb(0, 41, 77);transition:transform 300ms ease}.duet-collapsible-heading-icon:last-child,.duet-collapsible-heading-icon:last-of-type{margin-right:0 !important}[aria-expanded=true] .duet-collapsible-heading-icon{transform:rotate(180deg)}";

package/lib/esm/duet-combobox.entry.js

@@ -1,38 +1,33 @@
 /*!
  * Built with Duet Design System
  */
-import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-bbae2d5d.js';
+import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-5d196317.js';
 import { i as inheritGlobalTheme } from './themeable-component-860041c5.js';
 import { c as createID } from './create-id-149a1b6d.js';
 import { d as debounce } from './js-utils-9b9e0039.js';
 import { j as isEnterKey, f as isEscapeKey, o as isTabKey, e as isBackspaceKey, b as isArrowUpKey, c as isArrowDownKey } from './keyboard-utils-439bcc8b.js';
-import { g as getLocaleString, a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './language-utils-5a2b4259.js';
-import { g as getElementsFromDefaultSlot } from './slot-utils-0a3b9dfc.js';
+import { g as getLocaleString, a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './language-utils-97f0a1bb.js';
+import { g as getElementsFromDefaultSlot } from './slot-utils-4442cc08.js';
 import { r as regexEscape, p as parsePossibleJSON } from './string-utils-192eb3c8.js';
 
-const DuetComboBoxSelect = ({ item, active, selected, label = undefined, clickHandler = e => {
+const DuetComboBoxSelect = ({ item, activeDescendant, selected, label = undefined, clickHandler = e => {
     e.preventDefault();
 }, keyHandler = e => {
     e.preventDefault();
-}, search, isAndroidDevice, }) => {
+}, search, isAndroidDevice, id, }) => {
     const searchTerms = search
         .split(" ")
         .filter(term => !!term.trim())
         .map(term => regexEscape(term));
     const regEx = search !== "" ? new RegExp(`(${searchTerms.join("|")})`, "i") : undefined;
-    return (h("li", { class: {
-            "list-item": true,
-            option: true,
-            active: active,
-            selected: selected,
-        }, id: active ? "active_item" : "", "data-index": item.id, "aria-selected": active ? "true" : undefined, "aria-current": selected ? "true" : undefined, role: "option", "aria-label": label, tabindex: isAndroidDevice ? "-1" : null, onClick: e => clickHandler(e), onKeyUp: e => keyHandler(e) },
-        selected && h("duet-icon", { class: "option-icon", name: "messaging-checked", size: "xx-small", margin: "none" }),
+    const highlightStyle = "text-decoration: underline";
+    return (h("duet-popup-menu-item", { id: activeDescendant ? id : "", active: selected, "data-index": item.id, "aria-selected": activeDescendant ? "true" : undefined, "aria-current": selected ? "true" : undefined, role: "option", "aria-label": label, tabindex: isAndroidDevice ? "-1" : null, onClick: e => clickHandler(e), onKeyUp: e => keyHandler(e), accessibleRole: "option", activeDescendant: activeDescendant },
         regEx ? (h("span", { class: "option-container", "aria-hidden": "true" },
-            h("span", { innerHTML: item.name.replace(regEx, '<span class="highlight sc-duet-combobox">$&</span>') }))) : (item.name),
+            h("span", { innerHTML: item.name.replace(regEx, `<span style="${highlightStyle}">$&</span>`) }))) : (item.name),
         item.tags && h("span", { class: "option-tags" }, item.tags.join(", "))));
 };
 
-const duetComboboxCss = ".sc-duet-combobox-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;position:relative;display:inline-block;width:100%;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(0, 41, 77)}.sc-duet-combobox-h a.sc-duet-combobox{color:rgb(0, 41, 77);transition:none}.duet-theme-turva.sc-duet-combobox-h{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}.duet-theme-turva.sc-duet-combobox-h a.sc-duet-combobox{color:rgb(23, 28, 58)}.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.option.sc-duet-combobox .option-tags.sc-duet-combobox{color:rgb(116, 116, 117)}.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.option.selected.sc-duet-combobox{background:rgb(244, 207, 214)}.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.active.sc-duet-combobox,.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:focus,.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:hover{color:rgb(255, 255, 255);background:rgb(198, 12, 48)}.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.active.sc-duet-combobox .option-tags.sc-duet-combobox,.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:focus .option-tags.sc-duet-combobox,.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:hover .option-tags.sc-duet-combobox{color:rgb(255, 255, 255)}.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.active.sc-duet-combobox a.sc-duet-combobox,.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:focus a.sc-duet-combobox,.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:hover a.sc-duet-combobox{color:rgb(255, 255, 255)}.duet-combobox-list.sc-duet-combobox{position:absolute;top:calc(100% - 12px);z-index:700;margin:8px 0 0;visibility:hidden;background:rgb(255, 255, 255);border-radius:0 4px;box-shadow:0 2px 10px 0 rgba(0, 41, 77, 0.1);opacity:0;transition:transform 300ms ease, opacity 300ms ease, visibility 300ms ease;transform:scale(0.96) translateZ(0) translateY(-20px);transform-origin:top right}.duet-combobox-list.open.sc-duet-combobox{visibility:visible;opacity:1;transition-property:transform, opacity;transform:scale(1.0001) translateZ(0) translateY(0)}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox{max-height:200px;padding:0.75rem 0;margin:0;overflow-y:scroll;font-weight:600;list-style:none;cursor:pointer;scroll-behavior:smooth}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox{padding:4px 0}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:not(.selected){padding-left:16px}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:not(.selected) .highlight.sc-duet-combobox{text-decoration:underline}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.option.sc-duet-combobox .option-tags.sc-duet-combobox{float:right;padding-right:0.875rem;font-weight:400;color:rgb(144, 149, 153)}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.selected.sc-duet-combobox{padding-left:0;background:rgb(205, 229, 241)}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.selected.option.sc-duet-combobox .option-icon.sc-duet-combobox{padding:0 8px 0 8px}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.selected.option.sc-duet-combobox .option-tags.sc-duet-combobox{color:rgb(144, 149, 153)}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.active.sc-duet-combobox,.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:focus,.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:hover{color:rgb(255, 255, 255);background:rgb(0, 119, 179)}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.active.sc-duet-combobox .option-tags.sc-duet-combobox,.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:focus .option-tags.sc-duet-combobox,.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:hover .option-tags.sc-duet-combobox{color:rgb(255, 255, 255)}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.active.sc-duet-combobox a.sc-duet-combobox,.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:focus a.sc-duet-combobox,.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:hover a.sc-duet-combobox{color:rgb(255, 255, 255)}";
+const duetComboboxCss = ".sc-duet-combobox-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;position:relative;display:inline-block;width:100%;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(0, 41, 77)}.sc-duet-combobox-h a.sc-duet-combobox{color:rgb(0, 41, 77);transition:none}.duet-theme-turva.sc-duet-combobox-h{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}.duet-theme-turva.sc-duet-combobox-h a.sc-duet-combobox{color:rgb(23, 28, 58)}.combobox-menu-container.sc-duet-combobox{width:var(--popup-width);max-height:200px}";
 const DuetComboboxStyle0 = duetComboboxCss;
 
 const DuetCombobox = class {
@@ -41,14 +36,16 @@ const DuetCombobox = class {
         this.duetChange = createEvent(this, "duetChange", 3);
         var _a, _b;
         this.listBoxId = createID("duet-combobox-list-element");
+        this.inputId = createID("duet-combobox-input-id");
+        this.activeDescendantId = createID("duet-combobox-active-descendant");
         this.isAndroidDevice = ((_b = (_a = navigator === null || navigator === void 0 ? void 0 : navigator.userAgent) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.indexOf("android")) > -1 || null;
         this.resizeObserver = new ResizeObserver(debounce(entries => {
-            var _a, _b;
+            var _a, _b, _c;
             // otherwise, something is wrong, expecting 1 element only
             if ((entries === null || entries === void 0 ? void 0 : entries.length) === 1) {
                 const currentWidth = (_b = (_a = entries[0]) === null || _a === void 0 ? void 0 : _a.target) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().width;
-                this.listContainer.style.width = `${currentWidth + 1}px`;
-                // this.listElement.style.width = `${currentWidth + 1}px`
+                const popupMenuPadding = parseInt((_c = getComputedStyle(this.listContainer.shadowRoot.querySelector(".duet-popup-menu-list"))) === null || _c === void 0 ? void 0 : _c.padding);
+                this.listContainer.style.setProperty("--popup-width", `${currentWidth - 2 * popupMenuPadding}px`);
             }
         }, 100));
         this.onInputChange = async (e) => {
@@ -73,6 +70,9 @@ const DuetCombobox = class {
             if (!this.force && !this.multiple && this.selectedItems.size > 0 && newValue !== this.getSelectedItemLabel()) {
                 this.selectedItems.clear();
             }
+            if (!this.force && !this.multiple && newValue === "") {
+                this.value = undefined;
+            }
             this.listOpen = String(newValue).length >= this.minCharacters && ((_a = this.getFilteredItems()) === null || _a === void 0 ? void 0 : _a.length) > 0;
         };
         this.onKeyDown = (e) => {
@@ -103,6 +103,9 @@ const DuetCombobox = class {
                 return;
             }
             if (isEscapeKey(e) || isTabKey(e)) {
+                if (this.listOpen) {
+                    e.preventDefault();
+                }
                 this.updateInputText(true);
                 this.activeItem = undefined;
                 this.listOpen = false;
@@ -135,7 +138,7 @@ const DuetCombobox = class {
                 }
                 // this should be set to undefined on everything BUT up/down arrow according to the aria 1.1 specs
                 // https://www.w3.org/TR/wai-aria-practices-1.1/#combobox
-                this.input.accessibleActiveDescendant = "active_item";
+                this.input.accessibleActiveDescendant = this.activeDescendantId;
                 this.activeItem = nextActiveItem;
                 this.scrollToActive();
             }
@@ -176,8 +179,16 @@ const DuetCombobox = class {
         this.openListOnClick = false;
         this.filterType = "startsWith";
     }
+    popupMenuOpenHandler() {
+        if (this.listOpen) {
+            this.listContainer.show();
+        }
+        else {
+            this.listContainer.hide();
+        }
+    }
     activeItemHandler(state) {
-        this.input.accessibleActiveDescendant = this.listOpen && (state || state === 0) ? `active_item` : "";
+        this.input.accessibleActiveDescendant = this.listOpen && (state || state === 0) ? this.activeDescendantId : "";
     }
     handleDocumentClick(e) {
         //we want to remove all user text if they have NOT selected from the dropdown
@@ -291,6 +302,7 @@ const DuetCombobox = class {
         this.input.accessibleExpanded = this.listOpen ? "true" : "false";
         this.input.accessibleAutocomplete = "list";
         this.input.accessibleControls = this.listBoxId;
+        this.input.id = this.inputId;
         this.element.addEventListener("keydown", this.onKeyDown);
         connectLanguageChangeObserver(this, { prop: "accessibleLabels", defaults: "accessibleLabelDefaults" });
         this.processListOpenChange();
@@ -342,6 +354,7 @@ const DuetCombobox = class {
         this.value = this.processedItems.filter(item => this.selectedItems.has(item.id)).map(item => item.value);
         this.input.value = "";
         this.updateChips();
+        this.input.setFocus();
     }
     /**
      * Add item with id to the selectedItems set. Used only when multiple is true.
@@ -376,6 +389,8 @@ const DuetCombobox = class {
         if (this.selectedItems.has(id)) {
             this.selectedItems.delete(id);
             this.value = undefined;
+            this.input.value = "";
+            await this.input.setFocus();
         }
         else {
             this.selectedItems.clear();
@@ -383,7 +398,7 @@ const DuetCombobox = class {
             this.value = this.processedItems.find(item => item.id === id).value;
         }
         if (emitEvent) {
-            this.emitChangeEvent(id);
+            this.emitChangeEvent(this.value && id);
         }
         await this.updateInputText();
     }
@@ -447,6 +462,7 @@ const DuetCombobox = class {
             this.input.value = ""; // set value to empty so that cursor position follows accordingly
             this.input.value = await this.getSelectedItemLabel();
             this.input.scrollLeft = this.input.scrollWidth;
+            await this.input.setFocus();
         }
     }
     // Event handlers
@@ -466,7 +482,7 @@ const DuetCombobox = class {
     }
     //function that scrolls to the li element with the class "active"
     scrollToActive() {
-        const activeElement = this.listElement.querySelector(".active");
+        const activeElement = document.getElementById(`${this.activeDescendantId}`); // this is undefined on 1st keydown, make it be valid to fix the issue
         if (activeElement) {
             activeElement.scrollIntoView({
                 behavior: "smooth",
@@ -538,23 +554,17 @@ const DuetCombobox = class {
         return (h(Host, { class: {
                 "duet-combobox": true,
                 [`duet-theme-${this.theme}`]: true,
-            } }, h("slot", null), h("div", { class: {
-                "duet-combobox-list": true,
-                open: this.listOpen,
-            }, ref: el => (this.listContainer = el) }, h("ul", { class: {
-                "duet-combobox-listbox-open": this.listOpen,
-                "duet-combobox-listbox": true,
-            }, role: "listbox", ref: el => (this.listElement = el), id: this.listBoxId }, this.listOpen &&
+            } }, h("slot", null), h("div", null, h("duet-popup-menu", { id: this.listBoxId, controller: this.input, ref: el => (this.listContainer = el), accessibleRole: "listbox" }, h("div", { class: "combobox-menu-container" }, this.listOpen &&
             selectElements.map((item, index) => {
-                return (h(DuetComboBoxSelect, { item: item, active: index === this.activeItem, selected: this.selectedItems.has(item.id), search: this.inputValue, clickHandler: e => this.onListClick(e, item), label: this.formatLabel(item, index, selectElements.length, this.processedItems.length), isAndroidDevice: this.isAndroidDevice }));
-            })))));
+                return (h(DuetComboBoxSelect, { id: this.activeDescendantId, item: item, activeDescendant: index === this.activeItem, selected: this.selectedItems.has(item.id), search: this.inputValue, clickHandler: e => this.onListClick(e, item), label: this.formatLabel(item, index, selectElements.length, this.processedItems.length), isAndroidDevice: this.isAndroidDevice }));
+            }), h("duet-spacer", { size: "x-small" }))))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
+        "listOpen": ["popupMenuOpenHandler", "processListOpenChange"],
         "activeItem": ["activeItemHandler"],
         "items": ["processItems"],
-        "value": ["processValue"],
-        "listOpen": ["processListOpenChange"]
+        "value": ["processValue"]
     }; }
 };
 DuetCombobox.style = DuetComboboxStyle0;

package/lib/esm/duet-contact-card.entry.js

@@ -1,9 +1,9 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-bbae2d5d.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-5d196317.js';
 import { i as inheritGlobalTheme } from './themeable-component-860041c5.js';
-import { a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './language-utils-5a2b4259.js';
+import { a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './language-utils-97f0a1bb.js';
 import './string-utils-192eb3c8.js';
 
 const duetContactCardCss = "*,*::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;margin-bottom:12px !important;display:block}:host(.duet-m-0){margin:0 !important}::slotted(*){padding-top:1.5rem}@media (min-width: 48em){::slotted(*){grid-column:2/span 2;padding-top:0}}.duet-contact-card{display:grid;grid-template-columns:100%;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:600;line-height:1.5;color:rgb(0, 41, 77)}.duet-contact-card.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}@media (min-width: 48em){.duet-contact-card{grid-template-columns:min-content minmax(0, 1fr) auto;gap:20px}}.duet-contact-card .image{width:4rem;height:4rem;margin-bottom:8px;border-radius:4px}@media (min-width: 48em){.duet-contact-card .image{width:6rem;height:6rem;padding-bottom:0}}.duet-contact-card .description{padding-bottom:8px}.duet-contact-card .email,.duet-contact-card .phone{display:grid;grid-template-columns:min-content auto;gap:8px;align-items:center;justify-content:flex-start;padding-bottom:8px;overflow-wrap:break-word}";
@@ -51,10 +51,10 @@ const DuetContactCard = class {
     render() {
         const isTurva = this.theme === "turva";
         const theme = isTurva ? "turva" : "default";
-        return (h(Host, { key: '4a436cc9bd108107bc501a7643b2e93f5ac78e5c', class: { "duet-m-0": this.margin === "none" } }, h("div", { key: '47581ca62eb607cec4b8d1d37fcf5f18c2678a34', class: {
+        return (h(Host, { key: '74f85ad21c040a5a98dee8c360b9958be3109855', class: { "duet-m-0": this.margin === "none" } }, h("div", { key: 'd11d8de783ddd26e09d9e96923dc781f569e93f9', class: {
                 "duet-contact-card": true,
                 "duet-theme-turva": this.theme === "turva",
-            }, role: "group", "aria-label": this.name }, this.image ? h("img", { class: "image", src: this.image, alt: this.name }) : h("div", null), h("div", { key: '2146916a772d049a0a2c338e573c436cc799369c' }, this.name && (h("duet-heading", { key: '1883776b3095e2f5aa9c173a96e7822d1c938f0e', class: "name", level: "h3", margin: "none", theme: theme }, this.name)), this.description && (h("duet-paragraph", { key: '92b78c88c8e2d892719502f7d2505ed7449da8d3', class: "description", margin: "none", theme: theme }, this.description)), this.email && (h("div", { key: '833f2c34ebcdce0e5233f80d6d01a5d9db13aadc', class: "email" }, h("duet-icon", { key: '41310926f4b326de7de44f4a7346905386f80254', name: "navigation-message", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: '9ce96e8d1f5f73496c3b8e3d3c7d99e2de741c3e', url: `mailto:${this.email}`, accessibleLabel: `Email: ${this.email}`, theme: theme }, this.email))), this.phone && (h("div", { key: '7b184f7a81d165ad37c66a6075d3b1698de6264c', class: "phone" }, h("duet-icon", { key: 'b973fbdcdd02bea91e9adce6b2d94b7122f730fc', name: "form-tel", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: '4ba2b90db91a2217590ce7bc5f70846dc87e9856', url: `tel:${this.phone}`, accessibleLabel: `${this.phoneLabel[this.language]}: ${this.phone}`, theme: theme }, this.phone)))), this.buttonUrl && this.buttonText && (h("div", { key: 'a292f1045430c6eeac2ec61eae9722c6ffe41f4b', class: "call-to-action" }, h("duet-button", { key: '103fa46548191a207bcfa65a32e426b62c3c4e4a', variation: "default", icon: this.buttonIcon, fixed: true, margin: "none", url: this.buttonUrl, theme: theme }, this.buttonText))), h("div", { key: 'b02b1c4afca5fb77e9fd389b64f1f853433bc52f' }), h("slot", { key: '02bae65fb19132f6a49d7dc156e660e042385fc3' }))));
+            }, role: "group", "aria-label": this.name }, this.image ? h("img", { class: "image", src: this.image, alt: this.name }) : h("div", null), h("div", { key: '7e934c796778de29e95e94bebec6937048b78566' }, this.name && (h("duet-heading", { key: '26031bfeb5a46a69ebba836bd1cc714b077bb121', class: "name", level: "h3", margin: "none", theme: theme }, this.name)), this.description && (h("duet-paragraph", { key: '8768df03c1a5dfb04cdf1eda46da5a327bbf3324', class: "description", margin: "none", theme: theme }, this.description)), this.email && (h("div", { key: '92235e6bd3a7012a478cfd8100e4f5701f9ea950', class: "email" }, h("duet-icon", { key: '3fe17e7cc18b9f724be2627dcb4e0adf667aaf5b', name: "navigation-message", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: 'cc356db4a9b7f198504873d3e335cd6f83d7c70c', url: `mailto:${this.email}`, accessibleLabel: `Email: ${this.email}`, theme: theme }, this.email))), this.phone && (h("div", { key: 'b9e6b3cc84f4aa81599ff5b7cd626f3e5f03ab33', class: "phone" }, h("duet-icon", { key: '3223b182ee564f36ec8994536981eb6bc9fba82d', name: "form-tel", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: '2396ee622e62c5a5be8dde2ecc9edecbb823cc9a', url: `tel:${this.phone}`, accessibleLabel: `${this.phoneLabel[this.language]}: ${this.phone}`, theme: theme }, this.phone)))), this.buttonUrl && this.buttonText && (h("div", { key: 'b5d4135434a9627822c9569ae9945bc5c3c2441a', class: "call-to-action" }, h("duet-button", { key: '7ebaddbe3b97f9916fada3f248c343eb7bd6bdde', variation: "default", icon: this.buttonIcon, fixed: true, margin: "none", url: this.buttonUrl, theme: theme }, this.buttonText))), h("div", { key: '12212314eff53718f85f30af84592ee6447b6b7b' }), h("slot", { key: 'd1d55182364ac381b7f4ce0bcdecc6c0643739bc' }))));
     }
     get element() { return getElement(this); }
 };