@duetds/components 9.1.2 → 9.2.1

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

@@ -0,0 +1,647 @@
+/*!
+ * Built with Duet Design System
+ */
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-940c081d.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, f as isEscapeKey, c as isArrowDownKey, b as isArrowUpKey, o as isTabKey } from './keyboard-utils-439bcc8b.js';
+import { g as getLocaleString } from './language-utils-b0c1eb01.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-5147573d.js';
+import { T as Teleport } from './teleport-546f382d.js';
+import './string-utils-192eb3c8.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(8, 42, 77) !important;text-align:center;cursor:pointer;background:rgb(255, 255, 255);border-color:rgb(181, 198, 208);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(199, 202, 207)}.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(98, 121, 138) !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(143, 147, 158) !important;background:rgb(245, 247, 250);border-color:rgb(245, 247, 250)}.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, 247, 250);border-color:rgb(245, 247, 250)}.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(8, 42, 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(228, 241, 247);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(198, 225, 238)}.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, 247, 250);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(222, 224, 228)}.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(240, 247, 250);border-color:rgb(240, 247, 250)}.duet-chip-container.duet-chip-filter-popup-open.duet-theme-turva{background:rgb(245, 247, 250);border-color:rgb(245, 247, 250)}.duet-chip-container.duet-chip-filter-popup-open .duet-chip-popup-disclosure duet-icon{transform:rotate(180deg)}.duet-chip-container.duet-chip-input:hover{padding:1px !important;border-color:rgb(181, 198, 208);border-width:1px}.duet-chip-container.duet-chip-input.duet-chip-hover,.duet-chip-container.duet-chip-input.duet-chip-selected{padding:0 !important;border-color:rgb(0, 119, 179);border-width:2px}.duet-chip-container.duet-chip-input.duet-chip-hover .duet-chip-remove-button,.duet-chip-container.duet-chip-input.duet-chip-selected .duet-chip-remove-button{right:0;width:34px;height:34px;background:transparent}.duet-chip-container.duet-chip-input.duet-chip-delete-focus{background:rgb(240, 247, 250)}.duet-chip-container.duet-chip-input .duet-chip-input-button{margin-right:22px}.duet-chip-container.duet-chip-input .duet-chip-remove-button{position:absolute;top:-1px;right:-1px;width:36px;height:36px;padding-left:10px;border:3px solid transparent;border-radius:8px}.duet-chip-container.duet-chip-input .duet-chip-remove-button:hover{background:rgb(217, 236, 245);background-clip:padding-box}.duet-chip-container.duet-chip-input.duet-chip-selected{background:rgb(240, 247, 250)}.duet-chip-container.duet-chip-input.duet-chip-selected.duet-chip-hover{background:rgb(217, 236, 245)}.duet-chip-container.duet-chip-input.duet-chip-selected .duet-chip-remove-button:hover{background:rgb(198, 225, 238);background-clip:padding-box}.duet-chip-container.duet-chip-input.duet-theme-turva:hover{border-color:rgb(199, 202, 207)}.duet-chip-container.duet-chip-input.duet-theme-turva.duet-chip-hover{border-color:rgb(198, 12, 48)}.duet-chip-container.duet-chip-input.duet-theme-turva .duet-chip-remove-button:hover{background:rgb(255, 241, 241)}.duet-chip-container.duet-chip-input.duet-theme-turva.duet-chip-selected{background:rgb(255, 241, 241)}.duet-chip-container.duet-chip-input.duet-theme-turva.duet-chip-selected.duet-chip-hover{background:rgb(255, 213, 215);background-clip:padding-box}.duet-chip-container.duet-chip-input.duet-theme-turva.duet-chip-selected .duet-chip-remove-button:hover{background:rgb(255, 185, 190);background-clip:padding-box}.duet-chip-container.large button,.duet-chip-container.large label{padding:15px 22px}:host(.user-is-tabbing) .duet-chip-focus,:host(.user-is-tabbing) .duet-chip-delete-focus .duet-chip-remove-button{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,:host(.user-is-tabbing) .duet-chip-delete-focus .duet-chip-remove-button.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;
+
+const DuetChip = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.duetChange = createEvent(this, "duetChange", 3);
+        this.duetRemove = createEvent(this, "duetRemove", 3);
+        this.duetFocus = createEvent(this, "duetFocus", 7);
+        this.duetBlur = createEvent(this, "duetBlur", 7);
+        /**
+         * Own Properties.
+         */
+        this.chipId = createID("DuetChip");
+        this.deleteLabels = {
+            fi: "Poista",
+            en: "Remove",
+            sv: "Ta bort",
+        };
+        this.selectedForDeletionLabels = {
+            fi: "Valittu, poista askelpalautinnäppäimellä",
+            en: "Selected, remove with backspace",
+            sv: "Valt, ta bort med backsteg",
+        };
+        this.enforceNoDisabledSelected = () => {
+            if (this.disabled && this.checked) {
+                console.error("Duet error: pre-selected chip may not be disabled");
+                this.disabled = false;
+            }
+        };
+        this.radioInputListenersRemove = radioInput => {
+            radioInput.removeEventListener("change", this.onRadioChange);
+            radioInput.removeEventListener("click", this.onRadioClick);
+            radioInput.removeEventListener("focus", this.onFocus);
+            radioInput.removeEventListener("blur", this.onBlur);
+        };
+        this.radioInputListenersAdd = radioInput => {
+            radioInput.addEventListener("change", this.onRadioChange);
+            radioInput.addEventListener("click", this.onRadioClick);
+            radioInput.addEventListener("focus", this.onFocus);
+            radioInput.addEventListener("blur", this.onBlur);
+        };
+        this.radioInputSetUp = () => {
+            const slotInput = this.element.querySelector("input[slot=input]");
+            const radioInput = slotInput || document.createElement("input");
+            radioInput.slot = "input";
+            radioInput.ariaDisabled = this.disabled ? "true" : undefined;
+            radioInput.id = this.identifier || this.chipId;
+            radioInput.type = "radio";
+            radioInput.name = this.name;
+            radioInput.value = this.value;
+            radioInput.checked = this.checked;
+            if (slotInput) {
+                this.radioInputListenersRemove(radioInput);
+            }
+            else {
+                this.element.appendChild(radioInput);
+            }
+            this.radioInputListenersAdd(radioInput);
+            this.focusableElement = radioInput;
+        };
+        this.popupSetUp = () => {
+            const popup = document.querySelector(`duet-popup-menu#${this.popup}`);
+            if (popup) {
+                this.popupElement = popup;
+                popup.controller = this.element;
+                const originalText = this.element.textContent;
+                const originalValue = this.value;
+                if (!popup.id) {
+                    popup.id = "popup-menu";
+                }
+                popup.addEventListener("duetToggle", (evt) => {
+                    this.popupOpen = evt.detail.open;
+                });
+                const clearActive = () => {
+                    popup.querySelectorAll("duet-popup-menu-item").forEach(item => {
+                        item.active = false;
+                    });
+                };
+                popup.querySelectorAll("duet-popup-menu-item").forEach(item => {
+                    item.addEventListener("click", evt => {
+                        var _a;
+                        const value = (_a = item.value) !== null && _a !== void 0 ? _a : item.innerText;
+                        if (!item.active) {
+                            clearActive();
+                            item.active = true;
+                            this.element.textContent = item.innerText;
+                            this.value = value;
+                            this.checked = true;
+                        }
+                        else {
+                            clearActive();
+                            this.element.textContent = originalText;
+                            this.value = originalValue;
+                            this.checked = false;
+                        }
+                        this.emitChange(evt);
+                        // A workaround to the difference of event handling between the browers.
+                        // Chrome will emit a separate click event on the chip after the popup is closed, resulting popup.toggle() to
+                        // open the popup again. Firefox does not have this behavior.
+                        setTimeout(() => {
+                            if (this.popupElement.isOpen()) {
+                                this.popupElement.hide();
+                            }
+                        });
+                    });
+                });
+            }
+        };
+        /**
+         * Component event handling.
+         */
+        this.onFocus = (ev) => {
+            this.focus = true;
+            this.duetFocus.emit({
+                originalEvent: ev,
+                checked: this.checked,
+                value: this.value,
+                component: "duet-chip",
+            });
+        };
+        this.onBlur = (ev) => {
+            this.focus = false;
+            this.duetBlur.emit({
+                originalEvent: ev,
+                checked: this.checked,
+                value: this.value,
+                component: "duet-chip",
+            });
+        };
+        this.emitChange = originalEvent => {
+            this.duetChange.emit({
+                originalEvent,
+                checked: this.checked,
+                value: this.value,
+                component: "duet-chip",
+            });
+        };
+        /**
+         * Change checked state and emit duetChange event.
+         */
+        this.onFilterChange = (evt) => {
+            this.checked = !this.checked;
+            this.emitChange(evt);
+        };
+        /**
+         * Change checked state and emit duetChange event.
+         */
+        this.onRadioChange = (evt) => {
+            const input = this.focusableElement;
+            const inputChecked = input.checked;
+            this.checked = inputChecked;
+            this.emitChange(evt);
+        };
+        this.onRadioClick = (evt) => {
+            if (this.disabled) {
+                evt.preventDefault();
+            }
+        };
+        /**
+         * Stop propagation and prevent default if popup is present, as the popup controls value and checked state.
+         */
+        this.onFilterClick = (evt) => {
+            if (this.disabled) {
+                evt.stopPropagation();
+                evt.preventDefault();
+                return;
+            }
+            if (this.popupElement) {
+                evt.stopPropagation();
+                evt.preventDefault();
+                this.popupElement.toggle();
+            }
+        };
+        /**
+         * Remove input chip
+         */
+        this.onRemoveClick = (evt) => {
+            evt === null || evt === void 0 ? void 0 : evt.stopPropagation();
+            evt === null || evt === void 0 ? void 0 : evt.preventDefault();
+            this.duetRemove.emit({
+                originalEvent: evt,
+                checked: this.checked,
+                value: this.value,
+                component: "duet-chip",
+            });
+            this.element.remove();
+        };
+        this.focus = false;
+        this.popupElement = undefined;
+        this.popupOpen = undefined;
+        this.inputChipHover = false;
+        this.inputChipDeleteFocus = false;
+        this.accessibleLabel = undefined;
+        this.variation = "button";
+        this.size = "medium";
+        this.popup = undefined;
+        this.icon = "";
+        this.theme = "";
+        this.identifier = undefined;
+        this.value = undefined;
+        this.name = undefined;
+        this.selected = false;
+        this.checked = false;
+        this.disabled = false;
+        this.accessibleExpanded = undefined;
+        this.accessiblePopup = "false";
+    }
+    clearOtherRadioButtons() {
+        if (this.variation === "radio" && this.checked) {
+            const chips = document.querySelectorAll(`duet-chip[variation="radio"][name="${this.name}"]`);
+            chips.forEach(chip => {
+                if (chip !== this.element) {
+                    chip.checked = false;
+                }
+            });
+        }
+    }
+    /**
+     * Component lifecycle events.
+     */
+    componentWillLoad() {
+        inheritGlobalTheme(this);
+        this.popupSetUp();
+        this.enforceNoDisabledSelected();
+    }
+    connectedCallback() {
+        subscribeTabbingChange(this);
+    }
+    disconnectedCallback() {
+        unsubscribeTabbingChange(this);
+    }
+    componentDidRender() {
+        if (this.variation === "radio") {
+            this.radioInputSetUp();
+        }
+    }
+    getAccessibleExpanded() {
+        if (this.accessibleExpanded != null) {
+            return (!!this.accessibleExpanded).toString();
+        }
+        if (this.popupElement) {
+            return this.popupOpen ? "true" : "false";
+        }
+        return undefined;
+    }
+    getAccessiblePopup() {
+        if (this.popupElement) {
+            return "true";
+        }
+        else {
+            return this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined;
+        }
+    }
+    getAccessibleDeleteLabel() {
+        return `${getLocaleString(this.deleteLabels)} ${this.element.textContent}`;
+    }
+    getAccessibleInputChipLabel() {
+        return `${this.element.textContent}${this.selected ? ` (${getLocaleString(this.selectedForDeletionLabels)}) ` : ""},`;
+    }
+    /**
+     * Sets focus. Use this method instead of the global focus().
+     */
+    async setFocus(options) {
+        setTimeout(() => this.focusableElement.focus(options), 200);
+    }
+    /**
+     * @internal
+     */
+    async setDeleteFocus() {
+        setTimeout(() => this.deleteButtonElement.focus(), 200);
+    }
+    /**
+     * Removes input chip. Use this method instead of the native remove() so the component can
+     * emit appropriate event
+     */
+    async removeChip() {
+        this.onRemoveClick();
+    }
+    render() {
+        var _a;
+        const identifier = this.identifier || this.chipId;
+        const classes = {
+            "duet-chip-container": true,
+            [`duet-chip-${this.variation}`]: true,
+            "duet-chip-focus": this.focus,
+            "duet-chip-selected": this.selected,
+            "duet-chip-hover": this.inputChipHover,
+            "duet-chip-delete-focus": this.inputChipDeleteFocus,
+            "duet-chip-has-icon": !!this.icon,
+            "duet-chip-has-popup": this.variation === "filter" && !!this.popupElement,
+            "duet-theme-turva": this.theme === "turva",
+            "duet-chip-filter-checked": this.variation === "filter" && this.checked,
+            "duet-chip-radio-checked": this.variation === "radio" && this.checked,
+            "duet-chip-filter-popup-open": this.popupOpen,
+            "duet-chip-disabled": this.disabled,
+            [this.size]: true,
+        };
+        const focusHandlers = {
+            onFocus: this.onFocus,
+            onBlur: this.onBlur,
+            ref: el => (this.focusableElement = el),
+        };
+        return (h(Host, { key: 'a1e4d371f57abce15c06aa88bf2faab012bde60a', class: { [this.variation]: true } }, this.variation === "button" && (h("span", { key: '48b8e4b70be8c4511a33be55c6fd25ec850fe1c2', class: classes }, h("button", Object.assign({ key: '1e92c0aff2f7d6817644759f8fc0a338a12e651e', id: identifier, "aria-label": this.accessibleLabel, "aria-disabled": this.disabled ? "true" : undefined, name: this.name, value: this.value, onClick: this.disabled ? evt => evt.stopPropagation() : undefined }, focusHandlers), h("span", { key: 'f0dfef6892bc184005d490ad2d1d5f9ff5c21fe9', class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { key: '490e975ca8e0573278761ac8fe978a5bac7f1188', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", { key: '1e44610c8ab2868243517a700bfdb9e5adbd5d0d' })))), this.variation === "input" && (h("span", { key: 'b4340e31757471ddf6e7e326c4738a34f57d668c', class: classes, "aria-label": this.getAccessibleInputChipLabel() }, h("button", Object.assign({ key: 'dbb4afd5b7f46baa28a026ff4531db068eac8980', id: identifier, class: "duet-chip-input-button", value: this.value, "aria-label": this.accessibleLabel, onMouseOver: () => (this.inputChipHover = true), onMouseOut: () => (this.inputChipHover = false), onClick: () => (this.selected = !this.selected) }, focusHandlers), h("span", { key: '6e871c13f043685a2bd1fbf484256e801437a86b', class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { key: '74c2893dc01e6e13a2baf628908c5f92a3bfc9d5', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", { key: 'f0600d50d6bc3a1b549d9d7b8a3c62d4d02ab53f' })), h("button", { key: '70055da94df9cb43034d6b70e63c2748ca91eee5', class: "duet-chip-remove-button", "aria-label": this.getAccessibleDeleteLabel(), onClick: this.onRemoveClick, onFocus: () => (this.inputChipDeleteFocus = true), onBlur: () => (this.inputChipDeleteFocus = false), ref: el => (this.deleteButtonElement = el) }, h("duet-icon", { key: '1201fc54755c07ce2bbadfc2ec8aa29d5faa43eb', name: "activity-close", size: "xx-small", margin: "none", color: "currentColor" })))), this.variation === "filter" && (h("span", { key: 'c6c3ddfc24d0bce8113029c644f01c5eceee6936', class: classes }, h("input", Object.assign({ key: 'dae5813deea4c2b7798852027cc65d2be069fa05', "aria-haspopup": this.getAccessiblePopup(), "aria-controls": (_a = this.popupElement) === null || _a === void 0 ? void 0 : _a.id, "aria-expanded": this.getAccessibleExpanded(), "aria-disabled": this.disabled ? "true" : undefined, id: identifier, type: "checkbox", name: this.name, value: this.value, checked: this.checked, onClick: this.onFilterClick, onChange: this.onFilterChange }, focusHandlers)), h("label", { key: '5c7534979701b02d02649f0b77aadfae19568c15', htmlFor: identifier }, this.icon && (h("span", { key: 'a92359d55dae65066120c53db2f8fcfa09f89904', class: "duet-chip-icon-container" }, h("duet-icon", { key: '9193a5782a8848231e53276b90b0ce2e665e2812', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), h("duet-icon", { key: '78717f62e085fb0528f6ee7b141691f6c7555f42', name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" }))), h("slot", { key: '7c210530d8bb610ac7aaadd0f4a7510ddd020d12' }), this.popupElement && (h("span", { key: '2a6053db849ac7543ce7649c94a3fda09d7dd2f3', class: "duet-chip-popup-disclosure" }, h("duet-icon", { key: 'e21b78ef1b4fca374c1112e4d492ed57f8ab9cab', name: "action-arrow-down-small", size: "xxx-small", margin: "none", color: "currentColor" })))))), this.variation === "radio" && (h("span", { key: 'a964e2e03bfbf19d8a01f8475ee6d4b81c671c76', class: classes }, h("slot", { key: '3b64cb528868bf3f36b83bfe613df41d7ee17513', name: "input" }), h("label", { key: 'f3f52816c1229c2446f51642bcba073e95d44139', htmlFor: identifier }, this.icon && (h("span", { key: 'e5d0dbadb5b2cc473dd1ad618bdc3f0e00d3f02c', class: "duet-chip-icon-container" }, h("duet-icon", { key: '498cf093393d6b44a60aad4b73520d4f3ebecde2', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), h("duet-icon", { key: '153615d1f9923f824ca91a8799dfaebb9489ad47', name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" }))), h("slot", { key: '6f89ed2bcee2e5cdf1b6505f04be602fad04b904' }))))));
+    }
+    get element() { return getElement(this); }
+    static get watchers() { return {
+        "checked": ["clearOtherRadioButtons"]
+    }; }
+};
+DuetChip.style = DuetChipStyle0;
+
+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.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(8, 42, 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(240, 247, 250)}.duet-popup-menu-item.active.duet-theme-turva{background:rgb(245, 247, 250)}.duet-popup-menu-item:hover{background:rgb(228, 241, 247)}.duet-popup-menu-item:hover.duet-theme-turva{background:rgb(222, 224, 228)}.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 };