@stll/ui 0.65.1 → 0.66.0

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
@@ -28,5 +27,4 @@ declare const CollapsibleTrigger: ({ className, ...props }: Collapsible$1.Trigge
  * `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
@@ -43,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 };

package/dist/components/combobox.js

@@ -10,7 +10,7 @@ import { Input } from "./input.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React$1 from "react";
 import { Combobox as Combobox$1 } from "@base-ui/react/combobox";
-//#region src/components/combobox.tsx
+// src/components/combobox.tsx
 const ComboboxContext = React$1.createContext({
 	chipsRef: null,
 	multiple: false
@@ -232,5 +232,4 @@ const ComboboxChipRemove = (props) => /* @__PURE__ */ jsx(Combobox$1.ChipRemove,
 	...props,
 	children: /* @__PURE__ */ jsx(XIcon, {})
 });
-//#endregion
 export { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxClear, ComboboxCollection, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, ComboboxPopup, ComboboxRow, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue };

package/dist/components/command.d.ts

@@ -4,7 +4,6 @@ import { ControlSize } from "../lib/control-size.js";
 import { Dialog } from "@base-ui/react/dialog";
 import { DialogContent as DialogPopup } from "./dialog.js";
 import { VariantProps } from "class-variance-authority";
-//#region src/components/command.d.ts
 type CommandProps<ItemValue> = Omit<Autocomplete.Root.Props<ItemValue>, "items"> & {
   items?: readonly ItemValue[] | undefined;
 };
@@ -36,5 +35,4 @@ declare const CommandItem: ({ className, size, ...props }: Autocomplete.Item.Pro
 declare const CommandSeparator: ({ className, ...props }: Autocomplete.Separator.Props) => React$1.JSX.Element;
 declare const CommandShortcut: ({ className, ...props }: React$1.ComponentProps<"span">) => React$1.JSX.Element;
 declare const CommandFooter: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
-//#endregion
 export { Command, CommandCollection, CommandDialog, CommandDialogPopup, CommandDialogTrigger, CommandEmpty, CommandFooter, CommandGroup, CommandGroupLabel, CommandInput, CommandItem, CommandList, CommandPanel, CommandSeparator, CommandShortcut };

package/dist/components/command.js

@@ -9,7 +9,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Dialog } from "@base-ui/react/dialog";
 import { cva } from "class-variance-authority";
 import { Autocomplete } from "@base-ui/react/autocomplete";
-//#region src/components/command.tsx
+// src/components/command.tsx
 const Command = ({ autoHighlight = "always", keepHighlight = true, open = true, ...props }) => /* @__PURE__ */ jsx(Autocomplete.Root, {
 	autoHighlight,
 	keepHighlight,
@@ -114,5 +114,4 @@ const CommandFooter = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
 	"data-slot": "command-footer",
 	...props
 });
-//#endregion
 export { Command, CommandCollection, CommandDialog, CommandDialogPopup, CommandDialogTrigger, CommandEmpty, CommandFooter, CommandGroup, CommandGroupLabel, CommandInput, CommandItem, CommandList, CommandPanel, CommandSeparator, CommandShortcut };

package/dist/components/composer-tokens.d.ts

@@ -1,4 +1,3 @@
-//#region src/components/composer-tokens.d.ts
 /**
  * The tokens every composer box shares: the chat hero, the chat follow-up
  * bar, the docked bar over documents (inspector chat, file overlay,
@@ -68,5 +67,4 @@ export declare const COMPOSER_SEND_BUTTON_CLASS = "bg-foreground text-background
  * law home's scope and jurisdiction): quiet text with a hover surface, so
  * the row stays subordinate to the box above it.
  */
-export declare const COMPOSER_PICKER_TRIGGER_CLASS = "text-muted-foreground hover:text-foreground hover:bg-accent inline-flex min-w-0 shrink items-center gap-1 rounded-md px-1.5 py-0.5 text-2xs";
-//#endregion
+export declare const COMPOSER_PICKER_TRIGGER_CLASS = "text-muted-foreground hover:text-foreground hover:bg-accent inline-flex min-w-0 shrink items-center gap-1 rounded-md px-1.5 py-0.5 text-2xs";

package/dist/components/composer-tokens.js

@@ -1,4 +1,4 @@
-//#region src/components/composer-tokens.ts
+// src/components/composer-tokens.ts
 /**
 * The tokens every composer box shares: the chat hero, the chat follow-up
 * bar, the docked bar over documents (inspector chat, file overlay,
@@ -69,5 +69,4 @@ const COMPOSER_SEND_BUTTON_CLASS = "bg-foreground text-background hover:bg-foreg
 * the row stays subordinate to the box above it.
 */
 const COMPOSER_PICKER_TRIGGER_CLASS = "text-muted-foreground hover:text-foreground hover:bg-accent inline-flex min-w-0 shrink items-center gap-1 rounded-md px-1.5 py-0.5 text-2xs";
-//#endregion
 export { COMPOSER_BOX_ANONYMIZED_CLASS, COMPOSER_BOX_CLASS, COMPOSER_BOX_FOCUS_CLASS, COMPOSER_COMPACT_ROW_CLASS, COMPOSER_COMPACT_TEXT_CELL_CLASS, COMPOSER_CONTROL_BUTTON_SIZE, COMPOSER_LARGE_ACTION_ROW_CLASS, COMPOSER_LARGE_EDITOR_CLASS, COMPOSER_LARGE_TEXT_WELL_CLASS, COMPOSER_LEADING_GROUP_CLASS, COMPOSER_PICKER_TRIGGER_CLASS, COMPOSER_PLACEHOLDER_CLASS, COMPOSER_SEND_BUTTON_CLASS, COMPOSER_TEXT_CLASS };

package/dist/components/composer.d.ts

@@ -1,6 +1,5 @@
 import { COMPOSER_BOX_ANONYMIZED_CLASS, COMPOSER_BOX_CLASS, COMPOSER_BOX_FOCUS_CLASS, COMPOSER_COMPACT_ROW_CLASS, COMPOSER_COMPACT_TEXT_CELL_CLASS, COMPOSER_CONTROL_BUTTON_SIZE, COMPOSER_LARGE_ACTION_ROW_CLASS, COMPOSER_LARGE_EDITOR_CLASS, COMPOSER_LARGE_TEXT_WELL_CLASS, COMPOSER_LEADING_GROUP_CLASS, COMPOSER_PICKER_TRIGGER_CLASS, COMPOSER_PLACEHOLDER_CLASS, COMPOSER_SEND_BUTTON_CLASS, COMPOSER_TEXT_CLASS } from "./composer-tokens.js";
 import { ReactNode } from "react";
-//#region src/components/composer.d.ts
 type ComposerStatusRowProps = {
   /** Left cluster: matter picker, web-search / anonymize toggles, ... */
   start?: ReactNode | undefined;
@@ -43,5 +42,4 @@ type ComposerPickerProps<Value extends string> = {
  * kind of control.
  */
 export declare const ComposerPicker: <Value extends string>({ ariaLabel, icon, onChange, options, value }: ComposerPickerProps<Value>) => import("react").JSX.Element;
-//#endregion
 export { COMPOSER_BOX_ANONYMIZED_CLASS, COMPOSER_BOX_CLASS, COMPOSER_BOX_FOCUS_CLASS, COMPOSER_COMPACT_ROW_CLASS, COMPOSER_COMPACT_TEXT_CELL_CLASS, COMPOSER_CONTROL_BUTTON_SIZE, COMPOSER_LARGE_ACTION_ROW_CLASS, COMPOSER_LARGE_EDITOR_CLASS, COMPOSER_LARGE_TEXT_WELL_CLASS, COMPOSER_LEADING_GROUP_CLASS, COMPOSER_PICKER_TRIGGER_CLASS, COMPOSER_PLACEHOLDER_CLASS, COMPOSER_SEND_BUTTON_CLASS, COMPOSER_TEXT_CLASS };

package/dist/components/composer.js

@@ -4,7 +4,7 @@ import { cn } from "../lib/utils.js";
 import { DropdownMenu as Menu, DropdownMenuContent as MenuPopup, DropdownMenuRadioGroup as MenuRadioGroup, DropdownMenuRadioItem as MenuRadioItem, DropdownMenuTrigger as MenuTrigger } from "./menu.js";
 import { COMPOSER_BOX_ANONYMIZED_CLASS, COMPOSER_BOX_CLASS, COMPOSER_BOX_FOCUS_CLASS, COMPOSER_COMPACT_ROW_CLASS, COMPOSER_COMPACT_TEXT_CELL_CLASS, COMPOSER_CONTROL_BUTTON_SIZE, COMPOSER_LARGE_ACTION_ROW_CLASS, COMPOSER_LARGE_EDITOR_CLASS, COMPOSER_LARGE_TEXT_WELL_CLASS, COMPOSER_LEADING_GROUP_CLASS, COMPOSER_PICKER_TRIGGER_CLASS, COMPOSER_PLACEHOLDER_CLASS, COMPOSER_SEND_BUTTON_CLASS, COMPOSER_TEXT_CLASS } from "./composer-tokens.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/composer.tsx
+// src/components/composer.tsx
 /**
 * The slim status row rendered beneath a composer box: a `text-xs` row with
 * a start cluster and an end slot pinned to the far edge. Shared by every
@@ -76,5 +76,4 @@ const ComposerPicker = ({ ariaLabel, icon, onChange, options, value }) => {
 		})
 	})] });
 };
-//#endregion
 export { COMPOSER_BOX_ANONYMIZED_CLASS, COMPOSER_BOX_CLASS, COMPOSER_BOX_FOCUS_CLASS, COMPOSER_COMPACT_ROW_CLASS, COMPOSER_COMPACT_TEXT_CELL_CLASS, COMPOSER_CONTROL_BUTTON_SIZE, COMPOSER_LARGE_ACTION_ROW_CLASS, COMPOSER_LARGE_EDITOR_CLASS, COMPOSER_LARGE_TEXT_WELL_CLASS, COMPOSER_LEADING_GROUP_CLASS, COMPOSER_PICKER_TRIGGER_CLASS, COMPOSER_PLACEHOLDER_CLASS, COMPOSER_SEND_BUTTON_CLASS, COMPOSER_TEXT_CLASS, ComposerPicker, ComposerStatusRow };

package/dist/components/context-menu.d.ts

@@ -1,5 +1,4 @@
 import { ReactNode } from "react";
-//#region src/components/context-menu.d.ts
 export type ContextMenuAction = {
   label: string;
   icon?: ReactNode;
@@ -32,5 +31,4 @@ export type ContextMenuProps = {
  * Renders only the children when `actions` is empty so callers can
  * pass conditionally.
  */
-export declare const ContextMenu: ({ actions, children }: ContextMenuProps) => ReactNode;
-//#endregion
+export declare const ContextMenu: ({ actions, children }: ContextMenuProps) => ReactNode;

package/dist/components/context-menu.js

@@ -3,7 +3,7 @@ import { cn } from "../lib/utils.js";
 import { DropdownMenuCheckboxItem as MenuCheckboxItem, DropdownMenuContent as MenuPopup, DropdownMenuItem as MenuItem, DropdownMenuSeparator as MenuSeparator, DropdownMenuSub as MenuSub, DropdownMenuSubContent as MenuSubPopup, DropdownMenuSubTrigger as MenuSubTrigger } from "./menu.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { ContextMenu as ContextMenu$1 } from "@base-ui/react/context-menu";
-//#region src/components/context-menu.tsx
+// src/components/context-menu.tsx
 /**
 * Wrap arbitrary content with a right-click context menu. Built on
 * base-ui's `ContextMenu`, which is purpose-built for right-click /
@@ -44,5 +44,4 @@ const ContextMenuActionItem = ({ action }) => {
 		children: [action.icon, action.label]
 	})] });
 };
-//#endregion
 export { ContextMenu };

package/dist/components/copy-button.d.ts

@@ -1,7 +1,6 @@
 import { Button } from "./button.js";
 import { ComponentProps } from "react";
 import { CopyToClipboardIcon } from "../icons.js";
-//#region src/components/copy-button.d.ts
 export declare const COPIED_RESET_MS = 1500;
 type CopyButtonProps = Omit<ComponentProps<typeof Button>, "children" | "onClick"> & {
   /** Copies and reports whether it worked; failures stay with the caller. */
@@ -47,5 +46,4 @@ type CopyFeedbackProps = {
 };
 /** The standard copy-to-check glyph and label swap, for compound controls. */
 export declare const CopyFeedback: ({ icon: Icon, labelClassName, copied, copiedLabel, iconOnly, iconClassName, label }: CopyFeedbackProps) => import("react").JSX.Element;
-//#endregion
 export {};

package/dist/components/copy-button.js

@@ -4,7 +4,7 @@ import { cn } from "../lib/utils.js";
 import { Button } from "./button.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState } from "react";
-//#region src/components/copy-button.tsx
+// src/components/copy-button.tsx
 const COPIED_RESET_MS = 1500;
 const SWAP_CLASS = "col-start-1 row-start-1 transition-[opacity,scale] duration-200 ease-out motion-reduce:transition-none";
 /**
@@ -106,5 +106,4 @@ const CopyFeedback = ({ icon: Icon = CopyToClipboardIcon, labelClassName, copied
 		})
 	] });
 };
-//#endregion
 export { COPIED_RESET_MS, CopyButton, CopyFeedback, useCopiedFeedback, useCopyConfirmation };