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

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

@@ -1,18 +1,17 @@
 :host {
-  --border-bottom-color: var(--ic-architectural-300);
-
   display: block;
   margin-bottom: var(--ic-space-md);
-  border-bottom: var(--ic-border-default);
+  border-bottom: var(--ic-space-1px) solid var(--ic-tab-bottom-border);
 }
 
-:host(.inline) {
-  margin-bottom: 0;
-  border-bottom: none;
+:host(.ic-tab-group-monochrome) {
+  border-bottom: var(--ic-space-1px) solid
+    var(--ic-tab-bottom-border-monochrome);
 }
 
-.light {
-  border-bottom: var(--ic-border-width) solid var(--ic-architectural-white);
+:host(.ic-tab-group-inline) {
+  margin-bottom: 0;
+  border-bottom: none;
 }
 
 .tabs-container {
@@ -23,3 +22,11 @@
 .tabs-container::-webkit-scrollbar {
   display: none;
 }
+
+:host ic-horizontal-scroll {
+  --splitter-color: var(--ic-tab-divider);
+}
+
+:host(.ic-tab-group-monochrome) ic-horizontal-scroll {
+  --splitter-color: var(--ic-tab-divider-monochrome);
+}

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

@@ -1,24 +1,22 @@
 import { Host, h } from "@stencil/core";
 import { onComponentRequiredPropUndefined } from "../../utils/helpers";
-import { IcThemeForegroundEnum, } from "../../utils/types";
 export class TabGroup {
     constructor() {
-        this.appearance = "dark";
-        this.contextId = "default";
         this.inline = false;
         this.label = undefined;
+        this.monochrome = false;
+        this.theme = "inherit";
     }
     componentDidLoad() {
         onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Tab Group");
     }
     render() {
-        const { appearance, label } = this;
+        const { theme, label, monochrome } = this;
         return (h(Host, { role: "tablist", "aria-label": label, class: {
-                ["light"]: appearance === IcThemeForegroundEnum.Light,
-                ["inline"]: this.inline,
-            } }, h("ic-horizontal-scroll", { appearance: appearance === IcThemeForegroundEnum.Dark
-                ? IcThemeForegroundEnum.Default
-                : appearance, "focus-trigger": "tabFocus" }, h("div", { class: "tabs-container" }, h("slot", null)))));
+                ["ic-tab-group-inline"]: this.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)))));
     }
     static get is() { return "ic-tab-group"; }
     static get encapsulation() { return "shadow"; }
@@ -35,34 +33,25 @@ export class TabGroup {
     }
     static get properties() {
         return {
-            "appearance": {
-                "type": "string",
+            "inline": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "IcThemeForegroundNoDefault",
-                    "resolved": "\"dark\" | \"light\"",
-                    "references": {
-                        "IcThemeForegroundNoDefault": {
-                            "location": "import",
-                            "path": "../../utils/types",
-                            "id": "src/utils/types.ts::IcThemeForegroundNoDefault"
-                        }
-                    }
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [{
-                            "name": "internal",
-                            "text": "The appearance of the tab group, e.g dark, or light."
-                        }],
-                    "text": ""
+                    "tags": [],
+                    "text": "If `true`, the tabs and tab panels will be positioned separately."
                 },
-                "attribute": "appearance",
-                "reflect": false,
-                "defaultValue": "\"dark\""
+                "attribute": "inline",
+                "reflect": true,
+                "defaultValue": "false"
             },
-            "contextId": {
+            "label": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -70,20 +59,16 @@ export class TabGroup {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": false,
-                "optional": true,
+                "required": true,
+                "optional": false,
                 "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "This is no longer required.\nThe context id is passed down from `ic-tab-context`"
-                        }],
-                    "text": ""
+                    "tags": [],
+                    "text": "The label to describe the purpose of the set of tabs to screen reader users."
                 },
-                "attribute": "context-id",
-                "reflect": true,
-                "defaultValue": "\"default\""
+                "attribute": "label",
+                "reflect": false
             },
-            "inline": {
+            "monochrome": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -94,29 +79,42 @@ export class TabGroup {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "If `true`, the tabs and tab panels will be positioned separately."
+                    "tags": [{
+                            "name": "internal",
+                            "text": "Determines whether black variant of the tabs should be displayed."
+                        }],
+                    "text": ""
                 },
-                "attribute": "inline",
-                "reflect": true,
+                "attribute": "monochrome",
+                "reflect": false,
                 "defaultValue": "false"
             },
-            "label": {
+            "theme": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
+                    "original": "IcThemeMode",
+                    "resolved": "\"dark\" | \"inherit\" | \"light\"",
+                    "references": {
+                        "IcThemeMode": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcThemeMode"
+                        }
+                    }
                 },
-                "required": true,
-                "optional": false,
+                "required": false,
+                "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "The label to describe the purpose of the set of tabs to screen reader users."
+                    "tags": [{
+                            "name": "internal",
+                            "text": "Determines whether the light or dark variant of the tabs should be displayed."
+                        }],
+                    "text": ""
                 },
-                "attribute": "label",
-                "reflect": 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;AACvE,OAAO,EAEL,qBAAqB,GACtB,MAAM,mBAAmB,CAAC;AAS3B,MAAM,OAAO,QAAQ;;0BAI+B,MAAM;yBAMV,SAAS;sBAKX,KAAK;;;IAOjD,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,UAAU,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QAEnC,OAAO,CACL,EAAC,IAAI,IACH,IAAI,EAAC,SAAS,gBACF,KAAK,EACjB,KAAK,EAAE;gBACL,CAAC,OAAO,CAAC,EAAE,UAAU,KAAK,qBAAqB,CAAC,KAAK;gBACrD,CAAC,QAAQ,CAAC,EAAE,IAAI,CAAC,MAAM;aACxB;YAED,4BACE,UAAU,EACR,UAAU,KAAK,qBAAqB,CAAC,IAAI;oBACvC,CAAC,CAAC,qBAAqB,CAAC,OAAO;oBAC/B,CAAC,CAAC,UAAU,mBAEF,UAAU;gBAExB,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 {\n  IcThemeForegroundNoDefault,\n  IcThemeForegroundEnum,\n} 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   * @internal The appearance of the tab group, e.g dark, or light.\n   */\n  @Prop() appearance?: IcThemeForegroundNoDefault = \"dark\";\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   * 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  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Tab Group\"\n    );\n  }\n\n  render() {\n    const { appearance, label } = this;\n\n    return (\n      <Host\n        role=\"tablist\"\n        aria-label={label}\n        class={{\n          [\"light\"]: appearance === IcThemeForegroundEnum.Light,\n          [\"inline\"]: this.inline,\n        }}\n      >\n        <ic-horizontal-scroll\n          appearance={\n            appearance === IcThemeForegroundEnum.Dark\n              ? IcThemeForegroundEnum.Default\n              : appearance\n          }\n          focus-trigger=\"tabFocus\"\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;;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"]}

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

@@ -445,6 +445,6 @@ video {
   display: block;
 }
 
-:host(.ic-tab-panel-light) {
-  color: white;
+:host {
+  color: var(--ic-color-text-primary);
 }

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

@@ -1,22 +1,23 @@
 import { Host, h, } from "@stencil/core";
-import { IcThemeForegroundEnum, } from "../../utils/types";
+import { isPropDefined } from "../../utils/helpers";
 export class TabPanel {
     constructor() {
-        this.appearance = "dark";
-        this.contextId = "default";
+        this.monochrome = false;
+        this.panelId = undefined;
+        this.selectedTab = undefined;
+        this.tabPosition = undefined;
+        this.theme = "inherit";
     }
     connectedCallback() {
         this.tabPanelCreated.emit(this.el);
     }
-    disconnectedCallback() {
-        var _a;
-        (_a = document
-            .querySelector(`ic-tab-context[context-id=${this.contextId}]`)) === null || _a === void 0 ? void 0 : _a.tabRemovedHandler();
-    }
     render() {
+        const { panelId, selectedTab, theme } = this;
         return (h(Host, { class: {
-                "ic-tab-panel-light": this.appearance === IcThemeForegroundEnum.Light,
-            }, role: "tabpanel" }, h("div", null, h("slot", null))));
+                [`ic-theme-${theme}`]: theme !== "inherit",
+            }, role: "tabpanel", hidden: isPropDefined(panelId) && isPropDefined(selectedTab)
+                ? !(panelId === selectedTab)
+                : true }, h("div", null, h("slot", null))));
     }
     static get is() { return "ic-tab-panel"; }
     static get encapsulation() { return "shadow"; }
@@ -32,34 +33,28 @@ export class TabPanel {
     }
     static get properties() {
         return {
-            "appearance": {
-                "type": "string",
+            "monochrome": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "IcThemeForegroundNoDefault",
-                    "resolved": "\"dark\" | \"light\"",
-                    "references": {
-                        "IcThemeForegroundNoDefault": {
-                            "location": "import",
-                            "path": "../../utils/types",
-                            "id": "src/utils/types.ts::IcThemeForegroundNoDefault"
-                        }
-                    }
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [{
                             "name": "internal",
-                            "text": "The appearance of the tabs, e.g dark, or light."
+                            "text": "Determines whether black variant of the tabs should be displayed."
                         }],
                     "text": ""
                 },
-                "attribute": "appearance",
+                "attribute": "monochrome",
                 "reflect": false,
-                "defaultValue": "\"dark\""
+                "defaultValue": "false"
             },
-            "contextId": {
+            "panelId": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -71,14 +66,80 @@ export class TabPanel {
                 "optional": true,
                 "docs": {
                     "tags": [{
-                            "name": "deprecated",
-                            "text": "This is no longer required.\nThe context id is passed down from `ic-tab-context`"
+                            "name": "internal",
+                            "text": "The shared ID that links the panel and tab."
                         }],
                     "text": ""
                 },
-                "attribute": "context-id",
-                "reflect": true,
-                "defaultValue": "\"default\""
+                "attribute": "panel-id",
+                "reflect": true
+            },
+            "selectedTab": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": "The shared ID of the currently selected tab."
+                        }],
+                    "text": ""
+                },
+                "attribute": "selected-tab",
+                "reflect": false
+            },
+            "tabPosition": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": "The position of the tab panel inside the tabs array in context."
+                        }],
+                    "text": ""
+                },
+                "attribute": "tab-position",
+                "reflect": true
+            },
+            "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": [{
+                            "name": "internal",
+                            "text": "Determines whether the light or dark variant of the tabs should be displayed."
+                        }],
+                    "text": ""
+                },
+                "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;AACvB,OAAO,EACL,qBAAqB,GAEtB,MAAM,mBAAmB,CAAC;AAO3B,MAAM,OAAO,QAAQ;;0BAM+B,MAAM;yBAMV,SAAS;;IAYvD,iBAAiB;QACf,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IACrC,CAAC;IAED,oBAAoB;;QAClB,MAAA,QAAQ;aACL,aAAa,CACZ,6BAA6B,IAAI,CAAC,SAAS,GAAG,CAC/C,0CACC,iBAAiB,EAAE,CAAC;IAC1B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;gBACL,oBAAoB,EAAE,IAAI,CAAC,UAAU,KAAK,qBAAqB,CAAC,KAAK;aACtE,EACD,IAAI,EAAC,UAAU;YAEf;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 {\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() el: HTMLIcTabPanelElement;\n\n  /**\n   * @internal The appearance of the tabs, e.g dark, or light.\n   */\n  @Prop() appearance?: IcThemeForegroundNoDefault = \"dark\";\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 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  disconnectedCallback(): void {\n    document\n      .querySelector<HTMLIcTabContextElement>(\n        `ic-tab-context[context-id=${this.contextId}]`\n      )\n      ?.tabRemovedHandler();\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          \"ic-tab-panel-light\": this.appearance === IcThemeForegroundEnum.Light,\n        }}\n        role=\"tabpanel\"\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;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"]}

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

@@ -0,0 +1,50 @@
+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" 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" 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 hidden="" role="tabpanel" tab-position="1">
+    <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/test/basic/ic-tab-panel.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-tab-panel.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-tab-panel/test/basic/ic-tab-panel.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAE9C,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;IAChC,EAAE,CAAC,2DAA2D,EAAE,KAAK,IAAI,EAAE;QACzE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;YACtB,IAAI,EAAE,uFAAuF;SAC9F,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;aACd,WAAW,CAAC;;;;;;;kBAOD,CAAC,CAAC;IAClB,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,2DAA2D,EAAE,KAAK,IAAI,EAAE;QACzE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;YACtB,IAAI,EAAE,uFAAuF;SAC9F,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;aACd,WAAW,CAAC;;;;;;;kBAOD,CAAC,CAAC;IAClB,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,2DAA2D,EAAE,KAAK,IAAI,EAAE;QACzE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;YACtB,IAAI,EAAE,yDAAyD;SAChE,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;aACd,WAAW,CAAC;;;;;;;kBAOD,CAAC,CAAC;IAClB,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\" 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\" 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 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"]}

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

@@ -448,19 +448,59 @@ video {
   display: block;
 
   --ic-input-label-helpertext-padding: var(--ic-space-xxs);
-}
-
-:host(.fullwidth) {
+  --border-color: var(--ic-text-field-border-neutral);
+  --border-color-hover: var(--ic-text-field-border-neutral-hover);
+  --border-color-pressed: var(--ic-text-field-border-neutral-pressed);
+  --border-color-disabled: var(--ic-text-field-border-disabled);
+  --border-color-error: var(--ic-text-field-border-error);
+  --border-color-error-hover: var(--ic-text-field-border-error-hover);
+  --border-color-error-pressed: var(--ic-text-field-border-error-pressed);
+  --border-color-success: var(--ic-text-field-border-success);
+  --border-color-success-hover: var(--ic-text-field-border-success-hover);
+  --border-color-success-pressed: var(--ic-text-field-border-success-pressed);
+  --border-color-warning: var(--ic-text-field-border-warning);
+  --border-color-warning-hover: var(--ic-text-field-border-warning-hover);
+  --border-color-warning-pressed: var(--ic-text-field-border-warning-pressed);
+  --ic-input-label-text-color: var(--ic-text-field-label);
+  --ic-input-label-helper-text-color: var(--ic-text-field-subtitle);
+  --ic-input-validation-status-text-color: var(--ic-text-field-state-text);
+  --ic-input-validation-error: var(--ic-text-field-state-icon-error);
+  --ic-input-validation-warning-icon-color: var(
+    --ic-text-field-state-icon-warning
+  );
+  --ic-input-validation-success-icon-color: var(
+    --ic-text-field-state-icon-success
+  );
+  --ic-input-component-container-success-icon-inline-color: var(
+    --ic-text-field-state-icon-success
+  );
+}
+
+:host(.ic-text-field-disabled) {
+  --ic-input-label-text-color: var(--ic-text-field-label-disabled);
+  --ic-input-label-helper-text-color: var(--ic-text-field-subtitle-disabled);
+  --text-field-placeholder-color: var(
+    --ic-text-field-text-area-placeholder-text-disabled
+  );
+}
+
+:host(.ic-text-field-full-width) {
   width: 100%;
 }
 
 ::-moz-placeholder {
-  color: var(--ic-color-tertiary-text);
+  color: var(
+    --text-field-placeholder-color,
+    var(--ic-text-field-placeholder-text)
+  );
   opacity: 1;
 }
 
 ::placeholder {
-  color: var(--ic-color-tertiary-text);
+  color: var(
+    --text-field-placeholder-color,
+    var(--ic-text-field-placeholder-text)
+  );
   opacity: 1;
 }
 
@@ -468,12 +508,17 @@ input,
 textarea {
   border: 0;
   border-radius: var(--ic-border-radius);
-  background-color: var(--ic-architectural-white);
+  color: var(--text-field-text-color, var(--ic-text-field-text));
+  background-color: var(--input-bg-color, var(--ic-text-field-background));
   line-height: 1.5rem;
   letter-spacing: 0.005rem;
   width: 100%;
   padding-right: var(--ic-space-xs);
   padding-left: var(--ic-space-xs);
+  caret-color: var(
+    --text-field-typing-cursor,
+    var(--ic-text-field-typing-cursor)
+  );
 }
 
 textarea {
@@ -490,12 +535,15 @@ textarea:focus {
 
 input:disabled,
 textarea:disabled {
-  color: var(--ic-architectural-200);
+  color: var(
+    --text-field-disabled-text-color,
+    var(--ic-text-field-text-disabled)
+  );
 }
 
 input.readonly,
 textarea.readonly {
-  color: var(--ic-color-primary-text);
+  color: var(--ic-text-field-read-only-input-text-internal);
 }
 
 /* Chrome, Safari, Edge */
@@ -514,27 +562,37 @@ textarea.no-resize {
   resize: none;
 }
 
-.maxlengthtext {
-  color: var(--ic-color-secondary-text);
+.char-count-text {
+  --ic-typography-color: var(--ic-text-field-character-limit);
+
   padding-right: var(--ic-space-xxxs);
 }
 
+:host(.ic-text-field-disabled) .char-count-text {
+  --ic-typography-color: var(--ic-text-field-character-limit-disabled);
+}
+
 .no-left-pad {
   padding-left: 0;
 }
 
 ::slotted([slot="icon"]) {
-  fill: var(--ic-color-tertiary-text);
+  fill: var(--ic-text-field-text-disabled);
 }
 
 .has-value ::slotted([slot="icon"]) {
-  fill: var(--ic-color-primary-text);
+  fill: var(--ic-text-field-input-internal-icon);
 }
 
-.charcount {
+.char-count {
   margin-right: calc(-1 * var(--ic-space-xxxs));
 }
 
+.remaining-char-count-desc {
+  position: absolute;
+  left: -9999px;
+}
+
 input[type="search"]::-webkit-search-cancel-button,
 input[type="search"]::-webkit-search-decoration,
 input[type="search"]::-webkit-search-results-button,