@antadesign/anta 0.3.19 → 0.3.21

package/dist/components/Select.d.ts

@@ -1,4 +1,4 @@
-import type { BaseProps } from '../general_types';
+import type { BaseProps, OptionPresentationProps } from '../general_types';
 import type { IconShape } from '../elements/a-icon.shapes';
 import { type MenuProps } from './Menu';
 import './select-parts.css';
@@ -14,7 +14,7 @@ export type OptionValue = string | number | boolean;
  *
  *  Generic in the value type `V` (defaults to `string`): `Select` infers `V` from your
  *  `options`, so `{ value: 365 }` round-trips as `number` through `onValueChange`. */
-export interface SelectOption<V extends OptionValue = string> {
+export interface SelectOption<V extends OptionValue = string> extends OptionPresentationProps {
     /** The option's value (`V`) — its identity, what `value` / `defaultValue` name, and
      *  what `onValueChange` reports. Unique across the whole `options` tree (selection is
      *  value-keyed and global across groups / submenus). */
@@ -35,7 +35,7 @@ export interface SelectOption<V extends OptionValue = string> {
      *  hint for the Alt/Option-click "select only this" accelerator; set `tooltip`
      *  to override that, or `''` to suppress it. */
     tooltip?: React.ReactNode;
-    /** Your own data — attach anything and read it in `renderOption`. */
+    /** Additional application data. Read it in `renderOption`. */
     [key: string]: unknown;
 }
 /** A titled group of options rendered **inline** under a heading (like `MenuGroup`).
@@ -164,10 +164,9 @@ export interface SelectCommonProps<V extends OptionValue = string> extends Omit<
      *  `leading` slot). With a custom `renderTrigger`, it's passed through as
      *  `state.icon` instead — the consumer places it. */
     icon?: IconShape;
-    /** Arbitrary content for the default trigger's leading slot (piped straight to
-     *  `Input`'s `leading`) — e.g. a key prefix before the value. Overrides the
-     *  `icon`-derived glyph when both are set; include your own `<Icon>` if you want
-     *  one alongside. Ignored with a custom `renderTrigger`. */
+    /** Content for the default trigger's `leading` slot, such as a key prefix
+     *  before the value. It replaces the icon derived from `icon`. Include an
+     *  `<Icon>` in this content when both are needed. Ignored by `renderTrigger`. */
     leading?: React.ReactNode;
     /** Field label, above the trigger (Input's `label`). */
     label?: string;
@@ -197,11 +196,10 @@ export interface SelectCommonProps<V extends OptionValue = string> extends Omit<
      *  option's **value / label / hint**. Pass a **function** `(option, query) =>
      *  boolean` for custom matching (called per option; return `true` to keep it). */
     filter?: boolean | ((option: SelectOption<V>, query: string) => boolean);
-    /** `multiple` only: a "Select all" row at the top that toggles every enabled
-     *  option (the currently-visible ones when a `filter` query is active); its box
-     *  shows the mixed state when only some are selected. On by default in
-     *  `multiple` mode — set `false` to drop the row (and with it the Alt/⌥-click
-     *  isolate accelerator it gates).
+    /** `multiple` only: shows a "Select all" row that toggles every enabled option,
+     *  or only the visible options when a filter query is active. Its checkbox is
+     *  mixed when some options are selected. It is on by default. Set it to `false`
+     *  to remove the row and the Alt/Option-click shortcut that selects only one row.
      *  @defaultValue true */
     selectAll?: boolean;
     /** Label for the `selectAll` row.
@@ -214,13 +212,12 @@ export interface SelectCommonProps<V extends OptionValue = string> extends Omit<
     /** Label for the `clearable` footer row.
      *  @defaultValue Clear */
     clearLabel?: string;
-    /** Render the **content** of each option row yourself, replacing the built-in
-     *  `label`/`hint`/`icon` layout. Select still supplies the row box, click, ARIA,
-     *  and the selection indicator — you return only what goes *inside*. Read extra
-     *  fields off the option (see `SelectOption`'s index signature) plus an
-     *  `OptionState` (`value`/`selected`/`disabled`). Filtering still works (it
-     *  matches the option's `value`/`label`/`hint`), but match-highlighting is
-     *  skipped — your content owns its own display. */
+    /** Replaces the built-in `label`, `hint`, and `icon` layout for each option row.
+     *  Select still supplies the row container, click handling, ARIA attributes, and
+     *  selection indicator. Read extra option fields through `SelectOption`'s index
+     *  signature. `state` contains `value`, `selected`, and `disabled`. Filtering
+     *  still matches the option's `value`, `label`, and `hint`, but Select cannot
+     *  highlight matches within the returned content. */
     renderOption?: (option: SelectOption<V>, state: OptionState<V>) => React.ReactNode;
     /** Replace each row's selection **mark** with your own node, drawn at the
      *  leading edge. The row stays the control (`role` + `aria-checked` from
@@ -246,16 +243,15 @@ export interface SelectCommonProps<V extends OptionValue = string> extends Omit<
      *  the single-label case built-in). For rich content (chips, multiple nodes)
      *  use `renderTrigger`, which replaces the whole field. */
     renderSummary?: (selected: SelectOption<V>[]) => string | undefined;
-    /** Render your own trigger in place of the default field. Receives a
-     *  `TriggerState` (`open` / `value` / `selected` / `disabled` / `icon`) to drive
-     *  its look. **Return exactly one focusable element** (an Anta `Button`, say) —
-     *  the menu anchors to it (its own previous DOM sibling) and opens it on click,
-     *  so a fragment, multiple siblings, or a non-focusable wrapper will misanchor
-     *  (the menu warns in the console if the trigger has no focusable element). Give
-     *  the element `aria-haspopup="menu"` plus `aria-expanded={state.open}`. The custom
-     *  trigger owns its own styling: the field props (`label`, `hint`, `size`, `status`,
-     *  `placeholder`, `round`) and `className` / `style` apply to the *default* trigger
-     *  only — put your own on the element you return. */
+    /** Replaces the default field with a trigger returned from this function.
+     *  Receives `open`, `value`, `selected`, `disabled`, and `icon`. Return exactly
+     *  one focusable element, such as an Anta `Button`. The menu is positioned
+     *  relative to that element and opens when it is clicked. Do not return a
+     *  fragment, multiple siblings, or a non-focusable wrapper. Add
+     *  `aria-haspopup="menu"` and `aria-expanded={state.open}` to the element.
+     *  Field props (`label`, `hint`, `size`, `status`, `placeholder`, and `round`) and
+     *  `className` / `style` apply only to the default field. Add styling and
+     *  attributes to the returned element instead. */
     renderTrigger?: (state: TriggerState<V>) => React.ReactNode;
     /** Render content in the menu body when the (filtered) option list is empty —
      *  a "no results" message, a loading indicator (gated on your own external
@@ -276,13 +272,10 @@ export type SelectProps<V extends OptionValue = string> = SelectCommonProps<V> &
      *  array value.
      *  @defaultValue single */
     selection?: 'single';
-    /** Controlled value — the `value` of the selected option. When provided, the
-     *  consumer owns selection: the field follows this prop and a pick only
-     *  *requests* a change via `onValueChange` (reject by not updating). Leave
-     *  undefined for uncontrolled. */
+    /** Controlled value: the selected option's `value`. Update it through
+     *  `onValueChange`. Leave it undefined for uncontrolled use. */
     value?: V;
-    /** Initial value (an option's `value`) for the uncontrolled case — the
-     *  wrapper then owns it. */
+    /** Initial selected option value for uncontrolled use. */
     defaultValue?: V;
     /** Fires after the selection changes, with the new value and a
      *  `{ value, option }` snapshot. Select has no discrete element state, so
@@ -352,17 +345,17 @@ export type SelectedItem<V extends OptionValue = string> = SelectedOption<V> | S
  */
 export declare function optionsWithSelection<V extends OptionValue = string>(options: SelectItem<V>[], values: V | V[] | undefined): SelectedItem<V>[];
 /**
- * `<Select>` — a single- or multi-select dropdown, composed from `<Input>` (a
- * read-only trigger) and `<Menu>` (the options). `selection` sets behaviour:
+ * `<Select>` lets people choose one or more options from a dropdown. It uses an
+ * `<Input>` as its read-only trigger and a `<Menu>` for its options. `selection` sets behavior:
  * `'single'` (default; `value` is a string, menu closes on pick) or `'multiple'`
  * (checkboxes, `value` is a string array, menu stays open while toggling, the
  * field shows an "N selected" count). For single-select, `indicator` picks the
  * per-row mark: `'none'` (tint only, default), `'check'` (trailing checkmark), or
  * `'radio'` (leading radio).
  *
- * Controlled (`value` + `onValueChange`) or uncontrolled (`defaultValue`). There
- * is no `a-select` element — this wrapper is the coordinator; for a non-React
- * equivalent, hand-compose the same pieces (see the docs).
+ * Use `value` with `onValueChange` to control the selection, or use
+ * `defaultValue` for uncontrolled use. There is no `a-select` element. See the
+ * docs for the equivalent markup without React or Preact.
  *
  * Requires `@antadesign/anta/elements` (client-side only).
  *

package/dist/components/Select.js

@@ -1,6 +1,6 @@
 import { Fragment, jsx, jsxs } from "@antadesign/anta/jsx-runtime";
 import { useState, useId } from "../jsx-runtime";
-import { ISOLATE_HINT } from "../anta_helpers";
+import { ISOLATE_HINT, optionPresentationAttrs } from "../anta_helpers";
 import { normalizeOpt, matchQueryRegex, matchesQuery, highlight } from "./select-options";
 import { Input } from "./Input";
 import { Icon } from "./Icon";
@@ -164,6 +164,7 @@ const Select = (props) => {
     emit?.(next, { all: true, selected: false });
   };
   const renderOptionRow = (o, disabled2) => {
+    const { className: optionClassName, style: optionStyle, ...optionAttrs } = optionPresentationAttrs(o, true);
     const optState = { value: o.value, selected: isSelected(o.value), disabled: disabled2 };
     const custom = renderOption?.(o, optState);
     const customMark = renderIndicator?.(optState);
@@ -174,6 +175,7 @@ const Select = (props) => {
     return /* @__PURE__ */ jsxs(
       MenuItem,
       {
+        ...optionAttrs,
         id: `${uid}-opt-${o.value}`,
         selectionIndicator: menuItemIndicator,
         ...ariaSelectable,
@@ -187,6 +189,8 @@ const Select = (props) => {
         disabled: disabled2 || void 0,
         "data-menu-open": multiple ? "" : void 0,
         onSelect: (e) => choose(o, e),
+        className: optionClassName,
+        style: optionStyle,
         children: [
           custom,
           tip && /* @__PURE__ */ jsx(Tooltip, { follow: true, ...hintOnly ? { delay: 700 } : {}, children: tip })
@@ -269,7 +273,7 @@ const Select = (props) => {
         "aria-haspopup": "menu",
         "aria-expanded": open ? "true" : "false",
         trailing: (
-          // The named tag owns the select-specific rotation while the icon remains
+          // The named tag applies the Select-specific rotation while the icon remains
           // a normal currentColor glyph.
           /* @__PURE__ */ jsx("a-select-chevron", { open: open ? "" : void 0, style: statusColor ? { color: statusColor } : void 0, children: /* @__PURE__ */ jsx(Icon, { shape: "chevron-down" }) })
         ),

package/dist/components/SelectFaceted.d.ts

@@ -4,9 +4,8 @@ import type { OptionValue, SelectItem, SelectOption } from './Select';
 import { type MenuProps } from './Menu';
 import './select-parts.css';
 interface FacetBase {
-    /** The facet's namespace — the key its value is stored under in the value
-     *  record, and what `onValueChange`'s `attrs.facet` reports. Unique across
-     *  `facets`. */
+    /** The key for this facet's value in the record. `onValueChange` reports it as
+     *  `attrs.facet`. It must be unique across `facets`. */
     key: string;
     /** The facet's row label in the menu. */
     label: string;
@@ -63,9 +62,8 @@ export interface SelectFacetCustomContext<V> {
     /** Close the whole filter menu (e.g. after applying from a custom editor). */
     close: () => void;
 }
-/** Bring your own editor and value type — the escape hatch for anything the
- *  built-in kinds don't cover, including object-shaped values (a date range, a
- *  numeric comparator, …). */
+/** A custom editor and value type for values the built-in kinds do not cover,
+ *  including objects such as date ranges and numeric comparisons. */
 export interface SelectFacetCustom<V = unknown> extends FacetBase {
     kind: 'custom';
     /** Render the facet's editor inside its flyout. The returned node stays
@@ -75,11 +73,11 @@ export interface SelectFacetCustom<V = unknown> extends FacetBase {
      *  string or any node). Called only when the value is set. */
     summary: (value: V) => React.ReactNode;
 }
-/** One facet (dimension) of the filter, discriminated by `kind`. */
+/** One filter category, discriminated by `kind`. */
 export type SelectFacet = SelectFacetSingle | SelectFacetMultiple | SelectFacetText | SelectFacetCustom;
 /** The filter value: a facet key → that facet's value. Per kind: an option value
  *  (`string` / `number` / `boolean`) for `single`, a `string` for `text`, an array for
- *  `multiple`, or your own `V` for `custom`. Values are stored and reported unchanged.
+ *  `multiple`, or a `V` value for `custom`. Values are stored and reported unchanged.
  *  Typed loosely as `unknown` since facets in one control can hold different value
  *  types; narrow per facet when you read it. A cleared facet is absent from the record. */
 export type SelectFacetedValue = Record<string, unknown>;
@@ -111,7 +109,7 @@ export interface SelectFacetedTriggerState {
     disabled: boolean;
 }
 export interface SelectFacetedProps extends Omit<BaseProps, 'children'> {
-    /** The facets (dimensions) to filter across, each with its own editor kind. */
+    /** Categories to filter by. Each facet has a `kind` that determines its editor. */
     facets: SelectFacet[];
     /** Preferred placement of the root filter menu relative to its trigger. The
      *  menu auto-flips vertically and clamps horizontally when needed.
@@ -120,11 +118,10 @@ export interface SelectFacetedProps extends Omit<BaseProps, 'children'> {
     /** Gap in pixels between the trigger and the filter menu.
      *  @defaultValue 4 */
     offset?: number;
-    /** Controlled value — the facet-keyed record. When provided, the consumer
-     *  owns state: a pick only *requests* a change via `onValueChange` (reject by
-     *  not updating). Leave undefined for uncontrolled. */
+    /** Controlled value record, keyed by facet. When provided, update it through
+     *  `onValueChange`. Leave it undefined for uncontrolled use. */
     value?: SelectFacetedValue;
-    /** Initial value for the uncontrolled case (the wrapper then owns it). */
+    /** Initial value for uncontrolled use. */
     defaultValue?: SelectFacetedValue;
     /** Fires after any facet changes. `value` is the whole new record (a facet key →
      *  that facet's value; a cleared facet is absent). `attrs` says what changed:
@@ -147,14 +144,13 @@ export interface SelectFacetedProps extends Omit<BaseProps, 'children'> {
     disabled?: boolean;
     /** Tone applied to a selected option row in the facet flyouts (label, selected
      *  tint, and the check / checkbox indicator). A named tone or a custom CSS
-     *  colour, matching `Select`'s `toneSelected`. Defaults to a neutral selection. */
+     *  color, matching `Select`'s `toneSelected`. Defaults to a neutral selection. */
     toneSelected?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
-    /** Add a single search field to the top of the root menu that flattens every
-     *  `single` / `multiple` facet's options into one list and searches across them
-     *  — typing "alice" surfaces it under both an Assignee and an Owner facet, each
-     *  selectable in place. `text` / `custom` facets are reachable when the search is
-     *  empty. Matching uses each facet's `filter` function if it has one, else the
-     *  built-in substring match. */
+    /** Adds a search field at the top of the root menu. It searches the options of
+     *  every `single` and `multiple` facet in one list. For example, "alice" can
+     *  appear under application-defined Assignee and Owner facets. `text` and
+     *  `custom` facets remain available when the search is empty. Each facet uses
+     *  its `filter` function when supplied, or the built-in substring match. */
     searchable?: boolean;
     /** Placeholder for the global search field.
      *  @defaultValue Filter… */
@@ -165,22 +161,20 @@ export interface SelectFacetedProps extends Omit<BaseProps, 'children'> {
     /** Label for the "Clear all" row.
      *  @defaultValue Clear all */
     clearAllLabel?: string;
-    /** Render your own trigger in place of the default `Button`. Receives a
-     *  `SelectFacetedTriggerState`; **return exactly one focusable element** (the
-     *  menu anchors to it as its previous sibling and opens it on click). Give it
-     *  `aria-haspopup="menu"` plus `aria-expanded={state.open}`. The custom trigger
-     *  owns its own styling — `className` / `style` / other props apply to the
-     *  *default* trigger only, so put your own on the element you return. */
+    /** Replaces the default `Button` with a trigger returned from this function.
+     *  Receives a `SelectFacetedTriggerState`. Return exactly one focusable element:
+     *  the menu is positioned relative to that element and opens when it is clicked.
+     *  Add `aria-haspopup="menu"` and `aria-expanded={state.open}` to the returned
+     *  element. `className`, `style`, and other trigger props apply only to the
+     *  default Button, so add styling and attributes to the returned element. */
     renderTrigger?: (state: SelectFacetedTriggerState) => React.ReactNode;
 }
 /**
- * `<SelectFaceted>` — a faceted filter: one trigger opens a menu of facets
- * (dimensions), each a submenu flyout with its own editor. Facet kinds:
- * `'single'` (pick one), `'multiple'` (pick many), `'text'` (free-form
- * substring, applied on Enter / blur), and `'custom'` (bring your own editor +
- * value, including object-shaped values). The value is a
- * `Record<facetKey, value>`, so the same option value under two facets stays
- * distinct.
+ * `<SelectFaceted>` filters a result set by categories called facets. Its
+ * trigger opens a facet menu, and each facet opens a control for its value.
+ * The available kinds are `'single'`, `'multiple'`, `'text'`, and `'custom'`.
+ * The value is a `Record<facetKey, value>`, so values under different facet
+ * keys stay distinct.
  *
  * Controlled (`value` + `onValueChange`) or uncontrolled (`defaultValue`).
  * There is no `a-select-faceted` element — this wrapper is the coordinator.

package/dist/components/SelectFaceted.js

@@ -1,6 +1,6 @@
 import { Fragment, jsx, jsxs } from "@antadesign/anta/jsx-runtime";
 import { useState, useMemo } from "../jsx-runtime";
-import { nativeStateChange, ISOLATE_HINT } from "../anta_helpers";
+import { nativeStateChange, ISOLATE_HINT, optionPresentationAttrs } from "../anta_helpers";
 import { normalizeOpt, matchQueryRegex, matchesQuery } from "./select-options";
 import { Button } from "./Button";
 import { Menu } from "./Menu";
@@ -118,13 +118,17 @@ const SelectFaceted = (props) => {
     }
   ) }) : null;
   const optionRow = (facet, opt, keyPrefix = "") => {
+    const { className: optionClassName, style: optionStyle, ...optionAttrs } = optionPresentationAttrs(opt, true);
     const shared = {
+      ...optionAttrs,
       icon: opt.icon,
       label: opt.label ?? String(opt.value),
       hint: opt.hint,
       tone: opt.tone,
       toneSelected,
       disabled: opt.disabled,
+      className: optionClassName,
+      style: optionStyle,
       "data-menu-open": ""
     };
     if (facet.kind === "single") {

package/dist/components/Slider.d.ts

@@ -35,11 +35,11 @@ export interface SliderProps extends BaseProps, DOMEventHandlers {
     name?: string;
     /** Disables pointer and keyboard interaction. */
     disabled?: boolean;
-    /** Colour of the filled rail. Pass a named tone or a literal CSS colour for a
+    /** 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.
      * @defaultValue 'neutral' */
     tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
-    /** Colour of the thumb stroke. Pass a named tone or a literal CSS colour for a
+    /** Color of the thumb stroke. Pass a named tone or a literal CSS color for a
      * one-off custom tone. Omit it to keep the thumb neutral.
      * @defaultValue 'neutral' */
     thumbTone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
@@ -54,7 +54,7 @@ export interface SliderProps extends BaseProps, DOMEventHandlers {
      * it at least as large as `trackSize`.
      * @defaultValue 18 */
     thumbSize?: number | string;
-    /** Fill the thumb with its resolved border colour. This follows `thumbTone`
+    /** Fill the thumb with its resolved border color. This follows `thumbTone`
      * and interactive states.
      * @defaultValue false */
     thumbFill?: boolean;
@@ -72,8 +72,8 @@ export interface SliderProps extends BaseProps, DOMEventHandlers {
     /** Compact text labels positioned below the rail. They do not add dots or
      * ticks to the rail. */
     markers?: SliderMarker[];
-    /** Track press behaviour. `drag-only` starts a relative grab from the current
-     * value; `jump` first moves to the press position.
+    /** Controls what happens when the rail is pressed. `drag-only` starts dragging
+     * from the current value. `jump` first moves to the pressed position.
      * @defaultValue 'drag-only' */
     trackClick?: 'drag-only' | 'jump';
     /** Fires on every keyboard or pointer value change. */

package/dist/components/Switch.d.ts

@@ -32,13 +32,13 @@ export interface SwitchProps extends BaseProps {
     /** Value submitted while checked.
      * @defaultValue "on" */
     value?: string;
-    /** Colour of the track and thumb. A tinted tone also colours the unchecked
-     * track border and thumb; use `toneSelected` to colour only the checked track.
+    /** Color of the track and thumb. A tinted tone also colors the unchecked
+     * track border and thumb; use `toneSelected` to color only the checked track.
      * @defaultValue 'brand' */
     tone?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
     /** Like `tone`, but applies only while the switch is checked. The unchecked
-     * track and thumb stay neutral. If both are set, `tone` colours the unchecked
-     * state and `toneSelected` colours the checked track.
+     * track and thumb stay neutral. If both are set, `tone` colors the unchecked
+     * state and `toneSelected` colors the checked track.
      * @defaultValue 'brand' */
     toneSelected?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
     /** Size variant. small=26×16px, medium=30×18px, large=34×20px.

package/dist/components/TabPanel.d.ts

@@ -3,8 +3,7 @@
  * finds its `<a-tabs>` (its flat sibling under the same parent — `Tabs` renders the
  * strip and panels with no wrapper), matches by `value`, and shows/hides itself
  * off-DOM. This wrapper is a pure projection: it sets the static ARIA (`role`,
- * `tabindex`, `value`) and passes `children` straight through; `Tabs` never reads
- * or toggles it.
+ * `value`) and passes `children` straight through; `Tabs` never reads or toggles it.
  *
  * Use it as a direct child of `<Tabs>`, paired to an `options` entry by `value`.
  * For a strip and panels in different layout regions (no shared parent), or to

package/dist/components/TabPanel.js

@@ -4,7 +4,6 @@ const TabPanel = ({ value, children, hideMode, className, style }) => /* @__PURE
   {
     value,
     role: "tabpanel",
-    tabIndex: 0,
     "hide-mode": hideMode === "visibility" ? "visibility" : void 0,
     class: className,
     style,

package/dist/components/Tabs.d.ts

@@ -1,4 +1,4 @@
-import type { BaseProps } from "../general_types";
+import type { BaseProps, OptionPresentationProps } from "../general_types";
 import type { IconShape } from "../elements/a-icon.shapes";
 /** The element's `statechange` payload — `next`/`prev` are tab values (`null` = none). */
 type StateDetail = {
@@ -14,7 +14,7 @@ export interface TabsChangeAttrs {
  *  renders its strip from (like `RadioGroup`'s `options`). `Tabs` reads these fields to
  *  render the underlying `<a-tab>` (`tabindex`, `role`, and selection are all `Tabs`'
  *  job, published off-DOM by the element). */
-export interface TabOption {
+export interface TabOption extends OptionPresentationProps {
     /** This tab's identity — pairs it with the `<TabPanel value="…">` of the same
      *  value, and the value reported by `onStateChange` / `onChange`. Unique per strip. */
     value: string;
@@ -30,12 +30,12 @@ export interface TabOption {
     /** Fully-round just this tab's box. `<Tabs round>` rounds the whole strip
      *  (tabs + sliding indicator) instead. */
     round?: boolean;
-    /** Per-tab tone override, same vocabulary as `<Tabs tone>` — colours this one tab's
-     *  label + icons (all priorities/modes, named or custom colour) and, when it's the
-     *  active tab, its indicator. For a **custom literal colour** the sliding indicator can't
-     *  adopt it (the shared moving element can't read a descendant's colour), so a custom tone
-     *  colours the label everywhere and the indicator only in `noslide`; the six **named**
-     *  tones colour both in every mode. Overrides the strip's `tone` for this tab.
+    /** Per-tab tone override, same vocabulary as `<Tabs tone>` — colors this one tab's
+     *  label + icons (all priorities/modes, named or custom color) and, when it's the
+     *  active tab, its indicator. For a **custom literal color** the sliding indicator can't
+     *  adopt it (the shared moving element can't read a descendant's color), so a custom tone
+     *  colors the label everywhere and the indicator only in `noslide`; the six **named**
+     *  tones color both in every mode. Overrides the strip's `tone` for this tab.
      *  @defaultValue inherits the strip's `tone` */
     tone?: "neutral" | "brand" | "info" | "success" | "warning" | "critical" | (string & {});
     /** Disable just this tab — skipped by keyboard nav and dropped from the tab order
@@ -87,7 +87,7 @@ export interface TabsProps extends Omit<BaseProps, "onChange"> {
     /** Visual priority. `primary` is the raised pill on a recessed track (the
      *  segmented-control look); `secondary` keeps that sizing but drops the track, marking
      *  the selected tab with a subtle active background fill; `tertiary` is a bottom-underline
-     *  indicator under the selected tab (no track, no rest line). `tone` colours `secondary` +
+     *  indicator under the selected tab (no track, no rest line). `tone` colors `secondary` +
      *  `tertiary`; `primary` stays neutral.
      *  @defaultValue 'primary' */
     priority?: "primary" | "secondary" | "tertiary";

package/dist/components/Tabs.js

@@ -1,6 +1,6 @@
 import { Fragment, jsx, jsxs } from "@antadesign/anta/jsx-runtime";
 import { useState } from "../jsx-runtime";
-import { nativeStateChange, toneStyle, roundStyle, roundAttr, wrapLabel } from "../anta_helpers";
+import { nativeStateChange, optionPresentationAttrs, toneStyle, roundStyle, roundAttr, wrapLabel } from "../anta_helpers";
 import { Tooltip } from "./Tooltip";
 const Tabs = ({
   children,
@@ -75,17 +75,20 @@ const Tabs = ({
       children: tabs.map((p) => {
         const tabDisabled = disabled || p.disabled;
         const isSelected = p.value === currentValue;
+        const { className: optionClassName, style: optionStyle, ...optionAttrs } = optionPresentationAttrs(p);
         return /* @__PURE__ */ jsxs(
           "a-tab",
           {
+            ...optionAttrs,
             role: "tab",
             value: p.value,
             tone: p.tone && p.tone !== "neutral" ? p.tone : void 0,
-            style: toneStyle(p.tone, "--tabs-tone-source", void 0),
             "aria-disabled": tabDisabled ? "true" : void 0,
             tabIndex: tabDisabled && !isSelected ? -1 : 0,
             disabled: tabDisabled ? "" : void 0,
             round: roundAttr(round) ?? roundAttr(p.round),
+            class: optionClassName,
+            style: toneStyle(p.tone, "--tabs-tone-source", optionStyle),
             children: [
               p.icon && /* @__PURE__ */ jsx("a-icon", { shape: p.icon, "aria-hidden": "true" }),
               wrapLabel(p.label != null ? p.label : p.children, "a-tab-label"),

package/dist/components/Text.d.ts

@@ -36,9 +36,11 @@ export type TextProps = BaseProps & {
     inline?: boolean;
     /** 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. Uses the `-webkit-line-clamp`
-     *  technique, supported in all major browsers (Firefox 68+, Chrome,
-     *  Safari, Edge). */
+     *  negative value means no truncation. A clipped, non-expandable JSX
+     *  `Text` shows its text content in a tooltip by default. Nest a
+     *  `<Tooltip>` to provide your own tooltip instead. Uses the
+     *  `-webkit-line-clamp` technique, supported in all major browsers
+     *  (Firefox 68+, Chrome, Safari, Edge). */
     truncate?: boolean | number;
 } & ExpandMode;
 /**

package/dist/components/Text.js

@@ -1,5 +1,6 @@
-import { jsx } from "@antadesign/anta/jsx-runtime";
+import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
 import { toneStyle } from "../anta_helpers";
+import { Tooltip } from "./Tooltip";
 const Text = ({ priority, tone, size, inline, truncate, expandable, collapsible, className, style, children, ...rest }) => {
   const n = typeof truncate === "number" ? truncate : truncate ? 1 : null;
   const lineCount = n != null && n >= 1 ? n : null;
@@ -10,7 +11,7 @@ const Text = ({ priority, tone, size, inline, truncate, expandable, collapsible,
     lineCount != null ? { ...style, ["--line-clamp"]: lineCount } : style
   );
   const canExpand = expandable && lineCount != null;
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     "a-text",
     {
       priority,
@@ -23,7 +24,10 @@ const Text = ({ priority, tone, size, inline, truncate, expandable, collapsible,
       class: className,
       style: computedStyle,
       ...rest,
-      children
+      children: [
+        children,
+        lineCount != null && !canExpand && /* @__PURE__ */ jsx(Tooltip, { truncatedOnly: true, "data-anta-text-tooltip": "" })
+      ]
     }
   );
 };

package/dist/components/Title.d.ts

@@ -21,7 +21,7 @@ export interface TitleProps extends BaseProps {
  * Renders an `<a-title>` styled tag (no JS, no shadow DOM) with
  * `role="heading"` and `aria-level={level}` set by this wrapper for
  * accessibility. Children can be anything — text, icons, badges, links
- * — so there are no `icon` / `iconTrailing` props; just compose
+ * — so there are no `icon` / `iconTrailing` props; compose
  * inside.
  *
  * `<Title>` carries no vertical margins: it's a spacing-neutral atom

package/dist/components/Toaster.d.ts

@@ -13,7 +13,7 @@ export interface ToasterProps extends BaseProps {
  * your app (a portal is fine); toasts are added imperatively through the store
  * (`Toaster.manager`, or a `createToaster()` you pass as `toaster`). It
  * subscribes to the store and renders each toast through the reconciler, so
- * React/Preact owns the toast nodes.
+ * React or Preact renders the toast nodes.
  *
  * Announcement is opt-in **per toast** (`add(render, { politeness })`), not a
  * blanket live region on the whole toaster.

package/dist/components/Tooltip.d.ts

@@ -16,7 +16,7 @@ export interface TooltipProps extends BaseProps {
     round?: boolean | number | string;
     /** Follow the cursor instead of pinning under the anchor. The bubble is
      *  pinned (anchored beneath the target) by default; pass `follow` for the
-     *  cursor-tracking behaviour, which fades by distance as the cursor leaves. */
+     *  cursor-tracking behavior, which fades by distance as the cursor leaves. */
     follow?: boolean;
     /** Make the bubble hoverable and clickable — enables pointer events and
      *  keeps it open while the cursor is over it, so its content (links,

package/dist/elements/a-card.css

@@ -1 +1 @@
-@layer anta{a-card{--card-text: var(--text-2);--card-bg-secondary: var(--bg-2);--card-bg-primary: var(--bg-1);--card-bg: var(--card-bg-primary);--card-border: var(--border-4);--card-border-hover: var(--border-3);--card-selected-ring: var(--border-1);--card-bg-hover-lift: .01;--card-radius: 8px;--card-padding: 12px;--card-content-fs: 15px;--card-content-lh: 20px;--card-icon-size: 40px;--card-icon-bg: var(--bg-4);--card-header-nudge: 2px;display:block;box-sizing:border-box;position:relative;width:100%;container-type:inline-size;container-name:card;color:var(--card-text);background:var(--card-bg);box-shadow:0 0 0 1px var(--card-border);border-radius:var(--card-radius);overflow:clip;transition:background-color .15s ease,box-shadow .15s ease,opacity .18s ease}a-card[priority=secondary]{--card-bg: var(--card-bg-secondary);--card-icon-blend: multiply}.dark a-card:not([priority=tertiary]){--card-icon-blend: exclusion}a-card[round]{--card-round: attr(round type(<length>));--card-radius: var(--card-round, 999px)}a-card[priority=tertiary]{--card-bg: color-mix(in oklch, var(--card-bg-primary) 1%, transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.dark a-card:not([tone]),.dark a-card[tone=neutral]{--card-bg-primary: var(--bg-4);--card-icon-bg: var(--bg-5)}@media(hover:hover)and (pointer:fine){a-card[href]:not([loading]):hover{background:oklch(from var(--card-bg) calc(l + var(--card-bg-hover-lift)) c h)}a-card:not([loading]):hover{box-shadow:0 0 0 1px var(--card-border-hover)}}a-card[href]:not([loading]):active{box-shadow:0 0 0 1px var(--card-border)}@media(prefers-reduced-motion:reduce){a-card{transition:none}}a-card:not(:defined){padding:var(--card-padding);opacity:0}a-card:not(:has(>[slot=media]))::part(media),a-card:not(:has(>[slot=header])):not(:has(>[slot=icon]))::part(header),a-card:not(:has(>[slot=icon]))::part(icon),a-card:not(:has(>[slot=footer]))::part(footer),a-card:not(:has(>:not([slot])))::part(body){display:none}a-card>a-card-icon-chip[slot=icon]{display:grid;place-items:center;width:var(--card-icon-size);height:var(--card-icon-size);border-radius:50%;background:var(--card-icon-bg)}a-card:is(:has(>[slot=header]),:has(>[slot=icon]))::part(body){padding-block-start:0}a-card:has(>[slot=footer])::part(body){padding-block-end:0}a-card :is(h1,h2,h3,h4,h5,h6),a-card a-title[level]{margin-block-start:0}a-card>:is(h1,h2,h3,h4,h5,h6)[slot=header],a-card>a-title[slot=header]{margin-block-end:0}a-card>a-title[slot=header]+a-text[slot=header],a-card>:is(h1,h2,h3,h4,h5,h6)[slot=header]+a-text[slot=header]{margin-block-start:1px}a-card[size=large]>a-title[slot=header]+a-text[slot=header],a-card[size=large]>:is(h1,h2,h3,h4,h5,h6)[slot=header]+a-text[slot=header]{margin-block-start:2px}a-card[tone=brand]{--card-text: var(--text-2-brand);--card-bg-secondary: var(--bg-4-brand);--card-bg-primary: var(--bg-2-brand);--card-border: var(--border-4-brand);--card-border-hover: var(--border-3-brand);--card-icon-bg: var(--bg-5-brand);--card-selected-ring: var(--border-1-brand)}a-card[tone=info]{--card-text: var(--text-2-info);--card-bg-secondary: var(--bg-4-info);--card-bg-primary: var(--bg-2-info);--card-border: var(--border-4-info);--card-border-hover: var(--border-3-info);--card-icon-bg: var(--bg-5-info);--card-selected-ring: var(--border-1-info)}a-card[tone=success]{--card-text: var(--text-2-success);--card-bg-secondary: var(--bg-4-success);--card-bg-primary: var(--bg-2-success);--card-border: var(--border-4-success);--card-border-hover: var(--border-3-success);--card-icon-bg: var(--bg-5-success);--card-selected-ring: var(--border-1-success)}a-card[tone=warning]{--card-text: var(--text-2-warning);--card-bg-secondary: var(--bg-4-warning);--card-bg-primary: var(--bg-2-warning);--card-border: var(--border-4-warning);--card-border-hover: var(--border-3-warning);--card-icon-bg: var(--bg-5-warning);--card-selected-ring: var(--border-1-warning)}a-card[tone=critical]{--card-text: var(--text-2-critical);--card-bg-secondary: var(--bg-4-critical);--card-bg-primary: var(--bg-2-critical);--card-border: var(--border-4-critical);--card-border-hover: var(--border-3-critical);--card-icon-bg: var(--bg-5-critical);--card-selected-ring: var(--border-1-critical)}.dark a-card[tone=brand]{--card-bg-primary: var(--bg-4-brand);--card-bg-secondary: var(--bg-2-brand)}.dark a-card[tone=info]{--card-bg-primary: var(--bg-4-info);--card-bg-secondary: var(--bg-2-info)}.dark a-card[tone=success]{--card-bg-primary: var(--bg-4-success);--card-bg-secondary: var(--bg-2-success)}.dark a-card[tone=warning]{--card-bg-primary: var(--bg-4-warning);--card-bg-secondary: var(--bg-2-warning)}.dark a-card[tone=critical]{--card-bg-primary: var(--bg-4-critical);--card-bg-secondary: var(--bg-2-critical)}a-card[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--card-tone-source: attr(tone type(<color>), currentColor);--card-text: oklch(from var(--card-tone-source) .41 .15 h);--card-bg-secondary: oklch(from var(--card-tone-source) .955 .02 h);--card-bg-primary: oklch(from var(--card-tone-source) .99 .006 h);--card-icon-bg: oklch(from var(--card-tone-source) .925 .03 h);--card-border: oklch(from var(--card-tone-source) .895 .045 h);--card-border-hover: oklch(from var(--card-tone-source) .85 .06 h);--card-selected-ring: oklch(from var(--card-tone-source) .6 .15 h)}.dark a-card[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--card-text: oklch(from var(--card-tone-source) .75 .11 h);--card-bg-secondary: oklch(from var(--card-tone-source) .13 .02 h);--card-bg-primary: oklch(from var(--card-tone-source) .19 .04 h);--card-icon-bg: oklch(from var(--card-tone-source) .22 .05 h);--card-border: oklch(from var(--card-tone-source) .26 .07 h);--card-border-hover: oklch(from var(--card-tone-source) .32 .09 h);--card-selected-ring: oklch(from var(--card-tone-source) .7 .13 h)}a-card[priority=tertiary]{--card-icon-bg: var(--bg-3)}a-card[tone=brand][priority=tertiary]{--card-icon-bg: var(--bg-3-brand)}a-card[tone=info][priority=tertiary]{--card-icon-bg: var(--bg-3-info)}a-card[tone=success][priority=tertiary]{--card-icon-bg: var(--bg-3-success)}a-card[tone=warning][priority=tertiary]{--card-icon-bg: var(--bg-3-warning)}a-card[tone=critical][priority=tertiary]{--card-icon-bg: var(--bg-3-critical)}a-card[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=tertiary]{--card-icon-bg: oklch(from var(--card-tone-source) .97 .014 h)}.dark a-card[tone=brand][priority=tertiary]{--card-icon-bg: color-mix(in oklch, var(--bg-5-brand), white 10%)}.dark a-card[tone=info][priority=tertiary]{--card-icon-bg: color-mix(in oklch, var(--bg-5-info), white 10%)}.dark a-card[tone=success][priority=tertiary]{--card-icon-bg: color-mix(in oklch, var(--bg-5-success), white 10%)}.dark a-card[tone=warning][priority=tertiary]{--card-icon-bg: color-mix(in oklch, var(--bg-5-warning), white 10%)}.dark a-card[tone=critical][priority=tertiary]{--card-icon-bg: color-mix(in oklch, var(--bg-5-critical), white 10%)}.dark a-card:not([tone])[priority=tertiary],.dark a-card[tone=neutral][priority=tertiary]{--card-icon-bg: color-mix(in oklch, var(--bg-5), white 10%)}.dark a-card[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=tertiary]{--card-icon-bg: color-mix(in oklch, oklch(from var(--card-tone-source) .22 .05 h), white 10%)}@media(forced-colors:active){a-card{border:1px solid CanvasText;box-shadow:none}a-card[href]{border-color:LinkText}a-card>a-card-icon-chip[slot=icon]{box-sizing:border-box;border:1px dotted CanvasText}}a-card[size=small]{--card-padding: 8px;--card-header-nudge: 1px;--card-icon-size: 32px;--card-content-fs: 13px;--card-content-lh: 16px}a-card[size=large]{--card-padding: 16px;--card-header-nudge: 4px;--card-icon-size: 44px;--card-content-fs: 17px;--card-content-lh: 24px}}
+@layer anta{a-card{--card-text: var(--text-2);--card-bg-secondary: var(--bg-2);--card-bg-primary: var(--bg-1);--card-bg: var(--card-bg-primary);--card-border: var(--border-4);--card-border-hover: var(--border-3);--card-selected-ring: var(--border-1);--card-bg-hover-lift: .01;--card-radius: 8px;--card-padding: 12px;--card-content-fs: 15px;--card-content-lh: 20px;--card-icon-size: 40px;--card-icon-bg: var(--bg-4);--card-header-nudge: 2px;display:block;box-sizing:border-box;position:relative;width:100%;container-type:inline-size;container-name:card;color:var(--card-text);background:var(--card-bg);box-shadow:0 0 0 1px var(--card-border);border-radius:var(--card-radius);overflow:clip;transition:background-color .15s ease,box-shadow .15s ease,opacity .18s ease}a-card[priority=secondary]{--card-bg: var(--card-bg-secondary);--card-icon-blend: multiply}.dark a-card:not([priority=tertiary]){--card-icon-blend: exclusion}a-card[round]{--card-round: attr(round type(<length>));--card-radius: var(--card-round, 999px)}a-card[priority=tertiary]{--card-bg: color-mix(in oklch, var(--card-bg-primary) 1%, transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.dark a-card:not([tone]),.dark a-card[tone=neutral]{--card-bg-primary: var(--bg-4);--card-icon-bg: var(--bg-5)}@media(hover:hover)and (pointer:fine){a-card[href]:not([loading]):hover{background:oklch(from var(--card-bg) calc(l + var(--card-bg-hover-lift)) c h)}a-card:not([loading]):hover{box-shadow:0 0 0 1px var(--card-border-hover)}}a-card[href]:not([loading]):active{box-shadow:0 0 0 1px var(--card-border)}@media(prefers-reduced-motion:reduce){a-card{transition:none}}a-card:not(:defined){padding:var(--card-padding);opacity:0}a-card:not(:has(>[slot=media]))::part(media),a-card:not(:has(>[slot=header])):not(:has(>[slot=icon]))::part(header),a-card:not(:has(>[slot=icon]))::part(icon),a-card:not(:has(>[slot=footer]))::part(footer),a-card:not(:has(>:not([slot])))::part(body){display:none}a-card>a-card-icon-chip[slot=icon]{display:grid;place-items:center;width:var(--card-icon-size);height:var(--card-icon-size);border-radius:50%;background:var(--card-icon-bg)}a-card:is(:has(>[slot=header]),:has(>[slot=icon]))::part(body){padding-block-start:0}a-card:has(>[slot=footer])::part(body){padding-block-end:0}a-card :is(h1,h2,h3,h4,h5,h6),a-card a-title[level]{margin-block-start:0}a-card>:is(h1,h2,h3,h4,h5,h6)[slot=header],a-card>a-title[slot=header]{margin-block-end:0}a-card>a-title[slot=header]+a-text[slot=header],a-card>:is(h1,h2,h3,h4,h5,h6)[slot=header]+a-text[slot=header]{margin-block-start:1px}a-card[size=large]>a-title[slot=header]+a-text[slot=header],a-card[size=large]>:is(h1,h2,h3,h4,h5,h6)[slot=header]+a-text[slot=header]{margin-block-start:2px}a-card[tone=brand]{--card-text: var(--text-2-brand);--card-bg-secondary: var(--bg-4-brand);--card-bg-primary: var(--bg-2-brand);--card-border: var(--border-4-brand);--card-border-hover: var(--border-3-brand);--card-icon-bg: var(--bg-5-brand);--card-selected-ring: var(--border-1-brand)}a-card[tone=info]{--card-text: var(--text-2-info);--card-bg-secondary: var(--bg-4-info);--card-bg-primary: var(--bg-2-info);--card-border: var(--border-4-info);--card-border-hover: var(--border-3-info);--card-icon-bg: var(--bg-5-info);--card-selected-ring: var(--border-1-info)}a-card[tone=success]{--card-text: var(--text-2-success);--card-bg-secondary: var(--bg-4-success);--card-bg-primary: var(--bg-2-success);--card-border: var(--border-4-success);--card-border-hover: var(--border-3-success);--card-icon-bg: var(--bg-5-success);--card-selected-ring: var(--border-1-success)}a-card[tone=warning]{--card-text: var(--text-2-warning);--card-bg-secondary: var(--bg-4-warning);--card-bg-primary: var(--bg-2-warning);--card-border: var(--border-4-warning);--card-border-hover: var(--border-3-warning);--card-icon-bg: var(--bg-5-warning);--card-selected-ring: var(--border-1-warning)}a-card[tone=critical]{--card-text: var(--text-2-critical);--card-bg-secondary: var(--bg-4-critical);--card-bg-primary: var(--bg-2-critical);--card-border: var(--border-4-critical);--card-border-hover: var(--border-3-critical);--card-icon-bg: var(--bg-5-critical);--card-selected-ring: var(--border-1-critical)}.dark a-card[tone=brand]{--card-bg-primary: var(--bg-4-brand);--card-bg-secondary: var(--bg-2-brand)}.dark a-card[tone=info]{--card-bg-primary: var(--bg-4-info);--card-bg-secondary: var(--bg-2-info)}.dark a-card[tone=success]{--card-bg-primary: var(--bg-4-success);--card-bg-secondary: var(--bg-2-success)}.dark a-card[tone=warning]{--card-bg-primary: var(--bg-4-warning);--card-bg-secondary: var(--bg-2-warning)}.dark a-card[tone=critical]{--card-bg-primary: var(--bg-4-critical);--card-bg-secondary: var(--bg-2-critical)}a-card[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--card-tone-source: attr(tone type(<color>), currentColor);--card-text: oklch(from var(--card-tone-source) .41 .15 h);--card-bg-secondary: oklch(from var(--card-tone-source) .955 .02 h);--card-bg-primary: oklch(from var(--card-tone-source) .99 .006 h);--card-icon-bg: oklch(from var(--card-tone-source) .925 .03 h);--card-border: oklch(from var(--card-tone-source) .895 .045 h);--card-border-hover: oklch(from var(--card-tone-source) .85 .06 h);--card-selected-ring: oklch(from var(--card-tone-source) .6 .15 h)}.dark a-card[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--card-text: oklch(from var(--card-tone-source) .75 .11 h);--card-bg-secondary: oklch(from var(--card-tone-source) .13 .02 h);--card-bg-primary: oklch(from var(--card-tone-source) .19 .04 h);--card-icon-bg: oklch(from var(--card-tone-source) .22 .05 h);--card-border: oklch(from var(--card-tone-source) .26 .07 h);--card-border-hover: oklch(from var(--card-tone-source) .32 .09 h);--card-selected-ring: oklch(from var(--card-tone-source) .7 .13 h)}a-card[priority=tertiary]{--card-icon-bg: var(--bg-3)}a-card[tone=brand][priority=tertiary]{--card-icon-bg: var(--bg-3-brand)}a-card[tone=info][priority=tertiary]{--card-icon-bg: var(--bg-3-info)}a-card[tone=success][priority=tertiary]{--card-icon-bg: var(--bg-3-success)}a-card[tone=warning][priority=tertiary]{--card-icon-bg: var(--bg-3-warning)}a-card[tone=critical][priority=tertiary]{--card-icon-bg: var(--bg-3-critical)}a-card[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=tertiary]{--card-icon-bg: oklch(from var(--card-tone-source) .97 .014 h)}.dark a-card[tone=brand][priority=tertiary]{--card-icon-bg: color-mix(in oklch, var(--bg-5-brand), white 10%)}.dark a-card[tone=info][priority=tertiary]{--card-icon-bg: color-mix(in oklch, var(--bg-5-info), white 10%)}.dark a-card[tone=success][priority=tertiary]{--card-icon-bg: color-mix(in oklch, var(--bg-5-success), white 10%)}.dark a-card[tone=warning][priority=tertiary]{--card-icon-bg: color-mix(in oklch, var(--bg-5-warning), white 10%)}.dark a-card[tone=critical][priority=tertiary]{--card-icon-bg: color-mix(in oklch, var(--bg-5-critical), white 10%)}.dark a-card:not([tone])[priority=tertiary],.dark a-card[tone=neutral][priority=tertiary]{--card-icon-bg: color-mix(in oklch, var(--bg-5), white 10%)}.dark a-card[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=tertiary]{--card-icon-bg: color-mix(in oklch, oklch(from var(--card-tone-source) .22 .05 h), white 10%)}@media(forced-colors:active){a-card{border:1px solid CanvasText;box-shadow:none}a-card[href]{border-color:LinkText}a-card>a-card-icon-chip[slot=icon]{box-sizing:border-box;border:1px dotted CanvasText}}a-card[size=small]{--card-padding: 8px;--card-header-nudge: 1px;--card-icon-size: 32px;--card-content-fs: 13px;--card-content-lh: 16px}a-card[size=large]{--card-padding: 16px;--card-header-nudge: 4px;--card-icon-size: 44px;--card-content-fs: 17px;--card-content-lh: 24px}}a-card>p:last-child,a-card>:not([slot])>p:last-child{margin-block-end:0}

package/dist/elements/a-dialog.css

@@ -1 +1 @@
-@layer anta{a-dialog{--dialog-bg: var(--bg-1);--dialog-text: var(--text-2);--dialog-border: color-mix(in oklch, black 9%, transparent);--dialog-radius: 10px;--dialog-shadow: inset 0 0 0 1px var(--dialog-border), 0 1px 3px color-mix(in oklch, black 10%, transparent), 0 12px 32px color-mix(in oklch, black 22%, transparent), 0 28px 64px color-mix(in oklch, black 14%, transparent);--dialog-overlay: color-mix(in oklch, black 42%, transparent);display:contents}a-dialog[round]{--dialog-round: attr(round type(<length>), var(--dialog-radius, 10px))}a-dialog:not(:defined){display:none}.dark a-dialog{--dialog-border: color-mix(in oklch, white 14%, transparent);--dialog-shadow: inset 0 0 0 1px var(--dialog-border), 0 1px 3px color-mix(in oklch, black 40%, transparent), 0 12px 32px color-mix(in oklch, black 55%, transparent), 0 28px 64px color-mix(in oklch, black 40%, transparent);--dialog-overlay: color-mix(in oklch, black 62%, transparent)}@media(forced-colors:active){a-dialog{--dialog-outline: 1px solid CanvasText;--dialog-shadow: none}}}
+@layer anta{a-dialog{--dialog-bg: var(--bg-1);--dialog-text: var(--text-2);--dialog-border: color-mix(in oklch, black 9%, transparent);--dialog-radius: 10px;--dialog-shadow: inset 0 0 0 1px var(--dialog-border), 0 1px 3px color-mix(in oklch, black 10%, transparent), 0 12px 32px color-mix(in oklch, black 22%, transparent), 0 28px 64px color-mix(in oklch, black 14%, transparent);--dialog-overlay: color-mix(in oklch, black 42%, transparent);display:contents}a-dialog[round]{--dialog-round: attr(round type(<length>), var(--dialog-radius, 10px))}a-dialog:not(:defined){display:none}.dark a-dialog{--dialog-border: color-mix(in oklch, white 14%, transparent);--dialog-shadow: inset 0 0 0 1px var(--dialog-border), 0 1px 3px color-mix(in oklch, black 40%, transparent), 0 12px 32px color-mix(in oklch, black 55%, transparent), 0 28px 64px color-mix(in oklch, black 40%, transparent);--dialog-overlay: color-mix(in oklch, black 62%, transparent)}@media(forced-colors:active){a-dialog{--dialog-outline: 1px solid CanvasText;--dialog-shadow: none}}}a-dialog>p:last-child,a-dialog>:not([slot])>p:last-child{margin-block-end:0}