@duetds/components 7.1.0 → 7.1.1

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

@@ -0,0 +1,159 @@
+/*!
+ * Built with Duet Design System
+ */
+import { getCurrentLanguage, getLanguage, getLocale, getLocaleString, isOfTypeLanguage } from "./language-utils";
+import { convertHtmlQuotes } from "./string-utils";
+describe("language-utils", () => {
+  describe("isOfTypeLanguage", () => {
+    it("return true is language if part of default languages", () => {
+      expect(isOfTypeLanguage("fi")).toBe(true);
+      expect(isOfTypeLanguage("en")).toBe(true);
+      expect(isOfTypeLanguage("sv")).toBe(true);
+    });
+    it("return false is language if not part of default languages", () => {
+      expect(isOfTypeLanguage("su")).toBe(false);
+      expect(isOfTypeLanguage("uk")).toBe(false);
+      expect(isOfTypeLanguage("dk")).toBe(false);
+    });
+  });
+  describe("getLocaleString", () => {
+    it("return the correct string", () => {
+      const object = {
+        fi: "finnish",
+        sv: "swedish",
+        en: "english",
+      };
+      expect(getLocaleString(object)).toBe(object["fi"]);
+    });
+    it("return the correct string for wrong overrides", () => {
+      const object = {
+        fi: "finnish",
+        sv: "swedish",
+        en: "english",
+        dk: "denmark",
+      };
+      expect(getLocaleString(object, "dk")).toBe(object["fi"]);
+    });
+    it("works with urlencoded strings (passed from a html element)", () => {
+      const reference = {
+        fi: { error: "Tiedostot, joissa on virheitä", success: "Tiedostot" },
+        sv: { error: "Filer med fel", success: "Filer" },
+        en: { error: "Files with errors", success: "Files" },
+      };
+      const object = '{"fi":{"error":"Tiedostot, joissa on virheitä","success":"Tiedostot"},"sv":{"error":"Filer med fel","success":"Filer"},"en":{"error":"Files with errors","success":"Files"}}';
+      const objectWithQuotes = "{"fi":{"error":"Tiedostot, joissa on virheitä","success":"Tiedostot"},"sv":{"error":"Filer med fel","success":"Filer"},"en":{"error":"Files with errors","success":"Files"}}";
+      const objectWithApos = "{'fi':{'error':'Tiedostot, joissa on virheitä','success':'Tiedostot'},'sv':{'error':'Filer med fel','success':'Filer'},'en':{'error':'Files with errors','success':'Files'}}";
+      const parsedObject = JSON.parse(convertHtmlQuotes(object));
+      const parseObjectWithQuotes = JSON.parse(convertHtmlQuotes(objectWithQuotes));
+      const parseObjectWithApos = JSON.parse(convertHtmlQuotes(objectWithApos));
+      expect(JSON.stringify(parsedObject)).toEqual(JSON.stringify(parseObjectWithQuotes));
+      expect(getLocaleString(parsedObject, "fi")).toEqual(reference["fi"]);
+      expect(getLocaleString(parseObjectWithQuotes)).toEqual(reference["fi"]);
+      expect(getLocaleString(parseObjectWithApos)).toEqual(reference["fi"]);
+    });
+  });
+  describe("getLocale", () => {
+    it("return the correct locale for se", () => {
+      const object = {
+        locale: "sv-SE",
+        money: "€",
+      };
+      expect(getLocale("sv")).toMatchObject(object);
+    });
+    it("return the correct locale for en", () => {
+      const object = {
+        locale: "en-GB",
+        money: "£",
+      };
+      expect(getLocale("en")).toMatchObject(object);
+    });
+    it("return the correct locale for us", () => {
+      const object = {
+        locale: "en-US",
+        money: "$",
+      };
+      expect(getLocale("us")).toMatchObject(object);
+    });
+    it("return the correct locale for fi", () => {
+      const object = {
+        locale: "fi-FI",
+        money: "€",
+      };
+      expect(getLocale("fi")).toMatchObject(object);
+    });
+    it("throws error for unknown languages", () => {
+      expect(() => {
+        //@ts-ignore
+        getLocale("no");
+      }).toThrow();
+    });
+  });
+  describe("getLanguage", () => {
+    it("returns a valid language even when given a unsuitable string", () => {
+      expect(getLanguage("shouldFail")).toBe("fi");
+      expect(getLanguage("us")).toBe("fi");
+      expect(getLanguage("sv")).toBe("sv");
+      expect(getLanguage("en")).toBe("en");
+      expect(getLanguage("fi")).toBe("fi");
+      expect(getLanguage()).toBe("fi");
+    });
+    it("should return correct language when html Lang is NOT present", () => {
+      delete document.documentElement.lang;
+      expect(getCurrentLanguage()).toBe("fi");
+      expect(getLanguage()).toBe("fi");
+    });
+    it("should return correct language when html Lang is present and set to fi", () => {
+      Object.defineProperty(document.documentElement, "lang", { value: "fi", configurable: true });
+      expect(getCurrentLanguage()).toBe("fi");
+      expect(getLanguage()).toBe("fi");
+    });
+    it("should return correct language when html Lang is present and set to sv", () => {
+      Object.defineProperty(document.documentElement, "lang", { value: "sv", configurable: true });
+      expect(getCurrentLanguage()).toBe("sv");
+      expect(getLanguage()).toBe("sv");
+    });
+    it("should return correct language when html Lang is present and set to en", () => {
+      Object.defineProperty(document.documentElement, "lang", { value: "en", configurable: true });
+      expect(getCurrentLanguage()).toBe("en");
+      expect(getLanguage()).toBe("en");
+    });
+    it("should return correct language when html Lang is present and set to dk", () => {
+      Object.defineProperty(document.documentElement, "lang", { value: "dk", configurable: true });
+      expect(getCurrentLanguage()).toBe("dk");
+      expect(getLanguage()).toBe("fi");
+    });
+  });
+  describe("avoid introducing breaking changes where label as String mutates to Object", () => {
+    /**
+     * We want to make sure that no regressions or breaking changes are introduced when converting props such as
+      @Prop() accessibleLabel: string = "Sulje viesti"
+
+     to
+
+     @Prop() accessibleLabel: string = getLocaleString({
+              fi: "default finnish",
+              sv: "default swedish",
+              en: "default english",
+            })
+     */
+    const somePresetObject = {
+      fi: "preset finnish",
+      sv: "preset swedish",
+      en: "preset english",
+    };
+    const mockStringAsProperty = (variable) => {
+      return variable ? variable : getLocaleString(somePresetObject);
+    };
+    it("should not fail when label is a string", () => {
+      const testString = "some thing that is a string";
+      const resultString = mockStringAsProperty(testString);
+      const resultStringUndef = mockStringAsProperty(undefined);
+      const resultStringEmpty = mockStringAsProperty();
+      const resultStringNull = mockStringAsProperty(null);
+      expect(resultString).toBe(testString);
+      expect(resultStringEmpty).toBe(somePresetObject.fi);
+      expect(resultStringNull).toBe(somePresetObject.fi);
+      expect(resultStringUndef).toBe(somePresetObject.fi);
+    });
+  });
+});

package/lib/collection/utils/math.utils.spec.js

@@ -0,0 +1,140 @@
+/*!
+ * Built with Duet Design System
+ */
+import { clamp, roundTo, SafeParseFloat } from "./math.utils";
+describe("math utils", () => {
+  describe("roundTo", () => {
+    it("should round to whole numbers", () => {
+      expect(roundTo(123, 5)).toBe(125);
+      expect(roundTo(111, 5)).toBe(110);
+    });
+    it("should round to negative whole numbers", () => {
+      expect(roundTo(-123, 5)).toBe(-125);
+      expect(roundTo(-111, 5)).toBe(-110);
+    });
+    it("should round to decimal numbers", () => {
+      expect(roundTo(1.3, 0.5)).toBe(1.5);
+      expect(roundTo(1.2, 0.5)).toBe(1);
+      expect(roundTo(1.2, 1.5)).toBe(1.5);
+    });
+    it("should round to negative decimal numbers", () => {
+      expect(roundTo(-1.3, 0.5)).toBe(-1.5);
+      expect(roundTo(-1.2, 0.5)).toBe(-1);
+      expect(roundTo(-1.2, 1.5)).toBe(-1.5);
+    });
+  });
+  describe("clamp", () => {
+    it("should return value if in range", () => {
+      expect(clamp(5, 0, 10)).toBe(5);
+    });
+    it("should return min if value < min", () => {
+      expect(clamp(-5, 0, 10)).toBe(0);
+    });
+    it("should return max if value > max", () => {
+      expect(clamp(15, 0, 10)).toBe(10);
+    });
+    it("should return max if value > max for negative min", () => {
+      expect(clamp(15, -10, 10)).toBe(10);
+    });
+    it("should return min if value < min for negative min", () => {
+      expect(clamp(-15, -10, 10)).toBe(-10);
+    });
+  });
+  describe("SafeParseFloat with locale", () => {
+    it("should parse numbers in Swedish locale", () => {
+      expect(SafeParseFloat("12345,67", "sv-SE")).toBe(12345.67);
+      expect(SafeParseFloat("12 345,67", "sv-SE")).toBe(12345.67);
+      expect(SafeParseFloat("12 345,67€", "sv-SE")).toBe(12345.67);
+    });
+    it("should parse numbers in Finnish locale", () => {
+      expect(SafeParseFloat("12345,67", "fi-FI")).toBe(12345.67);
+      expect(SafeParseFloat("12 345,67", "fi-FI")).toBe(12345.67);
+      expect(SafeParseFloat("12 345,67€", "fi-FI")).toBe(12345.67);
+    });
+    it("should parse numbers in English locale", () => {
+      expect(SafeParseFloat("12345.67", "en-GB")).toBe(12345.67);
+      expect(SafeParseFloat("12,345.67", "en-GB")).toBe(12345.67);
+      expect(SafeParseFloat("12,345.67€", "en-GB")).toBe(12345.67);
+    });
+    it("should throw if something not a number is supplied", () => {
+      // @ts-ignore
+      expect(() => SafeParseFloat("definitely not a 10100 number ", "it-IT")).toThrow(Error);
+    });
+    it("should support negqative values", () => {
+      // @ts-ignore
+      expect(SafeParseFloat("-12 345,67€", "fi-FI")).toBe(-12345.67);
+      expect(SafeParseFloat("-12 345,67€", "sv-SE")).toBe(-12345.67);
+      expect(SafeParseFloat("-1€", "fi-FI")).toBe(-1);
+      expect(SafeParseFloat("-1", "fi-FI")).toBe(-1);
+      expect(SafeParseFloat("-1 €", "fi-FI")).toBe(-1);
+      expect(SafeParseFloat("-1 ", "fi-FI")).toBe(-1);
+      expect(SafeParseFloat("-10 ", "fi-FI")).toBe(-10);
+      expect(SafeParseFloat("- 10 ", "fi-FI")).toBe(-10);
+    });
+  });
+});
+describe("math-utils negative numbers", () => {
+  describe("roundTo", () => {
+    it("should round to negative decimal numbers", () => {
+      expect(roundTo(-1.3, 0.5)).toBe(-1.5);
+      expect(roundTo(-1.2, 0.5)).toBe(-1);
+      expect(roundTo(-1.2, 1.5)).toBe(-1.5);
+    });
+  });
+  describe("clamp", () => {
+    it("should return value if in range", () => {
+      expect(clamp(5, 0, 10)).toBe(5);
+    });
+    it("should return min if value < min", () => {
+      expect(clamp(-5, 0, 10)).toBe(0);
+    });
+    it("should return max if value > max", () => {
+      expect(clamp(15, 0, 10)).toBe(10);
+    });
+    it("should return max if value > max for negative min", () => {
+      expect(clamp(15, -10, 10)).toBe(10);
+    });
+    it("should return min if value < min for negative min", () => {
+      expect(clamp(-15, -10, 10)).toBe(-10);
+    });
+  });
+  describe("SafeParseFloat", () => {
+    it("should parse numbers in Swedish locale", () => {
+      expect(SafeParseFloat("-2", "sv-SE")).toBe(-2);
+      expect(SafeParseFloat("-2 €", "sv-SE")).toBe(-2);
+      expect(SafeParseFloat("-2€", "sv-SE")).toBe(-2);
+      expect(SafeParseFloat("- 2 €", "sv-SE")).toBe(-2);
+    });
+    it("should parse numbers in Finnish locale", () => {
+      expect(SafeParseFloat("-2", "fi-FI")).toBe(-2);
+      expect(SafeParseFloat("-2 €", "fi-FI")).toBe(-2);
+      expect(SafeParseFloat("-2€", "fi-FI")).toBe(-2);
+      expect(SafeParseFloat("- 2 €", "fi-FI")).toBe(-2);
+    });
+    it("should parse numbers in English locale", () => {
+      expect(SafeParseFloat("-2", "en-GB")).toBe(-2);
+      expect(SafeParseFloat("-2 €", "en-GB")).toBe(-2);
+      expect(SafeParseFloat("-2€", "en-GB")).toBe(-2);
+      expect(SafeParseFloat("- 2 €", "en-GB")).toBe(-2);
+    });
+    it("should not throw if unknown locale supplied", () => {
+      // @ts-ignore
+      expect(() => SafeParseFloat("12.345,67", "enokian")).not.toThrow(TypeError);
+    });
+    it("should support negative values", () => {
+      // @ts-ignore
+      expect(SafeParseFloat("-12 345,67€", "fi-FI")).toBe(-12345.67);
+      expect(SafeParseFloat("-12 345,67€", "sv-SE")).toBe(-12345.67);
+      expect(SafeParseFloat("-12 345.67€", "en-GB")).toBe(-12345.67);
+      expect(SafeParseFloat("-12 345,67€", "fi-FI")).toBe(-12345.67);
+      expect(SafeParseFloat("-12 345,67€", "sv-SE")).toBe(-12345.67);
+      expect(SafeParseFloat("-12,345.67€", "en-GB")).toBe(-12345.67);
+      expect(SafeParseFloat("-1€", "fi-FI")).toBe(-1);
+      expect(SafeParseFloat("-1", "fi-FI")).toBe(-1);
+      expect(SafeParseFloat("-1 €", "fi-FI")).toBe(-1);
+      expect(SafeParseFloat("-1 ", "fi-FI")).toBe(-1);
+      expect(SafeParseFloat("-10 ", "fi-FI")).toBe(-10);
+      expect(SafeParseFloat("- 10 ", "fi-FI")).toBe(-10);
+    });
+  });
+});

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

@@ -0,0 +1,39 @@
+/*!
+ * Built with Duet Design System
+ */
+import { parsePossibleJSON } from "./string-utils";
+describe("string-utils", () => {
+  describe("parsePossibleString", () => {
+    it("returns exact same object, if object is passed", () => {
+      const object = { hello: "world" };
+      expect(parsePossibleJSON(object)).toBe(object);
+    });
+    it("returns exact same array, if array is passed", () => {
+      const array = [{ hello: "world" }];
+      expect(parsePossibleJSON(array)).toBe(array);
+    });
+    it("parses string arguments as JSON", () => {
+      const object = { hello: "world" };
+      const stringifiedObject = JSON.stringify(object);
+      expect(parsePossibleJSON(stringifiedObject)).toEqual(object);
+    });
+    it("gracefully handles malformed/invalid JSON", () => {
+      // spy on console.warn so we can assert it was called, and avoid mess in test output
+      const spy = jest.spyOn(global.console, "warn").mockImplementation(() => jest.fn());
+      // intentionally invalid JSON - unquoted property name
+      const stringifiedObject = '{ hello: "world" }';
+      expect(parsePossibleJSON(stringifiedObject)).toBe(undefined);
+      expect(console.warn).toHaveBeenCalled();
+      spy.mockRestore();
+    });
+    it("returns undefined for other types of data", () => {
+      expect(parsePossibleJSON(null)).toBe(undefined);
+      expect(parsePossibleJSON(undefined)).toBe(undefined);
+      expect(parsePossibleJSON(function () {
+        /*intentionally empty*/
+      })).toBe(undefined);
+      expect(parsePossibleJSON(true)).toBe(undefined);
+      expect(parsePossibleJSON(12345)).toBe(undefined);
+    });
+  });
+});

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-479fa83d.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-6816fd1b.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-53fba128.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,17 +1,17 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-1d90b10e.js';
-import { i as inheritGlobalTheme } from './p-4ebf1618.js';
-import { n as nudge } from './p-3ae39071.js';
-import { g as getColorByName } from './p-03e72a70.js';
-import { d as defineCustomElement$4 } from './p-99ec82e5.js';
-import { d as defineCustomElement$3 } from './p-e611a3df.js';
-import { d as defineCustomElement$2 } from './p-decdd69c.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();

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

@@ -1,17 +1,17 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-1d90b10e.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 { n as nudge } from './p-3ae39071.js';
-import { d as defineCustomElement$2 } from './p-e611a3df.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();