@ukic/web-components 2.0.0-alpha.121

package/dist/components/ic-skeleton.js

@@ -0,0 +1,80 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const icSkeletonCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}@keyframes loading{0%{background-color:var(--ic-architectural-100)}50%{background-color:var(--ic-architectural-200)}100%{background-color:var(--ic-architectural-100)}}@keyframes loading-dark{0%{background-color:var(--ic-architectural-600)}50%{background-color:var(--ic-architectural-400)}100%{background-color:var(--ic-architectural-600)}}:host{display:inline-block}:host(.skeleton){background-color:var(--ic-architectural-100);border-radius:var(--ic-border-radius);animation:loading 1200ms infinite;display:inline-block}:host(.skeleton)>*{opacity:0;visibility:hidden}:host(.circular){border-radius:50%}:host(.dark){background-color:var(--ic-architectural-600);animation:loading-dark 1200ms infinite}";
+
+const Skeleton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.variant = "rectangular";
+    this.dark = false;
+    this.hasChild = undefined;
+    this.default = undefined;
+    this.heightOnly = undefined;
+    this.widthOnly = undefined;
+  }
+  componentWillLoad() {
+    if (this.el.style.height === "" && this.el.style.width === "") {
+      this.default = true;
+    }
+    else if (!(this.el.style.height === "") && this.el.style.width === "") {
+      this.heightOnly = true;
+    }
+    else if (!(this.el.style.width === "") && this.el.style.height === "") {
+      this.widthOnly = true;
+    }
+  }
+  render() {
+    const { variant, dark } = this;
+    this.hasChild = !!this.el.firstElementChild;
+    const defaultSkeletonStyle = {
+      height: variant == "text" ? "1em" : variant == "circular" ? "25px" : "93px",
+      width: variant == "circular" ? "25px" : "260px",
+    };
+    const heightSetStyle = {
+      height: this.el.style.height,
+      width: variant == "circular" ? "25px" : "260px",
+    };
+    const widthSetStyle = {
+      height: variant == "text" ? "1em" : variant == "circular" ? "25px" : "93px",
+      width: this.el.style.width,
+    };
+    return (h(Host, { class: {
+        ["skeleton"]: true,
+        ["circular"]: variant == "circular",
+        ["dark"]: dark,
+      }, style: (!this.hasChild && this.default && defaultSkeletonStyle) ||
+        (this.heightOnly && heightSetStyle) ||
+        (this.widthOnly && widthSetStyle), "aria-disabled": "true" }, h("slot", null)));
+  }
+  get el() { return this; }
+  static get style() { return icSkeletonCss; }
+}, [1, "ic-skeleton", {
+    "variant": [1],
+    "dark": [4],
+    "hasChild": [32],
+    "default": [32],
+    "heightOnly": [32],
+    "widthOnly": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ic-skeleton"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ic-skeleton":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Skeleton);
+      }
+      break;
+  } });
+}
+
+const IcSkeleton = Skeleton;
+const defineCustomElement = defineCustomElement$1;
+
+export { IcSkeleton, defineCustomElement };
+
+//# sourceMappingURL=ic-skeleton.js.map

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

@@ -0,0 +1 @@
+{"file":"ic-skeleton.js","mappings":";;AAAA,MAAM,aAAa,GAAG,6jGAA6jG;;MCQtkG,QAAQ;;;;;mBAKoB,aAAa;gBAI3B,KAAK;;;;;;EAU9B,iBAAiB;IACf,IAAI,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,KAAK,EAAE,IAAI,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,KAAK,EAAE,EAAE;MAC7D,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;KACrB;SAAM,IAAI,EAAE,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,KAAK,EAAE,CAAC,IAAI,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,KAAK,EAAE,EAAE;MACvE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;KACxB;SAAM,IAAI,EAAE,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,KAAK,EAAE,CAAC,IAAI,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,KAAK,EAAE,EAAE;MACvE,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;KACvB;GACF;EAED,MAAM;IACJ,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;IAE/B,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,iBAAiB,CAAC;IAE5C,MAAM,oBAAoB,GAAG;MAC3B,MAAM,EACJ,OAAO,IAAI,MAAM,GAAG,KAAK,GAAG,OAAO,IAAI,UAAU,GAAG,MAAM,GAAG,MAAM;MACrE,KAAK,EAAE,OAAO,IAAI,UAAU,GAAG,MAAM,GAAG,OAAO;KAChD,CAAC;IAEF,MAAM,cAAc,GAAG;MACrB,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM;MAC5B,KAAK,EAAE,OAAO,IAAI,UAAU,GAAG,MAAM,GAAG,OAAO;KAChD,CAAC;IAEF,MAAM,aAAa,GAAG;MACpB,MAAM,EACJ,OAAO,IAAI,MAAM,GAAG,KAAK,GAAG,OAAO,IAAI,UAAU,GAAG,MAAM,GAAG,MAAM;MACrE,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK;KAC3B,CAAC;IAEF,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,CAAC,UAAU,GAAG,IAAI;QAClB,CAAC,UAAU,GAAG,OAAO,IAAI,UAAU;QACnC,CAAC,MAAM,GAAG,IAAI;OACf,EACD,KAAK,EACH,CAAC,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,IAAI,oBAAoB;SACtD,IAAI,CAAC,UAAU,IAAI,cAAc,CAAC;SAClC,IAAI,CAAC,SAAS,IAAI,aAAa,CAAC,mBAErB,MAAM,IAEpB,eAAQ,CACH,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/ic-skeleton/ic-skeleton.css?tag=ic-skeleton&encapsulation=shadow","./src/components/ic-skeleton/ic-skeleton.tsx"],"sourcesContent":["@import \"../../global/normalise.css\";\n\n@keyframes loading {\n  0% {\n    background-color: var(--ic-architectural-100);\n  }\n\n  50% {\n    background-color: var(--ic-architectural-200);\n  }\n\n  100% {\n    background-color: var(--ic-architectural-100);\n  }\n}\n\n@keyframes loading-dark {\n  0% {\n    background-color: var(--ic-architectural-600);\n  }\n\n  50% {\n    background-color: var(--ic-architectural-400);\n  }\n\n  100% {\n    background-color: var(--ic-architectural-600);\n  }\n}\n\n:host {\n  display: inline-block;\n}\n\n:host(.skeleton) {\n  background-color: var(--ic-architectural-100);\n  border-radius: var(--ic-border-radius);\n  animation: loading 1200ms infinite;\n  display: inline-block;\n}\n\n:host(.skeleton) > * {\n  opacity: 0;\n  visibility: hidden;\n}\n\n:host(.circular) {\n  border-radius: 50%;\n}\n\n:host(.dark) {\n  background-color: var(--ic-architectural-600);\n  animation: loading-dark 1200ms infinite;\n}\n","import { Component, Element, Host, Prop, h, State } from \"@stencil/core\";\nimport { IcSkeletonVariants } from \"./ic-skeleton.types\";\n\n@Component({\n  tag: \"ic-skeleton\",\n  styleUrl: \"ic-skeleton.css\",\n  shadow: true,\n})\nexport class Skeleton {\n  @Element() el: HTMLIcSkeletonElement;\n  /**\n   * The variant of the skeleton that will be displayed\n   */\n  @Prop() variant?: IcSkeletonVariants = \"rectangular\";\n  /**\n   * Set the skeleton to the dark variant\n   */\n  @Prop() dark?: boolean = false;\n\n  @State() hasChild: boolean;\n\n  @State() default: boolean;\n\n  @State() heightOnly: boolean;\n\n  @State() widthOnly: boolean;\n\n  componentWillLoad(): void {\n    if (this.el.style.height === \"\" && this.el.style.width === \"\") {\n      this.default = true;\n    } else if (!(this.el.style.height === \"\") && this.el.style.width === \"\") {\n      this.heightOnly = true;\n    } else if (!(this.el.style.width === \"\") && this.el.style.height === \"\") {\n      this.widthOnly = true;\n    }\n  }\n\n  render() {\n    const { variant, dark } = this;\n\n    this.hasChild = !!this.el.firstElementChild;\n\n    const defaultSkeletonStyle = {\n      height:\n        variant == \"text\" ? \"1em\" : variant == \"circular\" ? \"25px\" : \"93px\",\n      width: variant == \"circular\" ? \"25px\" : \"260px\",\n    };\n\n    const heightSetStyle = {\n      height: this.el.style.height,\n      width: variant == \"circular\" ? \"25px\" : \"260px\",\n    };\n\n    const widthSetStyle = {\n      height:\n        variant == \"text\" ? \"1em\" : variant == \"circular\" ? \"25px\" : \"93px\",\n      width: this.el.style.width,\n    };\n\n    return (\n      <Host\n        class={{\n          [\"skeleton\"]: true,\n          [\"circular\"]: variant == \"circular\",\n          [\"dark\"]: dark,\n        }}\n        style={\n          (!this.hasChild && this.default && defaultSkeletonStyle) ||\n          (this.heightOnly && heightSetStyle) ||\n          (this.widthOnly && widthSetStyle)\n        }\n        aria-disabled=\"true\"\n      >\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/ic-status-tag.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface IcStatusTag extends Components.IcStatusTag, HTMLElement {}
+export const IcStatusTag: {
+  prototype: IcStatusTag;
+  new (): IcStatusTag;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,59 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { a as onComponentRequiredPropUndefined } from './helpers.js';
+import { d as defineCustomElement$2 } from './ic-typography2.js';
+
+const icStatusTagCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}.tag{padding:var(--ic-space-xs) var(--ic-space-sm);font-size:14px;border-radius:80px;display:inline-block;min-width:40px;text-align:center}.dense{padding:var(--ic-space-xxs) var(--ic-space-sm)}.primary-neutral{background-color:var(--ic-architectural-600);color:var(--ic-architectural-white)}.primary-success{background-color:var(--ic-status-success);color:var(--ic-architectural-white)}.primary-warning{background-color:var(--ic-status-warning);color:var(--ic-color-primary-text)}.primary-danger{background-color:var(--ic-status-error);color:var(--ic-architectural-white)}.secondary-neutral{background-color:var(--ic-architectural-200);color:var(--ic-color-secondary-text);border:1px solid var(--ic-architectural-400)}.secondary-success{background-color:var(--ic-status-success-background);color:var(--ic-status-success);border:1px solid var(--ic-status-success)}.secondary-warning{background-color:var(--ic-status-warning-background);color:var(--ic-status-warning-dark);border:1px solid var(--ic-status-warning-dark)}.secondary-danger{background-color:var(--ic-status-error-background);color:var(--ic-status-error);border:1px solid var(--ic-status-error)}";
+
+const StatusTag = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.label = undefined;
+    this.status = "neutral";
+    this.variant = "primary";
+    this.dense = false;
+  }
+  componentDidLoad() {
+    onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Status Tag");
+  }
+  render() {
+    const { label, status, variant, dense } = this;
+    return (h(Host, { role: "status" }, h("strong", { class: {
+        ["tag"]: true,
+        [`${variant}-${status}`]: true,
+        ["dense"]: dense,
+      } }, h("ic-typography", { variant: "label-uppercase", spacing: false }, h("span", null, label)))));
+  }
+  static get style() { return icStatusTagCss; }
+}, [1, "ic-status-tag", {
+    "label": [1],
+    "status": [1],
+    "variant": [1],
+    "dense": [4]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ic-status-tag", "ic-typography"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ic-status-tag":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, StatusTag);
+      }
+      break;
+    case "ic-typography":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const IcStatusTag = StatusTag;
+const defineCustomElement = defineCustomElement$1;
+
+export { IcStatusTag, defineCustomElement };
+
+//# sourceMappingURL=ic-status-tag.js.map

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

@@ -0,0 +1 @@
+{"file":"ic-status-tag.js","mappings":";;;;AAAA,MAAM,cAAc,GAAG,qgHAAqgH;;MCY/gH,SAAS;;;;;;kBAQmB,SAAS;mBAIR,SAAS;iBAIvB,KAAK;;EAE/B,gBAAgB;IACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EACzC,YAAY,CACb,CAAC;GACH;EAED,MAAM;IACJ,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;IAC/C,QACE,EAAC,IAAI,IAAC,IAAI,EAAC,QAAQ,IACjB,cACE,KAAK,EAAE;QACL,CAAC,KAAK,GAAG,IAAI;QACb,CAAC,GAAG,OAAO,IAAI,MAAM,EAAE,GAAG,IAAI;QAC9B,CAAC,OAAO,GAAG,KAAK;OACjB,IAED,qBAAe,OAAO,EAAC,iBAAiB,EAAC,OAAO,EAAE,KAAK,IACrD,gBAAO,KAAK,CAAQ,CACN,CACT,CACJ,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/ic-status-tag/ic-status-tag.css?tag=ic-status-tag&encapsulation=shadow","./src/components/ic-status-tag/ic-status-tag.tsx"],"sourcesContent":["@import \"../../global/normalise.css\";\n\n.tag {\n  padding: var(--ic-space-xs) var(--ic-space-sm);\n  font-size: 14px;\n  border-radius: 80px;\n  display: inline-block;\n  min-width: 40px;\n  text-align: center;\n}\n\n.dense {\n  padding: var(--ic-space-xxs) var(--ic-space-sm);\n}\n\n.primary-neutral {\n  background-color: var(--ic-architectural-600);\n  color: var(--ic-architectural-white);\n}\n\n.primary-success {\n  background-color: var(--ic-status-success);\n  color: var(--ic-architectural-white);\n}\n\n.primary-warning {\n  background-color: var(--ic-status-warning);\n  color: var(--ic-color-primary-text);\n}\n\n.primary-danger {\n  background-color: var(--ic-status-error);\n  color: var(--ic-architectural-white);\n}\n\n.secondary-neutral {\n  background-color: var(--ic-architectural-200);\n  color: var(--ic-color-secondary-text);\n  border: 1px solid var(--ic-architectural-400);\n}\n\n.secondary-success {\n  background-color: var(--ic-status-success-background);\n  color: var(--ic-status-success);\n  border: 1px solid var(--ic-status-success);\n}\n\n.secondary-warning {\n  background-color: var(--ic-status-warning-background);\n  color: var(--ic-status-warning-dark);\n  border: 1px solid var(--ic-status-warning-dark);\n}\n\n.secondary-danger {\n  background-color: var(--ic-status-error-background);\n  color: var(--ic-status-error);\n  border: 1px solid var(--ic-status-error);\n}\n","import { Component, Host, h, Prop } from \"@stencil/core\";\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\nimport {\n  IcStatusTagStatuses,\n  IcStatusTagVariants,\n} from \"./ic-status-tag.types\";\n\n@Component({\n  tag: \"ic-status-tag\",\n  styleUrl: \"ic-status-tag.css\",\n  shadow: true,\n})\nexport class StatusTag {\n  /**\n   * The content rendered within the status tag.\n   */\n  @Prop() label!: string;\n  /**\n   * The colour of the status tag.\n   */\n  @Prop() status?: IcStatusTagStatuses = \"neutral\";\n  /**\n   * The emphasis of the status tag.\n   */\n  @Prop() variant?: IcStatusTagVariants = \"primary\";\n  /**\n   * The size of the status tag.\n   */\n  @Prop() dense?: boolean = false;\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Status Tag\"\n    );\n  }\n\n  render() {\n    const { label, status, variant, dense } = this;\n    return (\n      <Host role=\"status\">\n        <strong\n          class={{\n            [\"tag\"]: true,\n            [`${variant}-${status}`]: true,\n            [\"dense\"]: dense,\n          }}\n        >\n          <ic-typography variant=\"label-uppercase\" spacing={false}>\n            <span>{label}</span>\n          </ic-typography>\n        </strong>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/ic-step.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface IcStep extends Components.IcStep, HTMLElement {}
+export const IcStep: {
+  prototype: IcStep;
+  new (): IcStep;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ic-step.js

@@ -0,0 +1,85 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as checkIcon } from './check-icon.js';
+import { a as onComponentRequiredPropUndefined } from './helpers.js';
+import { d as defineCustomElement$2 } from './ic-typography2.js';
+
+const icStepCss = ":host{display:flex;flex:auto}:host(.last-step){flex-grow:initial}.step{display:flex;flex-direction:column;flex:1 1 0}.step-top{display:flex;width:100%;align-items:center;align-self:flex-start;height:40px}.step-icon{display:flex;justify-content:center;align-items:center;border-radius:50%}.step-icon-inner{width:var(--ic-space-xl);height:var(--ic-space-xl);display:flex;justify-content:center;align-items:center;border-radius:50%}.current{color:var(--ic-theme-primary)}.step-title-area{margin:var(--ic-space-xs) 0;padding-right:var(--ic-space-xs)}.step-title,.step-subtitle{width:-moz-fit-content;width:fit-content}.step-subtitle{color:var(--ic-color-tertiary-text)}.current .step-subtitle{color:var(--ic-color-primary-text)}.completed{color:var(--ic-status-success)}.active .step-icon-inner{box-shadow:inset var(--ic-architectural-200) 0 0 0 2px}.current .step-icon-inner{background-color:var(--ic-theme-primary);color:white}.disabled{color:var(--ic-architectural-200)}.disabled .step-icon-inner{border:1px dashed var(--ic-architectural-200);width:calc(var(--ic-space-xl) - var(--ic-space-xxxs));height:calc(var(--ic-space-xl) - var(--ic-space-xxxs))}.disabled .step-title-area{color:var(--ic-color-tertiary-text)}.completed .step-icon-inner{background:var(--ic-status-success);box-shadow:inset var(--ic-status-success) 0 0 0 var(--ic-space-xxxs);border-radius:100%}.current .step-icon{border:var(--ic-space-xxxs) solid var(--ic-theme-primary);padding:var(--ic-space-xxxs);margin:0 calc(-1 * var(--ic-space-xxxs));}.step-connect{height:var(--ic-space-xxxs);background-color:var(--ic-architectural-200);margin:0 var(--ic-space-xs);border-radius:var(--ic-space-xxs);width:100%}.aligned-full-width.step-connect{min-width:100px;width:100%}.disabled .step-connect{height:0;background-color:rgb(0 0 0 / 0%);border-top:2px dashed var(--ic-architectural-200);border-radius:0}.completed .step-connect{background-color:var(--ic-status-success)}.step-connect-inner{width:70%;display:flex;flex:auto;height:var(--ic-space-xxxs);border-radius:var(--ic-space-xxs);background-color:var(--ic-theme-primary)}.check-icon{padding-top:var(--ic-space-xxs)}.check-icon svg{width:16px;height:16px}.check-icon>svg>path{fill:white}";
+
+const Step = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.stepType = "active";
+    this.stepTitle = undefined;
+    this.stepSubtitle = undefined;
+    this.stepNum = undefined;
+    this.lastStep = undefined;
+  }
+  componentDidLoad() {
+    onComponentRequiredPropUndefined([
+      { prop: this.stepNum, propName: "step-num" },
+      { prop: this.lastStep, propName: "last-step" },
+    ], "Step");
+  }
+  render() {
+    let icon;
+    if (this.stepType !== "completed") {
+      icon = (h("ic-typography", { variant: "subtitle-small" }, h("span", { class: "step-icon-inner", "aria-hidden": "true" }, this.stepNum)));
+    }
+    else {
+      icon = (h("div", { class: "step-icon-inner", "aria-hidden": "true" }, h("span", { class: "check-icon", innerHTML: checkIcon })));
+    }
+    let ariaLabel = "";
+    if (this.stepType === "completed") {
+      ariaLabel = ". Completed step";
+    }
+    else if (this.stepType === "disabled") {
+      ariaLabel = ". Disabled step";
+    }
+    const partialBar = this.stepType === "current" && (h("div", { class: "step-connect-inner" }));
+    const finalStep = !this.lastStep && (h("div", { class: {
+        ["step-connect"]: true,
+        ["aligned-full-width"]: this.el.parentElement.classList.contains("aligned-full-width"),
+      } }, partialBar));
+    return (h(Host, { role: "listitem", "aria-label": `Step ${this.stepNum}${ariaLabel}`, "aria-current": this.stepType == "current" ? "step" : null, class: {
+        ["aligned-full-width"]: this.el.parentElement.classList.contains("aligned-full-width"),
+      } }, h("div", { class: {
+        ["step"]: true,
+        [`${this.stepType}`]: true,
+      } }, h("div", { class: "step-top" }, h("div", { class: "step-icon" }, icon), finalStep), (this.stepTitle || this.stepSubtitle) && (h("div", { class: "step-title-area" }, this.stepTitle && (h("ic-typography", { variant: "subtitle-large", class: "step-title" }, this.stepTitle)), this.stepSubtitle && (h("ic-typography", { variant: "caption", class: "step-subtitle" }, this.stepSubtitle)))))));
+  }
+  get el() { return this; }
+  static get style() { return icStepCss; }
+}, [1, "ic-step", {
+    "stepType": [1, "step-type"],
+    "stepTitle": [1, "step-title"],
+    "stepSubtitle": [1, "step-subtitle"],
+    "stepNum": [2, "step-num"],
+    "lastStep": [4, "last-step"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ic-step", "ic-typography"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ic-step":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Step);
+      }
+      break;
+    case "ic-typography":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const IcStep = Step;
+const defineCustomElement = defineCustomElement$1;
+
+export { IcStep, defineCustomElement };
+
+//# sourceMappingURL=ic-step.js.map

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

@@ -0,0 +1 @@
+{"file":"ic-step.js","mappings":";;;;;AAAA,MAAM,SAAS,GAAG,+pEAA+pE;;MCUpqE,IAAI;;;;;oBAKkB,QAAQ;;;;;;EAsBzC,gBAAgB;IACd,gCAAgC,CAC9B;MACE,EAAE,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE;MAC5C,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE;KAC/C,EACD,MAAM,CACP,CAAC;GACH;EAED,MAAM;IACJ,IAAI,IAAI,CAAC;IACT,IAAI,IAAI,CAAC,QAAQ,KAAK,WAAW,EAAE;MACjC,IAAI,IACF,qBAAe,OAAO,EAAC,gBAAgB,IACrC,YAAM,KAAK,EAAC,iBAAiB,iBAAa,MAAM,IAC7C,IAAI,CAAC,OAAO,CACR,CACO,CACjB,CAAC;KACH;SAAM;MACL,IAAI,IACF,WAAK,KAAK,EAAC,iBAAiB,iBAAa,MAAM,IAC7C,YAAM,KAAK,EAAC,YAAY,EAAC,SAAS,EAAE,SAAS,GAAS,CAClD,CACP,CAAC;KACH;IAED,IAAI,SAAS,GAAG,EAAE,CAAC;IAEnB,IAAI,IAAI,CAAC,QAAQ,KAAK,WAAW,EAAE;MACjC,SAAS,GAAG,kBAAkB,CAAC;KAChC;SAAM,IAAI,IAAI,CAAC,QAAQ,KAAK,UAAU,EAAE;MACvC,SAAS,GAAG,iBAAiB,CAAC;KAC/B;IAED,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,KAAK,SAAS,KAC5C,WAAK,KAAK,EAAC,oBAAoB,GAAO,CACvC,CAAC;IACF,MAAM,SAAS,GAAG,CAAC,IAAI,CAAC,QAAQ,KAC9B,WACE,KAAK,EAAE;QACL,CAAC,cAAc,GAAG,IAAI;QACtB,CAAC,oBAAoB,GACnB,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,oBAAoB,CAAC;OACjE,IAEA,UAAU,CACP,CACP,CAAC;IAEF,QACE,EAAC,IAAI,IACH,IAAI,EAAC,UAAU,gBACH,QAAQ,IAAI,CAAC,OAAO,GAAG,SAAS,EAAE,kBAChC,IAAI,CAAC,QAAQ,IAAI,SAAS,GAAG,MAAM,GAAG,IAAI,EACxD,KAAK,EAAE;QACL,CAAC,oBAAoB,GACnB,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,oBAAoB,CAAC;OACjE,IAED,WACE,KAAK,EAAE;QACL,CAAC,MAAM,GAAG,IAAI;QACd,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,IAAI;OAC3B,IAED,WAAK,KAAK,EAAC,UAAU,IACnB,WAAK,KAAK,EAAC,WAAW,IAAE,IAAI,CAAO,EAClC,SAAS,CACN,EACL,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,YAAY,MACnC,WAAK,KAAK,EAAC,iBAAiB,IACzB,IAAI,CAAC,SAAS,KACb,qBAAe,OAAO,EAAC,gBAAgB,EAAC,KAAK,EAAC,YAAY,IACvD,IAAI,CAAC,SAAS,CACD,CACjB,EACA,IAAI,CAAC,YAAY,KAChB,qBAAe,OAAO,EAAC,SAAS,EAAC,KAAK,EAAC,eAAe,IACnD,IAAI,CAAC,YAAY,CACJ,CACjB,CACG,CACP,CACG,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/ic-step/ic-step.css?tag=ic-step&encapsulation=shadow","./src/components/ic-step/ic-step.tsx"],"sourcesContent":[":host {\n  display: flex;\n  flex: auto;\n}\n\n:host(.last-step) {\n  flex-grow: initial;\n}\n\n.step {\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 0;\n}\n\n.step-top {\n  display: flex;\n  width: 100%;\n  align-items: center;\n  align-self: flex-start;\n  height: 40px;\n}\n\n.step-icon {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n}\n\n.step-icon-inner {\n  width: var(--ic-space-xl);\n  height: var(--ic-space-xl);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n}\n\n.current {\n  color: var(--ic-theme-primary);\n}\n\n.step-title-area {\n  margin: var(--ic-space-xs) 0;\n  padding-right: var(--ic-space-xs);\n}\n\n.step-title,\n.step-subtitle {\n  width: fit-content;\n}\n\n.step-subtitle {\n  color: var(--ic-color-tertiary-text);\n}\n\n.current .step-subtitle {\n  color: var(--ic-color-primary-text);\n}\n\n.completed {\n  color: var(--ic-status-success);\n}\n\n.active .step-icon-inner {\n  box-shadow: inset var(--ic-architectural-200) 0 0 0 2px;\n}\n\n.current .step-icon-inner {\n  background-color: var(--ic-theme-primary);\n  color: white;\n}\n\n.disabled {\n  color: var(--ic-architectural-200);\n}\n\n.disabled .step-icon-inner {\n  border: 1px dashed var(--ic-architectural-200);\n  width: calc(var(--ic-space-xl) - var(--ic-space-xxxs));\n  height: calc(var(--ic-space-xl) - var(--ic-space-xxxs));\n}\n\n.disabled .step-title-area {\n  color: var(--ic-color-tertiary-text);\n}\n\n.completed .step-icon-inner {\n  background: var(--ic-status-success);\n  box-shadow: inset var(--ic-status-success) 0 0 0 var(--ic-space-xxxs);\n  border-radius: 100%;\n}\n\n.current .step-icon {\n  border: var(--ic-space-xxxs) solid var(--ic-theme-primary);\n  padding: var(--ic-space-xxxs);\n  margin: 0 calc(-1 * var(--ic-space-xxxs)); /* compensating for the circle being bigger than other steps */\n}\n\n.step-connect {\n  height: var(--ic-space-xxxs);\n  background-color: var(--ic-architectural-200);\n  margin: 0 var(--ic-space-xs);\n  border-radius: var(--ic-space-xxs);\n  width: 100%;\n}\n\n.aligned-full-width.step-connect {\n  min-width: 100px;\n  width: 100%;\n}\n\n.disabled .step-connect {\n  height: 0;\n  background-color: rgb(0 0 0 / 0%);\n  border-top: 2px dashed var(--ic-architectural-200);\n  border-radius: 0;\n}\n\n.completed .step-connect {\n  background-color: var(--ic-status-success);\n}\n\n.step-connect-inner {\n  width: 70%;\n  display: flex;\n  flex: auto;\n  height: var(--ic-space-xxxs);\n  border-radius: var(--ic-space-xxs);\n  background-color: var(--ic-theme-primary);\n}\n\n.check-icon {\n  padding-top: var(--ic-space-xxs);\n}\n\n.check-icon svg {\n  width: 16px;\n  height: 16px;\n}\n\n.check-icon > svg > path {\n  fill: white;\n}\n","import { Component, Host, h, Prop, Element } from \"@stencil/core\";\nimport checkIcon from \"../../assets/check-icon.svg\";\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\nimport { IcStepTypes } from \"./ic-step.types\";\n\n@Component({\n  tag: \"ic-step\",\n  styleUrl: \"ic-step.css\",\n  shadow: true,\n})\nexport class Step {\n  @Element() el: HTMLIcStepElement;\n  /**\n   * State of step\n   */\n  @Prop() stepType?: IcStepTypes = \"active\";\n\n  /**\n   * Name of step\n   */\n  @Prop() stepTitle?: string;\n\n  /**\n   * Additional information about step\n   */\n  @Prop() stepSubtitle?: string;\n\n  /**\n   * @internal The step number, managed by ic-stepper\n   */\n  @Prop() stepNum!: number;\n\n  /**\n   * @internal Final step in series flag, managed by ic-stepper\n   */\n  @Prop() lastStep!: boolean;\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [\n        { prop: this.stepNum, propName: \"step-num\" },\n        { prop: this.lastStep, propName: \"last-step\" },\n      ],\n      \"Step\"\n    );\n  }\n\n  render() {\n    let icon;\n    if (this.stepType !== \"completed\") {\n      icon = (\n        <ic-typography variant=\"subtitle-small\">\n          <span class=\"step-icon-inner\" aria-hidden=\"true\">\n            {this.stepNum}\n          </span>\n        </ic-typography>\n      );\n    } else {\n      icon = (\n        <div class=\"step-icon-inner\" aria-hidden=\"true\">\n          <span class=\"check-icon\" innerHTML={checkIcon}></span>\n        </div>\n      );\n    }\n\n    let ariaLabel = \"\";\n\n    if (this.stepType === \"completed\") {\n      ariaLabel = \". Completed step\";\n    } else if (this.stepType === \"disabled\") {\n      ariaLabel = \". Disabled step\";\n    }\n\n    const partialBar = this.stepType === \"current\" && (\n      <div class=\"step-connect-inner\"></div>\n    );\n    const finalStep = !this.lastStep && (\n      <div\n        class={{\n          [\"step-connect\"]: true,\n          [\"aligned-full-width\"]:\n            this.el.parentElement.classList.contains(\"aligned-full-width\"),\n        }}\n      >\n        {partialBar}\n      </div>\n    );\n\n    return (\n      <Host\n        role=\"listitem\"\n        aria-label={`Step ${this.stepNum}${ariaLabel}`}\n        aria-current={this.stepType == \"current\" ? \"step\" : null}\n        class={{\n          [\"aligned-full-width\"]:\n            this.el.parentElement.classList.contains(\"aligned-full-width\"),\n        }}\n      >\n        <div\n          class={{\n            [\"step\"]: true,\n            [`${this.stepType}`]: true,\n          }}\n        >\n          <div class=\"step-top\">\n            <div class=\"step-icon\">{icon}</div>\n            {finalStep}\n          </div>\n          {(this.stepTitle || this.stepSubtitle) && (\n            <div class=\"step-title-area\">\n              {this.stepTitle && (\n                <ic-typography variant=\"subtitle-large\" class=\"step-title\">\n                  {this.stepTitle}\n                </ic-typography>\n              )}\n              {this.stepSubtitle && (\n                <ic-typography variant=\"caption\" class=\"step-subtitle\">\n                  {this.stepSubtitle}\n                </ic-typography>\n              )}\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/ic-stepper.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface IcStepper extends Components.IcStepper, HTMLElement {}
+export const IcStepper: {
+  prototype: IcStepper;
+  new (): IcStepper;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ic-stepper.js

@@ -0,0 +1,115 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as checkResizeObserver } from './helpers.js';
+
+const icStepperCss = ":host{display:flex;width:100%}.step-item-list{display:flex;margin:0;padding:0}:host(.aligned-full-width) .step-item-list{flex:auto}";
+
+const IcStepper$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.resizeObserver = null;
+    /**
+     * Get all steps currently within this stepper
+     */
+    this.getChildren = () => {
+      this.steps = Array.from(this.el.querySelectorAll("ic-step"));
+    };
+    this.initialiseStepStates = () => {
+      this.steps.forEach((step, index) => {
+        // Assign stepNum to each step
+        step.stepNum = index + 1;
+        //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`;
+          }
+          if (this.el.classList.contains("aligned-left")) {
+            step.style.maxWidth = `${this.connectorWidth + 48}px`;
+          }
+        }
+      });
+      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";
+        }
+        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";
+        }
+      }
+    };
+    this.runResizeObserver = () => {
+      this.resizeObserver = new ResizeObserver(() => {
+        this.setStepperWidth();
+        this.getChildren();
+        this.initialiseStepStates();
+      });
+      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.connectorWidth = 100;
+    this.stepperWidth = document
+      .querySelector("ic-stepper")
+      .getBoundingClientRect().width;
+    this.lastStepWidth = 0;
+  }
+  componentDidLoad() {
+    checkResizeObserver(this.runResizeObserver);
+  }
+  disconnectedCallback() {
+    if (this.resizeObserver !== null) {
+      this.resizeObserver.disconnect();
+    }
+  }
+  render() {
+    return (h(Host, { class: {
+        ["aligned-left"]: this.aligned === "left",
+        ["aligned-full-width"]: this.aligned === "full-width",
+      } }, h("ul", { class: "step-item-list" }, h("slot", null))));
+  }
+  get el() { return this; }
+  static get style() { return icStepperCss; }
+}, [1, "ic-stepper", {
+    "aligned": [1],
+    "connectorWidth": [2, "connector-width"],
+    "stepperWidth": [32],
+    "lastStepWidth": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ic-stepper"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ic-stepper":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, IcStepper$1);
+      }
+      break;
+  } });
+}
+
+const IcStepper = IcStepper$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { IcStepper, defineCustomElement };
+
+//# sourceMappingURL=ic-stepper.js.map

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

@@ -0,0 +1 @@
+{"file":"ic-stepper.js","mappings":"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","names":["IcStepper"],"sources":["./src/components/ic-stepper/ic-stepper.css?tag=ic-stepper&encapsulation=shadow","./src/components/ic-stepper/ic-stepper.tsx"],"sourcesContent":[":host {\n  display: flex;\n  width: 100%;\n}\n\n.step-item-list {\n  display: flex;\n  margin: 0;\n  padding: 0;\n}\n\n:host(.aligned-full-width) .step-item-list {\n  flex: auto;\n}\n","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}

package/dist/components/ic-switch.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface IcSwitch extends Components.IcSwitch, HTMLElement {}
+export const IcSwitch: {
+  prototype: IcSwitch;
+  new (): IcSwitch;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ic-switch.js

@@ -0,0 +1,102 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { a as onComponentRequiredPropUndefined, r as renderHiddenInput, d as getInputDescribedByText } from './helpers.js';
+import { d as defineCustomElement$3 } from './ic-input-label2.js';
+import { d as defineCustomElement$2 } from './ic-typography2.js';
+
+const icSwitchCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:inline-block}input{overflow:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none}.ic-switch-container{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ic-space-xxs);cursor:pointer}.ic-switch-label{margin-left:var(--ic-space-xxs);margin-bottom:var(--ic-space-sm)}.ic-switch-label-dense{margin-bottom:10px}.ic-switch-toggle{display:flex;align-items:center;justify-content:space-around;width:64px;height:var(--ic-space-xl);position:relative;border-radius:100vw;background-color:var(--ic-architectural-200);border:1px solid var(--ic-architectural-700);box-sizing:border-box;transition:var(--ic-transition-duration-fast)}.ic-switch-line-break{flex:1 0 100%}.ic-switch-checked-status{padding-left:var(--ic-space-xxs)}.ic-switch-toggle::before{content:\"\";width:21.33px;height:21.33px;border-radius:50%;position:absolute;z-index:2;top:50%;left:5.33px;transform:translate(0, -50%);background-color:var(--ic-architectural-700);transition:var(--ic-transition-duration-slow)}.ic-switch-icon{display:inline-block;vertical-align:middle;width:10px;height:10px}.ic-switch-icon-circle,.ic-switch-icon-line{stroke-width:1}.ic-switch-icon-circle{stroke:var(--ic-architectural-700)}.ic-switch-icon-line{stroke:var(--ic-architectural-white)}@media (prefers-reduced-motion: reduce){.ic-switch-toggle::before{transition-duration:0ms}}.ic-switch-input:checked+.ic-switch-toggle{background-color:var(--ic-action-default);border:none}.ic-switch-input:checked+.ic-switch-toggle::before{transform:translate(var(--ic-space-xl), -50%);background-color:var(--ic-architectural-white)}.ic-switch-input:not([disabled])+.ic-switch-toggle:hover::before{box-shadow:0 0 0 12px 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)}.ic-switch-input:not([disabled]):checked+.ic-switch-toggle:hover::before{box-shadow:0 0 0 12px 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)}.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),\n    0 0 0 3px var(--ic-action-default),\n    0 0 0 8px var(--ic-action-default-active-alpha)}.ic-switch-disabled{cursor:default}.ic-switch-disabled .ic-switch-icon-circle{stroke:var(--ic-architectural-300)}.ic-switch-disabled .ic-switch-icon-line{stroke:var(--ic-action-default-bg-active)}.ic-switch-input:disabled+.ic-switch-toggle{background-color:var(--ic-architectural-80);border:1px dashed var(--ic-architectural-300)}.ic-switch-input:disabled~.ic-switch-checked-status{color:var(--ic-architectural-300)}.ic-switch-input:disabled+.ic-switch-toggle::before{background-color:var(--ic-architectural-300)}.ic-switch-input:disabled:checked+.ic-switch-toggle{background-color:var(--ic-status-info-background);border:1px dashed #98c9f5}.ic-switch-input:disabled:checked+.ic-switch-toggle::before{background-color:var(--ic-architectural-white)}.ic-switch-dense{gap:var(--ic-space-xxxs)}.ic-switch-dense .ic-switch-checked-status{padding-left:6px}.ic-switch-dense .ic-switch-toggle{width:var(--ic-space-xxl);height:var(--ic-space-lg)}.ic-switch-dense .ic-switch-toggle::before{width:var(--ic-space-md);height:var(--ic-space-md);left:var(--ic-space-xxs)}.ic-switch-dense .ic-switch-input:checked+.ic-switch-toggle::before{transform:translate(var(--ic-space-lg), -50%)}::slotted(*){margin-left:var(--ic-space-sm)}";
+
+let inputIds = 0;
+const Switch = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.icChange = createEvent(this, "icChange", 7);
+    this.icFocus = createEvent(this, "icFocus", 7);
+    this.icBlur = createEvent(this, "icBlur", 7);
+    this.inputId = `ic-switch-input-${inputIds++}`;
+    this.handleChange = () => {
+      this.checkedState = !this.checkedState;
+      this.icChange.emit({
+        checked: this.checkedState,
+        value: this.value,
+      });
+    };
+    this.onFocus = () => {
+      this.icFocus.emit();
+    };
+    this.onBlur = () => {
+      this.icBlur.emit();
+    };
+    this.label = undefined;
+    this.hideLabel = false;
+    this.helperText = "";
+    this.checked = null;
+    this.dense = false;
+    this.disabled = false;
+    this.name = this.inputId;
+    this.showState = false;
+    this.value = "on";
+    this.checkedState = false;
+  }
+  componentDidLoad() {
+    onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Switch");
+  }
+  render() {
+    const { label, checked, checkedState, dense, disabled, name, showState, value, hideLabel, helperText, inputId, } = this;
+    const internalChecked = checked == null ? checkedState : checked;
+    renderHiddenInput(true, this.el, name, internalChecked ? value : "", disabled);
+    const describedBy = getInputDescribedByText(inputId, helperText !== "", false);
+    return (h(Host, null, h("label", { class: {
+        ["ic-switch-container"]: true,
+        ["ic-switch-disabled"]: disabled,
+        ["ic-switch-dense"]: dense,
+      }, htmlFor: inputId }, !hideLabel && (h("ic-input-label", { for: inputId, label: label, helperText: helperText, readonly: true, disabled: disabled, class: {
+        ["ic-switch-label"]: true,
+        ["ic-switch-label-dense"]: dense,
+      } })), !hideLabel && h("span", { class: "ic-switch-line-break" }), h("input", { checked: internalChecked, disabled: disabled, "aria-label": label, "aria-checked": internalChecked ? "true" : "false", "aria-describedby": describedBy, role: "switch", class: "ic-switch-input", type: "checkbox", name: "toggle", id: inputId, onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.handleChange }), h("span", { class: "ic-switch-toggle" }, h("svg", { class: "ic-switch-icon", "aria-hidden": "true", focusable: "false", viewBox: "0 0 10 10", xmlns: "http://www.w3.org/2000/svg" }, h("line", { class: "ic-switch-icon-line", x1: "9", y1: dense ? "2" : "1", x2: "9", y2: dense ? "8" : "9" })), h("svg", { class: "ic-switch-icon", "aria-hidden": "true", focusable: "false", viewBox: "0 0 10 10", xmlns: "http://www.w3.org/2000/svg" }, h("circle", { class: "ic-switch-icon-circle", fill: "none", cx: "5", cy: "5", r: dense ? "3.335" : "4.445" }))), h("slot", { name: "right-adornment" }), showState && (h("ic-typography", { "aria-hidden": "true", variant: "label", class: "ic-switch-checked-status" }, internalChecked ? "On" : "Off")))));
+  }
+  get el() { return this; }
+  static get style() { return icSwitchCss; }
+}, [1, "ic-switch", {
+    "label": [1],
+    "hideLabel": [4, "hide-label"],
+    "helperText": [1, "helper-text"],
+    "checked": [4],
+    "dense": [4],
+    "disabled": [4],
+    "name": [1],
+    "showState": [4, "show-state"],
+    "value": [1],
+    "checkedState": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ic-switch", "ic-input-label", "ic-typography"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ic-switch":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Switch);
+      }
+      break;
+    case "ic-input-label":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "ic-typography":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const IcSwitch = Switch;
+const defineCustomElement = defineCustomElement$1;
+
+export { IcSwitch, defineCustomElement };
+
+//# sourceMappingURL=ic-switch.js.map

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

@@ -0,0 +1 @@
+{"file":"ic-switch.js","mappings":"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","names":[],"sources":["./src/components/ic-switch/ic-switch.css?tag=ic-switch&encapsulation=shadow","./src/components/ic-switch/ic-switch.tsx"],"sourcesContent":["@import \"../../global/normalise.css\";\n\n:host {\n  display: inline-block;\n}\n\ninput {\n  overflow: hidden;\n  appearance: none;\n}\n\n.ic-switch-container {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--ic-space-xxs);\n  cursor: pointer;\n}\n\n.ic-switch-label {\n  margin-left: var(--ic-space-xxs);\n  margin-bottom: var(--ic-space-sm);\n}\n\n.ic-switch-label-dense {\n  margin-bottom: 10px;\n}\n\n.ic-switch-toggle {\n  display: flex;\n  align-items: center;\n  justify-content: space-around;\n  width: 64px;\n  height: var(--ic-space-xl);\n  position: relative;\n  border-radius: 100vw;\n  background-color: var(--ic-architectural-200);\n  border: 1px solid var(--ic-architectural-700);\n  box-sizing: border-box;\n  transition: var(--ic-transition-duration-fast);\n}\n\n.ic-switch-line-break {\n  flex: 1 0 100%;\n}\n\n.ic-switch-checked-status {\n  padding-left: var(--ic-space-xxs);\n}\n\n.ic-switch-toggle::before {\n  content: \"\";\n  width: 21.33px;\n  height: 21.33px;\n  border-radius: 50%;\n  position: absolute;\n  z-index: 2;\n  top: 50%;\n  left: 5.33px;\n  transform: translate(0, -50%);\n  background-color: var(--ic-architectural-700);\n  transition: var(--ic-transition-duration-slow);\n}\n\n.ic-switch-icon {\n  display: inline-block;\n  vertical-align: middle;\n  width: 10px;\n  height: 10px;\n}\n\n.ic-switch-icon-circle,\n.ic-switch-icon-line {\n  stroke-width: 1;\n}\n\n.ic-switch-icon-circle {\n  stroke: var(--ic-architectural-700);\n}\n\n.ic-switch-icon-line {\n  stroke: var(--ic-architectural-white);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .ic-switch-toggle::before {\n    transition-duration: 0ms;\n  }\n}\n\n.ic-switch-input:checked + .ic-switch-toggle {\n  background-color: var(--ic-action-default);\n  border: none;\n}\n\n.ic-switch-input:checked + .ic-switch-toggle::before {\n  transform: translate(var(--ic-space-xl), -50%);\n  background-color: var(--ic-architectural-white);\n}\n\n.ic-switch-input:not([disabled]) + .ic-switch-toggle:hover::before {\n  box-shadow: 0 0 0 12px var(--ic-action-dark-bg-hover);\n}\n\n.ic-switch-input:not([disabled]) + .ic-switch-toggle:active::before {\n  box-shadow: 0 0 0 12px var(--ic-action-dark-bg-active);\n}\n\n.ic-switch-input:not([disabled]):checked + .ic-switch-toggle:hover::before {\n  box-shadow: 0 0 0 12px var(--ic-action-default-bg-hover);\n}\n\n.ic-switch-input:not([disabled]):checked + .ic-switch-toggle:active::before {\n  box-shadow: 0 0 0 12px var(--ic-action-default-bg-active);\n}\n\n.ic-switch-input:focus:not([disabled]) + .ic-switch-toggle,\n.ic-switch-input:focus-visible:not([disabled]) + .ic-switch-toggle {\n  box-shadow: 0 0 0 1px var(--ic-architectural-white),\n    0 0 0 3px var(--ic-action-default),\n    0 0 0 8px var(--ic-action-default-active-alpha);\n}\n\n.ic-switch-disabled {\n  cursor: default;\n}\n\n.ic-switch-disabled .ic-switch-icon-circle {\n  stroke: var(--ic-architectural-300);\n}\n\n.ic-switch-disabled .ic-switch-icon-line {\n  stroke: var(--ic-action-default-bg-active);\n}\n\n.ic-switch-input:disabled + .ic-switch-toggle {\n  background-color: var(--ic-architectural-80);\n  border: 1px dashed var(--ic-architectural-300);\n}\n\n.ic-switch-input:disabled ~ .ic-switch-checked-status {\n  color: var(--ic-architectural-300);\n}\n\n.ic-switch-input:disabled + .ic-switch-toggle::before {\n  background-color: var(--ic-architectural-300);\n}\n\n.ic-switch-input:disabled:checked + .ic-switch-toggle {\n  background-color: var(--ic-status-info-background);\n  border: 1px dashed #98c9f5;\n}\n\n.ic-switch-input:disabled:checked + .ic-switch-toggle::before {\n  background-color: var(--ic-architectural-white);\n}\n\n.ic-switch-dense {\n  gap: var(--ic-space-xxxs);\n}\n\n.ic-switch-dense .ic-switch-checked-status {\n  padding-left: 6px;\n}\n\n.ic-switch-dense .ic-switch-toggle {\n  width: var(--ic-space-xxl);\n  height: var(--ic-space-lg);\n}\n\n.ic-switch-dense .ic-switch-toggle::before {\n  width: var(--ic-space-md);\n  height: var(--ic-space-md);\n  left: var(--ic-space-xxs);\n}\n\n.ic-switch-dense .ic-switch-input:checked + .ic-switch-toggle::before {\n  transform: translate(var(--ic-space-lg), -50%);\n}\n\n::slotted(*) {\n  margin-left: var(--ic-space-sm);\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  State,\n  Element,\n  Event,\n  EventEmitter,\n} from \"@stencil/core\";\nimport {\n  getInputDescribedByText,\n  onComponentRequiredPropUndefined,\n  renderHiddenInput,\n} from \"../../utils/helpers\";\nimport { IcSwitchChangeEventDetail } from \"./ic-switch.types\";\n\nlet inputIds = 0;\n\n/**\n * @slot right-adornment - Content is placed to the right of switch before state label.\n */\n@Component({\n  tag: \"ic-switch\",\n  styleUrl: \"ic-switch.css\",\n  shadow: true,\n})\nexport class Switch {\n  private inputId = `ic-switch-input-${inputIds++}`;\n\n  @Element() el: HTMLIcSwitchElement;\n\n  /**\n   * Applies an aria-label to the component, for when no visual 'name' is provided.\n   */\n  @Prop() label!: string;\n\n  /**\n   * Hides the label and applies the required label value as an aria-label.\n   */\n  @Prop() hideLabel?: boolean = false;\n  /**\n   * Provide helper text to display additional field guidance.\n   */\n  @Prop() helperText?: string = \"\";\n  /**\n   * If true, the component is checked, if null the components state will be uncontrolled.\n   */\n  @Prop() checked?: boolean | null = null;\n  /**\n   * If true, the component reduces in size to the dense state.\n   */\n  @Prop() dense?: boolean = false;\n  /**\n   * If true, the component is not interactive.\n   */\n  @Prop() disabled?: boolean = false;\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name?: string = this.inputId;\n  /**\n   * If true, the component will render the On/Off state text.\n   */\n  @Prop() showState?: boolean = false;\n\n  /**\n   * The value of the toggle does not mean if it's checked or not, use the `checked`\n   * property for that.\n   *\n   * The value of a toggle is analogous to the value of a `<input type=\"checkbox\">`,\n   * it's only used when the toggle participates in a native `<form>`.\n   */\n  @Prop() value?: string | null = \"on\";\n\n  /**\n   * Emitted when the value property has changed.\n   */\n  @Event() icChange!: EventEmitter<IcSwitchChangeEventDetail>;\n\n  /**\n   * Emitted when the toggle has focus.\n   */\n  @Event() icFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the toggle loses focus.\n   */\n  @Event() icBlur!: EventEmitter<void>;\n\n  @State() checkedState: boolean = false;\n\n  private handleChange = () => {\n    this.checkedState = !this.checkedState;\n    this.icChange.emit({\n      checked: this.checkedState,\n      value: this.value,\n    });\n  };\n\n  private onFocus = () => {\n    this.icFocus.emit();\n  };\n\n  private onBlur = () => {\n    this.icBlur.emit();\n  };\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Switch\"\n    );\n  }\n\n  render() {\n    const {\n      label,\n      checked,\n      checkedState,\n      dense,\n      disabled,\n      name,\n      showState,\n      value,\n      hideLabel,\n      helperText,\n      inputId,\n    } = this;\n\n    const internalChecked = checked == null ? checkedState : checked;\n\n    renderHiddenInput(\n      true,\n      this.el,\n      name,\n      internalChecked ? value : \"\",\n      disabled\n    );\n\n    const describedBy = getInputDescribedByText(\n      inputId,\n      helperText !== \"\",\n      false\n    );\n\n    return (\n      <Host>\n        <label\n          class={{\n            [\"ic-switch-container\"]: true,\n            [\"ic-switch-disabled\"]: disabled,\n            [\"ic-switch-dense\"]: dense,\n          }}\n          htmlFor={inputId}\n        >\n          {!hideLabel && (\n            <ic-input-label\n              for={inputId}\n              label={label}\n              helperText={helperText}\n              readonly={true}\n              disabled={disabled}\n              class={{\n                [\"ic-switch-label\"]: true,\n                [\"ic-switch-label-dense\"]: dense,\n              }}\n            ></ic-input-label>\n          )}\n          {!hideLabel && <span class=\"ic-switch-line-break\"></span>}\n          <input\n            checked={internalChecked}\n            disabled={disabled}\n            aria-label={label}\n            aria-checked={internalChecked ? \"true\" : \"false\"}\n            aria-describedby={describedBy}\n            role=\"switch\"\n            class=\"ic-switch-input\"\n            type=\"checkbox\"\n            name=\"toggle\"\n            id={inputId}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n            onChange={this.handleChange}\n          />\n          <span class=\"ic-switch-toggle\">\n            <svg\n              class=\"ic-switch-icon\"\n              aria-hidden=\"true\"\n              focusable=\"false\"\n              viewBox=\"0 0 10 10\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <line\n                class=\"ic-switch-icon-line\"\n                x1=\"9\"\n                y1={dense ? \"2\" : \"1\"}\n                x2=\"9\"\n                y2={dense ? \"8\" : \"9\"}\n              />\n            </svg>\n            <svg\n              class=\"ic-switch-icon\"\n              aria-hidden=\"true\"\n              focusable=\"false\"\n              viewBox=\"0 0 10 10\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <circle\n                class=\"ic-switch-icon-circle\"\n                fill=\"none\"\n                cx=\"5\"\n                cy=\"5\"\n                r={dense ? \"3.335\" : \"4.445\"}\n              />\n            </svg>\n          </span>\n          <slot name=\"right-adornment\"></slot>\n          {showState && (\n            <ic-typography\n              aria-hidden=\"true\"\n              variant=\"label\"\n              class=\"ic-switch-checked-status\"\n            >\n              {internalChecked ? \"On\" : \"Off\"}\n            </ic-typography>\n          )}\n        </label>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/ic-tab-context.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface IcTabContext extends Components.IcTabContext, HTMLElement {}
+export const IcTabContext: {
+  prototype: IcTabContext;
+  new (): IcTabContext;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;