@domphy/ui 0.21.1 → 0.21.3

package/dist/index.d.cts

@@ -358,6 +358,8 @@ declare function details(props?: {
  * fades via opacity, locks page scroll while open, traps Tab focus within the
  * dialog, restores focus to the previously focused element on close, sets
  * `aria-modal`, and closes on outside (backdrop) click. Apply to a `<dialog>`.
+ * Closed state is inline `visibility`/`pointer-events`/`display:none` so a
+ * consumer `style.display` cannot keep the node in layout.
  *
  * Accessible name/description: pass `labelledBy`/`describedBy` the `id` of a
  * heading/paragraph inside the dialog (Radix Title/Description parity). The
@@ -458,6 +460,10 @@ declare function empty(props?: {
  * caught. Errors during static construction propagate normally — those are
  * programming errors, not runtime data errors.
  *
+ * `reset()` restores the original children (including a reactive children
+ * function) so the next evaluation runs again — it does not leave the host
+ * empty.
+ *
  * @hostTag any
  * @param props.fallback - Fallback element or factory `(error, reset) => element`. Defaults to a plain error message div.
  * @param props.onError - Optional callback for logging/telemetry.
@@ -613,7 +619,7 @@ declare function inputCheckbox(props?: {
 /**
  * Styles a native color picker swatch with themed padding, rounded swatch and
  * disabled styling. Apply to an `<input>` element of type `color` (the patch
- * sets `type: "color"`).
+ * default is `type: "color"`; a native `type` wins).
  *
  * @hostTag input
  * @param props.color - Optional theme color tone used for the disabled state (`ValueOrState<ThemeColor>`). Defaults to `"neutral"`.
@@ -629,7 +635,7 @@ type InputDateTimeMode = "date" | "time" | "week" | "month" | "datetime-local";
 /**
  * Styles a native date/time input with themed border, padding, hover, focus,
  * invalid and disabled states. The `mode` selects the input `type`. Apply to
- * an `<input>` element (the patch sets `type` to the chosen `mode`).
+ * an `<input>` element (the patch default `type` is the chosen `mode`; a native `type` wins).
  *
  * @hostTag input
  * @param props.mode - Input mode selecting the host `type`: `"date" | "time" | "week" | "month" | "datetime-local"`. Defaults to `"datetime-local"`.
@@ -646,7 +652,7 @@ declare function inputDateTime(props?: {
 /**
  * Styles a native file input with a themed upload button, border, hover, focus
  * and disabled states. Apply to an `<input>` element of type `file` (the patch
- * sets `type: "file"`).
+ * default is `type: "file"`; a native `type` wins).
  *
  * @hostTag input
  * @param props.color - Optional theme color tone for text/border and the upload button (`ValueOrState<ThemeColor>`). Defaults to `"neutral"`.
@@ -661,7 +667,7 @@ declare function inputFile(props?: {
 /**
  * Styles a native number input with themed border, padding, visible spin
  * buttons, hover, focus and disabled states. Apply to an `<input>` element of
- * type `number` (the patch sets `type: "number"`).
+ * type `number` (the patch default is `type: "number"`; a native `type` wins).
  *
  * @hostTag input
  * @param props.color - Optional theme color tone for text/border (`ValueOrState<ThemeColor>`). Defaults to `"neutral"`.
@@ -687,16 +693,32 @@ declare function inputOTP(): PartialElement;
 /**
  * Password input wrapper: a styled `<div>` that inserts an `<input type="password">`
  * and a show/hide toggle button. The outer div carries the focus-ring outline via
- * `:focus-within`. Apply to an empty `<div>`.
+ * `:focus-within`. Apply to an empty `<div>`. Host `value`/`name`/`onInput`/
+ * `disabled`/`required` are forwarded onto the real input so the field
+ * participates in FormData.
  *
  * @hostTag div
  * @param props.color - Base color tone for border/background/text. Defaults to `"neutral"`.
  * @param props.accentColor - Accent outline color on focus-within. Defaults to `"primary"`.
- * @example { div: null, $: [inputPassword()] }
+ * @param props.value - Forwarded onto the inner input. Optional.
+ * @param props.name - Forwarded onto the inner input (FormData key). Optional.
+ * @param props.onInput - Forwarded onto the inner input. Optional.
+ * @param props.disabled - Forwarded onto the inner input. Optional.
+ * @param props.required - Forwarded onto the inner input. Optional.
+ * @param props.autocomplete - Native autocomplete token. Defaults to `"current-password"`.
+ * @param props.ariaLabel - Accessible name for the inner input. Defaults to `"Password"`.
+ * @example { div: null, name: "password", $: [inputPassword()] }
  */
 declare function inputPassword(props?: {
     color?: ValueOrState<ThemeColor>;
     accentColor?: ValueOrState<ThemeColor>;
+    value?: ValueOrState<string>;
+    name?: string;
+    onInput?: (event: Event) => void;
+    disabled?: ValueOrState<boolean>;
+    required?: boolean;
+    autocomplete?: string;
+    ariaLabel?: string;
 }): PartialElement;
 
 /**
@@ -732,7 +754,7 @@ declare function inputRange(props?: {
 /**
  * Styles a search input with themed border, padding, placeholder color, native
  * search decorations, hover, focus and disabled states. Apply to an `<input>`
- * element of type `search` (the patch sets `type: "search"`).
+ * element of type `search` (the patch default is `type: "search"`; a native `type` wins).
  *
  * @hostTag input
  * @param props.color - Optional theme color tone for text/border/placeholder (`ValueOrState<ThemeColor>`). Defaults to `"neutral"`.
@@ -845,7 +867,7 @@ declare function linkButton(props?: {
  * @param props.color - Surface color tone. Optional `ThemeColor`, defaults to `"neutral"`.
  * @example { ul: [...], $: [list()] }
  */
-declare function list(_props?: {
+declare function list(props?: {
     color?: ThemeColor;
 }): PartialElement;
 /**
@@ -1094,11 +1116,22 @@ declare function progress(props?: {
     accentColor?: ValueOrState<ThemeColor>;
 }): PartialElement;
 
+type RatingProps = {
+    value?: ValueOrState<number>;
+    max?: number;
+    onChange?: (value: number) => void;
+    readOnly?: boolean;
+    color?: ThemeColor;
+};
 /**
  * Interactive star rating applied to a container `<div>`. Manages its own star
  * children: click to set, Arrow keys to adjust, hover to preview. In `readOnly`
  * mode stars are non-interactive. Apply to a `<div>` element.
  *
+ * Star insert runs in `_onInit` (SSR markup). `onChange`/`readOnly`/`max` and
+ * a plain-number `value` stay live via `behavior()` `update()` so a reused
+ * node picks up the latest factory props.
+ *
  * @hostTag div
  * @param props.value - Current rating (0 – max). `ValueOrState<number>`, defaults to `0`.
  * @param props.max - Total number of stars. Optional `number`, defaults to `5`.
@@ -1107,13 +1140,7 @@ declare function progress(props?: {
  * @param props.color - Star color tone. Optional `ThemeColor`, defaults to `"warning"`.
  * @example { div: null, $: [rating({ value: ratingState, onChange: (v) => ratingState.set(v) })] }
  */
-declare function rating(props?: {
-    value?: ValueOrState<number>;
-    max?: number;
-    onChange?: (value: number) => void;
-    readOnly?: boolean;
-    color?: ThemeColor;
-}): PartialElement;
+declare function rating(props?: RatingProps): PartialElement;
 
 /**
  * Circular ring progress indicator rendered via CSS `conic-gradient` and a
@@ -1350,17 +1377,6 @@ declare function splitter(props?: {
     min?: number;
     max?: number;
 }): PartialElement;
-/**
- * The resizable panel inside a `splitter`. Reads the `splitter` context and binds its
- * width (horizontal) or height (vertical) to the context `size` state, updating reactively as
- * the handle is dragged. Intended for exactly two panels either side of one `splitterHandle`:
- * the first `splitterPanel` mounted takes `size`%, and the second takes the complementary
- * `100 - size`% — so the pair always sums to the full width/height instead of both tracking
- * the same number (which would make them grow and shrink together instead of trading space).
- * Warns if used outside a `splitter`. Takes no props.
- *
- * @example { div: [...], $: [splitterPanel()] }
- */
 declare function splitterPanel(): PartialElement;
 /**
  * The draggable divider inside a `splitter`. Reads the `splitter` context, shows the
@@ -1488,11 +1504,11 @@ declare function tabs(props?: {
 /**
  * Styles an inline chip/tag (rounded, bordered, optional remove button).
  * No host tag check; typically applied to a `<span>`. When `removable` is true,
- * a close button is inserted that removes the host node on click.
+ * a close button is inserted that removes the host node on click or Enter/Space.
  *
  * @hostTag span
  * @param props.color - Theme color for the chip background/border/text. Optional, accepts a value or state. Defaults to `"neutral"`.
- * @param props.removable - When true, renders a remove (x) button that removes the tag on click. Optional. Defaults to `false`.
+ * @param props.removable - When true, renders a remove (x) button that removes the tag on click or Enter/Space. Optional. Defaults to `false`.
  * @example { span: "Label", $: [tag({ removable: true })] }
  */
 declare function tag(props?: {
@@ -1507,7 +1523,7 @@ declare function tag(props?: {
  * @hostTag textarea
  * @param props.color - Theme color for the border and text. Optional, accepts a value or state. Defaults to `"neutral"`.
  * @param props.accentColor - Theme color for hover/focus outline. Optional, accepts a value or state. Defaults to `"primary"`.
- * @param props.autoResize - When true, grows the textarea height to fit its content on input. Optional. Defaults to `false`.
+ * @param props.autoResize - When true, grows the textarea height to fit its content on input and when `value` updates. Optional. Defaults to `false`.
  * @example { textarea: null, $: [textarea({ autoResize: true })] }
  */
 declare function textarea(props?: {

package/dist/index.d.ts

@@ -358,6 +358,8 @@ declare function details(props?: {
  * fades via opacity, locks page scroll while open, traps Tab focus within the
  * dialog, restores focus to the previously focused element on close, sets
  * `aria-modal`, and closes on outside (backdrop) click. Apply to a `<dialog>`.
+ * Closed state is inline `visibility`/`pointer-events`/`display:none` so a
+ * consumer `style.display` cannot keep the node in layout.
  *
  * Accessible name/description: pass `labelledBy`/`describedBy` the `id` of a
  * heading/paragraph inside the dialog (Radix Title/Description parity). The
@@ -458,6 +460,10 @@ declare function empty(props?: {
  * caught. Errors during static construction propagate normally — those are
  * programming errors, not runtime data errors.
  *
+ * `reset()` restores the original children (including a reactive children
+ * function) so the next evaluation runs again — it does not leave the host
+ * empty.
+ *
  * @hostTag any
  * @param props.fallback - Fallback element or factory `(error, reset) => element`. Defaults to a plain error message div.
  * @param props.onError - Optional callback for logging/telemetry.
@@ -613,7 +619,7 @@ declare function inputCheckbox(props?: {
 /**
  * Styles a native color picker swatch with themed padding, rounded swatch and
  * disabled styling. Apply to an `<input>` element of type `color` (the patch
- * sets `type: "color"`).
+ * default is `type: "color"`; a native `type` wins).
  *
  * @hostTag input
  * @param props.color - Optional theme color tone used for the disabled state (`ValueOrState<ThemeColor>`). Defaults to `"neutral"`.
@@ -629,7 +635,7 @@ type InputDateTimeMode = "date" | "time" | "week" | "month" | "datetime-local";
 /**
  * Styles a native date/time input with themed border, padding, hover, focus,
  * invalid and disabled states. The `mode` selects the input `type`. Apply to
- * an `<input>` element (the patch sets `type` to the chosen `mode`).
+ * an `<input>` element (the patch default `type` is the chosen `mode`; a native `type` wins).
  *
  * @hostTag input
  * @param props.mode - Input mode selecting the host `type`: `"date" | "time" | "week" | "month" | "datetime-local"`. Defaults to `"datetime-local"`.
@@ -646,7 +652,7 @@ declare function inputDateTime(props?: {
 /**
  * Styles a native file input with a themed upload button, border, hover, focus
  * and disabled states. Apply to an `<input>` element of type `file` (the patch
- * sets `type: "file"`).
+ * default is `type: "file"`; a native `type` wins).
  *
  * @hostTag input
  * @param props.color - Optional theme color tone for text/border and the upload button (`ValueOrState<ThemeColor>`). Defaults to `"neutral"`.
@@ -661,7 +667,7 @@ declare function inputFile(props?: {
 /**
  * Styles a native number input with themed border, padding, visible spin
  * buttons, hover, focus and disabled states. Apply to an `<input>` element of
- * type `number` (the patch sets `type: "number"`).
+ * type `number` (the patch default is `type: "number"`; a native `type` wins).
  *
  * @hostTag input
  * @param props.color - Optional theme color tone for text/border (`ValueOrState<ThemeColor>`). Defaults to `"neutral"`.
@@ -687,16 +693,32 @@ declare function inputOTP(): PartialElement;
 /**
  * Password input wrapper: a styled `<div>` that inserts an `<input type="password">`
  * and a show/hide toggle button. The outer div carries the focus-ring outline via
- * `:focus-within`. Apply to an empty `<div>`.
+ * `:focus-within`. Apply to an empty `<div>`. Host `value`/`name`/`onInput`/
+ * `disabled`/`required` are forwarded onto the real input so the field
+ * participates in FormData.
  *
  * @hostTag div
  * @param props.color - Base color tone for border/background/text. Defaults to `"neutral"`.
  * @param props.accentColor - Accent outline color on focus-within. Defaults to `"primary"`.
- * @example { div: null, $: [inputPassword()] }
+ * @param props.value - Forwarded onto the inner input. Optional.
+ * @param props.name - Forwarded onto the inner input (FormData key). Optional.
+ * @param props.onInput - Forwarded onto the inner input. Optional.
+ * @param props.disabled - Forwarded onto the inner input. Optional.
+ * @param props.required - Forwarded onto the inner input. Optional.
+ * @param props.autocomplete - Native autocomplete token. Defaults to `"current-password"`.
+ * @param props.ariaLabel - Accessible name for the inner input. Defaults to `"Password"`.
+ * @example { div: null, name: "password", $: [inputPassword()] }
  */
 declare function inputPassword(props?: {
     color?: ValueOrState<ThemeColor>;
     accentColor?: ValueOrState<ThemeColor>;
+    value?: ValueOrState<string>;
+    name?: string;
+    onInput?: (event: Event) => void;
+    disabled?: ValueOrState<boolean>;
+    required?: boolean;
+    autocomplete?: string;
+    ariaLabel?: string;
 }): PartialElement;
 
 /**
@@ -732,7 +754,7 @@ declare function inputRange(props?: {
 /**
  * Styles a search input with themed border, padding, placeholder color, native
  * search decorations, hover, focus and disabled states. Apply to an `<input>`
- * element of type `search` (the patch sets `type: "search"`).
+ * element of type `search` (the patch default is `type: "search"`; a native `type` wins).
  *
  * @hostTag input
  * @param props.color - Optional theme color tone for text/border/placeholder (`ValueOrState<ThemeColor>`). Defaults to `"neutral"`.
@@ -845,7 +867,7 @@ declare function linkButton(props?: {
  * @param props.color - Surface color tone. Optional `ThemeColor`, defaults to `"neutral"`.
  * @example { ul: [...], $: [list()] }
  */
-declare function list(_props?: {
+declare function list(props?: {
     color?: ThemeColor;
 }): PartialElement;
 /**
@@ -1094,11 +1116,22 @@ declare function progress(props?: {
     accentColor?: ValueOrState<ThemeColor>;
 }): PartialElement;
 
+type RatingProps = {
+    value?: ValueOrState<number>;
+    max?: number;
+    onChange?: (value: number) => void;
+    readOnly?: boolean;
+    color?: ThemeColor;
+};
 /**
  * Interactive star rating applied to a container `<div>`. Manages its own star
  * children: click to set, Arrow keys to adjust, hover to preview. In `readOnly`
  * mode stars are non-interactive. Apply to a `<div>` element.
  *
+ * Star insert runs in `_onInit` (SSR markup). `onChange`/`readOnly`/`max` and
+ * a plain-number `value` stay live via `behavior()` `update()` so a reused
+ * node picks up the latest factory props.
+ *
  * @hostTag div
  * @param props.value - Current rating (0 – max). `ValueOrState<number>`, defaults to `0`.
  * @param props.max - Total number of stars. Optional `number`, defaults to `5`.
@@ -1107,13 +1140,7 @@ declare function progress(props?: {
  * @param props.color - Star color tone. Optional `ThemeColor`, defaults to `"warning"`.
  * @example { div: null, $: [rating({ value: ratingState, onChange: (v) => ratingState.set(v) })] }
  */
-declare function rating(props?: {
-    value?: ValueOrState<number>;
-    max?: number;
-    onChange?: (value: number) => void;
-    readOnly?: boolean;
-    color?: ThemeColor;
-}): PartialElement;
+declare function rating(props?: RatingProps): PartialElement;
 
 /**
  * Circular ring progress indicator rendered via CSS `conic-gradient` and a
@@ -1350,17 +1377,6 @@ declare function splitter(props?: {
     min?: number;
     max?: number;
 }): PartialElement;
-/**
- * The resizable panel inside a `splitter`. Reads the `splitter` context and binds its
- * width (horizontal) or height (vertical) to the context `size` state, updating reactively as
- * the handle is dragged. Intended for exactly two panels either side of one `splitterHandle`:
- * the first `splitterPanel` mounted takes `size`%, and the second takes the complementary
- * `100 - size`% — so the pair always sums to the full width/height instead of both tracking
- * the same number (which would make them grow and shrink together instead of trading space).
- * Warns if used outside a `splitter`. Takes no props.
- *
- * @example { div: [...], $: [splitterPanel()] }
- */
 declare function splitterPanel(): PartialElement;
 /**
  * The draggable divider inside a `splitter`. Reads the `splitter` context, shows the
@@ -1488,11 +1504,11 @@ declare function tabs(props?: {
 /**
  * Styles an inline chip/tag (rounded, bordered, optional remove button).
  * No host tag check; typically applied to a `<span>`. When `removable` is true,
- * a close button is inserted that removes the host node on click.
+ * a close button is inserted that removes the host node on click or Enter/Space.
  *
  * @hostTag span
  * @param props.color - Theme color for the chip background/border/text. Optional, accepts a value or state. Defaults to `"neutral"`.
- * @param props.removable - When true, renders a remove (x) button that removes the tag on click. Optional. Defaults to `false`.
+ * @param props.removable - When true, renders a remove (x) button that removes the tag on click or Enter/Space. Optional. Defaults to `false`.
  * @example { span: "Label", $: [tag({ removable: true })] }
  */
 declare function tag(props?: {
@@ -1507,7 +1523,7 @@ declare function tag(props?: {
  * @hostTag textarea
  * @param props.color - Theme color for the border and text. Optional, accepts a value or state. Defaults to `"neutral"`.
  * @param props.accentColor - Theme color for hover/focus outline. Optional, accepts a value or state. Defaults to `"primary"`.
- * @param props.autoResize - When true, grows the textarea height to fit its content on input. Optional. Defaults to `false`.
+ * @param props.autoResize - When true, grows the textarea height to fit its content on input and when `value` updates. Optional. Defaults to `false`.
  * @example { textarea: null, $: [textarea({ autoResize: true })] }
  */
 declare function textarea(props?: {