@atelier-ui/react 0.2.14 → 0.2.15

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

@@ -1,3 +1,29 @@
+/* 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-chat,
+  .atl-chat-header,
+  .atl-chat-input,
+  .atl-chat-message,
+  .atl-chat-messages,
+  .atl-chat-suggestion,
+  .atl-chat-typing
+),
+:is(
+  .atl-chat,
+  .atl-chat-header,
+  .atl-chat-input,
+  .atl-chat-message,
+  .atl-chat-messages,
+  .atl-chat-suggestion,
+  .atl-chat-typing
+) * {
+  box-sizing: border-box;
+}
+
 /* ── Host wrapper ──────────────────────────────────────────────────────────── */
 .atl-chat {
   display: contents;
@@ -70,7 +96,7 @@
   height: 35rem;
   border-radius: var(--ui-radius-xl);
   box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
-  z-index: 100;
+  z-index: var(--ui-z-dropdown);
 }
 
 .atl-chat.variant-popup .fab-bubble {
@@ -111,7 +137,7 @@
   width: 100%;
   height: 100%;
   min-height: 24rem;
-  border: 1px solid var(--ui-color-border);
+  border: var(--ui-border-width) solid var(--ui-color-border);
   border-radius: var(--ui-radius-xl);
 }
 
@@ -128,7 +154,7 @@
   justify-content: space-between;
   gap: var(--ui-spacing-3);
   padding: var(--ui-spacing-3) var(--ui-spacing-4);
-  border-bottom: 1px solid var(--ui-color-border);
+  border-bottom: var(--ui-border-width) solid var(--ui-color-border);
   flex-shrink: 0;
 }
 
@@ -149,11 +175,11 @@
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  width: 2rem;
-  height: 2rem;
+  width: var(--ui-control-height-sm);
+  height: var(--ui-control-height-sm);
   padding: 0;
   background: transparent;
-  border: 1px solid var(--ui-color-border);
+  border: var(--ui-border-width) solid var(--ui-color-border);
   border-radius: var(--ui-radius-sm);
   cursor: pointer;
   color: var(--ui-color-text-muted);
@@ -220,7 +246,7 @@
 
 .atl-chat-message.is-failed {
   background: var(--ui-color-surface-sunken);
-  border: 1px dashed var(--ui-color-danger);
+  border: var(--ui-border-width) dashed var(--ui-color-danger);
   color: var(--ui-color-text);
 }
 
@@ -310,7 +336,7 @@
   padding: var(--ui-spacing-3) var(--ui-spacing-4);
   background: var(--ui-color-surface);
   color: var(--ui-color-text);
-  border: 1px solid var(--ui-color-border);
+  border: var(--ui-border-width) solid var(--ui-color-border);
   border-radius: var(--ui-radius-lg);
   font-family: var(--ui-font-family);
   text-align: left;
@@ -349,7 +375,7 @@
   align-items: flex-end;
   gap: var(--ui-spacing-2);
   padding: var(--ui-spacing-3) var(--ui-spacing-4);
-  border-top: 1px solid var(--ui-color-border);
+  border-top: var(--ui-border-width) solid var(--ui-color-border);
   background: var(--ui-color-surface);
   flex-shrink: 0;
 }
@@ -358,7 +384,7 @@
   flex: 1;
   min-width: 0;
   padding: var(--ui-spacing-2) var(--ui-spacing-3);
-  border: 1px solid var(--ui-color-input-border, var(--ui-color-border));
+  border: var(--ui-border-width) solid var(--ui-color-input-border, var(--ui-color-border));
   border-radius: var(--ui-radius-md);
   background: var(--ui-color-surface-sunken);
   color: var(--ui-color-text);
@@ -394,7 +420,7 @@
   justify-content: center;
   flex-shrink: 0;
   padding: var(--ui-spacing-2) var(--ui-spacing-4);
-  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-sm);

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;AAgBxB;;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,+BAiChC;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;;;;;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"}

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

@@ -1,6 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, useContext, useEffect, useId, useRef, useState, } from 'react';
 import './atl-chat.css';
+import { AtlIcon } from '../icon/atl-icon';
 const ChatContext = createContext({
     headerId: '',
     status: 'idle',
@@ -93,7 +94,7 @@ export function AtlChat({ variant = 'drawer', status = 'idle', open = false, onO
  */
 export function AtlChatHeader({ children, className, ...rest }) {
     const ctx = useContext(ChatContext);
-    return (_jsxs("div", { id: ctx.headerId, className: ['atl-chat-header', className].filter(Boolean).join(' '), ...rest, children: [_jsx("div", { className: "title-block", children: children }), _jsx("button", { type: "button", className: "close-btn", "aria-label": "Close chat", onClick: ctx.close, children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", 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", { id: ctx.headerId, className: ['atl-chat-header', className].filter(Boolean).join(' '), ...rest, children: [_jsx("div", { className: "title-block", children: children }), _jsx("button", { type: "button", className: "close-btn", "aria-label": "Close chat", onClick: ctx.close, children: _jsx(AtlIcon, { name: "close", size: "sm" }) })] }));
 }
 /**
  * Scrollable message list. Project `AtlChatMessage`, `AtlChatTyping`, or

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';\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        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"14\"\n          height=\"14\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2.5\"\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    </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 */\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"]}

package/src/lib/checkbox/atl-checkbox.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-checkbox,
+.atl-checkbox * {
+  box-sizing: border-box;
+}
+
 .atl-checkbox {
   display: block;
   font-family: var(--ui-font-family);
@@ -21,7 +31,7 @@
   flex-shrink: 0;
   width: 1.25rem;
   height: 1.25rem;
-  border: 1.5px solid var(--ui-color-border-strong);
+  border: var(--ui-border-width-thick) solid var(--ui-color-border-strong);
   border-radius: var(--ui-radius-sm);
   background-color: var(--ui-color-input-bg);
   cursor: pointer;
@@ -55,7 +65,7 @@
   margin: auto;
   width: 0.35rem;
   height: 0.6rem;
-  border: 2px solid var(--ui-color-text-on-primary);
+  border: var(--ui-border-width-thick) solid var(--ui-color-text-on-primary);
   border-top: none;
   border-left: none;
   transform: rotate(45deg) translate(-1px, -1px);

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

@@ -25,10 +25,6 @@ export interface AtlCheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElem
      * Array of error messages to display.
      */
     errors?: string[];
-    /**
-     * Whether the checkbox is read-only.
-     */
-    readOnly?: boolean;
     /**
      * The content to be rendered as the label for the checkbox.
      */
@@ -37,5 +33,5 @@ export interface AtlCheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElem
 /**
  * A checkbox component for selecting one or more options.
  */
-export declare function AtlCheckbox({ checked, onCheckedChange, indeterminate, invalid, errors, disabled, readOnly: reactReadOnly, readonly: specReadOnly, required, children, className, id, name, ...rest }: AtlCheckboxProps): import("react").JSX.Element;
+export declare function AtlCheckbox({ checked, onCheckedChange, indeterminate, invalid, errors, disabled, required, children, className, id, name, ...rest }: AtlCheckboxProps): import("react").JSX.Element;
 //# sourceMappingURL=atl-checkbox.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"atl-checkbox.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/checkbox/atl-checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,SAAS,EAA4B,MAAM,OAAO,CAAC;AACjF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,oBAAoB,CAAC;AAE5B;;GAEG;AACH,MAAM,WAAW,gBACf,SAAQ,IAAI,CACR,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,GAAG,OAAO,CACvD,EACD,eAAe;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,EAC1B,OAAe,EACf,eAAe,EACf,aAAqB,EACrB,OAAe,EACf,MAAW,EACX,QAAgB,EAChB,QAAQ,EAAE,aAAa,EACvB,QAAQ,EAAE,YAAY,EACtB,QAAgB,EAChB,QAAQ,EACR,SAAS,EACT,EAAE,EACF,IAAI,EACJ,GAAG,IAAI,EACR,EAAE,gBAAgB,+BAsDlB"}
+{"version":3,"file":"atl-checkbox.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/checkbox/atl-checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,SAAS,EAA4B,MAAM,OAAO,CAAC;AACjF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,oBAAoB,CAAC;AAE5B;;GAEG;AACH,MAAM,WAAW,gBACf,SAAQ,IAAI,CACR,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,GAAG,OAAO,CACvD,EACD,eAAe;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,EAC1B,OAAe,EACf,eAAe,EACf,aAAqB,EACrB,OAAe,EACf,MAAW,EACX,QAAgB,EAChB,QAAgB,EAChB,QAAQ,EACR,SAAS,EACT,EAAE,EACF,IAAI,EACJ,GAAG,IAAI,EACR,EAAE,gBAAgB,+BAoDlB"}

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

@@ -4,8 +4,7 @@ import './atl-checkbox.css';
 /**
  * A checkbox component for selecting one or more options.
  */
-export function AtlCheckbox({ checked = false, onCheckedChange, indeterminate = false, invalid = false, errors = [], disabled = false, readOnly: reactReadOnly, readonly: specReadOnly, required = false, children, className, id, name, ...rest }) {
-    const readOnly = reactReadOnly ?? specReadOnly ?? false;
+export function AtlCheckbox({ checked = false, onCheckedChange, indeterminate = false, invalid = false, errors = [], disabled = false, required = false, children, className, id, name, ...rest }) {
     const inputRef = useRef(null);
     const generatedId = useId();
     const inputId = id || `checkbox-${generatedId}`;
@@ -24,6 +23,6 @@ export function AtlCheckbox({ checked = false, onCheckedChange, indeterminate =
             inputRef.current.indeterminate = indeterminate;
         }
     }, [indeterminate]);
-    return (_jsxs("div", { className: classes, children: [_jsxs("label", { htmlFor: inputId, children: [_jsx("input", { ref: inputRef, type: "checkbox", id: inputId, checked: checked, onChange: (e) => onCheckedChange?.(e.target.checked), disabled: disabled, readOnly: readOnly, required: required, "aria-invalid": invalid || undefined, "aria-required": required || undefined, "aria-describedby": errors.length > 0 ? errorId : undefined, name: name, ...rest }), children] }), errors.length > 0 && (_jsx("div", { className: "errors", id: errorId, "aria-live": "polite", children: errors.map((err, i) => (_jsx("p", { className: "error-message", children: err }, i))) }))] }));
+    return (_jsxs("div", { className: classes, children: [_jsxs("label", { htmlFor: inputId, children: [_jsx("input", { ref: inputRef, type: "checkbox", id: inputId, checked: checked, onChange: (e) => onCheckedChange?.(e.target.checked), disabled: disabled, required: required, "aria-invalid": invalid || undefined, "aria-required": required || undefined, "aria-describedby": errors.length > 0 ? errorId : undefined, name: name, ...rest }), children] }), errors.length > 0 && (_jsx("div", { className: "errors", id: errorId, "aria-live": "polite", children: errors.map((err, i) => (_jsx("p", { className: "error-message", children: err }, i))) }))] }));
 }
 //# sourceMappingURL=atl-checkbox.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"atl-checkbox.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/checkbox/atl-checkbox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAkC,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAEjF,OAAO,oBAAoB,CAAC;AAyC5B;;GAEG;AACH,MAAM,UAAU,WAAW,CAAC,EAC1B,OAAO,GAAG,KAAK,EACf,eAAe,EACf,aAAa,GAAG,KAAK,EACrB,OAAO,GAAG,KAAK,EACf,MAAM,GAAG,EAAE,EACX,QAAQ,GAAG,KAAK,EAChB,QAAQ,EAAE,aAAa,EACvB,QAAQ,EAAE,YAAY,EACtB,QAAQ,GAAG,KAAK,EAChB,QAAQ,EACR,SAAS,EACT,EAAE,EACF,IAAI,EACJ,GAAG,IAAI,EACU;IACjB,MAAM,QAAQ,GAAG,aAAa,IAAI,YAAY,IAAI,KAAK,CAAC;IACxD,MAAM,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAChD,MAAM,WAAW,GAAG,KAAK,EAAE,CAAC;IAC5B,MAAM,OAAO,GAAG,EAAE,IAAI,YAAY,WAAW,EAAE,CAAC;IAChD,MAAM,OAAO,GAAG,GAAG,OAAO,SAAS,CAAC;IAEpC,MAAM,OAAO,GAAG;QACd,cAAc;QACd,OAAO,IAAI,YAAY;QACvB,OAAO,IAAI,YAAY;QACvB,QAAQ,IAAI,aAAa;QACzB,SAAS;KACV;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,QAAQ,CAAC,OAAO,EAAE,CAAC;YACrB,QAAQ,CAAC,OAAO,CAAC,aAAa,GAAG,aAAa,CAAC;QACjD,CAAC;IACH,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,OAAO,CACL,eAAK,SAAS,EAAE,OAAO,aACrB,iBAAO,OAAO,EAAE,OAAO,aACrB,gBACE,GAAG,EAAE,QAAQ,EACb,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,OAAO,EACX,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,eAAe,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,EACpD,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,kBACJ,OAAO,IAAI,SAAS,mBACnB,QAAQ,IAAI,SAAS,sBAClB,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EACzD,IAAI,EAAE,IAAI,KACN,IAAI,GACR,EACD,QAAQ,IACH,EACP,MAAM,CAAC,MAAM,GAAG,CAAC,IAAI,CACpB,cAAK,SAAS,EAAC,QAAQ,EAAC,EAAE,EAAE,OAAO,eAAY,QAAQ,YACpD,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC,CACtB,YAAW,SAAS,EAAC,eAAe,YACjC,GAAG,IADE,CAAC,CAEL,CACL,CAAC,GACE,CACP,IACG,CACP,CAAC;AACJ,CAAC","sourcesContent":["import { InputHTMLAttributes, ReactNode, useRef, useEffect, useId } from 'react';\nimport type { AtlCheckboxSpec } from '../spec';\nimport './atl-checkbox.css';\n\n/**\n * Properties for the AtlCheckbox component.\n */\nexport interface AtlCheckboxProps\n  extends Omit<\n      InputHTMLAttributes<HTMLInputElement>,\n      'type' | 'checked' | 'onChange' | 'readOnly' | 'value'\n    >,\n    AtlCheckboxSpec {\n  /**\n   * Whether the checkbox is checked.\n   */\n  checked?: boolean;\n  /**\n   * Callback triggered when the checked state changes.\n   */\n  onCheckedChange?: (checked: boolean) => void;\n  /**\n   * Whether the checkbox is in an indeterminate state.\n   */\n  indeterminate?: boolean;\n  /**\n   * Whether the checkbox is in an invalid state.\n   */\n  invalid?: boolean;\n  /**\n   * Array of error messages to display.\n   */\n  errors?: string[];\n  /**\n   * Whether the checkbox is read-only.\n   */\n  readOnly?: boolean;\n  /**\n   * The content to be rendered as the label for the checkbox.\n   */\n  children?: ReactNode;\n}\n\n/**\n * A checkbox component for selecting one or more options.\n */\nexport function AtlCheckbox({\n  checked = false,\n  onCheckedChange,\n  indeterminate = false,\n  invalid = false,\n  errors = [],\n  disabled = false,\n  readOnly: reactReadOnly,\n  readonly: specReadOnly,\n  required = false,\n  children,\n  className,\n  id,\n  name,\n  ...rest\n}: AtlCheckboxProps) {\n  const readOnly = reactReadOnly ?? specReadOnly ?? false;\n  const inputRef = useRef<HTMLInputElement>(null);\n  const generatedId = useId();\n  const inputId = id || `checkbox-${generatedId}`;\n  const errorId = `${inputId}-errors`;\n\n  const classes = [\n    'atl-checkbox',\n    checked && 'is-checked',\n    invalid && 'is-invalid',\n    disabled && 'is-disabled',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  useEffect(() => {\n    if (inputRef.current) {\n      inputRef.current.indeterminate = indeterminate;\n    }\n  }, [indeterminate]);\n\n  return (\n    <div className={classes}>\n      <label htmlFor={inputId}>\n        <input\n          ref={inputRef}\n          type=\"checkbox\"\n          id={inputId}\n          checked={checked}\n          onChange={(e) => onCheckedChange?.(e.target.checked)}\n          disabled={disabled}\n          readOnly={readOnly}\n          required={required}\n          aria-invalid={invalid || undefined}\n          aria-required={required || undefined}\n          aria-describedby={errors.length > 0 ? errorId : undefined}\n          name={name}\n          {...rest}\n        />\n        {children}\n      </label>\n      {errors.length > 0 && (\n        <div className=\"errors\" id={errorId} aria-live=\"polite\">\n          {errors.map((err, i) => (\n            <p key={i} className=\"error-message\">\n              {err}\n            </p>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"atl-checkbox.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/checkbox/atl-checkbox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAkC,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAEjF,OAAO,oBAAoB,CAAC;AAqC5B;;GAEG;AACH,MAAM,UAAU,WAAW,CAAC,EAC1B,OAAO,GAAG,KAAK,EACf,eAAe,EACf,aAAa,GAAG,KAAK,EACrB,OAAO,GAAG,KAAK,EACf,MAAM,GAAG,EAAE,EACX,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,QAAQ,EACR,SAAS,EACT,EAAE,EACF,IAAI,EACJ,GAAG,IAAI,EACU;IACjB,MAAM,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAChD,MAAM,WAAW,GAAG,KAAK,EAAE,CAAC;IAC5B,MAAM,OAAO,GAAG,EAAE,IAAI,YAAY,WAAW,EAAE,CAAC;IAChD,MAAM,OAAO,GAAG,GAAG,OAAO,SAAS,CAAC;IAEpC,MAAM,OAAO,GAAG;QACd,cAAc;QACd,OAAO,IAAI,YAAY;QACvB,OAAO,IAAI,YAAY;QACvB,QAAQ,IAAI,aAAa;QACzB,SAAS;KACV;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,QAAQ,CAAC,OAAO,EAAE,CAAC;YACrB,QAAQ,CAAC,OAAO,CAAC,aAAa,GAAG,aAAa,CAAC;QACjD,CAAC;IACH,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,OAAO,CACL,eAAK,SAAS,EAAE,OAAO,aACrB,iBAAO,OAAO,EAAE,OAAO,aACrB,gBACE,GAAG,EAAE,QAAQ,EACb,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,OAAO,EACX,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,eAAe,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,EACpD,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,kBACJ,OAAO,IAAI,SAAS,mBACnB,QAAQ,IAAI,SAAS,sBAClB,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EACzD,IAAI,EAAE,IAAI,KACN,IAAI,GACR,EACD,QAAQ,IACH,EACP,MAAM,CAAC,MAAM,GAAG,CAAC,IAAI,CACpB,cAAK,SAAS,EAAC,QAAQ,EAAC,EAAE,EAAE,OAAO,eAAY,QAAQ,YACpD,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC,CACtB,YAAW,SAAS,EAAC,eAAe,YACjC,GAAG,IADE,CAAC,CAEL,CACL,CAAC,GACE,CACP,IACG,CACP,CAAC;AACJ,CAAC","sourcesContent":["import { InputHTMLAttributes, ReactNode, useRef, useEffect, useId } from 'react';\nimport type { AtlCheckboxSpec } from '../spec';\nimport './atl-checkbox.css';\n\n/**\n * Properties for the AtlCheckbox component.\n */\nexport interface AtlCheckboxProps\n  extends Omit<\n      InputHTMLAttributes<HTMLInputElement>,\n      'type' | 'checked' | 'onChange' | 'readOnly' | 'value'\n    >,\n    AtlCheckboxSpec {\n  /**\n   * Whether the checkbox is checked.\n   */\n  checked?: boolean;\n  /**\n   * Callback triggered when the checked state changes.\n   */\n  onCheckedChange?: (checked: boolean) => void;\n  /**\n   * Whether the checkbox is in an indeterminate state.\n   */\n  indeterminate?: boolean;\n  /**\n   * Whether the checkbox is in an invalid state.\n   */\n  invalid?: boolean;\n  /**\n   * Array of error messages to display.\n   */\n  errors?: string[];\n  /**\n   * The content to be rendered as the label for the checkbox.\n   */\n  children?: ReactNode;\n}\n\n/**\n * A checkbox component for selecting one or more options.\n */\nexport function AtlCheckbox({\n  checked = false,\n  onCheckedChange,\n  indeterminate = false,\n  invalid = false,\n  errors = [],\n  disabled = false,\n  required = false,\n  children,\n  className,\n  id,\n  name,\n  ...rest\n}: AtlCheckboxProps) {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const generatedId = useId();\n  const inputId = id || `checkbox-${generatedId}`;\n  const errorId = `${inputId}-errors`;\n\n  const classes = [\n    'atl-checkbox',\n    checked && 'is-checked',\n    invalid && 'is-invalid',\n    disabled && 'is-disabled',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  useEffect(() => {\n    if (inputRef.current) {\n      inputRef.current.indeterminate = indeterminate;\n    }\n  }, [indeterminate]);\n\n  return (\n    <div className={classes}>\n      <label htmlFor={inputId}>\n        <input\n          ref={inputRef}\n          type=\"checkbox\"\n          id={inputId}\n          checked={checked}\n          onChange={(e) => onCheckedChange?.(e.target.checked)}\n          disabled={disabled}\n          required={required}\n          aria-invalid={invalid || undefined}\n          aria-required={required || undefined}\n          aria-describedby={errors.length > 0 ? errorId : undefined}\n          name={name}\n          {...rest}\n        />\n        {children}\n      </label>\n      {errors.length > 0 && (\n        <div className=\"errors\" id={errorId} aria-live=\"polite\">\n          {errors.map((err, i) => (\n            <p key={i} className=\"error-message\">\n              {err}\n            </p>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n"]}

package/src/lib/code-block/atl-code-block.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-code-block,
+.atl-code-block * {
+  box-sizing: border-box;
+}
+
 /* ============================================================
    atl-code-block.css
    ============================================================ */
 
 .atl-code-block {
   display: block;
-  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;
   font-family: var(--ui-font-family);
@@ -18,10 +28,19 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: var(--ui-spacing-3) var(--ui-spacing-4);
+  /* No block padding: the row is a centred flex line, so `min-height` alone
+   * decides the height. Authoring 12+12 around the 0.72rem mono label rendered
+   * 43px against a 40px token, and deriving the padding from the label's metrics
+   * only moves the guess — the label's line box is not the header's business.
+   * See ADR-0047. */
+  /* Stated, not inherited: an inherited line-height makes the box grow with the
+   * text metrics, which is how three controls measured right on one machine and
+   * wrong on another (ADR-0048). */
+  line-height: var(--ui-line-height-tight);
+  padding: 0 var(--ui-spacing-4);
   background: var(--ui-color-surface-raised);
-  border-bottom: 1px solid var(--ui-color-border);
-  min-height: 2.5rem;
+  border-bottom: var(--ui-border-width) solid var(--ui-color-border);
+  min-height: var(--ui-control-height-md);
 }
 
 .code-block-label {
@@ -43,7 +62,7 @@
   align-items: center;
   gap: 0.3rem;
   padding: 0.2rem 0.55rem;
-  border: 1px solid var(--ui-color-border);
+  border: var(--ui-border-width) solid var(--ui-color-border);
   border-radius: var(--ui-radius-sm);
   background: transparent;
   color: var(--ui-color-text-muted);
@@ -101,7 +120,7 @@
   color: var(--ui-color-text-muted);
   text-align: right;
   user-select: none;
-  border-right: 1px solid var(--ui-color-border);
+  border-right: var(--ui-border-width) solid var(--ui-color-border);
   margin-right: var(--ui-spacing-3);
   flex-shrink: 0;
   opacity: 0.6;

package/src/lib/code-block/atl-code-block.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"atl-code-block.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/code-block/atl-code-block.tsx"],"names":[],"mappings":"AACA,OAAO,sBAAsB,CAAC;AAE9B,MAAM,WAAW,iBAAiB;IAChC,kCAAkC;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,sEAAsE;IACtE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0DAA0D;IAC1D,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,QAAiB,EACjB,QAAQ,EACR,QAAe,EACf,eAAuB,GACxB,EAAE,iBAAiB,+BA2DnB"}
+{"version":3,"file":"atl-code-block.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/code-block/atl-code-block.tsx"],"names":[],"mappings":"AACA,OAAO,sBAAsB,CAAC;AAG9B,MAAM,WAAW,iBAAiB;IAChC,kCAAkC;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,sEAAsE;IACtE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0DAA0D;IAC1D,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,QAAiB,EACjB,QAAQ,EACR,QAAe,EACf,eAAuB,GACxB,EAAE,iBAAiB,+BAsDnB"}

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

@@ -1,6 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import './atl-code-block.css';
+import { AtlIcon } from '../icon/atl-icon';
 export function AtlCodeBlock({ code, language = 'text', filename, copyable = true, showLineNumbers = false, }) {
     const [copied, setCopied] = useState(false);
     const displayLabel = filename || language;
@@ -11,7 +12,7 @@ export function AtlCodeBlock({ code, language = 'text', filename, copyable = tru
             setTimeout(() => setCopied(false), 1800);
         });
     }
-    return (_jsxs("div", { className: "atl-code-block", children: [_jsxs("div", { className: "code-block-header", children: [_jsx("span", { className: "code-block-label", children: displayLabel }), copyable && (_jsx("button", { className: "code-block-copy", type: "button", "aria-label": copied ? 'Copied' : 'Copy code', onClick: handleCopy, children: copied ? (_jsxs(_Fragment, { children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("polyline", { points: "20 6 9 17 4 12" }) }), "Copied"] })) : (_jsxs(_Fragment, { children: [_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }), _jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })] }), "Copy"] })) }))] }), _jsx("div", { className: "code-block-body", children: _jsx("pre", { className: "code-block-pre", children: _jsx("code", { children: showLineNumbers
+    return (_jsxs("div", { className: "atl-code-block", children: [_jsxs("div", { className: "code-block-header", children: [_jsx("span", { className: "code-block-label", children: displayLabel }), copyable && (_jsx("button", { className: "code-block-copy", type: "button", "aria-label": copied ? 'Copied' : 'Copy code', onClick: handleCopy, children: copied ? (_jsxs(_Fragment, { children: [_jsx(AtlIcon, { name: "check", size: "sm" }), "Copied"] })) : (_jsxs(_Fragment, { children: [_jsx(AtlIcon, { name: "copy", size: "sm" }), "Copy"] })) }))] }), _jsx("div", { className: "code-block-body", children: _jsx("pre", { className: "code-block-pre", children: _jsx("code", { children: showLineNumbers
                             ? lines.map((line, i) => (_jsxs("span", { className: "code-line", children: [_jsx("span", { className: "code-line-number", children: i + 1 }), _jsx("span", { className: "code-line-text", children: line })] }, i)))
                             : code }) }) })] }));
 }

package/src/lib/code-block/atl-code-block.js.map

@@ -1 +1 @@
-{"version":3,"file":"atl-code-block.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/code-block/atl-code-block.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,sBAAsB,CAAC;AAe9B,MAAM,UAAU,YAAY,CAAC,EAC3B,IAAI,EACJ,QAAQ,GAAG,MAAM,EACjB,QAAQ,EACR,QAAQ,GAAG,IAAI,EACf,eAAe,GAAG,KAAK,GACL;IAClB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5C,MAAM,YAAY,GAAG,QAAQ,IAAI,QAAQ,CAAC;IAC1C,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAE/B,SAAS,UAAU;QACjB,KAAK,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE;YACjD,SAAS,CAAC,IAAI,CAAC,CAAC;YAChB,UAAU,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,CAAC;QAC3C,CAAC,CAAC,CAAC;IACL,CAAC;IAED,OAAO,CACL,eAAK,SAAS,EAAC,gBAAgB,aAC7B,eAAK,SAAS,EAAC,mBAAmB,aAChC,eAAM,SAAS,EAAC,kBAAkB,YAAE,YAAY,GAAQ,EACvD,QAAQ,IAAI,CACX,iBACE,SAAS,EAAC,iBAAiB,EAC3B,IAAI,EAAC,QAAQ,gBACD,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,EAC3C,OAAO,EAAE,UAAU,YAElB,MAAM,CAAC,CAAC,CAAC,CACR,8BACE,cAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,EAAC,WAAW,EAAC,KAAK,EAAC,aAAa,EAAC,OAAO,EAAC,cAAc,EAAC,OAAO,iBAAa,MAAM,YACpM,mBAAU,MAAM,EAAC,gBAAgB,GAAG,GAChC,cAEL,CACJ,CAAC,CAAC,CAAC,CACF,8BACE,eAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,EAAC,WAAW,EAAC,GAAG,EAAC,aAAa,EAAC,OAAO,EAAC,cAAc,EAAC,OAAO,iBAAa,MAAM,aAClM,eAAM,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,GAAG,EACzD,eAAM,CAAC,EAAC,yDAAyD,GAAG,IAChE,YAEL,CACJ,GACM,CACV,IACG,EACN,cAAK,SAAS,EAAC,iBAAiB,YAC9B,cAAK,SAAS,EAAC,gBAAgB,YAC7B,yBACG,eAAe;4BACd,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,CACrB,gBAAc,SAAS,EAAC,WAAW,aACjC,eAAM,SAAS,EAAC,kBAAkB,YAAE,CAAC,GAAG,CAAC,GAAQ,EACjD,eAAM,SAAS,EAAC,gBAAgB,YAAE,IAAI,GAAQ,KAFrC,CAAC,CAGL,CACR,CAAC;4BACJ,CAAC,CAAC,IAAI,GACH,GACH,GACF,IACF,CACP,CAAC;AACJ,CAAC","sourcesContent":["import { useState } from 'react';\nimport './atl-code-block.css';\n\nexport interface AtlCodeBlockProps {\n  /** The code string to display. */\n  code: string;\n  /** Language label shown in the header. Ignored if filename is set. */\n  language?: string;\n  /** Optional filename shown in the header instead of the language label. */\n  filename?: string;\n  /** Whether to show a copy-to-clipboard button. */\n  copyable?: boolean;\n  /** Whether to display line numbers alongside the code. */\n  showLineNumbers?: boolean;\n}\n\nexport function AtlCodeBlock({\n  code,\n  language = 'text',\n  filename,\n  copyable = true,\n  showLineNumbers = false,\n}: AtlCodeBlockProps) {\n  const [copied, setCopied] = useState(false);\n\n  const displayLabel = filename || language;\n  const lines = code.split('\\n');\n\n  function handleCopy() {\n    void navigator.clipboard.writeText(code).then(() => {\n      setCopied(true);\n      setTimeout(() => setCopied(false), 1800);\n    });\n  }\n\n  return (\n    <div className=\"atl-code-block\">\n      <div className=\"code-block-header\">\n        <span className=\"code-block-label\">{displayLabel}</span>\n        {copyable && (\n          <button\n            className=\"code-block-copy\"\n            type=\"button\"\n            aria-label={copied ? 'Copied' : 'Copy code'}\n            onClick={handleCopy}\n          >\n            {copied ? (\n              <>\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n                  <polyline points=\"20 6 9 17 4 12\" />\n                </svg>\n                Copied\n              </>\n            ) : (\n              <>\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n                  <rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\" />\n                  <path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\" />\n                </svg>\n                Copy\n              </>\n            )}\n          </button>\n        )}\n      </div>\n      <div className=\"code-block-body\">\n        <pre className=\"code-block-pre\">\n          <code>\n            {showLineNumbers\n              ? lines.map((line, i) => (\n                  <span key={i} className=\"code-line\">\n                    <span className=\"code-line-number\">{i + 1}</span>\n                    <span className=\"code-line-text\">{line}</span>\n                  </span>\n                ))\n              : code}\n          </code>\n        </pre>\n      </div>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"atl-code-block.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/code-block/atl-code-block.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAe3C,MAAM,UAAU,YAAY,CAAC,EAC3B,IAAI,EACJ,QAAQ,GAAG,MAAM,EACjB,QAAQ,EACR,QAAQ,GAAG,IAAI,EACf,eAAe,GAAG,KAAK,GACL;IAClB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5C,MAAM,YAAY,GAAG,QAAQ,IAAI,QAAQ,CAAC;IAC1C,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAE/B,SAAS,UAAU;QACjB,KAAK,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE;YACjD,SAAS,CAAC,IAAI,CAAC,CAAC;YAChB,UAAU,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,CAAC;QAC3C,CAAC,CAAC,CAAC;IACL,CAAC;IAED,OAAO,CACL,eAAK,SAAS,EAAC,gBAAgB,aAC7B,eAAK,SAAS,EAAC,mBAAmB,aAChC,eAAM,SAAS,EAAC,kBAAkB,YAAE,YAAY,GAAQ,EACvD,QAAQ,IAAI,CACX,iBACE,SAAS,EAAC,iBAAiB,EAC3B,IAAI,EAAC,QAAQ,gBACD,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,EAC3C,OAAO,EAAE,UAAU,YAElB,MAAM,CAAC,CAAC,CAAC,CACR,8BACE,KAAC,OAAO,IAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,IAAI,GAAG,cAEjC,CACJ,CAAC,CAAC,CAAC,CACF,8BACE,KAAC,OAAO,IAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,GAAG,YAEhC,CACJ,GACM,CACV,IACG,EACN,cAAK,SAAS,EAAC,iBAAiB,YAC9B,cAAK,SAAS,EAAC,gBAAgB,YAC7B,yBACG,eAAe;4BACd,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,CACrB,gBAAc,SAAS,EAAC,WAAW,aACjC,eAAM,SAAS,EAAC,kBAAkB,YAAE,CAAC,GAAG,CAAC,GAAQ,EACjD,eAAM,SAAS,EAAC,gBAAgB,YAAE,IAAI,GAAQ,KAFrC,CAAC,CAGL,CACR,CAAC;4BACJ,CAAC,CAAC,IAAI,GACH,GACH,GACF,IACF,CACP,CAAC;AACJ,CAAC","sourcesContent":["import { useState } from 'react';\nimport './atl-code-block.css';\nimport { AtlIcon } from '../icon/atl-icon';\n\nexport interface AtlCodeBlockProps {\n  /** The code string to display. */\n  code: string;\n  /** Language label shown in the header. Ignored if filename is set. */\n  language?: string;\n  /** Optional filename shown in the header instead of the language label. */\n  filename?: string;\n  /** Whether to show a copy-to-clipboard button. */\n  copyable?: boolean;\n  /** Whether to display line numbers alongside the code. */\n  showLineNumbers?: boolean;\n}\n\nexport function AtlCodeBlock({\n  code,\n  language = 'text',\n  filename,\n  copyable = true,\n  showLineNumbers = false,\n}: AtlCodeBlockProps) {\n  const [copied, setCopied] = useState(false);\n\n  const displayLabel = filename || language;\n  const lines = code.split('\\n');\n\n  function handleCopy() {\n    void navigator.clipboard.writeText(code).then(() => {\n      setCopied(true);\n      setTimeout(() => setCopied(false), 1800);\n    });\n  }\n\n  return (\n    <div className=\"atl-code-block\">\n      <div className=\"code-block-header\">\n        <span className=\"code-block-label\">{displayLabel}</span>\n        {copyable && (\n          <button\n            className=\"code-block-copy\"\n            type=\"button\"\n            aria-label={copied ? 'Copied' : 'Copy code'}\n            onClick={handleCopy}\n          >\n            {copied ? (\n              <>\n                <AtlIcon name=\"check\" size=\"sm\" />\n                Copied\n              </>\n            ) : (\n              <>\n                <AtlIcon name=\"copy\" size=\"sm\" />\n                Copy\n              </>\n            )}\n          </button>\n        )}\n      </div>\n      <div className=\"code-block-body\">\n        <pre className=\"code-block-pre\">\n          <code>\n            {showLineNumbers\n              ? lines.map((line, i) => (\n                  <span key={i} className=\"code-line\">\n                    <span className=\"code-line-number\">{i + 1}</span>\n                    <span className=\"code-line-text\">{line}</span>\n                  </span>\n                ))\n              : code}\n          </code>\n        </pre>\n      </div>\n    </div>\n  );\n}\n"]}

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

@@ -1,3 +1,35 @@
+/* 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-combobox,
+  .atl-combobox-check,
+  .atl-combobox-error-message,
+  .atl-combobox-errors,
+  .atl-combobox-icon,
+  .atl-combobox-input,
+  .atl-combobox-no-results,
+  .atl-combobox-option,
+  .atl-combobox-panel,
+  .atl-combobox-wrapper
+),
+:is(
+  .atl-combobox,
+  .atl-combobox-check,
+  .atl-combobox-error-message,
+  .atl-combobox-errors,
+  .atl-combobox-icon,
+  .atl-combobox-input,
+  .atl-combobox-no-results,
+  .atl-combobox-option,
+  .atl-combobox-panel,
+  .atl-combobox-wrapper
+) * {
+  box-sizing: border-box;
+}
+
 /* ============================================================
    atl-combobox.css
    ============================================================ */
@@ -20,14 +52,25 @@
 
 .atl-combobox-input {
   width: 100%;
-  min-height: 2.5rem;
+  min-height: var(--ui-control-height-md);
   box-sizing: border-box;
-  padding: 0.625rem var(--ui-spacing-8) 0.625rem var(--ui-spacing-4);
+  /* Control line-height plus padding derived from the height, so the box does not
+   * depend on which font is installed. Authored 0.625rem padding with an inherited
+   * line-height rendered 40px with Instrument Sans and 41px with the fallback — the
+   * defect only appeared in CI. See ADR-0048. */
+  line-height: var(--ui-line-height-tight);
+  padding: calc(
+      (var(--ui-control-height-md) - var(--ui-line-height-tight) * var(--ui-font-size-md)) / 2 -
+        var(--ui-border-width)
+    ) var(--ui-spacing-8) calc(
+      (var(--ui-control-height-md) - var(--ui-line-height-tight) * var(--ui-font-size-md)) / 2 -
+        var(--ui-border-width)
+    ) var(--ui-spacing-4);
   font-family: inherit;
   font-size: inherit;
   color: var(--ui-color-text);
   background-color: var(--ui-color-input-bg);
-  border: 1px solid var(--ui-color-input-border);
+  border: var(--ui-border-width) solid var(--ui-color-input-border);
   border-radius: var(--ui-radius-md);
   outline: none;
   transition:
@@ -99,10 +142,10 @@
   margin: 0;
   padding: var(--ui-spacing-2) 0;
   background-color: var(--ui-color-surface-raised);
-  border: 1px solid var(--ui-color-border);
+  border: var(--ui-border-width) solid var(--ui-color-border);
   border-radius: var(--ui-radius-md);
   box-shadow: var(--ui-shadow-lg);
-  z-index: 100;
+  z-index: var(--ui-z-dropdown);
   list-style: none;
 }
 
@@ -167,3 +210,11 @@
   color: var(--ui-color-error-text);
   line-height: var(--ui-line-height-normal);
 }
+
+/* Readonly state — content, not a control: the interactive edge goes away while
+ * the filled surface stays. Transparent rather than removed so the 1px border
+ * keeps its space and the height stays put (ADR-0045). */
+.atl-combobox.is-readonly .atl-combobox-input {
+  border-color: transparent;
+  cursor: default;
+}

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

@@ -1 +1 @@
-{"version":3,"file":"atl-combobox.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/combobox/atl-combobox.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAClE,OAAO,oBAAoB,CAAC;AAE5B,YAAY,EAAE,iBAAiB,EAAE,CAAC;AAElC,MAAM,WAAW,gBAAiB,SAAQ,eAAe;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;CACnB;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAU,EACV,aAAa,EACb,OAAY,EACZ,WAAgB,EAChB,QAAgB,EAChB,QAAgB,EAChB,OAAe,EACf,QAAgB,EAChB,IAAI,EACJ,MAAW,GACZ,EAAE,gBAAgB,+BA2MlB"}
+{"version":3,"file":"atl-combobox.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/combobox/atl-combobox.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAClE,OAAO,oBAAoB,CAAC;AAG5B,YAAY,EAAE,iBAAiB,EAAE,CAAC;AAElC,MAAM,WAAW,gBAAiB,SAAQ,eAAe;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;CACnB;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAU,EACV,aAAa,EACb,OAAY,EACZ,WAAgB,EAChB,QAAgB,EAChB,QAAgB,EAChB,OAAe,EACf,QAAgB,EAChB,IAAI,EACJ,MAAW,GACZ,EAAE,gBAAgB,+BAwMlB"}

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

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useId, useMemo, useRef, useState } from 'react';
 import './atl-combobox.css';
+import { AtlIcon } from '../icon/atl-icon';
 /**
  * Filterable autocomplete combobox. Accepts an `options` array and emits the
  * selected option's `value`. The user types to narrow the list; selecting an
@@ -122,18 +123,19 @@ export function AtlCombobox({ value = '', onValueChange, options = [], placehold
         'atl-combobox',
         isOpen && 'is-open',
         disabled && 'is-disabled',
+        readonly && 'is-readonly',
         invalid && 'is-invalid',
     ]
         .filter(Boolean)
         .join(' ');
     const activeOptionId = activeIndex >= 0 ? `${panelId}-option-${activeIndex}` : undefined;
-    return (_jsxs("div", { className: classes, ref: containerRef, children: [_jsxs("div", { className: "atl-combobox-wrapper", children: [_jsx("input", { ref: inputRef, className: "atl-combobox-input", type: "text", autoComplete: "off", role: "combobox", id: inputId, "aria-expanded": isOpen, "aria-controls": panelId, "aria-autocomplete": "list", "aria-activedescendant": activeOptionId, "aria-invalid": invalid || undefined, disabled: disabled, readOnly: readonly, required: required, name: name, placeholder: placeholder, value: displayValue, onChange: handleInput, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeydown }), _jsx("span", { className: "atl-combobox-icon", "aria-hidden": "true", children: _jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", children: _jsx("path", { d: "M2 4l4 4 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] }), isOpen && (_jsx("ul", { id: panelId, className: "atl-combobox-panel", role: "listbox", "aria-labelledby": inputId, children: filteredOptions.length > 0 ? (filteredOptions.map((option, i) => (_jsxs("li", { id: `${panelId}-option-${i}`, role: "option", className: [
+    return (_jsxs("div", { className: classes, ref: containerRef, children: [_jsxs("div", { className: "atl-combobox-wrapper", children: [_jsx("input", { ref: inputRef, className: "atl-combobox-input", type: "text", autoComplete: "off", role: "combobox", id: inputId, "aria-expanded": isOpen, "aria-controls": panelId, "aria-autocomplete": "list", "aria-activedescendant": activeOptionId, "aria-invalid": invalid || undefined, disabled: disabled, readOnly: readonly, required: required, name: name, placeholder: placeholder, value: displayValue, onChange: handleInput, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeydown }), _jsx("span", { className: "atl-combobox-icon", "aria-hidden": "true", children: _jsx(AtlIcon, { name: "chevron-down", size: "sm" }) })] }), isOpen && (_jsx("ul", { id: panelId, className: "atl-combobox-panel", role: "listbox", "aria-labelledby": inputId, children: filteredOptions.length > 0 ? (filteredOptions.map((option, i) => (_jsxs("li", { id: `${panelId}-option-${i}`, role: "option", className: [
                         'atl-combobox-option',
                         activeIndex === i && 'is-active',
                         option.value === value && 'is-selected',
                         option.disabled && 'is-disabled',
                     ]
                         .filter(Boolean)
-                        .join(' '), "aria-selected": option.value === value, "aria-disabled": option.disabled || undefined, onMouseDown: () => selectOption(option), onMouseEnter: () => setActiveIndex(i), children: [_jsx("span", { children: option.label }), option.value === value && (_jsx("svg", { className: "atl-combobox-check", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M2 7l4 4 6-7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }))] }, option.value)))) : (_jsx("li", { className: "atl-combobox-no-results", role: "option", "aria-selected": false, "aria-disabled": "true", children: "No results found." })) })), invalid && errors.length > 0 && (_jsx("div", { className: "atl-combobox-errors", role: "alert", "aria-live": "polite", children: errors.map((e, i) => (_jsx("p", { className: "atl-combobox-error-message", children: e }, i))) }))] }));
+                        .join(' '), "aria-selected": option.value === value, "aria-disabled": option.disabled || undefined, onMouseDown: () => selectOption(option), onMouseEnter: () => setActiveIndex(i), children: [_jsx("span", { children: option.label }), option.value === value && (_jsx(AtlIcon, { name: "check", size: "sm", className: "atl-combobox-check" }))] }, option.value)))) : (_jsx("li", { className: "atl-combobox-no-results", role: "option", "aria-selected": false, "aria-disabled": "true", children: "No results found." })) })), invalid && errors.length > 0 && (_jsx("div", { className: "atl-combobox-errors", role: "alert", "aria-live": "polite", children: errors.map((e, i) => (_jsx("p", { className: "atl-combobox-error-message", children: e }, i))) }))] }));
 }
 //# sourceMappingURL=atl-combobox.js.map