@duetds/components 10.0.0-alpha.8 → 10.0.0

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

@@ -1,697 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-fa810c91.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, q as enableUserIsTabbing, f as isEscapeKey, c as isArrowDownKey, b as isArrowUpKey, o as isTabKey } from './keyboard-utils-daf80d44.js';
-import { g as getLocaleString } from './language-utils-35eb1c9f.js';
-import { I as spaceXSmall } from './tokens.module-2d02f5ff.js';
-import { o as offset, f as flip, s as shift, c as computePosition, b as autoUpdate } from './floating-ui.dom.esm-ebc91b33.js';
-import { f as focusElement } from './focus-utils-fc101536.js';
-import { T as Teleport } from './teleport-546f382d.js';
-import { a as actionNewWindowSmall } from './action-new-window-small-1945be91.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;
-            radioInput.ariaLabel = this.element.textContent;
-            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) {
-        enableUserIsTabbing();
-        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: '5ddf4eae8cb9deb9390f694c3a0a1bc9981d4359', class: { [this.variation]: true } }, this.variation === "button" && (h("span", { key: '121adcccdad8d637a2fc60482831f988948e2ac7', class: classes }, h("button", Object.assign({ key: '6862bfd33573fa7a7cf74a80abb28edb7b1d31af', id: identifier, "aria-label": this.accessibleLabel, "aria-haspopup": this.getAccessiblePopup(), "aria-expanded": this.getAccessibleExpanded(), "aria-disabled": this.disabled ? "true" : undefined, name: this.name, value: this.value, onClick: this.disabled ? evt => evt.stopPropagation() : undefined }, focusHandlers), h("span", { key: '16cdf94c6a9d411ed7dcdfd91fedb3653631382f', class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { key: 'd913024eebba49b2f489c6859c8b0fb5395752cf', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", { key: '0c90ce6861f802bec7d4d9462fdd08e7b8130179' })))), this.variation === "input" && (h("span", { key: '55ddebe4c051b4806e58275c3c500e594c7bbe24', class: classes, "aria-label": this.getAccessibleInputChipLabel() }, h("button", Object.assign({ key: 'e37c4f5cc015d6487de4a65c3339369a4e89962e', 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: 'b213a65e417e8a1900d42b19c59f8d7c9ef2fa94', class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { key: '235ba630d4861c5b89074208bfe8bec3aafc4cb2', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", { key: '4952f588693c543bb5e940e62ad82a2afc1828a0' })), h("button", { key: 'e92f1e564b70b2041845bb3d25f3dd02277d2eae', 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: '14ee83c2409dc44690e041ee80542d555e7f1e93', name: "activity-close", size: "xx-small", margin: "none", color: "currentColor" })))), this.variation === "filter" && (h("span", { key: 'b1ca9ec7ec6fce48f4c33d2029ccd043a79dd803', class: classes }, h("input", Object.assign({ key: 'dbbf118c242b3a04c7df17eaf04a6f27fcc0eb40', "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: '898206f44f12092a9d4d695a8e7d09a56297671f', htmlFor: identifier }, this.icon && (h("span", { key: '0c337ba4f6e48d81752ff411e467f346fc87c311', class: "duet-chip-icon-container" }, h("duet-icon", { key: 'a24f796b0817c43c51e3e1676ab9d65a4fe07ad3', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), h("duet-icon", { key: '955cf61a6b57d6edc3c8d8350fb469efffad3803', name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" }))), h("slot", { key: '8f0b8996230a8dfe83414e89b7c796121de41526' }), this.popupElement && (h("span", { key: '37a42083a01d64d81bec08dcb9464ec450e17820', class: "duet-chip-popup-disclosure" }, h("duet-icon", { key: 'cb1d4646dd01cee1b69d45988aba671e8d606a91', name: "action-arrow-down-small", size: "xxx-small", margin: "none", color: "currentColor" })))))), this.variation === "radio" && (h("span", { key: '89d0d76772a7ff76799ee9d60329ca3dd81b7fd8', class: classes }, h("slot", { key: '391e609c08ee02a3b4153e5509736db840803e85', name: "input" }), h("label", { key: '233a831ddd3e6e850c69f4300f28b2b33a6c7dd3', htmlFor: identifier }, this.icon && (h("span", { key: '90edf79133173465641029aa158d36a568a31cfa', class: "duet-chip-icon-container" }, h("duet-icon", { key: 'a055c58682160fac0822611b692264e0bedb7b6c', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), h("duet-icon", { key: '14ca6369602be7c44b16ee89eabd77e3c26bb941', name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" }))), h("slot", { key: '63635381228bc16fc8f12cfed491dda50ce188a4' }))))));
-    }
-    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.scroll-visible{overflow-y:scroll;scroll-margin:20px}.duet-popup-menu-list.duet-theme-turva{color:rgb(23, 28, 58) !important;background:rgb(255, 255, 255)}::slotted(duet-notification){max-width:360px}";
-const DuetPopupMenuStyle0 = duetPopupMenuCss;
-
-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 }),
-                this.allowVerticalFlip && flip(),
-                shift({ padding: 5 }),
-            ].filter(Boolean);
-            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.placement = "bottom-start";
-        this.forcePlacement = false;
-        this.allowVerticalFlip = true;
-        this.position = "absolute";
-        this.mainAxisOffset = 0;
-        this.crossAxisOffset = 0;
-        this.controllerIcon = "action-arrow-down-small";
-        this.scrollLimit = undefined;
-    }
-    /**
-     * Element, or id of an element, that controls the opening and closing of the popup menu. If id is given,
-     * the component automatically sets the click event listener to open and close the popup-menu.
-     */
-    get controller() {
-        return this._controller;
-    }
-    set controller(value) {
-        if (this._controller === value) {
-            return;
-        }
-        this._controller = value;
-        if (typeof value === "string") {
-            this.setOpenButton(document.getElementById(value));
-            if (this.openButton) {
-                this.openButton.addEventListener("click", this.openButtonEventListener);
-            }
-        }
-        else {
-            this.setOpenButton(value);
-        }
-    }
-    /**
-     * Alias for property controller.
-     */
-    get opener() {
-        return this._controller;
-    }
-    set opener(value) {
-        this.controller = value;
-    }
-    /**
-     * Component lifecycle events.
-     */
-    componentWillLoad() {
-        inheritGlobalTheme(this);
-    }
-    componentDidLoad() {
-        {
-            this.updatePlacement();
-        }
-    }
-    connectedCallback() {
-        if (!this.teleport) {
-            this.teleport = new Teleport(this.element);
-        }
-        if (this.teleport) {
-            this.teleport.activate();
-        }
-    }
-    disconnectedCallback() {
-        if (this.autoUpdateCleanup) {
-            this.autoUpdateCleanup();
-        }
-        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.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() {
-        if (this.autoUpdateCleanup) {
-            this.autoUpdateCleanup();
-        }
-        this.open = false;
-    }
-    /**
-     * Toggle.
-     */
-    async toggle() {
-        if (this.open) {
-            this.hide();
-        }
-        else {
-            this.show();
-        }
-    }
-    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();
-            // Start autoUpdate when menu is open
-            if (this.menuElement && this.openButton) {
-                this.autoUpdateCleanup = autoUpdate(this.openButton, this.menuElement, 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;
-            }
-            // Clean up autoUpdate when closed
-            if (this.autoUpdateCleanup) {
-                this.autoUpdateCleanup();
-            }
-            setTimeout(() => {
-                if (this.accessibleRole === "menu") {
-                    focusElement(this.openButton);
-                }
-                this.duetToggle.emit({ open: this.open, component: "duet-popup-menu" });
-                if (this.accessibleRole !== "listbox") {
-                    this.teleport.removeInertFromSiblings();
-                }
-            }, 200);
-        }
-    }
-    get itemElements() {
-        return Array.from(this.element.querySelectorAll(":scope duet-popup-menu-item"));
-    }
-    get popupMenuStyleHeight() {
-        const selector = ":scope duet-popup-menu-item, :scope duet-notification";
-        const elements = Array.from(this.element.querySelectorAll(selector));
-        if (elements.length > 0 && this.scrollLimit) {
-            const paddings = Number(spaceXSmall.replace("px", "")) * 2;
-            return `${elements[0].offsetHeight * this.scrollLimit + paddings}px`;
-        }
-        else {
-            return "auto";
-        }
-    }
-    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",
-            height: this.popupMenuStyleHeight,
-        };
-        return (h(Host, { key: '90582d3282b14880a32333351bb6620f6d44eff1' }, h("div", { key: '78c0108809c63c62f3b5db7fdd5f9047d9638f11', ref: element => {
-                this.menuElement = element;
-            }, style: styles, class: {
-                open: this.open,
-                "duet-popup-menu-list": true,
-                "duet-theme-turva": this.theme === "turva",
-                "scroll-visible": this.scrollLimit < this.itemElements.length,
-            }, role: this.accessibleRole, "aria-label": this.accessibleLabel }, h("slot", { key: '39d3acbfbd438343dd24939b4edcd5cd50eb9a24' }))));
-    }
-    get element() { return getElement(this); }
-    static get watchers() { return {
-        "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: 'cf41248d3d1a61f191dbb0ed2806c55c3c4d21cd', role: this.accessibleRole }, h(TagName, { key: '8b823bad8e855fd0f6764bee4cf2a1b8b4fb9a1d', ref: element => (this.itemElement = element), tabIndex: this.accessibleRole === "listitem" ? 0 : -1, 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: '4d0c2297b77d0abaead13bfdbbbdbc099ff376c5', name: this.leadingIcon, size: "x-small", color: this.leadingIconColor ? this.leadingIconColor : "currentColor", class: "duet-popup-menu-item-leading", margin: "none" })), h("span", { key: 'c2d39fcf42a50143f23ecff659629f9031af39b3', class: "duet-popup-menu-item-label" }, h("slot", { key: 'ea485f9803d7123fdcd7d55b9fd9a93acdbe4553' })), (this.trailingIcon || this.active || (this.url && this.external)) && (h("duet-icon", { key: 'dfcfdfb08bcb7824d95cc1d9001600c787706c3b', name: this.url && this.external
-                ? actionNewWindowSmall.title
-                : this.active
-                    ? "messaging-checked-small"
-                    : this.trailingIcon, size: (this.url && this.external) || this.active ? "xx-small" : "x-small", color: "currentColor", class: "duet-popup-menu-item-trailing", margin: "none" })), this.trailingText && h("span", { key: 'c70b1e3990993a76cc765ee95429ac22089ba812', 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 };