@ukic/web-components 2.1.0-beta.9 → 2.3.0

package/dist/collection/components/ic-link/test/basic/ic-link.spec.js

@@ -0,0 +1,203 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { Alert } from "../../../ic-alert/ic-alert";
+import { Link } from "../../ic-link";
+describe("ic-link component", () => {
+  it("should render a link by default with the correct text", async () => {
+    const page = await newSpecPage({
+      components: [Link],
+      html: `<ic-link>IC Link Test</ic-link>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <ic-link class="default link">
+      <mock:shadow-root>
+        <a tabindex="-1">
+        <slot></slot>
+        </a>
+        </mock:shadow-root>
+        IC Link Test
+      </ic-link>
+    `);
+  });
+  it("should apply the 'download' attribute to the anchor element", async () => {
+    const page = await newSpecPage({
+      components: [Link],
+      html: `<ic-link download="test-download">IC Link Test</ic-link>`,
+    });
+    expect(page.root)
+      .toEqualHtml(`<ic-link class="default link" download="test-download">
+    <mock:shadow-root>
+        <a download="test-download" tabindex="-1">
+        <slot></slot>
+        </a>
+        </mock:shadow-root>
+        IC Link Test
+      </ic-link>
+    `);
+  });
+  it("should apply the 'href' attribute and ic-link styling to the anchor element", async () => {
+    const page = await newSpecPage({
+      components: [Link],
+      html: `<ic-link href="test-href">IC Link Test</ic-link>`,
+    });
+    expect(page.root)
+      .toEqualHtml(`<ic-link href="test-href" class="default link">
+    <mock:shadow-root>
+        <a class="default ic-link" href="test-href" tabindex="0">
+        <slot></slot>
+        </a>
+        </mock:shadow-root>
+        IC Link Test
+      </ic-link>
+    `);
+  });
+  it("should apply the 'dark' appearance styling and ic-link styling", async () => {
+    const page = await newSpecPage({
+      components: [Link],
+      html: `<ic-link  href="test-href" appearance="dark">IC Link Test</ic-link>`,
+    });
+    expect(page.root)
+      .toEqualHtml(`<ic-link href="test-href" appearance="dark" class="dark link">
+    <mock:shadow-root>
+        <a class="dark ic-link" href="test-href" tabindex="0">
+        <slot></slot>
+        </a>
+        </mock:shadow-root>
+        IC Link Test
+      </ic-link>
+    `);
+  });
+  it("should apply the 'hreflang' attribute to the anchor element", async () => {
+    const page = await newSpecPage({
+      components: [Link],
+      html: `<ic-link hreflang="test-hreflang">IC Link Test</ic-link>`,
+    });
+    expect(page.root)
+      .toEqualHtml(`<ic-link class="default link" hreflang="test-hreflang">
+    <mock:shadow-root>
+        <a hreflang="test-hreflang" tabindex="-1">
+        <slot></slot>
+        </a>
+        </mock:shadow-root>
+        IC Link Test
+      </ic-link>
+    `);
+  });
+  it("should apply the 'referrerpolicy' attribute to the anchor element", async () => {
+    const page = await newSpecPage({
+      components: [Link],
+      html: `<ic-link referrerpolicy="no-referrer">IC Link Test</ic-link>`,
+    });
+    expect(page.root)
+      .toEqualHtml(`<ic-link class="default link" referrerpolicy="no-referrer">
+    <mock:shadow-root>
+        <a referrerpolicy="no-referrer" tabindex="-1">
+        <slot></slot>
+        </a>
+        </mock:shadow-root>
+        IC Link Test
+      </ic-link>
+    `);
+  });
+  it("should apply the 'rel' attribute to the anchor element", async () => {
+    const page = await newSpecPage({
+      components: [Link],
+      html: `<ic-link rel="test-rel">IC Link Test</ic-link>`,
+    });
+    expect(page.root).toEqualHtml(`<ic-link class="default link" rel="test-rel">
+    <mock:shadow-root>
+        <a rel="test-rel" tabindex="-1">
+        <slot></slot>
+        </a>
+        </mock:shadow-root>
+        IC Link Test
+      </ic-link>
+    `);
+  });
+  it("should apply the 'target' attribute to the anchor element", async () => {
+    const page = await newSpecPage({
+      components: [Link],
+      html: `<ic-link target="test-target">IC Link Test</ic-link>`,
+    });
+    expect(page.root)
+      .toEqualHtml(`<ic-link class="default link" target="test-target">
+    <mock:shadow-root>
+        <a target="test-target" tabindex="-1">
+        <slot></slot>
+        </a>
+        </mock:shadow-root>
+        IC Link Test
+      </ic-link>
+    `);
+  });
+  it("should render an 'open in new' icon when 'show-icon' is provided", async () => {
+    const page = await newSpecPage({
+      components: [Link],
+      html: `<ic-link show-icon>IC Link Test</ic-link>`,
+    });
+    expect(page.root).toEqualHtml(`<ic-link class="default link" show-icon>
+    <mock:shadow-root>
+        <a tabindex="-1">
+          <slot></slot>
+          <span class="ic-link-open-in-new-icon">
+            svg
+          </span>
+        </a>
+        </mock:shadow-root>
+        IC Link Test
+      </ic-link>
+    `);
+  });
+  it("should render a slotted link", async () => {
+    const page = await newSpecPage({
+      components: [Link],
+      html: `<ic-link>
+        <ic-link slot="router-item">Slotted Link</ic-link>
+      </ic-link>`,
+    });
+    expect(page.root).toEqualHtml(`<ic-link class="default link">
+    <mock:shadow-root>
+      <slot name="router-item"></slot>
+    </mock:shadow-root>
+    <ic-link class="default link" slot="router-item">
+      <mock:shadow-root>
+        <a tabindex="-1">
+          <slot></slot>
+        </a>
+      </mock:shadow-root>
+      Slotted Link
+      </ic-link>
+      </ic-link>
+    `);
+  });
+  it("should get theme from context", async () => {
+    const page = await newSpecPage({
+      components: [Alert, Link],
+      html: `<ic-alert message="This has an action"><ic-link slot="action">Theme context link</ic-link></ic-alert>`,
+    });
+    expect(page.root).toMatchSnapshot("alert-theme-context");
+  });
+  it("correctly sets variant on theme change", async () => {
+    const page = await newSpecPage({
+      components: [Link],
+      html: `<ic-hero heading="Hero heading" subheading="Hero description">
+      <ic-link slot="interaction">Link</ic-link>
+    </ic-hero>
+`,
+    });
+    page.rootInstance.themeChangeHandler({ detail: { mode: "dark" } });
+    await page.waitForChanges();
+    expect(page.rootInstance.appearance).toBe("dark");
+    page.rootInstance.themeChangeHandler({ detail: { mode: "light" } });
+    await page.waitForChanges();
+    expect(page.rootInstance.appearance).toBe("light");
+  });
+  it("should call 'setFocus' when link is focused", async () => {
+    const page = await newSpecPage({
+      components: [Link],
+      html: `<ic-link>IC Link Test</ic-link>`,
+    });
+    //Can't expect anything in this test - this is to increase code coverage only
+    await page.rootInstance.setFocus().toHaveBeenCalled;
+  });
+});
+//# sourceMappingURL=ic-link.spec.js.map

package/dist/collection/components/ic-link/test/basic/ic-link.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-link.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-link/test/basic/ic-link.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { Alert } from \"../../../ic-alert/ic-alert\";\nimport { Link } from \"../../ic-link\";\n\ndescribe(\"ic-link component\", () => {\n  it(\"should render a link by default with the correct text\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-link>IC Link Test</ic-link>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <ic-link class=\"default link\">\n      <mock:shadow-root>\n        <a tabindex=\"-1\">\n        <slot></slot>\n        </a>\n        </mock:shadow-root>\n        IC Link Test\n      </ic-link>\n    `);\n  });\n\n  it(\"should apply the 'download' attribute to the anchor element\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-link download=\"test-download\">IC Link Test</ic-link>`,\n    });\n\n    expect(page.root)\n      .toEqualHtml(`<ic-link class=\"default link\" download=\"test-download\">\n    <mock:shadow-root>\n        <a download=\"test-download\" tabindex=\"-1\">\n        <slot></slot>\n        </a>\n        </mock:shadow-root>\n        IC Link Test\n      </ic-link>\n    `);\n  });\n\n  it(\"should apply the 'href' attribute and ic-link styling to the anchor element\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-link href=\"test-href\">IC Link Test</ic-link>`,\n    });\n\n    expect(page.root)\n      .toEqualHtml(`<ic-link href=\"test-href\" class=\"default link\">\n    <mock:shadow-root>\n        <a class=\"default ic-link\" href=\"test-href\" tabindex=\"0\">\n        <slot></slot>\n        </a>\n        </mock:shadow-root>\n        IC Link Test\n      </ic-link>\n    `);\n  });\n\n  it(\"should apply the 'dark' appearance styling and ic-link styling\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-link  href=\"test-href\" appearance=\"dark\">IC Link Test</ic-link>`,\n    });\n\n    expect(page.root)\n      .toEqualHtml(`<ic-link href=\"test-href\" appearance=\"dark\" class=\"dark link\">\n    <mock:shadow-root>\n        <a class=\"dark ic-link\" href=\"test-href\" tabindex=\"0\">\n        <slot></slot>\n        </a>\n        </mock:shadow-root>\n        IC Link Test\n      </ic-link>\n    `);\n  });\n\n  it(\"should apply the 'hreflang' attribute to the anchor element\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-link hreflang=\"test-hreflang\">IC Link Test</ic-link>`,\n    });\n\n    expect(page.root)\n      .toEqualHtml(`<ic-link class=\"default link\" hreflang=\"test-hreflang\">\n    <mock:shadow-root>\n        <a hreflang=\"test-hreflang\" tabindex=\"-1\">\n        <slot></slot>\n        </a>\n        </mock:shadow-root>\n        IC Link Test\n      </ic-link>\n    `);\n  });\n\n  it(\"should apply the 'referrerpolicy' attribute to the anchor element\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-link referrerpolicy=\"no-referrer\">IC Link Test</ic-link>`,\n    });\n\n    expect(page.root)\n      .toEqualHtml(`<ic-link class=\"default link\" referrerpolicy=\"no-referrer\">\n    <mock:shadow-root>\n        <a referrerpolicy=\"no-referrer\" tabindex=\"-1\">\n        <slot></slot>\n        </a>\n        </mock:shadow-root>\n        IC Link Test\n      </ic-link>\n    `);\n  });\n\n  it(\"should apply the 'rel' attribute to the anchor element\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-link rel=\"test-rel\">IC Link Test</ic-link>`,\n    });\n\n    expect(page.root).toEqualHtml(`<ic-link class=\"default link\" rel=\"test-rel\">\n    <mock:shadow-root>\n        <a rel=\"test-rel\" tabindex=\"-1\">\n        <slot></slot>\n        </a>\n        </mock:shadow-root>\n        IC Link Test\n      </ic-link>\n    `);\n  });\n\n  it(\"should apply the 'target' attribute to the anchor element\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-link target=\"test-target\">IC Link Test</ic-link>`,\n    });\n\n    expect(page.root)\n      .toEqualHtml(`<ic-link class=\"default link\" target=\"test-target\">\n    <mock:shadow-root>\n        <a target=\"test-target\" tabindex=\"-1\">\n        <slot></slot>\n        </a>\n        </mock:shadow-root>\n        IC Link Test\n      </ic-link>\n    `);\n  });\n\n  it(\"should render an 'open in new' icon when 'show-icon' is provided\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-link show-icon>IC Link Test</ic-link>`,\n    });\n\n    expect(page.root).toEqualHtml(`<ic-link class=\"default link\" show-icon>\n    <mock:shadow-root>\n        <a tabindex=\"-1\">\n          <slot></slot>\n          <span class=\"ic-link-open-in-new-icon\">\n            svg\n          </span>\n        </a>\n        </mock:shadow-root>\n        IC Link Test\n      </ic-link>\n    `);\n  });\n\n  it(\"should render a slotted link\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-link>\n        <ic-link slot=\"router-item\">Slotted Link</ic-link>\n      </ic-link>`,\n    });\n\n    expect(page.root).toEqualHtml(`<ic-link class=\"default link\">\n    <mock:shadow-root>\n      <slot name=\"router-item\"></slot>\n    </mock:shadow-root>\n    <ic-link class=\"default link\" slot=\"router-item\">\n      <mock:shadow-root>\n        <a tabindex=\"-1\">\n          <slot></slot>\n        </a>\n      </mock:shadow-root>\n      Slotted Link\n      </ic-link>\n      </ic-link>\n    `);\n  });\n\n  it(\"should get theme from context\", async () => {\n    const page = await newSpecPage({\n      components: [Alert, Link],\n      html: `<ic-alert message=\"This has an action\"><ic-link slot=\"action\">Theme context link</ic-link></ic-alert>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"alert-theme-context\");\n  });\n\n  it(\"correctly sets variant on theme change\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-hero heading=\"Hero heading\" subheading=\"Hero description\">\n      <ic-link slot=\"interaction\">Link</ic-link>\n    </ic-hero>\n`,\n    });\n\n    page.rootInstance.themeChangeHandler({ detail: { mode: \"dark\" } });\n    await page.waitForChanges();\n\n    expect(page.rootInstance.appearance).toBe(\"dark\");\n\n    page.rootInstance.themeChangeHandler({ detail: { mode: \"light\" } });\n    await page.waitForChanges();\n\n    expect(page.rootInstance.appearance).toBe(\"light\");\n  });\n\n  it(\"should call 'setFocus' when link is focused\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-link>IC Link Test</ic-link>`,\n    });\n\n    //Can't expect anything in this test - this is to increase code coverage only\n    await page.rootInstance.setFocus().toHaveBeenCalled;\n  });\n});\n"]}

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

@@ -489,7 +489,7 @@ video {
   --circular-diameter: 1.25rem;
 }
 
-:host([label]) {
+:host(.label) {
   --margin: 0 0 var(--ic-space-xs) 0;
 }
 
@@ -544,7 +544,7 @@ video {
   width: var(--linear-width);
 }
 
-:host([full-width]) {
+:host(.full-width) {
   --linear-border-radius: none;
 }
 
@@ -602,11 +602,11 @@ video {
   stroke: var(--compact-step-inner-color, var(--inner-color));
 }
 
-:host([inner-label]) .ic-loading-circular-inner {
+:host(.inner-label) .ic-loading-circular-inner {
   display: grid;
 }
 
-:host([inner-label]) .ic-loading-circular-svg,
+:host(.inner-label) .ic-loading-circular-svg,
 .inner-text {
   grid-column: 1;
   grid-row: 1;
@@ -626,7 +626,7 @@ video {
   height: inherit;
   overflow: hidden;
   margin: auto;
-  color: var(--ic-theme-primary);
+  color: var(--ic-status-info);
 }
 
 :host(.not-required.compact-step-progress-indicator) .inner-text {

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

@@ -9,7 +9,7 @@ export class LoadingIndicator {
     };
     this.getLabel = (labelIndex, setLabel) => {
       return new Promise(() => {
-        setInterval(() => {
+        this.interval = setInterval(() => {
           if (labelIndex < this.labelList.length - 1) {
             labelIndex++;
           }
@@ -109,22 +109,22 @@ export class LoadingIndicator {
         this.circularMeter.style.setProperty("--stroke-dashoffset", `${proportion * dashArray}px`);
       }
     };
-    this.progress = undefined;
-    this.min = 0;
-    this.max = 100;
-    this.label = undefined;
+    this.circularDiameter = undefined;
+    this.circularLineWidth = undefined;
+    this.indeterminate = undefined;
+    this.indicatorLabel = undefined;
+    this.showSecond = false;
+    this.appearance = "dark";
     this.description = "Loading";
+    this.fullWidth = false;
     this.innerLabel = undefined;
     this.labelDuration = 8000;
+    this.max = 100;
+    this.min = 0;
     this.size = "default";
     this.type = "circular";
-    this.fullWidth = false;
-    this.appearance = "dark";
-    this.indicatorLabel = undefined;
-    this.indeterminate = undefined;
-    this.showSecond = false;
-    this.circularLineWidth = undefined;
-    this.circularDiameter = undefined;
+    this.label = undefined;
+    this.progress = undefined;
   }
   watchPropHandler() {
     this.updateLabel();
@@ -134,6 +134,9 @@ export class LoadingIndicator {
       this.updateCircularProgressMeter();
     }
   }
+  disconnectedCallback() {
+    clearInterval(this.interval);
+  }
   componentWillLoad() {
     this.indeterminate = this.progress === undefined;
     this.updateLabel();
@@ -157,9 +160,14 @@ export class LoadingIndicator {
     }
   }
   render() {
-    const { appearance, label, description, size } = this;
+    const { appearance, label, description, size, fullWidth, innerLabel } = 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.innerLabel &&
+    return (h(Host, { class: {
+        ["light"]: appearance === IcThemeForegroundEnum.Light,
+        ["label"]: !!label,
+        ["full-width"]: fullWidth,
+        ["inner-label"]: !!innerLabel,
+      } }, 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))))));
   }
@@ -177,95 +185,104 @@ export class LoadingIndicator {
   }
   static get properties() {
     return {
-      "progress": {
-        "type": "number",
+      "appearance": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
+          "original": "IcThemeForegroundNoDefault",
+          "resolved": "\"dark\" | \"light\"",
+          "references": {
+            "IcThemeForegroundNoDefault": {
+              "location": "import",
+              "path": "../../utils/types"
+            }
+          }
         },
         "required": false,
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "The current amount of progress made.\nIf not provided, component acts as an indeterminate loading indicator."
+          "text": "The appearance of the loading indicator, e.g. dark or light."
         },
-        "attribute": "progress",
-        "reflect": false
+        "attribute": "appearance",
+        "reflect": false,
+        "defaultValue": "\"dark\""
       },
-      "min": {
-        "type": "number",
+      "description": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "number",
-          "resolved": "number",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
         "required": false,
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "The minimum value that the progress value can take.\nUsed to calculate the proportional width of the progress bar."
+          "text": "The description that will be set as the aria-label of the loading indicator when not using a visible label."
         },
-        "attribute": "min",
+        "attribute": "description",
         "reflect": false,
-        "defaultValue": "0"
+        "defaultValue": "\"Loading\""
       },
-      "max": {
-        "type": "number",
+      "fullWidth": {
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "number",
-          "resolved": "number",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
         "required": false,
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "The maximum value that the progress value can take.\nUsed to calculate the proportional width of the progress bar."
+          "text": "If `true`, when linear, the full-width variant (i.e. without a border radius) will be displayed."
         },
-        "attribute": "max",
-        "reflect": false,
-        "defaultValue": "100"
+        "attribute": "full-width",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "label": {
-        "type": "string",
+      "innerLabel": {
+        "type": "number",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "number",
+          "resolved": "number",
           "references": {}
         },
         "required": false,
         "optional": true,
         "docs": {
-          "tags": [],
-          "text": "The label to be displayed beneath the loading indicator.\nDisplay a changing label by separating multiple messages with forward slashes."
+          "tags": [{
+              "name": "internal",
+              "text": "The step number of a compact step, managed by ic-step."
+            }],
+          "text": ""
         },
-        "attribute": "label",
+        "attribute": "inner-label",
         "reflect": false
       },
-      "description": {
-        "type": "string",
+      "labelDuration": {
+        "type": "number",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "number",
+          "resolved": "number",
           "references": {}
         },
         "required": false,
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "The description that will be set as the aria-label of the loading indicator when not using a visible label."
+          "text": "The time in milliseconds before the label changes."
         },
-        "attribute": "description",
+        "attribute": "label-duration",
         "reflect": false,
-        "defaultValue": "\"Loading\""
+        "defaultValue": "8000"
       },
-      "innerLabel": {
+      "max": {
         "type": "number",
         "mutable": false,
         "complexType": {
@@ -276,16 +293,14 @@ export class LoadingIndicator {
         "required": false,
         "optional": true,
         "docs": {
-          "tags": [{
-              "name": "internal",
-              "text": "The step number of a compact step, managed by ic-step."
-            }],
-          "text": ""
+          "tags": [],
+          "text": "The maximum value that the progress value can take.\nUsed to calculate the proportional width of the progress bar."
         },
-        "attribute": "inner-label",
-        "reflect": false
+        "attribute": "max",
+        "reflect": false,
+        "defaultValue": "100"
       },
-      "labelDuration": {
+      "min": {
         "type": "number",
         "mutable": false,
         "complexType": {
@@ -297,11 +312,11 @@ export class LoadingIndicator {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "The time in milliseconds before the label changes."
+          "text": "The minimum value that the progress value can take.\nUsed to calculate the proportional width of the progress bar."
         },
-        "attribute": "label-duration",
+        "attribute": "min",
         "reflect": false,
-        "defaultValue": "8000"
+        "defaultValue": "0"
       },
       "size": {
         "type": "string",
@@ -349,56 +364,49 @@ export class LoadingIndicator {
         "reflect": true,
         "defaultValue": "\"circular\""
       },
-      "fullWidth": {
-        "type": "boolean",
+      "label": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
         "required": false,
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "If `true`, when linear, the full-width variant (i.e. without a border radius) will be displayed."
+          "text": "The label to be displayed beneath the loading indicator.\nDisplay a changing label by separating multiple messages with forward slashes."
         },
-        "attribute": "full-width",
-        "reflect": true,
-        "defaultValue": "false"
+        "attribute": "label",
+        "reflect": false
       },
-      "appearance": {
-        "type": "string",
+      "progress": {
+        "type": "number",
         "mutable": false,
         "complexType": {
-          "original": "IcThemeForegroundNoDefault",
-          "resolved": "\"dark\" | \"light\"",
-          "references": {
-            "IcThemeForegroundNoDefault": {
-              "location": "import",
-              "path": "../../utils/types"
-            }
-          }
+          "original": "number",
+          "resolved": "number",
+          "references": {}
         },
         "required": false,
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "The appearance of the loading indicator, e.g. dark or light."
+          "text": "The current amount of progress made.\nIf not provided, component acts as an indeterminate loading indicator."
         },
-        "attribute": "appearance",
-        "reflect": false,
-        "defaultValue": "\"dark\""
+        "attribute": "progress",
+        "reflect": false
       }
     };
   }
   static get states() {
     return {
-      "indicatorLabel": {},
-      "indeterminate": {},
-      "showSecond": {},
+      "circularDiameter": {},
       "circularLineWidth": {},
-      "circularDiameter": {}
+      "indeterminate": {},
+      "indicatorLabel": {},
+      "showSecond": {}
     };
   }
   static get elementRef() { return "host"; }