@duetds/components 10.5.0 → 10.7.0

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

@@ -6,6 +6,7 @@ import { h } from "@stencil/core";
 import { DuetStringsExternalDefaults } from "../../common-strings";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
+import { DuetPicture } from "../../utils/picture-utils";
 import { checkNamedSlotElement, getElementsFromNamedSlot, hasSlot } from "../../utils/slot-utils";
 import { parsePossibleJSON } from "../../utils/string-utils";
 /**
@@ -129,6 +130,11 @@ export class DuetHero {
          * Image position.
          */
         this.imagePosition = "auto";
+        /**
+         * Make the image load with higher or lower priority. Value "high" sets the img's attributes fetchpriority and loading to
+         * "high" and "eager", while value "low" sets those attributes to "low" and "lazy"
+         */
+        this.imagePriority = "high";
         /**
          * Style variation of the hero area.
          */
@@ -237,17 +243,17 @@ export class DuetHero {
         const campaignOrSection = this.variation === "campaign" || this.variation === "section";
         const imageSizeIsCover = this.imageSize === "cover";
         const imagePositionIsCenter = this.imagePosition === "center";
-        const styles = {
-            backgroundImage: `url(${this.image})`,
-            backgroundSize: imageSizeIsCover ? "cover" : null,
-            backgroundPosition: imagePositionIsCenter ? "center" : null,
-        };
-        const bgImgA11yAttrs = this.image && this.imageAlt
-            ? {
-                role: "img",
-                ["aria-label"]: this.imageAlt,
-            }
-            : {};
+        const imageClass = `${imageSizeIsCover ? "cover" : ""} ${imagePositionIsCenter ? "center" : ""}`.trim();
+        const getPictureSource = (className) => ({
+            img: {
+                src: this.image,
+                alt: this.imageAlt || "",
+                loading: this.imagePriority === "low" ? "lazy" : "eager",
+                fetchpriority: this.imagePriority,
+                class: className || "",
+            },
+            sources: parsePossibleJSON(this.sources),
+        });
         const buttonStyles = {
             transform: "translateX(-8px)",
         };
@@ -284,7 +290,7 @@ export class DuetHero {
                 outlineColor = "color-primary-turva";
             }
         }
-        return (h("div", { key: 'c9ddbcc16c2911a20e497cd8aa384fa5c07d33aa', role: "region", class: {
+        return (h("div", { key: 'dfdf7ff48804ea8afc843f2901dae041929c9266', role: "region", class: {
                 "duet-hero": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-has-category-icon": !!this.categoryIcon,
@@ -302,17 +308,17 @@ export class DuetHero {
                 "duet-hero-text-center": this.variation !== "product" && ((this.textCenter && !this.leftAlign) || campaignOrSection),
                 "duet-hero-left-align": this.variation === "product" || (this.leftAlign && !campaignOrSection),
                 "duet-hero-narrow": this.layout === "narrow",
-            }, part: "duet-hero" }, campaignOrSection && this.image && (h("div", { key: 'a11039ca72275168553d2bba06cd909229dc1925', class: "background-area" }, h("div", { key: 'a21ad76654ac39c2fa21795f1cca235dc92e6404', class: "background-container" }, h("div", { key: '12d3583034b68b6fb747c749c0449146c40cb471', class: "background" }, h("img", { key: '8961eadf230127f3783efad4c48be759c4657e2a', class: `${imageSizeIsCover ? "cover" : ""} ${imagePositionIsCenter ? "center" : ""}`, src: this.image, alt: this.imageAlt || "", role: this.imageAlt ? null : "presentation" })), h("div", { key: 'bdfeab66795ec39e3f0383d9c2ef713733eb1a87', class: "brand-shape" })))), this.variation === "product" && this.image && (h("div", { key: 'f08f6d3f621e7dac9a46f1942d87a6ec8cc8afa1', class: { "background-area": true, [this.layout]: true } }, h("div", { key: 'dcb0f245be411d836d24d7adb5c98b82841d6038', class: { "background-container": true, [this.layout]: true } }, h("div", { key: 'a5c5eccc8dcf20d10c7be435873c815eaf0713e2', class: { background: true, [this.layout]: true } }, h("div", { key: '358763fb7ceea2e54bb6d5249a3b4281de220758', class: { "background-mask": true, [this.layout]: true } }), this.theme !== "turva" && h("div", { key: 'a11b4ea782b4e6887ec4d6573188adeec90577b1', class: { "brand-shape": true, [this.layout]: true } }), h("div", { key: '7afb89a0beb1d7675c33fcc831880c8126f1299a', class: { "brand-shaped-image": true, [this.layout]: true } }, h("div", { key: 'd9f4649e3eb88d062cbde9eb311f195357f67d5d', class: { "brand-shaped-image-wrapper": true, [this.layout]: true } }, h("div", Object.assign({ key: 'e75eeac505d3b021f0a7de2c195b9846b77c7c17', class: { "brand-shaped-image-bg": true, [this.layout]: true }, style: styles }, bgImgA11yAttrs)))), this.categoryIcon && (h("div", { key: '3c7d8d8ef1ccb2a63c0cde7ce064adb3ac49ba9a', class: { "brand-shaped-icon": true, [this.layout]: true } }, h("duet-icon", { key: '23ff81f55a6f02a5fee73f17ea54a96cee164b85', class: { [this.layout]: true }, background: "none", name: this.categoryIcon, margin: "none", size: "auto", responsive: false }))))))), this.variation === "content" && this.image && (h("div", { key: 'd1d02c374a68c1b68fb2f9d848e5a7c357b5a220', class: "background-area" }, h("div", { key: '9f53455c7fca9008387d26b0dfc89c104076c248', class: "background" }, h("div", { key: '80d50fdf1c366ac730e88fff3d59f10f725f66bb', class: "background-mask" }), this.theme !== "turva" && h("div", { key: 'b079b624311717908bb1e1c37a0c56ad560ed44e', class: "brand-shape" }), h("div", { key: '247c5196610c63556bf2f66e2d8334d9cce8bdfa', class: "brand-shaped-image" }, h("div", { key: 'a83da29f05f36125276f4e74096648b30a8e9898', class: "brand-shaped-image-wrapper" }, h("div", Object.assign({ key: '150f6775a489981cbeaa8aa03f188f165d48aee0', class: "brand-shaped-image-bg", style: styles }, bgImgA11yAttrs))))))), h("div", { key: '558787b0fd8e59329b907d7dda223526d14b632d', class: { "duet-hero-wrapper": true, [this.layout]: true } }, this.image && this.variation === "image" && (h("div", { key: '12abfe5fb1240e186528ecbc2119c0797480e77f', class: "duet-hero-image-mask" }, h("div", { key: '0592878e99fd51f01ce16c2bf2ac1ae44c4636a1', class: "duet-hero-image-wrapper" }, h("div", Object.assign({ key: 'd7a6838d0f589bb56ea831375e8a6237fe3c4bf2', class: "duet-hero-image", style: styles }, bgImgA11yAttrs))))), (this.variation === "gray" || this.variation === "light" || this.variation === "minimal") &&
-            this.processedBack && (h("div", { key: 'dbef4d7459000d59a63deb5834086f5e607f8a0a', class: "duet-hero-back" }, h("duet-button", { key: '19481b475ec5fa1a83ee3d94d6170e823d80e5ae', 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: '38e648e7447b8db00a773ff4025d68500401f7bc', class: "background-area" }, h("div", { key: '803534bf55dc7737cd41ec1d75fbed052334a19a', class: "background-container" }, h("div", { key: '27d0577a3993d7eaa767812700ff290986535b20', class: "background" }, h(DuetPicture, Object.assign({ key: '6cc4a5648f7466ed44125cd22e35a6eeb725b18a' }, getPictureSource(imageClass)))), h("div", { key: '76a95c713cd90761ea2d670389183e2c04a97a80', class: "brand-shape" })))), this.variation === "product" && this.image && (h("div", { key: 'c436973c44f7d497a70a96a51eb0f96be6eda95a', class: { "background-area": true, [this.layout]: true } }, h("div", { key: 'e5a17290d952644ba521a4b3976387456f650cd4', class: { "background-container": true, [this.layout]: true } }, h("div", { key: '8fdf828e65411a86393e096d8f3b6415076d97e0', class: { background: true, [this.layout]: true } }, h("div", { key: '0ada9a2b55d78b2774063d099cb03a8e09693584', class: { "background-mask": true, [this.layout]: true } }), this.theme !== "turva" && h("div", { key: 'b24d91804b31920da022285d0565667c8e92997e', class: { "brand-shape": true, [this.layout]: true } }), h("div", { key: '226619d3d283b31fa7e8caadaf49473a170abb3a', class: { "brand-shaped-image": true, [this.layout]: true } }, h("div", { key: '0a0415ca70e98b277bf151f28e1f4f1639338fa6', class: { "brand-shaped-image-wrapper": true, [this.layout]: true } }, h("div", { key: 'c866eb1fa36ab6cc43e8839669069046c2faae60', class: { "brand-shaped-image-bg": true, [this.layout]: true } }, h(DuetPicture, Object.assign({ key: 'a98b41e51c70043f55128a19718911f321b7527f' }, getPictureSource()))))), this.categoryIcon && (h("div", { key: '0d3b0c0428a32d2df977a6ac63be04ed6a7f72c6', class: { "brand-shaped-icon": true, [this.layout]: true } }, h("duet-icon", { key: '7af6dee3ca69df4b1d8e87830636ec18ad3a40b7', class: { [this.layout]: true }, background: "none", name: this.categoryIcon, margin: "none", size: "auto", responsive: false }))))))), this.variation === "content" && this.image && (h("div", { key: '20bd7ce2aca1d5062f0f0e1f4889a97ec308b1d9', class: "background-area" }, h("div", { key: '1847e876158decc257b4445501d1bb8e208ddb0e', class: "background" }, h("div", { key: '236489bc1fff1be4cf44d267dfbb5c3bcb119dad', class: "background-mask" }), this.theme !== "turva" && h("div", { key: '3c1e73a037c1ec3b129caaac2a689bf60ce62710', class: "brand-shape" }), h("div", { key: '9cfc2c3b6f5022d863fd6c869ffda7e0df51e013', class: "brand-shaped-image" }, h("div", { key: '8471e4f399016fb37f5f5e46f8bab0865179c6a3', class: "brand-shaped-image-wrapper" }, h("div", { key: '68bfcd1b748c5f7d0b3661152a489707f12024ac', class: "brand-shaped-image-bg" }, h(DuetPicture, Object.assign({ key: '78a267d0198018669353675e01ad0ca70491b36f' }, getPictureSource())))))))), h("div", { key: '4ab0bf9e9dee5b6889db6cc396cd304eda1bd870', class: { "duet-hero-wrapper": true, [this.layout]: true } }, this.image && this.variation === "image" && (h("div", { key: '208c46264f1ea0ce04845324a68cf5848ad95535', class: "duet-hero-image-mask" }, h("div", { key: 'b95a0b0a8840c5835a4e9668bd9481fcd9bfa87b', class: "duet-hero-image-wrapper" }, h("div", { key: '04633cc8d3020b921c42551a5e065bc942540fcc', class: "duet-hero-image" }, h(DuetPicture, Object.assign({ key: '7415ca53535a1295d42eb2b29cc6dbe7a93a04ae' }, getPictureSource(imageClass))))))), (this.variation === "gray" || this.variation === "light" || this.variation === "minimal") &&
+            this.processedBack && (h("div", { key: '59cbdb9c4195074e03310b65a88b4bafd74f9916', class: "duet-hero-back" }, h("duet-button", { key: 'ce17a681e39b9ad5c21edec2472175919f68b02f', 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: 'f1afc26bae892d9ae01824cae17226859bcb2156', class: { "duet-hero-icon": true, "duet-hero-icon-has-heading": this.preHeading !== "" }, size: "x-large", background: this.categoryIconColor, name: this.categoryIcon })), h("div", { key: '8ce3263c60dc312e31098663adadec75d34c9e0e', class: { "duet-hero-text": true }, part: "duet-hero-text" }, (this.preHeading || this.hasPreHeadingSlot) && (h("duet-paragraph", { key: 'a9faf36bb7d72156356b527ef585f4db2f07885f', 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: '10e35d0acadfbe28c7c3c9a5725190c00cc35214', name: "badge" }), (this.heading || this.hasHeadingSlot) && (h("duet-heading", { key: 'd289ee15b7e8ae4e821195252e132ba6dfd4bb13', 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: '66f747db21ef3d390d01c78ff7b05879a4d435c5', theme: this.theme, level: this.hasSubHeadingSlotNative ? "div" : this.subHeadingLevel, class: { "duet-hero-subheading": true }, color: this.theme === "turva" ? "secondary-turva" : "secondary", visualLevel: "h2" }, h("slot", { key: 'a61351c8a3463e0d7b3881d4ed2eb430a4d708f8', name: "subheading" }))), this.description && (h("duet-paragraph", { key: '5e17ebff3513457595a670b8b180ad4c900bb5ac', theme: this.theme, color: textColor, variation: "intro" }, this.description)), (this.variation === "gray" || this.variation === "minimal") && this.processedListItems && (h("duet-list", { key: '7cb299e23a2062bdf5a7831891b9a3590ad51ad5', 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: '132f4b0f22736d84217d2ef92fb137bb37ae1bfa', 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: 'ba4d8449b00fe95aa8e9e2b4c0f43143e851c44f' })), (this.variation === "gray" || this.variation === "minimal") && this.processedActions && (h("div", { key: 'da7c7c2652fe88ee7a097e696e56c301d8d813b9', 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: '191763dfcef22bcd3ccd7b8ac096ae6446de2d98', class: { "duet-hero-icon": true, "duet-hero-icon-has-heading": this.preHeading !== "" }, size: "x-large", background: this.categoryIconColor, name: this.categoryIcon })), h("div", { key: '7ee11a778839f281ce31673e60f4923ff223e3ac', class: { "duet-hero-text": true }, part: "duet-hero-text" }, (this.preHeading || this.hasPreHeadingSlot) && (h("duet-paragraph", { key: '7d7f43ba3e592cbad30f8f28000ff361209bf443', 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: 'e73727e5aa7fad6aaaceabcf6f81c6572f0a15a9', name: "badge" }), (this.heading || this.hasHeadingSlot) && (h("duet-heading", { key: '5884aecc75704d8dccc6c709a6768ddd578c4dde', 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: '763778e5026dbfa90ef3e68f0f1b7d037043b88d', theme: this.theme, level: this.hasSubHeadingSlotNative ? "div" : this.subHeadingLevel, class: { "duet-hero-subheading": true }, color: this.theme === "turva" ? "secondary-turva" : "secondary", visualLevel: "h2" }, h("slot", { key: '9588038687bc9dfcb10a04b5e5cdaa6e3ef253de', name: "subheading" }))), this.description && (h("duet-paragraph", { key: 'f0d60545403dfcc453d79aa1bfdd5582b876ae49', theme: this.theme, color: textColor, variation: "intro" }, this.description)), (this.variation === "gray" || this.variation === "minimal") && this.processedListItems && (h("duet-list", { key: '7006a276c36ca7001df5c93d6fc3e792f8a07169', 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: '2954e77b3dde7b49573c25f1566d5f820c1dea3b', 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: '87703efb26e4376a71a692aa444988dacbf45d68' })), (this.variation === "gray" || this.variation === "minimal") && this.processedActions && (h("div", { key: '92123389406d8b37e76d0305fb7a2e1d194ce1d4', 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", Object.assign({ key: 'b02c3a2b4e9722c7fc64b62e708c2d69d668b5a7', class: "duet-hero-image", style: styles }, bgImgA11yAttrs)), h("slot", { key: 'a8869163ed1e35a8987e126305221199705f4a88', name: "bottom" }))));
+            this.variation !== "content" && (h("div", { key: 'cd09b6b83414a647857f014ddd08f9b49b4d122a', class: "duet-hero-image" }, h(DuetPicture, Object.assign({ key: '68b91f0d9db476f3aa31c63b2a04465705e61658' }, getPictureSource(imageClass))))), h("slot", { key: '8f23feb29e40591b85303a1864fb5736274b7596', name: "bottom" }))));
     }
     static get is() { return "duet-hero"; }
     static get encapsulation() { return "shadow"; }
@@ -502,7 +508,7 @@ export class DuetHero {
                     "references": {
                         "DuetHeroIconSize": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-hero/duet-hero.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-hero/duet-hero.tsx",
                             "id": "src/components/duet-hero/duet-hero.tsx::DuetHeroIconSize"
                         }
                     }
@@ -744,7 +750,7 @@ export class DuetHero {
                     "references": {
                         "DuetHeroButtonData": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-hero/duet-hero.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-hero/duet-hero.tsx",
                             "id": "src/components/duet-hero/duet-hero.tsx::DuetHeroButtonData"
                         }
                     }
@@ -877,6 +883,51 @@ export class DuetHero {
                 "setter": false,
                 "reflect": false
             },
+            "imagePriority": {
+                "type": "string",
+                "attribute": "image-priority",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"high\" | \"low\"",
+                    "resolved": "\"high\" | \"low\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Make the image load with higher or lower priority. Value \"high\" sets the img's attributes fetchpriority and loading to\n\"high\" and \"eager\", while value \"low\" sets those attributes to \"low\" and \"lazy\""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"high\""
+            },
+            "sources": {
+                "type": "string",
+                "attribute": "sources",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetSource[] | string",
+                    "resolved": "DuetSource[] | string",
+                    "references": {
+                        "DuetSource": {
+                            "location": "import",
+                            "path": "../../utils/picture-utils",
+                            "id": "src/utils/picture-utils.tsx::DuetSource"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Array of sources for responsive images. Sources have the properties of <source> element."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
             "variation": {
                 "type": "string",
                 "attribute": "variation",
@@ -887,7 +938,7 @@ export class DuetHero {
                     "references": {
                         "DuetHeroVariation": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-hero/duet-hero.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-hero/duet-hero.tsx",
                             "id": "src/components/duet-hero/duet-hero.tsx::DuetHeroVariation"
                         }
                     }
@@ -1006,7 +1057,7 @@ export class DuetHero {
                     "references": {
                         "DuetHeroClickEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-hero/duet-hero.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-hero/duet-hero.tsx",
                             "id": "src/components/duet-hero/duet-hero.tsx::DuetHeroClickEvent"
                         }
                     }
@@ -1027,7 +1078,7 @@ export class DuetHero {
                     "references": {
                         "DuetHeroAnalyticsEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-hero/duet-hero.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-hero/duet-hero.tsx",
                             "id": "src/components/duet-hero/duet-hero.tsx::DuetHeroAnalyticsEvent"
                         }
                     }

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: 'f6a74ccabd59055d22eec3654bde9c81fd4a9ce3', class: {
+        return (h(Host, { key: '4165c86903dae730023be910be36389c7151045d', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-icon-has-outline": !!this.outline,
                 "duet-icon-has-background": !!this.background,
-            } }, h("span", { key: 'f2ea10e9ec8459d5a5995781e193c6d8df7fb1ef', "aria-hidden": "true", style: styles, class: {
+            } }, h("span", { key: '9efda9e15441290db9c499f59fc3f4feed86e5b2', "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: '3d93b31d1831fa77b71a5f574a38d838636c7757', "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: 'a59c6e8741e859747f51863e7677de1f95e71b29', "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.js

@@ -45,11 +45,11 @@ export class DuetIndicator {
         inheritGlobalTheme(this);
     }
     render() {
-        return (h(Host, { key: '6c412435545134515ed6bb4eb8f5e1ec8701dce7' }, h("span", { key: 'f7c0f6b5019c3d9abcd01b8da701ad123910b5b3', class: {
+        return (h(Host, { key: '329e985ec026dde828ee0e4f896bbbf68054a4ce' }, h("span", { key: '688c53ea00e20e7c2aa612ed6cdaede9a83655f9', class: {
                 "duet-indicator": true,
                 [`duet-indicator-${this.variation}`]: true,
                 "duet-theme-turva": this.theme === "turva",
-            } }), h("duet-visually-hidden", { key: 'c4ceeb86a4ab008a251f1ce9f4f6271c3fab73ef' }, this.getAccessibleLabel())));
+            } }), h("duet-visually-hidden", { key: '37a42c32af9d6d46946d30239592a4794e16de93' }, this.getAccessibleLabel())));
     }
     static get is() { return "duet-indicator"; }
     static get encapsulation() { return "shadow"; }
@@ -75,7 +75,7 @@ export class DuetIndicator {
                     "references": {
                         "IndicatorVariation": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-indicator/duet-indicator.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-indicator/duet-indicator.tsx",
                             "id": "src/components/duet-indicator/duet-indicator.tsx::IndicatorVariation"
                         }
                     }

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

@@ -8,7 +8,7 @@ import { inheritGlobalTheme } from "../../common";
 import { DuetInternalLabel } from "../../common/label";
 import { createID } from "../../utils/create-id";
 import { cleanValue, resetCursor } from "../../utils/input-utils";
-import { isArrowLeftKey, isArrowRightKey, isBackspaceKey, isEnterKey, isEscapeKey } from "../../utils/keyboard-utils";
+import { isArrowLeftKey, isArrowRightKey, isBackspaceKey, isCharacterInsertKey, isEnterKey, isEscapeKey, } from "../../utils/keyboard-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
 import { checkNamedSlotElement, proxyInputToSlot } from "../../utils/slot-utils";
 const icons = {
@@ -33,6 +33,7 @@ export class DuetInput {
         this.topCaptionPlaceholderId = createID("DuetCaptionPlaceholderTop");
         this.chipCountId = createID("DuetInputChipCount");
         this.errorId = createID("DuetError");
+        this.maxlengthAnnouncementKey = 0;
         this.disallowPatternRegex = null;
         this.clearLabel = {
             en: "Clear",
@@ -69,6 +70,11 @@ export class DuetInput {
             fi: "valittu",
             sv: "valt",
         };
+        this.maxlengthReachedLabel = {
+            en: "This field has a maximum length of {max} characters. Limit reached.",
+            fi: "Tämän kentän enimmäispituus on {max} merkkiä. Raja on saavutettu.",
+            sv: "Det här fältet har en maximal längd på {max} tecken. Gränsen är nådd.",
+        };
         /**
          * State() variables
          */
@@ -78,6 +84,10 @@ export class DuetInput {
          */
         this.isFocused = false;
         this._accessiblePopup = undefined;
+        /**
+         * Text announced to screen readers when the maxlength limit is reached.
+         */
+        this.maxlengthAnnouncement = "";
         /**
          * Indicates the id or a string of space seperated ids of a component(s) that describes the input.
          */
@@ -208,9 +218,22 @@ export class DuetInput {
          * Component event handling.
          */
         this.onInput = (ev) => {
-            if (this.maxlength && this.nativeInput.value.length > this.maxlength) {
+            var _a;
+            // In addition to input event, maxlength handling uses also keyDown and paste events as input event may not be
+            // triggered when entry is truncated by the browser.
+            if (this.maxlength) {
+                const wasAtMaxlength = (((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) || 0) >= this.maxlength;
+                const nativeLength = this.nativeInput.value.length;
                 // Android doesn't honor maxlength
-                this.nativeInput.value = this.nativeInput.value.slice(0, this.maxlength);
+                const inputOverflow = nativeLength > this.maxlength;
+                if (inputOverflow) {
+                    this.nativeInput.value = this.nativeInput.value.slice(0, this.maxlength);
+                }
+                const limitJustReached = !wasAtMaxlength && nativeLength === this.maxlength;
+                const limitExceededWhileFull = wasAtMaxlength && inputOverflow;
+                if (limitJustReached || limitExceededWhileFull) {
+                    this.handleMaxlengthLimitReached();
+                }
             }
             if (this.disallowPatternRegex) {
                 cleanValue(this.nativeInput, this.disallowPatternRegex);
@@ -256,6 +279,30 @@ export class DuetInput {
                 component: "duet-input",
             });
         };
+        this.onInputKeyDown = (ev) => {
+            if (this.maxlength && isCharacterInsertKey(ev) && this.isAtMaxlengthWithoutSelection()) {
+                this.handleMaxlengthLimitReached();
+            }
+        };
+        this.onInputPaste = () => {
+            if (this.maxlength && this.isAtMaxlengthWithoutSelection()) {
+                this.handleMaxlengthLimitReached();
+            }
+        };
+        this.isAtMaxlengthWithoutSelection = () => {
+            const input = this.nativeInput;
+            const inputIsWithoutSelection = input.selectionStart === input.selectionEnd;
+            const inputIsAtMaxlength = input.value.length >= this.maxlength;
+            return inputIsWithoutSelection && inputIsAtMaxlength;
+        };
+        this.handleMaxlengthLimitReached = () => {
+            clearTimeout(this.maxlengthAnnouncementTimeoutId);
+            this.maxlengthAnnouncement = "";
+            this.maxlengthAnnouncementTimeoutId = setTimeout(() => {
+                this.maxlengthAnnouncementKey++;
+                this.maxlengthAnnouncement = this.maxlengthReachedLabel[this.language].replace("{max}", String(this.maxlength));
+            }, 300);
+        };
         /**
          * Private functions
          */
@@ -536,10 +583,15 @@ export class DuetInput {
         if (this.type === "password") {
             return "off";
         }
+        const tokens = this.autoComplete.split(/\s+/);
         // If attribute includes "email", e.g. "work email", don't overwrite it
-        if (this.type === "email" && this.autoComplete !== "off" && !this.autoComplete.includes("email")) {
+        if (this.type === "email" && this.autoComplete !== "off" && !tokens.includes("email")) {
             return "email";
         }
+        // If attribute includes "tel", e.g. "mobile tel", don't overwrite it
+        if (this.type === "tel" && this.autoComplete !== "off" && !tokens.includes("tel")) {
+            return "tel";
+        }
         return this.autoComplete;
     }
     /**
@@ -606,7 +658,7 @@ export class DuetInput {
             this.type !== "password" &&
             this.type !== "time" &&
             this.variation !== "button";
-        return (h(Host, { key: '776ea6ee90a20ff356574b64890a7b98d9947e6c', class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" }, onKeyUp: e => this.keyHandler(e) }, this.type === "time" && (h("duet-visually-hidden", { key: 'a56addb34f4bcf57a59e060921e3dacab36a98b7', "aria-live": "polite", "aria-atomic": "true" }, selectedTime ? `${this.timeAnnouncement[this.language]} ${selectedTime.toLocaleTimeString()}` : "")), h("div", { key: '04447fa85e1470adbfc2307f7b2fd5758454e0b7', class: {
+        return (h(Host, { key: '1119e8e51f3a490e34665e77ce32ec21f7bc70c7', class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" }, onKeyUp: e => this.keyHandler(e) }, this.type === "time" && (h("duet-visually-hidden", { key: '31afa65dcb1b161f8c5a87c65953a26a552066b8', "aria-live": "polite", "aria-atomic": "true" }, selectedTime ? `${this.timeAnnouncement[this.language]} ${selectedTime.toLocaleTimeString()}` : "")), h("div", { key: '5574afef8c592593193cbf0c99eaf8eaa84dbf11', class: {
                 "duet-input-container": true,
                 "duet-theme-turva": this.theme === "turva",
                 [`duet-input-variation-${this.variation}`]: true,
@@ -623,11 +675,11 @@ export class DuetInput {
                 "has-prefix": !!this.fieldPrefix,
                 "has-suffix": !!this.fieldSuffix,
                 disabled: this.disabled,
-            } }, h("div", { key: 'f5f3de4654fac36f5ffb7e0302ffccb56263728a', class: "duet-input-label-container" }, h(DuetInternalLabel, { key: '566d4df4f7cfe09b50f4aedaf342cef70e7fc80a', 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: '7560dd36ade42746228061727b2fb2b38dce7ed6', class: "duet-input-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), h("slot", { key: '9b8a15f4f79269696a24c9fd989186f95dfc1e62', name: "tooltip" })), this.caption && (h("duet-caption", { key: 'c425ac21ec5942adfe5a4e48ae20080ab661bf4d', id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { key: 'ac98b112529396687ec21a938c55ce1b3d86f091', class: {
+            } }, h("div", { key: 'cd0dfb4e8ef821c84d342fff017da9b3e6938134', class: "duet-input-label-container" }, h(DuetInternalLabel, { key: '7ef9a4e3ccbc5b7ac030ca66912eb0471103ed10', 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: 'f263424aa51a59f4252cad4b4a1347b5986869ae', class: "duet-input-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), h("slot", { key: 'b4afd5ae65bbc03083b81996965cb354d6fd2a35', name: "tooltip" })), this.caption && (h("duet-caption", { key: '1d126824ee2ef4b7a4dae8650363e9da0b58c288', id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { key: 'adb5b8fa3b3de37c96d74fd1b888de75689a3ce0', class: {
                 "duet-input-relative": true,
                 "duet-theme-turva": this.theme === "turva",
                 "has-error": !!this.error,
-            } }, this.placeholder && this.echoPlaceholder && (this.value || this.type === "time") && (h("duet-caption", { key: 'db332864c2b97112aa2b9347da3d6c2468f77b0b', id: this.topCaptionPlaceholderId, class: "duet-input-placeholder", margin: "none", size: "small" }, this.placeholder)), this.chips && (h("duet-visually-hidden", { key: 'e92de63c87071f00143ee9db06c94361970b704a', id: this.chipCountId }, ", ", `${this.getAllChips().length} ${getLocaleString(this.chipsSelectedDesriptionLabel)}`, ",")), this.variation === "button-left" && h("slot", { key: '274e2fe6a604c30aa879ac72a33154f1fb3c8fc9', name: "button-left" }), this.fieldPrefix && (h("span", { key: '2bd5154e89d13c7562283684a3087c3c48481fb9', class: "input-adornment prefix", id: this.prefixId }, this.fieldPrefix)), h("input", Object.assign({ key: '0b77d2e90b3acdb1452d73ad2a736e924200009a', ref: input => (this.nativeInput = input), onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, type: this.getInputType(), class: {
+            } }, this.placeholder && this.echoPlaceholder && (this.value || this.type === "time") && (h("duet-caption", { key: 'fcadd06bf9e0dc4115c0bd004de23fa5692b03fc', id: this.topCaptionPlaceholderId, class: "duet-input-placeholder", margin: "none", size: "small" }, this.placeholder)), this.chips && (h("duet-visually-hidden", { key: '84a8a1feed5a0895936f5e1d5ee310c6282f1678', id: this.chipCountId }, ", ", `${this.getAllChips().length} ${getLocaleString(this.chipsSelectedDesriptionLabel)}`, ",")), this.variation === "button-left" && h("slot", { key: '90533c1b234e2644eb97317f903abbf04fee8138', name: "button-left" }), this.fieldPrefix && (h("span", { key: '151fd6757766b8c7e86ded73639d87bb32814089', class: "input-adornment prefix", id: this.prefixId }, this.fieldPrefix)), h("input", Object.assign({ key: '06811722717032661d4ba5e3bfa9c2b6196cf082', ref: input => (this.nativeInput = input), onInput: this.onInput, onKeyDown: this.onInputKeyDown, onPaste: this.onInputPaste, onBlur: this.onBlur, onFocus: this.onFocus, type: this.getInputType(), class: {
                 "duet-input": true,
                 disabled: this.disabled,
                 "is-number": this.component === "number",
@@ -635,17 +687,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.getAriaLabelledBy(), "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.getAutocomplete(), required: this.required, role: this.role, name: this.name, id: identifier }, inputProps)), this.fieldSuffix && (h("span", { key: '00f86f44a74b91127a1c11b696b51983d62a7c28', class: "input-adornment suffix", id: this.suffixId }, this.fieldSuffix)), !this.value && hasInputIcon && (h("div", { key: 'f1d531cc26ab9de06b90e38a4b790069fe920d88', class: "duet-input-icon" }, h("duet-icon", { key: 'fb14ea462e583a24e6bbd0337666dfa4ef9c9a1a', margin: "none", size: "small", icon: icons[this.type].svg, color: "currentColor" }))), this.clear && this.value && (h("div", { key: 'f2e415cb5d8c5eaa0bbb1bb0cad942d8a976e9a5', class: {
+            }, value: this.value, disabled: this.disabled, "aria-invalid": this.error ? "true" : "false", "aria-labelledby": this.getAriaLabelledBy(), "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.getAutocomplete(), required: this.required, role: this.role, name: this.name, id: identifier }, inputProps)), this.maxlength && (h("duet-visually-hidden", { key: `maxlength-announcement-${this.maxlengthAnnouncementKey}`, "aria-live": "polite", "aria-atomic": "true" }, this.maxlengthAnnouncement)), this.fieldSuffix && (h("span", { key: 'b2d284fc05798f7dab08555f524cabf4f94f0e19', class: "input-adornment suffix", id: this.suffixId }, this.fieldSuffix)), !this.value && hasInputIcon && (h("div", { key: '8364a8a7687b6e37279585edf55da9005673f4df', class: "duet-input-icon" }, h("duet-icon", { key: '1b420da3e76241f1e105ce5ef8b9f40e6490424d', margin: "none", size: "small", icon: icons[this.type].svg, color: "currentColor" }))), this.clear && this.value && (h("div", { key: 'c67978258fbf64a22563a8e139b7a7de012bb4ca', 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: '7046a5f2c94bf429f4fc46dd4a9d590171975f04', onClick: this.handleClearClick, id: this.clearId, "aria-label": this.clearLabel[this.language], "aria-keyshortcuts": "Escape" }, h("duet-icon", { key: 'd33b0603197b14c98b4b8d76773f0c2325d365a9', margin: "none", size: "medium", name: "action-clear-input", color: "currentColor" })))), this.icon && this.variation !== "button" && (h("div", { key: 'f5b6861e2cd8f9affe011fc08700092296ef50c8', class: "duet-input-icon" }, h("duet-icon", { key: 'af0f1a819e505da950eec079950eb2a6c13c5254', margin: "none", size: "small", name: this.icon, color: "currentColor" }))), this.variation === "button" && h("slot", { key: 'db2a27e9e1683615a207b34f63a2981e0bbfe3e8', name: "button" }), this.variation === "revealable" && (h("duet-button", { key: 'f2c727cd4f07ea799ad033e737f490d14a285ded', 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: 'b243244d6d5184c42a9afb93483479a0b07bad7d', onClick: this.handleClearClick, id: this.clearId, "aria-label": this.clearLabel[this.language], "aria-keyshortcuts": "Escape" }, h("duet-icon", { key: '2ff21863005e55dc7a4dc1a16e2e2e40ad7f85cf', margin: "none", size: "medium", name: "action-clear-input", color: "currentColor" })))), this.icon && this.variation !== "button" && (h("div", { key: '7732892f159a6c7c9ad7c89b0031052b1ed45502', class: "duet-input-icon" }, h("duet-icon", { key: '97de6dc8ff0c506db494dc36edc6d0107792c2b9', margin: "none", size: "small", name: this.icon, color: "currentColor" }))), this.variation === "button" && h("slot", { key: '5c940caf605e2eaff4db2a36c63548db78f36f41', name: "button" }), this.variation === "revealable" && (h("duet-button", { key: 'caf0a7c8bec4a620e2ca5f897eaabc1814f32c5d', 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: 'd240447d7431097c99bd50fa6241a48d87b48ae0' }, h("span", { key: '47d29c787f119d0dae23436a69b192855b7bca63', "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: 'cc394dbd7d28fc9e1cf0a864c67e7e7a6a835d1a' }, h("span", { key: '20033ed28c86634d6faf03180e53cff84def1329', "aria-live": "polite" }, this.isPasswordRevealed
             ? this.passwordShownAriaAnnouncement[this.language]
-            : this.passwordHiddenAriaAnnouncement[this.language]))), h("slot", { key: 'cd872ef0355479149e3b926e98e33ebccc1d0faa' })), h("span", { key: 'bbbbc5e7b7b1ddd8064bdda229ad110686075dd2', class: "duet-input-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: '91876b01063f2de6147210b06daad0e5a3c71b3c', class: "duet-input-error" }, this.error)))));
+            : this.passwordHiddenAriaAnnouncement[this.language]))), h("slot", { key: 'b72c50503fa80fd1ba6764b7b3348bc5d7b2813c' })), h("span", { key: '25790e8c5147bb271fefa6cbce2343287b57c816', class: "duet-input-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: 'c62d261a03ebec492aed9c65a836525e47660cfc', class: "duet-input-error" }, this.error)))));
     }
     static get is() { return "duet-input"; }
     static get encapsulation() { return "shadow"; }
@@ -1165,7 +1217,7 @@ export class DuetInput {
                     "references": {
                         "DuetInputType": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-input/duet-input.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-input/duet-input.tsx",
                             "id": "src/components/duet-input/duet-input.tsx::DuetInputType"
                         }
                     }
@@ -1191,7 +1243,7 @@ export class DuetInput {
                     "references": {
                         "DuetVariationType": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-input/duet-input.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-input/duet-input.tsx",
                             "id": "src/components/duet-input/duet-input.tsx::DuetVariationType"
                         }
                     }
@@ -1532,7 +1584,7 @@ export class DuetInput {
                     "references": {
                         "DuetInputComponentType": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-input/duet-input.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-input/duet-input.tsx",
                             "id": "src/components/duet-input/duet-input.tsx::DuetInputComponentType"
                         }
                     }
@@ -1756,7 +1808,8 @@ export class DuetInput {
             "language": {},
             "isPasswordRevealed": {},
             "isFocused": {},
-            "_accessiblePopup": {}
+            "_accessiblePopup": {},
+            "maxlengthAnnouncement": {}
         };
     }
     static get events() {
@@ -1776,7 +1829,7 @@ export class DuetInput {
                     "references": {
                         "DuetInputEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-input/duet-input.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-input/duet-input.tsx",
                             "id": "src/components/duet-input/duet-input.tsx::DuetInputEvent"
                         }
                     }
@@ -1797,7 +1850,7 @@ export class DuetInput {
                     "references": {
                         "DuetInputEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-input/duet-input.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-input/duet-input.tsx",
                             "id": "src/components/duet-input/duet-input.tsx::DuetInputEvent"
                         }
                     }
@@ -1818,7 +1871,7 @@ export class DuetInput {
                     "references": {
                         "DuetInputEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-input/duet-input.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-input/duet-input.tsx",
                             "id": "src/components/duet-input/duet-input.tsx::DuetInputEvent"
                         }
                     }
@@ -1839,7 +1892,7 @@ export class DuetInput {
                     "references": {
                         "DuetInputEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-input/duet-input.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-input/duet-input.tsx",
                             "id": "src/components/duet-input/duet-input.tsx::DuetInputEvent"
                         }
                     }
@@ -1860,7 +1913,7 @@ export class DuetInput {
                     "references": {
                         "DuetInputEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-input/duet-input.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-input/duet-input.tsx",
                             "id": "src/components/duet-input/duet-input.tsx::DuetInputEvent"
                         }
                     }

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

@@ -121,7 +121,7 @@ export class DuetLabel {
                     "references": {
                         "DuetLabelMargin": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-label/duet-label.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-label/duet-label.tsx",
                             "id": "src/components/duet-label/duet-label.tsx::DuetLabelMargin"
                         }
                     }
@@ -147,7 +147,7 @@ export class DuetLabel {
                     "references": {
                         "DuetLabelSize": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-label/duet-label.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-label/duet-label.tsx",
                             "id": "src/components/duet-label/duet-label.tsx::DuetLabelSize"
                         }
                     }

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: '7796cda5c4db65768c100838b80382b318b3ac73', class: {
+        return (h(Host, { key: 'c3ba619c0c3088257b425ba8f5022ebef33c1100', class: {
                 center: this.center,
                 "duet-middle": this.middle,
                 "duet-ie": isInternetExplorer(),
-            } }, h("div", { key: '1b4f06b0ccaf2a93e30cb57085b3260c9d138d1f', class: { "duet-layout-wrapper": true, "duet-m-0": this.margin === "none" } }, this.hasTop && (h("div", { key: '9b64258743ef0f5802e2853b2251788fc3c7f02d', class: {
+            } }, h("div", { key: 'd627f63579dfb957bf3abe17191e8a8e943f0aae', class: { "duet-layout-wrapper": true, "duet-m-0": this.margin === "none" } }, this.hasTop && (h("div", { key: '4586ff77f2ef4209020a2401eef63273527a2e27', class: {
                 "duet-layout-top": true,
                 "duet-center": this.center,
-            } }, h("div", { key: '8de64147ed6cd7c0942f5f477da01c1ee4a8a0ce', class: "duet-layout-top-wrapper" }, h("slot", { key: '5b3dcec144e1e7a7707f52b18b8b1dc1d3cb13e7', name: "top" })))), h("div", { key: '57ef787cdd754a6749f76ce151ed15bb779b110b', class: {
+            } }, h("div", { key: 'daebb47e73054b59bb0459dc3327e0e60b17ebbe', class: "duet-layout-top-wrapper" }, h("slot", { key: '339fac00b53c0b4f532cfc77d5743217b5f72057', name: "top" })))), h("div", { key: 'bbf287d1f0aa701c40553a426b7a77b0a1c24c17', class: {
                 "duet-layout": true,
                 "has-sidebar": this.hasSidebar,
                 "duet-center": this.center,
                 [`padding-${this.paddingBreakpoint}`]: !!this.paddingBreakpoint,
-            } }, h("main", { key: '11712887cb73595787e00eb4ae51be583e222d69', class: "duet-main" }, this.hasPageHeading && h("slot", { key: '024128c99761e9ce2df803f1a7af98da0bb39d48', name: "page-heading" }), h("slot", { key: '5ec1793d46d607633b527d9497e9c160f1879f4a', name: "main" })), this.hasSidebar && (h("aside", { key: 'c68315f8b323267fabd94fb2f45fa29294c6e17a', class: "duet-sidebar" }, h("div", { key: '5222f4a3bc1b36710f1efc85cd09c31cd676d661', class: {
+            } }, h("main", { key: '0d75aa9aeb65fa61f8e0ff114cee467abe49f1cd', class: "duet-main" }, this.hasPageHeading && h("slot", { key: 'fd0ed7464c54122f1cfbbfbfc40f78d8c9ab41c7', name: "page-heading" }), h("slot", { key: '1004e4007a1d82e22147ddf3a883e8ddc9c7b0dc', name: "main" })), this.hasSidebar && (h("aside", { key: '167c6d2495c8bbc7cd0275f723e0810b9fc311b6', class: "duet-sidebar" }, h("div", { key: 'f0bbcbeb756bf18ba1b678c405c3890fb00ad857', class: {
                 "duet-sidebar-container": true,
                 "has-tabs": this.tabs,
                 sticky: this.sticky,
                 [this.stickyDistance]: this.sticky,
-            } }, h("slot", { key: '2c51db0affb26210fbbf38b7776d66f64c530f6f', name: "sidebar" }))))))));
+            } }, h("slot", { key: 'b8b30e8b29bb87ea6a0c0891ca5f841d0921f72b', name: "sidebar" }))))))));
     }
     static get is() { return "duet-layout"; }
     static get encapsulation() { return "shadow"; }
@@ -155,7 +155,7 @@ export class DuetLayout {
                     "references": {
                         "DuetLayoutStickyDistance": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-layout/duet-layout.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-layout/duet-layout.tsx",
                             "id": "src/components/duet-layout/duet-layout.tsx::DuetLayoutStickyDistance"
                         }
                     }

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

@@ -187,10 +187,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: '63ea212c967fed116f28d316bf7b4dc6f7bed88d', class: {
+        return (h(Host, { key: '1cac563de2598ea4f66a666a8e9ba85d74ef4d29', class: {
                 [`duet-link-${this.variation}`]: true,
                 "duet-m-0": this.margin === "none",
-            } }, h(Tag, { key: 'c799db0446fbca186340c781f23ccecaf58e4336', href: this.url, class: {
+            } }, h(Tag, { key: '0ff450feb862488c1bfaf626a234559904f301a1', href: this.url, class: {
                 "duet-link": true,
                 "duet-link-is-external": this.external,
                 "duet-link-is-download": !!this.download,