@ukic/web-components 3.4.0 → 3.5.0

package/dist/components/ic-horizontal-scroll2.js

@@ -170,22 +170,22 @@ const HorizontalScroll = /*@__PURE__*/ proxyCustomElement(class HorizontalScroll
     }
     render() {
         const { firstItemVisible, lastItemVisible, itemOverflow } = this;
-        return (h(Host, { key: '263be65dcc0cb0a113e7dd92a8b12c440b9867ea', class: {
+        return (h(Host, { key: '3c307f5bddcc7b6c8ab7764d08504585f61e203d', class: {
                 ["ic-horizontal-scroll-visible"]: itemOverflow,
                 ["ic-horizontal-scroll-dark"]: this.appearance === IcBrandForegroundEnum.Dark,
                 ["ic-horizontal-scroll-light"]: this.appearance === IcBrandForegroundEnum.Light,
                 [`ic-theme-${this.theme}`]: this.theme !== "inherit",
-            } }, h("div", { key: '2250a0f96500b700454e012e2a918e2ace6a6f68', "aria-hidden": "true", class: {
+            } }, h("div", { key: 'f4bda7e5c0108e986191cde56ef8e255a80b604f', "aria-hidden": "true", class: {
                 ["scroll-container-left"]: true,
                 ["hidden"]: !itemOverflow,
                 ["disabled"]: firstItemVisible,
-            }, role: "tab" }, h("ic-button", { key: 'd55b6d37d7e9a9eea918def18aea64060db6c2ba', class: "scroll-arrow", variant: "icon-tertiary", "aria-label": "Scroll left", theme: this.theme === "light" || this.theme === "inherit"
+            }, role: "tab" }, h("ic-button", { key: '5eb199e69ca500c8e84e9b79cec4a3448b604c39', class: "scroll-arrow", variant: "icon-tertiary", "aria-label": "Scroll left", theme: this.theme === "light" || this.theme === "inherit"
                 ? "dark"
-                : "light", monochrome: this.monochrome, innerHTML: LeftArrow, disabled: firstItemVisible, tabindex: "-1", onClick: this.scrollLeft, onMouseDown: this.leftArrowMouseDownHandler }), h("span", { key: '14d21b70c82e36f64cf383dc8371227b3e504312', class: "scroll-splitter-left" })), h("slot", { key: 'a40cc561072ffcb5aacb27b10b815ec92f3f7ded' }), h("div", { key: '212d94aca6d135dfff9664e69ec9eab42ae7ca56', "aria-hidden": "true", class: {
+                : "light", monochrome: this.monochrome, innerHTML: LeftArrow, disabled: firstItemVisible, tabindex: "-1", onClick: this.scrollLeft, onMouseDown: this.leftArrowMouseDownHandler }), h("span", { key: 'c939c5db95cc4b61645045ef498cc9b80c4f3d69', class: "scroll-splitter-left" })), h("slot", { key: '3ded812f11a7bbdc25157d840ee32f23ed58131b' }), h("div", { key: 'e713490eb2995ff19ec70bf0a098193eaa9829a8', "aria-hidden": "true", class: {
                 ["scroll-container-right"]: true,
                 ["hidden"]: !itemOverflow,
                 ["disabled"]: lastItemVisible,
-            }, role: "tab" }, h("span", { key: 'bd5e6c2dc94e2cebe6e9459de52e615982048a27', class: "scroll-splitter-right" }), h("ic-button", { key: 'be8f57d173b04cca06d0654054bb3451a6f40c70', class: "scroll-arrow", variant: "icon-tertiary", "aria-label": "Scroll right", theme: this.theme === "light" || this.theme === "inherit"
+            }, role: "tab" }, h("span", { key: 'a2427e872d8ab79ef0022ccb216238867e49065c', class: "scroll-splitter-right" }), h("ic-button", { key: 'a58d98e7d695fe15e3c085f1bec0079045817b2d', class: "scroll-arrow", variant: "icon-tertiary", "aria-label": "Scroll right", theme: this.theme === "light" || this.theme === "inherit"
                 ? "dark"
                 : "light", monochrome: this.monochrome, innerHTML: RightArrow, disabled: lastItemVisible, tabindex: "-1", onClick: this.scrollRight, onMouseDown: this.rightArrowMouseDownHandler }))));
     }

package/dist/components/ic-input-component-container2.js

@@ -49,15 +49,15 @@ const InputComponentContainer = /*@__PURE__*/ proxyCustomElement(class InputComp
     }
     render() {
         const { size, validationStatus, disabled, readonly, multiLine, fullWidth, validationInline, } = this;
-        return (h(Host, { key: '3349803b2fc3756e616a3e6e9f88439c3d360897', class: {
+        return (h(Host, { key: 'fc70461ae7d3922f07aa5a85209e376d42bfc451', class: {
                 [`ic-input-component-container-${size}`]: true,
                 [`ic-input-component-container-${validationStatus}`]: validationStatus !== "" && !disabled && !readonly,
                 "ic-input-component-container-disabled": !!disabled,
                 "ic-input-component-container-readonly": !!readonly,
                 "ic-input-component-container-multiline": !!multiLine,
                 "ic-input-component-container-full-width": !!fullWidth,
-            }, "aria-disabled": disabled ? "true" : null }, h("div", { key: 'bf85d48b1507e4c7d8394e067314e383e77ffb72', class: "focus-indicator" }, slotHasContent(this.el, "left-icon") && (h("div", { key: '7660d9c72526a8bf34e88488884933cc7a5a96cd', class: "icon-container" }, h("slot", { key: 'dc31f454f708ecbcf821cb94cf4d8b5b354d149f', name: "left-icon" }))), h("slot", { key: '92265e4967394e33cdf8763bd8c8b433dbe0536e' }), validationInline &&
-            validationStatus === IcInformationStatus.Success && (h("span", { key: 'ecefbb2eaf920a2300bb9a30e20c18a86754fba0', class: "inline-success", innerHTML: successIcon })))));
+            }, "aria-disabled": disabled ? "true" : null }, h("div", { key: '20934b81740e6c907bff86cc706d3aafe3a790df', class: "focus-indicator" }, slotHasContent(this.el, "left-icon") && (h("div", { key: '3577416fc719a575372188c43a78ac945b1b1526', class: "icon-container" }, h("slot", { key: '36ee3e5c85ec77c69f88c2b74d272bdb6ee42ca1', name: "left-icon" }))), h("slot", { key: 'e0a79f50c8ba34c0d989e2402df8b00587c5878f' }), validationInline &&
+            validationStatus === IcInformationStatus.Success && (h("span", { key: 'b156fb5bb6fcfec8c6dec6febdeea6d2adc7e009', class: "inline-success", innerHTML: successIcon })))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/ic-input-container2.js

@@ -17,11 +17,11 @@ const InputContainer = /*@__PURE__*/ proxyCustomElement(class InputContainer ext
         this.readonly = false;
     }
     render() {
-        return (h(Host, { key: 'b990f9f26644a727f8d0f086c88dfbb18528ca1a' }, h("div", { key: '32d9cce26c3e720e2d3343dc03fc64cc9436621a', class: {
+        return (h(Host, { key: '49cd31d8dca09cc4b2f49e0b2e7829bb1771a5d6' }, h("div", { key: 'bb0e3a80161a86b40e0dc424264e71cf6c95c88a', class: {
                 ["component-container"]: true,
                 ["disabled"]: !!this.disabled,
                 ["readonly"]: !!this.readonly,
-            } }, h("slot", { key: '65cfdbd533ceef8f6cfbdfa8df68789ae5f39804' }))));
+            } }, h("slot", { key: '4916ff0aebd6632d6e6f5daaa3c318e1e696ff2f' }))));
     }
     static get style() { return IcInputContainerStyle0; }
 }, [4, "ic-input-container", {

package/dist/components/ic-input-label2.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { o as onComponentRequiredPropUndefined, x as getInputHelperTextID } from './helpers.js';
 import { d as defineCustomElement$1 } from './ic-typography2.js';
 
-const icInputLabelCss = "ic-input-label{margin-bottom:var(--ic-space-xs);--ic-typography-color:var(\n    --ic-input-label-text-color,\n    var(--ic-color-text-primary)\n  )}ic-input-label.with-helper{margin-bottom:var(--ic-space-xxxs)}ic-input-label.ic-input-label-readonly{--ic-typography-color:var(--ic-input-label-readonly-typography-color)}ic-input-label .helpertext{margin-top:var(--ic-space-xxxs);padding-bottom:var(--ic-input-label-helpertext-padding, 0);--ic-typography-color:var(\n    --ic-input-label-helper-text-color,\n    var(--ic-color-text-secondary)\n  )}ic-input-label .helpertext-normal{--ic-typography-color:var(\n    --ic-input-label-helper-text-color,\n    var(--ic-color-text-secondary)\n  )}ic-input-label .helpertext-readonly{--ic-typography-color:var(--ic-input-label-readonly-helpertext-color)}ic-input-label .readonly-label{--ic-typography-color:var(--ic-input-label-readonly-label-color)}ic-input-label .error-label{--ic-typography-color:var(--ic-input-label-error-label-color)}";
+const icInputLabelCss = "ic-input-label{margin-bottom:var(--ic-space-xs);--ic-typography-color:var(\n    --ic-input-label-text-color,\n    var(--ic-color-text-primary)\n  )}ic-input-label.with-helper{margin-bottom:var(--ic-space-xxxs)}ic-input-label.ic-input-label-readonly{--ic-typography-color:var(--ic-input-label-readonly-typography-color)}ic-input-label .helpertext,ic-input-label .helpertext ::slotted(*){margin-top:var(--ic-space-xxxs);padding-bottom:var(--ic-input-label-helpertext-padding, 0);--ic-typography-color:var(\n    --ic-input-label-helper-text-color,\n    var(--ic-color-text-secondary)\n  )}ic-input-label .helpertext-normal{--ic-typography-color:var(\n    --ic-input-label-helper-text-color,\n    var(--ic-color-text-secondary)\n  )}ic-input-label .helpertext-readonly{--ic-typography-color:var(--ic-input-label-readonly-helpertext-color)}ic-input-label .readonly-label{--ic-typography-color:var(--ic-input-label-readonly-label-color)}ic-input-label .error-label{--ic-typography-color:var(--ic-input-label-error-label-color)}";
 const IcInputLabelStyle0 = icInputLabelCss;
 
 const InputLabel = /*@__PURE__*/ proxyCustomElement(class InputLabel extends HTMLElement {
@@ -37,6 +37,25 @@ const InputLabel = /*@__PURE__*/ proxyCustomElement(class InputLabel extends HTM
          * @internal If `true`, wraps label text in label tag
          */
         this.useLabelTag = true;
+        this.isHelperTextSlotUsed = (slot) => {
+            const assignedEls = slot === null || slot === void 0 ? void 0 : slot.assignedElements();
+            if (assignedEls && assignedEls.length) {
+                for (const el of assignedEls) {
+                    if (el.tagName === "SLOT") {
+                        // Recursion needed for when slot is forwarded multiple times - through child components
+                        // (e.g. in date picker)
+                        if (this.isHelperTextSlotUsed(el)) {
+                            return true;
+                        }
+                    }
+                    else {
+                        // Found an assigned element which is not a nested <slot>
+                        return true;
+                    }
+                }
+            }
+            return false;
+        };
     }
     componentDidLoad() {
         onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Input Label");
@@ -44,21 +63,25 @@ const InputLabel = /*@__PURE__*/ proxyCustomElement(class InputLabel extends HTM
     render() {
         const { disabled, readonly, label, required, helperText, status, hideLabel, useLabelTag, } = this;
         const labelText = required ? label + " *" : label;
-        return (h(Host, { key: '5f5a9e086fe974f30c17fefc545d46bcff03aedd', class: {
+        const helperTextId = this.for && getInputHelperTextID(this.for);
+        const helperTextClass = {
+            helpertext: true,
+            "helpertext-normal": !disabled && !readonly,
+            "helpertext-readonly": readonly,
+        };
+        const helperTextSlot = this.el.querySelector("slot[name='helper-text']");
+        return (h(Host, { key: 'f03d8032ac769d4ecea37fe7a60e9d5acea54cd9', class: {
                 "ic-input-label-disabled": !!disabled,
                 "ic-input-label-readonly": readonly,
-                "with-helper": helperText !== "",
-            } }, !hideLabel && (h("ic-typography", { key: '6e6caa0f10a437753996c84a66b980582cddcc30', variant: "label", class: {
+                "with-helper": this.isHelperTextSlotUsed(helperTextSlot) || helperText !== "",
+            } }, !hideLabel && (h("ic-typography", { key: '7af61c1f2a1b9068fb9a9b649f60da1784207aa3', variant: "label", class: {
                 "readonly-label": readonly,
                 "error-label": status === "error" && !(readonly || disabled),
-            } }, readonly || !useLabelTag ? (`${labelText}`) : (h("label", { htmlFor: this.for }, labelText)))), helperText !== "" && (h("ic-typography", { key: 'e6a04af0aa3d09deb034217dcb35b47836bf13f3', variant: "caption", class: {
-                helpertext: true,
-                "helpertext-normal": !disabled && !readonly,
-                "helpertext-readonly": readonly,
-            } }, h("span", { key: '70cdef7f1ef75572ab4f9455e4b5b3401ce10950', id: this.for && getInputHelperTextID(this.for) }, helperText)))));
+            } }, readonly || !useLabelTag ? (`${labelText}`) : (h("label", { htmlFor: this.for }, labelText)))), this.isHelperTextSlotUsed(helperTextSlot) ? (h("span", { id: helperTextId, class: helperTextClass }, h("slot", { name: "helper-text" }))) : (helperText !== "" && (h("ic-typography", { variant: "caption", class: helperTextClass }, h("span", { id: helperTextId }, helperText))))));
     }
+    get el() { return this; }
     static get style() { return IcInputLabelStyle0; }
-}, [0, "ic-input-label", {
+}, [4, "ic-input-label", {
         "disabled": [4],
         "for": [1],
         "helperText": [1, "helper-text"],

package/dist/components/ic-input-label2.js.map

@@ -1 +1 @@
-{"file":"ic-input-label2.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,u9BAAu9B,CAAC;AACh/B,2BAAe,eAAe;;MCUjB,UAAU;IAJvB;;;;;;QAQU,aAAQ,GAAa,KAAK,CAAC;;;;QAU3B,eAAU,GAAW,EAAE,CAAC;;;;QAKxB,cAAS,GAAY,KAAK,CAAC;;;;QAU3B,aAAQ,GAAY,KAAK,CAAC;;;;QAK1B,aAAQ,GAAY,KAAK,CAAC;;;;QAK1B,WAAM,GAAiB,EAAE,CAAC;;;;QAK1B,gBAAW,GAAY,IAAI,CAAC;KA+DrC;IA7DC,gBAAgB;QACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EACzC,aAAa,CACd,CAAC;KACH;IAED,MAAM;QACJ,MAAM,EACJ,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,UAAU,EACV,MAAM,EACN,SAAS,EACT,WAAW,GACZ,GAAG,IAAI,CAAC;QACT,MAAM,SAAS,GAAG,QAAQ,GAAG,KAAK,GAAG,IAAI,GAAG,KAAK,CAAC;QAElD,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,yBAAyB,EAAE,CAAC,CAAC,QAAQ;gBACrC,yBAAyB,EAAE,QAAQ;gBACnC,aAAa,EAAE,UAAU,KAAK,EAAE;aACjC,IAEA,CAAC,SAAS,KACT,sEACE,OAAO,EAAC,OAAO,EACf,KAAK,EAAE;gBACL,gBAAgB,EAAE,QAAQ;gBAC1B,aAAa,EAAE,MAAM,KAAK,OAAO,IAAI,EAAE,QAAQ,IAAI,QAAQ,CAAC;aAC7D,IAEA,QAAQ,IAAI,CAAC,WAAW,IACvB,GAAG,SAAS,EAAE,KAEd,aAAO,OAAO,EAAE,IAAI,CAAC,GAAG,IAAG,SAAS,CAAS,CAC9C,CACa,CACjB,EAEA,UAAU,KAAK,EAAE,KAChB,sEACE,OAAO,EAAC,SAAS,EACjB,KAAK,EAAE;gBACL,UAAU,EAAE,IAAI;gBAChB,mBAAmB,EAAE,CAAC,QAAQ,IAAI,CAAC,QAAQ;gBAC3C,qBAAqB,EAAE,QAAQ;aAChC,IAED,6DAAM,EAAE,EAAE,IAAI,CAAC,GAAG,IAAI,oBAAoB,CAAC,IAAI,CAAC,GAAG,CAAC,IACjD,UAAU,CACN,CACO,CACjB,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/ic-input-label/ic-input-label.css?tag=ic-input-label","src/components/ic-input-label/ic-input-label.tsx"],"sourcesContent":["ic-input-label {\n  margin-bottom: var(--ic-space-xs);\n\n  --ic-typography-color: var(\n    --ic-input-label-text-color,\n    var(--ic-color-text-primary)\n  );\n}\n\nic-input-label.with-helper {\n  margin-bottom: var(--ic-space-xxxs);\n}\n\nic-input-label.ic-input-label-readonly {\n  --ic-typography-color: var(--ic-input-label-readonly-typography-color);\n}\n\nic-input-label .helpertext {\n  margin-top: var(--ic-space-xxxs);\n  padding-bottom: var(--ic-input-label-helpertext-padding, 0);\n\n  --ic-typography-color: var(\n    --ic-input-label-helper-text-color,\n    var(--ic-color-text-secondary)\n  );\n}\n\nic-input-label .helpertext-normal {\n  --ic-typography-color: var(\n    --ic-input-label-helper-text-color,\n    var(--ic-color-text-secondary)\n  );\n}\n\nic-input-label .helpertext-readonly {\n  --ic-typography-color: var(--ic-input-label-readonly-helpertext-color);\n}\n\nic-input-label .readonly-label {\n  --ic-typography-color: var(--ic-input-label-readonly-label-color);\n}\n\nic-input-label .error-label {\n  --ic-typography-color: var(--ic-input-label-error-label-color);\n}\n","import { Component, Host, Prop, h } from \"@stencil/core\";\n\nimport {\n  getInputHelperTextID,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\n\n@Component({\n  tag: \"ic-input-label\",\n  styleUrl: \"./ic-input-label.css\",\n})\nexport class InputLabel {\n  /**\n   * If `true`, the disabled state will be set.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * The ID of the form element the label is bound to.\n   */\n  @Prop() for?: string;\n\n  /**\n   * The helper text that will be displayed.\n   */\n  @Prop() helperText: string = \"\";\n\n  /**\n   * The label will be visually hidden.\n   */\n  @Prop() hideLabel: boolean = false;\n\n  /**\n   * The text content of the label.\n   */\n  @Prop() label!: string;\n\n  /**\n   * If `true`, the readonly state will be set.\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * If `true`, the input label will require a value.\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * The status of the label - e.g. 'error'.\n   */\n  @Prop() status: \"error\" | \"\" = \"\";\n\n  /**\n   * @internal If `true`, wraps label text in label tag\n   */\n  @Prop() useLabelTag: boolean = true;\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Input Label\"\n    );\n  }\n\n  render() {\n    const {\n      disabled,\n      readonly,\n      label,\n      required,\n      helperText,\n      status,\n      hideLabel,\n      useLabelTag,\n    } = this;\n    const labelText = required ? label + \" *\" : label;\n\n    return (\n      <Host\n        class={{\n          \"ic-input-label-disabled\": !!disabled,\n          \"ic-input-label-readonly\": readonly,\n          \"with-helper\": helperText !== \"\",\n        }}\n      >\n        {!hideLabel && (\n          <ic-typography\n            variant=\"label\"\n            class={{\n              \"readonly-label\": readonly,\n              \"error-label\": status === \"error\" && !(readonly || disabled),\n            }}\n          >\n            {readonly || !useLabelTag ? (\n              `${labelText}`\n            ) : (\n              <label htmlFor={this.for}>{labelText}</label>\n            )}\n          </ic-typography>\n        )}\n\n        {helperText !== \"\" && (\n          <ic-typography\n            variant=\"caption\"\n            class={{\n              helpertext: true,\n              \"helpertext-normal\": !disabled && !readonly,\n              \"helpertext-readonly\": readonly,\n            }}\n          >\n            <span id={this.for && getInputHelperTextID(this.for)}>\n              {helperText}\n            </span>\n          </ic-typography>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-input-label2.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,+/BAA+/B,CAAC;AACxhC,2BAAe,eAAe;;MCUjB,UAAU;IAJvB;;;;;;QAUU,aAAQ,GAAa,KAAK,CAAC;;;;QAU3B,eAAU,GAAW,EAAE,CAAC;;;;QAKxB,cAAS,GAAY,KAAK,CAAC;;;;QAU3B,aAAQ,GAAY,KAAK,CAAC;;;;QAK1B,aAAQ,GAAY,KAAK,CAAC;;;;QAK1B,WAAM,GAAiB,EAAE,CAAC;;;;QAK1B,gBAAW,GAAY,IAAI,CAAC;QAS5B,yBAAoB,GAAG,CAAC,IAAoB;YAClD,MAAM,WAAW,GAAI,IAAwB,aAAxB,IAAI,uBAAJ,IAAI,CAAsB,gBAAgB,EAAE,CAAC;YAClE,IAAI,WAAW,IAAI,WAAW,CAAC,MAAM,EAAE;gBACrC,KAAK,MAAM,EAAE,IAAI,WAAW,EAAE;oBAC5B,IAAI,EAAE,CAAC,OAAO,KAAK,MAAM,EAAE;;;wBAGzB,IAAI,IAAI,CAAC,oBAAoB,CAAC,EAAqB,CAAC,EAAE;4BACpD,OAAO,IAAI,CAAC;yBACb;qBACF;yBAAM;;wBAEL,OAAO,IAAI,CAAC;qBACb;iBACF;aACF;YACD,OAAO,KAAK,CAAC;SACd,CAAC;KA6DH;IArFC,gBAAgB;QACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EACzC,aAAa,CACd,CAAC;KACH;IAqBD,MAAM;QACJ,MAAM,EACJ,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,UAAU,EACV,MAAM,EACN,SAAS,EACT,WAAW,GACZ,GAAG,IAAI,CAAC;QACT,MAAM,SAAS,GAAG,QAAQ,GAAG,KAAK,GAAG,IAAI,GAAG,KAAK,CAAC;QAClD,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,IAAI,oBAAoB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAChE,MAAM,eAAe,GAAG;YACtB,UAAU,EAAE,IAAI;YAChB,mBAAmB,EAAE,CAAC,QAAQ,IAAI,CAAC,QAAQ;YAC3C,qBAAqB,EAAE,QAAQ;SAChC,CAAC;QAEF,MAAM,cAAc,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,0BAA0B,CAAC,CAAC;QAEzE,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,yBAAyB,EAAE,CAAC,CAAC,QAAQ;gBACrC,yBAAyB,EAAE,QAAQ;gBACnC,aAAa,EACX,IAAI,CAAC,oBAAoB,CAAC,cAAc,CAAC,IAAI,UAAU,KAAK,EAAE;aACjE,IAEA,CAAC,SAAS,KACT,sEACE,OAAO,EAAC,OAAO,EACf,KAAK,EAAE;gBACL,gBAAgB,EAAE,QAAQ;gBAC1B,aAAa,EAAE,MAAM,KAAK,OAAO,IAAI,EAAE,QAAQ,IAAI,QAAQ,CAAC;aAC7D,IAEA,QAAQ,IAAI,CAAC,WAAW,IACvB,GAAG,SAAS,EAAE,KAEd,aAAO,OAAO,EAAE,IAAI,CAAC,GAAG,IAAG,SAAS,CAAS,CAC9C,CACa,CACjB,EACA,IAAI,CAAC,oBAAoB,CAAC,cAAc,CAAC,IACxC,YAAM,EAAE,EAAE,YAAY,EAAE,KAAK,EAAE,eAAe,IAC5C,YAAM,IAAI,EAAC,aAAa,GAAQ,CAC3B,KAEP,UAAU,KAAK,EAAE,KACf,qBAAe,OAAO,EAAC,SAAS,EAAC,KAAK,EAAE,eAAe,IACrD,YAAM,EAAE,EAAE,YAAY,IAAG,UAAU,CAAQ,CAC7B,CACjB,CACF,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/ic-input-label/ic-input-label.css?tag=ic-input-label","src/components/ic-input-label/ic-input-label.tsx"],"sourcesContent":["ic-input-label {\n  margin-bottom: var(--ic-space-xs);\n\n  --ic-typography-color: var(\n    --ic-input-label-text-color,\n    var(--ic-color-text-primary)\n  );\n}\n\nic-input-label.with-helper {\n  margin-bottom: var(--ic-space-xxxs);\n}\n\nic-input-label.ic-input-label-readonly {\n  --ic-typography-color: var(--ic-input-label-readonly-typography-color);\n}\n\nic-input-label .helpertext,\nic-input-label .helpertext ::slotted(*) {\n  margin-top: var(--ic-space-xxxs);\n  padding-bottom: var(--ic-input-label-helpertext-padding, 0);\n\n  --ic-typography-color: var(\n    --ic-input-label-helper-text-color,\n    var(--ic-color-text-secondary)\n  );\n}\n\nic-input-label .helpertext-normal {\n  --ic-typography-color: var(\n    --ic-input-label-helper-text-color,\n    var(--ic-color-text-secondary)\n  );\n}\n\nic-input-label .helpertext-readonly {\n  --ic-typography-color: var(--ic-input-label-readonly-helpertext-color);\n}\n\nic-input-label .readonly-label {\n  --ic-typography-color: var(--ic-input-label-readonly-label-color);\n}\n\nic-input-label .error-label {\n  --ic-typography-color: var(--ic-input-label-error-label-color);\n}\n","import { Component, Element, Host, Prop, h } from \"@stencil/core\";\n\nimport {\n  getInputHelperTextID,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\n\n@Component({\n  tag: \"ic-input-label\",\n  styleUrl: \"./ic-input-label.css\",\n})\nexport class InputLabel {\n  @Element() el: HTMLIcInputLabelElement;\n\n  /**\n   * If `true`, the disabled state will be set.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * The ID of the form element the label is bound to.\n   */\n  @Prop() for?: string;\n\n  /**\n   * The helper text that will be displayed.\n   */\n  @Prop() helperText: string = \"\";\n\n  /**\n   * The label will be visually hidden.\n   */\n  @Prop() hideLabel: boolean = false;\n\n  /**\n   * The text content of the label.\n   */\n  @Prop() label!: string;\n\n  /**\n   * If `true`, the readonly state will be set.\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * If `true`, the input label will require a value.\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * The status of the label - e.g. 'error'.\n   */\n  @Prop() status: \"error\" | \"\" = \"\";\n\n  /**\n   * @internal If `true`, wraps label text in label tag\n   */\n  @Prop() useLabelTag: boolean = true;\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Input Label\"\n    );\n  }\n\n  private isHelperTextSlotUsed = (slot: Element | null): boolean => {\n    const assignedEls = (slot as HTMLSlotElement)?.assignedElements();\n    if (assignedEls && assignedEls.length) {\n      for (const el of assignedEls) {\n        if (el.tagName === \"SLOT\") {\n          // Recursion needed for when slot is forwarded multiple times - through child components\n          // (e.g. in date picker)\n          if (this.isHelperTextSlotUsed(el as HTMLSlotElement)) {\n            return true;\n          }\n        } else {\n          // Found an assigned element which is not a nested <slot>\n          return true;\n        }\n      }\n    }\n    return false;\n  };\n\n  render() {\n    const {\n      disabled,\n      readonly,\n      label,\n      required,\n      helperText,\n      status,\n      hideLabel,\n      useLabelTag,\n    } = this;\n    const labelText = required ? label + \" *\" : label;\n    const helperTextId = this.for && getInputHelperTextID(this.for);\n    const helperTextClass = {\n      helpertext: true,\n      \"helpertext-normal\": !disabled && !readonly,\n      \"helpertext-readonly\": readonly,\n    };\n\n    const helperTextSlot = this.el.querySelector(\"slot[name='helper-text']\");\n\n    return (\n      <Host\n        class={{\n          \"ic-input-label-disabled\": !!disabled,\n          \"ic-input-label-readonly\": readonly,\n          \"with-helper\":\n            this.isHelperTextSlotUsed(helperTextSlot) || helperText !== \"\",\n        }}\n      >\n        {!hideLabel && (\n          <ic-typography\n            variant=\"label\"\n            class={{\n              \"readonly-label\": readonly,\n              \"error-label\": status === \"error\" && !(readonly || disabled),\n            }}\n          >\n            {readonly || !useLabelTag ? (\n              `${labelText}`\n            ) : (\n              <label htmlFor={this.for}>{labelText}</label>\n            )}\n          </ic-typography>\n        )}\n        {this.isHelperTextSlotUsed(helperTextSlot) ? (\n          <span id={helperTextId} class={helperTextClass}>\n            <slot name=\"helper-text\"></slot>\n          </span>\n        ) : (\n          helperText !== \"\" && (\n            <ic-typography variant=\"caption\" class={helperTextClass}>\n              <span id={helperTextId}>{helperText}</span>\n            </ic-typography>\n          )\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/ic-input-validation2.js

@@ -33,13 +33,13 @@ const InputValidation = /*@__PURE__*/ proxyCustomElement(class InputValidation e
     render() {
         const { ariaLiveMode, fullWidth, status, message } = this;
         const displayIcon = status !== "" ? icon[status] : "";
-        return (h(Host, { key: '8d9f4b88cdd73d491aa836934b20855ac932c411', class: {
+        return (h(Host, { key: '2ab746f75a46252bc0755dfd28220dbe555b93b3', class: {
                 [`ic-input-validation-${status}`]: status !== "",
                 "ic-input-validation-full-width": !!fullWidth,
-            } }, displayIcon !== "" && (h("span", { key: '7d067283e8646242ac0bcd3dcb35a96f33d814b0', class: {
+            } }, displayIcon !== "" && (h("span", { key: 'fc02067a0c0f1e9672e190f1bd30774cd2cfcfe0', class: {
                 "status-icon": true,
                 [`icon-${status}`]: true,
-            }, innerHTML: displayIcon })), h("ic-typography", { key: 'c34f1a34c9dc0da4bcb68f775611a7dfcfc6f407', variant: "caption", class: "statustext" }, h("span", { key: 'a2e90e21fb834fea1b330c16606043afa1d42d01', "aria-live": ariaLiveMode, id: this.for && getInputValidationTextID(this.for) }, message)), h("slot", { key: 'b5562931123e8b745535ae5042d6c7fe8a994717', name: "validation-message-adornment" })));
+            }, innerHTML: displayIcon })), h("ic-typography", { key: 'f8d3c1d9d7f30e232ebbc827033ad318485f7c98', variant: "caption", class: "statustext" }, h("span", { key: '73b35c4a5c4dbe77fe4c71032020a0346e34fcfd', "aria-live": ariaLiveMode, id: this.for && getInputValidationTextID(this.for) }, message)), h("slot", { key: '629f37113c9354db274019eadc9ae7140adf921a', name: "validation-message-adornment" })));
     }
     get el() { return this; }
     static get style() { return IcInputValidationStyle0; }

package/dist/components/ic-link2.js

@@ -93,7 +93,7 @@ const Link = /*@__PURE__*/ proxyCustomElement(class Link extends HTMLElement {
     }
     render() {
         const { download, href, hreflang, referrerpolicy, rel, target, monochrome, theme, } = this;
-        return (h(Host, { key: '363a33f7c903d0ab7d4b1e6c29a9ea87075dc01b', class: {
+        return (h(Host, { key: '769bea68e79e8b28fb9c0ea007c24dd11968d332', class: {
                 ["ic-link"]: true,
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 ["ic-link-monochrome"]: !!monochrome,

package/dist/components/ic-loading-indicator2.js

@@ -1,14 +1,28 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$1 } from './ic-typography2.js';
 
-const icLoadingIndicatorCss = "/*! 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:block;--linear-border-radius:0.25rem;--inner-color:var(--ic-loading-indicator-inner-color);--outer-color:var(--ic-loading-indicator-outer-color);--label-color:var(--ic-loading-indicator-label-color);--margin:none;--linear-line-height:var(--ic-space-xs)}:host(.ic-loading-indicator-monochrome){--inner-color:var(--ic-loading-indicator-inner-color-monochrome);--outer-color:var(--ic-loading-indicator-outer-color-monochrome);--label-color:var(--ic-loading-indicator-label-color-monochrome)}.ic-loading-container{display:flex;flex-direction:column;justify-content:center;align-items:center}:host([size=\"small\"]){--circular-diameter:2.5rem;--linear-line-height:var(--ic-space-xxs)}:host([size=\"medium\"]){--circular-diameter:5rem}:host([size=\"large\"]){--circular-diameter:7.5rem}:host([size=\"icon\"]){display:inline-block;--margin:var(--ic-space-xxxs);--circular-diameter:1.25rem}:host(.ic-loading-indicator-label){--margin:0 0 var(--ic-space-xs) 0}.ic-loading-label{--ic-typography-color:var(--label-color);margin-left:var(--label-margin-left)}.ic-loading-circular-outer{height:var(--circular-diameter);width:var(--circular-diameter)}.ic-loading-circular-outer.indeterminate{animation:circular-animation 1s linear;animation-iteration-count:infinite}@keyframes circular-animation{100%{transform:rotate(360deg)}}.ic-loading-circular-outer,.ic-loading-linear-outer{margin:var(--margin)}.ic-loading-linear-outer{background-color:var(--outer-color);height:var(--linear-line-height);width:100%;border-radius:var(--linear-border-radius);overflow:hidden}.ic-loading-linear-inner{position:relative;height:100%;background-color:var(--inner-color);border-radius:var(--linear-border-radius)}.indeterminate>.ic-loading-linear-inner{animation:linear-animation 2s infinite}.determinate>.ic-loading-linear-inner{transition:width 0.5s;width:var(--linear-width)}:host(.ic-loading-indicator-full-width){--linear-border-radius:none}@keyframes linear-animation{0%{width:0%;left:-1%}25%{width:0%;left:-1%}50%{width:101%;left:-1%}75%{width:0%;left:101%}100%{width:0%;left:101%}}.ic-loading-circular-svg{position:relative;width:100%;height:100%;transform:rotate(-90deg)}.ic-loading-circular-svg circle{width:100%;height:100%;fill:none;stroke:var(--compact-step-outer-color, var(--outer-color));stroke-width:var(--circular-line-width);stroke-linecap:round}.ic-loading-circular-svg circle:nth-child(2){--circular-indeterminate:calc(\n    (0.25 * var(--stroke-dasharray)) - var(--stroke-dasharray)\n  );stroke-dasharray:var(--stroke-dasharray), var(--stroke-dasharray);stroke-dashoffset:var(--stroke-dashoffset, var(--circular-indeterminate));stroke:var(--compact-step-inner-color, var(--inner-color))}:host(.inner-label) .ic-loading-circular-inner{height:100%;display:grid}:host(.inner-label) .ic-loading-circular-svg,.inner-text{grid-column:1;grid-row:1}:host(.not-required.compact-step-progress-indicator) .ic-loading-circular-svg circle:nth-child(2){stroke:var(--ic-architectural-300)}.inner-text{display:flex;align-items:center;justify-content:center;width:var(--ic-space-lg);height:inherit;overflow:hidden;margin:auto;--ic-typography-color:var(\n    --ic-step-indicator-text-current,\n    var(--ic-status-info-default)\n  )}:host(.not-required.compact-step-progress-indicator) .inner-text{--ic-typography-color:var(--ic-step-indicator-text-disabled)}:host(.ic-loading-indicator-light.not-required.compact-step-progress-indicator) .inner-text{--ic-typography-color:var(--ic-architectural-400)}@media (forced-colors: active){.indeterminate>.ic-loading-circular-inner{forced-color-adjust:none}.ic-loading-linear-outer{border:var(--ic-border-hc)}.ic-loading-linear-inner{background-color:canvastext}.ic-loading-circular-svg circle{stroke:Background}.ic-loading-circular-svg circle:nth-child(2){stroke:canvastext}:host(.not-required.compact-step-progress-indicator) .ic-loading-circular-svg circle:nth-child(2){stroke:GrayText}}";
+const icLoadingIndicatorCss = "/*! 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:block;--linear-border-radius:0.25rem;--inner-color:var(--ic-loading-indicator-inner-color);--outer-color:var(--ic-loading-indicator-outer-color);--label-color:var(--ic-loading-indicator-label-color);--margin:none;--linear-line-height:var(--ic-space-xs)}:host(.ic-loading-indicator-monochrome){--inner-color:var(--ic-loading-indicator-inner-color-monochrome);--outer-color:var(--ic-loading-indicator-outer-color-monochrome);--label-color:var(--ic-loading-indicator-label-color-monochrome)}.ic-loading-container{display:flex;flex-direction:column;justify-content:center;align-items:center}:host([size=\"small\"]){--circular-diameter:2.5rem;--linear-line-height:var(--ic-space-xxs)}:host([size=\"medium\"]){--circular-diameter:5rem}:host([size=\"large\"]){--circular-diameter:7.5rem}:host([size=\"icon\"]){display:inline-block;--margin:var(--ic-space-xxxs);--circular-diameter:1.25rem}:host(.ic-loading-indicator-label){--margin:0 0 var(--ic-space-xs) 0}.ic-loading-label{--ic-typography-color:var(--label-color);margin-left:var(--label-margin-left)}.ic-loading-circular-outer{height:var(--circular-diameter);width:var(--circular-diameter)}.ic-loading-circular-outer.indeterminate{animation:circular-animation 1s linear;animation-iteration-count:infinite}@keyframes circular-animation{100%{transform:rotate(360deg)}}.ic-loading-circular-outer,.ic-loading-linear-outer{margin:var(--margin)}.ic-loading-linear-outer{background-color:var(--outer-color);height:var(--linear-line-height);width:100%;border-radius:var(--linear-border-radius);overflow:hidden}.ic-loading-linear-inner{position:relative;height:100%;background-color:var(--inner-color);border-radius:var(--linear-border-radius)}.indeterminate>.ic-loading-linear-inner{animation:linear-animation 2s infinite}.determinate>.ic-loading-linear-inner{transition:width 0.5s;width:var(--linear-width)}:host(.ic-loading-indicator-full-width){--linear-border-radius:none}@keyframes linear-animation{0%{width:0%;left:-1%}25%{width:0%;left:-1%}50%{width:101%;left:-1%}75%{width:0%;left:101%}100%{width:0%;left:101%}}.ic-loading-circular-svg{position:relative;width:100%;height:100%;transform:rotate(-90deg)}.ic-loading-circular-svg circle{width:100%;height:100%;fill:none;stroke:var(--compact-step-outer-color, var(--outer-color));stroke-width:var(--circular-line-width);stroke-linecap:round}.ic-loading-circular-svg circle:nth-child(2){--circular-indeterminate:calc(\n    (0.25 * var(--stroke-dasharray)) - var(--stroke-dasharray)\n  );stroke-dasharray:var(--stroke-dasharray), var(--stroke-dasharray);stroke-dashoffset:var(--stroke-dashoffset, var(--circular-indeterminate));stroke:var(--compact-step-inner-color, var(--inner-color))}.inner-label{height:100%;display:grid}.inner-label .ic-loading-circular-svg,.inner-text{grid-column:1;grid-row:1}:host(.not-required.compact-step-progress-indicator) .ic-loading-circular-svg circle:nth-child(2){stroke:var(--ic-architectural-300)}.inner-text{display:flex;align-items:center;justify-content:center;width:var(--ic-space-lg);height:inherit;overflow:hidden;margin:auto;--ic-typography-color:var(\n    --ic-step-indicator-text-current,\n    var(--ic-status-info-default)\n  )}:host(.not-required.compact-step-progress-indicator) .inner-text{--ic-typography-color:var(--ic-step-indicator-text-disabled)}:host(.ic-loading-indicator-light.not-required.compact-step-progress-indicator) .inner-text{--ic-typography-color:var(--ic-architectural-400)}@media (forced-colors: active){.indeterminate>.ic-loading-circular-inner{forced-color-adjust:none}.ic-loading-linear-outer{border:var(--ic-border-hc)}.ic-loading-linear-inner{background-color:canvastext}.ic-loading-circular-svg circle{stroke:Background}.ic-loading-circular-svg circle:nth-child(2){stroke:canvastext}:host(.not-required.compact-step-progress-indicator) .ic-loading-circular-svg circle:nth-child(2){stroke:GrayText}}";
 const IcLoadingIndicatorStyle0 = icLoadingIndicatorCss;
 
+const LOADING_INDICATOR_WIDTHS = {
+    large: 120,
+    medium: 80,
+    small: 40,
+    icon: 20,
+};
 const LoadingIndicator = /*@__PURE__*/ proxyCustomElement(class LoadingIndicator extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
+        this.labelList = [];
+        this.circularDiameter = 0;
+        this.circularLineWidth = 0;
+        this.circularDimensions = {
+            x: 0,
+            y: 0,
+            r: 0,
+        };
         this.clipInnerElement = false;
         /**
          * The description that will be set as the aria-label of the loading indicator when not using a visible label.
@@ -40,213 +54,195 @@ const LoadingIndicator = /*@__PURE__*/ proxyCustomElement(class LoadingIndicator
          * The size of the loading indicator.
          */
         this.size = "medium";
-        /**
-         * The type of indicator, either linear or circular.
-         */
-        this.type = "circular";
         /**
          * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
          */
         this.theme = "inherit";
-        this.updateCircularProgressMeter = () => {
-            if (!this.indeterminate && this.circularMeter) {
-                this.circularMeter.style.setProperty("--progress-value", String(this.progress));
-            }
-        };
-        this.getLabel = (labelIndex, setLabel) => {
-            return new Promise(() => {
-                this.interval = setInterval(() => {
-                    if (labelIndex < this.labelList.length - 1) {
-                        labelIndex++;
-                    }
-                    else {
-                        labelIndex = 0;
-                    }
-                    setLabel(this.labelList[labelIndex]);
-                }, this.labelDuration);
-            });
-        };
+        /**
+         * The type of indicator, either linear or circular.
+         */
+        this.type = "circular";
+        this.getLabel = (labelIndex) => new Promise(() => {
+            this.interval = setInterval(() => {
+                if (labelIndex < this.labelList.length - 1) {
+                    labelIndex++;
+                }
+                else {
+                    labelIndex = 0;
+                }
+                this.indicatorLabel = this.labelList[labelIndex];
+            }, this.labelDuration);
+        });
         this.getLabelVariant = () => {
-            var _a;
-            let variant = "h4";
-            const width = (_a = this.outerElement) === null || _a === void 0 ? void 0 : _a.offsetWidth;
-            if (this.size === "small" ||
-                (width && this.type === "circular" && width < 60)) {
-                variant = "label";
+            const width = this.type === "circular" ? this.calculateWidth() : 0;
+            if (this.size === "small" || (width && width < 60)) {
+                return "label";
             }
-            else if (this.size === "large" ||
-                (width && this.type === "circular" && width >= 120)) {
-                variant = "h2";
+            else if (this.size === "large" || width >= 120) {
+                return "h2";
             }
-            return variant;
+            return "h4";
         };
-        // Sets the circular indicator line width - accounting for the circle size being altered using the CSS custom property
-        this.setCircleLineWidth = () => {
-            const compactStepCircularLineWidth = this.el.classList.contains("compact-step-progress-indicator")
-                ? 40
-                : 0;
-            const toastDismissTimerCircularLineWidth = this.el.classList.contains("toast-dismiss-timer")
-                ? 20
-                : 0;
+        this.calculateWidth = () => {
+            var _a, _b, _c;
+            if ((_a = this.outerElement) === null || _a === void 0 ? void 0 : _a.offsetWidth)
+                return this.outerElement.offsetWidth;
             if (this.outerElement) {
-                const { offsetWidth: width } = this.outerElement;
-                if (width ||
-                    compactStepCircularLineWidth ||
-                    toastDismissTimerCircularLineWidth) {
-                    this.circularLineWidth =
-                        (compactStepCircularLineWidth ||
-                            toastDismissTimerCircularLineWidth ||
-                            width) * 0.1;
-                    this.circularDiameter =
-                        compactStepCircularLineWidth ||
-                            toastDismissTimerCircularLineWidth ||
-                            width;
-                    this.outerElement.style.setProperty("--circular-line-width", `${this.circularLineWidth}px`);
+                const { width } = window.getComputedStyle(this.outerElement);
+                if (width) {
+                    // Regex to check the units of the css string
+                    if (((_b = width.match(/\D+$/)) === null || _b === void 0 ? void 0 : _b[0]) !== "%")
+                        return parseFloat(width);
+                    const parentWidth = (_c = this.outerElement.parentElement) === null || _c === void 0 ? void 0 : _c.offsetWidth;
+                    if (parentWidth)
+                        return parentWidth * (parseFloat(width) / 100);
                 }
             }
+            return LOADING_INDICATOR_WIDTHS[this.size];
         };
         this.setLinearDeterminateWidth = () => {
-            const max = this.max;
-            const min = this.min;
-            if (!this.innerElement)
-                return;
             // Ensure progress cannot be out of bounds
-            if (this.progress) {
-                const progress = Math.min(max, Math.max(min, this.progress));
-                const proportion = (progress - min) / (max - min);
-                this.clipInnerElement = proportion > 0.5;
-                if (this.clipInnerElement) {
-                    this.innerElement.classList.remove("clip");
-                }
-                else {
-                    this.innerElement.classList.add("clip");
-                }
-                this.innerElement.style.setProperty("--linear-width", `${proportion * 100}%`);
+            if (!this.innerElement || !this.progress)
+                return;
+            const progress = Math.min(this.max, Math.max(this.min, this.progress));
+            const proportion = (progress - this.min) / (this.max - this.min);
+            this.clipInnerElement = proportion > 0.5;
+            if (this.clipInnerElement) {
+                this.innerElement.classList.remove("clip");
             }
-        };
-        this.calcOuterClass = () => {
-            let cls = `ic-loading-${this.type}-outer`;
-            cls += this.indeterminate ? " indeterminate" : " determinate";
-            return cls;
+            else {
+                this.innerElement.classList.add("clip");
+            }
+            this.innerElement.style.setProperty("--linear-width", `${proportion * 100}%`);
         };
         this.updateLabel = () => {
-            if (this.label !== undefined) {
-                if (typeof this.label === "string") {
-                    this.indicatorLabel = this.label;
-                }
-                else {
-                    this.labelList = this.label;
-                    const labelIndex = 0;
-                    this.indicatorLabel = this.labelList[labelIndex];
-                    if (this.labelList.length > 1) {
-                        this.getLabel(labelIndex, (label) => {
-                            this.indicatorLabel = label;
-                        });
-                    }
-                }
+            if (!this.label)
+                return;
+            if (typeof this.label === "string") {
+                this.indicatorLabel = this.label;
             }
-        };
-        this.setCircleXY = () => {
-            if (this.circularDiameter > 0) {
-                const r = this.circularDiameter / 2;
-                const x = r;
-                const y = r;
-                const nextRadius = r - this.circularLineWidth / 2;
-                this.setDashSteps(nextRadius);
-                return { x, y, r: nextRadius };
+            else {
+                this.labelList = this.label;
+                this.indicatorLabel = this.labelList[0];
+                if (this.labelList.length > 1) {
+                    this.getLabel(0);
+                }
             }
-            return { x: 0, y: 0, r: 0 };
         };
-        this.setDashSteps = (radius) => {
-            const dashArray = 2 * Math.PI * radius;
-            if (this.circularMeter) {
-                this.circularMeter.style.setProperty("--stroke-dasharray", `${dashArray}px`);
-                if (!this.indeterminate && this.progress) {
-                    const min = this.min;
-                    const max = this.max;
-                    const progress = Math.min(Math.max(this.progress, min), max);
-                    const proportion = -1 - (progress - min) / (max - min);
-                    this.circularMeter.style.setProperty("--circular-steps-max", String(this.max));
-                    this.circularMeter.style.setProperty("--stroke-dashoffset", `${proportion * dashArray}px`);
-                }
+        this.setCircleDimensions = () => {
+            let dashOffset = undefined;
+            if (this.circularDiameter <= 0)
+                return;
+            const r = this.circularDiameter / 2;
+            const nextRadius = r - this.circularLineWidth / 2;
+            const dashArray = 2 * Math.PI * nextRadius;
+            if (this.progress) {
+                const progress = Math.min(Math.max(this.progress, this.min), this.max);
+                dashOffset = `${(-1 - (progress - this.min) / (this.max - this.min)) * dashArray}px`;
             }
+            this.circularDimensions = {
+                x: r,
+                y: r,
+                r: nextRadius,
+                dashArray: `${dashArray}px`,
+                dashOffset,
+            };
         };
     }
     watchPropHandler() {
         this.updateLabel();
     }
+    minMaxChangeHandler() {
+        if (this.type === "circular")
+            this.setCircleDimensions();
+    }
     watchProgressHandler() {
+        if (this.type === "linear") {
+            this.setLinearDeterminateWidth();
+        }
+        else {
+            this.setCircleDimensions();
+        }
+    }
+    setIndicatorDimensions() {
         if (this.type === "circular") {
-            this.updateCircularProgressMeter();
+            // Sets the circular indicator line width - accounting for the circle size being altered using the CSS custom property
+            const diameter = this.calculateWidth();
+            if (this.outerElement && diameter !== this.circularDiameter) {
+                this.circularLineWidth = diameter * 0.1;
+                this.circularDiameter = diameter;
+                this.outerElement.style.setProperty("--circular-line-width", `${this.circularLineWidth}px`);
+                this.setCircleDimensions();
+            }
+        }
+        else {
+            this.setLinearDeterminateWidth();
         }
     }
     disconnectedCallback() {
         clearInterval(this.interval);
     }
     componentWillLoad() {
-        this.indeterminate = this.progress === undefined;
         this.updateLabel();
         this.el.setAttribute("exportparts", "ic-loading-container");
     }
     componentDidLoad() {
-        var _a;
-        if (this.type === "circular") {
-            this.setCircleLineWidth();
-            this.circularMeter = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".ic-loading-circular-svg circle:nth-child(2)");
-            this.updateCircularProgressMeter();
-        }
-        if (Number(this.progress) >= 0 && this.type === "linear") {
-            this.setLinearDeterminateWidth();
-        }
-    }
-    componentWillUpdate() {
-        this.indeterminate = this.progress === undefined;
-    }
-    componentDidUpdate() {
-        if (Number(this.progress) >= 0 && this.type === "linear") {
-            this.setLinearDeterminateWidth();
-        }
+        this.setIndicatorDimensions();
     }
     render() {
-        const { theme, label, description, size, fullWidth, innerLabel, monochrome, } = this;
-        const { x, y, r } = this.setCircleXY();
-        return (h(Host, { key: '0031fe76c51b9cfcdb3916451bd2b56f6aac8721', class: {
+        const { theme, label, description, size, fullWidth, innerLabel, monochrome, type, progress, min, max, circularDiameter, indicatorLabel, circularDimensions, } = this;
+        const { x, y, r, dashArray, dashOffset } = circularDimensions;
+        return (h(Host, { key: '7f78047511c580f116c21d00e76a19dee3319d60', class: {
                 [`ic-theme-${theme}`]: theme !== "inherit",
+                "ic-loading-indicator-full-width": fullWidth,
                 "ic-loading-indicator-label": !!label,
-                "ic-loading-indicator-full-width": !!fullWidth,
+                "ic-loading-indicator-monochrome": monochrome,
+            } }, h("div", { key: 'eec896daa35399c26a11873674ba4bc4fd099ddc', class: "ic-loading-container", part: "ic-loading-container" }, h("div", { key: 'b3ab1935e9fe5d50cd6513acd7a8eabb31fadf98', ref: (el) => (this.outerElement = el), class: {
+                [`ic-loading-${type}-outer`]: true,
+                [progress === undefined ? "indeterminate" : "determinate"]: true,
+            }, role: "progressbar", "aria-labelledby": label && size !== "icon" && "ic-loading-label", "aria-label": description, "aria-valuenow": progress, "aria-valuemin": min, "aria-valuemax": max }, h("div", { key: '2f6e1f2e1a88b752cdda2a6b2834441e8546eb9b', ref: (el) => (this.innerElement = el), class: {
+                [`ic-loading-${type}-inner`]: true,
                 "inner-label": !!innerLabel,
-                "ic-loading-indicator-monochrome": !!monochrome,
-            } }, h("div", { key: 'f0d87cb81fe19c7923cab83352692a820f864353', class: "ic-loading-container", part: "ic-loading-container" }, h("div", { key: 'eed9c9ec0fa7677a73d97f84f2f0c4254ae895f9', ref: (el) => (this.outerElement = el), class: this.calcOuterClass(), role: "progressbar", "aria-labelledby": this.label && this.size !== "icon" && "ic-loading-label", "aria-label": description, "aria-valuenow": this.progress, "aria-valuemin": this.min, "aria-valuemax": this.max }, h("div", { key: 'e6f08d5b7d7f7d3531f26773d82bdaab8b746de6', ref: (el) => (this.innerElement = el), class: `ic-loading-${this.type}-inner` }, this.innerLabel &&
-            this.innerLabel !== undefined &&
-            this.size === "small" && (h("ic-typography", { key: 'e5e16b071e7886eeaeddbe5d4ba9982d2dd835ac', variant: "subtitle-small", class: "inner-text" }, this.innerLabel)), this.type === "circular" && (h("svg", { key: '242ce0f64c6b81f0495ce74844d42952d60889b1', class: "ic-loading-circular-svg", viewBox: `0 0 ${this.circularDiameter || 0} ${this.circularDiameter || 0}` }, h("circle", { key: '89efba17cfc44471af357fac9fad70a80ee8f9c2', cx: `${x}`, cy: `${y}`, r: `${r}` }), h("circle", { key: '47a39e6acf845c27e2817d563559fc332c9be3db', cx: `${x}`, cy: `${y}`, r: `${r}` }))))), label && size !== "icon" && (h("ic-typography", { key: '383cf6d17daaaaa8275b8b381e6a65334f8b832e', id: "ic-loading-label", class: "ic-loading-label", role: "status", variant: this.getLabelVariant() }, h("p", { key: 'b0009c0c194d3ebdf8b8bca21fcee5db1919ac1a' }, this.indicatorLabel))))));
+            } }, innerLabel && size === "small" && (h("ic-typography", { key: 'c0d18d282c7090aa2bf478c3beee03e6c2b2f61d', variant: "subtitle-small", class: "inner-text" }, innerLabel)), type === "circular" && (h("svg", { key: 'a5827dba8cff99684667dfa1147186ad0bd3f7a1', class: "ic-loading-circular-svg", viewBox: `0 0 ${circularDiameter} ${circularDiameter}` }, h("circle", { key: 'c53d2155e9aea468427178f5a41e0a24b02565fa', cx: x, cy: y, r: r }), h("circle", { key: 'c5b6aea5b936b056a8103c0dacb81822348b20d1', style: {
+                "--circular-steps-max": progress ? `${max}` : undefined,
+                "--progress-value": progress !== undefined ? `${progress}` : undefined,
+                "--stroke-dasharray": dashArray,
+                "--stroke-dashoffset": dashOffset,
+            }, cx: x, cy: y, r: r }))))), label && size !== "icon" && (h("ic-typography", { key: 'e586d3c31d518a77bf93f90504318e3a5baeeb64', id: "ic-loading-label", class: "ic-loading-label", role: "status", variant: this.getLabelVariant() }, h("p", { key: 'd1c0b977ef4441ae45f4122a7a0ee03b33b4421b' }, indicatorLabel))))));
     }
     get el() { return this; }
     static get watchers() { return {
         "label": ["watchPropHandler"],
-        "progress": ["watchProgressHandler"]
+        "max": ["minMaxChangeHandler"],
+        "min": ["minMaxChangeHandler"],
+        "progress": ["watchProgressHandler"],
+        "type": ["setIndicatorDimensions"]
     }; }
     static get style() { return IcLoadingIndicatorStyle0; }
 }, [1, "ic-loading-indicator", {
         "description": [1],
         "fullWidth": [516, "full-width"],
         "innerLabel": [2, "inner-label"],
+        "label": [1],
         "labelDuration": [2, "label-duration"],
         "max": [2],
         "min": [2],
         "monochrome": [4],
-        "size": [513],
-        "type": [513],
-        "label": [1],
         "progress": [2],
+        "size": [513],
         "theme": [1],
+        "type": [513],
         "circularDiameter": [32],
         "circularLineWidth": [32],
-        "indeterminate": [32],
+        "circularDimensions": [32],
         "indicatorLabel": [32],
         "clipInnerElement": [32]
     }, undefined, {
         "label": ["watchPropHandler"],
-        "progress": ["watchProgressHandler"]
+        "max": ["minMaxChangeHandler"],
+        "min": ["minMaxChangeHandler"],
+        "progress": ["watchProgressHandler"],
+        "type": ["setIndicatorDimensions"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {