@duetds/components 10.2.4 → 10.3.1

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

@@ -284,7 +284,7 @@ export class DuetHero {
                 outlineColor = "color-primary-turva";
             }
         }
-        return (h("div", { key: '0516fd4837dba53aae81d2ae0c78b70585422107', role: "region", class: {
+        return (h("div", { key: 'd5eeb3fa2ded961e10b0db110bc1606beadb5878', role: "region", class: {
                 "duet-hero": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-has-category-icon": !!this.categoryIcon,
@@ -302,17 +302,17 @@ export class DuetHero {
                 "duet-hero-text-center": this.variation !== "product" && ((this.textCenter && !this.leftAlign) || campaignOrSection),
                 "duet-hero-left-align": this.variation === "product" || (this.leftAlign && !campaignOrSection),
                 "duet-hero-narrow": this.layout === "narrow",
-            }, part: "duet-hero" }, campaignOrSection && this.image && (h("div", { key: 'c9519b4ff36fdb3ec68d569667065a743d57a360', class: "background-area" }, h("div", { key: 'ddb4386a162fe50a1ec65bfb5920194cd8b8247f', class: "background-container" }, h("div", { key: 'af9a1b99358098c95c9ca8ff11c8b4e8fed691db', class: "background" }, h("img", { key: 'caea4a0bec4b0fab914d327878fd82fc8937528d', class: `${imageSizeIsCover ? "cover" : ""} ${imagePositionIsCenter ? "center" : ""}`, src: this.image, alt: this.imageAlt || "", role: this.imageAlt ? null : "presentation" })), h("div", { key: '570fc51ca220622428a0d0ae0c0956c5f1ee0452', class: "brand-shape" })))), this.variation === "product" && this.image && (h("div", { key: '954467ff85417b30a4a6fc18c700464df609f586', class: { "background-area": true, [this.layout]: true } }, h("div", { key: 'a709338a6570cf245f37272263b03d7a27128f9e', class: { "background-container": true, [this.layout]: true } }, h("div", { key: 'b93c7f5ac020bd754dba88132aaa9b7ea1ba4003', class: { background: true, [this.layout]: true } }, h("div", { key: '905662fbb3364da7510db2555f03de974562e505', class: { "background-mask": true, [this.layout]: true } }), this.theme !== "turva" && h("div", { key: '262820358ecd29844c65be4a1d7e82549b45cee2', class: { "brand-shape": true, [this.layout]: true } }), h("div", { key: '3d20072088e4a405b83d2f65268f2d488a5112ac', class: { "brand-shaped-image": true, [this.layout]: true } }, h("div", { key: 'e8c63df219322992bb8d722b01dcad205c044f9c', class: { "brand-shaped-image-wrapper": true, [this.layout]: true } }, h("div", Object.assign({ key: '5b265dcc9db7e68c749b2b9c9d0e8fa4064f6b70', class: { "brand-shaped-image-bg": true, [this.layout]: true }, style: styles }, bgImgA11yAttrs)))), this.categoryIcon && (h("div", { key: '81e36645d1a21d9bc66fae4765e9ef3272537f03', class: { "brand-shaped-icon": true, [this.layout]: true } }, h("duet-icon", { key: '504a1771e2e356783be5844509166ab29f78159d', class: { [this.layout]: true }, background: "none", name: this.categoryIcon, margin: "none", size: "auto", responsive: false }))))))), this.variation === "content" && this.image && (h("div", { key: '97b506d236d0679f53696cac58503d7be257231f', class: "background-area" }, h("div", { key: '36890d9dc2a8f8b124420c7b3225ada20d01e35e', class: "background" }, h("div", { key: '1df015994f4bd85a884de6e1875be96408f599b7', class: "background-mask" }), this.theme !== "turva" && h("div", { key: 'f68c97a4b3c8e4b03bac4bb2181e630ef63c8639', class: "brand-shape" }), h("div", { key: 'ba89b95cc6d1d2a55ca0681206266f0e52d10059', class: "brand-shaped-image" }, h("div", { key: '0c133b49c54fa275782754ac6ab44c468592b50b', class: "brand-shaped-image-wrapper" }, h("div", Object.assign({ key: 'c9963f3b6134885b5cd4facc450e337fd3807749', class: "brand-shaped-image-bg", style: styles }, bgImgA11yAttrs))))))), h("div", { key: '6cd4723c1191be8841b3e72c186438d60b762165', class: { "duet-hero-wrapper": true, [this.layout]: true } }, this.image && this.variation === "image" && (h("div", { key: '76e6d63f430faa884dbe432dcf5241287edb6d94', class: "duet-hero-image-mask" }, h("div", { key: 'ac28833afeffb4273df030b71484549022dbcd7b', class: "duet-hero-image-wrapper" }, h("div", Object.assign({ key: '3bd97c165b52eae5b07653f04508c94f3e2fbaa3', class: "duet-hero-image", style: styles }, bgImgA11yAttrs))))), (this.variation === "gray" || this.variation === "light" || this.variation === "minimal") &&
-            this.processedBack && (h("div", { key: 'a3139ada0576c86e38608e8b3babde7bf1cb6428', class: "duet-hero-back" }, h("duet-button", { key: '18696adb6758e912d78507989319403a05031383', 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: 'f1567b419987fa37b1bf3219d073b7407d68969a', class: "background-area" }, h("div", { key: '240fb437298bb4dbbe401c66c4b7ba4be218b793', class: "background-container" }, h("div", { key: '9bd3e01a06940f60f6edebe1b360afcfc6364c65', class: "background" }, h("img", { key: 'ece8321c4bd15e3eb89a58914373699cd5f74a6d', class: `${imageSizeIsCover ? "cover" : ""} ${imagePositionIsCenter ? "center" : ""}`, src: this.image, alt: this.imageAlt || "", role: this.imageAlt ? null : "presentation" })), h("div", { key: '2cbf71fbd70243c9e73dbf0be5cdcd74a4a6ae80', class: "brand-shape" })))), this.variation === "product" && this.image && (h("div", { key: 'a92855b91f7460fe11771919b98613f2bc844c02', class: { "background-area": true, [this.layout]: true } }, h("div", { key: '8eab8720aee4d33edb1ffc3e189ade31115cff0a', class: { "background-container": true, [this.layout]: true } }, h("div", { key: '6a3b020ed0e975c55a1ef0a098900269282e0993', class: { background: true, [this.layout]: true } }, h("div", { key: '724ed47abbe45d42cdc24a15cf144ec92ebe7295', class: { "background-mask": true, [this.layout]: true } }), this.theme !== "turva" && h("div", { key: 'e34148e2264c68a7acce4cdd7ecd98b392f375f3', class: { "brand-shape": true, [this.layout]: true } }), h("div", { key: '995d6c69d45d9b84e98afd7fbe143dd22c91ae93', class: { "brand-shaped-image": true, [this.layout]: true } }, h("div", { key: 'f1adcd5407f731f243e920fd6d02e6307770c3b6', class: { "brand-shaped-image-wrapper": true, [this.layout]: true } }, h("div", Object.assign({ key: 'cbbd91e50a57b03cc9f1b2f8da143a73a5c9c23a', class: { "brand-shaped-image-bg": true, [this.layout]: true }, style: styles }, bgImgA11yAttrs)))), this.categoryIcon && (h("div", { key: '25750e275462cd216688306a684396609b4db5da', class: { "brand-shaped-icon": true, [this.layout]: true } }, h("duet-icon", { key: '080dc04b7915092298dbfd71d85070db370553d2', class: { [this.layout]: true }, background: "none", name: this.categoryIcon, margin: "none", size: "auto", responsive: false }))))))), this.variation === "content" && this.image && (h("div", { key: 'f56fbc69d93eb69daf1a85bf4990d32babc011fd', class: "background-area" }, h("div", { key: '2e81ad46ab2d99734b33b3a5b275124199be6174', class: "background" }, h("div", { key: '67136b598ac80dabcefa7ece68e7152a444f6813', class: "background-mask" }), this.theme !== "turva" && h("div", { key: '522590966eb8f2a919fbef1bd296d14cb7e47056', class: "brand-shape" }), h("div", { key: '64942939ee3b0cb08dbb8f9d3a0c50e3d6492fed', class: "brand-shaped-image" }, h("div", { key: '2a1c9671ff623f747a76ca2bf7eb7061f3e0ab77', class: "brand-shaped-image-wrapper" }, h("div", Object.assign({ key: 'c393815b6c10d63c768ac4af722df40ab1d611a8', class: "brand-shaped-image-bg", style: styles }, bgImgA11yAttrs))))))), h("div", { key: 'fcf490f61e4a2c2fb88ce5804d7059d68789a5ad', class: { "duet-hero-wrapper": true, [this.layout]: true } }, this.image && this.variation === "image" && (h("div", { key: '026cece4736fb17a4f0809cc085ff131296eedcf', class: "duet-hero-image-mask" }, h("div", { key: 'd353ae243b8e1787ce2904cb50a8cb0f82f2b814', class: "duet-hero-image-wrapper" }, h("div", Object.assign({ key: '0f6bf9a85808413d9e9177bb4d6f4bdec1ebb372', class: "duet-hero-image", style: styles }, bgImgA11yAttrs))))), (this.variation === "gray" || this.variation === "light" || this.variation === "minimal") &&
+            this.processedBack && (h("div", { key: '882584ea7a07b3f5920a7ab308e42e5ac8d90956', class: "duet-hero-back" }, h("duet-button", { key: 'a0bb7347fc443bc2f4dbaa8a4359304c61a4a33d', 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: '28d192b8f069b4a32baa01a027abc42bdfb95887', class: { "duet-hero-icon": true, "duet-hero-icon-has-heading": this.preHeading !== "" }, size: "x-large", background: this.categoryIconColor, name: this.categoryIcon })), h("div", { key: '012bf0e526bb27720cf999130cee18c48f154328', class: { "duet-hero-text": true }, part: "duet-hero-text" }, (this.preHeading || this.hasPreHeadingSlot) && (h("duet-paragraph", { key: '5cbbe391ce79e56835076065ebcffe0bab5228ba', 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: 'b3e524e1dfb703166dabf2f84bbcc4114b55a30a', name: "badge" }), (this.heading || this.hasHeadingSlot) && (h("duet-heading", { key: 'aa79305d862247ab6107539664112d93a239e8a7', 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: 'd7be291d344c0357c68891dafcce35f2b39b5da5', theme: this.theme, level: this.hasSubHeadingSlotNative ? "div" : this.subHeadingLevel, class: { "duet-hero-subheading": true }, color: this.theme === "turva" ? "secondary-turva" : "secondary", visualLevel: "h2" }, h("slot", { key: '32bb887d95e7bbf0c2037520f47080d4a4680bba', name: "subheading" }))), this.description && (h("duet-paragraph", { key: 'd391fad4e9710b15fe3bbc98e8e22078f3a84972', theme: this.theme, color: textColor, variation: "intro" }, this.description)), (this.variation === "gray" || this.variation === "minimal") && this.processedListItems && (h("duet-list", { key: '927d16ef81835f367bda345400b4603d6c5dd36a', 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: '05b8812b4a5f224422c0d102c9f6869bfcfe3a69', 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: '512d50180bb9fba05bcde538b19fa87e70cf5a3a' })), (this.variation === "gray" || this.variation === "minimal") && this.processedActions && (h("div", { key: '1ca120e7175b467c0265513ecd4d32a30e5eaba8', 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: 'd64fe12b0d99a21a97c3c01bf8a27c3d90168b06', class: { "duet-hero-icon": true, "duet-hero-icon-has-heading": this.preHeading !== "" }, size: "x-large", background: this.categoryIconColor, name: this.categoryIcon })), h("div", { key: '6f59e43937274d798205e53bb5c8097707c84c7d', class: { "duet-hero-text": true }, part: "duet-hero-text" }, (this.preHeading || this.hasPreHeadingSlot) && (h("duet-paragraph", { key: '6e3a9999d6d9cfb00836f50d1f026f572c13d4d9', 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: '5a246252a9a3cffd670e27c7b34d62dbe81d99d1', name: "badge" }), (this.heading || this.hasHeadingSlot) && (h("duet-heading", { key: '9deaac254f1793d9cac59610b27e90cd67a1203a', 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: 'f938dd95a754fa9749699793ce5a81a313cc94a8', theme: this.theme, level: this.hasSubHeadingSlotNative ? "div" : this.subHeadingLevel, class: { "duet-hero-subheading": true }, color: this.theme === "turva" ? "secondary-turva" : "secondary", visualLevel: "h2" }, h("slot", { key: '719bb29e202df58c0cd542c6b2c72a8ced1157ea', name: "subheading" }))), this.description && (h("duet-paragraph", { key: '36849331db1a89058aa564e686a46a9b7e975e1b', theme: this.theme, color: textColor, variation: "intro" }, this.description)), (this.variation === "gray" || this.variation === "minimal") && this.processedListItems && (h("duet-list", { key: '553b3b961f3f23fdab788b84e63552d3c0686b37', 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: 'af02b833ecfd90cfd09f0c48c071c41e935080db', 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: '77cb919644b1a87eeff3ec753e4b075b3adb6e27' })), (this.variation === "gray" || this.variation === "minimal") && this.processedActions && (h("div", { key: 'f5eed6109f77a64ee2ab2bafcc38c664a4bca2f9', class: "duet-hero-links" }, this.processedActions.map(item => (h("a", { class: "duet-hero-link", href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleClick(event, item) }, h("div", { class: "duet-hero-action-icon" }, h("duet-icon", { size: "small", margin: "none", name: item.icon, color: "currentColor", outline: outlineColor })), h("span", null, item.label), item.external && h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), item.external && (h("div", { class: "duet-hero-action-arrow" }, h("duet-icon", { icon: newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" })))))))), this.image &&
             this.variation !== "image" &&
             !campaignOrSection &&
             this.variation !== "product" &&
-            this.variation !== "content" && h("div", Object.assign({ key: 'f49f23c4edbf72e479d8f7cf4cf2767d688c362b', class: "duet-hero-image", style: styles }, bgImgA11yAttrs)), h("slot", { key: 'a99b7943cc1408366bc93827beb41867aaf5fb01', name: "bottom" }))));
+            this.variation !== "content" && h("div", Object.assign({ key: '4dbed5f231c2ffff11d5336b9ada8da3fefbdfce', class: "duet-hero-image", style: styles }, bgImgA11yAttrs)), h("slot", { key: '3d48509557f9575a15947b37ab4fc30b768b5dbb', name: "bottom" }))));
     }
     static get is() { return "duet-hero"; }
     static get encapsulation() { return "shadow"; }

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

@@ -78,7 +78,7 @@
     transform: scale(0.8);
   }
 }
-.duet-icon.duet-icon-has-background.duet-theme-turva, .duet-icon.duet-icon-has-background.duet-theme-default {
+.duet-icon.duet-icon-has-background.duet-theme-default {
   color: rgb(255, 255, 255);
 }
 .duet-icon.duet-icon-shape-circle {
@@ -95,26 +95,10 @@
 .duet-icon.duet-theme-default {
   color: rgb(0, 119, 179);
 }
-.duet-icon.duet-theme-turva {
-  color: rgb(230, 23, 64);
-}
 .duet-icon.duet-icon-shape-brand.rotated {
   transform: rotate(7deg) scale(0.875);
   transform-origin: center;
 }
-.duet-icon.duet-icon-shape-brand.duet-theme-turva {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 144 130' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M67.4002 0.00277722C71.354 0.0260204 75.7751 0.261773 80.1626 0.90262C83.3916 1.37412 86.6046 1.97513 89.824 2.51802C91.5585 2.81022 93.3026 3.05925 95.0291 3.3996C102.623 4.89215 109.884 7.35924 116.592 11.4152C122.597 15.0478 127.726 19.7163 131.919 25.4756C135.024 29.7374 137.515 34.3662 139.4 39.3319C140.317 41.7459 141.075 44.2262 141.854 46.695C142.021 47.2196 141.984 47.8157 142.021 48.3801C142.354 53.5833 142.664 58.7864 143.018 63.9879C143.237 67.2021 143.528 70.4097 143.768 73.6206C144.067 77.5985 144.095 81.578 143.746 85.5576C143.501 88.3567 143.106 91.1293 142.437 93.8537C141.117 99.2395 138.941 104.207 135.603 108.58C132.414 112.759 128.49 116.036 123.975 118.561C120.429 120.544 116.702 122.058 112.824 123.175C109.121 124.241 105.361 125.011 101.548 125.493C100.916 125.572 100.351 125.768 99.783 126.074C98.1525 126.95 96.3956 127.47 94.6163 127.912C91.4225 128.705 88.1775 129.168 84.9149 129.495C83.0572 129.681 81.1978 129.838 79.3385 129.995C79.1337 130.012 78.9097 129.985 78.7161 129.916C76.2087 129.009 73.6566 128.255 71.0356 127.825C68.8547 127.467 66.6529 127.135 64.4512 127.047C58.4156 126.809 52.54 125.717 46.7989 123.809C40.8193 121.822 35.1245 119.181 29.8458 115.634C24.3911 111.97 19.5668 107.566 15.4705 102.313C10.9582 96.5267 7.406 90.1597 4.73864 83.2598C2.95772 78.6544 1.67604 73.8978 0.898394 68.9935C0.328759 65.3975 0.0183391 61.7798 0.000737963 58.1373C-0.0120628 55.3132 0.141547 52.4992 0.471168 49.6934C0.867992 46.3131 1.46643 42.9728 2.35449 39.6955C2.6121 38.7458 3.02813 37.8327 3.44735 36.9395C4.105 35.5366 4.70343 34.0773 5.54829 32.8006C7.15959 30.3683 8.51487 27.8182 9.53734 25.0705C9.60134 24.8962 9.71655 24.7302 9.84136 24.5957C12.1119 22.1535 14.5201 19.8674 17.0514 17.7191C23.9622 11.8551 31.6315 7.39743 40.0769 4.39076C44.0019 2.99285 48.023 1.97015 52.1144 1.24795C56.6011 0.45934 62.4495 -0.0420489 67.4002 0.00277722Z' /%3E%3C/svg%3E");
-  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 144 130' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M67.4002 0.00277722C71.354 0.0260204 75.7751 0.261773 80.1626 0.90262C83.3916 1.37412 86.6046 1.97513 89.824 2.51802C91.5585 2.81022 93.3026 3.05925 95.0291 3.3996C102.623 4.89215 109.884 7.35924 116.592 11.4152C122.597 15.0478 127.726 19.7163 131.919 25.4756C135.024 29.7374 137.515 34.3662 139.4 39.3319C140.317 41.7459 141.075 44.2262 141.854 46.695C142.021 47.2196 141.984 47.8157 142.021 48.3801C142.354 53.5833 142.664 58.7864 143.018 63.9879C143.237 67.2021 143.528 70.4097 143.768 73.6206C144.067 77.5985 144.095 81.578 143.746 85.5576C143.501 88.3567 143.106 91.1293 142.437 93.8537C141.117 99.2395 138.941 104.207 135.603 108.58C132.414 112.759 128.49 116.036 123.975 118.561C120.429 120.544 116.702 122.058 112.824 123.175C109.121 124.241 105.361 125.011 101.548 125.493C100.916 125.572 100.351 125.768 99.783 126.074C98.1525 126.95 96.3956 127.47 94.6163 127.912C91.4225 128.705 88.1775 129.168 84.9149 129.495C83.0572 129.681 81.1978 129.838 79.3385 129.995C79.1337 130.012 78.9097 129.985 78.7161 129.916C76.2087 129.009 73.6566 128.255 71.0356 127.825C68.8547 127.467 66.6529 127.135 64.4512 127.047C58.4156 126.809 52.54 125.717 46.7989 123.809C40.8193 121.822 35.1245 119.181 29.8458 115.634C24.3911 111.97 19.5668 107.566 15.4705 102.313C10.9582 96.5267 7.406 90.1597 4.73864 83.2598C2.95772 78.6544 1.67604 73.8978 0.898394 68.9935C0.328759 65.3975 0.0183391 61.7798 0.000737963 58.1373C-0.0120628 55.3132 0.141547 52.4992 0.471168 49.6934C0.867992 46.3131 1.46643 42.9728 2.35449 39.6955C2.6121 38.7458 3.02813 37.8327 3.44735 36.9395C4.105 35.5366 4.70343 34.0773 5.54829 32.8006C7.15959 30.3683 8.51487 27.8182 9.53734 25.0705C9.60134 24.8962 9.71655 24.7302 9.84136 24.5957C12.1119 22.1535 14.5201 19.8674 17.0514 17.7191C23.9622 11.8551 31.6315 7.39743 40.0769 4.39076C44.0019 2.99285 48.023 1.97015 52.1144 1.24795C56.6011 0.45934 62.4495 -0.0420489 67.4002 0.00277722Z' /%3E%3C/svg%3E");
-  -webkit-mask-repeat: no-repeat;
-  mask-repeat: no-repeat;
-  mask-position: center;
-}
-.duet-icon.duet-icon-shape-brand.duet-theme-turva .duet-icon-svg {
-  min-width: auto;
-}
 .duet-icon .duet-icon-svg {
   display: block;
   width: 24px;
@@ -183,11 +167,6 @@
   width: 10px;
   height: 10px;
 }
-:host([size=xx-small]) .duet-theme-turva .duet-icon-shape-brand {
-  width: 18px;
-  height: 15px;
-  padding: 0;
-}
 
 :host([size=x-small]) .duet-icon-svg {
   width: 16px;
@@ -206,11 +185,6 @@
   width: 16px;
   height: 16px;
 }
-:host([size=x-small]) .duet-theme-turva .duet-icon-shape-brand {
-  width: 32px;
-  height: 30px;
-  padding: 0;
-}
 
 :host([size=small]) .duet-icon-svg {
   width: 20px;
@@ -226,11 +200,6 @@
   width: 20px;
   height: 20px;
 }
-:host([size=small]) .duet-theme-turva .duet-icon-shape-brand {
-  width: 36px;
-  height: 34px;
-  padding: 0;
-}
 
 :host([size=medium]) .duet-icon-shape-brand {
   padding: 12px;
@@ -239,11 +208,6 @@
   width: 24px;
   height: 24px;
 }
-:host([size=medium]) .duet-theme-turva .duet-icon-shape-brand {
-  width: 48px;
-  height: 44px;
-  padding: 0;
-}
 
 :host([size=large]) .duet-icon-svg {
   width: 30px;
@@ -256,11 +220,6 @@
   width: 30px;
   height: 30px;
 }
-:host([size=large]) .duet-theme-turva .duet-icon-shape-brand {
-  width: 62px;
-  height: 56px;
-  padding: 0;
-}
 
 :host([size=x-large]) .duet-icon-svg {
   width: 36px;
@@ -273,11 +232,6 @@
   width: 36px;
   height: 36px;
 }
-:host([size=x-large]) .duet-theme-turva .duet-icon-shape-brand {
-  width: 76px;
-  height: 68px;
-  padding: 0;
-}
 
 :host([size=xx-large]) .duet-icon-svg {
   width: 48px;
@@ -290,11 +244,6 @@
   width: 48px;
   height: 48px;
 }
-:host([size=xx-large]) .duet-theme-turva .duet-icon-shape-brand {
-  width: 95px;
-  height: 86px;
-  padding: 0;
-}
 
 :host([size=xxx-large]) .duet-icon-svg {
   width: 48px;
@@ -313,20 +262,15 @@
   width: 72px;
   height: 72px;
 }
-:host([size=xxx-large]) .duet-theme-turva .duet-icon-shape-brand {
-  width: 144px;
-  height: 130px;
-  padding: 0;
-}
 
-:host(.duet-theme-turva2) .duet-icon.duet-theme-turva {
+.duet-icon.duet-theme-turva {
   color: rgb(230, 23, 64);
 }
-:host(.duet-theme-turva2) .duet-icon.duet-theme-turva.duet-icon-has-background {
+
+.duet-icon.duet-theme-turva.duet-icon-has-background {
   color: rgb(255, 255, 255);
 }
-:host(.duet-theme-turva2) .duet-icon.duet-theme-turva.duet-icon-shape-brand {
+
+.duet-icon.duet-theme-turva.duet-icon-shape-brand {
   border-radius: 16%;
-  -webkit-mask-image: none;
-  mask-image: none;
 }

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

@@ -144,11 +144,11 @@ export class DuetIcon {
             : {};
         const iconStyles = Object.assign({}, iconRotationStyles);
         const shapeStyle = this.shape === "brand-rotated" ? "duet-icon-shape-brand" : `duet-icon-shape-${this.shape}`;
-        return (h(Host, { key: 'f6a74ccabd59055d22eec3654bde9c81fd4a9ce3', class: {
+        return (h(Host, { key: '2f6837b926530cee2afc83a590aa1ccb0dfeca03', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-icon-has-outline": !!this.outline,
                 "duet-icon-has-background": !!this.background,
-            } }, h("span", { key: 'f2ea10e9ec8459d5a5995781e193c6d8df7fb1ef', "aria-hidden": "true", style: styles, class: {
+            } }, h("span", { key: '6fa86044b5f3966537f38590bd12b28b698a080b', "aria-hidden": "true", style: styles, class: {
                 "duet-icon": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-theme-default": this.theme === "default",
@@ -157,7 +157,7 @@ export class DuetIcon {
                 [shapeStyle]: true,
                 rotated: this.shape === "brand-rotated" && this.theme !== "turva",
                 "duet-icon-not-responsive": !this.responsive,
-            } }, h("span", { key: '3d93b31d1831fa77b71a5f574a38d838636c7757', "aria-hidden": "true", class: { "duet-icon-svg": true, rotated: this.shape === "brand-rotated" && this.theme !== "turva" }, "data-name": this.name, innerHTML: this.svgContent, style: iconStyles }))));
+            } }, h("span", { key: '4ba33bca7da0ccbc0f11b1b5693e7912d0a0d45d', "aria-hidden": "true", class: { "duet-icon-svg": true, rotated: this.shape === "brand-rotated" && this.theme !== "turva" }, "data-name": this.name, innerHTML: this.svgContent, style: iconStyles }))));
     }
     static get is() { return "duet-icon"; }
     static get encapsulation() { return "shadow"; }

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

@@ -45,6 +45,6 @@
   background: rgb(29, 106, 88);
 }
 
-:host(.duet-theme-turva2) .duet-indicator-new {
+.duet-indicator-new.duet-theme-turva {
   background-color: rgb(230, 23, 64);
 }

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

@@ -45,7 +45,11 @@ export class DuetIndicator {
         inheritGlobalTheme(this);
     }
     render() {
-        return (h(Host, { key: '9361561218a4fa5c4fe9508e72b80992ad22aadc', class: { [this.theme]: true } }, h("span", { key: 'd974ea12e2bfc4d8e753cc89044379b846c182ca', class: { "duet-indicator": true, [`duet-indicator-${this.variation}`]: true } }), h("duet-visually-hidden", { key: '0d3abea6442dcb6254391043a32d224188cbc814' }, this.getAccessibleLabel())));
+        return (h(Host, { key: 'dec9ae44791d7c11742399064ae9f5abcb25a0da' }, h("span", { key: '869ad4db73c79b071b6b1cc4667926874f836351', class: {
+                "duet-indicator": true,
+                [`duet-indicator-${this.variation}`]: true,
+                "duet-theme-turva": this.theme === "turva",
+            } }), h("duet-visually-hidden", { key: '95d24f44ddab59732430691a257eebe5de008870' }, this.getAccessibleLabel())));
     }
     static get is() { return "duet-indicator"; }
     static get encapsulation() { return "shadow"; }

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

@@ -179,9 +179,6 @@ duet-caption:not(:last-of-type) {
   pointer-events: none;
   transform: translateY(-50%);
 }
-.duet-theme-turva .duet-input-icon {
-  color: rgb(23, 42, 59);
-}
 
 .duet-input-container {
   position: relative;
@@ -205,7 +202,7 @@ duet-caption:not(:last-of-type) {
   outline-offset: 2px;
   outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-input-container.has-clear .duet-input-clear-icon button:focus, .duet-input-container.has-clear .duet-input-clear-icon button:focus.duet-theme-turva, .duet-theme-turva2 .duet-input-container.has-clear .duet-input-clear-icon button:focus, .duet-input-container.has-clear .duet-input-clear-icon button:focus.duet-theme-turva2 {
+.duet-theme-turva .duet-input-container.has-clear .duet-input-clear-icon button:focus, .duet-input-container.has-clear .duet-input-clear-icon button:focus.duet-theme-turva {
   outline: 2px solid;
   outline-offset: 2px;
   outline-color: rgba(53, 79, 101, 0.8);
@@ -257,9 +254,6 @@ duet-caption:not(:last-of-type) {
   top: -24px;
   right: 24px;
 }
-.duet-input-container.duet-theme-turva.has-clear .duet-input-clear-icon button {
-  color: rgb(8, 42, 77);
-}
 
 .duet-input-label-container {
   display: flex;
@@ -316,26 +310,17 @@ duet-caption:not(:last-of-type) {
 .duet-input.after-chip {
   padding-left: 8px !important;
 }
-.has-error .duet-input, .has-error .duet-input[disabled] {
-  border-color: rgb(214, 28, 82) !important;
-}
-.has-error .duet-input + .duet-input-icon, .has-error .duet-input[disabled] + .duet-input-icon {
-  color: rgb(214, 28, 82) !important;
-}
-.duet-theme-turva.has-error .duet-input {
+.has-error .duet-input {
+  outline-offset: -1px;
+  background-color: rgb(255, 240, 243) !important;
   border-color: rgb(214, 28, 82) !important;
 }
-.duet-theme-turva.has-error .duet-input + .duet-input-icon {
+.has-error .duet-input + .duet-input-icon {
   color: rgb(214, 28, 82) !important;
 }
 .has-icon .duet-input {
   padding-right: 48px !important;
 }
-.duet-theme-turva .duet-input {
-  font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  color: rgb(23, 42, 59) !important;
-  border-color: rgb(120, 145, 164) !important;
-}
 .duet-input.align-right {
   text-align: right;
 }
@@ -345,45 +330,14 @@ duet-caption:not(:last-of-type) {
 .duet-input::-webkit-contacts-auto-fill-button {
   display: none !important;
 }
-.duet-input::-webkit-input-placeholder {
+.duet-input::placeholder {
   color: rgb(98, 121, 138);
   opacity: 1 !important;
   transition: color 300ms ease;
 }
-.duet-theme-turva .duet-input::-webkit-input-placeholder {
-  color: rgb(120, 145, 164);
-}
-.duet-input:focus::-webkit-input-placeholder {
-  color: rgb(181, 198, 208);
-}
-.duet-theme-turva .duet-input:focus::-webkit-input-placeholder {
-  color: rgb(178, 194, 205);
-}
-.duet-input::-moz-placeholder {
-  color: rgb(98, 121, 138);
-  opacity: 1 !important;
-}
-.duet-theme-turva .duet-input::-moz-placeholder {
-  color: rgb(120, 145, 164);
-}
-.duet-input:focus::-moz-placeholder {
-  color: rgb(181, 198, 208);
-}
-.duet-theme-turva .duet-input:focus::-moz-placeholder {
-  color: rgb(178, 194, 205);
-}
-.duet-input:-ms-input-placeholder {
-  color: rgb(98, 121, 138);
-}
-.duet-theme-turva .duet-input:-ms-input-placeholder {
-  color: rgb(120, 145, 164);
-}
-.duet-input:focus:-ms-input-placeholder {
+.duet-input:focus::placeholder {
   color: rgb(181, 198, 208);
 }
-.duet-theme-turva .duet-input:focus:-ms-input-placeholder {
-  color: rgb(178, 194, 205);
-}
 .duet-input[disabled] {
   color: rgb(8, 42, 77) !important;
   cursor: not-allowed !important;
@@ -393,39 +347,36 @@ duet-caption:not(:last-of-type) {
   opacity: 1 !important;
   -webkit-text-fill-color: rgb(8, 42, 77) !important;
 }
-.duet-theme-turva .duet-input[disabled] {
-  color: rgb(23, 42, 59) !important;
-  background: rgb(228, 233, 237) !important;
-  border-color: rgb(228, 233, 237) !important;
-  -webkit-text-fill-color: rgb(23, 42, 59) !important;
-}
-.duet-input:hover:not(:disabled) {
+.duet-input:hover:not(:disabled):not(:focus) {
   outline: 2px solid;
-  outline-color: rgb(98, 121, 138);
+  outline-color: rgb(127, 150, 165) !important;
   outline-offset: -1px;
 }
-.duet-theme-turva .duet-input:hover:not(:disabled), .duet-input:hover:not(:disabled).duet-theme-turva, .duet-theme-turva2 .duet-input:hover:not(:disabled), .duet-input:hover:not(:disabled).duet-theme-turva2 {
-  outline-color: rgb(120, 145, 164);
+.duet-theme-turva .duet-input:hover:not(:disabled):not(:focus), .duet-input:hover:not(:disabled):not(:focus).duet-theme-turva {
+  outline-color: rgb(120, 145, 164) !important;
 }
-.has-error .duet-input:hover:not(:disabled) {
-  outline: 1px solid;
-  outline-color: rgb(214, 28, 82);
+.has-error .duet-input:hover:not(:disabled):not(:focus) {
   outline-offset: -1px;
+  background-color: rgb(255, 240, 243) !important;
+  border-color: rgb(214, 28, 82) !important;
+  outline-width: 2px;
+  outline-color: rgb(214, 28, 82) !important;
 }
 .duet-input:focus {
-  border-color: rgb(0, 119, 179) !important;
-  transition: none;
-}
-.duet-theme-turva .duet-input:focus {
-  border-color: rgb(23, 42, 59) !important;
+  outline: 2px solid;
+  outline-color: rgb(0, 119, 179) !important;
+  outline-offset: -1px;
 }
-.duet-theme-turva .duet-input:focus + .duet-input-icon {
-  color: rgb(23, 42, 59);
+.duet-theme-turva .duet-input:focus, .duet-input:focus.duet-theme-turva {
+  outline-color: rgb(23, 42, 59) !important;
 }
 .has-error .duet-input:focus {
-  outline: 1px solid;
-  outline-color: rgb(214, 28, 82);
   outline-offset: -1px;
+  background-color: rgb(255, 240, 243) !important;
+  border-color: rgb(214, 28, 82) !important;
+  outline-width: 2px;
+  outline-color: rgb(214, 28, 82) !important;
+  background: rgb(255, 255, 255) !important;
 }
 .duet-input:focus + .duet-input-icon {
   color: rgb(0, 119, 179);
@@ -458,16 +409,9 @@ duet-caption:not(:last-of-type) {
   display: block;
   margin-top: 8px;
 }
-.duet-theme-turva .duet-input-help {
-  font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  color: rgb(120, 145, 164);
-}
 .has-error .duet-input-help {
   color: rgb(214, 28, 82);
 }
-.duet-theme-turva.has-error .duet-input-help {
-  color: rgb(214, 28, 82);
-}
 
 .duet-label-hidden label {
   position: absolute;
@@ -542,9 +486,6 @@ duet-caption:not(:last-of-type) {
   border-radius: 4px;
   transition: border 150ms ease;
 }
-.duet-theme-turva .duet-input-variation-revealable .duet-input-relative {
-  border-color: rgb(120, 145, 164);
-}
 .duet-input-variation-revealable .duet-input-relative duet-button {
   z-index: 250;
   margin-bottom: 0;
@@ -564,44 +505,61 @@ duet-caption:not(:last-of-type) {
 .duet-input-variation-revealable.has-error .duet-input-relative {
   border-color: rgb(214, 28, 82);
 }
-.duet-input-variation-revealable.duet-theme-turva.has-error .duet-input-relative {
-  border-color: rgb(214, 28, 82);
-}
 .duet-input-variation-revealable.has-focus .duet-input-relative {
   outline: 2px solid;
   outline-offset: -1px;
   outline-color: rgb(62, 84, 102);
   border-color: rgb(0, 119, 179);
 }
-.duet-input-variation-revealable.duet-theme-turva.has-focus .duet-input-relative {
-  outline: 2px solid;
-  outline-offset: -1px;
-  outline-color: rgb(53, 79, 101);
-  border-color: rgb(23, 42, 59);
-}
-.duet-input-variation-revealable:hover:not(.disabled) .duet-input-relative {
+.duet-input-variation-revealable:hover:not(.disabled):not(.has-focus) .duet-input-relative {
   outline: 2px solid;
-  outline-color: rgb(98, 121, 138);
+  outline-color: rgb(127, 150, 165) !important;
   outline-offset: -1px;
 }
-.duet-theme-turva .duet-input-variation-revealable:hover:not(.disabled) .duet-input-relative, .duet-input-variation-revealable:hover:not(.disabled) .duet-input-relative.duet-theme-turva, .duet-theme-turva2 .duet-input-variation-revealable:hover:not(.disabled) .duet-input-relative, .duet-input-variation-revealable:hover:not(.disabled) .duet-input-relative.duet-theme-turva2 {
-  outline-color: rgb(120, 145, 164);
+.duet-theme-turva .duet-input-variation-revealable:hover:not(.disabled):not(.has-focus) .duet-input-relative, .duet-input-variation-revealable:hover:not(.disabled):not(.has-focus) .duet-input-relative.duet-theme-turva {
+  outline-color: rgb(120, 145, 164) !important;
 }
 .duet-input-variation-revealable.has-error:hover:not(.disabled) .duet-input-relative {
-  outline: 1px solid;
-  outline-color: rgb(214, 28, 82);
   outline-offset: -1px;
+  background-color: rgb(255, 240, 243) !important;
+  border-color: rgb(214, 28, 82) !important;
 }
 
 .duet-input-container.has-chips.has-focus .duet-input-relative {
   outline: 2px solid;
+  outline-color: rgb(0, 119, 179) !important;
   outline-offset: -1px;
-  outline-color: rgb(62, 84, 102);
 }
-.duet-theme-turva .duet-input-container.has-chips.has-focus .duet-input-relative {
+.duet-theme-turva .duet-input-container.has-chips.has-focus .duet-input-relative, .duet-input-container.has-chips.has-focus .duet-input-relative.duet-theme-turva {
+  outline-color: rgb(23, 42, 59) !important;
+}
+.duet-input-container.has-chips:hover:not(:disabled):not(.has-focus) .duet-input-relative {
   outline: 2px solid;
-  outline-offset: 2px;
-  outline-color: rgb(53, 79, 101);
+  outline-color: rgb(127, 150, 165) !important;
+  outline-offset: -1px;
+}
+.duet-theme-turva .duet-input-container.has-chips:hover:not(:disabled):not(.has-focus) .duet-input-relative, .duet-input-container.has-chips:hover:not(:disabled):not(.has-focus) .duet-input-relative.duet-theme-turva {
+  outline-color: rgb(120, 145, 164) !important;
+}
+.duet-input-container.has-chips.has-error .duet-input-relative {
+  outline-offset: -1px;
+  background-color: rgb(255, 240, 243) !important;
+  border-color: rgb(214, 28, 82) !important;
+}
+.duet-input-container.has-chips.has-error.has-focus .duet-input-relative {
+  outline-offset: -1px;
+  background-color: rgb(255, 240, 243) !important;
+  border-color: rgb(214, 28, 82) !important;
+  outline-width: 2px;
+  outline-color: rgb(214, 28, 82) !important;
+  background: rgb(255, 255, 255) !important;
+}
+.duet-input-container.has-chips.has-error:hover:not(:disabled):not(.has-focus) .duet-input-relative {
+  outline-offset: -1px;
+  background-color: rgb(255, 240, 243) !important;
+  border-color: rgb(214, 28, 82) !important;
+  outline-width: 2px;
+  outline-color: rgb(214, 28, 82) !important;
 }
 .duet-input-container.has-chips .duet-input-relative {
   display: flex;
@@ -611,13 +569,11 @@ duet-caption:not(:last-of-type) {
   align-items: center;
   justify-content: flex-start;
   width: auto;
+  padding-right: 2px;
   border: 1px solid rgb(127, 150, 165);
   border-radius: 4px;
   transition: border 150ms ease;
 }
-.duet-theme-turva .duet-input-container.has-chips .duet-input-relative {
-  border-color: rgb(120, 145, 164);
-}
 .duet-input-container.has-chips .duet-input-relative .duet-input {
   flex-grow: 1;
   flex-basis: 4rem;
@@ -630,45 +586,61 @@ duet-caption:not(:last-of-type) {
   border-width: 0 !important;
 }
 
-:host(.duet-theme-turva2) .duet-theme-turva .duet-input-icon {
+.duet-theme-turva .duet-input-icon {
   color: rgb(23, 42, 59);
 }
-:host(.duet-theme-turva2) .duet-theme-turva .duet-input {
+.duet-theme-turva.duet-input-container.has-clear .duet-input-clear-icon button {
+  color: rgb(8, 42, 77);
+}
+.duet-theme-turva.has-error .duet-input + .duet-input-icon {
+  color: rgb(214, 28, 82) !important;
+}
+.duet-theme-turva:not(.has-error) .duet-input {
+  border-color: rgb(120, 145, 164) !important;
+}
+.duet-theme-turva .duet-input {
+  font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   color: rgb(23, 42, 59) !important;
 }
-:host(.duet-theme-turva2) .duet-theme-turva .duet-input::-webkit-input-placeholder {
+.duet-theme-turva .duet-input::placeholder {
   color: rgb(120, 145, 164);
 }
-:host(.duet-theme-turva2) .duet-theme-turva .duet-input:focus::-webkit-input-placeholder {
+.duet-theme-turva .duet-input:focus::placeholder {
   color: rgb(178, 194, 205);
 }
-:host(.duet-theme-turva2) .duet-theme-turva .duet-input:-moz-placeholder {
-  color: rgb(120, 145, 164);
+.duet-theme-turva .duet-input:focus + .duet-input-icon {
+  color: rgb(23, 42, 59);
 }
-:host(.duet-theme-turva2) .duet-theme-turva .duet-input:focus::-moz-placeholder {
-  color: rgb(178, 194, 205);
+.duet-theme-turva .duet-input-variation-button-left.has-focus .duet-input-relative {
+  border-color: rgb(23, 42, 59);
 }
-:host(.duet-theme-turva2) .duet-theme-turva .duet-input:-ms-input-placeholder {
-  color: rgb(120, 145, 164);
+.duet-theme-turva .duet-input-variation-revealable.has-focus .duet-input-relative {
+  border-color: rgb(23, 42, 59);
 }
-:host(.duet-theme-turva2) .duet-theme-turva .duet-input:focus:-ms-input-placeholder {
-  color: rgb(241, 202, 178);
+.duet-theme-turva .duet-input-help {
+  font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  color: rgb(120, 145, 164);
 }
-:host(.duet-theme-turva2) .duet-theme-turva .duet-input[disabled] {
-  color: rgb(23, 42, 59) !important;
-  background: rgb(228, 233, 237) !important;
-  border-color: rgb(228, 233, 237) !important;
-  -webkit-text-fill-color: rgb(23, 42, 59) !important;
+.duet-theme-turva.has-error .duet-input-help {
+  color: rgb(214, 28, 82);
 }
-:host(.duet-theme-turva2) .duet-theme-turva .duet-input:focus {
-  border-color: rgb(23, 42, 59) !important;
+.duet-theme-turva .duet-input-variation-revealable .duet-input-relative {
+  border-color: rgb(120, 145, 164);
 }
-:host(.duet-theme-turva2) .duet-theme-turva .duet-input:focus + .duet-input-icon {
-  color: rgb(23, 42, 59);
+.duet-theme-turva.duet-input-variation-revealable.has-error .duet-input-relative {
+  border-color: rgb(214, 28, 82);
 }
-:host(.duet-theme-turva2) .duet-theme-turva .duet-input-variation-button-left.has-focus .duet-input-relative {
+.duet-theme-turva.duet-input-variation-revealable.has-focus .duet-input-relative {
+  outline: 2px solid;
+  outline-offset: -1px;
+  outline-color: rgb(53, 79, 101);
   border-color: rgb(23, 42, 59);
 }
-:host(.duet-theme-turva2) .duet-theme-turva .duet-input-variation-revealable.has-focus .duet-input-relative {
-  border-color: rgb(23, 42, 59);
+.duet-theme-turva .duet-input-container.has-chips.has-focus .duet-input-relative {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgb(53, 79, 101);
+}
+.duet-theme-turva .duet-input-container.has-chips .duet-input-relative {
+  border-color: rgb(120, 145, 164);
 }