@stll/ui 0.65.0 → 0.66.0

package/dist/components/animated-preview.js

@@ -0,0 +1,105 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import { HoverCard as PreviewCard, HoverCardContent as PreviewCardPopup, HoverCardTrigger as PreviewCardTrigger } from "./preview-card.js";
+import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React$1 from "react";
+// src/components/animated-preview.tsx
+/** Must match the keyframes name in `animated-preview.css`. */
+const STAGE_OUT_KEYFRAMES = "animated-preview-fade-out";
+const AnimatedPreview = ({ stages, playback = "once", pace = "glance", stagger = 0, inline = false, className }) => {
+	const reducedMotion = usePrefersReducedMotion();
+	const [cycle, setCycle] = React$1.useState(0);
+	const Frame = inline ? "span" : "div";
+	const lastIndex = stages.length - 1;
+	const finalStage = stages[lastIndex] ?? stages[0];
+	const frameStyle = { "--animated-preview-stagger": stagger };
+	const restartLoop = (event) => {
+		const stage = event.target;
+		if (playback === "loop" && event.animationName === STAGE_OUT_KEYFRAMES && stage instanceof HTMLElement && stage.parentElement === event.currentTarget && stage.dataset["stageIndex"] === String(lastIndex)) setCycle((current) => current + 1);
+	};
+	return /* @__PURE__ */ jsx(Frame, {
+		className,
+		"data-motion": reducedMotion ? "reduced" : "full",
+		"data-pace": pace,
+		"data-playback": playback,
+		"data-slot": "animated-preview",
+		onAnimationEnd: reducedMotion ? void 0 : restartLoop,
+		style: frameStyle,
+		children: reducedMotion ? /* @__PURE__ */ jsx(StageFrame, {
+			incoming: false,
+			index: lastIndex,
+			inline,
+			outgoing: false,
+			children: finalStage.content
+		}) : stages.map((stage, index) => /* @__PURE__ */ jsx(StageFrame, {
+			incoming: index > 0 || playback === "loop",
+			index,
+			inline,
+			outgoing: index < lastIndex || playback === "loop",
+			children: stage.content
+		}, `${cycle}:${stage.id}`))
+	});
+};
+const StageFrame = ({ index, incoming, outgoing, inline, children }) => {
+	return /* @__PURE__ */ jsx(inline ? "span" : "div", {
+		"data-incoming": incoming ? "" : void 0,
+		"data-outgoing": outgoing ? "" : void 0,
+		"data-slot": "animated-preview-stage",
+		"data-stage-index": index,
+		style: { "--animated-preview-stage-index": index },
+		children
+	});
+};
+/**
+* Carries its content along: picked up (lift, tilt, shadow), moved, and put
+* down as the frame inside it crosses from its first stage to its second.
+* The caller places the drop with `--animated-preview-carry-x` and
+* `--animated-preview-carry-y`; with reduced motion the content rests there.
+*/
+const AnimatedPreviewMotion = ({ className, pace = "glance", ...props }) => {
+	const reducedMotion = usePrefersReducedMotion();
+	return /* @__PURE__ */ jsx("div", {
+		className,
+		"data-motion": reducedMotion ? "reduced" : "full",
+		"data-pace": pace,
+		"data-slot": "animated-preview-motion",
+		...props
+	});
+};
+/** How long a pointer or keyboard focus rests on the trigger before the card opens. */
+const ANIMATED_PREVIEW_CARD_DELAY_MS = 400;
+/**
+* A preview card opened by hovering or focusing a control. It takes no focus
+* and traps none: the card describes the control, and the control stays the
+* thing that is used.
+*/
+const AnimatedPreviewCard = ({ trigger, description, className, children }) => {
+	const descriptionId = React$1.useId();
+	return /* @__PURE__ */ jsxs(PreviewCard, { children: [
+		/* @__PURE__ */ jsx(PreviewCardTrigger, {
+			"aria-describedby": descriptionId,
+			delay: 400,
+			render: trigger
+		}),
+		/* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			id: descriptionId,
+			children: description
+		}),
+		/* @__PURE__ */ jsx(PreviewCardPopup, {
+			className: cn("w-72 flex-col gap-2 p-3", className),
+			"data-slot": "animated-preview-card",
+			children: /* @__PURE__ */ jsxs("div", {
+				"aria-hidden": true,
+				className: "flex flex-col gap-2",
+				children: [children, /* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground text-xs",
+					"data-slot": "animated-preview-card-description",
+					children: description
+				})]
+			})
+		})
+	] });
+};
+export { ANIMATED_PREVIEW_CARD_DELAY_MS, AnimatedPreview, AnimatedPreviewCard, AnimatedPreviewMotion };

package/dist/components/application-rail.d.ts

@@ -1,5 +1,4 @@
 import * as React$1 from "react";
-//#region src/components/application-rail.d.ts
 export declare const APPLICATION_RAIL_WIDTH: "w-12";
 export declare const APPLICATION_RAIL_BUTTON_SIZE: "size-11";
 export declare const APPLICATION_RAIL_ICON_SIZE: "size-4";
@@ -15,5 +14,4 @@ export declare const ApplicationRailContent: ({ className, ...props }: React$1.C
 export declare const ApplicationRailMenu: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
 export declare const ApplicationRailButton: ({ className, ...props }: React$1.ComponentProps<"button">) => React$1.JSX.Element;
 export declare const ApplicationRailSeparator: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
-export declare const ApplicationRailFooter: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
-//#endregion
+export declare const ApplicationRailFooter: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;

package/dist/components/application-rail.js

@@ -1,7 +1,7 @@
 import { cn } from "../lib/utils.js";
 import { TOOLBAR_ROW_HEIGHT } from "../inspector/layout-tokens.js";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/application-rail.tsx
+// src/components/application-rail.tsx
 const APPLICATION_RAIL_WIDTH = "w-12";
 const APPLICATION_RAIL_BUTTON_SIZE = "size-11";
 const APPLICATION_RAIL_ICON_SIZE = "size-4";
@@ -48,5 +48,4 @@ const ApplicationRailFooter = ({ className, ...props }) => /* @__PURE__ */ jsx("
 	"data-slot": "application-rail-footer",
 	...props
 });
-//#endregion
 export { APPLICATION_RAIL_BUTTON_SIZE, APPLICATION_RAIL_ICON_SIZE, APPLICATION_RAIL_WIDTH, ApplicationRail, ApplicationRailButton, ApplicationRailContent, ApplicationRailFooter, ApplicationRailHeader, ApplicationRailMenu, ApplicationRailSeparator };

package/dist/components/avatar.d.ts

@@ -1,7 +1,5 @@
 import { Avatar as Avatar$1 } from "@base-ui/react/avatar";
-//#region src/components/avatar.d.ts
 declare const Avatar: ({ className, ...props }: Avatar$1.Root.Props) => import("react").JSX.Element;
 declare const AvatarImage: ({ className, ...props }: Avatar$1.Image.Props) => import("react").JSX.Element;
 declare const AvatarFallback: ({ className, ...props }: Avatar$1.Fallback.Props) => import("react").JSX.Element;
-//#endregion
 export { Avatar, AvatarFallback, AvatarImage };

package/dist/components/avatar.js

@@ -2,7 +2,7 @@
 import { cn } from "../lib/utils.js";
 import { jsx } from "react/jsx-runtime";
 import { Avatar as Avatar$1 } from "@base-ui/react/avatar";
-//#region src/components/avatar.tsx
+// src/components/avatar.tsx
 const Avatar = ({ className, ...props }) => /* @__PURE__ */ jsx(Avatar$1.Root, {
 	className: cn("bg-background inline-flex size-8 shrink-0 items-center justify-center overflow-hidden rounded-full align-middle text-xs font-medium select-none", className),
 	"data-slot": "avatar",
@@ -18,5 +18,4 @@ const AvatarFallback = ({ className, ...props }) => /* @__PURE__ */ jsx(Avatar$1
 	"data-slot": "avatar-fallback",
 	...props
 });
-//#endregion
 export { Avatar, AvatarFallback, AvatarImage };

package/dist/components/badge.d.ts

@@ -1,6 +1,5 @@
 import { StatusTone } from "./list.js";
 import { useRender } from "@base-ui/react/use-render";
-//#region src/components/badge.d.ts
 /**
  * A short label that classifies the thing beside it: a status, a type, a
  * count. The words carry the meaning; the tone and the optional dot only
@@ -24,5 +23,4 @@ declare const badgeVariants: (props?: ({
   size?: "sm" | "xs" | null | undefined;
   tone?: "destructive" | "info" | "neutral" | "success" | "warning" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-//#endregion
 export { Badge, type BadgeProps, type BadgeSize, type BadgeTone, badgeVariants };

package/dist/components/badge.js

@@ -3,7 +3,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 import { cva } from "class-variance-authority";
-//#region src/components/badge.tsx
+// src/components/badge.tsx
 /**
 * A short label that classifies the thing beside it: a status, a type, a
 * count. The words carry the meaning; the tone and the optional dot only
@@ -60,5 +60,4 @@ const BADGE_DOT_CLASS = {
 	success: "bg-success",
 	warning: "bg-warning"
 };
-//#endregion
 export { Badge, badgeVariants };

package/dist/components/bidi-text.d.ts

@@ -1,5 +1,4 @@
 import * as React$1 from "react";
-//#region src/components/bidi-text.d.ts
 /**
  * Isolation shields the text around a value, not the value itself: a
  * directional control inside it still reorders its letters, so stored text
@@ -27,5 +26,4 @@ type ParagraphTextProps = Omit<React$1.ComponentPropsWithoutRef<"p">, "dir"> & {
   direction?: BidiDirection;
 };
 type BidiTextProps = BdiElementProps | SpanTextProps | DivTextProps | ParagraphTextProps;
-//#endregion
 export type { BidiDirection, BidiTextProps };

package/dist/components/bidi-text.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../lib/utils.js";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/bidi-text.tsx
+// src/components/bidi-text.tsx
 /** Explicit embeddings, overrides and isolates; implicit marks stay. */
 const DIRECTIONAL_CONTROLS = /[\u202A-\u202E\u2066-\u2069]/gu;
 /**
@@ -47,5 +47,4 @@ const BidiText = (props) => {
 	});
 };
 const UserText = BidiText;
-//#endregion
 export { BidiText, UserText, stripDirectionalControls, withoutDirectionalControls };

package/dist/components/brand-icons.d.ts

@@ -1,8 +1,6 @@
 import * as React$1 from "react";
-//#region src/components/brand-icons.d.ts
 type BrandIconProps = React$1.ComponentProps<"svg">;
 export declare const DiscordLogoIcon: (props: BrandIconProps) => React$1.JSX.Element;
 export declare const GitHubLogoIcon: (props: BrandIconProps) => React$1.JSX.Element;
 export declare const XLogoIcon: (props: BrandIconProps) => React$1.JSX.Element;
-//#endregion
 export {};

package/dist/components/brand-icons.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-//#region src/components/brand-icons.tsx
+// src/components/brand-icons.tsx
 const DiscordLogoIcon = (props) => /* @__PURE__ */ jsx("svg", {
 	"aria-hidden": "true",
 	fill: "currentColor",
@@ -21,5 +21,4 @@ const XLogoIcon = (props) => /* @__PURE__ */ jsx("svg", {
 	...props,
 	children: /* @__PURE__ */ jsx("path", { d: "M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.64 7.584H.47l8.6-9.835L0 1.153h7.594l5.243 6.932 6.064-6.932Zm-1.29 19.49h2.039L6.486 3.24H4.298l13.313 17.403Z" })
 });
-//#endregion
 export { DiscordLogoIcon, GitHubLogoIcon, XLogoIcon };

package/dist/components/breadcrumb.d.ts

@@ -1,6 +1,5 @@
 import * as React$1 from "react";
 import { useRender } from "@base-ui/react/use-render";
-//#region src/components/breadcrumb.d.ts
 declare const Breadcrumb: ({ ...props }: React$1.ComponentProps<"nav">) => React$1.JSX.Element;
 declare const BreadcrumbList: ({ className, ...props }: React$1.ComponentProps<"ol">) => React$1.JSX.Element;
 declare const BreadcrumbItem: ({ className, ...props }: React$1.ComponentProps<"li">) => React$1.JSX.Element;
@@ -8,5 +7,4 @@ declare function BreadcrumbLink({ className, render, ...props }: useRender.Compo
 declare const BreadcrumbPage: ({ className, ...props }: React$1.ComponentProps<"span">) => React$1.JSX.Element;
 declare const BreadcrumbSeparator: ({ children, className, ...props }: React$1.ComponentProps<"li">) => React$1.JSX.Element;
 declare const BreadcrumbEllipsis: ({ className, ...props }: React$1.ComponentProps<"span">) => React$1.JSX.Element;
-//#endregion
 export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator };

package/dist/components/breadcrumb.js

@@ -5,7 +5,7 @@ import { DirectionalIcon } from "./directional-icon.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
-//#region src/components/breadcrumb.tsx
+// src/components/breadcrumb.tsx
 const Breadcrumb = ({ ...props }) => /* @__PURE__ */ jsx("nav", {
 	"aria-label": "Breadcrumb",
 	"data-slot": "breadcrumb",
@@ -57,5 +57,4 @@ const BreadcrumbEllipsis = ({ className, ...props }) => /* @__PURE__ */ jsxs("sp
 		children: "More"
 	})]
 });
-//#endregion
 export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator };

package/dist/components/button.d.ts

@@ -1,7 +1,6 @@
 import { ButtonContract, ButtonSize, ButtonVariant } from "./button.shared.js";
 import { ReactNode } from "react";
 import { useRender } from "@base-ui/react/use-render";
-//#region src/components/button.d.ts
 /**
  * Disabled styling for a button that is only `aria-disabled`.
  *
@@ -103,5 +102,4 @@ type ButtonTextRunProps = Omit<ButtonProps, "children" | "className" | "focusRin
  * `Button size="inline"` for a short action.
  */
 declare const ButtonTextRun: ({ children, className, disabled, ...props }: ButtonTextRunProps) => import("react").JSX.Element;
-//#endregion
 export { BUTTON_CONTENT, BUTTON_SIZE_CONTENT, Button, type ButtonFocusRing, type ButtonPlainShape, type ButtonProps, type ButtonSize, ButtonTextRun, type ButtonVariant, buttonAccessibleDisabledClass, buttonVariants };

package/dist/components/button.js

@@ -3,6 +3,7 @@ import { cn } from "../lib/utils.js";
 import { renderTooltipTrigger } from "./tooltip-trigger-helper.js";
 import { BUTTON_DISPOSITION, blockDisabledActivation, blockDisabledKeyActivation, resolveButtonDisposition } from "../lib/button-disposition.js";
 import { MENU_ROW_CLASS_NAME } from "../lib/menu-row.js";
+import { rendersNothing } from "../lib/renders-nothing.js";
 import { BUTTON_PLAIN_VARIANT, BUTTON_VARIANT_TOKENS } from "./button.shared.js";
 import { Loader } from "./loader.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -11,7 +12,7 @@ import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 import { panic } from "better-result";
 import { cva } from "class-variance-authority";
-//#region src/components/button.tsx
+// src/components/button.tsx
 /**
 * Disabled styling for a button that is only `aria-disabled`.
 *
@@ -218,17 +219,15 @@ function Button({ className, variant: variantProp, size, render, layout, loading
 	const isAccessibleDisabled = disposition === BUTTON_DISPOSITION.accessibleDisabled;
 	const isActivationPreservingDisabled = accessibleDisabled !== void 0;
 	const defaultProps = {
-		children: /* @__PURE__ */ jsxs(Fragment, { children: [loading ? /* @__PURE__ */ jsx(Loader, {
-			animation: "none",
-			className: "[transition:opacity_150ms_ease-out,scale_320ms_var(--ease-spring)] motion-reduce:transition-none starting:scale-50 starting:opacity-0",
-			"data-slot": "button-loader",
-			size: "sm",
-			variant: "decorative"
-		}) : icon, cutsLabel({
-			layout,
-			size,
-			variant
-		}) ? containedLabel(children) : children] }),
+		children: buttonContent({
+			icon,
+			label: cutsLabel({
+				layout,
+				size,
+				variant
+			}) ? containedLabel(children) : children,
+			loading
+		}),
 		className: cn(variant === "plain" ? cn(BUTTON_PLAIN_CLASS, BUTTON_PLAIN_SHAPE_CLASS[shape], className) : cn(disposition === BUTTON_DISPOSITION.enabled && !isActivationPreservingDisabled && size !== "row" && size !== "inline" && variant !== "link" && buttonPressClass, buttonVariants({
 			className,
 			size,
@@ -263,6 +262,30 @@ function Button({ className, variant: variantProp, size, render, layout, loading
 	});
 }
 /**
+* What the button shows. Loading never changes its width: with an `icon`,
+* the loader takes the icon's place; without one, the label (already cut to
+* the button's width where it is cut) stays in place but transparent (still
+* the accessible name) and the loader sits over its centre, so a row of
+* buttons does not shift when one starts saving.
+*/
+function buttonContent({ icon, label, loading }) {
+	if (!loading) return /* @__PURE__ */ jsxs(Fragment, { children: [icon, label] });
+	const hasIcon = !rendersNothing(icon);
+	const loader = /* @__PURE__ */ jsx(Loader, {
+		animation: "none",
+		className: cn("[transition:opacity_150ms_ease-out,scale_320ms_var(--ease-spring)] motion-reduce:transition-none starting:scale-50 starting:opacity-0", !hasIcon && "absolute inset-0 m-auto"),
+		"data-slot": "button-loader",
+		size: "sm",
+		variant: "decorative"
+	});
+	if (hasIcon) return /* @__PURE__ */ jsxs(Fragment, { children: [loader, label] });
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+		className: "inline-flex min-w-0 items-center gap-[inherit] opacity-0",
+		"data-slot": "button-loading-label",
+		children: label
+	}), loader] });
+}
+/**
 * The run is the visible target: underlined like a link, ringed while its
 * button has keyboard focus (per line, so a wrapped run rings each line).
 */
@@ -295,5 +318,4 @@ const ButtonTextRun = ({ children, className, disabled, ...props }) => /* @__PUR
 		variant: BUTTON_PLAIN_VARIANT
 	}), children]
 });
-//#endregion
 export { BUTTON_CONTENT, BUTTON_SIZE_CONTENT, Button, ButtonTextRun, buttonAccessibleDisabledClass, buttonVariants };

package/dist/components/button.native-classes.d.ts

@@ -1,5 +1,4 @@
 import { ButtonSize, ButtonVariant } from "./button.shared.js";
-//#region src/components/button.native-classes.d.ts
 type NativeButtonClassNamesOptions = {
   className?: string | undefined;
   inactive: boolean;
@@ -13,5 +12,4 @@ export declare const nativeButtonClassNames: ({ className, inactive, selected, s
   pressable: string;
   slop: 0 | 6 | 8 | 12;
 };
-//#endregion
 export {};

package/dist/components/button.native-classes.js

@@ -1,5 +1,5 @@
 import { BUTTON_PLAIN_VARIANT, BUTTON_VARIANT_TOKENS } from "./button.shared.js";
-//#region src/components/button.native-classes.ts
+// src/components/button.native-classes.ts
 /** A control's box: centred content inside the variant's border. */
 const CONTROL = "items-center justify-center border";
 /**
@@ -177,5 +177,4 @@ const nativeButtonClassNames = ({ className, inactive, selected, size, variant }
 		slop: shape.slop
 	};
 };
-//#endregion
 export { nativeButtonClassNames };

package/dist/components/button.native.d.ts

@@ -1,6 +1,5 @@
 import { ButtonContract } from "./button.shared.js";
 import { PressableProps } from "react-native";
-//#region src/components/button.native.d.ts
 type ButtonProps = Omit<PressableProps, "children" | "disabled"> & ButtonContract & {
   className?: string | undefined;
 };
@@ -14,5 +13,4 @@ type ButtonProps = Omit<PressableProps, "children" | "disabled"> & ButtonContrac
  * only when it is selected. Its classes come from ./button.native-classes.ts.
  */
 export declare const Button: ({ accessibilityState, children, className, disabled, hitSlop, icon, loading, selected: selectedProp, size, variant: variantProp, ...props }: ButtonProps) => import("react").JSX.Element;
-//#endregion
 export {};

package/dist/components/button.native.js

@@ -3,7 +3,7 @@ import { Loader } from "./loader.native.js";
 import { Text as Text$1 } from "./text.native.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Pressable } from "react-native";
-//#region src/components/button.native.tsx
+// src/components/button.native.tsx
 /**
 * The web's `Button` (./button.tsx) on a phone: the same variants and sizes,
 * read from ./button.shared.ts, on a Pressable. A string child is set as the
@@ -44,5 +44,4 @@ const Button = ({ accessibilityState, children, className, disabled = false, hit
 		}) : children]
 	});
 };
-//#endregion
 export { Button };

package/dist/components/button.shared.d.ts

@@ -1,5 +1,4 @@
 import { ReactNode } from "react";
-//#region src/components/button.shared.d.ts
 /**
  * Each variant's colours: the box (`surface`: border and fill) and the
  * label. Neither carries state; each renderer adds its own hover, press and
@@ -83,5 +82,4 @@ export type ButtonContract = {
    */
   selected?: boolean | undefined;
   children?: ReactNode;
-};
-//#endregion
+};

package/dist/components/button.shared.js

@@ -1,4 +1,4 @@
-//#region src/components/button.shared.ts
+// src/components/button.shared.ts
 /**
 * Each variant's colours: the box (`surface`: border and fill) and the
 * label. Neither carries state; each renderer adds its own hover, press and
@@ -72,5 +72,4 @@ const BUTTON_SIZES = [
 	"xl",
 	"xs"
 ];
-//#endregion
 export { BUTTON_PLAIN_VARIANT, BUTTON_SIZES, BUTTON_VARIANT_TOKENS };

package/dist/components/checkbox.d.ts

@@ -1,5 +1,3 @@
 import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
-//#region src/components/checkbox.d.ts
 declare const Checkbox: ({ className, ...props }: Checkbox$1.Root.Props) => import("react").JSX.Element;
-//#endregion
 export { Checkbox };

package/dist/components/checkbox.js

@@ -2,7 +2,7 @@
 import { cn } from "../lib/utils.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
-//#region src/components/checkbox.tsx
+// src/components/checkbox.tsx
 const Checkbox = ({ className, ...props }) => /* @__PURE__ */ jsx(Checkbox$1.Root, {
 	className: cn("border-input bg-background ring-ring focus-visible:ring-offset-background aria-invalid:border-destructive/36 focus-visible:aria-invalid:border-destructive/64 focus-visible:aria-invalid:ring-destructive/48 dark:not-data-checked:bg-input/32 dark:aria-invalid:ring-destructive/24 relative inline-flex size-4.5 shrink-0 items-center justify-center rounded-[4px] border shadow-xs/5 outline-none not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[3px] not-data-disabled:not-data-checked:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] focus-visible:ring-2 focus-visible:ring-offset-1 data-disabled:opacity-64 sm:size-4 dark:not-data-disabled:not-data-checked:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)] [[data-disabled],[data-checked],[aria-invalid]]:shadow-none", className),
 	"data-slot": "checkbox",
@@ -42,5 +42,4 @@ const Checkbox = ({ className, ...props }) => /* @__PURE__ */ jsx(Checkbox$1.Roo
 		})
 	})
 });
-//#endregion
 export { Checkbox };

package/dist/components/collapsible.d.ts

@@ -1,5 +1,4 @@
 import { Collapsible as Collapsible$1 } from "@base-ui/react/collapsible";
-//#region src/components/collapsible.d.ts
 /**
  * One disclosure: a trigger that shows or hides a single panel ("Show
  * details" under a card, a step list in a transcript). A set of sections
@@ -10,17 +9,22 @@ import { Collapsible as Collapsible$1 } from "@base-ui/react/collapsible";
  * text toggle), so a disclosure reads like every other action of its size.
  */
 declare const Collapsible: (props: Collapsible$1.Root.Props) => import("react").JSX.Element;
-declare const CollapsibleTrigger: (props: Collapsible$1.Trigger.Props) => import("react").JSX.Element;
+/**
+ * A bare trigger (plain text, no `render`) still gets the 44px touch target
+ * every control has under a coarse pointer, the same hit area `Button` adds.
+ */
+declare const CollapsibleTrigger: ({ className, ...props }: Collapsible$1.Trigger.Props) => import("react").JSX.Element;
 /**
  * The disclosed content. It adds no padding or type, so opening it reveals
  * content at the rhythm of the surface around it, as a native `<details>`
  * does. Its height eases open and shut with the accordion's timing, so the
  * two disclosures move alike; under reduced motion it snaps.
  *
- * Closed, the content stays in the document as `hidden="until-found"` (as a
- * native `<details>` keeps it), so find-in-page still reaches it and opens
- * the panel. Pass `hiddenUntilFound={false}` to unmount it instead.
+ * Closed, the content stays in the document. Once mounted it is
+ * `hidden="until-found"` (as a native `<details>` keeps it), so find-in-page
+ * reaches it and opens the panel; server-rendered markup carries a plain
+ * `hidden` until hydration, so the search reaches it only after that. Pass
+ * `hiddenUntilFound={false}` to unmount it instead.
  */
 declare const CollapsiblePanel: ({ className, hiddenUntilFound, ...props }: Collapsible$1.Panel.Props) => import("react").JSX.Element;
-//#endregion
 export { Collapsible, CollapsiblePanel, CollapsibleTrigger };

package/dist/components/collapsible.js

@@ -2,7 +2,7 @@
 import { cn } from "../lib/utils.js";
 import { jsx } from "react/jsx-runtime";
 import { Collapsible as Collapsible$1 } from "@base-ui/react/collapsible";
-//#region src/components/collapsible.tsx
+// src/components/collapsible.tsx
 /**
 * One disclosure: a trigger that shows or hides a single panel ("Show
 * details" under a card, a step list in a transcript). A set of sections
@@ -16,7 +16,12 @@ const Collapsible = (props) => /* @__PURE__ */ jsx(Collapsible$1.Root, {
 	"data-slot": "collapsible",
 	...props
 });
-const CollapsibleTrigger = (props) => /* @__PURE__ */ jsx(Collapsible$1.Trigger, {
+/**
+* A bare trigger (plain text, no `render`) still gets the 44px touch target
+* every control has under a coarse pointer, the same hit area `Button` adds.
+*/
+const CollapsibleTrigger = ({ className, ...props }) => /* @__PURE__ */ jsx(Collapsible$1.Trigger, {
+	className: cn("relative pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11", className),
 	"data-slot": "collapsible-trigger",
 	...props
 });
@@ -26,9 +31,11 @@ const CollapsibleTrigger = (props) => /* @__PURE__ */ jsx(Collapsible$1.Trigger,
 * does. Its height eases open and shut with the accordion's timing, so the
 * two disclosures move alike; under reduced motion it snaps.
 *
-* Closed, the content stays in the document as `hidden="until-found"` (as a
-* native `<details>` keeps it), so find-in-page still reaches it and opens
-* the panel. Pass `hiddenUntilFound={false}` to unmount it instead.
+* Closed, the content stays in the document. Once mounted it is
+* `hidden="until-found"` (as a native `<details>` keeps it), so find-in-page
+* reaches it and opens the panel; server-rendered markup carries a plain
+* `hidden` until hydration, so the search reaches it only after that. Pass
+* `hiddenUntilFound={false}` to unmount it instead.
 */
 const CollapsiblePanel = ({ className, hiddenUntilFound = true, ...props }) => /* @__PURE__ */ jsx(Collapsible$1.Panel, {
 	className: cn("h-(--collapsible-panel-height) min-w-0 overflow-hidden transition-[height] duration-200 ease-in-out data-ending-style:h-0 data-starting-style:h-0 motion-reduce:transition-none [&[hidden]:not([hidden=until-found])]:hidden", className),
@@ -36,5 +43,4 @@ const CollapsiblePanel = ({ className, hiddenUntilFound = true, ...props }) => /
 	hiddenUntilFound,
 	...props
 });
-//#endregion
 export { Collapsible, CollapsiblePanel, CollapsibleTrigger };

package/dist/components/color-picker.d.ts

@@ -1,5 +1,4 @@
 import * as React$1 from "react";
-//#region src/components/color-picker.d.ts
 type ColorPreset = {
   label: string;
   /** Value emitted on select (e.g. "red" or "FF0000") */
@@ -23,8 +22,17 @@ type ColorPickerProps = {
   defaultExpanded?: boolean;
   /** Localized label for expanding the custom color controls. */
   moreLabel: string;
-  /** Popover trigger element */
-  children: React$1.ReactNode;
+  /**
+   * The popover trigger: one focusable element (normally a named button)
+   * that becomes the trigger itself, so the picker never wraps it in a
+   * second, unnamed button.
+   */
+  trigger: React$1.ReactElement;
+  /**
+   * Whether `trigger` renders a native `<button>` (default). Pass `false`
+   * only for a non-button element; Base UI then gives it button semantics.
+   */
+  nativeButton?: boolean;
   /** Popover placement side */
   side?: "top" | "bottom" | "left" | "right";
   /** Popover placement alignment */
@@ -52,6 +60,5 @@ type ColorPickerContentProps = ColorPickerContentBaseProps & ({
 });
 declare const DEFAULT_PRESETS: ColorPreset[];
 declare const ColorPickerContent: ({ value, onSelect, onClear, presets, columns, defaultExpanded, moreLabel, presentation }: ColorPickerContentProps) => React$1.JSX.Element;
-declare const ColorPicker: ({ value, onSelect, onClear, presets, columns, defaultExpanded, moreLabel, children, side, align, className }: ColorPickerProps) => React$1.JSX.Element;
-//#endregion
+declare const ColorPicker: ({ value, onSelect, onClear, presets, columns, defaultExpanded, moreLabel, nativeButton, trigger, side, align, className }: ColorPickerProps) => React$1.JSX.Element;
 export { ColorPicker, ColorPickerContent, type ColorPickerContentProps, type ColorPickerProps, type ColorPreset, DEFAULT_PRESETS };

package/dist/components/color-picker.js

@@ -5,7 +5,7 @@ import { OVERLAY_LAYER_CLASS_NAMES } from "../lib/overlay-layer.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Suspense, lazy, useState } from "react";
 import { Popover } from "@base-ui/react/popover";
-//#region src/components/color-picker.tsx
+// src/components/color-picker.tsx
 const HexColorPicker = lazy(async () => {
 	return { default: (await import("./hex-color-picker.js")).HexColorPicker };
 });
@@ -287,11 +287,10 @@ const ColorPickerContent = ({ value, onSelect, onClear, presets, columns, defaul
 		]
 	});
 };
-const ColorPicker = ({ value, onSelect, onClear, presets = DEFAULT_PRESETS, columns = 9, defaultExpanded = false, moreLabel, children, side = "bottom", align = "start", className }) => /* @__PURE__ */ jsxs(Popover.Root, { children: [/* @__PURE__ */ jsx(Popover.Trigger, {
+const ColorPicker = ({ value, onSelect, onClear, presets = DEFAULT_PRESETS, columns = 9, defaultExpanded = false, moreLabel, nativeButton = true, trigger, side = "bottom", align = "start", className }) => /* @__PURE__ */ jsxs(Popover.Root, { children: [/* @__PURE__ */ jsx(Popover.Trigger, {
 	"data-slot": "color-picker-trigger",
-	nativeButton: false,
-	render: /* @__PURE__ */ jsx("div", { className: "inline-flex" }),
-	children
+	nativeButton,
+	render: trigger
 }), /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, {
 	align,
 	className: OVERLAY_LAYER_CLASS_NAMES.popup,
@@ -312,5 +311,4 @@ const ColorPicker = ({ value, onSelect, onClear, presets = DEFAULT_PRESETS, colu
 		})
 	})
 }) })] });
-//#endregion
 export { ColorPicker, ColorPickerContent, DEFAULT_PRESETS };

package/dist/components/combobox.d.ts

@@ -1,7 +1,6 @@
 import * as React$1 from "react";
 import { Combobox as Combobox$1 } from "@base-ui/react/combobox";
 import { ControlSize } from "../lib/control-size.js";
-//#region src/components/combobox.d.ts
 declare const Combobox: <Value, Multiple extends boolean | undefined = false>(props: Combobox$1.Root.Props<Value, Multiple>) => React$1.JSX.Element;
 declare const ComboboxChipsInput: ({ className, size, ...props }: Omit<Combobox$1.Input.Props, "size"> & {
   size?: ControlSize | number;
@@ -38,5 +37,4 @@ declare const ComboboxChips: ({ className, children, startAddon, ...props }: Com
   startAddon?: React$1.ReactNode;
 }) => React$1.JSX.Element;
 declare const ComboboxChip: ({ children, ...props }: Combobox$1.Chip.Props) => React$1.JSX.Element;
-//#endregion
 export { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxClear, ComboboxCollection, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, ComboboxPopup, ComboboxRow, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue };