@antadesign/anta 0.3.22 → 0.3.24

package/dist/components/Steps.d.ts

@@ -0,0 +1,93 @@
+import type { IconShape } from "../elements/a-icon.shapes";
+import type { OptionPresentationProps } from "../general_types";
+import type { TabsProps } from "./Tabs";
+import "./Steps.css";
+/** Named Anta tone used by Steps. */
+export type StepTone = "neutral" | "brand" | "info" | "success" | "warning" | "critical";
+/** Process state shown by one step. */
+export type StepState = "incomplete" | "loading" | "completed" | "error";
+/** Visual emphasis for the step markers and completed connectors. */
+export type StepPriority = "primary" | "secondary" | "tertiary";
+/** A static step marker: a number or any registered Anta icon shape. */
+export type StepMarker = number | IconShape;
+/** Snapshot passed to `renderMarker` for a step. */
+export interface StepMarkerState {
+    /** This step's application-owned process state. */
+    state: StepState;
+    /** Whether this step is the selected tab. */
+    selected: boolean;
+    /** Whether this step cannot be selected. */
+    disabled: boolean;
+}
+/** One phase rendered by `<Steps>`. Inherited `className` and `style` land on
+ * the individual `<a-tab>`, not on the enclosing Steps sequence. */
+export interface StepOption extends OptionPresentationProps {
+    /** Stable phase identity. Values must be unique within the sequence. */
+    value: string;
+    /** Visible phase label. It ellipsizes in a constrained step; its full content
+     * is available in a tooltip only when clipped. */
+    label: React.ReactNode;
+    /** Secondary text shown below the label. It ellipsizes in a constrained step;
+     * its full content is available in a tooltip only when clipped. */
+    hint?: React.ReactNode;
+    /** Application-owned process state. Selection and availability are separate;
+     * `error` keeps a critical icon and outline, and selection adds the fill. */
+    state: StepState;
+    /** Tone for this phase. It colors the label, hint, marker, and completed
+     * connector. Overrides the Steps `tone`; error steps stay critical and
+     * disabled steps stay neutral.
+     * @defaultValue inherits Steps `tone` */
+    tone?: StepTone | "";
+    /** Replaces the marker derived from `state`. A number is shown directly; an
+     * Anta icon shape is rendered as an `<Icon>`. */
+    marker?: StepMarker;
+    /** Disables this phase. A custom `marker` or `renderMarker` result is kept;
+     * otherwise it uses the incomplete marker. */
+    disabled?: boolean;
+}
+/** Public props for `<Steps>`. Selection, panels, events, orientation, size,
+ * and disabled behavior match `<Tabs>`. */
+export interface StepsProps extends Omit<TabsProps, "options" | "priority" | "tone" | "noslide" | "round"> {
+    /** Ordered process phases. */
+    options: StepOption[];
+    /** Visual emphasis. Primary uses a solid selected marker and a stronger
+     * completed connector; secondary is the outlined default; tertiary is compact
+     * and borderless.
+     * @defaultValue 'secondary' */
+    priority?: StepPriority;
+    /** Tone applied to every step without its own `tone`. Error steps stay
+     * critical and disabled steps stay neutral.
+     * @defaultValue 'neutral' */
+    tone?: StepTone | "";
+    /** Builds a custom marker from a step and its current state. A returned node
+     * replaces `marker` and the built-in state marker; return `undefined` to use
+     * those fallbacks, or `null` for an empty ring. */
+    renderMarker?: (option: StepOption, state: StepMarkerState) => React.ReactNode;
+}
+/**
+ * A process stepper that switches tab-like content.
+ *
+ * The application owns phase states and transitions. `Steps` owns the tab
+ * interaction pattern, state presentation, and optional panels. Compose
+ * application-owned navigation controls beside it when the flow needs actions
+ * such as Back or Continue.
+ *
+ * It supports controlled (`value`) and uncontrolled (`defaultValue`) selection.
+ * When neither is supplied, the first option is selected. Explicitly disabled
+ * phases cannot be activated. Arrow-key behavior, panel pairing,
+ * duplicate-value warnings, and change events match `<Tabs>`.
+ *
+ * @example
+ * ```tsx
+ * <Steps
+ *   defaultValue="setup"
+ *   label="Setup progress"
+ *   options={[
+ *     { value: "build", label: "Build", state: "completed" },
+ *     { value: "setup", label: "Setup", state: "loading" },
+ *     { value: "next", label: "Next steps", state: "incomplete", disabled: true },
+ *   ]}
+ * />
+ * ```
+ */
+export declare const Steps: ({ options, value, defaultValue, onStateChange, onChange, onValueChange, onFocus, onBlur, label, priority, tone, renderMarker, size, orientation, fill, disabled, children, className, style, id, ...rest }: StepsProps) => any;

package/dist/components/Steps.js

@@ -0,0 +1,128 @@
+import { Fragment, jsx, jsxs } from "@antadesign/anta/jsx-runtime";
+import { optionPresentationAttrs } from "../anta_helpers";
+import { useState } from "../jsx-runtime";
+import { Icon } from "./Icon";
+import { Loader } from "./Loader";
+import { Tabs } from "./Tabs";
+import "./Steps.css";
+const STATE_ICON = {
+  incomplete: "circle-large",
+  completed: "check",
+  error: "x"
+};
+const Steps = ({
+  options,
+  value,
+  defaultValue,
+  onStateChange,
+  onChange,
+  onValueChange,
+  onFocus,
+  onBlur,
+  label,
+  priority = "secondary",
+  tone,
+  renderMarker,
+  size,
+  orientation,
+  fill,
+  disabled,
+  children,
+  className,
+  style,
+  id,
+  ...rest
+}) => {
+  const controlled = value !== void 0;
+  const [internalValue, setInternalValue] = useState(
+    defaultValue
+  );
+  const currentValue = controlled ? value : internalValue ?? options[0]?.value;
+  const handleStateChange = (event, detail) => {
+    onStateChange?.(event, detail);
+    if (controlled || event.defaultPrevented) return;
+    setInternalValue(detail.next ?? void 0);
+  };
+  const tabs = options.map((option) => {
+    const { className: optionClassName, style: optionStyle, ...optionAttrs } = optionPresentationAttrs(option);
+    const optionTone = option.tone || void 0;
+    const stepTone = option.disabled ? "neutral" : option.state === "error" ? "critical" : optionTone || tone || "neutral";
+    const customMarker = renderMarker?.(option, {
+      state: option.state,
+      selected: option.value === currentValue,
+      disabled: !!option.disabled
+    });
+    const builtInMarker = option.disabled ? /* @__PURE__ */ jsx(Icon, { shape: STATE_ICON.incomplete }) : option.state === "loading" ? /* @__PURE__ */ jsx(Loader, { tone: stepTone }) : /* @__PURE__ */ jsx(Icon, { shape: STATE_ICON[option.state] });
+    const marker = customMarker !== void 0 ? customMarker : option.marker !== void 0 ? typeof option.marker === "number" ? option.marker : /* @__PURE__ */ jsx(Icon, { shape: option.marker }) : builtInMarker;
+    return {
+      ...optionAttrs,
+      value: option.value,
+      disabled: option.disabled,
+      "data-step-state": option.state,
+      // Steps propagates its tone to each generated tab. A local option tone
+      // wins, while error and disabled states retain their fixed semantics.
+      tone: stepTone,
+      tooltip: /* @__PURE__ */ jsxs(Fragment, { children: [
+        option.label,
+        option.hint != null && /* @__PURE__ */ jsxs(Fragment, { children: [
+          " \u2014 ",
+          option.hint
+        ] })
+      ] }),
+      className: optionClassName,
+      style: optionStyle,
+      children: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("a-step-marker", { "aria-hidden": "true", children: marker }),
+        /* @__PURE__ */ jsxs("a-step-desc", { children: [
+          /* @__PURE__ */ jsx("a-tab-label", { children: option.label }),
+          option.hint != null && /* @__PURE__ */ jsx("a-step-hint", { children: option.hint })
+        ] })
+      ] })
+    };
+  });
+  const currentIndex = options.findIndex(
+    (option) => option.value === currentValue
+  );
+  const vertical = orientation === "vertical";
+  const hasPanels = children != null && children !== false;
+  const hasVerticalPanel = vertical && hasPanels;
+  const panelRow = (currentIndex >= 0 ? currentIndex : options.length - 1) + 2;
+  const rootStyle = hasVerticalPanel ? {
+    ...style,
+    "--steps-panel-row": panelRow
+  } : style;
+  return /* @__PURE__ */ jsx(
+    "a-steps",
+    {
+      class: className,
+      style: rootStyle,
+      id,
+      ...rest,
+      "data-orientation": vertical ? "vertical" : void 0,
+      children: /* @__PURE__ */ jsx(
+        Tabs,
+        {
+          options: tabs,
+          value: currentValue,
+          onStateChange: handleStateChange,
+          onChange,
+          onValueChange,
+          onFocus,
+          onBlur,
+          label,
+          size,
+          orientation,
+          fill,
+          priority,
+          noslide: true,
+          disabled,
+          "data-steps": "",
+          children
+        }
+      )
+    }
+  );
+};
+export {
+  Steps
+};

package/dist/components/Tabs.d.ts

@@ -41,9 +41,10 @@ export interface TabOption extends OptionPresentationProps {
     /** Disable just this tab — skipped by keyboard nav and dropped from the tab order
      *  (a disabled-but-selected tab stays reachable, per the ARIA pattern). */
     disabled?: boolean;
-    /** Tooltip for this tab — a string or any node — shown **only when the tab's label
-     *  is truncated** (tabs ellipsize when the strip overflows), so a clipped tab reveals
-     *  its full text on hover while a tab that fits shows nothing. Rendered as a
+    /** Tooltip for this tab — a string or any node — shown **only when one of the
+     *  tab's ellipsizing label parts is truncated** (tabs ellipsize when the strip
+     *  overflows), so clipped content reveals its full text on hover while a tab that
+     *  fits shows nothing. Rendered as a
      *  `truncatedOnly` `<Tooltip>` anchored to the tab. For an always-visible tooltip or
      *  other custom trigger content, use `children` with your own `<Tooltip>` instead. */
     tooltip?: React.ReactNode;
@@ -58,7 +59,8 @@ export interface TabsProps extends Omit<BaseProps, "onChange"> {
     children?: React.ReactNode;
     /** The tabs, as a data array (the strip's single source). Each entry is a
      *  `TabOption` (`value`, `label` or `children`, `icon`, `iconTrailing`, `tone`,
-     *  `disabled`, `round`). */
+     *  `disabled`, `round`, `className`, `style`). `className` and `style` land on
+     *  that option's individual `<a-tab>`, not on the strip. */
     options?: TabOption[];
     /** Controlled active value — the tab `value` to mark selected (and, when a
      *  `<TabPanel value="…">` shares it, the panel to reveal). When set, you own
@@ -103,6 +105,9 @@ export interface TabsProps extends Omit<BaseProps, "onChange"> {
      *  is opt-in via CSS); vertical stacks them.
      *  @defaultValue 'horizontal' */
     orientation?: "horizontal" | "vertical";
+    /** Makes horizontal tabs share the available inline space equally.
+     *  @defaultValue false */
+    fill?: boolean;
     /** Disable the sliding indicator. By default the selected-tab indicator animates
      *  between tabs (a single rectangle, via CSS anchor positioning); `noslide` paints it
      *  per tab so it snaps with no movement. (Browsers without anchor positioning get that
@@ -149,5 +154,5 @@ export interface TabsProps extends Omit<BaseProps, "onChange"> {
  * </Tabs>
  * ```
  */
-export declare const Tabs: ({ children, options, value, defaultValue, onStateChange, onChange, onValueChange, onFocus, onBlur, label, priority, tone, size, orientation, noslide, round, 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, fill, noslide, round, disabled, className, style, id, ...rest }: TabsProps) => any;
 export {};

package/dist/components/Tabs.js

@@ -17,6 +17,7 @@ const Tabs = ({
   tone,
   size,
   orientation,
+  fill,
   noslide,
   round,
   disabled,
@@ -61,6 +62,7 @@ const Tabs = ({
       tone: tone && tone !== "neutral" ? tone : void 0,
       size: size && size !== "medium" ? size : void 0,
       orientation: vertical ? "vertical" : void 0,
+      fill: fill ? "" : void 0,
       noslide: noslide ? "" : void 0,
       round: roundAttr(round),
       disabled: disabled ? "" : void 0,
@@ -76,13 +78,13 @@ const Tabs = ({
         const tabDisabled = disabled || p.disabled;
         const isSelected = p.value === currentValue;
         const { className: optionClassName, style: optionStyle, ...optionAttrs } = optionPresentationAttrs(p);
-        return /* @__PURE__ */ jsxs(
+        const tab = /* @__PURE__ */ jsxs(
           "a-tab",
           {
             ...optionAttrs,
             role: "tab",
             value: p.value,
-            tone: p.tone && p.tone !== "neutral" ? p.tone : void 0,
+            tone: p.tone || void 0,
             "aria-disabled": tabDisabled ? "true" : void 0,
             tabIndex: tabDisabled && !isSelected ? -1 : 0,
             disabled: tabDisabled ? "" : void 0,
@@ -98,6 +100,7 @@ const Tabs = ({
           },
           p.value
         );
+        return tab;
       })
     }
   );

package/dist/components/Tooltip.d.ts

@@ -25,12 +25,12 @@ export interface TooltipProps extends BaseProps {
     interactive?: boolean;
     /** Only show when the target is actually truncated (its text overflows and is
      *  ellipsized); a label that fits gets no tooltip. The check is a UI-thread
-     *  layout read, re-measured on each show. By default it measures the nearest
-     *  Anta ellipsizing label part (`<a-tab-label>` / `<a-button-label>`) inside
-     *  the anchor, then the anchor itself — override with `truncatedSelector`. */
+     *  layout read, re-measured on each show. By default it measures every Anta
+     *  ellipsizing label part inside the anchor, then the anchor itself —
+     *  override with `truncatedSelector`. */
     truncatedOnly?: boolean;
-    /** CSS selector (resolved within the anchor) for the element whose overflow
-     *  decides whether a `truncatedOnly` tooltip shows. */
+    /** CSS selector (resolved within the anchor) for the element or elements
+     *  whose overflow decides whether a `truncatedOnly` tooltip shows. */
     truncatedSelector?: string;
 }
 /**

package/dist/elements/a-avatar.css

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

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

@@ -0,0 +1,31 @@
+import { HTMLElementBase } from '../anta_helpers';
+import './a-avatar.css';
+/**
+ * `<a-avatar>` — a userpic container. It shows one of three things, in priority
+ * order: the `src` image, a seed-generated figure, or initials from `name`.
+ *
+ * Generation runs in `avatar-core` (pure) and is drawn into the shadow root as
+ * SVG. `seed` (falling back to `name`) drives the deterministic result; the
+ * brand constraints ride on the `config` attribute as a JSON string, so the
+ * element stays declarative — it works from server-rendered HTML and hand-
+ * authored markup, not only through the wrapper. With no `config`,
+ * `DEFAULT_CONFIG` produces a varied figure; a config whose head and body shapes
+ * are both `off` renders initials.
+ *
+ * Shadow structure — the picture is the box, with no wrapper around it:
+ *
+ *   :host
+ *     <svg> | <img>   ← the generated figure or the image, part="frame"
+ *     .badge          ← the optional corner badge, part="badge"
+ *
+ * The picture carries the frame's radius and the badge cutout; the host stays
+ * unclipped so the badge can sit at the very corner.
+ */
+export declare class AAvatarElement extends HTMLElementBase {
+    #private;
+    static observedAttributes: string[];
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+}
+export declare function register_a_avatar(): void;

package/dist/elements/a-avatar.js

@@ -0,0 +1,98 @@
+import { HTMLElementBase } from "../anta_helpers";
+import { resolveAvatar, avatarToSvg, getInitials, DEFAULT_CONFIG } from "../avatar-core";
+import "./a-avatar.css";
+class AAvatarElement extends HTMLElementBase {
+  static observedAttributes = ["seed", "name", "src", "size", "badge", "config"];
+  #badge;
+  #picture;
+  constructor() {
+    super();
+    const shadow = this.attachShadow({ mode: "open" });
+    const style = document.createElement("style");
+    style.textContent = SHADOW_STYLE;
+    this.#badge = document.createElement("span");
+    this.#badge.className = "badge";
+    this.#badge.setAttribute("part", "badge");
+    this.#badge.style.display = "none";
+    shadow.append(style, this.#badge);
+  }
+  /** Swap in the picture, keeping it between the style and the indicator. */
+  #setPicture(node) {
+    if (this.#picture) this.#picture.replaceWith(node);
+    else this.#badge.before(node);
+    this.#picture = node;
+  }
+  connectedCallback() {
+    this.#render();
+  }
+  attributeChangedCallback() {
+    this.#render();
+  }
+  /** Parse the `config` JSON attribute; fall back to the varied default. */
+  #parseConfig() {
+    const raw = this.getAttribute("config");
+    if (!raw) return DEFAULT_CONFIG;
+    try {
+      const parsed = JSON.parse(raw);
+      return parsed && typeof parsed === "object" ? parsed : DEFAULT_CONFIG;
+    } catch {
+      return DEFAULT_CONFIG;
+    }
+  }
+  #render() {
+    const badge = this.getAttribute("badge");
+    this.#badge.style.display = badge && badge !== "none" ? "" : "none";
+    const name = this.getAttribute("name") ?? void 0;
+    const src = this.getAttribute("src");
+    if (src) {
+      const img = document.createElement("img");
+      img.setAttribute("part", "frame image");
+      img.src = src;
+      img.alt = name ?? "";
+      img.loading = "lazy";
+      this.#setPicture(img);
+      return;
+    }
+    const seed = this.getAttribute("seed") ?? name ?? "";
+    const resolved = resolveAvatar(this.#parseConfig(), seed);
+    const tpl = document.createElement("template");
+    tpl.innerHTML = avatarToSvg(resolved, { initials: getInitials(name), title: name });
+    const svg = tpl.content.firstElementChild;
+    if (svg) {
+      svg.setAttribute("part", "frame");
+      this.#setPicture(svg);
+    }
+  }
+}
+const SHADOW_STYLE = `
+  :host { display: inline-block; position: relative; vertical-align: middle; }
+  svg, img {
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+    border-radius: var(--avatar-radius);
+    background: var(--avatar-placeholder-bg);
+    mask-image: var(--avatar-badge-mask);
+  }
+  img { object-fit: cover; }
+  .badge {
+    position: absolute;
+    right: var(--avatar-badge-inset);
+    bottom: var(--avatar-badge-inset);
+    inline-size: var(--avatar-badge-size);
+    block-size: var(--avatar-badge-size);
+    border-radius: 50%;
+    background: var(--avatar-badge-color);
+  }
+`;
+function register_a_avatar() {
+  if (typeof customElements === "undefined") return;
+  if (!customElements.get("a-avatar")) {
+    customElements.define("a-avatar", AAvatarElement);
+  }
+}
+register_a_avatar();
+export {
+  AAvatarElement,
+  register_a_avatar
+};

package/dist/elements/a-button.css

@@ -1 +1 @@
-@layer anta{a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]){--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: calc( var(--button-loading-stripe) + var(--button-loading-stripe-gap) );--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: 5px;--_src: var(--anta-seed-neutral);--_tone-pl-rest: .5;--_tone-pl-hover: .45;--_tone-pl-active: .4;--_tone-pl-c: .02;--_tone-fg-l: .46;--_tone-fg-strong-l: .4;--_tone-fg-c: .008;--_tone-fg-shift: .05;--_tone-bg-l: .54;--_tone-bg-c: .03;--_tone-a-rest: .1;--_tone-a-hover: .15;--_tone-a-active: .2;--_tone-quat-hover-l: .38;--_tone-quat-rest-a: .85;--button-bg-primary-rest: oklch(from var(--_src) var(--_tone-pl-rest) var(--_tone-pl-c) h);--button-bg-primary-hover: oklch(from var(--_src) var(--_tone-pl-hover) var(--_tone-pl-c) h);--button-bg-primary-active: oklch(from var(--_src) var(--_tone-pl-active) var(--_tone-pl-c) h);--button-fg-primary-rest: var(--button-primary-fg);--button-fg-secondary-rest: oklch(from var(--_src) var(--_tone-fg-l) var(--_tone-fg-c) h);--button-fg-secondary-hover: oklch(from var(--_src) var(--_tone-fg-strong-l) var(--_tone-fg-c) h);--button-fg-secondary-l-shift: var(--_tone-fg-shift);--button-fg-tertiary-rest: oklch(from var(--_src) var(--_tone-fg-l) var(--_tone-fg-c) h);--button-fg-tertiary-hover: oklch(from var(--_src) var(--_tone-fg-strong-l) var(--_tone-fg-c) h);--button-bg-tertiary-hover: oklch(from var(--_src) var(--_tone-bg-l) var(--_tone-bg-c) h / var(--_tone-a-rest));--button-bg-tertiary-active: oklch(from var(--_src) var(--_tone-bg-l) var(--_tone-bg-c) h / var(--_tone-a-hover));--button-fg-quaternary-rest: oklch(from var(--_src) var(--_tone-fg-l) var(--_tone-fg-c) h / var(--_tone-quat-rest-a));--button-fg-quaternary-hover: oklch(from var(--_src) var(--_tone-quat-hover-l) var(--_tone-fg-c) h);--button-bg-secondary-rest: oklch(from var(--_src) var(--_tone-bg-l) var(--_tone-bg-c) h / var(--_tone-a-rest));--button-bg-secondary-hover: oklch(from var(--_src) var(--_tone-bg-l) var(--_tone-bg-c) h / var(--_tone-a-hover));--button-bg-secondary-active: oklch(from var(--_src) var(--_tone-bg-l) var(--_tone-bg-c) h / var(--_tone-a-active));--_fs: 15px;--_lh: 20px;--_pb: 1px;--button-padding-x: 9px;--button-padding-y: calc((8px - var(--_pb)) / 2);--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[data-anta][round],input[data-anta]:is([type=reset],[type=submit])[round]{--button-round: attr(round type(<length>), 999px);border-radius:var(--button-round, 999px)}a-button[tone]:not([tone=""],[tone=neutral]),a[role=button][data-anta][tone]:not([tone=""],[tone=neutral]),button[data-anta][tone]:not([tone=""],[tone=neutral]),input[data-anta]:is([type=reset],[type=submit])[tone]:not([tone=""],[tone=neutral]){--_tone-pl-rest: .51;--_tone-pl-hover: .46;--_tone-pl-active: .41;--_tone-pl-c: .17;--_tone-fg-l: .46;--_tone-fg-strong-l: .4;--_tone-fg-c: .17;--_tone-fg-shift: .05;--_tone-bg-l: .54;--_tone-bg-c: .17;--_tone-a-rest: .1;--_tone-a-hover: .15;--_tone-a-active: .2;--_tone-quat-hover-l: .38;--_tone-quat-rest-a: .85}a-button[tone=brand],a[role=button][data-anta][tone=brand],button[data-anta][tone=brand],input[data-anta]:is([type=reset],[type=submit])[tone=brand]{--_src: var(--anta-seed-brand)}a-button[tone=info],a[role=button][data-anta][tone=info],button[data-anta][tone=info],input[data-anta]:is([type=reset],[type=submit])[tone=info]{--_src: var(--anta-seed-info)}a-button[tone=success],a[role=button][data-anta][tone=success],button[data-anta][tone=success],input[data-anta]:is([type=reset],[type=submit])[tone=success]{--_src: var(--anta-seed-success)}a-button[tone=warning],a[role=button][data-anta][tone=warning],button[data-anta][tone=warning],input[data-anta]:is([type=reset],[type=submit])[tone=warning]{--_src: var(--anta-seed-warning)}a-button[tone=critical],a[role=button][data-anta][tone=critical],button[data-anta][tone=critical],input[data-anta]:is([type=reset],[type=submit])[tone=critical]{--_src: var(--anta-seed-critical)}a-button[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]),a[role=button][data-anta][tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]),button[data-anta][tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]),input[data-anta]:is([type=reset],[type=submit])[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--_src: var(--button-tone-source, attr(tone type(<color>), transparent))}.dark a-button,.dark a[role=button][data-anta],.dark button[data-anta],.dark input[data-anta]:is([type=reset],[type=submit]){--bg-primary-disabled: #272329;--bg-secondary-disabled: #1d1a1e;--fg-disabled-primary: #776e77;--fg-disabled: #635b65;--_tone-pl-rest: .4;--_tone-pl-hover: .44;--_tone-pl-active: .48;--_tone-pl-c: .015;--_tone-fg-l: .86;--_tone-fg-strong-l: .86;--_tone-fg-c: .015;--_tone-fg-shift: 0;--_tone-bg-l: .44;--_tone-bg-c: .01;--_tone-a-rest: .24;--_tone-a-hover: .34;--_tone-a-active: .44;--_tone-quat-hover-l: .9;--_tone-quat-rest-a: .85}.dark a-button[tone]:not([tone=""],[tone=neutral]),.dark a[role=button][data-anta][tone]:not([tone=""],[tone=neutral]),.dark button[data-anta][tone]:not([tone=""],[tone=neutral]),.dark input[data-anta]:is([type=reset],[type=submit])[tone]:not([tone=""],[tone=neutral]){--_tone-pl-rest: .4;--_tone-pl-hover: .44;--_tone-pl-active: .48;--_tone-pl-c: .16;--_tone-fg-l: .86;--_tone-fg-strong-l: .86;--_tone-fg-c: .13;--_tone-fg-shift: 0;--_tone-bg-l: .58;--_tone-bg-c: .16;--_tone-a-rest: .215;--_tone-a-hover: .29;--_tone-a-active: .34;--_tone-quat-hover-l: .9;--_tone-quat-rest-a: .85}button[data-anta],input[data-anta]:is([type=reset],[type=submit]){box-sizing:border-box;margin:0;appearance:none;-webkit-appearance:none;border:none}a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]){user-select:none;display:inline-flex;align-items:center;gap:.5ch;overflow:hidden;cursor:pointer;&:has(>a-copy):not(:has(>a-icon)){cursor:copy}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:100%;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):not(a-copy))){--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):not(a-copy))){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):not(a-copy))){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}}--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{--button-fg: var(--button-fg-secondary-hover);--button-bg: var(--button-bg-secondary-active)}&[selected]{--button-fg: var(--button-fg-secondary-hover);--button-bg: var(--button-bg-secondary-hover)}&[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{--button-bg: var(--button-bg-primary-active)}&[selected]{--button-bg: var(--button-bg-primary-hover)}}&[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{--button-fg: var(--button-fg-tertiary-hover);--button-bg: var(--button-bg-tertiary-active)}&[selected]{--button-fg: var(--button-fg-tertiary-hover);--button-bg: var(--button-bg-tertiary-hover)}}&[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)}}&:active{--button-fg: var(--button-fg-quaternary-rest)}&[selected]{--button-fg: var(--button-fg-quaternary-hover)}}&[selected]{box-shadow:inset 0 0 0 .5px 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)}}}@media(forced-colors:active){:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit])){--anta-forced-foreground: ButtonText;color:ButtonText;background-color:ButtonFace;border:1px solid ButtonText;box-shadow:none}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[priority=primary]{--anta-forced-foreground: ButtonFace;color:ButtonFace;background-color:ButtonText;border-color:ButtonText}a-button:is([priority=primary],[selected]){forced-color-adjust:none}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[priority=tertiary]{--anta-forced-foreground: CanvasText;color:CanvasText;background-color:Canvas;border:0}@media(hover:hover)and (pointer:fine){:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[priority=tertiary]:hover:not(:focus-visible){outline:1px solid ButtonText;outline-offset:0}}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[priority=quaternary]{--anta-forced-foreground: LinkText;color:LinkText;background-color:ButtonFace;border:0;text-decoration:none}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[selected]{--anta-forced-foreground: HighlightText;color:HighlightText;background-color:Highlight;border-color:Highlight}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[disabled]{--anta-forced-foreground: GrayText;color:GrayText;background-color:Canvas;border-color:GrayText;text-decoration-color:GrayText}}}@keyframes btn-loading-slide{to{transform:translate(var(--button-loading-x-period))}}
+@layer anta{a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]){--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: calc( var(--button-loading-stripe) + var(--button-loading-stripe-gap) );--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: 5px;--_src: var(--anta-seed-neutral);--_tone-pl-rest: .5;--_tone-pl-hover: .45;--_tone-pl-active: .4;--_tone-pl-c: .02;--_tone-fg-l: .46;--_tone-fg-strong-l: .4;--_tone-fg-c: .008;--_tone-fg-shift: .05;--_tone-bg-l: .54;--_tone-bg-c: .03;--_tone-a-rest: .1;--_tone-a-hover: .15;--_tone-a-active: .2;--_tone-quat-hover-l: .38;--_tone-quat-rest-a: .85;--button-bg-primary-rest: oklch(from var(--_src) var(--_tone-pl-rest) var(--_tone-pl-c) h);--button-bg-primary-hover: oklch(from var(--_src) var(--_tone-pl-hover) var(--_tone-pl-c) h);--button-bg-primary-active: oklch(from var(--_src) var(--_tone-pl-active) var(--_tone-pl-c) h);--button-fg-primary-rest: var(--button-primary-fg);--button-fg-secondary-rest: oklch(from var(--_src) var(--_tone-fg-l) var(--_tone-fg-c) h);--button-fg-secondary-hover: oklch(from var(--_src) var(--_tone-fg-strong-l) var(--_tone-fg-c) h);--button-fg-secondary-l-shift: var(--_tone-fg-shift);--button-fg-tertiary-rest: oklch(from var(--_src) var(--_tone-fg-l) var(--_tone-fg-c) h);--button-fg-tertiary-hover: oklch(from var(--_src) var(--_tone-fg-strong-l) var(--_tone-fg-c) h);--button-bg-tertiary-hover: oklch(from var(--_src) var(--_tone-bg-l) var(--_tone-bg-c) h / var(--_tone-a-rest));--button-bg-tertiary-active: oklch(from var(--_src) var(--_tone-bg-l) var(--_tone-bg-c) h / var(--_tone-a-hover));--button-fg-quaternary-rest: oklch(from var(--_src) var(--_tone-fg-l) var(--_tone-fg-c) h / var(--_tone-quat-rest-a));--button-fg-quaternary-hover: oklch(from var(--_src) var(--_tone-quat-hover-l) var(--_tone-fg-c) h);--button-bg-secondary-rest: oklch(from var(--_src) var(--_tone-bg-l) var(--_tone-bg-c) h / var(--_tone-a-rest));--button-bg-secondary-hover: oklch(from var(--_src) var(--_tone-bg-l) var(--_tone-bg-c) h / var(--_tone-a-hover));--button-bg-secondary-active: oklch(from var(--_src) var(--_tone-bg-l) var(--_tone-bg-c) h / var(--_tone-a-active));--_fs: 15px;--_lh: 20px;--_pb: 1px;--button-padding-x: 9px;--button-padding-y: calc((8px - var(--_pb)) / 2);--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[data-anta][round],input[data-anta]:is([type=reset],[type=submit])[round]{--button-round: attr(round type(<length>), 999px);border-radius:var(--button-round, 999px)}a-button[tone]:not([tone=""],[tone=neutral]),a[role=button][data-anta][tone]:not([tone=""],[tone=neutral]),button[data-anta][tone]:not([tone=""],[tone=neutral]),input[data-anta]:is([type=reset],[type=submit])[tone]:not([tone=""],[tone=neutral]){--_tone-pl-rest: .51;--_tone-pl-hover: .46;--_tone-pl-active: .41;--_tone-pl-c: .17;--_tone-fg-l: .46;--_tone-fg-strong-l: .4;--_tone-fg-c: .17;--_tone-fg-shift: .05;--_tone-bg-l: .54;--_tone-bg-c: .17;--_tone-a-rest: .1;--_tone-a-hover: .15;--_tone-a-active: .2;--_tone-quat-hover-l: .38;--_tone-quat-rest-a: .85}a-button[tone=brand],a[role=button][data-anta][tone=brand],button[data-anta][tone=brand],input[data-anta]:is([type=reset],[type=submit])[tone=brand]{--_src: var(--anta-seed-brand)}a-button[tone=info],a[role=button][data-anta][tone=info],button[data-anta][tone=info],input[data-anta]:is([type=reset],[type=submit])[tone=info]{--_src: var(--anta-seed-info)}a-button[tone=success],a[role=button][data-anta][tone=success],button[data-anta][tone=success],input[data-anta]:is([type=reset],[type=submit])[tone=success]{--_src: var(--anta-seed-success)}a-button[tone=warning],a[role=button][data-anta][tone=warning],button[data-anta][tone=warning],input[data-anta]:is([type=reset],[type=submit])[tone=warning]{--_src: var(--anta-seed-warning)}a-button[tone=critical],a[role=button][data-anta][tone=critical],button[data-anta][tone=critical],input[data-anta]:is([type=reset],[type=submit])[tone=critical]{--_src: var(--anta-seed-critical)}a-button[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]),a[role=button][data-anta][tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]),button[data-anta][tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]),input[data-anta]:is([type=reset],[type=submit])[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--_src: var(--button-tone-source, attr(tone type(<color>), transparent))}.dark a-button,.dark a[role=button][data-anta],.dark button[data-anta],.dark input[data-anta]:is([type=reset],[type=submit]){--bg-primary-disabled: #272329;--bg-secondary-disabled: #1d1a1e;--fg-disabled-primary: #776e77;--fg-disabled: #635b65;--_tone-pl-rest: .4;--_tone-pl-hover: .44;--_tone-pl-active: .48;--_tone-pl-c: .015;--_tone-fg-l: .86;--_tone-fg-strong-l: .86;--_tone-fg-c: .015;--_tone-fg-shift: 0;--_tone-bg-l: .44;--_tone-bg-c: .01;--_tone-a-rest: .24;--_tone-a-hover: .34;--_tone-a-active: .44;--_tone-quat-hover-l: .9;--_tone-quat-rest-a: .85}.dark a-button[tone]:not([tone=""],[tone=neutral]),.dark a[role=button][data-anta][tone]:not([tone=""],[tone=neutral]),.dark button[data-anta][tone]:not([tone=""],[tone=neutral]),.dark input[data-anta]:is([type=reset],[type=submit])[tone]:not([tone=""],[tone=neutral]){--_tone-pl-rest: .4;--_tone-pl-hover: .44;--_tone-pl-active: .48;--_tone-pl-c: .16;--_tone-fg-l: .86;--_tone-fg-strong-l: .86;--_tone-fg-c: .13;--_tone-fg-shift: 0;--_tone-bg-l: .58;--_tone-bg-c: .16;--_tone-a-rest: .215;--_tone-a-hover: .29;--_tone-a-active: .34;--_tone-quat-hover-l: .9;--_tone-quat-rest-a: .85}button[data-anta],input[data-anta]:is([type=reset],[type=submit]){box-sizing:border-box;margin:0;appearance:none;-webkit-appearance:none;border:none}a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]){user-select:none;display:inline-flex;align-items:center;gap:.5ch;overflow:hidden;cursor:pointer;&:has(>a-copy):not(:has(>a-icon)){cursor:copy}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:100%;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 oklch,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}}}&[underline][underline-on-hover]{text-decoration-color:transparent;&[selected]{text-decoration-color:transparent}@media(hover:hover)and (pointer:fine){&:hover{text-decoration-color:var(--button-fg)}}}}&[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):not(a-copy))){--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):not(a-copy))){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):not(a-copy))){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}}--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{--button-fg: var(--button-fg-secondary-hover);--button-bg: var(--button-bg-secondary-active)}&[selected]{--button-fg: var(--button-fg-secondary-hover);--button-bg: var(--button-bg-secondary-hover)}&[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{--button-bg: var(--button-bg-primary-active)}&[selected]{--button-bg: var(--button-bg-primary-hover)}}&[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{--button-fg: var(--button-fg-tertiary-hover);--button-bg: var(--button-bg-tertiary-active)}&[selected]{--button-fg: var(--button-fg-tertiary-hover);--button-bg: var(--button-bg-tertiary-hover)}}&[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)}}&:active{--button-fg: var(--button-fg-quaternary-rest)}&[selected]{--button-fg: var(--button-fg-quaternary-hover)}}&[selected]{box-shadow:inset 0 0 0 .5px 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)}}}@media(forced-colors:active){:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit])){--anta-forced-foreground: ButtonText;color:ButtonText;background-color:ButtonFace;border:1px solid ButtonText;box-shadow:none}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[priority=primary]{--anta-forced-foreground: ButtonFace;color:ButtonFace;background-color:ButtonText;border-color:ButtonText}a-button:is([priority=primary],[selected]){forced-color-adjust:none}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[priority=tertiary]{--anta-forced-foreground: CanvasText;color:CanvasText;background-color:Canvas;border:0}@media(hover:hover)and (pointer:fine){:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[priority=tertiary]:hover:not(:focus-visible){outline:1px solid ButtonText;outline-offset:0}}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[priority=quaternary]{--anta-forced-foreground: LinkText;color:LinkText;background-color:ButtonFace;border:0;text-decoration:none}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[selected]{--anta-forced-foreground: HighlightText;color:HighlightText;background-color:Highlight;border-color:Highlight}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[disabled]{--anta-forced-foreground: GrayText;color:GrayText;background-color:Canvas;border-color:GrayText;text-decoration-color:GrayText}}}@keyframes btn-loading-slide{to{transform:translate(var(--button-loading-x-period))}}

package/dist/elements/a-dialog.js

@@ -331,7 +331,9 @@ class ADialogElement extends HTMLElementBase {
     this.#wantOpen = true;
     if (this.dialog.open || !this.isConnected) return;
     this.dialog.showModal();
-    if (!this.querySelector("[autofocus]")) this.dialog.focus();
+    const autofocus = this.querySelector("[autofocus]");
+    if (autofocus) autofocus.focus({ preventScroll: true });
+    else this.dialog.focus();
   }
   /** Raw close. Records the closed intent and counts the pending `close` event as
    *  ours so the listener doesn't reconcile it. (The disconnect teardown closes