Repository navigation
1.6.0: widgets, live activity capsule, command bar
A widget home, a live activity capsule and a command bar, each as CSS recipes, React parts (npx verseva add) and a pure state module, with live specimens at design.verseva.com/widgets. No 1.5 class or token is renamed; two visible changes are listed under Changed and Fixed.
Added
- Widget grid
.wgridand tile.wtile[data-size]. 4 columns, 2 under 1100px, 1 under 560px; S 1x1, M 2x1,
L 2x2, XL 4x2, each tile rendering the view for its fitted size (XL drops to L at 2 columns, L and XL to M at 1).
Glass at--r-lg; hover, focus-visible, press, disabled, loading (.skelcopy), error with Retry, empty grid and
reduced-motion states. Accent budget: charts in a tile draw on the text ladder; only the onefocuswidget keeps
the accent. - Edit mode. Rotation-only jiggle, remove with Undo,
aria-pressedsize buttons (sizes that do not fit stay,
aria-disabled), reorder by drag, a touch handle, Move up and Move down, or Alt+Arrow; 44px hit areas; polite
announcements; Esc leaves. - Smart stack
.wstackwith a visible pause; the timer stops on hover, focus and under reduced motion. - Gallery drawer content
.wgalfor adding widgets. - React parts
widget-grid,smart-stack,widget-galleryand the purewidget-state(npx verseva add widget-grid). - New global classes:
.wgrid,.wgrid-empty,.wgrid-add,.wgrid-undo,.wtile,.wtile-body,.wtile-hd,
.wtile-meta,.wtile-num,.wtile-sub,.wtile-foot,.wtile-rows,.wtile-row,.wtile-val,.wtile-skel,
.wtile-skel-num,.wtile-skel-plot,.wtile-err,.wtile-errline,.wtile-x,.wtile-edit,.wtile-handle,
.wtile-sizes,.wtile-move,.wstack,.wstack-pages,.wstack-page,.wstack-nav,.wstack-dot,
.wstack-pause,.wstack-step,.wgal,.wgal-item,.wgal-icon,.wgal-name,.wgal-sizes. Keyframes:wtile-jiggle. - Live activity capsule
.lactand panel.lact-panel. A glass capsule for long jobs in the top bar's
.tbar-end, before the bell: the running job closest to done with its ring and percent,+nrunning. Ring and
bar are--text-1while running,--successdone,--dangeron error (no accent). The panel lists every job
with its step, bar, Cancel, and Retry on error; a bottom sheet under 900px. Done jobs leave after 6 seconds, never
while the panel is open, and hand off to a notification; errors stay. Polite announcements at start, done, cancel
and 25% steps; failures as alerts. React:npx verseva add live-activity(activity-stateholds the rules).
New global classes:.lact,.lact-wrap,.lact-ring,.lact-track,.lact-arc,.lact-ti,.lact-tx,
.lact-name,.lact-pc,.lact-more,.lact-panel,.lact-list,.lact-item,.lact-top,.lact-bar,
.lact-step,.lact-err,.lact-acts. New keyframes:dc-lact-turn,dc-lact-slide. - Command bar
.cmdk(Reactcommand-bar+command-state). Meta+K / Ctrl+K opens actions,
go-to and recent items filtered as you type; withonAsk, a question becomes an Ask row and the
answer streams in place, with an optional widget preview and Pin to Home. Listbox semantics,
focus trap, Escape returns focus,aria-busywhile streaming and one announcement when done,
no-results and Ask-failure states, a full-height sheet on phone. Contract: "Command bar".
New global classes:.cmdk,.cmdk-ovl,.cmdk-field,.cmdk-input,.cmdk-mode,
.cmdk-kbd,.cmdk-list,.cmdk-group,.cmdk-opt(modifier.ask),.cmdk-label,
.cmdk-hint,.cmdk-empty,.cmdk-ans,.cmdk-q,.cmdk-a,.cmdk-caret,.cmdk-load,
.cmdk-widget,.cmdk-acts,.cmdk-err,.cmdk-ft,.cmdk-trigger,.cmdk-close; keyframescmdk-in,
cmdk-blink. - Three-column top bar.
.tbaris a grid (breadcrumb, centred search, actions) only when it
holds a.searchbox; every other top bar keeps the 1.3 layout.
Changed
- Console top bars with a search now centre it. Every
.tbarthat holds a.searchbox
(including 1.3 consoles built onConsoleTopbarwithConsoleSearch) takes the three-column
layout; on phone the search fills the space the hidden breadcrumb leaves.
Fixed
- Counts and unread dots are neutral (law 3).
.ibtn .num,.ibtn .dot,.notif .udotand.mhint .newdot
painted the accent, out of line with the law 3 budget since 1.4.0 (counts and info badges are neutral). They now
draw on the text ladder:--text-1, with--bgink on the count.