@ukic/web-components 3.0.0-alpha.9 → 3.1.0

package/dist/collection/components/ic-tab-context/ic-tabs.stories.js

@@ -0,0 +1,316 @@
+import { html } from "lit-html";
+
+const defaultArgs = {
+  activationType: "automatic",
+  disabled: false,
+  inline: false,
+  groupLabel: "Example tab group",
+  theme: "inherit",
+  monochrome: false,
+};
+
+export default {
+  title: "Web Components/Tabs",
+  component: "ic-tab-context",
+};
+
+export const Default = {
+  render: () =>
+    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>`,
+
+  name: "Default",
+};
+
+export const WithIcons = {
+  render: () =>
+    html` <ic-tab-context>
+      <ic-tab-group label="Example tab group">
+        <ic-tab
+          >One
+          <svg
+            slot="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            height="24px"
+            viewBox="0 0 24 24"
+            width="24px"
+            fill="#000000"
+          >
+            <path d="M0 0h24v24H0V0z" fill="none" />
+            <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" /></svg
+        ></ic-tab>
+        <ic-tab
+          >Two
+          <svg
+            slot="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            height="24px"
+            viewBox="0 0 24 24"
+            width="24px"
+            fill="#000000"
+          >
+            <path d="M0 0h24v24H0V0z" fill="none" />
+            <path
+              d="M19 3H4.99c-1.11 0-1.98.89-1.98 2L3 19c0 1.1.88 2 1.99 2H19c1.1 0 2-.9 2-2V5c0-1.11-.9-2-2-2zm0 12h-4c0 1.66-1.35 3-3 3s-3-1.34-3-3H4.99V5H19v10z"
+            /></svg
+        ></ic-tab>
+        <ic-tab
+          >Three
+          <svg
+            slot="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            height="24px"
+            viewBox="0 0 24 24"
+            width="24px"
+            fill="#000000"
+          >
+            <path
+              d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"
+            />
+          </svg>
+        </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>`,
+
+  name: "With icons",
+};
+
+export const Disabled = {
+  render: () =>
+    html` <ic-tab-context>
+      <ic-tab-group label="Example tab group">
+        <ic-tab>One</ic-tab>
+        <ic-tab disabled>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>`,
+
+  name: "Disabled",
+};
+
+export const Inline = {
+  render: () =>
+    html` <ic-tab-context>
+      <ic-tab-group label="Example tab group" inline>
+        <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>`,
+
+  name: "Inline",
+};
+
+export const ManualActivation = {
+  render: () =>
+    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>`,
+
+  name: "Manual activation",
+};
+
+export const Responsive = {
+  render: () => 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>Four</ic-tab>
+        <ic-tab>Five</ic-tab>
+        <ic-tab>Six</ic-tab>
+        <ic-tab>Seven</ic-tab>
+        <ic-tab>Eight</ic-tab>
+        <ic-tab>Nine</ic-tab>
+        <ic-tab>Ten</ic-tab>
+        <ic-tab>Eleven</ic-tab>
+        <ic-tab>Twelve</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-panel>Tab Four</ic-tab-panel>
+      <ic-tab-panel>Tab Five</ic-tab-panel>
+      <ic-tab-panel>Tab Six</ic-tab-panel>
+      <ic-tab-panel>Tab Seven</ic-tab-panel>
+      <ic-tab-panel>Tab Eight</ic-tab-panel>
+      <ic-tab-panel>Tab Nine</ic-tab-panel>
+      <ic-tab-panel>Tab Ten</ic-tab-panel>
+      <ic-tab-panel>Tab Eleven</ic-tab-panel>
+      <ic-tab-panel>Tab Twelve</ic-tab-panel>
+    </ic-tab-context>
+  `,
+
+  name: "Responsive",
+};
+
+export const NestedTabs = {
+  render: () =>
+    html`<ic-tab-context id="main">
+        <ic-tab-group label="Example tab group">
+          <ic-tab>Outer One</ic-tab>
+          <ic-tab>Outer Two</ic-tab>
+          <ic-tab>Outer Three</ic-tab>
+        </ic-tab-group>
+        <ic-tab-panel>
+          <ic-tab-context context-id="context-nested" id="nested">
+            <ic-tab-group label="Example tab group">
+              <ic-tab>Nested One</ic-tab>
+              <ic-tab>Nested Two</ic-tab>
+              <ic-tab>Nested Three</ic-tab>
+            </ic-tab-group>
+            <ic-tab-panel>Nested Tab One</ic-tab-panel>
+            <ic-tab-panel>Nested Tab Two</ic-tab-panel>
+            <ic-tab-panel>Nested Tab Three</ic-tab-panel>
+          </ic-tab-context>
+        </ic-tab-panel>
+        <ic-tab-panel>Outer Tab Two</ic-tab-panel>
+        <ic-tab-panel>Outer Tab Three</ic-tab-panel>
+      </ic-tab-context>
+      <script>
+        const main = document.querySelector("#main");
+        const nested = document.querySelector("#nested");
+        main.addEventListener("icTabSelect", () => console.log("main"));
+        nested.addEventListener("icTabSelect", () => console.log("nested"));
+      </script> `,
+
+  name: "Nested tabs",
+};
+
+export const IcTabSelectEvent = {
+  render: (args) =>
+    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>
+      <script>
+        function handleIcTabSelect(ev) {
+          console.log(ev.detail, "icTabSelect");
+        }
+        document
+          .querySelector("ic-tab-context")
+          .addEventListener("icTabSelect", handleIcTabSelect);
+      </script>`,
+
+  name: "icTabSelect event",
+};
+
+export const MinAndMaxContent = {
+  render: () =>
+    html`<div style="max-width:500px">
+      <ic-tab-context>
+        <ic-tab-group label="Example tab group">
+          <ic-tab>Extremely long tab label made of plenty of words</ic-tab>
+          <ic-tab>A</ic-tab>
+          <ic-tab>Antidisestablishmentarianismbutmadeevenlonger</ic-tab>
+        </ic-tab-group>
+        <ic-tab-panel
+          >Testing tab behaviour with lots of words in label</ic-tab-panel
+        >
+        <ic-tab-panel>Testing minimum label length</ic-tab-panel>
+        <ic-tab-panel
+          >Testing tab behaviour with one really long word in
+          label</ic-tab-panel
+        >
+      </ic-tab-context>
+    </div>`,
+
+  name: "Min and max content",
+};
+
+export const Playground = {
+  render: (args) =>
+    html`<div>
+      <ic-tab-context
+        activation-type=${args.activationType}
+        theme=${args.theme}
+        monochrome=${args.monochrome}
+      >
+        <ic-tab-group label=${args.groupLabel} inline=${args.inline}>
+          <ic-tab disabled=${args.disabled}>One</ic-tab>
+          <ic-tab>
+            Two
+            <ic-badge
+              label="1"
+              slot="badge"
+              position="inline"
+              accessible-label="1 notification found"
+            >
+            </ic-badge>
+          </ic-tab>
+          <ic-tab>
+            Three
+            <svg
+              slot="icon"
+              xmlns="http://www.w3.org/2000/svg"
+              height="24px"
+              viewBox="0 0 24 24"
+              width="24px"
+              fill="#000000"
+            >
+              <path d="M0 0h24v24H0V0z" fill="none" />
+              <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" />
+            </svg>
+          </ic-tab>
+          <ic-tab>Four</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-panel>Tab Four</ic-tab-panel>
+      </ic-tab-context>
+    </div>`,
+
+  args: defaultArgs,
+
+  argTypes: {
+    activationType: {
+      options: ["automatic", "manual"],
+
+      control: {
+        type: "inline-radio",
+      },
+    },
+
+    theme: {
+      options: ["inherit", "light", "dark"],
+
+      control: {
+        type: "inline-radio",
+      },
+    },
+  },
+
+  name: "Playground",
+};

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

@@ -2,21 +2,25 @@ import { Host, h } from "@stencil/core";
 import { onComponentRequiredPropUndefined } from "../../utils/helpers";
 export class TabGroup {
     constructor() {
+        /**
+         * If `true`, the tabs and tab panels will be positioned separately.
+         */
         this.inline = false;
-        this.label = undefined;
+        /** @internal Determines whether black variant of the tabs should be displayed. */
         this.monochrome = false;
+        /** @internal Determines whether the light or dark variant of the tabs should be displayed. */
         this.theme = "inherit";
     }
     componentDidLoad() {
         onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Tab Group");
     }
     render() {
-        const { theme, label, monochrome } = this;
-        return (h(Host, { role: "tablist", "aria-label": label, class: {
-                ["ic-tab-group-inline"]: this.inline,
+        const { inline, theme, label, monochrome } = this;
+        return (h(Host, { key: 'f42b97ec6fa8e200fbb5b5d2114f3f98d4f6ad35', role: "tablist", "aria-label": label, class: {
+                ["ic-tab-group-inline"]: !!inline,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-                ["ic-tab-group-monochrome"]: monochrome,
-            } }, h("ic-horizontal-scroll", { theme: this.theme, "focus-trigger": "tabFocus", monochrome: this.monochrome }, h("div", { class: "tabs-container" }, h("slot", null)))));
+                ["ic-tab-group-monochrome"]: !!monochrome,
+            } }, h("ic-horizontal-scroll", { key: 'fdfe2de9cecf661c164dda34f523c73520f6bce6', theme: theme, "focus-trigger": "tabFocus", monochrome: monochrome }, h("div", { key: '6523acdad07d4b4a48dab269da3cca2bf3003899', class: "tabs-container" }, h("slot", { key: '032517ca94833114e39faf4ad5da3126197e780a' })))));
     }
     static get is() { return "ic-tab-group"; }
     static get encapsulation() { return "shadow"; }
@@ -38,7 +42,7 @@ export class TabGroup {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -47,6 +51,8 @@ export class TabGroup {
                     "tags": [],
                     "text": "If `true`, the tabs and tab panels will be positioned separately."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "inline",
                 "reflect": true,
                 "defaultValue": "false"
@@ -65,6 +71,8 @@ export class TabGroup {
                     "tags": [],
                     "text": "The label to describe the purpose of the set of tabs to screen reader users."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label",
                 "reflect": false
             },
@@ -73,7 +81,7 @@ export class TabGroup {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -85,6 +93,8 @@ export class TabGroup {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "monochrome",
                 "reflect": false,
                 "defaultValue": "false"
@@ -94,7 +104,7 @@ export class TabGroup {
                 "mutable": false,
                 "complexType": {
                     "original": "IcThemeMode",
-                    "resolved": "\"dark\" | \"inherit\" | \"light\"",
+                    "resolved": "\"dark\" | \"inherit\" | \"light\" | undefined",
                     "references": {
                         "IcThemeMode": {
                             "location": "import",
@@ -112,6 +122,8 @@ export class TabGroup {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"inherit\""

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

@@ -1 +1 @@
-{"version":3,"file":"ic-tab-group.js","sourceRoot":"","sources":["../../../src/components/ic-tab-group/ic-tab-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAEzD,OAAO,EAAE,gCAAgC,EAAE,MAAM,qBAAqB,CAAC;AAUvE,MAAM,OAAO,QAAQ;;sBAIyB,KAAK;;0BAQlB,KAAK;qBAGN,SAAS;;IAEvC,gBAAgB;QACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EACzC,WAAW,CACZ,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;QAE1C,OAAO,CACL,EAAC,IAAI,IACH,IAAI,EAAC,SAAS,gBACF,KAAK,EACjB,KAAK,EAAE;gBACL,CAAC,qBAAqB,CAAC,EAAE,IAAI,CAAC,MAAM;gBACpC,CAAC,YAAY,KAAK,EAAE,CAAC,EAAE,KAAK,KAAK,SAAS;gBAC1C,CAAC,yBAAyB,CAAC,EAAE,UAAU;aACxC;YAED,4BACE,KAAK,EAAE,IAAI,CAAC,KAAK,mBACH,UAAU,EACxB,UAAU,EAAE,IAAI,CAAC,UAAU;gBAE3B,WAAK,KAAK,EAAC,gBAAgB;oBACzB,eAAa,CACT,CACe,CAClB,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from \"@stencil/core\";\n\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\nimport { IcThemeMode } from \"../../utils/types\";\n\n@Component({\n  tag: \"ic-tab-group\",\n  styleUrl: \"ic-tab-group.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class TabGroup {\n  /**\n   * If `true`, the tabs and tab panels will be positioned separately.\n   */\n  @Prop({ reflect: true }) inline?: boolean = false;\n\n  /**\n   * The label to describe the purpose of the set of tabs to screen reader users.\n   */\n  @Prop() label!: string;\n\n  /** @internal Determines whether black variant of the tabs should be displayed. */\n  @Prop() monochrome?: boolean = false;\n\n  /** @internal Determines whether the light or dark variant of the tabs should be displayed. */\n  @Prop() theme?: IcThemeMode = \"inherit\";\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Tab Group\"\n    );\n  }\n\n  render() {\n    const { theme, label, monochrome } = this;\n\n    return (\n      <Host\n        role=\"tablist\"\n        aria-label={label}\n        class={{\n          [\"ic-tab-group-inline\"]: this.inline,\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n          [\"ic-tab-group-monochrome\"]: monochrome,\n        }}\n      >\n        <ic-horizontal-scroll\n          theme={this.theme}\n          focus-trigger=\"tabFocus\"\n          monochrome={this.monochrome}\n        >\n          <div class=\"tabs-container\">\n            <slot></slot>\n          </div>\n        </ic-horizontal-scroll>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-tab-group.js","sourceRoot":"","sources":["../../../src/components/ic-tab-group/ic-tab-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAEzD,OAAO,EAAE,gCAAgC,EAAE,MAAM,qBAAqB,CAAC;AAUvE,MAAM,OAAO,QAAQ;IAPrB;QAQE;;WAEG;QACsB,WAAM,GAAa,KAAK,CAAC;QAOlD,kFAAkF;QAC1E,eAAU,GAAa,KAAK,CAAC;QAErC,8FAA8F;QACtF,UAAK,GAAiB,SAAS,CAAC;KAkCzC;IAhCC,gBAAgB;QACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EACzC,WAAW,CACZ,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;QAElD,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,SAAS,gBACF,KAAK,EACjB,KAAK,EAAE;gBACL,CAAC,qBAAqB,CAAC,EAAE,CAAC,CAAC,MAAM;gBACjC,CAAC,YAAY,KAAK,EAAE,CAAC,EAAE,KAAK,KAAK,SAAS;gBAC1C,CAAC,yBAAyB,CAAC,EAAE,CAAC,CAAC,UAAU;aAC1C;YAED,6EACE,KAAK,EAAE,KAAK,mBACE,UAAU,EACxB,UAAU,EAAE,UAAU;gBAEtB,4DAAK,KAAK,EAAC,gBAAgB;oBACzB,8DAAa,CACT,CACe,CAClB,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from \"@stencil/core\";\n\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\nimport { IcThemeMode } from \"../../utils/types\";\n\n@Component({\n  tag: \"ic-tab-group\",\n  styleUrl: \"ic-tab-group.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class TabGroup {\n  /**\n   * If `true`, the tabs and tab panels will be positioned separately.\n   */\n  @Prop({ reflect: true }) inline?: boolean = false;\n\n  /**\n   * The label to describe the purpose of the set of tabs to screen reader users.\n   */\n  @Prop() label!: string;\n\n  /** @internal Determines whether black variant of the tabs should be displayed. */\n  @Prop() monochrome?: boolean = false;\n\n  /** @internal Determines whether the light or dark variant of the tabs should be displayed. */\n  @Prop() theme?: IcThemeMode = \"inherit\";\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Tab Group\"\n    );\n  }\n\n  render() {\n    const { inline, theme, label, monochrome } = this;\n\n    return (\n      <Host\n        role=\"tablist\"\n        aria-label={label}\n        class={{\n          [\"ic-tab-group-inline\"]: !!inline,\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n          [\"ic-tab-group-monochrome\"]: !!monochrome,\n        }}\n      >\n        <ic-horizontal-scroll\n          theme={theme}\n          focus-trigger=\"tabFocus\"\n          monochrome={monochrome}\n        >\n          <div class=\"tabs-container\">\n            <slot></slot>\n          </div>\n        </ic-horizontal-scroll>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -441,7 +441,11 @@ video {
 }
 
 
-:host:not[hidden] {
+:host(.ic-tab-panel-hidden) {
+  display: none;
+}
+
+:host(:not(.ic-tab-panel-hidden)) {
   display: block;
 }
 

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

@@ -1,23 +1,26 @@
 import { Host, h, } from "@stencil/core";
-import { isPropDefined } from "../../utils/helpers";
 export class TabPanel {
     constructor() {
+        /**
+         * @internal If `true`, the tab panel will be displayed.
+         */
+        this.active = false;
+        /**
+         * @internal Determines whether black variant of the tabs should be displayed.
+         */
         this.monochrome = false;
-        this.panelId = undefined;
-        this.selectedTab = undefined;
-        this.tabPosition = undefined;
+        /** @internal Determines whether the light or dark variant of the tabs should be displayed. */
         this.theme = "inherit";
     }
     connectedCallback() {
         this.tabPanelCreated.emit(this.el);
     }
     render() {
-        const { panelId, selectedTab, theme } = this;
-        return (h(Host, { class: {
+        const { active, theme } = this;
+        return (h(Host, { key: '629c66ac51b529d443ad613d61f6875958e9d1a2', class: {
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            }, role: "tabpanel", hidden: isPropDefined(panelId) && isPropDefined(selectedTab)
-                ? !(panelId === selectedTab)
-                : true }, h("div", null, h("slot", null))));
+                "ic-tab-panel-hidden": !active,
+            }, role: "tabpanel", "aria-hidden": `${!active}` }, h("div", { key: '1f018abefa14feeaa6a1de08aa3c84c78788e8ea' }, h("slot", { key: '86343dd2934fa698c26dfe09b88a4b9004b62184' }))));
     }
     static get is() { return "ic-tab-panel"; }
     static get encapsulation() { return "shadow"; }
@@ -33,7 +36,7 @@ export class TabPanel {
     }
     static get properties() {
         return {
-            "monochrome": {
+            "active": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -42,6 +45,29 @@ export class TabPanel {
                     "references": {}
                 },
                 "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": "If `true`, the tab panel will be displayed."
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "active",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "monochrome": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [{
@@ -50,6 +76,8 @@ export class TabPanel {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "monochrome",
                 "reflect": false,
                 "defaultValue": "false"
@@ -59,7 +87,7 @@ export class TabPanel {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -71,6 +99,8 @@ export class TabPanel {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "panel-id",
                 "reflect": true
             },
@@ -79,7 +109,7 @@ export class TabPanel {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -91,6 +121,8 @@ export class TabPanel {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "selected-tab",
                 "reflect": false
             },
@@ -99,7 +131,7 @@ export class TabPanel {
                 "mutable": false,
                 "complexType": {
                     "original": "number",
-                    "resolved": "number",
+                    "resolved": "number | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -111,6 +143,8 @@ export class TabPanel {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "tab-position",
                 "reflect": true
             },
@@ -119,7 +153,7 @@ export class TabPanel {
                 "mutable": false,
                 "complexType": {
                     "original": "IcThemeMode",
-                    "resolved": "\"dark\" | \"inherit\" | \"light\"",
+                    "resolved": "\"dark\" | \"inherit\" | \"light\" | undefined",
                     "references": {
                         "IcThemeMode": {
                             "location": "import",
@@ -137,6 +171,8 @@ export class TabPanel {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"inherit\""

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;AAEvB,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAOpD,MAAM,OAAO,QAAQ;;0BAIY,KAAK;;;;qBAkBN,SAAS;;IAYvC,iBAAiB;QACf,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IACrC,CAAC;IAED,MAAM;QACJ,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QAC7C,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;gBACL,CAAC,YAAY,KAAK,EAAE,CAAC,EAAE,KAAK,KAAK,SAAS;aAC3C,EACD,IAAI,EAAC,UAAU,EACf,MAAM,EACJ,aAAa,CAAC,OAAO,CAAC,IAAI,aAAa,CAAC,WAAW,CAAC;gBAClD,CAAC,CAAC,CAAC,CAAC,OAAO,KAAK,WAAW,CAAC;gBAC5B,CAAC,CAAC,IAAI;YAGV;gBACE,eAAa,CACT,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Prop,\n  h,\n} from \"@stencil/core\";\nimport { IcThemeMode } from \"../../utils/types\";\nimport { isPropDefined } from \"../../utils/helpers\";\n\n@Component({\n  tag: \"ic-tab-panel\",\n  styleUrl: \"ic-tab-panel.css\",\n  shadow: true,\n})\nexport class TabPanel {\n  @Element() el: HTMLIcTabPanelElement;\n\n  /** @internal Determines whether black variant of the tabs should be displayed. */\n  @Prop() monochrome?: boolean = false;\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 position of the tab panel inside the tabs array in context.\n   */\n  @Prop({ reflect: true }) tabPosition?: number;\n\n  /** @internal Determines whether the light or dark variant of the tabs should be displayed. */\n  @Prop() theme?: IcThemeMode = \"inherit\";\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.el);\n  }\n\n  render() {\n    const { panelId, selectedTab, theme } = this;\n    return (\n      <Host\n        class={{\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n        }}\n        role=\"tabpanel\"\n        hidden={\n          isPropDefined(panelId) && isPropDefined(selectedTab)\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;AAQvB,MAAM,OAAO,QAAQ;IALrB;QAQE;;WAEG;QACK,WAAM,GAAY,KAAK,CAAC;QAEhC;;WAEG;QACK,eAAU,GAAa,KAAK,CAAC;QAiBrC,8FAA8F;QACtF,UAAK,GAAiB,SAAS,CAAC;KAiCzC;IArBC,iBAAiB;QACf,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IACrC,CAAC;IAED,MAAM;QACJ,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QAC/B,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,CAAC,YAAY,KAAK,EAAE,CAAC,EAAE,KAAK,KAAK,SAAS;gBAC1C,qBAAqB,EAAE,CAAC,MAAM;aAC/B,EACD,IAAI,EAAC,UAAU,iBACF,GAAG,CAAC,MAAM,EAAE;YAEzB;gBACE,8DAAa,CACT,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Prop,\n  h,\n} from \"@stencil/core\";\nimport { IcThemeMode } 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() el: HTMLIcTabPanelElement;\n\n  /**\n   * @internal If `true`, the tab panel will be displayed.\n   */\n  @Prop() active: boolean = false;\n\n  /**\n   * @internal Determines whether black variant of the tabs should be displayed.\n   */\n  @Prop() monochrome?: boolean = false;\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 position of the tab panel inside the tabs array in context.\n   */\n  @Prop({ reflect: true }) tabPosition?: number;\n\n  /** @internal Determines whether the light or dark variant of the tabs should be displayed. */\n  @Prop() theme?: IcThemeMode = \"inherit\";\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.el);\n  }\n\n  render() {\n    const { active, theme } = this;\n    return (\n      <Host\n        class={{\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n          \"ic-tab-panel-hidden\": !active,\n        }}\n        role=\"tabpanel\"\n        aria-hidden={`${!active}`}\n      >\n        <div>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -544,6 +544,7 @@ textarea:disabled {
 input.readonly,
 textarea.readonly {
   color: var(--ic-text-field-read-only-input-text-internal);
+  background: transparent;
 }
 
 /* Chrome, Safari, Edge */