@atelier-ui/react 0.2.41 → 0.2.43

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

@@ -103,7 +103,9 @@ export function AtlCombobox({ value = '', onValueChange, options = [], placehold
             }
             case 'Enter': {
                 e.preventDefault();
-                if (isOpen && activeIndex >= 0 && activeIndex < filteredOptions.length) {
+                if (isOpen &&
+                    activeIndex >= 0 &&
+                    activeIndex < filteredOptions.length) {
                     selectOption(filteredOptions[activeIndex]);
                 }
                 break;
@@ -130,7 +132,7 @@ export function AtlCombobox({ value = '', onValueChange, options = [], placehold
         .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, "aria-describedby": errors.length > 0 ? errorsId : undefined, disabled: disabled, readOnly: readonly, required: required, name: name, placeholder: placeholder, value: displayValue, onChange: handleInput, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeydown }), invalid && _jsx(AtlIcon, { name: "danger", size: "sm", className: "invalid-icon" }), _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: [
+    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, "aria-describedby": errors.length > 0 ? errorsId : undefined, disabled: disabled, readOnly: readonly, required: required, name: name, placeholder: placeholder, value: displayValue, onChange: handleInput, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeydown }), invalid && (_jsx(AtlIcon, { name: "danger", size: "sm", className: "invalid-icon" })), _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',

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":";AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEpE,OAAO,oBAAoB,CAAC;AAC5B,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAU3C;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,WAAW,CAAC,EAC1B,KAAK,GAAG,EAAE,EACV,aAAa,EACb,OAAO,GAAG,EAAE,EACZ,WAAW,GAAG,EAAE,EAChB,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,EACf,QAAQ,GAAG,KAAK,EAChB,IAAI,EACJ,MAAM,GAAG,EAAE,GACM;IACjB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACvC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;IAEnD,MAAM,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAChD,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAElD,MAAM,OAAO,GAAG,KAAK,EAAE,CAAC;IACxB,MAAM,OAAO,GAAG,KAAK,EAAE,CAAC;IACxB,MAAM,QAAQ,GAAG,GAAG,KAAK,EAAE,SAAS,CAAC;IAErC,MAAM,aAAa,GAAG,OAAO,CAC3B,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,EAAE,KAAK,IAAI,EAAE,EACzD,CAAC,OAAO,EAAE,KAAK,CAAC,CACjB,CAAC;IAEF,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE;QACnC,IAAI,CAAC,KAAK;YAAE,OAAO,OAAO,CAAC;QAC3B,MAAM,CAAC,GAAG,KAAK,CAAC,WAAW,EAAE,CAAC;QAC9B,OAAO,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;IAClE,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC;IAErB,MAAM,YAAY,GAAG,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC;IAEpD,6BAA6B;IAC7B,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,MAAM;YAAE,OAAO;QACpB,SAAS,WAAW,CAAC,CAAa;YAChC,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,MAAc,CAAC,EAAE,CAAC;gBACtD,SAAS,CAAC,KAAK,CAAC,CAAC;gBACjB,QAAQ,CAAC,aAAa,CAAC,CAAC;YAC1B,CAAC;QACH,CAAC;QACD,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;QAChD,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;IAClE,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC;IAE5B,SAAS,IAAI;QACX,IAAI,QAAQ,IAAI,QAAQ;YAAE,OAAO;QACjC,QAAQ,CAAC,aAAa,CAAC,CAAC;QACxB,SAAS,CAAC,IAAI,CAAC,CAAC;QAChB,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;IACrB,CAAC;IAED,SAAS,KAAK;QACZ,SAAS,CAAC,KAAK,CAAC,CAAC;QACjB,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;IACrB,CAAC;IAED,SAAS,YAAY,CAAC,MAAyB;QAC7C,IAAI,MAAM,CAAC,QAAQ,IAAI,QAAQ,IAAI,QAAQ;YAAE,OAAO;QACpD,aAAa,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC9B,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACvB,KAAK,EAAE,CAAC;QACR,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;IAC5B,CAAC;IAED,SAAS,WAAW,CAAC,CAAsC;QACzD,MAAM,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;QACzB,QAAQ,CAAC,CAAC,CAAC,CAAC;QACZ,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;QACnB,IAAI,CAAC,KAAK,EAAE;YAAE,aAAa,EAAE,CAAC,EAAE,CAAC,CAAC;QAClC,IAAI,CAAC,MAAM;YAAE,IAAI,EAAE,CAAC;IACtB,CAAC;IAED,SAAS,WAAW;QAClB,IAAI,EAAE,CAAC;IACT,CAAC;IAED,SAAS,UAAU;QACjB,QAAQ,CAAC,aAAa,CAAC,CAAC;IAC1B,CAAC;IAED,SAAS,aAAa,CAAC,CAAsB;QAC3C,QAAQ,CAAC,CAAC,GAAG,EAAE,CAAC;YACd,KAAK,WAAW,CAAC,CAAC,CAAC;gBACjB,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,MAAM,EAAE,CAAC;oBAAC,IAAI,EAAE,CAAC;oBAAC,OAAO;gBAAC,CAAC;gBAChC,cAAc,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,eAAe,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;gBACrE,MAAM;YACR,CAAC;YACD,KAAK,SAAS,CAAC,CAAC,CAAC;gBACf,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,MAAM,EAAE,CAAC;oBAAC,IAAI,EAAE,CAAC;oBAAC,OAAO;gBAAC,CAAC;gBAChC,cAAc,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;gBACxE,MAAM;YACR,CAAC;YACD,KAAK,OAAO,CAAC,CAAC,CAAC;gBACb,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,MAAM,IAAI,WAAW,IAAI,CAAC,IAAI,WAAW,GAAG,eAAe,CAAC,MAAM,EAAE,CAAC;oBACvE,YAAY,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC,CAAC;gBAC7C,CAAC;gBACD,MAAM;YACR,CAAC;YACD,KAAK,QAAQ,CAAC,CAAC,CAAC;gBACd,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,QAAQ,CAAC,aAAa,CAAC,CAAC;gBACxB,KAAK,EAAE,CAAC;gBACR,MAAM;YACR,CAAC;YACD,KAAK,KAAK,CAAC,CAAC,CAAC;gBACX,KAAK,EAAE,CAAC;gBACR,MAAM;YACR,CAAC;QACH,CAAC;IACH,CAAC;IAED,MAAM,OAAO,GAAG;QACd,cAAc;QACd,MAAM,IAAI,SAAS;QACnB,QAAQ,IAAI,aAAa;QACzB,QAAQ,IAAI,aAAa;QACzB,OAAO,IAAI,YAAY;KACxB;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,MAAM,cAAc,GAClB,WAAW,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,OAAO,WAAW,WAAW,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;IAEpE,OAAO,CACL,eAAK,SAAS,EAAE,OAAO,EAAE,GAAG,EAAE,YAAY,aACxC,eAAK,SAAS,EAAC,sBAAsB,aACnC,gBACE,GAAG,EAAE,QAAQ,EACb,SAAS,EAAC,oBAAoB,EAC9B,IAAI,EAAC,MAAM,EACX,YAAY,EAAC,KAAK,EAClB,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,OAAO,mBACI,MAAM,mBACN,OAAO,uBACJ,MAAM,2BACD,cAAc,kBACvB,OAAO,IAAI,SAAS,sBAChB,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAC1D,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,YAAY,EACnB,QAAQ,EAAE,WAAW,EACrB,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,UAAU,EAClB,SAAS,EAAE,aAAa,GACxB,EACD,OAAO,IAAI,KAAC,OAAO,IAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,cAAc,GAAG,EACxE,eAAM,SAAS,EAAC,mBAAmB,iBAAa,MAAM,YACpD,KAAC,OAAO,IAAC,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,IAAI,GAAG,GACpC,IACH,EAEL,MAAM,IAAI,CACT,aACE,EAAE,EAAE,OAAO,EACX,SAAS,EAAC,oBAAoB,EAC9B,IAAI,EAAC,SAAS,qBACG,OAAO,YAEvB,eAAe,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAC5B,eAAe,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC,CACjC,cAEE,EAAE,EAAE,GAAG,OAAO,WAAW,CAAC,EAAE,EAC5B,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE;wBACT,qBAAqB;wBACrB,WAAW,KAAK,CAAC,IAAI,WAAW;wBAChC,MAAM,CAAC,KAAK,KAAK,KAAK,IAAI,aAAa;wBACvC,MAAM,CAAC,QAAQ,IAAI,aAAa;qBACjC;yBACE,MAAM,CAAC,OAAO,CAAC;yBACf,IAAI,CAAC,GAAG,CAAC,mBACG,MAAM,CAAC,KAAK,KAAK,KAAK,mBACtB,MAAM,CAAC,QAAQ,IAAI,SAAS,EAC3C,WAAW,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,EACvC,YAAY,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC,aAErC,yBAAO,MAAM,CAAC,KAAK,GAAQ,EAC1B,MAAM,CAAC,KAAK,KAAK,KAAK,IAAI,CACzB,KAAC,OAAO,IAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,oBAAoB,GAAG,CAClE,KAnBI,MAAM,CAAC,KAAK,CAoBd,CACN,CAAC,CACH,CAAC,CAAC,CAAC,CACF,aAAI,SAAS,EAAC,yBAAyB,EAAC,IAAI,EAAC,QAAQ,mBAAgB,KAAK,mBAAgB,MAAM,kCAE3F,CACN,GACE,CACN,EAEA,MAAM,CAAC,MAAM,GAAG,CAAC,IAAI,CACpB,cAAK,SAAS,EAAC,qBAAqB,EAAC,EAAE,EAAE,QAAQ,eAAY,QAAQ,YAClE,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CACpB,YAAW,SAAS,EAAC,4BAA4B,YAAE,CAAC,IAA5C,CAAC,CAAgD,CAC1D,CAAC,GACE,CACP,IACG,CACP,CAAC;AACJ,CAAC","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  const errorsId = `${useId()}-errors`;\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          aria-describedby={errors.length > 0 ? errorsId : 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        {invalid && <AtlIcon name=\"danger\" size=\"sm\" className=\"invalid-icon\" />}\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      {errors.length > 0 && (\n        <div className=\"atl-combobox-errors\" id={errorsId} 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  const errorsId = `${useId()}-errors`;\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) {\n          open();\n          return;\n        }\n        setActiveIndex((i) => (i + 1 >= filteredOptions.length ? 0 : i + 1));\n        break;\n      }\n      case 'ArrowUp': {\n        e.preventDefault();\n        if (!isOpen) {\n          open();\n          return;\n        }\n        setActiveIndex((i) => (i - 1 < 0 ? filteredOptions.length - 1 : i - 1));\n        break;\n      }\n      case 'Enter': {\n        e.preventDefault();\n        if (\n          isOpen &&\n          activeIndex >= 0 &&\n          activeIndex < filteredOptions.length\n        ) {\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          aria-describedby={errors.length > 0 ? errorsId : 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        {invalid && (\n          <AtlIcon name=\"danger\" size=\"sm\" className=\"invalid-icon\" />\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\n                    name=\"check\"\n                    size=\"sm\"\n                    className=\"atl-combobox-check\"\n                  />\n                )}\n              </li>\n            ))\n          ) : (\n            <li\n              className=\"atl-combobox-no-results\"\n              role=\"option\"\n              aria-selected={false}\n              aria-disabled=\"true\"\n            >\n              No results found.\n            </li>\n          )}\n        </ul>\n      )}\n\n      {errors.length > 0 && (\n        <div className=\"atl-combobox-errors\" id={errorsId} aria-live=\"polite\">\n          {errors.map((e, i) => (\n            <p key={i} className=\"atl-combobox-error-message\">\n              {e}\n            </p>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n"]}

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

@@ -3,18 +3,9 @@
  * 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
-) * {
+: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;
 }
 

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;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"}
+{"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,+BA+DhB;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

@@ -52,7 +52,9 @@ export function AtlDialog({ open = false, onOpenChange, closeOnBackdrop = true,
             onOpenChange?.(false);
         }
     };
-    const effectiveAriaLabelledby = ariaLabel ? undefined : (ariaLabelledby ?? headerId);
+    const effectiveAriaLabelledby = ariaLabel
+        ? undefined
+        : (ariaLabelledby ?? headerId);
     return (_jsx(DialogContext.Provider, { value: { headerId, close: () => onOpenChange?.(false) }, children: _jsx("dialog", { ref: dialogRef, className: `atl-dialog size-${size}${open ? ' is-open' : ''}`, "aria-label": ariaLabel || undefined, "aria-labelledby": effectiveAriaLabelledby, "aria-modal": "true", onClick: handleBackdropClick, children: _jsx("div", { className: "panel", onClick: (e) => e.stopPropagation(), children: children }) }) }));
 }
 /**

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';\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"]}
+{"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\n    ? undefined\n    : (ariaLabelledby ?? headerId);\n\n  return (\n    <DialogContext.Provider\n      value={{ headerId, close: () => onOpenChange?.(false) }}\n    >\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

@@ -10,11 +10,12 @@
   .atl-drawer-host
 ),
 :is(
-  .atl-drawer-content,
-  .atl-drawer-footer,
-  .atl-drawer-header,
-  .atl-drawer-host
-) * {
+    .atl-drawer-content,
+    .atl-drawer-footer,
+    .atl-drawer-header,
+    .atl-drawer-host
+  )
+  * {
   box-sizing: border-box;
 }
 

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;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"}
+{"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,+BAoEhB;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.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';\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"]}
+{"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\n      value={{ headerId, close: () => onOpenChange?.(false) }}\n    >\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.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;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"}
+{"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;AAMrE,OAAO,gBAAgB,CAAC;AAExB;;GAEG;AACH,MAAM,WAAW,YACf,SAAQ,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,YAAY,CAAC,EAAE,WAAW;IACxE,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,+BA2Bd"}

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { ATL_ICON_GEOMETRY, ATL_ICON_STROKE_WIDTH, ATL_ICON_VIEWBOX } from '../icons';
+import { ATL_ICON_GEOMETRY, ATL_ICON_STROKE_WIDTH, ATL_ICON_VIEWBOX, } from '../icons';
 import './atl-icon.css';
 /**
  * Vector icon. Renders whichever `AtlIconName` variant is passed, drawn from
@@ -8,7 +8,9 @@ import './atl-icon.css';
  * `label` to announce a meaning to assistive tech.
  */
 export function AtlIcon({ name, size = 'md', label, className, ...rest }) {
-    const classes = ['atl-icon', `size-${size}`, className].filter(Boolean).join(' ');
+    const classes = ['atl-icon', `size-${size}`, className]
+        .filter(Boolean)
+        .join(' ');
     const accessibilityProps = label
         ? { role: 'img', 'aria-label': label }
         : { 'aria-hidden': true };

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,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. Renders whichever `AtlIconName` variant is passed, drawn from\n * the geometry in `icons.ts` so the same shape is used everywhere it appears.\n * Matches the Figma `AtlIcon` component set. Decorative by default; pass\n * `label` to announce a meaning 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"]}
+{"version":3,"file":"atl-icon.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/icon/atl-icon.tsx"],"names":[],"mappings":";AAEA,OAAO,EACL,iBAAiB,EACjB,qBAAqB,EACrB,gBAAgB,GACjB,MAAM,UAAU,CAAC;AAClB,OAAO,gBAAgB,CAAC;AAkBxB;;;;;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;SACpD,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IACb,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 {\n  ATL_ICON_GEOMETRY,\n  ATL_ICON_STROKE_WIDTH,\n  ATL_ICON_VIEWBOX,\n} from '../icons';\nimport './atl-icon.css';\n\n/**\n * Properties for the AtlIcon component.\n */\nexport interface AtlIconProps\n  extends Omit<HTMLAttributes<HTMLSpanElement>, 'aria-label'>, 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. Renders whichever `AtlIconName` variant is passed, drawn from\n * the geometry in `icons.ts` so the same shape is used everywhere it appears.\n * Matches the Figma `AtlIcon` component set. Decorative by default; pass\n * `label` to announce a meaning 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]\n    .filter(Boolean)\n    .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.map

@@ -1 +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,CAiD7D,CAAC"}
+{"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,CAuF7D,CAAC"}

package/src/lib/icons.js

@@ -10,12 +10,31 @@ export const ATL_ICON_GEOMETRY = {
     // `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'] },
+    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'] },
+    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'] },
@@ -24,8 +43,14 @@ export const ATL_ICON_GEOMETRY = {
     // Two chevrons, for "jump to the first / last page" as against "one step".
     // AtlPagination drew these as the guillemets « and », which are quotation marks
     // in typography and were arrows only by resemblance (ADR-0055).
-    'chevron-double-left': { kind: 'stroke', paths: ['M18 6L12 12L18 18', 'M11 6L5 12L11 18'] },
-    'chevron-double-right': { kind: 'stroke', paths: ['M6 6L12 12L6 18', 'M13 6L19 12L13 18'] },
+    'chevron-double-left': {
+        kind: 'stroke',
+        paths: ['M18 6L12 12L18 18', 'M11 6L5 12L11 18'],
+    },
+    'chevron-double-right': {
+        kind: 'stroke',
+        paths: ['M6 6L12 12L6 18', 'M13 6L19 12L13 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 ────────────
@@ -34,11 +59,24 @@ export const ATL_ICON_GEOMETRY = {
     // ── 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'] },
+    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'] },
+    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',

package/src/lib/icons.js.map

@@ -1 +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  // Two chevrons, for \"jump to the first / last page\" as against \"one step\".\n  // AtlPagination drew these as the guillemets « and », which are quotation marks\n  // in typography and were arrows only by resemblance (ADR-0055).\n  'chevron-double-left': { kind: 'stroke', paths: ['M18 6L12 12L18 18', 'M11 6L5 12L11 18'] },\n  'chevron-double-right': { kind: 'stroke', paths: ['M6 6L12 12L6 18', 'M13 6L19 12L13 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"]}
+{"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: {\n    kind: 'stroke',\n    paths: ['M12 3A9 9 0 1 0 12 21A9 9 0 1 0 12 3', 'M8 12L11 15L16 9'],\n  },\n  check: { kind: 'stroke', paths: ['M20 6L9 17L4 12'] },\n  warning: {\n    kind: 'stroke',\n    paths: ['M12 3L22 20H2L12 3Z', 'M12 9V14', 'M12 17.5V17.6'],\n  },\n  danger: {\n    kind: 'stroke',\n    paths: ['M12 3A9 9 0 1 0 12 21A9 9 0 1 0 12 3', 'M15 9L9 15', 'M9 9L15 15'],\n  },\n  error: {\n    kind: 'stroke',\n    paths: [\n      'M12 3A9 9 0 1 0 12 21A9 9 0 1 0 12 3',\n      'M12 7V13',\n      'M12 16.5V16.6',\n    ],\n  },\n  info: {\n    kind: 'stroke',\n    paths: ['M12 3A9 9 0 1 0 12 21A9 9 0 1 0 12 3', 'M12 11V17', 'M12 7.5V7.6'],\n  },\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  // Two chevrons, for \"jump to the first / last page\" as against \"one step\".\n  // AtlPagination drew these as the guillemets « and », which are quotation marks\n  // in typography and were arrows only by resemblance (ADR-0055).\n  'chevron-double-left': {\n    kind: 'stroke',\n    paths: ['M18 6L12 12L18 18', 'M11 6L5 12L11 18'],\n  },\n  'chevron-double-right': {\n    kind: 'stroke',\n    paths: ['M6 6L12 12L6 18', 'M13 6L19 12L13 18'],\n  },\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: {\n    kind: 'fill',\n    paths: [\n      'M6 10A2 2 0 1 0 6 14A2 2 0 1 0 6 10',\n      'M12 10A2 2 0 1 0 12 14A2 2 0 1 0 12 10',\n      'M18 10A2 2 0 1 0 18 14A2 2 0 1 0 18 10',\n    ],\n  },\n  copy: { kind: 'stroke', paths: ['M9 9H20V20H9V9Z', 'M15 5H4V16H5'] },\n  paste: { kind: 'stroke', paths: ['M8 4H16V7H8V4Z', 'M6 6H5V20H19V6H18'] },\n  edit: {\n    kind: 'stroke',\n    paths: ['M4 20H8L19 9L15 5L4 16V20Z', 'M14 6L18 10'],\n  },\n  delete: {\n    kind: 'stroke',\n    paths: ['M4 7H20', 'M6 7V20H18V7', 'M10 4H14', 'M10 11V16', 'M14 11V16'],\n  },\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"]}

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

@@ -23,7 +23,11 @@
   width: 100%;
   min-height: var(--ui-control-height-md);
   padding: calc(
-      (var(--ui-control-height-md) - var(--ui-line-height-tight) * var(--ui-font-size-md)) / 2 - var(--ui-border-width)
+      (
+          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-size: inherit;
@@ -35,9 +39,10 @@
   background-color: var(--ui-color-input-bg);
   border: var(--ui-border-width) solid var(--ui-color-input-border);
   border-radius: var(--ui-radius-md);
-  transition: border-color var(--ui-transition-fast),
-              box-shadow var(--ui-transition-fast),
-              background-color var(--ui-transition-fast);
+  transition:
+    border-color var(--ui-transition-fast),
+    box-shadow var(--ui-transition-fast),
+    background-color var(--ui-transition-fast);
   outline: none;
   box-sizing: border-box;
 }
@@ -83,7 +88,6 @@
   pointer-events: none;
 }
 
-
 /* Disabled state */
 .atl-input.is-disabled {
   opacity: var(--ui-opacity-disabled);

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

@@ -1 +1 @@
-{"version":3,"file":"atl-input.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/input/atl-input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAS,MAAM,OAAO,CAAC;AACnD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC5C,OAAO,iBAAiB,CAAC;AAGzB;;GAEG;AACH,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC,EACtE,YAAY;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,KAAK,CAAC;IAChE;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,wBAAgB,QAAQ,CAAC,EACvB,IAAa,EACb,KAAK,EACL,QAAQ,EACR,aAAa,EACb,OAAe,EACf,MAAW,EACX,QAAgB,EAChB,QAAQ,EAAE,aAAa,EACvB,QAAQ,EAAE,YAAY,EACtB,QAAgB,EAChB,KAAK,EACL,SAAS,EACT,EAAE,EACF,GAAG,IAAI,EACR,EAAE,aAAa,+BAqDf"}
+{"version":3,"file":"atl-input.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/input/atl-input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAS,MAAM,OAAO,CAAC;AACnD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC5C,OAAO,iBAAiB,CAAC;AAGzB;;GAEG;AACH,MAAM,WAAW,aACf,SACE,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC,EAChE,YAAY;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,KAAK,CAAC;IAChE;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,wBAAgB,QAAQ,CAAC,EACvB,IAAa,EACb,KAAK,EACL,QAAQ,EACR,aAAa,EACb,OAAe,EACf,MAAW,EACX,QAAgB,EAChB,QAAQ,EAAE,aAAa,EACvB,QAAQ,EAAE,YAAY,EACtB,QAAgB,EAChB,KAAK,EACL,SAAS,EACT,EAAE,EACF,GAAG,IAAI,EACR,EAAE,aAAa,+BAuDf"}

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

@@ -25,6 +25,6 @@ export function AtlInput({ type = 'text', value, onChange, onValueChange, invali
         onValueChange?.(e.target.value);
     };
     const errorId = inputId ? `${inputId}-errors` : undefined;
-    return (_jsxs("div", { className: classes, children: [label && _jsx("label", { htmlFor: inputId, children: label }), _jsxs("div", { className: "input-field", children: [_jsx("input", { id: inputId, type: type, value: value, onChange: handleChange, disabled: disabled, readOnly: readOnly, required: required, "aria-invalid": invalid || undefined, "aria-required": required || undefined, "aria-describedby": errors.length > 0 ? errorId : undefined, ...rest }), invalid && _jsx(AtlIcon, { name: "danger", size: "sm", className: "invalid-icon" })] }), 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: [label && _jsx("label", { htmlFor: inputId, children: label }), _jsxs("div", { className: "input-field", children: [_jsx("input", { id: inputId, type: type, value: value, onChange: handleChange, disabled: disabled, readOnly: readOnly, required: required, "aria-invalid": invalid || undefined, "aria-required": required || undefined, "aria-describedby": errors.length > 0 ? errorId : undefined, ...rest }), invalid && (_jsx(AtlIcon, { name: "danger", size: "sm", className: "invalid-icon" }))] }), 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-input.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"atl-input.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/input/atl-input.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAuB,KAAK,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,iBAAiB,CAAC;AACzB,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAsC3C;;GAEG;AACH,MAAM,UAAU,QAAQ,CAAC,EACvB,IAAI,GAAG,MAAM,EACb,KAAK,EACL,QAAQ,EACR,aAAa,EACb,OAAO,GAAG,KAAK,EACf,MAAM,GAAG,EAAE,EACX,QAAQ,GAAG,KAAK,EAChB,QAAQ,EAAE,aAAa,EACvB,QAAQ,EAAE,YAAY,EACtB,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,SAAS,EACT,EAAE,EACF,GAAG,IAAI,EACO;IACd,MAAM,QAAQ,GAAG,aAAa,IAAI,YAAY,IAAI,KAAK,CAAC;IACxD,4EAA4E;IAC5E,oEAAoE;IACpE,MAAM,WAAW,GAAG,KAAK,EAAE,CAAC;IAC5B,MAAM,OAAO,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,WAAW,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IACnE,MAAM,OAAO,GAAG;QACd,WAAW;QACX,OAAO,IAAI,YAAY;QACvB,QAAQ,IAAI,aAAa;QACzB,QAAQ,IAAI,aAAa;QACzB,SAAS;KACV;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,MAAM,YAAY,GAAG,CAAC,CAAsC,EAAE,EAAE;QAC9D,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC;QACd,aAAa,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAClC,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;IAE1D,OAAO,CACL,eAAK,SAAS,EAAE,OAAO,aACpB,KAAK,IAAI,gBAAO,OAAO,EAAE,OAAO,YAAG,KAAK,GAAS,EAClD,eAAK,SAAS,EAAC,aAAa,aAC1B,gBACE,EAAE,EAAE,OAAO,EACX,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,YAAY,EACtB,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,KACrD,IAAI,GACR,EACD,OAAO,IAAI,KAAC,OAAO,IAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,cAAc,GAAG,IACpE,EACL,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, useId } from 'react';\nimport type { AtlInputSpec } from '../spec';\nimport './atl-input.css';\nimport { AtlIcon } from '../icon/atl-icon';\n\n/**\n * Properties for the AtlInput component.\n */\nexport interface AtlInputProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'readOnly'>,\n    AtlInputSpec {\n  /**\n   * The type of input to render.\n   */\n  type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url';\n  /**\n   * The current value of the input.\n   */\n  value?: string;\n  /**\n   * Callback triggered when the value changes.\n   */\n  onValueChange?: (value: string) => void;\n  /**\n   * Whether the input is in an invalid state.\n   */\n  invalid?: boolean;\n  /**\n   * Array of error messages to display.\n   */\n  errors?: string[];\n  /**\n   * The label for the input.\n   */\n  label?: string;\n  /**\n   * Whether the input is read-only.\n   */\n  readOnly?: boolean;\n}\n\n/**\n * A versatile input component for text entry.\n */\nexport function AtlInput({\n  type = 'text',\n  value,\n  onChange,\n  onValueChange,\n  invalid = false,\n  errors = [],\n  disabled = false,\n  readOnly: reactReadOnly,\n  readonly: specReadOnly,\n  required = false,\n  label,\n  className,\n  id,\n  ...rest\n}: AtlInputProps) {\n  const readOnly = reactReadOnly ?? specReadOnly ?? false;\n  // useId(), not a slug derived from the label text: two inputs with the same\n  // label used to collide on one id and break the for/id association.\n  const generatedId = useId();\n  const inputId = id || (label ? `input-${generatedId}` : undefined);\n  const classes = [\n    'atl-input',\n    invalid && 'is-invalid',\n    disabled && 'is-disabled',\n    readOnly && 'is-readonly',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    onChange?.(e);\n    onValueChange?.(e.target.value);\n  };\n\n  const errorId = inputId ? `${inputId}-errors` : undefined;\n\n  return (\n    <div className={classes}>\n      {label && <label htmlFor={inputId}>{label}</label>}\n      <div className=\"input-field\">\n        <input\n          id={inputId}\n          type={type}\n          value={value}\n          onChange={handleChange}\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          {...rest}\n        />\n        {invalid && <AtlIcon name=\"danger\" size=\"sm\" className=\"invalid-icon\" />}\n      </div>\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-input.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/input/atl-input.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAuB,KAAK,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,iBAAiB,CAAC;AACzB,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAuC3C;;GAEG;AACH,MAAM,UAAU,QAAQ,CAAC,EACvB,IAAI,GAAG,MAAM,EACb,KAAK,EACL,QAAQ,EACR,aAAa,EACb,OAAO,GAAG,KAAK,EACf,MAAM,GAAG,EAAE,EACX,QAAQ,GAAG,KAAK,EAChB,QAAQ,EAAE,aAAa,EACvB,QAAQ,EAAE,YAAY,EACtB,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,SAAS,EACT,EAAE,EACF,GAAG,IAAI,EACO;IACd,MAAM,QAAQ,GAAG,aAAa,IAAI,YAAY,IAAI,KAAK,CAAC;IACxD,4EAA4E;IAC5E,oEAAoE;IACpE,MAAM,WAAW,GAAG,KAAK,EAAE,CAAC;IAC5B,MAAM,OAAO,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,WAAW,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IACnE,MAAM,OAAO,GAAG;QACd,WAAW;QACX,OAAO,IAAI,YAAY;QACvB,QAAQ,IAAI,aAAa;QACzB,QAAQ,IAAI,aAAa;QACzB,SAAS;KACV;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,MAAM,YAAY,GAAG,CAAC,CAAsC,EAAE,EAAE;QAC9D,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC;QACd,aAAa,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAClC,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;IAE1D,OAAO,CACL,eAAK,SAAS,EAAE,OAAO,aACpB,KAAK,IAAI,gBAAO,OAAO,EAAE,OAAO,YAAG,KAAK,GAAS,EAClD,eAAK,SAAS,EAAC,aAAa,aAC1B,gBACE,EAAE,EAAE,OAAO,EACX,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,YAAY,EACtB,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,KACrD,IAAI,GACR,EACD,OAAO,IAAI,CACV,KAAC,OAAO,IAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,cAAc,GAAG,CAC7D,IACG,EACL,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, useId } from 'react';\nimport type { AtlInputSpec } from '../spec';\nimport './atl-input.css';\nimport { AtlIcon } from '../icon/atl-icon';\n\n/**\n * Properties for the AtlInput component.\n */\nexport interface AtlInputProps\n  extends\n    Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'readOnly'>,\n    AtlInputSpec {\n  /**\n   * The type of input to render.\n   */\n  type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url';\n  /**\n   * The current value of the input.\n   */\n  value?: string;\n  /**\n   * Callback triggered when the value changes.\n   */\n  onValueChange?: (value: string) => void;\n  /**\n   * Whether the input is in an invalid state.\n   */\n  invalid?: boolean;\n  /**\n   * Array of error messages to display.\n   */\n  errors?: string[];\n  /**\n   * The label for the input.\n   */\n  label?: string;\n  /**\n   * Whether the input is read-only.\n   */\n  readOnly?: boolean;\n}\n\n/**\n * A versatile input component for text entry.\n */\nexport function AtlInput({\n  type = 'text',\n  value,\n  onChange,\n  onValueChange,\n  invalid = false,\n  errors = [],\n  disabled = false,\n  readOnly: reactReadOnly,\n  readonly: specReadOnly,\n  required = false,\n  label,\n  className,\n  id,\n  ...rest\n}: AtlInputProps) {\n  const readOnly = reactReadOnly ?? specReadOnly ?? false;\n  // useId(), not a slug derived from the label text: two inputs with the same\n  // label used to collide on one id and break the for/id association.\n  const generatedId = useId();\n  const inputId = id || (label ? `input-${generatedId}` : undefined);\n  const classes = [\n    'atl-input',\n    invalid && 'is-invalid',\n    disabled && 'is-disabled',\n    readOnly && 'is-readonly',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    onChange?.(e);\n    onValueChange?.(e.target.value);\n  };\n\n  const errorId = inputId ? `${inputId}-errors` : undefined;\n\n  return (\n    <div className={classes}>\n      {label && <label htmlFor={inputId}>{label}</label>}\n      <div className=\"input-field\">\n        <input\n          id={inputId}\n          type={type}\n          value={value}\n          onChange={handleChange}\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          {...rest}\n        />\n        {invalid && (\n          <AtlIcon name=\"danger\" size=\"sm\" className=\"invalid-icon\" />\n        )}\n      </div>\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/menu/atl-menu.css

@@ -3,18 +3,8 @@
  * 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-menu,
-  .atl-menu-item,
-  .atl-menu-panel,
-  .atl-menu-separator
-),
-:is(
-  .atl-menu,
-  .atl-menu-item,
-  .atl-menu-panel,
-  .atl-menu-separator
-) * {
+:is(.atl-menu, .atl-menu-item, .atl-menu-panel, .atl-menu-separator),
+:is(.atl-menu, .atl-menu-item, .atl-menu-panel, .atl-menu-separator) * {
   box-sizing: border-box;
 }
 
@@ -39,7 +29,8 @@
   overflow: hidden;
 
   /* Entry animation */
-  animation: atl-menu-enter var(--ui-duration-normal) var(--ui-ease-out) forwards;
+  animation: atl-menu-enter var(--ui-duration-normal) var(--ui-ease-out)
+    forwards;
 }
 
 .atl-menu.variant-compact {
@@ -53,7 +44,13 @@
    * 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: calc((var(--ui-control-height-sm) - var(--ui-line-height-tight) * var(--ui-font-size-sm)) / 2)
+  padding: calc(
+      (
+          var(--ui-control-height-sm) - var(--ui-line-height-tight) *
+            var(--ui-font-size-sm)
+        ) /
+        2
+    )
     var(--ui-spacing-3);
 }
 

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

@@ -1 +1 @@
-{"version":3,"file":"atl-menu.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/menu/atl-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,SAAS,EACT,cAAc,EACd,SAAS,EACV,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EACV,WAAW,EACX,eAAe,EAChB,MAAM,SAAS,CAAC;AACjB,OAAO,gBAAgB,CAAC;AAQxB;;GAEG;AACH,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,cAAc,CAAC,EAAE,WAAW;IAC/E;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;GAEG;AACH,wBAAgB,OAAO,CAAC,EAAE,OAAmB,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,YAAY,+BAO1F;AAED;;GAEG;AACH,MAAM,WAAW,gBACf,SAAQ,cAAc,CAAC,iBAAiB,CAAC,EACvC,eAAe;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAgB,EAChB,WAAW,EACX,QAAQ,EACR,SAAS,EACT,OAAO,EACP,GAAG,IAAI,EACR,EAAE,gBAAgB,+BAyBlB;AAED;;GAEG;AACH,wBAAgB,gBAAgB,gCAE/B;AAED;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,IAAI,EAAE,SAAS,CAAC;IAChB;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE;QAChB,OAAO,EAAE,MAAM,IAAI,CAAC;QACpB,GAAG,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;KACpC,KAAK,SAAS,CAAC;CACjB;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,mBAAmB,+BAsDrE"}
+{"version":3,"file":"atl-menu.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/menu/atl-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,SAAS,EACT,cAAc,EACd,SAAS,EACV,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC5D,OAAO,gBAAgB,CAAC;AAQxB;;GAEG;AACH,MAAM,WAAW,YACf,SAAQ,cAAc,CAAC,cAAc,CAAC,EAAE,WAAW;IACnD;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;GAEG;AACH,wBAAgB,OAAO,CAAC,EACtB,OAAmB,EACnB,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,YAAY,+BASd;AAED;;GAEG;AACH,MAAM,WAAW,gBACf,SAAQ,cAAc,CAAC,iBAAiB,CAAC,EAAE,eAAe;IAC1D;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAgB,EAChB,WAAW,EACX,QAAQ,EACR,SAAS,EACT,OAAO,EACP,GAAG,IAAI,EACR,EAAE,gBAAgB,+BAyBlB;AAED;;GAEG;AACH,wBAAgB,gBAAgB,gCAE/B;AAED;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,IAAI,EAAE,SAAS,CAAC;IAChB;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE;QAChB,OAAO,EAAE,MAAM,IAAI,CAAC;QACpB,GAAG,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;KACpC,KAAK,SAAS,CAAC;CACjB;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,mBAAmB,+BAsDrE"}

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

@@ -6,7 +6,9 @@ const MenuContext = createContext({ close: () => undefined });
  * A menu component for displaying a list of choices.
  */
 export function AtlMenu({ variant = 'default', children, className, ...rest }) {
-    const classes = ['atl-menu', `variant-${variant}`, className].filter(Boolean).join(' ');
+    const classes = ['atl-menu', `variant-${variant}`, className]
+        .filter(Boolean)
+        .join(' ');
     return (_jsx("div", { className: classes, role: "menu", ...rest, children: children }));
 }
 /**