@atelier-ui/react 0.2.23 → 0.2.25

package/CHANGELOG.md

@@ -1,3 +1,32 @@
+## 0.2.25 (2026-08-28)
+
+### 🩹 Fixes
+
+- **a11y:** the class the CSS paints and no template emits ([2072116](https://github.com/DominikPieper/atelier-ui/commit/2072116))
+
+### ❤️ Thank You
+
+- Claude Opus 5 (1M context)
+- Dominik Pieper @DominikPieper
+
+## 0.2.24 (2026-08-28)
+
+### 🚀 Features
+
+- **gates:** check the direction nothing checked, and gate the sets that clip ([e6602d4](https://github.com/DominikPieper/atelier-ui/commit/e6602d4))
+- **figma:** two roles the eight did not span, and 231 text nodes bound to them ([e4f61ca](https://github.com/DominikPieper/atelier-ui/commit/e4f61ca))
+- **tokens:** the type roles get their first consumers, and two gates learn the shorthand ([5d58f0d](https://github.com/DominikPieper/atelier-ui/commit/5d58f0d))
+
+### 🩹 Fixes
+
+- **tokens:** bind the literals the scale already named ([f19029e](https://github.com/DominikPieper/atelier-ui/commit/f19029e))
+- **figma:** the whole file was in the wrong typeface ([3110cbd](https://github.com/DominikPieper/atelier-ui/commit/3110cbd))
+
+### ❤️ Thank You
+
+- Claude Opus 5 (1M context)
+- Dominik Pieper @DominikPieper
+
 ## 0.2.23 (2026-08-27)
 
 ### 🚀 Features

package/package.json

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

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

@@ -15,9 +15,7 @@
   padding: var(--ui-spacing-4) var(--ui-spacing-5);
   border-radius: var(--ui-radius-lg);
   border: var(--ui-border-width) solid transparent;
-  font-family: var(--ui-font-family);
-  font-size: var(--ui-font-size-sm);
-  line-height: var(--ui-line-height-normal);
+  font: var(--ui-type-body-sm);
   box-sizing: border-box;
   width: 100%;
 }
@@ -84,7 +82,7 @@
 /* Semantic indicator glyph — non-color differentiation (WCAG 1.4.1). */
 .atl-alert .content .variant-icon {
   display: inline-block;
-  font-weight: 700;
+  font-weight: var(--ui-font-weight-bold);
   margin-right: 0.4em;
   line-height: 1;
 }

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

@@ -64,7 +64,7 @@
 
 /* Semantic indicator glyph — non-color differentiation (WCAG 1.4.1). */
 .atl-badge .variant-icon {
-  font-weight: 700;
+  font-weight: var(--ui-font-weight-bold);
   margin-right: 0.3em;
   line-height: 1;
 }

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

@@ -50,7 +50,7 @@
 .code-block-label {
   font-family: var(--ui-font-mono);
   font-size: var(--ui-font-size-xs);
-  font-weight: 600;
+  font-weight: var(--ui-font-weight-semibold);
   letter-spacing: 0.03em;
   color: var(--ui-color-text-muted);
   text-transform: lowercase;
@@ -64,15 +64,15 @@
 .code-block-copy {
   display: inline-flex;
   align-items: center;
-  gap: 0.3rem;
-  padding: 0.2rem 0.55rem;
+  gap: var(--ui-spacing-1);
+  padding: var(--ui-spacing-1) var(--ui-spacing-2);
   border: var(--ui-border-width) solid var(--ui-color-border);
   border-radius: var(--ui-radius-sm);
   background: transparent;
   color: var(--ui-color-text-muted);
   font-family: inherit;
   font-size: var(--ui-font-size-xs);
-  font-weight: 500;
+  font-weight: var(--ui-font-weight-medium);
   cursor: pointer;
   transition: color var(--ui-transition-fast), background var(--ui-transition-fast), border-color var(--ui-transition-fast);
   white-space: nowrap;
@@ -101,9 +101,7 @@
 .code-block-pre {
   margin: 0;
   padding: var(--ui-spacing-4);
-  font-family: var(--ui-font-mono);
-  font-size: var(--ui-font-size-sm);
-  line-height: var(--ui-line-height-code);
+  font: var(--ui-type-code);
   color: var(--ui-color-text);
   white-space: pre;
   tab-size: 2;

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

@@ -151,7 +151,7 @@ dialog > .panel.size-full {
   padding: var(--ui-spacing-5) var(--ui-spacing-6);
   border-bottom: var(--ui-border-width) solid var(--ui-color-border);
   font-size: var(--ui-font-size-xl);
-  font-weight: 600;
+  font-weight: var(--ui-font-weight-semibold);
   letter-spacing: var(--ui-letter-spacing-tight);
   color: var(--ui-color-text);
   flex-shrink: 0;

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

@@ -208,7 +208,7 @@
   padding: var(--ui-spacing-5) var(--ui-spacing-6);
   border-bottom: var(--ui-border-width) solid var(--ui-color-border);
   font-size: var(--ui-font-size-xl);
-  font-weight: 600;
+  font-weight: var(--ui-font-weight-semibold);
   letter-spacing: var(--ui-letter-spacing-tight);
   color: var(--ui-color-text);
   flex-shrink: 0;

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

@@ -9,6 +9,11 @@
 }
 
 .atl-stepper {
+  /* Local, not tokens: one component, two uses each, and the connector offset is
+     DERIVED from them (ADR-0071). A single-use dimension is not a token, but a
+     relationship between two of them should be visible. */
+  --step-circle: 36px;
+  --step-connector-width: 2px;
   display: block;
   font-family: var(--ui-font-family);
   /* The leading every descendant inherits. Stated here so the component keeps
@@ -35,7 +40,7 @@
 /* ─── Connector ─── */
 .step-connector {
   flex: 1;
-  height: 2px;
+  height: var(--step-connector-width);
   background: var(--ui-color-border);
   border-radius: var(--ui-radius-full);
   transition: background var(--ui-transition-normal) var(--ui-ease-out);
@@ -53,8 +58,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 36px;
-  height: 36px;
+  width: var(--step-circle);
+  height: var(--step-circle);
   border-radius: 50%;
   border: var(--ui-border-width-thick) solid var(--ui-color-border);
   background: var(--ui-color-surface);
@@ -179,8 +184,10 @@
 
 .atl-stepper.orientation-vertical .step-connector {
   flex: none;
-  width: 2px;
+  width: var(--step-connector-width);
   height: var(--ui-spacing-6);
-  margin-left: 17px;
+  /* Centres the connector under the circle: half the circle minus half the
+     connector. Was a literal 17px, which hid the relationship. */
+  margin-left: calc((var(--step-circle) - var(--step-connector-width)) / 2);
   min-width: 0;
 }

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

@@ -10,12 +10,12 @@
 
 .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);
+  /* One role, not three axes (ADR-0036): body-md carries the sans, the md size
+     and the normal leading — normal because the field holds prose, and stated here
+     rather than inherited so the component keeps its own rhythm instead of the
+     consuming app's (ADR-0052). `font:` supplies the leading the longhand used to,
+     which is why check:typeface now recognises the shorthand (ADR-0073). */
+  font: var(--ui-type-body-md);
 }
 
 .atl-textarea textarea {

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

@@ -65,9 +65,7 @@
   padding: var(--ui-spacing-4) var(--ui-spacing-5);
   border-radius: var(--ui-radius-lg);
   border-left: 4px solid transparent;
-  font-family: var(--ui-font-family);
-  font-size: var(--ui-font-size-sm);
-  line-height: var(--ui-line-height-normal);
+  font: var(--ui-type-body-sm);
   box-shadow: var(--ui-shadow-lg);
   background-color: var(--ui-color-surface-raised, var(--ui-color-surface));
   color: var(--ui-color-text);

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

@@ -28,7 +28,7 @@
 /* Tooltip content */
 .atl-tooltip {
   position: absolute;
-  z-index: var(--ui-z-tooltip, 200);
+  z-index: var(--ui-z-dropdown);
   display: block;
   padding: var(--ui-spacing-1) var(--ui-spacing-2);
   background: var(--ui-color-text);

package/styles/tokens.css

@@ -119,7 +119,29 @@
   --ui-type-label: var(--ui-font-weight-medium) var(--ui-font-size-xs) /
     var(--ui-line-height-tight) var(--ui-font-family);
   --ui-type-code: var(--ui-font-weight-normal) var(--ui-font-size-sm) /
-    var(--ui-line-height-normal) var(--ui-font-mono);
+    var(--ui-line-height-code) var(--ui-font-mono);
+
+  /* The two roles the eight did not span. Both were measured on BOTH sides
+   * before being added (ADR-0074), which is the only sound basis for a role:
+   *
+   *   control  Medium 14 — 6 CSS rules (tab button, page button, step label,
+   *            chip label, select label, chat action) and 75 Figma text nodes.
+   *   action   SemiBold 16 — 3 CSS rules (button, accordion trigger, chat
+   *            header title) and 15 Figma text nodes.
+   *
+   * Both are TIGHT, and that was unanimous rather than chosen: every one of the
+   * 30 Figma nodes in these two combinations that states a leading at all states
+   * 125%, and .atl-button and .accordion-trigger state --ui-line-height-tight.
+   *
+   * They are named for the --ui-control-height-* ladder they live on: text on a
+   * control, not prose. A control's own VALUE text (an input's content) is not
+   * one of these — that stays a longhand, because its padding formula names the
+   * leading as an operand (ADR-0073).
+   */
+  --ui-type-control: var(--ui-font-weight-medium) var(--ui-font-size-sm) /
+    var(--ui-line-height-tight) var(--ui-font-family);
+  --ui-type-action: var(--ui-font-weight-semibold) var(--ui-font-size-md) /
+    var(--ui-line-height-tight) var(--ui-font-family);
 
   /* ── Colours · light mode (default) ────────────────────────── */