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

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

@@ -1,57 +1,61 @@
 /// <reference path="../../index.d.ts" />
-import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
-import { CheckableFormComponent } from '../../utils/form';
-import { InteractiveComponent } from '../../utils/interactive';
-import { LabelableComponent } from '../../utils/label';
-import { Scale } from '../interfaces';
-import { Label } from '../calcite-label/customElement.js';
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { Scale } from "../interfaces.js";
 
-export declare class Switch extends LitElement {
-    /**
-     * When `true`, the component is checked.
-     *
-     * @default false
-     */
-    checked: boolean;
-    /**
-     * When `true`, interaction is prevented and the component is displayed with lower opacity.
-     *
-     * @default false
-     */
-    disabled: boolean;
-    /**
-     * The `id` of the form that will be associated with the component.
-     *
-     * When not set, the component will be associated with its ancestor form element, if any.
-     */
-    form: string;
-    /** Accessible name for the component. */
-    label: string;
-    /** When provided, displays label text at the end of the component */
-    labelTextEnd: string;
-    /** When provided, displays label text at the start of the component */
-    labelTextStart: string;
-    /**
-     * Specifies the name of the component.
-     *
-     * Required to pass the component's `value` on form submission.
-     */
-    name: string;
-    /**
-     * Specifies the size of the component.
-     *
-     * @default "m"
-     */
-    scale: Scale;
-    /** The component's value. */
-    value: any;
-    /**
-     * 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>;
-    /** Fires when the `checked` value has changed. */
-    readonly calciteSwitchChange: TargetedEvent<this, void>;
-}
+/**
+ * @cssproperty [--calcite-switch-background-color] - Specifies the component's background color.
+ * @cssproperty [--calcite-switch-background-color-hover] - Specifies the component's background color when hovered or pressed.
+ * @cssproperty [--calcite-switch-border-color] - [Deprecated] No longer necessary. Specifies the component's border color.
+ * @cssproperty [--calcite-switch-corner-radius] - Specifies the component's corner radius.
+ * @cssproperty [--calcite-switch-handle-background-color] - Specifies the handle's background color.
+ * @cssproperty [--calcite-switch-handle-border-color] - [Deprecated] No longer necessary. Specifies the handle's border color.
+ * @cssproperty [--calcite-switch-handle-shadow] - [Deprecated] No longer necessary. Specifies the handle's shadow.
+ */
+export abstract class Switch extends LitElement {
+  /**
+   * When `true`, the component is checked.
+   *
+   * @default false
+   */
+  accessor checked: boolean;
+  /**
+   * When `true`, interaction is prevented and the component is displayed with lower opacity.
+   *
+   * @default false
+   */
+  accessor disabled: boolean;
+  /**
+   * Specifies the `id` of the component's associated form.
+   *
+   * When not set, the component is associated with its ancestor form element, if one exists.
+   */
+  accessor form: string;
+  /** Specifies an accessible label for the component. */
+  accessor label: string;
+  /** Specifies the component's end label text. */
+  accessor labelTextEnd: string;
+  /** Specifies the component's start label text. */
+  accessor labelTextStart: string;
+  /** Specifies the name of the component. Required to pass the component's `value` on form submission. */
+  accessor name: string;
+  /**
+   * Specifies the component's size.
+   *
+   * @default "m"
+   */
+  accessor scale: Scale;
+  /** The component's value. */
+  accessor value: any;
+  /**
+   * 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>;
+  /** Fires when the `checked` value has changed. */
+  readonly calciteSwitchChange: import("@arcgis/lumina").TargetedEvent<this, void>;
+  readonly "@eventTypes": {
+    calciteSwitchChange: Switch["calciteSwitchChange"]["detail"];
+  };
+}

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

@@ -1,24 +1,28 @@
+/* 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 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
-import { createRef, ref } from "lit-html/directives/ref.js";
+import { createRef, ref } from "lit/directives/ref.js";
 import { c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from "../../chunks/form.js";
-import { u as updateHostInteraction, I as InteractiveContainer } from "../../chunks/interactive.js";
 import { i as isActivationKey } from "../../chunks/key.js";
 import { c as connectLabel, d as disconnectLabel, g as getLabelText } from "../../chunks/label.js";
 import { I as InternalLabel } from "../../chunks/InternalLabel.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
+import { u as useInteractive } from "../../chunks/useInteractive.js";
 const CSS = {
   container: "container",
   track: "track",
   handle: "handle"
 };
-const styles = css`: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([scale=s]) .container{block-size:.75rem}:host([scale=s]) .track{block-size:.75rem;inline-size:1.5rem}:host([scale=s]) .handle{block-size:.5rem;inline-size:.5rem}:host([scale=m]) .container{block-size:1rem}:host([scale=m]) .track{block-size:1rem;inline-size:2rem}:host([scale=m]) .handle{block-size:.75rem;inline-size:.75rem}:host([scale=l]) .container{block-size:1.5rem}:host([scale=l]) .track{block-size:1.5rem;inline-size:3rem}:host([scale=l]) .handle{block-size:1.25rem;inline-size:1.25rem}:host{position:relative;display:inline-block;inline-size:auto;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:middle;tap-highlight-color:transparent}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.container{outline-width:0px;display:flex}.track{pointer-events:none;position:relative;box-sizing:border-box;display:inline-block;vertical-align:top;outline-color:transparent;border-radius:var(--calcite-switch-corner-radius, 9999px);border-color:var(--calcite-switch-border-color);background-color:var(--calcite-switch-background-color, var(--calcite-color-border-input))}.container:focus .track{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(var(--calcite-spacing-base) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.container:hover .track{background-color:var(--calcite-switch-background-color-hover, var(--calcite-color-text-3))}.handle{pointer-events:none;position:absolute;display:block;transition-property:all;transition-duration:var(--calcite-animation-timing);transition-timing-function:cubic-bezier(.4,0,.2,1);inset-block-start:var(--calcite-spacing-base);inset-inline:var(--calcite-spacing-base) auto;background-color:var(--calcite-switch-handle-background-color, var(--calcite-color-foreground-1));border-color:var(--calcite-switch-handle-border-color);border-radius:var(--calcite-switch-corner-radius, 9999px);box-shadow:var(--calcite-switch-handle-shadow)}:host([checked]) .track{background-color:var(--calcite-switch-background-color, var(--calcite-color-brand))}:host([checked]) .handle{inset-inline:auto var(--calcite-spacing-base)}:host([checked]):host(:hover:not([disabled])) .track{background-color:var(--calcite-switch-background-color-hover, var(--calcite-color-brand-hover))}@media(forced-colors:active){:host([checked]) .track{background-color:canvasText}}.internal-label-alignment--center{align-items:center}.internal-label-alignment--end{align-items:end}.internal-label--container{display:flex;justify-content:space-between;color:var(--calcite-color-text-1)}.internal-label-required--indicator{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-status-danger);padding-inline:var(--calcite-spacing-base)}.internal-label-required--indicator:hover{cursor:help}.internal-label--text{line-height:1}:host([scale=s]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-xxs)}:host([scale=s]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label--text{font-size:var(--calcite-font-size--2)}:host([scale=m]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label--text{font-size:var(--calcite-font-size--1)}:host([scale=l]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=l]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-md)}:host([scale=l]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-md)}:host([scale=l]) .internal-label--text{font-size:var(--calcite-font-size-0)}::slotted(input[slot=hidden-form-input]){margin:0!important;opacity:0!important;outline:none!important;padding:0!important;position:absolute!important;inset:0!important;transform:none!important;-webkit-appearance:none!important;z-index:-1!important}:host([hidden]){display:none}[hidden]{display:none}`;
+const styles = css`: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([scale=s]) .container{block-size:.75rem}:host([scale=s]) .track{block-size:.75rem;inline-size:1.5rem}:host([scale=s]) .handle{block-size:.5rem;inline-size:.5rem}:host([scale=m]) .container{block-size:1rem}:host([scale=m]) .track{block-size:1rem;inline-size:2rem}:host([scale=m]) .handle{block-size:.75rem;inline-size:.75rem}:host([scale=l]) .container{block-size:1.5rem}:host([scale=l]) .track{block-size:1.5rem;inline-size:3rem}:host([scale=l]) .handle{block-size:1.25rem;inline-size:1.25rem}:host{position:relative;display:inline-block;inline-size:auto;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:middle;tap-highlight-color:transparent}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.container{outline-width:0px;display:flex}.track{pointer-events:none;position:relative;box-sizing:border-box;display:inline-block;vertical-align:top;outline-color:transparent;border-radius:var(--calcite-switch-corner-radius, 9999px);border-color:var(--calcite-switch-border-color);background-color:var(--calcite-switch-background-color, var(--calcite-color-border-input))}.container:focus .track{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(var(--calcite-spacing-base) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.container:hover .track{background-color:var(--calcite-switch-background-color-hover, var(--calcite-color-text-3))}.handle{pointer-events:none;position:absolute;display:block;transition-property:all;transition-duration:var(--calcite-animation-timing);transition-timing-function:cubic-bezier(.4,0,.2,1);inset-block-start:var(--calcite-spacing-base);inset-inline:var(--calcite-spacing-base) auto;background-color:var(--calcite-switch-handle-background-color, var(--calcite-color-foreground-1));border-color:var(--calcite-switch-handle-border-color);border-radius:var(--calcite-switch-corner-radius, 9999px);box-shadow:var(--calcite-switch-handle-shadow)}:host([checked]) .track{background-color:var(--calcite-switch-background-color, var(--calcite-color-brand))}:host([checked]) .handle{inset-inline:auto var(--calcite-spacing-base)}:host([checked]):host(:hover:not([disabled])) .track{background-color:var(--calcite-switch-background-color-hover, var(--calcite-color-brand-hover))}@media(forced-colors:active){:host([checked]) .track{background-color:canvasText}}.internal-label-alignment--center{align-items:center}.internal-label-alignment--end{align-items:end}.internal-label--container{display:flex;justify-content:space-between;color:var(--calcite-color-text-1)}.internal-label-required--indicator{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-status-danger);padding-inline:var(--calcite-spacing-base)}.internal-label-required--indicator:hover{cursor:help}.internal-label--text{line-height:1}:host([scale=s]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-xxs)}:host([scale=s]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label--text{font-size:var(--calcite-font-size--2)}:host([scale=m]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label--text{font-size:var(--calcite-font-size--1)}:host([scale=l]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=l]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-md)}:host([scale=l]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-md)}:host([scale=l]) .internal-label--text{font-size:var(--calcite-font-size-0)}::slotted(input[slot=hidden-form-input]){margin:0!important;opacity:0!important;outline:none!important;padding:0!important;position:absolute!important;inset:0!important;transform:none!important;-webkit-appearance:none!important;z-index:-1!important}:host([hidden]){display:none}[hidden]{display:none}`;
 class Switch extends LitElement {
   constructor() {
     super();
     this.switchRef = createRef();
     this.focusSetter = useSetFocus()(this);
+    this.interactiveContainer = useInteractive(this);
     this.checked = false;
     this.disabled = false;
     this.scale = "m";
@@ -40,9 +44,6 @@ class Switch extends LitElement {
     connectLabel(this);
     connectForm(this);
   }
-  updated() {
-    updateHostInteraction(this);
-  }
   disconnectedCallback() {
     super.disconnectedCallback();
     disconnectLabel(this);
@@ -74,7 +75,7 @@ class Switch extends LitElement {
     this.toggle();
   }
   render() {
-    return InteractiveContainer({ disabled: this.disabled, children: html`<div .ariaChecked=${this.checked} .ariaLabel=${getLabelText(this)} class=${safeClassMap(CSS.container)} role=switch tabindex=0 ${ref(this.switchRef)}>${this.labelTextStart && InternalLabel({ alignmentCenter: true, bottomSpacingDisabled: true, labelText: this.labelTextStart, spacingInlineEnd: true }) || ""}<div class=${safeClassMap(CSS.track)}><div class=${safeClassMap(CSS.handle)}></div></div>${this.labelTextEnd && InternalLabel({ alignmentCenter: true, bottomSpacingDisabled: true, labelText: this.labelTextEnd, spacingInlineStart: true }) || ""}${HiddenFormInputSlot({ component: this })}</div>` });
+    return this.interactiveContainer({ disabled: this.disabled, children: html`<div .ariaChecked=${this.checked} .ariaLabel=${getLabelText(this)} class=${safeClassMap(CSS.container)} role=switch tabindex=0 ${ref(this.switchRef)}>${this.labelTextStart && InternalLabel({ alignmentCenter: true, bottomSpacingDisabled: true, labelText: this.labelTextStart, spacingInlineEnd: true }) || ""}<div class=${safeClassMap(CSS.track)}><div class=${safeClassMap(CSS.handle)}></div></div>${this.labelTextEnd && InternalLabel({ alignmentCenter: true, bottomSpacingDisabled: true, labelText: this.labelTextEnd, spacingInlineStart: true }) || ""}${HiddenFormInputSlot({ component: this })}</div>` });
   }
 }
 customElement("calcite-switch", Switch);

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

@@ -1,23 +1,26 @@
 /// <reference path="../../index.d.ts" />
-import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
-import { Scale } from '../interfaces';
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 
-/** @slot  - A slot for adding custom content. */
-export declare class Tab extends LitElement {
-    /**
-     * When `true`, the component's contents are selected.
-     *
-     * Only one tab can be selected within the `calcite-tabs` parent.
-     *
-     * @default false
-     */
-    selected: boolean;
-    /**
-     * Specifies a unique name for the component.
-     *
-     * When specified, use the same value on the `calcite-tab-title`.
-     */
-    tab: string;
-    /** Returns the index of the component item within the tab array. */
-    getTabIndex(): Promise<number>;
-}
+/**
+ * @cssproperty [--calcite-tab-content-space-y] - Specifies the vertical space between the component's content in the `default` slot.
+ * @cssproperty [--calcite-tab-content-block-padding] - [Deprecated] Use `--calcite-tab-content-space-y` instead. Specifies the block padding of the component's content in the `default` slot.
+ * @slot  - A slot for adding custom content.
+ */
+export abstract class Tab extends LitElement {
+  /**
+   * When `true`, the component is selected.
+   *
+   * Only one tab can be selected within the `calcite-tabs` parent.
+   *
+   * @default false
+   */
+  accessor selected: boolean;
+  /**
+   * Specifies a unique name for the component.
+   *
+   * When specified, use the same value on the `calcite-tab-title`.
+   */
+  accessor tab: string;
+  /** Returns the index of the component item within the tab array. */
+  getTabIndex(): Promise<number>;
+}

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

@@ -1,7 +1,10 @@
+/* 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 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, setAttribute, safeClassMap } from "@arcgis/lumina";
-import { n as nodeListToArray } from "../../chunks/dom.js";
+import { o as nodeListToArray } from "../../chunks/dom.js";
 import { g as guid } from "../../chunks/guid.js";
 const CSS = {
   container: "container",
@@ -11,7 +14,7 @@ const CSS = {
 const IDS = {
   tabTitleId: (id) => `calcite-tab-title-${id}`
 };
-const styles = css`:host{--calcite-internal-color-focus: var( --calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)) )}:host{display:none}:host,.container,.content{block-size:100%;inline-size:100%}:host([selected]),:host([selected]) .container{display:flex;flex-direction:column}.content{box-sizing:border-box;padding-block:var(--calcite-tab-content-space-y, var(--calcite-tab-content-block-padding, var(--calcite-internal-tab-content-space-y)))}.scale-s{--calcite-internal-tab-content-space-y: .25rem;font-size:var(--calcite-font-size-sm);line-height:1rem}.scale-m{--calcite-internal-tab-content-space-y: .5rem;font-size:var(--calcite-font-size);line-height:1rem}.scale-l{--calcite-internal-tab-content-space-y: .625rem;font-size:var(--calcite-font-size-md);line-height:1.25rem}.container{display:none;block-size:100%;inline-size:100%;overflow:auto;outline-color:transparent}.container:focus{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))))}:host([hidden]){display:none}[hidden]{display:none}`;
+const styles = css`:host{display:none}:host,.container,.content{block-size:100%;inline-size:100%}:host([selected]),:host([selected]) .container{display:flex;flex-direction:column}.content{box-sizing:border-box;padding-block:var(--calcite-tab-content-space-y, var(--calcite-tab-content-block-padding, var(--calcite-internal-tab-content-space-y)))}.scale-s{--calcite-internal-tab-content-space-y: .25rem;font-size:var(--calcite-font-size-sm);line-height:1rem}.scale-m{--calcite-internal-tab-content-space-y: .5rem;font-size:var(--calcite-font-size);line-height:1rem}.scale-l{--calcite-internal-tab-content-space-y: .625rem;font-size:var(--calcite-font-size-md);line-height:1.25rem}.container{display:none;block-size:100%;inline-size:100%;overflow:auto;outline-color:transparent}.container:focus{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))))}:host([hidden]){display:none}[hidden]{display:none}`;
 class Tab extends LitElement {
   constructor() {
     super();

package/dist/components/calcite-tab-nav/customElement.d.ts

@@ -1,36 +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 { TabChangeEventDetail } from '../calcite-tab/interfaces';
-import { TabID, TabLayout, TabPosition } from '../calcite-tabs/interfaces';
-import { TabTitle } from '../calcite-tab-title/customElement.js';
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { TabPosition } from "../calcite-tabs/interfaces.js";
+import type { TabTitle } from "../calcite-tab-title/customElement.js";
 
-/** @slot  - A slot for adding `calcite-tab-title`s. */
-export declare class TabNav extends LitElement {
-    /** Use this property to override individual strings used by the component. */
-    messageOverrides?: typeof this.messages._overrides;
-    /**
-     * Specifies the position of `calcite-tab-nav` and `calcite-tab-title` components in relation to, and is inherited from the parent `calcite-tabs`, defaults to `top`.
-     *
-     *  `@internal`
-     *
-     * @default "bottom"
-     */
-    position: TabPosition;
-    /** Specifies the component's selected `calcite-tab-title`. */
-    readonly selectedTitle: HTMLCalciteTabTitleElement;
-    /** Specifies the name when saving selected `calcite-tab` data to `localStorage`. */
-    storageId: string;
-    /** Specifies text to update multiple components to keep in sync if one changes. */
-    syncId: string;
-    /** Emits when the selected `calcite-tab` changes. */
-    readonly calciteTabChange: TargetedEvent<this, void>;
-    private messages: Partial<{
-        nextTabTitles: string;
-        previousTabTitles: string;
-    }> & import('@arcgis/lumina/controllers').T9nMeta<{
-        nextTabTitles: string;
-        previousTabTitles: string;
-    }>;
-}
+/**
+ * @cssproperty [--calcite-tab-background-color] - Specifies the component's background color.
+ * @cssproperty [--calcite-tab-border-color] - When `calcite-tabs` is `bordered`, specifies the component's border color.
+ * @cssproperty [--calcite-tab-text-color] - Specifies the component's `iconStart`, `iconEnd`, and text color.
+ * @slot  - A slot for adding `calcite-tab-title`s.
+ */
+export abstract class TabNav extends LitElement {
+  /** Overrides individual strings used by the component. */
+  accessor messageOverrides: {
+      nextTabTitles?: string;
+      previousTabTitles?: string;
+  };
+  /**
+   * Specifies the position of `calcite-tab-nav` and `calcite-tab-title` components in relation to, and is inherited from the parent `calcite-tabs`, defaults to `top`.
+   *
+   *  \@internal
+   *
+   * @default "bottom"
+   */
+  accessor position: TabPosition;
+  /** Specifies the component's selected `calcite-tab-title`. */
+  get selectedTitle(): TabTitle;
+  /** Specifies the name when saving selected `calcite-tab` data to `localStorage`. */
+  accessor storageId: string;
+  /** Specifies text to update multiple components to keep in sync if one changes. */
+  accessor syncId: string;
+  /** Emits when the selected `calcite-tab` changes. */
+  readonly calciteTabChange: import("@arcgis/lumina").TargetedEvent<this, void>;
+  readonly "@eventTypes": {
+    calciteTabChange: TabNav["calciteTabChange"]["detail"];
+  };
+}

package/dist/components/calcite-tab-nav/customElement.js

@@ -1,10 +1,13 @@
+/* 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 */
 import { C as CSS_UTILITY, c as customElement } from "../../chunks/runtime.js";
 import { ref } from "lit/directives/ref.js";
 import { keyed } from "lit/directives/keyed.js";
-import { c as calciteSize24, a as calciteSize32, b as calciteSize44 } from "../../chunks/core.js";
+import { a as calciteSize24, b as calciteSize32, d as calciteSize44 } from "../../chunks/core.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
-import { g as getElementDir, f as filterDirectChildren, d as focusElementInGroup, b as focusElement } from "../../chunks/dom.js";
+import { g as getElementDir, B as filterDirectChildren, f as focusElementInGroup, j as focusElement } from "../../chunks/dom.js";
 import { c as createObserver } from "../../chunks/observers.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 const ICON = {
@@ -21,7 +24,7 @@ const CSS = {
   scale: (scale) => `scale-${scale}`,
   position: (position) => `position-${position}`
 };
-const styles = css`:host{--calcite-internal-color-focus: var( --calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)) )}:host{position:relative;display:flex}:host([bordered]) .scroll-button--forward calcite-button{--calcite-internal-button-border-inline-end-color: var(--calcite-tab-border-color, var(--calcite-color-border-1))}:host([bordered]) .scroll-button--backward calcite-button{--calcite-internal-button-border-inline-start-color: var( --calcite-tab-border-color, var(--calcite-color-border-1) )}.scale-s{--calcite-internal-tab-nav-button-width: 24px;min-block-size:1.5rem}.scale-m{--calcite-internal-tab-nav-button-width: 32px;min-block-size:2rem}.scale-l{--calcite-internal-tab-nav-button-width: 44px;min-block-size:2.75rem}.container::-webkit-scrollbar{display:none;-ms-overflow-style:none;scrollbar-width:none}:host([layout=center]) ::slotted(calcite-tab-title){display:flex;flex-grow:1;flex-shrink:0;min-inline-size:auto;white-space:nowrap}:host([layout=center]) ::slotted(calcite-tab-title[selected]){overflow:unset}:host(:not([bordered])) .scale-l{--calcite-internal-tab-nav-gap: var(--calcite-spacing-xxl)}:host(:not([bordered])) .scale-m{--calcite-internal-tab-nav-gap: var(--calcite-spacing-xl)}:host(:not([bordered])) .scale-s{--calcite-internal-tab-nav-gap: var(--calcite-spacing-lg)}:host(:not([bordered])) .tab-titles-slot-wrapper{gap:var(--calcite-internal-tab-nav-gap)}:host([layout=center]:not([bordered])) .tab-titles-slot-wrapper{padding-inline:var(--calcite-spacing-xl)}.tab-titles-slot-wrapper{flex:1 1 0%}.container,.tab-titles-slot-wrapper{display:flex;inline-size:100%;justify-content:flex-start;overflow:hidden;white-space:nowrap}.scroll-button{position:absolute;inset-block:0px}.scroll-button calcite-button{--calcite-button-text-color: var(--calcite-tab-text-color, var(--calcite-color-text-3));--calcite-button-background-color: var(--calcite-color-transparent);--calcite-offset-invert-focus: 1;block-size:var(--calcite-container-size-content-fluid)}.scroll-button-container{display:flex;inset-block-start:var(--calcite-border-width-md);inset-block-end:var(--calcite-border-width-md);inset-inline-end:0;inline-size:calc(2 * var(--calcite-internal-tab-nav-button-width))}.scroll-button--forward{inset-inline-end:0;z-index:var(--calcite-z-index)}.scroll-button--backward{inset-inline-end:var(--calcite-internal-tab-nav-button-width);z-index:var(--calcite-z-index)}:host(:not([bordered])) .scroll-button--backward:before{background-color:var(--calcite-tab-border-color, var(--calcite-color-border-3));content:"";inline-size:var(--calcite-border-width-sm);inset-block-start:var(--calcite-border-width-md);inset-block-end:var(--calcite-border-width-md);position:absolute;inset-inline-start:0}:host([hidden]){display:none}[hidden]{display:none}`;
+const styles = css`:host{position:relative;display:flex}:host([bordered]) .scroll-button--forward calcite-button{--calcite-internal-button-border-inline-end-color: var(--calcite-tab-border-color, var(--calcite-color-border-1))}:host([bordered]) .scroll-button--backward calcite-button{--calcite-internal-button-border-inline-start-color: var( --calcite-tab-border-color, var(--calcite-color-border-1) )}.scale-s{--calcite-internal-tab-nav-button-width: 24px;min-block-size:1.5rem}.scale-m{--calcite-internal-tab-nav-button-width: 32px;min-block-size:2rem}.scale-l{--calcite-internal-tab-nav-button-width: 44px;min-block-size:2.75rem}.container::-webkit-scrollbar{display:none;-ms-overflow-style:none;scrollbar-width:none}:host([layout=center]) ::slotted(calcite-tab-title){display:flex;flex-grow:1;flex-shrink:0;min-inline-size:auto;white-space:nowrap}:host([layout=center]) ::slotted(calcite-tab-title[selected]){overflow:unset}:host(:not([bordered])) .scale-l{--calcite-internal-tab-nav-gap: var(--calcite-spacing-xxl)}:host(:not([bordered])) .scale-m{--calcite-internal-tab-nav-gap: var(--calcite-spacing-xl)}:host(:not([bordered])) .scale-s{--calcite-internal-tab-nav-gap: var(--calcite-spacing-lg)}:host(:not([bordered])) .tab-titles-slot-wrapper{gap:var(--calcite-internal-tab-nav-gap)}:host([layout=center]:not([bordered])) .tab-titles-slot-wrapper{padding-inline:var(--calcite-spacing-xl)}.tab-titles-slot-wrapper{flex:1 1 0%}.container,.tab-titles-slot-wrapper{display:flex;inline-size:100%;justify-content:flex-start;overflow:hidden;white-space:nowrap}.scroll-button{position:absolute;inset-block:0px}.scroll-button calcite-button{--calcite-button-text-color: var(--calcite-tab-text-color, var(--calcite-color-text-3));--calcite-button-background-color: var(--calcite-color-transparent);--calcite-offset-invert-focus: 1;block-size:var(--calcite-container-size-content-fluid)}.scroll-button-container{display:flex;inset-block-start:var(--calcite-border-width-md);inset-block-end:var(--calcite-border-width-md);inset-inline-end:0;inline-size:calc(2 * var(--calcite-internal-tab-nav-button-width))}.scroll-button--forward{inset-inline-end:0;z-index:var(--calcite-z-index)}.scroll-button--backward{inset-inline-end:var(--calcite-internal-tab-nav-button-width);z-index:var(--calcite-z-index)}:host(:not([bordered])) .scroll-button--backward:before{background-color:var(--calcite-tab-border-color, var(--calcite-color-border-3));content:"";inline-size:var(--calcite-border-width-sm);inset-block-start:var(--calcite-border-width-md);inset-block-end:var(--calcite-border-width-md);position:absolute;inset-inline-start:0}:host([hidden]){display:none}[hidden]{display:none}`;
 class TabNav extends LitElement {
   constructor() {
     super();
@@ -366,7 +369,7 @@ class TabNav extends LitElement {
       [CSS.scrollButton]: true,
       [CSS.scrollBackwardButton]: !isEnd,
       [CSS.scrollForwardButton]: isEnd
-    })}><calcite-button appearance=transparent .ariaLabel=${isEnd ? messages.nextTabTitles : messages.previousTabTitles} .disabled=${isEnd ? !hasOverflowingEndTabTitle : !hasOverflowingStartTabTitle} icon-flip-rtl=both .iconStart=${isEnd ? ICON.chevronRight : ICON.chevronLeft} kind=neutral @click=${isEnd ? this.scrollToNextTabTitles : this.scrollToPreviousTabTitles} .scale=${scale} tabindex=-1></calcite-button></div>`);
+    })}><calcite-button .ariaLabel=${isEnd ? messages.nextTabTitles : messages.previousTabTitles} .disabled=${isEnd ? !hasOverflowingEndTabTitle : !hasOverflowingStartTabTitle} icon-flip-rtl=both .iconStart=${isEnd ? ICON.chevronRight : ICON.chevronLeft} kind=neutral @click=${isEnd ? this.scrollToNextTabTitles : this.scrollToPreviousTabTitles} .scale=${scale} tabindex=-1></calcite-button></div>`);
   }
 }
 customElement("calcite-tab-nav", TabNav);

package/dist/components/calcite-tab-nav/index.d.ts

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

package/dist/components/calcite-tab-title/customElement.d.ts

@@ -1,75 +1,86 @@
 /// <reference path="../../index.d.ts" />
-import { PropertyValues } from 'lit';
-import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
-import { InteractiveComponent } from '../../utils/interactive';
-import { FlipContext, Scale } from '../interfaces';
-import { TabChangeEventDetail, TabCloseEventDetail } from '../calcite-tab/interfaces';
-import { TabID, TabLayout, TabPosition } from '../calcite-tabs/interfaces';
-import { IconName } from '../calcite-icon/interfaces';
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { FlipContext } from "../interfaces.js";
+import type { TabPosition } from "../calcite-tabs/interfaces.js";
+import type { IconName } from "../calcite-icon/interfaces.js";
 
 /**
  * Tab-titles are optionally individually closable.
  *
+ * @cssproperty [--calcite-tab-text-color] - Specifies the component's text color.
+ * @cssproperty [--calcite-tab-text-color-press] - Specifies the component's text color when hovered, pressed, or selected.
+ * @cssproperty [--calcite-tab-border-color] - Specifies the component's border color.
+ * @cssproperty [--calcite-tab-background-color] - Specifies the component's background color.
+ * @cssproperty [--calcite-tab-background-color-hover] - When `calcite-tabs` is `bordered`, specifies the component's background color when hovered.
+ * @cssproperty [--calcite-tab-accent-color-press] - When `selected` or active, specifies the component's accent color.
+ * @cssproperty [--calcite-tab-icon-color-start] - Specifies the component's `iconStart` color.
+ * @cssproperty [--calcite-tab-icon-color-start-press] - When `selected`, hovered, or pressed, specifies the component's `iconStart` color.
+ * @cssproperty [--calcite-tab-icon-color-end] - Specifies the component's `iconEnd` color.
+ * @cssproperty [--calcite-tab-icon-color-end-press] - When `selected`, hovered, or pressed, specifies the component's `iconEnd` color.
+ * @cssproperty [--calcite-tab-close-icon-color] - Specifies the component's close element icon color.
+ * @cssproperty [--calcite-tab-close-icon-color-press] - Specifies the component's close element icon color when hovered, focused, and active.
+ * @cssproperty [--calcite-tab-close-icon-background-color] - Specifies the component's close element icon background color.
+ * @cssproperty [--calcite-tab-close-icon-background-color-press] - Specifies the component's close element icon background color when pressed.
+ * @cssproperty [--calcite-tab-close-icon-background-color-hover] - Specifies the component's close element icon background color when hovered.
  * @slot  - A slot for adding text.
  */
-export declare class TabTitle extends LitElement {
-    /**
-     * When `true`, a close button is added to the component.
-     *
-     * @default false
-     */
-    closable: boolean;
-    /**
-     * When `true`, does not display or position the component.
-     *
-     * @default false
-     */
-    closed: boolean;
-    /**
-     * When `true`, interaction is prevented and the component is displayed with lower opacity.
-     *
-     * @default false
-     */
-    disabled: boolean;
-    /** Specifies an icon to display at the end of the component. */
-    iconEnd: IconName;
-    /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */
-    iconFlipRtl: FlipContext;
-    /** Specifies an icon to display at the start of the component. */
-    iconStart: IconName;
-    /** Use this property to override individual strings used by the component. */
-    messageOverrides?: typeof this.messages._overrides;
-    /**
-     * Specifies the position of `calcite-tab-nav` and `calcite-tab-title` components in relation to, and is inherited from the parent `calcite-tabs`, defaults to `top`.
-     *
-     *  `@internal`
-     *
-     * @default "top"
-     */
-    position: TabPosition;
-    /**
-     * When `true`, the component and its respective `calcite-tab` contents are selected.
-     *
-     * Only one tab can be selected within the `calcite-tabs` parent.
-     *
-     * @default false
-     */
-    selected: boolean;
-    /**
-     * Specifies a unique name for the component.
-     *
-     * When specified, use the same value on the `calcite-tab`.
-     */
-    tab: string;
-    /** Returns the index of the title within the `calcite-tab-nav`. */
-    getTabIndex(): Promise<number>;
-    /** Fires when a `calcite-tab` is selected. */
-    readonly calciteTabsActivate: TargetedEvent<this, void>;
-    /** Fires when a `calcite-tab` is closed. */
-    readonly calciteTabsClose: TargetedEvent<this, void>;
-    private messages: Partial<{
-        close: string;
-    }> & import('@arcgis/lumina/controllers').T9nMeta<{
-        close: string;
-    }>;
-}
+export abstract class TabTitle extends LitElement {
+  /**
+   * When `true`, displays a close button in the component.
+   *
+   * @default false
+   */
+  accessor closable: boolean;
+  /**
+   * When `true`, hides the component.
+   *
+   * @default false
+   */
+  accessor closed: boolean;
+  /**
+   * When `true`, interaction is prevented and the component is displayed with lower opacity.
+   *
+   * @default false
+   */
+  accessor disabled: boolean;
+  /** Specifies an icon to display at the end of the component. */
+  accessor iconEnd: IconName;
+  /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */
+  accessor iconFlipRtl: FlipContext;
+  /** Specifies an icon to display at the start of the component. */
+  accessor iconStart: IconName;
+  /** Overrides individual strings used by the component. */
+  accessor messageOverrides: { close?: string; };
+  /**
+   * Specifies the position of `calcite-tab-nav` and `calcite-tab-title` components in relation to, and is inherited from the parent `calcite-tabs`, defaults to `top`.
+   *
+   *  \@internal
+   *
+   * @default "top"
+   */
+  accessor position: TabPosition;
+  /**
+   * When `true`, the component and its respective `calcite-tab` contents are selected.
+   *
+   * Only one tab can be selected within the `calcite-tabs` parent.
+   *
+   * @default false
+   */
+  accessor selected: boolean;
+  /**
+   * Specifies a unique name for the component.
+   *
+   * When specified, use the same value on the `calcite-tab`.
+   */
+  accessor tab: string;
+  /** Returns the index of the title within the `calcite-tab-nav`. */
+  getTabIndex(): Promise<number>;
+  /** Fires when a `calcite-tab` is selected. */
+  readonly calciteTabsActivate: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when a `calcite-tab` is closed. */
+  readonly calciteTabsClose: import("@arcgis/lumina").TargetedEvent<this, void>;
+  readonly "@eventTypes": {
+    calciteTabsActivate: TabTitle["calciteTabsActivate"]["detail"];
+    calciteTabsClose: TabTitle["calciteTabsClose"]["detail"];
+  };
+}