@blakesteve/roster 5.0.0 → 5.1.0

package/README.md

@@ -310,6 +310,7 @@ squeeze its own text until it overflowed. Three things follow:
   Give any `width: fit-content`, `inline-block` or table-cell ancestor a
   definite width, or the card measures zero.
 - **Container queries are required**: Chrome 105+, Safari 16+, Firefox 110+.
+  `Stat` lays out with CSS subgrid, which raises its own floor to Chrome 117.
   Without them a `CallToAction` renders in its narrow form at every width.
 
 #### Ink follows the fill
@@ -355,9 +356,9 @@ the supported way now.
 rule stops matching.** Solid Button, Badge, Pill and Checkbox no longer carry
 `rst:text-white` or `rst:text-gray-950`, so a selector naming either matches
 nothing. It fails silently, and it fails *partially*: those classes are still on
-`Card`, `Navbar`, `Dialog`, `ActionBar`, `Avatar`, `LiquidTabs` and
-`Breadcrumbs`, so a themed foreground keeps working there while reverting on
-every solid control. Replace the rule with the token:
+`Card`, `Navbar`, `Dialog`, `ActionBar`, `Avatar` and `Breadcrumbs`, so a
+themed foreground keeps working there while reverting on every solid control.
+Replace the rule with the token:
 
 ```css
 /* before */
@@ -367,6 +368,12 @@ every solid control. Replace the rule with the token:
 :root { --roster-primary-600-ink: #10142e; }
 ```
 
+`LiquidTabs` followed later: its active label reads `--roster-lt-text-active`,
+which defaults to `--roster-primary-500-ink`, the ink of the pill's default
+fill. A rule naming `rst:text-white` on a tab stops matching; a rule on
+`[role="tab"][aria-selected="true"]` still does. If you repaint the pill with
+`--roster-lt-pill`, set `--roster-lt-text-active` to match it.
+
 **If you pass a foreground through `className`, add the hover modifier.** Solid
 variants now carry `hover:text-*`, and `tailwind-merge` resolves conflicts per
 modifier, so a bare `rst:text-black` no longer holds through hover. Write
@@ -459,6 +466,12 @@ It is hand-rolled rather than a dependency: seven utilities does not justify a
 package in a library that ships compiled CSS, and it keeps the stylesheet
 self-contained — the same reasoning as not bundling a preflight.
 
+`Sheet` has its own knobs, beside those: `--roster-sheet-enter-duration`
+(280ms), `--roster-sheet-leave-duration` (200ms), the two matching easings, and
+`--roster-sheet-fade-duration` (150ms), which is the whole of its motion under
+reduced motion: a fade, with no slide. Set them at `:root`; they are the same in
+both schemes, so they are not redeclared under `.dark`.
+
 `animate-shimmer` is a highlight travelling across a base, used by `Countdown`'s
 `gradient` variant. Retint it with two variables:
 
@@ -717,6 +730,32 @@ toast `status` / `polite`, and a polite live region is read when the reader
 next pauses — which for a message that disappears in four seconds can mean
 never.
 
+**The queue renders into `<body>`, not where `Toaster` is placed.** While a
+`Dialog` or `Sheet` is open, every child of `<body>` is `inert` and
+`aria-hidden` except the dialog layer and anything carrying
+`data-roster-toaster`, which `Toaster`'s host does. So a toast fired from an
+open dialog is still announced, wherever in the app `Toaster` is mounted.
+
+A toast host Roster does not render, such as `react-hot-toast`'s own
+`Toaster`, goes silent while a dialog is open unless it opts in. Wrap it in an
+element that is a direct child of `<body>` (render it through a portal if it is
+mounted deeper) and carries the attribute:
+
+```tsx
+<div data-roster-toaster="" style={{ display: "contents" }}>
+  <Toaster />
+</div>
+```
+
+Two consequences of rendering into `<body>`:
+
+- `--roster-*` tokens set on a wrapper inside your app do not reach the toasts.
+  Set them on `:root`. A scoped `.dark` is carried across.
+- Anything else another library mounts straight into `<body>` while a dialog
+  is open, such as a date picker's or an autocomplete's popup, is inert too,
+  so it can't be clicked. Roster's own popups render into Headless UI's portal
+  root and are unaffected.
+
 `variant` on `Toaster` sets the fill for the whole queue:
 
 - **`soft`** (default) — the tinted fill `Alert` uses. Quiet enough that a stack
@@ -1083,6 +1122,12 @@ passing it from a server component fails the render with _Functions cannot be
 passed directly to Client Components_. A small `"use client"` wrapper binds it
 once, and the pages that use the wrapper stay server-rendered.
 
+`LiquidNav` takes a `linkComponent` too, with a wider contract: each link
+receives `href` and `to` with the same value, so React Router's `Link` works as
+well as `next/link`, plus `className`, `children`, `aria-current`, `onClick` and
+`data-tab-id`, which it must forward to the DOM. The props type is exported as
+`LiquidNavLinkProps`. The same client-component rule applies.
+
 `Eyebrow` takes the other approach: `as` accepts any element and the props
 follow it, so `<Eyebrow as="a" href="/work">` works, as does `as={NextLink}`.
 
@@ -1134,12 +1179,11 @@ function App() {
 | `Pill`               | Inline phrase chrome: social proof, live state, applied filters                                              |
 | `AvatarStrip`        | Stacked avatar row with overflow chip, dismiss button, trailing slot, and label area                         |
 | `CollapsibleSection` | Clamps any content (prose, chips, image grids) to a fixed height with a fade and expand/collapse toggle      |
-| `LiquidTabs`         | Controlled tab strip with a liquid sliding pill indicator: pill and filled variants                          |
 | `Select`             | Dropdown selector, on the same size scale as `Button` and `Input`                                            |
 | `SegmentBar`         | Proportional horizontal bar divided into colored segments with optional legend                               |
-| `Stat`               | A single figure with its label and, optionally, where the figure came from                                   |
+| `Stat`               | A figure with its label and, optionally, its source; a valid `<dl>` group, or `semantics="standalone"`       |
 | `Spinner`            | Loading indicator                                                                                            |
-| `Switch`             | Toggle switch                                                                                                |
+| `Switch`             | Toggle switch; its label toggles it, and every size is a 44px target                                         |
 | `Textarea`           | Multi-line text input                                                                                        |
 | `ThemeToggle`        | Flips class-based dark mode on the document root and remembers the choice; labels and icons are configurable |
 | `Tooltip`            | Radix-powered tooltip: hover/focus on desktop, tap-to-toggle on mobile                                       |
@@ -1156,6 +1200,8 @@ function App() {
 | `DescriptionList` | Label and value pairs as a real `<dl>`: inline, stacked, or split           |
 | `EmptyState`      | Zero-data placeholder with icon and action slot                             |
 | `ErrorState`      | Error display with retry action                                             |
+| `LiquidNav`       | `LiquidTabs`' strip as a `nav` of links; takes a router's link component    |
+| `LiquidTabs`      | Tab strip with a sliding pill; arrow keys, roving focus, 44px `lg` size     |
 | `MatchupCard`     | Head-to-head comparison card                                                |
 | `Pullquote`       | A line lifted out of prose, as `<figure>` + `<blockquote>` + `<figcaption>` |
 | `RadioGroup`      | Radio set reporting one `string`; descriptions, error, 44px targets         |
@@ -1171,6 +1217,7 @@ function App() {
 | `Dialog`    | Modal dialog                                                                                                                                                       |
 | `Footer`    | Site footer                                                                                                                                                        |
 | `Navbar`    | Responsive navigation bar with mobile slide-out                                                                                                                    |
+| `Sheet`     | Bottom sheet: drag, Escape or backdrop to dismiss; only its content scrolls; returns focus, even from a deep link                                                  |
 | `Table`     | Static data table                                                                                                                                                  |
 
 ### DataTable columns
@@ -1208,7 +1255,7 @@ entry's value as `unknown` and recovers the real type per column through
 The `"use client"` directive sits on each module that needs it, not on the
 package entry. A component carries it; a variant table, a token map and `cn` do
 not. That is what lets a server component import `Button` from the root and get
-a client reference for `Button` alone, rather than for all 102 exports.
+a client reference for `Button` alone, rather than for all 105 exports.
 
 It changed in 5.0.0, and the difference is worth knowing if you are upgrading.
 Before, the entry itself carried the directive, so importing anything from the
@@ -1228,7 +1275,7 @@ the one that can not be affected by a future change to the barrel.
 
 | Hook             | Description                                                                     |
 | ---------------- | ------------------------------------------------------------------------------- |
-| `useCountdown`   | Countdown timer logic without the UI                                            |
+| `useCountdown`   | Countdown timer logic without the UI; `days` counts the whole remaining total   |
 | `useKeySequence` | Fires a callback when a sequence of keys is typed in order. Ships `KONAMI_CODE` |
 
 ## Authoring components: the `rst:` prefix

package/dist/components/atoms/Chip/Chip.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),k=require("react"),q=require("../../../node_modules/@fortawesome/react-fontawesome/dist/index.cjs"),R=require("../../../node_modules/@fortawesome/free-solid-svg-icons/index.cjs"),c=require("../../../lib/utils.cjs"),w=require("./chip-variants.cjs");function C(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const s in e)if(s!=="default"){const n=Object.getOwnPropertyDescriptor(e,s);Object.defineProperty(r,s,n.get?n:{enumerable:!0,get:()=>e[s]})}}return r.default=e,Object.freeze(r)}const P=C(k),d="rst:cursor-pointer rst:disabled:cursor-not-allowed rst:rounded-full rst:focus-visible:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring rst:ring-offset-background rst:focus-visible:ring-offset-2",v=P.forwardRef(({className:e,colorScheme:r,variant:s,size:n,leadingIcon:h,onRemove:j,removeLabel:N,onSelectedChange:o,selected:i,disabled:a=!1,children:l,onClick:u,...f},p)=>{const y=!!o,x=!!j,m=c.cn(w.chipVariants({colorScheme:r,variant:s,size:n,disabled:a}),e),b=t.jsxs(t.Fragment,{children:[h&&t.jsx("span",{"aria-hidden":"true",className:"rst:flex rst:shrink-0 rst:items-center rst:justify-center",children:h}),l]}),g=x&&t.jsx("button",{type:"button",disabled:a,onClick:j,"aria-label":N??(typeof l=="string"?`Remove ${l}`:"Remove"),className:c.cn("rst:-mr-1 rst:relative rst:flex rst:shrink-0 rst:items-center rst:justify-center rst:opacity-70 rst:hover:opacity-100 rst:disabled:hover:opacity-70","rst:after:absolute rst:after:-inset-2 rst:after:content-['']",d),children:t.jsx(q.FontAwesomeIcon,{icon:R.faXmark,className:"rst:h-3 rst:w-3","aria-hidden":"true"})});return y&&x?t.jsxs("span",{...f,onClick:u,ref:p,className:m,children:[t.jsx("button",{type:"button",disabled:a,"aria-pressed":!!i,onClick:()=>o(!i),className:c.cn("rst:inline-flex rst:items-center rst:gap-1.5",d),children:b}),g]}):y?t.jsx("button",{...f,ref:p,type:"button",disabled:a,"aria-pressed":!!i,onClick:O=>{u?.(O),o(!i)},className:c.cn(m,d),children:b}):t.jsxs("span",{...f,onClick:u,ref:p,className:m,children:[b,g]})});v.displayName="Chip";exports.Chip=v;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),R=require("react"),k=require("../../../node_modules/@fortawesome/react-fontawesome/dist/index.cjs"),q=require("../../../node_modules/@fortawesome/free-solid-svg-icons/index.cjs"),a=require("../../../lib/utils.cjs"),T=require("./chip-variants.cjs");function w(e){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(s,r,n.get?n:{enumerable:!0,get:()=>e[r]})}}return s.default=e,Object.freeze(s)}const C=w(R),d="rst:cursor-pointer rst:disabled:cursor-not-allowed rst:rounded-full rst:focus-visible:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring rst:ring-offset-background rst:focus-visible:ring-offset-2",E="rst:relative rst:before:absolute rst:before:inset-x-0 rst:before:top-1/2 rst:before:h-11 rst:before:-translate-y-1/2 rst:before:content-['']",v=C.forwardRef(({className:e,colorScheme:s,variant:r,size:n,leadingIcon:h,onRemove:j,removeLabel:N,onSelectedChange:c,selected:i,disabled:o=!1,children:l,onClick:u,...f},b)=>{const y=!!c,x=!!j,p=a.cn(T.chipVariants({colorScheme:s,variant:r,size:n,disabled:o}),e),m=t.jsxs(t.Fragment,{children:[h&&t.jsx("span",{"aria-hidden":"true",className:"rst:flex rst:shrink-0 rst:items-center rst:justify-center",children:h}),l]}),g=x&&t.jsx("button",{type:"button",disabled:o,onClick:j,"aria-label":N??(typeof l=="string"?`Remove ${l}`:"Remove"),className:a.cn("rst:-mr-1 rst:relative rst:flex rst:shrink-0 rst:items-center rst:justify-center rst:opacity-70 rst:hover:opacity-100 rst:disabled:hover:opacity-70","rst:after:absolute rst:after:-inset-2 rst:after:content-['']",d),children:t.jsx(k.FontAwesomeIcon,{icon:q.faXmark,className:"rst:h-3 rst:w-3","aria-hidden":"true"})});return y&&x?t.jsxs("span",{...f,onClick:u,ref:b,className:p,children:[t.jsx("button",{type:"button",disabled:o,"aria-pressed":!!i,onClick:()=>c(!i),className:a.cn("rst:inline-flex rst:items-center rst:gap-1.5",d),children:m}),g]}):y?t.jsx("button",{...f,ref:b,type:"button",disabled:o,"aria-pressed":!!i,onClick:O=>{u?.(O),c(!i)},className:a.cn(p,d,E),children:m}):t.jsxs("span",{...f,onClick:u,ref:b,className:p,children:[m,g]})});v.displayName="Chip";exports.Chip=v;

package/dist/components/atoms/Chip/Chip.js

@@ -1,30 +1,30 @@
 "use client";
-import { jsx as r, jsxs as f, Fragment as w } from "react/jsx-runtime";
-import * as R from "react";
-import { FontAwesomeIcon as C } from "../../../node_modules/@fortawesome/react-fontawesome/dist/index.js";
-import { faXmark as F } from "../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";
+import { jsx as r, jsxs as m, Fragment as j } from "react/jsx-runtime";
+import * as w from "react";
+import { FontAwesomeIcon as E } from "../../../node_modules/@fortawesome/react-fontawesome/dist/index.js";
+import { faXmark as T } from "../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";
 import { cn as e } from "../../../lib/utils.js";
-import { chipVariants as O } from "./chip-variants.js";
-const p = "rst:cursor-pointer rst:disabled:cursor-not-allowed rst:rounded-full rst:focus-visible:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring rst:ring-offset-background rst:focus-visible:ring-offset-2", A = R.forwardRef(
+import { chipVariants as A } from "./chip-variants.js";
+const p = "rst:cursor-pointer rst:disabled:cursor-not-allowed rst:rounded-full rst:focus-visible:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring rst:ring-offset-background rst:focus-visible:ring-offset-2", C = "rst:relative rst:before:absolute rst:before:inset-x-0 rst:before:top-1/2 rst:before:h-11 rst:before:-translate-y-1/2 rst:before:content-['']", L = w.forwardRef(
   ({
     className: v,
     colorScheme: N,
-    variant: g,
-    size: x,
+    variant: x,
+    size: g,
     leadingIcon: u,
     onRemove: b,
     removeLabel: k,
-    onSelectedChange: i,
+    onSelectedChange: o,
     selected: t,
     disabled: s = !1,
-    children: o,
+    children: i,
     onClick: n,
     ...a
   }, c) => {
-    const h = !!i, d = !!b, l = e(
-      O({ colorScheme: N, variant: g, size: x, disabled: s }),
+    const h = !!o, d = !!b, l = e(
+      A({ colorScheme: N, variant: x, size: g, disabled: s }),
       v
-    ), m = /* @__PURE__ */ f(w, { children: [
+    ), f = /* @__PURE__ */ m(j, { children: [
       u && /* `aria-hidden`, like Pill's leading slot. Without it a
       non-decorative icon — an Avatar, an `<img alt>` — joins the
       toggle's accessible name and not the dismiss button's, so the two
@@ -38,14 +38,14 @@ const p = "rst:cursor-pointer rst:disabled:cursor-not-allowed rst:rounded-full r
           children: u
         }
       ),
-      o
+      i
     ] }), y = d && /* @__PURE__ */ r(
       "button",
       {
         type: "button",
         disabled: s,
         onClick: b,
-        "aria-label": k ?? (typeof o == "string" ? `Remove ${o}` : "Remove"),
+        "aria-label": k ?? (typeof i == "string" ? `Remove ${i}` : "Remove"),
         className: e(
           "rst:-mr-1 rst:relative rst:flex rst:shrink-0 rst:items-center rst:justify-center rst:opacity-70 rst:hover:opacity-100 rst:disabled:hover:opacity-70",
           /* WCAG 2.5.8 asks 24x24 CSS px for a pointer target, and the glyph
@@ -59,10 +59,10 @@ const p = "rst:cursor-pointer rst:disabled:cursor-not-allowed rst:rounded-full r
           "rst:after:absolute rst:after:-inset-2 rst:after:content-['']",
           p
         ),
-        children: /* @__PURE__ */ r(C, { icon: F, className: "rst:h-3 rst:w-3", "aria-hidden": "true" })
+        children: /* @__PURE__ */ r(E, { icon: T, className: "rst:h-3 rst:w-3", "aria-hidden": "true" })
       }
     );
-    return h && d ? /* @__PURE__ */ f(
+    return h && d ? /* @__PURE__ */ m(
       "span",
       {
         ...a,
@@ -76,9 +76,9 @@ const p = "rst:cursor-pointer rst:disabled:cursor-not-allowed rst:rounded-full r
               type: "button",
               disabled: s,
               "aria-pressed": !!t,
-              onClick: () => i(!t),
+              onClick: () => o(!t),
               className: e("rst:inline-flex rst:items-center rst:gap-1.5", p),
-              children: m
+              children: f
             }
           ),
           y
@@ -92,13 +92,13 @@ const p = "rst:cursor-pointer rst:disabled:cursor-not-allowed rst:rounded-full r
         type: "button",
         disabled: s,
         "aria-pressed": !!t,
-        onClick: (j) => {
-          n?.(j), i(!t);
+        onClick: (R) => {
+          n?.(R), o(!t);
         },
-        className: e(l, p),
-        children: m
+        className: e(l, p, C),
+        children: f
       }
-    ) : /* @__PURE__ */ f(
+    ) : /* @__PURE__ */ m(
       "span",
       {
         ...a,
@@ -106,14 +106,14 @@ const p = "rst:cursor-pointer rst:disabled:cursor-not-allowed rst:rounded-full r
         ref: c,
         className: l,
         children: [
-          m,
+          f,
           y
         ]
       }
     );
   }
 );
-A.displayName = "Chip";
+L.displayName = "Chip";
 export {
-  A as Chip
+  L as Chip
 };

package/dist/components/atoms/Disclosure/Disclosure.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),b=require("react"),j=require("../../../node_modules/@fortawesome/react-fontawesome/dist/index.cjs"),y=require("../../../node_modules/@fortawesome/free-solid-svg-icons/index.cjs"),r=require("../../../lib/utils.cjs"),i=require("./disclosure-variants.cjs"),q=require("../../../node_modules/@headlessui/react/dist/components/transition/transition.cjs"),v=({title:a,children:c,variant:e,className:l,defaultOpen:d=!1,isOpen:n,onToggle:u,icon:m,...x})=>{const[f,p]=b.useState(d),s=n!==void 0?n:f,h=()=>{const o=!s;n===void 0&&p(o),u?.(o)};return t.jsxs("div",{className:r.cn("rst:w-full rst:flex rst:flex-col",l),...x,children:[t.jsxs("button",{type:"button",onClick:h,"aria-expanded":s,className:r.cn(i.disclosureTriggerVariants({variant:e}),s?"rst:rounded-t-md rst:rounded-b-none":"rst:rounded-md",s&&e==="outline"&&"rst:border-b-transparent rst:dark:border-b-transparent"),children:[t.jsx("span",{className:"rst:flex-1 rst:text-left rst:text-inherit",children:a}),t.jsx("span",{className:r.cn("rst:ml-2 rst:flex rst:items-center rst:transition-transform rst:duration-200 rst:text-inherit",s?"rst:rotate-180":""),children:m||t.jsx(j.FontAwesomeIcon,{icon:y.faChevronDown,className:"rst:h-3.5 rst:w-3.5 rst:opacity-60"})})]}),t.jsx(q.Transition,{show:s,enter:"rst:transition rst:duration-100 rst:ease-out",enterFrom:"rst:transform rst:scale-95 rst:opacity-0",enterTo:"rst:transform rst:scale-100 rst:opacity-100",leave:"rst:transition rst:duration-75 rst:ease-out",leaveFrom:"rst:transform rst:scale-100 rst:opacity-100",leaveTo:"rst:transform rst:scale-95 rst:opacity-0",children:t.jsx("div",{className:r.cn(i.disclosureContentVariants({variant:e}),"rst:rounded-b-md"),children:c})})]})};exports.Disclosure=v;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("react"),N=require("../../../node_modules/@fortawesome/react-fontawesome/dist/index.cjs"),w=require("../../../node_modules/@fortawesome/free-solid-svg-icons/index.cjs"),s=require("../../../lib/utils.cjs"),l=require("./disclosure-variants.cjs"),y=require("../../../node_modules/@headlessui/react/dist/components/transition/transition.cjs"),S=({title:u,children:x,variant:r,className:m,defaultOpen:f=!1,isOpen:n,onToggle:p,icon:h,...b})=>{const[j,q]=a.useState(f),t=n!==void 0?n:j,i=a.useId(),[o,c]=a.useState(t);t&&!o&&c(!0);const v=()=>{const d=!t;n===void 0&&q(d),p?.(d)};return e.jsxs("div",{className:s.cn("rst:w-full rst:flex rst:flex-col",m),...b,children:[e.jsxs("button",{type:"button",onClick:v,"aria-expanded":t,"aria-controls":o?i:void 0,className:s.cn(l.disclosureTriggerVariants({variant:r}),t?"rst:rounded-t-md rst:rounded-b-none":"rst:rounded-md",t&&r==="outline"&&"rst:border-b-transparent rst:dark:border-b-transparent"),children:[e.jsx("span",{className:"rst:flex-1 rst:text-left rst:text-inherit",children:u}),e.jsx("span",{className:s.cn("rst:ml-2 rst:flex rst:items-center rst:transition-transform rst:duration-200 rst:motion-reduce:transition-none rst:text-inherit",t?"rst:rotate-180":""),children:h||e.jsx(N.FontAwesomeIcon,{icon:w.faChevronDown,className:"rst:h-3.5 rst:w-3.5 rst:opacity-60"})})]}),e.jsx(y.Transition,{show:t,afterLeave:()=>c(!1),children:e.jsx("div",{id:i,"data-testid":"disclosure-panel",className:s.cn(l.disclosureContentVariants({variant:r}),"rst:rounded-b-md","rst:transition rst:duration-100 rst:ease-out rst:data-leave:duration-75","rst:data-closed:opacity-0 rst:motion-safe:data-closed:scale-95"),children:x})})]})};exports.Disclosure=S;

package/dist/components/atoms/Disclosure/Disclosure.js

@@ -1,53 +1,56 @@
 "use client";
-import { jsxs as a, jsx as r } from "react/jsx-runtime";
-import { useState as b } from "react";
-import { FontAwesomeIcon as v } from "../../../node_modules/@fortawesome/react-fontawesome/dist/index.js";
-import { faChevronDown as y } from "../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";
+import { jsxs as l, jsx as r } from "react/jsx-runtime";
+import { useState as c, useId as C } from "react";
+import { FontAwesomeIcon as I } from "../../../node_modules/@fortawesome/react-fontawesome/dist/index.js";
+import { faChevronDown as k } from "../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";
 import { cn as s } from "../../../lib/utils.js";
-import { disclosureTriggerVariants as N, disclosureContentVariants as w } from "./disclosure-variants.js";
-import { Transition as C } from "../../../node_modules/@headlessui/react/dist/components/transition/transition.js";
-const O = ({
-  title: i,
-  children: c,
+import { disclosureTriggerVariants as y, disclosureContentVariants as g } from "./disclosure-variants.js";
+import { Transition as j } from "../../../node_modules/@headlessui/react/dist/components/transition/transition.js";
+const F = ({
+  title: m,
+  children: u,
   variant: e,
-  className: l,
-  defaultOpen: m = !1,
+  className: f,
+  defaultOpen: p = !1,
   isOpen: n,
-  onToggle: d,
-  icon: f,
-  ...p
+  onToggle: x,
+  icon: h,
+  ...b
 }) => {
-  const [u, x] = b(m), t = n !== void 0 ? n : u, h = () => {
-    const o = !t;
-    n === void 0 && x(o), d?.(o);
+  const [v, N] = c(p), t = n !== void 0 ? n : v, o = C(), [a, i] = c(t);
+  t && !a && i(!0);
+  const w = () => {
+    const d = !t;
+    n === void 0 && N(d), x?.(d);
   };
-  return /* @__PURE__ */ a("div", { className: s("rst:w-full rst:flex rst:flex-col", l), ...p, children: [
-    /* @__PURE__ */ a(
+  return /* @__PURE__ */ l("div", { className: s("rst:w-full rst:flex rst:flex-col", f), ...b, children: [
+    /* @__PURE__ */ l(
       "button",
       {
         type: "button",
-        onClick: h,
+        onClick: w,
         "aria-expanded": t,
+        "aria-controls": a ? o : void 0,
         className: s(
-          N({ variant: e }),
+          y({ variant: e }),
           // Dynamic rounding and border fix
           t ? "rst:rounded-t-md rst:rounded-b-none" : "rst:rounded-md",
           // If it's the outline variant and it's open, remove the bottom border so it merges seamlessly with the content box
           t && e === "outline" && "rst:border-b-transparent rst:dark:border-b-transparent"
         ),
         children: [
-          /* @__PURE__ */ r("span", { className: "rst:flex-1 rst:text-left rst:text-inherit", children: i }),
+          /* @__PURE__ */ r("span", { className: "rst:flex-1 rst:text-left rst:text-inherit", children: m }),
           /* @__PURE__ */ r(
             "span",
             {
               className: s(
-                "rst:ml-2 rst:flex rst:items-center rst:transition-transform rst:duration-200 rst:text-inherit",
+                "rst:ml-2 rst:flex rst:items-center rst:transition-transform rst:duration-200 rst:motion-reduce:transition-none rst:text-inherit",
                 t ? "rst:rotate-180" : ""
               ),
-              children: f || /* @__PURE__ */ r(
-                v,
+              children: h || /* @__PURE__ */ r(
+                I,
                 {
-                  icon: y,
+                  icon: k,
                   className: "rst:h-3.5 rst:w-3.5 rst:opacity-60"
                 }
               )
@@ -56,27 +59,22 @@ const O = ({
         ]
       }
     ),
-    /* @__PURE__ */ r(
-      C,
+    /* @__PURE__ */ r(j, { show: t, afterLeave: () => i(!1), children: /* @__PURE__ */ r(
+      "div",
       {
-        show: t,
-        enter: "rst:transition rst:duration-100 rst:ease-out",
-        enterFrom: "rst:transform rst:scale-95 rst:opacity-0",
-        enterTo: "rst:transform rst:scale-100 rst:opacity-100",
-        leave: "rst:transition rst:duration-75 rst:ease-out",
-        leaveFrom: "rst:transform rst:scale-100 rst:opacity-100",
-        leaveTo: "rst:transform rst:scale-95 rst:opacity-0",
-        children: /* @__PURE__ */ r(
-          "div",
-          {
-            className: s(w({ variant: e }), "rst:rounded-b-md"),
-            children: c
-          }
-        )
+        id: o,
+        "data-testid": "disclosure-panel",
+        className: s(
+          g({ variant: e }),
+          "rst:rounded-b-md",
+          "rst:transition rst:duration-100 rst:ease-out rst:data-leave:duration-75",
+          "rst:data-closed:opacity-0 rst:motion-safe:data-closed:scale-95"
+        ),
+        children: u
       }
-    )
+    ) })
   ] });
 };
 export {
-  O as Disclosure
+  F as Disclosure
 };

package/dist/components/atoms/Stat/Stat.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),x=require("react"),s=require("../../../lib/utils.cjs"),u=require("./stat-variants.cjs"),m=require("../Eyebrow/Eyebrow.cjs"),r=x.forwardRef(({value:a,label:n,source:e,size:i,colorScheme:c,className:l,...o},d)=>t.jsxs("div",{ref:d,className:s.cn("rst:flex rst:flex-col rst:gap-[3px]",l),...o,children:[t.jsx("dd",{className:s.cn("rst:m-0",u.statValueVariants({size:i,colorScheme:c})),children:a}),t.jsx("dt",{children:t.jsx(m.Eyebrow,{size:"xs",children:n})}),e&&t.jsx("span",{className:"rst:font-mono rst:text-[0.53125rem] rst:leading-none rst:tracking-[0.06em] rst:text-gray-500 rst:opacity-75 rst:dark:text-gray-400",children:e})]}));r.displayName="Stat";exports.Stat=r;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),u=require("react"),t=require("../../../lib/utils.cjs"),h=require("./stat-variants.cjs"),o=require("../Eyebrow/Eyebrow.cjs"),d="rst:block rst:font-mono rst:text-[0.53125rem] rst:font-normal rst:normal-nums rst:leading-none rst:tracking-[0.06em] rst:text-gray-500 rst:opacity-75 rst:dark:text-gray-400",x=u.forwardRef(({value:a,label:n,source:r,size:m,colorScheme:j,semantics:g="definition",className:c,...i},l)=>{const e=h.statValueVariants({size:m,colorScheme:j});return g==="standalone"?s.jsxs("div",{ref:l,className:t.cn("rst:flex rst:flex-col rst:gap-[3px]",c),...i,children:[s.jsx("span",{className:e,children:a}),s.jsx(o.Eyebrow,{size:"xs",children:n}),r&&s.jsx("span",{className:d,children:r})]}):s.jsxs("div",{ref:l,className:t.cn("rst:grid rst:content-start rst:gap-[3px]",c),...i,children:[s.jsx("dt",{className:"rst:relative rst:col-start-1 rst:row-start-2",children:s.jsx(o.Eyebrow,{size:"xs",children:n})}),r?s.jsxs("dd",{className:t.cn("rst:m-0",e,"rst:col-start-1 rst:row-span-3 rst:row-start-1 rst:grid rst:grid-rows-subgrid"),children:[s.jsx("span",{className:"rst:row-start-1",children:a}),s.jsx("span",{className:t.cn(d,"rst:row-start-3"),children:r})]}):s.jsx("dd",{className:t.cn("rst:m-0 rst:col-start-1 rst:row-start-1",e),children:a})]})});x.displayName="Stat";exports.Stat=x;

package/dist/components/atoms/Stat/Stat.d.ts

@@ -12,10 +12,35 @@ export interface StatProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "c
      * stated reads very differently from one that is merely asserted.
      */
     source?: React.ReactNode;
+    /**
+     * `"definition"` (default): a `dt` and `dd` pair in a `div`, for a row of
+     * Stats inside a `<dl>`. Only valid there.
+     *
+     * `"standalone"`: plain spans, for a Stat that is not in a list.
+     */
+    semantics?: "definition" | "standalone";
 }
 /**
- * Renders as a `<div>` wrapping a definition pair, so a row of Stats can sit
- * inside a `<dl>` and stay semantically honest.
+ * A figure with its label, and optionally where it came from.
+ *
+ * By default a `div` holding a `dt` (the label) then a `dd` (the value, with
+ * the source inside it), which is what a group inside a `<dl>` must be: a
+ * group is its terms and then its details. The value still shows first,
+ * because the grid places it there, not the DOM order.
+ *
+ * With a source, the `dd` spans three rows as a subgrid, so the source can
+ * sit below the label while staying inside the `dd` it describes. Both are
+ * pinned to column 1: placed by row alone, the `dd` would find the `dt` in
+ * its way at row 2 and move to a new column, beside the label. The `dt` is
+ * `relative` because the `dd`'s box covers its row, and without it the label
+ * would lose clicks and text selection to that box.
+ *
+ * A `[&>dd]` selector on the Stat reaches the value and the source. The
+ * source sets its own family, size, weight, figures, tracking, leading and
+ * color; anything else on the `dd` (`uppercase`, `italic`, `opacity`) reaches
+ * it too.
+ *
+ * A Stat outside a list takes `semantics="standalone"`, which renders spans.
  */
 declare const Stat: React.ForwardRefExoticComponent<StatProps & React.RefAttributes<HTMLDivElement>>;
 export { Stat };

package/dist/components/atoms/Stat/Stat.js

@@ -1,17 +1,42 @@
 "use client";
-import { jsxs as c, jsx as t } from "react/jsx-runtime";
-import d from "react";
-import { cn as s } from "../../../lib/utils.js";
-import { statValueVariants as f } from "./stat-variants.js";
-import { Eyebrow as p } from "../Eyebrow/Eyebrow.js";
-const x = d.forwardRef(
-  ({ value: e, label: a, source: r, size: o, colorScheme: i, className: m, ...l }, n) => /* @__PURE__ */ c("div", { ref: n, className: s("rst:flex rst:flex-col rst:gap-[3px]", m), ...l, children: [
-    /* @__PURE__ */ t("dd", { className: s("rst:m-0", f({ size: o, colorScheme: i })), children: e }),
-    /* @__PURE__ */ t("dt", { children: /* @__PURE__ */ t(p, { size: "xs", children: a }) }),
-    r && /* @__PURE__ */ t("span", { className: "rst:font-mono rst:text-[0.53125rem] rst:leading-none rst:tracking-[0.06em] rst:text-gray-500 rst:opacity-75 rst:dark:text-gray-400", children: r })
-  ] })
+import { jsxs as n, jsx as t } from "react/jsx-runtime";
+import h from "react";
+import { cn as r } from "../../../lib/utils.js";
+import { statValueVariants as g } from "./stat-variants.js";
+import { Eyebrow as d } from "../Eyebrow/Eyebrow.js";
+const m = "rst:block rst:font-mono rst:text-[0.53125rem] rst:font-normal rst:normal-nums rst:leading-none rst:tracking-[0.06em] rst:text-gray-500 rst:opacity-75 rst:dark:text-gray-400", w = h.forwardRef(
+  ({ value: a, label: i, source: s, size: p, colorScheme: f, semantics: x = "definition", className: o, ...l }, c) => {
+    const e = g({ size: p, colorScheme: f });
+    return x === "standalone" ? /* @__PURE__ */ n("div", { ref: c, className: r("rst:flex rst:flex-col rst:gap-[3px]", o), ...l, children: [
+      /* @__PURE__ */ t("span", { className: e, children: a }),
+      /* @__PURE__ */ t(d, { size: "xs", children: i }),
+      s && /* @__PURE__ */ t("span", { className: m, children: s })
+    ] }) : (
+      /* `content-start`: a Stat in a row of taller siblings is stretched to
+         their height, and a grid shares that height out among its auto rows,
+         which pushed the label of a Stat without a source down to meet
+         nothing. The flex column this replaced never did. */
+      /* @__PURE__ */ n("div", { ref: c, className: r("rst:grid rst:content-start rst:gap-[3px]", o), ...l, children: [
+        /* @__PURE__ */ t("dt", { className: "rst:relative rst:col-start-1 rst:row-start-2", children: /* @__PURE__ */ t(d, { size: "xs", children: i }) }),
+        s ? /* @__PURE__ */ n(
+          "dd",
+          {
+            className: r(
+              "rst:m-0",
+              e,
+              "rst:col-start-1 rst:row-span-3 rst:row-start-1 rst:grid rst:grid-rows-subgrid"
+            ),
+            children: [
+              /* @__PURE__ */ t("span", { className: "rst:row-start-1", children: a }),
+              /* @__PURE__ */ t("span", { className: r(m, "rst:row-start-3"), children: s })
+            ]
+          }
+        ) : /* @__PURE__ */ t("dd", { className: r("rst:m-0 rst:col-start-1 rst:row-start-1", e), children: a })
+      ] })
+    );
+  }
 );
-x.displayName = "Stat";
+w.displayName = "Stat";
 export {
-  x as Stat
+  w as Stat
 };

package/dist/components/atoms/Switch/Switch.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),m=require("../../../node_modules/@headlessui/react/dist/components/description/description.cjs"),d=require("../../../node_modules/@headlessui/react/dist/components/field/field.cjs"),g=require("../../../node_modules/@headlessui/react/dist/components/label/label.cjs"),j=require("../../../node_modules/@headlessui/react/dist/components/switch/switch.cjs"),s=require("../../../lib/utils.cjs"),a=require("./switch-variants.cjs"),p=({checked:n,onChange:l,label:e,description:r,disabled:c=!1,size:i,variant:o,className:u,ariaLabel:x})=>{const h=e?void 0:x||"Toggle setting";return t.jsxs(d.Field,{as:"div",className:s.cn("rst:flex rst:items-center rst:justify-between rst:gap-4",u),children:[(e||r)&&t.jsxs("span",{className:"rst:flex rst:flex-col",children:[e&&t.jsx(g.Label,{passive:!0,className:s.cn("rst:text-sm rst:font-medium rst:text-gray-900 rst:dark:text-gray-100",c&&"rst:opacity-50"),children:e}),r&&t.jsx(m.Description,{className:s.cn("rst:text-xs rst:text-gray-500 rst:dark:text-gray-400",c&&"rst:opacity-50"),children:r})]}),t.jsx(j.Switch,{checked:n,onChange:l,disabled:c,"aria-label":h,className:s.cn(a.switchTrackVariants({variant:o,size:i})),children:t.jsx("span",{"aria-hidden":"true",className:s.cn(a.switchThumbVariants({size:i}))})})]})};exports.Switch=p;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),d=require("../../../node_modules/@headlessui/react/dist/components/description/description.cjs"),g=require("../../../node_modules/@headlessui/react/dist/components/field/field.cjs"),p=require("../../../node_modules/@headlessui/react/dist/components/label/label.cjs"),j=require("../../../node_modules/@headlessui/react/dist/components/switch/switch.cjs"),s=require("../../../lib/utils.cjs"),n=require("./switch-variants.cjs"),y=({checked:o,onChange:u,label:r,description:c,disabled:e=!1,labelClickable:i=!0,size:a,variant:l,className:x,ariaLabel:h})=>{const m=r?void 0:h||"Toggle setting";return t.jsxs(g.Field,{as:"div",className:s.cn("rst:flex rst:items-center rst:justify-between rst:gap-4",x),children:[(r||c)&&t.jsxs("span",{className:"rst:flex rst:flex-col",children:[r&&t.jsx(p.Label,{passive:!i,className:s.cn("rst:text-sm rst:font-medium rst:text-gray-900 rst:dark:text-gray-100",i&&!e&&"rst:cursor-pointer",e&&"rst:opacity-50"),children:r}),c&&t.jsx(d.Description,{className:s.cn("rst:text-xs rst:text-gray-500 rst:dark:text-gray-400",e&&"rst:opacity-50"),children:c})]}),t.jsx(j.Switch,{checked:o,onChange:u,disabled:e,"aria-label":m,className:s.cn(n.switchTrackVariants({variant:l,size:a})),children:t.jsx("span",{"aria-hidden":"true",className:s.cn(n.switchThumbVariants({size:a}))})})]})};exports.Switch=y;

package/dist/components/atoms/Switch/Switch.d.ts

@@ -6,8 +6,18 @@ export interface SwitchProps extends VariantProps<typeof switchTrackVariants> {
     label?: string;
     description?: string;
     disabled?: boolean;
+    /**
+     * Whether clicking the label toggles the switch, as clicking any other
+     * control's label does. On by default.
+     *
+     * Turn it off when an ancestor already has a click handler of its own that
+     * toggles. With both, one click on the label reaches that handler twice
+     * (the label's click, then the one forwarded to the switch, both bubbling)
+     * and `onChange` once.
+     */
+    labelClickable?: boolean;
     className?: string;
     ariaLabel?: string;
 }
-declare const Switch: ({ checked, onChange, label, description, disabled, size, variant, className, ariaLabel, }: SwitchProps) => import("react/jsx-runtime").JSX.Element;
+declare const Switch: ({ checked, onChange, label, description, disabled, labelClickable, size, variant, className, ariaLabel, }: SwitchProps) => import("react/jsx-runtime").JSX.Element;
 export { Switch };