@funstack/ui 0.1.0-alpha.5 → 0.1.0-alpha.7

package/dist/accordion/accordion-item.mjs

@@ -1,8 +1,8 @@
 "use client";
-import { useTransitionBoundary } from "../internal/transition-boundary.mjs";
 import { dataAttr } from "../internal/data-attr.mjs";
-import { useRender } from "../internal/use-render.mjs";
+import { useTransitionBoundary } from "../internal/transition-boundary.mjs";
 import { useDevWarning } from "../internal/use-dev-warning.mjs";
+import { useRender } from "../internal/use-render.mjs";
 import { AccordionItemContext, AccordionRootContext } from "./accordion-context.mjs";
 import { use, useCallback, useMemo, useState } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/accordion/accordion-panel.mjs

@@ -1,8 +1,8 @@
 "use client";
-import { useTransitionBoundary } from "../internal/transition-boundary.mjs";
 import { dataAttr } from "../internal/data-attr.mjs";
-import { useRender } from "../internal/use-render.mjs";
+import { useTransitionBoundary } from "../internal/transition-boundary.mjs";
 import { useDevWarning } from "../internal/use-dev-warning.mjs";
+import { useRender } from "../internal/use-render.mjs";
 import { AccordionItemContext } from "./accordion-context.mjs";
 import { use } from "react";
 //#region src/accordion/accordion-panel.tsx

package/dist/accordion/accordion-root.mjs

@@ -1,12 +1,12 @@
 "use client";
 import { createActionDetails } from "../internal/action-details.mjs";
 import { dataAttr } from "../internal/data-attr.mjs";
+import { useDevWarning } from "../internal/use-dev-warning.mjs";
+import { resolveStateValue } from "../internal/render-element.mjs";
+import { useRender } from "../internal/use-render.mjs";
 import { transitionTypes } from "../internal/transition-types.mjs";
 import { useLatest } from "../internal/use-latest.mjs";
 import { useControllableAction } from "../internal/use-controllable-action.mjs";
-import { resolveStateValue } from "../internal/render-element.mjs";
-import { useRender } from "../internal/use-render.mjs";
-import { useDevWarning } from "../internal/use-dev-warning.mjs";
 import { AccordionRootContext } from "./accordion-context.mjs";
 import { useCallback, useEffectEvent, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/accordion/accordion-trigger.mjs

@@ -1,8 +1,8 @@
 "use client";
-import { useTransitionBoundary } from "../internal/transition-boundary.mjs";
 import { dataAttr } from "../internal/data-attr.mjs";
-import { useRender } from "../internal/use-render.mjs";
+import { useTransitionBoundary } from "../internal/transition-boundary.mjs";
 import { useDevWarning } from "../internal/use-dev-warning.mjs";
+import { useRender } from "../internal/use-render.mjs";
 import { AccordionItemContext } from "./accordion-context.mjs";
 import { use, useCallback } from "react";
 //#region src/accordion/accordion-trigger.tsx

package/dist/button/button.d.mts

@@ -0,0 +1,78 @@
+import { Action, ActionDetails, RenderProp, StateValue } from "../internal/types.mjs";
+import { CSSProperties, ComponentPropsWithRef, ReactNode, ViewTransitionClass } from "react";
+//#region src/button/button.d.ts
+/** Details passed to `Button`'s `action`. Serialisable; `event` is virtual (conventions 2.2). */
+export interface ButtonActionDetails extends ActionDetails {}
+export interface ButtonState {
+  /**
+   * This Button's own `action` is in flight, or a submission it started through its own
+   * function `formAction` is pending.
+   */
+  readonly pending: boolean;
+  /** The `disabled` prop. Not set by pending. */
+  readonly disabled: boolean;
+}
+export interface ButtonProps extends Omit<ComponentPropsWithRef<"button">, "onClick" | "aria-disabled" | "className" | "style" | "children" | "type" | "formAction"> {
+  /**
+   * Runs inside this Button's own transition on click, Enter or Space (`data-pending`
+   * meanwhile). Sync or async; may be a Server Function. A rejection reaches the nearest Error
+   * Boundary above the Button. While it is pending the Button ignores further activation and
+   * renders `aria-disabled="true"`. Not combinable with `formAction` (development error).
+   */
+  action?: Action<[details: ButtonActionDetails]>;
+  /**
+   * React's `formAction`: a function (a Server Function, a `useActionState` dispatch, a client
+   * function) or a URL, run by React instead of the form's `action` when this Button submits the
+   * form. With a function, the Button is `pending` while its own submission runs (not while
+   * another submitter's does), ignores further activation meanwhile, and defaults to
+   * `type="submit"`.
+   */
+  formAction?: ComponentPropsWithRef<"button">["formAction"];
+  /**
+   * Default `"button"`, or `"submit"` when `formAction` is given. Owned on a `<button>` and on a
+   * component `render` element (set it here, not on the element; a component should spread it);
+   * omitted for a host element of another tag (`<a>`). `action` together with
+   * `"submit"` / `"reset"` warns in development: one click would do two things.
+   */
+  type?: "button" | "submit" | "reset";
+  /**
+   * Native `disabled` (owned; a `render` element cannot re-enable it) and `data-disabled`.
+   * Never dispatches. With `focusableWhenDisabled`, inside a `Toolbar.Root`, or when the
+   * rendered element is not a host `<button>` (`render={<a href />}`, a component), renders
+   * `aria-disabled="true"` instead.
+   */
+  disabled?: boolean;
+  /**
+   * Keep a disabled Button focusable: `aria-disabled="true"` instead of native `disabled`, so
+   * keyboard and screen-reader users still find it and a Tooltip on it still opens. Default
+   * `false`; implied `true` inside a `Toolbar.Root` (APG Toolbar) and for a `render` element that
+   * is not a host `<button>`.
+   */
+  focusableWhenDisabled?: boolean;
+  /**
+   * Forwarded as `default` to the Button's `<ViewTransition>`: animates the commit that ends the
+   * action (content keyed on `pending`), not a click. Static; any value makes a mount inside a
+   * transition start a document view transition (issue #35).
+   */
+  transition?: ViewTransitionClass;
+  className?: StateValue<string | undefined, ButtonState>;
+  style?: StateValue<CSSProperties | undefined, ButtonState>;
+  children?: StateValue<ReactNode, ButtonState>;
+  render?: RenderProp<ComponentPropsWithRef<"button">, ButtonState>;
+}
+/**
+ * A button whose click is a transition (design/components/button.md): `<button type="button">`
+ * that runs `action` in its own transition, with `data-pending` and `aria-disabled="true"` while
+ * it runs, and ignores further activation meanwhile (conventions 2.5). With a function
+ * `formAction` it is a form submitter with its own per-submitter pending. Inside a
+ * `Toolbar.Root` a disabled Button stays focusable (`aria-disabled`).
+ *
+ * Owned keys (conventions 1.2): `type` (on a `<button>` only), `disabled`, `aria-disabled`,
+ * `data-pending`, `data-disabled`, `onClick`.
+ */
+export declare function Button({ action, formAction, type, disabled, focusableWhenDisabled, transition, className, style, children, render, ...rest }: ButtonProps): ReactNode;
+export declare namespace Button {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=button.d.mts.map

package/dist/button/button.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.mts","names":[],"sources":["../../src/button/button.tsx"],"mappings":";;;;iBAoBiB,4BAA4B;iBAE5B;;;;;WAKN;;WAEA;;iBAGM,oBAAoB,KACnC;;;;;;;EASA,SAAS,QAAQ,SAAS;;;;;;;;EAQ1B,aAAa;;;;;;;EAOb;;;;;;;EAOA;;;;;;;EAOA;;;;;;EAMA,aAAa;EACb,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;EAC9C,WAAW,WAAW,WAAW;EACjC,SAAS,WAAW,iCAAiC;;;;;;;;;;;;wBAavC,SACd,QACA,YACA,MACA,UACA,uBACA,YACA,WACA,OACA,UACA,WACG,QACF,cAAW;yBAZE"}

package/dist/button/button.mjs

@@ -0,0 +1,77 @@
+"use client";
+import { createActionDetails } from "../internal/action-details.mjs";
+import { dataAttr } from "../internal/data-attr.mjs";
+import { useToolbarContext } from "../internal/toolbar-context.mjs";
+import { useTransitionBoundary } from "../internal/transition-boundary.mjs";
+import { useActionTrigger } from "../internal/use-action-trigger.mjs";
+import { useDevWarning } from "../internal/use-dev-warning.mjs";
+import { isHostButton, rendersButton } from "../internal/render-element.mjs";
+import { useRender } from "../internal/use-render.mjs";
+import { useRef } from "react";
+import { useFormStatus } from "react-dom";
+//#region src/button/button.tsx
+/**
+* A button whose click is a transition (design/components/button.md): `<button type="button">`
+* that runs `action` in its own transition, with `data-pending` and `aria-disabled="true"` while
+* it runs, and ignores further activation meanwhile (conventions 2.5). With a function
+* `formAction` it is a form submitter with its own per-submitter pending. Inside a
+* `Toolbar.Root` a disabled Button stays focusable (`aria-disabled`).
+*
+* Owned keys (conventions 1.2): `type` (on a `<button>` only), `disabled`, `aria-disabled`,
+* `data-pending`, `data-disabled`, `onClick`.
+*/
+function Button({ action, formAction, type, disabled = false, focusableWhenDisabled = false, transition, className, style, children, render, ...rest }) {
+	const toolbar = useToolbarContext();
+	const focusable = focusableWhenDisabled || toolbar !== null || !isHostButton(render);
+	const { pending: ownPending, run } = useActionTrigger();
+	const status = useFormStatus();
+	const submittedWith = useRef(void 0);
+	const formPending = status.pending && typeof formAction === "function" && (status.action === formAction || status.action === submittedWith.current);
+	const pending = ownPending || formPending;
+	useDevWarning(action !== void 0 && formAction !== void 0, "Button: `action` and `formAction` were both given. One click would run two actions; the Button runs `action` and leaves `formAction` to the form submission. Pass one of them.");
+	useDevWarning(action !== void 0 && (type === "submit" || type === "reset"), `Button: \`action\` together with type="${type}". One click would run \`action\` in a transition and ${type === "reset" ? "reset" : "submit"} the form. Use \`formAction\` for a submitter, or drop \`type\`.`);
+	const element = useRender({
+		defaultElement: "button",
+		render,
+		state: {
+			pending,
+			disabled
+		},
+		className,
+		style,
+		children,
+		props: formAction === void 0 ? rest : {
+			...rest,
+			formAction
+		},
+		libraryProps: {
+			...rendersButton(render) && { type: type ?? (formAction !== void 0 ? "submit" : "button") },
+			disabled: disabled && !focusable ? true : void 0,
+			"aria-disabled": pending || disabled && focusable ? true : void 0,
+			"data-pending": dataAttr(pending),
+			"data-disabled": dataAttr(disabled),
+			onClick: (event) => {
+				if (disabled) {
+					event.preventDefault();
+					return;
+				}
+				if (action === void 0) {
+					if (formPending) {
+						event.preventDefault();
+						return;
+					}
+					submittedWith.current = formAction;
+					return;
+				}
+				const details = createActionDetails(event.nativeEvent, {});
+				if (!run(() => action(details))) event.preventDefault();
+			}
+		}
+	});
+	return useTransitionBoundary("Button", transition, element);
+}
+Button.displayName = "Button";
+//#endregion
+export { Button };
+
+//# sourceMappingURL=button.mjs.map

package/dist/button/button.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.mjs","names":[],"sources":["../../src/button/button.tsx"],"sourcesContent":["\"use client\";\nimport { useRef } from \"react\";\nimport type {\n  ComponentPropsWithRef,\n  CSSProperties,\n  MouseEvent,\n  ReactNode,\n  ViewTransitionClass,\n} from \"react\";\nimport { useFormStatus } from \"react-dom\";\nimport { createActionDetails } from \"../internal/action-details.js\";\nimport { dataAttr } from \"../internal/data-attr.js\";\nimport { useToolbarContext } from \"../internal/toolbar-context.js\";\nimport { useTransitionBoundary } from \"../internal/transition-boundary.js\";\nimport type { Action, ActionDetails, RenderProp, StateValue } from \"../internal/types.js\";\nimport { useActionTrigger } from \"../internal/use-action-trigger.js\";\nimport { useDevWarning } from \"../internal/use-dev-warning.js\";\nimport { isHostButton, rendersButton, useRender } from \"../internal/use-render.js\";\n\n/** Details passed to `Button`'s `action`. Serialisable; `event` is virtual (conventions 2.2). */\nexport interface ButtonActionDetails extends ActionDetails {}\n\nexport interface ButtonState {\n  /**\n   * This Button's own `action` is in flight, or a submission it started through its own\n   * function `formAction` is pending.\n   */\n  readonly pending: boolean;\n  /** The `disabled` prop. Not set by pending. */\n  readonly disabled: boolean;\n}\n\nexport interface ButtonProps extends Omit<\n  ComponentPropsWithRef<\"button\">,\n  \"onClick\" | \"aria-disabled\" | \"className\" | \"style\" | \"children\" | \"type\" | \"formAction\"\n> {\n  /**\n   * Runs inside this Button's own transition on click, Enter or Space (`data-pending`\n   * meanwhile). Sync or async; may be a Server Function. A rejection reaches the nearest Error\n   * Boundary above the Button. While it is pending the Button ignores further activation and\n   * renders `aria-disabled=\"true\"`. Not combinable with `formAction` (development error).\n   */\n  action?: Action<[details: ButtonActionDetails]>;\n  /**\n   * React's `formAction`: a function (a Server Function, a `useActionState` dispatch, a client\n   * function) or a URL, run by React instead of the form's `action` when this Button submits the\n   * form. With a function, the Button is `pending` while its own submission runs (not while\n   * another submitter's does), ignores further activation meanwhile, and defaults to\n   * `type=\"submit\"`.\n   */\n  formAction?: ComponentPropsWithRef<\"button\">[\"formAction\"];\n  /**\n   * Default `\"button\"`, or `\"submit\"` when `formAction` is given. Owned on a `<button>` and on a\n   * component `render` element (set it here, not on the element; a component should spread it);\n   * omitted for a host element of another tag (`<a>`). `action` together with\n   * `\"submit\"` / `\"reset\"` warns in development: one click would do two things.\n   */\n  type?: \"button\" | \"submit\" | \"reset\";\n  /**\n   * Native `disabled` (owned; a `render` element cannot re-enable it) and `data-disabled`.\n   * Never dispatches. With `focusableWhenDisabled`, inside a `Toolbar.Root`, or when the\n   * rendered element is not a host `<button>` (`render={<a href />}`, a component), renders\n   * `aria-disabled=\"true\"` instead.\n   */\n  disabled?: boolean;\n  /**\n   * Keep a disabled Button focusable: `aria-disabled=\"true\"` instead of native `disabled`, so\n   * keyboard and screen-reader users still find it and a Tooltip on it still opens. Default\n   * `false`; implied `true` inside a `Toolbar.Root` (APG Toolbar) and for a `render` element that\n   * is not a host `<button>`.\n   */\n  focusableWhenDisabled?: boolean;\n  /**\n   * Forwarded as `default` to the Button's `<ViewTransition>`: animates the commit that ends the\n   * action (content keyed on `pending`), not a click. Static; any value makes a mount inside a\n   * transition start a document view transition (issue #35).\n   */\n  transition?: ViewTransitionClass;\n  className?: StateValue<string | undefined, ButtonState>;\n  style?: StateValue<CSSProperties | undefined, ButtonState>;\n  children?: StateValue<ReactNode, ButtonState>;\n  render?: RenderProp<ComponentPropsWithRef<\"button\">, ButtonState>;\n}\n\n/**\n * A button whose click is a transition (design/components/button.md): `<button type=\"button\">`\n * that runs `action` in its own transition, with `data-pending` and `aria-disabled=\"true\"` while\n * it runs, and ignores further activation meanwhile (conventions 2.5). With a function\n * `formAction` it is a form submitter with its own per-submitter pending. Inside a\n * `Toolbar.Root` a disabled Button stays focusable (`aria-disabled`).\n *\n * Owned keys (conventions 1.2): `type` (on a `<button>` only), `disabled`, `aria-disabled`,\n * `data-pending`, `data-disabled`, `onClick`.\n */\nexport function Button({\n  action,\n  formAction,\n  type,\n  disabled = false,\n  focusableWhenDisabled = false,\n  transition,\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: ButtonProps) {\n  const toolbar = useToolbarContext();\n  // Not a host <button> (a link, a component): native `disabled` would mean nothing to the\n  // browser and hide the state from AT, so the focusable-disabled branch (review fold F1).\n  const focusable = focusableWhenDisabled || toolbar !== null || !isHostButton(render);\n  const { pending: ownPending, run } = useActionTrigger();\n\n  // Per-submitter pending (design 6.2): React reports the submitter's function as\n  // `status.action`. `submittedWith` keeps the function this Button last submitted with, so an\n  // inline `formAction` whose identity changes during the submission still matches.\n  const status = useFormStatus();\n  const submittedWith = useRef<unknown>(undefined);\n  const formPending =\n    status.pending &&\n    typeof formAction === \"function\" &&\n    // Written only by the click handler, before the submission whose status this render shows,\n    // so the render that reads it is never stale for that submission.\n    // oxlint-disable-next-line react/refs\n    (status.action === formAction || status.action === submittedWith.current);\n  const pending = ownPending || formPending;\n\n  useDevWarning(\n    action !== undefined && formAction !== undefined,\n    \"Button: `action` and `formAction` were both given. One click would run two actions; the \" +\n      \"Button runs `action` and leaves `formAction` to the form submission. Pass one of them.\",\n  );\n  useDevWarning(\n    action !== undefined && (type === \"submit\" || type === \"reset\"),\n    `Button: \\`action\\` together with type=\"${type}\". One click would run \\`action\\` in a ` +\n      `transition and ${type === \"reset\" ? \"reset\" : \"submit\"} the form. Use \\`formAction\\` ` +\n      `for a submitter, or drop \\`type\\`.`,\n  );\n\n  const state: ButtonState = { pending, disabled };\n\n  const element = useRender<ComponentPropsWithRef<\"button\">, ButtonState>({\n    defaultElement: \"button\",\n    render,\n    state,\n    className,\n    style,\n    children,\n    props: formAction === undefined ? rest : { ...rest, formAction },\n    libraryProps: {\n      ...(rendersButton(render) && {\n        type: type ?? (formAction !== undefined ? \"submit\" : \"button\"),\n      }),\n      // `undefined` (not `false`) in the focusable case, so the owned key removes a render\n      // element's `disabled` too.\n      disabled: disabled && !focusable ? true : undefined,\n      \"aria-disabled\": pending || (disabled && focusable) ? true : undefined,\n      \"data-pending\": dataAttr(pending),\n      \"data-disabled\": dataAttr(disabled),\n      onClick: (event: MouseEvent<HTMLButtonElement>) => {\n        // `event.defaultPrevented` is never read: an outer part (`Dialog.Trigger`) cancels the\n        // click as part of its own mechanism and the Button must still run (design 5.1).\n        if (disabled) {\n          // A disabled link must not navigate either.\n          event.preventDefault();\n          return;\n        }\n        if (action === undefined) {\n          // A native button (a `formAction` submitter, a command, a link): only the guard.\n          if (formPending) {\n            event.preventDefault();\n            return;\n          }\n          submittedWith.current = formAction;\n          return;\n        }\n        const details: ButtonActionDetails = createActionDetails(event.nativeEvent, {});\n        // Ignored while pending: do not navigate, submit or run a command either.\n        if (!run(() => action(details))) event.preventDefault();\n      },\n    },\n  });\n\n  return useTransitionBoundary(\"Button\", transition, element);\n}\n\nButton.displayName = \"Button\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA8FA,SAAgB,OAAO,EACrB,QACA,YACA,MACA,WAAW,OACX,wBAAwB,OACxB,YACA,WACA,OACA,UACA,QACA,GAAG,QACW;CACd,MAAM,UAAU,kBAAkB;CAGlC,MAAM,YAAY,yBAAyB,YAAY,QAAQ,CAAC,aAAa,MAAM;CACnF,MAAM,EAAE,SAAS,YAAY,QAAQ,iBAAiB;CAKtD,MAAM,SAAS,cAAc;CAC7B,MAAM,gBAAgB,OAAgB,KAAA,CAAS;CAC/C,MAAM,cACJ,OAAO,WACP,OAAO,eAAe,eAIrB,OAAO,WAAW,cAAc,OAAO,WAAW,cAAc;CACnE,MAAM,UAAU,cAAc;CAE9B,cACE,WAAW,KAAA,KAAa,eAAe,KAAA,GACvC,gLAEF;CACA,cACE,WAAW,KAAA,MAAc,SAAS,YAAY,SAAS,UACvD,0CAA0C,KAAK,wDAC3B,SAAS,UAAU,UAAU,SAAS,iEAE5D;CAIA,MAAM,UAAU,UAAwD;EACtE,gBAAgB;EAChB;EACA,OAAA;GAL2B;GAAS;EAKhC;EACJ;EACA;EACA;EACA,OAAO,eAAe,KAAA,IAAY,OAAO;GAAE,GAAG;GAAM;EAAW;EAC/D,cAAc;GACZ,GAAI,cAAc,MAAM,KAAK,EAC3B,MAAM,SAAS,eAAe,KAAA,IAAY,WAAW,UACvD;GAGA,UAAU,YAAY,CAAC,YAAY,OAAO,KAAA;GAC1C,iBAAiB,WAAY,YAAY,YAAa,OAAO,KAAA;GAC7D,gBAAgB,SAAS,OAAO;GAChC,iBAAiB,SAAS,QAAQ;GAClC,UAAU,UAAyC;IAGjD,IAAI,UAAU;KAEZ,MAAM,eAAe;KACrB;IACF;IACA,IAAI,WAAW,KAAA,GAAW;KAExB,IAAI,aAAa;MACf,MAAM,eAAe;MACrB;KACF;KACA,cAAc,UAAU;KACxB;IACF;IACA,MAAM,UAA+B,oBAAoB,MAAM,aAAa,CAAC,CAAC;IAE9E,IAAI,CAAC,UAAU,OAAO,OAAO,CAAC,GAAG,MAAM,eAAe;GACxD;EACF;CACF,CAAC;CAED,OAAO,sBAAsB,UAAU,YAAY,OAAO;AAC5D;AAEA,OAAO,cAAc"}

package/dist/button/index.d.mts

@@ -0,0 +1,3 @@
+import "../internal/platform-attributes.mjs";
+import { Button, ButtonActionDetails, ButtonProps, ButtonState } from "./button.mjs";
+export { Button, type ButtonActionDetails, type ButtonProps, type ButtonState };

package/dist/button/index.mjs

@@ -0,0 +1 @@
+export { Button } from "./button.mjs";

package/dist/checkbox/checkbox.mjs

@@ -1,10 +1,10 @@
 "use client";
-import { useTransitionBoundary } from "../internal/transition-boundary.mjs";
 import { createActionDetails } from "../internal/action-details.mjs";
 import { dataAttr } from "../internal/data-attr.mjs";
+import { useTransitionBoundary } from "../internal/transition-boundary.mjs";
+import { useRender } from "../internal/use-render.mjs";
 import { transitionTypes } from "../internal/transition-types.mjs";
 import { useControllableAction } from "../internal/use-controllable-action.mjs";
-import { useRender } from "../internal/use-render.mjs";
 import { fieldInputProps, useFieldControl, useFieldValueChange, useMergedRef } from "../internal/use-field-control.mjs";
 import { guardCheckableChange, useNativeChecked } from "../internal/use-native-checked.mjs";
 //#region src/checkbox/checkbox.tsx

package/dist/checkbox-group/checkbox-group-item.mjs

@@ -1,6 +1,6 @@
 "use client";
-import { useTransitionBoundary } from "../internal/transition-boundary.mjs";
 import { dataAttr } from "../internal/data-attr.mjs";
+import { useTransitionBoundary } from "../internal/transition-boundary.mjs";
 import { useRender } from "../internal/use-render.mjs";
 import { guardCheckableChange, useNativeChecked } from "../internal/use-native-checked.mjs";
 import { syncPresence } from "../internal/sync-presence.mjs";

package/dist/checkbox-group/checkbox-group-parent.mjs

@@ -1,6 +1,6 @@
 "use client";
-import { useTransitionBoundary } from "../internal/transition-boundary.mjs";
 import { dataAttr } from "../internal/data-attr.mjs";
+import { useTransitionBoundary } from "../internal/transition-boundary.mjs";
 import { useRender } from "../internal/use-render.mjs";
 import { useFormReset } from "../internal/use-form-reset.mjs";
 import { guardCheckableChange, useNativeChecked } from "../internal/use-native-checked.mjs";

package/dist/checkbox-group/checkbox-group-root.mjs

@@ -1,9 +1,9 @@
 "use client";
 import { createActionDetails } from "../internal/action-details.mjs";
 import { dataAttr } from "../internal/data-attr.mjs";
+import { useRender } from "../internal/use-render.mjs";
 import { transitionTypes } from "../internal/transition-types.mjs";
 import { useControllableAction } from "../internal/use-controllable-action.mjs";
-import { useRender } from "../internal/use-render.mjs";
 import { useFieldControl, useFieldValueChange, useMergedRef } from "../internal/use-field-control.mjs";
 import { useNativeGroupReconciliation } from "../internal/use-native-group-reconciliation.mjs";
 import { CheckboxGroupContext, enabledValues } from "./checkbox-group-context.mjs";

package/dist/combobox/combobox-clear.d.mts

@@ -8,7 +8,10 @@ export interface ComboboxClearState {
   readonly disabled: boolean;
 }
 export interface ComboboxClearProps extends Omit<ComponentPropsWithRef<"button">, "onClick" | "onPointerDown" | "onMouseDown" | "tabIndex" | "disabled" | "className" | "style" | "children"> {
-  /** Disables this button; the Root's `disabled` does too. */
+  /**
+   * Disables this button; the Root's `disabled` does too. Native `disabled` on a `<button>`; with
+   * a link or component `render`, `aria-disabled="true"` instead.
+   */
   disabled?: boolean;
   className?: StateValue<string | undefined, ComboboxClearState>;
   style?: StateValue<CSSProperties | undefined, ComboboxClearState>;
@@ -23,8 +26,8 @@ export interface ComboboxClearProps extends Omit<ComponentPropsWithRef<"button">
  * A click while the listbox is open closes it (the platform's light dismiss: the button is
  * outside the popup).
  *
- * Owned keys: `type` (on a `<button>`), `tabIndex`, `disabled`, `onClick`, `onPointerDown`,
- * `onMouseDown`, `data-disabled`.
+ * Owned keys: `type` (on a `<button>`), `tabIndex`, `disabled`, `aria-disabled` (link or component
+ * `render`), `onClick`, `onPointerDown`, `onMouseDown`, `data-disabled`.
  */
 export declare function ComboboxClear({ disabled: ownDisabled, className, style, children, render, ...rest }: ComboboxClearProps): ReactNode;
 export declare namespace ComboboxClear {

package/dist/combobox/combobox-clear.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"combobox-clear.d.mts","names":[],"sources":["../../src/combobox/combobox-clear.tsx"],"mappings":";;;iBAeiB;;WAEN;WACA;WACA;;iBAGM,2BAA2B,KAC1C;;EAWA;EACA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;EAC9C,WAAW,WAAW,WAAW;;EAEjC,SAAS,WAAW,iCAAiC;;;;;;;;;;;;wBAavC,gBACd,UAAU,aACV,WACA,OACA,UACA,WACG,QACF,qBAAkB;yBAPL"}
+{"version":3,"file":"combobox-clear.d.mts","names":[],"sources":["../../src/combobox/combobox-clear.tsx"],"mappings":";;;iBAeiB;;WAEN;WACA;WACA;;iBAGM,2BAA2B,KAC1C;;;;;EAcA;EACA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;EAC9C,WAAW,WAAW,WAAW;;EAEjC,SAAS,WAAW,iCAAiC;;;;;;;;;;;;wBAavC,gBACd,UAAU,aACV,WACA,OACA,UACA,WACG,QACF,qBAAkB;yBAPL"}

package/dist/combobox/combobox-clear.mjs

@@ -1,6 +1,6 @@
 "use client";
 import { dataAttr } from "../internal/data-attr.mjs";
-import { rendersButton } from "../internal/render-element.mjs";
+import { isHostButton, rendersButton } from "../internal/render-element.mjs";
 import { useRender } from "../internal/use-render.mjs";
 import { useComboboxContext } from "./combobox-context.mjs";
 import { useNameWarning } from "./combobox-trigger.mjs";
@@ -12,13 +12,14 @@ import { useNameWarning } from "./combobox-trigger.mjs";
 * A click while the listbox is open closes it (the platform's light dismiss: the button is
 * outside the popup).
 *
-* Owned keys: `type` (on a `<button>`), `tabIndex`, `disabled`, `onClick`, `onPointerDown`,
-* `onMouseDown`, `data-disabled`.
+* Owned keys: `type` (on a `<button>`), `tabIndex`, `disabled`, `aria-disabled` (link or component
+* `render`), `onClick`, `onPointerDown`, `onMouseDown`, `data-disabled`.
 */
 function ComboboxClear({ disabled: ownDisabled = false, className, style, children, render, ...rest }) {
 	const ctx = useComboboxContext("Combobox.Clear");
 	const disabled = ownDisabled || ctx.disabled;
 	const ref = useNameWarning("Combobox.Clear");
+	const focusable = !isHostButton(render);
 	const state = {
 		value: ctx.value,
 		inputValue: ctx.inputValue,
@@ -27,7 +28,8 @@ function ComboboxClear({ disabled: ownDisabled = false, className, style, childr
 	const libraryProps = {
 		...rendersButton(render) && { type: "button" },
 		tabIndex: -1,
-		disabled,
+		disabled: focusable ? void 0 : disabled,
+		...focusable && { "aria-disabled": disabled ? true : void 0 },
 		onPointerDown: (event) => {
 			event.preventDefault();
 		},
@@ -35,7 +37,10 @@ function ComboboxClear({ disabled: ownDisabled = false, className, style, childr
 			event.preventDefault();
 		},
 		onClick: (event) => {
-			if (disabled) return;
+			if (disabled) {
+				event.preventDefault();
+				return;
+			}
 			ctx.clear(event.nativeEvent);
 		},
 		"data-disabled": dataAttr(disabled)

package/dist/combobox/combobox-clear.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"combobox-clear.mjs","names":[],"sources":["../../src/combobox/combobox-clear.tsx"],"sourcesContent":["\"use client\";\nimport type {\n  ComponentPropsWithRef,\n  CSSProperties,\n  MouseEvent,\n  PointerEvent,\n  ReactNode,\n} from \"react\";\nimport { dataAttr } from \"../internal/data-attr.js\";\nimport type { RenderProp, StateValue } from \"../internal/types.js\";\nimport { rendersButton, useRender } from \"../internal/use-render.js\";\nimport type { DataAttributes } from \"../internal/use-render.js\";\nimport { useComboboxContext } from \"./combobox-context.js\";\nimport { useNameWarning } from \"./combobox-trigger.js\";\n\nexport interface ComboboxClearState {\n  /** Optimistic selection. */\n  readonly value: string | null;\n  readonly inputValue: string;\n  readonly disabled: boolean;\n}\n\nexport interface ComboboxClearProps extends Omit<\n  ComponentPropsWithRef<\"button\">,\n  | \"onClick\"\n  | \"onPointerDown\"\n  | \"onMouseDown\"\n  | \"tabIndex\"\n  | \"disabled\"\n  | \"className\"\n  | \"style\"\n  | \"children\"\n> {\n  /** Disables this button; the Root's `disabled` does too. */\n  disabled?: boolean;\n  className?: StateValue<string | undefined, ComboboxClearState>;\n  style?: StateValue<CSSProperties | undefined, ComboboxClearState>;\n  children?: StateValue<ReactNode, ComboboxClearState>;\n  /** Should render a `<button>`. */\n  render?: RenderProp<ComponentPropsWithRef<\"button\">, ComboboxClearState>;\n}\n\n/**\n * The optional button that clears the combobox: `<button type=\"button\" tabindex=\"-1\">`. A click\n * empties the text (urgent) and dispatches `valueChangeAction(null)` unless nothing is selected;\n * the input keeps focus. Always rendered: hide it with CSS (`:placeholder-shown`) or `state`.\n * A click while the listbox is open closes it (the platform's light dismiss: the button is\n * outside the popup).\n *\n * Owned keys: `type` (on a `<button>`), `tabIndex`, `disabled`, `onClick`, `onPointerDown`,\n * `onMouseDown`, `data-disabled`.\n */\nexport function ComboboxClear({\n  disabled: ownDisabled = false,\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: ComboboxClearProps) {\n  const ctx = useComboboxContext(\"Combobox.Clear\");\n  const disabled = ownDisabled || ctx.disabled;\n  const ref = useNameWarning(\"Combobox.Clear\");\n  const state: ComboboxClearState = { value: ctx.value, inputValue: ctx.inputValue, disabled };\n\n  const libraryProps: ComponentPropsWithRef<\"button\"> & DataAttributes = {\n    ...(rendersButton(render) && { type: \"button\" as const }),\n    tabIndex: -1,\n    disabled,\n    onPointerDown: (event: PointerEvent<HTMLButtonElement>) => {\n      event.preventDefault();\n    },\n    onMouseDown: (event: MouseEvent<HTMLButtonElement>) => {\n      event.preventDefault();\n    },\n    onClick: (event: MouseEvent<HTMLButtonElement>) => {\n      if (disabled) return;\n      ctx.clear(event.nativeEvent);\n    },\n    \"data-disabled\": dataAttr(disabled),\n  };\n\n  return useRender<ComponentPropsWithRef<\"button\">, ComboboxClearState>({\n    defaultElement: \"button\",\n    render,\n    state,\n    className,\n    style,\n    children,\n    props: rest,\n    libraryProps,\n    ref,\n  });\n}\n\nComboboxClear.displayName = \"ComboboxClear\";\n"],"mappings":";;;;;;;;;;;;;;;;;AAoDA,SAAgB,cAAc,EAC5B,UAAU,cAAc,OACxB,WACA,OACA,UACA,QACA,GAAG,QACkB;CACrB,MAAM,MAAM,mBAAmB,gBAAgB;CAC/C,MAAM,WAAW,eAAe,IAAI;CACpC,MAAM,MAAM,eAAe,gBAAgB;CAC3C,MAAM,QAA4B;EAAE,OAAO,IAAI;EAAO,YAAY,IAAI;EAAY;CAAS;CAE3F,MAAM,eAAiE;EACrE,GAAI,cAAc,MAAM,KAAK,EAAE,MAAM,SAAkB;EACvD,UAAU;EACV;EACA,gBAAgB,UAA2C;GACzD,MAAM,eAAe;EACvB;EACA,cAAc,UAAyC;GACrD,MAAM,eAAe;EACvB;EACA,UAAU,UAAyC;GACjD,IAAI,UAAU;GACd,IAAI,MAAM,MAAM,WAAW;EAC7B;EACA,iBAAiB,SAAS,QAAQ;CACpC;CAEA,OAAO,UAA+D;EACpE,gBAAgB;EAChB;EACA;EACA;EACA;EACA;EACA,OAAO;EACP;EACA;CACF,CAAC;AACH;AAEA,cAAc,cAAc"}
+{"version":3,"file":"combobox-clear.mjs","names":[],"sources":["../../src/combobox/combobox-clear.tsx"],"sourcesContent":["\"use client\";\nimport type {\n  ComponentPropsWithRef,\n  CSSProperties,\n  MouseEvent,\n  PointerEvent,\n  ReactNode,\n} from \"react\";\nimport { dataAttr } from \"../internal/data-attr.js\";\nimport type { RenderProp, StateValue } from \"../internal/types.js\";\nimport { isHostButton, rendersButton, useRender } from \"../internal/use-render.js\";\nimport type { DataAttributes } from \"../internal/use-render.js\";\nimport { useComboboxContext } from \"./combobox-context.js\";\nimport { useNameWarning } from \"./combobox-trigger.js\";\n\nexport interface ComboboxClearState {\n  /** Optimistic selection. */\n  readonly value: string | null;\n  readonly inputValue: string;\n  readonly disabled: boolean;\n}\n\nexport interface ComboboxClearProps extends Omit<\n  ComponentPropsWithRef<\"button\">,\n  | \"onClick\"\n  | \"onPointerDown\"\n  | \"onMouseDown\"\n  | \"tabIndex\"\n  | \"disabled\"\n  | \"className\"\n  | \"style\"\n  | \"children\"\n> {\n  /**\n   * Disables this button; the Root's `disabled` does too. Native `disabled` on a `<button>`; with\n   * a link or component `render`, `aria-disabled=\"true\"` instead.\n   */\n  disabled?: boolean;\n  className?: StateValue<string | undefined, ComboboxClearState>;\n  style?: StateValue<CSSProperties | undefined, ComboboxClearState>;\n  children?: StateValue<ReactNode, ComboboxClearState>;\n  /** Should render a `<button>`. */\n  render?: RenderProp<ComponentPropsWithRef<\"button\">, ComboboxClearState>;\n}\n\n/**\n * The optional button that clears the combobox: `<button type=\"button\" tabindex=\"-1\">`. A click\n * empties the text (urgent) and dispatches `valueChangeAction(null)` unless nothing is selected;\n * the input keeps focus. Always rendered: hide it with CSS (`:placeholder-shown`) or `state`.\n * A click while the listbox is open closes it (the platform's light dismiss: the button is\n * outside the popup).\n *\n * Owned keys: `type` (on a `<button>`), `tabIndex`, `disabled`, `aria-disabled` (link or component\n * `render`), `onClick`, `onPointerDown`, `onMouseDown`, `data-disabled`.\n */\nexport function ComboboxClear({\n  disabled: ownDisabled = false,\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: ComboboxClearProps) {\n  const ctx = useComboboxContext(\"Combobox.Clear\");\n  const disabled = ownDisabled || ctx.disabled;\n  const ref = useNameWarning(\"Combobox.Clear\");\n  // A link or component render: native `disabled` would mean nothing on a link; the click\n  // handler refuses, so `aria-disabled` (#83).\n  const focusable = !isHostButton(render);\n  const state: ComboboxClearState = { value: ctx.value, inputValue: ctx.inputValue, disabled };\n\n  const libraryProps: ComponentPropsWithRef<\"button\"> & DataAttributes = {\n    ...(rendersButton(render) && { type: \"button\" as const }),\n    tabIndex: -1,\n    disabled: focusable ? undefined : disabled,\n    ...(focusable && { \"aria-disabled\": disabled ? true : undefined }),\n    onPointerDown: (event: PointerEvent<HTMLButtonElement>) => {\n      event.preventDefault();\n    },\n    onMouseDown: (event: MouseEvent<HTMLButtonElement>) => {\n      event.preventDefault();\n    },\n    onClick: (event: MouseEvent<HTMLButtonElement>) => {\n      if (disabled) {\n        // A disabled link must not navigate either.\n        event.preventDefault();\n        return;\n      }\n      ctx.clear(event.nativeEvent);\n    },\n    \"data-disabled\": dataAttr(disabled),\n  };\n\n  return useRender<ComponentPropsWithRef<\"button\">, ComboboxClearState>({\n    defaultElement: \"button\",\n    render,\n    state,\n    className,\n    style,\n    children,\n    props: rest,\n    libraryProps,\n    ref,\n  });\n}\n\nComboboxClear.displayName = \"ComboboxClear\";\n"],"mappings":";;;;;;;;;;;;;;;;;AAuDA,SAAgB,cAAc,EAC5B,UAAU,cAAc,OACxB,WACA,OACA,UACA,QACA,GAAG,QACkB;CACrB,MAAM,MAAM,mBAAmB,gBAAgB;CAC/C,MAAM,WAAW,eAAe,IAAI;CACpC,MAAM,MAAM,eAAe,gBAAgB;CAG3C,MAAM,YAAY,CAAC,aAAa,MAAM;CACtC,MAAM,QAA4B;EAAE,OAAO,IAAI;EAAO,YAAY,IAAI;EAAY;CAAS;CAE3F,MAAM,eAAiE;EACrE,GAAI,cAAc,MAAM,KAAK,EAAE,MAAM,SAAkB;EACvD,UAAU;EACV,UAAU,YAAY,KAAA,IAAY;EAClC,GAAI,aAAa,EAAE,iBAAiB,WAAW,OAAO,KAAA,EAAU;EAChE,gBAAgB,UAA2C;GACzD,MAAM,eAAe;EACvB;EACA,cAAc,UAAyC;GACrD,MAAM,eAAe;EACvB;EACA,UAAU,UAAyC;GACjD,IAAI,UAAU;IAEZ,MAAM,eAAe;IACrB;GACF;GACA,IAAI,MAAM,MAAM,WAAW;EAC7B;EACA,iBAAiB,SAAS,QAAQ;CACpC;CAEA,OAAO,UAA+D;EACpE,gBAAgB;EAChB;EACA;EACA;EACA;EACA;EACA,OAAO;EACP;EACA;CACF,CAAC;AACH;AAEA,cAAc,cAAc"}

package/dist/combobox/combobox-group.mjs

@@ -1,6 +1,6 @@
 "use client";
-import { useRender } from "../internal/use-render.mjs";
 import { useDevWarning } from "../internal/use-dev-warning.mjs";
+import { useRender } from "../internal/use-render.mjs";
 import { ComboboxGroupContext, ComboboxListContext, useComboboxContext } from "./combobox-context.mjs";
 import { use, useId, useLayoutEffect } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/combobox/combobox-list.mjs

@@ -1,8 +1,8 @@
 "use client";
 import { dataAttr } from "../internal/data-attr.mjs";
+import { useDevWarning } from "../internal/use-dev-warning.mjs";
 import { resolveStateValue } from "../internal/render-element.mjs";
 import { useRender } from "../internal/use-render.mjs";
-import { useDevWarning } from "../internal/use-dev-warning.mjs";
 import { ComboboxListContext, ComboboxPopupContext, useComboboxContext } from "./combobox-context.mjs";
 import { use, useCallback, useRef } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/combobox/combobox-option.mjs

@@ -1,7 +1,7 @@
 "use client";
 import { dataAttr } from "../internal/data-attr.mjs";
-import { useRender } from "../internal/use-render.mjs";
 import { useDevWarning } from "../internal/use-dev-warning.mjs";
+import { useRender } from "../internal/use-render.mjs";
 import { ComboboxListContext, optionId, useComboboxContext } from "./combobox-context.mjs";
 import { use, useCallback, useLayoutEffect, useRef } from "react";
 //#region src/combobox/combobox-option.tsx

package/dist/combobox/combobox-popup.mjs

@@ -1,10 +1,10 @@
 "use client";
-import { useTransitionBoundary } from "../internal/transition-boundary.mjs";
 import { dataAttr } from "../internal/data-attr.mjs";
+import { ToolbarContext } from "../internal/toolbar-context.mjs";
+import { useTransitionBoundary } from "../internal/transition-boundary.mjs";
 import { mergeRefs } from "../internal/merge-props.mjs";
 import { resolveStateValue } from "../internal/render-element.mjs";
 import { useRender } from "../internal/use-render.mjs";
-import { ToolbarContext } from "../internal/toolbar-context.mjs";
 import { usePopoverPopup } from "../internal/use-popover-popup.mjs";
 import { ComboboxPopupContext, useComboboxContext } from "./combobox-context.mjs";
 import { Activity, useCallback, useMemo } from "react";

package/dist/combobox/combobox-root.mjs

@@ -1,16 +1,16 @@
 "use client";
 import { createActionDetails } from "../internal/action-details.mjs";
-import { useControllableAction } from "../internal/use-controllable-action.mjs";
-import { resolveStateValue } from "../internal/render-element.mjs";
 import { useDevWarning } from "../internal/use-dev-warning.mjs";
+import { resolveStateValue } from "../internal/render-element.mjs";
+import { useControllableAction } from "../internal/use-controllable-action.mjs";
 import { FieldContext } from "../internal/field-context.mjs";
 import { useFieldValueChange } from "../internal/use-field-control.mjs";
 import { useFormReset } from "../internal/use-form-reset.mjs";
 import { usePopoverRoot } from "../internal/use-popover-root.mjs";
 import { ComboboxContext } from "./combobox-context.mjs";
 import { use, useCallback, useDeferredValue, useEffect, useId, useInsertionEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { flushSync } from "react-dom";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/combobox/combobox-root.tsx
 /** The default announcement (design 6.4; conventions 11: English, always overridable). */
 function defaultComboboxAnnouncement(count) {

package/dist/combobox/combobox-trigger.d.mts

@@ -9,7 +9,10 @@ export interface ComboboxTriggerState {
   readonly disabled: boolean;
 }
 export interface ComboboxTriggerProps extends Omit<ComponentPropsWithRef<"button">, "onClick" | "onPointerDown" | "onMouseDown" | "onPointerCancel" | "tabIndex" | "aria-expanded" | "aria-controls" | "disabled" | "className" | "style" | "children"> {
-  /** Disables this button; the Root's `disabled` does too. */
+  /**
+   * Disables this button; the Root's `disabled` does too. Native `disabled` on a `<button>`; with
+   * a link or component `render`, `aria-disabled="true"` instead.
+   */
   disabled?: boolean;
   className?: StateValue<string | undefined, ComboboxTriggerState>;
   style?: StateValue<CSSProperties | undefined, ComboboxTriggerState>;
@@ -24,7 +27,8 @@ export interface ComboboxTriggerProps extends Omit<ComponentPropsWithRef<"button
  * stop). A press does not take focus from the input, and a click focuses the input. No
  * `commandfor`: the listbox is anchored to the input, never to this button (design 1).
  *
- * Owned keys: `type` (on a `<button>`), `tabIndex`, `disabled`, `aria-expanded`,
+ * Owned keys: `type` (on a `<button>`), `tabIndex`, `disabled`, `aria-disabled` (link or
+ * component `render`), `aria-expanded`,
  * `aria-controls` (token-merged), `onClick`, `onPointerDown`, `onPointerCancel`, `onMouseDown`,
  * `data-open`, `data-pending`, `data-disabled`.
  */

package/dist/combobox/combobox-trigger.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"combobox-trigger.d.mts","names":[],"sources":["../../src/combobox/combobox-trigger.tsx"],"mappings":";;;iBAeiB;;WAEN;;WAEA;WACA;;iBAGM,6BAA6B,KAC5C;;EAcA;EACA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;;EAE9C,WAAW,WAAW,WAAW;;EAEjC,SAAS,WAAW,iCAAiC;;;;;;;;;;;;wBAqCvC,kBACd,UAAU,aACV,WACA,OACA,UACA,WACG,QACF,uBAAoB;yBAPP"}
+{"version":3,"file":"combobox-trigger.d.mts","names":[],"sources":["../../src/combobox/combobox-trigger.tsx"],"mappings":";;;iBAeiB;;WAEN;;WAEA;WACA;;iBAGM,6BAA6B,KAC5C;;;;;EAiBA;EACA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;;EAE9C,WAAW,WAAW,WAAW;;EAEjC,SAAS,WAAW,iCAAiC;;;;;;;;;;;;;wBAsCvC,kBACd,UAAU,aACV,WACA,OACA,UACA,WACG,QACF,uBAAoB;yBAPP"}

package/dist/combobox/combobox-trigger.mjs

@@ -1,6 +1,6 @@
 "use client";
 import { dataAttr } from "../internal/data-attr.mjs";
-import { rendersButton } from "../internal/render-element.mjs";
+import { isHostButton, rendersButton } from "../internal/render-element.mjs";
 import { useRender } from "../internal/use-render.mjs";
 import { useComboboxContext } from "./combobox-context.mjs";
 import { useCallback, useRef } from "react";
@@ -30,7 +30,8 @@ function useNameWarning(part) {
 * stop). A press does not take focus from the input, and a click focuses the input. No
 * `commandfor`: the listbox is anchored to the input, never to this button (design 1).
 *
-* Owned keys: `type` (on a `<button>`), `tabIndex`, `disabled`, `aria-expanded`,
+* Owned keys: `type` (on a `<button>`), `tabIndex`, `disabled`, `aria-disabled` (link or
+* component `render`), `aria-expanded`,
 * `aria-controls` (token-merged), `onClick`, `onPointerDown`, `onPointerCancel`, `onMouseDown`,
 * `data-open`, `data-pending`, `data-disabled`.
 */
@@ -40,6 +41,7 @@ function ComboboxTrigger({ disabled: ownDisabled = false, className, style, chil
 	const disabled = ownDisabled || ctx.disabled;
 	const openAtPress = useRef(null);
 	const ref = useNameWarning("Combobox.Trigger");
+	const focusable = !isHostButton(render);
 	const state = {
 		open: popover.optimistic,
 		pending: popover.pending,
@@ -48,7 +50,8 @@ function ComboboxTrigger({ disabled: ownDisabled = false, className, style, chil
 	const libraryProps = {
 		...rendersButton(render) && { type: "button" },
 		tabIndex: -1,
-		disabled,
+		disabled: focusable ? void 0 : disabled,
+		...focusable && { "aria-disabled": disabled ? true : void 0 },
 		"aria-expanded": popover.optimistic,
 		"aria-controls": ctx.ids.list,
 		onPointerDown: (event) => {
@@ -64,7 +67,10 @@ function ComboboxTrigger({ disabled: ownDisabled = false, className, style, chil
 		onClick: (event) => {
 			const wasOpen = (event.detail === 0 ? null : openAtPress.current) ?? popover.intended();
 			openAtPress.current = null;
-			if (disabled) return;
+			if (disabled) {
+				event.preventDefault();
+				return;
+			}
 			const native = event.nativeEvent;
 			if (wasOpen) popover.requestClose(native, "activate");
 			else popover.requestOpen(native, "activate");

package/dist/combobox/combobox-trigger.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"combobox-trigger.mjs","names":[],"sources":["../../src/combobox/combobox-trigger.tsx"],"sourcesContent":["\"use client\";\nimport { useCallback, useRef } from \"react\";\nimport type {\n  ComponentPropsWithRef,\n  CSSProperties,\n  MouseEvent,\n  PointerEvent,\n  ReactNode,\n} from \"react\";\nimport { dataAttr } from \"../internal/data-attr.js\";\nimport type { RenderProp, StateValue } from \"../internal/types.js\";\nimport { rendersButton, useRender } from \"../internal/use-render.js\";\nimport type { DataAttributes } from \"../internal/use-render.js\";\nimport { useComboboxContext } from \"./combobox-context.js\";\n\nexport interface ComboboxTriggerState {\n  /** Optimistic open state. */\n  readonly open: boolean;\n  /** The open (or close) transition is in flight. */\n  readonly pending: boolean;\n  readonly disabled: boolean;\n}\n\nexport interface ComboboxTriggerProps extends Omit<\n  ComponentPropsWithRef<\"button\">,\n  | \"onClick\"\n  | \"onPointerDown\"\n  | \"onMouseDown\"\n  | \"onPointerCancel\"\n  | \"tabIndex\"\n  | \"aria-expanded\"\n  | \"aria-controls\"\n  | \"disabled\"\n  | \"className\"\n  | \"style\"\n  | \"children\"\n> {\n  /** Disables this button; the Root's `disabled` does too. */\n  disabled?: boolean;\n  className?: StateValue<string | undefined, ComboboxTriggerState>;\n  style?: StateValue<CSSProperties | undefined, ComboboxTriggerState>;\n  /** Rendered from optimistic state; must not suspend. */\n  children?: StateValue<ReactNode, ComboboxTriggerState>;\n  /** Should render a `<button>`. */\n  render?: RenderProp<ComponentPropsWithRef<\"button\">, ComboboxTriggerState>;\n}\n\nconst isDev = process.env.NODE_ENV !== \"production\";\n\n/**\n * Development check (design 9): an icon-only Trigger needs a name from the consumer. Checked a\n * microtask after the element attaches, once per instance.\n */\nexport function useNameWarning(part: string): (element: HTMLElement) => () => void {\n  const warned = useRef(false);\n  return useCallback(\n    (element: HTMLElement) => {\n      if (!isDev || warned.current) return () => {};\n      queueMicrotask(() => {\n        if (warned.current || !element.isConnected) return;\n        if (element.hasAttribute(\"aria-label\") || element.hasAttribute(\"aria-labelledby\")) return;\n        if ((element.textContent ?? \"\").trim() !== \"\" || element.hasAttribute(\"title\")) return;\n        warned.current = true;\n        console.error(`${part}: the button has no accessible name. Give it an \\`aria-label\\`.`);\n      });\n      return () => {};\n    },\n    [part],\n  );\n}\n\n/**\n * The optional button that toggles the listbox: `<button type=\"button\" tabindex=\"-1\"\n * aria-expanded aria-controls>` (the APG keeps it out of the Tab sequence; the input is the one\n * stop). A press does not take focus from the input, and a click focuses the input. No\n * `commandfor`: the listbox is anchored to the input, never to this button (design 1).\n *\n * Owned keys: `type` (on a `<button>`), `tabIndex`, `disabled`, `aria-expanded`,\n * `aria-controls` (token-merged), `onClick`, `onPointerDown`, `onPointerCancel`, `onMouseDown`,\n * `data-open`, `data-pending`, `data-disabled`.\n */\nexport function ComboboxTrigger({\n  disabled: ownDisabled = false,\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: ComboboxTriggerProps) {\n  const ctx = useComboboxContext(\"Combobox.Trigger\");\n  const { popover } = ctx;\n  const disabled = ownDisabled || ctx.disabled;\n  // What the user saw at the press: a press outside the popup light-dismisses it before the\n  // click arrives, so the toggle is decided against the state at `pointerdown`.\n  const openAtPress = useRef<boolean | null>(null);\n  const ref = useNameWarning(\"Combobox.Trigger\");\n\n  const state: ComboboxTriggerState = {\n    open: popover.optimistic,\n    pending: popover.pending,\n    disabled,\n  };\n\n  const libraryProps: ComponentPropsWithRef<\"button\"> & DataAttributes = {\n    ...(rendersButton(render) && { type: \"button\" as const }),\n    tabIndex: -1,\n    disabled,\n    \"aria-expanded\": popover.optimistic,\n    \"aria-controls\": ctx.ids.list,\n    onPointerDown: (event: PointerEvent<HTMLButtonElement>) => {\n      openAtPress.current = popover.intended();\n      event.preventDefault();\n    },\n    onPointerCancel: () => {\n      // The press never becomes a click.\n      openAtPress.current = null;\n    },\n    onMouseDown: (event: MouseEvent<HTMLButtonElement>) => {\n      event.preventDefault();\n    },\n    onClick: (event: MouseEvent<HTMLButtonElement>) => {\n      // `detail === 0`: a click without a press (assistive technology, `element.click()`); a\n      // snapshot left by a press that never clicked (dragged off) does not belong to it.\n      const pressed = event.detail === 0 ? null : openAtPress.current;\n      const wasOpen = pressed ?? popover.intended();\n      openAtPress.current = null;\n      if (disabled) return;\n      const native = event.nativeEvent;\n      if (wasOpen) popover.requestClose(native, \"activate\");\n      else popover.requestOpen(native, \"activate\");\n      ctx.inputRef.current?.focus();\n    },\n    \"data-open\": dataAttr(popover.optimistic),\n    \"data-pending\": dataAttr(popover.pending),\n    \"data-disabled\": dataAttr(disabled),\n  };\n\n  return useRender<ComponentPropsWithRef<\"button\">, ComboboxTriggerState>({\n    defaultElement: \"button\",\n    render,\n    state,\n    className,\n    style,\n    children,\n    props: rest,\n    libraryProps,\n    ref,\n  });\n}\n\nComboboxTrigger.displayName = \"ComboboxTrigger\";\n"],"mappings":";;;;;;;AA+CA,MAAM,QAAQ,QAAQ,IAAI,aAAa;;;;;AAMvC,SAAgB,eAAe,MAAoD;CACjF,MAAM,SAAS,OAAO,KAAK;CAC3B,OAAO,aACJ,YAAyB;EACxB,IAAI,CAAC,SAAS,OAAO,SAAS,aAAa,CAAC;EAC5C,qBAAqB;GACnB,IAAI,OAAO,WAAW,CAAC,QAAQ,aAAa;GAC5C,IAAI,QAAQ,aAAa,YAAY,KAAK,QAAQ,aAAa,iBAAiB,GAAG;GACnF,KAAK,QAAQ,eAAe,GAAA,CAAI,KAAK,MAAM,MAAM,QAAQ,aAAa,OAAO,GAAG;GAChF,OAAO,UAAU;GACjB,QAAQ,MAAM,GAAG,KAAK,gEAAgE;EACxF,CAAC;EACD,aAAa,CAAC;CAChB,GACA,CAAC,IAAI,CACP;AACF;;;;;;;;;;;AAYA,SAAgB,gBAAgB,EAC9B,UAAU,cAAc,OACxB,WACA,OACA,UACA,QACA,GAAG,QACoB;CACvB,MAAM,MAAM,mBAAmB,kBAAkB;CACjD,MAAM,EAAE,YAAY;CACpB,MAAM,WAAW,eAAe,IAAI;CAGpC,MAAM,cAAc,OAAuB,IAAI;CAC/C,MAAM,MAAM,eAAe,kBAAkB;CAE7C,MAAM,QAA8B;EAClC,MAAM,QAAQ;EACd,SAAS,QAAQ;EACjB;CACF;CAEA,MAAM,eAAiE;EACrE,GAAI,cAAc,MAAM,KAAK,EAAE,MAAM,SAAkB;EACvD,UAAU;EACV;EACA,iBAAiB,QAAQ;EACzB,iBAAiB,IAAI,IAAI;EACzB,gBAAgB,UAA2C;GACzD,YAAY,UAAU,QAAQ,SAAS;GACvC,MAAM,eAAe;EACvB;EACA,uBAAuB;GAErB,YAAY,UAAU;EACxB;EACA,cAAc,UAAyC;GACrD,MAAM,eAAe;EACvB;EACA,UAAU,UAAyC;GAIjD,MAAM,WADU,MAAM,WAAW,IAAI,OAAO,YAAY,YAC7B,QAAQ,SAAS;GAC5C,YAAY,UAAU;GACtB,IAAI,UAAU;GACd,MAAM,SAAS,MAAM;GACrB,IAAI,SAAS,QAAQ,aAAa,QAAQ,UAAU;QAC/C,QAAQ,YAAY,QAAQ,UAAU;GAC3C,IAAI,SAAS,SAAS,MAAM;EAC9B;EACA,aAAa,SAAS,QAAQ,UAAU;EACxC,gBAAgB,SAAS,QAAQ,OAAO;EACxC,iBAAiB,SAAS,QAAQ;CACpC;CAEA,OAAO,UAAiE;EACtE,gBAAgB;EAChB;EACA;EACA;EACA;EACA;EACA,OAAO;EACP;EACA;CACF,CAAC;AACH;AAEA,gBAAgB,cAAc"}
+{"version":3,"file":"combobox-trigger.mjs","names":[],"sources":["../../src/combobox/combobox-trigger.tsx"],"sourcesContent":["\"use client\";\nimport { useCallback, useRef } from \"react\";\nimport type {\n  ComponentPropsWithRef,\n  CSSProperties,\n  MouseEvent,\n  PointerEvent,\n  ReactNode,\n} from \"react\";\nimport { dataAttr } from \"../internal/data-attr.js\";\nimport type { RenderProp, StateValue } from \"../internal/types.js\";\nimport { isHostButton, rendersButton, useRender } from \"../internal/use-render.js\";\nimport type { DataAttributes } from \"../internal/use-render.js\";\nimport { useComboboxContext } from \"./combobox-context.js\";\n\nexport interface ComboboxTriggerState {\n  /** Optimistic open state. */\n  readonly open: boolean;\n  /** The open (or close) transition is in flight. */\n  readonly pending: boolean;\n  readonly disabled: boolean;\n}\n\nexport interface ComboboxTriggerProps extends Omit<\n  ComponentPropsWithRef<\"button\">,\n  | \"onClick\"\n  | \"onPointerDown\"\n  | \"onMouseDown\"\n  | \"onPointerCancel\"\n  | \"tabIndex\"\n  | \"aria-expanded\"\n  | \"aria-controls\"\n  | \"disabled\"\n  | \"className\"\n  | \"style\"\n  | \"children\"\n> {\n  /**\n   * Disables this button; the Root's `disabled` does too. Native `disabled` on a `<button>`; with\n   * a link or component `render`, `aria-disabled=\"true\"` instead.\n   */\n  disabled?: boolean;\n  className?: StateValue<string | undefined, ComboboxTriggerState>;\n  style?: StateValue<CSSProperties | undefined, ComboboxTriggerState>;\n  /** Rendered from optimistic state; must not suspend. */\n  children?: StateValue<ReactNode, ComboboxTriggerState>;\n  /** Should render a `<button>`. */\n  render?: RenderProp<ComponentPropsWithRef<\"button\">, ComboboxTriggerState>;\n}\n\nconst isDev = process.env.NODE_ENV !== \"production\";\n\n/**\n * Development check (design 9): an icon-only Trigger needs a name from the consumer. Checked a\n * microtask after the element attaches, once per instance.\n */\nexport function useNameWarning(part: string): (element: HTMLElement) => () => void {\n  const warned = useRef(false);\n  return useCallback(\n    (element: HTMLElement) => {\n      if (!isDev || warned.current) return () => {};\n      queueMicrotask(() => {\n        if (warned.current || !element.isConnected) return;\n        if (element.hasAttribute(\"aria-label\") || element.hasAttribute(\"aria-labelledby\")) return;\n        if ((element.textContent ?? \"\").trim() !== \"\" || element.hasAttribute(\"title\")) return;\n        warned.current = true;\n        console.error(`${part}: the button has no accessible name. Give it an \\`aria-label\\`.`);\n      });\n      return () => {};\n    },\n    [part],\n  );\n}\n\n/**\n * The optional button that toggles the listbox: `<button type=\"button\" tabindex=\"-1\"\n * aria-expanded aria-controls>` (the APG keeps it out of the Tab sequence; the input is the one\n * stop). A press does not take focus from the input, and a click focuses the input. No\n * `commandfor`: the listbox is anchored to the input, never to this button (design 1).\n *\n * Owned keys: `type` (on a `<button>`), `tabIndex`, `disabled`, `aria-disabled` (link or\n * component `render`), `aria-expanded`,\n * `aria-controls` (token-merged), `onClick`, `onPointerDown`, `onPointerCancel`, `onMouseDown`,\n * `data-open`, `data-pending`, `data-disabled`.\n */\nexport function ComboboxTrigger({\n  disabled: ownDisabled = false,\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: ComboboxTriggerProps) {\n  const ctx = useComboboxContext(\"Combobox.Trigger\");\n  const { popover } = ctx;\n  const disabled = ownDisabled || ctx.disabled;\n  // What the user saw at the press: a press outside the popup light-dismisses it before the\n  // click arrives, so the toggle is decided against the state at `pointerdown`.\n  const openAtPress = useRef<boolean | null>(null);\n  const ref = useNameWarning(\"Combobox.Trigger\");\n\n  // A link or component render: native `disabled` would mean nothing on a link; the click\n  // handler refuses, so `aria-disabled` (#83).\n  const focusable = !isHostButton(render);\n\n  const state: ComboboxTriggerState = {\n    open: popover.optimistic,\n    pending: popover.pending,\n    disabled,\n  };\n\n  const libraryProps: ComponentPropsWithRef<\"button\"> & DataAttributes = {\n    ...(rendersButton(render) && { type: \"button\" as const }),\n    tabIndex: -1,\n    disabled: focusable ? undefined : disabled,\n    ...(focusable && { \"aria-disabled\": disabled ? true : undefined }),\n    \"aria-expanded\": popover.optimistic,\n    \"aria-controls\": ctx.ids.list,\n    onPointerDown: (event: PointerEvent<HTMLButtonElement>) => {\n      openAtPress.current = popover.intended();\n      event.preventDefault();\n    },\n    onPointerCancel: () => {\n      // The press never becomes a click.\n      openAtPress.current = null;\n    },\n    onMouseDown: (event: MouseEvent<HTMLButtonElement>) => {\n      event.preventDefault();\n    },\n    onClick: (event: MouseEvent<HTMLButtonElement>) => {\n      // `detail === 0`: a click without a press (assistive technology, `element.click()`); a\n      // snapshot left by a press that never clicked (dragged off) does not belong to it.\n      const pressed = event.detail === 0 ? null : openAtPress.current;\n      const wasOpen = pressed ?? popover.intended();\n      openAtPress.current = null;\n      if (disabled) {\n        // A disabled link must not navigate either.\n        event.preventDefault();\n        return;\n      }\n      const native = event.nativeEvent;\n      if (wasOpen) popover.requestClose(native, \"activate\");\n      else popover.requestOpen(native, \"activate\");\n      ctx.inputRef.current?.focus();\n    },\n    \"data-open\": dataAttr(popover.optimistic),\n    \"data-pending\": dataAttr(popover.pending),\n    \"data-disabled\": dataAttr(disabled),\n  };\n\n  return useRender<ComponentPropsWithRef<\"button\">, ComboboxTriggerState>({\n    defaultElement: \"button\",\n    render,\n    state,\n    className,\n    style,\n    children,\n    props: rest,\n    libraryProps,\n    ref,\n  });\n}\n\nComboboxTrigger.displayName = \"ComboboxTrigger\";\n"],"mappings":";;;;;;;AAkDA,MAAM,QAAQ,QAAQ,IAAI,aAAa;;;;;AAMvC,SAAgB,eAAe,MAAoD;CACjF,MAAM,SAAS,OAAO,KAAK;CAC3B,OAAO,aACJ,YAAyB;EACxB,IAAI,CAAC,SAAS,OAAO,SAAS,aAAa,CAAC;EAC5C,qBAAqB;GACnB,IAAI,OAAO,WAAW,CAAC,QAAQ,aAAa;GAC5C,IAAI,QAAQ,aAAa,YAAY,KAAK,QAAQ,aAAa,iBAAiB,GAAG;GACnF,KAAK,QAAQ,eAAe,GAAA,CAAI,KAAK,MAAM,MAAM,QAAQ,aAAa,OAAO,GAAG;GAChF,OAAO,UAAU;GACjB,QAAQ,MAAM,GAAG,KAAK,gEAAgE;EACxF,CAAC;EACD,aAAa,CAAC;CAChB,GACA,CAAC,IAAI,CACP;AACF;;;;;;;;;;;;AAaA,SAAgB,gBAAgB,EAC9B,UAAU,cAAc,OACxB,WACA,OACA,UACA,QACA,GAAG,QACoB;CACvB,MAAM,MAAM,mBAAmB,kBAAkB;CACjD,MAAM,EAAE,YAAY;CACpB,MAAM,WAAW,eAAe,IAAI;CAGpC,MAAM,cAAc,OAAuB,IAAI;CAC/C,MAAM,MAAM,eAAe,kBAAkB;CAI7C,MAAM,YAAY,CAAC,aAAa,MAAM;CAEtC,MAAM,QAA8B;EAClC,MAAM,QAAQ;EACd,SAAS,QAAQ;EACjB;CACF;CAEA,MAAM,eAAiE;EACrE,GAAI,cAAc,MAAM,KAAK,EAAE,MAAM,SAAkB;EACvD,UAAU;EACV,UAAU,YAAY,KAAA,IAAY;EAClC,GAAI,aAAa,EAAE,iBAAiB,WAAW,OAAO,KAAA,EAAU;EAChE,iBAAiB,QAAQ;EACzB,iBAAiB,IAAI,IAAI;EACzB,gBAAgB,UAA2C;GACzD,YAAY,UAAU,QAAQ,SAAS;GACvC,MAAM,eAAe;EACvB;EACA,uBAAuB;GAErB,YAAY,UAAU;EACxB;EACA,cAAc,UAAyC;GACrD,MAAM,eAAe;EACvB;EACA,UAAU,UAAyC;GAIjD,MAAM,WADU,MAAM,WAAW,IAAI,OAAO,YAAY,YAC7B,QAAQ,SAAS;GAC5C,YAAY,UAAU;GACtB,IAAI,UAAU;IAEZ,MAAM,eAAe;IACrB;GACF;GACA,MAAM,SAAS,MAAM;GACrB,IAAI,SAAS,QAAQ,aAAa,QAAQ,UAAU;QAC/C,QAAQ,YAAY,QAAQ,UAAU;GAC3C,IAAI,SAAS,SAAS,MAAM;EAC9B;EACA,aAAa,SAAS,QAAQ,UAAU;EACxC,gBAAgB,SAAS,QAAQ,OAAO;EACxC,iBAAiB,SAAS,QAAQ;CACpC;CAEA,OAAO,UAAiE;EACtE,gBAAgB;EAChB;EACA;EACA;EACA;EACA;EACA,OAAO;EACP;EACA;CACF,CAAC;AACH;AAEA,gBAAgB,cAAc"}

package/dist/dialog/dialog-close.d.mts

@@ -24,7 +24,11 @@ export interface DialogCloseProps extends Omit<ComponentPropsWithRef<"button">,
   action?: Action<[details: DialogCloseDetails]>;
   /** Becomes `dialog.returnValue` (and `details.returnValue` of `openChangeAction(false)`). */
   value?: string;
-  /** Native `disabled`; owned, so a `render` element cannot re-enable the button. */
+  /**
+   * Never closes. Native `disabled` on a `<button>`; owned, so a `render` element cannot
+   * re-enable it. With a link or component `render` whose click this part handles (library mode,
+   * or with `action`), `aria-disabled="true"` instead: the element stays focusable.
+   */
   disabled?: boolean;
   className?: StateValue<string | undefined, DialogCloseState>;
   style?: StateValue<CSSProperties | undefined, DialogCloseState>;
@@ -37,10 +41,11 @@ export interface DialogCloseProps extends Omit<ComponentPropsWithRef<"button">,
  * `value` as the `returnValue`. In library mode the click is always cancelled and the close goes
  * through the Root (`openChangeAction(false)` awaited, then `close(value)` in the commit, inside
  * the view transition if the Popup's `transition` is set). With `action` the action runs first in
- * this part's own transition (`data-pending` on the button); a rejection leaves the dialog open.
+ * this part's own transition (`data-pending` and `aria-disabled` on the button; a second click
+ * meanwhile is ignored); a rejection leaves the dialog open.
  *
  * Owned keys (conventions 1.2): `type` (on a `<button>` only), `disabled`, `commandfor`,
- * `command`, `value`, `onClick` (library mode, or with `action`), `data-pending`,
+ * `command`, `value`, `onClick` (library mode, or with `action`), `aria-disabled`, `data-pending`,
  * `data-disabled`.
  */
 export declare function DialogClose({ action, value, disabled, className, style, children, render, ...rest }: DialogCloseProps): ReactNode;

package/dist/dialog/dialog-close.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"dialog-close.d.mts","names":[],"sources":["../../src/dialog/dialog-close.tsx"],"mappings":";;;iBAWiB;;WAEN;WACA;;;iBAIM,2BAA2B;;WAEjC;;iBAGM,yBAAyB,KACxC;;;;;;;;;;EAYA,SAAS,QAAQ,SAAS;;EAE1B;;EAEA;EACA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;EAC9C,WAAW,WAAW,WAAW;EACjC,SAAS,WAAW,iCAAiC;;;;;;;;;;;;;;wBAiBvC,cACd,QACA,OACA,UACA,WACA,OACA,UACA,WACG,QACF,mBAAgB;yBATH"}
+{"version":3,"file":"dialog-close.d.mts","names":[],"sources":["../../src/dialog/dialog-close.tsx"],"mappings":";;;iBAWiB;;WAEN;WACA;;;iBAIM,2BAA2B;;WAEjC;;iBAGM,yBAAyB,KACxC;;;;;;;;;;EAYA,SAAS,QAAQ,SAAS;;EAE1B;;;;;;EAMA;EACA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;EAC9C,WAAW,WAAW,WAAW;EACjC,SAAS,WAAW,iCAAiC;;;;;;;;;;;;;;;wBAkBvC,cACd,QACA,OACA,UACA,WACA,OACA,UACA,WACG,QACF,mBAAgB;yBATH"}