@ukic/web-components 3.10.0 → 3.12.0

package/dist/collection/components/ic-select/ic-select_(single).stories.js

@@ -13,6 +13,7 @@ const defaultArgs = {
   readonly: false,
   required: false,
   size: "medium",
+  validationAriaLive: "polite",
   validationStatus: "no status",
   ["validation-text"]: "",
   ["show-clear-button"]: false,
@@ -139,7 +140,8 @@ export const WithDescriptions = {
           {
             label: "Cappuccino",
             value: "Cap",
-            description: "Coffee frothed up with pressurised steam",
+            description:
+              "An espresso-based drink traditionally composed of equal parts espresso, steamed milk, and milk foam, creating a balanced flavor and velvety texture",
           },
           {
             label: "Latte",
@@ -227,17 +229,17 @@ export const CustomComponents = {
             value: "Lat",
             description: "A milkier coffee than a cappuccino",
             element: {
-              component: \`<ic-status-tag label="Neutral status"></ic-status-tag>\`,
-              ariaLabel: "Neutral status tag",
+              component: \`<ic-status-tag label="Success status" status="success"></ic-status-tag>\`,
+              ariaLabel: "Success status tag",
             },
-            icon: \`<svg aria-labelledby="warning-title" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000"><g id="warning"><path id="Vector" d="M4.47 20.5037H19.53C21.07 20.5037 22.03 18.8337 21.26 17.5037L13.73 4.49375C12.96 3.16375 11.04 3.16375 10.27 4.49375L2.74 17.5037C1.97 18.8337 2.93 20.5037 4.47 20.5037ZM12 13.5037C11.45 13.5037 11 13.0537 11 12.5037V10.5037C11 9.95375 11.45 9.50375 12 9.50375C12.55 9.50375 13 9.95375 13 10.5037V12.5037C13 13.0537 12.55 13.5037 12 13.5037ZM13 17.5037H11V15.5037H13V17.5037Z" /></g></svg>\`,
+            icon: \`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000"><g><path d="M4.47 20.5037H19.53C21.07 20.5037 22.03 18.8337 21.26 17.5037L13.73 4.49375C12.96 3.16375 11.04 3.16375 10.27 4.49375L2.74 17.5037C1.97 18.8337 2.93 20.5037 4.47 20.5037ZM12 13.5037C11.45 13.5037 11 13.0537 11 12.5037V10.5037C11 9.95375 11.45 9.50375 12 9.50375C12.55 9.50375 13 9.95375 13 10.5037V12.5037C13 13.0537 12.55 13.5037 12 13.5037ZM13 17.5037H11V15.5037H13V17.5037Z" /></g></svg>\`,
           },
           {
             label: "Americano",
             value: "Ame",
-            icon: \`<svg aria-labelledby="warning-title" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
-            <g id="warning">
-            <path id="Vector" d="M4.47 20.5037H19.53C21.07 20.5037 22.03 18.8337 21.26 17.5037L13.73 4.49375C12.96 3.16375 11.04 3.16375 10.27 4.49375L2.74 17.5037C1.97 18.8337 2.93 20.5037 4.47 20.5037ZM12 13.5037C11.45 13.5037 11 13.0537 11 12.5037V10.5037C11 9.95375 11.45 9.50375 12 9.50375C12.55 9.50375 13 9.95375 13 10.5037V12.5037C13 13.0537 12.55 13.5037 12 13.5037ZM13 17.5037H11V15.5037H13V17.5037Z" />
+            icon: \`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+            <g>
+            <path d="M4.47 20.5037H19.53C21.07 20.5037 22.03 18.8337 21.26 17.5037L13.73 4.49375C12.96 3.16375 11.04 3.16375 10.27 4.49375L2.74 17.5037C1.97 18.8337 2.93 20.5037 4.47 20.5037ZM12 13.5037C11.45 13.5037 11 13.0537 11 12.5037V10.5037C11 9.95375 11.45 9.50375 12 9.50375C12.55 9.50375 13 9.95375 13 10.5037V12.5037C13 13.0537 12.55 13.5037 12 13.5037ZM13 17.5037H11V15.5037H13V17.5037Z" />
             </g>
             </svg>\`,
           },
@@ -573,6 +575,101 @@ export const Validation = {
   name: "Validation",
 };
 
+export const AriaLiveBehaviour = {
+  render: (args) =>
+    html`<ic-select
+        id="field-1"
+        label="What is your favourite coffee?"
+        helper-text="Error already set on page load and aria-live overridden as 'assertive'"
+        validation-status="error"
+        validation-text="First error message"
+        validation-aria-live="assertive"
+      ></ic-select>
+      <br />
+      <ic-select
+        id="field-2"
+        label="What is your favourite coffee?"
+        helper-text="Error set after page load and aria-live overridden as 'assertive'"
+        validation-aria-live="assertive"
+      ></ic-select>
+      <br />
+      <ic-button id="toggle-btn-1">Toggle errors</ic-button>
+      <script>
+        let showErrors1 = false;
+        const btn1 = document.getElementById("toggle-btn-1");
+        const field1 = document.getElementById("field-1");
+        const field2 = document.getElementById("field-2");
+
+        btn1.addEventListener("click", () => {
+          showErrors1 = !showErrors1;
+
+          field1.setAttribute("validation-status", showErrors1 ? "" : "error");
+          field1.setAttribute(
+            "validation-text",
+            showErrors1 ? "" : "First error message"
+          );
+
+          field2.setAttribute("validation-status", showErrors1 ? "error" : "");
+          field2.setAttribute(
+            "validation-text",
+            showErrors1 ? "Second error message" : ""
+          );
+        });
+      </script>
+      <br />
+      <br />
+      <br />
+      <br />
+      <ic-select
+        id="field-3"
+        label="What is your favourite coffee?"
+        helper-text="Default aria-live behaviour (i.e. 'polite')"
+      ></ic-select>
+      <br />
+      <ic-select
+        id="field-4"
+        label="What is your favourite coffee?"
+        helper-text="Default aria-live behaviour (i.e. 'polite')"
+      ></ic-select>
+      <br />
+      <ic-button id="toggle-btn-2">Toggle errors</ic-button>
+      <script>
+        let showErrors2 = false;
+        const btn2 = document.getElementById("toggle-btn-2");
+        const field3 = document.getElementById("field-3");
+        const field4 = document.getElementById("field-4");
+
+        btn2.addEventListener("click", () => {
+          showErrors2 = !showErrors2;
+
+          field3.setAttribute("validation-status", showErrors2 ? "error" : "");
+          field3.setAttribute(
+            "validation-text",
+            showErrors2 ? "Third error message" : ""
+          );
+
+          field4.setAttribute("validation-status", showErrors2 ? "error" : "");
+          field4.setAttribute(
+            "validation-text",
+            showErrors2 ? "Fourth error message" : ""
+          );
+        });
+
+        document.querySelectorAll("ic-select").forEach((el) => {
+          el.options = [
+            { label: "Cappuccino", value: "Cap" },
+            { label: "Latte", value: "Lat" },
+            { label: "Americano", value: "Ame" },
+          ];
+          el.addEventListener("icChange", function (event) {
+            console.log("icChange: " + event.detail.value);
+          });
+        });
+      </script>`,
+
+  name: "Aria-live behaviour",
+};
+
 export const ScrollBehaviour = {
   render: () =>
     html`<ic-select
@@ -678,6 +775,8 @@ export const EmittingIcOptionSelectOnEnter = {
   name: "Emitting icOptionSelect on enter",
 };
 
+const inlineRadioSelector = "inline-radio";
+
 export const Playground = {
   render: (args) =>
     html` <ic-select
@@ -694,6 +793,7 @@ export const Playground = {
         required=${args.required}
         show-clear-button=${args["show-clear-button"]}
         size=${args.size}
+        validation-aria-live=${args.validationAriaLive}
         validation-status=${args.validationStatus === "no status"
           ? ""
           : args.validationStatus}
@@ -721,7 +821,8 @@ export const Playground = {
           {
             label: "Cappuccino",
             value: "Cap",
-            description: "Coffee frothed up with pressurised steam",
+            description:
+              "An espresso-based drink traditionally composed of equal parts espresso, steamed milk, and milk foam, creating a balanced flavor and velvety texture",
           },
           {
             label: "Boring",
@@ -775,6 +876,14 @@ export const Playground = {
   args: defaultArgs,
 
   argTypes: {
+    validationAriaLive: {
+      options: ["polite", "assertive", "off"],
+
+      control: {
+        type: inlineRadioSelector,
+      },
+    },
+
     validationStatus: {
       defaultValue: "no status",
       options: ["no status", "error", "success", "warning"],
@@ -788,7 +897,7 @@ export const Playground = {
       options: ["small", "medium", "large"],
 
       control: {
-        type: "inline-radio",
+        type: inlineRadioSelector,
       },
     },
 
@@ -802,7 +911,7 @@ export const Playground = {
       options: ["inherit", "light", "dark"],
 
       control: {
-        type: "inline-radio",
+        type: inlineRadioSelector,
       },
     },
   },

package/dist/collection/components/ic-select/test/a11y/ic-select.test.a11y.js

@@ -0,0 +1,60 @@
+import { fixture } from "@open-wc/testing-helpers";
+import { axe } from "jest-axe";
+// Unable to import from @ukic/web-components
+import { checkShadowElementRendersCorrectly } from "../../../../utils/testa11y.helpers";
+describe("ic-select", () => {
+    it("passes accessibility", async () => {
+        const el = await fixture(`<ic-select 
+    placeholder="Select an option..." 
+    label="What is your favourite coffee?"
+  ></ic-select>
+  <script>
+     const select = document.querySelector("ic-select");
+     let option = "Cappuccino";
+     select.options = [
+       { label: "Espresso", value: "espresso" },
+       { label: "Double Espresso", value: "doubleespresso" },
+       { label: "Flat White", value: "flatwhite" },
+       { label: "Cappuccino", value: "cappuccino" },
+       { label: "Americano", value: "americano" },
+       { label: "Mocha", value: "mocha" },
+     ];
+     select.addEventListener("icChange", function (event) {
+       console.log(event.detail.value);
+     });
+   </script>`);
+        checkShadowElementRendersCorrectly(el);
+        expect(await axe(el)).toHaveNoViolations();
+    });
+});
+describe("ic-select-searchable", () => {
+    it("passes accessibility", async () => {
+        const el = await fixture(`<ic-select 
+    placeholder="Select an option…"
+    label="What is your favourite coffee?" 
+    searchable="true"
+  ></ic-select>
+   <script>
+     const select = document.querySelector("ic-select");
+     let option = "Cappuccino";
+     select.options = [
+       { label: "Cappuccino", value: "Cap" },
+       { label: "Latte", value: "Lat" },
+       { label: "Americano", value: "Ame" },
+       { label: "Flat white", value: "Fla" },
+       { label: "Mocha", value: "Moc" },
+       { label: "Macchiato", value: "Mac" },
+       { label: "Café au lait", value: "Caf" },
+       { label: "Espresso", value: "Esp" },
+       { label: "Cortado", value: "Cor" },
+       { label: "Latte macchiato", value: "Lam" },
+     ];
+     select.addEventListener("icChange", function (event) {
+       console.log(event.detail.value);
+     });
+   </script>`);
+        checkShadowElementRendersCorrectly(el);
+        expect(await axe(el)).toHaveNoViolations();
+    });
+});
+//# sourceMappingURL=ic-select.test.a11y.js.map

package/dist/collection/components/ic-select/test/a11y/ic-select.test.a11y.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-select.test.a11y.js","sourceRoot":"","sources":["../../../../../src/components/ic-select/test/a11y/ic-select.test.a11y.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAC/B,6CAA6C;AAC7C,OAAO,EAAE,kCAAkC,EAAE,MAAM,oCAAoC,CAAC;AAExF,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;IACzB,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;QACpC,MAAM,EAAE,GAAG,MAAM,OAAO,CACtB;;;;;;;;;;;;;;;;;;aAkBO,CACR,CAAC;QACF,kCAAkC,CAAC,EAAE,CAAC,CAAC;QACvC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAC;IAC7C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC;AAEH,QAAQ,CAAC,sBAAsB,EAAE,GAAG,EAAE;IACpC,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;QACpC,MAAM,EAAE,GAAG,MAAM,OAAO,CACtB;;;;;;;;;;;;;;;;;;;;;;;aAuBO,CACR,CAAC;QACF,kCAAkC,CAAC,EAAE,CAAC,CAAC;QACvC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAC;IAC7C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { fixture } from \"@open-wc/testing-helpers\";\nimport { axe } from \"jest-axe\";\n// Unable to import from @ukic/web-components\nimport { checkShadowElementRendersCorrectly } from \"../../../../utils/testa11y.helpers\";\n\ndescribe(\"ic-select\", () => {\n  it(\"passes accessibility\", async () => {\n    const el = await fixture(\n      `<ic-select \n    placeholder=\"Select an option...\" \n    label=\"What is your favourite coffee?\"\n  ></ic-select>\n  <script>\n     const select = document.querySelector(\"ic-select\");\n     let option = \"Cappuccino\";\n     select.options = [\n       { label: \"Espresso\", value: \"espresso\" },\n       { label: \"Double Espresso\", value: \"doubleespresso\" },\n       { label: \"Flat White\", value: \"flatwhite\" },\n       { label: \"Cappuccino\", value: \"cappuccino\" },\n       { label: \"Americano\", value: \"americano\" },\n       { label: \"Mocha\", value: \"mocha\" },\n     ];\n     select.addEventListener(\"icChange\", function (event) {\n       console.log(event.detail.value);\n     });\n   </script>`\n    );\n    checkShadowElementRendersCorrectly(el);\n    expect(await axe(el)).toHaveNoViolations();\n  });\n});\n\ndescribe(\"ic-select-searchable\", () => {\n  it(\"passes accessibility\", async () => {\n    const el = await fixture(\n      `<ic-select \n    placeholder=\"Select an option…\"\n    label=\"What is your favourite coffee?\" \n    searchable=\"true\"\n  ></ic-select>\n   <script>\n     const select = document.querySelector(\"ic-select\");\n     let option = \"Cappuccino\";\n     select.options = [\n       { label: \"Cappuccino\", value: \"Cap\" },\n       { label: \"Latte\", value: \"Lat\" },\n       { label: \"Americano\", value: \"Ame\" },\n       { label: \"Flat white\", value: \"Fla\" },\n       { label: \"Mocha\", value: \"Moc\" },\n       { label: \"Macchiato\", value: \"Mac\" },\n       { label: \"Café au lait\", value: \"Caf\" },\n       { label: \"Espresso\", value: \"Esp\" },\n       { label: \"Cortado\", value: \"Cor\" },\n       { label: \"Latte macchiato\", value: \"Lam\" },\n     ];\n     select.addEventListener(\"icChange\", function (event) {\n       console.log(event.detail.value);\n     });\n   </script>`\n    );\n    checkShadowElementRendersCorrectly(el);\n    expect(await axe(el)).toHaveNoViolations();\n  });\n});\n"]}

package/dist/collection/components/ic-side-navigation/ic-side-navigation.js

@@ -451,7 +451,7 @@ export class SideNavigation {
             isAppNameSubtitleVariant,
             appTitle: appTitle || "",
         };
-        return (h(Host, { key: '3a4a405aa30061588d0ac895db6e59f3c6b10636', class: {
+        return (h(Host, { key: '1871b4817a2429ce72b39c00fc3d46bab905c6fc', class: {
                 "xs-menu-open": menuOpen && isSDevice,
                 "xs-menu-close": !menuOpen && isSDevice,
                 "sm-collapsed": !isSDevice && !menuExpanded,
@@ -460,12 +460,12 @@ export class SideNavigation {
                 [`ic-side-navigation-${IcBrandForegroundEnum.Dark}`]: foregroundColor === IcBrandForegroundEnum.Dark,
                 ["collapsed-labels"]: !isSDevice && !menuExpanded && !!collapsedIconLabels,
                 ["ic-side-navigation-inline"]: !!inline,
-            } }, isSDevice && this.renderTopBar(Object.assign({}, topBarProps)), h("div", { key: '158fd91a6728e919125eef39fe46a03efe9b0728', class: "side-navigation", id: "side-navigation" }, !isSDevice && this.renderTopBar(Object.assign({}, topBarProps)), h("div", { key: 'd77452616f1f0bd6c49e0c0e28ea20474f70eadc', class: "side-navigation-inner" }, isSlotUsed(this.el, "primary-navigation") && (h("nav", { key: '4d8dc4620dbe4288f92ac43a341104b989a5b0c6', class: "primary-navigation", "aria-labelledby": "primary-navigation-landmark" }, h("span", { key: 'acd709a0b58914936c593e5ed82d045b01a19ef9', "aria-hidden": "true", class: "navigation-landmark-title", id: "primary-navigation-landmark" }, "Primary"), h("ul", { key: '6c754d54f09ad1b8264817d5c141fa9bdc63b7fd', class: "navigation-list" }, h("slot", { key: '7f5de9f4adae9d6e0f9a24c095aca5d64049a0b4', name: "primary-navigation" }))))), h("div", { key: 'e0e68cefffb5a521c0a051c4af87c28fae21f922', class: {
+            } }, isSDevice && this.renderTopBar(Object.assign({}, topBarProps)), h("div", { key: 'aebfc5addba3dd16ecce70793aca0bb2ab17063c', class: "side-navigation", id: "side-navigation" }, !isSDevice && this.renderTopBar(Object.assign({}, topBarProps)), h("div", { key: 'a72db8a874a3e55441f1bb863820f46c0514797e', class: "side-navigation-inner" }, isSlotUsed(this.el, "primary-navigation") && (h("nav", { key: 'f3f9d819f3d6b28a754fae1d49f7ce11a701bfe8', class: "primary-navigation", "aria-labelledby": "primary-navigation-landmark" }, h("span", { key: 'd955badde7737aef71f05e06628d9d15de29c64b', "aria-hidden": "true", class: "navigation-landmark-title", id: "primary-navigation-landmark" }, "Primary"), h("ul", { key: 'b4f076849b8d539dfa3fe2d585cb3f20ce6182be', class: "navigation-list" }, h("slot", { key: 'aefe3f024c8d568d18f3258fd544ba2455689e4c', name: "primary-navigation" }))))), h("div", { key: '06d0d7c5fdba21f969b7aa003367f0d6bf55c5ad', class: {
                 ["bottom-wrapper"]: true,
                 ["classification-spacing"]: hasClassificationBanner(),
-            } }, isSlotUsed(this.el, "secondary-navigation") && (h("nav", { key: '2e72b5c8f510d5fb599c5805a37da30962246011', class: "secondary-navigation", "aria-labelledby": "secondary-navigation-landmark" }, h("span", { key: 'c661911fe2c13a2ddd477e69895ad3aa4f8d84b2', "aria-hidden": "true", class: "navigation-landmark-title", id: "secondary-navigation-landmark" }, "Secondary"), h("ul", { key: '0939467dc8307899228ed8391a055ace7fe3d7f6', class: "navigation-list" }, h("slot", { key: 'e9e954d9fd1f909e2ff2112b4b27f0755e237372', name: "secondary-navigation" })))), h("div", { key: 'e7de76b5fa8ba07f3d09faf9d551aea352a4a1eb', class: "bottom-side-nav" }, this.hasSecondaryNavigation && h("ic-divider", { key: '7031b8cd739921ebad638e6130b010b32aa8a14c' }), displayExpandBtn && (h("button", { key: '00aebdc20f176a5c850b5d133c2c240ba0e31574', class: "menu-expand-button", innerHTML: chevronIcon, onClick: () => this.toggleMenuExpanded(!this.menuExpanded), "aria-label": `${menuExpanded ? "Collapse" : "Expand"} side navigation` })), h("div", { key: '8e40643e70455334b03973942c86a3c7ecf84b63', class: "app-status-wrapper" }, status && (h("div", { key: '3634f6bd04cb1cd8c7b5b60b6635b2851209169c', class: {
+            } }, isSlotUsed(this.el, "secondary-navigation") && (h("nav", { key: '98ec2710e3a7efb48f1e10e61883bf907809fd42', class: "secondary-navigation", "aria-labelledby": "secondary-navigation-landmark" }, h("span", { key: '5e5deaff8dcebd21aff6a3d12b8b74a63a1d30af', "aria-hidden": "true", class: "navigation-landmark-title", id: "secondary-navigation-landmark" }, "Secondary"), h("ul", { key: 'fe90d8b0dd6f9eca02cbeff03282d6ceb9c6504c', class: "navigation-list" }, h("slot", { key: 'e8898037866399513e4d30079dfa22103728822f', name: "secondary-navigation" })))), h("div", { key: '6a6ff5aa39c7043b1086341bb1a6f6282d87e05f', class: "bottom-side-nav" }, this.hasSecondaryNavigation && h("ic-divider", { key: '436be776f4e8b35c22ce667f954496b70ecd9560' }), displayExpandBtn && (h("button", { key: 'ca535ebc2e5215117ab336d6e121303410ec5c2c', class: "menu-expand-button", innerHTML: chevronIcon, onClick: () => this.toggleMenuExpanded(!this.menuExpanded), "aria-label": `${menuExpanded ? "Collapse" : "Expand"} side navigation` })), h("div", { key: '8421c8faeb1b0befe65bd8688ba0d1900d412fc2', class: "app-status-wrapper" }, status && (h("div", { key: '5c05a7847f5f3bc96c2ffd257dced7e641d44ca5', class: {
                 ["app-status"]: true,
-            } }, h("ic-typography", { key: 'b39a8f9fe15256bd4604e1edf4dba0f0ccead9a3', "aria-label": "app tag", variant: "label-uppercase", class: "app-status-text" }, status))), version && (h("ic-typography", { key: '8b5473fedef7d77f42cffd1471715518f2dfd43b', variant: "label", class: "app-version", "aria-label": "app version" }, version))))))));
+            } }, h("ic-typography", { key: '573a3ebe74fb8b2ed301781aa92415168a7360a7', "aria-label": "app tag", variant: "label-uppercase", class: "app-status-text" }, status))), version && (h("ic-typography", { key: 'f7da37453fb39e3ca44f79f5780fe42ce7869bb8', variant: "label", class: "app-version", "aria-label": "app version" }, version))))))));
     }
     static get is() { return "ic-side-navigation"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ic-skeleton/ic-skeleton.js

@@ -23,11 +23,11 @@ export class Skeleton {
                 width: el.style.width || (variant === "circle" ? "25px" : "260px"),
             }
             : undefined;
-        return (h(Host, { key: 'bc26af3bed291b88d9eba417aba8b1bd20d02071', class: {
+        return (h(Host, { key: '9652d6ecbb5bd3bca6c490a6e80a80e40fa245af', class: {
                 skeleton: true,
                 "ic-skeleton-circle": variant === "circle",
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            }, style: style, "aria-disabled": "true" }, h("slot", { key: 'b7e19d9b7fc55069b1a5a3d82698378fb2a4fff4' })));
+            }, style: style, "aria-disabled": "true" }, h("slot", { key: 'f476ba878aa6acba4bbe00f1aa30502657331721' })));
     }
     static get is() { return "ic-skeleton"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ic-skip-link/ic-skip-link.js

@@ -35,9 +35,9 @@ export class SkipLink {
     }
     render() {
         const { fullWidth, inline, label, monochrome, target, theme, transparentBackground, } = this;
-        return (h(Host, { key: 'a6229f2e79e16d35283ae63e617e5dbee39f1a31', class: {
+        return (h(Host, { key: 'd5ded3b300f0b8dbe65235d6be9dec8ec8d88b5b', class: {
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, h("ic-link", { key: 'f54ffd72b46d9124023ef6bfe0cf60f7b1091c25', class: {
+            } }, h("ic-link", { key: '8f81758c7ebf977b264890c2df38de381bf1b4f7', class: {
                 "display-top": !inline,
                 "full-width": !!fullWidth,
                 "show-background": !transparentBackground,

package/dist/collection/components/ic-status-tag/ic-status-tag.js

@@ -33,12 +33,12 @@ export class StatusTag {
     }
     render() {
         const { label, status, variant, size, announced, theme, uppercase } = this;
-        return (h(Host, { key: '0ff5d3de133c300d744be1d57a42e5a393735572', class: { [`ic-theme-${theme}`]: theme !== "inherit" }, role: announced ? "status" : null, "aria-label": "Status" }, h("strong", { key: '09e1eeedac25e8128fe42a6fb5435dc06dc7d331', class: {
+        return (h(Host, { key: '294225d51b55c99b24e3eaf077fe5c62008004db', class: { [`ic-theme-${theme}`]: theme !== "inherit" }, role: announced ? "status" : null, "aria-label": "Status" }, h("strong", { key: 'c35594ae01f0e7769381c18a43aa58e21997f0da', class: {
                 ["tag"]: true,
                 [`${variant}-${status}`]: true,
                 ["outlined"]: variant === "outlined",
                 [`${size}`]: true,
-            } }, h("ic-typography", { key: '8543c7387e3337ec720eecaf3dbebbc09edfcb6d', variant: uppercase ? "label-uppercase" : "label", "apply-vertical-margins": false }, h("span", { key: '3673500383906cd09f4f409abff0c2aa12a0c30f' }, label)))));
+            } }, h("ic-typography", { key: '0ccc4949134d73f83cee64ec456d1a3f42054b9e', variant: uppercase ? "label-uppercase" : "label", "apply-vertical-margins": false }, h("span", { key: '4fbe4a1f344e5ced1878ae7e3ac6debfb6a91389' }, label)))));
     }
     static get is() { return "ic-status-tag"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ic-step/ic-step.js

@@ -8,6 +8,19 @@ export class Step {
          * @internal If `true`, and a compact stepper  is being used, the current step will be the only step in view.
          */
         this.current = false;
+        /**
+         * Words within the component that can be replaced to translate the component into a different language
+         */
+        this.icI18n = {
+            next: "Next",
+            step: "Step",
+            of: "of",
+            lastStep: "Last step",
+            completed: "Completed",
+            notRequired: "Not required",
+            required: "Required",
+            optional: "Optional",
+        };
         /**
          * @internal Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
          */
@@ -27,96 +40,95 @@ export class Step {
     }
     render() {
         var _a, _b;
+        const { compactStepStyling, current, heading, icI18n, lastStep, lastStepNum, nextStepHeading, progress, status, stepNum, subheading, theme, type, variant, } = this;
         // ARIA LABEL
         let ariaLabel = "";
-        if (this.type === "completed") {
-            ariaLabel = ". Completed step";
+        if (type === "completed") {
+            ariaLabel = `. ${icI18n.completed}`;
         }
-        else if (this.type === "disabled") {
-            ariaLabel = ". Non-required step";
+        else if (type === "disabled") {
+            ariaLabel = `. ${icI18n.notRequired}`;
         }
-        else if (this.status === "required") {
-            ariaLabel = ". Required step";
+        else if (status === "required") {
+            ariaLabel = `. ${icI18n.required}`;
         }
-        else if (this.status === "optional") {
-            ariaLabel = ". Optional step";
+        else if (status === "optional") {
+            ariaLabel = `. ${icI18n.optional}`;
         }
         // STEP STATUS
         let stepStatus;
-        if (this.status && isPropDefined(this.status)) {
-            stepStatus = this.status[0].toUpperCase() + this.status.slice(1);
+        if (status && isPropDefined(status)) {
+            stepStatus = status[0].toUpperCase() + status.slice(1);
         }
         // STEP TYPE
         let stepType;
-        if (this.type === "disabled" || this.compactStepStyling === "disabled") {
-            stepType = "Not required";
+        if (type === "disabled" || compactStepStyling === "disabled") {
+            stepType = icI18n.notRequired;
         }
-        else if (this.compactStepStyling === "completed") {
-            stepType = "Completed";
+        else if (compactStepStyling === "completed") {
+            stepType = icI18n.completed;
         }
         // STATUS ICON FOR COMPACT STEP
         let statusIcon;
-        if (this.type === "completed" || this.compactStepStyling === "completed") {
-            statusIcon = (h("span", { key: '8831990f0422a89e28d83c33bf98e6f5e47d09a6', class: "check-icon step-icon", "aria-hidden": "true", innerHTML: checkIcon }));
+        if (type === "completed" || compactStepStyling === "completed") {
+            statusIcon = (h("span", { key: '8c76808f7d75f2d9ae6293209ef86bae0e79716d', class: "check-icon step-icon", "aria-hidden": "true", innerHTML: checkIcon }));
         }
-        else if (this.type === "disabled" ||
-            this.compactStepStyling === "disabled") {
-            statusIcon = (h("span", { key: 'aedd81eacbe9ca6a4e331142d09053926b00dcd4', class: "warning-icon step-icon", "aria-hidden": "true", innerHTML: warningIcon }));
+        else if (type === "disabled" || compactStepStyling === "disabled") {
+            statusIcon = (h("span", { key: '16ba6a8045db3f5694f7546a5458b6f91261d814', class: "warning-icon step-icon", "aria-hidden": "true", innerHTML: warningIcon }));
         }
         // COMPACT STEP COMPONENT
-        const compactStep = (h("div", { key: '384c84c08600c48982959a9a19a54e638bdd76a9', class: {
+        const compactStep = (h("div", { key: '914fd4dade3b6900052b9ac08f665610f10ee467', class: {
                 ["step"]: true,
-                ["current"]: !!this.current,
-                [`compact-step-${this.compactStepStyling}`]: !!this.compactStepStyling,
-                ["disabled"]: this.type === "disabled" || this.compactStepStyling === "disabled",
-            } }, h("ic-loading-indicator", { key: 'fb3373a16a3519a77689395882b77b07f84d00b2', class: {
+                ["current"]: !!current,
+                [`compact-step-${compactStepStyling}`]: !!compactStepStyling,
+                ["disabled"]: type === "disabled" || compactStepStyling === "disabled",
+            } }, h("ic-loading-indicator", { key: '4679914758455a299e8bab80e4640fa3fcdb6a18', class: {
                 "compact-step-progress-indicator": true,
-                "not-required": this.type === "disabled" ||
-                    this.compactStepStyling === "disabled",
-            }, "aria-hidden": "true", size: "small", "inner-label": this.stepNum, progress: this.progress }), h("div", { key: 'e404a8d7fd56af5a6c3b38e7dd146ccbf6c0a921', class: "heading-area" }, h("ic-typography", { key: 'e2d2d3a3b2e2d1080a500f06c11fd2b19305e733', variant: "h4", class: "heading" }, this.heading), h("div", { key: 'a04253bd63d0e9cbc2ebd2ccc6c6cf1d684611b4', class: "info-line" }, h("ic-typography", { key: '35699c8fd101642bcedacbb0e636f5f5e72d87d0', variant: "caption", class: "step-num" }, `${this.stepNum} of ${this.lastStepNum}`, h("span", { key: '0bc9e891b17f66419150733982711999983197a1', class: "visually-hidden" }, " steps")), (this.subheading ||
-            this.type === "completed" ||
-            this.type === "disabled" ||
+                "not-required": type === "disabled" || compactStepStyling === "disabled",
+            }, "aria-hidden": "true", size: "small", "inner-label": stepNum, progress: progress }), h("div", { key: '7666cfe7acb4966bcb1baa07f457dba6b21120b5', class: "heading-area" }, h("ic-typography", { key: '247088bc17d4ed998e5d04150e4a2e0c0a0185b2', variant: "h4", class: "heading" }, heading), h("div", { key: 'bf63017723f6db8ccbb27583a2f04a548c596ea9', class: "info-line" }, h("ic-typography", { key: '621c958bc31df3631b808a8055d964d71ba97388', variant: "caption", class: "step-num" }, `${stepNum} ${icI18n.of} ${lastStepNum}`, h("span", { key: 'e08ea47dd3a11327ca6ee4b8e0d75f292c8c812f', class: "visually-hidden" }, " steps")), (this.subheading ||
+            type === "completed" ||
+            type === "disabled" ||
             (this.variant === "compact" &&
-                !!this.compactStepStyling &&
-                this.compactStepStyling !== "active") ||
-            !!this.status) && (h("div", { key: 'ce2356ecbc86e3805ddf84d7fa785f2a1495ef60', class: "step-status" }, statusIcon !== undefined && statusIcon, (this.subheading || stepType) && (h("ic-typography", { key: 'f9ada98e6d45ff5dcd8784dbb24c4402b7bd378e', variant: "caption" }, this.subheading !== null && isPropDefined(this.subheading)
-            ? this.subheading
-            : this.type === "disabled" ||
-                (this.variant === "compact" &&
-                    this.compactStepStyling === "disabled") ||
-                this.type === "completed" ||
-                (this.variant === "compact" &&
-                    this.compactStepStyling === "completed")
+                !!compactStepStyling &&
+                compactStepStyling !== "active") ||
+            !!status) && (h("div", { key: '7614152c3bfad5b936e206e3ab9c295763f2569c', class: "step-status" }, statusIcon !== undefined && statusIcon, (subheading || stepType) && (h("ic-typography", { key: '8c1e5c2b326a40237d5e3ef5ed1bcdec7c8f8132', variant: "caption" }, subheading !== null && isPropDefined(subheading)
+            ? subheading
+            : type === "disabled" ||
+                (variant === "compact" &&
+                    compactStepStyling === "disabled") ||
+                type === "completed" ||
+                (variant === "compact" &&
+                    compactStepStyling === "completed")
                 ? stepType
-                : this.status && stepStatus))))), this.lastStep ? (h("ic-typography", { variant: "subtitle-small", class: "next-step" }, "Last step")) : (isPropDefined(this.nextStepHeading) && (h("ic-typography", { variant: "subtitle-small", class: "next-step" }, "Next", h("span", { class: "visually-hidden" }, " step is"), ":", " ", this.nextStepHeading))))));
+                : status && stepStatus))))), lastStep ? (h("ic-typography", { variant: "subtitle-small", class: "next-step" }, icI18n.lastStep)) : (isPropDefined(nextStepHeading) && (h("ic-typography", { variant: "subtitle-small", class: "next-step" }, icI18n.next, h("span", { class: "visually-hidden" }, " ", icI18n.step), ":", " ", this.nextStepHeading))))));
         // ICON FOR DEFAULT STEP
         let icon;
-        if (this.type !== "completed") {
-            icon = (h("ic-typography", { key: '5b3734765f9d5e5db8f0b2818ffd471817a96cc5', variant: "subtitle-small" }, h("span", { key: 'd4d3ffd87c95a0b98fce8a437a6afb3f4639993f', class: "step-icon-inner", "aria-hidden": "true" }, this.stepNum)));
+        if (type !== "completed") {
+            icon = (h("ic-typography", { key: 'ffa20478aed6b35a92c1cc1f16ebcebb97492553', variant: "subtitle-small" }, h("span", { key: 'ed4a75d2aab01948cd6417c697a0c150d9f1d262', class: "step-icon-inner", "aria-hidden": "true" }, this.stepNum)));
         }
         else {
-            icon = (h("div", { key: '42447f9ec070e7e284aecfd49983259650d9abd3', class: "step-icon-inner", "aria-hidden": "true" }, h("span", { key: '4c7469fba1cf544d1d48c209c25db0bcaca14309', class: "check-icon", innerHTML: checkIcon })));
+            icon = (h("div", { key: 'b50a1c3094e7f1328d0f86ab10892afcd8a3c41a', class: "step-icon-inner", "aria-hidden": "true" }, h("span", { key: '8c277146b4a653097a7e8ec5ceff6112e667ac38', class: "check-icon", innerHTML: checkIcon })));
         }
         // STEP CONNECT FOR DEFAULT STEP
-        const partialBar = this.type === "current" && (h("div", { key: '800764f8ca21ac1118c77ed860a163b3103fe62e', class: "step-connect-inner" }));
-        const finalStep = !this.lastStep && (h("div", { key: 'e5c0f38f7140800d60e5046d77d6cde34c5e7bd5', class: {
+        const partialBar = type === "current" && (h("div", { key: '5bc99a6129f3dfffc9b57175a2a18fd589a07557', class: "step-connect-inner" }));
+        const finalStep = !lastStep && (h("div", { key: 'e16d56443005483e87a58164452d57fe93ccbaca', class: {
                 ["step-connect"]: true,
                 ["aligned-full-width"]: !!(((_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.classList.contains("ic-stepper-default")) &&
                     !this.el.parentElement.classList.contains("ic-stepper-aligned-left")),
             } }, partialBar));
         // DEFAULT STEP COMPONENT
-        const defaultStep = (h("div", { key: 'cdfd23786b75a88fe1630318d8a1369a89090544', class: {
+        const defaultStep = (h("div", { key: 'd50917250a7ce0866f877bf7b957a45789059240', class: {
                 ["step"]: true,
-                [`${this.type}`]: true,
-            } }, h("div", { key: 'c83625070a1ffe89fc53f66d55f06c994f868570', class: "step-top" }, h("div", { key: 'a6758050efffeb98522092fefa9b1261b3d9217b', class: "step-icon" }, icon), finalStep), (this.heading || this.subheading || this.status) && (h("div", { key: '3ecf8d32da66fe336b7c0540c47726d060e8eaf8', class: "heading-area" }, this.heading && (h("ic-typography", { key: '79557ec3d9a26be0fee2253a58c2f09132322017', variant: "subtitle-large", class: "heading" }, this.heading)), this.heading && (this.subheading || this.status) && (h("ic-typography", { key: 'f5a90f68ebc0721fec936541824ab79b415f566d', variant: "caption", class: "subheading" }, this.subheading !== null && isPropDefined(this.subheading)
-            ? this.subheading
+                [`${type}`]: true,
+            } }, h("div", { key: 'c90e98efccf917d2327958e5bd0a722561e3e661', class: "step-top" }, h("div", { key: '2ae403e7604d97633da0f5df80665626312e6d98', class: "step-icon" }, icon), finalStep), (heading || subheading || status) && (h("div", { key: '0b028ca96dd4ba62da9a77327575af1178b95e87', class: "heading-area" }, heading && (h("ic-typography", { key: '19127034e751855cf6b817d4afe4e4b6e1542321', variant: "subtitle-large", class: "heading" }, heading)), heading && (subheading || status) && (h("ic-typography", { key: '1faa4f2dfc841105d9989e442360c44d0b162f4d', variant: "caption", class: "subheading" }, subheading !== null && isPropDefined(subheading)
+            ? subheading
             : stepStatus))))));
-        return (h(Host, { key: '0cb6b6649c9af4565e5f663131b800a79b9b040d', role: "listitem", "aria-label": `Step ${this.stepNum}${ariaLabel}`, "aria-current": (this.current || this.type === "current") && "step", class: {
+        return (h(Host, { key: '05bb1106d2259fca749c197e79caa408dc237326', role: "listitem", "aria-label": `${icI18n.step} ${stepNum}${ariaLabel}`, "aria-current": (current || type === "current") && "step", class: {
                 ["aligned-full-width"]: !!(((_b = this.el.parentElement) === null || _b === void 0 ? void 0 : _b.classList.contains("ic-stepper-default")) &&
                     !this.el.parentElement.classList.contains("ic-stepper-aligned-left")),
-                [`ic-step-${this.variant}`]: true,
-                [`ic-theme-${this.theme}`]: this.theme !== "inherit",
-            } }, this.variant === "compact" ? compactStep : defaultStep));
+                [`ic-step-${variant}`]: true,
+                [`ic-theme-${theme}`]: this.theme !== "inherit",
+            } }, variant === "compact" ? compactStep : defaultStep));
     }
     static get is() { return "ic-step"; }
     static get encapsulation() { return "shadow"; }
@@ -183,6 +195,30 @@ export class Step {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "icI18n": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcStepI18n",
+                    "resolved": "{ next: string; step: string; of: string; lastStep: string; completed: string; notRequired: string; required: string; optional: string; }",
+                    "references": {
+                        "IcStepI18n": {
+                            "location": "import",
+                            "path": "./ic-step.types",
+                            "id": "src/components/ic-step/ic-step.types.ts::IcStepI18n"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Words within the component that can be replaced to translate the component into a different language"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{\n    next: \"Next\",\n    step: \"Step\",\n    of: \"of\",\n    lastStep: \"Last step\",\n    completed: \"Completed\",\n    notRequired: \"Not required\",\n    required: \"Required\",\n    optional: \"Optional\",\n  }"
+            },
             "lastStep": {
                 "type": "boolean",
                 "mutable": false,