@svadmin/create 0.16.11 → 0.18.0

package/guidance/DESIGN.md

@@ -143,12 +143,23 @@ not a page background. Success, warning, and danger are reserved for semantic
 status and feedback. Consumer themes may replace the primary hue while keeping
 the neutral hierarchy and contrast relationships intact.
 
+- **WCAG 2.2 AA Contrast**: Normal text maintains at least 4.5:1 against its
+  canvas; large text, icons, and focus rings maintain at least 3:1. Enhanced AAA
+  screens target 7:1 for normal text.
+- **Palette Discipline**: Avoid one-note palettes dominated by a single hue
+  family. Functional states (success, warning, destructive) must use distinct
+  chroma and hue angles, never tints of the primary accent.
+
 ## Typography
 
 Use Inter or the consumer's compatible system sans. Product pages use compact
 headings and normal letter spacing. Uppercase table labels, negative tracking,
 and oversized dashboard numerals are not defaults.
 
+- **Tabular Figures**: All data tables, numeric metrics, counters, and
+  timestamps use `tabular-nums` (monospaced figures) to guarantee stable column
+  alignment and avoid visual jitter during live updates.
+
 ## Layout
 
 Use an 8px spacing rhythm with 4px for tight internal alignment. Pages are
@@ -156,6 +167,19 @@ unframed layouts with a stable content width. Cards represent individual
 objects or bounded tools; page sections are not decorative floating cards and
 cards are not nested for visual effect.
 
+### Visual Density Dials
+
+svadmin components support systematic density levels to balance scanning speed
+and operational throughput:
+
+- **Density 8–10 (Dense / Dashboard)**: 2px/4px/8px rhythm with 28px–32px row
+  heights. Used for `AutoTable`, `FilterToolbar`, `RecordDetailDrawer`, and
+  operations work areas.
+- **Density 4–6 (Comfortable / Standard)**: 4px/8px/16px rhythm with 40px–44px
+  control heights. Used for settings forms, account profiles, and overview cards.
+- **Density 1–3 (Spacious / Onboarding)**: 16px/24px/32px rhythm for public
+  portals and introductory workflows.
+
 ## Elevation & Depth
 
 Surfaces use a one-pixel border plus a subtle two-layer shadow. Hover elevation
@@ -163,6 +187,11 @@ may increase slightly for genuinely clickable items, without translation or
 glow. Dialogs and menus receive stronger depth because they are floating
 layers. Dark mode keeps the same hierarchy with low-chroma surfaces.
 
+- **Control Shadow**: `0 1px 2px rgb(15 23 42 / 0.05), 0 0 0 1px rgb(15 23 42 / 0.025)`
+- **Surface Shadow**: `0 1px 2px rgb(15 23 42 / 0.035), 0 1px 3px rgb(15 23 42 / 0.025)`
+- **Surface Hover Shadow**: `0 2px 5px rgb(15 23 42 / 0.055), 0 1px 2px rgb(15 23 42 / 0.035)`
+- **Overlay Shadow**: `0 18px 48px rgb(15 23 42 / 0.14), 0 4px 12px rgb(15 23 42 / 0.08)`
+
 ## Shapes
 
 Controls use 6px radii and bounded surfaces use 8px radii. Pills are limited to
@@ -175,6 +204,24 @@ feedback use shared components and semantic tokens. Layout presets may adjust
 density and composition, but they must not replace component color, typography,
 focus, or elevation with hard-coded values.
 
+
+## Micro-interactions & Motion
+
+Transitions provide clear state confirmation without delaying user action:
+
+- **Timing**: Micro-transitions use 140ms–250ms with `cubic-bezier(0.16, 1, 0.3, 1)`
+  or standard ease-out curves.
+- **Focus Rings**: Operable controls declare `:focus-visible` with a 2px solid
+  ring and a 2px offset.
+- **Accessibility**: All transitions and keyframe animations collapse to 0.01ms
+  when `prefers-reduced-motion: reduce` is active.
+- **Accessible Authentication & OTP**: One-time passwords, 2FA codes, and
+  security tokens must support multi-digit paste distribution, keyboard navigation,
+  and `autocomplete="one-time-code"` without cognitive barriers (WCAG 2.2 AA).
+- **Destructive Action Defenses**: Irreversible operations (such as deleting
+  records or revoking keys) require confirmation with clear loading states and
+  accidental submission defense.
+
 ### Reference responsibilities
 
 The reference stack is layered. It is not a visual mixture:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/create",
-  "version": "0.16.11",
+  "version": "0.18.0",
   "description": "Scaffolding tool for svadmin projects",
   "type": "module",
   "bin": {

package/scaffold-manifest.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@svadmin/core": "^0.42.0",
-    "@svadmin/ui": "^0.58.0",
+    "@svadmin/ui": "^0.60.0",
     "@tanstack/svelte-query": "^6.1.38",
     "highlight.js": "^11.11.1",
     "@lucide/svelte": "^1.31.0"