@xplortech/apollo-core 2.4.3 → 2.5.0

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

@@ -0,0 +1,48 @@
+# xpl-popover
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property   | Attribute  | Description                                                                                                                                                                             | Type                                                                                                                                                                                               | Default           |
+| ---------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- |
+| `disabled` | `disabled` | Whether the popover is disabled or not.                                                                                                                                                 | `boolean`                                                                                                                                                                                          | `false`           |
+| `display`  | `display`  | The display style of the popover, either as an arrow or a menu. - 'arrow': Displays an arrow pointing to the trigger element. - 'menu': Displays a menu-style popover without an arrow. | `"arrow" \| "menu"`                                                                                                                                                                                | `'arrow'`         |
+| `isOpen`   | `is-open`  | Whether the popover is open by default or not.                                                                                                                                          | `boolean`                                                                                                                                                                                          | `false`           |
+| `position` | `position` | The position of the trigger element relative to the popover.                                                                                                                            | `"bottom-end" \| "bottom-left" \| "bottom-middle" \| "bottom-right" \| "bottom-start" \| "middle-left" \| "middle-right" \| "top-end" \| "top-left" \| "top-middle" \| "top-right" \| "top-start"` | `'bottom-middle'` |
+
+
+## Events
+
+| Event          | Description                                         | Type                   |
+| -------------- | --------------------------------------------------- | ---------------------- |
+| `isOpenChange` | Event emitted when the popover is opened or closed. | `CustomEvent<boolean>` |
+
+
+## Slots
+
+| Slot              | Description                                           |
+| ----------------- | ----------------------------------------------------- |
+| `"Inner Content"` | Content inside the popover                            |
+| `"trigger"`       | The element that, when clicked, will open the popover |
+
+
+## Dependencies
+
+### Used by
+
+ - [xpl-input-color](../xpl-input/xpl-input-color)
+
+### Graph
+```mermaid
+graph TD;
+  xpl-input-color --> xpl-popover
+  style xpl-popover fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

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

@@ -0,0 +1,22 @@
+# xpl-progress
+
+A progress indicator guides users through any linear, multi-step task by showing the user their completed, current, and future steps.
+
+Progress indicators help manage a user’s expectations when completing a multistep process. They show which step the user is currently on, the total number of steps, and overall progress in completing a task.
+
+Horizontal Progress Indicator is used in most desktop applications where a stepped process is required to finish a task and it is beneficial to the user to see their progress. This creates confidence in the user and sets expectations for the length and complexity of the process.
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property      | Attribute      | Description                                           | Type       | Default     |
+| ------------- | -------------- | ----------------------------------------------------- | ---------- | ----------- |
+| `currentStep` | `current-step` | Current step, is the index of the current active step | `number`   | `0`         |
+| `steps`       | --             | The steps is an array of the steps name.              | `string[]` | `undefined` |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

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

@@ -0,0 +1,43 @@
+# xpl-radio
+
+Radio buttons allow users to make selections or choices. Radios are always single select, and can also act as controls.
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property      | Attribute     | Description                                                                                | Type      | Default     |
+| ------------- | ------------- | ------------------------------------------------------------------------------------------ | --------- | ----------- |
+| `checked`     | `checked`     | Whether the input is "on"                                                                  | `boolean` | `undefined` |
+| `description` | `description` | Description text for the field                                                             | `string`  | `undefined` |
+| `disabled`    | `disabled`    | Whether the input is disabled                                                              | `boolean` | `undefined` |
+| `name`        | `name`        | The name attribute for the html input. (submittted 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, in disabled state, a background | `boolean` | `undefined` |
+| `value`       | `value`       | The value attribute for the radio input. (submittted in form as name/value pair)           | `string`  | `undefined` |
+
+
+## Events
+
+| Event         | Description                                                                                                                                             | Type                             |
+| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- |
+| `radioChange` | Event that emits the current value of the radio input  Returns the value of the radio input if a value is provided, otherwise returns the checked state | `CustomEvent<boolean \| string>` |
+
+
+## Dependencies
+
+### Used by
+
+ - [xpl-choicelist](../xpl-choicelist)
+
+### Graph
+```mermaid
+graph TD;
+  xpl-choicelist --> xpl-radio
+  style xpl-radio fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

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

@@ -0,0 +1,10 @@
+# secondary-nav
+
+The Secondary Nav component is a component that allows navigation within the content area. It yields one slot where a <ul> element with <xpl-nav-item> elements should be rendered.
+
+<!-- Auto Generated Below -->
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

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

@@ -0,0 +1,88 @@
+# xpl-select
+
+Select allows users to make a single selection or multiple selections from a list of options.  Items can be a simple list, grouped, simple multi-select. User selections typically appear within the Select Box once created unless multiple selections are made, where truncation or another method of showing these selections is required.
+
+***When the list of options contains “Actions”, use a ***[Dropdown component](https://xplor-apollo.herokuapp.com/?path=/story/components-dropdown--simple). 
+
+The `selectIcon` property accepts icon names as strings. See [xpl-icon available icons](../xpl-icon/ICONS.md) for the complete list.
+
+---
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property             | Attribute              | Description                                                                                                                                                                                                                                                               | Type                                              | Default          |
+| -------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------- | ---------------- |
+| `choices`            | --                     | An array of choices for the user to choose from. Each choice should be of the form: {   label: string;   href?: string;   value?: string;   isGroupHeading?: boolean;   isSelected?: boolean;   isDisabled?: boolean;   options?: DropdownItem[];   groupName?: string; } | `Partial<DropdownOption & DropdownOptionGroup>[]` | `[]`             |
+| `classNames`         | `class-names`          | The class name to apply to the select component.                                                                                                                                                                                                                          | `string`                                          | `undefined`      |
+| `customDisplayValue` | `custom-display-value` | If true, enables custom display value rendering via slot.                                                                                                                                                                                                                 | `boolean`                                         | `undefined`      |
+| `description`        | `description`          | Optional text that appears below the input label.                                                                                                                                                                                                                         | `string`                                          | `undefined`      |
+| `disabled`           | `disabled`             | Whether the field is disabled                                                                                                                                                                                                                                             | `boolean`                                         | `undefined`      |
+| `error`              | `error`                | If an empty string (attribute present with no value), will display visually as an error. If a string is included, will display visually as an error and include the value as an error message.                                                                            | `string`                                          | `undefined`      |
+| `label`              | `label`                | The label that appears above the select dropdown                                                                                                                                                                                                                          | `string`                                          | `undefined`      |
+| `mode`               | `mode`                 | Whether to allow a single choice or multiple choices.                                                                                                                                                                                                                     | `"multi" \| "single"`                             | `'single'`       |
+| `name`               | `name`                 | The name of the hidden input field that contains the selected option's value(s)                                                                                                                                                                                           | `string`                                          | `undefined`      |
+| `placeholder`        | `placeholder`          | Placeholder text that appears when the field has no value                                                                                                                                                                                                                 | `string`                                          | `undefined`      |
+| `selectIcon`         | `select-icon`          | The icon to display in the select trigger button.  See [xpl-icon available icons](../xpl-icon/ICONS.md) for valid icon names.                                                                                                                                             | `string`                                          | `'chevron-down'` |
+| `selectedValues`     | `selected-values`      | The value(s) currently selected in the select component.                                                                                                                                                                                                                  | `string \| string[]`                              | `undefined`      |
+| `truncate`           | `truncate`             | Only used in multi-choice selects. If `true`, badges representing selections that would overflow the container are replaced with "+x more" (where x is the number not shown). If `false`, the container's height will adjust to show all badges representing selections.  | `boolean`                                         | `true`           |
+
+
+## Events
+
+| Event                 | Description                                                                                                                                                  | Type                                                       |
+| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------- |
+| `changeEvent`         | Emits the value of the selected option in the select menu on change                                                                                          | `CustomEvent<string \| string[]>`                          |
+| `dropdownStateChange` | Emits when the dropdown opens or closes                                                                                                                      | `CustomEvent<boolean>`                                     |
+| `selectChange`        | Emits the value of the selected option in the select menu on change                                                                                          | `CustomEvent<string>`                                      |
+| `triggerDropdown`     | Emits before the dropdown state changes, allowing listeners to prevent the default behavior. The event detail contains the previous and new dropdown states. | `CustomEvent<{ prevState: boolean; nextState: boolean; }>` |
+
+
+## Methods
+
+### `reset() => Promise<void>`
+
+Resets the select component to its initial state with no selections.
+This clears all selected values and returns the component to its default state.
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
+
+## Dependencies
+
+### Used by
+
+ - [xpl-pagination](../xpl-pagination)
+ - [xpl-tabs](../xpl-tabs)
+
+### Depends on
+
+- [xpl-tag](../xpl-tag)
+- [xpl-icon](../xpl-icon)
+- [xpl-dropdown](../xpl-dropdown)
+
+### Graph
+```mermaid
+graph TD;
+  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
+  xpl-pagination --> xpl-select
+  xpl-tabs --> xpl-select
+  style xpl-select fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

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

@@ -0,0 +1,31 @@
+# xpl-skeleton
+
+Skeleton components are progress indicators used for full page loading states that reduce the perception of long loading times and provide both reassurance to the user as well as clues for how the page will ultimately look. 
+
+Includes:
+Components - Text, Shape, Data
+Variants - Text: Display, Title, Body  Shape: rectangle, pill, circle, square
+Properties - Text/Body: show 1, 2 or 3 lines
+
+**Note: The “shimmer” effect uses Tailwind’s `animated-pulse` for the duration skeletons are present. The [animated pulse](https://tailwindcss.com/docs/animation#adding-a-pulse-animation) animates the color between our `color-background-surface-transparent-10` and `color-background-surface-transparent-5` variables. 
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property     | Attribute     | Description                                                                                    | Type                                                                                               | Default       |
+| ------------ | ------------- | ---------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- | ------------- |
+| `classNames` | `class-names` | A CSS class name to apply to the component.                                                    | `string`                                                                                           | `undefined`   |
+| `fullWidth`  | `full-width`  | If true, the skeleton will take up the full width of its container.                            | `boolean`                                                                                          | `undefined`   |
+| `height`     | `height`      | The height of the skeleton. (e.g. '100px', '100%', 'auto') accepts any valid CSS height value  | `string`                                                                                           | `undefined`   |
+| `margin`     | `margin`      | The margin of the skeleton. (e.g. '10px', '1rem', '1rem 0') accepts any valid CSS margin value | `string`                                                                                           | `undefined`   |
+| `shape`      | `shape`       | The shape of the skeleton.                                                                     | `"circle" \| "rectangle" \| "square"`                                                              | `'rectangle'` |
+| `size`       | `size`        | The predefined size of the skeleton.                                                           | `"body" \| "custom" \| "display" \| "title-1" \| "title-2" \| "title-3" \| "title-4" \| "title-5"` | `'custom'`    |
+| `width`      | `width`       | The width of the skeleton. (e.g. '100px', '100%', 'auto') accepts any valid CSS width value    | `string`                                                                                           | `undefined`   |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

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

@@ -0,0 +1,46 @@
+# xpl-slideout
+
+Content and Footer subcomponents are optional and can be hidden.  Slideout always has a header with an X close button upper right. Slide Out Panel OPTIONALLY uses the [<xpl-backdrop>](https://xplor-apollo.herokuapp.com/?path=/story/components-backdrop--backdrop) component to overlay content and create focus on the Slide Out Panel content.
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property     | Attribute     | Description                                                              | Type                     | Default     |
+| ------------ | ------------- | ------------------------------------------------------------------------ | ------------------------ | ----------- |
+| `backdrop`   | `backdrop`    | Whether to show a backdrop behind the slideout.                          | `boolean`                | `false`     |
+| `isOpen`     | `is-open`     | Whether the slideout is open.                                            | `boolean`                | `false`     |
+| `showFooter` | `show-footer` | Whether to show the footer section in the slideout.                      | `boolean`                | `true`      |
+| `variant`    | `variant`     | The visual style variant of the slideout. Can be 'default' or 'warning'. | `"default" \| "warning"` | `'default'` |
+
+
+## Events
+
+| Event          | Description                               | Type                   |
+| -------------- | ----------------------------------------- | ---------------------- |
+| `isOpenChange` | Emitted when the isOpen property changes. | `CustomEvent<boolean>` |
+
+
+## Dependencies
+
+### Depends on
+
+- [xpl-backdrop](../xpl-backdrop)
+- [xpl-button](../xpl-button)
+- [xpl-icon](../xpl-icon)
+- [xpl-divider](../xpl-divider)
+
+### Graph
+```mermaid
+graph TD;
+  xpl-slideout --> xpl-backdrop
+  xpl-slideout --> xpl-button
+  xpl-slideout --> xpl-icon
+  xpl-slideout --> xpl-divider
+  style xpl-slideout fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

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

@@ -0,0 +1,25 @@
+# xpl-tab
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property   | Attribute  | Description                                                | Type      | Default     |
+| ---------- | ---------- | ---------------------------------------------------------- | --------- | ----------- |
+| `selected` | `selected` | Whether the tab is selected                                | `boolean` | `false`     |
+| `target`   | `target`   | The target of the tab, required for the tab to be selected | `string`  | `undefined` |
+
+
+## Events
+
+| Event       | Description                                     | Type                  |
+| ----------- | ----------------------------------------------- | --------------------- |
+| `tabChange` | Event that emits the target of the selected tab | `CustomEvent<string>` |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

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

@@ -0,0 +1,18 @@
+# xpl-tab-panel
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property   | Attribute  | Description                                                | Type      | Default     |
+| ---------- | ---------- | ---------------------------------------------------------- | --------- | ----------- |
+| `selected` | `selected` | Whether the panel is selected                              | `boolean` | `false`     |
+| `target`   | `target`   | The target of the tab, required for the tab to be selected | `string`  | `undefined` |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

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

@@ -0,0 +1,46 @@
+# xpl-table
+
+Tables are used to organize and display information from a data set. 
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property          | Attribute     | Description                                                                                                                 | Type         | Default     |
+| ----------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------- | ------------ | ----------- |
+| `columns`         | --            | The header values for each column.                                                                                          | `string[]`   | `undefined` |
+| `data`            | --            | The data for the body of the table.                                                                                         | `string[][]` | `undefined` |
+| `footer`          | --            | The data for the footer of the table.                                                                                       | `string[][]` | `undefined` |
+| `freeze`          | `freeze`      | When true, the first column of the table is sticky and will cover the leftmost rows in a horizontally scrollable container. | `boolean`    | `undefined` |
+| `isSortable`      | `is-sortable` | Toggles to show the sort button on each table head                                                                          | `boolean`    | `false`     |
+| `multiselect`     | `multiselect` | Toggles a selectable checkbox for each row in the table                                                                     | `boolean`    | `undefined` |
+| `selectedValues`  | --            | The values for the input for each row when multiselect is activated.                                                        | `string[]`   | `[]`        |
+| `sortableColumns` | --            | Manually determined if the column is sortable                                                                               | `boolean[]`  | `[]`        |
+| `striped`         | `striped`     | Toggles an optional styling of the background of each even row of the table body.                                           | `boolean`    | `undefined` |
+
+
+## Events
+
+| Event         | Description                                                                                                                                                                                                               | Type                                                                       |
+| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- |
+| `sortChanged` | Emits an event whenever the sort changes. The 'sortChanged' event passes an object with colNum (number), colName (string), sortTypeArr(string[]). The default action can be overridden by calling event.preventDefault(). | `CustomEvent<{ colNum: number; colName: string; sortTypeArr: string[]; }>` |
+| `tableSelect` | Callback function that is called when the checkbox for a row of a `multiselect` table is checked                                                                                                                          | `CustomEvent<any>`                                                         |
+
+
+## Dependencies
+
+### Depends on
+
+- [xpl-icon](../xpl-icon)
+
+### Graph
+```mermaid
+graph TD;
+  xpl-table --> xpl-icon
+  style xpl-table fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

package/dist/docs/xpl-table-header/readme.md

@@ -0,0 +1,13 @@
+# xpl-table-header
+
+Component parts used to assemble the Dynamic Table.
+
+> **Note:** This component is currently in beta. Use with caution as it may have breaking changes in future releases.
+
+
+<!-- Auto Generated Below -->
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

package/dist/docs/xpl-table-header-cell/readme.md

@@ -0,0 +1,47 @@
+# xpl-table-header-cell
+
+> **Note:** This component is currently in beta. Use with caution as it may have breaking changes in future releases.
+
+The `icon` property accepts icon names as strings. See [xpl-icon available icons](../xpl-icon/ICONS.md) for the complete list.
+
+---
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property   | Attribute  | Description                                                                                              | Type                              | Default     |
+| ---------- | ---------- | -------------------------------------------------------------------------------------------------------- | --------------------------------- | ----------- |
+| `icon`     | `icon`     | Icon to display in the cell.  See [xpl-icon available icons](../xpl-icon/ICONS.md) for valid icon names. | `string`                          | `undefined` |
+| `label`    | `label`    |                                                                                                          | `string`                          | `''`        |
+| `sortable` | `sortable` |                                                                                                          | `boolean`                         | `false`     |
+| `type`     | `type`     |                                                                                                          | `"checkbox" \| "icon" \| "label"` | `'label'`   |
+| `width`    | `width`    |                                                                                                          | `number`                          | `undefined` |
+
+
+## Events
+
+| Event         | Description                              | Type                                     |
+| ------------- | ---------------------------------------- | ---------------------------------------- |
+| `sortChanged` | Emitted when the sort direction changes. | `CustomEvent<"asc" \| "desc" \| "none">` |
+
+
+## Dependencies
+
+### Depends on
+
+- [xpl-checkbox](../xpl-checkbox)
+- [xpl-icon](../xpl-icon)
+
+### Graph
+```mermaid
+graph TD;
+  xpl-table-header-cell --> xpl-checkbox
+  xpl-table-header-cell --> xpl-icon
+  style xpl-table-header-cell fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

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

@@ -0,0 +1,54 @@
+# xpl-tabs
+
+Tabs organize content across different screens, data sets, and other interactions.
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property    | Attribute    | Description                                              | Type      | Default     |
+| ----------- | ------------ | -------------------------------------------------------- | --------- | ----------- |
+| `fullWidth` | `full-width` | Whether to make the tabs full width                      | `boolean` | `false`     |
+| `value`     | `value`      | The selected tab target value, defaults to the first tab | `string`  | `undefined` |
+
+
+## Events
+
+| Event       | Description                                     | Type                  |
+| ----------- | ----------------------------------------------- | --------------------- |
+| `tabChange` | Event that emits the target of the selected tab | `CustomEvent<string>` |
+
+
+## Slots
+
+| Slot        | Description                                                                          |
+| ----------- | ------------------------------------------------------------------------------------ |
+| `"heading"` | The heading for each tab (required, target attribute is required on the xpl-tab)     |
+| `"panel"`   | The panel for each tab (required, target attribute is required on the xpl-tab-panel) |
+
+
+## Dependencies
+
+### Depends on
+
+- [xpl-select](../xpl-select)
+
+### Graph
+```mermaid
+graph TD;
+  xpl-tabs --> xpl-select
+  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-tabs fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

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

@@ -0,0 +1,30 @@
+# xpl-tag
+
+Tags represent a set of interactive keywords that help label, organize, and categorize objects. Tags can be added or removed from an object by the user. Unlike Badges, Tags are clickable, draggable, used in dropdowns, multi-select, search bars, etc..
+
+<!-- Auto Generated Below -->
+
+
+## Events
+
+| Event   | Description                                                           | Type               |
+| ------- | --------------------------------------------------------------------- | ------------------ |
+| `close` | Callback function that is called when tag text or `x` icon is clicked | `CustomEvent<any>` |
+
+
+## Dependencies
+
+### Used by
+
+ - [xpl-select](../xpl-select)
+
+### Graph
+```mermaid
+graph TD;
+  xpl-select --> xpl-tag
+  style xpl-tag fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

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

@@ -0,0 +1,42 @@
+# xpl-toast
+
+Toasts are brief, non-disruptive messages that provide quick, at-a-glance feedback. They can have 3 sentiments; neutral, positive and negative and contain actions such as a button or link, or a close button. Messaging can include a title and caption limited to 85 characters. Keep your toast messaging short and to the point and tone in line with the sentiment of the Toast. 
+
+The Toast component is configurable by Sentiment plus show/hide properties for Icon, Caption, Button and Dismissible. Use the nested component’s properties to customize further as needed. 
+
+When possible, Toasts should auto-dismiss after 8 seconds. When an action is present, it may not be desirable to time out the Toast depending on your specific context.  
+
+Match your messaging with the sentiment of the toast. Most messages will have a neutral sentiment. Reserve negative sentiments for when an explicit failure has occurred. Give users the information they need to correct the issue. 
+
+Toasts only support a single action and up to 85 characters. If multiple actions can be taken, or the message is longer than a few words, use a [Modal component](https://xplor-apollo.herokuapp.com/?path=/story/components-modal--modal) instead.
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property      | Attribute     | Description | Type                                  | Default     |
+| ------------- | ------------- | ----------- | ------------------------------------- | ----------- |
+| `caption`     | `caption`     |             | `string`                              | `undefined` |
+| `dismissable` | `dismissable` |             | `boolean`                             | `true`      |
+| `showIcon`    | `show-icon`   |             | `boolean`                             | `true`      |
+| `timeout`     | `timeout`     |             | `number`                              | `8000`      |
+| `variant`     | `variant`     |             | `"neutral" \| "success" \| "warning"` | `'neutral'` |
+
+
+## Dependencies
+
+### Depends on
+
+- [xpl-icon](../xpl-icon)
+
+### Graph
+```mermaid
+graph TD;
+  xpl-toast --> xpl-icon
+  style xpl-toast fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

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

@@ -0,0 +1,23 @@
+# xpl-toggle
+
+A Toggle is a type of form control that is used to switch between enabled and disabled states of an element.
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property      | Attribute     | Description                                                                    | Type                   | Default     |
+| ------------- | ------------- | ------------------------------------------------------------------------------ | ---------------------- | ----------- |
+| `checked`     | `checked`     | Whether the toggle is `on`                                                     | `boolean`              | `undefined` |
+| `description` | `description` | The toggle's description appears *above* the toggle.                           | `string`               | `undefined` |
+| `disabled`    | `disabled`    | Whether the toggle is disabled                                                 | `boolean`              | `undefined` |
+| `heading`     | `heading`     | The toggle's heading appears *above* the toggle.                               | `string`               | `undefined` |
+| `label`       | `label`       | The toggle's label appears *to the right of* the toggle.                       | `string`               | `undefined` |
+| `name`        | `name`        | The name attribute for the html input. (submittted in form as name/value pair) | `string`               | `undefined` |
+| `variant`     | `variant`     | The size of the toggle -- `default` or `small`                                 | `"default" \| "small"` | `'default'` |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

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

@@ -0,0 +1,18 @@
+# xpl-toolbar
+
+> **Note:** This component is currently in beta. Use with caution as it may have breaking changes in future releases.
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property            | Attribute             | Description                                             | Type     | Default |
+| ------------------- | --------------------- | ------------------------------------------------------- | -------- | ------- |
+| `selectedItemCount` | `selected-item-count` | The number of selected items to display in the toolbar. | `number` | `0`     |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*