@stll/ui 0.52.1 → 0.54.0

package/dist/components/alert-dialog.d.ts

@@ -4,7 +4,7 @@ import * as React$1 from "react";
 //#region src/components/alert-dialog.d.ts
 declare const AlertDialogCreateHandle: typeof AlertDialog$1.createHandle;
 declare const AlertDialog: typeof AlertDialog$1.Root;
-declare const AlertDialogPortal: React$1.ForwardRefExoticComponent<Omit<import("@base-ui/react").AlertDialogPortalProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const AlertDialogPortal: React$1.ForwardRefExoticComponent<Omit<import("@base-ui/react").DialogPortalProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare function AlertDialogTrigger({ tooltip, ...props }: AlertDialog$1.Trigger.Props & {
   tooltip?: React$1.ReactNode;
 }): React$1.JSX.Element;

package/dist/components/alert-dialog.js

@@ -11,7 +11,7 @@ const AlertDialog = AlertDialog$1.Root;
 const AlertDialogPortal = AlertDialog$1.Portal;
 function AlertDialogTrigger({ tooltip, ...props }) {
 	return renderTooltipTrigger({
-		tooltip: tooltip ?? props["aria-label"] ?? props.title,
+		tooltip,
 		trigger: /* @__PURE__ */ jsx(AlertDialog$1.Trigger, {
 			"data-slot": "alert-dialog-trigger",
 			nativeButton: false,
@@ -65,7 +65,7 @@ const AlertDialogDescription = ({ className, ...props }) => /* @__PURE__ */ jsx(
 });
 function AlertDialogClose({ tooltip, ...props }) {
 	return renderTooltipTrigger({
-		tooltip: tooltip ?? props["aria-label"] ?? props.title,
+		tooltip,
 		trigger: /* @__PURE__ */ jsx(AlertDialog$1.Close, {
 			"data-slot": "alert-dialog-close",
 			...props

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

@@ -1,7 +1,7 @@
 import * as React$1 from "react";
 //#region src/components/bidi-text.d.ts
 export declare const BidiText: (props: BidiTextProps) => React$1.JSX.Element;
-export declare const UserText: (props: BidiTextProps) => React$1.JSX.Element;
+export declare const UserText: typeof BidiText;
 type BidiDirection = "auto" | "ltr" | "rtl";
 type BdiElementProps = Omit<React$1.ComponentPropsWithoutRef<"bdi">, "dir"> & {
   as?: "bdi";

package/dist/components/button.d.ts

@@ -13,9 +13,39 @@ import { VariantProps } from "class-variance-authority";
  */
 declare const buttonAccessibleDisabledClass = "cursor-not-allowed opacity-64";
 declare const buttonVariants: (props?: ({
-  size?: "default" | "sm" | "lg" | "icon" | "chip" | "icon-lg" | "icon-sm" | "icon-xl" | "icon-xs" | "row" | "xl" | "xs" | null | undefined;
-  variant?: "link" | "default" | "destructive" | "destructive-outline" | "destructive-ghost" | "ghost" | "muted" | "outline" | "secondary" | null | undefined;
+  size?: "chip" | "default" | "icon" | "icon-lg" | "icon-sm" | "icon-xl" | "icon-xs" | "lg" | "row" | "sm" | "xl" | "xs" | null | undefined;
+  variant?: "default" | "destructive" | "destructive-ghost" | "destructive-outline" | "ghost" | "link" | "muted" | "outline" | "secondary" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** What a button's box holds: a glyph alone, or a visible label. */
+declare const BUTTON_CONTENT: {
+  readonly icon: "icon";
+  readonly text: "text";
+};
+/**
+ * An icon size is a square that fits a glyph and no label, so the button shows
+ * no text, and its accessible name doubles as its tooltip. A text size shows
+ * its own label and gets a tooltip only from an explicit `tooltip`: an implicit
+ * one would repeat or contradict the label, and because a tooltip opens on
+ * focus, it would take the first Escape from a popover or dialog that focuses
+ * the button.
+ *
+ * Icon sizes are exactly the `icon`-prefixed ones; the type below enforces it,
+ * because the `icon-button-requires-tooltip` lint rule reads the same prefix.
+ */
+declare const BUTTON_SIZE_CONTENT: {
+  readonly chip: "text";
+  readonly default: "text";
+  readonly icon: "icon";
+  readonly "icon-lg": "icon";
+  readonly "icon-sm": "icon";
+  readonly "icon-xl": "icon";
+  readonly "icon-xs": "icon";
+  readonly lg: "text";
+  readonly row: "text";
+  readonly sm: "text";
+  readonly xl: "text";
+  readonly xs: "text";
+};
 type ButtonProps = {
   variant?: VariantProps<typeof buttonVariants>["variant"];
   size?: VariantProps<typeof buttonVariants>["size"];
@@ -25,4 +55,4 @@ type ButtonProps = {
 } & useRender.ComponentProps<"button">;
 declare function Button({ className, variant, size, render, loading, icon, children, disabled, tooltip, ...props }: ButtonProps): import("react").JSX.Element;
 //#endregion
-export { Button, buttonAccessibleDisabledClass, buttonVariants };
+export { BUTTON_CONTENT, BUTTON_SIZE_CONTENT, Button, buttonAccessibleDisabledClass, buttonVariants };

package/dist/components/button.js

@@ -7,6 +7,7 @@ import { Loader } from "./loader.js";
 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 { panic } from "better-result";
 import { cva } from "class-variance-authority";
 //#region src/components/button.tsx
 /**
@@ -29,9 +30,10 @@ const buttonAccessibleDisabledClass = "cursor-not-allowed opacity-64";
 * buttons keep the treatment of their surface instead.
 */
 const buttonPressClass = "motion-safe:transition-transform motion-safe:duration-150 ease-out motion-safe:active:scale-[0.98]";
+const BUTTON_DEFAULT_SIZE = "default";
 const buttonVariants = cva("focus-visible:ring-ring focus-visible:ring-offset-background relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 rounded-lg border text-base font-medium whitespace-nowrap outline-none select-none before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] focus-visible:ring-2 focus-visible:ring-offset-1 disabled:pointer-events-none disabled:opacity-64 sm:text-sm pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4", {
 	defaultVariants: {
-		size: "default",
+		size: BUTTON_DEFAULT_SIZE,
 		variant: "default"
 	},
 	variants: {
@@ -62,9 +64,47 @@ const buttonVariants = cva("focus-visible:ring-ring focus-visible:ring-offset-ba
 		}
 	}
 });
+/** What a button's box holds: a glyph alone, or a visible label. */
+const BUTTON_CONTENT = {
+	icon: "icon",
+	text: "text"
+};
+/**
+* An icon size is a square that fits a glyph and no label, so the button shows
+* no text, and its accessible name doubles as its tooltip. A text size shows
+* its own label and gets a tooltip only from an explicit `tooltip`: an implicit
+* one would repeat or contradict the label, and because a tooltip opens on
+* focus, it would take the first Escape from a popover or dialog that focuses
+* the button.
+*
+* Icon sizes are exactly the `icon`-prefixed ones; the type below enforces it,
+* because the `icon-button-requires-tooltip` lint rule reads the same prefix.
+*/
+const BUTTON_SIZE_CONTENT = {
+	chip: BUTTON_CONTENT.text,
+	default: BUTTON_CONTENT.text,
+	icon: BUTTON_CONTENT.icon,
+	"icon-lg": BUTTON_CONTENT.icon,
+	"icon-sm": BUTTON_CONTENT.icon,
+	"icon-xl": BUTTON_CONTENT.icon,
+	"icon-xs": BUTTON_CONTENT.icon,
+	lg: BUTTON_CONTENT.text,
+	row: BUTTON_CONTENT.text,
+	sm: BUTTON_CONTENT.text,
+	xl: BUTTON_CONTENT.text,
+	xs: BUTTON_CONTENT.text
+};
+const implicitTooltip = (size, accessibleName) => {
+	const content = BUTTON_SIZE_CONTENT[size ?? BUTTON_DEFAULT_SIZE];
+	switch (content) {
+		case BUTTON_CONTENT.icon: return accessibleName;
+		case BUTTON_CONTENT.text: return;
+		default: return panic(`Unhandled button content: ${String(content)}`);
+	}
+};
 function Button({ className, variant, size, render, loading, icon, children, disabled, tooltip, ...props }) {
 	const typeValue = render ? void 0 : "button";
-	const tooltipContent = tooltip ?? props["aria-label"] ?? props.title;
+	const tooltipContent = tooltip ?? implicitTooltip(size, props["aria-label"] ?? props.title);
 	const disposition = resolveButtonDisposition({
 		disabled,
 		loading,
@@ -110,4 +150,4 @@ function Button({ className, variant, size, render, loading, icon, children, dis
 	});
 }
 //#endregion
-export { Button, buttonAccessibleDisabledClass, buttonVariants };
+export { BUTTON_CONTENT, BUTTON_SIZE_CONTENT, Button, buttonAccessibleDisabledClass, buttonVariants };

package/dist/components/combobox.d.ts

@@ -36,6 +36,5 @@ 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;
-declare const useComboboxFilter: typeof Combobox$1.useFilter;
 //#endregion
-export { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxClear, ComboboxCollection, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, ComboboxPopup, ComboboxRow, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue, useComboboxFilter };
+export { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxClear, ComboboxCollection, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, ComboboxPopup, ComboboxRow, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue };

package/dist/components/combobox.js

@@ -231,6 +231,5 @@ const ComboboxChipRemove = (props) => /* @__PURE__ */ jsx(Combobox$1.ChipRemove,
 	...props,
 	children: /* @__PURE__ */ jsx(XIcon, {})
 });
-const useComboboxFilter = Combobox$1.useFilter;
 //#endregion
-export { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxClear, ComboboxCollection, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, ComboboxPopup, ComboboxRow, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue, useComboboxFilter };
+export { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxClear, ComboboxCollection, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, ComboboxPopup, ComboboxRow, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue };

package/dist/components/details-grid.js

@@ -2,7 +2,7 @@ import { cn } from "../lib/utils.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/details-grid.tsx
 const DetailsGrid = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
-	className: "@container min-w-0",
+	className: "@container min-w-0 [contain-intrinsic-inline-size:20rem]",
 	"data-slot": "details-grid-container",
 	children: /* @__PURE__ */ jsx("dl", {
 		className: cn("grid grid-cols-[repeat(auto-fit,minmax(min(100%,20rem),1fr))] gap-x-6 gap-y-2 font-sans @min-[64rem]:grid-cols-3", className),

package/dist/components/dialog.d.ts

@@ -14,7 +14,7 @@ declare const DialogProvider: ({ labels, children }: React$1.PropsWithChildren<{
 declare const Dialog: <Payload>({ dirty, onOpenChange, onOpenChangeComplete, ...props }: Dialog$1.Root.Props<Payload> & {
   dirty?: boolean;
 }) => React$1.JSX.Element;
-declare const DialogPortal: React$1.ForwardRefExoticComponent<Omit<import("@base-ui/react").AlertDialogPortalProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const DialogPortal: React$1.ForwardRefExoticComponent<Omit<import("@base-ui/react").DialogPortalProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare function DialogTrigger({ tooltip, ...props }: Dialog$1.Trigger.Props & {
   tooltip?: React$1.ReactNode;
 }): React$1.JSX.Element;
@@ -27,10 +27,21 @@ declare const DialogBackdrop: ({ className, layer, ...props }: Dialog$1.Backdrop
 declare const DialogViewport: ({ className, layer, ...props }: Dialog$1.Viewport.Props & {
   layer?: OverlayLayer;
 }) => React$1.JSX.Element;
-declare const DialogPopup: ({ backdropClassName, className, children, showCloseButton, bottomStickOnMobile, layer, viewportClassName, ...props }: Dialog$1.Popup.Props & {
+/** How the popup sits below `sm`; from `sm` up it is always centred. */
+declare const DIALOG_MOBILE_LAYOUT: {
+  /** Pinned to the bottom edge, leaving the page visible above it. */
+  readonly bottomSheet: "bottom-sheet";
+  /** Centred like the wide layout. */
+  readonly centered: "centered";
+  /** The whole viewport, inset by the safe areas; for search-like surfaces
+   * that need the height and have no backdrop left to tap. */
+  readonly fullscreen: "fullscreen";
+};
+type DialogMobileLayout = (typeof DIALOG_MOBILE_LAYOUT)[keyof typeof DIALOG_MOBILE_LAYOUT];
+declare const DialogPopup: ({ backdropClassName, className, children, showCloseButton, mobileLayout, layer, viewportClassName, ...props }: Dialog$1.Popup.Props & {
   backdropClassName?: string;
   showCloseButton?: boolean;
-  bottomStickOnMobile?: boolean;
+  mobileLayout?: DialogMobileLayout;
   layer?: OverlayLayer;
   viewportClassName?: string;
 }) => React$1.JSX.Element;
@@ -44,4 +55,4 @@ declare const DialogPanel: ({ className, scrollFade, ...props }: React$1.Compone
   scrollFade?: boolean;
 }) => React$1.JSX.Element;
 //#endregion
-export { Dialog, DialogBackdrop, DialogBackdrop as DialogOverlay, DialogClose, DialogPopup as DialogContent, DialogPopup, DialogCreateHandle, DialogDescription, DialogFooter, DialogFormState, DialogHeader, DialogPanel, DialogPortal, DialogProvider, DialogTitle, DialogTrigger, DialogViewport };
+export { DIALOG_MOBILE_LAYOUT, Dialog, DialogBackdrop, DialogBackdrop as DialogOverlay, DialogClose, DialogPopup as DialogContent, DialogPopup, DialogCreateHandle, DialogDescription, DialogFooter, DialogFormState, DialogHeader, type DialogMobileLayout, DialogPanel, DialogPortal, DialogProvider, DialogTitle, DialogTrigger, DialogViewport };

package/dist/components/dialog.js

@@ -65,7 +65,7 @@ const Dialog = ({ dirty = false, onOpenChange, onOpenChangeComplete, ...props })
 const DialogPortal = Dialog$1.Portal;
 function DialogTrigger({ tooltip, ...props }) {
 	return renderTooltipTrigger({
-		tooltip: tooltip ?? props["aria-label"] ?? props.title,
+		tooltip,
 		trigger: /* @__PURE__ */ jsx(Dialog$1.Trigger, {
 			"data-slot": "dialog-trigger",
 			...props
@@ -74,7 +74,7 @@ function DialogTrigger({ tooltip, ...props }) {
 }
 function DialogClose({ tooltip, ...props }) {
 	return renderTooltipTrigger({
-		tooltip: tooltip ?? props["aria-label"] ?? props.title,
+		tooltip,
 		trigger: /* @__PURE__ */ jsx(Dialog$1.Close, {
 			"data-slot": "dialog-close",
 			...props
@@ -91,17 +91,37 @@ const DialogViewport = ({ className, layer = "default", ...props }) => /* @__PUR
 	"data-slot": "dialog-viewport",
 	...props
 });
-const DialogPopup = ({ backdropClassName, className, children, showCloseButton = true, bottomStickOnMobile = true, layer = "default", viewportClassName, ...props }) => {
+/** How the popup sits below `sm`; from `sm` up it is always centred. */
+const DIALOG_MOBILE_LAYOUT = {
+	/** Pinned to the bottom edge, leaving the page visible above it. */
+	bottomSheet: "bottom-sheet",
+	/** Centred like the wide layout. */
+	centered: "centered",
+	/** The whole viewport, inset by the safe areas; for search-like surfaces
+	* that need the height and have no backdrop left to tap. */
+	fullscreen: "fullscreen"
+};
+const DIALOG_MOBILE_VIEWPORT_CLASS_NAMES = {
+	"bottom-sheet": "max-sm:grid-rows-[1fr_auto] max-sm:p-0 max-sm:pt-12",
+	centered: void 0,
+	fullscreen: "max-sm:grid-rows-[0_1fr_0] max-sm:p-0"
+};
+const DIALOG_MOBILE_POPUP_CLASS_NAMES = {
+	"bottom-sheet": "max-sm:max-w-none max-sm:rounded-none max-sm:border-x-0 max-sm:border-t max-sm:border-b-0 max-sm:pb-(--safe-area-bottom) max-sm:opacity-[calc(1-min(var(--nested-dialogs),1))] max-sm:before:hidden max-sm:before:rounded-none max-sm:data-ending-style:translate-y-4 max-sm:data-starting-style:translate-y-4",
+	centered: void 0,
+	fullscreen: "max-sm:h-full max-sm:max-w-none max-sm:rounded-none max-sm:border-0 max-sm:ps-(--safe-area-inline-start) max-sm:pe-(--safe-area-inline-end) max-sm:pt-(--safe-area-top) max-sm:pb-(--safe-area-bottom) max-sm:opacity-[calc(1-min(var(--nested-dialogs),1))] max-sm:before:hidden"
+};
+const DialogPopup = ({ backdropClassName, className, children, showCloseButton = true, mobileLayout = DIALOG_MOBILE_LAYOUT.bottomSheet, layer = "default", viewportClassName, ...props }) => {
 	const dismissal = useContext(DialogDismissalContext);
 	const labels = useContext(DialogLabelsContext);
 	return /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogBackdrop, {
 		className: backdropClassName,
 		layer
 	}), /* @__PURE__ */ jsx(DialogViewport, {
-		className: cn(bottomStickOnMobile && "max-sm:grid-rows-[1fr_auto] max-sm:p-0 max-sm:pt-12", viewportClassName),
+		className: cn(DIALOG_MOBILE_VIEWPORT_CLASS_NAMES[mobileLayout], viewportClassName),
 		layer,
 		children: /* @__PURE__ */ jsxs(Dialog$1.Popup, {
-			className: cn("bg-popover text-popover-foreground relative row-start-2 flex max-h-full min-h-0 w-full max-w-lg min-w-0 -translate-y-[calc(1.25rem*var(--nested-dialogs))] scale-[calc(1-0.1*var(--nested-dialogs))] flex-col rounded-2xl border opacity-[calc(1-0.1*var(--nested-dialogs))] shadow-lg/5 transition-[scale,opacity,translate] duration-200 ease-out will-change-transform not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-ending-style:scale-98 data-ending-style:opacity-0 data-ending-style:duration-150 data-nested:data-ending-style:translate-y-8 data-nested-dialog-open:origin-top data-starting-style:scale-98 data-starting-style:opacity-0 data-nested:data-starting-style:translate-y-8 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]", bottomStickOnMobile && "max-sm:max-w-none max-sm:rounded-none max-sm:border-x-0 max-sm:border-t max-sm:border-b-0 max-sm:pb-(--safe-area-bottom) max-sm:opacity-[calc(1-min(var(--nested-dialogs),1))] max-sm:before:hidden max-sm:before:rounded-none max-sm:data-ending-style:translate-y-4 max-sm:data-starting-style:translate-y-4", className),
+			className: cn("bg-popover text-popover-foreground relative row-start-2 flex max-h-full min-h-0 w-full max-w-lg min-w-0 -translate-y-[calc(1.25rem*var(--nested-dialogs))] scale-[calc(1-0.1*var(--nested-dialogs))] flex-col rounded-2xl border opacity-[calc(1-0.1*var(--nested-dialogs))] shadow-lg/5 transition-[scale,opacity,translate] duration-200 ease-out will-change-transform not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-ending-style:scale-98 data-ending-style:opacity-0 data-ending-style:duration-150 data-nested:data-ending-style:translate-y-8 data-nested-dialog-open:origin-top data-starting-style:scale-98 data-starting-style:opacity-0 data-nested:data-starting-style:translate-y-8 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]", DIALOG_MOBILE_POPUP_CLASS_NAMES[mobileLayout], className),
 			"data-slot": "dialog-popup",
 			...props,
 			children: [
@@ -156,4 +176,4 @@ const DialogPanel = ({ className, scrollFade = true, ...props }) => /* @__PURE__
 	})
 });
 //#endregion
-export { Dialog, DialogBackdrop, DialogBackdrop as DialogOverlay, DialogClose, DialogPopup as DialogContent, DialogPopup, DialogCreateHandle, DialogDescription, DialogFooter, DialogFormState, DialogHeader, DialogPanel, DialogPortal, DialogProvider, DialogTitle, DialogTrigger, DialogViewport };
+export { DIALOG_MOBILE_LAYOUT, Dialog, DialogBackdrop, DialogBackdrop as DialogOverlay, DialogClose, DialogPopup as DialogContent, DialogPopup, DialogCreateHandle, DialogDescription, DialogFooter, DialogFormState, DialogHeader, DialogPanel, DialogPortal, DialogProvider, DialogTitle, DialogTrigger, DialogViewport };

package/dist/components/inline-rename.js

@@ -33,6 +33,7 @@ const InlineRenameInput = ({ value, onValueChange, onCommit, onCancel, onBlur, c
 			"data-slot": "inline-rename-mirror",
 			children: mirrorText
 		}), /* @__PURE__ */ jsx("input", {
+			enterKeyHint: "done",
 			...props,
 			"data-slot": "inline-rename-input",
 			dir: dir ?? (isStructuredInputType(props.type) ? "ltr" : contentDir(value)),

package/dist/components/input-group.d.ts

@@ -5,7 +5,7 @@ import { VariantProps } from "class-variance-authority";
 //#region src/components/input-group.d.ts
 declare const InputGroup: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
 declare const inputGroupAddonVariants: (props?: ({
-  align?: "inline-end" | "inline-start" | "block-end" | "block-start" | null | undefined;
+  align?: "block-end" | "block-start" | "inline-end" | "inline-start" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const InputGroupAddon: ({ className, align, ...props }: React$1.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) => React$1.JSX.Element;
 declare const InputGroupText: ({ className, ...props }: React$1.ComponentProps<"span">) => React$1.JSX.Element;

package/dist/components/landing.js

@@ -6,27 +6,33 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/landing.tsx
 const LandingLayout = ({ actions, hero, children, footer }) => /* @__PURE__ */ jsxs("div", {
 	className: "mx-auto flex h-full w-full max-w-5xl flex-1 flex-col overflow-hidden",
-	children: [actions, /* @__PURE__ */ jsxs("div", {
-		className: "@container flex min-h-0 flex-1 flex-col items-center overflow-hidden px-4",
-		children: [
-			/* @__PURE__ */ jsx(ScrollArea, {
-				className: "min-h-72 w-full max-w-2xl shrink basis-[22rem]",
-				scrollFade: true,
-				children: /* @__PURE__ */ jsx("div", {
-					className: "flex min-h-full w-full flex-col items-center justify-center gap-8 px-1",
-					children: hero
-				})
-			}),
-			/* @__PURE__ */ jsx("div", {
-				className: "grid min-h-0 w-full flex-1 auto-rows-fr gap-8 pb-6 @2xl:grid-cols-3",
-				children
-			}),
-			footer !== void 0 && /* @__PURE__ */ jsx(ScrollArea, {
-				className: "h-auto max-h-[40dvh] w-full shrink-0",
-				scrollFade: true,
-				children: footer
+	children: [actions, /* @__PURE__ */ jsx("div", {
+		className: "@container flex min-h-0 flex-1 flex-col overflow-hidden",
+		children: /* @__PURE__ */ jsx(ScrollArea, {
+			className: "min-h-0 flex-1",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "flex min-h-full w-full flex-col items-center px-4 @2xl:h-full",
+				children: [
+					/* @__PURE__ */ jsx(ScrollArea, {
+						className: "min-h-72 w-full max-w-2xl shrink-0 basis-[22rem] @2xl:shrink",
+						scrollFade: true,
+						children: /* @__PURE__ */ jsx("div", {
+							className: "flex min-h-full w-full flex-col items-center justify-center gap-8 px-1",
+							children: hero
+						})
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "grid w-full shrink-0 gap-8 pb-6 @2xl:min-h-0 @2xl:flex-1 @2xl:auto-rows-fr @2xl:grid-cols-3",
+						children
+					}),
+					footer !== void 0 && /* @__PURE__ */ jsx(ScrollArea, {
+						className: "h-auto max-h-[40dvh] w-full shrink-0",
+						scrollFade: true,
+						children: footer
+					})
+				]
 			})
-		]
+		})
 	})]
 });
 const LandingGreeting = ({ icon, children }) => /* @__PURE__ */ jsxs("div", {
@@ -54,7 +60,7 @@ const LandingSection = ({ children, heading }) => /* @__PURE__ */ jsxs("section"
 		className: "mb-3 shrink-0 px-1",
 		children: heading
 	}), /* @__PURE__ */ jsx(ScrollArea, {
-		className: "min-h-0 flex-1",
+		className: "@2xl:min-h-0 @2xl:flex-1",
 		scrollFade: true,
 		children: /* @__PURE__ */ jsx("div", {
 			className: "flex flex-col gap-1 px-1 pt-1 pb-4",

package/dist/components/menu.d.ts

@@ -2,8 +2,8 @@ import * as React$1 from "react";
 import { Menu as Menu$1 } from "@base-ui/react/menu";
 //#region src/components/menu.d.ts
 declare const MenuCreateHandle: typeof Menu$1.createHandle;
-declare const Menu: <Payload>(props: Menu$1.Root.Props<Payload>) => React$1.JSX.Element;
-declare const MenuPortal: React$1.ForwardRefExoticComponent<Omit<import("@base-ui/react").ContextMenuPortalProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const Menu: typeof Menu$1.Root;
+declare const MenuPortal: React$1.ForwardRefExoticComponent<Omit<import("@base-ui/react").MenuPortalProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare function MenuTrigger({ tooltip, ...props }: Menu$1.Trigger.Props & {
   tooltip?: React$1.ReactNode;
 }): React$1.JSX.Element;

package/dist/components/menu.js

@@ -12,7 +12,7 @@ const Menu = Menu$1.Root;
 const MenuPortal = Menu$1.Portal;
 function MenuTrigger({ tooltip, ...props }) {
 	return renderTooltipTrigger({
-		tooltip: tooltip ?? props["aria-label"] ?? props.title,
+		tooltip,
 		trigger: /* @__PURE__ */ jsx(Menu$1.Trigger, {
 			"data-slot": "menu-trigger",
 			nativeButton: true,

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

@@ -59,5 +59,5 @@ export type OutlineRailProps = {
 export declare const OUTLINE_CONTROL_MIN_SIZE = 32;
 /** The entry as one line of text: label, then its title when it has one. */
 export declare const outlineEntryText: (item: OutlineItem) => string;
-export declare const OutlineRail: ({ items, scrollContainerRef, resolvePct, onJump, activeId, header, formatMetaLabel, collapsedFromLevel, presentation, bottomInset, topOffset, panelWidth, ariaLabel }: OutlineRailProps) => import("react").JSX.Element | null;
+export declare const OutlineRail: ({ items: itemsProp, scrollContainerRef, resolvePct, onJump, activeId, header, formatMetaLabel, collapsedFromLevel, presentation, bottomInset, topOffset, panelWidth, ariaLabel }: OutlineRailProps) => import("react").JSX.Element | null;
 //#endregion