@xplortech/apollo-core 2.5.0 → 2.7.0

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

@@ -0,0 +1,174 @@
+# xpl-panel
+
+`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 |
+
+
+**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
+
+### Web component
+
+```html
+<xpl-panel>
+  <p>Any content goes here.</p>
+</xpl-panel>
+```
+
+```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`.
+
+### Padding density
+
+```html
+<xpl-panel padding="tight">
+  <p>Tighter padding on small screens (see content padding matrix).</p>
+</xpl-panel>
+```
+
+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
+
+```html
+<xpl-panel accent="secondary" padding="loose">
+  <xpl-accordion header="Details">
+    <div slot="content">Accordion inside a panel.</div>
+  </xpl-accordion>
+</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
+
+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)
+
+<!-- Auto Generated Below -->
+
+
+## Overview
+
+A stateless container that defines a section on a page and can house any
+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. (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
+
+| Slot | Description                                                                                                        |
+| ---- | ------------------------------------------------------------------------------------------------------------------ |
+|      | Default slot for panel content. Compose other Apollo components within the slot or build your own local component. |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

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

@@ -1,6 +1,6 @@
 # xpl-popover
 
-
+A popover is an overlay that pops up over all other layers and is triggered by a click or tap, and dismissed by clicking outside the popover or a dismiss icon. Popovers can contain additional actions and allow those actions to be triggered.
 
 <!-- Auto Generated Below -->
 
@@ -35,11 +35,13 @@
 ### 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-bar/readme.md

@@ -0,0 +1,145 @@
+# xpl-progress-bar
+
+The `xpl-progress-bar` component displays the progress of an operation, such as file uploads, form completion, or loading states. It supports multiple visual variants including default, success, error, and indeterminate states, with optional label and helper text.
+
+## Usage
+
+### Basic progress bar
+
+```html
+<xpl-progress-bar label="Uploading..." value="45"></xpl-progress-bar>
+```
+
+### With helper text
+
+```html
+<xpl-progress-bar
+    label="Uploading file..."
+    value="65"
+    helper-text="2.4 MB of 5 MB">
+</xpl-progress-bar>
+```
+
+### Error state
+
+```html
+<xpl-progress-bar
+    label="Upload failed"
+    value="30"
+    variant="error"
+    helper-text="Network error. Please check your connection.">
+</xpl-progress-bar>
+```
+
+### Indeterminate loading
+
+```html
+<xpl-progress-bar label="Processing..." variant="indeterminate"></xpl-progress-bar>
+```
+
+### Small size
+
+```html
+<xpl-progress-bar value="60" size="sm"></xpl-progress-bar>
+```
+
+### Custom max value
+
+```html
+<xpl-progress-bar value="75" max="150" label="75 of 150 items"></xpl-progress-bar>
+```
+
+## Variants
+
+| Variant | Description |
+|---------|-------------|
+| `default` | Standard progress bar with accent color fill. Shows a checkmark icon when value reaches max. |
+| `success` | Explicit success state with positive color. Shows a checkmark icon. |
+| `error` | Error state with negative color. Shows an error (x-mark) icon. Helper text is recommended for this state. |
+| `indeterminate` | Used when the progress duration is unknown. Displays an animated sliding bar instead of a fill percentage. |
+
+## Sizes
+
+- `lg` (default): 6px height
+- `sm`: 4px height
+
+## Icon Mapping
+
+The component automatically renders status icons based on the variant or completion state:
+
+| State | xpl-icon name |
+|-------|---------------|
+| Complete (default variant when value equals max) | `circle-check-1` |
+| Success variant | `circle-check-1` |
+| Error variant | `circle-xmark-1` |
+
+## Design Tokens
+
+The following Apollo Foundation tokens are used by this component:
+
+### Background Colors (Fill)
+- `--xpl-background-accent-default` - Default variant fill
+- `--xpl-background-accent-positive-bold` - Success/complete fill
+- `--xpl-background-accent-negative-bold` - Error fill
+- `--xpl-background-accent-neutral` - Track background
+
+### Icon Colors
+- `--xpl-icon-positive` - Success/complete icon
+- `--xpl-icon-negative` - Error icon
+
+### Text Colors
+- `--xpl-text-default` - Label text
+- `--xpl-text-subdued` - Helper text
+- `--xpl-text-negative` - Error helper text
+
+### Typography
+- `--xpl-font-size-callout` - Label font size
+- `--xpl-font-size-caption` - Helper text font size
+- `--xpl-font-weight-normal` - Label and helper font weight
+
+### Spacing & Sizing
+- `--xpl-space-8` - Gap between elements
+- `--xpl-size-025` (4px) - Small bar height
+- `--xpl-size-0375` (6px) - Large bar height
+- `--xpl-border-radius-full` - Bar border radius
+
+## Accessibility
+
+- **Determinate variants** (default, success, error) use the native HTML `<progress>` element, which provides:
+  - Native `role="progressbar"` semantics
+  - Automatic `aria-valuenow`, `aria-valuemin`, `aria-valuemax` handling
+  - Native value/max API with built-in clamping
+- **Indeterminate variant** uses a custom `<div role="progressbar">` since native `<progress>` indeterminate state cannot be styled cross-browser
+- The `aria-label` is set from the `label` prop, or falls back to `'Progress'` when no label is provided
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property     | Attribute     | Description                                                                    | Type                                                   | Default     |
+| ------------ | ------------- | ------------------------------------------------------------------------------ | ------------------------------------------------------ | ----------- |
+| `helperText` | `helper-text` | The helper text displayed below the progress bar (recommended for error state) | `string`                                               | `undefined` |
+| `label`      | `label`       | The label text displayed above the progress bar                                | `string`                                               | `undefined` |
+| `max`        | `max`         | The maximum value of the progress (mirrors native <progress> max attribute)    | `number`                                               | `100`       |
+| `size`       | `size`        | The size of the progress bar height: sm = 4px, lg = 6px                        | `"lg" \| "sm"`                                         | `'lg'`      |
+| `value`      | `value`       | The current value of the progress (mirrors native <progress> value attribute)  | `number`                                               | `0`         |
+| `variant`    | `variant`     | The visual variant of the progress bar                                         | `"default" \| "error" \| "indeterminate" \| "success"` | `'default'` |
+
+
+## Dependencies
+
+### Depends on
+
+- [xpl-icon](../xpl-icon)
+
+### Graph
+```mermaid
+graph TD;
+  xpl-progress-bar --> xpl-icon
+  style xpl-progress-bar fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

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.
 
@@ -73,11 +73,13 @@ 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
   xpl-dropdown-group --> xpl-dropdown-option
   xpl-dropdown-group --> xpl-dropdown-heading
+  xpl-dropdown-option --> xpl-icon
   xpl-pagination --> xpl-select
   xpl-tabs --> xpl-select
   style xpl-select fill:#f9f,stroke:#333,stroke-width:4px