@typed/ui 1.0.0-beta.0 → 1.0.0-beta.10

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023-present The Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -2,50 +2,77 @@
 
 > **Beta:** This package is in beta; APIs may change.
 
-`@typed/ui` provides **web integration** for the router and template: **Link** (typed anchor that uses Navigation for same-origin clicks) and **HttpRouter**-related helpers for SSR (`ssrForHttp`, `handleHttpServerError`). Use it when you need navigation-aware links and/or server-side rendering of the router with Effect’s HTTP server.
+`@typed/ui` is the **web integration layer** for `@typed/router` and `@typed/template`. It bridges typed's routing and template system with the browser and Effect's HTTP stack.
+
+## 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 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`).
 
 ```ts
 function Link<const Opts extends LinkOptions>(
-  options: Opts
-): Fx<RenderEvent, Renderable.ErrorFromObject<Opts>, Renderable.ServicesFromObject<Opts> | Scope | RenderTemplate>
+  options: Opts,
+): Fx<
+  RenderEvent,
+  Renderable.ErrorFromObject<Opts>,
+  Renderable.ServicesFromObject<Opts> | Scope | RenderTemplate
+>;
 ```
 
 **`LinkOptions`**
 
-| Property   | Type | Required | Description |
-|-----------|------|----------|-------------|
-| `href`    | `Renderable<string, any, any>` | Yes | Target URL. |
-| `content` | `Renderable<string \| number \| boolean \| null \| undefined \| void \| RenderEvent, any, any>` | Yes | Link body (text or template content). |
-| `replace` | `boolean` | No | If `true`, use history replace instead of push. Default: `false`. |
+| Property  | Type                                                                                            | Required | Description                                                       |
+| --------- | ----------------------------------------------------------------------------------------------- | -------- | ----------------------------------------------------------------- |
+| `href`    | `Renderable<string, any, any>`                                                                  | Yes      | Target URL.                                                       |
+| `content` | `Renderable<string \| number \| boolean \| null \| undefined \| void \| RenderEvent, any, any>` | Yes      | Link body (text or template content).                             |
+| `replace` | `boolean`                                                                                       | No       | If `true`, use history replace instead of push. Default: `false`. |
 
-In addition, `LinkOptions` accepts standard anchor event handlers (e.g. `onclick`), `ref`, and other writable `HTMLAnchorElement` properties. Custom `onclick` runs first; if the event is not `preventDefault`’d, the built-in navigation handler runs.
+In addition, `LinkOptions` accepts standard anchor event handlers (e.g. `onclick`), `ref`, and other writable `HTMLAnchorElement` properties. Custom `onclick` runs first; if the event is not `preventDefault`'d, the built-in navigation handler runs.
 
 ---
 
 ### `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:**
 
@@ -53,13 +80,23 @@ Registers route handlers on an Effect **HttpRouter** for server-side rendering.
 // (router, matcher)
 function ssrForHttp<E, R>(
   router: HttpRouter,
-  input: Matcher<RenderEvent, E, R>
-): Effect.Effect<void, never, Exclude<R, Scope | Router>>
+  input: Matcher<RenderEvent, E, R>,
+): 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>>
+  input: Matcher<RenderEvent, E, R>,
+): (
+  router: HttpRouter,
+) => Effect.Effect<
+  void,
+  never,
+  Exclude<R, Scope | Router> | HttpRouter.Request.From<"Error", E | HttpServerError>
+>;
 ```
 
 - **`router`** — Effect `HttpRouter` to attach GET handlers to.
@@ -67,18 +104,34 @@ 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:
 
-| Error reason     | Status |
-|------------------|--------|
-| `RouteNotFound`  | 404    |
-| `RequestParseError` | 400 |
-| `InternalError` / `ResponseError` | 500 |
+| Error reason                      | Status |
+| --------------------------------- | ------ |
+| `RouteNotFound`                   | 404    |
+| `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.
@@ -91,9 +144,8 @@ import { html } from "@typed/template";
 
 // In a template: link that navigates via Navigation (no full reload)
 const nav = html`<nav>
-  ${Link({ href: "/", content: "Home" })}
-  ${Link({ href: "/todos", content: "Todos" })}
+  ${Link({ href: "/", content: "Home" })} ${Link({ href: "/todos", content: "Todos" })}
 </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,72 @@
+/**
+ * Assertive live-region content without focus movement or an announcement queue.
+ * Use urgent text updates deliberately; routine feedback usually belongs in a status region.
+ *
+ * Read the [Alert guide](/explore/ui-alert) for a complete example.
+ *
+ * [APG interaction reference](https://www.w3.org/WAI/ARIA/apg/patterns/alert/).
+ * @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 the assertive alert live region.
+ *
+ * @remarks
+ * Alerts announce important, time-sensitive output without moving focus or
+ * requiring a modal interaction.
+ * @since 1.0.0
+ * @category Component options
+ */
+export interface AlertOptions extends Dom.HostOptions<HTMLDivElement> {
+    /**
+     * Content announced by the `role="alert"` live region.
+     * @since 1.0.0
+     * @category Rendered content
+     */
+    readonly content: Renderable.Any;
+}
+declare function internalProps(): {
+    readonly role: "alert";
+};
+type AlertInternalProps = ReturnType<typeof internalProps>;
+/**
+ * Renders an assertive alert region without moving focus.
+ *
+ * @remarks
+ * Keep the region mounted and change its text when an urgent event occurs. Initial page content
+ * or repeated identical messages may not announce as expected. This primitive does not queue
+ * announcements, schedule dismissal, or provide an acknowledgement dialog. Prefer a status
+ * region for routine updates.
+ *
+ * @example
+ * ```ts
+ * import { RefSubject } from "@typed/fx";
+ * import { html } from "@typed/template";
+ * import { Alert } from "@typed/ui/Alert";
+ * import { Button } from "@typed/ui/Button";
+ * import { component } from "@typed/template";
+ *
+ * export const AlertPreview = component(function* () {
+ *   const message = yield* RefSubject.make("");
+ *   return html`<section>
+ *     <p>Preview the message shown when an upload fails.</p>
+ *     ${Button({
+ *       content: "Preview upload failure",
+ *       onclick: RefSubject.set(message, "Upload failed. Your file is still available; try again."),
+ *     })}
+ *     ${Alert({ content: message, props: { class: "upload-alert" } })}
+ *   </section>`;
+ * });
+ * ```
+ * @since 1.0.0
+ * @category Controls
+ */
+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;;;;;;;;;;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;;;;;;;;GAQG;AACH,MAAM,WAAW,YAAa,SAAQ,GAAG,CAAC,WAAW,CAAC,cAAc,CAAC;IACnE;;;;OAIG;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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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,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,40 @@
+import { html } from "@typed/template";
+import * as Dom from "./Dom.js";
+function internalProps() {
+    return { role: "alert" };
+}
+/**
+ * Renders an assertive alert region without moving focus.
+ *
+ * @remarks
+ * Keep the region mounted and change its text when an urgent event occurs. Initial page content
+ * or repeated identical messages may not announce as expected. This primitive does not queue
+ * announcements, schedule dismissal, or provide an acknowledgement dialog. Prefer a status
+ * region for routine updates.
+ *
+ * @example
+ * ```ts
+ * import { RefSubject } from "@typed/fx";
+ * import { html } from "@typed/template";
+ * import { Alert } from "@typed/ui/Alert";
+ * import { Button } from "@typed/ui/Button";
+ * import { component } from "@typed/template";
+ *
+ * export const AlertPreview = component(function* () {
+ *   const message = yield* RefSubject.make("");
+ *   return html`<section>
+ *     <p>Preview the message shown when an upload fails.</p>
+ *     ${Button({
+ *       content: "Preview upload failure",
+ *       onclick: RefSubject.set(message, "Upload failed. Your file is still available; try again."),
+ *     })}
+ *     ${Alert({ content: message, props: { class: "upload-alert" } })}
+ *   </section>`;
+ * });
+ * ```
+ * @since 1.0.0
+ * @category Controls
+ */
+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,100 @@
+/**
+ * Native command activation and explicit button/submit/reset behavior.
+ * The control has no internal click action; return application Effects from its handler.
+ *
+ * Read the [Button guide](/explore/ui-button) for a complete example.
+ *
+ * [APG interaction reference](https://www.w3.org/WAI/ARIA/apg/patterns/button/).
+ * @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";
+/**
+ * Native button submission behavior.
+ *
+ * @remarks
+ * The union exposes the exact HTML button types and defaults components to the
+ * non-submitting `button` behavior.
+ * @since 1.0.0
+ * @category State models
+ */
+export type ButtonType = "button" | "submit" | "reset";
+/**
+ * Renderable state and host options for a native button.
+ *
+ * @remarks
+ * The model keeps native button semantics while allowing content, disabled
+ * state, and handlers to come from any Typed renderable source.
+ * @since 1.0.0
+ * @category Component options
+ */
+export interface ButtonOptions extends Dom.HostOptions<HTMLButtonElement> {
+    /**
+     * The button's visible and accessible content.
+     * @since 1.0.0
+     * @category Rendered content
+     */
+    readonly content: Renderable.Any;
+    /**
+     * The native `type` attribute; defaults to `"button"`.
+     * @since 1.0.0
+     * @category Native attributes
+     */
+    readonly type?: Renderable.Any<ButtonType | null | undefined>;
+    /**
+     * Whether the native control is disabled.
+     * @since 1.0.0
+     * @category Availability
+     */
+    readonly disabled?: Renderable.Any<boolean | null | undefined>;
+    /**
+     * A real DOM click handler supplied by the consumer.
+     * @since 1.0.0
+     * @category Event handlers
+     */
+    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
+ * `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.
+ *
+ * @example
+ * ```ts
+ * import { RefSubject } from "@typed/fx";
+ * import { html } from "@typed/template";
+ * import { Button } from "@typed/ui/Button";
+ * import { component } from "@typed/template";
+ *
+ * export const PreviewCounter = component(function* () {
+ *   const previews = yield* RefSubject.make(0);
+ *   return html`<section>
+ *     ${Button({
+ *       content: "Recalculate preview",
+ *       props: { class: "preview-action" },
+ *       onclick: RefSubject.update(previews, (count) => count + 1),
+ *     })}
+ *     <p role="status">Preview calculations: ${previews}</p>
+ *   </section>`;
+ * });
+ * ```
+ * @since 1.0.0
+ * @category Native controls
+ */
+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;;;;;;;;;;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;;;;;;;;GAQG;AACH,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEvD;;;;;;;;GAQG;AACH,MAAM,WAAW,aAAc,SAAQ,GAAG,CAAC,WAAW,CAAC,iBAAiB,CAAC;IACvE;;;;OAIG;IACH,QAAQ,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,CAAC;IACjC;;;;OAIG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC,GAAG,CAAC,UAAU,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IAC9D;;;;OAIG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IAC/D;;;;OAIG;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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;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,42 @@
+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
+ * `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.
+ *
+ * @example
+ * ```ts
+ * import { RefSubject } from "@typed/fx";
+ * import { html } from "@typed/template";
+ * import { Button } from "@typed/ui/Button";
+ * import { component } from "@typed/template";
+ *
+ * export const PreviewCounter = component(function* () {
+ *   const previews = yield* RefSubject.make(0);
+ *   return html`<section>
+ *     ${Button({
+ *       content: "Recalculate preview",
+ *       props: { class: "preview-action" },
+ *       onclick: RefSubject.update(previews, (count) => count + 1),
+ *     })}
+ *     <p role="status">Preview calculations: ${previews}</p>
+ *   </section>`;
+ * });
+ * ```
+ * @since 1.0.0
+ * @category Native controls
+ */
+export function Button(options, host) {
+    return Dom.renderHost()(options, host, internalProps, options.content, (props, content) => html `<button ...${props}>${content}</button>`);
+}