@a4ui/core 0.10.0 → 0.10.2

package/dist/layout/AppShell.d.ts

@@ -22,8 +22,8 @@ interface AppShellProps extends ParentProps {
  * an optional sidebar slot plus a content column (optional banner + topbar +
  * routed `<main>`). Slot-based and unopinionated about the sidebar — pass
  * your own component via `sidebar` and it manages its own width/collapse.
- * `<main>` is wrapped in `Suspense` + an `ErrorBoundary` (with a ~160ms page
- * cross-fade) so a route chunk failing or still loading never blanks the shell.
+ * `<main>` is wrapped in `Suspense` + an `ErrorBoundary` so a route chunk
+ * failing or still loading never blanks the shell.
  *
  * @example
  * ```tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a4ui/core",
-  "version": "0.10.0",
+  "version": "0.10.2",
   "description": "A4ui — Spatial Glass design system & component library for SolidJS (Kobalte behavior + Tailwind glass tokens + motion).",
   "type": "module",
   "license": "MIT",

package/preset.js

@@ -66,6 +66,31 @@ const glass = plugin(({ addComponents }) => {
         'radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), hsl(var(--primary) / 1), hsl(var(--accent) / 0.55) 42%, transparent 72%)',
     },
 
+    // ---- Field focus/error "bloom" ----
+    // Theme-aware glow for text fields: the colour comes from the theme's --ring
+    // (focus) or --destructive (invalid), so each theme blooms in its own hue.
+    // Applied via the `a4-field` class on inputs/triggers.
+    '.a4-field': {
+      transition: 'box-shadow .16s ease, border-color .16s ease',
+    },
+    '.a4-field:focus, .a4-field:focus-within': {
+      outline: 'none',
+      borderColor: 'hsl(var(--ring))',
+      boxShadow: '0 0 0 3px hsl(var(--ring) / 0.22), 0 0 16px -2px hsl(var(--ring) / 0.55)',
+    },
+    '.a4-field[aria-invalid="true"], .a4-field[data-invalid]': {
+      borderColor: 'hsl(var(--destructive))',
+      boxShadow: '0 0 0 2px hsl(var(--destructive) / 0.18)',
+    },
+    '.a4-field[aria-invalid="true"]:focus, .a4-field[data-invalid]:focus': {
+      outline: 'none',
+      boxShadow: '0 0 0 3px hsl(var(--destructive) / 0.3), 0 0 16px -2px hsl(var(--destructive) / 0.6)',
+    },
+    // Light backgrounds swallow soft glows — bloom a touch stronger there.
+    "[data-theme='light'] .a4-field:focus, [data-theme='light'] .a4-field:focus-within": {
+      boxShadow: '0 0 0 3px hsl(var(--ring) / 0.3), 0 0 18px -2px hsl(var(--ring) / 0.65)',
+    },
+
     // ---- Floating overlay glass (menus, modals, drawers, toasts) ----
     '.bg-glass': {
       background: 'hsl(var(--card) / 0.72)',