@antadesign/anta 0.3.28 → 0.3.29

package/dist/components/SelectFaceted.d.ts

@@ -1,6 +1,6 @@
 import type { BaseProps, ToneScope } from '../general_types';
 import type { IconShape } from '../elements/a-icon.shapes';
-import type { OptionValue, SelectItem, SelectOption } from './Select';
+import type { OptionState, OptionValue, SelectItem, SelectOption } from './Select';
 import { type MenuProps } from './Menu';
 import './select-parts.css';
 interface FacetBase {
@@ -28,6 +28,11 @@ export interface SelectFacetSingle extends FacetBase {
     options: SelectItem<OptionValue>[];
     /** Add a search field atop this facet's flyout that filters its options. */
     filter?: FacetFilter;
+    /** Replace the option's label, hint, and icon layout in the flyout and global
+     *  search results. Receives the option and its value, selected, and disabled
+     *  state. The row retains selection handling and its indicator. Filtering and
+     *  summaries still use the option data. Return null to use the default layout. */
+    renderOption?: (option: SelectOption<OptionValue>, state: OptionState<OptionValue>) => React.ReactNode;
 }
 /** Pick **any number** of options. Value: an array of the chosen `value`s
  *  (empty array clears the facet). Options are the same `SelectItem`s as `single`,
@@ -38,6 +43,11 @@ export interface SelectFacetMultiple extends FacetBase {
     options: SelectItem<OptionValue>[];
     /** Add a search field atop this facet's flyout that filters its options. */
     filter?: FacetFilter;
+    /** Replace the option's label, hint, and icon layout in the flyout and global
+     *  search results. Receives the option and its value, selected, and disabled
+     *  state. The row retains selection handling and its indicator. Filtering and
+     *  summaries still use the option data. Return null to use the default layout. */
+    renderOption?: (option: SelectOption<OptionValue>, state: OptionState<OptionValue>) => React.ReactNode;
     /** A "Select all" row that toggles every option. On by default — set `false`
      *  to drop it.
      *  @defaultValue true */
@@ -166,11 +176,12 @@ export interface SelectFacetedProps extends Omit<BaseProps, 'children'> {
     /** Replaces the default `Button` with a trigger returned from this function.
      *  Receives a `SelectFacetedTriggerState`. Return exactly one focusable element:
      *  the menu is positioned relative to that element and opens when it is clicked.
-     *  Add `aria-haspopup="menu"` and `aria-expanded={state.open}` to the returned
-     *  element, 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. */
+     *  Add `aria-haspopup={searchable ? 'dialog' : 'menu'}` and
+     *  `aria-expanded={state.open}` to the returned 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/SelectFaceted.js

@@ -1,6 +1,6 @@
 import { Fragment, jsx, jsxs } from "@antadesign/anta/jsx-runtime";
 import { useState, useMemo } from "../jsx-runtime";
-import { nativeStateChange, ISOLATE_HINT, optionPresentationAttrs } from "../anta_helpers";
+import { ISOLATE_HINT, ISOLATE_HINT_DELAY, optionPresentationAttrs } from "../anta_helpers";
 import { normalizeOpt, matchQueryRegex, matchesQuery } from "./select-options";
 import { Button } from "./Button";
 import { Menu } from "./Menu";
@@ -71,11 +71,6 @@ const SelectFaceted = (props) => {
   }
   const [queries, setQueries] = useState({});
   const [rootQuery, setRootQuery] = useState("");
-  const [activeIds, setActiveIds] = useState({});
-  const onActive = (key) => (e) => {
-    const id = nativeStateChange(e).detail?.id ?? null;
-    setActiveIds((s) => s[key] === id ? s : { ...s, [key]: id });
-  };
   const activeCount = facets.reduce((n, f) => n + (isEmpty(current[f.key]) ? 0 : 1), 0);
   const leavesByKey = useMemo(
     () => new Map(
@@ -114,17 +109,18 @@ const SelectFaceted = (props) => {
       placeholder: "Filter\u2026",
       "aria-label": `Filter ${facet.label}`,
       "aria-autocomplete": "list",
-      "aria-activedescendant": activeIds[facet.key] ?? void 0,
       onInput: (e) => setQueries((s) => ({ ...s, [facet.key]: e.currentTarget.value }))
     }
   ) }) : null;
   const optionRow = (facet, opt, keyPrefix = "") => {
     const { className: optionClassName, style: optionStyle, ...optionAttrs } = optionPresentationAttrs(opt, true);
+    const selected = facet.kind === "single" ? current[facet.key] === opt.value : (current[facet.key] ?? []).includes(opt.value);
+    const custom = facet.renderOption?.(opt, { value: opt.value, selected, disabled: !!opt.disabled });
     const shared = {
       ...optionAttrs,
-      icon: opt.icon,
-      label: opt.label ?? String(opt.value),
-      hint: opt.hint,
+      icon: custom ? void 0 : opt.icon,
+      label: custom ? void 0 : opt.label ?? String(opt.value),
+      hint: custom ? void 0 : opt.hint,
       tone: opt.tone ?? tone,
       toneScope: opt.toneScope ?? toneScope,
       disabled: opt.disabled,
@@ -139,8 +135,9 @@ const SelectFaceted = (props) => {
         {
           ...shared,
           selectionIndicator: "check",
-          selected: cur === opt.value,
-          onSelect: () => setFacet(facet, cur === opt.value ? void 0 : opt.value)
+          selected,
+          onSelect: () => setFacet(facet, cur === opt.value ? void 0 : opt.value),
+          children: custom
         },
         `${keyPrefix}${opt.value}`
       );
@@ -149,14 +146,17 @@ const SelectFaceted = (props) => {
     const isolable = facet.selectAll !== false && !opt.disabled;
     const tip = opt.tooltip ?? (isolable ? ISOLATE_HINT : void 0);
     const hintOnly = opt.tooltip == null && isolable;
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsxs(
       MenuItem,
       {
         ...shared,
         selectionIndicator: "checkbox",
-        selected: arr.includes(opt.value),
+        selected,
         onSelect: (e) => isolable && e?.altKey ? setFacet(facet, [opt.value]) : setFacet(facet, arr.includes(opt.value) ? arr.filter((v) => v !== opt.value) : [...arr, opt.value]),
-        children: tip && /* @__PURE__ */ jsx(Tooltip, { follow: true, ...hintOnly ? { delay: 700 } : {}, children: tip })
+        children: [
+          custom,
+          tip && /* @__PURE__ */ jsx(Tooltip, { ...hintOnly ? { delay: ISOLATE_HINT_DELAY, placement: "left" } : { follow: true }, children: tip })
+        ]
       },
       `${keyPrefix}${opt.value}`
     );
@@ -233,24 +233,33 @@ const SelectFaceted = (props) => {
   }) });
   const renderEditor = (facet) => {
     const isOptions = facet.kind === "single" || facet.kind === "multiple";
+    const dialog = !isOptions || !!facet.filter;
     const body = facet.kind === "single" ? renderSingle(facet) : facet.kind === "multiple" ? renderMultiple(facet) : facet.kind === "text" ? renderText(facet) : renderCustom(facet);
     const hasValue = !isEmpty(current[facet.key]);
-    return /* @__PURE__ */ jsxs(Menu, { onactivedescendant: isOptions && facet.filter ? onActive(facet.key) : void 0, children: [
-      isOptions && filterHeader(facet),
-      body,
-      clearable && hasValue && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(MenuSeparator, { slot: "footer" }),
-        /* @__PURE__ */ jsx("a-select-footer", { slot: "footer", children: /* @__PURE__ */ jsx(
-          MenuItem,
-          {
-            icon: "x",
-            label: "Clear",
-            "data-menu-open": "",
-            onSelect: () => setFacet(facet, void 0)
-          }
-        ) })
-      ] })
-    ] });
+    return /* @__PURE__ */ jsxs(
+      Menu,
+      {
+        role: dialog ? "dialog" : void 0,
+        "aria-label": dialog ? `${facet.label} ${isOptions ? "options" : "editor"}` : void 0,
+        children: [
+          isOptions && filterHeader(facet),
+          body,
+          clearable && hasValue && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(MenuSeparator, { slot: "footer" }),
+            /* @__PURE__ */ jsx("a-select-footer", { slot: "footer", children: /* @__PURE__ */ jsx(
+              MenuItem,
+              {
+                icon: "x",
+                label: "Clear",
+                role: dialog ? "button" : void 0,
+                "data-menu-open": "",
+                onSelect: () => setFacet(facet, void 0)
+              }
+            ) })
+          ] })
+        ]
+      }
+    );
   };
   const summaryOf = (facet) => {
     const v = current[facet.key];
@@ -283,7 +292,7 @@ const SelectFaceted = (props) => {
         priority,
         size,
         disabled,
-        "aria-haspopup": "menu",
+        "aria-haspopup": searchable ? "dialog" : "menu",
         "aria-expanded": open ? "true" : "false",
         className,
         style,
@@ -294,6 +303,8 @@ const SelectFaceted = (props) => {
     /* @__PURE__ */ jsxs(
       Menu,
       {
+        role: searchable ? "dialog" : void 0,
+        "aria-label": searchable ? `${label} options` : void 0,
         placement,
         offset,
         open,
@@ -301,7 +312,6 @@ const SelectFaceted = (props) => {
           setOpen(next);
           if (!next) setRootQuery("");
         },
-        onactivedescendant: searchable ? onActive("__root__") : void 0,
         children: [
           searchable && // Pinned global search: flattens all options facets while a query is active.
           /* @__PURE__ */ jsx("a-select-header", { slot: "header", "data-menu-open": "", children: /* @__PURE__ */ jsx(
@@ -313,17 +323,26 @@ const SelectFaceted = (props) => {
               placeholder: searchPlaceholder,
               "aria-label": "Filter all facets",
               "aria-autocomplete": "list",
-              "aria-activedescendant": activeIds["__root__"] ?? void 0,
               onInput: (e) => setRootQuery(e.currentTarget.value)
             }
           ) }),
-          searchable && rootQuery.trim() ? renderFlatResults() : facets.map((facet) => /* @__PURE__ */ jsxs(MenuItem, { submenu: true, icon: facet.icon, label: facet.label, children: [
-            (() => {
-              const s = summaryOf(facet);
-              return s != null ? /* @__PURE__ */ jsx(Tag, { size: "small", tone: "brand", children: /* @__PURE__ */ jsx("a-select-faceted-summary", { children: s }) }) : null;
-            })(),
-            renderEditor(facet)
-          ] }, facet.key)),
+          searchable && rootQuery.trim() ? renderFlatResults() : facets.map((facet) => /* @__PURE__ */ jsxs(
+            MenuItem,
+            {
+              submenu: true,
+              icon: facet.icon,
+              label: facet.label,
+              "aria-haspopup": facet.kind === "text" || facet.kind === "custom" || !!facet.filter ? "dialog" : "menu",
+              children: [
+                (() => {
+                  const s = summaryOf(facet);
+                  return s != null ? /* @__PURE__ */ jsx(Tag, { size: "small", tone: "brand", children: /* @__PURE__ */ jsx("a-select-faceted-summary", { children: s }) }) : null;
+                })(),
+                renderEditor(facet)
+              ]
+            },
+            facet.key
+          )),
           clearable && /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(MenuSeparator, { slot: "footer" }),
             /* @__PURE__ */ jsx("a-select-footer", { slot: "footer", children: /* @__PURE__ */ jsx(
@@ -331,6 +350,7 @@ const SelectFaceted = (props) => {
               {
                 icon: "filter-x",
                 label: clearAllLabel,
+                role: searchable ? "button" : void 0,
                 disabled: activeCount === 0,
                 "data-menu-open": "",
                 onSelect: clearAll

package/dist/components/Steps.css

@@ -1 +1 @@
-@layer anta.components{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-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-bg: light-dark( oklch(from var(--tabs-tone-source) .5 .17 h), oklch(from var(--tabs-tone-source) .4 .16 h) )}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: light-dark( oklch(from var(--tabs-tone-source) .5 .02 h), oklch(from var(--tabs-tone-source) .4 .015 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: light-dark( oklch(from var(--tabs-tone-source) .55 .008 h / .03), oklch(from var(--tabs-tone-source) .8 .008 h / .08) )}a-tabs[data-steps]>a-tab[tone]:not([tone=""],[tone=neutral]){--tab-secondary-bg: light-dark( oklch(from var(--tabs-tone-source) .55 .14 h / .03), oklch(from var(--tabs-tone-source) .8 .12 h / .08) )}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}}}
+@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{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-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-bg: light-dark( oklch(from var(--tabs-tone-source) .5 .17 h), oklch(from var(--tabs-tone-source) .4 .16 h) )}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: light-dark( oklch(from var(--tabs-tone-source) .5 .02 h), oklch(from var(--tabs-tone-source) .4 .015 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: light-dark( oklch(from var(--tabs-tone-source) .55 .008 h / .03), oklch(from var(--tabs-tone-source) .8 .008 h / .08) )}a-tabs[data-steps]>a-tab[tone]:not([tone=""],[tone=neutral]){--tab-secondary-bg: light-dark( oklch(from var(--tabs-tone-source) .55 .14 h / .03), oklch(from var(--tabs-tone-source) .8 .12 h / .08) )}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/Switch.d.ts

@@ -14,8 +14,8 @@ export interface SwitchChangeAttrs {
 export interface SwitchProps extends BaseProps {
     /** Visible, stable label for the setting. Use `children` for richer label content. */
     label?: string;
-    /** Secondary text rendered under the label. It does not become part of the
-     * accessible name. */
+    /** Secondary text rendered under the label and exposed as the switch's
+     * accessible description. It does not become part of the accessible name. */
     hint?: React.ReactNode;
     /** Controlled checked value. In controlled mode, update this in `onStateChange`. */
     checked?: boolean;
@@ -34,7 +34,7 @@ export interface SwitchProps extends BaseProps {
     value?: string;
     /** Color of the track and thumb. A tinted tone also colors the unchecked
      * track border and thumb; use `toneScope="selected"` to color only the checked track.
-     * @defaultValue 'brand' */
+     * @defaultValue 'neutral' */
     tone?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
     /** Apply `tone` to every state, or only while checked so the unchecked track
      * and thumb stay neutral.

package/dist/components/TabPanel.d.ts

@@ -1,3 +1,4 @@
+import type { BaseProps } from "../general_types";
 /**
  * A tab panel inside `<Tabs>`. Renders a self-managing `<a-tabpanel>` — the element
  * finds its `<a-tabs>` (its flat sibling under the same parent — `Tabs` renders the
@@ -10,20 +11,14 @@
  * unmount an inactive panel (the old `mounting="active" | "lazy"`), drive selection
  * with a controlled `value` and render the content yourself — see the Tabs docs.
  */
-export interface TabPanelProps {
+export interface TabPanelProps extends BaseProps {
     /** Pairs this panel with the tab (`options` entry) of the same `value`. */
     value: string;
-    /** Panel content — arbitrary React/Preact. */
-    children?: React.ReactNode;
     /** How this panel hides while inactive: `display` (default — removed from layout
      *  and the a11y tree) or `visibility` (keeps its layout box, to measure it or
      *  avoid reflow). Both stay mounted; to *not render* an inactive panel, render it
      *  conditionally off a controlled `value` (see the Tabs docs).
      *  @defaultValue display */
     hideMode?: "display" | "visibility";
-    /** CSS class on the rendered `<a-tabpanel>`. */
-    className?: string;
-    /** Inline style on the rendered `<a-tabpanel>`. */
-    style?: React.CSSProperties;
 }
-export declare const TabPanel: ({ value, children, hideMode, className, style }: TabPanelProps) => any;
+export declare const TabPanel: ({ value, children, hideMode, className, style, ...rest }: TabPanelProps) => any;

package/dist/components/TabPanel.js

@@ -1,5 +1,5 @@
 import { jsx } from "@antadesign/anta/jsx-runtime";
-const TabPanel = ({ value, children, hideMode, className, style }) => /* @__PURE__ */ jsx(
+const TabPanel = ({ value, children, hideMode, className, style, ...rest }) => /* @__PURE__ */ jsx(
   "a-tabpanel",
   {
     value,
@@ -7,6 +7,7 @@ const TabPanel = ({ value, children, hideMode, className, style }) => /* @__PURE
     "hide-mode": hideMode === "visibility" ? "visibility" : void 0,
     class: className,
     style,
+    ...rest,
     children
   }
 );

package/dist/components/Tabs.d.ts

@@ -38,8 +38,8 @@ export interface TabOption extends OptionPresentationProps {
      *  tones color both in every mode. Overrides the strip's `tone` for this tab.
      *  @defaultValue inherits the strip's `tone` */
     tone?: "neutral" | "brand" | "info" | "success" | "warning" | "critical" | (string & {});
-    /** Disable just this tab — skipped by keyboard nav and dropped from the tab order
-     *  (a disabled-but-selected tab stays reachable, per the ARIA pattern). */
+    /** Prevent user activation of this tab. A disabled tab can still indicate
+     *  the current selection. */
     disabled?: boolean;
     /** Tooltip for this tab — a string or any node — shown **only when one of the
      *  tab's ellipsizing label parts is truncated** (tabs ellipsize when the strip

package/dist/components/Tabs.js

@@ -49,6 +49,7 @@ const Tabs = ({
     onValueChange?.(e, { value: e.currentTarget?.value ?? null });
   } : void 0;
   const vertical = orientation === "vertical";
+  const focusValue = currentValue != null && tabs.some((tab) => tab.value === currentValue) ? currentValue : tabs.find((tab) => !disabled && !tab.disabled)?.value;
   const strip = /* @__PURE__ */ jsx(
     "a-tabs",
     {
@@ -86,7 +87,7 @@ const Tabs = ({
             value: p.value,
             tone: p.tone || void 0,
             "aria-disabled": tabDisabled ? "true" : void 0,
-            tabIndex: tabDisabled && !isSelected ? -1 : 0,
+            tabIndex: p.value === focusValue ? 0 : -1,
             disabled: tabDisabled ? "" : void 0,
             round: roundAttr(round) ?? roundAttr(p.round),
             class: optionClassName,

package/dist/components/Tooltip.d.ts

@@ -10,7 +10,7 @@ export interface TooltipProps extends BaseProps {
     /** Which side of the anchor the bubble prefers. Auto-flips to the other
      *  side when there isn't room.
      *  @defaultValue bottom */
-    placement?: 'top' | 'bottom';
+    placement?: 'top' | 'bottom' | 'left';
     /** Round the bubble to a 20px radius (matching a round menu). Pass a `number`
      *  (px) or a CSS length string for a custom radius. */
     round?: boolean | number | string;

package/dist/components/Tooltip.js

@@ -17,7 +17,7 @@ const Tooltip = ({
     "a-tooltip",
     {
       delay: delay != null ? String(delay) : void 0,
-      placement: placement === "top" ? "top" : void 0,
+      placement: placement === "top" || placement === "left" ? placement : void 0,
       round: roundAttr(round),
       follow: follow ? "" : void 0,
       interactive: interactive ? "" : void 0,

package/dist/components/select-parts.css

@@ -1 +1 @@
-@layer anta.components{a-select-chevron{display:inline-flex;transition:transform .15s ease}a-select-chevron[open]{transform:rotate(180deg)}a-select-faceted-summary{display:block;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
+@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-select-field{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;--select-text: var(--text-1);--select-bg: var(--bg-1);--select-border: var(--border-2);--select-hint: var(--text-3);--select-fs: 15px;--select-lh: 20px;font-family:var(--sans-serif);font-size:var(--select-fs);line-height:var(--select-lh)}a-select-field[size=small]{--select-fs: 13px;--select-lh: 16px}a-select-field[size=large]{--select-fs: 17px;--select-lh: 22px}a-select-label{color:var(--text-3);font-weight:500}a-select-hint{display:flex;align-items:start;gap:4px;padding-inline:1px;color:var(--select-hint);font-size:calc(var(--select-fs) - 1px);line-height:var(--select-lh)}a-select-field>a-button{width:100%;min-width:0;box-sizing:border-box;padding-inline:7px;color:var(--select-text);background:var(--select-bg);box-shadow:inset 0 0 0 .5px var(--select-border);font-size:var(--select-fs);line-height:var(--select-lh);font-weight:400;letter-spacing:normal}a-select-field>a-button>a-button-label{flex:1;text-align:start;line-height:var(--select-lh);padding:0}a-select-field>a-button>a-button-label[data-placeholder]{color:var(--text-4)}a-select-field>a-button:focus-visible{box-shadow:inset 0 0 0 1px var(--select-border)}@media(hover:hover)and (pointer:fine){a-select-field>a-button:hover:not([disabled]){box-shadow:inset 0 0 0 1px var(--select-border)}}a-select-leading,a-select-chevron{flex:none;color:var(--text-3)}a-select-leading{display:inline-flex;align-items:center}a-select-field[size=small] a-icon{--icon-size: 14px}a-select-field[size=large] a-icon{--icon-size: 18px}a-select-field[status=critical]{--select-status-source: var(--anta-seed-critical);--select-bg: var(--bg-2-critical);--select-hint: var(--text-2-critical)}a-select-field[status=warning]{--select-status-source: var(--anta-seed-warning);--select-bg: var(--bg-2-warning);--select-hint: var(--text-2-warning)}a-select-field[status=success]{--select-status-source: var(--anta-seed-success);--select-bg: var(--bg-2-success);--select-hint: var(--text-2-success)}a-select-field[status=info]{--select-status-source: var(--anta-seed-info);--select-bg: var(--bg-2-info);--select-hint: var(--text-2-info)}a-select-field[status=brand]{--select-status-source: var(--anta-seed-brand);--select-bg: var(--bg-2-brand);--select-hint: var(--text-2-brand)}a-select-field[status]:not([status=neutral]){--select-border: light-dark(oklch(from var(--select-status-source) .58 c h), oklch(from var(--select-status-source) .52 c h))}a-select-field[status]:not([status=neutral])>a-button{box-shadow:inset 0 0 0 1px var(--select-border)}a-select-field[disabled]{--select-text: var(--text-4);--select-hint: var(--text-5);--select-bg: color-mix(in oklch, var(--text-1) 5%, transparent);--select-border: var(--border-2)}a-select-field[disabled]>a-select-label{color:var(--text-4)}a-select-chevron{display:inline-flex;transition:transform .15s ease}a-select-chevron[open]{transform:rotate(180deg)}a-select-faceted-summary{display:block;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}

package/dist/elements/a-avatar.css

@@ -1 +1 @@
-@layer anta.components{a-avatar{--avatar-size: 44px;--avatar-radius: 22%;--avatar-placeholder-bg: var(--bg-3);--avatar-badge-ratio: .24;--avatar-badge-size: calc(var(--avatar-size) * var(--avatar-badge-ratio));--avatar-badge-inset: 0px;--avatar-badge-gap: 2px;--avatar-badge-mask: none;--avatar-badge-tone-source: var(--anta-seed-neutral);--avatar-badge-chroma: .17;--avatar-badge-color: light-dark( oklch(from var(--avatar-badge-tone-source) .62 var(--avatar-badge-chroma) h), oklch(from var(--avatar-badge-tone-source) .68 var(--avatar-badge-chroma) h) );display:inline-block;inline-size:var(--avatar-size);block-size:var(--avatar-size);vertical-align:middle}a-avatar[round]{--avatar-radius: var(--avatar-round, 50%);--avatar-badge-inset: calc(var(--avatar-size) * .03);@supports (border-radius: attr(probe type(<length>),1px)){--avatar-round: attr(round type(<length>))}}a-avatar[size=small]{--avatar-size: 32px;--avatar-badge-gap: 1.5px}a-avatar[size=large]{--avatar-size: 64px;--avatar-badge-gap: 2.5px}a-avatar[badge]:not([badge=""],[badge=none]){--avatar-badge-mask: radial-gradient( circle calc(var(--avatar-badge-size) / 2 + var(--avatar-badge-gap)) at calc(100% - var(--avatar-badge-inset) - var(--avatar-badge-size) / 2) calc(100% - var(--avatar-badge-inset) - var(--avatar-badge-size) / 2), transparent 99%, #000 100% )}a-avatar:not(:defined){display:inline-block;inline-size:var(--avatar-size);block-size:var(--avatar-size);border-radius:var(--avatar-radius);background:var(--avatar-placeholder-bg);vertical-align:middle}a-avatar[badge=neutral]{--avatar-badge-chroma: .005}a-avatar[badge=brand]{--avatar-badge-tone-source: var(--anta-seed-brand)}a-avatar[badge=info]{--avatar-badge-tone-source: var(--anta-seed-info)}a-avatar[badge=success]{--avatar-badge-tone-source: var(--anta-seed-success)}a-avatar[badge=warning]{--avatar-badge-tone-source: var(--anta-seed-warning)}a-avatar[badge=critical]{--avatar-badge-tone-source: var(--anta-seed-critical)}@supports (color: attr(badge type(<color>),transparent)){a-avatar[badge]:not([badge=""],[badge=neutral],[badge=brand],[badge=info],[badge=success],[badge=warning],[badge=critical]){--avatar-badge-tone-source: attr(badge type(<color>), transparent)}}}
+@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-avatar{--avatar-size: 44px;--avatar-radius: 22%;--avatar-placeholder-bg: var(--bg-3);--avatar-badge-ratio: .24;--avatar-badge-size: calc(var(--avatar-size) * var(--avatar-badge-ratio));--avatar-badge-inset: 0px;--avatar-badge-gap: 2px;--avatar-badge-mask: none;--avatar-badge-tone-source: var(--anta-seed-neutral);--avatar-badge-chroma: .17;--avatar-badge-color: light-dark( oklch(from var(--avatar-badge-tone-source) .62 var(--avatar-badge-chroma) h), oklch(from var(--avatar-badge-tone-source) .68 var(--avatar-badge-chroma) h) );display:inline-block;inline-size:var(--avatar-size);block-size:var(--avatar-size);vertical-align:middle}a-avatar[round]{--avatar-radius: var(--avatar-round, 50%);--avatar-badge-inset: calc(var(--avatar-size) * .03);@supports (border-radius: attr(probe type(<length>),1px)){--avatar-round: attr(round type(<length>))}}a-avatar[size=small]{--avatar-size: 32px;--avatar-badge-gap: 1.5px}a-avatar[size=large]{--avatar-size: 64px;--avatar-badge-gap: 2.5px}a-avatar[badge]:not([badge=""],[badge=none]){--avatar-badge-mask: radial-gradient( circle calc(var(--avatar-badge-size) / 2 + var(--avatar-badge-gap)) at calc(100% - var(--avatar-badge-inset) - var(--avatar-badge-size) / 2) calc(100% - var(--avatar-badge-inset) - var(--avatar-badge-size) / 2), transparent 99%, #000 100% )}a-avatar:not(:defined){display:inline-block;inline-size:var(--avatar-size);block-size:var(--avatar-size);border-radius:var(--avatar-radius);background:var(--avatar-placeholder-bg);vertical-align:middle}a-avatar[badge=neutral]{--avatar-badge-chroma: .005}a-avatar[badge=brand]{--avatar-badge-tone-source: var(--anta-seed-brand)}a-avatar[badge=info]{--avatar-badge-tone-source: var(--anta-seed-info)}a-avatar[badge=success]{--avatar-badge-tone-source: var(--anta-seed-success)}a-avatar[badge=warning]{--avatar-badge-tone-source: var(--anta-seed-warning)}a-avatar[badge=critical]{--avatar-badge-tone-source: var(--anta-seed-critical)}@supports (color: attr(badge type(<color>),transparent)){a-avatar[badge]:not([badge=""],[badge=neutral],[badge=brand],[badge=info],[badge=success],[badge=warning],[badge=critical]){--avatar-badge-tone-source: attr(badge type(<color>), transparent)}}}

package/dist/elements/a-banner.css

@@ -1 +1 @@
-@layer anta.components{a-banner{--banner-bg: var(--bg-4);--banner-border: var(--border-4);--banner-text: var(--text-2);display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:4px 1ch;position:relative;box-sizing:border-box;width:100%;min-height:40px;padding-block:6px;padding-inline:16px 48px;color:var(--banner-text);background:var(--banner-bg);border:0 solid var(--banner-border);border-radius:0;overflow:clip;overflow-clip-margin:3px;interpolate-size:allow-keywords;transition:opacity .16s ease,block-size .2s ease,padding-block .2s ease,border-block-width .2s ease,display .2s allow-discrete}a-banner[align=center]{justify-content:center;padding-inline:48px}a-banner[round]{border-radius:var(--banner-round, 999px);@supports (border-radius: attr(probe type(<length>),1px)){--banner-round: attr(round type(<length>))}}a-banner [slot=close] a-button,a-banner a-button[slot=close]{height:100%;width:40px}a-banner-message{font-size:14px;line-height:20px;font-weight:475;text-align:start}a-banner[align=center] a-banner-message{text-align:center}a-banner[tone=brand]{--banner-bg: var(--bg-4-brand);--banner-border: var(--border-4-brand);--banner-text: var(--text-2-brand)}a-banner[tone=info]{--banner-bg: var(--bg-4-info);--banner-border: var(--border-4-info);--banner-text: var(--text-2-info)}a-banner[tone=success]{--banner-bg: var(--bg-4-success);--banner-border: var(--border-4-success);--banner-text: var(--text-2-success)}a-banner[tone=warning]{--banner-bg: var(--bg-4-warning);--banner-border: var(--border-4-warning);--banner-text: var(--text-2-warning)}a-banner[tone=critical]{--banner-bg: var(--bg-4-critical);--banner-border: var(--border-4-critical);--banner-text: var(--text-2-critical)}a-banner[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--banner-tone-source: currentColor;--banner-text: light-dark( oklch(from var(--banner-tone-source) .5 .125 h), oklch(from var(--banner-tone-source) .77 .11 h) );--banner-bg: light-dark( oklch(from var(--banner-tone-source) .955 .02 h), oklch(from var(--banner-tone-source) .185 .05 h) );--banner-border: light-dark( oklch(from var(--banner-tone-source) .9 .04 h), oklch(from var(--banner-tone-source) .26 .06 h) );@supports (color: attr(probe type(<color>),red)){--banner-tone-source: attr(tone type(<color>), currentColor)}}a-banner:not(:defined){opacity:0}a-banner[state=closed],a-banner[default-state=closed],a-banner:state(closed){display:none;block-size:0;min-block-size:0;padding-block:0;border-block-width:0;opacity:0}@media(forced-colors:active){a-banner{border-width:1px;border-color:CanvasText}}@media(prefers-reduced-motion:reduce){a-banner{transition:none}}}
+@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-banner{--banner-bg: var(--bg-4);--banner-border: var(--border-4);--banner-text: var(--text-2);display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:4px 1ch;position:relative;box-sizing:border-box;width:100%;min-height:40px;padding-block:6px;padding-inline:16px 48px;color:var(--banner-text);background:var(--banner-bg);border:0 solid var(--banner-border);border-radius:0;overflow:clip;overflow-clip-margin:3px;interpolate-size:allow-keywords;transition:opacity .16s ease,block-size .2s ease,padding-block .2s ease,border-block-width .2s ease,display .2s allow-discrete}a-banner[align=center]{justify-content:center;padding-inline:48px}a-banner[round]{border-radius:var(--banner-round, 999px);@supports (border-radius: attr(probe type(<length>),1px)){--banner-round: attr(round type(<length>))}}a-banner [slot=close] a-button,a-banner a-button[slot=close]{height:100%;width:40px}a-banner-message{font-size:14px;line-height:20px;font-weight:475;text-align:start}a-banner[align=center] a-banner-message{text-align:center}a-banner[tone=brand]{--banner-bg: var(--bg-4-brand);--banner-border: var(--border-4-brand);--banner-text: var(--text-2-brand)}a-banner[tone=info]{--banner-bg: var(--bg-4-info);--banner-border: var(--border-4-info);--banner-text: var(--text-2-info)}a-banner[tone=success]{--banner-bg: var(--bg-4-success);--banner-border: var(--border-4-success);--banner-text: var(--text-2-success)}a-banner[tone=warning]{--banner-bg: var(--bg-4-warning);--banner-border: var(--border-4-warning);--banner-text: var(--text-2-warning)}a-banner[tone=critical]{--banner-bg: var(--bg-4-critical);--banner-border: var(--border-4-critical);--banner-text: var(--text-2-critical)}a-banner[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--banner-tone-source: currentColor;--banner-text: light-dark( oklch(from var(--banner-tone-source) .5 .125 h), oklch(from var(--banner-tone-source) .77 .11 h) );--banner-bg: light-dark( oklch(from var(--banner-tone-source) .955 .02 h), oklch(from var(--banner-tone-source) .185 .05 h) );--banner-border: light-dark( oklch(from var(--banner-tone-source) .9 .04 h), oklch(from var(--banner-tone-source) .26 .06 h) );@supports (color: attr(probe type(<color>),red)){--banner-tone-source: attr(tone type(<color>), currentColor)}}a-banner:not(:defined){opacity:0}a-banner[state=closed],a-banner[default-state=closed],a-banner:state(closed){display:none;block-size:0;min-block-size:0;padding-block:0;border-block-width:0;opacity:0}@media(forced-colors:active){a-banner{border-width:1px;border-color:CanvasText}}@media(prefers-reduced-motion:reduce){a-banner{transition:none}}}

package/dist/elements/a-box.css

@@ -1 +1 @@
-@layer anta.components{a-box{display:block;min-width:0}a-box[display=inline-block]{display:inline-block}a-box[display=flex]{display:flex}a-box[display=inline-flex]{display:inline-flex}a-box[display=grid]{display:grid}a-box[display=inline-grid]{display:inline-grid}a-box[gap]{gap:var(--box-gap, normal);@supports (border-radius: attr(probe type(<length>),1px)){--box-gap: attr(gap type(<length>))}}a-box[round]{border-radius:var(--box-round, 999px);@supports (border-radius: attr(probe type(<length>),1px)){--box-round: attr(round type(<length>))}}a-box[fade]{--box-fade-size: 24px;--box-fade-x: linear-gradient(transparent, transparent);--box-fade-y: linear-gradient(transparent, transparent);--box-fade-to-start: to left;--box-fade-to-end: to right}a-box[fade]:is(:state(hidden-start-x),:state(hidden-end-x),:state(hidden-start-y),:state(hidden-end-y)){mask-image:linear-gradient(#000,#000),var(--box-fade-x),var(--box-fade-y);mask-clip:border-box,padding-box,padding-box;mask-origin:border-box,padding-box,padding-box;mask-composite:exclude,add,add;mask-repeat:no-repeat;mask-size:100% 100%}a-box[fade][fade-size]{--box-fade-size: 24px;@supports (border-radius: attr(probe type(<length>),1px)){--box-fade-size: attr(fade-size type(<length>), 24px)}}a-box[fade]:dir(rtl){--box-fade-to-start: to right;--box-fade-to-end: to left}a-box[fade]:state(hidden-end-x){--box-fade-x: linear-gradient(var(--box-fade-to-end), transparent calc(100% - var(--box-fade-size)), black)}a-box[fade]:state(hidden-start-x){--box-fade-x: linear-gradient(var(--box-fade-to-start), transparent calc(100% - var(--box-fade-size)), black)}a-box[fade]:state(hidden-start-x):state(hidden-end-x){--box-fade-x: linear-gradient( to right, black, transparent var(--box-fade-size), transparent calc(100% - var(--box-fade-size)), black )}a-box[fade]:state(hidden-end-y){--box-fade-y: linear-gradient(to bottom, transparent calc(100% - var(--box-fade-size)), black)}a-box[fade]:state(hidden-start-y){--box-fade-y: linear-gradient(to top, transparent calc(100% - var(--box-fade-size)), black)}a-box[fade]:state(hidden-start-y):state(hidden-end-y){--box-fade-y: linear-gradient( to bottom, black, transparent var(--box-fade-size), transparent calc(100% - var(--box-fade-size)), black )}}
+@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-box{display:block;min-width:0}a-box[display=inline-block]{display:inline-block}a-box[display=flex]{display:flex}a-box[display=inline-flex]{display:inline-flex}a-box[display=grid]{display:grid}a-box[display=inline-grid]{display:inline-grid}a-box[gap]{gap:var(--box-gap, normal);@supports (border-radius: attr(probe type(<length>),1px)){--box-gap: attr(gap type(<length>))}}a-box[padding]{padding:var(--box-padding, 0px);@supports (padding: attr(padding type(*))){--box-padding: attr(padding type(*), 0px)}}a-box[margin]{margin:var(--box-margin, 0px);@supports (margin: attr(margin type(*))){--box-margin: attr(margin type(*), 0px)}}a-box[round]{border-radius:var(--box-round, 999px);@supports (border-radius: attr(probe type(<length>),1px)){--box-round: attr(round type(<length>))}}a-box[fade]{--box-fade-size: 24px;--box-fade-x: linear-gradient(transparent, transparent);--box-fade-y: linear-gradient(transparent, transparent);--box-fade-to-start: to left;--box-fade-to-end: to right}a-box[fade]:is(:state(hidden-start-x),:state(hidden-end-x),:state(hidden-start-y),:state(hidden-end-y)){mask-image:linear-gradient(#000,#000),var(--box-fade-x),var(--box-fade-y);mask-clip:border-box,padding-box,padding-box;mask-origin:border-box,padding-box,padding-box;mask-composite:exclude,add,add;mask-repeat:no-repeat;mask-size:100% 100%}a-box[fade][fade-size]{--box-fade-size: 24px;@supports (border-radius: attr(probe type(<length>),1px)){--box-fade-size: attr(fade-size type(<length>), 24px)}}a-box[fade]:dir(rtl){--box-fade-to-start: to right;--box-fade-to-end: to left}a-box[fade]:state(hidden-end-x){--box-fade-x: linear-gradient(var(--box-fade-to-end), transparent calc(100% - var(--box-fade-size)), black)}a-box[fade]:state(hidden-start-x){--box-fade-x: linear-gradient(var(--box-fade-to-start), transparent calc(100% - var(--box-fade-size)), black)}a-box[fade]:state(hidden-start-x):state(hidden-end-x){--box-fade-x: linear-gradient( to right, black, transparent var(--box-fade-size), transparent calc(100% - var(--box-fade-size)), black )}a-box[fade]:state(hidden-end-y){--box-fade-y: linear-gradient(to bottom, transparent calc(100% - var(--box-fade-size)), black)}a-box[fade]:state(hidden-start-y){--box-fade-y: linear-gradient(to top, transparent calc(100% - var(--box-fade-size)), black)}a-box[fade]:state(hidden-start-y):state(hidden-end-y){--box-fade-y: linear-gradient( to bottom, black, transparent var(--box-fade-size), transparent calc(100% - var(--box-fade-size)), black )}}

package/dist/elements/a-box.d.ts

@@ -7,17 +7,17 @@ import './a-box.css';
  * `measurechange` / `contextchange` events, and private `ElementInternals`
  * states. This keeps measurement usable when JSX itself cannot access the DOM.
  *
- * Observation is opt-in by attribute and pauses off screen. `fade` or
- * `observe="size"` turns measurement on, `observe="context"` turns
- * `contextchange` on, `observe="all"` (or a bare `observe`) turns on both, and a box
- * with neither runs no observers at all — not even the shared visibility one.
+ * Observation is opt-in by attribute and pauses off screen. `observe` selects
+ * measurement fields or presets, including `context` and `all`. `fade` keeps
+ * clipping states current without selecting event fields. A box with neither
+ * runs no observers at all, including the shared visibility observer.
  * The `measurement` / `context` / `isTruncated` getters still read on demand.
  *
  * Attributes rather than "is a listener attached" on purpose. A listener tally
  * cannot see listeners added before the element upgrades (the SSR pattern in
  * AGENTS.md), cannot see `once` or `AbortSignal` removals, and churns on every
  * React 19 render, because React removes and re-adds an `on*` prop whenever its
- * identity changes. The JSX wrapper stamps both attributes from its handler
+ * identity changes. The JSX wrapper sets `observe` from its selection and handler
  * props, so this is invisible to anyone using `Box`.
  */
 export declare class ABoxElement extends HTMLElementBase {
@@ -25,7 +25,7 @@ export declare class ABoxElement extends HTMLElementBase {
     static observedAttributes: string[];
     connectedCallback(): void;
     disconnectedCallback(): void;
-    attributeChangedCallback(name: string): void;
+    attributeChangedCallback(name: string, previous: string | null, current: string | null): void;
     /** A fresh measurement snapshot. For notifications, prefer `measurechange`:
      * it batches browser observers and includes the field-level delta. */
     get measurement(): BoxMeasurement;