@duetds/components 9.16.1 → 9.18.0

package/lib/cjs/{tokens-22702e71.js → tokens-bdaa8818.js}

@@ -3,6 +3,18 @@
  */
 'use strict';
 
+const color_background_accent_primary = "rgb(240, 247, 250)";
+const color_background_accent_primary_turva = "rgb(253, 247, 242)";
+const color_background_accent_secondary = "rgb(217, 236, 245)";
+const color_background_accent_secondary_turva = "rgb(251, 225, 209)";
+const color_background_accent_tertiary = "rgb(0, 119, 179)";
+const color_background_accent_tertiary_turva = "rgb(230, 23, 64)";
+const color_background_primary = "rgb(255, 255, 255)";
+const color_background_primary_turva = "rgb(255, 255, 255)";
+const color_background_secondary = "rgb(245, 248, 250)";
+const color_background_secondary_turva = "rgb(245, 246, 247)";
+const color_background_tertiary = "rgb(8, 42, 77)";
+const color_background_tertiary_turva = "rgb(6, 23, 38)";
 const color_brand_blue = "rgb(0, 161, 212)";
 const color_brand_gray_turva = "rgb(178, 180, 179)";
 const color_category_family = "rgb(11, 114, 136)";
@@ -109,6 +121,30 @@ const color_success_700 = "rgb(48, 131, 105)";
 const color_success_800 = "rgb(29, 106, 88)";
 const color_success_900 = "rgb(13, 71, 59)";
 const color_success_turva = "rgb(48, 131, 105)";
+const color_turva2_gray_00 = "rgb(245, 246, 247)";
+const color_turva2_gray_100 = "rgb(212, 221, 226)";
+const color_turva2_gray_1000 = "rgb(6, 23, 38)";
+const color_turva2_gray_200 = "rgb(178, 194, 205)";
+const color_turva2_gray_300 = "rgb(148, 169, 185)";
+const color_turva2_gray_400 = "rgb(120, 145, 164)";
+const color_turva2_gray_50 = "rgb(228, 233, 237)";
+const color_turva2_gray_500 = "rgb(95, 122, 143)";
+const color_turva2_gray_600 = "rgb(72, 100, 122)";
+const color_turva2_gray_700 = "rgb(53, 79, 101)";
+const color_turva2_gray_800 = "rgb(37, 60, 80)";
+const color_turva2_gray_900 = "rgb(23, 42, 59)";
+const color_turva2_red_00 = "rgb(255, 242, 242)";
+const color_turva2_red_100 = "rgb(255, 229, 230)";
+const color_turva2_red_1000 = "rgb(51, 0, 10)";
+const color_turva2_red_200 = "rgb(255, 201, 204)";
+const color_turva2_red_300 = "rgb(249, 164, 172)";
+const color_turva2_red_400 = "rgb(243, 119, 133)";
+const color_turva2_red_50 = "rgb(255, 236, 236)";
+const color_turva2_red_500 = "rgb(236, 69, 96)";
+const color_turva2_red_600 = "rgb(230, 23, 64)";
+const color_turva2_red_700 = "rgb(185, 3, 41)";
+const color_turva2_red_800 = "rgb(140, 0, 30)";
+const color_turva2_red_900 = "rgb(96, 0, 20)";
 const color_turva_gray_00 = "rgb(245, 247, 250)";
 const color_turva_gray_100 = "rgb(222, 224, 228)";
 const color_turva_gray_1000 = "rgb(8, 13, 38)";
@@ -121,6 +157,18 @@ const color_turva_gray_600 = "rgb(98, 104, 122)";
 const color_turva_gray_700 = "rgb(71, 78, 101)";
 const color_turva_gray_800 = "rgb(45, 52, 79)";
 const color_turva_gray_900 = "rgb(23, 28, 58)";
+const color_turva_nude_00 = "rgb(253, 247, 242)";
+const color_turva_nude_100 = "rgb(251, 225, 209)";
+const color_turva_nude_1000 = "rgb(38, 21, 15)";
+const color_turva_nude_200 = "rgb(241, 202, 178)";
+const color_turva_nude_300 = "rgb(216, 174, 150)";
+const color_turva_nude_400 = "rgb(190, 147, 124)";
+const color_turva_nude_50 = "rgb(251, 235, 225)";
+const color_turva_nude_500 = "rgb(165, 122, 101)";
+const color_turva_nude_600 = "rgb(140, 98, 79)";
+const color_turva_nude_700 = "rgb(114, 76, 60)";
+const color_turva_nude_800 = "rgb(89, 56, 43)";
+const color_turva_nude_900 = "rgb(64, 38, 28)";
 const color_turva_red_00 = "rgb(255, 241, 241)";
 const color_turva_red_100 = "rgb(255, 213, 215)";
 const color_turva_red_1000 = "rgb(51, 5, 20)";
@@ -251,6 +299,18 @@ const z_index_spinner = "800";
 const z_index_sticky = "300";
 const z_index_toast = "500";
 const tokens = {
+	color_background_accent_primary: color_background_accent_primary,
+	color_background_accent_primary_turva: color_background_accent_primary_turva,
+	color_background_accent_secondary: color_background_accent_secondary,
+	color_background_accent_secondary_turva: color_background_accent_secondary_turva,
+	color_background_accent_tertiary: color_background_accent_tertiary,
+	color_background_accent_tertiary_turva: color_background_accent_tertiary_turva,
+	color_background_primary: color_background_primary,
+	color_background_primary_turva: color_background_primary_turva,
+	color_background_secondary: color_background_secondary,
+	color_background_secondary_turva: color_background_secondary_turva,
+	color_background_tertiary: color_background_tertiary,
+	color_background_tertiary_turva: color_background_tertiary_turva,
 	color_brand_blue: color_brand_blue,
 	color_brand_gray_turva: color_brand_gray_turva,
 	color_category_family: color_category_family,
@@ -357,6 +417,30 @@ const tokens = {
 	color_success_800: color_success_800,
 	color_success_900: color_success_900,
 	color_success_turva: color_success_turva,
+	color_turva2_gray_00: color_turva2_gray_00,
+	color_turva2_gray_100: color_turva2_gray_100,
+	color_turva2_gray_1000: color_turva2_gray_1000,
+	color_turva2_gray_200: color_turva2_gray_200,
+	color_turva2_gray_300: color_turva2_gray_300,
+	color_turva2_gray_400: color_turva2_gray_400,
+	color_turva2_gray_50: color_turva2_gray_50,
+	color_turva2_gray_500: color_turva2_gray_500,
+	color_turva2_gray_600: color_turva2_gray_600,
+	color_turva2_gray_700: color_turva2_gray_700,
+	color_turva2_gray_800: color_turva2_gray_800,
+	color_turva2_gray_900: color_turva2_gray_900,
+	color_turva2_red_00: color_turva2_red_00,
+	color_turva2_red_100: color_turva2_red_100,
+	color_turva2_red_1000: color_turva2_red_1000,
+	color_turva2_red_200: color_turva2_red_200,
+	color_turva2_red_300: color_turva2_red_300,
+	color_turva2_red_400: color_turva2_red_400,
+	color_turva2_red_50: color_turva2_red_50,
+	color_turva2_red_500: color_turva2_red_500,
+	color_turva2_red_600: color_turva2_red_600,
+	color_turva2_red_700: color_turva2_red_700,
+	color_turva2_red_800: color_turva2_red_800,
+	color_turva2_red_900: color_turva2_red_900,
 	color_turva_gray_00: color_turva_gray_00,
 	color_turva_gray_100: color_turva_gray_100,
 	color_turva_gray_1000: color_turva_gray_1000,
@@ -369,6 +453,18 @@ const tokens = {
 	color_turva_gray_700: color_turva_gray_700,
 	color_turva_gray_800: color_turva_gray_800,
 	color_turva_gray_900: color_turva_gray_900,
+	color_turva_nude_00: color_turva_nude_00,
+	color_turva_nude_100: color_turva_nude_100,
+	color_turva_nude_1000: color_turva_nude_1000,
+	color_turva_nude_200: color_turva_nude_200,
+	color_turva_nude_300: color_turva_nude_300,
+	color_turva_nude_400: color_turva_nude_400,
+	color_turva_nude_50: color_turva_nude_50,
+	color_turva_nude_500: color_turva_nude_500,
+	color_turva_nude_600: color_turva_nude_600,
+	color_turva_nude_700: color_turva_nude_700,
+	color_turva_nude_800: color_turva_nude_800,
+	color_turva_nude_900: color_turva_nude_900,
 	color_turva_red_00: color_turva_red_00,
 	color_turva_red_100: color_turva_red_100,
 	color_turva_red_1000: color_turva_red_1000,
@@ -502,6 +598,18 @@ const tokens = {
 
 const tokens$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
+  color_background_accent_primary: color_background_accent_primary,
+  color_background_accent_primary_turva: color_background_accent_primary_turva,
+  color_background_accent_secondary: color_background_accent_secondary,
+  color_background_accent_secondary_turva: color_background_accent_secondary_turva,
+  color_background_accent_tertiary: color_background_accent_tertiary,
+  color_background_accent_tertiary_turva: color_background_accent_tertiary_turva,
+  color_background_primary: color_background_primary,
+  color_background_primary_turva: color_background_primary_turva,
+  color_background_secondary: color_background_secondary,
+  color_background_secondary_turva: color_background_secondary_turva,
+  color_background_tertiary: color_background_tertiary,
+  color_background_tertiary_turva: color_background_tertiary_turva,
   color_brand_blue: color_brand_blue,
   color_brand_gray_turva: color_brand_gray_turva,
   color_category_family: color_category_family,
@@ -608,6 +716,30 @@ const tokens$1 = /*#__PURE__*/Object.freeze({
   color_success_800: color_success_800,
   color_success_900: color_success_900,
   color_success_turva: color_success_turva,
+  color_turva2_gray_00: color_turva2_gray_00,
+  color_turva2_gray_100: color_turva2_gray_100,
+  color_turva2_gray_1000: color_turva2_gray_1000,
+  color_turva2_gray_200: color_turva2_gray_200,
+  color_turva2_gray_300: color_turva2_gray_300,
+  color_turva2_gray_400: color_turva2_gray_400,
+  color_turva2_gray_50: color_turva2_gray_50,
+  color_turva2_gray_500: color_turva2_gray_500,
+  color_turva2_gray_600: color_turva2_gray_600,
+  color_turva2_gray_700: color_turva2_gray_700,
+  color_turva2_gray_800: color_turva2_gray_800,
+  color_turva2_gray_900: color_turva2_gray_900,
+  color_turva2_red_00: color_turva2_red_00,
+  color_turva2_red_100: color_turva2_red_100,
+  color_turva2_red_1000: color_turva2_red_1000,
+  color_turva2_red_200: color_turva2_red_200,
+  color_turva2_red_300: color_turva2_red_300,
+  color_turva2_red_400: color_turva2_red_400,
+  color_turva2_red_50: color_turva2_red_50,
+  color_turva2_red_500: color_turva2_red_500,
+  color_turva2_red_600: color_turva2_red_600,
+  color_turva2_red_700: color_turva2_red_700,
+  color_turva2_red_800: color_turva2_red_800,
+  color_turva2_red_900: color_turva2_red_900,
   color_turva_gray_00: color_turva_gray_00,
   color_turva_gray_100: color_turva_gray_100,
   color_turva_gray_1000: color_turva_gray_1000,
@@ -620,6 +752,18 @@ const tokens$1 = /*#__PURE__*/Object.freeze({
   color_turva_gray_700: color_turva_gray_700,
   color_turva_gray_800: color_turva_gray_800,
   color_turva_gray_900: color_turva_gray_900,
+  color_turva_nude_00: color_turva_nude_00,
+  color_turva_nude_100: color_turva_nude_100,
+  color_turva_nude_1000: color_turva_nude_1000,
+  color_turva_nude_200: color_turva_nude_200,
+  color_turva_nude_300: color_turva_nude_300,
+  color_turva_nude_400: color_turva_nude_400,
+  color_turva_nude_50: color_turva_nude_50,
+  color_turva_nude_500: color_turva_nude_500,
+  color_turva_nude_600: color_turva_nude_600,
+  color_turva_nude_700: color_turva_nude_700,
+  color_turva_nude_800: color_turva_nude_800,
+  color_turva_nude_900: color_turva_nude_900,
   color_turva_red_00: color_turva_red_00,
   color_turva_red_100: color_turva_red_100,
   color_turva_red_1000: color_turva_red_1000,

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;
@@ -89,6 +78,7 @@
   border: 1px solid rgb(163, 229, 202);
 }
 .duet-alert-wrapper.below-nav {
+  z-index: 1;
   margin-bottom: 0 !important;
   border: 0;
   border-bottom: 1px solid rgb(212, 223, 229);

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"
+                        }]
                 }
             }
         };