@atelier-ui/react 0.2.13 → 0.2.15

package/src/lib/spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"spec.js","sourceRoot":"","sources":["../../../../../libs/react/src/lib/spec.ts"],"names":[],"mappings":"AAAA,iEAAiE;AACjE,4EAA4E;AAC5E,4EAA4E","sourcesContent":["// AUTO-GENERATED from libs/spec/src/index.ts — do not edit here.\n// Run `node tools/scripts/sync-spec.mjs` after editing the source of truth.\n// The framework libs inline these types so @atelier-ui/spec stays internal.\n\n/**\n * @atelier-ui/spec\n *\n * Framework-agnostic TypeScript interfaces defining the public API contract\n * for every Atelier component. Both the Angular and React libraries\n * import from here so the compiler enforces parity.\n *\n * Angular: use the union types as `input<T>()` type parameters.\n * React: extend the spec interface from the framework-specific props interface.\n */\n\n// ---------------------------------------------------------------------------\n// Button\n// ---------------------------------------------------------------------------\nexport type AtlButtonVariant = 'primary' | 'secondary' | 'outline' | 'danger';\nexport type AtlButtonSize = 'sm' | 'md' | 'lg';\nexport interface AtlButtonSpec {\n  variant?: AtlButtonVariant;\n  size?: AtlButtonSize;\n  disabled?: boolean;\n  loading?: boolean;\n  /**\n   * Accessible name — rendered as `aria-label`. Required when the\n   * button has no visible text label (icon-only buttons), otherwise\n   * the button is unnamed for assistive tech. The React adapter\n   * encodes this requirement at the type level via a discriminated\n   * union; the Angular and Vue adapters log a dev-mode warning when\n   * a rendered button has no accessible name.\n   */\n  'aria-label'?: string;\n}\n\n// ---------------------------------------------------------------------------\n// Badge\n// ---------------------------------------------------------------------------\nexport type AtlBadgeVariant = 'default' | 'success' | 'warning' | 'danger' | 'info';\nexport type AtlBadgeSize = 'sm' | 'md';\nexport interface AtlBadgeSpec {\n  variant?: AtlBadgeVariant;\n  size?: AtlBadgeSize;\n}\n\n// ---------------------------------------------------------------------------\n// Avatar / AvatarGroup\n// ---------------------------------------------------------------------------\nexport type AtlAvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\nexport type AtlAvatarShape = 'circle' | 'square';\nexport type AtlAvatarStatus = 'online' | 'offline' | 'away' | 'busy' | '';\nexport interface AtlAvatarSpec {\n  src?: string;\n  alt?: string;\n  name?: string;\n  size?: AtlAvatarSize;\n  shape?: AtlAvatarShape;\n  status?: AtlAvatarStatus;\n}\nexport interface AtlAvatarGroupSpec {\n  max?: number;\n  size?: AtlAvatarSize;\n}\n\n// ---------------------------------------------------------------------------\n// Card\n// ---------------------------------------------------------------------------\nexport type AtlCardVariant = 'elevated' | 'outlined' | 'flat';\nexport type AtlCardPadding = 'none' | 'sm' | 'md' | 'lg';\n/**\n * Optional landmark role for the card. Default behaviour is a plain\n * `<div>` — most cards group content visually and shouldn't add a\n * landmark to the page outline.\n *\n * Pick a role only when the card is meaningful as a landmark:\n *   - `'article'` for self-contained pieces of content (a blog post,\n *     a comment, a forum entry) that make sense out of context.\n *   - `'region'` for a perceivable area that needs a screen-reader\n *     stop. Pair with `aria-label` or `aria-labelledby`.\n *   - `'section'` is not a landmark by itself — equivalent to a\n *     `<section>` element. Useful when nesting structure matters.\n */\nexport type AtlCardRole = 'article' | 'region' | 'section';\nexport interface AtlCardSpec {\n  variant?: AtlCardVariant;\n  padding?: AtlCardPadding;\n  /**\n   * Opt-in landmark role. Default is no role (plain `<div>`).\n   * See {@link AtlCardRole} for when to use each value.\n   */\n  role?: AtlCardRole;\n}\n\n// ---------------------------------------------------------------------------\n// Input / Textarea (shared form field props)\n// ---------------------------------------------------------------------------\n// `any` is intentional here: downstream form-field interfaces narrow `value`\n// to the concrete primitive they accept (string, number, boolean, Date, …).\n// Using `unknown` would force every downstream consumer to redeclare the\n// property, defeating the purpose of the shared spec.\n/* eslint-disable @typescript-eslint/no-explicit-any */\nexport interface AtlFormFieldSpec {\n  value?: any;\n  onValueChange?: (value: any) => void;\n  disabled?: boolean;\n  readonly?: boolean;\n  invalid?: boolean;\n  required?: boolean;\n  name?: string;\n}\n/* eslint-enable @typescript-eslint/no-explicit-any */\n\nexport type AtlInputType = 'text' | 'email' | 'password' | 'number' | 'tel' | 'url';\nexport interface AtlInputSpec extends AtlFormFieldSpec {\n  type?: AtlInputType;\n  placeholder?: string;\n}\n\nexport interface AtlTextareaSpec extends AtlFormFieldSpec {\n  rows?: number;\n  placeholder?: string;\n  autoResize?: boolean;\n}\n\n// ---------------------------------------------------------------------------\n// Checkbox / Toggle\n// ---------------------------------------------------------------------------\n// Checkbox/Toggle are checked-based, not value-based, so they omit the\n// inherited `value`/`onValueChange` — their state is `checked`/`onCheckedChange`.\n// (Input/Textarea/RadioGroup/Select/Combobox keep the value-based pair.)\nexport interface AtlCheckboxSpec extends Omit<AtlFormFieldSpec, 'value' | 'onValueChange'> {\n  checked?: boolean;\n  onCheckedChange?: (checked: boolean) => void;\n  indeterminate?: boolean;\n}\n\nexport interface AtlToggleSpec extends Omit<AtlFormFieldSpec, 'value' | 'onValueChange'> {\n  checked?: boolean;\n  onCheckedChange?: (checked: boolean) => void;\n}\n\n// ---------------------------------------------------------------------------\n// Radio / RadioGroup\n// ---------------------------------------------------------------------------\nexport interface AtlRadioSpec {\n  radioValue: string;\n  disabled?: boolean;\n}\n\nexport interface AtlRadioGroupSpec extends AtlFormFieldSpec {\n  value?: string;\n}\n\n// ---------------------------------------------------------------------------\n// Select / Option\n// ---------------------------------------------------------------------------\nexport interface AtlSelectSpec extends AtlFormFieldSpec {\n  placeholder?: string;\n}\n\nexport interface AtlOptionSpec {\n  optionValue: string;\n  disabled?: boolean;\n}\n\n// ---------------------------------------------------------------------------\n// Stepper\n// ---------------------------------------------------------------------------\nexport interface AtlStepperSpec {\n  activeStep?: number;\n  orientation?: 'horizontal' | 'vertical';\n  linear?: boolean;\n}\n\nexport interface AtlStepSpec {\n  label: string;\n  description?: string;\n  completed?: boolean;\n  error?: boolean;\n  optional?: boolean;\n  disabled?: boolean;\n}\n\n// ---------------------------------------------------------------------------\n// Combobox\n// ---------------------------------------------------------------------------\nexport interface AtlComboboxOption {\n  value: string;\n  label: string;\n  disabled?: boolean;\n}\n\nexport interface AtlComboboxSpec extends AtlFormFieldSpec {\n  options?: AtlComboboxOption[];\n  placeholder?: string;\n}\n\n// ---------------------------------------------------------------------------\n// Alert\n// ---------------------------------------------------------------------------\nexport type AtlAlertVariant = 'info' | 'success' | 'warning' | 'danger';\nexport interface AtlAlertSpec {\n  variant?: AtlAlertVariant;\n  dismissible?: boolean;\n}\n\n// ---------------------------------------------------------------------------\n// Dialog\n// ---------------------------------------------------------------------------\nexport type AtlDialogSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';\nexport interface AtlDialogSpec {\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  closeOnBackdrop?: boolean;\n  size?: AtlDialogSize;\n}\n\n// ---------------------------------------------------------------------------\n// TabGroup / Tab\n// ---------------------------------------------------------------------------\nexport type AtlTabGroupVariant = 'default' | 'pills';\nexport interface AtlTabGroupSpec {\n  selectedIndex?: number;\n  onSelectedIndexChange?: (index: number) => void;\n  variant?: AtlTabGroupVariant;\n}\n\nexport interface AtlTabSpec {\n  label: string;\n  disabled?: boolean;\n}\n\n// ---------------------------------------------------------------------------\n// AccordionGroup / AccordionItem\n// ---------------------------------------------------------------------------\nexport type AtlAccordionGroupVariant = 'default' | 'bordered' | 'separated';\nexport interface AtlAccordionGroupSpec {\n  multi?: boolean;\n  variant?: AtlAccordionGroupVariant;\n}\n\nexport type AtlAccordionHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;\nexport interface AtlAccordionItemSpec {\n  expanded?: boolean;\n  onExpandedChange?: (expanded: boolean) => void;\n  disabled?: boolean;\n  /**\n   * HTML heading level wrapping the trigger button. Default `3`.\n   * Set this to match your page's heading outline so the\n   * accordion's section titles don't break heading order.\n   * Example: if the accordion is nested under an `<h2>`, pass\n   * `headingLevel={3}` (default); if nested under an `<h3>`, pass\n   * `headingLevel={4}`.\n   */\n  headingLevel?: AtlAccordionHeadingLevel;\n}\n\n// ---------------------------------------------------------------------------\n// Menu / MenuItem\n// ---------------------------------------------------------------------------\nexport type AtlMenuVariant = 'default' | 'compact';\nexport interface AtlMenuSpec {\n  variant?: AtlMenuVariant;\n}\n\nexport interface AtlMenuItemSpec {\n  disabled?: boolean;\n}\n\n// ---------------------------------------------------------------------------\n// Tooltip\n// ---------------------------------------------------------------------------\nexport type AtlTooltipPosition = 'above' | 'below' | 'left' | 'right';\nexport interface AtlTooltipSpec {\n  atlTooltip: string;\n  atlTooltipPosition?: AtlTooltipPosition;\n  atlTooltipDisabled?: boolean;\n  atlTooltipShowDelay?: number;\n  atlTooltipHideDelay?: number;\n}\n\n// ---------------------------------------------------------------------------\n// Toast\n// ---------------------------------------------------------------------------\nexport type AtlToastVariant = 'default' | 'success' | 'warning' | 'danger' | 'info';\nexport type AtlToastContainerPosition =\n  | 'top-right'\n  | 'top-center'\n  | 'bottom-right'\n  | 'bottom-center';\nexport interface AtlToastOptions {\n  variant?: AtlToastVariant;\n  duration?: number;\n  dismissible?: boolean;\n}\n\n// ---------------------------------------------------------------------------\n// Skeleton\n// ---------------------------------------------------------------------------\nexport type AtlSkeletonVariant = 'text' | 'circular' | 'rectangular';\nexport interface AtlSkeletonSpec {\n  variant?: AtlSkeletonVariant;\n  width?: string;\n  height?: string;\n  animated?: boolean;\n}\n\n// ---------------------------------------------------------------------------\n// Breadcrumbs / BreadcrumbItem\n// ---------------------------------------------------------------------------\nexport interface AtlBreadcrumbsSpec {\n  separator?: string;\n}\n\nexport interface AtlBreadcrumbItemSpec {\n  href?: string;\n  current?: boolean;\n}\n\n// ---------------------------------------------------------------------------\n// Pagination\n// ---------------------------------------------------------------------------\nexport interface AtlPaginationSpec {\n  page?: number;\n  pageCount?: number;\n  siblingCount?: number;\n  showFirstLast?: boolean;\n}\n\n// ---------------------------------------------------------------------------\n// Progress\n// ---------------------------------------------------------------------------\nexport type AtlProgressVariant = 'default' | 'success' | 'warning' | 'danger';\nexport type AtlProgressSize = 'sm' | 'md' | 'lg';\nexport interface AtlProgressSpec {\n  value?: number;\n  max?: number;\n  variant?: AtlProgressVariant;\n  size?: AtlProgressSize;\n  indeterminate?: boolean;\n  /**\n   * Accessible name for the progress bar — rendered as `aria-label`.\n   * Required by ARIA when there is no visible label nearby; without it\n   * screen readers announce only \"progress bar 47%\". Examples:\n   * `\"Upload progress\"`, `\"Form completion\"`, `\"Quota usage\"`.\n   */\n  label?: string;\n}\n\n// ---------------------------------------------------------------------------\n// Drawer\n// ---------------------------------------------------------------------------\nexport type AtlDrawerPosition = 'left' | 'right' | 'top' | 'bottom';\nexport type AtlDrawerSize = 'sm' | 'md' | 'lg' | 'full';\nexport interface AtlDrawerSpec {\n  open?: boolean;\n  position?: AtlDrawerPosition;\n  size?: AtlDrawerSize;\n  closeOnBackdrop?: boolean;\n}\n\n// ---------------------------------------------------------------------------\n// Table\n// ---------------------------------------------------------------------------\nexport type AtlTableVariant = 'default' | 'striped' | 'bordered';\nexport type AtlTableSize = 'sm' | 'md' | 'lg';\nexport type AtlSortDirection = 'asc' | 'desc' | null;\nexport type AtlTableAlign = 'start' | 'center' | 'end';\n\nexport interface AtlTableSpec {\n  variant?: AtlTableVariant;\n  size?: AtlTableSize;\n  stickyHeader?: boolean;\n  /**\n   * Accessible name for the scrollable table region. The wrapper\n   * around the `<table>` is keyboard-focusable (tabindex=0) so that\n   * users can scroll horizontally; this label is what screen readers\n   * announce when focus enters the region. Defaults to `\"Table\"`.\n   */\n  'aria-label'?: string;\n}\n\nexport interface AtlTbodySpec {\n  empty?: boolean;\n  colSpan?: number;\n}\n\nexport interface AtlTrSpec {\n  selected?: boolean;\n  selectable?: boolean;\n  rowId?: string;\n}\n\nexport interface AtlThSpec {\n  sortable?: boolean;\n  sortDirection?: AtlSortDirection;\n  align?: AtlTableAlign;\n  width?: string;\n}\n\nexport interface AtlTdSpec {\n  align?: AtlTableAlign;\n}\n\n// ---------------------------------------------------------------------------\n// Icon\n// ---------------------------------------------------------------------------\nexport type AtlIconName =\n  | 'success'\n  | 'warning'\n  | 'danger'\n  | 'info'\n  | 'error'\n  | 'chevron-up'\n  | 'chevron-down'\n  | 'chevron-left'\n  | 'chevron-right'\n  | 'sort-asc'\n  | 'sort-desc'\n  | 'arrow-right'\n  | 'arrow-left'\n  | 'copy'\n  | 'paste'\n  | 'add'\n  | 'edit'\n  | 'delete'\n  | 'close'\n  | 'more'\n  | 'default-toast';\nexport type AtlIconSize = 'sm' | 'md' | 'lg';\nexport interface AtlIconSpec {\n  name: AtlIconName;\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 (treated\n   * as decorative).\n   */\n  label?: string;\n}\n\n// ---------------------------------------------------------------------------\n// Chat (AI surface)\n// ---------------------------------------------------------------------------\nexport type AtlChatVariant = 'drawer' | 'popup' | 'inline';\nexport type AtlChatStatus = 'idle' | 'streaming' | 'error';\nexport type AtlChatMessageRole = 'user' | 'assistant' | 'system';\n\nexport interface AtlChatMessageSpec {\n  id: string;\n  role: AtlChatMessageRole;\n  content: string;\n  failed?: boolean;\n}\n\nexport interface AtlChatSuggestionSpec {\n  id: string;\n  label: string;\n  hint?: string;\n}\n\nexport interface AtlChatSpec {\n  variant?: AtlChatVariant;\n  status?: AtlChatStatus;\n  open?: boolean;\n}\n"]}
+{"version":3,"file":"spec.js","sourceRoot":"","sources":["../../../../../libs/react/src/lib/spec.ts"],"names":[],"mappings":"AAAA,iEAAiE;AACjE,4EAA4E;AAC5E,qEAAqE","sourcesContent":["// AUTO-GENERATED from libs/spec/src/index.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 * @atelier-ui/spec\n *\n * Framework-agnostic TypeScript interfaces defining the public API contract\n * for every Atelier component. Both the Angular and React libraries\n * import from here so the compiler enforces parity.\n *\n * Angular: use the union types as `input<T>()` type parameters.\n * React: extend the spec interface from the framework-specific props interface.\n */\n\n// ---------------------------------------------------------------------------\n// Button\n// ---------------------------------------------------------------------------\nexport type AtlButtonVariant = 'primary' | 'secondary' | 'outline' | 'danger';\nexport type AtlButtonSize = 'sm' | 'md' | 'lg';\nexport interface AtlButtonSpec {\n  variant?: AtlButtonVariant;\n  size?: AtlButtonSize;\n  disabled?: boolean;\n  loading?: boolean;\n  /**\n   * Accessible name — rendered as `aria-label`. Required when the\n   * button has no visible text label (icon-only buttons), otherwise\n   * the button is unnamed for assistive tech. The React adapter\n   * encodes this requirement at the type level via a discriminated\n   * union; the Angular and Vue adapters log a dev-mode warning when\n   * a rendered button has no accessible name.\n   */\n  'aria-label'?: string;\n}\n\n// ---------------------------------------------------------------------------\n// Badge\n// ---------------------------------------------------------------------------\nexport type AtlBadgeVariant = 'default' | 'success' | 'warning' | 'danger' | 'info';\nexport type AtlBadgeSize = 'sm' | 'md';\nexport interface AtlBadgeSpec {\n  variant?: AtlBadgeVariant;\n  size?: AtlBadgeSize;\n}\n\n// ---------------------------------------------------------------------------\n// Avatar / AvatarGroup\n// ---------------------------------------------------------------------------\nexport type AtlAvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\nexport type AtlAvatarShape = 'circle' | 'square';\nexport type AtlAvatarStatus = 'online' | 'offline' | 'away' | 'busy' | '';\nexport interface AtlAvatarSpec {\n  src?: string;\n  alt?: string;\n  name?: string;\n  size?: AtlAvatarSize;\n  shape?: AtlAvatarShape;\n  status?: AtlAvatarStatus;\n}\nexport interface AtlAvatarGroupSpec {\n  max?: number;\n  size?: AtlAvatarSize;\n}\n\n// ---------------------------------------------------------------------------\n// Card\n// ---------------------------------------------------------------------------\nexport type AtlCardVariant = 'elevated' | 'outlined' | 'flat';\nexport type AtlCardPadding = 'none' | 'sm' | 'md' | 'lg';\n/**\n * Optional landmark role for the card. Default behaviour is a plain\n * `<div>` — most cards group content visually and shouldn't add a\n * landmark to the page outline.\n *\n * Pick a role only when the card is meaningful as a landmark:\n *   - `'article'` for self-contained pieces of content (a blog post,\n *     a comment, a forum entry) that make sense out of context.\n *   - `'region'` for a perceivable area that needs a screen-reader\n *     stop. Pair with `aria-label` or `aria-labelledby`.\n *   - `'section'` is not a landmark by itself — equivalent to a\n *     `<section>` element. Useful when nesting structure matters.\n */\nexport type AtlCardRole = 'article' | 'region' | 'section';\nexport interface AtlCardSpec {\n  variant?: AtlCardVariant;\n  padding?: AtlCardPadding;\n  /**\n   * Opt-in landmark role. Default is no role (plain `<div>`).\n   * See {@link AtlCardRole} for when to use each value.\n   */\n  role?: AtlCardRole;\n}\n\n// ---------------------------------------------------------------------------\n// Input / Textarea (shared form field props)\n// ---------------------------------------------------------------------------\n// `any` is intentional here: downstream form-field interfaces narrow `value`\n// to the concrete primitive they accept (string, number, boolean, Date, …).\n// Using `unknown` would force every downstream consumer to redeclare the\n// property, defeating the purpose of the shared spec.\n/* eslint-disable @typescript-eslint/no-explicit-any */\nexport interface AtlFormFieldSpec {\n  value?: any;\n  onValueChange?: (value: any) => void;\n  disabled?: boolean;\n  invalid?: boolean;\n  required?: boolean;\n  name?: string;\n}\n\n/**\n * `readonly` — the value is shown and submitted, but the user cannot change it.\n *\n * Deliberately NOT part of `AtlFormFieldSpec`. It used to be, and the four choice\n * controls that inherited it could not keep the promise: HTML ignores `readonly`\n * on `<input type=\"checkbox\">` and `<input type=\"radio\">`, and\n * `HTMLSelectElement` has no `readOnly` property at all — measured, the user\n * still flipped the control and `onCheckedChange` still fired. A prop that\n * silently does nothing is worse than an absent one, so this mixin is applied\n * only where the state is actually enforced: natively by the text fields, and by\n * an explicit guard in AtlCombobox and AtlRadioGroup. See ADR-0045.\n */\nexport interface AtlReadonlySpec {\n  readonly?: boolean;\n}\n/* eslint-enable @typescript-eslint/no-explicit-any */\n\nexport type AtlInputType = 'text' | 'email' | 'password' | 'number' | 'tel' | 'url';\nexport interface AtlInputSpec extends AtlFormFieldSpec, AtlReadonlySpec {\n  type?: AtlInputType;\n  placeholder?: string;\n}\n\nexport interface AtlTextareaSpec extends AtlFormFieldSpec, AtlReadonlySpec {\n  rows?: number;\n  placeholder?: string;\n  autoResize?: boolean;\n}\n\n// ---------------------------------------------------------------------------\n// Checkbox / Toggle\n// ---------------------------------------------------------------------------\n// Checkbox/Toggle are checked-based, not value-based, so they omit the\n// inherited `value`/`onValueChange` — their state is `checked`/`onCheckedChange`.\n// (Input/Textarea/RadioGroup/Select/Combobox keep the value-based pair.)\nexport interface AtlCheckboxSpec extends Omit<AtlFormFieldSpec, 'value' | 'onValueChange'> {\n  checked?: boolean;\n  onCheckedChange?: (checked: boolean) => void;\n  indeterminate?: boolean;\n}\n\nexport interface AtlToggleSpec extends Omit<AtlFormFieldSpec, 'value' | 'onValueChange'> {\n  checked?: boolean;\n  onCheckedChange?: (checked: boolean) => void;\n}\n\n// ---------------------------------------------------------------------------\n// Radio / RadioGroup\n// ---------------------------------------------------------------------------\nexport interface AtlRadioSpec {\n  radioValue: string;\n  disabled?: boolean;\n}\n\nexport interface AtlRadioGroupSpec extends AtlFormFieldSpec, AtlReadonlySpec {\n  value?: string;\n}\n\n// ---------------------------------------------------------------------------\n// Select / Option\n// ---------------------------------------------------------------------------\nexport interface AtlSelectSpec extends AtlFormFieldSpec {\n  placeholder?: string;\n}\n\nexport interface AtlOptionSpec {\n  optionValue: string;\n  disabled?: boolean;\n}\n\n// ---------------------------------------------------------------------------\n// Stepper\n// ---------------------------------------------------------------------------\nexport interface AtlStepperSpec {\n  activeStep?: number;\n  orientation?: 'horizontal' | 'vertical';\n  linear?: boolean;\n}\n\nexport interface AtlStepSpec {\n  label: string;\n  description?: string;\n  completed?: boolean;\n  error?: boolean;\n  optional?: boolean;\n  disabled?: boolean;\n}\n\n// ---------------------------------------------------------------------------\n// Combobox\n// ---------------------------------------------------------------------------\nexport interface AtlComboboxOption {\n  value: string;\n  label: string;\n  disabled?: boolean;\n}\n\nexport interface AtlComboboxSpec extends AtlFormFieldSpec, AtlReadonlySpec {\n  options?: AtlComboboxOption[];\n  placeholder?: string;\n}\n\n// ---------------------------------------------------------------------------\n// Alert\n// ---------------------------------------------------------------------------\nexport type AtlAlertVariant = 'info' | 'success' | 'warning' | 'danger';\nexport interface AtlAlertSpec {\n  variant?: AtlAlertVariant;\n  dismissible?: boolean;\n}\n\n// ---------------------------------------------------------------------------\n// Dialog\n// ---------------------------------------------------------------------------\nexport type AtlDialogSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';\nexport interface AtlDialogSpec {\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  closeOnBackdrop?: boolean;\n  size?: AtlDialogSize;\n}\n\n// ---------------------------------------------------------------------------\n// TabGroup / Tab\n// ---------------------------------------------------------------------------\nexport type AtlTabGroupVariant = 'default' | 'pills';\nexport interface AtlTabGroupSpec {\n  selectedIndex?: number;\n  onSelectedIndexChange?: (index: number) => void;\n  variant?: AtlTabGroupVariant;\n}\n\nexport interface AtlTabSpec {\n  label: string;\n  disabled?: boolean;\n}\n\n// ---------------------------------------------------------------------------\n// AccordionGroup / AccordionItem\n// ---------------------------------------------------------------------------\nexport type AtlAccordionGroupVariant = 'default' | 'bordered' | 'separated';\nexport interface AtlAccordionGroupSpec {\n  multi?: boolean;\n  variant?: AtlAccordionGroupVariant;\n}\n\nexport type AtlAccordionHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;\nexport interface AtlAccordionItemSpec {\n  expanded?: boolean;\n  onExpandedChange?: (expanded: boolean) => void;\n  disabled?: boolean;\n  /**\n   * HTML heading level wrapping the trigger button. Default `3`.\n   * Set this to match your page's heading outline so the\n   * accordion's section titles don't break heading order.\n   * Example: if the accordion is nested under an `<h2>`, pass\n   * `headingLevel={3}` (default); if nested under an `<h3>`, pass\n   * `headingLevel={4}`.\n   */\n  headingLevel?: AtlAccordionHeadingLevel;\n}\n\n// ---------------------------------------------------------------------------\n// Menu / MenuItem\n// ---------------------------------------------------------------------------\nexport type AtlMenuVariant = 'default' | 'compact';\nexport interface AtlMenuSpec {\n  variant?: AtlMenuVariant;\n}\n\nexport interface AtlMenuItemSpec {\n  disabled?: boolean;\n}\n\n// ---------------------------------------------------------------------------\n// Tooltip\n// ---------------------------------------------------------------------------\nexport type AtlTooltipPosition = 'above' | 'below' | 'left' | 'right';\nexport interface AtlTooltipSpec {\n  atlTooltip: string;\n  atlTooltipPosition?: AtlTooltipPosition;\n  atlTooltipDisabled?: boolean;\n  atlTooltipShowDelay?: number;\n  atlTooltipHideDelay?: number;\n}\n\n// ---------------------------------------------------------------------------\n// Toast\n// ---------------------------------------------------------------------------\nexport type AtlToastVariant = 'default' | 'success' | 'warning' | 'danger' | 'info';\nexport type AtlToastContainerPosition =\n  | 'top-right'\n  | 'top-center'\n  | 'bottom-right'\n  | 'bottom-center';\nexport interface AtlToastOptions {\n  variant?: AtlToastVariant;\n  duration?: number;\n  dismissible?: boolean;\n}\n\n// ---------------------------------------------------------------------------\n// Skeleton\n// ---------------------------------------------------------------------------\nexport type AtlSkeletonVariant = 'text' | 'circular' | 'rectangular';\nexport interface AtlSkeletonSpec {\n  variant?: AtlSkeletonVariant;\n  width?: string;\n  height?: string;\n  animated?: boolean;\n}\n\n// ---------------------------------------------------------------------------\n// Breadcrumbs / BreadcrumbItem\n// ---------------------------------------------------------------------------\nexport interface AtlBreadcrumbsSpec {\n  separator?: string;\n}\n\nexport interface AtlBreadcrumbItemSpec {\n  href?: string;\n  current?: boolean;\n}\n\n// ---------------------------------------------------------------------------\n// Pagination\n// ---------------------------------------------------------------------------\nexport interface AtlPaginationSpec {\n  page?: number;\n  pageCount?: number;\n  siblingCount?: number;\n  showFirstLast?: boolean;\n}\n\n// ---------------------------------------------------------------------------\n// Progress\n// ---------------------------------------------------------------------------\nexport type AtlProgressVariant = 'default' | 'success' | 'warning' | 'danger';\nexport type AtlProgressSize = 'sm' | 'md' | 'lg';\nexport interface AtlProgressSpec {\n  value?: number;\n  max?: number;\n  variant?: AtlProgressVariant;\n  size?: AtlProgressSize;\n  indeterminate?: boolean;\n  /**\n   * Accessible name for the progress bar — rendered as `aria-label`.\n   * Required by ARIA when there is no visible label nearby; without it\n   * screen readers announce only \"progress bar 47%\". Examples:\n   * `\"Upload progress\"`, `\"Form completion\"`, `\"Quota usage\"`.\n   */\n  label?: string;\n}\n\n// ---------------------------------------------------------------------------\n// Drawer\n// ---------------------------------------------------------------------------\nexport type AtlDrawerPosition = 'left' | 'right' | 'top' | 'bottom';\nexport type AtlDrawerSize = 'sm' | 'md' | 'lg' | 'full';\nexport interface AtlDrawerSpec {\n  open?: boolean;\n  position?: AtlDrawerPosition;\n  size?: AtlDrawerSize;\n  closeOnBackdrop?: boolean;\n}\n\n// ---------------------------------------------------------------------------\n// Table\n// ---------------------------------------------------------------------------\nexport type AtlTableVariant = 'default' | 'striped' | 'bordered';\nexport type AtlTableSize = 'sm' | 'md' | 'lg';\nexport type AtlSortDirection = 'asc' | 'desc' | null;\nexport type AtlTableAlign = 'start' | 'center' | 'end';\n\nexport interface AtlTableSpec {\n  variant?: AtlTableVariant;\n  size?: AtlTableSize;\n  stickyHeader?: boolean;\n  /**\n   * Accessible name for the scrollable table region. The wrapper\n   * around the `<table>` is keyboard-focusable (tabindex=0) so that\n   * users can scroll horizontally; this label is what screen readers\n   * announce when focus enters the region. Defaults to `\"Table\"`.\n   */\n  'aria-label'?: string;\n}\n\nexport interface AtlTbodySpec {\n  empty?: boolean;\n  colSpan?: number;\n}\n\nexport interface AtlTrSpec {\n  selected?: boolean;\n  selectable?: boolean;\n  rowId?: string;\n}\n\nexport interface AtlThSpec {\n  sortable?: boolean;\n  sortDirection?: AtlSortDirection;\n  align?: AtlTableAlign;\n  width?: string;\n}\n\nexport interface AtlTdSpec {\n  align?: AtlTableAlign;\n}\n\n// ---------------------------------------------------------------------------\n// Icon\n// ---------------------------------------------------------------------------\nexport type AtlIconName =\n  | 'success'\n  | 'check'\n  | 'warning'\n  | 'danger'\n  | 'info'\n  | 'error'\n  | 'chevron-up'\n  | 'chevron-down'\n  | 'chevron-left'\n  | 'chevron-right'\n  | 'sort-asc'\n  | 'sort-desc'\n  | 'arrow-right'\n  | 'arrow-left'\n  | 'copy'\n  | 'paste'\n  | 'add'\n  | 'edit'\n  | 'delete'\n  | 'close'\n  | 'more'\n  | 'person'\n  | 'default-toast';\nexport type AtlIconSize = 'sm' | 'md' | 'lg';\nexport interface AtlIconSpec {\n  name: AtlIconName;\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 (treated\n   * as decorative).\n   */\n  label?: string;\n}\n\n// ---------------------------------------------------------------------------\n// Chat (AI surface)\n// ---------------------------------------------------------------------------\nexport type AtlChatVariant = 'drawer' | 'popup' | 'inline';\nexport type AtlChatStatus = 'idle' | 'streaming' | 'error';\nexport type AtlChatMessageRole = 'user' | 'assistant' | 'system';\n\nexport interface AtlChatMessageSpec {\n  id: string;\n  role: AtlChatMessageRole;\n  content: string;\n  failed?: boolean;\n}\n\nexport interface AtlChatSuggestionSpec {\n  id: string;\n  label: string;\n  hint?: string;\n}\n\nexport interface AtlChatSpec {\n  variant?: AtlChatVariant;\n  status?: AtlChatStatus;\n  open?: boolean;\n}\n"]}

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

@@ -1,3 +1,13 @@
+/* Geometry contract: every size this component states is a border-box size.
+ * Declared with the component rather than as a global reset, so it ships in the
+ * same file as the sizes it governs and no consuming app has to supply one.
+ * Gated by check:box-sizing; the resulting boxes are measured by check:geometry.
+ * See ADR-0043. */
+.atl-stepper,
+.atl-stepper * {
+  box-sizing: border-box;
+}
+
 .atl-stepper {
   display: block;
   font-family: var(--ui-font-family);
@@ -41,7 +51,7 @@
   width: 36px;
   height: 36px;
   border-radius: 50%;
-  border: 2px solid var(--ui-color-border);
+  border: var(--ui-border-width-thick) solid var(--ui-color-border);
   background: var(--ui-color-surface);
   color: var(--ui-color-text-muted);
   font-size: var(--ui-font-size-sm);

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

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

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

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment, createContext, useContext, useState, Children, isValidElement, useMemo, } from 'react';
 import './atl-stepper.css';
+import { AtlIcon } from '../icon/atl-icon';
 const StepperContext = createContext({
     activeStep: 0,
     setActiveStep: () => undefined,
@@ -79,7 +80,7 @@ export function AtlStepper({ activeStep: externalStep, onActiveStepChange, orien
                         ]
                             .filter(Boolean)
                             .join(' ');
-                        return (_jsxs(Fragment, { children: [_jsxs("div", { className: itemClass, children: [_jsx("button", { type: "button", role: "tab", id: `atl-step-${i}`, className: "step-circle", "aria-label": step.label, "aria-selected": isActive, "aria-controls": `atl-step-panel-${i}`, "aria-disabled": step.disabled || undefined, tabIndex: isActive ? 0 : -1, disabled: step.disabled, onClick: () => goTo(i), children: step.completed && !step.error ? (_jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M2 7L5.5 10.5L12 3.5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })) : step.error ? (_jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M3 3L11 11M11 3L3 11", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) })) : (i + 1) }), _jsxs("div", { className: "step-text", children: [_jsx("span", { className: "step-label", children: step.label }), step.description && (_jsx("span", { className: "step-description", children: step.description })), step.optional && !step.completed && (_jsx("span", { className: "step-optional", children: "Optional" }))] })] }), i < steps.length - 1 && (_jsx("div", { className: ['step-connector', (activeStep > i || step.completed) && 'is-active']
+                        return (_jsxs(Fragment, { children: [_jsxs("div", { className: itemClass, children: [_jsx("button", { type: "button", role: "tab", id: `atl-step-${i}`, className: "step-circle", "aria-label": step.label, "aria-selected": isActive, "aria-controls": `atl-step-panel-${i}`, "aria-disabled": step.disabled || undefined, tabIndex: isActive ? 0 : -1, disabled: step.disabled, onClick: () => goTo(i), children: step.completed && !step.error ? (_jsx(AtlIcon, { name: "check", size: "sm" })) : step.error ? (_jsx(AtlIcon, { name: "close", size: "sm" })) : (i + 1) }), _jsxs("div", { className: "step-text", children: [_jsx("span", { className: "step-label", children: step.label }), step.description && (_jsx("span", { className: "step-description", children: step.description })), step.optional && !step.completed && (_jsx("span", { className: "step-optional", children: "Optional" }))] })] }), i < steps.length - 1 && (_jsx("div", { className: ['step-connector', (activeStep > i || step.completed) && 'is-active']
                                         .filter(Boolean)
                                         .join(' ') }))] }, i));
                     }) }), _jsx("div", { className: "stepper-content", children: stepPanels.map((panel, i) => {

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

@@ -1 +1 @@
-{"version":3,"file":"atl-stepper.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/stepper/atl-stepper.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Fragment,\n  createContext,\n  useContext,\n  useState,\n  ReactNode,\n  HTMLAttributes,\n  Children,\n  isValidElement,\n  useMemo,\n  ReactElement,\n} from 'react';\nimport type { AtlStepperSpec, AtlStepSpec } from '../spec';\nimport './atl-stepper.css';\n\ninterface StepInfo {\n  label: string;\n  description?: string;\n  completed: boolean;\n  error: boolean;\n  optional: boolean;\n  disabled: boolean;\n}\n\ninterface StepperContextValue {\n  activeStep: number;\n  setActiveStep: (i: number) => void;\n  steps: StepInfo[];\n  linear: boolean;\n  next(): void;\n  prev(): void;\n  goTo(i: number): void;\n}\n\nconst StepperContext = createContext<StepperContextValue>({\n  activeStep: 0,\n  setActiveStep: () => undefined,\n  steps: [],\n  linear: false,\n  next: () => undefined,\n  prev: () => undefined,\n  goTo: () => undefined,\n});\n\n/** Access stepper navigation from within step content. */\nexport function useAtlStepper() {\n  return useContext(StepperContext);\n}\n\nexport interface AtlStepperProps\n  extends HTMLAttributes<HTMLDivElement>,\n    AtlStepperSpec {\n  /** Currently active step index. */\n  activeStep?: number;\n  /** Callback when the active step changes. */\n  onActiveStepChange?: (index: number) => void;\n  /** Layout orientation. */\n  orientation?: 'horizontal' | 'vertical';\n  /** Restrict forward navigation until previous steps are completed. */\n  linear?: boolean;\n  children?: ReactNode;\n}\n\nexport function AtlStepper({\n  activeStep: externalStep,\n  onActiveStepChange,\n  orientation = 'horizontal',\n  linear = false,\n  children,\n  className,\n  ...rest\n}: AtlStepperProps) {\n  const [internalStep, setInternalStep] = useState(externalStep ?? 0);\n  const isControlled = externalStep !== undefined;\n  const activeStep = isControlled ? externalStep : internalStep;\n\n  const setStep = (i: number) => {\n    if (!isControlled) setInternalStep(i);\n    onActiveStepChange?.(i);\n  };\n\n  const childArray = Children.toArray(children);\n  const steps: StepInfo[] = useMemo(\n    () =>\n      childArray\n        .filter(\n          (c) =>\n            isValidElement(c) &&\n            (c.type as { displayName?: string }).displayName === 'AtlStep'\n        )\n        .map((c) => {\n          const element = c as ReactElement<AtlStepProps>;\n          return {\n            label: element.props.label ?? '',\n            description: element.props.description,\n            completed: element.props.completed ?? false,\n            error: element.props.error ?? false,\n            optional: element.props.optional ?? false,\n            disabled: element.props.disabled ?? false,\n          };\n        }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [children]\n  );\n\n  const goTo = (i: number) => {\n    if (i < 0 || i >= steps.length) return;\n    if (steps[i]?.disabled) return;\n    if (linear && i > activeStep) {\n      const canAdvance = steps.slice(0, i).every((s) => s.completed || s.optional);\n      if (!canAdvance) return;\n    }\n    setStep(i);\n  };\n\n  const next = () => goTo(activeStep + 1);\n  const prev = () => {\n    const p = activeStep - 1;\n    if (p >= 0 && !steps[p]?.disabled) setStep(p);\n  };\n\n  const classes = [\n    'atl-stepper',\n    `orientation-${orientation}`,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const stepPanels = childArray.filter(\n    (c) =>\n      isValidElement(c) &&\n      (c.type as { displayName?: string }).displayName === 'AtlStep'\n  );\n\n  return (\n    <StepperContext.Provider value={{ activeStep, setActiveStep: setStep, steps, linear, next, prev, goTo }}>\n      <div className={classes} {...rest}>\n        <div className=\"stepper-header\" role=\"tablist\">\n          {steps.map((step, i) => {\n            const isActive = activeStep === i;\n            const isCompleted = step.completed && !isActive;\n            const itemClass = [\n              'step-item',\n              isActive && 'is-active',\n              isCompleted && 'is-completed',\n              step.error && 'is-error',\n              step.disabled && 'is-disabled',\n            ]\n              .filter(Boolean)\n              .join(' ');\n\n            return (\n              <Fragment key={i}>\n                <div className={itemClass}>\n                  <button\n                    type=\"button\"\n                    role=\"tab\"\n                    id={`atl-step-${i}`}\n                    className=\"step-circle\"\n                    aria-label={step.label}\n                    aria-selected={isActive}\n                    aria-controls={`atl-step-panel-${i}`}\n                    aria-disabled={step.disabled || undefined}\n                    tabIndex={isActive ? 0 : -1}\n                    disabled={step.disabled}\n                    onClick={() => goTo(i)}\n                  >\n                    {step.completed && !step.error ? (\n                      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" aria-hidden=\"true\">\n                        <path d=\"M2 7L5.5 10.5L12 3.5\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n                      </svg>\n                    ) : step.error ? (\n                      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" aria-hidden=\"true\">\n                        <path d=\"M3 3L11 11M11 3L3 11\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" />\n                      </svg>\n                    ) : (\n                      i + 1\n                    )}\n                  </button>\n                  <div className=\"step-text\">\n                    <span className=\"step-label\">{step.label}</span>\n                    {step.description && (\n                      <span className=\"step-description\">{step.description}</span>\n                    )}\n                    {step.optional && !step.completed && (\n                      <span className=\"step-optional\">Optional</span>\n                    )}\n                  </div>\n                </div>\n                {i < steps.length - 1 && (\n                  <div\n                    className={['step-connector', (activeStep > i || step.completed) && 'is-active']\n                      .filter(Boolean)\n                      .join(' ')}\n                  />\n                )}\n              </Fragment>\n            );\n          })}\n        </div>\n        <div className=\"stepper-content\">\n          {stepPanels.map((panel, i) => {\n            const element = panel as ReactElement<AtlStepProps>;\n            return (\n              <div\n                key={i}\n                id={`atl-step-panel-${i}`}\n                role=\"tabpanel\"\n                aria-labelledby={`atl-step-${i}`}\n                tabIndex={0}\n                hidden={i !== activeStep}\n              >\n                {element.props.children}\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    </StepperContext.Provider>\n  );\n}\n\nexport interface AtlStepProps extends AtlStepSpec {\n  /** Text displayed on the step indicator. Required. */\n  label: string;\n  /** Optional subtitle. */\n  description?: string;\n  /** Mark as completed (shows checkmark). */\n  completed?: boolean;\n  /** Mark as errored (shows X). */\n  error?: boolean;\n  /** Mark as optional. */\n  optional?: boolean;\n  /** Whether the step is disabled. */\n  disabled?: boolean;\n  children?: ReactNode;\n}\n\nexport function AtlStep({ children }: AtlStepProps) {\n  return children;\n}\nAtlStep.displayName = 'AtlStep';\n"]}
+{"version":3,"file":"atl-stepper.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/stepper/atl-stepper.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Fragment,\n  createContext,\n  useContext,\n  useState,\n  ReactNode,\n  HTMLAttributes,\n  Children,\n  isValidElement,\n  useMemo,\n  ReactElement,\n} from 'react';\nimport type { AtlStepperSpec, AtlStepSpec } from '../spec';\nimport './atl-stepper.css';\nimport { AtlIcon } from '../icon/atl-icon';\n\ninterface StepInfo {\n  label: string;\n  description?: string;\n  completed: boolean;\n  error: boolean;\n  optional: boolean;\n  disabled: boolean;\n}\n\ninterface StepperContextValue {\n  activeStep: number;\n  setActiveStep: (i: number) => void;\n  steps: StepInfo[];\n  linear: boolean;\n  next(): void;\n  prev(): void;\n  goTo(i: number): void;\n}\n\nconst StepperContext = createContext<StepperContextValue>({\n  activeStep: 0,\n  setActiveStep: () => undefined,\n  steps: [],\n  linear: false,\n  next: () => undefined,\n  prev: () => undefined,\n  goTo: () => undefined,\n});\n\n/** Access stepper navigation from within step content. */\nexport function useAtlStepper() {\n  return useContext(StepperContext);\n}\n\nexport interface AtlStepperProps\n  extends HTMLAttributes<HTMLDivElement>,\n    AtlStepperSpec {\n  /** Currently active step index. */\n  activeStep?: number;\n  /** Callback when the active step changes. */\n  onActiveStepChange?: (index: number) => void;\n  /** Layout orientation. */\n  orientation?: 'horizontal' | 'vertical';\n  /** Restrict forward navigation until previous steps are completed. */\n  linear?: boolean;\n  children?: ReactNode;\n}\n\nexport function AtlStepper({\n  activeStep: externalStep,\n  onActiveStepChange,\n  orientation = 'horizontal',\n  linear = false,\n  children,\n  className,\n  ...rest\n}: AtlStepperProps) {\n  const [internalStep, setInternalStep] = useState(externalStep ?? 0);\n  const isControlled = externalStep !== undefined;\n  const activeStep = isControlled ? externalStep : internalStep;\n\n  const setStep = (i: number) => {\n    if (!isControlled) setInternalStep(i);\n    onActiveStepChange?.(i);\n  };\n\n  const childArray = Children.toArray(children);\n  const steps: StepInfo[] = useMemo(\n    () =>\n      childArray\n        .filter(\n          (c) =>\n            isValidElement(c) &&\n            (c.type as { displayName?: string }).displayName === 'AtlStep'\n        )\n        .map((c) => {\n          const element = c as ReactElement<AtlStepProps>;\n          return {\n            label: element.props.label ?? '',\n            description: element.props.description,\n            completed: element.props.completed ?? false,\n            error: element.props.error ?? false,\n            optional: element.props.optional ?? false,\n            disabled: element.props.disabled ?? false,\n          };\n        }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [children]\n  );\n\n  const goTo = (i: number) => {\n    if (i < 0 || i >= steps.length) return;\n    if (steps[i]?.disabled) return;\n    if (linear && i > activeStep) {\n      const canAdvance = steps.slice(0, i).every((s) => s.completed || s.optional);\n      if (!canAdvance) return;\n    }\n    setStep(i);\n  };\n\n  const next = () => goTo(activeStep + 1);\n  const prev = () => {\n    const p = activeStep - 1;\n    if (p >= 0 && !steps[p]?.disabled) setStep(p);\n  };\n\n  const classes = [\n    'atl-stepper',\n    `orientation-${orientation}`,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const stepPanels = childArray.filter(\n    (c) =>\n      isValidElement(c) &&\n      (c.type as { displayName?: string }).displayName === 'AtlStep'\n  );\n\n  return (\n    <StepperContext.Provider value={{ activeStep, setActiveStep: setStep, steps, linear, next, prev, goTo }}>\n      <div className={classes} {...rest}>\n        <div className=\"stepper-header\" role=\"tablist\">\n          {steps.map((step, i) => {\n            const isActive = activeStep === i;\n            const isCompleted = step.completed && !isActive;\n            const itemClass = [\n              'step-item',\n              isActive && 'is-active',\n              isCompleted && 'is-completed',\n              step.error && 'is-error',\n              step.disabled && 'is-disabled',\n            ]\n              .filter(Boolean)\n              .join(' ');\n\n            return (\n              <Fragment key={i}>\n                <div className={itemClass}>\n                  <button\n                    type=\"button\"\n                    role=\"tab\"\n                    id={`atl-step-${i}`}\n                    className=\"step-circle\"\n                    aria-label={step.label}\n                    aria-selected={isActive}\n                    aria-controls={`atl-step-panel-${i}`}\n                    aria-disabled={step.disabled || undefined}\n                    tabIndex={isActive ? 0 : -1}\n                    disabled={step.disabled}\n                    onClick={() => goTo(i)}\n                  >\n                    {step.completed && !step.error ? (\n                      <AtlIcon name=\"check\" size=\"sm\" />\n                    ) : step.error ? (\n                      <AtlIcon name=\"close\" size=\"sm\" />\n                    ) : (\n                      i + 1\n                    )}\n                  </button>\n                  <div className=\"step-text\">\n                    <span className=\"step-label\">{step.label}</span>\n                    {step.description && (\n                      <span className=\"step-description\">{step.description}</span>\n                    )}\n                    {step.optional && !step.completed && (\n                      <span className=\"step-optional\">Optional</span>\n                    )}\n                  </div>\n                </div>\n                {i < steps.length - 1 && (\n                  <div\n                    className={['step-connector', (activeStep > i || step.completed) && 'is-active']\n                      .filter(Boolean)\n                      .join(' ')}\n                  />\n                )}\n              </Fragment>\n            );\n          })}\n        </div>\n        <div className=\"stepper-content\">\n          {stepPanels.map((panel, i) => {\n            const element = panel as ReactElement<AtlStepProps>;\n            return (\n              <div\n                key={i}\n                id={`atl-step-panel-${i}`}\n                role=\"tabpanel\"\n                aria-labelledby={`atl-step-${i}`}\n                tabIndex={0}\n                hidden={i !== activeStep}\n              >\n                {element.props.children}\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    </StepperContext.Provider>\n  );\n}\n\nexport interface AtlStepProps extends AtlStepSpec {\n  /** Text displayed on the step indicator. Required. */\n  label: string;\n  /** Optional subtitle. */\n  description?: string;\n  /** Mark as completed (shows checkmark). */\n  completed?: boolean;\n  /** Mark as errored (shows X). */\n  error?: boolean;\n  /** Mark as optional. */\n  optional?: boolean;\n  /** Whether the step is disabled. */\n  disabled?: boolean;\n  children?: ReactNode;\n}\n\nexport function AtlStep({ children }: AtlStepProps) {\n  return children;\n}\nAtlStep.displayName = 'AtlStep';\n"]}

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

@@ -1,3 +1,31 @@
+/* Geometry contract: every size this component states is a border-box size.
+ * Declared with the component rather than as a global reset, so it ships in the
+ * same file as the sizes it governs and no consuming app has to supply one.
+ * Gated by check:box-sizing; the resulting boxes are measured by check:geometry.
+ * See ADR-0043. */
+:is(
+  .atl-table,
+  .atl-table-wrapper,
+  .atl-tbody-empty-cell,
+  .atl-th-sort-asc-arrow,
+  .atl-th-sort-btn,
+  .atl-th-sort-desc-arrow,
+  .atl-th-sort-icon,
+  .atl-tr-select-cell
+),
+:is(
+  .atl-table,
+  .atl-table-wrapper,
+  .atl-tbody-empty-cell,
+  .atl-th-sort-asc-arrow,
+  .atl-th-sort-btn,
+  .atl-th-sort-desc-arrow,
+  .atl-th-sort-icon,
+  .atl-tr-select-cell
+) * {
+  box-sizing: border-box;
+}
+
 /* ============================================================
    atl-table.css — Styles for the React table component
    ============================================================ */
@@ -30,7 +58,7 @@
   color: var(--ui-color-text-muted);
   letter-spacing: var(--ui-letter-spacing-wide);
   text-transform: uppercase;
-  border-bottom: 2px solid var(--ui-color-border);
+  border-bottom: var(--ui-border-width-thick) solid var(--ui-color-border);
   background-color: var(--ui-color-surface);
   padding: var(--ui-spacing-3) var(--ui-spacing-4);
   text-align: start;
@@ -41,7 +69,7 @@
    Body cells
    --------------------------------------------------------------------------- */
 .atl-table tbody td {
-  border-bottom: 1px solid var(--ui-color-border);
+  border-bottom: var(--ui-border-width) solid var(--ui-color-border);
   padding: var(--ui-spacing-3) var(--ui-spacing-4);
   vertical-align: middle;
   background-color: var(--ui-color-surface);
@@ -81,7 +109,7 @@
 /* Bordered: all cell borders */
 .atl-table.variant-bordered thead th,
 .atl-table.variant-bordered tbody td {
-  border: 1px solid var(--ui-color-border);
+  border: var(--ui-border-width) solid var(--ui-color-border);
 }
 
 /* ---------------------------------------------------------------------------
@@ -163,9 +191,20 @@ td.align-end {
 }
 
 .atl-th-sort-icon {
+  /* The asc/desc arrows were two paths in one svg; as two AtlIcons they stack
+   * vertically in the same space the single icon occupied (ADR-0046). */
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
   flex-shrink: 0;
 }
 
+.atl-table .atl-th-sort-icon .atl-icon {
+  width: 0.625rem;
+  height: 0.5rem;
+}
+
 .atl-th-sort-asc-arrow,
 .atl-th-sort-desc-arrow {
   opacity: 0.25;

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

@@ -1 +1 @@
-{"version":3,"file":"atl-table.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/table/atl-table.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAC;AACtF,OAAO,KAAK,EACV,YAAY,EACZ,YAAY,EACZ,SAAS,EACT,SAAS,EACT,SAAS,EACT,gBAAgB,EACjB,MAAM,SAAS,CAAC;AAEjB,OAAO,iBAAiB,CAAC;AAEzB,YAAY,EAAE,gBAAgB,EAAE,CAAC;AAMjC,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,cAAc,CAAC,EAAE,YAAY;IACjF,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,wBAAgB,QAAQ,CAAC,EACvB,OAAmB,EACnB,IAAW,EACX,YAAoB,EACpB,QAAQ,EACR,SAAS,EACT,YAAY,EAAE,SAAS,EACvB,GAAG,IAAI,EACR,EAAE,aAAa,+BA2Bf;AAMD,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,EAAE,aAAa,+BAEnD;AAMD,MAAM,WAAW,aAAc,SAAQ,YAAY;IACjD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,sDAAsD;IACtD,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B;AAED,wBAAgB,QAAQ,CAAC,EAAE,KAAa,EAAE,OAAW,EAAE,QAAQ,EAAE,YAAY,EAAE,EAAE,aAAa,+BAc7F;AAMD,MAAM,WAAW,UAAW,SAAQ,SAAS;IAC3C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CAChD;AAED,wBAAgB,KAAK,CAAC,EACpB,QAAgB,EAChB,UAAkB,EAClB,QAAQ,EACR,gBAAgB,GACjB,EAAE,UAAU,+BAWZ;AAMD,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,EAAE,OAAO,CAAC,EAAE,SAAS;IAClG,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,MAAM,CAAC,EAAE,CAAC,SAAS,EAAE,gBAAgB,KAAK,IAAI,CAAC;CAChD;AAED,wBAAgB,KAAK,CAAC,EACpB,QAAgB,EAChB,aAAoB,EACpB,KAAe,EACf,KAAK,EACL,QAAQ,EACR,MAAM,EACN,SAAS,EACT,GAAG,IAAI,EACR,EAAE,UAAU,+BAoDZ;AAMD,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,EAAE,OAAO,CAAC,EAAE,SAAS;IAClG,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,wBAAgB,KAAK,CAAC,EAAE,KAAe,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,UAAU,+BAOlF"}
+{"version":3,"file":"atl-table.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/table/atl-table.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAC;AACtF,OAAO,KAAK,EACV,YAAY,EACZ,YAAY,EACZ,SAAS,EACT,SAAS,EACT,SAAS,EACT,gBAAgB,EACjB,MAAM,SAAS,CAAC;AAEjB,OAAO,iBAAiB,CAAC;AAGzB,YAAY,EAAE,gBAAgB,EAAE,CAAC;AAMjC,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,cAAc,CAAC,EAAE,YAAY;IACjF,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,wBAAgB,QAAQ,CAAC,EACvB,OAAmB,EACnB,IAAW,EACX,YAAoB,EACpB,QAAQ,EACR,SAAS,EACT,YAAY,EAAE,SAAS,EACvB,GAAG,IAAI,EACR,EAAE,aAAa,+BA2Bf;AAMD,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,EAAE,aAAa,+BAEnD;AAMD,MAAM,WAAW,aAAc,SAAQ,YAAY;IACjD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,sDAAsD;IACtD,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B;AAED,wBAAgB,QAAQ,CAAC,EAAE,KAAa,EAAE,OAAW,EAAE,QAAQ,EAAE,YAAY,EAAE,EAAE,aAAa,+BAc7F;AAMD,MAAM,WAAW,UAAW,SAAQ,SAAS;IAC3C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CAChD;AAED,wBAAgB,KAAK,CAAC,EACpB,QAAgB,EAChB,UAAkB,EAClB,QAAQ,EACR,gBAAgB,GACjB,EAAE,UAAU,+BAWZ;AAMD,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,EAAE,OAAO,CAAC,EAAE,SAAS;IAClG,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,MAAM,CAAC,EAAE,CAAC,SAAS,EAAE,gBAAgB,KAAK,IAAI,CAAC;CAChD;AAED,wBAAgB,KAAK,CAAC,EACpB,QAAgB,EAChB,aAAoB,EACpB,KAAe,EACf,KAAK,EACL,QAAQ,EACR,MAAM,EACN,SAAS,EACT,GAAG,IAAI,EACR,EAAE,UAAU,+BA6CZ;AAMD,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,EAAE,OAAO,CAAC,EAAE,SAAS;IAClG,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,wBAAgB,KAAK,CAAC,EAAE,KAAe,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,UAAU,+BAOlF"}

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

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AtlCheckbox } from '../checkbox/atl-checkbox';
 import './atl-table.css';
+import { AtlIcon } from '../icon/atl-icon';
 export function AtlTable({ variant = 'default', size = 'md', stickyHeader = false, children, className, 'aria-label': ariaLabel, ...rest }) {
     const classes = [
         'atl-table',
@@ -43,7 +44,7 @@ export function AtlTh({ sortable = false, sortDirection = null, align = 'start',
         const next = sortDirection === null ? 'asc' : sortDirection === 'asc' ? 'desc' : null;
         onSort?.(next);
     }
-    return (_jsx("th", { "aria-sort": ariaSort, style: width ? { width } : undefined, className: classes, ...rest, children: sortable ? (_jsxs("button", { type: "button", className: "atl-th-sort-btn", onClick: cycleSort, children: [children, _jsxs("svg", { className: "atl-th-sort-icon", "aria-hidden": "true", width: "12", height: "16", viewBox: "0 0 12 16", fill: "none", children: [_jsx("path", { className: "atl-th-sort-asc-arrow", d: "M6 2L11 8H1L6 2Z", fill: "currentColor" }), _jsx("path", { className: "atl-th-sort-desc-arrow", d: "M6 14L1 8H11L6 14Z", fill: "currentColor" })] })] })) : (children) }));
+    return (_jsx("th", { "aria-sort": ariaSort, style: width ? { width } : undefined, className: classes, ...rest, children: sortable ? (_jsxs("button", { type: "button", className: "atl-th-sort-btn", onClick: cycleSort, children: [children, _jsxs("span", { className: "atl-th-sort-icon", "aria-hidden": "true", children: [_jsx(AtlIcon, { name: "sort-asc", size: "sm", className: "atl-th-sort-asc-arrow" }), _jsx(AtlIcon, { name: "sort-desc", size: "sm", className: "atl-th-sort-desc-arrow" })] })] })) : (children) }));
 }
 export function AtlTd({ align = 'start', children, className, ...rest }) {
     const classes = [`align-${align}`, className].filter(Boolean).join(' ');

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

@@ -1 +1 @@
-{"version":3,"file":"atl-table.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/table/atl-table.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,iBAAiB,CAAC;AAmBzB,MAAM,UAAU,QAAQ,CAAC,EACvB,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,IAAI,EACX,YAAY,GAAG,KAAK,EACpB,QAAQ,EACR,SAAS,EACT,YAAY,EAAE,SAAS,EACvB,GAAG,IAAI,EACO;IACd,MAAM,OAAO,GAAG;QACd,WAAW;QACX,WAAW,OAAO,EAAE;QACpB,QAAQ,IAAI,EAAE;QACd,YAAY,IAAI,kBAAkB;QAClC,SAAS;KACV;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,OAAO,CACL,cAAK,SAAS,EAAE,OAAO,KAAM,IAAI,YAK/B,cACE,SAAS,EAAC,mBAAmB,EAC7B,QAAQ,EAAE,CAAC,EACX,IAAI,EAAC,QAAQ,gBACD,SAAS,IAAI,OAAO,YAEhC,0BAAQ,QAAQ,GAAS,GACrB,GACF,CACP,CAAC;AACJ,CAAC;AAUD,MAAM,UAAU,QAAQ,CAAC,EAAE,QAAQ,EAAiB;IAClD,OAAO,0BAAQ,QAAQ,GAAS,CAAC;AACnC,CAAC;AAYD,MAAM,UAAU,QAAQ,CAAC,EAAE,KAAK,GAAG,KAAK,EAAE,OAAO,GAAG,CAAC,EAAE,QAAQ,EAAE,YAAY,EAAiB;IAC5F,OAAO,CACL,0BACG,CAAC,KAAK,CAAC,CAAC,CAAC,CACR,QAAQ,CACT,CAAC,CAAC,CAAC,CACF,uBACE,aAAI,OAAO,EAAE,OAAO,EAAE,SAAS,EAAC,sBAAsB,YACnD,YAAY,GACV,GACF,CACN,GACK,CACT,CAAC;AACJ,CAAC;AAWD,MAAM,UAAU,KAAK,CAAC,EACpB,QAAQ,GAAG,KAAK,EAChB,UAAU,GAAG,KAAK,EAClB,QAAQ,EACR,gBAAgB,GACL;IACX,OAAO,CACL,+BAAmB,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAAE,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,aAClG,UAAU,IAAI,CACb,aAAI,SAAS,EAAC,oBAAoB,YAChC,KAAC,WAAW,IAAC,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,gBAAgB,GAAI,GAClE,CACN,EACA,QAAQ,IACN,CACN,CAAC;AACJ,CAAC;AAWD,MAAM,UAAU,KAAK,CAAC,EACpB,QAAQ,GAAG,KAAK,EAChB,aAAa,GAAG,IAAI,EACpB,KAAK,GAAG,OAAO,EACf,KAAK,EACL,QAAQ,EACR,MAAM,EACN,SAAS,EACT,GAAG,IAAI,EACI;IACX,MAAM,OAAO,GAAG;QACd,SAAS,KAAK,EAAE;QAChB,aAAa,IAAI,WAAW;QAC5B,aAAa,KAAK,KAAK,IAAI,UAAU;QACrC,aAAa,KAAK,MAAM,IAAI,WAAW;QACvC,SAAS;KACV;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,IAAI,SAAS,CAAC;IAE1B,MAAM,QAAQ,GAAG,QAAQ;QACvB,CAAC,CAAC,aAAa,KAAK,KAAK;YACvB,CAAC,CAAC,WAAW;YACb,CAAC,CAAC,aAAa,KAAK,MAAM;gBACxB,CAAC,CAAC,YAAY;gBACd,CAAC,CAAC,MAAM;QACZ,CAAC,CAAC,SAAS,CAAC;IAEd,SAAS,SAAS;QAChB,MAAM,IAAI,GACR,aAAa,KAAK,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa,KAAK,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC;QAC3E,MAAM,EAAE,CAAC,IAAI,CAAC,CAAC;IACjB,CAAC;IAED,OAAO,CACL,0BACa,QAAQ,EACnB,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS,EACpC,SAAS,EAAE,OAAO,KACd,IAAI,YAEP,QAAQ,CAAC,CAAC,CAAC,CACV,kBAAQ,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAC,iBAAiB,EAAC,OAAO,EAAE,SAAS,aACjE,QAAQ,EACT,eACE,SAAS,EAAC,kBAAkB,iBAChB,MAAM,EAClB,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,aAEX,eAAM,SAAS,EAAC,uBAAuB,EAAC,CAAC,EAAC,kBAAkB,EAAC,IAAI,EAAC,cAAc,GAAG,EACnF,eAAM,SAAS,EAAC,wBAAwB,EAAC,CAAC,EAAC,oBAAoB,EAAC,IAAI,EAAC,cAAc,GAAG,IAClF,IACC,CACV,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,GACE,CACN,CAAC;AACJ,CAAC;AAUD,MAAM,UAAU,KAAK,CAAC,EAAE,KAAK,GAAG,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAc;IACjF,MAAM,OAAO,GAAG,CAAC,SAAS,KAAK,EAAE,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACxE,OAAO,CACL,aAAI,SAAS,EAAE,OAAO,KAAM,IAAI,YAC7B,QAAQ,GACN,CACN,CAAC;AACJ,CAAC","sourcesContent":["import { HTMLAttributes, ReactNode, TdHTMLAttributes, ThHTMLAttributes } from 'react';\nimport type {\n  AtlTableSpec,\n  AtlTbodySpec,\n  AtlTrSpec,\n  AtlThSpec,\n  AtlTdSpec,\n  AtlSortDirection,\n} from '../spec';\nimport { AtlCheckbox } from '../checkbox/atl-checkbox';\nimport './atl-table.css';\n\nexport type { AtlSortDirection };\n\n// ---------------------------------------------------------------------------\n// AtlTable\n// ---------------------------------------------------------------------------\n\nexport interface AtlTableProps extends HTMLAttributes<HTMLDivElement>, AtlTableSpec {\n  children?: ReactNode;\n  /**\n   * Accessible name for the scrollable table region. Surfaces to\n   * screen readers as the region's label so keyboard users who\n   * scroll the wrapper know what they're scrolling. Defaults to\n   * `\"Table\"` if unset.\n   */\n  'aria-label'?: string;\n}\n\nexport function AtlTable({\n  variant = 'default',\n  size = 'md',\n  stickyHeader = false,\n  children,\n  className,\n  'aria-label': ariaLabel,\n  ...rest\n}: AtlTableProps) {\n  const classes = [\n    'atl-table',\n    `variant-${variant}`,\n    `size-${size}`,\n    stickyHeader && 'is-sticky-header',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={classes} {...rest}>\n      {/* The wrapper is the scrollable region — give it tabindex=0 so\n       * keyboard users can scroll horizontally through wide tables.\n       * role=region + aria-label expose it as a labelled landmark for\n       * screen readers (axe rule: scrollable-region-focusable). */}\n      <div\n        className=\"atl-table-wrapper\"\n        tabIndex={0}\n        role=\"region\"\n        aria-label={ariaLabel ?? 'Table'}\n      >\n        <table>{children}</table>\n      </div>\n    </div>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// AtlThead\n// ---------------------------------------------------------------------------\n\nexport interface AtlTheadProps {\n  children?: ReactNode;\n}\n\nexport function AtlThead({ children }: AtlTheadProps) {\n  return <thead>{children}</thead>;\n}\n\n// ---------------------------------------------------------------------------\n// AtlTbody\n// ---------------------------------------------------------------------------\n\nexport interface AtlTbodyProps extends AtlTbodySpec {\n  children?: ReactNode;\n  /** Content shown in place of rows when empty=true. */\n  emptyContent?: ReactNode;\n}\n\nexport function AtlTbody({ empty = false, colSpan = 1, children, emptyContent }: AtlTbodyProps) {\n  return (\n    <tbody>\n      {!empty ? (\n        children\n      ) : (\n        <tr>\n          <td colSpan={colSpan} className=\"atl-tbody-empty-cell\">\n            {emptyContent}\n          </td>\n        </tr>\n      )}\n    </tbody>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// AtlTr\n// ---------------------------------------------------------------------------\n\nexport interface AtlTrProps extends AtlTrSpec {\n  children?: ReactNode;\n  onSelectedChange?: (selected: boolean) => void;\n}\n\nexport function AtlTr({\n  selected = false,\n  selectable = false,\n  children,\n  onSelectedChange,\n}: AtlTrProps) {\n  return (\n    <tr aria-selected={selectable ? selected : undefined} className={selected ? 'is-selected' : undefined}>\n      {selectable && (\n        <td className=\"atl-tr-select-cell\">\n          <AtlCheckbox checked={selected} onCheckedChange={onSelectedChange} />\n        </td>\n      )}\n      {children}\n    </tr>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// AtlTh\n// ---------------------------------------------------------------------------\n\nexport interface AtlThProps extends Omit<ThHTMLAttributes<HTMLTableCellElement>, 'align'>, AtlThSpec {\n  children?: ReactNode;\n  onSort?: (direction: AtlSortDirection) => void;\n}\n\nexport function AtlTh({\n  sortable = false,\n  sortDirection = null,\n  align = 'start',\n  width,\n  children,\n  onSort,\n  className,\n  ...rest\n}: AtlThProps) {\n  const classes = [\n    `align-${align}`,\n    sortDirection && 'is-sorted',\n    sortDirection === 'asc' && 'sort-asc',\n    sortDirection === 'desc' && 'sort-desc',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ') || undefined;\n\n  const ariaSort = sortable\n    ? sortDirection === 'asc'\n      ? 'ascending'\n      : sortDirection === 'desc'\n        ? 'descending'\n        : 'none'\n    : undefined;\n\n  function cycleSort() {\n    const next: AtlSortDirection =\n      sortDirection === null ? 'asc' : sortDirection === 'asc' ? 'desc' : null;\n    onSort?.(next);\n  }\n\n  return (\n    <th\n      aria-sort={ariaSort}\n      style={width ? { width } : undefined}\n      className={classes}\n      {...rest}\n    >\n      {sortable ? (\n        <button type=\"button\" className=\"atl-th-sort-btn\" onClick={cycleSort}>\n          {children}\n          <svg\n            className=\"atl-th-sort-icon\"\n            aria-hidden=\"true\"\n            width=\"12\"\n            height=\"16\"\n            viewBox=\"0 0 12 16\"\n            fill=\"none\"\n          >\n            <path className=\"atl-th-sort-asc-arrow\" d=\"M6 2L11 8H1L6 2Z\" fill=\"currentColor\" />\n            <path className=\"atl-th-sort-desc-arrow\" d=\"M6 14L1 8H11L6 14Z\" fill=\"currentColor\" />\n          </svg>\n        </button>\n      ) : (\n        children\n      )}\n    </th>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// AtlTd\n// ---------------------------------------------------------------------------\n\nexport interface AtlTdProps extends Omit<TdHTMLAttributes<HTMLTableCellElement>, 'align'>, AtlTdSpec {\n  children?: ReactNode;\n}\n\nexport function AtlTd({ align = 'start', children, className, ...rest }: AtlTdProps) {\n  const classes = [`align-${align}`, className].filter(Boolean).join(' ');\n  return (\n    <td className={classes} {...rest}>\n      {children}\n    </td>\n  );\n}\n"]}
+{"version":3,"file":"atl-table.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/table/atl-table.tsx"],"names":[],"mappings":"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","sourcesContent":["import { HTMLAttributes, ReactNode, TdHTMLAttributes, ThHTMLAttributes } from 'react';\nimport type {\n  AtlTableSpec,\n  AtlTbodySpec,\n  AtlTrSpec,\n  AtlThSpec,\n  AtlTdSpec,\n  AtlSortDirection,\n} from '../spec';\nimport { AtlCheckbox } from '../checkbox/atl-checkbox';\nimport './atl-table.css';\nimport { AtlIcon } from '../icon/atl-icon';\n\nexport type { AtlSortDirection };\n\n// ---------------------------------------------------------------------------\n// AtlTable\n// ---------------------------------------------------------------------------\n\nexport interface AtlTableProps extends HTMLAttributes<HTMLDivElement>, AtlTableSpec {\n  children?: ReactNode;\n  /**\n   * Accessible name for the scrollable table region. Surfaces to\n   * screen readers as the region's label so keyboard users who\n   * scroll the wrapper know what they're scrolling. Defaults to\n   * `\"Table\"` if unset.\n   */\n  'aria-label'?: string;\n}\n\nexport function AtlTable({\n  variant = 'default',\n  size = 'md',\n  stickyHeader = false,\n  children,\n  className,\n  'aria-label': ariaLabel,\n  ...rest\n}: AtlTableProps) {\n  const classes = [\n    'atl-table',\n    `variant-${variant}`,\n    `size-${size}`,\n    stickyHeader && 'is-sticky-header',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={classes} {...rest}>\n      {/* The wrapper is the scrollable region — give it tabindex=0 so\n       * keyboard users can scroll horizontally through wide tables.\n       * role=region + aria-label expose it as a labelled landmark for\n       * screen readers (axe rule: scrollable-region-focusable). */}\n      <div\n        className=\"atl-table-wrapper\"\n        tabIndex={0}\n        role=\"region\"\n        aria-label={ariaLabel ?? 'Table'}\n      >\n        <table>{children}</table>\n      </div>\n    </div>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// AtlThead\n// ---------------------------------------------------------------------------\n\nexport interface AtlTheadProps {\n  children?: ReactNode;\n}\n\nexport function AtlThead({ children }: AtlTheadProps) {\n  return <thead>{children}</thead>;\n}\n\n// ---------------------------------------------------------------------------\n// AtlTbody\n// ---------------------------------------------------------------------------\n\nexport interface AtlTbodyProps extends AtlTbodySpec {\n  children?: ReactNode;\n  /** Content shown in place of rows when empty=true. */\n  emptyContent?: ReactNode;\n}\n\nexport function AtlTbody({ empty = false, colSpan = 1, children, emptyContent }: AtlTbodyProps) {\n  return (\n    <tbody>\n      {!empty ? (\n        children\n      ) : (\n        <tr>\n          <td colSpan={colSpan} className=\"atl-tbody-empty-cell\">\n            {emptyContent}\n          </td>\n        </tr>\n      )}\n    </tbody>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// AtlTr\n// ---------------------------------------------------------------------------\n\nexport interface AtlTrProps extends AtlTrSpec {\n  children?: ReactNode;\n  onSelectedChange?: (selected: boolean) => void;\n}\n\nexport function AtlTr({\n  selected = false,\n  selectable = false,\n  children,\n  onSelectedChange,\n}: AtlTrProps) {\n  return (\n    <tr aria-selected={selectable ? selected : undefined} className={selected ? 'is-selected' : undefined}>\n      {selectable && (\n        <td className=\"atl-tr-select-cell\">\n          <AtlCheckbox checked={selected} onCheckedChange={onSelectedChange} />\n        </td>\n      )}\n      {children}\n    </tr>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// AtlTh\n// ---------------------------------------------------------------------------\n\nexport interface AtlThProps extends Omit<ThHTMLAttributes<HTMLTableCellElement>, 'align'>, AtlThSpec {\n  children?: ReactNode;\n  onSort?: (direction: AtlSortDirection) => void;\n}\n\nexport function AtlTh({\n  sortable = false,\n  sortDirection = null,\n  align = 'start',\n  width,\n  children,\n  onSort,\n  className,\n  ...rest\n}: AtlThProps) {\n  const classes = [\n    `align-${align}`,\n    sortDirection && 'is-sorted',\n    sortDirection === 'asc' && 'sort-asc',\n    sortDirection === 'desc' && 'sort-desc',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ') || undefined;\n\n  const ariaSort = sortable\n    ? sortDirection === 'asc'\n      ? 'ascending'\n      : sortDirection === 'desc'\n        ? 'descending'\n        : 'none'\n    : undefined;\n\n  function cycleSort() {\n    const next: AtlSortDirection =\n      sortDirection === null ? 'asc' : sortDirection === 'asc' ? 'desc' : null;\n    onSort?.(next);\n  }\n\n  return (\n    <th\n      aria-sort={ariaSort}\n      style={width ? { width } : undefined}\n      className={classes}\n      {...rest}\n    >\n      {sortable ? (\n        <button type=\"button\" className=\"atl-th-sort-btn\" onClick={cycleSort}>\n          {children}\n          <span className=\"atl-th-sort-icon\" aria-hidden=\"true\">\n            <AtlIcon name=\"sort-asc\" size=\"sm\" className=\"atl-th-sort-asc-arrow\" />\n            <AtlIcon name=\"sort-desc\" size=\"sm\" className=\"atl-th-sort-desc-arrow\" />\n          </span>\n        </button>\n      ) : (\n        children\n      )}\n    </th>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// AtlTd\n// ---------------------------------------------------------------------------\n\nexport interface AtlTdProps extends Omit<TdHTMLAttributes<HTMLTableCellElement>, 'align'>, AtlTdSpec {\n  children?: ReactNode;\n}\n\nexport function AtlTd({ align = 'start', children, className, ...rest }: AtlTdProps) {\n  const classes = [`align-${align}`, className].filter(Boolean).join(' ');\n  return (\n    <td className={classes} {...rest}>\n      {children}\n    </td>\n  );\n}\n"]}

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

@@ -1,3 +1,13 @@
+/* Geometry contract: every size this component states is a border-box size.
+ * Declared with the component rather than as a global reset, so it ships in the
+ * same file as the sizes it governs and no consuming app has to supply one.
+ * Gated by check:box-sizing; the resulting boxes are measured by check:geometry.
+ * See ADR-0043. */
+.atl-tab-group,
+.atl-tab-group * {
+  box-sizing: border-box;
+}
+
 .atl-tab-group {
   display: block;
   font-family: var(--ui-font-family);
@@ -8,7 +18,7 @@
 .atl-tab-group .tablist {
   display: flex;
   gap: var(--ui-spacing-2);
-  border-bottom: 1px solid var(--ui-color-border);
+  border-bottom: var(--ui-border-width) solid var(--ui-color-border);
   overflow-x: auto;
   scrollbar-width: none;
 }
@@ -24,8 +34,15 @@
   position: relative;
   display: inline-flex;
   align-items: center;
-  min-height: 2.5rem;
-  padding: var(--ui-spacing-3) var(--ui-spacing-4);
+  min-height: var(--ui-control-height-md);
+  /* Stated, not inherited: an inherited line-height makes the box grow with the
+   * text metrics, which is how three controls measured right on one machine and
+   * wrong on another (ADR-0048). */
+  line-height: var(--ui-line-height-tight);
+  /* Derived from the height, not authored: 12+12 padding on a 20px line box
+   * rendered 41px against a 40px token (ADR-0041's recipe, ADR-0047's finding). */
+  padding: calc((var(--ui-control-height-md) - var(--ui-line-height-tight) * var(--ui-font-size-sm)) / 2)
+    var(--ui-spacing-4);
   font-size: var(--ui-font-size-sm);
   font-weight: var(--ui-font-weight-medium);
   color: var(--ui-color-text-muted);
@@ -99,8 +116,13 @@
 
 .atl-tab-group.variant-pills .tablist button {
   border-radius: var(--ui-radius-md);
-  min-height: 2rem;
-  padding: var(--ui-spacing-2) var(--ui-spacing-4);
+  min-height: var(--ui-control-height-sm);
+  /* Stated, not inherited: an inherited line-height makes the box grow with the
+   * text metrics, which is how three controls measured right on one machine and
+   * wrong on another (ADR-0048). */
+  line-height: var(--ui-line-height-tight);
+  padding: calc((var(--ui-control-height-sm) - var(--ui-line-height-tight) * var(--ui-font-size-sm)) / 2)
+    var(--ui-spacing-4);
   font-size: var(--ui-font-size-sm);
 }
 

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

@@ -1,3 +1,13 @@
+/* Geometry contract: every size this component states is a border-box size.
+ * Declared with the component rather than as a global reset, so it ships in the
+ * same file as the sizes it governs and no consuming app has to supply one.
+ * Gated by check:box-sizing; the resulting boxes are measured by check:geometry.
+ * See ADR-0043. */
+.atl-textarea,
+.atl-textarea * {
+  box-sizing: border-box;
+}
+
 .atl-textarea {
   display: block;
   font-family: var(--ui-font-family);
@@ -13,7 +23,7 @@
   line-height: var(--ui-line-height-normal);
   color: var(--ui-color-text);
   background-color: var(--ui-color-input-bg);
-  border: 1px solid var(--ui-color-input-border);
+  border: var(--ui-border-width) solid var(--ui-color-input-border);
   border-radius: var(--ui-radius-md);
   transition: border-color var(--ui-transition-fast),
               box-shadow var(--ui-transition-fast),
@@ -53,18 +63,19 @@
   box-shadow: 0 0 0 2px var(--ui-color-surface), 0 0 0 4px var(--ui-color-danger);
 }
 
-/* Non-color invalid indicator (WCAG 1.4.1) */
-.atl-textarea.is-invalid .textarea-field::before {
-  content: '✕';
+/* Non-color invalid indicator (WCAG 1.4.1). A real AtlIcon rather than a CSS
+ * `content: '✕'`: the glyph could not follow the icon set and Figma cannot put an
+ * icon instance behind a pseudo-element (ADR-0046). */
+.atl-textarea.is-invalid .textarea-field .invalid-icon {
   position: absolute;
-  top: 0.75rem;
+  top: 50%;
+  transform: translateY(-50%);
   right: 0.875rem;
   color: var(--ui-color-danger);
-  font-weight: 700;
-  line-height: 1;
   pointer-events: none;
 }
 
+
 /* Disabled state */
 .atl-textarea.is-disabled {
   opacity: var(--ui-opacity-disabled);
@@ -78,6 +89,10 @@
 /* Readonly state */
 .atl-textarea.is-readonly textarea {
   background-color: var(--ui-color-surface-sunken);
+  /* Readonly is content, not a control: the interactive edge goes away while the
+   * filled surface stays. Transparent rather than removed so the 1px border keeps
+   * its space and the height stays exactly --ui-control-height-md (ADR-0045). */
+  border-color: transparent;
   cursor: default;
 }
 

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

@@ -1 +1 @@
-{"version":3,"file":"atl-textarea.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/textarea/atl-textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAqB,MAAM,OAAO,CAAC;AAClE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,oBAAoB,CAAC;AAE5B;;GAEG;AACH,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EAAE,UAAU,CAAC,EACnE,eAAe;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,aAAa,EACb,OAAe,EACf,MAAW,EACX,QAAgB,EAChB,QAAQ,EAAE,aAAa,EACvB,QAAQ,EAAE,YAAY,EACtB,QAAgB,EAChB,KAAK,EACL,UAAkB,EAClB,IAAQ,EACR,SAAS,EACT,EAAE,EACF,GAAG,IAAI,EACR,EAAE,gBAAgB,+BAiElB"}
+{"version":3,"file":"atl-textarea.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/textarea/atl-textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAqB,MAAM,OAAO,CAAC;AAClE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,oBAAoB,CAAC;AAG5B;;GAEG;AACH,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EAAE,UAAU,CAAC,EACnE,eAAe;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,aAAa,EACb,OAAe,EACf,MAAW,EACX,QAAgB,EAChB,QAAQ,EAAE,aAAa,EACvB,QAAQ,EAAE,YAAY,EACtB,QAAgB,EAChB,KAAK,EACL,UAAkB,EAClB,IAAQ,EACR,SAAS,EACT,EAAE,EACF,GAAG,IAAI,EACR,EAAE,gBAAgB,+BAkElB"}

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

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useEffect } from 'react';
 import './atl-textarea.css';
+import { AtlIcon } from '../icon/atl-icon';
 /**
  * A multi-line text input component that supports automatic resizing and validation states.
  */
@@ -34,6 +35,6 @@ export function AtlTextarea({ value, onChange, onValueChange, invalid = false, e
         }
     };
     const errorId = inputId ? `${inputId}-errors` : undefined;
-    return (_jsxs("div", { className: classes, children: [label && _jsx("label", { htmlFor: inputId, children: label }), _jsx("div", { className: "textarea-field", children: _jsx("textarea", { ref: textareaRef, id: inputId, value: value, onChange: handleChange, disabled: disabled, readOnly: readOnly, required: required, rows: rows, "aria-invalid": invalid || undefined, "aria-required": required || undefined, "aria-describedby": errors.length > 0 ? errorId : undefined, ...rest }) }), 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: "textarea-field", children: [_jsx("textarea", { ref: textareaRef, id: inputId, value: value, onChange: handleChange, disabled: disabled, readOnly: readOnly, required: required, rows: rows, "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-textarea.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"atl-textarea.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/textarea/atl-textarea.tsx"],"names":[],"mappings":"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","sourcesContent":["import { TextareaHTMLAttributes, useRef, useEffect } from 'react';\nimport type { AtlTextareaSpec } from '../spec';\nimport './atl-textarea.css';\n\n/**\n * Properties for the AtlTextarea component.\n */\nexport interface AtlTextareaProps\n  extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'readOnly'>,\n    AtlTextareaSpec {\n  /**\n   * Current value of the textarea.\n   */\n  value?: string;\n  /**\n   * Whether the textarea is read-only.\n   */\n  readOnly?: boolean;\n  /**\n   * Callback fired when the value changes.\n   */\n  onValueChange?: (value: string) => void;\n  /**\n   * List of error messages to display.\n   */\n  errors?: string[];\n  /**\n   * Label text for the textarea.\n   */\n  label?: string;\n}\n\n/**\n * A multi-line text input component that supports automatic resizing and validation states.\n */\nexport function AtlTextarea({\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  autoResize = false,\n  rows = 3,\n  className,\n  id,\n  ...rest\n}: AtlTextareaProps) {\n  const readOnly = reactReadOnly ?? specReadOnly ?? false;\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\n  const inputId =\n    id || (label ? `textarea-${label.toLowerCase().replace(/\\s+/g, '-')}` : undefined);\n  const classes = [\n    'atl-textarea',\n    invalid && 'is-invalid',\n    disabled && 'is-disabled',\n    readOnly && 'is-readonly',\n    autoResize && 'is-auto-resize',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  useEffect(() => {\n    if (autoResize && textareaRef.current) {\n      const el = textareaRef.current;\n      el.style.height = 'auto';\n      el.style.height = `${el.scrollHeight}px`;\n    }\n  }, [value, autoResize]);\n\n  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n    onChange?.(e);\n    onValueChange?.(e.target.value);\n    if (autoResize && textareaRef.current) {\n      textareaRef.current.style.height = 'auto';\n      textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;\n    }\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=\"textarea-field\">\n        <textarea\n          ref={textareaRef}\n          id={inputId}\n          value={value}\n          onChange={handleChange}\n          disabled={disabled}\n          readOnly={readOnly}\n          required={required}\n          rows={rows}\n          aria-invalid={invalid || undefined}\n          aria-required={required || undefined}\n          aria-describedby={errors.length > 0 ? errorId : undefined}\n          {...rest}\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"]}
+{"version":3,"file":"atl-textarea.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/textarea/atl-textarea.tsx"],"names":[],"mappings":"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","sourcesContent":["import { TextareaHTMLAttributes, useRef, useEffect } from 'react';\nimport type { AtlTextareaSpec } from '../spec';\nimport './atl-textarea.css';\nimport { AtlIcon } from '../icon/atl-icon';\n\n/**\n * Properties for the AtlTextarea component.\n */\nexport interface AtlTextareaProps\n  extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'readOnly'>,\n    AtlTextareaSpec {\n  /**\n   * Current value of the textarea.\n   */\n  value?: string;\n  /**\n   * Whether the textarea is read-only.\n   */\n  readOnly?: boolean;\n  /**\n   * Callback fired when the value changes.\n   */\n  onValueChange?: (value: string) => void;\n  /**\n   * List of error messages to display.\n   */\n  errors?: string[];\n  /**\n   * Label text for the textarea.\n   */\n  label?: string;\n}\n\n/**\n * A multi-line text input component that supports automatic resizing and validation states.\n */\nexport function AtlTextarea({\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  autoResize = false,\n  rows = 3,\n  className,\n  id,\n  ...rest\n}: AtlTextareaProps) {\n  const readOnly = reactReadOnly ?? specReadOnly ?? false;\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\n  const inputId =\n    id || (label ? `textarea-${label.toLowerCase().replace(/\\s+/g, '-')}` : undefined);\n  const classes = [\n    'atl-textarea',\n    invalid && 'is-invalid',\n    disabled && 'is-disabled',\n    readOnly && 'is-readonly',\n    autoResize && 'is-auto-resize',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  useEffect(() => {\n    if (autoResize && textareaRef.current) {\n      const el = textareaRef.current;\n      el.style.height = 'auto';\n      el.style.height = `${el.scrollHeight}px`;\n    }\n  }, [value, autoResize]);\n\n  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n    onChange?.(e);\n    onValueChange?.(e.target.value);\n    if (autoResize && textareaRef.current) {\n      textareaRef.current.style.height = 'auto';\n      textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;\n    }\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=\"textarea-field\">\n        <textarea\n          ref={textareaRef}\n          id={inputId}\n          value={value}\n          onChange={handleChange}\n          disabled={disabled}\n          readOnly={readOnly}\n          required={required}\n          rows={rows}\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"]}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"atl-toast.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/toast/atl-toast.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,SAAS,EACV,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EACV,eAAe,EACf,yBAAyB,EAC1B,MAAM,SAAS,CAAC;AACjB,OAAO,iBAAiB,CAAC;AAEzB;;GAEG;AACH,MAAM,WAAW,SAAU,SAAQ,QAAQ,CAAC,eAAe,CAAC;IAC1D,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;CACjB;AAgBD;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,+BA6CrE;AAED,mFAAmF;AACnF,wBAAgB,WAAW;oBAhET,MAAM,YAAY,eAAe,KAAK,MAAM;kBAC9C,MAAM,KAAK,IAAI;iBAChB,IAAI;EAiElB;AAED;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC;;OAEG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC;CACtC;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,QAAyB,EAAE,EAAE,sBAAsB,+BAWtF;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,IAAI,EAAE,SAAS,CAAC;IAChB;;OAEG;IACH,SAAS,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,iBAAiB,+BA+BlE"}
+{"version":3,"file":"atl-toast.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/toast/atl-toast.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,SAAS,EACV,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EACV,eAAe,EACf,yBAAyB,EAC1B,MAAM,SAAS,CAAC;AACjB,OAAO,iBAAiB,CAAC;AAGzB;;GAEG;AACH,MAAM,WAAW,SAAU,SAAQ,QAAQ,CAAC,eAAe,CAAC;IAC1D,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;CACjB;AAgBD;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,+BA6CrE;AAED,mFAAmF;AACnF,wBAAgB,WAAW;oBAhET,MAAM,YAAY,eAAe,KAAK,MAAM;kBAC9C,MAAM,KAAK,IAAI;iBAChB,IAAI;EAiElB;AAED;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC;;OAEG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC;CACtC;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,QAAyB,EAAE,EAAE,sBAAsB,+BAWtF;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,IAAI,EAAE,SAAS,CAAC;IAChB;;OAEG;IACH,SAAS,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,iBAAiB,+BAiBlE"}

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

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, useContext, useState, useCallback, useRef, } from 'react';
 import './atl-toast.css';
+import { AtlIcon } from '../icon/atl-icon';
 const ToastContext = createContext({
     show: () => '',
     dismiss: () => undefined,
@@ -65,6 +66,6 @@ export function AtlToastContainer({ position = 'bottom-right' }) {
  */
 export function AtlToastItem({ data, onDismiss }) {
     const classes = `atl-toast variant-${data.variant}`;
-    return (_jsxs("div", { className: classes, role: "status", children: [_jsx("span", { className: "message", children: data.message }), data.dismissible && (_jsx("button", { className: "dismiss", type: "button", "aria-label": "Dismiss", onClick: () => onDismiss(data.id), children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) }))] }));
+    return (_jsxs("div", { className: classes, role: "status", children: [_jsx("span", { className: "message", children: data.message }), data.dismissible && (_jsx("button", { className: "dismiss", type: "button", "aria-label": "Dismiss", onClick: () => onDismiss(data.id), children: _jsx(AtlIcon, { name: "close", size: "sm" }) }))] }));
 }
 //# sourceMappingURL=atl-toast.js.map