@xplortech/apollo-core 2.5.0 → 2.6.0

package/dist/collection/components/xpl-side-nav/xpl-side-nav-item/xpl-side-nav-item.js

@@ -0,0 +1,259 @@
+import { Host, h } from "@stencil/core";
+export class SideNavItem {
+    constructor() {
+        this.disabled = false;
+        this.expanded = false;
+        this.hasChildren = false;
+        this.hidden = false;
+        this.link = false;
+        this.selected = false;
+        this.handleClick = () => {
+            if (this.disabled)
+                return;
+            if (this.hasChildren) {
+                this.expanded = !this.expanded;
+                this.expandedChange.emit(this.expanded);
+            }
+            else {
+                this.navClick.emit();
+            }
+        };
+    }
+    syncLinkHasChildrenExclusivity() {
+        this.enforceLinkExcludesHasChildren();
+    }
+    componentWillLoad() {
+        this.syncLinkHasChildrenExclusivity();
+    }
+    componentWillRender() {
+        this.syncLinkHasChildrenExclusivity();
+    }
+    enforceLinkExcludesHasChildren() {
+        if (!this.link)
+            return;
+        if (this.hasChildren) {
+            this.hasChildren = false;
+        }
+        if (this.el.hasAttribute('has-children')) {
+            this.el.removeAttribute('has-children');
+        }
+    }
+    render() {
+        var _a;
+        const linkClass = {
+            'xpl-side-nav-item__link': true,
+            expanded: this.expanded,
+            selected: this.selected,
+        };
+        return (h(Host, { key: '10e32dc7b6e7e942ab11153a7311ee2401370a08', class: {
+                'xpl-side-nav-item': true,
+                'xpl-side-nav-item--link-disabled': this.link && this.disabled,
+            } }, this.link ? (h("slot", null)) : (h("button", { type: "button", class: linkClass, "aria-current": this.selected ? 'page' : undefined, "aria-expanded": this.hasChildren ? (this.expanded ? 'true' : 'false') : undefined, onClick: this.handleClick, disabled: this.disabled }, this.hasChildren && (h("span", { class: `xpl-side-nav-item__arrow ${this.expanded ? 'expanded' : ''}` }, h("xpl-icon", { icon: "chevron-down", size: 16 }))), !this.hasChildren && (h("span", { class: "xpl-side-nav-item__icon" }, h("slot", { name: "icon" }, this.icon ? (h("xpl-icon", { icon: this.icon, size: 16 })) : null))), h("span", { class: "xpl-side-nav-item__label" }, (_a = this.label) !== null && _a !== void 0 ? _a : ''))), this.hasChildren && !this.link && (h("div", { key: '32d07c601edd88297854bf88749411276e8cb51b', class: `xpl-side-nav-item__children ${this.expanded ? 'expanded' : ''}`, inert: !this.expanded ? true : undefined }, h("div", { key: 'bbaac77c9c89e7b494cf7693185f0c358f6a7136', class: "xpl-side-nav-item__children-inner" }, h("slot", { key: '811067dca2ee2a73d896d1b45b899b9a8b27e7d6' }))))));
+    }
+    static get is() { return "xpl-side-nav-item"; }
+    static get properties() {
+        return {
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the component is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "expanded": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the item is currently expanded (only applies when hasChildren is true)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "expanded",
+                "defaultValue": "false"
+            },
+            "hasChildren": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the item has child items; when true, shows expand/collapse and a default slot for nested items.\nMutually exclusive with <code>link</code>. If <code>link</code> is already true, setting\n<code>has-children</code> is reverted (<code>@Watch('hasChildren')</code>, <code>@Watch('link')</code>,\n<code>componentWillLoad</code>, and <code>componentWillRender</code>) so reflected attributes match CSS."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "has-children",
+                "defaultValue": "false"
+            },
+            "hidden": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the component is hidden"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "hidden",
+                "defaultValue": "false"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional icon name; default content for <code>slot=\"icon\"</code> (leaf and footer rows only).\nExpandable parents (<code>has-children</code>) do not show an icon column \u2014 only the chevron and label.\nOmit for nested children under a <code>has-children</code> parent \u2014 the icon column is hidden for sub-items."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The display label for the navigation item (button / expandable rows; omit in <code>link</code> mode)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "link": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true, the row becomes a slot-only container for consumer-provided links.\nThe consumer provides the full anchor element (or router link) via the default slot.\nIn link mode, <code>label</code> and <code>icon</code> props should not be used.\nLink mode does not support <code>has-children</code>; use the default button mode for expandable items.\nWhen <code>link</code> is true, <code>hasChildren</code> is always false (enforced by\n<code>@Watch('link')</code>, <code>@Watch('hasChildren')</code>, <code>componentWillLoad</code>, and\n<code>componentWillRender</code>)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "link",
+                "defaultValue": "false"
+            },
+            "selected": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the item is currently in a selected state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "selected",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "expandedChange",
+                "name": "expandedChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the expanded state changes (hasChildren items only). Detail is the new expanded value."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
+                "method": "navClick",
+                "name": "navClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a leaf item is clicked. Expandable parents use expandedChange instead."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "hasChildren",
+                "methodName": "syncLinkHasChildrenExclusivity"
+            }, {
+                "propName": "link",
+                "methodName": "syncLinkHasChildrenExclusivity"
+            }];
+    }
+}

package/dist/collection/components/xpl-side-nav/xpl-side-nav.js

@@ -0,0 +1,32 @@
+import { Host, h } from "@stencil/core";
+export class SideNav {
+    render() {
+        return (h(Host, { key: '4c498e4a5ab9c93d2ba984fd973af77c871cb916', class: {
+                'xpl-side-nav': true,
+            } }, h("div", { key: 'ef7455c11a5dd27c7a8317f4b441fc3d29eea341', class: "xpl-side-nav__wrapper" }, h("nav", { key: '11752dfaacd360fd1c6e20f253967236f1032d68', class: "xpl-side-nav__content", "aria-label": this.label }, h("div", { key: '1a94c00b7cc8297707a11aca19a816769e98dbfc', class: "xpl-side-nav__section" }, h("slot", { key: 'a3aaa6c108806c68bcb8af692ad6fd0edcae7870', name: "section" })), h("div", { key: 'b6454f9ba4f795666b33c7eea70f3514cdf168b3', class: "xpl-side-nav__footer" }, h("slot", { key: 'f00b452ff6c732d95fa58962800d2d1f606c4c17', name: "nav-footer" }))))));
+    }
+    static get is() { return "xpl-side-nav"; }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for the navigation landmark.\nMaps to `aria-label` on the `<nav>` element.\nRecommended when multiple navigation landmarks exist on a page\n(e.g., side nav + top nav + breadcrumbs) to help screen readers distinguish them."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            }
+        };
+    }
+}

package/dist/collection/components/xpl-skeleton/xpl-skeleton.js

@@ -1,11 +1,11 @@
 import { h, Host } from "@stencil/core";
-export class XplSkeleton {
+export class Skeleton {
     constructor() {
         this.shape = 'rectangle';
         this.size = 'custom';
     }
     render() {
-        return (h(Host, { key: '018d8ef69972d40fa84fd700ca778862f762b699', class: {
+        return (h(Host, { key: '86862cc926d5e915e303d274f0e837f364be6c08', class: {
                 'xpl-skeleton': true,
                 [`xpl-skeleton--shape-${this.shape}`]: true,
                 [`xpl-skeleton--size-${this.size}`]: true,

package/dist/collection/components/xpl-slideout/xpl-slideout.js

@@ -1,5 +1,5 @@
 import { Host, h, } from "@stencil/core";
-export class XplSlideout {
+export class Slideout {
     constructor() {
         this.isOpen = false;
         this.backdrop = false;
@@ -26,7 +26,7 @@ export class XplSlideout {
         this.handleScroll();
     }
     render() {
-        return (h(Host, { key: 'd38f708c91ffd96369e5277b9e4d5c74e52a41d4', class: "xpl-slideout" }, this.backdrop && this.isOpen && (h("xpl-backdrop", { key: '8cfea9e2d270e84783f99db0b12b2749a829ff8a', onClick: this.handleClose })), h("aside", { key: '8b3a24dccbb44c281bad35ab8d2af895bde56d10', class: `slideout slideout--${!this.isOpen && 'closed'}` }, h("header", { key: '921acd55e9aedcd5c04d2d6d4f2d26515ec744b8', class: "header" }, h("div", { key: 'dd434e7a1b5d28aa0833979f8d515df28ad00cc9', class: "title" }, h("slot", { key: '9743e88555558ec66e46528b04d6f6391d1bd8df', name: "title" }), h("xpl-button", { key: '7b7b267fa892363d0d25af419bdaa55dd5a362ef', class: "close-button", iconOnly: true, size: "sm", variant: "subtle", onClick: this.handleClose }, h("xpl-icon", { key: 'd27bd1de9864fbc6b72f1b71658ece1f5dfeddc9', icon: "x" }))), h("div", { key: '3183410cecb0973d8b7dca3997e1f6c254d28892', class: "subtitle" }, h("slot", { key: '6dd1fbcdd15fde802a316053b19566c618f41dd0', name: "subtitle" })), h("div", { key: 'b3c4a050275de296b43dc7d9e87bcc082c7f14ec', class: "search" }, h("slot", { key: 'c6f0ef04a753cb71da97021caa791ded9e2e0533', name: "search" }))), h("xpl-divider", { key: '68301c3540651d6d0dc2e9577d8fc6d2e5e9f536', tier: 0, class: "divider top" }), h("article", { key: 'eff6e4e81dfe48a9bf2f59d5f5ca09c5f56e6491', class: "content", tabIndex: 0 }, h("slot", { key: 'f3f25c5b51ae017cb6f84ea0f1c14329ba429adb', name: "content" })), this.showFooter && (h("footer", { key: '6e94107fefc5e2e24edb21f61b0e4af32c954445' }, h("xpl-divider", { key: '89c550dbb352c6b22534edf7ff3a0e8d0513a206', tier: 0, class: "divider bottom" }), h("div", { key: '32fe00b37f65ef0b1ba42bf8e7d8f59dfec7aa68', class: "footer" }, h("slot", { key: 'f42ee4c847be0ab553d039bc0ce50e29e70984fa', name: "tertiary" }), h("slot", { key: 'dd6b8757bcd85dd79a084d3ec0bbbfd6629297bb', name: "secondary" }), h("slot", { key: 'e6d4fea0d1ebfa7bd71fce313dee34b25f164b0c', name: "primary" })))))));
+        return (h(Host, { key: 'b2628014184ba329999545fe940adcb175b89dfd', class: "xpl-slideout" }, this.backdrop && this.isOpen && (h("xpl-backdrop", { key: '3f243b5af61aee13d375874ddb6a974608405e05', onClick: this.handleClose })), h("aside", { key: '781804a784efad6f6e9d9d0ee09dd46b99800707', class: `slideout slideout--${!this.isOpen && 'closed'}` }, h("header", { key: '35bf26acb7f45fc60d9447093d00c263c5c6a074', class: "header" }, h("div", { key: '939262fd0caf93059c022bc827cf1ebf31cf0505', class: "title" }, h("slot", { key: 'd0434f317394c1e6aca52de73cb1645605b70a2c', name: "title" }), h("xpl-button", { key: '091d2454db101c318a6c5b42a5650d698e318a46', class: "close-button", "icon-only": true, size: "sm", variant: "tertiary", onClick: this.handleClose }, h("xpl-icon", { key: '161a7bd05ce6864cd3b72a9a523c0f6e39d95cfb', icon: "x" }))), h("div", { key: '554153d17ba38df8b86534f4b59cb74c31553c0e', class: "subtitle" }, h("slot", { key: '649d87c4dea7e87c8c860d81b337c5c284d4aab1', name: "subtitle" })), h("div", { key: '2fe24ec6b15e48da8b61f0601342e52f83dd52d7', class: "search" }, h("slot", { key: '2ca9723ce317d1981485dcc923fff44c885eb814', name: "search" }))), h("xpl-divider", { key: 'c11b01177de43cafc6cf6f59c8807027dd202cfb', tier: 0, class: "divider top" }), h("article", { key: '12030211ebdfcc232e02e383d6ce9d64349882bc', class: "content", tabIndex: 0 }, h("slot", { key: 'b6af6c47722c8a1820ff94c052788b95736622b7', name: "content" })), this.showFooter && (h("footer", { key: '151c779df75a16947353701df695967686e9e07b' }, h("xpl-divider", { key: '773e0ce1051ac5a2f67864c5b4a6bd8120b3c270', tier: 0, class: "divider bottom" }), h("div", { key: 'e2ed12c38474a0102fdc24063bae95e4e36c43f7', class: "footer" }, h("slot", { key: '06f346214acfd3351adb9fca113466b1f95e5b9c', name: "tertiary" }), h("slot", { key: '1afb8a2250cd62a752a9bd60decade017a7ae58e', name: "secondary" }), h("slot", { key: '18f8b40b550b38eb44c765dd3cdbca44000032b8', name: "primary" })))))));
     }
     static get is() { return "xpl-slideout"; }
     static get properties() {

package/dist/collection/components/xpl-tab/xpl-tab.js

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-export class XplTab {
+export class Tab {
     constructor() {
         this.selected = false;
         this.handleTabClick = () => {
@@ -7,10 +7,10 @@ export class XplTab {
         };
     }
     render() {
-        return (h(Host, { key: '3f1eaa197c02b1bb45da97e59a58aeea9f86bc6f', class: {
+        return (h(Host, { key: '1450ace89b692fe55c0d72baf719fc523b3f5cdd', class: {
                 'xpl-tab': true,
                 'xpl-tab--selected': this.selected,
-            } }, h("button", { key: '12066216ecbc4fa91c7645b45e4affce20342e4b', onClick: this.handleTabClick, class: "xpl-tab__button", role: "tab", "aria-controls": this.target }, h("slot", { key: 'bbe6f9c862510aa83d4816fc7366e82ac10cf266' }))));
+            } }, h("button", { key: '6bd68b6eb3cf05bbd21b17cbd6fba58ba2ca3a7c', onClick: this.handleTabClick, class: "xpl-tab__button", role: "tab", "aria-controls": this.target }, h("slot", { key: '5d54ca80925a7dd6ace6486e4dd6978d268ad584' }))));
     }
     static get is() { return "xpl-tab"; }
     static get properties() {

package/dist/collection/components/xpl-tab-panel/xpl-tab-panel.js

@@ -1,13 +1,13 @@
 import { Host, h } from "@stencil/core";
-export class XplTabPanel {
+export class TabPanel {
     constructor() {
         this.selected = false;
     }
     render() {
-        return (h(Host, { key: 'f22da3feed8a64baae080a1593ea35c68d41f857', class: {
+        return (h(Host, { key: '7266510f84437902c1ecfdfe19abd6f1a9ac09e2', class: {
                 'xpl-tab-panel': true,
                 'xpl-tab-panel--selected': this.selected,
-            }, role: "tabpanel", "aria-labelledby": this.target }, h("slot", { key: '88311f1af38490ec1b3ba8aee8f1bb39d58cfd11' })));
+            }, role: "tabpanel", "aria-labelledby": this.target }, h("slot", { key: '7aa5c5633d7f06f521699f30539dcb505703db64' })));
     }
     static get is() { return "xpl-tab-panel"; }
     static get properties() {

package/dist/collection/components/xpl-table/xpl-table.js

@@ -9,7 +9,7 @@ const getIconType = (sortType) => {
             return 'dash';
     }
 };
-export class XplTable {
+export class Table {
     constructor() {
         this.selectedValues = [];
         this.isSortable = false;
@@ -132,14 +132,14 @@ export class XplTable {
             (!this.sortTypeArray || this.sortTypeArray.length !== this.columns.length)) {
             this.sortTypeArray = this.columns.map(() => null);
         }
-        return (h(Host, { key: '3ac2c96a4d691a8e60a2f0f5732787a4dd43e71e' }, h("div", { key: '242225267bf912ae46cf38dd1750dcd66fa627f7', class: "xpl-table-container", onScroll: this.onScroll, ref: (el) => {
+        return (h(Host, { key: 'eb52da2b523707a53c0bb414dda75197907e71af' }, h("div", { key: '0f5bf430701ad905c4d918ee9039db52c19eb01c', class: "xpl-table-container", onScroll: this.onScroll, ref: (el) => {
                 this.container = el;
-            } }, h("table", { key: '76f22b451b7d09f2843d1afc063f8e287afb419f', class: {
+            } }, h("table", { key: 'bdbb2c47a7bf119b46417118f334ba861960313d', class: {
                 'xpl-table': true,
                 'xpl-table--striped': this.striped,
                 'xpl-table--freeze': this.freeze,
                 'xpl-table--has-scrolled': this.hasScrolled,
-            } }, this.columns && (h("thead", { key: 'be12e8292faf5be828c281e3c7d5396652c7e4b8' }, this.columns.map((column, i) => {
+            } }, this.columns && (h("thead", { key: 'a868be75efee1ec20d4845e8219a49ab1fae8aca' }, this.columns.map((column, i) => {
             var _a;
             const iconType = getIconType((_a = this.sortTypeArray) === null || _a === void 0 ? void 0 : _a[i]);
             const isColumnSortable = !!(this.isSortable && this.sortableColumns[i]);
@@ -148,11 +148,11 @@ export class XplTable {
                     e.stopPropagation();
                     this.selectAll(e);
                 }, type: "checkbox", value: `select-all-${this.selectAllValue}` })), column, isColumnSortable && !!this.sortTypeArray[i] && (h("xpl-icon", { icon: iconType, size: 16 })))));
-        }))), h("tbody", { key: '94c5ad3a68f1cffa73a55bb106e81c8899ddc2c4' }, this.rowData.map((row, rowNum) => (h("tr", { class: this.selected && this.selected[rowNum]
+        }))), h("tbody", { key: '8324eda16235ba66f2aa3bebc073a10a91a32518' }, this.rowData.map((row, rowNum) => (h("tr", { class: this.selected && this.selected[rowNum]
                 ? 'xpl-table-row-selected'
                 : '' }, row.map((cell, i) => (h("td", null, this.multiselect && i === 0 ? (h("label", { htmlFor: `__xpl-table-row-${rowNum}` }, h("input", { id: `__xpl-table-row-${rowNum}`, checked: !!this.selected[rowNum], type: "checkbox", onChange: (e) => this.selectOne(e, rowNum), value: this.selectedValues.length > 0
                 ? this.selectedValues[rowNum]
-                : `xpl-table-checkbox-${rowNum}` }), h("div", { innerHTML: cell }))) : (h("div", { innerHTML: cell }))))))))), ((_a = this.rowFooterData) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("tfoot", { key: '2bcfdfed0e5709f60f4beec7f8f58038899b8b30' }, this.rowFooterData.map((row) => (h("tr", null, row.map((cell) => (h("td", null, h("div", { innerHTML: cell })))))))))))));
+                : `xpl-table-checkbox-${rowNum}` }), h("div", { innerHTML: cell }))) : (h("div", { innerHTML: cell }))))))))), ((_a = this.rowFooterData) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("tfoot", { key: 'd3c55c0585359a28a51a8b0196c4e9841bc86919' }, this.rowFooterData.map((row) => (h("tr", null, row.map((cell) => (h("td", null, h("div", { innerHTML: cell })))))))))))));
     }
     static get is() { return "xpl-table"; }
     static get properties() {

package/dist/collection/components/xpl-table-header/xpl-table-header.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
-export class XplTableHeader {
+export class TableHeader {
     render() {
-        return (h(Host, { key: 'ab15bfcac25fa381989ed3cdaf2b3c5f00db6bdb', role: "row", class: "xpl-table-header" }, h("slot", { key: 'e0a8ef7c92c44ea84abc182d93040a4c14cd7072' })));
+        return (h(Host, { key: '1724195feab553e1f5f468352be234a5f867e75a', role: "row", class: "xpl-table-header" }, h("slot", { key: '14d458367da08aed53b57a4ccda1d26740922e05' })));
     }
     static get is() { return "xpl-table-header"; }
 }

package/dist/collection/components/xpl-table-header-cell/xpl-table-header-cell.js

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-export class XplTableHeaderCell {
+export class TableHeaderCell {
     constructor() {
         this.sortable = false;
         this.label = '';

package/dist/collection/components/xpl-tabs/xpl-tabs.js

@@ -1,5 +1,5 @@
 import { Host, h, } from "@stencil/core";
-export class XplTabs {
+export class Tabs {
     constructor() {
         this.fullWidth = false;
         this.selectedValue = this.getDefaultValue();
@@ -94,10 +94,10 @@ export class XplTabs {
         this.collectTabs();
     }
     render() {
-        return (h(Host, { key: 'c6858318e3adea4fb9a5587d16aff2778a69af0d', class: {
+        return (h(Host, { key: '0f74359ee1e50de711500ed4d91a7f305a0c8b43', class: {
                 'xpl-tabs': true,
                 'xpl-tabs--full-width': this.fullWidth,
-            } }, h("xpl-select", { key: 'f6e67e41dc20da4bd6c3d9d4b60045e0e55c7343', classNames: "xpl-tabs__mobile-select", choices: this.renderChoices(), selectedValues: this.selectedValue, onDropdownStateChange: (event) => {
+            } }, h("xpl-select", { key: '9315829ad692ec8b80fe00f588974ed8f1b5dbc9', classNames: "xpl-tabs__mobile-select", choices: this.renderChoices(), selectedValues: this.selectedValue, onDropdownStateChange: (event) => {
                 if (event.detail) {
                     this.isMobileSelectChange = true;
                 }
@@ -108,15 +108,15 @@ export class XplTabs {
                     this.tabChange.emit(selectedValue);
                     this.isMobileSelectChange = false;
                 }
-            } }), h("nav", { key: '297eb4c0695adf1bea03de7e6874a0b61e108319', class: "xpl-tabs__headings", role: "tablist", ref: (el) => {
+            } }), h("nav", { key: '7abdf0d065f25c78b393ec9808fe7f44c84bfb27', class: "xpl-tabs__headings", role: "tablist", ref: (el) => {
                 this.headingsContainerRef = el;
             }, onTabChange: (event) => {
                 this.isMobileSelectChange = false;
                 this.handleTabChange(event.detail);
-            } }, h("div", { key: 'cd60b8acf47bb319bc92852d5f62ba456acee6f0', class: "xpl-tabs__active-bar", style: {
+            } }, h("div", { key: 'de5157e6ce7914060f25e9b21bd8051a1437f92a', class: "xpl-tabs__active-bar", style: {
                 transform: `translateX(${this.activeBarPosition.left}px)`,
                 width: `${this.activeBarPosition.width}px`,
-            } }), h("slot", { key: 'a4b73230bfc7178381780a5136a5c1d820be7d65', name: "heading" })), h("div", { key: 'e5d4cf94e1c75dabe73d8a5cc2d00cc97466f1b2', class: "xpl-tabs__panels" }, h("slot", { key: 'e3d2fbfed0ebc74f2fc41f74574e202e834e2129', name: "panel" }))));
+            } }), h("slot", { key: 'fc61c457e2a4eb10609b97e911b9ddbb2a64757f', name: "heading" })), h("div", { key: 'd6187a0de12b34f61ad10a602085d4525c2850ca', class: "xpl-tabs__panels" }, h("slot", { key: 'c5cf20e4677ee9f998c115d472cfc1cd5e5fa1fd', name: "panel" }))));
     }
     static get is() { return "xpl-tabs"; }
     static get properties() {

package/dist/collection/components/xpl-tag/xpl-tag.js

@@ -1,9 +1,9 @@
 import { Host, h } from "@stencil/core";
-export class XplTag {
+export class Tag {
     render() {
-        return (h(Host, { key: '4a5d37bbd7458d289bf7ea272bd3f944e5f1f1a8', class: "xpl-tag-container" }, h("button", { key: '65701bf44741a791ab8d60db2de0f3308c83df33', class: "xpl-tag", onClick: () => {
+        return (h(Host, { key: '6a2aaaef81c317bb30ebfc20266581205db73ce2', class: "xpl-tag-container" }, h("button", { key: '2aaae9dd6bbdb13db531cf249baa96bfa15aff55', class: "xpl-tag", onClick: () => {
                 this.close.emit();
-            } }, h("slot", { key: 'bd3a1e0af2dbfbc70e18082a1cd0c02710f6ef26' })), h("button", { key: '13224cc6cc44e1c4ed9515019906ba3217edffd7', class: "xpl-tag__close", onClick: () => {
+            } }, h("slot", { key: 'cd56059cee54af39ce61e7560e00e013646c648f' })), h("button", { key: 'd529f61e40d097db2832e550e0f0b05c8ccc9179', class: "xpl-tag__close", onClick: () => {
                 this.close.emit();
             } }, "\u00D7")));
     }

package/dist/collection/components/xpl-toast/xpl-toast.js

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-export class XplToast {
+export class Toast {
     constructor() {
         this.variant = 'neutral';
         this.showIcon = true;
@@ -35,9 +35,9 @@ export class XplToast {
     }
     render() {
         var _a;
-        return (h(Host, { key: '6a4c1dfe86f62c39db5573a0bb1eef2c14616085', class: `xpl-toast xpl-toast--${this.variant}`, onAnimationEnd: this.handleAnimationEnd }, h("div", { key: '282a4c5fc37e538d3359a0c38e7cd30e2a29e311', class: "xpl-toast__left" }, this.showIcon && (h("div", { key: 'dfb6bb1923f5c9e1b1dae80630cc7977529e834f', class: `xpl-toast__icon xpl-toast__icon--${this.variant}` }, this.getIcon())), h("div", { key: '9a1755b484e316be08b89044ae3c55e7a30c3795', class: "xpl-toast__notification" }, h("p", { key: 'afa9572dcb109c58c6c4045e14b604010da95230', class: "xpl-toast__title" }, h("slot", { key: '0b80b8719e79a1e01bcf8ec125db8d9762f1a1d7', name: "title" })), this.caption !== '' && (h("p", { key: '7debe4dd50870bc6478a86e7742450f667dfee3a', class: "xpl-toast__caption" }, (_a = this.caption) === null || _a === void 0 ? void 0 : _a.substring(0, 85))))), h("div", { key: '194104f419162bd4157fb5e8885983ca40467d9c', class: "xpl-toast__action", ref: (el) => {
+        return (h(Host, { key: 'b8a25651f1dd57f9f574cd6401877295a6ca7101', class: `xpl-toast xpl-toast--${this.variant}`, onAnimationEnd: this.handleAnimationEnd }, h("div", { key: '20adfa314269787a9a03e793a1b74b9c5fb47585', class: "xpl-toast__left" }, this.showIcon && (h("div", { key: 'e3346cee07a34c61ed825966c59c9c8ac30f6302', class: `xpl-toast__icon xpl-toast__icon--${this.variant}` }, this.getIcon())), h("div", { key: 'e85cc1925897c34079e73a9d094c681c835548f4', class: "xpl-toast__notification" }, h("p", { key: '467fc15e4d26f240d735ddc957218bb7ab508dab', class: "xpl-toast__title" }, h("slot", { key: '3b339cd7b382043919139e83679e7033d63c3196', name: "title" })), this.caption !== '' && (h("p", { key: '675f42d92a7bd0527416e5eb77a56a7319d8f9a5', class: "xpl-toast__caption" }, (_a = this.caption) === null || _a === void 0 ? void 0 : _a.substring(0, 85))))), h("div", { key: '1904c868cba4f3178b0470b7381c23925a732a16', class: "xpl-toast__action", ref: (el) => {
                 this.actionSlot = el;
-            } }, h("slot", { key: 'c63cc79ec725417c4f317dd72511e72b24f8280e', name: "action" })), this.dismissable && (h("div", { key: '3328ad43d7cd4026d5b4488dc2d920031be0ca34', class: "xpl-toast__close" }, h("button", { key: 'ce3b27ae3c1570806916b3d668678513df5065ed', tabIndex: 0, onClick: this.dismiss }, h("xpl-icon", { key: 'be1a177568f933417b62ce2a2705441d00b3118f', icon: "x" }))))));
+            } }, h("slot", { key: '33c8ef7761d07e4d38b2a2a73c058f6769bc7a44', name: "action" })), this.dismissable && (h("div", { key: '3d67f14c2704a6b054be63ad35a9bd3d5355b4ca', class: "xpl-toast__close" }, h("button", { key: '345b314745b40b2c802b0221ea64d90bd5c36b38', tabIndex: 0, onClick: this.dismiss }, h("xpl-icon", { key: '39634fb5cc157a05b05d2245d66fc23d96a1c790', icon: "x" }))))));
     }
     static get is() { return "xpl-toast"; }
     static get properties() {

package/dist/collection/components/xpl-toggle/xpl-toggle.js

@@ -1,6 +1,6 @@
 import { Host, h } from "@stencil/core";
 import { v4 as uuid } from "uuid";
-export class XplToggle {
+export class Toggle {
     constructor() {
         this.variant = 'default';
         this.id = uuid();
@@ -12,13 +12,13 @@ export class XplToggle {
         let className = 'xpl-toggle';
         if (this.variant === 'small')
             className += ' xpl-toggle--small';
-        return (h(Host, { key: 'e5b8f2802e828221c2966fa85bafe7fb6bcf40bc', class: containerClassName }, (this.heading || this.description) && (h("label", { key: '17aff6b0b12c4815d2848af71a84a808c5b2a356', class: {
+        return (h(Host, { key: 'fe018e63a2c645565150c2b5494e057b24421cf3', class: containerClassName }, (this.heading || this.description) && (h("label", { key: '461ba525112e90914f3d61b221f938ec94861b58', class: {
                 'xpl-label': true,
                 'xpl-label--disabled': this.disabled,
-            }, htmlFor: this.id }, this.heading, this.description && (h("small", { key: 'c5bf01336e7f02b41f050971b596f718cdc8a87d', class: {
+            }, htmlFor: this.id }, this.heading, this.description && (h("small", { key: 'd764ac2dc9341192079f3791ce3e784c0d810c41', class: {
                 'xpl-description': true,
                 'xpl-description--disabled': this.disabled,
-            } }, this.description)))), h("input", { key: 'e9426bde8c042f3727fbcac738bd4903c063b2a4', class: className, type: "checkbox", checked: this.checked, disabled: this.disabled, id: this.id, name: this.name }), this.label && h("label", { key: '7d1bdfdf3ccc08276d86ffa3beb84a7946f576bb', htmlFor: this.id }, this.label)));
+            } }, this.description)))), h("input", { key: '9fd76e6a84d08db81941db0aaa742c4e0205bffa', class: className, type: "checkbox", checked: this.checked, disabled: this.disabled, id: this.id, name: this.name }), this.label && h("label", { key: 'fc58e8c3dba8a45a7c2aedda7daff3788f4dc0a0', htmlFor: this.id }, this.label)));
     }
     static get is() { return "xpl-toggle"; }
     static get properties() {

package/dist/collection/components/xpl-toolbar/xpl-toolbar.js

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-export class XplToolbar {
+export class Toolbar {
     constructor() {
         this.selectedItemCount = 0;
     }
@@ -12,11 +12,11 @@ export class XplToolbar {
         this.selectedItemCount = event.detail.length;
     }
     render() {
-        return (h(Host, { key: '097500ed053ff1f15d30fc62e2efa556f8f95ef2', class: {
+        return (h(Host, { key: '48056451ad54987de8d046a3892cc1011ed41bbb', class: {
                 'xpl-toolbar': true,
                 dark: true,
                 hidden: this.selectedItemCount === 0,
-            } }, h("div", { key: 'c2e73f623f8afe7ca8e9e367b173067992b661fa', class: "toolbar" }, h("p", { key: '63c1b1f5edee4abc4fea15bdb6d483a682854403', class: "selected-item-count" }, this.selectedItemCount, " Selected"), h("div", { key: 'bc387680fee35312128aac1e2d2a9e83e78b86af', class: "actions" }, h("slot", { key: 'a8e3e41f75565cbf9b8fc86665ecabdcf2f674f3', name: "actions-left" }), h("slot", { key: 'b3e82f6aabb8279f39248b551570d8937cf35aa6', name: "actions-right" })))));
+            } }, h("div", { key: '3c9680e4cf006dee69372d271a0720b6802767bc', class: "toolbar" }, h("p", { key: 'afcfba4a2d5c73d6bf602b94340280dcc28d6493', class: "selected-item-count" }, this.selectedItemCount, " Selected"), h("div", { key: 'fdadc34738fcf397a38772ab817c3a5bc1e5015f', class: "actions" }, h("slot", { key: 'b6571d83f8ac800143e4f9cd62559aac83c7e424', name: "actions-left" }), h("slot", { key: '30aa34da340647dbcb79f8862c5ca9647ebedb12', name: "actions-right" })))));
     }
     static get is() { return "xpl-toolbar"; }
     static get properties() {

package/dist/collection/components/xpl-tooltip/xpl-tooltip.js

@@ -1,12 +1,12 @@
 import { Host, h } from "@stencil/core";
 import { TooltipArrow } from "./tooltip-arrow";
-export class XplTooltip {
+export class Tooltip {
     constructor() {
         this.position = 'top-middle';
         this.hideArrow = false;
     }
     render() {
-        return (h(Host, { key: '2a442f9c9c54e8e6f8032b5d6384c84a1fbda0ad' }, h("div", { key: 'f30932db02af0f1273421b14c5b25840adbc3f58', class: "xpl-tooltip-container" }, h("slot", { key: '729aee67e66fb3d281b84a86aeba2d12a8a08340' }), h("div", { key: '9c0f6a237f2a1a11459a311095a2bdf9be4b176d', class: `xpl-tooltip xpl-tooltip--${this.position}` }, this.text), !this.hideArrow && (h("div", { key: '3bb6b085ddde321cf3063feba8ff23e785723afd', class: "xpl-tooltip-arrow" }, h(TooltipArrow, { key: 'f687c2776a7b9097aec183c5128e9e238e57d26e' }))))));
+        return (h(Host, { key: '849e02776ea70de89a5bd3c133df6205ff3265b3' }, h("div", { key: '98947c9ece90e6ebcbf90c23cd2e1c0902ae59d5', class: "xpl-tooltip-container" }, h("slot", { key: 'a24df50f2081fcc4ef70c685933fab1420eb850a' }), h("div", { key: 'be1a1832cdf428f2d368258b3a784e7b27589a97', class: `xpl-tooltip xpl-tooltip--${this.position}` }, this.text), !this.hideArrow && (h("div", { key: '43241958db2b8fec0993040f7321bca7d5a163e6', class: "xpl-tooltip-arrow" }, h(TooltipArrow, { key: '34359c7bec6b7ee0616eac8961e9941b60c7d321' }))))));
     }
     static get is() { return "xpl-tooltip"; }
     static get properties() {

package/dist/collection/components/xpl-utility-bar/xpl-utility-bar.js

@@ -1,5 +1,5 @@
 import { h, Host } from "@stencil/core";
-export class XplUtilityBar {
+export class UtilityBar {
     constructor() {
         this.open = true;
     }
@@ -11,7 +11,7 @@ export class XplUtilityBar {
         this.open = this.isNavOpenAtStartup !== undefined ? this.isNavOpenAtStartup : this.open;
     }
     render() {
-        return (h(Host, { key: 'a67e91188d392358df4b052d7e9026cf2f6b9b04' }, h("nav", { key: 'f51a3c37a1c8ae3d4f4ba8b524fb1f2ff2dd5ea8', "aria-label": "utility navigation bar", class: "xpl-utility-bar" }, this.navControl ? (h("div", null, h("button", { class: "xpl-utility-bar__nav-control", onClick: () => this.onNavToggle() }, h("xpl-icon", { class: "xpl-utility-nav__bars", icon: "three-bars" })), h("slot", { name: "aside" }))) : (h("slot", { name: "aside" })), h("slot", { key: '75f581a8455f372b692a9ec190c2f0974b214105', name: "main" }))));
+        return (h(Host, { key: 'b32ed07473f48009a3a6e76ba1a51fe156b19f1c' }, h("nav", { key: '7a98d494b15c5af7e8e0089ab64806c04d394381', "aria-label": "utility navigation bar", class: "xpl-utility-bar" }, this.navControl ? (h("div", null, h("button", { class: "xpl-utility-bar__nav-control", onClick: () => this.onNavToggle() }, h("xpl-icon", { class: "xpl-utility-nav__bars", icon: "three-bars" })), h("slot", { name: "aside" }))) : (h("slot", { name: "aside" })), h("slot", { key: 'd5f62631648bcd858b26a6500e2506e6f40d5c99', name: "main" }))));
     }
     static get is() { return "xpl-utility-bar"; }
     static get properties() {

package/dist/collection/utils/layout-ancestors.js

@@ -0,0 +1,22 @@
+export function isInsideFixedPosition(element) {
+    let el = element.parentElement;
+    while (el && el !== document.body && el !== document.documentElement) {
+        if (getComputedStyle(el).position === 'fixed') {
+            return true;
+        }
+        el = el.parentElement;
+    }
+    return false;
+}
+export function getNearestScrollableAncestor(element) {
+    let el = element.parentElement;
+    while (el && el !== document.body && el !== document.documentElement) {
+        const style = getComputedStyle(el);
+        const overflow = style.overflow + style.overflowX + style.overflowY;
+        if (/auto|scroll/.test(overflow)) {
+            return el;
+        }
+        el = el.parentElement;
+    }
+    return undefined;
+}