@ukic/web-components 3.0.0 → 3.1.0

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

@@ -1,23 +1,26 @@
 import { Host, h, } from "@stencil/core";
-import { IcThemeForegroundEnum, } from "../../utils/types";
-import { isPropDefined } from "../../utils/helpers";
 export class TabPanel {
     constructor() {
-        this.appearance = "dark";
-        this.panelId = undefined;
-        this.selectedTab = undefined;
-        this.tabPosition = undefined;
+        /**
+         * @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;
+        /** @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, appearance } = this;
-        return (h(Host, { class: {
-                ["ic-tab-panel-light"]: appearance === IcThemeForegroundEnum.Light,
-            }, role: "tabpanel", hidden: isPropDefined(panelId) && isPropDefined(selectedTab)
-                ? !(panelId === selectedTab)
-                : true }, h("div", null, h("slot", null))));
+        const { active, theme } = this;
+        return (h(Host, { key: '629c66ac51b529d443ad613d61f6875958e9d1a2', class: {
+                [`ic-theme-${theme}`]: theme !== "inherit",
+                "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,39 +36,58 @@ export class TabPanel {
     }
     static get properties() {
         return {
-            "appearance": {
-                "type": "string",
+            "active": {
+                "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": 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": [{
                             "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",
+                "getter": false,
+                "setter": false,
+                "attribute": "monochrome",
                 "reflect": false,
-                "defaultValue": "\"dark\""
+                "defaultValue": "false"
             },
             "panelId": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -77,6 +99,8 @@ export class TabPanel {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "panel-id",
                 "reflect": true
             },
@@ -85,7 +109,7 @@ export class TabPanel {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -97,6 +121,8 @@ export class TabPanel {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "selected-tab",
                 "reflect": false
             },
@@ -105,7 +131,7 @@ export class TabPanel {
                 "mutable": false,
                 "complexType": {
                     "original": "number",
-                    "resolved": "number",
+                    "resolved": "number | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -117,8 +143,39 @@ export class TabPanel {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "tab-position",
                 "reflect": true
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcThemeMode",
+                    "resolved": "\"dark\" | \"inherit\" | \"light\" | undefined",
+                    "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": ""
+                },
+                "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;AACvB,OAAO,EACL,qBAAqB,GAEtB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAOpD,MAAM,OAAO,QAAQ;;0BAM+B,MAAM;;;;;IA2BxD,iBAAiB;QACf,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IACrC,CAAC;IAED,MAAM;QACJ,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;QAClD,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;gBACL,CAAC,oBAAoB,CAAC,EAAE,UAAU,KAAK,qBAAqB,CAAC,KAAK;aACnE,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 {\n  IcThemeForegroundEnum,\n  IcThemeForegroundNoDefault,\n} 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  /**\n   * @internal The appearance of the tabs, e.g dark, or light.\n   */\n  @Prop() appearance?: IcThemeForegroundNoDefault = \"dark\";\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  /**\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, appearance } = this;\n    return (\n      <Host\n        class={{\n          [\"ic-tab-panel-light\"]: appearance === IcThemeForegroundEnum.Light,\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

@@ -446,6 +446,42 @@ video {
    * @prop --input-width: Width of the input field
    */
   display: block;
+
+  --ic-input-label-helpertext-padding: var(--ic-space-xxs);
+  --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) {
@@ -453,12 +489,18 @@ video {
 }
 
 ::-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;
 }
 
@@ -466,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 {
@@ -488,12 +535,16 @@ 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);
+  background: transparent;
 }
 
 /* Chrome, Safari, Edge */
@@ -513,20 +564,25 @@ textarea.no-resize {
 }
 
 .char-count-text {
-  color: var(--ic-color-secondary-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);
 }
 
 .char-count {