@duetds/components 10.4.0 → 10.6.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";
 /**
@@ -237,17 +238,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: "lazy",
+                class: className || "",
+                role: this.imageAlt ? undefined : "presentation",
+            },
+            sources: parsePossibleJSON(this.sources),
+        });
         const buttonStyles = {
             transform: "translateX(-8px)",
         };
@@ -284,7 +285,7 @@ export class DuetHero {
                 outlineColor = "color-primary-turva";
             }
         }
-        return (h("div", { key: 'f6cddcb9c3f7095554a386ee08f94edd696de30f', role: "region", class: {
+        return (h("div", { key: 'ff8e73f82eb8aad28667e16e49d362f57fcd3b74', role: "region", class: {
                 "duet-hero": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-has-category-icon": !!this.categoryIcon,
@@ -302,17 +303,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: '8e546e1f6a87372506acedb5ea3e36bc2886f789', class: "background-area" }, h("div", { key: 'c25e0f3339fa89a39a5b46ad27648300a7c489b8', class: "background-container" }, h("div", { key: '31200db09804314fe8b9a015aa7b250f3343691f', class: "background" }, h("img", { key: '5f1b008fe67fb54336d65d0a91f13921293ac03f', class: `${imageSizeIsCover ? "cover" : ""} ${imagePositionIsCenter ? "center" : ""}`, src: this.image, alt: this.imageAlt || "", role: this.imageAlt ? null : "presentation" })), h("div", { key: 'c62590322740c9e3d1938e5f89dc13885abf07b6', class: "brand-shape" })))), this.variation === "product" && this.image && (h("div", { key: '8f7994ab77f57be6ea58dbf8102415bcf7eb7ee6', class: { "background-area": true, [this.layout]: true } }, h("div", { key: '01a855e32e56a513ec6cbbe3108b2d7f81af9154', class: { "background-container": true, [this.layout]: true } }, h("div", { key: '863ce7546a76b161f64375733f35f861574c2fd4', class: { background: true, [this.layout]: true } }, h("div", { key: '00f7dcf3f138928620d9427e17c330dca44a1e51', class: { "background-mask": true, [this.layout]: true } }), this.theme !== "turva" && h("div", { key: '0c6c33ed4275e93f68f3d2cec43b879bbc74c60c', class: { "brand-shape": true, [this.layout]: true } }), h("div", { key: 'd4fad75a79b2b33cb6e31d1265842af3a5535873', class: { "brand-shaped-image": true, [this.layout]: true } }, h("div", { key: '7af50eabf0b09917bd5cebe2b44c55b6f0839231', class: { "brand-shaped-image-wrapper": true, [this.layout]: true } }, h("div", Object.assign({ key: '90eb7934807f9e153fd8e53672c5597651aaf8c0', class: { "brand-shaped-image-bg": true, [this.layout]: true }, style: styles }, bgImgA11yAttrs)))), this.categoryIcon && (h("div", { key: 'ce6e8cdcbd80b573448acb33539f59f06b28df9c', class: { "brand-shaped-icon": true, [this.layout]: true } }, h("duet-icon", { key: '139e86a27857835a90d453bab2fcdbc555f41e96', class: { [this.layout]: true }, background: "none", name: this.categoryIcon, margin: "none", size: "auto", responsive: false }))))))), this.variation === "content" && this.image && (h("div", { key: 'b0acf2f12e86bd067f963613d12a85b2db616755', class: "background-area" }, h("div", { key: '5ca70d15eca85878c065441b64121bf935d07d32', class: "background" }, h("div", { key: 'fda4ef9233986b3d1ac3111b374018b6b4296295', class: "background-mask" }), this.theme !== "turva" && h("div", { key: '638a9905eab07c7fee8140423b11b1e28fdedb65', class: "brand-shape" }), h("div", { key: '9a40f25f71ebaf02e17101a48f2cd15aa1b8de83', class: "brand-shaped-image" }, h("div", { key: '520668ba497de55d0c671a87fe4a397a901de7cf', class: "brand-shaped-image-wrapper" }, h("div", Object.assign({ key: 'aa2e5b706988a62baf70633a4d175ee1f935424c', class: "brand-shaped-image-bg", style: styles }, bgImgA11yAttrs))))))), h("div", { key: 'f46858232e9b0c0e014497eb373f276a0253e25c', class: { "duet-hero-wrapper": true, [this.layout]: true } }, this.image && this.variation === "image" && (h("div", { key: '8930f498a1b3d8c17cd6bfb2ca90011ec953becd', class: "duet-hero-image-mask" }, h("div", { key: 'c96d8a199eb919a14a9b372961b7e2e97622edf9', class: "duet-hero-image-wrapper" }, h("div", Object.assign({ key: '1960489a3dcd637d0d4c8cd90d4850563d96f62b', class: "duet-hero-image", style: styles }, bgImgA11yAttrs))))), (this.variation === "gray" || this.variation === "light" || this.variation === "minimal") &&
-            this.processedBack && (h("div", { key: '72393575c1cda007fe0a93f50fd29f2254e57635', class: "duet-hero-back" }, h("duet-button", { key: 'bb9c38f25da6cd86a6a1d9c550e39be5e553df52', 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: '7c6eaf498e1c5f42601f4c77a59d04f4e11c3787', class: "background-area" }, h("div", { key: 'a1cac74e5f880d8d7dd2d8f2fde6a6989769cbe2', class: "background-container" }, h("div", { key: 'f7819b590a7d01d66cb3ec2daa6667cc6a066993', class: "background" }, h(DuetPicture, Object.assign({ key: '554157cf62913f6fcbead29527d23678e952ce9e' }, getPictureSource(imageClass)))), h("div", { key: 'cd6031dacba217d040ad59474be4af621a76e463', class: "brand-shape" })))), this.variation === "product" && this.image && (h("div", { key: '08bbfc431301d26e2dee3c4e5bf2437c6bbe8052', class: { "background-area": true, [this.layout]: true } }, h("div", { key: '2458dfef535c7278b6b703001e66d9fedef43aac', class: { "background-container": true, [this.layout]: true } }, h("div", { key: '57b5c3ddecbc91ef48071c8050eaaa82599d1822', class: { background: true, [this.layout]: true } }, h("div", { key: 'b84d8bb2ebcabf13dc9c258513423327021dbd83', class: { "background-mask": true, [this.layout]: true } }), this.theme !== "turva" && h("div", { key: '1f899edfda9e0b827c28f83b286b8fde47a1079f', class: { "brand-shape": true, [this.layout]: true } }), h("div", { key: '67b34ed24606ef237036bf322d644e993415bf8f', class: { "brand-shaped-image": true, [this.layout]: true } }, h("div", { key: '95e326d93e23f615c90b18c61e7a30e30c84ebb1', class: { "brand-shaped-image-wrapper": true, [this.layout]: true } }, h("div", { key: 'add5e271482d65053646ae3f6ff4c413a8e114c3', class: { "brand-shaped-image-bg": true, [this.layout]: true } }, h(DuetPicture, Object.assign({ key: '00d4e688381f2758688008ce19e872ede3452cbc' }, getPictureSource()))))), this.categoryIcon && (h("div", { key: 'a5651e24522d86a6b0d1d870a5d700fad9db74ba', class: { "brand-shaped-icon": true, [this.layout]: true } }, h("duet-icon", { key: '0b35409d56e5842de0100f52e54f99561e777404', class: { [this.layout]: true }, background: "none", name: this.categoryIcon, margin: "none", size: "auto", responsive: false }))))))), this.variation === "content" && this.image && (h("div", { key: '0fa8f2031fe9a05cbfae9f1df5b73afbe156e840', class: "background-area" }, h("div", { key: '2fb9fe1b29056b9e257f8e8079f2872c2ae4ef93', class: "background" }, h("div", { key: 'd4d20034ae7773baf2fdd1551b83711cc2b0b781', class: "background-mask" }), this.theme !== "turva" && h("div", { key: '5ccc852b8b469c952800bac5c02489fc60ee8433', class: "brand-shape" }), h("div", { key: '73d5610a1e0ca8331908ce011976b86d62fbe60e', class: "brand-shaped-image" }, h("div", { key: '84079f98df920d86c3f6257f97d470ff1ff10d2b', class: "brand-shaped-image-wrapper" }, h("div", { key: 'a5d34d656f4d4f208d6dda010fb9c2236559d1e0', class: "brand-shaped-image-bg" }, h(DuetPicture, Object.assign({ key: '900a632f43c338d491fa7bd2104b51c27b9ec814' }, getPictureSource())))))))), h("div", { key: '62a03b483feb3ed3639d3754515456b058161877', class: { "duet-hero-wrapper": true, [this.layout]: true } }, this.image && this.variation === "image" && (h("div", { key: 'ba372654336abc15cfa19bf95e32eb2c629bacfc', class: "duet-hero-image-mask" }, h("div", { key: '258446935eb244a6cef5559d64bc3c486bf46643', class: "duet-hero-image-wrapper" }, h("div", { key: '726d6c0f7fd9915f813b5f7e57a9fd093a7640d2', class: "duet-hero-image" }, h(DuetPicture, Object.assign({ key: 'e1a272326833f3eea3209265b7c17d4f581812dc' }, getPictureSource(imageClass))))))), (this.variation === "gray" || this.variation === "light" || this.variation === "minimal") &&
+            this.processedBack && (h("div", { key: 'bed23c4fdf4e2c6869bd519aaefe2fb95231eb76', class: "duet-hero-back" }, h("duet-button", { key: 'efa5d21d8bd40aa5dcca5aec05b7ddb883898cbf', 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: 'cac362aaa6b377b1dba3651f712e386182d9a0dd', class: { "duet-hero-icon": true, "duet-hero-icon-has-heading": this.preHeading !== "" }, size: "x-large", background: this.categoryIconColor, name: this.categoryIcon })), h("div", { key: '402006ac87cd15880b91d0267f2a1128870c7de7', class: { "duet-hero-text": true }, part: "duet-hero-text" }, (this.preHeading || this.hasPreHeadingSlot) && (h("duet-paragraph", { key: '041bfe57134d086c3d94d2ee33d68a067dcccfba', 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: '20f0e190fec2a99d7b4cab63daf81ca8907fd58a', name: "badge" }), (this.heading || this.hasHeadingSlot) && (h("duet-heading", { key: '1e7cbfe931e89c9bffd4ae4cd5a1ceff2c910534', 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: 'ecd154b6b7291eb2de4e8290562a1d1ee3930d8c', 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: '4a2a625be57f1c26a8e8daab58e714ef99dcf103', name: "subheading" }))), this.description && (h("duet-paragraph", { key: '73bd53a15848745effd4c211434de70a82e3cb9f', theme: this.theme, color: textColor, variation: "intro" }, this.description)), (this.variation === "gray" || this.variation === "minimal") && this.processedListItems && (h("duet-list", { key: '6d56faeee194fcf3af381a19bfed5aa0b25f7414', 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: '5c9877bead31171f246c3b2519956cbcea6cfd4a', 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: 'c168f8e3f59e2d27cb8cb6d13be251628b044ccc' })), (this.variation === "gray" || this.variation === "minimal") && this.processedActions && (h("div", { key: '2c8a214eaa9fb3db915ecda2efa67a6433e9fe81', 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: '7de90656859d63499f3b160c2a39619cd4a0a9db', class: { "duet-hero-icon": true, "duet-hero-icon-has-heading": this.preHeading !== "" }, size: "x-large", background: this.categoryIconColor, name: this.categoryIcon })), h("div", { key: '73b543bd71d7e1f2936a2753a255d1ac1339f99c', class: { "duet-hero-text": true }, part: "duet-hero-text" }, (this.preHeading || this.hasPreHeadingSlot) && (h("duet-paragraph", { key: 'd0150811990feac24531dc5e173a93ec3a482418', 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: '041cf2cfcba43317f1e0041d40b00bfd68bb6202', name: "badge" }), (this.heading || this.hasHeadingSlot) && (h("duet-heading", { key: '7f662d3f98757953d04cb29640a7284e7ddcb64b', 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: '1c02aada316e7b8f8699b79d1128476cdde75ae6', 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: '34c786a2833cbeb54018fa83b543ab7c55ecd5ff', name: "subheading" }))), this.description && (h("duet-paragraph", { key: '28a82b3619a9418271f1dd4f25d10366fde9f753', theme: this.theme, color: textColor, variation: "intro" }, this.description)), (this.variation === "gray" || this.variation === "minimal") && this.processedListItems && (h("duet-list", { key: '4508f7e305d64e5bf7b39f5340efe8b2ab9d12be', 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: '3fb36dbf926c3331c6d757bc32208f26424f7e9c', 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: '85fd506d92b185ddbb57c134298164422a6c682d' })), (this.variation === "gray" || this.variation === "minimal") && this.processedActions && (h("div", { key: '9230b5c71616b04e276724e18592d946f7e4ad5d', 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: '6cb23cf63b47de3c8ec26c3089ac5e162c117039', class: "duet-hero-image", style: styles }, bgImgA11yAttrs)), h("slot", { key: '559b443673459389d61eea691ea9c8342f97f240', name: "bottom" }))));
+            this.variation !== "content" && (h("div", { key: 'cfe495f2a5bedb9bd622b3a001533a299477f12d', class: "duet-hero-image" }, h(DuetPicture, Object.assign({ key: '26f3df199d16a059b273c5e8dc568c71ac637d05' }, getPictureSource(imageClass))))), h("slot", { key: 'f8680df361205e9c4f2868f71022e736097002b1', name: "bottom" }))));
     }
     static get is() { return "duet-hero"; }
     static get encapsulation() { return "shadow"; }
@@ -502,7 +503,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 +745,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 +878,31 @@ export class DuetHero {
                 "setter": false,
                 "reflect": false
             },
+            "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 +913,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 +1032,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 +1053,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: '2a800d3292964b5a1dd5fd454662f690ce9e6b5a', class: {
+        return (h(Host, { key: 'ac454937867acd98e1552f998f09cecb7b6db6f6', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-icon-has-outline": !!this.outline,
                 "duet-icon-has-background": !!this.background,
-            } }, h("span", { key: '4d5d3fc155d6d2e4f677d8753c116c82eb865a2c', "aria-hidden": "true", style: styles, class: {
+            } }, h("span", { key: '61bd9c9b857bd54bfa18b71035af646ddfc8b490', "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: '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 }))));
+            } }, h("span", { key: '513e30e9f69a6661e54b5f2a0989eaf14887f533', "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: '0513ee5c8cb2770eb10e753901e8db638c665112' }, h("span", { key: '64ec0e8625b9cf03ed41d6cbe6ae9e286f5cd08a', 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: 'ae27d7871ca7bbde4e8e62d3c389c4f0c5b17090' }, 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.css

@@ -525,27 +525,35 @@ duet-caption:not(:last-of-type) {
   border-color: rgb(214, 28, 82) !important;
 }
 
+.duet-input-container.has-adornment.has-focus .duet-input-relative,
 .duet-input-container.has-chips.has-focus .duet-input-relative {
   outline: 2px solid;
   outline-color: rgb(0, 119, 179) !important;
   outline-offset: -1px;
 }
-.duet-theme-turva .duet-input-container.has-chips.has-focus .duet-input-relative, .duet-input-container.has-chips.has-focus .duet-input-relative.duet-theme-turva {
+.duet-theme-turva .duet-input-container.has-adornment.has-focus .duet-input-relative, .duet-input-container.has-adornment.has-focus .duet-input-relative.duet-theme-turva,
+.duet-theme-turva .duet-input-container.has-chips.has-focus .duet-input-relative,
+.duet-input-container.has-chips.has-focus .duet-input-relative.duet-theme-turva {
   outline-color: rgb(23, 42, 59) !important;
 }
+.duet-input-container.has-adornment:hover:not(:disabled):not(.has-focus) .duet-input-relative,
 .duet-input-container.has-chips:hover:not(:disabled):not(.has-focus) .duet-input-relative {
   outline: 2px solid;
   outline-color: rgb(127, 150, 165) !important;
   outline-offset: -1px;
 }
-.duet-theme-turva .duet-input-container.has-chips:hover:not(:disabled):not(.has-focus) .duet-input-relative, .duet-input-container.has-chips:hover:not(:disabled):not(.has-focus) .duet-input-relative.duet-theme-turva {
+.duet-theme-turva .duet-input-container.has-adornment:hover:not(:disabled):not(.has-focus) .duet-input-relative, .duet-input-container.has-adornment:hover:not(:disabled):not(.has-focus) .duet-input-relative.duet-theme-turva,
+.duet-theme-turva .duet-input-container.has-chips:hover:not(:disabled):not(.has-focus) .duet-input-relative,
+.duet-input-container.has-chips:hover:not(:disabled):not(.has-focus) .duet-input-relative.duet-theme-turva {
   outline-color: rgb(120, 145, 164) !important;
 }
+.duet-input-container.has-adornment.has-error .duet-input-relative,
 .duet-input-container.has-chips.has-error .duet-input-relative {
   outline-offset: -1px;
   background-color: rgb(255, 240, 243) !important;
   border-color: rgb(214, 28, 82) !important;
 }
+.duet-input-container.has-adornment.has-error.has-focus .duet-input-relative,
 .duet-input-container.has-chips.has-error.has-focus .duet-input-relative {
   outline-offset: -1px;
   background-color: rgb(255, 240, 243) !important;
@@ -554,6 +562,7 @@ duet-caption:not(:last-of-type) {
   outline-color: rgb(214, 28, 82) !important;
   background: rgb(255, 255, 255) !important;
 }
+.duet-input-container.has-adornment.has-error:hover:not(:disabled):not(.has-focus) .duet-input-relative,
 .duet-input-container.has-chips.has-error:hover:not(:disabled):not(.has-focus) .duet-input-relative {
   outline-offset: -1px;
   background-color: rgb(255, 240, 243) !important;
@@ -561,6 +570,7 @@ duet-caption:not(:last-of-type) {
   outline-width: 2px;
   outline-color: rgb(214, 28, 82) !important;
 }
+.duet-input-container.has-adornment .duet-input-relative,
 .duet-input-container.has-chips .duet-input-relative {
   display: flex;
   flex-direction: row;
@@ -574,6 +584,7 @@ duet-caption:not(:last-of-type) {
   border-radius: 4px;
   transition: border 150ms ease;
 }
+.duet-input-container.has-adornment .duet-input-relative .duet-input,
 .duet-input-container.has-chips .duet-input-relative .duet-input {
   flex-grow: 1;
   flex-basis: 4rem;
@@ -581,11 +592,35 @@ duet-caption:not(:last-of-type) {
   margin-left: 12px !important;
   border-width: 0 !important;
 }
-.duet-input-container.has-chips .duet-input-relative .duet-input:focus, .duet-input-container.has-chips .duet-input-relative .duet-input:hover {
+.duet-input-container.has-adornment .duet-input-relative .duet-input:focus, .duet-input-container.has-adornment .duet-input-relative .duet-input:hover,
+.duet-input-container.has-chips .duet-input-relative .duet-input:focus,
+.duet-input-container.has-chips .duet-input-relative .duet-input:hover {
   outline: none !important;
   border-width: 0 !important;
 }
 
+.duet-input-container.has-adornment .duet-input-relative .duet-input {
+  padding: 12px 14px !important;
+  margin: initial !important;
+}
+.duet-input-container.has-adornment .duet-input-relative .input-adornment {
+  color: rgb(98, 121, 138);
+}
+.duet-input-container.has-adornment .duet-input-relative .input-adornment.prefix {
+  padding-left: 14px;
+}
+.duet-input-container.has-adornment .duet-input-relative .input-adornment.suffix {
+  padding-right: 14px;
+}
+
+.duet-input-container.has-prefix .duet-input-relative .duet-input {
+  padding-left: 8px !important;
+}
+
+.duet-input-container.has-suffix .duet-input-relative .duet-input {
+  padding-right: 8px !important;
+}
+
 .duet-theme-turva .duet-input-icon {
   color: rgb(23, 42, 59);
 }