@duetds/components 9.14.0 → 9.16.0

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

@@ -43,6 +43,18 @@ export class DuetBanner {
                 }
             }
         };
+        this.isTurva2 = () => { var _a; return (_a = document.documentElement.attributes.getNamedItem("class")) === null || _a === void 0 ? void 0 : _a.value.includes("duet-theme-turva2"); };
+        this.getBackgroundColor = () => {
+            if (this.theme === "turva" && this.backgroundColor === "primary-lighter") {
+                if (this.isTurva2()) {
+                    return "#fdf7f2"; // turva-nude-00 - not yet available as token
+                }
+                else {
+                    return getColorByName("gray-lighter", this.theme);
+                }
+            }
+            return getColorByName(this.backgroundColor, this.theme);
+        };
         this.currentSize = undefined;
         this.theme = "";
         this.margin = "auto";
@@ -81,8 +93,7 @@ export class DuetBanner {
      * Always the last one of the class.
      */
     render() {
-        const backgroundColorTemp = this.theme === "turva" && this.backgroundColor === "primary-lighter" ? "gray-lighter" : this.backgroundColor;
-        const backgroundColor = getColorByName(backgroundColorTemp, this.theme);
+        const backgroundColor = this.getBackgroundColor();
         const color = getColorByName(this.textColor, this.theme);
         const bannerStyles = {
             backgroundColor,
@@ -91,14 +102,14 @@ export class DuetBanner {
             img: { src: this.image, alt: "", loading: "lazy", class: "image", role: "presentation" },
             sources: parsePossibleJSON(this.sources),
         };
-        return (h(Host, { key: '12cea619c3a29693b7bbb7189962468eee715f68', class: { "duet-m-0": this.margin === "none" } }, h("aside", { key: 'b4e70162ea52e299c8cc3481961e1354f7a348d0', class: {
+        return (h(Host, { key: 'c8e3140dea20791061866feb62588c5a5491f277', class: { "duet-m-0": this.margin === "none" } }, h("aside", { key: '7e6834ed607505ee35d026a71d3406280644856b', class: {
                 "duet-banner": true,
                 "duet-theme-turva": this.theme === "turva",
                 [this.currentSize]: true,
                 "size-medium": this.size === "medium" || this.size === "large",
                 "size-large": this.size === "large",
                 "no-image": !this.image,
-            }, style: bannerStyles }, h("div", { key: '77b6658e115f6c6ad322e4d81607a842de28ad7f', class: "visual" }, h("div", { key: '1140037769c9615f7fc233d5ef7db5e93e5b1434', class: "image-container" }, this.image && h(DuetPicture, Object.assign({ key: '63b777ee272d5fe8c7df6f6a8bff7b84a44c9dff' }, pictureSource))), 1 > 2 && this.icon && (h("duet-icon", { key: '655da70b348510e6a4686a2a51af635bcd3b1572', theme: this.theme, class: "icon", name: this.icon, shape: "brand", size: this.currentSize === "large" ? "xx-large" : "x-large", color: this.iconColor, background: this.iconBackgroundColor, "background-rotation": "7", "background-opacity": "0.85", margin: "none" })), h("div", { key: '5af78573b362552f7bdc061be9bed68373255aae', style: bannerStyles, class: "brand-shape" })), h("div", { key: '99f371a78ff9d7e85cff37c9c5eb2d49f51e7aaa', class: "content" }, this.hasHeadingSlot && (h("div", { key: '8684e9cbd15cd42e8bce73271543ce7fc91b63fc', class: "heading" }, h("duet-heading", { key: '2d3348662100fc98f088ac9dee4a5a38681ce9d7', theme: this.theme, level: this.headingLevel, "visual-level": this.currentSize === "large" ? "h2" : "h3", "fixed-size": true, margin: "none", color: postfixTheme(this.textColor, this.theme) }, h("span", { key: '692332080a527df5d5ed15773ef34efbda983f15' }, h("slot", { key: '8a0a0e72edfcf4c55f66b8565fe90b948e86c4bc', name: "heading" }))))), this.hasDescriptionSlot && (h("div", { key: 'daba4eb6a51dc590ea3591132b8cddebb5cf9756', class: "description", style: { color } }, h("slot", { key: '5d8e3bc1324a170bf266b89e8815896c470a512a', name: "description" }))), this.hasActionSlot && (h("div", { key: 'c9d0e0f700ef91081cad82c8edb5db69ee38ef56', class: "action" }, h("slot", { key: 'e72dfb579efb7ad822de3f59d3d828fffd3ef015', name: "action" })))))));
+            }, style: bannerStyles }, h("div", { key: 'fc4dc8649243b6a63368328de6eb4e50ed176a6b', class: "visual" }, h("div", { key: '37384ee4753623f1be3281d984a0bb838ed73f58', class: "image-container" }, this.image && h(DuetPicture, Object.assign({ key: '20843c2967598ea78d178de08e35e9ac6b913e2d' }, pictureSource))), 1 > 2 && this.icon && (h("duet-icon", { key: '5004d77927bfb893d67503a452dea3e7cf74f8d3', theme: this.theme, class: "icon", name: this.icon, shape: "brand", size: this.currentSize === "large" ? "xx-large" : "x-large", color: this.iconColor, background: this.iconBackgroundColor, "background-rotation": "7", "background-opacity": "0.85", margin: "none" })), h("div", { key: 'c7a8ea6e28e80f6b10f37d3d9ae649e72362d59b', style: bannerStyles, class: "brand-shape" })), h("div", { key: '1cf3029099015dd0ff396e9f9c94075c3eb5b70f', class: "content" }, this.hasHeadingSlot && (h("div", { key: 'bd471f924ebdcd3a08f9aed0ac669f46188a5452', class: "heading" }, h("duet-heading", { key: 'f8a595ae3eb8a76b5f2ffb245912d8dea6221873', theme: this.theme, level: this.headingLevel, "visual-level": this.currentSize === "large" ? "h2" : "h3", "fixed-size": true, margin: "none", color: postfixTheme(this.textColor, this.theme) }, h("span", { key: 'cc6134c267fdc0401198afdff0a75776f091db58' }, h("slot", { key: 'bdfc9e47dfe979c9355b99379533e81e36d55ac3', name: "heading" }))))), this.hasDescriptionSlot && (h("div", { key: '38b1971548ed44d7b5c02c5eb6feb85625880f09', class: "description", style: { color } }, h("slot", { key: '2b8ed684179262322589d0e8702f3bd823e7614f', name: "description" }))), this.hasActionSlot && (h("div", { key: '75e5f3ba7ef02266554854f6963e4c471ca0fa4f', class: "action" }, h("slot", { key: '1c9affe286d41ac0266758465f0d574591e38b2c', name: "action" })))))));
     }
     static get is() { return "duet-banner"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-breadcrumbs/duet-breadcrumb.js

@@ -42,14 +42,14 @@ export class DuetBreadcrumb {
      */
     render() {
         var _a;
-        return (h(Host, { key: 'c2bbd3a09d833237865fbbea918ce71e6e945708', role: "listitem" }, h("div", { key: '1ef1271eba23e853ecd07dca639a1dc249a9047a', class: "container" }, this.icon === "arrow-right-small-icon" && (h("duet-icon", { key: '953679a489bc876ab43d44486de61cbb9f5237aa', class: "duet-breadrumbs-arrow", size: "auto", icon: arrowRightSmallIcon.svg, margin: "none", color: "currentColor" })), h("a", { key: '305807ceab521e988a065fc7f0dfeba105afd65f', class: {
+        return (h(Host, { key: 'a9f1782d98a790e469a78d27b5eb79ba277578e2', role: "listitem" }, h("div", { key: '0044cdcf0d7b79d76e4b86d075d318485ff6cb5d', class: "container" }, this.icon === "arrow-right-small-icon" && (h("duet-icon", { key: '6c6be2a00e8fdbbcd15a99b9535066864cca20df', class: "duet-breadrumbs-arrow", size: "auto", icon: arrowRightSmallIcon.svg, margin: "none", color: "currentColor" })), h("a", { key: '438e3d0d02eb4abce710c1ca3a88a28efc69ffca', class: {
                 "duet-breadcrumb": true,
                 "duet-theme-turva": this.theme === "turva",
             }, href: this.href ? this.href : undefined, "aria-label": `${!this.href ? `${getLocaleString(this.currentCrumb)} ` : ""}${(_a = this.accessibleLabel) !== null && _a !== void 0 ? _a : this.element.innerHTML}`, role: "link" }, this.icon !== "arrow-right-small-icon" &&
             this.icon && [
-            h("duet-icon", { key: '469e852366ff1d5dc79ef285eb53cff133a4b86a', size: this.iconSize, name: this.icon, margin: "none", color: "currentColor" }),
-            this.hasSlottedContent && h("duet-spacer", { key: 'eff56162ec750f1b4b1053eefd39a3096e6535a1', size: "x-small", direction: "horizontal" }),
-        ], h("slot", { key: '08865bb50c3bfc475427e56afb06baa5796b9e43' })))));
+            h("duet-icon", { key: 'fd3385a6710d02e06c3b5f7cc6718c98a8104989', size: this.iconSize, name: this.icon, margin: "none", color: "currentColor" }),
+            this.hasSlottedContent && h("duet-spacer", { key: '5a280907832a4d1f0577469fc402f44a7979c376', size: "x-small", direction: "horizontal" }),
+        ], h("slot", { key: 'b1215c5fd3872c3498378fd1f625e177005fb3fc' })))));
     }
     static get is() { return "duet-breadcrumb"; }
     static get encapsulation() { return "shadow"; }

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

@@ -53,11 +53,11 @@ export class DuetBreadcrumbs {
      */
     render() {
         const color = getColorByName(this.color);
-        return (h(Host, { key: 'de5bf9664c5f5ab572fce45bc993713510474cb0' }, h("nav", { key: 'ffd74db147e85616f7e10428bfe537179b168e58', "aria-label": this.breadcrumbsAriaLabel, class: {
+        return (h(Host, { key: '353dc54191f3da65ebc9bbba39c9904a23ac31d7' }, h("nav", { key: '98ea70d7dba93ceda61bba1c572dc690bbb3aab9', "aria-label": this.breadcrumbsAriaLabel, class: {
                 "duet-breadcrumbs": true,
                 "duet-theme-turva": this.theme === "turva",
                 [this.variation]: true,
-            } }, h("div", { key: '06d6391d9154c82c9ba8e8c3c4c098f40ea862bc', class: "container" }, h("div", { key: '6e14f970ac38086d9874b6a5fb68c43036891658', role: "list", class: "list", style: { color } }, h("slot", { key: '8d97e7c891b2b78f0efff2e4993ef71a831e062d' })), h("div", { key: '915ea715ad6bbdf67320744cd8e2df75af1a082f', class: "bottom-border bottom-border--container" })), h("div", { key: '8d416d6fca5363df5bd6d1d82b1aad4274588cd8', class: "bottom-border bottom-border--nav" }))));
+            } }, h("div", { key: 'affe18004c3a9fbdb8f820d78b3bcb08cc9bb6f3', class: "container" }, h("div", { key: 'f90581d901c83261650c3c887f332888a160858a', role: "list", class: "list", style: { color } }, h("slot", { key: '55867215483c5114bd599015847cd0ecafd7c456' })), h("div", { key: 'cbbc4775098ce98422265fbce5632be69ed916f9', class: "bottom-border bottom-border--container" })), h("div", { key: '7463cda762ef2acdb4437c88f030ee7bfcd34864', class: "bottom-border bottom-border--nav" }))));
     }
     static get is() { return "duet-breadcrumbs"; }
     static get encapsulation() { return "shadow"; }

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

@@ -31,11 +31,11 @@ export class DuetCallout {
     <path d="M6.6591 0.557547L9.2031 2.33355C7.0911 5.21355 6.1311 7.18155 5.8431 8.90955C7.4751 9.34155 8.7231 10.5415 8.7231 12.6535C8.7231 15.2935 6.9471 16.9255 4.6431 16.9255C2.0511 16.9255 0.227096 15.1975 0.227096 12.2695C0.227096 8.28555 2.3871 4.34955 6.6591 0.557547ZM17.9871 8.95755C19.6191 9.34155 20.8671 10.5415 20.8671 12.6535C20.8671 15.2935 19.1391 16.9255 16.8351 16.9255C14.2431 16.9255 12.4191 15.1975 12.4191 12.2695C12.4191 8.28555 14.5791 4.34955 18.8511 0.557547L21.3951 2.33355C19.2351 5.21355 18.3231 7.18155 17.9871 8.95755Z"/>
     </svg>
     `;
-        return (h(Host, { key: '85f99d167ac281ddceb8a8a69da07d854be973f7' }, h("div", { key: '14ccbc1c5d5f56368fefdcfa8ac2b48f46c3e0b7', class: {
+        return (h(Host, { key: 'cce1d247cffb8bd198d58740a8755b5905f8f321' }, h("div", { key: 'a03c534b9c6ba8bed4bcc16b1ccbc0f100219bd3', class: {
                 "duet-callout": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-m-0": this.margin === "none",
-            } }, h("figure", { key: 'fe2a9c932a02907cda19e0f258e36a1c5a83a1bc', class: "container" }, h("duet-icon", { key: 'f9ddcf0c22344b4490cd3433e4d85e644a8b4e63', class: "callout-icon", shape: "brand-rotated", background: "primary-lighter", "background-opacity": "0.75", "background-rotation": this.theme === "turva" ? "0" : "7", color: "secondary", icon: icon, size: "auto", margin: "none", theme: this.theme }), h("blockquote", { key: '11b22131f070c316b6cadd833f0fb5d12bf0ed4a' }, h("slot", { key: '6448a4a8b760c12a583b4454c183f32c26a8e4cf' })), this.hasAuthorSlot && (h("figcaption", { key: '3d98ce3b4e9a1d81ba99d1c8cbb38eacc91bb2d0', class: "author" }, h("span", { key: '9a8f0ab6cbeba79793fbc1926924e4d4acc3cf5b' }, "\u2014 "), h("slot", { key: '928a1113e8f44b3f6439a9ce1ec5f96771b95270', name: "author" })))))));
+            } }, h("figure", { key: 'f085eed2d1b58950d4c208a845e412edad1deb4c', class: "container" }, h("duet-icon", { key: '50c166c27467e4ec8b0dbcd82466c9dcc33ceeaa', class: "callout-icon", shape: "brand-rotated", background: "primary-lighter", "background-opacity": "0.75", "background-rotation": this.theme === "turva" ? "0" : "7", color: "secondary", icon: icon, size: "auto", margin: "none", theme: this.theme }), h("blockquote", { key: 'ba44180d41f337b19561e2af2e47451481c82f09' }, h("slot", { key: '9366ad783cc9af7d9a21e91b0fc9570c039a1a69' })), this.hasAuthorSlot && (h("figcaption", { key: '8fa76f3b5cf65e1ce55f97dcb23ce8b72d20e8be', class: "author" }, h("span", { key: '5f26224b4abc476e96d80f321cd5b0c38c9cdf13' }, "\u2014 "), h("slot", { key: '8b3f9ac4cb7dacf68336ce555e4ccdf2cbe8b8fa', name: "author" })))))));
     }
     static get is() { return "duet-callout"; }
     static get encapsulation() { return "shadow"; }

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

@@ -34,6 +34,15 @@
   margin: 0 !important;
 }
 
+:host {
+  --duet-card-border-radius: 12px;
+}
+@media (min-width: 36em) {
+  :host {
+    --duet-card-border-radius: 16px;
+  }
+}
+
 .duet-card {
   padding: 20px !important;
   position: relative;
@@ -47,7 +56,7 @@
   line-height: 1.5;
   color: rgb(8, 42, 77);
   text-decoration: none;
-  border-radius: 4px;
+  border-radius: var(--duet-card-border-radius);
   box-shadow: 0 2px 6px 0 rgba(0, 41, 77, 0.07), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07);
 }
 .duet-card.duet-p-0 {
@@ -234,7 +243,7 @@
   font-weight: 800;
   color: rgb(8, 42, 77);
   border-bottom: 1px solid rgb(212, 223, 229);
-  border-radius: 4px 4px 0 0;
+  border-radius: var(--duet-card-border-radius) var(--duet-card-border-radius) 0 0;
 }
 @media (min-width: 36em) {
   .duet-card-heading {
@@ -265,7 +274,7 @@
   outline: 0;
 }
 :host(.user-is-tabbing) .duet-card-heading.duet-card-heading--collapsible button:focus {
-  border-radius: 4px;
+  border-radius: var(--duet-card-border-radius);
   box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
 }
 :host(.user-is-tabbing) .duet-theme-turva .duet-card-heading.duet-card-heading--collapsible button:focus {

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

@@ -43,6 +43,7 @@ export class DuetCard {
         this.headingLevel = "h2";
         this.headingBackground = undefined;
         this.icon = undefined;
+        this.iconColor = "currentColor";
         this.image = undefined;
         this.background = "gray-lightest";
         this.padding = "small";
@@ -74,7 +75,7 @@ export class DuetCard {
         const headingStyles = {
             backgroundColor: getColorByName(this.headingBackground),
         };
-        const headingContent = (h(Fragment, null, h("div", { class: "duet-card-heading-grid" }, this.icon && (h(Fragment, null, h("duet-icon", { class: "duet-card-icon", name: this.icon, size: "medium", margin: "none", color: "currentColor" }), h("duet-spacer", { direction: "horizontal", size: "small" }))), h("div", { class: "duet-card-heading-text" }, this.heading ? this.heading : h("slot", { name: "heading" })), this.secondaryHeading && (h(Fragment, null, h("duet-spacer", { direction: "horizontal", size: "small" }), h("div", { class: "duet-card-secondary-heading duet-card-secondary-heading--inline" }, this.secondaryHeading))), this.collapsible && (h(Fragment, null, h("duet-spacer", { direction: "horizontal", size: "small" }), h("duet-icon", { class: "duet-card-caret", icon: arrowUpIcon.svg, size: "small", margin: "none", color: "currentColor" })))), this.secondaryHeading && (h("div", { class: "duet-card-secondary-heading duet-card-secondary-heading--new-line" }, this.secondaryHeading)), h("slot", { name: "below-heading" })));
+        const headingContent = (h(Fragment, null, h("div", { class: "duet-card-heading-grid" }, this.icon && (h(Fragment, null, h("duet-icon", { class: "duet-card-icon", name: this.icon, size: "medium", margin: "none", color: this.iconColor }), h("duet-spacer", { direction: "horizontal", size: "small" }))), h("div", { class: "duet-card-heading-text" }, this.heading ? this.heading : h("slot", { name: "heading" })), this.secondaryHeading && (h(Fragment, null, h("duet-spacer", { direction: "horizontal", size: "small" }), h("div", { class: "duet-card-secondary-heading duet-card-secondary-heading--inline" }, this.secondaryHeading))), this.collapsible && (h(Fragment, null, h("duet-spacer", { direction: "horizontal", size: "small" }), h("duet-icon", { class: "duet-card-caret", icon: arrowUpIcon.svg, size: "small", margin: "none", color: "currentColor" })))), this.secondaryHeading && (h("div", { class: "duet-card-secondary-heading duet-card-secondary-heading--new-line" }, this.secondaryHeading)), h("slot", { name: "below-heading" })));
         if (this.collapsible) {
             const ariaLabel = (_a = getElementsFromNamedSlot(this.element, "heading")) === null || _a === void 0 ? void 0 : _a.map(e => e.textContent).join(" ");
             return (h(HeadingTag, { style: headingStyles, class: "duet-card-heading duet-card-heading--collapsible", onClick: this.togglePanel, onKeyDown: this.handleKeyDown }, h("button", { type: "button", "aria-controls": this.cardId, "aria-expanded": this.open ? "true" : "false", "aria-label": ariaLabel }, headingContent)));
@@ -102,10 +103,10 @@ export class DuetCard {
         const styles = {
             backgroundColor: getColorByName(this.background),
         };
-        return (h(Host, { key: '611705991716b0c002889bf3a9e980f8da1d95f0', class: {
+        return (h(Host, { key: 'b229fd28e5e5058ba357db373f25c9de68dc2694', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-card-info": this.variation === "info",
-            } }, h(TagName, { key: '89e99da5b6adc642345ba6f7a21c7081b9d4e9f3', href: this.url, style: styles, ref: card => (this.nativeCard = card), "aria-label": this.accessibleLabel, class: {
+            } }, h(TagName, { key: 'b80082cae6d0e4d564bc1eca68f57749b6975e0e', href: this.url, style: styles, ref: card => (this.nativeCard = card), "aria-label": this.accessibleLabel, class: {
                 "duet-card": true,
                 [this.padding]: true,
                 [this.variation]: true,
@@ -115,7 +116,7 @@ export class DuetCard {
                 "duet-card-has-bg": this.background !== "gray-lightest",
                 "duet-card-has-icon": !!this.icon,
                 "duet-card-collapsed": this.collapsible && !this.open,
-            } }, this.image && (h("div", { key: '0aa60ed3e1bebc94ee7842d3982256c9373aa516', class: "duet-card-image-mask" }, h("img", { key: '84e7c1f6a0b6c9132ec82041fad87cc4577d6b1e', src: this.image, class: "duet-card-image", loading: "lazy", alt: "", "aria-hidden": "true" }))), (this.heading || this.hasHeadingSlot) && this.renderHeading(), h("div", { key: 'f86cc5808fdc33c29d5c1aeaa20de6b840b9bb87', class: "duet-card-content", id: this.cardId }, h("slot", { key: '5fb3cbdad3362c23720c00b1cc3a37c6e7c0df7a' }), this.hasFooter && (h("div", { key: '469c322c7f5b971194563825844cd26f854f7a4d', class: "duet-card-footer" }, h("slot", { key: '8a72444bea6b916c253e8aa87967046338e690ee', name: "footer" })))))));
+            } }, this.image && (h("div", { key: 'c4c9c8772d432e52fb78f2bf0a457d4a026d6b3a', class: "duet-card-image-mask" }, h("img", { key: '828ed65b312a0e50257adfa39f25307b13e7d51a', src: this.image, class: "duet-card-image", loading: "lazy", alt: "", "aria-hidden": "true" }))), (this.heading || this.hasHeadingSlot) && this.renderHeading(), h("div", { key: '081d59770bc88f9b7bd2a9b25d0bf905ea0d141b', class: "duet-card-content", id: this.cardId }, h("slot", { key: 'ad92895c2eea7a7697bd4924165656e72ee9b1da' }), this.hasFooter && (h("div", { key: '9a920473b4242e87a36032511f982b3e890df463', class: "duet-card-footer" }, h("slot", { key: '41350a63089d579579bca4454a1fcbc27a60b445', name: "footer" })))))));
     }
     static get is() { return "duet-card"; }
     static get encapsulation() { return "shadow"; }
@@ -332,6 +333,32 @@ export class DuetCard {
                 "attribute": "icon",
                 "reflect": false
             },
+            "iconColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetColor",
+                    "resolved": "string",
+                    "references": {
+                        "DuetColor": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom color to be used for the icon, as a design token entered in camelCase\nor kebab-case. Example: \"color-primary\". This property can also be set to\n\"currentColor\"."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "icon-color",
+                "reflect": true,
+                "defaultValue": "\"currentColor\""
+            },
             "image": {
                 "type": "string",
                 "mutable": false,

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

@@ -188,11 +188,11 @@
   transform: scaleX(1);
 }
 .duet-chip-container.duet-chip-filter-checked.duet-theme-turva, .duet-chip-container.duet-chip-radio-checked.duet-theme-turva {
-  background: rgb(245, 247, 250);
+  background: rgb(255, 241, 241);
   border-color: rgb(198, 12, 48);
 }
 .duet-chip-container.duet-chip-filter-checked.duet-theme-turva:hover, .duet-chip-container.duet-chip-radio-checked.duet-theme-turva:hover {
-  background: rgb(222, 224, 228);
+  background: rgb(255, 213, 215);
 }
 .duet-chip-container .duet-chip-popup-disclosure {
   padding-right: 4.5px;
@@ -206,7 +206,7 @@
   border-color: rgb(240, 247, 250);
 }
 .duet-chip-container.duet-chip-filter-popup-open.duet-theme-turva {
-  background: rgb(245, 247, 250);
+  background: rgb(255, 241, 241);
   border-color: rgb(245, 247, 250);
 }
 .duet-chip-container.duet-chip-filter-popup-open .duet-chip-popup-disclosure duet-icon {
@@ -328,14 +328,14 @@
   border-color: #e61740;
 }
 :host(.duet-theme-turva2) .duet-chip-container.duet-theme-turva.duet-chip-filter-checked, :host(.duet-theme-turva2) .duet-chip-container.duet-theme-turva.duet-chip-radio-checked {
-  background: #fbe1d1;
+  background: #fdf7f2;
   border-color: #e61740;
 }
 :host(.duet-theme-turva2) .duet-chip-container.duet-theme-turva.duet-chip-filter-checked:hover, :host(.duet-theme-turva2) .duet-chip-container.duet-theme-turva.duet-chip-radio-checked:hover {
-  background: #d8ae96;
+  background: #fbe1d1;
 }
 :host(.duet-theme-turva2) .duet-chip-container.duet-theme-turva.duet-chip-filter-popup-open {
-  background: #fbe1d1;
+  background: #fdf7f2;
   border-color: #b2c2cd;
 }
 :host(.duet-theme-turva2) .duet-chip-container.duet-theme-turva.duet-chip-input:hover {

package/lib/collection/components/duet-choice/duet-checkmark.js

@@ -18,11 +18,11 @@ export class DuetCheckmark {
         inheritGlobalTheme(this);
     }
     render() {
-        return (h(Host, { key: '8f8df4562a1d37c1e3ced47dace2f8ca487a9f73', class: { "duet-theme-turva": this.theme === "turva" } }, h("div", { key: 'b803f9fe255ac6166546a8a0398b4958d46cd0df', role: this.presentationOnly ? "presentation" : null, class: { checked: this.checked } }, h("div", { key: 'a284f559c645796efaa1fd9e74a7d1544154b26f', class: {
+        return (h(Host, { key: 'ac5830102d190e3315b4798b50f042d285f600f4', class: { "duet-theme-turva": this.theme === "turva" } }, h("div", { key: '35f0f3e407a0835d5d29eff77793ca6d9e5c5744', role: this.presentationOnly ? "presentation" : null, class: { checked: this.checked } }, h("div", { key: 'f6fe02c597eb1264d6135b30933c371208426ad0', class: {
                 "duet-checkmark-container": true,
                 center: this.center,
                 "duet-checkmark-radio": this.type === "radio",
-            } }, this.checked && h("div", { key: 'e17c92da194bbedbd6f4159efabad9321c52fa49', class: "duet-checkmark" })))));
+            } }, this.checked && h("div", { key: '7b23a08c03ac673e9ff0b969793df4f055ac4341', class: "duet-checkmark" })))));
     }
     static get is() { return "duet-checkmark"; }
     static get originalStyleUrls() {

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

@@ -204,19 +204,19 @@ input:focus {
   outline: 0;
 }
 
-:host(.user-is-tabbing) input:checked:focus + .duet-choice-label {
+input:checked:focus + .duet-choice-label {
   box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3);
 }
 
-:host(.user-is-tabbing) input:not(:checked):focus + .duet-choice-label {
+input:not(:checked):focus + .duet-choice-label {
   box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
 }
 
-:host(.user-is-tabbing).duet-theme-turva input:checked:focus + .duet-choice-label {
+.duet-theme-turva input:checked:focus + .duet-choice-label {
   box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2);
 }
 
-:host(.user-is-tabbing).duet-theme-turva input:not(:checked):focus + .duet-choice-label {
+.duet-theme-turva input:not(:checked):focus + .duet-choice-label {
   box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
 }
 

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

@@ -166,7 +166,6 @@ export class DuetChoice {
     disconnectedCallback() {
         disconnectLanguageChangeObserver(this);
         unsubscribeTabbingChange(this);
-        this.duetChoiceRemove.emit();
     }
     /**
      * Sets focus on the specified `duet-choice`. Use this method instead of the global
@@ -1026,26 +1025,6 @@ export class DuetChoice {
                         }
                     }
                 }
-            }, {
-                "method": "duetChoiceRemove",
-                "name": "duetChoiceRemove",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when the component is removed from the DOM."
-                },
-                "complexType": {
-                    "original": "CustomEvent",
-                    "resolved": "CustomEvent<any>",
-                    "references": {
-                        "CustomEvent": {
-                            "location": "global",
-                            "id": "global::CustomEvent"
-                        }
-                    }
-                }
             }, {
                 "method": "duetChange",
                 "name": "duetChange",

package/lib/collection/components/duet-choice-group/duet-choice-group.js

@@ -11,6 +11,16 @@ export class DuetChoiceGroup {
     constructor() {
         this.choiceGroupName = "duet-choice-group";
         this.choices = new Set();
+        // Call this.updateChoices when a child choice has been removed - addtions are handled by events
+        this.childObserverCallback = (mutationList) => {
+            if (mutationList.some(r => {
+                var _a;
+                return ((_a = r.removedNodes) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
+                    Array.from(r.removedNodes.values()).some(n => n.nodeName.toLowerCase() === "duet-choice");
+            })) {
+                this.updateChoices();
+            }
+        };
         /**
          * Component event handling.
          */
@@ -23,16 +33,7 @@ export class DuetChoiceGroup {
                 this.value = selectedChoice.value;
             }
         };
-        this.onChoiceReady = (ev) => {
-            const choice = ev.target;
-            if (choice.closest("duet-choice-group") === this.element && !this.choices.has(choice)) {
-                this.choices.add(choice);
-                this.updateChoices();
-            }
-        };
-        this.onChoiceRemove = (ev) => {
-            const choice = ev.target;
-            this.choices.delete(choice);
+        this.onChoiceReady = () => {
             this.updateChoices();
         };
         this.direction = "vertical";
@@ -64,6 +65,8 @@ export class DuetChoiceGroup {
         if (Build.isServer) {
             return;
         }
+        this.childObserver = new MutationObserver(this.childObserverCallback.bind(this));
+        this.childObserver.observe(this.element, { childList: true, subtree: true });
         this.setInitialValue();
         this.updateChoices();
     }
@@ -71,9 +74,9 @@ export class DuetChoiceGroup {
         if (Build.isServer) {
             return;
         }
-        if (this.mutationO) {
-            this.mutationO.disconnect();
-            this.mutationO = undefined;
+        if (this.childObserver) {
+            this.childObserver.disconnect();
+            this.childObserver = undefined;
         }
     }
     componentWillLoad() {
@@ -100,6 +103,12 @@ export class DuetChoiceGroup {
         var _a;
         const value = (_a = this.value) !== null && _a !== void 0 ? _a : this.initialValue;
         let hasChecked = false;
+        this.choices.clear();
+        this.element.querySelectorAll("duet-choice").forEach((choice) => {
+            if (choice.closest("duet-choice-group") === this.element) {
+                this.choices.add(choice);
+            }
+        });
         // Walk the DOM in reverse order, since the last selected one wins
         for (const choice of Array.from(this.choices)) {
             choice.name = this.name;
@@ -134,7 +143,7 @@ export class DuetChoiceGroup {
         if (Build.isServer) {
             return;
         }
-        return (h(Host, { onDuetChange: this.onSelect, onDuetChoiceReady: this.onChoiceReady, onDuetChoiceRemove: this.onChoiceRemove, class: {
+        return (h(Host, { onDuetChange: this.onSelect, onDuetChoiceReady: this.onChoiceReady, class: {
                 horizontal: this.direction === "horizontal",
                 "duet-choice-group-breakpoint-x-small": this.responsive && this.breakpoint === "x-small",
                 "duet-choice-group-breakpoint-small": this.responsive && this.breakpoint === "small",

package/lib/collection/components/duet-contact-card/duet-contact-card.js

@@ -45,10 +45,10 @@ export class DuetContactCard {
     render() {
         const isTurva = this.theme === "turva";
         const theme = isTurva ? "turva" : "default";
-        return (h(Host, { key: 'cc92ac8c254dd4d8059e41dc84a0885936486939', class: { "duet-m-0": this.margin === "none" } }, h("div", { key: '95dcbf611c7ffa2e00d4e3413b4e5d4ef76007d4', class: {
+        return (h(Host, { key: '031a1cc6617901d47c4ffa723e7e5af73a11b609', class: { "duet-m-0": this.margin === "none" } }, h("div", { key: '3eadcbaad47c4fced83d4db168810f79bfa7b786', class: {
                 "duet-contact-card": true,
                 "duet-theme-turva": this.theme === "turva",
-            }, role: "group", "aria-label": this.name }, this.image ? h("img", { class: "image", src: this.image, alt: this.name }) : h("div", null), h("div", { key: 'cb2b61b56ea9cbfd80aec1c7c280cc35b7704306' }, this.name && (h("duet-heading", { key: 'd7ce3e63272101a9f8a4cd7d3f259a4ffdbe746d', class: "name", level: "h3", margin: "none", theme: theme }, this.name)), this.description && (h("duet-paragraph", { key: 'aea14ddd85a3568d5b77a49e56df6ac76540a3a9', class: "description", margin: "none", theme: theme }, this.description)), this.email && (h("div", { key: '323330c4a1a8c188827cd7eeaf9e215706b23b62', class: "email" }, h("duet-icon", { key: '33ae4ab4b3b810d5f48494adad568458f627b07a', name: "navigation-message", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: '84ce51f0721ede904044fee80b8cbf86e66b1ec8', url: `mailto:${this.email}`, accessibleLabel: `Email: ${this.email}`, theme: theme }, this.email))), this.phone && (h("div", { key: '7c63f2689781c66d80d32415cf200bd968fe347c', class: "phone" }, h("duet-icon", { key: '6a56352c7a808bedf087a8b60edd2579dbddef4b', name: "form-tel", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: 'b2b78cbff49648d799b020ee52ce54f412285b13', url: `tel:${this.phone}`, accessibleLabel: `${this.phoneLabel[this.language]}: ${this.phone}`, theme: theme }, this.phone)))), this.buttonUrl && this.buttonText && (h("div", { key: '9a24e774e65e1f9cdd587f8ccfd8a3bf6ac57e10', class: "call-to-action" }, h("duet-button", { key: '7c7e4b45dc28293a9f44a71d07ad4c6a6882364a', variation: "default", icon: this.buttonIcon, fixed: true, margin: "none", url: this.buttonUrl, theme: theme }, this.buttonText))), h("div", { key: '85e9b10271e93b14e8e5a2821d72e7ee5ff4f194' }), h("slot", { key: 'ba84e396a9e346ff2f9cbc7c9dd66d4eefdbe2d7' }))));
+            }, role: "group", "aria-label": this.name }, this.image ? h("img", { class: "image", src: this.image, alt: this.name }) : h("div", null), h("div", { key: '54b585ba0d7820ddc0170b050d7b2fc1160fc559' }, this.name && (h("duet-heading", { key: 'b6ff67b0d0a8a8443a2318de87068aa15f080774', class: "name", level: "h3", margin: "none", theme: theme }, this.name)), this.description && (h("duet-paragraph", { key: '3586614b97c27b190bd6cf657970e3fd54999733', class: "description", margin: "none", theme: theme }, this.description)), this.email && (h("div", { key: 'f28904a0807287b25d77dabd04d62e3db9dd9885', class: "email" }, h("duet-icon", { key: 'f51b5fe58a74b65433172d96c921aebd5cd046f0', name: "navigation-message", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: '84014fd0fa9c758aa002751e780a876b1acf14cd', url: `mailto:${this.email}`, accessibleLabel: `Email: ${this.email}`, theme: theme }, this.email))), this.phone && (h("div", { key: '97814f25bbd4afa0c0449a22b09a72803717aaca', class: "phone" }, h("duet-icon", { key: 'e6775a6b8eadfe789170d5a896a225c5d2736bab', name: "form-tel", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: '61cd5ffd1d0850313af726624b8207cec0f3732f', url: `tel:${this.phone}`, accessibleLabel: `${this.phoneLabel[this.language]}: ${this.phone}`, theme: theme }, this.phone)))), this.buttonUrl && this.buttonText && (h("div", { key: 'dbe676faf77918b470a549472baa29d249a86ac1', class: "call-to-action" }, h("duet-button", { key: '294a9d190cdeba8cd13efc1d0f68aef675470c4b', variation: "default", icon: this.buttonIcon, fixed: true, margin: "none", url: this.buttonUrl, theme: theme }, this.buttonText))), h("div", { key: '0319211fcb9e7f11dd5b32a53a1c57436ed79268' }), h("slot", { key: '0ffb08aec4351a29a0cd3ccd25911f3271cb4058' }))));
     }
     static get is() { return "duet-contact-card"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-date-picker/date-picker-day.js

@@ -4,6 +4,11 @@
 import { h } from "@stencil/core";
 import i18n from "./date-i18n";
 import { isEqual, printISODate } from "./date-utils";
+const selectedDayLabel = {
+    fi: "Valittu päivä",
+    en: "Selected day",
+    sv: "Vald dag",
+};
 export const DatePickerDay = ({ focusedDay, today, day, language, onDaySelect, onKeyboardNavigation, ref, inRange, isSelected, }) => {
     const isToday = isEqual(day, today);
     const isFocused = isEqual(day, focusedDay);
@@ -13,5 +18,5 @@ export const DatePickerDay = ({ focusedDay, today, day, language, onDaySelect, o
     function handleClick(e) {
         onDaySelect(e, day);
     }
-    return (h("td", { "data-day": printISODate(day), class: "duet-date-table-cell", "aria-label": formatterShort.format(day), role: "button", tabIndex: isFocused ? 0 : -1, onClick: handleClick, onKeyDown: onKeyboardNavigation, "aria-disabled": isOutsideRange || isDisabled, "aria-pressed": isSelected ? "true" : "false", ref: ref }, h("span", { class: { "duet-date-table-button": true, outside: isOutsideRange, disabled: isDisabled, today: isToday } }, day.getDate())));
+    return (h("td", { "data-day": printISODate(day), class: { "duet-date-table-cell": true, selected: isSelected }, "aria-label": `${formatterShort.format(day)}${isSelected ? `, ${selectedDayLabel[language]}` : undefined}`, role: "button", tabIndex: isFocused ? 0 : -1, onClick: handleClick, onKeyDown: onKeyboardNavigation, "aria-disabled": isOutsideRange || isDisabled, ref: ref }, h("span", { class: { "duet-date-table-button": true, outside: isOutsideRange, disabled: isDisabled, today: isToday } }, day.getDate())));
 };

package/lib/collection/components/duet-date-picker/date-utils.js

@@ -18,7 +18,12 @@ function createDate(year, month, day) {
         dayInt <= 31 &&
         yearInt > 0;
     if (isValid) {
-        return new Date(yearInt, monthInt - 1, dayInt);
+        const date = new Date(yearInt, monthInt - 1, dayInt);
+        // Reject dates where JS overflowed to a different month/day (e.g. Feb 31 → Mar 3)
+        if (date.getDate() !== dayInt || date.getMonth() !== monthInt - 1) {
+            return undefined;
+        }
+        return date;
     }
 }
 /**

package/lib/collection/components/duet-date-picker/duet-date-picker.css

@@ -303,12 +303,12 @@
   background: rgb(255, 241, 241) !important;
   box-shadow: 0 0 0 1px #171c3a !important;
 }
-[aria-pressed=true] .duet-date-table-button, :focus .duet-date-table-button {
+.selected .duet-date-table-button, :focus .duet-date-table-button {
   color: rgb(255, 255, 255) !important;
   background: rgb(0, 119, 179) !important;
   outline: 0;
 }
-.duet-theme-turva [aria-pressed=true] .duet-date-table-button, .duet-theme-turva :focus .duet-date-table-button {
+.duet-theme-turva .selected .duet-date-table-button, .duet-theme-turva :focus .duet-date-table-button {
   color: rgb(255, 255, 255) !important;
   background: rgb(198, 12, 48) !important;
 }

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

@@ -49,20 +49,20 @@ export class DuetFieldset {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'faf60f2966a89f4867cf37db394585f73fff686e', class: { "duet-m-0": this.margin === "none" } }, h("fieldset", { key: 'f020b6ec6801a8b83c9a5bc93a43d7a35d7506ce', "aria-labelledby": this.labelId, "aria-describedby": this.error ? this.errorId : null,
+        return (h(Host, { key: '083178e4b5c3ef208a7d20c1e29ccd67ae436a1e', class: { "duet-m-0": this.margin === "none" } }, h("fieldset", { key: '371ad27e2db160c7f6c4711a80ad237d8aa59b46', "aria-labelledby": this.labelId, "aria-describedby": this.error ? this.errorId : null,
             // NVDA and VoiceOver do not yet support aria-errormessage
             // once they do, we can remove errors from the aria-describedby
             // aria-errormessage={this.error ? this.errorId : null}
             class: {
                 "duet-fieldset": true,
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("legend", { key: '66b5ccbde158c98f27fbc6a46a4e6a6df23ff898', id: this.labelId }, h(this.labelHeadingLevel, { key: '45be33f32735066278ab2b9f3b809014d0f9676b' }, this.label), this.caption && h("span", { key: 'e544fb508d9001319a7f3a4f3b4b5ec8166f8025' }, this.caption)), h("div", { key: 'f0ad41b915201af1a2f9d95e9f9829d0bfdae2e6', class: {
+            } }, h("legend", { key: '6de5ea55ae42baf9675b44f521736892ea4b8e35', id: this.labelId }, h(this.labelHeadingLevel, { key: '664e33dc98e540a2643f8cc3098e6f9a7d565090' }, this.label), this.caption && h("span", { key: '53689d2f323c13e68fc48e8fc4a641dd210c6761' }, this.caption)), h("div", { key: '3a03e91ea4d9603fc9f91f1edba19cb07f63b36f', class: {
                 "duet-legend-wrapper": true,
                 "duet-legend-has-caption": !!this.caption,
                 "duet-legend-has-tooltip": this.hasTooltip,
                 "duet-legend-hidden": this.labelHidden,
                 "duet-legend-compact": this.compactLabel,
-            } }, h("div", { key: '5a632f1718ae040c523fec5d67abe8b7150c62a6', class: "duet-fieldset-label" }, h("span", { key: '96af5bd097ce6c732cabfeeed24ad70acbc0242f', "aria-hidden": "true" }, this.label), h("slot", { key: 'a9d4abbfbc6586fc072f15d0ada1e0678581eea3', onSlotchange: this.checkHasTooltip, name: "tooltip" })), this.caption && (h("div", { key: '09060f463be57b59b6a313dbf51961197a567f40', class: "duet-fieldset-caption", "aria-hidden": "true" }, h("duet-caption", { key: 'd5f8281d4970d4e26290d3163188afea4b286694', theme: this.theme, margin: "none" }, this.caption)))), h("slot", { key: '3e8180e636e2ec3000f4d21dd9ee50dc12f396f6' }), h("span", { key: 'fc0dc472b4ef27d06a1272f621c936f14ffa1de4', class: "duet-fieldset-help duet-fieldset-error", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: '8586a6c9b1a32ed3e780a0d7233664bce741c3b6', class: { "duet-m-0": this.lastItemIsChip } }, this.error)))));
+            } }, h("div", { key: 'daa5af05aa9b131aa9cc56f1b6268cb4ea05d847', class: "duet-fieldset-label" }, h("span", { key: '87309ad8a81cae6cf99e7a2782c493f0de4fd73c', "aria-hidden": "true" }, this.label), h("slot", { key: 'f94b32bb98a136b08901468961f2df0018907e76', onSlotchange: this.checkHasTooltip, name: "tooltip" })), this.caption && (h("div", { key: '8d1d958991d27bada3452873155619968813aef4', class: "duet-fieldset-caption", "aria-hidden": "true" }, h("duet-caption", { key: 'eb614cbb4ce3ce64f5e42cb31dfd106002ec5d2d', theme: this.theme, margin: "none" }, this.caption)))), h("slot", { key: '8385bd2d465d37b3c01eade80dd800b6e0ff880c' }), h("span", { key: 'b22a8dca8b5bccde89451e2153c25d4006826057', class: "duet-fieldset-help duet-fieldset-error", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: '9673648ce6bfd6d71f16870e62f4551f00a087df', class: { "duet-m-0": this.lastItemIsChip } }, this.error)))));
     }
     static get is() { return "duet-fieldset"; }
     static get encapsulation() { return "shadow"; }

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

@@ -23,10 +23,11 @@ export class DuetGrid {
      * @returns {number}
      */
     outerHeight(element) {
-        const height = element.offsetHeight, style = window.getComputedStyle(element);
-        return ["top", "bottom"]
-            .map(side => parseInt(style[`margin-${side}`]))
-            .reduce((total, side) => total + side, height);
+        const height = element.offsetHeight;
+        const style = window.getComputedStyle(element);
+        const topMargin = parseInt(style.marginTop);
+        const bottomMargin = parseInt(style.marginBottom);
+        return topMargin + height + bottomMargin;
     }
     debounceWindowResizeHandler() {
         debounce(this.updateGridItemsWithInputFields, 100);

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

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