@duetds/components 9.15.0 → 9.16.1

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

@@ -94,13 +94,17 @@ export class DuetHero {
      * Component lifecycle events.
      */
     componentWillLoad() {
+        const headings = "h1, h2, h3, h4, h5, h6";
         inheritGlobalTheme(this);
         this.hasPreHeadingSlot = hasSlot(this.element, "pre-heading");
         this.hasHeadingSlot = hasSlot(this.element, "heading");
         this.hasSubHeadingSlot = hasSlot(this.element, "subheading");
         checkNamedSlotElement(this.element, "pre-heading", "span");
-        checkNamedSlotElement(this.element, "heading", "span");
+        checkNamedSlotElement(this.element, "heading", `span, ${headings}`);
         checkNamedSlotElement(this.element, "subheading", "span");
+        if (this.hasHeadingSlot && getElementsFromNamedSlot(this.element, "heading")[0].matches(headings)) {
+            this.hasHeadingSlotNative = true;
+        }
         this.refresh();
     }
     connectedCallback() {
@@ -184,7 +188,7 @@ export class DuetHero {
                 outlineColor = "color-primary-turva";
             }
         }
-        return (h("div", { key: '5f1fa623c6a8b5c570953498c17d38c046e3498c', role: "region", class: {
+        return (h("div", { key: 'b9c3fd981986fea8d993f608169c1b1bd7e142f9', role: "region", class: {
                 "duet-hero": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-has-category-icon": !!this.categoryIcon,
@@ -202,17 +206,17 @@ export class DuetHero {
                 "duet-hero-text-center": (this.textCenter && !this.leftAlign) || campaignOrSection,
                 "duet-hero-left-align": this.leftAlign && !campaignOrSection,
                 "duet-hero-narrow": this.layout === "narrow",
-            }, part: "duet-hero" }, campaignOrSection && this.image && (h("div", { key: '8637ec4d16c7f1812a236da0a65729de0aa02bf0', class: "background-area" }, h("div", { key: '84ecb8dbb4f31669f0201f335bfc63a5b5925013', class: "background-container" }, h("div", { key: '63741e44a0aba885f85084d6431a494dee5c45d1', class: "background" }, h("img", { key: '44e2ad8e6e7cb582a798ffbf70879fecad0539ef', class: `${imageSizeIsCover ? "cover" : ""} ${imagePositionIsCenter ? "center" : ""}`, src: this.image, alt: "", role: "presentation" })), h("div", { key: 'ac6439114eb01ab9097150e9d086f1089661bebf', class: "brand-shape" })))), this.variation === "product" && this.image && (h("div", { key: '48ed3a655291d6d07a3d199f826acf2ff31d381a', class: { "background-area": true, [this.layout]: true } }, h("div", { key: '4158e92200f1d5fa2dc571d459fcb5034b452f33', class: { "background-container": true, [this.layout]: true } }, h("div", { key: 'b012af078c50b844c385f0d930b6eb227d4beeda', class: { background: true, [this.layout]: true } }, h("div", { key: 'a426ac5178709305c9a2a85705791c33b66c0d20', class: { "background-mask": true, [this.layout]: true } }), this.theme !== "turva" && h("div", { key: 'e32c5d247e20d2928bf023295682306bc65c7983', class: { "brand-shape": true, [this.layout]: true } }), h("div", { key: '09db46430fc3a149a4d7fa288ed8c17241b53346', class: { "brand-shaped-image": true, [this.layout]: true } }, h("div", { key: 'ba02fad3d9ec74a7b0ee36b00b460343e2996fd4', class: { "brand-shaped-image-wrapper": true, [this.layout]: true } }, h("div", { key: 'e889fe0998219fe8642eaf585fc4c1451b6c85fb', class: { "brand-shaped-image-bg": true, [this.layout]: true }, style: styles }))), this.categoryIcon && (h("div", { key: '983fc9745edce8df229165b24036c1459bb1df2a', class: { "brand-shaped-icon": true, [this.layout]: true } }, h("duet-icon", { key: '5e06f744fee0a0c166a97cb831499682929b7154', class: { [this.layout]: true }, background: "none", name: this.categoryIcon, margin: "none", size: "auto", responsive: false }))))))), this.variation === "content" && this.image && (h("div", { key: '6d4e7390da1e481e0f20f4c7a5cf7fef488d6943', class: "background-area" }, h("div", { key: 'bab5c4eef578dea9b8698d25dd9f440c173e83a3', class: "background" }, h("div", { key: '2aa38a32194f7f1aa2ac9677390f1853719306f4', class: "background-mask" }), this.theme !== "turva" && h("div", { key: '4b9acab7cda8ed679c83efb0555c4c6fc772e650', class: "brand-shape" }), h("div", { key: '772c1f1ef0240210a191967a6bd7f4a4c7d8a70a', class: "brand-shaped-image" }, h("div", { key: 'c5fad3a16528dd772a7be0aa0792b05af6fc9af9', class: "brand-shaped-image-wrapper" }, h("div", { key: '609615bbd1452a9ff02b9bc5dbb7d529dbaeb9f4', class: "brand-shaped-image-bg", style: styles })))))), h("div", { key: 'edb60c1675ebf00914595a40f5984ece68a1b804', class: { "duet-hero-wrapper": true, [this.layout]: true } }, this.image && this.variation === "image" && (h("div", { key: '3b10a5bee636ab4e3ac4f03c000386a919c4b013', class: "duet-hero-image-mask" }, h("div", { key: 'f40bdc888d7a41ded8371b5b8ce222218bf8e812', class: "duet-hero-image-wrapper" }, h("div", { key: 'cae33c0bf93b3542ac85cf51e814474a62f49c9c', class: "duet-hero-image", style: styles })))), (this.variation === "gray" || this.variation === "light" || this.variation === "minimal") &&
-            this.processedBack && (h("div", { key: '74d5377e83732f5862c2d90a59df55d4e16af8b1', class: "duet-hero-back" }, h("duet-button", { key: '62fcac914ad58fe6b213abc362e0f09f350d51eb', style: buttonStyles, variation: "plain", icon: "action-arrow-left-small", theme: this.theme, iconSize: "small", color: buttonColor, padding: "none", margin: "none", fixed: true, url: this.processedBack.href, identifier: this.processedBack.id, onClick: event => this.handleClick(event, {
+            }, part: "duet-hero" }, campaignOrSection && this.image && (h("div", { key: '3260b2870c1ea4df2b6da83e0e522e2959384077', class: "background-area" }, h("div", { key: 'b2ea29ed6389e6cfa9fe9dcd96367bdbea087693', class: "background-container" }, h("div", { key: '26e2a20c698406dc588295ae9f55af67926e7c97', class: "background" }, h("img", { key: 'e593767a8841e4b500ce795a5d32002fd7106d21', class: `${imageSizeIsCover ? "cover" : ""} ${imagePositionIsCenter ? "center" : ""}`, src: this.image, alt: "", role: "presentation" })), h("div", { key: '5197c7f06902941b5ef031a4921a5449a1c34377', class: "brand-shape" })))), this.variation === "product" && this.image && (h("div", { key: 'ef63bccc608fd7c96df659991d80df5b7f598046', class: { "background-area": true, [this.layout]: true } }, h("div", { key: '2b2c260ce475d3a80cf6ed3fc7f2bff453f65c2c', class: { "background-container": true, [this.layout]: true } }, h("div", { key: '476eb6062b5b1b09d32c6c7786013b879379ca7c', class: { background: true, [this.layout]: true } }, h("div", { key: 'ade4111611cd5ea7ad5ed05f631e42957616ddec', class: { "background-mask": true, [this.layout]: true } }), this.theme !== "turva" && h("div", { key: '005ae64b3d9e2e6266af42e25cb4be4a9b1fa915', class: { "brand-shape": true, [this.layout]: true } }), h("div", { key: '143fe3284548a7b24127a205496620bd6f674341', class: { "brand-shaped-image": true, [this.layout]: true } }, h("div", { key: 'e0368f6d4adab84330060a820a3ace3c21699470', class: { "brand-shaped-image-wrapper": true, [this.layout]: true } }, h("div", { key: '0bfb81f4f8d796802e5b7b2b7069052b8f045efe', class: { "brand-shaped-image-bg": true, [this.layout]: true }, style: styles }))), this.categoryIcon && (h("div", { key: '13ba86fd3ddfbcef5dcd42941e8fbb4f12cc1974', class: { "brand-shaped-icon": true, [this.layout]: true } }, h("duet-icon", { key: '3b3160c4473905abc641d49a91cc4eecef3e6112', class: { [this.layout]: true }, background: "none", name: this.categoryIcon, margin: "none", size: "auto", responsive: false }))))))), this.variation === "content" && this.image && (h("div", { key: '81d4f78e461f0bdf5eaa69af85b459fb202b7e42', class: "background-area" }, h("div", { key: '7244da55fe6c2ab9e45b24735a9d0a20f0b75190', class: "background" }, h("div", { key: '8342e1b51e43f069fc3f828a91a7cb9337ef35e9', class: "background-mask" }), this.theme !== "turva" && h("div", { key: 'cf56221090df8290c4b1865009b3e05979031d03', class: "brand-shape" }), h("div", { key: 'efd790d680afe2abed0896cec55331254afdc804', class: "brand-shaped-image" }, h("div", { key: '651c298211bb6ebd39c890b34562a3c64f5bc902', class: "brand-shaped-image-wrapper" }, h("div", { key: '8b2e79734a6a4aed14925911115299e2b3d767ac', class: "brand-shaped-image-bg", style: styles })))))), h("div", { key: '160c866e220afcd1281011a1c5a719b0025e9546', class: { "duet-hero-wrapper": true, [this.layout]: true } }, this.image && this.variation === "image" && (h("div", { key: '7bebb785dc9749bc51d968dab2a8ca0cfc848b5d', class: "duet-hero-image-mask" }, h("div", { key: '8c6a9cd35d908127651a0bae0353d32171ab41d7', class: "duet-hero-image-wrapper" }, h("div", { key: '011d38bd9420d504d1aba20bdafed27624e55892', class: "duet-hero-image", style: styles })))), (this.variation === "gray" || this.variation === "light" || this.variation === "minimal") &&
+            this.processedBack && (h("div", { key: '06c729fab6a79938abac782bfefc2be636af5f73', class: "duet-hero-back" }, h("duet-button", { key: 'b008b8f2e2bde426b6e0d32570341a69d122bad7', style: buttonStyles, variation: "plain", icon: "action-arrow-left-small", theme: this.theme, iconSize: "small", color: buttonColor, padding: "none", margin: "none", fixed: true, url: this.processedBack.href, identifier: this.processedBack.id, onClick: event => this.handleClick(event, {
                 label: this.processedBack.label,
                 href: this.processedBack.href,
                 id: this.processedBack.id,
                 analyticsId: this.processedBack.analyticsId,
-            }) }, this.processedBack.label))), (this.variation === "gray" || this.variation === "minimal") && this.categoryIcon && (h("duet-icon", { key: '96c2844b98d28305f7556af68dae30f7c08bd25b', class: { "duet-hero-icon": true, "duet-hero-icon-has-heading": this.preHeading !== "" }, size: "x-large", background: this.categoryIconColor, name: this.categoryIcon })), h("div", { key: '5acbe0ac1c6dadc08b8b5e731581246e433a6c16', class: { "duet-hero-text": true }, part: "duet-hero-text" }, (this.preHeading || this.hasPreHeadingSlot) && (h("duet-paragraph", { key: 'd6ec130b01755771812d74bfbb1296f5b6604599', margin: "none", class: "duet-hero-pre", size: this.variation === "content" ? "small" : "medium", "aria-hidden": "true" }, this.preHeading ? (this.preHeading) : (h("span", null, h("slot", { name: "pre-heading" }))))), h("slot", { key: '72615e7711048a1f4d2c5a3283fd713739377efb', name: "badge" }), (this.heading || this.hasHeadingSlot) && (h("duet-heading", { key: 'c64fc81d93adaa167b54a96aee7d1eca99215091', theme: this.theme, level: this.level, class: { "duet-hero-heading": true, "duet-hero-heading-has-pre": this.preHeading !== "" }, color: headingColor, visualLevel: headingVisualLevel, margin: campaignOrSection ? "none" : "auto", accessibleLabel: this.getAccessibleHeading() }, this.heading ? this.heading : h("slot", { name: "heading" }))), campaignOrSection && this.hasSubHeadingSlot && (h("duet-heading", { key: '31b0694ec7c4a7f64b0724c301748d6c715656ac', theme: this.theme, level: this.subHeadingLevel, class: { "duet-hero-subheading": true }, color: this.theme === "turva" ? "secondary-turva" : "secondary", visualLevel: "h2" }, h("slot", { key: 'f438a6495842925a2281bb2a2cad11e510f51bc0', name: "subheading" }))), this.description && (h("duet-paragraph", { key: 'ff2d31d7b435f65b4cd244f9f9104c4590e216e7', theme: this.theme, color: textColor, variation: "intro" }, this.description)), (this.variation === "gray" || this.variation === "minimal") && this.processedListItems && (h("duet-list", { key: '6e299338982bf722a43cca37aaf6a3135947273c', theme: this.theme, "label-width": "30", breakpoint: "large", mobile: this.leftAlign ? undefined : "center" }, this.processedListItems.map(item => (h("duet-list-item", null, h("span", { slot: "label" }, item.label), h("span", { slot: "value" }, item.value)))))), this.buttonLabel && (h("duet-button", { key: '3139d0bc79278f589e91f0ffa6c1ac32341bc89e', url: this.buttonUrl, icon: this.icon, iconRight: this.iconRight, iconSize: this.iconSize, variation: buttonVariation, theme: this.theme, identifier: this.buttonId, onClick: event => this.handleClick(event, this.buttonData), fixed: true }, this.buttonLabel)), h("slot", { key: '5f603e8a230a237a80052096a60a9a7940ffbb60' })), (this.variation === "gray" || this.variation === "minimal") && this.processedActions && (h("div", { key: '299c4226c3d269c2063902ed1fd0e9ee66600c8f', class: "duet-hero-links" }, this.processedActions.map(item => (h("a", { class: "duet-hero-link", href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleClick(event, item) }, h("div", { class: "duet-hero-action-icon" }, h("duet-icon", { size: "small", margin: "none", name: item.icon, color: "currentColor", outline: outlineColor })), h("span", null, item.label), item.external && h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), item.external && (h("div", { class: "duet-hero-action-arrow" }, h("duet-icon", { icon: newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" })))))))), this.image &&
+            }) }, this.processedBack.label))), (this.variation === "gray" || this.variation === "minimal") && this.categoryIcon && (h("duet-icon", { key: '7bf4a70d0bb38c3f133823902a10fc0e95751ccc', class: { "duet-hero-icon": true, "duet-hero-icon-has-heading": this.preHeading !== "" }, size: "x-large", background: this.categoryIconColor, name: this.categoryIcon })), h("div", { key: '7f97fe5b493cc884c901dd9c228fa664fb62efb5', class: { "duet-hero-text": true }, part: "duet-hero-text" }, (this.preHeading || this.hasPreHeadingSlot) && (h("duet-paragraph", { key: '641709e526363fd46483b0f8d7a317e76193e64d', margin: "none", class: "duet-hero-pre", size: this.variation === "content" ? "small" : "medium", "aria-hidden": "true" }, this.preHeading ? (this.preHeading) : (h("span", null, h("slot", { name: "pre-heading" }))))), h("slot", { key: '7835fca56fb2771ab4dd3e8bf842cd63cceecc82', name: "badge" }), (this.heading || this.hasHeadingSlot) && (h("duet-heading", { key: 'e3966fe7edc152609001c7d7833b5533ce3e0bf4', theme: this.theme, level: this.hasHeadingSlotNative ? "div" : this.level, class: { "duet-hero-heading": true, "duet-hero-heading-has-pre": this.preHeading !== "" }, color: headingColor, visualLevel: headingVisualLevel, margin: campaignOrSection ? "none" : "auto", accessibleLabel: this.getAccessibleHeading() }, this.heading ? this.heading : h("slot", { name: "heading" }))), campaignOrSection && this.hasSubHeadingSlot && (h("duet-heading", { key: '74d6901df7fc755b8579dac8ee179a91467c64f6', theme: this.theme, level: this.subHeadingLevel, class: { "duet-hero-subheading": true }, color: this.theme === "turva" ? "secondary-turva" : "secondary", visualLevel: "h2" }, h("slot", { key: '201fc47aadc90a5d36bbb8c2aa2790fd07fc365b', name: "subheading" }))), this.description && (h("duet-paragraph", { key: '1925643f27fe9c12179e3094d118550532de383e', theme: this.theme, color: textColor, variation: "intro" }, this.description)), (this.variation === "gray" || this.variation === "minimal") && this.processedListItems && (h("duet-list", { key: '3ef2751d73f65c92b8b13abb3e29823dc6238411', theme: this.theme, "label-width": "30", breakpoint: "large", mobile: this.leftAlign ? undefined : "center" }, this.processedListItems.map(item => (h("duet-list-item", null, h("span", { slot: "label" }, item.label), h("span", { slot: "value" }, item.value)))))), this.buttonLabel && (h("duet-button", { key: 'df28ae57da7a717c93ea6bb66fd76d2ef3570768', url: this.buttonUrl, icon: this.icon, iconRight: this.iconRight, iconSize: this.iconSize, variation: buttonVariation, theme: this.theme, identifier: this.buttonId, onClick: event => this.handleClick(event, this.buttonData), fixed: true }, this.buttonLabel)), h("slot", { key: '930cf91ff8dbd036167a878497e0dcbd6f0ae2da' })), (this.variation === "gray" || this.variation === "minimal") && this.processedActions && (h("div", { key: '8a3bbfacf5164e1b5d8e355eb1798c503044e8c8', class: "duet-hero-links" }, this.processedActions.map(item => (h("a", { class: "duet-hero-link", href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleClick(event, item) }, h("div", { class: "duet-hero-action-icon" }, h("duet-icon", { size: "small", margin: "none", name: item.icon, color: "currentColor", outline: outlineColor })), h("span", null, item.label), item.external && h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), item.external && (h("div", { class: "duet-hero-action-arrow" }, h("duet-icon", { icon: newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" })))))))), this.image &&
             this.variation !== "image" &&
             !campaignOrSection &&
             this.variation !== "product" &&
-            this.variation !== "content" && h("div", { key: '868a7dfb4d12a20bd74202d4130483cf6d29bad1', class: "duet-hero-image", style: styles }), h("slot", { key: '6d54239cacd33dbba3512eb1419617000cd0db14', name: "bottom" }))));
+            this.variation !== "content" && h("div", { key: '623199fc8bdd12fcb1c06cd99bbbcf3ae40c7fc0', class: "duet-hero-image", style: styles }), h("slot", { key: 'f01fd55b510fd793ac4e2819ea683f3f9764ae5a', name: "bottom" }))));
     }
     static get is() { return "duet-hero"; }
     static get encapsulation() { return "shadow"; }

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

@@ -102,11 +102,11 @@ export class DuetIcon {
             : {};
         const iconStyles = Object.assign({}, iconRotationStyles);
         const shapeStyle = this.shape === "brand-rotated" ? "duet-icon-shape-brand" : `duet-icon-shape-${this.shape}`;
-        return (h(Host, { key: 'e3c5b8a95b66d10d648b3dcb13c8a914a797b164', class: {
+        return (h(Host, { key: '323b9a59455b17f17fc41a099f1bda25cf20e2a6', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-icon-has-outline": !!this.outline,
                 "duet-icon-has-background": !!this.background,
-            } }, h("span", { key: '64fb78e9ff14dade6c8a57e7e0b0c9eda9faa5f1', "aria-hidden": "true", style: styles, class: {
+            } }, h("span", { key: '5d2f53d911f504db29bddf57c8f94f17f0415c50', "aria-hidden": "true", style: styles, class: {
                 "duet-icon": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-theme-default": this.theme === "default",
@@ -115,7 +115,7 @@ export class DuetIcon {
                 [shapeStyle]: true,
                 rotated: this.shape === "brand-rotated" && this.theme !== "turva",
                 "duet-icon-not-responsive": !this.responsive,
-            } }, h("span", { key: 'c58b6751f605b678b535275abd7ec18dcd22ce32', "aria-hidden": "true", class: { "duet-icon-svg": true, rotated: this.shape === "brand-rotated" && this.theme !== "turva" }, "data-name": this.name, innerHTML: this.svgContent, style: iconStyles }))));
+            } }, h("span", { key: '49d01cd51bccebb54d3c4bc9e236d27ca3ba16ac', "aria-hidden": "true", class: { "duet-icon-svg": true, rotated: this.shape === "brand-rotated" && this.theme !== "turva" }, "data-name": this.name, innerHTML: this.svgContent, style: iconStyles }))));
     }
     static get is() { return "duet-icon"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,46 @@
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: 0;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+:host {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: 0;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  position: relative;
+}
+
+.duet-indicator {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+.duet-indicator-new {
+  background: rgb(0, 119, 179);
+}
+.duet-indicator-change {
+  background: rgb(247, 178, 40);
+}
+.duet-indicator-error {
+  background: rgb(185, 16, 74);
+}
+.duet-indicator-success {
+  background: rgb(29, 106, 88);
+}

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

@@ -0,0 +1,101 @@
+/*!
+ * Built with Duet Design System
+ */
+import { h, Host } from "@stencil/core";
+import { getLocaleString } from "../../utils/language-utils";
+export class DuetIndicator {
+    constructor() {
+        this.defaultLabels = {
+            new: {
+                fi: "Uutta sisältöä",
+                en: "New content",
+                sv: "Nyt innehålle",
+            },
+            change: {
+                fi: "Muuttunutta sisältöä",
+                en: "Changed content",
+                sv: "Ändrat innehålle",
+            },
+            error: {
+                fi: "Sisältää virheen",
+                en: "Contains error",
+                sv: "Innehåller ett fel",
+            },
+            success: {
+                fi: "Onnistunut toiminto",
+                en: "Completed successfully",
+                sv: "Lyckad åtgärd",
+            },
+        };
+        this.getAccessibleLabel = () => {
+            return this.accessibleLabel || getLocaleString(this.defaultLabels[this.variation]);
+        };
+        this.variation = "change";
+        this.accessibleLabel = undefined;
+    }
+    render() {
+        return (h(Host, { key: '068dfb1142e610afba3d6a0bb44cc50d5af2e0be' }, h("span", { key: '95dda3401969956579bb40c3de9a33be2390f7b8', class: { "duet-indicator": true, [`duet-indicator-${this.variation}`]: true } }), h("duet-visually-hidden", { key: '1e6483d4032eb771fc01507692a92bcc962f346a' }, this.getAccessibleLabel())));
+    }
+    static get is() { return "duet-indicator"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["duet-indicator.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["duet-indicator.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IndicatorVariation",
+                    "resolved": "\"change\" | \"error\" | \"new\" | \"success\"",
+                    "references": {
+                        "IndicatorVariation": {
+                            "location": "local",
+                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-indicator/duet-indicator.tsx",
+                            "id": "src/components/duet-indicator/duet-indicator.tsx::IndicatorVariation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The variation of the indicator. Typically \"change\" and \"new\" are used; \"error\" and \"success\" should be used\nonly in special cases, as errors and succeses normally require a more prominent message."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "variation",
+                "reflect": false,
+                "defaultValue": "\"change\""
+            },
+            "accessibleLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label for users of assistive technologies. This component has sensible defaults, but they can be replaced with this\nproperty."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "accessible-label",
+                "reflect": false
+            }
+        };
+    }
+    static get elementRef() { return "element"; }
+}

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

@@ -1205,7 +1205,7 @@ export class DuetInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Use maxlength to specify the maximum length of the value that can be entered.\nPlease note that this uses native HTML5 pattern validation."
+                    "text": "Use maxlength to specify the maximum length of the value that can be entered."
                 },
                 "getter": false,
                 "setter": false,
@@ -1224,7 +1224,7 @@ export class DuetInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Use minlength to specify the minimum length of the value that can be entered.\nPlease note that this uses native HTML5 pattern validation."
+                    "text": "Use minlength to specify the minimum length of the value that can be entered."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -43,24 +43,24 @@ export class DuetLayout {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '376bffdd22734d1e233f8a906270acc682a0db52', class: {
+        return (h(Host, { key: '87e9a0ec222dde241b22ad453c4ad5c32634396b', class: {
                 center: this.center,
                 "duet-middle": this.middle,
                 "duet-ie": isInternetExplorer(),
-            } }, h("div", { key: '5437c66a202aaf3458e53f23eaba2d02801c880c', class: { "duet-layout-wrapper": true, "duet-m-0": this.margin === "none" } }, this.hasTop && (h("div", { key: '8ecf0ad715d8bc1443fd9f67d67d6b449efae927', class: {
+            } }, h("div", { key: '7c2ed9191f4798b3dc85cf376981c6aab0156cf9', class: { "duet-layout-wrapper": true, "duet-m-0": this.margin === "none" } }, this.hasTop && (h("div", { key: '0cabad8796c6b6f8d6f9be773432bf8dafdd9e8c', class: {
                 "duet-layout-top": true,
                 "duet-center": this.center,
-            } }, h("div", { key: '1e2286c3ea76089553cc640991f53948fe76f503', class: "duet-layout-top-wrapper" }, h("slot", { key: 'dd52cd74039333a2b0e8999607bfb0915f79b0e0', name: "top" })))), h("div", { key: '1c84e875cb4e7cb26f1f5aff42e48d74fbdd9d6b', class: {
+            } }, h("div", { key: '0005e877722cc066af4afc437d27b800853e6a2e', class: "duet-layout-top-wrapper" }, h("slot", { key: 'f28942644fd863ec25dee20ff7c8e08aa4435de5', name: "top" })))), h("div", { key: '0dfab5135c2abf87bf34ad30ae694032fb15e1c5', class: {
                 "duet-layout": true,
                 "has-sidebar": this.hasSidebar,
                 "duet-center": this.center,
                 [`padding-${this.paddingBreakpoint}`]: !!this.paddingBreakpoint,
-            } }, h("main", { key: '3fb3163e1e05265a89670331ea7f86181891eb2b', class: "duet-main" }, this.hasPageHeading && h("slot", { key: '69225380f33a6e6499d8097f1019554d5b349c6b', name: "page-heading" }), h("slot", { key: 'b0ca93c6015b2d8912c7e2eaddb665c9e7f18619', name: "main" })), this.hasSidebar && (h("aside", { key: 'd63d88c4cfba1e62c2f18502fbd6da81be905d9d', class: "duet-sidebar" }, h("div", { key: 'c94f8fe0a8269aae4a410790cf72ec620b1c5c28', class: {
+            } }, h("main", { key: '52f379352c3c1bff9858834461fcbb349387867d', class: "duet-main" }, this.hasPageHeading && h("slot", { key: '4d471586d15b6d703968a1cefa19179015e53287', name: "page-heading" }), h("slot", { key: '861e391f79cafcd371bc7a8a4e534949f5395ff4', name: "main" })), this.hasSidebar && (h("aside", { key: 'ea094960d960bea590d79e8ca676fa985bae192c', class: "duet-sidebar" }, h("div", { key: '6991b9d89cad949aab416c29ea2ace9819bf9980', class: {
                 "duet-sidebar-container": true,
                 "has-tabs": this.tabs,
                 sticky: this.sticky,
                 [this.stickyDistance]: this.sticky,
-            } }, h("slot", { key: '91b0c48b39c04a2546814d246a9828d442abea0f', name: "sidebar" }))))))));
+            } }, h("slot", { key: '7d400650d3a268f363d9ca9ec8d358e1e717051e', name: "sidebar" }))))))));
     }
     static get is() { return "duet-layout"; }
     static get encapsulation() { return "shadow"; }

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

@@ -123,10 +123,10 @@ export class DuetLink {
         const Tag = !this.url && this.variation !== "default" ? "button" : "a";
         const role = !this.url && this.variation === "default" ? "button" : null;
         const isButton = Tag === "button";
-        return (h(Host, { key: 'bd19012201568549a78386fd891946aff5eee646', class: {
+        return (h(Host, { key: 'd83502af54d3fa4f2aec80d7082a5a6969207a39', class: {
                 [`duet-link-${this.variation}`]: true,
                 "duet-m-0": this.margin === "none",
-            } }, h(Tag, { key: 'dcaadc6459de680b921529b4cf1a53fb68ec32e5', href: this.url, class: {
+            } }, h(Tag, { key: '534e9bcb74e02dc050ac1986b251f08215c8aa7d', href: this.url, class: {
                 "duet-link": true,
                 "duet-link-is-external": this.external,
                 "duet-link-is-download": !!this.download,

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

@@ -72,7 +72,7 @@ export class DuetList {
      * Always the last one in the class.
      */
     render() {
-        return (h("dl", { key: 'c812a1b444858b533f9c34f809cea2c9ba67d841', class: { "duet-list-component": true, "duet-m-0": this.margin === "none" } }, h("slot", { key: '177fb7013132331584b126edb4b11cca3723bfc9' })));
+        return (h("dl", { key: '5e954e5cb5906fcf8e60eca5830d60091d2706c4', class: { "duet-list-component": true, "duet-m-0": this.margin === "none" } }, h("slot", { key: '07566357caeeb57f2168a6bde8c5d2f54e6a7b68' })));
     }
     static get is() { return "duet-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -21,7 +21,7 @@ export class DuetListItem {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '23fa4bb0260854f29feb8bc4a9ee8772116d6cdd', class: {
+        return (h(Host, { key: 'a1d59eef6ebf95b35ba47c0c5d08dce588f79e2e', class: {
                 "duet-theme-turva": this.theme === "turva",
                 "duet-no-stacking": !this.responsive,
                 "duet-list-item-breakpoint-x-small": this.breakpoint === "x-small",
@@ -29,7 +29,7 @@ export class DuetListItem {
                 "duet-list-item-breakpoint-medium": this.breakpoint === "medium",
                 "duet-list-item-breakpoint-large": this.breakpoint === "large",
                 "duet-list-item-breakpoint-x-large": this.breakpoint === "x-large",
-            } }, h("dt", { key: 'a55da3a043c0961d1acb0d734f40a13520dfa8f6' }, h("slot", { key: '283eb7096125f841974c4c024826bb026f12f44a', name: "label" })), h("dd", { key: 'b0bf838e880dc0bbd8a408f43519b9c9c14f50ca' }, h("slot", { key: '59a38693290b270f27d9f5e1eddc94eff91009c2', name: "value" }))));
+            } }, h("dt", { key: '945de6fd1adcfbeff921e2adbc31c2252a6a0a4f' }, h("slot", { key: 'c0c9a3a4cc5c7b0522946d4f32b3eebf83f55b64', name: "label" })), h("dd", { key: 'a283cfff317b10c86778c3d104e4f911f499ee53' }, h("slot", { key: '5ada9a783edd1778553a2240cac92c796276989e', name: "value" }))));
     }
     static get is() { return "duet-list-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -118,7 +118,7 @@ export class DuetLogo {
      */
     render() {
         const TagName = this.href ? "a" : "div";
-        return (h(Host, { key: 'd13dacb8208ebc04186228277d6a0eb4ef3cfeb7', class: { "duet-m-0": this.margin === "none" } }, h(TagName, { key: '92f33026307d3230324abdc39694b7a5207c04c3', href: this.href, ref: link => (this.nativeLink = link), "aria-label": this.accessibleLabel, class: {
+        return (h(Host, { key: '1e410097f84415333adc03b3ce6c3e9ea7577395', class: { "duet-m-0": this.margin === "none" } }, h(TagName, { key: '955051b9c078a75dc74f4e2557b59e274eaac1de', href: this.href, ref: link => (this.nativeLink = link), "aria-label": this.accessibleLabel, class: {
                 "duet-logo": true,
                 [this.size]: true,
                 "duet-logo-only-symbol": this.onlySymbol,

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

@@ -22,6 +22,10 @@
   appearance: none;
   position: relative;
   width: 100%;
+  pointer-events: none;
+}
+:host * {
+  pointer-events: auto;
 }
 
 .duet-menu-bar {

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

@@ -120,17 +120,17 @@ export class DuetMenuBar {
     render() {
         const slideoutAvailable = document.querySelectorAll("duet-slideout").length > 0;
         const isUsedAsAdditionalHorizontalNav = slideoutAvailable && !this.logo;
-        return (h(Host, { key: '5f05a259d0950cb2cdbc37222b1007ba49d5fe53' }, h("nav", { key: '24398b2d0d6d01c22eef86430e0f7db7c6b97171', class: {
+        return (h(Host, { key: '255814311f574f7d85b3bc80bb175cc1f1d18a64' }, h("nav", { key: '83e7544a5404b5af2c3719a2489e4b36a540c1e8', class: {
                 "duet-menu-bar": true,
                 "duet-theme-turva": this.theme === "turva",
                 "horizontal-nav": isUsedAsAdditionalHorizontalNav,
                 "duet-menu-bar-slim": !this.centerSlotUsed,
                 hidden: this.hidden && this.hideOnScroll,
                 bottom: this.onBottom,
-            }, "aria-label": this.accessibleLabel }, h("div", { key: 'abf2962527bf92ead5a89f8648ff3b88a73fbc55', class: "top" }), h("div", { key: '068d450752f636f98e7cdeb5043e6bf9297b4c3d', class: { container: true, "with-info-text": !!this.logoInfoText && !this.centerSlotUsed }, ref: el => (this.container = el), onScroll: () => this.scrollbarCheck() }, this.logo && (h("div", { key: '7e5b816d6ae4e36268ee911cadf56358a864e264' }, h("duet-logo", { key: 'c1a02ba4230ab960c1e01d20636a23d015823580', class: "medium", size: "medium", margin: "none", theme: this.theme, href: this.logoHref, accessibleLabel: this.logoLinkAccessibleLabel, onClick: this.handleLogoClick, language: this.language }), h("duet-logo", { key: 'fa3ba5116af9eecd8d886f546c4bdef922bbdd4d', class: "large", size: "large", margin: "none", theme: this.theme, href: this.logoHref, accessibleLabel: this.logoLinkAccessibleLabel, onClick: this.handleLogoClick, language: this.language }), h("duet-logo", { key: 'a3593373202664a79f8095931fa53d72e1f6c188', class: "only-symbol", onlySymbol: true, margin: "none", theme: this.theme, href: this.logoHref, accessibleLabel: this.logoLinkAccessibleLabel, onClick: this.handleLogoClick, language: this.language }), this.logoInfoText && !this.centerSlotUsed && (h("div", { key: 'ebf9c252a82db480eff2fca195f87dfcd2a186f4', class: {
+            }, "aria-label": this.accessibleLabel }, h("div", { key: 'f32cf559d838dc433b85c7cb4df85fcf1915f7ef', class: "top" }), h("div", { key: '19a48ff07d04fe3ce07ef084ebcc51306a434bde', class: { container: true, "with-info-text": !!this.logoInfoText && !this.centerSlotUsed }, ref: el => (this.container = el), onScroll: () => this.scrollbarCheck() }, this.logo && (h("div", { key: 'c93a4319705c231ff4caafb5351040743648da31' }, h("duet-logo", { key: '39c4a607c937dea11129d57acdd5165280235fdf', class: "medium", size: "medium", margin: "none", theme: this.theme, href: this.logoHref, accessibleLabel: this.logoLinkAccessibleLabel, onClick: this.handleLogoClick, language: this.language }), h("duet-logo", { key: 'a79acdf7414befb7341990872ce965b08d59d675', class: "large", size: "large", margin: "none", theme: this.theme, href: this.logoHref, accessibleLabel: this.logoLinkAccessibleLabel, onClick: this.handleLogoClick, language: this.language }), h("duet-logo", { key: '7e553d40b2309b1bb8108c426b54ab5b6a406d78', class: "only-symbol", onlySymbol: true, margin: "none", theme: this.theme, href: this.logoHref, accessibleLabel: this.logoLinkAccessibleLabel, onClick: this.handleLogoClick, language: this.language }), this.logoInfoText && !this.centerSlotUsed && (h("div", { key: 'b587afd17006e768a5468fbfb999d749b0257d6d', class: {
                 "duet-logo-info-text": true,
                 "duet-theme-turva": this.theme === "turva",
-            } }, this.logoInfoText)))), h("div", { key: '980619619bf98cc80c36dc5c8d27042f97ff492d', class: "list center", role: "list" }, h("div", { key: 'b6f5e67dd04a56da886a3795b21b2f3f4d7e0393', class: "more-left", hidden: !this.leftMoreVisible, role: "presentation" }), h("slot", { key: 'f5bc728c183398eba439475b6a29771476944b5b', name: "center" }), h("div", { key: 'bf7274db341938f7f0a8fa7784985a6239a5fcc6', class: "more-right", hidden: !this.rightMoreVisible, role: "presentation" })), h("div", { key: '6e3343fcef3b45b1a6e741c673d072b994cf4110', class: "list right", role: "list" }, h("slot", { key: '3a76e5089f8cc4a1e04786a61c2f8e9cb1160426', name: "right" }))), h("div", { key: '6041af35982542751bb94df6ebc8725dd17a6349', class: "bottom" }))));
+            } }, this.logoInfoText)))), h("div", { key: 'f7c134952e7e4e4939a76643338af9aa8184cfa9', class: "list center", role: "list" }, h("div", { key: '2abb544bcd51d678b040268faba758c361f419ad', class: "more-left", hidden: !this.leftMoreVisible, role: "presentation" }), h("slot", { key: '5cb2a6679aab357ec3ea58484fa678da7c9a054c', name: "center" }), h("div", { key: '84768be6f01769a9af9376eda0c7ab392afb76a5', class: "more-right", hidden: !this.rightMoreVisible, role: "presentation" })), h("div", { key: 'ed2f72a70440b9257c7e00ab25cd2d1a93f64fbf', class: "list right", role: "list" }, h("slot", { key: '348067a2565d3594907c03abe52dd8f100dbe675', name: "right" }))), h("div", { key: '3f5710688ff1e20bfd146d11e07379106cba9c54', class: "bottom" }))));
     }
     static get is() { return "duet-menu-bar"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-menu-bar-button/duet-menu-bar-button.js

@@ -38,10 +38,10 @@ export class DuetMenuBarButton {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'ef1a83dc24d287d2e22423313bb9d60cd3c47105', role: "listitem", onfocus: () => this.setFocus() }, h("button", { key: '8b958da1cd1c474fea165bfaa3b0a1a59bbf48fe', ref: button => (this.nativeButton = button), class: {
+        return (h(Host, { key: 'fa02a51d7479dc914e75919d4dd8dddabd15c246', role: "listitem", onfocus: () => this.setFocus() }, h("button", { key: 'e0cc0c43b6afbaa4575df1308274aef4ff85b059', ref: button => (this.nativeButton = button), class: {
                 "duet-menu-bar-button": true,
                 "duet-theme-turva": this.theme === "turva",
-            }, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.accessibleDescribedBy, "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-pressed": this.accessiblePressed != null ? this.accessiblePressed.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined }, this.icon && (h("duet-icon", { key: '8d32a9113bf2c7f5cf223fade74451107c65017e', class: "menu-bar-button-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: 'c2a291f310468f23944eb380df208917ee3f266f' }))));
+            }, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.accessibleDescribedBy, "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-pressed": this.accessiblePressed != null ? this.accessiblePressed.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined }, this.icon && (h("duet-icon", { key: 'e2a3505c245c6f5d35d10faf5c2b3aea5b4b4c82', class: "menu-bar-button-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: '5d6f7c435b3c7199e0ba936b97d580d27753b65f' }))));
     }
     static get is() { return "duet-menu-bar-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -54,17 +54,17 @@ export class DuetMenuBarDropdown {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'a755c7ef4437e698cd14f5638243822ae80a9da5', role: "listitem" }, h("div", { key: '245f998243bda4eb0de30979a0e3170b44f3e59f', class: {
+        return (h(Host, { key: '79d75ff19ddc5d5e4bc05c2b759fa189a7e5a328', role: "listitem" }, h("div", { key: '797d9710ac2b48c95f4e32753471b3e914f060eb', class: {
                 "duet-menu-bar-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.open,
                 [`duet-menu-bar-dropdown--slot-${this.getVariant()}`]: true,
-            } }, h("button", { key: 'd650dc95d9c3d179c443de80c835e220a74c7ddb', ref: element => (this.button = element), "aria-label": this.accessibleLabel, "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
+            } }, h("button", { key: '690d5bfe2910a845579a5262a456f450b4fa5de6', ref: element => (this.button = element), "aria-label": this.accessibleLabel, "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
                 active: this.open,
-            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: 'b813e5b92c2262c8980753710295beeb6938c911', class: "menu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: '792ad8ef544c66a404bd68efad3f61664bd0af88', class: "label" }, h("slot", { key: '400b69105667c569099cf1fb10f4235e0f59d062', name: "label" }), h("duet-icon", { key: 'bc9de20358bde54e02e79ce27a80e97d122fdd8f', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: 'ed8e5128bb958f6eab527687f0574f48eae65002', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: 'db531e44188b297ac1f54d19830a203ec705ebfb', class: "menu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: '8722763917df82c35c441e643676e851df5f1cca', class: "label" }, h("slot", { key: '2893eb3e1e367e6f206644e48c6388cd23b7da93', name: "label" }), h("duet-icon", { key: 'e6a26816a85cdc47fe61219a601593d01473c413', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '3c8a74c98bb4c8b67f0ef0d5332d215f7c9713f3', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, h("slot", { key: '2b8c3ce983de1c602add43e43c38eb1eb85e3c19' })))));
+            } }, h("slot", { key: 'c5b39b69128a328c0b93ae130d452f35333535d2' })))));
     }
     static get is() { return "duet-menu-bar-dropdown"; }
     static get encapsulation() { return "shadow"; }

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

@@ -40,11 +40,11 @@ export class DuetMenuBarDropdownLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '5fc02f0c81d1098a7b16009477df67993d685de6' }, h("a", { key: '2b903aecceeae547c7d15a49b7a04258ff10c4b6', class: {
+        return (h(Host, { key: '1e881babd45c7f4cd8527b43abc01cfb2496ed18' }, h("a", { key: '50d501696da9aa65a0084e720d8b024e3ea0f66a', class: {
                 "duet-menu-bar-dropdown-link": true,
                 [`duet-menu-bar-dropdown-link--slot-${this.getVariant()}`]: true,
                 "duet-theme-turva": this.theme === "turva",
-            }, href: this.href, role: "menuitem", onKeyUp: e => this.handleEscape(e), "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: 'af824f35477f30049c01db8adb39d06b731643b9', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("slot", { key: '883594427c71275ce5b693f706b9505f9e18a71e' }))));
+            }, href: this.href, role: "menuitem", onKeyUp: e => this.handleEscape(e), "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: 'abb09dbe2df11ed13c631fd5c71f7fa59b86f122', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("slot", { key: 'e9eb98e4348ef0f8e578a4b9ba29dce23b58b36e' }))));
     }
     static get is() { return "duet-menu-bar-dropdown-link"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-menu-bar-item/duet-menu-bar-item.js

@@ -48,11 +48,11 @@ export class DuetMenuBarItem {
      */
     render() {
         const TagName = this.url ? "a" : "button";
-        return (h(Host, { key: '641913af18dbe2980a845788e89622a9b089dbb0', role: "listitem" }, h(TagName, { key: '328e465490357d6da14c2b790a82a3241a527d87', target: !this.url ? null : this.external ? "_blank" : "_self", ref: element => (this.itemElement = element), class: {
+        return (h(Host, { key: '6c892062c0bd92db9f57b96b7180f9eef0801255', role: "listitem" }, h(TagName, { key: 'a23d9012b6e382756434132bdfbe2f42b11e12d6', target: !this.url ? null : this.external ? "_blank" : "_self", ref: element => (this.itemElement = element), class: {
                 "duet-menu-bar-item": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
-            }, 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("duet-icon", { key: 'd30575df32ecb1a4ede06522d8eda04bf9fc5fc2', class: "leading-icon", size: "auto", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: 'b06945bdda299b4e2d7a7209f307bf116b9cf744' }), (this.trailingIcon || this.external) && (h("duet-icon", { key: 'c8fc5e562221728aea6214de11916a8a41c45d7f', 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("duet-icon", { key: '799e99c90de77fc27884390cee54a2f5ef2b86c7', class: "leading-icon", size: "auto", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: 'a3e5ca49f3a3ebea08b83ea25eb7f1c9978ac33a' }), (this.trailingIcon || this.external) && (h("duet-icon", { key: 'bfc604da6076597a4bbf67adb54020f911a4070b', class: {
                 "trailing-icon": !!this.trailingIcon,
                 "trailing-icon-arrow": this.trailingIcon === "action-arrow-down-small",
                 "external-icon": !!this.external,

package/lib/collection/components/duet-menu-bar-link/duet-menu-bar-link.js

@@ -22,11 +22,11 @@ export class DuetMenuBarLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'a13c68b467960207214b517d7308cc0aa12109bc', role: "listitem" }, h("a", { key: 'a54219b4e1e160a5860536bc784b166f17885823', class: {
+        return (h(Host, { key: 'd492f3d98ee828bb162789fd83727dd3e3894b02', role: "listitem" }, h("a", { key: 'ee760db6d0328245581bf4c1f9a402db7e02d3c0', class: {
                 "duet-menu-bar-link": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
-            }, href: this.href, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: 'b1b80f750becedd7069327b1a3014caf8f8e9796', class: "menu-bar-link-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: 'd52076de0ceb00251df6fdce37c8fabd9377f8b8' }))));
+            }, href: this.href, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: '66d9747fb5cbf8182be0c11e18743612a894f9c5', class: "menu-bar-link-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: 'a869202b6d0a4be7889cf78143274c22cf302b8c' }))));
     }
     static get is() { return "duet-menu-bar-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -267,14 +267,14 @@ export class DuetModal {
         var _a, _b;
         const iconColor = postfixTheme("primary", this.theme);
         const closeColor = postfixTheme("secondary", this.theme);
-        const closingButton = (h("div", { key: '9de636719074c96f49913c1a19b33329ae39a3a0', class: "duet-modal-close" }, h("duet-button", { key: '1852a8322aaeb49c937cfd4b4d80d61073f12f96', ref: button => (this.buttonEl = button), variation: "plain", accessibleLabel: this.accessibleCloseLabel, color: closeColor, iconSize: "large", icon: "navigation-close", iconOnly: true, margin: "none", theme: this.theme, onClick: ev => this.closeModal(ev), fixed: true })));
-        return (h("div", { key: '4c602c318db94b02ca730640b8c0c6fc7eb96453', ref: modal => (this.modalEl = modal), "aria-label": (_a = this.accessibleLabel) !== null && _a !== void 0 ? _a : this.heading, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-describedby": this.accessibleDescribedBy, role: this.variation === "loader" ? "alert" : "dialog", "aria-modal": this.isSafariBrowser ? false : true, tabindex: "-1", class: {
+        const closingButton = (h("div", { key: 'fb5c0560d2d55f75fdadd3685854d8058581f0c1', class: "duet-modal-close" }, h("duet-button", { key: '7e0adc47d278a98a9fade867f3a80a42529893b8', ref: button => (this.buttonEl = button), variation: "plain", accessibleLabel: this.accessibleCloseLabel, color: closeColor, iconSize: "large", icon: "navigation-close", iconOnly: true, margin: "none", theme: this.theme, onClick: ev => this.closeModal(ev), fixed: true })));
+        return (h("div", { key: '79df0c89cdf6ed24e73187dbbbaf993f6ff364a0', ref: modal => (this.modalEl = modal), "aria-label": (_a = this.accessibleLabel) !== null && _a !== void 0 ? _a : this.heading, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-describedby": this.accessibleDescribedBy, role: this.variation === "loader" ? "alert" : "dialog", "aria-modal": this.isSafariBrowser ? false : true, tabindex: "-1", class: {
                 "duet-modal-container": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-modal-active": this.open,
                 "duet-modal-slide-up": this.variation === "slide-up",
                 "duet-modal-has-sticky-header": this.hasStickyHeader,
-            } }, h("duet-overlay", { key: 'c70e730388bdfa452ab51fb810304ba004022885', "z-index": "-1", visible: this.open, variation: this.variation === "loader" ? "white" : "default" }), h("div", { key: 'ceae3fcf909fdfa380eaddc2f8c9ac2637fc8810', ref: modalInner => (this.modalInnerEl = modalInner), class: {
+            } }, h("duet-overlay", { key: '29059373fe236b590c7052273427485ede1e50a3', "z-index": "-1", visible: this.open, variation: this.variation === "loader" ? "white" : "default" }), h("div", { key: '581e9c4bdf5177f81a55740bc2d30d5886f91f6e', ref: modalInner => (this.modalInnerEl = modalInner), class: {
                 "duet-modal-inner": true,
                 [this.size]: true,
                 "duet-modal-slide-up": this.variation === "slide-up",
@@ -285,22 +285,22 @@ export class DuetModal {
                         this.closeModal(e);
                     }
                 }
-            } }, h("div", { key: 'c0559f2b2d236a3e0fd339cd65900d400547fb70', ref: modalContentEl => (this.modalContentEl = modalContentEl), "aria-live": this.accessibleAnnounceChanges === "all" ? "polite" : null, "aria-atomic": this.accessibleAnnounceChanges === "all" ? "true" : null, class: {
+            } }, h("div", { key: '698ff3a4dcd7ae54ede5b10c222146dc334b9051', ref: modalContentEl => (this.modalContentEl = modalContentEl), "aria-live": this.accessibleAnnounceChanges === "all" ? "polite" : null, "aria-atomic": this.accessibleAnnounceChanges === "all" ? "true" : null, class: {
                 "duet-modal": true,
                 "duet-modal-has-sticky-header": this.hasStickyHeader,
                 [this.size]: true,
                 [this.variation]: true,
-            } }, this.gutterSize !== "none" && !this.hasStickyHeader && h("duet-spacer", { key: '81664165163cd30e192906cb50bb71a4906256ba' }), this.hasStickyHeader ? (h("div", { class: "duet-modal-sticky-header" }, closingButton, h("slot", { name: "sticky-header" }))) : (closingButton), h("div", { key: '92c81c3e5545b4a08b93b3174a888cc42837f2ac', class: {
+            } }, this.gutterSize !== "none" && !this.hasStickyHeader && h("duet-spacer", { key: 'c8e5eb91cb6a35b981ce60b18e0ecb8a6e36adc9' }), this.hasStickyHeader ? (h("div", { class: "duet-modal-sticky-header" }, closingButton, h("slot", { name: "sticky-header" }))) : (closingButton), h("div", { key: 'e3a66f33581bd32351338f3c814272f11296af6c', class: {
                 "duet-modal-body": true,
                 "duet-modal-gutter-none": this.gutterSize === "none",
                 "duet-modal-gutter-small": this.gutterSize === "small",
                 "duet-modal-gutter-medium": this.gutterSize === "medium",
                 "duet-modal-gutter-large": this.gutterSize === "large",
-            }, "aria-live": this.accessibleAnnounceChanges === "heading" ? "polite" : null, "aria-atomic": this.accessibleAnnounceChanges === "heading" ? "true" : null }, h("div", { key: '72936aa2c2d2551e34b2c2d7344f666d49c3d0f4', class: "duet-modal-header" }, h("span", { key: '30ac91712c2d7065901679fcf1cd5cb0191cbb11', class: "duet-modal-inner-slot-top" }, h("slot", { key: 'c7e4bd42dfac73ebdfcf98f9d16438c14945d30b', name: "top" })), this.icon && h("duet-icon", { key: '3664c556ad580c917e80e796df4236f89134ab9d', name: this.icon, size: "xx-large", color: this.color || iconColor }), this.heading && (h("duet-heading", { key: 'd77b16d2577ce36f4e135790a7f49d8a2b17096c', "visual-level": (_b = this.headingVisualLevel) !== null && _b !== void 0 ? _b : this.headingLevel, level: this.headingLevel, theme: this.theme }, this.heading))), this.variation === "loader" && (h("div", { key: 'ed0fa900e15be0fef3166e61f2f7c860dab067f0', class: "duet-modal-spinner" }, h("duet-spinner", { key: '1d15d8e837273755c1c6242098e198f51c1cda90', size: "large", color: postfixTheme("primary", this.theme) }))), h("div", { key: '4d06b9164f277a7cc586a6b754429764cccb1f2e', "aria-live": this.variation === "loader"
+            }, "aria-live": this.accessibleAnnounceChanges === "heading" ? "polite" : null, "aria-atomic": this.accessibleAnnounceChanges === "heading" ? "true" : null }, h("div", { key: 'c91e1c8caddd1006c3bf43456df9c6085b496270', class: "duet-modal-header" }, h("span", { key: '9523501ef4f262a94b187ebecfe7501053274294', class: "duet-modal-inner-slot-top" }, h("slot", { key: 'b7b971eb057c64f1283a30c9f810a55a2fc2eb44', name: "top" })), this.icon && h("duet-icon", { key: '6a09af4246def78037d1963a7cc1837b13e4ef91', name: this.icon, size: "xx-large", color: this.color || iconColor }), this.heading && (h("duet-heading", { key: '60cff1e5eeb1be06cae4bee035d4a01d6842b339', "visual-level": (_b = this.headingVisualLevel) !== null && _b !== void 0 ? _b : this.headingLevel, level: this.headingLevel, theme: this.theme }, this.heading))), this.variation === "loader" && (h("div", { key: '69115fe8c73a0a9d861b50826d4d7884380c68fa', class: "duet-modal-spinner" }, h("duet-spinner", { key: '93dbd535f7da1e8c1445a53d2880670019a4af7f', size: "large", color: postfixTheme("primary", this.theme) }))), h("div", { key: '82cd6ae6caa7661516b33d15c6631d51fadf496f', "aria-live": this.variation === "loader"
                 ? "assertive"
                 : this.accessibleAnnounceChanges === "body"
                     ? "polite"
-                    : null, "aria-atomic": this.accessibleAnnounceChanges === "body" ? "true" : null, class: "duet-modal-inner-slot-default", ref: el => (this.slotContainerEl = el) }, h("slot", { key: '520b8542f921248916d3470204ce4ee2533da5ee' })))))));
+                    : null, "aria-atomic": this.accessibleAnnounceChanges === "body" ? "true" : null, class: "duet-modal-inner-slot-default", ref: el => (this.slotContainerEl = el) }, h("slot", { key: '473e494d8e6d05199f2ae3be8dd684fa0e4fe884' })))))));
     }
     static get is() { return "duet-modal"; }
     static get encapsulation() { return "shadow"; }