@seekalfred/primitives 0.7.1 → 0.7.3

package/dist/alert-dialog/alert-dialog.d.ts

@@ -7,7 +7,8 @@ import { ReactNode } from "react";
  *
  * Built from `Dialog`'s own overlay and panel styles and the same React Aria
  * parts, but with its own layout: a header (title, a grey subtitle and a
- * circular close button), a thin divider, the body text, then the actions.
+ * circular close button), a thin divider, the description sentence, an
+ * optional `body` of rich content, then the actions.
  * The legacy `alert-dialog.tsx` was a 157-line clone of `dialog.tsx`; this
  * shares the tokens and the motion classes instead, so the two cannot drift
  * on radius, scrim or entrance.
@@ -30,7 +31,7 @@ import { ReactNode } from "react";
  *   header's copy of the second one.
  * - `description` is REQUIRED. A confirmation with no explanation is the
  *   thing this component exists to prevent, and the role only associates it
- *   when it is there. It is the body text above the actions.
+ *   when it is there. It is the sentence under the divider.
  *
  * THE TWO ACTIONS MUST NEVER LOOK ALIKE. `AlertDialogCancel` is the secondary
  * button (white, light border) and cancels through `slot="close"`;
@@ -43,8 +44,8 @@ import { ReactNode } from "react";
  */
 export interface AlertDialogProps extends Omit<DialogProps, "role" | "closeButton" | "isDismissable"> {
   /**
-   * What is about to happen, and whether it can be undone. Rendered as the body text
-   * between the divider and the actions.
+   * What is about to happen, and whether it can be undone. Rendered as the
+   * sentence under the divider, above the `body` slot (if any) and the actions.
    *
    * **Required**, unlike on `Dialog`. `role="alertdialog"` is what makes
    * React Aria wire this to `aria-describedby`, so it is both the sentence
@@ -53,6 +54,18 @@ export interface AlertDialogProps extends Omit<DialogProps, "role" | "closeButto
   description: ReactNode;
   /** A short grey line under the title, in the header. */
   subtitle?: ReactNode;
+  /**
+   * Rich content between the description and the actions: a plan comparison,
+   * a before/after diff, a quoted reply, a form field or a choice to make.
+   *
+   * It is NOT part of the accessible description: the screen reader announces
+   * the one `description` sentence with the name, and the body is read in
+   * place or as focus reaches its controls (each with its own label). So the
+   * `description` must say everything needed to answer, including that a
+   * choice or field below is required ("Pick what happens to your data.").
+   * `false`, `true` and `""` (as from `cond && <X />`) render no body.
+   */
+  body?: ReactNode;
   /** The actions. Give the cancel button `slot="close"`. */
   children?: ReactNode;
 }

package/dist/alert-dialog/alert-dialog.js

@@ -10,6 +10,11 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/alert-dialog/alert-dialog.tsx
 const alertDialogActionsVariants = cva("flex flex-wrap items-center justify-end gap-2 px-8 pb-8");
 /**
+* The body slot: the description's side padding, so the two share an edge,
+* and the description's own bottom space repeated below it before the actions.
+*/
+const alertDialogBodyVariants = cva("min-w-0 px-8 pb-6 text-sm leading-(--leading-normal) text-foreground");
+/**
 * The cancel action: the secondary button, wired to dismiss the dialog.
 *
 * @example
@@ -45,6 +50,16 @@ const AlertDialogAction = forwardRef(function AlertDialogAction({ className, ...
 	});
 });
 const alertDialogHeaderVariants = cva("flex items-start gap-4 border-b-(length:--border-width) border-border px-8 pt-8 pb-6");
+/**
+* The title column. With no subtitle it is at least the close button's height
+* and centres the title in it, so a one-line title sits level with the close;
+* a longer title grows the column from the top as before. With a subtitle the
+* two lines start at the top of the button, as they always have.
+*/
+const alertDialogTitleBlockVariants = cva("min-w-0 flex-1", { variants: { subtitle: {
+	true: "",
+	false: "flex min-h-9 flex-col justify-center"
+} } });
 const alertDialogTitleVariants = cva("m-0 text-lg leading-(--leading-tight) font-semibold text-foreground");
 const alertDialogCloseVariants = cva([
 	"inline-flex size-9 shrink-0 items-center justify-center",
@@ -68,7 +83,11 @@ function Swappable({ value }) {
 		children: value
 	});
 }
-const AlertDialog = forwardRef(function AlertDialog({ title, subtitle, beforeTitle, description, children, className, closeLabel = "Close", overlayClassName, entrance = "rise", ...props }, ref) {
+/** `cond && <X />` hands over `false`; React renders nothing for it, so neither does the slot. */
+function isEmpty(node) {
+	return node == null || typeof node === "boolean" || node === "";
+}
+const AlertDialog = forwardRef(function AlertDialog({ title, subtitle, beforeTitle, description, body, children, className, closeLabel = "Close", overlayClassName, entrance = "rise", ...props }, ref) {
 	return /* @__PURE__ */ jsx(ModalOverlay, {
 		...props,
 		isDismissable: false,
@@ -87,7 +106,7 @@ const AlertDialog = forwardRef(function AlertDialog({ title, subtitle, beforeTit
 						"data-slot": "alert-dialog-header",
 						className: alertDialogHeaderVariants(),
 						children: [/* @__PURE__ */ jsxs("div", {
-							className: "min-w-0 flex-1",
+							className: alertDialogTitleBlockVariants({ subtitle: subtitle != null }),
 							children: [/* @__PURE__ */ jsx(Heading, {
 								slot: "title",
 								"data-slot": "dialog-title",
@@ -121,6 +140,11 @@ const AlertDialog = forwardRef(function AlertDialog({ title, subtitle, beforeTit
 						className: "m-0 block px-8 py-6 text-sm leading-(--leading-normal) text-foreground",
 						children: /* @__PURE__ */ jsx(Swappable, { value: description })
 					}),
+					isEmpty(body) ? null : /* @__PURE__ */ jsx("div", {
+						"data-slot": "alert-dialog-body",
+						className: alertDialogBodyVariants(),
+						children: body
+					}),
 					children == null ? null : /* @__PURE__ */ jsx("div", {
 						"data-slot": "alert-dialog-actions",
 						className: alertDialogActionsVariants(),

package/dist/alert-dialog/alert-dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert-dialog.js","names":["Button","AriaModalOverlay","AriaModal","AriaDialog","AriaHeading","AriaButton","AriaText"],"sources":["../../src/alert-dialog/alert-dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef, type ReactNode } from \"react\";\nimport {\n  Button as AriaButton,\n  Dialog as AriaDialog,\n  Heading as AriaHeading,\n  Modal as AriaModal,\n  ModalOverlay as AriaModalOverlay,\n  Text as AriaText,\n} from \"react-aria-components\";\n\nimport { Button, type ButtonProps } from \"../button/button.js\";\nimport { cnAll } from \"../lib/cn.js\";\nimport { SwapText } from \"../lib/swap-text.js\";\nimport { dialogOverlayVariants, dialogPanelVariants, type DialogProps } from \"../dialog/dialog.js\";\n\n/**\n * AlertDialog: a confirmation that must be answered.\n *\n * Built from `Dialog`'s own overlay and panel styles and the same React Aria\n * parts, but with its own layout: a header (title, a grey subtitle and a\n * circular close button), a thin divider, the body text, then the actions.\n * The legacy `alert-dialog.tsx` was a 157-line clone of `dialog.tsx`; this\n * shares the tokens and the motion classes instead, so the two cannot drift\n * on radius, scrim or entrance.\n *\n * Census: 2 files, all eight parts used twice each, `AlertDialogPortal`,\n * `AlertDialogOverlay` and `AlertDialogTrigger` never rendered externally.\n *\n * What the preset forces, and why each one is a defect if forgotten:\n *\n * - `role=\"alertdialog\"`. React Aria associates the description with\n *   `aria-describedby` ONLY for this role (useDialog.mjs:29), so a\n *   confirmation built from a plain Dialog loses the sentence explaining\n *   what is about to happen.\n * - `isDismissable={false}`. Clicking the page must not resolve a\n *   destructive confirmation. Escape still cancels, which is the APG\n *   behaviour and what Radix does.\n * - THE CLOSE (X) IS CANCEL. It is `slot=\"close\"`, the same dismiss wiring as\n *   a Cancel button, so it goes through the same `onOpenChange(false)` and\n *   focus returns to the trigger. It is not a third answer: it is the\n *   header's copy of the second one.\n * - `description` is REQUIRED. A confirmation with no explanation is the\n *   thing this component exists to prevent, and the role only associates it\n *   when it is there. It is the body text above the actions.\n *\n * THE TWO ACTIONS MUST NEVER LOOK ALIKE. `AlertDialogCancel` is the secondary\n * button (white, light border) and cancels through `slot=\"close\"`;\n * `AlertDialogAction` is the primary button painted destructive red, because a\n * confirmation here is a destructive one. The legacy `AlertDialogAction`\n * defaulted to the gradient primary and BOTH call sites overrode it back to\n * destructive by hand (`data-table.tsx:146`, `calendar-view.tsx:638`); the red\n * is the default now, so nobody fights it. Plain `Button`s still work in the\n * actions slot for anything else.\n */\nexport interface AlertDialogProps extends Omit<\n  DialogProps,\n  \"role\" | \"closeButton\" | \"isDismissable\"\n> {\n  /**\n   * What is about to happen, and whether it can be undone. Rendered as the body text\n   * between the divider and the actions.\n   *\n   * **Required**, unlike on `Dialog`. `role=\"alertdialog\"` is what makes\n   * React Aria wire this to `aria-describedby`, so it is both the sentence\n   * the user needs and the one the screen reader announces with the name.\n   */\n  description: ReactNode;\n  /** A short grey line under the title, in the header. */\n  subtitle?: ReactNode;\n  /** The actions. Give the cancel button `slot=\"close\"`. */\n  children?: ReactNode;\n}\n\nconst alertDialogActionsVariants = cva(\"flex flex-wrap items-center justify-end gap-2 px-8 pb-8\");\n\n/**\n * The cancel action: the secondary button, wired to dismiss the dialog.\n *\n * @example\n * <AlertDialogCancel>Cancel</AlertDialogCancel>\n */\nexport const AlertDialogCancel = forwardRef<HTMLButtonElement, ButtonProps>(\n  function AlertDialogCancel(props, ref) {\n    return <Button ref={ref} slot=\"close\" variant=\"secondary\" size=\"sm\" {...props} />;\n  },\n);\n\n/**\n * The confirm action: the primary button in the destructive red.\n *\n * It is the primary button with its fill, hover, pressed and label roles\n * pointed at the destructive tokens, so it keeps the primary's press motion\n * and shadow. Variables on the element, rather than a competing background\n * class, so no stylesheet order decides which colour wins.\n *\n * @example\n * <AlertDialogAction onPress={remove}>Delete</AlertDialogAction>\n */\nexport const AlertDialogAction = forwardRef<HTMLButtonElement, ButtonProps>(\n  function AlertDialogAction({ className, ...props }, ref) {\n    return (\n      <Button\n        ref={ref}\n        variant=\"primary\"\n        size=\"sm\"\n        className={cnAll(\n          \"[--color-primary:var(--color-destructive)] [--color-primary-hover:var(--color-destructive-hover)] [--color-primary-pressed:var(--color-destructive-pressed)] [--color-primary-foreground:var(--color-destructive-foreground)]\",\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\n\nconst alertDialogHeaderVariants = cva(\n  \"flex items-start gap-4 border-b-(length:--border-width) border-border px-8 pt-8 pb-6\",\n);\n\nconst alertDialogTitleVariants = cva(\n  \"m-0 text-lg leading-(--leading-tight) font-semibold text-foreground\",\n);\n\nconst alertDialogCloseVariants = cva([\n  \"inline-flex size-9 shrink-0 items-center justify-center\",\n  \"rounded-circle box-border cursor-pointer\",\n  \"border-(length:--border-width) border-border bg-surface p-0 text-text-secondary\",\n  // Fill on hover, a quick press to .96 and a spring release (see calendar-nav-motion).\n  \"calendar-nav-motion\",\n  \"data-[hovered]:bg-muted data-[hovered]:text-foreground\",\n  \"outline-none\",\n  \"data-[focus-visible]:outline-solid\",\n  \"data-[focus-visible]:outline-(length:--focus-ring-width)\",\n  \"data-[focus-visible]:outline-offset-(--focus-ring-offset)\",\n  \"data-[focus-visible]:outline-(--color-ring)\",\n  \"[&_svg]:pointer-events-none [&_svg]:size-4\",\n]);\n\n/** A string swaps as a whole when its text changes while the dialog is open. */\nfunction Swappable({ value }: { value: ReactNode }) {\n  if (typeof value !== \"string\") return <>{value}</>;\n  return (\n    <SwapText swapKey={value} className=\"block\">\n      {value}\n    </SwapText>\n  );\n}\n\nexport const AlertDialog = forwardRef<HTMLElement, AlertDialogProps>(function AlertDialog(\n  {\n    title,\n    subtitle,\n    beforeTitle,\n    description,\n    children,\n    className,\n    closeLabel = \"Close\",\n    overlayClassName,\n    entrance = \"rise\",\n    ...props\n  },\n  ref,\n) {\n  return (\n    <AriaModalOverlay\n      {...props}\n      isDismissable={false}\n      data-slot=\"dialog-overlay\"\n      className={cnAll(\n        dialogOverlayVariants(),\n        entrance === \"rise\" && \"dialog-overlay-motion\",\n        overlayClassName,\n      )}\n    >\n      <AriaModal className=\"contents\">\n        <AriaDialog\n          ref={ref}\n          role=\"alertdialog\"\n          data-slot=\"dialog\"\n          className={cnAll(\n            dialogPanelVariants(),\n            // The panel has no padding of its own: the header, body and actions pad themselves,\n            // so the divider can run edge to edge.\n            \"gap-0 p-0\",\n            entrance === \"rise\" && \"dialog-panel-motion\",\n            className,\n          )}\n        >\n          {beforeTitle}\n          <div data-slot=\"alert-dialog-header\" className={alertDialogHeaderVariants()}>\n            <div className=\"min-w-0 flex-1\">\n              {/* slot=\"title\" is what React Aria wires aria-labelledby to. */}\n              <AriaHeading\n                slot=\"title\"\n                data-slot=\"dialog-title\"\n                className={alertDialogTitleVariants()}\n              >\n                <Swappable value={title} />\n              </AriaHeading>\n              {subtitle == null ? null : (\n                <p\n                  data-slot=\"alert-dialog-subtitle\"\n                  className=\"m-0 mt-1 text-sm leading-(--leading-normal) text-text-secondary\"\n                >\n                  <Swappable value={subtitle} />\n                </p>\n              )}\n            </div>\n            {/* slot=\"close\" is the same dismiss wiring as a Cancel button: one handler, focus back to the trigger. */}\n            <AriaButton\n              slot=\"close\"\n              aria-label={closeLabel}\n              data-slot=\"alert-dialog-close\"\n              className={alertDialogCloseVariants()}\n            >\n              <svg\n                aria-hidden=\"true\"\n                viewBox=\"0 0 16 16\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth=\"1.75\"\n                strokeLinecap=\"round\"\n              >\n                <path d=\"m4 4 8 8M12 4l-8 8\" />\n              </svg>\n            </AriaButton>\n          </div>\n          <AriaText\n            slot=\"description\"\n            elementType=\"p\"\n            data-slot=\"dialog-description\"\n            className=\"m-0 block px-8 py-6 text-sm leading-(--leading-normal) text-foreground\"\n          >\n            <Swappable value={description} />\n          </AriaText>\n          {children == null ? null : (\n            <div data-slot=\"alert-dialog-actions\" className={alertDialogActionsVariants()}>\n              {children}\n            </div>\n          )}\n        </AriaDialog>\n      </AriaModal>\n    </AriaModalOverlay>\n  );\n});\n"],"mappings":";;;;;;;;;;AA4EA,MAAM,6BAA6B,IAAI,yDAAyD;;;;;;;AAQhG,MAAa,oBAAoB,WAC/B,SAAS,kBAAkB,OAAO,KAAK;CACrC,OAAO,oBAACA,UAAD;EAAa;EAAK,MAAK;EAAQ,SAAQ;EAAY,MAAK;EAAK,GAAI;CAAQ,CAAA;AAClF,CACF;;;;;;;;;;;;AAaA,MAAa,oBAAoB,WAC/B,SAAS,kBAAkB,EAAE,WAAW,GAAG,SAAS,KAAK;CACvD,OACE,oBAACA,UAAD;EACO;EACL,SAAQ;EACR,MAAK;EACL,WAAW,MACT,iOACA,SACF;EACA,GAAI;CACL,CAAA;AAEL,CACF;AAEA,MAAM,4BAA4B,IAChC,sFACF;AAEA,MAAM,2BAA2B,IAC/B,qEACF;AAEA,MAAM,2BAA2B,IAAI;CACnC;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,CAAC;;AAGD,SAAS,UAAU,EAAE,SAA+B;CAClD,IAAI,OAAO,UAAU,UAAU,OAAO,oBAAA,YAAA,EAAA,UAAG,MAAQ,CAAA;CACjD,OACE,oBAAC,UAAD;EAAU,SAAS;EAAO,WAAU;EACjC,UAAA;CACO,CAAA;AAEd;AAEA,MAAa,cAAc,WAA0C,SAAS,YAC5E,EACE,OACA,UACA,aACA,aACA,UACA,WACA,aAAa,SACb,kBACA,WAAW,QACX,GAAG,SAEL,KACA;CACA,OACE,oBAACC,cAAD;EACE,GAAI;EACJ,eAAe;EACf,aAAU;EACV,WAAW,MACT,sBAAsB,GACtB,aAAa,UAAU,yBACvB,gBACF;EAEA,UAAA,oBAACC,OAAD;GAAW,WAAU;GACnB,UAAA,qBAACC,QAAD;IACO;IACL,MAAK;IACL,aAAU;IACV,WAAW,MACT,oBAAoB,GAGpB,aACA,aAAa,UAAU,uBACvB,SACF;IAXF,UAAA;KAaG;KACD,qBAAC,OAAD;MAAK,aAAU;MAAsB,WAAW,0BAA0B;MAA1E,UAAA,CACE,qBAAC,OAAD;OAAK,WAAU;OAAf,UAAA,CAEE,oBAACC,SAAD;QACE,MAAK;QACL,aAAU;QACV,WAAW,yBAAyB;QAEpC,UAAA,oBAAC,WAAD,EAAW,OAAO,MAAQ,CAAA;OACf,CAAA,GACZ,YAAY,OAAO,OAClB,oBAAC,KAAD;QACE,aAAU;QACV,WAAU;QAEV,UAAA,oBAAC,WAAD,EAAW,OAAO,SAAW,CAAA;OAC5B,CAAA,CAEF;MAEL,CAAA,GAAA,oBAACC,QAAD;OACE,MAAK;OACL,cAAY;OACZ,aAAU;OACV,WAAW,yBAAyB;OAEpC,UAAA,oBAAC,OAAD;QACE,eAAY;QACZ,SAAQ;QACR,MAAK;QACL,QAAO;QACP,aAAY;QACZ,eAAc;QAEd,UAAA,oBAAC,QAAD,EAAM,GAAE,qBAAsB,CAAA;OAC3B,CAAA;MACK,CAAA,CACT;;KACL,oBAACC,MAAD;MACE,MAAK;MACL,aAAY;MACZ,aAAU;MACV,WAAU;MAEV,UAAA,oBAAC,WAAD,EAAW,OAAO,YAAc,CAAA;KACxB,CAAA;KACT,YAAY,OAAO,OAClB,oBAAC,OAAD;MAAK,aAAU;MAAuB,WAAW,2BAA2B;MACzE;KACE,CAAA;IAEG;;EACH,CAAA;CACK,CAAA;AAEtB,CAAC"}
+{"version":3,"file":"alert-dialog.js","names":["Button","AriaModalOverlay","AriaModal","AriaDialog","AriaHeading","AriaButton","AriaText"],"sources":["../../src/alert-dialog/alert-dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef, type ReactNode } from \"react\";\nimport {\n  Button as AriaButton,\n  Dialog as AriaDialog,\n  Heading as AriaHeading,\n  Modal as AriaModal,\n  ModalOverlay as AriaModalOverlay,\n  Text as AriaText,\n} from \"react-aria-components\";\n\nimport { Button, type ButtonProps } from \"../button/button.js\";\nimport { cnAll } from \"../lib/cn.js\";\nimport { SwapText } from \"../lib/swap-text.js\";\nimport { dialogOverlayVariants, dialogPanelVariants, type DialogProps } from \"../dialog/dialog.js\";\n\n/**\n * AlertDialog: a confirmation that must be answered.\n *\n * Built from `Dialog`'s own overlay and panel styles and the same React Aria\n * parts, but with its own layout: a header (title, a grey subtitle and a\n * circular close button), a thin divider, the description sentence, an\n * optional `body` of rich content, then the actions.\n * The legacy `alert-dialog.tsx` was a 157-line clone of `dialog.tsx`; this\n * shares the tokens and the motion classes instead, so the two cannot drift\n * on radius, scrim or entrance.\n *\n * Census: 2 files, all eight parts used twice each, `AlertDialogPortal`,\n * `AlertDialogOverlay` and `AlertDialogTrigger` never rendered externally.\n *\n * What the preset forces, and why each one is a defect if forgotten:\n *\n * - `role=\"alertdialog\"`. React Aria associates the description with\n *   `aria-describedby` ONLY for this role (useDialog.mjs:29), so a\n *   confirmation built from a plain Dialog loses the sentence explaining\n *   what is about to happen.\n * - `isDismissable={false}`. Clicking the page must not resolve a\n *   destructive confirmation. Escape still cancels, which is the APG\n *   behaviour and what Radix does.\n * - THE CLOSE (X) IS CANCEL. It is `slot=\"close\"`, the same dismiss wiring as\n *   a Cancel button, so it goes through the same `onOpenChange(false)` and\n *   focus returns to the trigger. It is not a third answer: it is the\n *   header's copy of the second one.\n * - `description` is REQUIRED. A confirmation with no explanation is the\n *   thing this component exists to prevent, and the role only associates it\n *   when it is there. It is the sentence under the divider.\n *\n * THE TWO ACTIONS MUST NEVER LOOK ALIKE. `AlertDialogCancel` is the secondary\n * button (white, light border) and cancels through `slot=\"close\"`;\n * `AlertDialogAction` is the primary button painted destructive red, because a\n * confirmation here is a destructive one. The legacy `AlertDialogAction`\n * defaulted to the gradient primary and BOTH call sites overrode it back to\n * destructive by hand (`data-table.tsx:146`, `calendar-view.tsx:638`); the red\n * is the default now, so nobody fights it. Plain `Button`s still work in the\n * actions slot for anything else.\n */\nexport interface AlertDialogProps extends Omit<\n  DialogProps,\n  \"role\" | \"closeButton\" | \"isDismissable\"\n> {\n  /**\n   * What is about to happen, and whether it can be undone. Rendered as the\n   * sentence under the divider, above the `body` slot (if any) and the actions.\n   *\n   * **Required**, unlike on `Dialog`. `role=\"alertdialog\"` is what makes\n   * React Aria wire this to `aria-describedby`, so it is both the sentence\n   * the user needs and the one the screen reader announces with the name.\n   */\n  description: ReactNode;\n  /** A short grey line under the title, in the header. */\n  subtitle?: ReactNode;\n  /**\n   * Rich content between the description and the actions: a plan comparison,\n   * a before/after diff, a quoted reply, a form field or a choice to make.\n   *\n   * It is NOT part of the accessible description: the screen reader announces\n   * the one `description` sentence with the name, and the body is read in\n   * place or as focus reaches its controls (each with its own label). So the\n   * `description` must say everything needed to answer, including that a\n   * choice or field below is required (\"Pick what happens to your data.\").\n   * `false`, `true` and `\"\"` (as from `cond && <X />`) render no body.\n   */\n  body?: ReactNode;\n  /** The actions. Give the cancel button `slot=\"close\"`. */\n  children?: ReactNode;\n}\n\nconst alertDialogActionsVariants = cva(\"flex flex-wrap items-center justify-end gap-2 px-8 pb-8\");\n\n/**\n * The body slot: the description's side padding, so the two share an edge,\n * and the description's own bottom space repeated below it before the actions.\n */\nconst alertDialogBodyVariants = cva(\n  \"min-w-0 px-8 pb-6 text-sm leading-(--leading-normal) text-foreground\",\n);\n\n/**\n * The cancel action: the secondary button, wired to dismiss the dialog.\n *\n * @example\n * <AlertDialogCancel>Cancel</AlertDialogCancel>\n */\nexport const AlertDialogCancel = forwardRef<HTMLButtonElement, ButtonProps>(\n  function AlertDialogCancel(props, ref) {\n    return <Button ref={ref} slot=\"close\" variant=\"secondary\" size=\"sm\" {...props} />;\n  },\n);\n\n/**\n * The confirm action: the primary button in the destructive red.\n *\n * It is the primary button with its fill, hover, pressed and label roles\n * pointed at the destructive tokens, so it keeps the primary's press motion\n * and shadow. Variables on the element, rather than a competing background\n * class, so no stylesheet order decides which colour wins.\n *\n * @example\n * <AlertDialogAction onPress={remove}>Delete</AlertDialogAction>\n */\nexport const AlertDialogAction = forwardRef<HTMLButtonElement, ButtonProps>(\n  function AlertDialogAction({ className, ...props }, ref) {\n    return (\n      <Button\n        ref={ref}\n        variant=\"primary\"\n        size=\"sm\"\n        className={cnAll(\n          \"[--color-primary:var(--color-destructive)] [--color-primary-hover:var(--color-destructive-hover)] [--color-primary-pressed:var(--color-destructive-pressed)] [--color-primary-foreground:var(--color-destructive-foreground)]\",\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\n\nconst alertDialogHeaderVariants = cva(\n  \"flex items-start gap-4 border-b-(length:--border-width) border-border px-8 pt-8 pb-6\",\n);\n\n/**\n * The title column. With no subtitle it is at least the close button's height\n * and centres the title in it, so a one-line title sits level with the close;\n * a longer title grows the column from the top as before. With a subtitle the\n * two lines start at the top of the button, as they always have.\n */\nconst alertDialogTitleBlockVariants = cva(\"min-w-0 flex-1\", {\n  variants: {\n    subtitle: {\n      true: \"\",\n      false: \"flex min-h-9 flex-col justify-center\",\n    },\n  },\n});\n\nconst alertDialogTitleVariants = cva(\n  \"m-0 text-lg leading-(--leading-tight) font-semibold text-foreground\",\n);\n\nconst alertDialogCloseVariants = cva([\n  \"inline-flex size-9 shrink-0 items-center justify-center\",\n  \"rounded-circle box-border cursor-pointer\",\n  \"border-(length:--border-width) border-border bg-surface p-0 text-text-secondary\",\n  // Fill on hover, a quick press to .96 and a spring release (see calendar-nav-motion).\n  \"calendar-nav-motion\",\n  \"data-[hovered]:bg-muted data-[hovered]:text-foreground\",\n  \"outline-none\",\n  \"data-[focus-visible]:outline-solid\",\n  \"data-[focus-visible]:outline-(length:--focus-ring-width)\",\n  \"data-[focus-visible]:outline-offset-(--focus-ring-offset)\",\n  \"data-[focus-visible]:outline-(--color-ring)\",\n  \"[&_svg]:pointer-events-none [&_svg]:size-4\",\n]);\n\n/** A string swaps as a whole when its text changes while the dialog is open. */\nfunction Swappable({ value }: { value: ReactNode }) {\n  if (typeof value !== \"string\") return <>{value}</>;\n  return (\n    <SwapText swapKey={value} className=\"block\">\n      {value}\n    </SwapText>\n  );\n}\n\n/** `cond && <X />` hands over `false`; React renders nothing for it, so neither does the slot. */\nfunction isEmpty(node: ReactNode) {\n  return node == null || typeof node === \"boolean\" || node === \"\";\n}\n\nexport const AlertDialog = forwardRef<HTMLElement, AlertDialogProps>(function AlertDialog(\n  {\n    title,\n    subtitle,\n    beforeTitle,\n    description,\n    body,\n    children,\n    className,\n    closeLabel = \"Close\",\n    overlayClassName,\n    entrance = \"rise\",\n    ...props\n  },\n  ref,\n) {\n  return (\n    <AriaModalOverlay\n      {...props}\n      isDismissable={false}\n      data-slot=\"dialog-overlay\"\n      className={cnAll(\n        dialogOverlayVariants(),\n        entrance === \"rise\" && \"dialog-overlay-motion\",\n        overlayClassName,\n      )}\n    >\n      <AriaModal className=\"contents\">\n        <AriaDialog\n          ref={ref}\n          role=\"alertdialog\"\n          data-slot=\"dialog\"\n          className={cnAll(\n            dialogPanelVariants(),\n            // The panel has no padding of its own: the header, body and actions pad themselves,\n            // so the divider can run edge to edge.\n            \"gap-0 p-0\",\n            entrance === \"rise\" && \"dialog-panel-motion\",\n            className,\n          )}\n        >\n          {beforeTitle}\n          <div data-slot=\"alert-dialog-header\" className={alertDialogHeaderVariants()}>\n            <div className={alertDialogTitleBlockVariants({ subtitle: subtitle != null })}>\n              {/* slot=\"title\" is what React Aria wires aria-labelledby to. */}\n              <AriaHeading\n                slot=\"title\"\n                data-slot=\"dialog-title\"\n                className={alertDialogTitleVariants()}\n              >\n                <Swappable value={title} />\n              </AriaHeading>\n              {subtitle == null ? null : (\n                <p\n                  data-slot=\"alert-dialog-subtitle\"\n                  className=\"m-0 mt-1 text-sm leading-(--leading-normal) text-text-secondary\"\n                >\n                  <Swappable value={subtitle} />\n                </p>\n              )}\n            </div>\n            {/* slot=\"close\" is the same dismiss wiring as a Cancel button: one handler, focus back to the trigger. */}\n            <AriaButton\n              slot=\"close\"\n              aria-label={closeLabel}\n              data-slot=\"alert-dialog-close\"\n              className={alertDialogCloseVariants()}\n            >\n              <svg\n                aria-hidden=\"true\"\n                viewBox=\"0 0 16 16\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth=\"1.75\"\n                strokeLinecap=\"round\"\n              >\n                <path d=\"m4 4 8 8M12 4l-8 8\" />\n              </svg>\n            </AriaButton>\n          </div>\n          <AriaText\n            slot=\"description\"\n            elementType=\"p\"\n            data-slot=\"dialog-description\"\n            className=\"m-0 block px-8 py-6 text-sm leading-(--leading-normal) text-foreground\"\n          >\n            <Swappable value={description} />\n          </AriaText>\n          {isEmpty(body) ? null : (\n            <div data-slot=\"alert-dialog-body\" className={alertDialogBodyVariants()}>\n              {body}\n            </div>\n          )}\n          {children == null ? null : (\n            <div data-slot=\"alert-dialog-actions\" className={alertDialogActionsVariants()}>\n              {children}\n            </div>\n          )}\n        </AriaDialog>\n      </AriaModal>\n    </AriaModalOverlay>\n  );\n});\n"],"mappings":";;;;;;;;;;AAyFA,MAAM,6BAA6B,IAAI,yDAAyD;;;;;AAMhG,MAAM,0BAA0B,IAC9B,sEACF;;;;;;;AAQA,MAAa,oBAAoB,WAC/B,SAAS,kBAAkB,OAAO,KAAK;CACrC,OAAO,oBAACA,UAAD;EAAa;EAAK,MAAK;EAAQ,SAAQ;EAAY,MAAK;EAAK,GAAI;CAAQ,CAAA;AAClF,CACF;;;;;;;;;;;;AAaA,MAAa,oBAAoB,WAC/B,SAAS,kBAAkB,EAAE,WAAW,GAAG,SAAS,KAAK;CACvD,OACE,oBAACA,UAAD;EACO;EACL,SAAQ;EACR,MAAK;EACL,WAAW,MACT,iOACA,SACF;EACA,GAAI;CACL,CAAA;AAEL,CACF;AAEA,MAAM,4BAA4B,IAChC,sFACF;;;;;;;AAQA,MAAM,gCAAgC,IAAI,kBAAkB,EAC1D,UAAU,EACR,UAAU;CACR,MAAM;CACN,OAAO;AACT,EACF,EACF,CAAC;AAED,MAAM,2BAA2B,IAC/B,qEACF;AAEA,MAAM,2BAA2B,IAAI;CACnC;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,CAAC;;AAGD,SAAS,UAAU,EAAE,SAA+B;CAClD,IAAI,OAAO,UAAU,UAAU,OAAO,oBAAA,YAAA,EAAA,UAAG,MAAQ,CAAA;CACjD,OACE,oBAAC,UAAD;EAAU,SAAS;EAAO,WAAU;EACjC,UAAA;CACO,CAAA;AAEd;;AAGA,SAAS,QAAQ,MAAiB;CAChC,OAAO,QAAQ,QAAQ,OAAO,SAAS,aAAa,SAAS;AAC/D;AAEA,MAAa,cAAc,WAA0C,SAAS,YAC5E,EACE,OACA,UACA,aACA,aACA,MACA,UACA,WACA,aAAa,SACb,kBACA,WAAW,QACX,GAAG,SAEL,KACA;CACA,OACE,oBAACC,cAAD;EACE,GAAI;EACJ,eAAe;EACf,aAAU;EACV,WAAW,MACT,sBAAsB,GACtB,aAAa,UAAU,yBACvB,gBACF;EAEA,UAAA,oBAACC,OAAD;GAAW,WAAU;GACnB,UAAA,qBAACC,QAAD;IACO;IACL,MAAK;IACL,aAAU;IACV,WAAW,MACT,oBAAoB,GAGpB,aACA,aAAa,UAAU,uBACvB,SACF;IAXF,UAAA;KAaG;KACD,qBAAC,OAAD;MAAK,aAAU;MAAsB,WAAW,0BAA0B;MAA1E,UAAA,CACE,qBAAC,OAAD;OAAK,WAAW,8BAA8B,EAAE,UAAU,YAAY,KAAK,CAAC;OAA5E,UAAA,CAEE,oBAACC,SAAD;QACE,MAAK;QACL,aAAU;QACV,WAAW,yBAAyB;QAEpC,UAAA,oBAAC,WAAD,EAAW,OAAO,MAAQ,CAAA;OACf,CAAA,GACZ,YAAY,OAAO,OAClB,oBAAC,KAAD;QACE,aAAU;QACV,WAAU;QAEV,UAAA,oBAAC,WAAD,EAAW,OAAO,SAAW,CAAA;OAC5B,CAAA,CAEF;MAEL,CAAA,GAAA,oBAACC,QAAD;OACE,MAAK;OACL,cAAY;OACZ,aAAU;OACV,WAAW,yBAAyB;OAEpC,UAAA,oBAAC,OAAD;QACE,eAAY;QACZ,SAAQ;QACR,MAAK;QACL,QAAO;QACP,aAAY;QACZ,eAAc;QAEd,UAAA,oBAAC,QAAD,EAAM,GAAE,qBAAsB,CAAA;OAC3B,CAAA;MACK,CAAA,CACT;;KACL,oBAACC,MAAD;MACE,MAAK;MACL,aAAY;MACZ,aAAU;MACV,WAAU;MAEV,UAAA,oBAAC,WAAD,EAAW,OAAO,YAAc,CAAA;KACxB,CAAA;KACT,QAAQ,IAAI,IAAI,OACf,oBAAC,OAAD;MAAK,aAAU;MAAoB,WAAW,wBAAwB;MACnE,UAAA;KACE,CAAA;KAEN,YAAY,OAAO,OAClB,oBAAC,OAAD;MAAK,aAAU;MAAuB,WAAW,2BAA2B;MACzE;KACE,CAAA;IAEG;;EACH,CAAA;CACK,CAAA;AAEtB,CAAC"}

package/dist/badge/badge.d.ts

@@ -36,7 +36,7 @@ import { ComponentPropsWithoutRef, ReactNode } from "react";
  *   across every shadcn control.
  */
 export declare const badgeVariants: (props?: ({
-  tone?: "neutral" | "success" | "warning" | "danger" | "info" | "primary" | null | undefined;
+  tone?: "primary" | "success" | "warning" | "danger" | "neutral" | "info" | null | undefined;
   appearance?: "outline" | "solid" | "soft" | null | undefined;
   size?: "sm" | "md" | "lg" | null | undefined;
   shape?: "rounded" | "pill" | null | undefined;

package/dist/button/button.d.ts

@@ -3,8 +3,8 @@ import { ReactNode } from "react";
 import { ButtonProps, LinkProps } from "react-aria-components";
 //#region src/button/button.d.ts
 export declare const buttonVariants: (props?: ({
-  variant?: "link" | "outline" | "primary" | "ai" | "secondary" | "outlineNeutral" | "ghost" | "destructive" | null | undefined;
-  size?: "icon" | "sm" | "md" | "lg" | null | undefined;
+  variant?: "link" | "primary" | "ai" | "secondary" | "outline" | "outlineNeutral" | "ghost" | "destructive" | null | undefined;
+  size?: "sm" | "md" | "lg" | "icon" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
  * Props.

package/dist/calendar/calendar.d.ts

@@ -50,7 +50,7 @@ export declare const calendarClearVariants: (props?: import("class-variance-auth
  * is a strikethrough.
  */
 export declare const calendarCellVariants: (props?: ({
-  selection?: "single" | "range" | "band" | null | undefined;
+  selection?: "range" | "single" | "band" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface CalendarSharedProps {
   /**

package/dist/card/card.d.ts

@@ -28,7 +28,10 @@ import { ComponentPropsWithoutRef } from "react";
  * source text, so a class assembled at runtime is invisible to it and would
  * simply never be emitted.
  */
-export declare const cardVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const cardVariants: (props?: ({
+  flush?: boolean | null | undefined;
+  highlighted?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
  * Padding is inline-only on the sections and block-only on the shell.
  *
@@ -60,6 +63,24 @@ export interface CardProps extends ComponentPropsWithoutRef<"div"> {
    * Leave it off for a card that is not a target: a static card should not move.
    */
   interactive?: boolean;
+  /**
+   * A featured card: a brand gradient edge in place of the hairline. Use it for the
+   * one card a view wants the eye to land on (a recommended action, the suggested
+   * plan), never for several at once. The edge is decoration, so say WHY the card
+   * is featured in its content too: colour alone does not reach a screen reader.
+   * @default false
+   */
+  highlighted?: boolean;
+  /**
+   * Edge-to-edge content: no shell padding and no gap between the parts, and the
+   * content is clipped to the rounded border. The outline, radius, surface and
+   * shadow stay. For a table, list or full-bleed chart that must meet the card's
+   * top and bottom. The header and footer keep a 24px block inset so their text
+   * clears the corner curve, and every section keeps its inline padding: a
+   * section's fill already reaches the side edges.
+   * @default false
+   */
+  flush?: boolean;
 }
 export declare const Card: import("react").ForwardRefExoticComponent<CardProps & import("react").RefAttributes<HTMLDivElement>>;
 /** Title and description, stacked. */

package/dist/card/card.js

@@ -33,11 +33,59 @@ import { jsx } from "react/jsx-runtime";
 * simply never be emitted.
 */
 const cardVariants = cva([
-	"flex flex-col gap-6",
-	"rounded-panel border-(length:--border-width) border-border py-6",
+	"flex flex-col",
+	"rounded-panel border-(length:--border-width) border-border",
 	"bg-card text-card-foreground shadow-surface",
 	"box-border font-sans"
-]);
+], {
+	variants: {
+		/**
+		* The block padding and the gap live here, not in the base, so `flush`
+		* REPLACES them rather than relying on a merge to drop them: the
+		* exported `cardVariants({ flush: true })` is correct on its own.
+		*
+		* Flush keeps the outline, radius, surface and shadow, and clips its
+		* content to the inside of the rounded border: without the clip a filled
+		* child (a table header, a chart) shows square corners over the curve and
+		* covers the left and right hairline. `overflow: clip`, not `hidden`, so
+		* the card does not become a scroll container and a sticky table header
+		* inside it still sticks to the page. The sections keep their inline
+		* padding, so text and a section's fill stay clear of the corner curve
+		* (the fill still meets the side edges: background paints the padding).
+		*
+		* The header and footer hold text, so under flush they keep the 24px
+		* block inset the shell gave up. Without it the title and the footer line
+		* sat against the top and bottom borders, inside the corner curve, and
+		* the clip cut their first glyphs. The inset is a custom property both
+		* sections read, set per variant (never left undefined), so a nested
+		* default card resets it, and a section's own `py-*` still wins by merge.
+		* CardContent stays block-flush: a table or chart meets the edges.
+		*/
+		flush: {
+			false: "gap-6 py-6 [--card-section-py:--spacing(0)]",
+			true: "gap-0 py-0 overflow-clip [--card-section-py:--spacing(6)]"
+		},
+		/**
+		* A featured card: the hairline is replaced by a brand gradient edge,
+		* painted by the `card-highlighted` utility in styles.css. The border
+		* stays (transparent), so a highlighted card has exactly the box of a
+		* plain one and a list of mixed cards does not shift.
+		*/
+		highlighted: {
+			false: "",
+			true: "card-highlighted border-transparent"
+		}
+	},
+	compoundVariants: [{
+		flush: true,
+		highlighted: true,
+		class: "card-highlighted-flush"
+	}],
+	defaultVariants: {
+		flush: false,
+		highlighted: false
+	}
+});
 /**
 * Padding is inline-only on the sections and block-only on the shell.
 *
@@ -45,18 +93,20 @@ const cardVariants = cva([
 * consumer run a divider or a full-bleed image edge to edge, which a single
 * `p-6` on the shell would make impossible.
 */
-const cardHeaderVariants = cva("flex flex-col gap-1.5 px-6");
+const cardHeaderVariants = cva("flex flex-col gap-1.5 px-6 py-(--card-section-py)");
 const cardTitleVariants = cva(["text-base leading-(--leading-none) font-semibold", "m-0"]);
 const cardDescriptionVariants = cva(["text-sm leading-(--leading-normal) text-muted-foreground"]);
 const cardContentVariants = cva("px-6");
-const cardFooterVariants = cva("flex items-center px-6");
-const Card = forwardRef(function Card({ className, interactive = false, onPointerEnter, onPointerLeave, ...props }, ref) {
+const cardFooterVariants = cva("flex items-center px-6 py-(--card-section-py)");
+const Card = forwardRef(function Card({ className, interactive = false, highlighted = false, flush = false, onPointerEnter, onPointerLeave, ...props }, ref) {
 	const [pointed, setPointed] = useState(false);
 	return /* @__PURE__ */ jsx("div", {
 		ref,
 		...props,
 		"data-slot": "card",
 		"data-interactive": interactive || void 0,
+		"data-highlighted": highlighted || void 0,
+		"data-flush": flush || void 0,
 		"data-pointed": interactive && pointed || void 0,
 		onPointerEnter: (event) => {
 			onPointerEnter?.(event);
@@ -66,7 +116,10 @@ const Card = forwardRef(function Card({ className, interactive = false, onPointe
 			onPointerLeave?.(event);
 			setPointed(false);
 		},
-		className: cnAll(cardVariants(), interactive && "card-lift", className)
+		className: cnAll(cardVariants({
+			flush,
+			highlighted
+		}), interactive && "card-lift", className)
 	});
 });
 const CardHeader = forwardRef(function CardHeader({ className, ...props }, ref) {

package/dist/card/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","names":[],"sources":["../../src/card/card.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef, useState, type ComponentPropsWithoutRef } from \"react\";\n\nimport { cn, cnAll } from \"../lib/cn.js\";\n\n/**\n * Card, ported from the legacy shadcn component.\n *\n * Presentational, so there is no React Aria base -- React Aria ships no card,\n * and a container that is not focusable, selectable or interactive needs no\n * behaviour to inherit.\n *\n * Five parts, from six. The census (24 consumer files, the most-used\n * container in the app) reads: Card 55, CardContent 40, CardHeader 21,\n * CardTitle 19, CardDescription 8, CardFooter 2, **CardAction 0**.\n *\n * Dropping `CardAction` takes three things with it, which is most of the\n * legacy header's complexity: the `grid`, the `grid-rows-[auto_auto]`, and\n * the `has-data-[slot=card-action]:grid-cols-[1fr_auto]` rule that existed\n * only to reserve a column for it. With no action to place, a header is a\n * stack.\n *\n * Two more legacy rules are gone. `[.border-b]:pb-6` and `[.border-t]:pt-6`\n * added padding when the CONSUMER happened to add a border class -- clever,\n * but action at a distance through a class name we do not own, and the census\n * found zero application call sites relying on it (one call site passes\n * `border-b-0`, which removes a border it never had). `@container/card-header`\n * named a container nothing queried.\n *\n * Every string in the cva blocks below is a STATIC literal. Tailwind scans\n * source text, so a class assembled at runtime is invisible to it and would\n * simply never be emitted.\n */\nexport const cardVariants = cva([\n  \"flex flex-col gap-6\",\n  \"rounded-panel border-(length:--border-width) border-border py-6\",\n  \"bg-card text-card-foreground shadow-surface\",\n\n  // box-border and font-sans are not boilerplate. The reset in\n  // @seekalfred/styles is OPT-IN, so a consumer may load none: content-box\n  // would add the padding to any width they set (the Alert shipped\n  // overflowing its container by 46px), and an unstyled document renders\n  // text in a serif (the Accordion shipped its panel that way). Declaring\n  // the family HERE rather than on each part means one declaration covers\n  // the whole subtree by inheritance.\n  \"box-border font-sans\",\n]);\n\n/**\n * Padding is inline-only on the sections and block-only on the shell.\n *\n * That split is load-bearing rather than stylistic: it is what lets a\n * consumer run a divider or a full-bleed image edge to edge, which a single\n * `p-6` on the shell would make impossible.\n */\nexport const cardHeaderVariants = cva(\"flex flex-col gap-1.5 px-6\");\n\nexport const cardTitleVariants = cva([\n  // leading-* AFTER text-*: tailwind-merge treats a later text-* as owning\n  // line-height and silently strips a leading-* that precedes it.\n  \"text-base leading-(--leading-none) font-semibold\",\n  // The user-agent <h3> ships a 1em block margin and font-size 1.17em. The\n  // legacy component was a <div> and never met either.\n  \"m-0\",\n]);\n\nexport const cardDescriptionVariants = cva([\n  \"text-sm leading-(--leading-normal) text-muted-foreground\",\n]);\n\nexport const cardContentVariants = cva(\"px-6\");\n\nexport const cardFooterVariants = cva(\"flex items-center px-6\");\n\n/**\n * A content container.\n *\n * @example\n * <Card>\n *   <CardHeader>\n *     <CardTitle>Learning Progress</CardTitle>\n *     <CardDescription>Across all active courses.</CardDescription>\n *   </CardHeader>\n *   <CardContent>Twelve of eighteen modules complete.</CardContent>\n * </Card>\n */\nexport interface CardProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Make the card respond to a pointer: it floats 2px on a spring while it is pointed\n   * at, its border darkens and its shadow deepens. Mouse and pen only; touch never lifts.\n   * Leave it off for a card that is not a target: a static card should not move.\n   */\n  interactive?: boolean;\n}\n\nexport const Card = forwardRef<HTMLDivElement, CardProps>(function Card(\n  { className, interactive = false, onPointerEnter, onPointerLeave, ...props },\n  ref,\n) {\n  // Pointed at by a mouse or pen. Touch never lifts, so it is read from the pointer, not :hover (which a tap leaves stuck).\n  const [pointed, setPointed] = useState(false);\n  return (\n    <div\n      ref={ref}\n      {...props}\n      data-slot=\"card\"\n      data-interactive={interactive || undefined}\n      data-pointed={(interactive && pointed) || undefined}\n      onPointerEnter={(event) => {\n        onPointerEnter?.(event);\n        if (interactive && event.pointerType !== \"touch\") setPointed(true);\n      }}\n      onPointerLeave={(event) => {\n        onPointerLeave?.(event);\n        setPointed(false);\n      }}\n      className={cnAll(cardVariants(), interactive && \"card-lift\", className)}\n    />\n  );\n});\n\n/** Title and description, stacked. */\nexport type CardHeaderProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const CardHeader = forwardRef<HTMLDivElement, CardHeaderProps>(function CardHeader(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      {...props}\n      data-slot=\"card-header\"\n      className={cn(cardHeaderVariants(), className)}\n    />\n  );\n});\n\n/**\n * The card's heading.\n *\n * A REAL heading, unlike the legacy `<div class=\"font-semibold\">`. None of\n * the 19 legacy call sites wrapped one, so 19 card titles were invisible to\n * screen-reader heading navigation -- the same shape of finding as the Avatar\n * port's missing `alt`, and the migration is when it gets answered.\n */\nexport interface CardTitleProps extends ComponentPropsWithoutRef<\"h3\"> {\n  /**\n   * Heading level.\n   *\n   * `3` by default, because a card almost always sits under a section\n   * heading. It is a prop rather than a constant because the correct level\n   * is a fact about the PAGE, and a fixed one would be wrong somewhere; the\n   * level changes semantics only, never the rendered size.\n   *\n   * @default 3\n   */\n  level?: 1 | 2 | 3 | 4 | 5 | 6;\n}\n\nexport const CardTitle = forwardRef<HTMLHeadingElement, CardTitleProps>(function CardTitle(\n  { className, level = 3, ...props },\n  ref,\n) {\n  // Static union, not a template literal: `h${level}` is a string React\n  // accepts but TypeScript cannot narrow to an intrinsic element, and the\n  // cast that silences it would also accept `h7`.\n  const Heading = ({ 1: \"h1\", 2: \"h2\", 3: \"h3\", 4: \"h4\", 5: \"h5\", 6: \"h6\" } as const)[level];\n\n  return (\n    <Heading\n      ref={ref}\n      {...props}\n      data-slot=\"card-title\"\n      className={cn(cardTitleVariants(), className)}\n    />\n  );\n});\n\n/** Secondary text under the title. */\nexport type CardDescriptionProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const CardDescription = forwardRef<HTMLDivElement, CardDescriptionProps>(\n  function CardDescription({ className, ...props }, ref) {\n    return (\n      <div\n        ref={ref}\n        {...props}\n        data-slot=\"card-description\"\n        className={cn(cardDescriptionVariants(), className)}\n      />\n    );\n  },\n);\n\n/** The card's body. */\nexport type CardContentProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const CardContent = forwardRef<HTMLDivElement, CardContentProps>(function CardContent(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      {...props}\n      data-slot=\"card-content\"\n      className={cn(cardContentVariants(), className)}\n    />\n  );\n});\n\n/** Actions or metadata at the foot of the card. */\nexport type CardFooterProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const CardFooter = forwardRef<HTMLDivElement, CardFooterProps>(function CardFooter(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      {...props}\n      data-slot=\"card-footer\"\n      className={cn(cardFooterVariants(), className)}\n    />\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,MAAa,eAAe,IAAI;CAC9B;CACA;CACA;CASA;AACF,CAAC;;;;;;;;AASD,MAAa,qBAAqB,IAAI,4BAA4B;AAElE,MAAa,oBAAoB,IAAI,CAGnC,oDAGA,KACF,CAAC;AAED,MAAa,0BAA0B,IAAI,CACzC,0DACF,CAAC;AAED,MAAa,sBAAsB,IAAI,MAAM;AAE7C,MAAa,qBAAqB,IAAI,wBAAwB;AAuB9D,MAAa,OAAO,WAAsC,SAAS,KACjE,EAAE,WAAW,cAAc,OAAO,gBAAgB,gBAAgB,GAAG,SACrE,KACA;CAEA,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAC5C,OACE,oBAAC,OAAD;EACO;EACL,GAAI;EACJ,aAAU;EACV,oBAAkB,eAAe,KAAA;EACjC,gBAAe,eAAe,WAAY,KAAA;EAC1C,iBAAiB,UAAU;GACzB,iBAAiB,KAAK;GACtB,IAAI,eAAe,MAAM,gBAAgB,SAAS,WAAW,IAAI;EACnE;EACA,iBAAiB,UAAU;GACzB,iBAAiB,KAAK;GACtB,WAAW,KAAK;EAClB;EACA,WAAW,MAAM,aAAa,GAAG,eAAe,aAAa,SAAS;CACvE,CAAA;AAEL,CAAC;AAKD,MAAa,aAAa,WAA4C,SAAS,WAC7E,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,oBAAC,OAAD;EACO;EACL,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,mBAAmB,GAAG,SAAS;CAC9C,CAAA;AAEL,CAAC;AAwBD,MAAa,YAAY,WAA+C,SAAS,UAC/E,EAAE,WAAW,QAAQ,GAAG,GAAG,SAC3B,KACA;CAIA,MAAM,UAAW;EAAE,GAAG;EAAM,GAAG;EAAM,GAAG;EAAM,GAAG;EAAM,GAAG;EAAM,GAAG;CAAK,EAAY;CAEpF,OACE,oBAAC,SAAD;EACO;EACL,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,kBAAkB,GAAG,SAAS;CAC7C,CAAA;AAEL,CAAC;AAKD,MAAa,kBAAkB,WAC7B,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAS,KAAK;CACrD,OACE,oBAAC,OAAD;EACO;EACL,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,wBAAwB,GAAG,SAAS;CACnD,CAAA;AAEL,CACF;AAKA,MAAa,cAAc,WAA6C,SAAS,YAC/E,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,oBAAC,OAAD;EACO;EACL,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,oBAAoB,GAAG,SAAS;CAC/C,CAAA;AAEL,CAAC;AAKD,MAAa,aAAa,WAA4C,SAAS,WAC7E,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,oBAAC,OAAD;EACO;EACL,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,mBAAmB,GAAG,SAAS;CAC9C,CAAA;AAEL,CAAC"}
+{"version":3,"file":"card.js","names":[],"sources":["../../src/card/card.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef, useState, type ComponentPropsWithoutRef } from \"react\";\n\nimport { cn, cnAll } from \"../lib/cn.js\";\n\n/**\n * Card, ported from the legacy shadcn component.\n *\n * Presentational, so there is no React Aria base -- React Aria ships no card,\n * and a container that is not focusable, selectable or interactive needs no\n * behaviour to inherit.\n *\n * Five parts, from six. The census (24 consumer files, the most-used\n * container in the app) reads: Card 55, CardContent 40, CardHeader 21,\n * CardTitle 19, CardDescription 8, CardFooter 2, **CardAction 0**.\n *\n * Dropping `CardAction` takes three things with it, which is most of the\n * legacy header's complexity: the `grid`, the `grid-rows-[auto_auto]`, and\n * the `has-data-[slot=card-action]:grid-cols-[1fr_auto]` rule that existed\n * only to reserve a column for it. With no action to place, a header is a\n * stack.\n *\n * Two more legacy rules are gone. `[.border-b]:pb-6` and `[.border-t]:pt-6`\n * added padding when the CONSUMER happened to add a border class -- clever,\n * but action at a distance through a class name we do not own, and the census\n * found zero application call sites relying on it (one call site passes\n * `border-b-0`, which removes a border it never had). `@container/card-header`\n * named a container nothing queried.\n *\n * Every string in the cva blocks below is a STATIC literal. Tailwind scans\n * source text, so a class assembled at runtime is invisible to it and would\n * simply never be emitted.\n */\nexport const cardVariants = cva(\n  [\n    \"flex flex-col\",\n    \"rounded-panel border-(length:--border-width) border-border\",\n    \"bg-card text-card-foreground shadow-surface\",\n\n    // box-border and font-sans are not boilerplate. The reset in\n    // @seekalfred/styles is OPT-IN, so a consumer may load none: content-box\n    // would add the padding to any width they set (the Alert shipped\n    // overflowing its container by 46px), and an unstyled document renders\n    // text in a serif (the Accordion shipped its panel that way). Declaring\n    // the family HERE rather than on each part means one declaration covers\n    // the whole subtree by inheritance.\n    \"box-border font-sans\",\n  ],\n  {\n    variants: {\n      /**\n       * The block padding and the gap live here, not in the base, so `flush`\n       * REPLACES them rather than relying on a merge to drop them: the\n       * exported `cardVariants({ flush: true })` is correct on its own.\n       *\n       * Flush keeps the outline, radius, surface and shadow, and clips its\n       * content to the inside of the rounded border: without the clip a filled\n       * child (a table header, a chart) shows square corners over the curve and\n       * covers the left and right hairline. `overflow: clip`, not `hidden`, so\n       * the card does not become a scroll container and a sticky table header\n       * inside it still sticks to the page. The sections keep their inline\n       * padding, so text and a section's fill stay clear of the corner curve\n       * (the fill still meets the side edges: background paints the padding).\n       *\n       * The header and footer hold text, so under flush they keep the 24px\n       * block inset the shell gave up. Without it the title and the footer line\n       * sat against the top and bottom borders, inside the corner curve, and\n       * the clip cut their first glyphs. The inset is a custom property both\n       * sections read, set per variant (never left undefined), so a nested\n       * default card resets it, and a section's own `py-*` still wins by merge.\n       * CardContent stays block-flush: a table or chart meets the edges.\n       */\n      flush: {\n        false: \"gap-6 py-6 [--card-section-py:--spacing(0)]\",\n        true: \"gap-0 py-0 overflow-clip [--card-section-py:--spacing(6)]\",\n      },\n      /**\n       * A featured card: the hairline is replaced by a brand gradient edge,\n       * painted by the `card-highlighted` utility in styles.css. The border\n       * stays (transparent), so a highlighted card has exactly the box of a\n       * plain one and a list of mixed cards does not shift.\n       */\n      highlighted: {\n        false: \"\",\n        true: \"card-highlighted border-transparent\",\n      },\n    },\n    compoundVariants: [\n      // The flush clip would cut away the gradient edge, which is painted in\n      // the border area outside the padding box. See card-highlighted-flush.\n      { flush: true, highlighted: true, class: \"card-highlighted-flush\" },\n    ],\n    defaultVariants: { flush: false, highlighted: false },\n  },\n);\n\n/**\n * Padding is inline-only on the sections and block-only on the shell.\n *\n * That split is load-bearing rather than stylistic: it is what lets a\n * consumer run a divider or a full-bleed image edge to edge, which a single\n * `p-6` on the shell would make impossible.\n */\nexport const cardHeaderVariants = cva(\"flex flex-col gap-1.5 px-6 py-(--card-section-py)\");\n\nexport const cardTitleVariants = cva([\n  // leading-* AFTER text-*: tailwind-merge treats a later text-* as owning\n  // line-height and silently strips a leading-* that precedes it.\n  \"text-base leading-(--leading-none) font-semibold\",\n  // The user-agent <h3> ships a 1em block margin and font-size 1.17em. The\n  // legacy component was a <div> and never met either.\n  \"m-0\",\n]);\n\nexport const cardDescriptionVariants = cva([\n  \"text-sm leading-(--leading-normal) text-muted-foreground\",\n]);\n\nexport const cardContentVariants = cva(\"px-6\");\n\nexport const cardFooterVariants = cva(\"flex items-center px-6 py-(--card-section-py)\");\n\n/**\n * A content container.\n *\n * @example\n * <Card>\n *   <CardHeader>\n *     <CardTitle>Learning Progress</CardTitle>\n *     <CardDescription>Across all active courses.</CardDescription>\n *   </CardHeader>\n *   <CardContent>Twelve of eighteen modules complete.</CardContent>\n * </Card>\n */\nexport interface CardProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Make the card respond to a pointer: it floats 2px on a spring while it is pointed\n   * at, its border darkens and its shadow deepens. Mouse and pen only; touch never lifts.\n   * Leave it off for a card that is not a target: a static card should not move.\n   */\n  interactive?: boolean;\n  /**\n   * A featured card: a brand gradient edge in place of the hairline. Use it for the\n   * one card a view wants the eye to land on (a recommended action, the suggested\n   * plan), never for several at once. The edge is decoration, so say WHY the card\n   * is featured in its content too: colour alone does not reach a screen reader.\n   * @default false\n   */\n  highlighted?: boolean;\n  /**\n   * Edge-to-edge content: no shell padding and no gap between the parts, and the\n   * content is clipped to the rounded border. The outline, radius, surface and\n   * shadow stay. For a table, list or full-bleed chart that must meet the card's\n   * top and bottom. The header and footer keep a 24px block inset so their text\n   * clears the corner curve, and every section keeps its inline padding: a\n   * section's fill already reaches the side edges.\n   * @default false\n   */\n  flush?: boolean;\n}\n\nexport const Card = forwardRef<HTMLDivElement, CardProps>(function Card(\n  {\n    className,\n    interactive = false,\n    highlighted = false,\n    flush = false,\n    onPointerEnter,\n    onPointerLeave,\n    ...props\n  },\n  ref,\n) {\n  // Pointed at by a mouse or pen. Touch never lifts, so it is read from the pointer, not :hover (which a tap leaves stuck).\n  const [pointed, setPointed] = useState(false);\n  return (\n    <div\n      ref={ref}\n      {...props}\n      data-slot=\"card\"\n      data-interactive={interactive || undefined}\n      data-highlighted={highlighted || undefined}\n      data-flush={flush || undefined}\n      data-pointed={(interactive && pointed) || undefined}\n      onPointerEnter={(event) => {\n        onPointerEnter?.(event);\n        if (interactive && event.pointerType !== \"touch\") setPointed(true);\n      }}\n      onPointerLeave={(event) => {\n        onPointerLeave?.(event);\n        setPointed(false);\n      }}\n      className={cnAll(cardVariants({ flush, highlighted }), interactive && \"card-lift\", className)}\n    />\n  );\n});\n\n/** Title and description, stacked. */\nexport type CardHeaderProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const CardHeader = forwardRef<HTMLDivElement, CardHeaderProps>(function CardHeader(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      {...props}\n      data-slot=\"card-header\"\n      className={cn(cardHeaderVariants(), className)}\n    />\n  );\n});\n\n/**\n * The card's heading.\n *\n * A REAL heading, unlike the legacy `<div class=\"font-semibold\">`. None of\n * the 19 legacy call sites wrapped one, so 19 card titles were invisible to\n * screen-reader heading navigation -- the same shape of finding as the Avatar\n * port's missing `alt`, and the migration is when it gets answered.\n */\nexport interface CardTitleProps extends ComponentPropsWithoutRef<\"h3\"> {\n  /**\n   * Heading level.\n   *\n   * `3` by default, because a card almost always sits under a section\n   * heading. It is a prop rather than a constant because the correct level\n   * is a fact about the PAGE, and a fixed one would be wrong somewhere; the\n   * level changes semantics only, never the rendered size.\n   *\n   * @default 3\n   */\n  level?: 1 | 2 | 3 | 4 | 5 | 6;\n}\n\nexport const CardTitle = forwardRef<HTMLHeadingElement, CardTitleProps>(function CardTitle(\n  { className, level = 3, ...props },\n  ref,\n) {\n  // Static union, not a template literal: `h${level}` is a string React\n  // accepts but TypeScript cannot narrow to an intrinsic element, and the\n  // cast that silences it would also accept `h7`.\n  const Heading = ({ 1: \"h1\", 2: \"h2\", 3: \"h3\", 4: \"h4\", 5: \"h5\", 6: \"h6\" } as const)[level];\n\n  return (\n    <Heading\n      ref={ref}\n      {...props}\n      data-slot=\"card-title\"\n      className={cn(cardTitleVariants(), className)}\n    />\n  );\n});\n\n/** Secondary text under the title. */\nexport type CardDescriptionProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const CardDescription = forwardRef<HTMLDivElement, CardDescriptionProps>(\n  function CardDescription({ className, ...props }, ref) {\n    return (\n      <div\n        ref={ref}\n        {...props}\n        data-slot=\"card-description\"\n        className={cn(cardDescriptionVariants(), className)}\n      />\n    );\n  },\n);\n\n/** The card's body. */\nexport type CardContentProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const CardContent = forwardRef<HTMLDivElement, CardContentProps>(function CardContent(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      {...props}\n      data-slot=\"card-content\"\n      className={cn(cardContentVariants(), className)}\n    />\n  );\n});\n\n/** Actions or metadata at the foot of the card. */\nexport type CardFooterProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const CardFooter = forwardRef<HTMLDivElement, CardFooterProps>(function CardFooter(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      {...props}\n      data-slot=\"card-footer\"\n      className={cn(cardFooterVariants(), className)}\n    />\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,MAAa,eAAe,IAC1B;CACE;CACA;CACA;CASA;AACF,GACA;CACE,UAAU;;;;;;;;;;;;;;;;;;;;;;;EAuBR,OAAO;GACL,OAAO;GACP,MAAM;EACR;;;;;;;EAOA,aAAa;GACX,OAAO;GACP,MAAM;EACR;CACF;CACA,kBAAkB,CAGhB;EAAE,OAAO;EAAM,aAAa;EAAM,OAAO;CAAyB,CACpE;CACA,iBAAiB;EAAE,OAAO;EAAO,aAAa;CAAM;AACtD,CACF;;;;;;;;AASA,MAAa,qBAAqB,IAAI,mDAAmD;AAEzF,MAAa,oBAAoB,IAAI,CAGnC,oDAGA,KACF,CAAC;AAED,MAAa,0BAA0B,IAAI,CACzC,0DACF,CAAC;AAED,MAAa,sBAAsB,IAAI,MAAM;AAE7C,MAAa,qBAAqB,IAAI,+CAA+C;AAyCrF,MAAa,OAAO,WAAsC,SAAS,KACjE,EACE,WACA,cAAc,OACd,cAAc,OACd,QAAQ,OACR,gBACA,gBACA,GAAG,SAEL,KACA;CAEA,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAC5C,OACE,oBAAC,OAAD;EACO;EACL,GAAI;EACJ,aAAU;EACV,oBAAkB,eAAe,KAAA;EACjC,oBAAkB,eAAe,KAAA;EACjC,cAAY,SAAS,KAAA;EACrB,gBAAe,eAAe,WAAY,KAAA;EAC1C,iBAAiB,UAAU;GACzB,iBAAiB,KAAK;GACtB,IAAI,eAAe,MAAM,gBAAgB,SAAS,WAAW,IAAI;EACnE;EACA,iBAAiB,UAAU;GACzB,iBAAiB,KAAK;GACtB,WAAW,KAAK;EAClB;EACA,WAAW,MAAM,aAAa;GAAE;GAAO;EAAY,CAAC,GAAG,eAAe,aAAa,SAAS;CAC7F,CAAA;AAEL,CAAC;AAKD,MAAa,aAAa,WAA4C,SAAS,WAC7E,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,oBAAC,OAAD;EACO;EACL,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,mBAAmB,GAAG,SAAS;CAC9C,CAAA;AAEL,CAAC;AAwBD,MAAa,YAAY,WAA+C,SAAS,UAC/E,EAAE,WAAW,QAAQ,GAAG,GAAG,SAC3B,KACA;CAIA,MAAM,UAAW;EAAE,GAAG;EAAM,GAAG;EAAM,GAAG;EAAM,GAAG;EAAM,GAAG;EAAM,GAAG;CAAK,EAAY;CAEpF,OACE,oBAAC,SAAD;EACO;EACL,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,kBAAkB,GAAG,SAAS;CAC7C,CAAA;AAEL,CAAC;AAKD,MAAa,kBAAkB,WAC7B,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAS,KAAK;CACrD,OACE,oBAAC,OAAD;EACO;EACL,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,wBAAwB,GAAG,SAAS;CACnD,CAAA;AAEL,CACF;AAKA,MAAa,cAAc,WAA6C,SAAS,YAC/E,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,oBAAC,OAAD;EACO;EACL,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,oBAAoB,GAAG,SAAS;CAC/C,CAAA;AAEL,CAAC;AAKD,MAAa,aAAa,WAA4C,SAAS,WAC7E,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,oBAAC,OAAD;EACO;EACL,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,mBAAmB,GAAG,SAAS;CAC9C,CAAA;AAEL,CAAC"}

package/dist/carousel/carousel.d.ts

@@ -16,6 +16,12 @@ import { ReactNode } from "react";
  * rotation pauses on hover, keyboard focus and touch, while the carousel is off
  * screen or the tab is hidden, and is unavailable under reduced motion (where
  * scrolling also jumps instead of gliding).
+ *
+ * `loop` wraps the ends: next on the last slide goes to the first, previous on
+ * the first to the last, from the controls and the arrow keys alike (a swipe
+ * or drag still stops at the end of the track). `peek={false}` shows one slide
+ * at a time across the full width, with no neighbours in view, for a viewer
+ * such as a single creative asset.
  */
 export interface CarouselProps {
   /** Names the carousel for assistive technology, such as "From the Harbour suites". */
@@ -35,6 +41,21 @@ export interface CarouselProps {
   interval?: number;
   /** Starts rotating on mount. Off by default, so motion begins with the viewer. @default false */
   autoplay?: boolean;
+  /**
+   * Wraps around at the ends: next on the last slide goes to the first and
+   * previous on the first goes to the last, from the controls and the arrow
+   * keys. The controls are then never disabled. Home and End still go to the
+   * first and last slide; a swipe or drag stops at the end of the track.
+   * @default false
+   */
+  loop?: boolean;
+  /**
+   * Neighbouring slides peek in at the sides. `false` shows one slide at a
+   * time across the full width (`slideSize` is ignored), with the controls
+   * spanning it too.
+   * @default true
+   */
+  peek?: boolean;
   /** Names of the controls, for translation. */
   labels?: {
     /** @default "Previous slide" */

package/dist/carousel/carousel.js

@@ -9,6 +9,15 @@ import { jsx, jsxs } from "react/jsx-runtime";
 const SLOP = 6;
 /** Release speed in px/s that always moves at least one slide. */
 const FLICK = 360;
+/**
+* How long a glide may take before the carousel stops waiting for it: one slide,
+* plus more per extra slide (a `loop` wrap crosses them all), capped.
+*/
+const BACKSTOP = {
+	base: 1e3,
+	perSlide: 250,
+	max: 3e3
+};
 /** Where a flick would come to rest: velocity (px/s) projected with a paging deceleration rate. */
 const project = (velocity, rate = .995) => velocity / 1e3 * rate / (1 - rate);
 const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
@@ -53,7 +62,7 @@ const Chevron = ({ back }) => /* @__PURE__ */ jsx("svg", {
 	"aria-hidden": "true",
 	children: /* @__PURE__ */ jsx("path", { d: back ? "M10 3.5 5.5 8l4.5 4.5" : "M6 3.5 10.5 8 6 12.5" })
 });
-const Carousel = forwardRef(function Carousel({ label, children, index: controlledIndex, defaultIndex = 0, onIndexChange, slideSize, slideLabel = defaultSlideLabel, interval, autoplay = false, labels, className }, ref) {
+const Carousel = forwardRef(function Carousel({ label, children, index: controlledIndex, defaultIndex = 0, onIndexChange, slideSize, slideLabel = defaultSlideLabel, interval, autoplay = false, loop = false, peek = true, labels, className }, ref) {
 	const slides = Children.toArray(children);
 	const count = slides.length;
 	const last = Math.max(0, count - 1);
@@ -121,7 +130,9 @@ const Carousel = forwardRef(function Carousel({ label, children, index: controll
 		}
 		travelling.current = i;
 		clearTimeout(backstop.current);
-		backstop.current = setTimeout(() => travelling.current = null, 1e3);
+		const distance = Math.abs(box.scrollLeft - left) / (step() || 1);
+		const wait = Math.min(BACKSTOP.max, BACKSTOP.base + BACKSTOP.perSlide * Math.max(0, distance - 1));
+		backstop.current = setTimeout(() => travelling.current = null, wait);
 		box.scrollTo({
 			left,
 			behavior: "smooth"
@@ -158,6 +169,17 @@ const Carousel = forwardRef(function Carousel({ label, children, index: controll
 		}
 	}, [index]);
 	useEffect(() => () => clearTimeout(backstop.current), []);
+	useEffect(() => {
+		const box = viewport.current;
+		if (!box) return;
+		const onScrollEnd = () => {
+			if (travelling.current === null) return;
+			travelling.current = null;
+			clearTimeout(backstop.current);
+		};
+		box.addEventListener("scrollend", onScrollEnd);
+		return () => box.removeEventListener("scrollend", onScrollEnd);
+	}, []);
 	function onScroll() {
 		const position = paint();
 		const box = viewport.current;
@@ -170,6 +192,8 @@ const Carousel = forwardRef(function Carousel({ label, children, index: controll
 		if (next !== target.current) commit(next, true);
 	}
 	const advance = () => select(index >= last ? 0 : index + 1, false);
+	/** The slide `by` steps from `from`: clamped at the ends, or around them with `loop`. */
+	const stepFrom = (from, by) => loop ? (from + by + count) % count : clamp(from + by, 0, last);
 	useEffect(() => {
 		const node = root.current;
 		if (!interval || !node) return;
@@ -251,7 +275,7 @@ const Carousel = forwardRef(function Carousel({ label, children, index: controll
 		const node = event.target;
 		if (node.closest("input, textarea, select, [contenteditable]")) return;
 		const from = target.current;
-		const to = event.key === "ArrowLeft" ? from - 1 : event.key === "ArrowRight" ? from + 1 : event.key === "Home" ? 0 : event.key === "End" ? last : null;
+		const to = event.key === "ArrowLeft" ? stepFrom(from, -1) : event.key === "ArrowRight" ? stepFrom(from, 1) : event.key === "Home" ? 0 : event.key === "End" ? last : null;
 		if (to === null) return;
 		event.preventDefault();
 		const next = clamp(to, 0, last);
@@ -272,8 +296,10 @@ const Carousel = forwardRef(function Carousel({ label, children, index: controll
 		"data-slot": "carousel",
 		"aria-roledescription": "carousel",
 		"aria-label": label,
+		"data-loop": loop || void 0,
+		"data-peek": peek ? void 0 : "false",
 		className: cn("carousel", className),
-		style: slideSize ? { "--carousel-slide-size": slideSize } : void 0,
+		style: slideSize && peek ? { "--carousel-slide-size": slideSize } : void 0,
 		onKeyDown,
 		onFocus: (event) => setFocusPaused(event.target !== play.current && event.target.matches(":focus-visible")),
 		onBlur: (event) => {
@@ -359,16 +385,16 @@ const Carousel = forwardRef(function Carousel({ label, children, index: controll
 						children: [/* @__PURE__ */ jsx("button", {
 							type: "button",
 							"aria-label": text.previous,
-							"aria-disabled": index === 0,
+							"aria-disabled": !loop && index === 0,
 							className: "carousel-control",
-							onClick: () => target.current > 0 && select(target.current - 1),
+							onClick: () => (loop || target.current > 0) && select(stepFrom(target.current, -1)),
 							children: /* @__PURE__ */ jsx(Chevron, { back: true })
 						}), /* @__PURE__ */ jsx("button", {
 							type: "button",
 							"aria-label": text.next,
-							"aria-disabled": index === last,
+							"aria-disabled": !loop && index === last,
 							className: "carousel-control",
-							onClick: () => target.current < last && select(target.current + 1),
+							onClick: () => (loop || target.current < last) && select(stepFrom(target.current, 1)),
 							children: /* @__PURE__ */ jsx(Chevron, {})
 						})]
 					})