feat(ui): rewrite Tabs onto wire classes with URL sync and roving focus
Tabs was the only component in the library styled with Tailwind utilities, so it could not be themed like the rest and assumed Tailwind was present. It also fired raw CustomEvents instead of declaring outputs, and set a roving tabindex with no keydown handler at all -- which left every inactive tab unreachable by Tab while the arrows did nothing. It now uses wire-* classes and a local style block, declares change and select outputs, and opts into the roving runtime. mode=url mirrors the selection into a query parameter via pushState. Back and forward are handled in the runtime, which activates the matching tab rather than assigning to component state: a popstate listener writing state would be writing after the client function returned, and that write is dropped. The round trip is marked so the component does not push a second history entry for a navigation that came from history. Also anchors Nav submenus so the viewport clamp can pull them back on screen. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5
@@ -253,6 +253,80 @@ const DATATABLE_ROWS =
|
||||
'[{"id": 1, "name": "Northwind", "plan": "Scale", "owner": "A. Okafor", "seats": 6, "status": "Active", "statusHtml": "<span class=\\"showcase-pill showcase-pill--success\\">Active</span>"}, {"id": 2, "name": "Acme Industrial", "plan": "Team", "owner": "R. Silva", "seats": 13, "status": "Trial", "statusHtml": "<span class=\\"showcase-pill showcase-pill--info\\">Trial</span>"}, {"id": 3, "name": "Globex", "plan": "Enterprise", "owner": "M. Chen", "seats": 20, "status": "Past due", "statusHtml": "<span class=\\"showcase-pill showcase-pill--danger\\">Past due</span>"}, {"id": 4, "name": "Initech", "plan": "Starter", "owner": "J. Dubois", "seats": 27, "status": "Active", "statusHtml": "<span class=\\"showcase-pill showcase-pill--success\\">Active</span>"}, {"id": 5, "name": "Umbrella", "plan": "Scale", "owner": "P. Novak", "seats": 34, "status": "Trial", "statusHtml": "<span class=\\"showcase-pill showcase-pill--info\\">Trial</span>"}, {"id": 6, "name": "Stark Labs", "plan": "Team", "owner": "A. Okafor", "seats": 41, "status": "Past due", "statusHtml": "<span class=\\"showcase-pill showcase-pill--danger\\">Past due</span>"}, {"id": 7, "name": "Wayne Foods", "plan": "Enterprise", "owner": "R. Silva", "seats": 48, "status": "Active", "statusHtml": "<span class=\\"showcase-pill showcase-pill--success\\">Active</span>"}, {"id": 8, "name": "Soylent", "plan": "Starter", "owner": "M. Chen", "seats": 55, "status": "Trial", "statusHtml": "<span class=\\"showcase-pill showcase-pill--info\\">Trial</span>"}, {"id": 9, "name": "Hooli", "plan": "Scale", "owner": "J. Dubois", "seats": 62, "status": "Past due", "statusHtml": "<span class=\\"showcase-pill showcase-pill--danger\\">Past due</span>"}, {"id": 10, "name": "Vehement", "plan": "Team", "owner": "P. Novak", "seats": 69, "status": "Active", "statusHtml": "<span class=\\"showcase-pill showcase-pill--success\\">Active</span>"}, {"id": 11, "name": "Massive Dynamic", "plan": "Enterprise", "owner": "A. Okafor", "seats": 76, "status": "Trial", "statusHtml": "<span class=\\"showcase-pill showcase-pill--info\\">Trial</span>"}, {"id": 12, "name": "Cyberdyne", "plan": "Starter", "owner": "R. Silva", "seats": 83, "status": "Past due", "statusHtml": "<span class=\\"showcase-pill showcase-pill--danger\\">Past due</span>"}, {"id": 13, "name": "Tyrell", "plan": "Scale", "owner": "M. Chen", "seats": 90, "status": "Active", "statusHtml": "<span class=\\"showcase-pill showcase-pill--success\\">Active</span>"}, {"id": 14, "name": "Aperture", "plan": "Team", "owner": "J. Dubois", "seats": 97, "status": "Trial", "statusHtml": "<span class=\\"showcase-pill showcase-pill--info\\">Trial</span>"}, {"id": 15, "name": "Black Mesa", "plan": "Enterprise", "owner": "P. Novak", "seats": 104, "status": "Past due", "statusHtml": "<span class=\\"showcase-pill showcase-pill--danger\\">Past due</span>"}]';
|
||||
|
||||
export const componentProfiles = {
|
||||
Tabs: {
|
||||
demos: [
|
||||
standard(
|
||||
"Panels and arrow keys",
|
||||
"Selecting a tab swaps the panel with a short transition. Arrow keys move between tabs, Home and End jump to the ends, and only the selected tab is in the tab order.",
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Overview",
|
||||
value: "overview",
|
||||
title: "Overview",
|
||||
description: "What the product does and who it is for.",
|
||||
},
|
||||
{
|
||||
label: "Pricing",
|
||||
value: "pricing",
|
||||
title: "Pricing",
|
||||
description: "Plans, limits and what counts as a seat.",
|
||||
badge: "New",
|
||||
},
|
||||
{
|
||||
label: "Support",
|
||||
value: "support",
|
||||
title: "Support",
|
||||
description: "Response times and escalation paths.",
|
||||
},
|
||||
],
|
||||
active: "overview",
|
||||
},
|
||||
),
|
||||
advanced(
|
||||
"Mirrored into the URL",
|
||||
"With mode=url the selection is written to a query parameter using pushState, so the panel swaps without a page load, the tab survives a reload, and the back button steps through the tabs you visited.",
|
||||
{
|
||||
items: [
|
||||
{ label: "Account", value: "account", description: "Profile and credentials." },
|
||||
{ label: "Billing", value: "billing", description: "Invoices and payment method." },
|
||||
{ label: "Team", value: "team", description: "Members and their roles." },
|
||||
],
|
||||
active: "account",
|
||||
mode: "url",
|
||||
param: "tab",
|
||||
},
|
||||
),
|
||||
standard(
|
||||
"Vertical with icons",
|
||||
"Vertical orientation switches the arrow keys to up and down, and collapses back to a scrollable strip on a phone.",
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "General",
|
||||
value: "general",
|
||||
icon: "icon-[lucide--settings]",
|
||||
description: "Everyday preferences.",
|
||||
},
|
||||
{
|
||||
label: "Security",
|
||||
value: "security",
|
||||
icon: "icon-[lucide--shield]",
|
||||
description: "Sessions and two-factor.",
|
||||
},
|
||||
{
|
||||
label: "Advanced",
|
||||
value: "advanced",
|
||||
icon: "icon-[lucide--flask-conical]",
|
||||
description: "Experimental toggles.",
|
||||
},
|
||||
],
|
||||
active: "security",
|
||||
orientation: "vertical",
|
||||
},
|
||||
),
|
||||
],
|
||||
},
|
||||
Nav: {
|
||||
demos: [
|
||||
standard(
|
||||
|
||||
Reference in New Issue
Block a user