@antadesign/anta 0.3.27 → 0.3.29

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";
@@ -37,7 +37,8 @@ const SelectFaceted = (props) => {
     size,
     priority = "secondary",
     disabled,
-    toneSelected,
+    tone,
+    toneScope,
     searchable,
     searchPlaceholder = "Filter\u2026",
     clearable = true,
@@ -70,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(
@@ -113,19 +109,20 @@ 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,
-      tone: opt.tone,
-      toneSelected,
+      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,
       className: optionClassName,
       style: optionStyle,
@@ -138,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}`
       );
@@ -148,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}`
     );
@@ -232,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];
@@ -282,7 +292,7 @@ const SelectFaceted = (props) => {
         priority,
         size,
         disabled,
-        "aria-haspopup": "menu",
+        "aria-haspopup": searchable ? "dialog" : "menu",
         "aria-expanded": open ? "true" : "false",
         className,
         style,
@@ -293,6 +303,8 @@ const SelectFaceted = (props) => {
     /* @__PURE__ */ jsxs(
       Menu,
       {
+        role: searchable ? "dialog" : void 0,
+        "aria-label": searchable ? `${label} options` : void 0,
         placement,
         offset,
         open,
@@ -300,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(
@@ -312,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(
@@ -330,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/Slider.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
-import { toneStyle, roundStyle, roundAttr, lengthStyle, cssLength } from "../anta_helpers";
+import { neutralToneAttr, toneStyle, roundStyle, roundAttr, lengthStyle, cssLength } from "../anta_helpers";
 const number = (value, fallback) => Number.isFinite(value) ? value : fallback;
 const isStringish = (node) => typeof node === "string" || typeof node === "number";
 const bounds = (min, max) => {
@@ -99,8 +99,8 @@ const Slider = ({
       step,
       name,
       disabled: disabled ? "" : void 0,
-      tone: tone && tone !== "neutral" ? tone : void 0,
-      "thumb-tone": thumbTone && thumbTone !== "neutral" ? thumbTone : void 0,
+      tone: neutralToneAttr(tone),
+      "thumb-tone": neutralToneAttr(thumbTone),
       size: size && size !== "medium" ? size : void 0,
       "track-size": trackSizeValue,
       "thumb-size": thumbSizeValue,

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

@@ -1,4 +1,4 @@
-import type { BaseProps } from "../general_types";
+import type { BaseProps, ToneScope } from "../general_types";
 type SwitchState = 'checked' | 'unchecked';
 type StateDetail = {
     next: SwitchState;
@@ -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;
@@ -33,14 +33,13 @@ export interface SwitchProps extends BaseProps {
      * @defaultValue "on" */
     value?: string;
     /** Color of the track and thumb. A tinted tone also colors the unchecked
-     * track border and thumb; use `toneSelected` to color only the checked track.
-     * @defaultValue 'brand' */
+     * track border and thumb; use `toneScope="selected"` to color only the checked track.
+     * @defaultValue 'neutral' */
     tone?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
-    /** Like `tone`, but applies only while the switch is checked. The unchecked
-     * track and thumb stay neutral. If both are set, `tone` colors the unchecked
-     * state and `toneSelected` colors the checked track.
-     * @defaultValue 'brand' */
-    toneSelected?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    /** Apply `tone` to every state, or only while checked so the unchecked track
+     * and thumb stay neutral.
+     * @defaultValue 'all' */
+    toneScope?: ToneScope;
     /** Size variant. small=26×16px, medium=30×18px, large=34×20px.
      * @defaultValue 'medium' */
     size?: 'small' | 'medium' | 'large';
@@ -64,5 +63,5 @@ export interface SwitchProps extends BaseProps {
  * form-associated and can be controlled with `checked` or left uncontrolled with
  * `defaultChecked`. Requires `@antadesign/anta/elements` on the client.
  */
-export declare const Switch: ({ checked, defaultChecked, disabled, tone, toneSelected, size, round, labelPosition, onStateChange, onChange, onValueChange, label, hint, className, style, children, tabIndex, ...rest }: SwitchProps) => any;
+export declare const Switch: ({ checked, defaultChecked, disabled, tone, toneScope, size, round, labelPosition, onStateChange, onChange, onValueChange, label, hint, className, style, children, tabIndex, ...rest }: SwitchProps) => any;
 export {};

package/dist/components/Switch.js

@@ -10,7 +10,7 @@ const Switch = ({
   defaultChecked,
   disabled,
   tone,
-  toneSelected,
+  toneScope,
   size,
   round,
   labelPosition,
@@ -28,15 +28,7 @@ const Switch = ({
   const computedStyle = roundStyle(
     round,
     "--switch-round",
-    toneStyle(
-      toneSelected,
-      "--switch-tone-source",
-      toneStyle(
-        tone,
-        "--switch-off-tone-source",
-        toneSelected == null ? toneStyle(tone, "--switch-tone-source", style) : style
-      )
-    )
+    toneStyle(tone, "--switch-tone-source", toneStyle(tone, "--switch-off-tone-source", style))
   );
   const explicitAriaLabel = rest["aria-label"];
   const ariaLabel = (typeof explicitAriaLabel === "string" ? explicitAriaLabel : void 0) ?? label ?? (typeof children === "string" ? children : void 0);
@@ -66,7 +58,7 @@ const Switch = ({
       "default-state": defaultStateAttr,
       disabled: disabled ? "" : void 0,
       tone,
-      "tone-selected": toneSelected,
+      "tone-scope": toneScope && toneScope !== "all" ? toneScope : void 0,
       size: size && size !== "medium" ? size : void 0,
       round: roundAttr(round),
       "label-position": labelPosition && labelPosition !== "end" ? labelPosition : void 0,

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

@@ -1,6 +1,6 @@
 import { Fragment, jsx, jsxs } from "@antadesign/anta/jsx-runtime";
 import { useState } from "../jsx-runtime";
-import { nativeStateChange, optionPresentationAttrs, toneStyle, roundStyle, roundAttr, wrapLabel } from "../anta_helpers";
+import { nativeStateChange, neutralToneAttr, optionPresentationAttrs, toneStyle, roundStyle, roundAttr, wrapLabel } from "../anta_helpers";
 import { Tooltip } from "./Tooltip";
 const Tabs = ({
   children,
@@ -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",
     {
@@ -59,7 +60,7 @@ const Tabs = ({
       state: controlled ? value : void 0,
       "default-state": !controlled ? defaultValue : void 0,
       priority: priority && priority !== "primary" ? priority : void 0,
-      tone: tone && tone !== "neutral" ? tone : void 0,
+      tone: neutralToneAttr(tone),
       size: size && size !== "medium" ? size : void 0,
       orientation: vertical ? "vertical" : void 0,
       fill: fill ? "" : void 0,
@@ -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/Tag.d.ts

@@ -28,8 +28,7 @@ export interface TagProps extends BaseProps {
      *  default — both render identically and emit no DOM attribute.
      *  @defaultValue medium */
     size?: 'small' | 'medium' | 'large';
-    /** Render in all-caps instead of the default normal (mixed) case
-     *  (uppercase tracks wider than the default body-text letter-spacing). */
+    /** Render in all-caps instead of the default normal (mixed) case. */
     allcaps?: boolean;
     /** Leading icon shape. Sits flush before the label, scaled to the pill. */
     icon?: IconShape;
@@ -59,8 +58,8 @@ export interface TagProps extends BaseProps {
  *   at 20px), so text is never clipped and the padding tokens can be
  *   retuned freely. An edge icon trims ~2px off its side's padding
  *   (optical), and icons scale to `--tag-icon-size`.
- * - Color comes from the theme-aware semantic tokens, so named tones need
- *   no `.dark` rules; the hairline border and the segment divider both
+ * - Color comes from the theme-aware semantic tokens and `light-dark()`; the
+ *   hairline border and the segment divider both
  *   derive from `--tag-text`, so every tone gets a matching edge. A lone
  *   `label` is dropped into `<a-tag-value>` by this wrapper so it keeps the
  *   default weight; `<a-tag-label>` only renders as the bold key before a
@@ -69,13 +68,12 @@ export interface TagProps extends BaseProps {
  *   elements) get a hairline left border per segment after the first; the
  *   flex `gap` sits left of the border and `padding-left` balances it.
  * - Custom tones (any non-named `tone`) keep the source hue with
- *   lightness/chroma pinned via oklch relative color; the `--_tag-*` knobs
- *   are the only numbers to tune and the `.dark` block re-tunes them. The
+ *   lightness/chroma pinned via oklch relative color. `light-dark()` selects
+ *   the matching ramp from the nearest inherited color scheme. The
  *   wrapper writes `--tag-tone-source` inline; a typed `attr()` fallback
  *   picks up raw `<a-tag tone="…">` on Chrome 133+/Safari 18.2+.
- * - `allcaps` switches on the uppercase transform and widens tracking to
- *   0.08ch (the default mixed case uses the body-text 0.02ch); tabular
- *   figures + `ss05` stay on. Each size steps down 1px under `allcaps`
+ * - `allcaps` switches on the uppercase transform; tabular figures stay on.
+ *   Each size steps down 1px under `allcaps`
  *   (uppercase reads larger than mixed case at the same px), with height
  *   unchanged.
  *

package/dist/components/Tag.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
-import { toneStyle } from "../anta_helpers";
+import { neutralToneAttr, toneStyle } from "../anta_helpers";
 import { Icon } from "./Icon";
 const Tag = ({
   icon,
@@ -15,7 +15,7 @@ const Tag = ({
   children,
   ...rest
 }) => {
-  const toneAttr = tone || void 0;
+  const toneAttr = neutralToneAttr(tone);
   const computedStyle = toneStyle(toneAttr, "--tag-tone-source", style);
   const hasValue = value != null;
   const isIconOnly = icon != null && label == null && value == null && children == null && iconTrailing == null;

package/dist/components/Text.js

@@ -1,10 +1,10 @@
 import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
-import { toneStyle } from "../anta_helpers";
+import { neutralToneAttr, toneStyle } from "../anta_helpers";
 import { Tooltip } from "./Tooltip";
 const Text = ({ priority, tone, size, inline, truncate, expandable, collapsible, className, style, children, ...rest }) => {
   const n = typeof truncate === "number" ? truncate : truncate ? 1 : null;
   const lineCount = n != null && n >= 1 ? n : null;
-  const toneAttr = tone || void 0;
+  const toneAttr = neutralToneAttr(tone);
   const computedStyle = toneStyle(
     toneAttr,
     "--text-tone-source",

package/dist/components/Title.js

@@ -1,7 +1,7 @@
 import { jsx } from "@antadesign/anta/jsx-runtime";
-import { toneStyle } from "../anta_helpers";
+import { neutralToneAttr, toneStyle } from "../anta_helpers";
 const Title = ({ level = 2, priority, tone, className, style, children, ...rest }) => {
-  const toneAttr = tone || void 0;
+  const toneAttr = neutralToneAttr(tone);
   return /* @__PURE__ */ jsx(
     "a-title",
     {

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: oklch(from var(--avatar-badge-tone-source) .62 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)}}.dark a-avatar{--avatar-badge-color: oklch(from var(--avatar-badge-tone-source) .68 var(--avatar-badge-chroma) h)}.dark a-avatar[badge=neutral]{--avatar-badge-chroma: .008}}
+@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: oklch(from var(--banner-tone-source) .5 .125 h);--banner-bg: oklch(from var(--banner-tone-source) .955 .02 h);--banner-border: oklch(from var(--banner-tone-source) .9 .04 h);.dark &{--banner-text: oklch(from var(--banner-tone-source) .77 .11 h);--banner-bg: oklch(from var(--banner-tone-source) .185 .05 h);--banner-border: 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 )}}