@ukic/web-components 3.0.0-alpha.5 → 3.0.0-alpha.6

package/dist/components/ic-divider2.js.map

@@ -1 +1 @@
-{"file":"ic-divider2.js","mappings":"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","names":[],"sources":["src/components/ic-divider/ic-divider.css?tag=ic-divider&encapsulation=scoped","src/components/ic-divider/ic-divider.tsx"],"sourcesContent":["/**\n  * @prop --ic-divider-vertical-height: The height of a vertical divider. The default value is `inherit`. \n  */\n/**\n  * @prop --ic-divider-horizontal-width: The width of a horizontal divider. The default value is `inherit`.\n  */\n/**\n  * @prop --ic-divider-label-width: The max-width of the divider label. When orientation is set to `horizontal`, the default value is `max(20rem, 60%)`. When orientation is set to `vertical`, the default value is `20 rem`.\n  */\n\n/* IC-DIVIDER COLORS */\n/**\n  * @internal @prop --ic-divider-background\n  */\n/**\n  * @internal @prop --ic-divider-background-monochrome\n  */\n/**\n  * @internal @prop --ic-divider-label\n  */\n/**\n  * @internal @prop --ic-divider-label-monochrome\n  */\n\n/* Horizontal Divider */\n:host(.ic-divider-horizontal) {\n  display: flex;\n  width: var(--ic-divider-horizontal-width, 100%);\n  align-items: center;\n  column-gap: var(--ic-space-xxs);\n}\n\nhr {\n  padding: 0;\n  margin: 0;\n  border: none;\n  border-bottom: solid var(--ic-space-1px) var(--ic-divider-background);\n  width: inherit;\n}\n\n:host(.ic-divider-horizontal)::before,\n:host(.ic-divider-horizontal)::after {\n  border-left: none !important;\n}\n\n:host(.ic-divider-horizontal[label-placement=\"right\"])::before,\n:host(.ic-divider-horizontal[label-placement=\"center\"])::before,\n:host(.ic-divider-horizontal[label-placement=\"left\"])::after,\n:host(.ic-divider-horizontal[label-placement=\"center\"])::after {\n  content: \"\";\n  border: none;\n  width: 100%;\n}\n\n/* Vertical Divider */\n:host(.ic-divider-vertical) {\n  display: flex;\n  flex-direction: column;\n  height: var(--ic-divider-vertical-height, inherit);\n  width: max-content;\n  align-items: center;\n  column-gap: var(--ic-space-xxs);\n  border: none;\n}\n\n:host(.ic-divider-vertical) div.vertical-divider {\n  display: flex;\n  height: inherit;\n}\n\n:host(.ic-divider-vertical[label-placement=\"bottom\"])::before,\n:host(.ic-divider-vertical[label-placement=\"center\"])::before,\n:host(.ic-divider-vertical[label-placement=\"top\"])::after,\n:host(.ic-divider-vertical[label-placement=\"center\"])::after {\n  content: \"\";\n  height: 100%;\n}\n\n/* Theme */\nhr,\n:host(.ic-divider-horizontal)[label-placement=\"right\"]::before,\n:host(.ic-divider-horizontal[label-placement=\"center\"])::before,\n:host(.ic-divider-horizontal[label-placement=\"left\"])::after,\n:host(.ic-divider-horizontal[label-placement=\"center\"])::after {\n  border-bottom: solid var(--ic-space-1px) var(--ic-divider-background);\n}\n\n:host(.ic-divider-monochrome) hr,\n:host(\n    .ic-divider-monochrome.ic-divider-horizontal\n  )[label-placement=\"right\"]::before,\n:host(\n    .ic-divider-monochrome.ic-divider-horizontal[label-placement=\"center\"]\n  )::before,\n:host(\n    .ic-divider-monochrome.ic-divider-horizontal[label-placement=\"left\"]\n  )::after,\n:host(\n    .ic-divider-monochrome.ic-divider-horizontal[label-placement=\"center\"]\n  )::after {\n  border-bottom-color: var(--ic-divider-background-monochrome);\n}\n\n:host() div.vertical-divider,\n:host(.ic-divider-vertical[label-placement=\"bottom\"])::before,\n:host(.ic-divider-vertical[label-placement=\"center\"])::before,\n:host(.ic-divider-vertical[label-placement=\"top\"])::after,\n:host(.ic-divider-vertical[label-placement=\"center\"])::after {\n  border-left: solid var(--ic-space-1px) var(--ic-divider-background);\n}\n\n:host(.ic-divider-monochrome) div.vertical-divider,\n:host(\n    .ic-divider-monochrome.ic-divider-vertical[label-placement=\"bottom\"]\n  )::before,\n:host(\n    .ic-divider-monochrome.ic-divider-vertical[label-placement=\"center\"]\n  )::before,\n:host(.ic-divider-monochrome.ic-divider-vertical[label-placement=\"top\"])::after,\n:host(\n    .ic-divider-monochrome.ic-divider-vertical[label-placement=\"center\"]\n  )::after {\n  border-left-color: var(--ic-divider-background-monochrome);\n}\n\n/* Divider in ic-side-navigation */\n:host(.ic-side-navigation-keyline.ic-theme-dark) {\n  --ic-side-navigation-keyline: var(--ic-state-layer-lighten-20);\n}\n\n:host(.ic-side-navigation-keyline.ic-theme-light) {\n  --ic-side-navigation-keyline: var(--ic-state-layer-darken-20);\n}\n\n:host(.ic-side-navigation-keyline.ic-theme-dark) hr,\n:host(\n    .ic-side-navigation-keyline.ic-theme-dark.ic-divider-horizontal\n  )[label-placement=\"right\"]::before,\n:host(\n    .ic-side-navigation-keyline.ic-theme-dark.ic-divider-horizontal[label-placement=\"center\"]\n  )::before,\n:host(\n    .ic-side-navigation-keyline.ic-theme-dark.ic-divider-horizontal[label-placement=\"left\"]\n  )::after,\n:host(\n    .ic-side-navigation-keyline.ic-theme-dark.ic-divider-horizontal[label-placement=\"center\"]\n  )::after {\n  border-bottom-color: var(--ic-side-navigation-keyline);\n}\n\n:host(.ic-side-navigation-keyline.ic-theme-dark) div.vertical-divider,\n:host(\n    .ic-side-navigation-keyline.ic-theme-dark.ic-divider-vertical[label-placement=\"bottom\"]\n  )::before,\n:host(\n    .ic-side-navigation-keyline.ic-theme-dark.ic-divider-vertical[label-placement=\"center\"]\n  )::before,\n:host(\n    .ic-side-navigation-keyline.ic-theme-dark.ic-divider-vertical[label-placement=\"top\"]\n  )::after,\n:host(\n    .ic-side-navigation-keyline.ic-theme-dark.ic-divider-vertical[label-placement=\"center\"]\n  )::after {\n  border-left-color: var(--ic-side-navigation-keyline);\n}\n\n:host(.ic-side-navigation-keyline.ic-theme-light) hr,\n:host(\n    .ic-side-navigation-keyline.ic-theme-light.ic-divider-horizontal\n  )[label-placement=\"right\"]::before,\n:host(\n    .ic-side-navigation-keyline.ic-theme-light.ic-divider-horizontal[label-placement=\"center\"]\n  )::before,\n:host(\n    .ic-side-navigation-keyline.ic-theme-light.ic-divider-horizontal[label-placement=\"left\"]\n  )::after,\n:host(\n    .ic-side-navigation-keyline.ic-theme-light.ic-divider-horizontal[label-placement=\"center\"]\n  )::after {\n  border-bottom-color: var(--ic-side-navigation-keyline);\n}\n\n:host(.ic-side-navigation-keyline.ic-theme-light) div.vertical-divider,\n:host(\n    .ic-side-navigation-keyline.ic-theme-light.ic-divider-vertical[label-placement=\"bottom\"]\n  )::before,\n:host(\n    .ic-side-navigation-keyline.ic-theme-light.ic-divider-vertical[label-placement=\"center\"]\n  )::before,\n:host(\n    .ic-side-navigation-keyline.ic-theme-light.ic-divider-vertical[label-placement=\"top\"]\n  )::after,\n:host(\n    .ic-side-navigation-keyline.ic-theme-light.ic-divider-vertical[label-placement=\"center\"]\n  )::after {\n  border-left-color: var(--ic-divider-background-monochrome);\n}\n\n/* Weight */\n:host(.ic-divider-very-thick) hr,\n:host(.ic-divider-very-thick[label-placement=\"right\"])::before,\n:host(.ic-divider-very-thick[label-placement=\"center\"])::before,\n:host(.ic-divider-very-thick[label-placement=\"left\"])::after,\n:host(.ic-divider-very-thick[label-placement=\"center\"])::after {\n  border-bottom-width: var(--ic-space-xs);\n}\n\n:host(.ic-divider-very-thick) .vertical-divider,\n:host(.ic-divider-very-thick[label-placement=\"bottom\"])::before,\n:host(.ic-divider-very-thick[label-placement=\"center\"])::before,\n:host(.ic-divider-very-thick[label-placement=\"top\"])::after,\n:host(.ic-divider-very-thick[label-placement=\"center\"])::after {\n  border-left-width: var(--ic-space-xs);\n}\n\n:host(.ic-divider-thick) hr,\n:host(.ic-divider-thick[label-placement=\"right\"])::before,\n:host(.ic-divider-thick[label-placement=\"center\"])::before,\n:host(.ic-divider-thick[label-placement=\"left\"])::after,\n:host(.ic-divider-thick[label-placement=\"center\"])::after {\n  border-bottom-width: var(--ic-space-xxs);\n}\n\n:host(.ic-divider-thick) .vertical-divider,\n:host(.ic-divider-thick[label-placement=\"bottom\"])::before,\n:host(.ic-divider-thick[label-placement=\"center\"])::before,\n:host(.ic-divider-thick[label-placement=\"top\"])::after,\n:host(.ic-divider-thick[label-placement=\"center\"])::after {\n  border-left-width: var(--ic-space-xxs);\n}\n\n:host(.ic-divider-medium) hr,\n:host(.ic-divider-medium[label-placement=\"right\"])::before,\n:host(.ic-divider-medium[label-placement=\"center\"])::before,\n:host(.ic-divider-medium[label-placement=\"left\"])::after,\n:host(.ic-divider-medium[label-placement=\"center\"])::after {\n  border-bottom-width: var(--ic-space-xxxs);\n}\n\n:host(.ic-divider-medium) .vertical-divider,\n:host(.ic-divider-medium[label-placement=\"bottom\"])::before,\n:host(.ic-divider-medium[label-placement=\"center\"])::before,\n:host(.ic-divider-medium[label-placement=\"top\"])::after,\n:host(.ic-divider-medium[label-placement=\"center\"])::after {\n  border-left-width: var(--ic-space-xxxs);\n}\n\n:host(.ic-divider-thin) hr,\n:host(.ic-divider-thin[label-placement=\"right\"])::before,\n:host(.ic-divider-thin[label-placement=\"center\"])::before,\n:host(.ic-divider-thin[label-placement=\"left\"])::after,\n:host(.ic-divider-thin[label-placement=\"center\"])::after {\n  border-bottom-width: var(--ic-space-1px);\n}\n\n:host(.ic-divider-thin) .vertical-divider,\n:host(.ic-divider-thin[label-placement=\"bottom\"])::before,\n:host(.ic-divider-thin.ic-divider-vertical[label-placement=\"center\"])::before,\n:host(.ic-divider-thin[label-placement=\"top\"])::after,\n:host(.ic-divider-thin.ic-divider-vertical[label-placement=\"center\"])::after {\n  border-left-width: var(--ic-space-1px);\n}\n\n/* Border styling */\n:host(.ic-divider-dashed) hr,\n:host(.ic-divider-dashed[label-placement=\"right\"])::before,\n:host(.ic-divider-dashed[label-placement=\"center\"])::before,\n:host(.ic-divider-dashed[label-placement=\"left\"])::after,\n:host(.ic-divider-dashed[label-placement=\"center\"])::after {\n  border-bottom-style: dashed;\n}\n\n:host(.ic-divider-dashed) .vertical-divider,\n:host(.ic-divider-dashed[label-placement=\"bottom\"])::before,\n:host(.ic-divider-dashed[label-placement=\"center\"])::before,\n:host(.ic-divider-dashed[label-placement=\"top\"])::after,\n:host(.ic-divider-dashed[label-placement=\"center\"])::after {\n  border-left-style: dashed;\n}\n\n/* Label styling */\n:host() .ic-divider-label {\n  text-wrap: wrap;\n  text-align: left;\n  width: max-content;\n  max-width: var(--ic-divider-label-width, max(20rem, 60%));\n}\n\n:host(.ic-divider-horizontal[label-placement=\"center\"]) .ic-divider-label {\n  text-align: center;\n}\n\n:host(.ic-divider-vertical) .ic-divider-label {\n  text-align: center;\n}\n\n:host() .ic-divider-label-container {\n  width: max-content;\n  max-width: var(--ic-divider-label-width, max(20rem, 60%));\n}\n\n:host(.ic-divider-vertical) .ic-divider-label {\n  max-width: var(--ic-divider-label-width, 20rem);\n}\n\n:host(.ic-divider-vertical) .ic-divider-label-container {\n  max-width: var(--ic-divider-label-width, 20rem);\n}\n\n:host() .ic-divider-label p {\n  width: max-content;\n  max-width: 100%;\n}\n\n:host() .ic-divider-label,\n:host() ::slotted(*) {\n  color: var(--ic-divider-label);\n}\n\n:host(.ic-divider-monochrome) .ic-divider-label,\n:host(.ic-divider-monochrome) ::slotted(*) {\n  color: var(--ic-divider-label-monochrome);\n}\n\n/* High contrast */\n@media (forced-colors: active) {\n  hr,\n  :host(.ic-divider-horizontal[label-placement=\"right\"])::before,\n  :host(.ic-divider-horizontal[label-placement=\"center\"])::before,\n  :host(.ic-divider-horizontal[label-placement=\"left\"])::after,\n  :host(.ic-divider-horizontal[label-placement=\"center\"])::after {\n    border-bottom-color: transparent;\n  }\n\n  :host() div.vertical-divider,\n  :host(.ic-divider-vertical[label-placement=\"bottom\"])::before,\n  :host(.ic-divider-vertical[label-placement=\"center\"])::before,\n  :host(.ic-divider-vertical[label-placement=\"top\"])::after,\n  :host(.ic-divider-vertical[label-placement=\"center\"])::after {\n    border-left-color: transparent;\n  }\n}\n","import {\n  h,\n  Component,\n  Host,\n  Listen,\n  State,\n  Prop,\n  Element,\n} from \"@stencil/core\";\n\nimport {\n  getThemeForegroundColor,\n  isPropDefined,\n  slotHasContent,\n} from \"../../utils/helpers\";\n\nimport {\n  IcOrientation,\n  IcThemeForeground,\n  IcThemeMode,\n} from \"../../utils/types\";\n\nimport {\n  IcDividerLabelPlacement,\n  IcDividerStyles,\n  IcDividerWeights,\n} from \"./ic-divider.types\";\n\n@Component({\n  tag: \"ic-divider\",\n  styleUrl: \"ic-divider.css\",\n  scoped: true,\n})\nexport class Divider {\n  @Element() el: HTMLIcDividerElement;\n\n  @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n\n  /**\n   * The line style of the divider.\n   */\n  @Prop() borderStyle: IcDividerStyles = \"solid\";\n\n  /**\n   * The label for the divider. The label placement will need to be set for the label to be displayed correctly.\n   */\n  @Prop() label?: string;\n\n  /**\n   * The position the label is placed on the divider. `Left` and `right` placement is only applicable when orientation is set to `horizontal`. `Top` and `bottom` placement is only applicable when orientation is set to `vertical`. `Center` placement is applicable for both orientations.\n   */\n  @Prop() labelPlacement?: IcDividerLabelPlacement = \"center\";\n\n  /** If `true`, the divider will be displayed in a grey colour. */\n  @Prop() monochrome?: boolean = false;\n\n  /**\n   * The orientation of the divider.\n   */\n  @Prop() orientation: IcOrientation = \"horizontal\";\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop({ mutable: true }) theme?: IcThemeMode | IcThemeForeground = \"inherit\";\n\n  /**\n   * The thickness of the divider.\n   */\n  @Prop() weight: IcDividerWeights = \"thin\";\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    this.foregroundColor = ev.detail.mode;\n  }\n\n  private updateMonochromeState(): void {\n    const isBottomSideNav =\n      this.el.parentElement.classList.contains(\"bottom-side-nav\");\n    const isBottomWrapper =\n      this.el.parentElement.parentElement.classList.contains(\"bottom-wrapper\");\n\n    if (\n      this.el.parentElement.tagName === \"IC-SIDE-NAVIGATION\" ||\n      (isBottomSideNav && isBottomWrapper)\n    ) {\n      this.el.classList.add(\"ic-side-navigation-keyline\");\n      if (this.foregroundColor === \"light\") {\n        this.theme = \"dark\";\n      } else {\n        this.theme = \"light\";\n      }\n    }\n  }\n\n  componentWillRender(): void {\n    this.updateMonochromeState();\n  }\n\n  render() {\n    const {\n      borderStyle,\n      label,\n      labelPlacement,\n      monochrome,\n      orientation,\n      weight,\n    } = this;\n\n    const { theme } = this;\n\n    const invalidPropCombination = (\n      placement: IcDividerLabelPlacement\n    ): void => {\n      console.error(\n        `${\n          placement.charAt(0).toUpperCase() + placement.slice(1)\n        } label placement is not applicable for a ${orientation} ic-divider (web-components) / IcDivider (react)`\n      );\n    };\n\n    if (\n      ((labelPlacement === \"left\" || labelPlacement === \"right\") &&\n        orientation === \"vertical\") ||\n      ((labelPlacement === \"top\" || labelPlacement === \"bottom\") &&\n        orientation === \"horizontal\")\n    ) {\n      invalidPropCombination(labelPlacement);\n    }\n\n    const getTypographyVariant = (weight: string) => {\n      switch (weight) {\n        case \"very-thick\":\n          return \"h4\";\n        case \"thick\":\n          return \"subtitle-large\";\n        default:\n          return \"label\";\n      }\n    };\n\n    const renderLabel = () => {\n      if (slotHasContent(this.el, \"label\")) {\n        return (\n          <div class=\"ic-divider-label-container\">\n            <slot name=\"label\"></slot>\n          </div>\n        );\n      } else if (isPropDefined(label)) {\n        return (\n          <ic-typography\n            class=\"ic-divider-label\"\n            variant={getTypographyVariant(weight)}\n          >\n            <p>{label}</p>\n          </ic-typography>\n        );\n      }\n      return null;\n    };\n\n    return (\n      <Host\n        class={{\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n          [`ic-divider-monochrome`]: monochrome,\n          [`ic-divider-${orientation}`]: true,\n          [`ic-divider-${weight}`]: true,\n          [`ic-divider-${borderStyle}`]: true,\n        }}\n        {...((orientation === \"vertical\" ||\n          (!!renderLabel() && !!isPropDefined(labelPlacement))) && {\n          \"aria-orientation\": orientation,\n          role: \"separator\",\n        })}\n      >\n        {orientation === \"horizontal\" &&\n          (!renderLabel() || !isPropDefined(labelPlacement)) && <hr />}\n        {!!isPropDefined(labelPlacement) && !!renderLabel() && renderLabel()}\n        {orientation === \"vertical\" &&\n          (!renderLabel() || !isPropDefined(labelPlacement)) && (\n            <div class=\"vertical-divider\"></div>\n          )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-divider2.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,m6WAAm6W;;MCkC36W,OAAO;;;;+BAG4B,4BAA4B,EAAE;2BAKrC,OAAO;;8BAUK,QAAQ;0BAG5B,KAAK;2BAKC,YAAY;qBAKkB,SAAS;sBAKzC,MAAM;;IAGzC,kBAAkB,CAAC,EAAwB;QACzC,IAAI,CAAC,eAAe,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC;KACvC;IAEO,qBAAqB;QAC3B,MAAM,eAAe,GACnB,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,iBAAiB,CAAC,CAAC;QAC9D,MAAM,eAAe,GACnB,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,gBAAgB,CAAC,CAAC;QAE3E,IACE,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,OAAO,KAAK,oBAAoB;aACrD,eAAe,IAAI,eAAe,CAAC,EACpC;YACA,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,4BAA4B,CAAC,CAAC;YACpD,IAAI,IAAI,CAAC,eAAe,KAAK,OAAO,EAAE;gBACpC,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC;aACrB;iBAAM;gBACL,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC;aACtB;SACF;KACF;IAED,mBAAmB;QACjB,IAAI,CAAC,qBAAqB,EAAE,CAAC;KAC9B;IAED,MAAM;QACJ,MAAM,EACJ,WAAW,EACX,KAAK,EACL,cAAc,EACd,UAAU,EACV,WAAW,EACX,MAAM,GACP,GAAG,IAAI,CAAC;QAET,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QAEvB,MAAM,sBAAsB,GAAG,CAC7B,SAAkC;YAElC,OAAO,CAAC,KAAK,CACX,GACE,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC,CACvD,4CAA4C,WAAW,kDAAkD,CAC1G,CAAC;SACH,CAAC;QAEF,IACE,CAAC,CAAC,cAAc,KAAK,MAAM,IAAI,cAAc,KAAK,OAAO;YACvD,WAAW,KAAK,UAAU;aAC3B,CAAC,cAAc,KAAK,KAAK,IAAI,cAAc,KAAK,QAAQ;gBACvD,WAAW,KAAK,YAAY,CAAC,EAC/B;YACA,sBAAsB,CAAC,cAAc,CAAC,CAAC;SACxC;QAED,MAAM,oBAAoB,GAAG,CAAC,MAAc;YAC1C,QAAQ,MAAM;gBACZ,KAAK,YAAY;oBACf,OAAO,IAAI,CAAC;gBACd,KAAK,OAAO;oBACV,OAAO,gBAAgB,CAAC;gBAC1B;oBACE,OAAO,OAAO,CAAC;aAClB;SACF,CAAC;QAEF,MAAM,WAAW,GAAG;YAClB,IAAI,cAAc,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,CAAC,EAAE;gBACpC,QACE,WAAK,KAAK,EAAC,4BAA4B,IACrC,YAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,EACN;aACH;iBAAM,IAAI,aAAa,CAAC,KAAK,CAAC,EAAE;gBAC/B,QACE,qBACE,KAAK,EAAC,kBAAkB,EACxB,OAAO,EAAE,oBAAoB,CAAC,MAAM,CAAC,IAErC,aAAI,KAAK,CAAK,CACA,EAChB;aACH;YACD,OAAO,IAAI,CAAC;SACb,CAAC;QAEF,QACE,EAAC,IAAI,kBACH,KAAK,EAAE;gBACL,CAAC,YAAY,KAAK,EAAE,GAAG,KAAK,KAAK,SAAS;gBAC1C,CAAC,uBAAuB,GAAG,UAAU;gBACrC,CAAC,cAAc,WAAW,EAAE,GAAG,IAAI;gBACnC,CAAC,cAAc,MAAM,EAAE,GAAG,IAAI;gBAC9B,CAAC,cAAc,WAAW,EAAE,GAAG,IAAI;aACpC,KACI,CAAC,WAAW,KAAK,UAAU;aAC7B,CAAC,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC,KAAK;YACzD,kBAAkB,EAAE,WAAW;YAC/B,IAAI,EAAE,WAAW;SAClB,IAEA,WAAW,KAAK,YAAY;aAC1B,CAAC,WAAW,EAAE,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC,IAAI,aAAM,EAC7D,CAAC,CAAC,aAAa,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,WAAW,EAAE,IAAI,WAAW,EAAE,EACnE,WAAW,KAAK,UAAU;aACxB,CAAC,WAAW,EAAE,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC,KAChD,WAAK,KAAK,EAAC,kBAAkB,GAAO,CACrC,CACE,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/ic-divider/ic-divider.css?tag=ic-divider&encapsulation=scoped","src/components/ic-divider/ic-divider.tsx"],"sourcesContent":["/**\n  * @prop --ic-divider-vertical-height: The height of a vertical divider. The default value is `inherit`. \n  */\n/**\n  * @prop --ic-divider-horizontal-width: The width of a horizontal divider. The default value is `inherit`.\n  */\n/**\n  * @prop --ic-divider-label-width: The max-width of the divider label. When orientation is set to `horizontal`, the default value is `max(20rem, 60%)`. When orientation is set to `vertical`, the default value is `20 rem`.\n  */\n\n/* IC-DIVIDER COLORS */\n/**\n  * @internal @prop --ic-divider-background\n  */\n/**\n  * @internal @prop --ic-divider-background-monochrome\n  */\n/**\n  * @internal @prop --ic-divider-label\n  */\n/**\n  * @internal @prop --ic-divider-label-monochrome\n  */\n\n/* Horizontal Divider */\n:host(.ic-divider-horizontal) {\n  display: flex;\n  width: var(--ic-divider-horizontal-width, 100%);\n  align-items: center;\n  column-gap: var(--ic-space-xxs);\n}\n\nhr {\n  padding: 0;\n  margin: 0;\n  border: none;\n  border-bottom: solid var(--ic-space-1px) var(--ic-divider-background);\n  width: inherit;\n}\n\n:host(.ic-divider-horizontal)::before,\n:host(.ic-divider-horizontal)::after {\n  border-left: none !important;\n}\n\n:host(.ic-divider-horizontal[label-placement=\"right\"])::before,\n:host(.ic-divider-horizontal[label-placement=\"center\"])::before,\n:host(.ic-divider-horizontal[label-placement=\"left\"])::after,\n:host(.ic-divider-horizontal[label-placement=\"center\"])::after {\n  content: \"\";\n  border: none;\n  width: 100%;\n}\n\n/* Vertical Divider */\n:host(.ic-divider-vertical) {\n  display: flex;\n  flex-direction: column;\n  height: var(--ic-divider-vertical-height, inherit);\n  width: max-content;\n  align-items: center;\n  column-gap: var(--ic-space-xxs);\n  border: none;\n}\n\n:host(.ic-divider-vertical) div.vertical-divider {\n  display: flex;\n  height: inherit;\n}\n\n:host(.ic-divider-vertical[label-placement=\"bottom\"])::before,\n:host(.ic-divider-vertical[label-placement=\"center\"])::before,\n:host(.ic-divider-vertical[label-placement=\"top\"])::after,\n:host(.ic-divider-vertical[label-placement=\"center\"])::after {\n  content: \"\";\n  height: 100%;\n}\n\n/* Theme */\nhr,\n:host(.ic-divider-horizontal)[label-placement=\"right\"]::before,\n:host(.ic-divider-horizontal[label-placement=\"center\"])::before,\n:host(.ic-divider-horizontal[label-placement=\"left\"])::after,\n:host(.ic-divider-horizontal[label-placement=\"center\"])::after {\n  border-bottom: solid var(--ic-space-1px) var(--ic-divider-background);\n}\n\n:host(.ic-divider-monochrome) hr,\n:host(\n    .ic-divider-monochrome.ic-divider-horizontal\n  )[label-placement=\"right\"]::before,\n:host(\n    .ic-divider-monochrome.ic-divider-horizontal[label-placement=\"center\"]\n  )::before,\n:host(\n    .ic-divider-monochrome.ic-divider-horizontal[label-placement=\"left\"]\n  )::after,\n:host(\n    .ic-divider-monochrome.ic-divider-horizontal[label-placement=\"center\"]\n  )::after {\n  border-bottom-color: var(--ic-divider-background-monochrome);\n}\n\n:host() div.vertical-divider,\n:host(.ic-divider-vertical[label-placement=\"bottom\"])::before,\n:host(.ic-divider-vertical[label-placement=\"center\"])::before,\n:host(.ic-divider-vertical[label-placement=\"top\"])::after,\n:host(.ic-divider-vertical[label-placement=\"center\"])::after {\n  border-left: solid var(--ic-space-1px) var(--ic-divider-background);\n}\n\n:host(.ic-divider-monochrome) div.vertical-divider,\n:host(\n    .ic-divider-monochrome.ic-divider-vertical[label-placement=\"bottom\"]\n  )::before,\n:host(\n    .ic-divider-monochrome.ic-divider-vertical[label-placement=\"center\"]\n  )::before,\n:host(.ic-divider-monochrome.ic-divider-vertical[label-placement=\"top\"])::after,\n:host(\n    .ic-divider-monochrome.ic-divider-vertical[label-placement=\"center\"]\n  )::after {\n  border-left-color: var(--ic-divider-background-monochrome);\n}\n\n/* Divider in ic-side-navigation */\n:host(.ic-side-navigation-keyline.ic-theme-dark) {\n  --ic-side-navigation-keyline: var(--ic-state-layer-lighten-20);\n}\n\n:host(.ic-side-navigation-keyline.ic-theme-light) {\n  --ic-side-navigation-keyline: var(--ic-state-layer-darken-20);\n}\n\n:host(.ic-side-navigation-keyline.ic-theme-dark) hr,\n:host(\n    .ic-side-navigation-keyline.ic-theme-dark.ic-divider-horizontal\n  )[label-placement=\"right\"]::before,\n:host(\n    .ic-side-navigation-keyline.ic-theme-dark.ic-divider-horizontal[label-placement=\"center\"]\n  )::before,\n:host(\n    .ic-side-navigation-keyline.ic-theme-dark.ic-divider-horizontal[label-placement=\"left\"]\n  )::after,\n:host(\n    .ic-side-navigation-keyline.ic-theme-dark.ic-divider-horizontal[label-placement=\"center\"]\n  )::after {\n  border-bottom-color: var(--ic-side-navigation-keyline);\n}\n\n:host(.ic-side-navigation-keyline.ic-theme-dark) div.vertical-divider,\n:host(\n    .ic-side-navigation-keyline.ic-theme-dark.ic-divider-vertical[label-placement=\"bottom\"]\n  )::before,\n:host(\n    .ic-side-navigation-keyline.ic-theme-dark.ic-divider-vertical[label-placement=\"center\"]\n  )::before,\n:host(\n    .ic-side-navigation-keyline.ic-theme-dark.ic-divider-vertical[label-placement=\"top\"]\n  )::after,\n:host(\n    .ic-side-navigation-keyline.ic-theme-dark.ic-divider-vertical[label-placement=\"center\"]\n  )::after {\n  border-left-color: var(--ic-side-navigation-keyline);\n}\n\n:host(.ic-side-navigation-keyline.ic-theme-light) hr,\n:host(\n    .ic-side-navigation-keyline.ic-theme-light.ic-divider-horizontal\n  )[label-placement=\"right\"]::before,\n:host(\n    .ic-side-navigation-keyline.ic-theme-light.ic-divider-horizontal[label-placement=\"center\"]\n  )::before,\n:host(\n    .ic-side-navigation-keyline.ic-theme-light.ic-divider-horizontal[label-placement=\"left\"]\n  )::after,\n:host(\n    .ic-side-navigation-keyline.ic-theme-light.ic-divider-horizontal[label-placement=\"center\"]\n  )::after {\n  border-bottom-color: var(--ic-side-navigation-keyline);\n}\n\n:host(.ic-side-navigation-keyline.ic-theme-light) div.vertical-divider,\n:host(\n    .ic-side-navigation-keyline.ic-theme-light.ic-divider-vertical[label-placement=\"bottom\"]\n  )::before,\n:host(\n    .ic-side-navigation-keyline.ic-theme-light.ic-divider-vertical[label-placement=\"center\"]\n  )::before,\n:host(\n    .ic-side-navigation-keyline.ic-theme-light.ic-divider-vertical[label-placement=\"top\"]\n  )::after,\n:host(\n    .ic-side-navigation-keyline.ic-theme-light.ic-divider-vertical[label-placement=\"center\"]\n  )::after {\n  border-left-color: var(--ic-divider-background-monochrome);\n}\n\n/* Weight */\n:host(.ic-divider-very-thick) hr,\n:host(.ic-divider-very-thick[label-placement=\"right\"])::before,\n:host(.ic-divider-very-thick[label-placement=\"center\"])::before,\n:host(.ic-divider-very-thick[label-placement=\"left\"])::after,\n:host(.ic-divider-very-thick[label-placement=\"center\"])::after {\n  border-bottom-width: var(--ic-space-xs);\n}\n\n:host(.ic-divider-very-thick) .vertical-divider,\n:host(.ic-divider-very-thick[label-placement=\"bottom\"])::before,\n:host(.ic-divider-very-thick[label-placement=\"center\"])::before,\n:host(.ic-divider-very-thick[label-placement=\"top\"])::after,\n:host(.ic-divider-very-thick[label-placement=\"center\"])::after {\n  border-left-width: var(--ic-space-xs);\n}\n\n:host(.ic-divider-thick) hr,\n:host(.ic-divider-thick[label-placement=\"right\"])::before,\n:host(.ic-divider-thick[label-placement=\"center\"])::before,\n:host(.ic-divider-thick[label-placement=\"left\"])::after,\n:host(.ic-divider-thick[label-placement=\"center\"])::after {\n  border-bottom-width: var(--ic-space-xxs);\n}\n\n:host(.ic-divider-thick) .vertical-divider,\n:host(.ic-divider-thick[label-placement=\"bottom\"])::before,\n:host(.ic-divider-thick[label-placement=\"center\"])::before,\n:host(.ic-divider-thick[label-placement=\"top\"])::after,\n:host(.ic-divider-thick[label-placement=\"center\"])::after {\n  border-left-width: var(--ic-space-xxs);\n}\n\n:host(.ic-divider-medium) hr,\n:host(.ic-divider-medium[label-placement=\"right\"])::before,\n:host(.ic-divider-medium[label-placement=\"center\"])::before,\n:host(.ic-divider-medium[label-placement=\"left\"])::after,\n:host(.ic-divider-medium[label-placement=\"center\"])::after {\n  border-bottom-width: var(--ic-space-xxxs);\n}\n\n:host(.ic-divider-medium) .vertical-divider,\n:host(.ic-divider-medium[label-placement=\"bottom\"])::before,\n:host(.ic-divider-medium[label-placement=\"center\"])::before,\n:host(.ic-divider-medium[label-placement=\"top\"])::after,\n:host(.ic-divider-medium[label-placement=\"center\"])::after {\n  border-left-width: var(--ic-space-xxxs);\n}\n\n:host(.ic-divider-thin) hr,\n:host(.ic-divider-thin[label-placement=\"right\"])::before,\n:host(.ic-divider-thin[label-placement=\"center\"])::before,\n:host(.ic-divider-thin[label-placement=\"left\"])::after,\n:host(.ic-divider-thin[label-placement=\"center\"])::after {\n  border-bottom-width: var(--ic-space-1px);\n}\n\n:host(.ic-divider-thin) .vertical-divider,\n:host(.ic-divider-thin[label-placement=\"bottom\"])::before,\n:host(.ic-divider-thin.ic-divider-vertical[label-placement=\"center\"])::before,\n:host(.ic-divider-thin[label-placement=\"top\"])::after,\n:host(.ic-divider-thin.ic-divider-vertical[label-placement=\"center\"])::after {\n  border-left-width: var(--ic-space-1px);\n}\n\n/* Border styling */\n:host(.ic-divider-dashed) hr,\n:host(.ic-divider-dashed[label-placement=\"right\"])::before,\n:host(.ic-divider-dashed[label-placement=\"center\"])::before,\n:host(.ic-divider-dashed[label-placement=\"left\"])::after,\n:host(.ic-divider-dashed[label-placement=\"center\"])::after {\n  border-bottom-style: dashed;\n}\n\n:host(.ic-divider-dashed) .vertical-divider,\n:host(.ic-divider-dashed[label-placement=\"bottom\"])::before,\n:host(.ic-divider-dashed[label-placement=\"center\"])::before,\n:host(.ic-divider-dashed[label-placement=\"top\"])::after,\n:host(.ic-divider-dashed[label-placement=\"center\"])::after {\n  border-left-style: dashed;\n}\n\n/* Label styling */\n:host() .ic-divider-label {\n  text-wrap: wrap;\n  text-align: left;\n  width: max-content;\n  max-width: var(--ic-divider-label-width, max(20rem, 60%));\n}\n\n:host(.ic-divider-horizontal[label-placement=\"center\"]) .ic-divider-label {\n  text-align: center;\n}\n\n:host(.ic-divider-vertical) .ic-divider-label {\n  text-align: center;\n}\n\n:host() .ic-divider-label-container {\n  width: max-content;\n  max-width: var(--ic-divider-label-width, max(20rem, 60%));\n}\n\n:host(.ic-divider-vertical) .ic-divider-label {\n  max-width: var(--ic-divider-label-width, 20rem);\n}\n\n:host(.ic-divider-vertical) .ic-divider-label-container {\n  max-width: var(--ic-divider-label-width, 20rem);\n}\n\n:host() .ic-divider-label p {\n  width: max-content;\n  max-width: 100%;\n}\n\n:host() .ic-divider-label,\n:host() ::slotted(*) {\n  color: var(--ic-divider-label);\n}\n\n:host(.ic-divider-monochrome) .ic-divider-label,\n:host(.ic-divider-monochrome) ::slotted(*) {\n  color: var(--ic-divider-label-monochrome);\n}\n\n/* High contrast */\n@media (forced-colors: active) {\n  hr,\n  :host(.ic-divider-horizontal[label-placement=\"right\"])::before,\n  :host(.ic-divider-horizontal[label-placement=\"center\"])::before,\n  :host(.ic-divider-horizontal[label-placement=\"left\"])::after,\n  :host(.ic-divider-horizontal[label-placement=\"center\"])::after {\n    border-bottom-color: transparent;\n  }\n\n  :host() div.vertical-divider,\n  :host(.ic-divider-vertical[label-placement=\"bottom\"])::before,\n  :host(.ic-divider-vertical[label-placement=\"center\"])::before,\n  :host(.ic-divider-vertical[label-placement=\"top\"])::after,\n  :host(.ic-divider-vertical[label-placement=\"center\"])::after {\n    border-left-color: transparent;\n  }\n}\n","import {\n  h,\n  Component,\n  Host,\n  Listen,\n  State,\n  Prop,\n  Element,\n} from \"@stencil/core\";\n\nimport {\n  getBrandForegroundAppearance,\n  isPropDefined,\n  slotHasContent,\n} from \"../../utils/helpers\";\n\nimport {\n  IcBrand,\n  IcOrientation,\n  IcBrandForeground,\n  IcThemeMode,\n} from \"../../utils/types\";\n\nimport {\n  IcDividerLabelPlacement,\n  IcDividerStyles,\n  IcDividerWeights,\n} from \"./ic-divider.types\";\n\n@Component({\n  tag: \"ic-divider\",\n  styleUrl: \"ic-divider.css\",\n  scoped: true,\n})\nexport class Divider {\n  @Element() el: HTMLIcDividerElement;\n\n  @State() foregroundColor: IcBrandForeground = getBrandForegroundAppearance();\n\n  /**\n   * The line style of the divider.\n   */\n  @Prop() borderStyle: IcDividerStyles = \"solid\";\n\n  /**\n   * The label for the divider. The label placement will need to be set for the label to be displayed correctly.\n   */\n  @Prop() label?: string;\n\n  /**\n   * The position the label is placed on the divider. `Left` and `right` placement is only applicable when orientation is set to `horizontal`. `Top` and `bottom` placement is only applicable when orientation is set to `vertical`. `Center` placement is applicable for both orientations.\n   */\n  @Prop() labelPlacement?: IcDividerLabelPlacement = \"center\";\n\n  /** If `true`, the divider will be displayed in a grey colour. */\n  @Prop() monochrome?: boolean = false;\n\n  /**\n   * The orientation of the divider.\n   */\n  @Prop() orientation: IcOrientation = \"horizontal\";\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop({ mutable: true }) theme?: IcThemeMode | IcBrandForeground = \"inherit\";\n\n  /**\n   * The thickness of the divider.\n   */\n  @Prop() weight: IcDividerWeights = \"thin\";\n\n  @Listen(\"brandChange\", { target: \"document\" })\n  brandChangeHandler(ev: CustomEvent<IcBrand>): void {\n    this.foregroundColor = ev.detail.mode;\n  }\n\n  private updateMonochromeState(): void {\n    const isBottomSideNav =\n      this.el.parentElement.classList.contains(\"bottom-side-nav\");\n    const isBottomWrapper =\n      this.el.parentElement.parentElement.classList.contains(\"bottom-wrapper\");\n\n    if (\n      this.el.parentElement.tagName === \"IC-SIDE-NAVIGATION\" ||\n      (isBottomSideNav && isBottomWrapper)\n    ) {\n      this.el.classList.add(\"ic-side-navigation-keyline\");\n      if (this.foregroundColor === \"light\") {\n        this.theme = \"dark\";\n      } else {\n        this.theme = \"light\";\n      }\n    }\n  }\n\n  componentWillRender(): void {\n    this.updateMonochromeState();\n  }\n\n  render() {\n    const {\n      borderStyle,\n      label,\n      labelPlacement,\n      monochrome,\n      orientation,\n      weight,\n    } = this;\n\n    const { theme } = this;\n\n    const invalidPropCombination = (\n      placement: IcDividerLabelPlacement\n    ): void => {\n      console.error(\n        `${\n          placement.charAt(0).toUpperCase() + placement.slice(1)\n        } label placement is not applicable for a ${orientation} ic-divider (web-components) / IcDivider (react)`\n      );\n    };\n\n    if (\n      ((labelPlacement === \"left\" || labelPlacement === \"right\") &&\n        orientation === \"vertical\") ||\n      ((labelPlacement === \"top\" || labelPlacement === \"bottom\") &&\n        orientation === \"horizontal\")\n    ) {\n      invalidPropCombination(labelPlacement);\n    }\n\n    const getTypographyVariant = (weight: string) => {\n      switch (weight) {\n        case \"very-thick\":\n          return \"h4\";\n        case \"thick\":\n          return \"subtitle-large\";\n        default:\n          return \"label\";\n      }\n    };\n\n    const renderLabel = () => {\n      if (slotHasContent(this.el, \"label\")) {\n        return (\n          <div class=\"ic-divider-label-container\">\n            <slot name=\"label\"></slot>\n          </div>\n        );\n      } else if (isPropDefined(label)) {\n        return (\n          <ic-typography\n            class=\"ic-divider-label\"\n            variant={getTypographyVariant(weight)}\n          >\n            <p>{label}</p>\n          </ic-typography>\n        );\n      }\n      return null;\n    };\n\n    return (\n      <Host\n        class={{\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n          [`ic-divider-monochrome`]: monochrome,\n          [`ic-divider-${orientation}`]: true,\n          [`ic-divider-${weight}`]: true,\n          [`ic-divider-${borderStyle}`]: true,\n        }}\n        {...((orientation === \"vertical\" ||\n          (!!renderLabel() && !!isPropDefined(labelPlacement))) && {\n          \"aria-orientation\": orientation,\n          role: \"separator\",\n        })}\n      >\n        {orientation === \"horizontal\" &&\n          (!renderLabel() || !isPropDefined(labelPlacement)) && <hr />}\n        {!!isPropDefined(labelPlacement) && !!renderLabel() && renderLabel()}\n        {orientation === \"vertical\" &&\n          (!renderLabel() || !isPropDefined(labelPlacement)) && (\n            <div class=\"vertical-divider\"></div>\n          )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { D as DEVICE_SIZES, k as getThemeForegroundColor, o as onComponentRequiredPropUndefined } from './helpers.js';
+import { D as DEVICE_SIZES, k as getBrandForegroundAppearance, o as onComponentRequiredPropUndefined } from './helpers.js';
 import { d as defineCustomElement$3 } from './ic-section-container2.js';
 import { d as defineCustomElement$2 } from './ic-typography2.js';
 
@@ -20,7 +20,7 @@ const FooterLinkGroup = /*@__PURE__*/ proxyCustomElement(class FooterLinkGroup e
         };
         this.expanded = false;
         this.deviceSize = DEVICE_SIZES.XL;
-        this.dropdownIconStyle = getThemeForegroundColor();
+        this.dropdownIconStyle = getBrandForegroundAppearance();
         this.small = false;
         this.label = undefined;
     }
@@ -33,9 +33,8 @@ const FooterLinkGroup = /*@__PURE__*/ proxyCustomElement(class FooterLinkGroup e
     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) {
@@ -69,7 +68,7 @@ const FooterLinkGroup = /*@__PURE__*/ proxyCustomElement(class FooterLinkGroup e
         "deviceSize": [32],
         "dropdownIconStyle": [32],
         "small": [32]
-    }, [[4, "footerResized", "footerResizeHandler"], [4, "themeChange", "footerThemeChangeHandler"]]]);
+    }, [[4, "footerResized", "footerResizeHandler"], [4, "brandChange", "footerBrandChangeHandler"]]]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;

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

@@ -1 +1 @@
-{"file":"ic-footer-link-group.js","mappings":"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","names":[],"sources":["src/components/ic-footer-link-group/ic-footer-link-group.css?tag=ic-footer-link-group&encapsulation=shadow","src/components/ic-footer-link-group/ic-footer-link-group.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host(.footer-link-group-sparse) {\n  --footer-link-group-margin-right: 5.938rem;\n  --footer-link-group-border-bottom: 0 solid transparent;\n  --footer-link-label-margin-top: 0;\n  --footer-link-label-margin-bottom: var(--ic-space-md);\n}\n\n:host(.footer-link-group-small) {\n  --footer-link-group-margin-right: 0;\n  --footer-link-label-margin-top: var(--ic-space-md);\n  --footer-link-label-margin-bottom: var(--ic-space-md);\n  --footer-link-group-links-padding-left: var(--ic-space-md);\n  --footer-link-group-links-padding-bottom: var(--ic-space-md);\n}\n\n:host(.footer-link-group-small) {\n  --footer-link-group-border-bottom: var(--ic-space-1px) solid\n    var(--ic-footer-keyline);\n}\n\n:host(.footer-link-group) {\n  margin-right: var(--footer-link-group-margin-right);\n  border-bottom: var(--footer-link-group-border-bottom);\n}\n\n:host(.footer-link-group-small:hover) {\n  background-color: var(--ic-footer-hover);\n  cursor: pointer;\n}\n\n:host(.footer-link-group-sparse:focus) {\n  box-shadow: var(--ic-border-focus-inset);\n  border-radius: var(--ic-border-radius-inset);\n  outline: var(--ic-hc-focus-outline);\n  z-index: 1;\n}\n\n:host(.footer-link-group-small:focus) {\n  box-shadow: var(--ic-border-focus-inset);\n  border-radius: var(--ic-border-radius-inset);\n  outline: var(--ic-hc-focus-outline);\n  z-index: 1;\n}\n\n:host(.footer-link-group-small:active) {\n  background-color: var(--ic-footer-pressed);\n}\n\n:host ic-section-container {\n  outline: none;\n}\n\n.footer-link-label {\n  margin-top: var(--footer-link-label-margin-top);\n  margin-bottom: var(--footer-link-label-margin-bottom);\n  flex-grow: 1;\n}\n\n.footer-link-group-toggle {\n  fill: var(--ic-footer-chevron-icon) !important;\n}\n\n.footer-link-group-links {\n  display: flex;\n  flex-direction: column;\n}\n\n.footer-link-group-header {\n  display: flex;\n  align-items: center;\n}\n\nic-typography {\n  --ic-typography-color: var(--ic-footer-link);\n}\n","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 {\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundNoDefault,\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: IcThemeForegroundNoDefault | IcThemeForeground =\n    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        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"],"version":3}
+{"file":"ic-footer-link-group.js","mappings":"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","names":[],"sources":["src/components/ic-footer-link-group/ic-footer-link-group.css?tag=ic-footer-link-group&encapsulation=shadow","src/components/ic-footer-link-group/ic-footer-link-group.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host(.footer-link-group-sparse) {\n  --footer-link-group-margin-right: 5.938rem;\n  --footer-link-group-border-bottom: 0 solid transparent;\n  --footer-link-label-margin-top: 0;\n  --footer-link-label-margin-bottom: var(--ic-space-md);\n}\n\n:host(.footer-link-group-small) {\n  --footer-link-group-margin-right: 0;\n  --footer-link-label-margin-top: var(--ic-space-md);\n  --footer-link-label-margin-bottom: var(--ic-space-md);\n  --footer-link-group-links-padding-left: var(--ic-space-md);\n  --footer-link-group-links-padding-bottom: var(--ic-space-md);\n}\n\n:host(.footer-link-group-small) {\n  --footer-link-group-border-bottom: var(--ic-space-1px) solid\n    var(--ic-footer-keyline);\n}\n\n:host(.footer-link-group) {\n  margin-right: var(--footer-link-group-margin-right);\n  border-bottom: var(--footer-link-group-border-bottom);\n}\n\n:host(.footer-link-group-small:hover) {\n  background-color: var(--ic-footer-hover);\n  cursor: pointer;\n}\n\n:host(.footer-link-group-sparse:focus) {\n  box-shadow: var(--ic-border-focus-inset);\n  border-radius: var(--ic-border-radius-inset);\n  outline: var(--ic-hc-focus-outline);\n  z-index: 1;\n}\n\n:host(.footer-link-group-small:focus) {\n  box-shadow: var(--ic-border-focus-inset);\n  border-radius: var(--ic-border-radius-inset);\n  outline: var(--ic-hc-focus-outline);\n  z-index: 1;\n}\n\n:host(.footer-link-group-small:active) {\n  background-color: var(--ic-footer-pressed);\n}\n\n:host ic-section-container {\n  outline: none;\n}\n\n.footer-link-label {\n  margin-top: var(--footer-link-label-margin-top);\n  margin-bottom: var(--footer-link-label-margin-bottom);\n  flex-grow: 1;\n}\n\n.footer-link-group-toggle {\n  fill: var(--ic-footer-chevron-icon) !important;\n}\n\n.footer-link-group-links {\n  display: flex;\n  flex-direction: column;\n}\n\n.footer-link-group-header {\n  display: flex;\n  align-items: center;\n}\n\nic-typography {\n  --ic-typography-color: var(--ic-footer-link);\n}\n","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"],"version":3}

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

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { D as DEVICE_SIZES, k as getThemeForegroundColor } from './helpers.js';
+import { D as DEVICE_SIZES, k as getBrandForegroundAppearance } from './helpers.js';
 import { d as defineCustomElement$2 } from './ic-link2.js';
 
 const icFooterLinkCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host(.footer-link-ungrouped-sparse){--footer-link-margin-left:0;--footer-link-margin-right:2.5rem;--footer-link-margin-bottom:0}:host(.footer-link-ungrouped-small){--footer-link-margin-left:0;--footer-link-margin-right:0;--footer-link-margin-bottom:var(--ic-space-md)}:host(.footer-link-grouped-sparse){--footer-link-margin-left:0;--footer-link-margin-right:0;--footer-link-margin-bottom:var(--ic-space-md)}:host(.footer-link-grouped-small){--footer-link-margin-left:var(--ic-space-md);--footer-link-margin-right:0;--footer-link-margin-bottom:var(--ic-space-md)}:host(.footer-link){margin-left:var(--footer-link-margin-left);margin-right:var(--footer-link-margin-right);margin-bottom:var(--footer-link-margin-bottom)}.ic-link-open-in-new-icon{vertical-align:middle;margin-left:var(--ic-space-xxs)}.ic-link>.ic-link-open-in-new-icon{fill:var(--ic-color-hyperlink-default)}.ic-link-open-in-new-icon>svg{width:var(--ic-space-md);height:var(--ic-space-md);fill:currentcolor}.ic-link:visited>.ic-link-open-in-new-icon{fill:var(--ic-color-hyperlink-visited)}.ic-link.light:visited>.ic-link-open-in-new-icon{fill:var(--ic-color-hyperlink-contrast-visited)}:host(.breadcrumb-link) .ic-link{display:var(--breadcrumb-link-display);align-items:var(--breadcrumb-link-align-items);gap:var(--breadcrumb-link-gap)}:host(.breadcrumb-link) .ic-link ::slotted(.back-icon){height:var(--ic-space-lg);width:var(--ic-space-lg)}: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(.breadcrumb-link.current-page) .ic-link,:host(.breadcrumb-link.current-page) ::slotted(a:focus){outline:var(--ic-hc-focus-outline);text-decoration:none}:host(.breadcrumb-link.current-page) .ic-link:visited{color:var(--ic-color-text-primary)}:host(.footer-link-light) ::part(link),:host(.footer-link-dark) ::part(link){color:var(--ic-footer-link)}:host(.footer-link-light) ::slotted(svg),:host(.footer-link-dark) ::slotted(svg){fill:var(--ic-footer-icon)}@media (forced-colors: active){:host(.footer-link-light) ::slotted(svg),:host(.footer-link-dark) ::slotted(svg){fill:currentcolor}}";
@@ -11,7 +11,7 @@ const FooterLink = /*@__PURE__*/ proxyCustomElement(class FooterLink extends HTM
         this.__attachShadow();
         this.deviceSize = DEVICE_SIZES.XL;
         this.footerConfig = { small: false, grouped: false };
-        this.foregroundColor = getThemeForegroundColor();
+        this.foregroundColor = getBrandForegroundAppearance();
         this.download = false;
         this.href = null;
         this.hreflang = undefined;
@@ -25,9 +25,8 @@ const FooterLink = /*@__PURE__*/ proxyCustomElement(class FooterLink extends HTM
     footerResizeHandler() {
         this.footerConfig = this.inferConfig(this.el);
     }
-    footerThemeChangeHandler(ev) {
-        const theme = ev.detail;
-        this.foregroundColor = theme.mode;
+    footerBrandChangeHandler(ev) {
+        this.foregroundColor = ev.detail.mode;
     }
     inferConfig(e) {
         if (e.parentElement !== null) {
@@ -67,7 +66,7 @@ const FooterLink = /*@__PURE__*/ proxyCustomElement(class FooterLink extends HTM
         "deviceSize": [32],
         "footerConfig": [32],
         "foregroundColor": [32]
-    }, [[4, "footerResized", "footerResizeHandler"], [4, "themeChange", "footerThemeChangeHandler"]]]);
+    }, [[4, "footerResized", "footerResizeHandler"], [4, "brandChange", "footerBrandChangeHandler"]]]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;

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

@@ -1 +1 @@
-{"file":"ic-footer-link.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,6/IAA6/I;;MCqBxgJ,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;KAC/C;IAGD,mBAAmB;QACjB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;KAC/C;IAGD,wBAAwB,CAAC,EAAe;QACtC,MAAM,KAAK,GAAY,EAAE,CAAC,MAAM,CAAC;QACjC,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC,IAAI,CAAC;KACnC;IAEO,WAAW,CAAC,CAAc;QAChC,IAAI,CAAC,CAAC,aAAa,KAAK,IAAI,EAAE;YAC5B,IAAI,CAAC,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAE;gBACnD,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;aACH;iBAAM;gBACL,OAAO,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC;aAC1C;SACF;aAAM;YACL,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;SACzC;KACF;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,QACE,EAAC,IAAI,IACH,KAAK,EAAE;gBACL,aAAa,EAAE,IAAI;gBACnB,CAAC,eAAe,OAAO,GAAG,SAAS,GAAG,WAAW,IAC/C,KAAK,GAAG,OAAO,GAAG,QACpB,EAAE,GAAG,IAAI;gBACT,CAAC,eAAe,IAAI,CAAC,eAAe,EAAE,GAAG,IAAI;aAC9C,EACD,IAAI,EAAC,UAAU,IAEf,eACE,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,cAAc,EAC9B,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAQ,KAAK,KAAK,GAAG,QAAQ,GAAG,IAAI,EAC9C,MAAM,EAAE,MAAM,IAEd,eAAQ,CACA,CACL,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/ic-footer-link/ic-footer-link.css?tag=ic-footer-link&encapsulation=shadow","src/components/ic-footer-link/ic-footer-link.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host(.footer-link-ungrouped-sparse) {\n  --footer-link-margin-left: 0;\n  --footer-link-margin-right: 2.5rem;\n  --footer-link-margin-bottom: 0;\n}\n\n:host(.footer-link-ungrouped-small) {\n  --footer-link-margin-left: 0;\n  --footer-link-margin-right: 0;\n  --footer-link-margin-bottom: var(--ic-space-md);\n}\n\n:host(.footer-link-grouped-sparse) {\n  --footer-link-margin-left: 0;\n  --footer-link-margin-right: 0;\n  --footer-link-margin-bottom: var(--ic-space-md);\n}\n\n:host(.footer-link-grouped-small) {\n  --footer-link-margin-left: var(--ic-space-md);\n  --footer-link-margin-right: 0;\n  --footer-link-margin-bottom: var(--ic-space-md);\n}\n\n:host(.footer-link) {\n  margin-left: var(--footer-link-margin-left);\n  margin-right: var(--footer-link-margin-right);\n  margin-bottom: var(--footer-link-margin-bottom);\n}\n\n.ic-link-open-in-new-icon {\n  vertical-align: middle;\n  margin-left: var(--ic-space-xxs);\n}\n\n.ic-link > .ic-link-open-in-new-icon {\n  fill: var(--ic-color-hyperlink-default);\n}\n\n.ic-link-open-in-new-icon > svg {\n  width: var(--ic-space-md);\n  height: var(--ic-space-md);\n  fill: currentcolor;\n}\n\n.ic-link:visited > .ic-link-open-in-new-icon {\n  fill: var(--ic-color-hyperlink-visited);\n}\n\n.ic-link.light:visited > .ic-link-open-in-new-icon {\n  fill: var(--ic-color-hyperlink-contrast-visited);\n}\n\n:host(.breadcrumb-link) .ic-link {\n  display: var(--breadcrumb-link-display);\n  align-items: var(--breadcrumb-link-align-items);\n  gap: var(--breadcrumb-link-gap);\n}\n\n:host(.breadcrumb-link) .ic-link ::slotted(.back-icon) {\n  height: var(--ic-space-lg);\n  width: var(--ic-space-lg);\n}\n\n:host(.breadcrumb-link.current-page) a,\n:host(.breadcrumb-link.current-page) ::slotted(a) {\n  font-weight: normal;\n  color: inherit;\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n}\n\n:host(.breadcrumb-link.current-page) .ic-link,\n:host(.breadcrumb-link.current-page) ::slotted(a:focus) {\n  outline: var(--ic-hc-focus-outline);\n  text-decoration: none;\n}\n\n:host(.breadcrumb-link.current-page) .ic-link:visited {\n  color: var(--ic-color-text-primary);\n}\n\n:host(.footer-link-light) ::part(link),\n:host(.footer-link-dark) ::part(link) {\n  color: var(--ic-footer-link);\n}\n\n:host(.footer-link-light) ::slotted(svg),\n:host(.footer-link-dark) ::slotted(svg) {\n  fill: var(--ic-footer-icon);\n}\n\n@media (forced-colors: active) {\n  :host(.footer-link-light) ::slotted(svg),\n  :host(.footer-link-dark) ::slotted(svg) {\n    fill: currentcolor;\n  }\n}\n","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"],"version":3}
+{"file":"ic-footer-link.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,6/IAA6/I;;MCwBxgJ,UAAU;;;;;0BAGS,YAAY,CAAC,EAAE;4BACP,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE;+BACxB,4BAA4B,EAAE;wBAKtC,KAAK;oBAKnB,IAAI;;;;;;IAsB5B,iBAAiB;QACf,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;KAC/C;IAGD,mBAAmB;QACjB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;KAC/C;IAGD,wBAAwB,CAAC,EAAwB;QAC/C,IAAI,CAAC,eAAe,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC;KACvC;IAEO,WAAW,CAAC,CAAc;QAChC,IAAI,CAAC,CAAC,aAAa,KAAK,IAAI,EAAE;YAC5B,IAAI,CAAC,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAE;gBACnD,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;aACH;iBAAM;gBACL,OAAO,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC;aAC1C;SACF;aAAM;YACL,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;SACzC;KACF;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,QACE,EAAC,IAAI,IACH,KAAK,EAAE;gBACL,aAAa,EAAE,IAAI;gBACnB,CAAC,eAAe,OAAO,GAAG,SAAS,GAAG,WAAW,IAC/C,KAAK,GAAG,OAAO,GAAG,QACpB,EAAE,GAAG,IAAI;gBACT,CAAC,eAAe,IAAI,CAAC,eAAe,EAAE,GAAG,IAAI;aAC9C,EACD,IAAI,EAAC,UAAU,IAEf,eACE,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,cAAc,EAC9B,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAQ,KAAK,KAAK,GAAG,QAAQ,GAAG,IAAI,EAC9C,MAAM,EAAE,MAAM,IAEd,eAAQ,CACA,CACL,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/ic-footer-link/ic-footer-link.css?tag=ic-footer-link&encapsulation=shadow","src/components/ic-footer-link/ic-footer-link.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host(.footer-link-ungrouped-sparse) {\n  --footer-link-margin-left: 0;\n  --footer-link-margin-right: 2.5rem;\n  --footer-link-margin-bottom: 0;\n}\n\n:host(.footer-link-ungrouped-small) {\n  --footer-link-margin-left: 0;\n  --footer-link-margin-right: 0;\n  --footer-link-margin-bottom: var(--ic-space-md);\n}\n\n:host(.footer-link-grouped-sparse) {\n  --footer-link-margin-left: 0;\n  --footer-link-margin-right: 0;\n  --footer-link-margin-bottom: var(--ic-space-md);\n}\n\n:host(.footer-link-grouped-small) {\n  --footer-link-margin-left: var(--ic-space-md);\n  --footer-link-margin-right: 0;\n  --footer-link-margin-bottom: var(--ic-space-md);\n}\n\n:host(.footer-link) {\n  margin-left: var(--footer-link-margin-left);\n  margin-right: var(--footer-link-margin-right);\n  margin-bottom: var(--footer-link-margin-bottom);\n}\n\n.ic-link-open-in-new-icon {\n  vertical-align: middle;\n  margin-left: var(--ic-space-xxs);\n}\n\n.ic-link > .ic-link-open-in-new-icon {\n  fill: var(--ic-color-hyperlink-default);\n}\n\n.ic-link-open-in-new-icon > svg {\n  width: var(--ic-space-md);\n  height: var(--ic-space-md);\n  fill: currentcolor;\n}\n\n.ic-link:visited > .ic-link-open-in-new-icon {\n  fill: var(--ic-color-hyperlink-visited);\n}\n\n.ic-link.light:visited > .ic-link-open-in-new-icon {\n  fill: var(--ic-color-hyperlink-contrast-visited);\n}\n\n:host(.breadcrumb-link) .ic-link {\n  display: var(--breadcrumb-link-display);\n  align-items: var(--breadcrumb-link-align-items);\n  gap: var(--breadcrumb-link-gap);\n}\n\n:host(.breadcrumb-link) .ic-link ::slotted(.back-icon) {\n  height: var(--ic-space-lg);\n  width: var(--ic-space-lg);\n}\n\n:host(.breadcrumb-link.current-page) a,\n:host(.breadcrumb-link.current-page) ::slotted(a) {\n  font-weight: normal;\n  color: inherit;\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n}\n\n:host(.breadcrumb-link.current-page) .ic-link,\n:host(.breadcrumb-link.current-page) ::slotted(a:focus) {\n  outline: var(--ic-hc-focus-outline);\n  text-decoration: none;\n}\n\n:host(.breadcrumb-link.current-page) .ic-link:visited {\n  color: var(--ic-color-text-primary);\n}\n\n:host(.footer-link-light) ::part(link),\n:host(.footer-link-dark) ::part(link) {\n  color: var(--ic-footer-link);\n}\n\n:host(.footer-link-light) ::slotted(svg),\n:host(.footer-link-dark) ::slotted(svg) {\n  fill: var(--ic-footer-icon);\n}\n\n@media (forced-colors: active) {\n  :host(.footer-link-light) ::slotted(svg),\n  :host(.footer-link-dark) ::slotted(svg) {\n    fill: currentcolor;\n  }\n}\n","import {\n  Component,\n  Element,\n  Host,\n  Listen,\n  Prop,\n  h,\n  State,\n} from \"@stencil/core\";\nimport {\n  DEVICE_SIZES,\n  getBrandForegroundAppearance,\n} from \"../../utils/helpers\";\nimport { IcBrand, IcBrandForeground } 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: IcBrandForeground = getBrandForegroundAppearance();\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(\"brandChange\", { target: \"document\" })\n  footerBrandChangeHandler(ev: CustomEvent<IcBrand>): void {\n    this.foregroundColor = ev.detail.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"],"version":3}

package/dist/components/ic-footer.js

@@ -1,9 +1,9 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { m as getCurrentDeviceSize, C as IC_DEVICE_SIZES, k as getThemeForegroundColor, c as checkResizeObserver, e as IcThemeForegroundEnum, i as isSlotUsed, E as hasClassificationBanner } from './helpers.js';
+import { m as getCurrentDeviceSize, C as IC_DEVICE_SIZES, k as getBrandForegroundAppearance, c as checkResizeObserver, e as IcBrandForegroundEnum, i as isSlotUsed, E as hasClassificationBanner } from './helpers.js';
 import { d as defineCustomElement$3 } from './ic-section-container2.js';
 import { d as defineCustomElement$2 } from './ic-typography2.js';
 
-const icFooterCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block;--footer-compliance-padding:1rem 0}:host(.ic-footer-sparse){--footer-links-padding:1.5rem 0;--footer-logo-margin-bottom:calc(var(--ic-space-md) + var(--ic-space-xxs));--footer-link-inner-flex-direction:row}:host(.ic-footer-small){--footer-links-padding:0 0;--footer-logo-margin-bottom:var(--ic-space-md);--footer-link-inner-flex-direction:column}:host(.ic-footer-foreground-dark){--ic-footer-background:var(--ic-theme-secondary-light);--ic-footer-bottom-background:var(--ic-theme-tertiary-light);--ic-footer-keyline:var(--ic-state-layer-darken-20);--ic-footer-text:var(--ic-color-text-primary-light);--ic-footer-link:var(--ic-color-text-primary-light);--ic-footer-icon:var(--ic-color-icon-neutral);--ic-footer-chevron-icon:var(--ic-color-icon-neutral);--ic-footer-logo:var(--ic-color-icon-neutral);--ic-footer-hover:var(--ic-architectural-700-state-layer-10);--ic-footer-pressed:var(--ic-architectural-700-state-layer-20)}:host(.ic-footer-small.ic-footer-ungrouped){--footer-links-padding:var(--ic-space-md) 0 0 0}footer{display:flex;flex-direction:column;width:100%}.footer-description{background-color:var(--ic-footer-background);color:var(--ic-footer-text);--ic-typography-color:var(--ic-footer-text);border-bottom:var(--ic-space-1px) solid var(--ic-footer-keyline)}.footer-description-inner{padding:1rem 0}.footer-links{padding:var(--footer-links-padding);background-color:var(--ic-footer-background);color:var(--ic-footer-link);--ic-typography-color:var(--ic-footer-link)}.footer-links-inner{display:flex;flex-direction:var(--footer-link-inner-flex-direction)}.footer-compliance{background-color:var(--ic-footer-bottom-background);color:var(--ic-footer-text);--ic-typography-color:var(--ic-footer-text)}.footer-compliance-inner{padding:var(--footer-compliance-padding)}.footer-logo{margin-bottom:var(--footer-logo-margin-bottom);display:flex;gap:var(--ic-space-xxl)}.footer-logo>::slotted(){margin-right:var(--ic-space-md)}.footer-caption{margin-bottom:var(--ic-space-md)}.classification-spacing{margin-bottom:var(--ic-space-lg)}@media (forced-colors: active){footer{border-top:var(--ic-border-hc)}}";
+const icFooterCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block;--footer-compliance-padding:1rem 0}:host(.ic-footer-sparse){--footer-links-padding:1.5rem 0;--footer-logo-margin-bottom:calc(var(--ic-space-md) + var(--ic-space-xxs));--footer-link-inner-flex-direction:row}:host(.ic-footer-small){--footer-links-padding:0 0;--footer-logo-margin-bottom:var(--ic-space-md);--footer-link-inner-flex-direction:column}:host(.ic-footer-foreground-dark){--ic-footer-background:var(--ic-brand-color-secondary-light);--ic-footer-bottom-background:var(--ic-brand-color-tertiary-light);--ic-footer-keyline:var(--ic-state-layer-darken-20);--ic-footer-text:var(--ic-color-text-primary-light);--ic-footer-link:var(--ic-color-text-primary-light);--ic-footer-icon:var(--ic-color-icon-neutral);--ic-footer-chevron-icon:var(--ic-color-icon-neutral);--ic-footer-logo:var(--ic-color-icon-neutral);--ic-footer-hover:var(--ic-architectural-700-state-layer-10);--ic-footer-pressed:var(--ic-architectural-700-state-layer-20)}:host(.ic-footer-small.ic-footer-ungrouped){--footer-links-padding:var(--ic-space-md) 0 0 0}footer{display:flex;flex-direction:column;width:100%}.footer-description{background-color:var(--ic-footer-background);color:var(--ic-footer-text);--ic-typography-color:var(--ic-footer-text);border-bottom:var(--ic-space-1px) solid var(--ic-footer-keyline)}.footer-description-inner{padding:1rem 0}.footer-links{padding:var(--footer-links-padding);background-color:var(--ic-footer-background);color:var(--ic-footer-link);--ic-typography-color:var(--ic-footer-link)}.footer-links-inner{display:flex;flex-direction:var(--footer-link-inner-flex-direction)}.footer-compliance{background-color:var(--ic-footer-bottom-background);color:var(--ic-footer-text);--ic-typography-color:var(--ic-footer-text)}.footer-compliance-inner{padding:var(--footer-compliance-padding)}.footer-logo{margin-bottom:var(--footer-logo-margin-bottom);display:flex;gap:var(--ic-space-xxl)}.footer-logo>::slotted(){margin-right:var(--ic-space-md)}.footer-caption{margin-bottom:var(--ic-space-md)}.classification-spacing{margin-bottom:var(--ic-space-lg)}@media (forced-colors: active){footer{border-top:var(--ic-border-hc)}}";
 
 const Footer = /*@__PURE__*/ proxyCustomElement(class Footer extends HTMLElement {
     constructor() {
@@ -26,7 +26,7 @@ const Footer = /*@__PURE__*/ proxyCustomElement(class Footer extends HTMLElement
             this.resizeObserver.observe(this.footerEl);
         };
         this.deviceSize = IC_DEVICE_SIZES.XL;
-        this.foregroundColor = getThemeForegroundColor();
+        this.foregroundColor = getBrandForegroundAppearance();
         this.aligned = "left";
         this.breakpoint = "medium";
         this.caption = undefined;
@@ -45,9 +45,8 @@ const Footer = /*@__PURE__*/ proxyCustomElement(class Footer extends HTMLElement
     componentDidLoad() {
         checkResizeObserver(this.runResizeObserver);
     }
-    themeChangeHandler(ev) {
-        const theme = ev.detail;
-        this.foregroundColor = theme.mode;
+    brandChangeHandler(ev) {
+        this.foregroundColor = ev.detail.mode;
     }
     isSmall() {
         const bp = this.breakpoint;
@@ -72,8 +71,8 @@ const Footer = /*@__PURE__*/ proxyCustomElement(class Footer extends HTMLElement
                 [`ic-footer-${groupLinks ? "grouped" : "ungrouped"}`]: true,
                 [`ic-footer-foreground-${foregroundColor}`]: true,
                 // Slots will be able to infer their own color
-                [`ic-footer-${IcThemeForegroundEnum.Dark}`]: foregroundColor === IcThemeForegroundEnum.Dark,
-                [`ic-footer-${IcThemeForegroundEnum.Light}`]: foregroundColor === IcThemeForegroundEnum.Light,
+                [`ic-footer-${IcBrandForegroundEnum.Dark}`]: foregroundColor === IcBrandForegroundEnum.Dark,
+                [`ic-footer-${IcBrandForegroundEnum.Light}`]: foregroundColor === IcBrandForegroundEnum.Light,
             } }, h("footer", { ref: (footerEl) => (this.footerEl = footerEl) }, (isSlotUsed(this.el, "description") || description) && (h("div", { class: "footer-description" }, h("ic-section-container", { aligned: aligned, fullHeight: true }, h("div", { class: "footer-description-inner" }, h("ic-typography", { variant: "body" }, h("slot", { name: "description" }, description)))))), isSlotUsed(this.el, "link") && (h("div", { class: "footer-links" }, groupLinks && small ? (h("div", { class: "footer-links-inner", role: "list" }, h("slot", { name: "link" }))) : (h("ic-section-container", { fullHeight: true, aligned: aligned }, h("div", { class: "footer-links-inner", role: "list" }, h("slot", { name: "link" })))))), h("div", { class: "footer-compliance" }, h("ic-section-container", { aligned: aligned, fullHeight: true }, h("div", { class: "footer-compliance-inner" }, isSlotUsed(this.el, "logo") && (h("div", { class: "footer-logo" }, h("slot", { name: "logo" }))), (isSlotUsed(this.el, "caption") || caption) && (h("div", { class: "footer-caption" }, h("ic-typography", { variant: this.deviceSize <= IC_DEVICE_SIZES.M
                 ? "caption"
                 : "body" }, h("slot", { name: "caption" }, caption)))), copyright && (h("div", { class: {
@@ -94,7 +93,7 @@ const Footer = /*@__PURE__*/ proxyCustomElement(class Footer extends HTMLElement
         "groupLinks": [4, "group-links"],
         "deviceSize": [32],
         "foregroundColor": [32]
-    }, [[4, "themeChange", "themeChangeHandler"]]]);
+    }, [[4, "brandChange", "brandChangeHandler"]]]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;

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

@@ -1 +1 @@
-{"file":"ic-footer.js","mappings":"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","names":[],"sources":["src/components/ic-footer/ic-footer.css?tag=ic-footer&encapsulation=shadow","src/components/ic-footer/ic-footer.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: block;\n\n  --footer-compliance-padding: 1rem 0;\n}\n\n:host(.ic-footer-sparse) {\n  --footer-links-padding: 1.5rem 0;\n  --footer-logo-margin-bottom: calc(var(--ic-space-md) + var(--ic-space-xxs));\n  --footer-link-inner-flex-direction: row;\n}\n\n:host(.ic-footer-small) {\n  --footer-links-padding: 0 0;\n  --footer-logo-margin-bottom: var(--ic-space-md);\n  --footer-link-inner-flex-direction: column;\n}\n\n:host(.ic-footer-foreground-dark) {\n  --ic-footer-background: var(--ic-theme-secondary-light);\n  --ic-footer-bottom-background: var(--ic-theme-tertiary-light);\n  --ic-footer-keyline: var(--ic-state-layer-darken-20);\n  --ic-footer-text: var(--ic-color-text-primary-light);\n  --ic-footer-link: var(--ic-color-text-primary-light);\n  --ic-footer-icon: var(--ic-color-icon-neutral);\n  --ic-footer-chevron-icon: var(--ic-color-icon-neutral);\n  --ic-footer-logo: var(--ic-color-icon-neutral);\n  --ic-footer-hover: var(--ic-architectural-700-state-layer-10);\n  --ic-footer-pressed: var(--ic-architectural-700-state-layer-20);\n}\n\n:host(.ic-footer-small.ic-footer-ungrouped) {\n  --footer-links-padding: var(--ic-space-md) 0 0 0;\n}\n\n/* Main inner footer element */\nfooter {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\n\n/* Description */\n\n.footer-description {\n  background-color: var(--ic-footer-background);\n  color: var(--ic-footer-text);\n\n  --ic-typography-color: var(--ic-footer-text);\n\n  border-bottom: var(--ic-space-1px) solid var(--ic-footer-keyline);\n}\n\n.footer-description-inner {\n  padding: 1rem 0;\n}\n\n/* Links */\n\n.footer-links {\n  padding: var(--footer-links-padding);\n  background-color: var(--ic-footer-background);\n  color: var(--ic-footer-link);\n\n  --ic-typography-color: var(--ic-footer-link);\n}\n\n.footer-links-inner {\n  display: flex;\n  flex-direction: var(--footer-link-inner-flex-direction);\n}\n\n/* Compliance */\n\n.footer-compliance {\n  background-color: var(--ic-footer-bottom-background);\n  color: var(--ic-footer-text);\n\n  --ic-typography-color: var(--ic-footer-text);\n}\n\n.footer-compliance-inner {\n  padding: var(--footer-compliance-padding);\n}\n\n.footer-logo {\n  margin-bottom: var(--footer-logo-margin-bottom);\n  display: flex;\n  gap: var(--ic-space-xxl);\n}\n\n.footer-logo > ::slotted() {\n  margin-right: var(--ic-space-md);\n}\n\n.footer-caption {\n  margin-bottom: var(--ic-space-md);\n}\n\n.classification-spacing {\n  margin-bottom: var(--ic-space-lg);\n}\n\n@media (forced-colors: active) {\n  footer {\n    border-top: var(--ic-border-hc);\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Prop,\n  State,\n  h,\n  Host,\n  Listen,\n} from \"@stencil/core\";\nimport { IC_DEVICE_SIZES } from \"../../utils/constants\";\nimport {\n  getCurrentDeviceSize,\n  getThemeForegroundColor,\n  checkResizeObserver,\n  hasClassificationBanner,\n  isSlotUsed,\n} from \"../../utils/helpers\";\nimport {\n  IcAlignment,\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport { IcFooterBreakpoints } from \"./ic-footer.types\";\n\n/**\n * @slot description - Content will be rendered at the top of the footer.\n * @slot link - Content will be rendered between description and logos.\n * @slot logo - Content will be rendered underneath footer links.\n * @slot caption - Content will be rendered above Crown Copyright.\n */\n\n@Component({\n  tag: \"ic-footer\",\n  styleUrl: \"ic-footer.css\",\n  shadow: true,\n})\nexport class Footer {\n  private footerEl: HTMLElement;\n  private resizeObserver: ResizeObserver = null;\n\n  @Element() el: HTMLIcFooterElement;\n\n  @State() deviceSize: number = IC_DEVICE_SIZES.XL;\n  @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n\n  /**\n   * The alignment of the section containers used within the footer.\n   */\n  @Prop() aligned?: IcAlignment = \"left\";\n\n  /**\n   * The screen size breakpoint at which to switch to the small layout.\n   */\n  @Prop() breakpoint?: IcFooterBreakpoints = \"medium\";\n\n  /**\n   * The caption displayed at the bottom of the footer.\n   */\n  @Prop() caption: string;\n\n  /**\n   * If `true`, the footer will display the crown copyright at the bottom.\n   */\n  @Prop() copyright: boolean = true;\n\n  /**\n   * The description displayed at the top of the footer.\n   */\n  @Prop() description: string;\n\n  /**\n   * If `true`, the footer will be set up to handle link groups instead of standalone links.\n   */\n  @Prop() groupLinks?: boolean = false;\n\n  /**\n   *  @internal Triggers on page resize and triggers style changes in footer links and link groups\n   */\n  @Event() footerResized: EventEmitter<void>;\n\n  disconnectedCallback(): void {\n    if (this.resizeObserver !== null) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  componentWillLoad(): void {\n    this.deviceSize = getCurrentDeviceSize();\n  }\n\n  componentDidLoad(): void {\n    checkResizeObserver(this.runResizeObserver);\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.foregroundColor = theme.mode;\n  }\n\n  private isSmall() {\n    const bp = this.breakpoint;\n\n    return bp === \"extra small\"\n      ? this.deviceSize < IC_DEVICE_SIZES.XS\n      : bp === \"small\"\n      ? this.deviceSize < IC_DEVICE_SIZES.S\n      : bp === \"medium\"\n      ? this.deviceSize < IC_DEVICE_SIZES.M\n      : bp === \"large\"\n      ? this.deviceSize < IC_DEVICE_SIZES.L\n      : bp === \"extra large\"\n      ? this.deviceSize < IC_DEVICE_SIZES.XL\n      : false;\n  }\n\n  private resizeObserverCallback = (currSize: number) => {\n    if (currSize !== this.deviceSize) {\n      this.deviceSize = currSize;\n    }\n    this.footerResized.emit();\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      const currSize = getCurrentDeviceSize();\n      this.resizeObserverCallback(currSize);\n    });\n\n    this.resizeObserver.observe(this.footerEl);\n  };\n\n  render() {\n    const {\n      aligned,\n      caption,\n      copyright,\n      description,\n      groupLinks,\n      foregroundColor,\n    } = this;\n    const small = this.isSmall();\n\n    return (\n      <Host\n        class={{\n          [\"ic-footer\"]: true,\n          [`ic-footer-${small ? \"small\" : \"sparse\"}`]: true,\n          [`ic-footer-${groupLinks ? \"grouped\" : \"ungrouped\"}`]: true,\n          [`ic-footer-foreground-${foregroundColor}`]: true,\n          // Slots will be able to infer their own color\n          [`ic-footer-${IcThemeForegroundEnum.Dark}`]:\n            foregroundColor === IcThemeForegroundEnum.Dark,\n          [`ic-footer-${IcThemeForegroundEnum.Light}`]:\n            foregroundColor === IcThemeForegroundEnum.Light,\n        }}\n      >\n        <footer ref={(footerEl) => (this.footerEl = footerEl)}>\n          {/* Description */}\n          {(isSlotUsed(this.el, \"description\") || description) && (\n            <div class=\"footer-description\">\n              <ic-section-container aligned={aligned} fullHeight={true}>\n                <div class=\"footer-description-inner\">\n                  <ic-typography variant=\"body\">\n                    <slot name=\"description\">{description}</slot>\n                  </ic-typography>\n                </div>\n              </ic-section-container>\n            </div>\n          )}\n\n          {/* Links */}\n          {isSlotUsed(this.el, \"link\") && (\n            <div class=\"footer-links\">\n              {groupLinks && small ? (\n                <div class=\"footer-links-inner\" role=\"list\">\n                  <slot name=\"link\" />\n                </div>\n              ) : (\n                <ic-section-container fullHeight aligned={aligned}>\n                  <div class=\"footer-links-inner\" role=\"list\">\n                    <slot name=\"link\" />\n                  </div>\n                </ic-section-container>\n              )}\n            </div>\n          )}\n\n          {/* Compliance (logo, caption, copyright) */}\n          <div class=\"footer-compliance\">\n            <ic-section-container aligned={aligned} fullHeight={true}>\n              <div class=\"footer-compliance-inner\">\n                {isSlotUsed(this.el, \"logo\") && (\n                  <div class=\"footer-logo\">\n                    {/* Logo */}\n                    <slot name=\"logo\" />\n                  </div>\n                )}\n                {(isSlotUsed(this.el, \"caption\") || caption) && (\n                  <div class=\"footer-caption\">\n                    <ic-typography\n                      variant={\n                        this.deviceSize <= IC_DEVICE_SIZES.M\n                          ? \"caption\"\n                          : \"body\"\n                      }\n                    >\n                      <slot name=\"caption\">{caption}</slot>\n                    </ic-typography>\n                  </div>\n                )}\n                {copyright && (\n                  <div\n                    class={{\n                      [\"footer-copyright\"]: true,\n                      [\"classification-spacing\"]: hasClassificationBanner(),\n                    }}\n                  >\n                    <ic-typography\n                      variant={\n                        this.deviceSize <= IC_DEVICE_SIZES.M\n                          ? \"caption-uppercase\"\n                          : \"label-uppercase\"\n                      }\n                    >\n                      &copy; Crown Copyright\n                    </ic-typography>\n                  </div>\n                )}\n              </div>\n            </ic-section-container>\n          </div>\n        </footer>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-footer.js","mappings":"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","names":[],"sources":["src/components/ic-footer/ic-footer.css?tag=ic-footer&encapsulation=shadow","src/components/ic-footer/ic-footer.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: block;\n\n  --footer-compliance-padding: 1rem 0;\n}\n\n:host(.ic-footer-sparse) {\n  --footer-links-padding: 1.5rem 0;\n  --footer-logo-margin-bottom: calc(var(--ic-space-md) + var(--ic-space-xxs));\n  --footer-link-inner-flex-direction: row;\n}\n\n:host(.ic-footer-small) {\n  --footer-links-padding: 0 0;\n  --footer-logo-margin-bottom: var(--ic-space-md);\n  --footer-link-inner-flex-direction: column;\n}\n\n:host(.ic-footer-foreground-dark) {\n  --ic-footer-background: var(--ic-brand-color-secondary-light);\n  --ic-footer-bottom-background: var(--ic-brand-color-tertiary-light);\n  --ic-footer-keyline: var(--ic-state-layer-darken-20);\n  --ic-footer-text: var(--ic-color-text-primary-light);\n  --ic-footer-link: var(--ic-color-text-primary-light);\n  --ic-footer-icon: var(--ic-color-icon-neutral);\n  --ic-footer-chevron-icon: var(--ic-color-icon-neutral);\n  --ic-footer-logo: var(--ic-color-icon-neutral);\n  --ic-footer-hover: var(--ic-architectural-700-state-layer-10);\n  --ic-footer-pressed: var(--ic-architectural-700-state-layer-20);\n}\n\n:host(.ic-footer-small.ic-footer-ungrouped) {\n  --footer-links-padding: var(--ic-space-md) 0 0 0;\n}\n\n/* Main inner footer element */\nfooter {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\n\n/* Description */\n\n.footer-description {\n  background-color: var(--ic-footer-background);\n  color: var(--ic-footer-text);\n\n  --ic-typography-color: var(--ic-footer-text);\n\n  border-bottom: var(--ic-space-1px) solid var(--ic-footer-keyline);\n}\n\n.footer-description-inner {\n  padding: 1rem 0;\n}\n\n/* Links */\n\n.footer-links {\n  padding: var(--footer-links-padding);\n  background-color: var(--ic-footer-background);\n  color: var(--ic-footer-link);\n\n  --ic-typography-color: var(--ic-footer-link);\n}\n\n.footer-links-inner {\n  display: flex;\n  flex-direction: var(--footer-link-inner-flex-direction);\n}\n\n/* Compliance */\n\n.footer-compliance {\n  background-color: var(--ic-footer-bottom-background);\n  color: var(--ic-footer-text);\n\n  --ic-typography-color: var(--ic-footer-text);\n}\n\n.footer-compliance-inner {\n  padding: var(--footer-compliance-padding);\n}\n\n.footer-logo {\n  margin-bottom: var(--footer-logo-margin-bottom);\n  display: flex;\n  gap: var(--ic-space-xxl);\n}\n\n.footer-logo > ::slotted() {\n  margin-right: var(--ic-space-md);\n}\n\n.footer-caption {\n  margin-bottom: var(--ic-space-md);\n}\n\n.classification-spacing {\n  margin-bottom: var(--ic-space-lg);\n}\n\n@media (forced-colors: active) {\n  footer {\n    border-top: var(--ic-border-hc);\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Prop,\n  State,\n  h,\n  Host,\n  Listen,\n} from \"@stencil/core\";\nimport { IC_DEVICE_SIZES } from \"../../utils/constants\";\nimport {\n  getCurrentDeviceSize,\n  getBrandForegroundAppearance,\n  checkResizeObserver,\n  hasClassificationBanner,\n  isSlotUsed,\n} from \"../../utils/helpers\";\nimport {\n  IcAlignment,\n  IcBrand,\n  IcBrandForeground,\n  IcBrandForegroundEnum,\n} from \"../../utils/types\";\nimport { IcFooterBreakpoints } from \"./ic-footer.types\";\n\n/**\n * @slot description - Content will be rendered at the top of the footer.\n * @slot link - Content will be rendered between description and logos.\n * @slot logo - Content will be rendered underneath footer links.\n * @slot caption - Content will be rendered above Crown Copyright.\n */\n\n@Component({\n  tag: \"ic-footer\",\n  styleUrl: \"ic-footer.css\",\n  shadow: true,\n})\nexport class Footer {\n  private footerEl: HTMLElement;\n  private resizeObserver: ResizeObserver = null;\n\n  @Element() el: HTMLIcFooterElement;\n\n  @State() deviceSize: number = IC_DEVICE_SIZES.XL;\n  @State() foregroundColor: IcBrandForeground = getBrandForegroundAppearance();\n\n  /**\n   * The alignment of the section containers used within the footer.\n   */\n  @Prop() aligned?: IcAlignment = \"left\";\n\n  /**\n   * The screen size breakpoint at which to switch to the small layout.\n   */\n  @Prop() breakpoint?: IcFooterBreakpoints = \"medium\";\n\n  /**\n   * The caption displayed at the bottom of the footer.\n   */\n  @Prop() caption: string;\n\n  /**\n   * If `true`, the footer will display the crown copyright at the bottom.\n   */\n  @Prop() copyright: boolean = true;\n\n  /**\n   * The description displayed at the top of the footer.\n   */\n  @Prop() description: string;\n\n  /**\n   * If `true`, the footer will be set up to handle link groups instead of standalone links.\n   */\n  @Prop() groupLinks?: boolean = false;\n\n  /**\n   *  @internal Triggers on page resize and triggers style changes in footer links and link groups\n   */\n  @Event() footerResized: EventEmitter<void>;\n\n  disconnectedCallback(): void {\n    if (this.resizeObserver !== null) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  componentWillLoad(): void {\n    this.deviceSize = getCurrentDeviceSize();\n  }\n\n  componentDidLoad(): void {\n    checkResizeObserver(this.runResizeObserver);\n  }\n\n  @Listen(\"brandChange\", { target: \"document\" })\n  brandChangeHandler(ev: CustomEvent<IcBrand>): void {\n    this.foregroundColor = ev.detail.mode;\n  }\n\n  private isSmall() {\n    const bp = this.breakpoint;\n\n    return bp === \"extra small\"\n      ? this.deviceSize < IC_DEVICE_SIZES.XS\n      : bp === \"small\"\n      ? this.deviceSize < IC_DEVICE_SIZES.S\n      : bp === \"medium\"\n      ? this.deviceSize < IC_DEVICE_SIZES.M\n      : bp === \"large\"\n      ? this.deviceSize < IC_DEVICE_SIZES.L\n      : bp === \"extra large\"\n      ? this.deviceSize < IC_DEVICE_SIZES.XL\n      : false;\n  }\n\n  private resizeObserverCallback = (currSize: number) => {\n    if (currSize !== this.deviceSize) {\n      this.deviceSize = currSize;\n    }\n    this.footerResized.emit();\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      const currSize = getCurrentDeviceSize();\n      this.resizeObserverCallback(currSize);\n    });\n\n    this.resizeObserver.observe(this.footerEl);\n  };\n\n  render() {\n    const {\n      aligned,\n      caption,\n      copyright,\n      description,\n      groupLinks,\n      foregroundColor,\n    } = this;\n    const small = this.isSmall();\n\n    return (\n      <Host\n        class={{\n          [\"ic-footer\"]: true,\n          [`ic-footer-${small ? \"small\" : \"sparse\"}`]: true,\n          [`ic-footer-${groupLinks ? \"grouped\" : \"ungrouped\"}`]: true,\n          [`ic-footer-foreground-${foregroundColor}`]: true,\n          // Slots will be able to infer their own color\n          [`ic-footer-${IcBrandForegroundEnum.Dark}`]:\n            foregroundColor === IcBrandForegroundEnum.Dark,\n          [`ic-footer-${IcBrandForegroundEnum.Light}`]:\n            foregroundColor === IcBrandForegroundEnum.Light,\n        }}\n      >\n        <footer ref={(footerEl) => (this.footerEl = footerEl)}>\n          {/* Description */}\n          {(isSlotUsed(this.el, \"description\") || description) && (\n            <div class=\"footer-description\">\n              <ic-section-container aligned={aligned} fullHeight={true}>\n                <div class=\"footer-description-inner\">\n                  <ic-typography variant=\"body\">\n                    <slot name=\"description\">{description}</slot>\n                  </ic-typography>\n                </div>\n              </ic-section-container>\n            </div>\n          )}\n\n          {/* Links */}\n          {isSlotUsed(this.el, \"link\") && (\n            <div class=\"footer-links\">\n              {groupLinks && small ? (\n                <div class=\"footer-links-inner\" role=\"list\">\n                  <slot name=\"link\" />\n                </div>\n              ) : (\n                <ic-section-container fullHeight aligned={aligned}>\n                  <div class=\"footer-links-inner\" role=\"list\">\n                    <slot name=\"link\" />\n                  </div>\n                </ic-section-container>\n              )}\n            </div>\n          )}\n\n          {/* Compliance (logo, caption, copyright) */}\n          <div class=\"footer-compliance\">\n            <ic-section-container aligned={aligned} fullHeight={true}>\n              <div class=\"footer-compliance-inner\">\n                {isSlotUsed(this.el, \"logo\") && (\n                  <div class=\"footer-logo\">\n                    {/* Logo */}\n                    <slot name=\"logo\" />\n                  </div>\n                )}\n                {(isSlotUsed(this.el, \"caption\") || caption) && (\n                  <div class=\"footer-caption\">\n                    <ic-typography\n                      variant={\n                        this.deviceSize <= IC_DEVICE_SIZES.M\n                          ? \"caption\"\n                          : \"body\"\n                      }\n                    >\n                      <slot name=\"caption\">{caption}</slot>\n                    </ic-typography>\n                  </div>\n                )}\n                {copyright && (\n                  <div\n                    class={{\n                      [\"footer-copyright\"]: true,\n                      [\"classification-spacing\"]: hasClassificationBanner(),\n                    }}\n                  >\n                    <ic-typography\n                      variant={\n                        this.deviceSize <= IC_DEVICE_SIZES.M\n                          ? \"caption-uppercase\"\n                          : \"label-uppercase\"\n                      }\n                    >\n                      &copy; Crown Copyright\n                    </ic-typography>\n                  </div>\n                )}\n              </div>\n            </ic-section-container>\n          </div>\n        </footer>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/ic-hero.js

@@ -1,9 +1,9 @@
 import { proxyCustomElement, HTMLElement, forceUpdate, h, Host } from '@stencil/core/internal/client';
-import { f as checkSlotInChildMutations, k as getThemeForegroundColor, B as slotHasContent, i as isSlotUsed, o as onComponentRequiredPropUndefined, e as IcThemeForegroundEnum, l as isPropDefined } from './helpers.js';
+import { f as checkSlotInChildMutations, k as getBrandForegroundAppearance, B as slotHasContent, i as isSlotUsed, o as onComponentRequiredPropUndefined, e as IcBrandForegroundEnum, l as isPropDefined } from './helpers.js';
 import { d as defineCustomElement$3 } from './ic-section-container2.js';
 import { d as defineCustomElement$2 } from './ic-typography2.js';
 
-const icHeroCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block;background-color:var(--ic-theme-tertiary);--hero-heading-bottom-margin:var(--ic-space-md);--hero-keyline:var(--ic-hero-keyline)}:host(.ic-hero-dark){background-color:var(--ic-theme-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-color-text-primary)}.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){background-repeat:no-repeat;background-position:right -6.25rem;background-size:auto calc(100% + 6.25rem);box-shadow:var(--ic-elevation-inset)}@media (prefers-reduced-motion){:host(.has-background-image){background-position:right -6.25rem !important}}ic-typography.heading-bottom-spacing{margin-bottom:var(--hero-heading-bottom-margin)}.section-container{display:flex;align-items:center;height:100%}.left-container{padding:var(--ic-space-xl) 0}.left-container:not(.left-container-full-width){flex-basis:50%}.left-container-full-width{width:100%}.right-container{flex-basis:50%}.interaction-container{display:flex;gap:var(--ic-space-md);margin-top:var(--ic-space-lg);flex-wrap:wrap}.secondary-subheading{margin-top:var(--ic-space-xxs)}:host([content-aligned=\"left\"]) .left-container,:host([content-aligned=\"left\"]) .interaction-container{justify-content:flex-start;text-align:left}:host([content-aligned=\"center\"]) .left-container,:host([content-aligned=\"center\"]) .interaction-container{justify-content:center;text-align:center}@media (min-width: 992px){.left-container-full-width{width:66.6%}}@media (min-width: 1044px){:host,.section-container{min-height:13rem}:host(.ic-hero-small),:host(.ic-hero-small) .section-container{min-height:10.813rem}.left-container:not(.left-container-full-width){flex-basis:66.6%}.left-container{min-height:9rem}.right-container{flex-basis:33.3%;margin-left:3.125rem}.secondary-container{min-height:9rem}.secondary-heading,.secondary-subheading{margin-left:3.938rem}}@media (min-width: 801px) and (max-width: 1043px){:host(.has-background-image){background-image:none !important}:host,.section-container{min-height:16rem}:host(.ic-hero-small),:host(.ic-hero-small) .section-container{min-height:15rem}:host(.secondary-heading),:host(.secondary-heading) .section-container{min-height:14rem}.left-container{min-height:10rem}.secondary-container{min-height:10rem}.secondary-heading,.secondary-subheading{margin-left:5.922rem}.right-container{margin-left:3.125rem}}@media (min-width: 641px) and (max-width: 800px){:host(.has-background-image){background-image:none !important}:host,.section-container{min-height:16rem}:host(.ic-hero-small),:host(.ic-hero-small) .section-container{min-height:15rem}:host(.secondary-heading),:host(.secondary-heading) .section-container{min-height:14rem}.left-container{min-height:10rem}.secondary-container{min-height:10rem}.secondary-heading,.secondary-subheading{margin-left:2.125rem}.right-container{margin-left:3.125rem}}@media (min-width: 481px) and (max-width: 640px){:host(.has-background-image){background-image:none !important}:host,.section-container{min-height:13rem}:host(.ic-hero-small),:host(.ic-hero-small) .section-container{min-height:10.813rem}:host(.secondary-heading),:host(.secondary-heading) .section-container{min-height:17.5rem}:host(.secondary-heading) .section-container,:host(.ic-hero-small) .section-container,.section-container{flex-direction:column;align-items:flex-start}.left-container{height:-moz-fit-content;height:fit-content}.secondary-container{height:-moz-fit-content;height:fit-content;border:none}.right-container{margin-bottom:2.5rem}}@media (max-width: 480px){:host(.has-background-image){background-image:none !important}:host,.section-container{min-height:12rem}:host,.right-container{margin-bottom:var(--ic-space-md)}:host(.ic-hero-small),:host(.ic-hero-small) .section-container{min-height:10.813rem}:host(.secondary-heading),:host(.secondary-heading) .section-container{min-height:16.5rem}:host(.secondary-heading) .section-container,:host(.ic-hero-small) .section-container,.section-container{flex-direction:column;align-items:flex-start}.left-container{height:-moz-fit-content;height:fit-content}.secondary-container{height:-moz-fit-content;height:fit-content;border:none}}";
+const icHeroCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block;background-color:var(--ic-brand-color-tertiary);--hero-heading-bottom-margin:var(--ic-space-md);--hero-keyline:var(--ic-hero-keyline)}: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){background-repeat:no-repeat;background-position:right -6.25rem;background-size:auto calc(100% + 6.25rem);box-shadow:var(--ic-elevation-inset)}@media (prefers-reduced-motion){:host(.has-background-image){background-position:right -6.25rem !important}}ic-typography.heading-bottom-spacing{margin-bottom:var(--hero-heading-bottom-margin)}.section-container{display:flex;align-items:center;height:100%}.left-container{padding:var(--ic-space-xl) 0}.left-container:not(.left-container-full-width){flex-basis:50%}.left-container-full-width{width:100%}.right-container{flex-basis:50%}.interaction-container{display:flex;gap:var(--ic-space-md);margin-top:var(--ic-space-lg);flex-wrap:wrap}.secondary-subheading{margin-top:var(--ic-space-xxs)}:host([content-aligned=\"left\"]) .left-container,:host([content-aligned=\"left\"]) .interaction-container{justify-content:flex-start;text-align:left}:host([content-aligned=\"center\"]) .left-container,:host([content-aligned=\"center\"]) .interaction-container{justify-content:center;text-align:center}@media (min-width: 992px){.left-container-full-width{width:66.6%}}@media (min-width: 1044px){:host,.section-container{min-height:13rem}:host(.ic-hero-small),:host(.ic-hero-small) .section-container{min-height:10.813rem}.left-container:not(.left-container-full-width){flex-basis:66.6%}.left-container{min-height:9rem}.right-container{flex-basis:33.3%;margin-left:3.125rem}.secondary-container{min-height:9rem}.secondary-heading,.secondary-subheading{margin-left:3.938rem}}@media (min-width: 801px) and (max-width: 1043px){:host(.has-background-image){background-image:none !important}:host,.section-container{min-height:16rem}:host(.ic-hero-small),:host(.ic-hero-small) .section-container{min-height:15rem}:host(.secondary-heading),:host(.secondary-heading) .section-container{min-height:14rem}.left-container{min-height:10rem}.secondary-container{min-height:10rem}.secondary-heading,.secondary-subheading{margin-left:5.922rem}.right-container{margin-left:3.125rem}}@media (min-width: 641px) and (max-width: 800px){:host(.has-background-image){background-image:none !important}:host,.section-container{min-height:16rem}:host(.ic-hero-small),:host(.ic-hero-small) .section-container{min-height:15rem}:host(.secondary-heading),:host(.secondary-heading) .section-container{min-height:14rem}.left-container{min-height:10rem}.secondary-container{min-height:10rem}.secondary-heading,.secondary-subheading{margin-left:2.125rem}.right-container{margin-left:3.125rem}}@media (min-width: 481px) and (max-width: 640px){:host(.has-background-image){background-image:none !important}:host,.section-container{min-height:13rem}:host(.ic-hero-small),:host(.ic-hero-small) .section-container{min-height:10.813rem}:host(.secondary-heading),:host(.secondary-heading) .section-container{min-height:17.5rem}:host(.secondary-heading) .section-container,:host(.ic-hero-small) .section-container,.section-container{flex-direction:column;align-items:flex-start}.left-container{height:-moz-fit-content;height:fit-content}.secondary-container{height:-moz-fit-content;height:fit-content;border:none}.right-container{margin-bottom:2.5rem}}@media (max-width: 480px){:host(.has-background-image){background-image:none !important}:host,.section-container{min-height:12rem}:host,.right-container{margin-bottom:var(--ic-space-md)}:host(.ic-hero-small),:host(.ic-hero-small) .section-container{min-height:10.813rem}:host(.secondary-heading),:host(.secondary-heading) .section-container{min-height:16.5rem}:host(.secondary-heading) .section-container,:host(.ic-hero-small) .section-container,.section-container{flex-direction:column;align-items:flex-start}.left-container{height:-moz-fit-content;height:fit-content}.secondary-container{height:-moz-fit-content;height:fit-content;border:none}}";
 
 const Hero = /*@__PURE__*/ proxyCustomElement(class Hero extends HTMLElement {
     constructor() {
@@ -18,7 +18,7 @@ const Hero = /*@__PURE__*/ proxyCustomElement(class Hero extends HTMLElement {
                 forceUpdate(this);
             }
         };
-        this.foregroundColor = getThemeForegroundColor();
+        this.foregroundColor = getBrandForegroundAppearance();
         this.rightContent = false;
         this.leftContentFullWidth = !this.rightContent && this.secondaryHeading === undefined;
         this.scrollFactor = "right -100px";
@@ -50,9 +50,8 @@ const Hero = /*@__PURE__*/ proxyCustomElement(class Hero extends HTMLElement {
     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) {
@@ -73,7 +72,7 @@ const Hero = /*@__PURE__*/ proxyCustomElement(class Hero extends HTMLElement {
             };
         }
         return (h(Host, { class: {
-                [`ic-hero-${IcThemeForegroundEnum.Dark}`]: foregroundColor === IcThemeForegroundEnum.Dark,
+                [`ic-hero-${IcBrandForegroundEnum.Dark}`]: foregroundColor === IcBrandForegroundEnum.Dark,
                 ["has-background-image"]: backgroundImage !== undefined,
                 ["ic-hero-small"]: size === "small",
                 ["secondary-heading"]: !!secondaryHeading,
@@ -100,7 +99,7 @@ const Hero = /*@__PURE__*/ proxyCustomElement(class Hero extends HTMLElement {
         "rightContent": [32],
         "leftContentFullWidth": [32],
         "scrollFactor": [32]
-    }, [[4, "themeChange", "themeChangeHandler"], [5, "scroll", "doScroll"]]]);
+    }, [[4, "brandChange", "brandChangeHandler"], [5, "scroll", "doScroll"]]]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;

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

@@ -1 +1 @@
-{"file":"ic-hero.js","mappings":"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","names":[],"sources":["src/components/ic-hero/ic-hero.css?tag=ic-hero&encapsulation=shadow","src/components/ic-hero/ic-hero.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: block;\n  background-color: var(--ic-theme-tertiary);\n\n  --hero-heading-bottom-margin: var(--ic-space-md);\n  --hero-keyline: var(--ic-hero-keyline);\n}\n\n:host(.ic-hero-dark) {\n  background-color: var(--ic-theme-secondary);\n\n  --ic-hero-heading: var(--ic-color-text-primary-light);\n  --ic-hero-body: var(--ic-color-text-primary-light);\n  --ic-hero-secondary-heading: var(--ic-color-text-primary-light);\n  --hero-keyline: var(--ic-color-text-primary);\n}\n\n.heading {\n  --ic-typography-color: var(--ic-hero-heading);\n}\n\n.subheading {\n  --ic-typography-color: var(--ic-hero-body);\n}\n\n.secondary-container {\n  --ic-typography-color: var(--ic-hero-secondary-heading);\n\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  border-left: var(--ic-space-xxxs) solid var(--hero-keyline);\n}\n\n:host(.has-background-image) {\n  background-repeat: no-repeat;\n  background-position: right -6.25rem;\n  background-size: auto calc(100% + 6.25rem);\n  box-shadow: var(--ic-elevation-inset);\n}\n\n@media (prefers-reduced-motion) {\n  :host(.has-background-image) {\n    background-position: right -6.25rem !important;\n  }\n}\n\nic-typography.heading-bottom-spacing {\n  margin-bottom: var(--hero-heading-bottom-margin);\n}\n\n.section-container {\n  display: flex;\n  align-items: center;\n  height: 100%;\n}\n\n.left-container {\n  padding: var(--ic-space-xl) 0;\n}\n\n.left-container:not(.left-container-full-width) {\n  flex-basis: 50%;\n}\n\n.left-container-full-width {\n  width: 100%;\n}\n\n.right-container {\n  flex-basis: 50%;\n}\n\n.interaction-container {\n  display: flex;\n  gap: var(--ic-space-md);\n  margin-top: var(--ic-space-lg);\n  flex-wrap: wrap;\n}\n\n.secondary-subheading {\n  margin-top: var(--ic-space-xxs);\n}\n\n:host([content-aligned=\"left\"]) .left-container,\n:host([content-aligned=\"left\"]) .interaction-container {\n  justify-content: flex-start;\n  text-align: left;\n}\n\n:host([content-aligned=\"center\"]) .left-container,\n:host([content-aligned=\"center\"]) .interaction-container {\n  justify-content: center;\n  text-align: center;\n}\n\n@media (min-width: 992px) {\n  .left-container-full-width {\n    width: 66.6%;\n  }\n}\n\n@media (min-width: 1044px) {\n  :host,\n  .section-container {\n    min-height: 13rem;\n  }\n\n  :host(.ic-hero-small),\n  :host(.ic-hero-small) .section-container {\n    min-height: 10.813rem;\n  }\n\n  .left-container:not(.left-container-full-width) {\n    flex-basis: 66.6%;\n  }\n\n  .left-container {\n    min-height: 9rem;\n  }\n\n  .right-container {\n    flex-basis: 33.3%;\n    margin-left: 3.125rem;\n  }\n\n  .secondary-container {\n    min-height: 9rem;\n  }\n\n  .secondary-heading,\n  .secondary-subheading {\n    margin-left: 3.938rem;\n  }\n}\n\n@media (min-width: 801px) and (max-width: 1043px) {\n  :host(.has-background-image) {\n    background-image: none !important;\n  }\n\n  :host,\n  .section-container {\n    min-height: 16rem;\n  }\n\n  :host(.ic-hero-small),\n  :host(.ic-hero-small) .section-container {\n    min-height: 15rem;\n  }\n\n  :host(.secondary-heading),\n  :host(.secondary-heading) .section-container {\n    min-height: 14rem;\n  }\n\n  .left-container {\n    min-height: 10rem;\n  }\n\n  .secondary-container {\n    min-height: 10rem;\n  }\n\n  .secondary-heading,\n  .secondary-subheading {\n    margin-left: 5.922rem;\n  }\n\n  .right-container {\n    margin-left: 3.125rem;\n  }\n}\n\n@media (min-width: 641px) and (max-width: 800px) {\n  :host(.has-background-image) {\n    background-image: none !important;\n  }\n\n  :host,\n  .section-container {\n    min-height: 16rem;\n  }\n\n  :host(.ic-hero-small),\n  :host(.ic-hero-small) .section-container {\n    min-height: 15rem;\n  }\n\n  :host(.secondary-heading),\n  :host(.secondary-heading) .section-container {\n    min-height: 14rem;\n  }\n\n  .left-container {\n    min-height: 10rem;\n  }\n\n  .secondary-container {\n    min-height: 10rem;\n  }\n\n  .secondary-heading,\n  .secondary-subheading {\n    margin-left: 2.125rem;\n  }\n\n  .right-container {\n    margin-left: 3.125rem;\n  }\n}\n\n@media (min-width: 481px) and (max-width: 640px) {\n  :host(.has-background-image) {\n    background-image: none !important;\n  }\n\n  :host,\n  .section-container {\n    min-height: 13rem;\n  }\n\n  :host(.ic-hero-small),\n  :host(.ic-hero-small) .section-container {\n    min-height: 10.813rem;\n  }\n\n  :host(.secondary-heading),\n  :host(.secondary-heading) .section-container {\n    min-height: 17.5rem;\n  }\n\n  :host(.secondary-heading) .section-container,\n  :host(.ic-hero-small) .section-container,\n  .section-container {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  .left-container {\n    height: fit-content;\n  }\n\n  .secondary-container {\n    height: fit-content;\n    border: none;\n  }\n\n  .right-container {\n    margin-bottom: 2.5rem;\n  }\n}\n\n@media (max-width: 480px) {\n  :host(.has-background-image) {\n    background-image: none !important;\n  }\n\n  :host,\n  .section-container {\n    min-height: 12rem;\n  }\n\n  :host,\n  .right-container {\n    margin-bottom: var(--ic-space-md);\n  }\n\n  :host(.ic-hero-small),\n  :host(.ic-hero-small) .section-container {\n    min-height: 10.813rem;\n  }\n\n  :host(.secondary-heading),\n  :host(.secondary-heading) .section-container {\n    min-height: 16.5rem;\n  }\n\n  :host(.secondary-heading) .section-container,\n  :host(.ic-hero-small) .section-container,\n  .section-container {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  .left-container {\n    height: fit-content;\n  }\n\n  .secondary-container {\n    height: fit-content;\n    border: none;\n  }\n}\n","import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  h,\n  State,\n  Listen,\n  forceUpdate,\n} from \"@stencil/core\";\nimport {\n  IcAlignment,\n  IcSizesNoLarge,\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport {\n  slotHasContent,\n  getThemeForegroundColor,\n  onComponentRequiredPropUndefined,\n  isPropDefined,\n  isSlotUsed,\n  checkSlotInChildMutations,\n} from \"../../utils/helpers\";\nimport { IcHeroContentAlignments } from \"./ic-hero.types\";\n\n/**\n * @slot heading - Content will be rendered in the title area, in place of the heading.\n * @slot subheading - Content will be rendered in the title area, in place of the subheading.\n * @slot interaction - Content will be rendered in the interaction area, adjacent to the title area.\n * @slot secondary - Content will be rendered in the secondary content area.\n */\n\n@Component({\n  tag: \"ic-hero\",\n  styleUrl: \"ic-hero.css\",\n  shadow: true,\n})\nexport class Hero {\n  private hostMutationObserver: MutationObserver = null;\n\n  @Element() el: HTMLIcHeroElement;\n\n  @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n  @State() rightContent: boolean = false;\n  // set by above state\n  @State() leftContentFullWidth: boolean =\n    !this.rightContent && this.secondaryHeading === undefined;\n  @State() scrollFactor: string = \"right -100px\";\n\n  /**\n   * The alignment of the hero.\n   */\n  @Prop() aligned: IcAlignment = \"left\";\n\n  /**\n   * The optional background image.\n   */\n  @Prop() backgroundImage?: string;\n\n  /**\n   * The alignment of the hero content.\n   */\n  @Prop() contentAligned: IcHeroContentAlignments = \"left\";\n\n  /**\n   * If `true`, the background image (if set) will not scroll using a parallax effect.\n   */\n  @Prop() disableBackgroundParallax?: boolean = false;\n\n  /**\n   * The heading of the hero. An <h2> level heading.\n   */\n  @Prop() heading: string;\n\n  /**\n   * The optional secondary heading, an <h3> level heading. Replaced by slotted right content.\n   */\n  @Prop() secondaryHeading?: string;\n\n  /**\n   * The optional secondary subheading, replaced by slotted right content.\n   */\n  @Prop() secondarySubheading?: string;\n\n  /**\n   * The size of the hero component.\n   */\n  @Prop() size?: IcSizesNoLarge = \"medium\";\n\n  /**\n   * The description for the hero.\n   */\n  @Prop() subheading?: string;\n\n  disconnectedCallback(): void {\n    this.hostMutationObserver?.disconnect();\n  }\n\n  componentWillLoad(): void {\n    this.rightContent = slotHasContent(this.el, \"secondary\");\n  }\n\n  componentDidLoad(): void {\n    !isSlotUsed(this.el, \"heading\") &&\n      onComponentRequiredPropUndefined(\n        [{ prop: this.heading, propName: \"heading\" }],\n        \"Hero\"\n      );\n\n    this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n    this.hostMutationObserver.observe(this.el, {\n      childList: true,\n    });\n  }\n\n  componentWillRender(): void {\n    this.rightContent = slotHasContent(this.el, \"secondary\");\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.foregroundColor = theme.mode;\n  }\n\n  @Listen(\"scroll\", { target: \"document\" })\n  doScroll(): void {\n    if (this.disableBackgroundParallax) {\n      return;\n    }\n\n    const scrolltotop = document.scrollingElement.scrollTop;\n    const factor = 0.4;\n    const y = -100 + scrolltotop * factor;\n    this.scrollFactor = \"right \" + y + \"px\";\n  }\n\n  private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n    if (\n      mutationList.some(({ type, addedNodes, removedNodes }) =>\n        type === \"childList\"\n          ? checkSlotInChildMutations(addedNodes, removedNodes, \"secondary\")\n          : false\n      )\n    ) {\n      forceUpdate(this);\n    }\n  };\n\n  render() {\n    const {\n      aligned,\n      size,\n      heading,\n      subheading,\n      secondaryHeading,\n      secondarySubheading,\n      foregroundColor,\n      backgroundImage,\n      scrollFactor,\n    } = this;\n\n    let style = {};\n\n    if (isPropDefined(backgroundImage)) {\n      style = {\n        \"background-image\": \"url(\" + backgroundImage + \")\",\n        \"background-position\": scrollFactor,\n      };\n    }\n\n    return (\n      <Host\n        class={{\n          [`ic-hero-${IcThemeForegroundEnum.Dark}`]:\n            foregroundColor === IcThemeForegroundEnum.Dark,\n          [\"has-background-image\"]: backgroundImage !== undefined,\n          [\"ic-hero-small\"]: size === \"small\",\n          [\"secondary-heading\"]: !!secondaryHeading,\n        }}\n        style={style}\n      >\n        <ic-section-container\n          aligned={aligned}\n          fullHeight\n          class=\"section-container\"\n        >\n          <div\n            class={{\n              [\"left-container\"]: true,\n              [\"left-container-full-width\"]: this.leftContentFullWidth,\n            }}\n          >\n            <div class=\"heading\">\n              <slot name=\"heading\">\n                <ic-typography\n                  variant={size === \"small\" ? \"h2\" : \"h1\"}\n                  class={{\n                    [\"heading-bottom-spacing\"]: size !== \"small\",\n                  }}\n                >\n                  <h2>{heading}</h2>\n                </ic-typography>\n              </slot>\n            </div>\n            <div class=\"subheading\">\n              <slot name=\"subheading\">\n                <ic-typography variant=\"body\">{subheading}</ic-typography>\n              </slot>\n            </div>\n            <div class=\"interaction-container\">\n              <slot name=\"interaction\"></slot>\n            </div>\n          </div>\n          {(isPropDefined(secondaryHeading) || this.rightContent) && (\n            <div class=\"right-container\">\n              <slot name=\"secondary\">\n                {secondaryHeading && (\n                  <div class=\"secondary-container\">\n                    <div class=\"secondary-heading\">\n                      <ic-typography variant=\"h4\">\n                        <h3>{secondaryHeading}</h3>\n                      </ic-typography>\n                    </div>\n                    <div class=\"secondary-subheading\">\n                      <ic-typography variant=\"subtitle-small\">\n                        {secondarySubheading}\n                      </ic-typography>\n                    </div>\n                  </div>\n                )}\n              </slot>\n            </div>\n          )}\n        </ic-section-container>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-hero.js","mappings":"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","names":[],"sources":["src/components/ic-hero/ic-hero.css?tag=ic-hero&encapsulation=shadow","src/components/ic-hero/ic-hero.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: block;\n  background-color: var(--ic-brand-color-tertiary);\n\n  --hero-heading-bottom-margin: var(--ic-space-md);\n  --hero-keyline: var(--ic-hero-keyline);\n}\n\n:host(.ic-hero-dark) {\n  background-color: var(--ic-brand-color-secondary);\n\n  --ic-hero-heading: var(--ic-color-text-primary-light);\n  --ic-hero-body: var(--ic-color-text-primary-light);\n  --ic-hero-secondary-heading: var(--ic-color-text-primary-light);\n  --hero-keyline: var(--ic-brand-text-color);\n}\n\n.heading {\n  --ic-typography-color: var(--ic-hero-heading);\n}\n\n.subheading {\n  --ic-typography-color: var(--ic-hero-body);\n}\n\n.secondary-container {\n  --ic-typography-color: var(--ic-hero-secondary-heading);\n\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  border-left: var(--ic-space-xxxs) solid var(--hero-keyline);\n}\n\n:host(.has-background-image) {\n  background-repeat: no-repeat;\n  background-position: right -6.25rem;\n  background-size: auto calc(100% + 6.25rem);\n  box-shadow: var(--ic-elevation-inset);\n}\n\n@media (prefers-reduced-motion) {\n  :host(.has-background-image) {\n    background-position: right -6.25rem !important;\n  }\n}\n\nic-typography.heading-bottom-spacing {\n  margin-bottom: var(--hero-heading-bottom-margin);\n}\n\n.section-container {\n  display: flex;\n  align-items: center;\n  height: 100%;\n}\n\n.left-container {\n  padding: var(--ic-space-xl) 0;\n}\n\n.left-container:not(.left-container-full-width) {\n  flex-basis: 50%;\n}\n\n.left-container-full-width {\n  width: 100%;\n}\n\n.right-container {\n  flex-basis: 50%;\n}\n\n.interaction-container {\n  display: flex;\n  gap: var(--ic-space-md);\n  margin-top: var(--ic-space-lg);\n  flex-wrap: wrap;\n}\n\n.secondary-subheading {\n  margin-top: var(--ic-space-xxs);\n}\n\n:host([content-aligned=\"left\"]) .left-container,\n:host([content-aligned=\"left\"]) .interaction-container {\n  justify-content: flex-start;\n  text-align: left;\n}\n\n:host([content-aligned=\"center\"]) .left-container,\n:host([content-aligned=\"center\"]) .interaction-container {\n  justify-content: center;\n  text-align: center;\n}\n\n@media (min-width: 992px) {\n  .left-container-full-width {\n    width: 66.6%;\n  }\n}\n\n@media (min-width: 1044px) {\n  :host,\n  .section-container {\n    min-height: 13rem;\n  }\n\n  :host(.ic-hero-small),\n  :host(.ic-hero-small) .section-container {\n    min-height: 10.813rem;\n  }\n\n  .left-container:not(.left-container-full-width) {\n    flex-basis: 66.6%;\n  }\n\n  .left-container {\n    min-height: 9rem;\n  }\n\n  .right-container {\n    flex-basis: 33.3%;\n    margin-left: 3.125rem;\n  }\n\n  .secondary-container {\n    min-height: 9rem;\n  }\n\n  .secondary-heading,\n  .secondary-subheading {\n    margin-left: 3.938rem;\n  }\n}\n\n@media (min-width: 801px) and (max-width: 1043px) {\n  :host(.has-background-image) {\n    background-image: none !important;\n  }\n\n  :host,\n  .section-container {\n    min-height: 16rem;\n  }\n\n  :host(.ic-hero-small),\n  :host(.ic-hero-small) .section-container {\n    min-height: 15rem;\n  }\n\n  :host(.secondary-heading),\n  :host(.secondary-heading) .section-container {\n    min-height: 14rem;\n  }\n\n  .left-container {\n    min-height: 10rem;\n  }\n\n  .secondary-container {\n    min-height: 10rem;\n  }\n\n  .secondary-heading,\n  .secondary-subheading {\n    margin-left: 5.922rem;\n  }\n\n  .right-container {\n    margin-left: 3.125rem;\n  }\n}\n\n@media (min-width: 641px) and (max-width: 800px) {\n  :host(.has-background-image) {\n    background-image: none !important;\n  }\n\n  :host,\n  .section-container {\n    min-height: 16rem;\n  }\n\n  :host(.ic-hero-small),\n  :host(.ic-hero-small) .section-container {\n    min-height: 15rem;\n  }\n\n  :host(.secondary-heading),\n  :host(.secondary-heading) .section-container {\n    min-height: 14rem;\n  }\n\n  .left-container {\n    min-height: 10rem;\n  }\n\n  .secondary-container {\n    min-height: 10rem;\n  }\n\n  .secondary-heading,\n  .secondary-subheading {\n    margin-left: 2.125rem;\n  }\n\n  .right-container {\n    margin-left: 3.125rem;\n  }\n}\n\n@media (min-width: 481px) and (max-width: 640px) {\n  :host(.has-background-image) {\n    background-image: none !important;\n  }\n\n  :host,\n  .section-container {\n    min-height: 13rem;\n  }\n\n  :host(.ic-hero-small),\n  :host(.ic-hero-small) .section-container {\n    min-height: 10.813rem;\n  }\n\n  :host(.secondary-heading),\n  :host(.secondary-heading) .section-container {\n    min-height: 17.5rem;\n  }\n\n  :host(.secondary-heading) .section-container,\n  :host(.ic-hero-small) .section-container,\n  .section-container {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  .left-container {\n    height: fit-content;\n  }\n\n  .secondary-container {\n    height: fit-content;\n    border: none;\n  }\n\n  .right-container {\n    margin-bottom: 2.5rem;\n  }\n}\n\n@media (max-width: 480px) {\n  :host(.has-background-image) {\n    background-image: none !important;\n  }\n\n  :host,\n  .section-container {\n    min-height: 12rem;\n  }\n\n  :host,\n  .right-container {\n    margin-bottom: var(--ic-space-md);\n  }\n\n  :host(.ic-hero-small),\n  :host(.ic-hero-small) .section-container {\n    min-height: 10.813rem;\n  }\n\n  :host(.secondary-heading),\n  :host(.secondary-heading) .section-container {\n    min-height: 16.5rem;\n  }\n\n  :host(.secondary-heading) .section-container,\n  :host(.ic-hero-small) .section-container,\n  .section-container {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  .left-container {\n    height: fit-content;\n  }\n\n  .secondary-container {\n    height: fit-content;\n    border: none;\n  }\n}\n","import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  h,\n  State,\n  Listen,\n  forceUpdate,\n} from \"@stencil/core\";\nimport {\n  IcAlignment,\n  IcSizesNoLarge,\n  IcBrand,\n  IcBrandForeground,\n  IcBrandForegroundEnum,\n} from \"../../utils/types\";\nimport {\n  slotHasContent,\n  getBrandForegroundAppearance,\n  onComponentRequiredPropUndefined,\n  isPropDefined,\n  isSlotUsed,\n  checkSlotInChildMutations,\n} from \"../../utils/helpers\";\nimport { IcHeroContentAlignments } from \"./ic-hero.types\";\n\n/**\n * @slot heading - Content will be rendered in the title area, in place of the heading.\n * @slot subheading - Content will be rendered in the title area, in place of the subheading.\n * @slot interaction - Content will be rendered in the interaction area, adjacent to the title area.\n * @slot secondary - Content will be rendered in the secondary content area.\n */\n\n@Component({\n  tag: \"ic-hero\",\n  styleUrl: \"ic-hero.css\",\n  shadow: true,\n})\nexport class Hero {\n  private hostMutationObserver: MutationObserver = null;\n\n  @Element() el: HTMLIcHeroElement;\n\n  @State() foregroundColor: IcBrandForeground = getBrandForegroundAppearance();\n  @State() rightContent: boolean = false;\n  // set by above state\n  @State() leftContentFullWidth: boolean =\n    !this.rightContent && this.secondaryHeading === undefined;\n  @State() scrollFactor: string = \"right -100px\";\n\n  /**\n   * The alignment of the hero.\n   */\n  @Prop() aligned: IcAlignment = \"left\";\n\n  /**\n   * The optional background image.\n   */\n  @Prop() backgroundImage?: string;\n\n  /**\n   * The alignment of the hero content.\n   */\n  @Prop() contentAligned: IcHeroContentAlignments = \"left\";\n\n  /**\n   * If `true`, the background image (if set) will not scroll using a parallax effect.\n   */\n  @Prop() disableBackgroundParallax?: boolean = false;\n\n  /**\n   * The heading of the hero. An <h2> level heading.\n   */\n  @Prop() heading: string;\n\n  /**\n   * The optional secondary heading, an <h3> level heading. Replaced by slotted right content.\n   */\n  @Prop() secondaryHeading?: string;\n\n  /**\n   * The optional secondary subheading, replaced by slotted right content.\n   */\n  @Prop() secondarySubheading?: string;\n\n  /**\n   * The size of the hero component.\n   */\n  @Prop() size?: IcSizesNoLarge = \"medium\";\n\n  /**\n   * The description for the hero.\n   */\n  @Prop() subheading?: string;\n\n  disconnectedCallback(): void {\n    this.hostMutationObserver?.disconnect();\n  }\n\n  componentWillLoad(): void {\n    this.rightContent = slotHasContent(this.el, \"secondary\");\n  }\n\n  componentDidLoad(): void {\n    !isSlotUsed(this.el, \"heading\") &&\n      onComponentRequiredPropUndefined(\n        [{ prop: this.heading, propName: \"heading\" }],\n        \"Hero\"\n      );\n\n    this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n    this.hostMutationObserver.observe(this.el, {\n      childList: true,\n    });\n  }\n\n  componentWillRender(): void {\n    this.rightContent = slotHasContent(this.el, \"secondary\");\n  }\n\n  @Listen(\"brandChange\", { target: \"document\" })\n  brandChangeHandler(ev: CustomEvent<IcBrand>): void {\n    this.foregroundColor = ev.detail.mode;\n  }\n\n  @Listen(\"scroll\", { target: \"document\" })\n  doScroll(): void {\n    if (this.disableBackgroundParallax) {\n      return;\n    }\n\n    const scrolltotop = document.scrollingElement.scrollTop;\n    const factor = 0.4;\n    const y = -100 + scrolltotop * factor;\n    this.scrollFactor = \"right \" + y + \"px\";\n  }\n\n  private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n    if (\n      mutationList.some(({ type, addedNodes, removedNodes }) =>\n        type === \"childList\"\n          ? checkSlotInChildMutations(addedNodes, removedNodes, \"secondary\")\n          : false\n      )\n    ) {\n      forceUpdate(this);\n    }\n  };\n\n  render() {\n    const {\n      aligned,\n      size,\n      heading,\n      subheading,\n      secondaryHeading,\n      secondarySubheading,\n      foregroundColor,\n      backgroundImage,\n      scrollFactor,\n    } = this;\n\n    let style = {};\n\n    if (isPropDefined(backgroundImage)) {\n      style = {\n        \"background-image\": \"url(\" + backgroundImage + \")\",\n        \"background-position\": scrollFactor,\n      };\n    }\n\n    return (\n      <Host\n        class={{\n          [`ic-hero-${IcBrandForegroundEnum.Dark}`]:\n            foregroundColor === IcBrandForegroundEnum.Dark,\n          [\"has-background-image\"]: backgroundImage !== undefined,\n          [\"ic-hero-small\"]: size === \"small\",\n          [\"secondary-heading\"]: !!secondaryHeading,\n        }}\n        style={style}\n      >\n        <ic-section-container\n          aligned={aligned}\n          fullHeight\n          class=\"section-container\"\n        >\n          <div\n            class={{\n              [\"left-container\"]: true,\n              [\"left-container-full-width\"]: this.leftContentFullWidth,\n            }}\n          >\n            <div class=\"heading\">\n              <slot name=\"heading\">\n                <ic-typography\n                  variant={size === \"small\" ? \"h2\" : \"h1\"}\n                  class={{\n                    [\"heading-bottom-spacing\"]: size !== \"small\",\n                  }}\n                >\n                  <h2>{heading}</h2>\n                </ic-typography>\n              </slot>\n            </div>\n            <div class=\"subheading\">\n              <slot name=\"subheading\">\n                <ic-typography variant=\"body\">{subheading}</ic-typography>\n              </slot>\n            </div>\n            <div class=\"interaction-container\">\n              <slot name=\"interaction\"></slot>\n            </div>\n          </div>\n          {(isPropDefined(secondaryHeading) || this.rightContent) && (\n            <div class=\"right-container\">\n              <slot name=\"secondary\">\n                {secondaryHeading && (\n                  <div class=\"secondary-container\">\n                    <div class=\"secondary-heading\">\n                      <ic-typography variant=\"h4\">\n                        <h3>{secondaryHeading}</h3>\n                      </ic-typography>\n                    </div>\n                    <div class=\"secondary-subheading\">\n                      <ic-typography variant=\"subtitle-small\">\n                        {secondarySubheading}\n                      </ic-typography>\n                    </div>\n                  </div>\n                )}\n              </slot>\n            </div>\n          )}\n        </ic-section-container>\n      </Host>\n    );\n  }\n}\n"],"version":3}