@ukic/web-components 2.1.0-beta.14 → 2.1.0-beta.16

package/dist/collection/components/ic-tab-context/ic-tab-context.spec.js

@@ -0,0 +1,369 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { TabGroup } from "../ic-tab-group/ic-tab-group";
+import { TabPanel } from "../ic-tab-panel/ic-tab-panel";
+import { Tab } from "../ic-tab/ic-tab";
+import { TabContext } from "./ic-tab-context";
+beforeAll(() => {
+  jest.spyOn(console, "warn").mockImplementation(jest.fn());
+});
+describe("ic-tab-context component", () => {
+  it("should render tab context with tabs", async () => {
+    const page = await newSpecPage({
+      components: [TabContext, TabGroup, Tab, TabPanel],
+      html: `<ic-tab-context>
+      <ic-tab-group label="Example tab group">
+        <ic-tab>One</ic-tab>
+        <ic-tab>Two</ic-tab>
+        <ic-tab>Three</ic-tab>
+      </ic-tab-group>
+      <ic-tab-panel>Tab One</ic-tab-panel>
+      <ic-tab-panel>Tab Two</ic-tab-panel>
+      <ic-tab-panel>Tab Three</ic-tab-panel>
+      </ic-tab-context>`,
+    });
+    expect(page.root).toMatchSnapshot();
+    //test disconnected callback for automatic activation
+    page.setContent("");
+  });
+  it("should render tab context with tabs - light appearance", async () => {
+    const page = await newSpecPage({
+      components: [TabContext, TabGroup, Tab, TabPanel],
+      html: `<ic-tab-context appearance="light">
+      <ic-tab-group label="Example tab group" appearance="light">
+        <ic-tab>One</ic-tab>
+        <ic-tab>Two</ic-tab>
+        <ic-tab>Three</ic-tab>
+      </ic-tab-group>
+      <ic-tab-panel>Tab One</ic-tab-panel>
+      <ic-tab-panel>Tab Two</ic-tab-panel>
+      <ic-tab-panel>Tab Three</ic-tab-panel>
+      </ic-tab-context>`,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should render tab context with tabs - selected tab", async () => {
+    const page = await newSpecPage({
+      components: [TabContext, TabGroup, Tab, TabPanel],
+      html: `<ic-tab-context selected-tab-index="2">
+      <ic-tab-group label="Example tab group">
+        <ic-tab>One</ic-tab>
+        <ic-tab>Two</ic-tab>
+        <ic-tab>Three</ic-tab>
+      </ic-tab-group>
+      <ic-tab-panel>Tab One</ic-tab-panel>
+      <ic-tab-panel>Tab Two</ic-tab-panel>
+      <ic-tab-panel>Tab Three</ic-tab-panel>
+      </ic-tab-context>`,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should test controlled mode - selected tab", async () => {
+    const page = await newSpecPage({
+      components: [TabContext, TabGroup, Tab, TabPanel],
+      html: `<ic-tab-context selected-tab-index="2">
+      <ic-tab-group label="Example tab group">
+        <ic-tab>One</ic-tab>
+        <ic-tab>Two</ic-tab>
+        <ic-tab>Three</ic-tab>
+      </ic-tab-group>
+      <ic-tab-panel>Tab One</ic-tab-panel>
+      <ic-tab-panel>Tab Two</ic-tab-panel>
+      <ic-tab-panel>Tab Three</ic-tab-panel>
+      </ic-tab-context>`,
+    });
+    expect(page.rootInstance.selectedTab).toBe(2);
+    const eventSpy = jest.fn();
+    page.root.addEventListener("icTabSelect", eventSpy);
+    const tabGroup = page.root.querySelector("ic-tab-group");
+    tabGroup.dispatchEvent(new window.window.KeyboardEvent("keydown", {
+      key: "Home",
+      bubbles: true,
+      cancelable: true,
+    }));
+    await page.waitForChanges();
+    expect(eventSpy).toHaveBeenCalled();
+  });
+  it("should render tab context with tabs - manual activation", async () => {
+    const page = await newSpecPage({
+      components: [TabContext, TabGroup, Tab, TabPanel],
+      html: `<ic-tab-context activation-type="manual">
+      <ic-tab-group label="Example tab group">
+        <ic-tab>One</ic-tab>
+        <ic-tab>Two</ic-tab>
+        <ic-tab>Three</ic-tab>
+      </ic-tab-group>
+      <ic-tab-panel>Tab One</ic-tab-panel>
+      <ic-tab-panel>Tab Two</ic-tab-panel>
+      <ic-tab-panel>Tab Three</ic-tab-panel>
+      </ic-tab-context>`,
+    });
+    expect(page.root).toMatchSnapshot();
+    //test disconnected callback for manual activation
+    page.setContent("");
+  });
+  it("should render tab context with custom contextId", async () => {
+    const page = await newSpecPage({
+      components: [TabContext, TabGroup, Tab, TabPanel],
+      html: `<ic-tab-context context-id="custom-context">
+      <ic-tab-group label="Example tab group">
+        <ic-tab>One</ic-tab>
+        <ic-tab>Two</ic-tab>
+        <ic-tab>Three</ic-tab>
+      </ic-tab-group>
+      <ic-tab-panel>Tab One</ic-tab-panel>
+      <ic-tab-panel>Tab Two</ic-tab-panel>
+      <ic-tab-panel>Tab Three</ic-tab-panel>
+      </ic-tab-context>`,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should test setting selected tab", async () => {
+    const page = await newSpecPage({
+      components: [TabContext, TabGroup, Tab, TabPanel],
+      html: `<ic-tab-context>
+      <ic-tab-group label="Example tab group">
+        <ic-tab>One</ic-tab>
+        <ic-tab>Two</ic-tab>
+        <ic-tab>Three</ic-tab>
+      </ic-tab-group>
+      <ic-tab-panel>Tab One</ic-tab-panel>
+      <ic-tab-panel>Tab Two</ic-tab-panel>
+      <ic-tab-panel>Tab Three</ic-tab-panel>
+      </ic-tab-context>`,
+    });
+    expect(page.rootInstance.selectedTab).toBe(0);
+    page.root.selectedTabIndex = 1;
+    await page.waitForChanges();
+    expect(page.rootInstance.selectedTab).toBe(1);
+  });
+  it("should test tab click handler", async () => {
+    const page = await newSpecPage({
+      components: [TabContext, TabGroup, Tab, TabPanel],
+      html: `<ic-tab-context>
+      <ic-tab-group label="Example tab group">
+        <ic-tab>One</ic-tab>
+        <ic-tab>Two</ic-tab>
+        <ic-tab>Three</ic-tab>
+      </ic-tab-group>
+      <ic-tab-panel>Tab One</ic-tab-panel>
+      <ic-tab-panel>Tab Two</ic-tab-panel>
+      <ic-tab-panel>Tab Three</ic-tab-panel>
+      </ic-tab-context>`,
+    });
+    expect(page.rootInstance.selectedTabIndex).toBe(undefined);
+    const eventSpy = jest.fn();
+    page.root.addEventListener("icTabSelect", eventSpy);
+    await page.rootInstance.tabClickHandler({
+      stopImmediatePropagation: jest.fn(),
+      detail: {
+        contextId: "default",
+        position: 1,
+        tabId: "ic-tab--1-context-default",
+      },
+    });
+    await page.waitForChanges();
+    expect(page.rootInstance.selectedTab).toBe(1);
+    expect(eventSpy).toHaveBeenCalled();
+  });
+  it("should test key down handler - automatic", async () => {
+    const page = await newSpecPage({
+      components: [TabContext, TabGroup, Tab, TabPanel],
+      html: `<ic-tab-context>
+      <ic-tab-group label="Example tab group">
+        <ic-tab>One</ic-tab>
+        <ic-tab>Two</ic-tab>
+        <ic-tab>Three</ic-tab>
+      </ic-tab-group>
+      <ic-tab-panel>Tab One</ic-tab-panel>
+      <ic-tab-panel>Tab Two</ic-tab-panel>
+      <ic-tab-panel>Tab Three</ic-tab-panel>
+      </ic-tab-context>`,
+    });
+    const tabGroup = page.root.querySelector("ic-tab-group");
+    tabGroup.dispatchEvent(new window.window.KeyboardEvent("keydown", {
+      key: "End",
+      bubbles: true,
+      cancelable: true,
+    }));
+    await page.waitForChanges();
+    expect(page.rootInstance.selectedTab).toBe(2);
+    tabGroup.dispatchEvent(new window.window.KeyboardEvent("keydown", {
+      key: "Home",
+      bubbles: true,
+      cancelable: true,
+    }));
+    await page.waitForChanges();
+    expect(page.rootInstance.selectedTab).toBe(0);
+    tabGroup.dispatchEvent(new window.window.KeyboardEvent("keydown", {
+      key: "ArrowLeft",
+      bubbles: true,
+      cancelable: true,
+    }));
+    await page.waitForChanges();
+    expect(page.rootInstance.selectedTab).toBe(2);
+    tabGroup.dispatchEvent(new window.window.KeyboardEvent("keydown", {
+      key: "ArrowLeft",
+      bubbles: true,
+      cancelable: true,
+    }));
+    await page.waitForChanges();
+    expect(page.rootInstance.selectedTab).toBe(1);
+    tabGroup.dispatchEvent(new window.window.KeyboardEvent("keydown", {
+      key: "ArrowRight",
+      bubbles: true,
+      cancelable: true,
+    }));
+    await page.waitForChanges();
+    expect(page.rootInstance.selectedTab).toBe(2);
+    tabGroup.dispatchEvent(new window.window.KeyboardEvent("keydown", {
+      key: "ArrowRight",
+      bubbles: true,
+      cancelable: true,
+    }));
+    await page.waitForChanges();
+    expect(page.rootInstance.selectedTab).toBe(0);
+    tabGroup.dispatchEvent(new window.window.KeyboardEvent("keydown", {
+      key: "Escape",
+      bubbles: true,
+      cancelable: true,
+    }));
+    await page.waitForChanges();
+    expect(page.rootInstance.selectedTab).toBe(0);
+  });
+  it("should test key down handler - manual", async () => {
+    const page = await newSpecPage({
+      components: [TabContext, TabGroup, Tab, TabPanel],
+      html: `<ic-tab-context activation-type="manual">
+      <ic-tab-group label="Example tab group">
+        <ic-tab>One</ic-tab>
+        <ic-tab>Two</ic-tab>
+        <ic-tab>Three</ic-tab>
+      </ic-tab-group>
+      <ic-tab-panel>Tab One</ic-tab-panel>
+      <ic-tab-panel>Tab Two</ic-tab-panel>
+      <ic-tab-panel>Tab Three</ic-tab-panel>
+      </ic-tab-context>`,
+    });
+    const tabGroup = page.root.querySelector("ic-tab-group");
+    tabGroup.dispatchEvent(new window.window.KeyboardEvent("keydown", {
+      key: "End",
+      bubbles: true,
+      cancelable: true,
+    }));
+    await page.waitForChanges();
+    expect(page.rootInstance.selectedTab).toBe(0);
+    expect(page.rootInstance.focusedTabIndex).toBe(2);
+    tabGroup.dispatchEvent(new window.window.KeyboardEvent("keydown", {
+      key: "Enter",
+      bubbles: true,
+      cancelable: true,
+    }));
+    await page.waitForChanges();
+    expect(page.rootInstance.selectedTab).toBe(2);
+    tabGroup.dispatchEvent(new window.window.KeyboardEvent("keydown", {
+      key: "Home",
+      bubbles: true,
+      cancelable: true,
+    }));
+    await page.waitForChanges();
+    expect(page.rootInstance.focusedTabIndex).toBe(0);
+    expect(page.rootInstance.selectedTab).toBe(2);
+    tabGroup.dispatchEvent(new window.window.KeyboardEvent("keydown", {
+      key: " ",
+      bubbles: true,
+      cancelable: true,
+    }));
+    await page.waitForChanges();
+    expect(page.rootInstance.selectedTab).toBe(0);
+    tabGroup.dispatchEvent(new window.window.KeyboardEvent("keydown", {
+      key: "ArrowLeft",
+      bubbles: true,
+      cancelable: true,
+    }));
+    await page.waitForChanges();
+    expect(page.rootInstance.focusedTabIndex).toBe(2);
+    tabGroup.dispatchEvent(new window.window.KeyboardEvent("keydown", {
+      key: "ArrowLeft",
+      bubbles: true,
+      cancelable: true,
+    }));
+    await page.waitForChanges();
+    expect(page.rootInstance.focusedTabIndex).toBe(1);
+    tabGroup.dispatchEvent(new window.window.KeyboardEvent("keydown", {
+      key: "ArrowRight",
+      bubbles: true,
+      cancelable: true,
+    }));
+    await page.waitForChanges();
+    expect(page.rootInstance.focusedTabIndex).toBe(2);
+    tabGroup.dispatchEvent(new window.window.KeyboardEvent("keydown", {
+      key: "ArrowRight",
+      bubbles: true,
+      cancelable: true,
+    }));
+    await page.waitForChanges();
+    expect(page.rootInstance.focusedTabIndex).toBe(0);
+    tabGroup.dispatchEvent(new window.window.KeyboardEvent("keydown", {
+      key: "Escape",
+      bubbles: true,
+      cancelable: true,
+    }));
+    await page.waitForChanges();
+    expect(page.rootInstance.focusedTabIndex).toBe(0);
+  });
+  it("should apply tab and panel ids to elements added after initial render of the context", async () => {
+    const page = await newSpecPage({
+      components: [TabContext, TabGroup, Tab, TabPanel],
+      html: `<ic-tab-context>
+      <ic-tab-group label="Example tab group">
+        <ic-tab>One</ic-tab>
+        <ic-tab>Two</ic-tab>
+        <ic-tab>Three</ic-tab>
+      </ic-tab-group>
+      <ic-tab-panel>Tab One</ic-tab-panel>
+      <ic-tab-panel>Tab Two</ic-tab-panel>
+      <ic-tab-panel>Tab Three</ic-tab-panel>
+      </ic-tab-context>`,
+    });
+    const tabGroup = page.root.querySelector("ic-tab-group");
+    tabGroup.insertAdjacentHTML("beforeend", "<ic-tab>Four</ic-tab>");
+    page.root.insertAdjacentHTML("beforeend", "<ic-tab-panel>Four</ic-tab-panel>");
+    await page.waitForChanges();
+    const newTab = page.root.querySelector('[id*="ic-tab-3-context-default"]');
+    const newTabPanel = page.root.querySelector('[id*="ic-tab-panel-3-context-default"]');
+    expect(newTab.tabId).toBe("ic-tab--3-context-default");
+    expect(newTabPanel.panelId).toBe("ic-tab--3-context-default");
+  });
+  it("should reassign ids if tab and tab panel are dynamically removed", async () => {
+    const page = await newSpecPage({
+      components: [TabContext, TabGroup, Tab, TabPanel],
+      html: `<ic-tab-context>
+      <ic-tab-group label="Example tab group">
+        <ic-tab>One</ic-tab>
+        <ic-tab>Two</ic-tab>
+        <ic-tab>Three</ic-tab>
+      </ic-tab-group>
+      <ic-tab-panel>Tab One</ic-tab-panel>
+      <ic-tab-panel>Tab Two</ic-tab-panel>
+      <ic-tab-panel>Tab Three</ic-tab-panel>
+      </ic-tab-context>`,
+    });
+    const tabGroup = page.root.querySelector("ic-tab-group");
+    let allTabs = tabGroup.querySelectorAll("ic-tab");
+    let allTabPanels = page.root.querySelectorAll("ic-tab-panel");
+    expect(allTabs.length).toBe(3);
+    expect(allTabPanels.length).toBe(3);
+    allTabPanels[allTabPanels.length - 2].remove();
+    allTabs[allTabs.length - 2].remove();
+    await page.waitForChanges();
+    allTabs = tabGroup.querySelectorAll("ic-tab");
+    allTabPanels = page.root.querySelectorAll("ic-tab-panel");
+    expect(allTabs.length).toBe(2);
+    expect(allTabPanels.length).toBe(2);
+    const newlyUpdatedTab = page.root.querySelector('[id*="ic-tab-1-context-default"]');
+    const newlyUpdatedTabPanel = page.root.querySelector('[id*="ic-tab-panel-1-context-default"]');
+    expect(newlyUpdatedTab.tabId).toBe("ic-tab--1-context-default");
+    expect(newlyUpdatedTabPanel.panelId).toBe("ic-tab--1-context-default");
+  });
+});
+//# sourceMappingURL=ic-tab-context.spec.js.map

package/dist/collection/components/ic-tab-context/ic-tab-context.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-tab-context.spec.js","sourceRoot":"","sources":["../../../src/components/ic-tab-context/ic-tab-context.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { TabGroup } from \"../ic-tab-group/ic-tab-group\";\nimport { TabPanel } from \"../ic-tab-panel/ic-tab-panel\";\nimport { Tab } from \"../ic-tab/ic-tab\";\nimport { TabContext } from \"./ic-tab-context\";\n\nbeforeAll(() => {\n  jest.spyOn(console, \"warn\").mockImplementation(jest.fn());\n});\n\ndescribe(\"ic-tab-context component\", () => {\n  it(\"should render tab context with tabs\", async () => {\n    const page = await newSpecPage({\n      components: [TabContext, TabGroup, Tab, TabPanel],\n      html: `<ic-tab-context>\n      <ic-tab-group label=\"Example tab group\">\n        <ic-tab>One</ic-tab>\n        <ic-tab>Two</ic-tab>\n        <ic-tab>Three</ic-tab>\n      </ic-tab-group>\n      <ic-tab-panel>Tab One</ic-tab-panel>\n      <ic-tab-panel>Tab Two</ic-tab-panel>\n      <ic-tab-panel>Tab Three</ic-tab-panel>\n      </ic-tab-context>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n\n    //test disconnected callback for automatic activation\n    page.setContent(\"\");\n  });\n\n  it(\"should render tab context with tabs - light appearance\", async () => {\n    const page = await newSpecPage({\n      components: [TabContext, TabGroup, Tab, TabPanel],\n      html: `<ic-tab-context appearance=\"light\">\n      <ic-tab-group label=\"Example tab group\" appearance=\"light\">\n        <ic-tab>One</ic-tab>\n        <ic-tab>Two</ic-tab>\n        <ic-tab>Three</ic-tab>\n      </ic-tab-group>\n      <ic-tab-panel>Tab One</ic-tab-panel>\n      <ic-tab-panel>Tab Two</ic-tab-panel>\n      <ic-tab-panel>Tab Three</ic-tab-panel>\n      </ic-tab-context>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render tab context with tabs - selected tab\", async () => {\n    const page = await newSpecPage({\n      components: [TabContext, TabGroup, Tab, TabPanel],\n      html: `<ic-tab-context selected-tab-index=\"2\">\n      <ic-tab-group label=\"Example tab group\">\n        <ic-tab>One</ic-tab>\n        <ic-tab>Two</ic-tab>\n        <ic-tab>Three</ic-tab>\n      </ic-tab-group>\n      <ic-tab-panel>Tab One</ic-tab-panel>\n      <ic-tab-panel>Tab Two</ic-tab-panel>\n      <ic-tab-panel>Tab Three</ic-tab-panel>\n      </ic-tab-context>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should test controlled mode - selected tab\", async () => {\n    const page = await newSpecPage({\n      components: [TabContext, TabGroup, Tab, TabPanel],\n      html: `<ic-tab-context selected-tab-index=\"2\">\n      <ic-tab-group label=\"Example tab group\">\n        <ic-tab>One</ic-tab>\n        <ic-tab>Two</ic-tab>\n        <ic-tab>Three</ic-tab>\n      </ic-tab-group>\n      <ic-tab-panel>Tab One</ic-tab-panel>\n      <ic-tab-panel>Tab Two</ic-tab-panel>\n      <ic-tab-panel>Tab Three</ic-tab-panel>\n      </ic-tab-context>`,\n    });\n\n    expect(page.rootInstance.selectedTab).toBe(2);\n\n    const eventSpy = jest.fn();\n    page.root.addEventListener(\"icTabSelect\", eventSpy);\n\n    const tabGroup = page.root.querySelector(\"ic-tab-group\");\n\n    tabGroup.dispatchEvent(\n      new window.window.KeyboardEvent(\"keydown\", {\n        key: \"Home\",\n        bubbles: true,\n        cancelable: true,\n      })\n    );\n\n    await page.waitForChanges();\n    expect(eventSpy).toHaveBeenCalled();\n  });\n\n  it(\"should render tab context with tabs - manual activation\", async () => {\n    const page = await newSpecPage({\n      components: [TabContext, TabGroup, Tab, TabPanel],\n      html: `<ic-tab-context activation-type=\"manual\">\n      <ic-tab-group label=\"Example tab group\">\n        <ic-tab>One</ic-tab>\n        <ic-tab>Two</ic-tab>\n        <ic-tab>Three</ic-tab>\n      </ic-tab-group>\n      <ic-tab-panel>Tab One</ic-tab-panel>\n      <ic-tab-panel>Tab Two</ic-tab-panel>\n      <ic-tab-panel>Tab Three</ic-tab-panel>\n      </ic-tab-context>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n\n    //test disconnected callback for manual activation\n    page.setContent(\"\");\n  });\n\n  it(\"should render tab context with custom contextId\", async () => {\n    const page = await newSpecPage({\n      components: [TabContext, TabGroup, Tab, TabPanel],\n      html: `<ic-tab-context context-id=\"custom-context\">\n      <ic-tab-group label=\"Example tab group\">\n        <ic-tab>One</ic-tab>\n        <ic-tab>Two</ic-tab>\n        <ic-tab>Three</ic-tab>\n      </ic-tab-group>\n      <ic-tab-panel>Tab One</ic-tab-panel>\n      <ic-tab-panel>Tab Two</ic-tab-panel>\n      <ic-tab-panel>Tab Three</ic-tab-panel>\n      </ic-tab-context>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should test setting selected tab\", async () => {\n    const page = await newSpecPage({\n      components: [TabContext, TabGroup, Tab, TabPanel],\n      html: `<ic-tab-context>\n      <ic-tab-group label=\"Example tab group\">\n        <ic-tab>One</ic-tab>\n        <ic-tab>Two</ic-tab>\n        <ic-tab>Three</ic-tab>\n      </ic-tab-group>\n      <ic-tab-panel>Tab One</ic-tab-panel>\n      <ic-tab-panel>Tab Two</ic-tab-panel>\n      <ic-tab-panel>Tab Three</ic-tab-panel>\n      </ic-tab-context>`,\n    });\n\n    expect(page.rootInstance.selectedTab).toBe(0);\n\n    page.root.selectedTabIndex = 1;\n    await page.waitForChanges();\n\n    expect(page.rootInstance.selectedTab).toBe(1);\n  });\n\n  it(\"should test tab click handler\", async () => {\n    const page = await newSpecPage({\n      components: [TabContext, TabGroup, Tab, TabPanel],\n      html: `<ic-tab-context>\n      <ic-tab-group label=\"Example tab group\">\n        <ic-tab>One</ic-tab>\n        <ic-tab>Two</ic-tab>\n        <ic-tab>Three</ic-tab>\n      </ic-tab-group>\n      <ic-tab-panel>Tab One</ic-tab-panel>\n      <ic-tab-panel>Tab Two</ic-tab-panel>\n      <ic-tab-panel>Tab Three</ic-tab-panel>\n      </ic-tab-context>`,\n    });\n\n    expect(page.rootInstance.selectedTabIndex).toBe(undefined);\n\n    const eventSpy = jest.fn();\n    page.root.addEventListener(\"icTabSelect\", eventSpy);\n\n    await page.rootInstance.tabClickHandler({\n      stopImmediatePropagation: jest.fn(),\n      detail: {\n        contextId: \"default\",\n        position: 1,\n        tabId: \"ic-tab--1-context-default\",\n      },\n    });\n\n    await page.waitForChanges();\n    expect(page.rootInstance.selectedTab).toBe(1);\n    expect(eventSpy).toHaveBeenCalled();\n  });\n\n  it(\"should test key down handler - automatic\", async () => {\n    const page = await newSpecPage({\n      components: [TabContext, TabGroup, Tab, TabPanel],\n      html: `<ic-tab-context>\n      <ic-tab-group label=\"Example tab group\">\n        <ic-tab>One</ic-tab>\n        <ic-tab>Two</ic-tab>\n        <ic-tab>Three</ic-tab>\n      </ic-tab-group>\n      <ic-tab-panel>Tab One</ic-tab-panel>\n      <ic-tab-panel>Tab Two</ic-tab-panel>\n      <ic-tab-panel>Tab Three</ic-tab-panel>\n      </ic-tab-context>`,\n    });\n\n    const tabGroup = page.root.querySelector(\"ic-tab-group\");\n\n    tabGroup.dispatchEvent(\n      new window.window.KeyboardEvent(\"keydown\", {\n        key: \"End\",\n        bubbles: true,\n        cancelable: true,\n      })\n    );\n\n    await page.waitForChanges();\n    expect(page.rootInstance.selectedTab).toBe(2);\n\n    tabGroup.dispatchEvent(\n      new window.window.KeyboardEvent(\"keydown\", {\n        key: \"Home\",\n        bubbles: true,\n        cancelable: true,\n      })\n    );\n\n    await page.waitForChanges();\n    expect(page.rootInstance.selectedTab).toBe(0);\n\n    tabGroup.dispatchEvent(\n      new window.window.KeyboardEvent(\"keydown\", {\n        key: \"ArrowLeft\",\n        bubbles: true,\n        cancelable: true,\n      })\n    );\n\n    await page.waitForChanges();\n    expect(page.rootInstance.selectedTab).toBe(2);\n\n    tabGroup.dispatchEvent(\n      new window.window.KeyboardEvent(\"keydown\", {\n        key: \"ArrowLeft\",\n        bubbles: true,\n        cancelable: true,\n      })\n    );\n\n    await page.waitForChanges();\n    expect(page.rootInstance.selectedTab).toBe(1);\n\n    tabGroup.dispatchEvent(\n      new window.window.KeyboardEvent(\"keydown\", {\n        key: \"ArrowRight\",\n        bubbles: true,\n        cancelable: true,\n      })\n    );\n\n    await page.waitForChanges();\n    expect(page.rootInstance.selectedTab).toBe(2);\n\n    tabGroup.dispatchEvent(\n      new window.window.KeyboardEvent(\"keydown\", {\n        key: \"ArrowRight\",\n        bubbles: true,\n        cancelable: true,\n      })\n    );\n\n    await page.waitForChanges();\n    expect(page.rootInstance.selectedTab).toBe(0);\n\n    tabGroup.dispatchEvent(\n      new window.window.KeyboardEvent(\"keydown\", {\n        key: \"Escape\",\n        bubbles: true,\n        cancelable: true,\n      })\n    );\n\n    await page.waitForChanges();\n    expect(page.rootInstance.selectedTab).toBe(0);\n  });\n\n  it(\"should test key down handler - manual\", async () => {\n    const page = await newSpecPage({\n      components: [TabContext, TabGroup, Tab, TabPanel],\n      html: `<ic-tab-context activation-type=\"manual\">\n      <ic-tab-group label=\"Example tab group\">\n        <ic-tab>One</ic-tab>\n        <ic-tab>Two</ic-tab>\n        <ic-tab>Three</ic-tab>\n      </ic-tab-group>\n      <ic-tab-panel>Tab One</ic-tab-panel>\n      <ic-tab-panel>Tab Two</ic-tab-panel>\n      <ic-tab-panel>Tab Three</ic-tab-panel>\n      </ic-tab-context>`,\n    });\n\n    const tabGroup = page.root.querySelector(\"ic-tab-group\");\n\n    tabGroup.dispatchEvent(\n      new window.window.KeyboardEvent(\"keydown\", {\n        key: \"End\",\n        bubbles: true,\n        cancelable: true,\n      })\n    );\n\n    await page.waitForChanges();\n    expect(page.rootInstance.selectedTab).toBe(0);\n    expect(page.rootInstance.focusedTabIndex).toBe(2);\n\n    tabGroup.dispatchEvent(\n      new window.window.KeyboardEvent(\"keydown\", {\n        key: \"Enter\",\n        bubbles: true,\n        cancelable: true,\n      })\n    );\n\n    await page.waitForChanges();\n    expect(page.rootInstance.selectedTab).toBe(2);\n\n    tabGroup.dispatchEvent(\n      new window.window.KeyboardEvent(\"keydown\", {\n        key: \"Home\",\n        bubbles: true,\n        cancelable: true,\n      })\n    );\n\n    await page.waitForChanges();\n    expect(page.rootInstance.focusedTabIndex).toBe(0);\n    expect(page.rootInstance.selectedTab).toBe(2);\n\n    tabGroup.dispatchEvent(\n      new window.window.KeyboardEvent(\"keydown\", {\n        key: \" \",\n        bubbles: true,\n        cancelable: true,\n      })\n    );\n\n    await page.waitForChanges();\n    expect(page.rootInstance.selectedTab).toBe(0);\n\n    tabGroup.dispatchEvent(\n      new window.window.KeyboardEvent(\"keydown\", {\n        key: \"ArrowLeft\",\n        bubbles: true,\n        cancelable: true,\n      })\n    );\n\n    await page.waitForChanges();\n    expect(page.rootInstance.focusedTabIndex).toBe(2);\n\n    tabGroup.dispatchEvent(\n      new window.window.KeyboardEvent(\"keydown\", {\n        key: \"ArrowLeft\",\n        bubbles: true,\n        cancelable: true,\n      })\n    );\n\n    await page.waitForChanges();\n    expect(page.rootInstance.focusedTabIndex).toBe(1);\n\n    tabGroup.dispatchEvent(\n      new window.window.KeyboardEvent(\"keydown\", {\n        key: \"ArrowRight\",\n        bubbles: true,\n        cancelable: true,\n      })\n    );\n\n    await page.waitForChanges();\n    expect(page.rootInstance.focusedTabIndex).toBe(2);\n\n    tabGroup.dispatchEvent(\n      new window.window.KeyboardEvent(\"keydown\", {\n        key: \"ArrowRight\",\n        bubbles: true,\n        cancelable: true,\n      })\n    );\n\n    await page.waitForChanges();\n    expect(page.rootInstance.focusedTabIndex).toBe(0);\n\n    tabGroup.dispatchEvent(\n      new window.window.KeyboardEvent(\"keydown\", {\n        key: \"Escape\",\n        bubbles: true,\n        cancelable: true,\n      })\n    );\n\n    await page.waitForChanges();\n    expect(page.rootInstance.focusedTabIndex).toBe(0);\n  });\n\n  it(\"should apply tab and panel ids to elements added after initial render of the context\", async () => {\n    const page = await newSpecPage({\n      components: [TabContext, TabGroup, Tab, TabPanel],\n      html: `<ic-tab-context>\n      <ic-tab-group label=\"Example tab group\">\n        <ic-tab>One</ic-tab>\n        <ic-tab>Two</ic-tab>\n        <ic-tab>Three</ic-tab>\n      </ic-tab-group>\n      <ic-tab-panel>Tab One</ic-tab-panel>\n      <ic-tab-panel>Tab Two</ic-tab-panel>\n      <ic-tab-panel>Tab Three</ic-tab-panel>\n      </ic-tab-context>`,\n    });\n\n    const tabGroup = page.root.querySelector(\"ic-tab-group\");\n\n    tabGroup.insertAdjacentHTML(\"beforeend\", \"<ic-tab>Four</ic-tab>\");\n    page.root.insertAdjacentHTML(\n      \"beforeend\",\n      \"<ic-tab-panel>Four</ic-tab-panel>\"\n    );\n    await page.waitForChanges();\n\n    const newTab = page.root.querySelector(\n      '[id*=\"ic-tab-3-context-default\"]'\n    ) as HTMLIcTabElement;\n    const newTabPanel = page.root.querySelector(\n      '[id*=\"ic-tab-panel-3-context-default\"]'\n    ) as HTMLIcTabPanelElement;\n\n    expect(newTab.tabId).toBe(\"ic-tab--3-context-default\");\n    expect(newTabPanel.panelId).toBe(\"ic-tab--3-context-default\");\n  });\n\n  it(\"should reassign ids if tab and tab panel are dynamically removed\", async () => {\n    const page = await newSpecPage({\n      components: [TabContext, TabGroup, Tab, TabPanel],\n      html: `<ic-tab-context>\n      <ic-tab-group label=\"Example tab group\">\n        <ic-tab>One</ic-tab>\n        <ic-tab>Two</ic-tab>\n        <ic-tab>Three</ic-tab>\n      </ic-tab-group>\n      <ic-tab-panel>Tab One</ic-tab-panel>\n      <ic-tab-panel>Tab Two</ic-tab-panel>\n      <ic-tab-panel>Tab Three</ic-tab-panel>\n      </ic-tab-context>`,\n    });\n\n    const tabGroup = page.root.querySelector(\"ic-tab-group\");\n\n    let allTabs = tabGroup.querySelectorAll(\"ic-tab\");\n    let allTabPanels = page.root.querySelectorAll(\"ic-tab-panel\");\n\n    expect(allTabs.length).toBe(3);\n    expect(allTabPanels.length).toBe(3);\n\n    allTabPanels[allTabPanels.length - 2].remove();\n    allTabs[allTabs.length - 2].remove();\n\n    await page.waitForChanges();\n\n    allTabs = tabGroup.querySelectorAll(\"ic-tab\");\n    allTabPanels = page.root.querySelectorAll(\"ic-tab-panel\");\n\n    expect(allTabs.length).toBe(2);\n    expect(allTabPanels.length).toBe(2);\n\n    const newlyUpdatedTab = page.root.querySelector(\n      '[id*=\"ic-tab-1-context-default\"]'\n    ) as HTMLIcTabElement;\n    const newlyUpdatedTabPanel = page.root.querySelector(\n      '[id*=\"ic-tab-panel-1-context-default\"]'\n    ) as HTMLIcTabPanelElement;\n\n    expect(newlyUpdatedTab.tabId).toBe(\"ic-tab--1-context-default\");\n    expect(newlyUpdatedTabPanel.panelId).toBe(\"ic-tab--1-context-default\");\n  });\n});\n"]}

package/dist/collection/components/ic-tab-group/ic-tab-group.css

@@ -3,7 +3,7 @@
 
   display: block;
   margin-bottom: var(--ic-space-md);
-  border-bottom: 1px solid var(--border-bottom-color);
+  border-bottom: var(--ic-border-default);
 }
 
 :host(.inline) {
@@ -12,7 +12,7 @@
 }
 
 .light {
-  --border-bottom-color: var(--ic-architectural-white);
+  border-bottom: var(--ic-space-1px) solid var(--ic-architectural-white);
 }
 
 .tabs-container {

package/dist/collection/components/ic-tab-panel/ic-tab-panel.js

@@ -13,7 +13,9 @@ export class TabPanel {
   }
   disconnectedCallback() {
     const tabContext = document.querySelector(`ic-tab-context[context-id=${this.contextId}]`);
-    tabContext.tabRemovedHandler();
+    if (tabContext) {
+      tabContext.tabRemovedHandler();
+    }
   }
   render() {
     const { panelId, selectedTab, appearance } = this;

package/dist/collection/components/ic-tab-panel/ic-tab-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-tab-panel.js","sourceRoot":"","sources":["../../../src/components/ic-tab-panel/ic-tab-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,IAAI,EACJ,IAAI,EACJ,CAAC,GACF,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,qBAAqB,GAEtB,MAAM,mBAAmB,CAAC;AAO3B,MAAM,OAAO,QAAQ;;qBAO2B,SAAS;;;;sBAoBL,MAAM;;EAYxD,iBAAiB;IACf,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EACvC,CAAC;EAED,oBAAoB;IAClB,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CACvC,6BAA6B,IAAI,CAAC,SAAS,GAAG,CACpB,CAAC;IAC7B,UAAU,CAAC,iBAAiB,EAAE,CAAC;EACjC,CAAC;EAED,MAAM;IACJ,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;IAClD,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;QACL,CAAC,oBAAoB,CAAC,EAAE,UAAU,KAAK,qBAAqB,CAAC,KAAK;OACnE,EACD,IAAI,EAAC,UAAU,EACf,MAAM,EACJ,OAAO,KAAK,SAAS,IAAI,WAAW,KAAK,SAAS;QAChD,CAAC,CAAC,CAAC,CAAC,OAAO,KAAK,WAAW,CAAC;QAC5B,CAAC,CAAC,IAAI;MAGV;QACE,eAAa,CACT,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Prop,\n  h,\n} from \"@stencil/core\";\nimport {\n  IcThemeForegroundEnum,\n  IcThemeForegroundNoDefault,\n} from \"../../utils/types\";\n\n@Component({\n  tag: \"ic-tab-panel\",\n  styleUrl: \"ic-tab-panel.css\",\n  shadow: true,\n})\nexport class TabPanel {\n  @Element() host: HTMLIcTabPanelElement;\n\n  /**\n   * @deprecated This is no longer required.\n   * The context id is passed down from `ic-tab-context`\n   */\n  @Prop({ reflect: true }) contextId?: string = \"default\";\n\n  /**\n   * @internal The position of the tab panel inside the tabs array in context.\n   */\n  @Prop({ reflect: true }) tabPosition?: number;\n\n  /**\n   * @internal The shared ID that links the panel and tab.\n   */\n  @Prop({ reflect: true }) panelId?: string;\n\n  /**\n   * @internal The shared ID of the currently selected tab.\n   */\n  @Prop() selectedTab?: string;\n\n  /**\n   * @internal The appearance of the tabs, e.g dark, or light.\n   */\n  @Prop() appearance?: IcThemeForegroundNoDefault = \"dark\";\n\n  /**\n   * @internal Emitted when a tab panel is dynamically created.\n   */\n  @Event() tabPanelCreated: EventEmitter<HTMLIcTabPanelElement>;\n\n  /**\n   * @internal Emitted when a tab panel is unmounted.\n   */\n  @Event() tabPanelRemoved: EventEmitter<void>;\n\n  connectedCallback(): void {\n    this.tabPanelCreated.emit(this.host);\n  }\n\n  disconnectedCallback(): void {\n    const tabContext = document.querySelector(\n      `ic-tab-context[context-id=${this.contextId}]`\n    ) as HTMLIcTabContextElement;\n    tabContext.tabRemovedHandler();\n  }\n\n  render() {\n    const { panelId, selectedTab, appearance } = this;\n    return (\n      <Host\n        class={{\n          [\"ic-tab-panel-light\"]: appearance === IcThemeForegroundEnum.Light,\n        }}\n        role=\"tabpanel\"\n        hidden={\n          panelId !== undefined && selectedTab !== undefined\n            ? !(panelId === selectedTab)\n            : true\n        }\n      >\n        <div>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-tab-panel.js","sourceRoot":"","sources":["../../../src/components/ic-tab-panel/ic-tab-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,IAAI,EACJ,IAAI,EACJ,CAAC,GACF,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,qBAAqB,GAEtB,MAAM,mBAAmB,CAAC;AAO3B,MAAM,OAAO,QAAQ;;qBAO2B,SAAS;;;;sBAoBL,MAAM;;EAYxD,iBAAiB;IACf,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EACvC,CAAC;EAED,oBAAoB;IAClB,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CACvC,6BAA6B,IAAI,CAAC,SAAS,GAAG,CACpB,CAAC;IAC7B,IAAI,UAAU,EAAE;MACd,UAAU,CAAC,iBAAiB,EAAE,CAAC;KAChC;EACH,CAAC;EAED,MAAM;IACJ,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;IAClD,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;QACL,CAAC,oBAAoB,CAAC,EAAE,UAAU,KAAK,qBAAqB,CAAC,KAAK;OACnE,EACD,IAAI,EAAC,UAAU,EACf,MAAM,EACJ,OAAO,KAAK,SAAS,IAAI,WAAW,KAAK,SAAS;QAChD,CAAC,CAAC,CAAC,CAAC,OAAO,KAAK,WAAW,CAAC;QAC5B,CAAC,CAAC,IAAI;MAGV;QACE,eAAa,CACT,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Prop,\n  h,\n} from \"@stencil/core\";\nimport {\n  IcThemeForegroundEnum,\n  IcThemeForegroundNoDefault,\n} from \"../../utils/types\";\n\n@Component({\n  tag: \"ic-tab-panel\",\n  styleUrl: \"ic-tab-panel.css\",\n  shadow: true,\n})\nexport class TabPanel {\n  @Element() host: HTMLIcTabPanelElement;\n\n  /**\n   * @deprecated This is no longer required.\n   * The context id is passed down from `ic-tab-context`\n   */\n  @Prop({ reflect: true }) contextId?: string = \"default\";\n\n  /**\n   * @internal The position of the tab panel inside the tabs array in context.\n   */\n  @Prop({ reflect: true }) tabPosition?: number;\n\n  /**\n   * @internal The shared ID that links the panel and tab.\n   */\n  @Prop({ reflect: true }) panelId?: string;\n\n  /**\n   * @internal The shared ID of the currently selected tab.\n   */\n  @Prop() selectedTab?: string;\n\n  /**\n   * @internal The appearance of the tabs, e.g dark, or light.\n   */\n  @Prop() appearance?: IcThemeForegroundNoDefault = \"dark\";\n\n  /**\n   * @internal Emitted when a tab panel is dynamically created.\n   */\n  @Event() tabPanelCreated: EventEmitter<HTMLIcTabPanelElement>;\n\n  /**\n   * @internal Emitted when a tab panel is unmounted.\n   */\n  @Event() tabPanelRemoved: EventEmitter<void>;\n\n  connectedCallback(): void {\n    this.tabPanelCreated.emit(this.host);\n  }\n\n  disconnectedCallback(): void {\n    const tabContext = document.querySelector(\n      `ic-tab-context[context-id=${this.contextId}]`\n    ) as HTMLIcTabContextElement;\n    if (tabContext) {\n      tabContext.tabRemovedHandler();\n    }\n  }\n\n  render() {\n    const { panelId, selectedTab, appearance } = this;\n    return (\n      <Host\n        class={{\n          [\"ic-tab-panel-light\"]: appearance === IcThemeForegroundEnum.Light,\n        }}\n        role=\"tabpanel\"\n        hidden={\n          panelId !== undefined && selectedTab !== undefined\n            ? !(panelId === selectedTab)\n            : true\n        }\n      >\n        <div>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-tab-panel/ic-tab-panel.spec.js

@@ -0,0 +1,65 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { TabPanel } from "./ic-tab-panel";
+describe("ic-tab component", () => {
+  it("should not be hidden if the corresponding tab is selected", async () => {
+    const page = await newSpecPage({
+      components: [TabPanel],
+      html: `<ic-tab-panel panel-id="1" selected-tab="1" tab-position=1>IC Tab Test</ic-tab-panel>`,
+    });
+    expect(page.root)
+      .toEqualHtml(`<ic-tab-panel panel-id="1" selected-tab="1" context-id="default" role="tabpanel" tab-position="1">
+    <mock:shadow-root>
+      <div>
+        <slot></slot>
+      </div>
+    </mock:shadow-root>
+    IC Tab Test
+  </ic-tab-panel>`);
+  });
+  it("should be hidden if the corresponding tab is not selected", async () => {
+    const page = await newSpecPage({
+      components: [TabPanel],
+      html: `<ic-tab-panel panel-id="1" selected-tab="2" tab-position=1>IC Tab Test</ic-tab-panel>`,
+    });
+    expect(page.root)
+      .toEqualHtml(`<ic-tab-panel panel-id="1" selected-tab="2" context-id="default" hidden="" role="tabpanel" tab-position="1">
+    <mock:shadow-root>
+      <div>
+        <slot></slot>
+      </div>
+    </mock:shadow-root>
+    IC Tab Test
+  </ic-tab-panel>`);
+  });
+  it("should be hidden if selectedTab and panelId are undefined", async () => {
+    const page = await newSpecPage({
+      components: [TabPanel],
+      html: `<ic-tab-panel tab-position=1>IC Tab Test</ic-tab-panel>`,
+    });
+    expect(page.root)
+      .toEqualHtml(`<ic-tab-panel context-id="default" hidden="" role="tabpanel" tab-position="1">
+    <mock:shadow-root>
+      <div>
+        <slot></slot>
+      </div>
+    </mock:shadow-root>
+    IC Tab Test
+  </ic-tab-panel>`);
+  });
+  it("should be hidden if selectedTab and panelId are undefined", async () => {
+    const page = await newSpecPage({
+      components: [TabPanel],
+      html: `<ic-tab-panel>IC Tab Test</ic-tab-panel>`,
+    });
+    expect(page.root)
+      .toEqualHtml(`<ic-tab-panel context-id="default" hidden="" role="tabpanel">
+    <mock:shadow-root>
+      <div>
+        <slot></slot>
+      </div>
+    </mock:shadow-root>
+    IC Tab Test
+  </ic-tab-panel>`);
+  });
+});
+//# sourceMappingURL=ic-tab-panel.spec.js.map

package/dist/collection/components/ic-tab-panel/ic-tab-panel.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-tab-panel.spec.js","sourceRoot":"","sources":["../../../src/components/ic-tab-panel/ic-tab-panel.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;EAChC,EAAE,CAAC,2DAA2D,EAAE,KAAK,IAAI,EAAE;IACzE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;MACtB,IAAI,EAAE,uFAAuF;KAC9F,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;OACd,WAAW,CAAC;;;;;;;kBAOD,CAAC,CAAC;EAClB,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,2DAA2D,EAAE,KAAK,IAAI,EAAE;IACzE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;MACtB,IAAI,EAAE,uFAAuF;KAC9F,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;OACd,WAAW,CAAC;;;;;;;kBAOD,CAAC,CAAC;EAClB,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,2DAA2D,EAAE,KAAK,IAAI,EAAE;IACzE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;MACtB,IAAI,EAAE,yDAAyD;KAChE,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;OACd,WAAW,CAAC;;;;;;;kBAOD,CAAC,CAAC;EAClB,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,2DAA2D,EAAE,KAAK,IAAI,EAAE;IACzE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;MACtB,IAAI,EAAE,0CAA0C;KACjD,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;OACd,WAAW,CAAC;;;;;;;kBAOD,CAAC,CAAC;EAClB,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { TabPanel } from \"./ic-tab-panel\";\n\ndescribe(\"ic-tab component\", () => {\n  it(\"should not be hidden if the corresponding tab is selected\", async () => {\n    const page = await newSpecPage({\n      components: [TabPanel],\n      html: `<ic-tab-panel panel-id=\"1\" selected-tab=\"1\" tab-position=1>IC Tab Test</ic-tab-panel>`,\n    });\n\n    expect(page.root)\n      .toEqualHtml(`<ic-tab-panel panel-id=\"1\" selected-tab=\"1\" context-id=\"default\" role=\"tabpanel\" tab-position=\"1\">\n    <mock:shadow-root>\n      <div>\n        <slot></slot>\n      </div>\n    </mock:shadow-root>\n    IC Tab Test\n  </ic-tab-panel>`);\n  });\n\n  it(\"should be hidden if the corresponding tab is not selected\", async () => {\n    const page = await newSpecPage({\n      components: [TabPanel],\n      html: `<ic-tab-panel panel-id=\"1\" selected-tab=\"2\" tab-position=1>IC Tab Test</ic-tab-panel>`,\n    });\n\n    expect(page.root)\n      .toEqualHtml(`<ic-tab-panel panel-id=\"1\" selected-tab=\"2\" context-id=\"default\" hidden=\"\" role=\"tabpanel\" tab-position=\"1\">\n    <mock:shadow-root>\n      <div>\n        <slot></slot>\n      </div>\n    </mock:shadow-root>\n    IC Tab Test\n  </ic-tab-panel>`);\n  });\n\n  it(\"should be hidden if selectedTab and panelId are undefined\", async () => {\n    const page = await newSpecPage({\n      components: [TabPanel],\n      html: `<ic-tab-panel tab-position=1>IC Tab Test</ic-tab-panel>`,\n    });\n\n    expect(page.root)\n      .toEqualHtml(`<ic-tab-panel context-id=\"default\" hidden=\"\" role=\"tabpanel\" tab-position=\"1\">\n    <mock:shadow-root>\n      <div>\n        <slot></slot>\n      </div>\n    </mock:shadow-root>\n    IC Tab Test\n  </ic-tab-panel>`);\n  });\n\n  it(\"should be hidden if selectedTab and panelId are undefined\", async () => {\n    const page = await newSpecPage({\n      components: [TabPanel],\n      html: `<ic-tab-panel>IC Tab Test</ic-tab-panel>`,\n    });\n\n    expect(page.root)\n      .toEqualHtml(`<ic-tab-panel context-id=\"default\" hidden=\"\" role=\"tabpanel\">\n    <mock:shadow-root>\n      <div>\n        <slot></slot>\n      </div>\n    </mock:shadow-root>\n    IC Tab Test\n  </ic-tab-panel>`);\n  });\n});\n"]}

package/dist/collection/components/ic-text-field/ic-text-field.css

@@ -516,10 +516,6 @@ textarea.no-resize {
   color: var(--ic-color-secondary-text);
 }
 
-.error {
-  color: var(--ic-status-error);
-}
-
 .disabled {
   color: var(--ic-architectural-200);
 }