@esri/calcite-components 5.2.0-next.1 → 5.2.0-next.100

package/dist/components/calcite-swatch-group/customElement.js

@@ -3,26 +3,27 @@ import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
-import { f as focusElementInGroup, a as slotChangeGetAssignedElements } from "../../chunks/dom.js";
-import { u as useSetFocus } from "../../chunks/useSetFocus.js";
+import { e as focusElementInGroup, b as slotChangeGetAssignedElements } from "../../chunks/dom.js";
+import { u as useFocusable } from "../../chunks/useFocusable.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
+import { i as isSwatch } from "../../chunks/resources27.js";
 const CSS = {
   container: "container"
 };
-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:flex}.container{display:flex;flex-wrap:wrap;gap:var(--calcite-swatch-group-space, var(--calcite-spacing-sm))}:host([scale=s]) .container{gap:var(--calcite-swatch-group-space, var(--calcite-spacing-xs))}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}`;
+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:flex}.container{display:flex;flex-wrap:wrap;gap:var(--calcite-swatch-group-space, var(--calcite-theme-space-sm, var(--calcite-spacing-sm)))}:host([scale=s]) .container{gap:var(--calcite-swatch-group-space, var(--calcite-theme-space-xs, var(--calcite-spacing-xs)))}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}`;
 class SwatchGroup extends LitElement {
   constructor() {
     super();
     this.items = [];
     this.slotRef = createRef();
-    this.focusSetter = useSetFocus()(this);
+    this.focusSetter = useFocusable()(this);
     this.interactiveContainer = useInteractive(this);
     this.disabled = false;
     this.scale = "m";
     this.selectedItems = [];
     this.selectionMode = "none";
     this.calciteSwatchGroupSelect = createEvent({ cancelable: false });
-    this.listen("calciteInternalSwatchKeyEvent", this.calciteInternalSwatchKeyEventListener);
+    this.listen("keydown", this.keyDownHandler);
     this.listen("calciteSwatchSelect", this.calciteSwatchSelectListener);
     this.listen("calciteInternalSwatchSelect", this.calciteInternalSwatchSelectListener);
     this.listen("calciteInternalSyncSelectedSwatches", this.calciteInternalSyncSelectedSwatches);
@@ -37,29 +38,37 @@ class SwatchGroup extends LitElement {
     return this.focusSetter(() => this.el, options);
   }
   willUpdate(changes) {
-    if (changes.has("selectionMode") && (this.hasUpdated || this.selectionMode !== "none")) {
+    if ((changes.has("scale") || changes.has("selectionMode")) && (this.hasUpdated || this.selectionMode !== "none")) {
       this.updateItems();
     }
   }
-  calciteInternalSwatchKeyEventListener(event) {
-    if (event.composedPath().includes(this.el)) {
-      const interactiveItems = this.items?.filter((el) => !el.disabled);
-      switch (event.detail.key) {
-        case "ArrowRight":
-          focusElementInGroup(interactiveItems, event.detail.target, "next");
-          break;
-        case "ArrowLeft":
-          focusElementInGroup(interactiveItems, event.detail.target, "previous");
-          break;
-        case "Home":
-          focusElementInGroup(interactiveItems, event.detail.target, "first");
-          break;
-        case "End":
-          focusElementInGroup(interactiveItems, event.detail.target, "last");
-          break;
-      }
+  keyDownHandler(event) {
+    const target = event.composedPath().find(isSwatch);
+    if (event.defaultPrevented || !target || !this.el.contains(target)) {
+      return;
+    }
+    const interactiveItems = this.items.filter((el) => !el.disabled);
+    if (!interactiveItems.includes(target)) {
+      return;
+    }
+    switch (event.key) {
+      case "ArrowRight":
+        focusElementInGroup(interactiveItems, target, "next");
+        event.preventDefault();
+        break;
+      case "ArrowLeft":
+        focusElementInGroup(interactiveItems, target, "previous");
+        event.preventDefault();
+        break;
+      case "Home":
+        focusElementInGroup(interactiveItems, target, "first");
+        event.preventDefault();
+        break;
+      case "End":
+        focusElementInGroup(interactiveItems, target, "last");
+        event.preventDefault();
+        break;
     }
-    event.stopPropagation();
   }
   calciteSwatchSelectListener(event) {
     if (event.composedPath().includes(this.el)) {
@@ -82,13 +91,15 @@ class SwatchGroup extends LitElement {
     }
     event.stopPropagation();
   }
-  updateItems(event) {
-    const itemsFromSlot = this.slotRef.value?.assignedElements({ flatten: true }).filter((el) => el?.matches("calcite-swatch"));
-    this.items = !event ? itemsFromSlot : slotChangeGetAssignedElements(event);
-    if (this.items?.length < 1) {
+  handleSlotChange(event) {
+    this.updateItems(slotChangeGetAssignedElements(event, "calcite-swatch"));
+  }
+  updateItems(items = this.items) {
+    this.items = items;
+    if (this.items.length < 1) {
       return;
     }
-    this.items?.forEach((el) => {
+    this.items.forEach((el) => {
       el.interactive = true;
       el.scale = this.scale;
       el.selectionMode = this.selectionMode;
@@ -97,11 +108,11 @@ class SwatchGroup extends LitElement {
     this.setSelectedItems(false);
   }
   updateSelectedItems() {
-    this.selectedItems = this.items?.filter((el) => el.selected);
+    this.selectedItems = this.items.filter((el) => el.selected);
   }
   setSelectedItems(emit, elToMatch) {
     if (elToMatch) {
-      this.items?.forEach((el) => {
+      this.items.forEach((el) => {
         const matchingEl = elToMatch === el;
         switch (this.selectionMode) {
           case "multiple":
@@ -126,7 +137,7 @@ class SwatchGroup extends LitElement {
   render() {
     const role = this.selectionMode === "none" || this.selectionMode === "multiple" ? "group" : "radiogroup";
     const { disabled } = this;
-    return this.interactiveContainer({ disabled, children: html`<div .ariaLabel=${this.label} class=${safeClassMap(CSS.container)} .role=${role}><slot @slotchange=${this.updateItems} ${ref(this.slotRef)}></slot></div>` });
+    return this.interactiveContainer({ disabled, children: html`<div .ariaLabel=${this.label} class=${safeClassMap(CSS.container)} .role=${role}><slot @slotchange=${this.handleSlotChange} ${ref(this.slotRef)}></slot></div>` });
   }
 }
 customElement("calcite-swatch-group", SwatchGroup);

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

@@ -1,16 +1,38 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { Scale } from "../interfaces.js";
+import type { Scale } from "../types.js";
+
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the component's background color. */
+  "--calcite-switch-background-color": "*";
+  /** Specifies the component's background color when hovered or pressed. */
+  "--calcite-switch-background-color-hover": "*";
+  /**
+   * Specifies the component's border color.
+   *
+   * @deprecated in v3.2.0, removal target v6.0.0 - No longer necessary.
+   */
+  "--calcite-switch-border-color": "*";
+  /** Specifies the component's corner radius. */
+  "--calcite-switch-corner-radius": "*";
+  /** Specifies the handle's background color. */
+  "--calcite-switch-handle-background-color": "*";
+  /**
+   * Specifies the handle's border color.
+   *
+   * @deprecated in v3.2.0, removal target v6.0.0 - No longer necessary.
+   */
+  "--calcite-switch-handle-border-color": "*";
+  /**
+   * Specifies the handle's shadow.
+   *
+   * @deprecated in v3.2.0, removal target v6.0.0 - No longer necessary.
+   */
+  "--calcite-switch-handle-shadow": "*";
+}
+}
 
-/**
- * @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] in v3.2.0, removal target v6.0.0 - 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] in v3.2.0, removal target v6.0.0 - No longer necessary. Specifies the handle's border color.
- * @cssproperty [--calcite-switch-handle-shadow] - [Deprecated] in v3.2.0, removal target v6.0.0 - No longer necessary. Specifies the handle's shadow.
- */
 export abstract class Switch extends LitElement {
   /**
    * When `true`, the component is checked.
@@ -24,26 +46,39 @@ export abstract class Switch extends LitElement {
    * @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 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 | undefined;
   /** Specifies an accessible label for the component. */
-  accessor label: string;
+  accessor label: string | undefined;
   /** Specifies the component's end label text. */
-  accessor labelTextEnd: string;
+  accessor labelTextEnd: string | undefined;
   /** 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;
+  accessor labelTextStart: string | undefined;
+  /**
+   * Specifies the name of the component.
+   *
+   * Required to pass the component's `value` on form submission.
+   */
+  accessor name: string | undefined;
+  /**
+   * When `true` and the component resides in a form,
+   * the component must have a value in order for the form to submit.
+   *
+   * @default false
+   */
+  accessor required: boolean;
   /**
    * Specifies the component's size.
    *
    * @default "m"
    */
   accessor scale: Scale;
+  /**
+   * The component's current validation state.
+   *
+   * @see [MDN - ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)
+   */
+  get validity(): ValidityState;
   /** The component's value. */
   accessor value: any;
   /**

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

@@ -4,9 +4,10 @@ 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 useFocusable } from "../../chunks/useFocusable.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
 import { u as useForm } from "../../chunks/useForm.js";
 const CSS = {
@@ -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-theme-space-base, var(--calcite-spacing-base));inset-inline:var(--calcite-theme-space-base, var(--calcite-spacing-base)) auto;background-color:var(--calcite-switch-handle-background-color, var(--calcite-theme-color-surface-2, 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-theme-space-base, 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){.container:focus-visible{outline:2px solid transparent;outline-offset:2px}.track,.handle{outline:2px solid transparent;outline-offset:2px}:host([checked]) .track{background-color:canvasText}:host([checked]) .handle{outline:none}:host([checked]):host(:hover:not([disabled])) .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-theme-space-base, 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-theme-space-2xs, var(--calcite-spacing-xxs))}:host([scale=s]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-theme-space-sm, var(--calcite-spacing-sm))}:host([scale=s]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-theme-space-sm, 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-theme-space-sm, var(--calcite-spacing-sm))}:host([scale=m]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-theme-space-sm, var(--calcite-spacing-sm))}:host([scale=m]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-theme-space-sm, 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-theme-space-sm, var(--calcite-spacing-sm))}:host([scale=l]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-theme-space-md, var(--calcite-spacing-md))}:host([scale=l]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-theme-space-md, 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();
@@ -22,17 +23,19 @@ class Switch extends LitElement {
       inputType: "checkbox"
     })(this);
     this.switchRef = createRef();
-    this.focusSetter = useSetFocus()(this);
+    this.focusSetter = useFocusable()(this);
     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,20 @@
 /// <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.
- */
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the vertical space between the component's content in the `default` slot. */
+  "--calcite-tab-content-space-y": "*";
+  /**
+   * Specifies the block padding of the component's content in the `default` slot.
+   *
+   * @deprecated in v3.2.0, removal target v6.0.0 - Use `--calcite-tab-content-space-y` instead.
+   */
+  "--calcite-tab-content-block-padding": "*";
+}
+}
+
+/** @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,7 +14,8 @@ const CSS = {
 const IDS = {
   tabTitleId: (id) => `calcite-tab-title-${id}`
 };
-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}`;
+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{outline-color:transparent;display:none;block-size:100%;inline-size:100%;overflow:auto}.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(-1 * var(--calcite-space-base) * (1 - 2 * clamp(0,var(--calcite-offset-invert-focus),1)))}:host([hidden]){display:none}[hidden]{display:none}`;
 class Tab extends LitElement {
   constructor() {
     super();
@@ -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,35 @@
 /// <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.
- */
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the component's background color. */
+  "--calcite-tab-background-color": "*";
+  /** When `calcite-tabs` is `bordered`, specifies the component's border color. */
+  "--calcite-tab-border-color": "*";
+  /** Specifies the component's `iconStart`, `iconEnd`, and text color. */
+  "--calcite-tab-text-color": "*";
+}
+}
+
+/** @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`. */