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

package/dist/collection/components/ic-empty-state/ic-empty-state.js

@@ -22,9 +22,9 @@ export class EmptyState {
         };
         this.aligned = "left";
         this.body = undefined;
-        this.bodyMaxLines = undefined;
+        this.maxLines = undefined;
         this.heading = undefined;
-        this.imageSize = "default";
+        this.imageSize = "medium";
         this.subheading = undefined;
     }
     disconnectedCallback() {
@@ -40,11 +40,11 @@ export class EmptyState {
         });
     }
     render() {
-        const { aligned, body, bodyMaxLines, heading, imageSize, subheading } = this;
+        const { aligned, body, maxLines, heading, imageSize, subheading } = this;
         return (h(Host, { class: {
-                [`${aligned}`]: true,
+                [`ic-empty-state-${aligned}`]: true,
                 [`image-${imageSize}`]: isSlotUsed(this.el, "image"),
-            } }, isSlotUsed(this.el, "image") && h("slot", { name: "image" }), h("div", null, h("slot", { name: "heading" }, h("ic-typography", { variant: "h4" }, heading)), h("slot", { name: "subheading" }, h("ic-typography", { variant: "subtitle-small" }, subheading)), h("slot", { name: "body" }, h("ic-typography", { maxLines: bodyMaxLines }, body))), isSlotUsed(this.el, "actions") && (h("div", { class: "action-area" }, h("slot", { name: "actions" })))));
+            } }, isSlotUsed(this.el, "image") && h("slot", { name: "image" }), h("div", null, h("slot", { name: "heading" }, h("ic-typography", { variant: "h4" }, heading)), h("slot", { name: "subheading" }, h("ic-typography", { variant: "subtitle-small" }, subheading)), h("slot", { name: "body" }, h("ic-typography", { maxLines: maxLines }, body))), isSlotUsed(this.el, "actions") && (h("div", { class: "action-area" }, h("slot", { name: "actions" })))));
     }
     static get is() { return "ic-empty-state"; }
     static get encapsulation() { return "shadow"; }
@@ -101,7 +101,7 @@ export class EmptyState {
                 "attribute": "body",
                 "reflect": false
             },
-            "bodyMaxLines": {
+            "maxLines": {
                 "type": "number",
                 "mutable": false,
                 "complexType": {
@@ -115,7 +115,7 @@ export class EmptyState {
                     "tags": [],
                     "text": "The number of lines of body text to display before truncating."
                 },
-                "attribute": "body-max-lines",
+                "attribute": "max-lines",
                 "reflect": false
             },
             "heading": {
@@ -140,7 +140,7 @@ export class EmptyState {
                 "mutable": false,
                 "complexType": {
                     "original": "IcSizes",
-                    "resolved": "\"default\" | \"large\" | \"small\"",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
                     "references": {
                         "IcSizes": {
                             "location": "import",
@@ -157,7 +157,7 @@ export class EmptyState {
                 },
                 "attribute": "image-size",
                 "reflect": false,
-                "defaultValue": "\"default\""
+                "defaultValue": "\"medium\""
             },
             "subheading": {
                 "type": "string",

package/dist/collection/components/ic-empty-state/ic-empty-state.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-empty-state.js","sourceRoot":"","sources":["../../../src/components/ic-empty-state/ic-empty-state.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAG/E,OAAO,EACL,UAAU,EACV,gCAAgC,EAChC,yBAAyB,GAC1B,MAAM,qBAAqB,CAAC;AAG7B;;;;;;GAMG;AAMH,MAAM,OAAO,UAAU;;QACb,yBAAoB,GAAqB,IAAI,CAAC;QAmD9C,yBAAoB,GAAG,CAAC,YAA8B,EAAQ,EAAE;YACtE,IACE,YAAY,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,YAAY,EAAE,EAAE,EAAE,CACvD,IAAI,KAAK,WAAW;gBAClB,CAAC,CAAC,yBAAyB,CAAC,UAAU,EAAE,YAAY,EAAE;oBAClD,OAAO;oBACP,SAAS;iBACV,CAAC;gBACJ,CAAC,CAAC,KAAK,CACV,EACD,CAAC;gBACD,WAAW,CAAC,IAAI,CAAC,CAAC;YACpB,CAAC;QACH,CAAC,CAAC;uBAzDwC,MAAM;;;;yBAoBlB,SAAS;;;IAOvC,oBAAoB;;QAClB,MAAA,IAAI,CAAC,oBAAoB,0CAAE,UAAU,EAAE,CAAC;IAC1C,CAAC;IAED,gBAAgB;QACd,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,SAAS,CAAC;YAC7B,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,EAC7C,aAAa,CACd,CAAC;QAEJ,IAAI,CAAC,oBAAoB,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;QAC5E,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE;YACzC,SAAS,EAAE,IAAI;SAChB,CAAC,CAAC;IACL,CAAC;IAiBD,MAAM;QACJ,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,GACnE,IAAI,CAAC;QACP,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;gBACL,CAAC,GAAG,OAAO,EAAE,CAAC,EAAE,IAAI;gBACpB,CAAC,SAAS,SAAS,EAAE,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,CAAC;aACrD;YAEA,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,CAAC,IAAI,YAAM,IAAI,EAAC,OAAO,GAAQ;YAC3D;gBACE,YAAM,IAAI,EAAC,SAAS;oBAClB,qBAAe,OAAO,EAAC,IAAI,IAAE,OAAO,CAAiB,CAChD;gBACP,YAAM,IAAI,EAAC,YAAY;oBACrB,qBAAe,OAAO,EAAC,gBAAgB,IAAE,UAAU,CAAiB,CAC/D;gBACP,YAAM,IAAI,EAAC,MAAM;oBACf,qBAAe,QAAQ,EAAE,YAAY,IAAG,IAAI,CAAiB,CACxD,CACH;YACL,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,SAAS,CAAC,IAAI,CACjC,WAAK,KAAK,EAAC,aAAa;gBACtB,YAAM,IAAI,EAAC,SAAS,GAAG,CACnB,CACP,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { h, Component, Host, Prop, Element, forceUpdate } from \"@stencil/core\";\n\nimport { IcEmptyStateAlignment } from \"./ic-empty-state.types\";\nimport {\n  isSlotUsed,\n  onComponentRequiredPropUndefined,\n  checkSlotInChildMutations,\n} from \"../../utils/helpers\";\nimport { IcSizes } from \"../../utils/types\";\n\n/**\n * @slot image - Content is placed at the top above all other content.\n * @slot actions - Content is placed at the bottom below all other content.\n * @slot heading - Content will be rendered in place of the heading prop.\n * @slot subheading - Content will be rendered in place of the subheading prop.\n * @slot body - Content will be rendered in place of the body prop.\n */\n@Component({\n  tag: \"ic-empty-state\",\n  styleUrl: \"ic-empty-state.css\",\n  shadow: true,\n})\nexport class EmptyState {\n  private hostMutationObserver: MutationObserver = null;\n\n  @Element() el: HTMLIcEmptyStateElement;\n\n  /**\n   * The alignment of the empty state container.\n   */\n  @Prop() aligned?: IcEmptyStateAlignment = \"left\";\n\n  /**\n   * The body text rendered in the empty state container.\n   */\n  @Prop() body?: string;\n\n  /**\n   * The number of lines of body text to display before truncating.\n   */\n  @Prop() bodyMaxLines?: number;\n\n  /**\n   * The title rendered in the empty state container.\n   */\n  @Prop() heading?: string;\n\n  /**\n   * The size of the image or icon used in the image slot.\n   */\n  @Prop() imageSize?: IcSizes = \"default\";\n\n  /**\n   * The subtitle rendered in the empty state container.\n   */\n  @Prop() subheading?: string;\n\n  disconnectedCallback(): void {\n    this.hostMutationObserver?.disconnect();\n  }\n\n  componentDidLoad(): void {\n    !isSlotUsed(this.el, \"heading\") &&\n      onComponentRequiredPropUndefined(\n        [{ prop: this.heading, propName: \"heading\" }],\n        \"Empty State\"\n      );\n\n    this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n    this.hostMutationObserver.observe(this.el, {\n      childList: true,\n    });\n  }\n\n  private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n    if (\n      mutationList.some(({ type, addedNodes, removedNodes }) =>\n        type === \"childList\"\n          ? checkSlotInChildMutations(addedNodes, removedNodes, [\n              \"image\",\n              \"actions\",\n            ])\n          : false\n      )\n    ) {\n      forceUpdate(this);\n    }\n  };\n\n  render() {\n    const { aligned, body, bodyMaxLines, heading, imageSize, subheading } =\n      this;\n    return (\n      <Host\n        class={{\n          [`${aligned}`]: true,\n          [`image-${imageSize}`]: isSlotUsed(this.el, \"image\"),\n        }}\n      >\n        {isSlotUsed(this.el, \"image\") && <slot name=\"image\"></slot>}\n        <div>\n          <slot name=\"heading\">\n            <ic-typography variant=\"h4\">{heading}</ic-typography>\n          </slot>\n          <slot name=\"subheading\">\n            <ic-typography variant=\"subtitle-small\">{subheading}</ic-typography>\n          </slot>\n          <slot name=\"body\">\n            <ic-typography maxLines={bodyMaxLines}>{body}</ic-typography>\n          </slot>\n        </div>\n        {isSlotUsed(this.el, \"actions\") && (\n          <div class=\"action-area\">\n            <slot name=\"actions\" />\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-empty-state.js","sourceRoot":"","sources":["../../../src/components/ic-empty-state/ic-empty-state.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAG/E,OAAO,EACL,UAAU,EACV,gCAAgC,EAChC,yBAAyB,GAC1B,MAAM,qBAAqB,CAAC;AAG7B;;;;;;GAMG;AAMH,MAAM,OAAO,UAAU;;QACb,yBAAoB,GAAqB,IAAI,CAAC;QAmD9C,yBAAoB,GAAG,CAAC,YAA8B,EAAQ,EAAE;YACtE,IACE,YAAY,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,YAAY,EAAE,EAAE,EAAE,CACvD,IAAI,KAAK,WAAW;gBAClB,CAAC,CAAC,yBAAyB,CAAC,UAAU,EAAE,YAAY,EAAE;oBAClD,OAAO;oBACP,SAAS;iBACV,CAAC;gBACJ,CAAC,CAAC,KAAK,CACV,EACD,CAAC;gBACD,WAAW,CAAC,IAAI,CAAC,CAAC;YACpB,CAAC;QACH,CAAC,CAAC;uBAzDwC,MAAM;;;;yBAoBlB,QAAQ;;;IAOtC,oBAAoB;;QAClB,MAAA,IAAI,CAAC,oBAAoB,0CAAE,UAAU,EAAE,CAAC;IAC1C,CAAC;IAED,gBAAgB;QACd,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,SAAS,CAAC;YAC7B,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,EAC7C,aAAa,CACd,CAAC;QAEJ,IAAI,CAAC,oBAAoB,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;QAC5E,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE;YACzC,SAAS,EAAE,IAAI;SAChB,CAAC,CAAC;IACL,CAAC;IAiBD,MAAM;QACJ,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;QACzE,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;gBACL,CAAC,kBAAkB,OAAO,EAAE,CAAC,EAAE,IAAI;gBACnC,CAAC,SAAS,SAAS,EAAE,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,CAAC;aACrD;YAEA,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,CAAC,IAAI,YAAM,IAAI,EAAC,OAAO,GAAQ;YAC3D;gBACE,YAAM,IAAI,EAAC,SAAS;oBAClB,qBAAe,OAAO,EAAC,IAAI,IAAE,OAAO,CAAiB,CAChD;gBACP,YAAM,IAAI,EAAC,YAAY;oBACrB,qBAAe,OAAO,EAAC,gBAAgB,IAAE,UAAU,CAAiB,CAC/D;gBACP,YAAM,IAAI,EAAC,MAAM;oBACf,qBAAe,QAAQ,EAAE,QAAQ,IAAG,IAAI,CAAiB,CACpD,CACH;YACL,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,SAAS,CAAC,IAAI,CACjC,WAAK,KAAK,EAAC,aAAa;gBACtB,YAAM,IAAI,EAAC,SAAS,GAAG,CACnB,CACP,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { h, Component, Host, Prop, Element, forceUpdate } from \"@stencil/core\";\n\nimport { IcEmptyStateAlignment } from \"./ic-empty-state.types\";\nimport {\n  isSlotUsed,\n  onComponentRequiredPropUndefined,\n  checkSlotInChildMutations,\n} from \"../../utils/helpers\";\nimport { IcSizes } from \"../../utils/types\";\n\n/**\n * @slot image - Content is placed at the top above all other content.\n * @slot actions - Content is placed at the bottom below all other content.\n * @slot heading - Content will be rendered in place of the heading prop.\n * @slot subheading - Content will be rendered in place of the subheading prop.\n * @slot body - Content will be rendered in place of the body prop.\n */\n@Component({\n  tag: \"ic-empty-state\",\n  styleUrl: \"ic-empty-state.css\",\n  shadow: true,\n})\nexport class EmptyState {\n  private hostMutationObserver: MutationObserver = null;\n\n  @Element() el: HTMLIcEmptyStateElement;\n\n  /**\n   * The alignment of the empty state container.\n   */\n  @Prop() aligned?: IcEmptyStateAlignment = \"left\";\n\n  /**\n   * The body text rendered in the empty state container.\n   */\n  @Prop() body?: string;\n\n  /**\n   * The number of lines of body text to display before truncating.\n   */\n  @Prop() maxLines?: number;\n\n  /**\n   * The title rendered in the empty state container.\n   */\n  @Prop() heading?: string;\n\n  /**\n   * The size of the image or icon used in the image slot.\n   */\n  @Prop() imageSize?: IcSizes = \"medium\";\n\n  /**\n   * The subtitle rendered in the empty state container.\n   */\n  @Prop() subheading?: string;\n\n  disconnectedCallback(): void {\n    this.hostMutationObserver?.disconnect();\n  }\n\n  componentDidLoad(): void {\n    !isSlotUsed(this.el, \"heading\") &&\n      onComponentRequiredPropUndefined(\n        [{ prop: this.heading, propName: \"heading\" }],\n        \"Empty State\"\n      );\n\n    this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n    this.hostMutationObserver.observe(this.el, {\n      childList: true,\n    });\n  }\n\n  private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n    if (\n      mutationList.some(({ type, addedNodes, removedNodes }) =>\n        type === \"childList\"\n          ? checkSlotInChildMutations(addedNodes, removedNodes, [\n              \"image\",\n              \"actions\",\n            ])\n          : false\n      )\n    ) {\n      forceUpdate(this);\n    }\n  };\n\n  render() {\n    const { aligned, body, maxLines, heading, imageSize, subheading } = this;\n    return (\n      <Host\n        class={{\n          [`ic-empty-state-${aligned}`]: true,\n          [`image-${imageSize}`]: isSlotUsed(this.el, \"image\"),\n        }}\n      >\n        {isSlotUsed(this.el, \"image\") && <slot name=\"image\"></slot>}\n        <div>\n          <slot name=\"heading\">\n            <ic-typography variant=\"h4\">{heading}</ic-typography>\n          </slot>\n          <slot name=\"subheading\">\n            <ic-typography variant=\"subtitle-small\">{subheading}</ic-typography>\n          </slot>\n          <slot name=\"body\">\n            <ic-typography maxLines={maxLines}>{body}</ic-typography>\n          </slot>\n        </div>\n        {isSlotUsed(this.el, \"actions\") && (\n          <div class=\"action-area\">\n            <slot name=\"actions\" />\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -447,31 +447,31 @@ video {
   --footer-compliance-padding: 1rem 0;
 }
 
-:host(.footer-sparse) {
+:host(.ic-footer-sparse) {
   --footer-links-padding: 1.5rem 0;
-  --footer-logo-margin-bottom: var(--ic-space-lg);
+  --footer-logo-margin-bottom: calc(var(--ic-space-md) + var(--ic-space-xxs));
   --footer-link-inner-flex-direction: row;
 }
 
-:host(.footer-small) {
+:host(.ic-footer-small) {
   --footer-links-padding: 0 0;
   --footer-logo-margin-bottom: var(--ic-space-md);
   --footer-link-inner-flex-direction: column;
 }
 
-:host(.footer-light) {
+:host(.ic-footer-foreground-light) {
   --footer-theme-secondary: var(--ic-theme-secondary);
   --footer-theme-tertiary: var(--ic-theme-tertiary);
   --footer-keyline: var(--ic-keyline-lighten);
 }
 
-:host(.footer-dark) {
+:host(.ic-footer-foreground-dark) {
   --footer-theme-secondary: var(--ic-theme-secondary-light);
   --footer-theme-tertiary: var(--ic-theme-tertiary-light);
   --footer-keyline: var(--ic-keyline-darken);
 }
 
-:host(.footer-small.footer-ungrouped) {
+:host(.ic-footer-small.ic-footer-ungrouped) {
   --footer-links-padding: var(--ic-space-md) 0 0 0;
 }
 
@@ -487,6 +487,9 @@ footer {
 .footer-description {
   background-color: var(--footer-theme-secondary);
   color: var(--ic-theme-text);
+
+  --ic-typography-color: var(--ic-theme-text);
+
   border-bottom: var(--footer-keyline);
 }
 
@@ -500,6 +503,8 @@ footer {
   padding: var(--footer-links-padding);
   background-color: var(--footer-theme-secondary);
   color: var(--ic-theme-text);
+
+  --ic-typography-color: var(--ic-theme-text);
 }
 
 .footer-links-inner {
@@ -512,6 +517,8 @@ footer {
 .footer-compliance {
   background-color: var(--footer-theme-tertiary);
   color: var(--ic-theme-text);
+
+  --ic-typography-color: var(--ic-theme-text);
 }
 
 .footer-compliance-inner {

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

@@ -66,13 +66,13 @@ export class Footer {
         const { aligned, caption, copyright, description, groupLinks, foregroundColor, } = this;
         const small = this.isSmall();
         return (h(Host, { class: {
-                footer: true,
-                [`footer-${small ? "small" : "sparse"}`]: true,
-                [`footer-${groupLinks ? "grouped" : "ungrouped"}`]: true,
-                [`footer-${foregroundColor}`]: true,
+                ["ic-footer"]: true,
+                [`ic-footer-${small ? "small" : "sparse"}`]: true,
+                [`ic-footer-${groupLinks ? "grouped" : "ungrouped"}`]: true,
+                [`ic-footer-foreground-${foregroundColor}`]: true,
                 // Slots will be able to infer their own color
-                [IcThemeForegroundEnum.Dark]: foregroundColor === IcThemeForegroundEnum.Dark,
-                [IcThemeForegroundEnum.Light]: foregroundColor === IcThemeForegroundEnum.Light,
+                [`ic-footer-${IcThemeForegroundEnum.Dark}`]: foregroundColor === IcThemeForegroundEnum.Dark,
+                [`ic-footer-${IcThemeForegroundEnum.Light}`]: foregroundColor === IcThemeForegroundEnum.Light,
             } }, h("footer", { ref: (footerEl) => (this.footerEl = footerEl) }, (isSlotUsed(this.el, "description") || description) && (h("div", { class: "footer-description" }, h("ic-section-container", { aligned: aligned, fullHeight: true }, h("div", { class: "footer-description-inner" }, h("ic-typography", { variant: "body" }, h("slot", { name: "description" }, description)))))), isSlotUsed(this.el, "link") && (h("div", { class: "footer-links" }, groupLinks && small ? (h("div", { class: "footer-links-inner", role: "list" }, h("slot", { name: "link" }))) : (h("ic-section-container", { fullHeight: true, aligned: aligned }, h("div", { class: "footer-links-inner", role: "list" }, h("slot", { name: "link" })))))), h("div", { class: "footer-compliance" }, h("ic-section-container", { aligned: aligned, fullHeight: true }, h("div", { class: "footer-compliance-inner" }, isSlotUsed(this.el, "logo") && (h("div", { class: "footer-logo" }, h("slot", { name: "logo" }))), (isSlotUsed(this.el, "caption") || caption) && (h("div", { class: "footer-caption" }, h("ic-typography", { variant: this.deviceSize <= IC_DEVICE_SIZES.M
                 ? "caption"
                 : "body" }, h("slot", { name: "caption" }, caption)))), copyright && (h("div", { class: {

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

@@ -1 +1 @@
-{"version":3,"file":"ic-footer.js","sourceRoot":"","sources":["../../../src/components/ic-footer/ic-footer.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Prop,\n  State,\n  h,\n  Host,\n  Listen,\n} from \"@stencil/core\";\nimport { IC_DEVICE_SIZES } from \"../../utils/constants\";\nimport {\n  getCurrentDeviceSize,\n  getThemeForegroundColor,\n  checkResizeObserver,\n  hasClassificationBanner,\n  isSlotUsed,\n} from \"../../utils/helpers\";\nimport {\n  IcAlignment,\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport { IcFooterBreakpoints } from \"./ic-footer.types\";\n\n/**\n * @slot description - Content will be rendered at the top of the footer.\n * @slot link - Content will be rendered between description and logos.\n * @slot logo - Content will be rendered underneath footer links.\n * @slot caption - Content will be rendered above Crown Copyright.\n */\n\n@Component({\n  tag: \"ic-footer\",\n  styleUrl: \"ic-footer.css\",\n  shadow: true,\n})\nexport class Footer {\n  private footerEl: HTMLElement;\n  private resizeObserver: ResizeObserver = null;\n\n  @Element() el: HTMLIcFooterElement;\n\n  @State() deviceSize: number = IC_DEVICE_SIZES.XL;\n  @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n\n  /**\n   * The alignment of the section containers used within the footer.\n   */\n  @Prop() aligned?: IcAlignment = \"left\";\n\n  /**\n   * The screen size breakpoint at which to switch to the small layout.\n   */\n  @Prop() breakpoint?: IcFooterBreakpoints = \"medium\";\n\n  /**\n   * The caption displayed at the bottom of the footer.\n   */\n  @Prop() caption: string;\n\n  /**\n   * If `true`, the footer will display the crown copyright at the bottom.\n   */\n  @Prop() copyright: boolean = true;\n\n  /**\n   * The description displayed at the top of the footer.\n   */\n  @Prop() description: string;\n\n  /**\n   * If `true`, the footer will be set up to handle link groups instead of standalone links.\n   */\n  @Prop() groupLinks?: boolean = false;\n\n  /**\n   *  @internal Triggers on page resize and triggers style changes in footer links and link groups\n   */\n  @Event() footerResized: EventEmitter<void>;\n\n  disconnectedCallback(): void {\n    if (this.resizeObserver !== null) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  componentWillLoad(): void {\n    this.deviceSize = getCurrentDeviceSize();\n  }\n\n  componentDidLoad(): void {\n    checkResizeObserver(this.runResizeObserver);\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.foregroundColor = theme.mode;\n  }\n\n  private isSmall() {\n    const bp = this.breakpoint;\n\n    return bp === \"extra small\"\n      ? this.deviceSize < IC_DEVICE_SIZES.XS\n      : bp === \"small\"\n      ? this.deviceSize < IC_DEVICE_SIZES.S\n      : bp === \"medium\"\n      ? this.deviceSize < IC_DEVICE_SIZES.M\n      : bp === \"large\"\n      ? this.deviceSize < IC_DEVICE_SIZES.L\n      : bp === \"extra large\"\n      ? this.deviceSize < IC_DEVICE_SIZES.XL\n      : false;\n  }\n\n  private resizeObserverCallback = (currSize: number) => {\n    if (currSize !== this.deviceSize) {\n      this.deviceSize = currSize;\n    }\n    this.footerResized.emit();\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      const currSize = getCurrentDeviceSize();\n      this.resizeObserverCallback(currSize);\n    });\n\n    this.resizeObserver.observe(this.footerEl);\n  };\n\n  render() {\n    const {\n      aligned,\n      caption,\n      copyright,\n      description,\n      groupLinks,\n      foregroundColor,\n    } = this;\n    const small = this.isSmall();\n\n    return (\n      <Host\n        class={{\n          footer: true,\n          [`footer-${small ? \"small\" : \"sparse\"}`]: true,\n          [`footer-${groupLinks ? \"grouped\" : \"ungrouped\"}`]: true,\n          [`footer-${foregroundColor}`]: true,\n          // Slots will be able to infer their own color\n          [IcThemeForegroundEnum.Dark]:\n            foregroundColor === IcThemeForegroundEnum.Dark,\n          [IcThemeForegroundEnum.Light]:\n            foregroundColor === IcThemeForegroundEnum.Light,\n        }}\n      >\n        <footer ref={(footerEl) => (this.footerEl = footerEl)}>\n          {/* Description */}\n          {(isSlotUsed(this.el, \"description\") || description) && (\n            <div class=\"footer-description\">\n              <ic-section-container aligned={aligned} fullHeight={true}>\n                <div class=\"footer-description-inner\">\n                  <ic-typography variant=\"body\">\n                    <slot name=\"description\">{description}</slot>\n                  </ic-typography>\n                </div>\n              </ic-section-container>\n            </div>\n          )}\n\n          {/* Links */}\n          {isSlotUsed(this.el, \"link\") && (\n            <div class=\"footer-links\">\n              {groupLinks && small ? (\n                <div class=\"footer-links-inner\" role=\"list\">\n                  <slot name=\"link\" />\n                </div>\n              ) : (\n                <ic-section-container fullHeight aligned={aligned}>\n                  <div class=\"footer-links-inner\" role=\"list\">\n                    <slot name=\"link\" />\n                  </div>\n                </ic-section-container>\n              )}\n            </div>\n          )}\n\n          {/* Compliance (logo, caption, copyright) */}\n          <div class=\"footer-compliance\">\n            <ic-section-container aligned={aligned} fullHeight={true}>\n              <div class=\"footer-compliance-inner\">\n                {isSlotUsed(this.el, \"logo\") && (\n                  <div class=\"footer-logo\">\n                    {/* Logo */}\n                    <slot name=\"logo\" />\n                  </div>\n                )}\n                {(isSlotUsed(this.el, \"caption\") || caption) && (\n                  <div class=\"footer-caption\">\n                    <ic-typography\n                      variant={\n                        this.deviceSize <= IC_DEVICE_SIZES.M\n                          ? \"caption\"\n                          : \"body\"\n                      }\n                    >\n                      <slot name=\"caption\">{caption}</slot>\n                    </ic-typography>\n                  </div>\n                )}\n                {copyright && (\n                  <div\n                    class={{\n                      [\"footer-copyright\"]: true,\n                      [\"classification-spacing\"]: hasClassificationBanner(),\n                    }}\n                  >\n                    <ic-typography\n                      variant={\n                        this.deviceSize <= IC_DEVICE_SIZES.M\n                          ? \"caption-uppercase\"\n                          : \"label-uppercase\"\n                      }\n                    >\n                      &copy; Crown Copyright\n                    </ic-typography>\n                  </div>\n                )}\n              </div>\n            </ic-section-container>\n          </div>\n        </footer>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-footer.js","sourceRoot":"","sources":["../../../src/components/ic-footer/ic-footer.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Prop,\n  State,\n  h,\n  Host,\n  Listen,\n} from \"@stencil/core\";\nimport { IC_DEVICE_SIZES } from \"../../utils/constants\";\nimport {\n  getCurrentDeviceSize,\n  getThemeForegroundColor,\n  checkResizeObserver,\n  hasClassificationBanner,\n  isSlotUsed,\n} from \"../../utils/helpers\";\nimport {\n  IcAlignment,\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport { IcFooterBreakpoints } from \"./ic-footer.types\";\n\n/**\n * @slot description - Content will be rendered at the top of the footer.\n * @slot link - Content will be rendered between description and logos.\n * @slot logo - Content will be rendered underneath footer links.\n * @slot caption - Content will be rendered above Crown Copyright.\n */\n\n@Component({\n  tag: \"ic-footer\",\n  styleUrl: \"ic-footer.css\",\n  shadow: true,\n})\nexport class Footer {\n  private footerEl: HTMLElement;\n  private resizeObserver: ResizeObserver = null;\n\n  @Element() el: HTMLIcFooterElement;\n\n  @State() deviceSize: number = IC_DEVICE_SIZES.XL;\n  @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n\n  /**\n   * The alignment of the section containers used within the footer.\n   */\n  @Prop() aligned?: IcAlignment = \"left\";\n\n  /**\n   * The screen size breakpoint at which to switch to the small layout.\n   */\n  @Prop() breakpoint?: IcFooterBreakpoints = \"medium\";\n\n  /**\n   * The caption displayed at the bottom of the footer.\n   */\n  @Prop() caption: string;\n\n  /**\n   * If `true`, the footer will display the crown copyright at the bottom.\n   */\n  @Prop() copyright: boolean = true;\n\n  /**\n   * The description displayed at the top of the footer.\n   */\n  @Prop() description: string;\n\n  /**\n   * If `true`, the footer will be set up to handle link groups instead of standalone links.\n   */\n  @Prop() groupLinks?: boolean = false;\n\n  /**\n   *  @internal Triggers on page resize and triggers style changes in footer links and link groups\n   */\n  @Event() footerResized: EventEmitter<void>;\n\n  disconnectedCallback(): void {\n    if (this.resizeObserver !== null) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  componentWillLoad(): void {\n    this.deviceSize = getCurrentDeviceSize();\n  }\n\n  componentDidLoad(): void {\n    checkResizeObserver(this.runResizeObserver);\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.foregroundColor = theme.mode;\n  }\n\n  private isSmall() {\n    const bp = this.breakpoint;\n\n    return bp === \"extra small\"\n      ? this.deviceSize < IC_DEVICE_SIZES.XS\n      : bp === \"small\"\n      ? this.deviceSize < IC_DEVICE_SIZES.S\n      : bp === \"medium\"\n      ? this.deviceSize < IC_DEVICE_SIZES.M\n      : bp === \"large\"\n      ? this.deviceSize < IC_DEVICE_SIZES.L\n      : bp === \"extra large\"\n      ? this.deviceSize < IC_DEVICE_SIZES.XL\n      : false;\n  }\n\n  private resizeObserverCallback = (currSize: number) => {\n    if (currSize !== this.deviceSize) {\n      this.deviceSize = currSize;\n    }\n    this.footerResized.emit();\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      const currSize = getCurrentDeviceSize();\n      this.resizeObserverCallback(currSize);\n    });\n\n    this.resizeObserver.observe(this.footerEl);\n  };\n\n  render() {\n    const {\n      aligned,\n      caption,\n      copyright,\n      description,\n      groupLinks,\n      foregroundColor,\n    } = this;\n    const small = this.isSmall();\n\n    return (\n      <Host\n        class={{\n          [\"ic-footer\"]: true,\n          [`ic-footer-${small ? \"small\" : \"sparse\"}`]: true,\n          [`ic-footer-${groupLinks ? \"grouped\" : \"ungrouped\"}`]: true,\n          [`ic-footer-foreground-${foregroundColor}`]: true,\n          // Slots will be able to infer their own color\n          [`ic-footer-${IcThemeForegroundEnum.Dark}`]:\n            foregroundColor === IcThemeForegroundEnum.Dark,\n          [`ic-footer-${IcThemeForegroundEnum.Light}`]:\n            foregroundColor === IcThemeForegroundEnum.Light,\n        }}\n      >\n        <footer ref={(footerEl) => (this.footerEl = footerEl)}>\n          {/* Description */}\n          {(isSlotUsed(this.el, \"description\") || description) && (\n            <div class=\"footer-description\">\n              <ic-section-container aligned={aligned} fullHeight={true}>\n                <div class=\"footer-description-inner\">\n                  <ic-typography variant=\"body\">\n                    <slot name=\"description\">{description}</slot>\n                  </ic-typography>\n                </div>\n              </ic-section-container>\n            </div>\n          )}\n\n          {/* Links */}\n          {isSlotUsed(this.el, \"link\") && (\n            <div class=\"footer-links\">\n              {groupLinks && small ? (\n                <div class=\"footer-links-inner\" role=\"list\">\n                  <slot name=\"link\" />\n                </div>\n              ) : (\n                <ic-section-container fullHeight aligned={aligned}>\n                  <div class=\"footer-links-inner\" role=\"list\">\n                    <slot name=\"link\" />\n                  </div>\n                </ic-section-container>\n              )}\n            </div>\n          )}\n\n          {/* Compliance (logo, caption, copyright) */}\n          <div class=\"footer-compliance\">\n            <ic-section-container aligned={aligned} fullHeight={true}>\n              <div class=\"footer-compliance-inner\">\n                {isSlotUsed(this.el, \"logo\") && (\n                  <div class=\"footer-logo\">\n                    {/* Logo */}\n                    <slot name=\"logo\" />\n                  </div>\n                )}\n                {(isSlotUsed(this.el, \"caption\") || caption) && (\n                  <div class=\"footer-caption\">\n                    <ic-typography\n                      variant={\n                        this.deviceSize <= IC_DEVICE_SIZES.M\n                          ? \"caption\"\n                          : \"body\"\n                      }\n                    >\n                      <slot name=\"caption\">{caption}</slot>\n                    </ic-typography>\n                  </div>\n                )}\n                {copyright && (\n                  <div\n                    class={{\n                      [\"footer-copyright\"]: true,\n                      [\"classification-spacing\"]: hasClassificationBanner(),\n                    }}\n                  >\n                    <ic-typography\n                      variant={\n                        this.deviceSize <= IC_DEVICE_SIZES.M\n                          ? \"caption-uppercase\"\n                          : \"label-uppercase\"\n                      }\n                    >\n                      &copy; Crown Copyright\n                    </ic-typography>\n                  </div>\n                )}\n              </div>\n            </ic-section-container>\n          </div>\n        </footer>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -54,7 +54,7 @@ describe("ic-footer", () => {
             components: [Footer],
             html: `
             <ic-footer description="This is a footer" caption="Made by ICDS">
-                <ic-footer-link-group group-title="Links" slot="link">
+                <ic-footer-link-group label="Links" slot="link">
                     <ic-footer-link href="/">Link</ic-footer-link>
                     <ic-footer-link href="/">Link</ic-footer-link>
                 </ic-footer-link-group>

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

@@ -1 +1 @@
-{"version":3,"file":"ic-footer.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-footer/test/basic/ic-footer.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,sCAAsC,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAEzD,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;IACzB,EAAE,CAAC,eAAe,EAAE,KAAK,IAAI,EAAE;QAC7B,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,MAAM,CAAC;YACpB,IAAI,EAAE,yBAAyB;SAChC,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACtC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,2DAA2D,EAAE,KAAK,IAAI,EAAE;QACzE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,MAAM,EAAE,UAAU,CAAC;YAChC,IAAI,EAAE,2FAA2F;SAClG,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACtC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,mDAAmD,EAAE,KAAK,IAAI,EAAE;QACjE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,MAAM,CAAC;YACpB,IAAI,EAAE,+EAA+E;SACtF,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACtC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,mDAAmD,EAAE,KAAK,IAAI,EAAE;QACjE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,MAAM,CAAC;YACpB,IAAI,EAAE,kHAAkH;SACzH,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACtC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,2EAA2E,EAAE,KAAK,IAAI,EAAE;QACzF,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,MAAM,CAAC;YACpB,IAAI,EAAE,kIAAkI;SACzI,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACtC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,0BAA0B,EAAE,KAAK,IAAI,EAAE;QACxC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,MAAM,CAAC;YACpB,IAAI,EAAE;;;;yBAIa;SACpB,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACtC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gCAAgC,EAAE,KAAK,IAAI,EAAE;QAC9C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,MAAM,CAAC;YACpB,IAAI,EAAE;;;;;;yBAMa;SACpB,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACtC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,0CAA0C,EAAE,KAAK,IAAI,EAAE;QACxD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,MAAM,CAAC;YACpB,IAAI,EAAE,8EAA8E;SACrF,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,CAAC,8BAA8B,CAAC,CAAC;IACpE,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,2DAA2D,EAAE,KAAK,IAAI,EAAE;QACzE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,MAAM,CAAC;YACpB,IAAI,EAAE,mDAAmD;SAC1D,CAAC,CAAC;QAEH,MAAM,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,CAAC,CAAC;QAE1E,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAC1D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,4BAA4B,EAAE,KAAK,IAAI,EAAE;QAC1C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,MAAM,CAAC;YACpB,IAAI,EAAE,qEAAqE;SAC5E,CAAC,CAAC;QAEH,MAAM,IAAI,CAAC,YAAY,CAAC,iBAAiB,EAAE,CAAC;QAC5C,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,MAAM,IAAI,CAAC,YAAY,CAAC,sBAAsB,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;QAChE,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,MAAM,CACJ,IAAI,CAAC,IAAI,CAAC,UAAU;aACjB,aAAa,CAAC,iBAAiB,CAAC;aAChC,iBAAiB,CAAC,YAAY,CAAC,SAAS,CAAC,CAC7C,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAEf,MAAM,IAAI,CAAC,YAAY,CAAC,sBAAsB,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;QAChE,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,MAAM,CACJ,IAAI,CAAC,IAAI,CAAC,UAAU;aACjB,aAAa,CAAC,iBAAiB,CAAC;aAChC,iBAAiB,CAAC,YAAY,CAAC,SAAS,CAAC,CAC7C,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAElB,MAAM,IAAI,CAAC,YAAY,CAAC,oBAAoB,EAAE,CAAC;IACjD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,4EAA4E,EAAE,KAAK,IAAI,EAAE;QAC1F,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,MAAM,CAAC;YACpB,IAAI,EAAE,8FAA8F;SACrG,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,QAAQ,CAAC;QAE/B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,CAAC,sBAAsB,CAAC,CAAC;IAC5D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,sEAAsE,EAAE,KAAK,IAAI,EAAE;QACpF,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,MAAM,CAAC;YACpB,IAAI,EAAE,wFAAwF;SAC/F,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,QAAQ,CAAC;QAE/B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,CAAC,qBAAqB,CAAC,CAAC;IAC3D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,uEAAuE,EAAE,KAAK,IAAI,EAAE;QACrF,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,MAAM,CAAC;YACpB,IAAI,EAAE,yFAAyF;SAChG,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,QAAQ,CAAC;QAE/B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,CAAC,qBAAqB,CAAC,CAAC;IAC3D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,sEAAsE,EAAE,KAAK,IAAI,EAAE;QACpF,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,MAAM,CAAC;YACpB,IAAI,EAAE,wFAAwF;SAC/F,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,QAAQ,CAAC;QAE/B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,CAAC,qBAAqB,CAAC,CAAC;IAC3D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,4EAA4E,EAAE,KAAK,IAAI,EAAE;QAC1F,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,MAAM,CAAC;YACpB,IAAI,EAAE,8FAA8F;SACrG,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,QAAQ,CAAC;QAE/B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,CAAC,sBAAsB,CAAC,CAAC;IAC5D,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { Typography } from \"../../../ic-typography/ic-typography\";\nimport { Footer } from \"../../ic-footer\";\nimport { DEVICE_SIZES } from \"../../../../utils/helpers\";\n\ndescribe(\"ic-footer\", () => {\n  it(\"should render\", async () => {\n    const page = await newSpecPage({\n      components: [Footer],\n      html: `<ic-footer></ic-footer>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with a description via the description slot\", async () => {\n    const page = await newSpecPage({\n      components: [Footer, Typography],\n      html: `<ic-footer><ic-typography slot=\"description\">This is a footer</ic-typography></ic-footer>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with a caption via the caption prop\", async () => {\n    const page = await newSpecPage({\n      components: [Footer],\n      html: `<ic-footer description=\"This is a footer\" caption=\"Made by ICDS\"></ic-footer>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with a caption via the caption slot\", async () => {\n    const page = await newSpecPage({\n      components: [Footer],\n      html: `<ic-footer description=\"This is a footer\"><ic-typography slot=\"caption\">Made by ICDS</ic-typography></ic-footer>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render without the copyright text when the copyright prop is false\", async () => {\n    const page = await newSpecPage({\n      components: [Footer],\n      html: `<ic-footer description=\"This is a footer\" copyright=false><ic-typography slot=\"caption\">Made by ICDS</ic-typography></ic-footer>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with links\", async () => {\n    const page = await newSpecPage({\n      components: [Footer],\n      html: `\n            <ic-footer description=\"This is a footer\" caption=\"Made by ICDS\">\n                <ic-footer-link href=\"/\" slot=\"link\">Link</ic-footer-link>\n                <ic-footer-link href=\"/\" slot=\"link\">Link</ic-footer-link>\n            </ic-footer>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with link groups\", async () => {\n    const page = await newSpecPage({\n      components: [Footer],\n      html: `\n            <ic-footer description=\"This is a footer\" caption=\"Made by ICDS\">\n                <ic-footer-link-group group-title=\"Links\" slot=\"link\">\n                    <ic-footer-link href=\"/\">Link</ic-footer-link>\n                    <ic-footer-link href=\"/\">Link</ic-footer-link>\n                </ic-footer-link-group>\n            </ic-footer>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with classification banner\", async () => {\n    const page = await newSpecPage({\n      components: [Footer],\n      html: `<ic-classification-banner></ic-classification-banner><ic-footer></ic-footer>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"footer-classification-banner\");\n  });\n\n  it(\"should update foreground colour when the theme is updated\", async () => {\n    const page = await newSpecPage({\n      components: [Footer],\n      html: \"<div><ic-footer id='ic-footer'></ic-footer></div>\",\n    });\n\n    await page.rootInstance.themeChangeHandler({ detail: { mode: \"light\" } });\n\n    expect(page.rootInstance.foregroundColor).toBe(\"light\");\n  });\n\n  it(\"should update when resized\", async () => {\n    const page = await newSpecPage({\n      components: [Footer],\n      html: \"<div><ic-footer id='ic-footer' caption='caption'></ic-footer></div>\",\n    });\n\n    await page.rootInstance.runResizeObserver();\n    await page.waitForChanges();\n\n    await page.rootInstance.resizeObserverCallback(DEVICE_SIZES.XL);\n    await page.waitForChanges();\n\n    expect(\n      page.root.shadowRoot\n        .querySelector(\".footer-caption\")\n        .firstElementChild.getAttribute(\"variant\")\n    ).toBe(\"body\");\n\n    await page.rootInstance.resizeObserverCallback(DEVICE_SIZES.XS);\n    await page.waitForChanges();\n\n    expect(\n      page.root.shadowRoot\n        .querySelector(\".footer-caption\")\n        .firstElementChild.getAttribute(\"variant\")\n    ).toBe(\"caption\");\n\n    await page.rootInstance.disconnectedCallback();\n  });\n\n  it(\"should render with the correct small breakpoint at extra small device size\", async () => {\n    const page = await newSpecPage({\n      components: [Footer],\n      html: \"<div><ic-footer id='ic-footer' caption='caption' breakpoint='extra small'></ic-footer></div>\",\n    });\n\n    expect(page.root).not.toBeNull;\n\n    expect(page.root).toMatchSnapshot(\"footer-xs-breakpoint\");\n  });\n\n  it(\"should render with the correct small breakpoint at small device size\", async () => {\n    const page = await newSpecPage({\n      components: [Footer],\n      html: \"<div><ic-footer id='ic-footer' caption='caption' breakpoint='small'></ic-footer></div>\",\n    });\n\n    expect(page.root).not.toBeNull;\n\n    expect(page.root).toMatchSnapshot(\"footer-s-breakpoint\");\n  });\n\n  it(\"should render with the correct small breakpoint at medium device size\", async () => {\n    const page = await newSpecPage({\n      components: [Footer],\n      html: \"<div><ic-footer id='ic-footer' caption='caption' breakpoint='medium'></ic-footer></div>\",\n    });\n\n    expect(page.root).not.toBeNull;\n\n    expect(page.root).toMatchSnapshot(\"footer-m-breakpoint\");\n  });\n\n  it(\"should render with the correct small breakpoint at large device size\", async () => {\n    const page = await newSpecPage({\n      components: [Footer],\n      html: \"<div><ic-footer id='ic-footer' caption='caption' breakpoint='large'></ic-footer></div>\",\n    });\n\n    expect(page.root).not.toBeNull;\n\n    expect(page.root).toMatchSnapshot(\"footer-l-breakpoint\");\n  });\n\n  it(\"should render with the correct small breakpoint at extra large device size\", async () => {\n    const page = await newSpecPage({\n      components: [Footer],\n      html: \"<div><ic-footer id='ic-footer' caption='caption' breakpoint='extra large'></ic-footer></div>\",\n    });\n\n    expect(page.root).not.toBeNull;\n\n    expect(page.root).toMatchSnapshot(\"footer-xl-breakpoint\");\n  });\n});\n"]}
+{"version":3,"file":"ic-footer.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-footer/test/basic/ic-footer.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { Typography } from \"../../../ic-typography/ic-typography\";\nimport { Footer } from \"../../ic-footer\";\nimport { DEVICE_SIZES } from \"../../../../utils/helpers\";\n\ndescribe(\"ic-footer\", () => {\n  it(\"should render\", async () => {\n    const page = await newSpecPage({\n      components: [Footer],\n      html: `<ic-footer></ic-footer>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with a description via the description slot\", async () => {\n    const page = await newSpecPage({\n      components: [Footer, Typography],\n      html: `<ic-footer><ic-typography slot=\"description\">This is a footer</ic-typography></ic-footer>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with a caption via the caption prop\", async () => {\n    const page = await newSpecPage({\n      components: [Footer],\n      html: `<ic-footer description=\"This is a footer\" caption=\"Made by ICDS\"></ic-footer>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with a caption via the caption slot\", async () => {\n    const page = await newSpecPage({\n      components: [Footer],\n      html: `<ic-footer description=\"This is a footer\"><ic-typography slot=\"caption\">Made by ICDS</ic-typography></ic-footer>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render without the copyright text when the copyright prop is false\", async () => {\n    const page = await newSpecPage({\n      components: [Footer],\n      html: `<ic-footer description=\"This is a footer\" copyright=false><ic-typography slot=\"caption\">Made by ICDS</ic-typography></ic-footer>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with links\", async () => {\n    const page = await newSpecPage({\n      components: [Footer],\n      html: `\n            <ic-footer description=\"This is a footer\" caption=\"Made by ICDS\">\n                <ic-footer-link href=\"/\" slot=\"link\">Link</ic-footer-link>\n                <ic-footer-link href=\"/\" slot=\"link\">Link</ic-footer-link>\n            </ic-footer>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with link groups\", async () => {\n    const page = await newSpecPage({\n      components: [Footer],\n      html: `\n            <ic-footer description=\"This is a footer\" caption=\"Made by ICDS\">\n                <ic-footer-link-group label=\"Links\" slot=\"link\">\n                    <ic-footer-link href=\"/\">Link</ic-footer-link>\n                    <ic-footer-link href=\"/\">Link</ic-footer-link>\n                </ic-footer-link-group>\n            </ic-footer>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with classification banner\", async () => {\n    const page = await newSpecPage({\n      components: [Footer],\n      html: `<ic-classification-banner></ic-classification-banner><ic-footer></ic-footer>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"footer-classification-banner\");\n  });\n\n  it(\"should update foreground colour when the theme is updated\", async () => {\n    const page = await newSpecPage({\n      components: [Footer],\n      html: \"<div><ic-footer id='ic-footer'></ic-footer></div>\",\n    });\n\n    await page.rootInstance.themeChangeHandler({ detail: { mode: \"light\" } });\n\n    expect(page.rootInstance.foregroundColor).toBe(\"light\");\n  });\n\n  it(\"should update when resized\", async () => {\n    const page = await newSpecPage({\n      components: [Footer],\n      html: \"<div><ic-footer id='ic-footer' caption='caption'></ic-footer></div>\",\n    });\n\n    await page.rootInstance.runResizeObserver();\n    await page.waitForChanges();\n\n    await page.rootInstance.resizeObserverCallback(DEVICE_SIZES.XL);\n    await page.waitForChanges();\n\n    expect(\n      page.root.shadowRoot\n        .querySelector(\".footer-caption\")\n        .firstElementChild.getAttribute(\"variant\")\n    ).toBe(\"body\");\n\n    await page.rootInstance.resizeObserverCallback(DEVICE_SIZES.XS);\n    await page.waitForChanges();\n\n    expect(\n      page.root.shadowRoot\n        .querySelector(\".footer-caption\")\n        .firstElementChild.getAttribute(\"variant\")\n    ).toBe(\"caption\");\n\n    await page.rootInstance.disconnectedCallback();\n  });\n\n  it(\"should render with the correct small breakpoint at extra small device size\", async () => {\n    const page = await newSpecPage({\n      components: [Footer],\n      html: \"<div><ic-footer id='ic-footer' caption='caption' breakpoint='extra small'></ic-footer></div>\",\n    });\n\n    expect(page.root).not.toBeNull;\n\n    expect(page.root).toMatchSnapshot(\"footer-xs-breakpoint\");\n  });\n\n  it(\"should render with the correct small breakpoint at small device size\", async () => {\n    const page = await newSpecPage({\n      components: [Footer],\n      html: \"<div><ic-footer id='ic-footer' caption='caption' breakpoint='small'></ic-footer></div>\",\n    });\n\n    expect(page.root).not.toBeNull;\n\n    expect(page.root).toMatchSnapshot(\"footer-s-breakpoint\");\n  });\n\n  it(\"should render with the correct small breakpoint at medium device size\", async () => {\n    const page = await newSpecPage({\n      components: [Footer],\n      html: \"<div><ic-footer id='ic-footer' caption='caption' breakpoint='medium'></ic-footer></div>\",\n    });\n\n    expect(page.root).not.toBeNull;\n\n    expect(page.root).toMatchSnapshot(\"footer-m-breakpoint\");\n  });\n\n  it(\"should render with the correct small breakpoint at large device size\", async () => {\n    const page = await newSpecPage({\n      components: [Footer],\n      html: \"<div><ic-footer id='ic-footer' caption='caption' breakpoint='large'></ic-footer></div>\",\n    });\n\n    expect(page.root).not.toBeNull;\n\n    expect(page.root).toMatchSnapshot(\"footer-l-breakpoint\");\n  });\n\n  it(\"should render with the correct small breakpoint at extra large device size\", async () => {\n    const page = await newSpecPage({\n      components: [Footer],\n      html: \"<div><ic-footer id='ic-footer' caption='caption' breakpoint='extra large'></ic-footer></div>\",\n    });\n\n    expect(page.root).not.toBeNull;\n\n    expect(page.root).toMatchSnapshot(\"footer-xl-breakpoint\");\n  });\n});\n"]}

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

@@ -471,136 +471,67 @@ video {
   margin-bottom: var(--footer-link-margin-bottom);
 }
 
-/* Link styling */
-
-:host(.footer-link) a,
-:host(.footer-link) a ::slotted(a) {
-  display: flex;
-  align-items: flex-end;
-  font-weight: var(--ic-font-weight-bold);
-  color: inherit;
-  width: -moz-fit-content;
-  width: fit-content;
-  font-size: var(--ic-font-size-regular);
-}
-
-:host(.footer-link) a:link,
-:host(.footer-link) a ::slotted(a:link) {
-  color: inherit;
-  text-decoration: underline;
-  font-weight: var(--ic-font-weight-bold);
-}
-
-:host(.footer-link) a:link > ::slotted(svg),
-:host(.footer-link) a:link > ::slotted(img),
-:host(.footer-link) a ::slotted(a:link > ::slotted(svg)),
-:host(.footer-link) a ::slotted(a:link > ::slotted(img)) {
-  padding: var(--ic-space-xxxs);
-  pointer-events: none;
-  transition: var(--ic-easing-transition-fast);
-}
-
-/*
-There's an apparent defect in Chrome that means this isn't always re-rendered if changed.
-Not an issue in Safari. Line 73-79 implement the same function but less clean.
-
-a:link > ::slotted(svg) ,
-a:link:visited > ::slotted(svg) {
-  fill: var(--ic-theme-text);
-}
-*/
-
-:host(.footer-link-light) ::slotted(svg) {
-  fill: var(--ic-architectural-white);
-}
-
-:host(.footer-link-dark) ::slotted(svg) {
-  fill: var(--ic-architectural-black);
+.ic-link-open-in-new-icon {
+  vertical-align: middle;
+  margin-left: var(--ic-space-xxs);
 }
 
-:host(.footer-link) a:link:hover,
-:host(.footer-link) a:link:focus,
-:host(.footer-link) a ::slotted(a:link:hover),
-:host(.footer-link) a ::slotted(a:link:focus) {
-  border-bottom: 0.25rem solid !important;
-  margin-bottom: -0.25rem !important;
-  text-decoration: none;
+.ic-link > .ic-link-open-in-new-icon {
+  fill: var(--ic-hyperlink);
 }
 
-@supports (text-underline-offset: 25%) {
-  :host(.footer-link) a:link:hover,
-  :host(.footer-link) a:link:focus,
-  :host(.footer-link) a ::slotted(a:link:hover),
-  :host(.footer-link) a ::slotted(a:link:focus) {
-    text-decoration-line: underline;
-    text-decoration-thickness: 25%;
-    text-underline-offset: 25%;
-    border-bottom: 0 !important;
-    margin-bottom: 0 !important;
-  }
+.ic-link-open-in-new-icon > svg {
+  width: var(--ic-space-md);
+  height: var(--ic-space-md);
+  fill: currentcolor;
 }
 
-:host(.footer-link) a:link:hover,
-:host(.footer-link) a ::slotted(a:link:hover) {
-  outline: none;
+.ic-link:visited > .ic-link-open-in-new-icon {
+  fill: var(--ic-hyperlink-visited);
 }
 
-:host(.footer-link) a:link:focus,
-:host(.footer-link) a ::slotted(a:link:focus) {
-  outline: none;
+.ic-link.light:visited > .ic-link-open-in-new-icon {
+  fill: var(--ic-hyperlink-contrast-visited);
 }
 
-:host(.footer-link) a:link:focus > ::slotted(svg),
-:host(.footer-link) a:link:focus > ::slotted(img),
-:host(.footer-link) a ::slotted(a:link:focus > ::slotted(svg)),
-:host(.footer-link) a ::slotted(a:link:focus > ::slotted(img)) {
-  box-shadow: var(--ic-border-focus);
-  border-radius: var(--ic-border-radius);
+:host(.breadcrumb-link) .ic-link {
+  display: var(--breadcrumb-link-display);
+  align-items: var(--breadcrumb-link-align-items);
+  gap: var(--breadcrumb-link-gap);
 }
 
-:host(.footer-link) a:focus,
-:host(.footer-link) a ::slotted(a:focus) {
-  outline: none;
-  transition: var(--ic-transition-duration-fast);
+:host(.breadcrumb-link) .ic-link ::slotted(.back-icon) {
+  height: var(--ic-space-lg);
+  width: var(--ic-space-lg);
 }
 
-:host(.footer-link) a:link:active,
-:host(.footer-link) a:link:focus:active,
-:host(.footer-link) a:link:visited:active,
-:host(.footer-link) a ::slotted(a:link:active),
-:host(.footer-link) a ::slotted(a:link:focus:active),
-:host(.footer-link) a ::slotted(a:link:visited:active) {
+:host(.breadcrumb-link.current-page) a,
+:host(.breadcrumb-link.current-page) ::slotted(a) {
+  font-weight: normal;
   color: inherit;
   text-decoration: none;
+  display: flex;
+  align-items: center;
 }
 
-:host(.footer-link) a:hover,
-:host(.footer-link) a ::slotted(a:hover) {
+:host(.breadcrumb-link.current-page) .ic-link,
+:host(.breadcrumb-link.current-page) ::slotted(a:focus) {
+  outline: var(--ic-hc-focus-outline);
   text-decoration: none;
 }
 
-.open-in-new-icon {
-  padding-left: var(--ic-space-xxs);
-}
-
-.open-in-new-icon,
-.open-in-new-icon svg {
-  height: var(--ic-space-md);
-  width: var(--ic-space-md);
-}
-
-:host(.footer-link-light) .open-in-new-icon svg {
-  fill: var(--ic-architectural-white);
+:host(.breadcrumb-link.current-page) .ic-link:visited {
+  color: var(--ic-color-primary-text);
 }
 
-:host(.footer-link-dark) .open-in-new-icon svg {
-  fill: var(--ic-architectural-black);
+:host(.footer-link-light) ::part(link),
+:host(.footer-link-dark) ::part(link) {
+  color: var(--ic-theme-text);
 }
 
-@media screen and (min-width: 769px) {
-  :host(.footer-link.footer-link-ungrouped-sparse:last-of-type) {
-    margin-right: 0;
-  }
+:host(.footer-link-light) ::slotted(svg),
+:host(.footer-link-dark) ::slotted(svg) {
+  fill: var(--ic-theme-text);
 }
 
 @media (forced-colors: active) {

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

@@ -1,6 +1,5 @@
 import { Host, h, } from "@stencil/core";
 import { DEVICE_SIZES, getThemeForegroundColor } from "../../utils/helpers";
-import OpenInNew from "../../assets/OpenInNew.svg";
 export class FooterLink {
     constructor() {
         this.deviceSize = DEVICE_SIZES.XL;
@@ -25,10 +24,10 @@ export class FooterLink {
     }
     inferConfig(e) {
         if (e.parentElement !== null) {
-            if (e.parentElement.classList.contains("footer")) {
+            if (e.parentElement.classList.contains("ic-footer")) {
                 return {
-                    small: e.parentElement.classList.contains("footer-small"),
-                    grouped: e.parentElement.classList.contains("footer-grouped"),
+                    small: e.parentElement.classList.contains("ic-footer-small"),
+                    grouped: e.parentElement.classList.contains("ic-footer-grouped"),
                 };
             }
             else {
@@ -46,7 +45,7 @@ export class FooterLink {
                 "footer-link": true,
                 [`footer-link-${grouped ? "grouped" : "ungrouped"}-${small ? "small" : "sparse"}`]: true,
                 [`footer-link-${this.foregroundColor}`]: true,
-            }, role: "listitem" }, 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 })))));
+            }, role: "listitem" }, h("ic-link", { href: href, hreflang: hreflang, referrerpolicy: referrerpolicy, rel: rel, download: download !== false ? download : null, target: target }, h("slot", null))));
     }
     static get is() { return "ic-footer-link"; }
     static get encapsulation() { return "shadow"; }

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":"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","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        role=\"listitem\"\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"]}
+{"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;AAY5E,MAAM,OAAO,UAAU;;0BAGS,YAAY,CAAC,EAAE;4BACP,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE;+BACxB,uBAAuB,EAAE;wBAKjC,KAAK;oBAKnB,IAAI;;;;;;IAsB5B,iBAAiB;QACf,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAChD,CAAC;IAGD,mBAAmB;QACjB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAChD,CAAC;IAGD,wBAAwB,CAAC,EAAe;QACtC,MAAM,KAAK,GAAY,EAAE,CAAC,MAAM,CAAC;QACjC,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC,IAAI,CAAC;IACpC,CAAC;IAEO,WAAW,CAAC,CAAc;QAChC,IAAI,CAAC,CAAC,aAAa,KAAK,IAAI,EAAE,CAAC;YAC7B,IAAI,CAAC,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAE,CAAC;gBACpD,OAAO;oBACL,KAAK,EAAE,CAAC,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,iBAAiB,CAAC;oBAC5D,OAAO,EAAE,CAAC,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,mBAAmB,CAAC;iBACjE,CAAC;YACJ,CAAC;iBAAM,CAAC;gBACN,OAAO,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC;YAC3C,CAAC;QACH,CAAC;aAAM,CAAC;YACN,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;QAC1C,CAAC;IACH,CAAC;IAED,MAAM;QACJ,MAAM,EACJ,YAAY,EACZ,IAAI,EACJ,QAAQ,EACR,cAAc,EACd,GAAG,EACH,MAAM,EACN,QAAQ,GACT,GAAG,IAAI,CAAC;QACT,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,YAAY,CAAC;QAExC,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;gBACL,aAAa,EAAE,IAAI;gBACnB,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;gBACT,CAAC,eAAe,IAAI,CAAC,eAAe,EAAE,CAAC,EAAE,IAAI;aAC9C,EACD,IAAI,EAAC,UAAU;YAEf,eACE,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;gBAEd,eAAQ,CACA,CACL,CACR,CAAC;IACJ,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: {\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(\"ic-footer\")) {\n        return {\n          small: e.parentElement.classList.contains(\"ic-footer-small\"),\n          grouped: e.parentElement.classList.contains(\"ic-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        role=\"listitem\"\n      >\n        <ic-link\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        </ic-link>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -444,14 +444,14 @@ video {
 :host(.footer-link-group-sparse) {
   --footer-link-group-margin-right: 5.938rem;
   --footer-link-group-border-bottom: 0 solid transparent;
-  --footer-link-group-title-margin-top: 0;
-  --footer-link-group-title-margin-bottom: var(--ic-space-md);
+  --footer-link-label-margin-top: 0;
+  --footer-link-label-margin-bottom: var(--ic-space-md);
 }
 
 :host(.footer-link-group-small) {
   --footer-link-group-margin-right: 0;
-  --footer-link-group-title-margin-top: var(--ic-space-md);
-  --footer-link-group-title-margin-bottom: var(--ic-space-md);
+  --footer-link-label-margin-top: var(--ic-space-md);
+  --footer-link-label-margin-bottom: var(--ic-space-md);
   --footer-link-group-links-padding-left: var(--ic-space-md);
   --footer-link-group-links-padding-bottom: var(--ic-space-md);
 }
@@ -501,9 +501,9 @@ video {
   background-color: var(--ic-action-dark-bg-active);
 }
 
-.footer-link-group-title {
-  margin-top: var(--footer-link-group-title-margin-top);
-  margin-bottom: var(--footer-link-group-title-margin-bottom);
+.footer-link-label {
+  margin-top: var(--footer-link-label-margin-top);
+  margin-bottom: var(--footer-link-label-margin-bottom);
   flex-grow: 1;
 }
 
@@ -520,3 +520,7 @@ video {
   display: flex;
   align-items: center;
 }
+
+ic-typography {
+  --ic-typography-color: var(--ic-theme-text);
+}