@antadesign/anta 0.3.2 → 0.3.3

package/dist/components/Select.js

@@ -0,0 +1,290 @@
+import { Fragment, jsx, jsxs } from "@antadesign/anta/jsx-runtime";
+import { useState, useId } from "../jsx-runtime";
+import { Input } from "./Input";
+import { Icon } from "./Icon";
+import { Menu } from "./Menu";
+import { MenuItem } from "./MenuItem";
+import { MenuGroup } from "./MenuGroup";
+import { MenuSeparator } from "./MenuSeparator";
+import styles from "./Select.module.css";
+const normalize = (o) => typeof o === "string" ? { value: o, label: o } : o;
+const Select = (props) => {
+  const {
+    options,
+    selection,
+    indicator,
+    value,
+    defaultValue,
+    onValueChange,
+    placeholder,
+    icon,
+    label,
+    hint,
+    size,
+    status,
+    statusIcon,
+    round,
+    disabled,
+    toneSelected,
+    filter,
+    selectAll,
+    selectAllLabel = "Select all",
+    renderOption,
+    renderIndicator,
+    renderTrigger,
+    renderEmpty,
+    className,
+    style,
+    ...rest
+  } = props;
+  const multiple = selection === "multiple";
+  const statusColor = status && status !== "neutral" ? `var(--text-2-${status})` : void 0;
+  const mark = multiple ? "checkbox" : indicator ?? "none";
+  const menuItemIndicator = mark === "none" ? void 0 : mark;
+  const emit = onValueChange;
+  const controlled = value !== void 0;
+  const [internal, setInternal] = useState(defaultValue);
+  const currentRaw = controlled ? value : internal;
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const uid = useId();
+  const isSubmenu = (it) => typeof it === "object" && Array.isArray(it.submenu);
+  const isGroup = (it) => typeof it === "object" && Array.isArray(it.options);
+  const collectLeaves = (items, group, disabled2, out) => {
+    for (const raw of items) {
+      if (typeof raw !== "string" && isSubmenu(raw)) collectLeaves(raw.submenu, raw.label, disabled2 || !!raw.disabled, out);
+      else if (typeof raw !== "string" && isGroup(raw)) collectLeaves(raw.options, raw.label, disabled2 || !!raw.disabled, out);
+      else {
+        const o = normalize(raw);
+        out.push({ opt: o, disabled: disabled2 || !!o.disabled, group });
+      }
+    }
+  };
+  const allLeaves = [];
+  collectLeaves(options, void 0, false, allLeaves);
+  const byValue = new Map(allLeaves.map((l) => [l.opt.value, l.opt]));
+  const filtering = filter !== void 0 && filter !== false;
+  const q = query.trim();
+  const escapeRe = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  const queryRe = filtering && typeof filter !== "function" && q ? new RegExp(q.split(/\s+/).map(escapeRe).join("\\s+"), "i") : null;
+  const matches = (o) => typeof filter === "function" ? filter(o, q) : !queryRe || [o.value, o.label ?? "", o.hint ?? ""].some((s) => queryRe.test(s));
+  const prune = typeof filter === "function" || filtering && !!q;
+  const visibleLeaves = prune ? allLeaves.filter((l) => matches(l.opt)) : allLeaves;
+  const flattening = filtering && !!q;
+  const highlight = (text) => {
+    if (!queryRe) return text;
+    const re = new RegExp(queryRe.source, "gi");
+    const out = [];
+    let last = 0;
+    let m;
+    while ((m = re.exec(text)) !== null) {
+      if (m.index > last) out.push(text.slice(last, m.index));
+      out.push(/* @__PURE__ */ jsx("b", { children: m[0] }, out.length));
+      last = m.index + m[0].length;
+      if (m[0].length === 0) re.lastIndex++;
+    }
+    if (out.length === 0) return text;
+    if (last < text.length) out.push(text.slice(last));
+    return out;
+  };
+  const selectedValues = Array.isArray(currentRaw) ? currentRaw : currentRaw != null ? [currentRaw] : [];
+  const isSelected = (v) => selectedValues.includes(v);
+  const selectedOptions = selectedValues.map((v) => byValue.get(v)).filter(Boolean);
+  let display = "";
+  if (multiple) {
+    if (selectedOptions.length === 1) display = selectedOptions[0].label ?? selectedOptions[0].value;
+    else if (selectedOptions.length > 1) display = `${selectedOptions.length} selected`;
+  } else if (currentRaw != null) {
+    const o = byValue.get(currentRaw);
+    display = o ? o.label ?? o.value : "";
+  }
+  const choose = (o) => {
+    if (multiple) {
+      const has = selectedValues.includes(o.value);
+      const next = has ? selectedValues.filter((v) => v !== o.value) : [...selectedValues, o.value];
+      if (!controlled) setInternal(next);
+      emit?.(next, { value: o.value, option: o, selected: !has });
+    } else {
+      if (!controlled) setInternal(o.value);
+      emit?.(o.value, { value: o.value, option: o });
+    }
+  };
+  const enabledValues = multiple ? visibleLeaves.filter((l) => !l.disabled).map((l) => l.opt.value) : [];
+  const enabledSelected = enabledValues.filter((v) => selectedValues.includes(v));
+  const allSelected = enabledValues.length > 0 && enabledSelected.length === enabledValues.length;
+  const someSelected = enabledSelected.length > 0 && !allSelected;
+  const toggleAll = () => {
+    const keep = selectedValues.filter((v) => !enabledValues.includes(v));
+    const next = allSelected ? keep : [...keep, ...enabledValues];
+    if (!controlled) setInternal(next);
+    emit?.(next, { all: true, selected: !allSelected });
+  };
+  const renderOptionRow = (o, disabled2) => {
+    const optState = { value: o.value, selected: isSelected(o.value), disabled: disabled2 };
+    const custom = renderOption?.(o, optState);
+    const customMark = renderIndicator?.(optState);
+    const ariaSelectable = !multiple && mark === "none" ? { role: "menuitemradio", "aria-checked": isSelected(o.value) ? "true" : "false" } : void 0;
+    return /* @__PURE__ */ jsx(
+      MenuItem,
+      {
+        id: `${uid}-opt-${o.value}`,
+        selectionIndicator: menuItemIndicator,
+        ...ariaSelectable,
+        indicator: customMark ?? void 0,
+        label: custom ? void 0 : queryRe ? highlight(o.label ?? o.value) : o.label ?? o.value,
+        hint: custom ? void 0 : queryRe && o.hint ? highlight(o.hint) : o.hint,
+        icon: custom ? void 0 : o.icon,
+        tone: o.tone,
+        toneSelected,
+        selected: isSelected(o.value),
+        disabled: disabled2 || void 0,
+        "data-menu-open": multiple ? "" : void 0,
+        onSelect: () => choose(o),
+        children: custom
+      },
+      o.value
+    );
+  };
+  const renderTree = (items, disabled2) => {
+    const out = [];
+    items.forEach((raw, i) => {
+      if (typeof raw !== "string" && isSubmenu(raw)) {
+        const dis = disabled2 || !!raw.disabled;
+        const inner = renderTree(raw.submenu, dis);
+        if (inner.length)
+          out.push(
+            /* @__PURE__ */ jsx(
+              MenuItem,
+              {
+                submenu: true,
+                label: raw.label,
+                icon: raw.icon,
+                disabled: dis || void 0,
+                "data-menu-open": multiple ? "" : void 0,
+                children: /* @__PURE__ */ jsx(Menu, { children: inner })
+              },
+              `sub-${i}-${raw.label}`
+            )
+          );
+        return;
+      }
+      if (typeof raw !== "string" && isGroup(raw)) {
+        const dis = disabled2 || !!raw.disabled;
+        const inner = renderTree(raw.options, dis);
+        if (inner.length) out.push(/* @__PURE__ */ jsx(MenuGroup, { label: raw.label, children: inner }, `grp-${i}-${raw.label}`));
+        return;
+      }
+      const o = normalize(raw);
+      if (typeof filter === "function" && !matches(o)) return;
+      out.push(renderOptionRow(o, disabled2 || !!o.disabled));
+    });
+    return out;
+  };
+  const renderFlat = () => {
+    const shown = allLeaves.filter((l) => matches(l.opt));
+    const out = [];
+    for (let i = 0; i < shown.length; ) {
+      const label2 = shown[i].group;
+      if (label2 === void 0) {
+        out.push(renderOptionRow(shown[i].opt, shown[i].disabled));
+        i++;
+        continue;
+      }
+      const rows = [];
+      const start = i;
+      while (i < shown.length && shown[i].group === label2) {
+        rows.push(renderOptionRow(shown[i].opt, shown[i].disabled));
+        i++;
+      }
+      out.push(/* @__PURE__ */ jsx(MenuGroup, { label: label2, children: rows }, `flat-${start}-${label2}`));
+    }
+    return out;
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    renderTrigger ? renderTrigger({ open, value: currentRaw, selected: selectedOptions, disabled: !!disabled, icon }) : /* @__PURE__ */ jsx(
+      Input,
+      {
+        label,
+        hint,
+        placeholder,
+        value: display,
+        readOnly: true,
+        dimActions: true,
+        disabled,
+        leading: icon ? /* @__PURE__ */ jsx(Icon, { shape: icon }) : void 0,
+        size,
+        status,
+        statusIcon,
+        round,
+        "aria-haspopup": "menu",
+        "aria-expanded": open ? "true" : "false",
+        onKeyDown: (e) => {
+          if (!open && (e.key === "Enter" || e.key === " " || e.key === "ArrowDown")) {
+            e.preventDefault();
+            e.currentTarget.click();
+          }
+        },
+        trailing: (
+          // Chevron rotates down → up when open (spacing + rotation in the CSS
+          // module, matching the Input "Select dropdown" example).
+          /* @__PURE__ */ jsx(
+            Icon,
+            {
+              shape: "chevron-down",
+              className: open ? `${styles.chevron} ${styles.open}` : styles.chevron,
+              style: statusColor ? { color: statusColor } : void 0
+            }
+          )
+        ),
+        className,
+        style,
+        ...rest
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Menu,
+      {
+        onStateChange: (_e, { next }) => {
+          setOpen(next);
+          if (!next) setQuery("");
+        },
+        children: [
+          filtering && // `slot="header"` pins the field in the Menu's fixed header region (above
+          // the scrolling options); `data-menu-search` puts the menu in combobox
+          // mode — it focuses this field on open and drives an active-option cursor.
+          /* @__PURE__ */ jsx("div", { className: styles.filter, slot: "header", "data-menu-open": "", children: /* @__PURE__ */ jsx(
+            Input,
+            {
+              "data-menu-search": "",
+              size: "small",
+              value: query,
+              placeholder: "Filter\u2026",
+              "aria-label": "Filter options",
+              "aria-autocomplete": "list",
+              onInput: (e) => setQuery(e.currentTarget.value)
+            }
+          ) }),
+          multiple && selectAll && visibleLeaves.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              MenuItem,
+              {
+                selectionIndicator: "checkbox",
+                selected: allSelected,
+                indeterminate: someSelected,
+                label: selectAllLabel,
+                "data-menu-open": "",
+                "data-menu-skip-active": "",
+                onSelect: toggleAll
+              }
+            ),
+            /* @__PURE__ */ jsx(MenuSeparator, {})
+          ] }),
+          visibleLeaves.length === 0 ? renderEmpty?.({ query: q }) : flattening ? renderFlat() : renderTree(options, false)
+        ]
+      }
+    )
+  ] });
+};
+export {
+  Select
+};

package/dist/components/Select.module.css

@@ -0,0 +1 @@
+.chevron{margin-inline-end:7px;transition:transform .15s ease}.chevron.open{transform:rotate(180deg)}.filter{padding:4px 4px 0}

package/dist/components/Tab.d.ts

@@ -14,6 +14,9 @@ export interface TabProps {
     icon?: IconShape;
     /** Trailing icon shape, rendered after the label. */
     iconTrailing?: IconShape;
+    /** Fully-round just this tab's box. `<Tabs round>` rounds the whole strip
+     *  (tabs + sliding indicator) instead. */
+    round?: boolean;
     /** Per-tab tone override, same vocabulary as `<Tabs tone>` — colours this one tab's
      *  label + icons (all priorities/modes, named or custom colour) and, when it's the
      *  active tab, its indicator. For a **custom literal colour** the sliding indicator can't

package/dist/components/Tab.js

@@ -1,4 +1,5 @@
-const Tab = (_props) => null;
+import { markTabsKind } from "../anta_helpers";
+const Tab = markTabsKind((_props) => null, "tab");
 export {
   Tab
 };

package/dist/components/TabPanel.js

@@ -1,4 +1,5 @@
-const TabPanel = (_props) => null;
+import { markTabsKind } from "../anta_helpers";
+const TabPanel = markTabsKind((_props) => null, "panel");
 export {
   TabPanel
 };

package/dist/components/Tabs.d.ts

@@ -1,4 +1,5 @@
 import type { BaseProps } from "../general_types";
+import type { TabProps } from "./Tab";
 /** The element's `statechange` payload — `next`/`prev` are tab values (`null` = none). */
 type StateDetail = {
     next: string | null;
@@ -9,6 +10,11 @@ type StateChangeEvent = CustomEvent<StateDetail>;
 export interface TabsChangeAttrs {
     value: string | null;
 }
+/** One tab as a plain data object for the `options` prop — the array-driven
+ *  alternative to `<Tab>` children (mirrors `RadioGroup`'s `options`). Same
+ *  fields as `<Tab>` minus `children` (use `label`); `icon` / `iconTrailing`
+ *  are icon-shape strings. */
+export type TabOption = Omit<TabProps, "children">;
 /**
  * How `<TabPanel>`s that aren't the active one are handled.
  * - `'display'` *(default)* — all panels mounted; inactive ones hidden via
@@ -28,6 +34,12 @@ export interface TabsProps extends Omit<BaseProps, "onChange"> {
      *  panel's body when its tab is active. Omit the panels to use `Tabs` as a bare
      *  selectable strip. Order is free; tabs and panels can interleave. */
     children?: React.ReactNode;
+    /** Tabs as a data array instead of `<Tab>` children (like `RadioGroup`'s
+     *  `options`). When set, the strip renders from these and `<Tab>` children are
+     *  ignored; `<TabPanel>` children still supply panel bodies (matched by `value`).
+     *  Each entry is a `TabOption` (`value`, `label`, `icon`, `iconTrailing`,
+     *  `tone`, `disabled`, `round`). */
+    options?: TabOption[];
     /** Controlled active value — the `value` of the `<Tab>` to mark selected (and, when a
      *  `<TabPanel value="…">` shares it, the panel to reveal). When set, you own selection:
      *  the strip renders exactly what this says, and a user pick only *requests* a change
@@ -79,6 +91,11 @@ 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 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. */
+    round?: boolean | number | string;
     /** Disable the whole strip. */
     disabled?: boolean;
 }
@@ -108,5 +125,5 @@ export interface TabsProps extends Omit<BaseProps, "onChange"> {
  * </Tabs>
  * ```
  */
-export declare const Tabs: ({ children, value, defaultValue, onStateChange, onChange, onValueChange, onFocus, onBlur, label, priority, tone, size, orientation, mounting, noslide, disabled, className, style, id, ...rest }: TabsProps) => any;
+export declare const Tabs: ({ children, options, value, defaultValue, onStateChange, onChange, onValueChange, onFocus, onBlur, label, priority, tone, size, orientation, mounting, noslide, round, disabled, className, style, id, ...rest }: TabsProps) => any;
 export {};

package/dist/components/Tabs.js

@@ -1,8 +1,6 @@
 import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
 import { useId, useState, Fragment } from "../jsx-runtime";
-import { nativeStateChange, toneStyle, wrapLabel } from "../anta_helpers";
-import { Tab } from "./Tab";
-import { TabPanel } from "./TabPanel";
+import { nativeStateChange, toneStyle, roundStyle, wrapLabel, TABS_KIND } from "../anta_helpers";
 import styles from "./Tabs.module.css";
 const flattenChildren = (nodes) => {
   const out = [];
@@ -23,6 +21,7 @@ const flattenChildren = (nodes) => {
 };
 const Tabs = ({
   children,
+  options,
   value,
   defaultValue,
   onStateChange,
@@ -37,6 +36,7 @@ const Tabs = ({
   orientation,
   mounting = "display",
   noslide,
+  round,
   disabled,
   className,
   style,
@@ -56,8 +56,8 @@ const Tabs = ({
   const tabId = (v) => `${baseId}-tab-${v}`;
   const panelId = (v) => `${baseId}-panel-${v}`;
   const items = flattenChildren(children);
-  const tabs = items.filter((c) => c?.type === Tab);
-  const panels = items.filter((c) => c?.type === TabPanel);
+  const tabs = options ? options.map((o) => ({ props: o })) : items.filter((c) => c?.type?.[TABS_KIND] === "tab");
+  const panels = items.filter((c) => c?.type?.[TABS_KIND] === "panel");
   const panelValues = new Set(panels.map((pan) => pan.props.value));
   const seen = /* @__PURE__ */ new Set();
   for (const t of tabs) {
@@ -93,6 +93,7 @@ const Tabs = ({
       size: size && size !== "medium" ? size : void 0,
       orientation: vertical ? "vertical" : void 0,
       noslide: noslide ? "" : void 0,
+      round: round ? "" : void 0,
       disabled: disabled ? "" : void 0,
       onstatechange,
       onchange,
@@ -100,7 +101,7 @@ const Tabs = ({
       onfocusout: onBlur,
       class: needsContainer ? void 0 : className,
       id: needsContainer ? void 0 : id,
-      style: toneStyle(tone, "--tabs-tone-source", style),
+      style: roundStyle(round, "--tabs-round", toneStyle(tone, "--tabs-tone-source", style)),
       ...needsContainer ? {} : rest,
       children: tabs.map((t) => {
         const p = t.props;
@@ -119,6 +120,7 @@ const Tabs = ({
             "aria-disabled": tabDisabled ? "true" : void 0,
             tabIndex: tabDisabled && !isSelected ? -1 : 0,
             disabled: tabDisabled ? "" : void 0,
+            round: round || p.round ? "" : void 0,
             children: [
               p.icon && /* @__PURE__ */ jsx("a-icon", { shape: p.icon, "aria-hidden": "true" }),
               wrapLabel(p.label != null ? p.label : p.children, "a-tab-label"),

package/dist/components/Tag.d.ts

@@ -28,9 +28,9 @@ export interface TagProps extends BaseProps {
      *  default — both render identically and emit no DOM attribute.
      *  @defaultValue medium */
     size?: 'small' | 'medium' | 'large';
-    /** Render in normal (mixed) case instead of the default uppercase
-     *  (keeps Anta's small body-text letter-spacing; uppercase tracks wider). */
-    nocaps?: boolean;
+    /** Render in all-caps instead of the default normal (mixed) case
+     *  (uppercase tracks wider than the default body-text letter-spacing). */
+    allcaps?: boolean;
     /** Leading icon shape. Sits flush before the label, scaled to the pill. */
     icon?: IconShape;
     /** Trailing icon shape. Renders last, after the value. */
@@ -73,16 +73,17 @@ export interface TagProps extends BaseProps {
  *   are the only numbers to tune and the `.dark` block re-tunes them. The
  *   wrapper writes `--tag-tone-source` inline; a typed `attr()` fallback
  *   picks up raw `<a-tag tone="…">` on Chrome 133+/Safari 18.2+.
- * - `nocaps` drops the uppercase transform and tightens tracking to the
- *   body-text 0.02ch (uppercase needs 0.08ch); tabular figures + `ss05`
- *   stay on. Large + nocaps bumps to 13px, keeping the same +1px
- *   over-uppercase relationship medium has, with height unchanged.
+ * - `allcaps` switches on the uppercase transform and widens tracking to
+ *   0.08ch (the default mixed case uses the body-text 0.02ch); tabular
+ *   figures + `ss05` stay on. Each size steps down 1px under `allcaps`
+ *   (uppercase reads larger than mixed case at the same px), with height
+ *   unchanged.
  *
  * @example Basic usage
  * ```tsx
  * <Tag tone="success" label="Running" />
  * <Tag tone="info" icon="hourglass" label="Build" value="2m 14s" />
- * <Tag tone="brand" size="small" nocaps value="v2.1.0" />
+ * <Tag tone="brand" size="small" allcaps label="Status" />
  * ```
  */
-export declare const Tag: ({ icon, iconTrailing, label, value, tone, priority, size, nocaps, className, style, children, ...rest }: TagProps) => any;
+export declare const Tag: ({ icon, iconTrailing, label, value, tone, priority, size, allcaps, className, style, children, ...rest }: TagProps) => any;

package/dist/components/Tag.js

@@ -9,7 +9,7 @@ const Tag = ({
   tone,
   priority,
   size,
-  nocaps,
+  allcaps,
   className,
   style,
   children,
@@ -25,7 +25,7 @@ const Tag = ({
       "aria-label": isIconOnly ? `${icon} tag` : void 0,
       priority: priority && priority !== "secondary" ? priority : void 0,
       size: size && size !== "medium" ? size : void 0,
-      nocaps: nocaps ? "" : void 0,
+      allcaps: allcaps ? "" : void 0,
       class: className,
       style: computedStyle,
       ...rest,

package/dist/components/Text.d.ts

@@ -2,8 +2,8 @@ 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). */
-type ExpandMode = {
-    expandable?: false;
+export type ExpandMode = {
+    expandable?: never;
     collapsible?: never;
 } | {
     /** Show a fade hint and chevron over the truncated text and let the user
@@ -23,8 +23,10 @@ export type TextProps = BaseProps & {
      *  step softer than the strongest foreground; pass `primary` for emphasis.
      *  @defaultValue secondary */
     priority?: 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'quinary';
-    /** Color tint. Applies the matching `--text-{N}-{tone}` palette. */
-    tone?: 'brand' | 'info' | 'success' | 'warning' | 'critical';
+    /** Color tint. `neutral` (the default) is the untinted `--text-{N}` scale;
+     *  the others apply the matching `--text-{N}-{tone}` palette.
+     *  @defaultValue neutral */
+    tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical';
     /** Type scale. `small` = 13/16, `medium` = 15/20, `large` = 17/24.
      *  @defaultValue medium */
     size?: 'small' | 'medium' | 'large';
@@ -60,4 +62,3 @@ export type TextProps = BaseProps & {
  * ```
  */
 export declare const Text: ({ priority, tone, size, inline, truncate, expandable, collapsible, className, style, children, ...rest }: TextProps) => any;
-export {};

package/dist/components/Title.d.ts

@@ -8,8 +8,10 @@ export interface TitleProps extends BaseProps {
     /** Visual priority. Maps to text-1..text-5 (`primary` = text-1).
      *  @defaultValue primary */
     priority?: 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'quinary';
-    /** Color tint. Applies the matching `--text-{N}-{tone}` palette. */
-    tone?: 'brand' | 'info' | 'success' | 'warning' | 'critical';
+    /** Color tint. `neutral` (the default) is the untinted `--text-{N}` scale;
+     *  the others apply the matching `--text-{N}-{tone}` palette.
+     *  @defaultValue neutral */
+    tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical';
 }
 /**
  * Block-level heading with level 1-6, priority, and tone.

package/dist/components/Tooltip.d.ts

@@ -11,6 +11,9 @@ export interface TooltipProps extends BaseProps {
      *  side when there isn't room.
      *  @defaultValue bottom */
     placement?: 'top' | 'bottom';
+    /** Round the bubble to a 20px radius (matching a round menu). Pass a `number`
+     *  (px) or a CSS length string for a custom radius. */
+    round?: boolean | number | string;
     /** Follow the cursor instead of pinning under the anchor. The bubble is
      *  pinned (anchored beneath the target) by default; pass `follow` for the
      *  cursor-tracking behaviour, which fades by distance as the cursor leaves. */
@@ -73,4 +76,4 @@ export interface TooltipProps extends BaseProps {
  * </button>
  * ```
  */
-export declare const Tooltip: ({ delay, placement, follow, interactive, truncatedOnly, truncatedSelector, className, children, ...rest }: TooltipProps) => any;
+export declare const Tooltip: ({ delay, placement, round, follow, interactive, truncatedOnly, truncatedSelector, className, style, children, ...rest }: TooltipProps) => any;

package/dist/components/Tooltip.js

@@ -1,12 +1,15 @@
 import { jsx } from "@antadesign/anta/jsx-runtime";
+import { roundStyle } from "../anta_helpers";
 const Tooltip = ({
   delay,
   placement,
+  round,
   follow,
   interactive,
   truncatedOnly,
   truncatedSelector,
   className,
+  style,
   children,
   ...rest
 }) => {
@@ -15,11 +18,13 @@ const Tooltip = ({
     {
       delay: delay != null ? String(delay) : void 0,
       placement: placement === "top" ? "top" : void 0,
+      round: round ? "" : void 0,
       follow: follow ? "" : void 0,
       interactive: interactive ? "" : void 0,
       "truncated-only": truncatedOnly ? "" : void 0,
       "truncated-selector": truncatedSelector || void 0,
       class: className,
+      style: roundStyle(round, "--tooltip-round", style),
       ...rest,
       children
     }

package/dist/elements/a-button.css

@@ -1 +1 @@
-@layer anta{a-button,a[role=button]{--button-primary-fg: #ffffff;--bg-primary-disabled: #ece9ec;--bg-secondary-disabled: #f6f4f6;--fg-disabled-primary: #afa9b1;--fg-disabled: #afa9b1;--button-loading-stripe: 14px;--button-loading-stripe-gap: 16px;--button-loading-period: 30px;--button-loading-angle: 125deg;--button-loading-x-period: calc( var(--button-loading-period) / cos(var(--button-loading-angle) - 90deg) );--button-loading-opacity: .15;--button-loading-blur: 2.5px;--button-bg-primary-rest: #635b65;--button-bg-primary-hover: #534c57;--button-bg-primary-active: #49424c;--button-fg-primary-rest: var(--button-primary-fg);--button-bg-secondary-rest: #45374c12;--button-bg-secondary-hover: #44374b1a;--button-bg-secondary-active: #44374b26;--button-fg-secondary-rest: #534c57;--button-fg-secondary-hover: #49424c;--button-fg-secondary-l-shift: .05;--button-fg-tertiary-rest: #635b65;--button-fg-tertiary-hover: #534c57;--button-bg-tertiary-hover: #44374b0d;--button-bg-tertiary-active: #44374b1a;--button-fg-quaternary-rest: #635b65;--button-fg-quaternary-hover: #49424c;--_fs: 15px;--_lh: 20px;--_pb: 1px;--button-padding-x: 9px;--button-padding-y: calc((8px - var(--_pb)) / 2);--button-max-width: 100%;--button-max-height: 100%;--button-timing-in: 75ms ease-in;--button-timing-active: 50ms linear;--button-timing-out: .15s ease-out;--button-loading-duration: .5s}a-button[tone=brand],a[role=button][tone=brand]{--button-bg-primary-rest: #5f4bc3;--button-bg-primary-hover: #503cb4;--button-bg-primary-active: #483493;--button-fg-primary-rest: var(--button-primary-fg);--button-bg-secondary-rest: #7460d71a;--button-bg-secondary-hover: #7460d726;--button-bg-secondary-active: #7460d733;--button-fg-secondary-rest: #5f4bc3;--button-fg-secondary-hover: #503cb4;--button-fg-tertiary-rest: #5f4bc3;--button-fg-tertiary-hover: #503cb4;--button-bg-tertiary-hover: #7460d71a;--button-bg-tertiary-active: #7460d726;--button-fg-quaternary-rest: #5f4bc3;--button-fg-quaternary-hover: #483493}a-button[tone=critical],a[role=button][tone=critical]{--button-bg-primary-rest: #c9302c;--button-bg-primary-hover: #b02120;--button-bg-primary-active: #a01c1c;--button-fg-primary-rest: var(--button-primary-fg);--button-bg-secondary-rest: #de45451a;--button-bg-secondary-hover: #de454526;--button-bg-secondary-active: #de454533;--button-fg-secondary-rest: #c9302c;--button-fg-secondary-hover: #b02120;--button-fg-tertiary-rest: #c9302c;--button-fg-tertiary-hover: #b02120;--button-bg-tertiary-hover: #de45451a;--button-bg-tertiary-active: #de454533;--button-fg-quaternary-rest: #c9302c;--button-fg-quaternary-hover: #a01c1c}a-button[tone=info],a[role=button][tone=info]{--button-bg-primary-rest: #1f6eb2;--button-bg-primary-hover: #1a5b93;--button-bg-primary-active: #175082;--button-fg-primary-rest: var(--button-primary-fg);--button-bg-secondary-rest: #2686d91a;--button-bg-secondary-hover: #2686d926;--button-bg-secondary-active: #2686d933;--button-fg-secondary-rest: #1f6eb2;--button-fg-secondary-hover: #1a5b93;--button-fg-tertiary-rest: #1f6eb2;--button-fg-tertiary-hover: #1a5b93;--button-bg-tertiary-hover: #2686d91a;--button-bg-tertiary-active: #2686d926;--button-fg-quaternary-rest: #1f6eb2;--button-fg-quaternary-hover: #175082}a-button[tone=success],a[role=button][tone=success]{--button-bg-primary-rest: #2a7e43;--button-bg-primary-hover: #226737;--button-bg-primary-active: #1f5c31;--button-fg-primary-rest: var(--button-primary-fg);--button-bg-secondary-rest: #3295501a;--button-bg-secondary-hover: #32955026;--button-bg-secondary-active: #32955033;--button-fg-secondary-rest: #2a7e43;--button-fg-secondary-hover: #226737;--button-fg-tertiary-rest: #2a7e43;--button-fg-tertiary-hover: #226737;--button-bg-tertiary-hover: #3295501a;--button-bg-tertiary-active: #32955026;--button-fg-quaternary-rest: #2a7e43;--button-fg-quaternary-hover: #1f5c31}a-button[tone=warning],a[role=button][tone=warning]{--button-bg-primary-rest: #c37416;--button-bg-primary-hover: #ae6613;--button-bg-primary-active: #995200;--button-fg-primary-rest: var(--button-primary-fg);--button-bg-secondary-rest: #c374161a;--button-bg-secondary-hover: #c3741626;--button-bg-secondary-active: #c3741633;--button-fg-secondary-rest: #c37416;--button-fg-secondary-hover: #ae6613;--button-fg-tertiary-rest: #c37416;--button-fg-tertiary-hover: #ae6613;--button-bg-tertiary-hover: #c374161a;--button-bg-tertiary-active: #c3741633;--button-fg-quaternary-rest: #c37416;--button-fg-quaternary-hover: #995200}.dark a-button,.dark a[role=button]{--bg-primary-disabled: #272329;--bg-secondary-disabled: #1d1a1e;--fg-disabled-primary: #776e77;--fg-disabled: #635b65;--button-bg-primary-rest: #534c57;--button-bg-primary-hover: #635b65;--button-bg-primary-active: #938d96;--button-bg-secondary-rest: #e4d1ef1c;--button-bg-secondary-hover: #e4d1ef24;--button-bg-secondary-active: #e4d1ef2e;--button-fg-secondary-rest: #c1b9c1;--button-fg-secondary-hover: #d4ced4;--button-fg-secondary-l-shift: 0;--button-fg-tertiary-rest: #afa9b1;--button-fg-tertiary-hover: #afa9b1;--button-bg-tertiary-hover: #e4d1ef14;--button-bg-tertiary-active: #e4d1ef21;--button-fg-quaternary-rest: #afa9b1;--button-fg-quaternary-hover: #cac4ca}.dark a-button[tone=brand],.dark a[role=button][tone=brand]{--button-bg-primary-rest: #503cb4;--button-bg-primary-hover: #5f4bc3;--button-bg-primary-active: #7460d7;--button-bg-secondary-rest: #7460d73b;--button-bg-secondary-hover: #7460d747;--button-bg-secondary-active: #7460d754;--button-fg-secondary-rest: #c5baff;--button-fg-secondary-hover: #d2cbf6;--button-fg-tertiary-rest: #ada0ee;--button-fg-tertiary-hover: #bcb1f1;--button-bg-tertiary-hover: #7460d73b;--button-bg-tertiary-active: #7460d747;--button-fg-quaternary-rest: #ada0ee;--button-fg-quaternary-hover: #c7bef4}.dark a-button[tone=critical],.dark a[role=button][tone=critical]{--button-bg-primary-rest: #b02120;--button-bg-primary-hover: #c9302c;--button-bg-primary-active: #de4545;--button-bg-secondary-rest: #de45453b;--button-bg-secondary-hover: #de454547;--button-bg-secondary-active: #de454554;--button-fg-secondary-rest: #ffabac;--button-fg-secondary-hover: #f4c2c2;--button-fg-tertiary-rest: #e78e90;--button-fg-tertiary-hover: #efa4a4;--button-bg-tertiary-hover: #de45453b;--button-bg-tertiary-active: #de454547;--button-fg-quaternary-rest: #e78e90;--button-fg-quaternary-hover: #ffabac}.dark a-button[tone=info],.dark a[role=button][tone=info]{--button-bg-primary-rest: #1a5b93;--button-bg-primary-hover: #1f6eb2;--button-bg-primary-active: #2686d9;--button-bg-secondary-rest: #2686d93b;--button-bg-secondary-hover: #2686d947;--button-bg-secondary-active: #2686d954;--button-fg-secondary-rest: #9ed2ff;--button-fg-secondary-hover: #bad6f3;--button-fg-tertiary-rest: #7db6e8;--button-fg-tertiary-hover: #93c5ec;--button-bg-tertiary-hover: #2686d93b;--button-bg-tertiary-active: #2686d947;--button-fg-quaternary-rest: #7db6e8;--button-fg-quaternary-hover: #a6cdef}.dark a-button[tone=success],.dark a[role=button][tone=success]{--button-bg-primary-rest: #226737;--button-bg-primary-hover: #2a7e43;--button-bg-primary-active: #329550;--button-bg-secondary-rest: #3295503b;--button-bg-secondary-hover: #32955047;--button-bg-secondary-active: #32955054;--button-fg-secondary-rest: #8ceca9;--button-fg-secondary-hover: #b3e5c2;--button-fg-tertiary-rest: #74cd8e;--button-fg-tertiary-hover: #88d7a0;--button-bg-tertiary-hover: #3295503b;--button-bg-tertiary-active: #32955047;--button-fg-quaternary-rest: #74cd8e;--button-fg-quaternary-hover: #9ddeb1}.dark a-button[tone=warning],.dark a[role=button][tone=warning]{--button-bg-primary-rest: #7f410b;--button-bg-primary-hover: #995200;--button-bg-primary-active: #ae6613;--button-bg-secondary-rest: #c374163b;--button-bg-secondary-hover: #c3741647;--button-bg-secondary-active: #c3741654;--button-fg-secondary-rest: #f7c06e;--button-fg-secondary-hover: #f3cc91;--button-fg-tertiary-rest: #e1a452;--button-fg-tertiary-hover: #edb25a;--button-bg-tertiary-hover: #c374163b;--button-bg-tertiary-active: #c3741647;--button-fg-quaternary-rest: #e1a452;--button-fg-quaternary-hover: #f0bf75}a-button,a[role=button]{user-select:none;display:inline-flex;align-items:center;gap:.5ch;overflow:hidden;cursor:pointer;flex-shrink:0;color:var(--button-fg);background-color:var(--button-bg);border-radius:4px;text-decoration:none;box-shadow:inset 0 0 1px color-mix(in oklch,currentColor,transparent 70%);font-size:var(--_fs);font-family:var(--sans-serif);font-weight:450;font-variation-settings:"wdth" 88,"slnt" 0,"ital" 0;font-feature-settings:"ss02","ss05","tnum";line-height:var(--_lh);letter-spacing:.05ch;text-overflow:ellipsis;text-wrap:nowrap;white-space:nowrap;max-width:var(--button-max-width);max-height:var(--button-max-height);padding-inline:var(--button-padding-x);padding-block:var(--button-padding-y);>a-button-label{display:inline-block;text-overflow:ellipsis;text-wrap:nowrap;white-space:nowrap;overflow:hidden;min-width:0;line-height:var(--_lh);padding-bottom:var(--_pb);&:has(>*){display:inline-flex;gap:.25ch}}>*{pointer-events:none}& a-icon{transition:color var(--button-timing-out)}transition:color var(--button-timing-out),background-color var(--button-timing-out);&:hover,&:focus-visible{transition:color var(--button-timing-in),background-color var(--button-timing-in);& a-icon{transition:color var(--button-timing-in)}}&:active,&[selected]{transition:color var(--button-timing-active),background-color var(--button-timing-active);& a-icon{transition:color var(--button-timing-active)}}&[disabled]{pointer-events:none;cursor:not-allowed;transition:none;& a-icon{transition:none}}&:focus-visible{outline:1px solid var(--focus-ring);outline-offset:1px}&[priority=quaternary]{--button-timing-in: 0s;--button-timing-active: 0s;--button-timing-out: 0s}&[size=small]{--button-padding-x: 7px;--_fs: 13px;--_lh: 16px;--_pb: .5px;& a-icon{--icon-size: 14px}}&[size=large]{--button-padding-x: 13px;--_fs: 17px;--_lh: 24px;--_pb: 1.5px;& a-icon{--icon-size: 18px}}&[priority=tertiary],&[priority=quaternary]{&[underline=solid]{text-decoration:underline solid}&[underline=dashed]{text-decoration:underline dashed}&[underline=dotted]{text-decoration:underline dotted}&[underline]{text-decoration-color:color-mix(in srgb,currentColor 75%,transparent);text-decoration-thickness:1px;text-underline-offset:3px;&[selected]{text-decoration-color:var(--button-fg);text-decoration-thickness:1px}@media(hover:hover)and (pointer:fine){&:hover{text-decoration-color:var(--button-fg);text-decoration-thickness:1px}}}}&[priority=quaternary][paddingless]{--button-padding-x: 0;--button-padding-y: 0}&:has(>a-icon):not(:has(>a-icon~a-icon)):not(:has(>:not(a-icon):not(a-tooltip))){--button-padding-y: 5px;--button-padding-x: 5px;min-width:28px;min-height:28px;justify-content:center;&[size=small]{--button-padding-y: 3px;--button-padding-x: 3px;min-width:24px;min-height:24px}&[size=large]{--button-padding-y: 7px;--button-padding-x: 7px;min-width:32px;min-height:32px}}&:is(:has(>a-icon:first-child),:has(>a-tooltip:first-child+a-icon)):is(:has(>a-icon~a-icon),:has(>:not(a-icon):not(a-tooltip))){padding-inline-start:max(0px,var(--button-padding-x) - 2px)}&:is(:has(>a-icon:last-child),:has(>a-icon+a-tooltip:last-child)):is(:has(>a-icon~a-icon),:has(>:not(a-icon):not(a-tooltip))){padding-inline-end:max(0px,var(--button-padding-x) - 2px)}&[loading]{position:relative;pointer-events:none;cursor:wait;&:before{content:"";position:absolute;top:0;bottom:0;left:calc(0px - var(--button-loading-x-period));right:0;pointer-events:none;background:repeating-linear-gradient(var(--button-loading-angle),transparent 0,transparent var(--button-loading-stripe-gap),currentColor var(--button-loading-stripe-gap),currentColor calc(var(--button-loading-stripe-gap) + var(--button-loading-stripe)));opacity:var(--button-loading-opacity);filter:blur(var(--button-loading-blur));will-change:transform;animation:btn-loading-slide var(--button-loading-duration) linear infinite;animation-delay:-9999s}}&[tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=critical],[tone=info],[tone=success],[tone=warning]){--button-tone-source: attr(tone type(<color>), transparent);--_tone-fg-l: .46;--_tone-fg-strong-l: .4;--_tone-fg-c: .17;--_tone-bg-l: .54;--_tone-bg-c: .16;--_tone-bg-a-rest: .1;--_tone-bg-a-hover: .15;--_tone-bg-a-active: .2;--_tone-primary-l-rest: .5;--_tone-primary-l-hover: .45;--_tone-primary-l-active: .4;--button-bg-primary-rest: oklch(from var(--button-tone-source) var(--_tone-primary-l-rest) c h);--button-bg-primary-hover: oklch(from var(--button-tone-source) var(--_tone-primary-l-hover) c h);--button-bg-primary-active: oklch(from var(--button-tone-source) var(--_tone-primary-l-active) c h);--button-fg-primary-rest: var(--button-primary-fg);--button-fg-secondary-rest: oklch(from var(--button-tone-source) var(--_tone-fg-l) var(--_tone-fg-c) h);--button-fg-secondary-hover: oklch(from var(--button-tone-source) var(--_tone-fg-strong-l) var(--_tone-fg-c) h);--button-fg-tertiary-rest: oklch(from var(--button-tone-source) var(--_tone-fg-l) var(--_tone-fg-c) h);--button-fg-tertiary-hover: oklch(from var(--button-tone-source) var(--_tone-fg-strong-l) var(--_tone-fg-c) h);--button-fg-quaternary-rest: oklch(from var(--button-tone-source) var(--_tone-fg-l) var(--_tone-fg-c) h);--button-fg-quaternary-hover: oklch(from var(--button-tone-source) var(--_tone-fg-strong-l) var(--_tone-fg-c) h);--button-bg-secondary-rest: oklch(from var(--button-tone-source) var(--_tone-bg-l) var(--_tone-bg-c) h / var(--_tone-bg-a-rest));--button-bg-secondary-hover: oklch(from var(--button-tone-source) var(--_tone-bg-l) var(--_tone-bg-c) h / var(--_tone-bg-a-hover));--button-bg-secondary-active: oklch(from var(--button-tone-source) var(--_tone-bg-l) var(--_tone-bg-c) h / var(--_tone-bg-a-active));--button-bg-tertiary-hover: oklch(from var(--button-tone-source) var(--_tone-bg-l) var(--_tone-bg-c) h / var(--_tone-bg-a-rest));--button-bg-tertiary-active: oklch(from var(--button-tone-source) var(--_tone-bg-l) var(--_tone-bg-c) h / var(--_tone-bg-a-hover))}.dark &[tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=critical],[tone=info],[tone=success],[tone=warning]){--_tone-fg-l: .78;--_tone-fg-strong-l: .85;--_tone-fg-c: .11;--_tone-bg-l: .58;--_tone-bg-a-rest: .23;--_tone-bg-a-hover: .28;--_tone-bg-a-active: .33;--_tone-primary-l-rest: .45;--_tone-primary-l-hover: .5;--_tone-primary-l-active: .57}--button-fg: oklch(from var(--button-fg-secondary-rest) calc(l - var(--button-fg-secondary-l-shift)) c h);--button-bg: var(--button-bg-secondary-rest);@media(hover:hover)and (pointer:fine){&:hover{--button-fg: var(--button-fg-secondary-hover);--button-bg: var(--button-bg-secondary-hover)}}&:active,&[selected]{--button-fg: var(--button-fg-secondary-hover);--button-bg: var(--button-bg-secondary-active)}&[priority=primary]{--button-fg: var(--button-fg-primary-rest);--button-bg: var(--button-bg-primary-rest);box-shadow:none;@media(hover:hover)and (pointer:fine){&:hover{--button-bg: var(--button-bg-primary-hover)}}&:active,&[selected]{--button-bg: var(--button-bg-primary-active)}}&[priority=tertiary]{--button-fg: var(--button-fg-tertiary-rest);--button-bg: transparent;box-shadow:none;@media(hover:hover)and (pointer:fine){&:hover{--button-fg: var(--button-fg-tertiary-hover);--button-bg: var(--button-bg-tertiary-hover)}}&:active,&[selected]{--button-fg: var(--button-fg-tertiary-hover);--button-bg: var(--button-bg-tertiary-active)}}&[priority=quaternary]{--button-fg: var(--button-fg-quaternary-rest);--button-bg: transparent;box-shadow:none;font-weight:400;letter-spacing:.06ch;@media(hover:hover)and (pointer:fine){&:hover{--button-fg: var(--button-fg-quaternary-hover)}}&[selected]{--button-fg: var(--button-fg-quaternary-hover)}&:active{--button-fg: oklch(from var(--button-fg-quaternary-rest) calc(l + .05) c h)}.dark &:active{--button-fg: var(--button-fg-quaternary-rest)}}&[selected]{box-shadow:inset 0 0 0 1px currentColor}&[disabled]{background-color:var(--bg-secondary-disabled);color:var(--fg-disabled);&[priority=primary]{background-color:var(--bg-primary-disabled);color:var(--fg-disabled-primary)}&[priority=tertiary],&[priority=quaternary]{background-color:transparent;color:var(--fg-disabled)}}}}@keyframes btn-loading-slide{to{transform:translate(var(--button-loading-x-period))}}
+@layer anta{a-button,a[role=button][data-anta]{--button-primary-fg: #ffffff;--bg-primary-disabled: #ece9ec;--bg-secondary-disabled: #f6f4f6;--fg-disabled-primary: #afa9b1;--fg-disabled: #afa9b1;--button-loading-stripe: 14px;--button-loading-stripe-gap: 16px;--button-loading-period: 30px;--button-loading-angle: 125deg;--button-loading-x-period: calc( var(--button-loading-period) / cos(var(--button-loading-angle) - 90deg) );--button-loading-opacity: .15;--button-loading-blur: 2.5px;--button-bg-primary-rest: #635b65;--button-bg-primary-hover: #534c57;--button-bg-primary-active: #49424c;--button-fg-primary-rest: var(--button-primary-fg);--button-bg-secondary-rest: #45374c12;--button-bg-secondary-hover: #44374b1a;--button-bg-secondary-active: #44374b26;--button-fg-secondary-rest: #534c57;--button-fg-secondary-hover: #49424c;--button-fg-secondary-l-shift: .05;--button-fg-tertiary-rest: #635b65;--button-fg-tertiary-hover: #534c57;--button-bg-tertiary-hover: #44374b0d;--button-bg-tertiary-active: #44374b1a;--button-fg-quaternary-rest: #635b65;--button-fg-quaternary-hover: #49424c;--_fs: 15px;--_lh: 20px;--_pb: 1px;--button-padding-x: 9px;--button-padding-y: calc((8px - var(--_pb)) / 2);--button-max-width: 100%;--button-max-height: 100%;--button-timing-in: 75ms ease-in;--button-timing-active: 50ms linear;--button-timing-out: .15s ease-out;--button-loading-duration: .5s}a-button[round],a[role=button][data-anta][round]{--button-round: attr(round type(<length>), 999px);border-radius:var(--button-round, 999px)}a-button[tone=brand],a[role=button][data-anta][tone=brand]{--button-bg-primary-rest: #5f4bc3;--button-bg-primary-hover: #503cb4;--button-bg-primary-active: #483493;--button-fg-primary-rest: var(--button-primary-fg);--button-bg-secondary-rest: #7460d71a;--button-bg-secondary-hover: #7460d726;--button-bg-secondary-active: #7460d733;--button-fg-secondary-rest: #5f4bc3;--button-fg-secondary-hover: #503cb4;--button-fg-tertiary-rest: #5f4bc3;--button-fg-tertiary-hover: #503cb4;--button-bg-tertiary-hover: #7460d71a;--button-bg-tertiary-active: #7460d726;--button-fg-quaternary-rest: #5f4bc3;--button-fg-quaternary-hover: #483493}a-button[tone=critical],a[role=button][data-anta][tone=critical]{--button-bg-primary-rest: #c9302c;--button-bg-primary-hover: #b02120;--button-bg-primary-active: #a01c1c;--button-fg-primary-rest: var(--button-primary-fg);--button-bg-secondary-rest: #de45451a;--button-bg-secondary-hover: #de454526;--button-bg-secondary-active: #de454533;--button-fg-secondary-rest: #c9302c;--button-fg-secondary-hover: #b02120;--button-fg-tertiary-rest: #c9302c;--button-fg-tertiary-hover: #b02120;--button-bg-tertiary-hover: #de45451a;--button-bg-tertiary-active: #de454533;--button-fg-quaternary-rest: #c9302c;--button-fg-quaternary-hover: #a01c1c}a-button[tone=info],a[role=button][data-anta][tone=info]{--button-bg-primary-rest: #1f6eb2;--button-bg-primary-hover: #1a5b93;--button-bg-primary-active: #175082;--button-fg-primary-rest: var(--button-primary-fg);--button-bg-secondary-rest: #2686d91a;--button-bg-secondary-hover: #2686d926;--button-bg-secondary-active: #2686d933;--button-fg-secondary-rest: #1f6eb2;--button-fg-secondary-hover: #1a5b93;--button-fg-tertiary-rest: #1f6eb2;--button-fg-tertiary-hover: #1a5b93;--button-bg-tertiary-hover: #2686d91a;--button-bg-tertiary-active: #2686d926;--button-fg-quaternary-rest: #1f6eb2;--button-fg-quaternary-hover: #175082}a-button[tone=success],a[role=button][data-anta][tone=success]{--button-bg-primary-rest: #2a7e43;--button-bg-primary-hover: #226737;--button-bg-primary-active: #1f5c31;--button-fg-primary-rest: var(--button-primary-fg);--button-bg-secondary-rest: #3295501a;--button-bg-secondary-hover: #32955026;--button-bg-secondary-active: #32955033;--button-fg-secondary-rest: #2a7e43;--button-fg-secondary-hover: #226737;--button-fg-tertiary-rest: #2a7e43;--button-fg-tertiary-hover: #226737;--button-bg-tertiary-hover: #3295501a;--button-bg-tertiary-active: #32955026;--button-fg-quaternary-rest: #2a7e43;--button-fg-quaternary-hover: #1f5c31}a-button[tone=warning],a[role=button][data-anta][tone=warning]{--button-bg-primary-rest: #c37416;--button-bg-primary-hover: #ae6613;--button-bg-primary-active: #995200;--button-fg-primary-rest: var(--button-primary-fg);--button-bg-secondary-rest: #c374161a;--button-bg-secondary-hover: #c3741626;--button-bg-secondary-active: #c3741633;--button-fg-secondary-rest: #c37416;--button-fg-secondary-hover: #ae6613;--button-fg-tertiary-rest: #c37416;--button-fg-tertiary-hover: #ae6613;--button-bg-tertiary-hover: #c374161a;--button-bg-tertiary-active: #c3741633;--button-fg-quaternary-rest: #c37416;--button-fg-quaternary-hover: #995200}.dark a-button,.dark a[role=button][data-anta]{--bg-primary-disabled: #272329;--bg-secondary-disabled: #1d1a1e;--fg-disabled-primary: #776e77;--fg-disabled: #635b65;--button-bg-primary-rest: #534c57;--button-bg-primary-hover: #635b65;--button-bg-primary-active: #938d96;--button-bg-secondary-rest: #e4d1ef1c;--button-bg-secondary-hover: #e4d1ef24;--button-bg-secondary-active: #e4d1ef2e;--button-fg-secondary-rest: #c1b9c1;--button-fg-secondary-hover: #d4ced4;--button-fg-secondary-l-shift: 0;--button-fg-tertiary-rest: #afa9b1;--button-fg-tertiary-hover: #afa9b1;--button-bg-tertiary-hover: #e4d1ef14;--button-bg-tertiary-active: #e4d1ef21;--button-fg-quaternary-rest: #afa9b1;--button-fg-quaternary-hover: #cac4ca}.dark a-button[tone=brand],.dark a[role=button][data-anta][tone=brand]{--button-bg-primary-rest: #503cb4;--button-bg-primary-hover: #5f4bc3;--button-bg-primary-active: #7460d7;--button-bg-secondary-rest: #7460d73b;--button-bg-secondary-hover: #7460d747;--button-bg-secondary-active: #7460d754;--button-fg-secondary-rest: #c5baff;--button-fg-secondary-hover: #d2cbf6;--button-fg-tertiary-rest: #ada0ee;--button-fg-tertiary-hover: #bcb1f1;--button-bg-tertiary-hover: #7460d73b;--button-bg-tertiary-active: #7460d747;--button-fg-quaternary-rest: #ada0ee;--button-fg-quaternary-hover: #c7bef4}.dark a-button[tone=critical],.dark a[role=button][data-anta][tone=critical]{--button-bg-primary-rest: #b02120;--button-bg-primary-hover: #c9302c;--button-bg-primary-active: #de4545;--button-bg-secondary-rest: #de45453b;--button-bg-secondary-hover: #de454547;--button-bg-secondary-active: #de454554;--button-fg-secondary-rest: #ffabac;--button-fg-secondary-hover: #f4c2c2;--button-fg-tertiary-rest: #e78e90;--button-fg-tertiary-hover: #efa4a4;--button-bg-tertiary-hover: #de45453b;--button-bg-tertiary-active: #de454547;--button-fg-quaternary-rest: #e78e90;--button-fg-quaternary-hover: #ffabac}.dark a-button[tone=info],.dark a[role=button][data-anta][tone=info]{--button-bg-primary-rest: #1a5b93;--button-bg-primary-hover: #1f6eb2;--button-bg-primary-active: #2686d9;--button-bg-secondary-rest: #2686d93b;--button-bg-secondary-hover: #2686d947;--button-bg-secondary-active: #2686d954;--button-fg-secondary-rest: #9ed2ff;--button-fg-secondary-hover: #bad6f3;--button-fg-tertiary-rest: #7db6e8;--button-fg-tertiary-hover: #93c5ec;--button-bg-tertiary-hover: #2686d93b;--button-bg-tertiary-active: #2686d947;--button-fg-quaternary-rest: #7db6e8;--button-fg-quaternary-hover: #a6cdef}.dark a-button[tone=success],.dark a[role=button][data-anta][tone=success]{--button-bg-primary-rest: #226737;--button-bg-primary-hover: #2a7e43;--button-bg-primary-active: #329550;--button-bg-secondary-rest: #3295503b;--button-bg-secondary-hover: #32955047;--button-bg-secondary-active: #32955054;--button-fg-secondary-rest: #8ceca9;--button-fg-secondary-hover: #b3e5c2;--button-fg-tertiary-rest: #74cd8e;--button-fg-tertiary-hover: #88d7a0;--button-bg-tertiary-hover: #3295503b;--button-bg-tertiary-active: #32955047;--button-fg-quaternary-rest: #74cd8e;--button-fg-quaternary-hover: #9ddeb1}.dark a-button[tone=warning],.dark a[role=button][data-anta][tone=warning]{--button-bg-primary-rest: #7f410b;--button-bg-primary-hover: #995200;--button-bg-primary-active: #ae6613;--button-bg-secondary-rest: #c374163b;--button-bg-secondary-hover: #c3741647;--button-bg-secondary-active: #c3741654;--button-fg-secondary-rest: #f7c06e;--button-fg-secondary-hover: #f3cc91;--button-fg-tertiary-rest: #e1a452;--button-fg-tertiary-hover: #edb25a;--button-bg-tertiary-hover: #c374163b;--button-bg-tertiary-active: #c3741647;--button-fg-quaternary-rest: #e1a452;--button-fg-quaternary-hover: #f0bf75}a-button,a[role=button][data-anta]{user-select:none;display:inline-flex;align-items:center;gap:.5ch;overflow:hidden;cursor:pointer;flex-shrink:0;color:var(--button-fg);background-color:var(--button-bg);border-radius:4px;text-decoration:none;box-shadow:inset 0 0 1px color-mix(in oklch,currentColor,transparent 90%);font-size:var(--_fs);font-family:var(--sans-serif);font-weight:450;font-variation-settings:"wdth" 88,"slnt" 0,"ital" 0;font-feature-settings:"ss02","ss05","tnum";line-height:var(--_lh);letter-spacing:.05ch;text-overflow:ellipsis;text-wrap:nowrap;white-space:nowrap;max-width:var(--button-max-width);max-height:var(--button-max-height);padding-inline:var(--button-padding-x);padding-block:var(--button-padding-y);min-height:28px;>a-button-label{display:inline-block;text-overflow:ellipsis;text-wrap:nowrap;white-space:nowrap;overflow:hidden;min-width:0;line-height:var(--_lh);padding-bottom:var(--_pb);&:has(>*){display:inline-flex;gap:.25ch}}>*{pointer-events:none}& a-icon{transition:color var(--button-timing-out)}transition:color var(--button-timing-out),background-color var(--button-timing-out);&:hover,&:focus-visible{transition:color var(--button-timing-in),background-color var(--button-timing-in);& a-icon{transition:color var(--button-timing-in)}}&:active,&[selected]{transition:color var(--button-timing-active),background-color var(--button-timing-active);& a-icon{transition:color var(--button-timing-active)}}&[disabled]{pointer-events:none;cursor:not-allowed;transition:none;& a-icon{transition:none}}&:focus-visible{outline:1px solid var(--focus-ring);outline-offset:1px}&[priority=quaternary]{--button-timing-in: 0s;--button-timing-active: 0s;--button-timing-out: 0s}&[size=small]{--button-padding-x: 7px;--_fs: 13px;--_lh: 16px;--_pb: .5px;min-height:24px;& a-icon{--icon-size: 14px}}&[size=large]{--button-padding-x: 13px;--_fs: 17px;--_lh: 24px;--_pb: 1.5px;min-height:32px;& a-icon{--icon-size: 18px}}&[priority=tertiary],&[priority=quaternary]{&[underline=solid]{text-decoration:underline solid}&[underline=dashed]{text-decoration:underline dashed}&[underline=dotted]{text-decoration:underline dotted}&[underline]{text-decoration-color:color-mix(in srgb,currentColor 75%,transparent);text-decoration-thickness:1px;text-underline-offset:3px;&[selected]{text-decoration-color:var(--button-fg);text-decoration-thickness:1px}@media(hover:hover)and (pointer:fine){&:hover{text-decoration-color:var(--button-fg);text-decoration-thickness:1px}}}}&[priority=quaternary][paddingless]{--button-padding-x: 0;--button-padding-y: 0;min-height:0}&:has(>a-icon):not(:has(>a-icon~a-icon)):not(:has(>:not(a-icon):not(a-tooltip))){--button-padding-y: 5px;--button-padding-x: 5px;min-width:28px;justify-content:center;&[size=small]{--button-padding-y: 3px;--button-padding-x: 3px;min-width:24px}&[size=large]{--button-padding-y: 7px;--button-padding-x: 7px;min-width:32px}}&:is(:has(>a-icon:first-child),:has(>a-tooltip:first-child+a-icon)):is(:has(>a-icon~a-icon),:has(>:not(a-icon):not(a-tooltip))){padding-inline-start:max(0px,var(--button-padding-x) - 2px)}&:is(:has(>a-icon:last-child),:has(>a-icon+a-tooltip:last-child)):is(:has(>a-icon~a-icon),:has(>:not(a-icon):not(a-tooltip))){padding-inline-end:max(0px,var(--button-padding-x) - 2px)}&[loading]{position:relative;pointer-events:none;cursor:wait;&:before{content:"";position:absolute;top:0;bottom:0;left:calc(0px - var(--button-loading-x-period));right:0;pointer-events:none;background:repeating-linear-gradient(var(--button-loading-angle),transparent 0,transparent var(--button-loading-stripe-gap),currentColor var(--button-loading-stripe-gap),currentColor calc(var(--button-loading-stripe-gap) + var(--button-loading-stripe)));opacity:var(--button-loading-opacity);filter:blur(var(--button-loading-blur));will-change:transform;animation:btn-loading-slide var(--button-loading-duration) linear infinite;animation-delay:-9999s}}&[tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=critical],[tone=info],[tone=success],[tone=warning]){--button-tone-source: attr(tone type(<color>), transparent);--_tone-fg-l: .46;--_tone-fg-strong-l: .4;--_tone-fg-c: .17;--_tone-bg-l: .54;--_tone-bg-c: .16;--_tone-bg-a-rest: .1;--_tone-bg-a-hover: .15;--_tone-bg-a-active: .2;--_tone-primary-l-rest: .5;--_tone-primary-l-hover: .45;--_tone-primary-l-active: .4;--button-bg-primary-rest: oklch(from var(--button-tone-source) var(--_tone-primary-l-rest) c h);--button-bg-primary-hover: oklch(from var(--button-tone-source) var(--_tone-primary-l-hover) c h);--button-bg-primary-active: oklch(from var(--button-tone-source) var(--_tone-primary-l-active) c h);--button-fg-primary-rest: var(--button-primary-fg);--button-fg-secondary-rest: oklch(from var(--button-tone-source) var(--_tone-fg-l) var(--_tone-fg-c) h);--button-fg-secondary-hover: oklch(from var(--button-tone-source) var(--_tone-fg-strong-l) var(--_tone-fg-c) h);--button-fg-tertiary-rest: oklch(from var(--button-tone-source) var(--_tone-fg-l) var(--_tone-fg-c) h);--button-fg-tertiary-hover: oklch(from var(--button-tone-source) var(--_tone-fg-strong-l) var(--_tone-fg-c) h);--button-fg-quaternary-rest: oklch(from var(--button-tone-source) var(--_tone-fg-l) var(--_tone-fg-c) h);--button-fg-quaternary-hover: oklch(from var(--button-tone-source) var(--_tone-fg-strong-l) var(--_tone-fg-c) h);--button-bg-secondary-rest: oklch(from var(--button-tone-source) var(--_tone-bg-l) var(--_tone-bg-c) h / var(--_tone-bg-a-rest));--button-bg-secondary-hover: oklch(from var(--button-tone-source) var(--_tone-bg-l) var(--_tone-bg-c) h / var(--_tone-bg-a-hover));--button-bg-secondary-active: oklch(from var(--button-tone-source) var(--_tone-bg-l) var(--_tone-bg-c) h / var(--_tone-bg-a-active));--button-bg-tertiary-hover: oklch(from var(--button-tone-source) var(--_tone-bg-l) var(--_tone-bg-c) h / var(--_tone-bg-a-rest));--button-bg-tertiary-active: oklch(from var(--button-tone-source) var(--_tone-bg-l) var(--_tone-bg-c) h / var(--_tone-bg-a-hover))}.dark &[tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=critical],[tone=info],[tone=success],[tone=warning]){--_tone-fg-l: .78;--_tone-fg-strong-l: .85;--_tone-fg-c: .11;--_tone-bg-l: .58;--_tone-bg-a-rest: .23;--_tone-bg-a-hover: .28;--_tone-bg-a-active: .33;--_tone-primary-l-rest: .45;--_tone-primary-l-hover: .5;--_tone-primary-l-active: .57}--button-fg: oklch(from var(--button-fg-secondary-rest) calc(l - var(--button-fg-secondary-l-shift)) c h);--button-bg: var(--button-bg-secondary-rest);@media(hover:hover)and (pointer:fine){&:hover{--button-fg: var(--button-fg-secondary-hover);--button-bg: var(--button-bg-secondary-hover)}}&:active,&[selected]{--button-fg: var(--button-fg-secondary-hover);--button-bg: var(--button-bg-secondary-active)}&[priority=primary]{--button-fg: var(--button-fg-primary-rest);--button-bg: var(--button-bg-primary-rest);box-shadow:none;@media(hover:hover)and (pointer:fine){&:hover{--button-bg: var(--button-bg-primary-hover)}}&:active,&[selected]{--button-bg: var(--button-bg-primary-active)}}&[priority=tertiary]{--button-fg: var(--button-fg-tertiary-rest);--button-bg: transparent;box-shadow:none;@media(hover:hover)and (pointer:fine){&:hover{--button-fg: var(--button-fg-tertiary-hover);--button-bg: var(--button-bg-tertiary-hover)}}&:active,&[selected]{--button-fg: var(--button-fg-tertiary-hover);--button-bg: var(--button-bg-tertiary-active)}}&[priority=quaternary]{--button-fg: var(--button-fg-quaternary-rest);--button-bg: transparent;box-shadow:none;font-weight:400;letter-spacing:.06ch;@media(hover:hover)and (pointer:fine){&:hover{--button-fg: var(--button-fg-quaternary-hover)}}&[selected]{--button-fg: var(--button-fg-quaternary-hover)}&:active{--button-fg: oklch(from var(--button-fg-quaternary-rest) calc(l + .05) c h)}.dark &:active{--button-fg: var(--button-fg-quaternary-rest)}}&[selected]{box-shadow:inset 0 0 0 1px currentColor}&[disabled]{background-color:var(--bg-secondary-disabled);color:var(--fg-disabled);&[priority=primary]{background-color:var(--bg-primary-disabled);color:var(--fg-disabled-primary)}&[priority=tertiary],&[priority=quaternary]{background-color:transparent;color:var(--fg-disabled)}}}}@keyframes btn-loading-slide{to{transform:translate(var(--button-loading-x-period))}}