@stll/ui 0.65.0 → 0.65.1

package/dist/components/accordion.d.ts

@@ -1,6 +1,14 @@
 import { Accordion as Accordion$1 } from "@base-ui/react/accordion";
 //#region src/components/accordion.d.ts
-declare const Accordion: <Value = unknown>(props: Accordion$1.Root.Props<Value>) => import("react").JSX.Element;
+/**
+ * Closed panels stay in the document. Once mounted they are
+ * `hidden="until-found"`, so find-in-page reaches their content and opens
+ * the section, as it would a native `<details>`; server-rendered markup
+ * carries a plain `hidden` until hydration. Pass `hiddenUntilFound={false}` (here, or on one
+ * `AccordionPanel`) to unmount closed content instead: a heavy panel that
+ * should not render until asked for.
+ */
+declare const Accordion: <Value = unknown>({ hiddenUntilFound, ...props }: Accordion$1.Root.Props<Value>) => import("react").JSX.Element;
 declare const AccordionItem: ({ className, ...props }: Accordion$1.Item.Props) => import("react").JSX.Element;
 /**
  * - `default`: a section heading of a page or panel.
@@ -15,9 +23,17 @@ type AccordionSize = "default" | "sm" | "compact";
  *   hover, for a disclosure that is secondary to what is around it.
  */
 type AccordionTriggerVariant = "default" | "muted";
-declare const AccordionTrigger: ({ className, children, size, variant, ...props }: Accordion$1.Trigger.Props & {
+declare const AccordionTrigger: ({ className, children, size, variant, trailing, ...props }: Accordion$1.Trigger.Props & {
   size?: AccordionSize;
   variant?: AccordionTriggerVariant;
+  /**
+   * Status at the end of the row, before the chevron: a count, "2 unsaved",
+   * a last-updated date. It is part of the trigger, so it is read with the
+   * heading. It is typed as text so it can never be a control: a button
+   * inside the trigger's button is unreachable and its click would toggle
+   * the panel.
+   */
+  trailing?: string | number;
 }) => import("react").JSX.Element;
 declare const AccordionPanel: ({ className, children, size, ...props }: Accordion$1.Panel.Props & {
   size?: AccordionSize;

package/dist/components/accordion.js

@@ -4,8 +4,17 @@ import { cn } from "../lib/utils.js";
 import { Accordion as Accordion$1 } from "@base-ui/react/accordion";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/accordion.tsx
-const Accordion = (props) => /* @__PURE__ */ jsx(Accordion$1.Root, {
+/**
+* Closed panels stay in the document. Once mounted they are
+* `hidden="until-found"`, so find-in-page reaches their content and opens
+* the section, as it would a native `<details>`; server-rendered markup
+* carries a plain `hidden` until hydration. Pass `hiddenUntilFound={false}` (here, or on one
+* `AccordionPanel`) to unmount closed content instead: a heavy panel that
+* should not render until asked for.
+*/
+const Accordion = ({ hiddenUntilFound = true, ...props }) => /* @__PURE__ */ jsx(Accordion$1.Root, {
 	"data-slot": "accordion",
+	hiddenUntilFound,
 	...props
 });
 const AccordionItem = ({ className, ...props }) => /* @__PURE__ */ jsx(Accordion$1.Item, {
@@ -27,20 +36,28 @@ const TRIGGER_VARIANT_CLASS_NAME = {
 	default: "font-medium",
 	muted: "text-muted-foreground hover:text-foreground font-normal"
 };
-const AccordionTrigger = ({ className, children, size = "default", variant = "default", ...props }) => /* @__PURE__ */ jsx(Accordion$1.Header, {
+const AccordionTrigger = ({ className, children, size = "default", variant = "default", trailing, ...props }) => /* @__PURE__ */ jsx(Accordion$1.Header, {
 	className: "flex",
 	children: /* @__PURE__ */ jsxs(Accordion$1.Trigger, {
 		className: cn("focus-visible:ring-ring flex flex-1 cursor-pointer items-start justify-between gap-4 rounded-md text-start outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-64 data-panel-open:*:data-[slot=accordion-indicator]:rotate-180", TRIGGER_SIZE_CLASS_NAME[size], TRIGGER_VARIANT_CLASS_NAME[variant], className),
 		"data-slot": "accordion-trigger",
 		...props,
-		children: [children, /* @__PURE__ */ jsx(ChevronDownIcon, {
-			className: "pointer-events-none size-4 shrink-0 translate-y-0.5 opacity-80 transition-transform duration-200 ease-in-out",
-			"data-slot": "accordion-indicator"
-		})]
+		children: [
+			children,
+			trailing === void 0 ? null : /* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground ms-auto min-w-0 text-end text-xs font-normal tabular-nums",
+				"data-slot": "accordion-trigger-trailing",
+				children: trailing
+			}),
+			/* @__PURE__ */ jsx(ChevronDownIcon, {
+				className: "pointer-events-none size-4 shrink-0 translate-y-0.5 opacity-80 transition-transform duration-200 ease-in-out",
+				"data-slot": "accordion-indicator"
+			})
+		]
 	})
 });
 const AccordionPanel = ({ className, children, size = "default", ...props }) => /* @__PURE__ */ jsx(Accordion$1.Panel, {
-	className: "text-muted-foreground h-(--accordion-panel-height) overflow-hidden text-sm transition-[height] duration-200 ease-in-out data-ending-style:h-0 data-starting-style:h-0",
+	className: "text-muted-foreground h-(--accordion-panel-height) overflow-hidden text-sm 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",
 	"data-slot": "accordion-panel",
 	...props,
 	children: /* @__PURE__ */ jsx("div", {

package/dist/components/collapsible.d.ts

@@ -10,16 +10,22 @@ import { Collapsible as Collapsible$1 } from "@base-ui/react/collapsible";
  * 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;
+/**
+ * A bare trigger (plain text, no `render`) still gets the 44px touch target
+ * every control has under a coarse pointer, the same hit area `Button` adds.
+ */
+declare const CollapsibleTrigger: ({ className, ...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.
+ * Closed, the content stays in the document. Once mounted it is
+ * `hidden="until-found"` (as a native `<details>` keeps it), so find-in-page
+ * reaches it and opens the panel; server-rendered markup carries a plain
+ * `hidden` until hydration, so the search reaches it only after that. Pass
+ * `hiddenUntilFound={false}` to unmount it instead.
  */
 declare const CollapsiblePanel: ({ className, hiddenUntilFound, ...props }: Collapsible$1.Panel.Props) => import("react").JSX.Element;
 //#endregion

package/dist/components/collapsible.js

@@ -16,7 +16,12 @@ const Collapsible = (props) => /* @__PURE__ */ jsx(Collapsible$1.Root, {
 	"data-slot": "collapsible",
 	...props
 });
-const CollapsibleTrigger = (props) => /* @__PURE__ */ jsx(Collapsible$1.Trigger, {
+/**
+* A bare trigger (plain text, no `render`) still gets the 44px touch target
+* every control has under a coarse pointer, the same hit area `Button` adds.
+*/
+const CollapsibleTrigger = ({ className, ...props }) => /* @__PURE__ */ jsx(Collapsible$1.Trigger, {
+	className: cn("relative pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11", className),
 	"data-slot": "collapsible-trigger",
 	...props
 });
@@ -26,9 +31,11 @@ const CollapsibleTrigger = (props) => /* @__PURE__ */ jsx(Collapsible$1.Trigger,
 * 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.
+* Closed, the content stays in the document. Once mounted it is
+* `hidden="until-found"` (as a native `<details>` keeps it), so find-in-page
+* reaches it and opens the panel; server-rendered markup carries a plain
+* `hidden` until hydration, so the search reaches it only after that. 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),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stll/ui",
-  "version": "0.65.0",
+  "version": "0.65.1",
   "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",