@ecopages/radiant-ui 0.1.0-beta.7 → 0.1.0-beta.8

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

@@ -1,8 +1,8 @@
 /**
  * Default color pack — raw OKLCH scales only (mode-agnostic).
- * Semantic roles live in semantic.css.
+ * `:root` (not `@theme`) so scales always emit; semantic roles live in semantic.css.
  */
-@theme {
+:root {
 	--color-black: oklch(0% 0 0);
 	--color-white: oklch(100% 0 0);
 

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

@@ -1,7 +1,8 @@
 /**
  * Basalt color pack — cool neutrals + Carbon-like blue accent (IBM Carbon inspired).
+ * `:root` (not `@theme`) so scales always emit.
  */
-@theme {
+:root {
 	--color-basalt-50: oklch(98.2% 0.004 265);
 	--color-basalt-100: oklch(96% 0.006 265);
 	--color-basalt-200: oklch(91.5% 0.008 265);

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

@@ -1,7 +1,8 @@
 /**
  * Glacier color pack — matches apps/docs `theme.css` scales.
+ * `:root` (not `@theme`) so scales always emit; semantic utilities stay tree-shakable in semantic.css.
  */
-@theme {
+:root {
 	--color-night-sky-50: hsl(225 100% 98%);
 	--color-night-sky-100: hsl(225 100% 95%);
 	--color-night-sky-200: hsl(225 100% 90%);

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

@@ -45,22 +45,36 @@ html[data-rui-colors='aurora'] {
 	--success-light: var(--color-fruit-salad-400);
 	--success-dark: var(--color-fruit-salad-800);
 
+	--info: var(--color-havelock-blue-700);
+	--on-info: var(--color-white);
+	--info-container: var(--color-havelock-blue-100);
+	--on-info-container: var(--color-havelock-blue-800);
+	--info-light: var(--color-havelock-blue-500);
+	--info-dark: var(--color-havelock-blue-900);
+
+	--warning: var(--color-hit-pink-700);
+	--on-warning: var(--color-black);
+	--warning-container: var(--color-hit-pink-100);
+	--on-warning-container: var(--color-hit-pink-800);
+	--warning-light: var(--color-hit-pink-400);
+	--warning-dark: var(--color-hit-pink-800);
+
 	--neutral: var(--color-pale-sky-500);
 
-	--surface: var(--color-pale-sky-50);
+	--surface: color-mix(in oklab, var(--color-havelock-blue-50) 70%, var(--color-hit-pink-50));
 	--on-surface: var(--color-black);
-	--surface-container-lowest: var(--color-pale-sky-100);
+	--surface-container-lowest: color-mix(in oklab, var(--color-havelock-blue-50) 60%, var(--color-hit-pink-50));
 	--on-surface-container-lowest: var(--color-black);
-	--surface-container-low: var(--color-pale-sky-200);
+	--surface-container-low: color-mix(in oklab, var(--color-havelock-blue-100) 75%, var(--color-hit-pink-50));
 	--on-surface-container-low: var(--color-black);
-	--surface-container: var(--color-pale-sky-300);
+	--surface-container: color-mix(in oklab, var(--color-havelock-blue-100) 65%, var(--color-hit-pink-100));
 	--on-surface-container: var(--color-black);
-	--surface-container-high: var(--color-pale-sky-400);
+	--surface-container-high: color-mix(in oklab, var(--color-havelock-blue-200) 60%, var(--color-hit-pink-100));
 	--on-surface-container-high: var(--color-black);
-	--surface-container-highest: var(--color-pale-sky-500);
+	--surface-container-highest: color-mix(in oklab, var(--color-havelock-blue-200) 50%, var(--color-hit-pink-200));
 	--on-surface-container-highest: var(--color-black);
 
-	--background: var(--color-white);
+	--background: color-mix(in oklab, var(--color-havelock-blue-50) 75%, var(--color-hit-pink-50));
 	--on-background: var(--color-black);
 
 	--border: var(--color-pale-sky-400);
@@ -100,20 +114,34 @@ html.dark[data-rui-colors='aurora'] {
 	--success-container: var(--color-fruit-salad-800);
 	--on-success-container: var(--color-fruit-salad-50);
 
-	--surface: var(--color-pale-sky-975);
+	--info: var(--color-havelock-blue-300);
+	--on-info: var(--color-black);
+	--info-container: var(--color-havelock-blue-800);
+	--on-info-container: var(--color-havelock-blue-50);
+	--info-light: var(--color-havelock-blue-300);
+	--info-dark: var(--color-havelock-blue-900);
+
+	--warning: var(--color-hit-pink-200);
+	--on-warning: var(--color-black);
+	--warning-container: var(--color-hit-pink-800);
+	--on-warning-container: var(--color-hit-pink-50);
+	--warning-light: var(--color-hit-pink-300);
+	--warning-dark: var(--color-hit-pink-800);
+
+	--surface: color-mix(in oklab, var(--color-pale-sky-975) 65%, var(--color-havelock-blue-950));
 	--on-surface: var(--color-white);
-	--surface-container-lowest: var(--color-pale-sky-950);
+	--surface-container-lowest: color-mix(in oklab, var(--color-pale-sky-950) 75%, var(--color-havelock-blue-950));
 	--on-surface-container-lowest: var(--color-white);
-	--surface-container-low: var(--color-pale-sky-900);
+	--surface-container-low: color-mix(in oklab, var(--color-pale-sky-900) 70%, var(--color-havelock-blue-900));
 	--on-surface-container-low: var(--color-white);
-	--surface-container: var(--color-pale-sky-800);
+	--surface-container: color-mix(in oklab, var(--color-pale-sky-800) 65%, var(--color-havelock-blue-900));
 	--on-surface-container: var(--color-white);
-	--surface-container-high: var(--color-pale-sky-700);
+	--surface-container-high: color-mix(in oklab, var(--color-pale-sky-800) 60%, var(--color-hit-pink-900));
 	--on-surface-container-high: var(--color-white);
-	--surface-container-highest: var(--color-pale-sky-600);
+	--surface-container-highest: color-mix(in oklab, var(--color-pale-sky-700) 55%, var(--color-hit-pink-800));
 	--on-surface-container-highest: var(--color-white);
 
-	--background: var(--color-black);
+	--background: color-mix(in oklab, var(--color-pale-sky-975) 70%, var(--color-havelock-blue-950));
 	--on-background: var(--color-white);
 
 	--border: var(--color-pale-sky-700);

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

@@ -45,6 +45,20 @@ html[data-rui-colors='basalt'] {
 	--success-light: var(--color-carbon-teal-400);
 	--success-dark: var(--color-basalt-800);
 
+	--info: var(--color-carbon-blue-600);
+	--on-info: var(--color-white);
+	--info-container: var(--color-carbon-blue-100);
+	--on-info-container: var(--color-carbon-blue-800);
+	--info-light: var(--color-carbon-blue-400);
+	--info-dark: var(--color-carbon-blue-800);
+
+	--warning: var(--color-basalt-700);
+	--on-warning: var(--color-white);
+	--warning-container: var(--color-basalt-200);
+	--on-warning-container: var(--color-basalt-900);
+	--warning-light: var(--color-basalt-500);
+	--warning-dark: var(--color-basalt-900);
+
 	--neutral: var(--color-basalt-500);
 
 	--surface: var(--color-basalt-100);
@@ -100,6 +114,20 @@ html.dark[data-rui-colors='basalt'] {
 	--success-container: var(--color-basalt-800);
 	--on-success-container: var(--color-basalt-100);
 
+	--info: var(--color-carbon-blue-400);
+	--on-info: var(--color-basalt-950);
+	--info-container: var(--color-carbon-blue-800);
+	--on-info-container: var(--color-carbon-blue-100);
+	--info-light: var(--color-carbon-blue-300);
+	--info-dark: var(--color-carbon-blue-700);
+
+	--warning: var(--color-basalt-300);
+	--on-warning: var(--color-basalt-950);
+	--warning-container: var(--color-basalt-800);
+	--on-warning-container: var(--color-basalt-100);
+	--warning-light: var(--color-basalt-400);
+	--warning-dark: var(--color-basalt-700);
+
 	--surface: var(--color-basalt-975);
 	--on-surface: var(--color-basalt-50);
 	--surface-container-lowest: var(--color-basalt-950);

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

@@ -45,6 +45,20 @@ html[data-rui-colors='ember'] {
 	--success-light: var(--color-night-sky-400);
 	--success-dark: var(--color-night-sky-800);
 
+	--info: var(--color-night-sky-600);
+	--on-info: var(--color-glacier-white-50);
+	--info-container: var(--color-night-sky-100);
+	--on-info-container: var(--color-night-sky-900);
+	--info-light: var(--color-night-sky-400);
+	--info-dark: var(--color-night-sky-800);
+
+	--warning: var(--color-laser-lemon-800);
+	--on-warning: var(--color-glacier-white-50);
+	--warning-container: var(--color-glacier-white-200);
+	--on-warning-container: var(--color-laser-lemon-800);
+	--warning-light: var(--color-laser-lemon-300);
+	--warning-dark: var(--color-laser-lemon-800);
+
 	--neutral: var(--color-glacier-white-500);
 
 	--surface: var(--color-glacier-white-100);
@@ -106,6 +120,20 @@ html.dark[data-rui-colors='ember'] {
 	--success-light: var(--color-night-sky-300);
 	--success-dark: var(--color-night-sky-700);
 
+	--info: var(--color-night-sky-400);
+	--on-info: var(--color-glacier-white-950);
+	--info-container: var(--color-night-sky-800);
+	--on-info-container: var(--color-night-sky-100);
+	--info-light: var(--color-night-sky-300);
+	--info-dark: var(--color-night-sky-700);
+
+	--warning: var(--color-laser-lemon-300);
+	--on-warning: var(--color-glacier-white-950);
+	--warning-container: var(--color-glacier-white-800);
+	--on-warning-container: var(--color-laser-lemon-300);
+	--warning-light: var(--color-laser-lemon-300);
+	--warning-dark: var(--color-laser-lemon-800);
+
 	--neutral: var(--color-glacier-white-500);
 
 	--surface: var(--color-glacier-white-900);

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

@@ -46,6 +46,20 @@ html:not([data-rui-colors]) {
 	--success-light: var(--color-night-sky-400);
 	--success-dark: var(--color-night-sky-800);
 
+	--info: var(--color-night-sky-600);
+	--on-info: var(--color-glacier-white-50);
+	--info-container: var(--color-night-sky-100);
+	--on-info-container: var(--color-night-sky-900);
+	--info-light: var(--color-night-sky-400);
+	--info-dark: var(--color-night-sky-800);
+
+	--warning: var(--color-laser-lemon-800);
+	--on-warning: var(--color-glacier-white-50);
+	--warning-container: color-mix(in oklab, var(--color-laser-lemon-300) 42%, var(--color-glacier-white-50));
+	--on-warning-container: var(--color-laser-lemon-800);
+	--warning-light: var(--color-laser-lemon-300);
+	--warning-dark: var(--color-laser-lemon-800);
+
 	--neutral: var(--color-glacier-white-500);
 
 	--surface: var(--color-glacier-white-100);
@@ -104,6 +118,20 @@ html.dark:not([data-rui-colors]) {
 	--success-container: var(--color-night-sky-800);
 	--on-success-container: var(--color-night-sky-100);
 
+	--info: var(--color-night-sky-400);
+	--on-info: var(--color-glacier-white-950);
+	--info-container: var(--color-night-sky-800);
+	--on-info-container: var(--color-night-sky-100);
+	--info-light: var(--color-night-sky-300);
+	--info-dark: var(--color-night-sky-600);
+
+	--warning: var(--color-laser-lemon-300);
+	--on-warning: var(--color-glacier-white-950);
+	--warning-container: color-mix(in oklab, var(--color-laser-lemon-800) 55%, var(--color-glacier-white-950));
+	--on-warning-container: var(--color-laser-lemon-300);
+	--warning-light: var(--color-laser-lemon-300);
+	--warning-dark: var(--color-laser-lemon-800);
+
 	--surface: var(--color-glacier-white-900);
 	--on-surface: var(--color-glacier-white-50);
 	--surface-container-lowest: var(--color-glacier-white-950);

package/dist/styles/tokens/semantic.css

@@ -1,6 +1,6 @@
 /**
- * Semantic color roles — Storybook brand presets + Tailwind bridge.
- * Load `colors/palettes.css` before this file.
+ * Semantic color roles — brand presets + tree-shakable Tailwind utility bridge.
+ * Load `colors/palettes.css` before this file (palette scales are `:root`, not `@theme`).
  */
 @import './presets/colors/index.css';
 
@@ -52,6 +52,26 @@
 	--color-success-container: var(--success-container);
 	--color-on-success-container: var(--on-success-container);
 
+	--color-info: var(--info);
+	--color-on-info: var(--on-info);
+	--color-info-container: var(--info-container);
+	--color-on-info-container: var(--on-info-container);
+	--color-info-light: var(--info-light);
+	--color-info-dark: var(--info-dark);
+
+	--color-warning: var(--warning);
+	--color-on-warning: var(--on-warning);
+	--color-warning-container: var(--warning-container);
+	--color-on-warning-container: var(--on-warning-container);
+	--color-warning-light: var(--warning-light);
+	--color-warning-dark: var(--warning-dark);
+
+	/** UI alias — maps to `error` (e.g. destructive buttons, error alerts). */
+	--color-destructive: var(--error);
+	--color-on-destructive: var(--on-error);
+	--color-destructive-container: var(--error-container);
+	--color-on-destructive-container: var(--on-error-container);
+
 	--color-neutral: var(--neutral);
 
 	--color-surface: var(--surface);

package/dist/styles/tokens/spacing/compact.css

@@ -6,18 +6,18 @@
 :root {
 	--space-1: 0.125rem;
 	--space-2: 0.25rem;
-	--space-3: 0.375rem;
-	--space-4: 0.5rem;
-	--space-5: 0.625rem;
-	--space-6: 0.75rem;
-	--space-8: 1rem;
-	--space-10: 1.25rem;
-	--space-12: 1.5rem;
-	--space-16: 2rem;
+	--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-2);
-	--space-control-y: var(--space-1);
-	--space-inline: var(--space-1);
+	--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-3);
+	--space-inset: var(--space-4);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecopages/radiant-ui",
-  "version": "0.1.0-beta.7",
+  "version": "0.1.0-beta.8",
   "description": "Accessible light-DOM UI components built with @ecopages/radiant, documented in Storybook",
   "license": "MIT",
   "type": "module",
@@ -15,9 +15,9 @@
     "**/index.js"
   ],
   "peerDependencies": {
-    "@ecopages/jsx": ">=0.3.0-beta.6",
-    "@ecopages/radiant": ">=0.3.0-beta.6",
-    "@ecopages/signals": ">=0.3.0-beta.6"
+    "@ecopages/jsx": ">=0.3.0-beta.8",
+    "@ecopages/radiant": ">=0.3.0-beta.8",
+    "@ecopages/signals": ">=0.3.0-beta.8"
   },
   "devDependencies": {
     "@babel/core": "^7.28.0",
@@ -38,17 +38,20 @@
     "oxlint": "^1.71.0",
     "playwright": "^1.61.1",
     "postcss": "^8.5.24",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
     "storybook": "^10.5.2",
+    "ts-dedent": "^2.2.0",
     "tailwindcss": "^4.1.11",
     "tsx": "^4.20.6",
     "typescript": "~7.0.2",
     "vite": "^8.1.1",
     "vitest": "^4.1.10",
-    "@ecopages/jsx": "0.3.0-beta.7",
-    "@ecopages/radiant": "0.3.0-beta.7",
-    "@ecopages/vite-plugin-radiant": "0.1.0-beta.2",
+    "@ecopages/jsx": "0.3.0-beta.8",
     "@ecopages/storybook-radiant-vite": "0.1.0-beta.0",
-    "@ecopages/signals": "0.3.0-beta.7"
+    "@ecopages/vite-plugin-radiant": "0.1.0-beta.3",
+    "@ecopages/radiant": "0.3.0-beta.8",
+    "@ecopages/signals": "0.3.0-beta.8"
   },
   "exports": {
     "./package.json": "./package.json",
@@ -167,6 +170,9 @@
       "types": "./dist/components/ui/button/index.d.ts",
       "import": "./dist/components/ui/button/index.js"
     },
+    "./button/styles.css": {
+      "default": "./dist/components/ui/button/button.css"
+    },
     "./button-group": {
       "types": "./dist/components/ui/button-group/index.d.ts",
       "import": "./dist/components/ui/button-group/index.js"
@@ -216,6 +222,13 @@
     "./combobox/styles.css": {
       "default": "./dist/components/ui/combobox/combobox.css"
     },
+    "./cycle-toggle": {
+      "types": "./dist/components/ui/cycle-toggle/index.d.ts",
+      "import": "./dist/components/ui/cycle-toggle/index.js"
+    },
+    "./cycle-toggle/styles.css": {
+      "default": "./dist/components/ui/cycle-toggle/cycle-toggle.css"
+    },
     "./date-field": {
       "types": "./dist/components/ui/date-field/index.d.ts",
       "import": "./dist/components/ui/date-field/index.js"

package/dist/components/ui/dialog/dialog-registry.test.d.ts

@@ -1 +0,0 @@
-import './dialog.script';

package/dist/components/ui/field/field-ssr-hydration.test.d.ts

@@ -1 +0,0 @@
-import './field.script';

package/dist/components/ui/form/form-field.test.d.ts

@@ -1,4 +0,0 @@
-import '../field/field.script';
-import './form.script';
-import '../switch/switch.script';
-import '../date-field/date-field.script';

package/dist/components/ui/form/form-store.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/ui/shared/collection-navigation.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/ui/shared/floating-position.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/ui/shared/listbox-popover-behavior.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/ui/shared/popover-controller.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/ui/shared/portal.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/ui/sidebar/sidebar.ssr.test.d.ts

@@ -1,2 +0,0 @@
-import '@ecopages/radiant/server/install-ssr-runtime';
-import '@ecopages/radiant/client/install-hydrator';

package/dist/components/ui/sidebar/sidebar.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/ui/toast/toast.test.d.ts

@@ -1,2 +0,0 @@
-import './toast.script';
-import './toaster.script';

package/dist/components/ui/toc/toc-helpers.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/ui/toc/toc.ssr.test.d.ts

@@ -1 +0,0 @@
-import '@ecopages/radiant/server/install-ssr-runtime';

package/dist/components/ui/toc/toc.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/lib/intl-date/parts.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/lib/intl-date/segments.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/lib/intl-date/selection.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/lib/mask/date-mask.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/lib/mask/input-mask.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/lib/radiant-view.d.ts

@@ -1,43 +0,0 @@
-import type { JsxRenderable } from '@ecopages/jsx';
-declare const RADIANT_VIEW_ELEMENT: unique symbol;
-declare const RADIANT_SCRIPT_MODULE: unique symbol;
-declare const RADIANT_SCRIPT_EXPORT: unique symbol;
-declare const RADIANT_VIEW_MODULE: unique symbol;
-export type RadiantViewStylesheets = readonly string[];
-export type RadiantViewOptions = {
-    /**
-     * Stylesheet paths relative to the view module (e.g. `./alert.css`).
-     *
-     * @remarks
-     * Declared as path strings — not `import './x.css'` — so published view
-     * modules stay free of CSS side effects (Ecopages vendor prebundles cannot
-     * bundle CSS). The strings are source metadata: Storybook’s view-module
-     * stamp transform reintroduces `import './x.css'` when transforming the
-     * module. Apps load styles via `@ecopages/radiant-ui/styles.css` (or a
-     * theme). Use the `withStylesheets` decorator only for story-scoped extras.
-     */
-    stylesheets?: RadiantViewStylesheets;
-};
-export type RadiantViewComponent<TArgs = unknown> = ((args: TArgs) => JsxRenderable) & {
-    [RADIANT_VIEW_ELEMENT]?: CustomElementConstructor;
-    [RADIANT_SCRIPT_MODULE]?: string;
-    [RADIANT_SCRIPT_EXPORT]?: string;
-    [RADIANT_VIEW_MODULE]?: string;
-};
-/** Link a JSX view export to its RadiantElement class (same symbols as the Storybook framework). */
-export declare function defineRadiantView<TArgs>(element: CustomElementConstructor & {
-    [RADIANT_SCRIPT_MODULE]?: string;
-    [RADIANT_SCRIPT_EXPORT]?: string;
-}, render: (args: TArgs) => JsxRenderable, _options?: RadiantViewOptions): RadiantViewComponent<TArgs>;
-/**
- * Declare stylesheet paths and view module URL on a presentational export (no custom element).
- *
- * @remarks
- * `stylesheets` must appear as a source array literal so Storybook’s stamp
- * transform can inject CSS imports. `moduleUrl` (`import.meta.url`) stamps the
- * view-module symbol for relative path resolution.
- */
-export declare function attachRadiantStylesheets<T extends object>(target: T, _stylesheets: RadiantViewStylesheets, moduleUrl: string): T;
-/** Re-copy SSR metadata from the linked element (e.g. after HMR). */
-export declare function syncRadiantViewMetadata(view: RadiantViewComponent): void;
-export {};

package/dist/lib/text-filter.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/styles/tokens/presets/radius.css

@@ -1,45 +0,0 @@
-/**
- * Storybook radius toggles — `data-rui-radius` on `<html>`.
- */
-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);
-}

package/dist/styles/tokens/presets/spacing.css

@@ -1,57 +0,0 @@
-/**
- * Storybook spacing toggles — `data-rui-spacing` on `<html>`.
- */
-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.375rem;
-	--space-4: 0.5rem;
-	--space-5: 0.625rem;
-	--space-6: 0.75rem;
-	--space-8: 1rem;
-	--space-10: 1.25rem;
-	--space-12: 1.5rem;
-	--space-16: 2rem;
-	--space-control-x: var(--space-2);
-	--space-control-y: var(--space-1);
-	--space-inline: var(--space-1);
-	--space-stack: var(--space-3);
-	--space-inset: var(--space-3);
-}
-
-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);
-}