@antadesign/anta 0.3.24 → 0.3.26

package/dist/components/Banner.d.ts

@@ -1,9 +1,8 @@
 import type { BaseProps } from "../general_types";
-/** Public props for the `<Banner>` message strip. `message` is the leading
- *  content, `children` sit between it and `actions`, all centered in one row. */
+/** Props for the `<Banner>` message strip. `message` leads, `children` precede
+ *  `actions`, and `align` places the row. */
 export interface BannerProps extends BaseProps {
-    /** Leading message — a string (rendered at the banner type scale) or any node.
-     *  Centered in the bar, followed by `children` and then `actions`. */
+    /** Leading message: a string at the banner type scale or any node. */
     message?: React.ReactNode;
     /** Trailing controls (buttons, links) rendered as a compact row after the
      *  message and `children`. */
@@ -16,6 +15,10 @@ export interface BannerProps extends BaseProps {
      *  lightness/chroma are pinned. `'neutral'` (the default) is the same as omitting it.
      *  @defaultValue 'neutral' */
     tone?: "neutral" | "brand" | "info" | "success" | "warning" | "critical" | (string & {});
+    /** Positions the content row. `'start'` aligns it to the inline edge; `'center'`
+     *  centers it. Wrapped message text follows the selected alignment.
+     *  @defaultValue 'start' */
+    align?: "start" | "center";
     /** Rounded corners for a standalone, floating banner (`border-radius: 999px`,
      *  which clamps to a stadium) instead of the edge-to-edge strip. Still borderless
      *  by default. Pass a `number` (px) or a CSS length string for a custom radius. */
@@ -45,11 +48,8 @@ export interface BannerProps extends BaseProps {
     onDismiss?: () => void;
 }
 /**
- * `<Banner>` — a full-width, dismissible message strip with a bottom border.
- *
- * A close cousin of `<Card>` with a small, centered horizontal payload:
- * `message` leads, `children` sit in the middle, `actions` trail, and (when
- * `closable`) a 40px-wide, full-height ✕ fills the right edge without shifting the centered group.
+ * `<Banner>` — a full-width, dismissible message strip. `message`, `children`, and
+ * `actions` form a row at the inline start by default; `align="center"` centers it.
  *
  * A pure, stateless pass-through to `<a-banner>`: the element owns dismissal and
  * visibility, so the wrapper holds no state and grabs no ref — it maps props to
@@ -76,4 +76,4 @@ export interface BannerProps extends BaseProps {
  * <Banner message="Saved." dismissed={hidden} onDismiss={() => setHidden(true)} />
  * ```
  */
-export declare const Banner: ({ message, actions, tone, round, closable, role, dismissed, defaultDismissed, onDismiss, className, style, children, ...rest }: BannerProps) => any;
+export declare const Banner: ({ message, actions, tone, align, round, closable, role, dismissed, defaultDismissed, onDismiss, className, style, children, ...rest }: BannerProps) => any;

package/dist/components/Banner.js

@@ -5,6 +5,7 @@ const Banner = ({
   message,
   actions,
   tone,
+  align,
   round,
   closable,
   role = "status",
@@ -29,6 +30,7 @@ const Banner = ({
       state: controlled ? dismissed ? "closed" : "open" : void 0,
       "default-state": !controlled ? defaultDismissed ? "closed" : "open" : void 0,
       tone: tone && tone !== "neutral" ? tone : void 0,
+      align: align === "center" ? "center" : void 0,
       round: roundAttr(round),
       role,
       onstatechange: onDismiss ? (e) => {
@@ -41,7 +43,7 @@ const Banner = ({
       children: [
         messageNode,
         children,
-        actions != null && /* @__PURE__ */ jsx("span", { slot: "actions", style: { display: "contents" }, children: actions }),
+        actions != null && /* @__PURE__ */ jsx("span", { "data-anta-banner-actions-wrapper": "", slot: "actions", style: { display: "contents" }, children: actions }),
         closable !== false && // A real <a-button> (light DOM → fully styled, keyboard-focusable) in the
         // element's `close` slot. It fires the bubbling `dismissrequest` event via
         // a-button's global listener, so dismissing works even without framework

package/dist/components/Box.d.ts

@@ -0,0 +1,37 @@
+import type { BoxContextChange, BoxDisplay, BoxMeasurementChange } from '../box-types';
+import type { BaseProps } from '../general_types';
+/** JSX props for the observing light-DOM `<a-box>` container. */
+export interface BoxProps extends BaseProps {
+    /** Layout model for the host. All other layout, sizing, mask, and shadow
+     * properties stay ordinary `className` / `style` CSS on the Box itself.
+     * @defaultValue block */
+    display?: BoxDisplay;
+    /** Fully-round corners (`border-radius: 999px`, clamped to the box). Pass a
+     * `number` (px) or a CSS length string (`'1rem'`) for a custom radius. Omit
+     * for square corners. */
+    round?: boolean | number | string;
+    /** Gap between children, matching the CSS `gap` property. A `number` is
+     * pixels; a string is any CSS length or two-value gap (`'1rem'`,
+     * `'8px 16px'`). Applies while the Box is a flex or grid container. */
+    gap?: number | string;
+    /** What the Box watches, when a handler is not what turns it on. `'size'`
+     * keeps the overflow CSS states (`:state(clipped-x)`, `:state(scrollable-y)`,
+     * …) current — reach for it when your own CSS is the only reader. `'context'`
+     * and `'all'` are there for symmetry; passing `onMeasureChange` or
+     * `onContextChange` already turns the matching half on. */
+    observe?: 'size' | 'context' | 'all';
+    /** Fades out every edge that currently hides clipped content, and drops the
+     * fade from an edge once the reader scrolls to it. */
+    fade?: boolean;
+    /** Depth of the `fade` gradient. A `number` is pixels; a string is any CSS
+     * length.
+     * @defaultValue 24 */
+    fadeSize?: number | string;
+    /** Fired after Box geometry or its content-overflow state changes. `detail`
+     * contains the changed fields and a full current snapshot. */
+    onMeasureChange?: (event: CustomEvent<BoxMeasurementChange>, detail: BoxMeasurementChange) => void;
+    /** Fired after Box's browser and local rendering context changes. `detail`
+     * contains the changed fields and a full current snapshot. */
+    onContextChange?: (event: CustomEvent<BoxContextChange>, detail: BoxContextChange) => void;
+}
+export declare const Box: ({ display, round, gap, observe, fade, fadeSize, onMeasureChange, onContextChange, className, style, children, ...rest }: BoxProps) => any;

package/dist/components/Box.js

@@ -0,0 +1,63 @@
+import { jsx } from "@antadesign/anta/jsx-runtime";
+import {
+  cssLength,
+  lengthStyle,
+  nativeStateChange,
+  roundAttr,
+  roundStyle
+} from "../anta_helpers";
+function observeAttr(observe, onMeasureChange, onContextChange) {
+  const size = observe === "size" || observe === "all" || onMeasureChange != null;
+  const context = observe === "context" || observe === "all" || onContextChange != null;
+  if (size && context) return "all";
+  if (size) return "size";
+  if (context) return "context";
+  return void 0;
+}
+const Box = ({
+  display,
+  round,
+  gap,
+  observe,
+  fade,
+  fadeSize,
+  onMeasureChange,
+  onContextChange,
+  className,
+  style,
+  children,
+  ...rest
+}) => {
+  const measureHandler = onMeasureChange ? (input) => {
+    const { event, detail } = nativeStateChange(input);
+    if (detail) onMeasureChange(event, detail);
+  } : void 0;
+  const contextHandler = onContextChange ? (input) => {
+    const { event, detail } = nativeStateChange(input);
+    if (detail) onContextChange(event, detail);
+  } : void 0;
+  return /* @__PURE__ */ jsx(
+    "a-box",
+    {
+      display: display === "block" ? void 0 : display,
+      round: roundAttr(round),
+      gap: gap != null ? "" : void 0,
+      observe: observeAttr(observe, onMeasureChange, onContextChange),
+      fade: fade ? "" : void 0,
+      "fade-size": fade && fadeSize != null ? cssLength(fadeSize) : void 0,
+      onmeasurechange: measureHandler,
+      oncontextchange: contextHandler,
+      class: className,
+      style: lengthStyle(
+        fade ? fadeSize : void 0,
+        "--box-fade-size",
+        lengthStyle(gap, "--box-gap", roundStyle(round, "--box-round", style))
+      ),
+      ...rest,
+      children
+    }
+  );
+};
+export {
+  Box
+};

package/dist/components/Breadcrumbs.css

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

package/dist/components/ButtonCopy.d.ts

@@ -32,8 +32,8 @@ export type ButtonCopyProps = ButtonProps & {
 /**
  * Copy button — a `Button` preset for copy-to-clipboard. Set `copy` for a literal
  * string, `copyNode` to copy a DOM region, or `copyUrl` to copy the current page
- * URL. For content computed on demand, keep `copy` reactive and refresh it in
- * `onCopyRequest` (fired on pointerdown / keydown).
+ * URL. For dynamic text, pass a controlled `copy` string and set it in
+ * `onCopyRequest` before activation.
  *
  * It composes a plain `<Button>` with a slotted `<a-copy>` child that performs
  * the write — the button itself carries no copy behavior. This wrapper flips the

package/dist/components/InputDate.css

@@ -1 +1 @@
-@layer anta{a-input-date-time-container{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px;padding-top:8px;border-top:1px solid var(--border-3)}}
+@layer anta.components{a-input-date-time-container{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px;padding-top:8px;border-top:1px solid var(--border-3)}}

package/dist/components/MenuItem.d.ts

@@ -12,7 +12,11 @@ export interface MenuItemCommonProps extends BaseProps {
      *  option `hint`. Requires `label` (it stacks in a column beneath it). Muted
      *  (`--text-3`) and tracks the row's `tone`. A string, or any node. */
     hint?: React.ReactNode;
-    /** A trailing keyboard-shortcut hint, e.g. `"⌘E"`. */
+    /** Trailing shortcut hint, e.g. `"⌘E"`. Anta translates it to
+     *  `aria-keyshortcuts` and hides the visual glyphs from assistive technology.
+     *  Use `+` within a chord and spaces between shortcuts (`"⌘K ⌘S"` becomes
+     *  `"Meta+K Meta+S"`). Pass `aria-keyshortcuts` to override the translation.
+     *  This does not bind the shortcut. */
     kbd?: string;
     /** A trailing icon. On a `submenu` item this **overrides** the default
      *  chevron (omit it to keep the chevron); on a normal item it's the trailing

package/dist/components/MenuItem.js

@@ -1,5 +1,70 @@
 import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
 import { toneStyle } from "../anta_helpers";
+const SHORTCUT_KEYS = {
+  "\u2318": "Meta",
+  cmd: "Meta",
+  command: "Meta",
+  win: "Meta",
+  super: "Meta",
+  "\u2303": "Control",
+  ctrl: "Control",
+  control: "Control",
+  "\u2325": "Alt",
+  alt: "Alt",
+  opt: "Alt",
+  option: "Alt",
+  "\u21E7": "Shift",
+  shift: "Shift",
+  "\u21B5": "Enter",
+  "\u23CE": "Enter",
+  enter: "Enter",
+  return: "Enter",
+  "\u232B": "Backspace",
+  backspace: "Backspace",
+  "\u2326": "Delete",
+  del: "Delete",
+  delete: "Delete",
+  "\u238B": "Escape",
+  esc: "Escape",
+  escape: "Escape",
+  "\u21E5": "Tab",
+  tab: "Tab",
+  "\u2423": "Space",
+  space: "Space",
+  "\u2191": "ArrowUp",
+  "\u2193": "ArrowDown",
+  "\u2190": "ArrowLeft",
+  "\u2192": "ArrowRight",
+  "\u21DE": "PageUp",
+  "\u21DF": "PageDown",
+  "\u2196": "Home",
+  "\u2198": "End"
+};
+function shortcutChordLabel(kbd) {
+  const parts = [];
+  let word = "";
+  const flush = () => {
+    if (!word) return;
+    parts.push(SHORTCUT_KEYS[word.toLowerCase()] ?? (word.length === 1 ? word.toUpperCase() : word));
+    word = "";
+  };
+  for (const char of kbd) {
+    if (SHORTCUT_KEYS[char]) {
+      flush();
+      parts.push(SHORTCUT_KEYS[char]);
+    } else if (char === "+") {
+      flush();
+    } else {
+      word += char;
+    }
+  }
+  flush();
+  return parts.length ? parts.join("+") : void 0;
+}
+function shortcutLabel(kbd) {
+  const shortcuts = kbd.trim().replace(/\s*\+\s*/g, "+").split(/\s+/).map(shortcutChordLabel).filter((shortcut) => shortcut !== void 0);
+  return shortcuts.length ? shortcuts.join(" ") : void 0;
+}
 const MenuItem = ({
   icon,
   label,
@@ -34,6 +99,9 @@ const MenuItem = ({
   const keepTint = selected && (selectionIndicator === void 0 || selectionIndicator === "check");
   const effectiveTone = selected && toneSelected || tone;
   const toneAttr = effectiveTone && effectiveTone !== "neutral" ? effectiveTone : void 0;
+  const declaredShortcuts = rest["aria-keyshortcuts"];
+  const keyShortcuts = kbd ? shortcutLabel(kbd) : void 0;
+  const kbdNode = kbd ? /* @__PURE__ */ jsx("kbd", { "aria-hidden": declaredShortcuts ?? keyShortcuts ? "true" : void 0, children: kbd }) : null;
   const labelNode = label != null && (hint != null ? /* @__PURE__ */ jsxs("a-menu-item-text", { children: [
     /* @__PURE__ */ jsx("a-menu-item-label", { children: label }),
     /* @__PURE__ */ jsx("a-menu-item-hint", { children: hint })
@@ -50,6 +118,7 @@ const MenuItem = ({
       tabIndex: disabled ? -1 : 0,
       "aria-disabled": disabled ? "true" : void 0,
       "aria-current": selected ? "true" : void 0,
+      "aria-keyshortcuts": keyShortcuts,
       tone: toneAttr,
       style: toneStyle(effectiveTone, "--menu-item-tone-source", style),
       onClick: onSelect && !disabled ? (e) => onSelect(e, { value, label }) : void 0,
@@ -59,7 +128,7 @@ const MenuItem = ({
       icon && /* @__PURE__ */ jsx("a-icon", { shape: icon, "aria-hidden": "true" }),
       labelNode,
       children,
-      kbd && /* @__PURE__ */ jsx("kbd", { children: kbd }),
+      kbdNode,
       iconTrailing && /* @__PURE__ */ jsx("a-icon", { shape: iconTrailing, "aria-hidden": "true" })
     ] });
   }
@@ -76,6 +145,7 @@ const MenuItem = ({
       submenu: submenu ? "" : void 0,
       "aria-haspopup": submenu ? "menu" : void 0,
       "aria-disabled": disabled ? "true" : void 0,
+      "aria-keyshortcuts": keyShortcuts,
       onmenuselect: onSelect ? (e) => onSelect(e, { value, label }) : void 0,
       class: className,
       ...rest,
@@ -120,7 +190,7 @@ const MenuItem = ({
         leadingIcon && /* @__PURE__ */ jsx("a-icon", { shape: leadingIcon, "aria-hidden": "true" }),
         labelNode,
         children,
-        kbd && /* @__PURE__ */ jsx("kbd", { children: kbd }),
+        kbdNode,
         (() => {
           let trailing = submenu ? iconTrailing ?? "chevron-right" : iconTrailing;
           if (!submenu && !iconTrailing && selectionIndicator === "check" && indicator == null)

package/dist/components/MenuItemCopy.d.ts

@@ -25,8 +25,8 @@ export type MenuItemCopyProps = MenuItemCommonProps & MenuItemActionMode & {
 /**
  * Copying menu item — a `MenuItem` preset for copy-to-clipboard rows inside a
  * `Menu`. Set `copy` for a literal string, `copyNode` to copy a DOM region, or
- * `copyUrl` to copy the current page URL. For content computed on demand, keep
- * `copy` reactive and refresh it in `onCopyRequest` (fired on pointerdown / keydown).
+ * `copyUrl` to copy the current page URL. For dynamic text, pass a controlled
+ * `copy` string and set it in `onCopyRequest` before activation.
  *
  * It composes a plain `<MenuItem>` with a slotted `<a-copy>` child that performs
  * the write when the row is chosen — the item itself carries no copy behavior.

package/dist/components/Steps.css

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

package/dist/components/copy-props.d.ts

@@ -10,10 +10,9 @@ export type CopyTarget = {
     copy: string;
     /** Prefix the copied text with `// URL: <current page URL>`. */
     copyWithUrl?: boolean;
-    /** Compute the copy content lazily. Fires on pointerdown / keydown; update
-     *  `copy` (a state change) here and the activation copies the latest value.
-     *  The gap lets the update land even off the UI thread — only the
-     *  serializable `copy` string crosses. */
+    /** Refresh a dynamic `copy` value before activation. Set the new string in
+     *  application state so the next render updates `copy`. Return values are
+     *  ignored. Fires on pointerdown and Enter/Space keydown. */
     onCopyRequest?: () => void;
     /** Fires after the copy attempt with whether it succeeded. */
     onCopied?: (ok: boolean) => void;

package/dist/components/select-parts.css

@@ -1 +1 @@
-@layer anta{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 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}}

package/dist/elements/a-avatar.css

@@ -1 +1 @@
-@layer anta{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-round: attr(round type(<length>));--avatar-radius: var(--avatar-round, 50%);--avatar-badge-inset: calc(var(--avatar-size) * .03)}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 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}}

package/dist/elements/a-banner.css

@@ -1 +1 @@
-@layer anta{a-banner{--banner-bg: var(--bg-4);--banner-border: var(--border-4);--banner-text: var(--text-2);display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 1ch;position:relative;box-sizing:border-box;width:100%;min-height:40px;padding:6px 52px;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[round]{--banner-round: attr(round type(<length>));border-radius:var(--banner-round, 999px)}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: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: attr(tone type(<color>), 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)}}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 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}}}

package/dist/elements/a-banner.js

@@ -11,6 +11,7 @@ const SHADOW_STYLE = `
     gap: 4px;
     flex-shrink: 0;
   }
+  slot[name="actions"][hidden] { display: none; }
 
   slot[name="close"] {
     position: absolute;
@@ -57,10 +58,21 @@ class ABannerElement extends HTMLElementBase {
     const actionsSlot = document.createElement("slot");
     actionsSlot.name = "actions";
     actionsSlot.setAttribute("part", "actions");
+    const syncActionsSlot = () => {
+      actionsSlot.hidden = !actionsSlot.assignedNodes({ flatten: true }).some((node) => {
+        if (node.nodeType === Node.TEXT_NODE) return node.textContent?.trim() !== "";
+        if (node.nodeType !== Node.ELEMENT_NODE) return false;
+        const element = node;
+        return !element.hasAttribute("data-anta-banner-actions-wrapper") || !element.matches(":empty");
+      });
+    };
+    actionsSlot.hidden = true;
+    actionsSlot.addEventListener("slotchange", syncActionsSlot);
     const closeSlot = document.createElement("slot");
     closeSlot.name = "close";
     closeSlot.setAttribute("part", "close");
     shadow.append(style, messageSlot, contentSlot, actionsSlot, closeSlot);
+    syncActionsSlot();
     this.addEventListener(DISMISS_TRIGGER, (e) => {
       e.stopPropagation();
       this.#requestDismiss();
@@ -102,11 +114,11 @@ class ABannerElement extends HTMLElementBase {
     if (!this.#internals) return;
     try {
       if (state === "closed") {
-        this.#internals.states.add("closed");
-        this.#internals.states.delete("open");
+        this.#internals?.states?.add("closed");
+        this.#internals?.states?.delete("open");
       } else {
-        this.#internals.states.add("open");
-        this.#internals.states.delete("closed");
+        this.#internals?.states?.add("open");
+        this.#internals?.states?.delete("closed");
       }
     } catch {
     }

package/dist/elements/a-box.css

@@ -0,0 +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 )}}

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

@@ -0,0 +1,41 @@
+import { HTMLElementBase } from '../anta_helpers';
+import type { BoxContext, BoxMeasurement } from '../box-types';
+import './a-box.css';
+/**
+ * `<a-box>` is a light-DOM container that observes itself. It leaves the host
+ * and its children entirely to the renderer: all output is read-only getters,
+ * `measurechange` / `contextchange` events, and private `ElementInternals`
+ * states. This keeps measurement usable when JSX itself cannot access the DOM.
+ *
+ * Observation is opt-in by attribute and pauses off screen. `fade` or
+ * `observe="size"` turns measurement on, `observe="context"` turns
+ * `contextchange` on, `observe="all"` (or a bare `observe`) turns on both, and a box
+ * with neither runs no observers at all — not even the shared visibility one.
+ * The `measurement` / `context` / `isTruncated` getters still read on demand.
+ *
+ * Attributes rather than "is a listener attached" on purpose. A listener tally
+ * cannot see listeners added before the element upgrades (the SSR pattern in
+ * AGENTS.md), cannot see `once` or `AbortSignal` removals, and churns on every
+ * React 19 render, because React removes and re-adds an `on*` prop whenever its
+ * identity changes. The JSX wrapper stamps both attributes from its handler
+ * props, so this is invisible to anyone using `Box`.
+ */
+export declare class ABoxElement extends HTMLElementBase {
+    #private;
+    static observedAttributes: string[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    /** A fresh measurement snapshot. For notifications, prefer `measurechange`:
+     * it batches browser observers and includes the field-level delta. */
+    get measurement(): BoxMeasurement;
+    /** A fresh context snapshot. For changes, prefer `contextchange`. */
+    get context(): BoxContext;
+    /** Allows a nested `Tooltip truncatedOnly` to use Box's clipping decision. */
+    get isTruncated(): boolean;
+    /** Called by the per-window context cache. It is intentionally not a JSX prop. */
+    contextStoreDidChange(): void;
+    /** Called by the per-window visibility observer. Also not a JSX prop. */
+    visibilityDidChange(visible: boolean): void;
+}
+export declare function register_a_box(): void;