@stll/ui 0.45.0 → 0.47.0

package/README.md

@@ -213,7 +213,8 @@ column and keep their trailing column, so they never scroll sideways.
   <ListGroupHeader>
     <ListGroupHeading>
       <ListGroupTitle id="apps">
-        Apps with access<ListGroupCount>3</ListGroupCount>
+        Apps with access
+        <ListGroupCount count="3" />
       </ListGroupTitle>
       <ListGroupDescription>Apps you authorized.</ListGroupDescription>
     </ListGroupHeading>

package/dist/components/ai-label.d.ts

@@ -0,0 +1,33 @@
+//#region src/components/ai-label.d.ts
+type AiLabelProps = {
+  /**
+   * The words the mark shows ("AI", "AI topics"), already translated. They
+   * are also the control's accessible name, so what a sighted reader sees is
+   * what a screen-reader user hears.
+   */
+  label: string;
+  /**
+   * What the reader is told about the content the mark stands beside, already
+   * translated. Hosts pass the sentence for one closed disclosure context
+   * (`@stll/api-contract/ai-disclosure`), never free text.
+   */
+  disclosure: string;
+  className?: string | undefined;
+};
+/**
+ * The mark on content a model wrote, and the one place a reader learns what
+ * that means.
+ *
+ * It keeps the weight of the plain label it replaces: the surrounding text's
+ * size, colour, case and tracking, a small sparkle, no chip and no tint. The
+ * only addition is that it is a button: a click, a tap, Enter or Space opens
+ * a small popover with the disclosure, and Escape or a click outside closes
+ * it. Nothing depends on hover.
+ *
+ * The trigger stays inline, so it can sit inside a heading or a line of
+ * text. Never inside another control (a `<summary>`, a link, a button): it is
+ * one itself, and nested interactive content is unreachable to assistive
+ * technology.
+ */
+export declare const AiLabel: ({ label, disclosure, className }: AiLabelProps) => import("react").JSX.Element;
+//#endregion

package/dist/components/ai-label.js

@@ -0,0 +1,42 @@
+"use client";
+import { SparklesIcon } from "../icons.js";
+import { cn } from "../lib/utils.js";
+import { Popover, PopoverContent as PopoverPopup, PopoverDescription, PopoverTrigger } from "./popover.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/ai-label.tsx
+/**
+* The mark on content a model wrote, and the one place a reader learns what
+* that means.
+*
+* It keeps the weight of the plain label it replaces: the surrounding text's
+* size, colour, case and tracking, a small sparkle, no chip and no tint. The
+* only addition is that it is a button: a click, a tap, Enter or Space opens
+* a small popover with the disclosure, and Escape or a click outside closes
+* it. Nothing depends on hover.
+*
+* The trigger stays inline, so it can sit inside a heading or a line of
+* text. Never inside another control (a `<summary>`, a link, a button): it is
+* one itself, and nested interactive content is unreachable to assistive
+* technology.
+*/
+const AiLabel = ({ label, disclosure, className }) => /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsxs(PopoverTrigger, {
+	className: cn("focus-visible:ring-ring relative inline-flex cursor-pointer items-center justify-center gap-1 rounded-sm align-middle tracking-[inherit] text-inherit [text-transform:inherit] decoration-dotted underline-offset-2 outline-none [font:inherit] hover:underline focus-visible:ring-2 data-popup-open:underline pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11", className),
+	"data-slot": "ai-label",
+	type: "button",
+	children: [/* @__PURE__ */ jsx(SparklesIcon, {
+		"aria-hidden": true,
+		className: "size-3 shrink-0"
+	}), label]
+}), /* @__PURE__ */ jsx(PopoverPopup, {
+	"aria-label": label,
+	className: "max-w-72",
+	"data-slot": "ai-label-popup",
+	padding: "sm",
+	side: "bottom",
+	children: /* @__PURE__ */ jsx(PopoverDescription, {
+		className: "text-xs leading-relaxed text-pretty",
+		children: disclosure
+	})
+})] });
+//#endregion
+export { AiLabel };

package/dist/components/alert-dialog.js

@@ -1,6 +1,7 @@
 "use client";
 import { cn } from "../lib/utils.js";
 import { OVERLAY_LAYER_CLASS_NAMES } from "../lib/overlay-layer.js";
+import { SAFE_AREA_OVERLAY_GUTTER_CLASS_NAME } from "../lib/safe-area.js";
 import { renderTooltipTrigger } from "./tooltip-trigger-helper.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { AlertDialog as AlertDialog$1 } from "@base-ui/react/alert-dialog";
@@ -24,7 +25,7 @@ const AlertDialogBackdrop = ({ className, layer = "default", ...props }) => /* @
 	...props
 });
 const AlertDialogViewport = ({ className, layer = "default", ...props }) => /* @__PURE__ */ jsx(AlertDialog$1.Viewport, {
-	className: cn("fixed inset-0 grid grid-rows-[1fr_auto_3fr] justify-items-center p-4", OVERLAY_LAYER_CLASS_NAMES[layer], className),
+	className: cn("fixed inset-0 grid grid-rows-[1fr_auto_3fr] justify-items-center", SAFE_AREA_OVERLAY_GUTTER_CLASS_NAME, OVERLAY_LAYER_CLASS_NAMES[layer], className),
 	"data-slot": "alert-dialog-viewport",
 	...props
 });
@@ -32,7 +33,7 @@ const AlertDialogPopup = ({ className, bottomStickOnMobile = true, layer = "defa
 	className: cn(bottomStickOnMobile && "max-sm:grid-rows-[1fr_auto] max-sm:p-0 max-sm:pt-12"),
 	layer,
 	children: /* @__PURE__ */ jsx(AlertDialog$1.Popup, {
-		className: cn("bg-popover text-popover-foreground relative row-start-2 flex max-h-full min-h-0 w-full max-w-lg min-w-0 -translate-y-[calc(1.25rem*var(--nested-dialogs))] scale-[calc(1-0.1*var(--nested-dialogs))] flex-col rounded-2xl border opacity-[calc(1-0.1*var(--nested-dialogs))] shadow-lg/5 transition-[scale,opacity,translate] duration-200 ease-in-out will-change-transform not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-ending-style:scale-98 data-ending-style:opacity-0 data-nested:data-ending-style:translate-y-8 data-nested-dialog-open:origin-top data-starting-style:scale-98 data-starting-style:opacity-0 data-nested:data-starting-style:translate-y-8 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]", bottomStickOnMobile && "max-sm:max-w-none max-sm:rounded-none max-sm:border-x-0 max-sm:border-t max-sm:border-b-0 max-sm:opacity-[calc(1-min(var(--nested-dialogs),1))] max-sm:before:hidden max-sm:before:rounded-none max-sm:data-ending-style:translate-y-4 max-sm:data-starting-style:translate-y-4", className),
+		className: cn("bg-popover text-popover-foreground relative row-start-2 flex max-h-full min-h-0 w-full max-w-lg min-w-0 -translate-y-[calc(1.25rem*var(--nested-dialogs))] scale-[calc(1-0.1*var(--nested-dialogs))] flex-col rounded-2xl border opacity-[calc(1-0.1*var(--nested-dialogs))] shadow-lg/5 transition-[scale,opacity,translate] duration-200 ease-out will-change-transform not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-ending-style:scale-98 data-ending-style:opacity-0 data-ending-style:duration-150 data-nested:data-ending-style:translate-y-8 data-nested-dialog-open:origin-top data-starting-style:scale-98 data-starting-style:opacity-0 data-nested:data-starting-style:translate-y-8 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]", bottomStickOnMobile && "max-sm:max-w-none max-sm:rounded-none max-sm:border-x-0 max-sm:border-t max-sm:border-b-0 max-sm:pb-(--safe-area-bottom) max-sm:opacity-[calc(1-min(var(--nested-dialogs),1))] max-sm:before:hidden max-sm:before:rounded-none max-sm:data-ending-style:translate-y-4 max-sm:data-starting-style:translate-y-4", className),
 		"data-slot": "alert-dialog-popup",
 		...props
 	})

package/dist/components/animated-count.d.ts

@@ -0,0 +1,13 @@
+//#region src/components/animated-count.d.ts
+/**
+ * A formatted number whose changed characters fade in. The caller formats
+ * (locale digits, units); the glyphs stay plain inline text so bidirectional
+ * ordering is the browser's, and only opacity moves. The first render is
+ * still: a count that loads does not announce itself.
+ */
+declare const AnimatedCount: ({ className, value }: {
+  className?: string;
+  value: string;
+}) => import("react").JSX.Element;
+//#endregion
+export { AnimatedCount };

package/dist/components/animated-count.js

@@ -0,0 +1,63 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+//#region src/components/animated-count.tsx
+/**
+* Aligns characters from the end, where digits keep their place value, so
+* 99 → 100 changes every glyph but 120 → 121 only the last one. An unchanged
+* glyph keeps its key and therefore its DOM node: it never replays its fade.
+*/
+const toGlyphs = (value, previous, generation) => {
+	const chars = Array.from(value);
+	return chars.map((char, index) => {
+		const fromEnd = chars.length - index;
+		const priorIndex = previous === null ? -1 : previous.length - fromEnd;
+		const prior = priorIndex >= 0 ? previous?.[priorIndex] : void 0;
+		if (prior?.char === char) return prior;
+		return {
+			char,
+			enters: previous !== null,
+			key: `${generation}:${fromEnd}`
+		};
+	});
+};
+/**
+* A formatted number whose changed characters fade in. The caller formats
+* (locale digits, units); the glyphs stay plain inline text so bidirectional
+* ordering is the browser's, and only opacity moves. The first render is
+* still: a count that loads does not announce itself.
+*/
+const AnimatedCount = ({ className, value }) => {
+	const [state, setState] = useState(() => ({
+		generation: 0,
+		glyphs: toGlyphs(value, null, 0),
+		value
+	}));
+	let { glyphs } = state;
+	if (state.value !== value) {
+		const generation = state.generation + 1;
+		glyphs = toGlyphs(value, state.glyphs, generation);
+		setState({
+			generation,
+			glyphs,
+			value
+		});
+	}
+	return /* @__PURE__ */ jsxs("span", {
+		className: cn("tabular-nums", className),
+		"data-slot": "animated-count",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: value
+		}), /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			children: glyphs.map((glyph) => /* @__PURE__ */ jsx("span", {
+				className: cn(glyph.enters && "motion-safe:animate-text-fade"),
+				children: glyph.char
+			}, glyph.key))
+		})]
+	});
+};
+//#endregion
+export { AnimatedCount };

package/dist/components/application-rail.js

@@ -22,7 +22,7 @@ const ApplicationRailHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("
 	...props
 });
 const ApplicationRailContent = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
-	className: cn("flex min-h-0 flex-1 [scrollbar-width:none] flex-col gap-2 overflow-x-hidden overflow-y-auto [&::-webkit-scrollbar]:hidden", className),
+	className: cn("flex min-h-0 flex-1 [scrollbar-width:none] flex-col gap-2 overflow-x-hidden overflow-y-auto overscroll-contain [&::-webkit-scrollbar]:hidden", className),
 	"data-slot": "application-rail-content",
 	...props
 });

package/dist/components/brand-icons.d.ts

@@ -3,4 +3,5 @@ import * as React$1 from "react";
 type BrandIconProps = React$1.ComponentProps<"svg">;
 export declare const DiscordLogoIcon: (props: BrandIconProps) => React$1.JSX.Element;
 export declare const GitHubLogoIcon: (props: BrandIconProps) => React$1.JSX.Element;
+export declare const XLogoIcon: (props: BrandIconProps) => React$1.JSX.Element;
 //#endregion

package/dist/components/brand-icons.js

@@ -14,5 +14,12 @@ const GitHubLogoIcon = (props) => /* @__PURE__ */ jsx("svg", {
 	...props,
 	children: /* @__PURE__ */ jsx("path", { d: "M6.766 11.328c-2.063-.25-3.516-1.734-3.516-3.656 0-.781.281-1.625.75-2.188-.203-.515-.172-1.609.063-2.062.625-.078 1.468.25 1.968.703.594-.187 1.219-.281 1.985-.281.765 0 1.39.094 1.953.265.484-.437 1.344-.765 1.969-.687.218.422.25 1.515.046 2.047.5.593.766 1.39.766 2.203 0 1.922-1.453 3.375-3.547 3.64.531.344.89 1.094.89 1.954v1.625c0 .468.391.734.86.547C13.781 14.359 16 11.53 16 8.03 16 3.61 12.406 0 7.984 0 3.563 0 0 3.61 0 8.031a7.88 7.88 0 0 0 5.172 7.422c.422.156.828-.125.828-.547v-1.25c-.219.094-.5.156-.75.156-1.031 0-1.64-.562-2.078-1.609-.172-.422-.36-.672-.719-.719-.187-.015-.25-.093-.25-.187 0-.188.313-.328.625-.328.453 0 .844.281 1.25.86.313.452.64.655 1.031.655s.641-.14 1-.5c.266-.265.47-.5.657-.656" })
 });
+const XLogoIcon = (props) => /* @__PURE__ */ jsx("svg", {
+	"aria-hidden": "true",
+	fill: "currentColor",
+	viewBox: "0 0 24 24",
+	...props,
+	children: /* @__PURE__ */ jsx("path", { d: "M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.64 7.584H.47l8.6-9.835L0 1.153h7.594l5.243 6.932 6.064-6.932Zm-1.29 19.49h2.039L6.486 3.24H4.298l13.313 17.403Z" })
+});
 //#endregion
-export { DiscordLogoIcon, GitHubLogoIcon };
+export { DiscordLogoIcon, GitHubLogoIcon, XLogoIcon };

package/dist/components/button.d.ts

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

package/dist/components/button.js

@@ -19,7 +19,17 @@ import { cva } from "class-variance-authority";
 * swaps the cursor so the control still reads as unavailable on hover.
 */
 const buttonAccessibleDisabledClass = "cursor-not-allowed opacity-64";
-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 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", {
+/**
+* Press feedback: the button gives slightly under the pointer.
+*
+* Applied by `Button` only while it can act, so a disabled or loading button
+* never appears to respond. `scale` is its own property in Tailwind v4, so it
+* composes with a caller's `translate` (a vertically centred icon button) and
+* the transition names only the transform family. Menu rows and link-styled
+* buttons keep the treatment of their surface instead.
+*/
+const buttonPressClass = "motion-safe:transition-transform motion-safe:duration-150 ease-out motion-safe:active:scale-[0.98]";
+const buttonVariants = cva("focus-visible:ring-ring focus-visible:ring-offset-background relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 rounded-lg border text-base font-medium whitespace-nowrap outline-none select-none before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] focus-visible:ring-2 focus-visible:ring-offset-1 disabled:pointer-events-none disabled:opacity-64 sm:text-sm pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4", {
 	defaultVariants: {
 		size: "default",
 		variant: "default"
@@ -68,7 +78,7 @@ function Button({ className, variant, size, render, loading, children, disabled,
 			size: "sm",
 			variant: "decorative"
 		}), children] }) : children,
-		className: cn(buttonVariants({
+		className: cn(disposition === BUTTON_DISPOSITION.enabled && size !== "row" && variant !== "link" && buttonPressClass, buttonVariants({
 			className,
 			size,
 			variant

package/dist/components/command.js

@@ -66,7 +66,7 @@ const CommandEmpty = ({ className, ...props }) => /* @__PURE__ */ jsx(Autocomple
 	...props
 });
 const CommandList = ({ className, ...props }) => /* @__PURE__ */ jsx(Autocomplete.List, {
-	className: cn("max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto", className),
+	className: cn("max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto overscroll-contain", className),
 	"data-slot": "command-list",
 	...props
 });

package/dist/components/dialog.js

@@ -2,6 +2,7 @@
 import { XIcon } from "../icons.js";
 import { cn } from "../lib/utils.js";
 import { OVERLAY_LAYER_CLASS_NAMES } from "../lib/overlay-layer.js";
+import { SAFE_AREA_OVERLAY_GUTTER_CLASS_NAME } from "../lib/safe-area.js";
 import { renderTooltipTrigger } from "./tooltip-trigger-helper.js";
 import { Button } from "./button.js";
 import { ScrollArea } from "./scroll-area.js";
@@ -86,7 +87,7 @@ const DialogBackdrop = ({ className, layer = "default", ...props }) => /* @__PUR
 	...props
 });
 const DialogViewport = ({ className, layer = "default", ...props }) => /* @__PURE__ */ jsx(Dialog$1.Viewport, {
-	className: cn("fixed inset-0 grid grid-rows-[1fr_auto_3fr] justify-items-center p-4", OVERLAY_LAYER_CLASS_NAMES[layer], className),
+	className: cn("fixed inset-0 grid grid-rows-[1fr_auto_3fr] justify-items-center", SAFE_AREA_OVERLAY_GUTTER_CLASS_NAME, OVERLAY_LAYER_CLASS_NAMES[layer], className),
 	"data-slot": "dialog-viewport",
 	...props
 });
@@ -100,7 +101,7 @@ const DialogPopup = ({ backdropClassName, className, children, showCloseButton =
 		className: cn(bottomStickOnMobile && "max-sm:grid-rows-[1fr_auto] max-sm:p-0 max-sm:pt-12", viewportClassName),
 		layer,
 		children: /* @__PURE__ */ jsxs(Dialog$1.Popup, {
-			className: cn("bg-popover text-popover-foreground relative row-start-2 flex max-h-full min-h-0 w-full max-w-lg min-w-0 -translate-y-[calc(1.25rem*var(--nested-dialogs))] scale-[calc(1-0.1*var(--nested-dialogs))] flex-col rounded-2xl border opacity-[calc(1-0.1*var(--nested-dialogs))] shadow-lg/5 transition-[scale,opacity,translate] duration-200 ease-in-out will-change-transform not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-ending-style:scale-98 data-ending-style:opacity-0 data-nested:data-ending-style:translate-y-8 data-nested-dialog-open:origin-top data-starting-style:scale-98 data-starting-style:opacity-0 data-nested:data-starting-style:translate-y-8 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]", bottomStickOnMobile && "max-sm:max-w-none max-sm:rounded-none max-sm:border-x-0 max-sm:border-t max-sm:border-b-0 max-sm:opacity-[calc(1-min(var(--nested-dialogs),1))] max-sm:before:hidden max-sm:before:rounded-none max-sm:data-ending-style:translate-y-4 max-sm:data-starting-style:translate-y-4", className),
+			className: cn("bg-popover text-popover-foreground relative row-start-2 flex max-h-full min-h-0 w-full max-w-lg min-w-0 -translate-y-[calc(1.25rem*var(--nested-dialogs))] scale-[calc(1-0.1*var(--nested-dialogs))] flex-col rounded-2xl border opacity-[calc(1-0.1*var(--nested-dialogs))] shadow-lg/5 transition-[scale,opacity,translate] duration-200 ease-out will-change-transform not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-ending-style:scale-98 data-ending-style:opacity-0 data-ending-style:duration-150 data-nested:data-ending-style:translate-y-8 data-nested-dialog-open:origin-top data-starting-style:scale-98 data-starting-style:opacity-0 data-nested:data-starting-style:translate-y-8 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]", bottomStickOnMobile && "max-sm:max-w-none max-sm:rounded-none max-sm:border-x-0 max-sm:border-t max-sm:border-b-0 max-sm:pb-(--safe-area-bottom) max-sm:opacity-[calc(1-min(var(--nested-dialogs),1))] max-sm:before:hidden max-sm:before:rounded-none max-sm:data-ending-style:translate-y-4 max-sm:data-starting-style:translate-y-4", className),
 			"data-slot": "dialog-popup",
 			...props,
 			children: [

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

@@ -4,7 +4,7 @@ import { DocumentIdentity } from "./document-identity-badge.logic.js";
 export declare const DocumentIdentityBadge: ({ identity, size, title }: DocumentIdentityBadgeProps) => import("react").JSX.Element;
 type DocumentIdentityBadgeProps = {
   identity: DocumentIdentity;
-  /** Decision chips can fit an inline metadata row. */
+  /** Court chip size; statute labels follow their container width. */
   size?: CourtBadgeSize | undefined;
   /** Omit when the enclosing tab already supplies the full-title tooltip. */
   title?: string | undefined;

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

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

package/dist/components/input-otp.js

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

package/dist/components/landing.js

@@ -22,7 +22,7 @@ const LandingLayout = ({ actions, hero, children, footer }) => /* @__PURE__ */ j
 				children
 			}),
 			footer !== void 0 && /* @__PURE__ */ jsx(ScrollArea, {
-				className: "h-auto max-h-[40vh] w-full shrink-0",
+				className: "h-auto max-h-[40dvh] w-full shrink-0",
 				scrollFade: true,
 				children: footer
 			})

package/dist/components/list.d.ts

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

package/dist/components/list.js

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

package/dist/components/menu.js

@@ -34,7 +34,7 @@ const MenuPopup = ({ children, className, sideOffset = 4, align, alignOffset, si
 		"data-slot": "menu-popup",
 		...props,
 		children: [header, /* @__PURE__ */ jsx("div", {
-			className: cn("min-h-0 w-full flex-1 overflow-y-auto p-1", viewportClassName),
+			className: cn("min-h-0 w-full flex-1 overflow-y-auto overscroll-contain p-1", viewportClassName),
 			children
 		})]
 	})

package/dist/components/popover.js

@@ -42,7 +42,7 @@ const PopoverPopup = ({ children, className, side = "bottom", align = "center",
 		"data-slot": "popover-popup",
 		...props,
 		children: /* @__PURE__ */ jsx(Popover$1.Viewport, {
-			className: cn("relative size-full max-h-(--available-height) overflow-clip px-(--viewport-inline-padding) outline-none **:data-current:w-[calc(var(--popup-width)-2*var(--viewport-inline-padding)-2px)] **:data-current:opacity-100 **:data-current:transition-opacity **:data-current:data-ending-style:opacity-0 data-instant:transition-none **:data-previous:w-[calc(var(--popup-width)-2*var(--viewport-inline-padding)-2px)] **:data-previous:opacity-100 **:data-previous:transition-opacity **:data-previous:data-ending-style:opacity-0 **:data-current:data-starting-style:opacity-0 **:data-previous:data-starting-style:opacity-0", tooltipStyle ? "py-1 [--viewport-inline-padding:--spacing(2)]" : [POPOVER_PADDING[padding], "not-data-transitioning:overflow-y-auto"]),
+			className: cn("relative size-full max-h-(--available-height) overflow-clip px-(--viewport-inline-padding) outline-none **:data-current:w-[calc(var(--popup-width)-2*var(--viewport-inline-padding)-2px)] **:data-current:opacity-100 **:data-current:transition-opacity **:data-current:data-ending-style:opacity-0 data-instant:transition-none **:data-previous:w-[calc(var(--popup-width)-2*var(--viewport-inline-padding)-2px)] **:data-previous:opacity-100 **:data-previous:transition-opacity **:data-previous:data-ending-style:opacity-0 **:data-current:data-starting-style:opacity-0 **:data-previous:data-starting-style:opacity-0", tooltipStyle ? "py-1 [--viewport-inline-padding:--spacing(2)]" : [POPOVER_PADDING[padding], "overscroll-contain not-data-transitioning:overflow-y-auto"]),
 			"data-slot": "popover-viewport",
 			children
 		})

package/dist/components/select.js

@@ -83,7 +83,7 @@ const SelectPopup = ({ className, children, side = "bottom", sideOffset = 4, ali
 			/* @__PURE__ */ jsx("div", {
 				className: "bg-popover text-popover-foreground relative h-full min-w-(--anchor-width) rounded-lg border shadow-lg/5 not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",
 				children: /* @__PURE__ */ jsx(Select$1.List, {
-					className: cn("max-h-(--available-height) overflow-y-auto p-1", className),
+					className: cn("max-h-(--available-height) overflow-y-auto overscroll-contain p-1", className),
 					"data-slot": "select-list",
 					children
 				})

package/dist/components/sheet.js

@@ -2,6 +2,7 @@
 import { XIcon } from "../icons.js";
 import { cn } from "../lib/utils.js";
 import { OVERLAY_LAYER_CLASS_NAMES } from "../lib/overlay-layer.js";
+import "../lib/safe-area.js";
 import { renderTooltipTrigger } from "./tooltip-trigger-helper.js";
 import { Button } from "./button.js";
 import { ScrollArea } from "./scroll-area.js";
@@ -42,12 +43,28 @@ const SheetPopup = ({ className, children, showCloseButton = true, side = "inlin
 	side,
 	variant,
 	children: /* @__PURE__ */ jsxs(Dialog.Popup, {
-		className: cn("bg-popover text-popover-foreground relative flex max-h-full min-h-0 w-full min-w-0 flex-col shadow-lg/5 transition-[opacity,translate] duration-200 ease-in-out will-change-transform not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:shadow-[0_1px_--theme(--color-black/4%)] data-ending-style:opacity-0 data-starting-style:opacity-0 max-sm:before:hidden dark:before:shadow-[0_-1px_--theme(--color-white/6%)]", side === "block-end" && "row-start-2 border-t data-ending-style:translate-y-8 data-starting-style:translate-y-8", side === "block-start" && "border-b data-ending-style:-translate-y-8 data-starting-style:-translate-y-8", side === "inline-start" && "w-[calc(100%-(--spacing(12)))] max-w-md border-e data-ending-style:-translate-x-8 data-starting-style:-translate-x-8 rtl:data-ending-style:translate-x-8 rtl:data-starting-style:translate-x-8", side === "inline-end" && "w-[calc(100%-(--spacing(12)))] max-w-md border-s data-ending-style:translate-x-8 data-starting-style:translate-x-8 rtl:data-ending-style:-translate-x-8 rtl:data-starting-style:-translate-x-8", variant === "inset" && "before:hidden sm:rounded-2xl sm:border sm:before:rounded-[calc(var(--radius-2xl)-1px)] sm:**:data-[slot=sheet-footer]:rounded-b-[calc(var(--radius-2xl)-1px)]", className),
+		className: cn("bg-popover text-popover-foreground relative flex max-h-full min-h-0 w-full min-w-0 flex-col shadow-lg/5 transition-[opacity,translate] duration-200 ease-out will-change-transform not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:shadow-[0_1px_--theme(--color-black/4%)] data-ending-style:opacity-0 data-ending-style:duration-150 data-starting-style:opacity-0 max-sm:before:hidden dark:before:shadow-[0_-1px_--theme(--color-white/6%)]", side === "block-end" && [
+			"row-start-2 border-t data-ending-style:translate-y-8 data-starting-style:translate-y-8",
+			"pb-(--safe-area-bottom)",
+			"ps-(--safe-area-inline-start) pe-(--safe-area-inline-end)"
+		], side === "block-start" && [
+			"border-b data-ending-style:-translate-y-8 data-starting-style:-translate-y-8",
+			"pt-(--safe-area-top)",
+			"ps-(--safe-area-inline-start) pe-(--safe-area-inline-end)"
+		], side === "inline-start" && [
+			"w-[calc(100%-(--spacing(12)))] max-w-md border-e ps-(--safe-area-inline-start) data-ending-style:-translate-x-8 data-starting-style:-translate-x-8 rtl:data-ending-style:translate-x-8 rtl:data-starting-style:translate-x-8 [&.w-full.max-w-none]:pe-(--safe-area-inline-end)",
+			"pt-(--safe-area-top)",
+			"pb-(--safe-area-bottom)"
+		], side === "inline-end" && [
+			"w-[calc(100%-(--spacing(12)))] max-w-md border-s pe-(--safe-area-inline-end) data-ending-style:translate-x-8 data-starting-style:translate-x-8 rtl:data-ending-style:-translate-x-8 rtl:data-starting-style:-translate-x-8 [&.w-full.max-w-none]:ps-(--safe-area-inline-start)",
+			"pt-(--safe-area-top)",
+			"pb-(--safe-area-bottom)"
+		], variant === "inset" && "before:hidden sm:rounded-2xl sm:border sm:before:rounded-[calc(var(--radius-2xl)-1px)] sm:**:data-[slot=sheet-footer]:rounded-b-[calc(var(--radius-2xl)-1px)]", className),
 		"data-slot": "sheet-popup",
 		...props,
 		children: [children, showCloseButton && /* @__PURE__ */ jsx(Dialog.Close, {
 			"aria-label": "Close",
-			className: "absolute end-2 top-2",
+			className: cn("absolute end-[calc(--spacing(2)+var(--safe-area-inline-end))] top-2", side !== "block-end" && "top-[calc(--spacing(2)+var(--safe-area-top))]"),
 			render: /* @__PURE__ */ jsx(Button, {
 				size: "icon",
 				variant: "ghost"

package/dist/components/sidebar.d.ts

@@ -33,7 +33,7 @@ declare function useSidebarLayout(): SidebarLayout;
  * left for the content column. Mobile reports 0: there the sidebar is an
  * overlay sheet and occupies no layout width.
  */
-declare function useSidebarInlineSize(): 0 | 48 | 256;
+declare function useSidebarInlineSize(): 0 | 256 | 48;
 declare const SidebarProvider: ({ defaultOpen, forceCollapsed, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }: React.ComponentProps<"div"> & {
   defaultOpen?: boolean;
   forceCollapsed?: boolean;

package/dist/components/sidebar.js

@@ -118,7 +118,7 @@ const Sidebar = ({ side = "left", variant = "sidebar", collapsible = "offcanvas"
 			open: openMobile,
 			...props,
 			children: /* @__PURE__ */ jsxs(SheetPopup, {
-				className: "bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden",
+				className: "bg-sidebar text-sidebar-foreground w-(--sidebar-width) [&>button]:hidden",
 				"data-mobile": "true",
 				"data-sidebar": "sidebar",
 				"data-slot": "sidebar",
@@ -135,17 +135,17 @@ const Sidebar = ({ side = "left", variant = "sidebar", collapsible = "offcanvas"
 		});
 	}
 	return /* @__PURE__ */ jsxs("div", {
-		className: "group peer text-sidebar-foreground hidden md:block",
+		className: cn("group peer text-sidebar-foreground hidden [--sidebar-inline-size:calc(var(--sidebar-width)+var(--sidebar-safe-area-inline))] md:block", side === "left" ? "[--sidebar-safe-area-inline:var(--safe-area-inline-start)]" : "[--sidebar-safe-area-inline:var(--safe-area-inline-end)]", variant === "floating" || variant === "inset" ? "data-[collapsible=icon]:[--sidebar-inline-size:calc(var(--sidebar-width-icon)+--spacing(4)+var(--sidebar-safe-area-inline))]" : "data-[collapsible=icon]:[--sidebar-inline-size:calc(var(--sidebar-width-icon)+var(--sidebar-safe-area-inline))]"),
 		"data-collapsible": state === "collapsed" ? collapsible : "",
 		"data-side": side,
 		"data-slot": "sidebar",
 		"data-state": state,
 		"data-variant": variant,
 		children: [/* @__PURE__ */ jsx("div", {
-			className: cn("relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear", "group-data-[collapsible=offcanvas]:w-0", "group-data-[side=right]:rotate-180", variant === "floating" || variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"),
+			className: cn("relative w-(--sidebar-inline-size) bg-transparent transition-[width] duration-200 ease-in-out", "group-data-[collapsible=offcanvas]:w-0", "group-data-[side=right]:rotate-180"),
 			"data-slot": "sidebar-gap"
 		}), /* @__PURE__ */ jsx("div", {
-			className: cn("fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[inset-inline-start,inset-inline-end,width] duration-200 ease-linear md:flex", side === "left" ? "start-0 group-data-[collapsible=offcanvas]:start-[calc(var(--sidebar-width)*-1)]" : "end-0 group-data-[collapsible=offcanvas]:end-[calc(var(--sidebar-width)*-1)]", variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-e group-data-[side=right]:border-s", className),
+			className: cn("fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-inline-size) transition-[inset-inline-start,inset-inline-end,width] duration-200 ease-in-out md:flex", "pt-(--safe-area-top) pb-(--safe-area-bottom)", side === "left" ? "start-0 ps-(--safe-area-inline-start) group-data-[collapsible=offcanvas]:start-[calc(var(--sidebar-inline-size)*-1)]" : "end-0 pe-(--safe-area-inline-end) group-data-[collapsible=offcanvas]:end-[calc(var(--sidebar-inline-size)*-1)]", variant === "floating" || variant === "inset" ? ["p-2 pt-[calc(var(--safe-area-top)+--spacing(2))] pb-[calc(var(--safe-area-bottom)+--spacing(2))] group-data-[collapsible=icon]:w-[calc(var(--sidebar-inline-size)+2px)]", side === "left" ? "ps-[calc(var(--safe-area-inline-start)+--spacing(2))]" : "pe-[calc(var(--safe-area-inline-end)+--spacing(2))]"] : "group-data-[side=left]:border-e group-data-[side=right]:border-s", className),
 			"data-slot": "sidebar-container",
 			...props,
 			children: /* @__PURE__ */ jsx("div", {
@@ -182,7 +182,7 @@ const SidebarRail = ({ className, label = DEFAULT_TOGGLE_LABEL, "aria-label": ar
 	return /* @__PURE__ */ jsx("button", {
 		"aria-label": ariaLabel ?? label,
 		type: "button",
-		className: cn("hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 transition-transform ease-linear group-data-[side=left]:-end-4 group-data-[side=right]:start-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex", "ltr:-translate-x-1/2 rtl:translate-x-1/2", "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize", "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize", "hover:group-data-[collapsible=offcanvas]:bg-sidebar", "group-data-[collapsible=offcanvas]:ltr:translate-x-0 group-data-[collapsible=offcanvas]:rtl:translate-x-0", "group-data-[collapsible=offcanvas]:group-data-[side=left]:after:end-full group-data-[collapsible=offcanvas]:group-data-[side=right]:after:start-full", "[[data-side=left][data-collapsible=offcanvas]_&]:-end-2", "[[data-side=right][data-collapsible=offcanvas]_&]:-start-2", className),
+		className: cn("hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 transition-transform ease-in-out group-data-[side=left]:-end-4 group-data-[side=right]:start-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex", "ltr:-translate-x-1/2 rtl:translate-x-1/2", "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize", "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize", "hover:group-data-[collapsible=offcanvas]:bg-sidebar", "group-data-[collapsible=offcanvas]:ltr:translate-x-0 group-data-[collapsible=offcanvas]:rtl:translate-x-0", "group-data-[collapsible=offcanvas]:group-data-[side=left]:after:end-full group-data-[collapsible=offcanvas]:group-data-[side=right]:after:start-full", "[[data-side=left][data-collapsible=offcanvas]_&]:-end-2", "[[data-side=right][data-collapsible=offcanvas]_&]:-start-2", className),
 		"data-sidebar": "rail",
 		"data-slot": "sidebar-rail",
 		onClick: toggleSidebar,
@@ -220,7 +220,7 @@ const SidebarSeparator = ({ className, ...props }) => /* @__PURE__ */ jsx(Separa
 	...props
 });
 const SidebarContent = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
-	className: cn("flex min-h-0 flex-1 flex-col gap-2 overflow-x-hidden overflow-y-auto group-data-[collapsible=icon]:[scrollbar-width:none] group-data-[collapsible=icon]:[&::-webkit-scrollbar]:hidden", className),
+	className: cn("flex min-h-0 flex-1 flex-col gap-2 overflow-x-hidden overflow-y-auto overscroll-contain group-data-[collapsible=icon]:[scrollbar-width:none] group-data-[collapsible=icon]:[&::-webkit-scrollbar]:hidden", className),
 	"data-sidebar": "content",
 	"data-slot": "sidebar-content",
 	...props
@@ -233,7 +233,7 @@ const SidebarGroup = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
 });
 const SidebarGroupLabel = ({ className, asChild = false, ...props }) => {
 	return /* @__PURE__ */ jsx(asChild ? Slot : "div", {
-		className: cn("text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0", "group-data-[collapsible=icon]:hidden", className),
+		className: cn("text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-in-out focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0", "group-data-[collapsible=icon]:hidden", className),
 		"data-sidebar": "group-label",
 		"data-slot": "sidebar-group-label",
 		...props
@@ -265,7 +265,7 @@ const SidebarMenuItem = ({ className, ...props }) => /* @__PURE__ */ jsx("li", {
 	"data-slot": "sidebar-menu-item",
 	...props
 });
-const sidebarMenuButtonVariants = cva("peer/menu-button ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-[active=true]:bg-accent data-[active=true]:text-sidebar-accent-foreground data-[active=true]:hover:bg-sidebar-accent data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-start text-sm outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pe-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:font-medium [&>span:last-child]:truncate [&>span:last-child]:transition-opacity [&>span:last-child]:duration-200 group-data-[collapsible=icon]:[&>span:last-child]:opacity-0 [&>svg]:size-4 [&>svg]:shrink-0", {
+const sidebarMenuButtonVariants = cva("peer/menu-button ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-[active=true]:bg-accent data-[active=true]:text-sidebar-accent-foreground data-[active=true]:hover:bg-sidebar-accent data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-start text-sm outline-hidden transition-[width,height,padding] select-none group-has-data-[sidebar=menu-action]/menu-item:pe-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:font-medium [&>span:last-child]:truncate [&>span:last-child]:transition-opacity [&>span:last-child]:duration-200 group-data-[collapsible=icon]:[&>span:last-child]:opacity-0 [&>svg]:size-4 [&>svg]:shrink-0", {
 	variants: {
 		variant: {
 			default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",

package/dist/components/status-mark.d.ts

@@ -0,0 +1,17 @@
+//#region src/components/status-mark.d.ts
+type StatusMarkStatus = "pending" | "running" | "done" | "failed";
+type StatusMarkProps = {
+  status: StatusMarkStatus;
+  /** Accessible name; omit when adjacent text already states the status. */
+  label?: string | undefined;
+  className?: string;
+};
+/**
+ * One glyph for a unit of work across its life: dashes while it waits, a
+ * turning arc while it runs, then a closed ring with a check or a cross
+ * drawn in. Monochrome by design: it takes the text colour, and only a
+ * failure eases to destructive.
+ */
+declare const StatusMark: ({ className, label, status }: StatusMarkProps) => import("react").JSX.Element;
+//#endregion
+export { StatusMark, type StatusMarkStatus };