@typed/ui 1.0.0-beta.6 → 1.0.0-beta.7

package/dist/Select.js

@@ -1,15 +1,13 @@
 /**
- * Select keeps popover visibility, active option, and selected value separate. A native button
- * targets manual-popover listbox content; keyboard movement and typeahead update active state
- * before selection closes the popover.
+ * A native popover-backed listbox with separate selection, focus, and visibility.
+ * Unlike Form.Select, these options are divs rather than native select options.
+ * Pass one collection to Content and its Options for registered keyboard navigation.
  *
- * @remarks
- * The module keeps policy, state transitions, and DOM rendering separable so applications can use
- * the state and pure operations without mounting UI, or supply custom hosts without replacing native
- * events and browser-owned focus.
+ * Read the [Select guide](/explore/ui-select) for a complete example.
  *
+ * [APG interaction reference](https://www.w3.org/WAI/ARIA/apg/patterns/listbox/).
  * @since 1.0.0
- * @category modules
+ * @category Overview
  * @packageDocumentation
  */
 import * as Effect from "effect/Effect";
@@ -26,15 +24,9 @@ const invokers = new WeakMap();
  * Effect Schema used by makeState to encode, decode, and hydrate Select state.
  *
  * @remarks
- * ## Why
- *
  * A public schema makes hydration and serialized state use the same runtime validation as direct
  * construction.
  *
- * ## Ownership and lifetime
- *
- * This declaration is data or schema metadata and acquires no resources.
- *
  * @example
  * ```ts
  * import * as Schema from "effect/Schema";
@@ -43,7 +35,7 @@ const invokers = new WeakMap();
  * const decodeState = Schema.decodeUnknownEffect(Select.StateSchema);
  * ```
  * @since 1.0.0
- * @category schemas
+ * @category Hydration schemas
  */
 export const StateSchema = Schema.Struct({
     id: Schema.String,
@@ -60,12 +52,8 @@ export const StateSchema = Schema.Struct({
  * false, and loop true.
  *
  * @remarks
- * ## Why
- *
  * State and collection ownership can be composed and tested independently from any renderer.
  *
- * ## Ownership and lifetime
- *
  * The returned Effect creates the RefSubject when run. That state is renderer-independent;
  * collection registrations belong to the separate Scope that runs register or ref, not to state
  * creation.
@@ -84,7 +72,7 @@ export const StateSchema = Schema.Struct({
  * );
  * ```
  * @since 1.0.0
- * @category constructors
+ * @category State construction
  */
 export function makeState(initial) {
     return RefSubject.hydrate(StateSchema, {
@@ -102,12 +90,8 @@ export function makeState(initial) {
  * Creates a scoped Collection for Select items.
  *
  * @remarks
- * ## Why
- *
  * State and collection ownership can be composed and tested independently from any renderer.
  *
- * ## Ownership and lifetime
- *
  * The returned Effect allocates the RefSubject in the caller's Scope. Each later registration is
  * owned by the Scope that runs register, independently of this construction Effect.
  *
@@ -124,31 +108,18 @@ export function makeState(initial) {
  * );
  * ```
  * @since 1.0.0
- * @category constructors
+ * @category State construction
  */
 export const makeCollection = Collection.makeState;
 /**
- * Sets selected value and active id, then closes the popover.
+ * Commits an option ID and value, then marks the popup closed.
  *
  * @remarks
- * ## Why
- *
- * The operation exposes Select's transition directly so callers can compose it in Effect programs
- * and native event handlers.
- *
- * ## Ownership and lifetime
- *
- * The returned Effect performs the update or DOM side effect only when run, preserves the declared
- * error and service channels, and retains no resources after completion.
- *
- * ## Example
- *
- * Import with `import { select } from "@typed/ui/Select";` Extend the [Select.makeState runnable
- * setup](/reference/%40typed%2Fui%2FSelect%23makeState). Inside the linked Effect program invoke
- * `yield* select(state, "utc", "UTC")`, then read state to observe selection and active focus
- * update together while the popup closes.
+ * This Effect changes state only. It does not check collection membership or move focus itself;
+ * the mounted popover observes the visibility change. Keep id and value consistent with the
+ * option being selected.
  * @since 1.0.0
- * @category combinators
+ * @category State transitions
  */
 export function select(state, id, value) {
     return RefSubject.update(state, (current) => ({ ...current, activeId: id, value, open: false }));
@@ -194,54 +165,59 @@ function invokerRef(state) {
     });
 }
 /**
- * Renders the native button that targets listbox popover content and opens it on ArrowDown.
+ * Renders the native button that toggles the select listbox popover.
  *
  * @remarks
- * ## Why
- *
- * The component applies the family behavior while leaving callers free to supply a custom host
- * through the shared DOM boundary.
+ * The generated button ID labels Content; popovertarget points to state.id. ArrowDown invokes
+ * the native button click. Content synchronizes native toggle events with open state. Render a
+ * useful name containing the current choice; the trigger does not format selected values for
+ * you.
  *
- * ## Ownership and lifetime
- *
- * The returned Fx installs DOM refs, native listeners, state subscriptions, and optional
- * collection registrations only when rendered. The rendering Scope removes those resources;
- * unrelated nodes and attributes remain caller-owned.
- *
- * ## Example
+ * @example
+ * ```ts
+ * import { RefSubject } from "@typed/fx";
+ * import { html } from "@typed/template";
+ * import { component } from "@typed/ui/Component";
+ * import * as Select from "@typed/ui/Select";
  *
- * Import with `import { Trigger } from "@typed/ui/Select";` Extend the [Select.makeState runnable
- * setup](/reference/%40typed%2Fui%2FSelect%23makeState). Replace the linked program's final
- * snapshot read with `Trigger({ state, content: "Choose timezone" })`; render that Fx before the
- * same Scope closes.
+ * export const DensityPicker = component(function* () {
+ *   const state = yield* Select.makeState({ id: "density-options", value: "comfortable" });
+ *   const collection = yield* Select.makeCollection();
+ *   const label = RefSubject.map(state, ({ value }) =>
+ *     value === "compact" ? "Density: compact" : "Density: comfortable",
+ *   );
+ *   return html`<div class="density-picker">
+ *     ${Select.Trigger({ state, content: label })}
+ *     ${Select.Content({
+ *       state, collection,
+ *       content: [
+ *         Select.Option({
+ *           state, collection, id: "density-comfortable", value: "comfortable",
+ *           textValue: "Comfortable", content: "Comfortable",
+ *         }),
+ *         Select.Option({
+ *           state, collection, id: "density-compact", value: "compact",
+ *           textValue: "Compact", content: "Compact",
+ *         }),
+ *       ],
+ *     })}
+ *   </div>`;
+ * });
+ * ```
  * @since 1.0.0
- * @category components
+ * @category Controls
  */
 export function Trigger(options, host) {
     return Dom.renderHost()(options, host, triggerProps(options), options.content, (props, content) => html `<button ...${props}>${content}</button>`);
 }
 /**
- * Consumer-facing alias of the canonical Select component with identical behavior and lifetime.
+ * Alias of Trigger.
  *
  * @remarks
- * ## Why
- *
- * The component applies the family behavior while leaving callers free to supply a custom host
- * through the shared DOM boundary.
- *
- * ## Ownership and lifetime
- *
- * The alias acquires nothing. Rendering it has exactly the canonical component's Scope and DOM
- * ownership contract.
- *
- * ## Example
- *
- * Import with `import { Select } from "@typed/ui/Select";` Extend the [Select.makeState runnable
- * setup](/reference/%40typed%2Fui%2FSelect%23makeState). Replace the linked program's final
- * snapshot read with `Select({ state, content: "Choose timezone" })`; render that Fx before the
- * same Scope closes.
+ * Calling Select alone creates only the invoker button. Compose Content and Option for the popup
+ * choice surface; use Form.Select for a native select element.
  * @since 1.0.0
- * @category components
+ * @category Controls
  */
 export const Select = Trigger;
 function contentProps(options) {
@@ -323,28 +299,16 @@ function contentProps(options) {
     });
 }
 /**
- * Renders manual-popover listbox content and handles Arrow keys, Enter, Escape, and typeahead.
+ * Renders the manual-popover listbox and coordinates registered keyboard movement.
  *
  * @remarks
- * ## Why
- *
- * The component applies the family behavior while leaving callers free to supply a custom host
- * through the shared DOM boundary.
- *
- * ## Ownership and lifetime
- *
- * The returned Fx installs DOM refs, native listeners, state subscriptions, and optional
- * collection registrations only when rendered. The rendering Scope removes those resources;
- * unrelated nodes and attributes remain caller-owned.
- *
- * ## Example
- *
- * Import with `import { Content } from "@typed/ui/Select";` Extend the [Select.makeState runnable
- * setup](/reference/%40typed%2Fui%2FSelect%23makeState). Replace the linked program's final
- * snapshot read with `Content({ state, content: "Timezones" })`; render that Fx before the same
- * Scope closes.
+ * With a collection, arrows and Home/End move focus, buffered typeahead locates options,
+ * Enter/Space commits the active choice, and Escape closes with invoker focus restoration.
+ * Opening focuses a registered option matching the selected value; an unmatched or null value
+ * does not choose the first option. Manual popover mode does not imply auto-mode outside-click
+ * dismissal.
  * @since 1.0.0
- * @category components
+ * @category Controls
  */
 export function Content(options, host) {
     return Dom.renderHost()(options, host, contentProps(options), options.content, (props, content) => {
@@ -375,29 +339,15 @@ function optionProps(options) {
     });
 }
 /**
- * Renders and optionally registers a selectable option; focus updates activeId and click selects
- * unless disabled.
+ * Renders a selectable listbox option with distinct active and selected state.
  *
  * @remarks
- * ## Why
- *
- * The component applies the family behavior while leaving callers free to supply a custom host
- * through the shared DOM boundary.
- *
- * ## Ownership and lifetime
- *
- * The returned Fx installs DOM refs, native listeners, state subscriptions, and optional
- * collection registrations only when rendered. The rendering Scope removes those resources;
- * unrelated nodes and attributes remain caller-owned.
- *
- * ## Example
- *
- * Import with `import { Option } from "@typed/ui/Select";` Extend the [Select.makeState runnable
- * setup](/reference/%40typed%2Fui%2FSelect%23makeState). Replace the linked program's final
- * snapshot read with `Option({ state, id: "utc", value: "UTC", content: "UTC" })`; render that Fx
- * before the same Scope closes.
+ * Click commits value and closes the popup; focus updates activeId without committing a new
+ * value. Register every option with the same collection used by Content for keyboard navigation.
+ * Supply textValue for readable typeahead when value is an internal code. This div is not a
+ * native form field.
  * @since 1.0.0
- * @category components
+ * @category Controls
  */
 export function Option(options, host) {
     return Dom.renderHost()(options, host, optionProps(options), options.content, (props, content) => html `<div ...${props}>${content}</div>`);

package/dist/Separator.d.ts

@@ -1,28 +1,26 @@
+/**
+ * A non-focusable semantic boundary with an orientation attribute.
+ * CSS draws the line; WindowSplitter supplies the separate adjustable-pane interaction.
+ *
+ * Read the [Separator guide](/explore/ui-separator) for a complete example.
+ *
+ * [Platform reference](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/separator_role).
+ * @since 1.0.0
+ * @category Overview
+ * @packageDocumentation
+ */
 import type * as Scope from "effect/Scope";
 import type { Fx } from "@typed/fx/Fx";
 import { type Renderable, type RenderEvent, type RenderTemplate } from "@typed/template";
 import * as Dom from "./Dom.js";
 import type { HostResult } from "./Dom/Types.js";
 /**
- * Options for a non-interactive ARIA separator.
- * @remarks
- * ## Why
- * Orientation communicates whether the visual division is horizontal or
- * vertical without implying splitter interaction.
- * ## Ownership and lifetime
- * The model is inert; dynamic orientation follows the rendered Scope.
- * @since 1.0.0
- * @category models
  */
 export interface SeparatorOptions extends Dom.HostOptions<HTMLDivElement> {
-    /** Separator orientation, defaulting to horizontal.
-     * @remarks
-     * ## Why
-     * Assistive technology uses orientation to interpret the division.
-     * ## Ownership and lifetime
-     * The dynamic attribute subscription ends with the component Scope.
+    /**
+     * Separator orientation, defaulting to horizontal.
      * @since 1.0.0
-     * @category accessibility
+     * @category Keyboard navigation
      */
     readonly orientation?: Renderable.Any<"horizontal" | "vertical" | null | undefined>;
 }
@@ -32,22 +30,28 @@ declare function internalProps<const Options extends SeparatorOptions>({ propert
 };
 type SeparatorInternalProps<Options extends SeparatorOptions> = ReturnType<typeof internalProps<Options>>;
 /**
- * Renders a non-focusable element with `role="separator"`.
+ * Renders a non-interactive semantic division.
+ *
  * @remarks
- * ## Why
- * This component expresses a semantic division. Use `WindowSplitter` when the
- * separator changes pane sizes and therefore requires keyboard interaction.
- * ## Ownership and lifetime
- * Running the Fx owns its reactive attribute until the Effect Scope closes. A
- * custom host must preserve the role and orientation.
+ * orientation defaults to horizontal and changes aria-orientation, not layout or dimensions.
+ * Supply the visible line through CSS. Do not make this host focusable to imitate a resizer;
+ * WindowSplitter owns that separate interaction.
+ *
  * @example
  * ```ts
- * import { Separator } from "@typed/ui/Separator"
+ * import { html } from "@typed/template";
+ * import { Heading } from "@typed/ui/Heading";
+ * import { Separator } from "@typed/ui/Separator";
  *
- * const divider = Separator({ orientation: "vertical" })
+ * export const AccountSummary = html`<section>
+ *     ${Heading({ level: 2, content: "Account summary" })}
+ *     <p>Personal account</p>
+ *     ${Separator({ props: { class: "summary-divider" } })}
+ *     <p>Next renewal: September 30</p>
+ *   </section>`;
  * ```
  * @since 1.0.0
- * @category components
+ * @category Structure and naming
  */
 export declare function Separator<const Options extends SeparatorOptions, const Host extends HostResult = never>(options: Options, host?: Dom.HostOverride<Dom.RenderHostProps<Options, SeparatorInternalProps<Options>>, "", Host>): Fx<RenderEvent, Renderable.Error<Options | Host>, Renderable.Services<Options | Host> | Scope.Scope | RenderTemplate>;
 export {};

package/dist/Separator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Separator.d.ts","sourceRoot":"","sources":["../src/Separator.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,cAAc,CAAC;AAC3C,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAQ,KAAK,UAAU,EAAE,KAAK,WAAW,EAAE,KAAK,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAC/F,OAAO,KAAK,GAAG,MAAM,UAAU,CAAC;AAChC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEjD;;;;;;;;;;GAUG;AACH,MAAM,WAAW,gBAAiB,SAAQ,GAAG,CAAC,WAAW,CAAC,cAAc,CAAC;IACvE;;;;;;;;OAQG;IACH,QAAQ,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC,GAAG,CAAC,YAAY,GAAG,UAAU,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;CACrF;AAED,iBAAS,aAAa,CAAC,KAAK,CAAC,OAAO,SAAS,gBAAgB,EAAE,EAC7D,QAAQ,GACT,EAAE,GAAG,CAAC,oBAAoB,CAAC,OAAO,CAAC;IACzB,IAAI;IAAe,kBAAkB;EAC/C;AAED,KAAK,sBAAsB,CAAC,OAAO,SAAS,gBAAgB,IAAI,UAAU,CACxE,OAAO,aAAa,CAAC,OAAO,CAAC,CAC9B,CAAC;AAEF;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,SAAS,CACvB,KAAK,CAAC,OAAO,SAAS,gBAAgB,EACtC,KAAK,CAAC,IAAI,SAAS,UAAU,GAAG,KAAK,EAErC,OAAO,EAAE,OAAO,EAChB,IAAI,CAAC,EAAE,GAAG,CAAC,YAAY,CAAC,GAAG,CAAC,eAAe,CAAC,OAAO,EAAE,sBAAsB,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,CAAC,GAC/F,EAAE,CACH,WAAW,EACX,UAAU,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,EAChC,UAAU,CAAC,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,KAAK,CAAC,KAAK,GAAG,cAAc,CACnE,CAQA"}
+{"version":3,"file":"Separator.d.ts","sourceRoot":"","sources":["../src/Separator.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,OAAO,KAAK,KAAK,KAAK,MAAM,cAAc,CAAC;AAC3C,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAQ,KAAK,UAAU,EAAE,KAAK,WAAW,EAAE,KAAK,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAC/F,OAAO,KAAK,GAAG,MAAM,UAAU,CAAC;AAChC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEjD;GACG;AACH,MAAM,WAAW,gBAAiB,SAAQ,GAAG,CAAC,WAAW,CAAC,cAAc,CAAC;IACvE;;;;OAIG;IACH,QAAQ,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC,GAAG,CAAC,YAAY,GAAG,UAAU,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;CACrF;AAED,iBAAS,aAAa,CAAC,KAAK,CAAC,OAAO,SAAS,gBAAgB,EAAE,EAC7D,QAAQ,GACT,EAAE,GAAG,CAAC,oBAAoB,CAAC,OAAO,CAAC;IACzB,IAAI;IAAe,kBAAkB;EAC/C;AAED,KAAK,sBAAsB,CAAC,OAAO,SAAS,gBAAgB,IAAI,UAAU,CACxE,OAAO,aAAa,CAAC,OAAO,CAAC,CAC9B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,SAAS,CACvB,KAAK,CAAC,OAAO,SAAS,gBAAgB,EACtC,KAAK,CAAC,IAAI,SAAS,UAAU,GAAG,KAAK,EAErC,OAAO,EAAE,OAAO,EAChB,IAAI,CAAC,EAAE,GAAG,CAAC,YAAY,CAAC,GAAG,CAAC,eAAe,CAAC,OAAO,EAAE,sBAAsB,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,CAAC,GAC/F,EAAE,CACH,WAAW,EACX,UAAU,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,EAChC,UAAU,CAAC,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,KAAK,CAAC,KAAK,GAAG,cAAc,CACnE,CAQA"}

package/dist/Separator.js

@@ -4,22 +4,28 @@ function internalProps({ property, }) {
     return { role: "separator", "aria-orientation": property("orientation", "horizontal") };
 }
 /**
- * Renders a non-focusable element with `role="separator"`.
+ * Renders a non-interactive semantic division.
+ *
  * @remarks
- * ## Why
- * This component expresses a semantic division. Use `WindowSplitter` when the
- * separator changes pane sizes and therefore requires keyboard interaction.
- * ## Ownership and lifetime
- * Running the Fx owns its reactive attribute until the Effect Scope closes. A
- * custom host must preserve the role and orientation.
+ * orientation defaults to horizontal and changes aria-orientation, not layout or dimensions.
+ * Supply the visible line through CSS. Do not make this host focusable to imitate a resizer;
+ * WindowSplitter owns that separate interaction.
+ *
  * @example
  * ```ts
- * import { Separator } from "@typed/ui/Separator"
+ * import { html } from "@typed/template";
+ * import { Heading } from "@typed/ui/Heading";
+ * import { Separator } from "@typed/ui/Separator";
  *
- * const divider = Separator({ orientation: "vertical" })
+ * export const AccountSummary = html`<section>
+ *     ${Heading({ level: 2, content: "Account summary" })}
+ *     <p>Personal account</p>
+ *     ${Separator({ props: { class: "summary-divider" } })}
+ *     <p>Next renewal: September 30</p>
+ *   </section>`;
  * ```
  * @since 1.0.0
- * @category components
+ * @category Structure and naming
  */
 export function Separator(options, host) {
     return Dom.renderHost()(options, host, internalProps, "", (props) => html `<div ...${props}></div>`);

package/dist/Slider.d.ts

@@ -1,68 +1,43 @@
+/**
+ * Native range input publishing numeric updates during input.
+ * Keep programmatic values coherent with bounds and control expensive downstream work separately.
+ *
+ * Read the [Slider guide](/explore/ui-slider) for a complete example.
+ *
+ * [APG interaction reference](https://www.w3.org/WAI/ARIA/apg/patterns/slider/).
+ * @since 1.0.0
+ * @category Overview
+ * @packageDocumentation
+ */
 import * as Effect from "effect/Effect";
 import * as Schema from "effect/Schema";
 import { RefSubject } from "@typed/fx";
 import { EventHandler, type Renderable } from "@typed/template";
 import * as Dom from "./Dom.js";
 import type { HostResult } from "./Dom/Types.js";
-/** Current renderer-independent slider value.
- * @remarks
- * ## Why
- * Value logic remains testable without mounting a range input.
- * ## Ownership and lifetime
- * Plain state is resource-free; RefSubject ownership is Scope-based.
- * @since 1.0.0
- * @category state
+/**
  */
 export interface State {
-    /** Finite value reflected by the native input.
-     * @remarks
-     * ## Why
-     * A single numeric source prevents state and DOM drift.
-     * ## Ownership and lifetime
-     * Plain data acquires no resources.
-     * @since 1.0.0
-     * @category state
+    /**
      */
     readonly value: number;
 }
-/** Initial slider value.
- * @remarks
- * ## Why
- * Explicit state gives SSR and hydration the same numeric snapshot.
- * ## Ownership and lifetime
- * Configuration is inert.
- * @since 1.0.0
- * @category state
+/**
  */
 export interface InitialState {
-    /** Finite initial value.
-     * @remarks
-     * ## Why
-     * It seeds the synchronized input state.
-     * ## Ownership and lifetime
-     * Plain data retains no resources.
-     * @since 1.0.0
-     * @category state
+    /**
      */
     readonly value: number;
 }
-/** Schema for slider hydration state.
- * @remarks
- * ## Why
- * Finite validation prevents invalid serialized range values.
- * ## Ownership and lifetime
- * The immutable schema acquires no resources.
- * @since 1.0.0
- * @category schemas
+/**
  */
 export declare const StateSchema: Schema.Struct<{
     readonly value: Schema.Finite;
 }>;
-/** Creates hydrated slider state.
+/**
+ * Creates hydrated slider state.
  * @remarks
- * ## Why
  * State can be composed and tested independently of the renderer.
- * ## Ownership and lifetime
  * The calling Effect Scope owns the returned RefSubject.
  * @example
  * ```ts
@@ -74,80 +49,47 @@ export declare const StateSchema: Schema.Struct<{
  * })
  * ```
  * @since 1.0.0
- * @category constructors
+ * @category State construction
  */
 export declare function makeState(initial: InitialState): Effect.Effect<RefSubject.HydratedRefSubject<{
     readonly value: number;
 }, Schema.SchemaError, never, never>, never, import("effect/Scope").Scope>;
-/** Updates the synchronized slider value.
- * @remarks
- * ## Why
- * An explicit Effect transition preserves RefSubject failures and services.
- * ## Ownership and lifetime
- * It uses the existing state lifetime and acquires no resource.
- * @example
- * ```ts
- * import { Effect } from "effect"
- * import * as Slider from "@typed/ui/Slider"
+/**
+ * Assigns a range value without clamping or snapping it.
  *
- * const program = Effect.gen(function* () {
- *   const state = yield* Slider.makeState({ value: 25 })
- *   yield* Slider.setValue(state, 50)
- * })
- * ```
+ * @remarks
+ * min, max, and step belong to the native input options and are not consulted here. Validate or
+ * normalize programmatic values before assignment so the subject and browser-sanitized range
+ * value stay consistent.
  * @since 1.0.0
- * @category state
+ * @category State transitions
  */
 export declare function setValue<E, R>(state: RefSubject.RefSubject<State, E, R>, value: number): Effect.Effect<State, E, R>;
-/** Options for a native range input.
- * @remarks
- * ## Why
- * Native range semantics provide keyboard and accessibility behavior while
- * Typed synchronizes renderer-independent state.
- * ## Ownership and lifetime
- * Options are inert; the mounted component owns subscriptions by Scope.
- * @since 1.0.0
- * @category models
+/**
  */
 export interface SliderOptions extends Dom.HostOptions<HTMLInputElement> {
-    /** Hydrated state synchronized to the input.
-     * @remarks
-     * ## Why
-     * One source serves SSR, UI, and state-only tests.
-     * ## Ownership and lifetime
-     * The component borrows state and subscribes only while mounted.
+    /**
+     * Hydrated state synchronized to the input.
      * @since 1.0.0
-     * @category state
+     * @category State connection
      */
     readonly state: RefSubject.HydratedRefSubject<State, Schema.SchemaError>;
-    /** Native minimum value.
-     * @remarks
-     * ## Why
-     * The platform uses this bound for keyboard and constraint behavior.
-     * ## Ownership and lifetime
-     * Dynamic attributes follow the component Scope.
+    /**
+     * Native minimum value.
      * @since 1.0.0
-     * @category attributes
+     * @category Numeric bounds
      */
     readonly min?: Renderable.Any<number | null | undefined>;
-    /** Native maximum value.
-     * @remarks
-     * ## Why
-     * The platform uses this bound for keyboard and constraint behavior.
-     * ## Ownership and lifetime
-     * Dynamic attributes follow the component Scope.
+    /**
+     * Native maximum value.
      * @since 1.0.0
-     * @category attributes
+     * @category Numeric bounds
      */
     readonly max?: Renderable.Any<number | null | undefined>;
-    /** Native step value or `"any"`.
-     * @remarks
-     * ## Why
-     * Step semantics remain delegated to the input element.
-     * ## Ownership and lifetime
-     * Dynamic attributes follow the component Scope.
+    /**
+     * Native step value or `"any"`.
      * @since 1.0.0
-     * @category attributes
+     * @category Numeric bounds
      */
     readonly step?: Renderable.Any<number | "any" | null | undefined>;
 }
@@ -162,26 +104,37 @@ declare function internalProps<const Options extends SliderOptions>(options: Opt
     readonly ref: RefSubject.HydratedRefSubject<State, Schema.SchemaError, never, never>;
 };
 type SliderInternalProps<Options extends SliderOptions> = ReturnType<ReturnType<typeof internalProps<Options>>>;
-/** Renders a native range input synchronized with hydrated state.
+/**
+ * Renders a native range input whose input events update numeric state.
+ *
  * @remarks
- * ## Why
- * Browser pointer, keyboard, constraints, and accessibility remain intact;
- * input events update the same RefSubject consumed elsewhere.
- * ## Ownership and lifetime
- * Running the Fx owns native listeners and subscriptions in its Scope. A
- * custom host must preserve type, value, range props, and the hydration ref.
+ * Dragging publishes through input, so expensive downstream work should control its own update
+ * rate. Native min/max/step, keyboard interaction, and pointer behavior stay with the browser.
+ * Supply a label and a unit-bearing readout; a custom non-input host must implement the
+ * interaction itself.
+ *
  * @example
  * ```ts
- * import { Effect } from "effect"
- * import * as Slider from "@typed/ui/Slider"
+ * import { RefSubject } from "@typed/fx";
+ * import { html } from "@typed/template";
+ * import { component } from "@typed/ui/Component";
+ * import * as Slider from "@typed/ui/Slider";
  *
- * const program = Effect.gen(function* () {
- *   const state = yield* Slider.makeState({ value: 50 })
- *   return Slider.Slider({ state, min: 0, max: 100 })
- * })
+ * export const ZoomControl = component(function* () {
+ *   const state = yield* Slider.makeState({ value: 100 });
+ *   const percentage = RefSubject.map(state, ({ value }) => `${value}%`);
+ *   return html`<div class="zoom-control">
+ *     <label for="preview-zoom">Preview zoom</label>
+ *     ${Slider.Slider({
+ *       state, min: 50, max: 200, step: 10,
+ *       props: { id: "preview-zoom", name: "zoom", "aria-valuetext": percentage },
+ *     })}
+ *     <output for="preview-zoom">${percentage}</output>
+ *   </div>`;
+ * });
  * ```
  * @since 1.0.0
- * @category components
+ * @category Native controls
  */
 export declare function Slider<const Options extends SliderOptions, const Host extends HostResult = never>(options: Options, host?: Dom.HostOverride<Dom.RenderHostProps<Options, SliderInternalProps<Options>>, "", Host>): import("./Dom/Types.js").HostComponent<Host | Options>;
 export {};