@esri/calcite-components 5.2.0-next.6 → 5.2.0-next.60

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

@@ -9,34 +9,8 @@ import { s as slotChangeHasAssignedElement } from "../../chunks/dom.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { b as hexify } from "../../chunks/utils.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
-const CSS = {
-  imageContainer: "image-container",
-  container: "container",
-  selectable: "selectable",
-  nonInteractive: "non-interactive",
-  selected: "selected",
-  internalSvgContainer: "internal-svg-container",
-  internalSvgDisabled: "internal-svg-disabled",
-  internalSvgEmpty: "internal-svg-empty",
-  swatch: "swatch",
-  checker: "checker",
-  noColorSwatch: "swatch--no-color"
-};
-const SLOTS = {
-  image: "image"
-};
-const checkerSquareSize = 4;
-const CHECKER_DIMENSIONS = {
-  squareSize: checkerSquareSize,
-  size: checkerSquareSize * 2
-};
-const IDS = {
-  checker: "checker",
-  shape: "shape",
-  swatchRect: "swatch-rect",
-  swatchSolid: "swatch-solid",
-  swatchTransparent: "swatch-transparent"
-};
+import { S as SLOTS, C as CSS, I as IDS, a as CHECKER_DIMENSIONS } from "../../chunks/resources14.js";
+import { i as isActivationKey } from "../../chunks/key.js";
 const styles = css`:host{display:block;--calcite-internal-swatch-inset: var(--calcite-spacing-xxs)}:host([scale=s]) .container{--calcite-internal-swatch-size: var(--calcite-spacing-xl)}:host([scale=m]) .container{--calcite-internal-swatch-size: var(--calcite-spacing-xxl)}:host([scale=l]) .container{--calcite-internal-swatch-size: var(--calcite-spacing-xxxl)}.container{position:relative;box-sizing:border-box;justify-content:center;overflow:hidden;outline-color:transparent;font-size:var(--calcite-internal-swatch-font-size, var(--calcite-font-size));block-size:var(--calcite-internal-swatch-size, auto);inline-size:var(--calcite-internal-swatch-size, auto);min-inline-size:var(--calcite-internal-swatch-size, auto);border-radius:var(--calcite-swatch-corner-radius, 0)}.container:not(.non-interactive):hover{cursor:pointer;box-shadow:0 0 0 var(--calcite-border-width-md) var(--calcite-color-border-1)}.container.selectable{cursor:pointer}.container:not(.non-interactive):focus{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))))}.swatch{position:absolute;display:inline-flex;overflow:hidden;z-index:calc(var(--calcite-z-index) + 1);block-size:var(--calcite-internal-swatch-size, auto);inline-size:var(--calcite-internal-swatch-size, auto);min-inline-size:var(--calcite-internal-swatch-size, auto);border-radius:var(--calcite-swatch-corner-radius, 0)}:host([selected]) .swatch{inset:var(--calcite-internal-swatch-inset);block-size:calc(var(--calcite-internal-swatch-size, auto) - 2 * var(--calcite-internal-swatch-inset));inline-size:calc(var(--calcite-internal-swatch-size, auto) - 2 * var(--calcite-internal-swatch-inset));min-inline-size:calc(var(--calcite-internal-swatch-size, auto) - 2 * var(--calcite-internal-swatch-inset))}:host([selected]) .container{box-shadow:inset 0 0 0 var(--calcite-border-width-md) var(--calcite-color-text-1),inset 0 0 0 var(--calcite-border-width-lg) var(--calcite-color-foreground-1)}:host([selected]) .image-container{inset:var(--calcite-internal-swatch-inset)}.image-container{position:absolute;display:inline-flex;overflow:hidden;z-index:calc(var(--calcite-z-index) + 2);inset:var(--calcite-spacing-px);display:flex;align-items:center;justify-content:center;pointer-events:none;border-radius:var(--calcite-swatch-corner-radius, 0)}.internal-svg-container{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:calc(var(--calcite-z-index) + 2)}.swatch{overflow:hidden;block-size:inherit;inline-size:inherit}.swatch--no-color rect{fill:var(--calcite-color-foreground-1)}:host([selected]) #swatch-rect,:host([selected]) #swatch-solid,:host([selected]) #swatch-transparent{stroke-width:0}#swatch-rect,#swatch-solid,#swatch-transparent{stroke:var(--calcite-color-text-1);stroke-width:var(--calcite-border-width-md);stroke-opacity:.3;rx:var(--calcite-swatch-corner-radius)}.internal-svg-disabled{stroke:#6a6a6a;fill:#fff}.internal-svg-empty{stroke:var(--calcite-color-status-danger);stroke-width:3}.checker{fill:#cacaca}:host([hidden]){display:none}[hidden]{display:none}`;
 class Swatch extends LitElement {
   constructor() {
@@ -50,7 +24,6 @@ class Swatch extends LitElement {
     this.scale = "m";
     this.selected = false;
     this.selectionMode = "none";
-    this.calciteInternalSwatchKeyEvent = createEvent({ cancelable: false });
     this.calciteInternalSwatchSelect = createEvent({ cancelable: false });
     this.calciteInternalSyncSelectedSwatches = createEvent({ cancelable: false });
     this.calciteSwatchSelect = createEvent({ cancelable: false });
@@ -88,21 +61,9 @@ class Swatch extends LitElement {
     this.handleSelectionPropertyChange(selected);
   }
   keyDownHandler(event) {
-    if (event.target === this.el) {
-      switch (event.key) {
-        case " ":
-        case "Enter":
-          this.handleEmittingEvent();
-          event.preventDefault();
-          break;
-        case "ArrowRight":
-        case "ArrowLeft":
-        case "Home":
-        case "End":
-          this.calciteInternalSwatchKeyEvent.emit(event);
-          event.preventDefault();
-          break;
-      }
+    if (event.target === this.el && isActivationKey(event.key)) {
+      this.handleEmittingEvent();
+      event.preventDefault();
     }
   }
   handleSlotImageChange(event) {

package/dist/components/calcite-swatch-group/customElement.d.ts

@@ -1,6 +1,6 @@
 /// <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 { Swatch } from "../calcite-swatch/customElement.js";
 
 /**
@@ -29,15 +29,12 @@ export abstract class SwatchGroup extends LitElement {
   /** Specifies the component's selected items. */
   get selectedItems(): Swatch[];
   /**
-   * Specifies the selection mode of the component, where:
+   * Specifies the selection mode of the component.
    *
-   * `"multiple"` allows any number of selections,
-   *
-   * `"single"` allows only one selection,
-   *
-   * `"single-persist"` allows one selection and prevents de-selection, and
-   *
-   * `"none"` does not allow any selections.
+   * - `"multiple"` allows any number of selections.
+   * - `"single"` allows only one selection.
+   * - `"single-persist"` allows one selection and prevents de-selection.
+   * - `"none"` does not allow any selections.
    *
    * @default "none"
    */

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

@@ -3,9 +3,10 @@ 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 { d as focusElementInGroup, a as slotChangeGetAssignedElements } from "../../chunks/dom.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
+import { i as isSwatch } from "../../chunks/resources14.js";
 const CSS = {
   container: "container"
 };
@@ -22,7 +23,7 @@ class SwatchGroup extends LitElement {
     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);
@@ -41,25 +42,33 @@ class SwatchGroup extends LitElement {
       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)) {
@@ -99,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":

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

@@ -1,6 +1,6 @@
 /// <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";
 
 /**
  * @cssproperty [--calcite-switch-background-color] - Specifies the component's background color.
@@ -32,14 +32,31 @@ export abstract class Switch extends LitElement {
   accessor labelTextEnd: string | undefined;
   /** Specifies the component's start label text. */
   accessor labelTextStart: string | undefined;
-  /** Specifies the name of the component. Required to pass the component's `value` on form submission. */
+  /**
+   * 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,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();
@@ -24,15 +25,17 @@ class Switch extends LitElement {
     this.switchRef = createRef();
     this.focusSetter = useSetFocus()(this);
     this.interactiveContainer = useInteractive(this);
+    this.labelable = useLabel(this);
     this.checked = false;
     this.disabled = false;
+    this.required = false;
     this.scale = "m";
     this.calciteSwitchChange = createEvent({ cancelable: false });
     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.js

@@ -2,7 +2,7 @@
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, setAttribute, safeClassMap } from "@arcgis/lumina";
-import { n as nodeListToArray } from "../../chunks/dom.js";
+import { p as nodeListToArray } from "../../chunks/dom.js";
 import { g as guid } from "../../chunks/guid.js";
 const CSS = {
   container: "container",

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

@@ -1,6 +1,6 @@
 /// <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";
 
 /**
@@ -10,10 +10,14 @@ import type { TabTitle } from "../calcite-tab-title/customElement.js";
  * @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`.

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

@@ -2,11 +2,11 @@
 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 { calciteSize24, calciteSize32, calciteSize44 } from "@esri/calcite-design-tokens/dist/es6/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 { f as filterDirectChildren, d as focusElementInGroup, k as focusElement } from "../../chunks/dom.js";
 import { c as createObserver } from "../../chunks/observers.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 const ICON = {
@@ -33,12 +33,13 @@ class TabNav extends LitElement {
     this.resizeObserver = createObserver("resize", () => {
       this.updateScrollingState();
     });
-    this.makeFirstVisibleTabClosable = false;
     this.messages = useT9n();
     this.hasOverflowingEndTabTitle = false;
     this.hasOverflowingStartTabTitle = false;
+    this.hasVisibleTabTitles = true;
     this.bordered = false;
     this.layout = "inline";
+    this.lastTabClosable = false;
     this.position = "bottom";
     this.scale = "m";
     this.selectedTitle = null;
@@ -49,13 +50,14 @@ class TabNav extends LitElement {
     this.listen("calciteInternalTabsFocusNext", this.focusNextTabHandler);
     this.listen("calciteInternalTabsFocusFirst", this.focusFirstTabHandler);
     this.listen("calciteInternalTabsFocusLast", this.focusLastTabHandler);
+    this.listen("calciteInternalTabTitleCloseChange", this.syncVisibleTabTitlesState);
     this.listen("calciteInternalTabTitleRegister", this.updateTabTitles);
     this.listen("calciteInternalTabsActivate", this.internalActivateTabHandler);
     this.listen("calciteInternalTabsClose", this.internalCloseTabHandler);
     this.listenOn(document.body, "calciteInternalTabChange", this.globalInternalTabChangeHandler);
   }
   static {
-    this.properties = { hasOverflowingEndTabTitle: [16, {}, { state: true }], hasOverflowingStartTabTitle: [16, {}, { state: true }], selectedTabId: [16, {}, { state: true }], bordered: [7, {}, { reflect: true, type: Boolean }], layout: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }], position: 1, scale: 1, selectedTitle: [0, {}, { attribute: false }], storageId: [3, {}, { reflect: true }], syncId: [3, {}, { reflect: true }] };
+    this.properties = { hasOverflowingEndTabTitle: [16, {}, { state: true }], hasOverflowingStartTabTitle: [16, {}, { state: true }], hasVisibleTabTitles: [16, {}, { state: true }], selectedTabId: [16, {}, { state: true }], bordered: [7, {}, { reflect: true, type: Boolean }], layout: [3, {}, { reflect: true }], lastTabClosable: [5, {}, { type: Boolean }], messageOverrides: [0, {}, { attribute: false }], position: 1, scale: 1, selectedTitle: [0, {}, { attribute: false }], storageId: [3, {}, { reflect: true }], syncId: [3, {}, { reflect: true }] };
   }
   static {
     this.styles = styles;
@@ -76,7 +78,7 @@ class TabNav extends LitElement {
     }
   }
   willUpdate(changes) {
-    if (changes.has("selectedTitle") && (this.hasUpdated || this.selectedTitle !== null)) {
+    if (changes.has("selectedTitle") && (this.hasUpdated || this.selectedTitle !== null) && this.selectedTabId !== void 0) {
       this.calciteInternalTabChange.emit({
         tab: this.selectedTabId
       });
@@ -84,6 +86,9 @@ class TabNav extends LitElement {
     if (changes.has("selectedTabId")) {
       this.selectedTabIdChanged();
     }
+    if (changes.has("lastTabClosable") && this.hasUpdated) {
+      this.updateLastVisibleTabClosable();
+    }
     const { parentTabsEl } = this;
     if (parentTabsEl) {
       this.layout = parentTabsEl.layout;
@@ -93,7 +98,7 @@ class TabNav extends LitElement {
   }
   loaded() {
     this.scrollTabTitleIntoView(this.selectedTitle, "instant");
-    if (this.tabTitles.length && this.tabTitles.every((title) => !title.selected) && !this.selectedTabId) {
+    if (this.tabTitles.length && this.tabTitles.every((title) => !title.selected) && this.selectedTabId === void 0) {
       this.tabTitles[0].getTabIdentifier().then((tab) => {
         this.calciteInternalTabChange.emit({
           tab
@@ -110,7 +115,7 @@ class TabNav extends LitElement {
   }
   get scrollerButtonWidth() {
     const { scale } = this;
-    return parseInt(scale === "s" ? calciteSize24 : scale === "m" ? calciteSize32 : calciteSize44);
+    return parseInt(scale === "s" ? calciteSize24 : scale === "m" ? calciteSize32 : calciteSize44, 10);
   }
   get tabTitles() {
     return filterDirectChildren(this.el, "calcite-tab-title");
@@ -169,6 +174,7 @@ class TabNav extends LitElement {
       this.selectedTabId = event.detail;
       this.selectedTitle = await this.getTabTitleById(this.selectedTabId);
     }
+    this.syncVisibleTabTitlesState();
   }
   globalInternalTabChangeHandler(event) {
     if (this.syncId && event.target !== this.el && event.target.syncId === this.syncId && this.selectedTabId !== event.detail.tab) {
@@ -178,7 +184,10 @@ class TabNav extends LitElement {
   }
   async selectedTabIdChanged() {
     await this.componentOnReady();
-    if (localStorage && this.storageId && this.selectedTabId !== void 0 && this.selectedTabId !== null) {
+    if (this.selectedTabId === void 0) {
+      return;
+    }
+    if (localStorage && this.storageId) {
       localStorage.setItem(`calcite-tab-nav-${this.storageId}`, JSON.stringify(this.selectedTabId));
     }
     this.calciteInternalTabChange.emit({
@@ -209,13 +218,33 @@ class TabNav extends LitElement {
     tabTitles.forEach((child) => {
       this.intersectionObserver?.observe(child);
     });
+    this.syncVisibleTabTitlesState();
+  }
+  syncVisibleTabTitlesState() {
+    this.updateLastVisibleTabClosable();
+    this.hasVisibleTabTitles = this.getVisibleTabTitlesIndices(this.tabTitles).length > 0;
+    this.calciteInternalTabNavSlotChange.emit([...this.tabTitles]);
+  }
+  updateLastVisibleTabClosable() {
+    const { tabTitles } = this;
     const visibleTabTitlesIndices = this.getVisibleTabTitlesIndices(tabTitles);
     const totalVisibleTabTitles = visibleTabTitlesIndices.length;
-    if (totalVisibleTabTitles > 1 && this.makeFirstVisibleTabClosable) {
-      tabTitles[visibleTabTitlesIndices[0]].closable = true;
-      this.makeFirstVisibleTabClosable = false;
+    if (totalVisibleTabTitles === 0) {
+      return;
+    }
+    const firstVisibleTabTitle = tabTitles[visibleTabTitlesIndices[0]];
+    const shouldDisableCloseButton = !this.lastTabClosable && totalVisibleTabTitles === 1;
+    if (shouldDisableCloseButton) {
+      if (firstVisibleTabTitle.closable) {
+        this.firstVisibleTabMadeNonClosable = firstVisibleTabTitle;
+        firstVisibleTabTitle.closable = false;
+      }
+      return;
+    }
+    if (this.firstVisibleTabMadeNonClosable && !this.firstVisibleTabMadeNonClosable.closed) {
+      this.firstVisibleTabMadeNonClosable.closable = true;
     }
-    this.calciteInternalTabNavSlotChange.emit(tabTitles);
+    this.firstVisibleTabMadeNonClosable = void 0;
   }
   setTabTitleContainerEl(el) {
     this.tabTitleContainerEl = el;
@@ -334,26 +363,35 @@ class TabNav extends LitElement {
   }
   handleTabTitleClose(closedTabTitleEl) {
     const { tabTitles } = this;
+    const visibleTabTitles = tabTitles.filter((tabTitle) => !tabTitle.closed);
+    const enabledVisibleTabTitles = this.enabledTabTitles;
+    const totalVisibleTabTitles = visibleTabTitles.length;
     const selectionModified = closedTabTitleEl.selected;
-    const visibleTabTitlesIndices = this.getVisibleTabTitlesIndices(tabTitles);
-    const totalVisibleTabTitles = visibleTabTitlesIndices.length;
-    if (totalVisibleTabTitles === 1 && tabTitles[visibleTabTitlesIndices[0]].closable) {
-      this.makeFirstVisibleTabClosable = true;
-      tabTitles[visibleTabTitlesIndices[0]].closable = false;
-      this.selectedTabId = visibleTabTitlesIndices[0];
-      if (selectionModified) {
-        tabTitles[visibleTabTitlesIndices[0]].activateTab();
-      }
-    } else if (totalVisibleTabTitles > 1) {
+    this.hasVisibleTabTitles = totalVisibleTabTitles > 0;
+    this.calciteInternalTabNavSlotChange.emit([...tabTitles]);
+    if (totalVisibleTabTitles === 0) {
+      this.selectedTitle = null;
+      this.selectedTabId = void 0;
+      return;
+    }
+    if (selectionModified) {
       const closedTabTitleIndex = tabTitles.findIndex((el) => el === closedTabTitleEl);
-      const nextTabTitleIndex = visibleTabTitlesIndices.find((value) => value > closedTabTitleIndex);
-      if (this.selectedTabId === closedTabTitleIndex) {
-        this.selectedTabId = nextTabTitleIndex ? nextTabTitleIndex : totalVisibleTabTitles - 1;
-        tabTitles[this.selectedTabId].activateTab();
+      const nextVisibleTabTitle = enabledVisibleTabTitles.find((tabTitle) => tabTitles.indexOf(tabTitle) > closedTabTitleIndex) || enabledVisibleTabTitles.at(-1);
+      if (!nextVisibleTabTitle) {
+        this.selectedTitle = null;
+        this.selectedTabId = void 0;
+        this.updateLastVisibleTabClosable();
+        return;
       }
+      nextVisibleTabTitle.activateTab();
     }
+    this.updateLastVisibleTabClosable();
     requestAnimationFrame(() => {
-      focusElement(tabTitles[this.selectedTabId]);
+      const selectedTitle = this.selectedTitle;
+      if (!selectedTitle) {
+        return;
+      }
+      focusElement(selectedTitle);
     });
   }
   render() {
@@ -363,7 +401,7 @@ class TabNav extends LitElement {
       [CSS.scale(this.scale)]: true,
       [CSS.position(this.position)]: true,
       [CSS_UTILITY.rtl]: this.effectiveDir === "rtl"
-    })}><div class=${safeClassMap({
+    })} .hidden=${!this.hasVisibleTabTitles}><div class=${safeClassMap({
       [CSS.tabTitleSlotWrapper]: true
     })} @scroll=${this.onTabTitleScroll} @wheel=${this.onTabTitleWheel} ${ref(this.setTabTitleContainerEl)}><slot @slotchange=${this.onSlotChange}></slot></div><div class=${safeClassMap(CSS.scrollButtonContainer)} .hidden=${!this.hasOverflowingEndTabTitle && !this.hasOverflowingStartTabTitle}>${this.renderScrollButton("start")}${this.renderScrollButton("end")}</div></div>`;
   }

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

@@ -1,8 +1,8 @@
 /// <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.
@@ -49,8 +49,12 @@ 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; };
+  /**
+   * Replace localized message strings with your own strings.
+   *
+   * _**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`, defaults to `top`.
    *

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

@@ -5,7 +5,7 @@ import { css, isServer, html } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, createEvent, safeClassMap, setAttribute } from "@arcgis/lumina";
 import { useDirection } from "@arcgis/lumina/controllers";
-import { n as nodeListToArray } from "../../chunks/dom.js";
+import { p as nodeListToArray } from "../../chunks/dom.js";
 import { t as toAriaBoolean } from "../../chunks/aria.js";
 import { g as guid } from "../../chunks/guid.js";
 import { c as createObserver, u as updateRefObserver } from "../../chunks/observers.js";
@@ -54,6 +54,7 @@ class TabTitle extends LitElement {
     this.selected = false;
     this.calciteInternalTabIconChanged = createEvent({ cancelable: false });
     this.calciteInternalTabTitleRegister = createEvent({ cancelable: false });
+    this.calciteInternalTabTitleCloseChange = createEvent({ cancelable: false });
     this.calciteInternalTabsActivate = createEvent({ cancelable: false });
     this.calciteInternalTabsClose = createEvent({ cancelable: false });
     this.calciteInternalTabsFocusFirst = createEvent({ cancelable: false });
@@ -67,7 +68,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;
@@ -108,6 +109,9 @@ class TabTitle extends LitElement {
     if (changes.has("selected") && (this.hasUpdated || this.selected !== false)) {
       this.selectedHandler();
     }
+    if (changes.has("closed") && this.hasUpdated) {
+      this.calciteInternalTabTitleCloseChange.emit();
+    }
     if (this.parentTabsEl) {
       this.layout = this.parentTabsEl.layout;
       this.bordered = this.parentTabsEl.bordered;