@xplortech/apollo-core 3.2.1 → 3.4.0

package/dist/docs/xpl-side-nav/xpl-side-nav-item/readme.md

@@ -240,6 +240,15 @@ anchor container (`link` mode). Three slot positions are available:
 | `navigate`       | Emitted when a leaf item is activated (pointer click or keyboard activation of the native `<button>`). Expandable parents use `expandedChange` instead. | `CustomEvent<void>`    |
 
 
+## Slots
+
+| Slot         | Description                                                                                                                                                         |
+| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+|              | Nested `xpl-side-nav-item` children (expandable parents only).                                                                                                      |
+| `"leading"`  | Leading icon column. The `icon` prop renders an `xpl-icon` here when no slotted `leading` content is present.                                                       |
+| `"trailing"` | Trailing content (e.g. `xpl-icon icon="external-link"`). On parent rows (`has-children`), an auto chevron renders here when no `trailing` slot content is provided. |
+
+
 ## Dependencies
 
 ### Depends on

package/dist/docs/xpl-side-nav/xpl-side-nav-section/readme.md

@@ -108,6 +108,14 @@ row. The wrapper is suppressed when the slot is empty.
 | `expandedChange` | Emitted when the expanded state changes (collapsible sections only). Detail is the new expanded value. | `CustomEvent<boolean>` |
 
 
+## Slots
+
+| Slot      | Description                                                                                                           |
+| --------- | --------------------------------------------------------------------------------------------------------------------- |
+|           | Section children (nested `xpl-side-nav-item` elements, optionally separated by dividers).                             |
+| `"badge"` | Optional badge (e.g. `xpl-badge`) rendered in the header title row. The wrapper is suppressed when the slot is empty. |
+
+
 ## Dependencies
 
 ### Depends on

package/dist/docs/xpl-slideout/readme.md

@@ -45,6 +45,19 @@ The `.content.has-shadow` shadow is a scroll affordance applied only to the top
 | `isOpenChange` | Emitted when the isOpen property changes. | `CustomEvent<boolean>` |
 
 
+## Slots
+
+| Slot          | Description                                                          |
+| ------------- | -------------------------------------------------------------------- |
+| `"content"`   | The main scrollable body content.                                    |
+| `"primary"`   | The primary footer action. Rendered only when `showFooter` is set.   |
+| `"search"`    | Search content rendered in the header.                               |
+| `"secondary"` | The secondary footer action. Rendered only when `showFooter` is set. |
+| `"subtitle"`  | Subtitle content rendered below the title.                           |
+| `"tertiary"`  | The tertiary footer action. Rendered only when `showFooter` is set.  |
+| `"title"`     | The slideout header title.                                           |
+
+
 ## Dependencies
 
 ### Depends on

package/dist/docs/xpl-spotlight/readme.md

@@ -138,6 +138,7 @@ The component relies on Foundation purpose tokens in `spotlight.css` so light/da
 | Host stacking | `var(--xpl-z-index-800)` |
 | Placeholder pattern | `var(--xpl-background-surface-subtle)` |
 | Heading text | `var(--xpl-text-default)` |
+| Heading line-height | `var(--xpl-line-height-title-3)` (title-3) |
 | Body text | `var(--xpl-text-default)` |
 | Step text | `var(--xpl-text-subdued)` |
 | Open/closed visibility | `opacity` transition on `.xpl-spotlight--visible` |

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

@@ -9,6 +9,18 @@ Tables are used to organize and display information from a data set.
 
 Composable **selection** (`selectable`), **toolbar**, and copy-paste examples live under **[Usage](#usage)** below (read the breaking-change note first if you are migrating from auto-injected selection cells).
 
+### Breaking change — global table class names (Apollo Core 3.0.0)
+
+Apollo Core 3.0.0 introduced the compositional table ([#982](https://github.com/xplor/apollo/pull/982)) and ships global CSS for `.xpl-table`, `.xpl-table-row`, `.xpl-table-cell`, `.xpl-table-header-*`, `.xpl-table-body`, and `.xpl-table-footer-*`. In 2.x many of these class names had **no Apollo styles** (or only applied on native `<table>` via `.xpl-table`). These styles are **not scoped** to the `<xpl-table>` element — any element carrying these class names picks them up. If your application used these names as styling hooks on its own native table markup, upgrading to 3.x can break layout.
+
+| Symptom | Typical cause | Fix |
+| --- | --- | --- |
+| All table rows render side by side in one line | `xpl-table-row` class hook on native `<tr>` applies `display: contents` | Remove the hook class from native rows, or migrate to `<xpl-table-row>` inside `<xpl-table>` |
+| Native `<table class="xpl-table">` layout is destroyed | Compositional grid targets the `.xpl-table` **class** (`display: grid` + `grid-template-columns`), so it also matches native `<table class="xpl-table">` | Add `xpl-table--legacy`: `<table class="xpl-table xpl-table--legacy">` |
+| Sticky freeze column lost on native tables | Compositional `.xpl-table--freeze` sticky rules target compositional cell classes (`.xpl-table-cell` etc.); the 2.x native-table freeze lives under `.xpl-table--legacy.xpl-table--freeze` | Add `xpl-table--legacy` to the native `<table>` |
+
+**`xpl-table--legacy`:** opt-in class for native `<table>` markup (or the deprecated `columns` / `data` render path) that restores pre-compositional Apollo table styling. Scheduled for removal in **Apollo Core 4.0.0** — migrate to compositional `<xpl-table>` or application-owned table styles before then.
+
 ### 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**.

package/dist/docs/xpl-table/xpl-table-body/readme.md

@@ -11,6 +11,13 @@ Row group for compositional table body content. Uses `display: contents` so slot
 <!-- Auto Generated Below -->
 
 
+## Slots
+
+| Slot | Description                               |
+| ---- | ----------------------------------------- |
+|      | The body rows (`xpl-table-row` elements). |
+
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*

package/dist/docs/xpl-table/xpl-table-cell/readme.md

@@ -35,6 +35,13 @@ Extends `.xpl-table-cell-base` (`table-cell-base.css`); row states (selected, di
 | `underline` | `underline` | Adds an underline to cell text.                                                                 | `boolean`                       | `false`  |
 
 
+## Slots
+
+| Slot | Description       |
+| ---- | ----------------- |
+|      | The cell content. |
+
+
 ## Dependencies
 
 ### Used by

package/dist/docs/xpl-table/xpl-table-footer/readme.md

@@ -11,6 +11,13 @@ Row group for compositional table footer content. Uses `display: contents` so sl
 <!-- Auto Generated Below -->
 
 
+## Slots
+
+| Slot | Description                                            |
+| ---- | ------------------------------------------------------ |
+|      | The footer content (`xpl-table-footer-cell` elements). |
+
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*

package/dist/docs/xpl-table/xpl-table-footer-cell/readme.md

@@ -22,6 +22,13 @@ Footer cell for compositional tables. Extends the shared `.xpl-table-cell-base`
 | `align`  | `align`   | Horizontal alignment of footer cell content. | `"center" \| "left" \| "right"` | `'left'` |
 
 
+## Slots
+
+| Slot | Description              |
+| ---- | ------------------------ |
+|      | The footer cell content. |
+
+
 ## Dependencies
 
 ### Used by

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

@@ -30,55 +30,62 @@ For **sortable** columns (`type="label"`), set **`sortable`** and optionally **`
 
 ---
 
-<!-- Auto Generated Below -->
-
-
-## Properties
-
-| Property            | Attribute             | Description                                                                                                                                                                                                                                    | Type                                         | Default     |
-| ------------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ----------- |
-| `align`             | `align`               | Horizontal text alignment within the header cell.                                                                                                                                                                                              | `"center" \| "left" \| "right"`              | `'left'`    |
-| `checkboxAriaLabel` | `checkbox-aria-label` | Accessible name for the header checkbox (native `aria-label`). Defaults to “Select all rows” when `type` is `checkbox`.                                                                                                                        | `string`                                     | `undefined` |
-| `checked`           | `checked`             | Whether the header checkbox is checked                                                                                                                                                                                                         | `boolean`                                    | `false`     |
-| `columnWidth`       | `column-width`        | 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.                       | `string`                                     | `undefined` |
-| `icon`              | `icon`                | Icon to display in the cell.  See [xpl-icon available icons](../xpl-icon/ICONS.md) for valid icon names.                                                                                                                                       | `string`                                     | `undefined` |
-| `indeterminate`     | `indeterminate`       | Whether the checkbox is in indeterminate (partially selected) state                                                                                                                                                                            | `boolean`                                    | `false`     |
-| `label`             | `label`               | Text to display in the cell.                                                                                                                                                                                                                   | `string`                                     | `''`        |
-| `sortDirection`     | `sort-direction`      | 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.                                                                                | `"asc" \| "desc"`                            | `undefined` |
-| `sortKey`           | `sort-key`            | 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.                                                                                                    | `string`                                     | `undefined` |
-| `sortable`          | `sortable`            | When true (and `type` is `label`), renders a sort control (button + affordance icon).                                                                                                                                                          | `boolean`                                    | `false`     |
-| `type`              | `type`                | 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'"`). | `"checkbox" \| "empty" \| "icon" \| "label"` | `'label'`   |
-| `width`             | `width`               | 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).                                                      | `number`                                     | `undefined` |
-
-
-## Events
-
-| Event                  | Description                                                                                                        | Type                                  |
-| ---------------------- | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------- |
-| `headerCheckboxChange` | Emitted when header checkbox changes                                                                               | `CustomEvent<boolean>`                |
-| `headerSortChange`     | Emitted when a sortable label header is activated. Parent `xpl-table` coordinates columns and emits `sortChanged`. | `CustomEvent<HeaderSortChangeDetail>` |
-
-
-## Dependencies
-
-### Used by
-
- - [xpl-table](..)
-
-### Depends on
-
-- [xpl-icon](../../xpl-icon)
-- [xpl-checkbox](../../xpl-checkbox)
-
-### Graph
-```mermaid
-graph TD;
-  xpl-table-header-cell --> xpl-icon
-  xpl-table-header-cell --> xpl-checkbox
-  xpl-table --> xpl-table-header-cell
-  style xpl-table-header-cell fill:#f9f,stroke:#333,stroke-width:4px
-```
-
-----------------------------------------------
-
-*Built with [StencilJS](https://stenciljs.com/)*
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property            | Attribute             | Description                                                                                                                                                                                                                                    | Type                                         | Default     |
+| ------------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ----------- |
+| `align`             | `align`               | Horizontal text alignment within the header cell.                                                                                                                                                                                              | `"center" \| "left" \| "right"`              | `'left'`    |
+| `checkboxAriaLabel` | `checkbox-aria-label` | Accessible name for the header checkbox (native `aria-label`). Defaults to “Select all rows” when `type` is `checkbox`.                                                                                                                        | `string`                                     | `undefined` |
+| `checked`           | `checked`             | Whether the header checkbox is checked                                                                                                                                                                                                         | `boolean`                                    | `false`     |
+| `columnWidth`       | `column-width`        | 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.                       | `string`                                     | `undefined` |
+| `icon`              | `icon`                | Icon to display in the cell.  See [xpl-icon available icons](../xpl-icon/ICONS.md) for valid icon names.                                                                                                                                       | `string`                                     | `undefined` |
+| `indeterminate`     | `indeterminate`       | Whether the checkbox is in indeterminate (partially selected) state                                                                                                                                                                            | `boolean`                                    | `false`     |
+| `label`             | `label`               | Text to display in the cell.                                                                                                                                                                                                                   | `string`                                     | `''`        |
+| `sortDirection`     | `sort-direction`      | 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.                                                                                | `"asc" \| "desc"`                            | `undefined` |
+| `sortKey`           | `sort-key`            | 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.                                                                                                    | `string`                                     | `undefined` |
+| `sortable`          | `sortable`            | When true (and `type` is `label`), renders a sort control (button + affordance icon).                                                                                                                                                          | `boolean`                                    | `false`     |
+| `type`              | `type`                | 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'"`). | `"checkbox" \| "empty" \| "icon" \| "label"` | `'label'`   |
+| `width`             | `width`               | 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).                                                      | `number`                                     | `undefined` |
+
+
+## Events
+
+| Event                  | Description                                                                                                        | Type                                  |
+| ---------------------- | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------- |
+| `headerCheckboxChange` | Emitted when header checkbox changes                                                                               | `CustomEvent<boolean>`                |
+| `headerSortChange`     | Emitted when a sortable label header is activated. Parent `xpl-table` coordinates columns and emits `sortChanged`. | `CustomEvent<HeaderSortChangeDetail>` |
+
+
+## Slots
+
+| Slot | Description                             |
+| ---- | --------------------------------------- |
+|      | The header cell content (column label). |
+
+
+## Dependencies
+
+### Used by
+
+ - [xpl-table](..)
+
+### Depends on
+
+- [xpl-icon](../../xpl-icon)
+- [xpl-checkbox](../../xpl-checkbox)
+
+### Graph
+```mermaid
+graph TD;
+  xpl-table-header-cell --> xpl-icon
+  xpl-table-header-cell --> xpl-checkbox
+  xpl-table --> xpl-table-header-cell
+  style xpl-table-header-cell fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

package/dist/docs/xpl-table/xpl-table-row/readme.md

@@ -33,6 +33,13 @@ Row state styles target descendant `.xpl-table-cell` nodes (see `table-row.css`)
 | `selected` | `selected` | Whether the row is visually selected.       | `boolean` | `false`     |
 
 
+## Slots
+
+| Slot | Description                                |
+| ---- | ------------------------------------------ |
+|      | The row cells (`xpl-table-cell` elements). |
+
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*

package/dist/docs/xpl-table-header/readme.md

@@ -8,6 +8,13 @@ Component parts used to assemble the Dynamic Table.
 <!-- Auto Generated Below -->
 
 
+## Slots
+
+| Slot | Description                                            |
+| ---- | ------------------------------------------------------ |
+|      | The header content (`xpl-table-header-cell` elements). |
+
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*

package/dist/docs/xpl-tag/readme.md

@@ -315,8 +315,8 @@ Reorder / multi-container logic is unchanged: listen for native `dragstart`, `dr
 | Height (default) | `var(--xpl-size-150)` (24px) |
 | Height (small) | `var(--xpl-size-125)` (20px) |
 | Border radius | `var(--xpl-border-radius-button)` |
-| Typography (default) | `var(--xpl-font-size-body)` / `var(--xpl-font-weight-normal)` |
-| Typography (small) | `var(--xpl-font-size-callout)` / `var(--xpl-font-weight-semibold)` |
+| Typography (default) | `var(--xpl-font-size-body)` / `var(--xpl-font-weight-normal)` / `var(--xpl-line-height-body)` |
+| Typography (small) | `var(--xpl-font-size-callout)` / `var(--xpl-font-weight-semibold)` / `var(--xpl-line-height-callout)` |
 | Background (dragging) | `var(--xpl-background-surface-information-bold)` |
 | Cursor (draggable) | `cursor: grab` → `cursor: grabbing` while dragging |
 
@@ -382,6 +382,13 @@ These aliases will be removed in a future major version. New code should target
 | `tagRemove`    | Emitted when the tag dismiss (×) button is clicked                                                                                                                                                                                                                                                                                               | `CustomEvent<void>`               |
 
 
+## Slots
+
+| Slot | Description            |
+| ---- | ---------------------- |
+|      | The tag label content. |
+
+
 ## Dependencies
 
 ### Used by

package/dist/docs/xpl-toast/readme.md

@@ -159,6 +159,14 @@ Like `xpl-banner`, the messaging backgrounds resolve to transparent in dark mode
 | `variant`     | `variant`     | The sentiment of the toast.                                                                                                                                                                                                                                                   | `"neutral" \| "success" \| "warning"` | `'neutral'` |
 
 
+## Slots
+
+| Slot       | Description                                                                      |
+| ---------- | -------------------------------------------------------------------------------- |
+| `"action"` | Optional action content (e.g. a button) rendered on the right side of the toast. |
+| `"title"`  | The toast title text.                                                            |
+
+
 ## Dependencies
 
 ### Depends on

package/dist/docs/xpl-toolbar/readme.md

@@ -6,7 +6,7 @@
 
 The toolbar is an **always-dark** selection bar (nav-rail pattern) — its surface stays dark
 in both light and dark themes. Styling comes from Apollo Foundation tokens
-(`packages/apollo-core/src/css/toolbar.css`):
+(`packages/apollo-core/src/components/xpl-toolbar/toolbar.css`):
 
 | Element | Property | Token | Resolves (light / dark) |
 | --- | --- | --- | --- |
@@ -34,6 +34,14 @@ in both light and dark themes. Styling comes from Apollo Foundation tokens
 | `selectedItemCount` | `selected-item-count` | The number of selected items to display in the toolbar. | `number` | `0`     |
 
 
+## Slots
+
+| Slot              | Description                                         |
+| ----------------- | --------------------------------------------------- |
+| `"actions-left"`  | Actions rendered in the left group of the toolbar.  |
+| `"actions-right"` | Actions rendered in the right group of the toolbar. |
+
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*

package/dist/docs/xpl-tooltip/readme.md

@@ -44,6 +44,13 @@ Tokens used by this component from `@xplortech/apollo-foundation`.
 | `text`      | `text`       | The tooltip text to display                     | `string`                                                                                                               | `undefined`    |
 
 
+## Slots
+
+| Slot | Description                                     |
+| ---- | ----------------------------------------------- |
+|      | The trigger element the tooltip is attached to. |
+
+
 ## Dependencies
 
 ### Used by

package/dist/docs/xpl-top-nav/xpl-nav-header-menu/readme.md

@@ -2,7 +2,7 @@
 
 Profile block (username, email) and a default slot for menu rows. Typically inside **`xpl-popover`** or **`xpl-dropdown`** under a user trigger.
 
-**Styles** for this component live in **`packages/apollo-core/src/css/top-nav.css`** (with **`xpl-top-nav-item`** rules in the same file).
+**Styles** for this component live in **`packages/apollo-core/src/components/xpl-top-nav/top-nav.css`** (with **`xpl-top-nav-item`** rules in the same file).
 
 ## Usage
 
@@ -73,6 +73,7 @@ values even when the page root is light (same contract as **`xpl-top-nav`** / **
 
 | Slot                   | Description                                                                                                                                                                   |
 | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+|                        | Menu items (**`xpl-top-nav-item`** rows and optional **`xpl-divider`** separators) rendered below the profile block.                                                          |
 | `"right-aside-mobile"` | Optional actions **below** **`username`** / **`email`** and **above** the default-slot list (e.g. mobile Inbox). Hidden on wide viewports by default (see **`top-nav.css`**). |
 
 

package/dist/docs/xpl-top-nav/xpl-top-nav-item/readme.md

@@ -116,6 +116,7 @@ Type: `Promise<void>`
 
 | Slot              | Description                                                                                                                                                                                                                                                                                              |
 | ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+|                   | The row label content. Used when the **`label`** prop is not set.                                                                                                                                                                                                                                        |
 | `"dropdown"`      | Panel content (e.g. `<xpl-top-nav-menu>`). Presence of this slot makes the row a disclosure trigger.                                                                                                                                                                                                     |
 | `"leading-icon"`  | Illustrative icon before the label. Overrides the **`icon`** prop when present.                                                                                                                                                                                                                          |
 | `"trailing-icon"` | Functional icon after the label (e.g. **`external-link`** for "opens in new window"). When **`slot="dropdown"`** is present and no **`trailing-icon`** content is slotted, an auto chevron renders here: **`chevron-down`** on the desktop flyout, **`chevron-right`** on the mobile cascade (drill-in). |

package/dist/docs/xpl-top-nav/xpl-top-nav-menu/readme.md

@@ -72,6 +72,7 @@ resolve to dark-mode values even when the page root is light (consistent with th
 
 | Slot          | Description                  |
 | ------------- | ---------------------------- |
+|               | The default slot             |
 | `"(default)"` | **`xpl-top-nav-item`** rows. |
 
 

package/dist/docs/xpl-utility-bar/readme.md

@@ -49,6 +49,14 @@ The utility bar uses Apollo Foundation purpose-specific tokens, which theme auto
 | `navOpen` |             | `CustomEvent<boolean>` |
 
 
+## Slots
+
+| Slot      | Description                                                                            |
+| --------- | -------------------------------------------------------------------------------------- |
+| `"aside"` | Content rendered at the start of the bar, next to the nav-control toggle when present. |
+| `"main"`  | Main content of the utility bar.                                                       |
+
+
 ## Dependencies
 
 ### Depends on