@atelier-ui/react 0.2.38 → 0.2.40

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+## 0.2.40 (2026-09-07)
+
+This was a version bump only for react to align it with other projects, there were no code changes.
+
+## 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.40",
   "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/icon/atl-icon.d.ts

@@ -16,10 +16,10 @@ export interface AtlIconProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'ari
     label?: string;
 }
 /**
- * Vector icon. 23 named variants, drawn from the geometry in `icons.ts` so the
- * same shape is used everywhere it appears. Matches the Figma `AtlIcon`
- * component set. Decorative by default; pass `label` to announce a meaning
- * to assistive tech.
+ * Vector icon. Renders whichever `AtlIconName` variant is passed, drawn from
+ * the geometry in `icons.ts` so the same shape is used everywhere it appears.
+ * Matches the Figma `AtlIcon` component set. Decorative by default; pass
+ * `label` to announce a meaning to assistive tech.
  */
 export declare function AtlIcon({ name, size, label, className, ...rest }: AtlIconProps): import("react").JSX.Element;
 //# sourceMappingURL=atl-icon.d.ts.map

package/src/lib/icon/atl-icon.js

@@ -2,10 +2,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { ATL_ICON_GEOMETRY, ATL_ICON_STROKE_WIDTH, ATL_ICON_VIEWBOX } from '../icons';
 import './atl-icon.css';
 /**
- * Vector icon. 23 named variants, drawn from the geometry in `icons.ts` so the
- * same shape is used everywhere it appears. Matches the Figma `AtlIcon`
- * component set. Decorative by default; pass `label` to announce a meaning
- * to assistive tech.
+ * Vector icon. Renders whichever `AtlIconName` variant is passed, drawn from
+ * the geometry in `icons.ts` so the same shape is used everywhere it appears.
+ * Matches the Figma `AtlIcon` component set. Decorative by default; pass
+ * `label` to announce a meaning to assistive tech.
  */
 export function AtlIcon({ name, size = 'md', label, className, ...rest }) {
     const classes = ['atl-icon', `size-${size}`, className].filter(Boolean).join(' ');

package/src/lib/icon/atl-icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"atl-icon.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/icon/atl-icon.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,iBAAiB,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AACtF,OAAO,gBAAgB,CAAC;AAoBxB;;;;;GAKG;AACH,MAAM,UAAU,OAAO,CAAC,EACtB,IAAI,EACJ,IAAI,GAAG,IAAI,EACX,KAAK,EACL,SAAS,EACT,GAAG,IAAI,EACM;IACb,MAAM,OAAO,GAAG,CAAC,UAAU,EAAE,QAAQ,IAAI,EAAE,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAClF,MAAM,kBAAkB,GAAG,KAAK;QAC9B,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE;QACtC,CAAC,CAAC,EAAE,aAAa,EAAE,IAAa,EAAE,CAAC;IACrC,MAAM,QAAQ,GAAG,iBAAiB,CAAC,IAAI,CAAC,CAAC;IACzC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,KAAK,QAAQ,CAAC;IAC1C,OAAO,CACL,eAAM,SAAS,EAAE,OAAO,KAAM,kBAAkB,KAAM,IAAI,YACxD,cACE,OAAO,EAAE,gBAAgB,EACzB,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,cAAc,EACtC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS,EAC3C,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,SAAS,EACvD,aAAa,EAAE,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAC3C,cAAc,EAAE,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,iBAChC,MAAM,EAClB,SAAS,EAAC,OAAO,YAEhB,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CACzB,eAAc,CAAC,EAAE,CAAC,IAAP,CAAC,CAAU,CACvB,CAAC,GACE,GACD,CACR,CAAC;AACJ,CAAC","sourcesContent":["import { HTMLAttributes } from 'react';\nimport type { AtlIconName, AtlIconSize, AtlIconSpec } from '../spec';\nimport { ATL_ICON_GEOMETRY, ATL_ICON_STROKE_WIDTH, ATL_ICON_VIEWBOX } from '../icons';\nimport './atl-icon.css';\n\n\n/**\n * Properties for the AtlIcon component.\n */\nexport interface AtlIconProps\n  extends Omit<HTMLAttributes<HTMLSpanElement>, 'aria-label'>,\n    AtlIconSpec {\n  /** The icon name. */\n  name: AtlIconName;\n  /** The icon size. */\n  size?: AtlIconSize;\n  /**\n   * Accessible label. When provided, the icon is announced as an image with\n   * this label. When omitted, the icon is hidden from assistive tech.\n   */\n  label?: string;\n}\n\n/**\n * Vector icon. 23 named variants, drawn from the geometry in `icons.ts` so the\n * same shape is used everywhere it appears. Matches the Figma `AtlIcon`\n * component set. Decorative by default; pass `label` to announce a meaning\n * to assistive tech.\n */\nexport function AtlIcon({\n  name,\n  size = 'md',\n  label,\n  className,\n  ...rest\n}: AtlIconProps) {\n  const classes = ['atl-icon', `size-${size}`, className].filter(Boolean).join(' ');\n  const accessibilityProps = label\n    ? { role: 'img', 'aria-label': label }\n    : { 'aria-hidden': true as const };\n  const geometry = ATL_ICON_GEOMETRY[name];\n  const stroke = geometry.kind === 'stroke';\n  return (\n    <span className={classes} {...accessibilityProps} {...rest}>\n      <svg\n        viewBox={ATL_ICON_VIEWBOX}\n        fill={stroke ? 'none' : 'currentColor'}\n        stroke={stroke ? 'currentColor' : undefined}\n        strokeWidth={stroke ? ATL_ICON_STROKE_WIDTH : undefined}\n        strokeLinecap={stroke ? 'round' : undefined}\n        strokeLinejoin={stroke ? 'round' : undefined}\n        aria-hidden=\"true\"\n        focusable=\"false\"\n      >\n        {geometry.paths.map((d) => (\n          <path key={d} d={d} />\n        ))}\n      </svg>\n    </span>\n  );\n}\n"]}
+{"version":3,"file":"atl-icon.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/icon/atl-icon.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,iBAAiB,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AACtF,OAAO,gBAAgB,CAAC;AAoBxB;;;;;GAKG;AACH,MAAM,UAAU,OAAO,CAAC,EACtB,IAAI,EACJ,IAAI,GAAG,IAAI,EACX,KAAK,EACL,SAAS,EACT,GAAG,IAAI,EACM;IACb,MAAM,OAAO,GAAG,CAAC,UAAU,EAAE,QAAQ,IAAI,EAAE,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAClF,MAAM,kBAAkB,GAAG,KAAK;QAC9B,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE;QACtC,CAAC,CAAC,EAAE,aAAa,EAAE,IAAa,EAAE,CAAC;IACrC,MAAM,QAAQ,GAAG,iBAAiB,CAAC,IAAI,CAAC,CAAC;IACzC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,KAAK,QAAQ,CAAC;IAC1C,OAAO,CACL,eAAM,SAAS,EAAE,OAAO,KAAM,kBAAkB,KAAM,IAAI,YACxD,cACE,OAAO,EAAE,gBAAgB,EACzB,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,cAAc,EACtC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS,EAC3C,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,SAAS,EACvD,aAAa,EAAE,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAC3C,cAAc,EAAE,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,iBAChC,MAAM,EAClB,SAAS,EAAC,OAAO,YAEhB,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CACzB,eAAc,CAAC,EAAE,CAAC,IAAP,CAAC,CAAU,CACvB,CAAC,GACE,GACD,CACR,CAAC;AACJ,CAAC","sourcesContent":["import { HTMLAttributes } from 'react';\nimport type { AtlIconName, AtlIconSize, AtlIconSpec } from '../spec';\nimport { ATL_ICON_GEOMETRY, ATL_ICON_STROKE_WIDTH, ATL_ICON_VIEWBOX } from '../icons';\nimport './atl-icon.css';\n\n\n/**\n * Properties for the AtlIcon component.\n */\nexport interface AtlIconProps\n  extends Omit<HTMLAttributes<HTMLSpanElement>, 'aria-label'>,\n    AtlIconSpec {\n  /** The icon name. */\n  name: AtlIconName;\n  /** The icon size. */\n  size?: AtlIconSize;\n  /**\n   * Accessible label. When provided, the icon is announced as an image with\n   * this label. When omitted, the icon is hidden from assistive tech.\n   */\n  label?: string;\n}\n\n/**\n * Vector icon. Renders whichever `AtlIconName` variant is passed, drawn from\n * the geometry in `icons.ts` so the same shape is used everywhere it appears.\n * Matches the Figma `AtlIcon` component set. Decorative by default; pass\n * `label` to announce a meaning to assistive tech.\n */\nexport function AtlIcon({\n  name,\n  size = 'md',\n  label,\n  className,\n  ...rest\n}: AtlIconProps) {\n  const classes = ['atl-icon', `size-${size}`, className].filter(Boolean).join(' ');\n  const accessibilityProps = label\n    ? { role: 'img', 'aria-label': label }\n    : { 'aria-hidden': true as const };\n  const geometry = ATL_ICON_GEOMETRY[name];\n  const stroke = geometry.kind === 'stroke';\n  return (\n    <span className={classes} {...accessibilityProps} {...rest}>\n      <svg\n        viewBox={ATL_ICON_VIEWBOX}\n        fill={stroke ? 'none' : 'currentColor'}\n        stroke={stroke ? 'currentColor' : undefined}\n        strokeWidth={stroke ? ATL_ICON_STROKE_WIDTH : undefined}\n        strokeLinecap={stroke ? 'round' : undefined}\n        strokeLinejoin={stroke ? 'round' : undefined}\n        aria-hidden=\"true\"\n        focusable=\"false\"\n      >\n        {geometry.paths.map((d) => (\n          <path key={d} d={d} />\n        ))}\n      </svg>\n    </span>\n  );\n}\n"]}

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