@ecopages/radiant-ui 0.1.0-rc.7 → 0.1.0

package/dist/styles/tailwind.css

@@ -186,6 +186,12 @@
   .top-0 {
     top: 0px;
   }
+  .right-inset {
+    right: var(--spacing-inset, var(--space-inset));
+  }
+  .left-inset {
+    left: var(--spacing-inset, var(--space-inset));
+  }
   .z-10 {
     z-index: 10;
   }
@@ -418,6 +424,9 @@
   .overflow-y-auto {
     overflow-y: auto;
   }
+  .rounded {
+    border-radius: 0.25rem;
+  }
   .rounded-container {
     border-radius: var(--radius-container, var(--radius-container));
   }
@@ -607,6 +616,9 @@
   .text-warning {
     color: var(--color-warning, var(--warning));
   }
+  .underline {
+    text-decoration-line: underline;
+  }
   .opacity-60 {
     opacity: 60%;
   }
@@ -621,14 +633,6 @@
     --tw-shadow: var(--shadow-overlay);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .shadow-modal {
-    --tw-shadow: var(--shadow-modal);
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
-  .shadow-overlay {
-    --tw-shadow: var(--shadow-overlay);
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
   .ring {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -641,6 +645,10 @@
     --tw-blur: blur(8px);
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
+  .invert {
+    --tw-invert: invert(100%);
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  }
   .filter {
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
@@ -907,6 +915,7 @@
   --text-5xl: 3rem;
   --text-label: 0.875rem;
   --text-control: 0.875rem;
+  --text-control-input: 1rem;
   --leading-body: 1.5;
   --leading-relaxed: 1.625;
   --leading-compact: 1.25;
@@ -914,6 +923,13 @@
   --weight-medium: 500;
   --weight-semibold: 600;
   --tracking-wide: 0.025em;
+}
+@media (min-width: 640px) {
+  :root {
+    --text-control-input: var(--text-control);
+  }
+}
+:root {
   --duration-fast: 150ms;
   --duration-normal: 200ms;
   --duration-slow: 300ms;
@@ -924,6 +940,11 @@
   --border-width-hairline: 1px;
   --border-width-thin: 1px;
   --border-width-thick: 2px;
+  --rui-track-mix: 22%;
+  --rui-track-fill: var(--on-background);
+  @supports (color: color-mix(in lab, red, red)) {
+    --rui-track-fill: color-mix(in oklab, var(--on-background) var(--rui-track-mix), transparent);
+  }
   --focus-ring-width: 2px;
   --focus-ring-offset: 2px;
   --opacity-disabled: 0.5;
@@ -933,9 +954,9 @@
   --z-overlay: 30;
   --z-modal: 40;
   --z-toast: 50;
-  --size-control-sm: 2rem;
-  --size-control-md: 2.5rem;
-  --size-control-lg: 3rem;
+  --size-control-sm: var(--space-8, 2rem);
+  --size-control-md: var(--space-10, 2.5rem);
+  --size-control-lg: var(--space-12, 3rem);
   --size-icon-sm: 1rem;
   --size-icon-md: 1.25rem;
 }
@@ -1014,6 +1035,7 @@ html[data-rui-colors='glacier'], html:not([data-rui-colors]) {
     --border: color-mix(in oklab, var(--color-glacier-white-900) 15%, transparent);
   }
   --focus-ring: var(--color-night-sky-500);
+  --on-focus-ring: var(--on-primary);
   --link: var(--color-navy-blue-700);
   --overlay: oklch(0% 0 0 / 0.45);
   --background-code: var(--color-glacier-white-100);
@@ -1078,6 +1100,7 @@ html.dark[data-rui-colors='glacier'], html.dark:not([data-rui-colors]) {
     --border: color-mix(in oklab, var(--color-glacier-white-50) 18%, transparent);
   }
   --focus-ring: var(--color-night-sky-400);
+  --on-focus-ring: var(--on-primary);
   --link: var(--color-navy-blue-400);
   --overlay: oklch(0% 0 0 / 0.65);
   --background-code: var(--color-glacier-white-900);
@@ -1173,6 +1196,7 @@ html[data-rui-colors='aurora'] {
   --on-background: var(--color-black);
   --border: var(--color-pale-sky-400);
   --focus-ring: var(--color-havelock-blue-500);
+  --on-focus-ring: var(--on-primary);
   --link: var(--color-havelock-blue-700);
   --overlay: oklch(0% 0 0 / 0.4);
   --background-code: var(--color-pale-sky-900);
@@ -1250,6 +1274,7 @@ html.dark[data-rui-colors='aurora'] {
   --on-background: var(--color-white);
   --border: var(--color-pale-sky-700);
   --focus-ring: var(--color-havelock-blue-400);
+  --on-focus-ring: var(--on-primary);
   --link: var(--color-havelock-blue-300);
   --overlay: oklch(0% 0 0 / 0.6);
   --background-code: var(--color-pale-sky-950);
@@ -1324,6 +1349,7 @@ html[data-rui-colors='basalt'] {
   --on-background: var(--color-basalt-900);
   --border: var(--color-basalt-400);
   --focus-ring: var(--color-carbon-blue-500);
+  --on-focus-ring: var(--on-primary);
   --link: var(--color-carbon-blue-600);
   --overlay: oklch(0% 0 0 / 0.5);
   --background-code: var(--color-basalt-900);
@@ -1380,6 +1406,7 @@ html.dark[data-rui-colors='basalt'] {
   --on-background: var(--color-basalt-50);
   --border: var(--color-basalt-700);
   --focus-ring: var(--color-carbon-blue-400);
+  --on-focus-ring: var(--on-primary);
   --link: var(--color-carbon-blue-400);
   --overlay: oklch(0% 0 0 / 0.7);
   --background-code: var(--color-basalt-975);
@@ -1457,6 +1484,7 @@ html[data-rui-colors='ember'] {
     --border: color-mix(in oklab, var(--color-glacier-white-900) 12%, transparent);
   }
   --focus-ring: var(--color-scarlet-500);
+  --on-focus-ring: var(--on-primary);
   --link: var(--color-scarlet-700);
   --overlay: oklch(0% 0 0 / 0.42);
   --background-code: var(--color-glacier-white-100);
@@ -1523,6 +1551,7 @@ html.dark[data-rui-colors='ember'] {
     --border: color-mix(in oklab, var(--color-glacier-white-50) 16%, transparent);
   }
   --focus-ring: var(--color-scarlet-400);
+  --on-focus-ring: var(--on-primary);
   --link: var(--color-scarlet-400);
   --overlay: oklch(0% 0 0 / 0.62);
   --background-code: var(--color-glacier-white-900);
@@ -1537,96 +1566,6 @@ html.dark[data-rui-colors='ember'] {
 :root {
   color-scheme: light;
 }
-html[data-rui-spacing='default'], html:not([data-rui-spacing]) {
-  --space-1: 0.25rem;
-  --space-2: 0.5rem;
-  --space-3: 0.75rem;
-  --space-4: 1rem;
-  --space-5: 1.25rem;
-  --space-6: 1.5rem;
-  --space-8: 2rem;
-  --space-10: 2.5rem;
-  --space-12: 3rem;
-  --space-16: 4rem;
-  --space-control-x: var(--space-3);
-  --space-control-y: var(--space-2);
-  --space-inline: var(--space-2);
-  --space-stack: var(--space-4);
-  --space-inset: var(--space-4);
-}
-html[data-rui-spacing='compact'] {
-  --space-1: 0.125rem;
-  --space-2: 0.25rem;
-  --space-3: 0.5rem;
-  --space-4: 0.75rem;
-  --space-5: 1rem;
-  --space-6: 1.25rem;
-  --space-8: 1.5rem;
-  --space-10: 2rem;
-  --space-12: 2.5rem;
-  --space-16: 3rem;
-  --space-control-x: var(--space-3);
-  --space-control-y: var(--space-2);
-  --space-inline: var(--space-2);
-  --space-stack: var(--space-3);
-  --space-inset: var(--space-4);
-}
-html[data-rui-spacing='wide'] {
-  --space-1: 0.375rem;
-  --space-2: 0.625rem;
-  --space-3: 0.875rem;
-  --space-4: 1.25rem;
-  --space-5: 1.5rem;
-  --space-6: 1.875rem;
-  --space-8: 2.5rem;
-  --space-10: 3rem;
-  --space-12: 3.75rem;
-  --space-16: 5rem;
-  --space-control-x: var(--space-4);
-  --space-control-y: var(--space-3);
-  --space-inline: var(--space-3);
-  --space-stack: var(--space-6);
-  --space-inset: var(--space-6);
-}
-html[data-rui-radius='default'], html:not([data-rui-radius]) {
-  --border-radius-xs: 0.125rem;
-  --border-radius-sm: 0.25rem;
-  --border-radius-md: 0.375rem;
-  --border-radius-lg: 0.5rem;
-  --border-radius-xl: 0.75rem;
-  --border-radius-2xl: 1rem;
-  --border-radius-3xl: 1.5rem;
-  --border-radius-full: 9999px;
-  --radius-control: var(--border-radius-sm);
-  --radius-container: var(--border-radius-md);
-  --radius-pill: var(--border-radius-full);
-}
-html[data-rui-radius='soft'] {
-  --border-radius-xs: 0.25rem;
-  --border-radius-sm: 0.5rem;
-  --border-radius-md: 0.75rem;
-  --border-radius-lg: 1rem;
-  --border-radius-xl: 1.25rem;
-  --border-radius-2xl: 1.5rem;
-  --border-radius-3xl: 2rem;
-  --border-radius-full: 9999px;
-  --radius-control: var(--border-radius-md);
-  --radius-container: var(--border-radius-lg);
-  --radius-pill: var(--border-radius-full);
-}
-html[data-rui-radius='sharp'] {
-  --border-radius-xs: 0;
-  --border-radius-sm: 0;
-  --border-radius-md: 0;
-  --border-radius-lg: 0;
-  --border-radius-xl: 0;
-  --border-radius-2xl: 0;
-  --border-radius-3xl: 0;
-  --border-radius-full: 9999px;
-  --radius-control: 0;
-  --radius-container: 0;
-  --radius-pill: var(--border-radius-full);
-}
 @layer components {
   .rui-button {
     display: inline-flex;

package/dist/styles/tokens/presets/colors/aurora.css

@@ -79,6 +79,7 @@ html[data-rui-colors='aurora'] {
 
 	--border: var(--color-pale-sky-400);
 	--focus-ring: var(--color-havelock-blue-500);
+	--on-focus-ring: var(--on-primary);
 	--link: var(--color-havelock-blue-700);
 	--overlay: oklch(0% 0 0 / 0.4);
 
@@ -146,6 +147,7 @@ html.dark[data-rui-colors='aurora'] {
 
 	--border: var(--color-pale-sky-700);
 	--focus-ring: var(--color-havelock-blue-400);
+	--on-focus-ring: var(--on-primary);
 	--link: var(--color-havelock-blue-300);
 	--overlay: oklch(0% 0 0 / 0.6);
 

package/dist/styles/tokens/presets/colors/basalt.css

@@ -79,6 +79,7 @@ html[data-rui-colors='basalt'] {
 
 	--border: var(--color-basalt-400);
 	--focus-ring: var(--color-carbon-blue-500);
+	--on-focus-ring: var(--on-primary);
 	--link: var(--color-carbon-blue-600);
 	--overlay: oklch(0% 0 0 / 0.5);
 
@@ -146,6 +147,7 @@ html.dark[data-rui-colors='basalt'] {
 
 	--border: var(--color-basalt-700);
 	--focus-ring: var(--color-carbon-blue-400);
+	--on-focus-ring: var(--on-primary);
 	--link: var(--color-carbon-blue-400);
 	--overlay: oklch(0% 0 0 / 0.7);
 

package/dist/styles/tokens/presets/colors/ember.css

@@ -79,6 +79,7 @@ html[data-rui-colors='ember'] {
 
 	--border: color-mix(in oklab, var(--color-glacier-white-900) 12%, transparent);
 	--focus-ring: var(--color-scarlet-500);
+	--on-focus-ring: var(--on-primary);
 	--link: var(--color-scarlet-700);
 	--overlay: oklch(0% 0 0 / 0.42);
 
@@ -154,6 +155,7 @@ html.dark[data-rui-colors='ember'] {
 
 	--border: color-mix(in oklab, var(--color-glacier-white-50) 16%, transparent);
 	--focus-ring: var(--color-scarlet-400);
+	--on-focus-ring: var(--on-primary);
 	--link: var(--color-scarlet-400);
 	--overlay: oklch(0% 0 0 / 0.62);
 

package/dist/styles/tokens/presets/colors/glacier.css

@@ -80,6 +80,7 @@ html:not([data-rui-colors]) {
 
 	--border: color-mix(in oklab, var(--color-glacier-white-900) 15%, transparent);
 	--focus-ring: var(--color-night-sky-500);
+	--on-focus-ring: var(--on-primary);
 	--link: var(--color-navy-blue-700);
 	--overlay: oklch(0% 0 0 / 0.45);
 
@@ -150,6 +151,7 @@ html.dark:not([data-rui-colors]) {
 
 	--border: color-mix(in oklab, var(--color-glacier-white-50) 18%, transparent);
 	--focus-ring: var(--color-night-sky-400);
+	--on-focus-ring: var(--on-primary);
 	--link: var(--color-navy-blue-400);
 	--overlay: oklch(0% 0 0 / 0.65);
 

package/dist/styles/tokens/semantic.css

@@ -92,6 +92,7 @@
 
 	--color-border: var(--border);
 	--color-focus-ring: var(--focus-ring);
+	--color-on-focus-ring: var(--on-focus-ring);
 	--color-link: var(--link);
 	--color-overlay: var(--overlay);
 

package/dist/styles/tokens/system.css

@@ -1,5 +1,10 @@
 /**
  * Structural system tokens (Tier 3) — shared across all themes.
+ *
+ * `--size-control-*` aliases `--space-8/10/12` so compact and wide packs
+ * change button and input height with padding. Icon sizes stay fixed.
+ * `--rui-track-mix` / `--rui-track-fill` size the unfilled slider and knob
+ * track against `--on-background`. Optional `--rui-track-color` replaces the fill.
  */
 :root {
 	--color-black: oklch(0% 0 0);
@@ -9,6 +14,9 @@
 	--border-width-thin: 1px;
 	--border-width-thick: 2px;
 
+	--rui-track-mix: 22%;
+	--rui-track-fill: color-mix(in oklab, var(--on-background) var(--rui-track-mix), transparent);
+
 	--focus-ring-width: 2px;
 	--focus-ring-offset: 2px;
 
@@ -21,9 +29,9 @@
 	--z-modal: 40;
 	--z-toast: 50;
 
-	--size-control-sm: 2rem;
-	--size-control-md: 2.5rem;
-	--size-control-lg: 3rem;
+	--size-control-sm: var(--space-8, 2rem);
+	--size-control-md: var(--space-10, 2.5rem);
+	--size-control-lg: var(--space-12, 3rem);
 	--size-icon-sm: 1rem;
 	--size-icon-md: 1.25rem;
 }

package/dist/styles/tokens/typography/default.css

@@ -18,6 +18,8 @@
 	--text-5xl: 3rem;
 	--text-label: 0.875rem;
 	--text-control: 0.875rem;
+	/* 16px on narrow viewports avoids iOS Safari focus zoom; desktop uses --text-control. */
+	--text-control-input: 1rem;
 
 	--leading-body: 1.5;
 	--leading-relaxed: 1.625;
@@ -30,6 +32,12 @@
 	--tracking-wide: 0.025em;
 }
 
+@media (min-width: 640px) {
+	:root {
+		--text-control-input: var(--text-control);
+	}
+}
+
 @theme {
 	--font-sans: var(--font-sans);
 	--font-mono: var(--font-mono);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecopages/radiant-ui",
-  "version": "0.1.0-rc.7",
+  "version": "0.1.0",
   "description": "Accessible light-DOM UI components built with @ecopages/radiant",
   "repository": {
     "type": "git",
@@ -17,12 +17,14 @@
   ],
   "sideEffects": [
     "**/*.css",
+    "**/*.script.ts",
+    "**/*.script.tsx",
     "**/index.js"
   ],
   "peerDependencies": {
-    "@ecopages/jsx": ">=0.3.0-rc.4",
-    "@ecopages/radiant": ">=0.3.0-rc.4",
-    "@ecopages/signals": ">=0.3.0-rc.4"
+    "@ecopages/jsx": ">=0.3.0",
+    "@ecopages/radiant": ">=0.3.0",
+    "@ecopages/signals": ">=0.3.0"
   },
   "devDependencies": {
     "@babel/core": "^7.28.0",
@@ -54,12 +56,12 @@
     "typescript": "~7.0.2",
     "vite": "^8.1.1",
     "vitest": "^4.1.10",
-    "@ecopages/jsx": "0.3.0-rc.4",
     "@ecopages/oxlint-config": "0.0.0",
-    "@ecopages/radiant": "0.3.0-rc.4",
-    "@ecopages/signals": "0.3.0-rc.4",
-    "@ecopages/vite-plugin-radiant": "0.1.0-rc.0",
-    "@ecopages/storybook-radiant-vite": "0.1.0-rc.0"
+    "@ecopages/storybook-radiant-vite": "0.1.0",
+    "@ecopages/radiant": "0.3.0",
+    "@ecopages/signals": "0.3.0",
+    "@ecopages/jsx": "0.3.0",
+    "@ecopages/vite-plugin-radiant": "0.1.0"
   },
   "exports": {
     "./package.json": "./package.json",
@@ -75,6 +77,10 @@
       "types": "./dist/aria.d.ts",
       "import": "./dist/aria.js"
     },
+    "./icons": {
+      "types": "./dist/lib/icons/index.d.ts",
+      "import": "./dist/lib/icons/index.js"
+    },
     "./tokens/colors/aurora": {
       "default": "./dist/styles/tokens/colors/aurora.css"
     },
@@ -268,6 +274,13 @@
     "./date-field/styles.css": {
       "default": "./dist/components/ui/date-field/date-field.css"
     },
+    "./date-input": {
+      "types": "./dist/components/ui/date-input/index.d.ts",
+      "import": "./dist/components/ui/date-input/index.js"
+    },
+    "./date-input/styles.css": {
+      "default": "./dist/components/ui/date-input/date-input.css"
+    },
     "./date-range-picker": {
       "types": "./dist/components/ui/date-range-picker/index.d.ts",
       "import": "./dist/components/ui/date-range-picker/index.js"
@@ -561,20 +574,21 @@
     ]
   },
   "scripts": {
-    "build:framework": "pnpm --filter @ecopages/storybook-radiant-vite build",
+    "build:framework": "pnpm --filter @ecopages/vite-plugin-radiant build:lib && pnpm --filter @ecopages/storybook-radiant-vite build",
     "lint": "oxlint",
     "storybook": "pnpm run build:framework && pnpm --filter @ecopages/storybook-radiant-vite exec storybook dev -p 6006 -c ../radiant-ui/.storybook",
     "build-storybook": "pnpm run build:framework && pnpm --filter @ecopages/storybook-radiant-vite exec storybook build -c ../radiant-ui/.storybook",
     "test": "vitest run",
-    "test:all": "pnpm --filter @ecopages/jsx build:lib && pnpm --filter @ecopages/radiant build:lib && pnpm --filter @ecopages/vite-plugin-radiant build:lib && pnpm run build:framework && vitest run",
-    "test:storybook": "pnpm --filter @ecopages/jsx build:lib && pnpm --filter @ecopages/radiant build:lib && pnpm --filter @ecopages/vite-plugin-radiant build:lib && pnpm run build:framework && vitest run --project=storybook",
+    "test:all": "pnpm --filter @ecopages/jsx build:lib && pnpm --filter @ecopages/radiant build:lib && pnpm run build:framework && vitest run",
+    "test:storybook": "pnpm --filter @ecopages/jsx build:lib && pnpm --filter @ecopages/radiant build:lib && pnpm run build:framework && vitest run --project=storybook",
     "test:ssr": "pnpm --filter @ecopages/jsx build:lib && pnpm --filter @ecopages/radiant build:lib && pnpm run build:framework && vitest run --project=ssr && node --import tsx ./scripts/test-storybook-ssr.ts",
     "test:ssr:smoke": "pnpm --filter @ecopages/jsx build:lib && pnpm --filter @ecopages/radiant build:lib && pnpm run build:framework && node --import tsx ./scripts/test-storybook-ssr.ts --smoke",
     "clean": "rm -rf dist",
     "generate:exports": "node --import tsx ./scripts/generate-exports.ts",
     "build:files": "node --import tsx ./scripts/build.ts",
     "build:types": "tsc -p tsconfig.build.json",
-    "build:lib": "pnpm run generate:exports && pnpm run clean && pnpm run build:files && pnpm run build:types && pnpm run copy-styles",
+    "build:lib": "pnpm run generate:exports && pnpm run clean && pnpm run build:files && pnpm run build:types && pnpm run copy-styles && pnpm run test:package",
+    "test:package": "node --test scripts/package-registration.test.mjs",
     "copy-styles": "node --import tsx ./scripts/copy-styles.ts",
     "typecheck": "tsc --noEmit -p tsconfig.app.json"
   }