@atelier-ui/react 0.2.15 → 0.2.17

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+## 0.2.17 (2026-08-26)
+
+### 🚀 Features
+
+- **design:** batch E artboards; a reset was undoing the geometry contract ([6c3788d](https://github.com/DominikPieper/atelier-ui/commit/6c3788d))
+- **icons:** AtlAlert and AtlBadge stop drawing glyphs; batch C artboards ([c16c5c5](https://github.com/DominikPieper/atelier-ui/commit/c16c5c5))
+- **design:** bind the hand-written danger rings, batch A of the redesign artboards ([ffdf8f7](https://github.com/DominikPieper/atelier-ui/commit/ffdf8f7))
+
+### ❤️ Thank You
+
+- Claude Opus 5
+- Dominik Pieper @DominikPieper
+
+## 0.2.16 (2026-08-26)
+
+### 🩹 Fixes
+
+- **typography:** every component states its typeface ([8fb67f1](https://github.com/DominikPieper/atelier-ui/commit/8fb67f1))
+
+### ❤️ Thank You
+
+- Claude Opus 5
+- Dominik Pieper @DominikPieper
+
 ## 0.2.15 (2026-08-26)
 
 ### 🚀 Features

package/package.json

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

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

@@ -62,6 +62,10 @@
 /* ── Heading reset ─────────────────────────────────────────────────────────── */
 .accordion-heading {
   all: unset;
+  /* Restated after `all: unset`, which resets the box model too — the component's
+   * geometry contract has the same specificity and loses on source order, so this
+   * element was content-box and 2px taller than its own CSS said (ADR-0051). */
+  box-sizing: border-box;
   display: block;
 }
 

package/src/lib/alert/atl-alert.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"atl-alert.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/alert/atl-alert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC5C,OAAO,iBAAiB,CAAC;AAGzB,KAAK,eAAe,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AASjE;;GAEG;AACH,MAAM,WAAW,aACf,SAAQ,cAAc,CAAC,cAAc,CAAC,EACpC,YAAY;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;GAEG;AACH,wBAAgB,QAAQ,CAAC,EACvB,OAAgB,EAChB,WAAmB,EACnB,WAAW,EACX,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,aAAa,+BAsBf"}
+{"version":3,"file":"atl-alert.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/alert/atl-alert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC5C,OAAO,iBAAiB,CAAC;AAczB,KAAK,eAAe,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAEjE;;GAEG;AACH,MAAM,WAAW,aACf,SAAQ,cAAc,CAAC,cAAc,CAAC,EACpC,YAAY;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;GAEG;AACH,wBAAgB,QAAQ,CAAC,EACvB,OAAgB,EAChB,WAAmB,EACnB,WAAW,EACX,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,aAAa,+BAsBf"}

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

@@ -1,11 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import './atl-alert.css';
 import { AtlIcon } from '../icon/atl-icon';
-const VARIANT_ICONS = {
-    info: 'ℹ',
-    success: '✓',
-    warning: '⚠',
-    danger: '✕',
+/** Which AtlIcon each variant carries. Names, not glyphs: a glyph in a string map
+ * was the fifth way this library drew an icon, and the one check:iconography
+ * missed (ADR-0050). */
+const VARIANT_ICON_NAMES = {
+    info: 'info',
+    success: 'success',
+    warning: 'warning',
+    danger: 'danger',
 };
 /**
  * An alert component for displaying important messages.
@@ -13,6 +16,6 @@ const VARIANT_ICONS = {
 export function AtlAlert({ variant = 'info', dismissible = false, onDismissed, children, className, ...rest }) {
     const classes = ['atl-alert', `variant-${variant}`, className].filter(Boolean).join(' ');
     const ariaLive = variant === 'danger' || variant === 'warning' ? 'assertive' : 'polite';
-    return (_jsxs("div", { className: classes, role: "alert", "aria-live": ariaLive, ...rest, children: [_jsxs("span", { className: "content", children: [_jsx("span", { className: "variant-icon", "aria-hidden": "true", children: VARIANT_ICONS[variant] }), children] }), dismissible && (_jsx("button", { className: "dismiss", type: "button", "aria-label": "Dismiss", onClick: onDismissed, children: _jsx(AtlIcon, { name: "close", size: "sm" }) }))] }));
+    return (_jsxs("div", { className: classes, role: "alert", "aria-live": ariaLive, ...rest, children: [_jsxs("span", { className: "content", children: [_jsx(AtlIcon, { className: "variant-icon", name: VARIANT_ICON_NAMES[variant], size: "sm" }), children] }), dismissible && (_jsx("button", { className: "dismiss", type: "button", "aria-label": "Dismiss", onClick: onDismissed, children: _jsx(AtlIcon, { name: "close", size: "sm" }) }))] }));
 }
 //# sourceMappingURL=atl-alert.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"atl-alert.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/alert/atl-alert.tsx"],"names":[],"mappings":";AAEA,OAAO,iBAAiB,CAAC;AACzB,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAI3C,MAAM,aAAa,GAAoC;IACrD,IAAI,EAAE,GAAG;IACT,OAAO,EAAE,GAAG;IACZ,OAAO,EAAE,GAAG;IACZ,MAAM,EAAE,GAAG;CACZ,CAAC;AA0BF;;GAEG;AACH,MAAM,UAAU,QAAQ,CAAC,EACvB,OAAO,GAAG,MAAM,EAChB,WAAW,GAAG,KAAK,EACnB,WAAW,EACX,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACO;IACd,MAAM,OAAO,GAAG,CAAC,WAAW,EAAE,WAAW,OAAO,EAAE,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACzF,MAAM,QAAQ,GAAG,OAAO,KAAK,QAAQ,IAAI,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC;IAExF,OAAO,CACL,eAAK,SAAS,EAAE,OAAO,EAAE,IAAI,EAAC,OAAO,eAAY,QAAQ,KAAM,IAAI,aACjE,gBAAM,SAAS,EAAC,SAAS,aACvB,eAAM,SAAS,EAAC,cAAc,iBAAa,MAAM,YAAE,aAAa,CAAC,OAAO,CAAC,GAAQ,EAChF,QAAQ,IACJ,EACN,WAAW,IAAI,CACd,iBACE,SAAS,EAAC,SAAS,EACnB,IAAI,EAAC,QAAQ,gBACF,SAAS,EACpB,OAAO,EAAE,WAAW,YAEpB,KAAC,OAAO,IAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,IAAI,GAAG,GAC3B,CACV,IACG,CACP,CAAC;AACJ,CAAC","sourcesContent":["import { HTMLAttributes, ReactNode } from 'react';\nimport type { AtlAlertSpec } from '../spec';\nimport './atl-alert.css';\nimport { AtlIcon } from '../icon/atl-icon';\n\ntype AtlAlertVariant = 'info' | 'success' | 'warning' | 'danger';\n\nconst VARIANT_ICONS: Record<AtlAlertVariant, string> = {\n  info: 'ℹ',\n  success: '✓',\n  warning: '⚠',\n  danger: '✕',\n};\n\n/**\n * Properties for the AtlAlert component.\n */\nexport interface AtlAlertProps\n  extends HTMLAttributes<HTMLDivElement>,\n    AtlAlertSpec {\n  /**\n   * The visual style variant of the alert.\n   */\n  variant?: AtlAlertVariant;\n  /**\n   * Whether the alert can be dismissed by the user.\n   */\n  dismissible?: boolean;\n  /**\n   * Callback triggered when the alert is dismissed.\n   */\n  onDismissed?: () => void;\n  /**\n   * The content to be rendered inside the alert.\n   */\n  children?: ReactNode;\n}\n\n/**\n * An alert component for displaying important messages.\n */\nexport function AtlAlert({\n  variant = 'info',\n  dismissible = false,\n  onDismissed,\n  children,\n  className,\n  ...rest\n}: AtlAlertProps) {\n  const classes = ['atl-alert', `variant-${variant}`, className].filter(Boolean).join(' ');\n  const ariaLive = variant === 'danger' || variant === 'warning' ? 'assertive' : 'polite';\n\n  return (\n    <div className={classes} role=\"alert\" aria-live={ariaLive} {...rest}>\n      <span className=\"content\">\n        <span className=\"variant-icon\" aria-hidden=\"true\">{VARIANT_ICONS[variant]}</span>\n        {children}\n      </span>\n      {dismissible && (\n        <button\n          className=\"dismiss\"\n          type=\"button\"\n          aria-label=\"Dismiss\"\n          onClick={onDismissed}\n        >\n          <AtlIcon name=\"close\" size=\"sm\" />\n        </button>\n      )}\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"atl-alert.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/alert/atl-alert.tsx"],"names":[],"mappings":";AAEA,OAAO,iBAAiB,CAAC;AACzB,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAE3C;;wBAEwB;AACxB,MAAM,kBAAkB,GAAG;IACzB,IAAI,EAAE,MAAM;IACZ,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,QAAQ;CACR,CAAC;AA6BX;;GAEG;AACH,MAAM,UAAU,QAAQ,CAAC,EACvB,OAAO,GAAG,MAAM,EAChB,WAAW,GAAG,KAAK,EACnB,WAAW,EACX,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACO;IACd,MAAM,OAAO,GAAG,CAAC,WAAW,EAAE,WAAW,OAAO,EAAE,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACzF,MAAM,QAAQ,GAAG,OAAO,KAAK,QAAQ,IAAI,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC;IAExF,OAAO,CACL,eAAK,SAAS,EAAE,OAAO,EAAE,IAAI,EAAC,OAAO,eAAY,QAAQ,KAAM,IAAI,aACjE,gBAAM,SAAS,EAAC,SAAS,aACvB,KAAC,OAAO,IAAC,SAAS,EAAC,cAAc,EAAC,IAAI,EAAE,kBAAkB,CAAC,OAAO,CAAC,EAAE,IAAI,EAAC,IAAI,GAAG,EAChF,QAAQ,IACJ,EACN,WAAW,IAAI,CACd,iBACE,SAAS,EAAC,SAAS,EACnB,IAAI,EAAC,QAAQ,gBACF,SAAS,EACpB,OAAO,EAAE,WAAW,YAEpB,KAAC,OAAO,IAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,IAAI,GAAG,GAC3B,CACV,IACG,CACP,CAAC;AACJ,CAAC","sourcesContent":["import { HTMLAttributes, ReactNode } from 'react';\nimport type { AtlAlertSpec } from '../spec';\nimport './atl-alert.css';\nimport { AtlIcon } from '../icon/atl-icon';\n\n/** Which AtlIcon each variant carries. Names, not glyphs: a glyph in a string map\n * was the fifth way this library drew an icon, and the one check:iconography\n * missed (ADR-0050). */\nconst VARIANT_ICON_NAMES = {\n  info: 'info',\n  success: 'success',\n  warning: 'warning',\n  danger: 'danger',\n} as const;\n\n\ntype AtlAlertVariant = 'info' | 'success' | 'warning' | 'danger';\n\n/**\n * Properties for the AtlAlert component.\n */\nexport interface AtlAlertProps\n  extends HTMLAttributes<HTMLDivElement>,\n    AtlAlertSpec {\n  /**\n   * The visual style variant of the alert.\n   */\n  variant?: AtlAlertVariant;\n  /**\n   * Whether the alert can be dismissed by the user.\n   */\n  dismissible?: boolean;\n  /**\n   * Callback triggered when the alert is dismissed.\n   */\n  onDismissed?: () => void;\n  /**\n   * The content to be rendered inside the alert.\n   */\n  children?: ReactNode;\n}\n\n/**\n * An alert component for displaying important messages.\n */\nexport function AtlAlert({\n  variant = 'info',\n  dismissible = false,\n  onDismissed,\n  children,\n  className,\n  ...rest\n}: AtlAlertProps) {\n  const classes = ['atl-alert', `variant-${variant}`, className].filter(Boolean).join(' ');\n  const ariaLive = variant === 'danger' || variant === 'warning' ? 'assertive' : 'polite';\n\n  return (\n    <div className={classes} role=\"alert\" aria-live={ariaLive} {...rest}>\n      <span className=\"content\">\n        <AtlIcon className=\"variant-icon\" name={VARIANT_ICON_NAMES[variant]} size=\"sm\" />\n        {children}\n      </span>\n      {dismissible && (\n        <button\n          className=\"dismiss\"\n          type=\"button\"\n          aria-label=\"Dismiss\"\n          onClick={onDismissed}\n        >\n          <AtlIcon name=\"close\" size=\"sm\" />\n        </button>\n      )}\n    </div>\n  );\n}\n"]}

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

@@ -86,6 +86,11 @@
 /* === AtlAvatarGroup === */
 
 .atl-avatar-group {
+  /* The library states its own typeface (ADR-0035). Without this the component
+   * renders in the consuming app's font while its neighbours render Instrument
+   * 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);
   display: inline-flex;
   align-items: center;
   background: none;
@@ -109,7 +114,6 @@
   color: var(--ui-color-text-muted);
   border: var(--ui-border-width) solid var(--ui-color-border);
   border-radius: var(--ui-radius-full);
-  font-family: var(--ui-font-family);
   font-weight: var(--ui-font-weight-semibold);
   box-shadow: 0 0 0 2px var(--ui-color-surface);
   margin-inline-start: -8px;

package/src/lib/badge/atl-badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"atl-badge.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/badge/atl-badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC5C,OAAO,iBAAiB,CAAC;AAEzB,KAAK,eAAe,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;AAU7E;;GAEG;AACH,MAAM,WAAW,aACf,SAAQ,cAAc,CAAC,eAAe,CAAC,EACrC,YAAY;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;GAEG;AACH,wBAAgB,QAAQ,CAAC,EACvB,OAAmB,EACnB,IAAW,EACX,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,aAAa,+BAUf"}
+{"version":3,"file":"atl-badge.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/badge/atl-badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC5C,OAAO,iBAAiB,CAAC;AAczB,KAAK,eAAe,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE7E;;GAEG;AACH,MAAM,WAAW,aACf,SAAQ,cAAc,CAAC,eAAe,CAAC,EACrC,YAAY;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;GAEG;AACH,wBAAgB,QAAQ,CAAC,EACvB,OAAmB,EACnB,IAAW,EACX,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,aAAa,+BAUf"}

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

@@ -1,11 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import './atl-badge.css';
-const VARIANT_ICONS = {
-    default: null,
-    success: '✓',
-    warning: '⚠',
-    danger: '✕',
-    info: 'ℹ',
+import { AtlIcon } from '../icon/atl-icon';
+/** Which AtlIcon each variant carries. Names, not glyphs: a glyph in a string map
+ * was the fifth way this library drew an icon, and the one check:iconography
+ * missed (ADR-0050). */
+const VARIANT_ICON_NAMES = {
+    info: 'info',
+    success: 'success',
+    warning: 'warning',
+    danger: 'danger',
 };
 /**
  * A badge component for displaying small amounts of information or status.
@@ -13,7 +16,7 @@ const VARIANT_ICONS = {
 export function AtlBadge({ variant = 'default', size = 'md', children, className, ...rest }) {
     const classes = ['atl-badge', `variant-${variant}`, `size-${size}`, className]
         .filter(Boolean).join(' ');
-    const icon = VARIANT_ICONS[variant];
-    return (_jsxs("span", { className: classes, role: "status", ...rest, children: [icon && _jsx("span", { className: "variant-icon", "aria-hidden": "true", children: icon }), children] }));
+    const iconName = VARIANT_ICON_NAMES[variant];
+    return (_jsxs("span", { className: classes, role: "status", ...rest, children: [iconName && _jsx(AtlIcon, { className: "variant-icon", name: iconName, size: "sm" }), children] }));
 }
 //# sourceMappingURL=atl-badge.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"atl-badge.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/badge/atl-badge.tsx"],"names":[],"mappings":";AAEA,OAAO,iBAAiB,CAAC;AAIzB,MAAM,aAAa,GAA2C;IAC5D,OAAO,EAAE,IAAI;IACb,OAAO,EAAE,GAAG;IACZ,OAAO,EAAE,GAAG;IACZ,MAAM,EAAE,GAAG;IACX,IAAI,EAAE,GAAG;CACV,CAAC;AAsBF;;GAEG;AACH,MAAM,UAAU,QAAQ,CAAC,EACvB,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,IAAI,EACX,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACO;IACd,MAAM,OAAO,GAAG,CAAC,WAAW,EAAE,WAAW,OAAO,EAAE,EAAE,QAAQ,IAAI,EAAE,EAAE,SAAS,CAAC;SAC3E,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC7B,MAAM,IAAI,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;IACpC,OAAO,CACL,gBAAM,SAAS,EAAE,OAAO,EAAE,IAAI,EAAC,QAAQ,KAAK,IAAI,aAC7C,IAAI,IAAI,eAAM,SAAS,EAAC,cAAc,iBAAa,MAAM,YAAE,IAAI,GAAQ,EACvE,QAAQ,IACJ,CACR,CAAC;AACJ,CAAC","sourcesContent":["import { HTMLAttributes, ReactNode } from 'react';\nimport type { AtlBadgeSpec } from '../spec';\nimport './atl-badge.css';\n\ntype AtlBadgeVariant = 'default' | 'success' | 'warning' | 'danger' | 'info';\n\nconst VARIANT_ICONS: Record<AtlBadgeVariant, string | null> = {\n  default: null,\n  success: '✓',\n  warning: '⚠',\n  danger: '✕',\n  info: 'ℹ',\n};\n\n/**\n * Properties for the AtlBadge component.\n */\nexport interface AtlBadgeProps\n  extends HTMLAttributes<HTMLSpanElement>,\n    AtlBadgeSpec {\n  /**\n   * The visual style variant of the badge.\n   */\n  variant?: AtlBadgeVariant;\n  /**\n   * The size of the badge.\n   */\n  size?: 'sm' | 'md';\n  /**\n   * The content to be rendered inside the badge.\n   */\n  children?: ReactNode;\n}\n\n/**\n * A badge component for displaying small amounts of information or status.\n */\nexport function AtlBadge({\n  variant = 'default',\n  size = 'md',\n  children,\n  className,\n  ...rest\n}: AtlBadgeProps) {\n  const classes = ['atl-badge', `variant-${variant}`, `size-${size}`, className]\n    .filter(Boolean).join(' ');\n  const icon = VARIANT_ICONS[variant];\n  return (\n    <span className={classes} role=\"status\" {...rest}>\n      {icon && <span className=\"variant-icon\" aria-hidden=\"true\">{icon}</span>}\n      {children}\n    </span>\n  );\n}\n"]}
+{"version":3,"file":"atl-badge.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/badge/atl-badge.tsx"],"names":[],"mappings":";AAEA,OAAO,iBAAiB,CAAC;AACzB,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAE3C;;wBAEwB;AACxB,MAAM,kBAAkB,GAAG;IACzB,IAAI,EAAE,MAAM;IACZ,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,QAAQ;CACR,CAAC;AAyBX;;GAEG;AACH,MAAM,UAAU,QAAQ,CAAC,EACvB,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,IAAI,EACX,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACO;IACd,MAAM,OAAO,GAAG,CAAC,WAAW,EAAE,WAAW,OAAO,EAAE,EAAE,QAAQ,IAAI,EAAE,EAAE,SAAS,CAAC;SAC3E,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC7B,MAAM,QAAQ,GAAG,kBAAkB,CAAC,OAA0C,CAAC,CAAC;IAChF,OAAO,CACL,gBAAM,SAAS,EAAE,OAAO,EAAE,IAAI,EAAC,QAAQ,KAAK,IAAI,aAC7C,QAAQ,IAAI,KAAC,OAAO,IAAC,SAAS,EAAC,cAAc,EAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,IAAI,GAAG,EAC1E,QAAQ,IACJ,CACR,CAAC;AACJ,CAAC","sourcesContent":["import { HTMLAttributes, ReactNode } from 'react';\nimport type { AtlBadgeSpec } from '../spec';\nimport './atl-badge.css';\nimport { AtlIcon } from '../icon/atl-icon';\n\n/** Which AtlIcon each variant carries. Names, not glyphs: a glyph in a string map\n * was the fifth way this library drew an icon, and the one check:iconography\n * missed (ADR-0050). */\nconst VARIANT_ICON_NAMES = {\n  info: 'info',\n  success: 'success',\n  warning: 'warning',\n  danger: 'danger',\n} as const;\n\n\ntype AtlBadgeVariant = 'default' | 'success' | 'warning' | 'danger' | 'info';\n\n/**\n * Properties for the AtlBadge component.\n */\nexport interface AtlBadgeProps\n  extends HTMLAttributes<HTMLSpanElement>,\n    AtlBadgeSpec {\n  /**\n   * The visual style variant of the badge.\n   */\n  variant?: AtlBadgeVariant;\n  /**\n   * The size of the badge.\n   */\n  size?: 'sm' | 'md';\n  /**\n   * The content to be rendered inside the badge.\n   */\n  children?: ReactNode;\n}\n\n/**\n * A badge component for displaying small amounts of information or status.\n */\nexport function AtlBadge({\n  variant = 'default',\n  size = 'md',\n  children,\n  className,\n  ...rest\n}: AtlBadgeProps) {\n  const classes = ['atl-badge', `variant-${variant}`, `size-${size}`, className]\n    .filter(Boolean).join(' ');\n  const iconName = VARIANT_ICON_NAMES[variant as keyof typeof VARIANT_ICON_NAMES];\n  return (\n    <span className={classes} role=\"status\" {...rest}>\n      {iconName && <AtlIcon className=\"variant-icon\" name={iconName} size=\"sm\" />}\n      {children}\n    </span>\n  );\n}\n"]}

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

@@ -19,6 +19,11 @@
 }
 
 .atl-card {
+  /* The library states its own typeface (ADR-0035). Without this the component
+   * renders in the consuming app's font while its neighbours render Instrument
+   * 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);
   display: block;
   border-radius: var(--ui-radius-xl);
   background-color: var(--ui-color-surface-raised);

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

@@ -26,6 +26,11 @@
 
 /* ── Host wrapper ──────────────────────────────────────────────────────────── */
 .atl-chat {
+  /* The library states its own typeface (ADR-0035). Without this the component
+   * renders in the consuming app's font while its neighbours render Instrument
+   * 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);
   display: contents;
 }
 
@@ -43,6 +48,12 @@
 /* ═══════════════════════════════════════════════════════════════════════════ */
 .atl-chat.variant-drawer dialog {
   all: unset;
+  /* Restated after `all: unset`, which resets the box model too — the component's
+   * geometry contract has the same specificity and loses on source order, so this
+   * element was content-box and 2px taller than its own CSS said (ADR-0051). */
+  box-sizing: border-box;
+  /* After `all: unset`, which would otherwise reset it (ADR-0049). */
+  font-family: var(--ui-font-family);
   position: fixed;
   inset: 0 0 0 auto;
   height: 100dvh;
@@ -109,7 +120,6 @@
   background: var(--ui-color-brand-ai, #b5e61c);
   color: var(--ui-color-text);
   border: none;
-  font-family: var(--ui-font-family);
   font-size: var(--ui-font-size-lg);
   font-weight: var(--ui-font-weight-semibold);
   cursor: pointer;
@@ -338,7 +348,6 @@
   color: var(--ui-color-text);
   border: var(--ui-border-width) solid var(--ui-color-border);
   border-radius: var(--ui-radius-lg);
-  font-family: var(--ui-font-family);
   text-align: left;
   cursor: pointer;
   transition:
@@ -388,7 +397,6 @@
   border-radius: var(--ui-radius-md);
   background: var(--ui-color-surface-sunken);
   color: var(--ui-color-text);
-  font-family: var(--ui-font-family);
   font-size: var(--ui-font-size-sm);
   line-height: var(--ui-line-height-normal);
   resize: none;
@@ -422,7 +430,6 @@
   padding: var(--ui-spacing-2) var(--ui-spacing-4);
   border: var(--ui-border-width) solid transparent;
   border-radius: var(--ui-radius-md);
-  font-family: var(--ui-font-family);
   font-size: var(--ui-font-size-sm);
   font-weight: var(--ui-font-weight-medium);
   cursor: pointer;

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

@@ -96,7 +96,7 @@
 
 .atl-checkbox.is-invalid input[type='checkbox']:focus-visible {
   border-color: var(--ui-color-input-border-invalid);
-  box-shadow: 0 0 0 2px var(--ui-color-surface), 0 0 0 4px var(--ui-color-danger);
+  box-shadow: var(--ui-focus-ring-danger);
 }
 
 /* Disabled state */

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

@@ -44,7 +44,7 @@
 }
 
 .code-block-label {
-  font-family: var(--ui-font-mono, 'Menlo', 'Monaco', 'Courier New', monospace);
+  font-family: var(--ui-font-mono);
   font-size: 0.72rem;
   font-weight: 600;
   letter-spacing: 0.03em;
@@ -97,7 +97,7 @@
 .code-block-pre {
   margin: 0;
   padding: var(--ui-spacing-4);
-  font-family: var(--ui-font-mono, 'Menlo', 'Monaco', 'Courier New', monospace);
+  font-family: var(--ui-font-mono);
   font-size: var(--ui-font-size-sm);
   line-height: 1.65;
   color: var(--ui-color-text);

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

@@ -100,7 +100,7 @@
 
 .atl-combobox.is-invalid .atl-combobox-input:focus-visible {
   border-color: var(--ui-color-input-border-invalid);
-  box-shadow: 0 0 0 2px var(--ui-color-surface), 0 0 0 4px var(--ui-color-danger);
+  box-shadow: var(--ui-focus-ring-danger);
 }
 
 .atl-combobox.is-disabled {

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

@@ -21,6 +21,14 @@
 /* ── Native <dialog> reset + base ──────────────────────────────────────────── */
 .atl-dialog {
   all: unset;
+  /* Restated after `all: unset`, which resets the box model too — the component's
+   * geometry contract has the same specificity and loses on source order, so this
+   * element was content-box and 2px taller than its own CSS said (ADR-0051). */
+  box-sizing: border-box;
+  /* After `all: unset`, which would otherwise reset it. The library states its own
+   * 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);
   position: fixed;
   inset: 0;
   margin: auto;

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

@@ -20,12 +20,23 @@
 
 /* ── Host wrapper ──────────────────────────────────────────────────────────── */
 .atl-drawer-host {
+  /* The library states its own typeface (ADR-0035). Without this the component
+   * renders in the consuming app's font while its neighbours render Instrument
+   * 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);
   display: contents;
 }
 
 /* ── Native <dialog> base ──────────────────────────────────────────────────── */
 .atl-drawer-host dialog {
   all: unset;
+  /* Restated after `all: unset`, which resets the box model too — the component's
+   * geometry contract has the same specificity and loses on source order, so this
+   * element was content-box and 2px taller than its own CSS said (ADR-0051). */
+  box-sizing: border-box;
+  /* After `all: unset`, which would otherwise reset it (ADR-0049). */
+  font-family: var(--ui-font-family);
   position: fixed;
   display: none;
   flex-direction: column;

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

@@ -26,6 +26,10 @@
 /* Page button */
 .page-btn {
   all: unset;
+  /* Restated after `all: unset`, which resets the box model too — the component's
+   * geometry contract has the same specificity and loses on source order, so this
+   * element was content-box and 2px taller than its own CSS said (ADR-0051). */
+  box-sizing: border-box;
   display: inline-flex;
   align-items: center;
   justify-content: center;

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

@@ -72,7 +72,7 @@
 
 .atl-radio.is-invalid input[type='radio']:focus-visible {
   border-color: var(--ui-color-input-border-invalid);
-  box-shadow: 0 0 0 2px var(--ui-color-surface), 0 0 0 4px var(--ui-color-danger);
+  box-shadow: var(--ui-focus-ring-danger);
 }
 
 /* Disabled state */

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

@@ -9,6 +9,11 @@
 }
 
 .atl-skeleton {
+  /* The library states its own typeface (ADR-0035). Without this the component
+   * renders in the consuming app's font while its neighbours render Instrument
+   * 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);
   display: block;
   background: var(--ui-color-border);
   overflow: hidden;

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

@@ -60,7 +60,7 @@
 
 .atl-textarea.is-invalid textarea:focus {
   border-color: var(--ui-color-input-border-invalid);
-  box-shadow: 0 0 0 2px var(--ui-color-surface), 0 0 0 4px var(--ui-color-danger);
+  box-shadow: var(--ui-focus-ring-danger);
 }
 
 /* Non-color invalid indicator (WCAG 1.4.1). A real AtlIcon rather than a CSS

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

@@ -16,6 +16,11 @@
 
 /* ── Toast Container ── */
 .atl-toast-container {
+  /* The library states its own typeface (ADR-0035). Without this the component
+   * renders in the consuming app's font while its neighbours render Instrument
+   * 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);
   position: fixed;
   z-index: var(--ui-z-toast, 400);
   display: flex;

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

@@ -98,7 +98,7 @@
 
 .atl-toggle.is-invalid input[type='checkbox']:focus-visible + .track {
   border-color: var(--ui-color-input-border-invalid);
-  box-shadow: 0 0 0 2px var(--ui-color-surface), 0 0 0 4px var(--ui-color-danger);
+  box-shadow: var(--ui-focus-ring-danger);
 }
 
 /* Disabled state */

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

@@ -16,6 +16,11 @@
 
 /* Tooltip wrapper — inline container */
 .atl-tooltip-wrapper {
+  /* The library states its own typeface (ADR-0035). Without this the component
+   * renders in the consuming app's font while its neighbours render Instrument
+   * 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);
   display: inline-block;
   position: relative;
 }