@elmeragroup/fuse 0.1.0-canary.13 → 0.1.0-canary.130

package/README.md

@@ -1,6 +1,6 @@
 # Fuse
 
-`@elmeragroup/fuse` is the Elmera Group component library: whitelabel React components for the energy brands and corporate Elmera. One package, 20 theme permutations, ESM-only.
+`@elmeragroup/fuse` is the Elmera Group component library: whitelabel React components for the energy brands and corporate Elmera. One package, 24 theme permutations, ESM-only.
 
 ## Tailwind v4
 
@@ -20,9 +20,10 @@ Adjust the `@source` path only when the stylesheet is not one directory below th
 `@elmeragroup/fuse/css` is not only the components' variants and control metrics. Importing it into a Tailwind build also changes these parts of the host theme, whether or not `themes.css` is imported:
 
 - **Role and primitive colours.** Its `@theme inline` block maps every role token (`--color-primary` → `var(--primary)` and so on) and remaps Tailwind's `neutral-50` to `neutral-950` palette onto `--neutral-*`. `themes.css` defines those; without it, `bg-neutral-200` and the other stock neutral utilities resolve to an undefined colour until you define `--neutral-*` yourself.
-- **Radius scale.** `rounded-xs` to `rounded-xl` become whole `--radius-step` multiples from `--radius` instead of Tailwind's fixed rems. The step falls back to `0px`, so with your own `--radius` and no `themes.css` every rung is that one radius; `--radius` itself has no fallback. Button rounds with `--radius-button`, which `themes.css` sets per theme; define it (`--radius-button: var(--radius)`) when you skip `themes.css`.
+- **Radius scale.** `rounded-xs` to `rounded-xl` become whole `--radius-step` multiples from `--radius` instead of Tailwind's fixed rems. The step falls back to `0px`, so with your own `--radius` and no `themes.css` every rung is that one radius; `--radius` itself has no fallback. Button rounds with `--radius-button`, which `themes.css` sets per theme; define it (`--radius-button: var(--radius)`) when you skip `themes.css`. Field boxes round with `--radius` until `--radius-step` is `2px`, and then with `--radius-field`, which `themes.css` aliases to `var(--radius)` on each theme element.
 - **State variants.** It declares `data-open`, `data-closed`, `data-checked`, `data-unchecked`, `data-selected`, `data-disabled`, `data-active`, `data-horizontal` and `data-vertical` as static variants, wrapped in `:where()`. They replace Tailwind's functional `data-*` variants of the same name in your own classes too: their specificity drops to one class, so a plain `hover:` rule beats a `data-selected:` rule, `data-open:` and the like also match Radix-style `data-state` values, and `data-selected:` matches only `data-selected="true"`. Other `data-*` names are untouched.
-- **Also:** `enabled-hover:`, `enabled-active:`, `disabled-state:`, `hit-area-*`, `no-scrollbar`, the `rounded-button`, `font-sans`, `font-heading` and `font-mono` utilities, the `xs`, `lg` and `3xl` breakpoints, `--spacing: 0.25rem`, the `overshoot` easing, `tw-animate-css`, the React Aria Tailwind plugin, and a reduced-motion rule that switches off transform and layout transitions document-wide.
+- **Border colour.** A base-layer rule gives every element, host markup included, `border-color: var(--border, currentcolor)`, so a bare `border` draws in the border role instead of the text colour. Native form widgets (`button`, `input`, `select`, `textarea`, `progress`, `meter`) outside Fuse parts are skipped and keep their own border colour and native look; with preflight, a bare `border` on them stays `currentcolor`, so add `border-border` where you want the role. Any border colour utility still wins, and a host base rule like `* { @apply border-border; }` can go unless it colours those widgets. Import `fuse/css` after `tailwindcss`; a preflight-free build that imports Tailwind's sheets into layers declares `@layer theme, base, components, utilities;` before them.
+- **Also:** `enabled-hover:`, `enabled-active:`, `disabled-state:`, `hit-area-*`, `no-scrollbar`, the `rounded-button`, `rounded-inner`, `font-sans`, `font-heading` and `font-mono` utilities, the `xs`, `lg` and `3xl` breakpoints, `--spacing: 0.25rem`, the `overshoot` easing, `tw-animate-css`, the React Aria Tailwind plugin, and a reduced-motion rule that switches off transform and layout transitions document-wide.
 
 ### Keeping your own tokens
 
@@ -48,6 +49,115 @@ A host that migrates one component at a time can keep its own design tokens and
 
 Import `fuse/css` before your own `@theme` so your values win where both define one. Each component page in the docs lists the tokens that component reads under "Tokens consumed"; map those, and add the next component's list when you adopt it. Role tokens are whole colours (`oklch()`, `hsl()`, hex), not channel triplets.
 
+Button's `outline` variant reads `--button-outline` and `--button-outline-width`. Without them it draws a 1px hairline in your `--border`, as internal themes do. For the external themes' outline, a 2px ring in the text colour with no shadow, set both:
+
+```css
+:root {
+  --button-outline: var(--foreground);
+  --button-outline-width: 2px;
+}
+```
+
+A `Card` and a `card` Accordion item draw their edge in `--card-border`, and a `Card` casts its small shadow in `--card-shadow`. Without them they take your `--border` and Tailwind's 5% black shadow, as internal themes do, and `CheckboxCard` and the TextField `card` box always do. For the external themes' look, where a card stands on the page by its fill alone, set both to a transparent colour. The border keeps its 1px width, so the layout does not move, but a card on a `--card`-coloured surface, such as a nested `Card`, has no outline:
+
+```css
+:root {
+  --card-border: oklch(0 0 0 / 0);
+  --card-shadow: oklch(0 0 0 / 0);
+}
+```
+
+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
+:root {
+  --selection-border: oklch(0 0 0 / 0);
+  --selection-checked-border: var(--selection-border);
+  --selection-divider: var(--border);
+  --selection-checked-divider: var(--selection-divider);
+}
+```
+
+A disabled `RadioItem` or `CheckboxItem` row, disabled itself or through its group, fills with `--selection-disabled-background` under a 45° hatch striped in `--selection-disabled-hatch`, its title and other label row text take `--selection-disabled-foreground`, and its control dims to 50%. Without them the row takes your `--muted` under black stripes at 2% alpha with `--foreground` text, as internal themes do. For the external themes' look, where a disabled row keeps the card fill of an enabled row, draws no stripes and greys its title, set:
+
+```css
+:root {
+  --selection-disabled-background: var(--card);
+  --selection-disabled-hatch: oklch(0 0 0 / 0);
+  --selection-disabled-foreground: var(--muted-foreground);
+}
+```
+
+The checked row's tint and the disabled fill win over a background class on the row, such as `bg-background` for a list that shows its surface through. For such a list, set the disabled fill to that surface too:
+
+```css
+.plan-list {
+  --selection-disabled-background: var(--background);
+}
+```
+
+`RadioItem` and `CheckboxItem` row titles read `--selection-title-weight`. Without it they are 400, as internal themes set them. For the external themes' medium title, which matches the group legend and `CheckboxCard` titles, set:
+
+```css
+:root {
+  --selection-title-weight: 500;
+}
+```
+
+A `Text` at `sm`, the default size and `lg` reads its line height from `--paragraph-leading-sm`, `--paragraph-leading-base` and `--paragraph-leading-lg`. Without them it keeps the relaxed 1.625 ratio, as internal themes do. For the external themes' paragraph styles, 14/20, 16/22 and 18/24, set:
+
+```css
+:root {
+  --paragraph-leading-sm: 1.25rem;
+  --paragraph-leading-base: 1.375rem;
+  --paragraph-leading-lg: 1.5rem;
+}
+```
+
+A `leading` prop or a `className` leading on the Text replaces the role. `Span` keeps its own snug default.
+
+A `Heading` at level 1, 2 or 3 reads its size and line height from `--heading-<level>-size` and `--heading-<level>-leading` when it has no `size` prop, and its weight from `--heading-<level>-weight` when it has no `font` prop. Without them h1 is 24/33, h2 18/24.75 and h3 16/22, all at 500, as in internal themes. For the external themes' heading styles, a bold 24/32 h1 and 20/32 h2 and h3, set:
+
+```css
+:root {
+  --heading-1-size: 1.5rem;
+  --heading-1-leading: 2rem;
+  --heading-1-weight: 700;
+  --heading-2-size: 1.25rem;
+  --heading-2-leading: 2rem;
+  --heading-2-weight: 700;
+  --heading-3-size: 1.25rem;
+  --heading-3-leading: 2rem;
+  --heading-3-weight: 700;
+}
+```
+
+h4 to h6 have no roles and stay 16/22 at 500. A `size` or `font` prop, or a `className` size or weight, replaces the roles. `headingVariants()` on its own knows no level and keeps the plain scale.
+
+`Dialog.Content`, `AlertDialog.Content` and `Sheet.Content` fill with `--dialog` and take `--dialog-foreground` as their text colour. Without them a modal takes your `--popover` and `--popover-foreground`, as internal themes and every dark theme do. For the external light look, where a modal fills with the page tint so the card-coloured fields and selection rows inside it stand apart as they do on the page, set the pair in your light rules and point it back at the popover pair in your dark ones, as the themes do:
+
+```css
+:root {
+  --dialog: var(--background);
+  --dialog-foreground: var(--foreground);
+}
+
+.dark /* your dark-scheme selector */ {
+  --dialog: var(--popover);
+  --dialog-foreground: var(--popover-foreground);
+}
+```
+
+Field boxes round with your `--radius`, as cards and the themes' fields do. For the external look, set the external step. It spreads the `rounded-*` scale in 2px steps around `--radius` and gives the calendar its external 4px corner. Fields then round with `--radius-field` where you set one, and with your `--radius` otherwise, so set it only for a field corner of your own:
+
+```css
+:root {
+  --radius-step: 2px;
+}
+```
+
 ## Non-Tailwind
 
 ```css
@@ -55,7 +165,7 @@ Import `fuse/css` before your own `@theme` so your values win where both define
 @import "@elmeragroup/fuse/themes.css";
 ```
 
-The standalone stylesheet includes library utilities without Tailwind preflight.
+The standalone stylesheet includes library utilities without Tailwind preflight, plus the base-layer border-colour default described above, which leaves host native form widgets and their native look untouched.
 Keep your app's reset and import `themes.css` in either mode.
 
 ## JavaScript

package/alert-dialog.js

@@ -1,2 +1 @@
-import { AlertDialog } from "./components/alert-dialog/index.js";
-export { AlertDialog };
+export { AlertDialog } from "./components/alert-dialog/index.js";

package/alert.js

@@ -1,2 +1 @@
-import { Alert } from "./components/alert/alert.js";
-export { Alert };
+export { Alert } from "./components/alert/alert.js";

package/aspect-ratio.d.ts

@@ -0,0 +1,2 @@
+import { AspectRatio, AspectRatioProps, AspectRatioValue } from "./components/aspect-ratio/aspect-ratio.js";
+export { AspectRatio, type AspectRatioProps, type AspectRatioValue };

package/aspect-ratio.js

@@ -0,0 +1 @@
+export { AspectRatio } from "./components/aspect-ratio/aspect-ratio.js";

package/attachment.d.ts

@@ -0,0 +1,6 @@
+import { AttachmentGroupProps, AttachmentOrientation, AttachmentRootProps, AttachmentState } from "./components/attachment/attachment.js";
+import { AttachmentActionProps } from "./components/attachment/attachment-action.js";
+import { AttachmentAspectRatioProps, AttachmentMediaProps } from "./components/attachment/attachment-markup.js";
+import { AttachmentTriggerProps } from "./components/attachment/attachment-trigger.js";
+import { Attachment } from "./components/attachment/index.js";
+export { Attachment, type AttachmentActionProps, type AttachmentAspectRatioProps, type AttachmentGroupProps, type AttachmentMediaProps, type AttachmentOrientation, type AttachmentRootProps, type AttachmentState, type AttachmentTriggerProps };

package/attachment.js

@@ -0,0 +1 @@
+export { Attachment } from "./components/attachment/index.js";

package/autocomplete.d.ts

@@ -0,0 +1,3 @@
+import { AutocompleteClearProps, AutocompleteContentProps, AutocompleteInputProps, AutocompleteRootProps } from "./components/autocomplete/autocomplete.js";
+import { Autocomplete } from "./components/autocomplete/index.js";
+export { Autocomplete, type AutocompleteClearProps, type AutocompleteContentProps, type AutocompleteInputProps, type AutocompleteRootProps };

package/autocomplete.js

@@ -0,0 +1 @@
+export { Autocomplete } from "./components/autocomplete/index.js";

package/avatar.js

@@ -1,2 +1 @@
-import { Avatar } from "./components/avatar/index.js";
-export { Avatar };
+export { Avatar } from "./components/avatar/index.js";

package/breadcrumb.js

@@ -1,2 +1 @@
-import { Breadcrumb } from "./components/breadcrumb/index.js";
-export { Breadcrumb };
+export { Breadcrumb } from "./components/breadcrumb/index.js";

package/checkbox-card.js

@@ -1,2 +1 @@
-import { CheckboxCard } from "./components/checkbox-card/checkbox-card.js";
-export { CheckboxCard };
+export { CheckboxCard } from "./components/checkbox-card/checkbox-card.js";

package/code.js

@@ -1,2 +1 @@
-import { Code } from "./components/code/code.js";
-export { Code };
+export { Code } from "./components/code/code.js";

package/collapsible.js

@@ -1,2 +1 @@
-import { Collapsible } from "./components/collapsible/index.js";
-export { Collapsible };
+export { Collapsible } from "./components/collapsible/index.js";

package/command-virtual.d.ts

@@ -0,0 +1,3 @@
+import { CommandVirtualListProps } from "./components/command-virtual/command-virtual.js";
+import { CommandVirtual } from "./components/command-virtual/index.js";
+export { CommandVirtual, type CommandVirtualListProps };

package/command-virtual.js

@@ -0,0 +1 @@
+export { CommandVirtual } from "./components/command-virtual/index.js";

package/command.d.ts

@@ -0,0 +1,5 @@
+import { CommandFooterProps, CommandHintProps, CommandShortcutProps } from "./components/command/command-markup.js";
+import { CommandSearchProps } from "./components/command/command-search.js";
+import { CommandBackProps, CommandContentProps, CommandHintPresetProps, CommandInputProps, CommandItemProps, CommandListProps, CommandPageProps, CommandPageTriggerProps, CommandRootProps, CommandTriggerProps } from "./components/command/command.js";
+import { Command } from "./components/command/index.js";
+export { Command, type CommandBackProps, type CommandContentProps, type CommandFooterProps, type CommandHintPresetProps, type CommandHintProps, type CommandInputProps, type CommandItemProps, type CommandListProps, type CommandPageProps, type CommandPageTriggerProps, type CommandRootProps, type CommandSearchProps, type CommandShortcutProps, type CommandTriggerProps };

package/command.js

@@ -0,0 +1 @@
+export { Command } from "./components/command/index.js";

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

@@ -1,30 +1,61 @@
-//#region src/components/accordion/accordion-variants.d.ts
+/**
+ * PUBLIC slot recipe. Consumers borrow it from
+ * `@elmeragroup/fuse/accordion`. Context-passed `variant` / `radius` stay on Root;
+ * parts call this with the published axes for their own slot.
+ *
+ * Height on `content` is the approved layout exception, owned once by the shared
+ * `panelHeightTransition` constant (`styles/panel-height.ts`) against base-ui's
+ * `--accordion-panel-height` — not a control-box rung.
+ *
+ * The trigger is a native button that Base UI also marks `data-disabled`, and a consumer may
+ * announce it `aria-disabled`, so it composes the `native` and `data` state faces (both
+ * carry the `aria-disabled` arm) and gates its hover underline behind `enabled-hover:`.
+ *
+ * `hasIndicator` packs the trigger's children at the start when `Accordion.Trigger` renders
+ * no trailing indicator, so a leading icon sits beside the label instead of across the row.
+ *
+ * `icon` styles and places the default caret, and consumers borrow it for their own carets.
+ * `indicator` repeats the icon's placement on the wrapper of a custom indicator, so either
+ * one sits in the same spot. `infodropdown` packs the trigger at the start, so both slots pin
+ * to the right edge there.
+ *
+ * The `card` item draws its 1px edge in `--card-border`, which external themes make transparent;
+ * add `border-border` where a borrowed item must keep a visible edge.
+ */
 export declare const accordionVariants: import("tailwind-variants").TVReturnType<{
   variant: {
     default: {
-      item: string;
-      trigger: string;
+      base: string;
+      item: string[];
     };
     card: {
       base: string;
-      item: string;
+      item: string[];
       content: string;
       icon: string;
     };
     infodropdown: {
       base: string;
       trigger: string;
+      indicator: string;
       icon: string;
       content: string;
+      contentInner: string;
+    };
+  };
+  hasIndicator: {
+    true: {};
+    false: {
+      trigger: string;
     };
   };
   radius: {
     none: {};
     lg: {
-      item: string;
+      item: string[];
     };
     xl: {
-      item: string;
+      item: string[];
     };
   };
 }, {
@@ -32,35 +63,44 @@ export declare const accordionVariants: import("tailwind-variants").TVReturnType
   item: string;
   header: string;
   trigger: string;
+  indicator: string;
   icon: string;
   content: string;
   contentInner: string;
 }, undefined, {
   variant: {
     default: {
-      item: string;
-      trigger: string;
+      base: string;
+      item: string[];
     };
     card: {
       base: string;
-      item: string;
+      item: string[];
       content: string;
       icon: string;
     };
     infodropdown: {
       base: string;
       trigger: string;
+      indicator: string;
       icon: string;
       content: string;
+      contentInner: string;
+    };
+  };
+  hasIndicator: {
+    true: {};
+    false: {
+      trigger: string;
     };
   };
   radius: {
     none: {};
     lg: {
-      item: string;
+      item: string[];
     };
     xl: {
-      item: string;
+      item: string[];
     };
   };
 }, {
@@ -68,35 +108,44 @@ export declare const accordionVariants: import("tailwind-variants").TVReturnType
   item: string;
   header: string;
   trigger: string;
+  indicator: string;
   icon: string;
   content: string;
   contentInner: string;
 }, import("tailwind-variants").TVReturnTypeLike<{
   variant: {
     default: {
-      item: string;
-      trigger: string;
+      base: string;
+      item: string[];
     };
     card: {
       base: string;
-      item: string;
+      item: string[];
       content: string;
       icon: string;
     };
     infodropdown: {
       base: string;
       trigger: string;
+      indicator: string;
       icon: string;
       content: string;
+      contentInner: string;
+    };
+  };
+  hasIndicator: {
+    true: {};
+    false: {
+      trigger: string;
     };
   };
   radius: {
     none: {};
     lg: {
-      item: string;
+      item: string[];
     };
     xl: {
-      item: string;
+      item: string[];
     };
   };
 }, {
@@ -104,9 +153,9 @@ export declare const accordionVariants: import("tailwind-variants").TVReturnType
   item: string;
   header: string;
   trigger: string;
+  indicator: string;
   icon: string;
   content: string;
   contentInner: string;
 }>>;
-//#endregion
 //# sourceMappingURL=accordion-variants.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"accordion-variants.d.ts","names":[],"sources":["../../../src/components/accordion/accordion-variants.ts"],"mappings":";qBAoBa,+CAAiB;;IAiBxB;MACE;MACA;;IAEF;MACE;MACA;MACA;MACA;;IAEF;MACE;MACA;MACA;MACA;;;;IAIF;IACA;MAAM;;IACN;MAAM"}
+{"version":3,"file":"accordion-variants.d.ts","names":[],"sources":["../../../src/components/accordion/accordion-variants.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;qBAsCa,+CAAiB;;IAwBxB;MAGE;MAMA;;IAKF;MACE;MACA;MAEA;MACA;;IAEF;MACE;MACA;MACA;MACA;MACA;MACA;;;;IAIF;IACA;MAAS;;;;IAGT;IACA;MAAM;;IACN;MAAM"}

package/components/accordion/accordion-variants.js

@@ -1,9 +1,10 @@
 import { cn } from "../../styles/cn.js";
+import { accordionCardItemLgShellClass, accordionCardItemShellClass, accordionCardItemXlShellClass, accordionItemLgShellClass, accordionItemShellClass, accordionItemXlShellClass } from "../../styles/inner-corner/accordion.js";
 import { panelHeightTransition } from "../../styles/panel-height.js";
-import { dataStateFaceClass, nativeStateFaceClass } from "../../styles/state-face.js";
+import { tv } from "../../styles/tv.js";
 import { selfFocusRingClass } from "../../styles/utils.js";
-import { tv } from "tailwind-variants";
-//#region src/components/accordion/accordion-variants.ts
+import { dataStateFaceClass, nativeStateFaceClass } from "../../styles/state-face.js";
+// src/components/accordion/accordion-variants.ts
 /**
 * PUBLIC slot recipe. Consumers borrow it from
 * `@elmeragroup/fuse/accordion`. Context-passed `variant` / `radius` stay on Root;
@@ -16,48 +17,75 @@ import { tv } from "tailwind-variants";
 * The trigger is a native button that Base UI also marks `data-disabled`, and a consumer may
 * announce it `aria-disabled`, so it composes the `native` and `data` state faces (both
 * carry the `aria-disabled` arm) and gates its hover underline behind `enabled-hover:`.
+*
+* `hasIndicator` packs the trigger's children at the start when `Accordion.Trigger` renders
+* no trailing indicator, so a leading icon sits beside the label instead of across the row.
+*
+* `icon` styles and places the default caret, and consumers borrow it for their own carets.
+* `indicator` repeats the icon's placement on the wrapper of a custom indicator, so either
+* one sits in the same spot. `infodropdown` packs the trigger at the start, so both slots pin
+* to the right edge there.
+*
+* The `card` item draws its 1px edge in `--card-border`, which external themes make transparent;
+* add `border-border` where a borrowed item must keep a visible edge.
 */
 const accordionVariants = tv({
 	slots: {
 		base: "",
-		item: "p-4",
+		item: "p-(--surface-pad-md)",
 		header: "flex",
-		trigger: cn("group/accordion-trigger font-medium flex flex-1 cursor-pointer items-center justify-between gap-2 data-[panel-open]:pb-4 enabled-hover:underline", selfFocusRingClass, nativeStateFaceClass, dataStateFaceClass),
-		icon: "size-4 shrink-0 text-foreground transition-transform duration-200 group-data-[panel-open]/accordion-trigger:rotate-180",
+		trigger: cn("group/accordion-trigger font-medium flex flex-1 cursor-pointer items-center justify-between gap-2 bg-transparent text-inherit enabled-hover:underline", selfFocusRingClass, nativeStateFaceClass, dataStateFaceClass),
+		indicator: "flex shrink-0 items-center",
+		icon: "size-4 shrink-0 transition-transform duration-200 group-data-[panel-open]/accordion-trigger:rotate-180",
 		content: cn(panelHeightTransition, "h-(--accordion-panel-height)"),
-		contentInner: "pt-1.5"
+		contentInner: "pt-[calc(var(--surface-gap-lg)+--spacing(1.5))]"
 	},
 	variants: {
 		variant: {
 			default: {
-				item: "rounded-sm bg-muted",
-				trigger: "transition-[padding-bottom]"
+				base: "space-y-3",
+				item: [accordionItemShellClass, "bg-primary-soft text-primary-soft-foreground [--ring:var(--primary-soft-foreground)]"]
 			},
 			card: {
 				base: "space-y-3",
-				item: "rounded-lg border bg-card text-foreground",
-				content: "rounded-lg bg-card text-foreground",
+				item: [accordionCardItemShellClass, "border-card-border bg-card text-foreground"],
+				content: "rounded-inner bg-card text-foreground",
 				icon: "text-foreground"
 			},
 			infodropdown: {
 				base: "border-b border-border",
-				trigger: "relative justify-start data-[panel-open]:pb-0",
-				icon: "absolute right-0",
-				content: "pl-7"
+				trigger: "relative justify-start",
+				indicator: "absolute right-0",
+				icon: "absolute right-0 text-foreground",
+				content: "pl-7",
+				contentInner: "pt-1.5"
 			}
 		},
+		hasIndicator: {
+			true: {},
+			false: { trigger: "justify-start" }
+		},
 		radius: {
 			none: {},
-			lg: { item: "overflow-hidden rounded-lg" },
-			xl: { item: "overflow-hidden rounded-xl" }
+			lg: { item: [accordionItemLgShellClass, "overflow-hidden"] },
+			xl: { item: [accordionItemXlShellClass, "overflow-hidden"] }
 		}
 	},
+	compoundVariants: [{
+		variant: "card",
+		radius: "lg",
+		class: { item: accordionCardItemLgShellClass }
+	}, {
+		variant: "card",
+		radius: "xl",
+		class: { item: accordionCardItemXlShellClass }
+	}],
 	defaultVariants: {
 		variant: "default",
-		radius: "none"
+		radius: "none",
+		hasIndicator: true
 	}
 });
-//#endregion
 export { accordionVariants };
 
 //# sourceMappingURL=accordion-variants.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"accordion-variants.js","names":[],"sources":["../../../src/components/accordion/accordion-variants.ts"],"sourcesContent":["/**\n * PUBLIC slot recipe. Consumers borrow it from\n * `@elmeragroup/fuse/accordion`. Context-passed `variant` / `radius` stay on Root;\n * parts call this with the published axes for their own slot.\n *\n * Height on `content` is the approved layout exception, owned once by the shared\n * `panelHeightTransition` constant (`styles/panel-height.ts`) against base-ui's\n * `--accordion-panel-height` — not a control-box rung.\n *\n * The trigger is a native button that Base UI also marks `data-disabled`, and a consumer may\n * announce it `aria-disabled`, so it composes the `native` and `data` state faces (both\n * carry the `aria-disabled` arm) and gates its hover underline behind `enabled-hover:`.\n */\nimport { tv } from \"tailwind-variants\";\n\nimport { cn } from \"../../styles/cn\";\nimport { panelHeightTransition } from \"../../styles/panel-height\";\nimport { dataStateFaceClass, nativeStateFaceClass } from \"../../styles/state-face\";\nimport { selfFocusRingClass } from \"../../styles/utils\";\n\nexport const accordionVariants = tv({\n  slots: {\n    base: \"\",\n    item: \"p-4\",\n    header: \"flex\",\n    trigger: cn(\n      \"group/accordion-trigger font-medium flex flex-1 cursor-pointer items-center justify-between gap-2 data-[panel-open]:pb-4 enabled-hover:underline\",\n      selfFocusRingClass,\n      nativeStateFaceClass,\n      dataStateFaceClass\n    ),\n    icon: \"size-4 shrink-0 text-foreground transition-transform duration-200 group-data-[panel-open]/accordion-trigger:rotate-180\",\n    content: cn(panelHeightTransition, \"h-(--accordion-panel-height)\"),\n    contentInner: \"pt-1.5\",\n  },\n  variants: {\n    variant: {\n      default: {\n        item: \"rounded-sm bg-muted\",\n        trigger: \"transition-[padding-bottom]\",\n      },\n      card: {\n        base: \"space-y-3\",\n        item: \"rounded-lg border bg-card text-foreground\",\n        content: \"rounded-lg bg-card text-foreground\",\n        icon: \"text-foreground\",\n      },\n      infodropdown: {\n        base: \"border-b border-border\",\n        trigger: \"relative justify-start data-[panel-open]:pb-0\",\n        icon: \"absolute right-0\",\n        content: \"pl-7\",\n      },\n    },\n    radius: {\n      none: {}, // Not dead: the default and a published `radius` value.\n      lg: { item: \"overflow-hidden rounded-lg\" },\n      xl: { item: \"overflow-hidden rounded-xl\" },\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n    radius: \"none\",\n  },\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAoBA,MAAa,oBAAoB,GAAG;CAClC,OAAO;EACL,MAAM;EACN,MAAM;EACN,QAAQ;EACR,SAAS,GACP,oJACA,oBACA,sBACA,kBACF;EACA,MAAM;EACN,SAAS,GAAG,uBAAuB,8BAA8B;EACjE,cAAc;CAChB;CACA,UAAU;EACR,SAAS;GACP,SAAS;IACP,MAAM;IACN,SAAS;GACX;GACA,MAAM;IACJ,MAAM;IACN,MAAM;IACN,SAAS;IACT,MAAM;GACR;GACA,cAAc;IACZ,MAAM;IACN,SAAS;IACT,MAAM;IACN,SAAS;GACX;EACF;EACA,QAAQ;GACN,MAAM,CAAC;GACP,IAAI,EAAE,MAAM,6BAA6B;GACzC,IAAI,EAAE,MAAM,6BAA6B;EAC3C;CACF;CACA,iBAAiB;EACf,SAAS;EACT,QAAQ;CACV;AACF,CAAC"}
+{"version":3,"file":"accordion-variants.js","names":[],"sources":["../../../src/components/accordion/accordion-variants.ts"],"sourcesContent":["import { cn } from \"../../styles/cn\";\nimport {\n  accordionCardItemLgShellClass,\n  accordionCardItemShellClass,\n  accordionCardItemXlShellClass,\n  accordionItemLgShellClass,\n  accordionItemShellClass,\n  accordionItemXlShellClass,\n} from \"../../styles/inner-corner/accordion\";\nimport { panelHeightTransition } from \"../../styles/panel-height\";\nimport { dataStateFaceClass, nativeStateFaceClass } from \"../../styles/state-face\";\nimport { tv } from \"../../styles/tv\";\nimport { selfFocusRingClass } from \"../../styles/utils\";\n\n/**\n * PUBLIC slot recipe. Consumers borrow it from\n * `@elmeragroup/fuse/accordion`. Context-passed `variant` / `radius` stay on Root;\n * parts call this with the published axes for their own slot.\n *\n * Height on `content` is the approved layout exception, owned once by the shared\n * `panelHeightTransition` constant (`styles/panel-height.ts`) against base-ui's\n * `--accordion-panel-height` — not a control-box rung.\n *\n * The trigger is a native button that Base UI also marks `data-disabled`, and a consumer may\n * announce it `aria-disabled`, so it composes the `native` and `data` state faces (both\n * carry the `aria-disabled` arm) and gates its hover underline behind `enabled-hover:`.\n *\n * `hasIndicator` packs the trigger's children at the start when `Accordion.Trigger` renders\n * no trailing indicator, so a leading icon sits beside the label instead of across the row.\n *\n * `icon` styles and places the default caret, and consumers borrow it for their own carets.\n * `indicator` repeats the icon's placement on the wrapper of a custom indicator, so either\n * one sits in the same spot. `infodropdown` packs the trigger at the start, so both slots pin\n * to the right edge there.\n *\n * The `card` item draws its 1px edge in `--card-border`, which external themes make transparent;\n * add `border-border` where a borrowed item must keep a visible edge.\n */\nexport const accordionVariants = tv({\n  slots: {\n    base: \"\",\n    // Every item pads with the medium surface tier; the shells add it with the corner they publish.\n    item: \"p-(--surface-pad-md)\",\n    header: \"flex\",\n    // Fuse ships no preflight, so `text-inherit` and `bg-transparent` replace the native button's\n    // ButtonText and ButtonFace: the label takes its item's text colour over its item's fill.\n    trigger: cn(\n      \"group/accordion-trigger font-medium flex flex-1 cursor-pointer items-center justify-between gap-2 bg-transparent text-inherit enabled-hover:underline\",\n      selfFocusRingClass,\n      nativeStateFaceClass,\n      dataStateFaceClass\n    ),\n    indicator: \"flex shrink-0 items-center\",\n    // The caret takes its item's text colour, so it follows the default fill's soft foreground.\n    icon: \"size-4 shrink-0 transition-transform duration-200 group-data-[panel-open]/accordion-trigger:rotate-180\",\n    content: cn(panelHeightTransition, \"h-(--accordion-panel-height)\"),\n    // An open panel sits the large surface gap below its trigger, plus the 6px before its text.\n    // The gap lives in the panel, so it opens and closes with the panel's height.\n    contentInner: \"pt-[calc(var(--surface-gap-lg)+--spacing(1.5))]\",\n  },\n  variants: {\n    variant: {\n      default: {\n        // Each item rounds all four corners, so stacked items sit apart, as card items do, instead\n        // of touching and leaving a notch where two rounded corners meet.\n        base: \"space-y-3\",\n        // The brand's soft tint, the role Material's `secondary-container` maps to. `muted` is\n        // the hover and read-only grey, so a panel in it reads as disabled on a tinted page.\n        // The neutral ring falls under 3:1 on the tint, so focus takes the soft foreground,\n        // as Alert's soft fills do. The rebind covers the whole item, so a control in the panel\n        // also draws its ring in the soft foreground over the same tint.\n        item: [\n          accordionItemShellClass,\n          \"bg-primary-soft text-primary-soft-foreground [--ring:var(--primary-soft-foreground)]\",\n        ],\n      },\n      card: {\n        base: \"space-y-3\",\n        item: [accordionCardItemShellClass, \"border-card-border bg-card text-foreground\"],\n        // The panel sits inside the item's padding, so it rounds with the item's inner corner.\n        content: \"rounded-inner bg-card text-foreground\",\n        icon: \"text-foreground\",\n      },\n      infodropdown: {\n        base: \"border-b border-border\",\n        trigger: \"relative justify-start\",\n        indicator: \"absolute right-0\",\n        icon: \"absolute right-0 text-foreground\",\n        content: \"pl-7\",\n        contentInner: \"pt-1.5\",\n      },\n    },\n    hasIndicator: {\n      true: {},\n      false: { trigger: \"justify-start\" },\n    },\n    radius: {\n      none: {}, // Not dead: the default and a published `radius` value.\n      lg: { item: [accordionItemLgShellClass, \"overflow-hidden\"] },\n      xl: { item: [accordionItemXlShellClass, \"overflow-hidden\"] },\n    },\n  },\n  // A bordered card item publishes its corner less the border too.\n  compoundVariants: [\n    { variant: \"card\", radius: \"lg\", class: { item: accordionCardItemLgShellClass } },\n    { variant: \"card\", radius: \"xl\", class: { item: accordionCardItemXlShellClass } },\n  ],\n  defaultVariants: {\n    variant: \"default\",\n    radius: \"none\",\n    hasIndicator: true,\n  },\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCA,MAAa,oBAAoB,GAAG;CAClC,OAAO;EACL,MAAM;EAEN,MAAM;EACN,QAAQ;EAGR,SAAS,GACP,yJACA,oBACA,sBACA,kBACF;EACA,WAAW;EAEX,MAAM;EACN,SAAS,GAAG,uBAAuB,8BAA8B;EAGjE,cAAc;CAChB;CACA,UAAU;EACR,SAAS;GACP,SAAS;IAGP,MAAM;IAMN,MAAM,CACJ,yBACA,sFACF;GACF;GACA,MAAM;IACJ,MAAM;IACN,MAAM,CAAC,6BAA6B,4CAA4C;IAEhF,SAAS;IACT,MAAM;GACR;GACA,cAAc;IACZ,MAAM;IACN,SAAS;IACT,WAAW;IACX,MAAM;IACN,SAAS;IACT,cAAc;GAChB;EACF;EACA,cAAc;GACZ,MAAM,CAAC;GACP,OAAO,EAAE,SAAS,gBAAgB;EACpC;EACA,QAAQ;GACN,MAAM,CAAC;GACP,IAAI,EAAE,MAAM,CAAC,2BAA2B,iBAAiB,EAAE;GAC3D,IAAI,EAAE,MAAM,CAAC,2BAA2B,iBAAiB,EAAE;EAC7D;CACF;CAEA,kBAAkB,CAChB;EAAE,SAAS;EAAQ,QAAQ;EAAM,OAAO,EAAE,MAAM,8BAA8B;CAAE,GAChF;EAAE,SAAS;EAAQ,QAAQ;EAAM,OAAO,EAAE,MAAM,8BAA8B;CAAE,CAClF;CACA,iBAAiB;EACf,SAAS;EACT,QAAQ;EACR,cAAc;CAChB;AACF,CAAC"}

package/components/accordion/accordion.d.ts

@@ -1,9 +1,8 @@
 import { accordionVariants } from "./accordion-variants.js";
-import { ComponentProps, ReactElement } from "react";
+import { ComponentProps, ReactElement, ReactNode } from "react";
 import { Accordion, AccordionRoot } from "@base-ui/react/accordion";
 import { VariantProps } from "tailwind-variants";
-//#region src/components/accordion/accordion.d.ts
-type AccordionVariantProps = VariantProps<typeof accordionVariants>;
+type AccordionVariantProps = Omit<VariantProps<typeof accordionVariants>, "hasIndicator">;
 type WithSlotClassName<T> = Omit<T, "className"> & {
   /** Extra classes, merged into the part's recipe slot via the recipe `className` argument. */
   className?: string;
@@ -17,6 +16,12 @@ declare function AccordionRoot$1<Value = unknown>({ className, variant, radius,
 declare namespace AccordionRoot$1 {
   var displayName: string;
 }
+/**
+ * One accordion item. A rounded item publishes `--inner-corner`, its corner less its border and
+ * padding, and a card item's panel rounds with it. A `card` item draws its 1px edge in the theme's
+ * `--card-border`: `--border` in internal themes and a zero-alpha colour in external ones. A border
+ * colour class still wins.
+ */
 export declare function AccordionItem({ className, ...props }: WithSlotClassName<ComponentProps<typeof Accordion.Item>>): ReactElement;
 export declare namespace AccordionItem {
   var displayName: string;
@@ -25,7 +30,18 @@ export declare function AccordionHeader({ className, ...props }: WithSlotClassNa
 export declare namespace AccordionHeader {
   var displayName: string;
 }
-export declare function AccordionTrigger({ className, children, ...props }: WithSlotClassName<ComponentProps<typeof Accordion.Trigger>>): ReactElement;
+/**
+ * The item's toggle button. `indicator` follows the children: it defaults to a caret that
+ * rotates while the item is open, `null` renders none, and any other node renders as given.
+ * The variant places any indicator, default or custom, in the same position. The rotation
+ * belongs to the default caret only; a custom indicator, or a leading icon passed as a child,
+ * styles its open state from the trigger's `data-panel-open` (`in-data-[panel-open]:rotate-90`).
+ * With no indicator the children pack at the start.
+ */
+export declare function AccordionTrigger({ className, children, indicator, ...props }: WithSlotClassName<ComponentProps<typeof Accordion.Trigger>> & {
+  /** Node after the children. Defaults to a rotating caret; `null` renders none. */
+  indicator?: ReactNode;
+}): ReactElement;
 export declare namespace AccordionTrigger {
   var displayName: string;
 }
@@ -33,6 +49,5 @@ export declare function AccordionContent({ className, children, ...props }: With
 export declare namespace AccordionContent {
   var displayName: string;
 }
-//#endregion
 export { AccordionRoot$1 as AccordionRoot };
 //# sourceMappingURL=accordion.d.ts.map

package/components/accordion/accordion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.d.ts","names":[],"sources":["../../../src/components/accordion/accordion.tsx"],"mappings":";;;;;KAYK,wBAAwB,oBAAoB;KAE5C,kBAAkB,KAAK,KAAK;;EAE/B;;;;;;;iBAkBc,gBAAc,mBAC5B,WACA,SACA,WACG,SACF,kBAAkB,cAAkB,MAAM,UAAU,wBAAwB;kBAL/D;MAAA;;wBAgBA,gBACd,cACG,SACF,kBAAkB,sBAAsB,UAAmB,SAAS;yBAHvD;MAAA;;wBAUA,kBACd,cACG,SACF,kBAAkB,sBAAsB,UAAmB,WAAW;yBAHzD;MAAA;;wBAYA,mBACd,WACA,aACG,SACF,kBAAkB,sBAAsB,UAAmB,YAAY;yBAJ1D;MAAA;;wBAgBA,mBACd,WACA,aACG,SACF,kBAAkB,sBAAsB,UAAmB,UAAU;yBAJxD;MAAA"}
+{"version":3,"file":"accordion.d.ts","names":["AccordionRoot","AccordionRootType","AccordionPrimitive"],"sources":["../../../src/components/accordion/accordion.tsx"],"mappings":";;;;KAYK,wBAAwB,KAAK,oBAAoB;KAEjD,kBAAkB,KAAK,KAAK;;EAE/B;;;;;;;iBAkBcA,gBAAc,mBAC5B,WACA,SACA,WACG,SACF,kBAAkBC,cAAkB,MAAM,UAAU,wBAAwB;kBAL/DD;;;;;;;;;wBAsBA,gBACd,cACG,SACF,kBAAkB,sBAAsBE,UAAmB,SAAS;yBAHvD;;;wBAUA,kBACd,cACG,SACF,kBAAkB,sBAAsBA,UAAmB,WAAW;yBAHzD;;;;;;;;;;;wBAoBA,mBACd,WACA,UACA,cACG,SACF,kBAAkB,sBAAsBA,UAAmB;;EAE5D,YAAY;IACV;yBARY;;;wBA6BA,mBACd,WACA,aACG,SACF,kBAAkB,sBAAsBA,UAAmB,UAAU;yBAJxD"}