@xplortech/apollo-core 2.4.3 → 2.6.0

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

@@ -0,0 +1,115 @@
+# xpl-side-nav-item
+
+Row for [`xpl-side-nav`](../xpl-side-nav): place items in `slot="section"` or `slot="nav-footer"`. Supports **leaf** (button), **expandable** (`has-children`), and **link** (slot-only) modes, plus `selected`, `disabled`, and `hidden`.
+
+## Modes
+
+- **Leaf (default)** — Button with optional `label`, `icon`, and `slot="icon"`. Click emits **`navClick`** (not used for expandable rows).
+- **Expandable (`has-children`)** — Put nested `xpl-side-nav-item` elements in the **default slot**. Parent row is **chevron + label only** (no icon column; the `icon` prop is ignored). Click toggles **`expanded`** and emits **`expandedChange`**. “Only one section open” / accordion behavior is **not** built in — your app coordinates `expanded` if needed.
+- **Link (`link`)** — **Default slot only**: pass a real `<a>` or router link with full content. Renders a single `<slot>` (no inner button). **Cannot** be combined with `has-children` (see **Rules**).
+
+## Rules
+
+| Topic | Behavior |
+| ----- | ---------- |
+| **`link` vs `has-children`** | Mutually exclusive. When **`link`** is true, **`hasChildren`** is always false; if both attributes appear in markup, `has-children` is cleared. |
+| **Icons** | `icon` / `slot="icon"` only for **non-link** leaf/footer rows. **Not** rendered for expandable parents. **Nested** items under a parent should use **label only** (icon column hidden in CSS). |
+| **Events** | **`navClick`** — leaf button rows. **`expandedChange`** — expandable rows only (detail = new `expanded` boolean). See **Events** table below. |
+
+## Usage
+
+### Leaf
+```html
+<xpl-side-nav-item label="Dashboard" icon="house-4" selected></xpl-side-nav-item>
+```
+
+### Expandable parent
+```html
+<xpl-side-nav-item has-children label="Settings" expanded>
+  <xpl-side-nav-item label="Profile"></xpl-side-nav-item>
+  <xpl-side-nav-item label="Billing"></xpl-side-nav-item>
+</xpl-side-nav-item>
+```
+
+### Link (slot-only)
+```html
+<xpl-side-nav-item link>
+  <a href="#reports">
+    <xpl-icon icon="chart-line" size="16"></xpl-icon>
+    Reports
+  </a>
+</xpl-side-nav-item>
+```
+
+### Disabled and hidden
+```html
+<xpl-side-nav-item label="Disabled" disabled></xpl-side-nav-item>
+<xpl-side-nav-item label="Hidden" hidden></xpl-side-nav-item>
+```
+
+## Slots
+
+| Slot | Description |
+| ---- | ----------- |
+| `icon` | **Button rows only** (`link` and `has-children` do not expose this slot in the DOM). Optional leading icon: default content from the `icon` prop, or override with slotted content. Omit on nested items under an expandable parent. |
+| *(default)* | **`has-children`:** nested `xpl-side-nav-item` elements. **`link`:** one anchor (or router component) with icon + text as needed. |
+
+## Link mode checklist
+
+- Do **not** use `label` or `icon` props — put text and icons inside your anchor.
+- Set **`aria-current="page"`** on the anchor when the route is active.
+- For **disabled** links: set `disabled` on the host and `aria-disabled="true"` + `tabindex="-1"` on the anchor (see **Accessibility**).
+
+## Accessibility
+
+- **Selected (non-link):** `aria-current="page"` on the `button` (leaf or expandable row).
+- **Selected (link):** set `aria-current="page"` on your slotted anchor.
+- **Expandable:** `aria-expanded` on the parent `button` matches `expanded`.
+- **Disabled:** use the `disabled` prop on non-link rows; for link mode, coordinate host `disabled` with the anchor as above.
+- **Hidden:** `hidden` hides the row; it does not disable interaction by itself — use `disabled` when appropriate.
+
+## Related
+
+- [xpl-side-nav](../xpl-side-nav) — Sidebar container (`slot="section"`, `slot="nav-footer"`).
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property      | Attribute      | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | Type      | Default     |
+| ------------- | -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ----------- |
+| `disabled`    | `disabled`     | Whether the component is disabled                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | `boolean` | `false`     |
+| `expanded`    | `expanded`     | Whether the item is currently expanded (only applies when hasChildren is true)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `boolean` | `false`     |
+| `hasChildren` | `has-children` | Whether the item has child items; when true, shows expand/collapse and a default slot for nested items. Mutually exclusive with <code>link</code>. If <code>link</code> is already true, setting <code>has-children</code> is reverted (<code>@Watch('hasChildren')</code>, <code>@Watch('link')</code>, <code>componentWillLoad</code>, and <code>componentWillRender</code>) so reflected attributes match CSS.                                                                                                                                                                         | `boolean` | `false`     |
+| `hidden`      | `hidden`       | Whether the component is hidden                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `boolean` | `false`     |
+| `icon`        | `icon`         | Optional icon name; default content for <code>slot="icon"</code> (leaf and footer rows only). Expandable parents (<code>has-children</code>) do not show an icon column — only the chevron and label. Omit for nested children under a <code>has-children</code> parent — the icon column is hidden for sub-items.                                                                                                                                                                                                                                                                        | `string`  | `undefined` |
+| `label`       | `label`        | The display label for the navigation item (button / expandable rows; omit in <code>link</code> mode).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `string`  | `undefined` |
+| `link`        | `link`         | When true, the row becomes a slot-only container for consumer-provided links. The consumer provides the full anchor element (or router link) via the default slot. In link mode, <code>label</code> and <code>icon</code> props should not be used. Link mode does not support <code>has-children</code>; use the default button mode for expandable items. When <code>link</code> is true, <code>hasChildren</code> is always false (enforced by <code>@Watch('link')</code>, <code>@Watch('hasChildren')</code>, <code>componentWillLoad</code>, and <code>componentWillRender</code>). | `boolean` | `false`     |
+| `selected`    | `selected`     | Whether the item is currently in a selected state                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | `boolean` | `false`     |
+
+
+## Events
+
+| Event            | Description                                                                                         | Type                   |
+| ---------------- | --------------------------------------------------------------------------------------------------- | ---------------------- |
+| `expandedChange` | Emitted when the expanded state changes (hasChildren items only). Detail is the new expanded value. | `CustomEvent<boolean>` |
+| `navClick`       | Emitted when a leaf item is clicked. Expandable parents use expandedChange instead.                 | `CustomEvent<void>`    |
+
+
+## Dependencies
+
+### Depends on
+
+- [xpl-icon](../../xpl-icon)
+
+### Graph
+```mermaid
+graph TD;
+  xpl-side-nav-item --> xpl-icon
+  style xpl-side-nav-item 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,47 @@
+# 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
+  xpl-button --> xpl-icon
+  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,55 @@
+# 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
+  xpl-dropdown-option --> xpl-icon
+  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,97 @@
+# 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.
+
+## Positioning
+
+The default position is arbitrarily set to `40px` from top and `40px` from right of the browser viewport on desktop and bottom-center on mobile. This position should be adjusted to ensure it's not covering your App's header. Apollo, by design, does not prescribe a position for toasts because this will be dependent on the app that it is being used in.
+
+Positioning of toasts should be global to your app. For example, if it is decided that your app will always position the toast in the top right corner, then this convention should be followed throughout. It should not be positioned top-right on one screen and bottom-center on another.
+
+*****Consult your designer for the best placement for your product.**
+
+### Overriding the default position
+
+The toast uses `position: fixed` and can be repositioned by overriding the `.xpl-toast` CSS class in your app's stylesheet. Set `top`, `right`, `bottom`, and `left` as needed and use `unset` or `initial` to clear any defaults you don't want.
+
+**Top-left example:**
+```css
+.xpl-toast {
+  top: 24px;
+  right: unset;
+  left: 24px;
+}
+```
+
+**Bottom-right example:**
+```css
+.xpl-toast {
+  top: unset;
+  right: 24px;
+  bottom: 24px;
+}
+```
+
+**Centered at the top:**
+```css
+.xpl-toast {
+  top: 24px;
+  right: unset;
+  left: 50%;
+  transform: translateX(-50%);
+}
+```
+
+The mobile breakpoint (≤ 768px) resets the toast to bottom-center. If your app needs a different mobile position, override the media query as well:
+
+```css
+@media screen and (max-width: 768px) {
+  .xpl-toast {
+    /* your mobile overrides */
+    bottom: 16px;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}
+```
+
+> **Tip:** Place these overrides in a global stylesheet so every toast in your app appears in the same location.
+
+<!-- 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/)*

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

@@ -0,0 +1,35 @@
+# xpl-tooltip
+
+Tooltips are intended to be short one to two sentence messages adding contextual information for the user. Keep messages short and to the point. Tooltips are static and do not contain actions, and only appear when the context is hovered. 
+
+Tooltip variants control one of 8 arrow positions indicating the direction the tooltip will appear in relation to it's trigger:
+"bottom-left" | "bottom-middle" | "bottom-right" | "left" | "right" | "top-left" | "top-middle" | "top-right"
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property    | Attribute    | Description                                     | Type                                                                                                                   | Default        |
+| ----------- | ------------ | ----------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | -------------- |
+| `hideArrow` | `hide-arrow` | Hide the arrow                                  | `boolean`                                                                                                              | `false`        |
+| `position`  | `position`   | Position of the tooltip relative to the element | `"bottom-left" \| "bottom-middle" \| "bottom-right" \| "left" \| "right" \| "top-left" \| "top-middle" \| "top-right"` | `'top-middle'` |
+| `text`      | `text`       | The tooltip text to display                     | `string`                                                                                                               | `undefined`    |
+
+
+## Dependencies
+
+### Used by
+
+ - [xpl-data-card](../xpl-data-card)
+
+### Graph
+```mermaid
+graph TD;
+  xpl-data-card --> xpl-tooltip
+  style xpl-tooltip fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*