@signal9/era-ui 10.1.0 → 12.0.0

package/dist/ai/tool/tool-header.svelte

@@ -14,7 +14,7 @@
 </script>
 
 <Step.Summary>
-	<Wrench class="size-(--era-h-icon) shrink-0" aria-hidden="true" />
+	<Wrench class="size-icon shrink-0" aria-hidden="true" />
 	<span class="truncate text-fg">{type}</span>
 	{@render children?.()}
 </Step.Summary>

package/dist/ai/web-preview/web-preview.svelte

@@ -15,19 +15,14 @@
 	let nonce = $state(0);
 </script>
 
-<div
-	class={cn(
-		'flex min-h-0 flex-col overflow-hidden rounded-(--era-rd-bar) bg-(--era-surface-bg) shadow-(--era-shadow-lg)',
-		className
-	)}
->
-	<Bar size="control" class="shrink-0 gap-(--era-gap) rounded-none">
+<div class={cn('flex min-h-0 flex-col overflow-hidden rounded-bar bg-well shadow-lg', className)}>
+	<Bar size="control" class="shrink-0 gap-gutter rounded-none">
 		<Button icon size="chip" aria-label="Reload" onclick={() => (nonce += 1)}>
-			<RotateCw class="size-(--era-h-icon)" />
+			<RotateCw class="size-icon" />
 		</Button>
 		<Input
 			bind:value={draft}
-			class="h-(--era-h-chip) flex-1"
+			class="h-chip flex-1"
 			placeholder="https://…"
 			onkeydown={(e: KeyboardEvent) => {
 				if (e.key === 'Enter') {

package/dist/ai/workflow/canvas.svelte

@@ -12,7 +12,7 @@
 
 <!-- Thin era skin over Svelte Flow — the graph engine is xyflow's. This file
      lives on its own subpath so the dependency stays opt-in. -->
-<SvelteFlow bind:nodes bind:edges fitView class="rounded-(--era-rd-bar) shadow-(--era-shadow)">
+<SvelteFlow bind:nodes bind:edges fitView class="rounded-bar shadow-sm">
 	<Background bgColor="var(--color-1)" />
 	<Controls />
 	{@render children?.()}

package/dist/ai/workflow/node.svelte

@@ -12,18 +12,18 @@
 
 <div
 	class={cn(
-		'flex w-56 flex-col overflow-hidden rounded-(--era-rd-control) bg-(--era-surface-bg-elevated) text-body shadow-(--era-shadow-lg)',
+		'flex w-56 flex-col overflow-hidden rounded-control bg-elevated text-body shadow-lg',
 		className
 	)}
 >
 	<Handle type="target" position={Position.Left} />
 	{#if title}
 		<div
-			class="flex h-(--era-h-control) items-center border-b border-divider-faded px-(--era-inset-control) font-medium text-bright"
+			class="flex h-control items-center border-b border-divider-faded px-inset-control font-medium text-bright"
 		>
 			{title}
 		</div>
 	{/if}
-	<div class="p-(--era-inset-control) text-fg">{@render children?.()}</div>
+	<div class="p-inset-control text-fg">{@render children?.()}</div>
 	<Handle type="source" position={Position.Right} />
 </div>

package/dist/apps/llm-shell/llm-shell.svelte

@@ -143,7 +143,7 @@
 	<!-- Thread -->
 	<div class="flex min-w-0 flex-1 flex-col">
 		{#if runStatus !== 'idle'}
-			<div class="shrink-0 border-b border-divider px-(--era-pad-card) py-gutter">
+			<div class="shrink-0 border-b border-divider px-card py-gutter">
 				<AI.RunStatus.Root
 					status={runStatus}
 					tools={{
@@ -187,9 +187,9 @@
 			<AI.Conversation.ScrollButton />
 		</AI.Conversation.Root>
 
-		<div class="mx-auto w-full max-w-2xl shrink-0 p-(--era-pad-card) pt-0">
+		<div class="mx-auto w-full max-w-2xl shrink-0 p-card pt-0">
 			{#if active && active.messages.length === 0 && suggestions.length > 0}
-				<div class="pb-(--era-gap)">
+				<div class="pb-gutter">
 					<AI.Suggestions.Root>
 						{#each suggestions as s (s)}
 							<AI.Suggestions.Suggestion suggestion={s} onSelect={(t) => onSend?.(t)} />
@@ -265,7 +265,7 @@
 			{#snippet expanded()}
 				{@const tool = block.tools.find((t) => t.id === openChip)}
 				{#if tool}
-					<Card tone="well" class="flex min-w-0 flex-col gap-(--era-pad-panel) p-(--era-pad-panel)">
+					<Card tone="well" class="flex min-w-0 flex-col gap-panel p-panel">
 						<AI.Tool.Input input={tool.input} />
 						<AI.Tool.Output output={tool.output} />
 					</Card>

package/dist/apps/notes/notes.svelte

@@ -239,13 +239,13 @@
 
 {#snippet paneHeader()}
 	{#if selected}
-		<div class="relative flex min-w-0 items-center gap-(--era-gap)" data-pane-control>
+		<div class="relative flex min-w-0 items-center gap-gutter" data-pane-control>
 			{@render iconPicker(selected)}
 			{@render titleField(selected, 'field-sizing-content max-w-56 min-w-0 text-center')}
 			<!-- Absolutely positioned, so the badge appearing never nudges the
 			     centred title; empty when the status is quiet, which costs
 			     nothing off-flow. -->
-			<span class="absolute top-1/2 left-full ml-(--era-gap) -translate-y-1/2">
+			<span class="absolute top-1/2 left-full ml-gutter -translate-y-1/2">
 				{@render statusBadge()}
 			</span>
 		</div>
@@ -303,7 +303,7 @@
 			     one, and the bar's + is always within reach. Two competing CTAs for
 			     an empty list reads as indecision. -->
 			<div
-				class="flex flex-1 flex-col items-center justify-center gap-gutter p-content text-center"
+				class="flex flex-1 flex-col items-center justify-center gap-gutter p-section text-center"
 			>
 				<p class="text-muted">{query ? 'No matches' : 'No notes yet'}</p>
 			</div>
@@ -331,8 +331,8 @@
 									{#snippet child({ props })}
 										<div
 											{...props}
-											class="group/row flex h-control cursor-pointer items-center gap-(--era-pill-inset-control) rounded-control px-(--era-pill-inset-control) leading-none {current
-												? 'bg-hover text-bright shadow-(--era-shadow-pressed)'
+											class="group/row flex h-control cursor-pointer items-center gap-pill-inset-control rounded-control px-pill-inset-control leading-none {current
+												? 'bg-hover text-bright shadow-pressed'
 												: 'hover:bg-highlight hover:shadow-highlight'}"
 											role="option"
 											aria-selected={current}
@@ -351,7 +351,7 @@
 												{#if note.icon}
 													{note.icon}
 												{:else}
-													<FileText class="size-(--era-glyph-pill) text-muted" />
+													<FileText class="size-glyph-pill text-muted" />
 												{/if}
 											</span>
 
@@ -370,7 +370,7 @@
 												{formatAge(note.updatedAt)}
 											</span>
 											<span
-												class="hidden shrink-0 items-center gap-(--era-pill-inset-control) group-hover/row:flex"
+												class="hidden shrink-0 items-center gap-pill-inset-control group-hover/row:flex"
 											>
 												<Button
 													icon
@@ -467,7 +467,7 @@
 				{/key}
 			</div>
 		{:else}
-			<div class="flex flex-1 flex-col items-center justify-center gap-gutter p-content">
+			<div class="flex flex-1 flex-col items-center justify-center gap-gutter p-section">
 				<p class="text-muted">
 					{store.notes.length === 0 ? 'Create a note to get started' : 'Select a note'}
 				</p>

package/dist/dev/audit/audits/even-container-padding.js

@@ -16,7 +16,7 @@
  * its copy button — so flagging it would be noise. Nothing has a reason to sit
  * closer to its top edge than its bottom.
  *
- * `p-content` is the one earned exception and is exempt by construction rather
+ * `p-section` is the one earned exception and is exempt by construction rather
  * than by name: it subtracts the heading ROW's own slack from its top padding,
  * so it only ever appears on a full-bleed section with no radius, and this
  * audit looks only at rounded boxes — the ones that read as a container.
@@ -34,7 +34,7 @@ export const evenContainerPadding = {
         const s = getComputedStyle(el);
         // Rounded boxes only: a radius is what makes a box read as a container
         // with edges, and it also excludes the full-bleed page sections whose
-        // top padding is legitimately reduced (see p-content).
+        // top padding is legitimately reduced (see p-section).
         if (parseFloat(s.borderTopLeftRadius) <= 0)
             return null;
         const top = parseFloat(s.paddingTop) || 0;

package/dist/dev/audit/audits/single-glyph-square.js

@@ -5,8 +5,8 @@ import { BOUNDED_TIER_MAX } from '../../measure.js';
  *
  * Rule 5: every element that can hold a single glyph carries a min-width equal to
  * its tier height, so one character renders as a perfect square (or circle, once
- * rounded) instead of a skinny vertical pill. Icon buttons take min-w-(--era-h-control);
- * Badge, Chip and the KV value cell take min-w-(--era-h-pill).
+ * rounded) instead of a skinny vertical pill. Icon buttons take min-w-control;
+ * Badge, Chip and the KV value cell take min-w-pill.
  *
  * Drop the min-width and nothing looks wrong until content happens to BE one
  * character — a badge showing "1", a count that ticks from 10 down to 9 — and the

package/dist/dev/audit-overlay.svelte

@@ -59,10 +59,10 @@
 
 {#if dev && open}
 	<div
-		class="fixed right-4 bottom-4 z-50 flex max-h-[70vh] w-96 flex-col overflow-hidden rounded-(--era-rd-control) bg-surface font-mono text-body shadow-[inset_0_0_0_0.5px_var(--color-border),var(--era-shadow)]"
+		class="fixed right-4 bottom-4 z-50 flex max-h-[70vh] w-96 flex-col overflow-hidden rounded-control bg-surface font-mono text-body shadow-[inset_0_0_0_0.5px_var(--color-border),var(--era-shadow)]"
 	>
 		<header
-			class="flex items-center gap-(--era-icon-inset-chip) px-(--era-inset-chip) py-(--era-gap) shadow-[inset_0_-0.5px_0_0_var(--color-border)]"
+			class="flex items-center gap-icon-inset-chip px-inset-chip py-gutter shadow-[inset_0_-0.5px_0_0_var(--color-border)]"
 		>
 			<strong class="text-bright">audits</strong>
 			<span class="text-muted">
@@ -81,7 +81,7 @@
 				{@const enabled = registry.isEnabled(r.audit.id)}
 				<details open={r.issues.length > 0}>
 					<summary
-						class="flex cursor-pointer items-center gap-(--era-icon-inset-chip) px-(--era-inset-chip) py-(--era-gap) hover:bg-(--era-highlight)"
+						class="flex cursor-pointer items-center gap-icon-inset-chip px-inset-chip py-gutter hover:bg-highlight"
 					>
 						<input
 							type="checkbox"
@@ -95,13 +95,13 @@
 						</span>
 					</summary>
 					{#if r.issues.length === 0}
-						<p class="px-(--era-inset-chip) py-(--era-gap) text-muted">
+						<p class="px-inset-chip py-gutter text-muted">
 							{r.audit.description}
 						</p>
 					{:else}
 						{#each r.issues as issue, i (i)}
 							<button
-								class="flex w-full items-start gap-(--era-icon-inset-chip) px-(--era-inset-chip) py-(--era-gap) text-left hover:bg-(--era-highlight)"
+								class="flex w-full items-start gap-icon-inset-chip px-inset-chip py-gutter text-left hover:bg-highlight"
 								onclick={() => highlight(issue.element)}
 							>
 								<span class="text-destructive">●</span>
@@ -114,9 +114,9 @@
 		</div>
 
 		<footer
-			class="flex items-center gap-(--era-gap) px-(--era-inset-chip) py-(--era-gap) text-muted shadow-[inset_0_0.5px_0_0_var(--color-border)]"
+			class="flex items-center gap-gutter px-inset-chip py-gutter text-muted shadow-[inset_0_0.5px_0_0_var(--color-border)]"
 		>
-			<kbd class="rounded-(--era-rd-icon) bg-hover px-(--era-inset-chip) text-fg">
+			<kbd class="rounded-icon bg-hover px-inset-chip text-fg">
 				{isMac ? '⌘' : 'ctrl'}⇧{key.toUpperCase()}
 			</kbd>
 			<span>toggle</span>

package/dist/docs/css-utilities.d.ts

@@ -16,6 +16,37 @@ export interface CssUtility {
     /** The `@utility` block verbatim, as authored. */
     css: string;
 }
+/**
+ * `@theme` namespace → the utility prefixes it generates.
+ *
+ * Half of era's public class API is registered this way rather than as
+ * `@utility` blocks — `rounded-control` from `--radius-control`, `shadow-lg`,
+ * `bg-highlight`, `text-body`, and the whole spacing scale. They are classes a
+ * consumer writes exactly like the others, and until this table existed the
+ * doc pipeline could not see any of them: `@utility` was the only thing it
+ * parsed, so era's most-used names were also its least-documented.
+ *
+ * The list per namespace is the SPELLINGS WORTH DOCUMENTING, not everything
+ * Tailwind derives — a spacing token really does generate `mt-`, `gap-x-`,
+ * `inset-`, `translate-` and a dozen more, and printing all of them per name
+ * would bury the point. The prose says the rest.
+ */
+export declare const THEME_CLASS_PREFIXES: Record<string, string[]>;
+/** Every prefix a namespace really generates — the map the codemod needs. */
+export declare const THEME_ALL_PREFIXES: Record<string, string[]>;
+/**
+ * The classes one `@theme` key generates, each with the utility PREFIX that
+ * generated it — `--spacing-inset-control` → `{ prefix: 'px', name:
+ * 'px-inset-control' }`. The prefix cannot be recovered from the name (both
+ * `px` and `px-inset` are hyphen-splits of `px-inset-control`), and the codemod
+ * matches on it, so it is returned rather than re-derived.
+ */
+export declare function themeKeyClassEntries(themeKey: string, prefixes?: Record<string, string[]>): {
+    prefix: string;
+    name: string;
+}[];
+/** The class names one `@theme` key generates, e.g. `--radius-control` → `rounded-control`. */
+export declare function themeKeyClasses(themeKey: string, prefixes?: Record<string, string[]>): string[];
 /**
  * @param sources stylesheet text keyed by path relative to src/lib/styles
  *   (e.g. `index.css`, `surfaces/glass.css`).

package/dist/docs/css-utilities.js

@@ -19,6 +19,64 @@
  */
 /** Files whose utilities are library API. Order fixes the doc's order. */
 const FILE_ORDER = ['index.css', 'surfaces/glass.css'];
+/**
+ * `@theme` namespace → the utility prefixes it generates.
+ *
+ * Half of era's public class API is registered this way rather than as
+ * `@utility` blocks — `rounded-control` from `--radius-control`, `shadow-lg`,
+ * `bg-highlight`, `text-body`, and the whole spacing scale. They are classes a
+ * consumer writes exactly like the others, and until this table existed the
+ * doc pipeline could not see any of them: `@utility` was the only thing it
+ * parsed, so era's most-used names were also its least-documented.
+ *
+ * The list per namespace is the SPELLINGS WORTH DOCUMENTING, not everything
+ * Tailwind derives — a spacing token really does generate `mt-`, `gap-x-`,
+ * `inset-`, `translate-` and a dozen more, and printing all of them per name
+ * would bury the point. The prose says the rest.
+ */
+export const THEME_CLASS_PREFIXES = {
+    radius: ['rounded'],
+    shadow: ['shadow'],
+    text: ['text'],
+    leading: ['leading'],
+    ease: ['ease'],
+    color: ['bg', 'text', 'border'],
+    spacing: ['p', 'px', 'py', 'gap']
+};
+/** Every prefix a namespace really generates — the map the codemod needs. */
+export const THEME_ALL_PREFIXES = {
+    ...THEME_CLASS_PREFIXES,
+    radius: [
+        'rounded',
+        ...'t,r,b,l,tl,tr,bl,br,s,e,ss,se,es,ee'.split(',').map((s) => `rounded-${s}`)
+    ],
+    color: [
+        'bg',
+        'text',
+        'border',
+        'fill',
+        'stroke',
+        'ring',
+        'outline',
+        'divide',
+        'decoration',
+        'caret',
+        'accent',
+        'from',
+        'via',
+        'to'
+    ],
+    spacing: [
+        'p,px,py,pt,pr,pb,pl,ps,pe',
+        'm,mx,my,mt,mr,mb,ml,ms,me',
+        'gap,gap-x,gap-y',
+        'w,h,size,min-w,min-h,max-w,max-h',
+        'inset,inset-x,inset-y,top,right,bottom,left,start,end',
+        'translate,translate-x,translate-y,scroll-m,scroll-p,basis,indent'
+    ]
+        .join(',')
+        .split(',')
+};
 function cleanComment(raw) {
     return raw
         .split('\n')
@@ -86,6 +144,62 @@ function parseFile(file, source) {
     }
     return out;
 }
+/**
+ * The classes one `@theme` key generates, each with the utility PREFIX that
+ * generated it — `--spacing-inset-control` → `{ prefix: 'px', name:
+ * 'px-inset-control' }`. The prefix cannot be recovered from the name (both
+ * `px` and `px-inset` are hyphen-splits of `px-inset-control`), and the codemod
+ * matches on it, so it is returned rather than re-derived.
+ */
+export function themeKeyClassEntries(themeKey, prefixes = THEME_CLASS_PREFIXES) {
+    const bare = themeKey.replace(/^--/, '');
+    // `--shadow: …` IS the bare `shadow` class — a namespace with no suffix.
+    if (prefixes[bare])
+        return [{ prefix: bare, name: bare }];
+    const cut = bare.indexOf('-');
+    if (cut === -1)
+        return [];
+    const namespace = bare.slice(0, cut);
+    const suffix = bare.slice(cut + 1);
+    return (prefixes[namespace] ?? []).map((p) => ({ prefix: p, name: `${p}-${suffix}` }));
+}
+/** The class names one `@theme` key generates, e.g. `--radius-control` → `rounded-control`. */
+export function themeKeyClasses(themeKey, prefixes = THEME_CLASS_PREFIXES) {
+    return themeKeyClassEntries(themeKey, prefixes).map((e) => e.name);
+}
+/**
+ * Named theme scales — the other half of the public class API.
+ *
+ * Shape parsed: a doc comment followed by a RUN of `--key: var(…)` lines inside
+ * `@theme`, exactly like the `@utility` ladder rule above. One comment governs
+ * the whole run, so the radius ladder or the spacing scale documents once.
+ */
+function parseTheme(file, source) {
+    const theme = source.match(/@theme[^{]*\{([\s\S]*?)\n\}/);
+    if (!theme)
+        return [];
+    const body = theme[1];
+    const out = [];
+    const pattern = /\/\*((?:(?!\*\/)[\s\S])*)\*\/\s*((?:\s*--[\w-]+\s*:[^;]+;\n?)+)/g;
+    for (const match of body.matchAll(pattern)) {
+        const decls = [...match[2].matchAll(/--[\w-]+\s*:[^;]+;/g)].map((m) => m[0]);
+        const names = decls.flatMap((d) => themeKeyClasses(d.slice(0, d.indexOf(':')).trim()));
+        // A comment governing only non-class keys (--default-transition-*) has
+        // nothing to document — it is internal wiring, not API.
+        if (!names.length)
+            continue;
+        const { useCase, description } = splitUseCase(cleanComment(match[1]));
+        out.push({
+            name: names[0],
+            names,
+            file,
+            useCase,
+            description,
+            css: `@theme inline {\n${decls.map((d) => `\t${d}`).join('\n')}\n}`
+        });
+    }
+    return out;
+}
 /**
  * @param sources stylesheet text keyed by path relative to src/lib/styles
  *   (e.g. `index.css`, `surfaces/glass.css`).
@@ -97,7 +211,7 @@ export function parseUtilities(sources) {
     };
     return Object.entries(sources)
         .sort(([a], [b]) => rank(a) - rank(b) || a.localeCompare(b))
-        .flatMap(([file, source]) => parseFile(file, source));
+        .flatMap(([file, source]) => [...parseFile(file, source), ...parseTheme(file, source)]);
 }
 const INTRO = [
     "era's styling API is pure class names — write `h-control rounded-control px-gutter shadow`,",
@@ -119,7 +233,7 @@ const INTRO = [
     '',
     '| Stock-looking class | What it resolves to |',
     '|---|---|',
-    '| `rounded-icon/xxs/sm/md/lg` | the concentric radius ladder (collapses on `data-corners="square"`) |',
+    '| `rounded-icon/pill/chip/control/bar` | the concentric radius ladder (collapses on `data-corners="square"`) |',
     '| `rounded-menu-item` | menu-row radius, concentric inside a `rounded-control` panel |',
     '| `shadow` / `shadow-lg` | resting control edge / floating panel chrome, per surface |',
     '| `shadow-well` / `shadow-pressed` / `shadow-highlight` | recessed, pressed/latched, hover-material chrome |',
@@ -127,13 +241,33 @@ const INTRO = [
     '| `transition-*` (bare) | duration + easing default to the motion axis |',
     '| `ease-base` / `duration-base` | the motion axis, named explicitly |',
     '| `text-body` | density-derived body/control text size |',
+    '| `p-gutter` / `gap-gutter` / `mt-gutter` / … | the spacing scale — EVERY spacing prefix works |',
+    '',
+    'The spacing names (`gutter`, `card`, `panel`, `content`, `menu`, `field`, the',
+    '`inset-*` and concentric `*-inset-*` insets, `glyph-*`) are registered as a',
+    'Tailwind spacing scale, so every prefix derives automatically: `p-`, `px-`,',
+    '`pt-`, `mt-`, `gap-`, `gap-x-`, `inset-`, `translate-`, and the rest. The TIER',
+    'names (`icon`, `pill`, `chip`, `control`, `bar`) are heights, not spacing, so',
+    'they are registered per prefix instead — `h-`, `w-`, `min-h-`, `min-w-` and',
+    '`size-` — and the two vocabularies deliberately share no word. Putting a tier',
+    'in the spacing scale would silently make `px-control` mean 24px of padding.',
     '',
-    "Deliberate gaps: `w-*`/`min-w-*` tier names would shadow Tailwind's container",
-    'scale (`min-w-md` stays 28rem), and the concentric-inset tokens are advanced',
-    'enough to stay var-form — `min-w-(--era-h-control)` etc. remain the escape hatch.'
+    'The var form (`h-(--era-h-control)`) still works and is the escape hatch for a',
+    'token with no registered name — `--era-sp`, the press-sink offsets, anything',
+    'a component reaches for once. `scripts/check-canonical.ts` fails the build if',
+    'source uses it where a name exists.'
 ].join('\n');
-/** `h-icon` for a single class, `h-icon · h-pill · … · h-bar` for a ladder. */
-const label = (u) => u.names.join(' · ');
+/**
+ * `h-icon` for a single class, `h-icon · h-pill · … · h-bar` for a ladder.
+ *
+ * Capped, because a theme scale can govern a LOT of spellings: the colour block
+ * generates bg-/text-/border- for every token, which is ~60 names and reads as
+ * noise in a heading. The prose under each entry states the full rule.
+ */
+const LABEL_CAP = 8;
+const label = (u) => u.names.length > LABEL_CAP
+    ? `${u.names.slice(0, LABEL_CAP).join(' · ')} · … (${u.names.length} in all)`
+    : u.names.join(' · ');
 /** Renders the utilities reference — the generated `utilities.md` body. */
 export function buildUtilitiesDoc(utilities) {
     const lines = ['## Overview', '', INTRO, '', '| Utility | Use it for |', '|---|---|'];

package/dist/docs/quickstart.md

@@ -7,7 +7,7 @@ Use a single, pure component import from `$lib/ui` for a clean docs-friendly sta
 	import { Badge, Bar, Button, ButtonGroup, Card, Separator } from '$lib/ui';
 </script>
 
-<section class="mx-auto flex w-full max-w-4xl flex-col gap-(--era-content-p) p-(--era-content-p)">
+<section class="mx-auto flex w-full max-w-4xl flex-col gap-content p-content">
 	<Badge tone="accent">Now shipping v0.8</Badge>
 
 	<div class="space-y-(--era-gap)">
@@ -28,10 +28,10 @@ Use a single, pure component import from `$lib/ui` for a clean docs-friendly sta
 
 	<Separator />
 
-	<div class="grid gap-(--era-gap) md:grid-cols-3">
-		<Card class="p-(--era-gap)">Dense-ready</Card>
-		<Card class="p-(--era-gap)">Balanced defaults</Card>
-		<Card class="p-(--era-gap)">Spacious polish</Card>
+	<div class="grid gap-gutter md:grid-cols-3">
+		<Card class="p-gutter">Dense-ready</Card>
+		<Card class="p-gutter">Balanced defaults</Card>
+		<Card class="p-gutter">Spacious polish</Card>
 	</div>
 </section>
 ```