@xplortech/apollo-core 3.1.0 → 3.2.1

package/dist/types/components.d.ts

@@ -16,6 +16,8 @@ import { BadgePalette, BadgeVariantProp as BadgeVariantProp1 } from "./component
 import { PopoverPosition } from "./components/xpl-popover/xpl-popover";
 import { Placement as Placement1 } from "@floating-ui/dom";
 import { SpotlightActionLayout, SpotlightAnchorPosition } from "./components/xpl-spotlight/xpl-spotlight";
+import { XplTableRowOrderChangeDetail, XplTableSortChangedDetail } from "./components/xpl-table/xpl-table";
+import { HeaderSortChangeDetail } from "./components/xpl-table/xpl-table-header-cell/xpl-table-header-cell";
 import { TagDragEndDetail, TagDragStartDetail } from "./components/xpl-tag/xpl-tag";
 export { AvatarColor, AvatarGroupItem, AvatarStatus, AvatarVariant } from "./components/xpl-avatar/xpl-avatar";
 export { BadgeVariantProp } from "./components/xpl-badge/xpl-badge";
@@ -28,6 +30,8 @@ export { BadgePalette, BadgeVariantProp as BadgeVariantProp1 } from "./component
 export { PopoverPosition } from "./components/xpl-popover/xpl-popover";
 export { Placement as Placement1 } from "@floating-ui/dom";
 export { SpotlightActionLayout, SpotlightAnchorPosition } from "./components/xpl-spotlight/xpl-spotlight";
+export { XplTableRowOrderChangeDetail, XplTableSortChangedDetail } from "./components/xpl-table/xpl-table";
+export { HeaderSortChangeDetail } from "./components/xpl-table/xpl-table-header-cell/xpl-table-header-cell";
 export { TagDragEndDetail, TagDragStartDetail } from "./components/xpl-tag/xpl-tag";
 export namespace Components {
     /**
@@ -2032,44 +2036,66 @@ export namespace Components {
         "target": string;
     }
     /**
+     * Compositional tables use CSS grid on the host (`role="grid"`). Legacy mode uses a `<table>`.
      * @since 0.1.1
      */
     interface XplTable {
         /**
-          * The header values for each column.
+          * @deprecated Legacy data-driven table API only (`columns` / `data` / `footer`). May be removed in a future major release.  The header values for each column.
          */
         "columns"?: string[];
         /**
-          * The data for the body of the table.
+          * @deprecated Legacy data-driven table API only (`columns` / `data` / `footer`). May be removed in a future major release.  The data for the body of the table.
          */
         "data"?: string[][];
         /**
-          * The data for the footer of the table.
+          * @deprecated Legacy data-driven table API only (`columns` / `data` / `footer`). May be removed in a future major release.  The data for the footer of the table.
          */
         "footer"?: string[][];
         /**
-          * When true, the first column of the table is sticky and will cover the leftmost rows in a horizontally scrollable container.
+          * When true, the first **data** column (per row) is sticky during horizontal scroll. Leading compositional columns are skipped: `selectable` (checkbox) and/or `row-reorderable` (grip) are not frozen so they scroll with the grid; the next column stays pinned at `left: 0`.
          */
         "freeze"?: boolean;
         /**
-          * Toggles to show the sort button on each table head
+          * @deprecated Legacy data-driven table API only. May be removed in a future major release.  Toggles to show the sort button on each table head.
           * @default false
          */
-        "isSortable": boolean;
+        "isSortable"?: boolean;
+        /**
+          * Accessible label for the table. Maps to `aria-label` in compositional mode.
+         */
+        "label"?: string;
         /**
-          * Toggles a selectable checkbox for each row in the table
+          * @deprecated Legacy data-driven table API only. May be removed in a future major release.  Toggles a selectable checkbox for each row in the table.
          */
         "multiselect"?: boolean;
         /**
-          * The values for the input for each row when multiselect is activated.
+          * Icon name for the optional `xpl-icon` inside each **managed** reorder grip when the row is **not** in keyboard reorder mode (pointer / idle). Set to `""` to omit the icon so you can style the button or author a fully custom reorder column in markup. When omitted, defaults to `grip-dots-vertical`.
+         */
+        "reorderHandleIcon"?: string;
+        /**
+          * Icon name for the managed reorder grip **while that row is in keyboard reorder mode** (after the user activates the grip with Enter or Space). Use a different icon than `reorder-handle-icon` so users can see they should use arrow keys. When omitted, defaults to `caret-expand-y` (same as `xpl-list` keyboard reorder). Set to `""` to show no icon in keyboard mode only (combine with CSS on `.xpl-table__row-drag-handle--keyboard-mode` if needed).
+         */
+        "reorderHandleIconKeyboard"?: string;
+        /**
+          * When true (compositional mode only), **prepends** a managed reorder column as the **first** grid column (empty header + grip button per body row) and enables HTML5 drag-and-drop row reordering (same interaction model as `xpl-list`). With `selectable`, DOM order is **reorder | selection | data** unless you author a custom reorder column. The table updates the DOM and emits `rowOrderChange`; consumers should persist order if needed. Ignored in legacy `columns`/`data` mode.
+          * @default false
+         */
+        "rowReorderable": boolean;
+        /**
+          * When true (compositional mode only), enables row selection state, the selection toolbar (“N Selected”), and `rowSelectionChange`. **You must add the selection column in your markup:** a header cell with `type="checkbox"`, a body cell containing `xpl-checkbox` per row (aligned with that column), and matching `xpl-table-footer-cell` cells when you use a footer. Each body row should use `row-id` on `xpl-table-row` (or accept auto-generated ids) so `rowSelectionChange` can report `selectedRowIds`.  The toolbar uses the same layout as `xpl-toolbar` and is visible only while at least one row is selected. Use `toolbar-actions-left` / `toolbar-actions-right` slots on this host for bulk actions.
+         */
+        "selectable"?: boolean;
+        /**
+          * @deprecated Legacy data-driven table API only. May be removed in a future major release.  The values for the input for each row when multiselect is activated.
           * @default []
          */
-        "selectedValues": string[];
+        "selectedValues"?: string[];
         /**
-          * Manually determined if the column is sortable
+          * @deprecated Use the compositional slot-based API instead. Will be removed in a future major release.  Manually determined if the column is sortable.
           * @default []
          */
-        "sortableColumns": boolean[];
+        "sortableColumns"?: boolean[];
         /**
           * Toggles an optional styling of the background of each even row of the table body.
          */
@@ -2077,6 +2103,28 @@ export namespace Components {
     }
     interface XplTableBody {
     }
+    interface XplTableCell {
+        /**
+          * Horizontal text alignment within the cell.
+          * @default 'left'
+         */
+        "align": 'left' | 'right' | 'center';
+        /**
+          * Renders cell text in bold (--xpl-font-weight-semibold).
+          * @default false
+         */
+        "bold": boolean;
+        /**
+          * Whether the cell and its interactive children are disabled. Set automatically by xpl-table-row.
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * Adds an underline to cell text.
+          * @default false
+         */
+        "underline": boolean;
+    }
     interface XplTableFooter {
     }
     interface XplTableFooterCell {
@@ -2091,31 +2139,59 @@ export namespace Components {
      */
     interface XplTableHeader {
     }
-    /**
-     * @since 1.3.0
-     */
     interface XplTableHeaderCell {
+        /**
+          * Horizontal text alignment within the header cell.
+          * @default 'left'
+         */
+        "align": 'left' | 'right' | 'center';
+        /**
+          * Accessible name for the header checkbox (native `aria-label`). Defaults to “Select all rows” when `type` is `checkbox`.
+         */
+        "checkboxAriaLabel"?: string;
+        /**
+          * Whether the header checkbox is checked
+          * @default false
+         */
+        "checked": boolean;
+        /**
+          * CSS grid track size for this column (e.g. `1fr`, `minmax(120px, 1fr)`, `auto`). When set, overrides `width`. Use this when you need flexible columns; default layout uses `auto` per column unless you set a track here.
+         */
+        "columnWidth"?: string;
         /**
           * Icon to display in the cell.  See [xpl-icon available icons](../xpl-icon/ICONS.md) for valid icon names.
          */
         "icon"?: string;
         /**
-          * @property {string} - Text to display in the cell
+          * Whether the checkbox is in indeterminate (partially selected) state
+          * @default false
+         */
+        "indeterminate": boolean;
+        /**
+          * Text to display in the cell.
           * @default ''
          */
         "label"?: string;
         /**
-          * @property {boolean} - Whether the cell is sortable or not
+          * Active sort direction for this column when `sortable`. Set by `xpl-table` when used inside a compositional table; may be set by the app for controlled updates.
+         */
+        "sortDirection"?: 'asc' | 'desc' | null;
+        /**
+          * When `sortable` is true, optional stable id used as the key in `sortChanged`’s detail object. Falls back to a slug of `label` when omitted.
+         */
+        "sortKey"?: string;
+        /**
+          * When true (and `type` is `label`), renders a sort control (button + affordance icon).
           * @default false
          */
-        "sortable"?: boolean;
+        "sortable": boolean;
         /**
-          * @property {string} - The type of cell to render
+          * The type of cell to render. **Reflected** to the host `type` attribute so `xpl-table` (and CSS `[type="checkbox"]`) can find the selection column after frameworks set the prop without syncing the attribute (e.g. Vue `:type="'checkbox'"`).
           * @default 'label'
          */
-        "type": 'label' | 'checkbox' | 'icon';
+        "type": 'label' | 'checkbox' | 'icon' | 'empty';
         /**
-          * @property {number} - Width of the cell, in pixels. Minimum width is 48px. If no value is provided, it will default to fit the content of the cell with 16px of padding on each side
+          * Fixed width for this column in pixels (minimum 48px). Sets the grid track to `Npx`. Ignored when `columnWidth` is set. When omitted, the column track defaults to `auto` (content-sized).
          */
         "width"?: number;
     }
@@ -3558,14 +3634,13 @@ declare global {
         new (): HTMLXplTabPanelElement;
     };
     interface HTMLXplTableElementEventMap {
+        "rowOrderChange": XplTableRowOrderChangeDetail;
+        "rowSelectionChange": { selectedRowIds: string[] };
+        "sortChanged": XplTableSortChangedDetail;
         "tableSelect": any;
-        "sortChanged": {
-        colNum: number;
-        colName: string;
-        sortTypeArr: ('asc' | 'desc' | null)[];
-    };
     }
     /**
+     * Compositional tables use CSS grid on the host (`role="grid"`). Legacy mode uses a `<table>`.
      * @since 0.1.1
      */
     interface HTMLXplTableElement extends Components.XplTable, HTMLStencilElement {
@@ -3588,6 +3663,12 @@ declare global {
         prototype: HTMLXplTableBodyElement;
         new (): HTMLXplTableBodyElement;
     };
+    interface HTMLXplTableCellElement extends Components.XplTableCell, HTMLStencilElement {
+    }
+    var HTMLXplTableCellElement: {
+        prototype: HTMLXplTableCellElement;
+        new (): HTMLXplTableCellElement;
+    };
     interface HTMLXplTableFooterElement extends Components.XplTableFooter, HTMLStencilElement {
     }
     var HTMLXplTableFooterElement: {
@@ -3610,11 +3691,9 @@ declare global {
         new (): HTMLXplTableHeaderElement;
     };
     interface HTMLXplTableHeaderCellElementEventMap {
-        "sortChanged": 'asc' | 'desc' | 'none';
+        "headerCheckboxChange": boolean;
+        "headerSortChange": HeaderSortChangeDetail;
     }
-    /**
-     * @since 1.3.0
-     */
     interface HTMLXplTableHeaderCellElement extends Components.XplTableHeaderCell, HTMLStencilElement {
         addEventListener<K extends keyof HTMLXplTableHeaderCellElementEventMap>(type: K, listener: (this: HTMLXplTableHeaderCellElement, ev: XplTableHeaderCellCustomEvent<HTMLXplTableHeaderCellElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
@@ -3911,6 +3990,7 @@ declare global {
         "xpl-tab-panel": HTMLXplTabPanelElement;
         "xpl-table": HTMLXplTableElement;
         "xpl-table-body": HTMLXplTableBodyElement;
+        "xpl-table-cell": HTMLXplTableCellElement;
         "xpl-table-footer": HTMLXplTableFooterElement;
         "xpl-table-footer-cell": HTMLXplTableFooterCellElement;
         "xpl-table-header": HTMLXplTableHeaderElement;
@@ -6115,53 +6195,79 @@ declare namespace LocalJSX {
         "target"?: string;
     }
     /**
+     * Compositional tables use CSS grid on the host (`role="grid"`). Legacy mode uses a `<table>`.
      * @since 0.1.1
      */
     interface XplTable {
         /**
-          * The header values for each column.
+          * @deprecated Legacy data-driven table API only (`columns` / `data` / `footer`). May be removed in a future major release.  The header values for each column.
          */
         "columns"?: string[];
         /**
-          * The data for the body of the table.
+          * @deprecated Legacy data-driven table API only (`columns` / `data` / `footer`). May be removed in a future major release.  The data for the body of the table.
          */
         "data"?: string[][];
         /**
-          * The data for the footer of the table.
+          * @deprecated Legacy data-driven table API only (`columns` / `data` / `footer`). May be removed in a future major release.  The data for the footer of the table.
          */
         "footer"?: string[][];
         /**
-          * When true, the first column of the table is sticky and will cover the leftmost rows in a horizontally scrollable container.
+          * When true, the first **data** column (per row) is sticky during horizontal scroll. Leading compositional columns are skipped: `selectable` (checkbox) and/or `row-reorderable` (grip) are not frozen so they scroll with the grid; the next column stays pinned at `left: 0`.
          */
         "freeze"?: boolean;
         /**
-          * Toggles to show the sort button on each table head
+          * @deprecated Legacy data-driven table API only. May be removed in a future major release.  Toggles to show the sort button on each table head.
           * @default false
          */
         "isSortable"?: boolean;
         /**
-          * Toggles a selectable checkbox for each row in the table
+          * Accessible label for the table. Maps to `aria-label` in compositional mode.
+         */
+        "label"?: string;
+        /**
+          * @deprecated Legacy data-driven table API only. May be removed in a future major release.  Toggles a selectable checkbox for each row in the table.
          */
         "multiselect"?: boolean;
         /**
-          * Emits an event whenever the sort changes. The 'sortChanged' event passes an object with colNum (number), colName (string), sortTypeArr(('asc' | 'desc' | null)[]). The default action can be overridden by calling event.preventDefault().
+          * Emitted after body rows are reordered via drag-and-drop (compositional `row-reorderable` mode).
          */
-        "onSortChanged"?: (event: XplTableCustomEvent<{
-        colNum: number;
-        colName: string;
-        sortTypeArr: ('asc' | 'desc' | null)[];
-    }>) => void;
+        "onRowOrderChange"?: (event: XplTableCustomEvent<XplTableRowOrderChangeDetail>) => void;
         /**
-          * Callback function that is called when the checkbox for a row of a `multiselect` table is checked
+          * Emitted when row selection changes in compositional `selectable` mode (`bubbles: false`, `composed: true`). Listen on this `xpl-table` instance only; the event does not bubble to parents—use `table.addEventListener('rowSelectionChange', …)` on the same element. When wiring from a script in static HTML, wait for `customElements.whenDefined('xpl-table')` so the host is ready. (Named `rowSelectionChange` to avoid clashing with the native `selectionchange` event.)
+         */
+        "onRowSelectionChange"?: (event: XplTableCustomEvent<{ selectedRowIds: string[] }>) => void;
+        /**
+          * Emitted when sort changes in **legacy** or **compositional** mode. `event.detail` is a plain object: **sort-key slug → `'asc' | 'desc' | null`** (null = that column not sorted). Keys match legacy column titles (slugified) or compositional `sort-key` / label slugs. Call `event.preventDefault()` in legacy mode to skip built-in row sorting; compositional tables do not reorder rows automatically.
+         */
+        "onSortChanged"?: (event: XplTableCustomEvent<XplTableSortChangedDetail>) => void;
+        /**
+          * Callback function that is called when the checkbox for a row of a `multiselect` table is checked.
          */
         "onTableSelect"?: (event: XplTableCustomEvent<any>) => void;
         /**
-          * The values for the input for each row when multiselect is activated.
+          * Icon name for the optional `xpl-icon` inside each **managed** reorder grip when the row is **not** in keyboard reorder mode (pointer / idle). Set to `""` to omit the icon so you can style the button or author a fully custom reorder column in markup. When omitted, defaults to `grip-dots-vertical`.
+         */
+        "reorderHandleIcon"?: string;
+        /**
+          * Icon name for the managed reorder grip **while that row is in keyboard reorder mode** (after the user activates the grip with Enter or Space). Use a different icon than `reorder-handle-icon` so users can see they should use arrow keys. When omitted, defaults to `caret-expand-y` (same as `xpl-list` keyboard reorder). Set to `""` to show no icon in keyboard mode only (combine with CSS on `.xpl-table__row-drag-handle--keyboard-mode` if needed).
+         */
+        "reorderHandleIconKeyboard"?: string;
+        /**
+          * When true (compositional mode only), **prepends** a managed reorder column as the **first** grid column (empty header + grip button per body row) and enables HTML5 drag-and-drop row reordering (same interaction model as `xpl-list`). With `selectable`, DOM order is **reorder | selection | data** unless you author a custom reorder column. The table updates the DOM and emits `rowOrderChange`; consumers should persist order if needed. Ignored in legacy `columns`/`data` mode.
+          * @default false
+         */
+        "rowReorderable"?: boolean;
+        /**
+          * When true (compositional mode only), enables row selection state, the selection toolbar (“N Selected”), and `rowSelectionChange`. **You must add the selection column in your markup:** a header cell with `type="checkbox"`, a body cell containing `xpl-checkbox` per row (aligned with that column), and matching `xpl-table-footer-cell` cells when you use a footer. Each body row should use `row-id` on `xpl-table-row` (or accept auto-generated ids) so `rowSelectionChange` can report `selectedRowIds`.  The toolbar uses the same layout as `xpl-toolbar` and is visible only while at least one row is selected. Use `toolbar-actions-left` / `toolbar-actions-right` slots on this host for bulk actions.
+         */
+        "selectable"?: boolean;
+        /**
+          * @deprecated Legacy data-driven table API only. May be removed in a future major release.  The values for the input for each row when multiselect is activated.
           * @default []
          */
         "selectedValues"?: string[];
         /**
-          * Manually determined if the column is sortable
+          * @deprecated Use the compositional slot-based API instead. Will be removed in a future major release.  Manually determined if the column is sortable.
           * @default []
          */
         "sortableColumns"?: boolean[];
@@ -6172,6 +6278,28 @@ declare namespace LocalJSX {
     }
     interface XplTableBody {
     }
+    interface XplTableCell {
+        /**
+          * Horizontal text alignment within the cell.
+          * @default 'left'
+         */
+        "align"?: 'left' | 'right' | 'center';
+        /**
+          * Renders cell text in bold (--xpl-font-weight-semibold).
+          * @default false
+         */
+        "bold"?: boolean;
+        /**
+          * Whether the cell and its interactive children are disabled. Set automatically by xpl-table-row.
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * Adds an underline to cell text.
+          * @default false
+         */
+        "underline"?: boolean;
+    }
     interface XplTableFooter {
     }
     interface XplTableFooterCell {
@@ -6186,35 +6314,67 @@ declare namespace LocalJSX {
      */
     interface XplTableHeader {
     }
-    /**
-     * @since 1.3.0
-     */
     interface XplTableHeaderCell {
+        /**
+          * Horizontal text alignment within the header cell.
+          * @default 'left'
+         */
+        "align"?: 'left' | 'right' | 'center';
+        /**
+          * Accessible name for the header checkbox (native `aria-label`). Defaults to “Select all rows” when `type` is `checkbox`.
+         */
+        "checkboxAriaLabel"?: string;
+        /**
+          * Whether the header checkbox is checked
+          * @default false
+         */
+        "checked"?: boolean;
+        /**
+          * CSS grid track size for this column (e.g. `1fr`, `minmax(120px, 1fr)`, `auto`). When set, overrides `width`. Use this when you need flexible columns; default layout uses `auto` per column unless you set a track here.
+         */
+        "columnWidth"?: string;
         /**
           * Icon to display in the cell.  See [xpl-icon available icons](../xpl-icon/ICONS.md) for valid icon names.
          */
         "icon"?: string;
         /**
-          * @property {string} - Text to display in the cell
+          * Whether the checkbox is in indeterminate (partially selected) state
+          * @default false
+         */
+        "indeterminate"?: boolean;
+        /**
+          * Text to display in the cell.
           * @default ''
          */
         "label"?: string;
         /**
-          * Emitted when the sort direction changes.
+          * Emitted when header checkbox changes
+         */
+        "onHeaderCheckboxChange"?: (event: XplTableHeaderCellCustomEvent<boolean>) => void;
+        /**
+          * Emitted when a sortable label header is activated. Parent `xpl-table` coordinates columns and emits `sortChanged`.
+         */
+        "onHeaderSortChange"?: (event: XplTableHeaderCellCustomEvent<HeaderSortChangeDetail>) => void;
+        /**
+          * Active sort direction for this column when `sortable`. Set by `xpl-table` when used inside a compositional table; may be set by the app for controlled updates.
+         */
+        "sortDirection"?: 'asc' | 'desc' | null;
+        /**
+          * When `sortable` is true, optional stable id used as the key in `sortChanged`’s detail object. Falls back to a slug of `label` when omitted.
          */
-        "onSortChanged"?: (event: XplTableHeaderCellCustomEvent<'asc' | 'desc' | 'none'>) => void;
+        "sortKey"?: string;
         /**
-          * @property {boolean} - Whether the cell is sortable or not
+          * When true (and `type` is `label`), renders a sort control (button + affordance icon).
           * @default false
          */
         "sortable"?: boolean;
         /**
-          * @property {string} - The type of cell to render
+          * The type of cell to render. **Reflected** to the host `type` attribute so `xpl-table` (and CSS `[type="checkbox"]`) can find the selection column after frameworks set the prop without syncing the attribute (e.g. Vue `:type="'checkbox'"`).
           * @default 'label'
          */
-        "type"?: 'label' | 'checkbox' | 'icon';
+        "type"?: 'label' | 'checkbox' | 'icon' | 'empty';
         /**
-          * @property {number} - Width of the cell, in pixels. Minimum width is 48px. If no value is provided, it will default to fit the content of the cell with 16px of padding on each side
+          * Fixed width for this column in pixels (minimum 48px). Sets the grid track to `Npx`. Ignored when `columnWidth` is set. When omitted, the column track defaults to `auto` (content-sized).
          */
         "width"?: number;
     }
@@ -7048,18 +7208,36 @@ declare namespace LocalJSX {
     }
     interface XplTableAttributes {
         "freeze": boolean;
+        "isSortable": boolean;
+        "label": string;
         "multiselect": boolean;
+        "reorderHandleIcon": string;
+        "reorderHandleIconKeyboard": string;
+        "rowReorderable": boolean;
+        "selectable": boolean;
         "striped": boolean;
-        "isSortable": boolean;
+    }
+    interface XplTableCellAttributes {
+        "align": 'left' | 'right' | 'center';
+        "bold": boolean;
+        "disabled": boolean;
+        "underline": boolean;
     }
     interface XplTableFooterCellAttributes {
         "align": 'center' | 'left' | 'right';
     }
     interface XplTableHeaderCellAttributes {
+        "align": 'left' | 'right' | 'center';
+        "checkboxAriaLabel": string;
+        "checked": boolean;
+        "columnWidth": string;
         "icon": string;
-        "sortable": boolean;
+        "indeterminate": boolean;
         "label": string;
-        "type": 'label' | 'checkbox' | 'icon';
+        "sortDirection": 'asc' | 'desc' | null;
+        "sortKey": string;
+        "sortable": boolean;
+        "type": 'label' | 'checkbox' | 'icon' | 'empty';
         "width": number;
     }
     interface XplTableRowAttributes {
@@ -7201,6 +7379,7 @@ declare namespace LocalJSX {
         "xpl-tab-panel": Omit<XplTabPanel, keyof XplTabPanelAttributes> & { [K in keyof XplTabPanel & keyof XplTabPanelAttributes]?: XplTabPanel[K] } & { [K in keyof XplTabPanel & keyof XplTabPanelAttributes as `attr:${K}`]?: XplTabPanelAttributes[K] } & { [K in keyof XplTabPanel & keyof XplTabPanelAttributes as `prop:${K}`]?: XplTabPanel[K] };
         "xpl-table": Omit<XplTable, keyof XplTableAttributes> & { [K in keyof XplTable & keyof XplTableAttributes]?: XplTable[K] } & { [K in keyof XplTable & keyof XplTableAttributes as `attr:${K}`]?: XplTableAttributes[K] } & { [K in keyof XplTable & keyof XplTableAttributes as `prop:${K}`]?: XplTable[K] };
         "xpl-table-body": XplTableBody;
+        "xpl-table-cell": Omit<XplTableCell, keyof XplTableCellAttributes> & { [K in keyof XplTableCell & keyof XplTableCellAttributes]?: XplTableCell[K] } & { [K in keyof XplTableCell & keyof XplTableCellAttributes as `attr:${K}`]?: XplTableCellAttributes[K] } & { [K in keyof XplTableCell & keyof XplTableCellAttributes as `prop:${K}`]?: XplTableCell[K] };
         "xpl-table-footer": XplTableFooter;
         "xpl-table-footer-cell": Omit<XplTableFooterCell, keyof XplTableFooterCellAttributes> & { [K in keyof XplTableFooterCell & keyof XplTableFooterCellAttributes]?: XplTableFooterCell[K] } & { [K in keyof XplTableFooterCell & keyof XplTableFooterCellAttributes as `attr:${K}`]?: XplTableFooterCellAttributes[K] } & { [K in keyof XplTableFooterCell & keyof XplTableFooterCellAttributes as `prop:${K}`]?: XplTableFooterCell[K] };
         "xpl-table-header": XplTableHeader;
@@ -7510,19 +7689,18 @@ declare module "@stencil/core" {
              */
             "xpl-tab-panel": LocalJSX.IntrinsicElements["xpl-tab-panel"] & JSXBase.HTMLAttributes<HTMLXplTabPanelElement>;
             /**
+             * Compositional tables use CSS grid on the host (`role="grid"`). Legacy mode uses a `<table>`.
              * @since 0.1.1
              */
             "xpl-table": LocalJSX.IntrinsicElements["xpl-table"] & JSXBase.HTMLAttributes<HTMLXplTableElement>;
             "xpl-table-body": LocalJSX.IntrinsicElements["xpl-table-body"] & JSXBase.HTMLAttributes<HTMLXplTableBodyElement>;
+            "xpl-table-cell": LocalJSX.IntrinsicElements["xpl-table-cell"] & JSXBase.HTMLAttributes<HTMLXplTableCellElement>;
             "xpl-table-footer": LocalJSX.IntrinsicElements["xpl-table-footer"] & JSXBase.HTMLAttributes<HTMLXplTableFooterElement>;
             "xpl-table-footer-cell": LocalJSX.IntrinsicElements["xpl-table-footer-cell"] & JSXBase.HTMLAttributes<HTMLXplTableFooterCellElement>;
             /**
              * @since 1.0.0
              */
             "xpl-table-header": LocalJSX.IntrinsicElements["xpl-table-header"] & JSXBase.HTMLAttributes<HTMLXplTableHeaderElement>;
-            /**
-             * @since 1.3.0
-             */
             "xpl-table-header-cell": LocalJSX.IntrinsicElements["xpl-table-header-cell"] & JSXBase.HTMLAttributes<HTMLXplTableHeaderCellElement>;
             "xpl-table-row": LocalJSX.IntrinsicElements["xpl-table-row"] & JSXBase.HTMLAttributes<HTMLXplTableRowElement>;
             /**