@duetds/components 10.3.0 → 10.4.0

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

@@ -197,23 +197,23 @@ export class DuetSelect {
      */
     render() {
         const identifier = this.identifier || this.selectId;
-        return (h(Host, { key: 'd4455f68cbe21a6307b6c31fc5d1861e9b709308', class: {
+        return (h(Host, { key: '0ddcfe653c975b950d0e354b409ab1d6f262c8e8', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-expand": this.expand,
                 [`duet-select-variation-${this.variation}`]: true,
-            } }, h("div", { key: '40ddd5f7ed270fd9bbee28fe22f73087956bf129', class: {
+            } }, h("div", { key: 'fd9cd25b5741264512afa023ffdaadd5f2c4bf88', class: {
                 "duet-select-container": true,
                 "duet-label-hidden": this.labelHidden,
                 "duet-theme-turva": this.theme === "turva",
                 [`duet-select-variation-${this.variation}`]: true,
                 "duet-input-top-caption-shown": this.isCaptionVisible,
                 "has-error": !!this.error,
-            } }, h(DuetInternalLabel, { key: 'e4e51bfc77281cf1fc4f160ecd4853ecbed2d8f4', theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { key: '775a1132a55071285222eb159dab2cad6c53ed23', direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: 'c9f5f7f6cba8f1ab8fe8b97d9bc0f477b0c0c35d', name: "tooltip" }), this.caption && (h("duet-caption", { key: '730da616b797488390632e9736282d318d18573b', id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { key: '869eef60d494256461d86930a200bce7a1f5b6a6', class: "duet-select-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { key: '4606845937218a919ab4b8aa8ca7d5c03cdb7b53', id: this.topCaptionPlaceholderId, class: "duet-select-placeholder", size: "small" }, this.placeholder)), h("slot", { key: '595fe0d02b48772d88098c21cc0d4d9f67e40eee' }), h("select", { key: 'ac4a661cb6210673febb02da37f5c0f4310874db', ref: select => (this.nativeSelect = select), disabled: this.disabled, name: this.name, id: identifier, role: this.role, "aria-labelledby": this.labelId, "aria-describedby": this.getDescribedBy(), "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.onChange, required: this.required }, this.placeholder && (h("option", { key: '4d043e787efa622f3e396a2103439339fd2a73b8', disabled: true, selected: true, value: "" }, this.placeholder)), !this.processedItems ? (h("option", null, "Virhe valintoja ladattaessa. P\u00E4ivit\u00E4 sivu ja kokeile uusiksi.")) : (this.processedItems.map(item => {
+            } }, h(DuetInternalLabel, { key: 'c3b5c05a907cc0ff12d55f85670fd2ad9f15adf1', theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { key: '7bc69b0dc20365188e9301bfdd30df1124b18761', direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: 'f4bc4ce586c29071d3bc4f20960a404b981203dd', name: "tooltip" }), this.caption && (h("duet-caption", { key: '8465f79cf880f37acabd18e2e1ded29e49bd94ee', id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { key: 'c9d22a8a3ca34ae31b859b8733e0c6745ebbeabf', class: "duet-select-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { key: '1fe97d2769761b8987fe53554bec4a3edd114fd4', id: this.topCaptionPlaceholderId, class: "duet-select-placeholder", size: "small" }, this.placeholder)), h("slot", { key: 'b274666d37f85b37e317908426b60ca1cc8bdfff' }), h("select", { key: '156afda8ad1a3cd37e999c3ef624e3bdf23f3939', ref: select => (this.nativeSelect = select), disabled: this.disabled, name: this.name, id: identifier, role: this.role, "aria-labelledby": this.labelId, "aria-describedby": this.getDescribedBy(), "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.onChange, required: this.required }, this.placeholder && (h("option", { key: 'e9a8b64cbab68d12e0769099ecce296305127185', disabled: true, selected: true, value: "" }, this.placeholder)), !this.processedItems ? (h("option", null, "Virhe valintoja ladattaessa. P\u00E4ivit\u00E4 sivu ja kokeile uusiksi.")) : (this.processedItems.map(item => {
             return isOptionGroup(item) ? this.renderOptionGroup(item) : this.renderOption(item);
-        }))), h("div", { key: 'c49def1bb08120461f4f4dc48ca9d2bfc3db1dba', class: {
+        }))), h("div", { key: 'd81915bb17ca09a4ed1ec49be010590ab526f1bd', class: {
                 "duet-select": true,
                 [`duet-select-variation-${this.variation}`]: true,
-            }, "aria-hidden": "true" }, h("span", { key: this.value, class: "duet-select-selected-value" }, this.getSelectedItemLabel()), (this.variation === "default" && (h("svg", { key: 'fea29d4166e04f520240f5d61eed6dc2a007a3b0', role: "img", class: "duet-select-icon", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '39476404793f72829c0b759d9ac21e6436e56dde', d: "m12 18.999c-.4 0-.776-.156-1.059-.438l-10.721-10.72c-.142-.142-.22-.33-.22-.531 0-.2.078-.389.22-.53.142-.142.33-.22.53-.22s.389.078.53.22l10.72 10.719 10.72-10.719c.142-.142.33-.22.53-.22s.389.078.53.22c.142.142.22.33.22.53s-.078.389-.22.53l-10.72 10.72c-.282.283-.659.439-1.06.439z" })))) || (h("duet-icon", { key: '9101a0f62cdb9392fb1c291919a9db1a951ce8fb', theme: this.theme, name: "action-arrow-down-small", color: "currentColor", margin: "none", size: this.variation === "compact" ? "xxx-small" : "xx-small" }))), h("span", { key: 'd9cd1eba5ce25f3a5d62a1cf5a91a34dde31e551', class: "duet-keep-container-height", role: "presention", "aria-hidden": "true" }, "_")), h("span", { key: 'bdcb742b9b81e76d4767210a505d388b11b8a9ca', class: "duet-select-help", id: this.errorId, "aria-live": this.accessibleLiveError, "aria-atomic": "true", "aria-relevant": "additions removals" }, this.error && h("span", { key: '4b60b8d44ad7e984a2a97fdcc82383edce1efbc4', class: "duet-select-error" }, this.error)))));
+            }, "aria-hidden": "true" }, h("span", { key: this.value, class: "duet-select-selected-value" }, this.getSelectedItemLabel()), (this.variation === "default" && (h("svg", { key: 'ba3694a78ef77659a7590e37b5dcba1f45a2b13d', role: "img", class: "duet-select-icon", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'de4080cef2281d70764f02d5f0218fa4c15e8d0b', d: "m12 18.999c-.4 0-.776-.156-1.059-.438l-10.721-10.72c-.142-.142-.22-.33-.22-.531 0-.2.078-.389.22-.53.142-.142.33-.22.53-.22s.389.078.53.22l10.72 10.719 10.72-10.719c.142-.142.33-.22.53-.22s.389.078.53.22c.142.142.22.33.22.53s-.078.389-.22.53l-10.72 10.72c-.282.283-.659.439-1.06.439z" })))) || (h("duet-icon", { key: '0787be25e87ce14407892b6c6fa020e9eac367f7', theme: this.theme, name: "action-arrow-down-small", color: "currentColor", margin: "none", size: this.variation === "compact" ? "xxx-small" : "xx-small" }))), h("span", { key: '3e6af5e4df0aa4db79dac1274402f56787d90e47', class: "duet-keep-container-height", role: "presention", "aria-hidden": "true" }, "_")), h("span", { key: '29a4602a5757f066eb9827906e3629488da9b492', class: "duet-select-help", id: this.errorId, "aria-live": this.accessibleLiveError, "aria-atomic": "true", "aria-relevant": "additions removals" }, this.error && h("span", { key: '496ed4e875ea72afb3074e2f4da4e2682bc6696c', class: "duet-select-error" }, this.error)))));
     }
     static get is() { return "duet-select"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-shaped-image/duet-shaped-image.js

@@ -33,9 +33,9 @@ export class DuetShapedImage {
         const style = {
             "--rotation": `${this.rotation}deg`,
         };
-        return (h(Host, { key: '30bd1e8a895453ef9ba0ef177efb3d0e7dcf6e51', class: { "duet-theme-turva": this.theme === "turva", "duet-m-0": this.margin === "none" } }, h("span", { key: '41ad8a12f4f501eeedbf68d8826fb03418d79167', class: {
+        return (h(Host, { key: '27f36b3527731cc1d47a65655e150c963b9a23d9', class: { "duet-theme-turva": this.theme === "turva", "duet-m-0": this.margin === "none" } }, h("span", { key: 'b3d7bf5649da0a77e9bee42baab54840e47f9505', class: {
                 "shaped-image": true,
-            }, role: "img", "aria-label": this.accessibleLabel, style: style }, h("span", { key: 'bf49040fd93cb6b26f9af4b4182b734d6f38fd1e', class: "shaped-image-mask", role: "presentation" }, h("span", { key: 'bdb6b17ad7c5f5d599d5a26d0eee16cafaf478a2', class: "shaped-image-img", role: "presentation", style: { backgroundImage: `url("${this.src}")` } })))));
+            }, role: "img", "aria-label": this.accessibleLabel, style: style }, h("span", { key: '84fe60ad6ee4fdcc2544b07c5c07a214cf5efb15', class: "shaped-image-mask", role: "presentation" }, h("span", { key: 'edb1df30260d26bb87ef59a97aa031c97e4dce6d', class: "shaped-image-img", role: "presentation", style: { backgroundImage: `url("${this.src}")` } })))));
     }
     static get is() { return "duet-shaped-image"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-share-chart/duet-share-chart.js

@@ -63,12 +63,12 @@ export class DuetShareChart {
         this.itemsTotalValue = this.items.reduce((total, { value }) => total + value, 0);
     }
     render() {
-        return (h(Host, { key: 'a8331a4750680d3263cbb297663da80b23a61474' }, h("div", { key: '776a72d2c016b76c0020a0336379f6f50c767108', class: "duet-share-chart-horizontal-bar", role: "presentation" }, this.items
+        return (h(Host, { key: 'c22523d7e91ce5ef59f5553ed847309cc45c9499' }, h("div", { key: '9aa4f2e4c117c5f7c30bce27585c7abc4d5568ea', class: "duet-share-chart-horizontal-bar", role: "presentation" }, this.items
             .filter(i => !!i.value)
             .map(item => (h("span", { class: "duet-share-chart-share", style: {
                 width: `${(item.value / this.itemsTotalValue) * 100}%`,
                 backgroundColor: getColorByName(item.color, this.theme),
-            } })))), h("ul", { key: '56ea054fcb62eb2b444f8359abb3bfd322f2f7e2', class: "duet-share-chart-item-list" }, this.items.map(item => (h("li", { class: { "duet-theme-turva": this.theme === "turva" } }, h("span", { class: "duet-share-chart-item-color", style: { background: getColorByName(item.color, this.theme) } }), h("span", { class: "duet-share-chart-item-text" }, item.text, ":"), h("span", { class: "duet-share-chart-item-value" }, "\u00A0", formatNumber(item.value), "\u00A0", this.unit), this.unit !== "%" && (h("duet-visually-hidden", null, `${formatNumber((item.value / this.itemsTotalValue) * 100, 0)} %`)))))), h("slot", { key: '38276b55daac849b429a9ec4e963c2d308a66267' })));
+            } })))), h("ul", { key: '428d17dde9185b071455325d5d2195618f4a0267', class: "duet-share-chart-item-list" }, this.items.map(item => (h("li", { class: { "duet-theme-turva": this.theme === "turva" } }, h("span", { class: "duet-share-chart-item-color", style: { background: getColorByName(item.color, this.theme) } }), h("span", { class: "duet-share-chart-item-text" }, item.text, ":"), h("span", { class: "duet-share-chart-item-value" }, "\u00A0", formatNumber(item.value), "\u00A0", this.unit), this.unit !== "%" && (h("duet-visually-hidden", null, `${formatNumber((item.value / this.itemsTotalValue) * 100, 0)} %`)))))), h("slot", { key: '2f394e013dfe0a533524bef6f0649f57d1c2d957' })));
     }
     static get is() { return "duet-share-chart"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-share-chart-item/duet-share-chart-item.js

@@ -10,7 +10,7 @@ export class DuetShareChartItem {
         this.value = 0;
     }
     render() {
-        return (h(Host, { key: 'd35a290305ffe6ec034caf3d8f5d21e4c85ed7b5' }, h("div", { key: '885469b4f2ea9629da7f0baed471c5034eb9e979', hidden: true }, h("slot", { key: 'b4ecc6c43546845aaffb210b38a35cdafd88b403' }))));
+        return (h(Host, { key: 'fb5eafa552f0f72600a3cec4b325ce891073f5bb' }, h("div", { key: 'b982b99b868fee7e0211a9b0dba7306eb2615874', hidden: true }, h("slot", { key: 'e8501789a378faa695408b024dd6d7c83aa3c1c9' }))));
     }
     static get is() { return "duet-share-chart-item"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-show-more/duet-show-more.css

@@ -45,7 +45,7 @@
   outline-offset: 2px;
   outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-show-more .content:focus, .duet-show-more .content:focus.duet-theme-turva, .duet-theme-turva .duet-show-more .content:focus, .duet-show-more .content:focus.duet-theme-turva {
+.duet-theme-turva .duet-show-more .content:focus, .duet-show-more .content:focus.duet-theme-turva {
   outline: 2px solid;
   outline-offset: 2px;
   outline-color: rgba(53, 79, 101, 0.8);

package/lib/collection/components/duet-show-more/duet-show-more.js

@@ -136,12 +136,12 @@ export class DuetShowMore {
      * Always the last one of the class.
      */
     render() {
-        return (h(Host, { key: '9b7b230463671d2192e210969a461b48251cae0e' }, h("div", { key: '241c4328ff06cb3582ccef14dc4798dfdfa79f9e', class: {
+        return (h(Host, { key: 'a43de6a4bae0a8c38852a11a7b384b7f104ec024' }, h("div", { key: '74f8d429039d38ea1151aeab159f34cfed375df6', class: {
                 "duet-show-more": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-m-0": this.margin === "none",
                 open: this.open,
-            } }, h("div", { key: 'ec5a0385c4fa9014a0d218ff6e9219be7412b0dd', ref: ref => (this.contentElement = ref), class: { content: true, "duet-theme-turva": this.theme === "turva" }, id: this.contentId, tabindex: this.open ? "-1" : "" }, h("div", { key: '55832cd10199162f413b2d99a4a1d2053ac4e665', class: { "slotted-content": true } }, h("slot", { key: 'c6b5fdd8c48f8ace2e8bf1bba830c21a9e2a1bb1' }))), h("duet-button", { key: '7357d2b3e0aad58f27e4809cf8b727bee905f1e0', id: this.buttonId, variation: "plain", "accessible-label": this.buttonAriaOpen ? this.showLessAccessibleLabel : this.showMoreAccessibleLabel, "accessible-expanded": this.buttonAriaOpen ? "true" : "false", "accessible-controls": this.contentId, accessiblePressed: this.isSafariBrowser ? this.open : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown, "icon-right": true, icon: this.open ? "action-arrow-up-small" : "action-arrow-down-small", "icon-size": "medium-small", size: "small", margin: this.buttonMargin, padding: this.buttonPadding, theme: this.theme === "turva" ? "turva" : "default" }, h("span", { key: '762004e8bd6923114c75c638e6987f40e9bbf96d' }, this.open ? this.showLessLabel : this.showMoreLabel)))));
+            } }, h("div", { key: 'ec6fcb6addd5b4a40b56a5daae3f3a0aeba6d872', ref: ref => (this.contentElement = ref), class: { content: true, "duet-theme-turva": this.theme === "turva" }, id: this.contentId, tabindex: this.open ? "-1" : "" }, h("div", { key: '1c5bb72f5086f835a944bbe4dac71a8d47a77367', class: { "slotted-content": true } }, h("slot", { key: 'e89b3fa40066fc91297a0acca877ecd297ef0a62' }))), h("duet-button", { key: 'b957cad1b16adb85490f6c4e96a739f0038c0bbb', id: this.buttonId, variation: "plain", "accessible-label": this.buttonAriaOpen ? this.showLessAccessibleLabel : this.showMoreAccessibleLabel, "accessible-expanded": this.buttonAriaOpen ? "true" : "false", "accessible-controls": this.contentId, accessiblePressed: this.isSafariBrowser ? this.open : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown, "icon-right": true, icon: this.open ? "action-arrow-up-small" : "action-arrow-down-small", "icon-size": "medium-small", size: "small", margin: this.buttonMargin, padding: this.buttonPadding, theme: this.theme === "turva" ? "turva" : "default" }, h("span", { key: 'a7c76ec6d98b5644601d2caa1d21306fa127fef9' }, this.open ? this.showLessLabel : this.showMoreLabel)))));
     }
     static get is() { return "duet-show-more"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-slideout/duet-slideout.css

@@ -98,7 +98,7 @@
   outline-offset: 2px;
   outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-slideout .dialog .top button:focus, .duet-slideout .dialog .top button:focus.duet-theme-turva, .duet-theme-turva .duet-slideout .dialog .top button:focus, .duet-slideout .dialog .top button:focus.duet-theme-turva {
+.duet-theme-turva .duet-slideout .dialog .top button:focus, .duet-slideout .dialog .top button:focus.duet-theme-turva {
   outline: 2px solid;
   outline-offset: 2px;
   outline-color: rgba(53, 79, 101, 0.8);

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

@@ -158,12 +158,14 @@ export class DuetSlideout {
         if (this.mutationObserver) {
             this.mutationObserver.observe(this.element, { childList: true, attributeFilter: ["open"], subtree: true });
         }
-        if (this.opener && typeof this.opener !== "string") {
-            this.setOpenButton(this.opener);
-        }
-        else {
-            this.setOpenButton();
-        }
+        requestAnimationFrame(() => {
+            if (this.opener && typeof this.opener !== "string") {
+                this.setOpenButton(this.opener);
+            }
+            else {
+                this.setOpenButton();
+            }
+        });
     }
     disconnectedCallback() {
         disconnectLanguageChangeObserver(this);
@@ -294,17 +296,17 @@ export class DuetSlideout {
         };
         const topLevelOpenMenuBarTranslation = getLocaleString(this.topLevelOpenMenuBarLangObject);
         const exitTranslation = getLocaleString(this.exitLangObject);
-        return (h(Host, { key: 'd7b06f4616c56fe0a9deb3df7218be41d262556c' }, h("div", { key: '4413b3aa5b8a3c01cc4016e3846b10dd136c393c', class: { "duet-slideout": true, "duet-theme-turva": this.theme === "turva" } }, this.modal && h("duet-overlay", { key: 'abe01c506ded568802ba19de8f24d872f81b24dd', visible: this.open, zIndex: "600" }), h("div", { key: '888233b81ba64512ccd9785b4b5a290da3a8eb43', ref: element => (this.dialog = element), tabindex: "-1", role: "dialog", id: "dialog", "aria-labelledby": "button", "aria-modal": this.isSafariBrowser ? false : true, "aria-flowto": "slot-container", class: {
+        return (h(Host, { key: '688c802695368111aeb4c7ce77fe79bf01386c65' }, h("div", { key: '43fbd950e8cc9b7202640ec050473ad333053b21', class: { "duet-slideout": true, "duet-theme-turva": this.theme === "turva" } }, this.modal && h("duet-overlay", { key: '91156175999730330e4acc54a771525321c5b181', visible: this.open, zIndex: "600" }), h("div", { key: 'f319a1ebdf8063f906a73d7c9cf5f374ac5a0006', ref: element => (this.dialog = element), tabindex: "-1", role: "dialog", id: "dialog", "aria-labelledby": "button", "aria-modal": this.isSafariBrowser ? false : true, "aria-flowto": "slot-container", class: {
                 dialog: true,
                 hidden: !this.open,
                 modal: this.modal,
-            }, style: styles }, h(FocusGuard, { key: '7c2b5eb4d236ddd5b7baa9062b0ea2bd49cc5522', moveFocusTo: this.closeButton }), h("div", { key: '3635b98dc3bf6414d914c38dbbc6bc1c020dda7a', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: 'e6bc2f2ca5ba5f05d225b3f700eaad4a8d207ef1', class: "top" }, h("button", { key: '8bdb551c5dabba2bdbbc4a7a08ada1bfad2a8d0b', ref: element => (this.closeButton = element), "aria-haspopup": "dialog", "aria-controls": "dialog", "aria-expanded": this.open ? "true" : "false", "aria-label": `${exitTranslation}`, type: "button", class: {
+            }, style: styles }, h(FocusGuard, { key: '4948808956e87089ea34a36fdb38d18dda0e344f', moveFocusTo: this.closeButton }), h("div", { key: 'b92d3796bbfb8710a1caff98a651ae25a0200f70', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: '37d6a16746c2dcfddf692c6fea31eccac6dce80b', class: "top" }, h("button", { key: '813ace204147dc026a6984dec194b30c6b65383b', ref: element => (this.closeButton = element), "aria-haspopup": "dialog", "aria-controls": "dialog", "aria-expanded": this.open ? "true" : "false", "aria-label": `${exitTranslation}`, type: "button", class: {
                 "slideout-close": true,
                 active: this.open,
                 "duet-theme-turva": this.theme === "turva",
-            }, onClick: this.onClick, inert: this.openPanel }, h("duet-icon", { key: '2134ec846a523228214b9ae75da36c2b52daaa63', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: '915b4da81dc28d593fb081e7fb261adde35a7859', class: "sticky-header" }, h("slot", { key: '882f60d86cc80ee465f4ab6e0a46ec58103a1611', name: "sticky-header" }))), h("div", { key: '6cdddc38ce0abd27431f702054a17b971c5098c9', id: "slot-container", role: this.accessibleRole, "aria-label": this.openPanel ? topLevelOpenMenuBarTranslation : null, class: {
+            }, onClick: this.onClick, inert: this.openPanel }, h("duet-icon", { key: '93577566dd1ab3865aa1e822504020ac2ccea7b8', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: '05fd3bd597b67cdb15940ab2ab7192d88039076d', class: "sticky-header" }, h("slot", { key: '18aa41a6860b850a23413df91c17ab157812b074', name: "sticky-header" }))), h("div", { key: 'c556058c1476e48980795e75714d9322d0a83397', id: "slot-container", role: this.accessibleRole, "aria-label": this.openPanel ? topLevelOpenMenuBarTranslation : null, class: {
                 items: true,
-            } }, h("slot", { key: '9981a5f609c93d9b666edc3d8f13cbacbf78becc' })), h(FocusGuard, { key: 'a18fb90c02f65dde3dc192f77c5b7460e626f641', moveFocusTo: this.closeButton })))));
+            } }, h("slot", { key: 'b0b0551fa20865b54092c9dedbe416590bdb6344' })), h(FocusGuard, { key: '3f650d271ea8bb3c029e9d75c7dfba1742a88d3e', moveFocusTo: this.closeButton })))));
     }
     static get is() { return "duet-slideout"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-slideout-lang/duet-slideout-lang.js

@@ -38,7 +38,7 @@ export class DuetSlideoutLang {
      */
     render() {
         const langTranslation = getLocaleString(this.chooseLangObject);
-        return (h(Host, { key: '2c744c1b9d32b518b879daf12ffafe26ba74c43b' }, h("div", { key: 'ddb19f0b54c8a3f8680e76c8b3e565ff9c114e3b', class: "duet-slideout-lang", role: "group", "aria-label": langTranslation }, h("duet-icon", { key: '09e40a1777dc671deffa188ccecfc9ce78089ecb', name: "navigation-language", margin: "none", color: "secondary", size: "small" }), h("slot", { key: '6e35a0b19bab97a7810f90ddd99f399a60e9f3dc' }))));
+        return (h(Host, { key: '8847b4894f616c58b889e51d183c71ec672554fc' }, h("div", { key: '86a6652e67569a898f9aceea571fd656ae22bfa6', class: "duet-slideout-lang", role: "group", "aria-label": langTranslation }, h("duet-icon", { key: '038bdf514daccd3f28a27ad0225f4a46ea84ecea', name: "navigation-language", margin: "none", color: "secondary", size: "small" }), h("slot", { key: '49e912e3e178c2d4c3042c4d9d1ae39991bbef52' }))));
     }
     static get is() { return "duet-slideout-lang"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-slideout-link/duet-slideout-link.css

@@ -46,7 +46,7 @@
   outline-offset: 2px;
   outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-slideout-link:focus, .duet-slideout-link:focus.duet-theme-turva, .duet-theme-turva .duet-slideout-link:focus, .duet-slideout-link:focus.duet-theme-turva {
+.duet-theme-turva .duet-slideout-link:focus, .duet-slideout-link:focus.duet-theme-turva {
   outline: 2px solid;
   outline-offset: 2px;
   outline-color: rgba(53, 79, 101, 0.8);

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

@@ -77,12 +77,12 @@ export class DuetSlideoutLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'ddd58c7a2dd10eb703260af1101339c6294f9d3a' }, h("a", { key: 'e2be40572ff1c774d51cb6f8170c2e73b72948cf', target: !this.href ? null : this.external ? "_blank" : "_self", class: {
+        return (h(Host, { key: 'eca2104ff848dfd3c52bab08c4377d19e374d13d' }, h("a", { key: '9915adbb807d80081d2d791f36926a5b8a6b2a3e', target: !this.href ? null : this.external ? "_blank" : "_self", class: {
                 "duet-slideout-link": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
                 [this.size]: true,
-            }, href: this.href, "aria-current": this.active ? "true" : "false", lang: this.targetLanguage, hreflang: this.targetLanguage, "aria-label": (this.href && getAccessibleLinkLabel(this)) || this.accessibleLabel, rel: this.external ? "noopener" : undefined }, this.icon && (h("duet-icon", { key: 'c1f75fd56387b7811d990bc9bba9f7114f960fd5', name: this.icon, color: "secondary", size: this.menuItem ? "x-small" : "small", margin: "none" })), h("div", { key: '6794b7cfe9a5e985e9123a1896b9b71292955930', class: "label" }, h("span", { key: '02eef0aae26c07d79209c083769c83096aaaddf5' }, h("span", { key: '869ba809178272b72d91830a2d0544e601bcc1f8', class: "label-container" }, h("span", { key: '432f855593996fb8a470b68982662beb6cce16fd', class: "label-content" }, h("slot", { key: '8be35ac79ca5ef94119a05b9f712c24e5c6760ab' })), this.external && (h("duet-icon", { key: 'c80f5df7d3c816a6235150c3a89e9b685e3a1205', class: "external-icon", theme: this.theme, name: newWindowIcon.title, margin: "none", size: "auto", color: "currentColor" }))), h("slot", { key: 'b685c8cc67e5e780536c46d949951516cdea46d1', name: "description" })), this.caret && (h("duet-icon", { key: 'c53c92133453d2421b92f8ab7ae7741c71a686e5', name: "action-arrow-right", color: "secondary", size: "x-small", margin: "none" }))))));
+            }, href: this.href, "aria-current": this.active ? "true" : "false", lang: this.targetLanguage, hreflang: this.targetLanguage, "aria-label": (this.href && getAccessibleLinkLabel(this)) || this.accessibleLabel, rel: this.external ? "noopener" : undefined }, this.icon && (h("duet-icon", { key: 'eabe8fda17546094fafc6fa4a253e05c63fc1938', name: this.icon, color: "secondary", size: this.menuItem ? "x-small" : "small", margin: "none" })), h("div", { key: '98d30980e7ac325c36be8bb86b788d60cd36831d', class: "label" }, h("span", { key: '7f96584e0ee24069a7cc9afc2649d3a0a7fe8758' }, h("span", { key: '2b844eb1ae6ff0f7215e7979776c673e6f1accfb', class: "label-container" }, h("span", { key: 'd6de09afc6dbb0cfd6855f98e34c6b7b0b2c6421', class: "label-content" }, h("slot", { key: 'ef0c11c80556e88596d115ef534f86cc044362f8' })), this.external && (h("duet-icon", { key: 'ffe4c9d8a90105199e4a79702847705f958adf00', class: "external-icon", theme: this.theme, name: newWindowIcon.title, margin: "none", size: "auto", color: "currentColor" }))), h("slot", { key: 'd329594665a0964175ea0872747342f4e070227d', name: "description" })), this.caret && (h("duet-icon", { key: 'aafabb173724e1a6b736f289a7d76582f03f78c4', name: "action-arrow-right", color: "secondary", size: "x-small", margin: "none" }))))));
     }
     static get is() { return "duet-slideout-link"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-slideout-panel/duet-slideout-panel.css

@@ -62,7 +62,7 @@
   outline-offset: 2px;
   outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-slideout-panel .link:focus, .duet-slideout-panel .link:focus.duet-theme-turva, .duet-theme-turva .duet-slideout-panel .link:focus, .duet-slideout-panel .link:focus.duet-theme-turva {
+.duet-theme-turva .duet-slideout-panel .link:focus, .duet-slideout-panel .link:focus.duet-theme-turva {
   outline: 2px solid;
   outline-offset: 2px;
   outline-color: rgba(53, 79, 101, 0.8);
@@ -162,9 +162,7 @@
   outline-offset: 2px;
   outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-slideout-panel .top .back:focus, .duet-slideout-panel .top .back:focus.duet-theme-turva, .duet-theme-turva .duet-slideout-panel .top .back:focus, .duet-slideout-panel .top .back:focus.duet-theme-turva,
-.duet-theme-turva .duet-slideout-panel .top .close:focus,
-.duet-slideout-panel .top .close:focus.duet-theme-turva,
+.duet-theme-turva .duet-slideout-panel .top .back:focus, .duet-slideout-panel .top .back:focus.duet-theme-turva,
 .duet-theme-turva .duet-slideout-panel .top .close:focus,
 .duet-slideout-panel .top .close:focus.duet-theme-turva {
   outline: 2px solid;

package/lib/collection/components/duet-slideout-panel/duet-slideout-panel.js

@@ -174,25 +174,25 @@ export class DuetSlideoutPanel {
         };
         const exitTranslation = getLocaleString(this.exitLangObject);
         const backTranslation = getLocaleString(this.backLangObject);
-        return (h(Host, { key: '8136756acde9cd9a5038e49c14049295ef2a50ee' }, h("div", { key: 'bd5e9a275c149b6a52172d9349fefb6aef42282e', class: {
+        return (h(Host, { key: '91e1bfb50346e6f0b7d7b93f6d9cb16e84df9297' }, h("div", { key: '80891454e08a69f87d42ca5879c85a7e1eab6d5c', class: {
                 "duet-slideout-panel": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.open,
-            } }, this.badge && h("duet-indicator", { key: '240033e4afa0a5e32dc708eceee5cd3c35fad16f', variation: "change" }), h("button", { key: '2fcac219bc058445a3f744e99beb1ce8d1be7c27', ref: element => (this.openButton = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", id: "button", type: "button", class: {
+            } }, this.badge && h("duet-indicator", { key: '2dc9f2f3b5eebbc44158f9c7795ee2e9dadbfeef', variation: "change" }), h("button", { key: '86db5918e585201320c57a8770ab850356bda06b', ref: element => (this.openButton = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", id: "button", type: "button", class: {
                 link: true,
                 active: this.active,
                 "duet-theme-turva": this.theme === "turva",
-            }, onClick: this.onClick, inert: this.open }, this.icon && (h("div", { key: '9a7ea3d7682510b7a94c7e7bfff417dabfd833b0', class: "duet-slideout-icon" }, h("duet-icon", { key: '29e67edcad14dd8f20f1a0a319bdbe3bba7d0495', name: this.icon, size: "small", margin: "none", color: "secondary" }))), h("span", { key: '02d2e2107083535c6bf1d2b89c92681ed0ff5257', class: "label" }, h("span", { key: 'ce6a1f30ee04677c584d98a228d0302f0b02c0f8', class: { "label-text": true, [this.labelSize]: true } }, h("slot", { key: 'd7c645fa7153a803b3e63b3614ec65ff1cb775dd', name: "label" })), h("duet-icon", { key: 'fc24304d004fc06d1f44d6611555af3aa57b91f0', class: "caret", name: "action-arrow-right", margin: "none", size: "x-small", color: "secondary" }))), h("div", { key: '893f838b0476b45a35c5c5df009ea25be382748f', ref: element => (this.dialog = element), class: {
+            }, onClick: this.onClick, inert: this.open }, this.icon && (h("div", { key: '635addd38144863b546edd4d8792a26d4e8dd3c4', class: "duet-slideout-icon" }, h("duet-icon", { key: '3610a7e6ebcdf22fe198e4428538d559599c79c0', name: this.icon, size: "small", margin: "none", color: "secondary" }))), h("span", { key: '9b4d70cc570113c1e667ced944bccae1e4613398', class: "label" }, h("span", { key: '6f16630f451ef9ebd920462cd81df2cf92ab5312', class: { "label-text": true, [this.labelSize]: true } }, h("slot", { key: '80688a824da754215dcbfcd668ff8144880147d1', name: "label" })), h("duet-icon", { key: '205d74fef784d3db602fcccf61ba49dfb5995317', class: "caret", name: "action-arrow-right", margin: "none", size: "x-small", color: "secondary" }))), h("div", { key: '5be9dab7afdb48916100c5bfb8242eb061ba6c96', ref: element => (this.dialog = element), class: {
                 dialog: true,
                 hidden: !this.open,
-            }, style: styles }, h(FocusGuard, { key: '75cd1ca13074e4edf114d7e016b30e77503f6766', moveFocusTo: this.closeButton }), h("div", { key: '53f51c39c3e701be9b0fc9f402507a1315669820', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: '08f9a0174b2a902a46f6f8a722783740e2c03f01', class: "top" }, h("button", { key: '70ec35736850d5740cf7940e1195202266ba64b3', ref: element => (this.closeButton = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-label": `${backTranslation}`, type: "button", class: {
+            }, style: styles }, h(FocusGuard, { key: 'ad7c4a34db3120b40ed51061125f05d69017b342', moveFocusTo: this.closeButton }), h("div", { key: 'af56281cf6a0a4c7355f48d17b66c5495e7982f9', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: '676eca91428ce8439e68da74b59a0bc8d393f5a5', class: "top" }, h("button", { key: '2d8f3d984de8ca1efccc191115b7657a455c5ef9', ref: element => (this.closeButton = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-label": `${backTranslation}`, type: "button", class: {
                 back: true,
                 "duet-theme-turva": this.theme === "turva",
-            }, onClick: this.onClick }, h("duet-icon", { key: '8fd080b3ddde0fcc9edc8e3b65c71f038e9a641b', class: "caret", name: "action-arrow-left", margin: "none", size: "small", color: "secondary" })), h("span", { key: '6c5bf9eee61b85d3b334a3b76f8568a91f3ede8a' }, this.label.innerHTML), h("button", { key: '3de010c98fc4a25b160f0bb321652db95372b529', class: { close: true, "duet-theme-turva": this.theme === "turva" }, type: "button", onClick: this.onCloseClick, "aria-label": `${exitTranslation}` }, h("duet-icon", { key: '3d98d30425ce462e8d14ffa07cb631c452bdbf36', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: '9714f189c3e45aa70201006fee01f0daab33acc8', class: "sticky-header" }, h("slot", { key: 'bda41ebde4391bdce90a2d9c3c9c2b3f59a484b1', name: "sticky-header" }))), h("div", { key: '7c97e9932da1cfbca0d045f7744d64a697c6849e', tabindex: "-1", role: "menu",
+            }, onClick: this.onClick }, h("duet-icon", { key: 'f4d1be2b1157d12fff10e9f84eb7905d93091e79', class: "caret", name: "action-arrow-left", margin: "none", size: "small", color: "secondary" })), h("span", { key: '2e0426bee359ed9f3ccf9f044e9c751924003a5c' }, this.label.innerHTML), h("button", { key: 'f4edf9a9df667475a3c00b214e134bce7d9d7ae9', class: { close: true, "duet-theme-turva": this.theme === "turva" }, type: "button", onClick: this.onCloseClick, "aria-label": `${exitTranslation}` }, h("duet-icon", { key: '548ed5fadb9216137fcdc0762b35454ceb21c8d4', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: '923603a20dbab28d51a376a9c252c35e33803880', class: "sticky-header" }, h("slot", { key: '07e15709effbee9950d36f03dd91e73b7e9ab336', name: "sticky-header" }))), h("div", { key: '7e63e1cd014106736bb712c20023f62245e43486', tabindex: "-1", role: "menu",
             //TODO: slideout menu fades out, needs to be instant
             id: "menu", "aria-labelledby": "button", class: {
                 items: true,
-            } }, h("slot", { key: '760f770c9b134fddb61954aa9bda6d2f7c1ec3d5' })), h(FocusGuard, { key: '0f423c9da48756f6e1f7be813e8a9e948e650293', moveFocusTo: this.closeButton })))));
+            } }, h("slot", { key: 'fa18b91a1114433c57ecd566934f505e9fc62cf5' })), h(FocusGuard, { key: '7251452b17bbdfd8978f302bfde0e33991b39465', moveFocusTo: this.closeButton })))));
     }
     static get is() { return "duet-slideout-panel"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-slideout-panel-dropdown/duet-slideout-panel-dropdown.css

@@ -64,7 +64,7 @@
   outline-offset: 2px;
   outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-slideout-panel-dropdown button:focus, .duet-slideout-panel-dropdown button:focus.duet-theme-turva, .duet-theme-turva .duet-slideout-panel-dropdown button:focus, .duet-slideout-panel-dropdown button:focus.duet-theme-turva {
+.duet-theme-turva .duet-slideout-panel-dropdown button:focus, .duet-slideout-panel-dropdown button:focus.duet-theme-turva {
   outline: 2px solid;
   outline-offset: 2px;
   outline-color: rgba(53, 79, 101, 0.8);

package/lib/collection/components/duet-slideout-panel-dropdown/duet-slideout-panel-dropdown.js

@@ -52,18 +52,18 @@ export class DuetSlideoutPanelDropdown {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'c07d09acdc3ae629d1ade84a8f38ba5a4400c93c' }, h("div", { key: '5c460268ab843fd63034f39baaabb0217610742e', class: {
+        return (h(Host, { key: '74023ff3094ea4e1867ae58690abaa3f338053e7' }, h("div", { key: '0a0de8be47b2d48bc9f0c1564d458af29ee2e05f', class: {
                 "duet-slideout-panel-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.open,
-            } }, h("button", { key: 'fda35d3ebe560638a7684ff895a1a07fae2795dc', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", id: "button", type: "button", class: {
+            } }, h("button", { key: '887b98839351d36434969447057013fd8e7614ed', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", id: "button", type: "button", class: {
                 active: this.active,
                 "duet-theme-turva": this.theme === "turva",
-            }, onClick: this.onClick }, this.icon && h("duet-icon", { key: 'adbef98fc7e1c01c4db93fc890adca55a968c3ed', name: this.icon, size: "small", margin: "none", color: "secondary" }), h("span", { key: '9a9e035c35cfc2bd40ca504dfb755db6598072ab', class: "label" }, h("slot", { key: '69b970d13d166d320f423480e93e721a8ca0791a', name: "label" }), h("duet-icon", { key: '48e456eb714c1f276c30d1830c4335a2c78b7674', class: "caret", name: "action-arrow-down-small", margin: "none", size: "xx-small", color: "secondary" }))), h("div", { key: 'bb3730e96c82aab35530c476c78880b73ac4c2c2', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick }, this.icon && h("duet-icon", { key: 'a3d25c295dd87dd7d7427c08776e74f93ff06539', name: this.icon, size: "small", margin: "none", color: "secondary" }), h("span", { key: 'f5721ac3bf32dc5d3a02c06c3945169f5191b8bf', class: "label" }, h("slot", { key: '408ea11afbdc9705cf7d972f6173ba5215f06bec', name: "label" }), h("duet-icon", { key: 'eba692bfd3ada8bbfdbe9eb6e51a01054f6f919a', class: "caret", name: "action-arrow-down-small", margin: "none", size: "xx-small", color: "secondary" }))), h("div", { key: '13c263ac376bd1b412ba8c57aec55504da08557d', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("slot", { key: '206ff67b3dab6d9e5b35814a26e572bca137b925' })))));
+            } }, h("slot", { key: 'f582b50dca9e8127b6c4f0b6f9507f74f337ce7d' })))));
     }
     static get is() { return "duet-slideout-panel-dropdown"; }
     static get encapsulation() { return "shadow"; }

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

@@ -23,7 +23,7 @@ export class DuetSpacer {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '7fc6e73749913f00710655bd9f3245417e7ea2d4', class: {
+        return (h(Host, { key: 'f2f4fa377c08b91ba94544d234bc8ab55c8b35b5', class: {
                 "duet-spacer": true,
                 "duet-spacer-xx-small": this.breakpoint === "xx-small",
                 "duet-spacer-x-small": this.breakpoint === "x-small",

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

@@ -25,7 +25,7 @@ export class DuetSpinner {
      */
     render() {
         const color = !!this.color && this.color === "currentColor" ? "currentColor" : getColorByName(this.color, this.theme);
-        return (h(Host, { key: '8c58d59273d8cdf92c3e9bceea4cbdff5a5a4c59' }, h("div", { key: 'f98223ba97758e4c0dbdb41aa0ad61100135e634', class: {
+        return (h(Host, { key: '3bbc28212f0bf2540d28e5c1ed4cedbd263e8116' }, h("div", { key: '34642338087cdd238bf2d2d68f57562b5f675745', class: {
                 "duet-spinner": true,
                 [this.size]: true,
                 "duet-theme-turva": this.theme === "turva",

package/lib/collection/components/duet-status-icon/duet-status-icon.css

@@ -0,0 +1,39 @@
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent;
+  border: 0;
+}
+
+:host {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent;
+  border: 0;
+  margin-bottom: 16px !important;
+  display: inline-block;
+  width: auto;
+  max-width: 100%;
+  line-height: 0;
+  color: inherit;
+  -webkit-tap-highlight-color: transparent;
+}
+
+:host(.duet-m-0) {
+  margin: 0 !important;
+}
+@media (max-width: 35.9375em) {
+  :host(.duet-m-0) {
+    margin: 0 !important;
+  }
+}

package/lib/collection/components/duet-status-icon/duet-status-icon.js

@@ -85,13 +85,24 @@ export class DuetStatusIcon {
         }
     }
     render() {
-        return (h(Host, { key: 'c53538070bb94c61a824cce9bf5065ce69ea989a', class: {
+        return (h(Host, { key: 'fe9932329bfad00f4231a2e669de3e74a1cd08cd', class: {
                 [`duet-status-icon-${this.getVariation()}`]: true,
                 "duet-strong-bg": this.strong,
-            } }, h("duet-icon", { key: 'ebd3f5b5c3ef995cb598ee4f9072891594e8c069', icon: this.getIcon(), size: this.size, margin: this.margin })));
+                "duet-m-0": this.margin === "none",
+            } }, h("duet-icon", { key: '8fe84ccddba21b625e955f9a4ab07204eab192bb', icon: this.getIcon(), size: this.size, margin: "none" })));
     }
     static get is() { return "duet-status-icon"; }
     static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["duet-status-icon.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["duet-status-icon.css"]
+        };
+    }
     static get properties() {
         return {
             "variation": {

package/lib/collection/components/duet-step/duet-step.css

@@ -67,7 +67,7 @@
   outline-offset: 2px;
   outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva :host(.user-is-tabbing) .duet-step-heading:focus, :host(.user-is-tabbing) .duet-step-heading:focus.duet-theme-turva, .duet-theme-turva :host(.user-is-tabbing) .duet-step-heading:focus, :host(.user-is-tabbing) .duet-step-heading:focus.duet-theme-turva {
+.duet-theme-turva :host(.user-is-tabbing) .duet-step-heading:focus, :host(.user-is-tabbing) .duet-step-heading:focus.duet-theme-turva {
   outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-step-heading[aria-disabled=false] {

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

@@ -93,13 +93,13 @@ export class DuetStep {
      * Always the last one in the class.
      */
     render() {
-        return (h("div", { key: '05fe55382b606ac6290eac4c1d367be79867e1c0', class: {
+        return (h("div", { key: '3204237f7f65d0f7e40d171da59beae2438d0b73', class: {
                 "duet-step": true,
                 [`is-${this.state}`]: true,
                 "rounded-top": this.roundedTop,
                 "rounded-bottom": this.roundedBottom,
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("div", { key: 'd91175b1d04f510980579ab816591f4fbe06443a', class: "duet-step-heading", id: this.buttonId, role: this.state !== "current" ? "button" : "region", "aria-current": this.state === "current" ? "step" : undefined, tabindex: this.state !== "current" ? "0" : undefined, "aria-disabled": this.isClickDisabled().toString(), "aria-expanded": (this.state === "current").toString(), "aria-controls": this.contentId, "aria-selected": (this.state === "current").toString(), onClick: this.handleClick, onKeyDown: this.handleKeyDown, ref: element => (this.buttonElement = element) }, h("div", { key: '36fa6274fd3778ffdf06930c3e2bfec351f98deb', "aria-hidden": "true" }, h("div", { key: '466172a0a1a89a812a3662dba416b698525bf90d', class: "duet-step-counter" }, this.renderStepCounter())), h("duet-spacer", { key: '32c65b333bf51ecbfc5f07111ed48dcc42d38fcc', direction: "horizontal", size: "large", breakpoint: "small" }), h("duet-spacer", { key: 'af1fcbed9aaf4ae897bbdb1bb5922539136ef824', direction: "horizontal", size: "medium", breakpoint: "x-small" }), h("div", { key: '17f37ca23ca6d1f693a69e5ba6dfb1825278dca3' }, h("duet-heading", { key: 'af962b921e329b246fb520dce97bf598584fc984', theme: this.theme, level: this.headingLevel, visualLevel: "h4", color: this.headingColor(), margin: "none" }, this.heading)), h("duet-spacer", { key: 'f5b5926af5fc39dc2c4b9bf556ce4de203ad4a26', direction: "horizontal", size: "large" }), h("div", { key: 'c61808d6e02af405b0d33d5c026bb75118031ada', class: "duet-step-heading-slot" }, h("slot", { key: 'fcd25f6d9fdfd9791eb947942099fb1fbab6e2bc', name: "heading-content" }))), h("div", { key: '15725f6b9d35795e4ab8cf7d1f1fd317983a5eed', class: "duet-step-content-wrapper" }, h("div", { key: 'ddef3d8cb491c9712bd6be806e7d16059e2ae8e3', class: "duet-step-content", role: "region", "aria-labelledby": this.buttonId, id: this.contentId }, h("slot", { key: 'b773ce9a9b621ada546d3bc6af85cd3b6271e662' })))));
+            } }, h("div", { key: '144dc2c4f67e3ab88437ba11dbe665d8d938e998', class: "duet-step-heading", id: this.buttonId, role: this.state !== "current" ? "button" : "region", "aria-current": this.state === "current" ? "step" : undefined, tabindex: this.state !== "current" ? "0" : undefined, "aria-disabled": this.isClickDisabled().toString(), "aria-expanded": (this.state === "current").toString(), "aria-controls": this.contentId, "aria-selected": (this.state === "current").toString(), onClick: this.handleClick, onKeyDown: this.handleKeyDown, ref: element => (this.buttonElement = element) }, h("div", { key: '3a16cbf1b403adb015eafda7d8768e17eae7fb40', "aria-hidden": "true" }, h("div", { key: '8ee2d9f18fcef2d1cdb2ad43cf8a41c5615b4765', class: "duet-step-counter" }, this.renderStepCounter())), h("duet-spacer", { key: '0dd226292f09ae93ba5ca9bde08511982771fe15', direction: "horizontal", size: "large", breakpoint: "small" }), h("duet-spacer", { key: 'd2fea319dfc6db59b1aaba216a913c3a8e9e81e8', direction: "horizontal", size: "medium", breakpoint: "x-small" }), h("div", { key: '7c3dee5bf9df62db35cbe5896551062c482d8b3e' }, h("duet-heading", { key: '27d4325d36f4f0621af0bf633fe3de821822d4bc', theme: this.theme, level: this.headingLevel, visualLevel: "h4", color: this.headingColor(), margin: "none" }, this.heading)), h("duet-spacer", { key: 'f0e367883df25339d1882ebe17ff56c3555d4cd1', direction: "horizontal", size: "large" }), h("div", { key: 'f4313eed84ca3fe24272ce59a59b711169c4c0a8', class: "duet-step-heading-slot" }, h("slot", { key: 'a06a67c70d672288b7ef3f76149561fe5200ed99', name: "heading-content" }))), h("div", { key: '62b81bf1127a74bd5fb1cec4b0aa1e9c706d2038', class: "duet-step-content-wrapper" }, h("div", { key: 'c46f37355b38f10b1dc182108cae7f444025246d', class: "duet-step-content", role: "region", "aria-labelledby": this.buttonId, id: this.contentId }, h("slot", { key: 'f08a916f605a7227add9fdb0bd4f6ede0719ec02' })))));
     }
     static get is() { return "duet-step"; }
     static get encapsulation() { return "shadow"; }

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

@@ -118,7 +118,7 @@ export class DuetStepper {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '84ea9dd11aea73c62494d4002383477935446fca', class: { "duet-m-0": this.margin === "none" } }, h("div", { key: 'b86ccce71eb2f2ebda8642834800e4c2396c1e12', class: { "duet-stepper": true, "duet-theme-turva": this.theme === "turva" } }, h("duet-visually-hidden", { key: 'a50b805e73ee6d83464b8b14e6facaa48b2f50bf', "aria-live": "polite", "aria-atomic": "true", "aria-relevant": "all" }, this.formatAnnouncement()), h("slot", { key: 'bc720b6fd6ba51b646f3e8222a5572017472bd5c' }))));
+        return (h(Host, { key: 'f135a9f1ddcc6eaa86acdcdc9d11def0ec489b81', class: { "duet-m-0": this.margin === "none" } }, h("div", { key: 'd68ff41042b6582c21d555e3131054278e9eaf1f', class: { "duet-stepper": true, "duet-theme-turva": this.theme === "turva" } }, h("duet-visually-hidden", { key: '21d8af2f8896f0e5f893f041a2f3010ada1e74c9', "aria-live": "polite", "aria-atomic": "true", "aria-relevant": "all" }, this.formatAnnouncement()), h("slot", { key: 'efe281a3ddce9364e69c5131e7e59e3a9c2bb9d5' }))));
     }
     static get is() { return "duet-stepper"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-submenu-bar/duet-submenu-bar.css

@@ -68,7 +68,7 @@
   outline-offset: 2px;
   outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-submenu-bar button:focus, .duet-submenu-bar button:focus.duet-theme-turva, .duet-theme-turva .duet-submenu-bar button:focus, .duet-submenu-bar button:focus.duet-theme-turva {
+.duet-theme-turva .duet-submenu-bar button:focus, .duet-submenu-bar button:focus.duet-theme-turva {
   outline: 2px solid;
   outline-offset: 2px;
   outline-color: rgba(53, 79, 101, 0.8);

package/lib/collection/components/duet-submenu-bar/duet-submenu-bar.js

@@ -131,19 +131,19 @@ export class DuetSubmenuBar {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '5a7dfd7977d5260ecaa751065ffd668bccf7f734' }, h("nav", { key: '8d374c6513e8ec3bb63948dffac4cd9b65eab3d9', class: {
+        return (h(Host, { key: '463af77c5ac9d7a775876cfc005df160c5e7fdfa' }, h("nav", { key: 'fcbdbfc332d352007b1122ffa65cd6d13012a559', class: {
                 "duet-submenu-bar": true,
                 "duet-theme-turva": this.theme === "turva",
                 hidden: this.hidden,
-            }, "aria-label": this.accessibleLabel }, this.hasItems && (h("button", { key: 'd72fd8118d008647c0fc1bafc797d7d7e9670676', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
+            }, "aria-label": this.accessibleLabel }, this.hasItems && (h("button", { key: '98fadd59813f2aae19d4cb5d4734d73a98d4bb7e', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
                 active: this.open,
-            }, onClick: this.onClick }, h("span", { key: '7dbd3343077f3e63a20b441f0e6015358da502b4', class: "label" }, h("slot", { key: 'a0a0ae66d22fd5737949ad3094661f172b6c0391', name: "label" }), h("duet-icon", { key: '47c4c4e42e0a8ebd3565627cd0e1982457104ca3', theme: this.theme, class: "caret", name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" })))), h("div", { key: '5986a2c225e9f40da81943d5daefc079756f2370', class: {
+            }, onClick: this.onClick }, h("span", { key: 'dc38b3df13d3a4d1b4a9c78c53a9fc68b932152e', class: "label" }, h("slot", { key: '128302a4e4c2c6e68d9fd8cb96d1439db8daf800', name: "label" }), h("duet-icon", { key: '0d4d0b35713d68685084568f0f95f1818b8deaca', theme: this.theme, class: "caret", name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" })))), h("div", { key: '7396ba0b29224cfa487e725604ff50dab010cdeb', class: {
                 "menu-container": true,
                 hidden: !this.open,
-            }, role: "presentation" }, h("div", { key: 'd8afab7eb5149ac0bebeff39ab93d36d15c499fe', role: this.mobile ? "menu" : null, id: "menu", "aria-labelledby": this.mobile ? "button" : null, "aria-expanded": this.mobile ? (this.open ? "true" : "false") : null, class: {
+            }, role: "presentation" }, h("div", { key: '4b5178a06a8933dfb9be60276a1a893158c62aaa', role: this.mobile ? "menu" : null, id: "menu", "aria-labelledby": this.mobile ? "button" : null, "aria-expanded": this.mobile ? (this.open ? "true" : "false") : null, class: {
                 items: true,
                 hidden: !this.open,
-            }, ref: element => (this.itemsContainer = element) }, h("div", { key: '83ca8fda96f8d9b05fb0ea84d0aa52dbb4183063', class: "list", role: this.mobile ? "presentation" : "list" }, h("slot", { key: 'a71c59db97c47144dc7366c1adbd416d2ac6aae9' }), h("div", { key: '026076d8b73e6af5d46a7f7367de6d4395e34519', class: "list-padding" }))), h("duet-overlay", { key: 'd09747b12a70aefae2789f86380646779a1cc605', "keep-stacking-context": true, visible: this.open, "display-device": "not-large", transition: "immediate" })))));
+            }, ref: element => (this.itemsContainer = element) }, h("div", { key: '71ee3de51b625b340635a30fb39292e25ddfc116', class: "list", role: this.mobile ? "presentation" : "list" }, h("slot", { key: '4baa81a1de7c328e826df2f752075a9c4b05af0f' }), h("div", { key: '38b755c720305c3627d82a5e53af380752616396', class: "list-padding" }))), h("duet-overlay", { key: '62afaa179b2175f4c4c6cd56c6773675cffc061c', "keep-stacking-context": true, visible: this.open, "display-device": "not-large", transition: "immediate" })))));
     }
     static get is() { return "duet-submenu-bar"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-submenu-bar-dropdown/duet-submenu-bar-dropdown.css

@@ -57,7 +57,7 @@
   outline-offset: 2px;
   outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-submenu-bar-dropdown button:focus, .duet-submenu-bar-dropdown button:focus.duet-theme-turva, .duet-theme-turva .duet-submenu-bar-dropdown button:focus, .duet-submenu-bar-dropdown button:focus.duet-theme-turva {
+.duet-theme-turva .duet-submenu-bar-dropdown button:focus, .duet-submenu-bar-dropdown button:focus.duet-theme-turva {
   outline: 2px solid;
   outline-offset: 2px;
   outline-color: rgba(53, 79, 101, 0.8);

package/lib/collection/components/duet-submenu-bar-dropdown/duet-submenu-bar-dropdown.js

@@ -108,18 +108,18 @@ export class DuetSubmenuBarDropdown {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'cc7d79d1a2e5e6de18bd62fb408ec474400eff7b', role: "listitem" }, h("div", { key: 'db0d71f4aa6a38e0e130bf2f069ac58c08d09055', class: {
+        return (h(Host, { key: 'b08d71c303bbbb5dc488ccb9df3a6606cbcee45f', role: "listitem" }, h("div", { key: 'f27808ba704701f0857e90d8c4474f11f2bd284d', class: {
                 "duet-submenu-bar-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 open: this.open,
                 active: this.active,
-            } }, h("button", { key: '8ba0bded589cc4040510538e86b311879ab78cf8', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", id: "button", type: "button", class: {
+            } }, h("button", { key: 'da50cea3b3daea0da483dc01649345a9fcc27d55', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", id: "button", type: "button", class: {
                 open: this.open,
                 active: this.active,
-            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: '479134abefc9407012dc7d960da64a2a00849859', class: "submenu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: '5d7eabf7611e552d4b0a4b4f45af47528f45ae6f', class: "label" }, h("span", { key: '1067624e6d8997fe6d70ba84e2020160d547c98f', class: "label-text" }, h("slot", { key: 'd1c5e91511f07355f95cdf0908476bb208e8356e', name: "label" })), h("duet-icon", { key: 'ea41a4b8f9cd0e5307e74b517bf264b65eaf4a0f', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '7090489ee9527a38506ae8623fcd48b337ddd7a8', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: '41562541f2cf4bbe9e8d6ccb3214b8fc5b44079f', class: "submenu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: '8b2782607b3478bc491ce2fa423257d4233968fa', class: "label" }, h("span", { key: '5b22aff9852f284416e15d60b1a262e963ff228e', class: "label-text" }, h("slot", { key: 'aec50191a12adf0fbd6f9e388c2dc09954d21f83', name: "label" })), h("duet-icon", { key: '154795bda221d38ca73b47a86c97da4c6e4d573b', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '574669c2280fa1e7e4d14666f95fbe912a068119', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, h("slot", { key: '2d0d943f66b0238ed10f3c1ebcea5ab6bbceb301' })))));
+            } }, h("slot", { key: '9a69e63aae77e184049ed7d8f7f511d47eca642e' })))));
     }
     static get is() { return "duet-submenu-bar-dropdown"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-submenu-bar-dropdown-link/duet-submenu-bar-dropdown-link.css

@@ -45,7 +45,7 @@
   outline-offset: 2px;
   outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-submenu-bar-dropdown-link:focus, .duet-submenu-bar-dropdown-link:focus.duet-theme-turva, .duet-theme-turva .duet-submenu-bar-dropdown-link:focus, .duet-submenu-bar-dropdown-link:focus.duet-theme-turva {
+.duet-theme-turva .duet-submenu-bar-dropdown-link:focus, .duet-submenu-bar-dropdown-link:focus.duet-theme-turva {
   outline: 2px solid;
   outline-offset: 2px;
   outline-color: rgba(53, 79, 101, 0.8);

package/lib/collection/components/duet-submenu-bar-dropdown-link/duet-submenu-bar-dropdown-link.js

@@ -49,12 +49,12 @@ export class DuetSubmenuBarDropdownLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '661c76d380b6989bfee3c31e1a0858cda9a873ce' }, h("a", { key: '02cadfcabf30ae87b3d2c038841280afd52b763f', class: {
+        return (h(Host, { key: '206adf55a559a97afad7c5bc107b46f6a099d8c0' }, h("a", { key: 'a61437b76e1ecd5c7d61b773b0b97fe43c457bc5', class: {
                 "duet-submenu-bar-dropdown-link": true,
                 "duet-theme-turva": this.theme === "turva",
                 highlight: this.highlight,
                 active: this.active,
-            }, "aria-current": this.active ? "true" : "false", href: this.href, onKeyUp: e => this.handleEscape(e) }, this.icon && h("duet-icon", { key: '653820943c52d861da92a41cc0bed59e78969b80', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), h("span", { key: '9e622d1fbbb2d0649da74a2a4945582eb9d72eb1', class: "label-container" }, h("span", { key: '78634234c76e9d17e61ed0e7ad88c1035b340dc4', class: "label" }, h("slot", { key: 'e8eec7289cffbb54eae6ddbebdb4d2a2ce6a634d' })), this.caret && h("duet-icon", { key: 'c0d7df05f2f827dea7bf50ee93b49c6fca66c1e9', name: "action-arrow-right-small", size: "xxx-small", margin: "none" })), this.active && (h("duet-icon", { key: '572888355bf490d4a5ddf095592e116e9d1c05ae', class: "active-check", name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor" })))));
+            }, "aria-current": this.active ? "true" : "false", href: this.href, onKeyUp: e => this.handleEscape(e) }, this.icon && h("duet-icon", { key: '50c64c74c7f21aebcb34252b9a5fbf75c391c0d3', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), h("span", { key: '0e697759844c9f0255d18fdb41765290f1389581', class: "label-container" }, h("span", { key: '3fafa6fece2c5188ec289dbc6fab760d49c73fb4', class: "label" }, h("slot", { key: '498dacafcd6fa3c3d097e9bcceb9e78c906cc236' })), this.caret && h("duet-icon", { key: 'd7055d84b2cd8de873b0400e7b3434f7670f987a', name: "action-arrow-right-small", size: "xxx-small", margin: "none" })), this.active && (h("duet-icon", { key: '40d559b351fcc4d3f56f26045d065a55b840c740', class: "active-check", name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor" })))));
     }
     static get is() { return "duet-submenu-bar-dropdown-link"; }
     static get encapsulation() { return "shadow"; }