@duetds/components 9.2.7 → 10.0.0-alpha.0

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { Build, h } from "@stencil/core";
+import { h } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { subscribeTabbingChange, unsubscribeTabbingChange } from "../../utils/keyboard-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLocaleString, } from "../../utils/language-utils";
@@ -93,10 +93,7 @@ export class DuetTab {
      * Always the last one in the class.
      */
     render() {
-        if (Build.isServer) {
-            return;
-        }
-        return (h("div", { ref: element => {
+        return (h("div", { key: '82a68331e195880eaab4d0975ebe843c8b0383e8', ref: element => {
                 if (!this.contentId) {
                     this.tabpanelElement = element;
                 }
@@ -105,10 +102,10 @@ export class DuetTab {
                 "duet-tab": true,
                 selected: this.selected,
                 "has-content-id": !!this.contentId,
-            }, "aria-description": this.accessibleDescription, "aria-labelledby": this.accessibleLabelledBy, tabindex: "-1" }, h("slot", null)));
+            }, "aria-description": this.accessibleDescription, "aria-labelledby": this.accessibleLabelledBy, tabindex: "-1" }, h("slot", { key: '1c63bb93ad6c9c031569794c156568497ee28b27' })));
     }
     static get is() { return "duet-tab"; }
-    static get encapsulation() { return "scoped"; }
+    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["duet-tab.scss"]

package/lib/collection/components/duet-tab-group/duet-tab-group.js

@@ -203,27 +203,27 @@ export class DuetTabGroup {
     render() {
         const variationClass = this.variation === "plain-scrolling" ? "duet-tab-variation-plain" : `duet-tab-variation-${this.variation}`;
         const isSwipeScrollable = this.variation === "checked" || this.variation === "plain-scrolling";
-        return (h("div", { key: 'bc316787b3b80f823ed8faaba277e003e68bb5a2', class: {
+        return (h("div", { key: '55b19c0083ced74f0862c8879512d8a7ac550ccf', class: {
                 "duet-tab-group": true,
                 "duet-theme-turva": this.theme === "turva",
                 [variationClass]: true,
                 "duet-tab-plain-scrolling": this.variation === "plain-scrolling",
                 "duet-tab-group-scrolls": this.scrolls,
                 "duet-tab-group-collapses": this.collapses,
-            }, "aria-label": this.accessibleLabel }, !isSwipeScrollable && this.tabs.length > 3 && this.collapses && (h("duet-select", { key: '64c5ec06e21fbde15b29281d5e89273c2d15dcdc', value: this.selected.toString(), expand: true, label: this.label, labelHidden: this.labelHidden, theme: this.theme, onDuetChange: event => this.onTabSelect(Number(event.detail.value)), items: this.tabs.map((tab, index) => {
+            }, "aria-label": this.accessibleLabel }, !isSwipeScrollable && this.tabs.length > 3 && this.collapses && (h("duet-select", { key: 'fa42a4e505fb4d94cfde64470682bcda87c4e8a8', value: this.selected.toString(), expand: true, label: this.label, labelHidden: this.labelHidden, theme: this.theme, onDuetChange: event => this.onTabSelect(Number(event.detail.value)), items: this.tabs.map((tab, index) => {
                 return { label: tab.label, value: index.toString() };
-            }) })), h("div", { key: '1c8d3bbb5202408ce2bdabf98aeef15a64413506', role: "tablist", class: {
+            }) })), h("div", { key: '5a4ba1e8089bd37f2bcd012ef58285369eb0282f', role: "tablist", class: {
                 "duet-m-0": this.margin === "none" || this.variation === "checked",
                 "duet-tab-group-tabs": true,
                 "duet-tab-group-hidden": this.tabs.length > 3 && !isSwipeScrollable,
                 "duet-tab-group-collapses": this.collapses,
             }, ref: el => {
                 this.tabsContainer = el;
-            } }, this.renderTab()), h("div", { key: 'ecae4e65fe249bb084917967e40682b80eed1a9f', class: {
+            } }, this.renderTab()), h("div", { key: 'd80d6fdd3ad52d8c0dfd13d7ae1d906703eac971', class: {
                 "duet-tab-group-content": true,
                 "duet-m-0": this.margin === "none",
                 "checked-group-content": this.variation === "checked",
-            } }, h("slot", { key: 'ab023437cb483fb6b9f0a60e7dd83970d98119f8' }))));
+            } }, h("slot", { key: 'a14facc65a69917ede3d270a93919e949aa5116e' }))));
     }
     static get is() { return "duet-tab-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -113,7 +113,7 @@ export class DuetTable {
         });
     }
     render() {
-        return (h(Host, { key: 'd456405a2d68a4f177b88081425e960ba63045b9', class: {
+        return (h(Host, { key: 'fe804ab98faa5a67150c751bb1c75fffd76d9979', class: {
                 [`duet-table-${this.variation}`]: true,
                 "duet-table-flattened": !this.matchesBreakpoint,
                 // sticky only valid when in regular table layout
@@ -122,7 +122,7 @@ export class DuetTable {
                 "duet-m-0": this.margin === "none",
                 "duet-theme-turva": this.theme === "turva",
                 "duet-table-hide-head-visually": this.hideHeadVisually,
-            } }, h("slot", { key: '4f00b379d883a78ed082245fb9b6b8096e52ab94' })));
+            } }, h("slot", { key: '5771327fbab3d42432e014a2f527de6c865d4999' })));
     }
     static get is() { return "duet-table"; }
     static get originalStyleUrls() {

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

@@ -1,12 +1,12 @@
 /*!
  * Built with Duet Design System
  */
-import { Build, h, Host, } from "@stencil/core";
+import { h, Host, } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
 import { cleanValue } from "../../utils/input-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLocaleString, } from "../../utils/language-utils";
-import { checkNamedSlotElement } from "../../utils/slot-utils";
+import { checkNamedSlotElement, proxyInputToSlot } from "../../utils/slot-utils";
 const CharacterCount = ({ value, maxlength, label, theme }) => {
     if (maxlength == null) {
         return;
@@ -25,6 +25,7 @@ export class DuetTextarea {
          * Own Properties
          */
         this.textareaId = createID("DuetTextarea");
+        this.proxyId = createID("DuetTextarea");
         this.topCaptionId = createID("DuetCaptionTop");
         this.topCaptionPlaceholderId = createID("DuetCaptionPlaceholderTop");
         this.labelId = createID("DuetLabel");
@@ -150,6 +151,9 @@ export class DuetTextarea {
     disconnectedCallback() {
         disconnectLanguageChangeObserver(this);
     }
+    componentDidRender() {
+        proxyInputToSlot(this.element, this.proxyId, this.name, this.value, this.required);
+    }
     /**
      * Sets focus on the specified `duet-textarea`. Use this method instead of the global
      * `textarea.focus()`.
@@ -162,26 +166,23 @@ export class DuetTextarea {
      * Always the last one in the class.
      */
     render() {
-        if (Build.isServer) {
-            return;
-        }
         const identifier = this.identifier || this.textareaId;
-        return (h(Host, { class: {
+        return (h(Host, { key: 'afb475015d0e4ad8439c1a2baf3ecd6196d608a4', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-has-counter": this.counter && !this.error,
                 "duet-expand": this.expand,
-            } }, h("div", { class: {
+            } }, h("div", { key: '0978415bfb413a15d80dfffc46c1e4d4990989dd', class: {
                 "duet-textarea-container": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-label-hidden": this.labelHidden,
                 "duet-input-top-caption-shown": this.isCaptionVisible,
                 "has-error": !!this.error,
-            } }, h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, margin: this.isCaptionVisible ? "small" : "auto", color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), h("slot", { name: "tooltip" }), this.caption && (h("duet-caption", { id: this.topCaptionId, size: "medium", theme: this.theme === "turva" ? "turva" : "default" }, this.caption)), h("div", { class: "duet-textarea-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { id: this.topCaptionPlaceholderId, class: "duet-textarea-placeholder", size: "small" }, this.placeholder)), h("textarea", { onInput: this.handleInput, onChange: this.handleChange, onBlur: this.handleBlur, onFocus: this.handleFocus, ref: input => (this.nativeInput = input), class: { "duet-textarea": true, disabled: this.disabled }, value: this.value, disabled: this.disabled, "aria-labelledby": this.accessibleLabelledBy ? `${this.labelId} ${this.accessibleLabelledBy}` : this.labelId, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.getDescribedBy(), "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, placeholder: this.placeholder, spellcheck: "false", required: this.required, minlength: this.minlength, maxlength: this.maxlength, role: this.role, name: this.name, id: identifier })), h("duet-grid", { alignment: "stretch" }, h("duet-grid-item", { margin: "none", fill: true }, h("div", { class: "duet-textarea-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", null, this.error))), h("duet-grid-item", { margin: "none", class: "duet-character-count-caption" }, this.counter && (h(CharacterCount, { theme: this.theme, value: this.value, maxlength: this.maxlength, label: this.counterLabel })))), this.counter && (h("duet-visually-hidden", { class: "duet-visually-hidden", id: this.characterCountId, ref: el => {
+            } }, h("duet-label", { key: 'd2bc5abddc08c58802a4123e8bfecd42d8ef286e', theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, margin: this.isCaptionVisible ? "small" : "auto", color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { key: 'ecb4778229571b2a0430cd8440a383b8e7a9ce4c', direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), h("slot", { key: 'f55c7c3f480ed44c6476a276ecc8a21213b08ee9', name: "tooltip" }), this.caption && (h("duet-caption", { key: '9508ae1e04ff3a74551efa81779c7e6f5ac5b3e8', id: this.topCaptionId, size: "medium", theme: this.theme === "turva" ? "turva" : "default" }, this.caption)), h("div", { key: 'fa901006cd5a7ef28e443fb0ec1e289e7b91fd02', class: "duet-textarea-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { key: 'f352aa22e295837c2697022318f0ed3e27bdef8b', id: this.topCaptionPlaceholderId, class: "duet-textarea-placeholder", size: "small" }, this.placeholder)), h("textarea", { key: 'b481afa761533533c22861249961fea2b6933a99', onInput: this.handleInput, onChange: this.handleChange, onBlur: this.handleBlur, onFocus: this.handleFocus, ref: input => (this.nativeInput = input), class: { "duet-textarea": true, disabled: this.disabled }, value: this.value, disabled: this.disabled, "aria-labelledby": this.accessibleLabelledBy ? `${this.labelId} ${this.accessibleLabelledBy}` : this.labelId, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.getDescribedBy(), "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, placeholder: this.placeholder, spellcheck: "false", required: this.required, minlength: this.minlength, maxlength: this.maxlength, role: this.role, name: this.name, id: identifier })), h("duet-grid", { key: '5448fd837456b03dbf6c6beb3fddc63e6ab767ff', alignment: "stretch" }, h("duet-grid-item", { key: '23a4a4c7166b21e3749164f384def7a733421c59', margin: "none", fill: true }, h("div", { key: 'a0d0109c87a899274270d83e5dd2ec30df16caa6', class: "duet-textarea-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: 'f23227e447ca85e2e8e79ebdea459d6ebfcd0420' }, this.error))), h("duet-grid-item", { key: '3646d29d504b4f9c9cce38f66e58e8f994e54fb8', margin: "none", class: "duet-character-count-caption" }, this.counter && (h(CharacterCount, { key: '83b2e50ae63c30e0cd0beff5891309b8ce36e6a7', theme: this.theme, value: this.value, maxlength: this.maxlength, label: this.counterLabel })))), this.counter && (h("duet-visually-hidden", { key: '66fd9e4bab5013f6afd24a99dc1fbe2aa56ed5a9', class: "duet-visually-hidden", id: this.characterCountId, ref: el => {
                 this.hiddenCounterLabel = el;
             } })))));
     }
     static get is() { return "duet-textarea"; }
-    static get encapsulation() { return "scoped"; }
+    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["duet-textarea.scss"]

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

@@ -1,16 +1,18 @@
 /*!
  * Built with Duet Design System
  */
-import { Build, h, Host } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
 import { subscribeTabbingChange, unsubscribeTabbingChange } from "../../utils/keyboard-utils";
+import { proxyInputToSlot } from "../../utils/slot-utils";
 export class DuetToggle {
     constructor() {
         /**
          * Own Properties
          */
         this.toggleId = createID("DuetToggle");
+        this.proxyId = createID("DuetToggle");
         /**
          * Component event handling.
          */
@@ -62,6 +64,9 @@ export class DuetToggle {
     disconnectedCallback() {
         unsubscribeTabbingChange(this);
     }
+    componentDidRender() {
+        proxyInputToSlot(this.element, this.proxyId, this.name, this.value, this.required, this.checked);
+    }
     /**
      * Sets focus on the specified `duet-toggle`. Use this method instead of the global
      * `input.focus()`.
@@ -74,19 +79,16 @@ export class DuetToggle {
      * Always the last one in the class.
      */
     render() {
-        if (Build.isServer) {
-            return;
-        }
         const identifier = this.identifier || this.toggleId;
-        return (h(Host, { onClick: this.disabled ? undefined : this.onClick, class: { "duet-m-0": this.margin === "none" } }, h("div", { class: {
+        return (h(Host, { key: 'f1b8c9c08fb1aee347e563410dca93a4ab121bac', onClick: this.disabled ? undefined : this.onClick, class: { "duet-m-0": this.margin === "none" } }, h("div", { key: '68fbc5e970aa27bb23354da6ef76fe97ef7ac56c', class: {
                 "duet-toggle": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-side-label": this.labelPosition !== "top",
                 "duet-reverse-label": this.labelPosition === "right",
-            } }, h("duet-label", { theme: this.theme, color: this.labelColor, weight: this.labelWeight, for: identifier, margin: this.labelPosition === "top" ? "auto" : "none" }, this.label), h("label", { class: "duet-switch", htmlFor: identifier }, h("input", { type: "checkbox", value: this.value, "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.accessibleDescribedBy, "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, id: identifier, role: this.role, name: this.name, checked: this.checked, required: this.required, disabled: this.disabled, ref: input => (this.nativeInput = input) }), h("div", { class: "duet-slider" })))));
+            } }, h("duet-label", { key: '71d8ab7afbe009e196619c59fc7f4d67e5014ecd', theme: this.theme, color: this.labelColor, weight: this.labelWeight, margin: this.labelPosition === "top" ? "auto" : "none" }, this.label), h("label", { key: 'ad1ad4bb8249ff6999f9c8dfd48fd70ee658e80c', class: "duet-switch" }, h("input", { key: '79c34fa10a7846e3e4751f314616a96ac7aaaacc', type: "checkbox", value: this.value, "aria-label": this.label, "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.accessibleDescribedBy, "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, id: identifier, role: this.role, name: this.name, checked: this.checked, required: this.required, disabled: this.disabled, ref: input => (this.nativeInput = input) }), h("div", { key: '36aa5a3052136ff112b395ebac661c6496e64f93', class: "duet-slider" })))));
     }
     static get is() { return "duet-toggle"; }
-    static get encapsulation() { return "scoped"; }
+    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["duet-toggle.scss"]

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

@@ -31,11 +31,11 @@ export class DuetToolbar {
             : this.variation === "secondary"
                 ? "secondary"
                 : "default";
-        return (h(Host, { key: '6d24828591c3158d2af27f07f9b997134340bb9e' }, h("nav", { key: 'fbe3dfb501f41f8c6bf45e7da45eb923e40beac8', class: {
+        return (h(Host, { key: '21d533cd790fd3160001662f405fd6d576238601' }, h("nav", { key: '7b6dd43ab8c737929acec750be80136d3f5bb007', class: {
                 "duet-toolbar": true,
                 "duet-theme-turva": this.theme === "turva",
                 [variation]: true,
-            }, "aria-label": this.accessibleLabel }, h("div", { key: '76ca97610a6ad32d06d5e7fe9f78e274a7044a96', class: "container" }, h("div", { key: '99c04b28a2a1c18a0dc5061820c39edefe90a95e', class: "list", role: "list" }, h("slot", { key: 'f4ca909e6d3cb08f39968f09060eb270342038b9', name: "left" })), h("div", { key: '2eabe1f9ed72f8bf59e7f3dff1ad6c07c04c2fa3', class: "list", role: "list" }, h("slot", { key: '7fed13ccb4a463c7fa55a72c90fd94f08057064d', name: "right" }))))));
+            }, "aria-label": this.accessibleLabel }, h("div", { key: 'c6858334c5f7a5a760775d6cb1d5f3c8439f10a7', class: "container" }, h("div", { key: '28485640df44e2daf65bee426b757931d7fe01e8', class: "list", role: "list" }, h("slot", { key: '7fe71028d8cd2e938ec176fcf8a3bf9dd1d2e446', name: "left" })), h("div", { key: 'a5fa75c98324be554112c6bead973905e2144371', class: "list", role: "list" }, h("slot", { key: '277f1bafd019f0e03080d3c830be989eac1dd461', name: "right" }))))));
     }
     static get is() { return "duet-toolbar"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-toolbar-dropdown/duet-toolbar-dropdown.js

@@ -50,18 +50,18 @@ export class DuetToolbarDropdown {
             itemsAlign = this.element.parentElement.getAttribute("slot") === "left" ? "right" : "left";
         }
         const variation = this.variation === "negative" ? "negative" : "white";
-        return (h(Host, { key: '25b52f5f9d6dd23c6fc82c1ba514284087c88170', role: "listitem" }, h("div", { key: '2547a078631c1588f7ad3c95adccfc525ffb63b1', class: {
+        return (h(Host, { key: '3f216acdbee35637a06bba1ad6bd31c79060c485', role: "listitem" }, h("div", { key: 'f327067f1cca48416dbadf416c81beb395f68bf6', class: {
                 "duet-toolbar-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 [itemsAlign]: true,
                 [variation]: true,
-            } }, h("button", { key: 'e1d93883c560598b35ac8be798475095c7f1a631', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel, id: "button", type: "button", class: {
+            } }, h("button", { key: '7dc771dbb2a86dea2b8765ce9913edf088f789f6', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel, id: "button", type: "button", class: {
                 active: this.active,
                 open: this.open,
-            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: 'ab5f1a464057077698ffb25e919df7fdaaab4639', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("span", { key: 'b3d7603015f2fae719a254ec60b8a2e43107edd8', class: "label" }, h("slot", { key: 'f6676d4bd0c1f092627b1ce1bbcbfdd6499c8447', name: "label" }), h("duet-icon", { key: 'b84679735414c634310004d5c9b4dbceaaedb6ed', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '5718a6a649198a601507dd916feee0f356f9786c', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: 'dddf695359ec083dc8f227c5e1deae8a5506b73f', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("span", { key: 'd334e49d8815344ab29ac8db03eb694ddb496a54', class: "label" }, h("slot", { key: '348fcd3dd00b6a81b94d33771f6e4557284bd16d', name: "label" }), h("duet-icon", { key: '7dc2d3d54ff3117e2f48e687f3a762db43a837d4', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '90d305c6cecfb3fd7ee23ce5169cdcad6c4dd66f', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, h("slot", { key: 'c0d3e846d10e190162c97c680c4b0ecec3eceb33' })))));
+            } }, h("slot", { key: 'eda0a71fd30d9a00a11d61a797243b2da1d4e19a' })))));
     }
     static get is() { return "duet-toolbar-dropdown"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-toolbar-dropdown-link/duet-toolbar-dropdown-link.js

@@ -31,11 +31,11 @@ export class DuetToolbarDropdownLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'e3efb6b70c66d5e89b942e11630bd1f3ca09da23' }, h("a", { key: '82b9283918f64f724ff10590e14e6267b4d228a5', class: {
+        return (h(Host, { key: '8cb69dd33c2d35233088309fd5cdad8c1d16ed01' }, h("a", { key: 'c805b960def6061680c14e5b401d1854c52f94a6', class: {
                 "duet-toolbar-dropdown-link": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
-            }, href: this.href, lang: this.targetLanguage, hreflang: this.targetLanguage, role: "link menuitem", "aria-label": this.accessibleLabel, "aria-current": this.active ? "true" : "false", onKeyUp: e => this.handleEscape(e) }, this.icon && h("duet-icon", { key: '566a78b23fde16d94550884b68c34cc0174de0dc', name: this.icon, size: "x-small", margin: "none" }), h("span", { key: '2c87685e3a77848c8571c42f5dc4f8e57f566dfd', class: "label" }, h("slot", { key: '69dca8568d3358138faa101900b558daf8709b4f' })), this.active && (h("duet-icon", { key: 'a646b68f9de5deba152c5c57d1f35ac9d8d65db0', name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor" })))));
+            }, href: this.href, lang: this.targetLanguage, hreflang: this.targetLanguage, role: "link menuitem", "aria-label": this.accessibleLabel, "aria-current": this.active ? "true" : "false", onKeyUp: e => this.handleEscape(e) }, this.icon && h("duet-icon", { key: 'aa73a86d1c127f99f803b772bd2ae89b207fab30', name: this.icon, size: "x-small", margin: "none" }), h("span", { key: '7435a9263b6389e3a4a2e980a6528741c3b7a46f', class: "label" }, h("slot", { key: '5bdd6f17bf41ee7a6f6dec80b9f3c9f741a1fc27' })), this.active && (h("duet-icon", { key: '6d9294ed304b2652d8cf535f549edad17fc6965d', name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor" })))));
     }
     static get is() { return "duet-toolbar-dropdown-link"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-toolbar-item/duet-toolbar-item.css

@@ -48,6 +48,12 @@
 .duet-theme-turva .duet-toolbar-item:focus, .duet-toolbar-item:focus.duet-theme-turva {
   box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
 }
+.duet-toolbar-item:focus.primary {
+  box-shadow: 0 0 0 4px rgba(8, 42, 77, 0.3), 0 0 0 1px #033866;
+}
+.duet-theme-turva .duet-toolbar-item:focus.primary, .duet-toolbar-item:focus.primary.duet-theme-turva {
+  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+}
 .duet-toolbar-item .duet-toolbar-icon {
   position: relative;
   display: inline-flex;

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

@@ -57,17 +57,17 @@ export class DuetToolbarItem {
             : this.variation === "secondary"
                 ? "secondary"
                 : "default";
-        return (h(Host, { key: '2ef7297d5c2f9b09536b757fe0b747caa6b2840c', role: "listitem" }, h(TagName, { key: '8b1a44bc3d37cad54e429b1523fbe404c97f5f03', target: !this.url ? null : this.external ? "_blank" : "_self", ref: element => (this.itemElement = element), class: {
+        return (h(Host, { key: 'dd49a814af5543b3c5322f9ba0f14b94c1f2c0ff', role: "listitem" }, h(TagName, { key: '99e8b130d9de3a738aa494473908afa59fcb5c9d', target: !this.url ? null : this.external ? "_blank" : "_self", ref: element => (this.itemElement = element), class: {
                 "duet-toolbar-item": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
                 [variation]: true,
-            }, href: this.url, role: `${TagName === "a" ? "link" : "button"}`, "aria-current": this.active ? "true" : "false", "aria-label": (this.url && getAccessibleLinkLabel(this)) || this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined, rel: this.external ? "noopener" : undefined }, this.leadingIcon && (h("div", { key: '44269de51ebbfc87725a86ba4a84d75ecfba3b4e', class: "duet-toolbar-icon" }, h("duet-icon", { key: '5111f0d067e0964fdef11617baf9958ec40d6576', size: "x-small", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" }), this.badge && h("div", { key: 'a92775b051d1c5c9eecc67b05c77a28cd64de8d5', class: "duet-toolbar-badge" }))), h("slot", { key: 'a7ddc45472cc0f2ddae38a069f87a9d675e8f1ff' }), (this.trailingIcon || (this.url && this.external)) && (h("div", { key: '162e333175a2afce39599db1495b4a2db75405b8', class: "duet-toolbar-icon" }, h("duet-icon", { key: 'edbc553ef82f801d17f4e62c798031da2500157d', class: {
+            }, href: this.url, role: `${TagName === "a" ? "link" : "button"}`, "aria-current": this.active ? "true" : "false", "aria-label": (this.url && getAccessibleLinkLabel(this)) || this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined, rel: this.external ? "noopener" : undefined }, this.leadingIcon && (h("div", { key: 'f2cb988f3e1224d79d1fe65d289e08364b43d75f', class: "duet-toolbar-icon" }, h("duet-icon", { key: '8608706b7b512cfe61e35f4eb63a41804ac0085d', size: "x-small", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" }), this.badge && h("div", { key: 'c4a5b2eba922d2bcaf1e90c63d496d6e0e8a282f', class: "duet-toolbar-badge" }))), h("slot", { key: 'c4c8114069e098da845703905b77f15c4bb1c743' }), (this.trailingIcon || (this.url && this.external)) && (h("div", { key: '7f21cf0cd2a5aeca2685360049504e5daab02c3b', class: "duet-toolbar-icon" }, h("duet-icon", { key: '0c39d469df56947c3cec7f2e377906f0f48d0ef6', class: {
                 "trailing-icon": !!this.trailingIcon,
                 "trailing-icon-arrow": this.trailingIcon === "action-arrow-down-small",
                 "external-icon": !!(this.url && this.external),
                 rotate: this.trailingIcon === "action-arrow-down-small" && this.accessibleExpanded,
-            }, theme: this.theme, name: this.trailingIcon ? this.trailingIcon : this.url && this.external ? newWindowIcon.title : "", margin: "none", size: "auto", color: "currentColor" }), this.badge && this.trailingIcon !== "action-arrow-down-small" && h("div", { key: '9a1318e69e40d5d55677154d482ba08b9fc2e72e', class: "duet-toolbar-badge" }))))));
+            }, theme: this.theme, name: this.trailingIcon ? this.trailingIcon : this.url && this.external ? newWindowIcon.title : "", margin: "none", size: "auto", color: "currentColor" }), this.badge && this.trailingIcon !== "action-arrow-down-small" && h("div", { key: 'a59af5319ed0f896c0ba81b8c6234d7ebed0d3f2', class: "duet-toolbar-badge" }))))));
     }
     static get is() { return "duet-toolbar-item"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-toolbar-link/duet-toolbar-link.js

@@ -24,12 +24,12 @@ export class DuetToolbarLink {
      */
     render() {
         const variation = this.variation === "negative" ? "negative" : "white";
-        return (h(Host, { key: 'f8e4c9503e468b1d2912a6c633f8eebc7118176b', role: "listitem" }, h("a", { key: '9319a32f6d0731c1f473dbffd23b9f21c2d5103f', class: {
+        return (h(Host, { key: '2656a1b596a4b66cf46c4f417335e35eb881dab2', role: "listitem" }, h("a", { key: 'ce034bce2589926b97d4bb34280799747927414f', class: {
                 "duet-toolbar-link": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
                 [variation]: true,
-            }, href: this.href, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: 'bca12006695c45a33577fe1821081f3c07a0bb53', size: "x-small", name: this.icon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: '3bfc36ea53b227990d0ab7a26ae2ea0b9caa13c7' }))));
+            }, href: this.href, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: '0fc473d63161aaa4922c4557f902e170f68464ed', size: "x-small", name: this.icon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: 'beba45fdc4e282f23e04735c6491c67f65ac7b7f' }))));
     }
     static get is() { return "duet-toolbar-link"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-tooltip/duet-tooltip-button.js

@@ -39,12 +39,12 @@ export class DuetTooltipButton {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'a93b648a97705995e9c16ed407d6a85edd146a1e' }, h("button", { key: '3908a9b2c7e7424835a9b52345bf37f9cf72b9fb', ref: el => (this.buttonElement = el), "aria-controls": this.tooltipId, "aria-expanded": this.active ? "true" : "false", type: "button", class: {
+        return (h(Host, { key: '9072e8917cb41793dea41b85387c0d0ed01364ab' }, h("button", { key: '873fe45b6a53107875d7f6cbd52edcef6c35a4cd', ref: el => (this.buttonElement = el), "aria-controls": this.tooltipId, "aria-expanded": this.active ? "true" : "false", type: "button", class: {
                 "duet-tooltip-button": true,
                 "duet-tooltip-button-has-label": !!this.label,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-tooltip-button-negative": this.negative,
-            } }, h("svg", { key: '864c8fa62979a5f154fba4bdb917e294981bf69d', "aria-hidden": "true", role: "img", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '541766a3747147b8584825d78fb255907e8a118d', d: "m13.5 17.25c-1.241 0-2.25-1.009-2.25-2.25v-3.75h-.75c-.414 0-.75-.336-.75-.75s.336-.75.75-.75h.75c.827 0 1.5.673 1.5 1.5v3.75c0 .414.336.75.75.75h.75c.414 0 .75.336.75.75s-.336.75-.75.75z" }), h("circle", { key: 'f7a83bdf5e8532f9696c2877ab76aa6b13fd6fd2', cx: "11.625", cy: "7.125", r: "1.125" }), h("path", { key: '52f85b09a3d9f99fdb775549b7936bab53e00686', d: "m12 24c-6.617 0-12-5.383-12-12s5.383-12 12-12 12 5.383 12 12-5.383 12-12 12zm0-22.5c-5.79 0-10.5 4.71-10.5 10.5s4.71 10.5 10.5 10.5 10.5-4.71 10.5-10.5-4.71-10.5-10.5-10.5z" })), this.label ? (h("span", { class: "duet-tooltip-label" }, this.label)) : (h("duet-visually-hidden", null, this.accessibleLabel)))));
+            } }, h("svg", { key: '323d7874dea1e157dfa25d203eb3dda93e4a4100', "aria-hidden": "true", role: "img", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'ef7df8fea96fc5f5adfec07ac1c7176c58f5939e', d: "m13.5 17.25c-1.241 0-2.25-1.009-2.25-2.25v-3.75h-.75c-.414 0-.75-.336-.75-.75s.336-.75.75-.75h.75c.827 0 1.5.673 1.5 1.5v3.75c0 .414.336.75.75.75h.75c.414 0 .75.336.75.75s-.336.75-.75.75z" }), h("circle", { key: 'd5e097119c80dbcee1e9a8b40e0a8e1416991c78', cx: "11.625", cy: "7.125", r: "1.125" }), h("path", { key: 'a85da0b6a9f044e2584d7a0cfbab5ff3045ee19a', d: "m12 24c-6.617 0-12-5.383-12-12s5.383-12 12-12 12 5.383 12 12-5.383 12-12 12zm0-22.5c-5.79 0-10.5 4.71-10.5 10.5s4.71 10.5 10.5 10.5 10.5-4.71 10.5-10.5-4.71-10.5-10.5-10.5z" })), this.label ? (h("span", { class: "duet-tooltip-label" }, this.label)) : (h("duet-visually-hidden", null, this.accessibleLabel)))));
     }
     static get is() { return "duet-tooltip-button"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-tooltip/duet-tooltip-popup.js

@@ -53,11 +53,11 @@ export class DuetTooltipPopup {
         this.contentEl.focus();
     }
     render() {
-        return (h(Host, { key: 'a79306700e7d7aee441cc03ad36320a104b7089d' }, h("div", { key: '97992b1ebaf1998d33984716a013e69d5ba1d2d6', class: {
+        return (h(Host, { key: '8acc3821b4d946db588b369f4b6a49949049aef3' }, h("div", { key: '4e67df16578e9d684c13956359696ebb46aaa431', class: {
                 "duet-tooltip": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-tooltip-active": this.active === true,
-            } }, h(FocusGuard, { key: '45e71382f2b78cf134a3bc5c66523b17b9645df7', moveFocusTo: this.buttonEl }), h("div", { key: '4972fbadbaa78dcc0a89a26f084703d2f5af7722', ref: element => (this.contentEl = element), class: "duet-tooltip-content-area", tabindex: 0, id: this.tooltipId }, h("slot", { key: 'cd6485f243b063d2c155c995e5c025d94b63a339' })), h("div", { key: '9a7ee974d7bb598cb64fff09e36c15560fe5eaf6', ref: element => (this.arrowEl = element), class: { arrow: true, [this.placement]: true }, style: this.arrowStyles }, h("div", { key: 'ed588d4767c18b62132ee7869ddd0daa1c128b5c', class: { "arrow-container": true, [this.placement]: true } })), h("button", { key: 'c8bc5eda535b9f4990a1a4ea1d643802f81b0d28', type: "button", class: "duet-tooltip-close", onClick: this.handleCloseClick, ref: el => (this.buttonEl = el) }, h("duet-icon", { key: '6ac9b3e52c00914617f310f38ce5ec6ba2a43a82', name: "navigation-close-small", margin: "none", color: "currentColor", size: "xxx-small" }), h("duet-visually-hidden", { key: '280130951a6dc65a419d913c246fbbda69605e38' }, this.accessibleCloseLabel)), h(FocusGuard, { key: 'f23c9116b56c9451e2c82eef602c057f3b38835c', moveFocusTo: this.contentEl }))));
+            } }, h(FocusGuard, { key: 'f80a8056489ea1d33f28e35e02956080855b8e0c', moveFocusTo: this.buttonEl }), h("div", { key: '776dd94339d875a1a66e6384792b6ceb1c6aa3d0', ref: element => (this.contentEl = element), class: "duet-tooltip-content-area", tabindex: 0, id: this.tooltipId }, h("slot", { key: '5ca5cb490bbd841897e92550487d5ec2994c1454' })), h("div", { key: '0d94a795e9e48495dfaf0f89a2deb85168e28e93', ref: element => (this.arrowEl = element), class: { arrow: true, [this.placement]: true }, style: this.arrowStyles }, h("div", { key: '55de0f4a7b2af1fdc80591cf22164528677038b3', class: { "arrow-container": true, [this.placement]: true } })), h("button", { key: '5c666a5fa3eeb84d1b9cae6a8e8c9ead45c44b69', type: "button", class: "duet-tooltip-close", onClick: this.handleCloseClick, ref: el => (this.buttonEl = el) }, h("duet-icon", { key: '50e2ef126f129c562fe92652d057f7295d1c67f2', name: "navigation-close-small", margin: "none", color: "currentColor", size: "xxx-small" }), h("duet-visually-hidden", { key: '1453b395ca04e521704846b572d7165cc150f0ff' }, this.accessibleCloseLabel)), h(FocusGuard, { key: '75fbf5e7a95c4f2a30064a47e2e1c3905c2ee289', moveFocusTo: this.contentEl }))));
     }
     static get is() { return "duet-tooltip-popup"; }
     static get encapsulation() { return "shadow"; }

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

@@ -8,11 +8,13 @@ import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
 import { isEscapeKey } from "../../utils/keyboard-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
+import { cloneDefaultSlotContent } from "../../utils/slot-utils";
 export class DuetTooltip {
     constructor() {
         /**
          * Own Properties.
          */
+        this.firstRender = true;
         this.mql = [
             window.matchMedia(media_query_medium.replace(/'/g, "")),
             window.matchMedia(media_query_large.replace(/'/g, "")),
@@ -132,6 +134,22 @@ export class DuetTooltip {
             { prop: "accessibleLabel", defaults: "accessibleLabelDefault" },
             { prop: "accessibleCloseLabel", defaults: "accessibleCloseLabelDefault" },
         ]);
+        if (typeof MutationObserver !== "undefined") {
+            this.mutationO = new MutationObserver(() => {
+                cloneDefaultSlotContent(this.element, this.popupElement);
+            });
+            this.mutationO.observe(this.element, {
+                childList: true,
+                characterData: true,
+                subtree: true,
+            });
+        }
+    }
+    componentDidRender() {
+        if (this.firstRender) {
+            cloneDefaultSlotContent(this.element, this.popupElement);
+            this.firstRender = false;
+        }
     }
     disconnectedCallback() {
         disconnectLanguageChangeObserver(this);
@@ -198,7 +216,7 @@ export class DuetTooltip {
                 this.accessibleLabel, onClick: this.toggleOpen, theme: this.theme, negative: this.negative }), h("div", { style: popupContainerStyles }, h("duet-tooltip-popup", { ref: element => (this.popupElement = element), active: this.active, tooltipId: this.tooltipId, arrowStyles: arrowStyles, style: positionStyles, placement: this.placement, accessibleCloseLabel: this.accessibleCloseLabel, theme: this.theme }, h("slot", null)))));
     }
     static get is() { return "duet-tooltip"; }
-    static get encapsulation() { return "scoped"; }
+    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["duet-tooltip.scss"]

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/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-6f149d10.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-82cbf2aa.js';
+import { D as DuetAlert$1, d as defineCustomElement$1 } from './p-ed8b17fe.js';
 
 const DuetAlert = DuetAlert$1;
 const defineCustomElement = defineCustomElement$1;