@antadesign/anta 0.2.2 → 0.3.1

package/dist/components/RadioGroup.d.ts

@@ -0,0 +1,119 @@
+import type { BaseProps } from "../general_types";
+/** The element's `statechange` payload. `next`/`prev` are values (`null` = nothing
+ *  selected); `reason` distinguishes a user pick from a form reset / bfcache restore. */
+type StateReason = "user" | "reset" | "restore";
+type StateDetail = {
+    next: string | null;
+    prev: string | null;
+    reason: StateReason;
+};
+type StateChangeEvent = CustomEvent<StateDetail>;
+/** Snapshot passed as the 2nd argument to `onAnyChange` — the new value plus the
+ *  field name, so you don't poke at `event.target`. Mirrors `Input`/`Checkbox`. */
+export interface RadioChangeAttrs {
+    value: string | null;
+    name?: string;
+}
+/** One option in a `<RadioGroup>`. The wrapper renders an `<a-radio>` per entry. */
+export interface RadioOption {
+    /** This option's identity and the value submitted when it's selected.
+     *  Must be unique within the group (a dev-only warning fires on duplicates). */
+    value: string;
+    /** The visible label. */
+    label?: React.ReactNode;
+    /** Secondary text under the label — explanatory copy, like `Input`'s hint. */
+    hint?: React.ReactNode;
+    /** Disable just this option (skipped by keyboard, dropped from the tab order). */
+    disabled?: boolean;
+    /** Override this one option's tone (defaults to the group's `tone`). */
+    tone?: "brand" | "neutral" | "info" | "success" | "warning" | "critical" | (string & {});
+    /** Override this one option's size (defaults to the group's `size`). */
+    size?: "small" | "medium" | "large";
+    /** Override this one option's priority (defaults to the group's `priority`). */
+    priority?: "primary" | "secondary";
+}
+/** Public props for `<RadioGroup>` — the single-select container. */
+export interface RadioGroupProps extends Omit<BaseProps, "children" | "onChange"> {
+    /** The options. The wrapper renders one `<a-radio>` per entry and computes its
+     *  `selected` / roving `tabindex` / `role` declaratively. */
+    options: RadioOption[];
+    /** Controlled selected value. When provided, the consumer owns selection: the
+     *  group follows this prop and a pick only *requests* a change via
+     *  `onStateChange` (reject by not updating). Leave undefined for uncontrolled. */
+    value?: string;
+    /** Initial selected value for the uncontrolled case (the wrapper then owns the
+     *  selection in local state). */
+    defaultValue?: string;
+    /** Fired whenever selection changes — event-first. `detail` is
+     *  `{ next, prev, reason }`: `next`/`prev` are values (`null` = nothing selected);
+     *  `reason` is `'user'` | `'reset'` | `'restore'`. A `'user'` pick fires *before*
+     *  applying and is **cancelable** — `event.preventDefault()` vetoes it
+     *  (uncontrolled), or in controlled mode answer by updating `value` (reject by
+     *  doing nothing). `'reset'` (form reset) and `'restore'` (bfcache / autofill) are
+     *  not cancelable — filter on `reason` if you only track user picks. */
+    onStateChange?: (event: StateChangeEvent, detail: StateDetail) => void;
+    /** Fired *after* the selection changes — a native `change` event (the post-apply
+     *  counterpart to `onStateChange`). Not cancelable; for a controlled group it
+     *  fires once you've updated `value`. */
+    onChange?: (event: Event) => void;
+    /** Like `onChange`, but with a `{ value, name }` snapshot as the 2nd argument —
+     *  the ergonomic "just give me the new value" callback (mirrors `Input`). */
+    onAnyChange?: (event: Event, attrs: RadioChangeAttrs) => void;
+    /** Fired when focus enters the group (any option) — wired to `focusin`, since
+     *  focus lands on an individual option, not the group element itself. */
+    onFocus?: (event: FocusEvent) => void;
+    /** Fired when focus leaves the group entirely — wired to `focusout`. */
+    onBlur?: (event: FocusEvent) => void;
+    /** Form field name — the group submits one `name=value` (it's the
+     *  form-associated element). */
+    name?: string;
+    /** Plain-text label for the whole group, rendered above the options. */
+    label?: string;
+    /** Plain-text description for the group, rendered directly under `label` (above
+     *  the options) — typically instructional copy. Per-option helper text goes on
+     *  the option's own `hint` instead. */
+    hint?: string;
+    /** Validation/feedback tone for the group `hint` — recolours it (same tone set
+     *  as `Input`'s `status`). Use `critical` for an error message, etc.; omit for
+     *  the neutral default.
+     *  @defaultValue 'neutral' */
+    status?: "neutral" | "brand" | "info" | "success" | "warning" | "critical";
+    /** Tone applied to every option (an option's own `tone` wins), or any literal
+     *  CSS color for a one-off custom tone. Tints fill, label, hint, and the
+     *  unselected ring border. Named tones track light/dark mode.
+     *  @defaultValue 'neutral' */
+    tone?: "brand" | "neutral" | "info" | "success" | "warning" | "critical" | (string & {});
+    /** Size applied to every option (an option's own `size` wins).
+     *  @defaultValue 'medium' */
+    size?: "small" | "medium" | "large";
+    /** Visual priority applied to every option (an option's own `priority` wins).
+     *  `primary` fills the selected ring with the tone colour and draws a white dot;
+     *  `secondary` keeps the ring unfilled and draws the border + dot in the tone
+     *  colour (an outlined look).
+     *  @defaultValue 'primary' */
+    priority?: "primary" | "secondary";
+    /** Disable the whole group. */
+    disabled?: boolean;
+    /** Layout + arrow-key axis.
+     *  @defaultValue 'vertical' */
+    orientation?: "vertical" | "horizontal";
+}
+/**
+ * `<RadioGroup>` — a single-select radio control, rendered from `options`.
+ *
+ * This wrapper is convenience over the web components: it renders an `<a-radio>`
+ * per option and, crucially, owns the two **declarative** DOM concerns the
+ * elements deliberately don't touch — the roving **`tabindex`** (so keyboard Tab
+ * lands on the right option) and each radio's **`role`**. Selection itself lives
+ * in `<a-radio-group>` off-DOM (it sets each radio's `selected` property), so the
+ * elements never mutate the DOM; this wrapper just reflects the current value into
+ * `tabindex` on re-render. (Hand-assembling raw `<a-radio-group>` / `<a-radio>`
+ * also works — see the element docs — this wrapper is the ergonomic path.)
+ *
+ * Controlled (`value` + `onStateChange`) or uncontrolled (`defaultValue`); either
+ * way the wrapper holds the value so it can compute the roving `tabindex`.
+ *
+ * Requires `@antadesign/anta/elements` (client-side only).
+ */
+export declare const RadioGroup: ({ options, value, defaultValue, onStateChange, onChange, onAnyChange, onFocus, onBlur, name, label, hint, status, tone, size, priority, disabled, orientation, className, style, ...rest }: RadioGroupProps) => any;
+export {};

package/dist/components/RadioGroup.js

@@ -0,0 +1,108 @@
+import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
+import { useId, useState } from "../jsx-runtime";
+import { nativeStateChange, toneStyle } from "../anta_helpers";
+const radioAttrsOf = (el) => ({
+  value: el?.value ?? null,
+  name: el?.getAttribute?.("name") ?? void 0
+});
+const RadioGroup = ({
+  options,
+  value,
+  defaultValue,
+  onStateChange,
+  onChange,
+  onAnyChange,
+  onFocus,
+  onBlur,
+  name,
+  label,
+  hint,
+  status,
+  tone,
+  size,
+  priority,
+  disabled,
+  orientation,
+  className,
+  style,
+  ...rest
+}) => {
+  const controlled = value !== void 0;
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const currentValue = controlled ? value : internalValue;
+  const seen = /* @__PURE__ */ new Set();
+  for (const o of options) {
+    if (seen.has(o.value))
+      console.warn(`[anta] <RadioGroup> duplicate option value ${JSON.stringify(o.value)} \u2014 values must be unique.`);
+    seen.add(o.value);
+  }
+  const labelId = useId();
+  const hintId = useId();
+  const tabStopValue = disabled ? void 0 : options.find((o) => o.value === currentValue)?.value ?? options.find((o) => !o.disabled)?.value;
+  const onstatechange = (e) => {
+    const { event, detail } = nativeStateChange(e);
+    if (!detail) return;
+    onStateChange?.(event, detail);
+    if (controlled) return;
+    if (detail.reason === "user" && event.defaultPrevented) return;
+    setInternalValue(detail.next ?? void 0);
+  };
+  const onchange = onChange || onAnyChange ? (e) => {
+    onChange?.(e);
+    onAnyChange?.(e, radioAttrsOf(e.currentTarget));
+  } : void 0;
+  return /* @__PURE__ */ jsxs(
+    "a-radio-group",
+    {
+      role: "radiogroup",
+      "aria-disabled": disabled ? "true" : void 0,
+      "aria-labelledby": label ? labelId : void 0,
+      "aria-describedby": hint ? hintId : void 0,
+      ...rest,
+      state: controlled ? value : void 0,
+      "default-state": !controlled ? defaultValue : void 0,
+      name,
+      status: status && status !== "neutral" ? status : void 0,
+      tone: tone && tone !== "neutral" ? tone : void 0,
+      size: size && size !== "medium" ? size : void 0,
+      priority: priority && priority !== "primary" ? priority : void 0,
+      disabled: disabled ? "" : void 0,
+      orientation: orientation && orientation !== "vertical" ? orientation : void 0,
+      onstatechange,
+      onchange,
+      onfocusin: onFocus,
+      onfocusout: onBlur,
+      class: className,
+      style: toneStyle(tone, "--radio-tone-source", style),
+      children: [
+        label && /* @__PURE__ */ jsx("a-radio-group-label", { id: labelId, children: label }),
+        hint && /* @__PURE__ */ jsx("a-radio-group-hint", { id: hintId, children: hint }),
+        /* @__PURE__ */ jsx("a-radio-list", { children: options.map((o) => {
+          const optDisabled = disabled || o.disabled;
+          return /* @__PURE__ */ jsxs(
+            "a-radio",
+            {
+              role: "radio",
+              value: o.value,
+              "aria-disabled": optDisabled ? "true" : void 0,
+              tabIndex: o.value === tabStopValue ? 0 : -1,
+              tone: o.tone && o.tone !== "neutral" ? o.tone : void 0,
+              size: o.size && o.size !== "medium" ? o.size : void 0,
+              priority: o.priority && o.priority !== "primary" ? o.priority : void 0,
+              disabled: o.disabled ? "" : void 0,
+              style: toneStyle(o.tone, "--radio-tone-source"),
+              children: [
+                /* @__PURE__ */ jsx("a-radio-label", { children: o.label }),
+                o.hint != null && /* @__PURE__ */ jsx("a-radio-hint", { children: o.hint })
+              ]
+            },
+            o.value
+          );
+        }) })
+      ]
+    }
+  );
+};
+export {
+  RadioGroup
+};

package/dist/components/Tag.d.ts

@@ -10,12 +10,19 @@ export interface TagProps extends BaseProps {
      *  label; the color + weight contrast does the separating. */
     value?: string;
     /** Semantic tone, or any literal CSS color (`'#ff1493'`, `'rebeccapurple'`)
-     *  for a one-off custom tone. Named tones map to the `--text-2-{tone}` /
-     *  `--bg-4-{tone}` palette; a custom color keeps its hue while lightness
-     *  and chroma are pinned. `'neutral'` (the default) is the gray tag —
-     *  the same as omitting `tone`.
+     *  for a one-off custom tone. Each tone renders the secondary tag style:
+     *  `--text-3-{tone}` text over an alpha tint of the tone's hue (fill + a
+     *  slightly stronger hairline border). A custom color is tinted the same
+     *  way, with the text deepened to a readable foreground. `'neutral'` (the
+     *  default) is the gray tag — the same as omitting `tone`.
      *  @defaultValue neutral */
     tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    /** Emphasis level. `secondary` (the default) is the subtle alpha-tint
+     *  fill; `primary` is a solid fill with white text; `tertiary` is a
+     *  transparent outline. Omitting it (or passing `'secondary'`) renders
+     *  the default and emits no DOM attribute.
+     *  @defaultValue secondary */
+    priority?: 'primary' | 'secondary' | 'tertiary';
     /** Size variant. `small` = 16px tall, `medium` = 20px, `large` = 24px
      *  (matching `Button`). Omit the attribute or pass `'medium'` for the
      *  default — both render identically and emit no DOM attribute.
@@ -45,6 +52,32 @@ export interface TagProps extends BaseProps {
  * Requires `@antadesign/anta/elements` to be imported (client-side only)
  * so the CSS ships with the page.
  *
+ * Styling notes (`a-tag.css` ships comment-free):
+ * - Sizing is intrinsic — no fixed height, like `<a-button>`: height falls
+ *   out of `line-height` + `padding-block` + the 0.5px border (the base
+ *   1.5px block padding compensates the half-pixel border to keep the pill
+ *   at 20px), so text is never clipped and the padding tokens can be
+ *   retuned freely. An edge icon trims ~2px off its side's padding
+ *   (optical), and icons scale to `--tag-icon-size`.
+ * - Color comes from the theme-aware semantic tokens, so named tones need
+ *   no `.dark` rules; the hairline border and the segment divider both
+ *   derive from `--tag-text`, so every tone gets a matching edge. A lone
+ *   `label` is dropped into `<a-tag-value>` by this wrapper so it keeps the
+ *   default weight; `<a-tag-label>` only renders as the bold key before a
+ *   value (weight contrast does the separating — no divider).
+ * - Segmented children: raw children (not the structured label/value/icon
+ *   elements) get a hairline left border per segment after the first; the
+ *   flex `gap` sits left of the border and `padding-left` balances it.
+ * - Custom tones (any non-named `tone`) keep the source hue with
+ *   lightness/chroma pinned via oklch relative color; the `--_tag-*` knobs
+ *   are the only numbers to tune and the `.dark` block re-tunes them. The
+ *   wrapper writes `--tag-tone-source` inline; a typed `attr()` fallback
+ *   picks up raw `<a-tag tone="…">` on Chrome 133+/Safari 18.2+.
+ * - `nocaps` drops the uppercase transform and tightens tracking to the
+ *   body-text 0.02ch (uppercase needs 0.08ch); tabular figures + `ss05`
+ *   stay on. Large + nocaps bumps to 13px, keeping the same +1px
+ *   over-uppercase relationship medium has, with height unchanged.
+ *
  * @example Basic usage
  * ```tsx
  * <Tag tone="success" label="Running" />
@@ -52,4 +85,4 @@ export interface TagProps extends BaseProps {
  * <Tag tone="brand" size="small" nocaps value="v2.1.0" />
  * ```
  */
-export declare const Tag: ({ icon, iconTrailing, label, value, tone, size, nocaps, className, style, children, ...rest }: TagProps) => any;
+export declare const Tag: ({ icon, iconTrailing, label, value, tone, priority, size, nocaps, className, style, children, ...rest }: TagProps) => any;

package/dist/components/Tag.js

@@ -1,11 +1,13 @@
 import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
-const NAMED_TONES = /* @__PURE__ */ new Set(["neutral", "brand", "info", "success", "warning", "critical"]);
+import { toneStyle } from "../anta_helpers";
+import { Icon } from "./Icon";
 const Tag = ({
   icon,
   iconTrailing,
   label,
   value,
   tone,
+  priority,
   size,
   nocaps,
   className,
@@ -13,24 +15,26 @@ const Tag = ({
   children,
   ...rest
 }) => {
-  const isCustomTone = tone != null && !NAMED_TONES.has(tone);
-  const computedStyle = isCustomTone ? { ...style, ["--tag-tone-source"]: tone } : style;
+  const computedStyle = toneStyle(tone, "--tag-tone-source", style);
   const hasValue = value != null;
+  const isIconOnly = icon != null && label == null && value == null && children == null && iconTrailing == null;
   return /* @__PURE__ */ jsxs(
     "a-tag",
     {
       tone,
+      "aria-label": isIconOnly ? `${icon} tag` : void 0,
+      priority: priority && priority !== "secondary" ? priority : void 0,
       size: size && size !== "medium" ? size : void 0,
       nocaps: nocaps ? "" : void 0,
       class: className,
       style: computedStyle,
       ...rest,
       children: [
-        icon && /* @__PURE__ */ jsx("a-icon", { shape: icon, "aria-hidden": "true" }),
+        icon && /* @__PURE__ */ jsx(Icon, { shape: icon }),
         label != null && (hasValue ? /* @__PURE__ */ jsx("a-tag-label", { children: label }) : /* @__PURE__ */ jsx("a-tag-value", { children: label })),
         hasValue && /* @__PURE__ */ jsx("a-tag-value", { children: value }),
         children,
-        iconTrailing && /* @__PURE__ */ jsx("a-icon", { shape: iconTrailing, "aria-hidden": "true" })
+        iconTrailing && /* @__PURE__ */ jsx(Icon, { shape: iconTrailing })
       ]
     }
   );

package/dist/components/Text.d.ts

@@ -1,28 +1,42 @@
 import type { BaseProps } from "../general_types";
-export interface TextProps extends BaseProps {
+/** Truncation / expansion axis. `expandable` only takes effect with `truncate`;
+ *  `collapsible` only with `expandable` — so the type forbids `collapsible`
+ *  unless `expandable` is set (a dynamic `expandable={cond}` is still allowed). */
+type ExpandMode = {
+    expandable?: false;
+    collapsible?: never;
+} | {
+    /** Show a fade hint and chevron over the truncated text and let the user
+     *  expand it by clicking the chevron region or pressing Enter while the
+     *  chevron has keyboard focus. Only takes effect together with `truncate`.
+     *  On its own, expanding is **one-way** — the control is removed once
+     *  expanded; add `collapsible` for a two-way toggle. */
+    expandable: boolean;
+    /** Let the reader collapse back after expanding: the chevron becomes a
+     *  "Show more" / "Show less" toggle that stays visible while expanded.
+     *  Only takes effect together with `expandable`. */
+    collapsible?: boolean;
+};
+export type TextProps = BaseProps & {
     /** Visual priority. Maps to text-1..text-5 (`primary` = text-1, the
      *  strongest). The default is `secondary` (text-2) — body text reads a
      *  step softer than the strongest foreground; pass `primary` for emphasis.
      *  @defaultValue secondary */
     priority?: 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'quinary';
     /** Color tint. Applies the matching `--text-{N}-{tone}` palette. */
-    tone?: 'brand' | 'success' | 'critical' | 'warning' | 'info';
+    tone?: 'brand' | 'info' | 'success' | 'warning' | 'critical';
     /** Type scale. `small` = 13/16, `medium` = 15/20, `large` = 17/24.
      *  @defaultValue medium */
     size?: 'small' | 'medium' | 'large';
     /** Render as inline-block instead of the default block element. */
     inline?: boolean;
     /** Truncate with a trailing ellipsis. `true` (or `1`) clamps to a
-     *  single line; any integer ≥ 2 clamps to that many lines. Uses the
-     *  `-webkit-line-clamp` technique, supported in all major browsers
-     *  (Firefox 68+, Chrome, Safari, Edge). */
+     *  single line; any integer ≥ 2 clamps to that many lines; `0` or a
+     *  negative value means no truncation. Uses the `-webkit-line-clamp`
+     *  technique, supported in all major browsers (Firefox 68+, Chrome,
+     *  Safari, Edge). */
     truncate?: boolean | number;
-    /** Show a fade hint and chevron over the truncated text and let the
-     *  user expand it by clicking the chevron region or pressing Enter
-     *  while the chevron has keyboard focus. Only takes effect together
-     *  with `truncate`. */
-    expandable?: boolean;
-}
+} & ExpandMode;
 /**
  * Block-level text container with priority and tone support.
  *
@@ -45,4 +59,5 @@ export interface TextProps extends BaseProps {
  * <Text truncate={3} expandable>…long paragraph…</Text>
  * ```
  */
-export declare const Text: ({ priority, tone, size, inline, truncate, expandable, className, style, children, ...rest }: TextProps) => any;
+export declare const Text: ({ priority, tone, size, inline, truncate, expandable, collapsible, className, style, children, ...rest }: TextProps) => any;
+export {};

package/dist/components/Text.js

@@ -1,7 +1,9 @@
 import { jsx } from "@antadesign/anta/jsx-runtime";
-const Text = ({ priority, tone, size, inline, truncate, expandable, className, style, children, ...rest }) => {
-  const lineCount = typeof truncate === "number" ? truncate : truncate ? 1 : null;
+const Text = ({ priority, tone, size, inline, truncate, expandable, collapsible, className, style, children, ...rest }) => {
+  const n = typeof truncate === "number" ? truncate : truncate ? 1 : null;
+  const lineCount = n != null && n >= 1 ? n : null;
   const computedStyle = lineCount != null ? { ...style, ["--line-clamp"]: lineCount } : style;
+  const canExpand = expandable && lineCount != null;
   return /* @__PURE__ */ jsx(
     "a-text",
     {
@@ -10,7 +12,8 @@ const Text = ({ priority, tone, size, inline, truncate, expandable, className, s
       size,
       inline: inline ? "" : void 0,
       truncate: lineCount != null ? String(lineCount) : void 0,
-      expandable: expandable && truncate ? "" : void 0,
+      expandable: canExpand ? "" : void 0,
+      collapsible: canExpand && collapsible ? "" : void 0,
       class: className,
       style: computedStyle,
       ...rest,

package/dist/components/Title.d.ts

@@ -9,7 +9,7 @@ export interface TitleProps extends BaseProps {
      *  @defaultValue primary */
     priority?: 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'quinary';
     /** Color tint. Applies the matching `--text-{N}-{tone}` palette. */
-    tone?: 'brand' | 'success' | 'critical' | 'warning' | 'info';
+    tone?: 'brand' | 'info' | 'success' | 'warning' | 'critical';
 }
 /**
  * Block-level heading with level 1-6, priority, and tone.
@@ -24,6 +24,15 @@ export interface TitleProps extends BaseProps {
  * so use a real heading tag if SEO matters and you don't need the
  * `tone` / `priority` props.
  *
+ * Styling notes (`a-title.css` ships comment-free): `<a-title>` is
+ * intentionally CSS-only — no JS, no shadow DOM, not even
+ * `customElements.define`; the browser treats it as a generic unknown
+ * element and the CSS gives it block layout, the demi-bold variable-font
+ * weight, and the per-level type scale + vertical rhythm. The matching
+ * `h1`–`h6` rules in `src/reset.css` are kept in lockstep so raw markup
+ * looks the same as `<Title level={n}>`. The tone × priority color matrix
+ * has the same shape as `a-text`'s.
+ *
  * Requires `@antadesign/anta/elements` to be imported (client-side only)
  * so the CSS ships with the page.
  *

package/dist/elements/a-button.css

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

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

@@ -5,6 +5,62 @@ declare global {
         hasKeyListenerForAButton?: boolean;
     }
 }
+/**
+ * `<a-button>` — button element (also styles `a[role="button"]`).
+ *
+ * Styling notes (`a-button.css` ships comment-free):
+ * - **Token architecture.** The base rule carries shared constants plus the
+ *   neutral tone tokens (neutral is the implicit default; its chip uses a
+ *   softer 5% rest alpha vs 10% for named tones). Named tones override via
+ *   `[tone="X"]`; critical/warning tertiary active steps heavier (20% vs
+ *   15%). Final colors are wired through `--button-fg`/`--button-bg`:
+ *   secondary is declared unscoped so a bare `a-button` consumer selector
+ *   can override it without bumping specificity; primary/tertiary/quaternary
+ *   match an explicit `[priority]` and win on specificity. Secondary's rest
+ *   label is darkened by `--button-fg-secondary-l-shift` oklch lightness
+ *   (0.05 light mode, zeroed in dark) at the `--button-fg` wiring, so it
+ *   covers named and custom tones alike; secondary also carries a 1px
+ *   hairline box-shadow in the current fg tone at 50% alpha, which the
+ *   other priorities cancel in their own blocks. `[selected]` adds a 1px
+ *   inset ring in `currentColor`, declared after the priority blocks so it
+ *   survives their `box-shadow: none` cancels.
+ * - **Dark mode** re-tunes with heavier alphas (30/40% vs 10/15%) and flips
+ *   neutral's anchor to a lilac — mixing dark gray into a dark bg yields no
+ *   contrast.
+ * - **Custom tones** (any non-named `tone` value): primary uses the literal
+ *   color; other priorities derive from the source HUE via oklch relative
+ *   color with lightness/chroma/alpha pinned near Brand. The `--_tone-*`
+ *   knobs are the only numbers to tune (the `.dark` block re-tunes them).
+ *   The JSX wrapper writes `--button-tone-source` inline; a typed `attr()`
+ *   fallback picks up raw `<a-button tone="…">` on Chrome 133+/Safari 18.2+.
+ * - **Hover is gated** to `(hover: hover) and (pointer: fine)` so it doesn't
+ *   stick after a tap; `:active`/`[selected]` stay ungated (correct press
+ *   feedback on touch). Quaternary rests at 90% fg alpha with a slightly
+ *   heavier `font-weight: 415` (quieter than tertiary but legible), restores
+ *   full opacity on hover, lightens by 0.05 oklch L on press (dark mode
+ *   returns to rest instead — it's already light), and has instant
+ *   transitions in every direction.
+ * - **Layout gotchas:** `flex-shrink: 0` (shrinking + `overflow: hidden`
+ *   would clip the label silently); `font-variation-settings` must restate
+ *   ALL axes — it replaces rather than merges, and dropping "slnt"/"ital"
+ *   renders italic in Safari; the label uses a 17px line box + 1px bottom
+ *   padding for optical vertical centering at an unchanged 18px box.
+ * - **Icon-only** is purely structural — `:has(> a-icon:only-child)` gives
+ *   square padding + a min-size pin (and centers when the host is sized
+ *   bigger). A non-only edge icon trims ~2px off its side's padding
+ *   (optical), `max(0px, …)` keeping paddingless at 0.
+ * - **Underline** renders only on tertiary/quaternary: 0.5px hairline at 75%
+ *   alpha at rest, 1px at full alpha on hover/`[selected]`, mirroring the
+ *   prose-link rule in `<Text>`.
+ * - **Loading** paints a blurred diagonal stripe overlay; the x-period is
+ *   the diagonal period projected onto x so the slide loops seamlessly
+ *   (overshooting left by one period), and a large negative
+ *   `animation-delay` desyncs instances so a row doesn't pulse in lockstep.
+ * - **Disabled** sets `background-color`/`color` directly (not the vars) so
+ *   an inline `--button-bg` override can't keep a disabled button alive, and
+ *   skips transitions — a `.dark` toggle would flash the tone hue
+ *   mid-resolve.
+ */
 export declare class AButtonElement extends HTMLElementBase {
     connectedCallback(): void;
 }