@xplortech/apollo-core 2.4.3 → 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/skeleton.stories.js

@@ -64,4 +64,8 @@ Simple.parameters = {
     html: {
         render: HtmlSimple(Simple.args),
     },
+    design: {
+        type: 'figma',
+        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=27679-10586&p=f&t=vVY2x58f7oPprNSr-11',
+    },
 };

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/slideout.stories.js

@@ -101,3 +101,9 @@ Slideout.args = {
     tertiaryButtonText: 'Button Text',
     variant: 'default',
 };
+Slideout.parameters = {
+    design: {
+        type: 'figma',
+        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=2627-108585&p=f&t=vVY2x58f7oPprNSr-11',
+    },
+};

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/table.stories.js

@@ -140,4 +140,8 @@ Table.parameters = {
             ];
         })(Table.args),
     },
+    design: {
+        type: 'figma',
+        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=20-258&p=f&t=vVY2x58f7oPprNSr-11',
+    },
 };

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/table-header.stories.js

@@ -119,4 +119,8 @@ TableHeader.parameters = {
             </th>
           </tr>`,
     },
+    design: {
+        type: 'figma',
+        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=14764-42036&p=f&t=xrSF2t7u1Brg2fnZ-11',
+    },
 };

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/table-header-cell.stories.js

@@ -68,4 +68,8 @@ TableHeaderCell.parameters = {
             `;
         },
     },
+    design: {
+        type: 'figma',
+        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=14764-42036&p=f&t=xrSF2t7u1Brg2fnZ-11',
+    },
 };

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 = '';
@@ -53,25 +53,15 @@ export class XplTableHeaderCell {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "IconName",
-                    "resolved": "\"ai\" | \"alarm-clock\" | \"alert-circle\" | \"alert-hex\" | \"alert-triangle\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-right\" | \"arrow-up\" | \"arrow-up-right\" | \"award\" | \"bell\" | \"bell-slash\" | \"bookmark\" | \"bookmark-slash\" | \"briefcase\" | \"calendar\" | \"calendar-month\" | \"calendar-week\" | \"camera\" | \"cash-register\" | \"check\" | \"check-circle\" | \"check-circle-fill\" | \"chevron-down\" | \"chevron-left\" | \"chevron-right\" | \"chevron-up\" | \"chevrons-down\" | \"chevrons-left\" | \"chevrons-right\" | \"chevrons-up\" | \"circle-slash\" | \"clipboard\" | \"clock\" | \"code-square\" | \"comment\" | \"comment-alt\" | \"comment-check\" | \"comment-closed\" | \"comment-discussion\" | \"comment-minus\" | \"comment-plus\" | \"comment-x\" | \"compass\" | \"credit-card\" | \"dash\" | \"dollar-bill\" | \"dollar-sign\" | \"download\" | \"drag\" | \"dumbbells\" | \"duplicate\" | \"edit\" | \"expand\" | \"eye\" | \"eye-closed\" | \"eye-droper\" | \"file\" | \"flag\" | \"folder\" | \"gear\" | \"gift\" | \"globe\" | \"graph\" | \"graph-bar\" | \"grid\" | \"heart\" | \"home\" | \"image\" | \"info\" | \"kebab-horizontal\" | \"kebab-vertical\" | \"key\" | \"law\" | \"layers\" | \"left-align\" | \"light-bulb\" | \"line\" | \"link\" | \"link-external\" | \"list-ordered\" | \"list-unordered\" | \"loader\" | \"location\" | \"lock\" | \"mail\" | \"mail-check\" | \"mail-closed\" | \"mail-minus\" | \"mail-plus\" | \"mail-x\" | \"map\" | \"megaphone\" | \"minus-circle\" | \"moon\" | \"navigation\" | \"organization\" | \"package\" | \"paperclip\" | \"pencil\" | \"people\" | \"percent\" | \"person\" | \"person-add\" | \"person-circle\" | \"phone\" | \"phone-minus\" | \"phone-pause\" | \"phone-plus\" | \"phone-slash\" | \"phone-x\" | \"pie-chart\" | \"pin\" | \"pin-circle\" | \"pin-circle-filled\" | \"pin-filled\" | \"play\" | \"plus\" | \"plus-circle\" | \"printer\" | \"question\" | \"refresh-cw\" | \"repeat\" | \"right-align\" | \"rocket\" | \"rotate-ccw\" | \"rotate-cw\" | \"save\" | \"search\" | \"share\" | \"shopping-bag\" | \"shopping-cart\" | \"sign-in\" | \"sign-out\" | \"signature\" | \"sliders-h\" | \"sliders-v\" | \"sort\" | \"star\" | \"star-fill\" | \"star-half-fill\" | \"sun\" | \"tag\" | \"three-bars\" | \"time-reverse\" | \"tools\" | \"trashcan\" | \"triangle-down\" | \"triangle-left\" | \"triangle-right\" | \"triangle-up\" | \"trophy\" | \"unlock\" | \"upload\" | \"video-camera\" | \"x\" | \"x-circle\" | \"x-circle-fill\" | \"zoom-in\" | \"zoom-out\"",
-                    "references": {
-                        "IconName": {
-                            "location": "import",
-                            "path": "../xpl-icon/xpl-icon",
-                            "id": "src/components/components/xpl-icon/xpl-icon.tsx::IconName",
-                            "referenceLocation": "IconName"
-                        }
-                    }
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [{
-                            "name": "property",
-                            "text": "{IconName} - Icon to display in the cell"
-                        }],
-                    "text": ""
+                    "tags": [],
+                    "text": "Icon to display in the cell.\n\nSee [xpl-icon available icons](../xpl-icon/ICONS.md) for valid icon names."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -74,4 +74,8 @@ Tabs.parameters = {
             </div>`,
         ])(Tabs.args),
     },
+    design: {
+        type: 'figma',
+        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=1536-178224&p=f&t=vVY2x58f7oPprNSr-11',
+    },
 };

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/toast.stories.js

@@ -79,4 +79,8 @@ Toast.parameters = {
             `;
         })(Toast.args),
     },
+    design: {
+        type: 'figma',
+        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=13039-31141&p=f&t=vVY2x58f7oPprNSr-11',
+    },
 };

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/toggle.stories.js

@@ -81,4 +81,8 @@ Toggle.parameters = {
 </div>`;
         })(Toggle.args),
     },
+    design: {
+        type: 'figma',
+        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=3915-91030&p=f&t=vVY2x58f7oPprNSr-11',
+    },
 };