@atelier-ui/react 0.2.36 → 0.2.38

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+## 0.2.38 (2026-09-07)
+
+### 🩹 Fixes
+
+- **card:** the header stated three of the title role's four axes ([c88a543](https://github.com/DominikPieper/atelier-ui/commit/c88a543))
+
+### ❤️ Thank You
+
+- Claude Opus 5 (1M context)
+- Dominik Pieper @DominikPieper
+
+## 0.2.37 (2026-09-06)
+
+### 🩹 Fixes
+
+- **a11y:** four role claims, and the fix that did not fix anything ([f6bc9cf](https://github.com/DominikPieper/atelier-ui/commit/f6bc9cf))
+
+### ❤️ Thank You
+
+- Claude Opus 5 (1M context)
+- Dominik Pieper @DominikPieper
+
 ## 0.2.36 (2026-09-06)
 
 This was a version bump only for react to align it with other projects, there were no code changes.

package/package.json

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

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

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import './atl-alert.css';
 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
+ * was the fifth way this library drew an icon, and the one check:icon-duplication
  * missed (ADR-0050). */
 const VARIANT_ICON_NAMES = {
     info: 'info',

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;AAE3C;;wBAEwB;AACxB,MAAM,kBAAkB,GAAkD;IACxE,IAAI,EAAE,MAAM;IACZ,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,QAAQ;CACjB,CAAC;AA6BF;;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,aACtB,kBAAkB,CAAC,OAAO,CAAC,IAAI,CAC9B,KAAC,OAAO,IAAC,SAAS,EAAC,cAAc,EAAC,IAAI,EAAE,kBAAkB,CAAC,OAAO,CAAC,EAAE,IAAI,EAAC,IAAI,GAAG,CAClF,EACA,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, AtlIconName } 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: Partial<Record<AtlAlertVariant, AtlIconName>> = {\n  info: 'info',\n  success: 'success',\n  warning: 'warning',\n  danger: 'danger',\n};\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        {VARIANT_ICON_NAMES[variant] && (\n          <AtlIcon className=\"variant-icon\" name={VARIANT_ICON_NAMES[variant]} size=\"sm\" />\n        )}\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,GAAkD;IACxE,IAAI,EAAE,MAAM;IACZ,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,QAAQ;CACjB,CAAC;AA6BF;;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,aACtB,kBAAkB,CAAC,OAAO,CAAC,IAAI,CAC9B,KAAC,OAAO,IAAC,SAAS,EAAC,cAAc,EAAC,IAAI,EAAE,kBAAkB,CAAC,OAAO,CAAC,EAAE,IAAI,EAAC,IAAI,GAAG,CAClF,EACA,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, AtlIconName } 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:icon-duplication\n * missed (ADR-0050). */\nconst VARIANT_ICON_NAMES: Partial<Record<AtlAlertVariant, AtlIconName>> = {\n  info: 'info',\n  success: 'success',\n  warning: 'warning',\n  danger: 'danger',\n};\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        {VARIANT_ICON_NAMES[variant] && (\n          <AtlIcon className=\"variant-icon\" name={VARIANT_ICON_NAMES[variant]} size=\"sm\" />\n        )}\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/badge/atl-badge.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import './atl-badge.css';
 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
+ * was the fifth way this library drew an icon, and the one check:icon-duplication
  * missed (ADR-0050). */
 const VARIANT_ICON_NAMES = {
     info: 'info',

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;AACzB,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAE3C;;wBAEwB;AACxB,MAAM,kBAAkB,GAAkD;IACxE,IAAI,EAAE,MAAM;IACZ,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,QAAQ;CACjB,CAAC;AAyBF;;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,OAAO,CAAC,CAAC;IAC7C,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, AtlIconName } 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: Partial<Record<AtlBadgeVariant, AtlIconName>> = {\n  info: 'info',\n  success: 'success',\n  warning: 'warning',\n  danger: 'danger',\n};\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];\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"]}
+{"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,GAAkD;IACxE,IAAI,EAAE,MAAM;IACZ,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,QAAQ;CACjB,CAAC;AAyBF;;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,OAAO,CAAC,CAAC;IAC7C,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, AtlIconName } 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:icon-duplication\n * missed (ADR-0050). */\nconst VARIANT_ICON_NAMES: Partial<Record<AtlBadgeVariant, AtlIconName>> = {\n  info: 'info',\n  success: 'success',\n  warning: 'warning',\n  danger: 'danger',\n};\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];\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/breadcrumbs/atl-breadcrumbs.css

@@ -43,9 +43,13 @@
   align-items: center;
 }
 
-/* Separator — chevron, CSS-generated, not read by screen readers */
+/* Separator — chevron, CSS-generated and decorative. The trailing `/ ''` is
+   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. */
 .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);

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

@@ -1 +1 @@
-{"version":3,"file":"atl-breadcrumbs.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/breadcrumbs/atl-breadcrumbs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,oBAAoB,EAA0C,MAAM,OAAO,CAAC;AAEhH,OAAO,KAAK,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AACzE,OAAO,uBAAuB,CAAC;AAE/B;;GAEG;AACH,MAAM,WAAW,mBAAoB,SAAQ,cAAc,CAAC,WAAW,CAAC,EAAE,kBAAkB;IAC1F;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,SAAe,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,mBAAmB,+BAwB3G;AAED;;GAEG;AACH,MAAM,WAAW,sBACf,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,qBAAqB;IACvB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,IAAI,EACJ,OAAe,EACf,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,sBAAsB,+BAqBxB"}
+{"version":3,"file":"atl-breadcrumbs.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/breadcrumbs/atl-breadcrumbs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,oBAAoB,EAA0C,MAAM,OAAO,CAAC;AAEhH,OAAO,KAAK,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AACzE,OAAO,uBAAuB,CAAC;AAE/B;;GAEG;AACH,MAAM,WAAW,mBAAoB,SAAQ,cAAc,CAAC,WAAW,CAAC,EAAE,kBAAkB;IAC1F;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,SAAe,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,mBAAmB,+BA6B3G;AAED;;GAEG;AACH,MAAM,WAAW,sBACf,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,qBAAqB;IACvB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,IAAI,EACJ,OAAe,EACf,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,sBAAsB,+BAqBxB"}

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

@@ -14,7 +14,7 @@ export function AtlBreadcrumbs({ children, separator = '/', className, style, ..
         }
         return child;
     });
-    return (_jsx("nav", { className: classes, "aria-label": "Breadcrumb", style: { '--atl-separator': `'${separator}'`, ...style }, ...rest, children: _jsx("ol", { className: "breadcrumbs-list", children: enhancedChildren }) }));
+    return (_jsx("nav", { className: classes, "aria-label": "Breadcrumb", style: { '--atl-separator': `'${separator}'`, ...style }, ...rest, children: _jsx("ol", { role: "list", className: "breadcrumbs-list", children: enhancedChildren }) }));
 }
 /**
  * An individual breadcrumb item.

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

@@ -1 +1 @@
-{"version":3,"file":"atl-breadcrumbs.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/breadcrumbs/atl-breadcrumbs.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAmD,QAAQ,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAGhH,OAAO,uBAAuB,CAAC;AAY/B;;GAEG;AACH,MAAM,UAAU,cAAc,CAAC,EAAE,QAAQ,EAAE,SAAS,GAAG,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,IAAI,EAAuB;IAC1G,MAAM,OAAO,GAAG,CAAC,iBAAiB,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEzE,+CAA+C;IAC/C,MAAM,UAAU,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IAC9C,MAAM,gBAAgB,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;QACvD,IAAI,cAAc,CAAC,KAAK,CAAC,IAAI,KAAK,KAAK,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAC7D,OAAO,YAAY,CAAC,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAY,CAAC,CAAC;QAC1D,CAAC;QACD,OAAO,KAAK,CAAC;IACf,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,cACE,SAAS,EAAE,OAAO,gBACP,YAAY,EACvB,KAAK,EAAE,EAAE,iBAAiB,EAAE,IAAI,SAAS,GAAG,EAAE,GAAG,KAAK,EAAmB,KACrE,IAAI,YAER,aAAI,SAAS,EAAC,kBAAkB,YAC7B,gBAAgB,GACd,GACD,CACP,CAAC;AACJ,CAAC;AAsBD;;GAEG;AACH,MAAM,UAAU,iBAAiB,CAAC,EAChC,IAAI,EACJ,OAAO,GAAG,KAAK,EACf,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACgB;IACvB,MAAM,OAAO,GAAG,CAAC,qBAAqB,EAAE,OAAO,IAAI,YAAY,EAAE,SAAS,CAAC;SACxE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,OAAO,CACL,aAAI,SAAS,EAAE,OAAO,YACnB,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAClB,YAAG,IAAI,EAAE,IAAI,EAAE,SAAS,EAAC,iBAAiB,KAAK,IAAI,YAChD,QAAQ,GACP,CACL,CAAC,CAAC,CAAC,CACF,eACE,SAAS,EAAC,oBAAoB,kBAChB,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,YAEzC,QAAQ,GACJ,CACR,GACE,CACN,CAAC;AACJ,CAAC","sourcesContent":["import { HTMLAttributes, ReactNode, AnchorHTMLAttributes, Children, isValidElement, cloneElement } from 'react';\nimport type { CSSProperties } from 'react';\nimport type { AtlBreadcrumbsSpec, AtlBreadcrumbItemSpec } from '../spec';\nimport './atl-breadcrumbs.css';\n\n/**\n * Properties for the AtlBreadcrumbs component.\n */\nexport interface AtlBreadcrumbsProps extends HTMLAttributes<HTMLElement>, AtlBreadcrumbsSpec {\n  /**\n   * The breadcrumb items to be rendered.\n   */\n  children?: ReactNode;\n}\n\n/**\n * A breadcrumbs component for displaying a navigation trail.\n */\nexport function AtlBreadcrumbs({ children, separator = '/', className, style, ...rest }: AtlBreadcrumbsProps) {\n  const classes = ['atl-breadcrumbs', className].filter(Boolean).join(' ');\n\n  // Automatically mark the last child as current\n  const childArray = Children.toArray(children);\n  const enhancedChildren = childArray.map((child, index) => {\n    if (isValidElement(child) && index === childArray.length - 1) {\n      return cloneElement(child, { current: true } as object);\n    }\n    return child;\n  });\n\n  return (\n    <nav\n      className={classes}\n      aria-label=\"Breadcrumb\"\n      style={{ '--atl-separator': `'${separator}'`, ...style } as CSSProperties}\n      {...rest}\n    >\n      <ol className=\"breadcrumbs-list\">\n        {enhancedChildren}\n      </ol>\n    </nav>\n  );\n}\n\n/**\n * Properties for the AtlBreadcrumbItem component.\n */\nexport interface AtlBreadcrumbItemProps\n  extends AnchorHTMLAttributes<HTMLAnchorElement>,\n    AtlBreadcrumbItemSpec {\n  /**\n   * The URL the breadcrumb points to.\n   */\n  href?: string;\n  /**\n   * Whether this is the current page.\n   */\n  current?: boolean;\n  /**\n   * The content to be rendered inside the breadcrumb item.\n   */\n  children?: ReactNode;\n}\n\n/**\n * An individual breadcrumb item.\n */\nexport function AtlBreadcrumbItem({\n  href,\n  current = false,\n  children,\n  className,\n  ...rest\n}: AtlBreadcrumbItemProps) {\n  const classes = ['atl-breadcrumb-item', current && 'is-current', className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <li className={classes}>\n      {href && !current ? (\n        <a href={href} className=\"breadcrumb-link\" {...rest}>\n          {children}\n        </a>\n      ) : (\n        <span\n          className=\"breadcrumb-current\"\n          aria-current={current ? 'page' : undefined}\n        >\n          {children}\n        </span>\n      )}\n    </li>\n  );\n}\n"]}
+{"version":3,"file":"atl-breadcrumbs.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/breadcrumbs/atl-breadcrumbs.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAmD,QAAQ,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAGhH,OAAO,uBAAuB,CAAC;AAY/B;;GAEG;AACH,MAAM,UAAU,cAAc,CAAC,EAAE,QAAQ,EAAE,SAAS,GAAG,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,IAAI,EAAuB;IAC1G,MAAM,OAAO,GAAG,CAAC,iBAAiB,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEzE,+CAA+C;IAC/C,MAAM,UAAU,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IAC9C,MAAM,gBAAgB,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;QACvD,IAAI,cAAc,CAAC,KAAK,CAAC,IAAI,KAAK,KAAK,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAC7D,OAAO,YAAY,CAAC,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAY,CAAC,CAAC;QAC1D,CAAC;QACD,OAAO,KAAK,CAAC;IACf,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,cACE,SAAS,EAAE,OAAO,gBACP,YAAY,EACvB,KAAK,EAAE,EAAE,iBAAiB,EAAE,IAAI,SAAS,GAAG,EAAE,GAAG,KAAK,EAAmB,KACrE,IAAI,YAOR,aAAI,IAAI,EAAC,MAAM,EAAC,SAAS,EAAC,kBAAkB,YACzC,gBAAgB,GACd,GACD,CACP,CAAC;AACJ,CAAC;AAsBD;;GAEG;AACH,MAAM,UAAU,iBAAiB,CAAC,EAChC,IAAI,EACJ,OAAO,GAAG,KAAK,EACf,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACgB;IACvB,MAAM,OAAO,GAAG,CAAC,qBAAqB,EAAE,OAAO,IAAI,YAAY,EAAE,SAAS,CAAC;SACxE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,OAAO,CACL,aAAI,SAAS,EAAE,OAAO,YACnB,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAClB,YAAG,IAAI,EAAE,IAAI,EAAE,SAAS,EAAC,iBAAiB,KAAK,IAAI,YAChD,QAAQ,GACP,CACL,CAAC,CAAC,CAAC,CACF,eACE,SAAS,EAAC,oBAAoB,kBAChB,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,YAEzC,QAAQ,GACJ,CACR,GACE,CACN,CAAC;AACJ,CAAC","sourcesContent":["import { HTMLAttributes, ReactNode, AnchorHTMLAttributes, Children, isValidElement, cloneElement } from 'react';\nimport type { CSSProperties } from 'react';\nimport type { AtlBreadcrumbsSpec, AtlBreadcrumbItemSpec } from '../spec';\nimport './atl-breadcrumbs.css';\n\n/**\n * Properties for the AtlBreadcrumbs component.\n */\nexport interface AtlBreadcrumbsProps extends HTMLAttributes<HTMLElement>, AtlBreadcrumbsSpec {\n  /**\n   * The breadcrumb items to be rendered.\n   */\n  children?: ReactNode;\n}\n\n/**\n * A breadcrumbs component for displaying a navigation trail.\n */\nexport function AtlBreadcrumbs({ children, separator = '/', className, style, ...rest }: AtlBreadcrumbsProps) {\n  const classes = ['atl-breadcrumbs', className].filter(Boolean).join(' ');\n\n  // Automatically mark the last child as current\n  const childArray = Children.toArray(children);\n  const enhancedChildren = childArray.map((child, index) => {\n    if (isValidElement(child) && index === childArray.length - 1) {\n      return cloneElement(child, { current: true } as object);\n    }\n    return child;\n  });\n\n  return (\n    <nav\n      className={classes}\n      aria-label=\"Breadcrumb\"\n      style={{ '--atl-separator': `'${separator}'`, ...style } as CSSProperties}\n      {...rest}\n    >\n      {/* eslint-disable-next-line jsx-a11y/no-redundant-roles -- role=\"list\" is\n          NOT redundant here: .breadcrumbs-list sets list-style: none, and an\n          unstyled-marker <ol>/<ul> with no explicit role is the documented\n          Safari/VoiceOver case where the implicit list semantics can be\n          dropped (ADR-0100). */}\n      <ol role=\"list\" className=\"breadcrumbs-list\">\n        {enhancedChildren}\n      </ol>\n    </nav>\n  );\n}\n\n/**\n * Properties for the AtlBreadcrumbItem component.\n */\nexport interface AtlBreadcrumbItemProps\n  extends AnchorHTMLAttributes<HTMLAnchorElement>,\n    AtlBreadcrumbItemSpec {\n  /**\n   * The URL the breadcrumb points to.\n   */\n  href?: string;\n  /**\n   * Whether this is the current page.\n   */\n  current?: boolean;\n  /**\n   * The content to be rendered inside the breadcrumb item.\n   */\n  children?: ReactNode;\n}\n\n/**\n * An individual breadcrumb item.\n */\nexport function AtlBreadcrumbItem({\n  href,\n  current = false,\n  children,\n  className,\n  ...rest\n}: AtlBreadcrumbItemProps) {\n  const classes = ['atl-breadcrumb-item', current && 'is-current', className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <li className={classes}>\n      {href && !current ? (\n        <a href={href} className=\"breadcrumb-link\" {...rest}>\n          {children}\n        </a>\n      ) : (\n        <span\n          className=\"breadcrumb-current\"\n          aria-current={current ? 'page' : undefined}\n        >\n          {children}\n        </span>\n      )}\n    </li>\n  );\n}\n"]}

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

@@ -81,6 +81,7 @@
   display: block;
   font-size: var(--ui-font-size-lg);
   font-weight: var(--ui-font-weight-semibold);
+  line-height: var(--ui-line-height-tight);
   color: var(--ui-color-text);
   border-bottom: var(--ui-border-width) solid var(--ui-color-border);
   letter-spacing: var(--ui-letter-spacing-tight);

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

@@ -228,6 +228,13 @@
   background: var(--ui-color-surface);
 }
 
+/* The role="list" wrapper the log's listitems need (a node has one role, so it
+   can't be the log root itself) — display:contents keeps it invisible to the
+   flex/gap layout above, so the messages still lay out as if it were absent. */
+.atl-chat-messages .messages-list {
+  display: contents;
+}
+
 /* ═══════════════════════════════════════════════════════════════════════════ */
 /* SUB-COMPONENT: message bubble                                               */
 /* ═══════════════════════════════════════════════════════════════════════════ */

package/src/lib/chat/atl-chat.d.ts

@@ -32,6 +32,17 @@ export declare function AtlChatHeader({ children, className, ...rest }: HTMLAttr
  * `AtlChatSuggestion` children inside. Auto-scrolls to the bottom whenever
  * children are added or content changes — important for streaming responses
  * where new tokens are appended live.
+ *
+ * Renders `role="log"` (named, `aria-label="Conversation"`) with
+ * `aria-live="polite"` on the root — the live region that announces new
+ * messages without interrupting whatever the user is doing. `log` is not
+ * `list`: an element carries exactly one role, so the projected
+ * `AtlChatMessage` `listitem`s get their required list parent from a second,
+ * nested element (`.messages-list`, `role="list"`) rather than from the log
+ * root itself. That wrapper is `display: contents` so it never affects the
+ * flex/gap layout of the messages — verified (Chromium, Firefox, WebKit): the
+ * gap between messages is unchanged, and Chromium's native accessibility tree
+ * shows `log "Conversation" > list "Messages" > listitem, listitem`.
  */
 export declare function AtlChatMessages({ children, className, ...rest }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"atl-chat.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/chat/atl-chat.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,cAAc,EAGd,SAAS,EACT,sBAAsB,EAOvB,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EACV,kBAAkB,EAClB,aAAa,EACb,cAAc,EACf,MAAM,SAAS,CAAC;AACjB,OAAO,gBAAgB,CAAC;AAiBxB;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,sBAAsB;IACtB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,oCAAoC;IACpC,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,0DAA0D;IAC1D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,8CAA8C;IAC9C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;GAKG;AACH,wBAAgB,OAAO,CAAC,EACtB,OAAkB,EAClB,MAAe,EACf,IAAY,EACZ,YAAY,EACZ,QAAQ,GACT,EAAE,YAAY,+BAuHd;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,cAAc,CAAC,+BAmBhC;AAED;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,cAAc,CAAC,+BAoBhC;AAED;;GAEG;AACH,MAAM,WAAW,mBAAoB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACzE,6BAA6B;IAC7B,IAAI,CAAC,EAAE,kBAAkB,CAAC;IAC1B,uDAAuD;IACvD,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,wBAAgB,cAAc,CAAC,EAC7B,IAAkB,EAClB,MAAc,EACd,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,mBAAmB,+BAcrB;AAED;;;;;;;;;GASG;AACH,MAAM,WAAW,kBAAmB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACxE,oEAAoE;IACpE,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,wBAAgB,aAAa,CAAC,EAC5B,MAAc,EACd,SAAS,EACT,GAAG,IAAI,EACR,EAAE,kBAAkB,+BAcpB;AAED;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC,uCAAuC;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,IAAI,EACJ,UAAU,EACV,SAAS,GACV,EAAE,sBAAsB,+BAexB;AAED;;;;;;GAMG;AACH,MAAM,WAAW,iBACf,SAAQ,IAAI,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EAAE,UAAU,CAAC;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,aAAa,EACb,MAAM,EACN,MAAM,EACN,WAAW,EACX,SAAuC,EACvC,GAAG,IAAI,EACR,EAAE,iBAAiB,+BAuEnB"}
+{"version":3,"file":"atl-chat.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/chat/atl-chat.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,cAAc,EAGd,SAAS,EACT,sBAAsB,EAOvB,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EACV,kBAAkB,EAClB,aAAa,EACb,cAAc,EACf,MAAM,SAAS,CAAC;AACjB,OAAO,gBAAgB,CAAC;AAiBxB;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,sBAAsB;IACtB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,oCAAoC;IACpC,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,0DAA0D;IAC1D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,8CAA8C;IAC9C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;GAKG;AACH,wBAAgB,OAAO,CAAC,EACtB,OAAkB,EAClB,MAAe,EACf,IAAY,EACZ,YAAY,EACZ,QAAQ,GACT,EAAE,YAAY,+BAuHd;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,cAAc,CAAC,+BAmBhC;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,cAAc,CAAC,+BAyBhC;AAED;;GAEG;AACH,MAAM,WAAW,mBAAoB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACzE,6BAA6B;IAC7B,IAAI,CAAC,EAAE,kBAAkB,CAAC;IAC1B,uDAAuD;IACvD,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,wBAAgB,cAAc,CAAC,EAC7B,IAAkB,EAClB,MAAc,EACd,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,mBAAmB,+BAcrB;AAED;;;;;;;;;GASG;AACH,MAAM,WAAW,kBAAmB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACxE,oEAAoE;IACpE,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,wBAAgB,aAAa,CAAC,EAC5B,MAAc,EACd,SAAS,EACT,GAAG,IAAI,EACR,EAAE,kBAAkB,+BAcpB;AAED;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC,uCAAuC;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,IAAI,EACJ,UAAU,EACV,SAAS,GACV,EAAE,sBAAsB,+BAexB;AAED;;;;;;GAMG;AACH,MAAM,WAAW,iBACf,SAAQ,IAAI,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EAAE,UAAU,CAAC;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,aAAa,EACb,MAAM,EACN,MAAM,EACN,WAAW,EACX,SAAuC,EACvC,GAAG,IAAI,EACR,EAAE,iBAAiB,+BAuEnB"}

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

@@ -101,6 +101,17 @@ export function AtlChatHeader({ children, className, ...rest }) {
  * `AtlChatSuggestion` children inside. Auto-scrolls to the bottom whenever
  * children are added or content changes — important for streaming responses
  * where new tokens are appended live.
+ *
+ * Renders `role="log"` (named, `aria-label="Conversation"`) with
+ * `aria-live="polite"` on the root — the live region that announces new
+ * messages without interrupting whatever the user is doing. `log` is not
+ * `list`: an element carries exactly one role, so the projected
+ * `AtlChatMessage` `listitem`s get their required list parent from a second,
+ * nested element (`.messages-list`, `role="list"`) rather than from the log
+ * root itself. That wrapper is `display: contents` so it never affects the
+ * flex/gap layout of the messages — verified (Chromium, Firefox, WebKit): the
+ * gap between messages is unchanged, and Chromium's native accessibility tree
+ * shows `log "Conversation" > list "Messages" > listitem, listitem`.
  */
 export function AtlChatMessages({ children, className, ...rest }) {
     const ref = useRef(null);
@@ -114,7 +125,7 @@ export function AtlChatMessages({ children, className, ...rest }) {
         observer.observe(el, { childList: true, subtree: true, characterData: true });
         return () => observer.disconnect();
     }, []);
-    return (_jsx("div", { ref: ref, className: ['atl-chat-messages', className].filter(Boolean).join(' '), ...rest, children: children }));
+    return (_jsx("div", { ref: ref, role: "log", "aria-live": "polite", "aria-label": "Conversation", className: ['atl-chat-messages', className].filter(Boolean).join(' '), ...rest, children: _jsx("div", { className: "messages-list", role: "list", "aria-label": "Messages", children: children }) }));
 }
 export function AtlChatMessage({ role = 'assistant', failed = false, children, className, ...rest }) {
     const classes = [

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

@@ -1 +1 @@
-{"version":3,"file":"atl-chat.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/chat/atl-chat.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  ChangeEvent,\n  HTMLAttributes,\n  KeyboardEvent,\n  MouseEvent,\n  ReactNode,\n  TextareaHTMLAttributes,\n  createContext,\n  useContext,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\nimport type {\n  AtlChatMessageRole,\n  AtlChatStatus,\n  AtlChatVariant,\n} from '../spec';\nimport './atl-chat.css';\nimport { AtlIcon } from '../icon/atl-icon';\n\ninterface ChatContextValue {\n  headerId: string;\n  status: AtlChatStatus;\n  close: () => void;\n  toggle: () => void;\n}\n\nconst ChatContext = createContext<ChatContextValue>({\n  headerId: '',\n  status: 'idle',\n  close: () => undefined,\n  toggle: () => undefined,\n});\n\n/**\n * Properties for the AtlChat component.\n */\nexport interface AtlChatProps {\n  /** Layout variant. */\n  variant?: AtlChatVariant;\n  /** Connection / response status. */\n  status?: AtlChatStatus;\n  /** Whether the chat is open (drawer / popup variants). */\n  open?: boolean;\n  /** Callback when open state should change. */\n  onOpenChange?: (open: boolean) => void;\n  children?: ReactNode;\n}\n\n/**\n * AI assistant surface. Three layout variants share the same content slots:\n * `drawer` (slide-in panel), `popup` (floating bubble + window), `inline`\n * (embedded card). Compose with `AtlChatHeader`, `AtlChatMessages`,\n * `AtlChatMessage`, `AtlChatTyping`, `AtlChatSuggestion`, `AtlChatInput`.\n */\nexport function AtlChat({\n  variant = 'drawer',\n  status = 'idle',\n  open = false,\n  onOpenChange,\n  children,\n}: AtlChatProps) {\n  const dialogRef = useRef<HTMLDialogElement>(null);\n  const headerId = useId();\n  const triggerElRef = useRef<Element | null>(null);\n\n  useEffect(() => {\n    if (variant !== 'drawer') return;\n    const dialog = dialogRef.current;\n    if (!dialog) return;\n    if (open) {\n      triggerElRef.current = document.activeElement;\n      if (!dialog.open) dialog.showModal();\n    } else {\n      if (dialog.open) dialog.close();\n      (triggerElRef.current as HTMLElement | null)?.focus();\n      triggerElRef.current = null;\n    }\n  }, [open, variant]);\n\n  // Auto-focus the input on open for drawer / popup. Inline keeps user focus.\n  const hostRef = useRef<HTMLDivElement>(null);\n  useEffect(() => {\n    if (!open) return;\n    if (variant === 'inline') return;\n    const host = hostRef.current;\n    if (!host) return;\n    requestAnimationFrame(() => {\n      host.querySelector<HTMLTextAreaElement>('textarea')?.focus();\n    });\n  }, [open, variant]);\n\n  useEffect(() => {\n    if (variant !== 'drawer') return;\n    const dialog = dialogRef.current;\n    if (!dialog) return;\n    const onClose = () => onOpenChange?.(false);\n    const onCancel = (e: Event) => {\n      e.preventDefault();\n      onOpenChange?.(false);\n    };\n    dialog.addEventListener('close', onClose);\n    dialog.addEventListener('cancel', onCancel);\n    return () => {\n      dialog.removeEventListener('close', onClose);\n      dialog.removeEventListener('cancel', onCancel);\n    };\n  }, [onOpenChange, variant]);\n\n  const handleBackdropClick = (e: MouseEvent<HTMLDialogElement>) => {\n    if (e.target === dialogRef.current) onOpenChange?.(false);\n  };\n\n  const hostClass = [\n    'atl-chat',\n    `variant-${variant}`,\n    `status-${status}`,\n    open && 'is-open',\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const ctx: ChatContextValue = {\n    headerId,\n    status,\n    close: () => onOpenChange?.(false),\n    toggle: () => onOpenChange?.(!open),\n  };\n\n  return (\n    <ChatContext.Provider value={ctx}>\n      <div ref={hostRef} className={hostClass}>\n        {variant === 'drawer' && (\n          <dialog\n            ref={dialogRef}\n            aria-labelledby={headerId}\n            aria-modal=\"true\"\n            onClick={handleBackdropClick}\n          >\n            <div\n              className=\"surface drawer-surface\"\n              onClick={(e) => e.stopPropagation()}\n            >\n              {children}\n            </div>\n          </dialog>\n        )}\n        {variant === 'popup' && (\n          <>\n            {open && (\n              <div\n                className=\"surface popup-surface\"\n                role=\"dialog\"\n                aria-labelledby={headerId}\n              >\n                {children}\n              </div>\n            )}\n            <button\n              type=\"button\"\n              className=\"fab-bubble\"\n              aria-label={open ? 'Close AI assistant' : 'Open AI assistant'}\n              aria-expanded={open}\n              onClick={() => onOpenChange?.(!open)}\n            >\n              <span aria-hidden=\"true\">AI</span>\n            </button>\n          </>\n        )}\n        {variant === 'inline' && (\n          <section\n            className=\"surface inline-surface\"\n            aria-labelledby={headerId}\n          >\n            {children}\n          </section>\n        )}\n      </div>\n    </ChatContext.Provider>\n  );\n}\n\n/**\n * Header slot for `AtlChat`. Holds the title block; the close button\n * is rendered automatically (hidden on the inline variant via CSS).\n */\nexport function AtlChatHeader({\n  children,\n  className,\n  ...rest\n}: HTMLAttributes<HTMLDivElement>) {\n  const ctx = useContext(ChatContext);\n  return (\n    <div\n      id={ctx.headerId}\n      className={['atl-chat-header', className].filter(Boolean).join(' ')}\n      {...rest}\n    >\n      <div className=\"title-block\">{children}</div>\n      <button\n        type=\"button\"\n        className=\"close-btn\"\n        aria-label=\"Close chat\"\n        onClick={ctx.close}\n      >\n        <AtlIcon name=\"close\" size=\"sm\" />\n      </button>\n    </div>\n  );\n}\n\n/**\n * Scrollable message list. Project `AtlChatMessage`, `AtlChatTyping`, or\n * `AtlChatSuggestion` children inside. Auto-scrolls to the bottom whenever\n * children are added or content changes — important for streaming responses\n * where new tokens are appended live.\n */\nexport function AtlChatMessages({\n  children,\n  className,\n  ...rest\n}: HTMLAttributes<HTMLDivElement>) {\n  const ref = useRef<HTMLDivElement>(null);\n  useEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n    const stickToBottom = () => { el.scrollTop = el.scrollHeight; };\n    stickToBottom();\n    const observer = new MutationObserver(stickToBottom);\n    observer.observe(el, { childList: true, subtree: true, characterData: true });\n    return () => observer.disconnect();\n  }, []);\n  return (\n    <div\n      ref={ref}\n      className={['atl-chat-messages', className].filter(Boolean).join(' ')}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n}\n\n/**\n * A single chat message. Role drives bubble alignment and color.\n */\nexport interface AtlChatMessageProps extends HTMLAttributes<HTMLDivElement> {\n  /** Sender of the message. */\n  role?: AtlChatMessageRole;\n  /** Marks the message as failed (red dashed border). */\n  failed?: boolean;\n}\n\nexport function AtlChatMessage({\n  role = 'assistant',\n  failed = false,\n  children,\n  className,\n  ...rest\n}: AtlChatMessageProps) {\n  const classes = [\n    'atl-chat-message',\n    `role-${role}`,\n    failed && 'is-failed',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n  return (\n    <div role=\"listitem\" className={classes} {...rest}>\n      {children}\n    </div>\n  );\n}\n\n/**\n * Typing indicator (three animated dots).\n *\n * Two display modes:\n * - **Standalone bubble** (default) — render at the end of the message\n *   list to show \"the assistant is starting to respond\".\n * - **Inline cursor** (`inline`) — render as the LAST child INSIDE the\n *   currently-streaming `AtlChatMessage` so the dots read as a typing\n *   caret at the end of the partial text.\n */\nexport interface AtlChatTypingProps extends HTMLAttributes<HTMLDivElement> {\n  /** When true, renders as an inline cursor without bubble chrome. */\n  inline?: boolean;\n}\n\nexport function AtlChatTyping({\n  inline = false,\n  className,\n  ...rest\n}: AtlChatTypingProps) {\n  const classes = [\n    'atl-chat-typing',\n    inline && 'is-inline',\n    className,\n  ].filter(Boolean).join(' ');\n  return (\n    <div role=\"status\" aria-live=\"polite\" className={classes} {...rest}>\n      <span className=\"dot\" />\n      <span className=\"dot\" />\n      <span className=\"dot\" />\n      <span className=\"sr-only\">Assistant is typing</span>\n    </div>\n  );\n}\n\n/**\n * Tappable suggestion chip used in the empty state to seed a conversation.\n */\nexport interface AtlChatSuggestionProps {\n  /** Primary label of the suggestion. */\n  label: string;\n  /** Optional secondary hint text. */\n  hint?: string;\n  /** Fires the label string when activated. */\n  onSelected?: (label: string) => void;\n  className?: string;\n}\n\nexport function AtlChatSuggestion({\n  label,\n  hint,\n  onSelected,\n  className,\n}: AtlChatSuggestionProps) {\n  return (\n    <div\n      className={['atl-chat-suggestion', className].filter(Boolean).join(' ')}\n    >\n      <button\n        type=\"button\"\n        className=\"chip\"\n        onClick={() => onSelected?.(label)}\n      >\n        <span className=\"chip-label\">{label}</span>\n        {hint && <span className=\"chip-hint\">{hint}</span>}\n      </button>\n    </div>\n  );\n}\n\n/**\n * Composable input footer for `AtlChat`. Wraps a textarea and emits\n * `onSend` (or `onStop` when the chat status is `'streaming'`).\n *\n * The action button automatically switches between primary \"Send\" and\n * danger \"Stop\" based on the parent chat's status.\n */\nexport interface AtlChatInputProps\n  extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange'> {\n  value?: string;\n  onValueChange?: (value: string) => void;\n  onSend?: (text: string) => void;\n  onStop?: () => void;\n  /** Accessible label for the input field. */\n  ariaLabel?: string;\n}\n\nexport function AtlChatInput({\n  value,\n  onValueChange,\n  onSend,\n  onStop,\n  placeholder,\n  ariaLabel = 'Message your AI assistant',\n  ...rest\n}: AtlChatInputProps) {\n  const ctx = useContext(ChatContext);\n  const isStreaming = ctx.status === 'streaming';\n  const [internal, setInternal] = useState('');\n  const isControlled = value !== undefined;\n  const current = isControlled ? value : internal;\n\n  const setCurrent = (next: string) => {\n    if (!isControlled) setInternal(next);\n    onValueChange?.(next);\n  };\n\n  const effectivePlaceholder =\n    placeholder ??\n    (isStreaming\n      ? 'Waiting for response…'\n      : ctx.status === 'error'\n        ? 'Try again…'\n        : 'Message your AI assistant…');\n\n  const emitSend = () => {\n    const text = current.trim();\n    if (!text || isStreaming) return;\n    onSend?.(text);\n    setCurrent('');\n  };\n\n  const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {\n    setCurrent(e.target.value);\n  };\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {\n    if (e.key === 'Enter' && !e.shiftKey) {\n      e.preventDefault();\n      emitSend();\n    }\n  };\n\n  return (\n    <div className=\"atl-chat-input\">\n      <textarea\n        className=\"field\"\n        rows={1}\n        value={current}\n        placeholder={effectivePlaceholder}\n        disabled={isStreaming}\n        aria-label={ariaLabel}\n        onChange={handleChange}\n        onKeyDown={handleKeyDown}\n        {...rest}\n      />\n      {isStreaming ? (\n        <button\n          type=\"button\"\n          className=\"action-btn variant-danger size-md\"\n          onClick={onStop}\n        >\n          Stop\n        </button>\n      ) : (\n        <button\n          type=\"button\"\n          className=\"action-btn variant-primary size-md\"\n          disabled={!current.trim()}\n          onClick={emitSend}\n        >\n          Send\n        </button>\n      )}\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"atl-chat.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/chat/atl-chat.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  ChangeEvent,\n  HTMLAttributes,\n  KeyboardEvent,\n  MouseEvent,\n  ReactNode,\n  TextareaHTMLAttributes,\n  createContext,\n  useContext,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\nimport type {\n  AtlChatMessageRole,\n  AtlChatStatus,\n  AtlChatVariant,\n} from '../spec';\nimport './atl-chat.css';\nimport { AtlIcon } from '../icon/atl-icon';\n\ninterface ChatContextValue {\n  headerId: string;\n  status: AtlChatStatus;\n  close: () => void;\n  toggle: () => void;\n}\n\nconst ChatContext = createContext<ChatContextValue>({\n  headerId: '',\n  status: 'idle',\n  close: () => undefined,\n  toggle: () => undefined,\n});\n\n/**\n * Properties for the AtlChat component.\n */\nexport interface AtlChatProps {\n  /** Layout variant. */\n  variant?: AtlChatVariant;\n  /** Connection / response status. */\n  status?: AtlChatStatus;\n  /** Whether the chat is open (drawer / popup variants). */\n  open?: boolean;\n  /** Callback when open state should change. */\n  onOpenChange?: (open: boolean) => void;\n  children?: ReactNode;\n}\n\n/**\n * AI assistant surface. Three layout variants share the same content slots:\n * `drawer` (slide-in panel), `popup` (floating bubble + window), `inline`\n * (embedded card). Compose with `AtlChatHeader`, `AtlChatMessages`,\n * `AtlChatMessage`, `AtlChatTyping`, `AtlChatSuggestion`, `AtlChatInput`.\n */\nexport function AtlChat({\n  variant = 'drawer',\n  status = 'idle',\n  open = false,\n  onOpenChange,\n  children,\n}: AtlChatProps) {\n  const dialogRef = useRef<HTMLDialogElement>(null);\n  const headerId = useId();\n  const triggerElRef = useRef<Element | null>(null);\n\n  useEffect(() => {\n    if (variant !== 'drawer') return;\n    const dialog = dialogRef.current;\n    if (!dialog) return;\n    if (open) {\n      triggerElRef.current = document.activeElement;\n      if (!dialog.open) dialog.showModal();\n    } else {\n      if (dialog.open) dialog.close();\n      (triggerElRef.current as HTMLElement | null)?.focus();\n      triggerElRef.current = null;\n    }\n  }, [open, variant]);\n\n  // Auto-focus the input on open for drawer / popup. Inline keeps user focus.\n  const hostRef = useRef<HTMLDivElement>(null);\n  useEffect(() => {\n    if (!open) return;\n    if (variant === 'inline') return;\n    const host = hostRef.current;\n    if (!host) return;\n    requestAnimationFrame(() => {\n      host.querySelector<HTMLTextAreaElement>('textarea')?.focus();\n    });\n  }, [open, variant]);\n\n  useEffect(() => {\n    if (variant !== 'drawer') return;\n    const dialog = dialogRef.current;\n    if (!dialog) return;\n    const onClose = () => onOpenChange?.(false);\n    const onCancel = (e: Event) => {\n      e.preventDefault();\n      onOpenChange?.(false);\n    };\n    dialog.addEventListener('close', onClose);\n    dialog.addEventListener('cancel', onCancel);\n    return () => {\n      dialog.removeEventListener('close', onClose);\n      dialog.removeEventListener('cancel', onCancel);\n    };\n  }, [onOpenChange, variant]);\n\n  const handleBackdropClick = (e: MouseEvent<HTMLDialogElement>) => {\n    if (e.target === dialogRef.current) onOpenChange?.(false);\n  };\n\n  const hostClass = [\n    'atl-chat',\n    `variant-${variant}`,\n    `status-${status}`,\n    open && 'is-open',\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const ctx: ChatContextValue = {\n    headerId,\n    status,\n    close: () => onOpenChange?.(false),\n    toggle: () => onOpenChange?.(!open),\n  };\n\n  return (\n    <ChatContext.Provider value={ctx}>\n      <div ref={hostRef} className={hostClass}>\n        {variant === 'drawer' && (\n          <dialog\n            ref={dialogRef}\n            aria-labelledby={headerId}\n            aria-modal=\"true\"\n            onClick={handleBackdropClick}\n          >\n            <div\n              className=\"surface drawer-surface\"\n              onClick={(e) => e.stopPropagation()}\n            >\n              {children}\n            </div>\n          </dialog>\n        )}\n        {variant === 'popup' && (\n          <>\n            {open && (\n              <div\n                className=\"surface popup-surface\"\n                role=\"dialog\"\n                aria-labelledby={headerId}\n              >\n                {children}\n              </div>\n            )}\n            <button\n              type=\"button\"\n              className=\"fab-bubble\"\n              aria-label={open ? 'Close AI assistant' : 'Open AI assistant'}\n              aria-expanded={open}\n              onClick={() => onOpenChange?.(!open)}\n            >\n              <span aria-hidden=\"true\">AI</span>\n            </button>\n          </>\n        )}\n        {variant === 'inline' && (\n          <section\n            className=\"surface inline-surface\"\n            aria-labelledby={headerId}\n          >\n            {children}\n          </section>\n        )}\n      </div>\n    </ChatContext.Provider>\n  );\n}\n\n/**\n * Header slot for `AtlChat`. Holds the title block; the close button\n * is rendered automatically (hidden on the inline variant via CSS).\n */\nexport function AtlChatHeader({\n  children,\n  className,\n  ...rest\n}: HTMLAttributes<HTMLDivElement>) {\n  const ctx = useContext(ChatContext);\n  return (\n    <div\n      id={ctx.headerId}\n      className={['atl-chat-header', className].filter(Boolean).join(' ')}\n      {...rest}\n    >\n      <div className=\"title-block\">{children}</div>\n      <button\n        type=\"button\"\n        className=\"close-btn\"\n        aria-label=\"Close chat\"\n        onClick={ctx.close}\n      >\n        <AtlIcon name=\"close\" size=\"sm\" />\n      </button>\n    </div>\n  );\n}\n\n/**\n * Scrollable message list. Project `AtlChatMessage`, `AtlChatTyping`, or\n * `AtlChatSuggestion` children inside. Auto-scrolls to the bottom whenever\n * children are added or content changes — important for streaming responses\n * where new tokens are appended live.\n *\n * Renders `role=\"log\"` (named, `aria-label=\"Conversation\"`) with\n * `aria-live=\"polite\"` on the root — the live region that announces new\n * messages without interrupting whatever the user is doing. `log` is not\n * `list`: an element carries exactly one role, so the projected\n * `AtlChatMessage` `listitem`s get their required list parent from a second,\n * nested element (`.messages-list`, `role=\"list\"`) rather than from the log\n * root itself. That wrapper is `display: contents` so it never affects the\n * flex/gap layout of the messages — verified (Chromium, Firefox, WebKit): the\n * gap between messages is unchanged, and Chromium's native accessibility tree\n * shows `log \"Conversation\" > list \"Messages\" > listitem, listitem`.\n */\nexport function AtlChatMessages({\n  children,\n  className,\n  ...rest\n}: HTMLAttributes<HTMLDivElement>) {\n  const ref = useRef<HTMLDivElement>(null);\n  useEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n    const stickToBottom = () => { el.scrollTop = el.scrollHeight; };\n    stickToBottom();\n    const observer = new MutationObserver(stickToBottom);\n    observer.observe(el, { childList: true, subtree: true, characterData: true });\n    return () => observer.disconnect();\n  }, []);\n  return (\n    <div\n      ref={ref}\n      role=\"log\"\n      aria-live=\"polite\"\n      aria-label=\"Conversation\"\n      className={['atl-chat-messages', className].filter(Boolean).join(' ')}\n      {...rest}\n    >\n      <div className=\"messages-list\" role=\"list\" aria-label=\"Messages\">\n        {children}\n      </div>\n    </div>\n  );\n}\n\n/**\n * A single chat message. Role drives bubble alignment and color.\n */\nexport interface AtlChatMessageProps extends HTMLAttributes<HTMLDivElement> {\n  /** Sender of the message. */\n  role?: AtlChatMessageRole;\n  /** Marks the message as failed (red dashed border). */\n  failed?: boolean;\n}\n\nexport function AtlChatMessage({\n  role = 'assistant',\n  failed = false,\n  children,\n  className,\n  ...rest\n}: AtlChatMessageProps) {\n  const classes = [\n    'atl-chat-message',\n    `role-${role}`,\n    failed && 'is-failed',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n  return (\n    <div role=\"listitem\" className={classes} {...rest}>\n      {children}\n    </div>\n  );\n}\n\n/**\n * Typing indicator (three animated dots).\n *\n * Two display modes:\n * - **Standalone bubble** (default) — render at the end of the message\n *   list to show \"the assistant is starting to respond\".\n * - **Inline cursor** (`inline`) — render as the LAST child INSIDE the\n *   currently-streaming `AtlChatMessage` so the dots read as a typing\n *   caret at the end of the partial text.\n */\nexport interface AtlChatTypingProps extends HTMLAttributes<HTMLDivElement> {\n  /** When true, renders as an inline cursor without bubble chrome. */\n  inline?: boolean;\n}\n\nexport function AtlChatTyping({\n  inline = false,\n  className,\n  ...rest\n}: AtlChatTypingProps) {\n  const classes = [\n    'atl-chat-typing',\n    inline && 'is-inline',\n    className,\n  ].filter(Boolean).join(' ');\n  return (\n    <div role=\"status\" aria-live=\"polite\" className={classes} {...rest}>\n      <span className=\"dot\" />\n      <span className=\"dot\" />\n      <span className=\"dot\" />\n      <span className=\"sr-only\">Assistant is typing</span>\n    </div>\n  );\n}\n\n/**\n * Tappable suggestion chip used in the empty state to seed a conversation.\n */\nexport interface AtlChatSuggestionProps {\n  /** Primary label of the suggestion. */\n  label: string;\n  /** Optional secondary hint text. */\n  hint?: string;\n  /** Fires the label string when activated. */\n  onSelected?: (label: string) => void;\n  className?: string;\n}\n\nexport function AtlChatSuggestion({\n  label,\n  hint,\n  onSelected,\n  className,\n}: AtlChatSuggestionProps) {\n  return (\n    <div\n      className={['atl-chat-suggestion', className].filter(Boolean).join(' ')}\n    >\n      <button\n        type=\"button\"\n        className=\"chip\"\n        onClick={() => onSelected?.(label)}\n      >\n        <span className=\"chip-label\">{label}</span>\n        {hint && <span className=\"chip-hint\">{hint}</span>}\n      </button>\n    </div>\n  );\n}\n\n/**\n * Composable input footer for `AtlChat`. Wraps a textarea and emits\n * `onSend` (or `onStop` when the chat status is `'streaming'`).\n *\n * The action button automatically switches between primary \"Send\" and\n * danger \"Stop\" based on the parent chat's status.\n */\nexport interface AtlChatInputProps\n  extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange'> {\n  value?: string;\n  onValueChange?: (value: string) => void;\n  onSend?: (text: string) => void;\n  onStop?: () => void;\n  /** Accessible label for the input field. */\n  ariaLabel?: string;\n}\n\nexport function AtlChatInput({\n  value,\n  onValueChange,\n  onSend,\n  onStop,\n  placeholder,\n  ariaLabel = 'Message your AI assistant',\n  ...rest\n}: AtlChatInputProps) {\n  const ctx = useContext(ChatContext);\n  const isStreaming = ctx.status === 'streaming';\n  const [internal, setInternal] = useState('');\n  const isControlled = value !== undefined;\n  const current = isControlled ? value : internal;\n\n  const setCurrent = (next: string) => {\n    if (!isControlled) setInternal(next);\n    onValueChange?.(next);\n  };\n\n  const effectivePlaceholder =\n    placeholder ??\n    (isStreaming\n      ? 'Waiting for response…'\n      : ctx.status === 'error'\n        ? 'Try again…'\n        : 'Message your AI assistant…');\n\n  const emitSend = () => {\n    const text = current.trim();\n    if (!text || isStreaming) return;\n    onSend?.(text);\n    setCurrent('');\n  };\n\n  const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {\n    setCurrent(e.target.value);\n  };\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {\n    if (e.key === 'Enter' && !e.shiftKey) {\n      e.preventDefault();\n      emitSend();\n    }\n  };\n\n  return (\n    <div className=\"atl-chat-input\">\n      <textarea\n        className=\"field\"\n        rows={1}\n        value={current}\n        placeholder={effectivePlaceholder}\n        disabled={isStreaming}\n        aria-label={ariaLabel}\n        onChange={handleChange}\n        onKeyDown={handleKeyDown}\n        {...rest}\n      />\n      {isStreaming ? (\n        <button\n          type=\"button\"\n          className=\"action-btn variant-danger size-md\"\n          onClick={onStop}\n        >\n          Stop\n        </button>\n      ) : (\n        <button\n          type=\"button\"\n          className=\"action-btn variant-primary size-md\"\n          disabled={!current.trim()}\n          onClick={emitSend}\n        >\n          Send\n        </button>\n      )}\n    </div>\n  );\n}\n"]}

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

@@ -27,6 +27,9 @@
 .stepper-header {
   display: flex;
   align-items: center;
+  list-style: none;
+  margin: 0;
+  padding: 0;
 }
 
 /* ─── Step item ─── */
@@ -116,7 +119,7 @@
   margin-top: var(--ui-spacing-6);
 }
 
-.stepper-content [role="tabpanel"][hidden] {
+.stepper-content .step-panel[hidden] {
   display: none;
 }
 

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

@@ -1 +1 @@
-{"version":3,"file":"atl-stepper.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/stepper/atl-stepper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,SAAS,EACT,cAAc,EAKf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAC3D,OAAO,mBAAmB,CAAC;AAG3B,UAAU,QAAQ;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,UAAU,mBAAmB;IAC3B,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;IAChB,IAAI,IAAI,IAAI,CAAC;IACb,IAAI,IAAI,IAAI,CAAC;IACb,IAAI,CAAC,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB;AAYD,0DAA0D;AAC1D,wBAAgB,aAAa,wBAE5B;AAED,MAAM,WAAW,eACf,SAAQ,cAAc,CAAC,cAAc,CAAC,EACpC,cAAc;IAChB,mCAAmC;IACnC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,6CAA6C;IAC7C,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,0BAA0B;IAC1B,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,sEAAsE;IACtE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,wBAAgB,UAAU,CAAC,EACzB,UAAU,EAAE,YAAY,EACxB,kBAAkB,EAClB,WAA0B,EAC1B,MAAc,EACd,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,eAAe,+BAkJjB;AAED,MAAM,WAAW,YAAa,SAAQ,WAAW;IAC/C,sDAAsD;IACtD,KAAK,EAAE,MAAM,CAAC;IACd,yBAAyB;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iCAAiC;IACjC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,wBAAwB;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,wBAAgB,OAAO,CAAC,EAAE,QAAQ,EAAE,EAAE,YAAY,aAEjD;yBAFe,OAAO"}
+{"version":3,"file":"atl-stepper.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/stepper/atl-stepper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,SAAS,EACT,cAAc,EAKf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAC3D,OAAO,mBAAmB,CAAC;AAG3B,UAAU,QAAQ;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,UAAU,mBAAmB;IAC3B,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;IAChB,IAAI,IAAI,IAAI,CAAC;IACb,IAAI,IAAI,IAAI,CAAC;IACb,IAAI,CAAC,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB;AAYD,0DAA0D;AAC1D,wBAAgB,aAAa,wBAE5B;AAED,MAAM,WAAW,eACf,SAAQ,cAAc,CAAC,cAAc,CAAC,EACpC,cAAc;IAChB,mCAAmC;IACnC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,6CAA6C;IAC7C,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,0BAA0B;IAC1B,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,sEAAsE;IACtE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,wBAAgB,UAAU,CAAC,EACzB,UAAU,EAAE,YAAY,EACxB,kBAAkB,EAClB,WAA0B,EAC1B,MAAc,EACd,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,eAAe,+BAwJjB;AAED,MAAM,WAAW,YAAa,SAAQ,WAAW;IAC/C,sDAAsD;IACtD,KAAK,EAAE,MAAM,CAAC;IACd,yBAAyB;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iCAAiC;IACjC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,wBAAwB;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,wBAAgB,OAAO,CAAC,EAAE,QAAQ,EAAE,EAAE,YAAY,aAEjD;yBAFe,OAAO"}

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

@@ -41,16 +41,27 @@ export function AtlStepper({ activeStep: externalStep, onActiveStepChange, orien
     }), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [children]);
+    // Whether step `i` can be activated right now: not itself disabled, and — in
+    // linear mode — either at/behind the active step, or ahead of it with every
+    // step before it completed or optional. Drives both goTo()'s guard and the
+    // header button's native `disabled` state, so an unreachable step is also
+    // not focusable — no roving-tabindex bookkeeping needed, since the header is
+    // a list, not a tab widget.
+    const isReachable = (i) => {
+        const step = steps[i];
+        if (!step || step.disabled)
+            return false;
+        if (!linear)
+            return true;
+        if (i <= activeStep)
+            return true;
+        return steps.slice(0, i).every((s) => s.completed || s.optional);
+    };
     const goTo = (i) => {
         if (i < 0 || i >= steps.length)
             return;
-        if (steps[i]?.disabled)
+        if (!isReachable(i))
             return;
-        if (linear && i > activeStep) {
-            const canAdvance = steps.slice(0, i).every((s) => s.completed || s.optional);
-            if (!canAdvance)
-                return;
-        }
         setStep(i);
     };
     const next = () => goTo(activeStep + 1);
@@ -68,7 +79,7 @@ export function AtlStepper({ activeStep: externalStep, onActiveStepChange, orien
         .join(' ');
     const stepPanels = childArray.filter((c) => isValidElement(c) &&
         c.type.displayName === 'AtlStep');
-    return (_jsx(StepperContext.Provider, { value: { activeStep, setActiveStep: setStep, steps, linear, next, prev, goTo }, children: _jsxs("div", { className: classes, ...rest, children: [_jsx("div", { className: "stepper-header", role: "tablist", children: steps.map((step, i) => {
+    return (_jsx(StepperContext.Provider, { value: { activeStep, setActiveStep: setStep, steps, linear, next, prev, goTo }, children: _jsxs("div", { className: classes, ...rest, children: [_jsx("ol", { className: "stepper-header", role: "list", "aria-label": "Progress", children: steps.map((step, i) => {
                         const isActive = activeStep === i;
                         const isCompleted = step.completed && !isActive;
                         const itemClass = [
@@ -80,12 +91,12 @@ export function AtlStepper({ activeStep: externalStep, onActiveStepChange, orien
                         ]
                             .filter(Boolean)
                             .join(' ');
-                        return (_jsxs(Fragment, { children: [_jsxs("div", { className: itemClass, children: [_jsx("button", { type: "button", role: "tab", id: `atl-step-${i}`, className: "step-circle", "aria-label": step.label, "aria-selected": isActive, "aria-controls": `atl-step-panel-${i}`, "aria-disabled": step.disabled || undefined, tabIndex: isActive ? 0 : -1, disabled: step.disabled, onClick: () => goTo(i), children: step.completed && !step.error ? (_jsx(AtlIcon, { name: "check", size: "sm" })) : step.error ? (_jsx(AtlIcon, { name: "close", size: "sm" })) : (i + 1) }), _jsxs("div", { className: "step-text", children: [_jsx("span", { className: "step-label", children: step.label }), step.description && (_jsx("span", { className: "step-description", children: step.description })), step.optional && !step.completed && (_jsx("span", { className: "step-optional", children: "Optional" }))] })] }), i < steps.length - 1 && (_jsx("div", { className: ['step-connector', (activeStep > i || step.completed) && 'is-active']
+                        return (_jsxs(Fragment, { children: [_jsxs("li", { className: itemClass, children: [_jsx("button", { type: "button", id: `atl-step-${i}`, className: "step-circle", "aria-label": step.label, "aria-current": isActive ? 'step' : undefined, disabled: !isReachable(i), onClick: () => goTo(i), children: step.completed && !step.error ? (_jsx(AtlIcon, { name: "check", size: "sm" })) : step.error ? (_jsx(AtlIcon, { name: "close", size: "sm" })) : (i + 1) }), _jsxs("div", { className: "step-text", children: [_jsx("span", { className: "step-label", children: step.label }), step.description && (_jsx("span", { className: "step-description", children: step.description })), step.optional && !step.completed && (_jsx("span", { className: "step-optional", children: "Optional" }))] })] }), i < steps.length - 1 && (_jsx("li", { "aria-hidden": "true", className: ['step-connector', (activeStep > i || step.completed) && 'is-active']
                                         .filter(Boolean)
                                         .join(' ') }))] }, i));
                     }) }), _jsx("div", { className: "stepper-content", children: stepPanels.map((panel, i) => {
                         const element = panel;
-                        return (_jsx("div", { id: `atl-step-panel-${i}`, role: "tabpanel", "aria-labelledby": `atl-step-${i}`, tabIndex: 0, hidden: i !== activeStep, children: element.props.children }, i));
+                        return (_jsx("div", { role: "region", className: "step-panel", "aria-labelledby": `atl-step-${i}`, hidden: i !== activeStep, children: element.props.children }, i));
                     }) })] }) }));
 }
 export function AtlStep({ children }) {

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

@@ -1 +1 @@
-{"version":3,"file":"atl-stepper.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/stepper/atl-stepper.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Fragment,\n  createContext,\n  useContext,\n  useState,\n  ReactNode,\n  HTMLAttributes,\n  Children,\n  isValidElement,\n  useMemo,\n  ReactElement,\n} from 'react';\nimport type { AtlStepperSpec, AtlStepSpec } from '../spec';\nimport './atl-stepper.css';\nimport { AtlIcon } from '../icon/atl-icon';\n\ninterface StepInfo {\n  label: string;\n  description?: string;\n  completed: boolean;\n  error: boolean;\n  optional: boolean;\n  disabled: boolean;\n}\n\ninterface StepperContextValue {\n  activeStep: number;\n  setActiveStep: (i: number) => void;\n  steps: StepInfo[];\n  linear: boolean;\n  next(): void;\n  prev(): void;\n  goTo(i: number): void;\n}\n\nconst StepperContext = createContext<StepperContextValue>({\n  activeStep: 0,\n  setActiveStep: () => undefined,\n  steps: [],\n  linear: false,\n  next: () => undefined,\n  prev: () => undefined,\n  goTo: () => undefined,\n});\n\n/** Access stepper navigation from within step content. */\nexport function useAtlStepper() {\n  return useContext(StepperContext);\n}\n\nexport interface AtlStepperProps\n  extends HTMLAttributes<HTMLDivElement>,\n    AtlStepperSpec {\n  /** Currently active step index. */\n  activeStep?: number;\n  /** Callback when the active step changes. */\n  onActiveStepChange?: (index: number) => void;\n  /** Layout orientation. */\n  orientation?: 'horizontal' | 'vertical';\n  /** Restrict forward navigation until previous steps are completed. */\n  linear?: boolean;\n  children?: ReactNode;\n}\n\nexport function AtlStepper({\n  activeStep: externalStep,\n  onActiveStepChange,\n  orientation = 'horizontal',\n  linear = false,\n  children,\n  className,\n  ...rest\n}: AtlStepperProps) {\n  const [internalStep, setInternalStep] = useState(externalStep ?? 0);\n  const isControlled = externalStep !== undefined;\n  const activeStep = isControlled ? externalStep : internalStep;\n\n  const setStep = (i: number) => {\n    if (!isControlled) setInternalStep(i);\n    onActiveStepChange?.(i);\n  };\n\n  const childArray = Children.toArray(children);\n  const steps: StepInfo[] = useMemo(\n    () =>\n      childArray\n        .filter(\n          (c) =>\n            isValidElement(c) &&\n            (c.type as { displayName?: string }).displayName === 'AtlStep'\n        )\n        .map((c) => {\n          const element = c as ReactElement<AtlStepProps>;\n          return {\n            label: element.props.label ?? '',\n            description: element.props.description,\n            completed: element.props.completed ?? false,\n            error: element.props.error ?? false,\n            optional: element.props.optional ?? false,\n            disabled: element.props.disabled ?? false,\n          };\n        }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [children]\n  );\n\n  const goTo = (i: number) => {\n    if (i < 0 || i >= steps.length) return;\n    if (steps[i]?.disabled) return;\n    if (linear && i > activeStep) {\n      const canAdvance = steps.slice(0, i).every((s) => s.completed || s.optional);\n      if (!canAdvance) return;\n    }\n    setStep(i);\n  };\n\n  const next = () => goTo(activeStep + 1);\n  const prev = () => {\n    const p = activeStep - 1;\n    if (p >= 0 && !steps[p]?.disabled) setStep(p);\n  };\n\n  const classes = [\n    'atl-stepper',\n    `orientation-${orientation}`,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const stepPanels = childArray.filter(\n    (c) =>\n      isValidElement(c) &&\n      (c.type as { displayName?: string }).displayName === 'AtlStep'\n  );\n\n  return (\n    <StepperContext.Provider value={{ activeStep, setActiveStep: setStep, steps, linear, next, prev, goTo }}>\n      <div className={classes} {...rest}>\n        <div className=\"stepper-header\" role=\"tablist\">\n          {steps.map((step, i) => {\n            const isActive = activeStep === i;\n            const isCompleted = step.completed && !isActive;\n            const itemClass = [\n              'step-item',\n              isActive && 'is-active',\n              isCompleted && 'is-completed',\n              step.error && 'is-error',\n              step.disabled && 'is-disabled',\n            ]\n              .filter(Boolean)\n              .join(' ');\n\n            return (\n              <Fragment key={i}>\n                <div className={itemClass}>\n                  <button\n                    type=\"button\"\n                    role=\"tab\"\n                    id={`atl-step-${i}`}\n                    className=\"step-circle\"\n                    aria-label={step.label}\n                    aria-selected={isActive}\n                    aria-controls={`atl-step-panel-${i}`}\n                    aria-disabled={step.disabled || undefined}\n                    tabIndex={isActive ? 0 : -1}\n                    disabled={step.disabled}\n                    onClick={() => goTo(i)}\n                  >\n                    {step.completed && !step.error ? (\n                      <AtlIcon name=\"check\" size=\"sm\" />\n                    ) : step.error ? (\n                      <AtlIcon name=\"close\" size=\"sm\" />\n                    ) : (\n                      i + 1\n                    )}\n                  </button>\n                  <div className=\"step-text\">\n                    <span className=\"step-label\">{step.label}</span>\n                    {step.description && (\n                      <span className=\"step-description\">{step.description}</span>\n                    )}\n                    {step.optional && !step.completed && (\n                      <span className=\"step-optional\">Optional</span>\n                    )}\n                  </div>\n                </div>\n                {i < steps.length - 1 && (\n                  <div\n                    className={['step-connector', (activeStep > i || step.completed) && 'is-active']\n                      .filter(Boolean)\n                      .join(' ')}\n                  />\n                )}\n              </Fragment>\n            );\n          })}\n        </div>\n        <div className=\"stepper-content\">\n          {stepPanels.map((panel, i) => {\n            const element = panel as ReactElement<AtlStepProps>;\n            return (\n              <div\n                key={i}\n                id={`atl-step-panel-${i}`}\n                role=\"tabpanel\"\n                aria-labelledby={`atl-step-${i}`}\n                tabIndex={0}\n                hidden={i !== activeStep}\n              >\n                {element.props.children}\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    </StepperContext.Provider>\n  );\n}\n\nexport interface AtlStepProps extends AtlStepSpec {\n  /** Text displayed on the step indicator. Required. */\n  label: string;\n  /** Optional subtitle. */\n  description?: string;\n  /** Mark as completed (shows checkmark). */\n  completed?: boolean;\n  /** Mark as errored (shows X). */\n  error?: boolean;\n  /** Mark as optional. */\n  optional?: boolean;\n  /** Whether the step is disabled. */\n  disabled?: boolean;\n  children?: ReactNode;\n}\n\nexport function AtlStep({ children }: AtlStepProps) {\n  return children;\n}\nAtlStep.displayName = 'AtlStep';\n"]}
+{"version":3,"file":"atl-stepper.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/stepper/atl-stepper.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Fragment,\n  createContext,\n  useContext,\n  useState,\n  ReactNode,\n  HTMLAttributes,\n  Children,\n  isValidElement,\n  useMemo,\n  ReactElement,\n} from 'react';\nimport type { AtlStepperSpec, AtlStepSpec } from '../spec';\nimport './atl-stepper.css';\nimport { AtlIcon } from '../icon/atl-icon';\n\ninterface StepInfo {\n  label: string;\n  description?: string;\n  completed: boolean;\n  error: boolean;\n  optional: boolean;\n  disabled: boolean;\n}\n\ninterface StepperContextValue {\n  activeStep: number;\n  setActiveStep: (i: number) => void;\n  steps: StepInfo[];\n  linear: boolean;\n  next(): void;\n  prev(): void;\n  goTo(i: number): void;\n}\n\nconst StepperContext = createContext<StepperContextValue>({\n  activeStep: 0,\n  setActiveStep: () => undefined,\n  steps: [],\n  linear: false,\n  next: () => undefined,\n  prev: () => undefined,\n  goTo: () => undefined,\n});\n\n/** Access stepper navigation from within step content. */\nexport function useAtlStepper() {\n  return useContext(StepperContext);\n}\n\nexport interface AtlStepperProps\n  extends HTMLAttributes<HTMLDivElement>,\n    AtlStepperSpec {\n  /** Currently active step index. */\n  activeStep?: number;\n  /** Callback when the active step changes. */\n  onActiveStepChange?: (index: number) => void;\n  /** Layout orientation. */\n  orientation?: 'horizontal' | 'vertical';\n  /** Restrict forward navigation until previous steps are completed. */\n  linear?: boolean;\n  children?: ReactNode;\n}\n\nexport function AtlStepper({\n  activeStep: externalStep,\n  onActiveStepChange,\n  orientation = 'horizontal',\n  linear = false,\n  children,\n  className,\n  ...rest\n}: AtlStepperProps) {\n  const [internalStep, setInternalStep] = useState(externalStep ?? 0);\n  const isControlled = externalStep !== undefined;\n  const activeStep = isControlled ? externalStep : internalStep;\n\n  const setStep = (i: number) => {\n    if (!isControlled) setInternalStep(i);\n    onActiveStepChange?.(i);\n  };\n\n  const childArray = Children.toArray(children);\n  const steps: StepInfo[] = useMemo(\n    () =>\n      childArray\n        .filter(\n          (c) =>\n            isValidElement(c) &&\n            (c.type as { displayName?: string }).displayName === 'AtlStep'\n        )\n        .map((c) => {\n          const element = c as ReactElement<AtlStepProps>;\n          return {\n            label: element.props.label ?? '',\n            description: element.props.description,\n            completed: element.props.completed ?? false,\n            error: element.props.error ?? false,\n            optional: element.props.optional ?? false,\n            disabled: element.props.disabled ?? false,\n          };\n        }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [children]\n  );\n\n  // Whether step `i` can be activated right now: not itself disabled, and — in\n  // linear mode — either at/behind the active step, or ahead of it with every\n  // step before it completed or optional. Drives both goTo()'s guard and the\n  // header button's native `disabled` state, so an unreachable step is also\n  // not focusable — no roving-tabindex bookkeeping needed, since the header is\n  // a list, not a tab widget.\n  const isReachable = (i: number) => {\n    const step = steps[i];\n    if (!step || step.disabled) return false;\n    if (!linear) return true;\n    if (i <= activeStep) return true;\n    return steps.slice(0, i).every((s) => s.completed || s.optional);\n  };\n\n  const goTo = (i: number) => {\n    if (i < 0 || i >= steps.length) return;\n    if (!isReachable(i)) return;\n    setStep(i);\n  };\n\n  const next = () => goTo(activeStep + 1);\n  const prev = () => {\n    const p = activeStep - 1;\n    if (p >= 0 && !steps[p]?.disabled) setStep(p);\n  };\n\n  const classes = [\n    'atl-stepper',\n    `orientation-${orientation}`,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const stepPanels = childArray.filter(\n    (c) =>\n      isValidElement(c) &&\n      (c.type as { displayName?: string }).displayName === 'AtlStep'\n  );\n\n  return (\n    <StepperContext.Provider value={{ activeStep, setActiveStep: setStep, steps, linear, next, prev, goTo }}>\n      <div className={classes} {...rest}>\n        <ol className=\"stepper-header\" role=\"list\" aria-label=\"Progress\">\n          {steps.map((step, i) => {\n            const isActive = activeStep === i;\n            const isCompleted = step.completed && !isActive;\n            const itemClass = [\n              'step-item',\n              isActive && 'is-active',\n              isCompleted && 'is-completed',\n              step.error && 'is-error',\n              step.disabled && 'is-disabled',\n            ]\n              .filter(Boolean)\n              .join(' ');\n\n            return (\n              <Fragment key={i}>\n                <li className={itemClass}>\n                  <button\n                    type=\"button\"\n                    id={`atl-step-${i}`}\n                    className=\"step-circle\"\n                    aria-label={step.label}\n                    aria-current={isActive ? 'step' : undefined}\n                    disabled={!isReachable(i)}\n                    onClick={() => goTo(i)}\n                  >\n                    {step.completed && !step.error ? (\n                      <AtlIcon name=\"check\" size=\"sm\" />\n                    ) : step.error ? (\n                      <AtlIcon name=\"close\" size=\"sm\" />\n                    ) : (\n                      i + 1\n                    )}\n                  </button>\n                  <div className=\"step-text\">\n                    <span className=\"step-label\">{step.label}</span>\n                    {step.description && (\n                      <span className=\"step-description\">{step.description}</span>\n                    )}\n                    {step.optional && !step.completed && (\n                      <span className=\"step-optional\">Optional</span>\n                    )}\n                  </div>\n                </li>\n                {i < steps.length - 1 && (\n                  <li\n                    aria-hidden=\"true\"\n                    className={['step-connector', (activeStep > i || step.completed) && 'is-active']\n                      .filter(Boolean)\n                      .join(' ')}\n                  />\n                )}\n              </Fragment>\n            );\n          })}\n        </ol>\n        <div className=\"stepper-content\">\n          {stepPanels.map((panel, i) => {\n            const element = panel as ReactElement<AtlStepProps>;\n            return (\n              <div\n                key={i}\n                role=\"region\"\n                className=\"step-panel\"\n                aria-labelledby={`atl-step-${i}`}\n                hidden={i !== activeStep}\n              >\n                {element.props.children}\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    </StepperContext.Provider>\n  );\n}\n\nexport interface AtlStepProps extends AtlStepSpec {\n  /** Text displayed on the step indicator. Required. */\n  label: string;\n  /** Optional subtitle. */\n  description?: string;\n  /** Mark as completed (shows checkmark). */\n  completed?: boolean;\n  /** Mark as errored (shows X). */\n  error?: boolean;\n  /** Mark as optional. */\n  optional?: boolean;\n  /** Whether the step is disabled. */\n  disabled?: boolean;\n  children?: ReactNode;\n}\n\nexport function AtlStep({ children }: AtlStepProps) {\n  return children;\n}\nAtlStep.displayName = 'AtlStep';\n"]}