@ukic/web-components 3.0.0 → 3.1.0

package/dist/components/ic-divider2.js

@@ -1,39 +1,135 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { n as getThemeForegroundColor } from './helpers.js';
-import { I as IcThemeForegroundEnum } from './types.js';
+import { k as getBrandForegroundAppearance, l as isPropDefined, C as slotHasContent } from './helpers.js';
+import { d as defineCustomElement$1 } from './ic-typography2.js';
 
-const icDividerCss = "hr.sc-ic-divider{padding:0;margin:0;border:none;height:var(--ic-space-1px);background-color:var(--ic-keyline-darken-rgb)}hr.light.sc-ic-divider{background-color:var(--ic-keyline-lighten-rgb)}";
+const icDividerCss = ".ic-divider-horizontal.sc-ic-divider-h{display:flex;width:var(--ic-divider-horizontal-width, 100%);align-items:center;-moz-column-gap:var(--ic-space-xxs);column-gap:var(--ic-space-xxs)}hr.sc-ic-divider{padding:0;margin:0;border:none;border-bottom:solid var(--ic-space-1px) var(--ic-divider-background);width:inherit}.ic-divider-horizontal.sc-ic-divider-h::before,.ic-divider-horizontal.sc-ic-divider-h::after{border-left:none !important}.ic-divider-horizontal[label-placement=\"right\"].sc-ic-divider-h::before,.ic-divider-horizontal[label-placement=\"center\"].sc-ic-divider-h::before,.ic-divider-horizontal[label-placement=\"left\"].sc-ic-divider-h::after,.ic-divider-horizontal[label-placement=\"center\"].sc-ic-divider-h::after{content:\"\";border:none;width:100%}.ic-divider-vertical.sc-ic-divider-h{display:flex;flex-direction:column;height:var(--ic-divider-vertical-height, inherit);width:-moz-max-content;width:max-content;align-items:center;-moz-column-gap:var(--ic-space-xxs);column-gap:var(--ic-space-xxs);border:none}.ic-divider-vertical.sc-ic-divider-h div.vertical-divider.sc-ic-divider{display:flex;height:inherit}.ic-divider-vertical[label-placement=\"bottom\"].sc-ic-divider-h::before,.ic-divider-vertical[label-placement=\"center\"].sc-ic-divider-h::before,.ic-divider-vertical[label-placement=\"top\"].sc-ic-divider-h::after,.ic-divider-vertical[label-placement=\"center\"].sc-ic-divider-h::after{content:\"\";height:100%}hr.sc-ic-divider,.ic-divider-horizontal[label-placement=\"right\"].sc-ic-divider-h::before,.ic-divider-horizontal[label-placement=\"center\"].sc-ic-divider-h::before,.ic-divider-horizontal[label-placement=\"left\"].sc-ic-divider-h::after,.ic-divider-horizontal[label-placement=\"center\"].sc-ic-divider-h::after{border-bottom:solid var(--ic-space-1px) var(--ic-divider-background)}.ic-divider-monochrome.sc-ic-divider-h hr.sc-ic-divider,.ic-divider-monochrome.ic-divider-horizontal[label-placement=\"right\"].sc-ic-divider-h::before,.ic-divider-monochrome.ic-divider-horizontal[label-placement=\"center\"].sc-ic-divider-h::before,.ic-divider-monochrome.ic-divider-horizontal[label-placement=\"left\"].sc-ic-divider-h::after,.ic-divider-monochrome.ic-divider-horizontal[label-placement=\"center\"].sc-ic-divider-h::after{border-bottom-color:var(--ic-divider-background-monochrome)}.sc-ic-divider-h div.vertical-divider.sc-ic-divider,.ic-divider-vertical[label-placement=\"bottom\"].sc-ic-divider-h::before,.ic-divider-vertical[label-placement=\"center\"].sc-ic-divider-h::before,.ic-divider-vertical[label-placement=\"top\"].sc-ic-divider-h::after,.ic-divider-vertical[label-placement=\"center\"].sc-ic-divider-h::after{border-left:solid var(--ic-space-1px) var(--ic-divider-background)}.ic-divider-monochrome.sc-ic-divider-h div.vertical-divider.sc-ic-divider,.ic-divider-monochrome.ic-divider-vertical[label-placement=\"bottom\"].sc-ic-divider-h::before,.ic-divider-monochrome.ic-divider-vertical[label-placement=\"center\"].sc-ic-divider-h::before,.ic-divider-monochrome.ic-divider-vertical[label-placement=\"top\"].sc-ic-divider-h::after,.ic-divider-monochrome.ic-divider-vertical[label-placement=\"center\"].sc-ic-divider-h::after{border-left-color:var(--ic-divider-background-monochrome)}.ic-side-navigation-keyline.ic-theme-dark.sc-ic-divider-h{--ic-side-navigation-keyline:var(--ic-state-layer-lighten-20)}.ic-side-navigation-keyline.ic-theme-light.sc-ic-divider-h{--ic-side-navigation-keyline:var(--ic-state-layer-darken-20)}.ic-side-navigation-keyline.ic-theme-dark.sc-ic-divider-h hr.sc-ic-divider,.ic-side-navigation-keyline.ic-theme-dark.ic-divider-horizontal[label-placement=\"right\"].sc-ic-divider-h::before,.ic-side-navigation-keyline.ic-theme-dark.ic-divider-horizontal[label-placement=\"center\"].sc-ic-divider-h::before,.ic-side-navigation-keyline.ic-theme-dark.ic-divider-horizontal[label-placement=\"left\"].sc-ic-divider-h::after,.ic-side-navigation-keyline.ic-theme-dark.ic-divider-horizontal[label-placement=\"center\"].sc-ic-divider-h::after{border-bottom-color:var(--ic-side-navigation-keyline)}.ic-side-navigation-keyline.ic-theme-dark.sc-ic-divider-h div.vertical-divider.sc-ic-divider,.ic-side-navigation-keyline.ic-theme-dark.ic-divider-vertical[label-placement=\"bottom\"].sc-ic-divider-h::before,.ic-side-navigation-keyline.ic-theme-dark.ic-divider-vertical[label-placement=\"center\"].sc-ic-divider-h::before,.ic-side-navigation-keyline.ic-theme-dark.ic-divider-vertical[label-placement=\"top\"].sc-ic-divider-h::after,.ic-side-navigation-keyline.ic-theme-dark.ic-divider-vertical[label-placement=\"center\"].sc-ic-divider-h::after{border-left-color:var(--ic-side-navigation-keyline)}.ic-side-navigation-keyline.ic-theme-light.sc-ic-divider-h hr.sc-ic-divider,.ic-side-navigation-keyline.ic-theme-light.ic-divider-horizontal[label-placement=\"right\"].sc-ic-divider-h::before,.ic-side-navigation-keyline.ic-theme-light.ic-divider-horizontal[label-placement=\"center\"].sc-ic-divider-h::before,.ic-side-navigation-keyline.ic-theme-light.ic-divider-horizontal[label-placement=\"left\"].sc-ic-divider-h::after,.ic-side-navigation-keyline.ic-theme-light.ic-divider-horizontal[label-placement=\"center\"].sc-ic-divider-h::after{border-bottom-color:var(--ic-side-navigation-keyline)}.ic-side-navigation-keyline.ic-theme-light.sc-ic-divider-h div.vertical-divider.sc-ic-divider,.ic-side-navigation-keyline.ic-theme-light.ic-divider-vertical[label-placement=\"bottom\"].sc-ic-divider-h::before,.ic-side-navigation-keyline.ic-theme-light.ic-divider-vertical[label-placement=\"center\"].sc-ic-divider-h::before,.ic-side-navigation-keyline.ic-theme-light.ic-divider-vertical[label-placement=\"top\"].sc-ic-divider-h::after,.ic-side-navigation-keyline.ic-theme-light.ic-divider-vertical[label-placement=\"center\"].sc-ic-divider-h::after{border-left-color:var(--ic-divider-background-monochrome)}.ic-divider-very-thick.sc-ic-divider-h hr.sc-ic-divider,.ic-divider-very-thick[label-placement=\"right\"].sc-ic-divider-h::before,.ic-divider-very-thick[label-placement=\"center\"].sc-ic-divider-h::before,.ic-divider-very-thick[label-placement=\"left\"].sc-ic-divider-h::after,.ic-divider-very-thick[label-placement=\"center\"].sc-ic-divider-h::after{border-bottom-width:var(--ic-space-xs)}.ic-divider-very-thick.sc-ic-divider-h .vertical-divider.sc-ic-divider,.ic-divider-very-thick[label-placement=\"bottom\"].sc-ic-divider-h::before,.ic-divider-very-thick[label-placement=\"center\"].sc-ic-divider-h::before,.ic-divider-very-thick[label-placement=\"top\"].sc-ic-divider-h::after,.ic-divider-very-thick[label-placement=\"center\"].sc-ic-divider-h::after{border-left-width:var(--ic-space-xs)}.ic-divider-thick.sc-ic-divider-h hr.sc-ic-divider,.ic-divider-thick[label-placement=\"right\"].sc-ic-divider-h::before,.ic-divider-thick[label-placement=\"center\"].sc-ic-divider-h::before,.ic-divider-thick[label-placement=\"left\"].sc-ic-divider-h::after,.ic-divider-thick[label-placement=\"center\"].sc-ic-divider-h::after{border-bottom-width:var(--ic-space-xxs)}.ic-divider-thick.sc-ic-divider-h .vertical-divider.sc-ic-divider,.ic-divider-thick[label-placement=\"bottom\"].sc-ic-divider-h::before,.ic-divider-thick[label-placement=\"center\"].sc-ic-divider-h::before,.ic-divider-thick[label-placement=\"top\"].sc-ic-divider-h::after,.ic-divider-thick[label-placement=\"center\"].sc-ic-divider-h::after{border-left-width:var(--ic-space-xxs)}.ic-divider-medium.sc-ic-divider-h hr.sc-ic-divider,.ic-divider-medium[label-placement=\"right\"].sc-ic-divider-h::before,.ic-divider-medium[label-placement=\"center\"].sc-ic-divider-h::before,.ic-divider-medium[label-placement=\"left\"].sc-ic-divider-h::after,.ic-divider-medium[label-placement=\"center\"].sc-ic-divider-h::after{border-bottom-width:var(--ic-space-xxxs)}.ic-divider-medium.sc-ic-divider-h .vertical-divider.sc-ic-divider,.ic-divider-medium[label-placement=\"bottom\"].sc-ic-divider-h::before,.ic-divider-medium[label-placement=\"center\"].sc-ic-divider-h::before,.ic-divider-medium[label-placement=\"top\"].sc-ic-divider-h::after,.ic-divider-medium[label-placement=\"center\"].sc-ic-divider-h::after{border-left-width:var(--ic-space-xxxs)}.ic-divider-thin.sc-ic-divider-h hr.sc-ic-divider,.ic-divider-thin[label-placement=\"right\"].sc-ic-divider-h::before,.ic-divider-thin[label-placement=\"center\"].sc-ic-divider-h::before,.ic-divider-thin[label-placement=\"left\"].sc-ic-divider-h::after,.ic-divider-thin[label-placement=\"center\"].sc-ic-divider-h::after{border-bottom-width:var(--ic-space-1px)}.ic-divider-thin.sc-ic-divider-h .vertical-divider.sc-ic-divider,.ic-divider-thin[label-placement=\"bottom\"].sc-ic-divider-h::before,.ic-divider-thin.ic-divider-vertical[label-placement=\"center\"].sc-ic-divider-h::before,.ic-divider-thin[label-placement=\"top\"].sc-ic-divider-h::after,.ic-divider-thin.ic-divider-vertical[label-placement=\"center\"].sc-ic-divider-h::after{border-left-width:var(--ic-space-1px)}.ic-divider-dashed.sc-ic-divider-h hr.sc-ic-divider,.ic-divider-dashed[label-placement=\"right\"].sc-ic-divider-h::before,.ic-divider-dashed[label-placement=\"center\"].sc-ic-divider-h::before,.ic-divider-dashed[label-placement=\"left\"].sc-ic-divider-h::after,.ic-divider-dashed[label-placement=\"center\"].sc-ic-divider-h::after{border-bottom-style:dashed}.ic-divider-dashed.sc-ic-divider-h .vertical-divider.sc-ic-divider,.ic-divider-dashed[label-placement=\"bottom\"].sc-ic-divider-h::before,.ic-divider-dashed[label-placement=\"center\"].sc-ic-divider-h::before,.ic-divider-dashed[label-placement=\"top\"].sc-ic-divider-h::after,.ic-divider-dashed[label-placement=\"center\"].sc-ic-divider-h::after{border-left-style:dashed}.sc-ic-divider-h .ic-divider-label.sc-ic-divider{text-wrap:wrap;text-align:left;width:-moz-max-content;width:max-content;max-width:var(--ic-divider-label-width, max(20rem, 60%))}.ic-divider-horizontal[label-placement=\"center\"].sc-ic-divider-h .ic-divider-label.sc-ic-divider{text-align:center}.ic-divider-vertical.sc-ic-divider-h .ic-divider-label.sc-ic-divider{text-align:center}.sc-ic-divider-h .ic-divider-label-container.sc-ic-divider{width:-moz-max-content;width:max-content;max-width:var(--ic-divider-label-width, max(20rem, 60%))}.ic-divider-vertical.sc-ic-divider-h .ic-divider-label.sc-ic-divider{max-width:var(--ic-divider-label-width, 20rem)}.ic-divider-vertical.sc-ic-divider-h .ic-divider-label-container.sc-ic-divider{max-width:var(--ic-divider-label-width, 20rem)}.sc-ic-divider-h .ic-divider-label.sc-ic-divider p.sc-ic-divider{width:-moz-max-content;width:max-content;max-width:100%}.sc-ic-divider-h .ic-divider-label.sc-ic-divider,.sc-ic-divider-h.sc-ic-divider-s>*,.sc-ic-divider-h .sc-ic-divider-s>*{color:var(--ic-divider-label)}.ic-divider-monochrome.sc-ic-divider-h .ic-divider-label.sc-ic-divider,.sc-ic-divider-h.ic-divider-monochrome.sc-ic-divider-s>*,.sc-ic-divider-h.ic-divider-monochrome .sc-ic-divider-s>*{color:var(--ic-divider-label-monochrome)}@media (forced-colors: active){hr.sc-ic-divider,.ic-divider-horizontal[label-placement=\"right\"].sc-ic-divider-h::before,.ic-divider-horizontal[label-placement=\"center\"].sc-ic-divider-h::before,.ic-divider-horizontal[label-placement=\"left\"].sc-ic-divider-h::after,.ic-divider-horizontal[label-placement=\"center\"].sc-ic-divider-h::after{border-bottom-color:transparent}.sc-ic-divider-h div.vertical-divider.sc-ic-divider,.ic-divider-vertical[label-placement=\"bottom\"].sc-ic-divider-h::before,.ic-divider-vertical[label-placement=\"center\"].sc-ic-divider-h::before,.ic-divider-vertical[label-placement=\"top\"].sc-ic-divider-h::after,.ic-divider-vertical[label-placement=\"center\"].sc-ic-divider-h::after{border-left-color:transparent}}";
+const IcDividerStyle0 = icDividerCss;
 
 const Divider = /*@__PURE__*/ proxyCustomElement(class Divider extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
-        this.foregroundColor = getThemeForegroundColor();
+        this.foregroundColor = getBrandForegroundAppearance();
+        /**
+         * The line style of the divider.
+         */
+        this.borderStyle = "solid";
+        /**
+         * 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.
+         */
+        this.labelPlacement = "center";
+        /** If `true`, the divider will be displayed in a grey colour. */
+        this.monochrome = false;
+        /**
+         * The orientation of the divider.
+         */
+        this.orientation = "horizontal";
+        /**
+         * 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.
+         */
+        this.theme = "inherit";
+        /**
+         * The thickness of the divider.
+         */
+        this.weight = "thin";
     }
-    themeChangeHandler(ev) {
-        const theme = ev.detail;
-        this.foregroundColor = theme.mode;
+    brandChangeHandler(ev) {
+        this.foregroundColor = ev.detail.mode;
+    }
+    updateMonochromeState() {
+        var _a;
+        const parentEl = this.el.parentElement;
+        if (parentEl) {
+            const isBottomSideNav = parentEl.classList.contains("bottom-side-nav");
+            const isBottomWrapper = (_a = parentEl.parentElement) === null || _a === void 0 ? void 0 : _a.classList.contains("bottom-wrapper");
+            if (parentEl.tagName === "IC-SIDE-NAVIGATION" ||
+                (isBottomSideNav && isBottomWrapper)) {
+                this.el.classList.add("ic-side-navigation-keyline");
+                if (this.foregroundColor === "light") {
+                    this.theme = "dark";
+                }
+                else {
+                    this.theme = "light";
+                }
+            }
+        }
+    }
+    componentWillRender() {
+        this.updateMonochromeState();
     }
     render() {
-        return (h(Host, { "aria-hidden": "true" }, h("hr", { class: {
-                ["light"]: this.foregroundColor === IcThemeForegroundEnum.Light,
-            } })));
+        const { borderStyle, label, labelPlacement, monochrome, orientation, weight, } = this;
+        const { theme } = this;
+        const invalidPropCombination = (placement) => {
+            console.error(`${placement.charAt(0).toUpperCase() + placement.slice(1)} label placement is not applicable for a ${orientation} ic-divider (web-components) / IcDivider (react)`);
+        };
+        if (((labelPlacement === "left" || labelPlacement === "right") &&
+            orientation === "vertical") ||
+            ((labelPlacement === "top" || labelPlacement === "bottom") &&
+                orientation === "horizontal")) {
+            invalidPropCombination(labelPlacement);
+        }
+        const getTypographyVariant = (weight) => {
+            switch (weight) {
+                case "very-thick":
+                    return "h4";
+                case "thick":
+                    return "subtitle-large";
+                default:
+                    return "label";
+            }
+        };
+        const renderLabel = () => {
+            if (slotHasContent(this.el, "label")) {
+                return (h("div", { class: "ic-divider-label-container" }, h("slot", { name: "label" })));
+            }
+            else if (isPropDefined(label)) {
+                return (h("ic-typography", { class: "ic-divider-label", variant: getTypographyVariant(weight) }, h("p", null, label)));
+            }
+            return null;
+        };
+        return (h(Host, Object.assign({ class: {
+                [`ic-theme-${theme}`]: theme !== "inherit",
+                [`ic-divider-monochrome`]: !!monochrome,
+                [`ic-divider-${orientation}`]: true,
+                [`ic-divider-${weight}`]: true,
+                [`ic-divider-${borderStyle}`]: true,
+            } }, ((orientation === "vertical" ||
+            (!!renderLabel() && !!isPropDefined(labelPlacement))) && {
+            "aria-orientation": orientation,
+            role: "separator",
+        })), orientation === "horizontal" &&
+            (!renderLabel() || !isPropDefined(labelPlacement)) && h("hr", null), !!isPropDefined(labelPlacement) && !!renderLabel() && renderLabel(), orientation === "vertical" &&
+            (!renderLabel() || !isPropDefined(labelPlacement)) && (h("div", { class: "vertical-divider" }))));
     }
-    static get style() { return icDividerCss; }
-}, [2, "ic-divider", {
+    get el() { return this; }
+    static get style() { return IcDividerStyle0; }
+}, [6, "ic-divider", {
+        "borderStyle": [1, "border-style"],
+        "label": [1],
+        "labelPlacement": [1, "label-placement"],
+        "monochrome": [4],
+        "orientation": [1],
+        "theme": [1025],
+        "weight": [1],
         "foregroundColor": [32]
-    }, [[4, "themeChange", "themeChangeHandler"]]]);
+    }, [[4, "brandChange", "brandChangeHandler"]]]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["ic-divider"];
+    const components = ["ic-divider", "ic-typography"];
     components.forEach(tagName => { switch (tagName) {
         case "ic-divider":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, Divider);
             }
             break;
+        case "ic-typography":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
     } });
 }
 

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

@@ -1 +1 @@
-{"file":"ic-divider2.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,iMAAiM;;MCczM,OAAO;;;;+BAC4B,uBAAuB,EAAE;;IAGvE,kBAAkB,CAAC,EAAe;QAChC,MAAM,KAAK,GAAY,EAAE,CAAC,MAAM,CAAC;QACjC,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC,IAAI,CAAC;KACnC;IAED,MAAM;QACJ,QACE,EAAC,IAAI,mBAAa,MAAM,IACtB,UACE,KAAK,EAAE;gBACL,CAAC,OAAO,GAAG,IAAI,CAAC,eAAe,KAAK,qBAAqB,CAAC,KAAK;aAChE,GACD,CACG,EACP;KACH;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/ic-divider/ic-divider.css?tag=ic-divider&encapsulation=scoped","src/components/ic-divider/ic-divider.tsx"],"sourcesContent":["hr {\n  padding: 0;\n  margin: 0;\n  border: none;\n  height: var(--ic-space-1px);\n  background-color: var(--ic-keyline-darken-rgb);\n}\n\nhr.light {\n  background-color: var(--ic-keyline-lighten-rgb);\n}\n","import { h, Component, Host, Listen, State } from \"@stencil/core\";\n\nimport { getThemeForegroundColor } from \"../../utils/helpers\";\nimport {\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\n\n@Component({\n  tag: \"ic-divider\",\n  styleUrl: \"ic-divider.css\",\n  scoped: true,\n})\nexport class Divider {\n  @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\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  render() {\n    return (\n      <Host aria-hidden=\"true\">\n        <hr\n          class={{\n            [\"light\"]: this.foregroundColor === IcThemeForegroundEnum.Light,\n          }}\n        />\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"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(.ic-divider-monochrome.ic-divider-horizontal)[label-placement=\"right\"]::before,\n:host(.ic-divider-monochrome.ic-divider-horizontal[label-placement=\"center\"])::before,\n:host(.ic-divider-monochrome.ic-divider-horizontal[label-placement=\"left\"])::after,\n:host(.ic-divider-monochrome.ic-divider-horizontal[label-placement=\"center\"])::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(.ic-divider-monochrome.ic-divider-vertical[label-placement=\"bottom\"])::before,\n:host(.ic-divider-monochrome.ic-divider-vertical[label-placement=\"center\"])::before,\n:host(.ic-divider-monochrome.ic-divider-vertical[label-placement=\"top\"])::after,\n:host(.ic-divider-monochrome.ic-divider-vertical[label-placement=\"center\"])::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(.ic-side-navigation-keyline.ic-theme-dark.ic-divider-horizontal)[label-placement=\"right\"]::before,\n:host(.ic-side-navigation-keyline.ic-theme-dark.ic-divider-horizontal[label-placement=\"center\"])::before,\n:host(.ic-side-navigation-keyline.ic-theme-dark.ic-divider-horizontal[label-placement=\"left\"])::after,\n:host(.ic-side-navigation-keyline.ic-theme-dark.ic-divider-horizontal[label-placement=\"center\"])::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(.ic-side-navigation-keyline.ic-theme-dark.ic-divider-vertical[label-placement=\"bottom\"])::before,\n:host(.ic-side-navigation-keyline.ic-theme-dark.ic-divider-vertical[label-placement=\"center\"])::before,\n:host(.ic-side-navigation-keyline.ic-theme-dark.ic-divider-vertical[label-placement=\"top\"])::after,\n:host(.ic-side-navigation-keyline.ic-theme-dark.ic-divider-vertical[label-placement=\"center\"])::after {\n  border-left-color: var(--ic-side-navigation-keyline);\n}\n\n:host(.ic-side-navigation-keyline.ic-theme-light) hr,\n:host(.ic-side-navigation-keyline.ic-theme-light.ic-divider-horizontal)[label-placement=\"right\"]::before,\n:host(.ic-side-navigation-keyline.ic-theme-light.ic-divider-horizontal[label-placement=\"center\"])::before,\n:host(.ic-side-navigation-keyline.ic-theme-light.ic-divider-horizontal[label-placement=\"left\"])::after,\n:host(.ic-side-navigation-keyline.ic-theme-light.ic-divider-horizontal[label-placement=\"center\"])::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(.ic-side-navigation-keyline.ic-theme-light.ic-divider-vertical[label-placement=\"bottom\"])::before,\n:host(.ic-side-navigation-keyline.ic-theme-light.ic-divider-vertical[label-placement=\"center\"])::before,\n:host(.ic-side-navigation-keyline.ic-theme-light.ic-divider-vertical[label-placement=\"top\"])::after,\n:host(.ic-side-navigation-keyline.ic-theme-light.ic-divider-vertical[label-placement=\"center\"])::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 parentEl = this.el.parentElement;\n    if (parentEl) {\n      const isBottomSideNav = parentEl.classList.contains(\"bottom-side-nav\");\n      const isBottomWrapper =\n        parentEl.parentElement?.classList.contains(\"bottom-wrapper\");\n\n      if (\n        parentEl.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\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-empty-state.js

@@ -1,8 +1,9 @@
-import { proxyCustomElement, HTMLElement, forceUpdate, h, Host } from '@stencil/core/internal/client';
-import { f as checkSlotInChildMutations, i as isSlotUsed, o as onComponentRequiredPropUndefined } from './helpers.js';
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { i as isSlotUsed, o as onComponentRequiredPropUndefined, f as renderDynamicChildSlots } from './helpers.js';
 import { d as defineCustomElement$2 } from './ic-typography2.js';
 
-const icEmptyStateCss = ":host{gap:var(--ic-space-xs);padding:var(--ic-space-xs)}:host,.action-area{display:flex;flex-direction:column}.action-area{gap:var(--ic-space-md)}:host ::slotted(svg),:host ::slotted(img){border-radius:var(--ic-space-xxs)}:host(.ic-empty-state-right),:host(.ic-empty-state-right) .action-area{align-items:flex-end;text-align:right}:host(.ic-empty-state-center),:host(.ic-empty-state-center) .action-area{align-items:center;text-align:center}:host(.image-default) ::slotted(svg),:host(.image-default) ::slotted(img){height:calc(3 * var(--ic-space-lg)) !important;width:calc(3 * var(--ic-space-lg)) !important}:host(.image-small) ::slotted(svg),:host(.image-small) ::slotted(img){height:var(--ic-space-xxl) !important;width:var(--ic-space-xxl) !important}:host(.image-large) ::slotted(svg),:host(.image-large) ::slotted(img){height:calc(4 * var(--ic-space-xl)) !important;width:calc(4 * var(--ic-space-xl)) !important}";
+const icEmptyStateCss = ":host{gap:var(--ic-space-xs);padding:var(--ic-space-xs)}:host,.action-area{display:flex;flex-direction:column}.action-area{gap:var(--ic-space-md)}:host ::slotted(svg),:host ::slotted(img){border-radius:var(--ic-space-xxs)}:host(.ic-empty-state-right),:host(.ic-empty-state-right) .action-area{align-items:flex-end;text-align:right}:host(.ic-empty-state-center),:host(.ic-empty-state-center) .action-area{align-items:center;text-align:center}:host(.image-medium) ::slotted(svg),:host(.image-medium) ::slotted(img){height:calc(3 * var(--ic-space-lg)) !important;width:calc(3 * var(--ic-space-lg)) !important}:host(.image-small) ::slotted(svg),:host(.image-small) ::slotted(img){height:var(--ic-space-xxl) !important;width:var(--ic-space-xxl) !important}:host(.image-large) ::slotted(svg),:host(.image-large) ::slotted(img){height:calc(4 * var(--ic-space-xl)) !important;width:calc(4 * var(--ic-space-xl)) !important}::slotted([slot=\"heading\"]),.empty-state-heading{--ic-typography-color:var(--ic-empty-state-title)}::slotted([slot=\"subheading\"]),.empty-state-subheading{--ic-typography-color:var(--ic-empty-state-subtitle)}::slotted([slot=\"body\"]),.empty-state-body{--ic-typography-color:var(--ic-empty-state-body)}";
+const IcEmptyStateStyle0 = icEmptyStateCss;
 
 const EmptyState = /*@__PURE__*/ proxyCustomElement(class EmptyState extends HTMLElement {
     constructor() {
@@ -10,22 +11,18 @@ const EmptyState = /*@__PURE__*/ proxyCustomElement(class EmptyState extends HTM
         this.__registerHost();
         this.__attachShadow();
         this.hostMutationObserver = null;
-        this.hostMutationCallback = (mutationList) => {
-            if (mutationList.some(({ type, addedNodes, removedNodes }) => type === "childList"
-                ? checkSlotInChildMutations(addedNodes, removedNodes, [
-                    "image",
-                    "actions",
-                ])
-                : false)) {
-                forceUpdate(this);
-            }
-        };
+        /**
+         * The alignment of the empty state container.
+         */
         this.aligned = "left";
-        this.body = undefined;
-        this.maxLines = undefined;
-        this.heading = undefined;
-        this.imageSize = "default";
-        this.subheading = undefined;
+        /**
+         * The size of the image or icon used in the image slot.
+         */
+        this.imageSize = "medium";
+        /**
+         * 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.
+         */
+        this.theme = "inherit";
     }
     disconnectedCallback() {
         var _a;
@@ -34,27 +31,29 @@ const EmptyState = /*@__PURE__*/ proxyCustomElement(class EmptyState extends HTM
     componentDidLoad() {
         !isSlotUsed(this.el, "heading") &&
             onComponentRequiredPropUndefined([{ prop: this.heading, propName: "heading" }], "Empty State");
-        this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);
+        this.hostMutationObserver = new MutationObserver((mutationList) => renderDynamicChildSlots(mutationList, ["image", "actions"], this));
         this.hostMutationObserver.observe(this.el, {
             childList: true,
         });
     }
     render() {
-        const { aligned, body, maxLines, heading, imageSize, subheading } = this;
-        return (h(Host, { class: {
+        const { aligned, body, maxLines, heading, imageSize, subheading, theme } = this;
+        return (h(Host, { key: 'd8dbd02105f4b01a468436fd73ccd4ddec2a4cf1', class: {
                 [`ic-empty-state-${aligned}`]: true,
                 [`image-${imageSize}`]: isSlotUsed(this.el, "image"),
-            } }, isSlotUsed(this.el, "image") && h("slot", { name: "image" }), h("div", null, h("slot", { name: "heading" }, h("ic-typography", { variant: "h4" }, heading)), h("slot", { name: "subheading" }, h("ic-typography", { variant: "subtitle-small" }, subheading)), h("slot", { name: "body" }, h("ic-typography", { maxLines: maxLines }, body))), isSlotUsed(this.el, "actions") && (h("div", { class: "action-area" }, h("slot", { name: "actions" })))));
+                [`ic-theme-${theme}`]: theme !== "inherit",
+            } }, isSlotUsed(this.el, "image") && h("slot", { key: 'd7bed2bb22a41377f6c9032660bc62f79294510c', name: "image" }), h("div", { key: '64df9d8fb5ffbb9724a2e87a67eed03526564527' }, h("slot", { key: '5fee4dfbeef7272bcd423c7fb2bfc49e5e557718', name: "heading" }, h("ic-typography", { key: '523cac0cce5c01cca9540396b95f0ab13d0ef9cd', variant: "h4", class: "empty-state-heading" }, heading)), h("slot", { key: '904f2c3ceeeef991a099a4fc0521de002c6e8fc3', name: "subheading" }, h("ic-typography", { key: '6eb71c04bfae24d0ece644cea3730251ecd38e77', variant: "subtitle-small", class: "empty-state-subheading" }, subheading)), h("slot", { key: '6dc1f5e4e3071b5c0277c993502f1f043b247330', name: "body" }, h("ic-typography", { key: 'f60da219bd12eda8df1229eba9ae9904458e4692', maxLines: maxLines, class: "empty-state-body" }, body))), isSlotUsed(this.el, "actions") && (h("div", { key: '73247068a45635e5e64d513239ada3e97a4a4302', class: "action-area" }, h("slot", { key: '19a448208f663a595f5a81a28b89834d0c62e78b', name: "actions" })))));
     }
     get el() { return this; }
-    static get style() { return icEmptyStateCss; }
+    static get style() { return IcEmptyStateStyle0; }
 }, [1, "ic-empty-state", {
         "aligned": [1],
         "body": [1],
         "maxLines": [2, "max-lines"],
         "heading": [1],
         "imageSize": [1, "image-size"],
-        "subheading": [1]
+        "subheading": [1],
+        "theme": [1]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

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

@@ -1 +1 @@
-{"file":"ic-empty-state.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,s5BAAs5B;;MCsBj6B,UAAU;;;;;QACb,yBAAoB,GAAqB,IAAI,CAAC;QAmD9C,yBAAoB,GAAG,CAAC,YAA8B;YAC5D,IACE,YAAY,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,YAAY,EAAE,KACnD,IAAI,KAAK,WAAW;kBAChB,yBAAyB,CAAC,UAAU,EAAE,YAAY,EAAE;oBAClD,OAAO;oBACP,SAAS;iBACV,CAAC;kBACF,KAAK,CACV,EACD;gBACA,WAAW,CAAC,IAAI,CAAC,CAAC;aACnB;SACF,CAAC;uBAzDwC,MAAM;;;;yBAoBlB,SAAS;;;IAOvC,oBAAoB;;QAClB,MAAA,IAAI,CAAC,oBAAoB,0CAAE,UAAU,EAAE,CAAC;KACzC;IAED,gBAAgB;QACd,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,SAAS,CAAC;YAC7B,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,EAC7C,aAAa,CACd,CAAC;QAEJ,IAAI,CAAC,oBAAoB,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;QAC5E,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE;YACzC,SAAS,EAAE,IAAI;SAChB,CAAC,CAAC;KACJ;IAiBD,MAAM;QACJ,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;QACzE,QACE,EAAC,IAAI,IACH,KAAK,EAAE;gBACL,CAAC,kBAAkB,OAAO,EAAE,GAAG,IAAI;gBACnC,CAAC,SAAS,SAAS,EAAE,GAAG,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,CAAC;aACrD,IAEA,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,CAAC,IAAI,YAAM,IAAI,EAAC,OAAO,GAAQ,EAC3D,eACE,YAAM,IAAI,EAAC,SAAS,IAClB,qBAAe,OAAO,EAAC,IAAI,IAAE,OAAO,CAAiB,CAChD,EACP,YAAM,IAAI,EAAC,YAAY,IACrB,qBAAe,OAAO,EAAC,gBAAgB,IAAE,UAAU,CAAiB,CAC/D,EACP,YAAM,IAAI,EAAC,MAAM,IACf,qBAAe,QAAQ,EAAE,QAAQ,IAAG,IAAI,CAAiB,CACpD,CACH,EACL,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,SAAS,CAAC,KAC7B,WAAK,KAAK,EAAC,aAAa,IACtB,YAAM,IAAI,EAAC,SAAS,GAAG,CACnB,CACP,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/ic-empty-state/ic-empty-state.css?tag=ic-empty-state&encapsulation=shadow","src/components/ic-empty-state/ic-empty-state.tsx"],"sourcesContent":[":host {\n  gap: var(--ic-space-xs);\n  padding: var(--ic-space-xs);\n}\n\n:host,\n.action-area {\n  display: flex;\n  flex-direction: column;\n}\n\n.action-area {\n  gap: var(--ic-space-md);\n}\n\n:host ::slotted(svg),\n:host ::slotted(img) {\n  border-radius: var(--ic-space-xxs);\n}\n\n:host(.ic-empty-state-right),\n:host(.ic-empty-state-right) .action-area {\n  align-items: flex-end;\n  text-align: right;\n}\n\n:host(.ic-empty-state-center),\n:host(.ic-empty-state-center) .action-area {\n  align-items: center;\n  text-align: center;\n}\n\n:host(.image-default) ::slotted(svg),\n:host(.image-default) ::slotted(img) {\n  height: calc(3 * var(--ic-space-lg)) !important;\n  width: calc(3 * var(--ic-space-lg)) !important;\n}\n\n:host(.image-small) ::slotted(svg),\n:host(.image-small) ::slotted(img) {\n  height: var(--ic-space-xxl) !important;\n  width: var(--ic-space-xxl) !important;\n}\n\n:host(.image-large) ::slotted(svg),\n:host(.image-large) ::slotted(img) {\n  height: calc(4 * var(--ic-space-xl)) !important;\n  width: calc(4 * var(--ic-space-xl)) !important;\n}\n","import { h, Component, Host, Prop, Element, forceUpdate } from \"@stencil/core\";\n\nimport { IcEmptyStateAlignment } from \"./ic-empty-state.types\";\nimport {\n  isSlotUsed,\n  onComponentRequiredPropUndefined,\n  checkSlotInChildMutations,\n} from \"../../utils/helpers\";\nimport { IcSizes } from \"../../utils/types\";\n\n/**\n * @slot image - Content is placed at the top above all other content.\n * @slot actions - Content is placed at the bottom below all other content.\n * @slot heading - Content will be rendered in place of the heading prop.\n * @slot subheading - Content will be rendered in place of the subheading prop.\n * @slot body - Content will be rendered in place of the body prop.\n */\n@Component({\n  tag: \"ic-empty-state\",\n  styleUrl: \"ic-empty-state.css\",\n  shadow: true,\n})\nexport class EmptyState {\n  private hostMutationObserver: MutationObserver = null;\n\n  @Element() el: HTMLIcEmptyStateElement;\n\n  /**\n   * The alignment of the empty state container.\n   */\n  @Prop() aligned?: IcEmptyStateAlignment = \"left\";\n\n  /**\n   * The body text rendered in the empty state container.\n   */\n  @Prop() body?: string;\n\n  /**\n   * The number of lines of body text to display before truncating.\n   */\n  @Prop() maxLines?: number;\n\n  /**\n   * The title rendered in the empty state container.\n   */\n  @Prop() heading?: string;\n\n  /**\n   * The size of the image or icon used in the image slot.\n   */\n  @Prop() imageSize?: IcSizes = \"default\";\n\n  /**\n   * The subtitle rendered in the empty state container.\n   */\n  @Prop() subheading?: string;\n\n  disconnectedCallback(): void {\n    this.hostMutationObserver?.disconnect();\n  }\n\n  componentDidLoad(): void {\n    !isSlotUsed(this.el, \"heading\") &&\n      onComponentRequiredPropUndefined(\n        [{ prop: this.heading, propName: \"heading\" }],\n        \"Empty State\"\n      );\n\n    this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n    this.hostMutationObserver.observe(this.el, {\n      childList: true,\n    });\n  }\n\n  private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n    if (\n      mutationList.some(({ type, addedNodes, removedNodes }) =>\n        type === \"childList\"\n          ? checkSlotInChildMutations(addedNodes, removedNodes, [\n              \"image\",\n              \"actions\",\n            ])\n          : false\n      )\n    ) {\n      forceUpdate(this);\n    }\n  };\n\n  render() {\n    const { aligned, body, maxLines, heading, imageSize, subheading } = this;\n    return (\n      <Host\n        class={{\n          [`ic-empty-state-${aligned}`]: true,\n          [`image-${imageSize}`]: isSlotUsed(this.el, \"image\"),\n        }}\n      >\n        {isSlotUsed(this.el, \"image\") && <slot name=\"image\"></slot>}\n        <div>\n          <slot name=\"heading\">\n            <ic-typography variant=\"h4\">{heading}</ic-typography>\n          </slot>\n          <slot name=\"subheading\">\n            <ic-typography variant=\"subtitle-small\">{subheading}</ic-typography>\n          </slot>\n          <slot name=\"body\">\n            <ic-typography maxLines={maxLines}>{body}</ic-typography>\n          </slot>\n        </div>\n        {isSlotUsed(this.el, \"actions\") && (\n          <div class=\"action-area\">\n            <slot name=\"actions\" />\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-empty-state.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,qsCAAqsC,CAAC;AAC9tC,2BAAe,eAAe;;MCqBjB,UAAU;IALvB;;;;QAMU,yBAAoB,GAA4B,IAAI,CAAC;;;;QAOrD,YAAO,GAA2B,MAAM,CAAC;;;;QAoBzC,cAAS,GAAa,QAAQ,CAAC;;;;QAU/B,UAAK,GAAiB,SAAS,CAAC;KA6DzC;IA3DC,oBAAoB;;QAClB,MAAA,IAAI,CAAC,oBAAoB,0CAAE,UAAU,EAAE,CAAC;KACzC;IAED,gBAAgB;QACd,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,SAAS,CAAC;YAC7B,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,EAC7C,aAAa,CACd,CAAC;QAEJ,IAAI,CAAC,oBAAoB,GAAG,IAAI,gBAAgB,CAAC,CAAC,YAAY,KAC5D,uBAAuB,CAAC,YAAY,EAAE,CAAC,OAAO,EAAE,SAAS,CAAC,EAAE,IAAI,CAAC,CAClE,CAAC;QACF,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE;YACzC,SAAS,EAAE,IAAI;SAChB,CAAC,CAAC;KACJ;IAED,MAAM;QACJ,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,KAAK,EAAE,GACtE,IAAI,CAAC;QACP,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,CAAC,kBAAkB,OAAO,EAAE,GAAG,IAAI;gBACnC,CAAC,SAAS,SAAS,EAAE,GAAG,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,CAAC;gBACpD,CAAC,YAAY,KAAK,EAAE,GAAG,KAAK,KAAK,SAAS;aAC3C,IAEA,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,CAAC,IAAI,6DAAM,IAAI,EAAC,OAAO,GAAQ,EAC3D,8DACE,6DAAM,IAAI,EAAC,SAAS,IAClB,sEAAe,OAAO,EAAC,IAAI,EAAC,KAAK,EAAC,qBAAqB,IACpD,OAAO,CACM,CACX,EACP,6DAAM,IAAI,EAAC,YAAY,IACrB,sEACE,OAAO,EAAC,gBAAgB,EACxB,KAAK,EAAC,wBAAwB,IAE7B,UAAU,CACG,CACX,EACP,6DAAM,IAAI,EAAC,MAAM,IACf,sEAAe,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAC,kBAAkB,IACxD,IAAI,CACS,CACX,CACH,EACL,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,SAAS,CAAC,KAC7B,4DAAK,KAAK,EAAC,aAAa,IACtB,6DAAM,IAAI,EAAC,SAAS,GAAG,CACnB,CACP,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/ic-empty-state/ic-empty-state.css?tag=ic-empty-state&encapsulation=shadow","src/components/ic-empty-state/ic-empty-state.tsx"],"sourcesContent":[":host {\n  gap: var(--ic-space-xs);\n  padding: var(--ic-space-xs);\n}\n\n:host,\n.action-area {\n  display: flex;\n  flex-direction: column;\n}\n\n.action-area {\n  gap: var(--ic-space-md);\n}\n\n:host ::slotted(svg),\n:host ::slotted(img) {\n  border-radius: var(--ic-space-xxs);\n}\n\n:host(.ic-empty-state-right),\n:host(.ic-empty-state-right) .action-area {\n  align-items: flex-end;\n  text-align: right;\n}\n\n:host(.ic-empty-state-center),\n:host(.ic-empty-state-center) .action-area {\n  align-items: center;\n  text-align: center;\n}\n\n:host(.image-medium) ::slotted(svg),\n:host(.image-medium) ::slotted(img) {\n  height: calc(3 * var(--ic-space-lg)) !important;\n  width: calc(3 * var(--ic-space-lg)) !important;\n}\n\n:host(.image-small) ::slotted(svg),\n:host(.image-small) ::slotted(img) {\n  height: var(--ic-space-xxl) !important;\n  width: var(--ic-space-xxl) !important;\n}\n\n:host(.image-large) ::slotted(svg),\n:host(.image-large) ::slotted(img) {\n  height: calc(4 * var(--ic-space-xl)) !important;\n  width: calc(4 * var(--ic-space-xl)) !important;\n}\n\n::slotted([slot=\"heading\"]),\n.empty-state-heading {\n  --ic-typography-color: var(--ic-empty-state-title);\n}\n\n::slotted([slot=\"subheading\"]),\n.empty-state-subheading {\n  --ic-typography-color: var(--ic-empty-state-subtitle);\n}\n\n::slotted([slot=\"body\"]),\n.empty-state-body {\n  --ic-typography-color: var(--ic-empty-state-body);\n}\n","import { h, Component, Host, Prop, Element } from \"@stencil/core\";\n\nimport { IcEmptyStateAlignment } from \"./ic-empty-state.types\";\nimport {\n  isSlotUsed,\n  onComponentRequiredPropUndefined,\n  renderDynamicChildSlots,\n} from \"../../utils/helpers\";\nimport { IcSizes, IcThemeMode } from \"../../utils/types\";\n\n/**\n * @slot image - Content is placed at the top above all other content.\n * @slot actions - Content is placed at the bottom below all other content.\n * @slot heading - Content will be rendered in place of the heading prop.\n * @slot subheading - Content will be rendered in place of the subheading prop.\n * @slot body - Content will be rendered in place of the body prop.\n */\n@Component({\n  tag: \"ic-empty-state\",\n  styleUrl: \"ic-empty-state.css\",\n  shadow: true,\n})\nexport class EmptyState {\n  private hostMutationObserver: MutationObserver | null = null;\n\n  @Element() el: HTMLIcEmptyStateElement;\n\n  /**\n   * The alignment of the empty state container.\n   */\n  @Prop() aligned?: IcEmptyStateAlignment = \"left\";\n\n  /**\n   * The body text rendered in the empty state container.\n   */\n  @Prop() body?: string;\n\n  /**\n   * The number of lines of body text to display before truncating.\n   */\n  @Prop() maxLines?: number;\n\n  /**\n   * The title rendered in the empty state container.\n   */\n  @Prop() heading?: string;\n\n  /**\n   * The size of the image or icon used in the image slot.\n   */\n  @Prop() imageSize?: IcSizes = \"medium\";\n\n  /**\n   * The subtitle rendered in the empty state container.\n   */\n  @Prop() subheading?: string;\n\n  /**\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() theme?: IcThemeMode = \"inherit\";\n\n  disconnectedCallback(): void {\n    this.hostMutationObserver?.disconnect();\n  }\n\n  componentDidLoad(): void {\n    !isSlotUsed(this.el, \"heading\") &&\n      onComponentRequiredPropUndefined(\n        [{ prop: this.heading, propName: \"heading\" }],\n        \"Empty State\"\n      );\n\n    this.hostMutationObserver = new MutationObserver((mutationList) =>\n      renderDynamicChildSlots(mutationList, [\"image\", \"actions\"], this)\n    );\n    this.hostMutationObserver.observe(this.el, {\n      childList: true,\n    });\n  }\n\n  render() {\n    const { aligned, body, maxLines, heading, imageSize, subheading, theme } =\n      this;\n    return (\n      <Host\n        class={{\n          [`ic-empty-state-${aligned}`]: true,\n          [`image-${imageSize}`]: isSlotUsed(this.el, \"image\"),\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n        }}\n      >\n        {isSlotUsed(this.el, \"image\") && <slot name=\"image\"></slot>}\n        <div>\n          <slot name=\"heading\">\n            <ic-typography variant=\"h4\" class=\"empty-state-heading\">\n              {heading}\n            </ic-typography>\n          </slot>\n          <slot name=\"subheading\">\n            <ic-typography\n              variant=\"subtitle-small\"\n              class=\"empty-state-subheading\"\n            >\n              {subheading}\n            </ic-typography>\n          </slot>\n          <slot name=\"body\">\n            <ic-typography maxLines={maxLines} class=\"empty-state-body\">\n              {body}\n            </ic-typography>\n          </slot>\n        </div>\n        {isSlotUsed(this.el, \"actions\") && (\n          <div class=\"action-area\">\n            <slot name=\"actions\" />\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,15 +1,20 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { D as DEVICE_SIZES, n 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';
 
-const icFooterLinkGroupCss = "/*! 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-group-sparse){--footer-link-group-margin-right:5.938rem;--footer-link-group-border-bottom:0 solid transparent;--footer-link-label-margin-top:0;--footer-link-label-margin-bottom:var(--ic-space-md)}:host(.footer-link-group-small){--footer-link-group-margin-right:0;--footer-link-label-margin-top:var(--ic-space-md);--footer-link-label-margin-bottom:var(--ic-space-md);--footer-link-group-links-padding-left:var(--ic-space-md);--footer-link-group-links-padding-bottom:var(--ic-space-md)}:host(.footer-link-group-light.footer-link-group-small){--footer-link-group-border-bottom:var(--ic-keyline-lighten)}:host(.footer-link-group-dark.footer-link-group-small){--footer-link-group-border-bottom:var(--ic-keyline-darken)}:host(.footer-link-group){margin-right:var(--footer-link-group-margin-right);border-bottom:var(--footer-link-group-border-bottom)}:host(.footer-link-group-small.footer-link-group-light:hover){background-color:var(--ic-action-light-bg-hover);cursor:pointer}:host(.footer-link-group-small.footer-link-group-dark:hover){background-color:var(--ic-action-dark-bg-hover);cursor:pointer}:host(.footer-link-group-sparse:focus){box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset);outline:var(--ic-hc-focus-outline);z-index:1}:host(.footer-link-group-small:focus){box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset);outline:var(--ic-hc-focus-outline);z-index:1}:host(.footer-link-group-small.footer-link-group-light:active){background-color:var(--ic-action-light-bg-active)}:host(.footer-link-group-small.footer-link-group-dark:active){background-color:var(--ic-action-dark-bg-active)}.footer-link-label{margin-top:var(--footer-link-label-margin-top);margin-bottom:var(--footer-link-label-margin-bottom);flex-grow:1}.footer-link-group-toggle{fill:white !important}.footer-link-group-links{display:flex;flex-direction:column}.footer-link-group-header{display:flex;align-items:center}";
+const icFooterLinkGroupCss = "/*! 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-group-sparse){--footer-link-group-margin-right:5.938rem;--footer-link-group-border-bottom:0 solid transparent;--footer-link-label-margin-top:0;--footer-link-label-margin-bottom:var(--ic-space-md)}:host(.footer-link-group-small){--footer-link-group-margin-right:0;--footer-link-label-margin-top:var(--ic-space-md);--footer-link-label-margin-bottom:var(--ic-space-md);--footer-link-group-links-padding-left:var(--ic-space-md);--footer-link-group-links-padding-bottom:var(--ic-space-md)}:host(.footer-link-group-small){--footer-link-group-border-bottom:var(--ic-space-1px) solid\n    var(--ic-footer-keyline)}:host(.footer-link-group){margin-right:var(--footer-link-group-margin-right);border-bottom:var(--footer-link-group-border-bottom)}:host(.footer-link-group-small:hover){background-color:var(--ic-footer-hover);cursor:pointer}:host(.footer-link-group-sparse:focus){box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset);outline:var(--ic-hc-focus-outline);z-index:1}:host(.footer-link-group-small:focus){box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset);outline:var(--ic-hc-focus-outline);z-index:1}:host(.footer-link-group-small:active){background-color:var(--ic-footer-pressed)}:host ic-section-container{outline:none}.footer-link-label{margin-top:var(--footer-link-label-margin-top);margin-bottom:var(--footer-link-label-margin-bottom);flex-grow:1}.footer-link-group-toggle{fill:var(--ic-footer-chevron-icon) !important}.footer-link-group-links{display:flex;flex-direction:column}.footer-link-group-header{display:flex;align-items:center}ic-typography{--ic-typography-color:var(--ic-footer-link)}";
+const IcFooterLinkGroupStyle0 = icFooterLinkGroupCss;
 
 const FooterLinkGroup = /*@__PURE__*/ proxyCustomElement(class FooterLinkGroup extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
+        this.expanded = false;
+        this.deviceSize = DEVICE_SIZES.XL;
+        this.dropdownIconStyle = getBrandForegroundAppearance();
+        this.small = false;
         this.handleKeydown = (event) => {
             if (event.key === " " || event.key === "Enter") {
                 this.toggleExpanded();
@@ -18,11 +23,6 @@ const FooterLinkGroup = /*@__PURE__*/ proxyCustomElement(class FooterLinkGroup e
         this.toggleExpanded = () => {
             this.expanded = !this.expanded;
         };
-        this.expanded = false;
-        this.deviceSize = DEVICE_SIZES.XL;
-        this.dropdownIconStyle = getThemeForegroundColor();
-        this.small = false;
-        this.label = undefined;
     }
     componentWillLoad() {
         this.small = this.isSmall(this.el);
@@ -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) {
@@ -58,18 +57,18 @@ const FooterLinkGroup = /*@__PURE__*/ proxyCustomElement(class FooterLinkGroup e
             }, role: "listitem" }, h("div", { class: "footer-link-label" }, h("ic-typography", { variant: "subtitle-small" }, label)), h("div", { class: "footer-link-group-links", role: "list" }, h("slot", null)))) : (h(Host, { class: {
                 ["footer-link-group footer-link-group-small"]: true,
                 [`footer-link-group-${this.dropdownIconStyle}`]: true,
-            }, tabIndex: "1", onClick: this.toggleExpanded, onKeydown: this.handleKeydown, "aria-expanded": this.expanded }, h("ic-section-container", { fullHeight: true }, h("div", { class: "footer-link-group-header" }, h("div", { class: "footer-link-label" }, h("ic-typography", { variant: "label" }, label)), this.expanded ? (h("svg", { class: "footer-link-group-toggle", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", role: "img", width: "1em", height: "1em", preserveAspectRatio: "xMidYMid meet", viewBox: "0 0 1200 1200" }, h("path", { fill: "currentColor", d: "M600.002 210.605L421.285 389.336L0 810.559l178.721 178.836l421.281-421.341l421.281 421.341L1200 810.559L778.733 389.336L600.002 210.605z" }))) : (h("svg", { class: "footer-link-group-toggle", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", role: "img", width: "1em", height: "1em", preserveAspectRatio: "xMidYMid meet", viewBox: "0 0 1200 1200" }, h("g", { transform: "translate(0 1200) scale(1 -1)" }, h("path", { fill: "currentColor", d: "M600.002 210.605L421.285 389.336L0 810.559l178.721 178.836l421.281-421.341l421.281 421.341L1200 810.559L778.733 389.336L600.002 210.605z" }))))), this.expanded && (h("div", { class: "footer-link-group-links", role: "list" }, h("slot", null))))));
+            }, onClick: this.toggleExpanded, onKeydown: this.handleKeydown, "aria-expanded": this.expanded, role: "listitem" }, h("ic-section-container", { tabindex: "0", fullHeight: true }, h("div", { class: "footer-link-group-header" }, h("div", { class: "footer-link-label" }, h("ic-typography", { variant: "label" }, label)), this.expanded ? (h("svg", { class: "footer-link-group-toggle", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", role: "img", width: "1em", height: "1em", preserveAspectRatio: "xMidYMid meet", viewBox: "0 0 1200 1200" }, h("path", { fill: "currentColor", d: "M600.002 210.605L421.285 389.336L0 810.559l178.721 178.836l421.281-421.341l421.281 421.341L1200 810.559L778.733 389.336L600.002 210.605z" }))) : (h("svg", { class: "footer-link-group-toggle", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", role: "img", width: "1em", height: "1em", preserveAspectRatio: "xMidYMid meet", viewBox: "0 0 1200 1200" }, h("g", { transform: "translate(0 1200) scale(1 -1)" }, h("path", { fill: "currentColor", d: "M600.002 210.605L421.285 389.336L0 810.559l178.721 178.836l421.281-421.341l421.281 421.341L1200 810.559L778.733 389.336L600.002 210.605z" }))))), this.expanded && (h("div", { class: "footer-link-group-links", role: "list" }, h("slot", null))))));
     }
     static get delegatesFocus() { return true; }
     get el() { return this; }
-    static get style() { return icFooterLinkGroupCss; }
+    static get style() { return IcFooterLinkGroupStyle0; }
 }, [17, "ic-footer-link-group", {
         "label": [1],
         "expanded": [32],
         "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-light.footer-link-group-small) {\n  --footer-link-group-border-bottom: var(--ic-keyline-lighten);\n}\n\n:host(.footer-link-group-dark.footer-link-group-small) {\n  --footer-link-group-border-bottom: var(--ic-keyline-darken);\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.footer-link-group-light:hover) {\n  background-color: var(--ic-action-light-bg-hover);\n  cursor: pointer;\n}\n\n:host(.footer-link-group-small.footer-link-group-dark:hover) {\n  background-color: var(--ic-action-dark-bg-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.footer-link-group-light:active) {\n  background-color: var(--ic-action-light-bg-active);\n}\n\n:host(.footer-link-group-small.footer-link-group-dark:active) {\n  background-color: var(--ic-action-dark-bg-active);\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: white !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","import {\n  Component,\n  Host,\n  Element,\n  Listen,\n  Prop,\n  h,\n  State,\n} from \"@stencil/core\";\nimport {\n  DEVICE_SIZES,\n  getThemeForegroundColor,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcTheme } from \"../../utils/types\";\n\n@Component({\n  tag: \"ic-footer-link-group\",\n  styleUrl: \"ic-footer-link-group.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class FooterLinkGroup {\n  @Element() el: HTMLIcFooterLinkGroupElement;\n\n  @State() expanded: boolean = false;\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n  @State() dropdownIconStyle = getThemeForegroundColor();\n  @State() small: boolean = false;\n\n  /**\n   * The title of the link group to be displayed.\n   */\n  @Prop() label!: string;\n\n  componentWillLoad(): void {\n    this.small = this.isSmall(this.el);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Footer Link Group\"\n    );\n  }\n\n  @Listen(\"footerResized\", { target: \"document\" })\n  footerResizeHandler(): void {\n    this.small = this.isSmall(this.el);\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  footerThemeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.dropdownIconStyle = theme.mode;\n  }\n\n  private isSmall(e: HTMLElement): boolean {\n    if (e.parentElement !== null) {\n      if (e.parentElement.classList.contains(\"ic-footer\")) {\n        return e.parentElement.classList.contains(\"ic-footer-small\");\n      } else {\n        return this.isSmall(e.parentElement);\n      }\n    } else {\n      return false;\n    }\n  }\n\n  private handleKeydown = (event: KeyboardEvent): void => {\n    if (event.key === \" \" || event.key === \"Enter\") {\n      this.toggleExpanded();\n    }\n  };\n\n  private toggleExpanded = (): void => {\n    this.expanded = !this.expanded;\n  };\n\n  render() {\n    const { small, label } = this;\n\n    return !small ? (\n      <Host\n        class={{\n          [\"footer-link-group footer-link-group-sparse\"]: true,\n          [`footer-link-group-${this.dropdownIconStyle}`]: true,\n        }}\n        role=\"listitem\"\n      >\n        <div class=\"footer-link-label\">\n          <ic-typography variant=\"subtitle-small\">{label}</ic-typography>\n        </div>\n        <div class=\"footer-link-group-links\" role=\"list\">\n          <slot />\n        </div>\n      </Host>\n    ) : (\n      <Host\n        class={{\n          [\"footer-link-group footer-link-group-small\"]: true,\n          [`footer-link-group-${this.dropdownIconStyle}`]: true,\n        }}\n        tabIndex=\"1\"\n        onClick={this.toggleExpanded}\n        onKeydown={this.handleKeydown}\n        aria-expanded={this.expanded}\n      >\n        <ic-section-container fullHeight={true}>\n          <div class=\"footer-link-group-header\">\n            <div class=\"footer-link-label\">\n              <ic-typography variant=\"label\">{label}</ic-typography>\n            </div>\n            {this.expanded ? (\n              <svg\n                class=\"footer-link-group-toggle\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                aria-hidden=\"true\"\n                role=\"img\"\n                width=\"1em\"\n                height=\"1em\"\n                preserveAspectRatio=\"xMidYMid meet\"\n                viewBox=\"0 0 1200 1200\"\n              >\n                <path\n                  fill=\"currentColor\"\n                  d=\"M600.002 210.605L421.285 389.336L0 810.559l178.721 178.836l421.281-421.341l421.281 421.341L1200 810.559L778.733 389.336L600.002 210.605z\"\n                />\n              </svg>\n            ) : (\n              <svg\n                class=\"footer-link-group-toggle\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                aria-hidden=\"true\"\n                role=\"img\"\n                width=\"1em\"\n                height=\"1em\"\n                preserveAspectRatio=\"xMidYMid meet\"\n                viewBox=\"0 0 1200 1200\"\n              >\n                <g transform=\"translate(0 1200) scale(1 -1)\">\n                  <path\n                    fill=\"currentColor\"\n                    d=\"M600.002 210.605L421.285 389.336L0 810.559l178.721 178.836l421.281-421.341l421.281 421.341L1200 810.559L778.733 389.336L600.002 210.605z\"\n                  />\n                </g>\n              </svg>\n            )}\n          </div>\n          {this.expanded && (\n            <div class=\"footer-link-group-links\" role=\"list\">\n              <slot />\n            </div>\n          )}\n        </ic-section-container>\n      </Host>\n    );\n  }\n}\n"],"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,8 +1,9 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { D as DEVICE_SIZES, n 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-hyperlink)}.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-hyperlink-visited)}.ic-link.light:visited>.ic-link-open-in-new-icon{fill:var(--ic-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-primary-text)}:host(.footer-link-light) ::slotted(svg),:host(.footer-link-dark) ::slotted(svg){fill:var(--ic-theme-text)}@media (forced-colors: active){:host(.footer-link-light) ::slotted(svg),:host(.footer-link-dark) ::slotted(svg){fill:currentcolor}}";
+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)}:host(.footer-logo-link){transition:var(--ic-easing-transition-fast)}:host(.footer-logo-link:hover){background-color:var(--ic-footer-hover)}:host(.footer-logo-link:active){background-color:var(--ic-footer-pressed)}:host(.footer-logo-link:focus){box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);outline:var(--ic-hc-focus-outline)}@media (forced-colors: active){:host(.footer-link-light) ::slotted(svg),:host(.footer-link-dark) ::slotted(svg){fill:currentcolor}}";
+const IcFooterLinkStyle0 = icFooterLinkCss;
 
 const FooterLink = /*@__PURE__*/ proxyCustomElement(class FooterLink extends HTMLElement {
     constructor() {
@@ -11,13 +12,11 @@ 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();
+        /**
+         * If `true`, the user can save the linked URL instead of navigating to it.
+         */
         this.download = false;
-        this.href = null;
-        this.hreflang = undefined;
-        this.referrerpolicy = undefined;
-        this.rel = undefined;
-        this.target = undefined;
     }
     componentWillLoad() {
         this.footerConfig = this.inferConfig(this.el);
@@ -25,9 +24,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) {
@@ -48,15 +46,17 @@ const FooterLink = /*@__PURE__*/ proxyCustomElement(class FooterLink extends HTM
     render() {
         const { footerConfig, href, hreflang, referrerpolicy, rel, target, download, } = this;
         const { small, grouped } = footerConfig;
-        return (h(Host, { class: {
+        const isLogoLink = !!this.el.closest("div[slot='logo']");
+        return (h(Host, { key: 'fa83d7e8a1df86667efde5fd8e150ebc5fd2570e', class: {
                 "footer-link": true,
                 [`footer-link-${grouped ? "grouped" : "ungrouped"}-${small ? "small" : "sparse"}`]: true,
                 [`footer-link-${this.foregroundColor}`]: true,
-            }, role: "listitem" }, h("ic-link", { href: href, hreflang: hreflang, referrerpolicy: referrerpolicy, rel: rel, download: download !== false ? download : null, target: target }, h("slot", null))));
+                "footer-logo-link": isLogoLink,
+            }, role: "listitem" }, h("ic-link", { key: 'd461836f1dbf15482782f7197ddc8933d76b3560', class: "footer-link", href: href, hreflang: hreflang, referrerpolicy: referrerpolicy, rel: rel, download: download !== false ? download : undefined, target: target }, h("slot", { key: 'd78502035082f67c50300e3fe84e2d952f3de448' }))));
     }
     static get delegatesFocus() { return true; }
     get el() { return this; }
-    static get style() { return icFooterLinkCss; }
+    static get style() { return IcFooterLinkStyle0; }
 }, [17, "ic-footer-link", {
         "download": [8],
         "href": [1],
@@ -67,7 +67,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;