npm - @xplortech/apollo-core - Versions diffs - 2.7.0 → 2.8.0 - Mend

@xplortech/apollo-core 2.7.0 → 2.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (270) hide show

package/dist/docs/xpl-dropdown/readme.md CHANGED Viewed

@@ -10,17 +10,19 @@ A selection within a dropdown does not change the parent trigger.
 ## Properties
-| Property          | Attribute           | Description                                                                         | Type                                                        | Default     |
-| ----------------- | ------------------- | ----------------------------------------------------------------------------------- | ----------------------------------------------------------- | ----------- |
-| `anchorToTrigger` | `anchor-to-trigger` | whether to anchor the dropdown to the trigger element, requires triggerId to be set | `boolean`                                                   | `false`     |
-| `closeOnSelect`   | `close-on-select`   | options that are listed                                                             | `boolean`                                                   | `true`      |
-| `isOpen`          | `open`              | text to display as heading                                                          | `boolean`                                                   | `false`     |
-| `mode`            | `mode`              | constant representing number of options that can be selected                        | `"multi" \| "single"`                                       | `'single'`  |
-| `options`         | --                  | options that are listed                                                             | `Partial<DropdownOption & DropdownOptionGroup>[]`           | `undefined` |
-| `selectOnFocus`   | `select-on-focus`   | whether selection should be made when focusing on interactive element               | `boolean`                                                   | `false`     |
-| `selectedValues`  | `selected-values`   | The currently selected value(s) in the dropdown.                                    | `string \| string[]`                                        | `undefined` |
-| `triggerId`       | `trigger-id`        | the id for the element that triggers the open state                                 | `string`                                                    | `undefined` |
-| `update`          | --                  | call back function invoked when a selection is made                                 | `(e: any, { component }: { component: Dropdown; }) => void` | `undefined` |
+| Property                 | Attribute           | Description                                                                                                                            | Type                                                                                                                                                                 | Default          |
+| ------------------------ | ------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- |
+| `anchorToTrigger`        | `anchor-to-trigger` | whether to anchor the dropdown to the trigger element, requires triggerId to be set                                                    | `boolean`                                                                                                                                                            | `false`          |
+| `closeOnSelect`          | `close-on-select`   | options that are listed                                                                                                                | `boolean`                                                                                                                                                            | `true`           |
+| `flipFallbackPlacements` | --                  | When `anchorToTrigger` is true, additional placements to try when the default `placement` does not fit (passed to Floating UI `flip`). | `Placement[]`                                                                                                                                                        | `undefined`      |
+| `isOpen`                 | `open`              | text to display as heading                                                                                                             | `boolean`                                                                                                                                                            | `false`          |
+| `mode`                   | `mode`              | constant representing number of options that can be selected                                                                           | `"multi" \| "single"`                                                                                                                                                | `'single'`       |
+| `options`                | --                  | options that are listed                                                                                                                | `Partial<DropdownOption & DropdownOptionGroup>[]`                                                                                                                    | `undefined`      |
+| `placement`              | `placement`         | Floating UI placement when `anchorToTrigger` is true (e.g. `bottom-start`, `top-start`).                                               | `"bottom" \| "bottom-end" \| "bottom-start" \| "left" \| "left-end" \| "left-start" \| "right" \| "right-end" \| "right-start" \| "top" \| "top-end" \| "top-start"` | `'bottom-start'` |
+| `selectOnFocus`          | `select-on-focus`   | whether selection should be made when focusing on interactive element                                                                  | `boolean`                                                                                                                                                            | `false`          |
+| `selectedValues`         | `selected-values`   | The currently selected value(s) in the dropdown.                                                                                       | `string \| string[]`                                                                                                                                                 | `undefined`      |
+| `triggerId`              | `trigger-id`        | the id for the element that triggers the open state                                                                                    | `string`                                                                                                                                                             | `undefined`      |
+| `update`                 | --                  | call back function invoked when a selection is made                                                                                    | `(e: any, { component }: { component: Dropdown; }) => void`                                                                                                          | `undefined`      |
 ## Events

package/dist/docs/xpl-dynamic-table/readme.md CHANGED Viewed

@@ -1,22 +1,19 @@
-# xpl-dynamic-table
-> **Note:** This component is currently in beta. Use with caution as it may have breaking changes in future releases.
-The Dynamic Table is a rich content table that can accommodate multiple types of data.
-<!-- Auto Generated Below -->
-> **[DEPRECATED]** Use the compositional `<xpl-table>` API instead.
-This component will be removed in a future major release.
-## Events
-| Event                     | Description                                        | Type                    |
-| ------------------------- | -------------------------------------------------- | ----------------------- |
-| `selectedItemCountChange` | Emitted when the number of selected items changes. | `CustomEvent<string[]>` |
-----------------------------------------------
-*Built with [StencilJS](https://stenciljs.com/)*
+# xpl-dynamic-table
+> **Note:** This component is currently in beta. Use with caution as it may have breaking changes in future releases.
+The Dynamic Table is a rich content table that can accommodate multiple types of data.
+<!-- Auto Generated Below -->
+## Events
+| Event                     | Description                                        | Type                    |
+| ------------------------- | -------------------------------------------------- | ----------------------- |
+| `selectedItemCountChange` | Emitted when the number of selected items changes. | `CustomEvent<string[]>` |
+----------------------------------------------
+*Built with [StencilJS](https://stenciljs.com/)*

package/dist/docs/xpl-dynamic-table-cell/readme.md CHANGED Viewed

@@ -1,20 +1,18 @@
-# xpl-dynamic-table-cell
-> **Note:** This component is currently in beta. Use with caution as it may have breaking changes in future releases.
-<!-- Auto Generated Below -->
-> **[DEPRECATED]** Use `<xpl-table-cell>` instead.
-This component will be removed in a future major release.
-## Properties
-| Property   | Attribute  | Description                                     | Type      | Default |
-| ---------- | ---------- | ----------------------------------------------- | --------- | ------- |
-| `disabled` | `disabled` | Whether the cell and its contents are disabled. | `boolean` | `false` |
-----------------------------------------------
-*Built with [StencilJS](https://stenciljs.com/)*
+# xpl-dynamic-table-cell
+> **Note:** This component is currently in beta. Use with caution as it may have breaking changes in future releases.
+<!-- Auto Generated Below -->
+## Properties
+| Property   | Attribute  | Description                                     | Type      | Default |
+| ---------- | ---------- | ----------------------------------------------- | --------- | ------- |
+| `disabled` | `disabled` | Whether the cell and its contents are disabled. | `boolean` | `false` |
+----------------------------------------------
+*Built with [StencilJS](https://stenciljs.com/)*

package/dist/docs/xpl-dynamic-table-row/readme.md CHANGED Viewed

@@ -1,21 +1,19 @@
-# xpl-dynamic-table-row
-> **Note:** This component is currently in beta. Use with caution as it may have breaking changes in future releases.
-<!-- Auto Generated Below -->
-> **[DEPRECATED]** Use `<xpl-table-row>` instead.
-This component will be removed in a future major release.
-## Properties
-| Property   | Attribute  | Description                                 | Type      | Default |
-| ---------- | ---------- | ------------------------------------------- | --------- | ------- |
-| `disabled` | `disabled` | Whether the row and its cells are disabled. | `boolean` | `false` |
-| `selected` | `selected` | Whether the row is selected.                | `boolean` | `false` |
-----------------------------------------------
-*Built with [StencilJS](https://stenciljs.com/)*
+# xpl-dynamic-table-row
+> **Note:** This component is currently in beta. Use with caution as it may have breaking changes in future releases.
+<!-- Auto Generated Below -->
+## Properties
+| Property   | Attribute  | Description                                 | Type      | Default |
+| ---------- | ---------- | ------------------------------------------- | --------- | ------- |
+| `disabled` | `disabled` | Whether the row and its cells are disabled. | `boolean` | `false` |
+| `selected` | `selected` | Whether the row is selected.                | `boolean` | `false` |
+----------------------------------------------
+*Built with [StencilJS](https://stenciljs.com/)*

package/dist/docs/xpl-icon/readme.md CHANGED Viewed

@@ -56,7 +56,7 @@ The `icon` property accepts any icon name as a string. See the links above for t
  - [xpl-slideout](../xpl-slideout)
  - [xpl-spotlight](../xpl-spotlight)
  - [xpl-table](../xpl-table)
- - [xpl-table-header-cell](../xpl-table/xpl-table-header-cell)
+ - [xpl-table-header-cell](../xpl-table-header-cell)
  - [xpl-tag](../xpl-tag)
  - [xpl-toast](../xpl-toast)
  - [xpl-top-nav](../xpl-top-nav)

package/dist/docs/xpl-radio/readme.md CHANGED Viewed

@@ -7,15 +7,16 @@ Radio buttons allow users to make selections or choices. Radios are always singl
 ## Properties
-| Property      | Attribute     | Description                                                                                | Type      | Default     |
-| ------------- | ------------- | ------------------------------------------------------------------------------------------ | --------- | ----------- |
-| `checked`     | `checked`     | Whether the input is "on"                                                                  | `boolean` | `undefined` |
-| `description` | `description` | Description text for the field                                                             | `string`  | `undefined` |
-| `disabled`    | `disabled`    | Whether the input is disabled                                                              | `boolean` | `undefined` |
-| `name`        | `name`        | The name attribute for the html input. (submittted in form as name/value pair)             | `string`  | `undefined` |
-| `required`    | `required`    | Whether the input is required                                                              | `boolean` | `undefined` |
-| `styled`      | `styled`      | Whether the input is contained in a box with a border and, in disabled state, a background | `boolean` | `undefined` |
-| `value`       | `value`       | The value attribute for the radio input. (submittted in form as name/value pair)           | `string`  | `undefined` |
+| Property        | Attribute        | Description                                                                                                                                                                                                                                                                                                                                                                                                                      | Type      | Default     |
+| --------------- | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ----------- |
+| `checked`       | `checked`        | Whether the input is "on"                                                                                                                                                                                                                                                                                                                                                                                                        | `boolean` | `undefined` |
+| `description`   | `description`    | Description text for the field                                                                                                                                                                                                                                                                                                                                                                                                   | `string`  | `undefined` |
+| `disabled`      | `disabled`       | Whether the input is disabled                                                                                                                                                                                                                                                                                                                                                                                                    | `boolean` | `undefined` |
+| `name`          | `name`           | The name attribute for the html input. (submitted in form as name/value pair)                                                                                                                                                                                                                                                                                                                                                    | `string`  | `undefined` |
+| `required`      | `required`       | Whether the input is required                                                                                                                                                                                                                                                                                                                                                                                                    | `boolean` | `undefined` |
+| `selectedValue` | `selected-value` | The currently selected value for the radio group this radio belongs to.  When set, the radio renders as checked when `selectedValue` equals its own `value` prop. Use this to drive radio-group selection from a single source of truth — e.g. Vue `v-model` on a shared `selectedValue` across every radio in a group, where each radio still declares its own `value`.  Falls back to the boolean `checked` prop when not set. | `string`  | `undefined` |
+| `styled`        | `styled`         | Whether the input is contained in a box with a border and, in disabled state, a background                                                                                                                                                                                                                                                                                                                                       | `boolean` | `undefined` |
+| `value`         | `value`          | The value attribute for the radio input. (submitted in form as name/value pair)                                                                                                                                                                                                                                                                                                                                                  | `string`  | `undefined` |
 ## Events

package/dist/docs/xpl-select/readme.md CHANGED Viewed

@@ -13,21 +13,23 @@ The `selectIcon` property accepts icon names as strings. See [xpl-icon available
 ## Properties
-| Property             | Attribute              | Description                                                                                                                                                                                                                                                               | Type                                              | Default          |
-| -------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------- | ---------------- |
-| `choices`            | --                     | An array of choices for the user to choose from. Each choice should be of the form: {   label: string;   href?: string;   value?: string;   isGroupHeading?: boolean;   isSelected?: boolean;   isDisabled?: boolean;   options?: DropdownItem[];   groupName?: string; } | `Partial<DropdownOption & DropdownOptionGroup>[]` | `[]`             |
-| `classNames`         | `class-names`          | The class name to apply to the select component.                                                                                                                                                                                                                          | `string`                                          | `undefined`      |
-| `customDisplayValue` | `custom-display-value` | If true, enables custom display value rendering via slot.                                                                                                                                                                                                                 | `boolean`                                         | `undefined`      |
-| `description`        | `description`          | Optional text that appears below the input label.                                                                                                                                                                                                                         | `string`                                          | `undefined`      |
-| `disabled`           | `disabled`             | Whether the field is disabled                                                                                                                                                                                                                                             | `boolean`                                         | `undefined`      |
-| `error`              | `error`                | If an empty string (attribute present with no value), will display visually as an error. If a string is included, will display visually as an error and include the value as an error message.                                                                            | `string`                                          | `undefined`      |
-| `label`              | `label`                | The label that appears above the select dropdown                                                                                                                                                                                                                          | `string`                                          | `undefined`      |
-| `mode`               | `mode`                 | Whether to allow a single choice or multiple choices.                                                                                                                                                                                                                     | `"multi" \| "single"`                             | `'single'`       |
-| `name`               | `name`                 | The name of the hidden input field that contains the selected option's value(s)                                                                                                                                                                                           | `string`                                          | `undefined`      |
-| `placeholder`        | `placeholder`          | Placeholder text that appears when the field has no value                                                                                                                                                                                                                 | `string`                                          | `undefined`      |
-| `selectIcon`         | `select-icon`          | The icon to display in the select trigger button.  See [xpl-icon available icons](../xpl-icon/ICONS.md) for valid icon names.                                                                                                                                             | `string`                                          | `'chevron-down'` |
-| `selectedValues`     | `selected-values`      | The value(s) currently selected in the select component.                                                                                                                                                                                                                  | `string \| string[]`                              | `undefined`      |
-| `truncate`           | `truncate`             | Only used in multi-choice selects. If `true`, badges representing selections that would overflow the container are replaced with "+x more" (where x is the number not shown). If `false`, the container's height will adjust to show all badges representing selections.  | `boolean`                                         | `true`           |
+| Property                         | Attribute              | Description                                                                                                                                                                                                                                                               | Type                                                                                                                                                                 | Default          |
+| -------------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- |
+| `choices`                        | --                     | An array of choices for the user to choose from. Each choice should be of the form: {   label: string;   href?: string;   value?: string;   isGroupHeading?: boolean;   isSelected?: boolean;   isDisabled?: boolean;   options?: DropdownItem[];   groupName?: string; } | `Partial<DropdownOption & DropdownOptionGroup>[]`                                                                                                                    | `[]`             |
+| `classNames`                     | `class-names`          | The class name to apply to the select component.                                                                                                                                                                                                                          | `string`                                                                                                                                                             | `undefined`      |
+| `customDisplayValue`             | `custom-display-value` | If true, enables custom display value rendering via slot.                                                                                                                                                                                                                 | `boolean`                                                                                                                                                            | `undefined`      |
+| `description`                    | `description`          | Optional text that appears below the input label.                                                                                                                                                                                                                         | `string`                                                                                                                                                             | `undefined`      |
+| `disabled`                       | `disabled`             | Whether the field is disabled                                                                                                                                                                                                                                             | `boolean`                                                                                                                                                            | `undefined`      |
+| `dropdownFlipFallbackPlacements` | --                     | Additional placements to try for the options panel when the default `dropdownPlacement` does not fit. Passed to `xpl-dropdown` / Floating UI `flip`.                                                                                                                      | `Placement[]`                                                                                                                                                        | `undefined`      |
+| `dropdownPlacement`              | `dropdown-placement`   | Initial Floating UI placement for the options panel (e.g. `top-start`, `bottom-start`). Forwarded to the inner `xpl-dropdown` when the menu is open.                                                                                                                      | `"bottom" \| "bottom-end" \| "bottom-start" \| "left" \| "left-end" \| "left-start" \| "right" \| "right-end" \| "right-start" \| "top" \| "top-end" \| "top-start"` | `'bottom-start'` |
+| `error`                          | `error`                | If an empty string (attribute present with no value), will display visually as an error. If a string is included, will display visually as an error and include the value as an error message.                                                                            | `string`                                                                                                                                                             | `undefined`      |
+| `label`                          | `label`                | The label that appears above the select dropdown                                                                                                                                                                                                                          | `string`                                                                                                                                                             | `undefined`      |
+| `mode`                           | `mode`                 | Whether to allow a single choice or multiple choices.                                                                                                                                                                                                                     | `"multi" \| "single"`                                                                                                                                                | `'single'`       |
+| `name`                           | `name`                 | The name of the hidden input field that contains the selected option's value(s)                                                                                                                                                                                           | `string`                                                                                                                                                             | `undefined`      |
+| `placeholder`                    | `placeholder`          | Placeholder text that appears when the field has no value                                                                                                                                                                                                                 | `string`                                                                                                                                                             | `undefined`      |
+| `selectIcon`                     | `select-icon`          | The icon to display in the select trigger button.  See [xpl-icon available icons](../xpl-icon/ICONS.md) for valid icon names.                                                                                                                                             | `string`                                                                                                                                                             | `'chevron-down'` |
+| `selectedValues`                 | `selected-values`      | The value(s) currently selected in the select component.                                                                                                                                                                                                                  | `string \| string[]`                                                                                                                                                 | `undefined`      |
+| `truncate`                       | `truncate`             | Only used in multi-choice selects. If `true`, badges representing selections that would overflow the container are replaced with "+x more" (where x is the number not shown). If `false`, the container's height will adjust to show all badges representing selections.  | `boolean`                                                                                                                                                            | `true`           |
 ## Events

package/dist/docs/xpl-table/readme.md CHANGED Viewed

@@ -1,110 +1,46 @@
-# xpl-table
-Tables are used to organize and display information from a data set.
-## Rendering modes
-1. **Compositional (recommended)** — Provide `xpl-table-header`, `xpl-table-body`, and optional `xpl-table-footer` with `xpl-table-row` / `xpl-table-header-cell` / `xpl-table-cell` / `xpl-table-footer-cell`. The host uses CSS grid (`role="grid"`). Column widths come from each **`xpl-table-header-cell`** (`width` in px, or `column-width` for any grid track; default `auto` / content-sized). Use `label` for an accessible name. **Sorting:** set `sortable` (and optional `sort-key`) on label header cells; `xpl-table` emits **`sortChanged`** with sort-key slugs → `asc` / `desc` / `null`. The host does **not** reorder row DOM — listen and update your data (or reorder nodes yourself), same as the main Table Storybook demo.
-2. **Legacy data-driven** — Set `columns`, `data`, and optionally `footer` for a built-in `<table>` implementation. That path supports `isSortable` / `sortableColumns`, `multiselect`, and emits `sortChanged` / `tableSelect` (legacy can reorder rows unless you `preventDefault`). Prefer compositional markup for new work.
-**Selection (compositional only):** Set `selectable` on `xpl-table` and **author the selection column in your template** so the framework that renders the table (Ember, React, Angular, etc.) owns every cell node. Required pieces:
-- **Header:** one `xpl-table-header-cell` with `type="checkbox"` (tri-state “select all”).
-- **Body:** in each `xpl-table-row`, a cell aligned with that column containing `xpl-checkbox` (value is driven from `row-id` on the row).
-- **Footer:** if you use `xpl-table-footer`, add a leading `xpl-table-footer-cell` per row for the selection column (often empty) so column counts stay aligned.
-`xpl-table` keeps `selectedRowIds`, syncs `checked` / `indeterminate` on the header and row checkboxes, sets `selected` on rows, shows the bulk toolbar, and emits `rowSelectionChange` **on the `xpl-table` element** (`bubbles: false`). From a static script, use `customElements.whenDefined('xpl-table')` before `addEventListener`. Row checkboxes get an accessible name derived from the first **non-selection** data cell in that row (e.g. `Select row, Jordan Lee`); the header uses “Select all rows” unless you set `checkbox-aria-label` on the checkbox header cell.
-### Breaking change — compositional `selectable`
-**Before:** Setting `selectable` alone caused the table to **inject** selection header/body/footer cells into the light DOM (including nodes marked `data-xpl-selection-managed`).
-**After:** You **must** add the selection column in your own markup, as described above. `xpl-table` no longer creates or removes those cells; it only syncs selection state and emits events. If you previously relied on automatic injection, add the header checkbox column, per-row checkbox cells, and (when using a footer) leading footer cells so column counts match.
-### Row reorder (`row-reorderable`, managed grip column)
-When `row-reorderable` is set, Apollo can **inject** a leading reorder column with a native **button** + optional `xpl-icon` on each body row (unless you author that column yourself). Keyboard and pointer reorder share the same grip; **keyboard mode** is indicated by `aria-pressed`, updated labels, the class `xpl-table__row-drag-handle--keyboard-mode`, and optionally a **different icon**.
-**Pointer drag (full row):** Body rows use CSS **`subgrid`** so `xpl-table-row` is a real grid box (like `xpl-list-item`’s row surface). When `CSS.supports('grid-template-columns','subgrid')` is true, **`draggable`** is set on **`xpl-table-row`** so the browser’s drag image matches the whole row; drag still **starts only from the grip** (pointer-down there sets the drag token—dragging from other cells is ignored). Engines without subgrid keep **`draggable`** on the grip button only.
-| Attribute | When it applies | Purpose |
-| --------- | ---------------- | ------- |
-| `reorder-handle-icon` | Default / drag affordance | Icon name for `xpl-icon` (default `grip-dots-vertical`). Use `reorder-handle-icon=""` to omit the injected icon and use CSS or your own markup in a **custom** reorder cell instead. |
-| `reorder-handle-icon-keyboard` | While that row is in **keyboard reorder mode** (Enter or Space on the grip) | Icon name for the same grip when the user is using **Arrow Up/Down** to move the row (default `caret-expand-y`, matching `xpl-list`). Use `reorder-handle-icon-keyboard=""` to show **no** icon in keyboard mode only. |
-**Recommended for product UIs:** Set **both** attributes to your design-system icon names so drag vs keyboard modes are visually distinct. You can still add styles targeting `.xpl-table__row-drag-handle--keyboard-mode` (e.g. outline) for extra clarity.
-**Interaction:** Focus the grip → **Enter** or **Space** → **Arrow Up/Down** to reorder → **Escape** to exit. Pointer down on the row exits keyboard mode; starting a drag also exits keyboard mode.
-**Custom reorder column:** If you add reorder cells in your own template (not injected), **you** own icons, keyboard behavior, and `rowOrderChange` — these attributes apply only to **managed** injected grips.
-<!-- Auto Generated Below -->
-## Overview
-Compositional tables use CSS grid on the host (`role="grid"`). Legacy mode uses a `<table>`.
-## Properties
-| Property                    | Attribute                      | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | Type         | Default     |
-| --------------------------- | ------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | ----------- |
-| `columns`                   | --                             | <span style="color:red">**[DEPRECATED]**</span> Legacy data-driven table API only (`columns` / `data` / `footer`). May be removed in a future major release.  The header values for each column.<br/><br/>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `string[]`   | `undefined` |
-| `data`                      | --                             | <span style="color:red">**[DEPRECATED]**</span> 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.<br/><br/>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `string[][]` | `undefined` |
-| `footer`                    | --                             | <span style="color:red">**[DEPRECATED]**</span> 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.<br/><br/>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `string[][]` | `undefined` |
-| `freeze`                    | `freeze`                       | 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`.                                                                                                                                                                                                                                                                                                                                                                                                                                           | `boolean`    | `undefined` |
-| `isSortable`                | `is-sortable`                  | <span style="color:red">**[DEPRECATED]**</span> Legacy data-driven table API only. May be removed in a future major release.  Toggles to show the sort button on each table head.<br/><br/>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `boolean`    | `false`     |
-| `label`                     | `label`                        | Accessible label for the table. Maps to `aria-label` in compositional mode.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `string`     | `undefined` |
-| `multiselect`               | `multiselect`                  | <span style="color:red">**[DEPRECATED]**</span> Legacy data-driven table API only. May be removed in a future major release.  Toggles a selectable checkbox for each row in the table.<br/><br/>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `boolean`    | `undefined` |
-| `reorderHandleIcon`         | `reorder-handle-icon`          | 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`.                                                                                                                                                                                                                                                                                                                                                                                                               | `string`     | `undefined` |
-| `reorderHandleIconKeyboard` | `reorder-handle-icon-keyboard` | 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).                                                                                                                                                                                                                                                           | `string`     | `undefined` |
-| `rowReorderable`            | `row-reorderable`              | 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.                                                                                                                                                                                                                           | `boolean`    | `undefined` |
-| `selectable`                | `selectable`                   | 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. | `boolean`    | `undefined` |
-| `selectedValues`            | --                             | <span style="color:red">**[DEPRECATED]**</span> 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.<br/><br/>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `string[]`   | `[]`        |
-| `sortableColumns`           | --                             | <span style="color:red">**[DEPRECATED]**</span> Use the compositional slot-based API instead. Will be removed in a future major release.  Manually determined if the column is sortable.<br/><br/>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `boolean[]`  | `[]`        |
-| `striped`                   | `striped`                      | Toggles an optional styling of the background of each even row of the table body.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `boolean`    | `undefined` |
-## Events
-| Event                | Description                                                                                                                                                                                                                                                                                                                                                                                                                                 | Type                                         |
-| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- |
-| `rowOrderChange`     | Emitted after body rows are reordered via drag-and-drop (compositional `row-reorderable` mode).                                                                                                                                                                                                                                                                                                                                             | `CustomEvent<XplTableRowOrderChangeDetail>`  |
-| `rowSelectionChange` | Emitted when row selection changes in compositional `selectable` mode. 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.) | `CustomEvent<{ selectedRowIds: string[]; }>` |
-| `sortChanged`        | 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.                               | `CustomEvent<XplTableSortChangedDetail>`     |
-| `tableSelect`        | Callback function that is called when the checkbox for a row of a `multiselect` table is checked.                                                                                                                                                                                                                                                                                                                                           | `CustomEvent<any>`                           |
-## Slots
-| Slot                      | Description                                                                                                                                      |
-| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-|                           | `xpl-table-header`, `xpl-table-body`, and optional `xpl-table-footer`.                                                                           |
-| `"toolbar-actions-left"`  | Bulk actions in the selection toolbar (left group). Only when `selectable` is set; the toolbar is shown only while at least one row is selected. |
-| `"toolbar-actions-right"` | Bulk actions in the selection toolbar (right group). Same visibility as `toolbar-actions-left`.                                                  |
-## Dependencies
-### Depends on
-- [xpl-table-header-cell](xpl-table-header-cell)
-- [xpl-table-cell](xpl-table-cell)
-- [xpl-icon](../xpl-icon)
-- [xpl-table-footer-cell](xpl-table-footer-cell)
-### Graph
-```mermaid
-graph TD;
-  xpl-table --> xpl-table-header-cell
-  xpl-table --> xpl-table-cell
-  xpl-table --> xpl-icon
-  xpl-table --> xpl-table-footer-cell
-  xpl-table-header-cell --> xpl-icon
-  xpl-table-header-cell --> xpl-checkbox
-  style xpl-table fill:#f9f,stroke:#333,stroke-width:4px
-```
-----------------------------------------------
-*Built with [StencilJS](https://stenciljs.com/)*
+# xpl-table
+Tables are used to organize and display information from a data set.
+<!-- Auto Generated Below -->
+## Properties
+| Property          | Attribute     | Description                                                                                                                 | Type         | Default     |
+| ----------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------- | ------------ | ----------- |
+| `columns`         | --            | The header values for each column.                                                                                          | `string[]`   | `undefined` |
+| `data`            | --            | The data for the body of the table.                                                                                         | `string[][]` | `undefined` |
+| `footer`          | --            | The data for the footer of the table.                                                                                       | `string[][]` | `undefined` |
+| `freeze`          | `freeze`      | When true, the first column of the table is sticky and will cover the leftmost rows in a horizontally scrollable container. | `boolean`    | `undefined` |
+| `isSortable`      | `is-sortable` | Toggles to show the sort button on each table head                                                                          | `boolean`    | `false`     |
+| `multiselect`     | `multiselect` | Toggles a selectable checkbox for each row in the table                                                                     | `boolean`    | `undefined` |
+| `selectedValues`  | --            | The values for the input for each row when multiselect is activated.                                                        | `string[]`   | `[]`        |
+| `sortableColumns` | --            | Manually determined if the column is sortable                                                                               | `boolean[]`  | `[]`        |
+| `striped`         | `striped`     | Toggles an optional styling of the background of each even row of the table body.                                           | `boolean`    | `undefined` |
+## Events
+| Event         | Description                                                                                                                                                                                                               | Type                                                                       |
+| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- |
+| `sortChanged` | Emits an event whenever the sort changes. The 'sortChanged' event passes an object with colNum (number), colName (string), sortTypeArr(string[]). The default action can be overridden by calling event.preventDefault(). | `CustomEvent<{ colNum: number; colName: string; sortTypeArr: string[]; }>` |
+| `tableSelect` | Callback function that is called when the checkbox for a row of a `multiselect` table is checked                                                                                                                          | `CustomEvent<any>`                                                         |
+## Dependencies
+### Depends on
+- [xpl-icon](../xpl-icon)
+### Graph
+```mermaid
+graph TD;
+  xpl-table --> xpl-icon
+  style xpl-table fill:#f9f,stroke:#333,stroke-width:4px
+```
+----------------------------------------------
+*Built with [StencilJS](https://stenciljs.com/)*

package/dist/docs/{xpl-table/xpl-table-header → xpl-table-header}/readme.md RENAMED Viewed

@@ -1,13 +1,13 @@
-# xpl-table-header
-Semantic wrapper for the header **row group** in a compositional `xpl-table` (`role="rowgroup"`). Place one `xpl-table-row` (with `xpl-table-header-cell` children) inside.
-> **Note:** This component is currently in beta. Use with caution as it may have breaking changes in future releases.
-<!-- Auto Generated Below -->
-----------------------------------------------
-*Built with [StencilJS](https://stenciljs.com/)*
+# xpl-table-header
+Component parts used to assemble the Dynamic Table.
+> **Note:** This component is currently in beta. Use with caution as it may have breaking changes in future releases.
+<!-- Auto Generated Below -->
+----------------------------------------------
+*Built with [StencilJS](https://stenciljs.com/)*

package/dist/docs/xpl-table-header-cell/readme.md ADDED Viewed

@@ -0,0 +1,47 @@
+# xpl-table-header-cell
+> **Note:** This component is currently in beta. Use with caution as it may have breaking changes in future releases.
+The `icon` property accepts icon names as strings. See [xpl-icon available icons](../xpl-icon/ICONS.md) for the complete list.
+---
+<!-- Auto Generated Below -->
+## Properties
+| Property   | Attribute  | Description                                                                                              | Type                              | Default     |
+| ---------- | ---------- | -------------------------------------------------------------------------------------------------------- | --------------------------------- | ----------- |
+| `icon`     | `icon`     | Icon to display in the cell.  See [xpl-icon available icons](../xpl-icon/ICONS.md) for valid icon names. | `string`                          | `undefined` |
+| `label`    | `label`    |                                                                                                          | `string`                          | `''`        |
+| `sortable` | `sortable` |                                                                                                          | `boolean`                         | `false`     |
+| `type`     | `type`     |                                                                                                          | `"checkbox" \| "icon" \| "label"` | `'label'`   |
+| `width`    | `width`    |                                                                                                          | `number`                          | `undefined` |
+## Events
+| Event         | Description                              | Type                                     |
+| ------------- | ---------------------------------------- | ---------------------------------------- |
+| `sortChanged` | Emitted when the sort direction changes. | `CustomEvent<"asc" \| "desc" \| "none">` |
+## Dependencies
+### Depends on
+- [xpl-checkbox](../xpl-checkbox)
+- [xpl-icon](../xpl-icon)
+### Graph
+```mermaid
+graph TD;
+  xpl-table-header-cell --> xpl-checkbox
+  xpl-table-header-cell --> xpl-icon
+  style xpl-table-header-cell fill:#f9f,stroke:#333,stroke-width:4px
+```
+----------------------------------------------
+*Built with [StencilJS](https://stenciljs.com/)*

package/dist/docs/xpl-toggle/readme.md CHANGED Viewed

@@ -7,15 +7,22 @@ A Toggle is a type of form control that is used to switch between enabled and di
 ## Properties
-| Property      | Attribute     | Description                                                                    | Type                   | Default     |
-| ------------- | ------------- | ------------------------------------------------------------------------------ | ---------------------- | ----------- |
-| `checked`     | `checked`     | Whether the toggle is `on`                                                     | `boolean`              | `undefined` |
-| `description` | `description` | The toggle's description appears *above* the toggle.                           | `string`               | `undefined` |
-| `disabled`    | `disabled`    | Whether the toggle is disabled                                                 | `boolean`              | `undefined` |
-| `heading`     | `heading`     | The toggle's heading appears *above* the toggle.                               | `string`               | `undefined` |
-| `label`       | `label`       | The toggle's label appears *to the right of* the toggle.                       | `string`               | `undefined` |
-| `name`        | `name`        | The name attribute for the html input. (submittted in form as name/value pair) | `string`               | `undefined` |
-| `variant`     | `variant`     | The size of the toggle -- `default` or `small`                                 | `"default" \| "small"` | `'default'` |
+| Property      | Attribute     | Description                                                                   | Type                   | Default     |
+| ------------- | ------------- | ----------------------------------------------------------------------------- | ---------------------- | ----------- |
+| `checked`     | `checked`     | Whether the toggle is `on`                                                    | `boolean`              | `undefined` |
+| `description` | `description` | The toggle's description appears *above* the toggle.                          | `string`               | `undefined` |
+| `disabled`    | `disabled`    | Whether the toggle is disabled                                                | `boolean`              | `undefined` |
+| `heading`     | `heading`     | The toggle's heading appears *above* the toggle.                              | `string`               | `undefined` |
+| `label`       | `label`       | The toggle's label appears *to the right of* the toggle.                      | `string`               | `undefined` |
+| `name`        | `name`        | The name attribute for the html input. (submitted in form as name/value pair) | `string`               | `undefined` |
+| `variant`     | `variant`     | The size of the toggle -- `default` or `small`                                | `"default" \| "small"` | `'default'` |
+## Events
+| Event          | Description                                                                       | Type                   |
+| -------------- | --------------------------------------------------------------------------------- | ---------------------- |
+| `toggleChange` | Emitted when the toggle checked state changes. Detail is the new `checked` value. | `CustomEvent<boolean>` |
 ----------------------------------------------