Andreas Reinhold / reiniandClaude Sonnet 5
1f9384efdf
Plan step 36 (navigation group, third and last stream): <x-tabs>'s and <x-tab>'s class lists move into resources/css/components/tabs.css, one commit for both since they share it. Root data-md-tabs; the bar data-md-tabs-bar with data-md-variant/-stacked/-scrollable, holding data-md-tab buttons (data-md-tab-content, the new data-md-tab-label wrapping the label and badge, data-md-tab-indicator); the panel data-md-tab-panel. The server-rendered hidden panel (N-05), the 52dp scrollable offset (N-10), the indicator's 2dp inset (N-18), the ring moved 2px out (N-20) and aria-current sharing the active colour (N-21) already matched the audit; only hooks, units and layer changed. Sizes (48/64px tab height, 90px minimum width) stay px; spacing goes through the measurement tokens where the value matches one (the icon-label and label-badge gaps, the panel's top padding). Imports icon.css and badge.css for what the view renders. Hooks renamed: data-tabs-bar, data-tab, data-tab-content, data-tab-indicator, data-scrollable, data-stacked and the bar's data-variant to data-md-*, updated in tabs.js (dataset.tab -> dataset.mdTab), section-nav.blade.php (which reuses the tab bar's hooks under its own, still-Tailwind, markup), tests/Feature/Components/TabsTest.php and tests/Browser/BarsTest.php. Added the owed browser test: a tab panel never flashes before Alpine boots, read from an inline script that runs while the page is still parsing, well before Alpine's own script (docs/plans/material-3-browser-tests.md). This closes plan step 36: every navigation-group component is now data-md-* and Tailwind-free; tailwind.css's Navigation block keeps only navigation.css (the bar and rail, out of this batch's scope). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
57 lines
2.0 KiB
JavaScript
57 lines
2.0 KiB
JavaScript
/**
|
|
* `materialTabs`: the behaviour of `<x-tabs>` — WAI-ARIA's tabs with automatic activation.
|
|
*
|
|
* The arrow keys move along the tablist (mirrored on a right-to-left page), Home and End jump to
|
|
* its ends, disabled tabs are passed over, focus follows the choice, and only the chosen tab is in
|
|
* the Tab order. A change of tab runs in a view transition, which moves the active indicator from
|
|
* the old tab to the new one and cross-fades the panels — unless the visitor prefers reduced motion
|
|
* or the browser has no view transitions, when it simply changes.
|
|
*/
|
|
const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)')
|
|
|
|
document.addEventListener('alpine:init', () => {
|
|
window.Alpine.data('materialTabs', () => ({
|
|
tabs() {
|
|
return [...this.$refs.bar.querySelectorAll('[role="tab"]:not(:disabled)')]
|
|
},
|
|
|
|
choose(name, focus = false) {
|
|
const apply = () => {
|
|
this.selected = name
|
|
|
|
return this.$nextTick()
|
|
}
|
|
|
|
if (this.selected === name || reducedMotion.matches || !document.startViewTransition) {
|
|
apply()
|
|
} else {
|
|
document.startViewTransition(apply)
|
|
}
|
|
|
|
if (focus) {
|
|
this.$refs.bar.querySelector(`[data-md-tab="${CSS.escape(name)}"]`)?.focus()
|
|
}
|
|
},
|
|
|
|
step(by) {
|
|
const tabs = this.tabs()
|
|
const rtl = getComputedStyle(this.$refs.bar).direction === 'rtl'
|
|
const at = tabs.findIndex((tab) => tab.dataset.mdTab === this.selected)
|
|
const next = tabs[(at + (rtl ? -by : by) + tabs.length) % tabs.length]
|
|
|
|
if (next) {
|
|
this.choose(next.dataset.mdTab, true)
|
|
}
|
|
},
|
|
|
|
edge(last) {
|
|
const tabs = this.tabs()
|
|
const tab = last ? tabs.at(-1) : tabs[0]
|
|
|
|
if (tab) {
|
|
this.choose(tab.dataset.mdTab, true)
|
|
}
|
|
},
|
|
}))
|
|
})
|