Files

T

ClintchizandClaude Opus 5 b4d3cb3695 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>

2026-08-07 17:18:00 +05:30

app

chore(ui): wire color and size into the new navigation components

2026-08-07 16:57:10 +05:30

public

release: WRNexusJS 0.7.0

2026-08-01 10:04:42 +05:30

scripts

feat(ui): rewrite Tabs onto wire classes with URL sync and roving focus

2026-08-07 17:18:00 +05:30

test

release: WRNexusJS 0.8.0

2026-08-02 23:18:51 +05:30

package.json

release: WRNexusJS 0.8.0

2026-08-02 23:18:51 +05:30

README.md

Pre Release New Changes

2026-07-31 16:30:13 +05:30

showcase-manifest.json

chore(ui): wire color and size into the new navigation components

2026-08-07 16:57:10 +05:30

tsconfig.json

release: WRNexusJS 0.3.5

2026-07-24 12:46:44 +05:30

wrnexus.config.ts

release: WRNexusJS 0.3.5

2026-07-24 12:46:44 +05:30

README.md

WRNexus UI component showcase

The showcase is generated from packages/ui/component-reference.json. It stays synchronized with the current component source rather than maintaining a second hand-written catalog.

bun run --cwd examples/component-showcase dev

Open http://localhost:3000.

Detail-page coverage

Every current UI component receives a dedicated detail page with:

an interactive server-rendered playground for every declared prop
typed boolean, number, array, and object controls
public component-tag syntax with single-quoted dynamic WRN expressions
component-specific production use cases when a profile exists
responsive fallback examples for every remaining component
copyable .wrn source beside every live preview
complete props, slots, and explicitly declared public events
live event.detail output for interactive components
previous and next component navigation

The specialized profiles for new and recently repaired components live in:

scripts/showcase-profiles.mjs

Update that file to add product-quality examples or public enum options. Do not infer allowed prop values from implementation comparisons; unrestricted values such as icon classes, labels, IDs, and URLs must remain free-form inputs.

Generated files

The generator creates:

app/layouts/showcase.wrn
app/layouts/document.wrn
app/pages/*.wrn
app/pages/components/*.wrn
showcase-manifest.json

showcase-manifest.json records component, category, demo, prop, slot, and event coverage and is used by the test suite. Do not hand-edit generated pages.

Validation

After changing UI components, metadata, profiles, the playground, or showcase styles, run:

bun run scripts/generate-ui-component-reference.mjs
bun run --cwd examples/component-showcase generate
bun run --cwd examples/component-showcase test
bun run --cwd examples/component-showcase build

The complete local check is:

bun run --cwd examples/component-showcase check

Review representative component pages at mobile, tablet, and desktop widths and in light, dark, keyboard-only, and reduced-motion modes before publishing.