@xplortech/apollo-core 2.4.3 → 2.6.0

package/dist/docs/xpl-input/xpl-input-color/readme.md

@@ -0,0 +1,65 @@
+# xpl-input-color
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property         | Attribute          | Description                                                                   | Type      | Default          |
+| ---------------- | ------------------ | ----------------------------------------------------------------------------- | --------- | ---------------- |
+| `disabled`       | `disabled`         | Indicates whether the color picker is disabled.                               | `boolean` | `undefined`      |
+| `hideEyeDropper` | `hide-eye-dropper` | Hide eye dropper                                                              | `boolean` | `undefined`      |
+| `placeholder`    | `placeholder`      | Placeholder text for the color input. This is used when no color is selected. | `string`  | `'Select color'` |
+| `required`       | `required`         | Indicates whether the color picker is required.                               | `boolean` | `undefined`      |
+| `value`          | `value`            | The color value of the picker.                                                | `string`  | `undefined`      |
+
+
+## Events
+
+| Event                  | Description                                                 | Type                  |
+| ---------------------- | ----------------------------------------------------------- | --------------------- |
+| `hasErrorStateChanged` | Event that is emitted when the hasErrorState state changes. | `CustomEvent<string>` |
+| `inputChange`          | Event that is emitted when the color value changes.         | `CustomEvent<string>` |
+
+
+## Dependencies
+
+### Used by
+
+ - [xpl-input](..)
+
+### Depends on
+
+- [xpl-popover](../../xpl-popover)
+- [xpl-icon](../../xpl-icon)
+- [xpl-input](..)
+
+### Graph
+```mermaid
+graph TD;
+  xpl-input-color --> xpl-popover
+  xpl-input-color --> xpl-icon
+  xpl-input-color --> xpl-input
+  xpl-input --> xpl-input-color
+  xpl-input-file --> xpl-icon
+  xpl-input-date --> xpl-icon
+  xpl-input-time --> xpl-input
+  xpl-input-time --> xpl-icon
+  xpl-input-time --> xpl-dropdown
+  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-input-phone --> xpl-icon
+  xpl-input-phone --> xpl-dropdown
+  xpl-input-phone --> xpl-input
+  style xpl-input-color fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

package/dist/docs/xpl-input/xpl-input-date/readme.md

@@ -0,0 +1,56 @@
+# xpl-input-date
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property      | Attribute     | Description                                                                                                                                                                                       | Type                  | Default     |
+| ------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- |
+| `dateFormat`  | `date-format` | The date format to use for the datepicker input. This is used by flatpickr to format the date. Default is 'Y-m-d' (e.g., 2023-10-01).  See https://flatpickr.js.org/formatting/ for more details. | `string`              | `'Y-m-d'`   |
+| `disabled`    | `disabled`    | Whether the field is disabled                                                                                                                                                                     | `boolean`             | `undefined` |
+| `inputId`     | `input-id`    | The `inputId` is used to associate the input with a label.                                                                                                                                        | `string`              | `undefined` |
+| `max`         | `max`         | Maximum value for the input.                                                                                                                                                                      | `number \| string`    | `undefined` |
+| `min`         | `min`         | The minimum value for the input.                                                                                                                                                                  | `number \| string`    | `undefined` |
+| `mode`        | `mode`        | For datepicker inputs, whether to allow only a single date or a range of dates. (Multiple non-consecutive dates planned to be supported in the future.)                                           | `"range" \| "single"` | `'single'`  |
+| `name`        | `name`        | Most inputs are used in forms, and should have a `name` associated with the input for handling form data.  Applies to all input types.                                                            | `string`              | `undefined` |
+| `placeholder` | `placeholder` | Placeholder text that appears when the field has no value  Applies to text, password, number, and date inputs.                                                                                    | `string`              | `undefined` |
+| `post`        | `post`        | A string (recommended max 3 characters) that gets shown visually to the left of (before) the input.                                                                                               | `string`              | `undefined` |
+| `pre`         | `pre`         | A string (recommended max 8 characters) that gets shown visually to the right of (after) the input.                                                                                               | `string`              | `undefined` |
+| `readonly`    | `readonly`    | Whether the input is editable                                                                                                                                                                     | `boolean`             | `undefined` |
+| `required`    | `required`    | Whether the input is required                                                                                                                                                                     | `boolean`             | `undefined` |
+| `value`       | `value`       | Including a `value` will pre-populate the input with the given string.                                                                                                                            | `string`              | `undefined` |
+
+
+## Events
+
+| Event                  | Description                                                                                                                          | Type                                       |
+| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------ |
+| `hasErrorStateChanged` | Event that is emitted when the hasErrorState state changes.                                                                          | `CustomEvent<string>`                      |
+| `rangeSelected`        | Event that emits the selected date range when the mode is 'range'. The emitted value is an object with `start` and `end` properties. | `CustomEvent<{ start: Date; end: Date; }>` |
+| `valueChange`          | Event that emits the current value of the input                                                                                      | `CustomEvent<string>`                      |
+
+
+## Dependencies
+
+### Used by
+
+ - [xpl-input](..)
+
+### Depends on
+
+- [xpl-icon](../../xpl-icon)
+
+### Graph
+```mermaid
+graph TD;
+  xpl-input-date --> xpl-icon
+  xpl-input --> xpl-input-date
+  style xpl-input-date fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

package/dist/docs/xpl-input/xpl-input-file/readme.md

@@ -0,0 +1,79 @@
+# xpl-file-upload
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Overview
+
+`xpl-input-file` is a component that allows users to upload files.
+
+## Properties
+
+| Property              | Attribute                | Description                                                                                                                                                                | Type      | Default     |
+| --------------------- | ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ----------- |
+| `_id`                 | `_id`                    | Because `id` is a reserved HTMLElement attribute, we prefix it with an underscore here so that it doesn't get automatically applied to the outer container.                | `string`  | `undefined` |
+| `accept`              | `accept`                 | The accepted file types for the file input. Corresponds to the `accept` attribute on the input element. Example: 'image/*' for all image types, '.pdf' for PDF files, etc. | `string`  | `''`        |
+| `disabled`            | `disabled`               | Whether the field is disabled                                                                                                                                              | `boolean` | `undefined` |
+| `hideAcceptText`      | `hide-accept-text`       | Hides the "Accept" text that indicates the accepted file types                                                                                                             | `boolean` | `false`     |
+| `hideFileNames`       | `hide-file-names`        | Hides the file names in the file upload component                                                                                                                          | `boolean` | `false`     |
+| `hideTriggerOnSelect` | `hide-trigger-on-select` | Hides the trigger element when a file is selected.                                                                                                                         | `boolean` | `false`     |
+| `multiple`            | `multiple`               | Whether the user can select multiple files at once. Corresponds to the `multiple` attribute on the input element.                                                          | `boolean` | `false`     |
+| `name`                | `name`                   | Most inputs are used in forms, and should have a `name` associated with the input for handling form data.                                                                  | `string`  | `undefined` |
+
+
+## Events
+
+| Event         | Description                                                                           | Type                                            |
+| ------------- | ------------------------------------------------------------------------------------- | ----------------------------------------------- |
+| `inputChange` | Event emitted when a file is selected. The event detail contains the FileList object. | `CustomEvent<{ type: string; value: File[]; }>` |
+
+
+## Methods
+
+### `removeFileByIndex(fileIndex: number) => Promise<void>`
+
+Removes a file from the selected files by its index.
+
+#### Parameters
+
+| Name        | Type     | Description                      |
+| ----------- | -------- | -------------------------------- |
+| `fileIndex` | `number` | The index of the file to remove. |
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
+
+## Slots
+
+| Slot        | Description                                                       |
+| ----------- | ----------------------------------------------------------------- |
+| `"trigger"` | The element that, when clicked, will open the file select dialog. |
+
+
+## Dependencies
+
+### Used by
+
+ - [xpl-input](..)
+
+### Depends on
+
+- [xpl-icon](../../xpl-icon)
+
+### Graph
+```mermaid
+graph TD;
+  xpl-input-file --> xpl-icon
+  xpl-input --> xpl-input-file
+  style xpl-input-file fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

package/dist/docs/xpl-input/xpl-input-phone/readme.md

@@ -0,0 +1,167 @@
+# xpl-input-phone
+
+The Phone Input Field allows users to input properly formatted phone numbers. It supports two modes: **international** (country selector + dial code prefix) and **domestic** (single country, no selector). Used as a subcomponent of `xpl-input` when `type="phone"`. The value is always emitted in **E.164** format (e.g. `+14155551234`).
+
+## Usage
+
+### International mode (default)
+
+Use via the parent component for full international support with a country selector:
+
+```html
+<xpl-input type="phone" label="Phone number" name="phone"></xpl-input>
+```
+
+With preferred countries pinned to the top of the list:
+
+```html
+<xpl-input
+  type="phone"
+  label="Phone number"
+  name="phone"
+  preferred-countries='["US","CA","GB"]'
+></xpl-input>
+```
+
+### Domestic mode
+
+Set `is-international="false"` to lock the input to a single country. The country selector trigger and dropdown are hidden, and no dial code is shown in the input. The emitted value is still E.164.
+
+```html
+<xpl-input
+  type="phone"
+  label="Phone number"
+  name="phone"
+  default-country="US"
+  is-international="false"
+></xpl-input>
+```
+
+### Pre-populating a value
+
+Pass an E.164 string to `value`. The component parses it into the correct country and national number:
+
+```html
+<xpl-input type="phone" label="Phone" value="+14155551234"></xpl-input>
+```
+
+## Value format
+
+- **value** / **valueChange**: E.164 string (e.g. `+14155551234`). You can set `value` to pre-fill; the component parses it into country and national number.
+- **defaultCountry**: ISO 3166-1 alpha-2 code (e.g. `"US"`) used when value is empty. In domestic mode, this locks the country permanently.
+- **preferredCountries**: Optional array of country codes to show at the top of the country list (international mode only).
+- **isInternational**: When `true` (default), the full international UI is shown. When `false`, the component is a simple domestic phone input locked to `defaultCountry`.
+
+## Design and behaviour
+
+### Country selector (international mode)
+
+- The **trigger** displays a country flag icon (`xpl-icon`) and a chevron-down icon.
+- Clicking the trigger opens an `xpl-dropdown` panel containing a **type-ahead search** field and a scrollable list of countries. Each option shows its flag icon, name, and dial code.
+- Search filters by country name, dial code, or ISO country code.
+- When a country is selected, focus returns to the phone input and the cursor is positioned after the dial code.
+- Countries sharing a dial code (e.g. US and Canada both use `+1`) are handled correctly: changing the country in the dropdown preserves the selection even when the dial code is the same.
+
+### Domestic mode
+
+No country selector is rendered. The input behaves as a standard phone field with country-specific formatting and validation based on `defaultCountry`. The dial code is not displayed in the input, but the emitted value is still E.164.
+
+### Input handling
+
+- **Sanitization**: Non-numeric characters are automatically stripped on every keystroke, paste, or autofill. The input only accepts digits.
+- **Max length**: Enforced per country based on the national number format (e.g. 10 digits for US/CA, 9 for AU/FR).
+- **Cursor protection** (international mode): The dial code prefix (e.g. `+1 `) is read-only within the input. Users cannot backspace into it, click before it, or use Home/ArrowLeft to move the cursor before it.
+- **Clear button**: A clear (`x-circle`) button appears when there is input and the field is not disabled or readonly.
+
+### Phone formatting
+
+The national number is formatted as the user types (e.g. US: `415 555 1234`, FR: `6 12 34 56 78`). The stored and emitted value remains E.164. Cursor position is intelligently preserved during formatting so it does not jump.
+
+Countries with custom formatters: US/CA, GB, AU, DE/AT/CH, FR, BR, MX, JP, CN, IN, KR. All other countries use a generic grouping format.
+
+### Validation and errors
+
+- When `required` is set, the component emits a `hasErrorStateChanged` event with `"required"` if the national number is empty on change.
+- The parent `xpl-input` can pass an `error` prop for external error messages (e.g. server-side validation).
+- The component applies `xpl-input-phone--error` to the host when an internal error state is active.
+
+### Accessibility
+
+- The country selector trigger has `aria-haspopup="listbox"` and `aria-expanded`.
+- The country selector trigger has `aria-label="Select country"` for screen-reader clarity.
+- The dropdown panel has `aria-label="Country"`.
+- The clear button has `aria-label="Clear phone number"`.
+- The input uses `inputmode="numeric"` to hint a numeric keyboard on mobile and `autocomplete="tel-national"` (international) or `autocomplete="tel"` (domestic).
+- The input sets `aria-invalid="true"` when in an error state (e.g. required field left empty).
+- Decorative icons (flag, chevron) use `aria-hidden="true"` to avoid screen reader noise.
+
+## Supported countries
+
+28 countries are currently supported. See `phone-country-data.ts` for the full list. Countries with custom number formatting are noted above. To add a new country, add an entry to the `PHONE_COUNTRIES` array and optionally add a formatter in `phone-format.ts`.
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property             | Attribute          | Description                                                                                                                                                                                                                    | Type       | Default     |
+| -------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------- | ----------- |
+| `defaultCountry`     | `default-country`  | Default country code (ISO 3166-1 alpha-2) when value is empty, e.g. "US".                                                                                                                                                      | `string`   | `'US'`      |
+| `disabled`           | `disabled`         | Whether the field is disabled                                                                                                                                                                                                  | `boolean`  | `undefined` |
+| `inputId`            | `input-id`         | The `inputId` is used to associate the input with a label.                                                                                                                                                                     | `string`   | `undefined` |
+| `isInternational`    | `is-international` | Enables international mode with a country selector and dial code prefix. When false, the input is locked to `defaultCountry` with no country picker and no dial code shown in the display value. Emitted value is still E.164. | `boolean`  | `true`      |
+| `name`               | `name`             | Most inputs are used in forms, and should have a `name` associated with the input for handling form data.                                                                                                                      | `string`   | `undefined` |
+| `placeholder`        | `placeholder`      | Placeholder text that appears when the field has no value                                                                                                                                                                      | `string`   | `undefined` |
+| `preferredCountries` | --                 | Country codes to show at the top of the country list, e.g. ["US", "CA", "GB"].                                                                                                                                                 | `string[]` | `undefined` |
+| `readonly`           | `readonly`         | Whether the input is editable                                                                                                                                                                                                  | `boolean`  | `undefined` |
+| `required`           | `required`         | Whether the input is required                                                                                                                                                                                                  | `boolean`  | `undefined` |
+| `value`              | `value`            | Including a `value` will pre-populate the input (E.164 format, e.g. +14155551234).                                                                                                                                             | `string`   | `undefined` |
+
+
+## Events
+
+| Event                  | Description                                                     | Type                  |
+| ---------------------- | --------------------------------------------------------------- | --------------------- |
+| `hasErrorStateChanged` | Event that is emitted when the hasErrorState state changes.     | `CustomEvent<string>` |
+| `valueChange`          | Event that emits the current value of the input (E.164 format). | `CustomEvent<string>` |
+
+
+## Dependencies
+
+### Used by
+
+ - [xpl-input](..)
+
+### Depends on
+
+- [xpl-icon](../../xpl-icon)
+- [xpl-dropdown](../../xpl-dropdown)
+- [xpl-input](..)
+
+### Graph
+```mermaid
+graph TD;
+  xpl-input-phone --> xpl-icon
+  xpl-input-phone --> xpl-dropdown
+  xpl-input-phone --> xpl-input
+  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-input --> xpl-input-phone
+  xpl-input-file --> xpl-icon
+  xpl-input-color --> xpl-popover
+  xpl-input-color --> xpl-icon
+  xpl-input-color --> xpl-input
+  xpl-input-date --> xpl-icon
+  xpl-input-time --> xpl-input
+  xpl-input-time --> xpl-icon
+  xpl-input-time --> xpl-dropdown
+  style xpl-input-phone fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

package/dist/docs/xpl-input/xpl-input-time/readme.md

@@ -0,0 +1,73 @@
+# xpl-input-time
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property            | Attribute             | Description                                                                                                                                                                              | Type                  | Default     |
+| ------------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- |
+| `allowCustomOption` | `allow-custom-option` | For time inputs, whether to allow custom option in the input even if not available in the dropdown. Example: A step of 30 minutes will allow 15:03, 15:37, etc.  Applies to time inputs. | `boolean`             | `false`     |
+| `disabled`          | `disabled`            | Whether the field is disabled                                                                                                                                                            | `boolean`             | `undefined` |
+| `inputId`           | `input-id`            | The `inputId` is used to associate the input with a label.                                                                                                                               | `string`              | `undefined` |
+| `max`               | `max`                 | Maximum value for the input.                                                                                                                                                             | `number \| string`    | `'23:59'`   |
+| `min`               | `min`                 | The minimum value for the input.                                                                                                                                                         | `number \| string`    | `'00:00'`   |
+| `mode`              | `mode`                | Whether the input is a single time or a range of times.  Currently, only single time is supported.                                                                                       | `"range" \| "single"` | `'single'`  |
+| `name`              | `name`                | Most inputs are used in forms, and should have a `name` associated with the input for handling form data.  Applies to all input types.                                                   | `string`              | `undefined` |
+| `placeholder`       | `placeholder`         | Placeholder text that appears when the field has no value  Applies to text, password, number, and date inputs.                                                                           | `string`              | `undefined` |
+| `readonly`          | `readonly`            | Whether the input is editable                                                                                                                                                            | `boolean`             | `undefined` |
+| `required`          | `required`            | Whether the input is required                                                                                                                                                            | `boolean`             | `undefined` |
+| `step`              | `step`                | Time increment for dropdown options                                                                                                                                                      | `number`              | `30`        |
+| `timeFormat`        | `time-format`         | The time format to display for the input.                                                                                                                                                | `"12h" \| "24h"`      | `'24h'`     |
+| `value`             | `value`               | Including a `value` will pre-populate the input with the given string.  Must be in 24 hour format, ex: 15:25 for 3:25 PM                                                                 | `string`              | `undefined` |
+
+
+## Events
+
+| Event                  | Description                                                 | Type                  |
+| ---------------------- | ----------------------------------------------------------- | --------------------- |
+| `hasErrorStateChanged` | Event that is emitted when the hasErrorState state changes. | `CustomEvent<string>` |
+| `valueChange`          | Event that emits the current value of the input             | `CustomEvent<string>` |
+
+
+## Dependencies
+
+### Used by
+
+ - [xpl-input](..)
+
+### Depends on
+
+- [xpl-input](..)
+- [xpl-icon](../../xpl-icon)
+- [xpl-dropdown](../../xpl-dropdown)
+
+### Graph
+```mermaid
+graph TD;
+  xpl-input-time --> xpl-input
+  xpl-input-time --> xpl-icon
+  xpl-input-time --> xpl-dropdown
+  xpl-input --> xpl-input-time
+  xpl-input-file --> xpl-icon
+  xpl-input-color --> xpl-popover
+  xpl-input-color --> xpl-icon
+  xpl-input-color --> xpl-input
+  xpl-input-date --> xpl-icon
+  xpl-input-phone --> xpl-icon
+  xpl-input-phone --> xpl-dropdown
+  xpl-input-phone --> xpl-input
+  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
+  style xpl-input-time fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

package/dist/docs/xpl-large-card/readme.md

@@ -0,0 +1,40 @@
+# xpl-large-card
+
+A card is a container and can contain any type of information. Cards contain actions and a content slot. Cards are flexible and can be arranged in grids or lists.
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property      | Attribute     | Description                       | Type      | Default     |
+| ------------- | ------------- | --------------------------------- | --------- | ----------- |
+| `description` | `description` | Description of the Card           | `string`  | `undefined` |
+| `link`        | `link`        | Whether the card is a link or not | `boolean` | `undefined` |
+| `name`        | `name`        | Name of the Card                  | `string`  | `undefined` |
+
+
+## Slots
+
+| Slot              | Description                                                                                                                                |
+| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
+| `"graph-content"` | Content that is shown on the right-side of the card. Generally used for supplemental data visualizations for the data-card                 |
+| `"title"`         | The title for the card. This slot should be used as a replacement for the name field. Used to define a title and tooltip for the data-card |
+
+
+## Dependencies
+
+### Depends on
+
+- [xpl-icon](../xpl-icon)
+
+### Graph
+```mermaid
+graph TD;
+  xpl-large-card --> xpl-icon
+  style xpl-large-card fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

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

@@ -0,0 +1,34 @@
+# xpl-list
+
+A list item is a card with interactive states. List items allow users to select items from a list of items and view more information or make edits. 
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property | Attribute | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | Type         | Default |
+| -------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | ------- |
+| `items`  | --        | `items` should be an array of objects with the following signature: {   avatar?: string;        // The URL of the avatar, or the placeholder initials (ex. "SPD").   avatars?: string[];     // The URLs of multiple avatars to be displayed in a group on the right.   badges?: string[] \| {   // An array of strings or badge-like objects to be displayed as badges     dot?: boolean;        // in a group on the right. See <xpl-badge> for more details.     text: string;     variant?: string;   }[];   href?: string;          // A URL, if this list item is meant to link somewhere.   title: string;          // The text to be displayed for the list item.   metadata?: string[] \| { // An array of strings or strings with icons (reference the allowed     icon: string;         // Apollo icons) to be displayed as metadata below the title.     text: string;   }[];   subtext?: string;       // Subtext to be displayed on the right. }  - Note that you should *only use one of* `avatars`, `badges`, or `subtext`, to avoid cluttering   the right-hand side of the list item. | `ListItem[]` | `[]`    |
+
+
+## Dependencies
+
+### Depends on
+
+- [xpl-avatar](../xpl-avatar)
+- [xpl-icon](../xpl-icon)
+- [xpl-badge](../xpl-badge)
+
+### Graph
+```mermaid
+graph TD;
+  xpl-list --> xpl-avatar
+  xpl-list --> xpl-icon
+  xpl-list --> xpl-badge
+  style xpl-list fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

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

@@ -0,0 +1,28 @@
+# xpl-main-nav
+
+The Main Nav component contains is split in 3 areas. The top area is where the branding goes. It's divided into 2 slots `logo` and `brand-name`.
+The middle area is where the main navigation links go. It's a `<nav>` tag with a slot named `navigation`, where a `<ul slot="navigation">` with `<xpl-nav-items>` should be rendered.
+
+The bottom area is fixed to the bottom and should be used for actions. To render content within this area use the slot `footer` with a `<ul slot="footer">` tag.
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property | Attribute | Description | Type                        | Default     |
+| -------- | --------- | ----------- | --------------------------- | ----------- |
+| `width`  | `width`   |             | `"default" \| "md" \| "sm"` | `'default'` |
+
+
+## Events
+
+| Event      | Description | Type                  |
+| ---------- | ----------- | --------------------- |
+| `navWidth` |             | `CustomEvent<string>` |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

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

@@ -0,0 +1,58 @@
+# xpl-modal
+
+Modals are dialogs that focus the user’s attention exclusively on one task or piece of information via a window layer above the current content.
+
+Modals are disruptive and should only be used when disrupting the user’s flow is desired.
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property  | Attribute | Description                      | Type                             | Default     |
+| --------- | --------- | -------------------------------- | -------------------------------- | ----------- |
+| `isOpen`  | `is-open` | Whether the modal is open.       | `boolean`                        | `false`     |
+| `size`    | `size`    | The size of the modal.           | `"large" \| "medium" \| "small"` | `'medium'`  |
+| `variant` | `variant` | The visual variant of the modal. | `"default" \| "warning"`         | `'default'` |
+
+
+## Events
+
+| Event         | Description                       | Type                |
+| ------------- | --------------------------------- | ------------------- |
+| `modalClosed` | Emitted when the modal is closed. | `CustomEvent<void>` |
+
+
+## Slots
+
+| Slot          | Description                        |
+| ------------- | ---------------------------------- |
+| `"body"`      | The body of the modal.             |
+| `"primary"`   | The primary button of the modal.   |
+| `"secondary"` | The secondary button of the modal. |
+| `"subtitle"`  | The subtitle of the modal.         |
+| `"tertiary"`  | The tertiary button of the modal.  |
+| `"title"`     | The title of the modal.            |
+
+
+## Dependencies
+
+### Depends on
+
+- [xpl-backdrop](../xpl-backdrop)
+- [xpl-icon](../xpl-icon)
+- [xpl-button](../xpl-button)
+
+### Graph
+```mermaid
+graph TD;
+  xpl-modal --> xpl-backdrop
+  xpl-modal --> xpl-icon
+  xpl-modal --> xpl-button
+  xpl-button --> xpl-icon
+  style xpl-modal fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

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

@@ -0,0 +1,24 @@
+# xpl-nav-item
+
+This component should be used within sections of the `<xpl-main-nav>`. This component yields a slot named `link`, where a `<a>` tag should be used. Within the `<a>` tag, there are two slots, one named `icon`, where any svg can be placed. An an unnamed slot, where the link text should be placed.
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property     | Attribute     | Description | Type      | Default |
+| ------------ | ------------- | ----------- | --------- | ------- |
+| `navControl` | `nav-control` |             | `boolean` | `false` |
+
+
+## Events
+
+| Event     | Description | Type                   |
+| --------- | ----------- | ---------------------- |
+| `navOpen` |             | `CustomEvent<boolean>` |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*