npm - @xplortech/apollo-core - Versions diffs - 2.4.2 → 2.5.0 - Mend

@xplortech/apollo-core 2.4.2 → 2.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (156) hide show

package/dist/docs/xpl-input/readme.md ADDED Viewed

@@ -0,0 +1,90 @@
+# xpl-input
+<!-- Auto Generated Below -->
+## 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.  Applies to all input types.                                                             | `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.  Applies to file inputs.                                                  | `string`                                                                    | `''`        |
+| `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`     |
+| `autocomplete`        | `autocomplete`           | Hint for form autofill feature  Applies to text, password, number.                                                                                                                                                                                   | `string`                                                                    | `undefined` |
+| `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.  Applies to date inputs.                           | `string`                                                                    | `'Y-m-d'`   |
+| `description`         | `description`            | Optional text that appears below the input label.  Applies to all input types.                                                                                                                                                                       | `string`                                                                    | `undefined` |
+| `disabled`            | `disabled`               | Whether the field is disabled  Applies to all input types.                                                                                                                                                                                           | `boolean`                                                                   | `undefined` |
+| `error`               | `error`                  | If an empty string (attribute present with no value), will display visually as an error. If a string is included, will display visually as an error and include the value as an error message.  Applies to all input types.                          | `string`                                                                    | `undefined` |
+| `hideAcceptText`      | `hide-accept-text`       | Hides the "Accept" text that indicates the accepted file types This is useful for cases where you want to hide the "Accept" text.  Applies to file inputs.                                                                                           | `boolean`                                                                   | `false`     |
+| `hideEyeDropper`      | `hide-eye-dropper`       | Hide eye dropper  Applies to color inputs.                                                                                                                                                                                                           | `boolean`                                                                   | `undefined` |
+| `hideFileNames`       | `hide-file-names`        | Hides the file names in the file upload component This is useful for cases where you want to hide the file names after selection.  Applies to file inputs.                                                                                           | `boolean`                                                                   | `false`     |
+| `hideTriggerOnSelect` | `hide-trigger-on-select` | Hides the trigger element when a file is selected. This is useful for cases where you want to hide the trigger after a file is selected.  Applies to file inputs.                                                                                    | `boolean`                                                                   | `false`     |
+| `label`               | `label`                  | Label text for the field  Applies to all input types.                                                                                                                                                                                                | `string`                                                                    | `undefined` |
+| `max`                 | `max`                    | Maximum value for the input.  Applies to number, time, and date inputs.  If the input is a time input, the value must be in 24 hour format, ex: 18:25 for 6:25 PM                                                                                    | `number \| string`                                                          | `undefined` |
+| `maxCharacterCount`   | `max-character-count`    | For multiline inputs, a max. character count will display along with the current character count, and will automatically render as an error if the character count exceeds the max.  This is only applicable if `multiline` is `true`.               | `number`                                                                    | `undefined` |
+| `min`                 | `min`                    | The minimum value for the input.  Applies to number, time, and date inputs.  If the input is a time input, the value must be in 24 hour format, ex: 05:25 for 5:25 AM                                                                                | `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.)  Applies to date inputs.                                                                     | `"range" \| "single"`                                                       | `'single'`  |
+| `multiline`           | `multiline`              | Whether to render as a singleline text input or as a multiline textarea. (If `true`, `pre` and `post` values will be ignored, if present.)  Applies to text inputs.                                                                                  | `boolean`                                                                   | `false`     |
+| `multiple`            | `multiple`               | Whether the user can select multiple files at once. Corresponds to the `multiple` attribute on the input element.  Applies to file inputs.                                                                                                           | `boolean`                                                                   | `false`     |
+| `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.  Applies to text, password, number, and date inputs. Note: This will be ignored if `multiline` is `true`.                                        | `string`                                                                    | `undefined` |
+| `pre`                 | `pre`                    | A string (recommended max 8 characters) that gets shown visually to the right of (after) the input.  Applies to text, password, number, and date inputs. Note: This will be ignored if `multiline` is `true`.                                        | `string`                                                                    | `undefined` |
+| `readonly`            | `readonly`               | Whether the input is editable  Applies to text, password, number, and date inputs.                                                                                                                                                                   | `boolean`                                                                   | `undefined` |
+| `required`            | `required`               | Whether the input is required  Applies to all input types.                                                                                                                                                                                           | `boolean`                                                                   | `undefined` |
+| `step`                | `step`                   | The granularity that the value in a `number` input must adhere to when incrementing or decrementing. The default stepping value for number inputs is 1  Applies to number and time inputs.                                                           | `number`                                                                    | `undefined` |
+| `timeFormat`          | `time-format`            | The time format to display for the input.  Applies to time inputs.  If 12h is selected, the value will be displayed in 12 hour format, ex: 05:25 PM for 17:25 If 24h is selected, the value will be displayed in 24 hour format, ex: 17:25 for 17:25 | `"12h" \| "24h"`                                                            | `'24h'`     |
+| `type`                | `type`                   | The type of form control                                                                                                                                                                                                                             | `"color" \| "date" \| "file" \| "number" \| "password" \| "text" \| "time"` | `'text'`    |
+| `value`               | `value`                  | Including a `value` will pre-populate the input with the given string.  Applies to text, password, number, and date inputs.                                                                                                                          | `string`                                                                    | `undefined` |
+## Events
+| Event         | Description                                                                        | Type                      |
+| ------------- | ---------------------------------------------------------------------------------- | ------------------------- |
+| `blurEvent`   | The event handler for the blur event                                               | `CustomEvent<FocusEvent>` |
+| `focusEvent`  | The event handler for the focus event                                              | `CustomEvent<FocusEvent>` |
+| `inputEvent`  | Event that emits the current value of the input  Applies to text like inputs only. | `CustomEvent<string>`     |
+| `valueChange` | Event that emits the current value of the input                                    | `CustomEvent<string>`     |
+## Dependencies
+### Used by
+ - [xpl-input-color](xpl-input-color)
+ - [xpl-input-time](xpl-input-time)
+### Depends on
+- [xpl-input-file](xpl-input-file)
+- [xpl-input-color](xpl-input-color)
+- [xpl-input-date](xpl-input-date)
+- [xpl-input-time](xpl-input-time)
+- [xpl-icon](../xpl-icon)
+### Graph
+```mermaid
+graph TD;
+  xpl-input --> xpl-input-file
+  xpl-input --> xpl-input-color
+  xpl-input --> xpl-input-date
+  xpl-input --> xpl-input-time
+  xpl-input --> xpl-icon
+  xpl-input-file --> xpl-icon
+  xpl-input-color --> xpl-input
+  xpl-input-date --> xpl-icon
+  xpl-input-time --> 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
+  style xpl-input fill:#f9f,stroke:#333,stroke-width:4px
+```
+----------------------------------------------
+*Built with [StencilJS](https://stenciljs.com/)*

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

@@ -0,0 +1,61 @@
+# 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
+  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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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-time/readme.md ADDED Viewed

@@ -0,0 +1,69 @@
+# 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-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
+  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 ADDED Viewed

@@ -0,0 +1,40 @@
+# xpl-large-card
+<!-- 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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -0,0 +1,55 @@
+# xpl-modal
+<!-- 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
+  style xpl-modal fill:#f9f,stroke:#333,stroke-width:4px
+```
+----------------------------------------------
+*Built with [StencilJS](https://stenciljs.com/)*

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

@@ -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/)*

package/dist/docs/xpl-pagination/readme.md ADDED Viewed

@@ -0,0 +1,52 @@
+# xpl-pagination
+> **Note:** This component is in beta. Use with caution and expect updates before the full release.
+<!-- Auto Generated Below -->
+## Properties
+| Property              | Attribute                | Description                                                                                       | Type      | Default              |
+| --------------------- | ------------------------ | ------------------------------------------------------------------------------------------------- | --------- | -------------------- |
+| `currentPage`         | `current-page`           | The current active page (1-based). Marked as mutable so we can update from inside this component. | `number`  | `1`                  |
+| `rowsPerPageOptions`  | `rows-per-page-options`  | The rows-per-page options offered in the dropdown.                                                | `string`  | `'10,25,50,100,150'` |
+| `selectedRowsPerPage` | `selected-rows-per-page` | The currently selected rows-per-page.                                                             | `number`  | `10`                 |
+| `totalPages`          | `total-pages`            | Total number of pages.                                                                            | `number`  | `1`                  |
+| `withPageControl`     | `with-page-control`      | Whether to allow go to page navigation.                                                           | `boolean` | `false`              |
+## Events
+| Event               | Description                                 | Type                  |
+| ------------------- | ------------------------------------------- | --------------------- |
+| `pageChange`        | Emitted whenever the current page changes.  | `CustomEvent<number>` |
+| `rowsPerPageChange` | Emitted whenever the rows-per-page changes. | `CustomEvent<number>` |
+## Dependencies
+### Depends on
+- [xpl-select](../xpl-select)
+- [xpl-icon](../xpl-icon)
+### Graph
+```mermaid
+graph TD;
+  xpl-pagination --> xpl-select
+  xpl-pagination --> xpl-icon
+  xpl-select --> xpl-tag
+  xpl-select --> xpl-icon
+  xpl-select --> 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
+  style xpl-pagination fill:#f9f,stroke:#333,stroke-width:4px
+```
+----------------------------------------------
+*Built with [StencilJS](https://stenciljs.com/)*