@atelier-ui/react 0.2.14 → 0.2.15

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

@@ -1 +1 @@
-{"version":3,"file":"atl-combobox.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/combobox/atl-combobox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useId, useMemo, useRef, useState } from 'react';\nimport type { AtlComboboxOption, AtlComboboxSpec } from '../spec';\nimport './atl-combobox.css';\n\nexport type { AtlComboboxOption };\n\nexport interface AtlComboboxProps extends AtlComboboxSpec {\n  value?: string;\n  onValueChange?: (value: string) => void;\n  errors?: string[];\n}\n\n/**\n * Filterable autocomplete combobox. Accepts an `options` array and emits the\n * selected option's `value`. The user types to narrow the list; selecting an\n * option commits the value and displays its label.\n *\n * Usage:\n * ```tsx\n * <AtlCombobox\n *   value={country}\n *   onValueChange={setCountry}\n *   options={countryOptions}\n *   placeholder=\"Search country…\"\n * />\n * ```\n */\nexport function AtlCombobox({\n  value = '',\n  onValueChange,\n  options = [],\n  placeholder = '',\n  disabled = false,\n  readonly = false,\n  invalid = false,\n  required = false,\n  name,\n  errors = [],\n}: AtlComboboxProps) {\n  const [query, setQuery] = useState('');\n  const [isOpen, setIsOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState(-1);\n\n  const inputRef = useRef<HTMLInputElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const inputId = useId();\n  const panelId = useId();\n\n  const selectedLabel = useMemo(\n    () => options.find((o) => o.value === value)?.label ?? '',\n    [options, value],\n  );\n\n  const filteredOptions = useMemo(() => {\n    if (!query) return options;\n    const q = query.toLowerCase();\n    return options.filter((o) => o.label.toLowerCase().includes(q));\n  }, [options, query]);\n\n  const displayValue = isOpen ? query : selectedLabel;\n\n  // Outside-click closes panel\n  useEffect(() => {\n    if (!isOpen) return;\n    function handleClick(e: MouseEvent) {\n      if (!containerRef.current?.contains(e.target as Node)) {\n        setIsOpen(false);\n        setQuery(selectedLabel);\n      }\n    }\n    document.addEventListener('click', handleClick);\n    return () => document.removeEventListener('click', handleClick);\n  }, [isOpen, selectedLabel]);\n\n  function open() {\n    if (disabled || readonly) return;\n    setQuery(selectedLabel);\n    setIsOpen(true);\n    setActiveIndex(-1);\n  }\n\n  function close() {\n    setIsOpen(false);\n    setActiveIndex(-1);\n  }\n\n  function selectOption(option: AtlComboboxOption) {\n    if (option.disabled || disabled || readonly) return;\n    onValueChange?.(option.value);\n    setQuery(option.label);\n    close();\n    inputRef.current?.focus();\n  }\n\n  function handleInput(e: React.ChangeEvent<HTMLInputElement>) {\n    const q = e.target.value;\n    setQuery(q);\n    setActiveIndex(-1);\n    if (q === '') onValueChange?.('');\n    if (!isOpen) open();\n  }\n\n  function handleFocus() {\n    open();\n  }\n\n  function handleBlur() {\n    setQuery(selectedLabel);\n  }\n\n  function handleKeydown(e: React.KeyboardEvent) {\n    switch (e.key) {\n      case 'ArrowDown': {\n        e.preventDefault();\n        if (!isOpen) { open(); return; }\n        setActiveIndex((i) => (i + 1 >= filteredOptions.length ? 0 : i + 1));\n        break;\n      }\n      case 'ArrowUp': {\n        e.preventDefault();\n        if (!isOpen) { open(); return; }\n        setActiveIndex((i) => (i - 1 < 0 ? filteredOptions.length - 1 : i - 1));\n        break;\n      }\n      case 'Enter': {\n        e.preventDefault();\n        if (isOpen && activeIndex >= 0 && activeIndex < filteredOptions.length) {\n          selectOption(filteredOptions[activeIndex]);\n        }\n        break;\n      }\n      case 'Escape': {\n        e.preventDefault();\n        setQuery(selectedLabel);\n        close();\n        break;\n      }\n      case 'Tab': {\n        close();\n        break;\n      }\n    }\n  }\n\n  const classes = [\n    'atl-combobox',\n    isOpen && 'is-open',\n    disabled && 'is-disabled',\n    invalid && 'is-invalid',\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const activeOptionId =\n    activeIndex >= 0 ? `${panelId}-option-${activeIndex}` : undefined;\n\n  return (\n    <div className={classes} ref={containerRef}>\n      <div className=\"atl-combobox-wrapper\">\n        <input\n          ref={inputRef}\n          className=\"atl-combobox-input\"\n          type=\"text\"\n          autoComplete=\"off\"\n          role=\"combobox\"\n          id={inputId}\n          aria-expanded={isOpen}\n          aria-controls={panelId}\n          aria-autocomplete=\"list\"\n          aria-activedescendant={activeOptionId}\n          aria-invalid={invalid || undefined}\n          disabled={disabled}\n          readOnly={readonly}\n          required={required}\n          name={name}\n          placeholder={placeholder}\n          value={displayValue}\n          onChange={handleInput}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          onKeyDown={handleKeydown}\n        />\n        <span className=\"atl-combobox-icon\" aria-hidden=\"true\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n            <path d=\"M2 4l4 4 4-4\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n          </svg>\n        </span>\n      </div>\n\n      {isOpen && (\n        <ul\n          id={panelId}\n          className=\"atl-combobox-panel\"\n          role=\"listbox\"\n          aria-labelledby={inputId}\n        >\n          {filteredOptions.length > 0 ? (\n            filteredOptions.map((option, i) => (\n              <li\n                key={option.value}\n                id={`${panelId}-option-${i}`}\n                role=\"option\"\n                className={[\n                  'atl-combobox-option',\n                  activeIndex === i && 'is-active',\n                  option.value === value && 'is-selected',\n                  option.disabled && 'is-disabled',\n                ]\n                  .filter(Boolean)\n                  .join(' ')}\n                aria-selected={option.value === value}\n                aria-disabled={option.disabled || undefined}\n                onMouseDown={() => selectOption(option)}\n                onMouseEnter={() => setActiveIndex(i)}\n              >\n                <span>{option.label}</span>\n                {option.value === value && (\n                  <svg className=\"atl-combobox-check\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" aria-hidden=\"true\">\n                    <path d=\"M2 7l4 4 6-7\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n                  </svg>\n                )}\n              </li>\n            ))\n          ) : (\n            <li className=\"atl-combobox-no-results\" role=\"option\" aria-selected={false} aria-disabled=\"true\">\n              No results found.\n            </li>\n          )}\n        </ul>\n      )}\n\n      {invalid && errors.length > 0 && (\n        <div className=\"atl-combobox-errors\" role=\"alert\" aria-live=\"polite\">\n          {errors.map((e, i) => (\n            <p key={i} className=\"atl-combobox-error-message\">{e}</p>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"atl-combobox.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/combobox/atl-combobox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useId, useMemo, useRef, useState } from 'react';\nimport type { AtlComboboxOption, AtlComboboxSpec } from '../spec';\nimport './atl-combobox.css';\nimport { AtlIcon } from '../icon/atl-icon';\n\nexport type { AtlComboboxOption };\n\nexport interface AtlComboboxProps extends AtlComboboxSpec {\n  value?: string;\n  onValueChange?: (value: string) => void;\n  errors?: string[];\n}\n\n/**\n * Filterable autocomplete combobox. Accepts an `options` array and emits the\n * selected option's `value`. The user types to narrow the list; selecting an\n * option commits the value and displays its label.\n *\n * Usage:\n * ```tsx\n * <AtlCombobox\n *   value={country}\n *   onValueChange={setCountry}\n *   options={countryOptions}\n *   placeholder=\"Search country…\"\n * />\n * ```\n */\nexport function AtlCombobox({\n  value = '',\n  onValueChange,\n  options = [],\n  placeholder = '',\n  disabled = false,\n  readonly = false,\n  invalid = false,\n  required = false,\n  name,\n  errors = [],\n}: AtlComboboxProps) {\n  const [query, setQuery] = useState('');\n  const [isOpen, setIsOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState(-1);\n\n  const inputRef = useRef<HTMLInputElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const inputId = useId();\n  const panelId = useId();\n\n  const selectedLabel = useMemo(\n    () => options.find((o) => o.value === value)?.label ?? '',\n    [options, value],\n  );\n\n  const filteredOptions = useMemo(() => {\n    if (!query) return options;\n    const q = query.toLowerCase();\n    return options.filter((o) => o.label.toLowerCase().includes(q));\n  }, [options, query]);\n\n  const displayValue = isOpen ? query : selectedLabel;\n\n  // Outside-click closes panel\n  useEffect(() => {\n    if (!isOpen) return;\n    function handleClick(e: MouseEvent) {\n      if (!containerRef.current?.contains(e.target as Node)) {\n        setIsOpen(false);\n        setQuery(selectedLabel);\n      }\n    }\n    document.addEventListener('click', handleClick);\n    return () => document.removeEventListener('click', handleClick);\n  }, [isOpen, selectedLabel]);\n\n  function open() {\n    if (disabled || readonly) return;\n    setQuery(selectedLabel);\n    setIsOpen(true);\n    setActiveIndex(-1);\n  }\n\n  function close() {\n    setIsOpen(false);\n    setActiveIndex(-1);\n  }\n\n  function selectOption(option: AtlComboboxOption) {\n    if (option.disabled || disabled || readonly) return;\n    onValueChange?.(option.value);\n    setQuery(option.label);\n    close();\n    inputRef.current?.focus();\n  }\n\n  function handleInput(e: React.ChangeEvent<HTMLInputElement>) {\n    const q = e.target.value;\n    setQuery(q);\n    setActiveIndex(-1);\n    if (q === '') onValueChange?.('');\n    if (!isOpen) open();\n  }\n\n  function handleFocus() {\n    open();\n  }\n\n  function handleBlur() {\n    setQuery(selectedLabel);\n  }\n\n  function handleKeydown(e: React.KeyboardEvent) {\n    switch (e.key) {\n      case 'ArrowDown': {\n        e.preventDefault();\n        if (!isOpen) { open(); return; }\n        setActiveIndex((i) => (i + 1 >= filteredOptions.length ? 0 : i + 1));\n        break;\n      }\n      case 'ArrowUp': {\n        e.preventDefault();\n        if (!isOpen) { open(); return; }\n        setActiveIndex((i) => (i - 1 < 0 ? filteredOptions.length - 1 : i - 1));\n        break;\n      }\n      case 'Enter': {\n        e.preventDefault();\n        if (isOpen && activeIndex >= 0 && activeIndex < filteredOptions.length) {\n          selectOption(filteredOptions[activeIndex]);\n        }\n        break;\n      }\n      case 'Escape': {\n        e.preventDefault();\n        setQuery(selectedLabel);\n        close();\n        break;\n      }\n      case 'Tab': {\n        close();\n        break;\n      }\n    }\n  }\n\n  const classes = [\n    'atl-combobox',\n    isOpen && 'is-open',\n    disabled && 'is-disabled',\n    readonly && 'is-readonly',\n    invalid && 'is-invalid',\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const activeOptionId =\n    activeIndex >= 0 ? `${panelId}-option-${activeIndex}` : undefined;\n\n  return (\n    <div className={classes} ref={containerRef}>\n      <div className=\"atl-combobox-wrapper\">\n        <input\n          ref={inputRef}\n          className=\"atl-combobox-input\"\n          type=\"text\"\n          autoComplete=\"off\"\n          role=\"combobox\"\n          id={inputId}\n          aria-expanded={isOpen}\n          aria-controls={panelId}\n          aria-autocomplete=\"list\"\n          aria-activedescendant={activeOptionId}\n          aria-invalid={invalid || undefined}\n          disabled={disabled}\n          readOnly={readonly}\n          required={required}\n          name={name}\n          placeholder={placeholder}\n          value={displayValue}\n          onChange={handleInput}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          onKeyDown={handleKeydown}\n        />\n        <span className=\"atl-combobox-icon\" aria-hidden=\"true\">\n          <AtlIcon name=\"chevron-down\" size=\"sm\" />\n        </span>\n      </div>\n\n      {isOpen && (\n        <ul\n          id={panelId}\n          className=\"atl-combobox-panel\"\n          role=\"listbox\"\n          aria-labelledby={inputId}\n        >\n          {filteredOptions.length > 0 ? (\n            filteredOptions.map((option, i) => (\n              <li\n                key={option.value}\n                id={`${panelId}-option-${i}`}\n                role=\"option\"\n                className={[\n                  'atl-combobox-option',\n                  activeIndex === i && 'is-active',\n                  option.value === value && 'is-selected',\n                  option.disabled && 'is-disabled',\n                ]\n                  .filter(Boolean)\n                  .join(' ')}\n                aria-selected={option.value === value}\n                aria-disabled={option.disabled || undefined}\n                onMouseDown={() => selectOption(option)}\n                onMouseEnter={() => setActiveIndex(i)}\n              >\n                <span>{option.label}</span>\n                {option.value === value && (\n                  <AtlIcon name=\"check\" size=\"sm\" className=\"atl-combobox-check\" />\n                )}\n              </li>\n            ))\n          ) : (\n            <li className=\"atl-combobox-no-results\" role=\"option\" aria-selected={false} aria-disabled=\"true\">\n              No results found.\n            </li>\n          )}\n        </ul>\n      )}\n\n      {invalid && errors.length > 0 && (\n        <div className=\"atl-combobox-errors\" role=\"alert\" aria-live=\"polite\">\n          {errors.map((e, i) => (\n            <p key={i} className=\"atl-combobox-error-message\">{e}</p>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n"]}

package/src/lib/dialog/atl-dialog.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-dialog,
+  .atl-dialog-content,
+  .atl-dialog-footer,
+  .atl-dialog-header
+),
+:is(
+  .atl-dialog,
+  .atl-dialog-content,
+  .atl-dialog-footer,
+  .atl-dialog-header
+) * {
+  box-sizing: border-box;
+}
+
 /* ── Native <dialog> reset + base ──────────────────────────────────────────── */
 .atl-dialog {
   all: unset;
@@ -116,7 +136,7 @@ dialog > .panel.size-full {
   align-items: center;
   justify-content: space-between;
   padding: var(--ui-spacing-5) var(--ui-spacing-6);
-  border-bottom: 1px solid var(--ui-color-border);
+  border-bottom: var(--ui-border-width) solid var(--ui-color-border);
   font-size: var(--ui-font-size-xl);
   font-weight: 600;
   letter-spacing: var(--ui-letter-spacing-tight);
@@ -138,7 +158,7 @@ dialog > .panel.size-full {
   justify-content: flex-end;
   gap: var(--ui-spacing-3);
   padding: var(--ui-spacing-5) var(--ui-spacing-6);
-  border-top: 1px solid var(--ui-color-border);
+  border-top: var(--ui-border-width) solid var(--ui-color-border);
   flex-shrink: 0;
 }
 
@@ -148,8 +168,8 @@ dialog > .panel.size-full {
   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;
   margin-left: var(--ui-spacing-3);
   background: transparent;

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

@@ -1 +1 @@
-{"version":3,"file":"atl-dialog.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/dialog/atl-dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,SAAS,EACT,cAAc,EAEf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,kBAAkB,CAAC;AAY1B;;GAEG;AACH,MAAM,WAAW,cAAe,SAAQ,aAAa;IACnD;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;IAC1C;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,EACxB,IAAY,EACZ,YAAY,EACZ,eAAsB,EACtB,IAAW,EACX,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,QAAQ,GACT,EAAE,cAAc,+BA2DhB;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,cAAc,CAAC,GAAG;IAClC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,+BAiCA;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,cAAc,CAAC,GAAG;IAClC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,+BASA;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,cAAc,CAAC,GAAG;IAClC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,+BASA"}
+{"version":3,"file":"atl-dialog.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/dialog/atl-dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,SAAS,EACT,cAAc,EAEf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,kBAAkB,CAAC;AAa1B;;GAEG;AACH,MAAM,WAAW,cAAe,SAAQ,aAAa;IACnD;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;IAC1C;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,EACxB,IAAY,EACZ,YAAY,EACZ,eAAsB,EACtB,IAAW,EACX,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,QAAQ,GACT,EAAE,cAAc,+BA2DhB;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,cAAc,CAAC,GAAG;IAClC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,+BAmBA;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,cAAc,CAAC,GAAG;IAClC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,+BASA;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,cAAc,CAAC,GAAG;IAClC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,+BASA"}

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

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useId, createContext, useContext, } from 'react';
 import './atl-dialog.css';
+import { AtlIcon } from '../icon/atl-icon';
 const DialogContext = createContext({
     headerId: '',
     close: () => undefined,
@@ -59,7 +60,7 @@ export function AtlDialog({ open = false, onOpenChange, closeOnBackdrop = true,
  */
 export function AtlDialogHeader({ children, className, ...rest }) {
     const ctx = useContext(DialogContext);
-    return (_jsxs("div", { id: ctx.headerId, className: ['atl-dialog-header', className].filter(Boolean).join(' '), ...rest, children: [children, _jsx("button", { className: "close-btn", type: "button", "aria-label": "Close dialog", 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-dialog-header', className].filter(Boolean).join(' '), ...rest, children: [children, _jsx("button", { className: "close-btn", type: "button", "aria-label": "Close dialog", onClick: ctx.close, children: _jsx(AtlIcon, { name: "close", size: "sm" }) })] }));
 }
 /**
  * The main content component for an AtlDialog.

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

@@ -1 +1 @@
-{"version":3,"file":"atl-dialog.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/dialog/atl-dialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  useEffect,\n  useRef,\n  useId,\n  createContext,\n  useContext,\n  ReactNode,\n  HTMLAttributes,\n  MouseEvent,\n} from 'react';\nimport type { AtlDialogSpec } from '../spec';\nimport './atl-dialog.css';\n\ninterface DialogContextValue {\n  headerId: string;\n  close: () => void;\n}\n\nconst DialogContext = createContext<DialogContextValue>({\n  headerId: '',\n  close: () => undefined,\n});\n\n/**\n * Properties for the AtlDialog component.\n */\nexport interface AtlDialogProps extends AtlDialogSpec {\n  /**\n   * Whether the dialog is open.\n   */\n  open?: boolean;\n  /**\n   * Callback triggered when the open state changes.\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * Whether to close the dialog when clicking on the backdrop.\n   */\n  closeOnBackdrop?: boolean;\n  /**\n   * The size of the dialog.\n   */\n  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';\n  /**\n   * Accessible label for the dialog.\n   */\n  'aria-label'?: string;\n  /**\n   * Accessible label provided by another element.\n   */\n  'aria-labelledby'?: string;\n  /**\n   * The content of the dialog.\n   */\n  children?: ReactNode;\n}\n\n/**\n * A dialog (modal) component for displaying content on top of the main UI.\n */\nexport function AtlDialog({\n  open = false,\n  onOpenChange,\n  closeOnBackdrop = true,\n  size = 'md',\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledby,\n  children,\n}: AtlDialogProps) {\n  const dialogRef = useRef<HTMLDialogElement>(null);\n  const headerId = useId();\n  const triggerElRef = useRef<Element | null>(null);\n\n  useEffect(() => {\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]);\n\n  useEffect(() => {\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]);\n\n  const handleBackdropClick = (e: MouseEvent<HTMLDialogElement>) => {\n    if (!closeOnBackdrop) return;\n    if (e.target === dialogRef.current) {\n      onOpenChange?.(false);\n    }\n  };\n\n  const effectiveAriaLabelledby = ariaLabel ? undefined : (ariaLabelledby ?? headerId);\n\n  return (\n    <DialogContext.Provider value={{ headerId, close: () => onOpenChange?.(false) }}>\n      <dialog\n        ref={dialogRef}\n        className={`atl-dialog size-${size}${open ? ' is-open' : ''}`}\n        aria-label={ariaLabel || undefined}\n        aria-labelledby={effectiveAriaLabelledby}\n        aria-modal=\"true\"\n        onClick={handleBackdropClick}\n      >\n        <div className=\"panel\" onClick={(e) => e.stopPropagation()}>\n          {children}\n        </div>\n      </dialog>\n    </DialogContext.Provider>\n  );\n}\n\n/**\n * The header component for an AtlDialog.\n */\nexport function AtlDialogHeader({\n  children,\n  className,\n  ...rest\n}: HTMLAttributes<HTMLDivElement> & {\n  /**\n   * The content of the dialog header.\n   */\n  children?: ReactNode;\n}) {\n  const ctx = useContext(DialogContext);\n  return (\n    <div\n      id={ctx.headerId}\n      className={['atl-dialog-header', className].filter(Boolean).join(' ')}\n      {...rest}\n    >\n      {children}\n      <button\n        className=\"close-btn\"\n        type=\"button\"\n        aria-label=\"Close dialog\"\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 * The main content component for an AtlDialog.\n */\nexport function AtlDialogContent({\n  children,\n  className,\n  ...rest\n}: HTMLAttributes<HTMLDivElement> & {\n  /**\n   * The main content of the dialog.\n   */\n  children?: ReactNode;\n}) {\n  return (\n    <div\n      className={['atl-dialog-content', className].filter(Boolean).join(' ')}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n}\n\n/**\n * The footer component for an AtlDialog.\n */\nexport function AtlDialogFooter({\n  children,\n  className,\n  ...rest\n}: HTMLAttributes<HTMLDivElement> & {\n  /**\n   * The content of the dialog footer.\n   */\n  children?: ReactNode;\n}) {\n  return (\n    <div\n      className={['atl-dialog-footer', className].filter(Boolean).join(' ')}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"atl-dialog.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/dialog/atl-dialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  useEffect,\n  useRef,\n  useId,\n  createContext,\n  useContext,\n  ReactNode,\n  HTMLAttributes,\n  MouseEvent,\n} from 'react';\nimport type { AtlDialogSpec } from '../spec';\nimport './atl-dialog.css';\nimport { AtlIcon } from '../icon/atl-icon';\n\ninterface DialogContextValue {\n  headerId: string;\n  close: () => void;\n}\n\nconst DialogContext = createContext<DialogContextValue>({\n  headerId: '',\n  close: () => undefined,\n});\n\n/**\n * Properties for the AtlDialog component.\n */\nexport interface AtlDialogProps extends AtlDialogSpec {\n  /**\n   * Whether the dialog is open.\n   */\n  open?: boolean;\n  /**\n   * Callback triggered when the open state changes.\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * Whether to close the dialog when clicking on the backdrop.\n   */\n  closeOnBackdrop?: boolean;\n  /**\n   * The size of the dialog.\n   */\n  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';\n  /**\n   * Accessible label for the dialog.\n   */\n  'aria-label'?: string;\n  /**\n   * Accessible label provided by another element.\n   */\n  'aria-labelledby'?: string;\n  /**\n   * The content of the dialog.\n   */\n  children?: ReactNode;\n}\n\n/**\n * A dialog (modal) component for displaying content on top of the main UI.\n */\nexport function AtlDialog({\n  open = false,\n  onOpenChange,\n  closeOnBackdrop = true,\n  size = 'md',\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledby,\n  children,\n}: AtlDialogProps) {\n  const dialogRef = useRef<HTMLDialogElement>(null);\n  const headerId = useId();\n  const triggerElRef = useRef<Element | null>(null);\n\n  useEffect(() => {\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]);\n\n  useEffect(() => {\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]);\n\n  const handleBackdropClick = (e: MouseEvent<HTMLDialogElement>) => {\n    if (!closeOnBackdrop) return;\n    if (e.target === dialogRef.current) {\n      onOpenChange?.(false);\n    }\n  };\n\n  const effectiveAriaLabelledby = ariaLabel ? undefined : (ariaLabelledby ?? headerId);\n\n  return (\n    <DialogContext.Provider value={{ headerId, close: () => onOpenChange?.(false) }}>\n      <dialog\n        ref={dialogRef}\n        className={`atl-dialog size-${size}${open ? ' is-open' : ''}`}\n        aria-label={ariaLabel || undefined}\n        aria-labelledby={effectiveAriaLabelledby}\n        aria-modal=\"true\"\n        onClick={handleBackdropClick}\n      >\n        <div className=\"panel\" onClick={(e) => e.stopPropagation()}>\n          {children}\n        </div>\n      </dialog>\n    </DialogContext.Provider>\n  );\n}\n\n/**\n * The header component for an AtlDialog.\n */\nexport function AtlDialogHeader({\n  children,\n  className,\n  ...rest\n}: HTMLAttributes<HTMLDivElement> & {\n  /**\n   * The content of the dialog header.\n   */\n  children?: ReactNode;\n}) {\n  const ctx = useContext(DialogContext);\n  return (\n    <div\n      id={ctx.headerId}\n      className={['atl-dialog-header', className].filter(Boolean).join(' ')}\n      {...rest}\n    >\n      {children}\n      <button\n        className=\"close-btn\"\n        type=\"button\"\n        aria-label=\"Close dialog\"\n        onClick={ctx.close}\n      >\n        <AtlIcon name=\"close\" size=\"sm\" />\n      </button>\n    </div>\n  );\n}\n\n/**\n * The main content component for an AtlDialog.\n */\nexport function AtlDialogContent({\n  children,\n  className,\n  ...rest\n}: HTMLAttributes<HTMLDivElement> & {\n  /**\n   * The main content of the dialog.\n   */\n  children?: ReactNode;\n}) {\n  return (\n    <div\n      className={['atl-dialog-content', className].filter(Boolean).join(' ')}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n}\n\n/**\n * The footer component for an AtlDialog.\n */\nexport function AtlDialogFooter({\n  children,\n  className,\n  ...rest\n}: HTMLAttributes<HTMLDivElement> & {\n  /**\n   * The content of the dialog footer.\n   */\n  children?: ReactNode;\n}) {\n  return (\n    <div\n      className={['atl-dialog-footer', className].filter(Boolean).join(' ')}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n}\n"]}

package/src/lib/drawer/atl-drawer.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-drawer-content,
+  .atl-drawer-footer,
+  .atl-drawer-header,
+  .atl-drawer-host
+),
+:is(
+  .atl-drawer-content,
+  .atl-drawer-footer,
+  .atl-drawer-header,
+  .atl-drawer-host
+) * {
+  box-sizing: border-box;
+}
+
 /* ── Host wrapper ──────────────────────────────────────────────────────────── */
 .atl-drawer-host {
   display: contents;
@@ -170,7 +190,7 @@
   align-items: center;
   justify-content: space-between;
   padding: var(--ui-spacing-5) var(--ui-spacing-6);
-  border-bottom: 1px solid var(--ui-color-border);
+  border-bottom: var(--ui-border-width) solid var(--ui-color-border);
   font-size: var(--ui-font-size-xl);
   font-weight: 600;
   letter-spacing: var(--ui-letter-spacing-tight);
@@ -192,7 +212,7 @@
   justify-content: flex-end;
   gap: var(--ui-spacing-3);
   padding: var(--ui-spacing-5) var(--ui-spacing-6);
-  border-top: 1px solid var(--ui-color-border);
+  border-top: var(--ui-border-width) solid var(--ui-color-border);
   flex-shrink: 0;
 }
 
@@ -202,8 +222,8 @@
   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;
   margin-left: var(--ui-spacing-3);
   background: transparent;

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

@@ -1 +1 @@
-{"version":3,"file":"atl-drawer.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/drawer/atl-drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,SAAS,EACT,cAAc,EAEf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,kBAAkB,CAAC;AAY1B;;GAEG;AACH,MAAM,WAAW,cAAe,SAAQ,aAAa;IACnD;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;IAC/C;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;IACnC;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,EACxB,IAAY,EACZ,YAAY,EACZ,QAAkB,EAClB,IAAW,EACX,eAAsB,EACtB,QAAQ,GACT,EAAE,cAAc,+BAkEhB;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,cAAc,CAAC,GAAG;IAClC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,+BAiCA;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,cAAc,CAAC,GAAG;IAClC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,+BASA;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,cAAc,CAAC,GAAG;IAClC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,+BASA"}
+{"version":3,"file":"atl-drawer.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/drawer/atl-drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,SAAS,EACT,cAAc,EAEf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,kBAAkB,CAAC;AAa1B;;GAEG;AACH,MAAM,WAAW,cAAe,SAAQ,aAAa;IACnD;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;IAC/C;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;IACnC;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,EACxB,IAAY,EACZ,YAAY,EACZ,QAAkB,EAClB,IAAW,EACX,eAAsB,EACtB,QAAQ,GACT,EAAE,cAAc,+BAkEhB;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,cAAc,CAAC,GAAG;IAClC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,+BAmBA;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,cAAc,CAAC,GAAG;IAClC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,+BASA;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,cAAc,CAAC,GAAG;IAClC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,+BASA"}

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

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useId, createContext, useContext, } from 'react';
 import './atl-drawer.css';
+import { AtlIcon } from '../icon/atl-icon';
 const DrawerContext = createContext({
     headerId: '',
     close: () => undefined,
@@ -66,7 +67,7 @@ export function AtlDrawer({ open = false, onOpenChange, position = 'right', size
  */
 export function AtlDrawerHeader({ children, className, ...rest }) {
     const ctx = useContext(DrawerContext);
-    return (_jsxs("div", { id: ctx.headerId, className: ['atl-drawer-header', className].filter(Boolean).join(' '), ...rest, children: [children, _jsx("button", { className: "close-btn", type: "button", "aria-label": "Close drawer", 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-drawer-header', className].filter(Boolean).join(' '), ...rest, children: [children, _jsx("button", { className: "close-btn", type: "button", "aria-label": "Close drawer", onClick: ctx.close, children: _jsx(AtlIcon, { name: "close", size: "sm" }) })] }));
 }
 /**
  * The main content component for an AtlDrawer.

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

@@ -1 +1 @@
-{"version":3,"file":"atl-drawer.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/drawer/atl-drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  useEffect,\n  useRef,\n  useId,\n  createContext,\n  useContext,\n  ReactNode,\n  HTMLAttributes,\n  MouseEvent,\n} from 'react';\nimport type { AtlDrawerSpec } from '../spec';\nimport './atl-drawer.css';\n\ninterface DrawerContextValue {\n  headerId: string;\n  close: () => void;\n}\n\nconst DrawerContext = createContext<DrawerContextValue>({\n  headerId: '',\n  close: () => undefined,\n});\n\n/**\n * Properties for the AtlDrawer component.\n */\nexport interface AtlDrawerProps extends AtlDrawerSpec {\n  /**\n   * Whether the drawer is open.\n   */\n  open?: boolean;\n  /**\n   * Callback triggered when the open state changes.\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * The position of the drawer on the screen.\n   */\n  position?: 'left' | 'right' | 'top' | 'bottom';\n  /**\n   * The size of the drawer.\n   */\n  size?: 'sm' | 'md' | 'lg' | 'full';\n  /**\n   * Whether to close the drawer when clicking on the backdrop.\n   */\n  closeOnBackdrop?: boolean;\n  /**\n   * The content of the drawer.\n   */\n  children?: ReactNode;\n}\n\n/**\n * A drawer component that slides in from the edge of the screen.\n */\nexport function AtlDrawer({\n  open = false,\n  onOpenChange,\n  position = 'right',\n  size = 'md',\n  closeOnBackdrop = true,\n  children,\n}: AtlDrawerProps) {\n  const dialogRef = useRef<HTMLDialogElement>(null);\n  const headerId = useId();\n  const triggerElRef = useRef<Element | null>(null);\n\n  useEffect(() => {\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]);\n\n  useEffect(() => {\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]);\n\n  const handleBackdropClick = (e: MouseEvent<HTMLDialogElement>) => {\n    if (!closeOnBackdrop) return;\n    if (e.target === dialogRef.current) {\n      onOpenChange?.(false);\n    }\n  };\n\n  const hostClass = [\n    'atl-drawer-host',\n    `position-${position}`,\n    `size-${size}`,\n    open && 'is-open',\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <DrawerContext.Provider value={{ headerId, close: () => onOpenChange?.(false) }}>\n      <div className={hostClass}>\n        <dialog\n          ref={dialogRef}\n          aria-labelledby={headerId}\n          aria-modal=\"true\"\n          onClick={handleBackdropClick}\n        >\n          <div className=\"panel\" onClick={(e) => e.stopPropagation()}>\n            {children}\n          </div>\n        </dialog>\n      </div>\n    </DrawerContext.Provider>\n  );\n}\n\n/**\n * The header component for an AtlDrawer.\n */\nexport function AtlDrawerHeader({\n  children,\n  className,\n  ...rest\n}: HTMLAttributes<HTMLDivElement> & {\n  /**\n   * The content of the drawer header.\n   */\n  children?: ReactNode;\n}) {\n  const ctx = useContext(DrawerContext);\n  return (\n    <div\n      id={ctx.headerId}\n      className={['atl-drawer-header', className].filter(Boolean).join(' ')}\n      {...rest}\n    >\n      {children}\n      <button\n        className=\"close-btn\"\n        type=\"button\"\n        aria-label=\"Close drawer\"\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 * The main content component for an AtlDrawer.\n */\nexport function AtlDrawerContent({\n  children,\n  className,\n  ...rest\n}: HTMLAttributes<HTMLDivElement> & {\n  /**\n   * The main content of the drawer.\n   */\n  children?: ReactNode;\n}) {\n  return (\n    <div\n      className={['atl-drawer-content', className].filter(Boolean).join(' ')}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n}\n\n/**\n * The footer component for an AtlDrawer.\n */\nexport function AtlDrawerFooter({\n  children,\n  className,\n  ...rest\n}: HTMLAttributes<HTMLDivElement> & {\n  /**\n   * The content of the drawer footer.\n   */\n  children?: ReactNode;\n}) {\n  return (\n    <div\n      className={['atl-drawer-footer', className].filter(Boolean).join(' ')}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"atl-drawer.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/drawer/atl-drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  useEffect,\n  useRef,\n  useId,\n  createContext,\n  useContext,\n  ReactNode,\n  HTMLAttributes,\n  MouseEvent,\n} from 'react';\nimport type { AtlDrawerSpec } from '../spec';\nimport './atl-drawer.css';\nimport { AtlIcon } from '../icon/atl-icon';\n\ninterface DrawerContextValue {\n  headerId: string;\n  close: () => void;\n}\n\nconst DrawerContext = createContext<DrawerContextValue>({\n  headerId: '',\n  close: () => undefined,\n});\n\n/**\n * Properties for the AtlDrawer component.\n */\nexport interface AtlDrawerProps extends AtlDrawerSpec {\n  /**\n   * Whether the drawer is open.\n   */\n  open?: boolean;\n  /**\n   * Callback triggered when the open state changes.\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * The position of the drawer on the screen.\n   */\n  position?: 'left' | 'right' | 'top' | 'bottom';\n  /**\n   * The size of the drawer.\n   */\n  size?: 'sm' | 'md' | 'lg' | 'full';\n  /**\n   * Whether to close the drawer when clicking on the backdrop.\n   */\n  closeOnBackdrop?: boolean;\n  /**\n   * The content of the drawer.\n   */\n  children?: ReactNode;\n}\n\n/**\n * A drawer component that slides in from the edge of the screen.\n */\nexport function AtlDrawer({\n  open = false,\n  onOpenChange,\n  position = 'right',\n  size = 'md',\n  closeOnBackdrop = true,\n  children,\n}: AtlDrawerProps) {\n  const dialogRef = useRef<HTMLDialogElement>(null);\n  const headerId = useId();\n  const triggerElRef = useRef<Element | null>(null);\n\n  useEffect(() => {\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]);\n\n  useEffect(() => {\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]);\n\n  const handleBackdropClick = (e: MouseEvent<HTMLDialogElement>) => {\n    if (!closeOnBackdrop) return;\n    if (e.target === dialogRef.current) {\n      onOpenChange?.(false);\n    }\n  };\n\n  const hostClass = [\n    'atl-drawer-host',\n    `position-${position}`,\n    `size-${size}`,\n    open && 'is-open',\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <DrawerContext.Provider value={{ headerId, close: () => onOpenChange?.(false) }}>\n      <div className={hostClass}>\n        <dialog\n          ref={dialogRef}\n          aria-labelledby={headerId}\n          aria-modal=\"true\"\n          onClick={handleBackdropClick}\n        >\n          <div className=\"panel\" onClick={(e) => e.stopPropagation()}>\n            {children}\n          </div>\n        </dialog>\n      </div>\n    </DrawerContext.Provider>\n  );\n}\n\n/**\n * The header component for an AtlDrawer.\n */\nexport function AtlDrawerHeader({\n  children,\n  className,\n  ...rest\n}: HTMLAttributes<HTMLDivElement> & {\n  /**\n   * The content of the drawer header.\n   */\n  children?: ReactNode;\n}) {\n  const ctx = useContext(DrawerContext);\n  return (\n    <div\n      id={ctx.headerId}\n      className={['atl-drawer-header', className].filter(Boolean).join(' ')}\n      {...rest}\n    >\n      {children}\n      <button\n        className=\"close-btn\"\n        type=\"button\"\n        aria-label=\"Close drawer\"\n        onClick={ctx.close}\n      >\n        <AtlIcon name=\"close\" size=\"sm\" />\n      </button>\n    </div>\n  );\n}\n\n/**\n * The main content component for an AtlDrawer.\n */\nexport function AtlDrawerContent({\n  children,\n  className,\n  ...rest\n}: HTMLAttributes<HTMLDivElement> & {\n  /**\n   * The main content of the drawer.\n   */\n  children?: ReactNode;\n}) {\n  return (\n    <div\n      className={['atl-drawer-content', className].filter(Boolean).join(' ')}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n}\n\n/**\n * The footer component for an AtlDrawer.\n */\nexport function AtlDrawerFooter({\n  children,\n  className,\n  ...rest\n}: HTMLAttributes<HTMLDivElement> & {\n  /**\n   * The content of the drawer footer.\n   */\n  children?: ReactNode;\n}) {\n  return (\n    <div\n      className={['atl-drawer-footer', className].filter(Boolean).join(' ')}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n}\n"]}

package/src/lib/icon/atl-icon.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-icon,
+.atl-icon * {
+  box-sizing: border-box;
+}
+
 .atl-icon {
   display: inline-flex;
   align-items: center;
@@ -27,3 +37,11 @@
   height: 1.5rem;
   font-size: var(--ui-font-size-lg);
 }
+
+/* The size classes define the box; the svg fills it. Geometry is always the
+ * 0 0 24 24 viewBox, so every size is the same shape at a different scale. */
+.atl-icon svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+}

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

@@ -16,7 +16,8 @@ export interface AtlIconProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'ari
     label?: string;
 }
 /**
- * Pictogram glyph icon. 21 named variants matching the Figma `AtlIcon`
+ * Vector icon. 23 named variants, drawn from the geometry in `icons.ts` so the
+ * same shape is used everywhere it appears. Matches the Figma `AtlIcon`
  * component set. Decorative by default; pass `label` to announce a meaning
  * to assistive tech.
  */

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

@@ -1 +1 @@
-{"version":3,"file":"atl-icon.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/icon/atl-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AACrE,OAAO,gBAAgB,CAAC;AA0BxB;;GAEG;AACH,MAAM,WAAW,YACf,SAAQ,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,YAAY,CAAC,EACzD,WAAW;IACb,qBAAqB;IACrB,IAAI,EAAE,WAAW,CAAC;IAClB,qBAAqB;IACrB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,EACtB,IAAI,EACJ,IAAW,EACX,KAAK,EACL,SAAS,EACT,GAAG,IAAI,EACR,EAAE,YAAY,+BAUd"}
+{"version":3,"file":"atl-icon.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/icon/atl-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAErE,OAAO,gBAAgB,CAAC;AAGxB;;GAEG;AACH,MAAM,WAAW,YACf,SAAQ,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,YAAY,CAAC,EACzD,WAAW;IACb,qBAAqB;IACrB,IAAI,EAAE,WAAW,CAAC;IAClB,qBAAqB;IACrB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;GAKG;AACH,wBAAgB,OAAO,CAAC,EACtB,IAAI,EACJ,IAAW,EACX,KAAK,EACL,SAAS,EACT,GAAG,IAAI,EACR,EAAE,YAAY,+BAyBd"}

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

@@ -1,30 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { ATL_ICON_GEOMETRY, ATL_ICON_STROKE_WIDTH, ATL_ICON_VIEWBOX } from '../icons';
 import './atl-icon.css';
-const ICON_GLYPHS = {
-    success: '✓',
-    warning: '⚠',
-    danger: '✕',
-    info: 'ℹ',
-    error: '!',
-    'chevron-up': '▲',
-    'chevron-down': '▼',
-    'chevron-left': '‹',
-    'chevron-right': '›',
-    'sort-asc': '↑',
-    'sort-desc': '↓',
-    'arrow-right': '→',
-    'arrow-left': '←',
-    copy: '⎘',
-    paste: '⎗',
-    add: '⊕',
-    edit: '✏',
-    delete: '🗑',
-    close: '×',
-    more: '…',
-    'default-toast': '💬',
-};
 /**
- * Pictogram glyph icon. 21 named variants matching the Figma `AtlIcon`
+ * Vector icon. 23 named variants, drawn from the geometry in `icons.ts` so the
+ * same shape is used everywhere it appears. Matches the Figma `AtlIcon`
  * component set. Decorative by default; pass `label` to announce a meaning
  * to assistive tech.
  */
@@ -33,6 +12,8 @@ export function AtlIcon({ name, size = 'md', label, className, ...rest }) {
     const accessibilityProps = label
         ? { role: 'img', 'aria-label': label }
         : { 'aria-hidden': true };
-    return (_jsx("span", { className: classes, ...accessibilityProps, ...rest, children: ICON_GLYPHS[name] }));
+    const geometry = ATL_ICON_GEOMETRY[name];
+    const stroke = geometry.kind === 'stroke';
+    return (_jsx("span", { className: classes, ...accessibilityProps, ...rest, children: _jsx("svg", { viewBox: ATL_ICON_VIEWBOX, fill: stroke ? 'none' : 'currentColor', stroke: stroke ? 'currentColor' : undefined, strokeWidth: stroke ? ATL_ICON_STROKE_WIDTH : undefined, strokeLinecap: stroke ? 'round' : undefined, strokeLinejoin: stroke ? 'round' : undefined, "aria-hidden": "true", focusable: "false", children: geometry.paths.map((d) => (_jsx("path", { d: d }, d))) }) }));
 }
 //# sourceMappingURL=atl-icon.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"atl-icon.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/icon/atl-icon.tsx"],"names":[],"mappings":";AAEA,OAAO,gBAAgB,CAAC;AAExB,MAAM,WAAW,GAAgC;IAC/C,OAAO,EAAE,GAAG;IACZ,OAAO,EAAE,GAAG;IACZ,MAAM,EAAE,GAAG;IACX,IAAI,EAAE,GAAG;IACT,KAAK,EAAE,GAAG;IACV,YAAY,EAAE,GAAG;IACjB,cAAc,EAAE,GAAG;IACnB,cAAc,EAAE,GAAG;IACnB,eAAe,EAAE,GAAG;IACpB,UAAU,EAAE,GAAG;IACf,WAAW,EAAE,GAAG;IAChB,aAAa,EAAE,GAAG;IAClB,YAAY,EAAE,GAAG;IACjB,IAAI,EAAE,GAAG;IACT,KAAK,EAAE,GAAG;IACV,GAAG,EAAE,GAAG;IACR,IAAI,EAAE,GAAG;IACT,MAAM,EAAE,IAAI;IACZ,KAAK,EAAE,GAAG;IACV,IAAI,EAAE,GAAG;IACT,eAAe,EAAE,IAAI;CACtB,CAAC;AAmBF;;;;GAIG;AACH,MAAM,UAAU,OAAO,CAAC,EACtB,IAAI,EACJ,IAAI,GAAG,IAAI,EACX,KAAK,EACL,SAAS,EACT,GAAG,IAAI,EACM;IACb,MAAM,OAAO,GAAG,CAAC,UAAU,EAAE,QAAQ,IAAI,EAAE,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAClF,MAAM,kBAAkB,GAAG,KAAK;QAC9B,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE;QACtC,CAAC,CAAC,EAAE,aAAa,EAAE,IAAa,EAAE,CAAC;IACrC,OAAO,CACL,eAAM,SAAS,EAAE,OAAO,KAAM,kBAAkB,KAAM,IAAI,YACvD,WAAW,CAAC,IAAI,CAAC,GACb,CACR,CAAC;AACJ,CAAC","sourcesContent":["import { HTMLAttributes } from 'react';\nimport type { AtlIconName, AtlIconSize, AtlIconSpec } from '../spec';\nimport './atl-icon.css';\n\nconst ICON_GLYPHS: Record<AtlIconName, string> = {\n  success: '✓',\n  warning: '⚠',\n  danger: '✕',\n  info: 'ℹ',\n  error: '!',\n  'chevron-up': '▲',\n  'chevron-down': '▼',\n  'chevron-left': '‹',\n  'chevron-right': '›',\n  'sort-asc': '↑',\n  'sort-desc': '↓',\n  'arrow-right': '→',\n  'arrow-left': '←',\n  copy: '⎘',\n  paste: '⎗',\n  add: '⊕',\n  edit: '✏',\n  delete: '🗑',\n  close: '×',\n  more: '…',\n  'default-toast': '💬',\n};\n\n/**\n * Properties for the AtlIcon component.\n */\nexport interface AtlIconProps\n  extends Omit<HTMLAttributes<HTMLSpanElement>, 'aria-label'>,\n    AtlIconSpec {\n  /** The icon name. */\n  name: AtlIconName;\n  /** The icon size. */\n  size?: AtlIconSize;\n  /**\n   * Accessible label. When provided, the icon is announced as an image with\n   * this label. When omitted, the icon is hidden from assistive tech.\n   */\n  label?: string;\n}\n\n/**\n * Pictogram glyph icon. 21 named variants matching the Figma `AtlIcon`\n * component set. Decorative by default; pass `label` to announce a meaning\n * to assistive tech.\n */\nexport function AtlIcon({\n  name,\n  size = 'md',\n  label,\n  className,\n  ...rest\n}: AtlIconProps) {\n  const classes = ['atl-icon', `size-${size}`, className].filter(Boolean).join(' ');\n  const accessibilityProps = label\n    ? { role: 'img', 'aria-label': label }\n    : { 'aria-hidden': true as const };\n  return (\n    <span className={classes} {...accessibilityProps} {...rest}>\n      {ICON_GLYPHS[name]}\n    </span>\n  );\n}\n"]}
+{"version":3,"file":"atl-icon.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/icon/atl-icon.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,iBAAiB,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AACtF,OAAO,gBAAgB,CAAC;AAoBxB;;;;;GAKG;AACH,MAAM,UAAU,OAAO,CAAC,EACtB,IAAI,EACJ,IAAI,GAAG,IAAI,EACX,KAAK,EACL,SAAS,EACT,GAAG,IAAI,EACM;IACb,MAAM,OAAO,GAAG,CAAC,UAAU,EAAE,QAAQ,IAAI,EAAE,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAClF,MAAM,kBAAkB,GAAG,KAAK;QAC9B,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE;QACtC,CAAC,CAAC,EAAE,aAAa,EAAE,IAAa,EAAE,CAAC;IACrC,MAAM,QAAQ,GAAG,iBAAiB,CAAC,IAAI,CAAC,CAAC;IACzC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,KAAK,QAAQ,CAAC;IAC1C,OAAO,CACL,eAAM,SAAS,EAAE,OAAO,KAAM,kBAAkB,KAAM,IAAI,YACxD,cACE,OAAO,EAAE,gBAAgB,EACzB,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,cAAc,EACtC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS,EAC3C,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,SAAS,EACvD,aAAa,EAAE,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAC3C,cAAc,EAAE,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,iBAChC,MAAM,EAClB,SAAS,EAAC,OAAO,YAEhB,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CACzB,eAAc,CAAC,EAAE,CAAC,IAAP,CAAC,CAAU,CACvB,CAAC,GACE,GACD,CACR,CAAC;AACJ,CAAC","sourcesContent":["import { HTMLAttributes } from 'react';\nimport type { AtlIconName, AtlIconSize, AtlIconSpec } from '../spec';\nimport { ATL_ICON_GEOMETRY, ATL_ICON_STROKE_WIDTH, ATL_ICON_VIEWBOX } from '../icons';\nimport './atl-icon.css';\n\n\n/**\n * Properties for the AtlIcon component.\n */\nexport interface AtlIconProps\n  extends Omit<HTMLAttributes<HTMLSpanElement>, 'aria-label'>,\n    AtlIconSpec {\n  /** The icon name. */\n  name: AtlIconName;\n  /** The icon size. */\n  size?: AtlIconSize;\n  /**\n   * Accessible label. When provided, the icon is announced as an image with\n   * this label. When omitted, the icon is hidden from assistive tech.\n   */\n  label?: string;\n}\n\n/**\n * Vector icon. 23 named variants, drawn from the geometry in `icons.ts` so the\n * same shape is used everywhere it appears. Matches the Figma `AtlIcon`\n * component set. Decorative by default; pass `label` to announce a meaning\n * to assistive tech.\n */\nexport function AtlIcon({\n  name,\n  size = 'md',\n  label,\n  className,\n  ...rest\n}: AtlIconProps) {\n  const classes = ['atl-icon', `size-${size}`, className].filter(Boolean).join(' ');\n  const accessibilityProps = label\n    ? { role: 'img', 'aria-label': label }\n    : { 'aria-hidden': true as const };\n  const geometry = ATL_ICON_GEOMETRY[name];\n  const stroke = geometry.kind === 'stroke';\n  return (\n    <span className={classes} {...accessibilityProps} {...rest}>\n      <svg\n        viewBox={ATL_ICON_VIEWBOX}\n        fill={stroke ? 'none' : 'currentColor'}\n        stroke={stroke ? 'currentColor' : undefined}\n        strokeWidth={stroke ? ATL_ICON_STROKE_WIDTH : undefined}\n        strokeLinecap={stroke ? 'round' : undefined}\n        strokeLinejoin={stroke ? 'round' : undefined}\n        aria-hidden=\"true\"\n        focusable=\"false\"\n      >\n        {geometry.paths.map((d) => (\n          <path key={d} d={d} />\n        ))}\n      </svg>\n    </span>\n  );\n}\n"]}

package/src/lib/icons.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Icon geometry — the single source of truth for what every AtlIcon draws.
+ *
+ * Before this file, the library had four ways to draw the same thing: AtlIcon
+ * rendered Unicode glyphs and no component used it; eleven components drew 14
+ * inline `<svg>`s of their own; and two stylesheets put a literal `✕` in a CSS
+ * `content:`. The result was one concept with several drawings — `close` existed
+ * as an identical two-line SVG in five components, as a *differently drawn* X in
+ * AtlStepper, as `'×'` in AtlIcon and as `'✕'` in CSS, and `check` existed as
+ * three unrelated paths. Nothing gated it. See ADR-0046.
+ *
+ * Conventions, which every entry follows so a consumer can scale and colour icons
+ * without knowing which one they got:
+ *
+ * - **One viewBox: `0 0 24 24`.** Rendered size comes from the `size` prop, never
+ *   from the geometry, so `sm`/`md`/`lg` are the same shape at three scales.
+ * - **`stroke` icons** are drawn with `currentColor`, `stroke-width: 2`, round caps
+ *   and joins, and no fill. **`fill` icons** are solid `currentColor` silhouettes.
+ *   Mixing the two inside one icon is not allowed — it reads wrong at small sizes.
+ * - **Paths only** (no `<line>`/`<rect>`/`<polyline>`), so the renderer in each
+ *   framework is a single `<path>` loop rather than a per-primitive switch.
+ *
+ * The seven icons the library itself uses (`close`, `check`, `chevron-down`,
+ * `copy`, `person`, `sort-asc`, `sort-desc`) keep the geometry the components
+ * already shipped, normalised to the 24 viewBox. The rest are the same idiom.
+ */
+export type AtlIconKind = 'stroke' | 'fill';
+export interface AtlIconGeometry {
+    /** How the paths are painted. Never mixed within one icon. */
+    kind: AtlIconKind;
+    /** Path `d` values, drawn in order, all in the 0 0 24 24 viewBox. */
+    paths: string[];
+}
+/** viewBox shared by every icon. */
+export declare const ATL_ICON_VIEWBOX = "0 0 24 24";
+/** Stroke width for `kind: 'stroke'` icons, in viewBox units. */
+export declare const ATL_ICON_STROKE_WIDTH = 2;
+export declare const ATL_ICON_GEOMETRY: Record<string, AtlIconGeometry>;
+//# sourceMappingURL=icons.d.ts.map

package/src/lib/icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../../../libs/react/src/lib/icons.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE5C,MAAM,WAAW,eAAe;IAC9B,8DAA8D;IAC9D,IAAI,EAAE,WAAW,CAAC;IAClB,qEAAqE;IACrE,KAAK,EAAE,MAAM,EAAE,CAAC;CACjB;AAED,oCAAoC;AACpC,eAAO,MAAM,gBAAgB,cAAc,CAAC;AAE5C,iEAAiE;AACjE,eAAO,MAAM,qBAAqB,IAAI,CAAC;AAEvC,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CA4C7D,CAAC"}

package/src/lib/icons.js

@@ -0,0 +1,49 @@
+// AUTO-GENERATED from libs/spec/src/icons.ts — do not edit here.
+// Run `node tools/scripts/sync-spec.mjs` after editing the source of truth.
+// The framework libs inline this so @atelier-ui/spec stays internal.
+/** viewBox shared by every icon. */
+export const ATL_ICON_VIEWBOX = '0 0 24 24';
+/** Stroke width for `kind: 'stroke'` icons, in viewBox units. */
+export const ATL_ICON_STROKE_WIDTH = 2;
+export const ATL_ICON_GEOMETRY = {
+    // ── status ────────────────────────────────────────────────────────────────
+    // `success` is a status icon and sits beside the circled danger/error/info, so it
+    // is a circled check. `check` is the bare mark used inside controls (combobox
+    // option, stepper step, copy confirmation) — two names, two shapes, on purpose.
+    success: { kind: 'stroke', paths: ['M12 3A9 9 0 1 0 12 21A9 9 0 1 0 12 3', 'M8 12L11 15L16 9'] },
+    check: { kind: 'stroke', paths: ['M20 6L9 17L4 12'] },
+    warning: { kind: 'stroke', paths: ['M12 3L22 20H2L12 3Z', 'M12 9V14', 'M12 17.5V17.6'] },
+    danger: { kind: 'stroke', paths: ['M12 3A9 9 0 1 0 12 21A9 9 0 1 0 12 3', 'M15 9L9 15', 'M9 9L15 15'] },
+    error: { kind: 'stroke', paths: ['M12 3A9 9 0 1 0 12 21A9 9 0 1 0 12 3', 'M12 7V13', 'M12 16.5V16.6'] },
+    info: { kind: 'stroke', paths: ['M12 3A9 9 0 1 0 12 21A9 9 0 1 0 12 3', 'M12 11V17', 'M12 7.5V7.6'] },
+    // ── direction ─────────────────────────────────────────────────────────────
+    'chevron-up': { kind: 'stroke', paths: ['M6 15L12 9L18 15'] },
+    'chevron-down': { kind: 'stroke', paths: ['M6 9L12 15L18 9'] },
+    'chevron-left': { kind: 'stroke', paths: ['M15 6L9 12L15 18'] },
+    'chevron-right': { kind: 'stroke', paths: ['M9 6L15 12L9 18'] },
+    'arrow-left': { kind: 'stroke', paths: ['M19 12H5', 'M11 6L5 12L11 18'] },
+    'arrow-right': { kind: 'stroke', paths: ['M5 12H19', 'M13 6L19 12L13 18'] },
+    // ── sorting — two solid triangles, used separately by AtlTable ────────────
+    'sort-asc': { kind: 'fill', paths: ['M12 4L19 13H5L12 4Z'] },
+    'sort-desc': { kind: 'fill', paths: ['M12 20L5 11H19L12 20Z'] },
+    // ── actions ───────────────────────────────────────────────────────────────
+    close: { kind: 'stroke', paths: ['M18 6L6 18', 'M6 6L18 18'] },
+    add: { kind: 'stroke', paths: ['M12 5V19', 'M5 12H19'] },
+    more: { kind: 'fill', paths: ['M6 10A2 2 0 1 0 6 14A2 2 0 1 0 6 10', 'M12 10A2 2 0 1 0 12 14A2 2 0 1 0 12 10', 'M18 10A2 2 0 1 0 18 14A2 2 0 1 0 18 10'] },
+    copy: { kind: 'stroke', paths: ['M9 9H20V20H9V9Z', 'M15 5H4V16H5'] },
+    paste: { kind: 'stroke', paths: ['M8 4H16V7H8V4Z', 'M6 6H5V20H19V6H18'] },
+    edit: { kind: 'stroke', paths: ['M4 20H8L19 9L15 5L4 16V20Z', 'M14 6L18 10'] },
+    delete: { kind: 'stroke', paths: ['M4 7H20', 'M6 7V20H18V7', 'M10 4H14', 'M10 11V16', 'M14 11V16'] },
+    // ── content ───────────────────────────────────────────────────────────────
+    person: {
+        kind: 'fill',
+        paths: [
+            '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',
+        ],
+    },
+    'default-toast': {
+        kind: 'stroke',
+        paths: ['M4 5H20V16H13L8 20V16H4V5Z'],
+    },
+};
+//# sourceMappingURL=icons.js.map

package/src/lib/icons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.js","sourceRoot":"","sources":["../../../../../libs/react/src/lib/icons.ts"],"names":[],"mappings":"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","sourcesContent":["// AUTO-GENERATED from libs/spec/src/icons.ts — do not edit here.\n// Run `node tools/scripts/sync-spec.mjs` after editing the source of truth.\n// The framework libs inline this so @atelier-ui/spec stays internal.\n\n/**\n * Icon geometry — the single source of truth for what every AtlIcon draws.\n *\n * Before this file, the library had four ways to draw the same thing: AtlIcon\n * rendered Unicode glyphs and no component used it; eleven components drew 14\n * inline `<svg>`s of their own; and two stylesheets put a literal `✕` in a CSS\n * `content:`. The result was one concept with several drawings — `close` existed\n * as an identical two-line SVG in five components, as a *differently drawn* X in\n * AtlStepper, as `'×'` in AtlIcon and as `'✕'` in CSS, and `check` existed as\n * three unrelated paths. Nothing gated it. See ADR-0046.\n *\n * Conventions, which every entry follows so a consumer can scale and colour icons\n * without knowing which one they got:\n *\n * - **One viewBox: `0 0 24 24`.** Rendered size comes from the `size` prop, never\n *   from the geometry, so `sm`/`md`/`lg` are the same shape at three scales.\n * - **`stroke` icons** are drawn with `currentColor`, `stroke-width: 2`, round caps\n *   and joins, and no fill. **`fill` icons** are solid `currentColor` silhouettes.\n *   Mixing the two inside one icon is not allowed — it reads wrong at small sizes.\n * - **Paths only** (no `<line>`/`<rect>`/`<polyline>`), so the renderer in each\n *   framework is a single `<path>` loop rather than a per-primitive switch.\n *\n * The seven icons the library itself uses (`close`, `check`, `chevron-down`,\n * `copy`, `person`, `sort-asc`, `sort-desc`) keep the geometry the components\n * already shipped, normalised to the 24 viewBox. The rest are the same idiom.\n */\nexport type AtlIconKind = 'stroke' | 'fill';\n\nexport interface AtlIconGeometry {\n  /** How the paths are painted. Never mixed within one icon. */\n  kind: AtlIconKind;\n  /** Path `d` values, drawn in order, all in the 0 0 24 24 viewBox. */\n  paths: string[];\n}\n\n/** viewBox shared by every icon. */\nexport const ATL_ICON_VIEWBOX = '0 0 24 24';\n\n/** Stroke width for `kind: 'stroke'` icons, in viewBox units. */\nexport const ATL_ICON_STROKE_WIDTH = 2;\n\nexport const ATL_ICON_GEOMETRY: Record<string, AtlIconGeometry> = {\n  // ── status ────────────────────────────────────────────────────────────────\n  // `success` is a status icon and sits beside the circled danger/error/info, so it\n  // is a circled check. `check` is the bare mark used inside controls (combobox\n  // option, stepper step, copy confirmation) — two names, two shapes, on purpose.\n  success: { kind: 'stroke', paths: ['M12 3A9 9 0 1 0 12 21A9 9 0 1 0 12 3', 'M8 12L11 15L16 9'] },\n  check: { kind: 'stroke', paths: ['M20 6L9 17L4 12'] },\n  warning: { kind: 'stroke', paths: ['M12 3L22 20H2L12 3Z', 'M12 9V14', 'M12 17.5V17.6'] },\n  danger: { kind: 'stroke', paths: ['M12 3A9 9 0 1 0 12 21A9 9 0 1 0 12 3', 'M15 9L9 15', 'M9 9L15 15'] },\n  error: { kind: 'stroke', paths: ['M12 3A9 9 0 1 0 12 21A9 9 0 1 0 12 3', 'M12 7V13', 'M12 16.5V16.6'] },\n  info: { kind: 'stroke', paths: ['M12 3A9 9 0 1 0 12 21A9 9 0 1 0 12 3', 'M12 11V17', 'M12 7.5V7.6'] },\n\n  // ── direction ─────────────────────────────────────────────────────────────\n  'chevron-up': { kind: 'stroke', paths: ['M6 15L12 9L18 15'] },\n  'chevron-down': { kind: 'stroke', paths: ['M6 9L12 15L18 9'] },\n  'chevron-left': { kind: 'stroke', paths: ['M15 6L9 12L15 18'] },\n  'chevron-right': { kind: 'stroke', paths: ['M9 6L15 12L9 18'] },\n  'arrow-left': { kind: 'stroke', paths: ['M19 12H5', 'M11 6L5 12L11 18'] },\n  'arrow-right': { kind: 'stroke', paths: ['M5 12H19', 'M13 6L19 12L13 18'] },\n\n  // ── sorting — two solid triangles, used separately by AtlTable ────────────\n  'sort-asc': { kind: 'fill', paths: ['M12 4L19 13H5L12 4Z'] },\n  'sort-desc': { kind: 'fill', paths: ['M12 20L5 11H19L12 20Z'] },\n\n  // ── actions ───────────────────────────────────────────────────────────────\n  close: { kind: 'stroke', paths: ['M18 6L6 18', 'M6 6L18 18'] },\n  add: { kind: 'stroke', paths: ['M12 5V19', 'M5 12H19'] },\n  more: { kind: 'fill', paths: ['M6 10A2 2 0 1 0 6 14A2 2 0 1 0 6 10', 'M12 10A2 2 0 1 0 12 14A2 2 0 1 0 12 10', 'M18 10A2 2 0 1 0 18 14A2 2 0 1 0 18 10'] },\n  copy: { kind: 'stroke', paths: ['M9 9H20V20H9V9Z', 'M15 5H4V16H5'] },\n  paste: { kind: 'stroke', paths: ['M8 4H16V7H8V4Z', 'M6 6H5V20H19V6H18'] },\n  edit: { kind: 'stroke', paths: ['M4 20H8L19 9L15 5L4 16V20Z', 'M14 6L18 10'] },\n  delete: { kind: 'stroke', paths: ['M4 7H20', 'M6 7V20H18V7', 'M10 4H14', 'M10 11V16', 'M14 11V16'] },\n\n  // ── content ───────────────────────────────────────────────────────────────\n  person: {\n    kind: 'fill',\n    paths: [\n      '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    ],\n  },\n  'default-toast': {\n    kind: 'stroke',\n    paths: ['M4 5H20V16H13L8 20V16H4V5Z'],\n  },\n};\n"]}