@astryxdesign/core 0.6.1 → 0.6.2

package/dist/Spinner/Spinner.js

@@ -4,7 +4,7 @@
 
 /**
  * @file Spinner.tsx
- * @input Uses React, StyleX, SVG rendering
+ * @input Uses React, i18n (useTranslator), StyleX, SVG rendering
  * @output Exports Spinner component, SpinnerProps, SpinnerSize, SpinnerShade types
  * @position Core implementation of spinner loading indicator
  *
@@ -21,6 +21,7 @@ import "../theme/tokens.stylex.js";
 import { colorVars, durationVars, spacingVars } from "../theme/tokens.stylex.js";
 import { Text } from "../Text/Text.js";
 import { mergeProps } from "../utils/index.js";
+import { useTranslator } from "../i18n/index.js";
 import { themeProps } from "../utils/themeProps.js";
 
 // =============================================================================
@@ -28,21 +29,17 @@ import { themeProps } from "../utils/themeProps.js";
 // =============================================================================
 
 /**
- * Fraction of the ring the moving arc covers. The canvas ring this replaces
- * swept 135deg, not the 270deg its constant's comment claimed.
+ * Default fraction of the ring the moving arc covers. The canvas ring this
+ * replaces swept 135deg, not the 270deg its constant's comment claimed.
+ *
+ * Themeable via `--spinner-arc-fraction`, declared alongside the other public
+ * vars in `sizeStyles` below. Only the inline `strokeDasharray` attribute
+ * (the pre-stylesheet render — see its own comment) still reads this
+ * constant directly; the CSS side composes the dash from the live var.
  */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ARC_FRACTION = 0.375;
-
-/**
- * The dash pattern, per unit of diameter: one arc, then the gap that closes
- * the circle. The circumference is `pi x diameter`, so multiplying the
- * resolved diameter by these two constants gives exactly the lengths the
- * default render has always used, and scales them with a themed diameter.
- */
 const PI = 3.141592653589793;
-const ARC_DASH = PI * ARC_FRACTION;
-const ARC_GAP = PI * (1 - ARC_FRACTION);
 const SIZES = {
   sm: {
     diameter: 10,
@@ -269,25 +266,33 @@ const styles = {
 // cost of its own — with nothing declaring the var,
 // `theme-var-reachability.js` cannot find an element to check, so a documented
 // var reads as unreachable.
+// Arc fraction is not itself size-dependent, but it declares alongside the
+// two vars that are, on the same per-size condition (`!hasLabel` gate at the
+// call site) — it needs a home on whichever element carries the theme
+// target, and this is the object already wired to be there.
 const sizeStyles = {
   sm: {
     "--spinner-diameter": "x11wm0hx",
     "--spinner-stroke-width": "xls98ul",
+    "--spinner-arc-fraction": "x7o5821",
     $$css: true
   },
   md: {
     "--spinner-diameter": "x15pu9g6",
     "--spinner-stroke-width": "xr0wkrm",
+    "--spinner-arc-fraction": "x7o5821",
     $$css: true
   },
   lg: {
     "--spinner-diameter": "x1w424tr",
     "--spinner-stroke-width": "xr0wkrm",
+    "--spinner-arc-fraction": "x7o5821",
     $$css: true
   },
   xl: {
     "--spinner-diameter": "x1orj1z9",
     "--spinner-stroke-width": "x7y2bof",
+    "--spinner-arc-fraction": "x7o5821",
     $$css: true
   }
 };
@@ -377,6 +382,7 @@ export function Spinner({
   const arcLength = circumference * ARC_FRACTION;
   const hasLabel = label != null;
   const labelId = useId();
+  const t = useTranslator();
 
   // When a visible string label renders (and no explicit aria-label is set),
   // name the status element from the visible Text via aria-labelledby instead
@@ -384,8 +390,10 @@ export function Spinner({
   // announced twice by screen readers (WCAG 4.1.2).
   const namedByVisibleLabel = hasLabel && typeof label === 'string' && ariaLabel == null;
 
-  // Resolve accessible name: explicit aria-label > string label > "Loading"
-  const resolvedAriaLabel = ariaLabel ?? (typeof label === 'string' ? label : undefined) ?? 'Loading';
+  // Resolve accessible name: explicit aria-label > string label > the
+  // localized default. The fallback is AT-facing text, so it goes through the
+  // translation runtime like visible text does.
+  const resolvedAriaLabel = ariaLabel ?? (typeof label === 'string' ? label : undefined) ?? t('@astryx.spinner.loading');
   const spinner = /*#__PURE__*/_jsx("span", {
     ref: hasLabel ? undefined : ref,
     role: "status",
@@ -440,7 +448,7 @@ export function Spinner({
         ,
         strokeDasharray: `${arcLength} ${circumference - arcLength}`,
         ...{
-          className: "xbh8q5q x1764fhq x1g0ag68 x1owpc8m xio8zfp xgw3ha0 xtve3lm x9tu13d x1vy8frr"
+          className: "xbh8q5q x1764fhq x1g0ag68 x1owpc8m xio8zfp xgw3ha0 xtve3lm x9tu13d xdv9ggb"
         }
       })]
     })

package/dist/astryx.css

@@ -333,6 +333,7 @@
   .xnpej1e{--radius-element:var(--radius-full)}
   .x11rj6l1{--selectable-card-ring-color:var(--color-accent)}
   .xkce8z9{--separator-display:flex}
+  .x7o5821{--spinner-arc-fraction:.375}
   .x1uzk0gl{--spinner-color:currentColor}
   .xt1b8mc{--spinner-color:var(--color-accent)}
   .x13u6jys{--spinner-color:var(--color-on-dark)}
@@ -1173,7 +1174,7 @@
   .x24f09q:not(#\#):not(#\#):not(#\#){scrollbar-gutter:auto}
   .xosa0jh:not(#\#):not(#\#):not(#\#){scrollbar-width:auto}
   .x1rohswg:not(#\#):not(#\#):not(#\#){scrollbar-width:none}
-  .x1vy8frr:not(#\#):not(#\#):not(#\#){stroke-dasharray:calc(var(--_spinner-ring-diameter) * 1.1780972450961724) calc(var(--_spinner-ring-diameter) * 1.9634954084936207)}
+  .xdv9ggb:not(#\#):not(#\#):not(#\#){stroke-dasharray:calc(var(--_spinner-ring-diameter) * 3.141592653589793 * var(--spinner-arc-fraction)) calc(var(--_spinner-ring-diameter) * 3.141592653589793 * (1 - var(--spinner-arc-fraction)))}
   .x1owpc8m:not(#\#):not(#\#):not(#\#){stroke-linecap:round}
   .x7bo2k:not(#\#):not(#\#):not(#\#){stroke-opacity:.3}
   .x1smxkh6:not(#\#):not(#\#):not(#\#){stroke-opacity:.302}

package/locales/en.json

@@ -447,6 +447,18 @@
     "defaultMessage": "Next",
     "description": "Screen-reader-only label on the right-arrow button in a Lightbox (navigates to next media item). Pairs with `lightbox.previous`."
   },
+  "@astryx.chatTypingIndicator.one": {
+    "defaultMessage": "{name} is typing…",
+    "description": "Politely announced status naming the single person currently typing in a chat. `name` is a display name supplied by the app. Present-progressive form; the trailing ellipsis is the single … character."
+  },
+  "@astryx.chatTypingIndicator.many": {
+    "defaultMessage": "{names} are typing…",
+    "description": "Politely announced status when more than one person is typing in a chat. `names` is already joined for the locale by Intl.ListFormat, so translations must not add their own conjunction — place `{names}` where the joined list belongs."
+  },
+  "@astryx.chatTypingIndicator.others": {
+    "defaultMessage": "{count, number} {count, plural, one {other} other {others}}",
+    "description": "Overflow element for the chat typing status when three or more people type: the first name is shown and the rest collapse into this phrase, which is then joined to the name by Intl.ListFormat. Renders as the last list item, e.g. \"Ana and 2 others\"."
+  },
   "@astryx.listInput.emptyTitle": {
     "defaultMessage": "No {itemName}s yet",
     "description": "EmptyState title shown inside a lab ListInput when its collection has no records. `{itemName}` is the consumer's singular noun for one record (e.g. \"guest\"); the source appends a literal \"s\" to pluralize it, which only works for regular English plurals. If your language cannot pluralize an interpolated noun this way, rephrase around `{itemName}` instead (e.g. \"No {itemName} added yet\")."
@@ -935,6 +947,10 @@
     "defaultMessage": "Loading",
     "description": "Screen-reader-only live-region announcement while a Button is in its loading state (spinner shown, action in flight). Progressive sense (\"work in progress\"), not a noun. Kept separate from `typeahead.loading` — translations may diverge."
   },
+  "@astryx.spinner.loading": {
+    "defaultMessage": "Loading",
+    "description": "Screen-reader-only default name for a standalone Spinner's role=\"status\" element, used when the consumer supplies neither `aria-label` nor a visible string label. Present-progressive form. Kept separate from `button.loading` and `typeahead.loading` — translations may diverge."
+  },
   "@astryx.chatComposerDrawer.expand": {
     "defaultMessage": "Expand {label}",
     "description": "Screen-reader-only label on the ChatComposerDrawer toggle when the drawer is collapsed. `{label}` is the drawer's visible name — example: `Expand Attachments`. Pairs with `collapse`."

package/locales/pseudo.json

@@ -335,6 +335,15 @@
   "@astryx.lightbox.next": {
     "defaultMessage": "⟦Ñéẋţ⟧"
   },
+  "@astryx.chatTypingIndicator.one": {
+    "defaultMessage": "⟦{name} íš ţýþíñĝ…⟧"
+  },
+  "@astryx.chatTypingIndicator.many": {
+    "defaultMessage": "⟦{names} àřé ţýþíñĝ…⟧"
+  },
+  "@astryx.chatTypingIndicator.others": {
+    "defaultMessage": "⟦{count, number} {count, plural, one {other} other {others}}⟧"
+  },
   "@astryx.listInput.emptyTitle": {
     "defaultMessage": "⟦Ñó {itemName}š ýéţ⟧"
   },
@@ -701,6 +710,9 @@
   "@astryx.button.loading": {
     "defaultMessage": "⟦Łóàðíñĝ⟧"
   },
+  "@astryx.spinner.loading": {
+    "defaultMessage": "⟦Łóàðíñĝ⟧"
+  },
   "@astryx.chatComposerDrawer.expand": {
     "defaultMessage": "⟦Éẋþàñð {label}⟧"
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/core",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "displayName": "Astryx Core",
   "description": "The component library. Accessible, themeable React components with built-in spacing, dark mode, and StyleX styling.",
   "author": "Meta Open Source",
@@ -672,16 +672,18 @@
     "react-dom": ">=19.0.0"
   },
   "devDependencies": {
-    "@babel/cli": "^8.0.4",
+    "@babel/cli": "^7.29.7",
     "@babel/core": "^7.29.7",
-    "@babel/preset-react": "^8.0.1",
+    "@babel/preset-react": "^7.29.7",
     "@babel/preset-typescript": "^7.29.7",
+    "@heroicons/react": "^2.2.0",
     "@stylexjs/babel-plugin": "^0.19.0",
     "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.6.0",
     "@testing-library/react": "^16.3.2",
+    "@types/babel__core": "^7.20.5",
     "@astryxdesign/a11y-spec": "0.0.0",
-    "@astryxdesign/cli": "0.6.1"
+    "@astryxdesign/cli": "0.6.2"
   },
   "dependencies": {
     "intl-messageformat": "^11.2.9"

package/scripts/agent-doc-state.mjs

@@ -57,7 +57,7 @@ export const LEGACY_MARKER_END = '<!-- XDS:END -->';
  * targets are user-chosen and not enumerable here.)
  */
 export const AGENT_DOC_PATHS = [
-  AGENTS_MD, // Codex / ChatGPT / generic
+  AGENTS_MD, // Codex / ChatGPT / Muse / generic
   CLAUDE_MD, // Claude Code (root)
   CLAUDE_DIR_MD, // Claude Code (.claude/CLAUDE.md)
   CURSOR_RULES, // Cursor

package/src/DateRangeInput/DateRangeInput.doc.mjs

@@ -114,7 +114,7 @@ export const docs = {
       name: 'presets',
       type: 'Array<DateRangePreset>',
       description:
-        'Preset ranges shown as quick-select options beside the calendar.',
+        'Preset ranges shown as quick-select options beside the calendar. A preset is disabled when either endpoint violates min, max, or dateConstraints, or when its span violates minRangeSpan or maxRangeSpan.',
     },
     {
       name: 'hasClear',
@@ -178,9 +178,21 @@ export const docs = {
   ],
   theming: {
     targets: [
-      {className: 'astryx-date-range-input', visualProps: ['size', 'status'], states: ['disabled']},
+      {
+        className: 'astryx-date-range-input',
+        visualProps: ['size', 'status'],
+        states: ['disabled'],
+      },
       {className: 'astryx-date-range-input-toggle-icon', states: ['state']},
-      {className: 'astryx-date-range-input-clear-icon', deprecatedFor: 'input-clear-icon'},
+      {
+        className: 'astryx-date-range-input-clear-icon',
+        deprecatedFor: 'input-clear-icon',
+      },
+      {className: 'astryx-date-range-input-presets'},
+      {
+        className: 'astryx-date-range-input-preset',
+        states: ['selected', 'disabled'],
+      },
     ],
   },
   usage: {
@@ -230,6 +242,12 @@ export const docs = {
         description:
           'Text above the trigger describing what date range is expected.',
       },
+      {
+        name: 'Field surface',
+        required: true,
+        description:
+          'Bordered control containing the calendar toggle, range trigger, and end affordances.',
+      },
       {
         name: 'Trigger button',
         required: true,
@@ -252,6 +270,12 @@ export const docs = {
         required: false,
         description: 'A list of preset range options beside the calendar.',
       },
+      {
+        name: 'Preset button',
+        required: false,
+        description:
+          'A quick-select action for one preset range, reflecting current and disabled states.',
+      },
       {
         name: 'Clear button',
         required: false,
@@ -320,7 +344,8 @@ export const docsDense = {
     isDisabled: 'disable trigger+picker',
     disabledMessage:
       'reason shown in a tooltip on hover/focus when disabled; keeps trigger focusable via aria-disabled',
-    value: 'selected range {start, end} or null; import DateRange type from @astryxdesign/core/DateRangeInput (do not redeclare)',
+    value:
+      'selected range {start, end} or null; import DateRange type from @astryxdesign/core/DateRangeInput (do not redeclare)',
     onChange: 'callback on range change; null on clear',
     min: 'min selectable date: ISODateString template literal type (YYYY-MM-DD); use string literal or cast `as ISODateString`',
     max: 'max selectable date: ISODateString template literal type (YYYY-MM-DD); use string literal or cast `as ISODateString`',
@@ -329,15 +354,18 @@ export const docsDense = {
       'max days a range may span, both endpoints counted (7 = a 7-day window); caps the window from the picked start. Selection-only; does not rewrite an over-wide value',
     minRangeSpan:
       'min days a range must span, both endpoints counted (2 forbids a single-day range); repeated start click commits one day when allowed, otherwise cancels; default 1',
-    presets: 'preset ranges as quick-select options',
+    presets:
+      'preset ranges as quick-select options; disabled when an endpoint or span violates the corresponding constraints',
     hasClear: 'clear button when range is set (default true)',
     placeholder: 'placeholder when empty',
     size: 'trigger size',
     status: 'error/warning/success status',
-    statusVariant: 'How status message is placed: attached overlaps below input; detached floats below w/ spacing; tooltip hides the box and shows it on the status icon.',
+    statusVariant:
+      'How status message is placed: attached overlaps below input; detached floats below w/ spacing; tooltip hides the box and shows it on the status icon.',
     labelTooltip: 'tooltip via info icon at label end',
     numberOfMonths: 'months in calendar (default 2)',
-    weekStartsOn: 'first day of week in calendar (0=Sunday, or name e.g. "mon")',
+    weekStartsOn:
+      'first day of week in calendar (0=Sunday, or name e.g. "mon")',
     changeAction:
       'async action fired after onChange; drives optimistic UI updates via useTransition',
     isLoading: 'loading state; disables interaction + shows a spinner',

package/src/DateRangeInput/DateRangeInput.spec.md

@@ -0,0 +1,203 @@
+---
+schema_version: 3
+template_version: 4
+kind: component
+id: component:DateRangeInput
+authority: current
+archive_reason: null
+superseded_by: null
+approved_by: cixzhang
+approved_at: 2026-09-14
+owners: [cixzhang]
+review_triggers: [theming]
+verified_by:
+  [
+    packages/core/src/DateRangeInput/DateRangeInput.test.tsx,
+    packages/core/src/theme/themingTargets.test.ts,
+    scripts/check-knowledge.mjs,
+  ]
+modules: []
+families: [family:input-fields, family:overlay-dismissal]
+design_specs: []
+architecture: [architecture:component-theming-surface]
+contributing: []
+system_specs: []
+---
+
+# DateRangeInput component contract
+
+## Intent
+
+DateRangeInput presents one controlled date range through a labeled field surface.
+Its trigger opens a Calendar-backed Popover and may include a list of quick-select
+presets beside that calendar.
+
+## Compatibility and migration
+
+- Released default preserved: `yes`
+- Compatibility class: additive theme targets plus corrected preset constraint
+  enforcement; default appearance, DOM semantics, and public props remain unchanged
+- Controlled/uncontrolled behavior: unchanged; DateRangeInput remains controlled
+- Migration decision: none
+
+Consumer migration instructions belong in consumer docs and release notes.
+
+## Ownership boundary
+
+**Owns**
+
+- The composite date-range field surface and its range-display trigger.
+- The optional preset list, each preset action, and reflection of a preset's current
+  and disabled states.
+- Converting a selected Calendar range or preset into `onChange` and
+  `changeAction` output.
+
+**Does not own / non-goals**
+
+- Label, description, and status presentation — owned by `component:Field` and
+  `component:FieldStatus`.
+- Calendar-grid rendering and date-cell interaction — owned by
+  `component:Calendar`.
+- Layer hosting and dismissal — owned by `component:Popover` and
+  `family:overlay-dismissal`.
+- Shared clear-button presentation — owned by `component:Field`.
+
+## Public concepts
+
+No public prop or value domain is added. This contract records the existing
+preset-list anatomy and its additive theming surface.
+
+## Behavioral and layout contract
+
+| ID  | Candidate invariant                                                                                                                                                                                                                                                                             | Basis                                                     | Review state               |
+| --- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- | -------------------------- |
+| FR1 | DateRangeInput MUST present the controlled `value` and emit range changes without maintaining a competing selected range.                                                                                                                                                                       | Current source, docs, and focused tests                   | Verified current behavior  |
+| FR2 | When presets are present, each preset remains an independent button in one labeled group; the applied preset reflects current state and a preset whose endpoint violates `min`, `max`, or `dateConstraints`, or whose range violates `minRangeSpan` or `maxRangeSpan`, reflects disabled state. | Current source, accessibility comments, and focused tests | Verified current behavior  |
+| FR3 | The preset group and each preset button expose stable theme targets; selected and disabled are states of the preset-button target rather than separate targets.                                                                                                                                 | `architecture:component-theming-surface`; #5417 demand    | Approved additive contract |
+| FR4 | Adding theme targets MUST NOT change the Popover, Calendar, button, focus, or selection semantics those elements already own.                                                                                                                                                                   | Composition boundary and compatibility goal               | Approved additive contract |
+
+### Allowed variation
+
+- **AV1 — Preset content.** A caller may omit presets or provide any number of
+  labeled ranges.
+- **AV2 — Calendar layout.** Calendar month count, date constraints, and range
+  bounds may vary without changing preset target identity.
+- **AV3 — Theme output.** Themes may restyle the preset group and buttons while
+  the component's button semantics and state remain unchanged.
+
+### Representative states
+
+| State             | Required invariant                                                                                                                          | Allowed variation       |
+| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- |
+| No presets        | No preset group or preset-button target renders.                                                                                            | Calendar configuration  |
+| Presets, no match | Every button carries the preset target with no selected state.                                                                              | Preset count and labels |
+| Applied preset    | The matching button carries `aria-current="true"` and the target's selected state.                                                          | Selected range          |
+| Disabled preset   | A preset that violates an endpoint date constraint or a range-span constraint is natively disabled and carries the target's disabled state. | Constraint source       |
+
+### Transformation and precedence order
+
+- **ORD1 — Preset state.** Resolve each preset's range once, compare it with the
+  controlled value, evaluate `min`, `max`, and `dateConstraints` against both
+  endpoints, evaluate `minRangeSpan` and `maxRangeSpan` against the full range,
+  then reflect selected and disabled state on the same preset-button target.
+- **ORD2 — Preset activation.** An enabled preset emits the already-resolved range;
+  activation does not resolve the preset again.
+
+Endpoint constraints match Calendar selection: they apply to the preset's start
+and end, not every date between them.
+
+### Performance and resources
+
+No new performance or resource constraint is introduced.
+
+## Accessibility contract
+
+- **AR1 — Preset semantics.** Presets remain native buttons in one labeled group,
+  navigated independently by Tab.
+- **AR2 — Current state.** The applied preset remains exposed with
+  `aria-current="true"`; theme state reflection is additive.
+- **AR3 — Disabled state.** A preset that violates an endpoint date constraint or
+  a range-span constraint remains natively disabled; theme state reflection does
+  not replace that behavior.
+
+## Design relationships
+
+| Anatomy or state | Design requirement                                              | Representation authority              | Hierarchy role | Component contract |
+| ---------------- | --------------------------------------------------------------- | ------------------------------------- | -------------- | ------------------ |
+| Field surface    | Presents one coherent input boundary.                           | Current source and input-field family | Prominent      | FR1                |
+| Calendar popover | Provides range selection without changing field ownership.      | Popover and Calendar components       | Prominent      | FR1, FR4           |
+| Preset sidebar   | Groups optional shortcuts beside the calendar.                  | Current source and public docs        | Supporting     | FR2, FR3           |
+| Preset button    | Presents one quick-select range and its current/disabled state. | Current source and public docs        | Supporting     | FR2–FR4, AR1–AR3   |
+
+### Theming anatomy
+
+<!-- anatomy-theming:v1 -->
+
+```json
+{
+  "Label": {
+    "delegatesTo": {"owner": "component:Field", "target": "field-label"}
+  },
+  "Field surface": {"target": "date-range-input"},
+  "Trigger button": {
+    "none": {
+      "reason": "unsettled: The composite field surface has a target, but the inner range-display button has no separate current target."
+    }
+  },
+  "Calendar icon": {"target": "date-range-input-toggle-icon"},
+  "Calendar popover": {
+    "delegatesTo": {"owner": "component:Popover", "target": "popover"}
+  },
+  "Preset sidebar": {"target": "date-range-input-presets"},
+  "Preset button": {"target": "date-range-input-preset"},
+  "Clear button": {
+    "delegatesTo": {"owner": "component:Field", "target": "input-clear-button"}
+  },
+  "Status message": {
+    "delegatesTo": {"owner": "component:FieldStatus", "target": "field-status"}
+  }
+}
+```
+
+The deprecated `date-range-input-clear-icon` alias remains compatibility metadata;
+the shared `input-clear-icon` target owns the current glyph contract.
+
+## Family and system relationships
+
+- `family:input-fields` owns field sizing, status placement, loading, disabled
+  reasons, and end-control geometry.
+- `family:overlay-dismissal` owns the Popover dismissal stack.
+- `architecture:component-theming-surface` owns target admission, state
+  reflection, and anatomy mapping.
+
+## Verification map
+
+| Contract            | Verification                                                               | Representative states                                                  | Mutation or failure expectation                                             | Audit section                  |
+| ------------------- | -------------------------------------------------------------------------- | ---------------------------------------------------------------------- | --------------------------------------------------------------------------- | ------------------------------ |
+| FR1, FR2, AR1–AR3   | `DateRangeInput.test.tsx`                                                  | no match, applied preset, endpoint-invalid preset, span-invalid preset | Semantics or state attributes disappear                                     | `audit:DateRangeInput/presets` |
+| FR3, FR4            | `DateRangeInput.test.tsx`, `themingTargets.test.ts`, generated probe theme | group target, selected button, disabled button                         | Target class/state is missing, undocumented, or placed on the wrong element | `audit:DateRangeInput/theming` |
+| Theming anatomy map | `scripts/check-knowledge.mjs`                                              | all documented anatomy                                                 | Target ownership or anatomy names drift                                     | `audit:DateRangeInput/theming` |
+
+## Decision log
+
+### DEC-1 — Preset group and buttons are public theme anatomy
+
+**Reference:** `component:DateRangeInput/DEC-1`
+**Decider:** cixzhang, 2026-09-14
+
+The optional preset sidebar and each quick-select button are stable,
+consumer-recognizable parts. `date-range-input-presets` belongs on the group
+that owns sidebar presentation; `date-range-input-preset` belongs on each
+button, with selected and disabled reflected as states rather than separate
+targets. The target additions preserve default visuals and button semantics;
+preset constraint enforcement follows FR2 and ORD1–ORD2.
+
+## Open questions
+
+- **OQ1 — Should the inner range-display trigger receive its own target, or remain
+  represented only by the composite field surface?** (`human-api`)
+
+## Content boundary
+
+This file does not duplicate the consumer prop table, usage examples, Calendar or
+Popover contracts, current audit results, or downstream theme implementation.

package/src/DateRangeInput/DateRangeInput.test.tsx

@@ -370,10 +370,15 @@ describe('DateRangeInput', () => {
       expect(
         screen.queryByRole('listbox', {hidden: true}),
       ).not.toBeInTheDocument();
-      expect(
-        screen.getByRole('group', {name: 'Preset date ranges', hidden: true}),
-      ).toBeInTheDocument();
-      expect(getButton('Last 7 days')).toBeInTheDocument();
+      const group = screen.getByRole('group', {
+        name: 'Preset date ranges',
+        hidden: true,
+      });
+      expect(group).toBeInTheDocument();
+      expect(group).toHaveClass('astryx-date-range-input-presets');
+      expect(getButton('Last 7 days')).toHaveClass(
+        'astryx-date-range-input-preset',
+      );
     });
 
     it('marks the applied preset with aria-current, not aria-selected', () => {
@@ -386,11 +391,99 @@ describe('DateRangeInput', () => {
         />,
       );
       const active = getButton('Last 7 days');
+      expect(active).toHaveClass('astryx-date-range-input-preset');
+      expect(active).toHaveAttribute('data-selected', 'selected');
       expect(active).toHaveAttribute('aria-current', 'true');
       expect(active).not.toHaveAttribute('aria-selected');
       const inactive = getButton('This month');
+      expect(inactive).toHaveClass('astryx-date-range-input-preset');
+      expect(inactive).not.toHaveAttribute('data-selected');
+      expect(inactive).not.toHaveAttribute('data-disabled');
       expect(inactive).not.toHaveAttribute('aria-current');
     });
+
+    it('disables a preset when its start is before min', () => {
+      const handleChange = vi.fn();
+      render(
+        <DateRangeInput
+          label="Range"
+          value={null}
+          onChange={handleChange}
+          min="2026-03-02"
+          presets={[presets[0]]}
+        />,
+      );
+
+      const preset = getButton('Last 7 days');
+      expect(preset).toBeDisabled();
+      fireEvent.click(preset);
+      expect(handleChange).not.toHaveBeenCalled();
+    });
+
+    it('disables a preset when its end is after max', () => {
+      const handleChange = vi.fn();
+      render(
+        <DateRangeInput
+          label="Range"
+          value={null}
+          onChange={handleChange}
+          max="2026-03-06"
+          presets={[presets[0]]}
+        />,
+      );
+
+      const preset = getButton('Last 7 days');
+      expect(preset).toBeDisabled();
+      fireEvent.click(preset);
+      expect(handleChange).not.toHaveBeenCalled();
+    });
+
+    it('disables a preset when either endpoint fails dateConstraints', () => {
+      const handleChange = vi.fn();
+      render(
+        <DateRangeInput
+          label="Range"
+          value={null}
+          onChange={handleChange}
+          dateConstraints={[date => date.getDate() !== 7]}
+          presets={[presets[0]]}
+        />,
+      );
+
+      const preset = getButton('Last 7 days');
+      expect(preset).toBeDisabled();
+      fireEvent.click(preset);
+      expect(handleChange).not.toHaveBeenCalled();
+    });
+
+    it('commits an enabled preset using its already-resolved range', () => {
+      const range = {start: '2026-03-01', end: '2026-03-07'} as const;
+      const getRange = vi.fn(() => range);
+      let getRangeCallsAtChange = 0;
+      const handleChange = vi.fn(() => {
+        getRangeCallsAtChange = getRange.mock.calls.length;
+      });
+      render(
+        <DateRangeInput
+          label="Range"
+          value={null}
+          onChange={handleChange}
+          min="2026-03-01"
+          max="2026-03-31"
+          dateConstraints={[date => date.getDate() !== 13]}
+          minRangeSpan={2}
+          maxRangeSpan={7}
+          presets={[{label: 'Allowed range', getRange}]}
+        />,
+      );
+
+      const getRangeCallsBeforeClick = getRange.mock.calls.length;
+      const preset = getButton('Allowed range');
+      expect(preset).not.toBeDisabled();
+      fireEvent.click(preset);
+      expect(handleChange).toHaveBeenCalledWith(range);
+      expect(getRangeCallsAtChange).toBe(getRangeCallsBeforeClick);
+    });
   });
   describe('disabledMessage', () => {
     // jsdom does not implement the Popover API used by the tooltip, so mock
@@ -831,7 +924,10 @@ describe('DateRangeInput range-span forwarding', () => {
     const withinCap = getButton('Last 3 days');
     const overCap = getButton('Last 30 days');
     expect(withinCap).not.toBeDisabled();
+    expect(withinCap).not.toHaveAttribute('data-disabled');
     expect(overCap).toBeDisabled();
+    expect(overCap).toHaveClass('astryx-date-range-input-preset');
+    expect(overCap).toHaveAttribute('data-disabled', 'disabled');
 
     fireEvent.click(overCap);
     expect(handleChange).not.toHaveBeenCalled();