actual-css 0.11.1 → 0.13.0

package/docs/pages/enhancements/status-bar.md

@@ -31,14 +31,14 @@ fails to submit shows its `data-validation-message` in the status bar with the
 stays optional.
 
 ```html demo
-<form class="needs-validation" data-enhance="validation" data-validation-message="Please check the highlighted fields.">
+<form class="stack needs-validation" data-enhance="validation" data-validation-message="Please check the highlighted fields.">
   <label class="field">
     <span class="field-label">Email</span>
     <input class="input" type="email" name="email" required
            aria-describedby="sb-email-error" />
     <span class="field-error" id="sb-email-error" role="alert">Enter a valid email.</span>
   </label>
-  <div class="form-actions">
+  <div class="cluster form-actions">
     <button class="btn primary" type="submit">Submit</button>
   </div>
 </form>

package/docs/pages/enhancements/tabs.md

@@ -14,14 +14,17 @@
 
 - Use real tab semantics when panels switch in place.
 - Use normal links and `aria-current="page"` for page navigation that only looks like tabs.
-- On that link variant, `aria-current="page"` on the current link gets the same
-  color and underline treatment as `aria-selected="true"` on a widget tab;
-  `primary` tints it.
+- On that link variant, `aria-current="page"` gets the same color and
+  underline treatment as `aria-selected="true"` on a widget tab; `primary`
+  tints it. A flyout trigger takes `"true"` (see below); any other value is
+  inert.
 - Tab selection never changes text metrics: the active tab keeps the shared
   weight and is marked by color and the indicator line.
 - JavaScript owns roving `tabindex`, `aria-selected`, `hidden`, and keyboard behavior.
 - Left/Right select tabs and wrap at the ends. Home/End jump to first/last. Down moves focus into the selected panel.
 - A tab list needs both `.tabs` and `role="tablist"`; `.tab` styles each trigger.
+  A tab belongs to its closest `role="tablist"`. `data-enhance="tabs"` on an
+  element without that role wires nothing and warns in the console.
 - Naming follows the container/item convention (like `menu` / `menu-item`):
   `.tabs` is the strip, `.tab` is one trigger. The JS module
   (`actual-css/js/tab`) is named for the file; the behavior token
@@ -86,6 +89,74 @@ JavaScript involved:
 </nav>
 ```
 
+## Equal-width tabs
+
+To make a few tabs share the strip's width (segmented, full-width, fill), set
+`--tab-flex: 1 1 0` on the strip. `.switcher` does not apply here: a tab strip
+never wraps, so it could never stack.
+
+```html demo
+<nav aria-label="Pricing sections">
+  <ul class="tabs" style="--tab-flex: 1 1 0">
+    <li><a class="tab primary" href="#reasons" aria-current="page">Reasons</a></li>
+    <li><a class="tab" href="#rates">Rates</a></li>
+  </ul>
+</nav>
+```
+
+## Too many tabs
+
+A horizontal strip is one row and never wraps, nor does a label: a second line
+would not match the Left/Right keys and reads as a nested level. When the tabs
+do not fit (narrow screen, mobile, long translations), the strip scrolls
+horizontally without a scrollbar; in supporting browsers, the edges it can
+still scroll toward fade out. Selecting or focusing the tab clipped at the edge
+scrolls it into view with the next one peeking, so a click, the arrow keys or a
+swipe move along the strip. A tab selected in the markup starts in view too,
+when the strip is visible at connect; the placement moves the strip only, never
+the page. In supporting browsers, so does the current link tab (or flyout
+trigger), without the runtime; elsewhere the strip starts at its first tab. A
+vertical strip (`aria-orientation="vertical"`) keeps wrapping its labels.
+
+Scrolling is the fallback, not a responsive design. If a strip regularly
+overflows, shorten the labels, group sections, or switch to a vertical rail.
+
+## Tab with a flyout
+
+In navigation tabs, a `.tab` can be a [flyout](flyout.md) trigger for a group of
+pages. The link to the current page inside its panel carries
+`aria-current="page"`. The trigger is not a page, so it takes
+`aria-current="true"` while its panel holds the current page: the section is
+the current item of the strip. This is the only place a `.tab` takes `true`.
+
+```html demo
+<nav aria-label="Account">
+  <ul class="tabs">
+    <li><a class="tab" href="#profile">Profile</a></li>
+    <li><a class="tab" href="#security">Security</a></li>
+    <li class="flyout-trigger">
+      <button class="tab"
+              type="button"
+              data-enhance="flyout"
+              aria-current="true"
+              aria-expanded="false"
+              aria-controls="billing-menu">
+        Billing <i class="ti ti-chevron-down" aria-hidden="true"></i>
+      </button>
+      <ul class="flyout menu" id="billing-menu" hidden>
+        <li><a class="menu-item" href="#invoices" aria-current="page">Invoices</a></li>
+        <li><a class="menu-item" href="#payment">Payment methods</a></li>
+      </ul>
+    </li>
+  </ul>
+</nav>
+```
+
+Do not put a flyout trigger in a `role="tablist"`: a tablist holds only
+`role="tab"` items, and the arrow keys of the two widgets collide.
+
 ## CSS hooks
 
+- `--tab-flex` — flex of each item; set `1 1 0` on the strip for equal-width tabs
+  (segmented, fill the width). A strip that cannot fit its labels still scrolls.
 - `--tab-gap` — space between an icon and the label text (default `0.375em`).

package/docs/pages/examples/overview.md

@@ -14,7 +14,7 @@ rest show it composed, isolated, or under stress.
 
 ### Start here
 
-- [Visual guide](../../demo/templates/visual-guide.html) - seventeen illustrated figures on the spacing scale, the layout primitives, and density versus local size
+- [Visual guide](../../demo/templates/visual-guide.html) - twenty illustrated figures on the spacing scale, the layout primitives, and rhythm versus density versus local size
 - [Color guide](../../demo/templates/color-guide.html) - theming principles measured live on `ocean` and `sunset`, in light and dark, as `data-theme` islands
 - [Kitchen sink](../../demo/templates/kitchen-sink.html) - one-screen test bed for themes, scopes, variants and interactions
 
@@ -60,6 +60,7 @@ extension points.
 
 - [Data grid](../../demo/templates/data-grid.html) - an external data grid component themed with Actual tokens (sort, filter, search, selection)
 - [Combobox](../../demo/templates/combobox.html) - an external combobox themed with Actual tokens (search, tags, autocomplete)
+- [Date fields](../../demo/templates/date-fields.html) - a native date input, a masked text field and an external date picker on Actual tokens, side by side
 
 ## Sites
 

package/docs/pages/forms/date-picker.md

@@ -0,0 +1,90 @@
+# Date picker
+
+> A JavaScript date picker is not shipped by the framework — the native `<input type="date">` stays the baseline. Use `data-mask` for a fixed text shape, or theme an external picker with Actual tokens.
+
+The native control is the default: a real calendar, no JavaScript, and an ISO
+`yyyy-mm-dd` value whatever the platform displays. Reach for an external picker
+only when the product needs a shape the native control cannot express — a month
+grid for a range, a typed constraint, a styled calendar.
+
+**Related terms:** date field, datepicker, calendar, native date, date input, masked date, input mask, date range.
+
+## Native baseline
+
+```html demo
+<label class="field">
+  <span class="field-label">Start date</span>
+  <input class="input" type="date" />
+</label>
+```
+
+## Masked text field
+
+`data-mask` structures a plain text field to a fixed shape and the `date` rule
+validates meaning. The mask enforces shape, not validity, so `2026-13-40` needs
+the rule (or server validation).
+
+```html demo
+<label class="field">
+  <span class="field-label">Date</span>
+  <input class="input" data-mask="9999-99-99" inputmode="numeric" autocomplete="off" placeholder="yyyy-mm-dd" />
+</label>
+```
+
+## Theme bridge
+
+The [date fields template](../../demo/templates/date-fields.html) puts the native
+control, the masked field and
+[`@lekoala/date-picker`](https://github.com/lekoala/date-picker) side by side, the
+picker skinned entirely with Actual tokens.
+
+```html
+<label class="field">
+  <span class="field-label">Booking date</span>
+  <date-picker value="2026-09-25" open-on-focus="false">
+    <input class="input" name="date">
+  </date-picker>
+</label>
+```
+
+```css
+date-picker,
+date-calendar {
+  --dp-bg: var(--surface-raised);
+  --dp-fg: var(--text);
+  --dp-muted: var(--text-muted);
+  --dp-border: var(--border);
+  --dp-hover: var(--surface-subtle);
+  --dp-accent: var(--primary);
+  --dp-accent-fg: var(--primary-fg);
+  --dp-radius: var(--radius);
+  /* Trigger glyph on the select chevron axis. */
+  --dp-picker-button-size: calc(var(--control-pad-x) * 2 + 1em + var(--border-width) * 2);
+}
+
+.dp-calendar-header :where(button, select, input):focus-visible {
+  border-color: var(--dp-border);
+  outline: var(--focus-ring-width) solid var(--focus);
+  outline-offset: calc(var(--focus-ring-width) * -1);
+  box-shadow: none;
+}
+
+.dp-picker-button:focus-visible,
+.dp-day:focus-visible {
+  outline-color: var(--focus);
+}
+```
+
+The field is a plain `.input`, so the core inset focus outline already outranks
+the library's halo; the calendar's own controls paint a `--dp-accent` halo, so
+the two focus rules map them onto the core outline. The calendar popup is its own
+element, so the `--dp-*` map is declared on `date-picker`/`date-calendar` rather
+than inherited from a wrapper.
+As with the combobox, the bridge stays in docs/demo — it is a recipe, not package
+API, and pins no widget version.
+
+## Which one?
+
+- A plain date the platform can collect: native `<input type="date">`.
+- A fixed text format that must survive as typed text: `data-mask` plus the `date` rule.
+- A calendar, range, or constraint the native control cannot express: an external picker on the token bridge.

package/docs/pages/forms/detached-actions.md

@@ -5,12 +5,12 @@
 The simplest case stays inside the form.
 
 ```html
-<form novalidate>
+<form class="stack" novalidate>
   <div class="stack">
     <!-- fields -->
   </div>
 
-  <div class="form-actions">
+  <div class="cluster form-actions">
     <button type="button" class="btn outline">Cancel</button>
     <button type="submit" class="btn primary">Save changes</button>
   </div>
@@ -20,40 +20,47 @@ The simplest case stays inside the form.
 For sticky page footers, dialog footers, card footers, and split layouts, detach the actions and connect the submit button with `form="<id>"`.
 
 ```html
-<form id="profile-form" novalidate>
-  <div class="stack">
-    <!-- long form fields -->
-  </div>
-</form>
+<div class="stack">
+  <form id="profile-form" novalidate>
+    <div class="stack">
+      <!-- long form fields -->
+    </div>
+  </form>
 
-<footer class="form-actions">
-  <button type="button" class="btn outline">Cancel</button>
-  <button type="submit" class="btn primary" form="profile-form">
-    Save changes
-  </button>
-</footer>
+  <footer class="cluster form-actions">
+    <button type="button" class="btn outline">Cancel</button>
+    <button type="submit" class="btn primary" form="profile-form">
+      Save changes
+    </button>
+  </footer>
+</div>
 ```
 
+The wrapper that holds the form and its detached actions owns the distance
+between them: give it `.stack`.
+
 For multiple submit intents, pair the `form` attribute with `formaction`. The form has one action; each submit button can override it.
 
 ```html
-<form id="article-form"
-      action="/articles/publish"
-      method="post">
-  <!-- fields -->
-</form>
+<div class="stack">
+  <form id="article-form"
+        action="/articles/publish"
+        method="post">
+    <!-- fields -->
+  </form>
 
-<div class="form-actions">
-  <button type="submit"
-          class="btn outline"
-          form="article-form"
-          formaction="/articles/draft">
-    Save draft
-  </button>
-  <button type="submit"
-          class="btn primary"
-          form="article-form">
-    Publish
-  </button>
+  <div class="cluster form-actions">
+    <button type="submit"
+            class="btn outline"
+            form="article-form"
+            formaction="/articles/draft">
+      Save draft
+    </button>
+    <button type="submit"
+            class="btn primary"
+            form="article-form">
+      Publish
+    </button>
+  </div>
 </div>
 ```

package/docs/pages/forms/floating-field.md

@@ -7,11 +7,12 @@ the label rests inside the control and floats to the top when the control is
 focused or filled. It composes the existing `.field` layout and the text
 controls (`.input`, `.textarea`, `.select`) with zero JavaScript.
 
-The cell holds exactly one control and its label, with the control before the
-label. Label placement is linked through the general sibling combinator, so an
-injected node between the two (a password manager, an extension wrapper) is
-tolerated. Help and error messages stay in the surrounding `.field`, otherwise
-the resting label centers on the whole field instead of the control.
+The cell holds exactly one control and its label, in either order: a form
+theme that renders the label before the widget needs no reordering. An
+injected sibling (a password manager, an extension wrapper) is tolerated as
+long as the control stays a direct child of the cell. Help and error messages
+stay in the surrounding `.field`, otherwise the resting label centers on the
+whole field instead of the control.
 
 ```html demo
 <div class="field">
@@ -28,6 +29,17 @@ can detect emptiness — the space keeps the placeholder invisible while making
 the state detectable. `:autofill` is covered too, so a password manager that
 prefills a field still lifts the label.
 
+The same cell with the label first, as a label-then-widget form theme renders it:
+
+```html demo
+<div class="field">
+  <label class="floating-field">
+    <span class="field-label">Full name</span>
+    <input class="input" type="text" autocomplete="name" placeholder=" " />
+  </label>
+</div>
+```
+
 ## Textarea
 
 A textarea's empty label starts at the control's normal first-line position,
@@ -89,8 +101,10 @@ line on top of the control's minimum size.
 Validation and focus come from the existing form contracts: the control's
 border and focus ring flip through `--form-invalid-border` and the shared
 control focus rules. Coloring the label itself on focus or invalid state is
-left to the surrounding recipe — the joined floating form in the
-[blocks demo](../../demo/templates/blocks.html) shows one such recipe.
+left to the surrounding recipe; select the label through the cell
+(`.floating-field:has(> :focus) > .field-label`) so it holds in both orders.
+The joined floating form in the [blocks demo](../../demo/templates/blocks.html)
+shows one such recipe.
 
 > Not currently compatible with `.input-icon`; use standard labels when an
 > embedded leading icon is required.

package/docs/pages/forms/form-actions.md

@@ -1,20 +1,21 @@
 # Form Actions
 
-> `.form-actions` is a class-only flex row that closes a form. It may live
-> inside or outside the `<form>` (see Detached Actions) and has an opt-in
+> `.form-actions` is the role of the `.cluster` row that closes a form. It may
+> live inside or outside the `<form>` (see Detached Actions) and has an opt-in
 > sticky variant (see Sticky Actions).
 
-The default layout is a wrapping flex row: items are centered on the cross
-axis and start-aligned on the main axis, with a default top margin that
-separates the actions from the fields above.
+`.cluster` owns the row: flex, wrap and gap. `.form-actions` adds the alignment
+policy for form actions and the sticky behaviour. The space before the row
+belongs to the parent layout: put `.stack` on the form.
 
-```html
-<form novalidate>
-  <div class="stack">
-    <!-- fields -->
-  </div>
+```html demo
+<form class="stack" novalidate>
+  <label class="field">
+    <span class="field-label">Project name</span>
+    <input class="input" type="text" value="Atlas" />
+  </label>
 
-  <div class="form-actions">
+  <div class="cluster form-actions">
     <button type="button" class="btn outline">Cancel</button>
     <button type="submit" class="btn primary">Save changes</button>
   </div>
@@ -23,34 +24,63 @@ separates the actions from the fields above.
 
 ## CSS hooks
 
-The three layout hooks are unset by default and fall back to the values below.
+- `--form-actions-justify` — main-axis distribution (`justify-content`).
+- `--form-actions-align` — cross-axis alignment (`align-items`).
 
-- `--form-actions-align` — `center` — cross-axis alignment (`align-items`).
-- `--form-actions-justify` — `flex-start` — main-axis distribution (`justify-content`).
-- `--form-actions-margin-block-start` — `var(--space-50)` — top margin separating actions from the form.
+Both are inherited role hooks: set them on a page or container to align every
+form action row inside it, without touching other clusters. Below, the
+container right-aligns the form actions while the tag row, also a `.cluster`,
+keeps its start alignment.
 
-### Common arrangements
+```html demo
+<section class="stack" style="--form-actions-justify: flex-end">
+  <div class="cluster">
+    <span class="badge">Draft</span>
+    <span class="badge">Internal</span>
+  </div>
 
-Right-align the submit on wide rows:
+  <form class="stack" novalidate>
+    <label class="field">
+      <span class="field-label">Release title</span>
+      <input class="input" type="text" value="Autumn update" />
+    </label>
 
-```css
-.form-actions {
-  --form-actions-justify: flex-end;
-}
+    <div class="cluster form-actions">
+      <button type="button" class="btn outline">Cancel</button>
+      <button type="submit" class="btn primary">Publish</button>
+    </div>
+  </form>
+</section>
 ```
 
-Stretch each action to fill the full row width:
+In application CSS, the same policy is one declaration on the region:
 
 ```css
-.form-actions {
-  --form-actions-align: stretch;
+.checkout {
+  --form-actions-justify: flex-end;
 }
 ```
 
-Because the hooks are inherited custom properties, set them on a page or
-container to apply one arrangement to every `.form-actions` inside it.
+On a form action row, use the hooks above rather than `--cluster-justify` /
+`--cluster-align`: the role writes those from its own hooks. For one row, a
+`.justify-content-*` / `.items-*` utility also works.
+A split pair keeps the dismissive action at the leading edge and the committing
+one at the trailing edge:
+
+```html demo
+<form class="stack" novalidate>
+  <label class="field">
+    <span class="field-label">Display name</span>
+    <input class="input" type="text" value="Jane Doe" />
+  </label>
+
+  <div class="cluster form-actions justify-content-space-between">
+    <button type="button" class="btn outline">Cancel</button>
+    <button type="submit" class="btn primary">Save</button>
+  </div>
+</form>
+```
 
 > The sticky variant adds `--form-actions-sticky-block-offset`,
 > `--form-actions-sticky-padding`, and `--form-actions-sticky-inline-offset` —
-> see Sticky Actions. `.form-actions` is class-only and works inside or
-> outside the form — see Detached Actions.
+> see Sticky Actions.

package/docs/pages/forms/input-policy.md

@@ -124,7 +124,7 @@ of the value and never rewrites it.
     </span>
   </label>
 
-  <div class="form-actions">
+  <div class="cluster form-actions">
     <button class="btn primary" type="submit">Submit</button>
     <button class="btn neutral outline" type="reset">Reset</button>
   </div>

package/docs/pages/forms/overview.md

@@ -10,6 +10,7 @@
 - `.field-group` and `.choice` provide layout without depending on parent scope.
 - Customizable select is progressive enhancement only — the native select remains the baseline.
 - Searchable selects, tags and autocomplete are a JavaScript widget concern; theme an external combobox with Actual tokens — see the [combobox template](../../demo/templates/combobox.html).
+- A date is native `<input type="date">` first; use `data-mask` for a fixed text shape, or theme an external picker — see [date picker](date-picker.md) and the [date fields template](../../demo/templates/date-fields.html).
 - Formatted text (bold, lists, links) is a hosted-editor concern; the native textarea stays the baseline and an external engine is themed the same way — see the [rich-text template](../../demo/templates/rich-text.html) and the [composer template](../../demo/templates/composer.html) for the plain-text case.
 
 **Related terms:** form controls, select, custom select, dropdown, input, textarea, checkbox, radio.
@@ -33,7 +34,7 @@
 | `.field-error`  | Composition | Inline error message, shown while invalid.    |
 | `.field-group`  | Composition | `<fieldset>` with a tunable legend gutter.    |
 | `.choice`       | Composition | Choice-label layout around an inline control. |
-| `.form-actions` | Composition | Class-only flex row that closes a form.       |
+| `.form-actions` | Composition | Role of the `.cluster` row closing a form.    |
 
 `.input` shares the text-control recipe with `.textarea` and `.select`, and
 `.select` also has an opt-in enhanced picker. `.field-label` works on a
@@ -46,7 +47,7 @@
 A full form using the control classes, field wrappers, and form actions:
 
 ```html demo
-<form novalidate>
+<form class="stack" novalidate>
   <div class="stack">
 
     <label class="field">
@@ -101,7 +102,7 @@ A full form using the control classes, field wrappers, and form actions:
 
     <fieldset class="field-group">
       <legend class="field-label">Availability</legend>
-      <div class="stack compact">
+      <div class="stack tight">
         <label class="choice">
           <input class="radio" type="radio" name="availability" value="available" checked />
           <span>Available for work</span>
@@ -161,7 +162,7 @@ A full form using the control classes, field wrappers, and form actions:
 
   </div>
 
-  <div class="form-actions">
+  <div class="cluster form-actions">
     <button type="button" class="btn outline">Cancel</button>
     <button type="submit" class="btn primary">Save changes</button>
   </div>
@@ -185,7 +186,7 @@ it a stronger fill.
 - `.choice` is the choice-label API. Use `.check` or `.radio` on the nested control. The control goes first, the label group second, so multi-line labels align the control with the first line.
 - For a switch, use `class="switch"` and `role="switch"`.
 - `.range` skins the native range control (`appearance: none` track, thumb, and focus ring). Add `data-enhance="range"` for the fill share, named `datalist` values, and output sync.
-- `.form-actions` carries a default top margin. Override it with `--form-actions-margin-block-start`, `--form-actions-align`, or `--form-actions-justify`. It is class-only and may live inside or outside `<form>`. See Detached Actions below.
+- `.form-actions` is the role of a `.cluster` row (`class="cluster form-actions"`) and carries no outer margin: `.stack` on the form spaces it from the fields. It is class-only and may live inside or outside `<form>`. See Detached Actions below.
 - `.join` visually joins adjacent controls into a single unit. Use `.join-addon` for static prefix/suffix content. The container still carries `role="group"` for accessibility.
 
 ## Optional automatic required marks

package/docs/pages/forms/states-and-sizes.md

@@ -26,8 +26,8 @@ together. Density contexts leave both unchanged.
 <form class="stack" novalidate>
   <fieldset class="field-group">
     <legend class="field-label">Text control states</legend>
-    <div class="stack" style="--grid-min: 14rem;">
-      <div class="grid items-start">
+    <div class="stack">
+      <div class="grid items-start" style="--grid-min: 14rem;">
         <label class="field">
           <span class="field-label">Editable</span>
           <input class="input" type="text" value="Ocean Beach Clinic" />
@@ -46,7 +46,7 @@ together. Density contexts leave both unchanged.
         </label>
       </div>
 
-      <div class="grid items-start">
+      <div class="grid items-start" style="--grid-min: 14rem;">
         <label class="field">
           <span class="field-label">Editable notes</span>
           <textarea class="textarea">Patient asked for an invoice copy.</textarea>
@@ -67,8 +67,8 @@ together. Density contexts leave both unchanged.
 
   <fieldset class="field-group">
     <legend class="field-label">Choice and select states</legend>
-    <div class="stack" style="--grid-min: 14rem;">
-      <div class="grid items-start">
+    <div class="stack">
+      <div class="grid items-start" style="--grid-min: 14rem;">
         <label class="field">
           <span class="field-label">Editable select</span>
           <select class="select">
@@ -98,7 +98,7 @@ together. Density contexts leave both unchanged.
         </label>
       </div>
 
-      <div class="grid items-start">
+      <div class="grid items-start" style="--grid-min: 14rem;">
         <label class="choice">
           <input class="check" type="checkbox" />
           <span>
@@ -140,7 +140,7 @@ together. Density contexts leave both unchanged.
         </label>
       </div>
 
-      <div class="grid items-start">
+      <div class="grid items-start" style="--grid-min: 14rem;">
         <label class="choice">
           <input class="radio" type="radio" name="demo-radio-state" />
           <span>
@@ -174,7 +174,7 @@ together. Density contexts leave both unchanged.
         </label>
       </div>
 
-      <div class="grid items-start">
+      <div class="grid items-start" style="--grid-min: 14rem;">
         <label class="choice">
           <input class="switch" type="checkbox" role="switch" />
           <span>
@@ -212,8 +212,8 @@ together. Density contexts leave both unchanged.
 
   <fieldset class="field-group">
     <legend class="field-label">Control sizes</legend>
-    <div class="stack" style="--grid-min: 14rem;">
-      <div class="grid items-start">
+    <div class="stack">
+      <div class="grid items-start" style="--grid-min: 14rem;">
         <label class="field sm">
           <span class="field-label">Small field</span>
           <input class="input" type="text" value="sm" />
@@ -230,7 +230,7 @@ together. Density contexts leave both unchanged.
         </label>
       </div>
 
-      <div class="grid items-start">
+      <div class="grid items-start" style="--grid-min: 14rem;">
         <label class="field sm">
           <span class="field-label">Small select</span>
           <select class="select">
@@ -253,7 +253,7 @@ together. Density contexts leave both unchanged.
         </label>
       </div>
 
-      <div class="grid items-start">
+      <div class="grid items-start" style="--grid-min: 14rem;">
         <label class="field sm">
           <span class="field-label">Small textarea</span>
           <textarea class="textarea" rows="2">Short note</textarea>
@@ -270,14 +270,14 @@ together. Density contexts leave both unchanged.
         </label>
       </div>
 
-      <div class="grid items-start">
+      <div class="grid items-start" style="--grid-min: 14rem;">
         <button class="btn outline sm" type="button">Small</button>
         <button class="btn outline" type="button">Default</button>
         <button class="btn outline lg" type="button">Large</button>
       </div>
 
       <!-- Size belongs on the choice wrapper so label and control move together. -->
-      <div class="grid items-start">
+      <div class="grid items-start" style="--grid-min: 14rem;">
         <label class="choice sm">
           <input class="check" type="checkbox" checked />
           <span>Small checkbox</span>
@@ -297,7 +297,7 @@ together. Density contexts leave both unchanged.
       </div>
 
       <!-- The underlying typography hook remains available for custom scales. -->
-      <div class="grid items-start" style="--control-font-size: var(--font-size-sm);">
+      <div class="grid items-start" style="--grid-min: 14rem; --control-font-size: var(--font-size-sm);">
         <label class="choice">
           <input class="check" type="checkbox" checked />
           <span>Smaller type</span>