@atelier-ui/react 0.2.13 → 0.2.15

package/CHANGELOG.md

@@ -1,3 +1,32 @@
+## 0.2.15 (2026-08-26)
+
+### 🚀 Features
+
+- **tokens:** bind the literals that duplicate a token ([024faef](https://github.com/DominikPieper/atelier-ui/commit/024faef))
+- **icons:** one concept, one drawing ([67784ec](https://github.com/DominikPieper/atelier-ui/commit/67784ec))
+- **gates:** ship the geometry contract with every component ([6b706ce](https://github.com/DominikPieper/atelier-ui/commit/6b706ce))
+
+### 🩹 Fixes
+
+- **geometry:** a stated height cannot be content-driven ([44dc31e](https://github.com/DominikPieper/atelier-ui/commit/44dc31e))
+- **spec:** readonly lives only where it is enforced ([a1f6159](https://github.com/DominikPieper/atelier-ui/commit/a1f6159))
+
+### ❤️ Thank You
+
+- Claude Opus 5
+- Dominik Pieper @DominikPieper
+
+## 0.2.14 (2026-08-26)
+
+### 🩹 Fixes
+
+- **tokens:** the control height is the primitive, padding is derived (ADR-0041) ([df973f7](https://github.com/DominikPieper/atelier-ui/commit/df973f7))
+
+### ❤️ Thank You
+
+- Claude Opus 5
+- Dominik Pieper @DominikPieper
+
 ## 0.2.13 (2026-08-26)
 
 ### 🩹 Fixes

package/package.json

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

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

@@ -1,3 +1,19 @@
+/* Geometry contract: every size this component states is a border-box size.
+ * Declared with the component rather than as a global reset, so it ships in the
+ * same file as the sizes it governs and no consuming app has to supply one.
+ * Gated by check:box-sizing; the resulting boxes are measured by check:geometry.
+ * See ADR-0043. */
+:is(
+  .atl-accordion-group,
+  .atl-accordion-item
+),
+:is(
+  .atl-accordion-group,
+  .atl-accordion-item
+) * {
+  box-sizing: border-box;
+}
+
 /* ── AccordionGroup ──────────────────────────────────────────────────────── */
 .atl-accordion-group {
   display: block;
@@ -7,22 +23,22 @@
 
 /* ── Default variant — shared borders between items ──────────────────────── */
 .atl-accordion-group.variant-default {
-  border-top: 1px solid var(--ui-color-border);
+  border-top: var(--ui-border-width) solid var(--ui-color-border);
 }
 
 .atl-accordion-group.variant-default .atl-accordion-item {
-  border-bottom: 1px solid var(--ui-color-border);
+  border-bottom: var(--ui-border-width) solid var(--ui-color-border);
 }
 
 /* ── Bordered variant — outer border + radius ────────────────────────────── */
 .atl-accordion-group.variant-bordered {
-  border: 1px solid var(--ui-color-border);
+  border: var(--ui-border-width) solid var(--ui-color-border);
   border-radius: var(--ui-radius-lg);
   overflow: hidden;
 }
 
 .atl-accordion-group.variant-bordered .atl-accordion-item:not(:last-child) {
-  border-bottom: 1px solid var(--ui-color-border);
+  border-bottom: var(--ui-border-width) solid var(--ui-color-border);
 }
 
 /* ── Separated variant — card-like items with gap ────────────────────────── */
@@ -33,7 +49,7 @@
 }
 
 .atl-accordion-group.variant-separated .atl-accordion-item {
-  border: 1px solid var(--ui-color-border);
+  border: var(--ui-border-width) solid var(--ui-color-border);
   border-radius: var(--ui-radius-lg);
   overflow: hidden;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"atl-accordion.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/accordion/atl-accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAQL,SAAS,EACT,cAAc,EAEf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EACV,qBAAqB,EACrB,oBAAoB,EACrB,MAAM,SAAS,CAAC;AACjB,OAAO,qBAAqB,CAAC;AAoB7B;;GAEG;AACH,MAAM,WAAW,sBACf,SAAQ,cAAc,CAAC,cAAc,CAAC,EACpC,qBAAqB;IACvB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,WAAW,CAAC;IAC/C;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,KAAa,EACb,OAAmB,EACnB,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,sBAAsB,+BA+DxB;AAED;;GAEG;AACH,MAAM,WAAW,qBACf,SAAQ,cAAc,CAAC,cAAc,CAAC,EACpC,oBAAoB;IACtB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/C;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACrC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EAAE,gBAAgB,EAC1B,gBAAgB,EAChB,QAAgB,EAChB,YAAgB,EAChB,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,qBAAqB,+BAuGvB;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,eAAe,CAAC,GAAG;IACnC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,+BASA"}
+{"version":3,"file":"atl-accordion.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/accordion/atl-accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAQL,SAAS,EACT,cAAc,EAEf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EACV,qBAAqB,EACrB,oBAAoB,EACrB,MAAM,SAAS,CAAC;AACjB,OAAO,qBAAqB,CAAC;AAqB7B;;GAEG;AACH,MAAM,WAAW,sBACf,SAAQ,cAAc,CAAC,cAAc,CAAC,EACpC,qBAAqB;IACvB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,WAAW,CAAC;IAC/C;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,KAAa,EACb,OAAmB,EACnB,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,sBAAsB,+BA+DxB;AAED;;GAEG;AACH,MAAM,WAAW,qBACf,SAAQ,cAAc,CAAC,cAAc,CAAC,EACpC,oBAAoB;IACtB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/C;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACrC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EAAE,gBAAgB,EAC1B,gBAAgB,EAChB,QAAgB,EAChB,YAAgB,EAChB,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,qBAAqB,+BAsFvB;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,eAAe,CAAC,GAAG;IACnC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,+BASA"}

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

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, useContext, useState, useRef, useId, useLayoutEffect, useCallback, } from 'react';
 import './atl-accordion.css';
+import { AtlIcon } from '../icon/atl-icon';
 const AccordionGroupContext = createContext({
     multi: false,
     openItems: new Set(),
@@ -111,9 +112,7 @@ export function AtlAccordionItem({ expanded: externalExpanded, onExpandedChange,
     const Heading = `h${headingLevel}`;
     return (_jsxs("div", { className: classes, ...rest, children: [_jsx(Heading, { className: "accordion-heading", children: _jsxs("button", { ref: triggerRef, type: "button", id: triggerId, className: ['accordion-trigger', disabled && 'is-disabled']
                         .filter(Boolean)
-                        .join(' '), "aria-expanded": isExpanded, "aria-controls": panelId, "aria-disabled": disabled || undefined, disabled: disabled, onClick: toggle, onKeyDown: (e) => ctx.handleKeydown(e, id), children: [headerNode, _jsx("svg", { className: ['chevron', isExpanded && 'is-expanded']
-                                .filter(Boolean)
-                                .join(' '), width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M4 6L8 10L12 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })] }) }), _jsx("div", { className: ['accordion-panel-wrapper', isExpanded && 'is-expanded']
+                        .join(' '), "aria-expanded": isExpanded, "aria-controls": panelId, "aria-disabled": disabled || undefined, disabled: disabled, onClick: toggle, onKeyDown: (e) => ctx.handleKeydown(e, id), children: [headerNode, _jsx(AtlIcon, { name: "chevron-down", size: "sm", className: ['chevron', isExpanded && 'is-expanded'].filter(Boolean).join(' ') })] }) }), _jsx("div", { className: ['accordion-panel-wrapper', isExpanded && 'is-expanded']
                     .filter(Boolean)
                     .join(' '), children: _jsx("div", { id: panelId, role: "region", "aria-labelledby": triggerId, className: "accordion-panel", children: bodyNodes }) })] }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"atl-accordion.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/accordion/atl-accordion.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  createContext,\n  useContext,\n  useState,\n  useRef,\n  useId,\n  useLayoutEffect,\n  useCallback,\n  ReactNode,\n  HTMLAttributes,\n  KeyboardEvent,\n} from 'react';\nimport type {\n  AtlAccordionGroupSpec,\n  AtlAccordionItemSpec,\n} from '../spec';\nimport './atl-accordion.css';\n\ninterface AccordionGroupContextValue {\n  multi: boolean;\n  openItems: Set<string>;\n  toggleItem: (id: string) => void;\n  registerItem: (id: string, ref: React.RefObject<HTMLButtonElement | null>, disabled: boolean) => void;\n  unregisterItem: (id: string) => void;\n  handleKeydown: (e: KeyboardEvent, id: string) => void;\n}\n\nconst AccordionGroupContext = createContext<AccordionGroupContextValue>({\n  multi: false,\n  openItems: new Set(),\n  toggleItem: () => { /* noop */ },\n  registerItem: () => { /* noop */ },\n  unregisterItem: () => { /* noop */ },\n  handleKeydown: () => { /* noop */ },\n});\n\n/**\n * Properties for the AtlAccordionGroup component.\n */\nexport interface AtlAccordionGroupProps\n  extends HTMLAttributes<HTMLDivElement>,\n    AtlAccordionGroupSpec {\n  /**\n   * Whether multiple items can be expanded simultaneously.\n   */\n  multi?: boolean;\n  /**\n   * The visual style variant of the accordion.\n   */\n  variant?: 'default' | 'bordered' | 'separated';\n  /**\n   * The accordion items to be rendered.\n   */\n  children?: ReactNode;\n}\n\n/**\n * A container component that manages a group of accordion items.\n */\nexport function AtlAccordionGroup({\n  multi = false,\n  variant = 'default',\n  children,\n  className,\n  ...rest\n}: AtlAccordionGroupProps) {\n  const [openItems, setOpenItems] = useState<Set<string>>(new Set());\n  const itemsRef = useRef<{ id: string; triggerRef: React.RefObject<HTMLButtonElement | null>; disabled: boolean }[]>([]);\n\n  const classes = ['atl-accordion-group', `variant-${variant}`, className]\n    .filter(Boolean)\n    .join(' ');\n\n  const toggleItem = useCallback((id: string) => {\n    setOpenItems((prev) => {\n      const next = new Set(prev);\n      if (next.has(id)) {\n        next.delete(id);\n      } else {\n        if (!multi) next.clear();\n        next.add(id);\n      }\n      return next;\n    });\n  }, [multi]);\n\n  const registerItem = useCallback((id: string, ref: React.RefObject<HTMLButtonElement | null>, disabled: boolean) => {\n    itemsRef.current = [...itemsRef.current.filter((i) => i.id !== id), { id, triggerRef: ref, disabled }];\n  }, []);\n\n  const unregisterItem = useCallback((id: string) => {\n    itemsRef.current = itemsRef.current.filter((i) => i.id !== id);\n  }, []);\n\n  const handleKeydown = useCallback((e: KeyboardEvent, currentId: string) => {\n    const enabled = itemsRef.current.filter((i) => !i.disabled);\n    if (enabled.length === 0) return;\n\n    const pos = enabled.findIndex((i) => i.id === currentId);\n    const n = enabled.length;\n    let target: (typeof enabled)[0] | null = null;\n\n    if (e.key === 'ArrowDown') {\n      e.preventDefault();\n      target = enabled[(pos + 1) % n];\n    } else if (e.key === 'ArrowUp') {\n      e.preventDefault();\n      target = enabled[(pos - 1 + n) % n];\n    } else if (e.key === 'Home') {\n      e.preventDefault();\n      target = enabled[0];\n    } else if (e.key === 'End') {\n      e.preventDefault();\n      target = enabled[n - 1];\n    }\n\n    target?.triggerRef.current?.focus();\n  }, []);\n\n  return (\n    <AccordionGroupContext.Provider\n      value={{ multi, openItems, toggleItem, registerItem, unregisterItem, handleKeydown }}\n    >\n      <div className={classes} role=\"presentation\" {...rest}>\n        {children}\n      </div>\n    </AccordionGroupContext.Provider>\n  );\n}\n\n/**\n * Properties for the AtlAccordionItem component.\n */\nexport interface AtlAccordionItemProps\n  extends HTMLAttributes<HTMLDivElement>,\n    AtlAccordionItemSpec {\n  /**\n   * Whether the item is currently expanded.\n   */\n  expanded?: boolean;\n  /**\n   * Callback triggered when the expanded state changes.\n   */\n  onExpandedChange?: (expanded: boolean) => void;\n  /**\n   * Whether the accordion item is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * HTML heading level wrapping the trigger button. Default `3`.\n   * Match your page's heading outline so heading order stays valid.\n   */\n  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n  /**\n   * The content of the accordion item, typically including an AtlAccordionHeader.\n   */\n  children?: ReactNode;\n}\n\n/**\n * An individual item within an accordion group.\n */\nexport function AtlAccordionItem({\n  expanded: externalExpanded,\n  onExpandedChange,\n  disabled = false,\n  headingLevel = 3,\n  children,\n  className,\n  ...rest\n}: AtlAccordionItemProps) {\n  const ctx = useContext(AccordionGroupContext);\n  const id = useId();\n  const triggerId = `${id}-trigger`;\n  const panelId = `${id}-panel`;\n  const triggerRef = useRef<HTMLButtonElement>(null);\n\n  const { registerItem, unregisterItem } = ctx;\n\n  // Register/unregister with parent\n  useLayoutEffect(() => {\n    registerItem(id, triggerRef, disabled);\n    return () => unregisterItem(id);\n  }, [id, triggerRef, disabled, registerItem, unregisterItem]);\n\n  const isControlled = externalExpanded !== undefined;\n  const isExpanded = isControlled ? externalExpanded : ctx.openItems.has(id);\n\n  const toggle = () => {\n    if (disabled) return;\n    const next = !isExpanded;\n    if (!isControlled) ctx.toggleItem(id);\n    onExpandedChange?.(next);\n  };\n\n  const classes = [\n    'atl-accordion-item',\n    isExpanded && 'is-expanded',\n    disabled && 'is-disabled',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  // Separate header child from body children\n  const childArray = Array.isArray(children) ? children : [children];\n  const headerNode = childArray.find(\n    (c): c is React.ReactElement =>\n      typeof c === 'object' &&\n      c !== null &&\n      'type' in (c as object) &&\n      (c as React.ReactElement).type === AtlAccordionHeader\n  );\n  const bodyNodes = childArray.filter((c) => c !== headerNode);\n\n  // Render the heading wrapper at the level the consumer asked for.\n  // We can't use a JSX expression as a tag, so React.createElement is\n  // the cleanest path here.\n  const Heading = `h${headingLevel}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  return (\n    <div className={classes} {...rest}>\n      <Heading className=\"accordion-heading\">\n        <button\n          ref={triggerRef}\n          type=\"button\"\n          id={triggerId}\n          className={['accordion-trigger', disabled && 'is-disabled']\n            .filter(Boolean)\n            .join(' ')}\n          aria-expanded={isExpanded}\n          aria-controls={panelId}\n          aria-disabled={disabled || undefined}\n          disabled={disabled}\n          onClick={toggle}\n          onKeyDown={(e) => ctx.handleKeydown(e, id)}\n        >\n          {headerNode}\n          <svg\n            className={['chevron', isExpanded && 'is-expanded']\n              .filter(Boolean)\n              .join(' ')}\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            aria-hidden=\"true\"\n          >\n            <path\n              d=\"M4 6L8 10L12 6\"\n              stroke=\"currentColor\"\n              strokeWidth=\"1.5\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            />\n          </svg>\n        </button>\n      </Heading>\n      <div\n        className={['accordion-panel-wrapper', isExpanded && 'is-expanded']\n          .filter(Boolean)\n          .join(' ')}\n      >\n        <div\n          id={panelId}\n          role=\"region\"\n          aria-labelledby={triggerId}\n          className=\"accordion-panel\"\n        >\n          {bodyNodes}\n        </div>\n      </div>\n    </div>\n  );\n}\n\n/**\n * The header component for an AtlAccordionItem.\n */\nexport function AtlAccordionHeader({\n  children,\n  className,\n  ...rest\n}: HTMLAttributes<HTMLSpanElement> & {\n  /**\n   * The content to be rendered in the header.\n   */\n  children?: ReactNode;\n}) {\n  return (\n    <span\n      className={['accordion-header-content', className].filter(Boolean).join(' ')}\n      {...rest}\n    >\n      {children}\n    </span>\n  );\n}\n"]}
+{"version":3,"file":"atl-accordion.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/accordion/atl-accordion.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  createContext,\n  useContext,\n  useState,\n  useRef,\n  useId,\n  useLayoutEffect,\n  useCallback,\n  ReactNode,\n  HTMLAttributes,\n  KeyboardEvent,\n} from 'react';\nimport type {\n  AtlAccordionGroupSpec,\n  AtlAccordionItemSpec,\n} from '../spec';\nimport './atl-accordion.css';\nimport { AtlIcon } from '../icon/atl-icon';\n\ninterface AccordionGroupContextValue {\n  multi: boolean;\n  openItems: Set<string>;\n  toggleItem: (id: string) => void;\n  registerItem: (id: string, ref: React.RefObject<HTMLButtonElement | null>, disabled: boolean) => void;\n  unregisterItem: (id: string) => void;\n  handleKeydown: (e: KeyboardEvent, id: string) => void;\n}\n\nconst AccordionGroupContext = createContext<AccordionGroupContextValue>({\n  multi: false,\n  openItems: new Set(),\n  toggleItem: () => { /* noop */ },\n  registerItem: () => { /* noop */ },\n  unregisterItem: () => { /* noop */ },\n  handleKeydown: () => { /* noop */ },\n});\n\n/**\n * Properties for the AtlAccordionGroup component.\n */\nexport interface AtlAccordionGroupProps\n  extends HTMLAttributes<HTMLDivElement>,\n    AtlAccordionGroupSpec {\n  /**\n   * Whether multiple items can be expanded simultaneously.\n   */\n  multi?: boolean;\n  /**\n   * The visual style variant of the accordion.\n   */\n  variant?: 'default' | 'bordered' | 'separated';\n  /**\n   * The accordion items to be rendered.\n   */\n  children?: ReactNode;\n}\n\n/**\n * A container component that manages a group of accordion items.\n */\nexport function AtlAccordionGroup({\n  multi = false,\n  variant = 'default',\n  children,\n  className,\n  ...rest\n}: AtlAccordionGroupProps) {\n  const [openItems, setOpenItems] = useState<Set<string>>(new Set());\n  const itemsRef = useRef<{ id: string; triggerRef: React.RefObject<HTMLButtonElement | null>; disabled: boolean }[]>([]);\n\n  const classes = ['atl-accordion-group', `variant-${variant}`, className]\n    .filter(Boolean)\n    .join(' ');\n\n  const toggleItem = useCallback((id: string) => {\n    setOpenItems((prev) => {\n      const next = new Set(prev);\n      if (next.has(id)) {\n        next.delete(id);\n      } else {\n        if (!multi) next.clear();\n        next.add(id);\n      }\n      return next;\n    });\n  }, [multi]);\n\n  const registerItem = useCallback((id: string, ref: React.RefObject<HTMLButtonElement | null>, disabled: boolean) => {\n    itemsRef.current = [...itemsRef.current.filter((i) => i.id !== id), { id, triggerRef: ref, disabled }];\n  }, []);\n\n  const unregisterItem = useCallback((id: string) => {\n    itemsRef.current = itemsRef.current.filter((i) => i.id !== id);\n  }, []);\n\n  const handleKeydown = useCallback((e: KeyboardEvent, currentId: string) => {\n    const enabled = itemsRef.current.filter((i) => !i.disabled);\n    if (enabled.length === 0) return;\n\n    const pos = enabled.findIndex((i) => i.id === currentId);\n    const n = enabled.length;\n    let target: (typeof enabled)[0] | null = null;\n\n    if (e.key === 'ArrowDown') {\n      e.preventDefault();\n      target = enabled[(pos + 1) % n];\n    } else if (e.key === 'ArrowUp') {\n      e.preventDefault();\n      target = enabled[(pos - 1 + n) % n];\n    } else if (e.key === 'Home') {\n      e.preventDefault();\n      target = enabled[0];\n    } else if (e.key === 'End') {\n      e.preventDefault();\n      target = enabled[n - 1];\n    }\n\n    target?.triggerRef.current?.focus();\n  }, []);\n\n  return (\n    <AccordionGroupContext.Provider\n      value={{ multi, openItems, toggleItem, registerItem, unregisterItem, handleKeydown }}\n    >\n      <div className={classes} role=\"presentation\" {...rest}>\n        {children}\n      </div>\n    </AccordionGroupContext.Provider>\n  );\n}\n\n/**\n * Properties for the AtlAccordionItem component.\n */\nexport interface AtlAccordionItemProps\n  extends HTMLAttributes<HTMLDivElement>,\n    AtlAccordionItemSpec {\n  /**\n   * Whether the item is currently expanded.\n   */\n  expanded?: boolean;\n  /**\n   * Callback triggered when the expanded state changes.\n   */\n  onExpandedChange?: (expanded: boolean) => void;\n  /**\n   * Whether the accordion item is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * HTML heading level wrapping the trigger button. Default `3`.\n   * Match your page's heading outline so heading order stays valid.\n   */\n  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n  /**\n   * The content of the accordion item, typically including an AtlAccordionHeader.\n   */\n  children?: ReactNode;\n}\n\n/**\n * An individual item within an accordion group.\n */\nexport function AtlAccordionItem({\n  expanded: externalExpanded,\n  onExpandedChange,\n  disabled = false,\n  headingLevel = 3,\n  children,\n  className,\n  ...rest\n}: AtlAccordionItemProps) {\n  const ctx = useContext(AccordionGroupContext);\n  const id = useId();\n  const triggerId = `${id}-trigger`;\n  const panelId = `${id}-panel`;\n  const triggerRef = useRef<HTMLButtonElement>(null);\n\n  const { registerItem, unregisterItem } = ctx;\n\n  // Register/unregister with parent\n  useLayoutEffect(() => {\n    registerItem(id, triggerRef, disabled);\n    return () => unregisterItem(id);\n  }, [id, triggerRef, disabled, registerItem, unregisterItem]);\n\n  const isControlled = externalExpanded !== undefined;\n  const isExpanded = isControlled ? externalExpanded : ctx.openItems.has(id);\n\n  const toggle = () => {\n    if (disabled) return;\n    const next = !isExpanded;\n    if (!isControlled) ctx.toggleItem(id);\n    onExpandedChange?.(next);\n  };\n\n  const classes = [\n    'atl-accordion-item',\n    isExpanded && 'is-expanded',\n    disabled && 'is-disabled',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  // Separate header child from body children\n  const childArray = Array.isArray(children) ? children : [children];\n  const headerNode = childArray.find(\n    (c): c is React.ReactElement =>\n      typeof c === 'object' &&\n      c !== null &&\n      'type' in (c as object) &&\n      (c as React.ReactElement).type === AtlAccordionHeader\n  );\n  const bodyNodes = childArray.filter((c) => c !== headerNode);\n\n  // Render the heading wrapper at the level the consumer asked for.\n  // We can't use a JSX expression as a tag, so React.createElement is\n  // the cleanest path here.\n  const Heading = `h${headingLevel}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  return (\n    <div className={classes} {...rest}>\n      <Heading className=\"accordion-heading\">\n        <button\n          ref={triggerRef}\n          type=\"button\"\n          id={triggerId}\n          className={['accordion-trigger', disabled && 'is-disabled']\n            .filter(Boolean)\n            .join(' ')}\n          aria-expanded={isExpanded}\n          aria-controls={panelId}\n          aria-disabled={disabled || undefined}\n          disabled={disabled}\n          onClick={toggle}\n          onKeyDown={(e) => ctx.handleKeydown(e, id)}\n        >\n          {headerNode}\n          <AtlIcon name=\"chevron-down\" size=\"sm\" className={['chevron', isExpanded && 'is-expanded'].filter(Boolean).join(' ')} />\n        </button>\n      </Heading>\n      <div\n        className={['accordion-panel-wrapper', isExpanded && 'is-expanded']\n          .filter(Boolean)\n          .join(' ')}\n      >\n        <div\n          id={panelId}\n          role=\"region\"\n          aria-labelledby={triggerId}\n          className=\"accordion-panel\"\n        >\n          {bodyNodes}\n        </div>\n      </div>\n    </div>\n  );\n}\n\n/**\n * The header component for an AtlAccordionItem.\n */\nexport function AtlAccordionHeader({\n  children,\n  className,\n  ...rest\n}: HTMLAttributes<HTMLSpanElement> & {\n  /**\n   * The content to be rendered in the header.\n   */\n  children?: ReactNode;\n}) {\n  return (\n    <span\n      className={['accordion-header-content', className].filter(Boolean).join(' ')}\n      {...rest}\n    >\n      {children}\n    </span>\n  );\n}\n"]}

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

@@ -1,10 +1,20 @@
+/* Geometry contract: every size this component states is a border-box size.
+ * Declared with the component rather than as a global reset, so it ships in the
+ * same file as the sizes it governs and no consuming app has to supply one.
+ * Gated by check:box-sizing; the resulting boxes are measured by check:geometry.
+ * See ADR-0043. */
+.atl-alert,
+.atl-alert * {
+  box-sizing: border-box;
+}
+
 .atl-alert {
   display: flex;
   align-items: flex-start;
   gap: var(--ui-spacing-3);
   padding: var(--ui-spacing-4) var(--ui-spacing-5);
   border-radius: var(--ui-radius-lg);
-  border: 1px solid transparent;
+  border: var(--ui-border-width) solid transparent;
   font-family: var(--ui-font-family);
   font-size: var(--ui-font-size-sm);
   line-height: var(--ui-line-height-normal);

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;AAEzB,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,+BAoCf"}
+{"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"}

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

@@ -1,5 +1,6 @@
 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: '✓',
@@ -12,6 +13,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: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) }))] }));
+    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" }) }))] }));
 }
 //# 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;AAIzB,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,eACE,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,iBACV,MAAM,aAElB,eAAM,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,GAAG,EACtC,eAAM,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,GAAG,IAClC,GACC,CACV,IACG,CACP,CAAC;AACJ,CAAC","sourcesContent":["import { HTMLAttributes, ReactNode } from 'react';\nimport type { AtlAlertSpec } from '../spec';\nimport './atl-alert.css';\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          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n            <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n          </svg>\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;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"]}

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

@@ -1,3 +1,19 @@
+/* Geometry contract: every size this component states is a border-box size.
+ * Declared with the component rather than as a global reset, so it ships in the
+ * same file as the sizes it governs and no consuming app has to supply one.
+ * Gated by check:box-sizing; the resulting boxes are measured by check:geometry.
+ * See ADR-0043. */
+:is(
+  .atl-avatar,
+  .atl-avatar-group
+),
+:is(
+  .atl-avatar,
+  .atl-avatar-group
+) * {
+  box-sizing: border-box;
+}
+
 /* === AtlAvatar === */
 
 .atl-avatar {
@@ -40,7 +56,7 @@
 }
 
 /* Fallback icon */
-.atl-avatar .icon {
+.atl-avatar .atl-icon.icon {
   width: 55%;
   height: 55%;
   opacity: 0.6;
@@ -58,7 +74,7 @@
   max-width: 14px;
   max-height: 14px;
   border-radius: var(--ui-radius-full);
-  border: 2px solid var(--ui-color-surface);
+  border: var(--ui-border-width-thick) solid var(--ui-color-surface);
   box-sizing: content-box;
 }
 
@@ -91,7 +107,7 @@
   flex-shrink: 0;
   background-color: var(--ui-color-surface-sunken);
   color: var(--ui-color-text-muted);
-  border: 1px solid var(--ui-color-border);
+  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);

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

@@ -1 +1 @@
-{"version":3,"file":"atl-avatar.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/avatar/atl-avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAsB,MAAM,OAAO,CAAC;AACtE,OAAO,KAAK,EACV,aAAa,EACb,kBAAkB,EACnB,MAAM,SAAS,CAAC;AACjB,OAAO,kBAAkB,CAAC;AAE1B;;GAEG;AACH,MAAM,WAAW,cACf,SAAQ,cAAc,CAAC,cAAc,CAAC,EACpC,aAAa;IACf;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACxC;;OAEG;IACH,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC5B;;OAEG;IACH,MAAM,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,EAAE,CAAC;CACtD;AAWD;;GAEG;AACH,wBAAgB,SAAS,CAAC,EACxB,GAAQ,EACR,GAAQ,EACR,IAAS,EACT,IAAW,EACX,KAAgB,EAChB,MAAW,EACX,SAAS,EACT,GAAG,IAAI,EACR,EAAE,cAAc,+BA8BhB;AAED;;GAEG;AACH,MAAM,WAAW,mBACf,SAAQ,cAAc,CAAC,cAAc,CAAC,EACpC,kBAAkB;IACpB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC;IAC9B;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,EAC7B,GAAO,EACP,IAAW,EACX,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,mBAAmB,+BAoBrB"}
+{"version":3,"file":"atl-avatar.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/avatar/atl-avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAsB,MAAM,OAAO,CAAC;AACtE,OAAO,KAAK,EACV,aAAa,EACb,kBAAkB,EACnB,MAAM,SAAS,CAAC;AACjB,OAAO,kBAAkB,CAAC;AAG1B;;GAEG;AACH,MAAM,WAAW,cACf,SAAQ,cAAc,CAAC,cAAc,CAAC,EACpC,aAAa;IACf;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACxC;;OAEG;IACH,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC5B;;OAEG;IACH,MAAM,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,EAAE,CAAC;CACtD;AAWD;;GAEG;AACH,wBAAgB,SAAS,CAAC,EACxB,GAAQ,EACR,GAAQ,EACR,IAAS,EACT,IAAW,EACX,KAAgB,EAChB,MAAW,EACX,SAAS,EACT,GAAG,IAAI,EACR,EAAE,cAAc,+BA4BhB;AAED;;GAEG;AACH,MAAM,WAAW,mBACf,SAAQ,cAAc,CAAC,cAAc,CAAC,EACpC,kBAAkB;IACpB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC;IAC9B;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,EAC7B,GAAO,EACP,IAAW,EACX,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,mBAAmB,+BAoBrB"}

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

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Children, useState } from 'react';
 import './atl-avatar.css';
+import { AtlIcon } from '../icon/atl-icon';
 function getInitials(name) {
     return name
         .split(' ')
@@ -24,7 +25,7 @@ export function AtlAvatar({ src = '', alt = '', name = '', size = 'md', shape =
         .filter(Boolean).join(' ');
     const initials = name ? getInitials(name) : '';
     const ariaLabel = alt || name || 'Avatar';
-    return (_jsxs("div", { className: classes, "aria-label": ariaLabel, role: "img", ...rest, children: [src && !imgError ? (_jsx("img", { src: src, alt: alt || name, onError: () => setImgError(true) })) : initials ? (_jsx("span", { className: "initials", "aria-hidden": "true", children: initials })) : (_jsx("svg", { className: "icon", "aria-hidden": "true", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M12 12c2.761 0 5-2.239 5-5s-2.239-5-5-5-5 2.239-5 5 2.239 5 5 5zm0 2c-3.314 0-10 1.343-10 4v2h20v-2c0-2.657-6.686-4-10-4z" }) })), status && _jsx("span", { className: `status-dot status-${status}`, "aria-hidden": "true" })] }));
+    return (_jsxs("div", { className: classes, "aria-label": ariaLabel, role: "img", ...rest, children: [src && !imgError ? (_jsx("img", { src: src, alt: alt || name, onError: () => setImgError(true) })) : initials ? (_jsx("span", { className: "initials", "aria-hidden": "true", children: initials })) : (_jsx(AtlIcon, { name: "person", size: "sm", className: "icon" })), status && _jsx("span", { className: `status-dot status-${status}`, "aria-hidden": "true" })] }));
 }
 /**
  * A container for grouping multiple avatars.

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

@@ -1 +1 @@
-{"version":3,"file":"atl-avatar.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/avatar/atl-avatar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { HTMLAttributes, ReactNode, Children, useState } from 'react';\nimport type {\n  AtlAvatarSpec,\n  AtlAvatarGroupSpec,\n} from '../spec';\nimport './atl-avatar.css';\n\n/**\n * Properties for the AtlAvatar component.\n */\nexport interface AtlAvatarProps\n  extends HTMLAttributes<HTMLDivElement>,\n    AtlAvatarSpec {\n  /**\n   * The URL of the image to display.\n   */\n  src?: string;\n  /**\n   * Accessible text for the avatar image.\n   */\n  alt?: string;\n  /**\n   * The name of the person/entity, used for initials if no image is provided.\n   */\n  name?: string;\n  /**\n   * The size of the avatar.\n   */\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n  /**\n   * The shape of the avatar.\n   */\n  shape?: 'circle' | 'square';\n  /**\n   * The status indicator to display on the avatar.\n   */\n  status?: 'online' | 'offline' | 'away' | 'busy' | '';\n}\n\nfunction getInitials(name: string): string {\n  return name\n    .split(' ')\n    .filter(Boolean)\n    .slice(0, 2)\n    .map((w) => w[0].toUpperCase())\n    .join('');\n}\n\n/**\n * An avatar component for displaying user profile pictures or initials.\n */\nexport function AtlAvatar({\n  src = '',\n  alt = '',\n  name = '',\n  size = 'md',\n  shape = 'circle',\n  status = '',\n  className,\n  ...rest\n}: AtlAvatarProps) {\n  const [imgError, setImgError] = useState(false);\n  const [prevSrc, setPrevSrc] = useState(src);\n\n  // Reset imgError when src changes\n  if (src !== prevSrc) {\n    setPrevSrc(src);\n    setImgError(false);\n  }\n\n  const classes = ['atl-avatar', `size-${size}`, `shape-${shape}`, className]\n    .filter(Boolean).join(' ');\n\n  const initials = name ? getInitials(name) : '';\n  const ariaLabel = alt || name || 'Avatar';\n\n  return (\n    <div className={classes} aria-label={ariaLabel} role=\"img\" {...rest}>\n      {src && !imgError ? (\n        <img src={src} alt={alt || name} onError={() => setImgError(true)} />\n      ) : initials ? (\n        <span className=\"initials\" aria-hidden=\"true\">{initials}</span>\n      ) : (\n        <svg className=\"icon\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n          <path d=\"M12 12c2.761 0 5-2.239 5-5s-2.239-5-5-5-5 2.239-5 5 2.239 5 5 5zm0 2c-3.314 0-10 1.343-10 4v2h20v-2c0-2.657-6.686-4-10-4z\" />\n        </svg>\n      )}\n      {status && <span className={`status-dot status-${status}`} aria-hidden=\"true\" />}\n    </div>\n  );\n}\n\n/**\n * Properties for the AtlAvatarGroup component.\n */\nexport interface AtlAvatarGroupProps\n  extends HTMLAttributes<HTMLDivElement>,\n    AtlAvatarGroupSpec {\n  /**\n   * The maximum number of avatars to show before displaying an overflow badge.\n   */\n  max?: number;\n  /**\n   * The size of the avatars in the group.\n   */\n  size?: AtlAvatarProps['size'];\n  /**\n   * The avatars to be rendered in the group.\n   */\n  children?: ReactNode;\n}\n\n/**\n * A container for grouping multiple avatars.\n */\nexport function AtlAvatarGroup({\n  max = 5,\n  size = 'md',\n  children,\n  className,\n  ...rest\n}: AtlAvatarGroupProps) {\n  const childArray = Children.toArray(children);\n  const visible = childArray.slice(0, max);\n  const overflow = childArray.length - max;\n\n  const classes = ['atl-avatar-group', `size-${size}`, className].filter(Boolean).join(' ');\n\n  return (\n    <div className={classes} {...rest}>\n      {visible}\n      {overflow > 0 && (\n        <div\n          className={`overflow-badge size-${size}`}\n          aria-label={`+${overflow} more`}\n        >\n          +{overflow}\n        </div>\n      )}\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"atl-avatar.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/avatar/atl-avatar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { HTMLAttributes, ReactNode, Children, useState } from 'react';\nimport type {\n  AtlAvatarSpec,\n  AtlAvatarGroupSpec,\n} from '../spec';\nimport './atl-avatar.css';\nimport { AtlIcon } from '../icon/atl-icon';\n\n/**\n * Properties for the AtlAvatar component.\n */\nexport interface AtlAvatarProps\n  extends HTMLAttributes<HTMLDivElement>,\n    AtlAvatarSpec {\n  /**\n   * The URL of the image to display.\n   */\n  src?: string;\n  /**\n   * Accessible text for the avatar image.\n   */\n  alt?: string;\n  /**\n   * The name of the person/entity, used for initials if no image is provided.\n   */\n  name?: string;\n  /**\n   * The size of the avatar.\n   */\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n  /**\n   * The shape of the avatar.\n   */\n  shape?: 'circle' | 'square';\n  /**\n   * The status indicator to display on the avatar.\n   */\n  status?: 'online' | 'offline' | 'away' | 'busy' | '';\n}\n\nfunction getInitials(name: string): string {\n  return name\n    .split(' ')\n    .filter(Boolean)\n    .slice(0, 2)\n    .map((w) => w[0].toUpperCase())\n    .join('');\n}\n\n/**\n * An avatar component for displaying user profile pictures or initials.\n */\nexport function AtlAvatar({\n  src = '',\n  alt = '',\n  name = '',\n  size = 'md',\n  shape = 'circle',\n  status = '',\n  className,\n  ...rest\n}: AtlAvatarProps) {\n  const [imgError, setImgError] = useState(false);\n  const [prevSrc, setPrevSrc] = useState(src);\n\n  // Reset imgError when src changes\n  if (src !== prevSrc) {\n    setPrevSrc(src);\n    setImgError(false);\n  }\n\n  const classes = ['atl-avatar', `size-${size}`, `shape-${shape}`, className]\n    .filter(Boolean).join(' ');\n\n  const initials = name ? getInitials(name) : '';\n  const ariaLabel = alt || name || 'Avatar';\n\n  return (\n    <div className={classes} aria-label={ariaLabel} role=\"img\" {...rest}>\n      {src && !imgError ? (\n        <img src={src} alt={alt || name} onError={() => setImgError(true)} />\n      ) : initials ? (\n        <span className=\"initials\" aria-hidden=\"true\">{initials}</span>\n      ) : (\n        <AtlIcon name=\"person\" size=\"sm\" className=\"icon\" />\n      )}\n      {status && <span className={`status-dot status-${status}`} aria-hidden=\"true\" />}\n    </div>\n  );\n}\n\n/**\n * Properties for the AtlAvatarGroup component.\n */\nexport interface AtlAvatarGroupProps\n  extends HTMLAttributes<HTMLDivElement>,\n    AtlAvatarGroupSpec {\n  /**\n   * The maximum number of avatars to show before displaying an overflow badge.\n   */\n  max?: number;\n  /**\n   * The size of the avatars in the group.\n   */\n  size?: AtlAvatarProps['size'];\n  /**\n   * The avatars to be rendered in the group.\n   */\n  children?: ReactNode;\n}\n\n/**\n * A container for grouping multiple avatars.\n */\nexport function AtlAvatarGroup({\n  max = 5,\n  size = 'md',\n  children,\n  className,\n  ...rest\n}: AtlAvatarGroupProps) {\n  const childArray = Children.toArray(children);\n  const visible = childArray.slice(0, max);\n  const overflow = childArray.length - max;\n\n  const classes = ['atl-avatar-group', `size-${size}`, className].filter(Boolean).join(' ');\n\n  return (\n    <div className={classes} {...rest}>\n      {visible}\n      {overflow > 0 && (\n        <div\n          className={`overflow-badge size-${size}`}\n          aria-label={`+${overflow} more`}\n        >\n          +{overflow}\n        </div>\n      )}\n    </div>\n  );\n}\n"]}

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

@@ -1,3 +1,13 @@
+/* Geometry contract: every size this component states is a border-box size.
+ * Declared with the component rather than as a global reset, so it ships in the
+ * same file as the sizes it governs and no consuming app has to supply one.
+ * Gated by check:box-sizing; the resulting boxes are measured by check:geometry.
+ * See ADR-0043. */
+.atl-badge,
+.atl-badge * {
+  box-sizing: border-box;
+}
+
 .atl-badge {
   display: inline-flex;
   align-items: center;
@@ -7,7 +17,7 @@
   font-weight: var(--ui-font-weight-semibold);
   line-height: var(--ui-line-height-tight);
   white-space: nowrap;
-  letter-spacing: 0.01em;
+  letter-spacing: var(--ui-letter-spacing-wide);
 }
 
 /* Sizes */
@@ -25,31 +35,31 @@
 .atl-badge.variant-default {
   background-color: var(--ui-color-surface-sunken);
   color: var(--ui-color-text-muted);
-  border: 1px solid var(--ui-color-border);
+  border: var(--ui-border-width) solid var(--ui-color-border);
 }
 
 .atl-badge.variant-success {
   background-color: var(--ui-color-success-bg);
   color: var(--ui-color-success-text);
-  border: 1px solid color-mix(in srgb, var(--ui-color-success-text) 25%, transparent);
+  border: var(--ui-border-width) solid color-mix(in srgb, var(--ui-color-success-text) 25%, transparent);
 }
 
 .atl-badge.variant-warning {
   background-color: var(--ui-color-warning-bg);
   color: var(--ui-color-warning-text);
-  border: 1px solid color-mix(in srgb, var(--ui-color-warning-text) 25%, transparent);
+  border: var(--ui-border-width) solid color-mix(in srgb, var(--ui-color-warning-text) 25%, transparent);
 }
 
 .atl-badge.variant-danger {
   background-color: var(--ui-color-danger-bg);
   color: var(--ui-color-danger-text);
-  border: 1px solid color-mix(in srgb, var(--ui-color-danger-text) 25%, transparent);
+  border: var(--ui-border-width) solid color-mix(in srgb, var(--ui-color-danger-text) 25%, transparent);
 }
 
 .atl-badge.variant-info {
   background-color: var(--ui-color-info-bg);
   color: var(--ui-color-info-text);
-  border: 1px solid color-mix(in srgb, var(--ui-color-info-text) 25%, transparent);
+  border: var(--ui-border-width) solid color-mix(in srgb, var(--ui-color-info-text) 25%, transparent);
 }
 
 /* Semantic indicator glyph — non-color differentiation (WCAG 1.4.1). */

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

@@ -1,3 +1,19 @@
+/* Geometry contract: every size this component states is a border-box size.
+ * Declared with the component rather than as a global reset, so it ships in the
+ * same file as the sizes it governs and no consuming app has to supply one.
+ * Gated by check:box-sizing; the resulting boxes are measured by check:geometry.
+ * See ADR-0043. */
+:is(
+  .atl-breadcrumb-item,
+  .atl-breadcrumbs
+),
+:is(
+  .atl-breadcrumb-item,
+  .atl-breadcrumbs
+) * {
+  box-sizing: border-box;
+}
+
 /* AtlBreadcrumbs */
 .atl-breadcrumbs {
   display: block;

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

@@ -1,9 +1,19 @@
+/* Geometry contract: every size this component states is a border-box size.
+ * Declared with the component rather than as a global reset, so it ships in the
+ * same file as the sizes it governs and no consuming app has to supply one.
+ * Gated by check:box-sizing; the resulting boxes are measured by check:geometry.
+ * See ADR-0043. */
+.atl-button,
+.atl-button * {
+  box-sizing: border-box;
+}
+
 .atl-button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: var(--ui-spacing-2);
-  border: 1px solid transparent;
+  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-md);
@@ -98,21 +108,33 @@
 
 /* Sizes — modern target heights (sm 32px / md 40px / lg 48px) */
 .atl-button.size-sm {
-  padding: 0.375rem 0.875rem;
+  padding: calc(
+      (var(--ui-control-height-sm) - var(--ui-line-height-tight) * var(--ui-font-size-sm)) / 2 -
+        1px
+    )
+    0.875rem;
   font-size: var(--ui-font-size-sm);
-  min-height: 2rem;
+  min-height: var(--ui-control-height-sm);
 }
 
 .atl-button.size-md {
-  padding: 0.5625rem 1.125rem;
+  padding: calc(
+      (var(--ui-control-height-md) - var(--ui-line-height-tight) * var(--ui-font-size-md)) / 2 -
+        1px
+    )
+    1.125rem;
   font-size: var(--ui-font-size-md);
-  min-height: 2.5rem;
+  min-height: var(--ui-control-height-md);
 }
 
 .atl-button.size-lg {
-  padding: 0.75rem 1.5rem;
+  padding: calc(
+      (var(--ui-control-height-lg) - var(--ui-line-height-tight) * var(--ui-font-size-lg)) / 2 -
+        1px
+    )
+    1.5rem;
   font-size: var(--ui-font-size-lg);
-  min-height: 3rem;
+  min-height: var(--ui-control-height-lg);
 }
 
 /* Disabled */
@@ -127,7 +149,7 @@
   display: inline-block;
   width: 1em;
   height: 1em;
-  border: 1.5px solid currentColor;
+  border: var(--ui-border-width-thick) solid currentColor;
   border-top-color: transparent;
   border-radius: var(--ui-radius-full);
   animation: atl-spin 0.7s linear infinite;

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

@@ -1,3 +1,23 @@
+/* Geometry contract: every size this component states is a border-box size.
+ * Declared with the component rather than as a global reset, so it ships in the
+ * same file as the sizes it governs and no consuming app has to supply one.
+ * Gated by check:box-sizing; the resulting boxes are measured by check:geometry.
+ * See ADR-0043. */
+:is(
+  .atl-card,
+  .atl-card-content,
+  .atl-card-footer,
+  .atl-card-header
+),
+:is(
+  .atl-card,
+  .atl-card-content,
+  .atl-card-footer,
+  .atl-card-header
+) * {
+  box-sizing: border-box;
+}
+
 .atl-card {
   display: block;
   border-radius: var(--ui-radius-xl);
@@ -9,11 +29,11 @@
  * outlined or flat. Cards rest on the page; they don't float off it. */
 .atl-card.variant-elevated {
   box-shadow: var(--ui-shadow-sm);
-  border: 1px solid var(--ui-color-border);
+  border: var(--ui-border-width) solid var(--ui-color-border);
 }
 
 .atl-card.variant-outlined {
-  border: 1px solid var(--ui-color-border);
+  border: var(--ui-border-width) solid var(--ui-color-border);
   background-color: var(--ui-color-surface-raised);
 }
 
@@ -52,7 +72,7 @@
   font-size: var(--ui-font-size-lg);
   font-weight: var(--ui-font-weight-semibold);
   color: var(--ui-color-text);
-  border-bottom: 1px solid var(--ui-color-border);
+  border-bottom: var(--ui-border-width) solid var(--ui-color-border);
   letter-spacing: var(--ui-letter-spacing-tight);
 }
 
@@ -66,5 +86,5 @@
   display: flex;
   align-items: center;
   gap: var(--ui-spacing-3);
-  border-top: 1px solid var(--ui-color-border);
+  border-top: var(--ui-border-width) solid var(--ui-color-border);
 }