@duetds/components 9.2.8 → 10.0.0-alpha.0

package/lib/collection/components/duet-tray/duet-tray.js

@@ -87,14 +87,14 @@ export class DuetTray {
      * Always the last one in the class.
      */
     render() {
-        return (h("div", { key: 'e80fe0fea16e56fab163357063b7e4872396a5ec', class: {
+        return (h("div", { key: '978707965f7036c59164be861c06e3a95d0b010c', class: {
                 "duet-tray": true,
                 "duet-tray-is-active": this.active,
                 "duet-tray-is-hidden": this.hiddenState,
                 "duet-tray-is-responsive": this.responsive,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-tray-is-expandable": this.hasAdditionalContent,
-            } }, h("div", { key: '262559150a618ae013cc1585a11f5c4dfa5b81ad', class: "duet-tray-default-content", role: "status" }, h("slot", { key: '2ad15f10fb23db0693d3a39d6c30f5b8f0eff769' })), this.hasAdditionalContent && (h(Fragment, { key: '61ac87d6890bf410e73f5fddbf7e2f348ae2fb12' }, h("button", { key: '7ae889dcf9db8311adffc4f88e75d9280c23752c', "aria-expanded": this.expanded ? "true" : "false", "aria-controls": this.expandableId, onClick: ev => this.toggleExpandable(ev), class: { "duet-tray-button": true, "duet-tray-is-expanded": this.expanded } }, h("duet-icon", { key: 'a514192731466d4e27aca7dc6b350aa3f8782616', name: "action-arrow-down", size: "small", color: "currentColor", margin: "none" }), h("duet-visually-hidden", { key: 'b93df79ffc46a2e60b7568b393c5643997e9d0ae' }, this.expanded ? this.accessibleCloseLabel : this.accessibleOpenLabel)), h("div", { key: 'd611d0e82cd9fa7fdcbbe203986f2a82bd44e02f', id: this.expandableId, class: { "duet-tray-expandable": true, active: this.expanded } }, h("div", { key: '30fe3c388378678752f99d6cb9548d7ec7c42c4d', class: "duet-tray-expandable-content" }, h("slot", { key: 'e25622cbef097b9ac74de3a8264a7556f4be7722', name: "additional" })))))));
+            } }, h("div", { key: 'fa71800b202335afe225062b6546c259024d1ebc', class: "duet-tray-default-content", role: "status" }, h("slot", { key: '88504b3e7785cb2c996ca2a69f4f7613b3142641' })), this.hasAdditionalContent && (h(Fragment, { key: 'b7bbc3062d4b56e76021d7fb1e275033b1d973de' }, h("button", { key: '9f63e2b609caa6ba75251270b1e3f21e2c51900f', "aria-expanded": this.expanded ? "true" : "false", "aria-controls": this.expandableId, onClick: ev => this.toggleExpandable(ev), class: { "duet-tray-button": true, "duet-tray-is-expanded": this.expanded } }, h("duet-icon", { key: '1976d894857521dba637850fd6d0f67dc5d2fb7c', name: "action-arrow-down", size: "small", color: "currentColor", margin: "none" }), h("duet-visually-hidden", { key: '52a51dd5b1c5f590ab6b69cb14f229df0b7af8cd' }, this.expanded ? this.accessibleCloseLabel : this.accessibleOpenLabel)), h("div", { key: '6258528ccbe8a9bb546ad35639457757583a4914', id: this.expandableId, class: { "duet-tray-expandable": true, active: this.expanded } }, h("div", { key: '79124cc2718b71d49e3ce57eaa405f7663f2db1e', class: "duet-tray-expandable-content" }, h("slot", { key: '842a4506b47dae4db5b81bd1fe551e09a08672f0', name: "additional" })))))));
     }
     static get is() { return "duet-tray"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-upload/duet-upload.js

@@ -753,10 +753,10 @@ export class DuetUpload {
             this.externalUploadButton.accessibleLabel = `${this.externalUploadButton.innerText}. ${caption}`;
         }
         // @ts-ignore
-        return (h(Host, { key: '44b4a9f8f0e99182d1db74ed7e2fb3237d90ed71', class: { "duet-m-0": this.margin === "none" } }, h("duet-fieldset", { key: '2231a57d1b606059e90c7406f24258d4b844cbe0', "label-heading-level": this.headerHeadingLevel, "label-hidden": this.hideHeader, label: this.label }, h("slot", { key: 'bb0e091ee3d4c96715018d1fc836d6cd5f938c75', name: "header" }), !this.files.size && (h("duet-empty-state", { key: 'd988bc2f8b6a4efc418a65b3ee575095b97ae06a', id: this.labelId, part: this.identifier ? `${this.identifier}-empty-state` : "duet-upload-empty-state", icon: "messaging-attachment" }, h("duet-paragraph", { key: 'b274a3b81132a5119c47bd365bbdd77f08280c17', margin: "none" }, this.fileListEmpty))), !!this.files.size && h("slot", { key: '5a2377d31360af5cbdae90130677853613899ec5', name: "fileheader" }), !!this.files.size && (h("duet-upload-aria-status", { key: '6fe002a8a312e6e067321c07e0b50ed786fd8dc3', invalid: this.getFilesAsArray().invalid.length, valid: this.getFilesAsArray().valid.length, inprogress: this.filesInProgress.size, total: this.files.size, statusMessageLabel: this.internalStatusMessageLabel })), !!this.files.size && this.renderUploadedItems(), !!this.files.size && h("slot", { key: '730c164e68660c49ce18f8fec5d8f184a640bcd9', name: "filefooter" }), h("slot", { key: '303c2be9f728196dc157cd29a39a926ca9951a88', name: "uploadfooter" }), this.captionOnBottom && (h("duet-caption", { key: 'd0e088aa37d8b789b3dc4efa9e070c74746877d0', margin: "none", size: "small" }, h("div", { key: 'e3ab58aaacb792a297bcc56154073c9289dd1c32', class: "upload-bottom-caption" }, caption))), h("slot", { key: '5a6d988ce4deff649f20207813758e023eb3d817', name: "afterfooter" }), !this.hideButton && (h(Fragment, { key: '86a890e223fb900e2420ea45564f8c4c484ddc8a' }, h("duet-spacer", { key: 'fdf03610301bb1368fb28db909a35e10320df054', size: "large" }), h("duet-button", { key: 'be03dc2d96b961dc22d63bf0bf4e1128e4c813d4', id: this.buttonId, onClick: this.startUpload, "accessible-controls": identifier, disabled: this.fileMaxReached, "accessible-label": this.accessibleButtonLabel || `${this.buttonLabel}. ${caption}`, "accessible-owns": identifier, size: "small", variation: "secondary", fixed: true, icon: "action-add-circle", part: this.identifier ? `${this.identifier}-button-upload` : "duet-upload-button-upload" }, this.buttonLabel))), (this.fileMaxReached ||
+        return (h(Host, { key: 'd9a06a80ee3dbe6c14afeba29034210c0876e030', class: { "duet-m-0": this.margin === "none" } }, h("duet-fieldset", { key: '91dd6b9b6702eda6b91bde8051ba3dc19f61897f', "label-heading-level": this.headerHeadingLevel, "label-hidden": this.hideHeader, label: this.label }, h("slot", { key: 'db5e4b9f271fe451b5d22f7400ec4c0d3a6f138e', name: "header" }), !this.files.size && (h("duet-empty-state", { key: '27ba6010ee533701bf11a149427d2216c8ce29d9', id: this.labelId, part: this.identifier ? `${this.identifier}-empty-state` : "duet-upload-empty-state", icon: "messaging-attachment" }, h("duet-paragraph", { key: 'e89c1d5f4ec256d1e3a78c3c39d2e70abf10e8e6', margin: "none" }, this.fileListEmpty))), !!this.files.size && h("slot", { key: '42eadc522cef6c31bf92926536586c335f70aa29', name: "fileheader" }), !!this.files.size && (h("duet-upload-aria-status", { key: '73e49bd8b917493fe195e9a41485bc92f7b28f87', invalid: this.getFilesAsArray().invalid.length, valid: this.getFilesAsArray().valid.length, inprogress: this.filesInProgress.size, total: this.files.size, statusMessageLabel: this.internalStatusMessageLabel })), !!this.files.size && this.renderUploadedItems(), !!this.files.size && h("slot", { key: 'f4af2ea636e86ad99ea095816a947160842e473a', name: "filefooter" }), h("slot", { key: '4f5808dd9f1d1f59a22358e889b465603fcf66e5', name: "uploadfooter" }), this.captionOnBottom && (h("duet-caption", { key: '098d617ed6b92abb83204dfd0c02f38aee307091', margin: "none", size: "small" }, h("div", { key: 'df692c821b64ef7d2a8e00f1b798e0d6ea28589b', class: "upload-bottom-caption" }, caption))), h("slot", { key: 'f5c2d00cef8aea857176ccfa0cf3ff52eb4b07ec', name: "afterfooter" }), !this.hideButton && (h(Fragment, { key: '6950dea516b4b35f4e5fb7c9d37afd340a151a14' }, h("duet-spacer", { key: '24eac12d73d7ed5ad8fab3be0777d7452bf326d7', size: "large" }), h("duet-button", { key: 'fb63b67dfcd988535867d4fde83bd13c110d9f1c', id: this.buttonId, onClick: this.startUpload, "accessible-controls": identifier, disabled: this.fileMaxReached, "accessible-label": this.accessibleButtonLabel || `${this.buttonLabel}. ${caption}`, "accessible-owns": identifier, size: "small", variation: "secondary", fixed: true, icon: "action-add-circle", part: this.identifier ? `${this.identifier}-button-upload` : "duet-upload-button-upload" }, this.buttonLabel))), (this.fileMaxReached ||
             this.bytesMaxReached ||
             this.filesToUploadExceedsLimit ||
-            this.filesToUploadTotalSizeIsAboveMax) && (h(Fragment, { key: '86937ba57803f4ca6379dcab097cf0d08d0962d7' }, h("duet-spacer", { key: '64e72354abfe4dad9e6c1d430e89900b38c50dec', size: "medium" }), h("duet-alert", { key: '02be9578a9bf4afdcda8ff3a9d280525a39e430c', part: this.identifier ? `${this.identifier}-error-notification` : "duet-upload-error-notification" }, this.fileMaxReached && getI18nError("duet-upload-301", this.errorCodes), this.bytesMaxReached && getI18nError("duet-upload-202", this.errorCodes), this.filesToUploadExceedsLimit && getI18nError("duet-upload-302", this.errorCodes), this.filesToUploadTotalSizeIsAboveMax && getI18nError("duet-upload-203", this.errorCodes)))), h("duet-visually-hidden", { key: '619dec515fc6147867da776c79f883d54a2ba9d3', "aria-hidden": "true" }, h("input", { key: '8e13ce6903fa6218b0e56035416dcddd154317a2', ref: input => {
+            this.filesToUploadTotalSizeIsAboveMax) && (h(Fragment, { key: '749d1166c084a9b2919b909ee7ab9246d2c0ebe7' }, h("duet-spacer", { key: '907c8f0f2709cf387eef1b2bb815335ded8ad30d', size: "medium" }), h("duet-alert", { key: '792b424865e2a20fe34eeb248cbd00e376bcd646', part: this.identifier ? `${this.identifier}-error-notification` : "duet-upload-error-notification" }, this.fileMaxReached && getI18nError("duet-upload-301", this.errorCodes), this.bytesMaxReached && getI18nError("duet-upload-202", this.errorCodes), this.filesToUploadExceedsLimit && getI18nError("duet-upload-302", this.errorCodes), this.filesToUploadTotalSizeIsAboveMax && getI18nError("duet-upload-203", this.errorCodes)))), h("duet-visually-hidden", { key: '31b3a469d2722362b44ee1e89e468f79e313fc7e', "aria-hidden": "true" }, h("input", { key: 'ee5f9699f2d29c0ac92d0ba78c3e007a0cc327cd', ref: input => {
                 this.nativeInput = input;
             }, accept: !this.limitSelection ? undefined : `${this.allowedMimetypes},${this.allowedExtensions}`, onBlur: this.onBlur, onFocus: this.onFocus, onChange: e => this.onChange(e), type: "file", class: {
                 "duet-upload": true,

package/lib/collection/components/duet-upload-aria-status/duet-upload-aria-status.js

@@ -64,7 +64,7 @@ export class DuetUploadAriaStatus {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '611ad37755190220c43a39fdcbfda6d808a0e285', role: "status", "aria-live": "assertive", "aria-atomic": "true", "aria-relevant": "all" }, h("duet-visually-hidden", { key: '4a2d84541cdf2e03c057210066ef4f53a3ef6b00' }, this.statusMessage)));
+        return (h(Host, { key: '177f33a14fe939c866cc4b465b1886899d97af29', role: "status", "aria-live": "assertive", "aria-atomic": "true", "aria-relevant": "all" }, h("duet-visually-hidden", { key: '410c70a49016691f5795d537a66ead6cc2a9bb64' }, this.statusMessage)));
     }
     static get is() { return "duet-upload-aria-status"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-upload-item/duet-upload-item.js

@@ -80,9 +80,9 @@ export class DuetUploadItem {
         const { uid, meta, item } = this.data;
         const Badges = meta && meta.badges ? (h("span", null, meta.badges.map(badgeText => (h("duet-badge", { color: "primary" }, badgeText))))) : undefined;
         const actionDescription = `${meta && meta.badges ? meta.badges.join(",") : ""} ${item.name}`;
-        return (h("div", { key: '3bd049f474c0e5ae36c863e12c83f420338f2120', class: {
+        return (h("div", { key: '499163ce1be1b45ff2d97156ce06d7d9f3fefeb2', class: {
                 "upload-item-row": true,
-            } }, this.showCategory && (h("div", { key: 'cabbda342b80dc26a8742b8c68f6f3ae836a78e5', class: "item-categories" }, h("duet-heading", { key: '9d9f798db399bf1c277b1a1b2699c15a8f8aff7d', class: "heading", color: "color-secondary", level: "h6", weight: "semibold" }, getLocaleString(this.categoryLabel)), Badges)), h("div", { key: 'e01fab2744f4cafdadb2defd3fd3da9262cdad68', class: { "item-name": true, "no-category": !this.showCategory } }, !!this.label && (h("duet-heading", { key: 'e9f12029fc48fa148169a7e962fa42c4a4acd05c', class: "heading", color: "color-secondary", level: "h6", weight: "semibold" }, getLocaleString(this.label))), this.getFileNameLine()), h("div", { key: '61536d97451f6b2be7a7cf2c616860d9f31fb174', class: "item-actions" }, this.actions.map(actionItem => {
+            } }, this.showCategory && (h("div", { key: '0486c8703101bcb3837161c24ad0fc1a4ffe215f', class: "item-categories" }, h("duet-heading", { key: '292cc4893eebebb39be0360efc9559c5de47b22e', class: "heading", color: "color-secondary", level: "h6", weight: "semibold" }, getLocaleString(this.categoryLabel)), Badges)), h("div", { key: '8e6c67e49f9b5bc79fc011bc44362392eb3b7b24', class: { "item-name": true, "no-category": !this.showCategory } }, !!this.label && (h("duet-heading", { key: '24f05bb11ee5970722963e688fd5c5e797a0e77c', class: "heading", color: "color-secondary", level: "h6", weight: "semibold" }, getLocaleString(this.label))), this.getFileNameLine()), h("div", { key: '1c93322e3405f0c329978af89b70c91e7eb9733d', class: "item-actions" }, this.actions.map(actionItem => {
             return (h("duet-action-button", { actionMeta: Object.assign({}, meta || {}), actionId: uid || null, actionName: actionItem.name, theme: this.theme, iconName: actionItem.icon, iconColor: actionItem.color, iconSize: actionItem.size, background: actionItem.background, "accessible-label": `${actionDescription} ${getLocaleString(actionItem.label)} `, accessibleTitle: this.getActionButtonTitle(actionItem), ref: button => (this.actionButton = button) }));
         }))));
     }

package/lib/collection/components/duet-visually-hidden/duet-visually-hidden.js

@@ -8,7 +8,7 @@ export class DuetVisuallyHidden {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'c7a016ccb63b67077c691951394fd67771f4609e', class: "duet-visually-hidden" }, h("slot", { key: 'c5daeaed36d95139adc5a1f68fe01123d5f301ae' })));
+        return (h(Host, { key: 'cd9e7fe168ed42bfa9fc4751303db7edd312ce75', class: "duet-visually-hidden" }, h("slot", { key: 'bd33aa5a8f5cf442fab2f40ef59b13c36b32eb9d' })));
     }
     static get is() { return "duet-visually-hidden"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/utils/a11y-utils.js

@@ -1,20 +1,16 @@
 /*!
  * Built with Duet Design System
  */
-import { getElementsFromDefaultSlot } from "./slot-utils";
 export function getAccessibleLinkLabel(component) {
-    const textContent = component.element.textContent;
+    const textContext = component.element.textContent;
     if (component.accessibleLabel) {
         return component.accessibleLabel;
     }
-    if ((!!component.download || component.download === "") && textContent) {
-        return `${textContent}. ${component.accessibleLabelDownload}.`;
+    if ((!!component.download || component.download === "") && textContext) {
+        return `${textContext}. ${component.accessibleLabelDownload}.`;
     }
-    if (component.external && textContent) {
-        return `${textContent}. ${component.accessibleLabelExternal}.`;
-    }
-    if (getElementsFromDefaultSlot(component.element).length) {
-        return textContent;
+    if (component.external && textContext) {
+        return `${textContext}. ${component.accessibleLabelExternal}.`;
     }
     return null;
 }

package/lib/collection/utils/slot-utils.js

@@ -51,3 +51,54 @@ export const checkNamedSlotElement = (hostElement, slotName, selector, maxChildr
         console[warnOrError](`Duet ${warnOrError} in ${hostElement.tagName.toLowerCase()}:\n${errors.join("\n")}${remove ? `\nElement${errors.length > 1 ? "s" : ""} removed.` : ""}`);
     }
 };
+/**
+ * Clones host element's default slot contents inside of target element.
+ * Uses cloneNode so remember to always check for its caveats.
+ *
+ * @param hostElement Host element
+ * @param targetElement Target element
+ */
+export const cloneDefaultSlotContent = (hostElement, targetElement) => {
+    if (Build.isServer) {
+        return;
+    }
+    targetElement.innerHTML = "";
+    hostElement.childNodes.forEach(childNode => {
+        const copy = childNode.cloneNode(true);
+        targetElement.appendChild(copy);
+    });
+};
+/**
+ * Creates hidden input element inside component's slot.
+ * This can be used to support native <form> element functionalities.
+ *
+ * @param element Element
+ * @param name Input name
+ * @param value Input value
+ */
+export const proxyInputToSlot = (element, id, name, value, required, checked = undefined) => {
+    const prevInput = element.querySelector("input");
+    const input = prevInput || document.createElement("input");
+    if (checked === false) {
+        input.remove();
+        return;
+    }
+    input.id = id;
+    if (name !== undefined && name !== null) {
+        input.name = name;
+    }
+    if (required) {
+        input.type = "text";
+        input.hidden = true;
+        input.required = true;
+    }
+    else {
+        input.type = "hidden";
+        input.hidden = false;
+        input.required = false;
+    }
+    input.value = value;
+    if (!prevInput) {
+        element.appendChild(input);
+    }
+};

package/lib/dist-custom-elements/duet-action-button.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetActionButton$1, d as defineCustomElement$1 } from './p-5fc9921c.js';
+import { D as DuetActionButton$1, d as defineCustomElement$1 } from './p-649a8c3e.js';
 
 const DuetActionButton = DuetActionButton$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-alert.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetAlert$1, d as defineCustomElement$1 } from './p-e1efb203.js';
+import { D as DuetAlert$1, d as defineCustomElement$1 } from './p-ed8b17fe.js';
 
 const DuetAlert = DuetAlert$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-badge.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetBadge$1, d as defineCustomElement$1 } from './p-6ec31ae0.js';
+import { D as DuetBadge$1, d as defineCustomElement$1 } from './p-4d4c66b0.js';
 
 const DuetBadge = DuetBadge$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-banner.js

@@ -1,14 +1,14 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h as h$1, d as Host } from './p-d77db171.js';
+import { p as proxyCustomElement, H, h as h$1, d as Host } from './p-f66602b0.js';
 import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
 import { h } from './p-993aea39.js';
-import { h as hasSlot, c as checkNamedSlotElement } from './p-8b3decf2.js';
+import { h as hasSlot, c as checkNamedSlotElement } from './p-b5ea877d.js';
 import { p as parsePossibleJSON } from './p-9c3c64b9.js';
 import { g as getColorByName } from './p-88ed3495.js';
-import { d as defineCustomElement$3 } from './p-6008fcdd.js';
-import { d as defineCustomElement$2 } from './p-23f0b101.js';
+import { d as defineCustomElement$3 } from './p-b33a176e.js';
+import { d as defineCustomElement$2 } from './p-8342a3e5.js';
 
 const DuetPicture = ({ img, sources }) => {
     return (h("picture", null,

package/lib/dist-custom-elements/duet-breadcrumb.js

@@ -1,12 +1,12 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-d77db171.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-f66602b0.js';
 import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
 import { s as subscribeTabbingChange, u as unsubscribeTabbingChange } from './p-ca700701.js';
 import { a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver, g as getLocaleString } from './p-35375593.js';
-import { d as defineCustomElement$3 } from './p-23f0b101.js';
-import { d as defineCustomElement$2 } from './p-386b0af9.js';
+import { d as defineCustomElement$3 } from './p-8342a3e5.js';
+import { d as defineCustomElement$2 } from './p-fb63021d.js';
 
 var actionArrowRightSmall={"title":"action-arrow-right-small","tags":"action arrow right small caret","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M19.5 12a2.3 2.3 0 0 1-.78 1.729L7.568 23.54a1.847 1.847 0 0 1-2.439-2.773l9.752-8.579a.25.25 0 0 0 0-.376L5.129 3.233A1.847 1.847 0 0 1 7.568.46l11.148 9.808A2.31 2.31 0 0 1 19.5 12z\"/></svg>"};
 
@@ -52,14 +52,14 @@ const DuetBreadcrumb$1 = /*@__PURE__*/ proxyCustomElement(class DuetBreadcrumb e
      */
     render() {
         var _a;
-        return (h(Host, { key: 'd563a73d4bfb9f69e7680da922d0b2689565ad1c', role: "listitem" }, h("div", { key: '10fc5b8b4a2c25d70156271a11e3a233e3171b5b', class: "container" }, this.icon === "arrow-right-small-icon" && (h("duet-icon", { key: 'bfb363e4ddc22dee217eb2caafddfc2195b211af', class: "duet-breadrumbs-arrow", size: "auto", icon: actionArrowRightSmall.svg, margin: "none", color: "currentColor" })), h("a", { key: '87a994e8838d6b2271066aba7bf9960b5d328393', class: {
+        return (h(Host, { key: '40039dc021f3bad94fd13cf99da9d9d0de8f68a7', role: "listitem" }, h("div", { key: '8208ce2c97c5ddffbb262dbe191f07d71fb8741d', class: "container" }, this.icon === "arrow-right-small-icon" && (h("duet-icon", { key: '0d1655e8b1119eb81366df2808daad4844495e1c', class: "duet-breadrumbs-arrow", size: "auto", icon: actionArrowRightSmall.svg, margin: "none", color: "currentColor" })), h("a", { key: '47cb74d024694bf8b53c372ec5256d883de7a79e', class: {
                 "duet-breadcrumb": true,
                 "duet-theme-turva": this.theme === "turva",
             }, href: this.href ? this.href : undefined, "aria-label": `${!this.href ? `${getLocaleString(this.currentCrumb)} ` : ""}${(_a = this.accessibleLabel) !== null && _a !== void 0 ? _a : this.element.innerHTML}`, role: "link" }, this.icon !== "arrow-right-small-icon" &&
             this.icon && [
-            h("duet-icon", { key: '3866247a6992476b2559aced40a034a0cc76c437', size: this.iconSize, name: this.icon, margin: "none", color: "currentColor" }),
-            this.hasSlottedContent && h("duet-spacer", { key: 'aadee41608241f0903e843ac3e54a7985a947206', size: "x-small", direction: "horizontal" }),
-        ], h("slot", { key: 'dc5cfef7de5a83c0bd04f32204d042400819129f' })))));
+            h("duet-icon", { key: '86ee4831b6e005533aecf1371f13fe4e7af742a3', size: this.iconSize, name: this.icon, margin: "none", color: "currentColor" }),
+            this.hasSlottedContent && h("duet-spacer", { key: '25868dfb7eaf17d0eb274284762291a990a549e5', size: "x-small", direction: "horizontal" }),
+        ], h("slot", { key: 'dc22ae47f49397cc88f3b1d48a0ca047c081abf2' })))));
     }
     get element() { return this; }
     static get style() { return DuetBreadcrumbStyle0; }

package/lib/dist-custom-elements/duet-breadcrumbs.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-d77db171.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-f66602b0.js';
 import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
 import { g as getLocaleString } from './p-35375593.js';
 import { g as getColorByName } from './p-88ed3495.js';
@@ -54,11 +54,11 @@ const DuetBreadcrumbs$1 = /*@__PURE__*/ proxyCustomElement(class DuetBreadcrumbs
      */
     render() {
         const color = getColorByName(this.color);
-        return (h(Host, { key: '2ff5911d23c100d3643be758c450037f7e9a188b' }, h("nav", { key: '73bf3c3a13dfbca9d8a627b3833e392a689fdb16', "aria-label": this.breadcrumbsAriaLabel, class: {
+        return (h(Host, { key: 'eb7b2e1fa288283c0cee25d2ca736f1e2b0c20e0' }, h("nav", { key: '0fd682f03a66a5ace3ddd82f24a198fbcf934c11', "aria-label": this.breadcrumbsAriaLabel, class: {
                 "duet-breadcrumbs": true,
                 "duet-theme-turva": this.theme === "turva",
                 [this.variation]: true,
-            } }, h("div", { key: 'eab81ecd243618026326688741ff0eacf6eb1bf0', class: "container" }, h("div", { key: '8c7f57f32ec5f458fe10497450995fbcc5feadca', role: "list", class: "list", style: { color } }, h("slot", { key: '8f89e08a64377083ee60c92599459324439c0f8b' })), h("div", { key: '27bc05b04c9b6f613bb95c6bd1576c2486fa30cf', class: "bottom-border bottom-border--container" })), h("div", { key: '437f2b1c77d0a03503c002ce637c79748eba62ea', class: "bottom-border bottom-border--nav" }))));
+            } }, h("div", { key: 'ce482ca58e56cf134d6cd9eb89da7ad0f86c4d43', class: "container" }, h("div", { key: '4e49822a247fbc27d2ee8d11c7e15401e4906cf8', role: "list", class: "list", style: { color } }, h("slot", { key: '40de9a013b3521d649df9e070cdfca80c04aafdb' })), h("div", { key: '6f16a5234caf4512abf463e1509134b78fd599c3', class: "bottom-border bottom-border--container" })), h("div", { key: '907f549692f35ee96b2273485f5667b11fba763e', class: "bottom-border bottom-border--nav" }))));
     }
     get element() { return this; }
     static get style() { return DuetBreadcrumbsStyle0; }

package/lib/dist-custom-elements/duet-button.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetButton$1, d as defineCustomElement$1 } from './p-96652f7b.js';
+import { D as DuetButton$1, d as defineCustomElement$1 } from './p-38a3168a.js';
 
 const DuetButton = DuetButton$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-callout.js

@@ -1,10 +1,10 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-d77db171.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-f66602b0.js';
 import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
-import { h as hasSlot, c as checkNamedSlotElement } from './p-8b3decf2.js';
-import { d as defineCustomElement$2 } from './p-23f0b101.js';
+import { h as hasSlot, c as checkNamedSlotElement } from './p-b5ea877d.js';
+import { d as defineCustomElement$2 } from './p-8342a3e5.js';
 
 const duetCalloutCss = ":host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;position:relative;display:block;width:100%}blockquote,figure{margin:0}.duet-callout{margin-bottom:28px !important;display:flex;align-items:center;justify-content:center;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\"}.duet-callout .container{display:flex;flex-direction:column;gap:8px;align-items:center;max-width:688px;text-align:center}.duet-callout .callout-icon{width:50px;padding-bottom:8px}.duet-callout blockquote{font-size:2.7vw;font-weight:600;line-height:1.5;color:rgb(8, 42, 77)}@media (max-width: 37.037037037rem){.duet-callout blockquote{font-size:1rem}}@media (min-width: 46.2962962963rem){.duet-callout blockquote{font-size:1.25rem}}.duet-callout .author{color:rgb(8, 42, 77)}.duet-callout.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\"}.duet-callout.duet-theme-turva .author,.duet-callout.duet-theme-turva blockquote{color:rgb(23, 28, 58)}.duet-callout.duet-m-0{margin:0 !important}";
 const DuetCalloutStyle0 = duetCalloutCss;
@@ -35,11 +35,11 @@ const DuetCallout$1 = /*@__PURE__*/ proxyCustomElement(class DuetCallout extends
     <path d="M6.6591 0.557547L9.2031 2.33355C7.0911 5.21355 6.1311 7.18155 5.8431 8.90955C7.4751 9.34155 8.7231 10.5415 8.7231 12.6535C8.7231 15.2935 6.9471 16.9255 4.6431 16.9255C2.0511 16.9255 0.227096 15.1975 0.227096 12.2695C0.227096 8.28555 2.3871 4.34955 6.6591 0.557547ZM17.9871 8.95755C19.6191 9.34155 20.8671 10.5415 20.8671 12.6535C20.8671 15.2935 19.1391 16.9255 16.8351 16.9255C14.2431 16.9255 12.4191 15.1975 12.4191 12.2695C12.4191 8.28555 14.5791 4.34955 18.8511 0.557547L21.3951 2.33355C19.2351 5.21355 18.3231 7.18155 17.9871 8.95755Z"/>
     </svg>
     `;
-        return (h(Host, { key: 'e5a47020ada7c007c90d23a7f9c796c2f6b2457e' }, h("div", { key: '136d467b3ef4aa8f442ee7047cc124990fa61bb8', class: {
+        return (h(Host, { key: '1b4cbe35da31a702d426b208e1320028b3112f9a' }, h("div", { key: 'fab24aac061b0c7920309f3290a5a8159e37a0c4', class: {
                 "duet-callout": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-m-0": this.margin === "none",
-            } }, h("figure", { key: '493242d5535a0c9792bea659848083a341788177', class: "container" }, h("duet-icon", { key: '8b8205d4eee5b38576a9c1d7d38b2fbb440bda73', class: "callout-icon", shape: "brand-rotated", background: "primary-lighter", "background-opacity": "0.75", "background-rotation": this.theme === "turva" ? "0" : "7", color: "secondary", icon: icon, size: "auto", margin: "none", theme: this.theme }), h("blockquote", { key: 'fbde831b7ff9d98ff97bdab185dd20e69f2a199c' }, h("slot", { key: 'b08a535e736f7f7b4a9e9bf0c0f87cbd4feb0b9b' })), this.hasAuthorSlot && (h("figcaption", { key: '4e10df600d75e995d0be670382e9f02eb2b2216c', class: "author" }, h("span", { key: 'b8c898cee551b4b54df90d4cc13a2f8a43747722' }, "\u2014 "), h("slot", { key: 'c0b4ad3dc00ff79d592e0283d31230700d6d9715', name: "author" })))))));
+            } }, h("figure", { key: '8f550e61a90cbad9121cd324a6c6cc4e433cafd0', class: "container" }, h("duet-icon", { key: '5dd94e456b38480e892dedd68ccf223f4f25b5a9', class: "callout-icon", shape: "brand-rotated", background: "primary-lighter", "background-opacity": "0.75", "background-rotation": this.theme === "turva" ? "0" : "7", color: "secondary", icon: icon, size: "auto", margin: "none", theme: this.theme }), h("blockquote", { key: '4ea5035888ae6ad897f92f66f0b6cd46de7e76d3' }, h("slot", { key: '2a646124096ae8b25c2f29ada8a993bf7294cab5' })), this.hasAuthorSlot && (h("figcaption", { key: '164a3bedfcb1ffd6156b47ffe430818a910f4b6c', class: "author" }, h("span", { key: 'd7ce517642be6e5ab5c17e690b927f5a78c4f41d' }, "\u2014 "), h("slot", { key: 'e29dd6eb00f784b90876edabc7cc69f02a736359', name: "author" })))))));
     }
     get element() { return this; }
     static get style() { return DuetCalloutStyle0; }

package/lib/dist-custom-elements/duet-caption.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetCaption$1, d as defineCustomElement$1 } from './p-d2a5148f.js';
+import { D as DuetCaption$1, d as defineCustomElement$1 } from './p-a6b39855.js';
 
 const DuetCaption = DuetCaption$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-card.js

@@ -1,14 +1,14 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, d as Host } from './p-d77db171.js';
+import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, d as Host } from './p-f66602b0.js';
 import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
 import { c as createID } from './p-5e59e970.js';
 import { i as isKeyboardClick, s as subscribeTabbingChange, u as unsubscribeTabbingChange } from './p-ca700701.js';
 import { s as sanitizeString } from './p-9c3c64b9.js';
 import { g as getColorByName } from './p-88ed3495.js';
-import { d as defineCustomElement$3 } from './p-23f0b101.js';
-import { d as defineCustomElement$2 } from './p-386b0af9.js';
+import { d as defineCustomElement$3 } from './p-8342a3e5.js';
+import { d as defineCustomElement$2 } from './p-fb63021d.js';
 
 const duetHeadingLevels = ["h1", "h2", "h3", "h4", "h5", "h6"];
 const duetBlock = "div";

package/lib/dist-custom-elements/duet-checkbox.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetCheckbox$1, d as defineCustomElement$1 } from './p-034f07f8.js';
+import { D as DuetCheckbox$1, d as defineCustomElement$1 } from './p-36804cd7.js';
 
 const DuetCheckbox = DuetCheckbox$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-checkmark.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetCheckmark$1, d as defineCustomElement$1 } from './p-2e2c1d87.js';
+import { D as DuetCheckmark$1, d as defineCustomElement$1 } from './p-7ff1b14d.js';
 
 const DuetCheckmark = DuetCheckmark$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-chip.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetChip$1, d as defineCustomElement$1 } from './p-33e3a1a9.js';
+import { D as DuetChip$1, d as defineCustomElement$1 } from './p-d0a4a69f.js';
 
 const DuetChip = DuetChip$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-choice-group.js

@@ -1,24 +1,25 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-d77db171.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-f66602b0.js';
 import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
-import { c as checkNamedSlotElement } from './p-8b3decf2.js';
-import { d as defineCustomElement$8 } from './p-d2a5148f.js';
-import { d as defineCustomElement$7 } from './p-79375342.js';
-import { d as defineCustomElement$6 } from './p-23f0b101.js';
-import { d as defineCustomElement$5 } from './p-c67a668c.js';
-import { d as defineCustomElement$4 } from './p-be9acce7.js';
-import { d as defineCustomElement$3 } from './p-e6dc15da.js';
-import { d as defineCustomElement$2 } from './p-899ca0bf.js';
+import { c as checkNamedSlotElement } from './p-b5ea877d.js';
+import { d as defineCustomElement$8 } from './p-a6b39855.js';
+import { d as defineCustomElement$7 } from './p-c57a67d3.js';
+import { d as defineCustomElement$6 } from './p-8342a3e5.js';
+import { d as defineCustomElement$5 } from './p-98b1d4c1.js';
+import { d as defineCustomElement$4 } from './p-ee079d76.js';
+import { d as defineCustomElement$3 } from './p-c9a14c7b.js';
+import { d as defineCustomElement$2 } from './p-18c3a72b.js';
 
-const duetChoiceGroupCss = "*.sc-duet-choice-group,*.sc-duet-choice-group::after,*.sc-duet-choice-group::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.sc-duet-choice-group-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:block;width:100%}.horizontal.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group{display:block;margin-bottom:-12px}.horizontal.sc-duet-choice-group-h .duet-choice-group.duet-no-stacking.sc-duet-choice-group{display:flex}@media (min-width: 48em){.horizontal.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group{margin-bottom:0}}@media (max-width: 35.9375em){.horizontal.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group{display:flex}}.horizontal.duet-choice-group-breakpoint-x-small.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:flex}@media (max-width: 22.5em){.horizontal.duet-choice-group-breakpoint-x-small.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:block}}.horizontal.duet-choice-group-breakpoint-small.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:block}@media (min-width: 36em){.horizontal.duet-choice-group-breakpoint-small.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:flex}}.horizontal.duet-choice-group-breakpoint-medium.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:block}@media (min-width: 48em){.horizontal.duet-choice-group-breakpoint-medium.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:flex}}.horizontal.duet-choice-group-breakpoint-large.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:block}@media (min-width: 62em){.horizontal.duet-choice-group-breakpoint-large.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:flex}}.horizontal.duet-choice-group-breakpoint-x-large.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:block}@media (min-width: 64.0625em){.horizontal.duet-choice-group-breakpoint-x-large.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:flex}}.duet-choice-group.sc-duet-choice-group{position:relative;width:100%;margin-bottom:-12px}";
+const duetChoiceGroupCss = "*,*::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:block;width:100%}:host(.horizontal) .duet-choice-group{display:block;margin-bottom:-12px}:host(.horizontal) .duet-choice-group.duet-no-stacking{display:flex}@media (min-width: 48em){:host(.horizontal) .duet-choice-group{margin-bottom:0}}@media (max-width: 35.9375em){:host(.horizontal) .duet-choice-group{display:flex}}:host(.horizontal.duet-choice-group-breakpoint-x-small) .duet-choice-group:not(.duet-no-stacking){display:flex}@media (max-width: 22.5em){:host(.horizontal.duet-choice-group-breakpoint-x-small) .duet-choice-group:not(.duet-no-stacking){display:block}}:host(.horizontal.duet-choice-group-breakpoint-small) .duet-choice-group:not(.duet-no-stacking){display:block}@media (min-width: 36em){:host(.horizontal.duet-choice-group-breakpoint-small) .duet-choice-group:not(.duet-no-stacking){display:flex}}:host(.horizontal.duet-choice-group-breakpoint-medium) .duet-choice-group:not(.duet-no-stacking){display:block}@media (min-width: 48em){:host(.horizontal.duet-choice-group-breakpoint-medium) .duet-choice-group:not(.duet-no-stacking){display:flex}}:host(.horizontal.duet-choice-group-breakpoint-large) .duet-choice-group:not(.duet-no-stacking){display:block}@media (min-width: 62em){:host(.horizontal.duet-choice-group-breakpoint-large) .duet-choice-group:not(.duet-no-stacking){display:flex}}:host(.horizontal.duet-choice-group-breakpoint-x-large) .duet-choice-group:not(.duet-no-stacking){display:block}@media (min-width: 64.0625em){:host(.horizontal.duet-choice-group-breakpoint-x-large) .duet-choice-group:not(.duet-no-stacking){display:flex}}.duet-choice-group{position:relative;width:100%;margin-bottom:-12px}";
 const DuetChoiceGroupStyle0 = duetChoiceGroupCss;
 
 const DuetChoiceGroup$1 = /*@__PURE__*/ proxyCustomElement(class DuetChoiceGroup extends H {
     constructor() {
         super();
         this.__registerHost();
+        this.__attachShadow();
         this.choiceGroupName = "duet-choice-group";
         this.choices = new Set();
         /**
@@ -129,14 +130,14 @@ const DuetChoiceGroup$1 = /*@__PURE__*/ proxyCustomElement(class DuetChoiceGroup
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { onDuetChange: this.onSelect, onDuetChoiceReady: this.onChoiceReady, onDuetChoiceRemove: this.onChoiceRemove, class: {
+        return (h(Host, { key: '0f05e4491b0ed604ed36ad5a20755a183f219e61', onDuetChange: this.onSelect, onDuetChoiceReady: this.onChoiceReady, onDuetChoiceRemove: this.onChoiceRemove, class: {
                 horizontal: this.direction === "horizontal",
                 "duet-choice-group-breakpoint-x-small": this.responsive && this.breakpoint === "x-small",
                 "duet-choice-group-breakpoint-small": this.responsive && this.breakpoint === "small",
                 "duet-choice-group-breakpoint-medium": this.responsive && this.breakpoint === "medium",
                 "duet-choice-group-breakpoint-large": this.responsive && this.breakpoint === "large",
                 "duet-choice-group-breakpoint-x-large": this.responsive && this.breakpoint === "x-large",
-            } }, h("duet-fieldset", { label: this.label, labelHidden: this.labelHidden, compactLabel: true, caption: this.caption, error: this.error, margin: this.margin, theme: this.theme, "accessible-live-error": this.accessibleLiveError }, this.tooltip && (h("duet-tooltip", { slot: "tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { name: "tooltip" }), h("div", { class: { [this.choiceGroupName]: true, "duet-no-stacking": !this.responsive } }, h("slot", null)))));
+            } }, h("duet-fieldset", { key: 'c6b16eb32fa18224f1fca5450a1a00609ee0800c', label: this.label, labelHidden: this.labelHidden, compactLabel: true, caption: this.caption, error: this.error, margin: this.margin, theme: this.theme, "accessible-live-error": this.accessibleLiveError }, this.tooltip && (h("duet-tooltip", { key: '23ea892920b10486ec2ff7dc5c6893d4f4b58028', slot: "tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: '6f067a2d955d9a60728e5f8746650480d5719491', name: "tooltip" }), h("div", { key: 'e3bfaa0355f3eb50844f4e5a47dc02d0816380e2', class: { [this.choiceGroupName]: true, "duet-no-stacking": !this.responsive } }, h("slot", { key: '8af6ad42073f04162bf0f7482e9987e1f386e7b5' })))));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -147,7 +148,7 @@ const DuetChoiceGroup$1 = /*@__PURE__*/ proxyCustomElement(class DuetChoiceGroup
         "responsive": ["updateChoices"]
     }; }
     static get style() { return DuetChoiceGroupStyle0; }
-}, [6, "duet-choice-group", {
+}, [1, "duet-choice-group", {
         "direction": [1],
         "margin": [1],
         "theme": [1025],