@esri/calcite-components 5.2.0-next.7 → 5.2.0-next.71

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

@@ -4,7 +4,8 @@ import { css, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
 import { i as isActivationKey } from "../../chunks/key.js";
-import { c as connectLabel, d as disconnectLabel, g as getLabelText } from "../../chunks/label.js";
+import { g as getLabelText } from "../../chunks/label.js";
+import { u as useLabel } from "../../chunks/useLabel.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";
@@ -14,7 +15,7 @@ const CSS = {
   track: "track",
   handle: "handle"
 };
-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:none;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}`;
+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:none;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)}:host([hidden]){display:none}[hidden]{display:none}`;
 class Switch extends LitElement {
   constructor() {
     super();
@@ -26,13 +27,15 @@ class Switch extends LitElement {
     this.interactiveContainer = useInteractive(this);
     this.checked = false;
     this.disabled = false;
+    this.required = false;
     this.scale = "m";
     this.calciteSwitchChange = createEvent({ cancelable: false });
+    useLabel(this);
     this.listen("click", this.clickHandler);
     this.listen("keydown", this.keyDownHandler);
   }
   static {
-    this.properties = { checked: [7, {}, { reflect: true, type: Boolean }], disabled: [7, {}, { reflect: true, type: Boolean }], form: [3, {}, { reflect: true }], label: 1, labelTextEnd: 1, labelTextStart: 1, name: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }], value: 1 };
+    this.properties = { checked: [7, {}, { reflect: true, type: Boolean }], disabled: [7, {}, { reflect: true, type: Boolean }], form: [3, {}, { reflect: true }], label: 1, labelTextEnd: 1, labelTextStart: 1, name: [3, {}, { reflect: true }], required: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], validity: [32, {}, { readOnly: true, attribute: false }], value: 1 };
   }
   static {
     this.formAssociated = true;
@@ -43,14 +46,6 @@ class Switch extends LitElement {
   async setFocus(options) {
     return this.focusSetter(() => this.switchRef.value, options);
   }
-  connectedCallback() {
-    super.connectedCallback();
-    connectLabel(this);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    disconnectLabel(this);
-  }
   keyDownHandler(event) {
     if (!this.disabled && isActivationKey(event.key)) {
       this.toggle();

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

@@ -1,11 +1,7 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 
-/**
- * @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] in v3.2.0, removal target v6.0.0 - 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.
- */
+/** @slot  - A slot for adding custom content. */
 export abstract class Tab extends LitElement {
   /**
    * When `true`, the component is selected.

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

@@ -4,6 +4,8 @@ import { css, html } from "lit";
 import { LitElement, setAttribute, safeClassMap } from "@arcgis/lumina";
 import { n as nodeListToArray } from "../../chunks/dom.js";
 import { g as guid } from "../../chunks/guid.js";
+import { i as isTabs } from "../../chunks/resources28.js";
+import { i as isTag } from "../../chunks/resources3.js";
 const CSS = {
   container: "container",
   content: "content",
@@ -12,6 +14,7 @@ const CSS = {
 const IDS = {
   tabTitleId: (id) => `calcite-tab-title-${id}`
 };
+const isTab = isTag("calcite-tab");
 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: var(--calcite-space-sm-plus);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() {
@@ -29,7 +32,7 @@ class Tab extends LitElement {
     this.styles = styles;
   }
   async getTabIndex() {
-    return Array.prototype.indexOf.call(nodeListToArray(this.el.parentElement.children).filter((el) => el.matches("calcite-tab")), this.el);
+    return Array.prototype.indexOf.call(nodeListToArray(this.el.parentElement.children).filter(isTab), this.el);
   }
   _updateAriaInfo(tabIds = [], titleIds = []) {
     this.labeledBy = titleIds[tabIds.indexOf(this.el.id)] || void 0;
@@ -45,7 +48,7 @@ class Tab extends LitElement {
     }));
   }
   internalTabChangeHandler(event) {
-    const targetTabsEl = event.composedPath().find((el) => el.tagName === "CALCITE-TABS");
+    const targetTabsEl = event.composedPath().find(isTabs);
     if (targetTabsEl !== this.parentTabsEl) {
       return;
     }

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

@@ -1,26 +1,24 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { TabPosition } from "../calcite-tabs/interfaces.js";
+import type { TabPosition } from "../calcite-tabs/types.js";
 import type { TabTitle } from "../calcite-tab-title/customElement.js";
 
-/**
- * @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.
- */
+/** @slot  - A slot for adding `calcite-tab-title`s. */
 export abstract class TabNav extends LitElement {
-  /** Overrides individual strings used by the component. */
+  /**
+   * Replace localized message strings with your own strings.
+   *
+   * _**Note**: Individual message keys may change between releases._
+   */
   accessor messageOverrides: {
-      nextTabTitles?: string;
-      previousTabTitles?: string;
+      nextTabTitles?: string | undefined;
+      previousTabTitles?: string | undefined;
   };
   /**
-   * 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
+   * Specifies the position of `calcite-tab-nav` and `calcite-tab-title` components in relation to, and is inherited from the parent `calcite-tabs`.
    *
    * @default "bottom"
+   * @internal
    */
   accessor position: TabPosition;
   /** Specifies the component's selected `calcite-tab-title`. */

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

@@ -2,11 +2,10 @@
 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 { 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 { useDirection } from "@arcgis/lumina/controllers";
-import { C as filterDirectChildren, f as focusElementInGroup, i as focusElement } from "../../chunks/dom.js";
+import { C as filterDirectChildren, e as focusElementInGroup, f as focusElement } from "../../chunks/dom.js";
 import { c as createObserver } from "../../chunks/observers.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 const ICON = {
@@ -23,6 +22,7 @@ const CSS = {
   scale: (scale) => `scale-${scale}`,
   position: (position) => `position-${position}`
 };
+const SCROLL_THRESHOLD = 1;
 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() {
@@ -113,10 +113,6 @@ class TabNav extends LitElement {
   get enabledTabTitles() {
     return filterDirectChildren(this.el, "calcite-tab-title:not([disabled])").filter((tabTitle) => !tabTitle.closed);
   }
-  get scrollerButtonWidth() {
-    const { scale } = this;
-    return parseInt(scale === "s" ? calciteSize24 : scale === "m" ? calciteSize32 : calciteSize44);
-  }
   get tabTitles() {
     return filterDirectChildren(this.el, "calcite-tab-title");
   }
@@ -155,11 +151,12 @@ class TabNav extends LitElement {
       const containerBounds = tabTitleContainer.getBoundingClientRect();
       const tabTitleBounds = activatedTabTitle.getBoundingClientRect();
       const scrollPosition = tabTitleContainer.scrollLeft;
-      if (tabTitleBounds.left < containerBounds.left) {
-        const left = scrollPosition + (tabTitleBounds.left - containerBounds.left);
+      const offsetLeft = tabTitleBounds.left - containerBounds.left;
+      if (offsetLeft < 0) {
+        const left = scrollPosition + offsetLeft;
         tabTitleContainer.scrollTo({ left, behavior });
       } else if (tabTitleBounds.right > containerBounds.right) {
-        const left = scrollPosition + (tabTitleBounds.right - containerBounds.right);
+        const left = scrollPosition + Math.min(tabTitleBounds.right - containerBounds.right, offsetLeft);
         tabTitleContainer.scrollTo({ left, behavior });
       }
     });
@@ -195,6 +192,10 @@ class TabNav extends LitElement {
     });
   }
   onTabTitleWheel(event) {
+    const tabTitleContainer = event.currentTarget;
+    if (tabTitleContainer.scrollWidth <= tabTitleContainer.clientWidth) {
+      return;
+    }
     event.preventDefault();
     const { deltaX, deltaY } = event;
     const x = Math.abs(deltaX);
@@ -210,7 +211,7 @@ class TabNav extends LitElement {
       this.lastScrollWheelAxis = "y";
     }
     const scrollByX = (this.effectiveDir === "rtl" ? -1 : 1) * scrollBy;
-    event.currentTarget.scrollBy(scrollByX, 0);
+    tabTitleContainer.scrollBy(scrollByX, 0);
   }
   onSlotChange() {
     this.intersectionObserver?.disconnect();
@@ -267,11 +268,11 @@ class TabNav extends LitElement {
     const visibleWidth = tabTitleContainer.clientWidth;
     const totalContentWidth = tabTitleContainer.scrollWidth;
     if (this.effectiveDir === "ltr") {
-      isOverflowStart = scrollPosition > 0;
-      isOverflowEnd = scrollPosition + visibleWidth < totalContentWidth;
+      isOverflowStart = scrollPosition > SCROLL_THRESHOLD;
+      isOverflowEnd = totalContentWidth - (scrollPosition + visibleWidth) > SCROLL_THRESHOLD;
     } else {
-      isOverflowStart = scrollPosition < 0;
-      isOverflowEnd = scrollPosition !== -(totalContentWidth - visibleWidth);
+      isOverflowStart = scrollPosition < -SCROLL_THRESHOLD;
+      isOverflowEnd = totalContentWidth - visibleWidth + scrollPosition > SCROLL_THRESHOLD;
     }
     this.hasOverflowingStartTabTitle = isOverflowStart;
     this.hasOverflowingEndTabTitle = isOverflowEnd;
@@ -283,55 +284,46 @@ class TabNav extends LitElement {
         return;
       }
       const containerBounds = tabTitleContainer.getBoundingClientRect();
-      const tabTitles = Array.from(this.el.querySelectorAll("calcite-tab-title"));
       const { effectiveDir } = this;
-      if (direction === "forward") {
-        tabTitles.reverse();
+      const scrollToRightTabTiles = direction === "forward" && effectiveDir === "ltr" || direction === "backward" && effectiveDir === "rtl";
+      let tabTitleToScroll;
+      const tabTitles = direction === "forward" ? [...this.tabTitles].reverse() : this.tabTitles;
+      if (!tabTitles.length) {
+        return;
       }
-      let closestToEdge = null;
-      tabTitles.forEach((tabTitle) => {
-        const tabTitleBounds = tabTitle.getBoundingClientRect();
-        const containerEndX = containerBounds.x + containerBounds.width;
-        const tabTitleEndX = tabTitleBounds.x + tabTitleBounds.width;
-        if (direction === "forward" && effectiveDir === "ltr" || direction === "backward" && effectiveDir === "rtl") {
-          const afterContainerEnd = tabTitleBounds.x > containerEndX;
-          if (afterContainerEnd) {
-            closestToEdge = tabTitle;
-          } else {
-            const crossingContainerEnd = tabTitleEndX > containerEndX && tabTitleBounds.x > containerBounds.x;
-            if (crossingContainerEnd) {
-              closestToEdge = tabTitle;
-            }
-          }
-        } else {
-          const beforeContainerStart = tabTitleEndX < containerBounds.x;
-          if (beforeContainerStart) {
-            closestToEdge = tabTitle;
-          } else {
-            const crossingContainerStart = tabTitleBounds.x < containerBounds.x && tabTitleEndX > containerBounds.x;
-            if (crossingContainerStart) {
-              closestToEdge = tabTitle;
-            }
+      if (scrollToRightTabTiles) {
+        let closestTabTitleAfterContainerEnd;
+        const closestTabTitleCrossingContainerEnd = tabTitles.find((tabTitle) => {
+          const tabTitleBounds2 = tabTitle.getBoundingClientRect();
+          const isAfterContainerEnd = tabTitleBounds2.left >= containerBounds.right;
+          const isClippingContainerEnd = tabTitleBounds2.left < containerBounds.right && tabTitleBounds2.right > containerBounds.right && tabTitleBounds2.right - containerBounds.right > SCROLL_THRESHOLD;
+          if (isAfterContainerEnd) {
+            closestTabTitleAfterContainerEnd = tabTitle;
           }
-        }
-      });
-      let scrollTo;
-      if (closestToEdge) {
-        const scrollerButtonContainerWidth = 2 * this.scrollerButtonWidth;
-        const offsetAdjustment = direction === "forward" && effectiveDir === "ltr" || direction === "backward" && effectiveDir === "rtl" ? -scrollerButtonContainerWidth : closestToEdge.offsetWidth - (tabTitleContainer.clientWidth + scrollerButtonContainerWidth);
-        scrollTo = closestToEdge.offsetLeft + offsetAdjustment;
+          return isClippingContainerEnd;
+        });
+        tabTitleToScroll = closestTabTitleCrossingContainerEnd ?? closestTabTitleAfterContainerEnd;
       } else {
-        const scrollPosition = tabTitleContainer.scrollLeft;
-        const containerWidth = containerBounds.width;
-        const totalContentWidth = tabTitleContainer.scrollWidth;
-        const hiddenContentWidth = totalContentWidth - (containerWidth + Math.abs(scrollPosition));
-        if (hiddenContentWidth > 0) {
-          const directionMultiplier = effectiveDir === "ltr" ? 1 : -1;
-          scrollTo = scrollPosition + directionMultiplier * hiddenContentWidth;
-        }
+        let closestTabTitleBeforeContainerStart;
+        const closestTabTitleCrossingContainerStart = tabTitles.find((tabTitle) => {
+          const tabTitleBounds2 = tabTitle.getBoundingClientRect();
+          const isBeforeContainerStart = tabTitleBounds2.right <= containerBounds.left;
+          const isClippingContainerStart = tabTitleBounds2.left < containerBounds.left && tabTitleBounds2.right > containerBounds.left && containerBounds.left - tabTitleBounds2.left > SCROLL_THRESHOLD;
+          if (isBeforeContainerStart) {
+            closestTabTitleBeforeContainerStart = tabTitle;
+          }
+          return isClippingContainerStart;
+        });
+        tabTitleToScroll = closestTabTitleCrossingContainerStart ?? closestTabTitleBeforeContainerStart;
+      }
+      if (!tabTitleToScroll) {
+        return;
       }
+      const tabTitleBounds = tabTitleToScroll.getBoundingClientRect();
+      const containerScrollPosition = tabTitleContainer.scrollLeft;
+      const scrollLeft = scrollToRightTabTiles ? containerScrollPosition + (tabTitleBounds.right - containerBounds.right) : containerScrollPosition + (tabTitleBounds.left - containerBounds.left);
       tabTitleContainer.scrollTo({
-        left: scrollTo,
+        left: Math.round(scrollLeft),
         behavior: "smooth"
       });
     });

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

@@ -1,27 +1,12 @@
 /// <reference path="../../index.d.ts" />
 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";
+import type { FlipContext } from "../types.js";
+import type { TabPosition } from "../calcite-tabs/types.js";
+import type { IconName } from "../calcite-icon/types.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 abstract class TabTitle extends LitElement {
@@ -49,14 +34,17 @@ export abstract class TabTitle extends LitElement {
   accessor iconFlipRtl: FlipContext | undefined;
   /** Specifies an icon to display at the start of the component. */
   accessor iconStart: IconName | undefined;
-  /** 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`.
+   * Replace localized message strings with your own strings.
    *
-   *  \@internal
+   * _**Note**: Individual message keys may change between releases._
+   */
+  accessor messageOverrides: { close?: string | undefined; };
+  /**
+   * Specifies the position of `calcite-tab-nav` and `calcite-tab-title` components in relation to, and is inherited from the parent `calcite-tabs`.
    *
    * @default "top"
+   * @internal
    */
   accessor position: TabPosition;
   /**

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

@@ -11,7 +11,9 @@ import { g as guid } from "../../chunks/guid.js";
 import { c as createObserver, u as updateRefObserver } from "../../chunks/observers.js";
 import { g as getIconScale } from "../../chunks/component.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
+import { i as isTabs } from "../../chunks/resources28.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
+import { i as isTag } from "../../chunks/resources3.js";
 const CSS = {
   close: "close",
   container: "container",
@@ -29,7 +31,8 @@ const idPrefix = "calcite-tab-title";
 const IDS = {
   host: (id) => `${idPrefix}-${id}`
 };
-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{display:block;outline:2px solid transparent;outline-offset:2px;margin-inline-start:0px}:host([layout=inline]){flex:0 1 auto}:host([layout=center]){flex:1 1 auto}.content{position:relative;margin-block-end:.125rem;box-sizing:border-box;display:flex;block-size:100%;align-items:center;justify-content:center}.scale-s{--calcite-internal-tab-title-close-padding: var(--calcite-spacing-none);--calcite-internal-tab-title-close-margin-start: var(--calcite-spacing-xxs)}.scale-s .content{padding-block:.25rem;font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-sm)}.scale-m{--calcite-internal-tab-title-close-padding: var(--calcite-spacing-xxs);--calcite-internal-tab-title-close-margin-start: var(--calcite-spacing-xxs)}.scale-m .content{padding-block:.5rem;font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-base)}.scale-l{--calcite-internal-tab-title-close-padding: var(--calcite-spacing-xxs);--calcite-internal-tab-title-close-margin-start: var(--calcite-spacing-xs)}.scale-l .content{padding-block:var(--calcite-space-sm-plus);font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md)}:host([closable]) .content{border-block-end-color:transparent}:host([layout=inline]) .content,:host([layout=center]) .content{padding-inline:.25rem}:host([layout=center]) .scale-s,:host([layout=center]) .scale-m,:host([layout=center]) .scale-l{margin-block:0px;justify-content:center;text-align:center}:host([layout=center]) .scale-s .content,:host([layout=center]) .scale-m .content,:host([layout=center]) .scale-l .content{flex:1 1 auto;flex-grow:1}.container{position:relative;box-sizing:border-box;display:flex;block-size:100%;inline-size:100%;cursor:pointer;align-content:center;justify-content:space-between;padding-inline:0px;font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-base);outline-color:transparent;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;color:var(--calcite-tab-text-color, var(--calcite-color-text-3));background-color:var(--calcite-tab-background-color, transparent)}.selected-indicator{position:absolute;display:block;block-size:.125rem;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;inset-block-end:0;inset-inline-start:0;inset-inline-end:0;inline-size:100%}:host([bordered][selected]) .container:after{position:absolute;display:block;block-size:.125rem;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;inset-block-end:-1px;inset-inline-start:0;inset-inline-end:0;inline-size:100%;content:""}:host([bordered][selected]) .container.container--bottom:after{inset-block-start:-1px}:host([bordered][selected]:focus) .container:after{background:transparent}.container--bottom .selected-indicator{inset-block-end:unset;inset-block-start:0}:host([bordered]:not([selected]):hover:not(:focus)) .selected-indicator{background-color:var(--calcite-color-foreground-2)}:host([bordered]:not([selected]):hover:not(:focus)) .container:not(.container--bottom) .selected-indicator{box-shadow:inset 0 1px var(--calcite-color-border-1)}:host([bordered]:not([selected]):hover:not(:focus)) .container.container--bottom .selected-indicator{box-shadow:inset 0 -1px var(--calcite-color-border-1)}:host([selected]:focus) .selected-indicator{block-size:4px}.calcite-tab-title--icon{position:relative;margin:0;display:inline-flex;align-self:center}.calcite-tab-title--icon svg{transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out}.container{color:var(--calcite-tab-text-color, var(--calcite-color-text-3))}.container .icon-start{color:var(--calcite-tab-icon-color-start, var(--calcite-icon-color, var(--calcite-ui-icon-color)))}.container .icon-end{color:var(--calcite-tab-icon-color-end, var(--calcite-icon-color, var(--calcite-ui-icon-color)))}.container:hover,.container:active,:host([selected]) .container{color:var(--calcite-tab-text-color-press, var(--calcite-color-text-1))}.container:hover .icon-start,.container:active .icon-start,:host([selected]) .container .icon-start{color:var(--calcite-tab-icon-color-start-press, var(--calcite-icon-color, var(--calcite-ui-icon-color)))}.container:hover .icon-end,.container:active .icon-end,:host([selected]) .container .icon-end{color:var(--calcite-tab-icon-color-end-press, var(--calcite-icon-color, var(--calcite-ui-icon-color)))}.content--has-text{padding:.25rem}.content--has-text .calcite-tab-title--icon.icon-start{margin-inline-end:var(--calcite-spacing-sm)}.content--has-text .calcite-tab-title--icon.icon-end{margin-inline-start:var(--calcite-spacing-sm)}:host([bordered]) .container{border-color:transparent;border-inline-width:var(--calcite-spacing-px);border-inline-style:solid}:host([bordered]) .container.container--bottom{border-block-start-style:solid;border-block-start-width:1px}:host([bordered]) .container.container--bottom .selected-indicator{inset-block-start:unset;inset-block-end:0}:host([bordered]) .container:not(.container--bottom){border-block-end-style:solid;border-block-end-width:1px}:host([bordered]) .container .selected-indicator{inset-block-start:0;inset-block-end:unset;inset-inline-start:-1px;inset-inline-end:0;inline-size:calc(100% + var(--calcite-spacing-base))}:host([bordered]) .container:host(:not([selected])) .container{box-shadow:0 2px 0 0 transparent}:host([bordered]) .container:host(:not([selected])):host(:hover) .container:not(.container--bottom){border-block-end-color:var(--calcite-tab-border-color, var(--calcite-color-border-1))}:host([bordered]) .container:host(:not([selected])):host(:hover):host(:not(:focus)) .selected-indicator{box-shadow:inset 0 var(--calcite-internal-tab-shadow-length) var(--calcite-tab-border-color, var(--calcite-color-border-1))}:host([bordered]) .container:host(:not([selected])):host(:hover):host(:not(:focus)) :not(.container--bottom){--calcite-internal-tab-shadow-length: 1px}:host([bordered]) .container:host(:not([selected])):host(:hover):host(:not(:focus)) .container--bottom{--calcite-internal-tab-shadow-length: -1px}:host([bordered]) .container:hover{background-color:var(--calcite-tab-background-color-hover, var(--calcite-color-foreground-2));border-block-end-color:var(--calcite-color-border-1)}:host(:hover) .selected-indicator{background-color:var(--calcite-color-border-3)}:host([selected]) .selected-indicator,:host([selected]:hover) .selected-indicator,:host(:focus) .selected-indicator,:host(:active) .selected-indicator{background-color:var(--calcite-tab-accent-color-press, var(--calcite-color-brand))}:host([closed]){display:none}:host([selected][bordered]) .container{border-inline-color:var(--calcite-tab-border-color, var(--calcite-color-border-1))}:host([selected][bordered]) .container:after{background-color:var(--calcite-tab-background-color, var(--calcite-color-foreground-1))}:host([selected][bordered]) .container:hover,:host([selected][bordered]) .container:active{background:transparent}:host(:focus) .container{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(:focus) .container:focus-within{outline-color:transparent}:host([icon-start][icon-end]) .calcite-tab-title--icon:first-child{margin-inline-end:var(--calcite-spacing-sm)}:host([layout=inline][bordered]) .scale-m .content,:host([layout=center][bordered]) .scale-m .content{padding-inline:.75rem}:host([layout=inline][bordered]) .scale-s .content,:host([layout=center][bordered]) .scale-s .content{padding-inline:.5rem}:host([layout=inline][bordered]) .scale-l .content,:host([layout=center][bordered]) .scale-l .content{padding-inline:1rem}:host([layout=inline][closable]) .scale-s .content,:host([layout=inline][closable]) .scale-m .content,:host([layout=inline][closable]) .scale-l .content{padding-inline-end:0}.close{--calcite-internal-action-spacing: var(--calcite-internal-tab-title-close-padding);--calcite-internal-action-min-height: unset;--calcite-action-text-color: var(--calcite-tab-close-icon-color);--calcite-action-text-color-press: var(--calcite-tab-close-icon-color-press);--calcite-action-background-color: var(--calcite-tab-close-icon-background-color);--calcite-action-background-color-press: var(--calcite-tab-close-icon-background-color-press);--calcite-action-background-color-hover: var(--calcite-tab-close-icon-background-color-hover);margin:auto;margin-inline:var(--calcite-spacing-sm) var(--calcite-internal-tab-title-close-margin-start)}@media(forced-colors:active){:host{outline-width:0;outline-offset:0}:host(:focus) .container{outline-color:highlight}:host([bordered][selected]) .container{border-block-end-style:none}:host([bordered][selected]) .container--bottom{border-block-start-style:none}.selected-indicator{background-color:highlight}}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) .container{pointer-events:none;opacity:.5}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}`;
+const isTabTitle = isTag("calcite-tab-title");
+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{display:block;outline:2px solid transparent;outline-offset:2px;margin-inline-start:0px}:host([layout=inline]){flex:0 1 auto}:host([layout=center]){flex:1 1 auto}.content{position:relative;margin-block-end:.125rem;box-sizing:border-box;display:flex;block-size:100%;align-items:center;justify-content:center}.scale-s{--calcite-internal-tab-title-close-padding: var(--calcite-spacing-none);--calcite-internal-tab-title-close-margin-start: var(--calcite-spacing-xxs)}.scale-s .content{padding-block:.25rem;font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-sm)}.scale-m{--calcite-internal-tab-title-close-padding: var(--calcite-spacing-xxs);--calcite-internal-tab-title-close-margin-start: var(--calcite-spacing-xxs)}.scale-m .content{padding-block:.5rem;font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-base)}.scale-l{--calcite-internal-tab-title-close-padding: var(--calcite-spacing-xxs);--calcite-internal-tab-title-close-margin-start: var(--calcite-spacing-xs)}.scale-l .content{padding-block:var(--calcite-space-sm-plus);font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md)}:host([closable]) .content{border-block-end-color:transparent}:host([layout=inline]) .content,:host([layout=center]) .content{padding-inline:.25rem}:host([layout=center]) .scale-s,:host([layout=center]) .scale-m,:host([layout=center]) .scale-l{margin-block:0px;justify-content:center;text-align:center}:host([layout=center]) .scale-s .content,:host([layout=center]) .scale-m .content,:host([layout=center]) .scale-l .content{flex:1 1 auto;flex-grow:1}.container{transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;position:relative;box-sizing:border-box;display:flex;block-size:100%;inline-size:100%;cursor:pointer;align-content:center;justify-content:space-between;padding-inline:0px;font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-base);outline-color:transparent;color:var(--calcite-tab-text-color, var(--calcite-color-text-3));background-color:var(--calcite-tab-background-color, transparent)}.selected-indicator{transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;position:absolute;display:block;block-size:.125rem;inset-block-end:0;inset-inline-start:0;inset-inline-end:0;inline-size:100%}:host([bordered][selected]) .container:after{transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;position:absolute;display:block;block-size:.125rem;inset-block-end:-1px;inset-inline-start:0;inset-inline-end:0;inline-size:100%;content:""}:host([bordered][selected]) .container.container--bottom:after{inset-block-start:-1px}:host([bordered][selected]:focus) .container:after{background:transparent}.container--bottom .selected-indicator{inset-block-end:unset;inset-block-start:0}:host([bordered]:not([selected]):hover:not(:focus)) .selected-indicator{background-color:var(--calcite-color-foreground-2)}:host([bordered]:not([selected]):hover:not(:focus)) .container:not(.container--bottom) .selected-indicator{box-shadow:inset 0 1px var(--calcite-color-border-1)}:host([bordered]:not([selected]):hover:not(:focus)) .container.container--bottom .selected-indicator{box-shadow:inset 0 -1px var(--calcite-color-border-1)}:host([selected]:focus) .selected-indicator{block-size:4px}.calcite-tab-title--icon{position:relative;margin:0;display:inline-flex;align-self:center}.calcite-tab-title--icon svg{transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out}.container{color:var(--calcite-tab-text-color, var(--calcite-color-text-3))}.container .icon-start{color:var(--calcite-tab-icon-color-start, var(--calcite-icon-color, var(--calcite-ui-icon-color)))}.container .icon-end{color:var(--calcite-tab-icon-color-end, var(--calcite-icon-color, var(--calcite-ui-icon-color)))}.container:hover,.container:active,:host([selected]) .container{color:var(--calcite-tab-text-color-press, var(--calcite-color-text-1))}.container:hover .icon-start,.container:active .icon-start,:host([selected]) .container .icon-start{color:var(--calcite-tab-icon-color-start-press, var(--calcite-icon-color, var(--calcite-ui-icon-color)))}.container:hover .icon-end,.container:active .icon-end,:host([selected]) .container .icon-end{color:var(--calcite-tab-icon-color-end-press, var(--calcite-icon-color, var(--calcite-ui-icon-color)))}.content--has-text{padding:.25rem}.content--has-text .calcite-tab-title--icon.icon-start{margin-inline-end:var(--calcite-spacing-sm)}.content--has-text .calcite-tab-title--icon.icon-end{margin-inline-start:var(--calcite-spacing-sm)}:host([bordered]) .container{border-color:transparent;border-inline-width:var(--calcite-spacing-px);border-inline-style:solid}:host([bordered]) .container.container--bottom{border-block-start-style:solid;border-block-start-width:1px}:host([bordered]) .container.container--bottom .selected-indicator{inset-block-start:unset;inset-block-end:0}:host([bordered]) .container:not(.container--bottom){border-block-end-style:solid;border-block-end-width:1px}:host([bordered]) .container .selected-indicator{inset-block-start:0;inset-block-end:unset;inset-inline-start:-1px;inset-inline-end:0;inline-size:calc(100% + var(--calcite-spacing-base))}:host([bordered]) .container:host(:not([selected])) .container{box-shadow:0 2px 0 0 transparent}:host([bordered]) .container:host(:not([selected])):host(:hover) .container:not(.container--bottom){border-block-end-color:var(--calcite-tab-border-color, var(--calcite-color-border-1))}:host([bordered]) .container:host(:not([selected])):host(:hover):host(:not(:focus)) .selected-indicator{box-shadow:inset 0 var(--calcite-internal-tab-shadow-length) var(--calcite-tab-border-color, var(--calcite-color-border-1))}:host([bordered]) .container:host(:not([selected])):host(:hover):host(:not(:focus)) :not(.container--bottom){--calcite-internal-tab-shadow-length: 1px}:host([bordered]) .container:host(:not([selected])):host(:hover):host(:not(:focus)) .container--bottom{--calcite-internal-tab-shadow-length: -1px}:host([bordered]) .container:hover{background-color:var(--calcite-tab-background-color-hover, var(--calcite-color-foreground-2));border-block-end-color:var(--calcite-color-border-1)}:host(:hover) .selected-indicator{background-color:var(--calcite-color-border-3)}:host([selected]) .selected-indicator,:host([selected]:hover) .selected-indicator,:host(:focus) .selected-indicator,:host(:active) .selected-indicator{background-color:var(--calcite-tab-accent-color-press, var(--calcite-color-brand))}:host([closed]){display:none}:host([selected][bordered]) .container{border-inline-color:var(--calcite-tab-border-color, var(--calcite-color-border-1))}:host([selected][bordered]) .container:after{background-color:var(--calcite-tab-background-color, var(--calcite-color-foreground-1))}:host([selected][bordered]) .container:hover,:host([selected][bordered]) .container:active{background:transparent}:host(:focus) .container{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(:focus) .container:focus-within{outline-color:transparent}:host([icon-start][icon-end]) .calcite-tab-title--icon:first-child{margin-inline-end:var(--calcite-spacing-sm)}:host([layout=inline][bordered]) .scale-m .content,:host([layout=center][bordered]) .scale-m .content{padding-inline:.75rem}:host([layout=inline][bordered]) .scale-s .content,:host([layout=center][bordered]) .scale-s .content{padding-inline:.5rem}:host([layout=inline][bordered]) .scale-l .content,:host([layout=center][bordered]) .scale-l .content{padding-inline:1rem}:host([layout=inline][closable]) .scale-s .content,:host([layout=inline][closable]) .scale-m .content,:host([layout=inline][closable]) .scale-l .content{padding-inline-end:0}.close{--calcite-internal-action-spacing: var(--calcite-internal-tab-title-close-padding);--calcite-internal-action-min-height: unset;--calcite-action-text-color: var(--calcite-tab-close-icon-color);--calcite-action-text-color-press: var(--calcite-tab-close-icon-color-press);--calcite-action-background-color: var(--calcite-tab-close-icon-background-color);--calcite-action-background-color-press: var(--calcite-tab-close-icon-background-color-press);--calcite-action-background-color-hover: var(--calcite-tab-close-icon-background-color-hover);margin:auto;margin-inline:var(--calcite-spacing-sm) var(--calcite-internal-tab-title-close-margin-start)}@media(forced-colors:active){:host{outline-width:0;outline-offset:0}:host(:focus) .container{outline-color:highlight}:host([bordered][selected]) .container{border-block-end-style:none}:host([bordered][selected]) .container--bottom{border-block-start-style:none}.selected-indicator{background-color:highlight}}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) .container{pointer-events:none;opacity:.5}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}`;
 class TabTitle extends LitElement {
   constructor() {
     super();
@@ -68,7 +71,7 @@ class TabTitle extends LitElement {
     this.listen("keydown", this.keyDownHandler);
   }
   static {
-    this.properties = { controls: [16, {}, { state: true }], hasText: [16, {}, { state: true }], bordered: [7, {}, { reflect: true, type: Boolean }], closable: [7, {}, { reflect: true, type: Boolean }], closed: [7, {}, { reflect: true, type: Boolean }], disabled: [7, {}, { reflect: true, type: Boolean }], iconEnd: [3, { type: String }, { reflect: true }], iconFlipRtl: [3, {}, { reflect: true }], iconStart: [3, { type: String }, { reflect: true }], layout: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }], position: 1, scale: 1, selected: [7, {}, { reflect: true, type: Boolean }], tab: [3, {}, { reflect: true }] };
+    this.properties = { controls: [16, {}, { state: true }], hasText: [16, {}, { state: true }], bordered: [7, {}, { reflect: true, type: Boolean }], closable: [7, {}, { reflect: true, type: Boolean }], closed: [7, {}, { reflect: true, type: Boolean }], disabled: [7, {}, { reflect: true, type: Boolean }], iconEnd: [3, {}, { reflect: true }], iconFlipRtl: [3, {}, { reflect: true }], iconStart: [3, {}, { reflect: true }], layout: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }], position: 1, scale: 1, selected: [7, {}, { reflect: true, type: Boolean }], tab: [3, {}, { reflect: true }] };
   }
   static {
     this.styles = styles;
@@ -87,7 +90,7 @@ class TabTitle extends LitElement {
     return this.tab ? this.tab : this.getTabIndex();
   }
   async getTabIndex() {
-    return Array.prototype.indexOf.call(nodeListToArray(this.el.parentElement.children).filter((el) => el.matches("calcite-tab-title")), this.el);
+    return Array.prototype.indexOf.call(nodeListToArray(this.el.parentElement.children).filter(isTabTitle), this.el);
   }
   _updateAriaInfo(tabIds = [], titleIds = []) {
     this.controls = tabIds[titleIds.indexOf(this.el.id)] || null;
@@ -134,7 +137,7 @@ class TabTitle extends LitElement {
     }
   }
   internalTabChangeHandler(event) {
-    const targetTabsEl = event.composedPath().find((el) => el.tagName === "CALCITE-TABS");
+    const targetTabsEl = event.composedPath().find(isTabs);
     if (targetTabsEl !== this.parentTabsEl) {
       return;
     }

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

@@ -1,51 +1,11 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { Scale, SelectionMode } from "../interfaces.js";
+import type { Scale, SelectionMode } from "../types.js";
 import type { NumberingSystem } from "../../utils/locale.js";
 import type { TableRow } from "../calcite-table-row/customElement.js";
-import type { TableInteractionMode, TableLayout, TableSelectionDisplay } from "./interfaces.js";
+import type { TableInteractionMode, TableLayout, TableSelectionDisplay } from "./types.js";
 
 /**
- * @cssproperty [--calcite-table-border-color] - Specifies the component's border color.
- * @cssproperty [--calcite-table-corner-radius] - Specifies the component's border radius.
- * @cssproperty [--calcite-table-shadow] - Specifies the component's shadow.
- * @cssproperty [--calcite-table-number-cell-background-color] - Specifies the background color of the component's `numbered` cell.
- * @cssproperty [--calcite-table-number-cell-text-color] - Specifies the text color of the component's `numbered` cell.
- * @cssproperty [--calcite-table-selection-cell-background-color] - When `selectionMode` is `"multiple"` or `"single"`, specifies the background color of cells containing selection icons.
- * @cssproperty [--calcite-table-selection-cell-background-color-selected] - When `selectionMode` is `"multiple"` or `"single"`, specifies the background color of cells containing selection icons on `selected` `calcite-table-row`s.
- * @cssproperty [--calcite-table-selection-cell-icon-color] - When `selectionMode` is `"multiple"` or `"single"`, specifies the icon color of the component's selection icon on `calcite-table-row`s where `selected` is `false`.
- * @cssproperty [--calcite-table-selection-cell-icon-color-selected] - When `selectionMode` is `"multiple"` or `"single"`, specifies the icon color of the component's selection icon on `selected` `calcite-table-row`s.
- * @cssproperty [--calcite-table-selection-chip-background-color] - When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are not `selected`, specifies the background color of the component's selection chip.
- * @cssproperty [--calcite-table-selection-chip-border-color] - When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are not `selected`, specifies the border color of the component's selection chip.
- * @cssproperty [--calcite-table-selection-chip-corner-radius] - When `selectionMode` is `"multiple"` or `"single"`, specifies the corner radius of the component's selection chip.
- * @cssproperty [--calcite-table-selection-chip-shadow] - When `selectionMode` is `"multiple"` or `"single"`, specifies the shadow of the component's selection chip.
- * @cssproperty [--calcite-table-selection-chip-text-color] - When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are not `selected`, specifies the text color of the component's selection chip.
- * @cssproperty [--calcite-table-selection-chip-background-color-selected] - When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are `selected`, specifies the background color of the component's selection chip.
- * @cssproperty [--calcite-table-selection-chip-border-color-selected] - When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are `selected`, specifies the border color of the component's selection chip.
- * @cssproperty [--calcite-table-selection-chip-text-color-selected] - When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are `selected`, specifies the text color of the component's selection chip.
- * @cssproperty [--calcite-table-selection-out-of-view-chip-background-color] - When `selectionMode` is `"multiple"` or `"single"`, `pageSize` is set,  and `calcite-table-row`s are `selected` on non-current pages, specifies the background color of the component's selection out of view chip.
- * @cssproperty [--calcite-table-selection-out-of-view-chip-border-color] - When `selectionMode` is `"multiple"` or `"single"`, `pageSize` is set,  and `calcite-table-row`s are `selected` on non-current pages, specifies the border color of the component's selection out of view chip.
- * @cssproperty [--calcite-table-selection-out-of-view-chip-corner-radius] - When `selectionMode` is `"multiple"` or `"single"`, `pageSize` is set,  and `calcite-table-row`s are `selected` on non-current pages, specifies the corner radius of the component's selection out of view chip.
- * @cssproperty [--calcite-table-selection-out-of-view-chip-icon-color] - When `selectionMode` is `"multiple"` or `"single"`, `pageSize` is set,  and `calcite-table-row`s are `selected` on non-current pages, specifies the icon color of the component's selection out of view chip.
- * @cssproperty [--calcite-table-selection-out-of-view-chip-shadow] - When `selectionMode` is `"multiple"` or `"single"`, `pageSize` is set,  and `calcite-table-row`s are `selected` on non-current pages, specifies the shadow of the component's selection out of view chip.
- * @cssproperty [--calcite-table-selection-out-of-view-chip-text-color] - When `selectionMode` is `"multiple"` or `"single"`, `pageSize` is set,  and `calcite-table-row`s are `selected` on non-current pages, specifies the text color of the component's selection out of view chip.
- * @cssproperty [--calcite-table-selection-dismiss-button-background-color-active] - When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are `selected`, specifies the background color of the component's selection dismiss chip when active.
- * @cssproperty [--calcite-table-selection-dismiss-button-background-color-hover] - When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are `selected`, specifies the background color of the component's selection dismiss chip when hovered.
- * @cssproperty [--calcite-table-selection-dismiss-button-background-color] - When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are `selected`, specifies the background color of the component's selection dismiss chip.
- * @cssproperty [--calcite-table-selection-dismiss-button-border-color-active] - When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are `selected`, specifies the border color of the component's selection dismiss chip when active.
- * @cssproperty [--calcite-table-selection-dismiss-button-border-color-hover] - When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are `selected`, specifies the border color of the component's selection dismiss chip when hovered.
- * @cssproperty [--calcite-table-selection-dismiss-button-border-color] - When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are `selected`, specifies the border color of the component's selection dismiss chip.
- * @cssproperty [--calcite-table-selection-dismiss-button-corner-radius] - When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are `selected`, specifies the corner radius of the component's selection dismiss chip.
- * @cssproperty [--calcite-table-selection-dismiss-button-shadow] - When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are `selected`, specifies the shadow of the component's selection dismiss chip.
- * @cssproperty [--calcite-table-selection-dismiss-button-text-color-active] - When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are `selected`, specifies the text color of the component's selection dismiss chip when active.
- * @cssproperty [--calcite-table-selection-dismiss-button-text-color-hover] - When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are `selected`, specifies the text color of the component's selection dismiss chip when hovered.
- * @cssproperty [--calcite-table-selection-dismiss-button-text-color] - When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are `selected`, specifies the text color of the component's selection dismiss chip.
- * @cssproperty [--calcite-table-pagination-color] - When `pageSize` is set, specifies the component's pagination item color.
- * @cssproperty [--calcite-table-pagination-color-hover] - When `pageSize` is set, specifies the component's pagination item color when hovered or selected.
- * @cssproperty [--calcite-table-pagination-color-border-hover] - When `pageSize` is set, specifies the component's pagination item bottom border color when hovered.
- * @cssproperty [--calcite-table-pagination-color-border-active] - When `pageSize` is set, specifies the component's pagination item bottom border color when selected.
- * @cssproperty [--calcite-table-pagination-background-color] - When `pageSize` is set, specifies the component's pagination item background color when active.
- * @cssproperty [--calcite-table-pagination-icon-color-background-hover] - When `pageSize` is set, specifies the component's pagination chevron item background color when hovered.
  * @slot  - A slot for adding `calcite-table-row` elements containing `calcite-table-cell` and/or `calcite-table-header` elements.
  * @slot [table-header] - A slot for adding `calcite-table-row` elements containing `calcite-table-header` elements.
  * @slot [table-footer] - A slot for adding `calcite-table-row` elements containing `calcite-table-cell` and/or `calcite-table-header` elements.
@@ -88,13 +48,17 @@ export abstract class Table extends LitElement {
    * @default "auto"
    */
   accessor layout: TableLayout;
-  /** Overrides individual strings used by the component. */
+  /**
+   * Replace localized message strings with your own strings.
+   *
+   * _**Note**: Individual message keys may change between releases._
+   */
   accessor messageOverrides: {
-      clear?: string;
-      hiddenSelected?: string;
-      page?: string;
-      row?: string;
-      selected?: string;
+      clear?: string | undefined;
+      hiddenSelected?: string | undefined;
+      page?: string | undefined;
+      row?: string | undefined;
+      selected?: string | undefined;
   };
   /**
    * When `true`, displays the position of the row in numeric form.
@@ -125,17 +89,21 @@ export abstract class Table extends LitElement {
    */
   accessor selectionDisplay: TableSelectionDisplay;
   /**
-   * Specifies the selection mode of the component, where:
-   *
-   * `"multiple"` allows any number of selections,
-   *
-   * `"single"` allows only one selection, and
+   * Specifies the selection mode of the component.
    *
-   * `"none"` does not allow any selections.
+   * - `"multiple"` allows any number of selections.
+   * - `"single"` allows only one selection.
+   * - `"none"` does not allow any selections.
    *
    * @default "none"
    */
   accessor selectionMode: Extract<"none" | "multiple" | "single", SelectionMode>;
+  /**
+   * When `true`, displays the component's `table-header` slot as sticky while the component remains in view.
+   *
+   * @default false
+   */
+  accessor stickyHeader: boolean;
   /**
    * When `true`, displays striped styling on the component's `calcite-table-rows`.
    *