@rvx/ui 0.3.7 → 0.4.0

package/dist/components/text-input.js

@@ -1,18 +1,17 @@
 import { jsx as _jsx } from "rvx/jsx-runtime";
+import styles from "@rvx/ui/theme/components/text-input.module.css";
 import { get, Signal } from "rvx";
 import { isPending } from "rvx/async";
 import { optionalString } from "rvx/convert";
 import { ID_PAIR } from "../common/id-pairs.js";
-import { THEME } from "../common/theme.js";
 import { closestValidator } from "./validation.js";
 export function TextInput(props) {
     const id = props.id ?? ID_PAIR.current.consume();
-    const theme = THEME.current;
     const disabled = () => isPending() || get(props.disabled);
     const validator = props.value instanceof Signal ? closestValidator(props.value) : undefined;
     const InputTag = props.multiline ? "textarea" : "input";
     const input = _jsx(InputTag, { type: props.multiline ? undefined : (() => get(props.type) ?? "text"), rows: props.multiline ? props.rows : undefined, wrap: props.multiline ? props.wrap : undefined, disabled: disabled, class: [
-            theme?.text_input,
+            styles.text_input,
             props.class,
         ], style: props.style, id: id, autofocus: props.autofocus, spellcheck: optionalString(props.spellcheck), readonly: !(props.value instanceof Signal), "prop:value": props.value, "on:input": () => {
             if (props.value instanceof Signal) {

package/dist/components/text-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-input.js","sourceRoot":"","sources":["../../src/components/text-input.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA0B,GAAG,EAAE,MAAM,EAAc,MAAM,KAAK,CAAC;AACtE,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAKnD,MAAM,UAAU,SAAS,CAAC,KAqDzB;IACA,MAAM,EAAE,GAAG,KAAK,CAAC,EAAE,IAAI,OAAO,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC;IACjD,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC;IAC5B,MAAM,QAAQ,GAAG,GAAG,EAAE,CAAC,SAAS,EAAE,IAAI,GAAG,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IAE1D,MAAM,SAAS,GAAG,KAAK,CAAC,KAAK,YAAY,MAAM,CAAC,CAAC,CAAC,gBAAgB,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAE5F,MAAM,QAAQ,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC;IACxD,MAAM,KAAK,GAAG,KAAC,QAAQ,IACtB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,MAAM,CAAC,EACrE,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EAC9C,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EAC9C,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE;YACN,KAAK,EAAE,UAAU;YACjB,KAAK,CAAC,KAAK;SACX,EACD,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,UAAU,EAAE,cAAc,CAAC,KAAK,CAAC,UAAU,CAAC,EAC5C,QAAQ,EAAE,CAAC,CAAC,KAAK,CAAC,KAAK,YAAY,MAAM,CAAC,gBAE9B,KAAK,CAAC,KAAK,cACb,GAAG,EAAE;YACd,IAAI,KAAK,CAAC,KAAK,YAAY,MAAM,EAAE,CAAC;gBACnC,KAAK,CAAC,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;YACjC,CAAC;QACF,CAAC,gBAEW,KAAK,CAAC,YAAY,CAAC,qBACd,KAAK,CAAC,iBAAiB,CAAC,kBAE3B,SAAS,CAAC,CAAC,CAAC,cAAc,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,SAAS,uBACpD,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,GAC1C,CAAC;IAEvB,OAAO,KAAK,CAAC;AACd,CAAC"}
+{"version":3,"file":"text-input.js","sourceRoot":"","sources":["../../src/components/text-input.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,gDAAgD,CAAC;AACpE,OAAO,EAA0B,GAAG,EAAE,MAAM,EAAc,MAAM,KAAK,CAAC;AACtE,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAKnD,MAAM,UAAU,SAAS,CAAC,KAqDzB;IACA,MAAM,EAAE,GAAG,KAAK,CAAC,EAAE,IAAI,OAAO,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC;IACjD,MAAM,QAAQ,GAAG,GAAG,EAAE,CAAC,SAAS,EAAE,IAAI,GAAG,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IAE1D,MAAM,SAAS,GAAG,KAAK,CAAC,KAAK,YAAY,MAAM,CAAC,CAAC,CAAC,gBAAgB,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAE5F,MAAM,QAAQ,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC;IACxD,MAAM,KAAK,GAAG,KAAC,QAAQ,IACtB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,MAAM,CAAC,EACrE,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EAC9C,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EAC9C,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE;YACN,MAAM,CAAC,UAAU;YACjB,KAAK,CAAC,KAAK;SACX,EACD,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,UAAU,EAAE,cAAc,CAAC,KAAK,CAAC,UAAU,CAAC,EAC5C,QAAQ,EAAE,CAAC,CAAC,KAAK,CAAC,KAAK,YAAY,MAAM,CAAC,gBAE9B,KAAK,CAAC,KAAK,cACb,GAAG,EAAE;YACd,IAAI,KAAK,CAAC,KAAK,YAAY,MAAM,EAAE,CAAC;gBACnC,KAAK,CAAC,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;YACjC,CAAC;QACF,CAAC,gBAEW,KAAK,CAAC,YAAY,CAAC,qBACd,KAAK,CAAC,iBAAiB,CAAC,kBAE3B,SAAS,CAAC,CAAC,CAAC,cAAc,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,SAAS,uBACpD,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,GAC1C,CAAC;IAEvB,OAAO,KAAK,CAAC;AACd,CAAC"}

package/dist/components/text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../src/components/text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAGzD,wBAAgB,IAAI,CAAC,KAAK,EAAE;IAC3B,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,EAAE,CAAC,EAAE,UAAU,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,OAAO,CAYV"}
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../src/components/text.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAEzD,wBAAgB,IAAI,CAAC,KAAK,EAAE;IAC3B,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,EAAE,CAAC,EAAE,UAAU,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,OAAO,CAWV"}

package/dist/components/text.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx } from "rvx/jsx-runtime";
-import { THEME } from "../common/theme.js";
+import styles from "@rvx/ui/theme/components/text.module.css";
 export function Text(props) {
-    const theme = THEME.current;
     return _jsx("div", { class: [
-            theme?.text,
+            styles.text,
             props.class,
         ], style: props.style, id: props.id, children: props.children });
 }

package/dist/components/text.js.map

@@ -1 +1 @@
-{"version":3,"file":"text.js","sourceRoot":"","sources":["../../src/components/text.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAE3C,MAAM,UAAU,IAAI,CAAC,KAKpB;IACA,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC;IAC5B,OAAO,cACN,KAAK,EAAE;YACN,KAAK,EAAE,IAAI;YACX,KAAK,CAAC,KAAK;SACX,EACD,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,EAAE,EAAE,KAAK,CAAC,EAAE,YAEX,KAAK,CAAC,QAAQ,GACV,CAAC;AACR,CAAC"}
+{"version":3,"file":"text.js","sourceRoot":"","sources":["../../src/components/text.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,0CAA0C,CAAC;AAG9D,MAAM,UAAU,IAAI,CAAC,KAKpB;IACA,OAAO,cACN,KAAK,EAAE;YACN,MAAM,CAAC,IAAI;YACX,KAAK,CAAC,KAAK;SACX,EACD,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,EAAE,EAAE,KAAK,CAAC,EAAE,YAEX,KAAK,CAAC,QAAQ,GACV,CAAC;AACR,CAAC"}

package/dist/components/validation-rules.d.ts

@@ -1,9 +1,7 @@
 import { Component, Expression, Signal } from "rvx";
 export declare function rule<T>(source: Signal<T>, condition: (value: T) => boolean, message: Component): Signal<T>;
 export interface IntParserOptions {
-    /** The validation message for invalid formats. */
     format: Component;
-    /** The validation message for an out of range value. Defaults to the format message. */
     range?: Component;
     min?: Expression<number>;
     max?: Expression<number>;

package/dist/components/validation-rules.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"validation-rules.d.ts","sourceRoot":"","sources":["../../src/components/validation-rules.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAK,SAAS,EAAE,UAAU,EAAO,MAAM,EAAgB,MAAM,KAAK,CAAC;AAG1E,wBAAgB,IAAI,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,OAAO,EAAE,OAAO,EAAE,SAAS,GAAG,MAAM,CAAC,CAAC,CAAC,CAO1G;AAED,MAAM,WAAW,gBAAgB;IAChC,kDAAkD;IAClD,MAAM,EAAE,SAAS,CAAC;IAClB,wFAAwF;IACxF,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,GAAG,CAAC,EAAE,UAAU,CAAC,MAAM,CAAC,CAAC;IACzB,GAAG,CAAC,EAAE,UAAU,CAAC,MAAM,CAAC,CAAC;CACzB;AAED,wBAAgB,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE,OAAO,EAAE,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,CA4B3F"}
+{"version":3,"file":"validation-rules.d.ts","sourceRoot":"","sources":["../../src/components/validation-rules.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAK,SAAS,EAAE,UAAU,EAAO,MAAM,EAAgB,MAAM,KAAK,CAAC;AAG1E,wBAAgB,IAAI,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,OAAO,EAAE,OAAO,EAAE,SAAS,GAAG,MAAM,CAAC,CAAC,CAAC,CAO1G;AAED,MAAM,WAAW,gBAAgB;IAEhC,MAAM,EAAE,SAAS,CAAC;IAElB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,GAAG,CAAC,EAAE,UAAU,CAAC,MAAM,CAAC,CAAC;IACzB,GAAG,CAAC,EAAE,UAAU,CAAC,MAAM,CAAC,CAAC;CACzB;AAED,wBAAgB,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE,OAAO,EAAE,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,CA4B3F"}

package/dist/components/validation.d.ts

@@ -5,14 +5,6 @@ export interface ValidationOptions {
     trigger?: ValidationTrigger;
 }
 export interface ValidationRule {
-    /**
-     * Validate this rule.
-     *
-     * Immediately accessed signals may be tracked by the caller to trigger automatic re-validation when updated.
-     *
-     * @param abortSignal An optional abort signal to abort validaiton if supported.
-     * @returns An array of validation message components. If empty, this rule is considered valid.
-     */
     (abortSignal?: AbortSignal): Component[] | undefined | Promise<Component[] | undefined>;
 }
 export declare class ValidationRuleEntry {
@@ -26,58 +18,17 @@ export declare class Validator {
     #private;
     constructor();
     validate(abortSignal?: AbortSignal): Promise<boolean>;
-    /**
-     * Reactively check if this validator is in an invalid state.
-     *
-     * @returns `true` if invalid.
-     */
     invalid: () => boolean;
-    /**
-     * Reactively get a space separated list of message ids.
-     */
     messageIds: () => string;
     get rules(): ValidationRuleEntry[];
-    /**
-     * Append a rule to this validator until the current lifecycle is disposed.
-     */
     appendRule(rule: ValidationRule): void;
-    /**
-     * Prepend a rule to this validator until the current lifecycle is disposed.
-     */
     prependRule(rule: ValidationRule): void;
-    /**
-     * Attach this validator to the specified target.
-     *
-     * This will overwrite existing validators on the target.
-     */
     attach(target: Signal<unknown>): void;
-    /**
-     * Find the {@link closestValidator closest validator} or {@link Validator.prototype.attach attach} a new one to the target's {@link Signal.prototype.root root}.
-     */
     static get(target: Signal<unknown>): Validator;
 }
 export type ValidationTarget = Validator | Signal<unknown>;
-/**
- * Get the validator attached to the specified target.
- *
- * @param target The target.
- * @returns The validator or `undefined` if there is none.
- */
 export declare function validatorFor(target: ValidationTarget): Validator | undefined;
-/**
- * Find the closest validator attached to the specified target or any of it's {@link Signal.prototype.source sources}.
- *
- * @param target The target.
- * @returns The validator or `undefined` if there is none.
- */
 export declare function closestValidator(target: ValidationTarget | undefined): Validator | undefined;
-/**
- * Validate the specified targets in parallel.
- *
- * @param targets The targets that have attached validators.
- * @param abortSignal An optional abort signal to abort validation if supported.
- * @returns `true` if valid.
- */
 export declare function validate(targets: ValidationTarget[], abortSignal?: AbortSignal): Promise<boolean>;
 export declare function ValidationMessages(props: {
     for: Signal<unknown> | Validator;

package/dist/components/validation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"validation.d.ts","sourceRoot":"","sources":["../../src/components/validation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAK,SAAS,EAAE,OAAO,EAAiB,MAAM,EAAwD,MAAM,KAAK,CAAC;AAQzH,eAAO,MAAM,UAAU,wCAA+C,CAAC;AAEvE,MAAM,MAAM,iBAAiB,GAAG,cAAc,GAAG,YAAY,GAAG,OAAO,CAAC;AAExE,MAAM,WAAW,iBAAiB;IACjC,OAAO,CAAC,EAAE,iBAAiB,CAAC;CAC5B;AAED,MAAM,WAAW,cAAc;IAC9B;;;;;;;OAOG;IACH,CAAC,WAAW,CAAC,EAAE,WAAW,GAAG,SAAS,EAAE,GAAG,SAAS,GAAG,OAAO,CAAC,SAAS,EAAE,GAAG,SAAS,CAAC,CAAC;CACxF;AAED,qBAAa,mBAAmB;;gBAKnB,IAAI,EAAE,cAAc,EAAE,MAAM,EAAE,MAAM,IAAI;IAKpD,IAAI,QAAQ,IAAI,SAAS,EAAE,CAE1B;IAEK,QAAQ,CAAC,WAAW,EAAE,WAAW,GAAG,SAAS,EAAE,UAAU,EAAE,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC;IAa3F,KAAK,IAAI,IAAI;CAIb;AAED,qBAAa,SAAS;;;IAmDrB,QAAQ,CAAC,WAAW,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC,OAAO,CAAC;IAQrD;;;;OAIG;IACH,OAAO,gBAAgC;IAEvC;;OAEG;IACH,UAAU,eAEP;IAEH,IAAI,KAAK,IAAI,mBAAmB,EAAE,CAEjC;IAED;;OAEG;IACH,UAAU,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI;IAOtC;;OAEG;IACH,WAAW,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI;IAOvC;;;;OAIG;IACH,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,OAAO,CAAC,GAAG,IAAI;IAIrC;;OAEG;IACH,MAAM,CAAC,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,OAAO,CAAC,GAAG,SAAS;CAQ9C;AAED,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;AAE3D;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,MAAM,EAAE,gBAAgB,GAAG,SAAS,GAAG,SAAS,CAK5E;AAED;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,gBAAgB,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAQ5F;AAED;;;;;;GAMG;AACH,wBAAsB,QAAQ,CAAC,OAAO,EAAE,gBAAgB,EAAE,EAAE,WAAW,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC,OAAO,CAAC,CAUvG;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE;IACzC,GAAG,EAAE,MAAM,CAAC,OAAO,CAAC,GAAG,SAAS,CAAC;CACjC,WA6BA"}
+{"version":3,"file":"validation.d.ts","sourceRoot":"","sources":["../../src/components/validation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAK,SAAS,EAAE,OAAO,EAAiB,MAAM,EAAwD,MAAM,KAAK,CAAC;AAQzH,eAAO,MAAM,UAAU,wCAA+C,CAAC;AAEvE,MAAM,MAAM,iBAAiB,GAAG,cAAc,GAAG,YAAY,GAAG,OAAO,CAAC;AAExE,MAAM,WAAW,iBAAiB;IACjC,OAAO,CAAC,EAAE,iBAAiB,CAAC;CAC5B;AAED,MAAM,WAAW,cAAc;IAS9B,CAAC,WAAW,CAAC,EAAE,WAAW,GAAG,SAAS,EAAE,GAAG,SAAS,GAAG,OAAO,CAAC,SAAS,EAAE,GAAG,SAAS,CAAC,CAAC;CACxF;AAED,qBAAa,mBAAmB;;gBAKnB,IAAI,EAAE,cAAc,EAAE,MAAM,EAAE,MAAM,IAAI;IAKpD,IAAI,QAAQ,IAAI,SAAS,EAAE,CAE1B;IAEK,QAAQ,CAAC,WAAW,EAAE,WAAW,GAAG,SAAS,EAAE,UAAU,EAAE,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC;IAa3F,KAAK,IAAI,IAAI;CAIb;AAED,qBAAa,SAAS;;;IAmDrB,QAAQ,CAAC,WAAW,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC,OAAO,CAAC;IAarD,OAAO,gBAAgC;IAKvC,UAAU,eAEP;IAEH,IAAI,KAAK,IAAI,mBAAmB,EAAE,CAEjC;IAKD,UAAU,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI;IAUtC,WAAW,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI;IAYvC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,OAAO,CAAC,GAAG,IAAI;IAOrC,MAAM,CAAC,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,OAAO,CAAC,GAAG,SAAS;CAQ9C;AAED,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;AAQ3D,wBAAgB,YAAY,CAAC,MAAM,EAAE,gBAAgB,GAAG,SAAS,GAAG,SAAS,CAK5E;AAQD,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,gBAAgB,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAQ5F;AASD,wBAAsB,QAAQ,CAAC,OAAO,EAAE,gBAAgB,EAAE,EAAE,WAAW,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC,OAAO,CAAC,CAUvG;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE;IACzC,GAAG,EAAE,MAAM,CAAC,OAAO,CAAC,GAAG,SAAS,CAAC;CACjC,WA6BA"}

package/dist/components/value.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"value.d.ts","sourceRoot":"","sources":["../../src/components/value.tsx"],"names":[],"mappings":"AAEA,wBAAgB,KAAK,CAAC,KAAK,EAAE;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,OAAO,CAKV"}
+{"version":3,"file":"value.d.ts","sourceRoot":"","sources":["../../src/components/value.tsx"],"names":[],"mappings":"AAEA,wBAAgB,KAAK,CAAC,KAAK,EAAE;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,OAAO,CAIV"}

package/dist/components/value.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx } from "rvx/jsx-runtime";
-import { THEME } from "../common/theme.js";
+import styles from "@rvx/ui/theme/components/value.module.css";
 export function Value(props) {
-    const theme = THEME.current;
-    return _jsx("span", { class: [theme?.value], children: props.children });
+    return _jsx("span", { class: styles.value, children: props.children });
 }
 //# sourceMappingURL=value.js.map

package/dist/components/value.js.map

@@ -1 +1 @@
-{"version":3,"file":"value.js","sourceRoot":"","sources":["../../src/components/value.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAE3C,MAAM,UAAU,KAAK,CAAC,KAErB;IACA,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC;IAC5B,OAAO,eAAM,KAAK,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,YAChC,KAAK,CAAC,QAAQ,GACT,CAAC;AACT,CAAC"}
+{"version":3,"file":"value.js","sourceRoot":"","sources":["../../src/components/value.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,2CAA2C,CAAC;AAE/D,MAAM,UAAU,KAAK,CAAC,KAErB;IACA,OAAO,eAAM,KAAK,EAAE,MAAM,CAAC,KAAK,YAC9B,KAAK,CAAC,QAAQ,GACT,CAAC;AACT,CAAC"}

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+import "@rvx/ui/theme/global.css";
 export * from "./common/context.js";
 export * from "./common/coupling.js";
 export * from "./common/events.js";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,0BAA0B,CAAC;AACzC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,wBAAwB,CAAC;AACvC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,sBAAsB,CAAC;AACrC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qBAAqB,CAAC;AACpC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,sBAAsB,CAAC;AACrC,cAAc,kCAAkC,CAAC;AACjD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,0BAA0B,CAAC;AAElC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,0BAA0B,CAAC;AACzC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,wBAAwB,CAAC;AACvC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,sBAAsB,CAAC;AACrC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qBAAqB,CAAC;AACpC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,sBAAsB,CAAC;AACrC,cAAc,kCAAkC,CAAC;AACjD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,uBAAuB,CAAC"}

package/dist/index.js

@@ -1,3 +1,4 @@
+import "@rvx/ui/theme/global.css";
 export * from "./common/context.js";
 export * from "./common/coupling.js";
 export * from "./common/events.js";

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,0BAA0B,CAAC;AACzC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,wBAAwB,CAAC;AACvC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,sBAAsB,CAAC;AACrC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qBAAqB,CAAC;AACpC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,sBAAsB,CAAC;AACrC,cAAc,kCAAkC,CAAC;AACjD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,uBAAuB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,0BAA0B,CAAC;AAElC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,0BAA0B,CAAC;AACzC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,wBAAwB,CAAC;AACvC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,sBAAsB,CAAC;AACrC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qBAAqB,CAAC;AACpC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,sBAAsB,CAAC;AACrC,cAAc,kCAAkC,CAAC;AACjD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,uBAAuB,CAAC"}

package/package.json

@@ -12,7 +12,7 @@
 		"rvx"
 	],
 	"license": "MIT",
-	"version": "0.3.7",
+	"version": "0.4.0",
 	"type": "module",
 	"main": "./dist/index.js",
 	"sideEffects": false,
@@ -21,13 +21,18 @@
 			"types": "./dist/index.d.ts",
 			"default": "./dist/index.js"
 		},
-		"./test": {
-			"types": "./dist/test.d.ts",
-			"default": "./dist/test.js"
-		},
-		"./dist/": "./dist/"
+		"./theme/": "./theme/"
+	},
+	"scripts": {
+		"build": "tsc -p tsconfig-es.json",
+		"start": "tsc -p tsconfig-es.json -w --preserveWatchOutput"
+	},
+	"devDependencies": {
+		"@mxjp/parallel": "^1.0.2",
+		"@rvx/ui": "file:.",
+		"typescript": "^6.0.2"
 	},
 	"peerDependencies": {
-		"rvx": "^24.1.1"
+		"rvx": "^24.1.3"
 	}
 }

package/src/common/theme.tsx

@@ -1,164 +1,29 @@
-import { Context } from "rvx";
-
-export const THEME = new Context<Theme | undefined>(undefined);
-
-/**
- * A collection of class names that is used as the theme.
- *
- * @example
- * ```tsx
- * import { mount, Inject } from "rvx";
- * import { THEME, Button } from "@rvx/ui";
- *
- * import theme from "./theme.module.css";
- *
- * mount(
- *   document.body,
- *   <Inject key={THEME} value={theme}>
- *     {() => <>
- *       <Button>Click me!</Button>
- *     </>}
- *   </Inject>
- * );
- * ```
- */
-export interface Theme {
-	breadcrumbs?: string;
-	breadcrumb_item?: string;
-	breadcrumb_separator?: string;
-
-	button?: string;
-	button_default?: string;
-	button_primary?: string;
-	button_success?: string;
-	button_danger?: string;
-	button_warning?: string;
-	button_input?: string;
-	button_item?: string;
-
-	card?: string;
-	card_raw?: string;
-	card_default?: string;
-	card_info?: string;
-	card_success?: string;
-	card_warning?: string;
-	card_danger?: string;
-
-	checkbox_label?: string;
-	checkbox_padding?: string;
-	checkbox_input?: string;
-	checkbox_content?: string;
-
-	collapse?: string;
-	collapse_sized?: string;
-	collapse_view?: string;
-	collapse_alert?: string;
-	collapse_visible?: string;
-	collapse_content?: string;
-
-	column?: string;
-	column_padded?: string;
-	column_content?: string;
-	column_group?: string;
-	column_control?: string;
-
-	control_group?: string;
-	control_group_row?: string;
-	control_group_column?: string;
-
-	dialog_container?: string;
-	dialog_body?: string;
-	dialog_fadein?: string;
-	dialog_fadeout?: string;
-	dialog_scroll_view?: string;
-	dialog_scroll_view_content?: string;
-	dialog_footer?: string;
-
-	dropdown?: string;
-	dropdown_expansion?: string;
-	dropdown_scroll_area?: string;
-	dropdown_content?: string;
-	dropdown_item?: string;
-	dropdown_item_active?: string;
-
-	flex_space?: string;
-
-	heading?: string;
-
-	label?: string;
-
-	link?: string;
-
-	nav_list?: string;
-	nav_list_item?: string;
-	nav_list_item_current?: string;
-
-	notification_host?: string;
-	notification_area?: string;
-	notification?: string;
-	notification_raw?: string;
-	notification_default?: string;
-	notification_info?: string;
-	notification_success?: string;
-	notification_warning?: string;
-	notification_danger?: string;
-
-	page?: string;
-	page_center_block?: string;
-	page_scrollbar_comp?: string;
-	page_content_col?: string;
-	page_content?: string;
-
-	placeholder_area?: string;
-	placeholder_content?: string;
-	placeholder_message?: string;
-	placeholder?: string;
-
-	popover?: string;
-	popover_raw?: string;
-	popover_spike_area?: string;
-	popover_scroll_area?: string;
-	popover_spike?: string;
-	popover_content?: string;
-
-	radio_buttons?: string;
-	radio_button_label?: string;
-	radio_button_padding?: string;
-	radio_button_input?: string;
-	radio_button_content?: string;
-
-	row?: string;
-	row_padded?: string;
-	row_content?: string;
-	row_group?: string;
-	row_control?: string;
-
-	scroll_view?: string;
-	scroll_view_area?: string;
-	scroll_view_content?: string;
-	scroll_view_indicator_start?: string;
-	scroll_view_indicator_end?: string;
-	scroll_view_indicator_visible?: string;
-
-	secondary?: string;
-
-	separated_column?: string;
-	separated_row?: string;
-	has_separator?: string;
-
-	slider_host?: string;
-
-	tab_handle?: string;
-	tab_handle_current?: string;
-	tab_list?: string;
-	tab_list_padded?: string;
-	tab_panel?: string;
-
-	text_input?: string;
-
-	text?: string;
-
-	error_message?: string;
-
-	value?: string;
+import { $, Expression, teardown, watch } from "rvx";
+import { useAbortSignal } from "rvx/async";
+
+export type Theme = "dark" | "light";
+
+export function watchTheme(value?: Expression<Theme | undefined>) {
+	const theme = $<Theme>(undefined!);
+
+	watch(value, expr => {
+		if (expr === undefined) {
+			const dark = window.matchMedia("(prefers-color-scheme: dark)");
+			const update = () => {
+				theme.value = dark.matches ? "dark" : "light";
+			};
+			dark.addEventListener("change", update, { signal: useAbortSignal() });
+			update();
+		} else {
+			theme.value = expr;
+		}
+	});
+
+	watch(theme, theme => {
+		const className = `rvx-${theme}`;
+		document.body.classList.add(className);
+		teardown(() => {
+			document.body.classList.remove(className);
+		});
+	});
 }

package/src/components/breadcrumbs.tsx

@@ -1,6 +1,6 @@
+import styles from "@rvx/ui/theme/components/breadcrumbs.module.css";
 import { ClassValue, Expression, For, Inject, Show, StyleValue, SVG, XMLNS } from "rvx";
 import { Action } from "../common/events.js";
-import { THEME } from "../common/theme.js";
 import { Link } from "./link.js";
 
 export interface Breadcrumb {
@@ -13,19 +13,18 @@ export function Breadcrumbs(props: {
 	class?: ClassValue;
 	style?: StyleValue;
 }) {
-	const theme = THEME.current;
 	return <div
 		class={[
-			theme?.breadcrumbs,
+			styles.breadcrumbs,
 			props.class,
 		]}
 		style={props.style}
 	>
 		<For each={props.items}>
 			{(item, index) => {
-				return <div class={theme?.breadcrumb_item}>
+				return <div class={styles.item}>
 					<Show when={() => index() !== 0}>
-						{() => <span class={theme?.breadcrumb_separator}>
+						{() => <span class={styles.separator}>
 							<Inject context={XMLNS} value={SVG}>
 								{() => <svg viewBox="0 0 8 16" preserveAspectRatio="none">
 									<path d="M2,14 L6,2" stroke-width="1.75" stroke-linecap="round" />

package/src/components/button.tsx

@@ -1,8 +1,8 @@
+import styles from "@rvx/ui/theme/components/button.module.css";
 import { ClassValue, Expression, get, StyleValue } from "rvx";
 import { isPending } from "rvx/async";
 import { optionalString } from "rvx/convert";
 import { Action, handleActionEvent, isKey } from "../common/events.js";
-import { THEME } from "../common/theme.js";
 import { Validator } from "./validation.js";
 
 export type ButtonType = "button" | "submit" | "reset" | "menu";
@@ -50,7 +50,6 @@ export function Button(props: {
 
 	children?: unknown;
 }): unknown {
-	const theme = THEME.current;
 	const disabled = () => isPending() || get(props.disabled);
 
 	function action(event: Event) {
@@ -64,8 +63,8 @@ export function Button(props: {
 		type={() => get(props.type) ?? "button"}
 		disabled={disabled}
 		class={[
-			theme?.button,
-			() => theme?.[`button_${get(props.variant) ?? "default"}`],
+			styles.button,
+			() => styles[get(props.variant) ?? "default"],
 			props.class,
 		]}
 		style={props.style}

package/src/components/card.tsx

@@ -1,5 +1,5 @@
+import styles from "@rvx/ui/theme/components/card.module.css";
 import { ClassValue, Expression, map, StyleValue } from "rvx";
-import { THEME } from "../common/theme.js";
 import { SizeContext } from "../common/types.js";
 import { Column } from "./column.js";
 
@@ -7,19 +7,18 @@ export type CardVariant = "default" | "info" | "success" | "warning" | "danger";
 
 export function Card(props: {
 	variant?: Expression<CardVariant | undefined>;
-	size?: SizeContext;
+	size?: Expression<SizeContext | undefined>;
 	raw?: boolean;
 	class?: ClassValue;
 	style?: StyleValue;
 	children?: unknown;
 }): unknown {
-	const theme = THEME.current;
 	return <div
 		class={[
 			props.class,
-			theme?.card,
-			props.raw ? theme?.card_raw : undefined,
-			map(props.variant, variant => theme?.[`card_${variant ?? "default"}`]),
+			styles.card,
+			props.raw ? styles.raw : undefined,
+			map(props.variant, variant => styles[variant ?? "default"]),
 		]}
 		style={props.style}
 	>

package/src/components/checkbox.tsx

@@ -1,11 +1,10 @@
 import { ClassValue, Expression, get, Signal, StyleValue, uniqueId, watch } from "rvx";
 import { isPending } from "rvx/async";
-
 import { optionalString, string } from "rvx/convert";
 import { ID_PAIR } from "../common/id-pairs.js";
-import { THEME } from "../common/theme.js";
 import { Text } from "./text.js";
 import { closestValidator } from "./validation.js";
+import styles from "@rvx/ui/theme/components/checkbox.module.css";
 
 export function Checkbox(props: {
 	checked?: Expression<boolean | undefined>;
@@ -19,7 +18,6 @@ export function Checkbox(props: {
 }): unknown {
 	const pairId = ID_PAIR.current.consume();
 	const id = props.children === undefined ? pairId : uniqueId();
-	const theme = THEME.current;
 
 	const disabled = props.checked instanceof Signal
 		? () => isPending() || get(props.disabled)
@@ -30,7 +28,7 @@ export function Checkbox(props: {
 	const input = <input
 		id={id}
 		type="checkbox"
-		class={theme?.checkbox_input}
+		class={styles.input}
 		on:input={() => {
 			if (props.checked instanceof Signal) {
 				props.checked.value = input.checked;
@@ -51,13 +49,13 @@ export function Checkbox(props: {
 	return <label
 		for={id}
 		class={[
-			theme?.checkbox_label,
+			styles.label,
 			props.class,
 		]}
 		style={props.style}
 	>
-		{theme?.checkbox_padding ? <div class={theme.checkbox_padding}>{input}</div> : input}
-		<Text class={theme?.checkbox_content}>
+		<div class={styles.padding}>{input}</div>
+		<Text class={styles.content}>
 			{props.children}
 		</Text>
 	</label>;

package/src/components/collapse.tsx

@@ -1,7 +1,7 @@
+import styles from "@rvx/ui/theme/components/collapse.module.css";
 import { $, ClassValue, Component, Event, Expression, For, get, map, Signal, StyleValue, teardown, watch } from "rvx";
 import { useMicrotask, useTimeout } from "rvx/async";
 import { optionalString } from "rvx/convert";
-import { THEME } from "../common/theme.js";
 import { AriaLive, AriaRelevant } from "../common/types.js";
 
 export function Collapse(props: {
@@ -16,11 +16,10 @@ export function Collapse(props: {
 	"aria-relevant"?: Expression<AriaRelevant | undefined>;
 	"aria-atomic"?: Expression<boolean | undefined>;
 }): unknown {
-	const theme = THEME.current;
 	const alert = $(false);
 	const size = $<number | undefined>(undefined);
 
-	const content = <div class={theme?.collapse_content}>
+	const content = <div class={styles.content}>
 		{props.children}
 	</div> as HTMLDivElement;
 
@@ -46,6 +45,7 @@ export function Collapse(props: {
 		}
 	});
 
+	const transition = $(false);
 	let visible = props.visible;
 	if (props.fadein !== undefined) {
 		const visibleSig = visible = $(false);
@@ -68,10 +68,10 @@ export function Collapse(props: {
 	const root = <div
 		inert={map(props.visible, v => !v)}
 		class={[
-			theme?.collapse,
-			() => size.value === undefined ? undefined : theme?.collapse_sized,
-			() => alert.value ? theme?.collapse_alert : undefined,
-			map(visible, v => v ? theme?.collapse_visible : undefined),
+			styles.collapse,
+			() => size.value === undefined || !transition.value ? undefined : styles.sized,
+			() => alert.value ? styles.alert : undefined,
+			map(visible, v => v ? styles.visible : undefined),
 			props.class,
 		]}
 		style={[
@@ -85,12 +85,25 @@ export function Collapse(props: {
 		aria-relevant={props["aria-relevant"]}
 		aria-atomic={optionalString(props["aria-atomic"])}
 	>
-		{theme?.collapse_view
-			? <div class={theme.collapse_view}>
-				{content}
-			</div>
-			: content}
+		<div class={styles.view}>
+			{content}
+		</div>
 	</div> as HTMLDivElement;
+
+	watch(visible, () => {
+		transition.value = true;
+		useMicrotask(() => {
+			const duration = parseInt(getComputedStyle(root).getPropertyValue("--layout-transition-ms"));
+			if (Number.isSafeInteger(duration)) {
+				useTimeout(() => {
+					transition.value = false;
+				}, duration);
+			} else {
+				transition.value = false;
+			}
+		});
+	});
+
 	return root;
 }
 
@@ -109,7 +122,6 @@ export function CollapseFor<T>(props: {
 	each: Expression<Iterable<CollapseItem<T>>>;
 	children: Component<T>;
 }): unknown {
-
 	interface Entry {
 		/** item */
 		i: CollapseItem<T>;