@duetds/components 9.14.0 → 9.16.0

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

@@ -1778,6 +1778,288 @@ duet-heading + duet-button {
 :host(.duet-theme-turva2) .duet-hero.duet-hero-gray.duet-theme-turva {
   background: #f5f6f7;
 }
+:host(.duet-theme-turva2) .duet-hero.duet-hero-campaign .duet-hero-heading, :host(.duet-theme-turva2) .duet-hero.duet-hero-section .duet-hero-heading {
+  margin-bottom: 2rem;
+}
+@media (min-width: 22.5em) {
+  :host(.duet-theme-turva2) .duet-hero.duet-hero-campaign .duet-hero-heading, :host(.duet-theme-turva2) .duet-hero.duet-hero-section .duet-hero-heading {
+    margin-bottom: 2rem;
+  }
+}
+@media (min-width: 36em) {
+  :host(.duet-theme-turva2) .duet-hero.duet-hero-campaign .duet-hero-heading, :host(.duet-theme-turva2) .duet-hero.duet-hero-section .duet-hero-heading {
+    margin-bottom: 4rem;
+  }
+}
+@media (min-width: 48em) {
+  :host(.duet-theme-turva2) .duet-hero.duet-hero-campaign .duet-hero-heading, :host(.duet-theme-turva2) .duet-hero.duet-hero-section .duet-hero-heading {
+    margin-bottom: 6rem;
+  }
+}
+@media (min-width: 62em) {
+  :host(.duet-theme-turva2) .duet-hero.duet-hero-campaign .duet-hero-heading, :host(.duet-theme-turva2) .duet-hero.duet-hero-section .duet-hero-heading {
+    margin-bottom: 7rem;
+  }
+}
+@media (min-width: 76.25em) {
+  :host(.duet-theme-turva2) .duet-hero.duet-hero-campaign .duet-hero-heading, :host(.duet-theme-turva2) .duet-hero.duet-hero-section .duet-hero-heading {
+    margin-bottom: 8rem;
+  }
+}
+@media (min-width: 106.25em) {
+  :host(.duet-theme-turva2) .duet-hero.duet-hero-campaign .duet-hero-heading, :host(.duet-theme-turva2) .duet-hero.duet-hero-section .duet-hero-heading {
+    margin-botton: 9rem;
+  }
+}
+:host(.duet-theme-turva2) .duet-hero.duet-hero-campaign .background-area .brand-shape, :host(.duet-theme-turva2) .duet-hero.duet-hero-section .background-area .brand-shape {
+  background-color: rgb(255, 255, 255);
+  border-radius: 24px;
+  mask-image: none;
+}
+:host(.duet-theme-turva2) .duet-hero.duet-hero-product {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  min-height: auto;
+  padding-top: 0;
+  padding-bottom: 72px;
+  margin: 0 auto;
+}
+@media (min-width: 62em) {
+  :host(.duet-theme-turva2) .duet-hero.duet-hero-product {
+    flex-direction: row-reverse;
+    gap: 40px;
+    padding-top: 72px;
+    padding-right: 56px;
+    padding-left: 56px;
+  }
+}
+@media (min-width: 76.25em) {
+  :host(.duet-theme-turva2) .duet-hero.duet-hero-product {
+    max-width: 1110px;
+    padding-right: 0;
+    padding-left: 0;
+  }
+}
+:host(.duet-theme-turva2) .duet-hero.duet-hero-product .background-area {
+  position: relative;
+  height: auto;
+  overflow: visible;
+}
+:host(.duet-theme-turva2) .duet-hero.duet-hero-product .background-area .background-container.narrow,
+:host(.duet-theme-turva2) .duet-hero.duet-hero-product .background-area .background-container.fluid {
+  position: relative;
+  top: 0;
+  width: 100%;
+  height: auto;
+  aspect-ratio: 576/250;
+  padding: 0;
+  overflow: visible;
+  /* stylelint-disable max-nesting-depth */
+}
+@media (min-width: 36em) {
+  :host(.duet-theme-turva2) .duet-hero.duet-hero-product .background-area .background-container.narrow,
+  :host(.duet-theme-turva2) .duet-hero.duet-hero-product .background-area .background-container.fluid {
+    height: 250px;
+    aspect-ratio: auto;
+  }
+}
+@media (min-width: 48em) {
+  :host(.duet-theme-turva2) .duet-hero.duet-hero-product .background-area .background-container.narrow,
+  :host(.duet-theme-turva2) .duet-hero.duet-hero-product .background-area .background-container.fluid {
+    padding-right: 28px;
+    padding-left: 28px;
+  }
+}
+@media (min-width: 62em) {
+  :host(.duet-theme-turva2) .duet-hero.duet-hero-product .background-area .background-container.narrow,
+  :host(.duet-theme-turva2) .duet-hero.duet-hero-product .background-area .background-container.fluid {
+    height: auto;
+    aspect-ratio: 53/32;
+    padding-right: 0;
+    padding-left: 0;
+  }
+}
+:host(.duet-theme-turva2) .duet-hero.duet-hero-product .background-area .background-container.narrow .background,
+:host(.duet-theme-turva2) .duet-hero.duet-hero-product .background-area .background-container.fluid .background {
+  position: relative;
+  top: auto;
+  height: 100%;
+}
+:host(.duet-theme-turva2) .duet-hero.duet-hero-product .background-area .background-container.narrow .background .background-mask,
+:host(.duet-theme-turva2) .duet-hero.duet-hero-product .background-area .background-container.fluid .background .background-mask {
+  display: none;
+  background-image: none;
+}
+:host(.duet-theme-turva2) .duet-hero.duet-hero-product .background-area .background-container.narrow .background .brand-shaped-image,
+:host(.duet-theme-turva2) .duet-hero.duet-hero-product .background-area .background-container.fluid .background .brand-shaped-image {
+  position: static;
+  width: 100%;
+  height: 100%;
+  border-radius: 0;
+  mask-image: none;
+}
+:host(.duet-theme-turva2) .duet-hero.duet-hero-product .background-area .background-container.narrow .background .brand-shaped-image .brand-shaped-image-bg,
+:host(.duet-theme-turva2) .duet-hero.duet-hero-product .background-area .background-container.fluid .background .brand-shaped-image .brand-shaped-image-bg {
+  position: static;
+  width: 100%;
+  height: 100%;
+  background-position: 0;
+  background-size: cover;
+  transform: none;
+}
+@media (min-width: 48em) {
+  :host(.duet-theme-turva2) .duet-hero.duet-hero-product .background-area .background-container.narrow .background .brand-shaped-image,
+  :host(.duet-theme-turva2) .duet-hero.duet-hero-product .background-area .background-container.fluid .background .brand-shaped-image {
+    border-radius: 0 0 12px 12px;
+  }
+}
+@media (min-width: 62em) {
+  :host(.duet-theme-turva2) .duet-hero.duet-hero-product .background-area .background-container.narrow .background .brand-shaped-image,
+  :host(.duet-theme-turva2) .duet-hero.duet-hero-product .background-area .background-container.fluid .background .brand-shaped-image {
+    border-radius: 12px;
+  }
+}
+:host(.duet-theme-turva2) .duet-hero.duet-hero-product .background-area .background-container.narrow .background .brand-shaped-icon,
+:host(.duet-theme-turva2) .duet-hero.duet-hero-product .background-area .background-container.fluid .background .brand-shaped-icon {
+  top: auto;
+  right: 20px;
+  bottom: -16px;
+  width: auto;
+  height: auto;
+  padding: 0;
+  background-color: #172a3b;
+  border-radius: 8px;
+  mask-image: none;
+}
+:host(.duet-theme-turva2) .duet-hero.duet-hero-product .background-area .background-container.narrow .background .brand-shaped-icon duet-icon,
+:host(.duet-theme-turva2) .duet-hero.duet-hero-product .background-area .background-container.fluid .background .brand-shaped-icon duet-icon {
+  top: 0;
+  width: 62px;
+  height: 62px;
+}
+@media (min-width: 36em) {
+  :host(.duet-theme-turva2) .duet-hero.duet-hero-product .background-area .background-container.narrow .background .brand-shaped-icon,
+  :host(.duet-theme-turva2) .duet-hero.duet-hero-product .background-area .background-container.fluid .background .brand-shaped-icon {
+    right: 40px;
+    bottom: -24px;
+    padding: 8px;
+  }
+  :host(.duet-theme-turva2) .duet-hero.duet-hero-product .background-area .background-container.narrow .background .brand-shaped-icon duet-icon,
+  :host(.duet-theme-turva2) .duet-hero.duet-hero-product .background-area .background-container.fluid .background .brand-shaped-icon duet-icon {
+    width: 80px;
+    height: 80px;
+  }
+}
+@media (min-width: 48em) {
+  :host(.duet-theme-turva2) .duet-hero.duet-hero-product .background-area .background-container.narrow .background .brand-shaped-icon,
+  :host(.duet-theme-turva2) .duet-hero.duet-hero-product .background-area .background-container.fluid .background .brand-shaped-icon {
+    right: 68px;
+  }
+}
+@media (min-width: 62em) {
+  :host(.duet-theme-turva2) .duet-hero.duet-hero-product .background-area .background-container.narrow .background .brand-shaped-icon,
+  :host(.duet-theme-turva2) .duet-hero.duet-hero-product .background-area .background-container.fluid .background .brand-shaped-icon {
+    right: 40px;
+  }
+}
+:host(.duet-theme-turva2) .duet-hero.duet-hero-product .duet-hero-wrapper .duet-hero-text {
+  width: 100%;
+}
+@media (min-width: 48em) {
+  :host(.duet-theme-turva2) .duet-hero.duet-hero-product .duet-hero-wrapper {
+    margin-top: 28px;
+  }
+}
+@media (min-width: 62em) {
+  :host(.duet-theme-turva2) .duet-hero.duet-hero-product .duet-hero-wrapper {
+    padding: 0;
+  }
+}
+:host(.duet-theme-turva2) .duet-hero.duet-hero-content {
+  padding: 0;
+  margin: 20px auto;
+}
+:host(.duet-theme-turva2) .duet-hero.duet-hero-content.duet-hero-narrow .background-area {
+  max-width: 888px;
+}
+@media (min-width: 36em) {
+  :host(.duet-theme-turva2) .duet-hero.duet-hero-content.duet-hero-narrow .background-area {
+    padding: 0 48px;
+  }
+}
+@media (min-width: 48em) {
+  :host(.duet-theme-turva2) .duet-hero.duet-hero-content.duet-hero-narrow .background-area {
+    padding: 0 72px;
+  }
+}
+:host(.duet-theme-turva2) .duet-hero.duet-hero-content .background-area {
+  position: static;
+  padding: 0 16px;
+  margin: 0 auto;
+}
+@media (min-width: 36em) {
+  :host(.duet-theme-turva2) .duet-hero.duet-hero-content .background-area {
+    padding: 0 28px;
+  }
+}
+@media (min-width: 62em) {
+  :host(.duet-theme-turva2) .duet-hero.duet-hero-content .background-area {
+    padding: 0 56px;
+  }
+}
+@media (min-width: 76.25em) {
+  :host(.duet-theme-turva2) .duet-hero.duet-hero-content .background-area {
+    max-width: 1110px;
+    padding: 0;
+  }
+}
+:host(.duet-theme-turva2) .duet-hero.duet-hero-content .background-area .background {
+  position: static;
+  height: auto;
+}
+:host(.duet-theme-turva2) .duet-hero.duet-hero-content .background-area .background .background-mask {
+  display: none;
+  background-image: none;
+}
+:host(.duet-theme-turva2) .duet-hero.duet-hero-content .background-area .background .brand-shaped-image {
+  position: static;
+  width: auto;
+  height: auto;
+}
+:host(.duet-theme-turva2) .duet-hero.duet-hero-content .background-area .background .brand-shaped-image .brand-shaped-image-wrapper {
+  width: auto;
+  height: auto;
+}
+:host(.duet-theme-turva2) .duet-hero.duet-hero-content .background-area .background .brand-shaped-image .brand-shaped-image-bg {
+  position: static;
+  width: 100%;
+  height: auto;
+  aspect-ratio: 5/2;
+  background-size: cover;
+  transform: none;
+}
+:host(.duet-theme-turva2) .duet-hero.duet-hero-content .brand-shaped-image {
+  border-radius: 12px;
+  mask-image: none;
+}
+:host(.duet-theme-turva2) .duet-hero.duet-hero-content .duet-hero-wrapper {
+  margin-top: 28px;
+}
+@media (min-width: 48em) {
+  :host(.duet-theme-turva2) .duet-hero.duet-hero-content .duet-hero-wrapper {
+    margin-top: 36px;
+  }
+}
+:host(.duet-theme-turva2) .duet-hero .duet-hero-wrapper {
+  position: static;
+  margin-top: 16px;
+}
+@media (min-width: 48em) {
+  :host(.duet-theme-turva2) .duet-hero .duet-hero-wrapper {
+    margin-top: 0;
+  }
+}
 .duet-theme-turva :host(.duet-theme-turva2) .duet-hero-link {
   color: #e61740;
 }

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: 'cbb8e9ecd29edef7aada30fcbfde72cf18a5a15c', 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: '49a62f09762e014cabe70185e4dd3d351a278d4e', "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: 'c4d3ca6e54186214e4e7f85537357fa8abc2e778', "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: 'd248d82ba7bfbff36991e0556e609b323b6014c6', class: {
+        return (h(Host, { key: 'd83502af54d3fa4f2aec80d7082a5a6969207a39', class: {
                 [`duet-link-${this.variation}`]: true,
                 "duet-m-0": this.margin === "none",
-            } }, h(Tag, { key: '2ae7983d8583c570630c527645ff52c3ddeba010', 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: '734a0dd51a59bbd182a84e31cec8c847bd9b370c', 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: '59e34a2877b7e9c431591276bb3f374e7af6b466' }, h("slot", { key: 'fd6b41b97d6e20e053e3f0f4bfec3f4263819aae', name: "label" })), h("dd", { key: '97aed5f53aa1668d3bae6f2e979e6ed4d99c2026' }, h("slot", { key: 'b89a250df02b8731d5f736da444873b8a257a39a', 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.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: 'b43562922266653eeb9879dd3eda29b8a5a1b04c', role: "listitem", onfocus: () => this.setFocus() }, h("button", { key: '29c67b30de26740dec3dac49d2c14a2ed6059270', 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: '9e4a9f1891791aa2bce3c66e7a6b0fce95e247f4', class: "menu-bar-button-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: '11d9a8886ba0e00caea9ac34e68454ada2e2582d' }))));
+            }, "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: '686fce2ec763461a60c924fc09846f5a54138106', role: "listitem" }, h("div", { key: 'eefdc59f23daad325ab0dce1113fb862ad4ee5cf', 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: 'baee9aee708d71ee63326c30a8f871a73eb2297e', 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: 'cace1bca4eb588cdbd321b82059fefc9adbc8c47', class: "menu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: '58257618f35379178d9c22a95ed14501fba88154', class: "label" }, h("slot", { key: '57eb7d37a9d7c02e1d29b97e9140f2bab43a767a', name: "label" }), h("duet-icon", { key: 'f11313315fb6e2aad23163bcb58c5c06f0a1e2af', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '9d6bc3e367dca79313d11178ee788a3407d03ec7', 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: '9ff49f8c44510abf631a06bcb4b690058a3840ed' })))));
+            } }, h("slot", { key: 'c5b39b69128a328c0b93ae130d452f35333535d2' })))));
     }
     static get is() { return "duet-menu-bar-dropdown"; }
     static get encapsulation() { return "shadow"; }