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

package/dist/Carousel.js

@@ -8,6 +8,8 @@
  * the state and pure operations without mounting UI, or supply custom hosts without replacing native
  * events and browser-owned focus.
  *
+ * Learn the interaction in the [Carousel guide](/explore/ui-carousel).
+ *
  * @since 1.0.0
  * @category modules
  * @packageDocumentation
@@ -23,15 +25,6 @@ import * as Dom from "./Dom.js";
  * Effect Schema used by makeState to encode, decode, and hydrate Carousel 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";
@@ -40,19 +33,13 @@ import * as Dom from "./Dom.js";
  * const decodeState = Schema.decodeUnknownEffect(Carousel.StateSchema);
  * ```
  * @since 1.0.0
- * @category schemas
+ * @category Slide and rotation state
  */
 export const StateSchema = Schema.Struct({ activeId: Schema.String, paused: Schema.Boolean });
 /**
  * Creates hydrated Carousel state. activeId is required and paused defaults to 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.
@@ -71,7 +58,7 @@ export const StateSchema = Schema.Struct({ activeId: Schema.String, paused: Sche
  * );
  * ```
  * @since 1.0.0
- * @category constructors
+ * @category Slide and rotation state
  */
 export function makeState(initial) {
     return RefSubject.hydrate(StateSchema, {
@@ -83,12 +70,6 @@ export function makeState(initial) {
  * Creates a scoped Collection for Carousel 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.
  *
@@ -105,31 +86,18 @@ export function makeState(initial) {
  * );
  * ```
  * @since 1.0.0
- * @category constructors
+ * @category Slide registration
  */
 export const makeCollection = Collection.makeState;
 /**
  * Sets activeId without changing paused state.
  *
  * @remarks
- * ## Why
- *
  * The operation exposes Carousel'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/Carousel";` Extend the [Carousel.makeState
- * runnable setup](/reference/%40typed%2Fui%2FCarousel%23makeState). Inside the linked Effect
- * program invoke `yield* select(state, "slide-2")`, then read state to observe `activeId` become
- * `"slide-2"` without changing `paused`.
  * @since 1.0.0
- * @category combinators
+ * @category Slide navigation
  */
 export function select(state, activeId) {
     return RefSubject.update(state, (current) => ({ ...current, activeId }));
@@ -139,24 +107,11 @@ export function select(state, activeId) {
  * for an empty collection.
  *
  * @remarks
- * ## Why
- *
  * The operation exposes Carousel'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 { move } from "@typed/ui/Carousel";` Extend the [Carousel.makeState runnable
- * setup](/reference/%40typed%2Fui%2FCarousel%23makeState). Inside the linked Effect program invoke
- * `yield* move(state, collection, "next")`, then read the state snapshot to observe the transition
- * described above.
  * @since 1.0.0
- * @category combinators
+ * @category Slide navigation
  */
 export function move(state, collection, direction) {
     return Effect.gen(function* () {
@@ -168,24 +123,11 @@ export function move(state, collection, direction) {
  * Flips paused and preserves activeId.
  *
  * @remarks
- * ## Why
- *
  * The operation exposes Carousel'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 { toggleRotation } from "@typed/ui/Carousel";` Extend the [Carousel.makeState
- * runnable setup](/reference/%40typed%2Fui%2FCarousel%23makeState). Inside the linked Effect
- * program invoke `yield* toggleRotation(state)`, then read state to observe `paused` invert without
- * changing `activeId`.
  * @since 1.0.0
- * @category combinators
+ * @category Rotation policy
  */
 export function toggleRotation(state) {
     return RefSubject.update(state, (current) => ({ ...current, paused: !current.paused }));
@@ -221,25 +163,12 @@ function rootInternalProps(options) {
  * replacing its child nodes.
  *
  * @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 { Root } from "@typed/ui/Carousel";` Extend the [Carousel.makeState runnable
- * setup](/reference/%40typed%2Fui%2FCarousel%23makeState). Replace the linked program's final
- * snapshot read with `Root({ state, content: "Slides", label: "Featured" })`; render that Fx before
- * the same Scope closes.
  * @since 1.0.0
- * @category components
+ * @category Carousel region
  */
 export function Root(options, host) {
     return Dom.renderHost()(options, host, rootInternalProps(options), options.content, (props, content) => {
@@ -268,25 +197,12 @@ function slideInternalProps(options) {
  * activeId.
  *
  * @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 { Slide } from "@typed/ui/Carousel";` Extend the [Carousel.makeState runnable
- * setup](/reference/%40typed%2Fui%2FCarousel%23makeState). Replace the linked program's final
- * snapshot read with `Slide({ state, id: "slide-1", label: "1 of 3", content: "First slide" })`;
- * render that Fx before the same Scope closes.
  * @since 1.0.0
- * @category components
+ * @category Slide content
  */
 export function Slide(options, host) {
     return Dom.renderHost()(options, host, slideInternalProps(options), options.content, (props, content) => {
@@ -304,25 +220,12 @@ function control(options, host, action) {
  * Renders a button whose native click selects the previous registered slide with wrapping enabled.
  *
  * @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 { Previous } from "@typed/ui/Carousel";` Extend the [Carousel.makeState
- * runnable setup](/reference/%40typed%2Fui%2FCarousel%23makeState). Replace the linked program's
- * final snapshot read with `Previous({ state, content: "Previous" })`; render that Fx before the
- * same Scope closes.
  * @since 1.0.0
- * @category components
+ * @category Slide controls
  */
 export function Previous(options, host) {
     return control(options, host, options.collection === undefined
@@ -333,25 +236,12 @@ export function Previous(options, host) {
  * Renders a button whose native click selects the next registered slide with wrapping enabled.
  *
  * @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 { Next } from "@typed/ui/Carousel";` Extend the [Carousel.makeState runnable
- * setup](/reference/%40typed%2Fui%2FCarousel%23makeState). Replace the linked program's final
- * snapshot read with `Next({ state, content: "Next" })`; render that Fx before the same Scope
- * closes.
  * @since 1.0.0
- * @category components
+ * @category Slide controls
  */
 export function Next(options, host) {
     return control(options, host, options.collection === undefined
@@ -362,25 +252,12 @@ export function Next(options, host) {
  * Renders a button whose native click toggles the explicit paused 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 { RotationControl } from "@typed/ui/Carousel";` Extend the
- * [Carousel.makeState runnable setup](/reference/%40typed%2Fui%2FCarousel%23makeState). Replace the
- * linked program's final snapshot read with `RotationControl({ state, content: "Pause rotation"
- * })`; render that Fx before the same Scope closes.
  * @since 1.0.0
- * @category components
+ * @category Rotation policy
  */
 export function RotationControl(options, host) {
     return control(options, host, toggleRotation(options.state));

package/dist/Checkbox.d.ts

@@ -1,81 +1,54 @@
+/**
+ * A native checkbox synchronized with boolean or mixed state.
+ * The checked and indeterminate properties are separate; mixed is not a submitted third value.
+ *
+ * Read the [Checkbox guide](/explore/ui-checkbox) for a complete example.
+ *
+ * [APG interaction reference](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/).
+ * @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 } from "@typed/template";
 import * as Dom from "./Dom.js";
 import type { HostResult } from "./Dom/Types.js";
-/** Three-state value accepted by a checkbox.
- * @remarks
- * ## Why
- * `"mixed"` models the platform's indeterminate presentation without
- * conflating it with either submitted boolean state.
- * ## Ownership and lifetime
- * This pure type acquires no resources.
- * @since 1.0.0
- * @category models
+/**
  */
 export type Checked = boolean | "mixed";
-/** Current renderer-independent checkbox state.
+/**
+ * Current renderer-independent checkbox state.
  * @remarks
- * ## Why
  * State can be updated and tested through RefSubject before any input mounts.
- * ## Ownership and lifetime
  * The value is plain data; the hydrated RefSubject returned by `makeState`
  * owns observation for its Effect Scope.
  * @since 1.0.0
- * @category state
+ * @category State models
  */
 export interface State {
-    /** Current checked or mixed value.
-     * @remarks
-     * ## Why
-     * One field drives `checked`, `indeterminate`, and `aria-checked` together.
-     * ## Ownership and lifetime
-     * Plain state retains no resources.
-     * @since 1.0.0
-     * @category state
+    /**
      */
     readonly checked: Checked;
 }
-/** Initial checkbox state accepted by `makeState`.
- * @remarks
- * ## Why
- * The optional value gives uncontrolled creation a deterministic false default.
- * ## Ownership and lifetime
- * This configuration is inert and retains no resources.
- * @since 1.0.0
- * @category state
+/**
  */
 export interface InitialState {
-    /** Initial checked value; defaults to `false`.
-     * @remarks
-     * ## Why
-     * Explicit mixed state can survive SSR hydration.
-     * ## Ownership and lifetime
-     * The value is copied into hydrated state and retains no resource.
-     * @since 1.0.0
-     * @category state
+    /**
      */
     readonly checked?: Checked;
 }
-/** Schema used to encode and hydrate checkbox state.
- * @remarks
- * ## Why
- * A shared schema keeps server and client state shape identical.
- * ## Ownership and lifetime
- * The schema is immutable and acquires no resources.
- * @since 1.0.0
- * @category schemas
+/**
  */
 export declare const StateSchema: Schema.Struct<{
     readonly checked: Schema.Literals<readonly [true, false, "mixed"]>;
 }>;
-/** Creates hydrated, renderer-independent checkbox state.
+/**
+ * Creates hydrated, renderer-independent checkbox state.
  * @remarks
- * ## Why
  * State transitions remain testable without rendering and can be consumed by
  * any UI producer.
- * ## Ownership and lifetime
  * The caller's Effect Scope owns the hydrated RefSubject and its subscriptions.
  * @example
  * ```ts
@@ -87,16 +60,15 @@ 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 checked: "mixed" | boolean;
 }, Schema.SchemaError, never, never>, never, import("effect/Scope").Scope>;
-/** Sets the checkbox state to a boolean or mixed value.
+/**
+ * Sets the checkbox state to a boolean or mixed value.
  * @remarks
- * ## Why
  * A single atomic RefSubject update keeps DOM properties and ARIA state aligned.
- * ## Ownership and lifetime
  * The Effect uses the existing subject lifetime and acquires no new resource.
  * @example
  * ```ts
@@ -109,16 +81,11 @@ export declare function makeState(initial?: InitialState): Effect.Effect<RefSubj
  * })
  * ```
  * @since 1.0.0
- * @category state
+ * @category State transitions
  */
 export declare function setChecked<E, R>(state: RefSubject.RefSubject<State, E, R>, checked: Checked): Effect.Effect<State, E, R>;
-/** Toggles checked to false and false or mixed to true.
- * @remarks
- * ## Why
- * User activation of an indeterminate checkbox resolves to a concrete checked
- * state, matching native input behavior.
- * ## Ownership and lifetime
- * The Effect updates the existing RefSubject and acquires no resource.
+/**
+ * Toggles checked state, treating the mixed state as unchecked.
  * @example
  * ```ts
  * import { Effect } from "effect"
@@ -130,27 +97,16 @@ export declare function setChecked<E, R>(state: RefSubject.RefSubject<State, E,
  * })
  * ```
  * @since 1.0.0
- * @category state
+ * @category State transitions
  */
 export declare function toggle<E, R>(state: RefSubject.RefSubject<State, E, R>): Effect.Effect<State, E, R>;
-/** Options for the native checkbox input.
- * @remarks
- * ## Why
- * The state reference is the single source for native and ARIA checked values.
- * ## Ownership and lifetime
- * Options are inert; the component Scope owns DOM subscriptions and refs.
- * @since 1.0.0
- * @category models
+/**
  */
 export interface InputOptions extends Dom.HostOptions<HTMLInputElement> {
-    /** Hydrated state synchronized with the input.
-     * @remarks
-     * ## Why
-     * Hydration preserves checked identity and enables state-only tests.
-     * ## Ownership and lifetime
-     * The input borrows the RefSubject; its original Scope remains the owner.
+    /**
+     * Hydrated state synchronized with the input.
      * @since 1.0.0
-     * @category state
+     * @category State connection
      */
     readonly state: RefSubject.HydratedRefSubject<State, Schema.SchemaError>;
 }
@@ -166,37 +122,46 @@ declare function internalProps<const Options extends InputOptions>(options: Opti
     ref: RefSubject.HydratedRefSubject<State, Schema.SchemaError, never, never>;
 };
 type InputInternalProps<Options extends InputOptions> = ReturnType<ReturnType<typeof internalProps<Options>>>;
-/** Renders a native checkbox input synchronized with hydrated state.
+/**
+ * Renders a native checkbox input synchronized with hydrated state.
  * @remarks
- * ## Why
  * Native keyboard, form, disabled, required, and accessibility behavior remain
  * available while state is exposed through RefSubject.
- * ## Ownership and lifetime
  * Running the Fx installs native listeners and state subscriptions in its
  * Scope. A custom host must apply `type`, checked, indeterminate, ARIA, and ref
  * props; only one hydration owner may be composed for the element.
  * @example
  * ```ts
- * import { Effect } from "effect"
- * import * as Checkbox from "@typed/ui/Checkbox"
+ * import { RefSubject } from "@typed/fx";
+ * import { html } from "@typed/template";
+ * import * as Checkbox from "@typed/ui/Checkbox";
+ * import { component } from "@typed/ui/Component";
  *
- * const program = Effect.gen(function* () {
- *   const state = yield* Checkbox.makeState()
- *   return Checkbox.Input({ state })
- * })
+ * export const UpdatePreference = component(function* () {
+ *   const state = yield* Checkbox.makeState({ checked: false });
+ *   const message = RefSubject.map(state, ({ checked }) =>
+ *     checked === true ? "Product updates enabled" : "Product updates disabled",
+ *   );
+ *   return html`<div class="preference">
+ *     <label>
+ *       ${Checkbox.Input({ state, props: { name: "updates", value: "yes" } })}
+ *       Receive product updates
+ *     </label>
+ *     <p>${message}</p>
+ *   </div>`;
+ * });
  * ```
  * @since 1.0.0
- * @category components
+ * @category Native controls
  */
 export declare function Input<const Options extends InputOptions, const Host extends HostResult = never>(options: Options, host?: Dom.HostOverride<Dom.RenderHostProps<Options, InputInternalProps<Options>>, "", Host>): import("./Dom/Types.js").HostComponent<Host | Options>;
-/** Canonical component alias for `Input`.
+/**
+ * Canonical component alias for `Input`.
  * @remarks
- * ## Why
  * The alias provides the widget name while retaining the explicit input API.
- * ## Ownership and lifetime
  * It has exactly the same Scope and native-element ownership as `Input`.
  * @since 1.0.0
- * @category aliases
+ * @category Native controls
  */
 export declare const Checkbox: typeof Input;
 export {};

package/dist/Checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../src/Checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,MAAM,eAAe,CAAC;AACxC,OAAO,KAAK,MAAM,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AACvC,OAAO,EAAE,YAAY,EAAQ,MAAM,iBAAiB,CAAC;AACrD,OAAO,KAAK,GAAG,MAAM,UAAU,CAAC;AAChC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEjD;;;;;;;;;GASG;AACH,MAAM,MAAM,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;AAExC;;;;;;;;;GASG;AACH,MAAM,WAAW,KAAK;IACpB;;;;;;;;OAQG;IACH,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;CAC3B;AAED;;;;;;;;GAQG;AACH,MAAM,WAAW,YAAY;IAC3B;;;;;;;;OAQG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,WAAW;;EAEtB,CAAC;AAEH;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,SAAS,CAAC,OAAO,GAAE,YAAiB;;2EAEnD;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,UAAU,CAAC,CAAC,EAAE,CAAC,EAC7B,KAAK,EAAE,UAAU,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,EACzC,OAAO,EAAE,OAAO,GACf,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,CAE5B;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,MAAM,CAAC,CAAC,EAAE,CAAC,EACzB,KAAK,EAAE,UAAU,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,GACxC,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,CAK5B;AAED;;;;;;;;GAQG;AACH,MAAM,WAAW,YAAa,SAAQ,GAAG,CAAC,WAAW,CAAC,gBAAgB,CAAC;IACrE;;;;;;;;OAQG;IACH,QAAQ,CAAC,KAAK,EAAE,UAAU,CAAC,kBAAkB,CAAC,KAAK,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC;CAC1E;AAED,iBAAS,aAAa,CAAC,KAAK,CAAC,OAAO,SAAS,YAAY,EAAE,OAAO,EAAE,OAAO,kBASnD,GAAG,CAAC,oBAAoB,CAAC,OAAO,CAAC;IACrD,IAAI;IACJ,cAAc;IACd,UAAU;IACV,UAAU;IACV,WAAW;IACX,WAAW;IACX,gBAAgB;IAChB,QAAQ;IACR,GAAG;EAEN;AAED,KAAK,kBAAkB,CAAC,OAAO,SAAS,YAAY,IAAI,UAAU,CAChE,UAAU,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,CAAC,CAC1C,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,KAAK,CAAC,KAAK,CAAC,OAAO,SAAS,YAAY,EAAE,KAAK,CAAC,IAAI,SAAS,UAAU,GAAG,KAAK,EAC7F,OAAO,EAAE,OAAO,EAChB,IAAI,CAAC,EAAE,GAAG,CAAC,YAAY,CAAC,GAAG,CAAC,eAAe,CAAC,OAAO,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,CAAC,0DAW7F;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,QAAQ,cAAQ,CAAC"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../src/Checkbox.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,OAAO,KAAK,MAAM,MAAM,eAAe,CAAC;AACxC,OAAO,KAAK,MAAM,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AACvC,OAAO,EAAE,YAAY,EAAQ,MAAM,iBAAiB,CAAC;AACrD,OAAO,KAAK,GAAG,MAAM,UAAU,CAAC;AAChC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEjD;GACG;AACH,MAAM,MAAM,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;AAExC;;;;;;;;GAQG;AACH,MAAM,WAAW,KAAK;IACpB;OACG;IACH,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;CAC3B;AAED;GACG;AACH,MAAM,WAAW,YAAY;IAC3B;OACG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED;GACG;AACH,eAAO,MAAM,WAAW;;EAEtB,CAAC;AAEH;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,SAAS,CAAC,OAAO,GAAE,YAAiB;;2EAEnD;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,UAAU,CAAC,CAAC,EAAE,CAAC,EAC7B,KAAK,EAAE,UAAU,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,EACzC,OAAO,EAAE,OAAO,GACf,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,CAE5B;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,MAAM,CAAC,CAAC,EAAE,CAAC,EACzB,KAAK,EAAE,UAAU,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,GACxC,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,CAK5B;AAED;GACG;AACH,MAAM,WAAW,YAAa,SAAQ,GAAG,CAAC,WAAW,CAAC,gBAAgB,CAAC;IACrE;;;;OAIG;IACH,QAAQ,CAAC,KAAK,EAAE,UAAU,CAAC,kBAAkB,CAAC,KAAK,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC;CAC1E;AAED,iBAAS,aAAa,CAAC,KAAK,CAAC,OAAO,SAAS,YAAY,EAAE,OAAO,EAAE,OAAO,kBASnD,GAAG,CAAC,oBAAoB,CAAC,OAAO,CAAC;IACrD,IAAI;IACJ,cAAc;IACd,UAAU;IACV,UAAU;IACV,WAAW;IACX,WAAW;IACX,gBAAgB;IAChB,QAAQ;IACR,GAAG;EAEN;AAED,KAAK,kBAAkB,CAAC,OAAO,SAAS,YAAY,IAAI,UAAU,CAChE,UAAU,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,CAAC,CAC1C,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,KAAK,CAAC,KAAK,CAAC,OAAO,SAAS,YAAY,EAAE,KAAK,CAAC,IAAI,SAAS,UAAU,GAAG,KAAK,EAC7F,OAAO,EAAE,OAAO,EAChB,IAAI,CAAC,EAAE,GAAG,CAAC,YAAY,CAAC,GAAG,CAAC,eAAe,CAAC,OAAO,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,CAAC,0DAW7F;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,QAAQ,cAAQ,CAAC"}

package/dist/Checkbox.js

@@ -1,26 +1,29 @@
+/**
+ * A native checkbox synchronized with boolean or mixed state.
+ * The checked and indeterminate properties are separate; mixed is not a submitted third value.
+ *
+ * Read the [Checkbox guide](/explore/ui-checkbox) for a complete example.
+ *
+ * [APG interaction reference](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/).
+ * @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, html } from "@typed/template";
 import * as Dom from "./Dom.js";
-/** Schema used to encode and hydrate checkbox state.
- * @remarks
- * ## Why
- * A shared schema keeps server and client state shape identical.
- * ## Ownership and lifetime
- * The schema is immutable and acquires no resources.
- * @since 1.0.0
- * @category schemas
+/**
  */
 export const StateSchema = Schema.Struct({
     checked: Schema.Literals([true, false, "mixed"]),
 });
-/** Creates hydrated, renderer-independent checkbox state.
+/**
+ * Creates hydrated, renderer-independent checkbox state.
  * @remarks
- * ## Why
  * State transitions remain testable without rendering and can be consumed by
  * any UI producer.
- * ## Ownership and lifetime
  * The caller's Effect Scope owns the hydrated RefSubject and its subscriptions.
  * @example
  * ```ts
@@ -32,16 +35,15 @@ export const StateSchema = Schema.Struct({
  * })
  * ```
  * @since 1.0.0
- * @category constructors
+ * @category State construction
  */
 export function makeState(initial = {}) {
     return RefSubject.hydrate(StateSchema, { checked: initial.checked ?? false });
 }
-/** Sets the checkbox state to a boolean or mixed value.
+/**
+ * Sets the checkbox state to a boolean or mixed value.
  * @remarks
- * ## Why
  * A single atomic RefSubject update keeps DOM properties and ARIA state aligned.
- * ## Ownership and lifetime
  * The Effect uses the existing subject lifetime and acquires no new resource.
  * @example
  * ```ts
@@ -54,18 +56,13 @@ export function makeState(initial = {}) {
  * })
  * ```
  * @since 1.0.0
- * @category state
+ * @category State transitions
  */
 export function setChecked(state, checked) {
     return RefSubject.update(state, (current) => ({ ...current, checked }));
 }
-/** Toggles checked to false and false or mixed to true.
- * @remarks
- * ## Why
- * User activation of an indeterminate checkbox resolves to a concrete checked
- * state, matching native input behavior.
- * ## Ownership and lifetime
- * The Effect updates the existing RefSubject and acquires no resource.
+/**
+ * Toggles checked state, treating the mixed state as unchecked.
  * @example
  * ```ts
  * import { Effect } from "effect"
@@ -77,7 +74,7 @@ export function setChecked(state, checked) {
  * })
  * ```
  * @since 1.0.0
- * @category state
+ * @category State transitions
  */
 export function toggle(state) {
     return RefSubject.update(state, (current) => ({
@@ -101,40 +98,49 @@ function internalProps(options) {
         ref: options.state,
     });
 }
-/** Renders a native checkbox input synchronized with hydrated state.
+/**
+ * Renders a native checkbox input synchronized with hydrated state.
  * @remarks
- * ## Why
  * Native keyboard, form, disabled, required, and accessibility behavior remain
  * available while state is exposed through RefSubject.
- * ## Ownership and lifetime
  * Running the Fx installs native listeners and state subscriptions in its
  * Scope. A custom host must apply `type`, checked, indeterminate, ARIA, and ref
  * props; only one hydration owner may be composed for the element.
  * @example
  * ```ts
- * import { Effect } from "effect"
- * import * as Checkbox from "@typed/ui/Checkbox"
+ * import { RefSubject } from "@typed/fx";
+ * import { html } from "@typed/template";
+ * import * as Checkbox from "@typed/ui/Checkbox";
+ * import { component } from "@typed/ui/Component";
  *
- * const program = Effect.gen(function* () {
- *   const state = yield* Checkbox.makeState()
- *   return Checkbox.Input({ state })
- * })
+ * export const UpdatePreference = component(function* () {
+ *   const state = yield* Checkbox.makeState({ checked: false });
+ *   const message = RefSubject.map(state, ({ checked }) =>
+ *     checked === true ? "Product updates enabled" : "Product updates disabled",
+ *   );
+ *   return html`<div class="preference">
+ *     <label>
+ *       ${Checkbox.Input({ state, props: { name: "updates", value: "yes" } })}
+ *       Receive product updates
+ *     </label>
+ *     <p>${message}</p>
+ *   </div>`;
+ * });
  * ```
  * @since 1.0.0
- * @category components
+ * @category Native controls
  */
 export function Input(options, host) {
     return Dom.renderHost()(options, host, internalProps(options), "", (i) => {
         return html `<input ...${i} />`;
     });
 }
-/** Canonical component alias for `Input`.
+/**
+ * Canonical component alias for `Input`.
  * @remarks
- * ## Why
  * The alias provides the widget name while retaining the explicit input API.
- * ## Ownership and lifetime
  * It has exactly the same Scope and native-element ownership as `Input`.
  * @since 1.0.0
- * @category aliases
+ * @category Native controls
  */
 export const Checkbox = Input;