@antadesign/anta 0.3.22 → 0.3.24

package/dist/components/Avatar.d.ts

@@ -0,0 +1,63 @@
+import type { BaseProps } from "../general_types";
+import type { AvatarGenConfig } from "../avatar-core";
+export interface AvatarProps extends Omit<BaseProps, 'children'> {
+    /** Alphanumeric seed that deterministically drives the generated userpic. The
+     *  same seed always renders the same avatar. Falls back to `name` when omitted,
+     *  so a stable user id or name is a good value. */
+    seed?: string;
+    /** Person or entity name. Supplies the initials fallback (up to 3 letters from
+     *  the first 3 words) and the accessible name, and seeds generation when `seed`
+     *  is absent. */
+    name?: string;
+    /** Image URL. When set, the image is shown instead of a generated userpic,
+     *  cropped to fill the container. */
+    src?: string;
+    /** Size of the square container. A number is a pixel size.
+     *  @defaultValue medium */
+    size?: 'small' | 'medium' | 'large' | number;
+    /** Corner badge, colored by tone. Pass a named tone or any literal CSS color;
+     *  the application decides what each tone means (`success` for online,
+     *  `critical` for busy, `neutral` for offline). Omit for no badge. */
+    badge?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    /** Fully-round (circular) frame. Pass a `number` (px) or a CSS length string
+     *  for a custom radius instead. */
+    round?: boolean | number | string;
+    /** Brand generation constraints — each dimension is OFF / ANY / RANGE / LIST.
+     *  Colors cap OKLCH ranges or pass an explicit palette. Omit for the default
+     *  varied figure. Define one config for the app and reuse it across avatars. */
+    generator?: AvatarGenConfig;
+}
+/**
+ * Avatar — a userpic container. Shows a supplied image, a seed-generated
+ * placeholder figure, or initials, in that priority order.
+ *
+ * Renders an `<a-avatar>` web component. Generation runs in `avatar-core`; pass a
+ * `generator` config to cap the space to your brand (see the color and dimension
+ * options on `AvatarGenConfig`). With no `generator`, a varied figure is drawn;
+ * a config whose head and body shapes are both `off` renders initials instead.
+ *
+ * Requires `@antadesign/anta/elements` to be imported (client-side only) to
+ * register the underlying custom element.
+ *
+ * @example Generated userpic
+ * ```tsx
+ * import { Avatar } from '@antadesign/anta'
+ * import '@antadesign/anta/elements'
+ *
+ * <Avatar seed="user-42" name="Vlad Korobov" />
+ * ```
+ *
+ * @example Image with a badge
+ * ```tsx
+ * <Avatar src="/vlad.jpg" name="Vlad Korobov" badge="success" />
+ * ```
+ *
+ * @example Initials (no figure shape configured)
+ * ```tsx
+ * <Avatar
+ *   name="Vlad Korobov"
+ *   generator={{ headRadiusTop: { mode: 'off' }, headRadiusBottom: { mode: 'off' }, bodyBorderRadius: { mode: 'off' } }}
+ * />
+ * ```
+ */
+export declare const Avatar: ({ seed, name, src, size, badge, round, generator, className, style, ...rest }: AvatarProps) => any;

package/dist/components/Avatar.js

@@ -0,0 +1,29 @@
+import { jsx } from "@antadesign/anta/jsx-runtime";
+import { lengthStyle, roundStyle, roundAttr, toneStyle } from "../anta_helpers";
+const Avatar = ({ seed, name, src, size, badge, round, generator, className, style, ...rest }) => {
+  const numericSize = typeof size === "number";
+  const sized = numericSize ? lengthStyle(size, "--avatar-size", style) : style;
+  const rounded = roundStyle(round, "--avatar-radius", sized);
+  const mergedStyle = toneStyle(badge, "--avatar-badge-tone-source", rounded);
+  return /* @__PURE__ */ jsx(
+    "a-avatar",
+    {
+      seed,
+      name,
+      src,
+      size: !numericSize && size && size !== "medium" ? size : void 0,
+      badge,
+      round: roundAttr(round),
+      config: generator ? JSON.stringify(generator) : void 0,
+      role: name ? "img" : void 0,
+      "aria-label": name || void 0,
+      "aria-hidden": name ? void 0 : "true",
+      class: className,
+      style: mergedStyle,
+      ...rest
+    }
+  );
+};
+export {
+  Avatar
+};

package/dist/components/Breadcrumbs.css

@@ -0,0 +1 @@
+@layer anta{a-breadcrumbs{--breadcrumb-gap: 1px;--breadcrumb-separator-color: var(--text-5);--breadcrumb-separator-icon-size: 16px;--breadcrumb-separator-font-size: 15px;display:flex;align-items:center;gap:var(--breadcrumb-gap);width:max-content;min-width:100%;max-width:100%;overflow-x:auto}a-breadcrumbs[data-size=small]{--breadcrumb-separator-icon-size: 14px;--breadcrumb-separator-font-size: 13px}a-breadcrumbs[data-size=large]{--breadcrumb-separator-icon-size: 18px;--breadcrumb-separator-font-size: 17px}a-breadcrumbs[data-paddingless]{--breadcrumb-gap: .75ch}a-breadcrumbs[data-separator-icon]{--breadcrumb-gap: 0}a-breadcrumbs>*{flex:none}a-breadcrumb-separator{display:inline-flex;flex:none;align-items:center;justify-content:center;color:var(--breadcrumb-separator-color);font-family:var(--sans-serif);font-size:var(--breadcrumb-separator-font-size);line-height:1;user-select:none}a-breadcrumb-separator>a-icon{--icon-size: var(--breadcrumb-separator-icon-size)}}

package/dist/components/Breadcrumbs.d.ts

@@ -0,0 +1,127 @@
+import type { IconShape } from '../elements/a-icon.shapes';
+import type { BaseProps } from '../general_types';
+import type { BaseButtonProps } from './Button';
+import type { CopyTarget } from './copy-props';
+import './Breadcrumbs.css';
+/** The text separators built into `<Breadcrumbs>`. Pass an `IconShape` for a
+ *  graphic separator instead. */
+export type BreadcrumbTextSeparator = '→' | '/' | '•' | '▸';
+/** A built-in text separator or any registered Anta icon shape. */
+export type BreadcrumbSeparator = BreadcrumbTextSeparator | IconShape;
+/** Props shared by every breadcrumb item. They land on the visible `Button`
+ *  and, when the item is folded, on the corresponding `MenuItem`. */
+type BreadcrumbItemBase = Omit<BaseProps, 'children' | 'key' | 'slot' | 'tabIndex'> & {
+    /** Visible item content. It is reused as the folded menu row's label. */
+    label: React.ReactNode;
+    /** Leading icon shape. */
+    icon?: IconShape;
+    /** Trailing icon shape. Copy items reserve the trailing icon for their copy
+     *  feedback and therefore do not accept this prop. */
+    iconTrailing?: IconShape;
+    /** Semantic tone or a literal CSS color. */
+    tone?: BaseButtonProps['tone'];
+    /** Disable the item. */
+    disabled?: boolean;
+    /** Mark this item as the current page. The wrapper passes
+     *  `aria-current="page"` through to its button or link. */
+    current?: boolean;
+    /** Runs when an action item is activated. A folded item calls it from the
+     *  corresponding `MenuItem` selection. */
+    onClick?: (event: any) => void;
+};
+/** A breadcrumb that navigates to an href. */
+export type BreadcrumbLinkItem = BreadcrumbItemBase & {
+    /** Destination URL. */
+    href: string;
+    /** Where to open the destination. */
+    target?: string;
+    copy?: never;
+    copyNode?: never;
+    copyUrl?: never;
+};
+/** A non-navigating breadcrumb action. */
+export type BreadcrumbActionItem = BreadcrumbItemBase & {
+    href?: never;
+    target?: never;
+    copy?: never;
+    copyNode?: never;
+    copyUrl?: never;
+};
+/** A breadcrumb that copies a literal value, a marked DOM region, or the page
+ *  URL. It uses `ButtonCopy` when visible and `MenuItemCopy` when folded. */
+export type BreadcrumbCopyItem = Omit<BreadcrumbItemBase, 'iconTrailing'> & CopyTarget & {
+    href?: never;
+    target?: never;
+    iconTrailing?: never;
+    /** Where the copy glyph sits relative to the label — or `'none'` to omit it.
+     *  @defaultValue 'leading' */
+    iconPlacement?: 'leading' | 'trailing' | 'none';
+    /** Text in the successful no-icon confirmation.
+     *  @defaultValue Copied */
+    copiedLabel?: string;
+};
+/** One item in a `<Breadcrumbs>` trail. Link, action, and copy items share
+ *  presentation props while keeping incompatible behaviours type-safe. */
+export type BreadcrumbItem = BreadcrumbLinkItem | BreadcrumbActionItem | BreadcrumbCopyItem;
+/** Public props for `<Breadcrumbs>`. */
+export type BreadcrumbsProps = BaseProps & {
+    children?: never;
+} & {
+    /** Ordered breadcrumb entries. */
+    items: BreadcrumbItem[];
+    /** Button size applied to every visible item and the More control.
+     *  @defaultValue 'medium' */
+    size?: 'small' | 'medium' | 'large';
+    /** Separator between visible entries.
+     *  @defaultValue 'chevron-right' */
+    separator?: BreadcrumbSeparator;
+    /** Maximum number of original breadcrumb items left visible. The More
+     *  control does not count. Omit to keep every item visible. */
+    maxItems?: number;
+    /** Number of original items kept before the More control when `maxItems`
+     *  collapses the trail. The rest of the visible-item budget is kept from the
+     *  end, so `0` puts More first.
+     *  @defaultValue 0 */
+    itemsBeforeCollapse?: number;
+    /** Accessible name for the More control.
+     *  @defaultValue 'Show more breadcrumbs' */
+    moreLabel?: string;
+} & ({
+    /** Button priority applied to every visible item and the More control.
+     *  @defaultValue quaternary */
+    priority?: 'quaternary';
+    /** Remove horizontal padding from every visible breadcrumb control. */
+    paddingless?: boolean;
+} | {
+    /** Button priority applied to every visible item and the More control. */
+    priority: 'tertiary';
+    paddingless?: never;
+}) & ({
+    underline?: never;
+    underlineOnHover?: never;
+} | {
+    /** Underline style applied to every visible breadcrumb control. */
+    underline: 'solid' | 'dashed' | 'dotted';
+    /** Hide the underline at rest and reveal it on hover. */
+    underlineOnHover?: boolean;
+});
+/**
+ * Breadcrumbs — hierarchy navigation assembled from Anta Buttons. Entries can
+ * be links, actions, or copy controls; an optional `maxItems` replaces one
+ * contiguous range with a More menu without measuring the available width.
+ *
+ * @example
+ * ```tsx
+ * <Breadcrumbs
+ *   maxItems={3}
+ *   items={[
+ *     { label: 'Home', href: '/' },
+ *     { label: 'Projects', href: '/projects' },
+ *     { label: 'Anta', href: '/projects/anta' },
+ *     { label: 'Button.tsx', current: true, copy: 'src/components/Button.tsx' },
+ *   ]}
+ * />
+ * ```
+ */
+export declare const Breadcrumbs: ({ items, priority, size, separator, maxItems, itemsBeforeCollapse, moreLabel, underline, underlineOnHover, paddingless, className, style, "aria-label": ariaLabel, ...rest }: BreadcrumbsProps) => any;
+export {};

package/dist/components/Breadcrumbs.js

@@ -0,0 +1,145 @@
+import { jsx } from "@antadesign/anta/jsx-runtime";
+import { Button } from "./Button";
+import { ButtonCopy } from "./ButtonCopy";
+import { Icon } from "./Icon";
+import { Menu } from "./Menu";
+import { MenuItem } from "./MenuItem";
+import { MenuItemCopy } from "./MenuItemCopy";
+import "./Breadcrumbs.css";
+const TEXT_SEPARATORS = /* @__PURE__ */ new Set(["\u2192", "/", "\u2022", "\u25B8"]);
+function isCopyItem(item) {
+  return "copy" in item || "copyNode" in item || "copyUrl" in item;
+}
+function buildEntries(items, maxItems, itemsBeforeCollapse) {
+  if (maxItems == null || !Number.isFinite(maxItems))
+    return items.map((item) => ({ kind: "item", item }));
+  const visibleCount = Math.max(1, Math.floor(maxItems));
+  if (items.length <= visibleCount) return items.map((item) => ({ kind: "item", item }));
+  const beforeCount = Math.min(
+    Math.max(0, Number.isFinite(itemsBeforeCollapse) ? Math.floor(itemsBeforeCollapse) : 0),
+    visibleCount - 1
+  );
+  const afterCount = visibleCount - beforeCount;
+  const hidden = items.slice(beforeCount, items.length - afterCount);
+  return [
+    ...items.slice(0, beforeCount).map((item) => ({ kind: "item", item })),
+    { kind: "overflow", items: hidden },
+    ...items.slice(items.length - afterCount).map((item) => ({ kind: "item", item }))
+  ];
+}
+function currentAttrs(item) {
+  return item.current ? { "aria-current": "page" } : {};
+}
+function renderButtonItem(item, priority, size, underline, underlineOnHover, paddingless, key) {
+  const { label, current, ...props } = item;
+  const a11y = currentAttrs(item);
+  if (isCopyItem(item)) {
+    const copyProps = {
+      ...props,
+      priority,
+      size,
+      underline,
+      underlineOnHover,
+      paddingless,
+      ...a11y
+    };
+    return /* @__PURE__ */ jsx(ButtonCopy, { ...copyProps, children: label }, key);
+  }
+  const buttonProps = {
+    ...props,
+    priority,
+    size,
+    underline,
+    underlineOnHover,
+    paddingless,
+    ...a11y
+  };
+  return /* @__PURE__ */ jsx(Button, { ...buttonProps, children: label }, key);
+}
+function renderMenuItem(item, key) {
+  const { label, current, onClick, ...props } = item;
+  const a11y = currentAttrs(item);
+  if (isCopyItem(item)) {
+    return /* @__PURE__ */ jsx(
+      MenuItemCopy,
+      {
+        ...props,
+        label,
+        onSelect: onClick,
+        ...a11y
+      },
+      key
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    MenuItem,
+    {
+      ...props,
+      label,
+      onSelect: onClick,
+      ...a11y
+    },
+    key
+  );
+}
+const Breadcrumbs = ({
+  items,
+  priority = "quaternary",
+  size = "medium",
+  separator = "chevron-right",
+  maxItems,
+  itemsBeforeCollapse = 0,
+  moreLabel = "Show more breadcrumbs",
+  underline,
+  underlineOnHover,
+  paddingless,
+  className,
+  style,
+  "aria-label": ariaLabel,
+  ...rest
+}) => {
+  const entries = buildEntries(items, maxItems, itemsBeforeCollapse);
+  const textSeparator = TEXT_SEPARATORS.has(separator);
+  const separatorNode = textSeparator ? separator : /* @__PURE__ */ jsx(Icon, { shape: separator });
+  return /* @__PURE__ */ jsx(
+    "a-breadcrumbs",
+    {
+      role: "navigation",
+      "aria-label": ariaLabel ?? "Breadcrumb",
+      "data-size": size === "medium" ? void 0 : size,
+      "data-paddingless": paddingless ? "" : void 0,
+      "data-separator-icon": textSeparator ? void 0 : "",
+      class: className,
+      style,
+      ...rest,
+      children: entries.flatMap((entry, index) => {
+        const nodes = entry.kind === "overflow" ? [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              ...{
+                priority,
+                size,
+                paddingless,
+                icon: "more",
+                "aria-label": moreLabel,
+                "aria-haspopup": "menu"
+              }
+            },
+            `more-${index}`
+          ),
+          /* @__PURE__ */ jsx(Menu, { autoWidth: true, children: entry.items.map((item, hiddenIndex) => renderMenuItem(item, hiddenIndex)) }, `menu-${index}`)
+        ] : [renderButtonItem(entry.item, priority, size, underline, underlineOnHover, paddingless, index)];
+        if (index < entries.length - 1) {
+          nodes.push(
+            /* @__PURE__ */ jsx("a-breadcrumb-separator", { "aria-hidden": "true", children: separatorNode }, `separator-${index}`)
+          );
+        }
+        return nodes;
+      })
+    }
+  );
+};
+export {
+  Breadcrumbs
+};

package/dist/components/Button.d.ts

@@ -94,6 +94,16 @@ export type SubmitMode = {
     /** Form id when the button isn't a descendant of its form. */
     form?: string;
 };
+/** Underline options shared by tertiary and quaternary buttons. */
+export type UnderlineMode = {
+    underline?: never;
+    underlineOnHover?: never;
+} | {
+    /** Underline style. */
+    underline: 'solid' | 'dashed' | 'dotted';
+    /** Hide the underline at rest and reveal it on hover. */
+    underlineOnHover?: boolean;
+};
 /** Priority axis — `underline` only on `tertiary` / `quaternary`,
  *  `paddingless` only on `quaternary`. */
 export type PriorityMode = {
@@ -101,16 +111,13 @@ export type PriorityMode = {
      *  @defaultValue secondary */
     priority?: 'primary' | 'secondary';
     underline?: never;
+    underlineOnHover?: never;
     paddingless?: never;
-} | {
+} | UnderlineMode & {
     priority: 'tertiary';
-    /** Underline style. */
-    underline?: 'solid' | 'dashed' | 'dotted';
     paddingless?: never;
-} | {
+} | UnderlineMode & {
     priority: 'quaternary';
-    /** Underline style. */
-    underline?: 'solid' | 'dashed' | 'dotted';
     /** Drops outer padding to zero. */
     paddingless?: boolean;
 };
@@ -135,4 +142,4 @@ export type ButtonProps = BaseButtonProps & PriorityMode & ContentMode & SubmitM
  * <Button href="/docs" target="_blank" label="Read the docs" />
  * ```
  */
-export declare const Button: ({ priority, tone, underline, icon, iconTrailing, paddingless, label, size, loading, disabled, selected, round, onClick, href, target, rel, download, ping, type, form, className, style, children, ...rest }: ButtonProps) => any;
+export declare const Button: ({ priority, tone, underline, underlineOnHover, icon, iconTrailing, paddingless, label, size, loading, disabled, selected, round, onClick, href, target, rel, download, ping, type, form, className, style, children, ...rest }: ButtonProps) => any;

package/dist/components/Button.js

@@ -4,6 +4,7 @@ const Button = ({
   priority,
   tone,
   underline,
+  underlineOnHover,
   icon,
   iconTrailing,
   paddingless,
@@ -40,6 +41,7 @@ const Button = ({
     priority,
     tone: toneAttr,
     underline,
+    "underline-on-hover": underlineOnHover ? "" : void 0,
     // 'medium' (and unset) is the implicit default — emit no DOM attr.
     size: size && size !== "medium" ? size : void 0,
     // Boolean attributes: emit a presence attribute (empty string) when on,

package/dist/components/Input.d.ts

@@ -88,6 +88,8 @@ export interface InputProps extends BaseProps, DOMEventHandlers {
     autoComplete?: 'off' | 'on' | 'name' | 'username' | 'email' | 'current-password' | 'new-password' | 'one-time-code' | 'tel' | 'url' | (string & {});
     /** Virtual-keyboard hint. Overrides the value derived from `type`. */
     inputMode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
+    /** Focus this field when its containing `Dialog` opens. */
+    autoFocus?: boolean;
     /** Form field name — submitted with the form via ElementInternals. */
     name?: string;
     /** Placeholder shown when empty. */
@@ -171,4 +173,4 @@ export interface InputProps extends BaseProps, DOMEventHandlers {
  * <Input label="Email" type="email" placeholder="you@example.com" clearable />
  * ```
  */
-export declare const Input: ({ label, hint, status, statusIcon, tone, size, round, value, defaultValue, multiline, rows, maxRows, clearable, leading, trailing, type, autoComplete, inputMode, name, placeholder, truncate, disabled, readOnly, required, dimActions, spellCheck, maxLength, minLength, pattern, min, max, step, onInput, onChange, onValueChange, onClearClick, onClearInput, children, className, style, ...rest }: InputProps) => any;
+export declare const Input: ({ label, hint, status, statusIcon, tone, size, round, value, defaultValue, multiline, rows, maxRows, clearable, leading, trailing, type, autoComplete, inputMode, autoFocus, name, placeholder, truncate, disabled, readOnly, required, dimActions, spellCheck, maxLength, minLength, pattern, min, max, step, onInput, onChange, onValueChange, onClearClick, onClearInput, children, className, style, ...rest }: InputProps) => any;

package/dist/components/Input.js

@@ -49,6 +49,7 @@ const Input = ({
   type,
   autoComplete,
   inputMode,
+  autoFocus,
   name,
   placeholder,
   truncate = true,
@@ -101,6 +102,7 @@ const Input = ({
       "dim-actions": presence(dimActions),
       autocomplete: autoComplete ?? (!multiline && rows == null && type ? AUTOCOMPLETE_BY_TYPE[type] : void 0),
       inputmode: inputMode ?? (!multiline && rows == null && type ? INPUTMODE_BY_TYPE[type] : void 0),
+      autofocus: autoFocus ? true : void 0,
       spellcheck: spellCheck != null ? spellCheck ? "true" : "false" : void 0,
       maxlength: maxLength != null ? String(maxLength) : void 0,
       minlength: minLength != null ? String(minLength) : void 0,

package/dist/components/InputTime.d.ts

@@ -70,6 +70,8 @@ export interface InputTimeProps extends BaseProps, DOMEventHandlers {
     trailing?: React.ReactNode;
     /** Fully-round the field, or a custom radius (`number` px / CSS length). */
     round?: boolean | number | string;
+    /** Focus this field when its containing `Dialog` opens. */
+    autoFocus?: boolean;
     /** Fires on every edit (`input`), with the native event + an `attrs` snapshot
      *  (`value`, `name`, `empty`, `valid`, `validationMessage`). Also fires on
      *  `change` (blur) and on clear. */
@@ -103,4 +105,4 @@ export interface InputTimeProps extends BaseProps, DOMEventHandlers {
  * <InputTime label="Start" defaultValue="09:30" onValueChange={(_, { value }) => save(value)} />
  * ```
  */
-export declare const InputTime: ({ label, hint, status, statusIcon, tone, size, round, value, defaultValue, locale, hour12, min, max, name, disabled, required, icon, clearable, dimActions, trailing, onValueChange, onClearInput, children, className, style, ...rest }: InputTimeProps) => any;
+export declare const InputTime: ({ label, hint, status, statusIcon, tone, size, round, value, defaultValue, locale, hour12, min, max, name, disabled, required, icon, clearable, dimActions, trailing, autoFocus, onValueChange, onClearInput, children, className, style, ...rest }: InputTimeProps) => any;

package/dist/components/InputTime.js

@@ -43,6 +43,7 @@ const InputTime = ({
   clearable,
   dimActions,
   trailing,
+  autoFocus,
   onValueChange,
   onClearInput,
   children,
@@ -69,6 +70,7 @@ const InputTime = ({
       disabled: presence(disabled),
       required: presence(required),
       "dim-actions": presence(dimActions),
+      autofocus: autoFocus ? true : void 0,
       "aria-invalid": status === "critical" ? "true" : void 0,
       oninput: onValueChange ? (e) => onValueChange(e, attrsOf(e)) : void 0,
       onchange: onValueChange ? (e) => onValueChange(e, attrsOf(e)) : void 0,

package/dist/components/Loader.d.ts

@@ -1,5 +1,9 @@
 import type { BaseProps } from '../general_types';
+/** Named Anta color tone for a loader. */
+export type LoaderTone = 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical';
 export interface LoaderProps extends BaseProps {
+    /** Color tone for the loader. Omit it to use the standard text-3 color. */
+    tone?: LoaderTone;
     /** Current progress value. Omit this prop, or pass `false`, for an
      * indeterminate rotating gradient. */
     value?: number | false;
@@ -36,4 +40,4 @@ export interface LoaderProps extends BaseProps {
  * <Loader value={42} label="Uploading files" />
  * ```
  */
-export declare const Loader: ({ value, max, size, speed, label, className, style, ...rest }: LoaderProps) => any;
+export declare const Loader: ({ tone, value, max, size, speed, label, className, style, ...rest }: LoaderProps) => any;

package/dist/components/Loader.js

@@ -1,5 +1,5 @@
 import { jsx } from "@antadesign/anta/jsx-runtime";
-const Loader = ({ value, max = 100, size, speed, label, className, style, ...rest }) => {
+const Loader = ({ tone, value, max = 100, size, speed, label, className, style, ...rest }) => {
   const determinate = typeof value === "number" && Number.isFinite(value);
   const safeMax = Number.isFinite(max) && max > 0 ? max : 100;
   const clampedValue = determinate ? Math.min(safeMax, Math.max(0, value)) : void 0;
@@ -20,6 +20,7 @@ const Loader = ({ value, max = 100, size, speed, label, className, style, ...res
   return /* @__PURE__ */ jsx(
     "a-loader",
     {
+      tone,
       ...determinate ? { value: clampedValue } : {},
       class: className,
       style: computedStyle,

package/dist/components/MenuItemCopy.d.ts

@@ -11,7 +11,17 @@ export type MenuItemCopyProps = MenuItemCommonProps & MenuItemActionMode & {
     selectionIndicator?: never;
     indeterminate?: never;
     indicator?: never;
-} & CopyTarget;
+    iconTrailing?: never;
+} & CopyTarget & {
+    /** Where the copy glyph sits relative to the label — or `'none'` to omit it.
+     *  Without a glyph, a successful copy shows a confirmation label near the
+     *  pointer and leaves the row unchanged.
+     *  @defaultValue 'leading' */
+    iconPlacement?: 'leading' | 'trailing' | 'none';
+    /** Text in the successful no-icon confirmation.
+     *  @defaultValue Copied */
+    copiedLabel?: string;
+};
 /**
  * Copying menu item — a `MenuItem` preset for copy-to-clipboard rows inside a
  * `Menu`. Set `copy` for a literal string, `copyNode` to copy a DOM region, or
@@ -24,7 +34,8 @@ export type MenuItemCopyProps = MenuItemCommonProps & MenuItemActionMode & {
  * flips the leading icon to a check / ✕ and retones for ~2s (see `useCopyFeedback`).
  *
  * Defaults `label` to "Copy" and the leading `icon` to `copy`; override either.
- * Other props pass through — `tone`, `kbd`, `onCopied`.
+ * `iconPlacement` moves that glyph to the trailing edge or omits it. Other props
+ * pass through — `tone`, `kbd`, `onCopied`.
  *
  * @example
  * ```tsx
@@ -34,4 +45,4 @@ export type MenuItemCopyProps = MenuItemCommonProps & MenuItemActionMode & {
  * </Menu>
  * ```
  */
-export declare const MenuItemCopy: ({ label, icon, tone, onCopied, onCopyRequest, copy, copyNode, copyUrl, copyWithUrl, children, ...rest }: MenuItemCopyProps) => any;
+export declare const MenuItemCopy: ({ label, icon, iconPlacement, copiedLabel, tone, onCopied, onCopyRequest, copy, copyNode, copyUrl, copyWithUrl, children, ...rest }: MenuItemCopyProps) => any;

package/dist/components/MenuItemCopy.js

@@ -5,6 +5,8 @@ import { copyElementProps, isNodeCopy } from "./copy-props";
 const MenuItemCopy = ({
   label = "Copy",
   icon = "copy",
+  iconPlacement = "leading",
+  copiedLabel,
   tone,
   onCopied,
   onCopyRequest,
@@ -15,21 +17,25 @@ const MenuItemCopy = ({
   children,
   ...rest
 }) => {
-  const { shownIcon, shownTone, handleCopied } = useCopyFeedback(icon, tone, onCopied);
+  const restingIcon = iconPlacement === "none" ? void 0 : icon;
+  const { shownIcon, shownTone, handleCopied } = useCopyFeedback(restingIcon, tone, onCopied);
+  const iconSlot = iconPlacement === "trailing" ? { iconTrailing: shownIcon } : iconPlacement === "none" ? {} : { icon: shownIcon };
   const copyAttrs = copyElementProps({
     copy,
     copyNode,
     copyUrl,
     copyWithUrl,
     onCopyRequest,
-    onCopied: handleCopied
+    onCopied: handleCopied,
+    toast: iconPlacement === "none",
+    copiedLabel
   });
   return /* @__PURE__ */ jsxs(
     MenuItem,
     {
       label,
-      icon: shownIcon,
       tone: shownTone,
+      ...iconSlot,
       "data-menu-open": "",
       "data-copy-node-button": isNodeCopy({ copyNode }) ? "" : void 0,
       ...rest,

package/dist/components/Slider.d.ts

@@ -52,7 +52,7 @@ export interface SliderProps extends BaseProps, DOMEventHandlers {
     trackSize?: number | string;
     /** Diameter of the thumb. Numbers use pixels; strings are CSS lengths. Keep
      * it at least as large as `trackSize`.
-     * @defaultValue 18 */
+     * @defaultValue 16 */
     thumbSize?: number | string;
     /** Fill the thumb with its resolved border color. This follows `thumbTone`
      * and interactive states.

package/dist/components/Steps.css

@@ -0,0 +1 @@
+@layer anta{a-steps{--steps-marker-size: 28px;--steps-icon-size: 16px;--steps-marker-border-width: 1.5px;--steps-marker-rest-border: var(--border-4);--steps-item-gap: 6px;--steps-gap: 4px;--steps-connector-color: var(--border-3);--steps-connector-width: 1px;--steps-complete-connector-color: var(--border-2);--steps-tab-padding-x: 9px;--steps-tab-padding-block: 0px;--steps-hint-leading: 16px;display:flex;flex-direction:column;width:100%;min-width:0}a-steps:has(>a-tabs[size=small]){--steps-marker-size: 24px;--steps-icon-size: 14px;--steps-tab-padding-x: 7px;--steps-hint-leading: 14px}a-steps:has(>a-tabs[size=large]){--steps-marker-size: 32px;--steps-icon-size: 18px;--steps-tab-padding-x: 13px;--steps-hint-leading: 20px}a-tabs[data-steps]{--steps-marker-active-border: var(--border-1);--steps-primary-marker-lightness: .5;--steps-primary-marker-chroma: .02;--steps-primary-marker-fg: #ffffff;--tabs-gap: 0px;align-items:center;width:fit-content;align-self:flex-start;overflow-x:auto;scrollbar-width:thin}a-tabs[data-steps][fill]{width:100%;align-self:stretch;justify-content:space-between}a-tabs[data-steps]>a-tab[tone=brand]{--steps-marker-active-border: var(--border-1-brand)}a-tabs[data-steps]>a-tab[tone=info]{--steps-marker-active-border: var(--border-1-info)}a-tabs[data-steps]>a-tab[tone=success]{--steps-marker-active-border: var(--border-1-success)}a-tabs[data-steps]>a-tab[tone=warning]{--steps-marker-active-border: var(--border-1-warning)}a-tabs[data-steps]>a-tab[tone=critical]{--steps-marker-active-border: var(--border-1-critical)}a-tabs[data-steps]>a-tab[tone=neutral]{--steps-marker-active-border: var(--border-1)}a-tabs[data-steps]>a-tab[tone]:not([tone=""],[tone=neutral]){--steps-primary-marker-chroma: .17}.dark a-tabs[data-steps]{--steps-primary-marker-lightness: .4;--steps-primary-marker-chroma: .015}.dark a-tabs[data-steps]>a-tab[tone]:not([tone=""],[tone=neutral]){--steps-primary-marker-chroma: .16}a-tabs[data-steps]:not([priority=secondary],[priority=tertiary]){--steps-marker-border-width: 2px;--steps-marker-rest-border: var(--border-3);--steps-connector-color: var(--border-3);--steps-connector-width: 2px}a-tabs[data-steps][priority=tertiary]{--steps-marker-size: calc(var(--steps-icon-size) + 4px);--steps-marker-border-width: 0px}a-steps>a-tabs[data-steps]{background:transparent;border-radius:0;box-shadow:none}a-tabs[data-steps]>a-tab{--steps-complete-connector-color: var(--tab-selected-border);--steps-primary-marker-bg: oklch( from var(--tabs-tone-source) var(--steps-primary-marker-lightness) var(--steps-primary-marker-chroma) h );--steps-primary-completed-marker-bg: color-mix( in oklch, var(--steps-primary-marker-bg) 80%, transparent );position:relative;flex:1 1 0;min-width:0;max-width:max-content;padding-block:0;justify-content:flex-start;gap:var(--steps-item-gap);transition:color var(--tab-timing),background-color var(--tab-timing),box-shadow var(--tab-timing)}a-steps[data-orientation=vertical]:has(>a-tabs[data-steps]>a-tab:state(selected)[tone=brand]){--steps-complete-connector-color: var(--border-2-brand)}a-steps[data-orientation=vertical]:has(>a-tabs[data-steps]>a-tab:state(selected)[tone=info]){--steps-complete-connector-color: var(--border-2-info)}a-steps[data-orientation=vertical]:has(>a-tabs[data-steps]>a-tab:state(selected)[tone=success]){--steps-complete-connector-color: var(--border-2-success)}a-steps[data-orientation=vertical]:has(>a-tabs[data-steps]>a-tab:state(selected)[tone=warning]){--steps-complete-connector-color: var(--border-2-warning)}a-steps[data-orientation=vertical]:has(>a-tabs[data-steps]>a-tab:state(selected)[tone=critical]){--steps-complete-connector-color: var(--border-2-critical)}a-tabs[data-steps]:not([orientation=vertical])>a-tab:first-child{padding-inline-start:0}a-steps>a-tabs[data-steps][fill]>a-tab:not(:last-child){flex:1 1 0;max-width:none}a-steps>a-tabs[data-steps][fill]>a-tab:last-child{flex:0 1 auto;max-width:max-content}a-steps>a-tabs[data-steps]>a-tab:state(selected){--tab-bg: transparent;box-shadow:none}a-steps>a-tabs[data-steps][priority=tertiary]>a-tab:after{border:0}a-step-desc{display:inline-flex;flex:0 1 auto;flex-direction:column;min-width:0;max-width:100%}a-step-desc>a-tab-label{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}a-step-hint{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--tab-rest-tone, var(--text-3));font-size:calc(1em - 2px);font-weight:400;line-height:var(--steps-hint-leading)}a-step-marker{display:inline-flex;flex:none;align-items:center;justify-content:center;width:var(--steps-marker-size);height:var(--steps-marker-size);box-sizing:border-box;color:var(--text-4);border:var(--steps-marker-border-width) solid var(--steps-marker-rest-border);border-radius:999px;transition:color var(--tab-timing),background-color var(--tab-timing),border-color var(--tab-timing)}a-tabs[data-steps] a-step-marker :is(a-icon,a-loader){--icon-size: var(--steps-icon-size)}a-tabs[data-steps]>a-tab[tone]{--tab-secondary-bg: oklch( from var(--tabs-tone-source) var(--_track-l) var(--_track-c) h / var(--_sec-a) )}a-tabs[data-steps]>a-tab[tone] a-step-marker{color:var(--tab-selected-text)}a-tabs[data-steps]>a-tab:is(:state(selected),[data-step-state=completed]) a-step-marker{border-color:var(--steps-marker-active-border)}a-tabs[data-steps]>a-tab[data-step-state=error]:not(:state(selected)):not([disabled]) a-step-marker{border-color:var(--border-2-critical)}a-tabs[data-steps]:is([priority=secondary],[priority=tertiary])>a-tab[tone]:not([tone=""],[tone=neutral]) a-step-marker{color:var(--tab-fg)}a-tabs[data-steps][priority=secondary] a-tab:state(selected):not([disabled]) a-step-marker{color:var(--tab-selected-text);background-color:var(--tab-secondary-bg);border-color:var(--steps-marker-active-border)}a-tabs[data-steps]:not([priority=secondary],[priority=tertiary]) a-tab:state(selected):not([disabled]) a-step-marker{color:var(--steps-primary-marker-fg);background-color:var(--steps-primary-marker-bg);border-color:var(--steps-primary-marker-bg)}a-tabs[data-steps]:not([priority=secondary],[priority=tertiary]) a-tab[data-step-state=completed]:not(:state(selected)):not([disabled]) a-step-marker{color:var(--steps-primary-marker-fg);background-color:var(--steps-primary-completed-marker-bg);border-color:transparent}a-tabs[data-steps][priority=tertiary] a-tab:state(selected):not([disabled]) a-step-marker{color:var(--tab-selected-text);background-color:transparent;border-color:transparent}a-tabs[data-steps] a-step-marker>a-loader{transition:color var(--tab-timing)}a-tabs[data-steps]:is([priority=secondary],[priority=tertiary]) a-step-marker>a-loader:not([tone=neutral]){color:inherit}a-tabs[data-steps] a-tab:state(selected):not([disabled]) a-step-marker>a-loader{color:inherit}a-tabs[data-steps]:not([orientation=vertical])>a-tab:not(:last-child):before{content:"";order:3;flex:1 1 auto;align-self:center;min-width:calc(var(--steps-marker-size) / 2);height:var(--steps-connector-width);margin-inline-start:calc(1ch - var(--steps-item-gap));margin-inline-end:calc(1ch - 2 * var(--steps-tab-padding-x));background:var(--steps-connector-color);pointer-events:none}a-tabs[data-steps]:not([orientation=vertical])>a-tab[data-step-state=completed]:not(:last-child):before{background:var(--steps-complete-connector-color)}a-tabs[data-steps] a-tab[disabled]{--tab-fg: var(--text-5);opacity:1}a-tabs[data-steps] a-tab[disabled] a-step-marker,a-tabs[data-steps] a-tab[disabled] a-step-marker>a-loader{color:var(--text-5)}a-tabs[data-steps] a-tab[disabled] a-step-hint{color:var(--text-5)}a-steps[data-orientation=vertical]{--steps-content-indent: calc( var(--steps-marker-size) + var(--steps-item-gap) );--steps-vertical-gap: calc(var(--steps-gap) + 4px);display:grid;grid-template-columns:minmax(0,1fr);row-gap:var(--steps-vertical-gap)}a-steps[data-orientation=vertical]>a-tabs[orientation=vertical]{display:contents}a-steps[data-orientation=vertical]>a-tabs[orientation=vertical]>a-tab{flex:none;min-width:0;grid-column:1;width:max-content;max-width:100%;padding-inline-start:0}a-steps[data-orientation=vertical] a-tab:not(:last-child):before{content:"";position:absolute;inset-block-start:calc(var(--steps-tab-padding-block) + var(--steps-marker-size));inset-inline-start:calc(var(--steps-marker-size) / 2 - var(--steps-connector-width) / 2);inset-inline-end:auto;width:var(--steps-connector-width);height:calc(100% - var(--steps-marker-size) + var(--steps-vertical-gap));background:var(--steps-connector-color);transform:none;pointer-events:none}a-steps[data-orientation=vertical]>a-tabpanel{grid-column:1;grid-row:var(--steps-panel-row);width:calc(100% - var(--steps-content-indent));margin-inline-start:var(--steps-content-indent)}a-steps[data-orientation=vertical]:has(>a-tabpanel):has(>a-tabs[orientation=vertical]>a-tab:state(selected):not(:last-child)):after{content:"";grid-column:1;grid-row:var(--steps-panel-row);align-self:stretch;justify-self:start;width:var(--steps-connector-width);min-height:var(--steps-marker-size);margin-inline-start:calc(var(--steps-marker-size) / 2 - var(--steps-connector-width) / 2);margin-block-end:calc(-1 * var(--steps-vertical-gap));background:var(--steps-connector-color);pointer-events:none;z-index:1}a-steps[data-orientation=vertical]>a-tabs[data-steps]>a-tab[data-step-state=completed]:not(:last-child):before{background:var(--steps-complete-connector-color)}a-steps[data-orientation=vertical]:has(>a-tabpanel):has(>a-tabs[data-steps][orientation=vertical]>a-tab[data-step-state=completed]:state(selected):not(:last-child)):after{background:var(--steps-complete-connector-color)}@media(forced-colors:active){a-tabs[data-steps][priority=secondary] a-tab:state(selected){background-color:transparent;border:0;box-shadow:none}a-step-marker{color:CanvasText;background-color:Canvas;border-color:CanvasText}a-tabs[data-steps] a-tab:state(selected):not([disabled]) a-step-marker{border-color:Highlight}}}