@antadesign/anta 0.3.30 → 0.3.31

package/docs/components/menu.md

@@ -328,13 +328,13 @@ menus: mark one row for single-select, several for multi-select (pair with
 `data-menu-open` to keep the menu open as choices toggle). The tint tracks
 `tone`, so a toned row stays in its own color.
 
-For a real checkable row, add **`selectionIndicator`** (`'checkbox'` or `'radio'`).
-It renders a passive checkbox/radio at the leading edge (reusing the
-[Checkbox](./checkbox.md) / [Radio](./radio.md) element visuals),
-flips the row to `role="menuitemcheckbox"` / `"menuitemradio"`, and pairs
-`aria-checked` — the row stays the control, the indicator is decorative. This is
-what [Select](./select.md)'s `selection` modes render; use it directly for
-a checkable menu.
+For a checkable row, add `selectionIndicator`. The `checkbox` and `radio`
+variants render a passive leading mark. The `switch` variant renders a passive
+trailing switch for settings that take effect immediately. The
+row remains the control and carries `aria-checked`; the indicator adds no focus
+stop or nested role. A switch row keeps the menu open when selected.
+
+[Select](./select.md)'s selection modes use the checkbox and radio variants.
 
 ```tsx
 {/* Plain tint (no indicator) */}
@@ -345,6 +345,28 @@ a checkable menu.
 <MenuItem selectionIndicator="checkbox" label="Show archived" selected data-menu-open />
 ```
 
+```tsx
+const [notifications, setNotifications] = useState(true)
+const [automaticUpdates, setAutomaticUpdates] = useState(false)
+
+<Button>Settings</Button>
+<Menu>
+  <MenuItem
+    selectionIndicator="switch"
+    label="Notifications"
+    selected={notifications}
+    onSelect={() => setNotifications((value) => !value)}
+  />
+  <MenuItem
+    selectionIndicator="switch"
+    label="Automatic updates"
+    hint="Install new versions automatically"
+    selected={automaticUpdates}
+    onSelect={() => setAutomaticUpdates((value) => !value)}
+  />
+</Menu>
+```
+
 ## Badges, counters, and hints
 
 Drop a `<Tag>` (or any element) as a **child** of a `MenuItem` for a trailing
@@ -411,11 +433,11 @@ navigating links.
 | `onMouseDown?` | (event) => void | — | Raw `mousedown` on the row. Mainly to `preventDefault()` so the row doesn't take focus on a mouse press — e.g. a combobox option keeping focus in its input field while the click still selects. |
 | `onSelect?` | (event, detail) => void | — | Activation handler — fires when *this* item is chosen (click / Enter / Space), unless it's `disabled`. It does **not** fire for a submenu parent (clicking that opens the flyout, which isn't a selection) nor for a selection bubbling up from a nested submenu. On a link item it fires alongside the navigation. Receives the event plus a `{ value, label }` detail. |
 | `role?` | string | — | ARIA role override. Defaults to the role implied by `selectionIndicator` (`menuitem` / `menuitemcheckbox` / `menuitemradio`); set it to reparent the row under a different container role — e.g. `option` inside a `listbox`. |
-| `selected?` | boolean | — | Mark the item as selected. On a plain row (no `selectionIndicator`) this is a persistent background tint, the same resting fill a pressed row shows — also the way to flag the current page on a link item. On a checkable row (`selectionIndicator` set) it instead drives the leading `checkbox` / `radio` indicator and the row's `aria-checked`. |
-| `selectionIndicator?` | 'checkbox' \| 'radio' \| 'check' | — | Turn the row into a checkable item, driven by `selected` (the row stays the control and carries `aria-checked`): - `'checkbox'` → `role="menuitemcheckbox"`, a leading passive `<a-checkbox>` (before `icon`); the tint is dropped (the box carries state). - `'radio'` → `role="menuitemradio"`, a leading passive `<a-radio>`; tint dropped. - `'check'` → `role="menuitemradio"`, a trailing check glyph on the selected row *and* the background tint (the canonical single-select look). Omit for a plain row (the default). |
+| `selected?` | boolean | — | Mark the item as selected. On a plain row (no `selectionIndicator`) this is a persistent background tint, the same resting fill a pressed row shows — also the way to flag the current page on a link item. On a checkable row (`selectionIndicator` set) it instead drives the indicator and the row's `aria-checked`. |
+| `selectionIndicator?` | 'checkbox' \| 'radio' \| 'check' \| 'switch' | — | Turn the row into a checkable item, driven by `selected` (the row stays the control and carries `aria-checked`): - `'checkbox'` → `role="menuitemcheckbox"`, a leading passive `<a-checkbox>` (before `icon`); the tint is dropped (the box carries state). - `'radio'` → `role="menuitemradio"`, a leading passive `<a-radio>`; tint dropped. - `'check'` → `role="menuitemradio"`, a trailing check glyph on the selected row *and* the background tint (the canonical single-select look). - `'switch'` → `role="menuitemcheckbox"`, a trailing passive `<a-switch>`; selecting the row keeps its menu open. Omit for a plain row (the default). |
 | `submenu?` | boolean | — | Marks this item as a submenu parent: adds the trailing chevron and `aria-haspopup="menu"`. Nest the flyout as a `<Menu>` child. |
-| `tone?` | 'neutral' \| 'brand' \| 'info' \| 'success' \| 'warning' \| 'critical' \| (string & {}) | neutral | Semantic tone — colors the label, icon, and hover/selected tint (and the `checkbox`/`radio` indicator, which adopts it). A named tone, or any literal CSS color (`'#ff1493'`, `'rebeccapurple'`) for a one-off custom tone whose hue + chroma are kept while the lightness is pinned to match the brand text. `critical` is the destructive action; `neutral` (the default) is the standard gray. |
-| `toneScope?` | 'all' \| 'selected' | 'all' | Apply `tone` to every row state, or only while the row is selected. In `selected` scope, an unselected row and its checkbox/radio indicator stay neutral. |
+| `tone?` | 'neutral' \| 'brand' \| 'info' \| 'success' \| 'warning' \| 'critical' \| (string & {}) | neutral | Semantic tone — colors the label, icon, hover/selected tint, and selection indicator. A named tone, or any literal CSS color (`'#ff1493'`, `'rebeccapurple'`) for a one-off custom tone whose hue + chroma are kept while the lightness is pinned to match the brand text. `critical` is the destructive action; `neutral` (the default) is the standard gray. |
+| `toneScope?` | 'all' \| 'selected' | 'all' | Apply `tone` to every row state, or only while the row is selected. In `selected` scope, an unselected row and its indicator stay neutral. |
 | `value?` | string \| number | — | An opaque value identifying this item, handed back in `onSelect`'s detail so a shared handler can tell which row was chosen without a per-item closure. |
 
 ## Keyboard
@@ -489,12 +511,12 @@ or do nothing to reject. (Submenus are always uncontrolled, regardless of `open`
 | `ping?` | string | — | Space-separated URLs the browser pings on navigation. |
 | `rel?` | string | — | Anchor rel. |
 | `role?` | string | — | ARIA role override. Defaults to the role implied by `selectionIndicator` (`menuitem` / `menuitemcheckbox` / `menuitemradio`); set it to reparent the row under a different container role — e.g. `option` inside a `listbox`. |
-| `selected?` | boolean | — | Mark the item as selected. On a plain row (no `selectionIndicator`) this is a persistent background tint, the same resting fill a pressed row shows — also the way to flag the current page on a link item. On a checkable row (`selectionIndicator` set) it instead drives the leading `checkbox` / `radio` indicator and the row's `aria-checked`. |
-| `selectionIndicator?` | 'checkbox' \| 'radio' \| 'check' | — | Turn the row into a checkable item, driven by `selected` (the row stays the control and carries `aria-checked`): - `'checkbox'` → `role="menuitemcheckbox"`, a leading passive `<a-checkbox>` (before `icon`); the tint is dropped (the box carries state). - `'radio'` → `role="menuitemradio"`, a leading passive `<a-radio>`; tint dropped. - `'check'` → `role="menuitemradio"`, a trailing check glyph on the selected row *and* the background tint (the canonical single-select look). Omit for a plain row (the default). |
+| `selected?` | boolean | — | Mark the item as selected. On a plain row (no `selectionIndicator`) this is a persistent background tint, the same resting fill a pressed row shows — also the way to flag the current page on a link item. On a checkable row (`selectionIndicator` set) it instead drives the indicator and the row's `aria-checked`. |
+| `selectionIndicator?` | 'checkbox' \| 'radio' \| 'check' \| 'switch' | — | Turn the row into a checkable item, driven by `selected` (the row stays the control and carries `aria-checked`): - `'checkbox'` → `role="menuitemcheckbox"`, a leading passive `<a-checkbox>` (before `icon`); the tint is dropped (the box carries state). - `'radio'` → `role="menuitemradio"`, a leading passive `<a-radio>`; tint dropped. - `'check'` → `role="menuitemradio"`, a trailing check glyph on the selected row *and* the background tint (the canonical single-select look). - `'switch'` → `role="menuitemcheckbox"`, a trailing passive `<a-switch>`; selecting the row keeps its menu open. Omit for a plain row (the default). |
 | `submenu?` | boolean | — | Marks this item as a submenu parent: adds the trailing chevron and `aria-haspopup="menu"`. Nest the flyout as a `<Menu>` child. |
 | `target?` | string | — | Anchor target, e.g. `'_blank'`. |
-| `tone?` | 'neutral' \| 'brand' \| 'info' \| 'success' \| 'warning' \| 'critical' \| (string & {}) | neutral | Semantic tone — colors the label, icon, and hover/selected tint (and the `checkbox`/`radio` indicator, which adopts it). A named tone, or any literal CSS color (`'#ff1493'`, `'rebeccapurple'`) for a one-off custom tone whose hue + chroma are kept while the lightness is pinned to match the brand text. `critical` is the destructive action; `neutral` (the default) is the standard gray. |
-| `toneScope?` | 'all' \| 'selected' | 'all' | Apply `tone` to every row state, or only while the row is selected. In `selected` scope, an unselected row and its checkbox/radio indicator stay neutral. |
+| `tone?` | 'neutral' \| 'brand' \| 'info' \| 'success' \| 'warning' \| 'critical' \| (string & {}) | neutral | Semantic tone — colors the label, icon, hover/selected tint, and selection indicator. A named tone, or any literal CSS color (`'#ff1493'`, `'rebeccapurple'`) for a one-off custom tone whose hue + chroma are kept while the lightness is pinned to match the brand text. `critical` is the destructive action; `neutral` (the default) is the standard gray. |
+| `toneScope?` | 'all' \| 'selected' | 'all' | Apply `tone` to every row state, or only while the row is selected. In `selected` scope, an unselected row and its indicator stay neutral. |
 | `value?` | string \| number | — | An opaque value identifying this item, handed back in `onSelect`'s detail so a shared handler can tell which row was chosen without a per-item closure. |
 
 ## Web Component

package/docs/components/panel.md

@@ -2,7 +2,7 @@
 
 `Panel` is a container that can maximize to the browser viewport without moving
 or remounting its children. It fills its parent's width and height and uses
-`overflow: scroll` by default.
+`overflow: auto` to show scrollbars only when content overflows.
 
 Give the parent a defined height for Panel to fill vertically. With an
 auto-height parent, percentage height follows normal CSS sizing and the Panel
@@ -138,20 +138,19 @@ Anta buttons can send `panelmaximizerequest`, `panelrestorerequest`, or
 ## Styling
 
 Panel defaults to `display: block`, `width: 100%`, `height: 100%`,
-`box-sizing: border-box`, and `overflow: scroll`. Padding and borders stay inside
+`box-sizing: border-box`, and `overflow: auto`. Padding and borders stay inside
 its assigned size. It does not set `flex-grow`.
 
 Override these through ordinary CSS. Use `height: auto` for content-driven
-height or `overflow: auto` for scrollbars only when content overflows.
-With `overflow: scroll`, scrollbar visibility and reserved space follow the
-browser and operating system's scrollbar settings.
+height or `overflow: scroll` to request scrollbars even when content fits.
+Scrollbar appearance follows the browser and operating system's settings.
 
 Set the background on Panel. Its maximized surface inherits that background,
 so inner content can keep its natural height. Style light-DOM children, such as
 [Box](./box.md) or [Capture](./capture.md), for content layout shared between both states.
 Use `:state(maximized)` for viewport styling and `::part(content)` for the
 maximized scrolling surface. In normal mode, the content slot uses `display: contents`.
-The maximized surface also uses `overflow: scroll`; override
+The maximized surface also uses `overflow: auto`; override
 `::part(content)` to change its overflow separately from the normal Panel.
 
 Enter a note, then select **Maximize panel** and **Restore panel**. The input

package/docs/components/title.md

@@ -38,6 +38,24 @@ the title text.
 Use a span for a small inline accent. Don't nest `<Text>` or `<a-text>` inside a
 title: they are block containers, while heading content should remain inline.
 
+## Truncation
+
+Pass `truncate` for a single-line ellipsis or a positive number to clamp to that
+many lines. When the title is clipped, JSX `Title` shows its full text in a
+tooltip. A nested `<Tooltip>` overrides that automatic tooltip.
+
+```tsx
+<Title truncate style={{ maxWidth: '320px' }}>
+  A long workspace heading that stays on one line in a compact layout
+</Title>
+```
+
+Use a number for multi-line titles.
+
+```tsx
+<Title truncate={2}>A long heading clamped after its second line</Title>
+```
+
 ## Level reference
 
 | level | font-size | line-height |
@@ -100,6 +118,7 @@ scale.
 | `level?` | 1 \| 2 \| 3 \| 4 \| 5 \| 6 | 2 | Heading level, 1-6. Drives font-size, line-height, and vertical rhythm. Also surfaced to assistive tech via `aria-level` (h1 is typically reserved for the page title). |
 | `priority?` | 'primary' \| 'secondary' \| 'tertiary' \| 'quaternary' | primary | Visual priority. Maps to text-1..text-4 (`primary` = text-1). |
 | `tone?` | 'neutral' \| 'brand' \| 'info' \| 'success' \| 'warning' \| 'critical' \| (string & {}) | neutral | Color tint. `neutral` (the default) is the untinted `--text-{N}` scale; a named tone applies the matching `--text-{N}-{tone}` palette. Any literal CSS color (`'#ff1493'`, `'rebeccapurple'`) is a one-off custom tone — its hue is kept while lightness/chroma are pinned per priority in oklch. |
+| `truncate?` | boolean \| number | — | Truncate with a trailing ellipsis. `true` (or `1`) clamps to a single line; any integer ≥ 2 clamps to that many lines; `0` or a negative value means no truncation. A clipped JSX `Title` shows its text content in a tooltip by default. Nest a `<Tooltip>` to provide your own tooltip instead. |
 
 ## Web Component
 

package/docs/credits.md

@@ -6,6 +6,7 @@
 - Ksenia Toloknova — lead designer
 - Leonid Kniazev — contributing designer
 - Vehbi Karaagac — engineer
+- Fernando Oliveros — engineer, leading the [Plot package](./packages/plot.md)
 
 ## Icons
 
@@ -16,3 +17,5 @@ Anta's icon set is built on the shoulders of several excellent open-source icon
 - Blueprint by Palantir — additional product-UI glyphs covering domains the previous two don't (Apache License 2.0).
 
 Full license texts and per-icon attribution are reproduced verbatim in the package's NOTICES.md.
+
+The Antithesis theme uses Hugeicons. These icons are licensed only for use by Antithesis.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antadesign/anta",
-  "version": "0.3.30",
+  "version": "0.3.31",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -61,7 +61,7 @@
     "build:docs": "pnpm --filter anta-site run docs:api && pnpm --filter anta-site run docs:pages && node scripts/generate-package-docs.mjs",
     "audit:contrast": "node scripts/audit-contrast.mjs",
     "dev": "node scripts/dev.mjs",
-    "dev:run": "echo $$ > \"$ANTA_DEV_PID_FILE\"; trap 'rm -f \"$ANTA_DEV_PID_FILE\"' EXIT; pnpm run build:dev && pnpm --filter @antadesign/stickers run build:dev && pnpm --filter @antadesign/plot run build:dev && pnpm --filter anta-site run docs && (node scripts/dev-watch.mjs & pnpm --filter anta-site run dev:server & pnpm --filter anta-site run dev:search & wait)",
+    "dev:run": "echo $$ > \"$ANTA_DEV_PID_FILE\"; trap 'rm -f \"$ANTA_DEV_PID_FILE\"' EXIT; pnpm run build:dev && pnpm --filter @antadesign/stickers run build:dev && pnpm --filter @antadesign/plot run build:dev && (node scripts/dev-watch.mjs & pnpm --filter anta-site run dev:server & pnpm --filter anta-site run dev:search & wait)",
     "stop": "node scripts/dev-stop.mjs",
     "typecheck": "tsc --noEmit -p src/tsconfig.json",
     "test": "node --test tests/*.test.mjs",