@antadesign/anta 0.3.21 → 0.3.23

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/Button.d.ts

@@ -135,4 +135,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, href, target, rel, download, ping, type, form, className, style, children, ...rest }: ButtonProps) => any;
+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;

package/dist/components/Button.js

@@ -13,6 +13,7 @@ const Button = ({
   disabled,
   selected,
   round,
+  onClick,
   href,
   target,
   rel,
@@ -26,6 +27,7 @@ const Button = ({
   ...rest
 }) => {
   const toneAttr = tone || void 0;
+  const unavailable = disabled || loading;
   const computedStyle = roundStyle(round, "--button-round", toneStyle(toneAttr, "--button-tone-source", style));
   const isIconOnly = icon != null && label == null && children == null && iconTrailing == null;
   const sharedAttrs = {
@@ -53,8 +55,8 @@ const Button = ({
     // Disabled AND loading both leave the keyboard tab order — a loading
     // button blocks the mouse (pointer-events), so it must block Enter/Space
     // activation too, else the loading guard would be mouse-only.
-    tabIndex: disabled || loading ? -1 : 0,
-    "aria-disabled": disabled || loading ? "true" : void 0,
+    tabIndex: unavailable ? -1 : 0,
+    "aria-disabled": unavailable ? "true" : void 0,
     "aria-busy": loading ? "true" : void 0,
     "aria-pressed": selected ? "true" : void 0,
     // Icon-only buttons get an accessible name from the icon shape. Consumer's
@@ -62,7 +64,8 @@ const Button = ({
     // ButtonCopy uses to name an icon-only copy button "Copy".
     "aria-label": isIconOnly ? icon : void 0,
     class: className,
-    style: computedStyle
+    style: computedStyle,
+    onClick: unavailable ? void 0 : onClick
   };
   const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
     icon && /* @__PURE__ */ jsx("a-icon", { shape: icon, "aria-hidden": "true" }),
@@ -71,16 +74,20 @@ const Button = ({
     iconTrailing && /* @__PURE__ */ jsx("a-icon", { shape: iconTrailing, "aria-hidden": "true" })
   ] });
   if (href != null) {
+    const anchorAttrs = {
+      ...sharedAttrs,
+      disabled: unavailable || void 0
+    };
     return /* @__PURE__ */ jsx(
       "a",
       {
-        href,
+        href: unavailable ? void 0 : href,
         "data-anta": "",
         target,
         rel,
         download,
         ping,
-        ...sharedAttrs,
+        ...anchorAttrs,
         ...rest,
         children: inner
       }

package/dist/components/Checkbox.js

@@ -33,7 +33,11 @@ const Checkbox = ({
     toneStyle(
       toneSelected,
       "--checkbox-tone-source",
-      toneStyle(tone, "--checkbox-tone-source", style)
+      toneStyle(
+        tone,
+        "--checkbox-off-tone-source",
+        toneSelected == null ? toneStyle(tone, "--checkbox-tone-source", style) : style
+      )
     )
   );
   const explicitAriaLabel = rest["aria-label"];
@@ -64,7 +68,7 @@ const Checkbox = ({
       "default-state": defaultStateAttr,
       disabled: disabled ? "" : void 0,
       tone: tone && tone !== "neutral" ? tone : void 0,
-      "tone-selected": toneSelected && toneSelected !== "neutral" ? toneSelected : void 0,
+      "tone-selected": toneSelected || void 0,
       size: size && size !== "medium" ? size : void 0,
       round: roundAttr(round),
       tabIndex: disabled ? -1 : tabIndex ?? 0,

package/dist/components/Input.d.ts

@@ -93,7 +93,8 @@ export interface InputProps extends BaseProps, DOMEventHandlers {
     /** Placeholder shown when empty. */
     placeholder?: string;
     /** Ellipsize an overflowing single-line value. Read-only inputs already do
-     * this; use `truncate` when an editable field should keep the same treatment. */
+     * this; pass `false` when an editable field should show the full value.
+     * @defaultValue true */
     truncate?: boolean;
     /** Disable the field. */
     disabled?: boolean;

package/dist/components/Input.js

@@ -51,7 +51,7 @@ const Input = ({
   inputMode,
   name,
   placeholder,
-  truncate,
+  truncate = true,
   disabled,
   readOnly,
   required,

package/dist/components/InputDate.js

@@ -129,6 +129,7 @@ const InputDate = ({
         placeholder: pattern,
         inputMode: time ? "text" : "numeric",
         autoComplete: "off",
+        role: "combobox",
         "aria-haspopup": "dialog",
         "aria-expanded": open ? "true" : "false",
         onInput: (e) => {

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/Menu.d.ts

@@ -43,6 +43,11 @@ export interface MenuProps extends BaseProps {
      *  fully round. A `number` (px) or CSS length string tunes the container radius
      *  only — items stay full pills. */
     round?: boolean | number | string;
+    /** Contain events so they don't bubble out of the menu to ancestor handlers
+     *  (e.g. a clickable row the menu sits in). Selecting an item is always
+     *  contained; this extends it to whole event types. `true` contains `click`;
+     *  pass an event name or list (`"click pointerdown"`) to contain those. */
+    stopPropagation?: boolean | string | string[];
     /** Fired before the open state changes — on open, and on every dismiss (Esc,
      *  outside-click, scroll, selecting an item). `event` is the cancelable
      *  `statechange`; `detail.next`/`detail.prev` are the requested/previous open
@@ -96,4 +101,4 @@ export interface MenuProps extends BaseProps {
  * </Menu>
  * ```
  */
-export declare const Menu: ({ placement, context, coord, nohover, offset, autoWidth, inset, open, onStateChange, round, role, className, style, children, ...rest }: MenuProps) => any;
+export declare const Menu: ({ placement, context, coord, nohover, offset, autoWidth, inset, open, onStateChange, round, stopPropagation, role, className, style, children, ...rest }: MenuProps) => any;

package/dist/components/Menu.js

@@ -11,6 +11,7 @@ const Menu = ({
   open,
   onStateChange,
   round,
+  stopPropagation,
   role = "menu",
   className,
   style,
@@ -36,6 +37,7 @@ const Menu = ({
           });
       } : void 0,
       round: roundAttr(round),
+      "stop-propagation": stopPropagation === void 0 || stopPropagation === false ? void 0 : stopPropagation === true ? "" : Array.isArray(stopPropagation) ? stopPropagation.join(" ") : stopPropagation,
       role,
       "aria-orientation": "vertical",
       class: className,

package/dist/components/RadioGroup.js

@@ -64,7 +64,7 @@ const RadioGroup = ({
       name,
       status: status && status !== "neutral" ? status : void 0,
       tone: tone && tone !== "neutral" ? tone : void 0,
-      "tone-selected": toneSelected && toneSelected !== "neutral" ? toneSelected : void 0,
+      "tone-selected": toneSelected || void 0,
       size: size && size !== "medium" ? size : void 0,
       disabled: disabled ? "" : void 0,
       orientation: orientation && orientation !== "vertical" ? orientation : void 0,
@@ -73,7 +73,15 @@ const RadioGroup = ({
       onfocusin: onFocus,
       onfocusout: onBlur,
       class: className,
-      style: toneStyle(toneSelected, "--radio-tone-source", toneStyle(tone, "--radio-tone-source", style)),
+      style: toneStyle(
+        toneSelected,
+        "--radio-tone-source",
+        toneStyle(
+          tone,
+          "--radio-off-tone-source",
+          toneSelected == null ? toneStyle(tone, "--radio-tone-source", style) : style
+        )
+      ),
       children: [
         label && /* @__PURE__ */ jsx("a-radio-group-label", { id: labelId, children: label }),
         hint && /* @__PURE__ */ jsx("a-radio-group-hint", { id: hintId, children: hint }),
@@ -88,12 +96,20 @@ const RadioGroup = ({
               value: o.value,
               "aria-disabled": optDisabled ? "true" : void 0,
               tabIndex: o.value === tabStopValue ? 0 : -1,
-              tone: o.tone && o.tone !== "neutral" ? o.tone : void 0,
-              "tone-selected": o.toneSelected && o.toneSelected !== "neutral" ? o.toneSelected : void 0,
+              tone: o.tone || void 0,
+              "tone-selected": o.toneSelected || void 0,
               size: o.size && o.size !== "medium" ? o.size : void 0,
               disabled: o.disabled ? "" : void 0,
               class: optionClassName,
-              style: toneStyle(o.toneSelected, "--radio-tone-source", toneStyle(o.tone, "--radio-tone-source", optionStyle)),
+              style: toneStyle(
+                o.toneSelected,
+                "--radio-tone-source",
+                toneStyle(
+                  o.tone,
+                  "--radio-off-tone-source",
+                  o.toneSelected == null ? toneStyle(o.tone, "--radio-tone-source", optionStyle) : optionStyle
+                )
+              ),
               children: [
                 /* @__PURE__ */ jsx("a-radio-label", { children: o.label }),
                 o.hint != null && /* @__PURE__ */ jsx("a-radio-hint", { children: o.hint })

package/dist/components/Select.d.ts

@@ -248,7 +248,9 @@ export interface SelectCommonProps<V extends OptionValue = string> extends Omit<
      *  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.
+     *  `aria-haspopup="menu"` and `aria-expanded={state.open}` to the element, on a
+     *  role that supports them (an Anta `Button` already carries `role="button"`;
+     *  otherwise add `role="combobox"`).
      *  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. */

package/dist/components/Select.js

@@ -270,6 +270,7 @@ const Select = (props) => {
         status,
         statusIcon,
         round,
+        role: "combobox",
         "aria-haspopup": "menu",
         "aria-expanded": open ? "true" : "false",
         trailing: (

package/dist/components/SelectFaceted.d.ts

@@ -165,8 +165,10 @@ export interface SelectFacetedProps extends Omit<BaseProps, 'children'> {
      *  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. */
+     *  element, on a role that supports them (an Anta `Button` already carries
+     *  `role="button"`; otherwise add `role="combobox"`). `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;
 }
 /**

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}}}

package/dist/components/Steps.d.ts

@@ -0,0 +1,93 @@
+import type { IconShape } from "../elements/a-icon.shapes";
+import type { OptionPresentationProps } from "../general_types";
+import type { TabsProps } from "./Tabs";
+import "./Steps.css";
+/** Named Anta tone used by Steps. */
+export type StepTone = "neutral" | "brand" | "info" | "success" | "warning" | "critical";
+/** Process state shown by one step. */
+export type StepState = "incomplete" | "loading" | "completed" | "error";
+/** Visual emphasis for the step markers and completed connectors. */
+export type StepPriority = "primary" | "secondary" | "tertiary";
+/** A static step marker: a number or any registered Anta icon shape. */
+export type StepMarker = number | IconShape;
+/** Snapshot passed to `renderMarker` for a step. */
+export interface StepMarkerState {
+    /** This step's application-owned process state. */
+    state: StepState;
+    /** Whether this step is the selected tab. */
+    selected: boolean;
+    /** Whether this step cannot be selected. */
+    disabled: boolean;
+}
+/** One phase rendered by `<Steps>`. Inherited `className` and `style` land on
+ * the individual `<a-tab>`, not on the enclosing Steps sequence. */
+export interface StepOption extends OptionPresentationProps {
+    /** Stable phase identity. Values must be unique within the sequence. */
+    value: string;
+    /** Visible phase label. It ellipsizes in a constrained step; its full content
+     * is available in a tooltip only when clipped. */
+    label: React.ReactNode;
+    /** Secondary text shown below the label. It ellipsizes in a constrained step;
+     * its full content is available in a tooltip only when clipped. */
+    hint?: React.ReactNode;
+    /** Application-owned process state. Selection and availability are separate;
+     * `error` keeps a critical icon and outline, and selection adds the fill. */
+    state: StepState;
+    /** Tone for this phase. It colors the label, hint, marker, and completed
+     * connector. Overrides the Steps `tone`; error steps stay critical and
+     * disabled steps stay neutral.
+     * @defaultValue inherits Steps `tone` */
+    tone?: StepTone | "";
+    /** Replaces the marker derived from `state`. A number is shown directly; an
+     * Anta icon shape is rendered as an `<Icon>`. */
+    marker?: StepMarker;
+    /** Disables this phase. A custom `marker` or `renderMarker` result is kept;
+     * otherwise it uses the incomplete marker. */
+    disabled?: boolean;
+}
+/** Public props for `<Steps>`. Selection, panels, events, orientation, size,
+ * and disabled behavior match `<Tabs>`. */
+export interface StepsProps extends Omit<TabsProps, "options" | "priority" | "tone" | "noslide" | "round"> {
+    /** Ordered process phases. */
+    options: StepOption[];
+    /** Visual emphasis. Primary uses a solid selected marker and a stronger
+     * completed connector; secondary is the outlined default; tertiary is compact
+     * and borderless.
+     * @defaultValue 'secondary' */
+    priority?: StepPriority;
+    /** Tone applied to every step without its own `tone`. Error steps stay
+     * critical and disabled steps stay neutral.
+     * @defaultValue 'neutral' */
+    tone?: StepTone | "";
+    /** Builds a custom marker from a step and its current state. A returned node
+     * replaces `marker` and the built-in state marker; return `undefined` to use
+     * those fallbacks, or `null` for an empty ring. */
+    renderMarker?: (option: StepOption, state: StepMarkerState) => React.ReactNode;
+}
+/**
+ * A process stepper that switches tab-like content.
+ *
+ * The application owns phase states and transitions. `Steps` owns the tab
+ * interaction pattern, state presentation, and optional panels. Compose
+ * application-owned navigation controls beside it when the flow needs actions
+ * such as Back or Continue.
+ *
+ * It supports controlled (`value`) and uncontrolled (`defaultValue`) selection.
+ * When neither is supplied, the first option is selected. Explicitly disabled
+ * phases cannot be activated. Arrow-key behavior, panel pairing,
+ * duplicate-value warnings, and change events match `<Tabs>`.
+ *
+ * @example
+ * ```tsx
+ * <Steps
+ *   defaultValue="setup"
+ *   label="Setup progress"
+ *   options={[
+ *     { value: "build", label: "Build", state: "completed" },
+ *     { value: "setup", label: "Setup", state: "loading" },
+ *     { value: "next", label: "Next steps", state: "incomplete", disabled: true },
+ *   ]}
+ * />
+ * ```
+ */
+export declare const Steps: ({ options, value, defaultValue, onStateChange, onChange, onValueChange, onFocus, onBlur, label, priority, tone, renderMarker, size, orientation, fill, disabled, children, className, style, id, ...rest }: StepsProps) => any;

package/dist/components/Steps.js

@@ -0,0 +1,128 @@
+import { Fragment, jsx, jsxs } from "@antadesign/anta/jsx-runtime";
+import { optionPresentationAttrs } from "../anta_helpers";
+import { useState } from "../jsx-runtime";
+import { Icon } from "./Icon";
+import { Loader } from "./Loader";
+import { Tabs } from "./Tabs";
+import "./Steps.css";
+const STATE_ICON = {
+  incomplete: "circle-large",
+  completed: "check",
+  error: "x"
+};
+const Steps = ({
+  options,
+  value,
+  defaultValue,
+  onStateChange,
+  onChange,
+  onValueChange,
+  onFocus,
+  onBlur,
+  label,
+  priority = "secondary",
+  tone,
+  renderMarker,
+  size,
+  orientation,
+  fill,
+  disabled,
+  children,
+  className,
+  style,
+  id,
+  ...rest
+}) => {
+  const controlled = value !== void 0;
+  const [internalValue, setInternalValue] = useState(
+    defaultValue
+  );
+  const currentValue = controlled ? value : internalValue ?? options[0]?.value;
+  const handleStateChange = (event, detail) => {
+    onStateChange?.(event, detail);
+    if (controlled || event.defaultPrevented) return;
+    setInternalValue(detail.next ?? void 0);
+  };
+  const tabs = options.map((option) => {
+    const { className: optionClassName, style: optionStyle, ...optionAttrs } = optionPresentationAttrs(option);
+    const optionTone = option.tone || void 0;
+    const stepTone = option.disabled ? "neutral" : option.state === "error" ? "critical" : optionTone || tone || "neutral";
+    const customMarker = renderMarker?.(option, {
+      state: option.state,
+      selected: option.value === currentValue,
+      disabled: !!option.disabled
+    });
+    const builtInMarker = option.disabled ? /* @__PURE__ */ jsx(Icon, { shape: STATE_ICON.incomplete }) : option.state === "loading" ? /* @__PURE__ */ jsx(Loader, { tone: stepTone }) : /* @__PURE__ */ jsx(Icon, { shape: STATE_ICON[option.state] });
+    const marker = customMarker !== void 0 ? customMarker : option.marker !== void 0 ? typeof option.marker === "number" ? option.marker : /* @__PURE__ */ jsx(Icon, { shape: option.marker }) : builtInMarker;
+    return {
+      ...optionAttrs,
+      value: option.value,
+      disabled: option.disabled,
+      "data-step-state": option.state,
+      // Steps propagates its tone to each generated tab. A local option tone
+      // wins, while error and disabled states retain their fixed semantics.
+      tone: stepTone,
+      tooltip: /* @__PURE__ */ jsxs(Fragment, { children: [
+        option.label,
+        option.hint != null && /* @__PURE__ */ jsxs(Fragment, { children: [
+          " \u2014 ",
+          option.hint
+        ] })
+      ] }),
+      className: optionClassName,
+      style: optionStyle,
+      children: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("a-step-marker", { "aria-hidden": "true", children: marker }),
+        /* @__PURE__ */ jsxs("a-step-desc", { children: [
+          /* @__PURE__ */ jsx("a-tab-label", { children: option.label }),
+          option.hint != null && /* @__PURE__ */ jsx("a-step-hint", { children: option.hint })
+        ] })
+      ] })
+    };
+  });
+  const currentIndex = options.findIndex(
+    (option) => option.value === currentValue
+  );
+  const vertical = orientation === "vertical";
+  const hasPanels = children != null && children !== false;
+  const hasVerticalPanel = vertical && hasPanels;
+  const panelRow = (currentIndex >= 0 ? currentIndex : options.length - 1) + 2;
+  const rootStyle = hasVerticalPanel ? {
+    ...style,
+    "--steps-panel-row": panelRow
+  } : style;
+  return /* @__PURE__ */ jsx(
+    "a-steps",
+    {
+      class: className,
+      style: rootStyle,
+      id,
+      ...rest,
+      "data-orientation": vertical ? "vertical" : void 0,
+      children: /* @__PURE__ */ jsx(
+        Tabs,
+        {
+          options: tabs,
+          value: currentValue,
+          onStateChange: handleStateChange,
+          onChange,
+          onValueChange,
+          onFocus,
+          onBlur,
+          label,
+          size,
+          orientation,
+          fill,
+          priority,
+          noslide: true,
+          disabled,
+          "data-steps": "",
+          children
+        }
+      )
+    }
+  );
+};
+export {
+  Steps
+};