@ukic/web-components 2.1.0-beta.8 → 2.2.0

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

@@ -1,11 +1,27 @@
 import { Host, h, } from "@stencil/core";
 import { DEVICE_SIZES, getThemeForegroundColor } from "../../utils/helpers";
+import OpenInNew from "../../assets/OpenInNew.svg";
 export class FooterLink {
   constructor() {
-    this.href = null;
-    this.footerConfig = { small: false, grouped: false };
     this.deviceSize = DEVICE_SIZES.XL;
+    this.footerConfig = { small: false, grouped: false };
     this.foregroundColor = getThemeForegroundColor();
+    this.download = false;
+    this.href = null;
+    this.hreflang = undefined;
+    this.referrerpolicy = undefined;
+    this.rel = undefined;
+    this.target = undefined;
+  }
+  componentWillLoad() {
+    this.footerConfig = this.inferConfig(this.el);
+  }
+  footerResizeHandler() {
+    this.footerConfig = this.inferConfig(this.el);
+  }
+  footerThemeChangeHandler(ev) {
+    const theme = ev.detail;
+    this.foregroundColor = theme.mode;
   }
   inferConfig(e) {
     if (e.parentElement !== null) {
@@ -23,27 +39,18 @@ export class FooterLink {
       return { small: false, grouped: false };
     }
   }
-  footerResizeHandler() {
-    this.footerConfig = this.inferConfig(this.el);
-  }
-  footerThemeChangeHandler(ev) {
-    const theme = ev.detail;
-    this.foregroundColor = theme.mode;
-  }
-  componentWillLoad() {
-    this.footerConfig = this.inferConfig(this.el);
-  }
   render() {
-    const { footerConfig, href } = this;
+    const { footerConfig, href, hreflang, referrerpolicy, rel, target, download, } = this;
     const { small, grouped } = footerConfig;
     return (h(Host, { class: {
         "footer-link": true,
         [`footer-link-${grouped ? "grouped" : "ungrouped"}-${small ? "small" : "sparse"}`]: true,
         [`footer-link-${this.foregroundColor}`]: true,
-      } }, h("a", { href: href }, h("slot", null))));
+      } }, h("a", { href: href, hreflang: hreflang, referrerPolicy: referrerpolicy, rel: rel, download: download !== false ? download : null, target: target }, h("slot", null), target === "_blank" && (h("span", { class: "open-in-new-icon", innerHTML: OpenInNew })))));
   }
   static get is() { return "ic-footer-link"; }
   static get encapsulation() { return "shadow"; }
+  static get delegatesFocus() { return true; }
   static get originalStyleUrls() {
     return {
       "$": ["ic-footer-link.css"]
@@ -56,6 +63,24 @@ export class FooterLink {
   }
   static get properties() {
     return {
+      "download": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "string | boolean",
+          "resolved": "boolean | string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "If `true`, the user can save the linked URL instead of navigating to it."
+        },
+        "attribute": "download",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "href": {
         "type": "string",
         "mutable": false,
@@ -73,13 +98,85 @@ export class FooterLink {
         "attribute": "href",
         "reflect": false,
         "defaultValue": "null"
+      },
+      "hreflang": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The human language of the linked URL."
+        },
+        "attribute": "hreflang",
+        "reflect": false
+      },
+      "referrerpolicy": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ReferrerPolicy",
+          "resolved": "\"\" | \"no-referrer\" | \"no-referrer-when-downgrade\" | \"origin\" | \"origin-when-cross-origin\" | \"same-origin\" | \"strict-origin\" | \"strict-origin-when-cross-origin\" | \"unsafe-url\"",
+          "references": {
+            "ReferrerPolicy": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "How much of the referrer to send when following the link."
+        },
+        "attribute": "referrerpolicy",
+        "reflect": false
+      },
+      "rel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The relationship of the linked URL as space-separated link types."
+        },
+        "attribute": "rel",
+        "reflect": false
+      },
+      "target": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "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)."
+        },
+        "attribute": "target",
+        "reflect": false
       }
     };
   }
   static get states() {
     return {
-      "footerConfig": {},
       "deviceSize": {},
+      "footerConfig": {},
       "foregroundColor": {}
     };
   }

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

@@ -1 +1 @@
-{"version":3,"file":"ic-footer-link.js","sourceRoot":"","sources":["../../../src/components/ic-footer-link/ic-footer-link.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,OAAO,EACP,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,CAAC,EACD,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,YAAY,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAU5E,MAAM,OAAO,UAAU;;gBAMG,IAAI;wBAEU,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE;sBAExC,YAAY,CAAC,EAAE;2BAEC,uBAAuB,EAAE;;EAE/D,WAAW,CAAC,CAAc;IAChC,IAAI,CAAC,CAAC,aAAa,KAAK,IAAI,EAAE;MAC5B,IAAI,CAAC,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;QAChD,OAAO;UACL,KAAK,EAAE,CAAC,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,cAAc,CAAC;UACzD,OAAO,EAAE,CAAC,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,gBAAgB,CAAC;SAC9D,CAAC;OACH;WAAM;QACL,OAAO,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC;OAC1C;KACF;SAAM;MACL,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;KACzC;EACH,CAAC;EAGD,mBAAmB;IACjB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;EAChD,CAAC;EAGD,wBAAwB,CAAC,EAAe;IACtC,MAAM,KAAK,GAAY,EAAE,CAAC,MAAM,CAAC;IACjC,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC,IAAI,CAAC;EACpC,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;EAChD,CAAC;EAED,MAAM;IACJ,MAAM,EAAE,YAAY,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;IACpC,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,YAAY,CAAC;IAExC,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;QACL,aAAa,EAAE,IAAI;QACnB,CAAC,eAAe,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,IAC/C,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QACpB,EAAE,CAAC,EAAE,IAAI;QACT,CAAC,eAAe,IAAI,CAAC,eAAe,EAAE,CAAC,EAAE,IAAI;OAC9C;MAED,SAAG,IAAI,EAAE,IAAI;QACX,eAAQ,CACN,CACC,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Element,\n  Host,\n  Listen,\n  Prop,\n  h,\n  State,\n} from \"@stencil/core\";\nimport { DEVICE_SIZES, getThemeForegroundColor } from \"../../utils/helpers\";\nimport { IcTheme, IcThemeForeground } from \"../../utils/types\";\n\ntype FooterConfig = { small: boolean; grouped: boolean };\n\n@Component({\n  tag: \"ic-footer-link\",\n  styleUrl: \"ic-footer-link.css\",\n  shadow: true,\n})\nexport class FooterLink {\n  @Element() el: HTMLIcFooterLinkElement;\n\n  /**\n   * The URL that the link points to.\n   */\n  @Prop() href?: string = null;\n\n  @State() footerConfig: FooterConfig = { small: false, grouped: false };\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n\n  @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n\n  private inferConfig(e: HTMLElement): FooterConfig {\n    if (e.parentElement !== null) {\n      if (e.parentElement.classList.contains(\"footer\")) {\n        return {\n          small: e.parentElement.classList.contains(\"footer-small\"),\n          grouped: e.parentElement.classList.contains(\"footer-grouped\"),\n        };\n      } else {\n        return this.inferConfig(e.parentElement);\n      }\n    } else {\n      return { small: false, grouped: false };\n    }\n  }\n\n  @Listen(\"footerResized\", { target: \"document\" })\n  footerResizeHandler(): void {\n    this.footerConfig = this.inferConfig(this.el);\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  footerThemeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.foregroundColor = theme.mode;\n  }\n\n  componentWillLoad(): void {\n    this.footerConfig = this.inferConfig(this.el);\n  }\n\n  render() {\n    const { footerConfig, href } = this;\n    const { small, grouped } = footerConfig;\n\n    return (\n      <Host\n        class={{\n          \"footer-link\": true,\n          [`footer-link-${grouped ? \"grouped\" : \"ungrouped\"}-${\n            small ? \"small\" : \"sparse\"\n          }`]: true,\n          [`footer-link-${this.foregroundColor}`]: true,\n        }}\n      >\n        <a href={href}>\n          <slot />\n        </a>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-footer-link.js","sourceRoot":"","sources":["../../../src/components/ic-footer-link/ic-footer-link.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,OAAO,EACP,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,CAAC,EACD,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,YAAY,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAG5E,OAAO,SAAS,MAAM,4BAA4B,CAAC;AAWnD,MAAM,OAAO,UAAU;;sBAGS,YAAY,CAAC,EAAE;wBACP,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE;2BACxB,uBAAuB,EAAE;oBAKjC,KAAK;gBAKnB,IAAI;;;;;;EAsB5B,iBAAiB;IACf,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;EAChD,CAAC;EAGD,mBAAmB;IACjB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;EAChD,CAAC;EAGD,wBAAwB,CAAC,EAAe;IACtC,MAAM,KAAK,GAAY,EAAE,CAAC,MAAM,CAAC;IACjC,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC,IAAI,CAAC;EACpC,CAAC;EAEO,WAAW,CAAC,CAAc;IAChC,IAAI,CAAC,CAAC,aAAa,KAAK,IAAI,EAAE;MAC5B,IAAI,CAAC,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;QAChD,OAAO;UACL,KAAK,EAAE,CAAC,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,cAAc,CAAC;UACzD,OAAO,EAAE,CAAC,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,gBAAgB,CAAC;SAC9D,CAAC;OACH;WAAM;QACL,OAAO,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC;OAC1C;KACF;SAAM;MACL,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;KACzC;EACH,CAAC;EAED,MAAM;IACJ,MAAM,EACJ,YAAY,EACZ,IAAI,EACJ,QAAQ,EACR,cAAc,EACd,GAAG,EACH,MAAM,EACN,QAAQ,GACT,GAAG,IAAI,CAAC;IACT,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,YAAY,CAAC;IAExC,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;QACL,aAAa,EAAE,IAAI;QACnB,CAAC,eAAe,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,IAC/C,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QACpB,EAAE,CAAC,EAAE,IAAI;QACT,CAAC,eAAe,IAAI,CAAC,eAAe,EAAE,CAAC,EAAE,IAAI;OAC9C;MAED,SACE,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,cAAc,EAC9B,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAQ,KAAK,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,EAC9C,MAAM,EAAE,MAAM;QAEd,eAAQ;QACP,MAAM,KAAK,QAAQ,IAAI,CACtB,YAAM,KAAK,EAAC,kBAAkB,EAAC,SAAS,EAAE,SAAS,GAAI,CACxD,CACC,CACC,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Element,\n  Host,\n  Listen,\n  Prop,\n  h,\n  State,\n} from \"@stencil/core\";\nimport { DEVICE_SIZES, getThemeForegroundColor } from \"../../utils/helpers\";\nimport { IcTheme, IcThemeForeground } from \"../../utils/types\";\n\nimport OpenInNew from \"../../assets/OpenInNew.svg\";\n\ntype FooterConfig = { small: boolean; grouped: boolean };\n\n@Component({\n  tag: \"ic-footer-link\",\n  styleUrl: \"ic-footer-link.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class FooterLink {\n  @Element() el: HTMLIcFooterLinkElement;\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n  @State() footerConfig: FooterConfig = { small: false, grouped: false };\n  @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n\n  /**\n   * If `true`, the user can save the linked URL instead of navigating to it.\n   */\n  @Prop() download?: string | boolean = false;\n\n  /**\n   * The URL that the link points to.\n   */\n  @Prop() href?: string = null;\n\n  /**\n   * The human language of the linked URL.\n   */\n  @Prop() hreflang?: string;\n\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n\n  /**\n   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\n\n  componentWillLoad(): void {\n    this.footerConfig = this.inferConfig(this.el);\n  }\n\n  @Listen(\"footerResized\", { target: \"document\" })\n  footerResizeHandler(): void {\n    this.footerConfig = this.inferConfig(this.el);\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  footerThemeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.foregroundColor = theme.mode;\n  }\n\n  private inferConfig(e: HTMLElement): FooterConfig {\n    if (e.parentElement !== null) {\n      if (e.parentElement.classList.contains(\"footer\")) {\n        return {\n          small: e.parentElement.classList.contains(\"footer-small\"),\n          grouped: e.parentElement.classList.contains(\"footer-grouped\"),\n        };\n      } else {\n        return this.inferConfig(e.parentElement);\n      }\n    } else {\n      return { small: false, grouped: false };\n    }\n  }\n\n  render() {\n    const {\n      footerConfig,\n      href,\n      hreflang,\n      referrerpolicy,\n      rel,\n      target,\n      download,\n    } = this;\n    const { small, grouped } = footerConfig;\n\n    return (\n      <Host\n        class={{\n          \"footer-link\": true,\n          [`footer-link-${grouped ? \"grouped\" : \"ungrouped\"}-${\n            small ? \"small\" : \"sparse\"\n          }`]: true,\n          [`footer-link-${this.foregroundColor}`]: true,\n        }}\n      >\n        <a\n          href={href}\n          hreflang={hreflang}\n          referrerPolicy={referrerpolicy}\n          rel={rel}\n          download={download !== false ? download : null}\n          target={target}\n        >\n          <slot />\n          {target === \"_blank\" && (\n            <span class=\"open-in-new-icon\" innerHTML={OpenInNew} />\n          )}\n        </a>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-footer-link/{ic-footer-link.test.a11y.js → test/a11y/ic-footer-link.test.a11y.js}

@@ -1,6 +1,6 @@
 import { fixture } from "@open-wc/testing-helpers";
 import { axe } from "jest-axe";
-import { checkShadowElementRendersCorrectly } from "../../utils/testa11y.helpers";
+import { checkShadowElementRendersCorrectly } from "../../../../utils/testa11y.helpers";
 beforeEach(() => {
   // IntersectionObserver isn't available in test environment
   const mockResizeObserver = jest.fn();

package/dist/collection/components/ic-footer-link/test/a11y/ic-footer-link.test.a11y.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-footer-link.test.a11y.js","sourceRoot":"","sources":["../../../../../src/components/ic-footer-link/test/a11y/ic-footer-link.test.a11y.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAC/B,OAAO,EAAE,kCAAkC,EAAE,MAAM,oCAAoC,CAAC;AAExF,UAAU,CAAC,GAAG,EAAE;EACd,2DAA2D;EAC3D,MAAM,kBAAkB,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;EACrC,kBAAkB,CAAC,eAAe,CAAC;IACjC,OAAO,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC;IACxC,SAAS,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC;IAC1C,UAAU,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC;GAC5C,CAAC,CAAC;EACH,MAAM,CAAC,cAAc,GAAG,kBAAkB,CAAC;AAC7C,CAAC,CAAC,CAAC;AAEH,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;EAC9B,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;IACpC,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC,mCAAmC,CAAC,CAAC;IAC9D,kCAAkC,CAAC,EAAE,CAAC,CAAC;IACvC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAC;EAC7C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { fixture } from \"@open-wc/testing-helpers\";\nimport { axe } from \"jest-axe\";\nimport { checkShadowElementRendersCorrectly } from \"../../../../utils/testa11y.helpers\";\n\nbeforeEach(() => {\n  // IntersectionObserver isn't available in test environment\n  const mockResizeObserver = jest.fn();\n  mockResizeObserver.mockReturnValue({\n    observe: jest.fn().mockReturnValue(null),\n    unobserve: jest.fn().mockReturnValue(null),\n    disconnect: jest.fn().mockReturnValue(null),\n  });\n  window.ResizeObserver = mockResizeObserver;\n});\n\ndescribe(\"ic-footer-link\", () => {\n  it(\"passes accessibility\", async () => {\n    const el = await fixture(`<ic-footer-link></ic-footer-link>`);\n    checkShadowElementRendersCorrectly(el);\n    expect(await axe(el)).toHaveNoViolations();\n  });\n});\n"]}

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

@@ -0,0 +1,62 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { FooterLink } from "../../ic-footer-link";
+describe("ic-footer-link", () => {
+  it("should render", async () => {
+    const page = await newSpecPage({
+      components: [FooterLink],
+      html: `<ic-footer-link href="/">Link</ic-footer-link>`,
+    });
+    expect(page.root).toEqualHtml(`
+    <ic-footer-link class="footer-link footer-link-light footer-link-ungrouped-sparse" href="/">
+        <mock:shadow-root>
+            <a href="/">
+                <slot></slot>
+            </a>
+        </mock:shadow-root>
+            Link
+    </ic-footer-link>`);
+  });
+  it("should render small with grouped links", async () => {
+    const page = await newSpecPage({
+      components: [FooterLink],
+      html: `<ic-footer-link href="/">Link</ic-footer-link>`,
+    });
+    page.rootInstance.footerConfig = { small: true, grouped: true };
+    await page.waitForChanges();
+    expect(page.root).toEqualHtml(`
+        <ic-footer-link class="footer-link footer-link-light footer-link-grouped-small" href="/">
+            <mock:shadow-root>
+                <a href="/">
+                    <slot></slot>
+                </a>
+            </mock:shadow-root>
+                Link
+        </ic-footer-link>`);
+  });
+  it("should set foregroundColor on theme change", async () => {
+    const page = await newSpecPage({
+      components: [FooterLink],
+      html: `<ic-footer-link label="button1" onclick="alert('test')">
+      </ic-footer-link>`,
+    });
+    await page.rootInstance.footerThemeChangeHandler({
+      detail: { mode: "light" },
+    });
+    await page.waitForChanges();
+    expect(page.rootInstance.foregroundColor).toEqual("light");
+  });
+  it("should test footer resize handler", async () => {
+    const page = await newSpecPage({
+      components: [FooterLink],
+      html: `<ic-footer-link label="button1" onclick="alert('test')">
+      </ic-footer-link>`,
+    });
+    await page.rootInstance.footerResizeHandler();
+    await page.waitForChanges();
+    expect(page.rootInstance.footerConfig).toStrictEqual({
+      grouped: false,
+      small: false,
+    });
+  });
+});
+//# sourceMappingURL=ic-footer-link.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-footer-link.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-footer-link/test/basic/ic-footer-link.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAElD,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;EAC9B,EAAE,CAAC,eAAe,EAAE,KAAK,IAAI,EAAE;IAC7B,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;MACxB,IAAI,EAAE,gDAAgD;KACvD,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;sBAQZ,CAAC,CAAC;EACtB,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,wCAAwC,EAAE,KAAK,IAAI,EAAE;IACtD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;MACxB,IAAI,EAAE,gDAAgD;KACvD,CAAC,CAAC;IAEH,IAAI,CAAC,YAAY,CAAC,YAAY,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;IAChE,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;0BAQR,CAAC,CAAC;EAC1B,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,4CAA4C,EAAE,KAAK,IAAI,EAAE;IAC1D,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;MACxB,IAAI,EAAE;wBACY;KACnB,CAAC,CAAC;IAEH,MAAM,IAAI,CAAC,YAAY,CAAC,wBAAwB,CAAC;MAC/C,MAAM,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;KAC1B,CAAC,CAAC;IACH,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;EAC7D,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,mCAAmC,EAAE,KAAK,IAAI,EAAE;IACjD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;MACxB,IAAI,EAAE;wBACY;KACnB,CAAC,CAAC;IAEH,MAAM,IAAI,CAAC,YAAY,CAAC,mBAAmB,EAAE,CAAC;IAC9C,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,aAAa,CAAC;MACnD,OAAO,EAAE,KAAK;MACd,KAAK,EAAE,KAAK;KACb,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { FooterLink } from \"../../ic-footer-link\";\n\ndescribe(\"ic-footer-link\", () => {\n  it(\"should render\", async () => {\n    const page = await newSpecPage({\n      components: [FooterLink],\n      html: `<ic-footer-link href=\"/\">Link</ic-footer-link>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-footer-link class=\"footer-link footer-link-light footer-link-ungrouped-sparse\" href=\"/\">\n        <mock:shadow-root>\n            <a href=\"/\">\n                <slot></slot>\n            </a>\n        </mock:shadow-root>\n            Link\n    </ic-footer-link>`);\n  });\n\n  it(\"should render small with grouped links\", async () => {\n    const page = await newSpecPage({\n      components: [FooterLink],\n      html: `<ic-footer-link href=\"/\">Link</ic-footer-link>`,\n    });\n\n    page.rootInstance.footerConfig = { small: true, grouped: true };\n    await page.waitForChanges();\n\n    expect(page.root).toEqualHtml(`\n        <ic-footer-link class=\"footer-link footer-link-light footer-link-grouped-small\" href=\"/\">\n            <mock:shadow-root>\n                <a href=\"/\">\n                    <slot></slot>\n                </a>\n            </mock:shadow-root>\n                Link\n        </ic-footer-link>`);\n  });\n\n  it(\"should set foregroundColor on theme change\", async () => {\n    const page = await newSpecPage({\n      components: [FooterLink],\n      html: `<ic-footer-link label=\"button1\" onclick=\"alert('test')\">\n      </ic-footer-link>`,\n    });\n\n    await page.rootInstance.footerThemeChangeHandler({\n      detail: { mode: \"light\" },\n    });\n    await page.waitForChanges();\n\n    expect(page.rootInstance.foregroundColor).toEqual(\"light\");\n  });\n\n  it(\"should test footer resize handler\", async () => {\n    const page = await newSpecPage({\n      components: [FooterLink],\n      html: `<ic-footer-link label=\"button1\" onclick=\"alert('test')\">\n      </ic-footer-link>`,\n    });\n\n    await page.rootInstance.footerResizeHandler();\n    await page.waitForChanges();\n\n    expect(page.rootInstance.footerConfig).toStrictEqual({\n      grouped: false,\n      small: false,\n    });\n  });\n});\n"]}

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

@@ -10,11 +10,24 @@ export class FooterLinkGroup {
     this.toggleExpanded = () => {
       this.expanded = !this.expanded;
     };
-    this.groupTitle = undefined;
-    this.small = false;
     this.expanded = false;
-    this.dropdownIconStyle = getThemeForegroundColor();
     this.deviceSize = DEVICE_SIZES.XL;
+    this.dropdownIconStyle = getThemeForegroundColor();
+    this.small = false;
+    this.groupTitle = undefined;
+  }
+  componentWillLoad() {
+    this.small = this.isSmall(this.el);
+  }
+  componentDidLoad() {
+    onComponentRequiredPropUndefined([{ prop: this.groupTitle, propName: "group-title" }], "Footer Link Group");
+  }
+  footerResizeHandler() {
+    this.small = this.isSmall(this.el);
+  }
+  footerThemeChangeHandler(ev) {
+    const theme = ev.detail;
+    this.dropdownIconStyle = theme.mode;
   }
   isSmall(e) {
     if (e.parentElement !== null) {
@@ -29,19 +42,6 @@ export class FooterLinkGroup {
       return false;
     }
   }
-  footerResizeHandler() {
-    this.small = this.isSmall(this.el);
-  }
-  footerThemeChangeHandler(ev) {
-    const theme = ev.detail;
-    this.dropdownIconStyle = theme.mode;
-  }
-  componentWillLoad() {
-    this.small = this.isSmall(this.el);
-  }
-  componentDidLoad() {
-    onComponentRequiredPropUndefined([{ prop: this.groupTitle, propName: "group-title" }], "Footer Link Group");
-  }
   render() {
     const { small, groupTitle } = this;
     return !small ? (h(Host, { class: {
@@ -54,6 +54,7 @@ export class FooterLinkGroup {
   }
   static get is() { return "ic-footer-link-group"; }
   static get encapsulation() { return "shadow"; }
+  static get delegatesFocus() { return true; }
   static get originalStyleUrls() {
     return {
       "$": ["ic-footer-link-group.css"]
@@ -87,10 +88,10 @@ export class FooterLinkGroup {
   }
   static get states() {
     return {
-      "small": {},
       "expanded": {},
+      "deviceSize": {},
       "dropdownIconStyle": {},
-      "deviceSize": {}
+      "small": {}
     };
   }
   static get elementRef() { return "el"; }

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

@@ -1 +1 @@
-{"version":3,"file":"ic-footer-link-group.js","sourceRoot":"","sources":["../../../src/components/ic-footer-link-group/ic-footer-link-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  Element,\n  Listen,\n  Prop,\n  h,\n  State,\n} from \"@stencil/core\";\nimport {\n  DEVICE_SIZES,\n  getThemeForegroundColor,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcTheme } from \"../../utils/types\";\n\n@Component({\n  tag: \"ic-footer-link-group\",\n  styleUrl: \"ic-footer-link-group.css\",\n  shadow: true,\n})\nexport class FooterLinkGroup {\n  @Element() el: HTMLIcFooterLinkGroupElement;\n\n  /**\n   * The title of the link group to be displayed.\n   */\n  @Prop() groupTitle!: string;\n\n  @State() small: boolean = false;\n\n  @State() expanded: boolean = false;\n\n  @State() dropdownIconStyle = getThemeForegroundColor();\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n\n  private isSmall(e: HTMLElement): boolean {\n    if (e.parentElement !== null) {\n      if (e.parentElement.classList.contains(\"footer\")) {\n        return e.parentElement.classList.contains(\"footer-small\");\n      } else {\n        return this.isSmall(e.parentElement);\n      }\n    } else {\n      return false;\n    }\n  }\n\n  private handleKeydown = (event: KeyboardEvent): void => {\n    if (event.key === \" \" || event.key === \"Enter\") {\n      this.toggleExpanded();\n    }\n  };\n\n  private toggleExpanded = (): void => {\n    this.expanded = !this.expanded;\n  };\n\n  @Listen(\"footerResized\", { target: \"document\" })\n  footerResizeHandler(): void {\n    this.small = this.isSmall(this.el);\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  footerThemeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.dropdownIconStyle = theme.mode;\n  }\n\n  componentWillLoad(): void {\n    this.small = this.isSmall(this.el);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.groupTitle, propName: \"group-title\" }],\n      \"Footer Link Group\"\n    );\n  }\n\n  render() {\n    const { small, groupTitle } = this;\n\n    return !small ? (\n      <Host\n        class={{\n          [\"footer-link-group footer-link-group-sparse\"]: true,\n          [`footer-link-group-${this.dropdownIconStyle}`]: true,\n        }}\n      >\n        <div class=\"footer-link-group-title\">\n          <ic-typography variant=\"subtitle-small\">{groupTitle}</ic-typography>\n        </div>\n        <div class=\"footer-link-group-links\">\n          <slot />\n        </div>\n      </Host>\n    ) : (\n      <Host\n        class={{\n          [\"footer-link-group footer-link-group-small\"]: true,\n          [`footer-link-group-${this.dropdownIconStyle}`]: true,\n        }}\n        tabIndex=\"1\"\n        onClick={this.toggleExpanded}\n        onKeydown={this.handleKeydown}\n        aria-haspopup=\"true\"\n        aria-expanded={this.expanded}\n      >\n        <ic-section-container fullHeight={true}>\n          <div class=\"footer-link-group-header\">\n            <div class=\"footer-link-group-title\">\n              <ic-typography variant=\"label\">{groupTitle}</ic-typography>\n            </div>\n            {this.expanded ? (\n              <svg\n                class=\"footer-link-group-toggle\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                aria-hidden=\"true\"\n                role=\"img\"\n                width=\"1em\"\n                height=\"1em\"\n                preserveAspectRatio=\"xMidYMid meet\"\n                viewBox=\"0 0 1200 1200\"\n              >\n                <path\n                  fill=\"currentColor\"\n                  d=\"M600.002 210.605L421.285 389.336L0 810.559l178.721 178.836l421.281-421.341l421.281 421.341L1200 810.559L778.733 389.336L600.002 210.605z\"\n                />\n              </svg>\n            ) : (\n              <svg\n                class=\"footer-link-group-toggle\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                aria-hidden=\"true\"\n                role=\"img\"\n                width=\"1em\"\n                height=\"1em\"\n                preserveAspectRatio=\"xMidYMid meet\"\n                viewBox=\"0 0 1200 1200\"\n              >\n                <g transform=\"translate(0 1200) scale(1 -1)\">\n                  <path\n                    fill=\"currentColor\"\n                    d=\"M600.002 210.605L421.285 389.336L0 810.559l178.721 178.836l421.281-421.341l421.281 421.341L1200 810.559L778.733 389.336L600.002 210.605z\"\n                  />\n                </g>\n              </svg>\n            )}\n          </div>\n          {this.expanded && (\n            <div class=\"footer-link-group-links\">\n              <slot />\n            </div>\n          )}\n        </ic-section-container>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-footer-link-group.js","sourceRoot":"","sources":["../../../src/components/ic-footer-link-group/ic-footer-link-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  Element,\n  Listen,\n  Prop,\n  h,\n  State,\n} from \"@stencil/core\";\nimport {\n  DEVICE_SIZES,\n  getThemeForegroundColor,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcTheme } from \"../../utils/types\";\n\n@Component({\n  tag: \"ic-footer-link-group\",\n  styleUrl: \"ic-footer-link-group.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class FooterLinkGroup {\n  @Element() el: HTMLIcFooterLinkGroupElement;\n\n  @State() expanded: boolean = false;\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n  @State() dropdownIconStyle = getThemeForegroundColor();\n  @State() small: boolean = false;\n\n  /**\n   * The title of the link group to be displayed.\n   */\n  @Prop() groupTitle!: string;\n\n  componentWillLoad(): void {\n    this.small = this.isSmall(this.el);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.groupTitle, propName: \"group-title\" }],\n      \"Footer Link Group\"\n    );\n  }\n\n  @Listen(\"footerResized\", { target: \"document\" })\n  footerResizeHandler(): void {\n    this.small = this.isSmall(this.el);\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  footerThemeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.dropdownIconStyle = theme.mode;\n  }\n\n  private isSmall(e: HTMLElement): boolean {\n    if (e.parentElement !== null) {\n      if (e.parentElement.classList.contains(\"footer\")) {\n        return e.parentElement.classList.contains(\"footer-small\");\n      } else {\n        return this.isSmall(e.parentElement);\n      }\n    } else {\n      return false;\n    }\n  }\n\n  private handleKeydown = (event: KeyboardEvent): void => {\n    if (event.key === \" \" || event.key === \"Enter\") {\n      this.toggleExpanded();\n    }\n  };\n\n  private toggleExpanded = (): void => {\n    this.expanded = !this.expanded;\n  };\n\n  render() {\n    const { small, groupTitle } = this;\n\n    return !small ? (\n      <Host\n        class={{\n          [\"footer-link-group footer-link-group-sparse\"]: true,\n          [`footer-link-group-${this.dropdownIconStyle}`]: true,\n        }}\n      >\n        <div class=\"footer-link-group-title\">\n          <ic-typography variant=\"subtitle-small\">{groupTitle}</ic-typography>\n        </div>\n        <div class=\"footer-link-group-links\">\n          <slot />\n        </div>\n      </Host>\n    ) : (\n      <Host\n        class={{\n          [\"footer-link-group footer-link-group-small\"]: true,\n          [`footer-link-group-${this.dropdownIconStyle}`]: true,\n        }}\n        tabIndex=\"1\"\n        onClick={this.toggleExpanded}\n        onKeydown={this.handleKeydown}\n        aria-haspopup=\"true\"\n        aria-expanded={this.expanded}\n      >\n        <ic-section-container fullHeight={true}>\n          <div class=\"footer-link-group-header\">\n            <div class=\"footer-link-group-title\">\n              <ic-typography variant=\"label\">{groupTitle}</ic-typography>\n            </div>\n            {this.expanded ? (\n              <svg\n                class=\"footer-link-group-toggle\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                aria-hidden=\"true\"\n                role=\"img\"\n                width=\"1em\"\n                height=\"1em\"\n                preserveAspectRatio=\"xMidYMid meet\"\n                viewBox=\"0 0 1200 1200\"\n              >\n                <path\n                  fill=\"currentColor\"\n                  d=\"M600.002 210.605L421.285 389.336L0 810.559l178.721 178.836l421.281-421.341l421.281 421.341L1200 810.559L778.733 389.336L600.002 210.605z\"\n                />\n              </svg>\n            ) : (\n              <svg\n                class=\"footer-link-group-toggle\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                aria-hidden=\"true\"\n                role=\"img\"\n                width=\"1em\"\n                height=\"1em\"\n                preserveAspectRatio=\"xMidYMid meet\"\n                viewBox=\"0 0 1200 1200\"\n              >\n                <g transform=\"translate(0 1200) scale(1 -1)\">\n                  <path\n                    fill=\"currentColor\"\n                    d=\"M600.002 210.605L421.285 389.336L0 810.559l178.721 178.836l421.281-421.341l421.281 421.341L1200 810.559L778.733 389.336L600.002 210.605z\"\n                  />\n                </g>\n              </svg>\n            )}\n          </div>\n          {this.expanded && (\n            <div class=\"footer-link-group-links\">\n              <slot />\n            </div>\n          )}\n        </ic-section-container>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-footer-link-group/{ic-footer-link-group.test.a11y.js → test/a11y/ic-footer-link-group.test.a11y.js}

@@ -1,6 +1,6 @@
 import { fixture } from "@open-wc/testing-helpers";
 import { axe } from "jest-axe";
-import { checkShadowElementRendersCorrectly } from "../../utils/testa11y.helpers";
+import { checkShadowElementRendersCorrectly } from "../../../../utils/testa11y.helpers";
 beforeEach(() => {
   // IntersectionObserver isn't available in test environment
   const mockResizeObserver = jest.fn();

package/dist/collection/components/ic-footer-link-group/test/a11y/ic-footer-link-group.test.a11y.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-footer-link-group.test.a11y.js","sourceRoot":"","sources":["../../../../../src/components/ic-footer-link-group/test/a11y/ic-footer-link-group.test.a11y.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAC/B,OAAO,EAAE,kCAAkC,EAAE,MAAM,oCAAoC,CAAC;AAExF,UAAU,CAAC,GAAG,EAAE;EACd,2DAA2D;EAC3D,MAAM,kBAAkB,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;EACrC,kBAAkB,CAAC,eAAe,CAAC;IACjC,OAAO,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC;IACxC,SAAS,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC;IAC1C,UAAU,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC;GAC5C,CAAC,CAAC;EACH,MAAM,CAAC,cAAc,GAAG,kBAAkB,CAAC;AAC7C,CAAC,CAAC,CAAC;AAEH,QAAQ,CAAC,sBAAsB,EAAE,GAAG,EAAE;EACpC,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;IACpC,MAAM,EAAE,GAAG,MAAM,OAAO,CACtB,gHAAgH,CACjH,CAAC;IACF,kCAAkC,CAAC,EAAE,CAAC,CAAC;IACvC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAC;EAC7C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { fixture } from \"@open-wc/testing-helpers\";\nimport { axe } from \"jest-axe\";\nimport { checkShadowElementRendersCorrectly } from \"../../../../utils/testa11y.helpers\";\n\nbeforeEach(() => {\n  // IntersectionObserver isn't available in test environment\n  const mockResizeObserver = jest.fn();\n  mockResizeObserver.mockReturnValue({\n    observe: jest.fn().mockReturnValue(null),\n    unobserve: jest.fn().mockReturnValue(null),\n    disconnect: jest.fn().mockReturnValue(null),\n  });\n  window.ResizeObserver = mockResizeObserver;\n});\n\ndescribe(\"ic-footer-link-group\", () => {\n  it(\"passes accessibility\", async () => {\n    const el = await fixture(\n      `<ic-footer-link-group group-title=\"A11y footer links\"><ic-footer-link></ic-footer-link></ic-footer-link-group>`\n    );\n    checkShadowElementRendersCorrectly(el);\n    expect(await axe(el)).toHaveNoViolations();\n  });\n});\n"]}

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

@@ -0,0 +1,98 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { Footer } from "../../../ic-footer/ic-footer";
+import { FooterLinkGroup } from "../../ic-footer-link-group";
+import { FooterLink } from "../../../ic-footer-link/ic-footer-link";
+describe("ic-footer-link-group", () => {
+  it("should render", async () => {
+    const page = await newSpecPage({
+      components: [FooterLinkGroup],
+      html: `<ic-footer-link-group group-title="Link group"></ic-footer-link-group>`,
+    });
+    expect(page.root).toEqualHtml(`
+    <ic-footer-link-group class="footer-link-group footer-link-group-light footer-link-group-sparse" group-title="Link group">
+        <mock:shadow-root>
+            <div class="footer-link-group-title">
+                <ic-typography variant="subtitle-small">
+                    Link group
+                </ic-typography>
+            </div>
+            <div class="footer-link-group-links">
+                <slot></slot>
+            </div>
+        </mock:shadow-root>
+    </ic-footer-link-group>`);
+  });
+  it("should render with links", async () => {
+    const page = await newSpecPage({
+      components: [FooterLinkGroup, FooterLink],
+      html: `<ic-footer-link-group group-title="Link group"><ic-footer-link href="/">Link</ic-footer-link></ic-footer-link-group>`,
+    });
+    expect(page.root).toEqualHtml(`
+    <ic-footer-link-group class="footer-link-group footer-link-group-light footer-link-group-sparse" group-title="Link group">
+        <mock:shadow-root>
+            <div class="footer-link-group-title">
+                <ic-typography variant="subtitle-small">
+                    Link group
+                </ic-typography>
+            </div>
+            <div class="footer-link-group-links">
+                <slot></slot>
+            </div>
+        </mock:shadow-root>
+        <ic-footer-link class="footer-link footer-link-light footer-link-ungrouped-sparse" href="/">
+            <mock:shadow-root>
+                <a href="/">
+                    <slot></slot>
+                </a>
+            </mock:shadow-root>
+            Link
+        </ic-footer-link>
+    </ic-footer-link-group>`);
+  });
+  it("should render within footer", async () => {
+    const page = await newSpecPage({
+      components: [Footer, FooterLinkGroup, FooterLink],
+      html: `<ic-footer><ic-footer-link-group group-title="Link group"><ic-footer-link href="/">Link</ic-footer-link></ic-footer-link-group><ic-footer>`,
+    });
+    expect(page.root).toMatchSnapshot("footer-link-group-in-footer");
+  });
+  it("should expand and collapse", async () => {
+    const page = await newSpecPage({
+      components: [Footer, FooterLinkGroup, FooterLink],
+      html: `<ic-footer-link-group group-title="Link group"><ic-footer-link href="/">Link</ic-footer-link></ic-footer-link-group>`,
+    });
+    expect(page.rootInstance.expanded).toBe(false);
+    const event = new KeyboardEvent("keydown", { key: "Enter" });
+    await page.rootInstance.handleKeydown(event);
+    expect(page.rootInstance.expanded).toBe(true);
+    await page.rootInstance.handleKeydown(event);
+    expect(page.rootInstance.expanded).toBe(false);
+  });
+  it("should check and set small state", async () => {
+    const page = await newSpecPage({
+      components: [Footer, FooterLinkGroup, FooterLink],
+      html: `<ic-footer-link-group group-title="Link group"><ic-footer-link href="/">Link</ic-footer-link></ic-footer-link-group>`,
+    });
+    await page.rootInstance.footerResizeHandler();
+    expect(page.rootInstance.small).toBe(false);
+  });
+  it("should update theme", async () => {
+    const page = await newSpecPage({
+      components: [Footer, FooterLinkGroup, FooterLink],
+      html: `<ic-footer-link-group group-title="Link group"><ic-footer-link href="/">Link</ic-footer-link></ic-footer-link-group>`,
+    });
+    await page.rootInstance.footerThemeChangeHandler({
+      detail: { mode: "dark" },
+    });
+    expect(page.rootInstance.dropdownIconStyle).toBe("dark");
+  });
+  it("should render small", async () => {
+    const page = await newSpecPage({
+      components: [Footer, FooterLinkGroup, FooterLink],
+      html: `<ic-footer breakpoint="extra large"><ic-footer-link-group small=true group-title="Link group"><ic-footer-link href="/">Link</ic-footer-link></ic-footer-link-group></ic-footer>`,
+    });
+    expect(page.root).not.toBeNull;
+    expect(page.root).toMatchSnapshot("footer-link-group-small");
+  });
+});
+//# sourceMappingURL=ic-footer-link-group.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-footer-link-group.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-footer-link-group/test/basic/ic-footer-link-group.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,wCAAwC,CAAC;AAEpE,QAAQ,CAAC,sBAAsB,EAAE,GAAG,EAAE;EACpC,EAAE,CAAC,eAAe,EAAE,KAAK,IAAI,EAAE;IAC7B,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;MAC7B,IAAI,EAAE,wEAAwE;KAC/E,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;4BAYN,CAAC,CAAC;EAC5B,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,0BAA0B,EAAE,KAAK,IAAI,EAAE;IACxC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,eAAe,EAAE,UAAU,CAAC;MACzC,IAAI,EAAE,sHAAsH;KAC7H,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;4BAoBN,CAAC,CAAC;EAC5B,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,6BAA6B,EAAE,KAAK,IAAI,EAAE;IAC3C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,MAAM,EAAE,eAAe,EAAE,UAAU,CAAC;MACjD,IAAI,EAAE,4IAA4I;KACnJ,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,CAAC,6BAA6B,CAAC,CAAC;EACnE,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,4BAA4B,EAAE,KAAK,IAAI,EAAE;IAC1C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,MAAM,EAAE,eAAe,EAAE,UAAU,CAAC;MACjD,IAAI,EAAE,sHAAsH;KAC7H,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAE/C,MAAM,KAAK,GAAG,IAAI,aAAa,CAAC,SAAS,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE,CAAC,CAAC;IAE7D,MAAM,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAE7C,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAE9C,MAAM,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAE7C,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EACjD,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,kCAAkC,EAAE,KAAK,IAAI,EAAE;IAChD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,MAAM,EAAE,eAAe,EAAE,UAAU,CAAC;MACjD,IAAI,EAAE,sHAAsH;KAC7H,CAAC,CAAC;IAEH,MAAM,IAAI,CAAC,YAAY,CAAC,mBAAmB,EAAE,CAAC;IAE9C,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EAC9C,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,qBAAqB,EAAE,KAAK,IAAI,EAAE;IACnC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,MAAM,EAAE,eAAe,EAAE,UAAU,CAAC;MACjD,IAAI,EAAE,sHAAsH;KAC7H,CAAC,CAAC;IAEH,MAAM,IAAI,CAAC,YAAY,CAAC,wBAAwB,CAAC;MAC/C,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;KACzB,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;EAC3D,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,qBAAqB,EAAE,KAAK,IAAI,EAAE;IACnC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,MAAM,EAAE,eAAe,EAAE,UAAU,CAAC;MACjD,IAAI,EAAE,iLAAiL;KACxL,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,QAAQ,CAAC;IAE/B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,CAAC,yBAAyB,CAAC,CAAC;EAC/D,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { Footer } from \"../../../ic-footer/ic-footer\";\nimport { FooterLinkGroup } from \"../../ic-footer-link-group\";\nimport { FooterLink } from \"../../../ic-footer-link/ic-footer-link\";\n\ndescribe(\"ic-footer-link-group\", () => {\n  it(\"should render\", async () => {\n    const page = await newSpecPage({\n      components: [FooterLinkGroup],\n      html: `<ic-footer-link-group group-title=\"Link group\"></ic-footer-link-group>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-footer-link-group class=\"footer-link-group footer-link-group-light footer-link-group-sparse\" group-title=\"Link group\">\n        <mock:shadow-root>\n            <div class=\"footer-link-group-title\">\n                <ic-typography variant=\"subtitle-small\">\n                    Link group\n                </ic-typography>\n            </div>\n            <div class=\"footer-link-group-links\">\n                <slot></slot>\n            </div>\n        </mock:shadow-root>\n    </ic-footer-link-group>`);\n  });\n\n  it(\"should render with links\", async () => {\n    const page = await newSpecPage({\n      components: [FooterLinkGroup, FooterLink],\n      html: `<ic-footer-link-group group-title=\"Link group\"><ic-footer-link href=\"/\">Link</ic-footer-link></ic-footer-link-group>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-footer-link-group class=\"footer-link-group footer-link-group-light footer-link-group-sparse\" group-title=\"Link group\">\n        <mock:shadow-root>\n            <div class=\"footer-link-group-title\">\n                <ic-typography variant=\"subtitle-small\">\n                    Link group\n                </ic-typography>\n            </div>\n            <div class=\"footer-link-group-links\">\n                <slot></slot>\n            </div>\n        </mock:shadow-root>\n        <ic-footer-link class=\"footer-link footer-link-light footer-link-ungrouped-sparse\" href=\"/\">\n            <mock:shadow-root>\n                <a href=\"/\">\n                    <slot></slot>\n                </a>\n            </mock:shadow-root>\n            Link\n        </ic-footer-link>\n    </ic-footer-link-group>`);\n  });\n\n  it(\"should render within footer\", async () => {\n    const page = await newSpecPage({\n      components: [Footer, FooterLinkGroup, FooterLink],\n      html: `<ic-footer><ic-footer-link-group group-title=\"Link group\"><ic-footer-link href=\"/\">Link</ic-footer-link></ic-footer-link-group><ic-footer>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"footer-link-group-in-footer\");\n  });\n\n  it(\"should expand and collapse\", async () => {\n    const page = await newSpecPage({\n      components: [Footer, FooterLinkGroup, FooterLink],\n      html: `<ic-footer-link-group group-title=\"Link group\"><ic-footer-link href=\"/\">Link</ic-footer-link></ic-footer-link-group>`,\n    });\n\n    expect(page.rootInstance.expanded).toBe(false);\n\n    const event = new KeyboardEvent(\"keydown\", { key: \"Enter\" });\n\n    await page.rootInstance.handleKeydown(event);\n\n    expect(page.rootInstance.expanded).toBe(true);\n\n    await page.rootInstance.handleKeydown(event);\n\n    expect(page.rootInstance.expanded).toBe(false);\n  });\n\n  it(\"should check and set small state\", async () => {\n    const page = await newSpecPage({\n      components: [Footer, FooterLinkGroup, FooterLink],\n      html: `<ic-footer-link-group group-title=\"Link group\"><ic-footer-link href=\"/\">Link</ic-footer-link></ic-footer-link-group>`,\n    });\n\n    await page.rootInstance.footerResizeHandler();\n\n    expect(page.rootInstance.small).toBe(false);\n  });\n\n  it(\"should update theme\", async () => {\n    const page = await newSpecPage({\n      components: [Footer, FooterLinkGroup, FooterLink],\n      html: `<ic-footer-link-group group-title=\"Link group\"><ic-footer-link href=\"/\">Link</ic-footer-link></ic-footer-link-group>`,\n    });\n\n    await page.rootInstance.footerThemeChangeHandler({\n      detail: { mode: \"dark\" },\n    });\n\n    expect(page.rootInstance.dropdownIconStyle).toBe(\"dark\");\n  });\n\n  it(\"should render small\", async () => {\n    const page = await newSpecPage({\n      components: [Footer, FooterLinkGroup, FooterLink],\n      html: `<ic-footer breakpoint=\"extra large\"><ic-footer-link-group small=true group-title=\"Link group\"><ic-footer-link href=\"/\">Link</ic-footer-link></ic-footer-link-group></ic-footer>`,\n    });\n\n    expect(page.root).not.toBeNull;\n\n    expect(page.root).toMatchSnapshot(\"footer-link-group-small\");\n  });\n});\n"]}

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

@@ -496,6 +496,7 @@ ic-typography.heading-bottom-spacing {
   display: flex;
   gap: var(--ic-space-md);
   margin-top: var(--ic-space-lg);
+  flex-wrap: wrap;
 }
 
 .secondary-container {
@@ -533,8 +534,8 @@ ic-typography.heading-bottom-spacing {
     min-height: 13rem;
   }
 
-  :host([small]),
-  :host([small]) .section-container {
+  :host(.small),
+  :host(.small) .section-container {
     min-height: 10.813rem;
   }
 
@@ -571,13 +572,13 @@ ic-typography.heading-bottom-spacing {
     min-height: 16rem;
   }
 
-  :host([small]),
-  :host([small]) .section-container {
+  :host(.small),
+  :host(.small) .section-container {
     min-height: 15rem;
   }
 
-  :host([secondary-heading]),
-  :host([secondary-heading]) .section-container {
+  :host(.secondary-heading),
+  :host(.secondary-heading) .section-container {
     min-height: 14rem;
   }
 
@@ -609,13 +610,13 @@ ic-typography.heading-bottom-spacing {
     min-height: 16rem;
   }
 
-  :host([small]),
-  :host([small]) .section-container {
+  :host(.small),
+  :host(.small) .section-container {
     min-height: 15rem;
   }
 
-  :host([secondary-heading]),
-  :host([secondary-heading]) .section-container {
+  :host(.secondary-heading),
+  :host(.secondary-heading) .section-container {
     min-height: 14rem;
   }
 
@@ -647,18 +648,18 @@ ic-typography.heading-bottom-spacing {
     min-height: 13rem;
   }
 
-  :host([small]),
-  :host([small]) .section-container {
+  :host(.small),
+  :host(.small) .section-container {
     min-height: 10.813rem;
   }
 
-  :host([secondary-heading]),
-  :host([secondary-heading]) .section-container {
+  :host(.secondary-heading),
+  :host(.secondary-heading) .section-container {
     min-height: 17.5rem;
   }
 
-  :host([secondary-heading]) .section-container,
-  :host([small]) .section-container,
+  :host(.secondary-heading) .section-container,
+  :host(.small) .section-container,
   .section-container {
     flex-direction: column;
     align-items: flex-start;
@@ -695,18 +696,18 @@ ic-typography.heading-bottom-spacing {
     margin-bottom: var(--ic-space-md);
   }
 
-  :host([small]),
-  :host([small]) .section-container {
+  :host(.small),
+  :host(.small) .section-container {
     min-height: 10.813rem;
   }
 
-  :host([secondary-heading]),
-  :host([secondary-heading]) .section-container {
+  :host(.secondary-heading),
+  :host(.secondary-heading) .section-container {
     min-height: 16.5rem;
   }
 
-  :host([secondary-heading]) .section-container,
-  :host([small]) .section-container,
+  :host(.secondary-heading) .section-container,
+  :host(.small) .section-container,
   .section-container {
     flex-direction: column;
     align-items: flex-start;