[0froq]

Summary

Menu and Select floating lists now use the lig SiteHeader surface as the library default: hairline (--ui-line), radius 0, no shadow, 11px --ui-font-meta, underline on the highlighted row, and a 5px accent dot in the start gutter.

Select’s old list (muted border, paper halo, accent tint, solid accent row) is gone. Both lists share one rule in overlay.css. Tooltip, dialog, and hover card keep their existing paper halo. Combobox is unchanged.

Language / chrome

/docs/language (en + zh) covers:

• Principles, compressed from the creative-direction profile: coherence over decoration, a restrained surface, aesthetics as a constraint.
• Radius tiers: controls ~2px (--ui-radius), app rows ~8, cards ~10. Floating menus are the control tier as lig draws it: radius 0 and a hairline. 8 and 10 are product tiers, not new tokens.
• Elevation: menu default has no soft shadow.
• One highlight: underline, plus the accent dot for the current row.
• Three fonts, and the .ui / --ui-* bridge.

designStatus

Notes accept ai-draft → reviewed → stable. The docs badge reads the note. Menu and Select are reviewed. Other components stay ai-draft.

What lig can delete

In app/components/SiteHeader.vue, these deep overrides become redundant once this is vendored. Do not delete them in this PR (ui repo only).

Remove the list chrome, row padding, highlight, checked row, and accent-dot rules:

• :deep(.l-menu-list.ui-menu-content), .l-language-select :deep(.ui-select-content) — min-width, padding, border, radius 0, box-shadow: none, 11px meta
• :deep(.l-menu-list .ui-menu-item), .l-language-select :deep(.ui-select-item) — gutter padding, radius 0
• highlighted row rules — background: none and the underline
• .l-language-select :deep(.ui-select-item[data-state='checked']) — no fill, --ui-fg text
• :deep(.l-menu-list [aria-current='page'])::before and the shared dot position rule, including .ui-select-item > [aria-hidden='true']

Keep the header trigger rules. Those are nav chrome, not the floating list: muted meta on .l-menu and .ui-select-trigger, foreground on hover/open, and the responsive .l-menu display.

lig still sets aria-current="page" on the current menu item. The library paints the dot from that attribute. The dot uses inset-inline-start, so it follows dir.

Aesthetic choice

Underline + accent dot is implemented. The previous faint fill and the accent-bar treatment are not left as a second variant.

No open choice on the list surface. Header trigger color (muted until hover/open) stays site-owned.

Verification

pnpm check (lint, typecheck, token contract) passes.

In the docs site, opening Menu and Select shows the shared surface: 1px --ui-line, radius 0, box-shadow: none, 11px Geist Mono, underlined highlight, 5px accent dot. Menu and Select badges read Reviewed; Button stays AI Draft. /docs/language renders the Chrome section.

Menu list: hairline, underline on the highlighted row
Select list: underline and accent dot

_{To show artifacts inline, enable in settings.}

  

[cloudflare-workers-and-pages]

🚀 Deploying Preview to Cloudflare 🚀

Preview Deployments by commit

Status	Deployment URL	Commit	Updated (UTC)	See this deployment's details
Build: Success ✅ View logs ↗	No Preview URL. Enable ↗	0e53fa1	2026-10-24T09:16:49.096Z	View logs ↗