@ukic/web-components 2.1.0-beta.1 → 2.1.0-beta.11

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

@@ -1,69 +1,193 @@
 import { Host, h } from "@stencil/core";
-import { checkResizeObserver } from "../../utils/helpers";
-export class IcStepper {
+import { checkResizeObserver, pxToRem } from "../../utils/helpers";
+export class Stepper {
   constructor() {
     this.resizeObserver = null;
-    /**
-     * Get all steps currently within this stepper
-     */
+    // Get all steps currently within this stepper
     this.getChildren = () => {
       this.steps = Array.from(this.el.querySelectorAll("ic-step"));
+      this.stepsWithStepTitles = Array.from(this.el.querySelectorAll("ic-step[step-title]"));
+    };
+    // Inform the user that stepTitles are required on all steps in a compact stepper
+    this.checkStepTitles = () => {
+      if (this.stepsWithStepTitles.length < this.steps.length &&
+        this.variantOverride &&
+        this.variant === "compact") {
+        this.noOfResizes = this.noOfResizes + 1;
+        if (this.noOfResizes === 1) {
+          console.error(`The prop 'step-title' (web components) / 'stepTitle' (react) is required for all steps of the Stepper component (compact variant)`);
+        }
+      }
+    };
+    this.setStepTypes = () => {
+      this.getChildren();
+      this.stepTypes = [];
+      for (let i = 0; i < this.steps.length; i++) {
+        this.stepTypes.push("active");
+      }
+    };
+    this.setStepperWidth = () => {
+      this.alignedFullWidth =
+        this.variant === "default" && this.aligned === "full-width";
+      const lastStep = this.steps[this.steps.length - 1];
+      lastStep.style.maxWidth = "none";
+      if (this.alignedFullWidth) {
+        this.stepperWidth = this.el.offsetWidth;
+        lastStep.style.maxWidth = pxToRem(`${this.stepperWidth / this.steps.length}px`);
+        this.lastStepWidth = lastStep.offsetWidth;
+      }
     };
     this.initialiseStepStates = () => {
       this.steps.forEach((step, index) => {
+        // Set variant
+        step.variant = this.variant;
         // Assign stepNum to each step
         step.stepNum = index + 1;
-        //Assign lastStep to final step
+        // Assign lastStep to final step
         step.lastStep = index === this.steps.length - 1;
-        if (step.lastStep) {
-          step.classList.add("last-step");
-          if (this.el.classList.contains("aligned-full-width")) {
-            step.style.maxWidth = `${this.lastStepWidth}px`;
+        step.lastStepNum = this.steps.length;
+        if (step.stepType !== "current") {
+          step.current = false;
+          this.stepTypes[index] = step.stepType;
+        }
+        else {
+          step.current = true;
+        }
+        const stepTitleArea = step.shadowRoot &&
+          step.shadowRoot.querySelector(".step > .step-title-area");
+        if (this.stepsWithStepTitles.length == 0 && this.variantOverride) {
+          if (this.variant === "compact") {
+            this.autoSetStepTitles = true;
+            if (this.autoSetStepTitles) {
+              step.stepTitle = "Step " + step.stepNum;
+              stepTitleArea &&
+                stepTitleArea
+                  .querySelector(".step-title")
+                  .setAttribute("aria-hidden", "true");
+            }
+          }
+          if (this.variant === "default") {
+            this.autoSetStepTitles = false;
+            if (!this.autoSetStepTitles) {
+              step.stepTitle = undefined;
+              stepTitleArea &&
+                stepTitleArea
+                  .querySelector(".step-title")
+                  .removeAttribute("aria-hidden");
+            }
+          }
+        }
+        if (this.variant === "compact") {
+          if (step.current === true || step.stepType === "current") {
+            step.classList.remove("hide");
+            step.classList.add("show");
           }
-          if (this.el.classList.contains("aligned-left")) {
-            step.style.maxWidth = `${this.connectorWidth + 48}px`;
+          else if (step.classList.contains("show")) {
+            step.classList.remove("show");
+            step.classList.add("hide");
+          }
+          if (!step.lastStep) {
+            step.nextStepTitle = this.steps[index + 1].stepTitle;
+            step.progress = (step.stepNum / this.steps.length) * 100;
+          }
+          else if (step.lastStep && this.stepTypes[index] !== "completed") {
+            step.progress = 95;
+          }
+          else {
+            step.progress = 100;
+          }
+          if (this.hideStepInfo && stepTitleArea !== null) {
+            stepTitleArea.classList.remove("visually-hidden");
+          }
+          step.compactStepStyling = this.stepTypes[index];
+        }
+        if (this.variant === "default") {
+          if (!step.lastStep) {
+            if (this.alignedFullWidth) {
+              step.style.width = pxToRem(`${(this.stepperWidth - this.lastStepWidth) /
+                (this.steps.length - 1)}px`);
+              step.style.minWidth = pxToRem("148px");
+            }
+          }
+          else if (step.lastStep) {
+            step.classList.add("last-step");
+            if (this.alignedFullWidth) {
+              step.style.maxWidth = `${this.lastStepWidth}px`;
+            }
+            else {
+              step.style.maxWidth =
+                this.connectorWidth > 100
+                  ? pxToRem(`${this.connectorWidth + 48}px`)
+                  : pxToRem("148px");
+            }
+          }
+          if (this.aligned === "left") {
+            step.style.width =
+              this.connectorWidth > 100
+                ? pxToRem(`${this.connectorWidth + 48}px`)
+                : pxToRem("148px");
+            const stepConnect = step.shadowRoot.querySelector(".step > .step-top > .step-connect");
+            if (stepConnect) {
+              stepConnect.style.width =
+                this.connectorWidth > 100
+                  ? pxToRem(`${this.connectorWidth}px`)
+                  : pxToRem("100px");
+            }
+          }
+          if (this.hideStepInfo && stepTitleArea !== null) {
+            stepTitleArea.classList.add("visually-hidden");
           }
         }
       });
-      for (let i = 0; i < this.steps.length - 1; i++) {
-        if (this.el.classList.contains("aligned-full-width")) {
-          this.steps[i].style.width = `${(this.stepperWidth - this.lastStepWidth) / (this.steps.length - 1)}px`;
-          this.steps[i].style.minWidth = "148px";
+    };
+    this.overrideVariant = () => {
+      let minDefaultStepperWidth = 148 * this.steps.length;
+      if (this.aligned === "left" && this.connectorWidth > 100) {
+        minDefaultStepperWidth = (this.connectorWidth + 48) * this.steps.length;
+      }
+      if (this.variantOverride) {
+        if (this.el.clientWidth < minDefaultStepperWidth) {
+          this.variant = "compact";
+          this.getChildren();
         }
-        if (this.el.classList.contains("aligned-left")) {
-          this.steps[i].style.width = `${this.connectorWidth + 48}px`;
-          const stepConnect = this.steps[i].shadowRoot.querySelector("div > .step-top > .step-connect");
-          stepConnect.style.width =
-            this.connectorWidth > 100 ? `${this.connectorWidth}px` : "100px";
+        else {
+          this.variant = "default";
+          this.getChildren();
         }
       }
     };
+    this.resizeObserverCallback = () => {
+      this.getChildren();
+      this.checkStepTitles();
+      this.overrideVariant();
+      this.setStepperWidth();
+      this.initialiseStepStates();
+    };
     this.runResizeObserver = () => {
       this.resizeObserver = new ResizeObserver(() => {
-        this.setStepperWidth();
-        this.getChildren();
-        this.initialiseStepStates();
+        this.resizeObserverCallback();
       });
       this.resizeObserver.observe(this.el);
     };
-    this.setStepperWidth = () => {
-      this.stepperWidth = this.el.offsetWidth;
-      const allSteps = document.querySelectorAll("ic-step");
-      const lastStep = allSteps[allSteps.length - 1];
-      lastStep.style.maxWidth = "none";
-      if (lastStep.classList.contains("aligned-full-width")) {
-        lastStep.style.maxWidth = `${this.stepperWidth / allSteps.length}px`;
-      }
-      this.lastStepWidth = lastStep.offsetWidth;
-      this.getChildren();
-      this.initialiseStepStates();
-    };
     this.aligned = "full-width";
+    this.variant = "default";
     this.connectorWidth = 100;
+    this.hideStepInfo = false;
     this.stepperWidth = document
       .querySelector("ic-stepper")
       .getBoundingClientRect().width;
     this.lastStepWidth = 0;
+    this.stepTypes = [];
+    this.alignedFullWidth = true;
+    this.autoSetStepTitles = true;
+    this.variantOverride = this.variant !== "compact";
+    this.noOfResizes = 0;
+  }
+  componentWillLoad() {
+    this.setStepTypes();
+    if (this.variant === "compact") {
+      this.variantOverride = false;
+    }
   }
   componentDidLoad() {
     checkResizeObserver(this.runResizeObserver);
@@ -75,8 +199,8 @@ export class IcStepper {
   }
   render() {
     return (h(Host, { class: {
-        ["aligned-left"]: this.aligned === "left",
-        ["aligned-full-width"]: this.aligned === "full-width",
+        [`${this.variant}`]: true,
+        ["aligned-left"]: this.variant === "default" && this.aligned === "left",
       } }, h("ul", { class: "step-item-list" }, h("slot", null))));
   }
   static get is() { return "ic-stepper"; }
@@ -110,12 +234,35 @@ export class IcStepper {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "How the stepper should be aligned in its container."
+          "text": "The alignment of the default stepper within its container."
         },
         "attribute": "aligned",
         "reflect": false,
         "defaultValue": "\"full-width\""
       },
+      "variant": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "IcStepVariants",
+          "resolved": "\"compact\" | \"default\"",
+          "references": {
+            "IcStepVariants": {
+              "location": "import",
+              "path": "../ic-step/ic-step.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The variant of the stepper."
+        },
+        "attribute": "variant",
+        "reflect": false,
+        "defaultValue": "\"default\""
+      },
       "connectorWidth": {
         "type": "number",
         "mutable": false,
@@ -133,13 +280,36 @@ export class IcStepper {
         "attribute": "connector-width",
         "reflect": false,
         "defaultValue": "100"
+      },
+      "hideStepInfo": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "If `true`, the information about each step, i.e. step title, step subtitle and step status, will be hidden on all default steps. The information about each step will still be visible in the compact variant of the stepper."
+        },
+        "attribute": "hide-step-info",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }
   static get states() {
     return {
       "stepperWidth": {},
-      "lastStepWidth": {}
+      "lastStepWidth": {},
+      "stepTypes": {},
+      "alignedFullWidth": {},
+      "autoSetStepTitles": {},
+      "variantOverride": {},
+      "noOfResizes": {}
     };
   }
   static get elementRef() { return "el"; }

package/dist/collection/components/ic-stepper/ic-stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-stepper.js","sourceRoot":"","sources":["../../../src/components/ic-stepper/ic-stepper.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Prop, h, State } from \"@stencil/core\";\nimport { checkResizeObserver } from \"../../utils/helpers\";\nimport { IcStepperAlignment } from \"./ic-stepper.types\";\n\n@Component({\n  tag: \"ic-stepper\",\n  styleUrl: \"ic-stepper.css\",\n  shadow: true,\n})\nexport class IcStepper {\n  @Element() el: HTMLIcStepperElement;\n\n  /**\n   * How the stepper should be aligned in its container.\n   */\n  @Prop() aligned?: IcStepperAlignment = \"full-width\";\n\n  /**\n   * The length of the connnector between each step in pixels. Minimum length is 100px.\n   */\n  @Prop() connectorWidth?: number = 100;\n\n  @State() stepperWidth: number = document\n    .querySelector(\"ic-stepper\")\n    .getBoundingClientRect().width;\n\n  @State() lastStepWidth: number = 0;\n\n  private steps: HTMLIcStepElement[];\n\n  private resizeObserver: ResizeObserver = null;\n\n  /**\n   * Get all steps currently within this stepper\n   */\n  private getChildren = (): void => {\n    this.steps = Array.from(this.el.querySelectorAll(\"ic-step\"));\n  };\n\n  private initialiseStepStates = (): void => {\n    this.steps.forEach((step, index) => {\n      // Assign stepNum to each step\n      step.stepNum = index + 1;\n      //Assign lastStep to final step\n      step.lastStep = index === this.steps.length - 1;\n\n      if (step.lastStep) {\n        step.classList.add(\"last-step\");\n        if (this.el.classList.contains(\"aligned-full-width\")) {\n          step.style.maxWidth = `${this.lastStepWidth}px`;\n        }\n        if (this.el.classList.contains(\"aligned-left\")) {\n          step.style.maxWidth = `${this.connectorWidth + 48}px`;\n        }\n      }\n    });\n\n    for (let i = 0; i < this.steps.length - 1; i++) {\n      if (this.el.classList.contains(\"aligned-full-width\")) {\n        this.steps[i].style.width = `${\n          (this.stepperWidth - this.lastStepWidth) / (this.steps.length - 1)\n        }px`;\n        this.steps[i].style.minWidth = \"148px\";\n      }\n\n      if (this.el.classList.contains(\"aligned-left\")) {\n        this.steps[i].style.width = `${this.connectorWidth + 48}px`;\n        const stepConnect = this.steps[i].shadowRoot.querySelector(\n          \"div > .step-top > .step-connect\"\n        ) as HTMLElement;\n        stepConnect.style.width =\n          this.connectorWidth > 100 ? `${this.connectorWidth}px` : \"100px\";\n      }\n    }\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      this.setStepperWidth();\n      this.getChildren();\n      this.initialiseStepStates();\n    });\n    this.resizeObserver.observe(this.el);\n  };\n\n  private setStepperWidth = (): void => {\n    this.stepperWidth = this.el.offsetWidth;\n    const allSteps = document.querySelectorAll(\"ic-step\");\n    const lastStep = allSteps[allSteps.length - 1];\n    lastStep.style.maxWidth = \"none\";\n    if (lastStep.classList.contains(\"aligned-full-width\")) {\n      lastStep.style.maxWidth = `${this.stepperWidth / allSteps.length}px`;\n    }\n    this.lastStepWidth = lastStep.offsetWidth;\n    this.getChildren();\n    this.initialiseStepStates();\n  };\n\n  componentDidLoad(): void {\n    checkResizeObserver(this.runResizeObserver);\n  }\n\n  disconnectedCallback(): void {\n    if (this.resizeObserver !== null) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          [\"aligned-left\"]: this.aligned === \"left\",\n          [\"aligned-full-width\"]: this.aligned === \"full-width\",\n        }}\n      >\n        <ul class=\"step-item-list\">\n          <slot></slot>\n        </ul>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-stepper.js","sourceRoot":"","sources":["../../../src/components/ic-stepper/ic-stepper.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Prop, h, State } from \"@stencil/core\";\nimport { checkResizeObserver, pxToRem } from \"../../utils/helpers\";\nimport { IcStepperAlignment } from \"./ic-stepper.types\";\nimport { IcStepTypes, IcStepVariants } from \"../ic-step/ic-step.types\";\n\n@Component({\n  tag: \"ic-stepper\",\n  styleUrl: \"ic-stepper.css\",\n  shadow: true,\n})\nexport class Stepper {\n  @Element() el: HTMLIcStepperElement;\n\n  /**\n   * The alignment of the default stepper within its container.\n   */\n  @Prop() aligned?: IcStepperAlignment = \"full-width\";\n\n  /**\n   * The variant of the stepper.\n   */\n  @Prop({ mutable: true }) variant?: IcStepVariants = \"default\";\n\n  /**\n   * The length of the connnector between each step in pixels. Minimum length is 100px.\n   */\n  @Prop() connectorWidth?: number = 100;\n\n  /**\n   * If `true`, the information about each step, i.e. step title, step subtitle and step status, will be hidden on all default steps. The information about each step will still be visible in the compact variant of the stepper.\n   */\n  @Prop() hideStepInfo?: boolean = false;\n\n  @State() stepperWidth: number = document\n    .querySelector(\"ic-stepper\")\n    .getBoundingClientRect().width;\n\n  @State() lastStepWidth: number = 0;\n\n  @State() stepTypes: IcStepTypes[] = [];\n\n  @State() alignedFullWidth: boolean = true;\n\n  @State() autoSetStepTitles: boolean = true;\n\n  @State() variantOverride?: boolean = this.variant !== \"compact\";\n\n  @State() noOfResizes?: number = 0;\n\n  private steps: HTMLIcStepElement[];\n\n  private stepsWithStepTitles: HTMLIcStepElement[];\n\n  private resizeObserver: ResizeObserver = null;\n\n  // Get all steps currently within this stepper\n  private getChildren = (): void => {\n    this.steps = Array.from(this.el.querySelectorAll(\"ic-step\"));\n\n    this.stepsWithStepTitles = Array.from(\n      this.el.querySelectorAll(\"ic-step[step-title]\")\n    );\n  };\n\n  // Inform the user that stepTitles are required on all steps in a compact stepper\n  private checkStepTitles = (): void => {\n    if (\n      this.stepsWithStepTitles.length < this.steps.length &&\n      this.variantOverride &&\n      this.variant === \"compact\"\n    ) {\n      this.noOfResizes = this.noOfResizes + 1;\n      if (this.noOfResizes === 1) {\n        console.error(\n          `The prop 'step-title' (web components) / 'stepTitle' (react) is required for all steps of the Stepper component (compact variant)`\n        );\n      }\n    }\n  };\n\n  private setStepTypes = (): void => {\n    this.getChildren();\n    this.stepTypes = [];\n    for (let i = 0; i < this.steps.length; i++) {\n      this.stepTypes.push(\"active\");\n    }\n  };\n\n  private setStepperWidth = (): void => {\n    this.alignedFullWidth =\n      this.variant === \"default\" && this.aligned === \"full-width\";\n\n    const lastStep = this.steps[this.steps.length - 1];\n    lastStep.style.maxWidth = \"none\";\n\n    if (this.alignedFullWidth) {\n      this.stepperWidth = this.el.offsetWidth;\n      lastStep.style.maxWidth = pxToRem(\n        `${this.stepperWidth / this.steps.length}px`\n      );\n      this.lastStepWidth = lastStep.offsetWidth;\n    }\n  };\n\n  private initialiseStepStates = (): void => {\n    this.steps.forEach((step, index) => {\n      // Set variant\n      step.variant = this.variant;\n      // Assign stepNum to each step\n      step.stepNum = index + 1;\n      // Assign lastStep to final step\n      step.lastStep = index === this.steps.length - 1;\n      step.lastStepNum = this.steps.length;\n\n      if (step.stepType !== \"current\") {\n        step.current = false;\n        this.stepTypes[index] = step.stepType;\n      } else {\n        step.current = true;\n      }\n\n      const stepTitleArea =\n        step.shadowRoot &&\n        step.shadowRoot.querySelector(\".step > .step-title-area\");\n\n      if (this.stepsWithStepTitles.length == 0 && this.variantOverride) {\n        if (this.variant === \"compact\") {\n          this.autoSetStepTitles = true;\n          if (this.autoSetStepTitles) {\n            step.stepTitle = \"Step \" + step.stepNum;\n            stepTitleArea &&\n              stepTitleArea\n                .querySelector(\".step-title\")\n                .setAttribute(\"aria-hidden\", \"true\");\n          }\n        }\n        if (this.variant === \"default\") {\n          this.autoSetStepTitles = false;\n          if (!this.autoSetStepTitles) {\n            step.stepTitle = undefined;\n            stepTitleArea &&\n              stepTitleArea\n                .querySelector(\".step-title\")\n                .removeAttribute(\"aria-hidden\");\n          }\n        }\n      }\n\n      if (this.variant === \"compact\") {\n        if (step.current === true || step.stepType === \"current\") {\n          step.classList.remove(\"hide\");\n          step.classList.add(\"show\");\n        } else if (step.classList.contains(\"show\")) {\n          step.classList.remove(\"show\");\n          step.classList.add(\"hide\");\n        }\n\n        if (!step.lastStep) {\n          step.nextStepTitle = this.steps[index + 1].stepTitle;\n          step.progress = (step.stepNum / this.steps.length) * 100;\n        } else if (step.lastStep && this.stepTypes[index] !== \"completed\") {\n          step.progress = 95;\n        } else {\n          step.progress = 100;\n        }\n\n        if (this.hideStepInfo && stepTitleArea !== null) {\n          stepTitleArea.classList.remove(\"visually-hidden\");\n        }\n\n        step.compactStepStyling = this.stepTypes[index];\n      }\n\n      if (this.variant === \"default\") {\n        if (!step.lastStep) {\n          if (this.alignedFullWidth) {\n            step.style.width = pxToRem(\n              `${\n                (this.stepperWidth - this.lastStepWidth) /\n                (this.steps.length - 1)\n              }px`\n            );\n            step.style.minWidth = pxToRem(\"148px\");\n          }\n        } else if (step.lastStep) {\n          step.classList.add(\"last-step\");\n          if (this.alignedFullWidth) {\n            step.style.maxWidth = `${this.lastStepWidth}px`;\n          } else {\n            step.style.maxWidth =\n              this.connectorWidth > 100\n                ? pxToRem(`${this.connectorWidth + 48}px`)\n                : pxToRem(\"148px\");\n          }\n        }\n\n        if (this.aligned === \"left\") {\n          step.style.width =\n            this.connectorWidth > 100\n              ? pxToRem(`${this.connectorWidth + 48}px`)\n              : pxToRem(\"148px\");\n          const stepConnect = step.shadowRoot.querySelector(\n            \".step > .step-top > .step-connect\"\n          ) as HTMLElement;\n\n          if (stepConnect) {\n            stepConnect.style.width =\n              this.connectorWidth > 100\n                ? pxToRem(`${this.connectorWidth}px`)\n                : pxToRem(\"100px\");\n          }\n        }\n\n        if (this.hideStepInfo && stepTitleArea !== null) {\n          stepTitleArea.classList.add(\"visually-hidden\");\n        }\n      }\n    });\n  };\n\n  private overrideVariant = () => {\n    let minDefaultStepperWidth = 148 * this.steps.length;\n\n    if (this.aligned === \"left\" && this.connectorWidth > 100) {\n      minDefaultStepperWidth = (this.connectorWidth + 48) * this.steps.length;\n    }\n\n    if (this.variantOverride) {\n      if (this.el.clientWidth < minDefaultStepperWidth) {\n        this.variant = \"compact\";\n        this.getChildren();\n      } else {\n        this.variant = \"default\";\n        this.getChildren();\n      }\n    }\n  };\n\n  private resizeObserverCallback = () => {\n    this.getChildren();\n    this.checkStepTitles();\n    this.overrideVariant();\n    this.setStepperWidth();\n    this.initialiseStepStates();\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      this.resizeObserverCallback();\n    });\n    this.resizeObserver.observe(this.el);\n  };\n\n  componentWillLoad(): void {\n    this.setStepTypes();\n    if (this.variant === \"compact\") {\n      this.variantOverride = false;\n    }\n  }\n\n  componentDidLoad(): void {\n    checkResizeObserver(this.runResizeObserver);\n  }\n\n  disconnectedCallback(): void {\n    if (this.resizeObserver !== null) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          [`${this.variant}`]: true,\n          [\"aligned-left\"]:\n            this.variant === \"default\" && this.aligned === \"left\",\n        }}\n      >\n        <ul class=\"step-item-list\">\n          <slot></slot>\n        </ul>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,7 +1,7 @@
 import { fixture } from "@open-wc/testing-helpers";
 import { axe } from "jest-axe";
 import { checkShadowElementRendersCorrectly } from "../../utils/testa11y.helpers";
-describe("stepper component", () => {
+describe("default variant of stepper component", () => {
   it("passes accessibility", async () => {
     const el = await fixture(`<ic-stepper>
     <ic-step step-title="First"></ic-step>
@@ -21,4 +21,16 @@ describe("stepper component", () => {
     expect(await axe(el)).toHaveNoViolations();
   });
 });
+describe("compact variant of ic-stepper", () => {
+  it("passes accessibility", async () => {
+    const el = await fixture(`<ic-stepper variant="compact" id="standard-compact-stepper">
+        <ic-step step-title="Create" step-type="completed"></ic-step>
+        <ic-step step-title="Read" step-status="complete" current></ic-step>
+        <ic-step step-title="Update" step-status="not required"></ic-step>
+        <ic-step step-title="Delete" step-status="not required"></ic-step>
+      </ic-stepper>`);
+    checkShadowElementRendersCorrectly(el);
+    expect(await axe(el)).toHaveNoViolations();
+  });
+});
 //# sourceMappingURL=ic-stepper.test.a11y.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ic-stepper.test.a11y.js","sourceRoot":"","sources":["../../../src/components/ic-stepper/ic-stepper.test.a11y.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAC/B,OAAO,EAAE,kCAAkC,EAAE,MAAM,8BAA8B,CAAC;AAElF,QAAQ,CAAC,mBAAmB,EAAE,GAAG,EAAE;EACjC,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;IACpC,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC;;;;;;;;;;;;;gBAab,CAAC,CAAC;IACd,kCAAkC,CAAC,EAAE,CAAC,CAAC;IACvC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAC;EAC7C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { fixture } from \"@open-wc/testing-helpers\";\nimport { axe } from \"jest-axe\";\nimport { checkShadowElementRendersCorrectly } from \"../../utils/testa11y.helpers\";\n\ndescribe(\"stepper component\", () => {\n  it(\"passes accessibility\", async () => {\n    const el = await fixture(`<ic-stepper>\n    <ic-step step-title=\"First\"></ic-step>\n    <ic-step\n      step-title=\"Second With a Very Long Title\"\n      step-subtitle=\"Optional Subtitle\"\n      step-type=\"current\"\n    ></ic-step>\n    <ic-step step-title=\"Third\" step-type=\"disabled\"></ic-step>\n    <ic-step\n      step-title=\"Fourth\"\n      step-subtitle=\"Optional Subtitle\"\n      step-type=\"completed\"\n    ></ic-step>\n  </ic-stepper>`);\n    checkShadowElementRendersCorrectly(el);\n    expect(await axe(el)).toHaveNoViolations();\n  });\n});\n"]}
+{"version":3,"file":"ic-stepper.test.a11y.js","sourceRoot":"","sources":["../../../src/components/ic-stepper/ic-stepper.test.a11y.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAC/B,OAAO,EAAE,kCAAkC,EAAE,MAAM,8BAA8B,CAAC;AAElF,QAAQ,CAAC,sCAAsC,EAAE,GAAG,EAAE;EACpD,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;IACpC,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC;;;;;;;;;;;;;gBAab,CAAC,CAAC;IACd,kCAAkC,CAAC,EAAE,CAAC,CAAC;IACvC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAC;EAC7C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC;AAEH,QAAQ,CAAC,+BAA+B,EAAE,GAAG,EAAE;EAC7C,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;IACpC,MAAM,EAAE,GACN,MAAM,OAAO,CAAC;;;;;oBAKA,CAAC,CAAC;IAClB,kCAAkC,CAAC,EAAE,CAAC,CAAC;IACvC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAC;EAC7C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { fixture } from \"@open-wc/testing-helpers\";\nimport { axe } from \"jest-axe\";\nimport { checkShadowElementRendersCorrectly } from \"../../utils/testa11y.helpers\";\n\ndescribe(\"default variant of stepper component\", () => {\n  it(\"passes accessibility\", async () => {\n    const el = await fixture(`<ic-stepper>\n    <ic-step step-title=\"First\"></ic-step>\n    <ic-step\n      step-title=\"Second With a Very Long Title\"\n      step-subtitle=\"Optional Subtitle\"\n      step-type=\"current\"\n    ></ic-step>\n    <ic-step step-title=\"Third\" step-type=\"disabled\"></ic-step>\n    <ic-step\n      step-title=\"Fourth\"\n      step-subtitle=\"Optional Subtitle\"\n      step-type=\"completed\"\n    ></ic-step>\n  </ic-stepper>`);\n    checkShadowElementRendersCorrectly(el);\n    expect(await axe(el)).toHaveNoViolations();\n  });\n});\n\ndescribe(\"compact variant of ic-stepper\", () => {\n  it(\"passes accessibility\", async () => {\n    const el =\n      await fixture(`<ic-stepper variant=\"compact\" id=\"standard-compact-stepper\">\n        <ic-step step-title=\"Create\" step-type=\"completed\"></ic-step>\n        <ic-step step-title=\"Read\" step-status=\"complete\" current></ic-step>\n        <ic-step step-title=\"Update\" step-status=\"not required\"></ic-step>\n        <ic-step step-title=\"Delete\" step-status=\"not required\"></ic-step>\n      </ic-stepper>`);\n    checkShadowElementRendersCorrectly(el);\n    expect(await axe(el)).toHaveNoViolations();\n  });\n});\n"]}

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

@@ -466,19 +466,19 @@ input {
 }
 
 .ic-switch-label-small {
-  margin-bottom: 10px;
+  margin-bottom: 0.625rem;
 }
 
 .ic-switch-toggle {
   display: flex;
   align-items: center;
   justify-content: space-around;
-  width: 64px;
+  width: 4rem;
   height: var(--ic-space-xl);
   position: relative;
   border-radius: 100vw;
   background-color: var(--ic-architectural-200);
-  border: 1px solid var(--ic-architectural-700);
+  border: 0.063rem solid var(--ic-architectural-700);
   box-sizing: border-box;
   transition: var(--ic-transition-duration-fast);
 }
@@ -493,13 +493,13 @@ input {
 
 .ic-switch-toggle::before {
   content: "";
-  width: 21.33px;
-  height: 21.33px;
+  width: 1.333rem;
+  height: 1.333rem;
   border-radius: 50%;
   position: absolute;
   z-index: 2;
   top: 50%;
-  left: 5.33px;
+  left: 0.333rem;
   transform: translate(0, -50%);
   background-color: var(--ic-architectural-700);
   transition: var(--ic-transition-duration-slow);
@@ -508,8 +508,8 @@ input {
 .ic-switch-icon {
   display: inline-block;
   vertical-align: middle;
-  width: 10px;
-  height: 10px;
+  width: 0.625rem;
+  height: 0.625rem;
 }
 
 .ic-switch-icon-circle,
@@ -542,26 +542,26 @@ input {
 }
 
 .ic-switch-input:not([disabled]) + .ic-switch-toggle:hover::before {
-  box-shadow: 0 0 0 12px var(--ic-action-dark-bg-hover);
+  box-shadow: 0 0 0 0.75rem var(--ic-action-dark-bg-hover);
 }
 
 .ic-switch-input:not([disabled]) + .ic-switch-toggle:active::before {
-  box-shadow: 0 0 0 12px var(--ic-action-dark-bg-active);
+  box-shadow: 0 0 0 0.75rem var(--ic-action-dark-bg-active);
 }
 
 .ic-switch-input:not([disabled]):checked + .ic-switch-toggle:hover::before {
-  box-shadow: 0 0 0 12px var(--ic-action-default-bg-hover);
+  box-shadow: 0 0 0 0.75rem var(--ic-action-default-bg-hover);
 }
 
 .ic-switch-input:not([disabled]):checked + .ic-switch-toggle:active::before {
-  box-shadow: 0 0 0 12px var(--ic-action-default-bg-active);
+  box-shadow: 0 0 0 0.75rem var(--ic-action-default-bg-active);
 }
 
 .ic-switch-input:focus:not([disabled]) + .ic-switch-toggle,
 .ic-switch-input:focus-visible:not([disabled]) + .ic-switch-toggle {
-  box-shadow: 0 0 0 1px var(--ic-architectural-white),
-    0 0 0 3px var(--ic-action-default),
-    0 0 0 8px var(--ic-action-default-active-alpha);
+  box-shadow: 0 0 0 0.063rem var(--ic-architectural-white),
+    0 0 0 0.188rem var(--ic-action-default),
+    0 0 0 0.5rem var(--ic-action-default-active-alpha);
 }
 
 .ic-switch-disabled {
@@ -578,7 +578,7 @@ input {
 
 .ic-switch-input:disabled + .ic-switch-toggle {
   background-color: var(--ic-architectural-80);
-  border: 1px dashed var(--ic-architectural-300);
+  border: 0.063rem dashed var(--ic-architectural-300);
 }
 
 .ic-switch-input:disabled ~ .ic-switch-checked-status {
@@ -591,7 +591,7 @@ input {
 
 .ic-switch-input:disabled:checked + .ic-switch-toggle {
   background-color: var(--ic-status-info-background);
-  border: 1px dashed #98c9f5;
+  border: 0.063rem dashed #98c9f5;
 }
 
 .ic-switch-input:disabled:checked + .ic-switch-toggle::before {
@@ -603,7 +603,7 @@ input {
 }
 
 .ic-switch-small .ic-switch-checked-status {
-  padding-left: 6px;
+  padding-left: 0.375rem;
 }
 
 .ic-switch-small .ic-switch-toggle {
@@ -626,7 +626,7 @@ input {
 }
 
 ::slotted(svg) {
-  fill: currentColor;
+  fill: currentcolor;
 }
 
 @media (forced-colors: active) {
@@ -636,7 +636,7 @@ input {
   }
 
   .ic-switch-input:checked + .ic-switch-toggle::before {
-    transform: translate(calc(var(--ic-space-xl) - 2px), -50%);
+    transform: translate(calc(var(--ic-space-xl) - 0.125rem), -50%);
   }
 
   .ic-switch-input:disabled + .ic-switch-toggle,

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

@@ -35,6 +35,14 @@ export class Switch {
     this.checkedState = false;
     this.initiallyChecked = this.checked;
   }
+  /**
+   * Sets focus on the switch.
+   */
+  async setFocus() {
+    if (this.el.shadowRoot.querySelector("input")) {
+      this.el.shadowRoot.querySelector("input").focus();
+    }
+  }
   componentWillLoad() {
     this.checkedState = this.checked;
     addFormResetListener(this.el, this.handleFormReset);
@@ -60,6 +68,7 @@ export class Switch {
   }
   static get is() { return "ic-switch"; }
   static get encapsulation() { return "shadow"; }
+  static get delegatesFocus() { return true; }
   static get originalStyleUrls() {
     return {
       "$": ["ic-switch.css"]
@@ -84,7 +93,7 @@ export class Switch {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Applies an aria-label to the component, for when no visual 'name' is provided."
+          "text": "The aria-label applied to the switch when no visual 'name' is provided."
         },
         "attribute": "label",
         "reflect": false
@@ -101,7 +110,7 @@ export class Switch {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Hides the label and applies the required label value as an aria-label."
+          "text": "If `true`, the label will be hidden and the required label value will be applied as an aria-label."
         },
         "attribute": "hide-label",
         "reflect": false,
@@ -119,7 +128,7 @@ export class Switch {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Provide helper text to display additional field guidance."
+          "text": "The helper text that will be displayed for additional field guidance."
         },
         "attribute": "helper-text",
         "reflect": false,
@@ -137,7 +146,7 @@ export class Switch {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "If true, the component is checked."
+          "text": "If `true`, the switch will display as checked."
         },
         "attribute": "checked",
         "reflect": false,
@@ -155,7 +164,7 @@ export class Switch {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "If true, the component reduces in size to the small state."
+          "text": "If `true`, the small styling will be applied to the switch."
         },
         "attribute": "small",
         "reflect": false,
@@ -173,7 +182,7 @@ export class Switch {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "If true, the component is not interactive."
+          "text": "If `true`, the disabled state will be set."
         },
         "attribute": "disabled",
         "reflect": false,
@@ -209,7 +218,7 @@ export class Switch {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "If true, the component will render the On/Off state text."
+          "text": "If `true`, the switch will render the On/Off state text."
         },
         "attribute": "show-state",
         "reflect": false,
@@ -294,6 +303,26 @@ export class Switch {
         }
       }];
   }
+  static get methods() {
+    return {
+      "setFocus": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Sets focus on the switch.",
+          "tags": []
+        }
+      }
+    };
+  }
   static get elementRef() { return "el"; }
 }
 //# sourceMappingURL=ic-switch.js.map