@duetds/components 9.17.0 → 9.18.0

package/lib/cjs/{tokens.module-a7c77c13.js → tokens.module-2358195b.js}

@@ -3,6 +3,18 @@
  */
 'use strict';
 
+const colorBackgroundAccentPrimary = "rgb(240, 247, 250)";
+const colorBackgroundAccentPrimaryTurva = "rgb(253, 247, 242)";
+const colorBackgroundAccentSecondary = "rgb(217, 236, 245)";
+const colorBackgroundAccentSecondaryTurva = "rgb(251, 225, 209)";
+const colorBackgroundAccentTertiary = "rgb(0, 119, 179)";
+const colorBackgroundAccentTertiaryTurva = "rgb(230, 23, 64)";
+const colorBackgroundPrimary = "rgb(255, 255, 255)";
+const colorBackgroundPrimaryTurva = "rgb(255, 255, 255)";
+const colorBackgroundSecondary = "rgb(245, 248, 250)";
+const colorBackgroundSecondaryTurva = "rgb(245, 246, 247)";
+const colorBackgroundTertiary = "rgb(8, 42, 77)";
+const colorBackgroundTertiaryTurva = "rgb(6, 23, 38)";
 const colorBrandBlue = "rgb(0, 161, 212)";
 const colorBrandGrayTurva = "rgb(178, 180, 179)";
 const colorCategoryFamily = "rgb(11, 114, 136)";
@@ -109,6 +121,30 @@ const colorSuccess700 = "rgb(48, 131, 105)";
 const colorSuccess800 = "rgb(29, 106, 88)";
 const colorSuccess900 = "rgb(13, 71, 59)";
 const colorSuccessTurva = "rgb(48, 131, 105)";
+const colorTurva2Gray00 = "rgb(245, 246, 247)";
+const colorTurva2Gray100 = "rgb(212, 221, 226)";
+const colorTurva2Gray1000 = "rgb(6, 23, 38)";
+const colorTurva2Gray200 = "rgb(178, 194, 205)";
+const colorTurva2Gray300 = "rgb(148, 169, 185)";
+const colorTurva2Gray400 = "rgb(120, 145, 164)";
+const colorTurva2Gray50 = "rgb(228, 233, 237)";
+const colorTurva2Gray500 = "rgb(95, 122, 143)";
+const colorTurva2Gray600 = "rgb(72, 100, 122)";
+const colorTurva2Gray700 = "rgb(53, 79, 101)";
+const colorTurva2Gray800 = "rgb(37, 60, 80)";
+const colorTurva2Gray900 = "rgb(23, 42, 59)";
+const colorTurva2Red00 = "rgb(255, 242, 242)";
+const colorTurva2Red100 = "rgb(255, 229, 230)";
+const colorTurva2Red1000 = "rgb(51, 0, 10)";
+const colorTurva2Red200 = "rgb(255, 201, 204)";
+const colorTurva2Red300 = "rgb(249, 164, 172)";
+const colorTurva2Red400 = "rgb(243, 119, 133)";
+const colorTurva2Red50 = "rgb(255, 236, 236)";
+const colorTurva2Red500 = "rgb(236, 69, 96)";
+const colorTurva2Red600 = "rgb(230, 23, 64)";
+const colorTurva2Red700 = "rgb(185, 3, 41)";
+const colorTurva2Red800 = "rgb(140, 0, 30)";
+const colorTurva2Red900 = "rgb(96, 0, 20)";
 const colorTurvaGray00 = "rgb(245, 247, 250)";
 const colorTurvaGray100 = "rgb(222, 224, 228)";
 const colorTurvaGray1000 = "rgb(8, 13, 38)";
@@ -121,6 +157,18 @@ const colorTurvaGray600 = "rgb(98, 104, 122)";
 const colorTurvaGray700 = "rgb(71, 78, 101)";
 const colorTurvaGray800 = "rgb(45, 52, 79)";
 const colorTurvaGray900 = "rgb(23, 28, 58)";
+const colorTurvaNude00 = "rgb(253, 247, 242)";
+const colorTurvaNude100 = "rgb(251, 225, 209)";
+const colorTurvaNude1000 = "rgb(38, 21, 15)";
+const colorTurvaNude200 = "rgb(241, 202, 178)";
+const colorTurvaNude300 = "rgb(216, 174, 150)";
+const colorTurvaNude400 = "rgb(190, 147, 124)";
+const colorTurvaNude50 = "rgb(251, 235, 225)";
+const colorTurvaNude500 = "rgb(165, 122, 101)";
+const colorTurvaNude600 = "rgb(140, 98, 79)";
+const colorTurvaNude700 = "rgb(114, 76, 60)";
+const colorTurvaNude800 = "rgb(89, 56, 43)";
+const colorTurvaNude900 = "rgb(64, 38, 28)";
 const colorTurvaRed00 = "rgb(255, 241, 241)";
 const colorTurvaRed100 = "rgb(255, 213, 215)";
 const colorTurvaRed1000 = "rgb(51, 5, 20)";
@@ -253,6 +301,18 @@ const zIndexToast = "500";
 
 const tokens = /*#__PURE__*/Object.freeze({
 	__proto__: null,
+	colorBackgroundAccentPrimary: colorBackgroundAccentPrimary,
+	colorBackgroundAccentPrimaryTurva: colorBackgroundAccentPrimaryTurva,
+	colorBackgroundAccentSecondary: colorBackgroundAccentSecondary,
+	colorBackgroundAccentSecondaryTurva: colorBackgroundAccentSecondaryTurva,
+	colorBackgroundAccentTertiary: colorBackgroundAccentTertiary,
+	colorBackgroundAccentTertiaryTurva: colorBackgroundAccentTertiaryTurva,
+	colorBackgroundPrimary: colorBackgroundPrimary,
+	colorBackgroundPrimaryTurva: colorBackgroundPrimaryTurva,
+	colorBackgroundSecondary: colorBackgroundSecondary,
+	colorBackgroundSecondaryTurva: colorBackgroundSecondaryTurva,
+	colorBackgroundTertiary: colorBackgroundTertiary,
+	colorBackgroundTertiaryTurva: colorBackgroundTertiaryTurva,
 	colorBrandBlue: colorBrandBlue,
 	colorBrandGrayTurva: colorBrandGrayTurva,
 	colorCategoryFamily: colorCategoryFamily,
@@ -359,6 +419,30 @@ const tokens = /*#__PURE__*/Object.freeze({
 	colorSuccess800: colorSuccess800,
 	colorSuccess900: colorSuccess900,
 	colorSuccessTurva: colorSuccessTurva,
+	colorTurva2Gray00: colorTurva2Gray00,
+	colorTurva2Gray100: colorTurva2Gray100,
+	colorTurva2Gray1000: colorTurva2Gray1000,
+	colorTurva2Gray200: colorTurva2Gray200,
+	colorTurva2Gray300: colorTurva2Gray300,
+	colorTurva2Gray400: colorTurva2Gray400,
+	colorTurva2Gray50: colorTurva2Gray50,
+	colorTurva2Gray500: colorTurva2Gray500,
+	colorTurva2Gray600: colorTurva2Gray600,
+	colorTurva2Gray700: colorTurva2Gray700,
+	colorTurva2Gray800: colorTurva2Gray800,
+	colorTurva2Gray900: colorTurva2Gray900,
+	colorTurva2Red00: colorTurva2Red00,
+	colorTurva2Red100: colorTurva2Red100,
+	colorTurva2Red1000: colorTurva2Red1000,
+	colorTurva2Red200: colorTurva2Red200,
+	colorTurva2Red300: colorTurva2Red300,
+	colorTurva2Red400: colorTurva2Red400,
+	colorTurva2Red50: colorTurva2Red50,
+	colorTurva2Red500: colorTurva2Red500,
+	colorTurva2Red600: colorTurva2Red600,
+	colorTurva2Red700: colorTurva2Red700,
+	colorTurva2Red800: colorTurva2Red800,
+	colorTurva2Red900: colorTurva2Red900,
 	colorTurvaGray00: colorTurvaGray00,
 	colorTurvaGray100: colorTurvaGray100,
 	colorTurvaGray1000: colorTurvaGray1000,
@@ -371,6 +455,18 @@ const tokens = /*#__PURE__*/Object.freeze({
 	colorTurvaGray700: colorTurvaGray700,
 	colorTurvaGray800: colorTurvaGray800,
 	colorTurvaGray900: colorTurvaGray900,
+	colorTurvaNude00: colorTurvaNude00,
+	colorTurvaNude100: colorTurvaNude100,
+	colorTurvaNude1000: colorTurvaNude1000,
+	colorTurvaNude200: colorTurvaNude200,
+	colorTurvaNude300: colorTurvaNude300,
+	colorTurvaNude400: colorTurvaNude400,
+	colorTurvaNude50: colorTurvaNude50,
+	colorTurvaNude500: colorTurvaNude500,
+	colorTurvaNude600: colorTurvaNude600,
+	colorTurvaNude700: colorTurvaNude700,
+	colorTurvaNude800: colorTurvaNude800,
+	colorTurvaNude900: colorTurvaNude900,
 	colorTurvaRed00: colorTurvaRed00,
 	colorTurvaRed100: colorTurvaRed100,
 	colorTurvaRed1000: colorTurvaRed1000,

package/lib/collection/components/duet-action-button/duet-action-button.css

@@ -4,22 +4,22 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 :host {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   display: inline-block;
   margin: 0 auto;
 }
@@ -40,6 +40,16 @@
   border-radius: 50%;
   transition: background-color 300ms ease !important;
 }
+.duet-action-button:focus {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
+}
+.duet-theme-turva .duet-action-button:focus, .duet-action-button:focus.duet-theme-turva, .duet-theme-turva2 .duet-action-button:focus, .duet-action-button:focus.duet-theme-turva2 {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(53, 79, 101, 0.8);
+}
 .duet-action-button.duet-theme-turva {
   color: rgb(23, 28, 58);
   background: rgb(245, 247, 250);
@@ -59,16 +69,8 @@
 .duet-action-button:not(:disabled):hover.duet-theme-turva {
   background: #e9ebee;
 }
-.duet-action-button:focus {
-  outline: 0;
-  box-shadow: 0 0 0 2px #0077b3 !important;
-}
-.duet-action-button:focus.duet-theme-turva {
-  box-shadow: 0 0 0 2px #171c3a !important;
-}
 .duet-action-button:active:focus {
   background: #dddfe1 !important;
-  box-shadow: none;
 }
 .duet-action-button:active:focus.duet-theme-turva {
   background: #dddee1 !important;
@@ -85,20 +87,16 @@
 }
 
 :host(.duet-theme-turva2) .duet-action-button.duet-theme-turva {
-  color: #172a3b;
-  background: #fdf7f2;
+  color: rgb(23, 42, 59);
+  background: rgb(253, 247, 242);
 }
 :host(.duet-theme-turva2) .duet-action-button.duet-theme-turva:not(:disabled):hover {
   background: #f0ebe6;
 }
-:host(.duet-theme-turva2) .duet-action-button.duet-theme-turva:focus {
-  box-shadow: 0 0 0 2px #172a3b !important;
-}
 :host(.duet-theme-turva2) .duet-action-button.duet-theme-turva:active:focus {
   background: #e4deda !important;
-  box-shadow: none;
 }
 :host(.duet-theme-turva2) .duet-action-button.duet-theme-turva:disabled {
-  color: #7891a4;
-  background: #f5f6f7;
+  color: rgb(120, 145, 164);
+  background: rgb(245, 246, 247);
 }

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

@@ -4,56 +4,45 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 :host {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
-  display: block;
+  background: transparent;
+  border: 0;
+  display: grid;
+  grid-template-rows: 1fr;
   width: 100%;
-  max-height: 999px;
-  transition: opacity 300ms ease, visibility 300ms ease, transform 300ms ease, max-height 300ms ease;
-}
-
-:host(:focus) {
-  outline: 0;
-}
-
-:host(.user-is-tabbing:focus) {
-  border-radius: 4px;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
-}
-
-:host(.user-is-tabbing.duet-theme-turva:focus) {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+  transition: opacity 300ms ease, visibility 300ms ease, transform 300ms ease, grid-template-rows 300ms ease;
 }
 
 :host(.duet-alert-is-dismissed) {
-  max-height: 0;
-  overflow: hidden;
   visibility: hidden !important;
+  grid-template-rows: 0fr;
   opacity: 0;
   transform: scale(0.98);
 }
-:host(.duet-alert-is-dismissed) .duet-alert {
+:host(.duet-alert-is-dismissed) .duet-alert,
+:host(.duet-alert-is-dismissed) .duet-alert-wrapper {
   margin: 0 !important;
+  border-width: 0 !important;
 }
 
 .duet-alert-wrapper {
   margin-bottom: 16px !important;
   position: relative;
   width: 100%;
+  overflow: hidden;
   font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-size: 1rem;
   font-weight: 400;

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

@@ -5,7 +5,6 @@ import { h, Host } from "@stencil/core";
 import { DuetStatusLabels } from "../../common-strings";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { createID } from "../../utils/create-id";
-import { subscribeTabbingChange, unsubscribeTabbingChange } from "../../utils/keyboard-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLocaleString, } from "../../utils/language-utils";
 import { hasSlot } from "../../utils/slot-utils";
 /**
@@ -77,14 +76,12 @@ export class DuetAlert {
     }
     connectedCallback() {
         connectLanguageChangeObserver(this, { prop: "accessibleLabel", defaults: "accessibleLabelDefaults" });
-        subscribeTabbingChange(this);
     }
     disconnectedCallback() {
         if (this.timeoutID) {
             clearTimeout(this.timeoutID);
         }
         disconnectLanguageChangeObserver(this);
-        unsubscribeTabbingChange(this);
     }
     /**
      * Show.
@@ -99,10 +96,7 @@ export class DuetAlert {
         this.handleHide();
     }
     /**
-     * Sets focus on the specified `duet-alert`.
-     * Works only when focusable property is set to true.
-     * Use this method instead of the global
-     * `button.focus()`.
+     * @deprecated - if you need to set focus, use a focusable element inside
      */
     async setFocus(options) {
         this.alertContainer.focus(options);
@@ -121,17 +115,17 @@ export class DuetAlert {
             ? this.variation
             : "default";
         const variationLabel = getLocaleString(DuetStatusLabels[variation]);
-        return (h(Host, { key: 'b204a657de629955d04058f3c43813aa00980c1e', class: {
+        return (h(Host, { key: 'e8f6453951bdff6bcfebd3530d9cf0778842ad35', class: {
                 "duet-theme-turva": this.theme === "turva",
                 "duet-alert-is-dismissed": this.isDismissed,
-            }, role: this.getRole() }, h("div", { key: '0d573c37ae4013f7fdef0d89a7d2cfff38157b44', class: {
+            }, role: this.getRole() }, h("div", { key: '2f8010d50d96097d66d0cef58d35cbb008f314f0', class: {
                 "duet-alert-wrapper": true,
                 "duet-p-0": this.padding === "none",
                 "duet-m-0": this.margin === "none",
                 [variation]: true,
                 [this.position]: true,
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("div", { key: 'ecb946bd29811c5ee207804498810a6cd3c83889', class: {
+            } }, h("div", { key: 'b0b1d04c9ef3baa460c1d8d30f18f5f3b4b96d9c', class: {
                 "duet-alert": true,
                 "duet-alert-expandable": !!this.expandingTitle,
                 "duet-alert-expanded": this.isExpanded,
@@ -142,9 +136,9 @@ export class DuetAlert {
                 "duet-m-0": this.margin === "none",
                 [variation]: true,
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("div", { key: '88e63f17d9d316a933266a2d98be63f1cf6fa939', class: "duet-alert-container", ref: element => {
+            } }, h("div", { key: '1464c0cde46615a3e6b7b90a67b0713ba25cf002', class: "duet-alert-container", ref: element => {
                 this.alertContainer = element;
-            }, tabindex: this.focusable ? "0" : undefined }, this.position !== "below-nav" && (h("div", { key: 'd0e266b3c576ec9c2532053c292c3bfbbc9d92b0', class: "duet-alert-icon" }, (this.icon && h("duet-icon", { key: 'efa5d1133ba832aa3e88fb419b8f2b454b5536c1', size: "auto", name: this.icon, color: "currentColor" })) || (h("duet-status-icon", { key: '7e00c8f29fb7a33a041acfbd82d1c359eadaf605', strong: true, variation: variation, margin: "none", size: "auto" })))), this.position === "below-nav" && (h("div", { key: '0314c3a000a06a357a7850f6c72002df3d32a541', class: "duet-alert-icon below-nav" }, h("duet-status-icon", { key: 'aec093d7be9e0c0d8940a5e0813495f707daefc0', strong: true, variation: variation, margin: "none", size: "auto" }))), h("div", { key: '97522cbf67c23477ae71603418f85f3d1a13d3c2', class: "duet-alert-content", id: this.descriptiveId }, this.expandingTitle && (h("button", { key: '08d8a6d3b089bad3c54727907f6ba1df213a9103', "aria-expanded": this.isExpanded.toString(), "aria-controls": `${this.descriptiveId}-content`, class: "duet-alert-expander", onClick: this.handleExpandToggle }, h("span", { key: '4efe686cc2dff3077ea3efed7a52c79c3b8c090a', class: "expanding-title" }, this.expandingTitle), h("duet-icon", { key: '2da0cd85883d2e850d65e0682c391079bcce2001', name: "action-arrow-down", color: variation === "default" ? "lt-blue-800" : `${variation}-800`, margin: "none", size: "x-small" }))), (!this.expandingTitle || this.isExpanded) && (h("div", { key: 'dd67482dc47bb4b23d8ff7fdbc7f50a09fd7f355', id: `${this.descriptiveId}-content` }, h("duet-visually-hidden", { key: '0f892f87996b79076b9c04e9d66fadbe681cf913' }, variationLabel), h("slot", { key: 'fac36116e1b9128ad398c4cf997d8c0fd3bca795' }))))), this.hasShowMoreSlot && (h("duet-show-more", { key: '10530ff533c94cb9c85eb23cae9ed3475f3567f2', margin: "none", class: "duet-alert-show-more" }, h("slot", { key: '06e77a909ef86b0ae2e83e818e88c75b8caa9969', name: "show-more" }))), this.dismissible && !this.expandingTitle && (h("div", { key: '65f541e6bf54abcfa91757571cffb18013188c39', class: "duet-alert-dismiss" }, h("duet-button", { key: 'a2e00a7f2d07d04bf388544893ddb56d332c8929', variation: "plain", accessibleLabel: this.accessibleLabel, accessibleDescribedBy: this.descriptiveId, iconSize: "medium", icon: "navigation-close", iconOnly: true, margin: "none", color: variation === "default" ? "lt-blue-800" : `${variation}-800`, theme: this.theme, onClick: this.handleDismiss, fixed: true })))))));
+            }, tabindex: this.focusable ? "-1" : undefined }, this.position !== "below-nav" && (h("div", { key: '924a50c915605a0fc653b2cd5a5a6341c7b9156f', class: "duet-alert-icon" }, (this.icon && h("duet-icon", { key: 'ccf3963fc3405034a7001e586397886ac586b504', size: "auto", name: this.icon, color: "currentColor" })) || (h("duet-status-icon", { key: '5adef94d4b80e48815a399928dee36d416caa3f8', strong: true, variation: variation, margin: "none", size: "auto" })))), this.position === "below-nav" && (h("div", { key: 'bb1d04fb4ad4d5668dfef4fab649c23d09832d07', class: "duet-alert-icon below-nav" }, h("duet-status-icon", { key: 'a9cedbe680d906a25dc159b5637a30ee66491f03', strong: true, variation: variation, margin: "none", size: "auto" }))), h("div", { key: '8f1df5b4082d396e964b00b56da99f77ec4d9437', class: "duet-alert-content", id: this.descriptiveId }, this.expandingTitle && (h("button", { key: 'ecc75f181b29ccce59576cdc8db496b02511c201', "aria-expanded": this.isExpanded.toString(), "aria-controls": `${this.descriptiveId}-content`, class: "duet-alert-expander", onClick: this.handleExpandToggle }, h("span", { key: 'eaaec58855ddf50c82d723f17056eef40d794ee4', class: "expanding-title" }, this.expandingTitle), h("duet-icon", { key: '4504fda244cb64041c316142ccffd971a4399e78', name: "action-arrow-down", color: variation === "default" ? "lt-blue-800" : `${variation}-800`, margin: "none", size: "x-small" }))), (!this.expandingTitle || this.isExpanded) && (h("div", { key: 'a29eb8175f93a97b7195c7c9800bc5d62bb66073', id: `${this.descriptiveId}-content` }, h("duet-visually-hidden", { key: 'c7cb9674adeb3d85568090d9b97cf692d1609ed1' }, variationLabel), h("slot", { key: '49d810ac06046de2cb02a0210e9ad6eff7397f2b' }))))), this.hasShowMoreSlot && (h("duet-show-more", { key: '7fd2463d982eecdbeeea603266e2190b9347b6d5', margin: "none", class: "duet-alert-show-more" }, h("slot", { key: 'a229f22d76731baf242bca5613a990fa7508e611', name: "show-more" }))), this.dismissible && !this.expandingTitle && (h("div", { key: '1e2f89c906c19cc8703eb1ce0ab643d550e94260', class: "duet-alert-dismiss" }, h("duet-button", { key: '80a86e22bd7b0317fbe4685879847f10d7598740', variation: "plain", accessibleLabel: this.accessibleLabel, accessibleDescribedBy: this.descriptiveId, iconSize: "medium", icon: "navigation-close", iconOnly: true, margin: "none", color: variation === "default" ? "lt-blue-800" : `${variation}-800`, theme: this.theme, onClick: this.handleDismiss, fixed: true })))))));
     }
     static get is() { return "duet-alert"; }
     static get encapsulation() { return "shadow"; }
@@ -432,8 +426,11 @@ export class DuetAlert {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Make alert focusable."
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "- if you need to set focus, use a focusable element inside\nMake alert focusable."
+                        }],
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false,
@@ -566,8 +563,11 @@ export class DuetAlert {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Sets focus on the specified `duet-alert`.\nWorks only when focusable property is set to true.\nUse this method instead of the global\n`button.focus()`.",
-                    "tags": []
+                    "text": "",
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "- if you need to set focus, use a focusable element inside"
+                        }]
                 }
             }
         };

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

@@ -4,22 +4,22 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 :host {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   margin-right: 4px !important;
   margin-bottom: 2px !important;
   display: inline-block;
@@ -43,10 +43,10 @@
   font-style: normal;
   font-weight: 600;
   line-height: 1.25;
+  vertical-align: middle;
   color: rgb(8, 42, 77);
   text-align: center;
   word-break: break-word;
-  vertical-align: middle;
   background: #d9ebf4;
   border-radius: 20rem;
 }
@@ -83,14 +83,14 @@
 }
 .duet-badge.subtle {
   color: rgb(98, 121, 138);
-  background: none;
   outline: 1px solid rgb(212, 223, 229);
   outline-offset: -1px;
+  background: none;
 }
 .duet-badge.subtle.duet-theme-turva {
   color: rgb(113, 118, 132);
-  background: none;
   outline-color: rgb(222, 224, 228);
+  background: none;
 }
 .duet-badge.background-strong.default {
   color: rgb(255, 255, 255);
@@ -123,22 +123,22 @@
   background: rgb(48, 131, 105);
 }
 .duet-badge.background-strong.subtle {
-  border-color: rgb(181, 198, 208);
   outline-color: rgb(8, 42, 77);
+  border-color: rgb(181, 198, 208);
 }
 .duet-badge.background-strong.subtle.duet-theme-turva {
-  border-color: rgb(199, 202, 207);
   outline-color: rgb(23, 28, 58);
+  border-color: rgb(199, 202, 207);
 }
 
 :host(.duet-theme-turva2) .duet-badge.duet-theme-turva.default {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
   background: #e8eaeb;
 }
 :host(.duet-theme-turva2) .duet-badge.duet-theme-turva.background-strong.default {
   color: rgb(255, 255, 255);
-  background: #172a3b;
+  background: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) .duet-badge.duet-theme-turva.background-strong.subtle {
-  outline-color: #172a3b;
+  outline-color: rgb(23, 42, 59);
 }

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

@@ -4,22 +4,22 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 :host {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   margin-right: 36px !important;
   margin-bottom: 36px !important;
   display: flex;
@@ -56,11 +56,9 @@
   position: relative;
   display: none;
   overflow: hidden;
-  /* stylelint-disable */
 }
-@container duet-banner-container (min-width: 0px) {
+@container duet-banner-container (min-width: 0) {
   .duet-banner .visual {
-    /* stylelint-enable */
     display: block;
   }
 }
@@ -100,8 +98,8 @@
 }
 .duet-banner .action {
   display: flex;
-  flex-direction: column;
   flex-grow: 1;
+  flex-direction: column;
   align-items: flex-start;
   justify-content: flex-end;
   padding-top: 16px;
@@ -125,13 +123,8 @@
 .duet-banner.duet-theme-turva .visual .brand-shape {
   mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 344' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_7920_3801)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2.58983 142.533C0.751086 155.147 0.0746585 167.857 0.00796847 179.225C0.00263853 179.814 0 180.409 0 181.007C0 194.845 1.41172 210.806 3.58065 223.171C5.6528 234.934 8.58716 246.495 12.5981 257.779C21.2249 282.059 34.0151 304.109 50.8401 323.977C56.7824 330.993 63.0921 337.68 69.8162 344H160V0H65.0733C52.1771 10.7866 41.4339 23.4177 32.7528 37.7978C21.1154 57.0822 14.0367 77.9583 9.75424 99.7913C9.09214 103.157 8.55049 106.545 8.00901 109.933C7.75185 111.542 7.49474 113.15 7.22478 114.756C6.74308 117.618 6.24543 120.479 5.74776 123.34C4.6361 129.729 3.52432 136.12 2.58983 142.533Z' fill='%23F5F5F7'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_7920_3801'%3E%3Crect width='160' height='344' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
 }
-.duet-banner.size-medium, .duet-banner.size-large {
-  /* stylelint-disable */
-  /* stylelint-disable */
-}
 @container duet-banner-container (min-width: 486px) {
   .duet-banner.size-medium, .duet-banner.size-large {
-    /* stylelint-enable */
     grid-template-rows: none;
     grid-template-columns: 50% 50%;
   }
@@ -164,19 +157,12 @@
   }
 }
 @container duet-banner-container (min-width: 586px) {
-  .duet-banner.size-medium, .duet-banner.size-large {
-    /* stylelint-enable */
-  }
   .duet-banner.size-medium .visual .brand-shape, .duet-banner.size-large .visual .brand-shape {
     left: 80%;
   }
 }
-.duet-banner.size-large {
-  /* stylelint-disable */
-}
 @container duet-banner-container (min-width: 900px) {
   .duet-banner.size-large {
-    /* stylelint-enable */
     grid-template-rows: none;
     grid-template-columns: 50% 50%;
   }
@@ -221,12 +207,8 @@
   max-width: 720px;
   padding: 0;
 }
-.duet-banner.no-image.size-medium, .duet-banner.no-image.size-large {
-  /* stylelint-disable */
-}
 @container duet-banner-container (min-width: 486px) {
   .duet-banner.no-image.size-medium, .duet-banner.no-image.size-large {
-    /* stylelint-enable */
     padding: 48px;
   }
 }
@@ -234,9 +216,6 @@
 :host(.duet-theme-turva2) .duet-banner {
   border-radius: 8px;
 }
-:host(.duet-theme-turva2) .duet-banner.size-medium, :host(.duet-theme-turva2) .duet-banner.size-large {
-  /* stylelint-disable */
-}
 :host(.duet-theme-turva2) .duet-banner.size-medium .visual, :host(.duet-theme-turva2) .duet-banner.size-large .visual {
   border-top-left-radius: 8px;
   border-top-right-radius: 8px;
@@ -246,7 +225,6 @@
 }
 @container duet-banner-container (min-width: 486px) {
   :host(.duet-theme-turva2) .duet-banner.size-medium, :host(.duet-theme-turva2) .duet-banner.size-large {
-    /* stylelint-enable */
     grid-template-columns: 1fr 1fr;
     gap: 28px;
     border-radius: 12px;

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

@@ -4,22 +4,22 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 :host {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   display: list-item;
   width: auto;
 }
@@ -60,8 +60,10 @@
   outline: 0;
 }
 :host(.user-is-tabbing) .duet-breadcrumb:focus {
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
 }
-:host(.user-is-tabbing) .duet-breadcrumb.duet-theme-turva:focus {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+.duet-theme-turva :host(.user-is-tabbing) .duet-breadcrumb:focus, :host(.user-is-tabbing) .duet-breadcrumb:focus.duet-theme-turva, .duet-theme-turva2 :host(.user-is-tabbing) .duet-breadcrumb:focus, :host(.user-is-tabbing) .duet-breadcrumb:focus.duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
 }

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

@@ -4,22 +4,22 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 :host {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   display: block;
   width: 100%;
 }
@@ -143,12 +143,12 @@
 }
 
 :host(.duet-theme-turva2) .duet-breadcrumbs.duet-theme-turva.header {
-  color: #172a3b;
-  background: #fdf7f2;
+  color: rgb(23, 42, 59);
+  background: rgb(253, 247, 242);
 }
 :host(.duet-theme-turva2) .duet-breadcrumbs.duet-theme-turva.header ol duet-breadcrumb[href]:hover {
   color: rgb(126, 2, 35);
 }
 :host(.duet-theme-turva2) .duet-breadcrumbs.duet-theme-turva.footer {
-  background: #e61740;
+  background: rgb(230, 23, 64);
 }