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

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

@@ -1,33 +1,49 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { Alignment } from "../interfaces.js";
+import type { Alignment } from "../types.js";
 
-/**
- * @cssproperty [--calcite-table-cell-background] - [Deprecated] in v3.3.0, removal target v6.0.0 - Use `--calcite-table-cell-background-color` instead. Specifies the component's background color.
- * @cssproperty [--calcite-table-cell-background-color] - Specifies the component's background color.
- * @cssproperty [--calcite-table-cell-border-color] - Specifies the component's border color.
- * @cssproperty [--calcite-table-cell-text-color] - Specifies the component's text color.
- * @slot  - A slot for adding content, usually text content.
- */
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /**
+   * Specifies the component's background color.
+   *
+   * @deprecated in v3.3.0, removal target v6.0.0 - Use `--calcite-table-cell-background-color` instead.
+   */
+  "--calcite-table-cell-background": "*";
+  /** Specifies the component's background color. */
+  "--calcite-table-cell-background-color": "*";
+  /** Specifies the component's border color. */
+  "--calcite-table-cell-border-color": "*";
+  /** Specifies the component's text color. */
+  "--calcite-table-cell-text-color": "*";
+}
+}
+
+/** @slot  - A slot for adding content, usually text content. */
 export abstract class TableCell extends LitElement {
   /**
-   * Specifies the horizontal alignment of content within the component, where:
-   * `"start"` positions content at the start of the component,
-   * `"center"` positions content in the middle of the component, and
-   * `"end"` positions content at the end of the component.
+   * Specifies the horizontal alignment of content within the component.
+   *
+   * - `"start"` positions content at the start of the component.
+   * - `"center"` positions content in the middle of the component.
+   * - `"end"` positions content at the end of the component.
    *
    * @default "start"
    */
   accessor alignment: Alignment;
   /** Specifies the number of columns the component should span. */
   accessor colSpan: number | undefined;
-  /** 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: {
-      keyboardDeselect?: string;
-      keyboardSelect?: string;
-      row?: string;
-      selected?: string;
-      unselected?: string;
+      keyboardDeselect?: string | undefined;
+      keyboardSelect?: string | undefined;
+      row?: string | undefined;
+      selected?: string | undefined;
+      unselected?: string | undefined;
   };
   /** Specifies the number of rows the component should span. */
   accessor rowSpan: number | undefined;

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

@@ -5,26 +5,18 @@ import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, safeClassMap } from "@arcgis/lumina";
 import { useDirection } from "@arcgis/lumina/controllers";
 import { u as useT9n } from "../../chunks/useT9n.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";
-const CSS = {
-  contentCell: "content-cell",
-  numberCell: "number-cell",
-  footerCell: "footer-cell",
-  selectionCell: "selection-cell",
-  selectedCell: "selected-cell",
-  assistiveText: "assistive-text",
-  lastCell: "last-cell",
-  staticCell: "static-cell"
-};
-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:contents}:host([alignment=center]) td:not(.selection-cell):not(.number-cell){text-align:center}:host([alignment=end]) td:not(.selection-cell):not(.number-cell){text-align:end}.assistive-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}td{white-space:normal;text-align:start;vertical-align:middle;color:var(--calcite-table-cell-text-color, var(--calcite-color-text-1));background-color:var(--calcite-internal-table-cell-background-color, var(--calcite-table-cell-background-color, transparent));font-size:var(--calcite-internal-table-cell-font-size);border-inline-end:var(--calcite-border-width-sm) solid var(--calcite-table-cell-border-color, var(--calcite-table-border-color, var(--calcite-color-border-2)));padding:var(--calcite-internal-table-cell-padding)}td:not(.static-cell){outline-color:transparent}td:not(.static-cell):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))))}td.start.content-cell{vertical-align:top}td.end.content-cell{vertical-align:bottom}td.last-cell{border-inline-end:0}.footer-cell{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-table-cell-text-color, var(--calcite-color-text-1));background-color:var(--calcite-table-cell-background-color, var(--calcite-table-cell-background, var(--calcite-color-background)));border-block-start:var(--calcite-border-width-sm) solid var(--calcite-table-cell-border-color, var(--calcite-table-border-color, var(--calcite-color-border-2)))}.number-cell,.selection-cell{text-align:center;border-inline-end:var(--calcite-border-width-sm) solid var(--calcite-table-cell-border-color, var(--calcite-table-border-color, var(--calcite-color-border-2)));inline-size:2rem;min-inline-size:2rem}.number-cell{color:var(--calcite-table-number-cell-text-color, var(--calcite-color-text-1));background-color:var(--calcite-table-number-cell-background-color, var(--calcite-color-foreground-2))}.number-cell.footer-cell{background-color:var(--calcite-table-number-cell-background-color, var(--calcite-table-cell-background-color, var(--calcite-color-background)))}.selection-cell{color:var(--calcite-table-selection-cell-icon-color, var(--calcite-color-text-3))}.selection-cell:not(.footer-cell){cursor:pointer;background-color:var(--calcite-table-selection-cell-background-color, var(--calcite-table-cell-background-color, transparent))}.selection-cell.footer-cell{background-color:var(--calcite-table-selection-cell-background-color, var(--calcite-table-cell-background-color, var(--calcite-color-background)))}.selected-cell:not(.number-cell):not(.footer-cell){background-color:var(--calcite-table-cell-background-color-selected, var(--calcite-table-row-background-color-selected, var(--calcite-color-surface-highlight)))}.selection-cell.selected-cell{box-shadow:inset 0 0 0 0 var(--calcite-table-row-accent-color-selected, var(--calcite-color-brand));color:var(--calcite-table-selection-cell-icon-color-selected, var(--calcite-color-brand))}.calcite--rtl.selection-cell.selected-cell{box-shadow:inset -.25rem 0 0 0 var(--calcite-table-row-accent-color-selected, var(--calcite-color-brand))}.selection-cell{vertical-align:middle}.selection-cell ::slotted(calcite-icon){pointer-events:none;margin-block-start:.25rem}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}`;
+import { C as CSS } from "../../chunks/resources29.js";
+import { s as styles$1 } from "../../chunks/screen-reader.js";
+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:contents}:host([alignment=center]) td:not(.selection-cell):not(.number-cell){text-align:center}:host([alignment=end]) td:not(.selection-cell):not(.number-cell){text-align:end}td{text-align:start;vertical-align:middle;white-space:normal;color:var(--calcite-table-cell-text-color, var(--calcite-color-text-1));background-color:var(--calcite-internal-table-cell-background-color, var(--calcite-table-cell-background-color, transparent));font-size:var(--calcite-internal-table-cell-font-size);border-block-end:var(--calcite-internal-table-row-border-block-end-width, 0) solid var(--calcite-internal-table-row-border-block-end-color, transparent);border-inline-end:var(--calcite-border-width-sm) solid var(--calcite-table-cell-border-color, var(--calcite-table-border-color, var(--calcite-color-border-2)));padding:var(--calcite-internal-table-cell-padding)}td:not(.static-cell){outline-color:transparent}td:not(.static-cell):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)))}td.start.content-cell{vertical-align:top}td.end.content-cell{vertical-align:bottom}td.last-cell{border-inline-end:0}:host([reaches-body-end]) td{border-block-end:0}.footer-cell{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-table-cell-text-color, var(--calcite-color-text-1));background-color:var(--calcite-table-cell-background-color, var(--calcite-table-cell-background, var(--calcite-theme-color-surface-1, var(--calcite-color-background))));border-block-end:0;border-block-start:var(--calcite-border-width-sm) solid var(--calcite-table-cell-border-color, var(--calcite-table-border-color, var(--calcite-color-border-2)))}.number-cell,.selection-cell{text-align:center;border-inline-end:var(--calcite-border-width-sm) solid var(--calcite-table-cell-border-color, var(--calcite-table-border-color, var(--calcite-color-border-2)));inline-size:2rem;min-inline-size:2rem}.number-cell{color:var(--calcite-table-number-cell-text-color, var(--calcite-color-text-1));background-color:var(--calcite-table-number-cell-background-color, var(--calcite-theme-color-surface-3, var(--calcite-color-foreground-2)))}.number-cell.footer-cell{background-color:var(--calcite-table-number-cell-background-color, var(--calcite-table-cell-background-color, var(--calcite-theme-color-surface-1, var(--calcite-color-background))))}.selection-cell{color:var(--calcite-table-selection-cell-icon-color, var(--calcite-color-text-3))}.selection-cell:not(.footer-cell){cursor:pointer;background-color:var(--calcite-table-selection-cell-background-color, var(--calcite-table-cell-background-color, transparent))}.selection-cell.footer-cell{background-color:var(--calcite-table-selection-cell-background-color, var(--calcite-table-cell-background-color, var(--calcite-theme-color-surface-1, var(--calcite-color-background))))}.selected-cell:not(.number-cell):not(.footer-cell){background-color:var(--calcite-table-cell-background-color-selected, var(--calcite-table-row-background-color-selected, var(--calcite-color-surface-highlight)))}.selection-cell.selected-cell{box-shadow:inset 0 0 0 0 var(--calcite-table-row-accent-color-selected, var(--calcite-color-brand));color:var(--calcite-table-selection-cell-icon-color-selected, var(--calcite-color-brand))}.calcite--rtl.selection-cell.selected-cell{box-shadow:inset -.25rem 0 0 0 var(--calcite-table-row-accent-color-selected, var(--calcite-color-brand))}.selection-cell{vertical-align:middle}.selection-cell ::slotted(calcite-icon){pointer-events:none;margin-block-start:var(--calcite-space-2xs)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}`;
 class TableCell extends LitElement {
   constructor() {
     super(...arguments);
     this.containerRef = createRef();
     this.direction = useDirection();
     this.messages = useT9n();
-    this.focusSetter = useSetFocus()(this);
+    this.focusSetter = useFocusable()(this);
     this.interactiveContainer = useInteractive(this);
     this.contentsText = "";
     this.focused = false;
@@ -34,6 +26,7 @@ class TableCell extends LitElement {
     this.interactionMode = "interactive";
     this.lastCell = false;
     this.numberCell = false;
+    this.reachesBodyEnd = false;
     this.parentRowAlignment = "start";
     this.parentRowIsSelected = false;
     this.readCellContentsToAT = false;
@@ -41,10 +34,10 @@ class TableCell extends LitElement {
     this.selectionCell = false;
   }
   static {
-    this.properties = { contentsText: [16, {}, { state: true }], focused: [16, {}, { state: true }], selectionText: [16, {}, { state: true }], alignment: [3, {}, { reflect: true }], colSpan: [11, {}, { reflect: true, type: Number }], disabled: [5, {}, { type: Boolean }], interactionMode: 1, lastCell: [5, {}, { type: Boolean }], messageOverrides: [0, {}, { attribute: false }], numberCell: [5, {}, { type: Boolean }], parentRowAlignment: 1, parentRowIsSelected: [5, {}, { type: Boolean }], parentRowPositionLocalized: 1, parentRowType: 1, positionInRow: [9, {}, { type: Number }], readCellContentsToAT: [5, {}, { type: Boolean }], rowSpan: [11, {}, { reflect: true, type: Number }], scale: 1, selectionCell: [5, {}, { type: Boolean }] };
+    this.properties = { contentsText: [16, {}, { state: true }], focused: [16, {}, { state: true }], selectionText: [16, {}, { state: true }], alignment: [3, {}, { reflect: true }], colSpan: [11, {}, { reflect: true, type: Number }], disabled: [5, {}, { type: Boolean }], interactionMode: 1, lastCell: [5, {}, { type: Boolean }], messageOverrides: [0, {}, { attribute: false }], numberCell: [5, {}, { type: Boolean }], reachesBodyEnd: [7, {}, { reflect: true, type: Boolean }], parentRowAlignment: 1, parentRowIsSelected: [5, {}, { type: Boolean }], parentRowPositionLocalized: 1, parentRowType: 1, positionInRow: [9, {}, { type: Number }], readCellContentsToAT: [5, {}, { type: Boolean }], rowSpan: [11, {}, { reflect: true, type: Number }], scale: 1, selectionCell: [5, {}, { type: Boolean }] };
   }
   static {
-    this.styles = styles;
+    this.styles = [styles, styles$1];
   }
   async setFocus(options) {
     return this.focusSetter(() => this.containerRef.value, options);
@@ -85,7 +78,7 @@ class TableCell extends LitElement {
       [CSS_UTILITY.rtl]: dir === "rtl",
       [CSS.staticCell]: staticCell,
       [this.parentRowAlignment]: this.parentRowAlignment === "start" || this.parentRowAlignment === "end"
-    })} colSpan=${this.colSpan ?? nothing} @blur=${this.onContainerBlur} @focus=${this.onContainerFocus} .role=${this.interactionMode === "interactive" ? "gridcell" : "cell"} rowSpan=${this.rowSpan ?? nothing} .tabIndex=${staticCell ? -1 : 0} ${ref(this.containerRef)}>${(this.selectionCell || this.readCellContentsToAT) && html`<span .ariaLive=${this.focused ? "polite" : "off"} class=${safeClassMap(CSS.assistiveText)}>${this.selectionCell && this.selectionText || ""}${this.readCellContentsToAT && !this.selectionCell && this.contentsText || ""}</span>` || ""}<slot @slotchange=${this.updateScreenReaderContentsText}></slot></td>` });
+    })} colSpan=${this.colSpan ?? nothing} @blur=${this.onContainerBlur} @focus=${this.onContainerFocus} .role=${this.interactionMode === "interactive" ? "gridcell" : "cell"} rowSpan=${this.rowSpan ?? nothing} .tabIndex=${staticCell ? -1 : 0} ${ref(this.containerRef)}>${(this.selectionCell || this.readCellContentsToAT) && html`<span .ariaLive=${this.focused ? "polite" : "off"} class=${safeClassMap(CSS_UTILITY.screenReaderText)}>${this.selectionCell && this.selectionText || ""}${this.readCellContentsToAT && !this.selectionCell && this.contentsText || ""}</span>` || ""}<slot @slotchange=${this.updateScreenReaderContentsText}></slot></td>` });
   }
 }
 customElement("calcite-table-cell", TableCell);

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

@@ -1,14 +1,26 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { Alignment } from "../interfaces.js";
+import type { Alignment } from "../types.js";
+
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /**
+   * Specifies the component's background color.
+   *
+   * @deprecated in v3.3.0, removal target v6.0.0 - Use `--calcite-table-header-background-color` instead.
+   */
+  "--calcite-table-header-background": "*";
+  /** Specifies the component's background color. */
+  "--calcite-table-header-background-color": "*";
+  /** Specifies the component's border color. */
+  "--calcite-table-header-border-color": "*";
+  /** Specifies the component's `heading` text color. */
+  "--calcite-table-header-heading-text-color": "*";
+  /** Specifies the component's `description` text color. */
+  "--calcite-table-header-description-text-color": "*";
+}
+}
 
-/**
- * @cssproperty [--calcite-table-header-background] - [Deprecated] in v3.3.0, removal target v6.0.0 - Use `--calcite-table-header-background-color` instead. Specifies the component's background color.
- * @cssproperty [--calcite-table-header-background-color] - Specifies the component's background color.
- * @cssproperty [--calcite-table-header-border-color] - Specifies the component's border color.
- * @cssproperty [--calcite-table-header-heading-text-color] - Specifies the component's `heading` text color.
- * @cssproperty [--calcite-table-header-description-text-color] - Specifies the component's `description` text color.
- */
 export abstract class TableHeader extends LitElement {
   /**
    * Specifies the alignment of the component.
@@ -20,16 +32,20 @@ export abstract class TableHeader extends LitElement {
   accessor colSpan: number | undefined;
   /** Specifies a description for the component. Displays below the `heading`. */
   accessor description: string | undefined;
-  /** Specifies the component's heading text. Displays above the `description`. */
+  /** Specifies the component's heading text. */
   accessor heading: string | undefined;
-  /** 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: {
-      all?: string;
-      keyboardDeselectAll?: string;
-      keyboardSelectAll?: string;
-      rowNumber?: string;
-      selected?: string;
-      selectionColumn?: string;
+      all?: string | undefined;
+      keyboardDeselectAll?: string | undefined;
+      keyboardSelectAll?: string | undefined;
+      rowNumber?: string | undefined;
+      selected?: string | undefined;
+      selectionColumn?: string | undefined;
   };
   /** Specifies the number of rows the component should span. */
   accessor rowSpan: number | undefined;

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

@@ -1,38 +1,20 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { c as customElement } from "../../chunks/runtime.js";
+import { C as CSS_UTILITY, c as customElement } from "../../chunks/runtime.js";
 import { css, nothing, html } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, safeClassMap } from "@arcgis/lumina";
 import { g as getIconScale } from "../../chunks/component.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
-import { u as useSetFocus } from "../../chunks/useSetFocus.js";
-const CSS = {
-  contentCell: "content-cell",
-  numberCell: "number-cell",
-  selectionCell: "selection-cell",
-  bodyRow: "body-row",
-  footerRow: "footer-row",
-  heading: "heading",
-  description: "description",
-  multipleSelectionCell: "cell--multiple-selection",
-  assistiveText: "assistive-text",
-  active: "active",
-  selectedCell: "selected-cell",
-  lastCell: "last-cell",
-  staticCell: "static-cell"
-};
-const ICONS = {
-  checked: "check-square-f",
-  indeterminate: "minus-square-f",
-  unchecked: "square"
-};
-const styles = css`:host{display:contents}:host([alignment=center]) th{text-align:center}:host([alignment=end]) th{text-align:end}.assistive-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}th{white-space:normal;text-align:start;vertical-align:top;font-weight:var(--calcite-font-weight-medium);border-block-end:var(--calcite-border-width-sm) solid var(--calcite-table-header-border-color, var(--calcite-table-border-color, var(--calcite-color-border-2)));padding-block:calc(var(--calcite-internal-table-cell-padding) * 1.5);padding-inline:var(--calcite-internal-table-cell-padding);background-color:var(--calcite-table-header-background-color, var(--calcite-table-header-background, var(--calcite-color-foreground-2)));font-size:var(--calcite-internal-table-cell-font-size);border-inline-end:var(--calcite-border-width-sm) solid var(--calcite-table-cell-border-color, var(--calcite-table-border-color, var(--calcite-color-border-2)))}th:not(.static-cell){outline-color:transparent}th:not(.static-cell):not(.static-cell):focus-within{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}th:not(.center):not(.end).content-cell{vertical-align:top}th.center{vertical-align:middle}th.end.content-cell{vertical-align:bottom}th.body-row,th.footer-row{padding-block:var(--calcite-internal-table-cell-padding);border-block-end:0}th.footer-row{border-block-start:var(--calcite-border-width-sm) solid var(--calcite-table-header-border-color, var(--calcite-table-border-color, var(--calcite-color-border-2)))}th.last-cell{border-inline-end:0}.cell--multiple-selection{cursor:pointer;vertical-align:middle;color:var(--calcite-table-selection-cell-icon-color, var(--calcite-color-text-3));background-color:var(--calcite-table-selection-cell-background-color, var(--calcite-color-foreground-2))}.cell--multiple-selection.selected-cell{background-color:var(--calcite-table-selection-cell-background-color-selected, var(--calcite-color-foreground-2))}.cell--multiple-selection:not(.end){vertical-align:middle}.number-cell{background-color:var(--calcite-table-number-cell-background-color, var(--calcite-table-cell-background-color, var(--calcite-color-foreground-2)))}.number-cell,.selection-cell{inline-size:2rem;min-inline-size:2rem}.selection-cell calcite-icon.active{color:var(--calcite-table-selection-cell-icon-color-selected, var(--calcite-color-brand))}.number-cell calcite-icon,.selection-cell calcite-icon{margin-inline-start:auto;margin-inline-end:auto;vertical-align:middle}.heading{color:var(--calcite-table-header-heading-text-color, var(--calcite-color-text-1))}.description{color:var(--calcite-table-header-description-text-color, var(--calcite-color-text-3));font-size:var(--calcite-internal-table-cell-font-size-secondary)}`;
+import { u as useFocusable } from "../../chunks/useFocusable.js";
+import { C as CSS, I as ICONS } from "../../chunks/resources30.js";
+import { s as styles$1 } from "../../chunks/screen-reader.js";
+const styles = css`:host{display:contents}:host([alignment=center]) th{text-align:center}:host([alignment=end]) th{text-align:end}th{text-align:start;font-weight:var(--calcite-font-weight-medium);vertical-align:top;white-space:normal;border-block-end:var(--calcite-border-width-sm) solid var(--calcite-table-header-border-color, var(--calcite-table-border-color, var(--calcite-color-border-2)));padding-block:calc(var(--calcite-internal-table-cell-padding) * 1.5);padding-inline:var(--calcite-internal-table-cell-padding);background-color:var(--calcite-table-header-background-color, var(--calcite-table-header-background, var(--calcite-theme-color-surface-3, var(--calcite-color-foreground-2))));font-size:var(--calcite-internal-table-cell-font-size);border-inline-end:var(--calcite-border-width-sm) solid var(--calcite-table-cell-border-color, var(--calcite-table-border-color, var(--calcite-color-border-2)))}th:not(.static-cell){outline-color:transparent}th:not(.static-cell):not(.static-cell):focus-within{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-1 * var(--calcite-space-base) * (1 - 2 * clamp(0,var(--calcite-offset-invert-focus),1)))}th:not(.body-row):not(.footer-row){border-block-end-width:var(--calcite-internal-table-header-border-block-end-width, var(--calcite-border-width-sm));box-shadow:var(--calcite-internal-table-sticky-header-border-shadow, 0 0 0 0 transparent)}th:not(.center):not(.end).content-cell{vertical-align:top}th.center{vertical-align:middle}th.end.content-cell{vertical-align:bottom}th.body-row,th.footer-row{padding-block:var(--calcite-internal-table-cell-padding);border-block-end:0}th.footer-row{border-block-start:var(--calcite-border-width-sm) solid var(--calcite-table-header-border-color, var(--calcite-table-border-color, var(--calcite-color-border-2)))}th.last-cell{border-inline-end:0}.cell--multiple-selection{cursor:pointer;vertical-align:middle;color:var(--calcite-table-selection-cell-icon-color, var(--calcite-color-text-3));background-color:var(--calcite-table-selection-cell-background-color, var(--calcite-theme-color-surface-3, var(--calcite-color-foreground-2)))}.cell--multiple-selection.selected-cell{background-color:var(--calcite-table-selection-cell-background-color-selected, var(--calcite-theme-color-surface-3, var(--calcite-color-foreground-2)))}.cell--multiple-selection:not(.end){vertical-align:middle}.number-cell{background-color:var(--calcite-table-number-cell-background-color, var(--calcite-table-cell-background-color, var(--calcite-theme-color-surface-3, var(--calcite-color-foreground-2))))}.number-cell,.selection-cell{inline-size:2rem;min-inline-size:2rem}.selection-cell calcite-icon.active{color:var(--calcite-table-selection-cell-icon-color-selected, var(--calcite-color-brand))}.number-cell calcite-icon,.selection-cell calcite-icon{margin-inline-start:auto;margin-inline-end:auto;vertical-align:middle}.heading{color:var(--calcite-table-header-heading-text-color, var(--calcite-color-text-1))}.description{color:var(--calcite-table-header-description-text-color, var(--calcite-color-text-3));font-size:var(--calcite-internal-table-cell-font-size-secondary)}`;
 class TableHeader extends LitElement {
   constructor() {
     super(...arguments);
     this.containerRef = createRef();
     this.messages = useT9n({ blocking: true });
-    this.focusSetter = useSetFocus()(this);
+    this.focusSetter = useFocusable()(this);
     this.focused = false;
     this.screenReaderText = "";
     this.alignment = "start";
@@ -47,7 +29,7 @@ class TableHeader extends LitElement {
     this.properties = { focused: [16, {}, { state: true }], screenReaderText: [16, {}, { state: true }], alignment: [3, {}, { reflect: true }], bodyRowCount: [9, {}, { type: Number }], colSpan: [11, {}, { reflect: true, type: Number }], description: [3, {}, { reflect: true }], heading: [3, {}, { reflect: true }], interactionMode: 1, lastCell: [5, {}, { type: Boolean }], messageOverrides: [0, {}, { attribute: false }], numberCell: [5, {}, { type: Boolean }], parentRowAlignment: 1, parentRowIsSelected: [5, {}, { type: Boolean }], parentRowType: 1, positionInRow: [9, {}, { type: Number }], rowSpan: [11, {}, { reflect: true, type: Number }], scale: 1, selectedRowCount: [9, {}, { type: Number }], selectedRowCountLocalized: 1, selectionCell: [5, {}, { type: Boolean }], selectionMode: 1 };
   }
   static {
-    this.styles = styles;
+    this.styles = [styles, styles$1];
   }
   async setFocus(options) {
     return this.focusSetter(() => this.containerRef.value, options);
@@ -97,7 +79,7 @@ class TableHeader extends LitElement {
       [CSS.staticCell]: staticCell,
       [CSS.lastCell]: this.lastCell && (!this.rowSpan || this.colSpan && !!this.rowSpan),
       [this.parentRowAlignment]: this.parentRowAlignment === "center" || this.parentRowAlignment === "end"
-    })} colSpan=${this.colSpan ?? nothing} @blur=${this.onContainerBlur} @focus=${this.onContainerFocus} .role=${this.parentRowType === "head" ? "columnheader" : "rowheader"} rowSpan=${this.rowSpan ?? nothing} scope=${scope ?? nothing} .tabIndex=${this.selectionCell ? 0 : staticCell ? -1 : 0} ${ref(this.containerRef)}>${this.heading && html`<div class=${safeClassMap(CSS.heading)}>${this.heading}</div>` || ""}${this.description && html`<div class=${safeClassMap(CSS.description)}>${this.description}</div>` || ""}${this.selectionCell && this.selectionMode === "multiple" && html`<calcite-icon class=${safeClassMap({ [CSS.active]: indeterminate || checked })} .icon=${selectionIcon} .scale=${getIconScale(this.scale)}></calcite-icon>` || ""}${(this.selectionCell || this.numberCell) && html`<span .ariaLive=${this.focused ? "polite" : "off"} class=${safeClassMap(CSS.assistiveText)}>${this.screenReaderText}</span>` || ""}</th>`;
+    })} colSpan=${this.colSpan ?? nothing} @blur=${this.onContainerBlur} @focus=${this.onContainerFocus} .role=${this.parentRowType === "head" ? "columnheader" : "rowheader"} rowSpan=${this.rowSpan ?? nothing} scope=${scope ?? nothing} .tabIndex=${this.selectionCell ? 0 : staticCell ? -1 : 0} ${ref(this.containerRef)}>${this.heading && html`<div class=${safeClassMap(CSS.heading)}>${this.heading}</div>` || ""}${this.description && html`<div class=${safeClassMap(CSS.description)}>${this.description}</div>` || ""}${this.selectionCell && this.selectionMode === "multiple" && html`<calcite-icon class=${safeClassMap({ [CSS.active]: indeterminate || checked })} .icon=${selectionIcon} .scale=${getIconScale(this.scale)}></calcite-icon>` || ""}${(this.selectionCell || this.numberCell) && html`<span .ariaLive=${this.focused ? "polite" : "off"} class=${safeClassMap(CSS_UTILITY.screenReaderText)}>${this.screenReaderText}</span>` || ""}</th>`;
   }
 }
 customElement("calcite-table-header", TableHeader);

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

@@ -1,22 +1,36 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { Alignment } from "../interfaces.js";
+import type { Alignment } from "../types.js";
 
-/**
- * @cssproperty [--calcite-table-row-background] - [Deprecated] in v3.3.0, removal target v6.0.0 - Use `--calcite-table-row-background-color` instead. Specifies the background color of the component.
- * @cssproperty [--calcite-table-row-background-color] - Specifies the component's background color.
- * @cssproperty [--calcite-table-row-background-color-striped] - When `striped` is `true` on `calcite-table`, specifies the background color of the component's `striped` rows.
- * @cssproperty [--calcite-table-row-background-color-selected] - When `selected`, specifies the background color of the component's `selected` rows.
- * @cssproperty [--calcite-table-row-accent-color-selected] - Specifies the component's selected accent color.
- * @cssproperty [--calcite-table-row-border-color] - Specifies the component's border color.
- * @slot  - A slot for adding `calcite-table-cell` or `calcite-table-header` elements.
- */
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /**
+   * Specifies the background color of the component.
+   *
+   * @deprecated in v3.3.0, removal target v6.0.0 - Use `--calcite-table-row-background-color` instead.
+   */
+  "--calcite-table-row-background": "*";
+  /** Specifies the component's background color. */
+  "--calcite-table-row-background-color": "*";
+  /** When `striped` is `true` on `calcite-table`, specifies the background color of the component's `striped` rows. */
+  "--calcite-table-row-background-color-striped": "*";
+  /** When `selected`, specifies the background color of the component's `selected` rows. */
+  "--calcite-table-row-background-color-selected": "*";
+  /** Specifies the component's selected accent color. */
+  "--calcite-table-row-accent-color-selected": "*";
+  /** Specifies the component's border color. */
+  "--calcite-table-row-border-color": "*";
+}
+}
+
+/** @slot  - A slot for adding `calcite-table-cell` or `calcite-table-header` elements. */
 export abstract class TableRow extends LitElement {
   /**
-   * Specifies the vertical alignment of content within child `calcite-table-cell`s, where:
-   * `"start"` positions content at the top of a `calcite-table-cell`,
-   * `"center"` positions content in the middle of a `calcite-table-cell`, and
-   * `"end"` positions content at the bottom of a `calcite-table-cell`.
+   * Specifies the vertical alignment of content within child `calcite-table-cell`s.
+   *
+   * - `"start"` positions content at the top of a `calcite-table-cell`.
+   * - `"center"` positions content in the middle of a `calcite-table-cell`.
+   * - `"end"` positions content at the bottom of a `calcite-table-cell`.
    */
   accessor alignment: Alignment;
   /**

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

@@ -4,25 +4,23 @@ import { keyed } from "lit/directives/keyed.js";
 import { css, html, render } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
-import { f as focusElementInGroup } from "../../chunks/dom.js";
+import { e as focusElementInGroup, a as getSlotAssignedElements } from "../../chunks/dom.js";
 import { i as isActivationKey } from "../../chunks/key.js";
 import { g as getIconScale } from "../../chunks/component.js";
+import { i as isTableHeader } from "../../chunks/resources30.js";
+import { i as isTableCell } from "../../chunks/resources29.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
-const CSS = {
-  lastVisibleRow: "last-visible-row"
-};
-const ICONS = {
-  checkSquare: "check-square-f",
-  square: "square",
-  circleF: "circle-f",
-  circle: "circle"
-};
-const styles = css`@charset "UTF-8";:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:contents}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) tr{pointer-events:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}calcite-table-cell{--calcite-internal-table-cell-background-color: var( --calcite-table-row-background-color, var(--calcite-table-row-background, var(--calcite-color-foreground-1)) )}:host([selected]) calcite-table-cell{--calcite-internal-table-cell-background-color: var( --calcite-table-row-background-color-selected, var(--calcite-color-foreground-1) )}tr{border-block-end:var(--calcite-border-width-sm) solid var(--calcite-table-row-border-color, transparent);background-color:var(--calcite-table-row-background-color, var(--calcite-table-row-background, var(--calcite-color-foreground-1)))}tr.last-visible-row{border-block-end:0}@-moz-document url-prefix(){tr{box-shadow:inset 0 -1px 0 0 var(--calcite-table-row-border-color)}tr.last-visible-row{box-shadow:inset 0 -1px 0 0 transparent}}:host([item-hidden]){display:none}`;
+import { I as ICONS, C as CSS } from "../../chunks/resources31.js";
+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:contents}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) tr{opacity:var(--calcite-opacity-disabled);pointer-events:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}calcite-table-cell{--calcite-internal-table-cell-background-color: var( --calcite-table-row-background-color, var(--calcite-table-row-background, var(--calcite-theme-color-surface-2, var(--calcite-color-foreground-1))) )}:host([slot=table-header]) tr{position:var(--calcite-internal-table-header-row-position);inset-block-start:var(--calcite-internal-table-header-offset, 0);z-index:var(--calcite-internal-table-header-z-index, calc(var(--calcite-z-index) + 1))}:host([selected]) calcite-table-cell{--calcite-internal-table-cell-background-color: var( --calcite-table-row-background-color-selected, var(--calcite-theme-color-surface-2, var(--calcite-color-foreground-1)) )}tr{--calcite-internal-table-row-border-block-end-width: var(--calcite-border-width-sm);--calcite-internal-table-row-border-block-end-color: var(--calcite-table-row-border-color, transparent);background-color:var(--calcite-table-row-background-color, var(--calcite-table-row-background, var(--calcite-theme-color-surface-2, var(--calcite-color-foreground-1))))}tr.last-visible-row{--calcite-internal-table-row-border-block-end-width: 0;--calcite-internal-table-row-border-block-end-color: transparent}:host([item-hidden]){display:none}`;
 class TableRow extends LitElement {
   constructor() {
     super();
+    this.numberedCellRef = createRef();
+    this.numberedHeaderRef = createRef();
     this.rowCells = [];
-    this.tableRowSlotRef = createRef();
+    this.rowSlotRef = createRef();
+    this.selectionCellRef = createRef();
+    this.selectionHeaderRef = createRef();
     this.userTriggered = false;
     this._selected = false;
     this.clickHandler = () => {
@@ -42,14 +40,14 @@ class TableRow extends LitElement {
     this.interactionMode = "interactive";
     this.lastVisibleRow = false;
     this.numbered = false;
+    this.stickyHeaderEnabled = false;
     this.selectionMode = "none";
     this.calciteInternalTableRowFocusRequest = createEvent({ cancelable: false });
     this.calciteInternalTableRowSelect = createEvent({ cancelable: false });
     this.calciteTableRowSelect = createEvent({ cancelable: false });
-    this.listenOn(document, "calciteInternalTableRowFocusChange", this.calciteInternalTableRowFocusChangeHandler);
   }
   static {
-    this.properties = { alignment: [3, {}, { reflect: true }], itemHidden: [7, {}, { reflect: true, type: Boolean }], bodyRowCount: [9, {}, { type: Number }], cellCount: [9, {}, { type: Number }], disabled: [7, {}, { reflect: true, type: Boolean }], interactionMode: 1, lastVisibleRow: [5, {}, { type: Boolean }], numbered: [5, {}, { type: Boolean }], positionAll: [9, {}, { type: Number }], positionSection: [9, {}, { type: Number }], positionSectionLocalized: 1, readCellContentsToAT: [5, {}, { type: Boolean }], rowType: 1, scale: 1, selected: [7, {}, { reflect: true, type: Boolean }], selectedRowCount: [9, {}, { type: Number }], selectedRowCountLocalized: 1, selectionMode: 1 };
+    this.properties = { alignment: [3, {}, { reflect: true }], itemHidden: [7, {}, { reflect: true, type: Boolean }], bodyRowCount: [9, {}, { type: Number }], cellCount: [9, {}, { type: Number }], disabled: [7, {}, { reflect: true, type: Boolean }], interactionMode: 1, lastVisibleRow: [5, {}, { type: Boolean }], numbered: [5, {}, { type: Boolean }], positionAll: [9, {}, { type: Number }], positionSection: [9, {}, { type: Number }], positionSectionLocalized: 1, readCellContentsToAT: [5, {}, { type: Boolean }], rowType: 1, scale: 1, stickyHeaderEnabled: [5, {}, { type: Boolean }], selected: [7, {}, { reflect: true, type: Boolean }], selectedRowCount: [9, {}, { type: Number }], selectedRowCountLocalized: 1, selectionMode: 1 };
   }
   static {
     this.styles = styles;
@@ -65,6 +63,7 @@ class TableRow extends LitElement {
     }
   }
   load() {
+    this.listenOn(document, "calciteInternalTableRowFocusChange", this.calciteInternalTableRowFocusChangeHandler);
     this.listenOn(this.el.shadowRoot, "slotchange", this.handleSlotChange);
   }
   willUpdate(changes) {
@@ -79,7 +78,7 @@ class TableRow extends LitElement {
     }
   }
   loaded() {
-    if (this.tableRowEl && this.rowCells.length > 0) {
+    if (this.rowCells.length > 0) {
       this.updateCells();
     }
   }
@@ -87,12 +86,12 @@ class TableRow extends LitElement {
     this.updateCells();
   }
   handleCellChanges() {
-    if (this.tableRowEl && this.rowCells.length > 0) {
+    if (this.rowCells.length > 0) {
       this.updateCells();
     }
   }
   handleDelayedCellChanges() {
-    if (this.tableRowEl && this.rowCells.length > 0) {
+    if (this.rowCells.length > 0) {
       requestAnimationFrame(() => this.updateCells());
     }
   }
@@ -123,7 +122,7 @@ class TableRow extends LitElement {
     const key = event.key;
     const isControl = event.ctrlKey;
     const cells = this.rowCells;
-    if (el.matches("calcite-table-cell") || el.matches("calcite-table-header")) {
+    if (isTableCell(el) || isTableHeader(el)) {
       switch (key) {
         case "ArrowUp":
           this.emitTableRowFocusRequest(el.positionInRow, this.positionAll, "previous");
@@ -180,10 +179,14 @@ class TableRow extends LitElement {
   }
   updateCells() {
     const alignment = this.alignment ? this.alignment : this.rowType !== "head" ? "center" : "start";
-    const slottedCells = this.tableRowSlotRef.value?.assignedElements({ flatten: true })?.filter((el) => el.matches("calcite-table-cell") || el.matches("calcite-table-header")) ?? [];
-    const tableRowEls = this.tableRowEl?.querySelectorAll("calcite-table-header, calcite-table-cell");
-    const renderedCells = tableRowEls ? Array.from(tableRowEls).filter((el) => el.numberCell || el.selectionCell) : void 0;
-    const cells = renderedCells ? renderedCells.concat(slottedCells) : slottedCells;
+    const slottedCells = this.rowSlotRef.value ? getSlotAssignedElements(this.rowSlotRef.value, "calcite-table-cell, calcite-table-header") : [];
+    const renderedCells = [
+      this.numberedCellRef.value,
+      this.numberedHeaderRef.value,
+      this.selectionCellRef.value,
+      this.selectionHeaderRef.value
+    ].filter((cell) => cell != null);
+    const cells = renderedCells.concat(slottedCells);
     if (cells.length > 0) {
       cells?.forEach((cell, index) => {
         cell.interactionMode = this.interactionMode;
@@ -194,8 +197,11 @@ class TableRow extends LitElement {
         cell.positionInRow = index + 1;
         cell.scale = this.scale;
         if (cell.nodeName === "CALCITE-TABLE-CELL") {
+          const rowSpan = cell.rowSpan || 1;
+          const reachesBodyEnd = this.rowType === "body" && rowSpan > 1 && this.positionSection + rowSpan >= this.bodyRowCount;
           cell.readCellContentsToAT = this.readCellContentsToAT;
           cell.disabled = this.disabled;
+          cell.reachesBodyEnd = reachesBodyEnd;
         }
       });
     }
@@ -215,18 +221,17 @@ class TableRow extends LitElement {
     return html`<calcite-icon .icon=${icon} .scale=${getIconScale(this.scale)}></calcite-icon>`;
   }
   renderSelectableCell() {
-    return this.rowType === "head" ? keyed("selection-head", html`<calcite-table-header alignment=center .bodyRowCount=${this.bodyRowCount} @click=${this.clickHandler} @keydown=${this.handleKeyboardSelection} .parentRowAlignment=${this.alignment} .selectedRowCount=${this.selectedRowCount} .selectedRowCountLocalized=${this.selectedRowCountLocalized} .selectionCell=${true} .selectionMode=${this.selectionMode}></calcite-table-header>`) : this.rowType === "body" ? keyed("selection-body", html`<calcite-table-cell alignment=center @click=${this.clickHandler} @keydown=${this.handleKeyboardSelection} .parentRowAlignment=${this.alignment} .parentRowIsSelected=${this.selected} .parentRowPositionLocalized=${this.positionSectionLocalized} .selectionCell=${true}>${this.renderSelectionIcon()}</calcite-table-cell>`) : keyed("selection-foot", html`<calcite-table-cell alignment=center .parentRowAlignment=${this.alignment} .selectionCell=${true}></calcite-table-cell>`);
+    return this.rowType === "head" ? keyed("selection-head", html`<calcite-table-header alignment=center .bodyRowCount=${this.bodyRowCount} @click=${this.clickHandler} @keydown=${this.handleKeyboardSelection} .parentRowAlignment=${this.alignment} .selectedRowCount=${this.selectedRowCount} .selectedRowCountLocalized=${this.selectedRowCountLocalized} .selectionCell=${true} .selectionMode=${this.selectionMode} ${ref(this.selectionHeaderRef)}></calcite-table-header>`) : this.rowType === "body" ? keyed("selection-body", html`<calcite-table-cell alignment=center @click=${this.clickHandler} @keydown=${this.handleKeyboardSelection} .parentRowAlignment=${this.alignment} .parentRowIsSelected=${this.selected} .parentRowPositionLocalized=${this.positionSectionLocalized} .selectionCell=${true} ${ref(this.selectionCellRef)}>${this.renderSelectionIcon()}</calcite-table-cell>`) : keyed("selection-foot", html`<calcite-table-cell alignment=center .parentRowAlignment=${this.alignment} .selectionCell=${true} ${ref(this.selectionCellRef)}></calcite-table-cell>`);
   }
   renderNumberedCell() {
-    return this.rowType === "head" ? keyed("numbered-head", html`<calcite-table-header alignment=center .numberCell=${true} .parentRowAlignment=${this.alignment}></calcite-table-header>`) : this.rowType === "body" ? keyed("numbered-body", html`<calcite-table-cell alignment=center .numberCell=${true} .parentRowAlignment=${this.alignment}>${this.positionSectionLocalized}</calcite-table-cell>`) : keyed("numbered-foot", html`<calcite-table-cell alignment=center .numberCell=${true} .parentRowAlignment=${this.alignment}></calcite-table-cell>`);
+    return this.rowType === "head" ? keyed("numbered-head", html`<calcite-table-header alignment=center .numberCell=${true} .parentRowAlignment=${this.alignment} ${ref(this.numberedHeaderRef)}></calcite-table-header>`) : this.rowType === "body" ? keyed("numbered-body", html`<calcite-table-cell alignment=center .numberCell=${true} .parentRowAlignment=${this.alignment} ${ref(this.numberedCellRef)}>${this.positionSectionLocalized}</calcite-table-cell>`) : keyed("numbered-foot", html`<calcite-table-cell alignment=center .numberCell=${true} .parentRowAlignment=${this.alignment} ${ref(this.numberedCellRef)}></calcite-table-cell>`);
   }
   render() {
     return this.interactiveContainer({ disabled: this.disabled, children: html`<tr .ariaRowIndex=${this.positionAll + 1} .ariaSelected=${this.selected} class=${safeClassMap({ [CSS.lastVisibleRow]: this.lastVisibleRow })} @keydown=${this.keyDownHandler} ${ref((el) => {
       if (!el) {
         return;
       }
-      this.tableRowEl = el;
-      render(html`${this.numbered && this.renderNumberedCell() || ""}${this.selectionMode !== "none" && this.renderSelectableCell() || ""}<slot ${ref(this.tableRowSlotRef)}></slot>`, el);
+      render(html`${this.numbered && this.renderNumberedCell() || ""}${this.selectionMode !== "none" && this.renderSelectableCell() || ""}<slot ${ref(this.rowSlotRef)}></slot>`, el);
     })}></tr>` });
   }
 }

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

@@ -1,11 +1,18 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { Scale } from "../interfaces.js";
-import type { TabLayout, TabPosition } from "./interfaces.js";
+import type { Scale } from "../types.js";
+import type { TabLayout, TabPosition } from "./types.js";
+
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the component's background color. */
+  "--calcite-tab-background-color": "*";
+  /** Specifies the component's border color. */
+  "--calcite-tab-border-color": "*";
+}
+}
 
 /**
- * @cssproperty [--calcite-tab-background-color] - Specifies the component's background color.
- * @cssproperty [--calcite-tab-border-color] - Specifies the component's border color.
  * @slot  - A slot for adding `calcite-tab`s.
  * @slot [title-group] - A slot for adding a `calcite-tab-nav`.
  */
@@ -16,6 +23,12 @@ export abstract class Tabs extends LitElement {
    * @default false
    */
   accessor bordered: boolean;
+  /**
+   * When `true`, allows the last visible closable tab to keep its close button.
+   *
+   * @default false
+   */
+  accessor lastTabClosable: boolean;
   /**
    * Specifies the layout of the `calcite-tab-nav`, justifying the `calcite-tab-title`s to the start (`"inline"`), or across and centered (`"center"`).
    *

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

@@ -3,28 +3,25 @@ import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
-import { a as slotChangeGetAssignedElements, D as getSlotAssignedElements } from "../../chunks/dom.js";
-const CSS = {
-  section: "section"
-};
-const SLOTS = {
-  titleGroup: "title-group"
-};
-const styles = css`:host{display:flex;flex-direction:column;background-color:var(--calcite-tab-background-color, var(--calcite-color-transparent))}:host([bordered]){box-shadow:inset 0 1px 0 var(--calcite-tab-border-color, var(--calcite-color-border-1));background-color:var(--calcite-tab-background-color, var(--calcite-color-foreground-1))}:host([bordered]) section{border-color:var(--calcite-tab-border-color, var(--calcite-color-border-1));border-style:solid}section{display:flex;flex-grow:1;overflow:hidden;border-width:1px;border-block-start-style:solid;border-block-start-color:var(--calcite-tab-border-color, var(--calcite-color-border-1))}:host([bordered][position=bottom]){box-shadow:inset 0 1px 0 var(--calcite-tab-border-color, var(--calcite-color-border-1)),inset 0 -1px 0 var(--calcite-tab-border-color, var(--calcite-color-border-1))}:host([bordered]:not([position=bottom])) ::slotted(calcite-tab-nav){margin-block-end:-1px}:host([position=bottom]){flex-direction:column-reverse}:host([position=bottom]) section{flex-direction:column-reverse;border-block-start-width:0px;border-block-end-width:1px}:host([bordered][scale=s]) section{padding:.75rem}:host([bordered][scale=m]) section{padding:.5rem}:host([bordered][scale=l]) section{padding:1rem}:host([position=bottom]:not([bordered])) section{border-block-end-style:solid;border-block-end-color:var(--calcite-tab-border-color, var(--calcite-color-border-1))}@media(forced-colors:active){:host([bordered]) section{border-block-start-width:0px;border-block-end-width:1px}:host([position=bottom][bordered]) section{border-block-start-width:1px;border-block-end-width:0px}}:host([hidden]){display:none}[hidden]{display:none}`;
+import { b as slotChangeGetAssignedElements, a as getSlotAssignedElements } from "../../chunks/dom.js";
+import { S as SLOTS, C as CSS } from "../../chunks/resources28.js";
+const styles = css`:host{display:flex;flex-direction:column;background-color:var(--calcite-tab-background-color, var(--calcite-color-transparent))}:host([bordered]){box-shadow:inset 0 1px 0 var(--calcite-tab-border-color, var(--calcite-color-border-1));background-color:var(--calcite-tab-background-color, var(--calcite-theme-color-surface-2, var(--calcite-color-foreground-1)))}:host([bordered]) section{border-color:var(--calcite-tab-border-color, var(--calcite-color-border-1));border-style:solid}section{border-width:var(--calcite-border-width-sm);display:flex;flex-grow:1;overflow:hidden;border-block-start-style:solid;border-block-start-color:var(--calcite-tab-border-color, var(--calcite-color-border-1))}:host([bordered][position=bottom]){box-shadow:inset 0 1px 0 var(--calcite-tab-border-color, var(--calcite-color-border-1)),inset 0 -1px 0 var(--calcite-tab-border-color, var(--calcite-color-border-1))}:host([bordered]:not([position=bottom])) ::slotted(calcite-tab-nav){margin-block-end:-1px}:host([position=bottom]){flex-direction:column-reverse}:host([position=bottom]) section{flex-direction:column-reverse;border-block-start-width:var(--calcite-border-width-none);border-block-end-width:var(--calcite-border-width-sm)}:host([bordered][scale=s]) section{padding:var(--calcite-space-md)}:host([bordered][scale=m]) section{padding:var(--calcite-space-sm)}:host([bordered][scale=l]) section{padding:var(--calcite-space-lg)}:host([position=bottom]:not([bordered])) section{border-block-end-style:solid;border-block-end-color:var(--calcite-tab-border-color, var(--calcite-color-border-1))}@media(forced-colors:active){:host([bordered]) section{border-block-start-width:var(--calcite-border-width-none);border-block-end-width:var(--calcite-border-width-sm)}:host([position=bottom][bordered]) section{border-block-start-width:var(--calcite-border-width-sm);border-block-end-width:var(--calcite-border-width-none)}}:host([hidden]){display:none}[hidden]{display:none}`;
 class Tabs extends LitElement {
   constructor() {
     super();
     this.slotRef = createRef();
     this.tabs = [];
     this.titles = [];
+    this.hasVisibleTitles = true;
     this.bordered = false;
     this.layout = "inline";
+    this.lastTabClosable = false;
     this.position = "top";
     this.scale = "m";
     this.listen("calciteInternalTabNavSlotChange", this.calciteInternalTabNavSlotChangeHandler);
   }
   static {
-    this.properties = { tabs: [16, {}, { state: true }], titles: [16, {}, { state: true }], bordered: [5, {}, { type: Boolean }], layout: [3, {}, { reflect: true }], position: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }] };
+    this.properties = { tabs: [16, {}, { state: true }], titles: [16, {}, { state: true }], hasVisibleTitles: [16, {}, { state: true }], bordered: [7, {}, { reflect: true, type: Boolean }], layout: [3, {}, { reflect: true }], lastTabClosable: [7, {}, { reflect: true, type: Boolean }], position: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }] };
   }
   static {
     this.styles = styles;
@@ -37,19 +34,22 @@ class Tabs extends LitElement {
     this.updateItems();
   }
   willUpdate(changes) {
-    if (changes.has("position") && (this.hasUpdated || this.position !== "top") || changes.has("scale") && (this.hasUpdated || this.scale !== "m")) {
+    if (changes.has("position") && (this.hasUpdated || this.position !== "top") || changes.has("scale") && (this.hasUpdated || this.scale !== "m") || changes.has("lastTabClosable") && (this.hasUpdated || this.lastTabClosable !== false)) {
       this.updateItems();
     }
-    if ((changes.has("titles") || changes.has("tabs")) && this.hasUpdated && this.titles?.length > 0 && this.tabs?.length > 0) {
+    if ((changes.has("titles") || changes.has("tabs")) && this.hasUpdated && (this.lastTabClosable || this.titles?.length > 0) && (this.lastTabClosable || this.tabs?.length > 0)) {
       this.updateAriaSettings();
       this.updateItems();
     }
   }
   calciteInternalTabNavSlotChangeHandler(event) {
     event.stopPropagation();
-    if (event.detail.length !== this.titles.length) {
-      this.titles = event.detail;
+    const nextTitles = [...event.detail];
+    const titlesChanged = nextTitles.some((title, index) => this.titles[index] !== title);
+    if (titlesChanged) {
+      this.titles = nextTitles;
     }
+    this.hasVisibleTitles = nextTitles.some((title) => !title.closed);
   }
   defaultSlotChangeHandler(event) {
     this.tabs = slotChangeGetAssignedElements(event, "calcite-tab");
@@ -82,9 +82,10 @@ class Tabs extends LitElement {
     this.titles.forEach((el) => el._updateAriaInfo(tabIds, titleIds));
   }
   updateItems() {
-    const { position, scale } = this;
+    const { lastTabClosable, position, scale } = this;
     const nav = this.el.querySelector("calcite-tab-nav");
     if (nav) {
+      nav.lastTabClosable = lastTabClosable;
       nav.position = position;
       nav.scale = scale;
     }
@@ -100,7 +101,7 @@ class Tabs extends LitElement {
     });
   }
   render() {
-    return html`<slot name=${SLOTS.titleGroup}></slot><section class=${safeClassMap(CSS.section)}><slot @slotchange=${this.defaultSlotChangeHandler} ${ref(this.slotRef)}></slot></section>`;
+    return html`<slot name=${SLOTS.titleGroup}></slot><section class=${safeClassMap(CSS.section)} .hidden=${!this.hasVisibleTitles}><slot @slotchange=${this.defaultSlotChangeHandler} ${ref(this.slotRef)}></slot></section>`;
   }
 }
 customElement("calcite-tabs", Tabs);