Skip to content

1.6.0: widgets, live activity capsule, command bar

Choose a tag to compare

@xhunn xhunn released this 04 Nov 09:56
bce39e9

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 .wgrid and 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 (.skel copy), error with Retry, empty grid and
    reduced-motion states. Accent budget: charts in a tile draw on the text ladder; only the one focus widget keeps
    the accent.
  • Edit mode. Rotation-only jiggle, remove with Undo, aria-pressed size 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 .wstack with a visible pause; the timer stops on hover, focus and under reduced motion.
  • Gallery drawer content .wgal for adding widgets.
  • React parts widget-grid, smart-stack, widget-gallery and the pure widget-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 .lact and 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, +n running. Ring and
    bar are --text-1 while running, --success done, --danger on 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-state holds 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 (React command-bar + command-state). Meta+K / Ctrl+K opens actions,
    go-to and recent items filtered as you type; with onAsk, 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-busy while 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; keyframes cmdk-in,
    cmdk-blink.
  • Three-column top bar. .tbar is 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 .tbar that holds a .searchbox
    (including 1.3 consoles built on ConsoleTopbar with ConsoleSearch) 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 .udot and .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 --bg ink on the count.