@esri/calcite-components 5.0.0-next.9 → 5.0.0-next.90

package/dist/components/calcite-table-header/customElement.d.ts

@@ -1,46 +1,43 @@
 /// <reference path="../../index.d.ts" />
-import { PropertyValues } from 'lit';
-import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
-import { Alignment, Scale, SelectionMode } from '../interfaces';
-import { RowType, TableInteractionMode } from '../calcite-table/interfaces';
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { Alignment } from "../interfaces.js";
 
-export declare class TableHeader extends LitElement {
-    /**
-     * Specifies the alignment of the component.
-     *
-     * @default "start"
-     */
-    alignment: Alignment;
-    /** Specifies the number of columns the component should span. */
-    colSpan: number;
-    /** A description to display beneath heading content. */
-    description: string;
-    /** A heading to display above description content. */
-    heading: string;
-    /** Use this property to override individual strings used by the component. */
-    messageOverrides?: typeof this.messages._overrides;
-    /** Specifies the number of rows the component should span. */
-    rowSpan: number;
-    /**
-     * Sets focus on the component.
-     *
-     * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
-     * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
-     */
-    setFocus(options?: FocusOptions): Promise<void>;
-    private messages: {
-        all: string;
-        keyboardDeselectAll: string;
-        keyboardSelectAll: string;
-        rowNumber: string;
-        selected: string;
-        selectionColumn: string;
-    } & import('@arcgis/lumina/controllers').T9nMeta<{
-        all: string;
-        keyboardDeselectAll: string;
-        keyboardSelectAll: string;
-        rowNumber: string;
-        selected: string;
-        selectionColumn: string;
-    }>;
-}
+/**
+ * @cssproperty [--calcite-table-header-background] - [Deprecated] Use the `--calcite-table-header-background-color` property instead. Specifies the component's background color.
+ * @cssproperty [--calcite-table-header-background-color] - Specifies the component's background color.
+ * @cssproperty [--calcite-table-header-border-color] - Specifies the component's border color.
+ * @cssproperty [--calcite-table-header-heading-text-color] - Specifies the component's `heading` text color.
+ * @cssproperty [--calcite-table-header-description-text-color] - Specifies the component's `description` text color.
+ */
+export abstract class TableHeader extends LitElement {
+  /**
+   * Specifies the alignment of the component.
+   *
+   * @default "start"
+   */
+  accessor alignment: Alignment;
+  /** Specifies the number of columns the component should span. */
+  accessor colSpan: number;
+  /** Specifies a description for the component. Displays below the `heading`. */
+  accessor description: string;
+  /** Specifies the component's heading text. Displays above the `description`. */
+  accessor heading: string;
+  /** Overrides individual strings used by the component. */
+  accessor messageOverrides: {
+      all?: string;
+      keyboardDeselectAll?: string;
+      keyboardSelectAll?: string;
+      rowNumber?: string;
+      selected?: string;
+      selectionColumn?: string;
+  };
+  /** Specifies the number of rows the component should span. */
+  accessor rowSpan: number;
+  /**
+   * Sets focus on the component.
+   *
+   * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
+   * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
+   */
+  setFocus(options?: FocusOptions): Promise<void>;
+}

package/dist/components/calcite-table-header/customElement.js

@@ -1,6 +1,9 @@
+/* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+v5.0.0-next.90 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, nothing, html } from "lit";
-import { createRef, ref } from "lit-html/directives/ref.js";
+import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, safeClassMap } from "@arcgis/lumina";
 import { g as getIconScale } from "../../chunks/component.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
@@ -25,7 +28,7 @@ const ICONS = {
   indeterminate: "minus-square-f",
   unchecked: "square"
 };
-const styles = css`:host{--calcite-internal-color-focus: var( --calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)) )}:host{display:contents}:host([alignment=center]) th{text-align:center}:host([alignment=end]) th{text-align:end}.assistive-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}th{white-space:normal;text-align:start;vertical-align:top;font-weight:var(--calcite-font-weight-medium);border-block-end:var(--calcite-border-width-sm) solid var(--calcite-table-header-border-color, var(--calcite-table-border-color, var(--calcite-color-border-2)));padding-block:calc(var(--calcite-internal-table-cell-padding) * 1.5);padding-inline:var(--calcite-internal-table-cell-padding);background-color:var(--calcite-table-header-background-color, var(--calcite-table-header-background, var(--calcite-color-foreground-2)));font-size:var(--calcite-internal-table-cell-font-size);border-inline-end:var(--calcite-border-width-sm) solid var(--calcite-table-cell-border-color, var(--calcite-table-border-color, var(--calcite-color-border-2)))}th:not(.static-cell){outline-color:transparent}th:not(.static-cell):not(.static-cell):focus-within{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline:var(--calcite-border-width-md) solid var(--calcite-internal-color-focus);outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}th:not(.center):not(.end).content-cell{vertical-align:top}th.center{vertical-align:middle}th.end.content-cell{vertical-align:bottom}th.body-row,th.footer-row{padding-block:var(--calcite-internal-table-cell-padding);border-block-end:0}th.footer-row{border-block-start:var(--calcite-border-width-sm) solid var(--calcite-table-header-border-color, var(--calcite-table-border-color, var(--calcite-color-border-2)))}th.last-cell{border-inline-end:0}.cell--multiple-selection{cursor:pointer;vertical-align:middle;color:var(--calcite-table-selection-cell-icon-color, var(--calcite-color-text-3));background-color:var(--calcite-table-selection-cell-background-color, var(--calcite-color-foreground-2))}.cell--multiple-selection.selected-cell{background-color:var(--calcite-table-selection-cell-background-color-selected, var(--calcite-color-foreground-2))}.cell--multiple-selection:not(.end){vertical-align:middle}.number-cell{background-color:var(--calcite-table-number-cell-background-color, var(--calcite-table-cell-background-color, var(--calcite-color-foreground-2)))}.number-cell,.selection-cell{inline-size:2rem;min-inline-size:2rem}.selection-cell calcite-icon.active{color:var(--calcite-table-selection-cell-icon-color-selected, var(--calcite-color-brand))}.number-cell calcite-icon,.selection-cell calcite-icon{margin-inline-start:auto;margin-inline-end:auto;vertical-align:middle}.heading{color:var(--calcite-table-header-heading-text-color, var(--calcite-color-text-1))}.description{color:var(--calcite-table-header-description-text-color, var(--calcite-color-text-3));font-size:var(--calcite-internal-table-cell-font-size-secondary)}`;
+const styles = css`:host{display:contents}:host([alignment=center]) th{text-align:center}:host([alignment=end]) th{text-align:end}.assistive-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}th{white-space:normal;text-align:start;vertical-align:top;font-weight:var(--calcite-font-weight-medium);border-block-end:var(--calcite-border-width-sm) solid var(--calcite-table-header-border-color, var(--calcite-table-border-color, var(--calcite-color-border-2)));padding-block:calc(var(--calcite-internal-table-cell-padding) * 1.5);padding-inline:var(--calcite-internal-table-cell-padding);background-color:var(--calcite-table-header-background-color, var(--calcite-table-header-background, var(--calcite-color-foreground-2)));font-size:var(--calcite-internal-table-cell-font-size);border-inline-end:var(--calcite-border-width-sm) solid var(--calcite-table-cell-border-color, var(--calcite-table-border-color, var(--calcite-color-border-2)))}th:not(.static-cell){outline-color:transparent}th:not(.static-cell):not(.static-cell):focus-within{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}th:not(.center):not(.end).content-cell{vertical-align:top}th.center{vertical-align:middle}th.end.content-cell{vertical-align:bottom}th.body-row,th.footer-row{padding-block:var(--calcite-internal-table-cell-padding);border-block-end:0}th.footer-row{border-block-start:var(--calcite-border-width-sm) solid var(--calcite-table-header-border-color, var(--calcite-table-border-color, var(--calcite-color-border-2)))}th.last-cell{border-inline-end:0}.cell--multiple-selection{cursor:pointer;vertical-align:middle;color:var(--calcite-table-selection-cell-icon-color, var(--calcite-color-text-3));background-color:var(--calcite-table-selection-cell-background-color, var(--calcite-color-foreground-2))}.cell--multiple-selection.selected-cell{background-color:var(--calcite-table-selection-cell-background-color-selected, var(--calcite-color-foreground-2))}.cell--multiple-selection:not(.end){vertical-align:middle}.number-cell{background-color:var(--calcite-table-number-cell-background-color, var(--calcite-table-cell-background-color, var(--calcite-color-foreground-2)))}.number-cell,.selection-cell{inline-size:2rem;min-inline-size:2rem}.selection-cell calcite-icon.active{color:var(--calcite-table-selection-cell-icon-color-selected, var(--calcite-color-brand))}.number-cell calcite-icon,.selection-cell calcite-icon{margin-inline-start:auto;margin-inline-end:auto;vertical-align:middle}.heading{color:var(--calcite-table-header-heading-text-color, var(--calcite-color-text-1))}.description{color:var(--calcite-table-header-description-text-color, var(--calcite-color-text-3));font-size:var(--calcite-internal-table-cell-font-size-secondary)}`;
 class TableHeader extends LitElement {
   constructor() {
     super(...arguments);

package/dist/components/calcite-table-header/index.d.ts

@@ -1,2 +1 @@
-import "../calcite-icon/index.js";
 export * from "./customElement.js";

package/dist/components/calcite-table-row/customElement.d.ts

@@ -1,27 +1,34 @@
 /// <reference path="../../index.d.ts" />
-import { PropertyValues } from 'lit';
-import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
-import { Alignment, Scale, SelectionMode } from '../interfaces';
-import { RowType, TableInteractionMode, TableRowFocusEvent } from '../calcite-table/interfaces';
-import { InteractiveComponent } from '../../utils/interactive';
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { Alignment } from "../interfaces.js";
 
-/** @slot  - A slot for adding `calcite-table-cell` or `calcite-table-header` elements. */
-export declare class TableRow extends LitElement {
-    /** Specifies the alignment of the component. */
-    alignment: Alignment;
-    /**
-     * When `true`, interaction is prevented and the component is displayed with lower opacity.
-     *
-     * @default false
-     */
-    disabled: boolean;
-    /**
-     * When `true`, the component is selected.
-     *
-     * @default false
-     */
-    get selected(): boolean;
-    set selected(value: boolean);
-    /** Fires when the selected state of the component changes. */
-    readonly calciteTableRowSelect: TargetedEvent<this, void>;
-}
+/**
+ * @cssproperty [--calcite-table-row-background] - [Deprecated] Use `--calcite-table-row-background-color` instead. Specifies the background color of the component.
+ * @cssproperty [--calcite-table-row-background-color] - Specifies the component's background color.
+ * @cssproperty [--calcite-table-row-background-color-striped] - When `striped` is `true` on `calcite-table`, specifies the background color of the component's `striped` rows.
+ * @cssproperty [--calcite-table-row-background-color-selected] - When `selected`, specifies the background color of the component's `selected` rows.
+ * @cssproperty [--calcite-table-row-accent-color-selected] - Specifies the component's selected accent color.
+ * @cssproperty [--calcite-table-row-border-color] - Specifies the component's border color.
+ * @slot  - A slot for adding `calcite-table-cell` or `calcite-table-header` elements.
+ */
+export abstract class TableRow extends LitElement {
+  /** Specifies the alignment of the component. */
+  accessor alignment: Alignment;
+  /**
+   * When `true`, interaction is prevented and the component is displayed with lower opacity.
+   *
+   * @default false
+   */
+  accessor disabled: boolean;
+  /**
+   * When `true`, the component is selected.
+   *
+   * @default false
+   */
+  accessor selected: boolean;
+  /** Fires when the selected state of the component changes. */
+  readonly calciteTableRowSelect: import("@arcgis/lumina").TargetedEvent<this, void>;
+  readonly "@eventTypes": {
+    calciteTableRowSelect: TableRow["calciteTableRowSelect"]["detail"];
+  };
+}

package/dist/components/calcite-table-row/customElement.js

@@ -1,13 +1,15 @@
+/* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+v5.0.0-next.90 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { keyed } from "lit/directives/keyed.js";
-import { css, html } from "lit";
+import { css, html, render } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
-import { createRef, ref } from "lit-html/directives/ref.js";
-import { render } from "lit-html";
-import { d as focusElementInGroup } from "../../chunks/dom.js";
+import { createRef, ref } from "lit/directives/ref.js";
+import { f as focusElementInGroup } from "../../chunks/dom.js";
 import { i as isActivationKey } from "../../chunks/key.js";
-import { u as updateHostInteraction, I as InteractiveContainer } from "../../chunks/interactive.js";
 import { g as getIconScale } from "../../chunks/component.js";
+import { u as useInteractive } from "../../chunks/useInteractive.js";
 const CSS = {
   lastVisibleRow: "last-visible-row"
 };
@@ -17,7 +19,7 @@ const ICONS = {
   circleF: "circle-f",
   circle: "circle"
 };
-const styles = css`@charset "UTF-8";:host{--calcite-internal-color-focus: var( --calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)) )}:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:contents}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) tr{pointer-events:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}calcite-table-cell{--calcite-internal-table-cell-background-color: var( --calcite-table-row-background-color, var(--calcite-table-row-background, var(--calcite-color-foreground-1)) )}:host([selected]) calcite-table-cell{--calcite-internal-table-cell-background-color: var( --calcite-table-row-background-color-selected, var(--calcite-color-foreground-1) )}tr{border-block-end:var(--calcite-border-width-sm) solid var(--calcite-table-row-border-color, transparent);background-color:var(--calcite-table-row-background-color, var(--calcite-table-row-background, var(--calcite-color-foreground-1)))}tr.last-visible-row{border-block-end:0}@-moz-document url-prefix(){tr{box-shadow:inset 0 -1px 0 0 var(--calcite-table-row-border-color)}tr.last-visible-row{box-shadow:inset 0 -1px 0 0 transparent}}:host([item-hidden]){display:none}`;
+const styles = css`@charset "UTF-8";:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:contents}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) tr{pointer-events:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}calcite-table-cell{--calcite-internal-table-cell-background-color: var( --calcite-table-row-background-color, var(--calcite-table-row-background, var(--calcite-color-foreground-1)) )}:host([selected]) calcite-table-cell{--calcite-internal-table-cell-background-color: var( --calcite-table-row-background-color-selected, var(--calcite-color-foreground-1) )}tr{border-block-end:var(--calcite-border-width-sm) solid var(--calcite-table-row-border-color, transparent);background-color:var(--calcite-table-row-background-color, var(--calcite-table-row-background, var(--calcite-color-foreground-1)))}tr.last-visible-row{border-block-end:0}@-moz-document url-prefix(){tr{box-shadow:inset 0 -1px 0 0 var(--calcite-table-row-border-color)}tr.last-visible-row{box-shadow:inset 0 -1px 0 0 transparent}}:host([item-hidden]){display:none}`;
 class TableRow extends LitElement {
   constructor() {
     super();
@@ -36,6 +38,7 @@ class TableRow extends LitElement {
         this.handleRowSelection();
       }
     };
+    this.interactiveContainer = useInteractive(this);
     this.itemHidden = false;
     this.disabled = false;
     this.interactionMode = "interactive";
@@ -76,9 +79,6 @@ class TableRow extends LitElement {
       this.calciteInternalTableRowSelect.emit();
     }
   }
-  updated() {
-    updateHostInteraction(this);
-  }
   loaded() {
     if (this.tableRowEl && this.rowCells.length > 0) {
       this.updateCells();
@@ -221,7 +221,7 @@ class TableRow extends LitElement {
     return this.rowType === "head" ? keyed("numbered-head", html`<calcite-table-header alignment=center .numberCell=${true} .parentRowAlignment=${this.alignment}></calcite-table-header>`) : this.rowType === "body" ? keyed("numbered-body", html`<calcite-table-cell alignment=center .numberCell=${true} .parentRowAlignment=${this.alignment}>${this.positionSectionLocalized}</calcite-table-cell>`) : keyed("numbered-foot", html`<calcite-table-cell alignment=center .numberCell=${true} .parentRowAlignment=${this.alignment}></calcite-table-cell>`);
   }
   render() {
-    return InteractiveContainer({ disabled: this.disabled, children: html`<tr .ariaRowIndex=${this.positionAll + 1} .ariaSelected=${this.selected} class=${safeClassMap({ [CSS.lastVisibleRow]: this.lastVisibleRow })} @keydown=${this.keyDownHandler} ${ref((el) => {
+    return this.interactiveContainer({ disabled: this.disabled, children: html`<tr .ariaRowIndex=${this.positionAll + 1} .ariaSelected=${this.selected} class=${safeClassMap({ [CSS.lastVisibleRow]: this.lastVisibleRow })} @keydown=${this.keyDownHandler} ${ref((el) => {
       if (!el) {
         return;
       }

package/dist/components/calcite-table-row/index.d.ts

@@ -1,4 +1 @@
-import "../calcite-icon/index.js";
-import "../calcite-table-header/index.js";
-import "../calcite-table-cell/index.js";
 export * from "./customElement.js";

package/dist/components/calcite-tabs/customElement.d.ts

@@ -1,38 +1,37 @@
 /// <reference path="../../index.d.ts" />
-import { PropertyValues } from 'lit';
-import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
-import { Scale } from '../interfaces';
-import { TabTitle } from '../calcite-tab-title/customElement.js';
-import { Tab } from '../calcite-tab/customElement.js';
-import { TabLayout, TabPosition } from './interfaces';
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { Scale } from "../interfaces.js";
+import type { TabLayout, TabPosition } from "./interfaces.js";
 
 /**
+ * @cssproperty [--calcite-tab-background-color] - Specifies the component's background color.
+ * @cssproperty [--calcite-tab-border-color] - Specifies the component's border color.
  * @slot  - A slot for adding `calcite-tab`s.
  * @slot [title-group] - A slot for adding a `calcite-tab-nav`.
  */
-export declare class Tabs extends LitElement {
-    /**
-     * When `true`, the component will display with a folder style menu.
-     *
-     * @default false
-     */
-    bordered: boolean;
-    /**
-     * Specifies the layout of the `calcite-tab-nav`, justifying the `calcite-tab-title`s to the start (`"inline"`), or across and centered (`"center"`).
-     *
-     * @default "inline"
-     */
-    layout: TabLayout;
-    /**
-     * Specifies the position of `calcite-tab-nav` and `calcite-tab-title` components in relation to the `calcite-tabs`.
-     *
-     * @default "top"
-     */
-    position: TabPosition;
-    /**
-     * Specifies the size of the component.
-     *
-     * @default "m"
-     */
-    scale: Scale;
-}
+export abstract class Tabs extends LitElement {
+  /**
+   * When `true`, displays the component with a folder style menu.
+   *
+   * @default false
+   */
+  accessor bordered: boolean;
+  /**
+   * Specifies the layout of the `calcite-tab-nav`, justifying the `calcite-tab-title`s to the start (`"inline"`), or across and centered (`"center"`).
+   *
+   * @default "inline"
+   */
+  accessor layout: TabLayout;
+  /**
+   * Specifies the position of `calcite-tab-nav` and `calcite-tab-title` components in relation to the `calcite-tabs`.
+   *
+   * @default "top"
+   */
+  accessor position: TabPosition;
+  /**
+   * Specifies the size of the component.
+   *
+   * @default "m"
+   */
+  accessor scale: Scale;
+}

package/dist/components/calcite-tabs/customElement.js

@@ -1,15 +1,18 @@
+/* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+v5.0.0-next.90 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
-import { s as slotChangeGetAssignedElements, e as getSlotAssignedElements } from "../../chunks/dom.js";
+import { b as slotChangeGetAssignedElements, C as getSlotAssignedElements } from "../../chunks/dom.js";
 const CSS = {
   section: "section"
 };
 const SLOTS = {
   titleGroup: "title-group"
 };
-const styles = css`:host{--calcite-internal-color-focus: var( --calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)) )}:host{display:flex;flex-direction:column;background-color:var(--calcite-tab-background-color, var(--calcite-color-transparent))}:host([bordered]){box-shadow:inset 0 1px 0 var(--calcite-tab-border-color, var(--calcite-color-border-1));background-color:var(--calcite-tab-background-color, var(--calcite-color-foreground-1))}:host([bordered]) section{border-color:var(--calcite-tab-border-color, var(--calcite-color-border-1));border-style:solid}section{display:flex;flex-grow:1;overflow:hidden;border-width:1px;border-block-start-style:solid;border-block-start-color:var(--calcite-tab-border-color, var(--calcite-color-border-1))}:host([bordered][position=bottom]){box-shadow:inset 0 1px 0 var(--calcite-tab-border-color, var(--calcite-color-border-1)),inset 0 -1px 0 var(--calcite-tab-border-color, var(--calcite-color-border-1))}:host([bordered]:not([position=bottom])) ::slotted(calcite-tab-nav){margin-block-end:-1px}:host([position=bottom]){flex-direction:column-reverse}:host([position=bottom]) section{flex-direction:column-reverse;border-block-start-width:0px;border-block-end-width:1px}:host([bordered][scale=s]) section{padding:.75rem}:host([bordered][scale=m]) section{padding:.5rem}:host([bordered][scale=l]) section{padding:1rem}:host([position=bottom]:not([bordered])) section{border-block-end-style:solid;border-block-end-color:var(--calcite-tab-border-color, var(--calcite-color-border-1))}@media(forced-colors:active){:host([bordered]) section{border-block-start-width:0px;border-block-end-width:1px}:host([position=bottom][bordered]) section{border-block-start-width:1px;border-block-end-width:0px}}:host([hidden]){display:none}[hidden]{display:none}`;
+const styles = css`:host{display:flex;flex-direction:column;background-color:var(--calcite-tab-background-color, var(--calcite-color-transparent))}:host([bordered]){box-shadow:inset 0 1px 0 var(--calcite-tab-border-color, var(--calcite-color-border-1));background-color:var(--calcite-tab-background-color, var(--calcite-color-foreground-1))}:host([bordered]) section{border-color:var(--calcite-tab-border-color, var(--calcite-color-border-1));border-style:solid}section{display:flex;flex-grow:1;overflow:hidden;border-width:1px;border-block-start-style:solid;border-block-start-color:var(--calcite-tab-border-color, var(--calcite-color-border-1))}:host([bordered][position=bottom]){box-shadow:inset 0 1px 0 var(--calcite-tab-border-color, var(--calcite-color-border-1)),inset 0 -1px 0 var(--calcite-tab-border-color, var(--calcite-color-border-1))}:host([bordered]:not([position=bottom])) ::slotted(calcite-tab-nav){margin-block-end:-1px}:host([position=bottom]){flex-direction:column-reverse}:host([position=bottom]) section{flex-direction:column-reverse;border-block-start-width:0px;border-block-end-width:1px}:host([bordered][scale=s]) section{padding:.75rem}:host([bordered][scale=m]) section{padding:.5rem}:host([bordered][scale=l]) section{padding:1rem}:host([position=bottom]:not([bordered])) section{border-block-end-style:solid;border-block-end-color:var(--calcite-tab-border-color, var(--calcite-color-border-1))}@media(forced-colors:active){:host([bordered]) section{border-block-start-width:0px;border-block-end-width:1px}:host([position=bottom][bordered]) section{border-block-start-width:1px;border-block-end-width:0px}}:host([hidden]){display:none}[hidden]{display:none}`;
 class Tabs extends LitElement {
   constructor() {
     super();

package/dist/components/calcite-tabs/interfaces.d.ts

@@ -1,3 +1,3 @@
-export type TabID = string | number;
 export type TabPosition = "top" | "bottom";
-export type TabLayout = "center" | "inline";
+
+export type TabLayout = "center" | "inline";