@domphy/ui 0.20.2 → 0.20.6

package/dist/index.d.cts

@@ -23,7 +23,7 @@ declare function abbreviation(props?: {
  *
  * @param props.type - `"single"` (default) or `"multiple"`. Single mode auto-closes siblings.
  * @param props.color - Theme color tone for borders and backgrounds. Defaults to `"neutral"`.
- * @param props.accentColor - Accent color for focus outlines on summary. Defaults to `"primary"`.
+ * @param props.accentColor - Accent color for focus rings on summary. Defaults to `"primary"`.
  * @example
  * { div: [
  *   { details: [{ summary: "Section A" }, { p: "Content A" }], $: [details()] },
@@ -125,8 +125,9 @@ type ButtonSize = keyof typeof BUTTON_SIZE_FONT;
 
 type ButtonVariant = "solid" | "outline" | "ghost";
 /**
- * A themed button control with density-aware padding/radius and hover, focus-visible,
- * `[disabled]`, and `[aria-busy=true]` states. Apply to a `<button>` element.
+ * A themed button control with density-aware padding/radius and hover, pressed
+ * (`:active` ±2), focus-visible, `[disabled]`, and `[aria-busy=true]` states.
+ * Apply to a `<button>` element.
  *
  * @hostTag button
  * @param props.color - Button color tone. Optional `ValueOrState<ThemeColor>`, default "primary".
@@ -260,7 +261,7 @@ declare function commandSearch(props?: {
  * used inside a `command()`.
  *
  * @param props.color - Base theme color tone. Defaults to "neutral".
- * @param props.accentColor - Accent color used for the focus outline. Defaults to "primary".
+ * @param props.accentColor - Accent color used for the focus ring. Defaults to "primary".
  * @example { button: "Open file", $: [commandItem({ color: "neutral" })] }
  */
 declare function commandItem(props?: {
@@ -340,7 +341,7 @@ declare function descriptionList(props?: {
  *
  * @hostTag details
  * @param props.color - Theme color tone (`ValueOrState<ThemeColor>`) for the body/summary. Defaults to "neutral".
- * @param props.accentColor - Accent color (`ValueOrState<ThemeColor>`) for the summary's focus outline. Defaults to "primary".
+ * @param props.accentColor - Accent color (`ValueOrState<ThemeColor>`) for the summary's focus ring. Defaults to "primary".
  * @param props.duration - Open/close transition duration in milliseconds. Defaults to 240.
  * @example { details: [{ summary: "More" }, { div: "Body" }], $: [details()] }
  */
@@ -571,7 +572,7 @@ declare function inputCheckbox(props?: {
  * @param props.accentColor - Optional theme color tone (`ValueOrState<ThemeColor>`). Defaults to `"primary"`.
  * @example { input: null, type: "color", $: [inputColor()] }
  */
-declare function inputColor(_props?: {
+declare function inputColor(props?: {
     color?: ValueOrState<ThemeColor>;
     accentColor?: ValueOrState<ThemeColor>;
 }): PartialElement;
@@ -624,6 +625,17 @@ declare function inputNumber(props?: {
     accentColor?: ValueOrState<ThemeColor>;
 }): PartialElement;
 
+/**
+ * Lays out a one-time-password container as a horizontal row of inputs and
+ * wires keyboard navigation: auto-advance on input, backspace/arrow movement,
+ * and paste distribution across the child inputs. Apply to a container element
+ * (e.g. `<div>`) whose direct children are the OTP `<input>` boxes. Takes no
+ * props.
+ *
+ * @example { div: null, $: [inputOTP()], children: [{ input: null }, { input: null }] }
+ */
+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
@@ -639,17 +651,6 @@ declare function inputPassword(props?: {
     accentColor?: ValueOrState<ThemeColor>;
 }): PartialElement;
 
-/**
- * Lays out a one-time-password container as a horizontal row of inputs and
- * wires keyboard navigation: auto-advance on input, backspace/arrow movement,
- * and paste distribution across the child inputs. Apply to a container element
- * (e.g. `<div>`) whose direct children are the OTP `<input>` boxes. Takes no
- * props.
- *
- * @example { div: null, $: [inputOTP()], children: [{ input: null }, { input: null }] }
- */
-declare function inputOTP(): PartialElement;
-
 /**
  * Styles a custom radio button with a themed circular box, checked dot, hover,
  * focus and disabled states. Apply to an `<input>` element of type `radio`
@@ -769,16 +770,21 @@ declare function link(props?: {
 }): PartialElement;
 
 /**
- * An `<a>` element styled to look like a button — same visual appearance as
- * `button()` but preserves link semantics (href, middle-click, right-click).
- * Apply to an `<a>` element.
+ * An `<a>` element styled to look like a button — same visual system as
+ * `button()` (`variant` / `size` / color) while preserving link semantics
+ * (href, middle-click, right-click). Apply to an `<a>` element.
  *
  * @hostTag a
  * @param props.color - Button color tone. Optional `ValueOrState<ThemeColor>`, default "primary".
+ * @param props.variant - `"outline"` (default) | `"solid"` | `"ghost"` — matches `button()`.
+ * @param props.size - `"small" | "medium" | "large"`, defaults to `"medium"`.
  * @example { a: "Open app", href: "/app", $: [linkButton({ color: "primary" })] }
+ * @example { a: "Get started", href: "/start", $: [linkButton({ variant: "solid" })] }
  */
 declare function linkButton(props?: {
     color?: ValueOrState<ThemeColor>;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
 }): PartialElement;
 
 /**
@@ -893,23 +899,6 @@ interface MotionProps {
         iterations?: number;
     };
 }
-/**
- * Animation primitive driven by the Web Animations API. Runs an enter
- * animation on mount (`initial` -> `animate`), re-animates whenever `animate`
- * is a `State` that changes, and plays the `exit` keyframe before removal.
- * Has no host-tag restriction; apply to any element you want to animate.
- *
- * @param props - Optional configuration (see {@link MotionProps}).
- * @param props.initial - Starting keyframe applied before the enter animation.
- * @param props.animate - Target keyframe, or a `State` to re-animate on change.
- * @param props.exit - Keyframe animated to before the element is removed.
- * @param props.transition - Timing options.
- * @param props.transition.duration - Duration in ms. Defaults to `300`.
- * @param props.transition.delay - Delay in ms. Defaults to `0`.
- * @param props.transition.easing - CSS easing. Defaults to `"ease"`.
- * @param props.transition.iterations - Number of iterations. Defaults to `1`.
- * @example { div: "Hello", $: [motion({ initial: { opacity: 0 }, animate: { opacity: 1 } })] }
- */
 declare function motion(props?: MotionProps): PartialElement;
 
 /**
@@ -1268,9 +1257,10 @@ declare function selectList(props?: {
 }): PartialElement;
 
 /**
- * A loading placeholder block with a pulsing opacity animation. Marked `aria-hidden`, themed
- * background/foreground, fixed height, slight rounding. No host-tag check; typically applied
- * to a block-level element such as a `div` or `span`.
+ * A loading placeholder block with a left-to-right shimmer gradient. Marked
+ * `aria-hidden`, themed background/foreground, fixed height, slight rounding.
+ * No host-tag check; typically applied to a block-level element such as a
+ * `div` or `span`.
  *
  * @param props.color - Theme color tone for the placeholder. Accepts a value or reactive state.
  *   Defaults to `"neutral"`.

package/dist/index.d.ts

@@ -23,7 +23,7 @@ declare function abbreviation(props?: {
  *
  * @param props.type - `"single"` (default) or `"multiple"`. Single mode auto-closes siblings.
  * @param props.color - Theme color tone for borders and backgrounds. Defaults to `"neutral"`.
- * @param props.accentColor - Accent color for focus outlines on summary. Defaults to `"primary"`.
+ * @param props.accentColor - Accent color for focus rings on summary. Defaults to `"primary"`.
  * @example
  * { div: [
  *   { details: [{ summary: "Section A" }, { p: "Content A" }], $: [details()] },
@@ -125,8 +125,9 @@ type ButtonSize = keyof typeof BUTTON_SIZE_FONT;
 
 type ButtonVariant = "solid" | "outline" | "ghost";
 /**
- * A themed button control with density-aware padding/radius and hover, focus-visible,
- * `[disabled]`, and `[aria-busy=true]` states. Apply to a `<button>` element.
+ * A themed button control with density-aware padding/radius and hover, pressed
+ * (`:active` ±2), focus-visible, `[disabled]`, and `[aria-busy=true]` states.
+ * Apply to a `<button>` element.
  *
  * @hostTag button
  * @param props.color - Button color tone. Optional `ValueOrState<ThemeColor>`, default "primary".
@@ -260,7 +261,7 @@ declare function commandSearch(props?: {
  * used inside a `command()`.
  *
  * @param props.color - Base theme color tone. Defaults to "neutral".
- * @param props.accentColor - Accent color used for the focus outline. Defaults to "primary".
+ * @param props.accentColor - Accent color used for the focus ring. Defaults to "primary".
  * @example { button: "Open file", $: [commandItem({ color: "neutral" })] }
  */
 declare function commandItem(props?: {
@@ -340,7 +341,7 @@ declare function descriptionList(props?: {
  *
  * @hostTag details
  * @param props.color - Theme color tone (`ValueOrState<ThemeColor>`) for the body/summary. Defaults to "neutral".
- * @param props.accentColor - Accent color (`ValueOrState<ThemeColor>`) for the summary's focus outline. Defaults to "primary".
+ * @param props.accentColor - Accent color (`ValueOrState<ThemeColor>`) for the summary's focus ring. Defaults to "primary".
  * @param props.duration - Open/close transition duration in milliseconds. Defaults to 240.
  * @example { details: [{ summary: "More" }, { div: "Body" }], $: [details()] }
  */
@@ -571,7 +572,7 @@ declare function inputCheckbox(props?: {
  * @param props.accentColor - Optional theme color tone (`ValueOrState<ThemeColor>`). Defaults to `"primary"`.
  * @example { input: null, type: "color", $: [inputColor()] }
  */
-declare function inputColor(_props?: {
+declare function inputColor(props?: {
     color?: ValueOrState<ThemeColor>;
     accentColor?: ValueOrState<ThemeColor>;
 }): PartialElement;
@@ -624,6 +625,17 @@ declare function inputNumber(props?: {
     accentColor?: ValueOrState<ThemeColor>;
 }): PartialElement;
 
+/**
+ * Lays out a one-time-password container as a horizontal row of inputs and
+ * wires keyboard navigation: auto-advance on input, backspace/arrow movement,
+ * and paste distribution across the child inputs. Apply to a container element
+ * (e.g. `<div>`) whose direct children are the OTP `<input>` boxes. Takes no
+ * props.
+ *
+ * @example { div: null, $: [inputOTP()], children: [{ input: null }, { input: null }] }
+ */
+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
@@ -639,17 +651,6 @@ declare function inputPassword(props?: {
     accentColor?: ValueOrState<ThemeColor>;
 }): PartialElement;
 
-/**
- * Lays out a one-time-password container as a horizontal row of inputs and
- * wires keyboard navigation: auto-advance on input, backspace/arrow movement,
- * and paste distribution across the child inputs. Apply to a container element
- * (e.g. `<div>`) whose direct children are the OTP `<input>` boxes. Takes no
- * props.
- *
- * @example { div: null, $: [inputOTP()], children: [{ input: null }, { input: null }] }
- */
-declare function inputOTP(): PartialElement;
-
 /**
  * Styles a custom radio button with a themed circular box, checked dot, hover,
  * focus and disabled states. Apply to an `<input>` element of type `radio`
@@ -769,16 +770,21 @@ declare function link(props?: {
 }): PartialElement;
 
 /**
- * An `<a>` element styled to look like a button — same visual appearance as
- * `button()` but preserves link semantics (href, middle-click, right-click).
- * Apply to an `<a>` element.
+ * An `<a>` element styled to look like a button — same visual system as
+ * `button()` (`variant` / `size` / color) while preserving link semantics
+ * (href, middle-click, right-click). Apply to an `<a>` element.
  *
  * @hostTag a
  * @param props.color - Button color tone. Optional `ValueOrState<ThemeColor>`, default "primary".
+ * @param props.variant - `"outline"` (default) | `"solid"` | `"ghost"` — matches `button()`.
+ * @param props.size - `"small" | "medium" | "large"`, defaults to `"medium"`.
  * @example { a: "Open app", href: "/app", $: [linkButton({ color: "primary" })] }
+ * @example { a: "Get started", href: "/start", $: [linkButton({ variant: "solid" })] }
  */
 declare function linkButton(props?: {
     color?: ValueOrState<ThemeColor>;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
 }): PartialElement;
 
 /**
@@ -893,23 +899,6 @@ interface MotionProps {
         iterations?: number;
     };
 }
-/**
- * Animation primitive driven by the Web Animations API. Runs an enter
- * animation on mount (`initial` -> `animate`), re-animates whenever `animate`
- * is a `State` that changes, and plays the `exit` keyframe before removal.
- * Has no host-tag restriction; apply to any element you want to animate.
- *
- * @param props - Optional configuration (see {@link MotionProps}).
- * @param props.initial - Starting keyframe applied before the enter animation.
- * @param props.animate - Target keyframe, or a `State` to re-animate on change.
- * @param props.exit - Keyframe animated to before the element is removed.
- * @param props.transition - Timing options.
- * @param props.transition.duration - Duration in ms. Defaults to `300`.
- * @param props.transition.delay - Delay in ms. Defaults to `0`.
- * @param props.transition.easing - CSS easing. Defaults to `"ease"`.
- * @param props.transition.iterations - Number of iterations. Defaults to `1`.
- * @example { div: "Hello", $: [motion({ initial: { opacity: 0 }, animate: { opacity: 1 } })] }
- */
 declare function motion(props?: MotionProps): PartialElement;
 
 /**
@@ -1268,9 +1257,10 @@ declare function selectList(props?: {
 }): PartialElement;
 
 /**
- * A loading placeholder block with a pulsing opacity animation. Marked `aria-hidden`, themed
- * background/foreground, fixed height, slight rounding. No host-tag check; typically applied
- * to a block-level element such as a `div` or `span`.
+ * A loading placeholder block with a left-to-right shimmer gradient. Marked
+ * `aria-hidden`, themed background/foreground, fixed height, slight rounding.
+ * No host-tag check; typically applied to a block-level element such as a
+ * `div` or `span`.
  *
  * @param props.color - Theme color tone for the placeholder. Accepts a value or reactive state.
  *   Defaults to `"neutral"`.