@antadesign/anta 0.3.33 → 0.3.35

package/dist/components/Slider.js

@@ -1,20 +1,17 @@
 import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
-import { neutralToneAttr, toneStyle, roundStyle, roundAttr, lengthStyle, cssLength } from "../anta_helpers";
+import { useNativeEventProps } from "../native-event-props";
+import { valueAttributes, unwrapNativeEvent, 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) => {
   const low = number(min, 0);
   return { min: low, max: Math.max(low, number(max, 100)) };
 };
 const attrsOf = (event) => {
-  const element = event?.target ?? {};
-  return {
-    value: element.value,
-    min: Number(element.getAttribute?.("min") ?? 0),
-    max: Number(element.getAttribute?.("max") ?? 100),
-    step: Number(element.getAttribute?.("step") ?? 1),
-    name: element.getAttribute?.("name") ?? void 0
-  };
+  const native = unwrapNativeEvent(event);
+  if (native.target && native.currentTarget && native.target !== native.currentTarget) return;
+  const attrs = native.detail;
+  if (!attrs || typeof attrs.min !== "number" || typeof attrs.max !== "number" || typeof attrs.step !== "number") return;
+  return { ...attrs, value: Array.isArray(attrs.value) ? [...attrs.value] : attrs.value };
 };
 const Slider = ({
   label,
@@ -42,6 +39,9 @@ const Slider = ({
   onChange,
   onValueChange,
   onValueCommit,
+  onKeyDown,
+  onPointerDown,
+  onPointerMove,
   className,
   style,
   children,
@@ -67,8 +67,9 @@ const Slider = ({
   const step = number(stepProp, 1) > 0 ? number(stepProp, 1) : 1;
   const explicitAriaLabel = rest["aria-label"];
   const ariaLabel = (typeof explicitAriaLabel === "string" ? explicitAriaLabel : void 0) ?? (typeof label === "string" || typeof label === "number" ? String(label) : void 0);
-  const range = Array.isArray(value) || Array.isArray(defaultValue);
-  const serializeValue = (input) => Array.isArray(input) ? `${input[0]} ${input[1]}` : typeof input === "number" ? input : void 0;
+  const controlled = value != null;
+  const range = Array.isArray(controlled ? value : defaultValue);
+  const serializeValue = (input) => Array.isArray(input) ? `${input[0]} ${input[1]}` : typeof input === "number" ? String(input) : void 0;
   const resolvedValueDisplay = valueDisplay === "inline" && label == null ? "end" : valueDisplay;
   const markerPosition = (marker) => {
     if (marker.value <= min) return "0%";
@@ -85,25 +86,25 @@ const Slider = ({
   const handleInput = onInput || onValueChange ? (event) => {
     const attrs = attrsOf(event);
     onInput?.(event);
-    onValueChange?.(event, attrs);
+    if (attrs) onValueChange?.(event, attrs);
   } : void 0;
   const handleChange = onChange || onValueCommit ? (event) => {
     const attrs = attrsOf(event);
     onChange?.(event);
-    onValueCommit?.(event, attrs);
+    if (attrs) onValueCommit?.(event, attrs);
   } : void 0;
+  const events = useNativeEventProps({ oninput: handleInput, onchange: handleChange, onkeydown: onKeyDown, onpointerdown: onPointerDown, onpointermove: onPointerMove });
   return /* @__PURE__ */ jsxs(
     "a-slider",
     {
-      value: serializeValue(value),
-      defaultvalue: serializeValue(defaultValue),
+      ...valueAttributes(serializeValue(value), serializeValue(defaultValue)),
       min,
       max,
       step,
       name,
       disabled: disabled ? "" : void 0,
       tone: neutralToneAttr(tone),
-      "thumb-tone": neutralToneAttr(thumbTone),
+      "thumb-tone": thumbTone || void 0,
       size: size && size !== "medium" ? size : void 0,
       "track-size": trackSizeValue,
       "thumb-size": thumbSizeValue,
@@ -117,13 +118,12 @@ const Slider = ({
       role: range ? "group" : "slider",
       "aria-label": ariaLabel,
       tabIndex: disabled || range ? -1 : tabIndex ?? 0,
-      oninput: handleInput,
-      onchange: handleChange,
+      ...events,
       class: className,
       style: computedStyle,
       ...rest,
       children: [
-        label != null && (isStringish(label) ? /* @__PURE__ */ jsx("span", { slot: "label", children: label }) : /* @__PURE__ */ jsx("span", { slot: "label", style: { display: "contents" }, children: label })),
+        label != null && /* @__PURE__ */ jsx("span", { slot: "label", children: label }),
         markers?.map((marker, index) => {
           const alignment = markerAlignment(marker);
           return /* @__PURE__ */ jsx(

package/dist/components/Steps.css

@@ -1 +1 @@
-@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}}}
+@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-tabs[orientation=vertical]>a-tab:state(selected)~a-tab{order:2}a-steps[data-orientation=vertical]>a-tabpanel{position:relative;order:1;grid-column:1;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))>a-tabpanel{min-height:max(0px,calc(var(--steps-marker-size) - var(--steps-vertical-gap)))}a-steps[data-orientation=vertical]:has(>a-tabpanel):has(>a-tabs[orientation=vertical]>a-tab:state(selected):not(:last-child))>a-tabpanel:before{content:"";position:absolute;inset-block:0 calc(-1 * var(--steps-vertical-gap));inset-inline-start:calc(-1 * var(--steps-content-indent) + var(--steps-marker-size) / 2 - var(--steps-connector-width) / 2);width:var(--steps-connector-width);min-height:var(--steps-marker-size);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))>a-tabpanel:before{background:var(--steps-complete-connector-color)}@media(forced-colors:active){a-tabs[data-steps][priority=secondary] a-tab:state(selected){background-color:transparent;border:0;box-shadow:none}a-step-marker{color:CanvasText;background-color:Canvas;border-color:CanvasText}a-tabs[data-steps] a-tab:state(selected):not([disabled]) a-step-marker{border-color:Highlight}}}

package/dist/components/Steps.d.ts

@@ -1,7 +1,6 @@
 import type { IconShape } from "../elements/a-icon.shapes";
 import type { OptionPresentationProps } from "../general_types";
 import type { TabsProps } from "./Tabs";
-import "./Steps.css";
 /** Named Anta tone used by Steps. */
 export type StepTone = "neutral" | "brand" | "info" | "success" | "warning" | "critical";
 /** Process state shown by one step. */

package/dist/components/Steps.js

@@ -4,7 +4,6 @@ import { useState } from "../jsx-runtime";
 import { Icon } from "./Icon";
 import { Loader } from "./Loader";
 import { Tabs } from "./Tabs";
-import "./Steps.css";
 const STATE_ICON = {
   incomplete: "circle-large",
   completed: "check",
@@ -80,22 +79,12 @@ const Steps = ({
       ] })
     };
   });
-  const currentIndex = options.findIndex(
-    (option) => option.value === currentValue
-  );
   const vertical = orientation === "vertical";
-  const hasPanels = children != null && children !== false;
-  const hasVerticalPanel = vertical && hasPanels;
-  const panelRow = (currentIndex >= 0 ? currentIndex : options.length - 1) + 2;
-  const rootStyle = hasVerticalPanel ? {
-    ...style,
-    "--steps-panel-row": panelRow
-  } : style;
   return /* @__PURE__ */ jsx(
     "a-steps",
     {
       class: className,
-      style: rootStyle,
+      style,
       id,
       ...rest,
       "data-orientation": vertical ? "vertical" : void 0,

package/dist/components/Tabs.d.ts

@@ -32,9 +32,10 @@ export interface TabOption extends OptionPresentationProps {
     round?: boolean;
     /** Per-tab tone override, same vocabulary as `<Tabs tone>` — colors this one tab's
      *  label + icons (all priorities/modes, named or custom color) and, when it's the
-     *  active tab, its indicator. For a **custom literal color** the sliding indicator can't
-     *  adopt it (the shared moving element can't read a descendant's color), so a custom tone
-     *  colors the label everywhere and the indicator only in `noslide`; the six **named**
+     *  active tab, its indicator. The track keeps the strip's tone. For a **custom literal
+     *  color** the sliding indicator can't adopt it (the shared moving element can't read
+     *  a descendant's color), so a custom tone colors the label everywhere and the indicator
+     *  only in `noslide`; the six **named**
      *  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 & {});
@@ -113,31 +114,27 @@ export interface TabsProps extends Omit<BaseProps, "onChange"> {
      *  per tab so it snaps with no movement. (Browsers without anchor positioning get that
      *  per-tab paint automatically — `noslide` is the explicit opt-out.) */
     noslide?: boolean;
-    /** Fully-round the tabs and the sliding indicator (and the primary track
-     *  well). Applies strip-wide; a single tab's `round` rounds just that tab. A
-     *  `number` (px) or CSS length string sets a custom radius on the top-level
-     *  track well only — the tab pills + indicator stay fully round. */
+    /** Fully-round the tabs, the sliding indicator, and the primary track.
+     *  Applies strip-wide; a single tab's `round` rounds just that tab. A
+     *  `number` (px) or CSS length string sets that radius on all three. */
     round?: boolean | number | string;
     /** Disable the whole strip. */
     disabled?: boolean;
 }
 /**
- * `<Tabs>` — a tablist with optional panels. The strip renders from the `options`
- * array; panels are `<TabPanel>` children that manage their own visibility.
+ * Tab strip with optional panels. Give each option a unique `value` and match
+ * it to a `TabPanel` to display content for the selected tab.
  *
- * The strip (`<a-tabs>`) and the panels render as flat siblings — there is no wrapper
- * element, so `className` / `id` / `style` / `...rest` land on the strip. Laying the
- * strip out relative to its panels is the consumer's job: a horizontal strip stacks
- * above the panels in normal flow; for a vertical strip beside them, wrap `<Tabs>` in
- * your own flex container. Any non-`TabPanel` children render verbatim as siblings too.
+ * The strip and panels render as siblings. `className`, `id`, `style`, and extra
+ * props apply to the strip. Keep the strip and panels under the same parent.
+ * Horizontal tabs stack in normal flow. Use a flex container to place a
+ * vertical strip beside its panels. Other children also render as siblings.
  *
- * `<a-tabs>` owns selection off-DOM (it sets each tab's `selected` property and the
- * roving `aria-activedescendant` via `ElementInternals`, writing no attribute to any
- * tab); this wrapper mirrors the value only to render the strip's roving `tabindex`,
- * and the panels read it straight from `<a-tabs>`. Controlled (`value` + `onStateChange`)
- * or uncontrolled (`defaultValue`).
+ * Pass `value` with `onStateChange` for controlled selection, or `defaultValue`
+ * for an initial uncontrolled selection. Panels are optional when the
+ * application renders the selected content itself.
  *
- * Requires `@antadesign/anta/elements` (client-side only).
+ * See [Install and configure](https://anta.design/install/) for runtime setup.
  *
  * @example
  * ```tsx

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, neutralToneAttr, optionPresentationAttrs, toneStyle, roundStyle, roundAttr, wrapLabel } from "../anta_helpers";
+import { useNativeEventProps } from "../native-event-props";
+import { nativeStateChange, neutralToneAttr, optionPresentationAttrs, toneStyle, roundStyle, roundAttr, wrapLabel, useSelectionMirror } from "../anta_helpers";
 import { Tooltip } from "./Tooltip";
 const Tabs = ({
   children,
@@ -27,8 +27,7 @@ const Tabs = ({
   ...rest
 }) => {
   const controlled = value !== void 0;
-  const [internalValue, setInternalValue] = useState(defaultValue);
-  const currentValue = controlled ? value : internalValue;
+  const [currentValue, setInternalValue] = useSelectionMirror(value, defaultValue);
   const tabs = options ?? [];
   const seen = /* @__PURE__ */ new Set();
   for (const t of tabs) {
@@ -48,6 +47,7 @@ const Tabs = ({
     onChange?.(e);
     onValueChange?.(e, { value: e.currentTarget?.value ?? null });
   } : void 0;
+  const events = useNativeEventProps({ onstatechange, onchange, onfocusin: onFocus, onfocusout: onBlur });
   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(
@@ -67,10 +67,7 @@ const Tabs = ({
       noslide: noslide ? "" : void 0,
       round: roundAttr(round),
       disabled: disabled ? "" : void 0,
-      onstatechange,
-      onchange,
-      onfocusin: onFocus,
-      onfocusout: onBlur,
+      ...events,
       class: className,
       id,
       style: roundStyle(round, "--tabs-round", toneStyle(tone, "--tabs-tone-source", style)),
@@ -107,7 +104,8 @@ const Tabs = ({
   );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     strip,
-    children
+    children,
+    /* @__PURE__ */ jsx("template", { "data-anta-tabs-end": "" })
   ] });
 };
 export {

package/dist/components/Text.d.ts

@@ -1,59 +1,78 @@
 import type { BaseProps } from "../general_types";
-/** Truncation / expansion axis. `expandable` only takes effect with `truncate`;
- *  `collapsible` only with `expandable` — so the type forbids `collapsible`
- *  unless `expandable` is set (a dynamic `expandable={cond}` is still allowed). */
+/** Expansion requires `truncate`. `expandableInert` and `collapsible` require
+ *  `expandable`; dynamic boolean values are allowed. */
 export type ExpandMode = {
     expandable?: never;
+    expandableInert?: never;
     collapsible?: never;
 } | {
-    /** Show a fade hint and chevron over the truncated text and let the user
-     *  expand it by clicking the chevron region or pressing Enter while the
-     *  chevron has keyboard focus. Only takes effect together with `truncate`.
-     *  On its own, expanding is **one-way** — the control is removed once
-     *  expanded; add `collapsible` for a two-way toggle. */
+    /** Show a fade and expansion control when truncated text overflows.
+     *  Select the control or focus it and press Enter or Space to reveal all
+     *  content. Expansion is one-way: the control hides once expanded.
+     *  Add `collapsible` to allow refolding. Requires `truncate`; disables the
+     *  automatic tooltip. The control comes first in Tab order. By default,
+     *  folded text stays selectable and its links remain focusable and clickable.
+     *  Single-line text fades at the inline end with an inline-end target;
+     *  multiline text fades over its last line with a full-width target.
+     *  Folded content clips without scrolling or extra padding, and expansion
+     *  preserves its width. */
     expandable: boolean;
-    /** Let the reader collapse back after expanding: the chevron becomes a
-     *  "Show more" / "Show less" toggle that stays visible while expanded.
-     *  Only takes effect together with `expandable`. */
+    /** Make the entire folded, overflowing preview an expand target.
+     *  JSX applies `inert` to its content, blocking focus, clicks, and text
+     *  selection and removing it from the accessibility tree until expanded.
+     *  Fitting text stays interactive, as does server-rendered content before
+     *  browser measurement. Requires `expandable`. */
+    expandableInert?: boolean;
+    /** Allow refolding after expansion. The control stays visible, rotates
+     *  its chevron, and switches between "Show more" and "Show less".
+     *  Requires `expandable`. The expanded collapse target spans the full
+     *  width over 16px of bottom padding; removing that padding with custom
+     *  CSS allows it to overlap content. */
     collapsible?: boolean;
 };
 export type TextProps = BaseProps & {
-    /** Visual priority. Maps to text-1..text-4 (`primary` = text-1, the
-     *  strongest). The default is `secondary` (text-2) — body text reads a
-     *  step softer than the strongest foreground; pass `primary` for emphasis.
+    /** Text emphasis, from `primary` (`--text-1`, strongest) to `quaternary`
+     *  (`--text-4`). `secondary` uses `--text-2`; `tertiary` uses `--text-3`.
+     *  Neutral primary/secondary links use `--link-color` and `--link-color-hover`.
+     *  Tertiary/quaternary links inherit the text color, with `--text-2` and
+     *  `--text-3` respectively on hover.
      *  @defaultValue secondary */
     priority?: 'primary' | 'secondary' | 'tertiary' | 'quaternary';
-    /** Color tint. `neutral` (the default) is the untinted `--text-{N}` scale; a
-     *  named tone applies the matching `--text-{N}-{tone}` palette. Any literal CSS
-     *  color (`'#ff1493'`, `'rebeccapurple'`) is a one-off custom tone — its hue is
-     *  kept while lightness/chroma are pinned per priority in oklch.
+    /** Color tint. `neutral` uses `--text-{N}`; named tones use
+     *  `--text-{N}-{tone}`. A CSS color such as `rebeccapurple` keeps its hue,
+     *  with lightness and chroma set per priority in oklch. With named tones,
+     *  links inherit the text color and hover uses the next-stronger tone level;
+     *  at `primary`, hover changes only the underline.
      *  @defaultValue neutral */
     tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
-    /** Type scale. `small` = 13/16, `medium` = 15/20, `large` = 17/24.
+    /** Font size / line height in pixels: `small` = 13/16, `medium` = 15/20,
+     *  `large` = 17/24.
      *  @defaultValue medium */
     size?: 'small' | 'medium' | 'large';
     /** Render as inline-block instead of the default block element. */
     inline?: boolean;
-    /** Truncate with a trailing ellipsis. `true` (or `1`) clamps to a
-     *  single line; any integer ≥ 2 clamps to that many lines; `0` or a
-     *  negative value means no truncation. A clipped, non-expandable JSX
-     *  `Text` shows its text content in a tooltip by default. Nest a
-     *  `<Tooltip>` to provide your own tooltip instead. Uses the
-     *  `-webkit-line-clamp` technique, supported in all major browsers
-     *  (Firefox 68+, Chrome, Safari, Edge). */
+    /** Clamp with a trailing ellipsis: `true` or `1` selects one line, integers
+     *  ≥ 2 select that many lines, and `0` or negative values disable truncation.
+     *  Clipped, non-expandable Text shows its content in an automatic tooltip.
+     *  Nest `<Tooltip>` to replace it or an empty tooltip to suppress it.
+     *  Uses CSS `-webkit-line-clamp` in `display: -webkit-box`, with `min-width: 0`
+     *  for flex and grid layouts. */
     truncate?: boolean | number;
 } & ExpandMode;
 /**
- * Block-level text container with priority and tone support.
+ * Light-DOM text with priority, tone, truncation, and optional expansion.
  *
- * Renders an `<a-text>` web component that scopes its descendants'
- * color hierarchy. Links nested inside follow the design system's
- * priority-aware link styling. Pass `inline` for an inline-block
- * variant, `truncate` for ellipsis truncation, and `expandable`
- * (combined with `truncate`) to let the user reveal the full text.
+ * Renders `<a-text>` with priority-aware colors for content and links.
+ * `inline` selects inline-block layout; `truncate` clamps text with an ellipsis.
+ * Pair `expandable` with `truncate` to let the reader reveal all content.
+ * Link underlines use 0.5px at 75% alpha, 1px at full alpha on hover,
+ * and restore the resting underline while active.
  *
- * Requires `@antadesign/anta/elements` to be imported (client-side only)
- * to register the underlying custom element.
+ * External CSS renders text and truncation before element registration.
+ * The browser element measures overflow and owns expansion off-DOM.
+ * Expandable Text places `a-button` before `a-text-content` in Tab order.
+ * Granular expansion also requires `@antadesign/anta/elements/a-button`;
+ * automatic tooltips require `@antadesign/anta/elements/a-tooltip`.
  *
  * @example Basic usage
  * ```tsx
@@ -62,7 +81,7 @@ export type TextProps = BaseProps & {
  *
  * @example Expandable truncated text
  * ```tsx
- * <Text truncate={3} expandable>…long paragraph…</Text>
+ * <Text truncate={3} expandable>A long description that the reader can expand.</Text>
  * ```
  */
-export declare const Text: ({ priority, tone, size, inline, truncate, expandable, collapsible, className, style, children, ...rest }: TextProps) => any;
+export declare const Text: ({ priority, tone, size, inline, truncate, expandable, collapsible, expandableInert, className, style, children, ...rest }: TextProps) => any;

package/dist/components/Text.js

@@ -1,34 +1,47 @@
 import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
-import { lineClamp, neutralToneAttr, toneStyle } from "../anta_helpers";
+import { lineClamp, nativeStateChange, neutralToneAttr, toneStyle } from "../anta_helpers";
+import { useMemo, useState } from "../jsx-runtime";
+import { useNativeEventProps } from "../native-event-props";
 import { Tooltip } from "./Tooltip";
-const Text = ({ priority, tone, size, inline, truncate, expandable, collapsible, className, style, children, ...rest }) => {
+function ExpandableText({ attributes, children, expandableInert }) {
+  const [presentation, setPresentation] = useState({ expanded: false, overflowing: false });
+  const onPresentation = useMemo(() => (input) => {
+    const { detail, isOwn } = nativeStateChange(input);
+    if (!isOwn || !detail) return;
+    setPresentation((previous) => previous.expanded === detail.expanded && previous.overflowing === detail.overflowing ? previous : detail);
+  }, []);
+  const eventProps = useNativeEventProps({ ontextpresentationchange: onPresentation });
+  return /* @__PURE__ */ jsxs("a-text", { ...attributes, "expandable-inert": expandableInert ? "" : void 0, ...eventProps, children: [
+    /* @__PURE__ */ jsx("a-button", { role: "button", tabIndex: 0, priority: "quaternary", paddingless: "" }),
+    /* @__PURE__ */ jsx("a-text-content", { inert: Boolean(expandableInert && presentation.overflowing && !presentation.expanded), children })
+  ] });
+}
+const Text = ({ priority, tone, size, inline, truncate, expandable, collapsible, expandableInert, className, style, children, ...rest }) => {
   const lineCount = lineClamp(truncate);
   const toneAttr = neutralToneAttr(tone);
   const computedStyle = toneStyle(
     toneAttr,
     "--text-tone-source",
-    lineCount != null ? { ...style, ["--line-clamp"]: lineCount } : style
+    lineCount != null && lineCount > 1 ? { ...style, ["--line-clamp"]: lineCount } : style
   );
   const canExpand = expandable && lineCount != null;
-  return /* @__PURE__ */ jsxs(
-    "a-text",
-    {
-      priority,
-      tone: toneAttr,
-      size,
-      inline: inline ? "" : void 0,
-      truncate: lineCount != null ? String(lineCount) : void 0,
-      expandable: canExpand ? "" : void 0,
-      collapsible: canExpand && collapsible ? "" : void 0,
-      class: className,
-      style: computedStyle,
-      ...rest,
-      children: [
-        children,
-        lineCount != null && !canExpand && /* @__PURE__ */ jsx(Tooltip, { truncatedOnly: true, "data-anta-text-tooltip": "" })
-      ]
-    }
-  );
+  const attributes = {
+    priority,
+    tone: toneAttr,
+    size,
+    inline: inline ? "" : void 0,
+    truncate: lineCount != null ? String(lineCount) : void 0,
+    expandable: canExpand ? "" : void 0,
+    collapsible: canExpand && collapsible ? "" : void 0,
+    class: className,
+    style: computedStyle,
+    ...rest
+  };
+  if (canExpand) return /* @__PURE__ */ jsx(ExpandableText, { attributes, expandableInert, children });
+  return /* @__PURE__ */ jsxs("a-text", { ...attributes, children: [
+    children,
+    lineCount != null && !canExpand && /* @__PURE__ */ jsx(Tooltip, { truncatedOnly: true, "data-anta-text-tooltip": "" })
+  ] });
 };
 export {
   Text

package/dist/components/Title.d.ts

@@ -1,7 +1,7 @@
 import type { BaseProps } from "../general_types";
 export interface TitleProps extends BaseProps {
-    /** Heading level, 1-6. Drives font-size, line-height, and vertical
-     *  rhythm. Also surfaced to assistive tech via `aria-level`
+    /** Heading level, 1–6. Sets the type scale and the
+     *  `aria-level` exposed to assistive technology
      *  (h1 is typically reserved for the page title).
      *  @defaultValue 2 */
     level?: 1 | 2 | 3 | 4 | 5 | 6;
@@ -14,46 +14,38 @@ export interface TitleProps extends BaseProps {
      *  kept while lightness/chroma are pinned per priority in oklch.
      *  @defaultValue neutral */
     tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    /** Typeface. Serif names the page and its parts; sans serif names objects on
+     *  the page, such as cards, panels, and metrics; monospace names technical
+     *  identifiers, such as run IDs, hashes, and file paths. Omit it to let the
+     *  theme choose by level: the Antithesis theme sets levels 1–3 in serif and
+     *  4–6 in sans serif, and other themes use sans serif throughout. */
+    font?: 'serif' | 'sans-serif' | 'monospace';
     /** Truncate with a trailing ellipsis. `true` (or `1`) clamps to a
      *  single line; any integer ≥ 2 clamps to that many lines; `0` or a
      *  negative value means no truncation. A clipped JSX `Title` shows its
      *  text content in a tooltip by default. Nest a `<Tooltip>` to provide
-     *  your own tooltip instead. */
+     *  your own tooltip instead.
+     * @author Vlad Korobov
+     */
     truncate?: boolean | number;
 }
 /**
  * Block-level heading with level 1-6, priority, tone, and optional truncation.
  *
- * Renders an `<a-title>` styled tag (no JS, no shadow DOM) with
- * `role="heading"` and `aria-level={level}` set by this wrapper for
- * accessibility. Children can be anything — text, icons, badges, links
- * — so there are no `icon` / `iconTrailing` props; compose
- * inside.
+ * The wrapper supplies `role="heading"` and `aria-level`. Compose icons,
+ * badges, and links as children. Title has no margins. Use the parent's `gap`
+ * or padding to space it within a layout.
  *
- * `<Title>` carries no vertical margins: it's a spacing-neutral atom
- * that drops into any container, and the parent owns spacing (a `gap`
- * or padding). Raw `<h1>`-`<h6>` do keep per-level top/bottom margins
- * (via `src/reset.css`) for document prose rhythm — so use a real
- * heading tag if SEO matters or you want that built-in rhythm and don't
- * need the `tone` / `priority` props.
+ * Native `<h1>`–`<h6>` headings use the same type scale with document margins
+ * when Anta's reset stylesheet is loaded.
  *
- * Styling notes (`a-title.css` ships comment-free): `<a-title>` is
- * intentionally CSS-only — no JS, no shadow DOM, not even
- * `customElements.define`; the browser treats it as a generic unknown
- * element and the CSS gives it block layout, the demi-bold variable-font
- * weight, and the per-level type scale. The matching `h1`–`h6` rules in
- * `src/reset.css` share that type scale and weight, so raw markup reads
- * the same as `<Title level={n}>` — they diverge only on margins: raw
- * headings carry the document vertical rhythm, `<a-title>` is margin-free.
- * The tone × priority color matrix has the same shape as `a-text`'s.
- *
- * Requires `@antadesign/anta/elements` to be imported (client-side only)
- * so the CSS ships with the page.
+ * See [Install and configure](https://anta.design/install/) for stylesheet setup.
  *
  * @example Basic usage
  * ```tsx
  * <Title level={1}>Page title</Title>
  * <Title level={2} tone="brand">Section</Title>
+ * <Title level={3} font="sans-serif">Run 4821: 12 failures</Title>
  * ```
  *
  * @example With children beyond text
@@ -63,4 +55,4 @@ export interface TitleProps extends BaseProps {
  * </Title>
  * ```
  */
-export declare const Title: ({ level, priority, tone, truncate, className, style, children, ...rest }: TitleProps) => any;
+export declare const Title: ({ level, priority, tone, font, truncate, className, style, children, ...rest }: TitleProps) => any;

package/dist/components/Title.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
 import { lineClamp, neutralToneAttr, toneStyle } from "../anta_helpers";
 import { Tooltip } from "./Tooltip";
-const Title = ({ level = 2, priority, tone, truncate, className, style, children, ...rest }) => {
+const Title = ({ level = 2, priority, tone, font, truncate, className, style, children, ...rest }) => {
   const lineCount = lineClamp(truncate);
   const toneAttr = neutralToneAttr(tone);
   const computedStyle = toneStyle(
@@ -15,6 +15,7 @@ const Title = ({ level = 2, priority, tone, truncate, className, style, children
       level: String(level),
       priority,
       tone: toneAttr,
+      font,
       truncate: lineCount != null ? String(lineCount) : void 0,
       role: "heading",
       "aria-level": level,

package/dist/components/Toaster.js

@@ -2,10 +2,17 @@ import { jsx } from "@antadesign/anta/jsx-runtime";
 import { useMemo, useSyncExternalStore } from "../jsx-runtime";
 import { createToaster } from "../toaster";
 import { Banner } from "./Banner";
+import { useNativeEventProps } from "../native-event-props";
+import { nativeStateChange, isDOMNode } from "../anta_helpers";
 const ToastItem = ({ entry, store }) => {
   const content = useMemo(() => entry.render(entry.id), [entry.id, entry.rev]);
-  const isNode = typeof Node !== "undefined" && content instanceof Node;
+  const isNode = isDOMNode(content);
   const isText = typeof content === "string" || typeof content === "number";
+  const eventProps = useNativeEventProps({
+    ondismiss: (event) => {
+      if (nativeStateChange(event).isOwn) store.remove(entry.id);
+    }
+  });
   const common = {
     slot: entry.placement,
     duration: entry.duration,
@@ -17,7 +24,7 @@ const ToastItem = ({ entry, store }) => {
     // announcement) unless requested.
     role: entry.politeness === "assertive" ? "alert" : entry.politeness === "polite" ? "status" : void 0,
     // Fires after the exit animation; that's when the entry actually leaves.
-    ondismiss: () => store.remove(entry.id)
+    ...eventProps
   };
   if (isNode) return /* @__PURE__ */ jsx("a-toast", { ...common, content });
   if (isText)