@duetds/components 10.0.0-alpha.25 → 10.0.0-alpha.27

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

@@ -53,10 +53,11 @@ export class DuetGrid {
      * @returns {number}
      */
     outerHeight(element) {
-        const height = element.offsetHeight, style = window.getComputedStyle(element);
-        return ["top", "bottom"]
-            .map(side => parseInt(style[`margin-${side}`]))
-            .reduce((total, side) => total + side, height);
+        const height = element.offsetHeight;
+        const style = window.getComputedStyle(element);
+        const topMargin = parseInt(style.marginTop);
+        const bottomMargin = parseInt(style.marginBottom);
+        return topMargin + height + bottomMargin;
     }
     debounceWindowResizeHandler() {
         debounce(this.updateGridItemsWithInputFields, 100);
@@ -184,7 +185,7 @@ export class DuetGrid {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '909c2fe77b7c43ae64846ae84293889e9ff7772c', class: {
+        return (h(Host, { key: '2bb3d9243ec7a125fb661965f3cbaf286783b81d', class: {
                 "duet-grid": true,
                 "duet-no-stacking": !this.responsive,
                 "duet-grid-align-top": this.alignment === "top", // flex-start
@@ -211,7 +212,7 @@ export class DuetGrid {
                 "duet-grid-row-reverse": this.rowReverse,
                 [`duet-grid-variation-${this.gridTemplate ? "grid" : "flex"}`]: true,
                 [`duet-grid-template-${this.gridTemplate}`]: true,
-            } }, h("slot", { key: '19fb35996b2b7198c9c903c155b0d6488799acde' })));
+            } }, h("slot", { key: 'c24fa9a1a433f68a451601ab0313149b4c2cd13d' })));
     }
     static get is() { return "duet-grid"; }
     static get encapsulation() { return "shadow"; }

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

@@ -53,7 +53,7 @@ export class DuetGridItem {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '116018aebb0122341885d5c189c49e80651a9c8d', style: {
+        return (h(Host, { key: 'cd699b121a356a4998001457a43186fcc2c75f29', style: {
                 "min-width": this.minWidth,
                 "max-width": this.maxWidth,
             }, class: {
@@ -70,7 +70,7 @@ export class DuetGridItem {
                 "duet-grid-item-br-medium": this.breakpoint === "medium",
                 "duet-grid-item-br-large": this.breakpoint === "large",
                 "duet-grid-item-br-x-large": this.breakpoint === "x-large",
-            } }, h("slot", { key: '8f0abe7f48298866dc52e646b8d08bbeaf4ce234' })));
+            } }, h("slot", { key: 'c5bf503f54cdf776eb9ee3f975d09925f61e0922' })));
     }
     static get is() { return "duet-grid-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -269,5 +269,6 @@
 }
 
 :host(.duet-theme-turva2) .duet-heading.duet-theme-turva {
+  font-style: normal !important;
   color: #172a3b;
 }

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

@@ -144,11 +144,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: '2f6837b926530cee2afc83a590aa1ccb0dfeca03', class: {
+        return (h(Host, { key: '2a800d3292964b5a1dd5fd454662f690ce9e6b5a', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-icon-has-outline": !!this.outline,
                 "duet-icon-has-background": !!this.background,
-            } }, h("span", { key: '6fa86044b5f3966537f38590bd12b28b698a080b', "aria-hidden": "true", style: styles, class: {
+            } }, h("span", { key: '4d5d3fc155d6d2e4f677d8753c116c82eb865a2c', "aria-hidden": "true", style: styles, class: {
                 "duet-icon": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-theme-default": this.theme === "default",
@@ -157,7 +157,7 @@ export class DuetIcon {
                 [shapeStyle]: true,
                 rotated: this.shape === "brand-rotated" && this.theme !== "turva",
                 "duet-icon-not-responsive": !this.responsive,
-            } }, h("span", { key: '4ba33bca7da0ccbc0f11b1b5693e7912d0a0d45d', "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: '6c79866426237ff75ff36401a9117dca1a68cf19', "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,104 @@
+/*!
+ * 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",
+            },
+        };
+        /**
+         * The variation of the indicator. Typically "change" and "new" are used; "error" and "success" should be used
+         * only in special cases, as errors and succeses normally require a more prominent message.
+         */
+        this.variation = "change";
+        this.getAccessibleLabel = () => {
+            return this.accessibleLabel || getLocaleString(this.defaultLabels[this.variation]);
+        };
+    }
+    render() {
+        return (h(Host, { key: '09990afce3e74a91ff9ce76ac6a038418e40272e' }, h("span", { key: 'e5695f01c4d009bc1c18b92b07975980e799becd', class: { "duet-indicator": true, [`duet-indicator-${this.variation}`]: true } }), h("duet-visually-hidden", { key: '4300b55a370c674cb6bd0caf3f5b834e382481a9' }, 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",
+                "attribute": "variation",
+                "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,
+                "reflect": false,
+                "defaultValue": "\"change\""
+            },
+            "accessibleLabel": {
+                "type": "string",
+                "attribute": "accessible-label",
+                "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,
+                "reflect": false
+            }
+        };
+    }
+    static get elementRef() { return "element"; }
+}

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

@@ -528,7 +528,7 @@ export class DuetInput {
             this.type !== "password" &&
             this.type !== "time" &&
             this.variation !== "button";
-        return (h(Host, { key: 'b937912982c9ab26076a7a8ef6d92d86721f1e52', class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" }, onKeyUp: e => this.keyHandler(e) }, this.type === "time" && (h("duet-visually-hidden", { key: 'f2c5263ad8bdc5420c0a57bb0de0257172dce64a', "aria-live": "polite", "aria-atomic": "true" }, selectedTime ? `${this.timeAnnouncement[this.language]} ${selectedTime.toLocaleTimeString()}` : "")), h("div", { key: 'fc9419ac20d284a2d74922a41f66e6457ce2f68d', class: {
+        return (h(Host, { key: 'a510fa25a1bfafc15b45ec3ae52673542c9431f8', class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" }, onKeyUp: e => this.keyHandler(e) }, this.type === "time" && (h("duet-visually-hidden", { key: 'de872f33e40e697f2bfbbd44cf50baa6119d7cf1', "aria-live": "polite", "aria-atomic": "true" }, selectedTime ? `${this.timeAnnouncement[this.language]} ${selectedTime.toLocaleTimeString()}` : "")), h("div", { key: 'c90de920afdad7d205699cea7d5f4fdd1572a87b', class: {
                 "duet-input-container": true,
                 "duet-theme-turva": this.theme === "turva",
                 [`duet-input-variation-${this.variation}`]: true,
@@ -542,7 +542,7 @@ export class DuetInput {
                 "has-clear": this.clear,
                 "has-focus": this.isFocused,
                 disabled: this.disabled,
-            } }, h("div", { key: '42a3f546f411b3179ed4224d0c1847be2cb4bd17', class: "duet-input-label-container" }, h(DuetInternalLabel, { key: '50f07e14449aa88f4f8f67b5c21fb23c435b318c', theme: this.theme === "turva" ? "turva" : "default", margin: this.isCaptionVisible ? "small" : "auto", color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { key: '9161fff80a689ae4fa7fa7bc4532fef2b48cf8c7', class: "duet-input-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), h("slot", { key: '17c98bf119774ef6606bac7117cb0826215fcfda', name: "tooltip" })), this.caption && (h("duet-caption", { key: 'df3c5e4b0ca4830cec0e0ace48520847688f79bc', id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { key: '9cc334f9c6d565a5ad325c9218c6a2e24a04444b', class: "duet-input-relative" }, this.placeholder && this.echoPlaceholder && (this.value || this.type === "time") && (h("duet-caption", { key: '3d24e72417e5f1d4b744a37e9847f7e0dd5e387e', id: this.topCaptionPlaceholderId, class: "duet-input-placeholder", margin: "none", size: "small" }, this.placeholder)), this.chips && (h("duet-visually-hidden", { key: '3d28cc9d073f283b5f58524a9cb274b61808aaeb', id: this.chipCountId }, ", ", `${this.getAllChips().length} ${getLocaleString(this.chipsSelectedDesriptionLabel)}`, ",")), this.variation === "button-left" && h("slot", { key: 'a153bedd03fe832c4dbfc1911c3469872ef45425', name: "button-left" }), h("input", Object.assign({ key: '6ef60b5b5ec7b53ec70114bf9cd75c354fe81c36', ref: input => (this.nativeInput = input), onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, type: this.getInputType(), class: {
+            } }, h("div", { key: '25af0df12601480977d1073be0dac1f37edce26e', class: "duet-input-label-container" }, h(DuetInternalLabel, { key: '8472acbdb1f02f3177acb1cc359b684359577c97', theme: this.theme === "turva" ? "turva" : "default", margin: this.isCaptionVisible ? "small" : "auto", color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { key: '6ae13a9809afd8abea403d05594d0ac605043f13', class: "duet-input-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), h("slot", { key: '456f3ee403878a23c7141e9b063c8d8e04e95be2', name: "tooltip" })), this.caption && (h("duet-caption", { key: 'c4c6f0174d210348bbbab129508fc99917243f2c', id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { key: 'ba63a0017715fab0c39fca2a948c9bfbfdad1f31', class: "duet-input-relative" }, this.placeholder && this.echoPlaceholder && (this.value || this.type === "time") && (h("duet-caption", { key: 'eaad95087d69b5b4a8e72b43ddb184bf8b941087', id: this.topCaptionPlaceholderId, class: "duet-input-placeholder", margin: "none", size: "small" }, this.placeholder)), this.chips && (h("duet-visually-hidden", { key: '2013c4ffb1127068ced232f02ef8885f3e8f614e', id: this.chipCountId }, ", ", `${this.getAllChips().length} ${getLocaleString(this.chipsSelectedDesriptionLabel)}`, ",")), this.variation === "button-left" && h("slot", { key: '5fbfb4ca2fd57a0ae853d4ec2512c79fa85aefd0', name: "button-left" }), h("input", Object.assign({ key: '060cab78180db35d613d8e8944ae17fc61dcb7c8', ref: input => (this.nativeInput = input), onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, type: this.getInputType(), class: {
                 "duet-input": true,
                 disabled: this.disabled,
                 "is-number": this.component === "number",
@@ -550,17 +550,17 @@ export class DuetInput {
                 "after-chip": this.getAllChips().length > 0,
                 "align-right": this.inputAlign === "right",
                 [`input-padding-${this.inputPadding}`]: true,
-            }, value: this.value, disabled: this.disabled, "aria-invalid": this.error ? "true" : "false", "aria-labelledby": this.accessibleLabelledBy ? `${this.labelId} ${this.accessibleLabelledBy}` : this.labelId, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-expanded": this.accessibleExpanded, "aria-haspopup": this.accessibleHasPopup, "aria-owns": this.accessibleOwns, "aria-describedby": this.getAriaDescribedBy(), placeholder: this.placeholder, spellcheck: "false", minlength: this.minlength, maxlength: this.maxlength, autocomplete: this.type === "password" ? "off" : this.autoComplete, required: this.required, role: this.role, name: this.name, id: identifier }, inputProps)), !this.value && hasInputIcon && (h("div", { key: '2febfb7a160144de44956c244f4a9b68bd8019c5', class: "duet-input-icon" }, h("duet-icon", { key: 'bfec761a97f3aaa0a686027b295f1004635db337', margin: "none", size: "small", icon: icons[this.type].svg, color: "currentColor" }))), this.clear && this.value && (h("div", { key: '0f04d8c0153cd96923d3ec222eefe5ee936900dd', class: {
+            }, value: this.value, disabled: this.disabled, "aria-invalid": this.error ? "true" : "false", "aria-labelledby": this.accessibleLabelledBy ? `${this.labelId} ${this.accessibleLabelledBy}` : this.labelId, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-expanded": this.accessibleExpanded, "aria-haspopup": this.accessibleHasPopup, "aria-owns": this.accessibleOwns, "aria-describedby": this.getAriaDescribedBy(), placeholder: this.placeholder, spellcheck: "false", minlength: this.minlength, maxlength: this.maxlength, autocomplete: this.type === "password" ? "off" : this.autoComplete, required: this.required, role: this.role, name: this.name, id: identifier }, inputProps)), !this.value && hasInputIcon && (h("div", { key: '2ef57d881263ad7285afe3bd58ed9de8913131ca', class: "duet-input-icon" }, h("duet-icon", { key: '0424cb373c27e808b8ed1e1f44ca28b077af2f43', margin: "none", size: "small", icon: icons[this.type].svg, color: "currentColor" }))), this.clear && this.value && (h("div", { key: '2ba7ed30cf2409845b231bbc21cb1a7b9e001196', class: {
                 "duet-input-clear-icon": true,
                 "duet-input-clear-icon-single": !hasInputIcon,
                 "duet-input-clear-icon-double": !!this.icon,
                 "duet-input-clear-icon-button": this.variation === "button",
                 [`input-padding-${this.inputPadding}`]: true,
-            } }, h("button", { key: '3dc787b6e8470795c202b2b9e027c9193e731b9e', onClick: this.handleClearClick, id: this.clearId, "aria-label": this.clearLabel[this.language], "aria-keyshortcuts": "Escape" }, h("duet-icon", { key: 'f29c35083e8541aeabbf3130b73dcbbe35ed20a9', margin: "none", size: "medium", name: "action-clear-input", color: "currentColor" })))), this.icon && this.variation !== "button" && (h("div", { key: '59e4fe1f64ca4f11d2cf39d7b33f086a838e2e60', class: "duet-input-icon" }, h("duet-icon", { key: 'e304b595a8594e38c63662e7bd47e7fdf9f06fc3', margin: "none", size: "small", name: this.icon, color: "currentColor" }))), this.variation === "button" && h("slot", { key: '660d57f251986c4e712299152cd0fa1afa8a67c7', name: "button" }), this.variation === "revealable" && (h("duet-button", { key: '4b8d5a513f6513246217b18ea75bf0b44df3bbe9', ref: button => (this.togglePasswordRevealedButton = button), onBlur: this.onBlur, onFocus: this.onFocus, onClick: this.togglePasswordRevealed, icon: this.isPasswordRevealed ? "action-hide" : "action-show", accessibleLabel: this.isPasswordRevealed
+            } }, h("button", { key: '7be0f3cce53d669a7cb2553ea0c720a0a8f234fb', onClick: this.handleClearClick, id: this.clearId, "aria-label": this.clearLabel[this.language], "aria-keyshortcuts": "Escape" }, h("duet-icon", { key: 'd51041231a488756076772109503dcb42a47cef9', margin: "none", size: "medium", name: "action-clear-input", color: "currentColor" })))), this.icon && this.variation !== "button" && (h("div", { key: '34624c33d8582374f0deddee30d4cc3968fa38db', class: "duet-input-icon" }, h("duet-icon", { key: 'f1fde9b9334ea64219f70363ec2bf40aa9e57d6f', margin: "none", size: "small", name: this.icon, color: "currentColor" }))), this.variation === "button" && h("slot", { key: '5f490c321a2ac47676a4aff02e30f0871b640dc2', name: "button" }), this.variation === "revealable" && (h("duet-button", { key: 'd8c8a40544d07411b453bfa332c9741851bf6226', ref: button => (this.togglePasswordRevealedButton = button), onBlur: this.onBlur, onFocus: this.onFocus, onClick: this.togglePasswordRevealed, icon: this.isPasswordRevealed ? "action-hide" : "action-show", accessibleLabel: this.isPasswordRevealed
                 ? this.hidePasswordLabel[this.language]
-                : this.showPasswordLabel[this.language], margin: "none", variation: "input-button-embedded", fixed: true, iconOnly: true })), this.variation === "revealable" && this.isPasswordRevealed !== undefined && (h("duet-visually-hidden", { key: 'c16a59469b63b6d623cb0119dbcf49bed4269d37' }, h("span", { key: '60d86ffe14dc83c8f27a364c691014084a612d90', "aria-live": "polite" }, this.isPasswordRevealed
+                : this.showPasswordLabel[this.language], margin: "none", variation: "input-button-embedded", fixed: true, iconOnly: true })), this.variation === "revealable" && this.isPasswordRevealed !== undefined && (h("duet-visually-hidden", { key: '6c96533d140ef424e33a3a67961042c3d3838161' }, h("span", { key: '6ab1b5959e16b393688eaa068d772b0a600badaf', "aria-live": "polite" }, this.isPasswordRevealed
             ? this.passwordShownAriaAnnouncement[this.language]
-            : this.passwordHiddenAriaAnnouncement[this.language]))), h("slot", { key: '700c7f3d746185f743b90f8c14e7cdbfe290d9b8' })), h("span", { key: 'b2ed0a75c22c458ab4008c83f1ad03e63cf143ac', class: "duet-input-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: 'aa9820e4fe4939f57bf2b50670693fc82ef925ce', class: "duet-input-error" }, this.error)))));
+            : this.passwordHiddenAriaAnnouncement[this.language]))), h("slot", { key: '5546955121bfe120490c3b22825c1035c096dd6c' })), h("span", { key: '79328cf71b7ba877431ed97a0ec98cadc31efa56', class: "duet-input-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: 'f483bcaa8219c1636b5f0b83ee1ee33bd49ec1d5', class: "duet-input-error" }, this.error)))));
     }
     static get is() { return "duet-input"; }
     static get encapsulation() { return "shadow"; }
@@ -1297,7 +1297,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,
@@ -1316,7 +1316,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

@@ -66,24 +66,24 @@ export class DuetLayout {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '53712da1e22dc258d30906570bf1271624379ed8', class: {
+        return (h(Host, { key: 'a2e2da10366f6be7ac33297fd517b70cccd91d3a', class: {
                 center: this.center,
                 "duet-middle": this.middle,
                 "duet-ie": isInternetExplorer(),
-            } }, h("div", { key: '80dc2f3b86a02c22c7aebd8802bd332154c4a273', class: { "duet-layout-wrapper": true, "duet-m-0": this.margin === "none" } }, this.hasTop && (h("div", { key: '9f3f4c713d5b921ad78480072e3dcea4d4867d04', class: {
+            } }, h("div", { key: '963134d9ac0866556e457fb1559789b3fdc04ac9', class: { "duet-layout-wrapper": true, "duet-m-0": this.margin === "none" } }, this.hasTop && (h("div", { key: '2af6f591e1f2af28de75b5ad014d2465a227d6e8', class: {
                 "duet-layout-top": true,
                 "duet-center": this.center,
-            } }, h("div", { key: '7cd44f76b96b5e2bd6033cc044f08e75a10760ed', class: "duet-layout-top-wrapper" }, h("slot", { key: '7743f1fe659f31925b27a85a970e934506b935e7', name: "top" })))), h("div", { key: '637a68f8376e073f146c63f2c866b6f52722577e', class: {
+            } }, h("div", { key: 'ada1feb7bcfd4aa2ad32163e551eb617ce6a3e0e', class: "duet-layout-top-wrapper" }, h("slot", { key: 'c902eb9bd68adf934510fcd036e73ca221cc25a2', name: "top" })))), h("div", { key: '10a599002b1cd07f67085bfc6712ec55d70f9c6c', class: {
                 "duet-layout": true,
                 "has-sidebar": this.hasSidebar,
                 "duet-center": this.center,
                 [`padding-${this.paddingBreakpoint}`]: !!this.paddingBreakpoint,
-            } }, h("main", { key: 'f6b2682dfb675be08976b23a485cf1a7ad76de0c', class: "duet-main" }, this.hasPageHeading && h("slot", { key: '9ec618959d54d768b880f95e05df0e5aaf76de75', name: "page-heading" }), h("slot", { key: 'b3c960b48d55fb863854fc34e126b1a143b3d194', name: "main" })), this.hasSidebar && (h("aside", { key: '68671aab139ba365d60284909e489a78bd7438d3', class: "duet-sidebar" }, h("div", { key: '60a53e1fa61ccec8fa2b85f20b475c52e016b963', class: {
+            } }, h("main", { key: 'f1aa73887189771b2bd8fcfb91f1abbe85d91f32', class: "duet-main" }, this.hasPageHeading && h("slot", { key: '972898b8f80d486dac54d3f02f746ea6453afde0', name: "page-heading" }), h("slot", { key: '916d907b26b5fc5c8cbc3b8e6c7bffbf044b2a09', name: "main" })), this.hasSidebar && (h("aside", { key: 'b153227de7fd9cd22c5101ca3b55e5f6c538cea2', class: "duet-sidebar" }, h("div", { key: '3de02670c41fff15245d73a5d6a1989ba1342a1c', class: {
                 "duet-sidebar-container": true,
                 "has-tabs": this.tabs,
                 sticky: this.sticky,
                 [this.stickyDistance]: this.sticky,
-            } }, h("slot", { key: 'a6131a1af98bb5cf2c6c808b15cea9e6996143f3', name: "sidebar" }))))))));
+            } }, h("slot", { key: '70a65e789aeea0b965ca02ef0876070c6fa337ff', name: "sidebar" }))))))));
     }
     static get is() { return "duet-layout"; }
     static get encapsulation() { return "shadow"; }

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

@@ -181,10 +181,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: 'eae1c61afe3b8413b109313020b9757cfe7f2e42', class: {
+        return (h(Host, { key: 'c6dfd9dd4ce34ea1deea147e76481197cfa90854', class: {
                 [`duet-link-${this.variation}`]: true,
                 "duet-m-0": this.margin === "none",
-            } }, h(Tag, { key: '973984aeb4ef7dd331df49218b1552a4955b80c2', href: this.url, class: {
+            } }, h(Tag, { key: '72968ba8e93c2773e8cdbdc7521a854e63569826', href: this.url, class: {
                 "duet-link": true,
                 "duet-link-is-external": this.external,
                 "duet-link-is-download": !!this.download,