@ukic/web-components 2.25.1 → 3.0.0

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

@@ -471,136 +471,62 @@ 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);
+:host(.breadcrumb-link.current-page) .ic-link:visited {
+  color: var(--ic-color-primary-text);
 }
 
-.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(.footer-link-dark) .open-in-new-icon svg {
-  fill: var(--ic-architectural-black);
-}
-
-@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;
 }
 

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

@@ -14,13 +14,13 @@ export class FooterLinkGroup {
         this.deviceSize = DEVICE_SIZES.XL;
         this.dropdownIconStyle = getThemeForegroundColor();
         this.small = false;
-        this.groupTitle = undefined;
+        this.label = undefined;
     }
     componentWillLoad() {
         this.small = this.isSmall(this.el);
     }
     componentDidLoad() {
-        onComponentRequiredPropUndefined([{ prop: this.groupTitle, propName: "group-title" }], "Footer Link Group");
+        onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Footer Link Group");
     }
     footerResizeHandler() {
         this.small = this.isSmall(this.el);
@@ -31,8 +31,8 @@ export class FooterLinkGroup {
     }
     isSmall(e) {
         if (e.parentElement !== null) {
-            if (e.parentElement.classList.contains("footer")) {
-                return e.parentElement.classList.contains("footer-small");
+            if (e.parentElement.classList.contains("ic-footer")) {
+                return e.parentElement.classList.contains("ic-footer-small");
             }
             else {
                 return this.isSmall(e.parentElement);
@@ -43,14 +43,14 @@ export class FooterLinkGroup {
         }
     }
     render() {
-        const { small, groupTitle } = this;
+        const { small, label } = this;
         return !small ? (h(Host, { class: {
                 ["footer-link-group footer-link-group-sparse"]: true,
                 [`footer-link-group-${this.dropdownIconStyle}`]: true,
-            }, role: "listitem" }, h("div", { class: "footer-link-group-title" }, h("ic-typography", { variant: "subtitle-small" }, groupTitle)), h("div", { class: "footer-link-group-links", role: "list" }, h("slot", null)))) : (h(Host, { class: {
+            }, role: "listitem" }, h("div", { class: "footer-link-label" }, h("ic-typography", { variant: "subtitle-small" }, label)), h("div", { class: "footer-link-group-links", role: "list" }, h("slot", null)))) : (h(Host, { class: {
                 ["footer-link-group footer-link-group-small"]: true,
                 [`footer-link-group-${this.dropdownIconStyle}`]: true,
-            }, tabIndex: "1", onClick: this.toggleExpanded, onKeydown: this.handleKeydown, "aria-expanded": this.expanded }, h("ic-section-container", { fullHeight: true }, h("div", { class: "footer-link-group-header" }, h("div", { class: "footer-link-group-title" }, h("ic-typography", { variant: "label" }, groupTitle)), this.expanded ? (h("svg", { class: "footer-link-group-toggle", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", role: "img", width: "1em", height: "1em", preserveAspectRatio: "xMidYMid meet", viewBox: "0 0 1200 1200" }, h("path", { fill: "currentColor", 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" }))) : (h("svg", { class: "footer-link-group-toggle", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", role: "img", width: "1em", height: "1em", preserveAspectRatio: "xMidYMid meet", viewBox: "0 0 1200 1200" }, h("g", { transform: "translate(0 1200) scale(1 -1)" }, h("path", { fill: "currentColor", 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" }))))), this.expanded && (h("div", { class: "footer-link-group-links", role: "list" }, h("slot", null))))));
+            }, tabIndex: "1", onClick: this.toggleExpanded, onKeydown: this.handleKeydown, "aria-expanded": this.expanded }, h("ic-section-container", { fullHeight: true }, h("div", { class: "footer-link-group-header" }, h("div", { class: "footer-link-label" }, h("ic-typography", { variant: "label" }, label)), this.expanded ? (h("svg", { class: "footer-link-group-toggle", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", role: "img", width: "1em", height: "1em", preserveAspectRatio: "xMidYMid meet", viewBox: "0 0 1200 1200" }, h("path", { fill: "currentColor", 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" }))) : (h("svg", { class: "footer-link-group-toggle", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", role: "img", width: "1em", height: "1em", preserveAspectRatio: "xMidYMid meet", viewBox: "0 0 1200 1200" }, h("g", { transform: "translate(0 1200) scale(1 -1)" }, h("path", { fill: "currentColor", 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" }))))), this.expanded && (h("div", { class: "footer-link-group-links", role: "list" }, h("slot", null))))));
     }
     static get is() { return "ic-footer-link-group"; }
     static get encapsulation() { return "shadow"; }
@@ -67,7 +67,7 @@ export class FooterLinkGroup {
     }
     static get properties() {
         return {
-            "groupTitle": {
+            "label": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -81,7 +81,7 @@ export class FooterLinkGroup {
                     "tags": [],
                     "text": "The title of the link group to be displayed."
                 },
-                "attribute": "group-title",
+                "attribute": "label",
                 "reflect": false
             }
         };

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: {\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        role=\"listitem\"\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\" role=\"list\">\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-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\" role=\"list\">\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() label!: string;\n\n  componentWillLoad(): void {\n    this.small = this.isSmall(this.el);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\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(\"ic-footer\")) {\n        return e.parentElement.classList.contains(\"ic-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, label } = 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        role=\"listitem\"\n      >\n        <div class=\"footer-link-label\">\n          <ic-typography variant=\"subtitle-small\">{label}</ic-typography>\n        </div>\n        <div class=\"footer-link-group-links\" role=\"list\">\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-expanded={this.expanded}\n      >\n        <ic-section-container fullHeight={true}>\n          <div class=\"footer-link-group-header\">\n            <div class=\"footer-link-label\">\n              <ic-typography variant=\"label\">{label}</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\" role=\"list\">\n              <slot />\n            </div>\n          )}\n        </ic-section-container>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -6,28 +6,28 @@ 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>`,
+            html: `<ic-footer-link-group label="Link group"></ic-footer-link-group>`,
         });
         expect(page.root).toMatchSnapshot("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>`,
+            html: `<ic-footer-link-group label="Link group"><ic-footer-link href="/">Link</ic-footer-link></ic-footer-link-group>`,
         });
         expect(page.root).toMatchSnapshot("footer-link-group-with-links");
     });
     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>`,
+            html: `<ic-footer><ic-footer-link-group label="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>`,
+            html: `<ic-footer-link-group label="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" });
@@ -39,7 +39,7 @@ describe("ic-footer-link-group", () => {
     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>`,
+            html: `<ic-footer-link-group label="Link group"><ic-footer-link href="/">Link</ic-footer-link></ic-footer-link-group>`,
         });
         await page.rootInstance.footerResizeHandler();
         expect(page.rootInstance.small).toBe(false);
@@ -47,7 +47,7 @@ describe("ic-footer-link-group", () => {
     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>`,
+            html: `<ic-footer-link-group label="Link group"><ic-footer-link href="/">Link</ic-footer-link></ic-footer-link-group>`,
         });
         await page.rootInstance.footerThemeChangeHandler({
             detail: { mode: "dark" },
@@ -57,7 +57,7 @@ describe("ic-footer-link-group", () => {
     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>`,
+            html: `<ic-footer breakpoint="extra large"><ic-footer-link-group small=true label="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");

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

@@ -1 +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":"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","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).toMatchSnapshot(\"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).toMatchSnapshot(\"footer-link-group-with-links\");\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"]}
+{"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":"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","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 label=\"Link group\"></ic-footer-link-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"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 label=\"Link group\"><ic-footer-link href=\"/\">Link</ic-footer-link></ic-footer-link-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"footer-link-group-with-links\");\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 label=\"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 label=\"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 label=\"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 label=\"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 label=\"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

@@ -449,7 +449,7 @@ video {
   --hero-heading-bottom-margin: var(--ic-space-md);
 }
 
-:host(.dark) {
+:host(.ic-hero-dark) {
   background-color: var(--ic-theme-secondary);
 }
 
@@ -534,8 +534,8 @@ ic-typography.heading-bottom-spacing {
     min-height: 13rem;
   }
 
-  :host(.small),
-  :host(.small) .section-container {
+  :host(.ic-hero-small),
+  :host(.ic-hero-small) .section-container {
     min-height: 10.813rem;
   }
 
@@ -572,8 +572,8 @@ ic-typography.heading-bottom-spacing {
     min-height: 16rem;
   }
 
-  :host(.small),
-  :host(.small) .section-container {
+  :host(.ic-hero-small),
+  :host(.ic-hero-small) .section-container {
     min-height: 15rem;
   }
 
@@ -610,8 +610,8 @@ ic-typography.heading-bottom-spacing {
     min-height: 16rem;
   }
 
-  :host(.small),
-  :host(.small) .section-container {
+  :host(.ic-hero-small),
+  :host(.ic-hero-small) .section-container {
     min-height: 15rem;
   }
 
@@ -648,8 +648,8 @@ ic-typography.heading-bottom-spacing {
     min-height: 13rem;
   }
 
-  :host(.small),
-  :host(.small) .section-container {
+  :host(.ic-hero-small),
+  :host(.ic-hero-small) .section-container {
     min-height: 10.813rem;
   }
 
@@ -659,7 +659,7 @@ ic-typography.heading-bottom-spacing {
   }
 
   :host(.secondary-heading) .section-container,
-  :host(.small) .section-container,
+  :host(.ic-hero-small) .section-container,
   .section-container {
     flex-direction: column;
     align-items: flex-start;
@@ -696,8 +696,8 @@ ic-typography.heading-bottom-spacing {
     margin-bottom: var(--ic-space-md);
   }
 
-  :host(.small),
-  :host(.small) .section-container {
+  :host(.ic-hero-small),
+  :host(.ic-hero-small) .section-container {
     min-height: 10.813rem;
   }
 
@@ -707,7 +707,7 @@ ic-typography.heading-bottom-spacing {
   }
 
   :host(.secondary-heading) .section-container,
-  :host(.small) .section-container,
+  :host(.ic-hero-small) .section-container,
   .section-container {
     flex-direction: column;
     align-items: flex-start;

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

@@ -29,7 +29,6 @@ export class Hero {
         this.secondaryHeading = undefined;
         this.secondarySubheading = undefined;
         this.size = "default";
-        this.small = false;
         this.subheading = undefined;
     }
     disconnectedCallback() {
@@ -64,7 +63,7 @@ export class Hero {
         this.scrollFactor = "right " + y + "px";
     }
     render() {
-        const { aligned, small, size, heading, subheading, secondaryHeading, secondarySubheading, foregroundColor, backgroundImage, scrollFactor, } = this;
+        const { aligned, size, heading, subheading, secondaryHeading, secondarySubheading, foregroundColor, backgroundImage, scrollFactor, } = this;
         let style = {};
         if (isPropDefined(backgroundImage)) {
             style = {
@@ -73,16 +72,16 @@ export class Hero {
             };
         }
         return (h(Host, { class: {
-                [IcThemeForegroundEnum.Dark]: foregroundColor === IcThemeForegroundEnum.Dark,
+                [`ic-hero-${IcThemeForegroundEnum.Dark}`]: foregroundColor === IcThemeForegroundEnum.Dark,
                 ["has-background-image"]: backgroundImage !== undefined,
-                ["small"]: small || size === "small",
+                ["ic-hero-small"]: size === "small",
                 ["secondary-heading"]: !!secondaryHeading,
             }, style: style }, h("ic-section-container", { aligned: aligned, fullHeight: true, class: "section-container" }, h("div", { class: {
                 ["left-container"]: true,
                 ["left-container-full-width"]: this.leftContentFullWidth,
-            } }, h("div", { class: "heading" }, h("slot", { name: "heading" }, h("ic-typography", { variant: small || size === "small" ? "h2" : "h1", class: {
-                ["heading-bottom-spacing"]: !small && size !== "small",
-            } }, heading))), h("div", { class: "subheading" }, h("slot", { name: "subheading" }, h("ic-typography", { variant: "body" }, subheading))), h("div", { class: "interaction-container" }, h("slot", { name: "interaction" }))), (isPropDefined(secondaryHeading) || this.rightContent) && (h("div", { class: "right-container" }, h("slot", { name: "secondary" }, secondaryHeading && (h("div", { class: "secondary-container" }, h("div", { class: "secondary-heading" }, h("ic-typography", { variant: "h4" }, secondaryHeading)), h("div", { class: "secondary-subheading" }, h("ic-typography", { variant: "subtitle-small" }, secondarySubheading))))))))));
+            } }, h("div", { class: "heading" }, h("slot", { name: "heading" }, h("ic-typography", { variant: size === "small" ? "h2" : "h1", class: {
+                ["heading-bottom-spacing"]: size !== "small",
+            } }, h("h2", null, heading)))), h("div", { class: "subheading" }, h("slot", { name: "subheading" }, h("ic-typography", { variant: "body" }, subheading))), h("div", { class: "interaction-container" }, h("slot", { name: "interaction" }))), (isPropDefined(secondaryHeading) || this.rightContent) && (h("div", { class: "right-container" }, h("slot", { name: "secondary" }, secondaryHeading && (h("div", { class: "secondary-container" }, h("div", { class: "secondary-heading" }, h("ic-typography", { variant: "h4" }, h("h3", null, secondaryHeading))), h("div", { class: "secondary-subheading" }, h("ic-typography", { variant: "subtitle-small" }, secondarySubheading))))))))));
     }
     static get is() { return "ic-hero"; }
     static get encapsulation() { return "shadow"; }
@@ -193,7 +192,7 @@ export class Hero {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The heading of the hero."
+                    "text": "The heading of the hero. An <h2> level heading."
                 },
                 "attribute": "heading",
                 "reflect": false
@@ -210,7 +209,7 @@ export class Hero {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The optional secondary heading, replaced by slotted right content."
+                    "text": "The optional secondary heading, an <h3> level heading. Replaced by slotted right content."
                 },
                 "attribute": "secondary-heading",
                 "reflect": false
@@ -256,27 +255,6 @@ export class Hero {
                 "reflect": false,
                 "defaultValue": "\"default\""
             },
-            "small": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "This prop should not be used anymore. Set prop `size` to \"small\" instead."
-                        }],
-                    "text": ""
-                },
-                "attribute": "small",
-                "reflect": false,
-                "defaultValue": "false"
-            },
             "subheading": {
                 "type": "string",
                 "mutable": false,