@gunkin/uiify 0.0.25-alpha → 0.0.26-alpha

package/dist/styles/tailwind.css

@@ -41,8 +41,8 @@
   --radius-xs: calc(var(--radius) * 0.4);
   --radius-sm: calc(var(--radius) * 0.8);
   --radius-md: var(--radius);
-  --radius-lg: calc(var(--radius) * 1.2);
-  --radius-xl: calc(var(--radius) * 1.6);
+  --radius-lg: calc(var(--radius) * 1.6);
+  --radius-xl: calc(var(--radius) * 2);
 
   /* Type scale → text-* */
   --text-xs: 0.75rem;

package/dist/styles/tokens.css

@@ -1 +1 @@
-@layer reset;@layer tokens{:root{--gray-0:oklch(100% 0 0);--gray-1:oklch(99% 0 0);--gray-2:oklch(97% 0 0);--gray-3:oklch(94% 0 0);--gray-4:oklch(90% 0 0);--gray-5:oklch(83% 0 0);--gray-6:oklch(70% 0 0);--gray-7:oklch(55% 0 0);--gray-8:oklch(45% 0 0);--gray-9:oklch(35% 0 0);--gray-10:oklch(27% 0 0);--gray-11:oklch(21% 0 0);--gray-12:oklch(15% 0 0);--blue-4:oklch(80% .1 255);--blue-5:oklch(68% .16 255);--blue-6:oklch(55% .2 255);--blue-7:oklch(48% .21 255);--red-5:oklch(68% .18 25);--red-6:oklch(58% .22 25);--red-7:oklch(50% .22 25);--green-6:oklch(62% .17 150);--size-1:.25rem;--size-2:.5rem;--size-3:.75rem;--size-4:1rem;--size-5:1.5rem;--size-6:2rem;--size-7:3rem;--size-8:4rem;--radius-1:8px;--radius-2:16px;--radius-3:20px;--radius-4:24px;--radius-5:32px;--radius-full:9999px;--font-sans:system-ui, -apple-system, "Segoe UI", roboto, helvetica, arial, sans-serif;--font-mono:ui-monospace, "SF Mono", "Cascadia Code", "Fira Code", monospace;--text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.5rem;--text-2xl:2rem;--leading-tight:1.2;--leading-normal:1.5;--weight-normal:400;--weight-medium:500;--weight-semibold:600;--shadow-1:0 1px 2px #00000014;--shadow-2:0 12px 32px #14161a24;--shadow-3:0 24px 60px #14161a33;--border-width:1px;--ring-width:3px;--ring-offset:2px;--ease-out:cubic-bezier(.16, 1, .3, 1);--ease-in-out:cubic-bezier(.65, 0, .35, 1);--duration-fast:.12s;--duration-base:.18s;color-scheme:light;--background:light-dark(oklch(96.1% .007 88.6),oklch(17.8% .006 271));--foreground:light-dark(oklch(20% .009 264.4),oklch(95.2% .004 91.4));--card:light-dark(var(--gray-0),oklch(21.7% .008 264.4));--card-foreground:var(--foreground);--popover:light-dark(var(--gray-0),oklch(21.7% .008 264.4));--popover-foreground:var(--foreground);--secondary:light-dark(oklch(98.5% .003 84.6),oklch(19.6% .006 271.1));--secondary-foreground:var(--foreground);--muted:light-dark(var(--gray-3),oklch(26.4% .01 260.7));--muted-foreground:light-dark(oklch(48.5% .012 267.3),oklch(64.863% .0101 258.447));--primary:light-dark(oklch(48.6% .272 267.3),oklch(68.1% .169 275));--primary-foreground:light-dark(var(--gray-0),oklch(17.8% .006 271));--accent:color-mix(in oklch, var(--primary) 12%, transparent);--accent-foreground:var(--primary);--border:light-dark(oklch(90.4% .013 86.8),oklch(30% .012 258.4));--input:light-dark(oklch(87.1% .013 86.8),oklch(36.6% .015 259.8));--ring:light-dark(var(--blue-7),oklch(68.1% .169 275));--destructive:light-dark(var(--red-7),var(--red-5));--destructive-foreground:light-dark(var(--gray-0),oklch(17.8% .006 271));--success:var(--green-6);--success-foreground:var(--gray-0);--warning:light-dark(oklch(72% .16 75),oklch(80% .14 85));--warning-foreground:var(--gray-12);--chart-1:var(--primary);--chart-2:var(--blue-5);--chart-3:var(--green-6);--chart-4:var(--red-5);--chart-5:var(--gray-7);--radius:var(--radius-3);--radius-xs:calc(var(--radius) * .4);--radius-sm:calc(var(--radius) * .8);--radius-md:var(--radius);--radius-lg:calc(var(--radius) * 1.2);--radius-xl:calc(var(--radius) * 1.6);--space-xs:var(--size-1);--space-sm:var(--size-2);--space-md:var(--size-3);--space-lg:var(--size-4);--space-xl:var(--size-5);--shadow-popover:var(--shadow-2);--shadow-modal:var(--shadow-3);--transition-colors:color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);--presence-scale:.96;--transition-presence:opacity var(--duration-fast) var(--ease-out), scale var(--duration-fast) var(--ease-out), display var(--duration-fast) allow-discrete, overlay var(--duration-fast) allow-discrete}[data-theme=basic-light]{color-scheme:light}[data-theme=basic-dark]{color-scheme:dark}}@layer base,components,utilities;
+@layer reset;@layer tokens{:root{color-scheme:light;--gray-0:oklch(100% 0 0);--gray-1:oklch(99% 0 0);--gray-2:oklch(97% 0 0);--gray-3:oklch(94% 0 0);--gray-4:oklch(90% 0 0);--gray-5:oklch(83% 0 0);--gray-6:oklch(70% 0 0);--gray-7:oklch(55% 0 0);--gray-8:oklch(45% 0 0);--gray-9:oklch(35% 0 0);--gray-10:oklch(27% 0 0);--gray-11:oklch(21% 0 0);--gray-12:oklch(15% 0 0);--blue-4:oklch(80% .1 255);--blue-5:oklch(68% .16 255);--blue-6:oklch(55% .2 255);--blue-7:oklch(48% .21 255);--red-5:oklch(68% .18 25);--red-6:oklch(58% .22 25);--red-7:oklch(50% .22 25);--green-6:oklch(62% .17 150);--control-sm:2rem;--control-md:2.5rem;--control-lg:3rem;--radius-1:4px;--radius-2:8px;--radius-3:10px;--radius-4:16px;--radius-5:20px;--radius-full:9999px;--font-sans:system-ui, -apple-system, "Segoe UI", roboto, helvetica, arial, sans-serif;--font-mono:ui-monospace, "SF Mono", "Cascadia Code", "Fira Code", monospace;--text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.5rem;--text-2xl:2rem;--leading-tight:1.2;--leading-normal:1.5;--weight-normal:400;--weight-medium:500;--weight-semibold:600;--shadow-1:0 1px 2px #00000014;--shadow-2:0 12px 32px #14161a24;--shadow-3:0 24px 60px #14161a33;--border-width:1px;--ring-width:3px;--ring-offset:2px;--ease-out:cubic-bezier(.16, 1, .3, 1);--ease-in-out:cubic-bezier(.65, 0, .35, 1);--duration-fast:.12s;--duration-base:.18s;--background:light-dark(oklch(96.1% .007 88.6),oklch(17.8% .006 271));--foreground:light-dark(oklch(20% .009 264.4),oklch(95.2% .004 91.4));--card:light-dark(var(--gray-0),oklch(21.7% .008 264.4));--card-foreground:var(--foreground);--popover:light-dark(var(--gray-0),oklch(21.7% .008 264.4));--popover-foreground:var(--foreground);--secondary:light-dark(oklch(98.5% .003 84.6),oklch(19.6% .006 271.1));--secondary-foreground:var(--foreground);--muted:light-dark(var(--gray-3),oklch(26.4% .01 260.7));--muted-foreground:light-dark(oklch(48.5% .012 267.3),oklch(64.863% .0101 258.447));--primary:light-dark(oklch(48.6% .272 267.3),oklch(68.1% .169 275));--primary-foreground:light-dark(var(--gray-0),oklch(17.8% .006 271));--accent:color-mix(in oklch, var(--primary) 12%, transparent);--accent-foreground:var(--primary);--border:light-dark(oklch(90.4% .013 86.8),oklch(30% .012 258.4));--input:light-dark(oklch(87.1% .013 86.8),oklch(36.6% .015 259.8));--ring:light-dark(var(--blue-7),oklch(68.1% .169 275));--destructive:light-dark(var(--red-7),var(--red-5));--destructive-foreground:light-dark(var(--gray-0),oklch(17.8% .006 271));--success:var(--green-6);--success-foreground:var(--gray-0);--warning:light-dark(oklch(72% .16 75),oklch(80% .14 85));--warning-foreground:var(--gray-12);--chart-1:var(--primary);--chart-2:var(--blue-5);--chart-3:var(--green-6);--chart-4:var(--red-5);--chart-5:var(--gray-7);--radius:var(--radius-3);--radius-xs:calc(var(--radius) * .4);--radius-sm:calc(var(--radius) * .8);--radius-md:var(--radius);--radius-lg:calc(var(--radius) * 1.6);--radius-xl:calc(var(--radius) * 2);--space-xs:.25rem;--space-sm:.5rem;--space-md:.75rem;--space-lg:1rem;--space-xl:1.5rem;--shadow-popover:var(--shadow-2);--shadow-modal:var(--shadow-3);--transition-colors:color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);--presence-scale:.96;--transition-presence:opacity var(--duration-fast) var(--ease-out), scale var(--duration-fast) var(--ease-out), display var(--duration-fast) allow-discrete, overlay var(--duration-fast) allow-discrete}[data-theme=basic-light]{color-scheme:light}[data-theme=basic-dark]{color-scheme:dark}}@layer base,components,utilities;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gunkin/uiify",
-  "version": "0.0.25-alpha",
+  "version": "0.0.26-alpha",
   "description": "Native-first, accessible React 19 components that work before hydration.",
   "keywords": [
     "accessibility",

package/skills/uiify/references/elements/aspect-ratio.md

@@ -23,7 +23,7 @@ import "@gunkin/uiify/components/behavior.css";
 </AspectRatio>
 ```
 
-Direct import: `@gunkin/uiify/components/aspect-ratio`. This reusable layout Component is Tier 0. It renders two wrappers: root `data-uiify-aspect-ratio`, then `data-part="content"` around children. Root forwards native props, events, `className`, `style`, `ref`, `as` and `render`; custom renderers must forward props/ref. Owned markers cannot be overridden.
+Direct import: `@gunkin/uiify/components/aspect-ratio`. This reusable layout Component is Tier 0. It renders two wrappers: root `data-uiify-aspect-ratio`, then `data-part="content"` around children. Root forwards native props, events, `className`, `style`, `ref`, `as` and `render`; custom renderers must forward props/ref. Consumer props replace its default markers.
 
 `ratio?: number` accepts a positive finite number (width/height). Square default: `1`; invalid numbers fall back to `1`. Omission leaves the stylesheet default and permits a CSS `--uiify-aspect-ratio` override; an explicit ratio writes that property.
 

package/skills/uiify/references/elements/field.md

@@ -22,7 +22,7 @@ Keep labels and help text close to the control at narrow widths. Let long instru
 
 ## States
 
-Native required validation works without JavaScript. For application validation, set `invalid` on Root and Control and render `Field.Error` with the same state after validation. Keep `Field.Description` mounted alongside the conditional Error: Control always references its derived description ID. Parts own their IDs and Control's ARIA relationships; omit manual `id`/`aria-describedby` overrides. The error is included while invalid.
+Native required validation works without JavaScript. For application validation, set `invalid` on Root and Control and render `Field.Error` with the same state after validation. Keep `Field.Description` mounted alongside the conditional Error: Control always references its derived description ID. Parts write their IDs and Control's ARIA relationships by default; overriding `id`/`aria-describedby` breaks those links, so omit manual overrides. The error is included while invalid.
 
 ## Verify
 

package/skills/uiify/references/elements/toggle.md

@@ -15,6 +15,7 @@ Use a switch for a persistent on/off setting and ordinary buttons for one-time a
 ## Structure
 
 Use the documented Toggle with its required id and label. It is backed by a native checkbox; keep the label stable so the checked state conveys the change.
+Use `defaultPressed` for browser-owned state that must keep working without JavaScript. For React-controlled state, pass `pressed` together with `onPressedChange`; update `pressed` from that callback so the input stays in sync with the caller.
 
 ## Responsive