@duetds/components 10.0.0-alpha.13 → 10.0.0-alpha.14

package/lib/dist-custom-elements/p-44ae5535.js

@@ -1,370 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-f2c2f3d2.js';
-import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
-import { c as createID } from './p-5e59e970.js';
-import { s as subscribeTabbingChange, u as unsubscribeTabbingChange, e as enableUserIsTabbing } from './p-8db11326.js';
-import { g as getLocaleString } from './p-35375593.js';
-import { d as defineCustomElement$1 } from './p-7b6a89e9.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:8px}.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:12px}.duet-chip-container.duet-chip-has-popup button,.duet-chip-container.duet-chip-has-popup label{padding-right:12px}.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 18px}.duet-chip-container.large.duet-chip-has-icon .duet-chip-icon-container{width:30px;padding-right:10px}.duet-chip-container.large .duet-chip-popup-disclosure{padding-right:6.5px;padding-left:14.5px}: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 = /*@__PURE__*/ proxyCustomElement(class DuetChip extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        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: '46a69a57f998d0c0166b60037b797d6baf5f9dcf', class: { [this.variation]: true } }, this.variation === "button" && (h("span", { key: 'f14a7e7961e381a83dde2b542900da07ac59fa54', class: classes }, h("button", Object.assign({ key: '0f725738f6e9ce7039ac33fa168d51cfd3b8dc2e', 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: '97f34648016ae83911e54937f74f0dbb73738c9a', class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { key: '3237c26c146b403f78f3ef6af06b4864c7bf3716', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", { key: '209b531e799ac5a6bec3598022039d615c752b85' })))), this.variation === "input" && (h("span", { key: '70b98ffe8f5631d6fc373ece2c8e53b99bd98bde', class: classes, "aria-label": this.getAccessibleInputChipLabel() }, h("button", Object.assign({ key: '301e015031ecf5152f61c91037fefdf7ffb77f12', 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: '02e969ba27a74e04e830ecc2e4d271a4d52cd794', class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { key: 'e7ac724500b002c2cf77cdc0d6c549e24d3568b1', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", { key: 'c2b4f7271efda1211ce689ea22b9d635fef33780' })), h("button", { key: '99c6a19f93075416fa591e87232de703e4823519', 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: 'bdef6ea217a53a029a5c854633b56fed43a354a2', name: "activity-close", size: "xx-small", margin: "none", color: "currentColor" })))), this.variation === "filter" && (h("span", { key: '97d49fc850b83a139651c2bb4819d1bb81927d0e', class: classes }, h("input", Object.assign({ key: '13618629126562c8815f2a21441316d9aa38445b', "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: '88320e9af92b70dfce7e8c99dc755207bedbf68c', htmlFor: identifier }, this.icon && (h("span", { key: 'b2169137f4dbbb2ab8b05d6d47c0bfa64eabe5b1', class: "duet-chip-icon-container" }, h("duet-icon", { key: '81b812cc70190f762d7240aeae4d3437900c0945', name: this.icon, size: this.size === "large" ? "small" : "x-small", margin: "none", color: "currentColor" }), h("duet-icon", { key: '1f0dc8d15f70b2c69c702294cd1bae83d8d4c85b', name: "messaging-checked-small", size: this.size === "large" ? "x-small" : "xx-small", margin: "none", color: "currentColor", class: "check-mark" }))), h("slot", { key: 'db6a2c995d106e08a06d4b25acbab988393f5a53' }), this.popupElement && (h("span", { key: '750461801b1c1285b7a65568394da0f4de6c09b8', class: "duet-chip-popup-disclosure" }, h("duet-icon", { key: '7f09c951cc1fee74938eda68d2cb765df24c5a55', name: "action-arrow-down-small", size: this.size === "large" ? "xx-small" : "xxx-small", margin: "none", color: "currentColor" })))))), this.variation === "radio" && (h("span", { key: '6bf60c4efeec14f1bc97c936a1763b9c802fdc61', class: classes }, h("slot", { key: '09ac910ee61923f4ae83d73bbbf70c926607af3e', name: "input" }), h("label", { key: '527051a5a41bd6218b84c60bc032eabc62cafbd6', htmlFor: identifier }, this.icon && (h("span", { key: 'ca3e9630f67edf27ef1d2f33712da9326c228c7c', class: "duet-chip-icon-container" }, h("duet-icon", { key: '19f64f9e481f3e19574183ab90e79719bff4ac31', name: this.icon, size: this.size === "large" ? "small" : "x-small", margin: "none", color: "currentColor" }), h("duet-icon", { key: 'ef5f75a78a90ac53af54f41fdc058d14e09a70f1', name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" }))), h("slot", { key: '2127b88ed65812032bb496029f7cd70c3497738d' }))))));
-    }
-    get element() { return this; }
-    static get watchers() { return {
-        "checked": ["clearOtherRadioButtons"]
-    }; }
-    static get style() { return DuetChipStyle0; }
-}, [1, "duet-chip", {
-        "accessibleLabel": [1, "accessible-label"],
-        "variation": [1],
-        "size": [1],
-        "popup": [1],
-        "icon": [1],
-        "theme": [1025],
-        "identifier": [1],
-        "value": [1537],
-        "name": [1],
-        "selected": [1028],
-        "checked": [1540],
-        "disabled": [4],
-        "accessibleExpanded": [1540, "accessible-expanded"],
-        "accessiblePopup": [1537, "accessible-popup"],
-        "focus": [32],
-        "popupElement": [32],
-        "popupOpen": [32],
-        "inputChipHover": [32],
-        "inputChipDeleteFocus": [32],
-        "setFocus": [64],
-        "setDeleteFocus": [64],
-        "removeChip": [64]
-    }, undefined, {
-        "checked": ["clearOtherRadioButtons"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["duet-chip", "duet-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "duet-chip":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DuetChip);
-            }
-            break;
-        case "duet-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { DuetChip as D, defineCustomElement as d };

package/lib/dist-custom-elements/p-49b8ef8e.js

@@ -1,55 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { p as proxyCustomElement, H, h, d as Host } from './p-f2c2f3d2.js';
-import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
-
-const duetCheckmarkCss = ".duet-checkmark-container{position:relative;width:20px;height:20px;margin-left:auto;border:1px solid rgb(127, 150, 165);border-radius:4px;transition:border 300ms ease}.duet-checkmark-container.center{margin-right:auto}.duet-theme-turva .duet-checkmark-container{border-color:rgb(143, 147, 158)}.checked .duet-checkmark-container{background:rgb(0, 119, 179);border-color:rgb(0, 119, 179);transition:none}.duet-theme-turva .checked .duet-checkmark-container{background:rgb(23, 28, 58);border-color:rgb(23, 28, 58) !important}.duet-checkmark-container.duet-checkmark-radio{border-radius:50%}[disabled]+label .duet-checkmark-container{border-color:rgb(181, 198, 208) !important}.duet-theme-turva [disabled]+label .duet-checkmark-container{border-color:rgb(199, 202, 207) !important}.checked [disabled]+label .duet-checkmark-container{background:rgb(181, 198, 208) !important}.duet-theme-turva .checked [disabled]+label .duet-checkmark-container{background:rgb(199, 202, 207) !important}.duet-checkmark{position:absolute;top:10px;left:3px;width:5.3333333333px;height:11.8518518519px;border-top:2px solid rgb(255, 255, 255);border-right:2px solid rgb(255, 255, 255);opacity:1;transform:scaleX(-1) rotate(135deg) translateZ(0);transform-origin:left top;animation-name:duet-checkmark;animation-duration:600ms;animation-timing-function:ease-out;animation-fill-mode:forwards}@keyframes duet-checkmark{0%{width:0;height:0;opacity:1}20%{width:5.3333333333px;height:0;opacity:1}40%,100%{width:5.3333333333px;height:11.8518518519px;opacity:1}}";
-const DuetCheckmarkStyle0 = duetCheckmarkCss;
-
-const DuetCheckmark = /*@__PURE__*/ proxyCustomElement(class DuetCheckmark extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.theme = "";
-        this.checked = false;
-        this.presentationOnly = false;
-        this.center = false;
-        this.type = "checkbox";
-    }
-    /**
-     * Component lifecycle events.
-     */
-    componentWillLoad() {
-        inheritGlobalTheme(this);
-    }
-    render() {
-        return (h(Host, { key: 'caecd120e1d9dbb58576c5418a9d366222e6b7fd', class: { "duet-theme-turva": this.theme === "turva" } }, h("div", { key: '95b69ff51e73ee023546d841fd509112ed21e15f', role: this.presentationOnly ? "presentation" : null, class: { checked: this.checked } }, h("div", { key: '719abe3397f62c6023cc005d17f2ce5936713c56', class: {
-                "duet-checkmark-container": true,
-                center: this.center,
-                "duet-checkmark-radio": this.type === "radio",
-            } }, this.checked && h("div", { key: 'ca9c9665c861d60e53cdd25e81d7542b0dff68b3', class: "duet-checkmark" })))));
-    }
-    static get style() { return DuetCheckmarkStyle0; }
-}, [0, "duet-checkmark", {
-        "theme": [1025],
-        "checked": [1028],
-        "presentationOnly": [4, "presentation-only"],
-        "center": [4],
-        "type": [513]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["duet-checkmark"];
-    components.forEach(tagName => { switch (tagName) {
-        case "duet-checkmark":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DuetCheckmark);
-            }
-            break;
-    } });
-}
-
-export { DuetCheckmark as D, defineCustomElement as d };

package/lib/dist-custom-elements/p-4f6ac36d.js

@@ -1,39 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { p as proxyCustomElement, H, h, d as Host } from './p-f2c2f3d2.js';
-
-const duetVisuallyHiddenCss = ":host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;position:absolute !important;top:0;width:1px !important;height:1px !important;padding:0 !important;overflow:hidden !important;clip:rect(1px, 1px, 1px, 1px) !important;border:0 !important}";
-const DuetVisuallyHiddenStyle0 = duetVisuallyHiddenCss;
-
-const DuetVisuallyHidden = /*@__PURE__*/ proxyCustomElement(class DuetVisuallyHidden extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-    }
-    /**
-     * render() function
-     * Always the last one in the class.
-     */
-    render() {
-        return (h(Host, { key: '4c78114391a6afd075e687070b33906509017606', class: "duet-visually-hidden" }, h("slot", { key: '85fa5269b5b0c7d8a49b03a2e488cdbef56beb6d' })));
-    }
-    get element() { return this; }
-    static get style() { return DuetVisuallyHiddenStyle0; }
-}, [1, "duet-visually-hidden"]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["duet-visually-hidden"];
-    components.forEach(tagName => { switch (tagName) {
-        case "duet-visually-hidden":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DuetVisuallyHidden);
-            }
-            break;
-    } });
-}
-
-export { DuetVisuallyHidden as D, defineCustomElement as d };

package/lib/dist-custom-elements/p-605c5b0f.js

@@ -1,61 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { p as proxyCustomElement, H, h, d as Host } from './p-f2c2f3d2.js';
-import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
-
-const duetBadgeCss = "*,*::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:4px !important;margin-bottom:2px !important;display:inline-block;width:auto;vertical-align:middle}:host:last-child,:host:last-of-type{margin-right:0 !important}:host(.duet-m-0){margin:0 !important}.duet-badge{display:inline-block;width:100%;padding:4.4444444444px 12px 5.4444444444px;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.75rem;font-style:normal;font-weight:600;line-height:1.25;color:rgb(8, 42, 77);text-align:center;word-break:break-word;vertical-align:middle;background:#d9ebf4;border-radius:20rem}.duet-badge.duet-p-0{padding:0 !important}.duet-badge.duet-m-0{margin:0 !important}.duet-badge.duet-theme-turva{padding:5.4444444444px 12px 4.4444444444px;font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-weight:700;color:rgb(23, 28, 58);background:#e8e8eb}.duet-badge.warning{background:#fdecc9}.duet-badge.warning.duet-theme-turva{background:#fdecc9}.duet-badge.danger{background:#f7d2dc}.duet-badge.danger.duet-theme-turva{background:#f7d2dc}.duet-badge.success{background:#d6e6e1}.duet-badge.success.duet-theme-turva{background:#d6e6e1}.duet-badge.subtle{color:rgb(98, 121, 138);background:none;outline:1px solid rgb(212, 223, 229);outline-offset:-1px}.duet-badge.subtle.duet-theme-turva{color:rgb(113, 118, 132);background:none;outline-color:rgb(222, 224, 228)}.duet-badge.background-strong.default{color:rgb(255, 255, 255);background:rgb(0, 119, 179)}.duet-badge.background-strong.default.duet-theme-turva{color:rgb(255, 255, 255);background:rgb(23, 28, 58)}.duet-badge.background-strong.warning{background:#f9c153}.duet-badge.background-strong.warning.duet-theme-turva{background:#f9c153}.duet-badge.background-strong.danger{color:rgb(255, 255, 255);background:rgb(214, 28, 82)}.duet-badge.background-strong.danger.duet-theme-turva{color:rgb(255, 255, 255);background:rgb(214, 28, 82)}.duet-badge.background-strong.success{color:rgb(255, 255, 255);background:rgb(48, 131, 105)}.duet-badge.background-strong.success.duet-theme-turva{color:rgb(255, 255, 255);background:rgb(48, 131, 105)}.duet-badge.background-strong.subtle{border-color:rgb(181, 198, 208);outline-color:rgb(8, 42, 77)}.duet-badge.background-strong.subtle.duet-theme-turva{border-color:rgb(199, 202, 207);outline-color:rgb(23, 28, 58)}";
-const DuetBadgeStyle0 = duetBadgeCss;
-
-const DuetBadge = /*@__PURE__*/ proxyCustomElement(class DuetBadge extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.theme = "";
-        this.variation = "default";
-        this.background = "normal";
-        this.margin = "auto";
-    }
-    /**
-     * Component lifecycle events.
-     */
-    componentWillLoad() {
-        inheritGlobalTheme(this);
-    }
-    /**
-     * render() function
-     * Always the last one of the class.
-     */
-    render() {
-        const backgroundClass = `background-${this.background}`;
-        return (h(Host, { key: '33720282bd0de35b29a36d2c580eb0188adf3d2f', class: { "duet-m-0": this.margin === "none" } }, h("span", { key: 'd130655704b79c828ca2a86964f51a88686b2770', class: {
-                "duet-badge": true,
-                [this.variation]: true,
-                [backgroundClass]: true,
-                "duet-theme-turva": this.theme === "turva",
-            } }, h("slot", { key: 'bbfb3fa8216678fa644ff4844212cabd2c9ed0e2' }))));
-    }
-    get element() { return this; }
-    static get style() { return DuetBadgeStyle0; }
-}, [1, "duet-badge", {
-        "theme": [1025],
-        "variation": [1],
-        "background": [1],
-        "margin": [1]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["duet-badge"];
-    components.forEach(tagName => { switch (tagName) {
-        case "duet-badge":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DuetBadge);
-            }
-            break;
-    } });
-}
-
-export { DuetBadge as D, defineCustomElement as d };

package/lib/dist-custom-elements/p-61a64a72.js

@@ -1,110 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { p as proxyCustomElement, H, h, d as Host } from './p-f2c2f3d2.js';
-import { d as defineCustomElement$1 } from './p-4f6ac36d.js';
-
-const DuetUploadAriaStatus = /*@__PURE__*/ proxyCustomElement(class DuetUploadAriaStatus extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        /**
-         * Private functions
-         */
-        this.replacePlaceHolders = (statusString) => {
-            const addFiles = (amount) => {
-                return amount > 1 ? `${amount} ${this.statusMessageLabel.files}` : `${amount} ${this.statusMessageLabel.file}`;
-            };
-            return statusString
-                .replace("{filesUploaded}", addFiles(this.valid))
-                .replace("{filesInProgress}", addFiles(this.inprogress))
-                .replace("{filesTotal}", addFiles(this.total))
-                .replace("{filesWithErrors}", addFiles(this.invalid));
-        };
-        this.getStatusMessage = () => {
-            const { done, inProgress, doneWithErrors, inProgressWithErrors } = this.statusMessageLabel;
-            const hasErrors = this.invalid > 0;
-            const isInProgress = this.inprogress > 0;
-            const isInProgressWithErrors = this.inprogress > 0 && hasErrors;
-            const isDone = this.valid === this.total && !isInProgress && !hasErrors;
-            const isDoneWithErrors = this.valid + this.invalid === this.total && !isInProgress;
-            if (isDone) {
-                this.statusMessage = this.replacePlaceHolders(done);
-                return;
-            }
-            else if (isInProgressWithErrors) {
-                this.statusMessage = this.replacePlaceHolders(inProgressWithErrors);
-                return;
-            }
-            else if (isInProgress) {
-                this.statusMessage = this.replacePlaceHolders(inProgress);
-                return;
-            }
-            else if (isDoneWithErrors) {
-                this.statusMessage = this.replacePlaceHolders(doneWithErrors);
-                return;
-            }
-            return;
-        };
-        this.statusMessage = null;
-        this.statusMessageLabel = null;
-        this.accessibleAriaLive = "polite";
-        this.valid = undefined;
-        this.total = undefined;
-        this.invalid = undefined;
-        this.inprogress = undefined;
-    }
-    watchHandler(newValue, oldValue) {
-        if (newValue !== oldValue) {
-            this.getStatusMessage();
-        }
-    }
-    /**
-     * render() function
-     * Always the last one in the class.
-     */
-    render() {
-        return (h(Host, { key: '3c8090b6aa882906ddf465b2d7e55cdd8718d4a0', role: "status", "aria-live": "assertive", "aria-atomic": "true", "aria-relevant": "all" }, h("duet-visually-hidden", { key: '2de9db4f9461b3cefe88e580d7862bb0950923f1' }, this.statusMessage)));
-    }
-    get element() { return this; }
-    static get watchers() { return {
-        "valid": ["watchHandler"],
-        "invalid": ["watchHandler"],
-        "inprogress": ["watchHandler"],
-        "total": ["watchHandler"]
-    }; }
-}, [1, "duet-upload-aria-status", {
-        "statusMessageLabel": [16],
-        "accessibleAriaLive": [1, "accessible-aria-live"],
-        "valid": [2],
-        "total": [2],
-        "invalid": [2],
-        "inprogress": [2],
-        "statusMessage": [32]
-    }, undefined, {
-        "valid": ["watchHandler"],
-        "invalid": ["watchHandler"],
-        "inprogress": ["watchHandler"],
-        "total": ["watchHandler"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["duet-upload-aria-status", "duet-visually-hidden"];
-    components.forEach(tagName => { switch (tagName) {
-        case "duet-upload-aria-status":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DuetUploadAriaStatus);
-            }
-            break;
-        case "duet-visually-hidden":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { DuetUploadAriaStatus as D, defineCustomElement as d };