@xplortech/apollo-core 2.6.0 → 2.7.0

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

@@ -1,21 +1,139 @@
 import { Host, h } from "@stencil/core";
+import { getTabGroupInstanceId, tabPanelDomId, tabTriggerId, } from "../../utils/tab-a11y-ids";
 export class Tab {
     constructor() {
+        this.disabled = false;
+        this.fullWidth = false;
+        this.groupDisabled = false;
+        this.iconPosition = 'start';
         this.selected = false;
+        this.variant = 'tabs';
         this.handleTabClick = () => {
+            if (this.effectivelyDisabled) {
+                return;
+            }
             this.tabChange.emit(this.target);
         };
     }
+    async getFocusableElement() {
+        if (this.isSegment) {
+            return this.el.querySelector('xpl-button button');
+        }
+        return this.el.querySelector('.xpl-tab__button');
+    }
+    async setTabIndex(value) {
+        const btn = await this.getFocusableElement();
+        if (btn) {
+            btn.tabIndex = value;
+        }
+    }
+    async focusTrigger() {
+        const btn = await this.getFocusableElement();
+        btn === null || btn === void 0 ? void 0 : btn.focus();
+    }
+    get a11yIds() {
+        var _a;
+        const groupId = getTabGroupInstanceId(this.el);
+        const t = (_a = this.target) !== null && _a !== void 0 ? _a : '';
+        return {
+            panelId: tabPanelDomId(groupId, t),
+            triggerId: tabTriggerId(groupId, t),
+        };
+    }
+    get effectivelyDisabled() {
+        return this.disabled || this.groupDisabled;
+    }
+    get isSegment() {
+        return this.variant === 'segment';
+    }
     render() {
-        return (h(Host, { key: '1450ace89b692fe55c0d72baf719fc523b3f5cdd', class: {
-                'xpl-tab': true,
-                'xpl-tab--selected': this.selected,
-            } }, h("button", { key: '6bd68b6eb3cf05bbd21b17cbd6fba58ba2ca3a7c', onClick: this.handleTabClick, class: "xpl-tab__button", role: "tab", "aria-controls": this.target }, h("slot", { key: '5d54ca80925a7dd6ace6486e4dd6978d268ad584' }))));
+        var _a;
+        const segment = this.isSegment;
+        const { panelId, triggerId } = this.a11yIds;
+        const ariaSelected = this.selected ? 'true' : 'false';
+        const hostClass = {
+            'xpl-tab': true,
+            'xpl-tab--selected': this.selected,
+            'xpl-tab--segment': segment,
+            'xpl-tab--disabled': this.effectivelyDisabled,
+        };
+        if (segment) {
+            return (h(Host, { class: hostClass }, h("xpl-button", { controlAttrs: {
+                    id: triggerId,
+                    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))));
+        }
+        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))));
     }
     static get is() { return "xpl-tab"; }
     static get properties() {
         return {
-            "target": {
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables this tab (pill or underline)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "fullWidth": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": "Do not set directly; use `full-width` on `xpl-tabs` instead."
+                        }],
+                    "text": "Whether the tab should take full width (set by parent `xpl-tabs` when fullWidth is true)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "full-width",
+                "defaultValue": "false"
+            },
+            "groupDisabled": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set when the parent `xpl-tabs` has `disabled` (group-disabled)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "data-group-disabled",
+                "defaultValue": "false"
+            },
+            "icon": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -24,15 +142,35 @@ export class Tab {
                     "references": {}
                 },
                 "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional icon name for segment-style pills (`type=\"segment\"` on parent `xpl-tabs`). Ignored for default tabs."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "icon"
+            },
+            "iconPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'start' | 'end'",
+                    "resolved": "\"end\" | \"start\"",
+                    "references": {}
+                },
+                "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The target of the tab, required for the tab to be selected"
+                    "text": "Icon position for segment-style pills."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "target"
+                "attribute": "icon-position",
+                "defaultValue": "'start'"
             },
             "selected": {
                 "type": "boolean",
@@ -53,6 +191,48 @@ export class Tab {
                 "reflect": false,
                 "attribute": "selected",
                 "defaultValue": "false"
+            },
+            "target": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The target of the tab, required for the tab to be selected"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "target"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'tabs' | 'segment'",
+                    "resolved": "\"segment\" | \"tabs\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": "Do not set directly; use `type` on `xpl-tabs` instead."
+                        }],
+                    "text": "Visual variant: 'tabs' for underline tabs, 'segment' for pill controls.\nSet by the parent `xpl-tabs` component based on its `type` prop."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'tabs'"
             }
         };
     }
@@ -65,7 +245,7 @@ export class Tab {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Event that emits the target of the selected tab"
+                    "text": "Emitted when this tab is activated (if not disabled). The event `detail` is this tab\u2019s `target` string.\nParent `xpl-tabs` listens and updates selection; use `tabChange` on `xpl-tabs` for the group-level event."
                 },
                 "complexType": {
                     "original": "string",
@@ -74,4 +254,77 @@ export class Tab {
                 }
             }];
     }
+    static get methods() {
+        return {
+            "getFocusableElement": {
+                "complexType": {
+                    "signature": "() => Promise<HTMLButtonElement | null>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLButtonElement": {
+                            "location": "global",
+                            "id": "global::HTMLButtonElement"
+                        }
+                    },
+                    "return": "Promise<HTMLButtonElement>"
+                },
+                "docs": {
+                    "text": "Returns the focusable button element for this tab (underline `<button>` or segment `xpl-button` inner button).",
+                    "tags": [{
+                            "name": "internal",
+                            "text": "Used by xpl-tabs for roving tabindex and keyboard navigation."
+                        }]
+                }
+            },
+            "setTabIndex": {
+                "complexType": {
+                    "signature": "(value: number) => Promise<void>",
+                    "parameters": [{
+                            "name": "value",
+                            "type": "number",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets the tabindex on the focusable button element.",
+                    "tags": [{
+                            "name": "internal",
+                            "text": "Used by xpl-tabs for roving tabindex."
+                        }]
+                }
+            },
+            "focusTrigger": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Focuses the tab's trigger button.",
+                    "tags": [{
+                            "name": "internal",
+                            "text": "Used by xpl-tabs for keyboard navigation."
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
 }

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

@@ -1,56 +1,63 @@
 import { Host, h } from "@stencil/core";
+import { getTabGroupInstanceId, tabPanelDomId, tabTriggerId, } from "../../utils/tab-a11y-ids";
 export class TabPanel {
     constructor() {
         this.selected = false;
     }
     render() {
-        return (h(Host, { key: '7266510f84437902c1ecfdfe19abd6f1a9ac09e2', class: {
+        var _a;
+        const groupId = getTabGroupInstanceId(this.el);
+        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: {
                 'xpl-tab-panel': true,
                 'xpl-tab-panel--selected': this.selected,
-            }, role: "tabpanel", "aria-labelledby": this.target }, h("slot", { key: '7aa5c5633d7f06f521699f30539dcb505703db64' })));
+            }, id: panelId, role: "tabpanel" }, h("slot", { key: '75b3da77cddb6e0a83b7cf41aa5e0aa30259b728' })));
     }
     static get is() { return "xpl-tab-panel"; }
     static get properties() {
         return {
-            "target": {
-                "type": "string",
+            "selected": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The target of the tab, required for the tab to be selected"
+                    "text": "Whether the panel is selected"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "target"
+                "attribute": "selected",
+                "defaultValue": "false"
             },
-            "selected": {
-                "type": "boolean",
+            "target": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Whether the panel is selected"
+                    "text": "The target of the tab, required for the tab to be selected"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "selected",
-                "defaultValue": "false"
+                "attribute": "target"
             }
         };
     }
+    static get elementRef() { return "el"; }
 }