@atelier-ui/react 0.2.19 → 0.2.20

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atelier-ui/react",
-  "version": "0.2.19",
+  "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);
 }
 
 /* ---------------------------------------------------------------------------

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);
 }
 

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;

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 */