@duetds/components 7.0.13 → 7.1.1

package/lib/collection/utils/template-utils.spec.js

@@ -0,0 +1,39 @@
+/*!
+ * Built with Duet Design System
+ */
+import { generateTemplateFn } from "./template-utils";
+describe("Template functions", () => {
+  it("works with dom nodes", () => {
+    document.body.innerHTML = '<div id="testing"><div>${name} <span>${someOther}</span></div> </div>';
+    const variables = {
+      name: "duet",
+      someOther: "other",
+    };
+    const testingDom = document.getElementById("testing");
+    const objectString = "<div>${name} <span>${someOther}</span></div>";
+    const domString = testingDom.firstElementChild.outerHTML;
+    const templateFn = generateTemplateFn(domString);
+    const templateOrig = generateTemplateFn(objectString);
+    const renderedTemplate = templateFn(variables);
+    const renderedTemplateOrig = templateOrig(variables);
+    expect(renderedTemplate).toBe(`<div>${variables.name} <span>${variables.someOther}</span></div>`);
+    expect(renderedTemplate).toBe(renderedTemplateOrig);
+  });
+  it("returns same string as string literals", () => {
+    const variables = {
+      name: "duet",
+      someOther: "other",
+    };
+    const objectString = "<div>${name} <span>${someOther}</span></div>";
+    const templateFn = generateTemplateFn(objectString);
+    expect(templateFn(variables)).toBe(`<div>${variables.name} <span>${variables.someOther}</span></div>`);
+  });
+  it("returns object with undefined string if none are given", () => {
+    const variables = {
+      name: "duet",
+    };
+    const objectString = "<div>${name} <span>${someOther}</span></div>";
+    const templateFn = generateTemplateFn(objectString);
+    expect(templateFn(variables)).toBe("<div>duet <span>undefined</span></div>");
+  });
+});

package/lib/collection/utils/token-utils.spec.js

@@ -0,0 +1,178 @@
+/*!
+ * Built with Duet Design System
+ */
+import * as tokens from "@duetds/tokens";
+import { convertToColorName, getColorByName, getFontSizeByName, getFontWeightByName, isCamelCase, isDashCase, rgbaColorFromRgb, shadeRGBColor, } from "./token-utils";
+describe("token-utils", () => {
+  describe("isCamelCase", () => {
+    it("checks for camelCase", () => {
+      expect(isCamelCase("primaryDark")).toEqual(true);
+      expect(isCamelCase("colorPrimaryDark")).toEqual(true);
+      expect(isCamelCase("primary-dark")).toEqual(false);
+      expect(isCamelCase("color-primary-dark")).toEqual(false);
+      expect(isCamelCase("colorPrimary-Dark")).toEqual(false);
+      expect(isCamelCase("-colorPrimary")).toEqual(false);
+      expect(isCamelCase("color_Primary")).toEqual(false);
+      expect(isCamelCase("color Primary")).toEqual(false);
+    });
+  });
+  describe("isDashCase", () => {
+    it("checks for dash case", () => {
+      expect(isDashCase("primary-dark")).toEqual(true);
+      expect(isDashCase("color-primary-dark")).toEqual(true);
+      expect(isDashCase("colorPrimary-Dark")).toEqual(true);
+      expect(isDashCase("primaryDark")).toEqual(false);
+      expect(isDashCase("colorPrimaryDark")).toEqual(false);
+      expect(isDashCase("-colorPrimary")).toEqual(false);
+      expect(isDashCase("color_Primary")).toEqual(false);
+      expect(isDashCase("color Primary")).toEqual(false);
+    });
+  });
+  describe("convertToColorName", () => {
+    it("converts primaryDark to a consistent format", () => {
+      expect(convertToColorName("primaryDark")).toEqual("colorPrimaryDark");
+    });
+    it("converts primary-dark to a consistent format", () => {
+      expect(convertToColorName("primary-dark")).toEqual("colorPrimaryDark");
+    });
+    it("converts color-primary-dark to a consistent format", () => {
+      expect(convertToColorName("color-primary-dark")).toEqual("colorPrimaryDark");
+    });
+    it("converts colorPrimaryDark to a consistent format", () => {
+      expect(convertToColorName("colorPrimaryDark")).toEqual("colorPrimaryDark");
+    });
+  });
+  describe("convertToColorName with theme", () => {
+    it("converts primaryDark to a consistent format", () => {
+      expect(convertToColorName("primaryDark", "turva")).toEqual("colorPrimaryDarkTurva");
+    });
+    it("converts primary-dark to a consistent format", () => {
+      expect(convertToColorName("primary-dark", "turva")).toEqual("colorPrimaryDarkTurva");
+    });
+    it("converts color-primary-dark to a consistent format", () => {
+      expect(convertToColorName("color-primary-dark", "turva")).toEqual("colorPrimaryDarkTurva");
+    });
+    it("converts colorPrimaryDark to a consistent format", () => {
+      expect(convertToColorName("colorPrimaryDark", "turva")).toEqual("colorPrimaryDarkTurva");
+    });
+  });
+  describe("getColorByName", () => {
+    it("returns undefined if no name supplied", () => {
+      expect(getColorByName("")).toBe(undefined);
+      // @ts-ignore - ensure behaves correctly outside of TS environments
+      expect(getColorByName()).toBe(undefined);
+    });
+    it("returns undefined for non-existent color name", () => {
+      expect(getColorByName("a-color-i-just-made-up")).toBe(undefined);
+    });
+    it("gets primaryDark token by name", () => {
+      expect(getColorByName("primaryDark")).toEqual(tokens.colorPrimaryDark);
+    });
+    it("gets primary-dark token by name", () => {
+      expect(getColorByName("primary-dark")).toEqual(tokens.colorPrimaryDark);
+    });
+    it("gets color-primary-dark token by name", () => {
+      expect(getColorByName("color-primary-dark")).toEqual(tokens.colorPrimaryDark);
+    });
+    it("gets colorPrimaryDark token by name", () => {
+      expect(getColorByName("colorPrimaryDark")).toEqual(tokens.colorPrimaryDark);
+    });
+    it("gets undefined token by name with theme", () => {
+      expect(getColorByName("", "turva")).toBe(undefined);
+      expect(getColorByName(undefined, undefined)).toBe(undefined);
+      expect(getColorByName(null, undefined)).toBe(undefined);
+    });
+    it("gets colorPrimaryDark token by name with theme", () => {
+      expect(getColorByName("colorPrimaryDark", "turva")).toEqual(tokens.colorPrimaryDarkTurva);
+    });
+    it("gets primaryDark token by name with theme", () => {
+      expect(getColorByName("primaryDark", "turva")).toEqual(tokens.colorPrimaryDarkTurva);
+    });
+    it("gets color-primary-dark token by name with theme", () => {
+      expect(getColorByName("color-primary-dark", "turva")).toEqual(tokens.colorPrimaryDarkTurva);
+    });
+    it("gets primary-dark token by name with theme", () => {
+      expect(getColorByName("primary-dark", "turva")).toEqual(tokens.colorPrimaryDarkTurva);
+    });
+    it("gets the color token by name with empty theme", () => {
+      expect(getColorByName("primaryDark", "")).toEqual(tokens.colorPrimaryDark);
+      expect(getColorByName("primary-dark", "")).toEqual(tokens.colorPrimaryDark);
+      expect(getColorByName("color-primary-dark", "")).toEqual(tokens.colorPrimaryDark);
+      expect(getColorByName("colorPrimaryDark", "")).toEqual(tokens.colorPrimaryDark);
+    });
+  });
+  describe("getColorByName with additional colors", () => {
+    it("gets the color names for complex colors", () => {
+      expect(getColorByName("color-category-vehicle", "")).toEqual(tokens.colorCategoryVehicle);
+      expect(getColorByName("color-category-finance", "")).toEqual(tokens.colorCategoryFinance);
+      expect(getColorByName("color-category-pet", "")).toEqual(tokens.colorCategoryPet);
+      expect(getColorByName("color-category-travel", "")).toEqual(tokens.colorCategoryTravel);
+    });
+    it("gets the color names for complex colors with empty theme", () => {
+      expect(getColorByName("color-category-vehicle")).toEqual(tokens.colorCategoryVehicle);
+      expect(getColorByName("color-category-finance")).toEqual(tokens.colorCategoryFinance);
+      expect(getColorByName("color-category-pet")).toEqual(tokens.colorCategoryPet);
+      expect(getColorByName("color-category-travel")).toEqual(tokens.colorCategoryTravel);
+    });
+    it("gets the color names for complex colors with turva theme", () => {
+      expect(getColorByName("color-category-vehicle", "turva")).toEqual(tokens.colorCategoryVehicleTurva);
+      expect(getColorByName("color-category-travel", "turva")).toEqual(tokens.colorCategoryTravelTurva);
+    });
+    it("gets the color names for complex colors from default if they dont exist in theme", () => {
+      expect(getColorByName("color-category-finance", "turva")).toEqual(tokens.colorCategoryFinance);
+      expect(getColorByName("color-category-pet", "turva")).toEqual(tokens.colorCategoryPet);
+    });
+  });
+  describe("getFontSizeByName", () => {
+    it("returns undefined if no name supplied", () => {
+      expect(getFontSizeByName("")).toBe(undefined);
+      // @ts-ignore - ensure behaves correctly outside of TS environments
+      expect(getFontSizeByName()).toBe(undefined);
+    });
+    it("returns undefined for non-existent", () => {
+      expect(getFontSizeByName("wrong")).toBe(undefined);
+    });
+    test.each(["xLarge", "x-large", "font-size-x-large", "fontSizeXLarge"])("gets fontSizeXLarge token by name", name => {
+      expect(getFontSizeByName(name)).toEqual(tokens.fontSizeXLarge);
+    });
+  });
+  describe("getFontWeightByName", () => {
+    it("returns undefined if no name supplied", () => {
+      expect(getFontWeightByName("")).toBe(undefined);
+      // @ts-ignore - ensure behaves correctly outside of TS environments
+      expect(getFontWeightByName()).toBe(undefined);
+    });
+    it("returns undefined for non-existent", () => {
+      expect(getFontWeightByName("wrong")).toBe(undefined);
+    });
+    test.each(["extraBold", "extra-bold", "font-weight-extra-bold", "fontWeightExtraBold"])("gets fontWeightExtraBold token by name", name => {
+      expect(getFontWeightByName(name)).toEqual(tokens.fontWeightExtraBold);
+    });
+  });
+  describe("rgbaColorFromRgb", () => {
+    test.each([
+      ["rgb(255, 255, 255)", "rgba(255,255,255,0)", 0],
+      ["rgb(255, 255, 255)", "rgba(255,255,255,0.1)", 0.1],
+      ["rgb(1, 1, 1)", "rgba(1,1,1,1)", 1],
+      [null, undefined, 1],
+      [undefined, undefined, 1],
+      ["", undefined, 1],
+      ["rgb(1, 1, 1)", undefined, undefined],
+      ["rgb(1, 1, 1)", undefined, null],
+    ])("shades rgb color correctly", (color, expected, opacity) => {
+      expect(rgbaColorFromRgb(color, opacity)).toEqual(expected);
+    });
+  });
+  describe("shadeRGBColor", () => {
+    test.each([
+      ["rgb(255, 255, 255)", "rgb(230,230,230)", -0.1],
+      ["rgb(255, 255, 255)", "rgb(255,255,255)", 0.1],
+      ["rgb(1, 1, 1)", "rgb(0,0,0)", -0.6],
+      ["rgb(224, 42, 13)", "rgb(202,38,12)", -0.1],
+      ["rgb(999, 999, 999)", "rgb(255,255,255)", 1],
+      ["rgb(-999, -999, -999)", "rgb(0,0,0)", -1],
+    ])("shades rgb color correctly", (rgb, shadedRgb, amount) => {
+      expect(shadeRGBColor(rgb, amount)).toEqual(shadedRgb);
+    });
+  });
+});

package/lib/dist-custom-elements/duet-action-button.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetActionButton$1, d as defineCustomElement$1 } from './p-235639a0.js';
+import { D as DuetActionButton$1, d as defineCustomElement$1 } from './p-8160c830.js';
 
 const DuetActionButton = DuetActionButton$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-alert.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetAlert$1, d as defineCustomElement$1 } from './p-9510958d.js';
+import { D as DuetAlert$1, d as defineCustomElement$1 } from './p-d27dc964.js';
 
 const DuetAlert = DuetAlert$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-badge.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetBadge$1, d as defineCustomElement$1 } from './p-811e436b.js';
+import { D as DuetBadge$1, d as defineCustomElement$1 } from './p-6e063bb0.js';
 
 const DuetBadge = DuetBadge$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-banner.js

@@ -1,16 +1,17 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-580110b9.js';
-import { i as inheritGlobalTheme } from './p-4ebf1618.js';
-import { g as getColorByName } from './p-03e72a70.js';
-import { d as defineCustomElement$4 } from './p-457ad3b4.js';
-import { d as defineCustomElement$3 } from './p-6658c850.js';
-import { d as defineCustomElement$2 } from './p-87ab6444.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-7579d4ae.js';
+import { i as inheritGlobalTheme } from './p-d48735b6.js';
+import { n as nudge } from './p-040f8831.js';
+import { g as getColorByName } from './p-e19d1e27.js';
+import { d as defineCustomElement$4 } from './p-a0669ee9.js';
+import { d as defineCustomElement$3 } from './p-db1ac527.js';
+import { d as defineCustomElement$2 } from './p-5f06c4ee.js';
 
 const duetBannerCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-right:4px !important;margin-bottom:2px !important;display:block;width:auto}:host:last-child,:host:last-of-type{margin-right:0 !important}:host(.duet-m-0){margin:0 !important}.duet-banner{display:grid;width:100%;height:100%;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-style:normal;text-align:left;border-radius:24px}.duet-banner.duet-p-0{padding:0 !important}.duet-banner.duet-m-0{margin:0 !important}.duet-banner .visual{position:relative;overflow:hidden;border-top-left-radius:24px;border-top-right-radius:24px}.duet-banner .visual .image-container{position:relative;width:400px;height:400px;overflow:hidden;border-radius:20%;transform:rotate(7deg)}.duet-banner .visual .image{position:relative;top:20px;width:100%;height:100%;transform:rotate(-7deg);object-fit:cover}.duet-banner .visual .icon{position:absolute}.duet-banner .content{display:flex;flex-direction:column;gap:8px;padding:0 20px 36px}.duet-banner .action{display:flex;flex-direction:column;flex-grow:1;align-items:flex-start;justify-content:flex-end;padding-top:16px}.duet-banner.small{grid-template-rows:335px 1fr;max-width:335px}.duet-banner.small .visual{border-top-left-radius:24px;border-top-right-radius:24px}.duet-banner.small .visual .image-container{top:-130px;left:-40px}.duet-banner.small .visual .icon{bottom:30px;left:15px}.duet-banner.large{grid-template-rows:none;grid-template-columns:50% 50%;min-width:900px;max-width:1112px;height:320px;max-height:none}.duet-banner.large .visual{border-top-left-radius:24px;border-bottom-left-radius:24px}.duet-banner.large .visual .image-container{top:-30px;left:-30px}.duet-banner.large .visual .image{top:-15px;left:30px}.duet-banner.large .visual .icon{top:40px;bottom:auto;left:335px}.duet-banner.large .content{align-items:flex-start;justify-content:center;padding:0 72px 0 0}.duet-banner.large .action{flex-grow:0}.duet-banner.auto{grid-template-rows:335px 1fr;max-width:335px}.duet-banner.auto .visual{border-top-left-radius:24px;border-top-right-radius:24px}.duet-banner.auto .visual .image-container{top:-130px;left:-40px}.duet-banner.auto .visual .icon{bottom:30px;left:15px}@media (min-width: 62em){.duet-banner.auto{grid-template-rows:none;grid-template-columns:50% 50%;min-width:900px;max-width:1112px;height:320px;max-height:none}.duet-banner.auto .visual{border-top-left-radius:24px;border-bottom-left-radius:24px}.duet-banner.auto .visual .image-container{top:-30px;left:-30px}.duet-banner.auto .visual .image{top:-15px;left:30px}.duet-banner.auto .visual .icon{top:40px;bottom:auto;left:335px}.duet-banner.auto .content{align-items:flex-start;justify-content:center;padding:0 72px 0 0}.duet-banner.auto .action{flex-grow:0}}.duet-banner.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}.duet-banner.duet-theme-turva .visual .image-container{width:526px;height:456px;transform:none;-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20140%22%3E%3Cpath%20d%3D%22M87.8%20139.6a57.3%2057.3%200%2000-18.4-3.3c-8-.5-16.3-2.5-24.6-6-16.7-7-29-18.7-37.1-35.3a73.5%2073.5%200%2001-5-52.4c1.7-4%203-6.7%204-7.8a33%2033%200%20004-7.8C33.4%203.5%2063.2-4.3%20100%203.2c30.5%204%2049.7%2019.9%2057.6%2047.4l1.6%2024c4.4%2036-11.5%2056-47.5%2060.3-4%202.4-12%203.9-24%204.7%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E\");-webkit-mask-repeat:no-repeat;mask-image:url(\"data:image/svg+xml,%3Csvg%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20140%22%3E%3Cpath%20d%3D%22M87.8%20139.6a57.3%2057.3%200%2000-18.4-3.3c-8-.5-16.3-2.5-24.6-6-16.7-7-29-18.7-37.1-35.3a73.5%2073.5%200%2001-5-52.4c1.7-4%203-6.7%204-7.8a33%2033%200%20004-7.8C33.4%203.5%2063.2-4.3%20100%203.2c30.5%204%2049.7%2019.9%2057.6%2047.4l1.6%2024c4.4%2036-11.5%2056-47.5%2060.3-4%202.4-12%203.9-24%204.7%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E\");mask-repeat:no-repeat}.duet-banner.duet-theme-turva .visual .image{transform:none}.duet-banner.duet-theme-turva.small .visual .image-container{top:-164px;left:-147px}.duet-banner.duet-theme-turva.small .visual .image{top:0;left:0}.duet-banner.duet-theme-turva.small .visual .icon{bottom:15px}.duet-banner.duet-theme-turva.large .visual .image-container{top:-54.923px;left:-147px}.duet-banner.duet-theme-turva.large .visual .image{top:0;left:0}.duet-banner.duet-theme-turva.large .visual .icon{bottom:auto;left:295px}.duet-banner.duet-theme-turva.auto .visual .image-container{top:-164px;left:-147px}.duet-banner.duet-theme-turva.auto .visual .image{top:0;left:0}.duet-banner.duet-theme-turva.auto .visual .icon{bottom:15px}@media (min-width: 62em){.duet-banner.duet-theme-turva.auto .visual .image-container{top:-54.923px;left:-147px}.duet-banner.duet-theme-turva.auto .visual .image{top:0;left:0}.duet-banner.duet-theme-turva.auto .visual .icon{bottom:auto;left:295px}}";
 
-const DuetBanner$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
+const DuetBanner$1 = /*@__PURE__*/ proxyCustomElement(class DuetBanner extends H {
   constructor() {
     super();
     this.__registerHost();
@@ -35,6 +36,9 @@ const DuetBanner$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
     this.hasDescriptionSlot = !!this.element.querySelector('[slot="description"]');
     this.hasActionSlot = !!this.element.querySelector('[slot="action"]');
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   /**
    * render() function
    * Always the last one of the class.

package/lib/dist-custom-elements/duet-breadcrumb.js

@@ -1,16 +1,17 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-580110b9.js';
-import { i as inheritGlobalTheme } from './p-4ebf1618.js';
-import { a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver, g as getLocaleString } from './p-03baceb5.js';
-import { d as defineCustomElement$2 } from './p-6658c850.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-7579d4ae.js';
+import { i as inheritGlobalTheme } from './p-d48735b6.js';
+import { a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver, g as getLocaleString } from './p-4883df66.js';
+import { n as nudge } from './p-040f8831.js';
+import { d as defineCustomElement$2 } from './p-db1ac527.js';
 
 var actionArrowRightSmall={"title":"action-arrow-right-small","tags":"action arrow right small caret","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M19.5 12a2.3 2.3 0 0 1-.78 1.729L7.568 23.54a1.847 1.847 0 0 1-2.439-2.773l9.752-8.579a.25.25 0 0 0 0-.376L5.129 3.233A1.847 1.847 0 0 1 7.568.46l11.148 9.808A2.31 2.31 0 0 1 19.5 12z\"/></svg>"};
 
 const duetBreadcrumbCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:list-item;width:auto}.container{display:flex;gap:8px;align-items:center}.hide{display:none}.duet-breadrumbs-arrow{display:block;align-items:center;justify-content:center;width:0.375rem;height:0.375rem}.duet-breadcrumb{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;height:100%;font-size:0.875rem;font-weight:inherit;line-height:1.25;color:inherit;text-decoration:none}.duet-breadcrumb:focus{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}: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}";
 
-const DuetBreadcrumb$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
+const DuetBreadcrumb$1 = /*@__PURE__*/ proxyCustomElement(class DuetBreadcrumb extends H {
   constructor() {
     super();
     this.__registerHost();
@@ -32,6 +33,9 @@ const DuetBreadcrumb$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   connectedCallback() {
     connectLanguageChangeObserver(this);
   }

package/lib/dist-custom-elements/duet-breadcrumbs.js

@@ -1,13 +1,13 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-580110b9.js';
-import { i as inheritGlobalTheme } from './p-4ebf1618.js';
-import { g as getLocaleString } from './p-03baceb5.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-7579d4ae.js';
+import { i as inheritGlobalTheme } from './p-d48735b6.js';
+import { g as getLocaleString } from './p-4883df66.js';
 
 const duetBreadcrumbsCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:block;width:100%}::slotted(duet-breadcrumb){font-weight:400}::slotted(duet-breadcrumb:last-of-type){font-weight:600}.duet-breadcrumbs{position:relative;display:flex;align-items:center;justify-content:center;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}.duet-breadcrumbs .container{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;max-width:1384px;min-height:36px;margin:0 28px}.duet-breadcrumbs .list{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-start;padding:10px 0;color:inherit;list-style:none}.duet-breadcrumbs .bottom-border{position:absolute;bottom:0;display:none;width:100%;height:1px}.duet-breadcrumbs.header{color:rgb(0, 41, 77);background:rgb(243, 249, 252)}.duet-breadcrumbs.header .list duet-breadcrumb[href]:hover{color:rgb(0, 77, 128)}.duet-breadcrumbs.header .bottom-border--nav{display:block;background:rgb(225, 227, 230)}.duet-breadcrumbs.header.duet-theme-turva{color:rgb(23, 28, 58);background:rgb(245, 245, 247)}.duet-breadcrumbs.header.duet-theme-turva ol duet-breadcrumb[href]:hover{color:rgb(148, 9, 37)}.duet-breadcrumbs.footer{color:rgb(255, 255, 255);background:rgb(0, 41, 77)}@media (min-width: 64.0625em){.duet-breadcrumbs.footer{justify-content:flex-start}}@media (min-width: 76.25em){.duet-breadcrumbs.footer{justify-content:center}}.duet-breadcrumbs.footer .container{max-width:1110px}@media (min-width: 62em){.duet-breadcrumbs.footer .container{margin:0 72px 0 48px}}.duet-breadcrumbs.footer .list{padding:20px 0}@media (min-width: 62em){.duet-breadcrumbs.footer .list{padding:20px 8px}}.duet-breadcrumbs.footer .list duet-breadcrumb[href]:hover{text-decoration:underline}.duet-breadcrumbs.footer .bottom-border--container{display:block;background:rgba(255, 255, 255, 0.2)}.duet-breadcrumbs.footer.duet-theme-turva{color:rgb(255, 255, 255);background:rgb(198, 12, 48)}";
 
-const DuetBreadcrumbs$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
+const DuetBreadcrumbs$1 = /*@__PURE__*/ proxyCustomElement(class DuetBreadcrumbs extends H {
   constructor() {
     super();
     this.__registerHost();

package/lib/dist-custom-elements/duet-button.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetButton$1, d as defineCustomElement$1 } from './p-e4de8f7b.js';
+import { D as DuetButton$1, d as defineCustomElement$1 } from './p-720c72c5.js';
 
 const DuetButton = DuetButton$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-callout.js

@@ -1,14 +1,15 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-580110b9.js';
-import { i as inheritGlobalTheme } from './p-4ebf1618.js';
-import { d as defineCustomElement$3 } from './p-6658c850.js';
-import { d as defineCustomElement$2 } from './p-87ab6444.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-7579d4ae.js';
+import { i as inheritGlobalTheme } from './p-d48735b6.js';
+import { n as nudge } from './p-040f8831.js';
+import { d as defineCustomElement$3 } from './p-db1ac527.js';
+import { d as defineCustomElement$2 } from './p-5f06c4ee.js';
 
 const duetCalloutCss = ":host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;position:relative;display:block;width:100%}blockquote,figure{margin:0}.duet-callout{margin-bottom:28px !important;display:flex;align-items:center;justify-content:center;width:100%;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}.duet-callout .container{display:flex;flex-direction:column;gap:8px;align-items:center;max-width:688px;text-align:center}.duet-callout .callout-icon{width:50px;padding-bottom:8px}.duet-callout .author{color:rgb(0, 41, 77)}.duet-callout.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}.duet-callout.duet-theme-turva .author{color:rgb(23, 28, 58)}.duet-callout.duet-m-0{margin:0 !important}";
 
-const DuetCallout$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
+const DuetCallout$1 = /*@__PURE__*/ proxyCustomElement(class DuetCallout extends H {
   constructor() {
     super();
     this.__registerHost();
@@ -24,6 +25,9 @@ const DuetCallout$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
     inheritGlobalTheme(this);
     this.hasAuthorSlot = !!this.element.querySelector('[slot="author"]');
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   /**
    * render() function
    * Always the last one in the class.

package/lib/dist-custom-elements/duet-caption.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetCaption$1, d as defineCustomElement$1 } from './p-7ccf98f1.js';
+import { D as DuetCaption$1, d as defineCustomElement$1 } from './p-aa2863af.js';
 
 const DuetCaption = DuetCaption$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-card.js

@@ -1,14 +1,15 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, d as Host } from './p-580110b9.js';
-import { i as inheritGlobalTheme } from './p-4ebf1618.js';
-import { c as createID } from './p-c1325e35.js';
-import { i as isKeyboardClick } from './p-d8549efe.js';
-import { s as sanitizeString } from './p-5a9d75e1.js';
-import { g as getColorByName } from './p-03e72a70.js';
-import { d as defineCustomElement$3 } from './p-6658c850.js';
-import { d as defineCustomElement$2 } from './p-891cf00a.js';
+import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, d as Host } from './p-7579d4ae.js';
+import { i as inheritGlobalTheme } from './p-d48735b6.js';
+import { c as createID } from './p-45f71a69.js';
+import { i as isKeyboardClick } from './p-56ac3289.js';
+import { n as nudge } from './p-040f8831.js';
+import { s as sanitizeString } from './p-1a395a8d.js';
+import { g as getColorByName } from './p-e19d1e27.js';
+import { d as defineCustomElement$3 } from './p-db1ac527.js';
+import { d as defineCustomElement$2 } from './p-96f45950.js';
 
 const duetHeadingLevels = ["h1", "h2", "h3", "h4", "h5", "h6"];
 const duetBlock = "div";
@@ -17,7 +18,7 @@ var actionArrowUp={"title":"action-arrow-up","tags":"action arrow up caret","svg
 
 const duetCardCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-bottom:20px !important;display:flex;width:100%;vertical-align:top}:host(.duet-card-info){margin-bottom:16px !important}:host(.duet-m-0){margin:0 !important}.duet-card{padding:20px !important;position:relative;display:flex;flex-direction:column;width:100%;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-style:normal;font-weight:400;line-height:1.5;color:rgb(0, 41, 77);text-decoration:none;border-radius:4px;box-shadow:0 2px 6px 0 rgba(0, 41, 77, 0.07), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07)}.duet-card.duet-p-0{padding:0 !important}.duet-card.duet-m-0{margin:0 !important}.duet-card:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-theme-turva .duet-card:focus,.duet-card:focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}@media (max-width: 20.5em){.duet-card.shadow-xxx-small{box-shadow:none}}@media (max-width: 22.5em){.duet-card.shadow-xx-small{box-shadow:none}}@media (max-width: 35.9375em){.duet-card.shadow-x-small{box-shadow:none}}@media (min-width: 36em){.duet-card.shadow-small{box-shadow:none}}@media (min-width: 48em){.duet-card.shadow-medium{box-shadow:none}}@media (min-width: 62em){.duet-card.shadow-large{box-shadow:none}}@media (min-width: 64.0625em){.duet-card.shadow-x-large{box-shadow:none}}@media (min-width: 76.25em){.duet-card.shadow-xx-large{box-shadow:none}}@media (min-width: 106.25em){.duet-card.shadow-xxx-large{box-shadow:none}}@media (min-width: 36em){.duet-card{padding:28px !important}}.duet-card.duet-theme-turva{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, 28, 58);box-shadow:0 2px 6px 0 rgba(117, 117, 117, 0.13), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07)}@media (min-width: 36em){.duet-card.xx-small{padding:12px !important}}@media (min-width: 36em){.duet-card.x-small{padding:20px !important}}@media (min-width: 36em){.duet-card.medium{padding:28px !important}}@media (min-width: 48em){.duet-card.medium{padding:36px !important}}@media (min-width: 36em){.duet-card.large{padding:36px !important}}@media (min-width: 48em){.duet-card.large{padding:48px !important}}@media (min-width: 36em){.duet-card.x-large{padding:48px !important}}@media (min-width: 48em){.duet-card.x-large{padding:72px !important}}.duet-card.duet-card-collapsed{padding-bottom:0 !important}@media (min-width: 36em){.duet-card.duet-card-collapsed{padding-bottom:0 !important}}.duet-card.info{background:rgba(0, 80, 128, 0.04) !important;box-shadow:none}.duet-card.info.duet-theme-turva{background:rgba(23, 28, 58, 0.035) !important}.duet-card.plain{box-shadow:none}.duet-card.plain:not(.duet-card-has-bg){background:transparent !important}.duet-card-heading-grid{display:flex;flex-direction:row}.duet-card-icon{align-self:center}.duet-card-heading-text{flex:1;word-break:break-word}.duet-card-secondary-heading{font-size:1rem;font-weight:600;word-break:break-word}.duet-card-secondary-heading--inline{display:block;flex:1;align-self:flex-start;line-height:1.875;text-align:right}@media (max-width: 22.5em){.duet-card-secondary-heading--inline{display:none}}.duet-card-secondary-heading--new-line{display:none}@media (max-width: 22.5em){.duet-card-secondary-heading--new-line{display:block}}.duet-card-heading{position:relative;display:block;padding:16px 20px;margin:-20px -20px 20px;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:1.25rem;font-weight:800;color:rgb(0, 41, 77);border-bottom:1px solid rgb(225, 227, 230);border-radius:4px 4px 0 0}@media (min-width: 36em){.duet-card-heading{padding:15px 28px 16px !important;margin:-28px -28px 20px}.none .duet-card-heading{padding:0 !important;margin:0}}.duet-card-image-mask+.duet-card-heading{border-radius:0}.duet-card-heading.duet-card-heading--collapsible{cursor:pointer}.duet-card-heading.duet-card-heading--collapsible button{width:100%;font-family:inherit;font-size:inherit;font-weight:inherit;color:inherit;text-align:left;cursor:pointer}.duet-card-heading.duet-card-heading--collapsible button:focus{outline:0}:host(.user-is-tabbing) .duet-card-heading.duet-card-heading--collapsible button: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 .duet-card-heading.duet-card-heading--collapsible button:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-card-collapsed .duet-card-heading{margin-bottom:0 !important;border-bottom:0 !important}.duet-theme-turva .duet-card-heading{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, 28, 58);border-color:rgb(228, 228, 230)}@media (min-width: 36em){.xx-small .duet-card-heading{padding:6px 12px 7px !important;margin:-12px -12px 12px}}@media (min-width: 48em){.xx-small .duet-card-heading{padding:6px 12px 7px !important;margin:-12px -12px 12px}}@media (min-width: 36em){.x-small .duet-card-heading{padding:10px 20px 11px !important;margin:-20px -20px 20px}}@media (min-width: 48em){.x-small .duet-card-heading{padding:10px 20px 11px !important;margin:-20px -20px 20px}}.medium .duet-card-heading{margin:-20px -20px 20px}@media (min-width: 36em){.medium .duet-card-heading{padding:15px 28px 16px !important;margin:-28px -28px 20px}}@media (min-width: 48em){.medium .duet-card-heading{padding:19px 36px 20px !important;margin:-36px -36px 28px}}.large .duet-card-heading{margin:-20px -20px 20px}@media (min-width: 36em){.large .duet-card-heading{padding:19px 36px 20px !important;margin:-36px -36px 28px}}@media (min-width: 48em){.large .duet-card-heading{padding:26px 48px 27px !important;margin:-48px -48px 36px}}.x-large .duet-card-heading{margin:-20px -20px 20px}@media (min-width: 36em){.x-large .duet-card-heading{padding:26px 48px 27px !important;margin:-48px -48px 36px}}@media (min-width: 48em){.x-large .duet-card-heading{padding:39px 72px 40px !important;margin:-72px -72px 48px}}.none .duet-card-heading{padding:0;margin:0}.duet-card-footer{padding:20px;margin:20px -20px -20px;font-size:0.875rem;line-height:1.25;background:rgb(245, 248, 250);border-bottom-right-radius:4px;border-bottom-left-radius:4px}.duet-theme-turva .duet-card-footer{background:rgb(245, 245, 247)}@media (min-width: 36em){.duet-card-footer{padding:15px 28px 16px !important;margin:20px -28px -28px}}@media (min-width: 48em){.duet-card-footer{padding:15px 28px 16px !important;margin:20px -28px -28px}}@media (min-width: 36em){.xx-small .duet-card-footer{padding:10px 20px 11px !important;padding-left:12px !important;margin:12px -12px -12px}}@media (min-width: 36em){.x-small .duet-card-footer{padding:15px 28px 16px !important;padding-left:20px !important;margin:20px -20px -20px}}@media (min-width: 36em){.medium .duet-card-footer{padding:15px 28px 16px !important;margin:20px -28px -28px}}@media (min-width: 48em){.medium .duet-card-footer{padding:19px 36px 20px !important;margin:28px -36px -36px}}@media (min-width: 36em){.large .duet-card-footer{padding:19px 36px 20px !important;margin:28px -36px -36px}}@media (min-width: 48em){.large .duet-card-footer{padding:26px 48px 27px !important;margin:36px -48px -48px}}@media (min-width: 36em){.x-large .duet-card-footer{padding:26px 48px 27px !important;margin:36px -48px -48px}}@media (min-width: 48em){.x-large .duet-card-footer{padding:39px 72px 40px !important;margin:48px -72px -72px}}.none .duet-card-footer{padding:0;margin:0}.duet-card-content{flex:1 1 auto;width:100%}.duet-card-collapsed .duet-card-content{display:none}.duet-card-caret{position:relative;top:6px;align-self:flex-start;transition:300ms ease}[aria-expanded=false] .duet-card-caret{transform:rotate(-180deg)}.duet-card-image-mask{position:relative;width:calc(100% + 40px);margin:-20px 0 20px -20px;overflow:hidden;border-top-left-radius:4px;border-top-right-radius:4px}@media (min-width: 36em){.small .duet-card-image-mask{width:calc(100% + 56px);margin:-28px 0 28px -28px}}@media (min-width: 36em){.medium .duet-card-image-mask{width:calc(100% + 56px);margin:-28px 0 28px -28px}}@media (min-width: 48em){.medium .duet-card-image-mask{width:calc(100% + 72px);margin:-36px 0 28px -36px}}@media (min-width: 36em){.large .duet-card-image-mask{width:calc(100% + 72px);margin:-36px 0 36px -36px}}@media (min-width: 48em){.large .duet-card-image-mask{width:calc(100% + 96px);margin:-48px 0 36px -48px}}@media (min-width: 36em){.x-large .duet-card-image-mask{width:calc(100% + 96px);margin:-48px 0 36px -48px}}@media (min-width: 48em){.x-large .duet-card-image-mask{width:calc(100% + 144px);margin:-72px 0 36px -72px}}.none .duet-card-image-mask{width:100%;padding:0;margin:0}.duet-card-image{display:block;width:102%;min-width:1px;max-width:102%;height:auto;min-height:1px;margin-left:-1%;transition:transform 300ms ease;transform:scale(1.0001)}a.duet-card{transition:box-shadow 300ms ease, background-position 300ms ease}a.duet-card:hover{box-shadow:0 2px 6px 0 rgba(0, 41, 77, 0.07), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07), 0 2px 10px 0 rgba(0, 41, 77, 0.1)}a.duet-card:hover .duet-card-image{transform:scale(1.024)}.duet-theme-turva a.duet-card:hover{box-shadow:0 2px 6px 0 rgba(117, 117, 117, 0.13), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07), 0 2px 10px 0 rgba(117, 117, 117, 0.15)}a.duet-card:active{transition:none;transform:translateY(1px)}";
 
-const DuetCard$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
+const DuetCard$1 = /*@__PURE__*/ proxyCustomElement(class DuetCard extends H {
   constructor() {
     super();
     this.__registerHost();
@@ -65,6 +66,9 @@ const DuetCard$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
     this.hasHeadingSlot = !!this.element.querySelector(":scope > [slot='heading']");
     this.hasFooter = !!this.element.querySelector("[slot='footer']");
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   renderHeading() {
     const safeHeadingLevel = sanitizeString(this.headingLevel);
     const HeadingTag = [...duetHeadingLevels, duetBlock].some(tag => tag === safeHeadingLevel) ? safeHeadingLevel : "h2";

package/lib/dist-custom-elements/duet-checkbox.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetCheckbox$1, d as defineCustomElement$1 } from './p-216ee242.js';
+import { D as DuetCheckbox$1, d as defineCustomElement$1 } from './p-bc972b0a.js';
 
 const DuetCheckbox = DuetCheckbox$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-checkmark.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetCheckmark$1, d as defineCustomElement$1 } from './p-9ec763ef.js';
+import { D as DuetCheckmark$1, d as defineCustomElement$1 } from './p-8f0848ab.js';
 
 const DuetCheckmark = DuetCheckmark$1;
 const defineCustomElement = defineCustomElement$1;