@ukic/web-components 2.0.0-alpha.124 → 2.0.0

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

@@ -1,4 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { I as IcThemeForegroundEnum } from './types.js';
 
 const TabContext = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -20,30 +21,30 @@ const TabContext = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         this.tabPanels[index].panelId = shared;
         this.tabPanels[index].tabPosition = index;
         this.tabPanels[index].setAttribute("aria-labelledby", tabId);
-        if (this.dark) {
-          tab.dark = true;
+        if (this.appearance === IcThemeForegroundEnum.Dark) {
+          tab.appearance = this.appearance;
         }
       });
-      if (this.dark) {
-        this.tabList.dark = true;
+      if (this.appearance === IcThemeForegroundEnum.Dark) {
+        this.tabGroup.appearance = this.appearance;
       }
     };
     // Gets tabs and tabpanels with the same context ID
     this.getChildren = () => {
-      this.tabList = Array.from(this.host.querySelectorAll("ic-tab-list")).find((tabList) => tabList.contextId === this.contextId);
-      this.tabs = Array.from(this.tabList.querySelectorAll("ic-tab")).filter((tab) => tab.contextId === this.contextId);
+      this.tabGroup = Array.from(this.host.querySelectorAll("ic-tab-group")).find((tabGroup) => tabGroup.contextId === this.contextId);
+      this.tabs = Array.from(this.tabGroup.querySelectorAll("ic-tab")).filter((tab) => tab.contextId === this.contextId);
       this.enabledTabs = this.getEnabledTabs();
       this.tabPanels = Array.from(this.host.querySelectorAll("ic-tab-panel"));
     };
     // Determines how keyboard navigation is to be handled based on the activation type
     this.attatchEventListeners = () => {
       if (this.activationType === "automatic") {
-        this.tabList.addEventListener("keydown", (event) => {
+        this.tabGroup.addEventListener("keydown", (event) => {
           this.handleKeyBoardNavAutomatic(event);
         });
       }
       else {
-        this.tabList.addEventListener("keydown", (event) => {
+        this.tabGroup.addEventListener("keydown", (event) => {
           this.handleKeyBoardNavManual(event);
         });
       }
@@ -175,7 +176,7 @@ const TabContext = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.contextId = "default";
     this.activationType = "automatic";
     this.selectedTabIndex = undefined;
-    this.dark = false;
+    this.appearance = "light";
     this.selectedTab = undefined;
   }
   updateSelectedTab(newValue) {
@@ -203,10 +204,10 @@ const TabContext = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   disconnectedCallback() {
     if (this.activationType === "manual") {
-      this.tabList.removeEventListener("keydown", (event) => this.handleKeyBoardNavManual(event));
+      this.tabGroup.removeEventListener("keydown", (event) => this.handleKeyBoardNavManual(event));
     }
     else {
-      this.tabList.removeEventListener("keydown", (event) => this.handleKeyBoardNavAutomatic(event));
+      this.tabGroup.removeEventListener("keydown", (event) => this.handleKeyBoardNavAutomatic(event));
     }
   }
   render() {
@@ -220,7 +221,7 @@ const TabContext = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "contextId": [513, "context-id"],
     "activationType": [1, "activation-type"],
     "selectedTabIndex": [2, "selected-tab-index"],
-    "dark": [4],
+    "appearance": [1],
     "selectedTab": [32]
   }, [[0, "tabClick", "tabClickHandler"]]]);
 function defineCustomElement$1() {

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

@@ -1 +1 @@
-{"file":"ic-tab-context.js","mappings":"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","names":[],"sources":["./src/components/ic-tab-context/ic-tab-context.tsx"],"sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Listen,\n  Prop,\n  State,\n  h,\n  Watch,\n} from \"@stencil/core\";\nimport { IcActivationTypes } from \"../../utils/types\";\n\nimport {\n  IcTabClickEventDetail,\n  IcTabSelectEventDetail,\n} from \"../ic-tab/ic-tab.types\";\n\n@Component({\n  tag: \"ic-tab-context\",\n})\nexport class TabContext {\n  @Element() host: HTMLIcTabContextElement;\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   * Determines whether tabs have to be manually activated (by pressing 'Enter' or 'Space') when they receive focus using keyboard navigation.\n   */\n  @Prop() activationType?: IcActivationTypes = \"automatic\";\n\n  /**\n   * Allows the user to control the selected tab. Must be used alongside the tabSelect event to manage tab selection.\n   */\n  @Prop() selectedTabIndex?: number;\n\n  /**\n   * Determines whether the dark variant of the tabs should be displayed.\n   */\n  @Prop() dark?: boolean = false;\n\n  @State() selectedTab: number | null;\n\n  @Watch(\"selectedTabIndex\")\n  updateSelectedTab(newValue: number): void {\n    this.selectedTab = newValue;\n  }\n\n  /**\n   * Emitted when a user selects a tab.\n   */\n  @Event() tabSelect: EventEmitter<IcTabSelectEventDetail>;\n\n  @Listen(\"tabClick\")\n  tabClickHandler(event: CustomEvent<IcTabClickEventDetail>): void {\n    if (\n      this.selectedTabIndex === undefined &&\n      event.detail.contextId === this.contextId\n    ) {\n      this.selectedTab = event.detail.position;\n    }\n    this.tabSelect.emit({\n      tabIndex: event.detail.position,\n    });\n  }\n\n  private controlledMode: boolean;\n  private tabs: HTMLIcTabElement[];\n  private enabledTabs: HTMLIcTabElement[];\n  private tabPanels: HTMLIcTabPanelElement[];\n  private tabList: HTMLIcTabListElement;\n  private focusedTabIndex: number;\n\n  // Sets attributes to link tabs and tabpanels\n  private linkTabs = () => {\n    this.tabs.forEach((tab, index) => {\n      const tabId = `ic-tab-${index}-context-${this.contextId}`;\n      const tabPanelId = `ic-tab-panel-${index}-context-${this.contextId}`;\n      const shared = `ic-tab--${index}-context-${this.contextId}`;\n      tab.setAttribute(\"id\", tabId);\n      tab.tabId = shared;\n      tab.tabPosition = index;\n      tab.setAttribute(\"aria-controls\", tabPanelId);\n      tab.setAttribute(\"context-id\", this.contextId);\n      this.tabPanels[index].setAttribute(\"id\", tabPanelId);\n      this.tabPanels[index].panelId = shared;\n      this.tabPanels[index].tabPosition = index;\n      this.tabPanels[index].setAttribute(\"aria-labelledby\", tabId);\n\n      if (this.dark) {\n        tab.dark = true;\n      }\n    });\n\n    if (this.dark) {\n      this.tabList.dark = true;\n    }\n  };\n\n  // Gets tabs and tabpanels with the same context ID\n  private getChildren = (): void => {\n    this.tabList = Array.from(this.host.querySelectorAll(\"ic-tab-list\")).find(\n      (tabList) => tabList.contextId === this.contextId\n    );\n    this.tabs = Array.from(this.tabList.querySelectorAll(\"ic-tab\")).filter(\n      (tab) => tab.contextId === this.contextId\n    );\n    this.enabledTabs = this.getEnabledTabs();\n    this.tabPanels = Array.from(this.host.querySelectorAll(\"ic-tab-panel\"));\n  };\n\n  // Determines how keyboard navigation is to be handled based on the activation type\n  private attatchEventListeners = (): void => {\n    if (this.activationType === \"automatic\") {\n      this.tabList.addEventListener(\"keydown\", (event) => {\n        this.handleKeyBoardNavAutomatic(event);\n      });\n    } else {\n      this.tabList.addEventListener(\"keydown\", (event) => {\n        this.handleKeyBoardNavManual(event);\n      });\n    }\n  };\n\n  // Determines whether the selected tab is being controlled within the component\n  // or by the user (via selectedTabIndex and onTabSelect)\n  private setControlledMode = (): void => {\n    if (this.selectedTabIndex !== undefined) {\n      this.controlledMode = true;\n      this.selectedTab = this.selectedTabIndex;\n    }\n  };\n\n  // Sets the tab that is selected on initial render\n  private setInitialTab = (): void => {\n    if (this.controlledMode) {\n      this.selectedTab = this.selectedTabIndex;\n      this.focusedTabIndex = this.selectedTabIndex;\n    } else {\n      const firstEnabledTabIndex = this.tabs.findIndex(\n        (tab) => tab.tabId === this.enabledTabs[0].tabId\n      );\n      this.selectedTab = firstEnabledTabIndex;\n      this.focusedTabIndex = firstEnabledTabIndex;\n    }\n  };\n\n  // Passes the selected tab to the tab and tab panel components\n  private configureTabs = () => {\n    this.enabledTabs.forEach((tab) => {\n      tab.selected = tab.tabPosition === this.selectedTab;\n    });\n    this.tabPanels.forEach((tabPanel) => {\n      tabPanel.selectedTab = this.tabs[this.selectedTab].tabId;\n    });\n  };\n\n  private getEnabledTabs = () => {\n    return Array.from(this.tabs).filter((child) => !child.disabled);\n  };\n\n  private getIndexOfEnabledTab = (allTabsIndex: number) => {\n    return this.enabledTabs.findIndex(\n      (tab) => tab.tabId === this.tabs[allTabsIndex].tabId\n    );\n  };\n\n  // Sets focus on tab and selects it\n  private keyboardSelectTab = (enabledTabIndex: number) => {\n    const newIndex = this.tabs.findIndex(\n      (tab) => tab.tabId === this.enabledTabs[enabledTabIndex].tabId\n    );\n    this.enabledTabs[enabledTabIndex].focus();\n    if (!this.controlledMode) {\n      this.selectedTab = newIndex;\n    } else {\n      this.tabSelect.emit({ tabIndex: newIndex });\n    }\n  };\n\n  // Sets focus on tab without selecting it (for manual activation)\n  private keyboardFocusTab = (enabledTabIndex: number) => {\n    const newIndex = this.tabs.findIndex(\n      (tab) => tab.tabId === this.enabledTabs[enabledTabIndex].tabId\n    );\n    this.enabledTabs[enabledTabIndex].focus();\n    this.focusedTabIndex = newIndex;\n  };\n\n  private handleKeyBoardNavAutomatic = (event: KeyboardEvent) => {\n    const key = event.key;\n    const enabledTabIndex = this.getIndexOfEnabledTab(this.selectedTab);\n    let preventDefault = true;\n    switch (key) {\n      case \"Home\":\n        this.keyboardSelectTab(0);\n        break;\n      case \"End\":\n        this.keyboardSelectTab(this.enabledTabs.length - 1);\n        break;\n      case \"ArrowRight\":\n        if (enabledTabIndex < this.enabledTabs.length - 1) {\n          this.keyboardSelectTab(enabledTabIndex + 1);\n        } else {\n          this.keyboardSelectTab(0);\n        }\n        break;\n      case \"ArrowLeft\":\n        if (enabledTabIndex > 0) {\n          this.keyboardSelectTab(enabledTabIndex - 1);\n        } else {\n          this.keyboardSelectTab(this.enabledTabs.length - 1);\n        }\n        break;\n      default:\n        preventDefault = false;\n    }\n    if (preventDefault) event.preventDefault();\n  };\n\n  private handleKeyBoardNavManual = (event: KeyboardEvent) => {\n    const key = event.key;\n    const enabledTabIndex = this.getIndexOfEnabledTab(this.focusedTabIndex);\n    let preventDefault = true;\n    switch (key) {\n      case \"Home\":\n        this.keyboardFocusTab(0);\n        break;\n      case \"End\":\n        this.keyboardFocusTab(this.enabledTabs.length - 1);\n        break;\n      case \"ArrowRight\":\n        if (enabledTabIndex < this.enabledTabs.length - 1) {\n          this.keyboardFocusTab(enabledTabIndex + 1);\n        } else {\n          this.keyboardFocusTab(0);\n        }\n        break;\n      case \"ArrowLeft\":\n        if (enabledTabIndex > 0) {\n          this.keyboardFocusTab(enabledTabIndex - 1);\n        } else {\n          this.keyboardFocusTab(this.enabledTabs.length - 1);\n        }\n        break;\n      case \"Enter\":\n        this.keyboardSelectTab(this.focusedTabIndex);\n        break;\n      case \" \":\n        this.keyboardSelectTab(this.focusedTabIndex);\n        break;\n      default:\n        preventDefault = false;\n    }\n    if (preventDefault) event.preventDefault();\n  };\n\n  componentDidLoad(): void {\n    this.setControlledMode();\n    this.getChildren();\n    this.linkTabs();\n    this.attatchEventListeners();\n    this.setInitialTab();\n    this.configureTabs();\n  }\n\n  componentWillUpdate(): void {\n    this.configureTabs();\n  }\n\n  disconnectedCallback(): void {\n    if (this.activationType === \"manual\") {\n      this.tabList.removeEventListener(\"keydown\", (event) =>\n        this.handleKeyBoardNavManual(event)\n      );\n    } else {\n      this.tabList.removeEventListener(\"keydown\", (event) =>\n        this.handleKeyBoardNavAutomatic(event)\n      );\n    }\n  }\n\n  render() {\n    return <slot></slot>;\n  }\n}\n"],"version":3}
+{"file":"ic-tab-context.js","mappings":"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","names":[],"sources":["./src/components/ic-tab-context/ic-tab-context.tsx"],"sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Listen,\n  Prop,\n  State,\n  h,\n  Watch,\n} from \"@stencil/core\";\nimport {\n  IcActivationTypes,\n  IcThemeForegroundNoDefault,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\n\nimport {\n  IcTabClickEventDetail,\n  IcTabSelectEventDetail,\n} from \"../ic-tab/ic-tab.types\";\n\n@Component({\n  tag: \"ic-tab-context\",\n})\nexport class TabContext {\n  @Element() host: HTMLIcTabContextElement;\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   * Determines whether tabs have to be manually activated (by pressing 'Enter' or 'Space') when they receive focus using keyboard navigation.\n   */\n  @Prop() activationType?: IcActivationTypes = \"automatic\";\n\n  /**\n   * Allows the user to control the selected tab. Must be used alongside the tabSelect event to manage tab selection.\n   */\n  @Prop() selectedTabIndex?: number;\n\n  /**\n   * Determines whether the light or dark variant of the tabs should be displayed.\n   */\n  @Prop() appearance?: IcThemeForegroundNoDefault = \"light\";\n\n  @State() selectedTab: number | null;\n\n  @Watch(\"selectedTabIndex\")\n  updateSelectedTab(newValue: number): void {\n    this.selectedTab = newValue;\n  }\n\n  /**\n   * Emitted when a user selects a tab.\n   */\n  @Event() tabSelect: EventEmitter<IcTabSelectEventDetail>;\n\n  @Listen(\"tabClick\")\n  tabClickHandler(event: CustomEvent<IcTabClickEventDetail>): void {\n    if (\n      this.selectedTabIndex === undefined &&\n      event.detail.contextId === this.contextId\n    ) {\n      this.selectedTab = event.detail.position;\n    }\n    this.tabSelect.emit({\n      tabIndex: event.detail.position,\n    });\n  }\n\n  private controlledMode: boolean;\n  private tabs: HTMLIcTabElement[];\n  private enabledTabs: HTMLIcTabElement[];\n  private tabPanels: HTMLIcTabPanelElement[];\n  private tabGroup: HTMLIcTabGroupElement;\n  private focusedTabIndex: number;\n\n  // Sets attributes to link tabs and tabpanels\n  private linkTabs = () => {\n    this.tabs.forEach((tab, index) => {\n      const tabId = `ic-tab-${index}-context-${this.contextId}`;\n      const tabPanelId = `ic-tab-panel-${index}-context-${this.contextId}`;\n      const shared = `ic-tab--${index}-context-${this.contextId}`;\n      tab.setAttribute(\"id\", tabId);\n      tab.tabId = shared;\n      tab.tabPosition = index;\n      tab.setAttribute(\"aria-controls\", tabPanelId);\n      tab.setAttribute(\"context-id\", this.contextId);\n      this.tabPanels[index].setAttribute(\"id\", tabPanelId);\n      this.tabPanels[index].panelId = shared;\n      this.tabPanels[index].tabPosition = index;\n      this.tabPanels[index].setAttribute(\"aria-labelledby\", tabId);\n\n      if (this.appearance === IcThemeForegroundEnum.Dark) {\n        tab.appearance = this.appearance;\n      }\n    });\n\n    if (this.appearance === IcThemeForegroundEnum.Dark) {\n      this.tabGroup.appearance = this.appearance;\n    }\n  };\n\n  // Gets tabs and tabpanels with the same context ID\n  private getChildren = (): void => {\n    this.tabGroup = Array.from(this.host.querySelectorAll(\"ic-tab-group\")).find(\n      (tabGroup) => tabGroup.contextId === this.contextId\n    );\n    this.tabs = Array.from(this.tabGroup.querySelectorAll(\"ic-tab\")).filter(\n      (tab) => tab.contextId === this.contextId\n    );\n    this.enabledTabs = this.getEnabledTabs();\n    this.tabPanels = Array.from(this.host.querySelectorAll(\"ic-tab-panel\"));\n  };\n\n  // Determines how keyboard navigation is to be handled based on the activation type\n  private attatchEventListeners = (): void => {\n    if (this.activationType === \"automatic\") {\n      this.tabGroup.addEventListener(\"keydown\", (event) => {\n        this.handleKeyBoardNavAutomatic(event);\n      });\n    } else {\n      this.tabGroup.addEventListener(\"keydown\", (event) => {\n        this.handleKeyBoardNavManual(event);\n      });\n    }\n  };\n\n  // Determines whether the selected tab is being controlled within the component\n  // or by the user (via selectedTabIndex and onTabSelect)\n  private setControlledMode = (): void => {\n    if (this.selectedTabIndex !== undefined) {\n      this.controlledMode = true;\n      this.selectedTab = this.selectedTabIndex;\n    }\n  };\n\n  // Sets the tab that is selected on initial render\n  private setInitialTab = (): void => {\n    if (this.controlledMode) {\n      this.selectedTab = this.selectedTabIndex;\n      this.focusedTabIndex = this.selectedTabIndex;\n    } else {\n      const firstEnabledTabIndex = this.tabs.findIndex(\n        (tab) => tab.tabId === this.enabledTabs[0].tabId\n      );\n      this.selectedTab = firstEnabledTabIndex;\n      this.focusedTabIndex = firstEnabledTabIndex;\n    }\n  };\n\n  // Passes the selected tab to the tab and tab panel components\n  private configureTabs = () => {\n    this.enabledTabs.forEach((tab) => {\n      tab.selected = tab.tabPosition === this.selectedTab;\n    });\n    this.tabPanels.forEach((tabPanel) => {\n      tabPanel.selectedTab = this.tabs[this.selectedTab].tabId;\n    });\n  };\n\n  private getEnabledTabs = () => {\n    return Array.from(this.tabs).filter((child) => !child.disabled);\n  };\n\n  private getIndexOfEnabledTab = (allTabsIndex: number) => {\n    return this.enabledTabs.findIndex(\n      (tab) => tab.tabId === this.tabs[allTabsIndex].tabId\n    );\n  };\n\n  // Sets focus on tab and selects it\n  private keyboardSelectTab = (enabledTabIndex: number) => {\n    const newIndex = this.tabs.findIndex(\n      (tab) => tab.tabId === this.enabledTabs[enabledTabIndex].tabId\n    );\n    this.enabledTabs[enabledTabIndex].focus();\n    if (!this.controlledMode) {\n      this.selectedTab = newIndex;\n    } else {\n      this.tabSelect.emit({ tabIndex: newIndex });\n    }\n  };\n\n  // Sets focus on tab without selecting it (for manual activation)\n  private keyboardFocusTab = (enabledTabIndex: number) => {\n    const newIndex = this.tabs.findIndex(\n      (tab) => tab.tabId === this.enabledTabs[enabledTabIndex].tabId\n    );\n    this.enabledTabs[enabledTabIndex].focus();\n    this.focusedTabIndex = newIndex;\n  };\n\n  private handleKeyBoardNavAutomatic = (event: KeyboardEvent) => {\n    const key = event.key;\n    const enabledTabIndex = this.getIndexOfEnabledTab(this.selectedTab);\n    let preventDefault = true;\n    switch (key) {\n      case \"Home\":\n        this.keyboardSelectTab(0);\n        break;\n      case \"End\":\n        this.keyboardSelectTab(this.enabledTabs.length - 1);\n        break;\n      case \"ArrowRight\":\n        if (enabledTabIndex < this.enabledTabs.length - 1) {\n          this.keyboardSelectTab(enabledTabIndex + 1);\n        } else {\n          this.keyboardSelectTab(0);\n        }\n        break;\n      case \"ArrowLeft\":\n        if (enabledTabIndex > 0) {\n          this.keyboardSelectTab(enabledTabIndex - 1);\n        } else {\n          this.keyboardSelectTab(this.enabledTabs.length - 1);\n        }\n        break;\n      default:\n        preventDefault = false;\n    }\n    if (preventDefault) event.preventDefault();\n  };\n\n  private handleKeyBoardNavManual = (event: KeyboardEvent) => {\n    const key = event.key;\n    const enabledTabIndex = this.getIndexOfEnabledTab(this.focusedTabIndex);\n    let preventDefault = true;\n    switch (key) {\n      case \"Home\":\n        this.keyboardFocusTab(0);\n        break;\n      case \"End\":\n        this.keyboardFocusTab(this.enabledTabs.length - 1);\n        break;\n      case \"ArrowRight\":\n        if (enabledTabIndex < this.enabledTabs.length - 1) {\n          this.keyboardFocusTab(enabledTabIndex + 1);\n        } else {\n          this.keyboardFocusTab(0);\n        }\n        break;\n      case \"ArrowLeft\":\n        if (enabledTabIndex > 0) {\n          this.keyboardFocusTab(enabledTabIndex - 1);\n        } else {\n          this.keyboardFocusTab(this.enabledTabs.length - 1);\n        }\n        break;\n      case \"Enter\":\n        this.keyboardSelectTab(this.focusedTabIndex);\n        break;\n      case \" \":\n        this.keyboardSelectTab(this.focusedTabIndex);\n        break;\n      default:\n        preventDefault = false;\n    }\n    if (preventDefault) event.preventDefault();\n  };\n\n  componentDidLoad(): void {\n    this.setControlledMode();\n    this.getChildren();\n    this.linkTabs();\n    this.attatchEventListeners();\n    this.setInitialTab();\n    this.configureTabs();\n  }\n\n  componentWillUpdate(): void {\n    this.configureTabs();\n  }\n\n  disconnectedCallback(): void {\n    if (this.activationType === \"manual\") {\n      this.tabGroup.removeEventListener(\"keydown\", (event) =>\n        this.handleKeyBoardNavManual(event)\n      );\n    } else {\n      this.tabGroup.removeEventListener(\"keydown\", (event) =>\n        this.handleKeyBoardNavAutomatic(event)\n      );\n    }\n  }\n\n  render() {\n    return <slot></slot>;\n  }\n}\n"],"version":3}

package/dist/components/{ic-tab-list.d.ts → ic-tab-group.d.ts}

@@ -1,9 +1,9 @@
 import type { Components, JSX } from "../types/components";
 
-interface IcTabList extends Components.IcTabList, HTMLElement {}
-export const IcTabList: {
-  prototype: IcTabList;
-  new (): IcTabList;
+interface IcTabGroup extends Components.IcTabGroup, HTMLElement {}
+export const IcTabGroup: {
+  prototype: IcTabGroup;
+  new (): IcTabGroup;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/{ic-tab-list.js → ic-tab-group.js}

@@ -1,5 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { y as elementOverflowsX, c as checkResizeObserver, a as onComponentRequiredPropUndefined } from './helpers.js';
+import { x as elementOverflowsX, c as checkResizeObserver, a as onComponentRequiredPropUndefined } from './helpers.js';
+import { I as IcThemeForegroundEnum } from './types.js';
 import { d as defineCustomElement$3 } from './ic-tooltip2.js';
 import { d as defineCustomElement$2 } from './ic-typography2.js';
 
@@ -12,24 +13,24 @@ const RightArrow = `<svg width="8" height="10" viewBox="0 0 8 10" xmlns="http://
 </svg>
 `;
 
-const icTabListCss = ":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(.dark){--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)}:host([inline]){margin-bottom:0}.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-list-container{display:flex;align-items:center}:host(.dark.ic-tab-list-not-inline){--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:none}.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{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)}.scroll-container.disabled .scroll-splitter-left,.scroll-container.disabled .scroll-splitter-right{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}";
+const icTabGroupCss = ":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(.dark){--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)}:host([inline]){margin-bottom:0}.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(.dark.ic-tab-group-not-inline){--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:none}.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{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)}.scroll-container.disabled .scroll-splitter-left,.scroll-container.disabled .scroll-splitter-right{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}";
 
 const SCROLL_DELAY_MS = 200;
-const TabList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const TabGroup = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.__attachShadow();
     this.buttonStateSet = false;
     this.resizeObserverCallback = () => {
-      if (this.tabListEl === null || this.tabListEl === undefined) {
-        this.tabListEl = this.host.shadowRoot.querySelector(".tabs-container");
+      if (this.tabGroupEl === null || this.tabGroupEl === undefined) {
+        this.tabGroupEl = this.host.shadowRoot.querySelector(".tabs-container");
       }
-      this.tabOverflow = elementOverflowsX(this.tabListEl);
+      this.tabOverflow = elementOverflowsX(this.tabGroupEl);
       if (this.tabOverflow) {
         this.lastTabVisible =
-          this.tabListEl.offsetWidth + this.tabListEl.scrollLeft >=
-            this.tabListEl.scrollWidth;
+          this.tabGroupEl.offsetWidth + this.tabGroupEl.scrollLeft >=
+            this.tabGroupEl.scrollWidth;
       }
     };
     this.runResizeObserver = () => {
@@ -62,7 +63,7 @@ const TabList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       window.clearTimeout(this.scrollDelay);
     };
     this.getCurrentLeftTab = () => {
-      const index = this.tabOffsets.findIndex((el) => el > this.tabListEl.scrollLeft);
+      const index = this.tabOffsets.findIndex((el) => el > this.tabGroupEl.scrollLeft);
       return index < 0 ? 0 : index;
     };
     this.scrollHandler = () => {
@@ -74,17 +75,17 @@ const TabList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       // 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.tabListEl.scrollLeft === 0;
+        this.firstTabVisible = this.tabGroupEl.scrollLeft === 0;
         this.lastTabVisible =
-          this.tabListEl.offsetWidth + this.tabListEl.scrollLeft >=
-            this.tabListEl.scrollWidth;
+          this.tabGroupEl.offsetWidth + this.tabGroupEl.scrollLeft >=
+            this.tabGroupEl.scrollWidth;
       }
       this.buttonStateSet = false;
     };
     this.contextId = "default";
     this.inline = false;
     this.label = undefined;
-    this.dark = false;
+    this.appearance = "light";
     this.firstTabVisible = true;
     this.lastTabVisible = false;
     this.tabOverflow = false;
@@ -96,9 +97,9 @@ const TabList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.firstTabVisible = tabNumber <= 0;
     const newScrollPos = tabNumber <= 0 ? 0 : this.tabOffsets[tabNumber - 1];
     this.lastTabVisible =
-      this.tabListEl.offsetWidth + newScrollPos >= this.tabListEl.scrollWidth;
+      this.tabGroupEl.offsetWidth + newScrollPos >= this.tabGroupEl.scrollWidth;
     this.buttonStateSet = true;
-    this.tabListEl.scrollLeft = newScrollPos;
+    this.tabGroupEl.scrollLeft = newScrollPos;
   }
   tabFocusHandler(event) {
     if (this.tabOverflow) {
@@ -119,30 +120,30 @@ const TabList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.resizeObserver.disconnect();
   }
   render() {
-    const { inline, dark, label, firstTabVisible, lastTabVisible, tabOverflow, } = this;
+    const { inline, appearance, label, firstTabVisible, lastTabVisible, tabOverflow, } = this;
     return (h(Host, { role: "tablist", "aria-label": label, class: {
-        ["dark"]: dark,
-        ["ic-tab-list-not-inline"]: !inline,
-      } }, h("div", { class: "ic-tab-list-container" }, this.tabOverflow && (h("div", { "aria-hidden": "true", id: "scroll-container-left", class: {
+        ["dark"]: appearance === IcThemeForegroundEnum.Dark,
+        ["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", "element-id": "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.tabListEl = el), onScroll: this.scrollHandler }, h("slot", null)), this.tabOverflow && (h("div", { "aria-hidden": "true", id: "scroll-container-right", class: {
+      } }, 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", "element-id": "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: {
+      } }, 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) })));
   }
   get host() { return this; }
-  static get style() { return icTabListCss; }
-}, [1, "ic-tab-list", {
+  static get style() { return icTabGroupCss; }
+}, [1, "ic-tab-group", {
     "contextId": [513, "context-id"],
     "inline": [516],
     "label": [1],
-    "dark": [4],
+    "appearance": [1],
     "firstTabVisible": [32],
     "lastTabVisible": [32],
     "tabOverflow": [32],
@@ -152,11 +153,11 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["ic-tab-list", "ic-tooltip", "ic-typography"];
+  const components = ["ic-tab-group", "ic-tooltip", "ic-typography"];
   components.forEach(tagName => { switch (tagName) {
-    case "ic-tab-list":
+    case "ic-tab-group":
       if (!customElements.get(tagName)) {
-        customElements.define(tagName, TabList);
+        customElements.define(tagName, TabGroup);
       }
       break;
     case "ic-tooltip":
@@ -172,9 +173,9 @@ function defineCustomElement$1() {
   } });
 }
 
-const IcTabList = TabList;
+const IcTabGroup = TabGroup;
 const defineCustomElement = defineCustomElement$1;
 
-export { IcTabList, defineCustomElement };
+export { IcTabGroup, defineCustomElement };
 
-//# sourceMappingURL=ic-tab-list.js.map
+//# sourceMappingURL=ic-tab-group.js.map

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

@@ -0,0 +1 @@
+{"file":"ic-tab-group.js","mappings":"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","names":[],"sources":["./src/components/ic-tab-group/ic-tab-group.css?tag=ic-tab-group&encapsulation=shadow","./src/components/ic-tab-group/ic-tab-group.tsx"],"sourcesContent":[":host {\n  --border-bottom-color: var(--ic-architectural-300);\n  --splitter-color: var(--ic-architectural-100);\n  --tab-scroll-focus: var(--ic-border-focus);\n  --tab-scroll-fill: var(--ic-action-default);\n  --tab-scroll-disabled-fill: var(--ic-architectural-300);\n  --tab-scroll-hover: var(--ic-action-default-bg-hover);\n  --tab-scroll-active: var(--ic-action-default-bg-active);\n\n  display: block;\n  margin-bottom: var(--ic-space-md);\n  margin-left: calc(-1 * var(--ic-space-xs));\n}\n\n:host(.dark) {\n  --splitter-color: var(--ic-architectural-white);\n  --tab-scroll-focus: var(--ic-border-focus-dark);\n  --tab-scroll-fill: var(--ic-action-light);\n  --tab-scroll-disabled-fill: var(--ic-architectural-500);\n  --tab-scroll-hover: var(--ic-action-dark-bg-hover);\n  --tab-scroll-active: var(--ic-action-dark-bg-active);\n}\n\n:host([inline]) {\n  margin-bottom: 0;\n}\n\n.tabs-container {\n  display: flex;\n  flex-direction: row;\n  overflow-y: hidden;\n  overflow-x: scroll;\n  height: 100%;\n  align-items: center;\n  padding: var(--ic-space-xs);\n  scroll-behavior: smooth;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  margin: calc(-1 * var(--ic-space-xs)) 0;\n}\n\n.tabs-container::-webkit-scrollbar {\n  display: none;\n}\n\n.ic-tab-group-container {\n  display: flex;\n  align-items: center;\n}\n\n:host(.dark.ic-tab-group-not-inline) {\n  --border-bottom-color: var(--ic-architectural-white);\n}\n\n.scroll-container {\n  display: flex;\n}\n\n.scroll-container.hidden {\n  display: none;\n}\n\n.scroll-container:first-child {\n  margin-left: var(--ic-space-xs);\n}\n\n.scroll-arrow {\n  display: flex;\n  width: 36px;\n  height: 36px;\n  margin: var(--ic-space-xxs) var(--ic-space-xxxs);\n  align-items: center;\n  justify-content: center;\n  fill: var(--tab-scroll-fill);\n  cursor: pointer;\n}\n\n.scroll-arrow:focus {\n  outline: none;\n}\n\n.scroll-arrow:hover {\n  background-color: var(--tab-scroll-hover);\n}\n\n.scroll-arrow:active {\n  background-color: var(--tab-scroll-active);\n}\n\n.scroll-container.disabled .scroll-arrow {\n  fill: var(--tab-scroll-disabled-fill);\n  cursor: default;\n}\n\n.scroll-container.disabled .scroll-arrow:hover,\n.scroll-container.disabled .scroll-arrow:active,\n.scroll-container.disabled .scroll-arrow:focus {\n  background-color: unset;\n  box-shadow: none;\n}\n\n.scroll-container.disabled .ic-tooltip-container {\n  display: none !important;\n}\n\n.scroll-splitter-left,\n.scroll-splitter-right {\n  display: flex;\n  height: var(--ic-space-lg);\n  width: 1px;\n  margin-top: 10px;\n  background-color: var(--splitter-color);\n}\n\n.scroll-splitter-left {\n  margin-left: var(--ic-space-xxxs);\n}\n\n.scroll-splitter-right {\n  margin-right: var(--ic-space-xxxs);\n}\n\n.scroll-container.disabled .scroll-splitter-left,\n.scroll-container.disabled .scroll-splitter-right {\n  display: none;\n}\n\n.ic-tab-splitter {\n  display: block;\n  background-color: var(--border-bottom-color);\n  height: 1px;\n  right: 0;\n  left: 0;\n  margin-left: var(--ic-space-xs);\n}\n\n.ic-tab-splitter.hidden {\n  height: 0;\n}\n","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 = \"light\";\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          [\"dark\"]: appearance === IcThemeForegroundEnum.Dark,\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}

package/dist/components/ic-tab.js

@@ -1,5 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { a as onComponentRequiredPropUndefined } from './helpers.js';
+import { I as IcThemeForegroundEnum } from './types.js';
 import { d as defineCustomElement$2 } from './ic-typography2.js';
 
 const icTabCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{--indicator-initial-color:rgba(23 89 188 / 0%);--indicator-color:var(--ic-action-default);--focus-indicator:var(--ic-border-focus);--label-color:var(--ic-color-primary-text);--background-color-hover:var(--ic-action-default-bg-hover);--background-color-active:var(--ic-action-default-bg-active);display:flex;align-items:center;border-radius:0;color:var(--label-color);height:40px;padding:0 var(--ic-space-md);cursor:pointer;position:relative;border-bottom:var(--ic-space-xxs) solid var(--indicator-initial-color);gap:var(--ic-space-xs);transition:all var(--ic-easing-transition-fast)}:host(:focus){box-shadow:var(--focus-indicator);border-radius:var(--ic-border-radius)}:host(:focus-visible){outline:none}:host(:hover){background-color:var(--background-color-hover)}:host(:active){background-color:var(--background-color-active)}:host(.ic-tab-dark){--indicator-initial-color:rgb(255 255 255 / 0%);--indicator-color:rgb(255 255 255 / 100%);--focus-indicator:var(--ic-border-focus);--label-color:white;--background-color-hover:var(--ic-action-dark-bg-hover);--background-color-active:var(--ic-action-dark-bg-active)}:host([selected]){border-bottom:var(--ic-space-xxs) solid var(--indicator-color)}:host([disabled]){pointer-events:none;color:var(--ic-architectural-300)}:host([selected].with-transition){transition:all var(--ic-easing-transition-slow),\n    border-color var(--ic-transition-duration-slow)}.ic-tab-label{pointer-events:none}::slotted(svg){fill:var(--label-color)}";
@@ -48,7 +49,7 @@ const Tab = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.selected = false;
     this.tabId = undefined;
     this.tabPosition = undefined;
-    this.dark = false;
+    this.appearance = "light";
   }
   componentDidUpdate() {
     this.isInitialRender = false;
@@ -57,10 +58,10 @@ const Tab = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     onComponentRequiredPropUndefined([{ prop: this.tabPosition, propName: "tab-position" }], "Tab");
   }
   render() {
-    const { disabled, selected, dark } = this;
+    const { disabled, selected, appearance } = this;
     return (h(Host, { class: {
         ["with-transition"]: !this.isInitialRender,
-        ["ic-tab-dark"]: dark,
+        ["ic-tab-dark"]: appearance === IcThemeForegroundEnum.Dark,
       }, role: "tab", "aria-selected": selected ? "true" : "false", onClick: this.handleClick, onFocus: this.handleFocus, onMouseDown: this.handleMouseDown, "aria-disabled": disabled ? "true" : "false", tabindex: this.selected ? 0 : -1 }, this.host.querySelector('[slot="icon"]') && h("slot", { name: "icon" }), h("ic-typography", { class: "ic-tab-label", variant: "label" }, h("span", null, h("slot", null)))));
   }
   get host() { return this; }
@@ -71,7 +72,7 @@ const Tab = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "selected": [516],
     "tabId": [513, "tab-id"],
     "tabPosition": [2, "tab-position"],
-    "dark": [4]
+    "appearance": [1]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

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

@@ -1 +1 @@
-{"file":"ic-tab.js","mappings":";;;;AAAA,MAAM,QAAQ,GAAG,00HAA00H;;MCqB90H,GAAG;;;;;;;IAiCN,oBAAe,GAAY,IAAI,CAAC;IAChC,mBAAc,GAAY,KAAK,CAAC;IAEhC,gBAAW,GAAG;MACpB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;QACjB,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,SAAS,EAAE,IAAI,CAAC,SAAS;QACzB,QAAQ,EAAE,IAAI,CAAC,WAAW;OAC3B,CAAC,CAAC;MACH,IAAI,IAAI,CAAC,cAAc,EAAE;QACvB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;UACjB,KAAK,EAAE,IAAI,CAAC,KAAK;UACjB,SAAS,EAAE,IAAI,CAAC,SAAS;UACzB,QAAQ,EAAE,IAAI,CAAC,WAAW;SAC3B,CAAC,CAAC;QACH,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;OAC7B;KACF,CAAC;IAEM,gBAAW,GAAG;MACpB,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;QACxB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;UACjB,KAAK,EAAE,IAAI,CAAC,KAAK;UACjB,SAAS,EAAE,IAAI,CAAC,SAAS;UACzB,QAAQ,EAAE,IAAI,CAAC,WAAW;SAC3B,CAAC,CAAC;OACJ;KACF,CAAC;IAEM,oBAAe,GAAG;;;;MAIxB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;KAC5B,CAAC;qBA/D4C,SAAS;oBAK1B,KAAK;oBAGY,KAAK;;;gBAS1B,KAAK;;EAgD9B,kBAAkB;IAChB,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;GAC9B;EAED,gBAAgB;IACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,WAAW,EAAE,QAAQ,EAAE,cAAc,EAAE,CAAC,EACtD,KAAK,CACN,CAAC;GACH;EAED,MAAM;IACJ,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;IAC1C,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,CAAC,iBAAiB,GAAG,CAAC,IAAI,CAAC,eAAe;QAC1C,CAAC,aAAa,GAAG,IAAI;OACtB,EACD,IAAI,EAAC,KAAK,mBACK,QAAQ,GAAG,MAAM,GAAG,OAAO,EAC1C,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,WAAW,EAAE,IAAI,CAAC,eAAe,mBAClB,QAAQ,GAAG,MAAM,GAAG,OAAO,EAC1C,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAC,IAE/B,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC,IAAI,YAAM,IAAI,EAAC,MAAM,GAAQ,EACtE,qBAAe,KAAK,EAAC,cAAc,EAAC,OAAO,EAAC,OAAO,IACjD,gBACE,eAAa,CACR,CACO,CACX,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/ic-tab/ic-tab.css?tag=ic-tab&encapsulation=shadow","./src/components/ic-tab/ic-tab.tsx"],"sourcesContent":["@import \"../../global/normalise.css\";\n\n:host {\n  --indicator-initial-color: rgba(23 89 188 / 0%);\n  --indicator-color: var(--ic-action-default);\n  --focus-indicator: var(--ic-border-focus);\n  --label-color: var(--ic-color-primary-text);\n  --background-color-hover: var(--ic-action-default-bg-hover);\n  --background-color-active: var(--ic-action-default-bg-active);\n\n  display: flex;\n  align-items: center;\n  border-radius: 0;\n  color: var(--label-color);\n  height: 40px;\n  padding: 0 var(--ic-space-md);\n  cursor: pointer;\n  position: relative;\n  border-bottom: var(--ic-space-xxs) solid var(--indicator-initial-color);\n  gap: var(--ic-space-xs);\n  transition: all var(--ic-easing-transition-fast);\n}\n\n:host(:focus) {\n  box-shadow: var(--focus-indicator);\n  border-radius: var(--ic-border-radius);\n}\n\n:host(:focus-visible) {\n  outline: none;\n}\n\n:host(:hover) {\n  background-color: var(--background-color-hover);\n}\n\n:host(:active) {\n  background-color: var(--background-color-active);\n}\n\n:host(.ic-tab-dark) {\n  --indicator-initial-color: rgb(255 255 255 / 0%);\n  --indicator-color: rgb(255 255 255 / 100%);\n  --focus-indicator: var(--ic-border-focus);\n  --label-color: white;\n  --background-color-hover: var(--ic-action-dark-bg-hover);\n  --background-color-active: var(--ic-action-dark-bg-active);\n}\n\n:host([selected]) {\n  border-bottom: var(--ic-space-xxs) solid var(--indicator-color);\n}\n\n:host([disabled]) {\n  pointer-events: none;\n  color: var(--ic-architectural-300);\n}\n\n:host([selected].with-transition) {\n  transition: all var(--ic-easing-transition-slow),\n    border-color var(--ic-transition-duration-slow);\n}\n\n.ic-tab-label {\n  pointer-events: none;\n}\n\n::slotted(svg) {\n  fill: var(--label-color);\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Prop,\n  h,\n} from \"@stencil/core\";\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\n\nimport { IcTabClickEventDetail } from \"./ic-tab.types\";\n\n/**\n * @slot icon - Content will be rendered next to the tab label.\n */\n@Component({\n  tag: \"ic-tab\",\n  styleUrl: \"ic-tab.css\",\n  shadow: true,\n})\nexport class Tab {\n  @Element() host: HTMLIcTabElement;\n\n  /** @internal Provide a unique context if using multiple tabs inside one another i.e. rendering another tabs inside a tab panel. */\n  @Prop({ reflect: true }) contextId?: string = \"default\";\n\n  /**\n   * Disables the tab.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /** @internal Will display a selected indicator and set tabIndex. */\n  @Prop({ reflect: true }) selected?: boolean = false;\n\n  /** @internal The shared ID between panel and tab. */\n  @Prop({ reflect: true }) tabId?: string;\n\n  /** @internal The position of the tab inside the tabs array in context. */\n  @Prop() tabPosition!: number;\n\n  /** @internal Determines whether the dark variant of the tabs should be displayed. */\n  @Prop() dark?: boolean = false;\n\n  /**\n   * Called when a tab is selected.\n   */\n  @Event() tabClick: EventEmitter<IcTabClickEventDetail>;\n\n  /**\n   * @internal Called when a tab is focussed.\n   */\n  @Event() tabFocus: EventEmitter<IcTabClickEventDetail>;\n\n  private isInitialRender: boolean = true;\n  private focusFromClick: boolean = false;\n\n  private handleClick = () => {\n    this.tabClick.emit({\n      tabId: this.tabId,\n      contextId: this.contextId,\n      position: this.tabPosition,\n    });\n    if (this.focusFromClick) {\n      this.tabFocus.emit({\n        tabId: this.tabId,\n        contextId: this.contextId,\n        position: this.tabPosition,\n      });\n      this.focusFromClick = false;\n    }\n  };\n\n  private handleFocus = () => {\n    if (!this.focusFromClick) {\n      this.tabFocus.emit({\n        tabId: this.tabId,\n        contextId: this.contextId,\n        position: this.tabPosition,\n      });\n    }\n  };\n\n  private handleMouseDown = () => {\n    //set flag so that focus gets handled after click\n    //there is a timing issue where a long click only causes focus to happen & not the click\n    //the focus does need to be a seperate event though to handle focus from keyboard\n    this.focusFromClick = true;\n  };\n\n  componentDidUpdate(): void {\n    this.isInitialRender = false;\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.tabPosition, propName: \"tab-position\" }],\n      \"Tab\"\n    );\n  }\n\n  render() {\n    const { disabled, selected, dark } = this;\n    return (\n      <Host\n        class={{\n          [\"with-transition\"]: !this.isInitialRender,\n          [\"ic-tab-dark\"]: dark,\n        }}\n        role=\"tab\"\n        aria-selected={selected ? \"true\" : \"false\"}\n        onClick={this.handleClick}\n        onFocus={this.handleFocus}\n        onMouseDown={this.handleMouseDown}\n        aria-disabled={disabled ? \"true\" : \"false\"}\n        tabindex={this.selected ? 0 : -1}\n      >\n        {this.host.querySelector('[slot=\"icon\"]') && <slot name=\"icon\"></slot>}\n        <ic-typography class=\"ic-tab-label\" variant=\"label\">\n          <span>\n            <slot></slot>\n          </span>\n        </ic-typography>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-tab.js","mappings":";;;;;AAAA,MAAM,QAAQ,GAAG,00HAA00H;;MCyB90H,GAAG;;;;;;;IAiCN,oBAAe,GAAY,IAAI,CAAC;IAChC,mBAAc,GAAY,KAAK,CAAC;IAEhC,gBAAW,GAAG;MACpB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;QACjB,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,SAAS,EAAE,IAAI,CAAC,SAAS;QACzB,QAAQ,EAAE,IAAI,CAAC,WAAW;OAC3B,CAAC,CAAC;MACH,IAAI,IAAI,CAAC,cAAc,EAAE;QACvB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;UACjB,KAAK,EAAE,IAAI,CAAC,KAAK;UACjB,SAAS,EAAE,IAAI,CAAC,SAAS;UACzB,QAAQ,EAAE,IAAI,CAAC,WAAW;SAC3B,CAAC,CAAC;QACH,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;OAC7B;KACF,CAAC;IAEM,gBAAW,GAAG;MACpB,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;QACxB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;UACjB,KAAK,EAAE,IAAI,CAAC,KAAK;UACjB,SAAS,EAAE,IAAI,CAAC,SAAS;UACzB,QAAQ,EAAE,IAAI,CAAC,WAAW;SAC3B,CAAC,CAAC;OACJ;KACF,CAAC;IAEM,oBAAe,GAAG;;;;MAIxB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;KAC5B,CAAC;qBA/D4C,SAAS;oBAK1B,KAAK;oBAGY,KAAK;;;sBASD,OAAO;;EAgDzD,kBAAkB;IAChB,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;GAC9B;EAED,gBAAgB;IACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,WAAW,EAAE,QAAQ,EAAE,cAAc,EAAE,CAAC,EACtD,KAAK,CACN,CAAC;GACH;EAED,MAAM;IACJ,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;IAChD,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,CAAC,iBAAiB,GAAG,CAAC,IAAI,CAAC,eAAe;QAC1C,CAAC,aAAa,GAAG,UAAU,KAAK,qBAAqB,CAAC,IAAI;OAC3D,EACD,IAAI,EAAC,KAAK,mBACK,QAAQ,GAAG,MAAM,GAAG,OAAO,EAC1C,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,WAAW,EAAE,IAAI,CAAC,eAAe,mBAClB,QAAQ,GAAG,MAAM,GAAG,OAAO,EAC1C,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAC,IAE/B,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC,IAAI,YAAM,IAAI,EAAC,MAAM,GAAQ,EACtE,qBAAe,KAAK,EAAC,cAAc,EAAC,OAAO,EAAC,OAAO,IACjD,gBACE,eAAa,CACR,CACO,CACX,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/ic-tab/ic-tab.css?tag=ic-tab&encapsulation=shadow","./src/components/ic-tab/ic-tab.tsx"],"sourcesContent":["@import \"../../global/normalise.css\";\n\n:host {\n  --indicator-initial-color: rgba(23 89 188 / 0%);\n  --indicator-color: var(--ic-action-default);\n  --focus-indicator: var(--ic-border-focus);\n  --label-color: var(--ic-color-primary-text);\n  --background-color-hover: var(--ic-action-default-bg-hover);\n  --background-color-active: var(--ic-action-default-bg-active);\n\n  display: flex;\n  align-items: center;\n  border-radius: 0;\n  color: var(--label-color);\n  height: 40px;\n  padding: 0 var(--ic-space-md);\n  cursor: pointer;\n  position: relative;\n  border-bottom: var(--ic-space-xxs) solid var(--indicator-initial-color);\n  gap: var(--ic-space-xs);\n  transition: all var(--ic-easing-transition-fast);\n}\n\n:host(:focus) {\n  box-shadow: var(--focus-indicator);\n  border-radius: var(--ic-border-radius);\n}\n\n:host(:focus-visible) {\n  outline: none;\n}\n\n:host(:hover) {\n  background-color: var(--background-color-hover);\n}\n\n:host(:active) {\n  background-color: var(--background-color-active);\n}\n\n:host(.ic-tab-dark) {\n  --indicator-initial-color: rgb(255 255 255 / 0%);\n  --indicator-color: rgb(255 255 255 / 100%);\n  --focus-indicator: var(--ic-border-focus);\n  --label-color: white;\n  --background-color-hover: var(--ic-action-dark-bg-hover);\n  --background-color-active: var(--ic-action-dark-bg-active);\n}\n\n:host([selected]) {\n  border-bottom: var(--ic-space-xxs) solid var(--indicator-color);\n}\n\n:host([disabled]) {\n  pointer-events: none;\n  color: var(--ic-architectural-300);\n}\n\n:host([selected].with-transition) {\n  transition: all var(--ic-easing-transition-slow),\n    border-color var(--ic-transition-duration-slow);\n}\n\n.ic-tab-label {\n  pointer-events: none;\n}\n\n::slotted(svg) {\n  fill: var(--label-color);\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Prop,\n  h,\n} from \"@stencil/core\";\n\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\nimport { IcTabClickEventDetail } from \"./ic-tab.types\";\nimport {\n  IcThemeForegroundNoDefault,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\n\n/**\n * @slot icon - Content will be rendered next to the tab label.\n */\n@Component({\n  tag: \"ic-tab\",\n  styleUrl: \"ic-tab.css\",\n  shadow: true,\n})\nexport class Tab {\n  @Element() host: HTMLIcTabElement;\n\n  /** @internal Provide a unique context if using multiple tabs inside one another i.e. rendering another tabs inside a tab panel. */\n  @Prop({ reflect: true }) contextId?: string = \"default\";\n\n  /**\n   * Disables the tab.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /** @internal Will display a selected indicator and set tabIndex. */\n  @Prop({ reflect: true }) selected?: boolean = false;\n\n  /** @internal The shared ID between panel and tab. */\n  @Prop({ reflect: true }) tabId?: string;\n\n  /** @internal The position of the tab inside the tabs array in context. */\n  @Prop() tabPosition!: number;\n\n  /** @internal Determines whether the light or dark variant of the tabs should be displayed. */\n  @Prop() appearance?: IcThemeForegroundNoDefault = \"light\";\n\n  /**\n   * Called when a tab is selected.\n   */\n  @Event() tabClick: EventEmitter<IcTabClickEventDetail>;\n\n  /**\n   * @internal Called when a tab is focussed.\n   */\n  @Event() tabFocus: EventEmitter<IcTabClickEventDetail>;\n\n  private isInitialRender: boolean = true;\n  private focusFromClick: boolean = false;\n\n  private handleClick = () => {\n    this.tabClick.emit({\n      tabId: this.tabId,\n      contextId: this.contextId,\n      position: this.tabPosition,\n    });\n    if (this.focusFromClick) {\n      this.tabFocus.emit({\n        tabId: this.tabId,\n        contextId: this.contextId,\n        position: this.tabPosition,\n      });\n      this.focusFromClick = false;\n    }\n  };\n\n  private handleFocus = () => {\n    if (!this.focusFromClick) {\n      this.tabFocus.emit({\n        tabId: this.tabId,\n        contextId: this.contextId,\n        position: this.tabPosition,\n      });\n    }\n  };\n\n  private handleMouseDown = () => {\n    //set flag so that focus gets handled after click\n    //there is a timing issue where a long click only causes focus to happen & not the click\n    //the focus does need to be a seperate event though to handle focus from keyboard\n    this.focusFromClick = true;\n  };\n\n  componentDidUpdate(): void {\n    this.isInitialRender = false;\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.tabPosition, propName: \"tab-position\" }],\n      \"Tab\"\n    );\n  }\n\n  render() {\n    const { disabled, selected, appearance } = this;\n    return (\n      <Host\n        class={{\n          [\"with-transition\"]: !this.isInitialRender,\n          [\"ic-tab-dark\"]: appearance === IcThemeForegroundEnum.Dark,\n        }}\n        role=\"tab\"\n        aria-selected={selected ? \"true\" : \"false\"}\n        onClick={this.handleClick}\n        onFocus={this.handleFocus}\n        onMouseDown={this.handleMouseDown}\n        aria-disabled={disabled ? \"true\" : \"false\"}\n        tabindex={this.selected ? 0 : -1}\n      >\n        {this.host.querySelector('[slot=\"icon\"]') && <slot name=\"icon\"></slot>}\n        <ic-typography class=\"ic-tab-label\" variant=\"label\">\n          <span>\n            <slot></slot>\n          </span>\n        </ic-typography>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/ic-text-field2.js

@@ -1,5 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { w as IcInformationStatus, t as debounceEvent, k as inheritAttributes, a as onComponentRequiredPropUndefined, d as getInputDescribedByText, r as renderHiddenInput, G as isEmptyString, l as IC_INHERITED_ARIA } from './helpers.js';
+import { a as IcInformationStatus } from './types.js';
+import { t as debounceEvent, j as inheritAttributes, a as onComponentRequiredPropUndefined, d as getInputDescribedByText, r as renderHiddenInput, F as isEmptyString, k as IC_INHERITED_ARIA } from './helpers.js';
 import { d as defineCustomElement$5 } from './ic-input-component-container2.js';
 import { d as defineCustomElement$4 } from './ic-input-container2.js';
 import { d as defineCustomElement$3 } from './ic-input-label2.js';
@@ -57,7 +58,7 @@ const TextField = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.helperText = "";
     this.rows = 1;
     this.resize = false;
-    this.dense = false;
+    this.small = false;
     this.value = "";
     this.maxLength = 0;
     this.validationStatus = "";
@@ -68,7 +69,6 @@ const TextField = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.autocorrect = "off";
     this.autoFocus = false;
     this.debounce = 0;
-    this.dark = false;
     this.type = "text";
     this.inputmode = "text";
     this.name = this.inputId;
@@ -140,7 +140,7 @@ const TextField = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Text Field");
   }
   render() {
-    const { dark, inputId, name, label, required, dense, placeholder, helperText, rows, resize, disabled, value, maxLength, numChars, readonly, maxLengthExceeded, validationStatus, validationText, validationInline, spellcheck, inputmode, fullWidth, truncateValue, hiddenInput, } = this;
+    const { inputId, name, label, required, small, placeholder, helperText, rows, resize, disabled, value, maxLength, numChars, readonly, maxLengthExceeded, validationStatus, validationText, validationInline, spellcheck, inputmode, fullWidth, truncateValue, hiddenInput, } = this;
     const disabledMode = readonly ? true : disabled;
     const placeholderText = disabled ? "" : placeholder;
     const currentStatus = maxLengthExceeded
@@ -170,7 +170,7 @@ const TextField = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     if (hiddenInput) {
       renderHiddenInput(true, this.el, name, value, disabledMode);
     }
-    return (h(Host, { class: { ["fullwidth"]: fullWidth } }, h("ic-input-container", { readonly: readonly, disabled: disabledMode }, !this.hideLabel && (h("ic-input-label", { for: inputId, label: label, helperText: helperText, required: required, disabled: disabledText, readonly: readonly, dark: dark })), h("ic-input-component-container", { dark: dark, dense: dense, validationStatus: currentStatus, multiLine: multiline, disabled: disabledMode, readonly: readonly, validationInline: validationInline, fullWidth: fullWidth }, this.showLeftIcon && (h("span", { class: {
+    return (h(Host, { class: { ["fullwidth"]: fullWidth } }, h("ic-input-container", { readonly: readonly, disabled: disabledMode }, !this.hideLabel && (h("ic-input-label", { for: inputId, label: label, helperText: helperText, required: required, disabled: disabledText, readonly: readonly })), h("ic-input-component-container", { small: small, validationStatus: currentStatus, multiLine: multiline, disabled: disabledMode, readonly: readonly, validationInline: validationInline, fullWidth: fullWidth }, this.showLeftIcon && (h("span", { class: {
         ["readonly"]: readonly,
         ["has-value"]: value.length > 0,
       }, slot: "left-icon" }, h("slot", { name: "icon" }))), !multiline && (h("input", Object.assign({ id: inputId, name: name, ref: (el) => (this.inputEl = el), type: this.type, value: value, class: {
@@ -211,7 +211,7 @@ const TextField = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "helperText": [1, "helper-text"],
     "rows": [2],
     "resize": [4],
-    "dense": [4],
+    "small": [4],
     "value": [1537],
     "maxLength": [2, "max-length"],
     "validationStatus": [1, "validation-status"],
@@ -222,7 +222,6 @@ const TextField = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "autocorrect": [1],
     "autoFocus": [4, "auto-focus"],
     "debounce": [2],
-    "dark": [4],
     "type": [1],
     "inputmode": [1],
     "name": [1],