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

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

@@ -521,12 +521,21 @@ a:link:visited > ::slotted(svg) {
 :host(.footer-link) a:link:focus,
 :host(.footer-link) a ::slotted(a:link:hover),
 :host(.footer-link) a ::slotted(a:link:focus) {
-  outline: none;
   text-decoration-line: underline;
   text-decoration-thickness: 25%;
   text-underline-offset: 25%;
 }
 
+:host(.footer-link) a:link:hover,
+:host(.footer-link) a ::slotted(a:link:hover) {
+  outline: none;
+}
+
+:host(.footer-link) a:link:focus,
+:host(.footer-link) a ::slotted(a:link:focus) {
+  outline: var(--ic-hc-focus-outline);
+}
+
 :host(.footer-link) a:link:focus > ::slotted(svg),
 :host(.footer-link) a:link:focus > ::slotted(img),
 :host(.footer-link) a ::slotted(a:link:focus > ::slotted(svg)),
@@ -538,7 +547,7 @@ a:link:visited > ::slotted(svg) {
 :host(.footer-link) a:focus,
 :host(.footer-link) a ::slotted(a:focus) {
   border-radius: var(--ic-border-radius);
-  outline: none;
+  outline: var(--ic-hc-focus-outline);
   transition: var(--ic-transition-duration-fast);
 }
 
@@ -556,3 +565,10 @@ a:link:visited > ::slotted(svg) {
 :host(.footer-link) a ::slotted(a:hover) {
   text-decoration: none;
 }
+
+@media (forced-colors: active) {
+  :host(.footer-link-light) ::slotted(svg),
+  :host(.footer-link-dark) ::slotted(svg) {
+    fill: currentcolor;
+  }
+}

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

@@ -482,14 +482,14 @@ video {
 :host(.footer-link-group-sparse:focus) {
   box-shadow: var(--ic-border-focus-inset);
   border-radius: var(--ic-border-radius-inset);
-  outline: none;
+  outline: var(--ic-hc-focus-outline);
   z-index: 1;
 }
 
 :host(.footer-link-group-small:focus) {
   box-shadow: var(--ic-border-focus-inset);
   border-radius: var(--ic-border-radius-inset);
-  outline: none;
+  outline: var(--ic-hc-focus-outline);
   z-index: 1;
 }
 

package/dist/collection/components/ic-input-component-container/ic-input-component-container.css

@@ -14,6 +14,7 @@ ic-input-component-container {
   box-sizing: border-box;
   position: relative;
   fill: var(--ic-architectural-400);
+  outline: none;
 }
 
 ic-input-component-container.fullwidth {
@@ -117,3 +118,21 @@ ic-input-component-container:hover {
 .focus-indicator.dark:focus-within {
   box-shadow: var(--ic-border-focus);
 }
+
+@media (forced-colors: active) {
+  /* Styles here only apply to Forced Colors Mode */
+  ic-input-component-container,
+  .focus-indicator {
+    transition: none;
+  }
+
+  ic-input-component-container:focus-within {
+    border: 1px solid Highlight;
+    outline: 2px solid Highlight;
+  }
+
+  ic-input-component-container.disabled,
+  ic-input-component-container.disabled:hover {
+    border: 1px dashed GrayText;
+  }
+}

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

@@ -468,12 +468,21 @@ video {
 :host(.link) .ic-link:focus,
 :host(.link) ::slotted(a:hover),
 :host(.link) ::slotted(a:focus) {
-  outline: none;
   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,
@@ -536,7 +545,7 @@ video {
 
 :host(.breadcrumb-link.current-page) .ic-link,
 :host(.breadcrumb-link.current-page) ::slotted(a:focus) {
-  outline: none;
+  outline: var(--ic-hc-focus-outline);
   text-decoration: none;
 }
 

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

@@ -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;
@@ -473,7 +479,7 @@ video {
 }
 
 :host([size="large"]) {
-  --circular-diameter: 160px;
+  --circular-diameter: 120px;
 }
 
 :host([size="icon"]) {
@@ -494,11 +500,9 @@ 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 +510,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 +576,52 @@ 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(--inner-color);
+}
+
+/** 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;
+  }
 }

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

@@ -2,6 +2,11 @@ import { h, Host } from "@stencil/core";
 import { IcThemeForegroundEnum, } from "../../utils/types";
 export class LoadingIndicator {
   constructor() {
+    this.updateCircularProgressMeter = () => {
+      if (!this.indeterminate) {
+        this.circularMeter.style.setProperty("--progress-value", String(this.progress));
+      }
+    };
     this.getLabel = (labelIndex, setLabel) => {
       return new Promise(() => {
         setInterval(() => {
@@ -30,13 +35,14 @@ export class LoadingIndicator {
     };
     // Sets the circular indicator line width - accounting for the circle size being altered using the CSS custom property
     this.setCircleLineWidth = () => {
-      var _a;
-      const width = (_a = this.outerElement) === null || _a === void 0 ? void 0 : _a.offsetWidth;
+      const { offsetWidth: width } = this.outerElement;
       if (width) {
-        this.outerElement.style.setProperty("--circular-line-width", `${width * 0.1}px`);
+        this.circularLineWidth = width * 0.1;
+        this.circularDiameter = width;
+        this.outerElement.style.setProperty("--circular-line-width", `${this.circularLineWidth}px`);
       }
     };
-    this.setDeterminateWidth = () => {
+    this.setLinearDeterminateWidth = () => {
       if (!this.innerElement)
         return;
       // Ensure progress cannot be out of bounds
@@ -49,7 +55,6 @@ export class LoadingIndicator {
       else {
         this.innerElement.classList.add("clip");
       }
-      this.innerElement.style.setProperty("--circular-rotation", `${proportion * 360}deg`);
       this.innerElement.style.setProperty("--linear-width", `${proportion * 100}%`);
     };
     this.calcOuterClass = () => {
@@ -69,6 +74,27 @@ export class LoadingIndicator {
         }
       }
     };
+    this.setCircleXY = () => {
+      if (this.circularDiameter) {
+        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 };
+      }
+      return { x: 0, y: 0, r: 0 };
+    };
+    this.setDashSteps = (radius) => {
+      const dashArray = 2 * Math.PI * radius;
+      const progress = Math.min(Math.max(this.progress, this.min), this.max);
+      const proportion = -1 - (progress - this.min) / (this.max - this.min);
+      this.circularMeter.style.setProperty("--stroke-dasharray", `${dashArray}px`);
+      if (!this.indeterminate) {
+        this.circularMeter.style.setProperty("--circular-steps-max", String(this.max));
+        this.circularMeter.style.setProperty("--stroke-dashoffset", `${proportion * dashArray}px`);
+      }
+    };
     this.progress = undefined;
     this.min = 0;
     this.max = 100;
@@ -82,31 +108,41 @@ export class LoadingIndicator {
     this.indicatorLabel = undefined;
     this.indeterminate = undefined;
     this.showSecond = false;
+    this.circularLineWidth = undefined;
+    this.circularDiameter = undefined;
   }
   watchPropHandler() {
     this.updateLabel();
   }
+  watchProgressHandler() {
+    this.updateCircularProgressMeter();
+  }
   componentWillLoad() {
     this.indeterminate = this.progress === undefined;
     this.updateLabel();
   }
   componentDidLoad() {
-    this.setCircleLineWidth();
-    if (Number(this.progress) >= 0) {
-      this.setDeterminateWidth();
+    if (this.type === "circular") {
+      this.setCircleLineWidth();
+      this.circularMeter = this.host.shadowRoot.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.setDeterminateWidth();
+    if (Number(this.progress) >= 0 && this.type === "linear") {
+      this.setLinearDeterminateWidth();
     }
   }
   render() {
     const { appearance, label, description, size } = this;
-    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.indeterminate || h("div", { class: "left" }), this.indeterminate || h("div", { class: "right" }))), label && size !== "icon" && (h("ic-typography", { id: "ic-loading-label", class: "ic-loading-label", role: "status", variant: this.getLabelVariant() }, h("p", null, this.indicatorLabel))))));
+    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))))));
   }
   static get is() { return "ic-loading-indicator"; }
   static get encapsulation() { return "shadow"; }
@@ -321,7 +357,9 @@ export class LoadingIndicator {
     return {
       "indicatorLabel": {},
       "indeterminate": {},
-      "showSecond": {}
+      "showSecond": {},
+      "circularLineWidth": {},
+      "circularDiameter": {}
     };
   }
   static get elementRef() { return "host"; }
@@ -329,6 +367,9 @@ export class LoadingIndicator {
     return [{
         "propName": "label",
         "methodName": "watchPropHandler"
+      }, {
+        "propName": "progress",
+        "methodName": "watchProgressHandler"
       }];
   }
 }

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 { IcLoadingSizes, IcLoadingTypes } from \"./ic-loading-indicator.types\";\nimport {\n  IcThemeForegroundNoDefault,\n  IcThemeForegroundEnum,\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\n  @Watch(\"label\")\n  watchPropHandler(): void {\n    this.updateLabel();\n  }\n\n  private outerElement?: HTMLDivElement;\n  private innerElement?: HTMLDivElement;\n  private labelList: string[];\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 width = this.outerElement?.offsetWidth;\n    if (width) {\n      this.outerElement.style.setProperty(\n        \"--circular-line-width\",\n        `${width * 0.1}px`\n      );\n    }\n  };\n\n  private setDeterminateWidth = () => {\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      \"--circular-rotation\",\n      `${proportion * 360}deg`\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  componentWillLoad(): void {\n    this.indeterminate = this.progress === undefined;\n    this.updateLabel();\n  }\n\n  componentDidLoad(): void {\n    this.setCircleLineWidth();\n    if (Number(this.progress) >= 0) {\n      this.setDeterminateWidth();\n    }\n  }\n\n  componentWillUpdate(): void {\n    this.indeterminate = this.progress === undefined;\n  }\n\n  componentDidUpdate(): void {\n    if (Number(this.progress) >= 0) {\n      this.setDeterminateWidth();\n    }\n  }\n\n  render() {\n    const { appearance, label, description, size } = this;\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.indeterminate || <div class=\"left\" />}\n              {this.indeterminate || <div class=\"right\" />}\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   * 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"]}

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

@@ -1 +1 @@
-{"version":3,"file":"ic-loading-indicator.types.js","sourceRoot":"","sources":["../../../src/components/ic-loading-indicator/ic-loading-indicator.types.tsx"],"names":[],"mappings":"","sourcesContent":["export type IcLoadingSizes = \"default\" | \"small\" | \"large\" | \"icon\";\n\nexport type IcLoadingTypes = \"circular\" | \"linear\";\n"]}
+{"version":3,"file":"ic-loading-indicator.types.js","sourceRoot":"","sources":["../../../src/components/ic-loading-indicator/ic-loading-indicator.types.tsx"],"names":[],"mappings":"","sourcesContent":["export type IcLoadingSizes = \"default\" | \"small\" | \"large\" | \"icon\";\n\nexport type IcLoadingTypes = \"circular\" | \"linear\";\n\nexport interface IcLoadingCircleXYR {\n  x: number;\n  y: number;\n  r: number;\n}\n"]}

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

@@ -525,7 +525,7 @@ video {
 }
 
 .option:focus-visible {
-  outline: none;
+  outline: var(--ic-hc-focus-outline);
 }
 
 .option:not(.disabled-option) .option-description {
@@ -543,7 +543,7 @@ video {
 }
 
 .focused-option .check-icon * {
-  fill: white;
+  fill: currentColor;
 }
 
 .option-group-title {
@@ -578,3 +578,10 @@ video {
 :host(.no-results) li:hover {
   background-color: transparent;
 }
+
+@media (forced-colors: active) {
+  .focused-option:focus {
+    outline: none;
+    border: 2px solid transparent;
+  }
+}

package/dist/collection/components/ic-navigation-group/ic-navigation-group.css

@@ -524,7 +524,7 @@ video {
 :host(:not(.in-side-menu)) .navigation-group:focus {
   box-shadow: var(--ic-border-focus);
   border-radius: var(--ic-border-radius);
-  outline: none;
+  outline: var(--ic-hc-focus-outline);
   z-index: 1;
   transition: box-shadow var(--ic-easing-transition-fast);
 }
@@ -539,6 +539,10 @@ video {
   outline: none;
 }
 
+:host(.in-side-menu) .navigation-group-side-menu:focus {
+  outline: var(--ic-hc-focus-outline);
+}
+
 :host(.in-side-menu) .navigation-group-side-menu-expanded:hover:not(:focus),
 :host(.in-side-menu) .navigation-group-side-menu-collapsed:hover:not(:focus) {
   background-color: var(--ic-action-dark-bg-hover);
@@ -557,7 +561,7 @@ video {
   color: var(--ic-action-default);
   box-shadow: var(--ic-border-focus-inset);
   border-radius: var(--ic-border-radius-inset);
-  outline: none;
+  outline: var(--ic-hc-focus-outline);
 }
 
 :host .navigation-group-dropdown {

package/dist/collection/components/ic-navigation-item/ic-navigation-item.css

@@ -531,21 +531,21 @@ ic-typography {
 :host(.navigation-item) ::slotted(a:focus) {
   box-shadow: var(--ic-border-focus);
   border-radius: var(--ic-border-radius);
-  outline: none;
+  outline: var(--ic-hc-focus-outline);
 }
 
 :host(.navigation-item-selected) .link:focus,
 :host(.navigation-item) ::slotted(a.active:focus) {
   box-shadow: var(--ic-border-focus);
   border-radius: var(--ic-border-radius);
-  outline: none;
+  outline: var(--ic-hc-focus-outline);
 }
 
 :host(.navigation-item-selected.dark) .link:focus,
 :host(.navigation-item.dark) ::slotted(a.active:focus) {
   box-shadow: var(--ic-border-focus);
   border-radius: var(--ic-border-radius);
-  outline: none;
+  outline: var(--ic-hc-focus-outline);
 }
 
 :host(.navigation-item) .link:active:not(:focus),
@@ -638,7 +638,7 @@ ic-typography {
 :host(.navigation-item-top-nav-child) .link:focus,
 :host(.navigation-item-top-nav-child) ::slotted(a:focus) {
   z-index: 1;
-  outline: none;
+  outline: var(--ic-hc-focus-outline);
   border-radius: var(--ic-border-radius-inset);
   box-shadow: var(--ic-border-focus-inset);
   transition: border-radius 0s, box-shadow var(--ic-transition-duration-fast);
@@ -655,7 +655,7 @@ ic-typography {
 
 :host(.navigation-item-top-nav-child) .link:active:not(:focus),
 :host(.navigation-item-top-nav-child) ::slotted(a:active):not(:focus) {
-  outline: none;
+  outline: var(--ic-hc-focus-outline);
   background-color: var(--ic-action-dark-bg-active);
 }