@xplortech/apollo-core 2.4.3 → 2.6.0

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

@@ -0,0 +1,166 @@
+# xpl-banner
+
+Banners display a system level or page level message at the top of the screen. The section-banner variant displays important messages inline within a section.
+
+## Accessibility
+
+`xpl-banner` renders with `role="region"` and a computed `aria-label` that reflects the current `appearance`
+(e.g. "Information banner", "Positive banner", "Warning banner", "Error banner"). This makes the banner a navigable ARIA
+landmark so assistive-technology users can locate and identify it without reading the full message content.
+
+- The leading icon wrapper carries `aria-hidden="true"` — the icon is decorative; the message text is the
+  accessible content.
+- The dismiss `<xpl-icon>` inside the dismiss button also carries `aria-hidden="true"` to prevent the
+  icon's figcaption ("xmark icon") from being announced alongside the button's own `aria-label`.
+- The dismiss button `aria-label` is "Dismiss banner" for default layout and "Dismiss section banner" for section layout.
+
+## Token Use
+
+- `information`
+  - Background: `--xpl-background-messaging-information`
+  - Border: `--xpl-border-accent-information`
+  - Icon: `--xpl-icon-default`
+  - Main text: `--xpl-text-strong` (with `--xpl-text-default` fallback)
+  - Detail text: `--xpl-text-default`
+- `warning`
+  - Background: `--xpl-background-messaging-warning`
+  - Border: `--xpl-border-accent-warning`
+  - Icon: `--xpl-icon-default`
+  - Main text: `--xpl-text-strong` (with `--xpl-text-default` fallback)
+  - Detail text: `--xpl-text-default`
+  - Dismiss focus ring: `--xpl-border-accent-warning`
+- `positive`
+  - Background: `--xpl-background-messaging-positive`
+  - Border: `--xpl-border-positive`
+  - Icon: `--xpl-icon-default`
+  - Main text: `--xpl-text-strong` (with `--xpl-text-default` fallback)
+  - Detail text: `--xpl-text-default`
+- `error`
+  - Background: `--xpl-background-messaging-negative-bold`
+  - Border: `--xpl-border-negative`
+  - Icon and text: `--xpl-text-inverse-on-dark`
+  - Dismiss focus ring: `--xpl-text-inverse-on-dark`
+- Dismiss button follows the same icon token as the current appearance.
+- `information` dismiss focus ring uses `--xpl-border-accent-information`.
+
+Light and dark mode are handled by Apollo Foundation token definitions. `xpl-banner` does not use component-level `.dark` token overrides.
+
+## Icon Mapping
+
+Each `appearance` value maps to a fixed `xpl-icon` name. When building the component in plain HTML, use the icon from this table:
+
+| `appearance`  | `xpl-icon` name    |
+| ------------- | ------------------ |
+| `information` | `circle-info`      |
+| `warning`     | `triangle-warning` |
+| `positive`    | `circle-check`     |
+| `error`       | `octagon-warning`  |
+
+## Actions
+
+Use `actionText` and `secondaryActionText` to render up to two `xpl-button` actions in the banner.
+Both action buttons always render at `size="xs"` to match compact banner spacing.
+
+The `variant` and `state` attributes on the action buttons depend on both `appearance` and layout:
+
+| Layout    | `appearance`  | `variant`   | `state`     |
+| --------- | ------------- | ----------- | ----------- |
+| bar       | `information` | `subtle`    | —           |
+| bar       | `warning`     | `subtle`    | —           |
+| bar       | `positive`    | `subtle`    | —           |
+| bar       | `error`       | `primary`   | `warning`   |
+| section   | `information` | `subtle`    | —           |
+| section   | `warning`     | `subtle`    | —           |
+| section   | `positive`    | `subtle`    | `success`   |
+| section   | `error`       | `subtle`    | `warning`   |
+
+## Section Layout
+
+Set `is-section` to render the section-banner layout:
+- Header row with icon, heading, and optional dismiss
+- Description below the header (2-line clamp by default)
+- Actions below description
+
+Set `has-icon="false"` to hide the leading icon in the section layout. This applies `xpl-banner--no-icon` on the host, which shifts heading, description, and actions to start in the first grid column instead of the second. In bar layout the icon always renders regardless of `hasIcon`.
+
+## HTML/CSS Usage
+
+Both the bar and section variants share the same DOM structure. Switch between them using only a class on the host:
+
+```html
+<!-- Bar variant -->
+<div class="xpl-banner xpl-banner--information">
+  <div class="xpl-banner__icon" aria-hidden="true">
+    <xpl-icon icon="circle-info" size="24"></xpl-icon>
+  </div>
+  <div class="xpl-banner__body">
+    <p class="xpl-banner__heading">Heading</p>
+    <p class="xpl-banner__description">Description text</p>
+  </div>
+  <div class="xpl-banner__actions">
+    <xpl-button size="xs" variant="subtle">Action</xpl-button>
+  </div>
+  <button class="xpl-banner__dismiss" type="button" aria-label="Dismiss banner">
+    <xpl-icon icon="xmark" size="24" aria-hidden="true"></xpl-icon>
+  </button>
+</div>
+
+<!-- Section variant — add xpl-banner--section; same markup otherwise -->
+<div class="xpl-banner xpl-banner--section xpl-banner--information">
+  ...
+</div>
+
+<!-- Section variant without icon -->
+<div class="xpl-banner xpl-banner--section xpl-banner--no-icon xpl-banner--information">
+  <!-- omit .xpl-banner__icon -->
+  <div class="xpl-banner__body">...</div>
+  ...
+</div>
+```
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property              | Attribute               | Description                                                                                                                                                                                                                                                                | Type                                                  | Default         |
+| --------------------- | ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- | --------------- |
+| `actionText`          | `action-text`           | Primary action label. When provided, an action button is rendered.                                                                                                                                                                                                         | `string`                                              | `undefined`     |
+| `appearance`          | `appearance`            | Controls the visual appearance and semantic meaning of the banner. These values map to messaging background/border token sets in `banner.css`. Banner icons use `--xpl-icon-default`, except `error` which uses inverse icon/text tokens for contrast on dark backgrounds. | `"error" \| "information" \| "positive" \| "warning"` | `'information'` |
+| `description`         | `description`           | Optional supporting message shown after the heading. Description text uses `--xpl-text-default`.                                                                                                                                                                           | `string`                                              | `undefined`     |
+| `hasIcon`             | `has-icon`              | Whether to render the leading icon in section layout. Ignored in bar layout — bar banners always show the icon.                                                                                                                                                            | `boolean`                                             | `true`          |
+| `heading`             | `heading`               | Primary banner message shown with stronger title typography.                                                                                                                                                                                                               | `string`                                              | `undefined`     |
+| `isDismissible`       | `is-dismissible`        | Whether to show the trailing dismiss control.                                                                                                                                                                                                                              | `boolean`                                             | `true`          |
+| `isSection`           | `is-section`            | Renders the section-style banner layout when true.                                                                                                                                                                                                                         | `boolean`                                             | `false`         |
+| `secondaryActionText` | `secondary-action-text` | Secondary action label. When provided, a second action button is rendered.                                                                                                                                                                                                 | `string`                                              | `undefined`     |
+| `truncateDesc`        | `truncate-desc`         | When true, `description` is constrained to one line with ellipsis so banner height stays stable.                                                                                                                                                                           | `boolean`                                             | `false`         |
+
+
+## Events
+
+| Event             | Description                                   | Type                |
+| ----------------- | --------------------------------------------- | ------------------- |
+| `action`          | Emitted when the primary action is clicked.   | `CustomEvent<void>` |
+| `dismiss`         | Emitted when the dismiss button is clicked.   | `CustomEvent<void>` |
+| `secondaryAction` | Emitted when the secondary action is clicked. | `CustomEvent<void>` |
+
+
+## Dependencies
+
+### Depends on
+
+- [xpl-icon](../xpl-icon)
+- [xpl-button](../xpl-button)
+
+### Graph
+```mermaid
+graph TD;
+  xpl-banner --> xpl-icon
+  xpl-banner --> xpl-button
+  xpl-button --> xpl-icon
+  style xpl-banner fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

package/dist/docs/xpl-breadcrumbs/xpl-breadcrumb-item/readme.md

@@ -0,0 +1,19 @@
+# xpl-breadcrumb-item
+
+The `<xpl-breadcrumb-item>` component has a role of `listitem`. This component should only be used in combination with `<xpl-breadcrumbs>`.
+This component yields an unnamed slot. Only links and buttons (styled as links) should be used within this component.
+
+
+<!-- Auto Generated Below -->
+
+
+## Slots
+
+| Slot        | Description                                                             |
+| ----------- | ----------------------------------------------------------------------- |
+| `"unnamed"` | content rendered inside <li>, should be link or button (styled as link) |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

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

@@ -0,0 +1,22 @@
+# xpl-breadcrumbs
+
+The `xpl-breadcrumbs` component is a navigation group. It yields an unnamed slot that is rendered inside a `<ol></ol>` element.
+
+This component can be used as a wrapper to `<xpl-breadcrumb-item>` components.
+
+The number of items is not restricted, although per Apollo's design guidelines, a maximum of three items should be used.
+In small screens (xs), only the 2 deepest items will be visible, even if 3 items are provided.
+
+<!-- Auto Generated Below -->
+
+
+## Slots
+
+| Slot        | Description                                                               |
+| ----------- | ------------------------------------------------------------------------- |
+| `"unnamed"` | content rendered <ol>, should be a group of <li> or <xpl-breadcrumb-item> |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

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

@@ -0,0 +1,181 @@
+# xpl-button
+
+Buttons allow users to take an action with clear visual hierarchy (variant), semantic meaning (sentiment), and size.
+
+## Usage
+
+> [!IMPORTANT]
+> Older props such as `state` still work, but we recommend using the sentiment described below.
+
+
+### Basic button
+
+Pass button text via the default slot (same as native `<button>`):
+
+```html
+<xpl-button>Primary action</xpl-button>
+```
+
+### Variant and sentiment
+
+Use `variant` for style (primary, secondary, tertiary) and `sentiment` for intent (default, positive, negative):
+
+```html
+<xpl-button variant="secondary">Secondary</xpl-button>
+<xpl-button variant="tertiary" sentiment="positive">Positive action</xpl-button>
+<xpl-button sentiment="negative">Destructive</xpl-button>
+```
+
+### Size
+
+Use **`size`** for button size: `default`, `sm` (small), or `xs` (extra small):
+
+```html
+<xpl-button size="sm">Small</xpl-button>
+<xpl-button size="xs">Extra small</xpl-button>
+```
+
+### Icon from Apollo icon library
+
+Use `icon` with a name from the xpl-icon library; use `icon-position` to place the icon at start or end:
+
+```html
+<xpl-button icon="download" icon-position="end">
+  Download
+</xpl-button>
+```
+
+### Icon-only button
+
+Use `icon-only` when the button shows only an icon (no label). Always set `icon` and use a descriptive `aria-label` on the host or inner button for accessibility:
+
+```html
+<xpl-button icon-only icon="x" aria-label="Close"></xpl-button>
+```
+
+### Loading state
+
+When `is-loading` is true, the button shows a spinner, hides the label and icon, stays the same size, and is non-interactive:
+
+```html
+<xpl-button is-loading>Submitting</xpl-button>
+```
+
+### Form submission
+
+The component renders a native `<button>`. Use `type` (`submit`, `reset`, or `button`), `name`, `value`, and `form` for form behaviour:
+
+```html
+<form id="my-form">
+  <xpl-button type="submit" name="action" value="save">Save</xpl-button>
+</form>
+```
+
+### Disabled
+
+Use the `disabled` prop to disable the button (same as native `disabled`):
+
+```html
+<xpl-button disabled>Disabled</xpl-button>
+```
+
+## DOM classes
+
+The host element includes BEM-style classes, including:
+
+- **Size:** `xpl-button--default` | `xpl-button--sm` | `xpl-button--xs`
+- **Variant:** `xpl-button--primary` | `xpl-button--secondary` | `xpl-button--tertiary` (and `xpl-button--subtle` while that value is still supported)
+- **Sentiment:** `xpl-button--neutral` | `xpl-button--positive` | `xpl-button--negative` when using `sentiment`
+- **Deprecated `state`:** if set, legacy classes `xpl-button--neutral` | `xpl-button--warning` | `xpl-button--success` are applied instead of the sentiment-based classes above (see migration)
+
+Prefer targeting **`sentiment`** + **`variant`** + **`size`** in new code; avoid relying on deprecated `state` class names for new selectors.
+
+## Migration Notes:
+
+The class **`xpl-button--default`** on the host continues to mean **size** (`size="default"`), not sentiment.
+
+### Deprecated `state` prop
+
+The **`state`** prop (`neutral` | `warning` | `success`) is deprecated. Use **`sentiment`** instead:
+
+| Old `state`   | New `sentiment` |
+| ------------- | ----------------- |
+| `neutral`     | `neutral` (default) |
+| `warning`     | `negative`        |
+| `success`     | `positive`        |
+
+**Backward compatibility:** if **`state`** is set, it controls the sentiment segment of the host class list (`xpl-button--neutral`, `xpl-button--warning`, `xpl-button--success`) so existing styles or tests that key off those class names can keep working. New work should use **`sentiment`** only (`neutral` | `negative` | `positive`).
+
+### Deprecated `variant="subtle"` → `tertiary`
+
+**`variant="subtle"`** is deprecated and retained only for backward compatibility, applying the **`xpl-button--subtle`** class. Use **`variant="tertiary"`** instead, which applies **`xpl-button--tertiary`**.
+
+### Other API notes
+
+- **`isLoading` / `is-loading`:** loading UI without forcing the disabled (gray) visual treatment.
+- **`icon`**, **`icon-position`**, **`icon-only`:** use Apollo icon names; no inline SVGs required.
+- **`data-*` and `aria-*` on the host:** mirrored onto the inner `<button>` after render for accessibility and testing tools.
+
+## Guidelines
+
+- **Pass button content via the default slot:** `<xpl-button>Save</xpl-button>`. Slots support rich content (formatted text, inline icons, etc.).
+- Use **`iconOnly`** for icon-only buttons and provide an **`aria-label`** (or ensure the inner button has an accessible name).
+- Use **`icon`** for icon names from the xpl-icon library; use **`icon-position`** to place the icon at start or end of the slot content.
+
+## Accessibility
+
+- The component renders a native `<button>`, so it is focusable and keyboard-activable by default.
+- When **`is-loading`** is true, the inner button has `aria-busy="true"` and the loading spinner is marked **`aria-hidden="true"`** so the label remains the accessible name.
+- For **icon-only** buttons, provide an accessible name via **`aria-label`** on the host (e.g. `<xpl-button icon-only icon="x" aria-label="Close">`) so screen readers announce the action.
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property       | Attribute       | Description                                                                                                                                        | Type                                                 | Default     |
+| -------------- | --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- | ----------- |
+| `disabled`     | `disabled`      | Whether button should be disabled                                                                                                                  | `boolean`                                            | `false`     |
+| `form`         | `form`          | An optional form attribute for the button if type is submit                                                                                        | `string`                                             | `undefined` |
+| `fullWidth`    | `full-width`    | Whether the button should be of full width as per parent container.                                                                                | `boolean`                                            | `false`     |
+| `icon`         | `icon`          | Icon to render - icon name as string (from xpl-icon library).                                                                                      | `string`                                             | `''`        |
+| `iconOnly`     | `icon-only`     | When true, the button renders in icon-only circular style. Use for icon-only buttons.                                                              | `boolean`                                            | `false`     |
+| `iconPosition` | `icon-position` | Icon position relative to slot content. Ignored if no icon is provided.                                                                            | `"end" \| "start"`                                   | `'start'`   |
+| `isLoading`    | `is-loading`    | When true, shows a loading overlay with spinner over the button. Button is non-interactive.                                                        | `boolean`                                            | `false`     |
+| `link`         | `link`          | whether button should yield a slot for a link tag                                                                                                  | `boolean`                                            | `undefined` |
+| `name`         | `name`          | Name of the button, submitted with form data. Passed through to the native button element.                                                         | `string`                                             | `undefined` |
+| `sentiment`    | `sentiment`     | Sentiment of the button, which applies different color schemes to indicate purpose/intent.                                                         | `"negative" \| "neutral" \| "positive"`              | `'neutral'` |
+| `size`         | `size`          | Button size. Use 'default', 'xs' (extra small), or 'sm' (small).                                                                                   | `"default" \| "sm" \| "xs"`                          | `'default'` |
+| `state`        | `state`         | <span style="color:red">**[DEPRECATED]**</span> : Use `sentiment` with values "neutral", "negative", "positive" instead of `state` .<br/><br/>     | `"neutral" \| "success" \| "warning"`                | `undefined` |
+| `type`         | `type`          | HTML button type attribute.                                                                                                                        | `"button" \| "reset" \| "submit"`                    | `undefined` |
+| `value`        | `value`         | Value of the button, submitted with form data. Passed through to the native button element.                                                        | `string`                                             | `undefined` |
+| `variant`      | `variant`       | Button variant/style. Use "primary", "secondary", "tertiary" for new usage. "subtle" is deprecated but still supported for backward compatibility. | `"primary" \| "secondary" \| "subtle" \| "tertiary"` | `'primary'` |
+
+
+## Dependencies
+
+### Used by
+
+ - [xpl-banner](../xpl-banner)
+ - [xpl-button-row](../xpl-button-row)
+ - [xpl-modal](../xpl-modal)
+ - [xpl-slideout](../xpl-slideout)
+
+### Depends on
+
+- [xpl-icon](../xpl-icon)
+
+### Graph
+```mermaid
+graph TD;
+  xpl-button --> xpl-icon
+  xpl-banner --> xpl-button
+  xpl-button-row --> xpl-button
+  xpl-modal --> xpl-button
+  xpl-slideout --> xpl-button
+  style xpl-button fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

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

@@ -0,0 +1,42 @@
+# xpl-button-row
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property    | Attribute   | Description                                                                           | Type       | Default     |
+| ----------- | ----------- | ------------------------------------------------------------------------------------- | ---------- | ----------- |
+| `primary`   | `primary`   | The text for the primary button.                                                      | `"string"` | `undefined` |
+| `secondary` | `secondary` | The text for the secondary button. If left empty, will not render a secondary button. | `"string"` | `undefined` |
+| `tertiary`  | `tertiary`  | The text for the tertiary button. If left empty, will not render a secondary button.  | `"string"` | `undefined` |
+
+
+## Events
+
+| Event            | Description                                                                                         | Type               |
+| ---------------- | --------------------------------------------------------------------------------------------------- | ------------------ |
+| `clickPrimary`   | Fires on the primary button. If not set, the button can act as a standard submit button for a form. | `CustomEvent<any>` |
+| `clickSecondary` | Adds an event listener to the secondary button.                                                     | `CustomEvent<any>` |
+| `clickTertiary`  | Adds an event listener to the tertiary button.                                                      | `CustomEvent<any>` |
+
+
+## Dependencies
+
+### Depends on
+
+- [xpl-button](../xpl-button)
+
+### Graph
+```mermaid
+graph TD;
+  xpl-button-row --> xpl-button
+  xpl-button --> xpl-icon
+  style xpl-button-row fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

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

@@ -0,0 +1,49 @@
+# xpl-calendar
+
+Calendars allow users to view and select dates.  Use XPL-Calendar when date picking is needed on a page or in a in a container.
+If a calendar is needed within a form, use [XPL-Datepicker](https://xplor-apollo.herokuapp.com/?path=/story/components-input--datepicker).
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property      | Attribute      | Description                                                                                                                     | Type                  | Default     |
+| ------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- |
+| `dateFormat`  | `date-format`  | Format of the date displayed in the calendar. Default is 'Y-m-d'.                                                               | `string`              | `'Y-m-d'`   |
+| `defaultDate` | `default-date` | Default date to be displayed when the calendar is first loaded.                                                                 | `string`              | `undefined` |
+| `inputId`     | `input-id`     | Unique identifier for the calendar element.                                                                                     | `string`              | `uuid()`    |
+| `max`         | `max`          | Maximum selectable date in the calendar.                                                                                        | `number \| string`    | `undefined` |
+| `min`         | `min`          | Minimum selectable date in the calendar.                                                                                        | `number \| string`    | `undefined` |
+| `mode`        | `mode`         | Mode of the calendar, either 'single' for single date selection or 'range' for selecting a range of dates. Default is 'single'. | `"range" \| "single"` | `'single'`  |
+
+
+## Events
+
+| Event          | Description                           | Type                              |
+| -------------- | ------------------------------------- | --------------------------------- |
+| `dateSelected` | Event emitted when a date is selected | `CustomEvent<string \| string[]>` |
+
+
+## Methods
+
+### `setDate(date: string | string[]) => Promise<void>`
+
+Method to update the calendar date from external input
+
+#### Parameters
+
+| Name   | Type                 | Description |
+| ------ | -------------------- | ----------- |
+| `date` | `string \| string[]` |             |
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

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

@@ -0,0 +1,49 @@
+# xpl-checkbox
+
+Checkboxes allow users to make selections or choices. Checkboxes can be multi-select, and also act as controls.
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property        | Attribute       | Description                                                                         | Type      | Default     |
+| --------------- | --------------- | ----------------------------------------------------------------------------------- | --------- | ----------- |
+| `checked`       | `checked`       | Whether the input is checked                                                        | `boolean` | `undefined` |
+| `dataId`        | `data-id`       | A custom data attribute for the checkbox                                            | `string`  | `undefined` |
+| `description`   | `description`   | Description text for the field                                                      | `string`  | `undefined` |
+| `disabled`      | `disabled`      | Whether the input is disabled                                                       | `boolean` | `undefined` |
+| `indeterminate` | `indeterminate` | A visual state for when the input has not been interacted with                      | `boolean` | `undefined` |
+| `name`          | `name`          | The name attribute for the html input. (submitted in form as name/value pair)       | `string`  | `undefined` |
+| `required`      | `required`      | Whether the input is required                                                       | `boolean` | `undefined` |
+| `styled`        | `styled`        | Whether the input is contained in a box with a border and a background              | `boolean` | `undefined` |
+| `value`         | `value`         | The value attribute for the checkbox input. (submittted in form as name/value pair) | `string`  | `undefined` |
+
+
+## Events
+
+| Event            | Description                                                                                                                                                   | Type                             |
+| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- |
+| `checkboxChange` | Event that emits the current value of the checkbox input  Returns the value of the checkbox input if a value is provided, otherwise returns the checked state | `CustomEvent<boolean \| string>` |
+
+
+## Dependencies
+
+### Used by
+
+ - [xpl-choicelist](../xpl-choicelist)
+ - [xpl-header-accordion](../xpl-header-accordion)
+ - [xpl-table-header-cell](../xpl-table-header-cell)
+
+### Graph
+```mermaid
+graph TD;
+  xpl-choicelist --> xpl-checkbox
+  xpl-header-accordion --> xpl-checkbox
+  xpl-table-header-cell --> xpl-checkbox
+  style xpl-checkbox fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

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

@@ -0,0 +1,44 @@
+# xpl-choicelist
+
+A Choice List allows users to make single or multiple selections from a list of choices.  This component is meant to consume the radio and checkbox components, either styled or unstyled, then allow for customizing an option list very quickly.
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property      | Attribute     | Description                                                                                                                                                                                                                                                 | Type       | Default     |
+| ------------- | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | ----------- |
+| `choices`     | --            | An array of choices to be displayed in the list. Each choice should be an object with keys: - `checked` [boolean] - whether to pre-check or not - `children` [Choice[]] - an array of child choices (recursive) - `description` [string] - `label` [string] | `Choice[]` | `undefined` |
+| `description` | `description` | Descriptive text to be displayed above the choice-list.                                                                                                                                                                                                     | `string`   | `undefined` |
+| `heading`     | `heading`     | The title text to be displayed above the choice-list.                                                                                                                                                                                                       | `string`   | `undefined` |
+| `multi`       | `multi`       | Whether the user can select more than one choice (true) or only a single choice (false). Corresponds to checkboxes vs. radio buttons.                                                                                                                       | `boolean`  | `undefined` |
+| `name`        | `name`        | The `name` to be associated with form data.                                                                                                                                                                                                                 | `string`   | `uuid()`    |
+| `styled`      | `styled`      | If `true`, will include borders around the list and between individual choices.                                                                                                                                                                             | `boolean`  | `undefined` |
+
+
+## Events
+
+| Event                   | Description                                                                                                                                                                                                                                                                                                               | Type                                                      |
+| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- |
+| `choicelistChange`      | An event that is emitted when the selected value changes. The event detail will be an array of booleans, where each boolean corresponds to the checked state of the choices.                                                                                                                                              | `CustomEvent<boolean[]>`                                  |
+| `choicelistValueChange` | An event that is emitted when the selected value changes. The event detail will be an array if the multi prop is true, otherwise it will be a single value. The value will be string if value is provided for choices, otherwise it will be a boolean.  NOTE: This will only be emitted if choices have a value property. | `CustomEvent<(string \| boolean)[] \| boolean \| string>` |
+
+
+## Dependencies
+
+### Depends on
+
+- [xpl-checkbox](../xpl-checkbox)
+- [xpl-radio](../xpl-radio)
+
+### Graph
+```mermaid
+graph TD;
+  xpl-choicelist --> xpl-checkbox
+  xpl-choicelist --> xpl-radio
+  style xpl-choicelist fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

package/dist/docs/xpl-content-area/readme.md

@@ -0,0 +1,17 @@
+# xpl-content-area
+
+The `<xpl-content-area>` sets up the area for the main content of the page. This component renders a `<main>` element with an unnamed `<slot>`, and should not be combined with another `<main>` in the same page.
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property | Attribute | Description | Type                           | Default  |
+| -------- | --------- | ----------- | ------------------------------ | -------- |
+| `size`   | `size`    |             | `"full" \| "narrow" \| "wide"` | `'wide'` |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

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

@@ -0,0 +1,10 @@
+# xpl-dashboard
+
+The XPL-Dashboard component is a code-only utility component for responsive layouts using the XPL-Data Card component. 
+
+<!-- Auto Generated Below -->
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*