@duetds/components 10.0.0-alpha.26 → 10.0.0-alpha.28

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

@@ -284,6 +284,10 @@
     top: 310px;
   }
 }
+.duet-hero.duet-hero-campaign ::slotted(.duet-heading), .duet-hero.duet-hero-section ::slotted(.duet-heading) {
+  font-size: inherit !important;
+  color: inherit !important;
+}
 .duet-hero.duet-hero-campaign .duet-hero-text, .duet-hero.duet-hero-section .duet-hero-text {
   width: 100%;
 }
@@ -1813,49 +1817,235 @@ duet-heading + duet-button {
 }
 :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: 48px;
+  border-radius: 24px;
   mask-image: none;
 }
-:host(.duet-theme-turva2) .duet-hero.duet-hero-product .background .background-mask {
-  background-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;
 }
-:host(.duet-theme-turva2) .duet-hero.duet-hero-product .background .brand-shaped-image {
-  border-radius: 26px;
-  mask-image: none;
+@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;
+  }
 }
-:host(.duet-theme-turva2) .duet-hero.duet-hero-product .background .brand-shaped-image::after {
-  position: absolute;
-  bottom: 0;
-  z-index: 1;
+@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%;
-  content: "";
-  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%22530%22%20height%3D%22136%22%20viewBox%3D%220%200%20530%20136%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M530%2018.0108V320.699H0V11.2176C0%202.8484%208.16439%20-2.58266%2015.0467%201.2636C33.0582%2011.2977%2054.6667%2020.0141%2078.875%2027.2525C131.948%2043.1273%20197.512%2051.9149%20265%2051.9149C332.488%2051.9149%20398.061%2043.1273%20451.125%2027.2525C475.333%2020.0052%20496.942%2011.2888%20514.953%201.2547C521.836%20-2.58266%20530%202.8484%20530%2011.2176V18.0108Z%22%20fill%3D%22%23E61740%22%2F%3E%0A%3C%2Fsvg%3E");
-  background-repeat: no-repeat;
-  background-position-y: bottom;
-  background-size: contain;
 }
-:host(.duet-theme-turva2) .duet-hero.duet-hero-product .background .brand-shaped-icon {
+: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;
-}
-:host(.duet-theme-turva2) .duet-hero.duet-hero-content .background .background-mask {
   background-image: none;
 }
-:host(.duet-theme-turva2) .duet-hero.duet-hero-content .brand-shaped-image {
-  border-radius: 26px;
+: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-content .brand-shaped-image::after {
-  position: absolute;
-  bottom: 0;
-  z-index: 1;
+: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%;
-  content: "";
-  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%22530%22%20height%3D%22136%22%20viewBox%3D%220%200%20530%20136%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M530%2018.0108V320.699H0V11.2176C0%202.8484%208.16439%20-2.58266%2015.0467%201.2636C33.0582%2011.2977%2054.6667%2020.0141%2078.875%2027.2525C131.948%2043.1273%20197.512%2051.9149%20265%2051.9149C332.488%2051.9149%20398.061%2043.1273%20451.125%2027.2525C475.333%2020.0052%20496.942%2011.2888%20514.953%201.2547C521.836%20-2.58266%20530%202.8484%20530%2011.2176V18.0108Z%22%20fill%3D%22%23E61740%22%2F%3E%0A%3C%2Fsvg%3E");
-  background-repeat: no-repeat;
-  background-position-y: bottom;
-  background-size: contain;
+  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;
@@ -1866,6 +2056,7 @@ duet-heading + duet-button {
   }
 }
 :host(.duet-theme-turva2) .duet-hero .duet-hero-wrapper {
+  position: static;
   margin-top: 16px;
 }
 @media (min-width: 48em) {

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

@@ -180,13 +180,17 @@ export class DuetHero {
      * Component lifecycle events.
      */
     componentWillLoad() {
+        const headings = "h1, h2, h3, h4, h5, h6";
         inheritGlobalTheme(this);
         this.hasPreHeadingSlot = hasSlot(this.element, "pre-heading");
         this.hasHeadingSlot = hasSlot(this.element, "heading");
         this.hasSubHeadingSlot = hasSlot(this.element, "subheading");
         checkNamedSlotElement(this.element, "pre-heading", "span");
-        checkNamedSlotElement(this.element, "heading", "span");
+        checkNamedSlotElement(this.element, "heading", `span, ${headings}`);
         checkNamedSlotElement(this.element, "subheading", "span");
+        if (this.hasHeadingSlot && getElementsFromNamedSlot(this.element, "heading")[0].matches(headings)) {
+            this.hasHeadingSlotNative = true;
+        }
         this.refresh();
     }
     connectedCallback() {
@@ -270,7 +274,7 @@ export class DuetHero {
                 outlineColor = "color-primary-turva";
             }
         }
-        return (h("div", { key: '050542b6acfc853e803793b7ce454506a9c485d4', role: "region", class: {
+        return (h("div", { key: '2acab1c8b82358799dafa10a59b26c5c4926d9c2', role: "region", class: {
                 "duet-hero": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-has-category-icon": !!this.categoryIcon,
@@ -288,17 +292,17 @@ export class DuetHero {
                 "duet-hero-text-center": (this.textCenter && !this.leftAlign) || campaignOrSection,
                 "duet-hero-left-align": this.leftAlign && !campaignOrSection,
                 "duet-hero-narrow": this.layout === "narrow",
-            }, part: "duet-hero" }, campaignOrSection && this.image && (h("div", { key: 'db9f7d160ebee968dca3e4efead01b0af6288043', class: "background-area" }, h("div", { key: 'c0bf3537b54cc4d8b04b72360be1bc922b887c0d', class: "background-container" }, h("div", { key: '39f9c4466c54b54fce2f8ea33c9163a4ca5a8cf1', class: "background" }, h("img", { key: 'bc5aefeac085a2f758668ec48b3ffd4d313b43a5', class: `${imageSizeIsCover ? "cover" : ""} ${imagePositionIsCenter ? "center" : ""}`, src: this.image, alt: "", role: "presentation" })), h("div", { key: '296411aa792beefc76a425f5b39f16f39486c5c2', class: "brand-shape" })))), this.variation === "product" && this.image && (h("div", { key: '7f53ee027d3b917a9bc5284dbb152ae96ab034ad', class: { "background-area": true, [this.layout]: true } }, h("div", { key: 'e5119c084fc6b292252a111c4acb3e2ea6c6cd77', class: { "background-container": true, [this.layout]: true } }, h("div", { key: '3faf62ed852d07e8458c379a06ed3cfd3ca3fafb', class: { background: true, [this.layout]: true } }, h("div", { key: '43b7df5d771099f7c819c23c820b18fb053b67f0', class: { "background-mask": true, [this.layout]: true } }), this.theme !== "turva" && h("div", { key: '3ac9ab64a699f79eafe749c027383f7753437805', class: { "brand-shape": true, [this.layout]: true } }), h("div", { key: '2bd54c40138a7a732cf0bae9a5b57137a3cfded4', class: { "brand-shaped-image": true, [this.layout]: true } }, h("div", { key: '63a9404b8e42499bcd15bacdca4658931c49fbcc', class: { "brand-shaped-image-wrapper": true, [this.layout]: true } }, h("div", { key: '038c455f20502c4600208d6a4e31a8dabd9b7799', class: { "brand-shaped-image-bg": true, [this.layout]: true }, style: styles }))), this.categoryIcon && (h("div", { key: '9b5e7df86df015dbabfaff2fc4f37c1c54f82cd3', class: { "brand-shaped-icon": true, [this.layout]: true } }, h("duet-icon", { key: 'd9ab558d532f77eca798e2998ba5cd592881f03a', class: { [this.layout]: true }, background: "none", name: this.categoryIcon, margin: "none", size: "auto", responsive: false }))))))), this.variation === "content" && this.image && (h("div", { key: 'fe41770dc2aa046b1f7eeb76ac8d77dd0ff964cf', class: "background-area" }, h("div", { key: 'a1821e7ecd479f6d5e78d30aa60b9eaca214de30', class: "background" }, h("div", { key: '37093f57801077d47fc4da19453b47979039d1f5', class: "background-mask" }), this.theme !== "turva" && h("div", { key: '6c2ca91302a3ddccfc3f61043d660d5c86ef2bd6', class: "brand-shape" }), h("div", { key: '5e862b201459878273988077df6fe7d10abcbf55', class: "brand-shaped-image" }, h("div", { key: '915e7aed1c7561bb280156e72b7b03fc6f711c81', class: "brand-shaped-image-wrapper" }, h("div", { key: 'abcbf26a40434f3470ef7576b3f342dcd6e75081', class: "brand-shaped-image-bg", style: styles })))))), h("div", { key: '8b81e3958219408f71b8c7a53b325097f9d95c0c', class: { "duet-hero-wrapper": true, [this.layout]: true } }, this.image && this.variation === "image" && (h("div", { key: 'cba83e5423eae68e909b4ca76af31aa2ad621b0b', class: "duet-hero-image-mask" }, h("div", { key: '7b6f261e94a3233c4254a729c94196e0c6f27324', class: "duet-hero-image-wrapper" }, h("div", { key: '7e8b9202b8ffe7b6e5f91b432ec68dd3272789bd', class: "duet-hero-image", style: styles })))), (this.variation === "gray" || this.variation === "light" || this.variation === "minimal") &&
-            this.processedBack && (h("div", { key: '2623bba361537fb8e0c7103ad62b76cd25e33388', class: "duet-hero-back" }, h("duet-button", { key: '1e4c727a46d6554826d3e30653244c1a51162b92', 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: '6eaf6fdf31c583d1bf46b6e0a17e5f59fd9bef16', class: "background-area" }, h("div", { key: 'cffc1963ec6f4f330a45b16ef8597fd0406810ff', class: "background-container" }, h("div", { key: '5d5a8bbbe8acf1873aac92bb8958ce89645586b6', class: "background" }, h("img", { key: '275067a598c6e3698a173ae744c78a3561cf9860', class: `${imageSizeIsCover ? "cover" : ""} ${imagePositionIsCenter ? "center" : ""}`, src: this.image, alt: "", role: "presentation" })), h("div", { key: '3d2d60e4424fd538cf25286506898ca36ead0e25', class: "brand-shape" })))), this.variation === "product" && this.image && (h("div", { key: 'e67359431f573b15907e91a3849e85dd68a2b644', class: { "background-area": true, [this.layout]: true } }, h("div", { key: '397e5301fc2b4a121e3c0a2de7e2370004208035', class: { "background-container": true, [this.layout]: true } }, h("div", { key: '078e49f6846a0b61d1bbb11928c7c1b4f0969237', class: { background: true, [this.layout]: true } }, h("div", { key: '2daa9135a889476521e74ed6aa803bbace92dd6d', class: { "background-mask": true, [this.layout]: true } }), this.theme !== "turva" && h("div", { key: 'ae26a5feaebc0b7911990d0b9c30057856721dac', class: { "brand-shape": true, [this.layout]: true } }), h("div", { key: 'f419c7247da65238eebad9f99b75518c2c2b8ada', class: { "brand-shaped-image": true, [this.layout]: true } }, h("div", { key: '68ccb4c3fe4fd2440d6ff7e335df5d2846b7aa85', class: { "brand-shaped-image-wrapper": true, [this.layout]: true } }, h("div", { key: '5f7b2f8284d75a99cedbd8222a64fa85da3bbba0', class: { "brand-shaped-image-bg": true, [this.layout]: true }, style: styles }))), this.categoryIcon && (h("div", { key: 'a5dd4a3ddf8496bb7410510b3f7dd0b0a25bb669', class: { "brand-shaped-icon": true, [this.layout]: true } }, h("duet-icon", { key: '1294469ae73fd7152468c7511115df26ade001c6', class: { [this.layout]: true }, background: "none", name: this.categoryIcon, margin: "none", size: "auto", responsive: false }))))))), this.variation === "content" && this.image && (h("div", { key: '94e722b437acc481d8850afa5a427d663db361df', class: "background-area" }, h("div", { key: '24695ae05a4f5e71286485ca9de320a188a3f750', class: "background" }, h("div", { key: '49ff7ba2e5bff31c66ff1a8e25089d93d04dbe79', class: "background-mask" }), this.theme !== "turva" && h("div", { key: '220556ff22eea0a4c635c9848d8b8819bc6efd1f', class: "brand-shape" }), h("div", { key: '378d01fdda36431c580f66a784648efb5560b686', class: "brand-shaped-image" }, h("div", { key: '1fc789aafa6956bd228968caf0db6dff147114dc', class: "brand-shaped-image-wrapper" }, h("div", { key: '7788059d7f3affaec40ab2ae5990657f991dd48c', class: "brand-shaped-image-bg", style: styles })))))), h("div", { key: 'af608366dc29bfccac27e761e93e75c0b7bfec2c', class: { "duet-hero-wrapper": true, [this.layout]: true } }, this.image && this.variation === "image" && (h("div", { key: 'afe18dd2b7e20333e45e00e5c5a4a966e35660f9', class: "duet-hero-image-mask" }, h("div", { key: 'f4ab5d687e3907148e0b4f0d1363576cd2b566e2', class: "duet-hero-image-wrapper" }, h("div", { key: '593e3142b5e6452188ca524610bd213eeea25c3f', class: "duet-hero-image", style: styles })))), (this.variation === "gray" || this.variation === "light" || this.variation === "minimal") &&
+            this.processedBack && (h("div", { key: '6ef1cb9203c2a2e553ecb1765a912929d9db9846', class: "duet-hero-back" }, h("duet-button", { key: '88c8ae092e2822124387ea072d6b367d52192100', 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: 'b3222a455e2be4304240b213ec34ff9a8254511d', class: { "duet-hero-icon": true, "duet-hero-icon-has-heading": this.preHeading !== "" }, size: "x-large", background: this.categoryIconColor, name: this.categoryIcon })), h("div", { key: '1f369768e19771c9d962558704707072c355577f', class: { "duet-hero-text": true }, part: "duet-hero-text" }, (this.preHeading || this.hasPreHeadingSlot) && (h("duet-paragraph", { key: '319f24f87d1adfa4840e1b3c4adfa9e5a4efdbcc', 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: 'cab3fd5560e97bdaa5e7da9833bebdb1b58c77aa', name: "badge" }), (this.heading || this.hasHeadingSlot) && (h("duet-heading", { key: '070825e4bae09477947bc840a07df3a49f72cda3', theme: this.theme, level: this.level, class: { "duet-hero-heading": true, "duet-hero-heading-has-pre": this.preHeading !== "" }, color: headingColor, visualLevel: headingVisualLevel, margin: campaignOrSection ? "none" : "auto", accessibleLabel: this.getAccessibleHeading() }, this.heading ? this.heading : h("slot", { name: "heading" }))), campaignOrSection && this.hasSubHeadingSlot && (h("duet-heading", { key: '593ff167e8e2027765467078c3a8e7fb6478a0f2', theme: this.theme, level: this.subHeadingLevel, class: { "duet-hero-subheading": true }, color: this.theme === "turva" ? "secondary-turva" : "secondary", visualLevel: "h2" }, h("slot", { key: 'b0dfe6f310419cd5129b6419c2f98fcee3510439', name: "subheading" }))), this.description && (h("duet-paragraph", { key: 'e4f7966e4118c83e518b170818e0a07b8bff8f0c', theme: this.theme, color: textColor, variation: "intro" }, this.description)), (this.variation === "gray" || this.variation === "minimal") && this.processedListItems && (h("duet-list", { key: 'c50112688f95b19886481c47f6158f9ce5a73dc0', 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: '1d9a44bd408aad6ed6f7571660b6284a2622c9ee', 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: '6409f66cd66a04c3720b95444ca4354e1927bf92' })), (this.variation === "gray" || this.variation === "minimal") && this.processedActions && (h("div", { key: '8103af21642ae0c19bb00cf2918afe83bca217ac', 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: '84ee8012288a996c6f8e8784ec4f11cfbd1b8ae0', class: { "duet-hero-icon": true, "duet-hero-icon-has-heading": this.preHeading !== "" }, size: "x-large", background: this.categoryIconColor, name: this.categoryIcon })), h("div", { key: 'f01a0715385faba12c729803e38c98d63081afbb', class: { "duet-hero-text": true }, part: "duet-hero-text" }, (this.preHeading || this.hasPreHeadingSlot) && (h("duet-paragraph", { key: 'cadb1a1a8c68ef87c94a91ccb04055e978df8ef6', 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: 'a7fc32e5f238d1cd628753e0f20a4afd1e5e0eb9', name: "badge" }), (this.heading || this.hasHeadingSlot) && (h("duet-heading", { key: 'e3275e3977ba1e6900478aa53175f2e2e4e40d04', 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: 'fe9b5e29d6ae66ad144b44c8e148bf2094ea90af', theme: this.theme, level: this.subHeadingLevel, class: { "duet-hero-subheading": true }, color: this.theme === "turva" ? "secondary-turva" : "secondary", visualLevel: "h2" }, h("slot", { key: '32b4475fd032d945cb71f8a3bbf1853be66e2e22', name: "subheading" }))), this.description && (h("duet-paragraph", { key: '0524a2070a96b01316a972650024cea29f21e414', theme: this.theme, color: textColor, variation: "intro" }, this.description)), (this.variation === "gray" || this.variation === "minimal") && this.processedListItems && (h("duet-list", { key: '5a63ea9d07f59ea32ba37a1d0347b8eb38f25d6b', 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: 'e579589e4189bb1f3f07c7557fa99ce2223dbe40', 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: '516589bcc702ae95a21b1dd6c3204f678a658a0d' })), (this.variation === "gray" || this.variation === "minimal") && this.processedActions && (h("div", { key: 'd7b178afe535335a3c51949d7e8f3546d3d434e3', class: "duet-hero-links" }, this.processedActions.map(item => (h("a", { class: "duet-hero-link", href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleClick(event, item) }, h("div", { class: "duet-hero-action-icon" }, h("duet-icon", { size: "small", margin: "none", name: item.icon, color: "currentColor", outline: outlineColor })), h("span", null, item.label), item.external && h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), item.external && (h("div", { class: "duet-hero-action-arrow" }, h("duet-icon", { icon: newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" })))))))), this.image &&
             this.variation !== "image" &&
             !campaignOrSection &&
             this.variation !== "product" &&
-            this.variation !== "content" && h("div", { key: '2e854294f691337a3683daa831b498bdcdf56945', class: "duet-hero-image", style: styles }), h("slot", { key: '21cb460439eddf5f9a251722b9c6c3b3864a701d', name: "bottom" }))));
+            this.variation !== "content" && h("div", { key: '24764772d259abadc2405cc658c07c9b255a48e4', class: "duet-hero-image", style: styles }), h("slot", { key: 'f8209505395340f3f3f2cd2d8d7d3e7d2c9a8740', name: "bottom" }))));
     }
     static get is() { return "duet-hero"; }
     static get encapsulation() { return "shadow"; }

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: '6b2ec509f1a717b623bf627d7451c95e5c1af8be', 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: 'b3fb3d53f1c096a7072c6c85488d191c4bc61880', "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: 'ff22fbc4a55860c2ed936b3b3037a7a09af46d8d', "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,