@ukic/web-components 2.1.0-beta.1 → 2.1.0-beta.10

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

@@ -1,139 +1,25 @@
 :host {
   --border-bottom-color: var(--ic-architectural-300);
-  --splitter-color: var(--ic-architectural-100);
-  --tab-scroll-focus: var(--ic-border-focus);
-  --tab-scroll-fill: var(--ic-action-default);
-  --tab-scroll-disabled-fill: var(--ic-architectural-300);
-  --tab-scroll-hover: var(--ic-action-default-bg-hover);
-  --tab-scroll-active: var(--ic-action-default-bg-active);
 
   display: block;
   margin-bottom: var(--ic-space-md);
-  margin-left: calc(-1 * var(--ic-space-xs));
-}
-
-:host(.light) {
-  --splitter-color: var(--ic-architectural-white);
-  --tab-scroll-focus: var(--ic-border-focus-dark);
-  --tab-scroll-fill: var(--ic-action-light);
-  --tab-scroll-disabled-fill: var(--ic-architectural-500);
-  --tab-scroll-hover: var(--ic-action-dark-bg-hover);
-  --tab-scroll-active: var(--ic-action-dark-bg-active);
+  border-bottom: 1px solid var(--border-bottom-color);
 }
 
 :host([inline]) {
   margin-bottom: 0;
+  border-bottom: none;
 }
 
-.tabs-container {
-  display: flex;
-  flex-direction: row;
-  overflow-y: hidden;
-  overflow-x: scroll;
-  height: 100%;
-  align-items: center;
-  padding: var(--ic-space-xs);
-  scroll-behavior: smooth;
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-  margin: calc(-1 * var(--ic-space-xs)) 0;
-}
-
-.tabs-container::-webkit-scrollbar {
-  display: none;
-}
-
-.ic-tab-group-container {
-  display: flex;
-  align-items: center;
-}
-
-:host(.light.ic-tab-group-not-inline) {
+.light {
   --border-bottom-color: var(--ic-architectural-white);
 }
 
-.scroll-container {
-  display: flex;
-}
-
-.scroll-container.hidden {
-  display: none;
-}
-
-.scroll-container:first-child {
-  margin-left: var(--ic-space-xs);
-}
-
-.scroll-arrow {
-  display: flex;
-  width: 36px;
-  height: 36px;
-  margin: var(--ic-space-xxs) var(--ic-space-xxxs);
-  align-items: center;
-  justify-content: center;
-  fill: var(--tab-scroll-fill);
-  cursor: pointer;
-}
-
-.scroll-arrow:focus {
-  outline: var(--ic-hc-focus-outline);
-}
-
-.scroll-arrow:hover {
-  background-color: var(--tab-scroll-hover);
-}
-
-.scroll-arrow:active {
-  background-color: var(--tab-scroll-active);
-}
-
-.scroll-container.disabled .scroll-arrow {
-  fill: var(--tab-scroll-disabled-fill);
-  cursor: default;
-}
-
-.scroll-container.disabled .scroll-arrow:hover,
-.scroll-container.disabled .scroll-arrow:active,
-.scroll-container.disabled .scroll-arrow:focus {
-  background-color: unset;
-  box-shadow: none;
-}
-
-.scroll-container.disabled .ic-tooltip-container {
-  display: none !important;
-}
-
-.scroll-splitter-left,
-.scroll-splitter-right {
+.tabs-container {
   display: flex;
-  height: var(--ic-space-lg);
-  width: 1px;
-  margin-top: 10px;
-  background-color: var(--splitter-color);
-}
-
-.scroll-splitter-left {
-  margin-left: var(--ic-space-xxxs);
-}
-
-.scroll-splitter-right {
-  margin-right: var(--ic-space-xxxs);
+  flex-direction: row;
 }
 
-.scroll-container.disabled .scroll-splitter-left,
-.scroll-container.disabled .scroll-splitter-right {
+.tabs-container::-webkit-scrollbar {
   display: none;
 }
-
-.ic-tab-splitter {
-  display: block;
-  background-color: var(--border-bottom-color);
-  height: 1px;
-  right: 0;
-  left: 0;
-  margin-left: var(--ic-space-xs);
-}
-
-.ic-tab-splitter.hidden {
-  height: 0;
-}

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

@@ -1,129 +1,27 @@
-import { Host, h, } from "@stencil/core";
-import LeftArrow from "./assets/left-arrow.svg";
-import RightArrow from "./assets/right-arrow.svg";
-import { checkResizeObserver, elementOverflowsX, onComponentRequiredPropUndefined, } from "../../utils/helpers";
+import { Host, h } from "@stencil/core";
+import { onComponentRequiredPropUndefined } from "../../utils/helpers";
 import { IcThemeForegroundEnum, } from "../../utils/types";
-const SCROLL_DELAY_MS = 200;
 export class TabGroup {
   constructor() {
-    this.buttonStateSet = false;
-    this.resizeObserverCallback = () => {
-      if (this.tabGroupEl === null || this.tabGroupEl === undefined) {
-        this.tabGroupEl = this.host.shadowRoot.querySelector(".tabs-container");
-      }
-      this.tabOverflow = elementOverflowsX(this.tabGroupEl);
-      if (this.tabOverflow) {
-        this.lastTabVisible =
-          this.tabGroupEl.offsetWidth + this.tabGroupEl.scrollLeft >=
-            this.tabGroupEl.scrollWidth;
-      }
-    };
-    this.runResizeObserver = () => {
-      this.resizeObserver = new ResizeObserver(() => {
-        this.resizeObserverCallback();
-      });
-      this.resizeObserver.observe(this.splitterEl);
-    };
-    this.scrollLeft = () => {
-      this.scrollTabIntoView(this.getCurrentLeftTab() - 1);
-    };
-    this.scrollRight = () => {
-      this.scrollTabIntoView(this.getCurrentLeftTab() + 1);
-    };
-    this.longScrollRight = () => {
-      this.scrollRight();
-      this.scrollDelay = window.setTimeout(this.longScrollRight, SCROLL_DELAY_MS);
-    };
-    this.longScrollLeft = () => {
-      this.scrollLeft();
-      this.scrollDelay = window.setTimeout(this.longScrollLeft, SCROLL_DELAY_MS);
-    };
-    this.leftArrowMouseDownHandler = () => {
-      this.scrollDelay = window.setTimeout(this.longScrollLeft, SCROLL_DELAY_MS);
-    };
-    this.rightArrowMouseDownHandler = () => {
-      this.scrollDelay = window.setTimeout(this.longScrollRight, SCROLL_DELAY_MS);
-    };
-    this.arrowMouseUpHandler = () => {
-      window.clearTimeout(this.scrollDelay);
-    };
-    this.getCurrentLeftTab = () => {
-      const index = this.tabOffsets.findIndex((el) => el > this.tabGroupEl.scrollLeft);
-      return index < 0 ? 0 : index;
-    };
-    this.scrollHandler = () => {
-      window.clearTimeout(this.isScrolling);
-      // Set a timeout to run after scrolling ends
-      this.isScrolling = window.setTimeout(this.scrollStopped, 50);
-    };
-    this.scrollStopped = () => {
-      // if scrollTabIntoView has been called, the button states will already be set
-      // can't just handle it here as it causes strange jumping behaviour in positioning
-      if (this.buttonStateSet === false) {
-        this.firstTabVisible = this.tabGroupEl.scrollLeft === 0;
-        this.lastTabVisible =
-          this.tabGroupEl.offsetWidth + this.tabGroupEl.scrollLeft >=
-            this.tabGroupEl.scrollWidth;
-      }
-      this.buttonStateSet = false;
-    };
     this.contextId = "default";
     this.inline = false;
     this.label = undefined;
     this.appearance = "dark";
-    this.firstTabVisible = true;
-    this.lastTabVisible = false;
-    this.tabOverflow = false;
-  }
-  /**
-   * @internal if tab side scrolling enabled, scrolls the specified tab into view
-   */
-  async scrollTabIntoView(tabNumber) {
-    this.firstTabVisible = tabNumber <= 0;
-    const newScrollPos = tabNumber <= 0 ? 0 : this.tabOffsets[tabNumber - 1];
-    this.lastTabVisible =
-      this.tabGroupEl.offsetWidth + newScrollPos >= this.tabGroupEl.scrollWidth;
-    this.buttonStateSet = true;
-    this.tabGroupEl.scrollLeft = newScrollPos;
-  }
-  tabFocusHandler(event) {
-    if (this.tabOverflow) {
-      this.scrollTabIntoView(event.detail.position);
-    }
   }
   componentDidLoad() {
-    this.tabs = Array.from(this.host.querySelectorAll("ic-tab"));
-    let runningTotal = 0;
-    this.tabOffsets = this.tabs.map((tab) => {
-      runningTotal += tab.offsetWidth;
-      return runningTotal;
-    });
-    checkResizeObserver(this.runResizeObserver);
-    onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Tab List");
-  }
-  disconnectedCallback() {
-    this.resizeObserver.disconnect();
+    onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Tab Group");
   }
   render() {
-    const { inline, appearance, label, firstTabVisible, lastTabVisible, tabOverflow, } = this;
+    const { appearance, label } = this;
     return (h(Host, { role: "tablist", "aria-label": label, class: {
         ["light"]: appearance === IcThemeForegroundEnum.Light,
-        ["ic-tab-group-not-inline"]: !inline,
-      } }, h("div", { class: "ic-tab-group-container" }, this.tabOverflow && (h("div", { "aria-hidden": "true", id: "scroll-container-left", class: {
-        ["scroll-container"]: true,
-        ["hidden"]: !tabOverflow,
-        ["disabled"]: firstTabVisible,
-      } }, h("ic-tooltip", { placement: "bottom-start", label: "Scroll left", target: "left-arrow" }, h("span", { id: "left-arrow", class: "scroll-arrow", innerHTML: LeftArrow, onClick: this.scrollLeft, onMouseDown: this.leftArrowMouseDownHandler, onMouseUp: this.arrowMouseUpHandler })), h("span", { class: "scroll-splitter-left" }))), h("div", { class: "tabs-container", ref: (el) => (this.tabGroupEl = el), onScroll: this.scrollHandler }, h("slot", null)), this.tabOverflow && (h("div", { "aria-hidden": "true", id: "scroll-container-right", class: {
-        ["scroll-container"]: true,
-        ["hidden"]: !tabOverflow,
-        ["disabled"]: lastTabVisible,
-      } }, h("span", { class: "scroll-splitter-right" }), h("ic-tooltip", { placement: "bottom-start", label: "Scroll right", target: "right-arrow" }, h("span", { id: "right-arrow", class: "scroll-arrow", innerHTML: RightArrow, onClick: this.scrollRight, onMouseDown: this.rightArrowMouseDownHandler, onMouseUp: this.arrowMouseUpHandler }))))), h("div", { "aria-hidden": "true", class: {
-        ["ic-tab-splitter"]: true,
-        ["hidden"]: inline,
-      }, ref: (el) => (this.splitterEl = el) })));
+      } }, h("ic-horizontal-scroll", { appearance: appearance === IcThemeForegroundEnum.Dark
+        ? IcThemeForegroundEnum.Default
+        : appearance }, h("div", { class: "tabs-container" }, h("slot", null)))));
   }
   static get is() { return "ic-tab-group"; }
   static get encapsulation() { return "shadow"; }
+  static get delegatesFocus() { return true; }
   static get originalStyleUrls() {
     return {
       "$": ["ic-tab-group.css"]
@@ -148,7 +46,7 @@ export class TabGroup {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Provide a unique context if using multiple tabs inside one another i.e. rendering another set of tabs inside a tab panel."
+          "text": "The unique context needed if using multiple tabs inside one another i.e. rendering another set of tabs inside a tab panel."
         },
         "attribute": "context-id",
         "reflect": true,
@@ -166,7 +64,7 @@ export class TabGroup {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Use when tabs and tab panels are to be positioned separately."
+          "text": "If `true`, the tabs and tab panels will be positioned separately."
         },
         "attribute": "inline",
         "reflect": true,
@@ -184,7 +82,7 @@ export class TabGroup {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Provide a label to describe the purpose of the set of tabs to screen reader users."
+          "text": "The label to describe the purpose of the set of tabs to screen reader users."
         },
         "attribute": "label",
         "reflect": false
@@ -207,7 +105,7 @@ export class TabGroup {
         "docs": {
           "tags": [{
               "name": "internal",
-              "text": "Determines whether the light or dark variant of the tabs should be displayed."
+              "text": "The appearance of the tab group, e.g dark, or light."
             }],
           "text": ""
         },
@@ -217,48 +115,6 @@ export class TabGroup {
       }
     };
   }
-  static get states() {
-    return {
-      "firstTabVisible": {},
-      "lastTabVisible": {},
-      "tabOverflow": {}
-    };
-  }
-  static get methods() {
-    return {
-      "scrollTabIntoView": {
-        "complexType": {
-          "signature": "(tabNumber: number) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "",
-          "tags": [{
-              "name": "internal",
-              "text": "if tab side scrolling enabled, scrolls the specified tab into view"
-            }]
-        }
-      }
-    };
-  }
   static get elementRef() { return "host"; }
-  static get listeners() {
-    return [{
-        "name": "tabFocus",
-        "method": "tabFocusHandler",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }];
-  }
 }
 //# sourceMappingURL=ic-tab-group.js.map

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":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  h,\n  State,\n  Method,\n  Listen,\n} from \"@stencil/core\";\n\nimport LeftArrow from \"./assets/left-arrow.svg\";\nimport RightArrow from \"./assets/right-arrow.svg\";\n\nimport {\n  checkResizeObserver,\n  elementOverflowsX,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcTabClickEventDetail } from \"../ic-tab/ic-tab.types\";\nimport {\n  IcThemeForegroundNoDefault,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\n\nconst SCROLL_DELAY_MS = 200;\n\n@Component({\n  tag: \"ic-tab-group\",\n  styleUrl: \"ic-tab-group.css\",\n  shadow: true,\n})\nexport class TabGroup {\n  @Element() host: HTMLIcTabGroupElement;\n\n  /**\n   * Provide a unique context if using multiple tabs inside one another i.e. rendering another set of tabs inside a tab panel.\n   */\n  @Prop({ reflect: true }) contextId?: string = \"default\";\n\n  /**\n   * Use when tabs and tab panels are to be positioned separately.\n   */\n  @Prop({ reflect: true }) inline?: boolean = false;\n\n  /**\n   * Provide a label to describe the purpose of the set of tabs to screen reader users.\n   */\n  @Prop() label!: string;\n\n  /** @internal Determines whether the light or dark variant of the tabs should be displayed. */\n  @Prop() appearance?: IcThemeForegroundNoDefault = \"dark\";\n\n  @State() firstTabVisible: boolean = true;\n  @State() lastTabVisible: boolean = false;\n  @State() tabOverflow: boolean = false;\n\n  private tabs: HTMLIcTabElement[];\n  private tabOffsets: number[];\n  private tabGroupEl: HTMLElement;\n  private splitterEl: HTMLElement;\n  private resizeObserver: ResizeObserver;\n  private isScrolling: number;\n  private scrollDelay: number;\n  private buttonStateSet: boolean = false;\n\n  /**\n   * @internal if tab side scrolling enabled, scrolls the specified tab into view\n   */\n  @Method()\n  async scrollTabIntoView(tabNumber: number): Promise<void> {\n    this.firstTabVisible = tabNumber <= 0;\n    const newScrollPos = tabNumber <= 0 ? 0 : this.tabOffsets[tabNumber - 1];\n    this.lastTabVisible =\n      this.tabGroupEl.offsetWidth + newScrollPos >= this.tabGroupEl.scrollWidth;\n    this.buttonStateSet = true;\n    this.tabGroupEl.scrollLeft = newScrollPos;\n  }\n\n  @Listen(\"tabFocus\")\n  tabFocusHandler(event: CustomEvent<IcTabClickEventDetail>): void {\n    if (this.tabOverflow) {\n      this.scrollTabIntoView(event.detail.position);\n    }\n  }\n\n  private resizeObserverCallback = () => {\n    if (this.tabGroupEl === null || this.tabGroupEl === undefined) {\n      this.tabGroupEl = this.host.shadowRoot.querySelector(\".tabs-container\");\n    }\n    this.tabOverflow = elementOverflowsX(this.tabGroupEl);\n    if (this.tabOverflow) {\n      this.lastTabVisible =\n        this.tabGroupEl.offsetWidth + this.tabGroupEl.scrollLeft >=\n        this.tabGroupEl.scrollWidth;\n    }\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      this.resizeObserverCallback();\n    });\n    this.resizeObserver.observe(this.splitterEl);\n  };\n\n  private scrollLeft = () => {\n    this.scrollTabIntoView(this.getCurrentLeftTab() - 1);\n  };\n\n  private scrollRight = () => {\n    this.scrollTabIntoView(this.getCurrentLeftTab() + 1);\n  };\n\n  private longScrollRight = () => {\n    this.scrollRight();\n    this.scrollDelay = window.setTimeout(this.longScrollRight, SCROLL_DELAY_MS);\n  };\n\n  private longScrollLeft = () => {\n    this.scrollLeft();\n    this.scrollDelay = window.setTimeout(this.longScrollLeft, SCROLL_DELAY_MS);\n  };\n\n  private leftArrowMouseDownHandler = () => {\n    this.scrollDelay = window.setTimeout(this.longScrollLeft, SCROLL_DELAY_MS);\n  };\n\n  private rightArrowMouseDownHandler = () => {\n    this.scrollDelay = window.setTimeout(this.longScrollRight, SCROLL_DELAY_MS);\n  };\n\n  private arrowMouseUpHandler = () => {\n    window.clearTimeout(this.scrollDelay);\n  };\n\n  private getCurrentLeftTab = (): number => {\n    const index = this.tabOffsets.findIndex(\n      (el) => el > this.tabGroupEl.scrollLeft\n    );\n    return index < 0 ? 0 : index;\n  };\n\n  private scrollHandler = () => {\n    window.clearTimeout(this.isScrolling);\n    // Set a timeout to run after scrolling ends\n    this.isScrolling = window.setTimeout(this.scrollStopped, 50);\n  };\n\n  private scrollStopped = () => {\n    // if scrollTabIntoView has been called, the button states will already be set\n    // can't just handle it here as it causes strange jumping behaviour in positioning\n    if (this.buttonStateSet === false) {\n      this.firstTabVisible = this.tabGroupEl.scrollLeft === 0;\n      this.lastTabVisible =\n        this.tabGroupEl.offsetWidth + this.tabGroupEl.scrollLeft >=\n        this.tabGroupEl.scrollWidth;\n    }\n    this.buttonStateSet = false;\n  };\n\n  componentDidLoad(): void {\n    this.tabs = Array.from(this.host.querySelectorAll(\"ic-tab\"));\n    let runningTotal = 0;\n    this.tabOffsets = this.tabs.map((tab) => {\n      runningTotal += tab.offsetWidth;\n      return runningTotal;\n    });\n    checkResizeObserver(this.runResizeObserver);\n\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Tab List\"\n    );\n  }\n\n  disconnectedCallback(): void {\n    this.resizeObserver.disconnect();\n  }\n\n  render() {\n    const {\n      inline,\n      appearance,\n      label,\n      firstTabVisible,\n      lastTabVisible,\n      tabOverflow,\n    } = this;\n\n    return (\n      <Host\n        role=\"tablist\"\n        aria-label={label}\n        class={{\n          [\"light\"]: appearance === IcThemeForegroundEnum.Light,\n          [\"ic-tab-group-not-inline\"]: !inline,\n        }}\n      >\n        <div class=\"ic-tab-group-container\">\n          {this.tabOverflow && (\n            <div\n              aria-hidden=\"true\"\n              id=\"scroll-container-left\"\n              class={{\n                [\"scroll-container\"]: true,\n                [\"hidden\"]: !tabOverflow,\n                [\"disabled\"]: firstTabVisible,\n              }}\n            >\n              <ic-tooltip\n                placement=\"bottom-start\"\n                label=\"Scroll left\"\n                target=\"left-arrow\"\n              >\n                <span\n                  id=\"left-arrow\"\n                  class=\"scroll-arrow\"\n                  innerHTML={LeftArrow}\n                  onClick={this.scrollLeft}\n                  onMouseDown={this.leftArrowMouseDownHandler}\n                  onMouseUp={this.arrowMouseUpHandler}\n                ></span>\n              </ic-tooltip>\n              <span class=\"scroll-splitter-left\"></span>\n            </div>\n          )}\n          <div\n            class=\"tabs-container\"\n            ref={(el) => (this.tabGroupEl = el)}\n            onScroll={this.scrollHandler}\n          >\n            <slot></slot>\n          </div>\n          {this.tabOverflow && (\n            <div\n              aria-hidden=\"true\"\n              id=\"scroll-container-right\"\n              class={{\n                [\"scroll-container\"]: true,\n                [\"hidden\"]: !tabOverflow,\n                [\"disabled\"]: lastTabVisible,\n              }}\n            >\n              <span class=\"scroll-splitter-right\"></span>\n              <ic-tooltip\n                placement=\"bottom-start\"\n                label=\"Scroll right\"\n                target=\"right-arrow\"\n              >\n                <span\n                  id=\"right-arrow\"\n                  class=\"scroll-arrow\"\n                  innerHTML={RightArrow}\n                  onClick={this.scrollRight}\n                  onMouseDown={this.rightArrowMouseDownHandler}\n                  onMouseUp={this.arrowMouseUpHandler}\n                ></span>\n              </ic-tooltip>\n            </div>\n          )}\n        </div>\n\n        <div\n          aria-hidden=\"true\"\n          class={{\n            [\"ic-tab-splitter\"]: true,\n            [\"hidden\"]: inline,\n          }}\n          ref={(el) => (this.splitterEl = el)}\n        ></div>\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,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAElE,OAAO,EAAE,gCAAgC,EAAE,MAAM,qBAAqB,CAAC;AACvE,OAAO,EAEL,qBAAqB,GACtB,MAAM,mBAAmB,CAAC;AAS3B,MAAM,OAAO,QAAQ;;qBAM2B,SAAS;kBAKX,KAAK;;sBAUC,MAAM;;EAExD,gBAAgB;IACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EACzC,WAAW,CACZ,CAAC;EACJ,CAAC;EAED,MAAM;IACJ,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;IAEnC,OAAO,CACL,EAAC,IAAI,IACH,IAAI,EAAC,SAAS,gBACF,KAAK,EACjB,KAAK,EAAE;QACL,CAAC,OAAO,CAAC,EAAE,UAAU,KAAK,qBAAqB,CAAC,KAAK;OACtD;MAED,4BACE,UAAU,EACR,UAAU,KAAK,qBAAqB,CAAC,IAAI;UACvC,CAAC,CAAC,qBAAqB,CAAC,OAAO;UAC/B,CAAC,CAAC,UAAU;QAGhB,WAAK,KAAK,EAAC,gBAAgB;UACzB,eAAa,CACT,CACe,CAClB,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, 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  @Element() host: HTMLIcTabGroupElement;\n\n  /**\n   * The unique context needed if using multiple tabs inside one another i.e. rendering another set of tabs inside a tab panel.\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  /**\n   * @internal The appearance of the tab group, e.g dark, or light.\n   */\n  @Prop() appearance?: IcThemeForegroundNoDefault = \"dark\";\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        }}\n      >\n        <ic-horizontal-scroll\n          appearance={\n            appearance === IcThemeForegroundEnum.Dark\n              ? IcThemeForegroundEnum.Default\n              : appearance\n          }\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

@@ -5,3 +5,7 @@
 :host(.ic-tab-panel-light) {
   color: white;
 }
+
+:host([hidden]) {
+  display: none;
+}

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

@@ -42,7 +42,7 @@ export class TabPanel {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Provide a unique context if using multiple tabs inside one another i.e. rendering another tabs inside a tab panel."
+          "text": "The unique context needed if using multiple tabs inside one another i.e. rendering another tabs inside a tab panel."
         },
         "attribute": "context-id",
         "reflect": true,
@@ -126,7 +126,7 @@ export class TabPanel {
         "docs": {
           "tags": [{
               "name": "internal",
-              "text": "Determines whether the light or dark variant of the tabs should be displayed."
+              "text": "The appearance of the tabs, e.g dark, or light."
             }],
           "text": ""
         },

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,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAClE,OAAO,EACL,qBAAqB,GAEtB,MAAM,mBAAmB,CAAC;AAO3B,MAAM,OAAO,QAAQ;;qBAM2B,SAAS;;;;sBAYL,MAAM;;EAExD,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 { Component, Element, Host, Prop, h } 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   * Provide a unique context if using multiple tabs inside one another i.e. rendering another tabs inside a tab panel.\n   */\n  @Prop({ reflect: true }) contextId?: string = \"default\";\n\n  /** @internal The position of the tab panel inside the tabs array in context. */\n  @Prop({ reflect: true }) tabPosition?: number;\n\n  /** @internal The shared ID that links the panel and tab. */\n  @Prop({ reflect: true }) panelId?: string;\n\n  /** @internal The shared ID of the currently selected tab. */\n  @Prop() selectedTab?: string;\n\n  /** @internal Determines whether the light or dark variant of the tabs should be displayed. */\n  @Prop() appearance?: IcThemeForegroundNoDefault = \"dark\";\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,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAClE,OAAO,EACL,qBAAqB,GAEtB,MAAM,mBAAmB,CAAC;AAO3B,MAAM,OAAO,QAAQ;;qBAM2B,SAAS;;;;sBAYL,MAAM;;EAExD,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 { Component, Element, Host, Prop, h } 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   * The unique context needed if using multiple tabs inside one another i.e. rendering another tabs inside a tab panel.\n   */\n  @Prop({ reflect: true }) contextId?: string = \"default\";\n\n  /** @internal The position of the tab panel inside the tabs array in context. */\n  @Prop({ reflect: true }) tabPosition?: number;\n\n  /** @internal The shared ID that links the panel and tab. */\n  @Prop({ reflect: true }) panelId?: string;\n\n  /** @internal The shared ID of the currently selected tab. */\n  @Prop() selectedTab?: string;\n\n  /** @internal The appearance of the tabs, e.g dark, or light. */\n  @Prop() appearance?: IcThemeForegroundNoDefault = \"dark\";\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-text-field/ic-text-field.css

@@ -443,11 +443,16 @@ video {
 
 :host {
   /**
-   * @prop --input-width: Width of the input field 
+   * @prop --input-width: Width of the input field
    */
   display: block;
 }
 
+:host([full-width]),
+.fullwidth {
+  width: 100%;
+}
+
 ::-moz-placeholder {
   color: var(--ic-color-tertiary-text);
   opacity: 1;
@@ -473,7 +478,7 @@ textarea {
 textarea {
   min-height: var(--ic-space-lg);
   resize: vertical;
-  padding-top: 6px;
+  padding-top: 0.375rem;
 }
 
 input:focus,
@@ -492,11 +497,6 @@ textarea.readonly {
   color: var(--ic-color-primary-text);
 }
 
-.fullwidth {
-  position: relative;
-  width: 100%;
-}
-
 /* Chrome, Safari, Edge */
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {