@xplortech/apollo-core 2.7.0 → 2.8.0

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

@@ -45,10 +45,10 @@ export class SideNavItem {
             expanded: this.expanded,
             selected: this.selected,
         };
-        return (h(Host, { key: '10318a2c26c650f5c5e2143c2fe1bde6a372f933', class: {
+        return (h(Host, { key: 'a621f4f9c04d79de708a34a4f4eab06e523a299a', 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: 'ea6e431300ffe641e970c8cc49e7935858986685', class: `xpl-side-nav-item__children ${this.expanded ? 'expanded' : ''}`, inert: !this.expanded ? true : undefined }, h("div", { key: '378a00e24a61911ce69ef6a50e69d47b496b5557', class: "xpl-side-nav-item__children-inner" }, h("slot", { key: 'b3ece8c8ddbf58693a370824c40fe3811828889a' }))))));
+            } }, 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: '3e22894c0bd9427f568b86bba00cdab822921997', class: `xpl-side-nav-item__children ${this.expanded ? 'expanded' : ''}`, inert: !this.expanded ? true : undefined }, h("div", { key: '41486a4241e4402232531d140e972b39d863ffd9', class: "xpl-side-nav-item__children-inner" }, h("slot", { key: 'd334c6ecac7dd1dd12602a461db444cd1ccefc86' }))))));
     }
     static get is() { return "xpl-side-nav-item"; }
     static get properties() {

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

@@ -1,9 +1,9 @@
 import { Host, h } from "@stencil/core";
 export class SideNav {
     render() {
-        return (h(Host, { key: 'bfa4c94a1718583020da6a8b1e9104788ce78ef1', class: {
+        return (h(Host, { key: 'd01e8e27671eabc92613a803818b4351334011ac', class: {
                 'xpl-side-nav': true,
-            } }, h("div", { key: '1788f206ed3bea01be9cfa74fbc54a54e664945c', class: "xpl-side-nav__wrapper" }, h("nav", { key: 'ccbcbc45566a77a9134279b486148f3444bdb0ea', class: "xpl-side-nav__content", "aria-label": this.label }, h("div", { key: '6aef4d3f8e0c037aeedfc45d8471978c635b3293', class: "xpl-side-nav__section" }, h("slot", { key: 'e4384164f138cae0135472428079b62924afbcdf', name: "section" })), h("div", { key: '9794ea9a4b566713d0adb0787ae2ab1ae171fa6e', class: "xpl-side-nav__footer" }, h("slot", { key: 'e20ff6d3795784ea11470b7287550c29c0984a65', name: "nav-footer" }))))));
+            } }, h("div", { key: '92c9f31fa0d9d564164cde99d17e30562c30abb7', class: "xpl-side-nav__wrapper" }, h("nav", { key: '5ddd8b18d4f74bb752b747ec4e1c48780a0738de', class: "xpl-side-nav__content", "aria-label": this.label }, h("div", { key: '8b830945bf6ec1da8ab2e2c955c10a1077652590', class: "xpl-side-nav__section" }, h("slot", { key: '66e5cd33c23bdc8963d661e0741d34f80a0640fb', name: "section" })), h("div", { key: 'f0da4e3c25822453efcbfb3c6f8ea7ec328e717d', class: "xpl-side-nav__footer" }, h("slot", { key: '76b829e978361be9fd62bd412489ea4559852c3f', name: "nav-footer" }))))));
     }
     static get is() { return "xpl-side-nav"; }
     static get properties() {

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

@@ -5,7 +5,7 @@ export class Skeleton {
         this.size = 'custom';
     }
     render() {
-        return (h(Host, { key: '4c0962c3339b49f2f89d07e4827e826089419c70', class: {
+        return (h(Host, { key: '0ac86ae7bf109ea51bca36ac502d506ac7d0b66e', 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

@@ -26,7 +26,7 @@ export class Slideout {
         this.handleScroll();
     }
     render() {
-        return (h(Host, { key: '01e702ef959cc596ae8fb140275d733c93c3b399', class: "xpl-slideout" }, this.backdrop && this.isOpen && (h("xpl-backdrop", { key: '4e82ee44b68eae102a4c4ef65e797ce23659d330', onClick: this.handleClose })), h("aside", { key: '1c718a30611bb6699f231a9e736c0521c248d65a', class: `slideout slideout--${!this.isOpen && 'closed'}` }, h("header", { key: 'c53419926fbe8ccc6616af39d021248b46f138a3', class: "header" }, h("div", { key: '36e02fe5b7ff8d6920759ab793ead2be0f0811ac', class: "title" }, h("slot", { key: '7932fd5e77edb89570ebd3fedc0346929582ec7b', name: "title" }), h("xpl-button", { key: '9772e880c9b132ba84ccf45c4793e0af70548866', class: "close-button", "icon-only": true, size: "sm", variant: "tertiary", onClick: this.handleClose }, h("xpl-icon", { key: '91922e8aa02c30aa73ae1ea3d2b47daffd954616', icon: "x" }))), h("div", { key: '2f7065ba1da7f0ad805e16b69f4a316d5a1f9285', class: "subtitle" }, h("slot", { key: '8edb8bdbdecd01abd2b7899d5c9897c91e625326', name: "subtitle" })), h("div", { key: '5945128002bb2103daac40d1f7457ebb97521002', class: "search" }, h("slot", { key: 'c4df975581beb16547a439a86f2a532c10fa4fa7', name: "search" }))), h("xpl-divider", { key: '3be4c74de14ca2380179798fe4ec0c9a758739af', tier: 0, class: "divider top" }), h("article", { key: '2012ae1197acc41f530af8920b19752a248e2b40', class: "content", tabIndex: 0 }, h("slot", { key: 'e8a1cedda6cd48bb62dc42f00c9bdc8510d4f603', name: "content" })), this.showFooter && (h("footer", { key: 'cfa5a41846485b879126a90f3a7346d6eb680776' }, h("xpl-divider", { key: 'bf05c9d85471b55dee25da790afb3cb642f1a86b', tier: 0, class: "divider bottom" }), h("div", { key: 'd109314ca745947f3337b06df73183ff277c89bb', class: "footer" }, h("slot", { key: 'cad183e788d3555a5366b19b4e01c3c90f7d9ae0', name: "tertiary" }), h("slot", { key: 'c12294440fe8544e51197dfddbc01aaea506575a', name: "secondary" }), h("slot", { key: '7accdf8dc3cc9b6a416cf784ec081d70c1d0f1e9', name: "primary" })))))));
+        return (h(Host, { key: '8a3f7af854b35469bf4a383cc4cb1fcfcaa15748', class: "xpl-slideout" }, this.backdrop && this.isOpen && (h("xpl-backdrop", { key: '7033d78efa9ac2642a99d2b2dca278a3e9a44368', onClick: this.handleClose })), h("aside", { key: '2999e4119a0dbaac5125c7a1ef5f03761f445a0e', class: `slideout slideout--${!this.isOpen && 'closed'}` }, h("header", { key: '5e6bcf1284c2b2a4fbc05dd8e5100a33fa7597b4', class: "header" }, h("div", { key: '88172efe113b56a533761b975605a44ef52c5174', class: "title" }, h("slot", { key: 'c8f13168f62f96374250b11814ace756fa680503', name: "title" }), h("xpl-button", { key: '8e0e29a8ad2a5f45b250f9d563886fe7ad2a7cb8', class: "close-button", "icon-only": true, size: "sm", variant: "tertiary", onClick: this.handleClose }, h("xpl-icon", { key: '110cbd50e31b51319745d6fed61188c1c885b8b3', icon: "x" }))), h("div", { key: '96e6cddf4b078736201116f220f27ddf34b90b44', class: "subtitle" }, h("slot", { key: 'eb02b4fce6ff5e658ec51c83819a5257f452d3a1', name: "subtitle" })), h("div", { key: 'ac8dfe1f99428cdf728027aa5a04d58d497f34f0', class: "search" }, h("slot", { key: '28deb70ef99f4880fba55beb2d2b4b1d3136a240', name: "search" }))), h("xpl-divider", { key: '928d20ef8e74eed4e06351c5dab0c0af9934d2b8', tier: 0, class: "divider top" }), h("article", { key: 'd6460cb29abb33f6676d2e4f517c1f2befa57148', class: "content", tabIndex: 0 }, h("slot", { key: 'b415af9cadedc61407623773fd6b2b1130caf5df', name: "content" })), this.showFooter && (h("footer", { key: 'db6a58277112f134dc150266446cc67c79bc6bc5' }, h("xpl-divider", { key: '129a61ba1a8a588e94d710b7e7fb1059c4b7f5e6', tier: 0, class: "divider bottom" }), h("div", { key: '6c81348acf8ee2bb4c12c2f3207daae564e78aa2', class: "footer" }, h("slot", { key: '8c9a6d4c215154bb2e66d62aa462b3b085ef0f5b', name: "tertiary" }), h("slot", { key: 'e66e45e2d090f45305f818c6496541b737c96aeb', name: "secondary" }), h("slot", { key: '8892bdf075a38237a5c858bfd951e1203fc3c892', name: "primary" })))))));
     }
     static get is() { return "xpl-slideout"; }
     static get properties() {

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

@@ -10,10 +10,10 @@ export class TabPanel {
         const t = (_a = this.target) !== null && _a !== void 0 ? _a : '';
         const panelId = tabPanelDomId(groupId, t);
         const labelledBy = tabTriggerId(groupId, t);
-        return (h(Host, { key: '4491f3466d26e462432843c382b0d0b5ab64e68b', "aria-labelledby": labelledBy, class: {
+        return (h(Host, { key: '4c4a86dda347872ea6b1c4569f8424bd6cac7bd9', "aria-labelledby": labelledBy, class: {
                 'xpl-tab-panel': true,
                 'xpl-tab-panel--selected': this.selected,
-            }, id: panelId, role: "tabpanel" }, h("slot", { key: '75b3da77cddb6e0a83b7cf41aa5e0aa30259b728' })));
+            }, id: panelId, role: "tabpanel" }, h("slot", { key: '30c9ae6f3748dc02a73da7535443266b1043d61b' })));
     }
     static get is() { return "xpl-tab-panel"; }
     static get properties() {

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

@@ -1,107 +1,19 @@
 import { v4 as uuid } from "uuid";
-const SLOT_TABLE_WRAPPER_STYLE = 'box-sizing: border-box; display: block; width: 100%; max-width: min(100vw - 2rem, 960px); overflow: auto;';
-const PLACEHOLDER_AVATAR_SRC = 'https://placebear.com/128/128';
 export default {
     title: 'Components/Table',
+    argTypes: {
+        freeze: { control: { type: 'boolean' } },
+        multiselect: { control: { type: 'boolean' } },
+        striped: { control: { type: 'boolean' } },
+        columns: { control: { type: 'object' } },
+        data: { control: { type: 'object' } },
+        footer: { control: { type: 'object' } },
+        isSortable: { control: { type: 'boolean' } },
+        sortableColumns: { control: { type: 'object' } },
+    },
     parameters: {
-        controls: {
-            sort: 'none',
-        },
         actions: {
-            handles: ['tableSelect', 'sortChanged', 'rowSelectionChange', 'rowOrderChange'],
-        },
-        docs: {
-            description: {
-                component: 'Use **Slot based** for compositional `xpl-table` (`xpl-table-header`, `xpl-table-body`, …). Use **Legacy** for the deprecated `columns` / `data` API (native `<table>`). Compositional mode: `selectable`, `row-reorderable`, toolbar slots, and **header sort** (`sortable` on `xpl-table-header-cell` + `sortChanged` on the table — the story script reorders rows for demo only).',
-            },
-        },
-    },
-    argTypes: {
-        type: {
-            name: 'Type',
-            control: { type: 'select' },
-            options: ['Legacy', 'Slot based'],
-            table: { category: '00 — Mode' },
-        },
-        freeze: {
-            control: { type: 'boolean' },
-            table: { category: 'Shared' },
-        },
-        striped: {
-            control: { type: 'boolean' },
-            table: { category: 'Shared' },
-        },
-        multiselect: {
-            control: { type: 'boolean' },
-            if: { arg: 'type', eq: 'Legacy' },
-            table: { category: '01 — Legacy' },
-        },
-        columns: {
-            control: { type: 'object' },
-            if: { arg: 'type', eq: 'Legacy' },
-            table: { category: '01 — Legacy' },
-        },
-        data: {
-            control: { type: 'object' },
-            if: { arg: 'type', eq: 'Legacy' },
-            table: { category: '01 — Legacy' },
-        },
-        footer: {
-            control: { type: 'object' },
-            if: { arg: 'type', eq: 'Legacy' },
-            table: { category: '01 — Legacy' },
-        },
-        isSortable: {
-            control: { type: 'boolean' },
-            if: { arg: 'type', eq: 'Legacy' },
-            table: { category: '01 — Legacy' },
-        },
-        sortableColumns: {
-            control: { type: 'object' },
-            if: { arg: 'type', eq: 'Legacy' },
-            table: { category: '01 — Legacy' },
-        },
-        selectedValues: {
-            control: { type: 'object' },
-            if: { arg: 'type', eq: 'Legacy' },
-            description: '**Legacy only** (`columns` / `data` + `multiselect`). Per-row checkbox values. Not used in slot-based mode.',
-            table: { category: '01 — Legacy' },
-        },
-        tableLabel: {
-            control: 'text',
-            if: { arg: 'type', eq: 'Slot based' },
-            description: 'Sets `label` / `aria-label` on `xpl-table`.',
-            table: { category: '02 — Slot: Table' },
-        },
-        showSelectable: {
-            control: 'boolean',
-            if: { arg: 'type', eq: 'Slot based' },
-            description: 'Adds `selectable` and a checkbox column (you must author header + row checkboxes).',
-            table: { category: '02 — Slot: Table' },
-        },
-        showRowReorderable: {
-            control: 'boolean',
-            if: { arg: 'type', eq: 'Slot based' },
-            description: 'Adds `row-reorderable`; Apollo injects the reorder column (grip).',
-            table: { category: '02 — Slot: Table' },
-        },
-        showToolbar: {
-            control: 'boolean',
-            if: { arg: 'type', eq: 'Slot based' },
-            description: 'Renders `slot="toolbar-actions-left"` on the bulk toolbar. Requires **`showSelectable`**: without `selectable`, those slots are not rendered by `xpl-table` and toolbar nodes would break the grid — the story skips them when selection is off.',
-            table: { category: '02 — Slot: Table' },
-        },
-        sortableNameColumn: {
-            control: 'boolean',
-            if: { arg: 'type', eq: 'Slot based' },
-            description: 'Name column uses `sortable` + `sort-key="name"`. Compositional tables emit `sortChanged` only; the story script reorders rows by the active sort-key in `event.detail` (same slug rules as `xpl-table`).',
-            table: { category: '02 — Slot: Table' },
-        },
-        showRichCells: {
-            control: 'boolean',
-            if: { arg: 'type', eq: 'Slot based' },
-            description: 'Name column shows avatar + caption (like the index.html rich demo).',
-            table: { category: '03 — Slot: Row content' },
+            handles: ['tableSelect', 'sortChanged'],
         },
     },
 };
@@ -129,7 +41,7 @@ const selectedValuesDefault = [
 ];
 const sortableColumnsDefault = [false, false, false, false, false, false];
 const footerDefault = [['Total', '676.5', '159.75', 'All Seasons', '26', '106']];
-const legacyScript = ({ columns, data, footer, id, selectedValues, isSortable, sortableColumns, }) => `
+const script = ({ columns, data, footer, id, selectedValues, isSortable, sortableColumns }) => `
     (function() {
         const table = document.getElementById("${id}");
         table.columns = ${JSON.stringify(columns)};
@@ -140,206 +52,8 @@ const legacyScript = ({ columns, data, footer, id, selectedValues, isSortable, s
         table.isSortable = ${isSortable};
     })();
 `;
-function slotBasedSortScript(tableId) {
-    const idLiteral = JSON.stringify(tableId);
-    return `
-        <script>
-            (function () {
-                const table = document.getElementById(${idLiteral});
-                if (!table) return;
-
-                function sortKeySlug(h, columnIndex) {
-                    var sk = h.getAttribute('sort-key');
-                    var lab = (h.getAttribute('label') || '').trim();
-                    var raw = (sk || lab || '').trim();
-                    if (raw.length > 0) return raw.replace(/ /g, '-').toLowerCase();
-                    return 'column-' + columnIndex;
-                }
-
-                table.addEventListener('sortChanged', function (e) {
-                    const detail = e.detail;
-                    if (!detail || typeof detail !== 'object') return;
-
-                    var activeKey = null;
-                    var dir = null;
-                    Object.keys(detail).forEach(function (k) {
-                        var v = detail[k];
-                        if (v === 'asc' || v === 'desc') {
-                            activeKey = k;
-                            dir = v;
-                        }
-                    });
-
-                    const body = table.querySelector('xpl-table-body');
-                    const headerRow = table.querySelector('xpl-table-header xpl-table-row');
-                    if (!body || !headerRow) return;
-                    const headers = Array.from(headerRow.querySelectorAll('xpl-table-header-cell'));
-                    const rows = Array.from(body.querySelectorAll('xpl-table-row'));
-
-                    function defaultOrder(row) {
-                        const rid = row.getAttribute('row-id') || '';
-                        const m = rid.match(/-(\\d+)$/);
-                        return m ? parseInt(m[1], 10) : 0;
-                    }
-
-                    if (!activeKey) {
-                        rows.sort(function (a, b) {
-                            return defaultOrder(a) - defaultOrder(b);
-                        });
-                        rows.forEach(function (r) {
-                            body.appendChild(r);
-                        });
-                        return;
-                    }
-
-                    var sortColIdx = headers.findIndex(function (h, i) {
-                        return sortKeySlug(h, i) === activeKey;
-                    });
-                    if (sortColIdx < 0) return;
-
-                    function rowKey(row) {
-                        const cells = row.querySelectorAll('xpl-table-cell');
-                        const c = cells[sortColIdx];
-                        return (c && c.textContent ? c.textContent : '')
-                            .replace(/\\s+/g, ' ')
-                            .trim()
-                            .toLowerCase();
-                    }
-                    rows.sort(function (a, b) {
-                        const cmp = rowKey(a).localeCompare(rowKey(b));
-                        return dir === 'asc' ? cmp : -cmp;
-                    });
-                    rows.forEach(function (r) {
-                        body.appendChild(r);
-                    });
-                });
-            })();
-        </script>`;
-}
-function slotBasedNameCell(showRichCells, rowIndex, name) {
-    if (!showRichCells) {
-        return `<xpl-table-cell>${name}</xpl-table-cell>`;
-    }
-    return `<xpl-table-cell>
-                <div style="display: flex; align-items: center; gap: var(--xpl-space-12);">
-                    <xpl-avatar name="${name}" src="${PLACEHOLDER_AVATAR_SRC}" size="sm"></xpl-avatar>
-                    <div style="display: flex; flex-direction: column; gap: var(--xpl-space-4); min-width: 0;">
-                        <span style="font-weight: var(--xpl-font-weight-semibold)">${name}</span>
-                        <span class="xpl-text-caption">player${rowIndex}@example.com</span>
-                    </div>
-                </div>
-            </xpl-table-cell>`;
-}
-function renderSlotBasedTable(props) {
-    const tableId = uuid();
-    const label = props.tableLabel != null && String(props.tableLabel).trim() !== ''
-        ? String(props.tableLabel)
-        : 'Team directory';
-    const labelAttr = ` label="${label.replace(/"/g, '&quot;')}"`;
-    const attrs = [
-        ` id="${tableId}"`,
-        labelAttr,
-        props.striped ? ' striped' : '',
-        props.freeze ? ' freeze' : '',
-        props.showSelectable ? ' selectable' : '',
-        props.showRowReorderable ? ' row-reorderable' : '',
-    ].join('');
-    const toolbar = props.showSelectable && props.showToolbar
-        ? `
-                    <div slot="toolbar-actions-left" style="display: inline-flex; align-items: center; gap: var(--xpl-space-8)">
-                        <xpl-button size="sm" variant="secondary" type="button">Bulk action</xpl-button>
-                    </div>`
-        : '';
-    const headerCheckbox = props.showSelectable
-        ? `<xpl-table-header-cell type="checkbox" width="48"></xpl-table-header-cell>`
-        : '';
-    const nameSort = props.sortableNameColumn ? ' sortable sort-key="name"' : '';
-    const names = ['Boston Rob Mariano', 'Parvati Shallow', 'Ozzy Lusth'];
-    const bodyRows = [1, 2, 3]
-        .map((i) => {
-        var _a;
-        const rowCheckbox = props.showSelectable
-            ? `<xpl-table-cell><xpl-checkbox></xpl-checkbox></xpl-table-cell>`
-            : '';
-        const name = (_a = names[i - 1]) !== null && _a !== void 0 ? _a : `Player ${i}`;
-        return `
-                        <xpl-table-row row-id="story-row-${i}">
-                            ${rowCheckbox}
-                            ${slotBasedNameCell(Boolean(props.showRichCells), i, name)}
-                            <xpl-table-cell>${90 + i * 7}</xpl-table-cell>
-                            <xpl-table-cell>S${10 + i}, S${20 + i}</xpl-table-cell>
-                        </xpl-table-row>`;
-    })
-        .join('');
-    return `
-        <div style="${SLOT_TABLE_WRAPPER_STYLE}">
-            <xpl-table${attrs}>
-                ${toolbar}
-                <xpl-table-header>
-                    <xpl-table-row>
-                        ${headerCheckbox}
-                        <xpl-table-header-cell label="Name"${nameSort} width="280"></xpl-table-header-cell>
-                        <xpl-table-header-cell label="Days" align="right" width="96"></xpl-table-header-cell>
-                        <xpl-table-header-cell label="Seasons"></xpl-table-header-cell>
-                    </xpl-table-row>
-                </xpl-table-header>
-                <xpl-table-body>
-                    ${bodyRows}
-                </xpl-table-body>
-            </xpl-table>
-        </div>${slotBasedSortScript(tableId)}`;
-}
-const slotBasedExample = `<div style="${SLOT_TABLE_WRAPPER_STYLE}">
-<xpl-table label="Team directory" selectable striped freeze row-reorderable>
-    <div slot="toolbar-actions-left" style="display: inline-flex; align-items: center; gap: var(--xpl-space-8)">
-        <xpl-button size="sm" variant="secondary" type="button">Bulk action</xpl-button>
-    </div>
-    <xpl-table-header>
-        <xpl-table-row>
-            <xpl-table-header-cell type="checkbox" width="48"></xpl-table-header-cell>
-            <xpl-table-header-cell label="Name" sortable sort-key="name" width="280"></xpl-table-header-cell>
-            <xpl-table-header-cell label="Days" align="right" width="96"></xpl-table-header-cell>
-            <xpl-table-header-cell label="Seasons"></xpl-table-header-cell>
-        </xpl-table-row>
-    </xpl-table-header>
-    <xpl-table-body>
-        <xpl-table-row row-id="example-1">
-            <xpl-table-cell><xpl-checkbox></xpl-checkbox></xpl-table-cell>
-            <xpl-table-cell>
-                <div style="display: flex; align-items: center; gap: var(--xpl-space-12);">
-                    <xpl-avatar name="Boston Rob" src="https://placebear.com/128/128" size="sm"></xpl-avatar>
-                    <div style="display: flex; flex-direction: column; gap: var(--xpl-space-4); min-width: 0;">
-                        <span style="font-weight: var(--xpl-font-weight-semibold)">Boston Rob Mariano</span>
-                        <span class="xpl-text-caption">boston@example.com</span>
-                    </div>
-                </div>
-            </xpl-table-cell>
-            <xpl-table-cell align="right">152</xpl-table-cell>
-            <xpl-table-cell>S4, S8, S20</xpl-table-cell>
-        </xpl-table-row>
-        <xpl-table-row row-id="example-2">
-            <xpl-table-cell><xpl-checkbox></xpl-checkbox></xpl-table-cell>
-            <xpl-table-cell>
-                <div style="display: flex; align-items: center; gap: var(--xpl-space-12);">
-                    <xpl-avatar name="Parvati Shallow" size="sm" color="green"></xpl-avatar>
-                    <div style="display: flex; flex-direction: column; gap: var(--xpl-space-4); min-width: 0;">
-                        <span style="font-weight: var(--xpl-font-weight-semibold)">Parvati Shallow</span>
-                        <span class="xpl-text-caption">parvati@example.com</span>
-                    </div>
-                </div>
-            </xpl-table-cell>
-            <xpl-table-cell align="right">149</xpl-table-cell>
-            <xpl-table-cell>S13, S16, S20</xpl-table-cell>
-        </xpl-table-row>
-    </xpl-table-body>
-</xpl-table>
-</div>`;
-export const Table = (props) => {
-    if (props.type === 'Slot based') {
-        return renderSlotBasedTable(props);
-    }
+export const Table = ({ columns, data, footer, freeze, multiselect, selectedValues, striped, isSortable, sortableColumns, }) => {
     const id = uuid();
-    const { columns, data, footer, freeze, multiselect, selectedValues, striped, isSortable, sortableColumns, } = props;
     let attrs = '';
     if (freeze)
         attrs += ' freeze';
@@ -354,43 +68,77 @@ export const Table = (props) => {
             <xpl-table id="${id}"${attrs}></xpl-table>
         </div>
         <script>
-            ${legacyScript({
-        id,
-        columns,
-        data,
-        footer,
-        selectedValues,
-        sortableColumns,
-        isSortable,
-    })}
+            ${script({ id, columns, data, footer, selectedValues, sortableColumns, isSortable })}
         </script>
     `;
 };
 Table.args = {
-    type: 'Slot based',
     freeze: true,
-    striped: true,
     multiselect: false,
+    striped: false,
     columns: columnsDefault,
     data: dataDefault,
     footer: footerDefault,
     selectedValues: selectedValuesDefault,
     isSortable: false,
     sortableColumns: sortableColumnsDefault,
-    tableLabel: 'Team directory',
-    showSelectable: true,
-    showRowReorderable: true,
-    showToolbar: true,
-    sortableNameColumn: true,
-    showRichCells: true,
 };
 Table.parameters = {
-    layout: 'padded',
+    layout: 'centered',
     'web-component': {
-        render: [slotBasedExample],
+        render: (({ freeze, multiselect, striped }) => {
+            let attrs = '';
+            if (freeze)
+                attrs += ' freeze';
+            if (multiselect)
+                attrs += ' multiselect';
+            if (striped)
+                attrs += ' striped';
+            return [
+                `<xpl-table${attrs}></xpl-table>`,
+                `table.columns = [
+                    "Name", "Total Days Played", ...
+                ];`,
+                `table.data = [
+                    ["Boston Rob Mariano", ...],
+                    ["Parvati Shallow", ...],
+                    ...
+                ];`,
+            ];
+        })(Table.args),
     },
     html: {
-        render: slotBasedExample,
+        render: (({ freeze, striped }) => {
+            let className = 'xpl-table';
+            if (striped)
+                className += ' xpl-table--striped';
+            if (freeze)
+                className += ' xpl-table--freeze';
+            return [
+                `WARNING: For \`multiselect\` tables, there is JS interactivity that is provided only by the web component. The code shown below does not reflect the additional \`multiselect\` table markup and interactivity.`,
+                `<div class="xpl-table-container">
+                    <table class="${className}">
+                        <thead>
+                            <th>Name</th>
+                            <th>Total Days Played</th>
+                            ...
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td>Boston Rob Mariano</td>
+                                <td>152</td>
+                                ...
+                            </tr>
+                            <tr>
+                                <td>Parvati Shallow</td>
+                                <td>149</td>
+                                ...
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>`,
+            ];
+        })(Table.args),
     },
     design: {
         type: 'figma',