themelia-ui 3.0.0 → 3.2.0

package/docs/generated/components/INDEX.md

@@ -7,8 +7,6 @@ snapshot, the architecture manifest, selection guidance, and the live preview re
 
 | module | tier | profile | reference |
 | --- | --- | --- | --- |
-| `admin/patterns/access` | Blocks | admin | [API](./admin--patterns--access.md) |
-| `admin/patterns/commerce` | Blocks | admin | [API](./admin--patterns--commerce.md) |
 | `base/accordion` | Base | general | [API](./base--accordion.md) |
 | `base/action-menu` | Base | general | [API](./base--action-menu.md) |
 | `base/alert-dialog` | Base | general | [API](./base--alert-dialog.md) |
@@ -63,6 +61,11 @@ snapshot, the architecture manifest, selection guidance, and the live preview re
 | `base/typography` | Base | general | [API](./base--typography.md) |
 | `base/upload` | Base | general | [API](./base--upload.md) |
 | `base/value-inputs` | Base | general | [API](./base--value-inputs.md) |
+| `blocks/admin/access` | Blocks | admin | [API](./blocks--admin--access.md) |
+| `blocks/admin/commerce` | Blocks | admin | [API](./blocks--admin--commerce.md) |
+| `blocks/analytics` | Blocks | general | [API](./blocks--analytics.md) |
+| `blocks/onboarding` | Blocks | general | [API](./blocks--onboarding.md) |
+| `blocks/timelines` | Blocks | general | [API](./blocks--timelines.md) |
 | `features/actions` | Features | general | [API](./features--actions.md) |
 | `features/activities` | Features | general | [API](./features--activities.md) |
 | `features/ai-chat` | Features | general | [API](./features--ai-chat.md) |
@@ -98,9 +101,6 @@ snapshot, the architecture manifest, selection guidance, and the live preview re
 | `layout/settings` | Layout | general | [API](./layout--settings.md) |
 | `layout/sidebar` | Layout | general | [API](./layout--sidebar.md) |
 | `layout/workspace` | Layout | general | [API](./layout--workspace.md) |
-| `patterns/analytics` | Blocks | general | [API](./patterns--analytics.md) |
-| `patterns/onboarding` | Blocks | general | [API](./patterns--onboarding.md) |
-| `patterns/timelines` | Blocks | general | [API](./patterns--timelines.md) |
 | `primitives` | Primitives | general | [API](./primitives.md) |
 | `theming` | Foundations | general | [API](./theming.md) |
 | `ui-provider` | Foundations | general | [API](./ui-provider.md) |

package/docs/generated/components/base--accordion.md

@@ -15,7 +15,6 @@ Several titled sections share one column and the reader opens them one at a time
 
 ```tsx fragment — import-only example
 import { Accordion } from "themelia-ui/base/accordion"
-import "themelia-ui/base/accordion.css"
 ```
 
 ## Composition
@@ -188,7 +187,7 @@ import { Text } from "themelia-ui/base/typography"
 
 export default function AccordionSurfaces() {
 	return (
-		<Stack gap="xl" style={{ maxWidth: "34rem", width: "100%" }}>
+		<Stack style={{ maxWidth: "34rem", width: "100%" }}>
 			{(["bordered", "card", "flat"] as const).map((surface) => (
 				<Stack key={surface} gap="sm">
 					<Text size="xs" type="secondary">
@@ -207,3 +206,53 @@ export default function AccordionSurfaces() {
 	)
 }
 ```
+
+### Compose your own checklist
+
+```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
+import { CheckIcon, CircleIcon } from "lucide-react"
+
+import { Accordion } from "themelia-ui/base/accordion"
+import { Button } from "themelia-ui/base/buttons"
+import { IconBadge } from "themelia-ui/base/display"
+import { Progress } from "themelia-ui/base/feedback"
+import { Stack } from "themelia-ui/base/structure"
+import { Text } from "themelia-ui/base/typography"
+
+export default function ChecklistBlueprint() {
+	return (
+		<Stack style={{ maxWidth: "34rem", width: "100%" }}>
+			<Progress value={1} max={3} label="1 of 3 steps complete" />
+			<Accordion
+				media="medallion"
+				defaultValue={["invite"]}
+				items={[
+					{
+						value: "profile",
+						title: "Complete your profile",
+						icon: <IconBadge icon={CheckIcon} tone="success" shape="circle" />,
+						content: <Text type="secondary">Name, avatar and time zone are set.</Text>,
+					},
+					{
+						value: "invite",
+						title: "Invite your team",
+						icon: <IconBadge icon={CircleIcon} shape="circle" />,
+						content: (
+							<Stack gap="sm" align="start">
+								<Text type="secondary">Teammates see the same projects and saved views.</Text>
+								<Button>Send invites</Button>
+							</Stack>
+						),
+					},
+					{
+						value: "connect",
+						title: "Connect a data source",
+						icon: <IconBadge icon={CircleIcon} shape="circle" />,
+						content: <Text type="secondary">Postgres, a CSV upload or the REST API.</Text>,
+					},
+				]}
+			/>
+		</Stack>
+	)
+}
+```

package/docs/generated/components/base--action-menu.md

@@ -15,7 +15,6 @@ A row, card or header offers the same set of actions repeatedly and the overflow
 
 ```tsx fragment — import-only example
 import { ActionButtons } from "themelia-ui/base/action-menu"
-import "themelia-ui/base/action-menu.css"
 ```
 
 ## Composition
@@ -43,7 +42,7 @@ Kind: interface.
 
 | member | required | type | description / documented default |
 | --- | :-: | --- | --- |
-| `actions` | yes | `readonly ActionDefinition[]` | The same definitions `ActionMenu` takes, side by side rather than collapsed into a menu:<br>that is the point of the shape. Each entry's `tone` and `buttonStyle` carry through to<br>its button. |
+| `actions` | yes | `readonly ActionDefinition[]` | The same definitions `ActionMenu` takes, side by side rather than collapsed into a menu:<br>that is the point of the shape. Each entry's `tone` and `appearance` carry through to<br>its button. |
 | `max` | no | `number` | How many render as buttons before the rest collapse into an overflow menu built from<br>the same array. Unset, every definition is a button. |
 | `strings` | no | `Partial<ActionMenuStrings>` | Overrides this toolbar's own copy: `strings.overflow` names the overflow menu's trigger. |
 | `className` | no | `string` |  |
@@ -73,7 +72,7 @@ One command, in the shape `ActionMenu`, `ActionButtons` and a card's `actions` a
 | `onCheckedChange` | no | `(checked: boolean) => void` |  |
 | `group` | no | `string \| true` | Starts a new group, ruling off above this entry. A string also captions it; `true`<br>rules off without a heading (e.g. to set apart a sign-out or delete). |
 | `tone` | no | `ButtonTone` | Semantic intent. `destructive` also moves the entry last and separates it. |
-| `buttonStyle` | no | `ButtonStyle \| "link"` | Treatment when the action renders as a button. `link` is a ghost that underlines. |
+| `appearance` | no | `ButtonAppearance \| "link"` | Treatment when the action renders as a button. `link` is a ghost that underlines. |
 | `visible` | no | `boolean` | `false` omits the action entirely. @default true |
 | `disabled` | no | `boolean` |  |
 | `closeOnSelect` | no | `boolean` | Overrides the menu's `closeOnSelect` for this entry. |
@@ -310,13 +309,13 @@ export default function ActionMenuExample() {
 	]
 
 	return (
-		<Stack direction="horizontal" gap="xl" align="center">
+		<Stack direction="horizontal" align="center">
 			<ActionMenu actions={actions} />
 			<ActionMenu actions={actions} label="Actions" icon={SettingsIcon} />
 			<ActionMenu
 				actions={actions}
 				renderTrigger={
-					<Button buttonStyle="outline" tone="neutral">
+					<Button appearance="outline" tone="neutral">
 						Custom trigger
 						<ChevronDownIcon />
 					</Button>
@@ -345,17 +344,17 @@ const DESTRUCTIVE_FIRST: ActionDefinition[] = [
 export default function ActionMenuOrder() {
 	return (
 		// The same delete-first array: default ordering on the left, `preserveOrder` on the right.
-		<Stack direction="horizontal" gap="lg" align="center">
+		<Stack direction="horizontal" align="center">
 			<ActionMenu
 				actions={DESTRUCTIVE_FIRST}
 				label="Sorted"
-				buttonProps={{ tone: "neutral", buttonStyle: "outline" }}
+				buttonProps={{ tone: "neutral", appearance: "outline" }}
 			/>
 			<ActionMenu
 				actions={DESTRUCTIVE_FIRST}
 				preserveOrder
 				label="preserveOrder"
-				buttonProps={{ tone: "neutral", buttonStyle: "outline" }}
+				buttonProps={{ tone: "neutral", appearance: "outline" }}
 			/>
 		</Stack>
 	)
@@ -375,7 +374,7 @@ import { Stack } from "themelia-ui/base/structure"
 
 export default function ActionMenuWidth() {
 	return (
-		<Stack direction="horizontal" gap="xl" align="center" wrap>
+		<Stack direction="horizontal" align="center" wrap>
 			<ActionMenu
 				label="Shortcuts"
 				actions={[
@@ -404,7 +403,7 @@ export default function ActionMenuWidth() {
 			/>
 			<ActionMenu
 				renderTrigger={
-					<Button buttonStyle="outline" tone="neutral" style={{ width: "16rem" }}>
+					<Button appearance="outline" tone="neutral" style={{ width: "16rem" }}>
 						Matches the trigger
 						<ChevronDownIcon />
 					</Button>
@@ -436,14 +435,14 @@ const TOOLBAR: ActionDefinition[] = [
 	{ label: "Duplicate", icon: ShareIcon, ...QUIET, onClick: () => {} },
 	{ label: "Export", icon: DownloadIcon, ...QUIET, onClick: () => {} },
 	{ label: "Archive", icon: ArchiveIcon, ...QUIET, onClick: () => {} },
-	{ label: "Delete", icon: TrashIcon, buttonStyle: "outline", tone: "destructive", onClick: () => {} },
+	{ label: "Delete", icon: TrashIcon, appearance: "outline", tone: "destructive", onClick: () => {} },
 ]
 
 export default function ActionButtonsExample() {
 	return (
-		<Stack gap="lg" style={{ width: "100%" }}>
+		<Stack style={{ width: "100%" }}>
 			{[5, 3, 1].map((max) => (
-				<Stack key={max} gap="xs">
+				<Stack key={max} gap="sm">
 					<Text size="xs" type="secondary">max={max}</Text>
 					<ActionButtons actions={TOOLBAR} max={max} />
 				</Stack>
@@ -483,9 +482,9 @@ const INVOICES: Invoice[] = [
 
 export default function ContextActions() {
 	return (
-		<Stack gap="lg" style={{ width: "100%" }}>
+		<Stack style={{ width: "100%" }}>
 			{INVOICES.map((invoice) => (
-				<Stack key={invoice.number} gap="xs">
+				<Stack key={invoice.number} gap="sm">
 					<Text size="xs" type="secondary">
 						{invoice.number} · {invoice.paid ? "paid, locked" : "unpaid"}
 					</Text>

package/docs/generated/components/base--alert-dialog.md

@@ -15,7 +15,6 @@ Documenting or extending the alert-dialog anatomy itself inside base.
 
 ```tsx fragment — import-only example
 import { AlertDialogAction } from "themelia-ui/base/alert-dialog"
-import "themelia-ui/base/alert-dialog.css"
 ```
 
 ## Composition
@@ -91,9 +90,9 @@ import { Text } from "themelia-ui/base/typography"
 
 export default function AlertDialog() {
 	return (
-		<Stack direction="horizontal">
+		<Stack gap="sm" direction="horizontal">
 			<Overlay>
-				<OverlayTrigger render={<Button tone="destructive" buttonStyle="outline" />}>
+				<OverlayTrigger render={<Button tone="destructive" appearance="outline" />}>
 					Delete account
 				</OverlayTrigger>
 				<AlertDialogContent>
@@ -105,7 +104,7 @@ export default function AlertDialog() {
 						<Text type="secondary">Every project and invoice is removed permanently.</Text>
 					</OverlayBody>
 					<OverlayFooter>
-						<AlertDialogCancel render={<Button tone="neutral" buttonStyle="outline" />}>
+						<AlertDialogCancel render={<Button tone="neutral" appearance="outline" />}>
 							Cancel
 						</AlertDialogCancel>
 						{/* The answer is an Action, not a second Cancel: they read the same only until a caller hooks the one that commits. */}

package/docs/generated/components/base--aspect-ratio.md

@@ -15,7 +15,6 @@ A media box must hold a fixed ratio while its width is decided by the layout.
 
 ```tsx fragment — import-only example
 import { AspectRatio } from "themelia-ui/base/aspect-ratio"
-import "themelia-ui/base/aspect-ratio.css"
 ```
 
 ## Composition
@@ -59,15 +58,15 @@ import { Text } from "themelia-ui/base/typography"
 
 export default function AspectRatioExample() {
 	return (
-		<Stack direction="horizontal" gap="lg" style={{ width: "100%" }}>
+		<Stack direction="horizontal" style={{ width: "100%" }}>
 			{[
 				{ ratio: 16 / 9, label: "16 / 9" },
 				{ ratio: 1, label: "1 / 1" },
 				{ ratio: 3 / 4, label: "3 / 4" },
 			].map((entry) => (
-				<Stack key={entry.label} gap="2xs" style={{ flex: 1 }}>
+				<Stack key={entry.label} gap="sm" style={{ flex: 1 }}>
 					<AspectRatio ratio={entry.ratio}>
-						<div style={{ display: "grid", placeItems: "center", background: "var(--muted-40)", borderRadius: "var(--radius)" }}>
+						<div style={{ display: "grid", placeItems: "center", background: "var(--muted)", borderRadius: "var(--radius)" }}>
 							<Text size="xs" type="secondary">{entry.label}</Text>
 						</div>
 					</AspectRatio>

package/docs/generated/components/base--avatar.md

@@ -15,12 +15,11 @@ Showing a person or entity as an image with an initials fallback, alone or stack
 
 ```tsx fragment — import-only example
 import { Avatar } from "themelia-ui/base/avatar"
-import "themelia-ui/base/avatar.css"
 ```
 
 ## Composition
 
-This module depends on no other module.
+This module composes `base/typography`.
 
 Application policy—routing, fetching, persistence, permissions, and translation—stays
 outside the package and arrives through the public props, callbacks, slots, or accessors below.
@@ -51,7 +50,8 @@ A small status mark on the disc's corner.
 
 Kind: callable.
 
-Shown when there is no image. Initials, not a placeholder glyph.
+Shown when there is no image. Initials, not a placeholder glyph. They take the smaller
+step on a small disc, and in a group, so the overlap doesn't clip them.
 
 ```text
 ({ className, ...props }: AvatarPrimitive.Fallback.Props) => React.JSX.Element
@@ -104,7 +104,7 @@ Kind: type.
 An avatar keeps a size prop: it has no content to scale with.
 
 ```text
-"default" | "sm" | "lg"
+"default" | "sm"
 ```
 
 ### `defaultStackedAvatarsStrings`
@@ -174,8 +174,8 @@ import { Stack } from "themelia-ui/base/structure"
 
 export default function AvatarExample() {
 	return (
-		<Stack direction="horizontal" gap="lg" align="center">
-			{(["sm", "default", "lg"] as const).map((size) => (
+		<Stack direction="horizontal" align="center">
+			{(["sm", "default"] as const).map((size) => (
 				<Avatar key={size} size={size}>
 					<AvatarFallback>JM</AvatarFallback>
 				</Avatar>
@@ -206,7 +206,7 @@ const MEMBERS = [
 
 export default function Stacked() {
 	return (
-		<Stack gap="lg">
+		<Stack>
 			<StackedAvatars users={MEMBERS} max={4} />
 			<StackedAvatars users={MEMBERS} max={2} />
 			<AvatarGroup>

package/docs/generated/components/base--badge.md

@@ -15,12 +15,11 @@ A short status or count sits beside the thing it describes and carries a semanti
 
 ```tsx fragment — import-only example
 import { Badge } from "themelia-ui/base/badge"
-import "themelia-ui/base/badge.css"
 ```
 
 ## Composition
 
-This module composes `base/slot`.
+This module composes `base/slot`, `base/typography`.
 
 Application policy—routing, fetching, persistence, permissions, and translation—stays
 outside the package and arrives through the public props, callbacks, slots, or accessors below.
@@ -32,19 +31,29 @@ outside the package and arrives through the public props, callbacks, slots, or a
 Kind: callable.
 
 ```text
-({ className, tone, variant, render, dot, pending, pulse, children, ...props }: BadgeProps) => React.JSX.Element
+({ className, tone, appearance, render, dot, pending, pulse, children, ...props }: BadgeProps) => React.JSX.Element
+```
+
+### `BadgeAppearance`
+
+Kind: type.
+
+Fill treatment. The tone supplies the hue; this decides how much of it is applied.
+
+```text
+"soft" | "solid" | "outline"
 ```
 
 ### `BadgeProps`
 
 Kind: interface.
 
-Extends: `React.ComponentProps<"span">`, `VariantProps<typeof badgeVariants>`.
+Extends: `React.ComponentProps<"span">`.
 
 | member | required | type | description / documented default |
 | --- | :-: | --- | --- |
-| `tone` | no | `BadgeTone` | Semantic colour: what the badge means. `variant` decides how much of it is applied. |
-| `variant` | no | `BadgeVariant` | How much of the tone is applied. Structural, not semantic. |
+| `tone` | no | `BadgeTone` | Semantic colour: what the badge means. `appearance` decides how much of it is applied. |
+| `appearance` | no | `BadgeAppearance` | How much of the tone is applied: a soft wash, a solid fill or an outline. |
 | `dot` | no | `boolean` | A leading status dot in the badge's own tone. |
 | `pending` | no | `boolean` | Draws the dot hollow, for a state that has not happened yet: "queued", not "failed". |
 | `pulse` | no | `boolean` | Animates the dot, for a state that is actively changing. |
@@ -54,32 +63,54 @@ Extends: `React.ComponentProps<"span">`, `VariantProps<typeof badgeVariants>`.
 
 Kind: type.
 
+Semantic colour: the kit's one tone union.
+
 ```text
-"neutral" | "primary" | "secondary" | "success" | "info" | "warning" | "destructive"
+SemanticTone
 ```
 
-### `BadgeVariant`
-
-Kind: type.
+## Preview recipes
 
-Structural presentation. The tone supplies the hue; this decides how it is applied.
+Preview route: Analytics — `/analytics`
 
-```text
-"soft" | "solid" | "outline"
-```
+### Compose your own
 
-### `badgeVariants`
+```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
+import { ArrowUpIcon, CreditCardIcon } from "lucide-react"
 
-Kind: callable.
+import { Badge } from "themelia-ui/base/badge"
+import { Card } from "themelia-ui/base/cards"
+import { Sparkline } from "themelia-ui/base/chart"
+import { IconBadge } from "themelia-ui/base/display"
+import { Stack } from "themelia-ui/base/structure"
+import { DisplayLabel, Text } from "themelia-ui/base/typography"
+import { Money } from "themelia-ui/primitives"
 
-```text
-(props?: ({ tone?: ("neutral" | "primary" | "secondary" | "info" | "success" | "warning" | "destructive") | null | undefined; variant?: ("solid" | "outline" | "soft") | null | undefined; } & { className?: import('clsx').ClassValue; }) | undefined) => string
+export default function AnalyticsBlueprint() {
+	return (
+		<Card style={{ maxWidth: "20rem" }}>
+			<Stack gap="sm">
+				<Stack direction="horizontal" align="center" gap="sm">
+					<IconBadge icon={CreditCardIcon} tone="primary" />
+					<DisplayLabel>Revenue</DisplayLabel>
+				</Stack>
+				<Stack direction="horizontal" align="center" justify="between" gap="sm">
+					<Money amount={48200} currency="EUR" size="xl" weight="semibold" />
+					<Badge tone="success">
+						<ArrowUpIcon />
+						12.4%
+					</Badge>
+				</Stack>
+				<Sparkline data={[18, 22, 19, 27, 24, 31, 29, 38]} tone="success" label="Revenue rising over eight weeks" />
+				<Text size="xs" type="secondary">
+					Net of refunds, this quarter
+				</Text>
+			</Stack>
+		</Card>
+	)
+}
 ```
 
-## Preview recipes
-
-Preview route: Badge — `/badge`
-
 ### Tones
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
@@ -91,13 +122,13 @@ const TONES: BadgeTone[] = ["neutral", "primary", "secondary", "success", "info"
 
 export default function BadgeTones() {
 	return (
-		<Stack gap="lg" style={{ width: "100%" }}>
-			{(["soft", "solid", "outline"] as const).map((variant) => (
-				<Stack key={variant} gap="xs">
-					<Text size="xs" type="secondary">{variant}</Text>
+		<Stack style={{ width: "100%" }}>
+			{(["soft", "solid", "outline"] as const).map((appearance) => (
+				<Stack key={appearance} gap="sm">
+					<Text size="xs" type="secondary">{appearance}</Text>
 					<Stack direction="horizontal" gap="sm" wrap>
 						{TONES.map((tone) => (
-							<Badge key={tone} tone={tone} variant={variant}>{tone}</Badge>
+							<Badge key={tone} tone={tone} appearance={appearance}>{tone}</Badge>
 						))}
 					</Stack>
 				</Stack>
@@ -124,3 +155,104 @@ export default function BadgeDot() {
 	)
 }
 ```
+
+### Compose your own timeline
+
+```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
+import { RocketIcon, WrenchIcon } from "lucide-react"
+
+import { Badge } from "themelia-ui/base/badge"
+import { Stack } from "themelia-ui/base/structure"
+import { Timeline, type TimelineItem } from "themelia-ui/base/timeline"
+import { MonoValue } from "themelia-ui/primitives"
+
+const RELEASES: TimelineItem[] = [
+	{
+		id: "3.1.0",
+		title: "Saved views",
+		timestamp: <MonoValue size="xs" type="secondary">v3.1.0</MonoValue>,
+		icon: RocketIcon,
+		status: "success",
+		description: "Filters and columns can be saved and shared with the team.",
+		children: (
+			<Stack direction="horizontal" gap="sm">
+				<Badge tone="success">Added</Badge>
+				<Badge tone="neutral">Tables</Badge>
+			</Stack>
+		),
+	},
+	{
+		id: "3.0.2",
+		title: "Faster exports",
+		timestamp: <MonoValue size="xs" type="secondary">v3.0.2</MonoValue>,
+		icon: WrenchIcon,
+		status: "neutral",
+		description: "Large exports stream instead of waiting for the whole file.",
+	},
+]
+
+export default function ChangelogBlueprint() {
+	return (
+		<Timeline items={RELEASES} />
+	)
+}
+```
+
+### Compose your own permissions
+
+```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
+import { CheckIcon } from "lucide-react"
+
+import { Badge } from "themelia-ui/base/badge"
+import { VisuallyHidden } from "themelia-ui/base/display"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "themelia-ui/base/table"
+import { Text } from "themelia-ui/base/typography"
+
+const ROLES = ["Owner", "Editor", "Viewer"] as const
+const PERMISSIONS: { name: string; granted: readonly boolean[] }[] = [
+	{ name: "Edit projects", granted: [true, true, false] },
+	{ name: "Manage billing", granted: [true, false, false] },
+	{ name: "Export data", granted: [true, true, true] },
+]
+
+export default function RolesBlueprint() {
+	return (
+		<Table>
+			<TableHeader>
+				<TableRow>
+					<TableHead>Permission</TableHead>
+					{ROLES.map((role) => (
+						<TableHead key={role} align="center">
+							{role}
+						</TableHead>
+					))}
+				</TableRow>
+			</TableHeader>
+			<TableBody>
+				{PERMISSIONS.map((permission) => (
+					<TableRow key={permission.name}>
+						<TableCell>{permission.name}</TableCell>
+						{permission.granted.map((granted, index) => (
+							<TableCell key={ROLES[index]} align="center">
+								{granted ? (
+									<Badge tone="success">
+										<CheckIcon aria-hidden />
+										<VisuallyHidden>Granted</VisuallyHidden>
+									</Badge>
+								) : (
+									<>
+										<Text tag="span" type="secondary" aria-hidden>
+											—
+										</Text>
+										<VisuallyHidden>Not granted</VisuallyHidden>
+									</>
+								)}
+							</TableCell>
+						))}
+					</TableRow>
+				))}
+			</TableBody>
+		</Table>
+	)
+}
+```

package/docs/generated/components/base--batch-action-bar.md

@@ -15,7 +15,6 @@ A multi-select produces a selection whose actions must appear without shifting t
 
 ```tsx fragment — import-only example
 import { BatchActionBar } from "themelia-ui/base/batch-action-bar"
-import "themelia-ui/base/batch-action-bar.css"
 ```
 
 ## Composition
@@ -98,7 +97,7 @@ const DEMO_BOX: React.CSSProperties = {
 	transform: "translate(0)",
 	minHeight: "12rem",
 	width: "100%",
-	padding: "var(--space-lg)",
+	padding: "var(--padding)",
 	border: "var(--border-width) dashed var(--border)",
 	borderRadius: "var(--radius)",
 }
@@ -107,9 +106,9 @@ export default function Floating() {
 	const [selected, setSelected] = useState(3)
 
 	return (
-		<Stack gap="md" style={{ width: "100%" }}>
+		<Stack gap="sm" style={{ width: "100%" }}>
 			<Stack direction="horizontal" gap="sm" align="center">
-				<Button type="button" tone="neutral" buttonStyle="outline" onClick={() => setSelected((n) => n + 1)}>
+				<Button type="button" tone="neutral" appearance="outline" onClick={() => setSelected((n) => n + 1)}>
 					Select one more
 				</Button>
 				<Text size="sm" type="secondary">
@@ -121,10 +120,10 @@ export default function Floating() {
 					The bar below is contained to this box for the demo. In an app it docks to the viewport.
 				</Text>
 				<BatchActionBar selectedCount={selected} totalCount={250} onClear={() => setSelected(0)}>
-					<Button type="button" tone="neutral" buttonStyle="ghost">
+					<Button type="button" tone="neutral" appearance="ghost">
 						Export
 					</Button>
-					<Button type="button" tone="destructive" buttonStyle="ghost">
+					<Button type="button" tone="destructive" appearance="ghost">
 						Delete
 					</Button>
 				</BatchActionBar>
@@ -148,7 +147,7 @@ export default function Inline() {
 			onClear={() => undefined}
 			strings={{ label: "Inline batch actions example" }}
 		>
-			<Button type="button" tone="neutral" buttonStyle="ghost">
+			<Button type="button" tone="neutral" appearance="ghost">
 				Assign
 			</Button>
 		</BatchActionBar>