Tabs

 1{{#
 2    @name Tabs
 3    @desc Alpine-powered tab set with APG keyboard navigation. Render tab companions in the `tablist` slot and tab-panel companions in the default slot.
 4    @param selected string - Required initial quote-safe tab slug matching one `_tab` and one `_tab-panel` value
 5    @param label string [Tabs] - Accessible label for the tablist
 6    @param class string - Additional classes merged via tw_merge (root element only)
 7    @slot tablist - Tab triggers; render `components/primitives/tab` companions here
 8    @slot default - Tab panels; render `components/primitives/tab-panel` companions here
 9#}}
10{{ _label = label ?? 'Tabs' }}
11{{ _class = 'w-full {class}'
12 | tw_merge }}
13<div
14    class="{{ _class }}"
15    x-data="{
16        selected: '{{ selected }}',
17        tabs: [],
18        refreshTabs() {
19            this.tabs = Array.from(this.$refs.tablist?.querySelectorAll('[role=tab]') ?? []).filter((tab) => {
20                return !tab.hasAttribute('disabled') && tab.getAttribute('aria-disabled') !== 'true';
21            });
22        },
23        selectTab(tab) {
24            if (!tab) return;
25
26            const value = tab.getAttribute('data-tab-value');
27            if (!value) return;
28
29            this.selected = value;
30            this.$nextTick(() => tab.focus());
31        },
32        focusTab(index) {
33            this.refreshTabs();
34            if (!this.tabs.length) return;
35
36            const boundedIndex = (index + this.tabs.length) % this.tabs.length;
37            this.selectTab(this.tabs[boundedIndex]);
38        },
39        focusFirst() { this.focusTab(0); },
40        focusLast() {
41            this.refreshTabs();
42            this.focusTab(this.tabs.length - 1);
43        },
44        focusNext() {
45            this.refreshTabs();
46            const currentIndex = this.tabs.indexOf(document.activeElement);
47            this.focusTab(currentIndex + 1);
48        },
49        focusPrev() {
50            this.refreshTabs();
51            const currentIndex = this.tabs.indexOf(document.activeElement);
52            this.focusTab(currentIndex - 1);
53        }
54    }"
55    x-id="['kern-tab']"
56    x-init="$nextTick(() => {
57        refreshTabs();
58        if (!tabs.some((tab) => tab.getAttribute('data-tab-value') === selected)) {
59            selected = tabs[0]?.getAttribute('data-tab-value') ?? selected;
60        }
61    })"
62>
63    <div
64        class="border-border flex flex-wrap gap-1 border-b"
65        x-ref="tablist"
66        role="tablist"
67        aria-label="{{ _label }}"
68        @keydown.right.prevent="focusNext()"
69        @keydown.left.prevent="focusPrev()"
70        @keydown.home.prevent="focusFirst()"
71        @keydown.end.prevent="focusLast()"
72    >
73        {{ slot:tablist }}
74    </div>
75    <div>
76        {{ slot }}
77    </div>
78</div>