@typed/ui 1.0.0-beta.4 → 1.0.0-beta.5

package/README.md

@@ -6,26 +6,42 @@
 
 ## Capabilities
 
+- **UI substrate** — `Dom` provides typed native host props, exact Effect/Fx channel preservation, user-first event composition, and hydration-aware ref composition. Stateful components use `RefSubject.hydrate` / `hydrateAll` directly; there is no parallel UI state abstraction.
+- **Button** — A headless native `<button>` host with a safe `type="button"` default, reactive disabled state, typed click handling, caller props, and custom-host support.
 - **Link** — A typed anchor component that intercepts same-origin clicks and navigates via `Navigation.navigate` instead of a full page reload. Keeps routing SPA-style while preserving normal `<a>` semantics (href, target, keyboard, right-click).
-- **SSR** — `ssrForHttp` compiles a router Matcher into HttpRouter GET handlers for server-side rendering. Requests are parsed, matched, and the corresponding Fx is rendered to HTML. `handleHttpServerError` adds global middleware for 404/400/500.
+- **SSR** — `ssrForHttp` compiles a router Matcher into HttpRouter GET handlers for buffered server-side rendering. `streamingSsrForHttp` uses the same routing pipeline but streams HTML chunks as they are rendered. `handleHttpServerError` adds global middleware for 404/400/500.
 
 ## Dependencies
 
 - `effect`
-- `@effect/platform-node`
 - `@typed/fx`
+- `@typed/id`
 - `@typed/navigation`
 - `@typed/router`
 - `@typed/template`
-- `happy-dom` (dev)
+
+The Node HTTP platform and `happy-dom` are development dependencies used by the integration tests; browser consumers do not install them through `@typed/ui`.
 
 ## API overview
 
+- **Button** — `Button.Button(options)` renders a native `<button>` and accepts `content`, `type`, `disabled`, `onclick`, standard button props, and an optional custom host.
+- **Dom** — Typed host/ref/event composition shared by the UI components. Its host attributes target Baseline 2026 and include native popover and invoker-command attributes.
+- **APG components** — Stateful controls use callable `RefSubject.hydrate` state on their owning host. `Alert` is a non-modal live region; `Meter`, `Slider`, and `SpinButton` use native HTML controls; `Switch` uses a button host; `WindowSplitter`, `Carousel`, `Tree`, `Grid`, and `TreeGrid` provide their APG keyboard and ARIA contracts without a portal or positioning runtime.
 - **Link** — `Link(options)` renders an `<a href="...">` that intercepts same-origin, same-document clicks and calls `Navigation.navigate` instead of a full page load. Options include `href`, `content`, `replace`, and standard anchor props. Requires **Navigation** and **RenderTemplate** in context (e.g. browser router).
-- **SSR:** `ssrForHttp(router, matcher)` — registers route handlers on an Effect **HttpRouter** for server-side rendering; `handleHttpServerError(router)` — global middleware for HTTP server errors.
+- **SSR:** `ssrForHttp(router, matcher)` — registers buffered route handlers on an Effect **HttpRouter**; `streamingSsrForHttp(router, matcher)` — same routing with streamed HTML output; `handleHttpServerError(router)` — global middleware for HTTP server errors.
 
 ## API reference
 
+### APG component families
+
+`Alert.Alert({ content })` renders `role="alert"` and never moves focus. Use `Dialog.Content` with `props: { role: "alertdialog" }` when a message must interrupt the user.
+
+`Meter`, `Slider`, and `SpinButton` each take a hydratable `state` made by `makeState({ value })`; slider and spin button synchronize their native range/number input changes into that state. `Switch.makeState({ checked })` drives `Switch.Switch({ state, content })`.
+
+`WindowSplitter.makeState({ value, min, max, step, orientation })` drives a focusable separator with APG arrow keys, Home/End, and Enter collapse/restore. Applications own pane sizing from its state.
+
+`Carousel`, `Tree`, `Grid`, and `TreeGrid` each expose `makeState`, `makeCollection`, and structural parts. Their hydration state holds serializable selection/expansion state; their collections only register mounted DOM elements for navigation. `Tree.Group` and `TreeGrid.Group` define the nested collapsed DOM boundary; `Grid` and `TreeGrid` retain DOM focus on the root with `aria-activedescendant`.
+
 ### `Link`
 
 Renders an `<a href="...">` that intercepts same-origin, same-document clicks and navigates via `Navigation.navigate` instead of a full page load. Requires **Navigation** and **RenderTemplate** in the Effect context (e.g. `BrowserRouter`).
@@ -54,7 +70,9 @@ In addition, `LinkOptions` accepts standard anchor event handlers (e.g. `onclick
 
 ### `ssrForHttp`
 
-Registers route handlers on an Effect **HttpRouter** for server-side rendering. The matcher's routes are compiled and each case is exposed as a GET route; requests are parsed, matched, and the corresponding Fx is rendered to HTML. Requires **Router** and **Scope** to be provided elsewhere; other matcher services remain in the effect requirement.
+Registers route handlers on an Effect **HttpRouter** for server-side rendering. The matcher's routes are compiled and each case is exposed as a GET route; requests are parsed, matched, and the corresponding Fx is rendered to HTML. Rendering is buffered: the complete HTML string is produced before the response begins. Requires **Router** and **Scope** to be provided elsewhere; other matcher services remain in the effect requirement. Matcher and render failures remain in Effect HTTP's request error channel so middleware can handle them.
+
+Path captures are authoritative. If a request supplies the same name in the query string, the matched path value is passed to route decoding. The adapter initializes navigation state from Effect's request URL conversion, including the request host and `x-forwarded-proto`; deployments must only accept forwarding headers behind a trusted proxy.
 
 **Overloads:**
 
@@ -63,12 +81,22 @@ Registers route handlers on an Effect **HttpRouter** for server-side rendering.
 function ssrForHttp<E, R>(
   router: HttpRouter,
   input: Matcher<RenderEvent, E, R>,
-): Effect.Effect<void, never, Exclude<R, Scope | Router>>;
+): Effect.Effect<
+  void,
+  never,
+  Exclude<R, Scope | Router> | HttpRouter.Request.From<"Error", E | HttpServerError>
+>;
 
 // (matcher)(router) — curried
 function ssrForHttp<E, R>(
   input: Matcher<RenderEvent, E, R>,
-): (router: HttpRouter) => Effect.Effect<void, never, Exclude<R, Scope | Router>>;
+): (
+  router: HttpRouter,
+) => Effect.Effect<
+  void,
+  never,
+  Exclude<R, Scope | Router> | HttpRouter.Request.From<"Error", E | HttpServerError>
+>;
 ```
 
 - **`router`** — Effect `HttpRouter` to attach GET handlers to.
@@ -76,6 +104,14 @@ function ssrForHttp<E, R>(
 
 ---
 
+### `streamingSsrForHttp`
+
+Same routing and decoding behavior as `ssrForHttp`, but renders with `renderToHtml` and returns `HttpServerResponse.stream` so HTML chunks can be sent before rendering completes. Choose `ssrForHttp` when you need a fully buffered body (for example, middleware that inspects the complete HTML string) and `streamingSsrForHttp` when you want time-to-first-byte improvements.
+
+**Overloads:** identical curried and uncurried shapes to `ssrForHttp`.
+
+---
+
 ### `handleHttpServerError`
 
 Adds global middleware to an **HttpRouter** that catches `HttpServerError` and returns appropriate HTTP responses:
@@ -86,8 +122,16 @@ Adds global middleware to an **HttpRouter** that catches `HttpServerError` and r
 | `RequestParseError`               | 400    |
 | `InternalError` / `ResponseError` | 500    |
 
+All four responses have empty bodies so request URLs, parse descriptions, service names, upstream response details, and other internal data are not reflected to clients. Non-`HttpServerError` failures are re-failed and remain visible in Effect HTTP's global error channel.
+
 ```ts
-function handleHttpServerError(router: HttpRouter): Effect.Effect<void, never, HttpRouter>;
+function handleHttpServerError(
+  router: HttpRouter,
+): Effect.Effect<
+  void,
+  never,
+  import("effect/unstable/http/HttpRouter").Request<"GlobalError", unknown>
+>;
 ```
 
 Use after registering routes (e.g. after `ssrForHttp`) so unhandled route and parse errors are converted to 404/400/500 instead of failing the server.
@@ -104,4 +148,4 @@ const nav = html`<nav>
 </nav>`;
 ```
 
-For SSR, provide the router and matcher to `ssrForHttp` when setting up the HTTP server; see Effect's `HttpRouter` and the TodoMVC example structure.
+For SSR, provide the router and matcher to `ssrForHttp` or `streamingSsrForHttp` when setting up the HTTP server; see Effect's `HttpRouter` and `examples/fullstack/src/server.ts` for the workspace's server wiring.

package/dist/Alert.d.ts

@@ -0,0 +1,78 @@
+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 the assertive alert live region.
+ *
+ * @remarks
+ * ## Why
+ *
+ * Alerts announce important, time-sensitive output without moving focus or
+ * requiring a modal interaction.
+ *
+ * ## Ownership and lifetime
+ *
+ * The options are inert. Rendering owns only the alert host and subscriptions
+ * for renderable option values; the running Effect Scope removes them.
+ *
+ * @since 1.0.0
+ * @category models
+ */
+export interface AlertOptions extends Dom.HostOptions<HTMLDivElement> {
+    /**
+     * Content announced by the `role="alert"` live region.
+     *
+     * @remarks
+     * ## Why
+     *
+     * Keeping the announcement renderable lets applications publish Effect- or
+     * Fx-backed status while retaining the platform accessibility tree.
+     *
+     * ## Ownership and lifetime
+     *
+     * The value acquires no resources itself. Rendering subscribes to dynamic
+     * content for the lifetime of the alert's Scope.
+     *
+     * @since 1.0.0
+     * @category content
+     */
+    readonly content: Renderable.Any;
+}
+declare function internalProps(): {
+    readonly role: "alert";
+};
+type AlertInternalProps = ReturnType<typeof internalProps>;
+/**
+ * Renders a non-modal, assertive live region.
+ *
+ * For an interrupting confirmation, use `Dialog.Content` with
+ * `role="alertdialog"`; an alert must not take focus or require dismissal.
+ *
+ * @remarks
+ * ## Why
+ *
+ * `Alert` supplies the native ARIA live-region contract while leaving content,
+ * host choice, and Effect requirements composable. It does not synthesize an
+ * event or introduce an application-owned announcement queue.
+ *
+ * ## Ownership and lifetime
+ *
+ * Calling `Alert` starts no work. Running the returned Fx owns the rendered
+ * host, dynamic values, and listeners in its Effect Scope; finalization removes
+ * only those resources. A custom host must preserve the supplied `role`.
+ *
+ * @example
+ * ```ts
+ * import { Alert } from "@typed/ui/Alert"
+ *
+ * const saved = Alert({ content: "Changes saved" })
+ * ```
+ *
+ * @since 1.0.0
+ * @category components
+ */
+export declare function Alert<const Options extends AlertOptions, const Host extends HostResult = never>(options: Options, host?: Dom.HostOverride<Dom.RenderHostProps<Options, AlertInternalProps>, Options["content"], Host>): Fx<RenderEvent, Renderable.Error<Options | Host>, Renderable.Services<Options | Host> | Scope.Scope | RenderTemplate>;
+export {};
+//# sourceMappingURL=Alert.d.ts.map

package/dist/Alert.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../src/Alert.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;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,WAAW,YAAa,SAAQ,GAAG,CAAC,WAAW,CAAC,cAAc,CAAC;IACnE;;;;;;;;;;;;;;;;OAgBG;IACH,QAAQ,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,CAAC;CAClC;AAED,iBAAS,aAAa;aACX,IAAI,EAAE,OAAO;EACvB;AACD,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AAE3D;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;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,CACrB,GAAG,CAAC,eAAe,CAAC,OAAO,EAAE,kBAAkB,CAAC,EAChD,OAAO,CAAC,SAAS,CAAC,EAClB,IAAI,CACL,GACA,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/Alert.js

@@ -0,0 +1,37 @@
+import { html } from "@typed/template";
+import * as Dom from "./Dom.js";
+function internalProps() {
+    return { role: "alert" };
+}
+/**
+ * Renders a non-modal, assertive live region.
+ *
+ * For an interrupting confirmation, use `Dialog.Content` with
+ * `role="alertdialog"`; an alert must not take focus or require dismissal.
+ *
+ * @remarks
+ * ## Why
+ *
+ * `Alert` supplies the native ARIA live-region contract while leaving content,
+ * host choice, and Effect requirements composable. It does not synthesize an
+ * event or introduce an application-owned announcement queue.
+ *
+ * ## Ownership and lifetime
+ *
+ * Calling `Alert` starts no work. Running the returned Fx owns the rendered
+ * host, dynamic values, and listeners in its Effect Scope; finalization removes
+ * only those resources. A custom host must preserve the supplied `role`.
+ *
+ * @example
+ * ```ts
+ * import { Alert } from "@typed/ui/Alert"
+ *
+ * const saved = Alert({ content: "Changes saved" })
+ * ```
+ *
+ * @since 1.0.0
+ * @category components
+ */
+export function Alert(options, host) {
+    return Dom.renderHost()(options, host, internalProps, options.content, (props, content) => html `<div ...${props}>${content}</div>`);
+}

package/dist/Button.d.ts

@@ -0,0 +1,144 @@
+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";
+/**
+ * Native button submission behavior.
+ *
+ * @remarks
+ * ## Why
+ *
+ * The union exposes the exact HTML button types and defaults components to the
+ * non-submitting `button` behavior.
+ *
+ * ## Ownership and lifetime
+ *
+ * This is a pure type and acquires no resources.
+ *
+ * @since 1.0.0
+ * @category models
+ */
+export type ButtonType = "button" | "submit" | "reset";
+/**
+ * Renderable state and host options for a native button.
+ *
+ * @remarks
+ * ## Why
+ *
+ * The model keeps native button semantics while allowing content, disabled
+ * state, and handlers to come from any Typed renderable source.
+ *
+ * ## Ownership and lifetime
+ *
+ * The options are inert. The rendered component's Scope owns dynamic option
+ * subscriptions and listener cleanup.
+ *
+ * @since 1.0.0
+ * @category models
+ */
+export interface ButtonOptions extends Dom.HostOptions<HTMLButtonElement> {
+    /**
+     * The button's visible and accessible content.
+     *
+     * @remarks
+     * ## Why
+     *
+     * Native content supplies the accessible name unless the host explicitly
+     * provides another naming mechanism.
+     *
+     * ## Ownership and lifetime
+     *
+     * Dynamic content is subscribed to only while the component Scope is open.
+     *
+     * @since 1.0.0
+     * @category content
+     */
+    readonly content: Renderable.Any;
+    /**
+     * The native `type` attribute; defaults to `"button"`.
+     *
+     * @remarks
+     * ## Why
+     *
+     * An explicit non-submitting default prevents a reusable button from
+     * accidentally submitting an enclosing form.
+     *
+     * ## Ownership and lifetime
+     *
+     * The value is reflected by the renderer and retains no resources.
+     *
+     * @since 1.0.0
+     * @category attributes
+     */
+    readonly type?: Renderable.Any<ButtonType | null | undefined>;
+    /**
+     * Whether the native control is disabled.
+     *
+     * @remarks
+     * ## Why
+     *
+     * Using the native disabled state removes the button from interaction and
+     * form submission according to browser semantics.
+     *
+     * ## Ownership and lifetime
+     *
+     * Dynamic values are observed for the component Scope and then released.
+     *
+     * @since 1.0.0
+     * @category attributes
+     */
+    readonly disabled?: Renderable.Any<boolean | null | undefined>;
+    /**
+     * A real DOM click handler supplied by the consumer.
+     *
+     * @remarks
+     * ## Why
+     *
+     * `Button` has no internal activation handler. The supplied handler receives
+     * the real DOM click event; browser default actions remain native.
+     *
+     * ## Ownership and lifetime
+     *
+     * Rendering installs the listener and the component Scope removes it.
+     *
+     * @since 1.0.0
+     * @category events
+     */
+    readonly onclick?: Dom.EventHandlerInput<Dom.EventOf<HTMLButtonElement["onclick"]>>;
+}
+declare function internalProps<const Options extends ButtonOptions>({ property, }: Dom.InternalPropsHelpers<Options>): {
+    type: "button" | Exclude<Dom.Property<Options, "type">, Dom.Nullish>;
+    "?disabled": false | Exclude<Dom.Property<Options, "disabled">, Dom.Nullish>;
+};
+type ButtonInternalProps<Options extends ButtonOptions> = ReturnType<typeof internalProps<Options>>;
+/**
+ * Renders a semantic native button with cooperative host customization.
+ *
+ * @remarks
+ * ## Why
+ *
+ * `Button` retains browser keyboard, form, focus, and accessibility behavior.
+ * Its internal props only establish the default type and disabled state. Any
+ * `onclick` behavior belongs entirely to the consumer and receives a real DOM
+ * event; there is no component-internal click action to chain or cancel.
+ *
+ * ## Ownership and lifetime
+ *
+ * Calling the factory is inert. Running its Fx owns the host's dynamic parts
+ * and listeners in an Effect Scope. A custom host must apply the supplied props
+ * and content so disabled and button-type semantics are not lost.
+ *
+ * @example
+ * ```ts
+ * import { Button } from "@typed/ui/Button"
+ *
+ * const submit = Button({ type: "submit", content: "Save" })
+ * ```
+ *
+ * @since 1.0.0
+ * @category components
+ */
+export declare function Button<const Options extends ButtonOptions, const Host extends HostResult = never>(options: Options, host?: Dom.HostOverride<Dom.RenderHostProps<Options, ButtonInternalProps<Options>>, Options["content"], Host>): Fx<RenderEvent, Renderable.Error<Options | Host>, Renderable.Services<Options | Host> | Scope.Scope | RenderTemplate>;
+export {};
+//# sourceMappingURL=Button.d.ts.map

package/dist/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../src/Button.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;;;;;;;;;;;;;;;GAeG;AACH,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEvD;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,WAAW,aAAc,SAAQ,GAAG,CAAC,WAAW,CAAC,iBAAiB,CAAC;IACvE;;;;;;;;;;;;;;;OAeG;IACH,QAAQ,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,CAAC;IACjC;;;;;;;;;;;;;;;OAeG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC,GAAG,CAAC,UAAU,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IAC9D;;;;;;;;;;;;;;;OAeG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IAC/D;;;;;;;;;;;;;;;OAeG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,GAAG,CAAC,OAAO,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;CACrF;AAED,iBAAS,aAAa,CAAC,KAAK,CAAC,OAAO,SAAS,aAAa,EAAE,EAC1D,QAAQ,GACT,EAAE,GAAG,CAAC,oBAAoB,CAAC,OAAO,CAAC;IAEhC,IAAI;IACJ,WAAW;EAEd;AAED,KAAK,mBAAmB,CAAC,OAAO,SAAS,aAAa,IAAI,UAAU,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC;AAEpG;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,MAAM,CAAC,KAAK,CAAC,OAAO,SAAS,aAAa,EAAE,KAAK,CAAC,IAAI,SAAS,UAAU,GAAG,KAAK,EAC/F,OAAO,EAAE,OAAO,EAChB,IAAI,CAAC,EAAE,GAAG,CAAC,YAAY,CACrB,GAAG,CAAC,eAAe,CAAC,OAAO,EAAE,mBAAmB,CAAC,OAAO,CAAC,CAAC,EAC1D,OAAO,CAAC,SAAS,CAAC,EAClB,IAAI,CACL,GACA,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/Button.js

@@ -0,0 +1,38 @@
+import { html } from "@typed/template";
+import * as Dom from "./Dom.js";
+function internalProps({ property, }) {
+    return {
+        type: property("type", "button"),
+        "?disabled": property("disabled", false),
+    };
+}
+/**
+ * Renders a semantic native button with cooperative host customization.
+ *
+ * @remarks
+ * ## Why
+ *
+ * `Button` retains browser keyboard, form, focus, and accessibility behavior.
+ * Its internal props only establish the default type and disabled state. Any
+ * `onclick` behavior belongs entirely to the consumer and receives a real DOM
+ * event; there is no component-internal click action to chain or cancel.
+ *
+ * ## Ownership and lifetime
+ *
+ * Calling the factory is inert. Running its Fx owns the host's dynamic parts
+ * and listeners in an Effect Scope. A custom host must apply the supplied props
+ * and content so disabled and button-type semantics are not lost.
+ *
+ * @example
+ * ```ts
+ * import { Button } from "@typed/ui/Button"
+ *
+ * const submit = Button({ type: "submit", content: "Save" })
+ * ```
+ *
+ * @since 1.0.0
+ * @category components
+ */
+export function Button(options, host) {
+    return Dom.renderHost()(options, host, internalProps, options.content, (props, content) => html `<button ...${props}>${content}</button>`);
+}