@duetds/components 9.1.2 → 9.2.1

package/lib/dist-custom-elements/p-01dec611.js

@@ -0,0 +1,368 @@
+/*!
+ * Built with Duet Design System
+ */
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-1149a5f1.js';
+import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
+import { c as createID } from './p-5e59e970.js';
+import { s as subscribeTabbingChange, u as unsubscribeTabbingChange } from './p-ca700701.js';
+import { g as getLocaleString } from './p-69f6a6aa.js';
+import { d as defineCustomElement$1 } from './p-3883514c.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 = /*@__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;
+            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 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-9635880c.js → p-0cf30970.js}

@@ -1,17 +1,17 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-926dfd0d.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-1149a5f1.js';
 import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
 import { c as createID } from './p-5e59e970.js';
 import { d as debounce } from './p-9e371678.js';
-import { i as isKeyboardClick } from './p-785686e3.js';
+import { i as isKeyboardClick } from './p-ca700701.js';
 import { g as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './p-69f6a6aa.js';
-import { c as capitalizeFirstLetter, g as getColorByName, s as shadeRGBColor } from './p-fac41d14.js';
-import { d as defineCustomElement$2 } from './p-7a8eda34.js';
-import { d as defineCustomElement$1 } from './p-f5924b7d.js';
+import { c as capitalizeFirstLetter, g as getColorByName, s as shadeRGBColor } from './p-9fa78368.js';
+import { d as defineCustomElement$2 } from './p-3883514c.js';
+import { d as defineCustomElement$1 } from './p-d551ba52.js';
 
-const duetActionButtonCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:inline-block;margin:0 auto}.duet-action-button{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;min-height:auto !important;padding:0 !important;margin:0 0 0 8px;color:rgb(0, 41, 77);white-space:nowrap;cursor:pointer;background:rgb(245, 248, 250);border-radius:50%;transition:background-color 300ms ease !important}.duet-action-button.duet-theme-turva{color:rgb(23, 28, 58);background:rgb(245, 245, 247)}.duet-action-button duet-icon{display:block}@media (max-width: 35.9375em){.duet-action-button{width:32px;height:32px}}.duet-action-button:not(:disabled):hover{background:#e9ecee}.duet-action-button:not(:disabled):hover.duet-theme-turva{background:#e9e9eb}.duet-action-button:focus{outline:0;box-shadow:0 0 0 2px #0077b3 !important}.duet-action-button:focus.duet-theme-turva{box-shadow:0 0 0 2px #171c3a !important}.duet-action-button:active:focus{background:#dddfe1 !important;box-shadow:none}.duet-action-button:active:focus.duet-theme-turva{background:#ddddde !important}.duet-action-button:disabled{color:rgb(144, 149, 153);cursor:default;background:rgb(245, 248, 250);opacity:0.75}.duet-action-button.duet-theme-turva:disabled{color:rgb(116, 116, 117);background:rgb(245, 245, 247)}";
+const duetActionButtonCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:inline-block;margin:0 auto}.duet-action-button{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;min-height:auto !important;padding:0 !important;margin:0 0 0 8px;color:rgb(8, 42, 77);white-space:nowrap;cursor:pointer;background:rgb(245, 248, 250);border-radius:50%;transition:background-color 300ms ease !important}.duet-action-button.duet-theme-turva{color:rgb(23, 28, 58);background:rgb(245, 247, 250)}.duet-action-button duet-icon{display:block}@media (max-width: 35.9375em){.duet-action-button{width:32px;height:32px}}.duet-action-button:not(:disabled):hover{background:#e9ecee}.duet-action-button:not(:disabled):hover.duet-theme-turva{background:#e9ebee}.duet-action-button:focus{outline:0;box-shadow:0 0 0 2px #0077b3 !important}.duet-action-button:focus.duet-theme-turva{box-shadow:0 0 0 2px #171c3a !important}.duet-action-button:active:focus{background:#dddfe1 !important;box-shadow:none}.duet-action-button:active:focus.duet-theme-turva{background:#dddee1 !important}.duet-action-button:disabled{color:rgb(127, 150, 165);cursor:default;background:rgb(245, 248, 250);opacity:0.75}.duet-action-button.duet-theme-turva:disabled{color:rgb(143, 147, 158);background:rgb(245, 247, 250)}";
 const DuetActionButtonStyle0 = duetActionButtonCss;
 
 const DuetActionButton = /*@__PURE__*/ proxyCustomElement(class DuetActionButton extends H {

package/lib/dist-custom-elements/{p-dc26d4a2.js → p-0e77715d.js}

@@ -14,7 +14,7 @@ const colorCategoryTravelTurva = "rgb(9, 129, 148)";
 const colorCategoryUnionTurva = "rgb(169, 69, 124)";
 const colorCategoryVehicle = "rgb(54, 74, 129)";
 const colorCategoryVehicleTurva = "rgb(23, 28, 58)";
-const colorDanger = "rgb(222, 35, 98)";
+const colorDanger = "rgb(214, 28, 82)";
 const colorDanger00 = "rgb(255, 240, 243)";
 const colorDanger100 = "rgb(255, 211, 219)";
 const colorDanger1000 = "rgb(89, 0, 45)";
@@ -27,7 +27,7 @@ const colorDanger600 = "rgb(214, 28, 82)";
 const colorDanger700 = "rgb(185, 16, 74)";
 const colorDanger800 = "rgb(153, 9, 66)";
 const colorDanger900 = "rgb(120, 4, 56)";
-const colorDangerTurva = "rgb(224, 42, 13)";
+const colorDangerTurva = "rgb(214, 28, 82)";
 const colorData01 = "rgb(122, 1, 196)";
 const colorData02 = "rgb(0, 155, 204)";
 const colorData03 = "rgb(27, 171, 75)";
@@ -43,18 +43,18 @@ const colorData12 = "rgb(11, 114, 136)";
 const colorData13 = "rgb(179, 137, 24)";
 const colorData14 = "rgb(128, 98, 17)";
 const colorData15 = "rgb(0, 41, 77)";
-const colorGray = "rgb(207, 210, 212)";
-const colorGrayDark = "rgb(144, 149, 153)";
-const colorGrayDarkTurva = "rgb(116, 116, 117)";
-const colorGrayDarker = "rgb(101, 119, 135)";
-const colorGrayDarkerTurva = "rgb(68, 68, 69)";
-const colorGrayLight = "rgb(225, 227, 230)";
-const colorGrayLightTurva = "rgb(228, 228, 230)";
+const colorGray = "rgb(181, 198, 208)";
+const colorGrayDark = "rgb(127, 150, 165)";
+const colorGrayDarkTurva = "rgb(143, 147, 158)";
+const colorGrayDarker = "rgb(98, 121, 138)";
+const colorGrayDarkerTurva = "rgb(113, 118, 132)";
+const colorGrayLight = "rgb(212, 223, 229)";
+const colorGrayLightTurva = "rgb(222, 224, 228)";
 const colorGrayLighter = "rgb(245, 248, 250)";
-const colorGrayLighterTurva = "rgb(245, 245, 247)";
+const colorGrayLighterTurva = "rgb(245, 247, 250)";
 const colorGrayLightest = "rgb(255, 255, 255)";
 const colorGrayLightestTurva = "rgb(255, 255, 255)";
-const colorGrayTurva = "rgb(207, 207, 209)";
+const colorGrayTurva = "rgb(199, 202, 207)";
 const colorLtBlue00 = "rgb(240, 247, 250)";
 const colorLtBlue100 = "rgb(217, 236, 245)";
 const colorLtBlue1000 = "rgb(8, 42, 77)";
@@ -80,20 +80,20 @@ const colorLtGray700 = "rgb(62, 84, 102)";
 const colorLtGray800 = "rgb(45, 64, 81)";
 const colorLtGray900 = "rgb(30, 45, 59)";
 const colorPrimary = "rgb(0, 119, 179)";
-const colorPrimaryDark = "rgb(0, 77, 128)";
-const colorPrimaryDarkTurva = "rgb(148, 9, 37)";
-const colorPrimaryDarker = "rgb(0, 98, 154)";
-const colorPrimaryDarkerTurva = "rgb(173, 11, 43)";
-const colorPrimaryLight = "rgb(205, 229, 241)";
-const colorPrimaryLightTurva = "rgb(244, 207, 214)";
-const colorPrimaryLighter = "rgb(230, 242, 248)";
-const colorPrimaryLighterTurva = "rgb(249, 230, 234)";
-const colorPrimaryLightest = "rgb(243, 249, 252)";
-const colorPrimaryLightestTurva = "rgb(252, 243, 244)";
+const colorPrimaryDark = "rgb(0, 75, 129)";
+const colorPrimaryDarkTurva = "rgb(126, 2, 35)";
+const colorPrimaryDarker = "rgb(0, 97, 155)";
+const colorPrimaryDarkerTurva = "rgb(164, 4, 40)";
+const colorPrimaryLight = "rgb(198, 225, 238)";
+const colorPrimaryLightTurva = "rgb(255, 185, 190)";
+const colorPrimaryLighter = "rgb(228, 241, 247)";
+const colorPrimaryLighterTurva = "rgb(255, 227, 228)";
+const colorPrimaryLightest = "rgb(240, 247, 250)";
+const colorPrimaryLightestTurva = "rgb(255, 241, 241)";
 const colorPrimaryTurva = "rgb(198, 12, 48)";
-const colorSecondary = "rgb(0, 41, 77)";
+const colorSecondary = "rgb(8, 42, 77)";
 const colorSecondaryTurva = "rgb(23, 28, 58)";
-const colorSuccess = "rgb(0, 135, 90)";
+const colorSuccess = "rgb(48, 131, 105)";
 const colorSuccess00 = "rgb(244, 250, 247)";
 const colorSuccess100 = "rgb(218, 246, 233)";
 const colorSuccess1000 = "rgb(4, 38, 33)";
@@ -106,7 +106,7 @@ const colorSuccess600 = "rgb(77, 171, 143)";
 const colorSuccess700 = "rgb(48, 131, 105)";
 const colorSuccess800 = "rgb(29, 106, 88)";
 const colorSuccess900 = "rgb(13, 71, 59)";
-const colorSuccessTurva = "rgb(8, 135, 78)";
+const colorSuccessTurva = "rgb(48, 131, 105)";
 const colorTurvaGray00 = "rgb(245, 247, 250)";
 const colorTurvaGray100 = "rgb(222, 224, 228)";
 const colorTurvaGray1000 = "rgb(8, 13, 38)";
@@ -144,7 +144,7 @@ const colorWarning600 = "rgb(212, 151, 32)";
 const colorWarning700 = "rgb(156, 110, 22)";
 const colorWarning800 = "rgb(126, 87, 16)";
 const colorWarning900 = "rgb(81, 55, 9)";
-const colorWarningTurva = "rgb(250, 164, 15)";
+const colorWarningTurva = "rgb(247, 178, 40)";
 const fontFamilyHeading = "'localtapiola-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'";
 const fontFamilyHeadingTurva = "'turva-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'";
 const fontFamilyText = "'localtapiola-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'";

package/lib/dist-custom-elements/{p-926dfd0d.js → p-1149a5f1.js}

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

package/lib/dist-custom-elements/{p-7dfb4906.js → p-14903ee8.js}

@@ -1,13 +1,13 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-926dfd0d.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-1149a5f1.js';
 import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
 import { c as createID } from './p-5e59e970.js';
 import { h as hasSlot } from './p-c5df07b9.js';
-import { d as defineCustomElement$1 } from './p-3caf29d6.js';
+import { d as defineCustomElement$1 } from './p-791ee647.js';
 
-const duetFieldsetCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-bottom:12px !important;display:block;width:100%}:host(.duet-m-0){margin:0 !important}fieldset{position:relative;width:100%;min-width:0;border:0}fieldset legend{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}.duet-legend-wrapper{position:relative;display:block;width:100%;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:600;line-height:1.5;color:rgb(0, 41, 77);text-align:left;background:transparent}.duet-legend-wrapper.duet-legend-compact:not(.duet-legend-has-caption){line-height:1.25}.duet-theme-turva .duet-legend-wrapper{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-fieldset-label{margin-bottom:12px !important;margin-top:8px}.duet-legend-has-caption .duet-fieldset-label{margin-bottom:6px !important}.duet-legend-has-tooltip .duet-fieldset-label{padding-right:36px}@media (min-width: 48em){.duet-legend-has-tooltip .duet-fieldset-label{margin-bottom:3px !important;padding-right:0}}@media (min-width: 48em){.duet-legend-has-tooltip.duet-legend-has-caption .duet-fieldset-label{margin-bottom:-3px !important}}.duet-fieldset-caption{margin-bottom:12px !important}.duet-fieldset-help{display:block;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:0.875rem;font-weight:400;line-height:1.25;color:rgb(222, 35, 98);border-radius:4px}.duet-fieldset-help span{display:block;margin-top:12px}.duet-theme-turva .duet-fieldset-help{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(224, 42, 13)}::slotted(duet-tooltip){position:absolute;top:4px;right:0}@media (min-width: 48em){::slotted(duet-tooltip){position:relative;right:auto}}.duet-legend-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}";
+const duetFieldsetCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-bottom:12px !important;display:block;width:100%}:host(.duet-m-0){margin:0 !important}fieldset{position:relative;width:100%;min-width:0;border:0}fieldset legend{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}.duet-legend-wrapper{position:relative;display:block;width:100%;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:600;line-height:1.5;color:rgb(8, 42, 77);text-align:left;background:transparent}.duet-legend-wrapper.duet-legend-compact:not(.duet-legend-has-caption){line-height:1.25}.duet-theme-turva .duet-legend-wrapper{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-fieldset-label{margin-bottom:12px !important;margin-top:8px}.duet-legend-has-caption .duet-fieldset-label{margin-bottom:6px !important}.duet-legend-has-tooltip .duet-fieldset-label{padding-right:36px}@media (min-width: 48em){.duet-legend-has-tooltip .duet-fieldset-label{margin-bottom:3px !important;padding-right:0}}@media (min-width: 48em){.duet-legend-has-tooltip.duet-legend-has-caption .duet-fieldset-label{margin-bottom:-3px !important}}.duet-fieldset-caption{margin-bottom:12px !important}.duet-fieldset-help{display:block;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:0.875rem;font-weight:400;line-height:1.25;color:rgb(214, 28, 82);border-radius:4px}.duet-fieldset-help span{display:block;margin-top:12px}.duet-theme-turva .duet-fieldset-help{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(214, 28, 82)}::slotted(duet-tooltip){position:absolute;top:4px;right:0}@media (min-width: 48em){::slotted(duet-tooltip){position:relative;right:auto}}.duet-legend-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}";
 const DuetFieldsetStyle0 = duetFieldsetCss;
 
 const DuetFieldset = /*@__PURE__*/ proxyCustomElement(class DuetFieldset extends H {
@@ -43,20 +43,20 @@ const DuetFieldset = /*@__PURE__*/ proxyCustomElement(class DuetFieldset extends
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '4da3e5f66820460f1ef0493f60f630c76d818473', class: { "duet-m-0": this.margin === "none" } }, h("fieldset", { key: 'ed739d61e287215e42e4506b4c71595540bc361d', "aria-labelledby": this.labelId, "aria-describedby": this.error ? this.errorId : null,
+        return (h(Host, { key: '48d4ee16b180357c5f92388611b1d9811fc560ad', class: { "duet-m-0": this.margin === "none" } }, h("fieldset", { key: '8c8ec9d18b60ea69f0f8a7bc68f0a27fd93d7b4a', "aria-labelledby": this.labelId, "aria-describedby": this.error ? this.errorId : null,
             // NVDA and VoiceOver do not yet support aria-errormessage
             // once they do, we can remove errors from the aria-describedby
             // aria-errormessage={this.error ? this.errorId : null}
             class: {
                 "duet-fieldset": true,
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("legend", { key: '2bad3be10867df4d945fd05b0dc208107ed6a792', id: this.labelId }, h(this.labelHeadingLevel, { key: 'd6cc673f67359ddd2ee7e5edd740de0c465e1ac8' }, this.label), this.caption && h("span", { key: '1831049370a39c6d8ac1e63cad3f56516ffa2073' }, this.caption)), h("div", { key: '58aeac7ddfee203189ab2e9f9d796b370de6ab89', class: {
+            } }, h("legend", { key: '6f165b5e848a765821866fe0f8cf622fb5f43231', id: this.labelId }, h(this.labelHeadingLevel, { key: '68c8512465df39e946cb40414c248bdac8e201d6' }, this.label), this.caption && h("span", { key: 'c4e7436c129b51e34efb44bdc4ac4cff1fd0264a' }, this.caption)), h("div", { key: 'fb2d654dc97701d77af4a089af9d05d334b76d9d', class: {
                 "duet-legend-wrapper": true,
                 "duet-legend-has-caption": !!this.caption,
                 "duet-legend-has-tooltip": this.hasTooltip,
                 "duet-legend-hidden": this.labelHidden,
                 "duet-legend-compact": this.compactLabel,
-            } }, h("div", { key: '5572f59933addae60637f304ffb1dc900313375e', class: "duet-fieldset-label" }, h("span", { key: '35c227c6950d0d5f2717a967d3d660022ef91915', "aria-hidden": "true" }, this.label), h("slot", { key: '1e0b4cff03a36a0e101e972b36d5bbfeef399e7f', onSlotchange: this.checkHasTooltip, name: "tooltip" })), this.caption && (h("div", { key: '139fb6fddaace73d9ef5e0d6c3c07b5281641f65', class: "duet-fieldset-caption", "aria-hidden": "true" }, h("duet-caption", { key: '4603eb768b61f4b6b342c5b08549dd708bcc2c1b', theme: this.theme, margin: "none" }, this.caption)))), h("slot", { key: '6e0732f202a8228c0b5c10d2dfe54f072e829837' }), h("span", { key: '90b501fd275d5bdd63a500c2478e0831b48f2fbe', class: "duet-fieldset-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: '55be98cfad770433b98a20fa045e1bcb15433441' }, this.error)))));
+            } }, h("div", { key: '4fc06cf70c203c6bb13b2ef7f73ed34aa0c5b7f3', class: "duet-fieldset-label" }, h("span", { key: 'ba029a7b2a434a26d454c6c679fd6692ffd1bf05', "aria-hidden": "true" }, this.label), h("slot", { key: 'f2f48a06fe8d6b4cd2636d11615375dba7faed00', onSlotchange: this.checkHasTooltip, name: "tooltip" })), this.caption && (h("div", { key: '5706095fca6636ba7009add12721c1d4f3d13338', class: "duet-fieldset-caption", "aria-hidden": "true" }, h("duet-caption", { key: 'd09d569c80f8a803eafd0e30339a62b40c0bbd29', theme: this.theme, margin: "none" }, this.caption)))), h("slot", { key: 'a6964b4d2a1932e979cc94ca7542fb2041582aac' }), h("span", { key: 'd92b76a6fab3c900a8b9f42301dd234e62632cfd', class: "duet-fieldset-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: '0006b187f93449997c58335e12cbe51c899e972a' }, this.error)))));
     }
     get element() { return this; }
     static get style() { return DuetFieldsetStyle0; }