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

package/dist/collection/components/ic-input-validation/ic-input-validation.js

@@ -59,7 +59,7 @@ export class InputValidation {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The validation message to display"
+          "text": "The validation message to display."
         },
         "attribute": "message",
         "reflect": false
@@ -76,7 +76,7 @@ export class InputValidation {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The id of the input field the message relates to"
+          "text": "The ID of the form element the validation is bound to."
         },
         "attribute": "for",
         "reflect": false
@@ -98,7 +98,7 @@ export class InputValidation {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The status"
+          "text": "The status of the validation - e.g. 'error' | 'warning' | 'success'."
         },
         "attribute": "status",
         "reflect": false,
@@ -116,7 +116,7 @@ export class InputValidation {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "If true then fill width of container"
+          "text": "If `true`, the input validation will fill the width of the container."
         },
         "attribute": "full-width",
         "reflect": false,
@@ -139,7 +139,7 @@ export class InputValidation {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "aria live mode to apply to message"
+          "text": "The ARIA live mode to apply to the message."
         },
         "attribute": "aria-live-mode",
         "reflect": false,

package/dist/collection/components/ic-input-validation/ic-input-validation.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-input-validation.js","sourceRoot":"","sources":["../../../src/components/ic-input-validation/ic-input-validation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAElE,OAAO,EACL,mBAAmB,GAEpB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,SAAS,MAAM,6BAA6B,CAAC;AACpD,OAAO,WAAW,MAAM,+BAA+B,CAAC;AACxD,OAAO,WAAW,MAAM,+BAA+B,CAAC;AAExD,OAAO,EACL,wBAAwB,EACxB,gCAAgC,GACjC,MAAM,qBAAqB,CAAC;AAG7B,MAAM,IAAI,GAAG;EACX,CAAC,mBAAmB,CAAC,OAAO,CAAC,EAAE,WAAW;EAC1C,CAAC,mBAAmB,CAAC,KAAK,CAAC,EAAE,SAAS;EACtC,CAAC,mBAAmB,CAAC,OAAO,CAAC,EAAE,WAAW;CAC3C,CAAC;AAEF;;GAEG;AAKH,MAAM,OAAO,eAAe;;;;kBAcmB,EAAE;qBAIlB,KAAK;wBAIa,QAAQ;;EAEvD,gBAAgB;IACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,EAC7C,kBAAkB,CACnB,CAAC;EACJ,CAAC;EAED,MAAM;IACJ,MAAM,WAAW,GAAG,IAAI,CAAC,MAAM,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAChE,MAAM,EAAE,GAAG,wBAAwB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC9C,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;QACL,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,MAAM,KAAK,EAAE;QACjC,CAAC,WAAW,CAAC,EAAE,IAAI,CAAC,SAAS;OAC9B;MAEA,WAAW,KAAK,EAAE,IAAI,CACrB,YACE,KAAK,EAAE;UACL,CAAC,aAAa,CAAC,EAAE,IAAI;UACrB,CAAC,QAAQ,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,IAAI;SAC9B,EACD,SAAS,EAAE,WAAW,GACtB,CACH;MAED,qBAAe,OAAO,EAAC,SAAS,EAAC,KAAK,EAAC,YAAY;QACjD,yBAAiB,IAAI,CAAC,YAAY,EAAE,EAAE,EAAE,EAAE,IACvC,IAAI,CAAC,OAAO,CACR,CACO;MAEhB,YAAM,IAAI,EAAC,8BAA8B,GAAQ,CAC5C,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Element, Component, Host, Prop, h } from \"@stencil/core\";\n\nimport {\n  IcInformationStatus,\n  IcInformationStatusOrEmpty,\n} from \"../../utils/types\";\nimport errorIcon from \"../../assets/error-icon.svg\";\nimport successIcon from \"../../assets/success-icon.svg\";\nimport warningIcon from \"../../assets/warning-icon.svg\";\n\nimport {\n  getInputValidationTextID,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcAriaLiveModeVariants } from \"./ic-input-validation.types\";\n\nconst icon = {\n  [IcInformationStatus.Warning]: warningIcon,\n  [IcInformationStatus.Error]: errorIcon,\n  [IcInformationStatus.Success]: successIcon,\n};\n\n/**\n * @slot validation-message-adornment - Content will be placed to the right of the validation message.\n */\n@Component({\n  tag: \"ic-input-validation\",\n  styleUrl: \"ic-input-validation.css\",\n})\nexport class InputValidation {\n  @Element() el: HTMLIcInputValidationElement;\n\n  /**\n   * The validation message to display\n   */\n  @Prop() message!: string;\n  /**\n   * The id of the input field the message relates to\n   */\n  @Prop() for: string;\n  /**\n   * The status\n   */\n  @Prop() status: IcInformationStatusOrEmpty = \"\";\n  /**\n   *  If true then fill width of container\n   */\n  @Prop() fullWidth: boolean = false;\n  /**\n   *  aria live mode to apply to message\n   */\n  @Prop() ariaLiveMode: IcAriaLiveModeVariants = \"polite\";\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.message, propName: \"message\" }],\n      \"Input Validation\"\n    );\n  }\n\n  render() {\n    const displayIcon = this.status !== \"\" ? icon[this.status] : \"\";\n    const id = getInputValidationTextID(this.for);\n    return (\n      <Host\n        class={{\n          [this.status]: this.status !== \"\",\n          [\"fullwidth\"]: this.fullWidth,\n        }}\n      >\n        {displayIcon !== \"\" && (\n          <span\n            class={{\n              [\"status-icon\"]: true,\n              [`icon-${this.status}`]: true,\n            }}\n            innerHTML={displayIcon}\n          />\n        )}\n\n        <ic-typography variant=\"caption\" class=\"statustext\">\n          <span aria-live={this.ariaLiveMode} id={id}>\n            {this.message}\n          </span>\n        </ic-typography>\n\n        <slot name=\"validation-message-adornment\"></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-input-validation.js","sourceRoot":"","sources":["../../../src/components/ic-input-validation/ic-input-validation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAElE,OAAO,EACL,mBAAmB,GAEpB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,SAAS,MAAM,6BAA6B,CAAC;AACpD,OAAO,WAAW,MAAM,+BAA+B,CAAC;AACxD,OAAO,WAAW,MAAM,+BAA+B,CAAC;AAExD,OAAO,EACL,wBAAwB,EACxB,gCAAgC,GACjC,MAAM,qBAAqB,CAAC;AAG7B,MAAM,IAAI,GAAG;EACX,CAAC,mBAAmB,CAAC,OAAO,CAAC,EAAE,WAAW;EAC1C,CAAC,mBAAmB,CAAC,KAAK,CAAC,EAAE,SAAS;EACtC,CAAC,mBAAmB,CAAC,OAAO,CAAC,EAAE,WAAW;CAC3C,CAAC;AAEF;;GAEG;AAKH,MAAM,OAAO,eAAe;;;;kBAcmB,EAAE;qBAIlB,KAAK;wBAIa,QAAQ;;EAEvD,gBAAgB;IACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,EAC7C,kBAAkB,CACnB,CAAC;EACJ,CAAC;EAED,MAAM;IACJ,MAAM,WAAW,GAAG,IAAI,CAAC,MAAM,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAChE,MAAM,EAAE,GAAG,wBAAwB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC9C,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;QACL,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,MAAM,KAAK,EAAE;QACjC,CAAC,WAAW,CAAC,EAAE,IAAI,CAAC,SAAS;OAC9B;MAEA,WAAW,KAAK,EAAE,IAAI,CACrB,YACE,KAAK,EAAE;UACL,CAAC,aAAa,CAAC,EAAE,IAAI;UACrB,CAAC,QAAQ,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,IAAI;SAC9B,EACD,SAAS,EAAE,WAAW,GACtB,CACH;MAED,qBAAe,OAAO,EAAC,SAAS,EAAC,KAAK,EAAC,YAAY;QACjD,yBAAiB,IAAI,CAAC,YAAY,EAAE,EAAE,EAAE,EAAE,IACvC,IAAI,CAAC,OAAO,CACR,CACO;MAEhB,YAAM,IAAI,EAAC,8BAA8B,GAAQ,CAC5C,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Element, Component, Host, Prop, h } from \"@stencil/core\";\n\nimport {\n  IcInformationStatus,\n  IcInformationStatusOrEmpty,\n} from \"../../utils/types\";\nimport errorIcon from \"../../assets/error-icon.svg\";\nimport successIcon from \"../../assets/success-icon.svg\";\nimport warningIcon from \"../../assets/warning-icon.svg\";\n\nimport {\n  getInputValidationTextID,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcAriaLiveModeVariants } from \"./ic-input-validation.types\";\n\nconst icon = {\n  [IcInformationStatus.Warning]: warningIcon,\n  [IcInformationStatus.Error]: errorIcon,\n  [IcInformationStatus.Success]: successIcon,\n};\n\n/**\n * @slot validation-message-adornment - Content will be placed to the right of the validation message.\n */\n@Component({\n  tag: \"ic-input-validation\",\n  styleUrl: \"ic-input-validation.css\",\n})\nexport class InputValidation {\n  @Element() el: HTMLIcInputValidationElement;\n\n  /**\n   * The validation message to display.\n   */\n  @Prop() message!: string;\n  /**\n   * The ID of the form element the validation is bound to.\n   */\n  @Prop() for: string;\n  /**\n   * The status of the validation - e.g. 'error' | 'warning' | 'success'.\n   */\n  @Prop() status: IcInformationStatusOrEmpty = \"\";\n  /**\n   *  If `true`, the input validation will fill the width of the container.\n   */\n  @Prop() fullWidth: boolean = false;\n  /**\n   *  The ARIA live mode to apply to the message.\n   */\n  @Prop() ariaLiveMode: IcAriaLiveModeVariants = \"polite\";\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.message, propName: \"message\" }],\n      \"Input Validation\"\n    );\n  }\n\n  render() {\n    const displayIcon = this.status !== \"\" ? icon[this.status] : \"\";\n    const id = getInputValidationTextID(this.for);\n    return (\n      <Host\n        class={{\n          [this.status]: this.status !== \"\",\n          [\"fullwidth\"]: this.fullWidth,\n        }}\n      >\n        {displayIcon !== \"\" && (\n          <span\n            class={{\n              [\"status-icon\"]: true,\n              [`icon-${this.status}`]: true,\n            }}\n            innerHTML={displayIcon}\n          />\n        )}\n\n        <ic-typography variant=\"caption\" class=\"statustext\">\n          <span aria-live={this.ariaLiveMode} id={id}>\n            {this.message}\n          </span>\n        </ic-typography>\n\n        <slot name=\"validation-message-adornment\"></slot>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -471,18 +471,9 @@ video {
   text-decoration-line: underline;
   text-decoration-thickness: 25%;
   text-underline-offset: 25%;
-}
-
-:host(.link) .ic-link:hover,
-:host(.link) ::slotted(a:hover) {
   outline: none;
 }
 
-:host(.link) .ic-link:focus,
-:host(.link) ::slotted(a:focus) {
-  outline: var(--ic-hc-focus-outline);
-}
-
 :host(.link) .ic-link:active,
 :host(.link) .ic-link:focus:active,
 :host(.link) .ic-link:visited:active,

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

@@ -1,10 +1,10 @@
-import { h, Host } from "@stencil/core";
-import OpenInNew from "./assets/OpenInNew.svg";
+import { h, Host, } from "@stencil/core";
+import OpenInNew from "../../assets/OpenInNew.svg";
 import { getThemeFromContext, inheritAttributes } from "../../utils/helpers";
 import { IC_INHERITED_ARIA } from "../../utils/constants";
 import { IcThemeForegroundEnum, } from "../../utils/types";
 /**
- * @slot router-item - Handle routing by nesting your routes in this slot
+ * @slot router-item - Handle routing by nesting your routes in this slot.
  */
 export class Link {
   constructor() {
@@ -33,13 +33,19 @@ export class Link {
         break;
     }
   }
+  /**
+   * Sets focus on the link.
+   */
+  async setFocus() {
+    if (this.el.shadowRoot.querySelector("a")) {
+      this.el.shadowRoot.querySelector("a").focus();
+    }
+  }
   componentWillLoad() {
     this.inheritedAttributes = inheritAttributes(this.el, [
       ...IC_INHERITED_ARIA,
       "aria-expanded",
     ]);
-  }
-  componentDidLoad() {
     this.updateTheme();
   }
   hasRouterSlot() {
@@ -58,6 +64,7 @@ export class Link {
   }
   static get is() { return "ic-link"; }
   static get encapsulation() { return "shadow"; }
+  static get delegatesFocus() { return true; }
   static get originalStyleUrls() {
     return {
       "$": ["ic-link.css"]
@@ -82,7 +89,7 @@ export class Link {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Prompts the user to save the linked URL instead of navigating to it."
+          "text": "If `true`, the user can save the linked URL instead of navigating to it."
         },
         "attribute": "download",
         "reflect": false,
@@ -118,7 +125,7 @@ export class Link {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Hints at the human language of the linked URL."
+          "text": "The human language of the linked URL."
         },
         "attribute": "hreflang",
         "reflect": false
@@ -173,7 +180,7 @@ export class Link {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Where to display the linked URL, as the name for a browsing context (a tab, window, or iframe)."
+          "text": "The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe)."
         },
         "attribute": "target",
         "reflect": false
@@ -190,7 +197,7 @@ export class Link {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Determines whether the 'open in new tab/window' icon is to be displayed."
+          "text": "If `true`, the 'open in new tab/window' icon will be displayed."
         },
         "attribute": "show-icon",
         "reflect": false
@@ -212,7 +219,7 @@ export class Link {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Determines the whether the appearance is dark, light, or the default."
+          "text": "The appearance of the link, e.g. dark, light, or default."
         },
         "attribute": "appearance",
         "reflect": false,
@@ -220,10 +227,30 @@ export class Link {
       }
     };
   }
+  static get methods() {
+    return {
+      "setFocus": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Sets focus on the link.",
+          "tags": []
+        }
+      }
+    };
+  }
   static get elementRef() { return "el"; }
   static get listeners() {
     return [{
-        "name": "icThemeChange",
+        "name": "themeChange",
         "method": "themeChangeHandler",
         "target": "document",
         "capture": false,

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

@@ -1 +1 @@
-{"version":3,"file":"ic-link.js","sourceRoot":"","sources":["../../../src/components/ic-link/ic-link.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Prop, h, Host, Listen } from \"@stencil/core\";\n\nimport OpenInNew from \"./assets/OpenInNew.svg\";\nimport { getThemeFromContext, inheritAttributes } from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\n\n/**\n * @slot router-item - Handle routing by nesting your routes in this slot\n */\n\n@Component({\n  tag: \"ic-link\",\n  styleUrl: \"ic-link.css\",\n  shadow: true,\n})\nexport class Link {\n  private inheritedAttributes: { [k: string]: unknown } = {};\n  private routerSlot: HTMLElement;\n\n  @Element() el: HTMLIcLinkElement;\n\n  /**\n   * Prompts the user to save the linked URL instead of navigating to it.\n   */\n  @Prop() download?: string | boolean = false;\n\n  /**\n   * The URL that the link points to.\n   */\n  @Prop() href?: string = null;\n\n  /**\n   * Hints at the human language of the linked URL.\n   */\n  @Prop() hreflang?: string;\n\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n\n  /**\n   * Where to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\n\n  /**\n   * Determines whether the 'open in new tab/window' icon is to be displayed.\n   */\n  @Prop() showIcon?: boolean;\n\n  /**\n   * Determines the whether the appearance is dark, light, or the default.\n   */\n  @Prop({ mutable: true }) appearance?: IcThemeForeground = \"default\";\n\n  @Listen(\"icThemeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.updateTheme(theme.mode);\n  }\n\n  private updateTheme(newTheme: IcThemeForeground = null): void {\n    const theme = getThemeFromContext(this.el, newTheme || null);\n\n    switch (theme) {\n      case IcThemeForegroundEnum.Light:\n        this.appearance = IcThemeForegroundEnum.Light;\n        break;\n      case IcThemeForegroundEnum.Dark:\n        this.appearance = IcThemeForegroundEnum.Dark;\n        break;\n    }\n  }\n\n  componentWillLoad(): void {\n    this.inheritedAttributes = inheritAttributes(this.el, [\n      ...IC_INHERITED_ARIA,\n      \"aria-expanded\",\n    ]);\n  }\n\n  componentDidLoad(): void {\n    this.updateTheme();\n  }\n\n  private hasRouterSlot(): boolean {\n    this.routerSlot = this.el.querySelector('[slot=\"router-item\"]');\n    if (this.routerSlot) {\n      this.routerSlot.ariaLabel = this.routerSlot.textContent;\n    }\n    return !!this.routerSlot;\n  }\n\n  render() {\n    const {\n      download,\n      href,\n      hreflang,\n      referrerpolicy,\n      rel,\n      target,\n      showIcon,\n      appearance,\n    } = this;\n\n    return (\n      <Host class={{ [\"link\"]: true, [`${appearance}`]: true }}>\n        {this.hasRouterSlot() ? (\n          <slot name=\"router-item\"></slot>\n        ) : (\n          <a\n            class={{\n              [\"ic-link\"]: href !== null,\n              [`${appearance}`]: href !== null,\n            }}\n            download={download !== false ? download : null}\n            href={href}\n            hrefLang={hreflang}\n            referrerPolicy={referrerpolicy}\n            rel={rel}\n            target={target}\n            tabindex={href !== null ? \"0\" : \"-1\"}\n            {...this.inheritedAttributes}\n          >\n            <slot />\n            {showIcon && (\n              <span class=\"ic-link-open-in-new-icon\" innerHTML={OpenInNew} />\n            )}\n          </a>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-link.js","sourceRoot":"","sources":["../../../src/components/ic-link/ic-link.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Prop,\n  h,\n  Host,\n  Listen,\n  Method,\n} from \"@stencil/core\";\n\nimport OpenInNew from \"../../assets/OpenInNew.svg\";\nimport { getThemeFromContext, inheritAttributes } from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\n\n/**\n * @slot router-item - Handle routing by nesting your routes in this slot.\n */\n\n@Component({\n  tag: \"ic-link\",\n  styleUrl: \"ic-link.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class Link {\n  private inheritedAttributes: { [k: string]: unknown } = {};\n  private routerSlot: HTMLElement;\n\n  @Element() el: HTMLIcLinkElement;\n\n  /**\n   * If `true`, the user can save the linked URL instead of navigating to it.\n   */\n  @Prop() download?: string | boolean = false;\n\n  /**\n   * The URL that the link points to.\n   */\n  @Prop() href?: string = null;\n\n  /**\n   * The human language of the linked URL.\n   */\n  @Prop() hreflang?: string;\n\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n\n  /**\n   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\n\n  /**\n   * If `true`, the 'open in new tab/window' icon will be displayed.\n   */\n  @Prop() showIcon?: boolean;\n\n  /**\n   * The appearance of the link, e.g. dark, light, or default.\n   */\n  @Prop({ mutable: true }) appearance?: IcThemeForeground = \"default\";\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.updateTheme(theme.mode);\n  }\n\n  private updateTheme(newTheme: IcThemeForeground = null): void {\n    const theme = getThemeFromContext(this.el, newTheme || null);\n\n    switch (theme) {\n      case IcThemeForegroundEnum.Light:\n        this.appearance = IcThemeForegroundEnum.Light;\n        break;\n      case IcThemeForegroundEnum.Dark:\n        this.appearance = IcThemeForegroundEnum.Dark;\n        break;\n    }\n  }\n\n  /**\n   * Sets focus on the link.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.el.shadowRoot.querySelector(\"a\")) {\n      this.el.shadowRoot.querySelector(\"a\").focus();\n    }\n  }\n\n  componentWillLoad(): void {\n    this.inheritedAttributes = inheritAttributes(this.el, [\n      ...IC_INHERITED_ARIA,\n      \"aria-expanded\",\n    ]);\n\n    this.updateTheme();\n  }\n\n  private hasRouterSlot(): boolean {\n    this.routerSlot = this.el.querySelector('[slot=\"router-item\"]');\n    if (this.routerSlot) {\n      this.routerSlot.ariaLabel = this.routerSlot.textContent;\n    }\n    return !!this.routerSlot;\n  }\n\n  render() {\n    const {\n      download,\n      href,\n      hreflang,\n      referrerpolicy,\n      rel,\n      target,\n      showIcon,\n      appearance,\n    } = this;\n\n    return (\n      <Host class={{ [\"link\"]: true, [`${appearance}`]: true }}>\n        {this.hasRouterSlot() ? (\n          <slot name=\"router-item\"></slot>\n        ) : (\n          <a\n            class={{\n              [\"ic-link\"]: href !== null,\n              [`${appearance}`]: href !== null,\n            }}\n            download={download !== false ? download : null}\n            href={href}\n            hrefLang={hreflang}\n            referrerPolicy={referrerpolicy}\n            rel={rel}\n            target={target}\n            tabindex={href !== null ? \"0\" : \"-1\"}\n            {...this.inheritedAttributes}\n          >\n            <slot />\n            {showIcon && (\n              <span class=\"ic-link-open-in-new-icon\" innerHTML={OpenInNew} />\n            )}\n          </a>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-loading-indicator/ic-loading-indicator.css

@@ -448,7 +448,7 @@ video {
 
   display: block;
 
-  --linear-border-radius: 4px;
+  --linear-border-radius: 0.25rem;
   --inner-color: var(--ic-action-default);
   --outer-color: var(--ic-architectural-100);
   --label-color: var(--ic-color-primary-text);
@@ -470,23 +470,23 @@ video {
 }
 
 :host([size="small"]) {
-  --circular-diameter: 40px;
+  --circular-diameter: 2.5rem;
   --linear-line-height: var(--ic-space-xxs);
 }
 
 :host([size="default"]) {
-  --circular-diameter: 80px;
+  --circular-diameter: 5rem;
 }
 
 :host([size="large"]) {
-  --circular-diameter: 120px;
+  --circular-diameter: 7.5rem;
 }
 
 :host([size="icon"]) {
   display: inline-block;
 
   --margin: var(--ic-space-xxxs);
-  --circular-diameter: 20px;
+  --circular-diameter: 1.25rem;
 }
 
 :host([label]) {
@@ -502,7 +502,6 @@ video {
 .ic-loading-circular-outer {
   height: var(--circular-diameter);
   width: var(--circular-diameter);
-
 }
 
 .ic-loading-circular-outer.indeterminate {
@@ -600,7 +599,38 @@ video {
 
   stroke-dasharray: var(--stroke-dasharray), var(--stroke-dasharray);
   stroke-dashoffset: var(--stroke-dashoffset, var(--circular-indeterminate));
-  stroke: var(--inner-color);
+  stroke: var(--compact-step-inner-color, var(--inner-color));
+}
+
+:host([inner-label]) .ic-loading-circular-inner {
+  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;
+  color: var(--ic-theme-primary);
+}
+
+:host(.not-required.compact-step-progress-indicator) .inner-text {
+  color: var(--ic-color-tertiary-text);
 }
 
 /** High Contrast **/
@@ -624,4 +654,10 @@ video {
   .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;
+  }
 }

package/dist/collection/components/ic-loading-indicator/ic-loading-indicator.js

@@ -36,9 +36,23 @@ export class LoadingIndicator {
     // Sets the circular indicator line width - accounting for the circle size being altered using the CSS custom property
     this.setCircleLineWidth = () => {
       const { offsetWidth: width } = this.outerElement;
-      if (width) {
-        this.circularLineWidth = width * 0.1;
-        this.circularDiameter = width;
+      const compactStepCircularLineWidth = this.host.classList.contains("compact-step-progress-indicator")
+        ? 40
+        : 0;
+      const toastDismissTimerCircularLineWidth = this.host.classList.contains("toast-dismiss-timer")
+        ? 20
+        : 0;
+      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`);
       }
     };
@@ -75,7 +89,7 @@ export class LoadingIndicator {
       }
     };
     this.setCircleXY = () => {
-      if (this.circularDiameter) {
+      if (this.circularDiameter > 0) {
         const r = this.circularDiameter / 2;
         const x = r;
         const y = r;
@@ -100,6 +114,7 @@ export class LoadingIndicator {
     this.max = 100;
     this.label = undefined;
     this.description = "Loading";
+    this.innerLabel = undefined;
     this.labelDuration = 8000;
     this.size = "default";
     this.type = "circular";
@@ -115,7 +130,9 @@ export class LoadingIndicator {
     this.updateLabel();
   }
   watchProgressHandler() {
-    this.updateCircularProgressMeter();
+    if (this.type === "circular") {
+      this.updateCircularProgressMeter();
+    }
   }
   componentWillLoad() {
     this.indeterminate = this.progress === undefined;
@@ -142,7 +159,9 @@ export class LoadingIndicator {
   render() {
     const { appearance, label, description, size } = this;
     const { x, y, r } = this.setCircleXY();
-    return (h(Host, { class: { ["light"]: appearance === IcThemeForegroundEnum.Light } }, h("div", { class: "ic-loading-container" }, h("div", { 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", { ref: (el) => (this.innerElement = el), class: `ic-loading-${this.type}-inner` }, this.type === "circular" && (h("svg", { class: "ic-loading-circular-svg", viewBox: `0 0 ${this.circularDiameter || 0} ${this.circularDiameter || 0}` }, h("circle", { cx: `${x}`, cy: `${y}`, r: `${r}` }), h("circle", { cx: `${x}`, cy: `${y}`, r: `${r}` }))))), label && size !== "icon" && (h("ic-typography", { id: "ic-loading-label", class: "ic-loading-label", role: "status", variant: this.getLabelVariant() }, h("p", null, this.indicatorLabel))))));
+    return (h(Host, { class: { ["light"]: appearance === IcThemeForegroundEnum.Light } }, h("div", { class: "ic-loading-container" }, h("div", { 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", { ref: (el) => (this.innerElement = el), class: `ic-loading-${this.type}-inner` }, this.innerLabel &&
+      this.innerLabel !== undefined &&
+      this.size === "small" && (h("ic-typography", { variant: "subtitle-small", class: "inner-text" }, this.innerLabel)), this.type === "circular" && (h("svg", { class: "ic-loading-circular-svg", viewBox: `0 0 ${this.circularDiameter || 0} ${this.circularDiameter || 0}` }, h("circle", { cx: `${x}`, cy: `${y}`, r: `${r}` }), h("circle", { cx: `${x}`, cy: `${y}`, r: `${r}` }))))), label && size !== "icon" && (h("ic-typography", { id: "ic-loading-label", class: "ic-loading-label", role: "status", variant: this.getLabelVariant() }, h("p", null, this.indicatorLabel))))));
   }
   static get is() { return "ic-loading-indicator"; }
   static get encapsulation() { return "shadow"; }
@@ -240,12 +259,32 @@ export class LoadingIndicator {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Provide a description to be set as the aria-label of the loading indicator when not using a visible label."
+          "text": "The description that will be set as the aria-label of the loading indicator when not using a visible label."
         },
         "attribute": "description",
         "reflect": false,
         "defaultValue": "\"Loading\""
       },
+      "innerLabel": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": "The step number of a compact step, managed by ic-step."
+            }],
+          "text": ""
+        },
+        "attribute": "inner-label",
+        "reflect": false
+      },
       "labelDuration": {
         "type": "number",
         "mutable": false,
@@ -322,7 +361,7 @@ export class LoadingIndicator {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "When linear, determines whether the full-width version (i.e. without a border radius) should be displayed."
+          "text": "If `true`, when linear, the full-width variant (i.e. without a border radius) will be displayed."
         },
         "attribute": "full-width",
         "reflect": true,
@@ -345,7 +384,7 @@ export class LoadingIndicator {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Determines whether the dark or light loading indicator should be displayed."
+          "text": "The appearance of the loading indicator, e.g. dark or light."
         },
         "attribute": "appearance",
         "reflect": false,

package/dist/collection/components/ic-loading-indicator/ic-loading-indicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-loading-indicator.js","sourceRoot":"","sources":["../../../src/components/ic-loading-indicator/ic-loading-indicator.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Host, Prop, State, Watch } from \"@stencil/core\";\nimport {\n  IcLoadingCircleXYR,\n  IcLoadingSizes,\n  IcLoadingTypes,\n} from \"./ic-loading-indicator.types\";\nimport {\n  IcThemeForegroundEnum,\n  IcThemeForegroundNoDefault,\n} from \"../../utils/types\";\n\n@Component({\n  tag: \"ic-loading-indicator\",\n  styleUrl: \"ic-loading-indicator.css\",\n  shadow: true,\n})\nexport class LoadingIndicator {\n  @Element() host: HTMLIcLoadingIndicatorElement;\n\n  /**\n   * The current amount of progress made.\n   * If not provided, component acts as an indeterminate loading indicator.\n   */\n  @Prop() progress?: number;\n\n  /**\n   * The minimum value that the progress value can take.\n   * Used to calculate the proportional width of the progress bar.\n   */\n  @Prop() min?: number = 0;\n\n  /**\n   * The maximum value that the progress value can take.\n   * Used to calculate the proportional width of the progress bar.\n   */\n  @Prop() max?: number = 100;\n\n  /**\n   * The label to be displayed beneath the loading indicator.\n   * Display a changing label by separating multiple messages with forward slashes.\n   */\n  @Prop() label?: string;\n\n  /**\n   * Provide a description to be set as the aria-label of the loading indicator when not using a visible label.\n   */\n  @Prop() description?: string = \"Loading\";\n\n  /**\n   * The time in milliseconds before the label changes.\n   */\n  @Prop() labelDuration?: number = 8000;\n\n  /**\n   * The size of the loading indicator.\n   */\n  @Prop({ reflect: true }) size?: IcLoadingSizes = \"default\";\n\n  /**\n   * The type of indicator, either linear or circular.\n   */\n  @Prop({ reflect: true }) type?: IcLoadingTypes = \"circular\";\n\n  /**\n   * When linear, determines whether the full-width version (i.e. without a border radius) should be displayed.\n   */\n  @Prop({ reflect: true }) fullWidth?: boolean = false;\n\n  /**\n   * Determines whether the dark or light loading indicator should be displayed.\n   */\n  @Prop() appearance?: IcThemeForegroundNoDefault = \"dark\";\n\n  @State() indicatorLabel: string;\n  @State() indeterminate: boolean;\n  @State() showSecond: boolean = false;\n  @State() circularLineWidth: number;\n  @State() circularDiameter: number;\n\n  @Watch(\"label\")\n  watchPropHandler(): void {\n    this.updateLabel();\n  }\n\n  @Watch(\"progress\")\n  watchProgressHandler(): void {\n    this.updateCircularProgressMeter();\n  }\n\n  private outerElement?: HTMLDivElement;\n  private innerElement?: HTMLDivElement;\n  private labelList: string[];\n  private circularMeter: SVGCircleElement;\n\n  private updateCircularProgressMeter = () => {\n    if (!this.indeterminate) {\n      this.circularMeter.style.setProperty(\n        \"--progress-value\",\n        String(this.progress)\n      );\n    }\n  };\n\n  private getLabel = (\n    labelIndex: number,\n    setLabel: (label: string) => void\n  ) => {\n    return new Promise(() => {\n      setInterval(() => {\n        if (labelIndex < this.labelList.length - 1) {\n          labelIndex++;\n        } else {\n          labelIndex = 0;\n        }\n        setLabel(this.labelList[labelIndex]);\n      }, this.labelDuration);\n    });\n  };\n\n  private getLabelVariant = () => {\n    let variant: \"label\" | \"h4\" | \"h2\" = \"h4\";\n    const width = this.outerElement?.offsetWidth;\n    if (this.size === \"small\" || (this.type === \"circular\" && width < 60)) {\n      variant = \"label\";\n    } else if (\n      this.size === \"large\" ||\n      (this.type === \"circular\" && width >= 120)\n    ) {\n      variant = \"h2\";\n    }\n    return variant;\n  };\n\n  // Sets the circular indicator line width - accounting for the circle size being altered using the CSS custom property\n  private setCircleLineWidth = () => {\n    const { offsetWidth: width } = this.outerElement;\n    if (width) {\n      this.circularLineWidth = width * 0.1;\n      this.circularDiameter = width;\n      this.outerElement.style.setProperty(\n        \"--circular-line-width\",\n        `${this.circularLineWidth}px`\n      );\n    }\n  };\n\n  private setLinearDeterminateWidth = () => {\n    if (!this.innerElement) return;\n    // Ensure progress cannot be out of bounds\n\n    const progress = Math.min(this.max, Math.max(this.min, this.progress));\n    const proportion = (progress - this.min) / (this.max - this.min);\n    this.showSecond = proportion > 0.5;\n    if (this.showSecond) {\n      this.innerElement.classList.remove(\"clip\");\n    } else {\n      this.innerElement.classList.add(\"clip\");\n    }\n    this.innerElement.style.setProperty(\n      \"--linear-width\",\n      `${proportion * 100}%`\n    );\n  };\n\n  private calcOuterClass = (): string => {\n    let cls = `ic-loading-${this.type}-outer`;\n    cls += this.indeterminate ? \" indeterminate\" : \" determinate\";\n    return cls;\n  };\n\n  private updateLabel = (): void => {\n    if (this.label !== undefined) {\n      this.labelList = this.label.split(\"/\");\n      const labelIndex = 0;\n      this.indicatorLabel = this.labelList[labelIndex];\n      if (this.labelList.length > 1) {\n        this.getLabel(labelIndex, (label) => {\n          this.indicatorLabel = label;\n        });\n      }\n    }\n  };\n\n  private setCircleXY = (): IcLoadingCircleXYR => {\n    if (this.circularDiameter) {\n      const r = this.circularDiameter / 2;\n      const x = r;\n      const y = r;\n      const nextRadius = r - this.circularLineWidth / 2;\n      this.setDashSteps(nextRadius);\n\n      return { x, y, r: nextRadius };\n    }\n    return { x: 0, y: 0, r: 0 };\n  };\n\n  private setDashSteps = (radius: number) => {\n    const dashArray = 2 * Math.PI * radius;\n    const progress = Math.min(Math.max(this.progress, this.min), this.max);\n    const proportion = -1 - (progress - this.min) / (this.max - this.min);\n\n    this.circularMeter.style.setProperty(\n      \"--stroke-dasharray\",\n      `${dashArray}px`\n    );\n\n    if (!this.indeterminate) {\n      this.circularMeter.style.setProperty(\n        \"--circular-steps-max\",\n        String(this.max)\n      );\n      this.circularMeter.style.setProperty(\n        \"--stroke-dashoffset\",\n        `${proportion * dashArray}px`\n      );\n    }\n  };\n\n  componentWillLoad(): void {\n    this.indeterminate = this.progress === undefined;\n    this.updateLabel();\n  }\n\n  componentDidLoad(): void {\n    if (this.type === \"circular\") {\n      this.setCircleLineWidth();\n      this.circularMeter = this.host.shadowRoot.querySelector(\n        \".ic-loading-circular-svg circle:nth-child(2)\"\n      );\n      this.updateCircularProgressMeter();\n    }\n\n    if (Number(this.progress) >= 0 && this.type === \"linear\") {\n      this.setLinearDeterminateWidth();\n    }\n  }\n\n  componentWillUpdate(): void {\n    this.indeterminate = this.progress === undefined;\n  }\n\n  componentDidUpdate(): void {\n    if (Number(this.progress) >= 0 && this.type === \"linear\") {\n      this.setLinearDeterminateWidth();\n    }\n  }\n\n  render() {\n    const { appearance, label, description, size } = this;\n    const { x, y, r } = this.setCircleXY();\n\n    return (\n      <Host class={{ [\"light\"]: appearance === IcThemeForegroundEnum.Light }}>\n        <div class=\"ic-loading-container\">\n          <div\n            ref={(el) => (this.outerElement = el as HTMLDivElement)}\n            class={this.calcOuterClass()}\n            role=\"progressbar\"\n            aria-labelledby={\n              this.label && this.size !== \"icon\" && \"ic-loading-label\"\n            }\n            aria-label={description}\n            aria-valuenow={this.progress}\n            aria-valuemin={this.min}\n            aria-valuemax={this.max}\n          >\n            <div\n              ref={(el) => (this.innerElement = el as HTMLDivElement)}\n              class={`ic-loading-${this.type}-inner`}\n            >\n              {this.type === \"circular\" && (\n                <svg\n                  class=\"ic-loading-circular-svg\"\n                  viewBox={`0 0 ${this.circularDiameter || 0} ${\n                    this.circularDiameter || 0\n                  }`}\n                >\n                  <circle cx={`${x}`} cy={`${y}`} r={`${r}`}></circle>\n                  <circle cx={`${x}`} cy={`${y}`} r={`${r}`}></circle>\n                </svg>\n              )}\n            </div>\n          </div>\n          {label && size !== \"icon\" && (\n            <ic-typography\n              id=\"ic-loading-label\"\n              class=\"ic-loading-label\"\n              role=\"status\"\n              variant={this.getLabelVariant()}\n            >\n              <p>{this.indicatorLabel}</p>\n            </ic-typography>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-loading-indicator.js","sourceRoot":"","sources":["../../../src/components/ic-loading-indicator/ic-loading-indicator.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Host, Prop, State, Watch } from \"@stencil/core\";\nimport {\n  IcLoadingCircleXYR,\n  IcLoadingSizes,\n  IcLoadingTypes,\n} from \"./ic-loading-indicator.types\";\nimport {\n  IcThemeForegroundEnum,\n  IcThemeForegroundNoDefault,\n} from \"../../utils/types\";\n\n@Component({\n  tag: \"ic-loading-indicator\",\n  styleUrl: \"ic-loading-indicator.css\",\n  shadow: true,\n})\nexport class LoadingIndicator {\n  @Element() host: HTMLIcLoadingIndicatorElement;\n\n  /**\n   * The current amount of progress made.\n   * If not provided, component acts as an indeterminate loading indicator.\n   */\n  @Prop() progress?: number;\n\n  /**\n   * The minimum value that the progress value can take.\n   * Used to calculate the proportional width of the progress bar.\n   */\n  @Prop() min?: number = 0;\n\n  /**\n   * The maximum value that the progress value can take.\n   * Used to calculate the proportional width of the progress bar.\n   */\n  @Prop() max?: number = 100;\n\n  /**\n   * The label to be displayed beneath the loading indicator.\n   * Display a changing label by separating multiple messages with forward slashes.\n   */\n  @Prop() label?: string;\n\n  /**\n   * The description that will be set as the aria-label of the loading indicator when not using a visible label.\n   */\n  @Prop() description?: string = \"Loading\";\n\n  /**\n   * @internal The step number of a compact step, managed by ic-step.\n   */\n  @Prop() innerLabel?: number;\n\n  /**\n   * The time in milliseconds before the label changes.\n   */\n  @Prop() labelDuration?: number = 8000;\n\n  /**\n   * The size of the loading indicator.\n   */\n  @Prop({ reflect: true }) size?: IcLoadingSizes = \"default\";\n\n  /**\n   * The type of indicator, either linear or circular.\n   */\n  @Prop({ reflect: true }) type?: IcLoadingTypes = \"circular\";\n\n  /**\n   * If `true`, when linear, the full-width variant (i.e. without a border radius) will be displayed.\n   */\n  @Prop({ reflect: true }) fullWidth?: boolean = false;\n\n  /**\n   * The appearance of the loading indicator, e.g. dark or light.\n   */\n  @Prop() appearance?: IcThemeForegroundNoDefault = \"dark\";\n\n  @State() indicatorLabel: string;\n  @State() indeterminate: boolean;\n  @State() showSecond: boolean = false;\n  @State() circularLineWidth: number;\n  @State() circularDiameter: number;\n\n  @Watch(\"label\")\n  watchPropHandler(): void {\n    this.updateLabel();\n  }\n\n  @Watch(\"progress\")\n  watchProgressHandler(): void {\n    if (this.type === \"circular\") {\n      this.updateCircularProgressMeter();\n    }\n  }\n\n  private outerElement?: HTMLDivElement;\n  private innerElement?: HTMLDivElement;\n  private labelList: string[];\n  private circularMeter: SVGCircleElement;\n\n  private updateCircularProgressMeter = () => {\n    if (!this.indeterminate) {\n      this.circularMeter.style.setProperty(\n        \"--progress-value\",\n        String(this.progress)\n      );\n    }\n  };\n\n  private getLabel = (\n    labelIndex: number,\n    setLabel: (label: string) => void\n  ) => {\n    return new Promise(() => {\n      setInterval(() => {\n        if (labelIndex < this.labelList.length - 1) {\n          labelIndex++;\n        } else {\n          labelIndex = 0;\n        }\n        setLabel(this.labelList[labelIndex]);\n      }, this.labelDuration);\n    });\n  };\n\n  private getLabelVariant = () => {\n    let variant: \"label\" | \"h4\" | \"h2\" = \"h4\";\n    const width = this.outerElement?.offsetWidth;\n    if (this.size === \"small\" || (this.type === \"circular\" && width < 60)) {\n      variant = \"label\";\n    } else if (\n      this.size === \"large\" ||\n      (this.type === \"circular\" && width >= 120)\n    ) {\n      variant = \"h2\";\n    }\n    return variant;\n  };\n\n  // Sets the circular indicator line width - accounting for the circle size being altered using the CSS custom property\n  private setCircleLineWidth = () => {\n    const { offsetWidth: width } = this.outerElement;\n\n    const compactStepCircularLineWidth = this.host.classList.contains(\n      \"compact-step-progress-indicator\"\n    )\n      ? 40\n      : 0;\n    const toastDismissTimerCircularLineWidth = this.host.classList.contains(\n      \"toast-dismiss-timer\"\n    )\n      ? 20\n      : 0;\n\n    if (\n      width ||\n      compactStepCircularLineWidth ||\n      toastDismissTimerCircularLineWidth\n    ) {\n      this.circularLineWidth =\n        (compactStepCircularLineWidth ||\n          toastDismissTimerCircularLineWidth ||\n          width) * 0.1;\n      this.circularDiameter =\n        compactStepCircularLineWidth ||\n        toastDismissTimerCircularLineWidth ||\n        width;\n      this.outerElement.style.setProperty(\n        \"--circular-line-width\",\n        `${this.circularLineWidth}px`\n      );\n    }\n  };\n\n  private setLinearDeterminateWidth = () => {\n    if (!this.innerElement) return;\n    // Ensure progress cannot be out of bounds\n\n    const progress = Math.min(this.max, Math.max(this.min, this.progress));\n    const proportion = (progress - this.min) / (this.max - this.min);\n    this.showSecond = proportion > 0.5;\n    if (this.showSecond) {\n      this.innerElement.classList.remove(\"clip\");\n    } else {\n      this.innerElement.classList.add(\"clip\");\n    }\n    this.innerElement.style.setProperty(\n      \"--linear-width\",\n      `${proportion * 100}%`\n    );\n  };\n\n  private calcOuterClass = (): string => {\n    let cls = `ic-loading-${this.type}-outer`;\n    cls += this.indeterminate ? \" indeterminate\" : \" determinate\";\n    return cls;\n  };\n\n  private updateLabel = (): void => {\n    if (this.label !== undefined) {\n      this.labelList = this.label.split(\"/\");\n      const labelIndex = 0;\n      this.indicatorLabel = this.labelList[labelIndex];\n      if (this.labelList.length > 1) {\n        this.getLabel(labelIndex, (label) => {\n          this.indicatorLabel = label;\n        });\n      }\n    }\n  };\n\n  private setCircleXY = (): IcLoadingCircleXYR => {\n    if (this.circularDiameter > 0) {\n      const r = this.circularDiameter / 2;\n      const x = r;\n      const y = r;\n      const nextRadius = r - this.circularLineWidth / 2;\n      this.setDashSteps(nextRadius);\n\n      return { x, y, r: nextRadius };\n    }\n    return { x: 0, y: 0, r: 0 };\n  };\n\n  private setDashSteps = (radius: number) => {\n    const dashArray = 2 * Math.PI * radius;\n    const progress = Math.min(Math.max(this.progress, this.min), this.max);\n    const proportion = -1 - (progress - this.min) / (this.max - this.min);\n\n    this.circularMeter.style.setProperty(\n      \"--stroke-dasharray\",\n      `${dashArray}px`\n    );\n\n    if (!this.indeterminate) {\n      this.circularMeter.style.setProperty(\n        \"--circular-steps-max\",\n        String(this.max)\n      );\n      this.circularMeter.style.setProperty(\n        \"--stroke-dashoffset\",\n        `${proportion * dashArray}px`\n      );\n    }\n  };\n\n  componentWillLoad(): void {\n    this.indeterminate = this.progress === undefined;\n    this.updateLabel();\n  }\n\n  componentDidLoad(): void {\n    if (this.type === \"circular\") {\n      this.setCircleLineWidth();\n      this.circularMeter = this.host.shadowRoot.querySelector(\n        \".ic-loading-circular-svg circle:nth-child(2)\"\n      );\n      this.updateCircularProgressMeter();\n    }\n\n    if (Number(this.progress) >= 0 && this.type === \"linear\") {\n      this.setLinearDeterminateWidth();\n    }\n  }\n\n  componentWillUpdate(): void {\n    this.indeterminate = this.progress === undefined;\n  }\n\n  componentDidUpdate(): void {\n    if (Number(this.progress) >= 0 && this.type === \"linear\") {\n      this.setLinearDeterminateWidth();\n    }\n  }\n\n  render() {\n    const { appearance, label, description, size } = this;\n    const { x, y, r } = this.setCircleXY();\n\n    return (\n      <Host class={{ [\"light\"]: appearance === IcThemeForegroundEnum.Light }}>\n        <div class=\"ic-loading-container\">\n          <div\n            ref={(el) => (this.outerElement = el as HTMLDivElement)}\n            class={this.calcOuterClass()}\n            role=\"progressbar\"\n            aria-labelledby={\n              this.label && this.size !== \"icon\" && \"ic-loading-label\"\n            }\n            aria-label={description}\n            aria-valuenow={this.progress}\n            aria-valuemin={this.min}\n            aria-valuemax={this.max}\n          >\n            <div\n              ref={(el) => (this.innerElement = el as HTMLDivElement)}\n              class={`ic-loading-${this.type}-inner`}\n            >\n              {this.innerLabel &&\n                this.innerLabel !== undefined &&\n                this.size === \"small\" && (\n                  <ic-typography variant=\"subtitle-small\" class=\"inner-text\">\n                    {this.innerLabel}\n                  </ic-typography>\n                )}\n              {this.type === \"circular\" && (\n                <svg\n                  class=\"ic-loading-circular-svg\"\n                  viewBox={`0 0 ${this.circularDiameter || 0} ${\n                    this.circularDiameter || 0\n                  }`}\n                >\n                  <circle cx={`${x}`} cy={`${y}`} r={`${r}`}></circle>\n                  <circle cx={`${x}`} cy={`${y}`} r={`${r}`}></circle>\n                </svg>\n              )}\n            </div>\n          </div>\n          {label && size !== \"icon\" && (\n            <ic-typography\n              id=\"ic-loading-label\"\n              class=\"ic-loading-label\"\n              role=\"status\"\n              variant={this.getLabelVariant()}\n            >\n              <p>{this.indicatorLabel}</p>\n            </ic-typography>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -441,6 +441,10 @@ video {
 }
 
 
+/**
+ * @prop --ic-z-index-menu: z-index of menu
+ */
+
 @media (prefers-reduced-motion: no-preference) {
   :host([open]) .menu {
     transition: max-height var(--ic-transition-duration-slow);
@@ -450,11 +454,11 @@ video {
 :host {
   border-radius: var(--ic-border-radius);
   max-height: 0;
-  width: var(--input-width, 320px);
+  width: var(--input-width, 20rem);
   color: var(--ic-color-primary-text);
   background-color: var(--ic-architectural-white);
   position: relative;
-  z-index: var(--ic-z-index-popup-menu);
+  z-index: var(--ic-z-index-menu);
   box-sizing: border-box;
   box-shadow: var(--ic-elevation-overlay);
 }
@@ -466,7 +470,7 @@ video {
 .menu {
   text-decoration: none;
   list-style-type: none;
-  border: 1px solid var(--ic-architectural-400);
+  border: 0.063rem solid var(--ic-architectural-400);
   border-radius: var(--ic-border-radius);
   background-color: var(--ic-architectural-white);
   visibility: hidden;
@@ -489,7 +493,7 @@ video {
 
 :host([open]) .menu {
   visibility: visible;
-  max-height: 322px;
+  max-height: 20.125rem;
 }
 
 :host(.full-width) {
@@ -497,7 +501,7 @@ video {
 }
 
 .option {
-  padding: 8px 7px;
+  padding: 0.5rem 0.438rem;
   cursor: pointer;
   display: flex;
   justify-content: space-between;
@@ -505,15 +509,15 @@ video {
 }
 
 :host([small]) .option {
-  padding: 4px 7px;
+  padding: 0.25rem 0.438rem;
 }
 
 .option:last-child {
-  border-radius: 0 0 1px 1px;
+  border-radius: 0 0 0.063rem 0.063rem;
 }
 
 .option:first-child {
-  border-radius: 1px 1px 0 0;
+  border-radius: 0.063rem 0.063rem 0 0;
 }
 
 .option:not(.disabled-option):hover {
@@ -537,26 +541,27 @@ video {
 }
 
 .check-icon {
-  height: 24px;
-  margin-left: 8px;
+  height: var(--ic-space-lg);
+  width: var(--ic-space-lg);
+  margin-left: 0.5rem;
   pointer-events: none;
 }
 
 .focused-option .check-icon * {
-  fill: currentColor;
+  fill: currentcolor;
 }
 
 .option-group-title {
-  padding: 24px 7px 8px;
+  padding: 1.5rem 0.438rem 0.5rem;
   color: var(--ic-color-tertiary-text);
 }
 
 :host([small]) .option-group-title {
-  padding: 12px 7px 4px;
+  padding: 0.75rem 0.438rem 0.25rem;
 }
 
 .last-recommended-option {
-  border-bottom: 1px solid var(--ic-architectural-400);
+  border-bottom: 0.063rem solid var(--ic-architectural-400);
 }
 
 .disabled-option {
@@ -582,6 +587,6 @@ video {
 @media (forced-colors: active) {
   .focused-option:focus {
     outline: none;
-    border: 2px solid transparent;
+    border: 0.125rem solid transparent;
   }
 }