@ukic/web-components 2.35.2 → 3.0.0-alpha.10

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

@@ -444,24 +444,21 @@ 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);
 }
 
-:host(.footer-link-group-light.footer-link-group-small) {
-  --footer-link-group-border-bottom: var(--ic-keyline-lighten);
-}
-
-:host(.footer-link-group-dark.footer-link-group-small) {
-  --footer-link-group-border-bottom: var(--ic-keyline-darken);
+:host(.footer-link-group-small) {
+  --footer-link-group-border-bottom: var(--ic-space-1px) solid
+    var(--ic-footer-keyline);
 }
 
 :host(.footer-link-group) {
@@ -469,13 +466,8 @@ video {
   border-bottom: var(--footer-link-group-border-bottom);
 }
 
-:host(.footer-link-group-small.footer-link-group-light:hover) {
-  background-color: var(--ic-action-light-bg-hover);
-  cursor: pointer;
-}
-
-:host(.footer-link-group-small.footer-link-group-dark:hover) {
-  background-color: var(--ic-action-dark-bg-hover);
+:host(.footer-link-group-small:hover) {
+  background-color: var(--ic-footer-hover);
   cursor: pointer;
 }
 
@@ -493,26 +485,22 @@ video {
   z-index: 1;
 }
 
-:host(.footer-link-group-small.footer-link-group-light:active) {
-  background-color: var(--ic-action-light-bg-active);
-}
-
-:host(.footer-link-group-small.footer-link-group-dark:active) {
-  background-color: var(--ic-action-dark-bg-active);
+:host(.footer-link-group-small:active) {
+  background-color: var(--ic-footer-pressed);
 }
 
 :host ic-section-container {
   outline: none;
 }
 
-.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;
 }
 
 .footer-link-group-toggle {
-  fill: white !important;
+  fill: var(--ic-footer-chevron-icon) !important;
 }
 
 .footer-link-group-links {
@@ -524,3 +512,7 @@ video {
   display: flex;
   align-items: center;
 }
+
+ic-typography {
+  --ic-typography-color: var(--ic-footer-link);
+}

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

@@ -1,5 +1,5 @@
 import { Host, h, } from "@stencil/core";
-import { DEVICE_SIZES, getThemeForegroundColor, onComponentRequiredPropUndefined, } from "../../utils/helpers";
+import { DEVICE_SIZES, getBrandForegroundAppearance, onComponentRequiredPropUndefined, } from "../../utils/helpers";
 export class FooterLinkGroup {
     constructor() {
         this.handleKeydown = (event) => {
@@ -12,27 +12,26 @@ export class FooterLinkGroup {
         };
         this.expanded = false;
         this.deviceSize = DEVICE_SIZES.XL;
-        this.dropdownIconStyle = getThemeForegroundColor();
+        this.dropdownIconStyle = getBrandForegroundAppearance();
         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);
     }
-    footerThemeChangeHandler(ev) {
-        const theme = ev.detail;
-        this.dropdownIconStyle = theme.mode;
+    footerBrandChangeHandler(ev) {
+        this.dropdownIconStyle = ev.detail.mode;
     }
     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 +42,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,
-            }, onClick: this.toggleExpanded, onKeydown: this.handleKeydown, "aria-expanded": this.expanded, role: "listitem" }, h("ic-section-container", { tabindex: "0", 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))))));
+            }, onClick: this.toggleExpanded, onKeydown: this.handleKeydown, "aria-expanded": this.expanded, role: "listitem" }, h("ic-section-container", { tabindex: "0", 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 +66,7 @@ export class FooterLinkGroup {
     }
     static get properties() {
         return {
-            "groupTitle": {
+            "label": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -81,7 +80,7 @@ export class FooterLinkGroup {
                     "tags": [],
                     "text": "The title of the link group to be displayed."
                 },
-                "attribute": "group-title",
+                "attribute": "label",
                 "reflect": false
             }
         };
@@ -103,8 +102,8 @@ export class FooterLinkGroup {
                 "capture": false,
                 "passive": false
             }, {
-                "name": "themeChange",
-                "method": "footerThemeChangeHandler",
+                "name": "brandChange",
+                "method": "footerBrandChangeHandler",
                 "target": "document",
                 "capture": false,
                 "passive": 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        onClick={this.toggleExpanded}\n        onKeydown={this.handleKeydown}\n        aria-expanded={this.expanded}\n        role=\"listitem\"\n      >\n        <ic-section-container tabindex=\"0\" 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  getBrandForegroundAppearance,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport {\n  IcBrand,\n  IcBrandForeground,\n  IcBrandForegroundNoDefault,\n} 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: IcBrandForegroundNoDefault | IcBrandForeground =\n    getBrandForegroundAppearance();\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(\"brandChange\", { target: \"document\" })\n  footerBrandChangeHandler(ev: CustomEvent<IcBrand>): void {\n    this.dropdownIconStyle = ev.detail.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        onClick={this.toggleExpanded}\n        onKeydown={this.handleKeydown}\n        aria-expanded={this.expanded}\n        role=\"listitem\"\n      >\n        <ic-section-container tabindex=\"0\" 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,9 +47,9 @@ 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({
+        await page.rootInstance.footerBrandChangeHandler({
             detail: { mode: "dark" },
         });
         expect(page.rootInstance.dropdownIconStyle).toBe("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.footerBrandChangeHandler({\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

@@ -443,14 +443,36 @@ video {
 
 :host {
   display: block;
-  background-color: var(--ic-theme-tertiary);
-  color: var(--ic-theme-text);
+  background-color: var(--ic-brand-color-tertiary);
 
   --hero-heading-bottom-margin: var(--ic-space-md);
+  --hero-keyline: var(--ic-hero-keyline);
 }
 
-:host(.dark) {
-  background-color: var(--ic-theme-secondary);
+:host(.ic-hero-dark) {
+  background-color: var(--ic-brand-color-secondary);
+
+  --ic-hero-heading: var(--ic-color-text-primary-light);
+  --ic-hero-body: var(--ic-color-text-primary-light);
+  --ic-hero-secondary-heading: var(--ic-color-text-primary-light);
+  --hero-keyline: var(--ic-brand-text-color);
+}
+
+.heading {
+  --ic-typography-color: var(--ic-hero-heading);
+}
+
+.subheading {
+  --ic-typography-color: var(--ic-hero-body);
+}
+
+.secondary-container {
+  --ic-typography-color: var(--ic-hero-secondary-heading);
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  border-left: var(--ic-space-xxxs) solid var(--hero-keyline);
 }
 
 :host(.has-background-image) {
@@ -499,13 +521,6 @@ ic-typography.heading-bottom-spacing {
   flex-wrap: wrap;
 }
 
-.secondary-container {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  border-left: var(--ic-space-xxxs) solid var(--ic-theme-text);
-}
-
 .secondary-subheading {
   margin-top: var(--ic-space-xxs);
 }
@@ -534,8 +549,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 +587,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 +625,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 +663,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 +674,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 +711,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 +722,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

@@ -1,6 +1,6 @@
 import { Host, h, } from "@stencil/core";
-import { IcThemeForegroundEnum, } from "../../utils/types";
-import { slotHasContent, getThemeForegroundColor, onComponentRequiredPropUndefined, isPropDefined, isSlotUsed, renderDynamicChildSlots, } from "../../utils/helpers";
+import { IcBrandForegroundEnum, } from "../../utils/types";
+import { slotHasContent, getBrandForegroundAppearance, onComponentRequiredPropUndefined, isPropDefined, isSlotUsed, renderDynamicChildSlots, } from "../../utils/helpers";
 /**
  * @slot heading - Content will be rendered in the title area, in place of the heading.
  * @slot subheading - Content will be rendered in the title area, in place of the subheading.
@@ -10,7 +10,7 @@ import { slotHasContent, getThemeForegroundColor, onComponentRequiredPropUndefin
 export class Hero {
     constructor() {
         this.hostMutationObserver = null;
-        this.foregroundColor = getThemeForegroundColor();
+        this.foregroundColor = getBrandForegroundAppearance();
         this.rightContent = false;
         this.leftContentFullWidth = !this.rightContent && this.secondaryHeading === undefined;
         this.scrollFactor = "right -100px";
@@ -21,8 +21,7 @@ export class Hero {
         this.heading = undefined;
         this.secondaryHeading = undefined;
         this.secondarySubheading = undefined;
-        this.size = "default";
-        this.small = false;
+        this.size = "medium";
         this.subheading = undefined;
     }
     disconnectedCallback() {
@@ -43,9 +42,8 @@ export class Hero {
     componentWillRender() {
         this.rightContent = slotHasContent(this.el, "secondary");
     }
-    themeChangeHandler(ev) {
-        const theme = ev.detail;
-        this.foregroundColor = theme.mode;
+    brandChangeHandler(ev) {
+        this.foregroundColor = ev.detail.mode;
     }
     doScroll() {
         if (this.disableBackgroundParallax) {
@@ -57,7 +55,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 = {
@@ -66,16 +64,16 @@ export class Hero {
             };
         }
         return (h(Host, { class: {
-                [IcThemeForegroundEnum.Dark]: foregroundColor === IcThemeForegroundEnum.Dark,
+                [`ic-hero-${IcBrandForegroundEnum.Dark}`]: foregroundColor === IcBrandForegroundEnum.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"; }
@@ -186,7 +184,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
@@ -203,7 +201,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
@@ -230,7 +228,7 @@ export class Hero {
                 "mutable": false,
                 "complexType": {
                     "original": "IcSizesNoLarge",
-                    "resolved": "\"default\" | \"small\"",
+                    "resolved": "\"medium\" | \"small\"",
                     "references": {
                         "IcSizesNoLarge": {
                             "location": "import",
@@ -247,28 +245,7 @@ export class Hero {
                 },
                 "attribute": "size",
                 "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"
+                "defaultValue": "\"medium\""
             },
             "subheading": {
                 "type": "string",
@@ -300,8 +277,8 @@ export class Hero {
     static get elementRef() { return "el"; }
     static get listeners() {
         return [{
-                "name": "themeChange",
-                "method": "themeChangeHandler",
+                "name": "brandChange",
+                "method": "brandChangeHandler",
                 "target": "document",
                 "capture": false,
                 "passive": false