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

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

@@ -7,13 +7,17 @@ import { TableRow } from '../calcite-table-row/customElement.js';
 import { TableInteractionMode, TableLayout, TableRowFocusEvent, TableSelectionDisplay } from './interfaces';
 
 /**
- * @slot - A slot for adding `calcite-table-row` elements containing `calcite-table-cell` and/or `calcite-table-header` elements.
- * @slot table-header - A slot for adding `calcite-table-row` elements containing `calcite-table-header` elements.
- * @slot table-footer - A slot for adding `calcite-table-row` elements containing `calcite-table-cell` and/or `calcite-table-header` elements.
- * @slot selection-actions - A slot for adding `calcite-actions` or other elements to display when `selectionMode` is not `"none"` and `selectionDisplay` is not `"none"`.
+ * @slot  - A slot for adding `calcite-table-row` elements containing `calcite-table-cell` and/or `calcite-table-header` elements.
+ * @slot [table-header] - A slot for adding `calcite-table-row` elements containing `calcite-table-header` elements.
+ * @slot [table-footer] - A slot for adding `calcite-table-row` elements containing `calcite-table-cell` and/or `calcite-table-header` elements.
+ * @slot [selection-actions] - A slot for adding `calcite-actions` or other elements to display when `selectionMode` is not `"none"` and `selectionDisplay` is not `"none"`.
  */
 export declare class Table extends LitElement {
-    /** When `true`, displays borders in the component. */
+    /**
+     * When `true`, displays borders in the component.
+     *
+     * @default false
+     */
     bordered: boolean;
     /**
      * Specifies an accessible title for the component.
@@ -21,47 +25,53 @@ export declare class Table extends LitElement {
      * @required
      */
     caption: string;
-    /** When `true`, number values are displayed with a group separator corresponding to the language and country format. */
+    /**
+     * When `true`, number values are displayed with a group separator corresponding to the language and country format.
+     *
+     * @default false
+     */
     groupSeparator: boolean;
-    /** When `"interactive"`, allows focus and keyboard navigation of `table-header`s and `table-cell`s.  When `"static"`, prevents focus and keyboard navigation of `table-header`s and `table-cell`s when assistive technologies are not active. Selection affordances and slotted content within `table-cell`s remain focusable. */
+    /**
+     * When `"interactive"`, allows focus and keyboard navigation of `table-header`s and `table-cell`s.  When `"static"`, prevents focus and keyboard navigation of `table-header`s and `table-cell`s when assistive technologies are not active. Selection affordances and slotted content within `table-cell`s remain focusable.
+     *
+     * @default "interactive"
+     */
     interactionMode: TableInteractionMode;
-    /** Specifies the layout of the component. */
+    /**
+     * Specifies the layout of the component.
+     *
+     * @default "auto"
+     */
     layout: TableLayout;
     /** Use this property to override individual strings used by the component. */
     messageOverrides?: typeof this.messages._overrides;
     /**
-     * Made into a prop for testing purposes only
+     * When `true`, displays the position of the row in numeric form.
      *
-     * @private
+     * @default false
      */
-    private messages: {
-        clear: string;
-        hiddenSelected: string;
-        page: string;
-        row: string;
-        selected: string;
-    } & import('@arcgis/components-controllers').T9nMeta<{
-        clear: string;
-        hiddenSelected: string;
-        page: string;
-        row: string;
-        selected: string;
-    }>;
-    /** When `true`, displays the position of the row in numeric form. */
     numbered: boolean;
     /** Specifies the Unicode numeral system used by the component for localization. */
     numberingSystem?: NumberingSystem;
-    /** Specifies the page size of the component. When `true`, renders `calcite-pagination`. */
+    /**
+     * Specifies the page size of the component. When `true`, renders `calcite-pagination`.
+     *
+     * @default 0
+     */
     pageSize: number;
-    /** Specifies the size of the component. */
-    scale: Scale;
     /**
-     * Specifies the component's selected items.
+     * Specifies the size of the component.
      *
-     * @readonly
+     * @default "m"
      */
+    scale: Scale;
+    /** Specifies the component's selected items. */
     get selectedItems(): HTMLCalciteTableRowElement[];
-    /** Specifies the display of the selection interface when `selection-mode` is not `"none"`. When `"none"`, content slotted the `selection-actions` slot will not be displayed. */
+    /**
+     * Specifies the display of the selection interface when `selection-mode` is not `"none"`. When `"none"`, content slotted the `selection-actions` slot will not be displayed.
+     *
+     * @default "top"
+     */
     selectionDisplay: TableSelectionDisplay;
     /**
      * Specifies the selection mode of the component, where:
@@ -71,12 +81,31 @@ export declare class Table extends LitElement {
      * `"single"` allows only one selection, and
      *
      * `"none"` does not allow any selections.
+     *
+     * @default "none"
      */
     selectionMode: Extract<"none" | "multiple" | "single", SelectionMode>;
-    /** When `true`, displays striped styling in the component. */
+    /**
+     * When `true`, displays striped styling in the component.
+     *
+     * @default false
+     */
     striped: boolean;
     /** Emits when the component's page selection changes. */
-    readonly calciteTablePageChange: TargetedEvent<this, undefined>;
+    readonly calciteTablePageChange: TargetedEvent<this, void>;
     /** Emits when the component's selected rows change. */
-    readonly calciteTableSelect: TargetedEvent<this, undefined>;
+    readonly calciteTableSelect: TargetedEvent<this, void>;
+    private messages: {
+        clear: string;
+        hiddenSelected: string;
+        page: string;
+        row: string;
+        selected: string;
+    } & import('@arcgis/lumina/controllers').T9nMeta<{
+        clear: string;
+        hiddenSelected: string;
+        page: string;
+        row: string;
+        selected: string;
+    }>;
 }

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

@@ -1,6 +1,6 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.2.0-next.9 */
+v3.2.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { isServer, nothing, html } from "lit";
 import { render } from "lit-html";
@@ -38,26 +38,24 @@ const SLOTS = {
 };
 const styles = css`@charset "UTF-8";:host([scale=s]){--calcite-internal-table-cell-padding: .25rem;--calcite-internal-table-cell-font-size: var(--calcite-font-size--2);--calcite-internal-table-cell-font-size-secondary: var(--calcite-font-size--3)}:host([scale=m]){--calcite-internal-table-cell-padding: .5rem;--calcite-internal-table-cell-font-size: var(--calcite-font-size--1);--calcite-internal-table-cell-font-size-secondary: var(--calcite-font-size--2)}:host([scale=l]){--calcite-internal-table-cell-padding: 1rem;--calcite-internal-table-cell-font-size: var(--calcite-font-size-0);--calcite-internal-table-cell-font-size-secondary: var(--calcite-font-size--1)}:host{display:flex}.container{display:flex;block-size:100%;inline-size:100%;flex-direction:column}.table-container{overflow:auto;white-space:nowrap;border:1px solid var(--calcite-color-border-3)}.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}table{inline-size:100%;border-collapse:collapse;overflow-x:scroll}@-moz-document url-prefix(){table{border-collapse:separate;border-spacing:0}}.table--fixed{table-layout:fixed}.bordered ::slotted(calcite-table-row){--calcite-table-row-border-color: var(--calcite-color-border-3)}.striped ::slotted(calcite-table-row:nth-child(2n+1)){--calcite-table-row-background: var(--calcite-color-foreground-2)}.selection-actions{display:flex;flex-direction:row;margin-inline-start:auto}.selection-area{display:flex;flex-direction:row;align-items:center;padding-block:var(--calcite-internal-table-cell-padding)}.selection-area calcite-chip:last-of-type{margin-inline-end:.5rem}.selection-area calcite-chip:last-of-type:not(:first-of-type){margin-inline-start:.5rem}.selection-area calcite-button{margin-inline-end:1rem}.pagination-area{display:flex;inline-size:100%;flex-direction:row;justify-content:center;padding-block:var(--calcite-internal-table-cell-padding)}calcite-pagination{flex:1;justify-content:center}:host([hidden]){display:none}[hidden]{display:none}`;
 class Table extends LitElement {
-  // #endregion
-  // #region Lifecycle
   constructor() {
     super();
     this.paginationEl = createRef();
     this.tableBodySlotEl = createRef();
     this.tableFootSlotEl = createRef();
     this.tableHeadSlotEl = createRef();
+    this.messages = useT9n({ blocking: true });
     this.colCount = 0;
     this.pageStartRow = 1;
     this.selectedCount = 0;
+    this._selectedItems = [];
     this.bordered = false;
     this.groupSeparator = false;
     this.interactionMode = "interactive";
     this.layout = "auto";
-    this.messages = useT9n({ blocking: true });
     this.numbered = false;
     this.pageSize = 0;
     this.scale = "m";
-    this._selectedItems = [];
     this.selectionDisplay = "top";
     this.selectionMode = "none";
     this.striped = false;
@@ -69,16 +67,11 @@ class Table extends LitElement {
     this.listen("calciteInternalTableRowFocusRequest", this.calciteInternalTableRowFocusEvent);
   }
   static {
-    this.properties = { colCount: [16, { state: true }], pageStartRow: [16, { state: true }], readCellContentsToAT: [16, { state: true }], selectedCount: [16, { state: true }], bordered: [7, { reflect: true, type: Boolean }], caption: 1, groupSeparator: [7, { reflect: true, type: Boolean }], interactionMode: [3, { reflect: true }], layout: [3, { reflect: true }], messageOverrides: [0, { attribute: false }], numbered: [7, { reflect: true, type: Boolean }], numberingSystem: [3, { reflect: true }], pageSize: [11, { reflect: true, type: Number }], scale: [3, { reflect: true }], selectedItems: [32, { attribute: false, readOnly: true }], _selectedItems: [16, { state: true }], selectionDisplay: [3, { reflect: true }], selectionMode: [3, { reflect: true }], striped: [7, { reflect: true, type: Boolean }] };
+    this.properties = { colCount: [16, {}, { state: true }], pageStartRow: [16, {}, { state: true }], readCellContentsToAT: [16, {}, { state: true }], selectedCount: [16, {}, { state: true }], _selectedItems: [16, {}, { state: true }], bordered: [7, {}, { reflect: true, type: Boolean }], caption: 1, groupSeparator: [7, {}, { reflect: true, type: Boolean }], interactionMode: [3, {}, { reflect: true }], layout: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }], numbered: [7, {}, { reflect: true, type: Boolean }], numberingSystem: [3, {}, { reflect: true }], pageSize: [11, {}, { reflect: true, type: Number }], scale: [3, {}, { reflect: true }], selectedItems: [32, {}, { attribute: false, readOnly: true }], selectionDisplay: [3, {}, { reflect: true }], selectionMode: [3, {}, { reflect: true }], striped: [7, {}, { reflect: true, type: Boolean }] };
   }
   static {
     this.styles = styles;
   }
-  /**
-   * Specifies the component's selected items.
-   *
-   * @readonly
-   */
   get selectedItems() {
     return this._selectedItems;
   }
@@ -91,8 +84,6 @@ class Table extends LitElement {
       this.updateRows();
     }
   }
-  // #endregion
-  // #region Private Methods
   handleSlotChange() {
     this.updateRows();
   }
@@ -102,9 +93,11 @@ class Table extends LitElement {
     }
   }
   calciteInternalTableRowSelectListener(event) {
-    if (event.composedPath().includes(this.el)) {
-      this.updateSelectedItems(false);
+    if (!event.composedPath().includes(this.el)) {
+      return;
     }
+    this.updateSelectedItems(false);
+    event.stopPropagation();
   }
   calciteInternalTableRowFocusEvent(event) {
     const cellPosition = event.detail.cellPosition;
@@ -207,7 +200,7 @@ class Table extends LitElement {
       row.lastVisibleRow = rowPos === this.pageStartRow + this.pageSize - 1 || rowPos === this.bodyRows.length;
     });
   }
-  updateSelectedItems(emit) {
+  async updateSelectedItems(emit) {
     const selectedItems = this.bodyRows?.filter((el) => el.selected);
     this._selectedItems = selectedItems;
     this.selectedCount = selectedItems?.length;
@@ -230,7 +223,7 @@ class Table extends LitElement {
       if (elToMatch?.rowType === "head") {
         el.selected = this.selectedCount !== this.bodyRows?.length;
       } else {
-        el.selected = elToMatch === el ? !el.selected : this.selectionMode === "multiple" ? el.selected : false;
+        el.selected = this.selectionMode === "multiple" || elToMatch === el ? el.selected : false;
       }
     });
     this.updateSelectedItems(true);
@@ -243,8 +236,6 @@ class Table extends LitElement {
     };
     return numberStringFormatter.localize(value.toString());
   }
-  // #endregion
-  // #region Rendering
   renderSelectionArea() {
     const outOfViewCount = this._selectedItems?.filter((el) => isHidden(el))?.length;
     const localizedOutOfView = this.localizeNumber(outOfViewCount?.toString());

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

@@ -5,34 +5,33 @@ import { Alignment, Scale } from '../interfaces';
 import { InteractiveComponent } from '../../utils/interactive';
 import { RowType, TableInteractionMode } from '../calcite-table/interfaces';
 
-/** @slot - A slot for adding content, usually text content. */
+/** @slot  - A slot for adding content, usually text content. */
 export declare class TableCell extends LitElement {
-    /** Specifies the alignment of the component. */
+    /**
+     * Specifies the alignment of the component.
+     *
+     * @default "start"
+     */
     alignment: Alignment;
     /** Specifies the number of columns the component should span. */
     colSpan: number;
     /** Use this property to override individual strings used by the component. */
     messageOverrides?: typeof this.messages._overrides;
-    /**
-     * Made into a prop for testing purposes only
-     *
-     * @private
-     */
+    /** Specifies the number of rows the component should span. */
+    rowSpan: number;
+    /** Sets focus on the component. */
+    setFocus(): Promise<void>;
     private messages: Partial<{
         keyboardDeselect: string;
         keyboardSelect: string;
         row: string;
         selected: string;
         unselected: string;
-    }> & import('@arcgis/components-controllers').T9nMeta<{
+    }> & import('@arcgis/lumina/controllers').T9nMeta<{
         keyboardDeselect: string;
         keyboardSelect: string;
         row: string;
         selected: string;
         unselected: string;
     }>;
-    /** Specifies the number of rows the component should span. */
-    rowSpan: number;
-    /** Sets focus on the component. */
-    setFocus(): Promise<void>;
 }

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

@@ -1,6 +1,6 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.2.0-next.9 */
+v3.2.0 */
 import { C as CSS_UTILITY, c as customElement } from "../../chunks/runtime.js";
 import { nothing, html } from "lit";
 import { createRef, ref } from "lit-html/directives/ref.js";
@@ -25,30 +25,25 @@ class TableCell extends LitElement {
   constructor() {
     super(...arguments);
     this.containerEl = createRef();
+    this.messages = useT9n();
     this.contentsText = "";
     this.focused = false;
     this.selectionText = "";
     this.alignment = "start";
     this.interactionMode = "interactive";
-    this.messages = useT9n();
     this.parentRowAlignment = "start";
     this.scale = "m";
   }
   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 }], 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;
   }
-  // #endregion
-  // #region Public Methods
-  /** Sets focus on the component. */
   async setFocus() {
     await componentFocusable(this);
     this.containerEl.value.focus();
   }
-  // #endregion
-  // #region Lifecycle
   async load() {
     this.updateScreenReaderContentsText();
     this.updateScreenReaderSelectionText();
@@ -61,8 +56,6 @@ class TableCell extends LitElement {
   updated() {
     updateHostInteraction(this);
   }
-  // #endregion
-  // #region Private Methods
   updateScreenReaderSelectionText() {
     const selectedText = `${this.messages?.row} ${this.parentRowPositionLocalized} ${this.messages?.selected} ${this.messages?.keyboardDeselect}`;
     const unselectedText = `${this.messages?.row} ${this.parentRowPositionLocalized} ${this.messages?.unselected} ${this.messages?.keyboardSelect}`;
@@ -77,8 +70,6 @@ class TableCell extends LitElement {
   onContainerFocus() {
     this.focused = true;
   }
-  // #endregion
-  // #region Rendering
   render() {
     const dir = getElementDir(this.el);
     const staticCell = this.disabled || this.interactionMode === "static" && (!this.selectionCell || this.selectionCell && this.parentRowType === "foot");

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

@@ -5,7 +5,11 @@ import { Alignment, Scale, SelectionMode } from '../interfaces';
 import { RowType, TableInteractionMode } from '../calcite-table/interfaces';
 
 export declare class TableHeader extends LitElement {
-    /** Specifies the alignment of the component. */
+    /**
+     * Specifies the alignment of the component.
+     *
+     * @default "start"
+     */
     alignment: Alignment;
     /** Specifies the number of columns the component should span. */
     colSpan: number;
@@ -15,11 +19,10 @@ export declare class TableHeader extends LitElement {
     heading: string;
     /** Use this property to override individual strings used by the component. */
     messageOverrides?: typeof this.messages._overrides;
-    /**
-     * Made into a prop for testing purposes only
-     *
-     * @private
-     */
+    /** Specifies the number of rows the component should span. */
+    rowSpan: number;
+    /** Sets focus on the component. */
+    setFocus(): Promise<void>;
     private messages: {
         all: string;
         keyboardDeselectAll: string;
@@ -27,7 +30,7 @@ export declare class TableHeader extends LitElement {
         rowNumber: string;
         selected: string;
         selectionColumn: string;
-    } & import('@arcgis/components-controllers').T9nMeta<{
+    } & import('@arcgis/lumina/controllers').T9nMeta<{
         all: string;
         keyboardDeselectAll: string;
         keyboardSelectAll: string;
@@ -35,8 +38,4 @@ export declare class TableHeader extends LitElement {
         selected: string;
         selectionColumn: string;
     }>;
-    /** Specifies the number of rows the component should span. */
-    rowSpan: number;
-    /** Sets focus on the component. */
-    setFocus(): Promise<void>;
 }

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

@@ -1,6 +1,6 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.2.0-next.9 */
+v3.2.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { nothing, html } from "lit";
 import { createRef, ref } from "lit-html/directives/ref.js";
@@ -33,30 +33,25 @@ class TableHeader extends LitElement {
   constructor() {
     super(...arguments);
     this.containerEl = createRef();
+    this.messages = useT9n({ blocking: true });
     this.focused = false;
     this.screenReaderText = "";
     this.alignment = "start";
     this.interactionMode = "interactive";
-    this.messages = useT9n({ blocking: true });
     this.numberCell = false;
     this.parentRowAlignment = "start";
     this.selectionCell = false;
   }
   static {
-    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 };
+    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;
   }
-  // #endregion
-  // #region Public Methods
-  /** Sets focus on the component. */
   async setFocus() {
     await componentFocusable(this);
     this.containerEl.value.focus();
   }
-  // #endregion
-  // #region Lifecycle
   async load() {
     this.updateScreenReaderText();
   }
@@ -65,8 +60,6 @@ class TableHeader extends LitElement {
       this.updateScreenReaderText();
     }
   }
-  // #endregion
-  // #region Private Methods
   updateScreenReaderText() {
     let text = "";
     const sharedText = `${this.selectedRowCountLocalized} ${this.messages?.selected}`;
@@ -87,8 +80,6 @@ class TableHeader extends LitElement {
   onContainerFocus() {
     this.focused = true;
   }
-  // #endregion
-  // #region Rendering
   render() {
     const scope = this.rowSpan ? "rowgroup" : this.colSpan ? "colgroup" : this.parentRowType === "body" ? "row" : "col";
     const checked = this.selectedRowCount === this.bodyRowCount;

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

@@ -5,14 +5,23 @@ import { Alignment, Scale, SelectionMode } from '../interfaces';
 import { RowType, TableInteractionMode, TableRowFocusEvent } from '../calcite-table/interfaces';
 import { InteractiveComponent } from '../../utils/interactive';
 
-/** @slot - A slot for adding `calcite-table-cell` or `calcite-table-header` elements. */
+/** @slot  - A slot for adding `calcite-table-cell` or `calcite-table-header` elements. */
 export declare class TableRow extends LitElement {
     /** Specifies the alignment of the component. */
     alignment: Alignment;
-    /** When `true`, interaction is prevented and the component is displayed with lower opacity. */
+    /**
+     * When `true`, interaction is prevented and the component is displayed with lower opacity.
+     *
+     * @default false
+     */
     disabled: boolean;
-    /** When `true`, the component is selected. */
-    selected: boolean;
+    /**
+     * When `true`, the component is selected.
+     *
+     * @default false
+     */
+    get selected(): boolean;
+    set selected(value: boolean);
     /** Fires when the selected state of the component changes. */
-    readonly calciteTableRowSelect: TargetedEvent<this, undefined>;
+    readonly calciteTableRowSelect: TargetedEvent<this, void>;
 }

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

@@ -1,6 +1,6 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.2.0-next.9 */
+v3.2.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { keyed } from "lit-html/directives/keyed.js";
 import { html } from "lit";
@@ -17,53 +17,60 @@ const CSS = {
 };
 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{--calcite-internal-table-row-background: var(--calcite-table-row-background, var(--calcite-color-foreground-1));--calcite-internal-table-row-border-color: var(--calcite-table-row-border-color, transparent);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}tr{border-block-end:1px solid var(--calcite-internal-table-row-border-color);background-color:var(--calcite-internal-table-row-background)}tr.last-visible-row{border-block-end:0}@-moz-document url-prefix(){tr{box-shadow:inset 0 -1px 0 0 var(--calcite-internal-table-row-border-color)}tr.last-visible-row{box-shadow:inset 0 -1px 0 0 transparent}}:host([item-hidden]){display:none}`;
 class TableRow extends LitElement {
-  // #endregion
-  // #region Lifecycle
   constructor() {
     super();
     this.rowCells = [];
     this.tableRowSlotEl = createRef();
-    this.itemHidden = false;
-    this.disabled = false;
-    this.interactionMode = "interactive";
-    this.numbered = false;
-    this.selected = false;
-    this.selectionMode = "none";
-    this.calciteInternalTableRowFocusRequest = createEvent({ cancelable: false });
-    this.calciteInternalTableRowSelect = createEvent({ cancelable: false });
-    this.calciteTableRowSelect = createEvent({ cancelable: false });
-    this.handleSelectionOfRow = () => {
-      if (this.rowType === "body" || this.rowType === "head" && this.selectionMode === "multiple") {
-        this.calciteTableRowSelect.emit();
-      }
+    this.userTriggered = false;
+    this._selected = false;
+    this.clickHandler = () => {
+      this.handleRowSelection();
     };
     this.handleKeyboardSelection = (event) => {
       if (isActivationKey(event.key)) {
         if (event.key === " ") {
           event.preventDefault();
         }
-        this.handleSelectionOfRow();
+        this.handleRowSelection();
       }
     };
+    this.itemHidden = false;
+    this.disabled = false;
+    this.interactionMode = "interactive";
+    this.numbered = 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, selected: [7, {}, { reflect: true, type: Boolean }], selectedRowCount: [9, {}, { type: Number }], selectedRowCountLocalized: 1, selectionMode: 1 };
   }
   static {
     this.styles = styles;
   }
+  get selected() {
+    return this._selected;
+  }
+  set selected(value) {
+    const oldValue = this._selected;
+    if (value !== oldValue) {
+      this._selected = value;
+      this.handleCellChanges();
+    }
+  }
   load() {
     this.listenOn(this.el.shadowRoot, "slotchange", this.handleSlotChange);
   }
   willUpdate(changes) {
-    if (changes.has("bodyRowCount") || changes.has("scale") || changes.has("selected") && (this.hasUpdated || this.selected !== false) || changes.has("selectedRowCount") || changes.has("interactionMode") && (this.hasUpdated || this.interactionMode !== "interactive")) {
+    if (changes.has("bodyRowCount") || changes.has("scale") || changes.has("selectedRowCount") || changes.has("interactionMode") && (this.hasUpdated || this.interactionMode !== "interactive")) {
       this.handleCellChanges();
     }
     if (changes.has("numbered") && (this.hasUpdated || this.numbered !== false) || changes.has("selectionMode") && (this.hasUpdated || this.selectionMode !== "none")) {
       this.handleDelayedCellChanges();
     }
-    if (changes.has("selected")) {
+    if (changes.has("selected") && (this.hasUpdated || this.selected !== false) && !this.userTriggered) {
       this.calciteInternalTableRowSelect.emit();
     }
   }
@@ -75,8 +82,6 @@ class TableRow extends LitElement {
       this.updateCells();
     }
   }
-  // #endregion
-  // #region Private Methods
   handleSlotChange() {
     this.updateCells();
   }
@@ -195,14 +200,20 @@ class TableRow extends LitElement {
     this.rowCells = cells || [];
     this.cellCount = cells?.length;
   }
-  // #endregion
-  // #region Rendering
+  async handleRowSelection() {
+    if (this.rowType === "body" || this.rowType === "head" && this.selectionMode === "multiple") {
+      this.userTriggered = true;
+      this.selected = !this.selected;
+      await this.updateComplete;
+      this.calciteTableRowSelect.emit();
+    }
+  }
   renderSelectionIcon() {
     const icon = this.selectionMode === "multiple" && this.selected ? "check-square-f" : this.selectionMode === "multiple" ? "square" : this.selected ? "circle-f" : "circle";
     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.handleSelectionOfRow} @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.handleSelectionOfRow} @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}></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>`);
   }
   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>`);

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

@@ -7,16 +7,32 @@ import { Tab } from '../calcite-tab/customElement.js';
 import { TabLayout, TabPosition } from './interfaces';
 
 /**
- * @slot - A slot for adding `calcite-tab`s.
- * @slot title-group - A slot for adding a `calcite-tab-nav`.
+ * @slot  - A slot for adding `calcite-tab`s.
+ * @slot [title-group] - A slot for adding a `calcite-tab-nav`.
  */
 export declare class Tabs extends LitElement {
-    /** When `true`, the component will display with a folder style menu. */
+    /**
+     * When `true`, the component will display with a folder style menu.
+     *
+     * @default false
+     */
     bordered: boolean;
-    /** Specifies the layout of the `calcite-tab-nav`, justifying the `calcite-tab-title`s to the start (`"inline"`), or across and centered (`"center"`). */
+    /**
+     * Specifies the layout of the `calcite-tab-nav`, justifying the `calcite-tab-title`s to the start (`"inline"`), or across and centered (`"center"`).
+     *
+     * @default "inline"
+     */
     layout: TabLayout;
-    /** Specifies the position of `calcite-tab-nav` and `calcite-tab-title` components in relation to the `calcite-tabs`. */
+    /**
+     * Specifies the position of `calcite-tab-nav` and `calcite-tab-title` components in relation to the `calcite-tabs`.
+     *
+     * @default "top"
+     */
     position: TabPosition;
-    /** Specifies the size of the component. */
+    /**
+     * Specifies the size of the component.
+     *
+     * @default "m"
+     */
     scale: Scale;
 }