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

package/dist/collection/components/ic-divider/ic-divider.stories.js

@@ -0,0 +1,394 @@
+import { html } from "lit-html";
+
+const defaultArgs = {
+  "border-style": "solid",
+  label: "",
+  "label-placement": "none",
+  monochrome: false,
+  orientation: "horizontal",
+  theme: "inherit",
+  weight: "thin",
+  "--ic-divider-horizontal-width": "100%",
+  "--ic-divider-vertical-height": "400px",
+  "--ic-divider-background": "",
+  "--ic-divider-background-monochrome": "",
+  "--ic-divider-label": "",
+  "--ic-divider-label-monochrome": "",
+  "--ic-divider-label-width": "",
+};
+
+export default {
+  title: "Web Components/Divider",
+  component: "ic-divider",
+};
+
+export const Theme = {
+  render: () =>
+    html` <div
+      style="display: flex; flex-direction: column; gap: var(--ic-space-md)"
+    >
+      <ic-divider
+        theme="inherit"
+        weight="medium"
+        label="theme='inherit'"
+        label-placement="left"
+      ></ic-divider>
+      <ic-divider
+        theme="inherit"
+        monochrome="true"
+        weight="medium"
+        label="theme='inherit', monochrome='true'"
+        label-placement="left"
+      ></ic-divider>
+      <div
+        style="display:flex; flex-direction: column; align-items: center; background-color: #fff; width: 100%; padding: var(--ic-space-xs) 0; gap: var(--ic-space-md)"
+      >
+        <ic-divider
+          theme="light"
+          weight="medium"
+          label="theme='light'"
+          label-placement="left"
+        ></ic-divider>
+        <ic-divider
+          theme="light"
+          monochrome="true"
+          weight="medium"
+          label="theme='light', monochrome='true'"
+          label-placement="left"
+        ></ic-divider>
+      </div>
+      <div
+        style="display:flex; flex-direction: column; align-items: center; background-color: var(--ic-color-background-primary-dark); width: 100%; padding: var(--ic-space-xs) 0; gap: var(--ic-space-md)"
+      >
+        <ic-divider
+          theme="dark"
+          weight="medium"
+          label="theme='dark'"
+          label-placement="left"
+        ></ic-divider>
+        <ic-divider
+          theme="dark"
+          monochrome="true"
+          weight="medium"
+          label="theme='dark', monochrome='true'"
+          label-placement="left"
+        ></ic-divider>
+      </div>
+    </div>`,
+
+  name: "Theme",
+};
+
+export const Weight = {
+  render: () =>
+    html` <div
+      style="display: flex; flex-direction: column; gap: var(--ic-space-md)"
+    >
+      <ic-divider weight="thin"></ic-divider>
+      <ic-divider weight="thin" border-style="dashed"></ic-divider>
+      <ic-divider
+        weight="thin"
+        label="End of section"
+        label-placement="center"
+      ></ic-divider>
+      <ic-divider weight="medium"></ic-divider>
+      <ic-divider weight="medium" border-style="dashed"></ic-divider>
+      <ic-divider
+        weight="medium"
+        label="End of section"
+        label-placement="center"
+      ></ic-divider>
+      <ic-divider weight="thick"></ic-divider>
+      <ic-divider weight="thick" border-style="dashed"></ic-divider>
+      <ic-divider
+        weight="thick"
+        label="End of section"
+        label-placement="center"
+      ></ic-divider>
+      <ic-divider weight="very-thick"></ic-divider>
+      <ic-divider weight="very-thick" border-style="dashed"></ic-divider>
+      <ic-divider
+        weight="very-thick"
+        label="End of section"
+        label-placement="center"
+      ></ic-divider>
+    </div>`,
+
+  name: "Weight",
+};
+
+export const BorderStyle = {
+  render: () =>
+    html` <div
+      style="display: flex; flex-direction: column; gap: var(--ic-space-md)"
+    >
+      <ic-divider border-style="solid"></ic-divider>
+      <ic-divider border-style="dashed"></ic-divider>
+    </div>`,
+
+  name: "Border style",
+};
+
+export const Vertical = {
+  render: () => html`
+    <div style="display: flex; gap: var(--ic-space-lg); height: 400px">
+      <ic-divider label-placement="top" orientation="vertical" weight="thin">
+        <ic-typography variant="label" slot="label">
+          <p style="width: max-content;">Slotted label top</p>
+        </ic-typography></ic-divider
+      >
+      <ic-divider
+        orientation="vertical"
+        weight="thin"
+        border-style="dashed"
+      ></ic-divider>
+      <ic-divider orientation="vertical" weight="medium"></ic-divider>
+      <ic-divider
+        label="Label center"
+        label-placement="center"
+        orientation="vertical"
+        border-style="dashed"
+        weight="medium"
+      ></ic-divider>
+      <ic-divider orientation="vertical" weight="thick"></ic-divider>
+      <ic-divider
+        orientation="vertical"
+        weight="thick"
+        border-style="dashed"
+      ></ic-divider>
+      <ic-divider orientation="vertical" weight="very-thick"></ic-divider>
+      <ic-divider
+        orientation="vertical"
+        weight="very-thick"
+        border-style="dashed"
+      ></ic-divider>
+    </div>
+  `,
+
+  name: "Vertical",
+};
+
+export const MaxContent = {
+  render: () => html` <div
+        style="display: flex; flex-direction: column; gap: var(--ic-space-lg)"
+      >
+        <ic-divider 
+          label="🎶 Now this is a story all about how my life got brewed up and turned around. And I’d like to take a minute, just sit right there; I’ll tell you how I became the prince of a café called Bel-Air 🎶
+          🎶 In west Philadelphia, born and raised; in the coffee shop was where I spent most of my days. Chillin’ out, maxin’, relaxin’ all cool, sippin’ on some cappuccinos outside of the school 🎶"
+          label-placement="left"></ic-divider
+        >
+        <ic-divider 
+          label="🎶 Now this is a story all about how my life got brewed up and turned around. And I’d like to take a minute, just sit right there; I’ll tell you how I became the prince of a café called Bel-Air 🎶
+          🎶 In west Philadelphia, born and raised; in the coffee shop was where I spent most of my days. Chillin’ out, maxin’, relaxin’ all cool, sippin’ on some cappuccinos outside of the school 🎶"
+          label-placement="center"></ic-divider
+        >
+      </div>
+      <ic-divider label-placement="right">
+          <ic-typography variant="label" slot="label" style="width: max-content;max-width: 100%;">
+            <p style="width: inherit;">A slotted label: 🎶 Now this is a story all about how my life got brewed up and turned around. And I’d like to take a minute, just sit right there; I’ll tell you how I became the prince of a café called Bel-Air 🎶
+        🎶 In west Philadelphia, born and raised; in the coffee shop was where I spent most of my days. Chillin’ out, maxin’, relaxin’ all cool, sippin’ on some cappuccinos outside of the school 🎶</p>
+          </ic-typography></ic-divider
+        >
+      </div>
+      <div
+        style="display: flex; gap: var(--ic-space-lg); height: 600px; margin-top: var(--ic-space-lg)"
+      >
+        <ic-divider
+          label="A vertical divider: 🎶 Now this is a story all about how my life got brewed up and turned around. And I’d like to take a minute, just sit right there; I’ll tell you how I became the prince of a café called Bel-Air 🎶
+        🎶 In west Philadelphia, born and raised; in the coffee shop was where I spent most of my days. Chillin’ out, maxin’, relaxin’ all cool, sippin’ on some cappuccinos outside of the school 🎶"
+          label-placement="top"
+          orientation="vertical"
+        ></ic-divider>
+      </div>`,
+
+  name: "Max content",
+};
+
+export const LabelPlacement = {
+  render: () =>
+    html` <div
+        style="display: flex; flex-direction: column; gap: var(--ic-space-lg)"
+      >
+        <ic-divider label="Label left" label-placement="left"></ic-divider>
+        <ic-divider label="Label center" label-placement="center"></ic-divider>
+        <ic-divider label="Label right" label-placement="right"></ic-divider>
+        <ic-divider label-placement="left">
+          <ic-typography variant="label" slot="label">
+            <p style="width: max-content;">Slotted label left</p>
+          </ic-typography></ic-divider
+        >
+        <ic-divider label-placement="center">
+          <ic-typography variant="label" slot="label">
+            <p style="width: max-content;">Slotted label center</p>
+          </ic-typography></ic-divider
+        >
+        <ic-divider label-placement="right">
+          <ic-typography variant="label" slot="label">
+            <p style="width: max-content;">Slotted label right</p>
+          </ic-typography></ic-divider
+        >
+      </div>
+      <div
+        style="display: flex; gap: var(--ic-space-lg); height: 200px; margin-top: var(--ic-space-lg)"
+      >
+        <ic-divider
+          label="Label top"
+          label-placement="top"
+          orientation="vertical"
+        ></ic-divider>
+        <ic-divider
+          label="Label center"
+          label-placement="center"
+          orientation="vertical"
+        ></ic-divider>
+        <ic-divider
+          label="Label bottom"
+          label-placement="bottom"
+          orientation="vertical"
+        ></ic-divider>
+        <ic-divider label-placement="top" orientation="vertical">
+          <ic-typography variant="label" slot="label">
+            <p style="width: max-content;">Slotted label top</p>
+          </ic-typography></ic-divider
+        >
+        <ic-divider label-placement="center" orientation="vertical">
+          <ic-typography variant="label" slot="label">
+            <p style="width: max-content;">Slotted label center</p>
+          </ic-typography></ic-divider
+        >
+        <ic-divider label-placement="bottom" orientation="vertical">
+          <ic-typography variant="label" slot="label">
+            <p style="width: max-content;">Slotted label bottom</p>
+          </ic-typography></ic-divider
+        >
+      </div>`,
+
+  name: "Label placement",
+};
+
+export const Playground = {
+  render: (args) => {
+    const backgroundColor =
+      args.theme === "dark"
+        ? "var(--ic-color-background-primary-dark)"
+        : args.theme === "light"
+        ? "var(--ic-color-background-primary-light)"
+        : "transparent";
+
+    return html`<div
+      style="display: flex; width: 100%; height: 100%; padding: var(--ic-space-md); background-color: ${backgroundColor}; box-sizing: border-box;"
+    >
+      <ic-divider
+        monochrome=${args.monochrome}
+        orientation=${args.orientation}
+        theme=${args.theme}
+        border-style=${args["border-style"]}
+        weight=${args.weight}
+        label=${args.label}
+        label-placement=${args["label-placement"]}
+        style="
+            --ic-divider-horizontal-width: ${args[
+          "--ic-divider-horizontal-width"
+        ]};
+            --ic-divider-vertical-height: ${args[
+          "--ic-divider-vertical-height"
+        ]};
+            ${args["--ic-divider-background"] !== ""
+          ? `--ic-divider-background: ${args["--ic-divider-background"]};`
+          : ""}
+            ${args["--ic-divider-background-monochrome"] !== ""
+          ? `--ic-divider-background-monochrome: ${args["--ic-divider-background-monochrome"]};`
+          : ""}
+            ${args["--ic-divider-label"] !== ""
+          ? `--ic-divider-label: ${args["--ic-divider-label"]};`
+          : ""}
+            ${args["--ic-divider-label-monochrome"] !== ""
+          ? `--ic-divider-label-monochrome: ${args["--ic-divider-label-monochrome"]};`
+          : ""}
+            ${args["--ic-divider-label-width"] !== ""
+          ? `--ic-divider-label-width: ${args["--ic-divider-label-width"]};`
+          : ""}"
+      ></ic-divider>
+    </div>`;
+  },
+
+  args: defaultArgs,
+
+  argTypes: {
+    "border-style": {
+      options: ["solid", "dashed"],
+
+      control: {
+        type: "inline-radio",
+      },
+    },
+
+    label: {
+      mapping: {
+        none: "",
+      },
+    },
+
+    "label-placement": {
+      options: ["none", "left", "center", "right", "top", "bottom"],
+
+      mapping: {
+        none: "",
+      },
+
+      control: {
+        type: "radio",
+      },
+    },
+
+    orientation: {
+      options: ["horizontal", "vertical"],
+
+      control: {
+        type: "inline-radio",
+      },
+    },
+
+    theme: {
+      options: ["inherit", "dark", "light"],
+
+      control: {
+        type: "radio",
+      },
+    },
+
+    weight: {
+      options: ["thin", "medium", "thick", "very-thick"],
+
+      control: {
+        type: "radio",
+      },
+    },
+
+    "--ic-divider-background": {
+      control: {
+        type: "color",
+      },
+    },
+
+    "--ic-divider-background-monochrome": {
+      control: {
+        type: "color",
+      },
+    },
+
+    "--ic-divider-label": {
+      control: {
+        type: "color",
+      },
+    },
+
+    "--ic-divider-label-monochrome": {
+      control: {
+        type: "color",
+      },
+    },
+  },
+
+  name: "Playground",
+};

package/dist/collection/components/ic-divider/ic-divider.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ic-divider.types.js.map

package/dist/collection/components/ic-divider/ic-divider.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-divider.types.js","sourceRoot":"","sources":["../../../src/components/ic-divider/ic-divider.types.tsx"],"names":[],"mappings":"","sourcesContent":["export type IcDividerStyles = \"solid\" | \"dashed\";\nexport type IcDividerWeights = \"thin\" | \"medium\" | \"thick\" | \"very-thick\";\nexport type IcDividerLabelPlacement =\n  | \"left\"\n  | \"center\"\n  | \"right\"\n  | \"top\"\n  | \"bottom\";\n"]}

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

@@ -1,5 +1,6 @@
 import { newSpecPage } from "@stencil/core/testing";
 import { Divider } from "../../ic-divider";
+import { Typography } from "../../../ic-typography/ic-typography";
 describe("ic-divider", () => {
     it("should render", async () => {
         const page = await newSpecPage({
@@ -8,17 +9,101 @@ describe("ic-divider", () => {
         });
         expect(page.root).toMatchSnapshot();
     });
-    it("correctly sets foregroundColor on theme change", async () => {
+    it("should render with a slotted label", async () => {
         const page = await newSpecPage({
             components: [Divider],
-            html: `<ic-divider></ic-divider>`,
+            html: `<ic-divider label-placement="left">
+        <ic-typography variant="label" slot="label">
+          <p style="width: max-content;">Slotted label left</p>
+        </ic-typography>
+      </ic-divider>`,
         });
-        await page.rootInstance.themeChangeHandler({
-            detail: { mode: "light" },
+        expect(page.root).toMatchSnapshot();
+    });
+    it("should render a label with the label typography variant when weight is not set to thick or very-thick and a label is provided", async () => {
+        const page = await newSpecPage({
+            components: [Divider, Typography],
+            html: `<ic-divider weight="medium" label="Test label"></ic-divider>`,
         });
-        await page.waitForChanges();
+        const label = page.root.querySelector("ic-typography");
+        expect(label.variant).toBe("label");
+        expect(page.root).toMatchSnapshot();
+    });
+    it("should render a label with the subtitle-large typography variant when weight is set to thick and a label is provided", async () => {
+        const page = await newSpecPage({
+            components: [Divider, Typography],
+            html: `<ic-divider weight="thick" label="Test label"></ic-divider>`,
+        });
+        const label = page.root.querySelector("ic-typography");
+        expect(label.variant).toBe("subtitle-large");
+        expect(page.root).toMatchSnapshot();
+    });
+    it("should render a label with the h4 typography variant when weight is set to very-thick and a label is provided", async () => {
+        const page = await newSpecPage({
+            components: [Divider, Typography],
+            html: `<ic-divider weight="very-thick" label="Test label"></ic-divider>`,
+        });
+        const label = page.root.querySelector("ic-typography");
+        expect(label.variant).toBe("h4");
         expect(page.root).toMatchSnapshot();
+    });
+    it("should console error if there's an invalid prop combination of the placement prop and the orientation", async () => {
+        console.error = jest.fn();
+        const page = await newSpecPage({
+            components: [Divider],
+            html: `<ic-divider orientation="vertical" label-placement="left" label="Test label"></ic-divider>`,
+        });
+        await page.waitForChanges();
+        expect(console.error).toHaveBeenCalledWith("Left label placement is not applicable for a vertical ic-divider (web-components) / IcDivider (react)");
+    });
+    it("correctly sets foregroundColor on brand change", async () => {
+        const page = await newSpecPage({
+            components: [Divider],
+            html: `<ic-side-navigation version="v0.0.0" status="BETA" app-title="ACME">
+      <ic-navigation-item slot="primary-navigation" href="/" label="Home">
+            <svg
+              slot="icon"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z"
+                fill="currentColor"
+              />
+            </svg>
+          </ic-navigation-item>
+      <ic-divider slot="primary-navigation"></ic-divider>
+        <ic-navigation-item slot="primary-navigation" href="/" label="a11y">
+          <svg
+            slot="icon"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12 2C13.1 2 14 2.9 14 4C14 5.1 13.1 6 12 6C10.9 6 10 5.1 10 4C10 2.9 10.9 2 12 2ZM21 9H15V22H13V16H11V22H9V9H3V7H21V9Z"
+              fill="currentColor"
+            />
+          </svg>
+        </ic-navigation-item>
+        </ic-side-navigation>`,
+        });
         expect(page.rootInstance.foregroundColor).toEqual("light");
+        expect(page.rootInstance.theme).toEqual("dark");
+        expect(page.root).toMatchSnapshot("brand-change-light");
+        await page.rootInstance.brandChangeHandler({
+            detail: { mode: "dark" },
+        });
+        await page.rootInstance.updateMonochromeState();
+        await page.waitForChanges();
+        expect(page.rootInstance.foregroundColor).toEqual("dark");
+        expect(page.rootInstance.theme).toEqual("light");
+        expect(page.root).toMatchSnapshot("brand-change-dark");
     });
 });
 //# sourceMappingURL=ic-divider.spec.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ic-divider.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-divider/test/basic/ic-divider.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAE3C,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;IAC1B,EAAE,CAAC,eAAe,EAAE,KAAK,IAAI,EAAE;QAC7B,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,OAAO,CAAC;YACrB,IAAI,EAAE,2BAA2B;SAClC,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACtC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gDAAgD,EAAE,KAAK,IAAI,EAAE;QAC9D,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,OAAO,CAAC;YACrB,IAAI,EAAE,2BAA2B;SAClC,CAAC,CAAC;QAEH,MAAM,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC;YACzC,MAAM,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC1B,CAAC,CAAC;QACH,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;QAEpC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;IAC7D,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { Divider } from \"../../ic-divider\";\n\ndescribe(\"ic-divider\", () => {\n  it(\"should render\", async () => {\n    const page = await newSpecPage({\n      components: [Divider],\n      html: `<ic-divider></ic-divider>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"correctly sets foregroundColor on theme change\", async () => {\n    const page = await newSpecPage({\n      components: [Divider],\n      html: `<ic-divider></ic-divider>`,\n    });\n\n    await page.rootInstance.themeChangeHandler({\n      detail: { mode: \"light\" },\n    });\n    await page.waitForChanges();\n    expect(page.root).toMatchSnapshot();\n\n    expect(page.rootInstance.foregroundColor).toEqual(\"light\");\n  });\n});\n"]}
+{"version":3,"file":"ic-divider.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-divider/test/basic/ic-divider.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { Divider } from \"../../ic-divider\";\nimport { Typography } from \"../../../ic-typography/ic-typography\";\n\ndescribe(\"ic-divider\", () => {\n  it(\"should render\", async () => {\n    const page = await newSpecPage({\n      components: [Divider],\n      html: `<ic-divider></ic-divider>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with a slotted label\", async () => {\n    const page = await newSpecPage({\n      components: [Divider],\n      html: `<ic-divider label-placement=\"left\">\n        <ic-typography variant=\"label\" slot=\"label\">\n          <p style=\"width: max-content;\">Slotted label left</p>\n        </ic-typography>\n      </ic-divider>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render a label with the label typography variant when weight is not set to thick or very-thick and a label is provided\", async () => {\n    const page = await newSpecPage({\n      components: [Divider, Typography],\n      html: `<ic-divider weight=\"medium\" label=\"Test label\"></ic-divider>`,\n    });\n\n    const label = page.root.querySelector(\"ic-typography\");\n\n    expect(label.variant).toBe(\"label\");\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render a label with the subtitle-large typography variant when weight is set to thick and a label is provided\", async () => {\n    const page = await newSpecPage({\n      components: [Divider, Typography],\n      html: `<ic-divider weight=\"thick\" label=\"Test label\"></ic-divider>`,\n    });\n\n    const label = page.root.querySelector(\"ic-typography\");\n\n    expect(label.variant).toBe(\"subtitle-large\");\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render a label with the h4 typography variant when weight is set to very-thick and a label is provided\", async () => {\n    const page = await newSpecPage({\n      components: [Divider, Typography],\n      html: `<ic-divider weight=\"very-thick\" label=\"Test label\"></ic-divider>`,\n    });\n\n    const label = page.root.querySelector(\"ic-typography\");\n\n    expect(label.variant).toBe(\"h4\");\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should console error if there's an invalid prop combination of the placement prop and the orientation\", async () => {\n    console.error = jest.fn();\n    const page = await newSpecPage({\n      components: [Divider],\n      html: `<ic-divider orientation=\"vertical\" label-placement=\"left\" label=\"Test label\"></ic-divider>`,\n    });\n\n    await page.waitForChanges();\n\n    expect(console.error).toHaveBeenCalledWith(\n      \"Left label placement is not applicable for a vertical ic-divider (web-components) / IcDivider (react)\"\n    );\n  });\n\n  it(\"correctly sets foregroundColor on brand change\", async () => {\n    const page = await newSpecPage({\n      components: [Divider],\n      html: `<ic-side-navigation version=\"v0.0.0\" status=\"BETA\" app-title=\"ACME\">\n      <ic-navigation-item slot=\"primary-navigation\" href=\"/\" label=\"Home\">\n            <svg\n              slot=\"icon\"\n              width=\"24\"\n              height=\"24\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n                fill=\"currentColor\"\n              />\n            </svg>\n          </ic-navigation-item>\n      <ic-divider slot=\"primary-navigation\"></ic-divider>\n        <ic-navigation-item slot=\"primary-navigation\" href=\"/\" label=\"a11y\">\n          <svg\n            slot=\"icon\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M12 2C13.1 2 14 2.9 14 4C14 5.1 13.1 6 12 6C10.9 6 10 5.1 10 4C10 2.9 10.9 2 12 2ZM21 9H15V22H13V16H11V22H9V9H3V7H21V9Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        </ic-navigation-item>\n        </ic-side-navigation>`,\n    });\n\n    expect(page.rootInstance.foregroundColor).toEqual(\"light\");\n    expect(page.rootInstance.theme).toEqual(\"dark\");\n\n    expect(page.root).toMatchSnapshot(\"brand-change-light\");\n\n    await page.rootInstance.brandChangeHandler({\n      detail: { mode: \"dark\" },\n    });\n\n    await page.rootInstance.updateMonochromeState();\n    await page.waitForChanges();\n\n    expect(page.rootInstance.foregroundColor).toEqual(\"dark\");\n    expect(page.rootInstance.theme).toEqual(\"light\");\n\n    expect(page.root).toMatchSnapshot(\"brand-change-dark\");\n  });\n});\n"]}

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

@@ -47,3 +47,18 @@
   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);
+}

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

@@ -1,5 +1,5 @@
-import { h, Host, forceUpdate } from "@stencil/core";
-import { isSlotUsed, onComponentRequiredPropUndefined, checkSlotInChildMutations, } from "../../utils/helpers";
+import { h, Host } from "@stencil/core";
+import { isSlotUsed, onComponentRequiredPropUndefined, renderDynamicChildSlots, } from "../../utils/helpers";
 /**
  * @slot image - Content is placed at the top above all other content.
  * @slot actions - Content is placed at the bottom below all other content.
@@ -10,22 +10,13 @@ import { isSlotUsed, onComponentRequiredPropUndefined, checkSlotInChildMutations
 export class EmptyState {
     constructor() {
         this.hostMutationObserver = null;
-        this.hostMutationCallback = (mutationList) => {
-            if (mutationList.some(({ type, addedNodes, removedNodes }) => type === "childList"
-                ? checkSlotInChildMutations(addedNodes, removedNodes, [
-                    "image",
-                    "actions",
-                ])
-                : false)) {
-                forceUpdate(this);
-            }
-        };
         this.aligned = "left";
         this.body = undefined;
         this.maxLines = undefined;
         this.heading = undefined;
         this.imageSize = "medium";
         this.subheading = undefined;
+        this.theme = "inherit";
     }
     disconnectedCallback() {
         var _a;
@@ -34,17 +25,18 @@ export class EmptyState {
     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;
+        const { aligned, body, maxLines, heading, imageSize, subheading, theme } = this;
         return (h(Host, { 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", { name: "image" }), h("div", null, h("slot", { name: "heading" }, h("ic-typography", { variant: "h4", class: "empty-state-heading" }, heading)), h("slot", { name: "subheading" }, h("ic-typography", { variant: "subtitle-small", class: "empty-state-subheading" }, subheading)), h("slot", { name: "body" }, h("ic-typography", { maxLines: maxLines, class: "empty-state-body" }, body))), isSlotUsed(this.el, "actions") && (h("div", { class: "action-area" }, h("slot", { name: "actions" })))));
     }
     static get is() { return "ic-empty-state"; }
     static get encapsulation() { return "shadow"; }
@@ -175,6 +167,30 @@ export class EmptyState {
                 },
                 "attribute": "subheading",
                 "reflect": false
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcThemeMode",
+                    "resolved": "\"dark\" | \"inherit\" | \"light\"",
+                    "references": {
+                        "IcThemeMode": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcThemeMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "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."
+                },
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "\"inherit\""
             }
         };
     }