@xplortech/apollo-core 2.11.0 → 3.0.0

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

@@ -1,12 +1,12 @@
 import { Host, forceUpdate, h, } from "@stencil/core";
+import { isBrowser } from "../../utils/lifecycle";
 import { autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
 const SPOTLIGHT_FOCUS_BUTTON_SELECTOR = '.xpl-spotlight__dismiss button, .xpl-spotlight__actions button';
 const SPOTLIGHT_FOCUS_FALLBACK_MAX_TICKS = 120;
 const SPOTLIGHT_FOCUS_OBSERVER_MAX_MS = 2500;
 function waitForSpotlightFocusButtonWithoutMutationObserver(root, options) {
     return new Promise((resolve) => {
-        var _a, _b;
-        if ((_a = options === null || options === void 0 ? void 0 : options.signal) === null || _a === void 0 ? void 0 : _a.aborted) {
+        if (options?.signal?.aborted) {
             resolve(null);
             return;
         }
@@ -23,7 +23,7 @@ function waitForSpotlightFocusButtonWithoutMutationObserver(root, options) {
             resolve(value);
         };
         const onAbort = () => finish(null);
-        (_b = options === null || options === void 0 ? void 0 : options.signal) === null || _b === void 0 ? void 0 : _b.addEventListener('abort', onAbort, { once: true });
+        options?.signal?.addEventListener('abort', onAbort, { once: true });
         const schedule = (fn) => {
             if (typeof requestAnimationFrame !== 'undefined') {
                 rafId = requestAnimationFrame(() => {
@@ -39,20 +39,19 @@ function waitForSpotlightFocusButtonWithoutMutationObserver(root, options) {
             }
         };
         const tick = () => {
-            var _a, _b, _c;
-            if ((_a = options === null || options === void 0 ? void 0 : options.signal) === null || _a === void 0 ? void 0 : _a.aborted) {
+            if (options?.signal?.aborted) {
                 finish(null);
                 return;
             }
             const el = root.querySelector(SPOTLIGHT_FOCUS_BUTTON_SELECTOR);
             if (el) {
-                (_b = options === null || options === void 0 ? void 0 : options.signal) === null || _b === void 0 ? void 0 : _b.removeEventListener('abort', onAbort);
+                options?.signal?.removeEventListener('abort', onAbort);
                 finish(el);
                 return;
             }
             ticks += 1;
             if (ticks >= SPOTLIGHT_FOCUS_FALLBACK_MAX_TICKS) {
-                (_c = options === null || options === void 0 ? void 0 : options.signal) === null || _c === void 0 ? void 0 : _c.removeEventListener('abort', onAbort);
+                options?.signal?.removeEventListener('abort', onAbort);
                 finish(null);
                 return;
             }
@@ -62,19 +61,17 @@ function waitForSpotlightFocusButtonWithoutMutationObserver(root, options) {
     });
 }
 function waitForSpotlightFocusButton(root, options) {
-    var _a;
     const existing = root.querySelector(SPOTLIGHT_FOCUS_BUTTON_SELECTOR);
     if (existing) {
         return Promise.resolve(existing);
     }
-    if ((_a = options === null || options === void 0 ? void 0 : options.signal) === null || _a === void 0 ? void 0 : _a.aborted) {
+    if (options?.signal?.aborted) {
         return Promise.resolve(null);
     }
     if (typeof MutationObserver === 'undefined') {
         return waitForSpotlightFocusButtonWithoutMutationObserver(root, options);
     }
     return new Promise((resolve) => {
-        var _a;
         let settled = false;
         let timeoutId;
         let observer;
@@ -100,7 +97,7 @@ function waitForSpotlightFocusButton(root, options) {
             subtree: true,
         });
         timeoutId = setTimeout(() => finish(null), SPOTLIGHT_FOCUS_OBSERVER_MAX_MS);
-        (_a = options === null || options === void 0 ? void 0 : options.signal) === null || _a === void 0 ? void 0 : _a.addEventListener('abort', () => {
+        options?.signal?.addEventListener('abort', () => {
             finish(null);
         }, { once: true });
     });
@@ -202,7 +199,9 @@ export class Spotlight {
             this.syncTitleSlotIds();
         };
         this.updatePosition = async (referenceEl) => {
-            var _a, _b, _c, _d, _e, _f;
+            if (!isBrowser()) {
+                return;
+            }
             const generation = this.positioningGeneration;
             try {
                 const initialPlacement = ANCHOR_TO_PLACEMENT[this.anchorPosition];
@@ -220,18 +219,19 @@ export class Spotlight {
                 }
                 this.el.style.left = `${x}px`;
                 this.el.style.top = `${y}px`;
-                const shiftX = (_b = (_a = middlewareData.shift) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : 0;
-                const shiftY = (_d = (_c = middlewareData.shift) === null || _c === void 0 ? void 0 : _c.y) !== null && _d !== void 0 ? _d : 0;
+                const shiftX = middlewareData.shift?.x ?? 0;
+                const shiftY = middlewareData.shift?.y ?? 0;
                 this.el.style.setProperty('--xpl-spotlight-shift-x', `${-shiftX}px`);
                 this.el.style.setProperty('--xpl-spotlight-shift-y', `${-shiftY}px`);
                 this.hasFloatingPosition = true;
-                const corner = (_e = PLACEMENT_TO_CORNER[placement]) !== null && _e !== void 0 ? _e : PLACEMENT_TO_CORNER[(_f = placement.split('-')[0]) !== null && _f !== void 0 ? _f : ''];
-                this.resolvedAnchorPosition = corner !== null && corner !== void 0 ? corner : this.anchorPosition;
+                const corner = PLACEMENT_TO_CORNER[placement] ??
+                    PLACEMENT_TO_CORNER[placement.split('-')[0] ?? ''];
+                this.resolvedAnchorPosition = corner ?? this.anchorPosition;
                 if (this.pendingEnterTransitionAfterAnchor) {
                     this.scheduleEnterTransition();
                 }
             }
-            catch (_g) {
+            catch {
                 if (generation !== this.positioningGeneration) {
                     return;
                 }
@@ -256,8 +256,7 @@ export class Spotlight {
     }
     onIsOpenChange(isOpen) {
         if (Spotlight.coerceBoolean(isOpen)) {
-            this.previousFocus =
-                document.activeElement instanceof HTMLElement ? document.activeElement : null;
+            this.capturePreviousFocus();
             this.shouldMoveFocusOnRender = true;
             this.isVisible = false;
             this.refreshBodySlotState();
@@ -305,8 +304,7 @@ export class Spotlight {
             this.isVisible = false;
             return;
         }
-        this.previousFocus =
-            document.activeElement instanceof HTMLElement ? document.activeElement : null;
+        this.capturePreviousFocus();
         this.shouldMoveFocusOnRender = true;
         this.scheduleEnterTransition();
         if (this.pendingEnterVisible) {
@@ -328,12 +326,8 @@ export class Spotlight {
         this.hasImageSlotContent = this.hasSlottedContent('image');
         this.hasTitleSlotContent = this.hasSlottedContent('title');
         this.dialogLabelId = this.getDialogLabelId();
-        if (this.isOpenEnabled) {
-            this.previousFocus =
-                document.activeElement instanceof HTMLElement ? document.activeElement : null;
-            if (!this.target) {
-                this.pendingEnterVisible = true;
-            }
+        if (this.isOpenEnabled && !this.target) {
+            this.pendingEnterVisible = true;
         }
         this.shouldMoveFocusOnRender = this.isOpenEnabled;
     }
@@ -375,6 +369,7 @@ export class Spotlight {
             return;
         }
         this.shouldMoveFocusOnRender = false;
+        this.capturePreviousFocus();
         this.focusInitial();
     }
     handleKeyDown(ev) {
@@ -452,16 +447,13 @@ export class Spotlight {
         return Spotlight.coerceBoolean(this.showSteps);
     }
     get headingPropHasText() {
-        var _a;
-        return Boolean((_a = this.heading) === null || _a === void 0 ? void 0 : _a.trim());
+        return Boolean(this.heading?.trim());
     }
     get bodyPropHasText() {
-        var _a;
-        return Boolean((_a = this.body) === null || _a === void 0 ? void 0 : _a.trim());
+        return Boolean(this.body?.trim());
     }
     async focusInitial() {
-        var _a;
-        (_a = this.focusAbort) === null || _a === void 0 ? void 0 : _a.abort();
+        this.focusAbort?.abort();
         this.focusAbort = new AbortController();
         if (!this.hasRenderableFocusChrome && this.isOpenEnabled) {
             this.focusFrameId = requestAnimationFrame(() => {
@@ -490,15 +482,20 @@ export class Spotlight {
         const { activeElement } = document;
         return (Boolean(activeElement) && (activeElement === this.el || this.el.contains(activeElement)));
     }
+    capturePreviousFocus() {
+        if (!isBrowser()) {
+            return;
+        }
+        this.previousFocus =
+            document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    }
     restoreFocus() {
-        var _a;
-        if ((_a = this.previousFocus) === null || _a === void 0 ? void 0 : _a.isConnected) {
+        if (this.previousFocus?.isConnected) {
             this.previousFocus.focus();
         }
     }
     cancelPendingFocusWait() {
-        var _a;
-        (_a = this.focusAbort) === null || _a === void 0 ? void 0 : _a.abort();
+        this.focusAbort?.abort();
         if (this.focusFrameId != null) {
             cancelAnimationFrame(this.focusFrameId);
             this.focusFrameId = null;
@@ -513,7 +510,7 @@ export class Spotlight {
     }
     scheduleEnterTransition(options) {
         this.cancelEnterTransition();
-        const shouldDeferUntilAnchored = !(options === null || options === void 0 ? void 0 : options.skipAnchorWait) &&
+        const shouldDeferUntilAnchored = !options?.skipAnchorWait &&
             Boolean(this.target && this.referenceEl) &&
             !this.hasFloatingPosition;
         if (shouldDeferUntilAnchored) {
@@ -524,7 +521,6 @@ export class Spotlight {
         this.pendingEnterVisible = true;
     }
     getFirstTitleSlottedElement() {
-        var _a;
         const fromHost = Array.from(this.el.children).find((node) => node.nodeType === Node.ELEMENT_NODE && node.getAttribute('slot') === 'title');
         if (fromHost) {
             return fromHost;
@@ -536,12 +532,12 @@ export class Spotlight {
                 return assigned;
             }
         }
-        return (_a = this.el.querySelector('[slot="title"]')) !== null && _a !== void 0 ? _a : null;
+        return this.el.querySelector('[slot="title"]') ?? null;
     }
     getDialogLabelId() {
         if (this.hasTitleSlotContent) {
             const first = this.getFirstTitleSlottedElement();
-            if (first === null || first === void 0 ? void 0 : first.id) {
+            if (first?.id) {
                 return first.id;
             }
             return this.headingId;
@@ -592,8 +588,7 @@ export class Spotlight {
         });
     }
     stopSlotContentObserver() {
-        var _a;
-        (_a = this.slotContentObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.slotContentObserver?.disconnect();
         this.slotContentObserver = null;
     }
     hasSlottedContent(slotName) {
@@ -603,15 +598,15 @@ export class Spotlight {
         const hasAssigned = slot
             ? slot
                 .assignedNodes({ flatten: true })
-                .some((n) => {
-                var _a;
-                return n.nodeType === Node.ELEMENT_NODE ||
-                    (n.nodeType === Node.TEXT_NODE && ((_a = n.textContent) === null || _a === void 0 ? void 0 : _a.trim()));
-            })
+                .some((n) => n.nodeType === Node.ELEMENT_NODE ||
+                (n.nodeType === Node.TEXT_NODE && n.textContent?.trim()))
             : false;
         return Boolean(fromQuery || fromHostChildren) || hasAssigned;
     }
     startPositioning() {
+        if (!isBrowser()) {
+            return;
+        }
         if (!this.target) {
             return;
         }
@@ -619,7 +614,7 @@ export class Spotlight {
         try {
             el = this.el.ownerDocument.querySelector(this.target);
         }
-        catch (_a) {
+        catch {
             this.stopPositioning();
             this.resolvedAnchorPosition = this.anchorPosition;
             return;

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

@@ -2,6 +2,7 @@ import { Host, h } from "@stencil/core";
 import { getTabGroupInstanceId, tabPanelDomId, tabTriggerId, } from "../../utils/tab-a11y-ids";
 export class Tab {
     constructor() {
+        this.badgeVariant = 'purple';
         this.disabled = false;
         this.fullWidth = false;
         this.groupDisabled = false;
@@ -29,12 +30,11 @@ export class Tab {
     }
     async focusTrigger() {
         const btn = await this.getFocusableElement();
-        btn === null || btn === void 0 ? void 0 : btn.focus();
+        btn?.focus();
     }
     get a11yIds() {
-        var _a;
         const groupId = getTabGroupInstanceId(this.el);
-        const t = (_a = this.target) !== null && _a !== void 0 ? _a : '';
+        const t = this.target ?? '';
         return {
             panelId: tabPanelDomId(groupId, t),
             triggerId: tabTriggerId(groupId, t),
@@ -46,8 +46,16 @@ export class Tab {
     get isSegment() {
         return this.variant === 'segment';
     }
+    get hasBadge() {
+        return this.badge != null && this.badge.length > 0;
+    }
+    renderBadge() {
+        if (!this.hasBadge) {
+            return null;
+        }
+        return (h("xpl-badge", { class: "xpl-tab__badge", dotOnly: true, variant: this.badgeVariant }, this.badge));
+    }
     render() {
-        var _a;
         const segment = this.isSegment;
         const { panelId, triggerId } = this.a11yIds;
         const ariaSelected = this.selected ? 'true' : 'false';
@@ -63,13 +71,60 @@ export class Tab {
                     role: 'tab',
                     'aria-controls': panelId,
                     'aria-selected': ariaSelected,
-                }, disabled: this.effectivelyDisabled, fullWidth: this.fullWidth, icon: (_a = this.icon) !== null && _a !== void 0 ? _a : '', iconPosition: this.iconPosition, onClick: this.handleTabClick, size: "sm", type: "button", variant: this.selected ? 'primary' : 'tertiary' }, h("slot", null))));
+                }, disabled: this.effectivelyDisabled, fullWidth: this.fullWidth, icon: this.icon ?? '', iconPosition: this.iconPosition, onClick: this.handleTabClick, size: "sm", type: "button", variant: this.selected ? 'primary' : 'tertiary' }, h("slot", null), this.renderBadge())));
         }
-        return (h(Host, { class: hostClass }, h("button", { "aria-controls": panelId, "aria-selected": ariaSelected, class: "xpl-tab__button", disabled: this.effectivelyDisabled, id: triggerId, onClick: this.handleTabClick, role: "tab", type: "button" }, h("slot", null))));
+        const iconEl = this.icon ? (h("xpl-icon", { class: "xpl-tab__icon", icon: this.icon, size: 16 })) : null;
+        return (h(Host, { class: hostClass }, h("button", { "aria-controls": panelId, "aria-selected": ariaSelected, class: "xpl-tab__button", disabled: this.effectivelyDisabled, id: triggerId, onClick: this.handleTabClick, role: "tab", type: "button" }, this.iconPosition === 'start' ? iconEl : null, h("slot", null), this.iconPosition === 'end' ? iconEl : null, this.renderBadge())));
     }
     static get is() { return "xpl-tab"; }
     static get properties() {
         return {
+            "badge": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional trailing number badge (e.g. a count). Rendered after the label as a compact\n`xpl-badge` in both underline (`type=\"tabs\"`) and segment (`type=\"segment\"`) tabs.\nLeave empty to omit the badge."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "badge"
+            },
+            "badgeVariant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BadgePalette",
+                    "resolved": "\"blue\" | \"gray\" | \"green\" | \"orange\" | \"purple\" | \"red\" | \"yellow\"",
+                    "references": {
+                        "BadgePalette": {
+                            "location": "import",
+                            "path": "../xpl-badge/xpl-badge",
+                            "id": "src/components/components/xpl-badge/xpl-badge.tsx::BadgePalette",
+                            "referenceLocation": "BadgePalette"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Color palette for the trailing number badge. Only applies when `badge` is set.\nDefaults to `purple` \u2014 the standard number-badge color in the Figma XPL-Tab Group spec."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "badge-variant",
+                "defaultValue": "'purple'"
+            },
             "disabled": {
                 "type": "boolean",
                 "mutable": false,
@@ -145,7 +200,7 @@ export class Tab {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Optional icon name for segment-style pills (`type=\"segment\"` on parent `xpl-tabs`). Ignored for default tabs."
+                    "text": "Optional leading icon name (from the Apollo icon set). Rendered in both underline\n(`type=\"tabs\"`) and segment (`type=\"segment\"`) tabs."
                 },
                 "getter": false,
                 "setter": false,
@@ -164,7 +219,7 @@ export class Tab {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Icon position for segment-style pills."
+                    "text": "Icon position relative to the label. Applies to both underline and segment tabs."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -5,15 +5,14 @@ export class TabPanel {
         this.selected = false;
     }
     render() {
-        var _a;
         const groupId = getTabGroupInstanceId(this.el);
-        const t = (_a = this.target) !== null && _a !== void 0 ? _a : '';
+        const t = this.target ?? '';
         const panelId = tabPanelDomId(groupId, t);
         const labelledBy = tabTriggerId(groupId, t);
-        return (h(Host, { key: 'd1d6b910b84ee0aa483d605d10aaabf662d2efcf', "aria-labelledby": labelledBy, class: {
+        return (h(Host, { key: 'b92d723fe68be63d6438fab8ae8f93a06122c29a', "aria-labelledby": labelledBy, class: {
                 'xpl-tab-panel': true,
                 'xpl-tab-panel--selected': this.selected,
-            }, id: panelId, role: "tabpanel" }, h("slot", { key: '1fe282e7372fb0353cf1c32db841269aaa3c44a9' })));
+            }, id: panelId, role: "tabpanel" }, h("slot", { key: 'e18aeb92b7082c0c2e809396570b43ac41c34f87' })));
     }
     static get is() { return "xpl-tab-panel"; }
     static get properties() {

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

@@ -0,0 +1,7 @@
+import { Host, h } from "@stencil/core";
+export class XplTableBody {
+    render() {
+        return (h(Host, { key: '5a82de617cad4d37dace81ad6a636db1e3a944df', class: "xpl-table-body", role: "rowgroup" }, h("slot", { key: 'd141e2e041789142eb69c6b3453b25523e4ecf59' })));
+    }
+    static get is() { return "xpl-table-body"; }
+}

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

@@ -0,0 +1,7 @@
+import { Host, h } from "@stencil/core";
+export class XplTableFooter {
+    render() {
+        return (h(Host, { key: '7c0c20a91c48433b21a8a83094d614de532b317b', class: "xpl-table-footer", role: "rowgroup" }, h("slot", { key: 'aebc40fc1edc9ced7b2420303d3a38897c24939f' })));
+    }
+    static get is() { return "xpl-table-footer"; }
+}

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

@@ -0,0 +1,37 @@
+import { Host, h } from "@stencil/core";
+export class XplTableFooterCell {
+    constructor() {
+        this.align = 'left';
+    }
+    render() {
+        return (h(Host, { key: '331e85728bbd31aa7cde4fe169874879518b92bd', class: {
+                'xpl-table-footer-cell': true,
+                [`xpl-table-footer-cell--align-${this.align}`]: true,
+            }, role: "gridcell" }, h("slot", { key: '29f074c9c81b9cf38bca0ef3eb92a54a408b2436' })));
+    }
+    static get is() { return "xpl-table-footer-cell"; }
+    static get properties() {
+        return {
+            "align": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'center' | 'left' | 'right'",
+                    "resolved": "\"center\" | \"left\" | \"right\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Horizontal alignment of footer cell content."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "align",
+                "defaultValue": "'left'"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,78 @@
+import { Host, h } from "@stencil/core";
+export class XplTableRow {
+    constructor() {
+        this.disabled = false;
+        this.selected = false;
+    }
+    render() {
+        return (h(Host, { key: '506e56b764d82707482e58a0715fd342219ef7d9', class: {
+                'xpl-table-row': true,
+                'xpl-table-row--disabled': this.disabled,
+                'xpl-table-row--selected': this.selected,
+            }, role: "row" }, h("slot", { key: 'db534bcb1e92bb92441476542c0eaa920f6914e8' })));
+    }
+    static get is() { return "xpl-table-row"; }
+    static get properties() {
+        return {
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the row and its cells are disabled."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "rowId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Stable identifier for selection."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "row-id"
+            },
+            "selected": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the row is visually selected."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "selected",
+                "defaultValue": "false"
+            }
+        };
+    }
+}