@antadesign/anta 0.3.23 → 0.3.24

package/dist/components/Breadcrumbs.css

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

package/dist/components/Breadcrumbs.d.ts

@@ -0,0 +1,127 @@
+import type { IconShape } from '../elements/a-icon.shapes';
+import type { BaseProps } from '../general_types';
+import type { BaseButtonProps } from './Button';
+import type { CopyTarget } from './copy-props';
+import './Breadcrumbs.css';
+/** The text separators built into `<Breadcrumbs>`. Pass an `IconShape` for a
+ *  graphic separator instead. */
+export type BreadcrumbTextSeparator = '→' | '/' | '•' | '▸';
+/** A built-in text separator or any registered Anta icon shape. */
+export type BreadcrumbSeparator = BreadcrumbTextSeparator | IconShape;
+/** Props shared by every breadcrumb item. They land on the visible `Button`
+ *  and, when the item is folded, on the corresponding `MenuItem`. */
+type BreadcrumbItemBase = Omit<BaseProps, 'children' | 'key' | 'slot' | 'tabIndex'> & {
+    /** Visible item content. It is reused as the folded menu row's label. */
+    label: React.ReactNode;
+    /** Leading icon shape. */
+    icon?: IconShape;
+    /** Trailing icon shape. Copy items reserve the trailing icon for their copy
+     *  feedback and therefore do not accept this prop. */
+    iconTrailing?: IconShape;
+    /** Semantic tone or a literal CSS color. */
+    tone?: BaseButtonProps['tone'];
+    /** Disable the item. */
+    disabled?: boolean;
+    /** Mark this item as the current page. The wrapper passes
+     *  `aria-current="page"` through to its button or link. */
+    current?: boolean;
+    /** Runs when an action item is activated. A folded item calls it from the
+     *  corresponding `MenuItem` selection. */
+    onClick?: (event: any) => void;
+};
+/** A breadcrumb that navigates to an href. */
+export type BreadcrumbLinkItem = BreadcrumbItemBase & {
+    /** Destination URL. */
+    href: string;
+    /** Where to open the destination. */
+    target?: string;
+    copy?: never;
+    copyNode?: never;
+    copyUrl?: never;
+};
+/** A non-navigating breadcrumb action. */
+export type BreadcrumbActionItem = BreadcrumbItemBase & {
+    href?: never;
+    target?: never;
+    copy?: never;
+    copyNode?: never;
+    copyUrl?: never;
+};
+/** A breadcrumb that copies a literal value, a marked DOM region, or the page
+ *  URL. It uses `ButtonCopy` when visible and `MenuItemCopy` when folded. */
+export type BreadcrumbCopyItem = Omit<BreadcrumbItemBase, 'iconTrailing'> & CopyTarget & {
+    href?: never;
+    target?: never;
+    iconTrailing?: never;
+    /** Where the copy glyph sits relative to the label — or `'none'` to omit it.
+     *  @defaultValue 'leading' */
+    iconPlacement?: 'leading' | 'trailing' | 'none';
+    /** Text in the successful no-icon confirmation.
+     *  @defaultValue Copied */
+    copiedLabel?: string;
+};
+/** One item in a `<Breadcrumbs>` trail. Link, action, and copy items share
+ *  presentation props while keeping incompatible behaviours type-safe. */
+export type BreadcrumbItem = BreadcrumbLinkItem | BreadcrumbActionItem | BreadcrumbCopyItem;
+/** Public props for `<Breadcrumbs>`. */
+export type BreadcrumbsProps = BaseProps & {
+    children?: never;
+} & {
+    /** Ordered breadcrumb entries. */
+    items: BreadcrumbItem[];
+    /** Button size applied to every visible item and the More control.
+     *  @defaultValue 'medium' */
+    size?: 'small' | 'medium' | 'large';
+    /** Separator between visible entries.
+     *  @defaultValue 'chevron-right' */
+    separator?: BreadcrumbSeparator;
+    /** Maximum number of original breadcrumb items left visible. The More
+     *  control does not count. Omit to keep every item visible. */
+    maxItems?: number;
+    /** Number of original items kept before the More control when `maxItems`
+     *  collapses the trail. The rest of the visible-item budget is kept from the
+     *  end, so `0` puts More first.
+     *  @defaultValue 0 */
+    itemsBeforeCollapse?: number;
+    /** Accessible name for the More control.
+     *  @defaultValue 'Show more breadcrumbs' */
+    moreLabel?: string;
+} & ({
+    /** Button priority applied to every visible item and the More control.
+     *  @defaultValue quaternary */
+    priority?: 'quaternary';
+    /** Remove horizontal padding from every visible breadcrumb control. */
+    paddingless?: boolean;
+} | {
+    /** Button priority applied to every visible item and the More control. */
+    priority: 'tertiary';
+    paddingless?: never;
+}) & ({
+    underline?: never;
+    underlineOnHover?: never;
+} | {
+    /** Underline style applied to every visible breadcrumb control. */
+    underline: 'solid' | 'dashed' | 'dotted';
+    /** Hide the underline at rest and reveal it on hover. */
+    underlineOnHover?: boolean;
+});
+/**
+ * Breadcrumbs — hierarchy navigation assembled from Anta Buttons. Entries can
+ * be links, actions, or copy controls; an optional `maxItems` replaces one
+ * contiguous range with a More menu without measuring the available width.
+ *
+ * @example
+ * ```tsx
+ * <Breadcrumbs
+ *   maxItems={3}
+ *   items={[
+ *     { label: 'Home', href: '/' },
+ *     { label: 'Projects', href: '/projects' },
+ *     { label: 'Anta', href: '/projects/anta' },
+ *     { label: 'Button.tsx', current: true, copy: 'src/components/Button.tsx' },
+ *   ]}
+ * />
+ * ```
+ */
+export declare const Breadcrumbs: ({ items, priority, size, separator, maxItems, itemsBeforeCollapse, moreLabel, underline, underlineOnHover, paddingless, className, style, "aria-label": ariaLabel, ...rest }: BreadcrumbsProps) => any;
+export {};

package/dist/components/Breadcrumbs.js

@@ -0,0 +1,145 @@
+import { jsx } from "@antadesign/anta/jsx-runtime";
+import { Button } from "./Button";
+import { ButtonCopy } from "./ButtonCopy";
+import { Icon } from "./Icon";
+import { Menu } from "./Menu";
+import { MenuItem } from "./MenuItem";
+import { MenuItemCopy } from "./MenuItemCopy";
+import "./Breadcrumbs.css";
+const TEXT_SEPARATORS = /* @__PURE__ */ new Set(["\u2192", "/", "\u2022", "\u25B8"]);
+function isCopyItem(item) {
+  return "copy" in item || "copyNode" in item || "copyUrl" in item;
+}
+function buildEntries(items, maxItems, itemsBeforeCollapse) {
+  if (maxItems == null || !Number.isFinite(maxItems))
+    return items.map((item) => ({ kind: "item", item }));
+  const visibleCount = Math.max(1, Math.floor(maxItems));
+  if (items.length <= visibleCount) return items.map((item) => ({ kind: "item", item }));
+  const beforeCount = Math.min(
+    Math.max(0, Number.isFinite(itemsBeforeCollapse) ? Math.floor(itemsBeforeCollapse) : 0),
+    visibleCount - 1
+  );
+  const afterCount = visibleCount - beforeCount;
+  const hidden = items.slice(beforeCount, items.length - afterCount);
+  return [
+    ...items.slice(0, beforeCount).map((item) => ({ kind: "item", item })),
+    { kind: "overflow", items: hidden },
+    ...items.slice(items.length - afterCount).map((item) => ({ kind: "item", item }))
+  ];
+}
+function currentAttrs(item) {
+  return item.current ? { "aria-current": "page" } : {};
+}
+function renderButtonItem(item, priority, size, underline, underlineOnHover, paddingless, key) {
+  const { label, current, ...props } = item;
+  const a11y = currentAttrs(item);
+  if (isCopyItem(item)) {
+    const copyProps = {
+      ...props,
+      priority,
+      size,
+      underline,
+      underlineOnHover,
+      paddingless,
+      ...a11y
+    };
+    return /* @__PURE__ */ jsx(ButtonCopy, { ...copyProps, children: label }, key);
+  }
+  const buttonProps = {
+    ...props,
+    priority,
+    size,
+    underline,
+    underlineOnHover,
+    paddingless,
+    ...a11y
+  };
+  return /* @__PURE__ */ jsx(Button, { ...buttonProps, children: label }, key);
+}
+function renderMenuItem(item, key) {
+  const { label, current, onClick, ...props } = item;
+  const a11y = currentAttrs(item);
+  if (isCopyItem(item)) {
+    return /* @__PURE__ */ jsx(
+      MenuItemCopy,
+      {
+        ...props,
+        label,
+        onSelect: onClick,
+        ...a11y
+      },
+      key
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    MenuItem,
+    {
+      ...props,
+      label,
+      onSelect: onClick,
+      ...a11y
+    },
+    key
+  );
+}
+const Breadcrumbs = ({
+  items,
+  priority = "quaternary",
+  size = "medium",
+  separator = "chevron-right",
+  maxItems,
+  itemsBeforeCollapse = 0,
+  moreLabel = "Show more breadcrumbs",
+  underline,
+  underlineOnHover,
+  paddingless,
+  className,
+  style,
+  "aria-label": ariaLabel,
+  ...rest
+}) => {
+  const entries = buildEntries(items, maxItems, itemsBeforeCollapse);
+  const textSeparator = TEXT_SEPARATORS.has(separator);
+  const separatorNode = textSeparator ? separator : /* @__PURE__ */ jsx(Icon, { shape: separator });
+  return /* @__PURE__ */ jsx(
+    "a-breadcrumbs",
+    {
+      role: "navigation",
+      "aria-label": ariaLabel ?? "Breadcrumb",
+      "data-size": size === "medium" ? void 0 : size,
+      "data-paddingless": paddingless ? "" : void 0,
+      "data-separator-icon": textSeparator ? void 0 : "",
+      class: className,
+      style,
+      ...rest,
+      children: entries.flatMap((entry, index) => {
+        const nodes = entry.kind === "overflow" ? [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              ...{
+                priority,
+                size,
+                paddingless,
+                icon: "more",
+                "aria-label": moreLabel,
+                "aria-haspopup": "menu"
+              }
+            },
+            `more-${index}`
+          ),
+          /* @__PURE__ */ jsx(Menu, { autoWidth: true, children: entry.items.map((item, hiddenIndex) => renderMenuItem(item, hiddenIndex)) }, `menu-${index}`)
+        ] : [renderButtonItem(entry.item, priority, size, underline, underlineOnHover, paddingless, index)];
+        if (index < entries.length - 1) {
+          nodes.push(
+            /* @__PURE__ */ jsx("a-breadcrumb-separator", { "aria-hidden": "true", children: separatorNode }, `separator-${index}`)
+          );
+        }
+        return nodes;
+      })
+    }
+  );
+};
+export {
+  Breadcrumbs
+};

package/dist/components/Button.d.ts

@@ -94,6 +94,16 @@ export type SubmitMode = {
     /** Form id when the button isn't a descendant of its form. */
     form?: string;
 };
+/** Underline options shared by tertiary and quaternary buttons. */
+export type UnderlineMode = {
+    underline?: never;
+    underlineOnHover?: never;
+} | {
+    /** Underline style. */
+    underline: 'solid' | 'dashed' | 'dotted';
+    /** Hide the underline at rest and reveal it on hover. */
+    underlineOnHover?: boolean;
+};
 /** Priority axis — `underline` only on `tertiary` / `quaternary`,
  *  `paddingless` only on `quaternary`. */
 export type PriorityMode = {
@@ -101,16 +111,13 @@ export type PriorityMode = {
      *  @defaultValue secondary */
     priority?: 'primary' | 'secondary';
     underline?: never;
+    underlineOnHover?: never;
     paddingless?: never;
-} | {
+} | UnderlineMode & {
     priority: 'tertiary';
-    /** Underline style. */
-    underline?: 'solid' | 'dashed' | 'dotted';
     paddingless?: never;
-} | {
+} | UnderlineMode & {
     priority: 'quaternary';
-    /** Underline style. */
-    underline?: 'solid' | 'dashed' | 'dotted';
     /** Drops outer padding to zero. */
     paddingless?: boolean;
 };
@@ -135,4 +142,4 @@ export type ButtonProps = BaseButtonProps & PriorityMode & ContentMode & SubmitM
  * <Button href="/docs" target="_blank" label="Read the docs" />
  * ```
  */
-export declare const Button: ({ priority, tone, underline, icon, iconTrailing, paddingless, label, size, loading, disabled, selected, round, onClick, href, target, rel, download, ping, type, form, className, style, children, ...rest }: ButtonProps) => any;
+export declare const Button: ({ priority, tone, underline, underlineOnHover, icon, iconTrailing, paddingless, label, size, loading, disabled, selected, round, onClick, href, target, rel, download, ping, type, form, className, style, children, ...rest }: ButtonProps) => any;

package/dist/components/Button.js

@@ -4,6 +4,7 @@ const Button = ({
   priority,
   tone,
   underline,
+  underlineOnHover,
   icon,
   iconTrailing,
   paddingless,
@@ -40,6 +41,7 @@ const Button = ({
     priority,
     tone: toneAttr,
     underline,
+    "underline-on-hover": underlineOnHover ? "" : void 0,
     // 'medium' (and unset) is the implicit default — emit no DOM attr.
     size: size && size !== "medium" ? size : void 0,
     // Boolean attributes: emit a presence attribute (empty string) when on,

package/dist/components/Input.d.ts

@@ -88,6 +88,8 @@ export interface InputProps extends BaseProps, DOMEventHandlers {
     autoComplete?: 'off' | 'on' | 'name' | 'username' | 'email' | 'current-password' | 'new-password' | 'one-time-code' | 'tel' | 'url' | (string & {});
     /** Virtual-keyboard hint. Overrides the value derived from `type`. */
     inputMode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
+    /** Focus this field when its containing `Dialog` opens. */
+    autoFocus?: boolean;
     /** Form field name — submitted with the form via ElementInternals. */
     name?: string;
     /** Placeholder shown when empty. */
@@ -171,4 +173,4 @@ export interface InputProps extends BaseProps, DOMEventHandlers {
  * <Input label="Email" type="email" placeholder="you@example.com" clearable />
  * ```
  */
-export declare const Input: ({ label, hint, status, statusIcon, tone, size, round, value, defaultValue, multiline, rows, maxRows, clearable, leading, trailing, type, autoComplete, inputMode, name, placeholder, truncate, disabled, readOnly, required, dimActions, spellCheck, maxLength, minLength, pattern, min, max, step, onInput, onChange, onValueChange, onClearClick, onClearInput, children, className, style, ...rest }: InputProps) => any;
+export declare const Input: ({ label, hint, status, statusIcon, tone, size, round, value, defaultValue, multiline, rows, maxRows, clearable, leading, trailing, type, autoComplete, inputMode, autoFocus, name, placeholder, truncate, disabled, readOnly, required, dimActions, spellCheck, maxLength, minLength, pattern, min, max, step, onInput, onChange, onValueChange, onClearClick, onClearInput, children, className, style, ...rest }: InputProps) => any;

package/dist/components/Input.js

@@ -49,6 +49,7 @@ const Input = ({
   type,
   autoComplete,
   inputMode,
+  autoFocus,
   name,
   placeholder,
   truncate = true,
@@ -101,6 +102,7 @@ const Input = ({
       "dim-actions": presence(dimActions),
       autocomplete: autoComplete ?? (!multiline && rows == null && type ? AUTOCOMPLETE_BY_TYPE[type] : void 0),
       inputmode: inputMode ?? (!multiline && rows == null && type ? INPUTMODE_BY_TYPE[type] : void 0),
+      autofocus: autoFocus ? true : void 0,
       spellcheck: spellCheck != null ? spellCheck ? "true" : "false" : void 0,
       maxlength: maxLength != null ? String(maxLength) : void 0,
       minlength: minLength != null ? String(minLength) : void 0,

package/dist/components/InputTime.d.ts

@@ -70,6 +70,8 @@ export interface InputTimeProps extends BaseProps, DOMEventHandlers {
     trailing?: React.ReactNode;
     /** Fully-round the field, or a custom radius (`number` px / CSS length). */
     round?: boolean | number | string;
+    /** Focus this field when its containing `Dialog` opens. */
+    autoFocus?: boolean;
     /** Fires on every edit (`input`), with the native event + an `attrs` snapshot
      *  (`value`, `name`, `empty`, `valid`, `validationMessage`). Also fires on
      *  `change` (blur) and on clear. */
@@ -103,4 +105,4 @@ export interface InputTimeProps extends BaseProps, DOMEventHandlers {
  * <InputTime label="Start" defaultValue="09:30" onValueChange={(_, { value }) => save(value)} />
  * ```
  */
-export declare const InputTime: ({ label, hint, status, statusIcon, tone, size, round, value, defaultValue, locale, hour12, min, max, name, disabled, required, icon, clearable, dimActions, trailing, onValueChange, onClearInput, children, className, style, ...rest }: InputTimeProps) => any;
+export declare const InputTime: ({ label, hint, status, statusIcon, tone, size, round, value, defaultValue, locale, hour12, min, max, name, disabled, required, icon, clearable, dimActions, trailing, autoFocus, onValueChange, onClearInput, children, className, style, ...rest }: InputTimeProps) => any;

package/dist/components/InputTime.js

@@ -43,6 +43,7 @@ const InputTime = ({
   clearable,
   dimActions,
   trailing,
+  autoFocus,
   onValueChange,
   onClearInput,
   children,
@@ -69,6 +70,7 @@ const InputTime = ({
       disabled: presence(disabled),
       required: presence(required),
       "dim-actions": presence(dimActions),
+      autofocus: autoFocus ? true : void 0,
       "aria-invalid": status === "critical" ? "true" : void 0,
       oninput: onValueChange ? (e) => onValueChange(e, attrsOf(e)) : void 0,
       onchange: onValueChange ? (e) => onValueChange(e, attrsOf(e)) : void 0,

package/dist/components/MenuItemCopy.d.ts

@@ -11,7 +11,17 @@ export type MenuItemCopyProps = MenuItemCommonProps & MenuItemActionMode & {
     selectionIndicator?: never;
     indeterminate?: never;
     indicator?: never;
-} & CopyTarget;
+    iconTrailing?: never;
+} & CopyTarget & {
+    /** Where the copy glyph sits relative to the label — or `'none'` to omit it.
+     *  Without a glyph, a successful copy shows a confirmation label near the
+     *  pointer and leaves the row unchanged.
+     *  @defaultValue 'leading' */
+    iconPlacement?: 'leading' | 'trailing' | 'none';
+    /** Text in the successful no-icon confirmation.
+     *  @defaultValue Copied */
+    copiedLabel?: string;
+};
 /**
  * Copying menu item — a `MenuItem` preset for copy-to-clipboard rows inside a
  * `Menu`. Set `copy` for a literal string, `copyNode` to copy a DOM region, or
@@ -24,7 +34,8 @@ export type MenuItemCopyProps = MenuItemCommonProps & MenuItemActionMode & {
  * flips the leading icon to a check / ✕ and retones for ~2s (see `useCopyFeedback`).
  *
  * Defaults `label` to "Copy" and the leading `icon` to `copy`; override either.
- * Other props pass through — `tone`, `kbd`, `onCopied`.
+ * `iconPlacement` moves that glyph to the trailing edge or omits it. Other props
+ * pass through — `tone`, `kbd`, `onCopied`.
  *
  * @example
  * ```tsx
@@ -34,4 +45,4 @@ export type MenuItemCopyProps = MenuItemCommonProps & MenuItemActionMode & {
  * </Menu>
  * ```
  */
-export declare const MenuItemCopy: ({ label, icon, tone, onCopied, onCopyRequest, copy, copyNode, copyUrl, copyWithUrl, children, ...rest }: MenuItemCopyProps) => any;
+export declare const MenuItemCopy: ({ label, icon, iconPlacement, copiedLabel, tone, onCopied, onCopyRequest, copy, copyNode, copyUrl, copyWithUrl, children, ...rest }: MenuItemCopyProps) => any;

package/dist/components/MenuItemCopy.js

@@ -5,6 +5,8 @@ import { copyElementProps, isNodeCopy } from "./copy-props";
 const MenuItemCopy = ({
   label = "Copy",
   icon = "copy",
+  iconPlacement = "leading",
+  copiedLabel,
   tone,
   onCopied,
   onCopyRequest,
@@ -15,21 +17,25 @@ const MenuItemCopy = ({
   children,
   ...rest
 }) => {
-  const { shownIcon, shownTone, handleCopied } = useCopyFeedback(icon, tone, onCopied);
+  const restingIcon = iconPlacement === "none" ? void 0 : icon;
+  const { shownIcon, shownTone, handleCopied } = useCopyFeedback(restingIcon, tone, onCopied);
+  const iconSlot = iconPlacement === "trailing" ? { iconTrailing: shownIcon } : iconPlacement === "none" ? {} : { icon: shownIcon };
   const copyAttrs = copyElementProps({
     copy,
     copyNode,
     copyUrl,
     copyWithUrl,
     onCopyRequest,
-    onCopied: handleCopied
+    onCopied: handleCopied,
+    toast: iconPlacement === "none",
+    copiedLabel
   });
   return /* @__PURE__ */ jsxs(
     MenuItem,
     {
       label,
-      icon: shownIcon,
       tone: shownTone,
+      ...iconSlot,
       "data-menu-open": "",
       "data-copy-node-button": isNodeCopy({ copyNode }) ? "" : void 0,
       ...rest,

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