@duetds/components 10.0.0-alpha.3 → 10.0.0-alpha.31

package/lib/esm/{token-utils-b9ba8c5e.js → token-utils-Dw-GA7-4.js}

@@ -1,9 +1,36 @@
 /*!
  * Built with Duet Design System
  */
-import { m as mediaQueryXxSmall, a as mediaQueryXSmall, b as mediaQuerySmall, c as mediaQueryMedium, d as mediaQueryLarge, e as mediaQueryXLarge, f as mediaQueryXxLarge, g as mediaQueryXxxLarge, h as mediaQueryXxxSmall, t as tokens } from './tokens.module-2d02f5ff.js';
+import { m as mediaQueryXxxLarge, e as mediaQueryXxLarge, f as mediaQueryXLarge, g as mediaQueryLarge, h as mediaQueryMedium, i as mediaQuerySmall, j as mediaQueryXSmall, k as mediaQueryXxSmall, l as mediaQueryXxxSmall, t as tokens } from './tokens.module-Bh9dkusU.js';
+
+const turva2ColorTokens = {
+    "color-turva2-red-600": "rgb(230, 23, 64)",
+    "color-turva2-red-700": "rgb(185, 3, 41)",
+    "color-turva2-red-800": "rgb(140, 0, 30)",
+    "color-turva2-gray-00": "rgb(245, 246, 247)",
+    "color-turva2-gray-100": "rgb(212, 221, 226)",
+    "color-turva2-gray-200": "rgb(178, 194, 205)",
+    "color-turva2-gray-400": "rgb(120, 145, 164)",
+    "color-turva2-gray-500": "rgb(95, 122, 143)",
+    "color-turva2-gray-900": "rgb(23, 42, 59)",
+    "color-turva-nude-00": "rgb(253, 247, 242)",
+    "color-turva-nude-50": "rgb(251, 235, 225)",
+    "color-turva-nude-200": "rgb(241, 202, 178)"};
 
 const allowedThemes = ["turva"];
+const MATCH_CAPITAL_CASE = /[A-Z]/g;
+function isTurva2() {
+    var _a;
+    if (typeof document === "undefined") {
+        return false;
+    }
+    return !!((_a = document.documentElement.attributes.getNamedItem("class")) === null || _a === void 0 ? void 0 : _a.value.includes("duet-theme-turva2"));
+}
+function isCamelCase(str) {
+    const camel = MATCH_CAPITAL_CASE.test(str);
+    const barredString = !str.includes("_") && !str.includes("-") && !str.includes(" ");
+    return camel && barredString;
+}
 function isDashCase(str) {
     const dash = str.includes("-");
     const barredString = str.includes(" ") || str.includes("_");
@@ -49,18 +76,61 @@ function addTheme(str, theme) {
     }
     return str;
 }
+/**
+ * Add "-turva" to color names (or "Turva" to camelCase color names)
+ */
+function postfixTheme(name, theme) {
+    if (!name) {
+        return undefined;
+    }
+    if (["", "default"].includes(theme)) {
+        return name;
+    }
+    if ((isDashCase(name) && name.endsWith(`-${theme}`)) || (isCamelCase(name) && name.endsWith(capitalize(theme)))) {
+        return name;
+    }
+    if (tokens[`color${camelize(name)}${capitalizeFirstLetter(theme)}`]) {
+        return !isCamelCase(name) ? `${name}-${theme}` : `${name}${capitalize(theme)}`;
+    }
+    return name;
+}
 function getColorByName(name, theme = "") {
     if (!name) {
         return undefined;
     }
-    const defaultColor = convertToColorName(name);
-    const themedColor = convertToColorName(name, theme);
-    // lets just try to get the color first to save some cycles
-    let resolvedToken = tokens[themedColor];
-    if (!resolvedToken) {
-        resolvedToken = tokens[defaultColor];
+    if ((theme === "turva" || name.endsWith("-turva")) && isTurva2()) {
+        switch (name.replace(/-turva$/, "")) {
+            case "primary-lightest":
+                return turva2ColorTokens["color-turva-nude-00"];
+            case "primary-lighter":
+                return turva2ColorTokens["color-turva-nude-50"];
+            case "primary-light":
+                return turva2ColorTokens["color-turva-nude-200"];
+            case "primary":
+                return turva2ColorTokens["color-turva2-red-600"];
+            case "primary-darker":
+                return turva2ColorTokens["color-turva2-red-700"];
+            case "primary-dark":
+                return turva2ColorTokens["color-turva2-red-800"];
+            case "secondary":
+                return turva2ColorTokens["color-turva2-gray-900"];
+            case "gray-lighter":
+                return turva2ColorTokens["color-turva2-gray-00"];
+            case "gray-light":
+                return turva2ColorTokens["color-turva2-gray-100"];
+            case "gray":
+                return turva2ColorTokens["color-turva2-gray-200"];
+            case "gray-dark":
+                return turva2ColorTokens["color-turva2-gray-400"];
+            case "gray-darker":
+                return turva2ColorTokens["color-turva2-gray-500"];
+            // carry on to old turva colors
+        }
     }
-    return resolvedToken;
+    const defaultColor = convertToColorName(name);
+    const themedColor = theme && convertToColorName(name, theme);
+    // return themed color if it exists
+    return tokens[themedColor] || tokens[defaultColor];
 }
 function convertToColorName(name = "", theme = "") {
     let colorResolution = name;
@@ -104,7 +174,7 @@ function rgbaColorFromRgb(color, opacity) {
     return `rgba(${R},${G},${B},${opacity})`;
 }
 function shadeRGBColor(color, percent) {
-    const f = color.split(","), t = percent < 0 ? 0 : 255, p = percent < 0 ? percent * -1 : percent;
+    const f = color.split(","), t = 0 , p = percent * -1 ;
     let R = parseInt(f[0].slice(4)), G = parseInt(f[1]), B = parseInt(f[2]);
     R = Math.round((t - R) * p) + R;
     G = Math.round((t - G) * p) + G;
@@ -135,4 +205,4 @@ const breakpointToToken = {
 const breakpointTokensUpTo = Object.keys(breakpointToToken).filter(key => key.indexOf("x-small") !== -1);
 Object.keys(breakpointToToken).filter(key => !breakpointTokensUpTo.includes(key));
 
-export { breakpointToToken as a, breakpointTokensUpTo as b, capitalizeFirstLetter as c, getShadowByName as d, getColorByName as g, rgbaColorFromRgb as r, shadeRGBColor as s };
+export { breakpointToToken as a, breakpointTokensUpTo as b, capitalizeFirstLetter as c, getShadowByName as d, getColorByName as g, postfixTheme as p, rgbaColorFromRgb as r, shadeRGBColor as s };

package/lib/{dist-custom-elements/p-f6000a03.js → esm/tokens-DcQPCCbT.js}

@@ -1,6 +1,18 @@
 /*!
  * Built with Duet Design System
  */
+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)";
@@ -102,11 +114,35 @@ const color_success_300 = "rgb(163, 229, 202)";
 const color_success_400 = "rgb(134, 215, 185)";
 const color_success_50 = "rgb(231, 248, 239)";
 const color_success_500 = "rgb(105, 196, 166)";
-const color_success_600 = "rgb(77, 171, 143)";
+const color_success_600 = "rgb(76, 164, 138)";
 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)";
@@ -119,6 +155,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)";
@@ -140,7 +188,7 @@ const color_warning_300 = "rgb(255, 217, 120)";
 const color_warning_400 = "rgb(255, 199, 79)";
 const color_warning_50 = "rgb(255, 247, 221)";
 const color_warning_500 = "rgb(247, 178, 40)";
-const color_warning_600 = "rgb(212, 151, 32)";
+const color_warning_600 = "rgb(196, 138, 23)";
 const color_warning_700 = "rgb(156, 110, 22)";
 const color_warning_800 = "rgb(126, 87, 16)";
 const color_warning_900 = "rgb(81, 55, 9)";
@@ -248,7 +296,19 @@ const z_index_popup = "950";
 const z_index_spinner = "800";
 const z_index_sticky = "300";
 const z_index_toast = "500";
-const tokens = {
+var 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,
@@ -355,6 +415,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,
@@ -367,6 +451,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,
@@ -498,8 +594,20 @@ const tokens = {
 	z_index_toast: z_index_toast
 };
 
-const tokens$1 = /*#__PURE__*/Object.freeze({
+var 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,
@@ -606,6 +714,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,
@@ -618,6 +750,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,
@@ -644,6 +788,7 @@ const tokens$1 = /*#__PURE__*/Object.freeze({
   color_warning_800: color_warning_800,
   color_warning_900: color_warning_900,
   color_warning_turva: color_warning_turva,
+  default: tokens,
   font_family_heading: font_family_heading,
   font_family_heading_turva: font_family_heading_turva,
   font_family_text: font_family_text,
@@ -746,8 +891,7 @@ const tokens$1 = /*#__PURE__*/Object.freeze({
   z_index_popup: z_index_popup,
   z_index_spinner: z_index_spinner,
   z_index_sticky: z_index_sticky,
-  z_index_toast: z_index_toast,
-  'default': tokens
+  z_index_toast: z_index_toast
 });
 
-export { media_query_large as a, media_query_small as b, media_query_xx_large as c, font_size_medium as f, media_query_medium as m, tokens$1 as t };
+export { media_query_large as a, font_size_medium as f, media_query_medium as m, tokens$1 as t };

package/lib/{dist-custom-elements/p-cea716f7.js → esm/tokens.module-Bh9dkusU.js}

@@ -1,6 +1,18 @@
 /*!
  * Built with Duet Design System
  */
+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)";
@@ -102,11 +114,35 @@ const colorSuccess300 = "rgb(163, 229, 202)";
 const colorSuccess400 = "rgb(134, 215, 185)";
 const colorSuccess50 = "rgb(231, 248, 239)";
 const colorSuccess500 = "rgb(105, 196, 166)";
-const colorSuccess600 = "rgb(77, 171, 143)";
+const colorSuccess600 = "rgb(76, 164, 138)";
 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)";
@@ -119,6 +155,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)";
@@ -140,7 +188,7 @@ const colorWarning300 = "rgb(255, 217, 120)";
 const colorWarning400 = "rgb(255, 199, 79)";
 const colorWarning50 = "rgb(255, 247, 221)";
 const colorWarning500 = "rgb(247, 178, 40)";
-const colorWarning600 = "rgb(212, 151, 32)";
+const colorWarning600 = "rgb(196, 138, 23)";
 const colorWarning700 = "rgb(156, 110, 22)";
 const colorWarning800 = "rgb(126, 87, 16)";
 const colorWarning900 = "rgb(81, 55, 9)";
@@ -249,8 +297,20 @@ const zIndexSpinner = "800";
 const zIndexSticky = "300";
 const zIndexToast = "500";
 
-const tokens = /*#__PURE__*/Object.freeze({
+var 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,
@@ -357,6 +417,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,
@@ -369,6 +453,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,
@@ -500,4 +596,4 @@ const tokens = /*#__PURE__*/Object.freeze({
 	zIndexToast: zIndexToast
 });
 
-export { colorGrayLightTurva as A, colorGrayDarkerTurva as B, colorPrimary as C, sizeNavigation as D, sizeHeader as E, colorBrandGrayTurva as F, colorPrimaryTurva as G, colorGrayTurva as H, colorGray as I, mediaQueryXSmall as a, mediaQuerySmall as b, mediaQueryMedium as c, mediaQueryLarge as d, mediaQueryXLarge as e, mediaQueryXxLarge as f, mediaQueryXxxLarge as g, mediaQueryXxxSmall as h, spaceLarge as i, fontFamilyText as j, fontSizeMedium as k, fontFamilyTextTurva as l, mediaQueryXxSmall as m, colorSecondary as n, colorSecondaryTurva as o, fontWeightSemiBold as p, lineHeightSmall as q, colorGrayDarker as r, spaceXSmall as s, tokens as t, colorGrayDarkTurva as u, spaceMedium as v, spaceXxSmall as w, colorGrayLightest as x, spaceSmall as y, colorGrayLight as z };
+export { spaceMedium as A, spaceXxSmall as B, colorGrayLightest as C, spaceSmall as D, colorGrayLight as E, colorGrayLightTurva as F, colorGrayDarkerTurva as G, sizeNavigation as H, colorBrandGrayTurva as I, colorPrimary as a, colorGrayTurva as b, colorGray as c, colorPrimaryTurva as d, mediaQueryXxLarge as e, mediaQueryXLarge as f, mediaQueryLarge as g, mediaQueryMedium as h, mediaQuerySmall as i, mediaQueryXSmall as j, mediaQueryXxSmall as k, mediaQueryXxxSmall as l, mediaQueryXxxLarge as m, spaceXSmall as n, spaceLarge as o, fontFamilyText as p, fontSizeMedium as q, fontFamilyTextTurva as r, sizeHeader as s, tokens as t, colorSecondary as u, colorSecondaryTurva as v, fontWeightSemiBold as w, lineHeightSmall as x, colorGrayDarker as y, colorGrayDarkTurva as z };

package/lib/{dist-custom-elements/p-7d8a2628.js → esm/watch-options-BmMFVM-y.js}

@@ -17,25 +17,6 @@ const watchFor = (containerEl, tagName, onChange, changeHandler, options = {
 const watchForOptions = (containerEl, tagName, onChange) => {
     return watchFor(containerEl, tagName, onChange, getSelectedOption);
 };
-const watchForElement = (containerEl, tagName, onChange) => {
-    return watchFor(containerEl, tagName, onChange, getElementItem, {
-        childList: true,
-        subtree: true,
-    });
-};
-const getElementItem = (mutationList) => {
-    let addedNode = false;
-    let removedNode = false;
-    mutationList.forEach(mut => {
-        if (mut.addedNodes.length) {
-            addedNode = true;
-        }
-        if (mut.removedNodes.length) {
-            removedNode = true;
-        }
-    });
-    return { addedNode, removedNode, mutationList };
-};
 const getSelectedOption = (mutationList, tagName) => {
     let newOption;
     mutationList.forEach(mut => {
@@ -54,4 +35,4 @@ const findCheckedOption = (el, tagName) => {
     return options.find((o) => o.checked === true);
 };
 
-export { watchForElement as a, findCheckedOption as f, watchForOptions as w };
+export { findCheckedOption as f, watchForOptions as w };

package/lib/index.js

@@ -1 +1 @@
-export * from './esm-es5/index.js';
+export * from './esm/index.js';

package/lib/loader/cdn.js

@@ -1,5 +1,4 @@
 /*!
  * Built with Duet Design System
  */
-module.exports = require('../cjs/loader.cjs.js');
-module.exports.applyPolyfills = function() { return Promise.resolve() };
+module.exports = require('../cjs/loader.cjs.js');

package/lib/loader/index.cjs.js

@@ -1,5 +1,4 @@
 /*!
  * Built with Duet Design System
  */
-module.exports = require('../cjs/loader.cjs.js');
-module.exports.applyPolyfills = function() { return Promise.resolve() };
+module.exports = require('../cjs/loader.cjs.js');

package/lib/loader/index.es2017.js

@@ -1,5 +1,4 @@
 /*!
  * Built with Duet Design System
  */
-export * from '../esm/polyfills/index.js';
 export * from '../esm/loader.js';

package/lib/loader/index.js

@@ -2,5 +2,4 @@
  * Built with Duet Design System
  */
 (function(){if("undefined"!==typeof window&&void 0!==window.Reflect&&void 0!==window.customElements){var a=HTMLElement;window.HTMLElement=function(){return Reflect.construct(a,[],this.constructor)};HTMLElement.prototype=a.prototype;HTMLElement.prototype.constructor=HTMLElement;Object.setPrototypeOf(HTMLElement,a)}})();
-export * from '../esm/polyfills/index.js';
-export * from '../esm-es5/loader.js';
+export * from '../esm/loader.js';

package/lib/types/common-strings.d.ts

@@ -1,5 +1,8 @@
+import { DuetStatus } from "./common-types";
 import { DuetLangObject } from "./utils/language-utils";
 export declare const DuetStringsDownloadLinkDefaults: DuetLangObject;
 export declare const DuetStringsExternalDefaults: DuetLangObject;
 export declare const DuetStringsLoadingDefaults: DuetLangObject;
 export declare const DuetStringsPleaseWaitDefaults: DuetLangObject;
+export declare const DuetStringsListStepOfTotal: DuetLangObject;
+export declare const DuetStatusLabels: Record<DuetStatus, DuetLangObject>;

package/lib/types/common-types.d.ts

@@ -40,7 +40,7 @@ export type StatusMessage = {
   files: string
 }
 export type DuetCardHeadingLevel = DuetHeadingLevel | DuetBlock
-export type DuetLinkVariation = "default" | "block" | "button" | "card"
+export type DuetLinkVariation = "default" | "block" | "block-center" | "button" | "list-button" | "card"
 export type DuetChoiceGroupBreakpoint = "x-small" | "small" | "medium" | "large" | "x-large"
 export type DuetListBreakpoint = "x-small" | "small" | "medium" | "large" | "x-large"
 export type DuetIconColor = DuetColor | "currentColor"