@atelier-ui/react 0.2.38 → 0.2.39

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## 0.2.39 (2026-09-07)
+
+### 🩹 Fixes
+
+- **pagination,stepper:** the active state was bolder than any role allows ([1eea2f0](https://github.com/DominikPieper/atelier-ui/commit/1eea2f0))
+- **breadcrumbs:** the fallback separator named a glyph nothing ships ([910e77c](https://github.com/DominikPieper/atelier-ui/commit/910e77c))
+
+### ❤️ Thank You
+
+- Claude Opus 5 (1M context)
+- Dominik Pieper @DominikPieper
+
 ## 0.2.38 (2026-09-07)
 
 ### 🩹 Fixes

package/package.json

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

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

@@ -47,9 +47,17 @@
    the CSS Generated Content alt-text pair: an explicit empty alternative
    text, which keeps the glyph out of the accessibility tree in Chromium,
    Firefox and WebKit alike (verified; a bare `content: '…'` is NOT excluded
-   by default — it renders as its own accessible text node). See ADR-0100. */
+   by default — it renders as its own accessible text node). See ADR-0100.
+   The fallback matches the component's own default ('/', not '›'): all
+   three adapters always set --atl-separator inline before first paint (in
+   SSR-rendered markup, not just post-hydration), so this value is unreached
+   in every documented usage — it exists only so a stray '.atl-breadcrumb-
+   item::after' rendered without the component (hand-authored markup that
+   imports the CSS but skips AtlBreadcrumbs/atl-breadcrumbs/AtlBreadcrumbs.vue)
+   degrades to the shipped default rather than to a glyph the spec's
+   `separator` option list ('/', '>') never offers. */
 .atl-breadcrumb-item::after {
-  content: var(--atl-separator, '›') / '';
+  content: var(--atl-separator, '/') / '';
   margin: 0 var(--ui-spacing-2);
   color: var(--ui-color-border-hover);
   font-size: var(--ui-font-size-md);
@@ -80,7 +88,15 @@
   box-shadow: var(--ui-focus-ring);
 }
 
-/* Current item (plain text) */
+/* Current item (plain text). Deliberately no padding: `.breadcrumb-link`'s
+   padding is exactly cancelled by its own negative margin (a hit/hover-area
+   enlargement, invisible in the flow), so its text occupies exactly the same
+   box a padding-less element would — measured in a real browser, both items'
+   rows come out the same height and the link's text starts at the same
+   offset within its row as this span's. Adding matching padding here would
+   not reproduce that; without a compensating negative margin it would make
+   this row taller than a link row, which is the regression this note exists
+   to head off. */
 .atl-breadcrumb-item .breadcrumb-current {
   color: var(--ui-color-text);
   font-weight: var(--ui-font-weight-semibold);

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

@@ -65,12 +65,14 @@
   box-shadow: var(--ui-focus-ring);
 }
 
-/* Active (current) page — primary fill */
+/* Active (current) page — primary fill. Weight stays the resting --ui-type-control
+ * medium (ADR-0074): the Figma master renders this label Medium in every state, and
+ * .atl-tab-group's own .is-active — the other stateful member of the same six-rule
+ * consumer list — changes only colour, never weight, on its current item. */
 .page-btn.is-active {
   background-color: var(--ui-color-primary);
   border-color: var(--ui-color-primary);
   color: var(--ui-color-text-on-primary);
-  font-weight: var(--ui-font-weight-semibold);
 }
 
 .page-btn.is-active:hover {

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

@@ -104,14 +104,14 @@
 .step-description {
   font-size: var(--ui-font-size-xs);
   color: var(--ui-color-text-muted);
-  margin-top: 2px;
+  margin-top: var(--ui-spacing-1);
 }
 
 .step-optional {
   font-size: var(--ui-font-size-xs);
   color: var(--ui-color-text-muted);
   font-style: italic;
-  margin-top: 2px;
+  margin-top: var(--ui-spacing-1);
 }
 
 /* ─── Content ─── */
@@ -130,8 +130,11 @@
 }
 
 .step-item.is-active .step-label {
+  /* Weight stays the resting --ui-type-control medium (ADR-0074): the Figma master
+   * renders this label Medium in every state, and .atl-tab-group's own .is-active —
+   * the other stateful member of the same six-rule consumer list — changes only
+   * colour, never weight, on its current item. */
   color: var(--ui-color-text);
-  font-weight: var(--ui-font-weight-semibold);
 }
 
 /* ─── Completed state ─── */