@antadesign/anta 0.3.31 → 0.3.33

package/docs/components/expander.md

@@ -94,6 +94,43 @@ it's a no-op there. Use it where the expander sits in a content column
 with room to its left (a prose measure); in a full-width / edge-to-edge
 container the chevron would overhang the edge.
 
+## Indicator
+
+`indicatorPlacement="end"` puts the disclosure mark after the header actions.
+The mark stays inside the summary button, so selecting it toggles the section.
+Actions remain separate controls. The default `start` placement keeps the
+right-pointing chevron that turns down when open. At the end, it points down
+when closed and up when open.
+
+Choose `indicator="triangle"` for a filled arrow or `indicator="plus"` for a
+plus that becomes a minus. The default is `chevron`. The built-in motion follows
+the reduced-motion preference. An unrecognized string or number leaves the
+indicator empty; omit `indicator` to keep the default chevron.
+
+```tsx
+<Expander title="Download report" indicatorPlacement="end"
+  actions={<Button size="small" label="Download" />}>
+  …
+</Expander>
+<Expander title="Plus and minus" indicator="plus" indicatorPlacement="end">…</Expander>
+```
+
+Pass a decorative node as `indicator` to replace the built-in mark. One node
+rotates with the section. To switch between two visuals, pass `closed` and
+`open` nodes. Neither form adds a focus stop or an accessible name: the title
+names the summary button, and its `aria-expanded` reports the state. Put
+interactive controls in `actions`.
+
+```tsx
+<Expander title="Custom mark" indicatorPlacement="end"
+  indicator={<Icon shape="chevron-down" />}>…</Expander>
+<Expander title="Two marks" indicatorPlacement="end"
+  indicator={{ closed: <Icon shape="plus" />, open: <Icon shape="minus" /> }}>…</Expander>
+```
+
+On a tertiary end-placement expander, `outdent` still aligns the title and body
+with surrounding content. The indicator stays inside the end edge.
+
 ## Title and level
 
 `title` takes a string or any node. For a string, `level` (1–6) applies
@@ -168,10 +205,10 @@ toggle:
 
 ## Actions
 
-Pass `actions` to render extra controls — buttons, tags — at the end of
-the header row. They sit **outside** the toggle trigger, as its flex
-siblings: clicking them never toggles the expander, they're separately
-focusable, and screen readers announce them as their own controls.
+Pass `actions` to render extra controls — buttons, tags — after the title.
+They sit **outside** the toggle trigger as its header siblings. Clicking them
+never toggles the expander; they're separately focusable and announced as
+their own controls.
 (Don't put interactive elements *inside* a custom `title` instead —
 nesting controls in a button is an accessibility anti-pattern.)
 
@@ -309,13 +346,15 @@ function Accordion() {
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `title` | ReactNode | — | Summary (header) content. A string is rendered with the `level` type scale; pass a node (e.g. a `<Title>`) for full control or real heading semantics in the document outline. |
-| `actions?` | ReactNode | — | Header actions (e.g. buttons, tags) rendered at the end of the header row, OUTSIDE the toggle trigger — clicking them never toggles, they're separately focusable, and screen readers see them as separate controls. |
+| `actions?` | ReactNode | — | Header actions rendered outside the toggle trigger. With an end indicator, actions sit between the title and indicator. |
 | `defaultOpen?` | boolean | — | Initial open state for the uncontrolled case. |
 | `disabled?` | boolean | — | Disables the header: not clickable or focusable, hover affordance off, text dimmed. The open state freezes as-is — disabling an open expander keeps it open. `actions` stay live; disable them separately if needed. |
+| `indicator?` | ReactNode | 'chevron' | Built-in disclosure mark, a decorative node, or separate closed/open visuals. Other primitive values leave the indicator empty. Custom nodes are passive; use `actions` for controls. |
+| `indicatorPlacement?` | 'start' \| 'end' | 'start' | Place the disclosure mark before the title or after the actions. |
 | `level?` | 1 \| 2 \| 3 \| 4 \| 5 \| 6 | 5 | Heading type scale applied to a string `title` (mirrors `<Title>`'s levels). Visual only — for outline semantics, pass a `<Title>` as the title. |
 | `onStateChange?` | (event, detail) => void | — | Fired before the open state changes. `event` is the cancelable `statechange` — call `event.preventDefault()` to veto an *uncontrolled* toggle (e.g. confirm before closing). `detail.next` is the requested open state, `detail.prev` the current one (booleans). In controlled mode, apply `detail.next` to `open` to accept, or do nothing to reject. |
 | `open?` | boolean | — | Controlled open state. When provided, the consumer owns open/close. Selecting the summary requests a change through `onStateChange`; omit `open` for uncontrolled use. |
-| `outdent?` | boolean | — | Outdent the chevron into the left gutter so the title and body sit flush with surrounding content (the docs-header layout). Only takes effect with `priority="tertiary"` — on the filled priorities the container edge has to bound the chevron, so it's a no-op there. |
+| `outdent?` | boolean | — | Align the title and body with surrounding content on a tertiary expander. With the default start indicator, the mark hangs in the gutter; an end indicator stays inside its edge. |
 | `priority?` | 'primary' \| 'secondary' \| 'tertiary' | 'secondary' | Surface emphasis. `secondary` (the default) is a subtle fill; `primary` is a more pronounced card; `tertiary` is transparent (the bare disclosure). |
 | `round?` | boolean \| number \| string | — | Round corners sized to half the folded (header) height: a pill when folded, and — when expanded — the same corner radius rather than a bigger stadium. The element measures the header, so it tracks custom header content. Pass a `number` (px) or CSS length string for a *fixed* radius that overrides the measurement (and skips it) in both states. |
 | `tone?` | 'neutral' \| 'brand' \| 'info' \| 'success' \| 'warning' \| 'critical' \| (string & {}) | 'neutral' | Semantic tone, or any literal CSS color (`'#ff1493'`, `'rebeccapurple'`) for a one-off custom tone. Named tones re-point the text and (on filled priorities) the surface to the matching palette; a custom color keeps its hue while lightness/chroma are pinned. `'neutral'` (the default) is the same as omitting it. |
@@ -324,7 +363,8 @@ function Accordion() {
 
 Use the web component directly when you are not using React or Preact and a native control does not fit.
 
-Slots hold the title and actions. The details element contains the collapsible body.
+Slots hold the title, actions, and an optional custom indicator. The details
+element contains the collapsible body.
 
 ```html
 <a-expander default-state="open">
@@ -336,6 +376,29 @@ Slots hold the title and actions. The details element contains the collapsible b
 </a-expander>
 ```
 
+Use the `indicator` and `indicator-placement` attributes for built-in marks.
+For custom artwork, assign one element to `slot="indicator"`. Assign two
+elements with `data-when="closed"` and `data-when="open"` when the artwork
+changes between states. Indicator content is decorative and cannot receive focus
+or pointer events.
+
+```html
+<a-expander indicator="triangle" indicator-placement="end">…</a-expander>
+
+<a-expander indicator-placement="end">
+  <a-expander-summary slot="title">Custom mark</a-expander-summary>
+  <a-icon slot="indicator" shape="chevron-down" aria-hidden="true" inert></a-icon>
+  <a-expander-details>Content</a-expander-details>
+</a-expander>
+
+<a-expander indicator-placement="end">
+  <a-expander-summary slot="title">Two marks</a-expander-summary>
+  <a-icon slot="indicator" data-when="closed" shape="plus" aria-hidden="true" inert></a-icon>
+  <a-icon slot="indicator" data-when="open" shape="minus" aria-hidden="true" inert></a-icon>
+  <a-expander-details>Content</a-expander-details>
+</a-expander>
+```
+
 ### Native HTML details
 
 For a simple disclosure, add `data-anta` to native `<details>`. It keeps the
@@ -358,18 +421,18 @@ Reach for the props first: **`tone`** sets the color (any CSS color for a custom
 tone — it derives the surface in oklch), **`priority`** the fill, **`level`** the
 heading. Two knobs are worth keeping: **`--expander-tone-source`** (the color a
 custom `tone` derives from — set it to drive the palette from your own variable) and
-**`--expander-gutter`** (the shared left inset that re-insets header + body + chevron
-in lockstep; `outdent` sets it to `0`).
+**`--expander-gutter`** (the shared title and body inset; it also positions the
+start indicator). It is 24px at the start, 12px at the end, and `0` with tertiary
+`outdent`.
 
 ```tsx
 <Expander tone="#e0457b" title="Custom" />
 ```
 
 For everything else, `<a-expander>` exposes shadow **parts** — `::part(summary)` (the
-header button), `::part(content)` (the body), `::part(actions)` (the actions row) — and
-the light-DOM `<a-expander-summary>` / `<a-expander-details>` children, which you style
-directly. The header hover / active / focus states and the chevron all live on
-`::part(summary)`.
+header button), `::part(indicator)` (the decorative mark), `::part(content)` (the
+body), and `::part(actions)` (the actions row) — and the light-DOM
+`<a-expander-summary>` / `<a-expander-details>` children, which you style directly.
 
 Each example keeps its CSS in a `<style>` **inside** its own preview, targeting a demo
 class on that preview's expander (e.g. `.hide-chevron`) — so the rule you read is
@@ -377,25 +440,19 @@ literally in the preview's DOM, next to the element it styles, never a page-wide
 stylesheet. The folded recipe under each preview is that same CSS; in your app, swap the
 demo class for your own selector.
 
-**Hide the chevron.** There's deliberately no prop for it: a region that folds needs a
-visible affordance. For a genuine one-off, the chevron is the summary's `::before`, so
-remove it — then pull `--expander-gutter` in (it drives the title *and* body inset
-together) to tighten the now-empty gutter, and drop your own marker into the title:
+**Hide the indicator.** A disclosure needs a visible affordance. If the title
+provides one, hide the indicator part and tighten the unused gutter:
 
 ```css
-a-expander.hide-chevron::part(summary)::before { display: none; }  /* remove the built-in chevron */
+a-expander.hide-chevron::part(indicator) { display: none; }
 a-expander.hide-chevron { --expander-gutter: 12px; }               /* tighten the inset (default 24px) */
 ```
 
-**Swap the chevron glyph.** It's a CSS mask, so point `mask-image` at your own SVG; it
-keeps its gutter position and the open-state rotation:
+**Change the indicator.** Use the built-in `triangle` or `plus` preset, or
+provide a custom node through `indicator` / `slot="indicator"`:
 
-```css
-/* the chevron is the summary's ::before with a mask-image; swap the glyph for a
-   solid triangle — it keeps its position and the open-state rotate */
-a-expander.swap-chevron::part(summary)::before {
-  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5l11 7-11 7z'/%3E%3C/svg%3E");
-}
+```tsx
+<Expander title="Triangle indicator" indicator="triangle" priority="tertiary">…</Expander>
 ```
 
 **Tint the whole header** on hover / press by styling the summary part (the header
@@ -473,29 +530,13 @@ export function SaveButton() {
 `}</style>
 ```
 
-*A chevron as a status indicator* — drop the built-in toggle chevron and put a
-**non-interactive** chevron in `actions` instead. The whole header still toggles; the
-indicator only reflects state, rotating via `:state(open)`. With the `<Expander>` JSX
-wrapper, pass `actions={<Icon shape="chevron-down" />}` (the preview below uses the
-equivalent element composition because these docs render statically):
+*Style the indicator by state* with `:state(open)` and `::part(indicator)`. The
+example changes its color without changing the built-in glyph or motion:
 
 ```tsx
-{/* renders an <a-expander> whose only header control is a non-interactive
-    chevron in the actions slot; the whole header toggles, the chevron flips */}
-<Expander actions={<Icon shape="chevron-down" />} className="indicator" defaultOpen>
-  Build log
-</Expander>
-
-{/* the JSX wrapper boxes the icon in a layout-neutral span, so target the
-    [slot="actions"] element */}
+<Expander title="Build log" indicatorPlacement="end" className="indicator" defaultOpen>…</Expander>
 <style>{`
-  a-expander.indicator { --expander-gutter: 12px; }                /* one var: title + body inset */
-  a-expander.indicator::part(summary)::before { display: none; }   /* drop the built-in chevron */
-  a-expander.indicator [slot="actions"] {
-    pointer-events: none;
-    margin-inline-end: 6px;                                        /* a little more right inset */
-    transition: transform 150ms ease;
-  }
-  a-expander.indicator:state(open) [slot="actions"] { transform: rotate(180deg); }  /* points down → up */
+  a-expander.indicator::part(indicator) { color: var(--text-4); }
+  a-expander.indicator:state(open)::part(indicator) { color: var(--text-1); }
 `}</style>
 ```

package/docs/components/input.md

@@ -24,6 +24,22 @@ Anta's text scale, so a field lines up with same-size `Text` / `Button`.
 | `medium` | 28px | 15 / 20 | 16px |
 | `large` | 32px | 17 / 22 | 18px |
 
+## Priority
+
+`priority` changes the field surface without changing its size or behavior.
+`primary` (the default) has a fill and border. `secondary` has a transparent
+background and visible border. `tertiary` keeps both transparent at rest, then
+uses secondary's border on hover or focus. Use it where the label or surrounding
+content makes the field easy to find. All three show the same focus ring.
+On an enabled field, a non-neutral `status` keeps its tinted fill and border
+visible at rest.
+
+```tsx
+<Input label="Primary" placeholder="Filled field" autoComplete="off" />
+<Input priority="secondary" label="Secondary" placeholder="Outlined field" autoComplete="off" />
+<Input priority="tertiary" label="Tertiary" placeholder="Field on hover or focus" autoComplete="off" />
+```
+
 ## Label and hint
 
 ```tsx
@@ -470,6 +486,7 @@ wraps to fewer columns as it narrows. Resize the preview to see it reflow.
 | `onValueChange?` | (event, attrs) => void | — | Unified value-change handler — the easy path for state. Fires on `input` *and* `change` (and on clear), with the native `event` plus a convenience `attrs` snapshot (`value`, `name`, `empty`, `valid`, `validationMessage`) so you can do `setForm(s => ({ ...s, [attrs.name]: attrs.value }))` without digging into the event. Use `event.type` to tell a live edit (`input`) from a commit (`change`); read `id` / `type` / `className` off `event.target`. |
 | `pattern?` | string | — | Validation pattern (single-line). |
 | `placeholder?` | string | — | Placeholder shown when empty. |
+| `priority?` | 'primary' \| 'secondary' \| 'tertiary' | primary | Field emphasis. `primary` has a fill and border, `secondary` keeps the border without a fill, and `tertiary` makes the border transparent until hover or focus. Status borders remain visible at rest. |
 | `readOnly?` | boolean | — | Make the field read-only. |
 | `required?` | boolean | — | Mark the field required (drives native validity). |
 | `role?` | string | — | ARIA `role` for the field — e.g. `combobox` when the input drives a suggestion `listbox` (see `InputAutocomplete`). The custom element delegates it, together with standard `aria-*` props, to the focused native shadow control. Left unset by default. |
@@ -480,7 +497,7 @@ wraps to fewer columns as it narrows. Resize the preview to see it reflow.
 | `status?` | 'neutral' \| 'brand' \| 'info' \| 'success' \| 'warning' \| 'critical' | — | Validation / feedback tone — colors the border + `hint` and prefixes a glyph. Only `critical` marks the field invalid (`aria-invalid`, blocks form submission, `:state(invalid)`); `success` / `warning` / `info` / `brand` are advisory and stay valid. Omit (or `neutral`) for a plain field. |
 | `statusIcon?` | (string & {}) \| false \| IconShape | — | Glyph shown before the `hint` when `status` is set. Each status has a default (critical → `warning-diamond`, warning → `warning-triangle`, success → `circle-check`, info → `info`, brand → `circle-small-solid`); pass a shape to override, or `false` to drop it. `neutral` has no default glyph. |
 | `step?` | number \| string | — |  |
-| `tone?` | string | — | Custom accent color — any literal CSS color tints the resting + hover border (focus ring stays the global `--focus-ring`). For consistency with the other controls' custom-tone knob; a `status` still overrides for validation. |
+| `tone?` | string | — | Custom accent color — any literal CSS color tints the border when shown (focus ring stays the global `--focus-ring`). For consistency with the other controls' custom-tone knob; a `status` still overrides for validation. |
 | `trailing?` | ReactNode | — | Content pinned to the end of the field (e.g. icons, buttons), after the clear button when `clearable`. |
 | `truncate?` | boolean | true | Ellipsize an overflowing single-line value. Read-only inputs already do this; pass `false` when an editable field should show the full value. |
 | `type?` | 'text' \| 'search' \| 'email' \| 'password' \| 'tel' \| 'url' \| 'number' | text | Single-line input type. Ignored when `multiline`. `search` is a **wrapper-only** shorthand: it defaults a leading search icon and a clear button (both overridable — pass your own `leading`, or `clearable={false}`) and sets `inputmode="search"`, but the DOM input stays `type="text"`. The native `search` type never reaches the element, so the browser's own clear/search affordances never appear — Anta owns that chrome. |
@@ -534,9 +551,10 @@ their `size` attribute, so Anta does not reuse it. `round` and a custom-color
 
 ## Styling
 
-Reach for the props first: **`status`** sets a validation tone (border + message),
-**`tone`** a custom accent color for the border (any CSS color), **`size`** the
-dimensions. The focus ring is the global [`--focus-ring`](../colors.md#focus-ring).
+Reach for the props first: **`priority`** sets the field surface,
+**`status`** a validation tone (border + message), **`tone`** a custom accent
+color for the border (any CSS color), and **`size`** the dimensions. The focus
+ring is the global [`--focus-ring`](../colors.md#focus-ring).
 
 ```tsx
 <Input tone="#e0457b" label="Custom accent" autoComplete="off" />
@@ -555,11 +573,13 @@ a-input::part(input) { font-variant-numeric: tabular-nums; }
 a-input::part(label) { text-transform: uppercase; }
 ```
 
-The border is drawn as an **inset `box-shadow`**, not a real `border`, so its width
-(`0.5px` → `1px` when a `status` is set) and placement never change the box size —
-the field height stays locked to the matching Button. Drop the leading `inset` to
-draw the border as an outset ring instead. You can also re-point an `--input-*`
-color token on one instance (`style={{ '--input-border': 'var(--border-1)' }}`)
+The border is drawn as an **inset `box-shadow`**, so its width (`0.5px` at rest,
+including tertiary's transparent border, and `1px` on hover, focus, or
+non-neutral status)
+never changes the box size. The field height stays aligned with `Button`.
+Drop the leading `inset` to draw the border as an outset ring instead. You can
+also re-point an `--input-*` color token on one instance
+(`style={{ '--input-border': 'var(--border-1)' }}`)
 or a wrapping selector; the resolver lives in `@layer anta`, so any un-layered rule
 of yours wins.
 

package/docs/components/panel.md

@@ -92,8 +92,9 @@ through its controls. Restoring releases the trap and returns focus to the
 previous external control, when available.
 
 Provide a keyboard-accessible **Restore** control: Escape and outside clicks
-do not restore the panel. Panel adds no dialog role, background inertness, or
-scroll lock. Use [Dialog](./dialog.md) for modal interactions.
+do not restore the panel. Panel adds no dialog role or background inertness.
+Maximizing Panel does not lock page scrolling; the page's viewport scrollbar
+may remain visible and usable. Use [Dialog](./dialog.md) for modal interactions.
 
 Panel fills the browser viewport, without invoking the Fullscreen API.
 Browsers without Popover API support keep it in normal layout.

package/docs/components/select-faceted.md

@@ -28,12 +28,24 @@ is limited. `offset` sets the gap in pixels between the trigger and the menu:
 <SelectFaceted placement="top-end" offset={8} facets={FACETS} />
 ```
 
-Open **Metadata** in the first demo to choose key–value tags such as
+Open **Recency** in the first demo, select **Custom range**, then pick **From**
+and **To** from the fields side by side. Each field closes its own calendar after
+a pick while the Recency editor stays open for the second date. Both fields have
+a clear button. Open **Min duration** to choose a comparison, then enter seconds.
+The comparison alone does not apply the facet or add a result chip.
+
+Open **Metadata** to choose key–value tags such as
 **env production** or **region us-east**. Its `renderOption` callback reads
 custom option fields and renders a `Tag` with `label` and `value`. Search
 for **production** to see the same tag in global results.
 
 ```tsx
+const recencySummary = (v) =>
+  'preset' in v
+    ? { today: 'Today', yesterday: 'Yesterday', last14: 'Last 14 days', last30: 'Last 30 days' }[v.preset]
+    : v.from && v.to ? `${v.from} → ${v.to}` : 'Custom range'
+const sign = (comparison) => ({ gt: '>', gte: '≥', eq: '=', lte: '≤', lt: '<' })[comparison] ?? '≥'
+
 const FACETS = [
   { key: 'assignee', label: 'Assignee', kind: 'multiple', filter: true, options: people },
   { key: 'owner',    label: 'Owner',    kind: 'single',   filter: true, options: people },
@@ -55,7 +67,8 @@ const FACETS = [
     ),
   },
   { key: 'title',    label: 'Title contains', kind: 'text' },
-  { key: 'duration', label: 'Min duration', kind: 'custom', summary: (v) => `≥ ${v.min}s`, render: /* … */ },
+  { key: 'duration', label: 'Min duration', kind: 'custom', summary: (v) => `${sign(v.comparison)} ${v.min}s`, render: /* DurationEditor with draft comparison and Input value */ },
+  { key: 'recency',  label: 'Recency', kind: 'custom', summary: recencySummary, render: /* radio presets and two InputDate fields */ },
 ]
 
 const isSet = (v) => !(v == null || v === '' || (Array.isArray(v) && v.length === 0))
@@ -83,8 +96,7 @@ function Demo() {
 
       {active.length > 0 && (
         <div style={{ display: 'flex', flexDirection: 'row', flexWrap: 'wrap', gap: 8, alignItems: 'center' }}>
-          {/* Show one editable control for each active facet. Its label becomes
-              the control's `leading` prefix. */}
+          {/* Show an editable control or summary for each active facet. */}
           {active.map((facet) => {
             // Options facets → an editable Select (single shows the trailing check;
             // both are filterable + have a clearable footer).
@@ -106,7 +118,12 @@ function Demo() {
                 />
               )
 
-            // Free-form text / custom → an editable Input.
+            if (facet.key === 'recency') {
+              const recency = value.recency
+              return <Tag key={facet.key} label="Recency" value={recencySummary(recency)} />
+            }
+
+            // Free-form text / duration → an editable Input.
             const val = facet.kind === 'text' ? value[facet.key] : value[facet.key]?.min
             const write = (raw) =>
               setFacet(facet.key, facet.kind === 'text' ? raw || undefined : raw ? { min: raw } : undefined)
@@ -144,9 +161,9 @@ function Demo() {
 }
 ```
 
-The trigger opens the facet menu. The example renders one editable
-[Select](./select.md) below it for each active facet. Each Select receives the
-facet label through `leading`, which displays it as a prefix.
+The trigger opens the facet menu. The example shows active values beside it.
+Option facets use an editable [Select](./select.md) with the facet label in its
+`leading` prefix. Recency uses a summary tag and is edited in the facet menu.
 
 ### Custom option content
 
@@ -299,11 +316,11 @@ A custom facet stores a `Date` directly. Unlike the value of a `single` or
 
 #### A recency filter: presets plus a range
 
-This editor combines a `RadioGroup` of presets with a **Custom range** option
-that reveals two `InputDate` fields. Its value is either `{ preset }` or
-`{ from, to }`. The `resolveRange` helper converts either shape into the date
-range used to filter the result set. Each InputDate calendar opens above the
-facet menu without closing it.
+This editor uses `MenuItem` rows with radio indicators for the presets.
+Selecting **Custom range** reveals two `InputDate` fields side by side. The facet
+value is either `{ preset }` or `{ from, to }`. The `resolveRange` helper
+converts either shape into the date range used to filter the result set. Each
+`InputDate` calendar opens above the facet menu without closing it.
 
 ```tsx
 type Recency = { preset: 'today' | 'yesterday' | 'last14' | 'last30' } | { from: string; to: string }
@@ -332,22 +349,19 @@ const recency: SelectFacetCustom<Recency> = {
     const mode = value == null ? '' : 'preset' in value ? value.preset : 'custom'
     const range = value && 'from' in value ? value : { from: '', to: '' }
     return (
-      <div style={{ display: 'grid', gap: 8 }}>
-        <RadioGroup
-          size="small"
-          options={PRESETS}                       // Today / Yesterday / Last 14 / Last 30 / Custom range
-          value={mode}
-          // Controlled group: apply the pick in onStateChange (onValueChange fires
-          // only after `value` changes, so it can't drive a controlled RadioGroup).
-          onStateChange={(_e, { next }) => onChange(next === 'custom' ? range : { preset: next })}
-        />
+      <div style={{ minWidth: 360 }}>
+        {PRESETS.map((preset) => (
+          <MenuItem key={preset.value} label={preset.label}
+            selectionIndicator="radio" selected={mode === preset.value} data-menu-open
+            onSelect={() => onChange(preset.value === 'custom' ? range : { preset: preset.value })} />
+        ))}
         {mode === 'custom' && (
-          <>
-            <InputDate size="small" label="From" value={range.from}
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: 8, padding: 8 }}>
+            <InputDate size="small" label="From" clearable value={range.from}
               onValueChange={(from) => onChange({ from, to: range.to })} />
-            <InputDate size="small" label="To" value={range.to} min={range.from || undefined}
+            <InputDate size="small" label="To" clearable value={range.to} min={range.from || undefined}
               onValueChange={(to) => onChange({ from: range.from, to })} />
-          </>
+          </div>
         )}
       </div>
     )

package/docs/components/slider.md

@@ -1,6 +1,7 @@
 # Slider
 
-**`Slider`** selects one numeric value from a range. Its label sits above the
+**`Slider`** selects one number or an interval between two numbers. Pass a number
+for one thumb or a two-number tuple for two thumbs. Its label sits above the
 rail, and the value appears at the right side of the label row by default. Use
 `value` with `onValueChange` to control it, or `defaultValue` for uncontrolled use.
 
@@ -23,6 +24,55 @@ Arrow keys change by `step`. Home and End set the minimum and maximum. PageUp an
 <Slider label="Jump on press" defaultValue={35} trackClick="jump" />
 ```
 
+## Range values
+
+Pass two numbers to `value` or `defaultValue` to show two thumbs. Drag either
+thumb across the other to move past it. The thumb you grabbed keeps moving, and
+the value stays ordered from low to high. For example, dragging the thumb at 20
+past 70 to 85 changes `[20, 70]` to `[70, 85]`. Both thumbs can share a value.
+Each thumb has its own keyboard focus. Their tab order stays fixed when they
+cross.
+
+`onValueChange` receives a number for a single-value slider and an ordered
+`[number, number]` tuple for a range slider. `onValueCommit` uses the same shape.
+Without `defaultValue`, a form reset selects the full `[min, max]` range.
+
+```tsx title="Controlled range"
+import { useState } from 'preact/hooks'
+import { Slider } from '@antadesign/anta'
+
+function SliderRangeDemo() {
+  const [value, setValue] = useState<[number, number]>([20, 70])
+  const [lastChange, setLastChange] = useState<[number, number] | null>(null)
+
+  return (
+    <>
+      <Slider
+        label="Selected interval"
+        value={value}
+        onValueChange={(_, { value: next }) => {
+          setValue(next)
+          setLastChange(next)
+        }}
+      />
+      <p className="range-demo-output"><code>onValueChange</code>: <code>{lastChange ? JSON.stringify(lastChange) : '—'}</code></p>
+    </>
+  )
+}
+```
+
+## Inverted fill
+
+Set `inverted` to fill the other part of the rail. For one thumb, the fill runs
+from the value to the maximum. For two thumbs, the fill covers the rail outside
+the selected interval. The minimum and maximum stay at their usual rail ends;
+thumb movement and keyboard controls stay the same.
+
+```tsx
+<Slider label="Inverted single value" defaultValue={40} inverted />
+<Slider label="Inverted range" defaultValue={[20, 70]} inverted />
+```
+
 ## Value placement
 
 `valueDisplay="end"` is the default. Use `inline` for `Label: value`, `thumb` to keep a value above the thumb, or `none` to omit it. `valuePrefix` and `valueSuffix` add text to every live value display.
@@ -66,13 +116,14 @@ Arrow keys change by `step`. Home and End set the minimum and maximum. PageUp an
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `defaultValue?` | number | 0 | Initial uncontrolled value. |
+| `defaultValue?` | number \| SliderRangeValue | 0 | Initial uncontrolled value. |
 | `disabled?` | boolean | — | Disables pointer and keyboard interaction. |
+| `inverted?` | boolean | — | Fill the rail outside the selected value or range. |
 | `label?` | ReactNode | — | Visible field label, shown above the rail. A string supplies the slider's accessible name; give a rich label an explicit `aria-label`. |
 | `markers?` | SliderMarker[] | — | Compact text labels positioned below the rail. They do not add dots or ticks to the rail. |
 | `max?` | number | 100 | Highest permitted value. |
 | `min?` | number | 0 | Lowest permitted value. |
-| `name?` | string | — | Form field name. The current numeric value submits under this name. |
+| `name?` | string | — | Form field name. A range submits two values under this name. |
 | `onValueChange?` | (event, attrs) => void | — | Fires on every keyboard or pointer value change. |
 | `onValueCommit?` | (event, attrs) => void | — | Fires after a drag ends and after each keyboard value change. |
 | `round?` | boolean \| number \| string | — | Fully round the rail and thumb. Pass a number (px) or CSS length string for a shared custom radius. |
@@ -84,7 +135,7 @@ Arrow keys change by `step`. Home and End set the minimum and maximum. PageUp an
 | `tone?` | 'neutral' \| 'brand' \| 'info' \| 'success' \| 'warning' \| 'critical' \| (string & {}) | 'neutral' | Color of the filled rail. Pass a named tone or a literal CSS color for a one-off custom tone. The unfilled rail stays neutral. |
 | `trackClick?` | 'drag-only' \| 'jump' | 'drag-only' | Controls what happens when the rail is pressed. `drag-only` starts dragging from the current value. `jump` first moves to the pressed position. |
 | `trackSize?` | number \| string | 2 | Thickness of both rail segments. Numbers use pixels; strings are CSS lengths. Keep it no larger than the thumb diameter. |
-| `value?` | number | — | Controlled value. Update it from `onValueChange`. |
+| `value?` | number \| SliderRangeValue | — | Controlled value. A pair of numbers selects a range. Update it from `onValueChange`. |
 | `valueDisplay?` | 'end' \| 'inline' \| 'thumb' \| 'none' | 'end' | Where the live value appears. `end` puts it at the right edge of the label row. `inline` renders `Label: value`. `thumb` keeps it above the thumb. |
 | `valuePrefix?` | string | — | Text inserted before the live numeric value, such as `$`. |
 | `valueSuffix?` | string | — | Text inserted after the live numeric value, such as `%` or `°C`. |
@@ -93,6 +144,12 @@ Arrow keys change by `step`. Home and End set the minimum and maximum. PageUp an
 
 Use `<a-slider>` when you are not using React or Preact. Add its `role` and accessible name yourself, then register it from `@antadesign/anta/elements`.
 
+For a range, separate the two numbers with a space in `value` or `defaultvalue`.
+Use `role="group"` and give the range an accessible name. Each thumb receives
+its own slider role and keyboard focus. The element's `value` property and
+change events expose a two-number array. If you set `name`, form submission
+includes both values in low-to-high order. Read them with `FormData.getAll(name)`.
+
 ```html
 <a-slider
   role="slider"
@@ -109,6 +166,12 @@ Use `<a-slider>` when you are not using React or Preact. Add its `role` and acce
 </a-slider>
 ```
 
+```html
+<a-slider role="group" aria-label="Selected interval" name="interval" defaultvalue="20 70" inverted>
+  <span slot="label">Selected interval</span>
+</a-slider>
+```
+
 ### Native HTML range input
 
 Add `data-anta` to a native range input for Anta's rail, fill, thumb, and focus
@@ -140,3 +203,75 @@ as `Slider`. In raw HTML, `round` needs a CSS length such as `"4px"`; JSX
   border-radius: 4px;
 }
 ```
+
+### Editable value beside the label
+
+Compose `Input` and `Slider` as separate controls. The grid puts the label and
+small input on one row and the slider underneath. Pass `valueDisplay="none"` so the
+slider does not repeat its value. Keep the input's text as a draft; when the
+field loses focus or you press Enter, commit a number within the slider's range.
+Dragging or using the slider's keyboard controls updates both values.
+
+```tsx title="Slider with an editable value"
+import { useState } from 'preact/hooks'
+import { Input, Slider } from '@antadesign/anta'
+
+function SliderEditableValueDemo() {
+  const [value, setValue] = useState(55)
+  const [draft, setDraft] = useState('55')
+
+  const commit = () => {
+    const number = Number(draft)
+    const next = draft.trim() && Number.isFinite(number)
+      ? Math.max(0, Math.min(100, Math.round(number)))
+      : value
+    setValue(next)
+    setDraft(String(next))
+  }
+
+  return (
+    <div className="editable-slider">
+      <span className="editable-slider-label">Volume</span>
+      <Input
+        aria-label="Volume value"
+        size="small"
+        inputMode="numeric"
+        trailing="%"
+        value={draft}
+        onInput={(event) => setDraft(event.currentTarget.value)}
+        onBlur={commit}
+        onKeyDown={(event) => {
+          if (event.key === 'Enter') commit()
+        }}
+      />
+      <Slider
+        aria-label="Volume"
+        value={value}
+        valueDisplay="none"
+        valueSuffix="%"
+        onValueChange={(_, { value: next }) => {
+          setValue(next)
+          setDraft(String(next))
+        }}
+      />
+    </div>
+  )
+}
+```
+
+```css title="Editable Slider layout"
+.editable-slider {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 72px;
+  align-items: center;
+  gap: 0 12px;
+  width: min(100%, 360px);
+  margin-inline: auto;
+}
+.editable-slider-label {
+  color: var(--text-3);
+  font-size: 15px;
+  font-weight: 500;
+}
+.editable-slider > a-slider { grid-column: 1 / -1; }
+```