@elmeragroup/fuse 0.1.0-canary.113 → 0.1.0-canary.115

package/README.md

@@ -66,6 +66,8 @@ A `Card` and a `card` Accordion item draw their edge in `--card-border`. Without
 }
 ```
 
+The line between a card's stacked `Card.Section` and `Card.SectionButton` parts is `--card-section-divider`. Without it, it takes your `--border`. External themes draw it in the page tint, `var(--background)`.
+
 A `RadioItem` or `CheckboxItem` row draws its edge in `--selection-border`, and a checked row in `--selection-checked-border`. The line between stacked rows reads `--selection-divider`, and above and below a checked row `--selection-checked-divider`. Without them the row and its dividers take your `--border` and a checked row your `--primary`, as internal themes do. For the external themes' look, where stacked rows keep a grey separator but no outer edge and the control alone shows the selection, set the edge to a transparent colour, point the checked edge at it, and draw both dividers in `--border`. The border keeps its 1px width, so rows join and inset as before, but a row on a `--card`-coloured surface has no outline:
 
 ```css

package/components/card/card-section-button.d.ts

@@ -0,0 +1,23 @@
+import { ReactElement } from "react";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/card/card-section-button.d.ts
+export type CardSectionButtonProps = useRender.ComponentProps<"button">;
+/**
+ * A whole stacked section of a vertical card as one button, such as "No thanks, continue
+ * without" with a trailing caret. It stacks, divides and rounds like a `Card.Section`, and adds
+ * a hover fill, a pointer cursor, the state face and a focus ring drawn inside its own edges, so
+ * the sections around it cannot cover it. It renders `<button type="button">`, the type
+ * `useRender` gives its default button, so it never submits a form it sits in.
+ *
+ * `render={<a href="/terms" />}` makes it a link, which keeps its link semantics and takes no
+ * `type`. A trigger composes it as it composes `Button`:
+ * `<Dialog.Trigger render={<Card.SectionButton />}>Change plan</Dialog.Trigger>`. Hold phrasing
+ * content only, such as text, an icon and a `Card.SectionMedia`, and no other control. Client
+ * only because polymorphism is `useRender`; the rest of the Card compound stays server.
+ */
+export declare function CardSectionButton({ className, render, ...props }: CardSectionButtonProps): ReactElement;
+export declare namespace CardSectionButton {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=card-section-button.d.ts.map

package/components/card/card-section-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-section-button.d.ts","names":[],"sources":["../../../src/components/card/card-section-button.tsx"],"mappings":";;;YAWY,yBAAyB,UAAU;;;;;;;;;;;;;;wBAe/B,oBAAoB,WAAW,WAAW,SAAS,yBAAyB;yBAA5E;MAAA"}

package/components/card/card-section-button.js

@@ -0,0 +1,35 @@
+"use client";
+import { cn } from "../../styles/cn.js";
+import { definedProps } from "../../internal/defined-props.js";
+import { cardSectionVariants } from "./card-variants.js";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/card/card-section-button.tsx
+/**
+* A whole stacked section of a vertical card as one button, such as "No thanks, continue
+* without" with a trailing caret. It stacks, divides and rounds like a `Card.Section`, and adds
+* a hover fill, a pointer cursor, the state face and a focus ring drawn inside its own edges, so
+* the sections around it cannot cover it. It renders `<button type="button">`, the type
+* `useRender` gives its default button, so it never submits a form it sits in.
+*
+* `render={<a href="/terms" />}` makes it a link, which keeps its link semantics and takes no
+* `type`. A trigger composes it as it composes `Button`:
+* `<Dialog.Trigger render={<Card.SectionButton />}>Change plan</Dialog.Trigger>`. Hold phrasing
+* content only, such as text, an icon and a `Card.SectionMedia`, and no other control. Client
+* only because polymorphism is `useRender`; the rest of the Card compound stays server.
+*/
+function CardSectionButton({ className, render, ...props }) {
+	return useRender({
+		defaultTagName: "button",
+		props: {
+			"data-slot": "card-section-button",
+			...mergeProps({ className: cn(cardSectionVariants().button(), className) }, definedProps(props))
+		},
+		render
+	});
+}
+CardSectionButton.displayName = "Card.SectionButton";
+//#endregion
+export { CardSectionButton };
+
+//# sourceMappingURL=card-section-button.js.map

package/components/card/card-section-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-section-button.js","names":[],"sources":["../../../src/components/card/card-section-button.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ReactElement } from \"react\";\n\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\n\nimport { definedProps } from \"../../internal/defined-props\";\nimport { cn } from \"../../styles/cn\";\nimport { cardSectionVariants } from \"./card-variants\";\n\nexport type CardSectionButtonProps = useRender.ComponentProps<\"button\">;\n\n/**\n * A whole stacked section of a vertical card as one button, such as \"No thanks, continue\n * without\" with a trailing caret. It stacks, divides and rounds like a `Card.Section`, and adds\n * a hover fill, a pointer cursor, the state face and a focus ring drawn inside its own edges, so\n * the sections around it cannot cover it. It renders `<button type=\"button\">`, the type\n * `useRender` gives its default button, so it never submits a form it sits in.\n *\n * `render={<a href=\"/terms\" />}` makes it a link, which keeps its link semantics and takes no\n * `type`. A trigger composes it as it composes `Button`:\n * `<Dialog.Trigger render={<Card.SectionButton />}>Change plan</Dialog.Trigger>`. Hold phrasing\n * content only, such as text, an icon and a `Card.SectionMedia`, and no other control. Client\n * only because polymorphism is `useRender`; the rest of the Card compound stays server.\n */\nexport function CardSectionButton({ className, render, ...props }: CardSectionButtonProps): ReactElement {\n  return useRender({\n    defaultTagName: \"button\",\n    props: {\n      \"data-slot\": \"card-section-button\",\n      // Filtered, as Button filters, so a forwarded `type={undefined}` cannot erase the default\n      // button's `type=\"button\"`.\n      ...mergeProps<\"button\">(\n        { className: cn(cardSectionVariants().button(), className) },\n        definedProps(props)\n      ),\n    },\n    render,\n  });\n}\n\nCardSectionButton.displayName = \"Card.SectionButton\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA0BA,SAAgB,kBAAkB,EAAE,WAAW,QAAQ,GAAG,SAA+C;CACvG,OAAO,UAAU;EACf,gBAAgB;EAChB,OAAO;GACL,aAAa;GAGb,GAAG,WACD,EAAE,WAAW,GAAG,oBAAoB,CAAC,CAAC,OAAO,GAAG,SAAS,EAAE,GAC3D,aAAa,KAAK,CACpB;EACF;EACA;CACF,CAAC;AACH;AAEA,kBAAkB,cAAc"}

package/components/card/card-variants.d.ts

@@ -112,6 +112,53 @@ export declare const cardVariants: import("tailwind-variants").TVReturnType<{
   cardContent: string;
   cardFooter: string;
 }>>;
+/**
+ * Module-private recipe for the stacked section parts, kept off the public `cardVariants`.
+ * `section` is the static `Card.Section` and `button` the interactive `Card.SectionButton`; both
+ * take the stacked shell, and a `Card.SectionMedia` child makes either a two-column grid.
+ * Fuse ships no preflight, so `button` resets a native button's face, font and alignment itself.
+ * The typed `*-[…:inherit]` font utilities, as on Button's `icon-inline`, let tailwind-merge
+ * replace them with a consumer's `text-*`, `font-*` or `leading-*` class. The button takes Item's
+ * anchor hover fill, a pointer cursor, the state face and the self focus ring drawn inset, which
+ * the sections around it cannot paint over.
+ */
+export declare const cardSectionVariants: import("tailwind-variants").TVReturnType<{
+  [key: string]: {
+    [key: string]: {
+      button?: import("tailwind-variants").ClassValue;
+      media?: import("tailwind-variants").ClassValue;
+      section?: import("tailwind-variants").ClassValue;
+    } | import("tailwind-variants").ClassValue;
+  };
+} | {
+  [x: string]: {
+    [x: string]: {
+      button?: import("tailwind-variants").ClassValue;
+      media?: import("tailwind-variants").ClassValue;
+      section?: import("tailwind-variants").ClassValue;
+    } | import("tailwind-variants").ClassValue;
+  };
+} | {}, {
+  section: string[];
+  button: string[];
+  media: string;
+}, undefined, {
+  [key: string]: {
+    [key: string]: {
+      button?: import("tailwind-variants").ClassValue;
+      media?: import("tailwind-variants").ClassValue;
+      section?: import("tailwind-variants").ClassValue;
+    } | import("tailwind-variants").ClassValue;
+  };
+} | {}, {
+  section: string[];
+  button: string[];
+  media: string;
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
+  section: string[];
+  button: string[];
+  media: string;
+}>>;
 /**
  * Module-private type-scale recipes for `Card.Title` / `Card.Description`.
  * Not exported from `@elmeragroup/fuse/card` — there is no borrow

package/components/card/card-variants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"card-variants.d.ts","names":[],"sources":["../../../src/components/card/card-variants.ts"],"mappings":";;;;;;;;;;;;;;;;;qBAyBa,0CAAY;;IAcnB;MACE;MACA;MACA;;IAEF;MACE;MAIA;MACA;MACA;MACA;;;;IAIF;MAAW;;IACX;MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAiBC,+CAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAmBjB,qDAAuB"}
+{"version":3,"file":"card-variants.d.ts","names":[],"sources":["../../../src/components/card/card-variants.ts"],"mappings":";;;;;;;;;;;;;;;;;qBA6Ba,0CAAY;;IAcnB;MACE;MAGA;MACA;;IAEF;MACE;MAIA;MACA;MACA;MACA;;;;IAIF;MAAW;;IACX;MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAwBC,iDAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBA0BnB,+CAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAmBjB,qDAAuB"}

package/components/card/card-variants.js

@@ -1,5 +1,8 @@
+import { cn } from "../../styles/cn.js";
 import { tv } from "../../styles/tv.js";
-import { cardDefaultTierClass, cardHorizontalShellClass, cardLargeTierClass, cardSectionShellClass, cardShellClass } from "../../styles/inner-corner/card.js";
+import { selfFocusRingClass } from "../../styles/utils.js";
+import { nativeStateFaceClass } from "../../styles/state-face.js";
+import { cardDefaultTierClass, cardHorizontalShellClass, cardLargeTierClass, cardSectionShellClass, cardShellClass, cardStackedSectionShellClass } from "../../styles/inner-corner/card.js";
 //#region src/components/card/card-variants.ts
 /**
 * PUBLIC slot recipe. `text-field`'s `card` variant and
@@ -32,7 +35,11 @@ const cardVariants = tv({
 		direction: {
 			vertical: {
 				cardHeader: cardSectionShellClass,
-				cardContent: [cardSectionShellClass, "not-first:pt-0"],
+				cardContent: [
+					cardSectionShellClass,
+					"not-first:pt-0",
+					"[:where([data-slot=card-section])>&]:p-0"
+				],
 				cardFooter: [cardSectionShellClass, "not-first:pt-0"]
 			},
 			horizontal: {
@@ -53,6 +60,29 @@ const cardVariants = tv({
 		size: "default"
 	}
 });
+const sectionMediaGridClass = cn("has-[>[data-slot=card-section-media]]:grid has-[>[data-slot=card-section-media]]:grid-cols-[auto_minmax(0,1fr)] has-[>[data-slot=card-section-media]]:items-center has-[>[data-slot=card-section-media]]:gap-x-(--surface-gap-md)");
+/**
+* Module-private recipe for the stacked section parts, kept off the public `cardVariants`.
+* `section` is the static `Card.Section` and `button` the interactive `Card.SectionButton`; both
+* take the stacked shell, and a `Card.SectionMedia` child makes either a two-column grid.
+* Fuse ships no preflight, so `button` resets a native button's face, font and alignment itself.
+* The typed `*-[…:inherit]` font utilities, as on Button's `icon-inline`, let tailwind-merge
+* replace them with a consumer's `text-*`, `font-*` or `leading-*` class. The button takes Item's
+* anchor hover fill, a pointer cursor, the state face and the self focus ring drawn inset, which
+* the sections around it cannot paint over.
+*/
+const cardSectionVariants = tv({ slots: {
+	section: [cardStackedSectionShellClass, sectionMediaGridClass],
+	button: [
+		cardStackedSectionShellClass,
+		sectionMediaGridClass,
+		"box-border block w-full cursor-pointer bg-transparent text-start text-inherit no-underline transition-colors duration-100 enabled-hover:bg-muted",
+		"font-[family-name:inherit] text-[length:inherit] leading-[inherit] font-[weight:inherit]",
+		cn(selfFocusRingClass, "focus-visible:ring-inset"),
+		nativeStateFaceClass
+	],
+	media: "flex shrink-0 items-center justify-center [&>svg]:size-5 [&[hidden]:not([hidden=until-found])]:hidden"
+} });
 /**
 * Module-private type-scale recipes for `Card.Title` / `Card.Description`.
 * Not exported from `@elmeragroup/fuse/card` — there is no borrow
@@ -87,6 +117,6 @@ const cardDescriptionVariants = tv({
 	defaultVariants: { size: "sm" }
 });
 //#endregion
-export { cardDescriptionVariants, cardTitleVariants, cardVariants };
+export { cardDescriptionVariants, cardSectionVariants, cardTitleVariants, cardVariants };
 
 //# sourceMappingURL=card-variants.js.map

package/components/card/card-variants.js.map

@@ -1 +1 @@
-{"version":3,"file":"card-variants.js","names":[],"sources":["../../../src/components/card/card-variants.ts"],"sourcesContent":["import {\n  cardDefaultTierClass,\n  cardHorizontalShellClass,\n  cardLargeTierClass,\n  cardSectionShellClass,\n  cardShellClass,\n} from \"../../styles/inner-corner/card\";\nimport { tv } from \"../../styles/tv\";\n\n/**\n * PUBLIC slot recipe. `text-field`'s `card` variant and\n * `CheckboxCard` compose it, so it ships from `@elmeragroup/fuse/card`.\n * The base draws its edge in `--card-border`, which external themes make transparent; both\n * composers pin `border-border` over it, since a field box and a control keep a visible edge.\n * Horizontal cards keep their header text in a grid and wrap whole sections when\n * the container cannot fit them side by side.\n * The external ref's surface/padding axes are decomposed away into `direction` and `size`.\n * `size` sets the card's surface tier on the base as `--card-pad`: the medium tier,\n * `--surface-pad-md`, by default and the large tier, `--surface-pad-lg`, at `lg`. Sections pad\n * with it, and a content or footer below another section drops its top padding, so the tier is\n * also the gap between sections. A content or footer that opens the card keeps it. A horizontal\n * card pads and gaps its sections with the same tier.\n * The title is `leading-snug` in both directions, as `Heading` and `Item.Title` are, so a title\n * that wraps keeps space between its lines.\n */\nexport const cardVariants = tv({\n  slots: {\n    base: [cardShellClass, \"shadow-xs flex flex-col border-card-border bg-card text-card-foreground\"],\n    cardHeader:\n      \"@container/card-header grid auto-rows-min items-start gap-1.5 has-data-[slot=card-action]:grid-cols-[1fr_auto]\",\n    cardTag: \"text-sm font-semibold text-muted-foreground\",\n    cardTitle: \"font-semibold leading-snug\",\n    cardDescription: \"text-muted-foreground\",\n    cardAction: \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n    cardContent: \"\",\n    cardFooter: \"flex items-center\",\n  },\n  variants: {\n    direction: {\n      vertical: {\n        cardHeader: cardSectionShellClass,\n        cardContent: [cardSectionShellClass, \"not-first:pt-0\"],\n        cardFooter: [cardSectionShellClass, \"not-first:pt-0\"],\n      },\n      horizontal: {\n        base: [\n          cardHorizontalShellClass,\n          \"flex-row flex-wrap items-start gap-[var(--card-pad,var(--surface-pad-md))]\",\n        ],\n        cardHeader: \"min-w-0 flex-[2_1_16rem] wrap-anywhere\",\n        cardContent: \"min-w-0 flex-[1_1_12rem] wrap-anywhere\",\n        cardFooter: \"min-w-0 flex-[1_1_8rem] wrap-anywhere\",\n        cardTitle: \"text-xl/snug\",\n      },\n    },\n    size: {\n      default: { base: cardDefaultTierClass },\n      lg: { base: cardLargeTierClass },\n    },\n  },\n  defaultVariants: {\n    direction: \"vertical\",\n    size: \"default\",\n  },\n});\n\n/**\n * Module-private type-scale recipes for `Card.Title` / `Card.Description`.\n * Not exported from `@elmeragroup/fuse/card` — there is no borrow\n * pattern. Kept off `cardVariants` because `direction=\"horizontal\"` already\n * sets `cardTitle: \"text-xl/snug\"`; a second `size` axis on that slot would fight\n * through twMerge. `size` is a type-scale axis, not a density control-box rung:\n * it does not read `--control-*`.\n */\nexport const cardTitleVariants = tv({\n  variants: {\n    size: {\n      default: \"text-base\",\n      sm: \"text-sm\",\n      lg: \"text-lg\",\n      xl: \"text-xl\",\n      \"2xl\": \"text-2xl\",\n      \"3xl\": \"text-3xl\",\n      \"4xl\": \"text-4xl\",\n      \"5xl\": \"text-5xl\",\n      \"6xl\": \"text-6xl\",\n    },\n  },\n  defaultVariants: {\n    size: \"2xl\",\n  },\n});\n\nexport const cardDescriptionVariants = tv({\n  variants: {\n    size: {\n      xs: \"text-xs\",\n      sm: \"text-sm\",\n      default: \"text-base\",\n      lg: \"text-lg\",\n      xl: \"text-xl\",\n      \"2xl\": \"text-2xl\",\n    },\n  },\n  defaultVariants: {\n    size: \"sm\",\n  },\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAyBA,MAAa,eAAe,GAAG;CAC7B,OAAO;EACL,MAAM,CAAC,gBAAgB,yEAAyE;EAChG,YACE;EACF,SAAS;EACT,WAAW;EACX,iBAAiB;EACjB,YAAY;EACZ,aAAa;EACb,YAAY;CACd;CACA,UAAU;EACR,WAAW;GACT,UAAU;IACR,YAAY;IACZ,aAAa,CAAC,uBAAuB,gBAAgB;IACrD,YAAY,CAAC,uBAAuB,gBAAgB;GACtD;GACA,YAAY;IACV,MAAM,CACJ,0BACA,4EACF;IACA,YAAY;IACZ,aAAa;IACb,YAAY;IACZ,WAAW;GACb;EACF;EACA,MAAM;GACJ,SAAS,EAAE,MAAM,qBAAqB;GACtC,IAAI,EAAE,MAAM,mBAAmB;EACjC;CACF;CACA,iBAAiB;EACf,WAAW;EACX,MAAM;CACR;AACF,CAAC;;;;;;;;;AAUD,MAAa,oBAAoB,GAAG;CAClC,UAAU,EACR,MAAM;EACJ,SAAS;EACT,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,OAAO;EACP,OAAO;EACP,OAAO;EACP,OAAO;EACP,OAAO;CACT,EACF;CACA,iBAAiB,EACf,MAAM,MACR;AACF,CAAC;AAED,MAAa,0BAA0B,GAAG;CACxC,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,SAAS;EACT,IAAI;EACJ,IAAI;EACJ,OAAO;CACT,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CAAC"}
+{"version":3,"file":"card-variants.js","names":[],"sources":["../../../src/components/card/card-variants.ts"],"sourcesContent":["import { cn } from \"../../styles/cn\";\nimport {\n  cardDefaultTierClass,\n  cardHorizontalShellClass,\n  cardLargeTierClass,\n  cardSectionShellClass,\n  cardShellClass,\n  cardStackedSectionShellClass,\n} from \"../../styles/inner-corner/card\";\nimport { nativeStateFaceClass } from \"../../styles/state-face\";\nimport { tv } from \"../../styles/tv\";\nimport { selfFocusRingClass } from \"../../styles/utils\";\n\n/**\n * PUBLIC slot recipe. `text-field`'s `card` variant and\n * `CheckboxCard` compose it, so it ships from `@elmeragroup/fuse/card`.\n * The base draws its edge in `--card-border`, which external themes make transparent; both\n * composers pin `border-border` over it, since a field box and a control keep a visible edge.\n * Horizontal cards keep their header text in a grid and wrap whole sections when\n * the container cannot fit them side by side.\n * The external ref's surface/padding axes are decomposed away into `direction` and `size`.\n * `size` sets the card's surface tier on the base as `--card-pad`: the medium tier,\n * `--surface-pad-md`, by default and the large tier, `--surface-pad-lg`, at `lg`. Sections pad\n * with it, and a content or footer below another section drops its top padding, so the tier is\n * also the gap between sections. A content or footer that opens the card keeps it. A horizontal\n * card pads and gaps its sections with the same tier.\n * The title is `leading-snug` in both directions, as `Heading` and `Item.Title` are, so a title\n * that wraps keeps space between its lines.\n */\nexport const cardVariants = tv({\n  slots: {\n    base: [cardShellClass, \"shadow-xs flex flex-col border-card-border bg-card text-card-foreground\"],\n    cardHeader:\n      \"@container/card-header grid auto-rows-min items-start gap-1.5 has-data-[slot=card-action]:grid-cols-[1fr_auto]\",\n    cardTag: \"text-sm font-semibold text-muted-foreground\",\n    cardTitle: \"font-semibold leading-snug\",\n    cardDescription: \"text-muted-foreground\",\n    cardAction: \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n    cardContent: \"\",\n    cardFooter: \"flex items-center\",\n  },\n  variants: {\n    direction: {\n      vertical: {\n        cardHeader: cardSectionShellClass,\n        // Inside a `Card.Section` the content is the section's column and the section pads, so\n        // the content drops its own tier there.\n        cardContent: [cardSectionShellClass, \"not-first:pt-0\", \"[:where([data-slot=card-section])>&]:p-0\"],\n        cardFooter: [cardSectionShellClass, \"not-first:pt-0\"],\n      },\n      horizontal: {\n        base: [\n          cardHorizontalShellClass,\n          \"flex-row flex-wrap items-start gap-[var(--card-pad,var(--surface-pad-md))]\",\n        ],\n        cardHeader: \"min-w-0 flex-[2_1_16rem] wrap-anywhere\",\n        cardContent: \"min-w-0 flex-[1_1_12rem] wrap-anywhere\",\n        cardFooter: \"min-w-0 flex-[1_1_8rem] wrap-anywhere\",\n        cardTitle: \"text-xl/snug\",\n      },\n    },\n    size: {\n      default: { base: cardDefaultTierClass },\n      lg: { base: cardLargeTierClass },\n    },\n  },\n  defaultVariants: {\n    direction: \"vertical\",\n    size: \"default\",\n  },\n});\n\n// A `Card.SectionMedia` child makes a section a two-column grid, the media centred beside the content.\nconst sectionMediaGridClass = cn(\n  \"has-[>[data-slot=card-section-media]]:grid has-[>[data-slot=card-section-media]]:grid-cols-[auto_minmax(0,1fr)] has-[>[data-slot=card-section-media]]:items-center has-[>[data-slot=card-section-media]]:gap-x-(--surface-gap-md)\"\n);\n\n/**\n * Module-private recipe for the stacked section parts, kept off the public `cardVariants`.\n * `section` is the static `Card.Section` and `button` the interactive `Card.SectionButton`; both\n * take the stacked shell, and a `Card.SectionMedia` child makes either a two-column grid.\n * Fuse ships no preflight, so `button` resets a native button's face, font and alignment itself.\n * The typed `*-[…:inherit]` font utilities, as on Button's `icon-inline`, let tailwind-merge\n * replace them with a consumer's `text-*`, `font-*` or `leading-*` class. The button takes Item's\n * anchor hover fill, a pointer cursor, the state face and the self focus ring drawn inset, which\n * the sections around it cannot paint over.\n */\nexport const cardSectionVariants = tv({\n  slots: {\n    section: [cardStackedSectionShellClass, sectionMediaGridClass],\n    button: [\n      cardStackedSectionShellClass,\n      sectionMediaGridClass,\n      \"box-border block w-full cursor-pointer bg-transparent text-start text-inherit no-underline transition-colors duration-100 enabled-hover:bg-muted\",\n      \"font-[family-name:inherit] text-[length:inherit] leading-[inherit] font-[weight:inherit]\",\n      // oxlint-disable-next-line elmera/no-local-focus-ring -- the shared self ring, drawn inset\n      cn(selfFocusRingClass, \"focus-visible:ring-inset\"),\n      nativeStateFaceClass,\n    ],\n    // Without preflight the media's own `flex` beats the user-agent `[hidden]` rule.\n    media:\n      \"flex shrink-0 items-center justify-center [&>svg]:size-5 [&[hidden]:not([hidden=until-found])]:hidden\",\n  },\n});\n\n/**\n * Module-private type-scale recipes for `Card.Title` / `Card.Description`.\n * Not exported from `@elmeragroup/fuse/card` — there is no borrow\n * pattern. Kept off `cardVariants` because `direction=\"horizontal\"` already\n * sets `cardTitle: \"text-xl/snug\"`; a second `size` axis on that slot would fight\n * through twMerge. `size` is a type-scale axis, not a density control-box rung:\n * it does not read `--control-*`.\n */\nexport const cardTitleVariants = tv({\n  variants: {\n    size: {\n      default: \"text-base\",\n      sm: \"text-sm\",\n      lg: \"text-lg\",\n      xl: \"text-xl\",\n      \"2xl\": \"text-2xl\",\n      \"3xl\": \"text-3xl\",\n      \"4xl\": \"text-4xl\",\n      \"5xl\": \"text-5xl\",\n      \"6xl\": \"text-6xl\",\n    },\n  },\n  defaultVariants: {\n    size: \"2xl\",\n  },\n});\n\nexport const cardDescriptionVariants = tv({\n  variants: {\n    size: {\n      xs: \"text-xs\",\n      sm: \"text-sm\",\n      default: \"text-base\",\n      lg: \"text-lg\",\n      xl: \"text-xl\",\n      \"2xl\": \"text-2xl\",\n    },\n  },\n  defaultVariants: {\n    size: \"sm\",\n  },\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA6BA,MAAa,eAAe,GAAG;CAC7B,OAAO;EACL,MAAM,CAAC,gBAAgB,yEAAyE;EAChG,YACE;EACF,SAAS;EACT,WAAW;EACX,iBAAiB;EACjB,YAAY;EACZ,aAAa;EACb,YAAY;CACd;CACA,UAAU;EACR,WAAW;GACT,UAAU;IACR,YAAY;IAGZ,aAAa;KAAC;KAAuB;KAAkB;IAA0C;IACjG,YAAY,CAAC,uBAAuB,gBAAgB;GACtD;GACA,YAAY;IACV,MAAM,CACJ,0BACA,4EACF;IACA,YAAY;IACZ,aAAa;IACb,YAAY;IACZ,WAAW;GACb;EACF;EACA,MAAM;GACJ,SAAS,EAAE,MAAM,qBAAqB;GACtC,IAAI,EAAE,MAAM,mBAAmB;EACjC;CACF;CACA,iBAAiB;EACf,WAAW;EACX,MAAM;CACR;AACF,CAAC;AAGD,MAAM,wBAAwB,GAC5B,mOACF;;;;;;;;;;;AAYA,MAAa,sBAAsB,GAAG,EACpC,OAAO;CACL,SAAS,CAAC,8BAA8B,qBAAqB;CAC7D,QAAQ;EACN;EACA;EACA;EACA;EAEA,GAAG,oBAAoB,0BAA0B;EACjD;CACF;CAEA,OACE;AACJ,EACF,CAAC;;;;;;;;;AAUD,MAAa,oBAAoB,GAAG;CAClC,UAAU,EACR,MAAM;EACJ,SAAS;EACT,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,OAAO;EACP,OAAO;EACP,OAAO;EACP,OAAO;EACP,OAAO;CACT,EACF;CACA,iBAAiB,EACf,MAAM,MACR;AACF,CAAC;AAED,MAAa,0BAA0B,GAAG;CACxC,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,SAAS;EACT,IAAI;EACJ,IAAI;EACJ,OAAO;CACT,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CAAC"}

package/components/card/card.d.ts

@@ -1,3 +1,4 @@
+import { CardSectionButton } from "./card-section-button.js";
 import { cardDescriptionVariants, cardTitleVariants, cardVariants } from "./card-variants.js";
 import { HTMLAttributes, ReactElement, ReactNode } from "react";
 import { VariantProps } from "tailwind-variants";
@@ -46,8 +47,29 @@ declare function CardTag({ className, direction, ...props }: CardDivProps): Reac
 declare function CardTitle({ children, className, direction, level, size, icon, ...props }: CardTitleProps): ReactElement;
 declare function CardDescription({ className, direction, size, ...props }: CardDescriptionProps): ReactElement;
 declare function CardAction({ className, direction, ...props }: CardDivProps): ReactElement;
+/**
+ * A card's body. Inside a `Card.Section` it is the section's content column, beside a
+ * `Card.SectionMedia`, and drops its own padding, since the section pads.
+ */
 declare function CardContent({ className, direction, ...props }: CardDivProps): ReactElement;
 declare function CardFooter({ className, direction, ...props }: CardDivProps): ReactElement;
+/**
+ * One of a vertical card's stacked sections of equal weight. Sections form the card's body under
+ * one optional `Card.Header`: a `Card.Content` or `Card.Footer` beside them takes no divider, so
+ * put that content in a section instead. A section pads every side with the card's tier, a 1px
+ * `--card-section-divider` line separates it from the part above, and the first and last
+ * sections round with the card's corners. A `Card.SectionMedia` as its first child makes it a
+ * two-column grid with the media centred beside a `Card.Content`, the unpadded content column.
+ * A horizontal card pads itself, so sections take no `direction` and belong in a vertical card.
+ * A whole section that acts is a `Card.SectionButton`.
+ */
+declare function CardSection({ className, ...props }: HTMLAttributes<HTMLDivElement>): ReactElement;
+/**
+ * The icon column of a `Card.Section` or `Card.SectionButton`. The section becomes a two-column
+ * grid, this column and the content, with the icon centred on the section's height. An `svg` is
+ * sized to `5`. It is a `span`, so it is phrasing content inside a section button.
+ */
+declare function CardSectionMedia({ className, ...props }: HTMLAttributes<HTMLSpanElement>): ReactElement;
 export declare const Card: {
   Root: typeof CardRoot;
   Header: typeof CardHeader;
@@ -57,6 +79,9 @@ export declare const Card: {
   Action: typeof CardAction;
   Content: typeof CardContent;
   Footer: typeof CardFooter;
+  Section: typeof CardSection;
+  SectionButton: typeof CardSectionButton;
+  SectionMedia: typeof CardSectionMedia;
 };
 //#endregion
 //# sourceMappingURL=card.d.ts.map

package/components/card/card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"card.d.ts","names":[],"sources":["../../../src/components/card/card.tsx"],"mappings":";;;;KASK,mBAAmB,KAAK,oBAAoB;KAE5C,eAAe,eAAe,kBAAkB;KAEhD,gBAAgB;;;;;;;EAOnB,oBAAoB,aAAa,SAAS;;KAGvC;KAEA,iBAAiB,eAAe,sBACnC;;;;;EAKE,QAAQ;;EAER,OAAO,YAAY,oBAAoB;;;;;EAKvC,OAAO;;KAGN,uBAAuB,eAAe,wBACzC;;EAEE,OAAO,YAAY,oBAAoB;;;;;;;;;;iBAWlC,WAAW,WAAW,WAAW,SAAqB,SAAS,gBAAgB;iBAc/E,aAAa,WAAW,cAAc,SAAS,eAAe;iBAa9D,UAAU,WAAW,cAAc,SAAS,eAAe;iBAM3D,YACP,UACA,WACA,WACA,OACA,MACA,SACG,SACF,iBAAiB;iBAuBX,kBACP,WACA,WACA,SACG,SACF,uBAAuB;iBAYjB,aAAa,WAAW,cAAc,SAAS,eAAe;iBAM9D,cAAc,WAAW,cAAc,SAAS,eAAe;iBAa/D,aAAa,WAAW,cAAc,SAAS,eAAe;qBAsB1D;EACX,aAAI;EACJ,eAAM;EACN,YAAG;EACH,cAAK;EACL,oBAAW;EACX,eAAM;EACN,gBAAO;EACP,eAAM"}
+{"version":3,"file":"card.d.ts","names":[],"sources":["../../../src/components/card/card.tsx"],"mappings":";;;;;KAeK,mBAAmB,KAAK,oBAAoB;KAE5C,eAAe,eAAe,kBAAkB;KAEhD,gBAAgB;;;;;;;EAOnB,oBAAoB,aAAa,SAAS;;KAGvC;KAEA,iBAAiB,eAAe,sBACnC;;;;;EAKE,QAAQ;;EAER,OAAO,YAAY,oBAAoB;;;;;EAKvC,OAAO;;KAGN,uBAAuB,eAAe,wBACzC;;EAEE,OAAO,YAAY,oBAAoB;;;;;;;;;;iBAWlC,WAAW,WAAW,WAAW,SAAqB,SAAS,gBAAgB;iBAc/E,aAAa,WAAW,cAAc,SAAS,eAAe;iBAa9D,UAAU,WAAW,cAAc,SAAS,eAAe;iBAM3D,YACP,UACA,WACA,WACA,OACA,MACA,SACG,SACF,iBAAiB;iBAuBX,kBACP,WACA,WACA,SACG,SACF,uBAAuB;iBAYjB,aAAa,WAAW,cAAc,SAAS,eAAe;;;;;iBAU9D,cAAc,WAAW,cAAc,SAAS,eAAe;iBAa/D,aAAa,WAAW,cAAc,SAAS,eAAe;;;;;;;;;;;iBAuB9D,cAAc,cAAc,SAAS,eAAe,kBAAkB;;;;;;iBAWtE,mBAAmB,cAAc,SAAS,eAAe,mBAAmB;qBAiBxE;EACX,aAAI;EACJ,eAAM;EACN,YAAG;EACH,cAAK;EACL,oBAAW;EACX,eAAM;EACN,gBAAO;EACP,eAAM;EACN,gBAAO;EACP,sBAAa;EACb,qBAAY"}

package/components/card/card.js

@@ -1,5 +1,6 @@
 import { cn } from "../../styles/cn.js";
-import { cardDescriptionVariants, cardTitleVariants, cardVariants } from "./card-variants.js";
+import { cardDescriptionVariants, cardSectionVariants, cardTitleVariants, cardVariants } from "./card-variants.js";
+import { CardSectionButton } from "./card-section-button.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/card/card.tsx
 /**
@@ -66,6 +67,10 @@ function CardAction({ className, direction, ...props }) {
 		...props
 	});
 }
+/**
+* A card's body. Inside a `Card.Section` it is the section's content column, beside a
+* `Card.SectionMedia`, and drops its own padding, since the section pads.
+*/
 function CardContent({ className, direction, ...props }) {
 	const { cardContent } = cardVariants({ direction });
 	return /* @__PURE__ */ jsx("div", {
@@ -84,6 +89,37 @@ function CardFooter({ className, direction, ...props }) {
 		...props
 	});
 }
+/**
+* One of a vertical card's stacked sections of equal weight. Sections form the card's body under
+* one optional `Card.Header`: a `Card.Content` or `Card.Footer` beside them takes no divider, so
+* put that content in a section instead. A section pads every side with the card's tier, a 1px
+* `--card-section-divider` line separates it from the part above, and the first and last
+* sections round with the card's corners. A `Card.SectionMedia` as its first child makes it a
+* two-column grid with the media centred beside a `Card.Content`, the unpadded content column.
+* A horizontal card pads itself, so sections take no `direction` and belong in a vertical card.
+* A whole section that acts is a `Card.SectionButton`.
+*/
+function CardSection({ className, ...props }) {
+	const { section } = cardSectionVariants();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-section",
+		className: cn(section(), className),
+		...props
+	});
+}
+/**
+* The icon column of a `Card.Section` or `Card.SectionButton`. The section becomes a two-column
+* grid, this column and the content, with the icon centred on the section's height. An `svg` is
+* sized to `5`. It is a `span`, so it is phrasing content inside a section button.
+*/
+function CardSectionMedia({ className, ...props }) {
+	const { media } = cardSectionVariants();
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "card-section-media",
+		className: cn(media(), className),
+		...props
+	});
+}
 CardRoot.displayName = "Card.Root";
 CardHeader.displayName = "Card.Header";
 CardTag.displayName = "Card.Tag";
@@ -92,6 +128,8 @@ CardDescription.displayName = "Card.Description";
 CardAction.displayName = "Card.Action";
 CardContent.displayName = "Card.Content";
 CardFooter.displayName = "Card.Footer";
+CardSection.displayName = "Card.Section";
+CardSectionMedia.displayName = "Card.SectionMedia";
 const Card = {
 	Root: CardRoot,
 	Header: CardHeader,
@@ -100,7 +138,10 @@ const Card = {
 	Description: CardDescription,
 	Action: CardAction,
 	Content: CardContent,
-	Footer: CardFooter
+	Footer: CardFooter,
+	Section: CardSection,
+	SectionButton: CardSectionButton,
+	SectionMedia: CardSectionMedia
 };
 //#endregion
 export { Card };

package/components/card/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","names":[],"sources":["../../../src/components/card/card.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactElement, ReactNode } from \"react\";\n\nimport type { VariantProps } from \"tailwind-variants\";\n\nimport { cn } from \"../../styles/cn\";\nimport { cardDescriptionVariants, cardTitleVariants, cardVariants } from \"./card-variants\";\n\n// Every part takes `direction`; only the root takes the card's `size`, so the typography `size`\n// of `Card.Title` and `Card.Description` stays their own.\ntype CardVariantProps = Pick<VariantProps<typeof cardVariants>, \"direction\">;\n\ntype CardDivProps = HTMLAttributes<HTMLDivElement> & CardVariantProps;\n\ntype CardRootProps = CardDivProps & {\n  /**\n   * The card's surface tier, which pads its sections, gaps them and sets their inner corner.\n   * `default` takes the medium tier, `--surface-pad-md`, which Items and Accordion items pad with\n   * too, so the card's text starts on their edge. `lg` takes the large\n   * tier, `--surface-pad-lg`, for a card that holds long prose or acts as a page's main panel.\n   */\n  size?: keyof typeof cardVariants.variants.size;\n};\n\ntype CardTitleLevel = 1 | 2 | 3 | 4 | 5 | 6;\n\ntype CardTitleProps = HTMLAttributes<HTMLHeadingElement> &\n  CardVariantProps & {\n    /**\n     * Heading element level — `1`–`6` picks the rendered `h1`–`h6`. Defaults to `3`, so\n     * a card titles itself without assuming its place in the document outline.\n     */\n    level?: CardTitleLevel;\n    /** Typography size for the title, mapped to a `text-{size}` class. Defaults to `2xl`. */\n    size?: NonNullable<VariantProps<typeof cardTitleVariants>[\"size\"]>;\n    /**\n     * Rendered before `children` — the title becomes a flex row (`items-center gap-x-1.5`)\n     * and any `svg` is sized to `5`.\n     */\n    icon?: ReactNode;\n  };\n\ntype CardDescriptionProps = HTMLAttributes<HTMLParagraphElement> &\n  CardVariantProps & {\n    /** Typography size for the description, mapped to a `text-{size}` class. Defaults to `sm`. */\n    size?: NonNullable<VariantProps<typeof cardDescriptionVariants>[\"size\"]>;\n  };\n\n/**\n * The Card surface. It publishes `--inner-corner`, its corner less its border, and its header,\n * content and footer publish it less their padding too. The root and its sections write their\n * `direction` as `data-direction`: a vertical card pads its sections, a horizontal one pads itself.\n * The root writes its `size` as `data-size` and publishes its tier to the sections it holds.\n * Its 1px edge is the theme's `--card-border`: `--border` in internal themes and a zero-alpha\n * colour in external ones. A border colour class still wins.\n */\nfunction CardRoot({ className, direction, size = \"default\", ...props }: CardRootProps): ReactElement {\n  const { base } = cardVariants({ direction, size });\n\n  return (\n    <div\n      data-slot=\"card\"\n      data-direction={direction ?? \"vertical\"}\n      data-size={size}\n      className={cn(base(), className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardHeader({ className, direction, ...props }: CardDivProps): ReactElement {\n  const { cardHeader } = cardVariants({ direction });\n\n  return (\n    <div\n      data-slot=\"card-header\"\n      data-direction={direction ?? \"vertical\"}\n      className={cn(cardHeader(), className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardTag({ className, direction, ...props }: CardDivProps): ReactElement {\n  const { cardTag } = cardVariants({ direction });\n\n  return <div data-slot=\"card-tag\" className={cn(cardTag(), className)} {...props} />;\n}\n\nfunction CardTitle({\n  children,\n  className,\n  direction,\n  level = 3,\n  size = \"2xl\",\n  icon,\n  ...props\n}: CardTitleProps): ReactElement {\n  const { cardTitle } = cardVariants({ direction });\n  const Heading = `h${level}` as const;\n\n  return (\n    <Heading\n      data-slot=\"card-title\"\n      className={cn(\n        cardTitleVariants({ size }),\n        cardTitle({\n          // `direction=\"horizontal\"` pins `text-xl/snug` here, so the size class must come first,\n          // and the slot's leading must follow it: a font size drops a line height before it.\n          className: icon ? \"flex items-center gap-x-1.5 [&>svg]:size-5\" : undefined,\n        }),\n        className\n      )}\n      {...props}>\n      {icon ?? null}\n      {children}\n    </Heading>\n  );\n}\n\nfunction CardDescription({\n  className,\n  direction,\n  size = \"sm\",\n  ...props\n}: CardDescriptionProps): ReactElement {\n  const { cardDescription } = cardVariants({ direction });\n\n  return (\n    <p\n      data-slot=\"card-description\"\n      className={cn(cardDescriptionVariants({ size }), cardDescription(), className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardAction({ className, direction, ...props }: CardDivProps): ReactElement {\n  const { cardAction } = cardVariants({ direction });\n\n  return <div data-slot=\"card-action\" className={cn(cardAction(), className)} {...props} />;\n}\n\nfunction CardContent({ className, direction, ...props }: CardDivProps): ReactElement {\n  const { cardContent } = cardVariants({ direction });\n\n  return (\n    <div\n      data-slot=\"card-content\"\n      data-direction={direction ?? \"vertical\"}\n      className={cn(cardContent(), className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardFooter({ className, direction, ...props }: CardDivProps): ReactElement {\n  const { cardFooter } = cardVariants({ direction });\n\n  return (\n    <div\n      data-slot=\"card-footer\"\n      data-direction={direction ?? \"vertical\"}\n      className={cn(cardFooter(), className)}\n      {...props}\n    />\n  );\n}\n\nCardRoot.displayName = \"Card.Root\";\nCardHeader.displayName = \"Card.Header\";\nCardTag.displayName = \"Card.Tag\";\nCardTitle.displayName = \"Card.Title\";\nCardDescription.displayName = \"Card.Description\";\nCardAction.displayName = \"Card.Action\";\nCardContent.displayName = \"Card.Content\";\nCardFooter.displayName = \"Card.Footer\";\n\nexport const Card = {\n  Root: CardRoot,\n  Header: CardHeader,\n  Tag: CardTag,\n  Title: CardTitle,\n  Description: CardDescription,\n  Action: CardAction,\n  Content: CardContent,\n  Footer: CardFooter,\n};\n"],"mappings":";;;;;;;;;;;;AAuDA,SAAS,SAAS,EAAE,WAAW,WAAW,OAAO,WAAW,GAAG,SAAsC;CACnG,MAAM,EAAE,SAAS,aAAa;EAAE;EAAW;CAAK,CAAC;CAEjD,OACE,oBAAC,OAAD;EACE,aAAU;EACV,kBAAgB,aAAa;EAC7B,aAAW;EACX,WAAW,GAAG,KAAK,GAAG,SAAS;EAC/B,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,WAAW,EAAE,WAAW,WAAW,GAAG,SAAqC;CAClF,MAAM,EAAE,eAAe,aAAa,EAAE,UAAU,CAAC;CAEjD,OACE,oBAAC,OAAD;EACE,aAAU;EACV,kBAAgB,aAAa;EAC7B,WAAW,GAAG,WAAW,GAAG,SAAS;EACrC,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,QAAQ,EAAE,WAAW,WAAW,GAAG,SAAqC;CAC/E,MAAM,EAAE,YAAY,aAAa,EAAE,UAAU,CAAC;CAE9C,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAW,WAAW,GAAG,QAAQ,GAAG,SAAS;EAAG,GAAI;CAAQ,CAAA;AACpF;AAEA,SAAS,UAAU,EACjB,UACA,WACA,WACA,QAAQ,GACR,OAAO,OACP,MACA,GAAG,SAC4B;CAC/B,MAAM,EAAE,cAAc,aAAa,EAAE,UAAU,CAAC;CAChD,MAAM,UAAU,IAAI;CAEpB,OACE,qBAAC,SAAD;EACE,aAAU;EACV,WAAW,GACT,kBAAkB,EAAE,KAAK,CAAC,GAC1B,UAAU,EAGR,WAAW,OAAO,+CAA+C,KAAA,EACnE,CAAC,GACD,SACF;EACA,GAAI;EAXN,UAAA,CAYG,QAAQ,MACR,QACM;;AAEb;AAEA,SAAS,gBAAgB,EACvB,WACA,WACA,OAAO,MACP,GAAG,SACkC;CACrC,MAAM,EAAE,oBAAoB,aAAa,EAAE,UAAU,CAAC;CAEtD,OACE,oBAAC,KAAD;EACE,aAAU;EACV,WAAW,GAAG,wBAAwB,EAAE,KAAK,CAAC,GAAG,gBAAgB,GAAG,SAAS;EAC7E,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,WAAW,EAAE,WAAW,WAAW,GAAG,SAAqC;CAClF,MAAM,EAAE,eAAe,aAAa,EAAE,UAAU,CAAC;CAEjD,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAc,WAAW,GAAG,WAAW,GAAG,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC1F;AAEA,SAAS,YAAY,EAAE,WAAW,WAAW,GAAG,SAAqC;CACnF,MAAM,EAAE,gBAAgB,aAAa,EAAE,UAAU,CAAC;CAElD,OACE,oBAAC,OAAD;EACE,aAAU;EACV,kBAAgB,aAAa;EAC7B,WAAW,GAAG,YAAY,GAAG,SAAS;EACtC,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,WAAW,EAAE,WAAW,WAAW,GAAG,SAAqC;CAClF,MAAM,EAAE,eAAe,aAAa,EAAE,UAAU,CAAC;CAEjD,OACE,oBAAC,OAAD;EACE,aAAU;EACV,kBAAgB,aAAa;EAC7B,WAAW,GAAG,WAAW,GAAG,SAAS;EACrC,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,cAAc;AACvB,WAAW,cAAc;AACzB,QAAQ,cAAc;AACtB,UAAU,cAAc;AACxB,gBAAgB,cAAc;AAC9B,WAAW,cAAc;AACzB,YAAY,cAAc;AAC1B,WAAW,cAAc;AAEzB,MAAa,OAAO;CAClB,MAAM;CACN,QAAQ;CACR,KAAK;CACL,OAAO;CACP,aAAa;CACb,QAAQ;CACR,SAAS;CACT,QAAQ;AACV"}
+{"version":3,"file":"card.js","names":[],"sources":["../../../src/components/card/card.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactElement, ReactNode } from \"react\";\n\nimport type { VariantProps } from \"tailwind-variants\";\n\nimport { cn } from \"../../styles/cn\";\nimport { CardSectionButton } from \"./card-section-button\";\nimport {\n  cardDescriptionVariants,\n  cardSectionVariants,\n  cardTitleVariants,\n  cardVariants,\n} from \"./card-variants\";\n\n// Every part takes `direction`; only the root takes the card's `size`, so the typography `size`\n// of `Card.Title` and `Card.Description` stays their own.\ntype CardVariantProps = Pick<VariantProps<typeof cardVariants>, \"direction\">;\n\ntype CardDivProps = HTMLAttributes<HTMLDivElement> & CardVariantProps;\n\ntype CardRootProps = CardDivProps & {\n  /**\n   * The card's surface tier, which pads its sections, gaps them and sets their inner corner.\n   * `default` takes the medium tier, `--surface-pad-md`, which Items and Accordion items pad with\n   * too, so the card's text starts on their edge. `lg` takes the large\n   * tier, `--surface-pad-lg`, for a card that holds long prose or acts as a page's main panel.\n   */\n  size?: keyof typeof cardVariants.variants.size;\n};\n\ntype CardTitleLevel = 1 | 2 | 3 | 4 | 5 | 6;\n\ntype CardTitleProps = HTMLAttributes<HTMLHeadingElement> &\n  CardVariantProps & {\n    /**\n     * Heading element level — `1`–`6` picks the rendered `h1`–`h6`. Defaults to `3`, so\n     * a card titles itself without assuming its place in the document outline.\n     */\n    level?: CardTitleLevel;\n    /** Typography size for the title, mapped to a `text-{size}` class. Defaults to `2xl`. */\n    size?: NonNullable<VariantProps<typeof cardTitleVariants>[\"size\"]>;\n    /**\n     * Rendered before `children` — the title becomes a flex row (`items-center gap-x-1.5`)\n     * and any `svg` is sized to `5`.\n     */\n    icon?: ReactNode;\n  };\n\ntype CardDescriptionProps = HTMLAttributes<HTMLParagraphElement> &\n  CardVariantProps & {\n    /** Typography size for the description, mapped to a `text-{size}` class. Defaults to `sm`. */\n    size?: NonNullable<VariantProps<typeof cardDescriptionVariants>[\"size\"]>;\n  };\n\n/**\n * The Card surface. It publishes `--inner-corner`, its corner less its border, and its header,\n * content and footer publish it less their padding too. The root and its sections write their\n * `direction` as `data-direction`: a vertical card pads its sections, a horizontal one pads itself.\n * The root writes its `size` as `data-size` and publishes its tier to the sections it holds.\n * Its 1px edge is the theme's `--card-border`: `--border` in internal themes and a zero-alpha\n * colour in external ones. A border colour class still wins.\n */\nfunction CardRoot({ className, direction, size = \"default\", ...props }: CardRootProps): ReactElement {\n  const { base } = cardVariants({ direction, size });\n\n  return (\n    <div\n      data-slot=\"card\"\n      data-direction={direction ?? \"vertical\"}\n      data-size={size}\n      className={cn(base(), className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardHeader({ className, direction, ...props }: CardDivProps): ReactElement {\n  const { cardHeader } = cardVariants({ direction });\n\n  return (\n    <div\n      data-slot=\"card-header\"\n      data-direction={direction ?? \"vertical\"}\n      className={cn(cardHeader(), className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardTag({ className, direction, ...props }: CardDivProps): ReactElement {\n  const { cardTag } = cardVariants({ direction });\n\n  return <div data-slot=\"card-tag\" className={cn(cardTag(), className)} {...props} />;\n}\n\nfunction CardTitle({\n  children,\n  className,\n  direction,\n  level = 3,\n  size = \"2xl\",\n  icon,\n  ...props\n}: CardTitleProps): ReactElement {\n  const { cardTitle } = cardVariants({ direction });\n  const Heading = `h${level}` as const;\n\n  return (\n    <Heading\n      data-slot=\"card-title\"\n      className={cn(\n        cardTitleVariants({ size }),\n        cardTitle({\n          // `direction=\"horizontal\"` pins `text-xl/snug` here, so the size class must come first,\n          // and the slot's leading must follow it: a font size drops a line height before it.\n          className: icon ? \"flex items-center gap-x-1.5 [&>svg]:size-5\" : undefined,\n        }),\n        className\n      )}\n      {...props}>\n      {icon ?? null}\n      {children}\n    </Heading>\n  );\n}\n\nfunction CardDescription({\n  className,\n  direction,\n  size = \"sm\",\n  ...props\n}: CardDescriptionProps): ReactElement {\n  const { cardDescription } = cardVariants({ direction });\n\n  return (\n    <p\n      data-slot=\"card-description\"\n      className={cn(cardDescriptionVariants({ size }), cardDescription(), className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardAction({ className, direction, ...props }: CardDivProps): ReactElement {\n  const { cardAction } = cardVariants({ direction });\n\n  return <div data-slot=\"card-action\" className={cn(cardAction(), className)} {...props} />;\n}\n\n/**\n * A card's body. Inside a `Card.Section` it is the section's content column, beside a\n * `Card.SectionMedia`, and drops its own padding, since the section pads.\n */\nfunction CardContent({ className, direction, ...props }: CardDivProps): ReactElement {\n  const { cardContent } = cardVariants({ direction });\n\n  return (\n    <div\n      data-slot=\"card-content\"\n      data-direction={direction ?? \"vertical\"}\n      className={cn(cardContent(), className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardFooter({ className, direction, ...props }: CardDivProps): ReactElement {\n  const { cardFooter } = cardVariants({ direction });\n\n  return (\n    <div\n      data-slot=\"card-footer\"\n      data-direction={direction ?? \"vertical\"}\n      className={cn(cardFooter(), className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * One of a vertical card's stacked sections of equal weight. Sections form the card's body under\n * one optional `Card.Header`: a `Card.Content` or `Card.Footer` beside them takes no divider, so\n * put that content in a section instead. A section pads every side with the card's tier, a 1px\n * `--card-section-divider` line separates it from the part above, and the first and last\n * sections round with the card's corners. A `Card.SectionMedia` as its first child makes it a\n * two-column grid with the media centred beside a `Card.Content`, the unpadded content column.\n * A horizontal card pads itself, so sections take no `direction` and belong in a vertical card.\n * A whole section that acts is a `Card.SectionButton`.\n */\nfunction CardSection({ className, ...props }: HTMLAttributes<HTMLDivElement>): ReactElement {\n  const { section } = cardSectionVariants();\n\n  return <div data-slot=\"card-section\" className={cn(section(), className)} {...props} />;\n}\n\n/**\n * The icon column of a `Card.Section` or `Card.SectionButton`. The section becomes a two-column\n * grid, this column and the content, with the icon centred on the section's height. An `svg` is\n * sized to `5`. It is a `span`, so it is phrasing content inside a section button.\n */\nfunction CardSectionMedia({ className, ...props }: HTMLAttributes<HTMLSpanElement>): ReactElement {\n  const { media } = cardSectionVariants();\n\n  return <span data-slot=\"card-section-media\" className={cn(media(), className)} {...props} />;\n}\n\nCardRoot.displayName = \"Card.Root\";\nCardHeader.displayName = \"Card.Header\";\nCardTag.displayName = \"Card.Tag\";\nCardTitle.displayName = \"Card.Title\";\nCardDescription.displayName = \"Card.Description\";\nCardAction.displayName = \"Card.Action\";\nCardContent.displayName = \"Card.Content\";\nCardFooter.displayName = \"Card.Footer\";\nCardSection.displayName = \"Card.Section\";\nCardSectionMedia.displayName = \"Card.SectionMedia\";\n\nexport const Card = {\n  Root: CardRoot,\n  Header: CardHeader,\n  Tag: CardTag,\n  Title: CardTitle,\n  Description: CardDescription,\n  Action: CardAction,\n  Content: CardContent,\n  Footer: CardFooter,\n  Section: CardSection,\n  SectionButton: CardSectionButton,\n  SectionMedia: CardSectionMedia,\n};\n"],"mappings":";;;;;;;;;;;;;AA6DA,SAAS,SAAS,EAAE,WAAW,WAAW,OAAO,WAAW,GAAG,SAAsC;CACnG,MAAM,EAAE,SAAS,aAAa;EAAE;EAAW;CAAK,CAAC;CAEjD,OACE,oBAAC,OAAD;EACE,aAAU;EACV,kBAAgB,aAAa;EAC7B,aAAW;EACX,WAAW,GAAG,KAAK,GAAG,SAAS;EAC/B,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,WAAW,EAAE,WAAW,WAAW,GAAG,SAAqC;CAClF,MAAM,EAAE,eAAe,aAAa,EAAE,UAAU,CAAC;CAEjD,OACE,oBAAC,OAAD;EACE,aAAU;EACV,kBAAgB,aAAa;EAC7B,WAAW,GAAG,WAAW,GAAG,SAAS;EACrC,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,QAAQ,EAAE,WAAW,WAAW,GAAG,SAAqC;CAC/E,MAAM,EAAE,YAAY,aAAa,EAAE,UAAU,CAAC;CAE9C,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAW,WAAW,GAAG,QAAQ,GAAG,SAAS;EAAG,GAAI;CAAQ,CAAA;AACpF;AAEA,SAAS,UAAU,EACjB,UACA,WACA,WACA,QAAQ,GACR,OAAO,OACP,MACA,GAAG,SAC4B;CAC/B,MAAM,EAAE,cAAc,aAAa,EAAE,UAAU,CAAC;CAChD,MAAM,UAAU,IAAI;CAEpB,OACE,qBAAC,SAAD;EACE,aAAU;EACV,WAAW,GACT,kBAAkB,EAAE,KAAK,CAAC,GAC1B,UAAU,EAGR,WAAW,OAAO,+CAA+C,KAAA,EACnE,CAAC,GACD,SACF;EACA,GAAI;EAXN,UAAA,CAYG,QAAQ,MACR,QACM;;AAEb;AAEA,SAAS,gBAAgB,EACvB,WACA,WACA,OAAO,MACP,GAAG,SACkC;CACrC,MAAM,EAAE,oBAAoB,aAAa,EAAE,UAAU,CAAC;CAEtD,OACE,oBAAC,KAAD;EACE,aAAU;EACV,WAAW,GAAG,wBAAwB,EAAE,KAAK,CAAC,GAAG,gBAAgB,GAAG,SAAS;EAC7E,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,WAAW,EAAE,WAAW,WAAW,GAAG,SAAqC;CAClF,MAAM,EAAE,eAAe,aAAa,EAAE,UAAU,CAAC;CAEjD,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAc,WAAW,GAAG,WAAW,GAAG,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC1F;;;;;AAMA,SAAS,YAAY,EAAE,WAAW,WAAW,GAAG,SAAqC;CACnF,MAAM,EAAE,gBAAgB,aAAa,EAAE,UAAU,CAAC;CAElD,OACE,oBAAC,OAAD;EACE,aAAU;EACV,kBAAgB,aAAa;EAC7B,WAAW,GAAG,YAAY,GAAG,SAAS;EACtC,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,WAAW,EAAE,WAAW,WAAW,GAAG,SAAqC;CAClF,MAAM,EAAE,eAAe,aAAa,EAAE,UAAU,CAAC;CAEjD,OACE,oBAAC,OAAD;EACE,aAAU;EACV,kBAAgB,aAAa;EAC7B,WAAW,GAAG,WAAW,GAAG,SAAS;EACrC,GAAI;CACL,CAAA;AAEL;;;;;;;;;;;AAYA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAuD;CAC1F,MAAM,EAAE,YAAY,oBAAoB;CAExC,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAe,WAAW,GAAG,QAAQ,GAAG,SAAS;EAAG,GAAI;CAAQ,CAAA;AACxF;;;;;;AAOA,SAAS,iBAAiB,EAAE,WAAW,GAAG,SAAwD;CAChG,MAAM,EAAE,UAAU,oBAAoB;CAEtC,OAAO,oBAAC,QAAD;EAAM,aAAU;EAAqB,WAAW,GAAG,MAAM,GAAG,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC7F;AAEA,SAAS,cAAc;AACvB,WAAW,cAAc;AACzB,QAAQ,cAAc;AACtB,UAAU,cAAc;AACxB,gBAAgB,cAAc;AAC9B,WAAW,cAAc;AACzB,YAAY,cAAc;AAC1B,WAAW,cAAc;AACzB,YAAY,cAAc;AAC1B,iBAAiB,cAAc;AAE/B,MAAa,OAAO;CAClB,MAAM;CACN,QAAQ;CACR,KAAK;CACL,OAAO;CACP,aAAa;CACb,QAAQ;CACR,SAAS;CACT,QAAQ;CACR,SAAS;CACT,eAAe;CACf,cAAc;AAChB"}

package/components/description-list/description-list.d.ts

@@ -2,7 +2,19 @@ import { DescriptionListHeading, DescriptionListHeadingProps } from "./descripti
 import { ComponentProps, ReactElement } from "react";
 //#region src/components/description-list/description-list.d.ts
 export type DescriptionListRootProps = ComponentProps<"div">;
-export type DescriptionListContentProps = ComponentProps<"dl">;
+export type DescriptionListContentProps = ComponentProps<"dl"> & {
+  /**
+   * How terms and details sit. `responsive` stacks each details under its term on phones and
+   * sets them in two columns, with a rule between rows, from `sm` up. `inline` keeps each term
+   * and its details on one row at every width, for label/value rows in cards and summaries: the
+   * details align to the end, a short one never wraps and a long one wraps within 60% of the
+   * row. Inline rows take the label type, have no rules and space with the small surface gap,
+   * and the term is not muted. A colour class on a cell wins in both layouts. The inline cells'
+   * padding, rules, column and alignment come from the list, so override them with a
+   * `[:where([data-layout=inline])>&]:` class or a CSS rule. Defaults to `responsive`.
+   */
+  layout?: "responsive" | "inline";
+};
 export type DescriptionListTermProps = ComponentProps<"dt">;
 export type DescriptionListDetailsProps = ComponentProps<"dd">;
 /**
@@ -11,7 +23,7 @@ export type DescriptionListDetailsProps = ComponentProps<"dd">;
  * possible without making this module a client boundary.
  */
 declare function DescriptionListRoot(props: DescriptionListRootProps): ReactElement;
-declare function DescriptionListContent({ className, ...props }: DescriptionListContentProps): ReactElement;
+declare function DescriptionListContent({ className, layout, ...props }: DescriptionListContentProps): ReactElement;
 declare function DescriptionListTerm({ className, ...props }: DescriptionListTermProps): ReactElement;
 declare function DescriptionListDetails({ className, ...props }: DescriptionListDetailsProps): ReactElement;
 export declare const DescriptionList: {

package/components/description-list/description-list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"description-list.d.ts","names":[],"sources":["../../../src/components/description-list/description-list.tsx"],"mappings":";;;YAKY,2BAA2B;YAC3B,8BAA8B;YAC9B,2BAA2B;YAC3B,8BAA8B;;;;;;iBAQjC,oBAAoB,OAAO,2BAA2B;iBAItD,yBAAyB,cAAc,SAAS,8BAA8B;iBAa9E,sBAAsB,cAAc,SAAS,2BAA2B;iBAaxE,yBAAyB,cAAc,SAAS,8BAA8B;qBAe1E;EACX,aAAI;EACJ,gBAAO;EACP,gBAAO;EACP,aAAI;EACJ,gBAAO"}
+{"version":3,"file":"description-list.d.ts","names":[],"sources":["../../../src/components/description-list/description-list.tsx"],"mappings":";;;YAMY,2BAA2B;YAC3B,8BAA8B;;;;;;;;;;;EAWxC;;YAEU,2BAA2B;YAC3B,8BAA8B;;;;;;iBAQjC,oBAAoB,OAAO,2BAA2B;iBA8BtD,yBACP,WACA,WACG,SACF,8BAA8B;iBAWxB,sBAAsB,cAAc,SAAS,2BAA2B;iBAcxE,yBAAyB,cAAc,SAAS,8BAA8B;qBAmB1E;EACX,aAAI;EACJ,gBAAO;EACP,gBAAO;EACP,aAAI;EACJ,gBAAO"}

package/components/description-list/description-list.js

@@ -1,4 +1,5 @@
 import { cn } from "../../styles/cn.js";
+import { labelTypeClass } from "../../styles/label-type.js";
 import { DescriptionListHeading } from "./description-list-heading.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/description-list/description-list.tsx
@@ -13,24 +14,33 @@ function DescriptionListRoot(props) {
 		...props
 	});
 }
-function DescriptionListContent({ className, ...props }) {
+/** The responsive list: one column on phones, then a term column capped at min(50%, 20rem). */
+const responsiveContentClass = cn("text-base/6 sm:grid-cols-[min(50%,calc(var(--spacing)*80))_auto] sm:text-sm/6 grid grid-cols-1 [--description-list-details:initial] [--description-list-term:initial]");
+/**
+* The inline list: `minmax(0,1fr)` for the terms and `fit-content(60%)` for the details, rows
+* spaced by the small surface gap, the label type set here for the cells to inherit, and
+* consecutive inline lists spaced by the large surface gap.
+*/
+const inlineContentClass = cn("grid grid-cols-[minmax(0,1fr)_fit-content(60%)] gap-x-(--surface-gap-md) gap-y-(--surface-gap-sm)", labelTypeClass, "[--description-list-details:currentColor] [--description-list-term:currentColor]", "[&+&]:mt-(--surface-gap-lg)");
+function DescriptionListContent({ className, layout = "responsive", ...props }) {
 	return /* @__PURE__ */ jsx("dl", {
 		"data-slot": "description-list-content",
-		className: cn("text-base/6 sm:grid-cols-[min(50%,calc(var(--spacing)*80))_auto] sm:text-sm/6 grid grid-cols-1", className),
+		"data-layout": layout,
+		className: cn(layout === "inline" ? inlineContentClass : responsiveContentClass, className),
 		...props
 	});
 }
 function DescriptionListTerm({ className, ...props }) {
 	return /* @__PURE__ */ jsx("dt", {
 		"data-slot": "description-list-term",
-		className: cn("col-start-1 border-t py-(--row-py) pr-(--row-px) text-muted-foreground first-of-type:border-none", className),
+		className: cn("col-start-1 border-t py-(--row-py) pr-(--row-px) text-[color:var(--description-list-term,var(--muted-foreground))] first-of-type:border-none", "[:where([data-layout=inline])>&]:min-w-0 [:where([data-layout=inline])>&]:border-none [:where([data-layout=inline])>&]:p-0 [:where([data-layout=inline])>&]:wrap-anywhere", className),
 		...props
 	});
 }
 function DescriptionListDetails({ className, ...props }) {
 	return /* @__PURE__ */ jsx("dd", {
 		"data-slot": "description-list-details",
-		className: cn("sm:border-t py-(--row-py) text-foreground first-of-type:border-none", className),
+		className: cn("sm:border-t py-(--row-py) text-[color:var(--description-list-details,var(--foreground))] first-of-type:border-none", "[:where([data-layout=inline])>&]:col-start-2 [:where([data-layout=inline])>&]:min-w-0 [:where([data-layout=inline])>&]:border-none [:where([data-layout=inline])>&]:py-0 [:where([data-layout=inline])>&]:text-end [:where([data-layout=inline])>&]:wrap-anywhere", className),
 		...props
 	});
 }

package/components/description-list/description-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"description-list.js","names":[],"sources":["../../../src/components/description-list/description-list.tsx"],"sourcesContent":["import type { ComponentProps, ReactElement } from \"react\";\n\nimport { cn } from \"../../styles/cn\";\nimport { DescriptionListHeading } from \"./description-list-heading\";\n\nexport type DescriptionListRootProps = ComponentProps<\"div\">;\nexport type DescriptionListContentProps = ComponentProps<\"dl\">;\nexport type DescriptionListTermProps = ComponentProps<\"dt\">;\nexport type DescriptionListDetailsProps = ComponentProps<\"dd\">;\nexport type { DescriptionListHeadingProps } from \"./description-list-heading\";\n\n/**\n * Semantic `<dl>/<dt>/<dd>` composite. A server compound: it owns no state, handlers or\n * browser APIs. `Heading` is a client `useRender` island, so other outline levels stay\n * possible without making this module a client boundary.\n */\nfunction DescriptionListRoot(props: DescriptionListRootProps): ReactElement {\n  return <div data-slot=\"description-list\" {...props} />;\n}\n\nfunction DescriptionListContent({ className, ...props }: DescriptionListContentProps): ReactElement {\n  return (\n    <dl\n      data-slot=\"description-list-content\"\n      className={cn(\n        \"text-base/6 sm:grid-cols-[min(50%,calc(var(--spacing)*80))_auto] sm:text-sm/6 grid grid-cols-1\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DescriptionListTerm({ className, ...props }: DescriptionListTermProps): ReactElement {\n  return (\n    <dt\n      data-slot=\"description-list-term\"\n      className={cn(\n        \"col-start-1 border-t py-(--row-py) pr-(--row-px) text-muted-foreground first-of-type:border-none\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DescriptionListDetails({ className, ...props }: DescriptionListDetailsProps): ReactElement {\n  return (\n    <dd\n      data-slot=\"description-list-details\"\n      className={cn(\"sm:border-t py-(--row-py) text-foreground first-of-type:border-none\", className)}\n      {...props}\n    />\n  );\n}\n\nDescriptionListRoot.displayName = \"DescriptionList.Root\";\nDescriptionListContent.displayName = \"DescriptionList.Content\";\nDescriptionListTerm.displayName = \"DescriptionList.Term\";\nDescriptionListDetails.displayName = \"DescriptionList.Details\";\n\nexport const DescriptionList = {\n  Root: DescriptionListRoot,\n  Heading: DescriptionListHeading,\n  Content: DescriptionListContent,\n  Term: DescriptionListTerm,\n  Details: DescriptionListDetails,\n};\n"],"mappings":";;;;;;;;;AAgBA,SAAS,oBAAoB,OAA+C;CAC1E,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAmB,GAAI;CAAQ,CAAA;AACvD;AAEA,SAAS,uBAAuB,EAAE,WAAW,GAAG,SAAoD;CAClG,OACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GACT,kGACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,oBAAoB,EAAE,WAAW,GAAG,SAAiD;CAC5F,OACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GACT,oGACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,uBAAuB,EAAE,WAAW,GAAG,SAAoD;CAClG,OACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GAAG,uEAAuE,SAAS;EAC9F,GAAI;CACL,CAAA;AAEL;AAEA,oBAAoB,cAAc;AAClC,uBAAuB,cAAc;AACrC,oBAAoB,cAAc;AAClC,uBAAuB,cAAc;AAErC,MAAa,kBAAkB;CAC7B,MAAM;CACN,SAAS;CACT,SAAS;CACT,MAAM;CACN,SAAS;AACX"}
+{"version":3,"file":"description-list.js","names":[],"sources":["../../../src/components/description-list/description-list.tsx"],"sourcesContent":["import type { ComponentProps, ReactElement } from \"react\";\n\nimport { cn } from \"../../styles/cn\";\nimport { labelTypeClass } from \"../../styles/label-type\";\nimport { DescriptionListHeading } from \"./description-list-heading\";\n\nexport type DescriptionListRootProps = ComponentProps<\"div\">;\nexport type DescriptionListContentProps = ComponentProps<\"dl\"> & {\n  /**\n   * How terms and details sit. `responsive` stacks each details under its term on phones and\n   * sets them in two columns, with a rule between rows, from `sm` up. `inline` keeps each term\n   * and its details on one row at every width, for label/value rows in cards and summaries: the\n   * details align to the end, a short one never wraps and a long one wraps within 60% of the\n   * row. Inline rows take the label type, have no rules and space with the small surface gap,\n   * and the term is not muted. A colour class on a cell wins in both layouts. The inline cells'\n   * padding, rules, column and alignment come from the list, so override them with a\n   * `[:where([data-layout=inline])>&]:` class or a CSS rule. Defaults to `responsive`.\n   */\n  layout?: \"responsive\" | \"inline\";\n};\nexport type DescriptionListTermProps = ComponentProps<\"dt\">;\nexport type DescriptionListDetailsProps = ComponentProps<\"dd\">;\nexport type { DescriptionListHeadingProps } from \"./description-list-heading\";\n\n/**\n * Semantic `<dl>/<dt>/<dd>` composite. A server compound: it owns no state, handlers or\n * browser APIs. `Heading` is a client `useRender` island, so other outline levels stay\n * possible without making this module a client boundary.\n */\nfunction DescriptionListRoot(props: DescriptionListRootProps): ReactElement {\n  return <div data-slot=\"description-list\" {...props} />;\n}\n\n// The inline layout publishes the term and details colours as the private `--description-list-term`\n// and `--description-list-details`, and the responsive one resets them, so its cells fall back to\n// `--muted-foreground` and `--foreground` read in their own theme scope. A nested list resets them\n// too, and a consumer colour class on a cell still wins in both layouts. Inline cells take the\n// surrounding text colour, such as a card's. The term and details style the rest of the inline\n// layout from their own list's `data-layout`, as its direct children, so a responsive list nested\n// in an inline one keeps its own layout. Plain `cn` constants rather than a `tv` recipe keep\n// tailwind-variants out of this entry's size budget.\n\n/** The responsive list: one column on phones, then a term column capped at min(50%, 20rem). */\nconst responsiveContentClass = cn(\n  \"text-base/6 sm:grid-cols-[min(50%,calc(var(--spacing)*80))_auto] sm:text-sm/6 grid grid-cols-1 [--description-list-details:initial] [--description-list-term:initial]\"\n);\n\n/**\n * The inline list: `minmax(0,1fr)` for the terms and `fit-content(60%)` for the details, rows\n * spaced by the small surface gap, the label type set here for the cells to inherit, and\n * consecutive inline lists spaced by the large surface gap.\n */\nconst inlineContentClass = cn(\n  \"grid grid-cols-[minmax(0,1fr)_fit-content(60%)] gap-x-(--surface-gap-md) gap-y-(--surface-gap-sm)\",\n  labelTypeClass,\n  \"[--description-list-details:currentColor] [--description-list-term:currentColor]\",\n  \"[&+&]:mt-(--surface-gap-lg)\"\n);\n\nfunction DescriptionListContent({\n  className,\n  layout = \"responsive\",\n  ...props\n}: DescriptionListContentProps): ReactElement {\n  return (\n    <dl\n      data-slot=\"description-list-content\"\n      data-layout={layout}\n      className={cn(layout === \"inline\" ? inlineContentClass : responsiveContentClass, className)}\n      {...props}\n    />\n  );\n}\n\nfunction DescriptionListTerm({ className, ...props }: DescriptionListTermProps): ReactElement {\n  return (\n    <dt\n      data-slot=\"description-list-term\"\n      className={cn(\n        \"col-start-1 border-t py-(--row-py) pr-(--row-px) text-[color:var(--description-list-term,var(--muted-foreground))] first-of-type:border-none\",\n        \"[:where([data-layout=inline])>&]:min-w-0 [:where([data-layout=inline])>&]:border-none [:where([data-layout=inline])>&]:p-0 [:where([data-layout=inline])>&]:wrap-anywhere\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DescriptionListDetails({ className, ...props }: DescriptionListDetailsProps): ReactElement {\n  return (\n    <dd\n      data-slot=\"description-list-details\"\n      className={cn(\n        \"sm:border-t py-(--row-py) text-[color:var(--description-list-details,var(--foreground))] first-of-type:border-none\",\n        \"[:where([data-layout=inline])>&]:col-start-2 [:where([data-layout=inline])>&]:min-w-0 [:where([data-layout=inline])>&]:border-none [:where([data-layout=inline])>&]:py-0 [:where([data-layout=inline])>&]:text-end [:where([data-layout=inline])>&]:wrap-anywhere\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nDescriptionListRoot.displayName = \"DescriptionList.Root\";\nDescriptionListContent.displayName = \"DescriptionList.Content\";\nDescriptionListTerm.displayName = \"DescriptionList.Term\";\nDescriptionListDetails.displayName = \"DescriptionList.Details\";\n\nexport const DescriptionList = {\n  Root: DescriptionListRoot,\n  Heading: DescriptionListHeading,\n  Content: DescriptionListContent,\n  Term: DescriptionListTerm,\n  Details: DescriptionListDetails,\n};\n"],"mappings":";;;;;;;;;;AA6BA,SAAS,oBAAoB,OAA+C;CAC1E,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAmB,GAAI;CAAQ,CAAA;AACvD;;AAYA,MAAM,yBAAyB,GAC7B,uKACF;;;;;;AAOA,MAAM,qBAAqB,GACzB,qGACA,gBACA,oFACA,6BACF;AAEA,SAAS,uBAAuB,EAC9B,WACA,SAAS,cACT,GAAG,SACyC;CAC5C,OACE,oBAAC,MAAD;EACE,aAAU;EACV,eAAa;EACb,WAAW,GAAG,WAAW,WAAW,qBAAqB,wBAAwB,SAAS;EAC1F,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,oBAAoB,EAAE,WAAW,GAAG,SAAiD;CAC5F,OACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GACT,gJACA,6KACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,uBAAuB,EAAE,WAAW,GAAG,SAAoD;CAClG,OACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GACT,sHACA,qQACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,oBAAoB,cAAc;AAClC,uBAAuB,cAAc;AACrC,oBAAoB,cAAc;AAClC,uBAAuB,cAAc;AAErC,MAAa,kBAAkB;CAC7B,MAAM;CACN,SAAS;CACT,SAAS;CACT,MAAM;CACN,SAAS;AACX"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elmeragroup/fuse",
-  "version": "0.1.0-canary.113",
+  "version": "0.1.0-canary.115",
   "description": "Fuse — whitelabel React components for Elmera Group's energy brands. One package, twenty theme permutations, ESM-only.",
   "keywords": [
     "react",
@@ -391,7 +391,7 @@
     "access": "public"
   },
   "elmeraRelease": {
-    "commit": "310567f81f5a9145e45c2704bb8f8876f61a2f13",
+    "commit": "41bf4f22a1422017b8b35588da5c3acfc285e646",
     "channel": "canary"
   }
 }

package/styles/fuse.css

@@ -146,6 +146,7 @@
   --color-input: var(--input);
   --color-ring: var(--ring);
   --color-card-border: var(--card-border, var(--border));
+  --color-card-section-divider: var(--card-section-divider, var(--border));
   --color-button-outline: var(--button-outline, var(--border));
   --color-selection-border: var(--selection-border, var(--border));
   --color-selection-checked-border: var(--selection-checked-border, var(--primary));

package/styles/inner-corner/card.d.ts

@@ -1,6 +1,11 @@
 //#region src/styles/inner-corner/card.d.ts
 /**
- * The Card root: `rounded-lg` behind a 1px border.
+ * The Card root: `rounded-lg` behind a 1px border. It hands every direct child the corner a
+ * stacked section rounds with, its own less the border, as the private `--card-section-corner`,
+ * as Frame does with `--frame-corner`. It keys on no slot, because a `Card.SectionButton` a
+ * trigger renders carries the trigger's `data-slot`. Every section resets the property, and the
+ * root's child rule comes later in the sheet at the same specificity, so only a card's direct
+ * section holds a value and one nested deeper is square.
  */
 export declare const cardShellClass: string;
 /**
@@ -33,5 +38,13 @@ export declare const textFieldCardShellClass: string;
  * block axis.
  */
 export declare const checkboxCardContentShellClass: string;
+/**
+ * A stacked `Card.Section` or `Card.SectionButton`: it pads every side with the card's tier,
+ * `--card-pad`, and publishes the same inner corner as the other sections. A 1px
+ * `--card-section-divider` line runs above every section but the first. The first and last sections round their outer corners with the corner the
+ * card hands them, so a fill or a hover fill follows the card's corners. Both skip `hidden`
+ * siblings, and middle sections stay square. Outside a card the section is square.
+ */
+export declare const cardStackedSectionShellClass: string;
 //#endregion
 //# sourceMappingURL=card.d.ts.map

package/styles/inner-corner/card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"card.d.ts","names":[],"sources":["../../../src/styles/inner-corner/card.ts"],"mappings":";;;;qBASa;;;;;;qBAUA;;;;;qBAMA;;;;qBAgBA;;;;;qBASA;;;;;qBAMA;;;;;qBASA"}
+{"version":3,"file":"card.d.ts","names":[],"sources":["../../../src/styles/inner-corner/card.ts"],"mappings":";;;;;;;;;qBAca;;;;;;qBAUA;;;;;qBAMA;;;;qBAgBA;;;;;qBASA;;;;;qBAMA;;;;;qBASA;;;;;;;;qBAYA"}

package/styles/inner-corner/card.js

@@ -2,9 +2,14 @@ import { cn } from "../cn.js";
 import { publishShellBoundary } from "../corner-radius.js";
 //#region src/styles/inner-corner/card.ts
 /**
-* The Card root: `rounded-lg` behind a 1px border.
+* The Card root: `rounded-lg` behind a 1px border. It hands every direct child the corner a
+* stacked section rounds with, its own less the border, as the private `--card-section-corner`,
+* as Frame does with `--frame-corner`. It keys on no slot, because a `Card.SectionButton` a
+* trigger renders carries the trigger's `data-slot`. Every section resets the property, and the
+* root's child rule comes later in the sheet at the same specificity, so only a card's direct
+* section holds a value and one nested deeper is square.
 */
-const cardShellClass = cn("rounded-lg border [--shell-inner:max(0px,--theme(--radius-lg)-1px)]", publishShellBoundary);
+const cardShellClass = cn("rounded-lg border [--shell-inner:max(0px,--theme(--radius-lg)-1px)] *:[--card-section-corner:max(0px,--theme(--radius-lg)-1px)]", publishShellBoundary);
 /**
 * A default Card's tier, published on the root as the private `--card-pad`: the medium surface
 * tier, `--surface-pad-md`, which Items and Accordion items pad with too, so a card's text starts
@@ -42,7 +47,15 @@ const textFieldCardShellClass = cn("px-[var(--card-pad,var(--surface-pad-md))] p
 * block axis.
 */
 const checkboxCardContentShellClass = cn("px-[var(--card-pad,var(--surface-pad-md))] py-3", cardTierBoundaryClass);
+/**
+* A stacked `Card.Section` or `Card.SectionButton`: it pads every side with the card's tier,
+* `--card-pad`, and publishes the same inner corner as the other sections. A 1px
+* `--card-section-divider` line runs above every section but the first. The first and last sections round their outer corners with the corner the
+* card hands them, so a fill or a hover fill follows the card's corners. Both skip `hidden`
+* siblings, and middle sections stay square. Outside a card the section is square.
+*/
+const cardStackedSectionShellClass = cn("border-0 border-t border-card-section-divider p-[var(--card-pad,var(--surface-pad-md))] [--card-section-corner:initial] [&:nth-child(1_of_:not([hidden]))]:rounded-t-[var(--card-section-corner,0px)] [&:nth-child(1_of_:not([hidden]))]:border-t-0 [&:nth-last-child(1_of_:not([hidden]))]:rounded-b-[var(--card-section-corner,0px)]", "[&[hidden]:not([hidden=until-found])]:hidden", cardTierBoundaryClass);
 //#endregion
-export { cardDefaultTierClass, cardHorizontalShellClass, cardLargeTierClass, cardSectionShellClass, cardShellClass, checkboxCardContentShellClass, textFieldCardShellClass };
+export { cardDefaultTierClass, cardHorizontalShellClass, cardLargeTierClass, cardSectionShellClass, cardShellClass, cardStackedSectionShellClass, checkboxCardContentShellClass, textFieldCardShellClass };
 
 //# sourceMappingURL=card.js.map

package/styles/inner-corner/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","names":[],"sources":["../../../src/styles/inner-corner/card.ts"],"sourcesContent":["import { cn } from \"../cn\";\nimport { publishShellBoundary } from \"../corner-radius\";\n\n// The inner-corner shells of Card and the parts built on it. The rules every shell follows are in\n// `corner-radius.ts`. Each constant pairs a part's rung or padding with the corner it publishes.\n\n/**\n * The Card root: `rounded-lg` behind a 1px border.\n */\nexport const cardShellClass = cn(\n  \"rounded-lg border [--shell-inner:max(0px,--theme(--radius-lg)-1px)]\",\n  publishShellBoundary\n);\n\n/**\n * A default Card's tier, published on the root as the private `--card-pad`: the medium surface\n * tier, `--surface-pad-md`, which Items and Accordion items pad with too, so a card's text starts\n * on their edge. Every root sets it, so a nested card resets it.\n */\nexport const cardDefaultTierClass = cn(\"[--card-pad:var(--surface-pad-md)]\");\n\n/**\n * A large Card's tier: the large surface tier, `--surface-pad-lg`, for a card that holds long\n * prose or acts as a page's main panel.\n */\nexport const cardLargeTierClass = cn(\"[--card-pad:var(--surface-pad-lg)]\");\n\n/**\n * The boundary every padded part inside a Card's border publishes: the card's `rounded-lg` less\n * its 1px border and the card's tier, `--card-pad`, its inline padding. Each padded part falls\n * back to the default tier outside a card root, so a section recipe used on its own pads as one\n * inside a default card.\n */\nconst cardTierBoundaryClass = cn(\n  \"[--shell-inner:max(0px,--theme(--radius-lg)-1px-var(--card-pad,var(--surface-pad-md)))]\",\n  publishShellBoundary\n);\n\n/**\n * A horizontal Card root, which pads its sections itself with the card's tier, `--card-pad`.\n */\nexport const cardHorizontalShellClass = cn(\n  \"p-[var(--card-pad,var(--surface-pad-md))]\",\n  cardTierBoundaryClass\n);\n\n/**\n * A vertical Card's header, content or footer, which pads with the card's tier, `--card-pad`,\n * inside the card.\n */\nexport const cardSectionShellClass = cn(\"p-[var(--card-pad,var(--surface-pad-md))]\", cardTierBoundaryClass);\n\n/**\n * The TextField `card` box: a default Card root that pads inline with its tier and 16px on the\n * block axis.\n */\nexport const textFieldCardShellClass = cn(\n  \"px-[var(--card-pad,var(--surface-pad-md))] py-4\",\n  cardTierBoundaryClass\n);\n\n/**\n * The CheckboxCard content: a default Card's section that pads inline with its tier and 12px on the\n * block axis.\n */\nexport const checkboxCardContentShellClass = cn(\n  \"px-[var(--card-pad,var(--surface-pad-md))] py-3\",\n  cardTierBoundaryClass\n);\n"],"mappings":";;;;;;AASA,MAAa,iBAAiB,GAC5B,uEACA,oBACF;;;;;;AAOA,MAAa,uBAAuB,GAAG,oCAAoC;;;;;AAM3E,MAAa,qBAAqB,GAAG,oCAAoC;;;;;;;AAQzE,MAAM,wBAAwB,GAC5B,2FACA,oBACF;;;;AAKA,MAAa,2BAA2B,GACtC,6CACA,qBACF;;;;;AAMA,MAAa,wBAAwB,GAAG,6CAA6C,qBAAqB;;;;;AAM1G,MAAa,0BAA0B,GACrC,mDACA,qBACF;;;;;AAMA,MAAa,gCAAgC,GAC3C,mDACA,qBACF"}
+{"version":3,"file":"card.js","names":[],"sources":["../../../src/styles/inner-corner/card.ts"],"sourcesContent":["import { cn } from \"../cn\";\nimport { publishShellBoundary } from \"../corner-radius\";\n\n// The inner-corner shells of Card and the parts built on it. The rules every shell follows are in\n// `corner-radius.ts`. Each constant pairs a part's rung or padding with the corner it publishes.\n\n/**\n * The Card root: `rounded-lg` behind a 1px border. It hands every direct child the corner a\n * stacked section rounds with, its own less the border, as the private `--card-section-corner`,\n * as Frame does with `--frame-corner`. It keys on no slot, because a `Card.SectionButton` a\n * trigger renders carries the trigger's `data-slot`. Every section resets the property, and the\n * root's child rule comes later in the sheet at the same specificity, so only a card's direct\n * section holds a value and one nested deeper is square.\n */\nexport const cardShellClass = cn(\n  \"rounded-lg border [--shell-inner:max(0px,--theme(--radius-lg)-1px)] *:[--card-section-corner:max(0px,--theme(--radius-lg)-1px)]\",\n  publishShellBoundary\n);\n\n/**\n * A default Card's tier, published on the root as the private `--card-pad`: the medium surface\n * tier, `--surface-pad-md`, which Items and Accordion items pad with too, so a card's text starts\n * on their edge. Every root sets it, so a nested card resets it.\n */\nexport const cardDefaultTierClass = cn(\"[--card-pad:var(--surface-pad-md)]\");\n\n/**\n * A large Card's tier: the large surface tier, `--surface-pad-lg`, for a card that holds long\n * prose or acts as a page's main panel.\n */\nexport const cardLargeTierClass = cn(\"[--card-pad:var(--surface-pad-lg)]\");\n\n/**\n * The boundary every padded part inside a Card's border publishes: the card's `rounded-lg` less\n * its 1px border and the card's tier, `--card-pad`, its inline padding. Each padded part falls\n * back to the default tier outside a card root, so a section recipe used on its own pads as one\n * inside a default card.\n */\nconst cardTierBoundaryClass = cn(\n  \"[--shell-inner:max(0px,--theme(--radius-lg)-1px-var(--card-pad,var(--surface-pad-md)))]\",\n  publishShellBoundary\n);\n\n/**\n * A horizontal Card root, which pads its sections itself with the card's tier, `--card-pad`.\n */\nexport const cardHorizontalShellClass = cn(\n  \"p-[var(--card-pad,var(--surface-pad-md))]\",\n  cardTierBoundaryClass\n);\n\n/**\n * A vertical Card's header, content or footer, which pads with the card's tier, `--card-pad`,\n * inside the card.\n */\nexport const cardSectionShellClass = cn(\"p-[var(--card-pad,var(--surface-pad-md))]\", cardTierBoundaryClass);\n\n/**\n * The TextField `card` box: a default Card root that pads inline with its tier and 16px on the\n * block axis.\n */\nexport const textFieldCardShellClass = cn(\n  \"px-[var(--card-pad,var(--surface-pad-md))] py-4\",\n  cardTierBoundaryClass\n);\n\n/**\n * The CheckboxCard content: a default Card's section that pads inline with its tier and 12px on the\n * block axis.\n */\nexport const checkboxCardContentShellClass = cn(\n  \"px-[var(--card-pad,var(--surface-pad-md))] py-3\",\n  cardTierBoundaryClass\n);\n\n/**\n * A stacked `Card.Section` or `Card.SectionButton`: it pads every side with the card's tier,\n * `--card-pad`, and publishes the same inner corner as the other sections. A 1px\n * `--card-section-divider` line runs above every section but the first. The first and last sections round their outer corners with the corner the\n * card hands them, so a fill or a hover fill follows the card's corners. Both skip `hidden`\n * siblings, and middle sections stay square. Outside a card the section is square.\n */\nexport const cardStackedSectionShellClass = cn(\n  \"border-0 border-t border-card-section-divider p-[var(--card-pad,var(--surface-pad-md))] [--card-section-corner:initial] [&:nth-child(1_of_:not([hidden]))]:rounded-t-[var(--card-section-corner,0px)] [&:nth-child(1_of_:not([hidden]))]:border-t-0 [&:nth-last-child(1_of_:not([hidden]))]:rounded-b-[var(--card-section-corner,0px)]\",\n  // Without preflight a section's own `block` or `grid` beats the user-agent `[hidden]` rule.\n  \"[&[hidden]:not([hidden=until-found])]:hidden\",\n  cardTierBoundaryClass\n);\n"],"mappings":";;;;;;;;;;;AAcA,MAAa,iBAAiB,GAC5B,mIACA,oBACF;;;;;;AAOA,MAAa,uBAAuB,GAAG,oCAAoC;;;;;AAM3E,MAAa,qBAAqB,GAAG,oCAAoC;;;;;;;AAQzE,MAAM,wBAAwB,GAC5B,2FACA,oBACF;;;;AAKA,MAAa,2BAA2B,GACtC,6CACA,qBACF;;;;;AAMA,MAAa,wBAAwB,GAAG,6CAA6C,qBAAqB;;;;;AAM1G,MAAa,0BAA0B,GACrC,mDACA,qBACF;;;;;AAMA,MAAa,gCAAgC,GAC3C,mDACA,qBACF;;;;;;;;AASA,MAAa,+BAA+B,GAC1C,0UAEA,gDACA,qBACF"}

package/styles.css

@@ -964,6 +964,9 @@
 .grid-cols-\[minmax\(0\,1fr\)_auto\] {
   grid-template-columns: minmax(0,1fr) auto;
 }
+.grid-cols-\[minmax\(0\,1fr\)_fit-content\(60\%\)\] {
+  grid-template-columns: minmax(0,1fr) fit-content(60%);
+}
 .grid-cols-subgrid {
   grid-template-columns: subgrid;
 }
@@ -1081,6 +1084,9 @@
   margin-block-start: calc(calc(0.25rem * 4) * var(--tw-space-y-reverse));
   margin-block-end: calc(calc(0.25rem * 4) * calc(1 - var(--tw-space-y-reverse)));
 }
+.gap-x-\(--surface-gap-md\) {
+  column-gap: var(--surface-gap-md);
+}
 .gap-x-1\.5 {
   column-gap: calc(0.25rem * 1.5);
 }
@@ -1101,6 +1107,9 @@
   margin-inline-start: calc(calc(0.25rem * -2) * var(--tw-space-x-reverse));
   margin-inline-end: calc(calc(0.25rem * -2) * calc(1 - var(--tw-space-x-reverse)));
 }
+.gap-y-\(--surface-gap-sm\) {
+  row-gap: var(--surface-gap-sm);
+}
 .gap-y-1 {
   row-gap: 0.25rem;
 }
@@ -1258,6 +1267,9 @@
 .border-card-border {
   border-color: var(--card-border, var(--border));
 }
+.border-card-section-divider {
+  border-color: var(--card-section-divider, var(--border));
+}
 .border-error {
   border-color: var(--error);
 }
@@ -1899,6 +1911,12 @@
 .whitespace-nowrap {
   white-space: nowrap;
 }
+.text-\[color\:var\(--description-list-details\,var\(--foreground\)\)\] {
+  color: var(--description-list-details,var(--foreground));
+}
+.text-\[color\:var\(--description-list-term\,var\(--muted-foreground\)\)\] {
+  color: var(--description-list-term,var(--muted-foreground));
+}
 .text-\[var\(--toast-copy\,var\(--muted-foreground\)\)\] {
   color: var(--toast-copy,var(--muted-foreground));
 }
@@ -2364,6 +2382,9 @@
 .\[--card-pad\:var\(--surface-pad-md\)\] {
   --card-pad: var(--surface-pad-md);
 }
+.\[--card-section-corner\:initial\] {
+  --card-section-corner: initial;
+}
 .\[--checkbox-color\:var\(--border\)\] {
   --checkbox-color: var(--border);
 }
@@ -2376,6 +2397,18 @@
 .\[--checkbox-color\:var\(--primary\)\] {
   --checkbox-color: var(--primary);
 }
+.\[--description-list-details\:currentColor\] {
+  --description-list-details: currentColor;
+}
+.\[--description-list-details\:initial\] {
+  --description-list-details: initial;
+}
+.\[--description-list-term\:currentColor\] {
+  --description-list-term: currentColor;
+}
+.\[--description-list-term\:initial\] {
+  --description-list-term: initial;
+}
 .\[--field-corner\:clamp\(var\(--radius\)-1000\*var\(--radius-step\,0px\)\,var\(--radius-field\,var\(--radius\)\)\,var\(--radius\)\+1000\*var\(--radius-step\,0px\)\)\] {
   --field-corner: clamp(var(--radius) - 1000 * var(--radius-step,0px), var(--radius-field,var(--radius)), var(--radius) + 1000 * var(--radius-step,0px));
 }
@@ -2616,6 +2649,9 @@
   font-size: var(--text-xs);
   line-height: var(--tw-leading, var(--text-xs--line-height));
 }
+:is(.\*\:\[--card-section-corner\:max\(0px\,--theme\(--radius-lg\)-1px\)\] > *) {
+  --card-section-corner: max(0px, var(--radius) - 1px);
+}
 :is(.\*\*\:text-2xl *) {
   font-size: var(--text-2xl);
   line-height: var(--tw-leading, var(--text-2xl--line-height));
@@ -3318,6 +3354,9 @@
   --tw-outline-style: none;
   outline-style: none;
 }
+.focus-visible\:ring-inset:is(:where([data-rac])[data-focus-visible], :where(:not([data-rac])):focus-visible) {
+  --tw-ring-inset: inset;
+}
 :is(.\*\:focus-visible\:relative > *):is(:where([data-rac])[data-focus-visible], :where(:not([data-rac])):focus-visible) {
   position: relative;
 }
@@ -3625,6 +3664,18 @@
 .has-\[\>\[data-slot\=button-group\]\]\:gap-2:has( > [data-slot=button-group]) {
   gap: calc(0.25rem * 2);
 }
+.has-\[\>\[data-slot\=card-section-media\]\]\:grid:has( > [data-slot=card-section-media]) {
+  display: grid;
+}
+.has-\[\>\[data-slot\=card-section-media\]\]\:grid-cols-\[auto_minmax\(0\,1fr\)\]:has( > [data-slot=card-section-media]) {
+  grid-template-columns: auto minmax(0,1fr);
+}
+.has-\[\>\[data-slot\=card-section-media\]\]\:items-center:has( > [data-slot=card-section-media]) {
+  align-items: center;
+}
+.has-\[\>\[data-slot\=card-section-media\]\]\:gap-x-\(--surface-gap-md\):has( > [data-slot=card-section-media]) {
+  column-gap: var(--surface-gap-md);
+}
 .has-\[\>\[data-slot\=checkbox-group\]\]\:gap-\(--surface-gap-md\):has( > [data-slot=checkbox-group]) {
   gap: var(--surface-gap-md);
 }
@@ -5034,6 +5085,9 @@
   border-style: var(--tw-border-style);
   border-width: 0px;
 }
+.\[\&\+\&\]\:mt-\(--surface-gap-lg\) + .\[\&\+\&\]\:mt-\(--surface-gap-lg\) {
+  margin-top: var(--surface-gap-lg);
+}
 .\[\&\+\[data-slot\=item-content\]\]\:flex-none + [data-slot=item-content] {
   flex: none;
 }
@@ -5155,6 +5209,18 @@
     background-color: color-mix(in oklab, var(--muted) 72%, transparent);
   }
 }
+.\[\&\:nth-child\(1_of_\:not\(\[hidden\]\)\)\]\:rounded-t-\[var\(--card-section-corner\,0px\)\]:nth-child(1 of :not([hidden])) {
+  border-top-left-radius: var(--card-section-corner,0px);
+  border-top-right-radius: var(--card-section-corner,0px);
+}
+.\[\&\:nth-child\(1_of_\:not\(\[hidden\]\)\)\]\:border-t-0:nth-child(1 of :not([hidden])) {
+  border-top-style: var(--tw-border-style);
+  border-top-width: 0px;
+}
+.\[\&\:nth-last-child\(1_of_\:not\(\[hidden\]\)\)\]\:rounded-b-\[var\(--card-section-corner\,0px\)\]:nth-last-child(1 of :not([hidden])) {
+  border-bottom-right-radius: var(--card-section-corner,0px);
+  border-bottom-left-radius: var(--card-section-corner,0px);
+}
 .\[\&\>\.sr-only\]\:w-auto > .sr-only {
   width: auto;
 }
@@ -5316,6 +5382,9 @@
 .\[\&\[data-ending-style\]\:not\(\[data-limited\]\)\:not\(\[data-swipe-direction\]\)\]\:\[transform\:translateY\(calc\(var\(--side\)\*150\%\)\)\][data-ending-style]:not([data-limited]):not([data-swipe-direction]) {
   transform: translateY(calc(var(--side) * 150%));
 }
+.\[\&\[hidden\]\:not\(\[hidden\=until-found\]\)\]\:hidden[hidden]:not([hidden=until-found]) {
+  display: none;
+}
 .\[\&\[readonly\]\:not\(\:disabled\)\]\:bg-muted[readonly]:not(:disabled) {
   background-color: var(--muted);
 }
@@ -5365,6 +5434,31 @@
 :where(.\[\:where\(\&\>\*\)\]\:ring-background > *) {
   --tw-ring-color: var(--background);
 }
+:where([data-layout=inline]) > .\[\:where\(\[data-layout\=inline\]\)\>\&\]\:col-start-2 {
+  grid-column-start: 2;
+}
+:where([data-layout=inline]) > .\[\:where\(\[data-layout\=inline\]\)\>\&\]\:min-w-0 {
+  min-width: 0px;
+}
+:where([data-layout=inline]) > .\[\:where\(\[data-layout\=inline\]\)\>\&\]\:border-none {
+  --tw-border-style: none;
+  border-style: none;
+}
+:where([data-layout=inline]) > .\[\:where\(\[data-layout\=inline\]\)\>\&\]\:p-0 {
+  padding: 0px;
+}
+:where([data-layout=inline]) > .\[\:where\(\[data-layout\=inline\]\)\>\&\]\:py-0 {
+  padding-block: 0px;
+}
+:where([data-layout=inline]) > .\[\:where\(\[data-layout\=inline\]\)\>\&\]\:text-end {
+  text-align: end;
+}
+:where([data-layout=inline]) > .\[\:where\(\[data-layout\=inline\]\)\>\&\]\:wrap-anywhere {
+  overflow-wrap: anywhere;
+}
+:where([data-slot=card-section]) > .\[\:where\(\[data-slot\=card-section\]\)\>\&\]\:p-0 {
+  padding: 0px;
+}
 [data-placement] > .\[\[data-placement\]\>\&\]\:p-0 {
   padding: 0px;
 }

package/themes.css

@@ -80,6 +80,7 @@
   --input: oklch(0.9219 0 0);
   --ring: oklch(0.6 0 0);
   --card-border: var(--border);
+  --card-section-divider: var(--border);
   --button-outline: var(--border);
   --selection-border: var(--border);
   --selection-checked-border: var(--primary);
@@ -201,6 +202,7 @@
   --input: oklch(0.9219 0 0);
   --ring: oklch(0.6 0 0);
   --card-border: var(--border);
+  --card-section-divider: var(--border);
   --button-outline: var(--border);
   --selection-border: var(--border);
   --selection-checked-border: var(--primary);
@@ -247,6 +249,7 @@
   --input: oklch(0.9232 0.0026 48.72);
   --ring: oklch(0.6 0 0);
   --card-border: oklch(0 0 0 / 0);
+  --card-section-divider: var(--background);
   --button-outline: var(--foreground);
   --selection-border: oklch(0 0 0 / 0);
   --selection-checked-border: var(--selection-border);
@@ -313,6 +316,7 @@
   --input: oklch(0.929 0.0126 255.53);
   --ring: oklch(0.6 0 0);
   --card-border: oklch(0 0 0 / 0);
+  --card-section-divider: var(--background);
   --button-outline: var(--foreground);
   --selection-border: oklch(0 0 0 / 0);
   --selection-checked-border: var(--selection-border);
@@ -359,6 +363,7 @@
   --input: oklch(0.929 0.0126 255.53);
   --ring: oklch(0.6 0 0);
   --card-border: oklch(0 0 0 / 0);
+  --card-section-divider: var(--background);
   --button-outline: var(--foreground);
   --selection-border: oklch(0 0 0 / 0);
   --selection-checked-border: var(--selection-border);
@@ -405,6 +410,7 @@
   --input: oklch(0.9232 0.0026 48.72);
   --ring: oklch(0.6 0 0);
   --card-border: oklch(0 0 0 / 0);
+  --card-section-divider: var(--background);
   --button-outline: var(--foreground);
   --selection-border: oklch(0 0 0 / 0);
   --selection-checked-border: var(--selection-border);
@@ -451,6 +457,7 @@
   --input: oklch(0.9232 0.0026 48.72);
   --ring: oklch(0.6 0 0);
   --card-border: oklch(0 0 0 / 0);
+  --card-section-divider: var(--background);
   --button-outline: var(--foreground);
   --selection-border: oklch(0 0 0 / 0);
   --selection-checked-border: var(--selection-border);
@@ -497,6 +504,7 @@
   --input: oklch(0.9219 0 0);
   --ring: oklch(0.6 0 0);
   --card-border: oklch(0 0 0 / 0);
+  --card-section-divider: var(--background);
   --button-outline: var(--foreground);
   --selection-border: oklch(0 0 0 / 0);
   --selection-checked-border: var(--selection-border);
@@ -543,6 +551,7 @@
   --input: oklch(0.8256644 0.0145962 162.3965393);
   --ring: oklch(0.6 0 0);
   --card-border: oklch(0 0 0 / 0);
+  --card-section-divider: var(--background);
   --button-outline: var(--foreground);
   --selection-border: oklch(0 0 0 / 0);
   --selection-checked-border: var(--selection-border);
@@ -612,6 +621,7 @@
   --input: oklch(1 0 0 / 40%);
   --ring: oklch(0.6 0 0);
   --card-border: var(--border);
+  --card-section-divider: var(--border);
   --button-outline: var(--border);
   --selection-border: var(--border);
   --selection-checked-border: var(--primary);
@@ -747,6 +757,7 @@
   --input: oklch(0.6543689 0.0037291 145.5328);
   --ring: oklch(0.6 0 0);
   --card-border: oklch(0 0 0 / 0);
+  --card-section-divider: var(--background);
   --button-outline: var(--foreground);
   --selection-border: oklch(0 0 0 / 0);
   --selection-checked-border: var(--selection-border);
@@ -846,6 +857,7 @@
   --input: oklch(0.6543689 0.0037291 145.5328);
   --ring: oklch(0.6 0 0);
   --card-border: oklch(0 0 0 / 0);
+  --card-section-divider: var(--background);
   --button-outline: var(--foreground);
   --selection-border: oklch(0 0 0 / 0);
   --selection-checked-border: var(--selection-border);
@@ -945,6 +957,7 @@
   --input: oklch(0.6543689 0.0037291 145.5328);
   --ring: oklch(0.6 0 0);
   --card-border: oklch(0 0 0 / 0);
+  --card-section-divider: var(--background);
   --button-outline: var(--foreground);
   --selection-border: oklch(0 0 0 / 0);
   --selection-checked-border: var(--selection-border);
@@ -1044,6 +1057,7 @@
   --input: oklch(0.6543689 0.0037291 145.5328);
   --ring: oklch(0.6 0 0);
   --card-border: oklch(0 0 0 / 0);
+  --card-section-divider: var(--background);
   --button-outline: var(--foreground);
   --selection-border: oklch(0 0 0 / 0);
   --selection-checked-border: var(--selection-border);
@@ -1143,6 +1157,7 @@
   --input: oklch(0.6543689 0.0037291 145.5328);
   --ring: oklch(0.6 0 0);
   --card-border: oklch(0 0 0 / 0);
+  --card-section-divider: var(--background);
   --button-outline: var(--foreground);
   --selection-border: oklch(0 0 0 / 0);
   --selection-checked-border: var(--selection-border);
@@ -1242,6 +1257,7 @@
   --input: oklch(0.6543689 0.0037291 145.5328);
   --ring: oklch(0.6 0 0);
   --card-border: oklch(0 0 0 / 0);
+  --card-section-divider: var(--background);
   --button-outline: var(--foreground);
   --selection-border: oklch(0 0 0 / 0);
   --selection-checked-border: var(--selection-border);
@@ -1341,6 +1357,7 @@
   --input: oklch(0.6543689 0.0037291 145.5328);
   --ring: oklch(0.6 0 0);
   --card-border: oklch(0 0 0 / 0);
+  --card-section-divider: var(--background);
   --button-outline: var(--foreground);
   --selection-border: oklch(0 0 0 / 0);
   --selection-checked-border: var(--selection-border);
@@ -1440,6 +1457,7 @@
   --input: oklch(0.6543689 0.0037291 145.5328);
   --ring: oklch(0.6 0 0);
   --card-border: oklch(0 0 0 / 0);
+  --card-section-divider: var(--background);
   --button-outline: var(--foreground);
   --selection-border: oklch(0 0 0 / 0);
   --selection-checked-border: var(--selection-border);