@vegastack/design 0.7.45 → 0.7.47

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vegastack/design",
-  "version": "0.7.45",
+  "version": "0.7.47",
   "description": "VegaStack design system — cn utility, icon runtime, Tailwind v4 preset, and the vegastack-design CLI (tokens ship separately as @vegastack/design-tokens)",
   "license": "MIT",
   "repository": {
@@ -70,7 +70,7 @@
     "test": "node test/compare.test.mjs && node test/check-updates.test.mjs && node test/skills-install.test.mjs && node test/doctor.test.mjs"
   },
   "dependencies": {
-    "@vegastack/design-tokens": "^0.7.45",
+    "@vegastack/design-tokens": "^0.7.46",
     "clsx": "^2.1.1",
     "tailwind-merge": "^3.6.0",
     "tsconfig-paths": "^4.2.0",

package/skills/vegastack-design-audit/SKILL.md

@@ -72,13 +72,18 @@ rg -n 'style=\{\{' --glob '!components/ui/**'
 ```bash
 rg -n '#[0-9a-fA-F]{3,8}\b|\b(bg|text|border|ring|fill|stroke)-(slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-[0-9]{2,3}\b' --glob '!components/ui/**'
 rg -n 'ring-3\b|ring-\[3px\]|ring-ring/[0-9]+|focus-visible:ring-|shadow-\[0_0_0_' --glob '!components/ui/**'
+rg -n '(focus|focus-visible|focus-within|data-focused|popup-open)[^ "]*:border-(ring|primary|input|destructive|foreground)' --glob '!components/ui/**'
 ```
 
 - a hex literal or a numbered Tailwind palette utility — use a semantic token. **error**
 - **a focus-ring glow** — `ring-3`, `ring-[3px]`, `ring-ring/NN`, `focus-visible:ring-*` or a
-  `0 0 0` box-shadow ring. The system has ONE focus affordance, the global `:focus-visible` outline;
-  text entry tints its border instead. A glow usually means a component was pasted from upstream's
+  `0 0 0` box-shadow ring. The system has ONE focus affordance, `base.css`'s global background
+  tint, text entry included. A glow usually means a component was pasted from upstream's
   docs without the patch. **error**
+- **a focus border** — a border colour under a focus or open-popup variant (`focus:border-ring/70`,
+  `focus-within:border-ring`, `data-popup-open:border-input`, `not-focus:aria-invalid:…`). A border
+  never changes colour on focus or while active (FOC-14); only an invalid field's destructive border
+  shows, in every state. **error**
 - a status FILL used as a text ink on that family's own tint — `bg-destructive/10 text-destructive`
   measures 3.98:1. The readable half is `text-destructive-text`. **error**
 - `text-brand` used as a label — `brand` is a 3:1 marker; labels take `text-brand-text`. **error**

package/skills/vegastack-design-system/SKILL.md

@@ -59,6 +59,11 @@ link` (upstream's set, verbatim). `destructive` is a soft tint, not a solid red
 - **People icons are the round lucide set** — `UserRound`, `UsersRound`, `CircleUserRound` (and
   their `-Plus`/`-Check` kin), never the square-shouldered `User`, `Users` or `CircleUser`, so a
   person reads the same as an `Avatar` everywhere.
+- **A person is always `PersonAvatar`** (from `person-avatar`) — the photo, else initials (one rule,
+  `personInitials`, exported from `person-avatar`) on the person's stored `hue`, else muted. Pass `hue` wherever a
+  person is (`RecordChip` `person`, `BoardCard` `assignee`, `InboxItem` `avatar`, `PropertyPerson`,
+  `SearchableSelect` `itemToAvatar`); never hand-roll `Avatar` + initials for a person, and set a
+  person's own photo with `AvatarPicker`.
 - **Control sizes are upstream's names: `default · xs · sm · lg`**, plus
   `icon · icon-xs · icon-sm · icon-lg` where a square tier exists. The old `md` default is gone, and
   most of the components that are ours dropped their `size` prop entirely and take their height from
@@ -374,9 +379,11 @@ contract.
 **Don't**
 
 - Hardcode a hex, a px value, or a raw Tailwind palette class (`bg-neutral-900`, `text-red-500`).
-- Add a focus ring, outline or glow. No focus rings anywhere, Tabs included: `base.css` paints a subtle
-  background tint on `:focus-visible` and text entry tints its border instead; `ring-3`,
-  `ring-ring/50`, `focus-visible:ring-*` and `focus-visible:outline-*` are rejected by lint.
+- Add a focus ring, outline, glow or focus border. No focus rings anywhere, Tabs included: `base.css`
+  paints a subtle background tint on focus, text entry included, and no border changes colour on
+  focus or while a popup is open (FOC-14) — only an invalid field's destructive border, which holds
+  in every state. `ring-3`, `ring-ring/50`, `focus-visible:ring-*`, `focus-visible:outline-*` and
+  any `focus:`/`focus-within:`/`data-popup-open:` border colour are rejected by lint.
 - Leave a neutral hover on a button inside a tinted container — a status `Alert` already gives its
   buttons the family's own hover; don't override it back to `hover:bg-muted`.
 - Set `outline-none` without providing another focus affordance.

package/skills/vegastack-design-system/references/components.md

@@ -3,7 +3,7 @@
 <!-- GENERATED — do not hand-edit. Regenerated from the design system's component contract,
      which is the authority for membership and counts. -->
 
-**128 components**, plus 467 animated-icon items, 13 hooks (`use-animation-replay`, `use-announcer`, `use-async-search`, `use-drag-reorder`, `use-file-drop`, `use-inline-edit`, `use-list-nav`, `use-media-query`, `use-mobile`, `use-modal-inert`, `use-overflow`, `use-platform`, `use-tabs-swipe`), 11 starter blocks (`app-shell-01`, `board-01`, `issue-detail-01`, `command-search-01`, `list-page-01`, `login-01`, `notifications-01`, `review-split-01`, `settings-01`, `settings-02`, `status-pages-01`), 68 chart blocks across 7 families, and 4 data libs (`date-time`, `geo-data`, `emoji-data`, `drag-item`) — 691 registry items in total.
+**130 components**, plus 467 animated-icon items, 13 hooks (`use-animation-replay`, `use-announcer`, `use-async-search`, `use-drag-reorder`, `use-file-drop`, `use-inline-edit`, `use-list-nav`, `use-media-query`, `use-mobile`, `use-modal-inert`, `use-overflow`, `use-platform`, `use-tabs-swipe`), 11 starter blocks (`app-shell-01`, `board-01`, `issue-detail-01`, `command-search-01`, `list-page-01`, `login-01`, `notifications-01`, `review-split-01`, `settings-01`, `settings-02`, `status-pages-01`), 68 chart blocks across 7 families, and 4 data libs (`date-time`, `geo-data`, `emoji-data`, `drag-item`) — 693 registry items in total.
 
 Install any of them with `shadcn add @vegastack/<name>`. Animated icons install as
 `@vegastack/icon-<name>`; the bare name is reserved for components, so a component whose name
@@ -31,7 +31,7 @@ starts with `icon-` is a component and never an icon.
 - **`editable-cell`** — Inline-editable value whose edit mode looks like view — same box, inherited type, no border — with optimistic saves, a delayed spinner, rollback plus a Retry toast on failure, required, multiline, table-cell and heading variants, and a typed text/select/custom editor registry.
 - **`emoji-picker`** — A popover with a quick row, search, a category bar, recents and a category-grouped grid of emoji that returns the selected character via onValueChange (curated set, loaded lazily).
 - **`field`** — The form-field scaffold — label, description, error, legend, separator and choice-card layouts.
-- **`input`** — A styled Base UI input for every text-entry type: a bordered default with the focus border tint (FOC-3), or a borderless ghost title field tinted on hover and focus; sm, default and lg sizes.
+- **`input`** — A styled Base UI input for every text-entry type: a bordered default whose border never moves on focus (FOC-14), or a borderless ghost title field tinted on hover and focus; sm, default and lg sizes.
 - **`input-group`** — An input or textarea with addons — icons, text, buttons, kbd hints and spinners on one surface.
 - **`input-otp`** — A one-time-password field with per-character slots, driven by one hidden input.
 - **`label`** — A styled native label for form controls.
@@ -46,7 +46,7 @@ starts with `icon-` is a component and never an icon.
 - **`select`** — A dropdown for one value — trigger, grouped scrollable popup and item-aligned positioning.
 - **`slider`** — A number or range over a continuous track — horizontal or vertical, any number of thumbs.
 - **`switch`** — An on/off toggle for instant settings — two sizes and a 24px invisible hit area (A11Y-2).
-- **`textarea`** — A styled native textarea that grows with its content, with the text-entry focus border tint (FOC-3).
+- **`textarea`** — A styled native textarea that grows with its content, with the background focus tint and a border that never moves (FOC-14).
 
 ## Display
 
@@ -90,6 +90,7 @@ starts with `icon-` is a component and never an icon.
 - **`filter-bar-managed`** — The controlled nested and/or filter builder — host-injected field grammar (vocabulary + per-type value editors), depth and condition caps, focus-managed removal, and a removable FilterChip summary.
 - **`load-more`** — The shared Load more footer for keyset lists — an outline button that keeps its width while loading, an error line with Try again, and an optional end caption.
 - **`media-card`** — A record as a card — an image, the title, a meta line, a badge and a ⋯ menu — where the whole card is one link.
+- **`person-avatar`** — A person's avatar — the photo, else initials on their hue, else initials on the muted fallback — the one way every people surface draws a person.
 - **`person-hover-card`** — Stacked avatars with a hover card per person — a compact card with a 32px avatar, with the name and muted email beside it — and the rest behind "+N".
 - **`property-list`** — Record-facts rows: an icon+label column beside a value column, as an accessible definition list.
 - **`record-aside`** — The cards of a record page's right rail — titled sections of inline properties, people, linked records and full-width action rows.
@@ -178,3 +179,7 @@ starts with `icon-` is a component and never an icon.
 
 - **`announcement-banner`** — A dismissible one-line announcement — the full-width inverse page-top band (in-content notices use Alert variant=strip).
 - **`terminal`** — A dark mono command block with a phosphor prompt glyph and a composed copy button.
+
+## forms
+
+- **`avatar-picker`** — Upload, change or remove a person's photo — a large PersonAvatar with a busy spinner, Upload/Change photo through the file picker, Remove, and a line for a refused file.