@ukic/web-components 2.28.0 → 3.0.0-alpha.1

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

@@ -24,18 +24,19 @@ export class Link {
                 forceUpdate(this);
             }
         };
-        this.appearance = "default";
         this.download = false;
         this.href = null;
         this.hreflang = undefined;
+        this.monochrome = false;
         this.referrerpolicy = undefined;
         this.rel = undefined;
-        this.showIcon = undefined;
         this.target = undefined;
+        this.theme = "inherit";
     }
     componentWillLoad() {
         this.inheritedAttributes = inheritAttributes(this.el, IC_INHERITED_ARIA);
         this.updateTheme();
+        this.el.setAttribute("exportparts", "link");
     }
     componentDidLoad() {
         this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);
@@ -60,7 +61,13 @@ export class Link {
     updateTheme(newTheme = null) {
         const theme = getThemeFromContext(this.el, newTheme);
         if (theme !== IcThemeForegroundEnum.Default) {
-            this.appearance = theme;
+            this.monochrome = true;
+            if (theme === IcThemeForegroundEnum.Light) {
+                this.theme = "dark";
+            }
+            else {
+                this.theme = "light";
+            }
         }
     }
     hasRouterSlot() {
@@ -71,11 +78,14 @@ export class Link {
         return !!this.routerSlot;
     }
     render() {
-        const { download, href, hreflang, referrerpolicy, rel, target, showIcon, appearance, } = this;
-        return (h(Host, { class: { ["link"]: true, [`${appearance}`]: true } }, this.hasRouterSlot() ? (h("slot", { name: "router-item" })) : (h("a", Object.assign({ class: {
-                ["ic-link"]: href !== null,
-                [`${appearance}`]: href !== null,
-            }, download: download !== false ? download : null, href: href, hrefLang: hreflang, referrerPolicy: referrerpolicy, rel: rel, target: target, tabindex: href !== null ? "0" : "-1" }, this.inheritedAttributes), h("slot", null), (showIcon || target === "_blank") && (h("span", { class: "ic-link-open-in-new-icon", innerHTML: OpenInNew }))))));
+        const { download, href, hreflang, referrerpolicy, rel, target, monochrome, theme, } = this;
+        return (h(Host, { class: {
+                ["ic-link"]: true,
+                [`ic-theme-${theme}`]: theme !== "inherit",
+                ["ic-link-monochrome"]: monochrome,
+            } }, this.hasRouterSlot() ? (h("slot", { name: "router-item" })) : (h("a", Object.assign({ class: {
+                ["link"]: href !== null,
+            }, download: download !== false ? download : null, href: href, hrefLang: hreflang, referrerPolicy: referrerpolicy, rel: rel, target: target, tabindex: href !== null ? "0" : "-1" }, this.inheritedAttributes, { part: "link" }), h("slot", null), target === "_blank" && (h("span", { class: "ic-link-open-in-new-icon", innerHTML: OpenInNew }))))));
     }
     static get is() { return "ic-link"; }
     static get encapsulation() { return "shadow"; }
@@ -92,30 +102,6 @@ export class Link {
     }
     static get properties() {
         return {
-            "appearance": {
-                "type": "string",
-                "mutable": true,
-                "complexType": {
-                    "original": "IcThemeForeground",
-                    "resolved": "\"dark\" | \"default\" | \"light\"",
-                    "references": {
-                        "IcThemeForeground": {
-                            "location": "import",
-                            "path": "../../utils/types",
-                            "id": "src/utils/types.ts::IcThemeForeground"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The appearance of the link, e.g. dark, light, or default."
-                },
-                "attribute": "appearance",
-                "reflect": false,
-                "defaultValue": "\"default\""
-            },
             "download": {
                 "type": "any",
                 "mutable": false,
@@ -169,6 +155,24 @@ export class Link {
                 "attribute": "hreflang",
                 "reflect": false
             },
+            "monochrome": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the link will display as black in the light theme, and white in the dark theme."
+                },
+                "attribute": "monochrome",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "referrerpolicy": {
                 "type": "string",
                 "mutable": false,
@@ -208,42 +212,46 @@ export class Link {
                 "attribute": "rel",
                 "reflect": false
             },
-            "showIcon": {
-                "type": "boolean",
+            "target": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "This prop should not be used anymore. The 'open in new tab/window' icon will display automatically if target=\"_blank\"."
-                        }],
-                    "text": ""
+                    "tags": [],
+                    "text": "The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe)."
                 },
-                "attribute": "show-icon",
+                "attribute": "target",
                 "reflect": false
             },
-            "target": {
+            "theme": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
+                    "original": "IcThemeMode",
+                    "resolved": "\"dark\" | \"inherit\" | \"light\"",
+                    "references": {
+                        "IcThemeMode": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcThemeMode"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe)."
+                    "text": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component."
                 },
-                "attribute": "target",
-                "reflect": false
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "\"inherit\""
             }
         };
     }

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

@@ -1 +1 @@
-{"version":3,"file":"ic-link.js","sourceRoot":"","sources":["../../../src/components/ic-link/ic-link.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Prop,\n  h,\n  Host,\n  Listen,\n  Method,\n  forceUpdate,\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]: string } = {};\n  private routerSlot: HTMLElement;\n  private hostMutationObserver: MutationObserver = null;\n\n  @Element() el: HTMLIcLinkElement;\n\n  /**\n   * The appearance of the link, e.g. dark, light, or default.\n   */\n  @Prop({ mutable: true }) appearance?: IcThemeForeground = \"default\";\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   * @deprecated This prop should not be used anymore. The 'open in new tab/window' icon will display automatically if target=\"_blank\".\n   */\n  @Prop() showIcon?: boolean;\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  componentWillLoad(): void {\n    this.inheritedAttributes = inheritAttributes(this.el, IC_INHERITED_ARIA);\n    this.updateTheme();\n  }\n\n  componentDidLoad(): void {\n    this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n    this.hostMutationObserver.observe(this.el, {\n      attributes: true,\n    });\n  }\n\n  disconnectedCallback(): void {\n    this.hostMutationObserver?.disconnect();\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler({ detail }: CustomEvent<IcTheme>): void {\n    this.updateTheme(detail.mode);\n  }\n\n  /**\n   * Sets focus on the link.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.el.shadowRoot.querySelector(\"a\")?.focus();\n  }\n\n  private updateTheme(newTheme: IcThemeForeground = null): void {\n    const theme = getThemeFromContext(this.el, newTheme);\n\n    if (theme !== IcThemeForegroundEnum.Default) {\n      this.appearance = theme;\n    }\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  // triggered when attributes of host element change\n  private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n    let forceComponentUpdate = false;\n    mutationList.forEach(({ attributeName }) => {\n      if (IC_INHERITED_ARIA.includes(attributeName)) {\n        this.inheritedAttributes[attributeName] =\n          this.el.getAttribute(attributeName);\n        forceComponentUpdate = true;\n      }\n    });\n    if (forceComponentUpdate) {\n      forceUpdate(this);\n    }\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 || target === \"_blank\") && (\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  forceUpdate,\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  IcThemeMode,\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]: string } = {};\n  private routerSlot: HTMLElement;\n  private hostMutationObserver: MutationObserver = null;\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   * If `true`, the link will display as black in the light theme, and white in the dark theme.\n   */\n  @Prop() monochrome?: boolean = false;\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   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme?: IcThemeMode = \"inherit\";\n\n  componentWillLoad(): void {\n    this.inheritedAttributes = inheritAttributes(this.el, IC_INHERITED_ARIA);\n    this.updateTheme();\n    this.el.setAttribute(\"exportparts\", \"link\");\n  }\n\n  componentDidLoad(): void {\n    this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n    this.hostMutationObserver.observe(this.el, {\n      attributes: true,\n    });\n  }\n\n  disconnectedCallback(): void {\n    this.hostMutationObserver?.disconnect();\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler({ detail }: CustomEvent<IcTheme>): void {\n    this.updateTheme(detail.mode);\n  }\n\n  /**\n   * Sets focus on the link.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.el.shadowRoot.querySelector(\"a\")?.focus();\n  }\n\n  private updateTheme(newTheme: IcThemeForeground = null): void {\n    const theme = getThemeFromContext(this.el, newTheme);\n\n    if (theme !== IcThemeForegroundEnum.Default) {\n      this.monochrome = true;\n      if (theme === IcThemeForegroundEnum.Light) {\n        this.theme = \"dark\";\n      } else {\n        this.theme = \"light\";\n      }\n    }\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  // triggered when attributes of host element change\n  private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n    let forceComponentUpdate = false;\n    mutationList.forEach(({ attributeName }) => {\n      if (IC_INHERITED_ARIA.includes(attributeName)) {\n        this.inheritedAttributes[attributeName] =\n          this.el.getAttribute(attributeName);\n        forceComponentUpdate = true;\n      }\n    });\n    if (forceComponentUpdate) {\n      forceUpdate(this);\n    }\n  };\n\n  render() {\n    const {\n      download,\n      href,\n      hreflang,\n      referrerpolicy,\n      rel,\n      target,\n      monochrome,\n      theme,\n    } = this;\n\n    return (\n      <Host\n        class={{\n          [\"ic-link\"]: true,\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n          [\"ic-link-monochrome\"]: monochrome,\n        }}\n      >\n        {this.hasRouterSlot() ? (\n          <slot name=\"router-item\"></slot>\n        ) : (\n          <a\n            class={{\n              [\"link\"]: 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            part=\"link\"\n          >\n            <slot />\n            {target === \"_blank\" && (\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-link/test/basic/ic-link.spec.js

@@ -7,145 +7,63 @@ describe("ic-link component", () => {
             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>
-    `);
+        expect(page.root).toMatchSnapshot("default-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>
-    `);
+        expect(page.root).toMatchSnapshot("download-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>
-    `);
+        expect(page.root).toMatchSnapshot("default-link-href");
     });
-    it("should apply the 'dark' appearance styling and ic-link styling", async () => {
+    it("should apply the 'dark' theme 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>`,
+            html: `<ic-link  href="test-href" theme="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>
-    `);
+        expect(page.root).toMatchSnapshot("link-dark-theme");
     });
     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>
-    `);
+        expect(page.root).toMatchSnapshot("default-link-hreflang");
     });
     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>
-    `);
+        expect(page.root).toMatchSnapshot("default-link-referrerpolicy");
     });
     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>
-    `);
+        expect(page.root).toMatchSnapshot("default-link-rel");
     });
     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>
-    `);
+        expect(page.root).toMatchSnapshot("default-link-target");
     });
-    it("should render an 'open in new' icon when 'show-icon' is provided", async () => {
+    it("should render an 'open in new' icon when target is blank", async () => {
         const page = await newSpecPage({
             components: [Link],
-            html: `<ic-link show-icon>IC Link Test</ic-link>`,
+            html: `<ic-link target="_blank">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>
-    `);
+        expect(page.root).toMatchSnapshot("default-link-target-blank");
     });
     it("should render a slotted link", async () => {
         const page = await newSpecPage({
@@ -154,20 +72,7 @@ describe("ic-link component", () => {
         <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>
-    `);
+        expect(page.root).toMatchSnapshot("slotted-link");
     });
     it("should get theme from context", async () => {
         const page = await newSpecPage({
@@ -186,10 +91,10 @@ describe("ic-link component", () => {
         });
         page.rootInstance.themeChangeHandler({ detail: { mode: "dark" } });
         await page.waitForChanges();
-        expect(page.rootInstance.appearance).toBe("dark");
+        expect(page.rootInstance.theme).toBe("light");
         page.rootInstance.themeChangeHandler({ detail: { mode: "light" } });
         await page.waitForChanges();
-        expect(page.rootInstance.appearance).toBe("light");
+        expect(page.rootInstance.theme).toBe("dark");
     });
     it("should call 'setFocus' when link is focused", async () => {
         const page = await newSpecPage({

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

@@ -1 +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(\"should correctly set 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  it(\"should update any attributes that are inherited from the root element\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-link>IC Link Test</ic-link>`,\n    });\n    expect(\n      page.root.shadowRoot.querySelector(\"a\").getAttribute(\"aria-label\")\n    ).toBeNull();\n\n    page.root.setAttribute(\"aria-label\", \"new-label\");\n    page.rootInstance.hostMutationCallback([{ attributeName: \"aria-label\" }]);\n    await page.waitForChanges();\n\n    expect(\n      page.root.shadowRoot.querySelector(\"a\").getAttribute(\"aria-label\")\n    ).toBe(\"new-label\");\n    page.rootInstance.disconnectedCallback();\n  });\n});\n"]}
+{"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).toMatchSnapshot(\"default-link\");\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).toMatchSnapshot(\"download-link\");\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).toMatchSnapshot(\"default-link-href\");\n  });\n\n  it(\"should apply the 'dark' theme styling and ic-link styling\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-link  href=\"test-href\" theme=\"dark\">IC Link Test</ic-link>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"link-dark-theme\");\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).toMatchSnapshot(\"default-link-hreflang\");\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).toMatchSnapshot(\"default-link-referrerpolicy\");\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).toMatchSnapshot(\"default-link-rel\");\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).toMatchSnapshot(\"default-link-target\");\n  });\n\n  it(\"should render an 'open in new' icon when target is blank\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-link target=\"_blank\">IC Link Test</ic-link>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"default-link-target-blank\");\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).toMatchSnapshot(\"slotted-link\");\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(\"should correctly set 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.theme).toBe(\"light\");\n\n    page.rootInstance.themeChangeHandler({ detail: { mode: \"light\" } });\n    await page.waitForChanges();\n\n    expect(page.rootInstance.theme).toBe(\"dark\");\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  it(\"should update any attributes that are inherited from the root element\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-link>IC Link Test</ic-link>`,\n    });\n    expect(\n      page.root.shadowRoot.querySelector(\"a\").getAttribute(\"aria-label\")\n    ).toBeNull();\n\n    page.root.setAttribute(\"aria-label\", \"new-label\");\n    page.rootInstance.hostMutationCallback([{ attributeName: \"aria-label\" }]);\n    await page.waitForChanges();\n\n    expect(\n      page.root.shadowRoot.querySelector(\"a\").getAttribute(\"aria-label\")\n    ).toBe(\"new-label\");\n    page.rootInstance.disconnectedCallback();\n  });\n});\n"]}

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

@@ -456,7 +456,7 @@ video {
   --linear-line-height: var(--ic-space-xs);
 }
 
-:host(.light) {
+:host(.ic-loading-indicator-light) {
   --inner-color: var(--ic-architectural-white);
   --outer-color: var(--ic-architectural-800);
   --label-color: var(--ic-architectural-white);
@@ -474,7 +474,7 @@ video {
   --linear-line-height: var(--ic-space-xxs);
 }
 
-:host([size="default"]) {
+:host([size="medium"]) {
   --circular-diameter: 5rem;
 }
 
@@ -489,12 +489,13 @@ video {
   --circular-diameter: 1.25rem;
 }
 
-:host(.label) {
+:host(.ic-loading-indicator-label) {
   --margin: 0 0 var(--ic-space-xs) 0;
 }
 
 .ic-loading-label {
-  color: var(--label-color);
+  --ic-typography-color: var(--label-color);
+
   margin-left: var(--label-margin-left);
 }
 
@@ -543,7 +544,7 @@ video {
   width: var(--linear-width);
 }
 
-:host(.full-width) {
+:host(.ic-loading-indicator-full-width) {
   --linear-border-radius: none;
 }
 
@@ -625,15 +626,17 @@ video {
   height: inherit;
   overflow: hidden;
   margin: auto;
-  color: var(--compact-step-inner-color, var(--ic-status-info));
+
+  --ic-typography-color: var(--compact-step-inner-color, var(--ic-status-info));
 }
 
 :host(.not-required.compact-step-progress-indicator) .inner-text {
-  color: var(--ic-color-tertiary-text);
+  --ic-typography-color: var(--ic-color-tertiary-text);
 }
 
-:host(.light.not-required.compact-step-progress-indicator) .inner-text {
-  color: var(--ic-architectural-400);
+:host(.ic-loading-indicator-light.not-required.compact-step-progress-indicator)
+  .inner-text {
+  --ic-typography-color: var(--ic-architectural-400);
 }
 
 /** High Contrast **/