@xplortech/apollo-core 2.6.0 → 2.7.1

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

@@ -1,12 +1,65 @@
 # xpl-panel
 
-## Overview
+`xpl-panel` is a stateless, composable container that defines a section on a page and can house any type of content. Panels are not dismissible and may show a colored top accent bar. Padding is applied evenly to **`.xpl-panel__content`** (all sides use the same spacing token).
+
+## Accessibility
+
+The panel is a generic layout container: it does not define a landmark role or trap focus. Place interactive controls in the default slot. For a named region, wrap the panel (or its content) in an element with `role="region"` and an accessible name (e.g. `aria-label`) when the panel represents a distinct section.
+
+When an accent is present, the accent bar is a decorative `div` with `aria-hidden="true"` so assistive technologies ignore it; meaning comes from slot content.
+
+## Token use
+
+**Host (surface)**
+
+
+| Property      | Token                                   |
+| ------------- | --------------------------------------- |
+| Background    | `var(--xpl-background-surface-default)` |
+| Border color  | `var(--xpl-border-default)`             |
+| Border width  | `var(--xpl-border-small)`               |
+| Border radius | `var(--xpl-border-radius-default)`      |
+
+
+**Accent bar** (`accent` ≠ `none`): height `var(--xpl-size-050)`; top radii `var(--xpl-border-radius-default)`, bottom `var(--xpl-border-radius-none)`.
+
+
+| `accent`    | Background token                         |
+| ----------- | ---------------------------------------- |
+| `primary`   | `var(--xpl-background-brand-primary)`    |
+| `secondary` | `var(--xpl-background-brand-secondary)`  |
+| `positive`  | `var(--xpl-background-accent-positive)`  |
+| `negative`  | `var(--xpl-background-accent-negative)`  |
+| `highlight` | `var(--xpl-background-accent-highlight)` |
+
+
+Light and dark mode follow Apollo Foundation purpose-specific tokens; the component does not use `.dark` overrides in its CSS.
+
+## Content padding by viewport
+
+The `padding` prop sets **content** padding via `var(--xpl-space-*)` on `.xpl-panel__content`. Two `max-width` media queries step values down on smaller viewports (`panel.css`).
+
+### Matrix: `padding` × viewport
+
+
+| Viewport   | Approx. width       | `padding="default"`          | `padding="tight"`            | `padding="loose"`            |
+| ---------- | ------------------- | ---------------------------- | ---------------------------- | ---------------------------- |
+| **Large**  | > 768px             | `var(--xpl-space-24)` · 24px | `var(--xpl-space-16)` · 16px | `var(--xpl-space-40)` · 40px |
+| **Tablet** | ≤ 768px and > 480px | same as large                | same as large                | `var(--xpl-space-32)` · 32px |
+| **Mobile** | ≤ 480px             | `var(--xpl-space-16)` · 16px | `var(--xpl-space-8)` · 8px   | `var(--xpl-space-24)` · 24px |
+
 
-XPL-Panel is a stateless, composable container component that defines a section on a page and can house any type of content. Panels are not dismissible and may contain a top accent in 5 standard accent colors.
+**How the breakpoints stack**
+
+1. Base rules apply the **Large** row for all widths.
+2. At `max-width: 768px`, only **loose** changes (tablet row for that column).
+3. At `max-width: 480px`, **default**, **tight**, and **loose** all use the **Mobile** row.
+
+Pixel values match the Foundation `space/`* scale; if tokens change in a future Foundation release, spacing updates without component code changes.
 
 ## Usage
 
-### Basic panel (no accent)
+### Web component
 
 ```html
 <xpl-panel>
@@ -14,27 +67,38 @@ XPL-Panel is a stateless, composable container component that defines a section
 </xpl-panel>
 ```
 
-### Panel with accent
-
 ```html
 <xpl-panel accent="primary">
   <p>Content with a primary accent bar.</p>
 </xpl-panel>
 ```
 
-Available accent values: `none` (default), `primary`, `secondary`, `positive`,
-`negative`, `highlight`.
+Available accent values: `none` (default), `primary`, `secondary`, `positive`, `negative`, `highlight`.
 
 ### Padding density
 
 ```html
 <xpl-panel padding="tight">
-  <p>Tighter padding on all breakpoints.</p>
+  <p>Tighter padding on small screens (see content padding matrix).</p>
 </xpl-panel>
 ```
 
-Available padding values: `default`, `tight`, `loose`. Padding is responsive
-and automatically scales down at tablet (768 px) and mobile (480 px) breakpoints.
+Use `padding="default"` | `"tight"` | `"loose"`. **default** and **tight** keep the same values from large screens through tablet; only at **≤480px** do they step down. **loose** steps down at **≤768px** (tablet) and again at **≤480px** (mobile).
+
+### HTML/CSS (no Stencil)
+
+Use the same BEM classes the component applies on the host. The accent bar must stay decorative (`aria-hidden="true"`).
+
+```html
+<div class="xpl-panel xpl-panel--accent-primary xpl-panel--padding-default">
+  <div aria-hidden="true" class="xpl-panel__accent"></div>
+  <div class="xpl-panel__content">
+    <p>Panel body</p>
+  </div>
+</div>
+```
+
+Omit `xpl-panel--accent-*` when `accent` is `none`; do not render `.xpl-panel__accent`.
 
 ### Composing with other components
 
@@ -46,14 +110,41 @@ and automatically scales down at tablet (768 px) and mobile (480 px) breakpoints
 </xpl-panel>
 ```
 
+### Content styling
+
+The panel intentionally does **not** apply default typography or color styles to slotted content. It provides the surface (background, border, accent) and content padding — nothing more. This means text inside the panel inherits whatever styles the surrounding page defines.
+
+To ensure consistent, theme-aware content you should use Apollo Foundation tokens on elements inside the slot:
+
+```html
+<xpl-panel>
+  <h3 class="xpl-text-title-4" style="color: var(--xpl-text-strong)">Section title</h3>
+  <p class="xpl-text-body" style="color: var(--xpl-text-default)">
+    Body copy that adapts to light and dark mode automatically.
+  </p>
+  <p class="xpl-text-caption" style="color: var(--xpl-text-subdued)">
+    Subdued helper text.
+  </p>
+</xpl-panel>
+```
+
+| Purpose | Recommended token |
+| ------- | ----------------- |
+| Primary text | `var(--xpl-text-default)` |
+| Headings / emphasis | `var(--xpl-text-strong)` |
+| Secondary / helper text | `var(--xpl-text-subdued)` |
+| Disabled text | `var(--xpl-text-disabled)` |
+| Links | `var(--xpl-text-link-default)` |
+
+Using purpose-specific text tokens guarantees content switches correctly in dark mode. If slot content uses raw colors (e.g. `color: #333`) or relies on browser defaults, text will **not** adapt when the panel's ancestor has the `dark` class.
+
 ### Dark mode
 
-Wrap with an ancestor that has the `dark` class — the panel automatically
-adapts its background, border, and accent colors.
+Use an ancestor with the `dark` class — surface, border, and accent tokens update via Foundation.
 
 ## Design
 
-- [Figma: XPL-Panel](https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=1546-136120&p=f&t=SMeY3LnfDOiNmx1p-11)
+- [Figma: xpl-panel](https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=1546-136120&p=f)
 
 <!-- Auto Generated Below -->
 
@@ -65,10 +156,10 @@ type of content. Panels are not dismissible and may contain a top accent.
 
 ## Properties
 
-| Property  | Attribute | Description                                                                                                                                                                                                                                                                         | Type                                                                            | Default     |
-| --------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- | ----------- |
-| `accent`  | `accent`  | Color accent bar displayed at the top of the panel.  - `none` – no accent (default) - `primary` – brand primary color - `secondary` – brand secondary color - `positive` – positive / success color - `negative` – negative / error color - `highlight` – highlight / warning color | `"highlight" \| "negative" \| "none" \| "positive" \| "primary" \| "secondary"` | `'none'`    |
-| `padding` | `padding` | Padding density applied to the content area. Responsive: scales down at tablet and mobile breakpoints.  - `default` – 24 px desktop / 16 px tablet+mobile - `tight`   – 16 px desktop / 8 px tablet+mobile - `loose`   – 40 px desktop / 32 px tablet / 24 px mobile                | `"default" \| "loose" \| "tight"`                                               | `'default'` |
+| Property  | Attribute | Description                                                                                                                                                                                                                                                                            | Type                                                                            | Default     |
+| --------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- | ----------- |
+| `accent`  | `accent`  | Color accent bar displayed at the top of the panel.  - `none` – no accent (default) - `primary` – brand primary color - `secondary` – brand secondary color - `positive` – positive / success color - `negative` – negative / error color - `highlight` – highlight / warning color    | `"highlight" \| "negative" \| "none" \| "positive" \| "primary" \| "secondary"` | `'none'`    |
+| `padding` | `padding` | Padding density applied to the content area. (default and tight keep desktop padding through tablet; mobile ≤480px).  - `default` – 24 px desktop & tablet / 16 px mobile - `tight`   – 16 px desktop & tablet / 8 px mobile - `loose`   – 40 px desktop / 32 px tablet / 24 px mobile | `"default" \| "loose" \| "tight"`                                               | `'default'` |
 
 
 ## Slots

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

@@ -35,11 +35,13 @@ A popover is an overlay that pops up over all other layers and is triggered by a
 ### Used by
 
  - [xpl-input-color](../xpl-input/xpl-input-color)
+ - [xpl-top-nav](../xpl-top-nav)
 
 ### Graph
 ```mermaid
 graph TD;
   xpl-input-color --> xpl-popover
+  xpl-top-nav --> xpl-popover
   style xpl-popover fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

package/dist/docs/xpl-progress-indicator/readme.md

@@ -0,0 +1,234 @@
+# xpl-progress-indicator
+
+A progress indicator that guides users through linear, multi-step tasks by displaying completed, current, and future steps. Progress indicators help manage user expectations by showing their position in a multi-step process, the total number of steps, and overall progress toward task completion.
+
+## Usage
+
+```html
+<!-- Basic horizontal progress with numbered steps -->
+<xpl-progress-indicator steps='["Details", "Location", "Review"]' current-step="1"></xpl-progress-indicator>
+
+<!-- Vertical layout for side navigation -->
+<xpl-progress-indicator steps='["Step 1", "Step 2", "Step 3"]' current-step="0" layout="vertical"></xpl-progress-indicator>
+
+<!-- Dots only (no numbers) with labels -->
+<xpl-progress-indicator steps='["Upload", "Process", "Complete"]' current-step="1" show-numbers="false"></xpl-progress-indicator>
+
+<!-- Numbers only (no labels) -->
+<xpl-progress-indicator steps='["Step 1", "Step 2", "Step 3"]' current-step="1" show-labels="false"></xpl-progress-indicator>
+
+<!-- Minimal dots only -->
+<xpl-progress-indicator steps='["Step 1", "Step 2", "Step 3"]' current-step="1" show-numbers="false" show-labels="false"></xpl-progress-indicator>
+```
+
+## Layouts
+
+### Horizontal (Default)
+
+The horizontal layout displays steps in a row with a 16px gap between each step. Steps are connected by absolute-positioned lines that maintain consistent spacing from circle edges. Step labels appear below the circles and wrap naturally when the container narrows. This layout is ideal for page headers and top-level step navigation in desktop applications.
+
+The layout is responsive: steps distribute equally via `flex: 1`, with a minimum width of 32px (the circle size) to prevent overlap. Labels wrap within their column using `overflow-wrap: break-word`. When the container becomes too narrow for all steps, the progress indicator will overflow horizontally rather than squashing elements together.
+
+```html
+<xpl-progress-indicator steps='["Details", "Location", "Instructor", "Review"]' current-step="1"></xpl-progress-indicator>
+```
+
+### Vertical
+
+The vertical layout stacks steps vertically with connecting lines running downward. Labels appear to the right of each circle. This layout works well for side navigation panels and narrow spaces.
+
+```html
+<xpl-progress-indicator steps='["Step 1", "Step 2", "Step 3"]' current-step="1" layout="vertical"></xpl-progress-indicator>
+```
+
+## Display Options
+
+### Step Numbers
+
+By default, each step circle displays its index number (1, 2, 3, etc.). Set `show-numbers="false"` to display dots instead of numbers for a more minimal appearance.
+
+| Option | Visual |
+|--------|--------|
+| `show-numbers="true"` (default) | Numbered circles |
+| `show-numbers="false"` | Dots for waiting/active, checkmark for finished |
+
+### Step Labels
+
+Step labels appear below (horizontal) or beside (vertical) each circle by default. Set `show-labels="false"` to hide labels and show only the step indicators.
+
+In horizontal mode, labels are constrained to the width of their step column and will wrap naturally using `overflow-wrap: break-word` when the container narrows. This prevents labels from colliding with neighboring steps.
+
+| Option | Horizontal | Vertical |
+|--------|------------|----------|
+| `show-labels="true"` (default) | Labels below circles, wrap when narrow | Labels beside circles |
+| `show-labels="false"` | Circles only | Circles only |
+
+## Step States
+
+Each step can be in one of three states, determined by comparing the step index to `current-step`:
+
+| State | Visual | Description |
+|-------|--------|-------------|
+| **Waiting** | Gray circle/dot | Steps after the current step |
+| **Active** | Purple bordered circle | The current step (`current-step` index) |
+| **Finished** | Filled purple circle with checkmark | Steps before the current step |
+
+## Icon Mapping
+
+The progress component uses `xpl-icon` for the finished step indicator:
+
+| State | Icon Name |
+|-------|-----------|
+| Finished | `check-2` |
+
+## Design Tokens
+
+The progress component uses the following Apollo Foundation tokens:
+
+### Horizontal Layout
+
+| Element | Property | Token/Value |
+|---------|----------|-------------|
+| Container | Min width | `0px` (fluid) |
+| | Width | `100%` |
+| | Padding horizontal | `--xpl-space-16` (16px) |
+| | Gap (between steps) | `--xpl-space-16` (16px) |
+| | Flex | `1` (equal width distribution) |
+| Step Circle | Width/Height | `--xpl-size-200` (32px) |
+| | Border | `--xpl-border-default` (waiting), `--xpl-border-focus` (active) |
+| | Border radius | `--xpl-border-radius-full` |
+| | Font size | `--xpl-font-size-title-5` |
+| | Font weight | `--xpl-font-weight-medium` |
+| Connector Line | Position | Absolute, from circle edge to edge |
+| | Height | `--xpl-size-0125` (2px) |
+| | Margins | `--xpl-space-4` (4px) from circle edges |
+| | Color (waiting) | `--xpl-border-default` |
+| | Color (finished) | `--xpl-background-action-primary-default` |
+| Step Label | Font size | `--xpl-font-size-title-5` |
+| | Color (waiting) | `--xpl-text-subdued` |
+| | Color (active) | `--xpl-text-default` |
+| | Layout | In normal flow, wraps at narrow widths |
+| | Max width | `100%` of step column |
+
+### Vertical Layout
+
+| Element | Property | Token/Value |
+|---------|----------|-------------|
+| Container | Min width | `--xpl-size-0` (0px) |
+| | Min height | `0px` (fluid) |
+| | Height | `100%` |
+| Connector Line | Width | `--xpl-size-0125` (2px) |
+| | Color (waiting) | `--xpl-border-default` |
+| | Color (finished) | `--xpl-background-action-primary-default` |
+| Step Label | Margin left | `--xpl-space-8` (8px) |
+
+### Step States
+
+| State | Circle Background | Circle Border | Circle Text |
+|-------|-------------------|---------------|-------------|
+| Waiting | Transparent | `--xpl-border-default` | `--xpl-text-subdued` |
+| Active | Transparent | `--xpl-border-focus` | `--xpl-text-link-default` |
+| Finished | `--xpl-background-action-primary-default` | `--xpl-border-accent-default` | `--xpl-text-inverse` |
+
+## Accessibility
+
+### ARIA structure
+
+The host element uses `role="group"` with a dynamic `aria-label` that announces the current position:
+
+| Condition | `aria-label` value |
+|-----------|-------------------|
+| Steps in progress | `"Progress: step 2 of 5"` |
+| All steps complete | `"Progress: all 5 steps complete"` |
+| No steps provided | `"Progress"` |
+
+Steps are wrapped in a container with `role="list"`, and each step is a `role="listitem"`. The active step receives `aria-current="step"`; non-active steps do not carry `aria-current`.
+
+### Keyboard interaction
+
+This component is a display-only progress indicator and does not require keyboard interaction. It is typically used alongside form navigation controls (e.g., Previous/Next buttons) that manage step changes.
+
+### Visual distinction
+
+- State changes use both color and shape differences (numbered circles, dots, and checkmark icons) to support colorblind users.
+- The `xpl-icon` component with icon `check-2` provides the finished-step checkmark at an accessible size (20px).
+
+## HTML/CSS Usage
+
+When building the progress component in plain HTML, use the following structure:
+
+```html
+<!-- Horizontal progress -->
+<div class="xpl-progress-indicator xpl-progress-indicator-horizontal" role="group" aria-label="Progress: step 2 of 3">
+<div class="xpl-progress-indicator-container" role="list">
+    <!-- Step 1: Finished -->
+<div class="xpl-progress-indicator-step xpl-progress-indicator-step-finished" role="listitem" aria-label="Details, completed">
+<div class="xpl-progress-indicator-step-content">
+<div class="xpl-progress-indicator-step-circle">
+          <xpl-icon icon="check-2" size="20"></xpl-icon>
+        </div>
+<div class="xpl-progress-indicator-step-text">Details</div>
+      </div>
+    </div>
+    <!-- Step 2: Active -->
+<div class="xpl-progress-indicator-step xpl-progress-indicator-step-active" role="listitem" aria-label="Location, current" aria-current="step">
+<div class="xpl-progress-indicator-step-content">
+<div class="xpl-progress-indicator-step-circle">2</div>
+<div class="xpl-progress-indicator-step-text">Location</div>
+      </div>
+    </div>
+    <!-- Step 3: Waiting -->
+<div class="xpl-progress-indicator-step" role="listitem" aria-label="Review, upcoming">
+<div class="xpl-progress-indicator-step-content">
+<div class="xpl-progress-indicator-step-circle">3</div>
+<div class="xpl-progress-indicator-step-text">Review</div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Vertical progress -->
+<div class="xpl-progress-indicator xpl-progress-indicator-vertical" role="group" aria-label="Progress: step 2 of 3">
+<div class="xpl-progress-indicator-container" role="list">
+    <!-- Step 1: Finished -->
+<div class="xpl-progress-indicator-step xpl-progress-indicator-step-finished" role="listitem" aria-label="Step 1, completed">
+<div class="xpl-progress-indicator-step-circle">
+        <xpl-icon icon="check-2" size="20"></xpl-icon>
+      </div>
+<div class="xpl-progress-indicator-step-text">Step 1</div>
+    </div>
+    <!-- ... additional steps ... -->
+  </div>
+</div>
+```
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property      | Attribute      | Description                                                                                                                                                                                                                            | Type                         | Default        |
+| ------------- | -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------- |
+| `currentStep` | `current-step` | Current step index. Steps with index < currentStep are "finished", the step at currentStep is "active", and steps beyond are "waiting". Set to steps.length to mark all steps as finished. Automatically clamped to [0, steps.length]. | `number`                     | `0`            |
+| `layout`      | `layout`       | Layout direction - 'horizontal' or 'vertical'                                                                                                                                                                                          | `"horizontal" \| "vertical"` | `'horizontal'` |
+| `showLabels`  | `show-labels`  | Whether to show step labels                                                                                                                                                                                                            | `boolean`                    | `true`         |
+| `showNumbers` | `show-numbers` | Whether to show step numbers inside circles                                                                                                                                                                                            | `boolean`                    | `true`         |
+| `steps`       | --             | The steps is an array of the steps name.                                                                                                                                                                                               | `string[]`                   | `undefined`    |
+
+
+## Dependencies
+
+### Depends on
+
+- [xpl-icon](../xpl-icon)
+
+### Graph
+```mermaid
+graph TD;
+  xpl-progress-indicator --> xpl-icon
+  style xpl-progress-indicator fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

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

@@ -1,7 +1,7 @@
-# xpl-radio
-
-Radio buttons allow users to make selections or choices. Radios are always single select, and can also act as controls.
-
+# xpl-radio
+
+Radio buttons allow users to make selections or choices. Radios are always single select, and can also act as controls.
+
 <!-- Auto Generated Below -->
 
 
@@ -30,11 +30,13 @@ Radio buttons allow users to make selections or choices. Radios are always singl
 ### Used by
 
  - [xpl-choicelist](../xpl-choicelist)
+ - [xpl-list-item](../xpl-list/xpl-list-item)
 
 ### Graph
 ```mermaid
 graph TD;
   xpl-choicelist --> xpl-radio
+  xpl-list-item --> xpl-radio
   style xpl-radio fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

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

@@ -2,7 +2,7 @@
 
 Select allows users to make a single selection or multiple selections from a list of options.  Items can be a simple list, grouped, simple multi-select. User selections typically appear within the Select Box once created unless multiple selections are made, where truncation or another method of showing these selections is required.
 
-***When the list of options contains “Actions”, use a ***[Dropdown component](https://xplor-apollo.herokuapp.com/?path=/story/components-dropdown--simple). 
+***When the list of options contains “Actions”, use a ***[Dropdown component](https://apollo.xplordocs.com/?path=/story/components-dropdown--simple).
 
 The `selectIcon` property accepts icon names as strings. See [xpl-icon available icons](../xpl-icon/ICONS.md) for the complete list.
 
@@ -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
@@ -73,6 +75,7 @@ graph TD;
   xpl-select --> xpl-tag
   xpl-select --> xpl-icon
   xpl-select --> xpl-dropdown
+  xpl-tag --> xpl-icon
   xpl-dropdown --> xpl-dropdown-group
   xpl-dropdown --> xpl-dropdown-option
   xpl-dropdown-group --> xpl-dropdown-group

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

@@ -40,9 +40,9 @@ When multiple navigation landmarks exist on a page (e.g., side nav, top nav, bre
 </xpl-side-nav>
 
 <!-- Top navigation (different component) -->
-<xpl-top-navigation label="User menu">
+<xpl-top-nav label="User menu">
   ...
-</xpl-top-navigation>
+</xpl-top-nav>
 
 <!-- Breadcrumbs (different component) -->
 <xpl-breadcrumbs label="Breadcrumb">

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

@@ -1,6 +1,6 @@
 # xpl-slideout
 
-Content and Footer subcomponents are optional and can be hidden.  Slideout always has a header with an X close button upper right. Slide Out Panel OPTIONALLY uses the [<xpl-backdrop>](https://xplor-apollo.herokuapp.com/?path=/story/components-backdrop--backdrop) component to overlay content and create focus on the Slide Out Panel content.
+Content and Footer subcomponents are optional and can be hidden.  Slideout always has a header with an X close button upper right. Slide Out Panel OPTIONALLY uses the [<xpl-backdrop>](https://apollo.xplordocs.com/?path=/story/components-backdrop--backdrop) component to overlay content and create focus on the Slide Out Panel content.
 
 <!-- Auto Generated Below -->