Add tabs component

src/components/common/definitions/defineAllComponents.ts

@@ -37,6 +37,9 @@ import IgcSliderComponent from '../../slider/slider.js';
 import IgcSnackbarComponent from '../../snackbar/snackbar.js';
 import IgcToastComponent from '../../toast/toast.js';
 import IgcSliderLabelComponent from '../../slider/slider-label.js';
+import IgcTabsComponent from '../../tabs/tabs';
+import IgcTabComponent from '../../tabs/tab';
+import IgcTabPanelComponent from '../../tabs/tab-panel';
 import { defineComponents } from './defineComponents.js';
 import IgcCircularGradientComponent from '../../progress/circular-gradient.js';
 import IgcMaskInputComponent from '../../mask-input/mask-input.js';
@@ -79,6 +82,9 @@ const allComponents: CustomElementConstructor[] = [
   IgcToastComponent,
   IgcSliderLabelComponent,
   IgcRangeSliderComponent,
+  IgcTabsComponent,
+  IgcTabComponent,
+  IgcTabPanelComponent,
   IgcCircularProgressComponent,
   IgcLinearProgressComponent,
   IgcCircularGradientComponent,

src/components/tabs/tab-panel.ts

@@ -0,0 +1,44 @@
+import { html, LitElement } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { watch } from '../common/decorators';
+import { styles } from './themes/light/tab-panel.base.css';
+
+export default class IgcTabPanelComponent extends LitElement {
+  public static readonly tagName = 'igc-tab-panel';
+
+  public static override styles = styles;
+
+  @state()
+  public selected = false;
+
+  @state()
+  public disabled = false;
+
+  @property({ type: String })
+  public name = '';
+
+  public override connectedCallback() {
+    super.connectedCallback();
+
+    this.setAttribute('role', 'tabpanel');
+    this.setAttribute('tabindex', '0');
+  }
+
+  @watch('selected')
+  protected selectedChange() {
+    const styles: Partial<CSSStyleDeclaration> = {
+      display: `${this.selected ? 'block' : 'none'}`,
+    };
+    Object.assign(this.style, styles);
+  }
+
+  protected override render() {
+    return html` <slot></slot> `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'igc-tab-panel': IgcTabPanelComponent;
+  }
+}

src/components/tabs/tab.ts

@@ -0,0 +1,56 @@
+import { html, LitElement } from 'lit';
+import { themes } from '../../theming/theming-decorator.js';
+import { property, query } from 'lit/decorators.js';
+import { styles } from './themes/light/tab.base.css';
+import { styles as bootstrap } from './themes/light/tab.bootstrap.css.js';
+import { styles as fluent } from './themes/light/tab.fluent.css.js';
+import { styles as indigo } from './themes/light/tab.indigo.css.js';
+
+@themes({ bootstrap, fluent, indigo })
+export default class IgcTabComponent extends LitElement {
+  public static readonly tagName = 'igc-tab';
+
+  public static override styles = styles;
+
+  @query('[part="base"]')
+  private tab!: HTMLElement;
+
+  @property({ type: String })
+  public panel = '';
+
+  @property({ type: Boolean, reflect: true })
+  public selected = false;
+
+  @property({ type: Boolean, reflect: true })
+  public disabled = false;
+
+  public override focus(options?: FocusOptions) {
+    this.tab.focus(options);
+  }
+
+  public override blur() {
+    this.tab.blur();
+  }
+
+  protected override render() {
+    return html`
+      <div
+        part="base"
+        role="tab"
+        aria-disabled=${this.disabled ? 'true' : 'false'}
+        aria-selected=${this.selected ? 'true' : 'false'}
+        tabindex=${this.disabled || !this.selected ? -1 : 0}
+      >
+        <slot name="prefix" part="prefix"></slot>
+        <slot></slot>
+        <slot name="suffix" part="suffix"></slot>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'igc-tab': IgcTabComponent;
+  }
+}