@ukic/web-components 2.1.0-beta.0 → 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":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAE1E,OAAO,SAAS,MAAM,wBAAwB,CAAC;AAC/C,OAAO,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAC7E,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAGL,qBAAqB,GACtB,MAAM,mBAAmB,CAAC;AAE3B;;GAEG;AAOH,MAAM,OAAO,IAAI;;IACP,wBAAmB,GAA6B,EAAE,CAAC;oBAQrB,KAAK;gBAKnB,IAAI;;;;;;sBA8B8B,SAAS;;EAGnE,kBAAkB,CAAC,EAAe;IAChC,MAAM,KAAK,GAAY,EAAE,CAAC,MAAM,CAAC;IACjC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;EAC/B,CAAC;EAEO,WAAW,CAAC,WAA8B,IAAI;IACpD,MAAM,KAAK,GAAG,mBAAmB,CAAC,IAAI,CAAC,EAAE,EAAE,QAAQ,IAAI,IAAI,CAAC,CAAC;IAE7D,QAAQ,KAAK,EAAE;MACb,KAAK,qBAAqB,CAAC,KAAK;QAC9B,IAAI,CAAC,UAAU,GAAG,qBAAqB,CAAC,KAAK,CAAC;QAC9C,MAAM;MACR,KAAK,qBAAqB,CAAC,IAAI;QAC7B,IAAI,CAAC,UAAU,GAAG,qBAAqB,CAAC,IAAI,CAAC;QAC7C,MAAM;KACT;EACH,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,mBAAmB,GAAG,iBAAiB,CAAC,IAAI,CAAC,EAAE,EAAE;MACpD,GAAG,iBAAiB;MACpB,eAAe;KAChB,CAAC,CAAC;EACL,CAAC;EAED,gBAAgB;IACd,IAAI,CAAC,WAAW,EAAE,CAAC;EACrB,CAAC;EAEO,aAAa;IACnB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;IAChE,IAAI,IAAI,CAAC,UAAU,EAAE;MACnB,IAAI,CAAC,UAAU,CAAC,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC;KACzD;IACD,OAAO,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC;EAC3B,CAAC;EAED,MAAM;IACJ,MAAM,EACJ,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,cAAc,EACd,GAAG,EACH,MAAM,EACN,QAAQ,EACR,UAAU,GACX,GAAG,IAAI,CAAC;IAET,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,CAAC,GAAG,UAAU,EAAE,CAAC,EAAE,IAAI,EAAE,IACrD,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC,CACtB,YAAM,IAAI,EAAC,aAAa,GAAQ,CACjC,CAAC,CAAC,CAAC,CACF,uBACE,KAAK,EAAE;QACL,CAAC,SAAS,CAAC,EAAE,IAAI,KAAK,IAAI;QAC1B,CAAC,GAAG,UAAU,EAAE,CAAC,EAAE,IAAI,KAAK,IAAI;OACjC,EACD,QAAQ,EAAE,QAAQ,KAAK,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,EAC9C,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,cAAc,EAC9B,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,IAChC,IAAI,CAAC,mBAAmB;MAE5B,eAAQ;MACP,QAAQ,IAAI,CACX,YAAM,KAAK,EAAC,0BAA0B,EAAC,SAAS,EAAE,SAAS,GAAI,CAChE,CACC,CACL,CACI,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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);
@@ -456,6 +456,12 @@ video {
   --linear-line-height: var(--ic-space-xs);
 }
 
+:host(.light) {
+  --inner-color: var(--ic-architectural-white);
+  --outer-color: var(--ic-architectural-800);
+  --label-color: var(--ic-architectural-white);
+}
+
 .ic-loading-container {
   display: flex;
   flex-direction: column;
@@ -464,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: 160px;
+  --circular-diameter: 7.5rem;
 }
 
 :host([size="icon"]) {
   display: inline-block;
 
   --margin: var(--ic-space-xxxs);
-  --circular-diameter: 20px;
+  --circular-diameter: 1.25rem;
 }
 
 :host([label]) {
@@ -494,11 +500,8 @@ video {
 }
 
 .ic-loading-circular-outer {
-  box-shadow: inset 0 0 0 var(--circular-line-width) var(--outer-color);
   height: var(--circular-diameter);
   width: var(--circular-diameter);
-  border-radius: 50%;
-  position: relative;
 }
 
 .ic-loading-circular-outer.indeterminate {
@@ -506,99 +509,6 @@ video {
   animation-iteration-count: infinite;
 }
 
-.ic-loading-circular-inner {
-  height: var(--circular-diameter);
-  width: var(--circular-diameter);
-  border-radius: 50%;
-  position: relative;
-}
-
-.indeterminate > .ic-loading-circular-inner {
-  box-shadow: inset 0 0 0 var(--circular-line-width) var(--inner-color);
-  -webkit-clip-path: inset(0 50% 50% 0);
-          clip-path: inset(0 50% 50% 0);
-}
-
-.determinate > .ic-loading-circular-inner {
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-}
-
-.determinate > .ic-loading-circular-inner.clip {
-  clip: rect(
-    0,
-    var(--circular-diameter),
-    var(--circular-diameter),
-    calc(var(--circular-diameter) / 2)
-  );
-}
-
-.ic-loading-circular-inner .left,
-.ic-loading-circular-inner .right {
-  height: 100%;
-  width: 100%;
-  border: var(--circular-line-width) solid var(--inner-color);
-  border-radius: 50%;
-  box-sizing: border-box;
-  clip: rect(
-    0,
-    calc(var(--circular-diameter) / 2),
-    var(--circular-diameter),
-    0
-  );
-  position: absolute;
-  left: 0;
-  top: 0;
-}
-
-.indeterminate > .ic-loading-circular-inner .left,
-.indeterminate > .ic-loading-circular-inner .right {
-  display: none;
-}
-
-.determinate > .ic-loading-circular-inner .left {
-  transform: rotate(var(--circular-rotation));
-}
-
-.determinate > .ic-loading-circular-inner .right {
-  transform: rotate(180deg);
-}
-
-.determinate > .ic-loading-circular-inner.clip .right {
-  display: none;
-}
-
-.ic-loading-circular-outer::before {
-  content: "";
-  height: var(--circular-line-width);
-  width: var(--circular-line-width);
-  border-radius: 50%;
-  background-color: var(--inner-color);
-  position: absolute;
-  display: block;
-  top: calc(50% - var(--circular-line-width) / 2);
-}
-
-.ic-loading-circular-outer::after {
-  content: "";
-  height: var(--circular-line-width);
-  width: var(--circular-line-width);
-  border-radius: 50%;
-  background-color: var(--inner-color);
-  position: absolute;
-  display: block;
-  top: 0;
-  left: calc(50% - var(--circular-line-width) / 2);
-}
-
-.ic-loading-circular-outer.determinate::before,
-.ic-loading-circular-outer.determinate::after {
-  display: none;
-}
-
 @keyframes circular-animation {
   100% {
     transform: rotate(360deg);
@@ -665,8 +575,89 @@ video {
   }
 }
 
-:host(.light) {
-  --inner-color: var(--ic-architectural-white);
-  --outer-color: var(--ic-architectural-800);
-  --label-color: var(--ic-architectural-white);
+.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(--outer-color);
+  stroke-width: var(--circular-line-width);
+  stroke-linecap: round;
+}
+
+/* --stroke-dash-array calculated via dashArray method */
+.ic-loading-circular-svg circle:nth-child(2) {
+  --circular-indeterminate: calc(
+    (0.25 * var(--stroke-dasharray)) - var(--stroke-dasharray)
+  );
+
+  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 {
+  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 **/
+@media (forced-colors: active) {
+  .indeterminate > .ic-loading-circular-inner {
+    forced-color-adjust: none;
+  }
+
+  .ic-loading-linear-outer {
+    border: var(--ic-hc-border);
+  }
+
+  .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;
+  }
 }