@stll/ui 0.37.0 → 0.38.0

package/README.md

@@ -273,6 +273,42 @@ renderCollapsedBandCell={({ band, cells, count }) => (
 )}
 ```
 
+## Grouped lists and search
+
+`@stll/ui/list` renders inventories of named things (connections, sessions,
+keys) as titled groups of hairline-divided rows. Rows truncate their content
+column and keep their trailing column, so they never scroll sideways.
+
+```tsx
+<ListGroup aria-labelledby="apps">
+  <ListGroupHeader>
+    <ListGroupHeading>
+      <ListGroupTitle id="apps">
+        Apps with access<ListGroupCount>3</ListGroupCount>
+      </ListGroupTitle>
+      <ListGroupDescription>Apps you authorized.</ListGroupDescription>
+    </ListGroupHeading>
+  </ListGroupHeader>
+  <List>
+    <ListItem>
+      <ListItemMedia>C</ListItemMedia>
+      <ListItemContent>
+        <ListItemTitle>Claude</ListItemTitle>
+        <ListItemDescription>Connected 3 days ago</ListItemDescription>
+      </ListItemContent>
+      <ListItemActions>
+        <ListItemStatus tone="success">Connected</ListItemStatus>
+      </ListItemActions>
+    </ListItem>
+  </List>
+</ListGroup>
+```
+
+Pass `render={<a href="…" />}` to `ListItem` to make the whole row a link.
+`@stll/ui/search-field` is the matching filter box: leading magnifier, clear
+button, and Escape clears the query. The caller owns the query and the
+matching.
+
 ## Styles
 
 No compiled CSS ships. The components carry Tailwind class names, so the

package/dist/components/button.d.ts

@@ -13,8 +13,8 @@ import { VariantProps } from "class-variance-authority";
  */
 declare const buttonAccessibleDisabledClass = "cursor-not-allowed opacity-64";
 declare const buttonVariants: (props?: ({
-  size?: "icon-sm" | "icon" | "default" | "sm" | "lg" | "row" | "chip" | "icon-lg" | "icon-xl" | "icon-xs" | "xl" | "xs" | null | undefined;
-  variant?: "link" | "outline" | "default" | "destructive" | "muted" | "destructive-outline" | "destructive-ghost" | "ghost" | "secondary" | null | undefined;
+  size?: "default" | "row" | "sm" | "lg" | "chip" | "icon" | "icon-lg" | "icon-sm" | "icon-xl" | "icon-xs" | "xl" | "xs" | null | undefined;
+  variant?: "link" | "default" | "destructive" | "muted" | "destructive-outline" | "destructive-ghost" | "ghost" | "outline" | "secondary" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type ButtonProps = {
   variant?: VariantProps<typeof buttonVariants>["variant"];

package/dist/components/list.d.ts

@@ -0,0 +1,58 @@
+import * as React$1 from "react";
+import { useRender } from "@base-ui/react/use-render";
+import { VariantProps } from "class-variance-authority";
+//#region src/components/list.d.ts
+/**
+ * Grouped list: a titled section holding one surface of hairline-divided
+ * rows. Use it for settings and inventories of named things (connections,
+ * sessions, members, keys) where each row is icon + name + one quiet line +
+ * trailing status or action. Rows never scroll sideways: the content column
+ * truncates and the trailing column keeps its width, so actions stay on
+ * screen at any viewport.
+ */
+declare const ListGroup: ({ className, ...props }: React$1.ComponentProps<"section">) => React$1.JSX.Element;
+declare const ListGroupHeader: ({ className, ...props }: React$1.ComponentProps<"header">) => React$1.JSX.Element;
+/** 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;
+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;
+/** The surface. Depth comes from a ring plus a soft shadow, not a frame. */
+declare const List: ({ className, ...props }: React$1.ComponentProps<"ul">) => React$1.JSX.Element;
+/**
+ * One row. Pass `render` (a link or button element) to make the whole row the
+ * target; then keep other interactive elements out of it. Rows with their own
+ * trailing buttons stay a plain `li` and put the actions in `ListItemActions`.
+ */
+declare const ListItem: ({ className, render, children, ...props }: useRender.ComponentProps<"div">) => React$1.JSX.Element;
+declare const listItemMediaVariants: (props?: ({
+  variant?: "icon" | "initial" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** Fixed 32px tile for an icon, logo or initial. */
+declare const ListItemMedia: ({ className, variant, ...props }: React$1.ComponentProps<"div"> & VariantProps<typeof listItemMediaVariants>) => React$1.JSX.Element;
+declare const ListItemContent: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
+declare const ListItemTitle: ({ className, ...props }: React$1.ComponentProps<"span">) => React$1.JSX.Element;
+declare const listItemDescriptionVariants: (props?: ({
+  variant?: "code" | "text" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Secondary line. Pass `line-clamp-2` when two lines are genuinely needed;
+ * never `whitespace-nowrap`.
+ */
+declare const ListItemDescription: ({ className, variant, ...props }: React$1.ComponentProps<"span"> & VariantProps<typeof listItemDescriptionVariants>) => React$1.JSX.Element;
+declare const ListItemActions: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
+/** Single-line empty row inside a `List`. Phrase it as the next action. */
+declare const ListEmpty: ({ className, ...props }: React$1.ComponentProps<"li">) => React$1.JSX.Element;
+type StatusTone = "neutral" | "success" | "warning" | "destructive";
+/**
+ * Dot + label status. The label always carries the meaning; the dot only
+ * reinforces it, so colour is never the sole signal.
+ */
+declare const ListItemStatus: ({ tone, className, children, ...props }: React$1.ComponentProps<"span"> & {
+  tone?: StatusTone;
+}) => React$1.JSX.Element;
+//#endregion
+export { List, ListEmpty, ListGroup, ListGroupAction, ListGroupCount, ListGroupDescription, ListGroupHeader, ListGroupHeading, ListGroupTitle, ListItem, ListItemActions, ListItemContent, ListItemDescription, ListItemMedia, ListItemStatus, ListItemTitle, type StatusTone };

package/dist/components/list.js

@@ -0,0 +1,160 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import { 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/list.tsx
+/**
+* Grouped list: a titled section holding one surface of hairline-divided
+* rows. Use it for settings and inventories of named things (connections,
+* sessions, members, keys) where each row is icon + name + one quiet line +
+* trailing status or action. Rows never scroll sideways: the content column
+* truncates and the trailing column keeps its width, so actions stay on
+* screen at any viewport.
+*/
+const ListGroup = ({ className, ...props }) => /* @__PURE__ */ jsx("section", {
+	className: cn("flex flex-col gap-2.5", className),
+	"data-slot": "list-group",
+	...props
+});
+const ListGroupHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("header", {
+	className: cn("flex items-end gap-4 px-1", className),
+	"data-slot": "list-group-header",
+	...props
+});
+/** Title and description stack; takes the space the header action leaves. */
+const ListGroupHeading = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("flex min-w-0 flex-1 flex-col gap-0.5", className),
+	"data-slot": "list-group-heading",
+	...props
+});
+const ListGroupTitle = ({ className, children, ...props }) => /* @__PURE__ */ jsx("h2", {
+	className: cn("text-foreground text-sm font-medium text-balance", className),
+	"data-slot": "list-group-title",
+	...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),
+	"data-slot": "list-group-count",
+	...props
+});
+const ListGroupDescription = ({ className, ...props }) => /* @__PURE__ */ jsx("p", {
+	className: cn("text-muted-foreground text-xs text-pretty", className),
+	"data-slot": "list-group-description",
+	...props
+});
+/** Quiet trailing affordance on the header row (a link or ghost button). */
+const ListGroupAction = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("flex shrink-0 items-center gap-1", className),
+	"data-slot": "list-group-action",
+	...props
+});
+/** The surface. Depth comes from a ring plus a soft shadow, not a frame. */
+const List = ({ className, ...props }) => /* @__PURE__ */ jsx("ul", {
+	className: cn("bg-background ring-border divide-border flex flex-col divide-y overflow-hidden rounded-xl shadow-xs/5 ring-1", className),
+	"data-slot": "list",
+	...props
+});
+/**
+* One row. Pass `render` (a link or button element) to make the whole row the
+* target; then keep other interactive elements out of it. Rows with their own
+* trailing buttons stay a plain `li` and put the actions in `ListItemActions`.
+*/
+const ListItem = ({ className, render, children, ...props }) => {
+	const defaultProps = {
+		className: cn("flex min-h-14 w-full items-center gap-3 px-4 py-2.5 text-start", render !== void 0 && "hover:bg-muted/50 focus-visible:bg-muted/50 focus-visible:ring-ring cursor-pointer outline-none focus-visible:ring-2 focus-visible:ring-inset", className),
+		"data-slot": "list-item",
+		children
+	};
+	const row = useRender({
+		defaultTagName: "div",
+		props: mergeProps(defaultProps, props),
+		render
+	});
+	return /* @__PURE__ */ jsx("li", {
+		className: "flex",
+		children: row
+	});
+};
+const listItemMediaVariants = cva("bg-muted grid size-8 shrink-0 place-items-center overflow-hidden rounded-lg outline-1 -outline-offset-1 outline-black/5 dark:outline-white/10", {
+	defaultVariants: { variant: "icon" },
+	variants: { variant: {
+		/** A glyph or logo, drawn quietly. */
+		icon: "text-muted-foreground [&_svg:not([class*='size-'])]:size-4",
+		/** A letter standing in for a name that has no logo. */
+		initial: "text-foreground text-xs font-medium"
+	} }
+});
+/** Fixed 32px tile for an icon, logo or initial. */
+const ListItemMedia = ({ className, variant, ...props }) => /* @__PURE__ */ jsx("div", {
+	"aria-hidden": "true",
+	className: cn(listItemMediaVariants({ variant }), className),
+	"data-slot": "list-item-media",
+	...props
+});
+const ListItemContent = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("flex min-w-0 flex-1 flex-col gap-0.5", className),
+	"data-slot": "list-item-content",
+	...props
+});
+const ListItemTitle = ({ className, ...props }) => /* @__PURE__ */ jsx("span", {
+	className: cn("text-foreground truncate text-sm font-medium", className),
+	"data-slot": "list-item-title",
+	dir: "auto",
+	...props
+});
+const listItemDescriptionVariants = cva("text-muted-foreground text-xs", {
+	defaultVariants: { variant: "text" },
+	variants: { variant: {
+		/** Prose, clamped to one line so long provider copy cannot widen the row. */
+		text: "line-clamp-1 wrap-break-word",
+		/** A URL or command: monospace, left-to-right, truncated at the end. */
+		code: "truncate font-mono"
+	} }
+});
+/**
+* Secondary line. Pass `line-clamp-2` when two lines are genuinely needed;
+* never `whitespace-nowrap`.
+*/
+const ListItemDescription = ({ className, variant, ...props }) => /* @__PURE__ */ jsx("span", {
+	className: cn(listItemDescriptionVariants({ variant }), className),
+	"data-slot": "list-item-description",
+	dir: variant === "code" ? "ltr" : "auto",
+	...props
+});
+const ListItemActions = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("flex shrink-0 items-center gap-2", className),
+	"data-slot": "list-item-actions",
+	...props
+});
+/** Single-line empty row inside a `List`. Phrase it as the next action. */
+const ListEmpty = ({ className, ...props }) => /* @__PURE__ */ jsx("li", {
+	className: cn("text-muted-foreground flex min-h-14 items-center gap-2 px-4 py-2.5 text-sm", className),
+	"data-slot": "list-empty",
+	...props
+});
+const STATUS_DOT_CLASS = {
+	neutral: "bg-foreground-disabled",
+	success: "bg-success",
+	warning: "bg-warning",
+	destructive: "bg-destructive"
+};
+/**
+* Dot + label status. The label always carries the meaning; the dot only
+* reinforces it, so colour is never the sole signal.
+*/
+const ListItemStatus = ({ tone = "neutral", className, children, ...props }) => /* @__PURE__ */ jsxs("span", {
+	className: cn("text-muted-foreground inline-flex items-center gap-1.5 text-xs whitespace-nowrap", className),
+	"data-slot": "list-item-status",
+	"data-tone": tone,
+	...props,
+	children: [/* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		className: cn("size-1.5 shrink-0 rounded-full", STATUS_DOT_CLASS[tone])
+	}), children]
+});
+//#endregion
+export { List, ListEmpty, ListGroup, ListGroupAction, ListGroupCount, ListGroupDescription, ListGroupHeader, ListGroupHeading, ListGroupTitle, ListItem, ListItemActions, ListItemContent, ListItemDescription, ListItemMedia, ListItemStatus, ListItemTitle };

package/dist/components/menu.js

@@ -20,13 +20,13 @@ function MenuTrigger({ tooltip, ...props }) {
 		})
 	});
 }
-const MenuPopup = ({ children, className, sideOffset = 4, align = "center", alignOffset, side = "bottom", anchor, ...props }) => /* @__PURE__ */ jsx(Menu$1.Portal, { children: /* @__PURE__ */ jsx(Menu$1.Positioner, {
-	align: anchor ? "start" : align,
+const MenuPopup = ({ children, className, sideOffset = 4, align, alignOffset, side = "bottom", anchor, ...props }) => /* @__PURE__ */ jsx(Menu$1.Portal, { children: /* @__PURE__ */ jsx(Menu$1.Positioner, {
+	align: align ?? (anchor ? "start" : "center"),
 	alignOffset,
 	anchor,
 	className: OVERLAY_LAYER_CLASS_NAMES.popup,
 	"data-slot": "menu-positioner",
-	side: anchor ? "bottom" : side,
+	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),

package/dist/components/search-field.d.ts

@@ -0,0 +1,20 @@
+import { InputGroupInput } from "./input-group.js";
+import * as React$1 from "react";
+//#region src/components/search-field.d.ts
+type SearchFieldProps = Omit<React$1.ComponentProps<typeof InputGroupInput>, "onChange" | "type" | "value"> & {
+  value: string;
+  onValueChange: (value: string) => void;
+  /** Accessible name of the clear button; the package ships no copy. */
+  clearLabel: string;
+  /** Class for the outer group (width, margins). */
+  groupClassName?: string;
+};
+/**
+ * Filter-as-you-type search box: leading magnifier, clear button once there is
+ * a query, and Escape clears before it blurs. The caller owns the query state
+ * and the matching; keep matching local and instant for lists under a few
+ * hundred rows.
+ */
+declare const SearchField: ({ value, onValueChange, clearLabel, groupClassName, className, onKeyDown, ...props }: SearchFieldProps) => React$1.JSX.Element;
+//#endregion
+export { SearchField, type SearchFieldProps };

package/dist/components/search-field.js

@@ -0,0 +1,53 @@
+"use client";
+import { SearchIcon, XIcon } from "../icons.js";
+import { cn } from "../lib/utils.js";
+import { Button } from "./button.js";
+import { InputGroup, InputGroupAddon, InputGroupInput } from "./input-group.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/search-field.tsx
+/**
+* Filter-as-you-type search box: leading magnifier, clear button once there is
+* a query, and Escape clears before it blurs. The caller owns the query state
+* and the matching; keep matching local and instant for lists under a few
+* hundred rows.
+*/
+const SearchField = ({ value, onValueChange, clearLabel, groupClassName, className, onKeyDown, ...props }) => /* @__PURE__ */ jsxs(InputGroup, {
+	className: cn("min-h-11 sm:min-h-0", groupClassName),
+	children: [
+		/* @__PURE__ */ jsx(InputGroupAddon, { children: /* @__PURE__ */ jsx(SearchIcon, {}) }),
+		/* @__PURE__ */ jsx(InputGroupInput, {
+			autoComplete: "off",
+			spellCheck: false,
+			...props,
+			className: cn("max-sm:h-11 max-sm:leading-11", className),
+			onChange: (event) => {
+				onValueChange(event.target.value);
+			},
+			onKeyDown: (event) => {
+				if (event.key === "Escape" && value.length > 0) {
+					event.preventDefault();
+					event.stopPropagation();
+					onValueChange("");
+				}
+				onKeyDown?.(event);
+			},
+			type: "search",
+			value
+		}),
+		value.length > 0 && /* @__PURE__ */ jsx(InputGroupAddon, {
+			align: "inline-end",
+			children: /* @__PURE__ */ jsx(Button, {
+				"aria-label": clearLabel,
+				onClick: () => {
+					onValueChange("");
+				},
+				size: "icon-xs",
+				type: "button",
+				variant: "ghost",
+				children: /* @__PURE__ */ jsx(XIcon, {})
+			})
+		})
+	]
+});
+//#endregion
+export { SearchField };

package/dist/components/sidebar.d.ts

@@ -1,6 +1,7 @@
 import { Button } from "./button.js";
 import { Input } from "./input.js";
 import { Separator } from "./separator.js";
+import { SidebarLayout } from "./sidebar.logic.js";
 import { TooltipContent as TooltipPopup } from "./tooltip.js";
 import { VariantProps } from "class-variance-authority";
 //#region src/components/sidebar.d.ts
@@ -24,6 +25,8 @@ type SidebarContextProps = {
   toggleSidebar: () => void;
 };
 declare function useSidebar(): SidebarContextProps;
+/** The sidebar's current layout; see `resolveSidebarLayout`. */
+declare function useSidebarLayout(): SidebarLayout;
 /**
  * Inline size the sidebar takes out of the layout row, in CSS pixels. Panes
  * docked to the opposite edge need this to know how much room is actually
@@ -82,9 +85,20 @@ declare const SidebarGroupContent: ({ className, ...props }: React.ComponentProp
 declare const SidebarMenu: ({ className, ...props }: React.ComponentProps<"ul">) => import("react").JSX.Element;
 declare const SidebarMenuItem: ({ className, ...props }: React.ComponentProps<"li">) => import("react").JSX.Element;
 declare const sidebarMenuButtonVariants: (props?: ({
-  variant?: "outline" | "default" | null | undefined;
+  variant?: "default" | "outline" | null | undefined;
   size?: "default" | "sm" | "lg" | "rail" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * The footer's avatar trigger, signed in (user menu) or not (sign-in): a
+ * 28px avatar, then its label while expanded. Collapsed, it is the rail's
+ * 32px square with the avatar centred on the axis of the icons above.
+ *
+ * Not a `SidebarMenuButton` size: that button fades its last span when
+ * collapsed, and an avatar renders as a span. Every avatar trigger takes
+ * this class and renders its label only while expanded, so the two auth
+ * states cannot drift apart.
+ */
+declare const sidebarIdentityTriggerClassName: (layout: SidebarLayout) => string;
 declare const SidebarMenuButton: ({ asChild, isActive, variant, size, tooltip, className, ...props }: React.ComponentProps<"button"> & {
   asChild?: boolean;
   isActive?: boolean;
@@ -106,4 +120,4 @@ declare const SidebarMenuSubButton: ({ asChild, size, isActive, className, ...pr
   isActive?: boolean;
 }) => import("react").JSX.Element;
 //#endregion
-export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar, useSidebarInlineSize };
+export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, sidebarIdentityTriggerClassName, useSidebar, useSidebarInlineSize, useSidebarLayout };

package/dist/components/sidebar.js

@@ -8,7 +8,7 @@ import { Sheet, SheetContent as SheetPopup, SheetDescription, SheetHeader, Sheet
 import { Input } from "./input.js";
 import { Separator } from "./separator.js";
 import { Slot } from "../lib/slot.js";
-import { deriveSidebarState, isSidebarMenuButtonTooltipVisible, nextOpenMobile, nextRequestedOpen, resolveSidebarOpen } from "./sidebar.logic.js";
+import { deriveSidebarState, nextOpenMobile, nextRequestedOpen, resolveSidebarLayout, resolveSidebarOpen } from "./sidebar.logic.js";
 import { Skeleton } from "./skeleton.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createContext, use, useId, useState } from "react";
@@ -44,6 +44,14 @@ function useSidebar() {
 	if (!context) panic("useSidebar must be used within a SidebarProvider.");
 	return context;
 }
+/** The sidebar's current layout; see `resolveSidebarLayout`. */
+function useSidebarLayout() {
+	const { isMobile, state } = useSidebar();
+	return resolveSidebarLayout({
+		isMobile,
+		state
+	});
+}
 /**
 * Inline size the sidebar takes out of the layout row, in CSS pixels. Panes
 * docked to the opposite edge need this to know how much room is actually
@@ -277,9 +285,20 @@ const sidebarMenuButtonVariants = cva("peer/menu-button ring-sidebar-ring hover:
 		size: "default"
 	}
 });
+/**
+* The footer's avatar trigger, signed in (user menu) or not (sign-in): a
+* 28px avatar, then its label while expanded. Collapsed, it is the rail's
+* 32px square with the avatar centred on the axis of the icons above.
+*
+* Not a `SidebarMenuButton` size: that button fades its last span when
+* collapsed, and an avatar renders as a span. Every avatar trigger takes
+* this class and renders its label only while expanded, so the two auth
+* states cannot drift apart.
+*/
+const sidebarIdentityTriggerClassName = (layout) => cn("ring-sidebar-ring hover:bg-sidebar-accent flex items-center overflow-hidden rounded-md text-start text-sm outline-hidden focus-visible:ring-2", layout === "rail" ? "size-8 justify-center p-0.5" : "w-full gap-2 p-2");
 const SidebarMenuButton = ({ asChild = false, isActive = false, variant = "default", size = "default", tooltip, className, ...props }) => {
 	const Comp = asChild ? Slot : "button";
-	const { isMobile, state } = useSidebar();
+	const sidebarLayout = useSidebarLayout();
 	const button = /* @__PURE__ */ jsx(Comp, {
 		className: cn(sidebarMenuButtonVariants({
 			variant,
@@ -292,15 +311,11 @@ const SidebarMenuButton = ({ asChild = false, isActive = false, variant = "defau
 		...props
 	});
 	if (tooltip === void 0) return button;
-	const tooltipProps = typeof tooltip === "string" ? { children: tooltip } : tooltip;
 	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: button }), /* @__PURE__ */ jsx(TooltipPopup, {
 		align: "center",
-		hidden: !isSidebarMenuButtonTooltipVisible({
-			isMobile,
-			state
-		}),
+		hidden: sidebarLayout !== "rail",
 		side: "right",
-		...tooltipProps
+		...typeof tooltip === "string" ? { children: tooltip } : tooltip
 	})] });
 };
 const SidebarMenuAction = ({ className, asChild = false, showOnHover = false, ...props }) => {
@@ -358,4 +373,4 @@ const SidebarMenuSubButton = ({ asChild = false, size = "md", isActive = false,
 	});
 };
 //#endregion
-export { SIDEBAR_WIDTH_ICON_PX, SIDEBAR_WIDTH_PX, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar, useSidebarInlineSize };
+export { SIDEBAR_WIDTH_ICON_PX, SIDEBAR_WIDTH_PX, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, sidebarIdentityTriggerClassName, useSidebar, useSidebarInlineSize, useSidebarLayout };

package/dist/components/sidebar.logic.d.ts

@@ -1,14 +1,17 @@
 //#region src/components/sidebar.logic.d.ts
 export type SidebarState = "expanded" | "collapsed";
+/** How the sidebar's contents are drawn: the icon rail, or full width. */
+export type SidebarLayout = "rail" | "full";
 /**
- * A `SidebarMenuButton`'s tooltip repeats the label already visible in the
- * expanded rail, and mobile never collapses to icons, so it only earns its
- * keep on desktop while the sidebar is icon-collapsed.
+ * The layout the sidebar's contents are drawn in. The mobile sheet never
+ * collapses to icons, whatever the desktop collapse state holds, so chrome
+ * that changes shape when collapsed (labels, tooltips, the avatar trigger)
+ * reads this rather than `state`.
  */
-export declare const isSidebarMenuButtonTooltipVisible: ({ state, isMobile }: {
+export declare const resolveSidebarLayout: ({ state, isMobile }: {
   state: SidebarState;
   isMobile: boolean;
-}) => boolean;
+}) => SidebarLayout;
 /**
  * The sidebar's displayed open state: the requested state (controlled prop,
  * or the uncontrolled fallback), masked by `forceCollapsed`. A host can force

package/dist/components/sidebar.logic.js

@@ -1,10 +1,11 @@
 //#region src/components/sidebar.logic.ts
 /**
-* A `SidebarMenuButton`'s tooltip repeats the label already visible in the
-* expanded rail, and mobile never collapses to icons, so it only earns its
-* keep on desktop while the sidebar is icon-collapsed.
+* The layout the sidebar's contents are drawn in. The mobile sheet never
+* collapses to icons, whatever the desktop collapse state holds, so chrome
+* that changes shape when collapsed (labels, tooltips, the avatar trigger)
+* reads this rather than `state`.
 */
-const isSidebarMenuButtonTooltipVisible = ({ state, isMobile }) => state === "collapsed" && !isMobile;
+const resolveSidebarLayout = ({ state, isMobile }) => state === "collapsed" && !isMobile ? "rail" : "full";
 /**
 * The sidebar's displayed open state: the requested state (controlled prop,
 * or the uncontrolled fallback), masked by `forceCollapsed`. A host can force
@@ -24,4 +25,4 @@ const nextRequestedOpen = (requestedOpen) => !requestedOpen;
 /** `toggleSidebar`'s mobile transition: it flips the sheet's open state. */
 const nextOpenMobile = (openMobile) => !openMobile;
 //#endregion
-export { deriveSidebarState, isSidebarMenuButtonTooltipVisible, nextOpenMobile, nextRequestedOpen, resolveSidebarOpen };
+export { deriveSidebarState, nextOpenMobile, nextRequestedOpen, resolveSidebarLayout, resolveSidebarOpen };

package/dist/components/workspace-shell.js

@@ -48,7 +48,7 @@ const WorkspaceShell = ({ children, endDock, navigation, topBar }) => {
 					"data-slot": "workspace-shell-top-bar",
 					children: topBar({ compactNavigationTrigger })
 				}), /* @__PURE__ */ jsx("div", {
-					className: "flex min-h-0 flex-1 flex-col overflow-auto overscroll-contain",
+					className: "flex min-h-0 flex-1 flex-col overflow-auto overscroll-contain [&>*:first-child]:border-t-0",
 					"data-slot": "workspace-shell-content",
 					children
 				})]

package/dist/index.d.ts

@@ -31,6 +31,7 @@ import { Textarea, TextareaProps } from "./components/textarea.js";
 import { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText, InputGroupTextarea } from "./components/input-group.js";
 import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from "./components/input-otp.js";
 import { Label } from "./components/label.js";
+import { List, ListEmpty, ListGroup, ListGroupAction, ListGroupCount, ListGroupDescription, ListGroupHeader, ListGroupHeading, ListGroupTitle, ListItem, ListItemActions, ListItemContent, ListItemDescription, ListItemMedia, ListItemStatus, ListItemTitle, StatusTone } from "./components/list.js";
 import { MenuSection } from "./components/menu-section.js";
 import { DropdownMenu as Menu, DropdownMenuCheckboxItem as MenuCheckboxItem, DropdownMenuContent as MenuPopup, DropdownMenuCreateHandle as MenuCreateHandle, DropdownMenuGroup as MenuGroup, DropdownMenuItem as MenuItem, DropdownMenuLabel as MenuGroupLabel, DropdownMenuPortal as MenuPortal, DropdownMenuRadioGroup as MenuRadioGroup, DropdownMenuRadioItem as MenuRadioItem, DropdownMenuSeparator as MenuSeparator, DropdownMenuShortcut as MenuShortcut, DropdownMenuSub as MenuSub, DropdownMenuSubContent as MenuSubPopup, DropdownMenuSubTrigger as MenuSubTrigger, DropdownMenuTrigger as MenuTrigger } from "./components/menu.js";
 import { OUTLINE_EMPHASIS, OutlineEmphasis, OutlineItem, OutlineRail, OutlineRailProps, outlineEntryText } from "./components/outline-rail.js";
@@ -40,13 +41,14 @@ import { HoverCard as PreviewCard, HoverCardContent as PreviewCardPopup, HoverCa
 import { MenuPreviewLayout, PreviewPane } from "./components/preview-pane.js";
 import { ScrollArea, ScrollBar } from "./components/scroll-area.js";
 import { ScrollToTop, ScrollToTopProps } from "./components/scroll-to-top.js";
+import { SearchField, SearchFieldProps } from "./components/search-field.js";
 import { SecretInput, SecretInputProps } from "./components/secret-input.js";
 import { SegmentedIconToggle } from "./components/segmented-icon-toggle.js";
 import { Select, SelectContent as SelectPopup, SelectGroup, SelectGroupLabel, SelectItem, SelectSeparator, SelectTrigger, SelectValue } from "./components/select.js";
 import { Separator, TextSeparator } from "./components/separator.js";
 import { Sheet, SheetBackdrop, SheetClose, SheetContent as SheetPopup, SheetDescription, SheetFooter, SheetHeader, SheetPanel, SheetPortal, SheetSide, SheetTitle, SheetTrigger } from "./components/sheet.js";
 import { Tooltip, TooltipContent as TooltipPopup, TooltipCreateHandle, TooltipProvider, TooltipTrigger } from "./components/tooltip.js";
-import { SIDEBAR_WIDTH_ICON_PX, SIDEBAR_WIDTH_PX, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar, useSidebarInlineSize } from "./components/sidebar.js";
+import { SIDEBAR_WIDTH_ICON_PX, SIDEBAR_WIDTH_PX, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, sidebarIdentityTriggerClassName, useSidebar, useSidebarInlineSize, useSidebarLayout } from "./components/sidebar.js";
 import { Skeleton } from "./components/skeleton.js";
 import { StellaMark } from "./components/stella-mark.js";
 import { StellaWordmarkLatin } from "./components/stella-wordmark.js";
@@ -99,4 +101,4 @@ import { ReviewDiffDeletion, ReviewDiffInsertion, ReviewDiffSegment, ReviewDiffS
 import { ReviewOutOfDateNotice, ReviewOutOfDateReason, ReviewOutOfDateTone } from "./review/review-out-of-date-notice.js";
 import { ReviewStatusBadge, ReviewStatusSize, ReviewStatusTone, ReviewStatusVariant } from "./review/review-status-badge.js";
 import { ReviewSeverityDot, ReviewSeverityLevel, ReviewStatusDot, reviewSeverityTone } from "./review/review-severity-dot.js";
-export { APPLICATION_RAIL_BUTTON_SIZE, APPLICATION_RAIL_ICON_SIZE, APPLICATION_RAIL_WIDTH, Accordion, AccordionPanel as AccordionContent, AccordionPanel, AccordionItem, AccordionTrigger, AlertDialog, AlertDialogBackdrop, AlertDialogBackdrop as AlertDialogOverlay, AlertDialogClose, AlertDialogPopup as AlertDialogContent, AlertDialogPopup, AlertDialogCreateHandle, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPanel, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertDialogViewport, AnchoredToastProvider, ApplicationRail, ApplicationRailButton, ApplicationRailContent, ApplicationRailFooter, ApplicationRailHeader, ApplicationRailMenu, ApplicationRailSeparator, Avatar, AvatarFallback, AvatarImage, BOARD_DRAG_OVERLAY_Z_INDEX, type BidiDirection, BidiText, type BidiTextProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, type BuildKanbanBoardMatrixParams, Button, CONTROL_SIZE, CONTROL_SIZES, CalendarCell, type CalendarDateRange, CalendarEntryButton, CalendarEntrySurface, CalendarGrid, CalendarHeaderCell, CalendarHeaderRow, Checkbox, ColorPicker, ColorPickerContent, type ColorPickerContentProps, type ColorPickerProps, type ColorPreset, ColorVariants, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxClear, ComboboxCollection, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, ComboboxPopup, ComboboxRow, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue, Command, CommandCollection, CommandDialog, CommandDialogPopup, CommandDialogTrigger, CommandEmpty, CommandFooter, CommandGroup, CommandGroupLabel, CommandInput, CommandItem, CommandList, CommandPanel, CommandSeparator, CommandShortcut, type ControlSize, type CreateKanbanDropIntentParams, DEFAULT_PRESETS, DataTable, type DataTableAriaSort, type DataTableColumn, type DataTableProps, type DataTableRowAction, DatePickerPopover, type DatePickerPopoverProps, DestructiveActionConfirmation, DestructiveConfirmDialog, type DestructiveConfirmDialogProps, Dialog, DialogBackdrop, DialogBackdrop as DialogOverlay, DialogClose, DialogPopup as DialogContent, DialogPopup, DialogCreateHandle, DialogDescription, DialogFooter, DialogHeader, DialogPanel, DialogPortal, DialogTitle, DialogTrigger, DialogViewport, DirectionalIcon, DiscordLogoIcon, Menu as DropdownMenu, Menu, MenuCheckboxItem as DropdownMenuCheckboxItem, MenuCheckboxItem, MenuPopup as DropdownMenuContent, MenuPopup, MenuCreateHandle as DropdownMenuCreateHandle, MenuCreateHandle, MenuGroup as DropdownMenuGroup, MenuGroup, MenuItem as DropdownMenuItem, MenuItem, MenuGroupLabel as DropdownMenuLabel, MenuGroupLabel, MenuPortal as DropdownMenuPortal, MenuPortal, MenuRadioGroup as DropdownMenuRadioGroup, MenuRadioGroup, MenuRadioItem as DropdownMenuRadioItem, MenuRadioItem, MenuSeparator as DropdownMenuSeparator, MenuSeparator, MenuShortcut as DropdownMenuShortcut, MenuShortcut, MenuSub as DropdownMenuSub, MenuSub, MenuSubPopup as DropdownMenuSubContent, MenuSubPopup, MenuSubTrigger as DropdownMenuSubTrigger, MenuSubTrigger, MenuTrigger as DropdownMenuTrigger, MenuTrigger, Field, FieldControl, FieldDescription, FieldError, FieldItem, FieldLabel, FieldValidity, FileInput, type FileInputProps, Form, Frame, FrameDescription, FrameFooter, FrameHeader, FramePanel, FrameTitle, GitHubLogoIcon, HexColorPicker, type HexColorPickerProps, PreviewCard as HoverCard, PreviewCard, PreviewCardPopup as HoverCardContent, PreviewCardPopup, PreviewCardTrigger as HoverCardTrigger, PreviewCardTrigger, INSPECTOR_CONTENT_MIN_WIDTH, INSPECTOR_EDITOR_MIN_WIDTH, INSPECTOR_PANE_DEFAULT_WIDTH, INSPECTOR_PANE_KEYBOARD_PAGE_STEP, INSPECTOR_PANE_KEYBOARD_STEP, INSPECTOR_PANE_MAX_WIDTH, INSPECTOR_PANE_MIN_WIDTH, INSPECTOR_RAIL_WIDTH, Input, InputGroup, InputGroupAddon, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputProps, Inspector, InspectorActions, InspectorContent, InspectorDescription, InspectorDock, type InspectorDockMount, InspectorEmptyRow, InspectorEntityTab, type InspectorEntityTabInactiveIcon, InspectorFacetBar, InspectorHeader, InspectorHeaderText, InspectorProperty, InspectorPropertyLabel, InspectorPropertyList, InspectorPropertyValue, InspectorRail, InspectorRailCell, InspectorRailContent, InspectorRailFooter, InspectorRailIconButton, InspectorRailTab, InspectorSection, InspectorSectionTitle, InspectorTitle, KANBAN_BAND_CAPTION_ROW_HEIGHT, KANBAN_BAND_CAPTION_ROW_HEIGHT_PX, KANBAN_BAND_PEEK_DELAY_MS, KANBAN_BAND_PEEK_LINGER_MS, KANBAN_BOARD_AUTO_SCROLL_OPTIONS, KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_BOARD_AXES, KANBAN_BOARD_COLLISION_DETECTION, KANBAN_CARD_DRAG_MIME, KANBAN_CARD_STICKY_TOP_VAR, KANBAN_CHROME_ROW_HEIGHT, KANBAN_CHROME_ROW_HEIGHT_PX, KANBAN_COLLAPSED_BAND_WIDTH_CLASS, KANBAN_COLLAPSED_BAND_WIDTH_PX, KANBAN_COLUMN_GAP_PX, KANBAN_COLUMN_WIDTH_CLASS, KANBAN_COLUMN_WIDTH_PX, KANBAN_DIRECTIONS, KANBAN_DRAG_OVERLAY_Z_INDEX, KANBAN_HORIZONTAL_EDGES, KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_SORTABLE_ACTIVATION_MODES, KANBAN_STICKY_TOP_VAR, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, KANBAN_VIRTUAL_CELL_PAGINATION, type KanbanBandToggleActivation, type KanbanBoardAxis, type KanbanBoardCell, type KanbanBoardColumn, type KanbanBoardCoordinate, type KanbanBoardDestination, type KanbanBoardLane, type KanbanBoardMatrix, type KanbanBuiltInGroup, KanbanCardDragSurface, type KanbanCardDragSurfaceProps, type KanbanCardFieldSelection, KanbanCardShell, type KanbanCardShellProps, KanbanCellAction, type KanbanCellActionProps, type KanbanCellVirtualNavigation, KanbanCollapsedBandCaption, type KanbanCollapsedBandCaptionProps, type KanbanColumnBand, KanbanColumnBandHeader, type KanbanColumnBandHeaderProps, type KanbanColumnBandSpan, KanbanColumnHeader, type KanbanColumnHeaderProps, type KanbanDirection, type KanbanDragCancelEvent, type KanbanDragEndEvent, KanbanDragHandle, type KanbanDragHandleProps, type KanbanDragOverEvent, type KanbanDragStartEvent, type KanbanDropAxisChange, type KanbanDropIntent, type KanbanGroup, type KanbanGroupOption, type KanbanGrouping, type KanbanHorizontalEdge, type KanbanSchema, type KanbanSortableActivationMode, type KanbanSortableBindings, KanbanSortableBoard, type KanbanSortableBoardProps, type KanbanSortableCellPosition, KanbanSortableColumns, type KanbanSortableColumnsProps, KanbanSortableList, type KanbanSortableListProps, type KanbanSubgroupBandHeaderContext, KanbanSubgroupBoard, type KanbanSubgroupBoardProps, type KanbanSubgroupCellContext, type KanbanSubgroupCollapsedBandCellContext, type KanbanSubgroupColumnHeaderContext, type KanbanSubgroupLaneColumnActionContext, type KanbanSubgroupLaneColumnSummaryContext, type KanbanSubgroupLaneIdentityContext, KanbanVirtualCell, type KanbanVirtualCellPagination, type KanbanVirtualCellProps, type KanbanVirtualCellSortableContext, type KanbanVirtualScrollRequest, Label, MenuPreviewLayout, MenuSection, OUTLINE_EMPHASIS, OVERLAY_COLLISION_PADDING, OVERLAY_LAYER_CLASS_NAMES, OptionColor, type OrderKanbanCellsByColumnsParams, OutlineEmphasis, OutlineItem, OutlineRail, OutlineRailProps, OverlayLayer, PROPERTY_ROW_GRID, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverClose, PopoverPopup as PopoverContent, PopoverPopup, PopoverCreateHandle, PopoverDescription, PopoverPanel, PopoverTitle, PopoverTrigger, PreviewCardPrimitive, PreviewPane, type RegisterKanbanBoardAutoScrollOptions, type RegisterKanbanCardDragOptions, type ResolveKanbanGroupValueParams, type ResolveKanbanGroupingParams, ResourceCalendar, type ResourceCalendarColumn, type ResourceCalendarEntry, type ResourceCalendarEntryTone, type ResourceCalendarLaneLayout, type ResourceCalendarLanePlacement, type ResourceCalendarPlacement, type ResourceCalendarResource, ReviewAuthorAvatar, ReviewCommentAuthor, ReviewCommentCard, ReviewDecisionActions, ReviewDecisionSize, ReviewDecisionState, ReviewDiffDeletion, ReviewDiffInsertion, ReviewDiffSegment, ReviewDiffSegmentType, ReviewDiffText, ReviewOutOfDateNotice, ReviewOutOfDateReason, ReviewOutOfDateTone, ReviewSeverityDot, ReviewSeverityLevel, ReviewStatusBadge, ReviewStatusDot, ReviewStatusSize, ReviewStatusTone, ReviewStatusVariant, SHELL_CHROME_LAYER_CLASS_NAME, SIDEBAR_WIDTH_ICON_PX, SIDEBAR_WIDTH_PX, SIDE_RAIL_CONTAINER_CLASS, SIDE_RAIL_ICON_BUTTON_SIZE, SIDE_RAIL_TAB_ICON_SIZE, SIDE_RAIL_WIDTH, ScrollArea, ScrollBar, ScrollToTop, ScrollToTopProps, SecretInput, type SecretInputProps, SegmentedIconToggle, Select, SelectPopup as SelectContent, SelectPopup, SelectGroup, SelectGroupLabel, SelectItem, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetBackdrop, SheetBackdrop as SheetOverlay, SheetClose, SheetPopup as SheetContent, SheetPopup, SheetDescription, SheetFooter, SheetHeader, SheetPanel, SheetPortal, type SheetSide, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, type SortDirection, SortableHead, StellaMark, StellaWordmarkLatin, TOAST_RIGHT_OFFSET_VAR, TOOLBAR_ROW_HEIGHT, TOOLBAR_ROW_HEIGHT_PX, TRACKED_DELETION_STYLE, TRACKED_INSERTION_STYLE, Table, TableBody, TableCaption, TableCell, type TableColumnCapabilities, type TableColumnDescriptor, TableFooter, TableHead, TableHeader, TableRow, type TableSchema, Tabs, TabsPanel as TabsContent, TabsPanel, TabsList, TabsTab, TabsTab as TabsTrigger, TextSeparator, Textarea, type TextareaProps, type ToastPosition, ToastProvider, Tooltip, TooltipPopup as TooltipContent, TooltipPopup, TooltipCreateHandle, TooltipProvider, TooltipTrigger, UNKNOWN_AUTHOR_LABEL, type UseKanbanDropTargetOptions, type UseKanbanSortableOptions, UserText, type WorkspaceCompactNavigation, WorkspaceEndRail, type WorkspaceEndRailChatAction, type WorkspaceEndRailProps, type WorkspaceNavigation, WorkspaceShell, type WorkspaceShellProps, type WorkspaceTopBarContext, assertConsecutiveCalendarDates, buildKanbanBoardMatrix, buttonAccessibleDisabledClass, buttonVariants, cn, composeRefs, containedEventHandler, containedHandler, contentDir, createKanbanDropIntent, duplicateColumnIds, emptyColor, entityTabGlyph, findTableColumn, getFirstWeekday, getInitials, getKanbanBoardColumnIdentity, getKanbanBoardLaneIdentity, getKanbanGroupingPropertyId, getKanbanGroups, getKanbanHorizontalEdge, getLocaleWeekInfo, getResourceCalendarPlacement, getWeekendDays, hasKanbanColumnBands, hideableColumnIds, isKanbanGroupingRenderable, isStructuredInputType, kanbanKeyboardCoordinates, layoutResourceCalendarEntries, nextCalendarDate, optionColors, orderKanbanCellsByColumns, outlineEntryText, parsePersistedPaneWidth, registerKanbanBoardAutoScroll, registerKanbanCardDrag, resolveDragWidth, resolveInspectorDockWidth, resolveInspectorPaneMaxWidth, resolveInspectorPaneWidth, resolveKanbanColumnBands, resolveKanbanGroupOptions, resolveKanbanGrouping, resolveKeyboardWidth, resolveOptionColor, reviewDiffSegmentKeys, reviewSeverityTone, selectKanbanCardFieldIds, selectKanbanRows, shouldForceSidebarCollapsed, sortableColumnIds, stellaToast, tableColumnIds, tableColumnSizing, useComboboxFilter, useContentDir, useDestructiveActionConfirmation, useInspectorPaneWidth, useIsMobile, useKanbanDropTarget, useKanbanSortable, useKanbanSortableSensors, useLatest, useSidebar, useSidebarInlineSize, useViewportWidth, visibleColumnIds };
+export { APPLICATION_RAIL_BUTTON_SIZE, APPLICATION_RAIL_ICON_SIZE, APPLICATION_RAIL_WIDTH, Accordion, AccordionPanel as AccordionContent, AccordionPanel, AccordionItem, AccordionTrigger, AlertDialog, AlertDialogBackdrop, AlertDialogBackdrop as AlertDialogOverlay, AlertDialogClose, AlertDialogPopup as AlertDialogContent, AlertDialogPopup, AlertDialogCreateHandle, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPanel, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertDialogViewport, AnchoredToastProvider, ApplicationRail, ApplicationRailButton, ApplicationRailContent, ApplicationRailFooter, ApplicationRailHeader, ApplicationRailMenu, ApplicationRailSeparator, Avatar, AvatarFallback, AvatarImage, BOARD_DRAG_OVERLAY_Z_INDEX, type BidiDirection, BidiText, type BidiTextProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, type BuildKanbanBoardMatrixParams, Button, CONTROL_SIZE, CONTROL_SIZES, CalendarCell, type CalendarDateRange, CalendarEntryButton, CalendarEntrySurface, CalendarGrid, CalendarHeaderCell, CalendarHeaderRow, Checkbox, ColorPicker, ColorPickerContent, type ColorPickerContentProps, type ColorPickerProps, type ColorPreset, ColorVariants, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxClear, ComboboxCollection, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, ComboboxPopup, ComboboxRow, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue, Command, CommandCollection, CommandDialog, CommandDialogPopup, CommandDialogTrigger, CommandEmpty, CommandFooter, CommandGroup, CommandGroupLabel, CommandInput, CommandItem, CommandList, CommandPanel, CommandSeparator, CommandShortcut, type ControlSize, type CreateKanbanDropIntentParams, DEFAULT_PRESETS, DataTable, type DataTableAriaSort, type DataTableColumn, type DataTableProps, type DataTableRowAction, DatePickerPopover, type DatePickerPopoverProps, DestructiveActionConfirmation, DestructiveConfirmDialog, type DestructiveConfirmDialogProps, Dialog, DialogBackdrop, DialogBackdrop as DialogOverlay, DialogClose, DialogPopup as DialogContent, DialogPopup, DialogCreateHandle, DialogDescription, DialogFooter, DialogHeader, DialogPanel, DialogPortal, DialogTitle, DialogTrigger, DialogViewport, DirectionalIcon, DiscordLogoIcon, Menu as DropdownMenu, Menu, MenuCheckboxItem as DropdownMenuCheckboxItem, MenuCheckboxItem, MenuPopup as DropdownMenuContent, MenuPopup, MenuCreateHandle as DropdownMenuCreateHandle, MenuCreateHandle, MenuGroup as DropdownMenuGroup, MenuGroup, MenuItem as DropdownMenuItem, MenuItem, MenuGroupLabel as DropdownMenuLabel, MenuGroupLabel, MenuPortal as DropdownMenuPortal, MenuPortal, MenuRadioGroup as DropdownMenuRadioGroup, MenuRadioGroup, MenuRadioItem as DropdownMenuRadioItem, MenuRadioItem, MenuSeparator as DropdownMenuSeparator, MenuSeparator, MenuShortcut as DropdownMenuShortcut, MenuShortcut, MenuSub as DropdownMenuSub, MenuSub, MenuSubPopup as DropdownMenuSubContent, MenuSubPopup, MenuSubTrigger as DropdownMenuSubTrigger, MenuSubTrigger, MenuTrigger as DropdownMenuTrigger, MenuTrigger, Field, FieldControl, FieldDescription, FieldError, FieldItem, FieldLabel, FieldValidity, FileInput, type FileInputProps, Form, Frame, FrameDescription, FrameFooter, FrameHeader, FramePanel, FrameTitle, GitHubLogoIcon, HexColorPicker, type HexColorPickerProps, PreviewCard as HoverCard, PreviewCard, PreviewCardPopup as HoverCardContent, PreviewCardPopup, PreviewCardTrigger as HoverCardTrigger, PreviewCardTrigger, INSPECTOR_CONTENT_MIN_WIDTH, INSPECTOR_EDITOR_MIN_WIDTH, INSPECTOR_PANE_DEFAULT_WIDTH, INSPECTOR_PANE_KEYBOARD_PAGE_STEP, INSPECTOR_PANE_KEYBOARD_STEP, INSPECTOR_PANE_MAX_WIDTH, INSPECTOR_PANE_MIN_WIDTH, INSPECTOR_RAIL_WIDTH, Input, InputGroup, InputGroupAddon, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputProps, Inspector, InspectorActions, InspectorContent, InspectorDescription, InspectorDock, type InspectorDockMount, InspectorEmptyRow, InspectorEntityTab, type InspectorEntityTabInactiveIcon, InspectorFacetBar, InspectorHeader, InspectorHeaderText, InspectorProperty, InspectorPropertyLabel, InspectorPropertyList, InspectorPropertyValue, InspectorRail, InspectorRailCell, InspectorRailContent, InspectorRailFooter, InspectorRailIconButton, InspectorRailTab, InspectorSection, InspectorSectionTitle, InspectorTitle, KANBAN_BAND_CAPTION_ROW_HEIGHT, KANBAN_BAND_CAPTION_ROW_HEIGHT_PX, KANBAN_BAND_PEEK_DELAY_MS, KANBAN_BAND_PEEK_LINGER_MS, KANBAN_BOARD_AUTO_SCROLL_OPTIONS, KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_BOARD_AXES, KANBAN_BOARD_COLLISION_DETECTION, KANBAN_CARD_DRAG_MIME, KANBAN_CARD_STICKY_TOP_VAR, KANBAN_CHROME_ROW_HEIGHT, KANBAN_CHROME_ROW_HEIGHT_PX, KANBAN_COLLAPSED_BAND_WIDTH_CLASS, KANBAN_COLLAPSED_BAND_WIDTH_PX, KANBAN_COLUMN_GAP_PX, KANBAN_COLUMN_WIDTH_CLASS, KANBAN_COLUMN_WIDTH_PX, KANBAN_DIRECTIONS, KANBAN_DRAG_OVERLAY_Z_INDEX, KANBAN_HORIZONTAL_EDGES, KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_SORTABLE_ACTIVATION_MODES, KANBAN_STICKY_TOP_VAR, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, KANBAN_VIRTUAL_CELL_PAGINATION, type KanbanBandToggleActivation, type KanbanBoardAxis, type KanbanBoardCell, type KanbanBoardColumn, type KanbanBoardCoordinate, type KanbanBoardDestination, type KanbanBoardLane, type KanbanBoardMatrix, type KanbanBuiltInGroup, KanbanCardDragSurface, type KanbanCardDragSurfaceProps, type KanbanCardFieldSelection, KanbanCardShell, type KanbanCardShellProps, KanbanCellAction, type KanbanCellActionProps, type KanbanCellVirtualNavigation, KanbanCollapsedBandCaption, type KanbanCollapsedBandCaptionProps, type KanbanColumnBand, KanbanColumnBandHeader, type KanbanColumnBandHeaderProps, type KanbanColumnBandSpan, KanbanColumnHeader, type KanbanColumnHeaderProps, type KanbanDirection, type KanbanDragCancelEvent, type KanbanDragEndEvent, KanbanDragHandle, type KanbanDragHandleProps, type KanbanDragOverEvent, type KanbanDragStartEvent, type KanbanDropAxisChange, type KanbanDropIntent, type KanbanGroup, type KanbanGroupOption, type KanbanGrouping, type KanbanHorizontalEdge, type KanbanSchema, type KanbanSortableActivationMode, type KanbanSortableBindings, KanbanSortableBoard, type KanbanSortableBoardProps, type KanbanSortableCellPosition, KanbanSortableColumns, type KanbanSortableColumnsProps, KanbanSortableList, type KanbanSortableListProps, type KanbanSubgroupBandHeaderContext, KanbanSubgroupBoard, type KanbanSubgroupBoardProps, type KanbanSubgroupCellContext, type KanbanSubgroupCollapsedBandCellContext, type KanbanSubgroupColumnHeaderContext, type KanbanSubgroupLaneColumnActionContext, type KanbanSubgroupLaneColumnSummaryContext, type KanbanSubgroupLaneIdentityContext, KanbanVirtualCell, type KanbanVirtualCellPagination, type KanbanVirtualCellProps, type KanbanVirtualCellSortableContext, type KanbanVirtualScrollRequest, Label, List, ListEmpty, ListGroup, ListGroupAction, ListGroupCount, ListGroupDescription, ListGroupHeader, ListGroupHeading, ListGroupTitle, ListItem, ListItemActions, ListItemContent, ListItemDescription, ListItemMedia, ListItemStatus, ListItemTitle, MenuPreviewLayout, MenuSection, OUTLINE_EMPHASIS, OVERLAY_COLLISION_PADDING, OVERLAY_LAYER_CLASS_NAMES, OptionColor, type OrderKanbanCellsByColumnsParams, OutlineEmphasis, OutlineItem, OutlineRail, OutlineRailProps, OverlayLayer, PROPERTY_ROW_GRID, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverClose, PopoverPopup as PopoverContent, PopoverPopup, PopoverCreateHandle, PopoverDescription, PopoverPanel, PopoverTitle, PopoverTrigger, PreviewCardPrimitive, PreviewPane, type RegisterKanbanBoardAutoScrollOptions, type RegisterKanbanCardDragOptions, type ResolveKanbanGroupValueParams, type ResolveKanbanGroupingParams, ResourceCalendar, type ResourceCalendarColumn, type ResourceCalendarEntry, type ResourceCalendarEntryTone, type ResourceCalendarLaneLayout, type ResourceCalendarLanePlacement, type ResourceCalendarPlacement, type ResourceCalendarResource, ReviewAuthorAvatar, ReviewCommentAuthor, ReviewCommentCard, ReviewDecisionActions, ReviewDecisionSize, ReviewDecisionState, ReviewDiffDeletion, ReviewDiffInsertion, ReviewDiffSegment, ReviewDiffSegmentType, ReviewDiffText, ReviewOutOfDateNotice, ReviewOutOfDateReason, ReviewOutOfDateTone, ReviewSeverityDot, ReviewSeverityLevel, ReviewStatusBadge, ReviewStatusDot, ReviewStatusSize, ReviewStatusTone, ReviewStatusVariant, SHELL_CHROME_LAYER_CLASS_NAME, SIDEBAR_WIDTH_ICON_PX, SIDEBAR_WIDTH_PX, SIDE_RAIL_CONTAINER_CLASS, SIDE_RAIL_ICON_BUTTON_SIZE, SIDE_RAIL_TAB_ICON_SIZE, SIDE_RAIL_WIDTH, ScrollArea, ScrollBar, ScrollToTop, ScrollToTopProps, SearchField, type SearchFieldProps, SecretInput, type SecretInputProps, SegmentedIconToggle, Select, SelectPopup as SelectContent, SelectPopup, SelectGroup, SelectGroupLabel, SelectItem, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetBackdrop, SheetBackdrop as SheetOverlay, SheetClose, SheetPopup as SheetContent, SheetPopup, SheetDescription, SheetFooter, SheetHeader, SheetPanel, SheetPortal, type SheetSide, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, type SortDirection, SortableHead, type StatusTone, StellaMark, StellaWordmarkLatin, TOAST_RIGHT_OFFSET_VAR, TOOLBAR_ROW_HEIGHT, TOOLBAR_ROW_HEIGHT_PX, TRACKED_DELETION_STYLE, TRACKED_INSERTION_STYLE, Table, TableBody, TableCaption, TableCell, type TableColumnCapabilities, type TableColumnDescriptor, TableFooter, TableHead, TableHeader, TableRow, type TableSchema, Tabs, TabsPanel as TabsContent, TabsPanel, TabsList, TabsTab, TabsTab as TabsTrigger, TextSeparator, Textarea, type TextareaProps, type ToastPosition, ToastProvider, Tooltip, TooltipPopup as TooltipContent, TooltipPopup, TooltipCreateHandle, TooltipProvider, TooltipTrigger, UNKNOWN_AUTHOR_LABEL, type UseKanbanDropTargetOptions, type UseKanbanSortableOptions, UserText, type WorkspaceCompactNavigation, WorkspaceEndRail, type WorkspaceEndRailChatAction, type WorkspaceEndRailProps, type WorkspaceNavigation, WorkspaceShell, type WorkspaceShellProps, type WorkspaceTopBarContext, assertConsecutiveCalendarDates, buildKanbanBoardMatrix, buttonAccessibleDisabledClass, buttonVariants, cn, composeRefs, containedEventHandler, containedHandler, contentDir, createKanbanDropIntent, duplicateColumnIds, emptyColor, entityTabGlyph, findTableColumn, getFirstWeekday, getInitials, getKanbanBoardColumnIdentity, getKanbanBoardLaneIdentity, getKanbanGroupingPropertyId, getKanbanGroups, getKanbanHorizontalEdge, getLocaleWeekInfo, getResourceCalendarPlacement, getWeekendDays, hasKanbanColumnBands, hideableColumnIds, isKanbanGroupingRenderable, isStructuredInputType, kanbanKeyboardCoordinates, layoutResourceCalendarEntries, nextCalendarDate, optionColors, orderKanbanCellsByColumns, outlineEntryText, parsePersistedPaneWidth, registerKanbanBoardAutoScroll, registerKanbanCardDrag, resolveDragWidth, resolveInspectorDockWidth, resolveInspectorPaneMaxWidth, resolveInspectorPaneWidth, resolveKanbanColumnBands, resolveKanbanGroupOptions, resolveKanbanGrouping, resolveKeyboardWidth, resolveOptionColor, reviewDiffSegmentKeys, reviewSeverityTone, selectKanbanCardFieldIds, selectKanbanRows, shouldForceSidebarCollapsed, sidebarIdentityTriggerClassName, sortableColumnIds, stellaToast, tableColumnIds, tableColumnSizing, useComboboxFilter, useContentDir, useDestructiveActionConfirmation, useInspectorPaneWidth, useIsMobile, useKanbanDropTarget, useKanbanSortable, useKanbanSortableSensors, useLatest, useSidebar, useSidebarInlineSize, useSidebarLayout, useViewportWidth, visibleColumnIds };

package/dist/index.js

@@ -41,6 +41,8 @@ import { useLatest } from "./hooks/use-latest.js";
 import { HexColorPicker } from "./components/hex-color-picker.js";
 import { Textarea } from "./components/textarea.js";
 import { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText, InputGroupTextarea } from "./components/input-group.js";
+import { List, ListEmpty, ListGroup, ListGroupAction, ListGroupCount, ListGroupDescription, ListGroupHeader, ListGroupHeading, ListGroupTitle, ListItem, ListItemActions, ListItemContent, ListItemDescription, ListItemMedia, ListItemStatus, ListItemTitle } from "./components/list.js";
+import { SearchField } from "./components/search-field.js";
 import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from "./components/input-otp.js";
 import { Label } from "./components/label.js";
 import { DropdownMenu as Menu, DropdownMenuCheckboxItem as MenuCheckboxItem, DropdownMenuContent as MenuPopup, DropdownMenuCreateHandle as MenuCreateHandle, DropdownMenuGroup as MenuGroup, DropdownMenuItem as MenuItem, DropdownMenuLabel as MenuGroupLabel, DropdownMenuPortal as MenuPortal, DropdownMenuRadioGroup as MenuRadioGroup, DropdownMenuRadioItem as MenuRadioItem, DropdownMenuSeparator as MenuSeparator, DropdownMenuShortcut as MenuShortcut, DropdownMenuSub as MenuSub, DropdownMenuSubContent as MenuSubPopup, DropdownMenuSubTrigger as MenuSubTrigger, DropdownMenuTrigger as MenuTrigger } from "./components/menu.js";
@@ -55,7 +57,7 @@ import { SegmentedIconToggle } from "./components/segmented-icon-toggle.js";
 import { Select, SelectContent as SelectPopup, SelectGroup, SelectGroupLabel, SelectItem, SelectSeparator, SelectTrigger, SelectValue } from "./components/select.js";
 import { Separator, TextSeparator } from "./components/separator.js";
 import { Skeleton } from "./components/skeleton.js";
-import { SIDEBAR_WIDTH_ICON_PX, SIDEBAR_WIDTH_PX, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar, useSidebarInlineSize } from "./components/sidebar.js";
+import { SIDEBAR_WIDTH_ICON_PX, SIDEBAR_WIDTH_PX, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, sidebarIdentityTriggerClassName, useSidebar, useSidebarInlineSize, useSidebarLayout } from "./components/sidebar.js";
 import { StellaMark } from "./components/stella-mark.js";
 import { StellaWordmarkLatin } from "./components/stella-wordmark.js";
 import { SortableHead, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "./components/table.js";
@@ -95,4 +97,4 @@ import { ReviewDiffDeletion, ReviewDiffInsertion, ReviewDiffText, TRACKED_DELETI
 import { ReviewOutOfDateNotice } from "./review/review-out-of-date-notice.js";
 import { ReviewSeverityDot, ReviewStatusDot, reviewSeverityTone } from "./review/review-severity-dot.js";
 import { ReviewStatusBadge } from "./review/review-status-badge.js";
-export { APPLICATION_RAIL_BUTTON_SIZE, APPLICATION_RAIL_ICON_SIZE, APPLICATION_RAIL_WIDTH, Accordion, AccordionPanel as AccordionContent, AccordionPanel, AccordionItem, AccordionTrigger, AlertDialog, AlertDialogBackdrop, AlertDialogBackdrop as AlertDialogOverlay, AlertDialogClose, AlertDialogPopup as AlertDialogContent, AlertDialogPopup, AlertDialogCreateHandle, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPanel, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertDialogViewport, AnchoredToastProvider, ApplicationRail, ApplicationRailButton, ApplicationRailContent, ApplicationRailFooter, ApplicationRailHeader, ApplicationRailMenu, ApplicationRailSeparator, Avatar, AvatarFallback, AvatarImage, BOARD_DRAG_OVERLAY_Z_INDEX, BidiText, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, CONTROL_SIZE, CONTROL_SIZES, CalendarCell, CalendarEntryButton, CalendarEntrySurface, CalendarGrid, CalendarHeaderCell, CalendarHeaderRow, Checkbox, ColorPicker, ColorPickerContent, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxClear, ComboboxCollection, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, ComboboxPopup, ComboboxRow, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue, Command, CommandCollection, CommandDialog, CommandDialogPopup, CommandDialogTrigger, CommandEmpty, CommandFooter, CommandGroup, CommandGroupLabel, CommandInput, CommandItem, CommandList, CommandPanel, CommandSeparator, CommandShortcut, DEFAULT_PRESETS, DataTable, DatePickerPopover, DestructiveActionConfirmation, DestructiveConfirmDialog, Dialog, DialogBackdrop, DialogBackdrop as DialogOverlay, DialogClose, DialogPopup as DialogContent, DialogPopup, DialogCreateHandle, DialogDescription, DialogFooter, DialogHeader, DialogPanel, DialogPortal, DialogTitle, DialogTrigger, DialogViewport, DirectionalIcon, DiscordLogoIcon, Menu as DropdownMenu, Menu, MenuCheckboxItem as DropdownMenuCheckboxItem, MenuCheckboxItem, MenuPopup as DropdownMenuContent, MenuPopup, MenuCreateHandle as DropdownMenuCreateHandle, MenuCreateHandle, MenuGroup as DropdownMenuGroup, MenuGroup, MenuItem as DropdownMenuItem, MenuItem, MenuGroupLabel as DropdownMenuLabel, MenuGroupLabel, MenuPortal as DropdownMenuPortal, MenuPortal, MenuRadioGroup as DropdownMenuRadioGroup, MenuRadioGroup, MenuRadioItem as DropdownMenuRadioItem, MenuRadioItem, MenuSeparator as DropdownMenuSeparator, MenuSeparator, MenuShortcut as DropdownMenuShortcut, MenuShortcut, MenuSub as DropdownMenuSub, MenuSub, MenuSubPopup as DropdownMenuSubContent, MenuSubPopup, MenuSubTrigger as DropdownMenuSubTrigger, MenuSubTrigger, MenuTrigger as DropdownMenuTrigger, MenuTrigger, Field, FieldControl, FieldDescription, FieldError, FieldItem, FieldLabel, FieldValidity, FileInput, Form, Frame, FrameDescription, FrameFooter, FrameHeader, FramePanel, FrameTitle, GitHubLogoIcon, HexColorPicker, PreviewCard as HoverCard, PreviewCard, PreviewCardPopup as HoverCardContent, PreviewCardPopup, PreviewCardTrigger as HoverCardTrigger, PreviewCardTrigger, INSPECTOR_CONTENT_MIN_WIDTH, INSPECTOR_EDITOR_MIN_WIDTH, INSPECTOR_PANE_DEFAULT_WIDTH, INSPECTOR_PANE_KEYBOARD_PAGE_STEP, INSPECTOR_PANE_KEYBOARD_STEP, INSPECTOR_PANE_MAX_WIDTH, INSPECTOR_PANE_MIN_WIDTH, INSPECTOR_RAIL_WIDTH, Input, InputGroup, InputGroupAddon, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Inspector, InspectorActions, InspectorContent, InspectorDescription, InspectorDock, InspectorEmptyRow, InspectorEntityTab, InspectorFacetBar, InspectorHeader, InspectorHeaderText, InspectorProperty, InspectorPropertyLabel, InspectorPropertyList, InspectorPropertyValue, InspectorRail, InspectorRailCell, InspectorRailContent, InspectorRailFooter, InspectorRailIconButton, InspectorRailTab, InspectorSection, InspectorSectionTitle, InspectorTitle, KANBAN_BAND_CAPTION_ROW_HEIGHT, KANBAN_BAND_CAPTION_ROW_HEIGHT_PX, KANBAN_BAND_PEEK_DELAY_MS, KANBAN_BAND_PEEK_LINGER_MS, KANBAN_BOARD_AUTO_SCROLL_OPTIONS, KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_BOARD_AXES, KANBAN_BOARD_COLLISION_DETECTION, KANBAN_CARD_DRAG_MIME, KANBAN_CARD_STICKY_TOP_VAR, KANBAN_CHROME_ROW_HEIGHT, KANBAN_CHROME_ROW_HEIGHT_PX, KANBAN_COLLAPSED_BAND_WIDTH_CLASS, KANBAN_COLLAPSED_BAND_WIDTH_PX, KANBAN_COLUMN_GAP_PX, KANBAN_COLUMN_WIDTH_CLASS, KANBAN_COLUMN_WIDTH_PX, KANBAN_DIRECTIONS, KANBAN_DRAG_OVERLAY_Z_INDEX, KANBAN_HORIZONTAL_EDGES, KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_SORTABLE_ACTIVATION_MODES, KANBAN_STICKY_TOP_VAR, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, KANBAN_VIRTUAL_CELL_PAGINATION, KanbanCardDragSurface, KanbanCardShell, KanbanCellAction, KanbanCollapsedBandCaption, KanbanColumnBandHeader, KanbanColumnHeader, KanbanDragHandle, KanbanSortableBoard, KanbanSortableColumns, KanbanSortableList, KanbanSubgroupBoard, KanbanVirtualCell, Label, MenuPreviewLayout, MenuSection, OUTLINE_EMPHASIS, OVERLAY_COLLISION_PADDING, OVERLAY_LAYER_CLASS_NAMES, OutlineRail, PROPERTY_ROW_GRID, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverClose, PopoverPopup as PopoverContent, PopoverPopup, PopoverCreateHandle, PopoverDescription, PopoverPanel, PopoverTitle, PopoverTrigger, PreviewCardPrimitive, PreviewPane, ResourceCalendar, ReviewAuthorAvatar, ReviewCommentCard, ReviewDecisionActions, ReviewDiffDeletion, ReviewDiffInsertion, ReviewDiffText, ReviewOutOfDateNotice, ReviewSeverityDot, ReviewStatusBadge, ReviewStatusDot, SHELL_CHROME_LAYER_CLASS_NAME, SIDEBAR_WIDTH_ICON_PX, SIDEBAR_WIDTH_PX, SIDE_RAIL_CONTAINER_CLASS, SIDE_RAIL_ICON_BUTTON_SIZE, SIDE_RAIL_TAB_ICON_SIZE, SIDE_RAIL_WIDTH, ScrollArea, ScrollBar, ScrollToTop, SecretInput, SegmentedIconToggle, Select, SelectPopup as SelectContent, SelectPopup, SelectGroup, SelectGroupLabel, SelectItem, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetBackdrop, SheetBackdrop as SheetOverlay, SheetClose, SheetPopup as SheetContent, SheetPopup, SheetDescription, SheetFooter, SheetHeader, SheetPanel, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, SortableHead, StellaMark, StellaWordmarkLatin, TOAST_RIGHT_OFFSET_VAR, TOOLBAR_ROW_HEIGHT, TOOLBAR_ROW_HEIGHT_PX, TRACKED_DELETION_STYLE, TRACKED_INSERTION_STYLE, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsPanel as TabsContent, TabsPanel, TabsList, TabsTab, TabsTab as TabsTrigger, TextSeparator, Textarea, ToastProvider, Tooltip, TooltipPopup as TooltipContent, TooltipPopup, TooltipCreateHandle, TooltipProvider, TooltipTrigger, UNKNOWN_AUTHOR_LABEL, UserText, WorkspaceEndRail, WorkspaceShell, assertConsecutiveCalendarDates, buildKanbanBoardMatrix, buttonAccessibleDisabledClass, buttonVariants, cn, composeRefs, containedEventHandler, containedHandler, contentDir, createKanbanDropIntent, duplicateColumnIds, emptyColor, entityTabGlyph, findTableColumn, getFirstWeekday, getInitials, getKanbanBoardColumnIdentity, getKanbanBoardLaneIdentity, getKanbanGroupingPropertyId, getKanbanGroups, getKanbanHorizontalEdge, getLocaleWeekInfo, getResourceCalendarPlacement, getWeekendDays, hasKanbanColumnBands, hideableColumnIds, isKanbanGroupingRenderable, isStructuredInputType, kanbanKeyboardCoordinates, layoutResourceCalendarEntries, nextCalendarDate, optionColors, orderKanbanCellsByColumns, outlineEntryText, parsePersistedPaneWidth, registerKanbanBoardAutoScroll, registerKanbanCardDrag, resolveDragWidth, resolveInspectorDockWidth, resolveInspectorPaneMaxWidth, resolveInspectorPaneWidth, resolveKanbanColumnBands, resolveKanbanGroupOptions, resolveKanbanGrouping, resolveKeyboardWidth, resolveOptionColor, reviewDiffSegmentKeys, reviewSeverityTone, selectKanbanCardFieldIds, selectKanbanRows, shouldForceSidebarCollapsed, sortableColumnIds, stellaToast, tableColumnIds, tableColumnSizing, useComboboxFilter, useContentDir, useDestructiveActionConfirmation, useInspectorPaneWidth, useIsMobile, useKanbanDropTarget, useKanbanSortable, useKanbanSortableSensors, useLatest, useSidebar, useSidebarInlineSize, useViewportWidth, visibleColumnIds };
+export { APPLICATION_RAIL_BUTTON_SIZE, APPLICATION_RAIL_ICON_SIZE, APPLICATION_RAIL_WIDTH, Accordion, AccordionPanel as AccordionContent, AccordionPanel, AccordionItem, AccordionTrigger, AlertDialog, AlertDialogBackdrop, AlertDialogBackdrop as AlertDialogOverlay, AlertDialogClose, AlertDialogPopup as AlertDialogContent, AlertDialogPopup, AlertDialogCreateHandle, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPanel, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertDialogViewport, AnchoredToastProvider, ApplicationRail, ApplicationRailButton, ApplicationRailContent, ApplicationRailFooter, ApplicationRailHeader, ApplicationRailMenu, ApplicationRailSeparator, Avatar, AvatarFallback, AvatarImage, BOARD_DRAG_OVERLAY_Z_INDEX, BidiText, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, CONTROL_SIZE, CONTROL_SIZES, CalendarCell, CalendarEntryButton, CalendarEntrySurface, CalendarGrid, CalendarHeaderCell, CalendarHeaderRow, Checkbox, ColorPicker, ColorPickerContent, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxClear, ComboboxCollection, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, ComboboxPopup, ComboboxRow, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue, Command, CommandCollection, CommandDialog, CommandDialogPopup, CommandDialogTrigger, CommandEmpty, CommandFooter, CommandGroup, CommandGroupLabel, CommandInput, CommandItem, CommandList, CommandPanel, CommandSeparator, CommandShortcut, DEFAULT_PRESETS, DataTable, DatePickerPopover, DestructiveActionConfirmation, DestructiveConfirmDialog, Dialog, DialogBackdrop, DialogBackdrop as DialogOverlay, DialogClose, DialogPopup as DialogContent, DialogPopup, DialogCreateHandle, DialogDescription, DialogFooter, DialogHeader, DialogPanel, DialogPortal, DialogTitle, DialogTrigger, DialogViewport, DirectionalIcon, DiscordLogoIcon, Menu as DropdownMenu, Menu, MenuCheckboxItem as DropdownMenuCheckboxItem, MenuCheckboxItem, MenuPopup as DropdownMenuContent, MenuPopup, MenuCreateHandle as DropdownMenuCreateHandle, MenuCreateHandle, MenuGroup as DropdownMenuGroup, MenuGroup, MenuItem as DropdownMenuItem, MenuItem, MenuGroupLabel as DropdownMenuLabel, MenuGroupLabel, MenuPortal as DropdownMenuPortal, MenuPortal, MenuRadioGroup as DropdownMenuRadioGroup, MenuRadioGroup, MenuRadioItem as DropdownMenuRadioItem, MenuRadioItem, MenuSeparator as DropdownMenuSeparator, MenuSeparator, MenuShortcut as DropdownMenuShortcut, MenuShortcut, MenuSub as DropdownMenuSub, MenuSub, MenuSubPopup as DropdownMenuSubContent, MenuSubPopup, MenuSubTrigger as DropdownMenuSubTrigger, MenuSubTrigger, MenuTrigger as DropdownMenuTrigger, MenuTrigger, Field, FieldControl, FieldDescription, FieldError, FieldItem, FieldLabel, FieldValidity, FileInput, Form, Frame, FrameDescription, FrameFooter, FrameHeader, FramePanel, FrameTitle, GitHubLogoIcon, HexColorPicker, PreviewCard as HoverCard, PreviewCard, PreviewCardPopup as HoverCardContent, PreviewCardPopup, PreviewCardTrigger as HoverCardTrigger, PreviewCardTrigger, INSPECTOR_CONTENT_MIN_WIDTH, INSPECTOR_EDITOR_MIN_WIDTH, INSPECTOR_PANE_DEFAULT_WIDTH, INSPECTOR_PANE_KEYBOARD_PAGE_STEP, INSPECTOR_PANE_KEYBOARD_STEP, INSPECTOR_PANE_MAX_WIDTH, INSPECTOR_PANE_MIN_WIDTH, INSPECTOR_RAIL_WIDTH, Input, InputGroup, InputGroupAddon, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Inspector, InspectorActions, InspectorContent, InspectorDescription, InspectorDock, InspectorEmptyRow, InspectorEntityTab, InspectorFacetBar, InspectorHeader, InspectorHeaderText, InspectorProperty, InspectorPropertyLabel, InspectorPropertyList, InspectorPropertyValue, InspectorRail, InspectorRailCell, InspectorRailContent, InspectorRailFooter, InspectorRailIconButton, InspectorRailTab, InspectorSection, InspectorSectionTitle, InspectorTitle, KANBAN_BAND_CAPTION_ROW_HEIGHT, KANBAN_BAND_CAPTION_ROW_HEIGHT_PX, KANBAN_BAND_PEEK_DELAY_MS, KANBAN_BAND_PEEK_LINGER_MS, KANBAN_BOARD_AUTO_SCROLL_OPTIONS, KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_BOARD_AXES, KANBAN_BOARD_COLLISION_DETECTION, KANBAN_CARD_DRAG_MIME, KANBAN_CARD_STICKY_TOP_VAR, KANBAN_CHROME_ROW_HEIGHT, KANBAN_CHROME_ROW_HEIGHT_PX, KANBAN_COLLAPSED_BAND_WIDTH_CLASS, KANBAN_COLLAPSED_BAND_WIDTH_PX, KANBAN_COLUMN_GAP_PX, KANBAN_COLUMN_WIDTH_CLASS, KANBAN_COLUMN_WIDTH_PX, KANBAN_DIRECTIONS, KANBAN_DRAG_OVERLAY_Z_INDEX, KANBAN_HORIZONTAL_EDGES, KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_SORTABLE_ACTIVATION_MODES, KANBAN_STICKY_TOP_VAR, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, KANBAN_VIRTUAL_CELL_PAGINATION, KanbanCardDragSurface, KanbanCardShell, KanbanCellAction, KanbanCollapsedBandCaption, KanbanColumnBandHeader, KanbanColumnHeader, KanbanDragHandle, KanbanSortableBoard, KanbanSortableColumns, KanbanSortableList, KanbanSubgroupBoard, KanbanVirtualCell, Label, List, ListEmpty, ListGroup, ListGroupAction, ListGroupCount, ListGroupDescription, ListGroupHeader, ListGroupHeading, ListGroupTitle, ListItem, ListItemActions, ListItemContent, ListItemDescription, ListItemMedia, ListItemStatus, ListItemTitle, MenuPreviewLayout, MenuSection, OUTLINE_EMPHASIS, OVERLAY_COLLISION_PADDING, OVERLAY_LAYER_CLASS_NAMES, OutlineRail, PROPERTY_ROW_GRID, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverClose, PopoverPopup as PopoverContent, PopoverPopup, PopoverCreateHandle, PopoverDescription, PopoverPanel, PopoverTitle, PopoverTrigger, PreviewCardPrimitive, PreviewPane, ResourceCalendar, ReviewAuthorAvatar, ReviewCommentCard, ReviewDecisionActions, ReviewDiffDeletion, ReviewDiffInsertion, ReviewDiffText, ReviewOutOfDateNotice, ReviewSeverityDot, ReviewStatusBadge, ReviewStatusDot, SHELL_CHROME_LAYER_CLASS_NAME, SIDEBAR_WIDTH_ICON_PX, SIDEBAR_WIDTH_PX, SIDE_RAIL_CONTAINER_CLASS, SIDE_RAIL_ICON_BUTTON_SIZE, SIDE_RAIL_TAB_ICON_SIZE, SIDE_RAIL_WIDTH, ScrollArea, ScrollBar, ScrollToTop, SearchField, SecretInput, SegmentedIconToggle, Select, SelectPopup as SelectContent, SelectPopup, SelectGroup, SelectGroupLabel, SelectItem, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetBackdrop, SheetBackdrop as SheetOverlay, SheetClose, SheetPopup as SheetContent, SheetPopup, SheetDescription, SheetFooter, SheetHeader, SheetPanel, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, SortableHead, StellaMark, StellaWordmarkLatin, TOAST_RIGHT_OFFSET_VAR, TOOLBAR_ROW_HEIGHT, TOOLBAR_ROW_HEIGHT_PX, TRACKED_DELETION_STYLE, TRACKED_INSERTION_STYLE, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsPanel as TabsContent, TabsPanel, TabsList, TabsTab, TabsTab as TabsTrigger, TextSeparator, Textarea, ToastProvider, Tooltip, TooltipPopup as TooltipContent, TooltipPopup, TooltipCreateHandle, TooltipProvider, TooltipTrigger, UNKNOWN_AUTHOR_LABEL, UserText, WorkspaceEndRail, WorkspaceShell, assertConsecutiveCalendarDates, buildKanbanBoardMatrix, buttonAccessibleDisabledClass, buttonVariants, cn, composeRefs, containedEventHandler, containedHandler, contentDir, createKanbanDropIntent, duplicateColumnIds, emptyColor, entityTabGlyph, findTableColumn, getFirstWeekday, getInitials, getKanbanBoardColumnIdentity, getKanbanBoardLaneIdentity, getKanbanGroupingPropertyId, getKanbanGroups, getKanbanHorizontalEdge, getLocaleWeekInfo, getResourceCalendarPlacement, getWeekendDays, hasKanbanColumnBands, hideableColumnIds, isKanbanGroupingRenderable, isStructuredInputType, kanbanKeyboardCoordinates, layoutResourceCalendarEntries, nextCalendarDate, optionColors, orderKanbanCellsByColumns, outlineEntryText, parsePersistedPaneWidth, registerKanbanBoardAutoScroll, registerKanbanCardDrag, resolveDragWidth, resolveInspectorDockWidth, resolveInspectorPaneMaxWidth, resolveInspectorPaneWidth, resolveKanbanColumnBands, resolveKanbanGroupOptions, resolveKanbanGrouping, resolveKeyboardWidth, resolveOptionColor, reviewDiffSegmentKeys, reviewSeverityTone, selectKanbanCardFieldIds, selectKanbanRows, shouldForceSidebarCollapsed, sidebarIdentityTriggerClassName, sortableColumnIds, stellaToast, tableColumnIds, tableColumnSizing, useComboboxFilter, useContentDir, useDestructiveActionConfirmation, useInspectorPaneWidth, useIsMobile, useKanbanDropTarget, useKanbanSortable, useKanbanSortableSensors, useLatest, useSidebar, useSidebarInlineSize, useSidebarLayout, useViewportWidth, visibleColumnIds };

package/dist/styles/theme.css

@@ -1273,6 +1273,13 @@
   }
 }
 
+/* A page-level scroller whose content height changes while you use it
+ * (filtering, expanding, loading). Reserving the track keeps the scrollbar's
+ * appearing and disappearing from shifting the whole layout sideways. */
+@utility scrollbar-stable {
+  scrollbar-gutter: stable;
+}
+
 /* A scroll container with no scrollbar and no reserved track. For strips
  * whose overflow is signalled another way (an edge fade, a visible partial
  * item): a hover-revealed scrollbar would still reserve its track only when

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stll/ui",
-  "version": "0.37.0",
+  "version": "0.38.0",
   "description": "Stella's design system: bidi-aware React primitives built on Base UI, the dockable inspector pane, and the Tailwind v4 theme they are styled with.",
   "keywords": [
     "base-ui",
@@ -169,6 +169,10 @@
       "types": "./dist/components/input-otp.d.ts",
       "import": "./dist/components/input-otp.js"
     },
+    "./list": {
+      "types": "./dist/components/list.d.ts",
+      "import": "./dist/components/list.js"
+    },
     "./label": {
       "types": "./dist/components/label.d.ts",
       "import": "./dist/components/label.js"
@@ -261,6 +265,10 @@
       "types": "./dist/components/scroll-to-top.d.ts",
       "import": "./dist/components/scroll-to-top.js"
     },
+    "./search-field": {
+      "types": "./dist/components/search-field.d.ts",
+      "import": "./dist/components/search-field.js"
+    },
     "./secret-input": {
       "types": "./dist/components/secret-input.d.ts",
       "import": "./dist/components/secret-input.js"