@vegastack/design 0.7.45 → 0.7.46

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vegastack/design",
-  "version": "0.7.45",
+  "version": "0.7.46",
   "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

@@ -374,9 +374,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

@@ -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