@xplortech/apollo-core 2.6.0 → 2.7.1

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: '4c4a86dda347872ea6b1c4569f8424bd6cac7bd9', "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: '30c9ae6f3748dc02a73da7535443266b1043d61b' })));
     }
     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"; }
 }

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

@@ -132,14 +132,14 @@ export class Table {
             (!this.sortTypeArray || this.sortTypeArray.length !== this.columns.length)) {
             this.sortTypeArray = this.columns.map(() => null);
         }
-        return (h(Host, { key: 'eb52da2b523707a53c0bb414dda75197907e71af' }, h("div", { key: '0f5bf430701ad905c4d918ee9039db52c19eb01c', class: "xpl-table-container", onScroll: this.onScroll, ref: (el) => {
+        return (h(Host, { key: '10b0bfd08e28fada9a2c8509d405c5314cce1689' }, h("div", { key: '8e5b4fe928618b175a58f858f6cfd65f4bd29c53', class: "xpl-table-container", onScroll: this.onScroll, ref: (el) => {
                 this.container = el;
-            } }, h("table", { key: 'bdbb2c47a7bf119b46417118f334ba861960313d', class: {
+            } }, h("table", { key: 'a6df646737b9a1d5e67cebe9eaad41911ab606ca', 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: 'a868be75efee1ec20d4845e8219a49ab1fae8aca' }, this.columns.map((column, i) => {
+            } }, this.columns && (h("thead", { key: '5f14766107d69f26b865f63c323d417f43260267' }, 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 Table {
                     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: '8324eda16235ba66f2aa3bebc073a10a91a32518' }, this.rowData.map((row, rowNum) => (h("tr", { class: this.selected && this.selected[rowNum]
+        }))), h("tbody", { key: 'b13ca1d1a738de189d4f040dfd309187671b341d' }, 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: 'd3c55c0585359a28a51a8b0196c4e9841bc86919' }, 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: '5d45854ba21aa7e0bfaaf3b8a537e0c121538ac9' }, this.rowFooterData.map((row) => (h("tr", null, row.map((cell) => (h("td", null, h("div", { innerHTML: cell })))))))))))));
     }
     static get is() { return "xpl-table"; }
     static get properties() {

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

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

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

@@ -0,0 +1,31 @@
+import { renderTabsStoryMarkup, segmentControlDefaultArgs, segmentControlStoryArgTypes, tabsPlainDomSegmentStoryHtml, } from "./tabs.shared";
+export default {
+    title: 'Components/Segment Control',
+    component: 'xpl-tabs',
+    parameters: {
+        actions: {
+            handles: ['tabChange'],
+        },
+        docs: {
+            description: {
+                component: '**Segment Control** is `xpl-tabs` with `type="segment"`. For underline tabs see **Components/Tabs**.',
+            },
+        },
+    },
+    argTypes: segmentControlStoryArgTypes,
+};
+export const SegmentControl = (args, context) => renderTabsStoryMarkup(args, context !== null && context !== void 0 ? context : {});
+SegmentControl.args = segmentControlDefaultArgs;
+SegmentControl.parameters = {
+    layout: 'padded',
+    'web-component': {
+        render: renderTabsStoryMarkup(segmentControlDefaultArgs),
+    },
+    html: {
+        render: tabsPlainDomSegmentStoryHtml,
+    },
+    design: {
+        type: 'figma',
+        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=6405-96230',
+    },
+};

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

@@ -0,0 +1,156 @@
+export function escapeHtmlAttr(value) {
+    return value.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;');
+}
+export function clampTabCount(n) {
+    if (Number.isNaN(n) || n < 1) {
+        return 1;
+    }
+    return Math.min(200, Math.floor(n));
+}
+export function coerceTabsStoryValue(args) {
+    var _a;
+    const n = clampTabCount(args.tabCount);
+    const targets = Array.from({ length: n }, (_, i) => `tab${i}`);
+    const valueTrim = args.value.trim();
+    if (!valueTrim) {
+        return '';
+    }
+    if (targets.includes(valueTrim)) {
+        return valueTrim;
+    }
+    return (_a = targets[0]) !== null && _a !== void 0 ? _a : '';
+}
+export function buildTabsMarkup(args) {
+    const n = clampTabCount(args.tabCount);
+    const targets = Array.from({ length: n }, (_, i) => `tab${i}`);
+    const hostAttrs = [];
+    if (args.type === 'segment') {
+        hostAttrs.push('type="segment"');
+    }
+    if (args.disabled) {
+        hostAttrs.push('disabled');
+    }
+    if (args.fullWidth) {
+        hostAttrs.push('full-width');
+    }
+    const valueTrim = args.value.trim();
+    if (valueTrim && targets.includes(valueTrim)) {
+        hostAttrs.push(`value="${escapeHtmlAttr(valueTrim)}"`);
+    }
+    const open = hostAttrs.length ? `<xpl-tabs ${hostAttrs.join(' ')}>` : '<xpl-tabs>';
+    const lines = [open];
+    const firstTabParts = ['slot="heading"', 'target="tab0"'];
+    if (args.tabDisabled) {
+        firstTabParts.push('disabled');
+    }
+    if (args.type === 'segment') {
+        const icon = args.icon.trim();
+        if (icon) {
+            firstTabParts.push(`icon="${escapeHtmlAttr(icon)}"`);
+        }
+        if (args.iconPosition !== 'start') {
+            firstTabParts.push(`icon-position="${args.iconPosition}"`);
+        }
+    }
+    const firstHeading = args.type === 'tabs' ? 'Tab' : 'Segment';
+    lines.push(`    <xpl-tab ${firstTabParts.join(' ')}>${firstHeading} 1</xpl-tab>`);
+    for (let i = 1; i < n; i += 1) {
+        lines.push(`    <xpl-tab slot="heading" target="tab${i}">${args.type === 'tabs' ? 'Tab' : 'Segment'} ${i + 1}</xpl-tab>`);
+    }
+    for (let i = 0; i < n; i += 1) {
+        lines.push(`    <xpl-tab-panel slot="panel" target="tab${i}">Content for ${args.type === 'tabs' ? 'tab' : 'segment'} ${i + 1}</xpl-tab-panel>`);
+    }
+    lines.push('</xpl-tabs>');
+    return lines.join('\n');
+}
+export function renderTabsStoryMarkup(args, context = {}) {
+    var _a;
+    const value = coerceTabsStoryValue(args);
+    if (value !== args.value) {
+        (_a = context.updateArgs) === null || _a === void 0 ? void 0 : _a.call(context, { value });
+    }
+    return buildTabsMarkup(Object.assign(Object.assign({}, args), { value }));
+}
+export const tabsPlainDomUnderlineStoryHtml = `<---- Non-interactive plain DOM (tabs.css BEM). Not the <xpl-tabs> API; use the Web Component tab for that. Ids mirror the scoped pattern (data-tabs-instance-id + target). ---->
+<div class="xpl-tabs" data-tabs-instance-id="xpl-tg-1">
+    <xpl-select class-names="xpl-tabs__mobile-select" selected-values="tab0"></xpl-select>
+    <nav class="xpl-tabs__headings" role="tablist" aria-orientation="horizontal">
+        <div class="xpl-tabs__active-bar"></div>
+        <div class="xpl-tab xpl-tab--selected">
+            <button class="xpl-tab__button" type="button" role="tab" id="xpl-tg-1-tab-tab0" aria-controls="xpl-tg-1-panel-tab0" aria-selected="true">Tab 1</button>
+        </div>
+        <div class="xpl-tab">
+            <button class="xpl-tab__button" type="button" role="tab" id="xpl-tg-1-tab-tab1" aria-controls="xpl-tg-1-panel-tab1" aria-selected="false">Tab 2</button>
+        </div>
+    </nav>
+    <div class="xpl-tabs__panels">
+        <div class="xpl-tab-panel xpl-tab-panel--selected" role="tabpanel" id="xpl-tg-1-panel-tab0" aria-labelledby="xpl-tg-1-tab-tab0">Content for tab 1</div>
+        <div class="xpl-tab-panel" role="tabpanel" id="xpl-tg-1-panel-tab1" aria-labelledby="xpl-tg-1-tab-tab1">Content for tab 2</div>
+    </div>
+</div>`;
+export const tabsPlainDomSegmentStoryHtml = `<---- Segment (type='segment'): Stencil renders xpl-tab.xpl-tab--segment > xpl-button; xpl-tab assigns id, role, and aria-* on the inner native <button>. Plain buttons below only illustrate tablist ↔ tabpanel id wiring (not .xpl-tab__button). ---->
+<div class="xpl-tabs xpl-tabs--segment" data-tabs-instance-id="xpl-tg-2">
+    <xpl-select class-names="xpl-tabs__mobile-select" selected-values="tab0"></xpl-select>
+    <nav class="xpl-tabs__headings" role="tablist" aria-orientation="horizontal">
+        <div class="xpl-tab xpl-tab--segment xpl-tab--selected">
+            <button type="button" role="tab" id="xpl-tg-2-tab-tab0" aria-controls="xpl-tg-2-panel-tab0" aria-selected="true">Segment 1</button>
+        </div>
+        <div class="xpl-tab xpl-tab--segment">
+            <button type="button" role="tab" id="xpl-tg-2-tab-tab1" aria-controls="xpl-tg-2-panel-tab1" aria-selected="false">Segment 2</button>
+        </div>
+    </nav>
+    <div class="xpl-tabs__panels">
+        <div class="xpl-tab-panel xpl-tab-panel--selected" role="tabpanel" id="xpl-tg-2-panel-tab0" aria-labelledby="xpl-tg-2-tab-tab0">Content for segment 1</div>
+        <div class="xpl-tab-panel" role="tabpanel" id="xpl-tg-2-panel-tab1" aria-labelledby="xpl-tg-2-tab-tab1">Content for segment 2</div>
+    </div>
+</div>`;
+export const tabsStoryBaseArgTypes = {
+    type: {
+        options: ['tabs', 'segment'],
+        control: { type: 'select' },
+        description: '`xpl-tabs` — underline (`tabs`) or pills (`segment`).',
+    },
+    disabled: {
+        control: { type: 'boolean' },
+        description: '`xpl-tabs` — disables the group.',
+    },
+    fullWidth: {
+        control: { type: 'boolean' },
+        description: '`xpl-tabs` — full width.',
+    },
+    value: {
+        control: { type: 'text' },
+        description: '`xpl-tabs` — selected `target` (e.g. `tab0`). Must match an existing tab for the current **Tab count**; otherwise it resets to `tab0`. Leave empty for the first tab.',
+    },
+    tabCount: {
+        control: { type: 'number', min: 1, max: 200, step: 1 },
+        description: 'How many tab/panel pairs to show (`tab0` …).',
+    },
+    tabDisabled: {
+        control: { type: 'boolean' },
+        description: 'First `xpl-tab` only — disabled.',
+    },
+    icon: {
+        control: { type: 'text' },
+        description: 'First `xpl-tab` only — icon (segment). Empty = none.',
+    },
+    iconPosition: {
+        options: ['start', 'end'],
+        control: { type: 'radio' },
+        description: 'First `xpl-tab` only — icon position.',
+    },
+};
+const SEGMENT_CATEGORY_XPL_TABS = '01 — xpl-tabs';
+const SEGMENT_CATEGORY_FIRST_TAB = '02 — xpl-tab controls (first tab only for simplicity)';
+export const segmentControlStoryArgTypes = Object.assign(Object.assign({}, tabsStoryBaseArgTypes), { type: Object.assign(Object.assign({}, tabsStoryBaseArgTypes.type), { table: { disable: true } }), disabled: Object.assign(Object.assign({}, tabsStoryBaseArgTypes.disabled), { table: { category: SEGMENT_CATEGORY_XPL_TABS } }), fullWidth: Object.assign(Object.assign({}, tabsStoryBaseArgTypes.fullWidth), { table: { category: SEGMENT_CATEGORY_XPL_TABS } }), value: Object.assign(Object.assign({}, tabsStoryBaseArgTypes.value), { table: { category: SEGMENT_CATEGORY_XPL_TABS } }), tabCount: Object.assign(Object.assign({}, tabsStoryBaseArgTypes.tabCount), { table: { category: SEGMENT_CATEGORY_XPL_TABS } }), tabDisabled: Object.assign(Object.assign({}, tabsStoryBaseArgTypes.tabDisabled), { table: { category: SEGMENT_CATEGORY_FIRST_TAB } }), icon: Object.assign(Object.assign({}, tabsStoryBaseArgTypes.icon), { table: { category: SEGMENT_CATEGORY_FIRST_TAB } }), iconPosition: Object.assign(Object.assign({}, tabsStoryBaseArgTypes.iconPosition), { table: { category: SEGMENT_CATEGORY_FIRST_TAB } }) });
+export const tabsUnderlineDefaultArgs = {
+    type: 'tabs',
+    disabled: false,
+    fullWidth: false,
+    value: 'tab0',
+    tabCount: 2,
+    tabDisabled: false,
+    icon: '',
+    iconPosition: 'start',
+};
+export const segmentControlDefaultArgs = Object.assign(Object.assign({}, tabsUnderlineDefaultArgs), { type: 'segment', icon: 'house-4' });