@stll/ui 0.60.0 → 0.62.0

package/dist/calendar/day-calendar.logic.js

@@ -146,7 +146,7 @@ const slotAt = (ms, options) => rangeFromDrag({
 * member of a cluster shares the cluster's lane count, so their widths match.
 */
 const layoutOverlaps = (ranges) => {
-	const sorted = ranges.toSorted((left, right) => left.startMs - right.startMs || right.endMs - left.endMs || compareIds(left.id, right.id));
+	const sorted = [...ranges].sort((left, right) => left.startMs - right.startMs || right.endMs - left.endMs || compareIds(left.id, right.id));
 	const placements = /* @__PURE__ */ new Map();
 	const seen = /* @__PURE__ */ new Set();
 	let cluster = [];
@@ -186,7 +186,7 @@ const layoutOverlaps = (ranges) => {
 * an earlier entry already uses it.
 */
 const mergeShortSegments = (segments, { thresholdMs }) => {
-	const sorted = segments.toSorted((left, right) => left.startMs - right.startMs || left.endMs - right.endMs || compareIds(left.id, right.id));
+	const sorted = [...segments].sort((left, right) => left.startMs - right.startMs || left.endMs - right.endMs || compareIds(left.id, right.id));
 	const merged = [];
 	const takenIds = new Set(segments.map(({ id }) => id));
 	let run = [];

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

@@ -1,5 +1,12 @@
 import * as React$1 from "react";
 //#region src/components/bidi-text.d.ts
+/**
+ * Isolation shields the text around a value, not the value itself: a
+ * directional control inside it still reorders its letters, so stored text
+ * loses those controls before it renders.
+ */
+export declare const stripDirectionalControls: (text: string) => string;
+export declare const withoutDirectionalControls: (children: React$1.ReactNode) => React$1.ReactNode;
 export declare const BidiText: (props: BidiTextProps) => React$1.JSX.Element;
 export declare const UserText: typeof BidiText;
 type BidiDirection = "auto" | "ltr" | "rtl";

package/dist/components/bidi-text.js

@@ -2,37 +2,50 @@
 import { cn } from "../lib/utils.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/bidi-text.tsx
+/** Explicit embeddings, overrides and isolates; implicit marks stay. */
+const DIRECTIONAL_CONTROLS = /[\u202A-\u202E\u2066-\u2069]/gu;
+/**
+* Isolation shields the text around a value, not the value itself: a
+* directional control inside it still reorders its letters, so stored text
+* loses those controls before it renders.
+*/
+const stripDirectionalControls = (text) => text.replaceAll(DIRECTIONAL_CONTROLS, "");
+const withoutDirectionalControls = (children) => typeof children === "string" ? stripDirectionalControls(children) : children;
 const BidiText = (props) => {
 	if (props.as === "span") {
-		const { as: _as, className, direction = "auto", ...rest } = props;
+		const { as: _as, children, className, direction = "auto", ...rest } = props;
 		return /* @__PURE__ */ jsx("span", {
 			className: cn("[unicode-bidi:isolate]", className),
 			dir: direction,
-			...rest
+			...rest,
+			children: withoutDirectionalControls(children)
 		});
 	}
 	if (props.as === "div") {
-		const { as: _as, className, direction = "auto", ...rest } = props;
+		const { as: _as, children, className, direction = "auto", ...rest } = props;
 		return /* @__PURE__ */ jsx("div", {
 			className: cn("[unicode-bidi:isolate]", className),
 			dir: direction,
-			...rest
+			...rest,
+			children: withoutDirectionalControls(children)
 		});
 	}
 	if (props.as === "p") {
-		const { as: _as, className, direction = "auto", ...rest } = props;
+		const { as: _as, children, className, direction = "auto", ...rest } = props;
 		return /* @__PURE__ */ jsx("p", {
 			className: cn("[unicode-bidi:isolate]", className),
 			dir: direction,
-			...rest
+			...rest,
+			children: withoutDirectionalControls(children)
 		});
 	}
-	const { as: _as, direction = "auto", ...rest } = props;
+	const { as: _as, children, direction = "auto", ...rest } = props;
 	return /* @__PURE__ */ jsx("bdi", {
 		dir: direction,
-		...rest
+		...rest,
+		children: withoutDirectionalControls(children)
 	});
 };
 const UserText = BidiText;
 //#endregion
-export { BidiText, UserText };
+export { BidiText, UserText, stripDirectionalControls, withoutDirectionalControls };

package/dist/components/button.js

@@ -6,6 +6,7 @@ import { MENU_ROW_CLASS_NAME } from "../lib/menu-row.js";
 import { BUTTON_PLAIN_VARIANT, BUTTON_VARIANT_TOKENS } from "./button.shared.js";
 import { Loader } from "./loader.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, isValidElement } from "react";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 import { panic } from "better-result";
@@ -65,7 +66,7 @@ const BUTTON_VARIANT_CLASS_NAMES = {
 	outline: `${tokens("outline")} dark:bg-input/32 data-pressed:border-primary/48 data-pressed:bg-accent dark:data-pressed:bg-input/64 [:hover:not([data-pressed])]:bg-accent/50 dark:[:hover:not([data-pressed])]:bg-input/64 shadow-xs/5 not-dark:bg-clip-padding not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] dark:not-disabled:before:shadow-[0_-1px_--theme(--color-white/2%)] dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [:disabled,:active,[data-pressed]]:shadow-none`,
 	secondary: `${tokens("secondary")} data-pressed:bg-background data-pressed:inset-ring-input active:bg-secondary/80 [:hover:not([data-pressed])]:bg-secondary/90 data-pressed:shadow-xs/5 data-pressed:inset-ring`
 };
-const buttonVariants = cva("focus-visible:ring-ring focus-visible:ring-offset-background relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 rounded-lg border text-base font-medium whitespace-nowrap outline-none select-none before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] focus-visible:ring-2 focus-visible:ring-offset-1 disabled:pointer-events-none disabled:opacity-64 sm:text-sm pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4", {
+const buttonVariants = cva("focus-visible:ring-ring focus-visible:ring-offset-background relative inline-flex max-w-full shrink-0 cursor-pointer items-center justify-center gap-2 rounded-lg border text-base font-medium whitespace-nowrap outline-none select-none before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] focus-visible:ring-2 focus-visible:ring-offset-1 disabled:pointer-events-none disabled:opacity-64 sm:text-sm pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4", {
 	compoundVariants: [{
 		className: "[:hover:not([data-pressed])]:bg-transparent",
 		size: "inline",
@@ -105,7 +106,7 @@ const buttonVariants = cva("focus-visible:ring-ring focus-visible:ring-offset-ba
 * inside the box: an outline paints above the content, so a card's own
 * surface cannot cover it the way it would cover an inset shadow.
 */
-const BUTTON_PLAIN_CLASS = "focus-visible:ring-ring focus-visible:ring-offset-background data-pressed:outline-primary/48 relative inline-block cursor-pointer text-start outline-none focus-visible:ring-2 focus-visible:ring-offset-1 disabled:cursor-default data-pressed:outline-2 data-pressed:-outline-offset-2 data-pressed:outline-solid";
+const BUTTON_PLAIN_CLASS = "focus-visible:ring-ring focus-visible:ring-offset-background data-pressed:outline-primary/48 relative inline-block max-w-full cursor-pointer text-start outline-none focus-visible:ring-2 focus-visible:ring-offset-1 disabled:cursor-default data-pressed:outline-2 data-pressed:-outline-offset-2 data-pressed:outline-solid";
 /**
 * The outline a plain button's focus ring follows, matching its content:
 * `box` for a card, row or block of text (the container radius), `round` for
@@ -148,6 +149,53 @@ const BUTTON_SIZE_CONTENT = {
 	xl: BUTTON_CONTENT.text,
 	xs: BUTTON_CONTENT.text
 };
+/**
+* A button never grows past its container (`max-w-full` on every variant).
+* A one-line text label is cut to fit with an ellipsis; the button's
+* accessible name keeps the whole text, and `tooltip` can show it. The label
+* is a plain span, not a `TruncatedText`: a tooltip root in every button's
+* label would cost every screen with many buttons. `layout="wrap"` lets a
+* label take several lines instead. An inline button is a word in a sentence
+* and a plain button lays out its own content, so neither has a one-line
+* label to cut.
+*/
+const BUTTON_LABEL_CLASS = "block min-w-0 truncate";
+const cutsLabel = ({ layout, size, variant }) => layout === void 0 && variant !== "plain" && variant !== "link" && size !== "inline" && BUTTON_SIZE_CONTENT[size ?? BUTTON_DEFAULT_SIZE] === BUTTON_CONTENT.text;
+/**
+* Each run of adjacent text among the children, cut to the button's width.
+* Adjacent text (`Save {count} files`) stays one run, as it is one flex item
+* in the button's box; children React renders as nothing (`null`, `false`)
+* do not split it. Every other child keeps its place in a fragment keyed by
+* its own key, or by its position when it has none, so keyed children keep
+* their state when they move.
+*/
+const containedLabel = (children) => {
+	const items = Array.isArray(children) ? children : [children];
+	const parts = [];
+	let run = [];
+	const closeRun = () => {
+		if (run.length > 0) {
+			parts.push(/* @__PURE__ */ jsx("span", {
+				className: BUTTON_LABEL_CLASS,
+				"data-slot": "button-label",
+				children: run
+			}, `label:${String(parts.length)}`));
+			run = [];
+		}
+	};
+	for (const child of items) {
+		if (child === null || child === void 0 || typeof child === "boolean") continue;
+		if (typeof child === "string" || typeof child === "number") {
+			run.push(child);
+			continue;
+		}
+		closeRun();
+		const key = isValidElement(child) && child.key !== null ? `key:${child.key}` : `part:${String(parts.length)}`;
+		parts.push(/* @__PURE__ */ jsx(Fragment$1, { children: child }, key));
+	}
+	closeRun();
+	return parts;
+};
 const implicitTooltip = (size, accessibleName) => {
 	const content = BUTTON_SIZE_CONTENT[size ?? BUTTON_DEFAULT_SIZE];
 	switch (content) {
@@ -174,7 +222,11 @@ function Button({ className, variant: variantProp, size, render, layout, loading
 			"data-slot": "button-loader",
 			size: "sm",
 			variant: "decorative"
-		}) : icon, children] }),
+		}) : icon, cutsLabel({
+			layout,
+			size,
+			variant
+		}) ? containedLabel(children) : children] }),
 		className: cn(variant === "plain" ? cn(BUTTON_PLAIN_CLASS, BUTTON_PLAIN_SHAPE_CLASS[shape], className) : cn(disposition === BUTTON_DISPOSITION.enabled && !isActivationPreservingDisabled && size !== "row" && size !== "inline" && variant !== "link" && buttonPressClass, buttonVariants({
 			className,
 			size,

package/dist/components/collapsible.d.ts

@@ -0,0 +1,26 @@
+import { Collapsible as Collapsible$1 } from "@base-ui/react/collapsible";
+//#region src/components/collapsible.d.ts
+/**
+ * One disclosure: a trigger that shows or hides a single panel ("Show
+ * details" under a card, a step list in a transcript). A set of sections
+ * where each heading opens its own panel is an `Accordion`.
+ *
+ * The trigger draws nothing of its own. It takes its look from what it
+ * renders, usually a `Button` (`render={<Button variant="muted" />}` for a
+ * text toggle), so a disclosure reads like every other action of its size.
+ */
+declare const Collapsible: (props: Collapsible$1.Root.Props) => import("react").JSX.Element;
+declare const CollapsibleTrigger: (props: Collapsible$1.Trigger.Props) => import("react").JSX.Element;
+/**
+ * The disclosed content. It adds no padding or type, so opening it reveals
+ * content at the rhythm of the surface around it, as a native `<details>`
+ * does. Its height eases open and shut with the accordion's timing, so the
+ * two disclosures move alike; under reduced motion it snaps.
+ *
+ * Closed, the content stays in the document as `hidden="until-found"` (as a
+ * native `<details>` keeps it), so find-in-page still reaches it and opens
+ * the panel. Pass `hiddenUntilFound={false}` to unmount it instead.
+ */
+declare const CollapsiblePanel: ({ className, hiddenUntilFound, ...props }: Collapsible$1.Panel.Props) => import("react").JSX.Element;
+//#endregion
+export { Collapsible, CollapsiblePanel, CollapsibleTrigger };

package/dist/components/collapsible.js

@@ -0,0 +1,40 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+import { Collapsible as Collapsible$1 } from "@base-ui/react/collapsible";
+//#region src/components/collapsible.tsx
+/**
+* One disclosure: a trigger that shows or hides a single panel ("Show
+* details" under a card, a step list in a transcript). A set of sections
+* where each heading opens its own panel is an `Accordion`.
+*
+* The trigger draws nothing of its own. It takes its look from what it
+* renders, usually a `Button` (`render={<Button variant="muted" />}` for a
+* text toggle), so a disclosure reads like every other action of its size.
+*/
+const Collapsible = (props) => /* @__PURE__ */ jsx(Collapsible$1.Root, {
+	"data-slot": "collapsible",
+	...props
+});
+const CollapsibleTrigger = (props) => /* @__PURE__ */ jsx(Collapsible$1.Trigger, {
+	"data-slot": "collapsible-trigger",
+	...props
+});
+/**
+* The disclosed content. It adds no padding or type, so opening it reveals
+* content at the rhythm of the surface around it, as a native `<details>`
+* does. Its height eases open and shut with the accordion's timing, so the
+* two disclosures move alike; under reduced motion it snaps.
+*
+* Closed, the content stays in the document as `hidden="until-found"` (as a
+* native `<details>` keeps it), so find-in-page still reaches it and opens
+* the panel. Pass `hiddenUntilFound={false}` to unmount it instead.
+*/
+const CollapsiblePanel = ({ className, hiddenUntilFound = true, ...props }) => /* @__PURE__ */ jsx(Collapsible$1.Panel, {
+	className: cn("h-(--collapsible-panel-height) min-w-0 overflow-hidden transition-[height] duration-200 ease-in-out data-ending-style:h-0 data-starting-style:h-0 motion-reduce:transition-none [&[hidden]:not([hidden=until-found])]:hidden", className),
+	"data-slot": "collapsible-panel",
+	hiddenUntilFound,
+	...props
+});
+//#endregion
+export { Collapsible, CollapsiblePanel, CollapsibleTrigger };

package/dist/components/field.d.ts

@@ -4,6 +4,12 @@ declare const Field: ({ className, ...props }: Field$1.Root.Props) => import("re
 declare const FieldLabel: ({ className, ...props }: Field$1.Label.Props) => import("react").JSX.Element;
 declare const FieldItem: ({ className, ...props }: Field$1.Item.Props) => import("react").JSX.Element;
 declare const FieldDescription: ({ className, ...props }: Field$1.Description.Props) => import("react").JSX.Element;
+/**
+ * The message for an invalid field. With no `match` it shows whatever error
+ * the field has, including one the `Form` received in `errors` from the
+ * server; with a validity key (`match="valueMissing"`) it shows only for that
+ * constraint, so each rule can be worded on its own. See `Form`.
+ */
 declare const FieldError: ({ className, ...props }: Field$1.Error.Props) => import("react").JSX.Element;
 declare const FieldControl: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").FieldControlProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
 declare const FieldValidity: import("react").FC<import("@base-ui/react").FieldValidityProps>;

package/dist/components/field.js

@@ -23,6 +23,12 @@ const FieldDescription = ({ className, ...props }) => /* @__PURE__ */ jsx(Field$
 	"data-slot": "field-description",
 	...props
 });
+/**
+* The message for an invalid field. With no `match` it shows whatever error
+* the field has, including one the `Form` received in `errors` from the
+* server; with a validity key (`match="valueMissing"`) it shows only for that
+* constraint, so each rule can be worded on its own. See `Form`.
+*/
 const FieldError = ({ className, ...props }) => /* @__PURE__ */ jsx(Field$1.Error, {
 	className: cn("text-destructive-foreground text-xs", className),
 	"data-slot": "field-error",

package/dist/components/form.d.ts

@@ -5,10 +5,44 @@ declare const formVariants: (props?: ({
   density?: "compact" | "default" | "snug" | null | undefined;
   layout?: "inline" | "stack" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Errors a server returned for the last submit, keyed by each `Field`'s
+ * `name`: one message or several.
+ */
+type FormErrors = NonNullable<Form$1.Props["errors"]>;
 type FormProps = Form$1.Props & VariantProps<typeof formVariants> & {
   dirty?: boolean;
   onDiscard?: (() => void) | undefined;
 };
+/**
+ * A form whose fields report their own errors.
+ *
+ * Validation, in the order a reader meets it:
+ *
+ * - **In the browser.** A `Field` reads its control's constraints
+ *   (`required`, `type`, `pattern`, `min`/`max`, a `validate` function) and
+ *   shows a `FieldError` for the ones that fail. `validationMode` stays
+ *   Base UI's `onSubmit`: nothing is flagged while a person tabs through an
+ *   empty form, the first submit marks every invalid field at once, and from
+ *   then on each field re-validates as it changes. `onBlur` would flag a
+ *   required field the moment focus passes it, before anyone tried to submit;
+ *   pass it only where checking a value as soon as it is left is the point
+ *   (an availability check, a long identifier).
+ * - **From the server.** Pass what the server rejected as `errors`, keyed by
+ *   field `name` (`{ email: "Already invited" }`). The field turns invalid,
+ *   its control gets `aria-invalid`, and its `FieldError` shows the message.
+ *   Base UI drops a field's server error as soon as its value changes, so a
+ *   correction clears the message without a round trip. Keep the errors in
+ *   state and replace them on the next submit.
+ *
+ * In a `FieldError`, leave `match` unset to show whichever error the field
+ * has, the server's included; `match="valueMissing"` (or another validity
+ * key) words one constraint in the product's voice; `match` set to `true`
+ * hands visibility to the caller.
+ *
+ * `dirty` and `onDiscard` register the form with an enclosing `Dialog`'s
+ * unsaved-changes guard.
+ */
 declare const Form: ({ className, density, layout, dirty, onDiscard, children, ...props }: FormProps) => import("react").JSX.Element;
 //#endregion
-export { Form, type FormProps, formVariants };
+export { Form, type FormErrors, type FormProps, formVariants };

package/dist/components/form.js

@@ -22,6 +22,35 @@ const formVariants = cva("flex w-full", {
 		}
 	}
 });
+/**
+* A form whose fields report their own errors.
+*
+* Validation, in the order a reader meets it:
+*
+* - **In the browser.** A `Field` reads its control's constraints
+*   (`required`, `type`, `pattern`, `min`/`max`, a `validate` function) and
+*   shows a `FieldError` for the ones that fail. `validationMode` stays
+*   Base UI's `onSubmit`: nothing is flagged while a person tabs through an
+*   empty form, the first submit marks every invalid field at once, and from
+*   then on each field re-validates as it changes. `onBlur` would flag a
+*   required field the moment focus passes it, before anyone tried to submit;
+*   pass it only where checking a value as soon as it is left is the point
+*   (an availability check, a long identifier).
+* - **From the server.** Pass what the server rejected as `errors`, keyed by
+*   field `name` (`{ email: "Already invited" }`). The field turns invalid,
+*   its control gets `aria-invalid`, and its `FieldError` shows the message.
+*   Base UI drops a field's server error as soon as its value changes, so a
+*   correction clears the message without a round trip. Keep the errors in
+*   state and replace them on the next submit.
+*
+* In a `FieldError`, leave `match` unset to show whichever error the field
+* has, the server's included; `match="valueMissing"` (or another validity
+* key) words one constraint in the product's voice; `match` set to `true`
+* hands visibility to the caller.
+*
+* `dirty` and `onDiscard` register the form with an enclosing `Dialog`'s
+* unsaved-changes guard.
+*/
 const Form = ({ className, density, layout, dirty = false, onDiscard, children, ...props }) => /* @__PURE__ */ jsxs(Form$1, {
 	className: cn(formVariants({
 		density,

package/dist/components/identity-text.js

@@ -1,6 +1,7 @@
 "use client";
 import { cn } from "../lib/utils.js";
 import { Tooltip, TooltipContent as TooltipPopup, TooltipTrigger } from "./tooltip.js";
+import { withoutDirectionalControls } from "./bidi-text.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useId, useState } from "react";
 //#region src/components/identity-text.tsx
@@ -10,6 +11,7 @@ const IdentityText = ({ children, className }) => {
 	const [overflow, setOverflow] = useState(false);
 	const [hasFocusOwner, setHasFocusOwner] = useState(false);
 	const [open, setOpen] = useState(false);
+	const name = withoutDirectionalControls(children);
 	const textRef = useCallback((node) => {
 		if (node === null) return;
 		const measure = () => setOverflow(node.scrollWidth > node.clientWidth);
@@ -56,14 +58,14 @@ const IdentityText = ({ children, className }) => {
 				role: overflow && !hasFocusOwner ? "button" : void 0,
 				tabIndex: overflow && !hasFocusOwner ? 0 : void 0
 			}),
-			children
+			children: name
 		}), /* @__PURE__ */ jsx(TooltipPopup, {
 			className: "max-w-sm",
 			role: "tooltip",
 			children: /* @__PURE__ */ jsx("span", {
 				className: "block max-w-sm wrap-break-word",
 				dir: "auto",
-				children
+				children: name
 			})
 		})]
 	});

package/dist/components/landing.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../lib/utils.js";
-import { ScrollArea } from "./scroll-area.js";
 import { BidiText } from "./bidi-text.js";
+import { ScrollArea } from "./scroll-area.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/landing.tsx
 const LandingLayout = ({ actions, hero, children, footer }) => /* @__PURE__ */ jsxs("div", {

package/dist/components/search-field.js

@@ -35,6 +35,7 @@ const SearchField = ({ value, onValueChange, clearLabel, groupClassName, classNa
 		align: "inline-end",
 		children: /* @__PURE__ */ jsx(Button, {
 			"aria-label": clearLabel,
+			disabled: props.disabled,
 			onClick: () => {
 				onValueChange("");
 			},

package/dist/components/segmented-icon-toggle.d.ts

@@ -16,7 +16,8 @@ type SegmentedIconToggleProps<T extends string> = {
 };
 /** Compact segmented control of icon buttons (e.g. table row wrap, list
  * density). One shared shell so every density/mode switch looks and behaves
- * the same across the app. */
+ * the same across the app. A `ToggleGroup` of icon items that always holds
+ * one value: clicking the chosen option keeps it. */
 export declare const SegmentedIconToggle: <T extends string>({ value, options, onChange, size }: SegmentedIconToggleProps<T>) => import("react").JSX.Element;
 //#endregion
 export {};

package/dist/components/segmented-icon-toggle.js

@@ -1,31 +1,30 @@
 "use client";
 import { cn } from "../lib/utils.js";
-import { Tooltip, TooltipContent as TooltipPopup, TooltipTrigger } from "./tooltip.js";
-import { Button } from "./button.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { ToggleGroup, ToggleGroupItem } from "./toggle-group.js";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/segmented-icon-toggle.tsx
 /** Compact segmented control of icon buttons (e.g. table row wrap, list
 * density). One shared shell so every density/mode switch looks and behaves
-* the same across the app. */
-const SegmentedIconToggle = ({ value, options, onChange, size = "compact" }) => /* @__PURE__ */ jsx("div", {
-	className: cn("border-border/70 bg-muted/30 inline-flex shrink-0 items-center overflow-hidden rounded-md border p-0.5", size === "touch" ? "h-7 [@media(any-pointer:coarse)]:h-12" : "h-7"),
+* the same across the app. A `ToggleGroup` of icon items that always holds
+* one value: clicking the chosen option keeps it. */
+const SegmentedIconToggle = ({ value, options, onChange, size = "compact" }) => /* @__PURE__ */ jsx(ToggleGroup, {
+	className: cn("rounded-md", size === "touch" ? "h-7 [@media(any-pointer:coarse)]:h-12" : "h-7"),
 	"data-slot": "segmented-icon-toggle",
+	onValueChange: (next) => {
+		const [chosen] = next;
+		if (chosen !== void 0 && chosen !== value) onChange(chosen);
+	},
+	value: [value],
 	children: options.map((option) => {
 		const Icon = option.icon;
-		const isActive = value === option.value;
-		return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
-			render: /* @__PURE__ */ jsx(Button, {
-				"aria-label": option.label,
-				"aria-pressed": isActive,
-				className: cn("text-muted-foreground h-6 min-h-0 w-7 rounded-[4px] p-0", size === "touch" && "[@media(any-pointer:coarse)]:h-11 [@media(any-pointer:coarse)]:min-h-11 [@media(any-pointer:coarse)]:w-11", isActive && "bg-muted text-foreground ring-border/80 hover:bg-muted hover:text-foreground shadow-xs ring-1"),
-				"data-control-value": option.value,
-				onClick: () => onChange(option.value),
-				size: "icon-xs",
-				type: "button",
-				variant: "ghost"
-			}),
+		return /* @__PURE__ */ jsx(ToggleGroupItem, {
+			"aria-label": option.label,
+			className: cn("h-6 w-7 rounded-[4px] sm:h-6", size === "touch" && "[@media(any-pointer:coarse)]:h-11 [@media(any-pointer:coarse)]:w-11"),
+			"data-control-value": option.value,
+			size: "icon-xs",
+			value: option.value,
 			children: /* @__PURE__ */ jsx(Icon, { className: "size-3.5" })
-		}), /* @__PURE__ */ jsx(TooltipPopup, { children: option.label })] }, option.value);
+		}, option.value);
 	})
 });
 //#endregion

package/dist/components/switch.d.ts

@@ -1,5 +1,24 @@
+import * as React$1 from "react";
 import { Switch as Switch$1 } from "@base-ui/react/switch";
 //#region src/components/switch.d.ts
-declare const Switch: ({ className, ...props }: Switch$1.Root.Props) => import("react").JSX.Element;
+/**
+ * `default` is a setting's own control; `sm` sits in a dense row or a menu
+ * beside small type.
+ */
+type SwitchSize = "sm" | "default";
+type SwitchProps = Switch$1.Root.Props & {
+  size?: SwitchSize | undefined;
+};
+declare const Switch: ({ className, size, ...props }: SwitchProps) => React$1.JSX.Element;
+/**
+ * A setting row: its label and an optional description at the start, the
+ * switch at the end. The whole row is the label, so a click anywhere on it
+ * flips the switch, and the row is at least 44px tall for touch. The
+ * description is linked to the switch, so it is read after the name.
+ */
+declare const SwitchField: ({ className, description, label, size, ...props }: SwitchProps & {
+  label: React$1.ReactNode;
+  description?: React$1.ReactNode;
+}) => React$1.JSX.Element;
 //#endregion
-export { Switch };
+export { Switch, SwitchField, type SwitchProps, type SwitchSize };

package/dist/components/switch.js

@@ -1,16 +1,55 @@
 "use client";
 import { cn } from "../lib/utils.js";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
 import { Switch as Switch$1 } from "@base-ui/react/switch";
 //#region src/components/switch.tsx
-const Switch = ({ className, ...props }) => /* @__PURE__ */ jsx(Switch$1.Root, {
-	className: cn("focus-visible:ring-ring focus-visible:ring-offset-background data-checked:bg-primary data-unchecked:bg-input relative inline-flex h-5 w-9 shrink-0 items-center rounded-full outline-none focus-visible:ring-2 focus-visible:ring-offset-1 data-disabled:opacity-64", className),
+const SWITCH_ROOT_SIZE_CLASS_NAME = {
+	default: "h-5 w-9",
+	sm: "h-4 w-7"
+};
+const SWITCH_THUMB_SIZE_CLASS_NAME = {
+	default: "size-4 ltr:data-checked:translate-x-4.5 ltr:data-unchecked:translate-x-0.5 rtl:data-checked:-translate-x-4.5 rtl:data-unchecked:-translate-x-0.5",
+	sm: "size-3 ltr:data-checked:translate-x-3.5 ltr:data-unchecked:translate-x-0.5 rtl:data-checked:-translate-x-3.5 rtl:data-unchecked:-translate-x-0.5"
+};
+const Switch = ({ className, size = "default", ...props }) => /* @__PURE__ */ jsx(Switch$1.Root, {
+	className: cn("focus-visible:ring-ring focus-visible:ring-offset-background data-checked:bg-primary data-unchecked:bg-input relative inline-flex shrink-0 items-center rounded-full outline-none focus-visible:ring-2 focus-visible:ring-offset-1 data-disabled:opacity-64", SWITCH_ROOT_SIZE_CLASS_NAME[size], className),
+	"data-size": size,
 	"data-slot": "switch",
 	...props,
 	children: /* @__PURE__ */ jsx(Switch$1.Thumb, {
-		className: "bg-background pointer-events-none block size-4 rounded-full shadow-xs transition-transform ltr:data-checked:translate-x-4.5 ltr:data-unchecked:translate-x-0.5 rtl:data-checked:-translate-x-4.5 rtl:data-unchecked:-translate-x-0.5",
+		className: cn("bg-background pointer-events-none block rounded-full shadow-xs transition-transform", SWITCH_THUMB_SIZE_CLASS_NAME[size]),
 		"data-slot": "switch-thumb"
 	})
 });
+/**
+* A setting row: its label and an optional description at the start, the
+* switch at the end. The whole row is the label, so a click anywhere on it
+* flips the switch, and the row is at least 44px tall for touch. The
+* description is linked to the switch, so it is read after the name.
+*/
+const SwitchField = ({ className, description, label, size, ...props }) => {
+	const descriptionId = useId();
+	return /* @__PURE__ */ jsxs("label", {
+		className: cn("flex min-h-11 cursor-pointer items-center justify-between gap-4 py-2 has-data-disabled:cursor-not-allowed", className),
+		"data-slot": "switch-field",
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: "flex min-w-0 flex-col gap-0.5 in-[label:has([data-disabled])]:opacity-64",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-foreground text-sm font-medium",
+				children: label
+			}), description === void 0 ? null : /* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground text-xs",
+				"data-slot": "switch-field-description",
+				id: descriptionId,
+				children: description
+			})]
+		}), /* @__PURE__ */ jsx(Switch, {
+			"aria-describedby": description === void 0 ? void 0 : descriptionId,
+			size,
+			...props
+		})]
+	});
+};
 //#endregion
-export { Switch };
+export { Switch, SwitchField };

package/dist/components/table.d.ts

@@ -14,11 +14,25 @@ type TableInset = "default" | "card";
  * become the reference box of a sticky header and stop it from sticking.
  */
 type TableScroll = "self" | "parent";
+/**
+ * How tightly a table sets its cells.
+ *
+ * `default` is a data table: padded cells on one line, rows that light up
+ * under the pointer. `compact` is a small reading table inside a card or a
+ * review (a term set against a standard, a presence matrix): cells sit at
+ * text leading with no side padding, headings keep a trailing gap so a
+ * right-aligned heading never touches the next column, values wrap, and rows
+ * do not highlight because nothing in them is a row-wide target. A row
+ * header (`<TableHead scope="row">`) in a compact body reads as the row's
+ * first cell rather than as a column heading.
+ */
+type TableDensity = "default" | "compact";
 type TableProps = React$1.ComponentProps<"table"> & {
+  density?: TableDensity;
   inset?: TableInset;
   scroll?: TableScroll;
 };
-declare const Table: ({ className, inset, scroll, ...props }: TableProps) => React$1.JSX.Element;
+declare const Table: ({ className, density, inset, scroll, ...props }: TableProps) => React$1.JSX.Element;
 type TableHeaderProps = React$1.ComponentProps<"thead"> & {
   /**
    * `muted` lays the header row on a muted band, separating it from the rows
@@ -95,4 +109,4 @@ type SortableHeadProps = Omit<TableHeadProps, "onClick"> & {
 declare const SortableHead: ({ children, sortDirection, onSort, trailing, className, align, numeric, ...props }: SortableHeadProps) => React$1.JSX.Element;
 declare const TableCaption: ({ className, ...props }: React$1.ComponentProps<"caption">) => React$1.JSX.Element;
 //#endregion
-export { type SortDirection, SortableHead, Table, type TableAlign, TableBody, TableCaption, TableCell, type TableCellProps, TableFooter, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableInset, type TableProps, TableRow, type TableScroll, type TableTone };
+export { type SortDirection, SortableHead, Table, type TableAlign, TableBody, TableCaption, TableCell, type TableCellProps, type TableDensity, TableFooter, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableInset, type TableProps, TableRow, type TableScroll, type TableTone };

package/dist/components/table.js

@@ -3,9 +3,10 @@ import { cn } from "../lib/utils.js";
 import { Button } from "./button.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/table.tsx
-const Table = ({ className, inset = "default", scroll = "self", ...props }) => {
+const Table = ({ className, density = "default", inset = "default", scroll = "self", ...props }) => {
 	const table = /* @__PURE__ */ jsx("table", {
 		className: cn("w-full caption-bottom text-sm in-data-[slot=frame]:border-separate in-data-[slot=frame]:border-spacing-0", className),
+		"data-density": density,
 		"data-inset": inset,
 		"data-slot": "table",
 		...props
@@ -33,7 +34,7 @@ const TableFooter = ({ className, ...props }) => /* @__PURE__ */ jsx("tfoot", {
 	...props
 });
 const TableRow = ({ className, tone = "default", ...props }) => /* @__PURE__ */ jsx("tr", {
-	className: cn("hover:bg-muted/72 data-[state=selected]:bg-muted/72 border-b in-data-[slot=frame]:hover:bg-transparent in-data-[slot=frame]:data-[state=selected]:bg-transparent", tone === "muted" && "text-muted-foreground", className),
+	className: cn("hover:bg-muted/72 data-[state=selected]:bg-muted/72 border-b in-data-[density=compact]:hover:bg-transparent in-data-[slot=frame]:hover:bg-transparent in-data-[slot=frame]:data-[state=selected]:bg-transparent", tone === "muted" && "text-muted-foreground", className),
 	"data-slot": "table-row",
 	...props
 });
@@ -44,14 +45,14 @@ const TABLE_ALIGN_CLASS = {
 };
 const resolveTableAlign = (align, numeric) => align ?? (numeric ? "end" : void 0);
 const TableHead = ({ className, align, numeric = false, ...props }) => /* @__PURE__ */ jsx("th", {
-	className: cn("text-muted-foreground h-10 px-2.5 align-middle leading-none font-medium whitespace-nowrap in-data-[inset=card]:px-4 has-[[role=checkbox]]:w-px has-[[role=checkbox]]:pe-0", TABLE_ALIGN_CLASS[resolveTableAlign(align, numeric) ?? "start"], numeric && "tabular-nums", className),
+	className: cn("text-muted-foreground h-10 px-2.5 align-middle leading-none font-medium whitespace-nowrap in-data-[inset=card]:px-4 has-[[role=checkbox]]:w-px has-[[role=checkbox]]:pe-0", "in-data-[density=compact]:h-auto in-data-[density=compact]:px-0 in-data-[density=compact]:py-1 in-data-[density=compact]:pe-3 in-data-[density=compact]:text-xs", "in-data-[density=compact]:[tbody_&]:py-1.5 in-data-[density=compact]:[tbody_&]:text-sm in-data-[density=compact]:[tbody_&]:leading-6 in-data-[density=compact]:[tbody_&]:font-normal in-data-[density=compact]:[tbody_&]:whitespace-normal in-data-[density=compact]:[tbody_&]:text-inherit", TABLE_ALIGN_CLASS[resolveTableAlign(align, numeric) ?? "start"], numeric && "tabular-nums", className),
 	"data-slot": "table-head",
 	...props
 });
 const TableCell = ({ className, align, tone = "default", numeric = false, truncate = false, flush = false, ...props }) => {
 	const resolvedAlign = resolveTableAlign(align, numeric);
 	return /* @__PURE__ */ jsx("td", {
-		className: cn("align-middle leading-none whitespace-nowrap has-[[role=checkbox]]:pe-0", flush ? "p-0" : "p-2.5 in-data-[inset=card]:px-4 in-data-[slot=frame]:first:p-[calc(--spacing(2.5)-1px)] in-data-[slot=frame]:last:p-[calc(--spacing(2.5)-1px)]", resolvedAlign !== void 0 && TABLE_ALIGN_CLASS[resolvedAlign], tone === "muted" && "text-muted-foreground", numeric && "tabular-nums", truncate && "truncate", className),
+		className: cn("align-middle leading-none whitespace-nowrap has-[[role=checkbox]]:pe-0", flush ? "p-0" : "p-2.5 in-data-[density=compact]:px-0 in-data-[density=compact]:py-1.5 in-data-[inset=card]:px-4 in-data-[slot=frame]:first:p-[calc(--spacing(2.5)-1px)] in-data-[slot=frame]:last:p-[calc(--spacing(2.5)-1px)]", "in-data-[density=compact]:leading-6 in-data-[density=compact]:whitespace-normal", resolvedAlign !== void 0 && TABLE_ALIGN_CLASS[resolvedAlign], tone === "muted" && "text-muted-foreground", numeric && "tabular-nums", truncate && "truncate", className),
 		"data-slot": "table-cell",
 		...props
 	});

package/dist/components/tabs.js

@@ -1,6 +1,6 @@
 "use client";
 import { cn, composeRefs } from "../lib/utils.js";
-import { hasTabOrderChanged } from "../lib/tab-order.js";
+import { hasTabOrderChanged, revealActiveTab } from "../lib/tab-order.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { Tabs as Tabs$1 } from "@base-ui/react/tabs";
@@ -21,6 +21,17 @@ const TabsList = ({ variant = "default", className, children, ref, ...props }) =
 		tabOrderRef.current = tabs;
 		if (hasTabOrderChanged(previousTabs, tabs)) setRemeasureToken((token) => token + 1);
 	});
+	useIsoLayoutEffect(() => {
+		const list = listRef.current;
+		if (list === null || typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(() => {
+			revealActiveTab(list);
+		});
+		observer.observe(list);
+		return () => {
+			observer.disconnect();
+		};
+	}, []);
 	return /* @__PURE__ */ jsxs(Tabs$1.List, {
 		className: cn("text-muted-foreground relative z-0 flex w-fit max-w-full items-center justify-center-safe gap-x-0.5", "scrollbar-none overflow-auto data-[orientation=horizontal]:overflow-y-hidden data-[orientation=horizontal]:overscroll-x-contain data-[orientation=vertical]:overflow-x-hidden data-[orientation=vertical]:overscroll-y-contain [&::-webkit-scrollbar]:hidden", "data-[orientation=vertical]:flex-col", variant === "default" ? "bg-muted text-foreground-label rounded-lg p-0.5" : "*:data-[slot=tabs-tab]:hover:bg-accent data-[orientation=horizontal]:py-1 data-[orientation=vertical]:px-1", className),
 		"data-slot": "tabs-list",

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

@@ -0,0 +1,32 @@
+import "./button.js";
+import * as React$1 from "react";
+import { ButtonSize } from "./button.shared.js";
+import { ToggleGroup as ToggleGroup$1 } from "@base-ui/react/toggle-group";
+import { ToggleProps } from "./toggle.js";
+//#region src/components/toggle-group.d.ts
+/**
+ * A segmented control: a row of toggles in one tray, of which one (or, with
+ * `multiple`, several) is on. Use it for view modes, density, and filter
+ * tabs over a list; `Tabs` is for switching between panels of content.
+ *
+ * The chosen item is raised out of the tray, so the choice reads at a glance
+ * and differs from the hover fill. Arrow keys move between items and the
+ * group exposes the pressed state of each.
+ *
+ * Base UI lets the pressed item be clicked off, leaving no value. A control
+ * that must always hold one ignores an empty change in `onValueChange`.
+ */
+declare const ToggleGroup: <Value extends string>({ className, size, ...props }: ToggleGroupProps<Value>) => React$1.JSX.Element;
+/**
+ * One choice in a `ToggleGroup`. It takes the group's size unless it names
+ * its own (an icon item names an `icon-*` size and an `aria-label`, which
+ * doubles as its tooltip).
+ */
+declare const ToggleGroupItem: <Value extends string>({ className, size, variant, ...props }: ToggleProps<Value>) => React$1.JSX.Element;
+type ToggleGroupProps<Value extends string> = ToggleGroup$1.Props<Value> & {
+  /** The size every item takes unless it names its own. */
+  size?: ButtonSize | undefined;
+  children?: React$1.ReactNode;
+};
+//#endregion
+export { ToggleGroup, ToggleGroupItem, type ToggleGroupProps };

package/dist/components/toggle-group.js

@@ -0,0 +1,45 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import { Toggle } from "./toggle.js";
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+import { ToggleGroup as ToggleGroup$1 } from "@base-ui/react/toggle-group";
+//#region src/components/toggle-group.tsx
+const ToggleGroupSizeContext = createContext("xs");
+/**
+* A segmented control: a row of toggles in one tray, of which one (or, with
+* `multiple`, several) is on. Use it for view modes, density, and filter
+* tabs over a list; `Tabs` is for switching between panels of content.
+*
+* The chosen item is raised out of the tray, so the choice reads at a glance
+* and differs from the hover fill. Arrow keys move between items and the
+* group exposes the pressed state of each.
+*
+* Base UI lets the pressed item be clicked off, leaving no value. A control
+* that must always hold one ignores an empty change in `onValueChange`.
+*/
+const ToggleGroup = ({ className, size = "xs", ...props }) => /* @__PURE__ */ jsx(ToggleGroupSizeContext, {
+	value: size,
+	children: /* @__PURE__ */ jsx(ToggleGroup$1, {
+		className: cn("border-border/70 bg-muted/30 inline-flex w-fit shrink-0 items-center gap-0.5 rounded-lg border p-0.5 data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch", className),
+		"data-slot": "toggle-group",
+		...props
+	})
+});
+/**
+* One choice in a `ToggleGroup`. It takes the group's size unless it names
+* its own (an icon item names an `icon-*` size and an `aria-label`, which
+* doubles as its tooltip).
+*/
+const ToggleGroupItem = ({ className, size, variant = "muted", ...props }) => {
+	const groupSize = useContext(ToggleGroupSizeContext);
+	return /* @__PURE__ */ jsx(Toggle, {
+		className: cn("data-pressed:bg-background data-pressed:text-foreground", className),
+		"data-slot": "toggle-group-item",
+		size: size ?? groupSize,
+		variant,
+		...props
+	});
+};
+//#endregion
+export { ToggleGroup, ToggleGroupItem };

package/dist/components/toggle.d.ts

@@ -0,0 +1,26 @@
+import "./button.js";
+import * as React$1 from "react";
+import { ButtonSize } from "./button.shared.js";
+import { Toggle as Toggle$1 } from "@base-ui/react/toggle";
+//#region src/components/toggle.d.ts
+/**
+ * A button that stays pressed: a formatting mark, "show resolved", a pinned
+ * view. It is a `Button` underneath, so it shares the button's sizes, focus
+ * ring, tooltip and disabled disposition, and its pressed state is the
+ * button's selected treatment, distinct from hover. Base UI owns
+ * `aria-pressed`.
+ *
+ * Several toggles that choose one value (view modes, filter tabs) are a
+ * `ToggleGroup`, not a row of these.
+ */
+declare const Toggle: <Value extends string>({ size, tooltip, variant, ...props }: ToggleProps<Value>) => React$1.JSX.Element;
+/** The quiet button looks a pressed state reads well on. */
+type ToggleVariant = "ghost" | "muted" | "outline";
+type ToggleProps<Value extends string> = Toggle$1.Props<Value> & {
+  size?: ButtonSize | undefined;
+  /** The hint, and the accessible name source for an icon size. */
+  tooltip?: React$1.ReactNode;
+  variant?: ToggleVariant | undefined;
+};
+//#endregion
+export { Toggle, type ToggleProps, type ToggleVariant };

package/dist/components/toggle.js

@@ -0,0 +1,26 @@
+"use client";
+import { Button } from "./button.js";
+import { jsx } from "react/jsx-runtime";
+import { Toggle as Toggle$1 } from "@base-ui/react/toggle";
+//#region src/components/toggle.tsx
+/**
+* A button that stays pressed: a formatting mark, "show resolved", a pinned
+* view. It is a `Button` underneath, so it shares the button's sizes, focus
+* ring, tooltip and disabled disposition, and its pressed state is the
+* button's selected treatment, distinct from hover. Base UI owns
+* `aria-pressed`.
+*
+* Several toggles that choose one value (view modes, filter tabs) are a
+* `ToggleGroup`, not a row of these.
+*/
+const Toggle = ({ size = "sm", tooltip, variant = "muted", ...props }) => /* @__PURE__ */ jsx(Toggle$1, {
+	"data-slot": "toggle",
+	render: /* @__PURE__ */ jsx(Button, {
+		size,
+		tooltip,
+		variant
+	}),
+	...props
+});
+//#endregion
+export { Toggle };

package/dist/index.d.ts

@@ -9,7 +9,7 @@ import { Avatar, AvatarFallback, AvatarImage } from "./components/avatar.js";
 import { BOARD_DRAG_OVERLAY_Z_INDEX, OVERLAY_COLLISION_PADDING, OVERLAY_LAYER_CLASS_NAMES, OverlayLayer, SHELL_CHROME_LAYER_CLASS_NAME } from "./lib/overlay-layer.js";
 import { BUTTON_CONTENT, BUTTON_SIZE_CONTENT, Button, ButtonFocusRing, ButtonPlainShape, ButtonProps, ButtonTextRun, buttonAccessibleDisabledClass, buttonVariants } from "./components/button.js";
 import { Badge, BadgeProps, BadgeSize, BadgeTone, badgeVariants } from "./components/badge.js";
-import { BidiDirection, BidiText, BidiTextProps, UserText } from "./components/bidi-text.js";
+import { BidiDirection, BidiText, BidiTextProps, UserText, stripDirectionalControls, withoutDirectionalControls } from "./components/bidi-text.js";
 import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "./components/breadcrumb.js";
 import { BuildKanbanBoardMatrixParams, CreateKanbanDropIntentParams, KANBAN_BOARD_AXES, KanbanBoardAxis, KanbanBoardCell, KanbanBoardColumn, KanbanBoardCoordinate, KanbanBoardDestination, KanbanBoardLane, KanbanBoardMatrix, KanbanDropAxisChange, KanbanDropIntent, OrderKanbanCellsByColumnsParams, ResolveKanbanGroupValueParams, buildKanbanBoardMatrix, createKanbanDropIntent, getKanbanBoardColumnIdentity, getKanbanBoardLaneIdentity, orderKanbanCellsByColumns } from "./kanban/matrix.js";
 import { ButtonSize, ButtonVariant } from "./components/button.shared.js";
@@ -18,6 +18,7 @@ import { COPIED_RESET_MS, CopyButton, CopyFeedback, useCopiedFeedback, useCopyCo
 import { CalendarCell, CalendarEntryButton, CalendarEntrySurface, CalendarGrid, CalendarHeaderCell, CalendarHeaderRow } from "./calendar/primitives.js";
 import { CalendarDateRange, ResourceCalendarLaneLayout, ResourceCalendarLanePlacement, ResourceCalendarPlacement, assertConsecutiveCalendarDates, getResourceCalendarPlacement, layoutResourceCalendarEntries, nextCalendarDate } from "./calendar/resource-calendar.logic.js";
 import { Checkbox } from "./components/checkbox.js";
+import { Collapsible, CollapsiblePanel, CollapsibleTrigger } from "./components/collapsible.js";
 import { ColorPicker, ColorPickerContent, ColorPickerContentProps, ColorPickerProps, ColorPreset, DEFAULT_PRESETS } from "./components/color-picker.js";
 import { ColorVariants, OptionColor, emptyColor, optionColors, resolveOptionColor } from "./lib/option-color.js";
 import { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxClear, ComboboxCollection, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, ComboboxPopup, ComboboxRow, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue } from "./components/combobox.js";
@@ -34,7 +35,7 @@ import { DiscordLogoIcon, GitHubLogoIcon, XLogoIcon } from "./components/brand-i
 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, MenuAnchor } from "./components/menu.js";
 import { Field, FieldControl, FieldDescription, FieldError, FieldItem, FieldLabel, FieldValidity } from "./components/field.js";
 import { FileInput, FileInputProps } from "./components/file-input.js";
-import { Form, FormProps, formVariants } from "./components/form.js";
+import { Form, FormErrors, FormProps, formVariants } from "./components/form.js";
 import { Frame, FrameDescription, FrameFooter, FrameHeader, FramePanel, FrameTitle } from "./components/frame.js";
 import { HexColorPicker, HexColorPickerProps } from "./components/hex-color-picker.js";
 import { HoverCard as PreviewCard, HoverCardContent as PreviewCardPopup, HoverCardTrigger as PreviewCardTrigger, PreviewCardPrimitive } from "./components/preview-card.js";
@@ -91,13 +92,15 @@ import { Select, SelectContent as SelectPopup, SelectGroup, SelectGroupLabel, Se
 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 { Skeleton } from "./components/skeleton.js";
-import { SortDirection, SortableHead, Table, TableAlign, TableBody, TableCaption, TableCell, TableCellProps, TableFooter, TableHead, TableHeadProps, TableHeader, TableHeaderProps, TableInset, TableProps, TableRow, TableScroll, TableTone } from "./components/table.js";
+import { SortDirection, SortableHead, Table, TableAlign, TableBody, TableCaption, TableCell, TableCellProps, TableDensity, TableFooter, TableHead, TableHeadProps, TableHeader, TableHeaderProps, TableInset, TableProps, TableRow, TableScroll, TableTone } from "./components/table.js";
 import { StellaMark } from "./components/stella-mark.js";
 import { StellaWordmarkLatin } from "./components/stella-wordmark.js";
 import { TOOLTIP_OPEN_DELAY_MS, Tooltip, TooltipContent as TooltipPopup, TooltipCreateHandle, TooltipFactTrigger, TooltipProvider, TooltipTrigger } from "./components/tooltip.js";
 import { TableColumnCapabilities, TableColumnDescriptor, TableSchema, duplicateColumnIds, findTableColumn, hideableColumnIds, sortableColumnIds, tableColumnIds, tableColumnSizing, visibleColumnIds } from "./data-table/schema.js";
 import { Tabs, TabsContent as TabsPanel, TabsList, TabsTab } from "./components/tabs.js";
 import { Textarea, TextareaProps } from "./components/textarea.js";
+import { Toggle, ToggleProps, ToggleVariant } from "./components/toggle.js";
+import { ToggleGroup, ToggleGroupItem, ToggleGroupProps } from "./components/toggle-group.js";
 import { TruncatedText, TruncatedTextLines, TruncatedTextProps, isTextOverflowing } from "./components/truncated-text.js";
 import { TypedCharacterEvent, typedCharacter } from "./lib/typed-character.js";
 import { WorkspaceCompactNavigation, WorkspaceEndRail, WorkspaceEndRailChatAction, WorkspaceEndRailProps, WorkspaceNavigation, WorkspaceShell, WorkspaceShellProps, WorkspaceTopBarContext } from "./components/workspace-shell.js";
@@ -109,4 +112,4 @@ import { getInitials } from "./lib/initials.js";
 import { useIsMobile } from "./hooks/use-mobile.js";
 import { useLatest } from "./hooks/use-latest.js";
 import { useViewportWidth } from "./hooks/use-viewport-width.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, BUTTON_CONTENT, BUTTON_SIZE_CONTENT, Badge, type BadgeProps, type BadgeSize, type BadgeTone, type BidiDirection, BidiText, type BidiTextProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, type BuildKanbanBoardMatrixParams, Button, type ButtonFocusRing, type ButtonPlainShape, type ButtonProps, type ButtonSize, ButtonTextRun, type ButtonVariant, CONTROL_SIZE, CONTROL_SIZES, COPIED_RESET_MS, CalendarCell, 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, CopyButton, CopyFeedback, type CreateKanbanDropIntentParams, DEFAULT_PRESETS, DIALOG_MOBILE_LAYOUT, DIALOG_SIZE_CLASS_NAMES, DataTable, type DataTableAriaSort, type DataTableColumn, type DataTableProps, type DataTableRowAction, DatePickerPopover, type DatePickerPopoverProps, DestructiveActionConfirmation, DestructiveConfirmDialog, type DestructiveConfirmDialogProps, type DestructiveConfirmOutcome, DetailsGrid, DetailsItem, type DetailsOrientation, type DetailsVariant, Dialog, DialogBackdrop, DialogBackdrop as DialogOverlay, DialogClose, DialogPopup as DialogContent, DialogPopup, DialogCreateHandle, DialogDescription, DialogFooter, DialogFormState, DialogHeader, type DialogLabels, type DialogMobileLayout, DialogPanel, DialogPortal, DialogProvider, type DialogSize, 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, type FormProps, 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, InlineRenameInput, 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, type KanbanCardDragPreview, KanbanCardDragSurface, type KanbanCardDragSurfaceProps, type KanbanCardFieldSelection, type KanbanCardSelectionModifiers, 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, 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, LEGAL_TEXT_CLASS_NAME, Label, type LabelVariant, List, ListEmpty, ListGroup, ListGroupAction, ListGroupCount, ListGroupDescription, ListGroupHeader, ListGroupHeading, ListGroupTitle, ListItem, ListItemActions, ListItemContent, ListItemDescription, ListItemMedia, ListItemStatus, ListItemTitle, MenuAnchor, MenuPreviewLayout, MenuSection, OUTLINE_CONTROL_MIN_SIZE, 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, PanelTrigger, Popover, PopoverClose, PopoverPopup as PopoverContent, PopoverPopup, PopoverCreateHandle, PopoverDescription, PopoverPanel, PopoverTitle, PopoverTrigger, PreviewCardPrimitive, PreviewPane, Prose, type RegisterKanbanBoardAutoScrollOptions, type RegisterKanbanCardDragOptions, type ResolveKanbanGroupValueParams, type ResolveKanbanGroupingParams, ResourceCalendar, ResourceCalendarColumn, ResourceCalendarEntry, ResourceCalendarEntryTone, ResourceCalendarLaneLayout, ResourceCalendarLanePlacement, ResourceCalendarPlacement, 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, TOOLTIP_OPEN_DELAY_MS, TRACKED_DELETION_STYLE, TRACKED_INSERTION_STYLE, Table, type TableAlign, TableBody, TableCaption, TableCell, type TableCellProps, type TableColumnCapabilities, type TableColumnDescriptor, TableFooter, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableInset, type TableProps, TableRow, type TableSchema, type TableScroll, type TableTone, Tabs, TabsPanel as TabsContent, TabsPanel, TabsList, TabsTab, TabsTab as TabsTrigger, TextSeparator, Textarea, type TextareaProps, type ToastPosition, ToastProvider, Tooltip, TooltipPopup as TooltipContent, TooltipPopup, TooltipCreateHandle, TooltipFactTrigger, TooltipProvider, TooltipTrigger, TruncatedText, type TruncatedTextLines, type TruncatedTextProps, TypedCharacterEvent, UNKNOWN_AUTHOR_LABEL, type UseKanbanDropTargetOptions, type UseKanbanSortableOptions, UserText, type WorkspaceCompactNavigation, WorkspaceEndRail, type WorkspaceEndRailChatAction, type WorkspaceEndRailProps, type WorkspaceNavigation, WorkspaceShell, type WorkspaceShellProps, type WorkspaceTopBarContext, XLogoIcon, assertConsecutiveCalendarDates, badgeVariants, buildKanbanBoardMatrix, buttonAccessibleDisabledClass, buttonVariants, cn, composeRefs, containedEventHandler, containedHandler, contentDir, createKanbanDropIntent, duplicateColumnIds, emptyColor, entityTabGlyph, findTableColumn, formVariants, getFirstWeekday, getInitials, getKanbanBoardColumnIdentity, getKanbanBoardLaneIdentity, getKanbanGroupingPropertyId, getKanbanGroups, getKanbanHorizontalEdge, getLocaleWeekInfo, getResourceCalendarPlacement, getWeekendDays, hasKanbanColumnBands, hideableColumnIds, isKanbanGroupingRenderable, isStructuredInputType, isTextOverflowing, kanbanKeyboardCoordinates, layoutResourceCalendarEntries, nextCalendarDate, optionColors, orderKanbanCellsByColumns, outlineEntryText, registerKanbanBoardAutoScroll, registerKanbanCardDrag, resolveDragWidth, resolveInspectorDockWidth, resolveInspectorPaneMaxWidth, resolveInspectorPaneWidth, resolveKanbanColumnBands, resolveKanbanGroupOptions, resolveKanbanGrouping, resolveKeyboardWidth, resolveOptionColor, resolveToastUpdateTimeout, reviewDiffSegmentKeys, reviewSeverityTone, selectKanbanCardFieldIds, selectKanbanRows, shouldForceSidebarCollapsed, sidebarIdentityTriggerClassName, sortableColumnIds, stellaToast, tableColumnIds, tableColumnSizing, toastCountdownMs, toastDedupeId, typedCharacter, useContentDir, useCopiedFeedback, useCopyConfirmation, useDestructiveActionConfirmation, useInspectorPaneWidth, useIsMobile, useKanbanDropTarget, useKanbanSortable, useKanbanSortableSensors, useLatest, useSidebar, useSidebarInlineSize, useSidebarLayout, 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, BUTTON_CONTENT, BUTTON_SIZE_CONTENT, Badge, type BadgeProps, type BadgeSize, type BadgeTone, type BidiDirection, BidiText, type BidiTextProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, type BuildKanbanBoardMatrixParams, Button, type ButtonFocusRing, type ButtonPlainShape, type ButtonProps, type ButtonSize, ButtonTextRun, type ButtonVariant, CONTROL_SIZE, CONTROL_SIZES, COPIED_RESET_MS, CalendarCell, CalendarDateRange, CalendarEntryButton, CalendarEntrySurface, CalendarGrid, CalendarHeaderCell, CalendarHeaderRow, Checkbox, Collapsible, CollapsiblePanel, CollapsibleTrigger, 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, CopyButton, CopyFeedback, type CreateKanbanDropIntentParams, DEFAULT_PRESETS, DIALOG_MOBILE_LAYOUT, DIALOG_SIZE_CLASS_NAMES, DataTable, type DataTableAriaSort, type DataTableColumn, type DataTableProps, type DataTableRowAction, DatePickerPopover, type DatePickerPopoverProps, DestructiveActionConfirmation, DestructiveConfirmDialog, type DestructiveConfirmDialogProps, type DestructiveConfirmOutcome, DetailsGrid, DetailsItem, type DetailsOrientation, type DetailsVariant, Dialog, DialogBackdrop, DialogBackdrop as DialogOverlay, DialogClose, DialogPopup as DialogContent, DialogPopup, DialogCreateHandle, DialogDescription, DialogFooter, DialogFormState, DialogHeader, type DialogLabels, type DialogMobileLayout, DialogPanel, DialogPortal, DialogProvider, type DialogSize, 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, type FormErrors, type FormProps, 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, InlineRenameInput, 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, type KanbanCardDragPreview, KanbanCardDragSurface, type KanbanCardDragSurfaceProps, type KanbanCardFieldSelection, type KanbanCardSelectionModifiers, 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, 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, LEGAL_TEXT_CLASS_NAME, Label, type LabelVariant, List, ListEmpty, ListGroup, ListGroupAction, ListGroupCount, ListGroupDescription, ListGroupHeader, ListGroupHeading, ListGroupTitle, ListItem, ListItemActions, ListItemContent, ListItemDescription, ListItemMedia, ListItemStatus, ListItemTitle, MenuAnchor, MenuPreviewLayout, MenuSection, OUTLINE_CONTROL_MIN_SIZE, 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, PanelTrigger, Popover, PopoverClose, PopoverPopup as PopoverContent, PopoverPopup, PopoverCreateHandle, PopoverDescription, PopoverPanel, PopoverTitle, PopoverTrigger, PreviewCardPrimitive, PreviewPane, Prose, type RegisterKanbanBoardAutoScrollOptions, type RegisterKanbanCardDragOptions, type ResolveKanbanGroupValueParams, type ResolveKanbanGroupingParams, ResourceCalendar, ResourceCalendarColumn, ResourceCalendarEntry, ResourceCalendarEntryTone, ResourceCalendarLaneLayout, ResourceCalendarLanePlacement, ResourceCalendarPlacement, 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, TOOLTIP_OPEN_DELAY_MS, TRACKED_DELETION_STYLE, TRACKED_INSERTION_STYLE, Table, type TableAlign, TableBody, TableCaption, TableCell, type TableCellProps, type TableColumnCapabilities, type TableColumnDescriptor, type TableDensity, TableFooter, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableInset, type TableProps, TableRow, type TableSchema, type TableScroll, type TableTone, Tabs, TabsPanel as TabsContent, TabsPanel, TabsList, TabsTab, TabsTab as TabsTrigger, TextSeparator, Textarea, type TextareaProps, type ToastPosition, ToastProvider, Toggle, ToggleGroup, ToggleGroupItem, type ToggleGroupProps, type ToggleProps, type ToggleVariant, Tooltip, TooltipPopup as TooltipContent, TooltipPopup, TooltipCreateHandle, TooltipFactTrigger, TooltipProvider, TooltipTrigger, TruncatedText, type TruncatedTextLines, type TruncatedTextProps, TypedCharacterEvent, UNKNOWN_AUTHOR_LABEL, type UseKanbanDropTargetOptions, type UseKanbanSortableOptions, UserText, type WorkspaceCompactNavigation, WorkspaceEndRail, type WorkspaceEndRailChatAction, type WorkspaceEndRailProps, type WorkspaceNavigation, WorkspaceShell, type WorkspaceShellProps, type WorkspaceTopBarContext, XLogoIcon, assertConsecutiveCalendarDates, badgeVariants, buildKanbanBoardMatrix, buttonAccessibleDisabledClass, buttonVariants, cn, composeRefs, containedEventHandler, containedHandler, contentDir, createKanbanDropIntent, duplicateColumnIds, emptyColor, entityTabGlyph, findTableColumn, formVariants, getFirstWeekday, getInitials, getKanbanBoardColumnIdentity, getKanbanBoardLaneIdentity, getKanbanGroupingPropertyId, getKanbanGroups, getKanbanHorizontalEdge, getLocaleWeekInfo, getResourceCalendarPlacement, getWeekendDays, hasKanbanColumnBands, hideableColumnIds, isKanbanGroupingRenderable, isStructuredInputType, isTextOverflowing, kanbanKeyboardCoordinates, layoutResourceCalendarEntries, nextCalendarDate, optionColors, orderKanbanCellsByColumns, outlineEntryText, registerKanbanBoardAutoScroll, registerKanbanCardDrag, resolveDragWidth, resolveInspectorDockWidth, resolveInspectorPaneMaxWidth, resolveInspectorPaneWidth, resolveKanbanColumnBands, resolveKanbanGroupOptions, resolveKanbanGrouping, resolveKeyboardWidth, resolveOptionColor, resolveToastUpdateTimeout, reviewDiffSegmentKeys, reviewSeverityTone, selectKanbanCardFieldIds, selectKanbanRows, shouldForceSidebarCollapsed, sidebarIdentityTriggerClassName, sortableColumnIds, stellaToast, stripDirectionalControls, tableColumnIds, tableColumnSizing, toastCountdownMs, toastDedupeId, typedCharacter, useContentDir, useCopiedFeedback, useCopyConfirmation, useDestructiveActionConfirmation, useInspectorPaneWidth, useIsMobile, useKanbanDropTarget, useKanbanSortable, useKanbanSortableSensors, useLatest, useSidebar, useSidebarInlineSize, useSidebarLayout, useViewportWidth, visibleColumnIds, withoutDirectionalControls };

package/dist/index.js

@@ -6,6 +6,7 @@ import { BOARD_DRAG_OVERLAY_Z_INDEX, OVERLAY_COLLISION_PADDING, OVERLAY_LAYER_CL
 import { TOOLTIP_OPEN_DELAY_MS, Tooltip, TooltipContent as TooltipPopup, TooltipCreateHandle, TooltipFactTrigger, TooltipProvider, TooltipTrigger } from "./components/tooltip.js";
 import { AlertDialog, AlertDialogBackdrop, AlertDialogClose, AlertDialogContent as AlertDialogPopup, AlertDialogCreateHandle, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPanel, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertDialogViewport } from "./components/alert-dialog.js";
 import { useIsMobile } from "./hooks/use-mobile.js";
+import { BidiText, UserText, stripDirectionalControls, withoutDirectionalControls } from "./components/bidi-text.js";
 import { Inspector, InspectorActions, InspectorContent, InspectorDescription, InspectorEmptyRow, InspectorHeader, InspectorHeaderText, InspectorProperty, InspectorPropertyLabel, InspectorPropertyList, InspectorPropertyValue, InspectorRail, InspectorRailCell, InspectorRailContent, InspectorRailFooter, InspectorRailIconButton, InspectorRailTab, InspectorSection, InspectorSectionTitle, InspectorTitle } from "./inspector/chrome.js";
 import { StellaMark } from "./components/stella-mark.js";
 import { BUTTON_CONTENT, BUTTON_SIZE_CONTENT, Button, ButtonTextRun, buttonAccessibleDisabledClass, buttonVariants } from "./components/button.js";
@@ -14,11 +15,11 @@ import { Sheet, SheetBackdrop, SheetClose, SheetContent as SheetPopup, SheetDesc
 import { WorkspaceEndRail, WorkspaceShell } from "./components/workspace-shell.js";
 import { Avatar, AvatarFallback, AvatarImage } from "./components/avatar.js";
 import { Badge, badgeVariants } from "./components/badge.js";
-import { BidiText, UserText } from "./components/bidi-text.js";
 import { DiscordLogoIcon, GitHubLogoIcon, XLogoIcon } from "./components/brand-icons.js";
 import { DirectionalIcon } from "./components/directional-icon.js";
 import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "./components/breadcrumb.js";
 import { Checkbox } from "./components/checkbox.js";
+import { Collapsible, CollapsiblePanel, CollapsibleTrigger } from "./components/collapsible.js";
 import { ColorPicker, ColorPickerContent, DEFAULT_PRESETS } from "./components/color-picker.js";
 import { containedEventHandler, containedHandler } from "./hooks/use-contained-handler.js";
 import { CONTROL_SIZE, CONTROL_SIZES } from "./lib/control-size.js";
@@ -61,6 +62,8 @@ import { MenuPreviewLayout, PreviewPane } from "./components/preview-pane.js";
 import { LEGAL_TEXT_CLASS_NAME, Prose } from "./components/prose.js";
 import { ScrollToTop } from "./components/scroll-to-top.js";
 import { SecretInput } from "./components/secret-input.js";
+import { Toggle } from "./components/toggle.js";
+import { ToggleGroup, ToggleGroupItem } from "./components/toggle-group.js";
 import { SegmentedIconToggle } from "./components/segmented-icon-toggle.js";
 import { Separator, TextSeparator } from "./components/separator.js";
 import { Skeleton } from "./components/skeleton.js";
@@ -105,4 +108,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, BUTTON_CONTENT, BUTTON_SIZE_CONTENT, Badge, BidiText, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonTextRun, CONTROL_SIZE, CONTROL_SIZES, COPIED_RESET_MS, 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, CopyButton, CopyFeedback, DEFAULT_PRESETS, DIALOG_MOBILE_LAYOUT, DIALOG_SIZE_CLASS_NAMES, DataTable, DatePickerPopover, DestructiveActionConfirmation, DestructiveConfirmDialog, DetailsGrid, DetailsItem, Dialog, DialogBackdrop, DialogBackdrop as DialogOverlay, DialogClose, DialogPopup as DialogContent, DialogPopup, DialogCreateHandle, DialogDescription, DialogFooter, DialogFormState, DialogHeader, DialogPanel, DialogPortal, DialogProvider, 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, InlineRenameInput, 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, KanbanSubgroupBoard, KanbanVirtualCell, LEGAL_TEXT_CLASS_NAME, Label, List, ListEmpty, ListGroup, ListGroupAction, ListGroupCount, ListGroupDescription, ListGroupHeader, ListGroupHeading, ListGroupTitle, ListItem, ListItemActions, ListItemContent, ListItemDescription, ListItemMedia, ListItemStatus, ListItemTitle, MenuAnchor, MenuPreviewLayout, MenuSection, OUTLINE_CONTROL_MIN_SIZE, OUTLINE_EMPHASIS, OVERLAY_COLLISION_PADDING, OVERLAY_LAYER_CLASS_NAMES, OutlineRail, PROPERTY_ROW_GRID, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PanelTrigger, Popover, PopoverClose, PopoverPopup as PopoverContent, PopoverPopup, PopoverCreateHandle, PopoverDescription, PopoverPanel, PopoverTitle, PopoverTrigger, PreviewCardPrimitive, PreviewPane, Prose, 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, TOOLTIP_OPEN_DELAY_MS, 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, TooltipFactTrigger, TooltipProvider, TooltipTrigger, TruncatedText, UNKNOWN_AUTHOR_LABEL, UserText, WorkspaceEndRail, WorkspaceShell, XLogoIcon, assertConsecutiveCalendarDates, badgeVariants, buildKanbanBoardMatrix, buttonAccessibleDisabledClass, buttonVariants, cn, composeRefs, containedEventHandler, containedHandler, contentDir, createKanbanDropIntent, duplicateColumnIds, emptyColor, entityTabGlyph, findTableColumn, formVariants, getFirstWeekday, getInitials, getKanbanBoardColumnIdentity, getKanbanBoardLaneIdentity, getKanbanGroupingPropertyId, getKanbanGroups, getKanbanHorizontalEdge, getLocaleWeekInfo, getResourceCalendarPlacement, getWeekendDays, hasKanbanColumnBands, hideableColumnIds, isKanbanGroupingRenderable, isStructuredInputType, isTextOverflowing, kanbanKeyboardCoordinates, layoutResourceCalendarEntries, nextCalendarDate, optionColors, orderKanbanCellsByColumns, outlineEntryText, registerKanbanBoardAutoScroll, registerKanbanCardDrag, resolveDragWidth, resolveInspectorDockWidth, resolveInspectorPaneMaxWidth, resolveInspectorPaneWidth, resolveKanbanColumnBands, resolveKanbanGroupOptions, resolveKanbanGrouping, resolveKeyboardWidth, resolveOptionColor, resolveToastUpdateTimeout, reviewDiffSegmentKeys, reviewSeverityTone, selectKanbanCardFieldIds, selectKanbanRows, shouldForceSidebarCollapsed, sidebarIdentityTriggerClassName, sortableColumnIds, stellaToast, tableColumnIds, tableColumnSizing, toastCountdownMs, toastDedupeId, typedCharacter, useContentDir, useCopiedFeedback, useCopyConfirmation, useDestructiveActionConfirmation, useInspectorPaneWidth, useIsMobile, useKanbanDropTarget, useKanbanSortable, useKanbanSortableSensors, useLatest, useSidebar, useSidebarInlineSize, useSidebarLayout, 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, BUTTON_CONTENT, BUTTON_SIZE_CONTENT, Badge, BidiText, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonTextRun, CONTROL_SIZE, CONTROL_SIZES, COPIED_RESET_MS, CalendarCell, CalendarEntryButton, CalendarEntrySurface, CalendarGrid, CalendarHeaderCell, CalendarHeaderRow, Checkbox, Collapsible, CollapsiblePanel, CollapsibleTrigger, 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, CopyButton, CopyFeedback, DEFAULT_PRESETS, DIALOG_MOBILE_LAYOUT, DIALOG_SIZE_CLASS_NAMES, DataTable, DatePickerPopover, DestructiveActionConfirmation, DestructiveConfirmDialog, DetailsGrid, DetailsItem, Dialog, DialogBackdrop, DialogBackdrop as DialogOverlay, DialogClose, DialogPopup as DialogContent, DialogPopup, DialogCreateHandle, DialogDescription, DialogFooter, DialogFormState, DialogHeader, DialogPanel, DialogPortal, DialogProvider, 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, InlineRenameInput, 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, KanbanSubgroupBoard, KanbanVirtualCell, LEGAL_TEXT_CLASS_NAME, Label, List, ListEmpty, ListGroup, ListGroupAction, ListGroupCount, ListGroupDescription, ListGroupHeader, ListGroupHeading, ListGroupTitle, ListItem, ListItemActions, ListItemContent, ListItemDescription, ListItemMedia, ListItemStatus, ListItemTitle, MenuAnchor, MenuPreviewLayout, MenuSection, OUTLINE_CONTROL_MIN_SIZE, OUTLINE_EMPHASIS, OVERLAY_COLLISION_PADDING, OVERLAY_LAYER_CLASS_NAMES, OutlineRail, PROPERTY_ROW_GRID, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PanelTrigger, Popover, PopoverClose, PopoverPopup as PopoverContent, PopoverPopup, PopoverCreateHandle, PopoverDescription, PopoverPanel, PopoverTitle, PopoverTrigger, PreviewCardPrimitive, PreviewPane, Prose, 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, TOOLTIP_OPEN_DELAY_MS, 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, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipPopup as TooltipContent, TooltipPopup, TooltipCreateHandle, TooltipFactTrigger, TooltipProvider, TooltipTrigger, TruncatedText, UNKNOWN_AUTHOR_LABEL, UserText, WorkspaceEndRail, WorkspaceShell, XLogoIcon, assertConsecutiveCalendarDates, badgeVariants, buildKanbanBoardMatrix, buttonAccessibleDisabledClass, buttonVariants, cn, composeRefs, containedEventHandler, containedHandler, contentDir, createKanbanDropIntent, duplicateColumnIds, emptyColor, entityTabGlyph, findTableColumn, formVariants, getFirstWeekday, getInitials, getKanbanBoardColumnIdentity, getKanbanBoardLaneIdentity, getKanbanGroupingPropertyId, getKanbanGroups, getKanbanHorizontalEdge, getLocaleWeekInfo, getResourceCalendarPlacement, getWeekendDays, hasKanbanColumnBands, hideableColumnIds, isKanbanGroupingRenderable, isStructuredInputType, isTextOverflowing, kanbanKeyboardCoordinates, layoutResourceCalendarEntries, nextCalendarDate, optionColors, orderKanbanCellsByColumns, outlineEntryText, registerKanbanBoardAutoScroll, registerKanbanCardDrag, resolveDragWidth, resolveInspectorDockWidth, resolveInspectorPaneMaxWidth, resolveInspectorPaneWidth, resolveKanbanColumnBands, resolveKanbanGroupOptions, resolveKanbanGrouping, resolveKeyboardWidth, resolveOptionColor, resolveToastUpdateTimeout, reviewDiffSegmentKeys, reviewSeverityTone, selectKanbanCardFieldIds, selectKanbanRows, shouldForceSidebarCollapsed, sidebarIdentityTriggerClassName, sortableColumnIds, stellaToast, stripDirectionalControls, tableColumnIds, tableColumnSizing, toastCountdownMs, toastDedupeId, typedCharacter, useContentDir, useCopiedFeedback, useCopyConfirmation, useDestructiveActionConfirmation, useInspectorPaneWidth, useIsMobile, useKanbanDropTarget, useKanbanSortable, useKanbanSortableSensors, useLatest, useSidebar, useSidebarInlineSize, useSidebarLayout, useViewportWidth, visibleColumnIds, withoutDirectionalControls };

package/dist/inspector/chrome.js

@@ -1,5 +1,6 @@
 import { cn } from "../lib/utils.js";
 import { PROPERTY_ROW_GRID, SIDE_RAIL_CONTAINER_CLASS, SIDE_RAIL_ICON_BUTTON_SIZE, TOOLBAR_ROW_HEIGHT } from "./layout-tokens.js";
+import { withoutDirectionalControls } from "../components/bidi-text.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/inspector/chrome.tsx
 /**
@@ -91,7 +92,7 @@ const InspectorTitle = ({ children, className, ...props }) => /* @__PURE__ */ js
 	"data-slot": "inspector-title",
 	dir: "auto",
 	...props,
-	children
+	children: withoutDirectionalControls(children)
 });
 const InspectorDescription = ({ className, ...props }) => /* @__PURE__ */ jsx("p", {
 	className: cn("text-muted-foreground text-2xs truncate [unicode-bidi:isolate]", className),

package/dist/inspector/facet-bar.js

@@ -83,14 +83,18 @@ const InspectorFacetBar = ({ facet, facets, labels, disabledFacets, pulseSeq, ac
 		"data-slot": "inspector-facet-bar",
 		ref: containerRef,
 		children: [
-			visibleFacets.map((value) => /* @__PURE__ */ jsx(FacetChip, {
-				activeBadge,
-				disabled: disabledFacets?.has(value) ?? false,
-				isActive: value === facet,
-				label: labels[value],
-				onSelect: () => onChange(value),
-				value
-			}, value)),
+			/* @__PURE__ */ jsx("div", {
+				className: "contents",
+				role: "tablist",
+				children: visibleFacets.map((value) => /* @__PURE__ */ jsx(FacetChip, {
+					activeBadge,
+					disabled: disabledFacets?.has(value) ?? false,
+					isActive: value === facet,
+					label: labels[value],
+					onSelect: () => onChange(value),
+					value
+				}, value))
+			}),
 			overflowing && /* @__PURE__ */ jsxs(Menu, { children: [/* @__PURE__ */ jsx(MenuTrigger, {
 				"aria-label": overflowMenuLabel,
 				className: "ms-auto",
@@ -161,11 +165,13 @@ const CHIP_CLASS = "shrink-0 rounded-md px-1.5 py-1 text-xs font-medium whitespa
 const INACTIVE_CHIP_CLASS = "text-muted-foreground hover:bg-muted hover:text-foreground";
 const FacetChip = ({ label, value, isActive, disabled, activeBadge, onSelect }) => /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
 	render: /* @__PURE__ */ jsx("button", {
+		"aria-selected": isActive,
 		className: cn(CHIP_CLASS, isActive ? "bg-foreground text-background" : INACTIVE_CHIP_CLASS, disabled && "cursor-not-allowed opacity-40 hover:bg-transparent"),
 		"data-facet-chip-active": isActive ? "" : void 0,
 		"data-facet-value": value,
 		disabled,
 		onClick: onSelect,
+		role: "tab",
 		type: "button"
 	}),
 	children: label

package/dist/kanban/column-bands.js

@@ -37,7 +37,7 @@ const resolveKanbanColumnBands = (columns) => {
 			last.columns.push(column);
 			continue;
 		}
-		if (last?.band !== null && last?.band !== void 0) closedBandIds.add(last.band.id);
+		if (last !== void 0 && last.band !== null) closedBandIds.add(last.band.id);
 		if (band !== null && closedBandIds.has(band.id)) return panic(`Kanban column band "${band.id}" is not contiguous: it resumes at column ${getKanbanBoardColumnIdentity(column)}`);
 		spans.push({
 			band,

package/dist/lib/inline-reorder.js

@@ -6,9 +6,9 @@ const toInlineDropPosition = (edge, direction) => {
 /** The new order, or null when the drop leaves the order unchanged. */
 const reorderInlineIds = ({ ids, draggedId, targetId, position }) => {
 	if (draggedId === targetId || !ids.includes(draggedId) || !ids.includes(targetId)) return null;
-	const withoutDragged = ids.filter((id) => id !== draggedId);
-	const targetIndex = withoutDragged.indexOf(targetId);
-	const reordered = withoutDragged.toSpliced(position === "after" ? targetIndex + 1 : targetIndex, 0, draggedId);
+	const reordered = ids.filter((id) => id !== draggedId);
+	const targetIndex = reordered.indexOf(targetId);
+	reordered.splice(position === "after" ? targetIndex + 1 : targetIndex, 0, draggedId);
 	return reordered.every((id, index) => id === ids[index]) ? null : reordered;
 };
 //#endregion

package/dist/lib/tab-order.d.ts

@@ -10,5 +10,23 @@
  * the whole of the workaround, so compare identity rather than count, because
  * React moves the same nodes when it reorders keyed children.
  */
+type TabEdges = {
+  left: number;
+  right: number;
+};
+type TabStrip = {
+  scrollLeft: number;
+  getBoundingClientRect: () => TabEdges;
+  querySelector: (selector: string) => {
+    getBoundingClientRect: () => TabEdges;
+  } | null;
+};
+/**
+ * Brings the active tab back inside a horizontal strip that scrolled it out of
+ * view. Moves the strip only, never an ancestor, and works from rendered edges
+ * so a right-to-left strip needs no separate case.
+ */
+export declare const revealActiveTab: (list: TabStrip) => void;
 export declare const hasTabOrderChanged: <T>(previous: readonly T[], next: readonly T[]) => boolean;
-//#endregion
+//#endregion
+export {};

package/dist/lib/tab-order.js

@@ -1,15 +1,17 @@
 //#region src/lib/tab-order.ts
 /**
-* Whether a committed tab list holds different elements, or the same elements
-* in a different order, than the previous commit.
-*
-* Base UI measures the tabs indicator during render, so it reads the DOM as it
-* stood before the commit. Its correction is a `ResizeObserver`, which catches
-* an insertion or a removal (the list's own width changes) but not a reorder:
-* there the tabs swap places without anything changing size. Detecting that is
-* the whole of the workaround, so compare identity rather than count, because
-* React moves the same nodes when it reorders keyed children.
+* Brings the active tab back inside a horizontal strip that scrolled it out of
+* view. Moves the strip only, never an ancestor, and works from rendered edges
+* so a right-to-left strip needs no separate case.
 */
+const revealActiveTab = (list) => {
+	const active = list.querySelector("[role=\"tab\"][aria-selected=\"true\"]");
+	if (active === null) return;
+	const strip = list.getBoundingClientRect();
+	const tab = active.getBoundingClientRect();
+	if (tab.left < strip.left) list.scrollLeft -= strip.left - tab.left;
+	else if (tab.right > strip.right) list.scrollLeft += tab.right - strip.right;
+};
 const hasTabOrderChanged = (previous, next) => previous.length !== next.length || next.some((tab, index) => tab !== previous[index]);
 //#endregion
-export { hasTabOrderChanged };
+export { hasTabOrderChanged, revealActiveTab };

package/dist/review/review-comment-card.js

@@ -1,7 +1,7 @@
 import { CheckIcon, RotateCcwIcon, Trash2Icon } from "../icons.js";
 import { cn } from "../lib/utils.js";
-import { Button } from "../components/button.js";
 import { BidiText } from "../components/bidi-text.js";
+import { Button } from "../components/button.js";
 import { ReviewAuthorAvatar } from "./review-author-avatar.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Temporal } from "temporal-polyfill/full";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stll/ui",
-  "version": "0.60.0",
+  "version": "0.62.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",
@@ -50,6 +50,10 @@
       "types": "./dist/components/accordion.d.ts",
       "import": "./dist/components/accordion.js"
     },
+    "./collapsible": {
+      "types": "./dist/components/collapsible.d.ts",
+      "import": "./dist/components/collapsible.js"
+    },
     "./application-rail": {
       "types": "./dist/components/application-rail.d.ts",
       "import": "./dist/components/application-rail.js"
@@ -502,6 +506,14 @@
       "types": "./dist/components/toast.d.ts",
       "import": "./dist/components/toast.js"
     },
+    "./toggle": {
+      "types": "./dist/components/toggle.d.ts",
+      "import": "./dist/components/toggle.js"
+    },
+    "./toggle-group": {
+      "types": "./dist/components/toggle-group.d.ts",
+      "import": "./dist/components/toggle-group.js"
+    },
     "./tooltip": {
       "types": "./dist/components/tooltip.d.ts",
       "import": "./dist/components/tooltip.js"