@ukic/web-components 2.0.0-alpha.125 → 2.0.1

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

@@ -1,4 +1,5 @@
 import { h, } from "@stencil/core";
+import { IcThemeForegroundEnum, } from "../../utils/types";
 export class TabContext {
   constructor() {
     // Sets attributes to link tabs and tabpanels
@@ -16,30 +17,31 @@ export class TabContext {
         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.Light) {
+          tab.appearance = this.appearance;
+          this.tabPanels[index].appearance = this.appearance;
         }
       });
-      if (this.dark) {
-        this.tabList.dark = true;
+      if (this.appearance === IcThemeForegroundEnum.Light) {
+        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);
         });
       }
@@ -171,7 +173,7 @@ export class TabContext {
     this.contextId = "default";
     this.activationType = "automatic";
     this.selectedTabIndex = undefined;
-    this.dark = false;
+    this.appearance = "dark";
     this.selectedTab = undefined;
   }
   updateSelectedTab(newValue) {
@@ -199,10 +201,10 @@ export class TabContext {
   }
   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() {
@@ -269,23 +271,28 @@ export class TabContext {
         "attribute": "selected-tab-index",
         "reflect": false
       },
-      "dark": {
-        "type": "boolean",
+      "appearance": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
+          "original": "IcThemeForegroundNoDefault",
+          "resolved": "\"dark\" | \"light\"",
+          "references": {
+            "IcThemeForegroundNoDefault": {
+              "location": "import",
+              "path": "../../utils/types"
+            }
+          }
         },
         "required": false,
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Determines whether the dark variant of the tabs should be displayed."
+          "text": "Determines whether the light or dark variant of the tabs should be displayed."
         },
-        "attribute": "dark",
+        "attribute": "appearance",
         "reflect": false,
-        "defaultValue": "false"
+        "defaultValue": "\"dark\""
       }
     };
   }

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

@@ -1 +1 @@
-{"version":3,"file":"ic-tab-context.js","sourceRoot":"","sources":["../../../src/components/ic-tab-context/ic-tab-context.tsx"],"names":[],"mappings":"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","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","sourceRoot":"","sources":["../../../src/components/ic-tab-context/ic-tab-context.tsx"],"names":[],"mappings":"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","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 = \"dark\";\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.Light) {\n        tab.appearance = this.appearance;\n        this.tabPanels[index].appearance = this.appearance;\n      }\n    });\n\n    if (this.appearance === IcThemeForegroundEnum.Light) {\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"]}

package/dist/collection/components/ic-tab-context/ic-tab-context.test.a11y.js

@@ -3,11 +3,11 @@ import { axe } from "jest-axe";
 describe("ic-tab-context", () => {
   it("passes accessibility", async () => {
     const el = await fixture(`<ic-tab-context>
-    <ic-tab-list>
+    <ic-tab-group>
       <ic-tab>One</ic-tab>
       <ic-tab>Two</ic-tab>
       <ic-tab>Three</ic-tab>
-    </ic-tab-list>
+    </ic-tab-group>
     <ic-tab-panel> Tab One </ic-tab-panel>
     <ic-tab-panel> Tab Two </ic-tab-panel>
     <ic-tab-panel> Tab Three </ic-tab-panel>

package/dist/collection/components/ic-tab-context/ic-tab-context.test.a11y.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-tab-context.test.a11y.js","sourceRoot":"","sources":["../../../src/components/ic-tab-context/ic-tab-context.test.a11y.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAE/B,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;EAC9B,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;IACpC,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC;;;;;;;;;oBAST,CAAC,CAAC;IAElB,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IACtD,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAC;EAC7C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { fixture } from \"@open-wc/testing-helpers\";\nimport { axe } from \"jest-axe\";\n\ndescribe(\"ic-tab-context\", () => {\n  it(\"passes accessibility\", async () => {\n    const el = await fixture(`<ic-tab-context>\n    <ic-tab-list>\n      <ic-tab>One</ic-tab>\n      <ic-tab>Two</ic-tab>\n      <ic-tab>Three</ic-tab>\n    </ic-tab-list>\n    <ic-tab-panel> Tab One </ic-tab-panel>\n    <ic-tab-panel> Tab Two </ic-tab-panel>\n    <ic-tab-panel> Tab Three </ic-tab-panel>\n  </ic-tab-context>`);\n\n    expect(el.getAttribute(\"context-id\")).toBe(\"default\");\n    expect(await axe(el)).toHaveNoViolations();\n  });\n});\n"]}
+{"version":3,"file":"ic-tab-context.test.a11y.js","sourceRoot":"","sources":["../../../src/components/ic-tab-context/ic-tab-context.test.a11y.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAE/B,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;EAC9B,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;IACpC,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC;;;;;;;;;oBAST,CAAC,CAAC;IAElB,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IACtD,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAC;EAC7C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { fixture } from \"@open-wc/testing-helpers\";\nimport { axe } from \"jest-axe\";\n\ndescribe(\"ic-tab-context\", () => {\n  it(\"passes accessibility\", async () => {\n    const el = await fixture(`<ic-tab-context>\n    <ic-tab-group>\n      <ic-tab>One</ic-tab>\n      <ic-tab>Two</ic-tab>\n      <ic-tab>Three</ic-tab>\n    </ic-tab-group>\n    <ic-tab-panel> Tab One </ic-tab-panel>\n    <ic-tab-panel> Tab Two </ic-tab-panel>\n    <ic-tab-panel> Tab Three </ic-tab-panel>\n  </ic-tab-context>`);\n\n    expect(el.getAttribute(\"context-id\")).toBe(\"default\");\n    expect(await axe(el)).toHaveNoViolations();\n  });\n});\n"]}

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

@@ -12,7 +12,7 @@
   margin-left: calc(-1 * var(--ic-space-xs));
 }
 
-:host(.dark) {
+:host(.light) {
   --splitter-color: var(--ic-architectural-white);
   --tab-scroll-focus: var(--ic-border-focus-dark);
   --tab-scroll-fill: var(--ic-action-light);
@@ -43,12 +43,12 @@
   display: none;
 }
 
-.ic-tab-list-container {
+.ic-tab-group-container {
   display: flex;
   align-items: center;
 }
 
-:host(.dark.ic-tab-list-not-inline) {
+:host(.light.ic-tab-group-not-inline) {
   --border-bottom-color: var(--ic-architectural-white);
 }
 

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

@@ -2,19 +2,20 @@ 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 { IcThemeForegroundEnum, } from "../../utils/types";
 const SCROLL_DELAY_MS = 200;
-export class TabList {
+export class TabGroup {
   constructor() {
     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 = () => {
@@ -47,7 +48,7 @@ export class TabList {
       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 = () => {
@@ -59,17 +60,17 @@ export class TabList {
       // 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 = "dark";
     this.firstTabVisible = true;
     this.lastTabVisible = false;
     this.tabOverflow = false;
@@ -81,9 +82,9 @@ export class TabList {
     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) {
@@ -104,33 +105,33 @@ export class TabList {
     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: {
+        ["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", "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) })));
   }
-  static get is() { return "ic-tab-list"; }
+  static get is() { return "ic-tab-group"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["ic-tab-list.css"]
+      "$": ["ic-tab-group.css"]
     };
   }
   static get styleUrls() {
     return {
-      "$": ["ic-tab-list.css"]
+      "$": ["ic-tab-group.css"]
     };
   }
   static get properties() {
@@ -188,26 +189,31 @@ export class TabList {
         "attribute": "label",
         "reflect": false
       },
-      "dark": {
-        "type": "boolean",
+      "appearance": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
+          "original": "IcThemeForegroundNoDefault",
+          "resolved": "\"dark\" | \"light\"",
+          "references": {
+            "IcThemeForegroundNoDefault": {
+              "location": "import",
+              "path": "../../utils/types"
+            }
+          }
         },
         "required": false,
         "optional": true,
         "docs": {
           "tags": [{
               "name": "internal",
-              "text": "Determines whether the dark variant of the tabs should be displayed."
+              "text": "Determines whether the light or dark variant of the tabs should be displayed."
             }],
           "text": ""
         },
-        "attribute": "dark",
+        "attribute": "appearance",
         "reflect": false,
-        "defaultValue": "false"
+        "defaultValue": "\"dark\""
       }
     };
   }
@@ -255,4 +261,4 @@ export class TabList {
       }];
   }
 }
-//# sourceMappingURL=ic-tab-list.js.map
+//# sourceMappingURL=ic-tab-group.js.map

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

@@ -0,0 +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"]}

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

@@ -1,3 +1,7 @@
 :host {
   display: block;
 }
+
+:host(.ic-tab-panel-light) {
+  color: white;
+}

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

@@ -1,18 +1,22 @@
 import { Host, h } from "@stencil/core";
 import { onComponentRequiredPropUndefined } from "../../utils/helpers";
+import { IcThemeForegroundEnum, } from "../../utils/types";
 export class TabPanel {
   constructor() {
     this.contextId = "default";
     this.tabPosition = undefined;
     this.panelId = undefined;
     this.selectedTab = undefined;
+    this.appearance = "dark";
   }
   componentDidLoad() {
     onComponentRequiredPropUndefined([{ prop: this.tabPosition, propName: "tab-position" }], "Tab Panel");
   }
   render() {
-    const { panelId, selectedTab } = this;
-    return (h(Host, { role: "tabpanel", hidden: panelId !== undefined && selectedTab !== undefined
+    const { panelId, selectedTab, appearance } = this;
+    return (h(Host, { class: {
+        ["ic-tab-panel-light"]: appearance === IcThemeForegroundEnum.Light,
+      }, role: "tabpanel", hidden: panelId !== undefined && selectedTab !== undefined
         ? !(panelId === selectedTab)
         : true }, h("div", null, h("slot", null))));
   }
@@ -107,6 +111,32 @@ export class TabPanel {
         },
         "attribute": "selected-tab",
         "reflect": false
+      },
+      "appearance": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "IcThemeForegroundNoDefault",
+          "resolved": "\"dark\" | \"light\"",
+          "references": {
+            "IcThemeForegroundNoDefault": {
+              "location": "import",
+              "path": "../../utils/types"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": "Determines whether the light or dark variant of the tabs should be displayed."
+            }],
+          "text": ""
+        },
+        "attribute": "appearance",
+        "reflect": false,
+        "defaultValue": "\"dark\""
       }
     };
   }

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,EAAE,gCAAgC,EAAE,MAAM,qBAAqB,CAAC;AAOvE,MAAM,OAAO,QAAQ;;qBAM2B,SAAS;;;;;EAWvD,gBAAgB;IACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,WAAW,EAAE,QAAQ,EAAE,cAAc,EAAE,CAAC,EACtD,WAAW,CACZ,CAAC;EACJ,CAAC;EAED,MAAM;IACJ,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC;IACtC,OAAO,CACL,EAAC,IAAI,IACH,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 { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\n\n@Component({\n  tag: \"ic-tab-panel\",\n  styleUrl: \"ic-tab-panel.css\",\n  shadow: true,\n})\nexport class TabPanel {\n  @Element() 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  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.tabPosition, propName: \"tab-position\" }],\n      \"Tab Panel\"\n    );\n  }\n\n  render() {\n    const { panelId, selectedTab } = this;\n    return (\n      <Host\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,EAAE,gCAAgC,EAAE,MAAM,qBAAqB,CAAC;AACvE,OAAO,EACL,qBAAqB,GAEtB,MAAM,mBAAmB,CAAC;AAO3B,MAAM,OAAO,QAAQ;;qBAM2B,SAAS;;;;sBAYL,MAAM;;EAExD,gBAAgB;IACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,WAAW,EAAE,QAAQ,EAAE,cAAc,EAAE,CAAC,EACtD,WAAW,CACZ,CAAC;EACJ,CAAC;EAED,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 { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\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  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.tabPosition, propName: \"tab-position\" }],\n      \"Tab Panel\"\n    );\n  }\n\n  render() {\n    const { panelId, selectedTab, appearance } = this;\n    return (\n      <Host\n        class={{\n          [\"ic-tab-panel-light\"]: appearance === IcThemeForegroundEnum.Light,\n        }}\n        role=\"tabpanel\"\n        hidden={\n          panelId !== undefined && selectedTab !== undefined\n            ? !(panelId === selectedTab)\n            : true\n        }\n      >\n        <div>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}