@antadesign/anta 0.3.2 → 0.3.4

package/dist/components/Tabs.js

@@ -1,28 +1,9 @@
-import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
-import { useId, useState, Fragment } from "../jsx-runtime";
-import { nativeStateChange, toneStyle, wrapLabel } from "../anta_helpers";
-import { Tab } from "./Tab";
-import { TabPanel } from "./TabPanel";
-import styles from "./Tabs.module.css";
-const flattenChildren = (nodes) => {
-  const out = [];
-  const visit = (n) => {
-    if (n == null || typeof n === "boolean") return;
-    if (Array.isArray(n)) {
-      n.forEach(visit);
-      return;
-    }
-    if (n && n.type === Fragment) {
-      visit(n.props?.children);
-      return;
-    }
-    out.push(n);
-  };
-  visit(nodes);
-  return out;
-};
+import { Fragment, jsx, jsxs } from "@antadesign/anta/jsx-runtime";
+import { useState } from "../jsx-runtime";
+import { nativeStateChange, toneStyle, roundStyle, wrapLabel } from "../anta_helpers";
 const Tabs = ({
   children,
+  options,
   value,
   defaultValue,
   onStateChange,
@@ -35,8 +16,8 @@ const Tabs = ({
   tone,
   size,
   orientation,
-  mounting = "display",
   noslide,
+  round,
   disabled,
   className,
   style,
@@ -46,24 +27,12 @@ const Tabs = ({
   const controlled = value !== void 0;
   const [internalValue, setInternalValue] = useState(defaultValue);
   const currentValue = controlled ? value : internalValue;
-  const [mounted, setMounted] = useState(
-    () => new Set(currentValue != null ? [currentValue] : [])
-  );
-  if (currentValue != null && !mounted.has(currentValue)) {
-    setMounted((m) => m.has(currentValue) ? m : new Set(m).add(currentValue));
-  }
-  const baseId = useId();
-  const tabId = (v) => `${baseId}-tab-${v}`;
-  const panelId = (v) => `${baseId}-panel-${v}`;
-  const items = flattenChildren(children);
-  const tabs = items.filter((c) => c?.type === Tab);
-  const panels = items.filter((c) => c?.type === TabPanel);
-  const panelValues = new Set(panels.map((pan) => pan.props.value));
+  const tabs = options ?? [];
   const seen = /* @__PURE__ */ new Set();
   for (const t of tabs) {
-    if (seen.has(t.props.value))
-      console.warn(`[anta] <Tabs> duplicate <Tab value=${JSON.stringify(t.props.value)}> \u2014 values must be unique.`);
-    seen.add(t.props.value);
+    if (seen.has(t.value))
+      console.warn(`[anta] <Tabs> duplicate option value=${JSON.stringify(t.value)} \u2014 values must be unique.`);
+    seen.add(t.value);
   }
   const onstatechange = (e) => {
     const { event, detail } = nativeStateChange(e);
@@ -78,7 +47,6 @@ const Tabs = ({
     onValueChange?.(e, { value: e.currentTarget?.value ?? null });
   } : void 0;
   const vertical = orientation === "vertical";
-  const needsContainer = panels.length > 0 || vertical;
   const strip = /* @__PURE__ */ jsx(
     "a-tabs",
     {
@@ -93,32 +61,30 @@ const Tabs = ({
       size: size && size !== "medium" ? size : void 0,
       orientation: vertical ? "vertical" : void 0,
       noslide: noslide ? "" : void 0,
+      round: round ? "" : void 0,
       disabled: disabled ? "" : void 0,
       onstatechange,
       onchange,
       onfocusin: onFocus,
       onfocusout: onBlur,
-      class: needsContainer ? void 0 : className,
-      id: needsContainer ? void 0 : id,
-      style: toneStyle(tone, "--tabs-tone-source", style),
-      ...needsContainer ? {} : rest,
-      children: tabs.map((t) => {
-        const p = t.props;
+      class: className,
+      id,
+      style: roundStyle(round, "--tabs-round", toneStyle(tone, "--tabs-tone-source", style)),
+      ...rest,
+      children: tabs.map((p) => {
         const tabDisabled = disabled || p.disabled;
         const isSelected = p.value === currentValue;
-        const hasPanel = panelValues.has(p.value);
         return /* @__PURE__ */ jsxs(
           "a-tab",
           {
             role: "tab",
             value: p.value,
-            id: tabId(p.value),
             tone: p.tone && p.tone !== "neutral" ? p.tone : void 0,
             style: toneStyle(p.tone, "--tabs-tone-source", void 0),
-            "aria-controls": hasPanel ? panelId(p.value) : void 0,
             "aria-disabled": tabDisabled ? "true" : void 0,
             tabIndex: tabDisabled && !isSelected ? -1 : 0,
             disabled: tabDisabled ? "" : void 0,
+            round: round || p.round ? "" : void 0,
             children: [
               p.icon && /* @__PURE__ */ jsx("a-icon", { shape: p.icon, "aria-hidden": "true" }),
               wrapLabel(p.label != null ? p.label : p.children, "a-tab-label"),
@@ -130,44 +96,10 @@ const Tabs = ({
       })
     }
   );
-  if (!needsContainer) return strip;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: className ? `${styles.container} ${className}` : styles.container,
-      "data-orientation": vertical ? "vertical" : void 0,
-      id,
-      ...rest,
-      children: [
-        strip,
-        panels.map((pan) => {
-          const p = pan.props;
-          const active = p.value === currentValue;
-          const mode = p.mounting ?? mounting;
-          if (mode === "active" && !active) return null;
-          if (mode === "lazy" && !active && !mounted.has(p.value)) return null;
-          const hidden = !active;
-          const hideByVisibility = hidden && mode === "visibility";
-          return /* @__PURE__ */ jsx(
-            "a-tabpanel",
-            {
-              role: "tabpanel",
-              id: panelId(p.value),
-              "aria-labelledby": tabId(p.value),
-              tabIndex: active ? 0 : void 0,
-              hidden: hidden && !hideByVisibility ? true : void 0,
-              "data-hide": hideByVisibility ? "visibility" : void 0,
-              inert: hidden ? true : void 0,
-              class: p.className,
-              style: p.style,
-              children: p.children
-            },
-            p.value
-          );
-        })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    strip,
+    children
+  ] });
 };
 export {
   Tabs

package/dist/components/Tag.d.ts

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

package/dist/components/Tag.js

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

package/dist/components/Text.d.ts

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

package/dist/components/Title.d.ts

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

package/dist/components/Tooltip.d.ts

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

package/dist/components/Tooltip.js

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

package/dist/elements/a-button.css

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

package/dist/elements/a-calendar.css

@@ -0,0 +1 @@
+@layer anta{.anta-calendar{--calendar-cell-width: 32px;--calendar-cell-height: 28px;display:inline-flex;flex-direction:column;gap:6px}.anta-calendar [data-part=header]{display:flex;align-items:center;gap:0}.anta-calendar [data-part=heading]{flex:1 1 auto;justify-content:center;white-space:nowrap}.anta-calendar .year-dot{flex:none;inline-size:6px;block-size:6px;border-radius:999px;background:currentColor}.anta-calendar[data-size=small]{--calendar-cell-width: 28px;--calendar-cell-height: 24px}.anta-calendar[data-size=large]{--calendar-cell-width: 36px;--calendar-cell-height: 32px}.anta-calendar[data-size=small] [data-part=weekday]{font-size:13px;line-height:16px}.anta-calendar[data-size=large] [data-part=weekday]{font-size:17px;line-height:24px}a-calendar{display:inline-grid;grid-template-columns:repeat(7,var(--calendar-cell-width, 32px));gap:1px;font-family:var(--sans-serif)}a-calendar [data-part=weekday]{display:flex;align-items:center;justify-content:center;height:24px;font-size:15px;line-height:20px;font-weight:400;color:var(--text-4);user-select:none}a-calendar [data-part=weekday][data-weekend]{color:var(--text-5)}a-calendar a-button[data-part=day-cell]{padding-inline:0;min-width:var(--calendar-cell-width, 32px);min-height:var(--calendar-cell-height, 28px);justify-content:center}a-calendar a-button[data-part=day-cell] a-button-label{padding-bottom:0}a-calendar a-button[data-part=day-cell]:focus-visible{outline-offset:0}a-calendar a-button[data-part=day-cell][data-today]:not([selected]){font-weight:600}a-calendar a-button[data-part=day-cell][data-outside]:not([selected]){opacity:.5}}

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

@@ -0,0 +1,76 @@
+import { HTMLElementBase } from '../anta_helpers';
+import './a-calendar.css';
+/**
+ * `<a-calendar>` — a **light-DOM, form-associated** month grid, and the
+ * **interaction authority** for it. It is the grid itself (`a-calendar.css` gives
+ * it a flat 7-column CSS grid), owns the form value, and **dispatches the
+ * selection and navigation events** — so it works for a vanilla consumer, not
+ * only through the JSX wrapper.
+ *
+ * It does **not** build or mutate its own contents — that would break the
+ * no-UI-thread-DOM-mutation rule (app DOM may render off a worker). Whoever
+ * renders into it (the `Calendar` JSX wrapper, or a vanilla consumer using the
+ * exported `buildMonth` engine) fills it with `<a-button>` day cells + weekday
+ * headers and *re-renders* on the element's events. The element confines itself
+ * to off-DOM work (form value, `ElementInternals` state), event dispatch, and
+ * imperative focus of cells that already exist — the `<a-radio-group>` model.
+ *
+ * ## Events (all bubble; lowercase so React + Preact bind them)
+ *
+ * - `statechange` — cancelable, fired BEFORE a pick applies. `detail` is
+ *   `{ next, prev, reason }`: ISO-string dates (or `null`), `reason` ∈
+ *   `'user' | 'reset' | 'restore'`. `preventDefault()` vetoes a `'user'` pick in
+ *   uncontrolled mode.
+ * - `change` — fired AFTER a selection applies (uncontrolled), and on
+ *   reset/restore.
+ * - `navigate` — `detail: { date }` (ISO). Fired on keyboard navigation (and
+ *   when the target month isn't rendered) so the renderer can move the roving tab
+ *   stop and flip the displayed month.
+ *
+ * ## Controlled vs uncontrolled (like `<a-radio-group>`)
+ *
+ * Presence of the **`value`** attribute = controlled: a pick only *requests* a
+ * change (fires `statechange`); the consumer answers by updating `value`. With
+ * **`defaultvalue`** instead, the element owns selection — a pick self-applies
+ * (form value + `change`) unless vetoed.
+ *
+ * ## Selection & keyboard
+ *
+ * Day cells are `<a-button>`s, so a click (and Enter/Space, which `<a-button>`
+ * turns into a click) bubbles here; the element delegates off `data-part="day-cell"`.
+ * Arrow / Home / End / PageUp / PageDown move focus among rendered cells directly,
+ * and emit `navigate` for month changes. `data-focus` (`"<iso>#<nonce>"`, set by
+ * the renderer) focuses a cell after a re-render lands a new month.
+ */
+export declare class ACalendarElement extends HTMLElementBase {
+    #private;
+    static formAssociated: boolean;
+    static observedAttributes: string[];
+    private internals?;
+    /** Selection in uncontrolled mode (controlled reads the `value` attribute). */
+    private selectedIso;
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
+    private currentIso;
+    private applyFormValue;
+    private onClick;
+    /** Request selecting `iso`: fire cancelable `statechange`; in uncontrolled mode,
+     *  if not vetoed, apply the form value and fire `change`. The renderer mirrors
+     *  the new selection visually off `statechange`. */
+    private requestSelect;
+    private onKeydown;
+    /** Focus the day cell whose `data-date` matches the signal's ISO. Deferred to a
+     *  microtask so a just-rendered new month has committed. Signal: `"<iso>#<nonce>"`. */
+    private focusCell;
+    private emitState;
+    /** The selected date as an ISO string (`''` when empty). */
+    get value(): string;
+    set value(v: string);
+    /** Form field name — mirrors the `name` attribute, like native `<input>.name`. */
+    get name(): string;
+    set name(v: string);
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string): void;
+}
+export declare function register_a_calendar(): void;