@antadesign/anta 0.3.22 → 0.3.23

package/dist/elements/a-tooltip.js

@@ -12,7 +12,7 @@ const PROX_NEAR = 10;
 const PROX_FAR = 100;
 const PROX_FADE_MS = 60;
 const ENTER_TOUCH_DELAY = 500;
-const TRUNCATING_PARTS = "a-tab-label, a-button-label";
+const TRUNCATING_PARTS = "a-tab-label, a-button-label, a-step-hint";
 const AUTOMATIC_TEXT_TOOLTIP = "data-anta-text-tooltip";
 const LEAVE_TOUCH_DELAY = 1500;
 const TOUCH_SLOP = 10;
@@ -289,34 +289,37 @@ class ATooltipElement extends HTMLElementBase {
   syncAutomaticTextContent() {
     if (this.#isAutomaticTextTooltip) this.bubble.textContent = this.anchorText();
   }
-  /** The element whose overflow decides whether the tooltip shows: a
-   *  `truncated-selector` resolved within the anchor wins; else the first of
+  /** The elements whose overflow decides whether the tooltip shows: every
+   *  `truncated-selector` match within the anchor wins; else every one of
    *  Anta's ellipsizing label parts inside the anchor; else the anchor itself
    *  (which may be the clipping box for a hand-authored target). */
-  resolveTruncationTarget() {
+  resolveTruncationTargets() {
     const anchor = this.anchor;
-    if (!anchor) return null;
+    if (!anchor) return [];
     const sel = this.getAttribute("truncated-selector");
     if (sel) {
       try {
-        const found = anchor.querySelector(sel);
-        if (found) return found;
+        const found = Array.from(anchor.querySelectorAll(sel));
+        if (found.length) return found;
       } catch {
       }
     }
-    return anchor.querySelector(TRUNCATING_PARTS) ?? anchor;
+    const parts = Array.from(
+      anchor.querySelectorAll(TRUNCATING_PARTS)
+    );
+    return parts.length ? parts : [anchor];
   }
-  /** True when the resolved target overflows its box (horizontal ellipsis or
+  /** True when any resolved target overflows its box (horizontal ellipsis or
    *  vertical clamp). A 1px threshold absorbs sub-pixel rounding; a zero-size
    *  (hidden / detached) target counts as not truncated. Measured fresh on each
    *  show attempt, so late fonts / resizes self-correct with no observer. */
   isTargetTruncated() {
-    const t = this.resolveTruncationTarget();
-    if (!t) return false;
-    const reported = t.isTruncated;
-    if (typeof reported === "boolean") return reported;
-    if (t.clientWidth === 0 && t.clientHeight === 0) return false;
-    return t.scrollWidth - t.clientWidth > 1 || t.scrollHeight - t.clientHeight > 1;
+    return this.resolveTruncationTargets().some((target) => {
+      const reported = target.isTruncated;
+      if (typeof reported === "boolean") return reported;
+      if (target.clientWidth === 0 && target.clientHeight === 0) return false;
+      return target.scrollWidth - target.clientWidth > 1 || target.scrollHeight - target.clientHeight > 1;
+    });
   }
   /** True when there's nothing worth showing: no element children (so an
    *  icon/image-only bubble still counts as content) and no non-whitespace text

package/dist/elements/index.d.ts

@@ -13,6 +13,7 @@
  * Must only be imported client-side — registration is guarded against missing
  * `customElements` (SSR), but there's no reason to load it server-side.
  */
+export { AAvatarElement, register_a_avatar } from './a-avatar';
 export { AProgressElement, register_a_progress } from './a-progress';
 export { ALoaderElement, register_a_loader } from './a-loader';
 export { ATextElement, register_a_text } from './a-text';

package/dist/elements/index.js

@@ -1,3 +1,4 @@
+import { AAvatarElement, register_a_avatar } from "./a-avatar";
 import { AProgressElement, register_a_progress } from "./a-progress";
 import { ALoaderElement, register_a_loader } from "./a-loader";
 import { ATextElement, register_a_text } from "./a-text";
@@ -29,6 +30,7 @@ import { AToastElement, register_a_toast } from "./a-toast";
 import "./a-title.css";
 import "./a-tag.css";
 export {
+  AAvatarElement,
   ABannerElement,
   AButtonElement,
   ACalendarElement,
@@ -57,6 +59,7 @@ export {
   AToastElement,
   AToasterElement,
   ATooltipElement,
+  register_a_avatar,
   register_a_banner,
   register_a_button,
   register_a_calendar,

package/dist/general_types.d.ts

@@ -181,12 +181,45 @@ export interface AProgressAttributes extends BaseAttributes {
     /** ARIA accessible name. */
     'aria-label'?: string;
 }
+/**
+ * Attributes for the `<a-avatar>` custom element.
+ *
+ * These are the low-level web component attributes. For the typed JSX wrapper,
+ * use `Avatar` from `@antadesign/anta`.
+ */
+export interface AAvatarAttributes extends BaseAttributes {
+    /** Alphanumeric seed driving the generated userpic. Falls back to `name`. */
+    seed?: string;
+    /** Name — supplies the initials fallback and accessible name, and seeds
+     *  generation when `seed` is absent. */
+    name?: string;
+    /** Image URL. Shown instead of a generated userpic when present. */
+    src?: string;
+    /** Size of the square container. `medium` is the default; set a pixel size via
+     *  the `--avatar-size` custom property. */
+    size?: 'small' | 'medium' | 'large';
+    /** Corner badge, colored by tone — a named tone or any literal CSS color
+     *  (derived in oklch). Omit for no badge. */
+    badge?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    /** Fully-round (circular) frame, or a custom radius via a length value
+     *  (`round="12px"`). Presence-based for the boolean form. */
+    round?: boolean | number | string;
+    /** Brand generation constraints as a JSON string (an `AvatarGenConfig`). With
+     *  the `Avatar` wrapper, pass the object as `generator` and it is serialized. */
+    config?: string;
+    /** ARIA role — the JSX wrapper sets this to `'img'`. */
+    role?: string;
+    /** ARIA accessible name. */
+    'aria-label'?: string;
+}
 /**
  * Attributes for the `<a-loader>` custom element. For the JSX wrapper with
  * cross-browser sizing and accessible progress semantics, use `Loader` from
  * `@antadesign/anta`.
  */
 export interface ALoaderAttributes extends BaseAttributes {
+    /** Color tone for the loader. */
+    tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical';
     /** Presence selects the static, determinate gradient. Set `--loader-value`
      * in `style` to its percentage. Omit this attribute for the rotating
      * indeterminate gradient. */
@@ -1119,6 +1152,9 @@ export interface ATabsAttributes extends BaseAttributes {
     /** Layout + arrow-key axis. `'horizontal'` (default) ellipsizes labels when tabs
      *  overflow (scrolling is opt-in via CSS); `'vertical'` stacks them. */
     orientation?: 'horizontal' | 'vertical';
+    /** Make horizontal tabs share the available inline space equally. Presence-based
+     *  (`''` on, omit off). */
+    fill?: boolean | '';
     /** Disable the sliding indicator. By default the selected-tab indicator is a single
      *  rectangle that animates between tabs via CSS anchor positioning; with `noslide` the
      *  highlight is painted on each tab and snaps with no movement (also the automatic

package/dist/index.d.ts

@@ -16,6 +16,10 @@
  *
  * @packageDocumentation
  */
+export { Avatar } from './components/Avatar';
+export type { AvatarProps } from './components/Avatar';
+export { resolveAvatar, avatarToSvg, getInitials, hashSeed, mulberry32, rngFromSeed, maxChroma, oklchString, colorLightness, hasFigure, DEFAULT_CONFIG, } from './avatar-core';
+export type { AvatarGenConfig, DimMode, ScalarDim, Vec2Dim, ColorDim, ResolvedAvatar, ResolvedHead, ResolvedBody, SvgOptions, } from './avatar-core';
 export { Progress } from './components/Progress';
 export type { ProgressProps } from './components/Progress';
 export { Loader } from './components/Loader';
@@ -74,6 +78,8 @@ export { SelectFaceted } from './components/SelectFaceted';
 export type { SelectFacetedProps, SelectFacet, SelectFacetSingle, SelectFacetMultiple, SelectFacetText, SelectFacetCustom, SelectFacetCustomContext, FacetFilter, SelectFacetedValue, SelectFacetedChangeAttrs, SelectFacetedTriggerState, } from './components/SelectFaceted';
 export { Tabs } from './components/Tabs';
 export type { TabsProps, TabOption, TabsChangeAttrs } from './components/Tabs';
+export { Steps } from './components/Steps';
+export type { StepsProps, StepMarker, StepMarkerState, StepOption, StepPriority, StepState, StepTone, } from './components/Steps';
 export { TabPanel } from './components/TabPanel';
 export type { TabPanelProps } from './components/TabPanel';
 export { Dialog } from './components/Dialog';

package/dist/index.js

@@ -1,3 +1,17 @@
+import { Avatar } from "./components/Avatar";
+import {
+  resolveAvatar,
+  avatarToSvg,
+  getInitials,
+  hashSeed,
+  mulberry32,
+  rngFromSeed,
+  maxChroma,
+  oklchString,
+  colorLightness,
+  hasFigure,
+  DEFAULT_CONFIG
+} from "./avatar-core";
 import { Progress } from "./components/Progress";
 import { Loader } from "./components/Loader";
 import { Text } from "./components/Text";
@@ -42,6 +56,7 @@ import { RadioGroup } from "./components/RadioGroup";
 import { Select, optionsWithSelection } from "./components/Select";
 import { SelectFaceted } from "./components/SelectFaceted";
 import { Tabs } from "./components/Tabs";
+import { Steps } from "./components/Steps";
 import { TabPanel } from "./components/TabPanel";
 import { Dialog } from "./components/Dialog";
 import { Card } from "./components/Card";
@@ -49,12 +64,14 @@ import { Banner } from "./components/Banner";
 import { Toaster, createToaster } from "./components/Toaster";
 import { configure } from "./jsx-runtime";
 export {
+  Avatar,
   Banner,
   Button,
   ButtonCopy,
   Calendar,
   Card,
   Checkbox,
+  DEFAULT_CONFIG,
   Dialog,
   Expander,
   ICON_SHAPES,
@@ -75,6 +92,7 @@ export {
   Select,
   SelectFaceted,
   Slider,
+  Steps,
   Switch,
   TabPanel,
   Tabs,
@@ -83,8 +101,10 @@ export {
   Title,
   Toaster,
   Tooltip,
+  avatarToSvg,
   buildMonth,
   clampDate,
+  colorLightness,
   configure,
   createToaster,
   dateFormatPattern,
@@ -92,12 +112,20 @@ export {
   firstDayOfWeek,
   formatDateInput,
   formatDateTimeInput,
+  getInitials,
   getWeekdays,
+  hasFigure,
+  hashSeed,
   isOutOfRange,
+  maxChroma,
+  mulberry32,
+  oklchString,
   optionsWithSelection,
   parseDateInput,
   parseDateTimeInput,
   parseISODate,
   parseTimeInput,
+  resolveAvatar,
+  rngFromSeed,
   usesHour12
 };

package/dist/jsx-runtime.d.ts

@@ -44,7 +44,7 @@ export declare function useSyncExternalStore<T>(subscribe: (onChange: () => void
 export declare function jsx(type: ComponentType, props: Record<string, unknown> | null, key?: string | number): unknown;
 export declare function jsxs(type: ComponentType, props: Record<string, unknown> | null, key?: string | number): unknown;
 export { _Fragment as Fragment };
-import type { AProgressAttributes, ALoaderAttributes, ATextAttributes, ATitleAttributes, ATagAttributes, AExpanderAttributes, AIconAttributes, AButtonAttributes, ACopyAttributes, ACheckboxAttributes, ASwitchAttributes, ATooltipAttributes, AInputAttributes, ASliderAttributes, AInputTimeAttributes, ACalendarAttributes, ARadioAttributes, ARadioGroupAttributes, AMenuAttributes, AMenuItemAttributes, AMenuGroupAttributes, ATabsAttributes, ATabAttributes, ATabpanelAttributes, ADialogAttributes, ACardAttributes, ABannerAttributes, AToasterAttributes, AToastAttributes, BaseAttributes } from './general_types';
+import type { AAvatarAttributes, AProgressAttributes, ALoaderAttributes, ATextAttributes, ATitleAttributes, ATagAttributes, AExpanderAttributes, AIconAttributes, AButtonAttributes, ACopyAttributes, ACheckboxAttributes, ASwitchAttributes, ATooltipAttributes, AInputAttributes, ASliderAttributes, AInputTimeAttributes, ACalendarAttributes, ARadioAttributes, ARadioGroupAttributes, AMenuAttributes, AMenuItemAttributes, AMenuGroupAttributes, ATabsAttributes, ATabAttributes, ATabpanelAttributes, ADialogAttributes, ACardAttributes, ABannerAttributes, AToasterAttributes, AToastAttributes, BaseAttributes } from './general_types';
 export declare namespace JSX {
     interface IntrinsicElements extends React.JSX.IntrinsicElements, AntaIntrinsicElements {
     }
@@ -52,6 +52,7 @@ export declare namespace JSX {
     }
 }
 export interface AntaIntrinsicElements {
+    'a-avatar': AAvatarAttributes;
     'a-progress': AProgressAttributes;
     'a-loader': ALoaderAttributes;
     'a-progress-label': BaseAttributes;
@@ -108,6 +109,10 @@ export interface AntaIntrinsicElements {
     'a-tab': ATabAttributes;
     'a-tab-label': BaseAttributes;
     'a-tabpanel': ATabpanelAttributes;
+    'a-steps': BaseAttributes;
+    'a-step-marker': BaseAttributes;
+    'a-step-desc': BaseAttributes;
+    'a-step-hint': BaseAttributes;
     'a-dialog': ADialogAttributes;
     'a-card': ACardAttributes;
     'a-card-icon-chip': BaseAttributes;

package/docs/changelog.md

@@ -3,6 +3,46 @@
 This page tracks changes that ship in `@antadesign/anta`. Documentation-only
 changes are not listed.
 
+## Unreleased
+
+## 0.3.23 — August 23, 2026
+
+### Removed
+
+- Removed the `education-disk`, `help-disk`, and all `*-logo` icon shapes.
+
+### Added
+
+- `@antadesign/anta/bundle` and `bundle.css` provide one minified full-runtime
+  entry and one matching stylesheet for applications that prefer full imports.
+- `Steps` provides controlled and uncontrolled process navigation with optional
+  panels, horizontal and vertical layouts, accessible tab semantics, process
+  states, number and icon-shape markers, state-aware `renderMarker`, labels
+  and hints with clipped-content tooltips, and per-option tones.
+- `Loader` accepts a named `tone`; the loading Steps state forwards the
+  option tone to it.
+- `Tabs` and `Steps` accept `fill`. Tabs share the available width equally;
+  Steps stretch their connectors between content-sized phases.
+- `Steps` adds `primary`, `secondary`, and `tertiary` priorities. Primary uses a
+  solid selected marker and stronger completed connectors; tertiary is compact
+  and borderless.
+- `StepOption` defaults to the neutral tone. Omitting its `tone` or passing an
+  empty string produces the same result; selected rings use the stronger
+  `border-1` step.
+
+- `Avatar` renders an image, seed-generated placeholder, or initials, with
+  `generator`, `badge`, and `round` options. `avatar-core` generation helpers are
+  also exported.
+
+### Changed
+
+- `Avatar` default generation uses a larger head-to-body gap, shifts figures
+  slightly upward, and varies their position, rotation, color, scale, and shape
+  more widely.
+- `Slider` thumbs are smaller: 12px at `small`, 16px at `medium` (the default,
+  previously 18px), and 20px at `large`, unchanged. `thumbSize` still overrides
+  any of them.
+
 ## 0.3.22 — August 20, 2026
 
 ### Changed

package/docs/comparison.md

@@ -24,5 +24,5 @@ stable releases in this snapshot.
 ## Component coverage
 
 Rows group components by job, so Dialog, Modal, and Drawer share one mark.
-Anta covers the common controls but remains narrower than full suites. Base UI
-intentionally focuses on behavior rather than styled components.
+Anta covers the common controls but remains narrower than full suites. The
+shadcn row reflects its default Base UI registry.

package/docs/components/banner.md

@@ -11,7 +11,7 @@ twice the resting height of `Progress`. It's **borderless by default**; add a ru
 under it or an outline around it with `border-bottom-width` / `border-width`, the
 same opt-in as `Progress` ([Styling](#styling)).
 
-## Tones
+## Tone
 
 Pick a semantic `tone` to tint the surface and text together — and the ✕ adopts the
 same tone (it also sets the border color, used if you opt into a border). The set

package/docs/components/button.md

@@ -5,7 +5,7 @@ component (or `<a role="button">` when `href` is set). Tone, priority,
 size, and state are all plain attributes, so the styling is identical
 whether you use the wrapper or author the element by hand.
 
-## Priorities
+## Priority
 
 A button's priority helps control how much attention it draws:
 
@@ -21,7 +21,7 @@ A button's priority helps control how much attention it draws:
 - `tertiary` — Background-less at rest, fills on hover.
 - `quaternary` — Text only, no background.
 
-## Tones
+## Tone
 
 Six named tones — `neutral` (default), `brand`, `critical`, `info`,
 `success`, `warning`. Omitting `tone` — or passing an empty string —
@@ -66,7 +66,7 @@ too, so there's no state change; to keep distinct states, set the per-state
 variables instead — `--button-bg-{priority}-hover`,
 `--button-bg-{priority}-active`, and the `--button-fg-*` equivalents.
 
-## Sizes
+## Size
 
 ```tsx
 <Button tone="brand" size="small"  label="Small" />

package/docs/components/card.md

@@ -62,7 +62,7 @@ when toned (stepping to `border-3` on hover).
 <Card priority="tertiary" header="Tertiary">…</Card>
 ```
 
-## Tones
+## Tone
 
 A semantic `tone` tints the surface, border, and text. The set matches the rest of
 Anta: `neutral` (the default) plus `brand`, `info`, `success`, `warning`, and

package/docs/components/expander.md

@@ -36,7 +36,7 @@ to see the corners hold their radius as the body appears.
 <Expander round title="Details" priority="primary">…</Expander>
 ```
 
-## Tones
+## Tone
 
 Pick a semantic `tone` to tint the header text and — on the filled
 priorities (`secondary` / `primary`) — the surface too. The set matches

package/docs/components/input.md

@@ -6,7 +6,7 @@ self-contained (you never pass a control in) yet fully native underneath:
 focus, IME, autofill, and form submission all work, and the control is reachable
 for styling through `::part(input)`.
 
-## Sizes
+## Size
 
 ```tsx
 <Input size="small"  label="Small"  placeholder="24px tall" />

package/docs/components/loader.md

@@ -61,6 +61,7 @@ decorative so nearby status text remains the single announcement. |
 | `max?` | number | 100 | Upper bound of the range. |
 | `size?` | number | 16 | Width and height in pixels. |
 | `speed?` | number | 0.75 | Seconds per rotation. Pass a positive number. |
+| `tone?` | LoaderTone | — | Color tone for the loader. Omit it to use the standard text-3 color. |
 | `value?` | number \| false | — | Current progress value. Omit this prop, or pass `false`, for an
 indeterminate rotating gradient. |
 

package/docs/components/menu.md

@@ -39,7 +39,7 @@ const onSelect = (e, { value }) => act(value)
 </Menu>
 ```
 
-## Tones
+## Tone
 
 `tone` colors an item's label, icon, and hover/selected tint (and its
 `selectionIndicator`) with a semantic palette — `brand`, `info`, `success`,

package/docs/components/radio.md

@@ -31,7 +31,7 @@ Each option can also set `className`, `style`, and `data-*`.
 `RadioGroup` forwards them to that option's `<a-radio>` so you can add
 per-option presentation and application metadata.
 
-## Tones
+## Tone
 
 ```tsx
 {/* Usually one tone for the whole group: */}

package/docs/components/slider.md

@@ -80,7 +80,7 @@ for a shared custom radius. |
 | `step?` | number | 1 | Smallest keyboard and drag increment. |
 | `thumbFill?` | boolean | false | Fill the thumb with its resolved border color. This follows `thumbTone`
 and interactive states. |
-| `thumbSize?` | number \| string | 18 | Diameter of the thumb. Numbers use pixels; strings are CSS lengths. Keep
+| `thumbSize?` | number \| string | 16 | Diameter of the thumb. Numbers use pixels; strings are CSS lengths. Keep
 it at least as large as `trackSize`. |
 | `thumbTone?` | 'neutral' \| 'brand' \| 'info' \| 'success' \| 'warning' \| 'critical' \| (string & {}) | 'neutral' | 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. |