themelia-ui 3.0.0 → 3.1.0

package/docs/generated/components/{admin--patterns--access.md → blocks--admin--access.md}

@@ -1,6 +1,6 @@
 <!-- GENERATED by scripts/gen-consumer-docs.mjs — do not edit. -->
 
-# `admin/patterns/access`
+# `blocks/admin/access`
 
 Admin screens present credentials, role permissions and destructive confirmations.
 
@@ -14,8 +14,7 @@ Admin screens present credentials, role permissions and destructive confirmation
 ## Import
 
 ```tsx fragment — import-only example
-import { CredentialList } from "themelia-ui/admin/patterns/access"
-import "themelia-ui/admin/patterns/access.css"
+import { CredentialList } from "themelia-ui/blocks/admin/access"
 ```
 
 ## Composition
@@ -176,7 +175,7 @@ Preview route: Timelines, onboarding & admin — `/blocks-admin`
 ### Credential list
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-import { CredentialList } from "themelia-ui/admin/patterns/access"
+import { CredentialList } from "themelia-ui/blocks/admin/access"
 
 const CREDENTIALS = [
 	{ id: "1", name: "Production", value: "sk_live_4417a92f0b3d", displayValue: "sk_live_••••0b3d" },
@@ -194,7 +193,7 @@ export default function BlocksCredentials() {
 ### Role permissions
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-import { RolePermissions } from "themelia-ui/admin/patterns/access"
+import { RolePermissions } from "themelia-ui/blocks/admin/access"
 
 const GROUPS = [
 	{
@@ -233,7 +232,7 @@ export default function BlocksRoles() {
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
 import { KeyRoundIcon } from "lucide-react"
 
-import { SensitiveAction } from "themelia-ui/admin/patterns/access"
+import { SensitiveAction } from "themelia-ui/blocks/admin/access"
 import { Button } from "themelia-ui/base/buttons"
 
 export default function BlocksSensitive() {

package/docs/generated/components/{admin--patterns--commerce.md → blocks--admin--commerce.md}

@@ -1,6 +1,6 @@
 <!-- GENERATED by scripts/gen-consumer-docs.mjs — do not edit. -->
 
-# `admin/patterns/commerce`
+# `blocks/admin/commerce`
 
 Admin screens present orders, invoices, carts, fulfilment and loyalty.
 
@@ -14,13 +14,12 @@ Admin screens present orders, invoices, carts, fulfilment and loyalty.
 ## Import
 
 ```tsx fragment — import-only example
-import { AddressCard } from "themelia-ui/admin/patterns/commerce"
-import "themelia-ui/admin/patterns/commerce.css"
+import { AddressCard } from "themelia-ui/blocks/admin/commerce"
 ```
 
 ## Composition
 
-This module composes `base/action-menu`, `base/avatar`, `base/badge`, `base/buttons`, `base/choice-inputs`, `base/copyable`, `base/display`, `base/feedback`, `base/forms`, `base/item`, `base/navigation`, `base/structure`, `base/table`, `base/text-inputs`, `base/timeline`, `base/typography`, `base/value-inputs`, `patterns/timelines`.
+This module composes `base/action-menu`, `base/avatar`, `base/badge`, `base/buttons`, `base/choice-inputs`, `base/copyable`, `base/display`, `base/feedback`, `base/forms`, `base/item`, `base/navigation`, `base/structure`, `base/table`, `base/text-inputs`, `base/timeline`, `base/typography`, `base/value-inputs`, `blocks/timelines`.
 
 Application policy—routing, fetching, persistence, permissions, and translation—stays
 outside the package and arrives through the public props, callbacks, slots, or accessors below.
@@ -1825,7 +1824,7 @@ A performance tile. `change` is a comparison, and its tone is stated, not inferr
 | `label` | yes | `ReactNode` |  |
 | `value` | yes | `ReactNode` |  |
 | `change` | no | `ReactNode` |  |
-| `changeTone` | no | `"secondary" \| "success" \| "warning" \| "destructive"` |  |
+| `changeTone` | no | `Extract<SemanticTone, "secondary" \| "success" \| "warning" \| "destructive">` |  |
 
 ### `VendorStrings`
 
@@ -1861,7 +1860,7 @@ import {
 	SeoListing,
 	calculateSeoScore,
 	type SeoScoreInput,
-} from "themelia-ui/admin/patterns/commerce"
+} from "themelia-ui/blocks/admin/commerce"
 import { FormField } from "themelia-ui/base/forms"
 import { AdaptiveGrid, Stack } from "themelia-ui/base/structure"
 import { Input, Textarea } from "themelia-ui/base/text-inputs"
@@ -1903,7 +1902,7 @@ function ListingDemo({ initial }: { initial: SeoScoreInput }) {
 				strings={{ confirm: "Save changes" }}
 				onConfirm={() => setListing(draft)}
 			>
-				<Stack gap="lg">
+				<Stack>
 					<FormField label="Page title">
 						<Input value={draft.title ?? ""} onChange={event => setDraft({ ...draft, title: event.target.value })} />
 					</FormField>
@@ -1924,7 +1923,7 @@ function ListingDemo({ initial }: { initial: SeoScoreInput }) {
 
 export default function CatalogueSeo() {
 	return (
-		<AdaptiveGrid minColumnWidth="lg" gap="xl" align="start">
+		<AdaptiveGrid minColumnWidth="20rem" align="start">
 			<ListingDemo initial={LISTING} />
 			{/* Scored outside the card and handed in — the seam an editor uses. */}
 			<ListingDemo initial={WEAK_LISTING} />
@@ -1938,7 +1937,7 @@ export default function CatalogueSeo() {
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
 import { useState } from "react"
 
-import { InventorySection, type InventorySectionValue } from "themelia-ui/admin/patterns/commerce"
+import { InventorySection, type InventorySectionValue } from "themelia-ui/blocks/admin/commerce"
 import { Stack } from "themelia-ui/base/structure"
 
 const INVENTORY: InventorySectionValue = {
@@ -1980,7 +1979,7 @@ export default function CatalogueInventory() {
 ### VendorProfile
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-import { VendorProfile } from "themelia-ui/admin/patterns/commerce"
+import { VendorProfile } from "themelia-ui/blocks/admin/commerce"
 import { ContentBlock } from "themelia-ui/base/display"
 import { AdaptiveGrid } from "themelia-ui/base/structure"
 import { toast } from "themelia-ui/base/toaster"
@@ -1988,7 +1987,7 @@ import { Number as NumberValue } from "themelia-ui/primitives"
 
 export default function CatalogueVendor() {
 	return (
-		<AdaptiveGrid minColumnWidth="lg" gap="xl" align="start">
+		<AdaptiveGrid minColumnWidth="20rem" align="start">
 			<ContentBlock surface="bordered">
 				<VendorProfile
 					name="Northwind Traders"
@@ -2029,7 +2028,7 @@ export default function CatalogueVendor() {
 ### BookingCard
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-import { BookingCard } from "themelia-ui/admin/patterns/commerce"
+import { BookingCard } from "themelia-ui/blocks/admin/commerce"
 import { Badge } from "themelia-ui/base/badge"
 import { Stack } from "themelia-ui/base/structure"
 import { toast } from "themelia-ui/base/toaster"
@@ -2060,7 +2059,7 @@ export default function CatalogueBooking() {
 ### CartSummary
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-import { CartSummary, type CartLine } from "themelia-ui/admin/patterns/commerce"
+import { CartSummary, type CartLine } from "themelia-ui/blocks/admin/commerce"
 import { Stack } from "themelia-ui/base/structure"
 import { toast } from "themelia-ui/base/toaster"
 
@@ -2090,7 +2089,7 @@ export default function CartSummaryExample() {
 ### TaxBreakdown
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-import { TaxBreakdown } from "themelia-ui/admin/patterns/commerce"
+import { TaxBreakdown } from "themelia-ui/blocks/admin/commerce"
 import { Stack } from "themelia-ui/base/structure"
 
 export default function TaxBreakdownExample() {
@@ -2113,7 +2112,7 @@ export default function TaxBreakdownExample() {
 ### DiscountStack
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-import { DiscountStack } from "themelia-ui/admin/patterns/commerce"
+import { DiscountStack } from "themelia-ui/blocks/admin/commerce"
 import { Stack } from "themelia-ui/base/structure"
 
 export default function DiscountStackExample() {
@@ -2136,7 +2135,7 @@ export default function DiscountStackExample() {
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
 import { useState } from "react"
 
-import { CodeEntry } from "themelia-ui/admin/patterns/commerce"
+import { CodeEntry } from "themelia-ui/blocks/admin/commerce"
 import { AdaptiveGrid, GridCell } from "themelia-ui/base/structure"
 
 function CodeEntryDemo({ gift = false }: { gift?: boolean }) {
@@ -2165,7 +2164,7 @@ function CodeEntryDemo({ gift = false }: { gift?: boolean }) {
 export default function CodeEntryExample() {
 	/* Two instances: empty on the left, applied on the right, covering both kinds. */
 	return (
-		<AdaptiveGrid minColumnWidth="lg" gap="xl">
+		<AdaptiveGrid minColumnWidth="20rem">
 			<GridCell>
 				<CodeEntryDemo />
 			</GridCell>
@@ -2180,7 +2179,7 @@ export default function CodeEntryExample() {
 ### OrderStatusCard
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-import { OrderStatusCard, type OrderEvent } from "themelia-ui/admin/patterns/commerce"
+import { OrderStatusCard, type OrderEvent } from "themelia-ui/blocks/admin/commerce"
 import { Stack } from "themelia-ui/base/structure"
 
 const ORDER_EVENTS: OrderEvent[] = [
@@ -2203,7 +2202,7 @@ export default function OrderStatusExample() {
 ### ShipmentTracking
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-import { ShipmentTracking } from "themelia-ui/admin/patterns/commerce"
+import { ShipmentTracking } from "themelia-ui/blocks/admin/commerce"
 import { Stack } from "themelia-ui/base/structure"
 
 export default function ShipmentTrackingExample() {
@@ -2230,7 +2229,7 @@ export default function ShipmentTrackingExample() {
 ### RefundStatus
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-import { RefundStatus } from "themelia-ui/admin/patterns/commerce"
+import { RefundStatus } from "themelia-ui/blocks/admin/commerce"
 import { Stack } from "themelia-ui/base/structure"
 
 export default function RefundStatusExample() {
@@ -2251,7 +2250,7 @@ export default function RefundStatusExample() {
 ### InvoiceHeader
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-import { InvoiceHeader } from "themelia-ui/admin/patterns/commerce"
+import { InvoiceHeader } from "themelia-ui/blocks/admin/commerce"
 import { Stack } from "themelia-ui/base/structure"
 
 export default function InvoiceHeaderExample() {
@@ -2274,7 +2273,7 @@ export default function InvoiceHeaderExample() {
 ### InvoiceLineItems
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-import { InvoiceLineItems } from "themelia-ui/admin/patterns/commerce"
+import { InvoiceLineItems } from "themelia-ui/blocks/admin/commerce"
 
 export default function InvoiceLineItemsExample() {
 	return (
@@ -2294,13 +2293,13 @@ export default function InvoiceLineItemsExample() {
 ### InvoiceMini
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-import { InvoiceMini } from "themelia-ui/admin/patterns/commerce"
+import { InvoiceMini } from "themelia-ui/blocks/admin/commerce"
 import { ContentBlock } from "themelia-ui/base/display"
 import { AdaptiveGrid, GridCell } from "themelia-ui/base/structure"
 
 export default function InvoiceMiniExample() {
 	return (
-		<AdaptiveGrid minColumnWidth="md" gap="xl">
+		<AdaptiveGrid>
 			<GridCell>
 				<ContentBlock surface="bordered"><InvoiceMini invoiceNumber="INV-0114" status="overdue" customerName="Adventure Park Bansko" lineCount={3} dueAt="28 Aug" total="3,120.00 EUR" /></ContentBlock>
 			</GridCell>
@@ -2318,7 +2317,7 @@ export default function InvoiceMiniExample() {
 ### AddressCard
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-import { AddressCard } from "themelia-ui/admin/patterns/commerce"
+import { AddressCard } from "themelia-ui/blocks/admin/commerce"
 import { Stack } from "themelia-ui/base/structure"
 import { toast } from "themelia-ui/base/toaster"
 
@@ -2344,7 +2343,7 @@ export default function AddressCardExample() {
 ### PaymentMethodCard
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-import { PaymentMethodCard } from "themelia-ui/admin/patterns/commerce"
+import { PaymentMethodCard } from "themelia-ui/blocks/admin/commerce"
 import { Stack } from "themelia-ui/base/structure"
 import { toast } from "themelia-ui/base/toaster"
 
@@ -2362,7 +2361,7 @@ export default function PaymentMethod() {
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
 import { BanknoteIcon, CreditCardIcon } from "lucide-react"
 
-import { PaymentTimeline } from "themelia-ui/admin/patterns/commerce"
+import { PaymentTimeline } from "themelia-ui/blocks/admin/commerce"
 import { Stack } from "themelia-ui/base/structure"
 
 export default function PaymentTimelineExample() {
@@ -2385,7 +2384,7 @@ export default function PaymentTimelineExample() {
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
 import { CheckIcon, CloudIcon, HeadphonesIcon, ShieldIcon } from "lucide-react"
 
-import { SubscriptionSummary } from "themelia-ui/admin/patterns/commerce"
+import { SubscriptionSummary } from "themelia-ui/blocks/admin/commerce"
 import { Stack } from "themelia-ui/base/structure"
 import { toast } from "themelia-ui/base/toaster"
 
@@ -2415,12 +2414,12 @@ export default function SubscriptionSummaryExample() {
 ### InventoryLevel
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-import { InventoryLevel } from "themelia-ui/admin/patterns/commerce"
+import { InventoryLevel } from "themelia-ui/blocks/admin/commerce"
 import { AdaptiveGrid, GridCell } from "themelia-ui/base/structure"
 
 export default function InventoryLevelExample() {
 	return (
-		<AdaptiveGrid minColumnWidth="lg" gap="xl">
+		<AdaptiveGrid minColumnWidth="20rem">
 			<GridCell>
 				<InventoryLevel productName="Merino crew neck" variant="Medium / Charcoal" stock={8} reorderLevel={12} maxStock={120} lastRestocked="02 Aug" />
 			</GridCell>
@@ -2435,7 +2434,7 @@ export default function InventoryLevelExample() {
 ### UpcomingBookings
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-import { UpcomingBookings, type Booking } from "themelia-ui/admin/patterns/commerce"
+import { UpcomingBookings, type Booking } from "themelia-ui/blocks/admin/commerce"
 import { Stack } from "themelia-ui/base/structure"
 
 const BOOKINGS: Booking[] = [
@@ -2456,7 +2455,7 @@ export default function UpcomingBookingsExample() {
 ### LoyaltyPoints
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-import { LoyaltyPoints } from "themelia-ui/admin/patterns/commerce"
+import { LoyaltyPoints } from "themelia-ui/blocks/admin/commerce"
 import { Stack } from "themelia-ui/base/structure"
 import { toast } from "themelia-ui/base/toaster"
 
@@ -2482,12 +2481,12 @@ export default function LoyaltyPointsExample() {
 ### Two statuses, not one
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-import { OrderHeader } from "themelia-ui/admin/patterns/commerce"
+import { OrderHeader } from "themelia-ui/blocks/admin/commerce"
 import { Stack } from "themelia-ui/base/structure"
 
 export default function OrderStatusAxes() {
 	return (
-		<Stack gap="xl">
+		<Stack>
 			<OrderHeader
 				orderNumber="1036"
 				paymentStatus="refunded"
@@ -2511,7 +2510,7 @@ export default function OrderStatusAxes() {
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
 import { BanIcon } from "lucide-react"
 
-import { FulfillmentGroup, type OrderLine } from "themelia-ui/admin/patterns/commerce"
+import { FulfillmentGroup, type OrderLine } from "themelia-ui/blocks/admin/commerce"
 import { Stack } from "themelia-ui/base/structure"
 
 const LINES: OrderLine[] = [
@@ -2546,7 +2545,7 @@ const LINES: OrderLine[] = [
 
 export default function OrderFulfillment() {
 	return (
-		<Stack gap="xl">
+		<Stack>
 			<FulfillmentGroup
 				status="unfulfilled"
 				location="Bul Bulgaria 111"
@@ -2573,7 +2572,7 @@ export default function OrderFulfillment() {
 ### A line, and what a consumer attaches to it
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-import { FulfillmentGroup, OrderLineItem, type OrderLine } from "themelia-ui/admin/patterns/commerce"
+import { FulfillmentGroup, OrderLineItem, type OrderLine } from "themelia-ui/blocks/admin/commerce"
 
 const PERSONALISED: OrderLine = {
 	id: "4",
@@ -2604,7 +2603,7 @@ export default function OrderLineItemExample() {
 ### OrderSummary
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-import { OrderSummary } from "themelia-ui/admin/patterns/commerce"
+import { OrderSummary } from "themelia-ui/blocks/admin/commerce"
 
 export default function OrderSummaryExample() {
 	return (
@@ -2629,7 +2628,7 @@ export default function OrderSummaryExample() {
 ### OrderTransactions
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-import { OrderTransactions, type Transaction } from "themelia-ui/admin/patterns/commerce"
+import { OrderTransactions, type Transaction } from "themelia-ui/blocks/admin/commerce"
 
 const TRANSACTIONS: Transaction[] = [
 	{
@@ -2674,12 +2673,12 @@ export default function OrderTransactionsExample() {
 ### Customer and addresses
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-import { OrderCustomer } from "themelia-ui/admin/patterns/commerce"
+import { OrderCustomer } from "themelia-ui/blocks/admin/commerce"
 import { Grid, GridCell } from "themelia-ui/base/structure"
 
 export default function OrderCustomerExample() {
 	return (
-		<Grid columns={{ base: 1, md: 2 }} gap="xl">
+		<Grid columns={{ base: 1, md: 2 }}>
 			<GridCell>
 				<OrderCustomer
 					name="Alice Mercer"

package/docs/generated/components/{patterns--analytics.md → blocks--analytics.md}

@@ -1,6 +1,6 @@
 <!-- GENERATED by scripts/gen-consumer-docs.mjs — do not edit. -->
 
-# `patterns/analytics`
+# `blocks/analytics`
 
 Figures are summarised — metric tiles, trends, comparisons, a heatmap or a titled chart card.
 
@@ -14,8 +14,7 @@ Figures are summarised — metric tiles, trends, comparisons, a heatmap or a tit
 ## Import
 
 ```tsx fragment — import-only example
-import { ActivityHeatmap } from "themelia-ui/patterns/analytics"
-import "themelia-ui/patterns/analytics.css"
+import { ActivityHeatmap } from "themelia-ui/blocks/analytics"
 ```
 
 ## Optional peers
@@ -96,7 +95,7 @@ date-fns locale: the heatmap needs abbreviations sized to its columns.
 | --- | :-: | --- | --- |
 | `metricErrorLabel` | yes | `string` | Shown in place of the figure when `error` is set. |
 | `metricProgressLabel` | yes | `(label: string) => string` | Names the `colored` variant's progress bar for a screen reader. |
-| `metricInfoLabel` | no | `string` | Names the info affordance beside a label that carries a `tooltip`. Optional for<br>backward compatibility; the default applies. |
+| `metricInfoLabel` | yes | `string` | Names the info affordance beside a label that carries a `tooltip`. |
 
 ### `ChartCard`
 
@@ -573,7 +572,7 @@ Preview route: Analytics — `/analytics`
 ### Metric bar
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-import { MetricBar } from "themelia-ui/patterns/analytics"
+import { MetricBar } from "themelia-ui/blocks/analytics"
 
 import { METRICS } from "./data"
 
@@ -591,7 +590,7 @@ export default function AnalyticsBar() {
 ### Metric grid
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-import { MetricGrid } from "themelia-ui/patterns/analytics"
+import { MetricGrid } from "themelia-ui/blocks/analytics"
 
 import { METRICS } from "./data"
 
@@ -606,13 +605,13 @@ export default function AnalyticsGrid() {
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
 import { Stack } from "themelia-ui/base/structure"
-import { Metric, MetricGrid } from "themelia-ui/patterns/analytics"
+import { Metric, MetricGrid } from "themelia-ui/blocks/analytics"
 
 import { CHURN, FULFILMENT, ORDERS, REVENUE } from "./data"
 
 export default function AnalyticsVariants() {
 	return (
-		<Stack gap="xl">
+		<Stack>
 			<MetricGrid metrics={[REVENUE, CHURN]} variant="bordered" columns={2} />
 			<MetricGrid metrics={[ORDERS, FULFILMENT]} variant="compact" columns={2} />
 			<MetricGrid metrics={[REVENUE, CHURN]} variant="accent" columns={2} />
@@ -626,7 +625,7 @@ export default function AnalyticsVariants() {
 ### Comparison
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-import { MetricComparison } from "themelia-ui/patterns/analytics"
+import { MetricComparison } from "themelia-ui/blocks/analytics"
 
 export default function AnalyticsComparison() {
 	return (
@@ -643,7 +642,7 @@ export default function AnalyticsComparison() {
 ### Gradient hero
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-import { MetricGradient } from "themelia-ui/patterns/analytics"
+import { MetricGradient } from "themelia-ui/blocks/analytics"
 
 import { SERIES } from "./data"
 
@@ -666,7 +665,7 @@ export default function AnalyticsHero() {
 ### Micro grid
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-import { MetricMicroGrid } from "themelia-ui/patterns/analytics"
+import { MetricMicroGrid } from "themelia-ui/blocks/analytics"
 
 const MICRO = [
 	{ label: "Sessions", value: "18.2k", data: [4, 9, 6, 12, 10, 17] },
@@ -690,7 +689,7 @@ export default function AnalyticsMicro() {
 import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
 
 import type { ChartConfig } from "themelia-ui/base/chart"
-import { ChartCard } from "themelia-ui/patterns/analytics"
+import { ChartCard } from "themelia-ui/blocks/analytics"
 
 import { SERIES } from "./data"
 
@@ -721,7 +720,7 @@ export default function AnalyticsChartCard() {
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
 import {
 	ActivityHeatmap, type ActivityHeatmapDay, type ActivityLevel,
-} from "themelia-ui/patterns/analytics"
+} from "themelia-ui/blocks/analytics"
 
 /* A fixed, cyclic pattern, not random data, for stable visual baselines. */
 const HEATMAP: ActivityHeatmapDay[] = Array.from({ length: 182 }, (_, index) => {
@@ -742,7 +741,7 @@ export default function AnalyticsHeatmap() {
 ### Time ruler
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-import { TimeRuler } from "themelia-ui/patterns/analytics"
+import { TimeRuler } from "themelia-ui/blocks/analytics"
 
 const HOURS = [
 	0, 0, 0, 0, 1, 2, 5, 9, 14, 18, 22, 25,

package/docs/generated/components/{patterns--onboarding.md → blocks--onboarding.md}

@@ -1,6 +1,6 @@
 <!-- GENERATED by scripts/gen-consumer-docs.mjs — do not edit. -->
 
-# `patterns/onboarding`
+# `blocks/onboarding`
 
 A checklist tracks setup tasks the user completes over time.
 
@@ -8,14 +8,13 @@ A checklist tracks setup tasks the user completes over time.
 
 - **Use when:** A checklist tracks setup tasks the user completes over time.
 - **Avoid when:** The steps are one linear flow with a current position.
-- **Consider instead:** `patterns/timelines`
+- **Consider instead:** `blocks/timelines`
 - **Stability:** stable.
 
 ## Import
 
 ```tsx fragment — import-only example
-import { Checklist } from "themelia-ui/patterns/onboarding"
-import "themelia-ui/patterns/onboarding.css"
+import { Checklist } from "themelia-ui/blocks/onboarding"
 ```
 
 ## Composition
@@ -106,7 +105,7 @@ import { Badge } from "themelia-ui/base/badge"
 import { Button } from "themelia-ui/base/buttons"
 import { Stack } from "themelia-ui/base/structure"
 import { Text } from "themelia-ui/base/typography"
-import { Checklist } from "themelia-ui/patterns/onboarding"
+import { Checklist } from "themelia-ui/blocks/onboarding"
 
 export default function BlocksChecklist() {
 	return (
@@ -120,11 +119,11 @@ export default function BlocksChecklist() {
 					title: "Connect a data source",
 					badge: <Badge tone="warning">Required</Badge>,
 					content: (
-						<Stack gap="md">
+						<Stack gap="sm">
 							<Text type="secondary">Pick where your data lives. You can add more later.</Text>
 							<Stack direction="horizontal" gap="sm" wrap>
 								<Button tone="primary">Connect Postgres</Button>
-								<Button tone="secondary" buttonStyle="outline">Upload a CSV</Button>
+								<Button tone="secondary" appearance="outline">Upload a CSV</Button>
 							</Stack>
 						</Stack>
 					),

package/docs/generated/components/{patterns--timelines.md → blocks--timelines.md}

@@ -1,6 +1,6 @@
 <!-- GENERATED by scripts/gen-consumer-docs.mjs — do not edit. -->
 
-# `patterns/timelines`
+# `blocks/timelines`
 
 A sequence is presented as changelog entries, milestones, or a step tracker.
 
@@ -14,8 +14,7 @@ A sequence is presented as changelog entries, milestones, or a step tracker.
 ## Import
 
 ```tsx fragment — import-only example
-import { ChangelogTimeline } from "themelia-ui/patterns/timelines"
-import "themelia-ui/patterns/timelines.css"
+import { ChangelogTimeline } from "themelia-ui/blocks/timelines"
 ```
 
 ## Composition
@@ -231,7 +230,7 @@ Preview route: Timelines, onboarding & admin — `/blocks-admin`
 ### Changelog
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-import { ChangelogTimeline, type ChangelogEntry } from "themelia-ui/patterns/timelines"
+import { ChangelogTimeline, type ChangelogEntry } from "themelia-ui/blocks/timelines"
 
 const CHANGELOG: ChangelogEntry[] = [
 	{
@@ -277,7 +276,7 @@ export default function BlocksChangelog() {
 ### Milestones
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-import { MilestonesTimeline, type Milestone } from "themelia-ui/patterns/timelines"
+import { MilestonesTimeline, type Milestone } from "themelia-ui/blocks/timelines"
 
 const MILESTONES: Milestone[] = [
 	{ id: "1", title: "Discovery", description: "Interviews with eight teams.", status: "completed", dueDate: "12 Jun" },
@@ -298,7 +297,7 @@ export default function BlocksMilestones() {
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
 import { Stack } from "themelia-ui/base/structure"
-import { Steps, StepsBar, type Step } from "themelia-ui/patterns/timelines"
+import { Steps, StepsBar, type Step } from "themelia-ui/blocks/timelines"
 
 const STEPS: Step[] = [
 	{ id: "1", title: "Create your workspace", description: "Name it and pick a region.", status: "completed", timestamp: "Done 14 Aug" },
@@ -309,7 +308,7 @@ const STEPS: Step[] = [
 
 export default function BlocksSteps() {
 	return (
-		<Stack gap="2xl">
+		<Stack>
 			<StepsBar steps={STEPS} />
 			<Steps steps={STEPS} />
 		</Stack>