@ukic/web-components 3.0.0-alpha.13 → 3.0.0-alpha.15

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

@@ -7,7 +7,7 @@ export default {
 
 export const Default = {
   render: () =>
-    html`<ic-skip-link target="#page-content"></ic-skip-link>
+    html`<ic-skip-link target="page-content"></ic-skip-link>
       <ic-top-navigation app-title="Application Name">
         <svg
           slot="app-icon"
@@ -30,7 +30,7 @@ export const Default = {
 
 export const FullWidth = {
   render: () =>
-    html`<ic-skip-link target="#page-content" full-width="true"></ic-skip-link>
+    html`<ic-skip-link target="page-content" full-width="true"></ic-skip-link>
       <ic-top-navigation app-title="Application Name">
         <svg
           slot="app-icon"
@@ -51,41 +51,385 @@ export const FullWidth = {
   name: "Full width",
 };
 
-export const Inline = {
+export const CustomTopPosition = {
   render: () =>
-    html`<ic-skip-link target="#page-content"></ic-skip-link>
-      <ic-top-navigation app-title="Application Name">
-        <svg
-          slot="app-icon"
-          xmlns="http://www.w3.org/2000/svg"
-          height="24px"
-          viewBox="0 0 24 24"
-          width="24px"
-          fill="#000000"
+    html`<div style="display: flex; flex-direction: column; min-height: 100vh;">
+        <div
+          id="cookie-banner"
+          aria-label="cookies banner"
+          role="region"
+          style="background: var(--ic-architectural-60); box-shadow: var(--ic-elevation-modal); z-index: var(--ic-z-index-classification-banner); position: sticky; top: 0; width: 100%; padding: var(--ic-space-md) 0"
         >
-          <path d="M0 0h24v24H0V0z" fill="none" />
-          <path
-            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z"
-          />
-        </svg>
-      </ic-top-navigation>
-      <br />
-      <br />
-      <br />
-      <main id="page-content">Target element</main>
-      <ic-skip-link target="#next-content" inline="true"></ic-skip-link>
-      <br />
-      <br />
-      <br />
-      <main id="next-content">Next target element</main>
-      <ic-button>Should receive last focus</ic-button>`,
+          <ic-section-container full-height aligned="full-width">
+            <ic-typography variant="h2">
+              Cookies and Storage on this site
+            </ic-typography>
+            <ic-typography variant="body">
+              We’d like to use analytics cookies to understand how you use the
+              Design System, so that we can make improvements. Additionally, we
+              use local storage to improve your experience by remembering your
+              preferences.
+            </ic-typography>
+            <div
+              className="buttons"
+              style="display: grid; column-gap: var(--ic-space-md); grid-template-columns: auto auto auto; justify-content: start; align-items: center; padding: var(--ic-space-md) 0 var(--ic-space-xs);"
+            >
+              <ic-button onclick="closeCookieBanner()"> Accept </ic-button>
+              <ic-button variant="secondary" onclick="closeCookieBanner()">
+                Decline
+              </ic-button>
+              <ic-link href=""> Manage preferences </ic-link>
+            </div>
+          </ic-section-container>
+        </div>
+        <ic-skip-link target="page-content"></ic-skip-link>
+        <ic-top-navigation
+          app-title="Application Name"
+          status="alpha"
+          version="v0.0.7"
+          content-aligned="center"
+        >
+          <svg
+            slot="app-icon"
+            xmlns="http://www.w3.org/2000/svg"
+            height="24px"
+            viewBox="0 0 24 24"
+            width="24px"
+            fill="#000000"
+          >
+            <path d="M0 0h24v24H0V0z" fill="none" />
+            <path
+              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z"
+            />
+          </svg>
+          <ic-search-bar
+            slot="search"
+            placeholder="Search"
+            label="Search"
+          ></ic-search-bar>
+          <ic-navigation-button
+            label="button1"
+            slot="buttons"
+            onclick="alert('test')"
+          >
+            <svg
+              slot="icon"
+              xmlns="http://www.w3.org/2000/svg"
+              height="24px"
+              viewBox="0 0 24 24"
+              width="24px"
+              fill="#000000"
+            >
+              <path d="M0 0h24v24H0V0z" fill="none" />
+              <path
+                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z"
+              />
+            </svg>
+          </ic-navigation-button>
+          <ic-navigation-item
+            slot="navigation"
+            label="Navigation"
+            href="/"
+          ></ic-navigation-item>
+          <ic-navigation-group
+            slot="navigation"
+            label="Navigation group"
+            expandable="true"
+          >
+            <ic-navigation-item
+              label="Navigation"
+              href="/"
+            ></ic-navigation-item>
+            <ic-navigation-item
+              label="Navigation"
+              href="/"
+            ></ic-navigation-item>
+          </ic-navigation-group>
+        </ic-top-navigation>
+        <main style="height: 100%">
+          <ic-section-container aligned="center" id="page-content">
+            <ic-typography
+              >Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+              Vestibulum pharetra scelerisque arcu, vitae semper nisl rhoncus
+              ut. Vestibulum molestie enim at sollicitudin pellentesque. Proin
+              sit amet augue sit amet dui suscipit lobortis. Nullam at
+              consectetur ante. Suspendisse mollis ultricies porttitor. Nunc
+              laoreet leo tortor, ut tristique odio finibus a. In rutrum
+              convallis purus, vitae tristique tortor sagittis vel. Donec dictum
+              nunc a elit tristique, et facilisis est condimentum. Pellentesque
+              maximus nulla libero, nec auctor urna consequat nec. Class aptent
+              taciti sociosqu ad litora torquent per conubia nostra, per
+              inceptos himenaeos. In maximus velit a erat volutpat, sit amet
+              consequat velit rhoncus. Mauris pretium neque eget ante
+              consectetur consectetur. Morbi a consequat lectus. Donec venenatis
+              ultricies sem nec pulvinar. Fusce lacus augue, laoreet id pretium
+              id, efficitur nec leo.</ic-typography
+            >
+            <br />
+            <ic-skip-link
+              label="Skip to options"
+              target="page-content"
+              inline="true"
+            ></ic-skip-link>
+            <br />
+            <ic-typography
+              >Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+              Vestibulum pharetra scelerisque arcu, vitae semper nisl rhoncus
+              ut. Vestibulum molestie enim at sollicitudin pellentesque. Proin
+              sit amet augue sit amet dui suscipit lobortis. Nullam at
+              consectetur ante. Suspendisse mollis ultricies porttitor. Nunc
+              laoreet leo tortor, ut tristique odio finibus a. In rutrum
+              convallis purus, vitae tristique tortor sagittis vel. Donec dictum
+              nunc a elit tristique, et facilisis est condimentum. Pellentesque
+              maximus nulla libero, nec auctor urna consequat nec. Class aptent
+              taciti sociosqu ad litora torquent per conubia nostra, per
+              inceptos himenaeos. In maximus velit a erat volutpat, sit amet
+              consequat velit rhoncus. Mauris pretium neque eget ante
+              consectetur consectetur. Morbi a consequat lectus. Donec venenatis
+              ultricies sem nec pulvinar. Fusce lacus augue, laoreet id pretium
+              id, efficitur nec leo.</ic-typography
+            >
+            <div id="options">
+              <ic-checkbox-group label="This is a label" required name="group1">
+                <ic-checkbox
+                  value="valueName1"
+                  label="Unselected / Default"
+                ></ic-checkbox>
+                <ic-checkbox
+                  value="valueName2"
+                  label="Selected / Default"
+                  checked
+                ></ic-checkbox>
+                <ic-checkbox
+                  value="valueName3"
+                  label="Unselected / Disabled"
+                  Disabled
+                ></ic-checkbox>
+              </ic-checkbox-group>
+            </div>
+          </ic-section-container>
+        </main>
+        <ic-footer
+          aligned="full-width"
+          description="The ICDS is maintained by the Design Practice Team. If you've got a question or want to feedback,
+        please get in touch."
+          caption="All content is available under the Open Government Licence v3.0, except source code and code examples which are available under the MIT Licence."
+        ></ic-footer>
+      </div>
+      <script>
+        const debounce = (func, delay) => {
+          let timeout;
+          return (...args) => {
+            clearTimeout(timeout);
+            timeout = setTimeout(() => func(...args), delay);
+          };
+        };
+        const updateSkipLinkPosition = () => {
+          const cookieBanner = document.getElementById("cookie-banner");
+          const skipLink = document.querySelector("ic-skip-link");
+          if (cookieBanner && skipLink) {
+            requestAnimationFrame(() => {
+              const bannerHeight = cookieBanner.offsetHeight;
+              skipLink.style.setProperty(
+                "--ic-skip-link-position-top",
+                bannerHeight + 12 + "px"
+              );
+            });
+          }
+        };
+        const observeHydration = () => {
+          const cookieBanner = document.getElementById("cookie-banner");
+          const sectionContainer = cookieBanner?.querySelector(
+            "ic-section-container"
+          );
+          if (sectionContainer) {
+            const observer = new MutationObserver((mutationsList) => {
+              for (const mutation of mutationsList) {
+                if (
+                  mutation.type === "attributes" &&
+                  mutation.attributeName === "class" &&
+                  sectionContainer.classList.contains("hydrated")
+                ) {
+                  updateSkipLinkPosition();
+                  observer.disconnect();
+                }
+              }
+            });
+            observer.observe(sectionContainer, { attributes: true });
+          }
+        };
+        document.addEventListener("DOMContentLoaded", () => {
+          observeHydration();
+          const debouncedResize = debounce(updateSkipLinkPosition, 100);
+          window.addEventListener("resize", debouncedResize);
+        });
+        const closeCookieBanner = () => {
+          const cookieBanner = document.getElementById("cookie-banner");
+          cookieBanner.style.setProperty("display", "none");
+          updateSkipLinkPosition();
+        };
+      </script>`,
+
+  name: "Custom top position",
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+export const Inline = {
+  render: () =>
+    html`<ic-skip-link target="page-content"></ic-skip-link>
+      <div>
+        <div style="display: flex; flex-direction: column; min-height: 100vh;">
+          <ic-top-navigation
+            app-title="Application Name"
+            status="alpha"
+            version="v0.0.7"
+            content-aligned="center"
+          >
+            <svg
+              slot="app-icon"
+              xmlns="http://www.w3.org/2000/svg"
+              height="24px"
+              viewBox="0 0 24 24"
+              width="24px"
+              fill="#000000"
+            >
+              <path d="M0 0h24v24H0V0z" fill="none" />
+              <path
+                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z"
+              />
+            </svg>
+            <ic-search-bar
+              slot="search"
+              placeholder="Search"
+              label="Search"
+            ></ic-search-bar>
+            <ic-navigation-button
+              label="button1"
+              slot="buttons"
+              onclick="alert('test')"
+            >
+              <svg
+                slot="icon"
+                xmlns="http://www.w3.org/2000/svg"
+                height="24px"
+                viewBox="0 0 24 24"
+                width="24px"
+                fill="#000000"
+              >
+                <path d="M0 0h24v24H0V0z" fill="none" />
+                <path
+                  d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z"
+                />
+              </svg>
+            </ic-navigation-button>
+            <ic-navigation-item
+              slot="navigation"
+              label="Navigation"
+              href="/"
+            ></ic-navigation-item>
+            <ic-navigation-group
+              slot="navigation"
+              label="Navigation group"
+              expandable="true"
+            >
+              <ic-navigation-item
+                label="Navigation"
+                href="/"
+              ></ic-navigation-item>
+              <ic-navigation-item
+                label="Navigation"
+                href="/"
+              ></ic-navigation-item>
+            </ic-navigation-group>
+          </ic-top-navigation>
+          <main style="height: 100%">
+            <ic-section-container aligned="center" id="page-content">
+              <ic-typography
+                >Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                Vestibulum pharetra scelerisque arcu, vitae semper nisl rhoncus
+                ut. Vestibulum molestie enim at sollicitudin pellentesque. Proin
+                sit amet augue sit amet dui suscipit lobortis. Nullam at
+                consectetur ante. Suspendisse mollis ultricies porttitor. Nunc
+                laoreet leo tortor, ut tristique odio finibus a. In rutrum
+                convallis purus, vitae tristique tortor sagittis vel. Donec
+                dictum nunc a elit tristique, et facilisis est condimentum.
+                Pellentesque maximus nulla libero, nec auctor urna consequat
+                nec. Class aptent taciti sociosqu ad litora torquent per conubia
+                nostra, per inceptos himenaeos. In maximus velit a erat
+                volutpat, sit amet consequat velit rhoncus. Mauris pretium neque
+                eget ante consectetur consectetur. Morbi a consequat lectus.
+                Donec venenatis ultricies sem nec pulvinar. Fusce lacus augue,
+                laoreet id pretium id, efficitur nec leo.</ic-typography
+              >
+              <br />
+              <ic-skip-link
+                label="Skip to options"
+                target="page-content"
+                inline="true"
+              ></ic-skip-link>
+              <br />
+              <ic-typography
+                >Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                Vestibulum pharetra scelerisque arcu, vitae semper nisl rhoncus
+                ut. Vestibulum molestie enim at sollicitudin pellentesque. Proin
+                sit amet augue sit amet dui suscipit lobortis. Nullam at
+                consectetur ante. Suspendisse mollis ultricies porttitor. Nunc
+                laoreet leo tortor, ut tristique odio finibus a. In rutrum
+                convallis purus, vitae tristique tortor sagittis vel. Donec
+                dictum nunc a elit tristique, et facilisis est condimentum.
+                Pellentesque maximus nulla libero, nec auctor urna consequat
+                nec. Class aptent taciti sociosqu ad litora torquent per conubia
+                nostra, per inceptos himenaeos. In maximus velit a erat
+                volutpat, sit amet consequat velit rhoncus. Mauris pretium neque
+                eget ante consectetur consectetur. Morbi a consequat lectus.
+                Donec venenatis ultricies sem nec pulvinar. Fusce lacus augue,
+                laoreet id pretium id, efficitur nec leo.</ic-typography
+              >
+              <div id="options">
+                <ic-checkbox-group
+                  label="This is a label"
+                  required
+                  name="group1"
+                >
+                  <ic-checkbox
+                    value="valueName1"
+                    label="Unselected / Default"
+                  ></ic-checkbox>
+                  <ic-checkbox
+                    value="valueName2"
+                    label="Selected / Default"
+                    checked
+                  ></ic-checkbox>
+                  <ic-checkbox
+                    value="valueName3"
+                    label="Unselected / Disabled"
+                    Disabled
+                  ></ic-checkbox>
+                </ic-checkbox-group>
+              </div>
+            </ic-section-container>
+          </main>
+        </div>
+        <ic-footer
+          aligned="full-width"
+          description="The ICDS is maintained by the Design Practice Team. If you've got a question or want to feedback,
+          please get in touch."
+          caption="All content is available under the Open Government Licence v3.0, except source code and code examples which are available under the MIT Licence."
+        ></ic-footer>
+      </div>`,
+
   name: "Inline",
+  parameters: {
+    layout: "fullscreen",
+  },
 };
 
 export const HideBackground = {
   render: () =>
     html`<ic-skip-link
-        target="#page-content"
+        target="page-content"
         transparent-background="true"
       ></ic-skip-link>
       <ic-top-navigation app-title="Application Name">
@@ -113,7 +457,7 @@ const defaultArgs = {
   inline: false,
   label: "Skip to main content",
   monochrome: false,
-  target: "#",
+  target: "",
   theme: "inherit",
   transparentBackground: false,
 };
@@ -144,7 +488,7 @@ export const Playground = {
           />
         </svg>
       </ic-top-navigation>
-      <main id=${args.target.replace("#", "")}>Target element</main>
+      <main id=${args.target}>Target element</main>
       <ic-button>Should receive next focus</ic-button>`,
 
   args: defaultArgs,

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

@@ -472,7 +472,7 @@ video {
 
 .filled-warning {
   background-color: var(--ic-status-tag-warning);
-  --ic-typography-color: var(--ic-status-tag-text-inverted);
+  --ic-typography-color: var(--ic-status-tag-filled-warning-text);
 }
 
 .filled-danger {
@@ -522,5 +522,6 @@ video {
     border: var(--ic-border-hc);
     -ms-high-contrast-adjust: none;
     forced-color-adjust: none;
+    --ic-typography-color: var(--ic-status-tag-text);
   }
 }

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: '075fe7813451ec40295b6e403ee8994bc4738713', class: { [`ic-theme-${theme}`]: theme !== "inherit" }, role: announced ? "status" : null, "aria-label": "Status" }, h("strong", { key: '4c7f641b2b8bad2914e4ddd80d0c618be41b9062', class: {
+        return (h(Host, { key: '2ac2523a20a7520be1219cb32374b08a9bb6db57', class: { [`ic-theme-${theme}`]: theme !== "inherit" }, role: announced ? "status" : null, "aria-label": "Status" }, h("strong", { key: '9098c32e9038dc2eb76ca5425537f0f9e5dc3947', class: {
                 ["tag"]: true,
                 [`${variant}-${status}`]: true,
                 ["outlined"]: variant === "outlined",
                 [`${size}`]: true,
-            } }, h("ic-typography", { key: '9b1453a83e975da79f7f66b37150c05ba409186d', variant: uppercase ? "label-uppercase" : "label", "apply-vertical-margins": false }, h("span", { key: 'de7e72ae356e5d1fc5d73d9a9d0fae110ee95425' }, label)))));
+            } }, h("ic-typography", { key: 'e54d4ef968acc6ccfa85fca33cb6c76b62c2ce51', variant: uppercase ? "label-uppercase" : "label", "apply-vertical-margins": false }, h("span", { key: '5dae654cf0367927bb3a89fb075dd2b467f66dcf' }, label)))));
     }
     static get is() { return "ic-status-tag"; }
     static get encapsulation() { return "shadow"; }

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

@@ -29,13 +29,17 @@
 
 .visually-hidden {
   position: absolute;
-  left: -625rem;
+  left: -9999px;
   top: auto;
   width: 1px;
   height: 1px;
   overflow: hidden;
 }
 
+.visually-hidden:dir(rtl) {
+  right: -9999px;
+}
+
 /* COMPACT STEP STYLING */
 :host(.ic-step-compact) {
   -moz-column-gap: var(--ic-space-sm);
@@ -80,7 +84,7 @@
 }
 
 :host(.ic-step-compact) .disabled .heading {
-  color: var(--ic-stepper-compact-step-title);
+  color: var(--ic-stepper-compact-step-title-disabled);
 }
 
 .info-line {
@@ -157,25 +161,12 @@
   color: var(--ic-status-info-default);
 }
 
-:host(.ic-step-default.ic-step-light) .current,
-:host(.ic-step-default.ic-step-light) .current .heading-area {
-  color: var(--ic-status-info-contrast);
-}
-
 :host(.ic-step-default) .heading-area {
   margin: var(--ic-space-xs) 0;
   padding-right: var(--ic-space-xs);
   width: 100%;
 }
 
-:host(.ic-step-light) .heading-area {
-  color: var(--ic-architectural-200);
-}
-
-:host(.ic-step-compact.ic-step-light) .heading-area {
-  color: var(--ic-architectural-white);
-}
-
 :host(.ic-step-default) .heading,
 .subheading {
   width: -moz-fit-content;
@@ -214,31 +205,17 @@
   color: var(--ic-status-success-default);
 }
 
-:host(.ic-step-default.ic-step-light) .completed,
-:host(.ic-step-default.ic-step-light) .completed .heading-area {
-  color: var(--ic-status-success-contrast);
-}
-
 .active .step-icon-inner {
   box-shadow: inset var(--ic-step-number-inactive-outline) 0 0 0 0.125rem;
 }
 
-:host(.ic-step-light) .active .step-icon-inner {
-  color: var(--ic-architectural-white);
-}
-
 .current .step-icon-inner {
   background-color: var(--ic-step-number-background-active);
-  color: var(--ic-step-number-text);
+  color: var(--ic-step-number-text-current);
 }
 
 .disabled {
-  color: var(--ic-architectural-200);
-}
-
-:host(.ic-step-default.ic-step-light) .disabled,
-:host(.ic-step-default.ic-step-light) .disabled .heading-area {
-  color: var(--ic-architectural-400);
+  color: var(--ic-color-text-disabled-mid);
 }
 
 .disabled .step-icon-inner {

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

@@ -57,28 +57,29 @@ export class Step {
         // STATUS ICON FOR COMPACT STEP
         let statusIcon;
         if (this.type === "completed" || this.compactStepStyling === "completed") {
-            statusIcon = (h("span", { key: 'd194d450b8be634e0305a9d69148b8e01c0ad921', class: "check-icon step-icon", "aria-hidden": "true", innerHTML: checkIcon }));
+            statusIcon = (h("span", { key: '037cdd093417bdeff6f9de2795a2c0a29e23db63', class: "check-icon step-icon", "aria-hidden": "true", innerHTML: checkIcon }));
         }
         else if (this.type === "disabled" ||
             this.compactStepStyling === "disabled") {
-            statusIcon = (h("span", { key: '37abea1127139c235751e0e5fa159c0123e26045', class: "warning-icon step-icon", "aria-hidden": "true", innerHTML: warningIcon }));
+            statusIcon = (h("span", { key: '115e2d476464fb4b4c48516e6cfc108928e6ebdc', class: "warning-icon step-icon", "aria-hidden": "true", innerHTML: warningIcon }));
         }
         // COMPACT STEP COMPONENT
-        const compactStep = (h("div", { key: '0a05a9b7ae4878fb3b9be55a8f4f948fe4a27536', class: {
+        const compactStep = (h("div", { key: 'ff799c9a5ac470cd917ecf47896c07d3e8ad6a55', class: {
                 ["step"]: true,
                 ["current"]: !!this.current,
                 [`compact-step-${this.compactStepStyling}`]: !!this.compactStepStyling,
-            } }, h("ic-loading-indicator", { key: '87ae2770c142889bf7565ead6cf7322df9d2d76d', class: {
+                ["disabled"]: this.type === "disabled" || this.compactStepStyling === "disabled",
+            } }, h("ic-loading-indicator", { key: 'd96083b68c5bd6c34adb1062ab508adf2f3274c0', 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: '84896f3f22cb2ea8fe8794be14b70341d8e23367', class: "heading-area" }, h("ic-typography", { key: 'd62bf42956fcf9ed02747d0a9cf34c0461a26b62', variant: "h4", class: "heading" }, this.heading), h("div", { key: 'b8e96361666f06ac48635cc88cdaf0b127059ed2', class: "info-line" }, h("ic-typography", { key: 'bebffda119401ad7441f247c915b7d535a7be967', variant: "caption", class: "step-num" }, `${this.stepNum} of ${this.lastStepNum}`, h("span", { key: 'd06f2369b86d90f4e8f97a6487235a084289705c', class: "visually-hidden" }, " steps")), (this.subheading ||
+            }, "aria-hidden": "true", size: "small", "inner-label": this.stepNum, progress: this.progress }), h("div", { key: '1f6b95b5b99ab252f68e3501f6909b9b8240546b', class: "heading-area" }, h("ic-typography", { key: '8de4cab1512b2406d9d6e38a34026dd786727c56', variant: "h4", class: "heading" }, this.heading), h("div", { key: 'f0aac2d40c6d7c75dba1a8ea061fe70fde1684f8', class: "info-line" }, h("ic-typography", { key: 'd7802839d057c38f72319063302e0f556b4b8799', variant: "caption", class: "step-num" }, `${this.stepNum} of ${this.lastStepNum}`, h("span", { key: 'b1f8716701f30af917c056dea0b77b23cbb86a09', class: "visually-hidden" }, " steps")), (this.subheading ||
             this.type === "completed" ||
             this.type === "disabled" ||
             (this.variant === "compact" &&
                 !!this.compactStepStyling &&
                 this.compactStepStyling !== "active") ||
-            !!this.status) && (h("div", { key: '767ada3bd54f2ace302dc35bade3820b303beaeb', class: "step-status" }, statusIcon !== undefined && statusIcon, (this.subheading || stepType) && (h("ic-typography", { key: 'd32d553cbc9ed7626bd31f66376f40fc3bd5cafc', variant: "caption" }, this.subheading !== null && isPropDefined(this.subheading)
+            !!this.status) && (h("div", { key: '230dc72e7a579193f8cf1a8552d1ef5749b1d04c', class: "step-status" }, statusIcon !== undefined && statusIcon, (this.subheading || stepType) && (h("ic-typography", { key: '4a089ec12dc7e4f77d3469e08e4ef77b3d3144a3', variant: "caption" }, this.subheading !== null && isPropDefined(this.subheading)
             ? this.subheading
             : this.type === "disabled" ||
                 (this.variant === "compact" &&
@@ -91,26 +92,26 @@ export class Step {
         // ICON FOR DEFAULT STEP
         let icon;
         if (this.type !== "completed") {
-            icon = (h("ic-typography", { key: '460d428fc84a424c2deb2bd19673bac9838fc83c', variant: "subtitle-small" }, h("span", { key: '2f9976552109cb2369374d045da5695d0cca48a9', class: "step-icon-inner", "aria-hidden": "true" }, this.stepNum)));
+            icon = (h("ic-typography", { key: '74584e3b8e9d2d3554723b3b7f23ca9fd2637800', variant: "subtitle-small" }, h("span", { key: '60a00009b73f622ff0d040d09d9b569b28be9cde', class: "step-icon-inner", "aria-hidden": "true" }, this.stepNum)));
         }
         else {
-            icon = (h("div", { key: '6e6d3994d3b43e7aa1b516ffb8fada92af8df313', class: "step-icon-inner", "aria-hidden": "true" }, h("span", { key: 'b45fb9429fcdf1158944f8e3f0912b5d586f879f', class: "check-icon", innerHTML: checkIcon })));
+            icon = (h("div", { key: 'fae4dd9d0eab63264e9aed6e7b659da9d3ff511e', class: "step-icon-inner", "aria-hidden": "true" }, h("span", { key: '7f83174116e62e676940ca9ec23561250803d15f', class: "check-icon", innerHTML: checkIcon })));
         }
         // STEP CONNECT FOR DEFAULT STEP
-        const partialBar = this.type === "current" && (h("div", { key: 'df1360298cadc4fe9fcc0b2962505ca31f77fdd2', class: "step-connect-inner" }));
-        const finalStep = !this.lastStep && (h("div", { key: '946927672f4115daf7ef35bb577f12ae1e8de66f', class: {
+        const partialBar = this.type === "current" && (h("div", { key: 'eb8b63c2d0af8d883c09a56b8d3c47afac3e5f81', class: "step-connect-inner" }));
+        const finalStep = !this.lastStep && (h("div", { key: 'cc6e694712782a11aeccc78a0a4f06f39fec3819', 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: '637edc67a54d7edab0bbf31c7e86e623f78f9966', class: {
+        const defaultStep = (h("div", { key: '91c97641133852cc4a5f4d3b8d1cae4996789cc3', class: {
                 ["step"]: true,
                 [`${this.type}`]: true,
-            } }, h("div", { key: '961519160c7998023c7646cb0c52036951aa6316', class: "step-top" }, h("div", { key: '2764963722ae57aad38766d26a5fd13e179aac61', class: "step-icon" }, icon), finalStep), (this.heading || this.subheading || this.status) && (h("div", { key: '6ebf91f7c29e29593d9fbaf78c0aa7db7dbb142e', class: "heading-area" }, this.heading && (h("ic-typography", { key: 'd299782ac1b0ae99f4f3a95dc478a49f27327b75', variant: "subtitle-large", class: "heading" }, this.heading)), this.heading && (this.subheading || this.status) && (h("ic-typography", { key: '9c20efcfae784881552c48f9a4cd779c24126ae6', variant: "caption", class: "subheading" }, this.subheading !== null && isPropDefined(this.subheading)
+            } }, h("div", { key: '6ebf175f84536a4ab79e3a130e952b592ec9e965', class: "step-top" }, h("div", { key: '23f9b5a7cd4fb0908b7f65ea55c192ee3a2964de', class: "step-icon" }, icon), finalStep), (this.heading || this.subheading || this.status) && (h("div", { key: '7be8f0257f73a29c0ff6f6bf31830a40cb3fe81f', class: "heading-area" }, this.heading && (h("ic-typography", { key: 'fd775a67501c4bd5db9498fc8fa57404f2a51163', variant: "subtitle-large", class: "heading" }, this.heading)), this.heading && (this.subheading || this.status) && (h("ic-typography", { key: '2a857f45ff18834e6199a56330e68d40b034afae', variant: "caption", class: "subheading" }, this.subheading !== null && isPropDefined(this.subheading)
             ? this.subheading
             : stepStatus))))));
-        return (h(Host, { key: 'c12621f9fa0f127a55e2c72b6f9ff34a6a6be5a9', role: "listitem", "aria-label": `Step ${this.stepNum}${ariaLabel}`, "aria-current": (this.current || this.type === "current") && "step", class: {
+        return (h(Host, { key: 'ad0c3301d762c11a2a2c78c3a25b4581dca348e9', role: "listitem", "aria-label": `Step ${this.stepNum}${ariaLabel}`, "aria-current": (this.current || this.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,