diff --git a/docs/ui-visual-contract-0.8.json b/docs/ui-visual-contract-0.8.json
index 61110915..80c52d50 100644
--- a/docs/ui-visual-contract-0.8.json
+++ b/docs/ui-visual-contract-0.8.json
@@ -23,10 +23,10 @@
     "packages/ui/components/Clipboard.wrn": "bb8651c7e44517db827603d0c0e546b6891093d7e6589c0b6e45d91b6187591b",
     "packages/ui/components/Collapse.wrn": "c537239831c6938f3c39be0ca3ae8ba928c2490e21cfe5853c10f7221a4678ca",
     "packages/ui/components/ColorPicker.wrn": "6940b7ae48f1358008b8c3ae6dc7da31f96a1aefadeef18252568b2cda0b5cbf",
-    "packages/ui/components/Columns.wrn": "449a427c2f4dd846b5239b73efe5b8d15ad4f20fa28598802a5eb57c33332391",
+    "packages/ui/components/Columns.wrn": "e01496aa53025444cc51671efcce40d6d24d86775b2cbb1ee0def1862bb6315d",
     "packages/ui/components/Combobox.wrn": "62a7d861b0e536ceb088cea3552c59acbafaea5184101e3651dc8f4976b99dbc",
     "packages/ui/components/Confetti.wrn": "22d687beefd5047055f65e806b4e39f81e18887532ec18d439ac364a044b230a",
-    "packages/ui/components/Container.wrn": "be8fce140043eced8b78c8dd14ff85ace4ed2d91671251641ef83e0fe4da8f2a",
+    "packages/ui/components/Container.wrn": "4a0acbb896f4c11714e3925d912b10ef9aeedfa904b4ad8561aa2cbd9a0fdca0",
     "packages/ui/components/ContextMenu.wrn": "2e011e9cb1c09a3a2344ed3fa29dcc74331cd39f838535d8aee4b249dceef0ce",
     "packages/ui/components/CopyMarkup.wrn": "8d57a7d72e02c126f855a181fc36e1b969edb90f683dce6b6ffe546d49d2b29b",
     "packages/ui/components/CustomScrollbar.wrn": "fedb2ab06cc2cf9499c130590945ca6971a3edfb60407b6658ef7756e4be9823",
@@ -34,7 +34,7 @@
     "packages/ui/components/DataTable.wrn": "5a76e50e8559c724aaf01ec954958ac640c99758d44f1eef8e6eb1cb6dc4f862",
     "packages/ui/components/DatePicker.wrn": "18b07e59c27c2720bf960e9c04ad70d9e422ddcf0817fede74e71899811bb387",
     "packages/ui/components/DeviceFrame.wrn": "a881cf2cc1f859b43cc3c7a1e1ca0fb40cea7a9e530ab5bdcb985aa9592d11c0",
-    "packages/ui/components/Divider.wrn": "e377f8005249cf4f6c51dd4d04ff9c6a70a3f4e3a79d2c02a8ab601754c8553a",
+    "packages/ui/components/Divider.wrn": "f5cc449611022b3d3eedf982ae48f6b1a289db7855cc9b6ea0248dcda807ffb3",
     "packages/ui/components/DragAndDrop.wrn": "9a403ce9ed20d36211d8916911871875c9c7d0952a7de1a21a433eaa0b3c3324",
     "packages/ui/components/Drawer.wrn": "04a77a69edfad6793b5ab60981a719f11061984c087d0d61663566e322649fef",
     "packages/ui/components/Dropdown.wrn": "c61b46ae6e54f6aacac9f4ed422f6c659deea9a637fd944645acd37bf270b01d",
@@ -45,17 +45,17 @@
     "packages/ui/components/FileUpload.wrn": "3346d8978e134c3a1e6bc742201a3fbb0cffb89da40da6fcd856a2adbb971393",
     "packages/ui/components/FileUploadProgress.wrn": "83bcc8558c70fbe0e0670642f65998abd222c235f1031be46bd7c65e6b5c5154",
     "packages/ui/components/Footer.wrn": "a5dfaa5f9548b7fdd4b556c63428e0ea8d22e5e776a5714d76619999438cf618",
-    "packages/ui/components/Grid.wrn": "b5546b899c509c1f3e8f5edad801bc59acf9fe3008a627f0e4476cd61b5b672e",
+    "packages/ui/components/Grid.wrn": "d089d8657298b4d33993ba4bf7b581f816c65db513d8e48cf1fdd18da19e05a8",
     "packages/ui/components/Hero.wrn": "e4e39dcd59c273192c7e4136f6583279e20b0956bcba4cfbc3f6e01a1fade152",
     "packages/ui/components/HeroActions.wrn": "c5720efe2ce7f6c114eb2ea4ccc3e8102a1099078ba23fd13770eddeb6aec640",
-    "packages/ui/components/Image.wrn": "4294358e2eddf06ae4384217dbff7693b609c16bf6549f54d6ad27df74d7ae27",
+    "packages/ui/components/Image.wrn": "8113441bf90ab0d1d8618d477125ad339021f39e853db89d656c72c492e7a20b",
     "packages/ui/components/Input.wrn": "9ad394eed60f1b05bbd2ccd50dc2de7b78245c52c87afd46055d772c38b7b0c9",
     "packages/ui/components/InputGroup.wrn": "0e23ea541a60e893c9d9e6f95113911ee459468d8d6105bf03aeb55395359123",
     "packages/ui/components/InputNumber.wrn": "a0aa4f4566bf54ffbef54c99648eab05b5f9870be6ea07639a4ecf3930afb631",
-    "packages/ui/components/Kbd.wrn": "d51fa614b36f971f885410785b481c2e6900b2416e6e7c8868dfda1ebd5f3b4c",
+    "packages/ui/components/Kbd.wrn": "5afaabbb15902bd8fb82cb4155cf6cbfff55600927b54d564d27e2dd8b752386",
     "packages/ui/components/LayoutSplitter.wrn": "a86dc54b74aed6b05e770cd1802960d6309bba42fe80e899e8aaa8b1b7aa88e3",
     "packages/ui/components/LegendIndicator.wrn": "6a7607b27a17196f899132eb952203a1073e4077365a94935f485e700cbac665",
-    "packages/ui/components/Link.wrn": "935ac24e8ebd067860dc9709ea9121710315ad6e02ce95cd5e982ae4d5978a02",
+    "packages/ui/components/Link.wrn": "b986abcc66bc0b1c6296f3ff4e560812e35d89cc680d5251d7a3883e68c1d053",
     "packages/ui/components/List.wrn": "02f960a8e82fa049aac477bac9c1d9371394c86d9c47513138f61bffc79dc7d8",
     "packages/ui/components/ListGroup.wrn": "37e2ec61ceab20ed020a834da03208c493702b41abcf586816e29f2e50d8ee11",
     "packages/ui/components/Map.wrn": "7b8a0d5412a464fd7cab8977d816542c506d8c5dab8230a3c984c2caee407c91",
@@ -101,7 +101,7 @@
     "packages/ui/components/TogglePassword.wrn": "405a85cbfa3d0ff0185b52d2805fba88497a5f25501f01b2438ed3a28591a38d",
     "packages/ui/components/Tooltip.wrn": "e6c8c14a75062d04a2e64245df1a40e67785240573c73bae4b0b32e76ef822bc",
     "packages/ui/components/TreeView.wrn": "1791a10135595b17b5c746af9e0476e8520d516ba46d64c79dc4efe0af2b500d",
-    "packages/ui/components/Typography.wrn": "a667e800e11d23da74b00047bd9c560a65a5920e5394f58f66a6e0b32572ce8e",
+    "packages/ui/components/Typography.wrn": "1b4d1b91dee0ff522d27c566becc3bc49bd9ec979ae6334e6a15fca5d88eccac",
     "packages/ui/components/WysiwygEditor.wrn": "636e60b9f9be7a5807cca7ad20e0b0f370ee1ec6c1ecba5d0a577726cc86bc98",
     "packages/ui/components/alert.wrn": "a6020b3fbf02481f76cea4cfa563a7165c7ccc2920492f6f6b79e98cbf2cf0fa",
     "packages/ui/components/avatar.wrn": "571b70790aff28a5b7d6adbf0196e77ece1ce153a95b384148cb2bb5f74ab2e9",
diff --git a/examples/component-showcase/app/pages/components/container.wrn b/examples/component-showcase/app/pages/components/container.wrn
index 6393e285..d9ae8686 100644
--- a/examples/component-showcase/app/pages/components/container.wrn
+++ b/examples/component-showcase/app/pages/components/container.wrn
@@ -6,6 +6,7 @@ page ContainerDetail {
   state playground_columns = Number(ctx.url.searchParams.get("pg_columns") ?? "2")
   state playground_gap = ctx.url.searchParams.get("pg_gap") ?? "md"
   state playground_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "xl"
+  state playground_centered = (ctx.url.searchParams.get("pg_centered") ?? "true") === "true"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
     title = "Container"
@@ -20,7 +21,7 @@ page ContainerDetail {
         <span class="showcase-eyebrow">Layout component</span>
         <h1>Container</h1>
         <p>Constrain and align page content with responsive gutters and compact, wide, or full width options.</p>
-        <div class="detail-badges"><span>6 props</span><span>1 slots</span><span>0 outputs</span><span>Theme ready</span><span>Responsive</span></div>
+        <div class="detail-badges"><span>7 props</span><span>1 slots</span><span>0 outputs</span><span>Theme ready</span><span>Responsive</span></div>
       </div>
       <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
     </header>
@@ -29,7 +30,7 @@ page ContainerDetail {
       <div class="playground-workbench">
         <div class="playground-preview">
           <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><Container size='{playground_size}' color='{playground_color}' columns='{playground_columns}' gap='{playground_gap}' maxWidth='{playground_maxWidth}' class='{playground_class}'><div class="showcase-content-block">Centered container content</div></Container></div>
+          <div class="playground-preview-source" data-playground-preview><Container size='{playground_size}' color='{playground_color}' columns='{playground_columns}' gap='{playground_gap}' maxWidth='{playground_maxWidth}' centered='{playground_centered}' class='{playground_class}'><div class="showcase-content-block">Centered container content</div></Container></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;Container&gt;
@@ -40,8 +41,8 @@ page ContainerDetail {
           
         </div>
         <form class="playground-controls" data-playground-form>
-          <header><div><span>Component props</span><strong>6 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-container-size"><span><strong>size</strong><small>string</small></span><select id="playground-container-size" name="pg_size"><option value="default" selected>default</option><option value="compact">compact</option><option value="spacious">spacious</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-container-color"><span><strong>color</strong><small>string</small></span><select id="playground-container-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-container-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-container-columns" name="pg_columns" type="number" value="2" /></label><label class="playground-field" for="playground-container-gap"><span><strong>gap</strong><small>string</small></span><select id="playground-container-gap" name="pg_gap"><option value="md" selected>md</option><option value="none">none</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option><option value="2xl">2xl</option></select></label><label class="playground-field" for="playground-container-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-container-maxWidth" name="pg_maxWidth"><option value="xl" selected>xl</option><option value="compact">compact</option><option value="lg">lg</option><option value="wide">wide</option><option value="2xl">2xl</option><option value="full">full</option></select></label><label class="playground-field" for="playground-container-class"><span><strong>class</strong><small>string</small></span><input id="playground-container-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+          <header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
+          <div class="playground-fields"><label class="playground-field" for="playground-container-size"><span><strong>size</strong><small>string</small></span><select id="playground-container-size" name="pg_size"><option value="default" selected>default</option><option value="compact">compact</option><option value="spacious">spacious</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-container-color"><span><strong>color</strong><small>string</small></span><select id="playground-container-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-container-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-container-columns" name="pg_columns" type="number" value="2" /></label><label class="playground-field" for="playground-container-gap"><span><strong>gap</strong><small>string</small></span><select id="playground-container-gap" name="pg_gap"><option value="md" selected>md</option><option value="none">none</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option><option value="2xl">2xl</option></select></label><label class="playground-field" for="playground-container-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-container-maxWidth" name="pg_maxWidth"><option value="xl" selected>xl</option><option value="compact">compact</option><option value="lg">lg</option><option value="wide">wide</option><option value="2xl">2xl</option><option value="full">full</option></select></label><label class="playground-toggle" for="playground-container-centered"><span><strong>centered</strong><small>boolean</small></span><input id="playground-container-centered" name="pg_centered" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-container-class"><span><strong>class</strong><small>string</small></span><input id="playground-container-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -57,7 +58,7 @@ page ContainerDetail {
           <div id="container-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><Container size="default" columns="2" maxWidth="xl" class="showcase-instance showcase-instance--1"><div class="showcase-content-block">Centered container content</div></Container></div>
+            <div class="demo-render"><Container size="default" columns="2" maxWidth="xl" centered="true" class="showcase-instance showcase-instance--1"><div class="showcase-content-block">Centered container content</div></Container></div>
           </div>
           <section class="demo-code" aria-label="Standard content container usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -76,7 +77,7 @@ page ContainerDetail {
           <div id="container-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><Container size="compact" columns="2" maxWidth="compact" class="showcase-instance showcase-instance--2"><div class="showcase-content-block">Compact readable content</div></Container></div>
+            <div class="demo-render"><Container size="compact" columns="2" maxWidth="compact" centered="true" class="showcase-instance showcase-instance--2"><div class="showcase-content-block">Compact readable content</div></Container></div>
           </div>
           <section class="demo-code" aria-label="Compact reading container usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -97,7 +98,7 @@ page ContainerDetail {
           <div id="container-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><Container size="spacious" columns="2" maxWidth="full" class="showcase-instance showcase-instance--3"><div class="showcase-content-block">Full-width dashboard content</div></Container></div>
+            <div class="demo-render"><Container size="spacious" columns="2" maxWidth="full" centered="true" class="showcase-instance showcase-instance--3"><div class="showcase-content-block">Full-width dashboard content</div></Container></div>
           </div>
           <section class="demo-code" aria-label="Full-width layout container usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -110,7 +111,7 @@ page ContainerDetail {
         </div>
       </article></div></section>
         
-        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>columns</code></td><td>number</td><td><code>2</code></td><td>No</td></tr><tr><td><code>gap</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"xl"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
+        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>columns</code></td><td>number</td><td><code>2</code></td><td>No</td></tr><tr><td><code>gap</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"xl"</code></td><td>No</td></tr><tr><td><code>centered</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
         <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#container-demo-1">Standard content container</a><a href="#container-demo-2">Compact reading container</a><a href="#container-demo-3">Full-width layout container</a><a href="#api">Props API</a></div>
diff --git a/examples/component-showcase/app/pages/components/divider.wrn b/examples/component-showcase/app/pages/components/divider.wrn
index 4980b62b..9f05a7e5 100644
--- a/examples/component-showcase/app/pages/components/divider.wrn
+++ b/examples/component-showcase/app/pages/components/divider.wrn
@@ -5,6 +5,7 @@ page DividerDetail {
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
   state playground_label = ctx.url.searchParams.get("pg_label") ?? "Divider"
   state playground_orientation = ctx.url.searchParams.get("pg_orientation") ?? "horizontal"
+  state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "solid"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
     title = "Divider"
@@ -19,7 +20,7 @@ page DividerDetail {
         <span class="showcase-eyebrow">Layout component</span>
         <h1>Divider</h1>
         <p>Separate related horizontal or vertical content with optional labels, sizes, and semantic colors.</p>
-        <div class="detail-badges"><span>5 props</span><span>0 slots</span><span>0 outputs</span><span>Theme ready</span><span>Responsive</span></div>
+        <div class="detail-badges"><span>6 props</span><span>0 slots</span><span>0 outputs</span><span>Theme ready</span><span>Responsive</span></div>
       </div>
       <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
     </header>
@@ -28,7 +29,7 @@ page DividerDetail {
       <div class="playground-workbench">
         <div class="playground-preview">
           <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><Divider size='{playground_size}' color='{playground_color}' label='{playground_label}' orientation='{playground_orientation}' class='{playground_class}' /></div>
+          <div class="playground-preview-source" data-playground-preview><Divider size='{playground_size}' color='{playground_color}' label='{playground_label}' orientation='{playground_orientation}' variant='{playground_variant}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;Divider
@@ -39,8 +40,8 @@ page DividerDetail {
           
         </div>
         <form class="playground-controls" data-playground-form>
-          <header><div><span>Component props</span><strong>5 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-divider-size"><span><strong>size</strong><small>string</small></span><select id="playground-divider-size" name="pg_size"><option value="default" selected>default</option><option value="sm">sm</option><option value="lg">lg</option><option value="xs">xs</option><option value="md">md</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-divider-color"><span><strong>color</strong><small>string</small></span><select id="playground-divider-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-divider-label"><span><strong>label</strong><small>string</small></span><input id="playground-divider-label" name="pg_label" type="text" value="Divider" /></label><label class="playground-field" for="playground-divider-orientation"><span><strong>orientation</strong><small>string</small></span><select id="playground-divider-orientation" name="pg_orientation"><option value="horizontal" selected>horizontal</option><option value="vertical">vertical</option></select></label><label class="playground-field" for="playground-divider-class"><span><strong>class</strong><small>string</small></span><input id="playground-divider-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+          <header><div><span>Component props</span><strong>6 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
+          <div class="playground-fields"><label class="playground-field" for="playground-divider-size"><span><strong>size</strong><small>string</small></span><select id="playground-divider-size" name="pg_size"><option value="default" selected>default</option><option value="sm">sm</option><option value="lg">lg</option><option value="xs">xs</option><option value="md">md</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-divider-color"><span><strong>color</strong><small>string</small></span><select id="playground-divider-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-divider-label"><span><strong>label</strong><small>string</small></span><input id="playground-divider-label" name="pg_label" type="text" value="Divider" /></label><label class="playground-field" for="playground-divider-orientation"><span><strong>orientation</strong><small>string</small></span><select id="playground-divider-orientation" name="pg_orientation"><option value="horizontal" selected>horizontal</option><option value="vertical">vertical</option></select></label><label class="playground-field" for="playground-divider-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-divider-variant" name="pg_variant" type="text" value="solid" /></label><label class="playground-field" for="playground-divider-class"><span><strong>class</strong><small>string</small></span><input id="playground-divider-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -56,7 +57,7 @@ page DividerDetail {
           <div id="divider-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><Divider size="default" label="Related information" orientation="horizontal" class="showcase-instance showcase-instance--1" /></div>
+            <div class="demo-render"><Divider size="default" label="Related information" orientation="horizontal" variant="solid" class="showcase-instance showcase-instance--1" /></div>
           </div>
           <section class="demo-code" aria-label="Horizontal section divider usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -75,12 +76,13 @@ page DividerDetail {
           <div id="divider-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><Divider size="sm" label="" orientation="horizontal" class="showcase-instance showcase-instance--2" /></div>
+            <div class="demo-render"><Divider size="sm" label="" orientation="horizontal" variant="secondary" class="showcase-instance showcase-instance--2" /></div>
           </div>
           <section class="demo-code" aria-label="Minimal unlabeled divider usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;Divider
   size="sm"
+  variant="secondary"
 /&gt;</code></pre>
           </section>
         </div>
@@ -94,7 +96,7 @@ page DividerDetail {
           <div id="divider-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
             
-            <div class="demo-render"><Divider size="lg" color="info" label="Actions" orientation="vertical" class="showcase-instance showcase-instance--3" /></div>
+            <div class="demo-render"><Divider size="lg" color="info" label="Actions" orientation="vertical" variant="success" class="showcase-instance showcase-instance--3" /></div>
           </div>
           <section class="demo-code" aria-label="Vertical toolbar divider usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -103,12 +105,13 @@ page DividerDetail {
   color="info"
   label="Actions"
   orientation="vertical"
+  variant="success"
 /&gt;</code></pre>
           </section>
         </div>
       </article></div></section>
         
-        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>orientation</code></td><td>string</td><td><code>"horizontal"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
+        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>orientation</code></td><td>string</td><td><code>"horizontal"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"solid"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
         <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#divider-demo-1">Horizontal section divider</a><a href="#divider-demo-2">Minimal unlabeled divider</a><a href="#divider-demo-3">Vertical toolbar divider</a><a href="#api">Props API</a></div>
diff --git a/examples/component-showcase/app/pages/components/grid.wrn b/examples/component-showcase/app/pages/components/grid.wrn
index 9fd6019a..64e7e70f 100644
--- a/examples/component-showcase/app/pages/components/grid.wrn
+++ b/examples/component-showcase/app/pages/components/grid.wrn
@@ -6,6 +6,7 @@ page GridDetail {
   state playground_columns = Number(ctx.url.searchParams.get("pg_columns") ?? "2")
   state playground_gap = ctx.url.searchParams.get("pg_gap") ?? "md"
   state playground_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "xl"
+  state playground_minItemWidth = ctx.url.searchParams.get("pg_minItemWidth") ?? ""
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
     title = "Grid"
@@ -20,7 +21,7 @@ page GridDetail {
         <span class="showcase-eyebrow">Layout component</span>
         <h1>Grid</h1>
         <p>Arrange arbitrary content in a responsive configurable CSS grid with stable columns, gaps, alignment, and width.</p>
-        <div class="detail-badges"><span>6 props</span><span>1 slots</span><span>0 outputs</span><span>Theme ready</span><span>Responsive</span></div>
+        <div class="detail-badges"><span>7 props</span><span>1 slots</span><span>0 outputs</span><span>Theme ready</span><span>Responsive</span></div>
       </div>
       <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
     </header>
@@ -29,7 +30,7 @@ page GridDetail {
       <div class="playground-workbench">
         <div class="playground-preview">
           <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><Grid size='{playground_size}' color='{playground_color}' columns='{playground_columns}' gap='{playground_gap}' maxWidth='{playground_maxWidth}' class='{playground_class}'><div class="showcase-grid-items"><span>One</span><span>Two</span><span>Three</span></div></Grid></div>
+          <div class="playground-preview-source" data-playground-preview><Grid size='{playground_size}' color='{playground_color}' columns='{playground_columns}' gap='{playground_gap}' maxWidth='{playground_maxWidth}' minItemWidth='{playground_minItemWidth}' class='{playground_class}'><div class="showcase-grid-items"><span>One</span><span>Two</span><span>Three</span></div></Grid></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;Grid /&gt;</code></pre>
@@ -38,8 +39,8 @@ page GridDetail {
           
         </div>
         <form class="playground-controls" data-playground-form>
-          <header><div><span>Component props</span><strong>6 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-grid-size"><span><strong>size</strong><small>string</small></span><select id="playground-grid-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-grid-color"><span><strong>color</strong><small>string</small></span><select id="playground-grid-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-grid-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-grid-columns" name="pg_columns" type="number" value="2" /></label><label class="playground-field" for="playground-grid-gap"><span><strong>gap</strong><small>string</small></span><select id="playground-grid-gap" name="pg_gap"><option value="md" selected>md</option><option value="none">none</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option><option value="xs">xs</option><option value="2xl">2xl</option></select></label><label class="playground-field" for="playground-grid-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-grid-maxWidth" name="pg_maxWidth"><option value="xl" selected>xl</option><option value="compact">compact</option><option value="lg">lg</option><option value="wide">wide</option><option value="2xl">2xl</option><option value="full">full</option></select></label><label class="playground-field" for="playground-grid-class"><span><strong>class</strong><small>string</small></span><input id="playground-grid-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+          <header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
+          <div class="playground-fields"><label class="playground-field" for="playground-grid-size"><span><strong>size</strong><small>string</small></span><select id="playground-grid-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-grid-color"><span><strong>color</strong><small>string</small></span><select id="playground-grid-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-grid-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-grid-columns" name="pg_columns" type="number" value="2" /></label><label class="playground-field" for="playground-grid-gap"><span><strong>gap</strong><small>string</small></span><select id="playground-grid-gap" name="pg_gap"><option value="md" selected>md</option><option value="none">none</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option><option value="xs">xs</option><option value="2xl">2xl</option></select></label><label class="playground-field" for="playground-grid-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-grid-maxWidth" name="pg_maxWidth"><option value="xl" selected>xl</option><option value="compact">compact</option><option value="lg">lg</option><option value="wide">wide</option><option value="2xl">2xl</option><option value="full">full</option></select></label><label class="playground-field" for="playground-grid-minItemWidth"><span><strong>min Item Width</strong><small>string</small></span><input id="playground-grid-minItemWidth" name="pg_minItemWidth" type="text" value="" /></label><label class="playground-field" for="playground-grid-class"><span><strong>class</strong><small>string</small></span><input id="playground-grid-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -112,7 +113,7 @@ page GridDetail {
         </div>
       </article></div></section>
         
-        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>columns</code></td><td>number</td><td><code>2</code></td><td>No</td></tr><tr><td><code>gap</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"xl"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
+        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>columns</code></td><td>number</td><td><code>2</code></td><td>No</td></tr><tr><td><code>gap</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"xl"</code></td><td>No</td></tr><tr><td><code>minItemWidth</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
         <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#grid-demo-1">Responsive three-column grid</a><a href="#grid-demo-2">Dense four-column grid</a><a href="#grid-demo-3">Full-width two-column grid</a><a href="#api">Props API</a></div>
diff --git a/examples/component-showcase/app/pages/components/image.wrn b/examples/component-showcase/app/pages/components/image.wrn
index 5729bd00..1c466e7e 100644
--- a/examples/component-showcase/app/pages/components/image.wrn
+++ b/examples/component-showcase/app/pages/components/image.wrn
@@ -8,6 +8,7 @@ page ImageDetail {
   state playground_width = ctx.url.searchParams.get("pg_width") ?? ""
   state playground_height = ctx.url.searchParams.get("pg_height") ?? ""
   state playground_loading = ctx.url.searchParams.get("pg_loading") ?? "lazy"
+  state playground_fit = ctx.url.searchParams.get("pg_fit") ?? "cover"
   state playground_rounded = (ctx.url.searchParams.get("pg_rounded") ?? "false") === "true"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
@@ -23,7 +24,7 @@ page ImageDetail {
         <span class="showcase-eyebrow">Layout component</span>
         <h1>Image</h1>
         <p>Render a responsive image with explicit dimensions, loading behavior, alternative text, sizing, and rounded treatment.</p>
-        <div class="detail-badges"><span>9 props</span><span>1 slots</span><span>0 outputs</span><span>Theme ready</span><span>Responsive</span></div>
+        <div class="detail-badges"><span>10 props</span><span>1 slots</span><span>0 outputs</span><span>Theme ready</span><span>Responsive</span></div>
       </div>
       <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
     </header>
@@ -32,7 +33,7 @@ page ImageDetail {
       <div class="playground-workbench">
         <div class="playground-preview">
           <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><Image size='{playground_size}' color='{playground_color}' src='{playground_src}' alt='{playground_alt}' width='{playground_width}' height='{playground_height}' loading='{playground_loading}' rounded='{playground_rounded}' class='{playground_class}' /></div>
+          <div class="playground-preview-source" data-playground-preview><Image size='{playground_size}' color='{playground_color}' src='{playground_src}' alt='{playground_alt}' width='{playground_width}' height='{playground_height}' loading='{playground_loading}' fit='{playground_fit}' rounded='{playground_rounded}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;Image /&gt;</code></pre>
@@ -41,8 +42,8 @@ page ImageDetail {
           
         </div>
         <form class="playground-controls" data-playground-form>
-          <header><div><span>Component props</span><strong>9 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-image-size"><span><strong>size</strong><small>string</small></span><select id="playground-image-size" name="pg_size"><option value="default" selected>default</option><option value="sm">sm</option><option value="lg">lg</option><option value="xs">xs</option><option value="md">md</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-image-color"><span><strong>color</strong><small>string</small></span><select id="playground-image-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-image-src"><span><strong>src</strong><small>string</small></span><input id="playground-image-src" name="pg_src" type="text" value="" /></label><label class="playground-field" for="playground-image-alt"><span><strong>alt</strong><small>string</small></span><input id="playground-image-alt" name="pg_alt" type="text" value="" /></label><label class="playground-field" for="playground-image-width"><span><strong>width</strong><small>string</small></span><select id="playground-image-width" name="pg_width"><option value="" selected>Auto / default</option><option value="default">default</option><option value="compact">compact</option><option value="wide">wide</option><option value="full">full</option></select></label><label class="playground-field" for="playground-image-height"><span><strong>height</strong><small>string</small></span><input id="playground-image-height" name="pg_height" type="text" value="" /></label><label class="playground-field" for="playground-image-loading"><span><strong>loading</strong><small>string</small></span><select id="playground-image-loading" name="pg_loading"><option value="lazy" selected>lazy</option><option value="eager">eager</option></select></label><label class="playground-toggle" for="playground-image-rounded"><span><strong>rounded</strong><small>boolean</small></span><input id="playground-image-rounded" name="pg_rounded" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-image-class"><span><strong>class</strong><small>string</small></span><input id="playground-image-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+          <header><div><span>Component props</span><strong>10 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
+          <div class="playground-fields"><label class="playground-field" for="playground-image-size"><span><strong>size</strong><small>string</small></span><select id="playground-image-size" name="pg_size"><option value="default" selected>default</option><option value="sm">sm</option><option value="lg">lg</option><option value="xs">xs</option><option value="md">md</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-image-color"><span><strong>color</strong><small>string</small></span><select id="playground-image-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-image-src"><span><strong>src</strong><small>string</small></span><input id="playground-image-src" name="pg_src" type="text" value="" /></label><label class="playground-field" for="playground-image-alt"><span><strong>alt</strong><small>string</small></span><input id="playground-image-alt" name="pg_alt" type="text" value="" /></label><label class="playground-field" for="playground-image-width"><span><strong>width</strong><small>string</small></span><select id="playground-image-width" name="pg_width"><option value="" selected>Auto / default</option><option value="default">default</option><option value="compact">compact</option><option value="wide">wide</option><option value="full">full</option></select></label><label class="playground-field" for="playground-image-height"><span><strong>height</strong><small>string</small></span><input id="playground-image-height" name="pg_height" type="text" value="" /></label><label class="playground-field" for="playground-image-loading"><span><strong>loading</strong><small>string</small></span><select id="playground-image-loading" name="pg_loading"><option value="lazy" selected>lazy</option><option value="eager">eager</option></select></label><label class="playground-field" for="playground-image-fit"><span><strong>fit</strong><small>string</small></span><input id="playground-image-fit" name="pg_fit" type="text" value="cover" /></label><label class="playground-toggle" for="playground-image-rounded"><span><strong>rounded</strong><small>boolean</small></span><input id="playground-image-rounded" name="pg_rounded" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-image-class"><span><strong>class</strong><small>string</small></span><input id="playground-image-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -121,7 +122,7 @@ page ImageDetail {
         </div>
       </article></div></section>
         
-        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>src</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>alt</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>width</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>height</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>loading</code></td><td>string</td><td><code>"lazy"</code></td><td>No</td></tr><tr><td><code>rounded</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
+        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>src</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>alt</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>width</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>height</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>loading</code></td><td>string</td><td><code>"lazy"</code></td><td>No</td></tr><tr><td><code>fit</code></td><td>string</td><td><code>"cover"</code></td><td>No</td></tr><tr><td><code>rounded</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
         <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#image-demo-1">Responsive content image</a><a href="#image-demo-2">Rounded thumbnail</a><a href="#image-demo-3">Eager hero image</a><a href="#api">Props API</a></div>
diff --git a/examples/component-showcase/app/pages/components/kbd.wrn b/examples/component-showcase/app/pages/components/kbd.wrn
index b51cc0ee..b14abe57 100644
--- a/examples/component-showcase/app/pages/components/kbd.wrn
+++ b/examples/component-showcase/app/pages/components/kbd.wrn
@@ -106,7 +106,7 @@ page KbdDetail {
         </div>
       </article></div></section>
         
-        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"⌘ K"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
+        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"K"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
         <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#kbd-demo-1">Production default</a><a href="#kbd-demo-2">Compact application</a><a href="#kbd-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
diff --git a/examples/component-showcase/app/pages/components/link.wrn b/examples/component-showcase/app/pages/components/link.wrn
index 83b168d0..8a4b357a 100644
--- a/examples/component-showcase/app/pages/components/link.wrn
+++ b/examples/component-showcase/app/pages/components/link.wrn
@@ -7,6 +7,7 @@ page LinkDetail {
   state playground_href = ctx.url.searchParams.get("pg_href") ?? "#link-demo"
   state playground_target = ctx.url.searchParams.get("pg_target") ?? ""
   state playground_rel = ctx.url.searchParams.get("pg_rel") ?? ""
+  state playground_underline = ctx.url.searchParams.get("pg_underline") ?? "hover"
   state playground_external = (ctx.url.searchParams.get("pg_external") ?? "false") === "true"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
@@ -22,7 +23,7 @@ page LinkDetail {
         <span class="showcase-eyebrow">Layout component</span>
         <h1>Link</h1>
         <p>Render an accessible internal or external link with target, relation, size, color, and public focus or click events.</p>
-        <div class="detail-badges"><span>8 props</span><span>1 slots</span><span>0 outputs</span><span>Theme ready</span><span>Responsive</span></div>
+        <div class="detail-badges"><span>9 props</span><span>1 slots</span><span>0 outputs</span><span>Theme ready</span><span>Responsive</span></div>
       </div>
       <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
     </header>
@@ -31,7 +32,7 @@ page LinkDetail {
       <div class="playground-workbench">
         <div class="playground-preview">
           <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><Link size='{playground_size}' color='{playground_color}' label='{playground_label}' href='{playground_href}' target='{playground_target}' rel='{playground_rel}' external='{playground_external}' class='{playground_class}' /></div>
+          <div class="playground-preview-source" data-playground-preview><Link size='{playground_size}' color='{playground_color}' label='{playground_label}' href='{playground_href}' target='{playground_target}' rel='{playground_rel}' underline='{playground_underline}' external='{playground_external}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;Link
@@ -42,8 +43,8 @@ page LinkDetail {
           
         </div>
         <form class="playground-controls" data-playground-form>
-          <header><div><span>Component props</span><strong>8 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-link-size"><span><strong>size</strong><small>string</small></span><select id="playground-link-size" name="pg_size"><option value="default" selected>default</option><option value="sm">sm</option><option value="lg">lg</option><option value="xs">xs</option><option value="md">md</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-link-color"><span><strong>color</strong><small>string</small></span><select id="playground-link-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-link-label"><span><strong>label</strong><small>string</small></span><input id="playground-link-label" name="pg_label" type="text" value="Link" /></label><label class="playground-field" for="playground-link-href"><span><strong>href</strong><small>string</small></span><input id="playground-link-href" name="pg_href" type="text" value="#link-demo" /></label><label class="playground-field" for="playground-link-target"><span><strong>target</strong><small>string</small></span><select id="playground-link-target" name="pg_target"><option value="" selected>Auto / default</option><option value="_self">_self</option><option value="_blank">_blank</option><option value="_parent">_parent</option><option value="_top">_top</option></select></label><label class="playground-field" for="playground-link-rel"><span><strong>rel</strong><small>string</small></span><input id="playground-link-rel" name="pg_rel" type="text" value="" /></label><label class="playground-toggle" for="playground-link-external"><span><strong>external</strong><small>boolean</small></span><input id="playground-link-external" name="pg_external" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-link-class"><span><strong>class</strong><small>string</small></span><input id="playground-link-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+          <header><div><span>Component props</span><strong>9 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
+          <div class="playground-fields"><label class="playground-field" for="playground-link-size"><span><strong>size</strong><small>string</small></span><select id="playground-link-size" name="pg_size"><option value="default" selected>default</option><option value="sm">sm</option><option value="lg">lg</option><option value="xs">xs</option><option value="md">md</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-link-color"><span><strong>color</strong><small>string</small></span><select id="playground-link-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-link-label"><span><strong>label</strong><small>string</small></span><input id="playground-link-label" name="pg_label" type="text" value="Link" /></label><label class="playground-field" for="playground-link-href"><span><strong>href</strong><small>string</small></span><input id="playground-link-href" name="pg_href" type="text" value="#link-demo" /></label><label class="playground-field" for="playground-link-target"><span><strong>target</strong><small>string</small></span><select id="playground-link-target" name="pg_target"><option value="" selected>Auto / default</option><option value="_self">_self</option><option value="_blank">_blank</option><option value="_parent">_parent</option><option value="_top">_top</option></select></label><label class="playground-field" for="playground-link-rel"><span><strong>rel</strong><small>string</small></span><input id="playground-link-rel" name="pg_rel" type="text" value="" /></label><label class="playground-field" for="playground-link-underline"><span><strong>underline</strong><small>string</small></span><input id="playground-link-underline" name="pg_underline" type="text" value="hover" /></label><label class="playground-toggle" for="playground-link-external"><span><strong>external</strong><small>boolean</small></span><input id="playground-link-external" name="pg_external" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-link-class"><span><strong>class</strong><small>string</small></span><input id="playground-link-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -116,7 +117,7 @@ page LinkDetail {
         </div>
       </article></div></section>
         
-        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Link"</code></td><td>No</td></tr><tr><td><code>href</code></td><td>string</td><td><code>"#"</code></td><td>No</td></tr><tr><td><code>target</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>rel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>external</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
+        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Link"</code></td><td>No</td></tr><tr><td><code>href</code></td><td>string</td><td><code>"#"</code></td><td>No</td></tr><tr><td><code>target</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>rel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>underline</code></td><td>string</td><td><code>"hover"</code></td><td>No</td></tr><tr><td><code>external</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
         <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#link-demo-1">Standard navigation link</a><a href="#link-demo-2">External resource link</a><a href="#link-demo-3">Large emphasized link</a><a href="#api">Props API</a></div>
diff --git a/examples/component-showcase/app/pages/layout.wrn b/examples/component-showcase/app/pages/layout.wrn
index 657dc60f..f98bc3ed 100644
--- a/examples/component-showcase/app/pages/layout.wrn
+++ b/examples/component-showcase/app/pages/layout.wrn
@@ -26,11 +26,11 @@ page LayoutShowcase {
       <article class="catalog-card" data-interactive-preview="false">
         <div class="catalog-card-preview">
           <div class="catalog-card-glow" aria-hidden="true"></div>
-          <div class="catalog-card-stage"><Container size="default" columns="2" maxWidth="xl" class="showcase-instance showcase-instance--1"><div class="showcase-content-block">Centered container content</div></Container></div>
+          <div class="catalog-card-stage"><Container size="default" columns="2" maxWidth="xl" centered="true" class="showcase-instance showcase-instance--1"><div class="showcase-content-block">Centered container content</div></Container></div>
         </div>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Layout</span><h2>Container</h2><p>Constrain and align page content with responsive gutters and compact, wide, or full width options.</p></div>
-          <div class="catalog-card-footer"><span>6 props · 1 slots</span><a href="/components/container">Explore component <span aria-hidden="true">→</span></a></div>
+          <div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/container">Explore component <span aria-hidden="true">→</span></a></div>
         </div>
       </article>
       <article class="catalog-card" data-interactive-preview="false">
@@ -46,11 +46,11 @@ page LayoutShowcase {
       <article class="catalog-card" data-interactive-preview="false">
         <div class="catalog-card-preview">
           <div class="catalog-card-glow" aria-hidden="true"></div>
-          <div class="catalog-card-stage"><Divider size="default" label="Related information" orientation="horizontal" class="showcase-instance showcase-instance--1" /></div>
+          <div class="catalog-card-stage"><Divider size="default" label="Related information" orientation="horizontal" variant="solid" class="showcase-instance showcase-instance--1" /></div>
         </div>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Layout</span><h2>Divider</h2><p>Separate related horizontal or vertical content with optional labels, sizes, and semantic colors.</p></div>
-          <div class="catalog-card-footer"><span>5 props · 0 slots</span><a href="/components/divider">Explore component <span aria-hidden="true">→</span></a></div>
+          <div class="catalog-card-footer"><span>6 props · 0 slots</span><a href="/components/divider">Explore component <span aria-hidden="true">→</span></a></div>
         </div>
       </article>
       <article class="catalog-card" data-interactive-preview="false">
@@ -80,7 +80,7 @@ page LayoutShowcase {
         </div>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Layout</span><h2>Grid</h2><p>Arrange arbitrary content in a responsive configurable CSS grid with stable columns, gaps, alignment, and width.</p></div>
-          <div class="catalog-card-footer"><span>6 props · 1 slots</span><a href="/components/grid">Explore component <span aria-hidden="true">→</span></a></div>
+          <div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/grid">Explore component <span aria-hidden="true">→</span></a></div>
         </div>
       </article>
       <article class="catalog-card" data-interactive-preview="false">
@@ -90,7 +90,7 @@ page LayoutShowcase {
         </div>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Layout</span><h2>Image</h2><p>Render a responsive image with explicit dimensions, loading behavior, alternative text, sizing, and rounded treatment.</p></div>
-          <div class="catalog-card-footer"><span>9 props · 1 slots</span><a href="/components/image">Explore component <span aria-hidden="true">→</span></a></div>
+          <div class="catalog-card-footer"><span>10 props · 1 slots</span><a href="/components/image">Explore component <span aria-hidden="true">→</span></a></div>
         </div>
       </article>
       <article class="catalog-card" data-interactive-preview="false">
@@ -120,7 +120,7 @@ page LayoutShowcase {
         </div>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Layout</span><h2>Link</h2><p>Render an accessible internal or external link with target, relation, size, color, and public focus or click events.</p></div>
-          <div class="catalog-card-footer"><span>8 props · 1 slots</span><a href="/components/link">Explore component <span aria-hidden="true">→</span></a></div>
+          <div class="catalog-card-footer"><span>9 props · 1 slots</span><a href="/components/link">Explore component <span aria-hidden="true">→</span></a></div>
         </div>
       </article>
       <article class="catalog-card" data-interactive-preview="false">
diff --git a/examples/component-showcase/showcase-manifest.json b/examples/component-showcase/showcase-manifest.json
index 9cfd52ee..fb0540fc 100644
--- a/examples/component-showcase/showcase-manifest.json
+++ b/examples/component-showcase/showcase-manifest.json
@@ -358,7 +358,7 @@
       "category": "layout",
       "purpose": "Constrain and align page content with responsive gutters and compact, wide, or full width options.",
       "demoCount": 3,
-      "propCount": 6,
+      "propCount": 7,
       "slots": ["default"],
       "events": [],
       "profiled": true
@@ -463,7 +463,7 @@
       "category": "layout",
       "purpose": "Separate related horizontal or vertical content with optional labels, sizes, and semantic colors.",
       "demoCount": 3,
-      "propCount": 5,
+      "propCount": 6,
       "slots": [],
       "events": [],
       "profiled": true
@@ -595,7 +595,7 @@
       "category": "layout",
       "purpose": "Arrange arbitrary content in a responsive configurable CSS grid with stable columns, gaps, alignment, and width.",
       "demoCount": 3,
-      "propCount": 6,
+      "propCount": 7,
       "slots": ["default"],
       "events": [],
       "profiled": true
@@ -631,7 +631,7 @@
       "category": "layout",
       "purpose": "Render a responsive image with explicit dimensions, loading behavior, alternative text, sizing, and rounded treatment.",
       "demoCount": 3,
-      "propCount": 9,
+      "propCount": 10,
       "slots": ["default"],
       "events": [],
       "profiled": true
@@ -715,7 +715,7 @@
       "category": "layout",
       "purpose": "Render an accessible internal or external link with target, relation, size, color, and public focus or click events.",
       "demoCount": 3,
-      "propCount": 8,
+      "propCount": 9,
       "slots": ["default"],
       "events": [],
       "profiled": true
diff --git a/packages/ui/COMPONENTS.md b/packages/ui/COMPONENTS.md
index e7eec2e3..40f5cb63 100644
--- a/packages/ui/COMPONENTS.md
+++ b/packages/ui/COMPONENTS.md
@@ -624,7 +624,7 @@ Create responsive balanced content columns with configurable count, gap, density
 Constrain and align page content with responsive gutters and compact, wide, or full width options.
 
 - Mount: `data-component="Container"`
-- Props: `size: string = "default"`, `color: string = "primary"`, `columns: number = 2`, `gap: string = "md"`, `maxWidth: string = "xl"`, `class: string = ""`
+- Props: `size: string = "default"`, `color: string = "primary"`, `columns: number = 2`, `gap: string = "md"`, `maxWidth: string = "xl"`, `centered: boolean = true`, `class: string = ""`
 - Slots: `default`
 - Outputs: None
 
@@ -642,7 +642,7 @@ Theme-aware, responsive custom scrollbar component.
 Separate related horizontal or vertical content with optional labels, sizes, and semantic colors.
 
 - Mount: `data-component="Divider"`
-- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = ""`, `orientation: string = "horizontal"`, `class: string = ""`
+- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = ""`, `orientation: string = "horizontal"`, `variant: string = "solid"`, `class: string = ""`
 - Slots: None
 - Outputs: None
 
@@ -669,7 +669,7 @@ Render structured responsive footer navigation, pre and post content, copyright
 Arrange arbitrary content in a responsive configurable CSS grid with stable columns, gaps, alignment, and width.
 
 - Mount: `data-component="Grid"`
-- Props: `size: string = "default"`, `color: string = "primary"`, `columns: number = 2`, `gap: string = "md"`, `maxWidth: string = "xl"`, `class: string = ""`
+- Props: `size: string = "default"`, `color: string = "primary"`, `columns: number = 2`, `gap: string = "md"`, `maxWidth: string = "xl"`, `minItemWidth: string = ""`, `class: string = ""`
 - Slots: `default`
 - Outputs: None
 
@@ -678,7 +678,7 @@ Arrange arbitrary content in a responsive configurable CSS grid with stable colu
 Render a responsive image with explicit dimensions, loading behavior, alternative text, sizing, and rounded treatment.
 
 - Mount: `data-component="Image"`
-- Props: `size: string = "default"`, `color: string = "primary"`, `src: string = ""`, `alt: string = ""`, `width: string = ""`, `height: string = ""`, `loading: string = "lazy"`, `rounded: boolean = false`, `class: string = ""`
+- Props: `size: string = "default"`, `color: string = "primary"`, `src: string = ""`, `alt: string = ""`, `width: string = ""`, `height: string = ""`, `loading: string = "lazy"`, `fit: string = "cover"`, `rounded: boolean = false`, `class: string = ""`
 - Slots: `default`
 - Outputs: None
 
@@ -687,7 +687,7 @@ Render a responsive image with explicit dimensions, loading behavior, alternativ
 Theme-aware, responsive kbd component.
 
 - Mount: `data-component="Kbd"`
-- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "⌘ K"`, `class: string = ""`
+- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "K"`, `class: string = ""`
 - Slots: `default`
 - Outputs: None
 
@@ -705,7 +705,7 @@ Theme-aware, responsive layout splitter component.
 Render an accessible internal or external link with target, relation, size, color, and public focus or click events.
 
 - Mount: `data-component="Link"`
-- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Link"`, `href: string = "#"`, `target: string = ""`, `rel: string = ""`, `external: boolean = false`, `class: string = ""`
+- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Link"`, `href: string = "#"`, `target: string = ""`, `rel: string = ""`, `underline: string = "hover"`, `external: boolean = false`, `class: string = ""`
 - Slots: `default`
 - Outputs: None
 
diff --git a/packages/ui/component-reference.json b/packages/ui/component-reference.json
index 24b046cf..7f543a5e 100644
--- a/packages/ui/component-reference.json
+++ b/packages/ui/component-reference.json
@@ -4153,6 +4153,13 @@
           "default": "\"xl\"",
           "options": []
         },
+        {
+          "name": "centered",
+          "type": "boolean",
+          "required": false,
+          "default": "true",
+          "options": []
+        },
         {
           "name": "class",
           "type": "string",
@@ -5194,6 +5201,13 @@
           "default": "\"horizontal\"",
           "options": []
         },
+        {
+          "name": "variant",
+          "type": "string",
+          "required": false,
+          "default": "\"solid\"",
+          "options": []
+        },
         {
           "name": "class",
           "type": "string",
@@ -6550,6 +6564,13 @@
           "default": "\"xl\"",
           "options": []
         },
+        {
+          "name": "minItemWidth",
+          "type": "string",
+          "required": false,
+          "default": "\"\"",
+          "options": []
+        },
         {
           "name": "class",
           "type": "string",
@@ -6964,6 +6985,13 @@
           "default": "\"lazy\"",
           "options": []
         },
+        {
+          "name": "fit",
+          "type": "string",
+          "required": false,
+          "default": "\"cover\"",
+          "options": []
+        },
         {
           "name": "rounded",
           "type": "boolean",
@@ -7752,7 +7780,7 @@
           "name": "label",
           "type": "string",
           "required": false,
-          "default": "\"⌘ K\"",
+          "default": "\"K\"",
           "options": []
         },
         {
@@ -7952,6 +7980,13 @@
           "default": "\"\"",
           "options": []
         },
+        {
+          "name": "underline",
+          "type": "string",
+          "required": false,
+          "default": "\"hover\"",
+          "options": []
+        },
         {
           "name": "external",
           "type": "boolean",
diff --git a/packages/ui/components/Columns.wrn b/packages/ui/components/Columns.wrn
index 6582b943..3a2c259e 100644
--- a/packages/ui/components/Columns.wrn
+++ b/packages/ui/components/Columns.wrn
@@ -1,3 +1,13 @@
+// Columns -- a simple multi-column split for page content.
+//
+//   <Columns columns={2} gap="lg">...</Columns>
+//
+// Columns and Grid overlap deliberately: Columns is the coarse two or three
+// way split of a page, and its gaps are wider for that reason. Grid is the one
+// to reach for when the items are cards and the count matters.
+//
+// NOTE: the style block uses /* */ comments only -- // is not a CSS comment
+// and silently swallows the rule that follows it.
 component Columns {
   props {
     size: string = "default"
@@ -8,28 +18,92 @@ component Columns {
     class: string = ""
   }
 
+  functions {
+    shared function columnCount() {
+      var value = Number(columns)
+      if (!value || value < 1) {
+        return 1
+      }
+      return Math.min(4, value)
+    }
+  }
+
   view {
     <div
+      {...attrs}
       data-ui-component="Columns"
+      class='wire-columns {class}'
       data-size='{size}'
       data-color='{color}'
-      data-columns='{columns}'
       data-gap='{gap}'
-      class='grid w-full grid-cols-1 items-start {class}'
-      class:max-w-3xl='maxWidth === "md"'
-      class:max-w-5xl='maxWidth === "lg"'
-      class:max-w-7xl='maxWidth === "xl"'
-      class:max-w-screen-2xl='maxWidth === "2xl"'
-      class:max-w-none='maxWidth === "full"'
-      class:md:grid-cols-2='columns >= 2'
-      class:lg:grid-cols-3='columns === 3'
-      class:lg:grid-cols-4='columns === 4'
-      class:gap-3='gap === "sm"'
-      class:gap-6='gap === "md"'
-      class:gap-10='gap === "lg"'
-      class:gap-14='gap === "xl"'
+      data-max-width='{maxWidth}'
+      data-columns='{columnCount()}'
     >
       <slot></slot>
     </div>
   }
+
+  style {
+    .wire-columns {
+      --columns-gap: 1.5rem;
+      display: grid;
+      width: 100%;
+      min-width: 0;
+      gap: var(--columns-gap);
+      grid-template-columns: 1fr;
+      align-items: start;
+    }
+
+    .wire-columns[data-max-width="md"] {
+      max-width: 48rem;
+    }
+
+    .wire-columns[data-max-width="lg"] {
+      max-width: 64rem;
+    }
+
+    .wire-columns[data-max-width="xl"] {
+      max-width: 80rem;
+    }
+
+    .wire-columns[data-max-width="2xl"] {
+      max-width: 96rem;
+    }
+
+    .wire-columns[data-max-width="full"] {
+      max-width: none;
+    }
+
+    .wire-columns[data-gap="sm"] {
+      --columns-gap: 0.75rem;
+    }
+
+    .wire-columns[data-gap="lg"] {
+      --columns-gap: 2.5rem;
+    }
+
+    .wire-columns[data-gap="xl"] {
+      --columns-gap: 3.5rem;
+    }
+
+    /*
+     * Splits at the tablet breakpoint rather than the phone one: a page split
+     * is worth keeping single-column for longer than a card deck is.
+     */
+    @media (min-width: 768px) {
+      .wire-columns:not([data-columns="1"]) {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+      }
+    }
+
+    @media (min-width: 1024px) {
+      .wire-columns[data-columns="3"] {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+      }
+
+      .wire-columns[data-columns="4"] {
+        grid-template-columns: repeat(4, minmax(0, 1fr));
+      }
+    }
+  }
 }
diff --git a/packages/ui/components/Image.wrn b/packages/ui/components/Image.wrn
index eee946e8..940b983b 100644
--- a/packages/ui/components/Image.wrn
+++ b/packages/ui/components/Image.wrn
@@ -1,3 +1,13 @@
+// Image -- a framed image with a reserved aspect ratio.
+//
+//   <Image src="/hero.jpg" alt="Dashboard" size="video" rounded={true} />
+//
+// The frame keeps its ratio whether or not the image has loaded, so the page
+// does not jump when it arrives. Without a src it renders a labelled
+// placeholder of the same shape rather than collapsing.
+//
+// NOTE: the style block uses /* */ comments only -- // is not a CSS comment
+// and silently swallows the rule that follows it.
 component Image {
   props {
     size: string = "default"
@@ -7,41 +17,111 @@ component Image {
     width: string = ""
     height: string = ""
     loading: string = "lazy"
+    fit: string = "cover"
     rounded: boolean = false
     class: string = ""
   }
 
   view {
     <figure
+      {...attrs}
       data-ui-component="Image"
-      class='relative m-0 overflow-hidden bg-[var(--wire-color-surface-soft)] {class}'
-      class:rounded-2xl='rounded'
+      class='wire-image {class}'
+      data-size='{size}'
+      data-color='{color}'
+      data-fit='{fit}'
+      data-rounded='{rounded}'
     >
-      {#if src}
-        <img
-          src='{src}'
-          alt='{alt}'
-          width='{width}'
-          height='{height}'
-          loading='{loading}'
-          decoding="async"
-          class="block h-auto w-full object-cover transition duration-300"
-          class:aspect-square='size === "square"'
-          class:aspect-video='size === "video"'
-          class:aspect-[4/3]='size === "landscape"'
-          class:aspect-[3/4]='size === "portrait"'
-        />
-      {:else}
-        <div
-          class="flex min-h-48 w-full items-center justify-center text-[var(--wire-color-text-muted)]"
-          role="img"
-          aria-label='{alt || "Image placeholder"}'
-        >
-          <span class="icon-[lucide--image] size-8" aria-hidden="true"></span>
-        </div>
-      {/if}
+      <img
+        class="wire-image__img"
+        data-show="src"
+        src='{src}'
+        alt='{alt}'
+        width='{width}'
+        height='{height}'
+        loading='{loading}'
+        decoding="async"
+      />
+
+      <div
+        class="wire-image__placeholder"
+        data-show="!src"
+        role="img"
+        aria-label='{alt || "Image placeholder"}'
+      >
+        <span class="icon-[lucide--image] wire-image__placeholder-icon" aria-hidden="true"></span>
+      </div>
 
       <slot></slot>
     </figure>
   }
+
+  style {
+    .wire-image {
+      position: relative;
+      margin: 0;
+      overflow: hidden;
+      width: 100%;
+      min-width: 0;
+      background: var(--wire-color-surface-soft);
+    }
+
+    .wire-image[data-rounded="true"] {
+      border-radius: var(--wire-radius-lg);
+    }
+
+    /*
+     * The ratio sits on the frame rather than the image, so the space is
+     * reserved before the file arrives and the page does not jump.
+     */
+    .wire-image[data-size="square"] {
+      aspect-ratio: 1 / 1;
+    }
+
+    .wire-image[data-size="video"] {
+      aspect-ratio: 16 / 9;
+    }
+
+    .wire-image[data-size="landscape"] {
+      aspect-ratio: 4 / 3;
+    }
+
+    .wire-image[data-size="portrait"] {
+      aspect-ratio: 3 / 4;
+    }
+
+    .wire-image__img {
+      display: block;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    .wire-image[data-fit="contain"] .wire-image__img {
+      object-fit: contain;
+    }
+
+    .wire-image[data-fit="fill"] .wire-image__img {
+      object-fit: fill;
+    }
+
+    .wire-image[data-size="default"] .wire-image__img {
+      height: auto;
+    }
+
+    .wire-image__placeholder {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      min-height: 12rem;
+      height: 100%;
+      color: var(--wire-color-text-muted);
+    }
+
+    .wire-image__placeholder-icon {
+      width: 2rem;
+      height: 2rem;
+    }
+  }
 }
diff --git a/packages/ui/components/Kbd.wrn b/packages/ui/components/Kbd.wrn
index a959b1cd..b7a99da8 100644
--- a/packages/ui/components/Kbd.wrn
+++ b/packages/ui/components/Kbd.wrn
@@ -1,9 +1,55 @@
+// Kbd -- a keyboard key.
+//
+//   <Kbd label="Ctrl" />
+//
+// Deliberately small. A kbd element is a kbd element; the work here is making
+// it look like a key and follow the theme.
+//
+// NOTE: the style block uses /* */ comments only -- // is not a CSS comment
+// and silently swallows the rule that follows it.
 component Kbd {
   props {
     size: string = "default"
     color: string = "primary"
-    label: string = "⌘ K"
+    label: string = "K"
     class: string = ""
   }
-  view { <kbd class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--kbd {class}"><slot>{label}</slot></kbd> }
+
+  view {
+    <kbd {...attrs} class='wire-kbd {class}' data-size='{size}' data-color='{color}'>
+      <slot>{label}</slot>
+    </kbd>
+  }
+
+  style {
+    .wire-kbd {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-width: 1.6rem;
+      padding: 0.15rem 0.4rem;
+      border: 1px solid var(--wire-color-border);
+      /* The lower edge is what reads as a physical key. */
+      border-bottom-width: 2px;
+      border-radius: var(--wire-radius-sm);
+      background: var(--wire-color-surface-soft);
+      color: var(--wire-color-text);
+      font-family: inherit;
+      font-size: 0.78rem;
+      font-weight: 600;
+      line-height: 1;
+    }
+
+    .wire-kbd[data-size="sm"] {
+      min-width: 1.4rem;
+      padding: 0.1rem 0.3rem;
+      font-size: 0.7rem;
+    }
+
+    .wire-kbd[data-size="lg"] {
+      min-width: 2rem;
+      padding: 0.3rem 0.55rem;
+      font-size: 0.9rem;
+    }
+  }
 }
diff --git a/packages/ui/components/Link.wrn b/packages/ui/components/Link.wrn
index 25fc6181..17f3531d 100644
--- a/packages/ui/components/Link.wrn
+++ b/packages/ui/components/Link.wrn
@@ -1,3 +1,13 @@
+// Link -- a text link that follows the theme.
+//
+//   <Link href="/docs" label="Documentation" />
+//   <Link href="https://example.com" label="Spec" external={true} />
+//
+// external adds rel="noopener noreferrer" and an outbound icon, so the reader
+// is told the link leaves the site before they follow it.
+//
+// NOTE: the style block uses /* */ comments only -- // is not a CSS comment
+// and silently swallows the rule that follows it.
 component Link {
   props {
     size: string = "default"
@@ -6,42 +16,122 @@ component Link {
     href: string = "#"
     target: string = ""
     rel: string = ""
+    underline: string = "hover"
     external: boolean = false
     class: string = ""
   }
 
   view {
     <a
+      {...attrs}
       data-ui-component="Link"
+      class='wire-link {class}'
       href='{href}'
       target='{target}'
       rel='{external ? (rel || "noopener noreferrer") : rel}'
-      class='inline-flex min-w-0 items-center gap-1.5 rounded-md font-semibold underline-offset-4 outline-none transition-colors focus-visible:ring-2 focus-visible:ring-[var(--wire-color-focus)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--wire-color-background)] {class}'
-      class:text-xs='size === "xs"'
-      class:text-sm='size === "sm" || size === "default"'
-      class:text-base='size === "md"'
-      class:text-lg='size === "lg"'
-      class:text-[var(--wire-color-primary)]='color === "primary"'
-      class:hover:text-[var(--wire-color-primary-hover)]='color === "primary"'
-      class:text-[var(--wire-color-secondary)]='color === "secondary"'
-      class:hover:text-[var(--wire-color-secondary-hover)]='color === "secondary"'
-      class:text-[var(--wire-color-success)]='color === "success"'
-      class:text-[var(--wire-color-warning-text)]='color === "warning"'
-      class:text-[var(--wire-color-danger)]='color === "danger"'
-      class:text-[var(--wire-color-info)]='color === "info"'
-      class:text-[var(--wire-color-text)]='color === "neutral"'
-      class:hover:underline='external === false'
+      data-size='{size}'
+      data-color='{color}'
+      data-underline='{underline}'
+      data-external='{external}'
     >
-      <span class="truncate">{label}</span>
-
-      {#if external}
-        <span
-          class="icon-[lucide--external-link] size-3.5 shrink-0"
-          aria-hidden="true"
-        ></span>
-      {/if}
-
+      <span class="wire-link__label">{label}</span>
+      <span
+        class="icon-[lucide--external-link] wire-link__icon"
+        data-show="external"
+        aria-hidden="true"
+      ></span>
       <slot></slot>
     </a>
   }
+
+  style {
+    .wire-link {
+      --link-tone: var(--wire-color-primary);
+      --link-tone-hover: var(--wire-color-primary-hover);
+      display: inline-flex;
+      align-items: center;
+      gap: 0.35rem;
+      min-width: 0;
+      border-radius: var(--wire-radius-sm);
+      color: var(--link-tone);
+      font-size: 0.875rem;
+      font-weight: 600;
+      text-decoration: none;
+      text-underline-offset: 4px;
+      transition: color 140ms ease;
+    }
+
+    .wire-link[data-color="secondary"] {
+      --link-tone: var(--wire-color-secondary);
+      --link-tone-hover: var(--wire-color-secondary-hover);
+    }
+
+    .wire-link[data-color="success"] {
+      --link-tone: var(--wire-color-success);
+      --link-tone-hover: var(--wire-color-success);
+    }
+
+    .wire-link[data-color="warning"] {
+      --link-tone: var(--wire-color-warning-text);
+      --link-tone-hover: var(--wire-color-warning-text);
+    }
+
+    .wire-link[data-color="danger"] {
+      --link-tone: var(--wire-color-danger);
+      --link-tone-hover: var(--wire-color-danger);
+    }
+
+    .wire-link[data-color="info"] {
+      --link-tone: var(--wire-color-info);
+      --link-tone-hover: var(--wire-color-info);
+    }
+
+    .wire-link[data-color="neutral"] {
+      --link-tone: var(--wire-color-text);
+      --link-tone-hover: var(--wire-color-text);
+    }
+
+    .wire-link[data-size="xs"] {
+      font-size: 0.75rem;
+    }
+
+    .wire-link[data-size="md"] {
+      font-size: 1rem;
+    }
+
+    .wire-link[data-size="lg"] {
+      font-size: 1.125rem;
+    }
+
+    .wire-link[data-underline="always"] {
+      text-decoration: underline;
+    }
+
+    .wire-link[data-underline="hover"]:hover {
+      text-decoration: underline;
+    }
+
+    .wire-link:hover {
+      color: var(--link-tone-hover);
+    }
+
+    .wire-link:focus-visible {
+      outline: 2px solid var(--wire-color-focus);
+      outline-offset: 2px;
+    }
+
+    /* The label truncates; the outbound icon must not shrink with it. */
+    .wire-link__label {
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .wire-link__icon {
+      flex: 0 0 auto;
+      width: 0.875rem;
+      height: 0.875rem;
+    }
+  }
 }
diff --git a/packages/ui/components/Typography.wrn b/packages/ui/components/Typography.wrn
index 5c3bc112..3d8fe3d0 100644
--- a/packages/ui/components/Typography.wrn
+++ b/packages/ui/components/Typography.wrn
@@ -11,26 +11,74 @@ component Typography {
   view {
     <div
       data-ui-component="Typography"
-      class='wire-typography text-[var(--wire-color-text)] {class}'
-      class:max-w-3xl='maxWidth === "md"'
-      class:max-w-5xl='maxWidth === "lg"'
-      class:max-w-7xl='maxWidth === "xl"'
-      class:max-w-none='maxWidth === "full"'
-      class:text-sm='size === "sm"'
-      class:text-base='size === "default" || size === "md"'
-      class:text-lg='size === "lg"'
-      class:columns-1='columns === 1'
-      class:md:columns-2='columns === 2'
-      class:lg:columns-3='columns === 3'
-      class:gap-4='gap === "sm"'
-      class:gap-8='gap === "md"'
-      class:gap-12='gap === "lg"'
+      class='wire-typography {class}'
+      data-size='{size}'
+      data-columns='{columns}'
+      data-gap='{gap}'
+      data-max-width='{maxWidth}'
     >
       <slot></slot>
     </div>
   }
 
   style {
+    .wire-typography {
+      color: var(--wire-color-text);
+      font-size: 1rem;
+    }
+
+    .wire-typography[data-size="sm"] {
+      font-size: 0.875rem;
+    }
+
+    .wire-typography[data-size="lg"] {
+      font-size: 1.125rem;
+    }
+
+    .wire-typography[data-max-width="md"] {
+      max-width: 48rem;
+    }
+
+    .wire-typography[data-max-width="lg"] {
+      max-width: 64rem;
+    }
+
+    .wire-typography[data-max-width="xl"] {
+      max-width: 80rem;
+    }
+
+    .wire-typography[data-max-width="full"] {
+      max-width: none;
+    }
+
+    /*
+     * Multi-column prose only below a comfortable reading width; a narrow
+     * screen split into columns is unreadable.
+     */
+    .wire-typography[data-gap="sm"] {
+      column-gap: 1rem;
+    }
+
+    .wire-typography[data-gap="md"] {
+      column-gap: 2rem;
+    }
+
+    .wire-typography[data-gap="lg"] {
+      column-gap: 3rem;
+    }
+
+    @media (min-width: 768px) {
+      .wire-typography[data-columns="2"] {
+        column-count: 2;
+      }
+    }
+
+    @media (min-width: 1024px) {
+      .wire-typography[data-columns="3"] {
+        column-count: 3;
+      }
+    }
+
     .wire-typography :where(h1, h2, h3, h4) {
       color: var(--wire-color-text);
       font-weight: 700;
diff --git a/packages/ui/components/container.wrn b/packages/ui/components/container.wrn
index 44e9e190..b7ecf9a4 100644
--- a/packages/ui/components/container.wrn
+++ b/packages/ui/components/container.wrn
@@ -1,46 +1,162 @@
+// Container -- a centred, width-limited page wrapper.
+//
+//   <Container maxWidth="lg">...</Container>
+//
+// It also accepts columns and gap, because it always has and applications
+// depend on it. Reach for Grid when a grid is the point; reach for Container
+// when the point is the reading width.
+//
+// NOTE: the style block uses /* */ comments only -- // is not a CSS comment
+// and silently swallows the rule that follows it.
 component Container {
   props {
     size: string = "default"
     color: string = "primary"
+    // Stays 2 to match what shipped. A published default cannot be changed
+    // without silently reflowing every Container already in use.
     columns: number = 2
     gap: string = "md"
     maxWidth: string = "xl"
+    centered: boolean = true
     class: string = ""
   }
 
+  functions {
+    shared function columnCount() {
+      var value = Number(columns)
+      if (!value || value < 1) {
+        return 1
+      }
+      return Math.min(6, value)
+    }
+  }
+
   view {
     <div
+      {...attrs}
       data-ui-component="Container"
+      class='wire-container {class}'
       data-size='{size}'
       data-color='{color}'
-      data-columns='{columns}'
       data-gap='{gap}'
       data-max-width='{maxWidth}'
-      class='mx-auto w-full {class}'
-      class:max-w-3xl='maxWidth === "md"'
-      class:max-w-5xl='maxWidth === "lg"'
-      class:max-w-7xl='maxWidth === "xl" || maxWidth === "wide"'
-      class:max-w-screen-2xl='maxWidth === "2xl"'
-      class:max-w-none='maxWidth === "full"'
-      class:px-4='size === "compact" || size === "default"'
-      class:px-5='size === "comfortable"'
-      class:px-6='size === "spacious"'
-      class:sm:px-6='size !== "compact"'
-      class:lg:px-8='size === "default" || size === "comfortable" || size === "spacious"'
-      class:grid='columns > 1'
-      class:grid-cols-1='columns > 1'
-      class:sm:grid-cols-2='columns === 2 || columns === 3 || columns === 4 || columns === 5 || columns === 6'
-      class:lg:grid-cols-3='columns === 3'
-      class:lg:grid-cols-4='columns === 4'
-      class:lg:grid-cols-5='columns === 5'
-      class:lg:grid-cols-6='columns === 6'
-      class:gap-2='gap === "xs"'
-      class:gap-3='gap === "sm"'
-      class:gap-5='gap === "md"'
-      class:gap-8='gap === "lg"'
-      class:gap-10='gap === "xl"'
+      data-centered='{centered}'
+      data-columns='{columnCount()}'
     >
       <slot></slot>
     </div>
   }
+
+  style {
+    .wire-container {
+      --container-gap: 1.25rem;
+      width: 100%;
+      min-width: 0;
+      padding-inline: 1rem;
+    }
+
+    .wire-container[data-centered="true"] {
+      margin-inline: auto;
+    }
+
+    /* Reading widths, not breakpoints: the cap is about line length. */
+    .wire-container[data-max-width="md"] {
+      max-width: 48rem;
+    }
+
+    .wire-container[data-max-width="lg"] {
+      max-width: 64rem;
+    }
+
+    .wire-container[data-max-width="xl"],
+    .wire-container[data-max-width="wide"] {
+      max-width: 80rem;
+    }
+
+    .wire-container[data-max-width="2xl"] {
+      max-width: 96rem;
+    }
+
+    .wire-container[data-max-width="full"] {
+      max-width: none;
+    }
+
+    .wire-container[data-size="compact"] {
+      padding-inline: 1rem;
+    }
+
+    .wire-container[data-size="comfortable"] {
+      padding-inline: 1.25rem;
+    }
+
+    .wire-container[data-size="spacious"] {
+      padding-inline: 1.5rem;
+    }
+
+    .wire-container[data-gap="xs"] {
+      --container-gap: 0.5rem;
+    }
+
+    .wire-container[data-gap="sm"] {
+      --container-gap: 0.75rem;
+    }
+
+    .wire-container[data-gap="lg"] {
+      --container-gap: 2rem;
+    }
+
+    .wire-container[data-gap="xl"] {
+      --container-gap: 2.5rem;
+    }
+
+    /*
+     * Columns are opt-in. One column stays plain flow so a container does not
+     * quietly turn every page into a grid.
+     */
+    .wire-container:not([data-columns="1"]) {
+      display: grid;
+      gap: var(--container-gap);
+      grid-template-columns: 1fr;
+    }
+
+    @media (min-width: 640px) {
+      .wire-container[data-columns="2"],
+      .wire-container[data-columns="3"],
+      .wire-container[data-columns="4"],
+      .wire-container[data-columns="5"],
+      .wire-container[data-columns="6"] {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+      }
+
+      .wire-container[data-size="default"],
+      .wire-container[data-size="comfortable"],
+      .wire-container[data-size="spacious"] {
+        padding-inline: 1.5rem;
+      }
+    }
+
+    @media (min-width: 1024px) {
+      .wire-container[data-columns="3"] {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+      }
+
+      .wire-container[data-columns="4"] {
+        grid-template-columns: repeat(4, minmax(0, 1fr));
+      }
+
+      .wire-container[data-columns="5"] {
+        grid-template-columns: repeat(5, minmax(0, 1fr));
+      }
+
+      .wire-container[data-columns="6"] {
+        grid-template-columns: repeat(6, minmax(0, 1fr));
+      }
+
+      .wire-container[data-size="default"],
+      .wire-container[data-size="comfortable"],
+      .wire-container[data-size="spacious"] {
+        padding-inline: 2rem;
+      }
+    }
+  }
 }
diff --git a/packages/ui/components/divider.wrn b/packages/ui/components/divider.wrn
index 6419bd15..8c1303c5 100644
--- a/packages/ui/components/divider.wrn
+++ b/packages/ui/components/divider.wrn
@@ -1,69 +1,141 @@
+// Divider -- a rule between sections, optionally labelled.
+//
+//   <Divider />
+//   <Divider label="or" />
+//   <Divider orientation="vertical" />
+//
+// The label sits between two rules rather than on top of one, so the text
+// never overlaps the line at any width.
+//
+// NOTE: the style block uses /* */ comments only -- // is not a CSS comment
+// and silently swallows the rule that follows it.
 component Divider {
   props {
     size: string = "default"
     color: string = "primary"
     label: string = ""
     orientation: string = "horizontal"
+    variant: string = "solid"
     class: string = ""
   }
 
+  functions {
+    shared function isVertical() {
+      return orientation === "vertical"
+    }
+
+    // The rule only takes the component colour when there is a label. A plain
+    // divider is chrome and should stay the border token.
+    shared function tone() {
+      return label ? color : "border"
+    }
+  }
+
   view {
     <div
       {...attrs}
       data-ui-component="Divider"
+      class='wire-divider {class}'
       data-size='{size}'
       data-color='{color}'
+      data-tone='{tone()}'
+      data-variant='{variant}'
       data-orientation='{orientation}'
-      class='w-full {class}'
-      class:h-full='orientation === "vertical"'
-      class:w-auto='orientation === "vertical"'
+      data-labelled='{label ? "true" : "false"}'
+      role="separator"
+      aria-orientation='{isVertical() ? "vertical" : "horizontal"}'
     >
-      {#if orientation === "vertical"}
-        <div
-          role="separator"
-          aria-orientation="vertical"
-          class="mx-3 h-full min-h-6 border-l border-[var(--wire-color-border)]"
-          class:border-l-2='size === "lg"'
-          class:border-[var(--wire-color-primary)]='color === "primary"'
-          class:border-[var(--wire-color-secondary)]='color === "secondary"'
-          class:border-[var(--wire-color-success)]='color === "success"'
-          class:border-[var(--wire-color-warning)]='color === "warning"'
-          class:border-[var(--wire-color-danger)]='color === "danger"'
-        ></div>
-      {:else}
-        <div
-          role="separator"
-          aria-orientation="horizontal"
-          class="flex w-full items-center gap-4"
-        >
-          <span
-            class="h-px flex-1 bg-[var(--wire-color-border)]"
-            class:h-0.5='size === "lg"'
-            class:bg-[var(--wire-color-primary)]='color === "primary" && label !== ""'
-            class:bg-[var(--wire-color-secondary)]='color === "secondary" && label !== ""'
-            class:bg-[var(--wire-color-success)]='color === "success" && label !== ""'
-            class:bg-[var(--wire-color-warning)]='color === "warning" && label !== ""'
-            class:bg-[var(--wire-color-danger)]='color === "danger" && label !== ""'
-            aria-hidden="true"
-          ></span>
-
-          {#if label}
-            <span class="shrink-0 text-xs font-bold uppercase tracking-[0.16em] text-[var(--wire-color-text-muted)]">
-              {label}
-            </span>
-            <span
-              class="h-px flex-1 bg-[var(--wire-color-border)]"
-              class:h-0.5='size === "lg"'
-              class:bg-[var(--wire-color-primary)]='color === "primary"'
-              class:bg-[var(--wire-color-secondary)]='color === "secondary"'
-              class:bg-[var(--wire-color-success)]='color === "success"'
-              class:bg-[var(--wire-color-warning)]='color === "warning"'
-              class:bg-[var(--wire-color-danger)]='color === "danger"'
-              aria-hidden="true"
-            ></span>
-          {/if}
-        </div>
-      {/if}
+      <span class="wire-divider__rule" aria-hidden="true"></span>
+      <span class="wire-divider__label" data-show="label">{label}</span>
+      <span class="wire-divider__rule" data-show="label" aria-hidden="true"></span>
     </div>
   }
+
+  style {
+    .wire-divider {
+      --divider-tone: var(--wire-color-border);
+      --divider-thickness: 1px;
+      display: flex;
+      align-items: center;
+      gap: 1rem;
+      width: 100%;
+      min-width: 0;
+    }
+
+    .wire-divider[data-tone="primary"] {
+      --divider-tone: var(--wire-color-primary);
+    }
+
+    .wire-divider[data-tone="secondary"] {
+      --divider-tone: var(--wire-color-secondary);
+    }
+
+    .wire-divider[data-tone="success"] {
+      --divider-tone: var(--wire-color-success);
+    }
+
+    .wire-divider[data-tone="warning"] {
+      --divider-tone: var(--wire-color-warning);
+    }
+
+    .wire-divider[data-tone="danger"] {
+      --divider-tone: var(--wire-color-danger);
+    }
+
+    .wire-divider[data-size="lg"] {
+      --divider-thickness: 2px;
+    }
+
+    .wire-divider__rule {
+      flex: 1 1 auto;
+      height: var(--divider-thickness);
+      background: var(--divider-tone);
+    }
+
+    .wire-divider[data-variant="dashed"] .wire-divider__rule {
+      height: 0;
+      background: transparent;
+      border-top: var(--divider-thickness) dashed var(--divider-tone);
+    }
+
+    .wire-divider[data-variant="dotted"] .wire-divider__rule {
+      height: 0;
+      background: transparent;
+      border-top: var(--divider-thickness) dotted var(--divider-tone);
+    }
+
+    .wire-divider__label {
+      flex: 0 0 auto;
+      color: var(--wire-color-text-muted);
+      font-size: 0.72rem;
+      font-weight: 700;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .wire-divider[data-orientation="vertical"] {
+      flex-direction: column;
+      width: auto;
+      height: 100%;
+      min-height: 1.5rem;
+      margin-inline: 0.75rem;
+    }
+
+    .wire-divider[data-orientation="vertical"] .wire-divider__rule {
+      width: var(--divider-thickness);
+      height: auto;
+    }
+
+    .wire-divider[data-orientation="vertical"][data-variant="dashed"] .wire-divider__rule {
+      width: 0;
+      border-top: 0;
+      border-left: var(--divider-thickness) dashed var(--divider-tone);
+    }
+
+    .wire-divider[data-orientation="vertical"][data-variant="dotted"] .wire-divider__rule {
+      width: 0;
+      border-top: 0;
+      border-left: var(--divider-thickness) dotted var(--divider-tone);
+    }
+  }
 }
diff --git a/packages/ui/components/grid.wrn b/packages/ui/components/grid.wrn
index fd3bf5dc..8ae08c5d 100644
--- a/packages/ui/components/grid.wrn
+++ b/packages/ui/components/grid.wrn
@@ -1,3 +1,13 @@
+// Grid -- an equal-track grid that collapses on small screens.
+//
+//   <Grid columns={3} gap="lg">...</Grid>
+//
+// Pass minItemWidth to let the browser decide the count instead: the track
+// list becomes auto-fit, which reflows continuously rather than at fixed
+// breakpoints and suits card decks whose item count is not known.
+//
+// NOTE: the style block uses /* */ comments only -- // is not a CSS comment
+// and silently swallows the rule that follows it.
 component Grid {
   props {
     size: string = "default"
@@ -5,36 +15,124 @@ component Grid {
     columns: number = 2
     gap: string = "md"
     maxWidth: string = "xl"
+    // When set, the count is derived from the available width instead of the
+    // columns prop. Accepts any CSS length.
+    minItemWidth: string = ""
     class: string = ""
   }
 
+  functions {
+    shared function columnCount() {
+      var value = Number(columns)
+      if (!value || value < 1) {
+        return 1
+      }
+      return Math.min(6, value)
+    }
+
+    shared function autoTrack() {
+      return minItemWidth ? "repeat(auto-fit, minmax(" + minItemWidth + ", 1fr))" : ""
+    }
+  }
+
   view {
     <div
+      {...attrs}
       data-ui-component="Grid"
+      class='wire-grid {class}'
       data-size='{size}'
       data-color='{color}'
-      data-columns='{columns}'
       data-gap='{gap}'
-      class='grid w-full grid-cols-1 {class}'
-      class:max-w-3xl='maxWidth === "md"'
-      class:max-w-5xl='maxWidth === "lg"'
-      class:max-w-7xl='maxWidth === "xl"'
-      class:max-w-screen-2xl='maxWidth === "2xl"'
-      class:max-w-none='maxWidth === "full"'
-      class:sm:grid-cols-2='columns >= 2'
-      class:lg:grid-cols-3='columns === 3'
-      class:lg:grid-cols-4='columns === 4'
-      class:lg:grid-cols-5='columns === 5'
-      class:lg:grid-cols-6='columns === 6'
-      class:gap-2='gap === "xs"'
-      class:gap-3='gap === "sm"'
-      class:gap-5='gap === "md"'
-      class:gap-8='gap === "lg"'
-      class:gap-10='gap === "xl"'
-      class:items-start='size === "compact"'
-      class:items-stretch='size !== "compact"'
+      data-max-width='{maxWidth}'
+      data-columns='{columnCount()}'
+      data-auto='{minItemWidth ? "true" : "false"}'
+      style='--grid-auto-track:{autoTrack()};'
     >
       <slot></slot>
     </div>
   }
+
+  style {
+    .wire-grid {
+      --grid-gap: 1.25rem;
+      display: grid;
+      width: 100%;
+      min-width: 0;
+      gap: var(--grid-gap);
+      grid-template-columns: 1fr;
+      align-items: stretch;
+    }
+
+    .wire-grid[data-size="compact"] {
+      align-items: start;
+    }
+
+    .wire-grid[data-max-width="md"] {
+      max-width: 48rem;
+    }
+
+    .wire-grid[data-max-width="lg"] {
+      max-width: 64rem;
+    }
+
+    .wire-grid[data-max-width="xl"] {
+      max-width: 80rem;
+    }
+
+    .wire-grid[data-max-width="2xl"] {
+      max-width: 96rem;
+    }
+
+    .wire-grid[data-max-width="full"] {
+      max-width: none;
+    }
+
+    .wire-grid[data-gap="xs"] {
+      --grid-gap: 0.5rem;
+    }
+
+    .wire-grid[data-gap="sm"] {
+      --grid-gap: 0.75rem;
+    }
+
+    .wire-grid[data-gap="lg"] {
+      --grid-gap: 2rem;
+    }
+
+    .wire-grid[data-gap="xl"] {
+      --grid-gap: 2.5rem;
+    }
+
+    /*
+     * auto-fit needs no breakpoints, so it wins over the fixed counts below
+     * and applies at every width.
+     */
+    .wire-grid[data-auto="true"] {
+      grid-template-columns: var(--grid-auto-track);
+    }
+
+    @media (min-width: 640px) {
+      .wire-grid[data-auto="false"]:not([data-columns="1"]) {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+      }
+    }
+
+    @media (min-width: 1024px) {
+      .wire-grid[data-auto="false"][data-columns="3"] {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+      }
+
+      .wire-grid[data-auto="false"][data-columns="4"] {
+        grid-template-columns: repeat(4, minmax(0, 1fr));
+      }
+
+      .wire-grid[data-auto="false"][data-columns="5"] {
+        grid-template-columns: repeat(5, minmax(0, 1fr));
+      }
+
+      .wire-grid[data-auto="false"][data-columns="6"] {
+        grid-template-columns: repeat(6, minmax(0, 1fr));
+      }
+    }
+  }
 }
diff --git a/packages/ui/test/ui.test.ts b/packages/ui/test/ui.test.ts
index 125d3757..d71c2960 100644
--- a/packages/ui/test/ui.test.ts
+++ b/packages/ui/test/ui.test.ts
@@ -3019,3 +3019,42 @@ test("custom scrollbar styles the scrollbar and drops its fake output", async ()
   expect(style).toContain("--scrollbar-thickness");
   expect(style).toContain("18rem");
 });
+
+test("layout components ship their own styles instead of Tailwind utilities", () => {
+  /*
+   * These were built from utility classes and class: conditionals. That works
+   * only where Tailwind is present, and a variant cost a dozen lines of
+   * conditionals. They now carry wire-* classes, a local style block, and
+   * data attributes the style block selects on.
+   */
+  const migrated = [
+    "Container",
+    "Columns",
+    "Grid",
+    "Divider",
+    "Image",
+    "Link",
+    "Typography",
+    "Kbd",
+    "LayoutSplitter",
+    "CustomScrollbar",
+  ];
+  const utility =
+    /class:(grid-cols-|sm:|lg:|md:|max-w-|gap-[0-9]|px-[0-9]|py-[0-9]|border-l|bg-\[|h-0|text-xs|items-)/;
+
+  for (const name of migrated) {
+    const source = readFileSync(uiComponentPath(name), "utf8");
+    expect({ name, hasStyleBlock: /^\s{2}style \{/m.test(source) }).toEqual({
+      name,
+      hasStyleBlock: true,
+    });
+    expect({ name, usesUtilityConditionals: utility.test(source) }).toEqual({
+      name,
+      usesUtilityConditionals: false,
+    });
+    expect({ name, hasWireClass: /class='wire-[a-z-]+/.test(source) }).toEqual({
+      name,
+      hasWireClass: true,
+    });
+  }
+});