@stll/ui 0.44.1 → 0.46.0

package/dist/components/date-range-filter.js

@@ -0,0 +1,74 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import { DatePickerPopover } from "./date-picker-popover.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useRef, useState } from "react";
+//#region src/components/date-range-filter.tsx
+/** Both calendar bounds and the focus handoff belong to the range. */
+const DateRangeFilter = ({ from, to, onFromChange, onToChange, fromLabel, toLabel, className, maxDate, ...pickerProps }) => {
+	const id = useId();
+	const toRef = useRef(null);
+	const [picker, setPicker] = useState({ type: "closed" });
+	const fromMax = to && (!maxDate || to < maxDate) ? to : maxDate;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col gap-1.5", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 flex-col gap-1.5",
+			children: [/* @__PURE__ */ jsx("span", {
+				id: `${id}-from-label`,
+				className: "text-muted-foreground text-xs font-medium",
+				children: fromLabel
+			}), /* @__PURE__ */ jsx(DatePickerPopover, {
+				...pickerProps,
+				mode: "date",
+				id: `${id}-from`,
+				defaultOpen: false,
+				labelledBy: `${id}-from-label`,
+				dateInputLabel: fromLabel,
+				value: from,
+				maxDate: fromMax,
+				minDate: void 0,
+				triggerRef: void 0,
+				focusTriggerOnOpen: false,
+				open: picker.type === "from",
+				onOpenChange: (open) => setPicker(open ? { type: "from" } : { type: "closed" }),
+				onChange: (next) => {
+					onFromChange(next);
+					if (!next) return;
+					setPicker({
+						type: "to",
+						focus: "trigger"
+					});
+					toRef.current?.focus();
+				}
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 flex-col gap-1.5",
+			children: [/* @__PURE__ */ jsx("span", {
+				id: `${id}-to-label`,
+				className: "text-muted-foreground text-xs font-medium",
+				children: toLabel
+			}), /* @__PURE__ */ jsx(DatePickerPopover, {
+				...pickerProps,
+				mode: "date",
+				id: `${id}-to`,
+				defaultOpen: false,
+				labelledBy: `${id}-to-label`,
+				dateInputLabel: toLabel,
+				value: to,
+				minDate: from ?? void 0,
+				maxDate,
+				open: picker.type === "to",
+				triggerRef: toRef,
+				focusTriggerOnOpen: picker.type === "to" && picker.focus === "trigger",
+				onOpenChange: (open) => setPicker(open ? {
+					type: "to",
+					focus: "calendar"
+				} : { type: "closed" }),
+				onChange: onToChange
+			})]
+		})]
+	});
+};
+//#endregion
+export { DateRangeFilter };

package/dist/components/dialog.js

@@ -2,6 +2,7 @@
 import { XIcon } from "../icons.js";
 import { cn } from "../lib/utils.js";
 import { OVERLAY_LAYER_CLASS_NAMES } from "../lib/overlay-layer.js";
+import { SAFE_AREA_OVERLAY_GUTTER_CLASS_NAME } from "../lib/safe-area.js";
 import { renderTooltipTrigger } from "./tooltip-trigger-helper.js";
 import { Button } from "./button.js";
 import { ScrollArea } from "./scroll-area.js";
@@ -86,7 +87,7 @@ const DialogBackdrop = ({ className, layer = "default", ...props }) => /* @__PUR
 	...props
 });
 const DialogViewport = ({ className, layer = "default", ...props }) => /* @__PURE__ */ jsx(Dialog$1.Viewport, {
-	className: cn("fixed inset-0 grid grid-rows-[1fr_auto_3fr] justify-items-center p-4", OVERLAY_LAYER_CLASS_NAMES[layer], className),
+	className: cn("fixed inset-0 grid grid-rows-[1fr_auto_3fr] justify-items-center", SAFE_AREA_OVERLAY_GUTTER_CLASS_NAME, OVERLAY_LAYER_CLASS_NAMES[layer], className),
 	"data-slot": "dialog-viewport",
 	...props
 });
@@ -100,7 +101,7 @@ const DialogPopup = ({ backdropClassName, className, children, showCloseButton =
 		className: cn(bottomStickOnMobile && "max-sm:grid-rows-[1fr_auto] max-sm:p-0 max-sm:pt-12", 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-in-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-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: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%)]", 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),
 			"data-slot": "dialog-popup",
 			...props,
 			children: [

package/dist/components/document-identity-badge.d.ts

@@ -0,0 +1,12 @@
+import { CourtBadgeSize } from "./court-badge.js";
+import { DocumentIdentity } from "./document-identity-badge.logic.js";
+//#region src/components/document-identity-badge.d.ts
+export declare const DocumentIdentityBadge: ({ identity, size, title }: DocumentIdentityBadgeProps) => import("react").JSX.Element;
+type DocumentIdentityBadgeProps = {
+  identity: DocumentIdentity;
+  /** Court chip size; statute labels follow their container width. */
+  size?: CourtBadgeSize | undefined;
+  /** Omit when the enclosing tab already supplies the full-title tooltip. */
+  title?: string | undefined;
+};
+//#endregion

package/dist/components/document-identity-badge.js

@@ -0,0 +1,94 @@
+import { FileTextIcon } from "../icons.js";
+import { cn } from "../lib/utils.js";
+import { Tooltip, TooltipContent as TooltipPopup, TooltipTrigger } from "./tooltip.js";
+import { CourtBadge } from "./court-badge.js";
+import { COURT_TIER_WEIGHT, statuteIdentityLabels } from "./document-identity-badge.logic.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { panic } from "better-result";
+//#region src/components/document-identity-badge.tsx
+const DocumentIdentityBadge = ({ identity, size, title }) => {
+	const content = documentIdentityMark(identity, size);
+	if (title === void 0) return content;
+	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+		render: /* @__PURE__ */ jsx("span", { className: "inline-flex max-w-full min-w-0" }),
+		children: content
+	}), /* @__PURE__ */ jsx(TooltipPopup, { children: title })] });
+};
+function documentIdentityMark(identity, size) {
+	switch (identity.kind) {
+		case "statute": {
+			const labels = statuteIdentityLabels(identity);
+			if (labels === null) return unknownDocumentMark();
+			return /* @__PURE__ */ jsxs("span", {
+				className: cn("@container/document-identity inline-flex max-w-full shrink-0 items-center justify-center font-mono leading-4 font-semibold tabular-nums", labels.short.length > 7 ? "text-[9px]" : "text-[10px]"),
+				style: { width: `${labels.long.length + .25}ch` },
+				"data-slot": "document-identity-badge",
+				"data-kind": "statute",
+				dir: "ltr",
+				children: [/* @__PURE__ */ jsx("bdi", {
+					className: statuteLabelClasses(labels.long.length).short,
+					children: labels.short
+				}), /* @__PURE__ */ jsx("bdi", {
+					className: statuteLabelClasses(labels.long.length).long,
+					children: labels.long
+				})]
+			});
+		}
+		case "decision": {
+			const abbreviation = identity.courtAbbreviation?.trim();
+			if (!abbreviation) return unknownDocumentMark();
+			return /* @__PURE__ */ jsx("span", {
+				className: "inline-flex max-w-full min-w-0",
+				"data-slot": "document-identity-badge",
+				"data-kind": "decision",
+				children: /* @__PURE__ */ jsx(CourtBadge, {
+					abbreviation,
+					size,
+					weight: identity.courtTier === void 0 ? "outline" : COURT_TIER_WEIGHT[identity.courtTier],
+					className: cn("max-w-full overflow-hidden", abbreviation.length > 4 && "px-0.5 text-[9px] tracking-normal")
+				})
+			});
+		}
+		case "unknown": return unknownDocumentMark();
+		default: return panic("Unhandled document identity");
+	}
+}
+function unknownDocumentMark() {
+	return /* @__PURE__ */ jsx(FileTextIcon, {
+		"aria-hidden": "true",
+		className: "size-3.5 shrink-0",
+		"data-slot": "document-identity-badge",
+		"data-kind": "unknown"
+	});
+}
+const STATUTE_LABEL_CLASSES = {
+	6: {
+		short: "@[6ch]/document-identity:hidden",
+		long: "hidden @[6ch]/document-identity:inline"
+	},
+	7: {
+		short: "@[7ch]/document-identity:hidden",
+		long: "hidden @[7ch]/document-identity:inline"
+	},
+	8: {
+		short: "@[8ch]/document-identity:hidden",
+		long: "hidden @[8ch]/document-identity:inline"
+	},
+	9: {
+		short: "@[9ch]/document-identity:hidden",
+		long: "hidden @[9ch]/document-identity:inline"
+	},
+	10: {
+		short: "@[10ch]/document-identity:hidden",
+		long: "hidden @[10ch]/document-identity:inline"
+	}
+};
+function statuteLabelClasses(length) {
+	if (length <= 6) return STATUTE_LABEL_CLASSES[6];
+	if (length === 7) return STATUTE_LABEL_CLASSES[7];
+	if (length === 8) return STATUTE_LABEL_CLASSES[8];
+	if (length === 9) return STATUTE_LABEL_CLASSES[9];
+	return STATUTE_LABEL_CLASSES[10];
+}
+//#endregion
+export { DocumentIdentityBadge };

package/dist/components/document-identity-badge.logic.d.ts

@@ -0,0 +1,25 @@
+//#region src/components/document-identity-badge.logic.d.ts
+export declare const COURT_TIER_WEIGHT: {
+  readonly constitutional: "solid";
+  readonly supreme: "tinted";
+  readonly regional: "outline";
+  readonly other: "dashed";
+};
+export type DocumentIdentity = {
+  kind: "statute";
+  number: string | null;
+  year: string | null;
+} | {
+  kind: "decision";
+  courtAbbreviation: string | null | undefined;
+  courtTier?: keyof typeof COURT_TIER_WEIGHT | undefined;
+} | {
+  kind: "unknown";
+};
+export declare const statuteIdentityLabels: ({ number, year }: Extract<DocumentIdentity, {
+  kind: "statute";
+}>) => {
+  short: string;
+  long: string;
+} | null;
+//#endregion

package/dist/components/document-identity-badge.logic.js

@@ -0,0 +1,25 @@
+//#region src/components/document-identity-badge.logic.ts
+const COURT_TIER_WEIGHT = {
+	constitutional: "solid",
+	supreme: "tinted",
+	regional: "outline",
+	other: "dashed"
+};
+const statuteIdentityLabels = ({ number, year }) => {
+	const ordinal = number?.trim() || null;
+	const fullYear = year?.trim() || null;
+	if (ordinal === null) return fullYear === null ? null : {
+		short: fullYear,
+		long: fullYear
+	};
+	if (fullYear === null) return {
+		short: ordinal,
+		long: ordinal
+	};
+	return {
+		short: `${ordinal}/${fullYear.slice(-2)}`,
+		long: `${ordinal}/${fullYear}`
+	};
+};
+//#endregion
+export { COURT_TIER_WEIGHT, statuteIdentityLabels };

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?: "inline-end" | "inline-start" | "block-start" | "block-end" | 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/input-otp.js

@@ -25,7 +25,7 @@ const InputOTPSlot = ({ index, className, ...props }) => {
 		...props,
 		children: [char, hasFakeCaret && /* @__PURE__ */ jsx("div", {
 			className: "pointer-events-none absolute inset-0 flex items-center justify-center",
-			children: /* @__PURE__ */ jsx("div", { className: "animate-caret-blink bg-foreground h-4 w-px duration-1000" })
+			children: /* @__PURE__ */ jsx("div", { className: "animate-caret-blink bg-foreground h-4 w-px" })
 		})]
 	});
 };

package/dist/components/landing.d.ts

@@ -25,7 +25,7 @@ type LandingGreetingProps = {
 };
 export declare const LandingGreeting: ({ icon, children }: LandingGreetingProps) => import("react").JSX.Element;
 /** A column's heading: an icon and a sentence-case label, as a link or a trigger. */
-export declare const LANDING_SECTION_HEADING_CLASS = "text-muted-foreground hover:text-foreground focus-visible:ring-ring flex items-center gap-2 rounded-md px-2 text-sm font-medium outline-none focus-visible:ring-2";
+export declare const LANDING_SECTION_HEADING_CLASS = "text-foreground hover:bg-accent/50 focus-visible:ring-ring [&>svg]:text-muted-foreground flex items-center gap-2 rounded-md px-2 py-0.5 text-sm font-semibold outline-none focus-visible:ring-2";
 /** A row of a column, as a link or a button. Its text lines up with the
  *  heading's label; the icon slot under the heading icon stays empty unless
  *  the icon identifies the row (a matter's colour). */

package/dist/components/landing.js

@@ -22,7 +22,7 @@ const LandingLayout = ({ actions, hero, children, footer }) => /* @__PURE__ */ j
 				children
 			}),
 			footer !== void 0 && /* @__PURE__ */ jsx(ScrollArea, {
-				className: "h-auto max-h-[40vh] w-full shrink-0",
+				className: "h-auto max-h-[40dvh] w-full shrink-0",
 				scrollFade: true,
 				children: footer
 			})
@@ -40,7 +40,7 @@ const LandingGreeting = ({ icon, children }) => /* @__PURE__ */ jsxs("div", {
 	})]
 });
 /** A column's heading: an icon and a sentence-case label, as a link or a trigger. */
-const LANDING_SECTION_HEADING_CLASS = "text-muted-foreground hover:text-foreground focus-visible:ring-ring flex items-center gap-2 rounded-md px-2 text-sm font-medium outline-none focus-visible:ring-2";
+const LANDING_SECTION_HEADING_CLASS = "text-foreground hover:bg-accent/50 focus-visible:ring-ring [&>svg]:text-muted-foreground flex items-center gap-2 rounded-md px-2 py-0.5 text-sm font-semibold outline-none focus-visible:ring-2";
 /** A row of a column, as a link or a button. Its text lines up with the
 *  heading's label; the icon slot under the heading icon stays empty unless
 *  the icon identifies the row (a matter's colour). */

package/dist/components/list.d.ts

@@ -15,8 +15,14 @@ declare const ListGroupHeader: ({ className, ...props }: React$1.ComponentProps<
 /** Title and description stack; takes the space the header action leaves. */
 declare const ListGroupHeading: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
 declare const ListGroupTitle: ({ className, children, ...props }: React$1.ComponentProps<"h2">) => React$1.JSX.Element;
-/** Quiet item count after the title; shows matches while a search filters. */
-declare const ListGroupCount: ({ className, ...props }: React$1.ComponentProps<"span">) => React$1.JSX.Element;
+/**
+ * Quiet item count after the title; shows matches while a search filters,
+ * and a changed digit fades in rather than snapping. `count` arrives
+ * formatted in the caller's locale.
+ */
+declare const ListGroupCount: ({ className, count, ...props }: Omit<React$1.ComponentProps<"span">, "children"> & {
+  count: string;
+}) => React$1.JSX.Element;
 declare const ListGroupDescription: ({ className, ...props }: React$1.ComponentProps<"p">) => React$1.JSX.Element;
 /** Quiet trailing affordance on the header row (a link or ghost button). */
 declare const ListGroupAction: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;

package/dist/components/list.js

@@ -1,5 +1,6 @@
 "use client";
 import { cn } from "../lib/utils.js";
+import { AnimatedCount } from "./animated-count.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
@@ -35,11 +36,16 @@ const ListGroupTitle = ({ className, children, ...props }) => /* @__PURE__ */ js
 	...props,
 	children
 });
-/** Quiet item count after the title; shows matches while a search filters. */
-const ListGroupCount = ({ className, ...props }) => /* @__PURE__ */ jsx("span", {
-	className: cn("text-muted-foreground ms-1.5 font-normal tabular-nums", className),
+/**
+* Quiet item count after the title; shows matches while a search filters,
+* and a changed digit fades in rather than snapping. `count` arrives
+* formatted in the caller's locale.
+*/
+const ListGroupCount = ({ className, count, ...props }) => /* @__PURE__ */ jsx("span", {
+	className: cn("text-muted-foreground ms-1.5 font-normal", className),
 	"data-slot": "list-group-count",
-	...props
+	...props,
+	children: /* @__PURE__ */ jsx(AnimatedCount, { value: count })
 });
 const ListGroupDescription = ({ className, ...props }) => /* @__PURE__ */ jsx("p", {
 	className: cn("text-muted-foreground text-xs text-pretty", className),

package/dist/components/matter-icon.d.ts

@@ -0,0 +1,16 @@
+//#region src/components/matter-icon.d.ts
+type MatterIconProps = {
+  className?: string | undefined;
+} & ({
+  matter: {
+    id: string;
+    color: string | null;
+  };
+} | {
+  variant: "none" | "all";
+});
+export declare const MatterIcon: (props: MatterIconProps) => import("react").JSX.Element;
+export declare const MattersNavIcon: ({ className }: {
+  className?: string | undefined;
+}) => import("react").JSX.Element;
+//#endregion

package/dist/components/matter-icon.js

@@ -0,0 +1,56 @@
+import { LayersIcon } from "../icons.js";
+import { cn } from "../lib/utils.js";
+import { resolveMatterColor } from "../lib/matter-colors.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/matter-icon.tsx
+const ALL_MATTERS_STACK_COLORS = [
+	"var(--option-red)",
+	"var(--option-blue)",
+	"var(--option-green)"
+];
+const MatterIcon = (props) => {
+	if ("matter" in props) return /* @__PURE__ */ jsx(LayersIcon, {
+		"aria-hidden": "true",
+		className: cn(props.className),
+		style: { color: resolveMatterColor(props.matter.id, props.matter.color) }
+	});
+	if (props.variant === "all") return /* @__PURE__ */ jsxs("svg", {
+		"aria-hidden": "true",
+		className: cn(props.className),
+		fill: "none",
+		viewBox: "0 0 24 24",
+		children: [
+			/* @__PURE__ */ jsx("path", {
+				d: "M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z",
+				stroke: ALL_MATTERS_STACK_COLORS[0],
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				strokeWidth: "2"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12",
+				stroke: ALL_MATTERS_STACK_COLORS[1],
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				strokeWidth: "2"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17",
+				stroke: ALL_MATTERS_STACK_COLORS[2],
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				strokeWidth: "2"
+			})
+		]
+	});
+	return /* @__PURE__ */ jsx(LayersIcon, {
+		"aria-hidden": "true",
+		className: cn(props.className)
+	});
+};
+const MattersNavIcon = ({ className }) => /* @__PURE__ */ jsx(MatterIcon, {
+	className,
+	variant: "none"
+});
+//#endregion
+export { MatterIcon, MattersNavIcon };

package/dist/components/menu.d.ts

@@ -7,7 +7,13 @@ declare const MenuPortal: React$1.ForwardRefExoticComponent<Omit<import("@base-u
 declare function MenuTrigger({ tooltip, ...props }: Menu$1.Trigger.Props & {
   tooltip?: React$1.ReactNode;
 }): React$1.JSX.Element;
-declare const MenuPopup: ({ children, className, sideOffset, align, alignOffset, side, anchor, collisionAvoidance, ...props }: Menu$1.Popup.Props & {
+declare const MenuPopup: ({ children, className, sideOffset, align, alignOffset, side, anchor, collisionAvoidance, header, viewportClassName, ...props }: Menu$1.Popup.Props & {
+  /** Content pinned above the scrolling list, such as a search field. It sits
+   *  outside the list, so a row scrolled into view can never hide under it. */
+  header?: React$1.ReactNode;
+  /** Classes for the scrolling list inside the popup, e.g. a lower height
+   *  cap for a long searchable list. */
+  viewportClassName?: string;
   align?: Menu$1.Positioner.Props["align"];
   sideOffset?: Menu$1.Positioner.Props["sideOffset"];
   alignOffset?: Menu$1.Positioner.Props["alignOffset"];
@@ -37,6 +43,8 @@ declare const MenuSubTrigger: ({ className, inset, children, ...props }: Menu$1.
   inset?: boolean;
 }) => React$1.JSX.Element;
 declare const MenuSubPopup: ({ className, sideOffset, alignOffset, align, ...props }: Menu$1.Popup.Props & {
+  header?: React$1.ReactNode;
+  viewportClassName?: string;
   align?: Menu$1.Positioner.Props["align"];
   sideOffset?: Menu$1.Positioner.Props["sideOffset"];
   alignOffset?: Menu$1.Positioner.Props["alignOffset"];

package/dist/components/menu.js

@@ -20,7 +20,7 @@ function MenuTrigger({ tooltip, ...props }) {
 		})
 	});
 }
-const MenuPopup = ({ children, className, sideOffset = 4, align, alignOffset, side = "bottom", anchor, collisionAvoidance, ...props }) => /* @__PURE__ */ jsx(Menu$1.Portal, { children: /* @__PURE__ */ jsx(Menu$1.Positioner, {
+const MenuPopup = ({ children, className, sideOffset = 4, align, alignOffset, side = "bottom", anchor, collisionAvoidance, header, viewportClassName, ...props }) => /* @__PURE__ */ jsx(Menu$1.Portal, { children: /* @__PURE__ */ jsx(Menu$1.Positioner, {
 	align: align ?? (anchor ? "start" : "center"),
 	alignOffset,
 	anchor,
@@ -29,14 +29,14 @@ const MenuPopup = ({ children, className, sideOffset = 4, align, alignOffset, si
 	"data-slot": "menu-positioner",
 	side,
 	sideOffset,
-	children: /* @__PURE__ */ jsx(Menu$1.Popup, {
-		className: cn("bg-popover relative flex origin-(--transform-origin) rounded-lg border shadow-lg/5 outline-none not-dark:bg-clip-padding not-[class*='w-']:min-w-32 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] focus:outline-none dark:before:shadow-[0_-1px_--theme(--color-white/6%)]", className),
+	children: /* @__PURE__ */ jsxs(Menu$1.Popup, {
+		className: cn("bg-popover relative flex max-h-(--available-height) origin-(--transform-origin) flex-col rounded-lg border shadow-lg/5 outline-none not-dark:bg-clip-padding not-[class*='w-']:min-w-32 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] focus:outline-none dark:before:shadow-[0_-1px_--theme(--color-white/6%)]", className),
 		"data-slot": "menu-popup",
 		...props,
-		children: /* @__PURE__ */ jsx("div", {
-			className: "max-h-(--available-height) w-full overflow-y-auto p-1",
+		children: [header, /* @__PURE__ */ jsx("div", {
+			className: cn("min-h-0 w-full flex-1 overflow-y-auto overscroll-contain p-1", viewportClassName),
 			children
-		})
+		})]
 	})
 }) });
 const MenuGroup = (props) => /* @__PURE__ */ jsx(Menu$1.Group, {

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

@@ -41,16 +41,23 @@ export type OutlineRailProps = {
    *  filter that narrows the tree to nothing cannot take its own control
    *  away; the caller decides whether the document has an outline at all. */
   header?: ReactNode;
+  /** Name a trailing annotation for assistive technology and its tooltip. */
+  formatMetaLabel?: (meta: string) => string;
   /** Depth from which entries start collapsed. Their ancestors still open on
    *  their own while one of their descendants is active, so a deep outline
    *  reads as the chain down to where the reader is rather than as every
    *  branch at once. Omitted: everything starts expanded. */
   collapsedFromLevel?: number;
+  /** `panel` and `rail` fill a host-owned track; `popover` owns its disclosure. */
+  presentation?: "panel" | "rail" | "popover";
+  /** A host that already reserves docked chrome passes zero. */
+  bottomInset?: number;
   topOffset?: number;
   panelWidth?: number;
   ariaLabel?: string;
 };
+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, collapsedFromLevel, topOffset, panelWidth, ariaLabel }: OutlineRailProps) => import("react").JSX.Element | null;
+export declare const OutlineRail: ({ items, scrollContainerRef, resolvePct, onJump, activeId, header, formatMetaLabel, collapsedFromLevel, presentation, bottomInset, topOffset, panelWidth, ariaLabel }: OutlineRailProps) => import("react").JSX.Element | null;
 //#endregion