@atelier-ui/react 0.2.18 → 0.2.20

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+## 0.2.20 (2026-08-26)
+
+### 🚀 Features
+
+- **rhythm:** every component root states its own leading ([7a7f473](https://github.com/DominikPieper/atelier-ui/commit/7a7f473))
+- **rows:** put the remaining row boxes on the row ladder ([cc6dd13](https://github.com/DominikPieper/atelier-ui/commit/cc6dd13))
+
+### ❤️ Thank You
+
+- Claude Opus 5
+- Dominik Pieper @DominikPieper
+
+## 0.2.19 (2026-08-26)
+
+### 🚀 Features
+
+- **rows:** prove the row recipe on two boxes, and what that exposed ([14284f9](https://github.com/DominikPieper/atelier-ui/commit/14284f9))
+- **tokens:** the row ladder — --ui-row-inset and --ui-row-height-sm/md/lg ([b2f390a](https://github.com/DominikPieper/atelier-ui/commit/b2f390a))
+
+### ❤️ Thank You
+
+- Claude Opus 5
+- Dominik Pieper @DominikPieper
+
 ## 0.2.18 (2026-08-26)
 
 ### 🩹 Fixes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atelier-ui/react",
-  "version": "0.2.18",
+  "version": "0.2.20",
   "description": "Atelier component library for React — LLM-optimised, accessible, design-token-driven",
   "keywords": [
     "react",

package/src/lib/accordion/atl-accordion.css

@@ -18,6 +18,11 @@
 .atl-accordion-group {
   display: block;
   font-family: var(--ui-font-family);
+  /* The leading every descendant inherits. Stated here so the component keeps
+     its own vertical rhythm instead of adopting the consuming app's prose
+     leading — the defect that made the row boxes measure differently in a
+     Storybook page and in a docs page (ADR-0052). This one carries prose, so normal. */
+  line-height: var(--ui-line-height-normal);
   color: var(--ui-color-text);
 }
 
@@ -78,8 +83,14 @@
   justify-content: space-between;
   gap: var(--ui-spacing-3);
   width: 100%;
-  min-height: 3.25rem;
-  padding: var(--ui-spacing-4) var(--ui-spacing-5);
+  /* Row recipe (ADR-0052): 3.25rem was a literal that happened to clear the
+     prose leading. On the row ladder the trigger is a lg row, and it states
+     its own line-height because `all: unset` above reset that to inherit —
+     without it the box grows with whatever leading the page sets. */
+  min-height: var(--ui-row-height-lg);
+  padding-block: 0;
+  padding-inline: var(--ui-spacing-5);
+  line-height: var(--ui-line-height-tight);
   font-size: var(--ui-font-size-md);
   font-weight: var(--ui-font-weight-semibold);
   color: var(--ui-color-text);

package/src/lib/avatar/atl-avatar.css

@@ -24,6 +24,11 @@
   overflow: hidden;
   flex-shrink: 0;
   font-family: var(--ui-font-family);
+  /* The leading every descendant inherits. Stated here so the component keeps
+     its own vertical rhythm instead of adopting the consuming app's prose
+     leading — the defect that made the row boxes measure differently in a
+     Storybook page and in a docs page (ADR-0052). Single-line chrome, so tight. */
+  line-height: var(--ui-line-height-tight);
   font-weight: var(--ui-font-weight-semibold);
   background-color: color-mix(in srgb, var(--ui-color-primary) 12%, var(--ui-color-surface-sunken));
   color: var(--ui-color-primary);

package/src/lib/breadcrumbs/atl-breadcrumbs.css

@@ -18,6 +18,11 @@
 .atl-breadcrumbs {
   display: block;
   font-family: var(--ui-font-family);
+  /* The leading every descendant inherits. Stated here so the component keeps
+     its own vertical rhythm instead of adopting the consuming app's prose
+     leading — the defect that made the row boxes measure differently in a
+     Storybook page and in a docs page (ADR-0052). Single-line chrome, so tight. */
+  line-height: var(--ui-line-height-tight);
 }
 
 .breadcrumbs-list {

package/src/lib/card/atl-card.css

@@ -24,6 +24,11 @@
    * Sans — measured: a card next to a button showed two typefaces. Declared once
    * per component root, never on a descendant (ADR-0049). */
   font-family: var(--ui-font-family);
+  /* The leading every descendant inherits. Stated here so the component keeps
+     its own vertical rhythm instead of adopting the consuming app's prose
+     leading — the defect that made the row boxes measure differently in a
+     Storybook page and in a docs page (ADR-0052). This one carries prose, so normal. */
+  line-height: var(--ui-line-height-normal);
   display: block;
   border-radius: var(--ui-radius-xl);
   background-color: var(--ui-color-surface-raised);

package/src/lib/chat/atl-chat.css

@@ -31,6 +31,11 @@
    * Sans — measured: a card next to a button showed two typefaces. Declared once
    * per component root, never on a descendant (ADR-0049). */
   font-family: var(--ui-font-family);
+  /* The leading every descendant inherits. Stated here so the component keeps
+     its own vertical rhythm instead of adopting the consuming app's prose
+     leading — the defect that made the row boxes measure differently in a
+     Storybook page and in a docs page (ADR-0052). This one carries prose, so normal. */
+  line-height: var(--ui-line-height-normal);
   display: contents;
 }
 

package/src/lib/checkbox/atl-checkbox.css

@@ -12,6 +12,10 @@
   display: block;
   font-family: var(--ui-font-family);
   font-size: var(--ui-font-size-md);
+  /* The root is a block wrapping an inline-flex row, so it opens a line box and
+     its strut is sized by whatever leading it inherits. Without this the row is
+     40px here and 48px inside an app with roomy prose leading. */
+  line-height: var(--ui-line-height-tight);
 }
 
 .atl-checkbox label {
@@ -21,14 +25,21 @@
   cursor: pointer;
   user-select: none;
   color: var(--ui-color-text);
-  line-height: var(--ui-line-height-normal);
-  min-height: 1.5rem;
+  /* Row recipe (ADR-0052): the clickable line is a row — it states its height
+     and centres the control + text, rather than being sized by whichever of
+     the two happens to be taller. */
+  min-height: var(--ui-row-height-sm);
+  padding-block: 0;
+  line-height: var(--ui-line-height-tight);
 }
 
 .atl-checkbox input[type='checkbox'] {
   appearance: none;
   -webkit-appearance: none;
   flex-shrink: 0;
+  /* The UA ships margin: 3px 3px 3px 4px on a native checkbox. Left in, it
+     adds 6px to the row and offsets the box from the label text. */
+  margin: 0;
   width: 1.25rem;
   height: 1.25rem;
   border: var(--ui-border-width-thick) solid var(--ui-color-border-strong);

package/src/lib/code-block/atl-code-block.css

@@ -18,6 +18,10 @@
   border-radius: var(--ui-radius-lg);
   overflow: hidden;
   font-family: var(--ui-font-family);
+  /* The leading every descendant inherits, stated so the component keeps its
+     own rhythm rather than the consuming app's prose leading (ADR-0052).
+     Chrome around the code, so tight — the code element states the code leading itself. */
+  line-height: var(--ui-line-height-tight);
 }
 
 /* ---------------------------------------------------------------------------
@@ -99,7 +103,7 @@
   padding: var(--ui-spacing-4);
   font-family: var(--ui-font-mono);
   font-size: var(--ui-font-size-sm);
-  line-height: 1.65;
+  line-height: var(--ui-line-height-code);
   color: var(--ui-color-text);
   white-space: pre;
   tab-size: 2;

package/src/lib/combobox/atl-combobox.css

@@ -38,6 +38,10 @@
   display: block;
   position: relative;
   font-family: var(--ui-font-family);
+  /* The leading every descendant inherits, stated so the component keeps its
+     own rhythm rather than the consuming app's prose leading (ADR-0052).
+     A single-line field over a list of rows, so tight. */
+  line-height: var(--ui-line-height-tight);
   font-size: var(--ui-font-size-md);
 }
 
@@ -156,8 +160,15 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  min-height: 2.25rem;
-  padding: var(--ui-spacing-2) var(--ui-spacing-4);
+  /* Row recipe (ADR-0052): the height is stated, the block padding is zero and the
+   * content is centred. A row centres, a control pads — ADR-0041's derived-padding
+   * formula produces the wrong box here. The line-height is stated so the box does
+   * not follow the installed font (ADR-0048).
+   */
+  min-height: var(--ui-row-height-sm);
+  padding-block: 0;
+  line-height: var(--ui-line-height-tight);
+  padding-inline: var(--ui-spacing-4);
   cursor: pointer;
   color: var(--ui-color-text);
   font-size: var(--ui-font-size-md);

package/src/lib/dialog/atl-dialog.css

@@ -29,6 +29,11 @@
    * typeface (ADR-0035); without this the dialog renders in the consuming app's
    * font while its neighbours render Instrument Sans (ADR-0049). */
   font-family: var(--ui-font-family);
+  /* The leading every descendant inherits. Stated here so the component keeps
+     its own vertical rhythm instead of adopting the consuming app's prose
+     leading — the defect that made the row boxes measure differently in a
+     Storybook page and in a docs page (ADR-0052). This one carries prose, so normal. */
+  line-height: var(--ui-line-height-normal);
   position: fixed;
   inset: 0;
   margin: auto;

package/src/lib/drawer/atl-drawer.css

@@ -25,6 +25,11 @@
    * Sans — measured: a card next to a button showed two typefaces. Declared once
    * per component root, never on a descendant (ADR-0049). */
   font-family: var(--ui-font-family);
+  /* The leading every descendant inherits. Stated here so the component keeps
+     its own vertical rhythm instead of adopting the consuming app's prose
+     leading — the defect that made the row boxes measure differently in a
+     Storybook page and in a docs page (ADR-0052). This one carries prose, so normal. */
+  line-height: var(--ui-line-height-normal);
   display: contents;
 }
 

package/src/lib/input/atl-input.css

@@ -11,6 +11,10 @@
 .atl-input {
   display: block;
   font-family: var(--ui-font-family);
+  /* The leading every descendant inherits, stated so the component keeps its
+     own rhythm rather than the consuming app's prose leading (ADR-0052).
+     A single-line field, so tight. */
+  line-height: var(--ui-line-height-tight);
   font-size: var(--ui-font-size-md);
 }
 

package/src/lib/menu/atl-menu.css

@@ -28,6 +28,11 @@
   border-radius: var(--ui-radius-lg);
   box-shadow: var(--ui-shadow-lg);
   font-family: var(--ui-font-family);
+  /* The leading every descendant inherits. Stated here so the component keeps
+     its own vertical rhythm instead of adopting the consuming app's prose
+     leading — the defect that made the row boxes measure differently in a
+     Storybook page and in a docs page (ADR-0052). Single-line chrome, so tight. */
+  line-height: var(--ui-line-height-tight);
   font-size: var(--ui-font-size-md);
   color: var(--ui-color-text);
   outline: none;
@@ -68,8 +73,14 @@
   display: flex;
   align-items: center;
   gap: var(--ui-spacing-3);
-  min-height: 2.25rem;
-  padding: var(--ui-spacing-2) var(--ui-spacing-4);
+  /* Row recipe (ADR-0052): the height is stated, the block padding is zero and the
+   * content is centred. A row centres, a control pads — ADR-0041's derived-padding
+   * formula produces the wrong box here. The line-height is stated so the box does
+   * not follow the installed font (ADR-0048).
+   */
+  min-height: var(--ui-row-height-sm);
+  padding-block: 0;
+  padding-inline: var(--ui-spacing-4);
   cursor: pointer;
   color: var(--ui-color-text);
   transition: background var(--ui-transition-fast);
@@ -77,6 +88,10 @@
   border: none;
   background: none;
   font: inherit;
+  /* After `font: inherit`, which is a shorthand and resets line-height along with
+   * everything else. Declared above it, the row's stated line-height was silently
+   * erased and the box grew with the text metrics again (ADR-0052). */
+  line-height: var(--ui-line-height-tight);
   width: 100%;
   text-align: start;
 }

package/src/lib/pagination/atl-pagination.css

@@ -11,6 +11,11 @@
 .atl-pagination {
   display: block;
   font-family: var(--ui-font-family);
+  /* The leading every descendant inherits. Stated here so the component keeps
+     its own vertical rhythm instead of adopting the consuming app's prose
+     leading — the defect that made the row boxes measure differently in a
+     Storybook page and in a docs page (ADR-0052). Single-line chrome, so tight. */
+  line-height: var(--ui-line-height-tight);
 }
 
 .page-list {

package/src/lib/progress/atl-progress.css

@@ -12,6 +12,11 @@
   display: block;
   width: 100%;
   font-family: var(--ui-font-family);
+  /* The leading every descendant inherits. Stated here so the component keeps
+     its own vertical rhythm instead of adopting the consuming app's prose
+     leading — the defect that made the row boxes measure differently in a
+     Storybook page and in a docs page (ADR-0052). Single-line chrome, so tight. */
+  line-height: var(--ui-line-height-tight);
 }
 
 .track {

package/src/lib/radio/atl-radio.css

@@ -15,11 +15,14 @@
   cursor: pointer;
   user-select: none;
   color: var(--ui-color-text);
-  line-height: var(--ui-line-height-normal);
+  line-height: var(--ui-line-height-tight);
   font-family: var(--ui-font-family);
   font-size: var(--ui-font-size-md);
-  padding: var(--ui-spacing-1) 0;
-  min-height: 1.5rem;
+  /* Row recipe (ADR-0052): the clickable line is a row — it states its height
+     and centres the control + text, rather than being sized by whichever of
+     the two happens to be taller. */
+  padding-block: 0;
+  min-height: var(--ui-row-height-sm);
   transition: color var(--ui-transition-fast);
 }
 

package/src/lib/radio-group/atl-radio-group.css

@@ -11,6 +11,11 @@
 .atl-radio-group {
   display: flex;
   font-family: var(--ui-font-family);
+  /* The leading every descendant inherits. Stated here so the component keeps
+     its own vertical rhythm instead of adopting the consuming app's prose
+     leading — the defect that made the row boxes measure differently in a
+     Storybook page and in a docs page (ADR-0052). Single-line chrome, so tight. */
+  line-height: var(--ui-line-height-tight);
   gap: var(--ui-spacing-3);
 }
 

package/src/lib/select/atl-select.css

@@ -12,6 +12,10 @@
   display: inline-block;
   position: relative;
   font-family: var(--ui-font-family);
+  /* The leading every descendant inherits, stated so the component keeps its
+     own rhythm rather than the consuming app's prose leading (ADR-0052).
+     A single-line field, so tight. */
+  line-height: var(--ui-line-height-tight);
   font-size: var(--ui-font-size-md);
 }
 

package/src/lib/skeleton/atl-skeleton.css

@@ -14,6 +14,11 @@
    * Sans — measured: a card next to a button showed two typefaces. Declared once
    * per component root, never on a descendant (ADR-0049). */
   font-family: var(--ui-font-family);
+  /* The leading every descendant inherits. Stated here so the component keeps
+     its own vertical rhythm instead of adopting the consuming app's prose
+     leading — the defect that made the row boxes measure differently in a
+     Storybook page and in a docs page (ADR-0052). Single-line chrome, so tight. */
+  line-height: var(--ui-line-height-tight);
   display: block;
   background: var(--ui-color-border);
   overflow: hidden;

package/src/lib/stepper/atl-stepper.css

@@ -11,6 +11,11 @@
 .atl-stepper {
   display: block;
   font-family: var(--ui-font-family);
+  /* The leading every descendant inherits. Stated here so the component keeps
+     its own vertical rhythm instead of adopting the consuming app's prose
+     leading — the defect that made the row boxes measure differently in a
+     Storybook page and in a docs page (ADR-0052). Single-line chrome, so tight. */
+  line-height: var(--ui-line-height-tight);
 }
 
 /* ─── Header ─── */

package/src/lib/table/atl-table.css

@@ -36,6 +36,11 @@
 .atl-table {
   display: block;
   font-family: var(--ui-font-family);
+  /* The leading every descendant inherits. Stated here so the component keeps
+     its own vertical rhythm instead of adopting the consuming app's prose
+     leading — the defect that made the row boxes measure differently in a
+     Storybook page and in a docs page (ADR-0052). Single-line chrome, so tight. */
+  line-height: var(--ui-line-height-tight);
   color: var(--ui-color-text);
 }
 
@@ -60,7 +65,13 @@
   text-transform: uppercase;
   border-bottom: var(--ui-border-width-thick) solid var(--ui-color-border);
   background-color: var(--ui-color-surface);
-  padding: var(--ui-spacing-3) var(--ui-spacing-4);
+  /* Row recipe (ADR-0052): a row centres its content on a stated height, it
+     does not let the content push the box. padding-block stays 0 so the size
+     variants below only vary the inline inset. */
+  height: var(--ui-row-height-md);
+  padding-block: 0;
+  padding-inline: var(--ui-spacing-4);
+  line-height: var(--ui-line-height-tight);
   text-align: start;
   white-space: nowrap;
 }
@@ -70,7 +81,10 @@
    --------------------------------------------------------------------------- */
 .atl-table tbody td {
   border-bottom: var(--ui-border-width) solid var(--ui-color-border);
-  padding: var(--ui-spacing-3) var(--ui-spacing-4);
+  height: var(--ui-row-height-md);
+  padding-block: 0;
+  padding-inline: var(--ui-spacing-4);
+  line-height: var(--ui-line-height-tight);
   vertical-align: middle;
   background-color: var(--ui-color-surface);
   transition: background-color var(--ui-transition-fast);
@@ -81,19 +95,22 @@
    --------------------------------------------------------------------------- */
 .atl-table.size-sm thead th,
 .atl-table.size-sm tbody td {
-  padding: var(--ui-spacing-2) var(--ui-spacing-3);
+  height: var(--ui-row-height-sm);
+  padding-inline: var(--ui-spacing-3);
   font-size: var(--ui-font-size-xs);
 }
 
 .atl-table.size-md thead th,
 .atl-table.size-md tbody td {
-  padding: var(--ui-spacing-3) var(--ui-spacing-4);
+  height: var(--ui-row-height-md);
+  padding-inline: var(--ui-spacing-4);
   font-size: var(--ui-font-size-sm);
 }
 
 .atl-table.size-lg thead th,
 .atl-table.size-lg tbody td {
-  padding: var(--ui-spacing-4) var(--ui-spacing-6);
+  height: var(--ui-row-height-lg);
+  padding-inline: var(--ui-spacing-6);
   font-size: var(--ui-font-size-md);
 }
 

package/src/lib/tabs/atl-tabs.css

@@ -11,6 +11,11 @@
 .atl-tab-group {
   display: block;
   font-family: var(--ui-font-family);
+  /* The leading every descendant inherits. Stated here so the component keeps
+     its own vertical rhythm instead of adopting the consuming app's prose
+     leading — the defect that made the row boxes measure differently in a
+     Storybook page and in a docs page (ADR-0052). Single-line chrome, so tight. */
+  line-height: var(--ui-line-height-tight);
   color: var(--ui-color-text);
 }
 

package/src/lib/textarea/atl-textarea.css

@@ -11,6 +11,10 @@
 .atl-textarea {
   display: block;
   font-family: var(--ui-font-family);
+  /* The leading every descendant inherits, stated so the component keeps its
+     own rhythm rather than the consuming app's prose leading (ADR-0052).
+     The field carries prose, so normal. */
+  line-height: var(--ui-line-height-normal);
   font-size: var(--ui-font-size-md);
 }
 

package/src/lib/toggle/atl-toggle.css

@@ -12,6 +12,10 @@
   display: block;
   font-family: var(--ui-font-family);
   font-size: var(--ui-font-size-md);
+  /* The root is a block wrapping an inline-flex row, so it opens a line box and
+     its strut is sized by whatever leading it inherits. Without this the row is
+     40px here and 48px inside an app with roomy prose leading. */
+  line-height: var(--ui-line-height-tight);
 }
 
 .atl-toggle label {
@@ -21,8 +25,12 @@
   cursor: pointer;
   user-select: none;
   color: var(--ui-color-text);
-  line-height: var(--ui-line-height-normal);
-  min-height: 1.5rem;
+  /* Row recipe (ADR-0052): the clickable line is a row — it states its height
+     and centres the control + text, rather than being sized by whichever of
+     the two happens to be taller. */
+  min-height: var(--ui-row-height-sm);
+  padding-block: 0;
+  line-height: var(--ui-line-height-tight);
 }
 
 /* Hide native checkbox visually but keep it accessible */

package/styles/tokens.css

@@ -47,6 +47,32 @@
    * button the same height. Stating the padding and hoping, which is what the
    * library did until 2026-08-26, made them 6px apart.
    */
+  /* ── Row heights ────────────────────────────────────────────────────────────
+   * A row is taller than the control it holds. That relation lives here, in a
+   * calc over the control scale, rather than as a convention thirty stylesheets
+   * have to honour: `--ui-row-inset: 0` collapses the two ladders into one in a
+   * single edit.
+   *
+   * Measured, which is why the inset exists: a table cell at the *control* height
+   * of 40 renders 41.0px when it holds a 40px control (the extra pixel is the two
+   * collapsed cell borders), while the same cell at 48 renders exactly 48.00px
+   * holding text, a badge, an sm button, an md button or an md avatar. So at the
+   * row height any control of the matching step fits, with no convention.
+   *
+   * A row CENTRES its content; a control PADS it. ADR-0041's derived-padding
+   * formula therefore does not apply here — a size-md cell with derived padding
+   * renders 62.5px holding an md button. The row recipe is
+   * `min-height: var(--ui-row-height-*); padding-block: 0; line-height: tight`.
+   *
+   * Not rows, on purpose: breadcrumbs (17px of inline text, holding no control)
+   * and the card/dialog/drawer/chat headers (one-off bands with their own
+   * padding, not one line among many). See ADR-0052.
+   */
+  --ui-row-inset: 0.25rem;
+  --ui-row-height-sm: calc(var(--ui-control-height-sm) + 2 * var(--ui-row-inset));
+  --ui-row-height-md: calc(var(--ui-control-height-md) + 2 * var(--ui-row-inset));
+  --ui-row-height-lg: calc(var(--ui-control-height-lg) + 2 * var(--ui-row-inset));
+
   --ui-control-height-sm: 2rem;
   --ui-control-height-md: 2.5rem;
   --ui-control-height-lg: 3rem;
@@ -56,6 +82,9 @@
   --ui-font-weight-bold: 700;
   --ui-line-height-tight: 1.25;
   --ui-line-height-normal: 1.5;
+  /* Code needs looser leading than prose: a reader scans columns, not sentences.
+   * AtlCodeBlock had 1.65 as a literal in one stylesheet. */
+  --ui-line-height-code: 1.65;
 
   /* ── Type roles ─────────────────────────────────────────────
    * Composed entirely from the axes above, so sizes and weights stay