@antadesign/anta 0.3.33 → 0.3.34

package/dist/components/Breadcrumbs.d.ts

@@ -2,7 +2,6 @@ import type { IconShape } from '../elements/a-icon.shapes';
 import type { BaseProps } from '../general_types';
 import type { BaseButtonProps } from './Button';
 import type { CopyTarget } from './copy-props';
-import './Breadcrumbs.css';
 /** The text separators built into `<Breadcrumbs>`. Pass an `IconShape` for a
  *  graphic separator instead. */
 export type BreadcrumbTextSeparator = '→' | '/' | '•' | '▸';

package/dist/components/Breadcrumbs.js

@@ -5,7 +5,6 @@ import { Icon } from "./Icon";
 import { Menu } from "./Menu";
 import { MenuItem } from "./MenuItem";
 import { MenuItemCopy } from "./MenuItemCopy";
-import "./Breadcrumbs.css";
 const TEXT_SEPARATORS = /* @__PURE__ */ new Set(["\u2192", "/", "\u2022", "\u25B8"]);
 function isCopyItem(item) {
   return "copy" in item || "copyNode" in item || "copyUrl" in item;

package/dist/components/Button.d.ts

@@ -40,9 +40,8 @@ export type BaseButtonProps = {
 };
 /** Content axis — slots render in this order inside the button:
  *  `icon` → `label` → `children` → `iconTrailing`. Pass `icon` alone
- *  for an icon-only button (the CSS detects this structurally via
- *  `:has(> a-icon:only-child)` and gives the host square padding +
- *  min-size pin). */
+ *  for an icon-only button (the CSS detects a lone icon, allowing tooltip
+ *  and copy helpers, and gives the host equal padding on both axes). */
 export type ContentMode = {
     /** Label text. Renders between the leading icon and `children`. */
     label?: string;

package/dist/components/InputDate.d.ts

@@ -1,7 +1,6 @@
 import type { BaseProps } from '../general_types';
 import type { IconShape } from '../elements/a-icon.shapes';
 import { type MenuProps } from './Menu';
-import './InputDate.css';
 /** Snapshot passed as the 2nd argument to `onValueChange` — the new ISO value
  *  (`''` when cleared) plus the field name (mirrors `Input` / `Calendar`). */
 export interface InputDateChangeAttrs {

package/dist/components/InputDate.js

@@ -18,7 +18,6 @@ import { Calendar } from "./Calendar";
 import { Button } from "./Button";
 import { Icon } from "./Icon";
 import { InputTime } from "./InputTime";
-import "./InputDate.css";
 const InputDate = ({
   value,
   defaultValue,

package/dist/components/Select.d.ts

@@ -1,7 +1,6 @@
 import type { BaseProps, OptionPresentationProps, ToneScope } from '../general_types';
 import type { IconShape } from '../elements/a-icon.shapes';
 import { type MenuProps } from './Menu';
-import './select-parts.css';
 /** The type an option `value` may take: `string`, `number`, or `boolean`. Selection
  *  compares values with `===`. Object-shaped values are out of scope; give the option a
  *  stable primitive `value` and read the object back off `attrs.option` (or, in

package/dist/components/Select.js

@@ -10,7 +10,6 @@ import { MenuItem } from "./MenuItem";
 import { MenuGroup } from "./MenuGroup";
 import { MenuSeparator } from "./MenuSeparator";
 import { Tooltip } from "./Tooltip";
-import "./select-parts.css";
 function optionsWithSelection(options, values) {
   const set = new Set(values == null ? [] : Array.isArray(values) ? values : [values]);
   const state = (on, total) => on === 0 ? "none" : on === total ? "all" : "some";

package/dist/components/SelectFaceted.d.ts

@@ -2,7 +2,6 @@ import type { BaseProps, ToneScope } from '../general_types';
 import type { IconShape } from '../elements/a-icon.shapes';
 import type { OptionState, OptionValue, SelectItem, SelectOption } from './Select';
 import { type MenuProps } from './Menu';
-import './select-parts.css';
 interface FacetBase {
     /** The key for this facet's value in the record. `onValueChange` reports it as
      *  `attrs.facet`. It must be unique across `facets`. */

package/dist/components/SelectFaceted.js

@@ -10,7 +10,6 @@ import { MenuSeparator } from "./MenuSeparator";
 import { Tag } from "./Tag";
 import { Input } from "./Input";
 import { Tooltip } from "./Tooltip";
-import "./select-parts.css";
 const leavesOf = (items) => {
   const out = [];
   for (const it of items) {

package/dist/components/Steps.d.ts

@@ -1,7 +1,6 @@
 import type { IconShape } from "../elements/a-icon.shapes";
 import type { OptionPresentationProps } from "../general_types";
 import type { TabsProps } from "./Tabs";
-import "./Steps.css";
 /** Named Anta tone used by Steps. */
 export type StepTone = "neutral" | "brand" | "info" | "success" | "warning" | "critical";
 /** Process state shown by one step. */

package/dist/components/Steps.js

@@ -4,7 +4,6 @@ import { useState } from "../jsx-runtime";
 import { Icon } from "./Icon";
 import { Loader } from "./Loader";
 import { Tabs } from "./Tabs";
-import "./Steps.css";
 const STATE_ICON = {
   incomplete: "circle-large",
   completed: "check",

package/dist/components/Tabs.js

@@ -107,7 +107,8 @@ const Tabs = ({
   );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     strip,
-    children
+    children,
+    /* @__PURE__ */ jsx("template", { "data-anta-tabs-end": "" })
   ] });
 };
 export {

package/dist/components/Title.d.ts

@@ -18,7 +18,9 @@ export interface TitleProps extends BaseProps {
      *  single line; any integer ≥ 2 clamps to that many lines; `0` or a
      *  negative value means no truncation. A clipped JSX `Title` shows its
      *  text content in a tooltip by default. Nest a `<Tooltip>` to provide
-     *  your own tooltip instead. */
+     *  your own tooltip instead.
+     * @author Vlad Korobov
+     */
     truncate?: boolean | number;
 }
 /**

package/dist/elements/a-avatar.css

@@ -1 +1 @@
-@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-avatar{--avatar-size: 44px;--avatar-radius: 22%;--avatar-placeholder-bg: var(--bg-3);--avatar-badge-ratio: .24;--avatar-badge-size: calc(var(--avatar-size) * var(--avatar-badge-ratio));--avatar-badge-inset: 0px;--avatar-badge-gap: 2px;--avatar-badge-mask: none;--avatar-badge-tone-source: var(--anta-seed-neutral);--avatar-badge-chroma: .17;--avatar-badge-color: light-dark( oklch(from var(--avatar-badge-tone-source) .62 var(--avatar-badge-chroma) h), oklch(from var(--avatar-badge-tone-source) .68 var(--avatar-badge-chroma) h) );display:inline-block;inline-size:var(--avatar-size);block-size:var(--avatar-size);vertical-align:middle}a-avatar[round]{--avatar-radius: var(--avatar-round, 50%);--avatar-badge-inset: calc(var(--avatar-size) * .03);@supports (border-radius: attr(probe type(<length>),1px)){--avatar-round: attr(round type(<length>))}}a-avatar[size=small]{--avatar-size: 32px;--avatar-badge-gap: 1.5px}a-avatar[size=large]{--avatar-size: 64px;--avatar-badge-gap: 2.5px}a-avatar[badge]:not([badge=""],[badge=none]){--avatar-badge-mask: radial-gradient( circle calc(var(--avatar-badge-size) / 2 + var(--avatar-badge-gap)) at calc(100% - var(--avatar-badge-inset) - var(--avatar-badge-size) / 2) calc(100% - var(--avatar-badge-inset) - var(--avatar-badge-size) / 2), transparent 99%, #000 100% )}a-avatar:not(:defined){display:inline-block;inline-size:var(--avatar-size);block-size:var(--avatar-size);border-radius:var(--avatar-radius);background:var(--avatar-placeholder-bg);vertical-align:middle}a-avatar[badge=neutral]{--avatar-badge-chroma: .005}a-avatar[badge=brand]{--avatar-badge-tone-source: var(--anta-seed-brand)}a-avatar[badge=info]{--avatar-badge-tone-source: var(--anta-seed-info)}a-avatar[badge=success]{--avatar-badge-tone-source: var(--anta-seed-success)}a-avatar[badge=warning]{--avatar-badge-tone-source: var(--anta-seed-warning)}a-avatar[badge=critical]{--avatar-badge-tone-source: var(--anta-seed-critical)}@supports (color: attr(badge type(<color>),transparent)){a-avatar[badge]:not([badge=""],[badge=neutral],[badge=brand],[badge=info],[badge=success],[badge=warning],[badge=critical]){--avatar-badge-tone-source: attr(badge type(<color>), transparent)}}}
+@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-avatar{--avatar-size: 44px;--avatar-radius: 22%;--avatar-placeholder-bg: var(--bg-3);--avatar-badge-ratio: .24;--avatar-badge-size: calc(var(--avatar-size) * var(--avatar-badge-ratio));--avatar-badge-inset: 0px;--avatar-badge-gap: 2px;--avatar-badge-mask: none;--avatar-badge-tone-source: var(--anta-seed-neutral);--avatar-badge-chroma: .17;--avatar-badge-color: light-dark( oklch(from var(--avatar-badge-tone-source) .62 var(--avatar-badge-chroma) h), oklch(from var(--avatar-badge-tone-source) .68 var(--avatar-badge-chroma) h) );display:inline-block;position:relative;inline-size:var(--avatar-size);block-size:var(--avatar-size);vertical-align:middle}a-avatar::part(frame){display:block;inline-size:100%;block-size:100%;border-radius:var(--avatar-radius);background:var(--avatar-placeholder-bg);mask-image:var(--avatar-badge-mask)}a-avatar::part(image){object-fit:cover}a-avatar::part(badge){display:none;position:absolute;right:var(--avatar-badge-inset);bottom:var(--avatar-badge-inset);inline-size:var(--avatar-badge-size);block-size:var(--avatar-badge-size);border-radius:50%;background:var(--avatar-badge-color)}a-avatar[badge]:not([badge=""],[badge=none])::part(badge){display:block}a-avatar[round]{--avatar-radius: var(--avatar-round, 50%);--avatar-badge-inset: calc(var(--avatar-size) * .03);@supports (border-radius: attr(probe type(<length>),1px)){--avatar-round: attr(round type(<length>))}}a-avatar[size=small]{--avatar-size: 32px;--avatar-badge-gap: 1.5px}a-avatar[size=large]{--avatar-size: 64px;--avatar-badge-gap: 2.5px}a-avatar[badge]:not([badge=""],[badge=none]){--avatar-badge-mask: radial-gradient( circle calc(var(--avatar-badge-size) / 2 + var(--avatar-badge-gap)) at calc(100% - var(--avatar-badge-inset) - var(--avatar-badge-size) / 2) calc(100% - var(--avatar-badge-inset) - var(--avatar-badge-size) / 2), transparent 99%, #000 100% )}a-avatar:not(:defined){display:inline-block;inline-size:var(--avatar-size);block-size:var(--avatar-size);border-radius:var(--avatar-radius);background:var(--avatar-placeholder-bg);vertical-align:middle}a-avatar[badge=neutral]{--avatar-badge-chroma: .005}a-avatar[badge=brand]{--avatar-badge-tone-source: var(--anta-seed-brand)}a-avatar[badge=info]{--avatar-badge-tone-source: var(--anta-seed-info)}a-avatar[badge=success]{--avatar-badge-tone-source: var(--anta-seed-success)}a-avatar[badge=warning]{--avatar-badge-tone-source: var(--anta-seed-warning)}a-avatar[badge=critical]{--avatar-badge-tone-source: var(--anta-seed-critical)}@supports (color: attr(badge type(<color>),transparent)){a-avatar[badge]:not([badge=""],[badge=neutral],[badge=brand],[badge=info],[badge=success],[badge=warning],[badge=critical]){--avatar-badge-tone-source: attr(badge type(<color>), transparent)}}}

package/dist/elements/a-avatar.js

@@ -8,15 +8,12 @@ class AAvatarElement extends HTMLElementBase {
   constructor() {
     super();
     const shadow = this.attachShadow({ mode: "open" });
-    const style = document.createElement("style");
-    style.textContent = SHADOW_STYLE;
     this.#badge = document.createElement("span");
     this.#badge.className = "badge";
     this.#badge.setAttribute("part", "badge");
-    this.#badge.style.display = "none";
-    shadow.append(style, this.#badge);
+    shadow.append(this.#badge);
   }
-  /** Swap in the picture, keeping it between the style and the indicator. */
+  /** Swap in the picture, keeping it before the indicator. */
   #setPicture(node) {
     if (this.#picture) this.#picture.replaceWith(node);
     else this.#badge.before(node);
@@ -40,8 +37,6 @@ class AAvatarElement extends HTMLElementBase {
     }
   }
   #render() {
-    const badge = this.getAttribute("badge");
-    this.#badge.style.display = badge && badge !== "none" ? "" : "none";
     const name = this.getAttribute("name") ?? void 0;
     const src = this.getAttribute("src");
     if (src) {
@@ -64,27 +59,6 @@ class AAvatarElement extends HTMLElementBase {
     }
   }
 }
-const SHADOW_STYLE = `
-  :host { display: inline-block; position: relative; vertical-align: middle; }
-  svg, img {
-    display: block;
-    inline-size: 100%;
-    block-size: 100%;
-    border-radius: var(--avatar-radius);
-    background: var(--avatar-placeholder-bg);
-    mask-image: var(--avatar-badge-mask);
-  }
-  img { object-fit: cover; }
-  .badge {
-    position: absolute;
-    right: var(--avatar-badge-inset);
-    bottom: var(--avatar-badge-inset);
-    inline-size: var(--avatar-badge-size);
-    block-size: var(--avatar-badge-size);
-    border-radius: 50%;
-    background: var(--avatar-badge-color);
-  }
-`;
 function register_a_avatar() {
   if (typeof customElements === "undefined") return;
   if (!customElements.get("a-avatar")) {

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

@@ -0,0 +1 @@
+import '../components/Breadcrumbs.css';

package/dist/elements/a-breadcrumbs.js

@@ -0,0 +1 @@
+import "../components/Breadcrumbs.css";

package/dist/elements/a-button.css

@@ -1 +1 @@
-@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]){--button-primary-fg: #ffffff;--bg-primary-disabled: light-dark(#ece9ec, #272329);--bg-secondary-disabled: light-dark(#f6f4f6, #1d1a1e);--fg-disabled-primary: light-dark(#afa9b1, #776e77);--fg-disabled: light-dark(#afa9b1, #635b65);--button-loading-stripe: 14px;--button-loading-stripe-gap: 16px;--button-loading-period: calc( var(--button-loading-stripe) + var(--button-loading-stripe-gap) );--button-loading-angle: 125deg;--button-loading-x-period: calc( var(--button-loading-period) / cos(var(--button-loading-angle) - 90deg) );--button-loading-opacity: .15;--button-loading-blur: 5px;--_src: var(--anta-seed-neutral);--button-bg-primary-rest: light-dark(oklch(from var(--_src) .5 .02 h), oklch(from var(--_src) .4 .015 h));--button-bg-primary-hover: light-dark(oklch(from var(--_src) .45 .02 h), oklch(from var(--_src) .44 .015 h));--button-bg-primary-active: light-dark(oklch(from var(--_src) .4 .02 h), oklch(from var(--_src) .48 .015 h));--button-fg-primary-rest: var(--button-primary-fg);--button-fg-secondary-rest: light-dark(oklch(from var(--_src) .46 .008 h), oklch(from var(--_src) .86 .015 h));--button-fg-secondary-hover: light-dark(oklch(from var(--_src) .4 .008 h), oklch(from var(--_src) .86 .015 h));--button-fg-tertiary-rest: var(--button-fg-secondary-rest);--button-fg-tertiary-hover: var(--button-fg-secondary-hover);--button-bg-tertiary-hover: light-dark(oklch(from var(--_src) .54 .03 h / .1), oklch(from var(--_src) .44 .01 h / .24));--button-bg-tertiary-active: light-dark(oklch(from var(--_src) .54 .03 h / .15), oklch(from var(--_src) .44 .01 h / .34));--button-fg-quaternary-rest: light-dark(oklch(from var(--_src) .46 .008 h / .85), oklch(from var(--_src) .86 .015 h / .85));--button-fg-quaternary-hover: light-dark(oklch(from var(--_src) .38 .008 h), oklch(from var(--_src) .9 .015 h));--button-bg-secondary-rest: light-dark(oklch(from var(--_src) .54 .03 h / .1), oklch(from var(--_src) .44 .01 h / .24));--button-bg-secondary-hover: light-dark(oklch(from var(--_src) .54 .03 h / .15), oklch(from var(--_src) .44 .01 h / .34));--button-bg-secondary-active: light-dark(oklch(from var(--_src) .54 .03 h / .2), oklch(from var(--_src) .44 .01 h / .44));--_fs: 15px;--_lh: 20px;--_pb: 1px;--_radius: 4px;--button-padding-x: 9px;--button-padding-y: calc((8px - var(--_pb)) / 2);--button-timing-in: 75ms ease-in;--button-timing-active: 50ms linear;--button-timing-out: .15s ease-out;--button-loading-duration: .5s}a-button[round],a[role=button][data-anta][round],button[data-anta][round],input[data-anta]:is([type=reset],[type=submit])[round]{--button-round: 999px;--_radius: var(--button-round, 999px);@supports (border-radius: attr(probe type(<length>),1px)){--button-round: attr(round type(<length>), 999px)}}a-button[tone]:not([tone=""],[tone=neutral]),a[role=button][data-anta][tone]:not([tone=""],[tone=neutral]),button[data-anta][tone]:not([tone=""],[tone=neutral]),input[data-anta]:is([type=reset],[type=submit])[tone]:not([tone=""],[tone=neutral]){--button-bg-primary-rest: light-dark(oklch(from var(--_src) .51 .17 h), oklch(from var(--_src) .4 .16 h));--button-bg-primary-hover: light-dark(oklch(from var(--_src) .46 .17 h), oklch(from var(--_src) .44 .16 h));--button-bg-primary-active: light-dark(oklch(from var(--_src) .41 .17 h), oklch(from var(--_src) .48 .16 h));--button-fg-secondary-rest: light-dark(oklch(from var(--_src) .46 .17 h), oklch(from var(--_src) .86 .13 h));--button-fg-secondary-hover: light-dark(oklch(from var(--_src) .4 .17 h), oklch(from var(--_src) .86 .13 h));--button-fg-tertiary-rest: var(--button-fg-secondary-rest);--button-fg-tertiary-hover: var(--button-fg-secondary-hover);--button-bg-tertiary-hover: light-dark(oklch(from var(--_src) .54 .17 h / .1), oklch(from var(--_src) .58 .16 h / .215));--button-bg-tertiary-active: light-dark(oklch(from var(--_src) .54 .17 h / .15), oklch(from var(--_src) .58 .16 h / .29));--button-fg-quaternary-rest: light-dark(oklch(from var(--_src) .46 .17 h / .85), oklch(from var(--_src) .86 .13 h / .85));--button-fg-quaternary-hover: light-dark(oklch(from var(--_src) .38 .17 h), oklch(from var(--_src) .9 .13 h));--button-bg-secondary-rest: light-dark(oklch(from var(--_src) .54 .17 h / .1), oklch(from var(--_src) .58 .16 h / .215));--button-bg-secondary-hover: light-dark(oklch(from var(--_src) .54 .17 h / .15), oklch(from var(--_src) .58 .16 h / .29));--button-bg-secondary-active: light-dark(oklch(from var(--_src) .54 .17 h / .2), oklch(from var(--_src) .58 .16 h / .34))}a-button[tone=brand],a[role=button][data-anta][tone=brand],button[data-anta][tone=brand],input[data-anta]:is([type=reset],[type=submit])[tone=brand]{--_src: var(--anta-seed-brand)}a-button[tone=info],a[role=button][data-anta][tone=info],button[data-anta][tone=info],input[data-anta]:is([type=reset],[type=submit])[tone=info]{--_src: var(--anta-seed-info)}a-button[tone=success],a[role=button][data-anta][tone=success],button[data-anta][tone=success],input[data-anta]:is([type=reset],[type=submit])[tone=success]{--_src: var(--anta-seed-success)}a-button[tone=warning],a[role=button][data-anta][tone=warning],button[data-anta][tone=warning],input[data-anta]:is([type=reset],[type=submit])[tone=warning]{--_src: var(--anta-seed-warning)}a-button[tone=critical],a[role=button][data-anta][tone=critical],button[data-anta][tone=critical],input[data-anta]:is([type=reset],[type=submit])[tone=critical]{--_src: var(--anta-seed-critical)}a-button[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]),a[role=button][data-anta][tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]),button[data-anta][tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]),input[data-anta]:is([type=reset],[type=submit])[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--_src: var(--button-tone-source, transparent);@supports (color: attr(probe type(<color>),red)){--_src: var(--button-tone-source, attr(tone type(<color>), transparent))}}button[data-anta],input[data-anta]:is([type=reset],[type=submit]){box-sizing:border-box;margin:0;appearance:none;-webkit-appearance:none;border:none}a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]){user-select:none;display:inline-flex;align-items:center;gap:.5ch;cursor:pointer;&:has(>a-copy):not(:has(>a-icon)){cursor:copy}flex-shrink:0;color:var(--button-fg);background-color:var(--button-bg);border-radius:var(--_radius);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-stretch:normal;line-height:var(--_lh);letter-spacing:.025ch;text-overflow:ellipsis;text-wrap:nowrap;white-space:nowrap;max-width:100%;padding-inline:var(--button-padding-x);padding-block:var(--button-padding-y);min-height:28px;>a-button-label{display:inline-block;text-overflow:ellipsis;text-wrap:nowrap;white-space:nowrap;overflow:hidden;min-width:0;line-height:var(--_lh);padding-bottom:var(--_pb);&:has(>*){display:inline-flex;gap:.25ch}}>*{pointer-events:none}& a-icon{transition:color var(--button-timing-out)}transition:color var(--button-timing-out),background-color var(--button-timing-out);&:hover,&:focus-visible{transition:color var(--button-timing-in),background-color var(--button-timing-in);& a-icon{transition:color var(--button-timing-in)}}&:active,&[selected]{transition:color var(--button-timing-active),background-color var(--button-timing-active);& a-icon{transition:color var(--button-timing-active)}}&[disabled]{pointer-events:none;cursor:not-allowed;transition:none;& a-icon{transition:none}}&:focus-visible{outline:1px solid var(--focus-ring);outline-offset:1px}&[priority=quaternary]{--button-timing-in: 0s;--button-timing-active: 0s;--button-timing-out: 0s}&[size=small]{--button-padding-x: 7px;--_fs: 13px;--_lh: 16px;--_pb: .5px;min-height:24px;& a-icon{--icon-size: 14px}}&[size=large]{--button-padding-x: 13px;--_fs: 17px;--_lh: 24px;--_pb: 1.5px;min-height:32px;& a-icon{--icon-size: 18px}}&[priority=tertiary],&[priority=quaternary]{&[underline=solid]{text-decoration:underline solid}&[underline=dashed]{text-decoration:underline dashed}&[underline=dotted]{text-decoration:underline dotted}&[underline]{text-decoration-color:color-mix(in oklch,currentColor 75%,transparent);text-decoration-thickness:1px;text-underline-offset:3px;&[selected]{text-decoration-color:var(--button-fg);text-decoration-thickness:1px}@media(hover:hover)and (pointer:fine){&:hover{text-decoration-color:var(--button-fg);text-decoration-thickness:1px}}}&[underline][underline-on-hover]{text-decoration-color:transparent;&[selected]{text-decoration-color:transparent}@media(hover:hover)and (pointer:fine){&:hover{text-decoration-color:var(--button-fg)}}}}&[priority=quaternary][paddingless]{--button-padding-x: 0;--button-padding-y: 0;min-height:0}&:has(>a-icon):not(:has(>a-icon~a-icon)):not(:has(>:not(a-icon):not(a-tooltip):not(a-copy))){--button-padding-y: 5px;--button-padding-x: 5px;min-width:28px;justify-content:center;&[size=small]{--button-padding-y: 3px;--button-padding-x: 3px;min-width:24px}&[size=large]{--button-padding-y: 7px;--button-padding-x: 7px;min-width:32px}}&:is(:has(>a-icon:first-child),:has(>a-tooltip:first-child+a-icon)):is(:has(>a-icon~a-icon),:has(>:not(a-icon):not(a-tooltip):not(a-copy))){padding-inline-start:max(0px,var(--button-padding-x) - 2px)}&:is(:has(>a-icon:last-child),:has(>a-icon+a-tooltip:last-child)):is(:has(>a-icon~a-icon),:has(>:not(a-icon):not(a-tooltip):not(a-copy))){padding-inline-end:max(0px,var(--button-padding-x) - 2px)}&[loading]{position:relative;pointer-events:none;cursor:wait;&:before{content:"";position:absolute;top:0;bottom:0;left:calc(0px - var(--button-loading-x-period));width:calc(100% + var(--button-loading-x-period));pointer-events:none;clip-path:inset(0 0 0 var(--button-loading-x-period) round var(--_radius));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,clip-path;animation:btn-loading-slide var(--button-loading-duration) linear infinite;animation-delay:-9999s}}--button-fg: light-dark( oklch(from var(--button-fg-secondary-rest) calc(l - .05) c h), var(--button-fg-secondary-rest) );--button-bg: var(--button-bg-secondary-rest);@media(hover:hover)and (pointer:fine){&:hover{--button-fg: var(--button-fg-secondary-hover);--button-bg: var(--button-bg-secondary-hover)}}&:active{--button-fg: var(--button-fg-secondary-hover);--button-bg: var(--button-bg-secondary-active)}&[selected]{--button-fg: var(--button-fg-secondary-hover);--button-bg: var(--button-bg-secondary-hover)}&[priority=primary]{--button-fg: var(--button-fg-primary-rest);--button-bg: var(--button-bg-primary-rest);box-shadow:none;@media(hover:hover)and (pointer:fine){&:hover{--button-bg: var(--button-bg-primary-hover)}}&:active{--button-bg: var(--button-bg-primary-active)}&[selected]{--button-bg: var(--button-bg-primary-hover)}}&[priority=tertiary]{--button-fg: var(--button-fg-tertiary-rest);--button-bg: transparent;box-shadow:none;@media(hover:hover)and (pointer:fine){&:hover{--button-fg: var(--button-fg-tertiary-hover);--button-bg: var(--button-bg-tertiary-hover)}}&:active{--button-fg: var(--button-fg-tertiary-hover);--button-bg: var(--button-bg-tertiary-active)}&[selected]{--button-fg: var(--button-fg-tertiary-hover);--button-bg: var(--button-bg-tertiary-hover)}}&[priority=quaternary]{--button-fg: var(--button-fg-quaternary-rest);--button-bg: transparent;box-shadow:none;font-weight:400;@media(hover:hover)and (pointer:fine){&:hover{--button-fg: var(--button-fg-quaternary-hover)}}&:active{--button-fg: var(--button-fg-quaternary-rest)}&[selected]{--button-fg: var(--button-fg-quaternary-hover)}}&[selected]{box-shadow:inset 0 0 0 .5px currentColor}&[disabled]{background-color:var(--bg-secondary-disabled);color:var(--fg-disabled);&[priority=primary]{background-color:var(--bg-primary-disabled);color:var(--fg-disabled-primary)}&[priority=tertiary],&[priority=quaternary]{background-color:transparent;color:var(--fg-disabled)}}}@media(forced-colors:active){:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit])){--anta-forced-foreground: ButtonText;color:ButtonText;background-color:ButtonFace;border:1px solid ButtonText;box-shadow:none}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[priority=primary]{--anta-forced-foreground: ButtonFace;color:ButtonFace;background-color:ButtonText;border-color:ButtonText}a-button:is([priority=primary],[selected]){forced-color-adjust:none}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[priority=tertiary]{--anta-forced-foreground: CanvasText;color:CanvasText;background-color:Canvas;border:0}@media(hover:hover)and (pointer:fine){:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[priority=tertiary]:hover:not(:focus-visible){outline:1px solid ButtonText;outline-offset:0}}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[priority=quaternary]{--anta-forced-foreground: LinkText;color:LinkText;background-color:ButtonFace;border:0;text-decoration:none}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[selected]{--anta-forced-foreground: HighlightText;color:HighlightText;background-color:Highlight;border-color:Highlight}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[disabled]{--anta-forced-foreground: GrayText;color:GrayText;background-color:Canvas;border-color:GrayText;text-decoration-color:GrayText}}}@keyframes btn-loading-slide{to{transform:translate(var(--button-loading-x-period));clip-path:inset(0 var(--button-loading-x-period) 0 0 round var(--_radius))}}
+@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]){--button-primary-fg: #ffffff;--bg-primary-disabled: light-dark(#ece9ec, #272329);--bg-secondary-disabled: light-dark(#f6f4f6, #1d1a1e);--fg-disabled-primary: light-dark(#afa9b1, #776e77);--fg-disabled: light-dark(#afa9b1, #635b65);--button-loading-stripe: 14px;--button-loading-stripe-gap: 16px;--button-loading-period: calc( var(--button-loading-stripe) + var(--button-loading-stripe-gap) );--button-loading-angle: 125deg;--button-loading-x-period: calc( var(--button-loading-period) / cos(var(--button-loading-angle) - 90deg) );--button-loading-opacity: .15;--button-loading-blur: 5px;--_src: var(--anta-seed-neutral);--button-bg-primary-rest: light-dark(oklch(from var(--_src) .5 .02 h), oklch(from var(--_src) .4 .015 h));--button-bg-primary-hover: light-dark(oklch(from var(--_src) .45 .02 h), oklch(from var(--_src) .44 .015 h));--button-bg-primary-active: light-dark(oklch(from var(--_src) .4 .02 h), oklch(from var(--_src) .48 .015 h));--button-fg-primary-rest: var(--button-primary-fg);--button-fg-secondary-rest: light-dark(oklch(from var(--_src) .46 .008 h), oklch(from var(--_src) .86 .015 h));--button-fg-secondary-hover: light-dark(oklch(from var(--_src) .4 .008 h), oklch(from var(--_src) .86 .015 h));--button-fg-tertiary-rest: var(--button-fg-secondary-rest);--button-fg-tertiary-hover: var(--button-fg-secondary-hover);--button-bg-tertiary-hover: light-dark(oklch(from var(--_src) .54 .03 h / .1), oklch(from var(--_src) .44 .01 h / .24));--button-bg-tertiary-active: light-dark(oklch(from var(--_src) .54 .03 h / .15), oklch(from var(--_src) .44 .01 h / .34));--button-fg-quaternary-rest: light-dark(oklch(from var(--_src) .46 .008 h / .85), oklch(from var(--_src) .86 .015 h / .85));--button-fg-quaternary-hover: light-dark(oklch(from var(--_src) .38 .008 h), oklch(from var(--_src) .9 .015 h));--button-bg-secondary-rest: light-dark(oklch(from var(--_src) .54 .03 h / .1), oklch(from var(--_src) .44 .01 h / .24));--button-bg-secondary-hover: light-dark(oklch(from var(--_src) .54 .03 h / .15), oklch(from var(--_src) .44 .01 h / .34));--button-bg-secondary-active: light-dark(oklch(from var(--_src) .54 .03 h / .2), oklch(from var(--_src) .44 .01 h / .44));--_fs: 15px;--_lh: 20px;--_pb: 1px;--_radius: 4px;--_padding-x-text: round( calc(.8em - 2px) , 1px);--button-padding-x: var(--_padding-x-text);--button-padding-y: calc((8px - var(--_pb)) / 2);--button-timing-in: 75ms ease-in;--button-timing-active: 50ms linear;--button-timing-out: .15s ease-out;--button-loading-duration: .5s}a-button[round],a[role=button][data-anta][round],button[data-anta][round],input[data-anta]:is([type=reset],[type=submit])[round]{--button-round: 999px;--_radius: var(--button-round, 999px);@supports (border-radius: attr(probe type(<length>),1px)){--button-round: attr(round type(<length>), 999px)}}a-button[tone]:not([tone=""],[tone=neutral]),a[role=button][data-anta][tone]:not([tone=""],[tone=neutral]),button[data-anta][tone]:not([tone=""],[tone=neutral]),input[data-anta]:is([type=reset],[type=submit])[tone]:not([tone=""],[tone=neutral]){--button-bg-primary-rest: light-dark(oklch(from var(--_src) .51 .17 h), oklch(from var(--_src) .4 .16 h));--button-bg-primary-hover: light-dark(oklch(from var(--_src) .46 .17 h), oklch(from var(--_src) .44 .16 h));--button-bg-primary-active: light-dark(oklch(from var(--_src) .41 .17 h), oklch(from var(--_src) .48 .16 h));--button-fg-secondary-rest: light-dark(oklch(from var(--_src) .46 .17 h), oklch(from var(--_src) .86 .13 h));--button-fg-secondary-hover: light-dark(oklch(from var(--_src) .4 .17 h), oklch(from var(--_src) .86 .13 h));--button-fg-tertiary-rest: var(--button-fg-secondary-rest);--button-fg-tertiary-hover: var(--button-fg-secondary-hover);--button-bg-tertiary-hover: light-dark(oklch(from var(--_src) .54 .17 h / .1), oklch(from var(--_src) .58 .16 h / .215));--button-bg-tertiary-active: light-dark(oklch(from var(--_src) .54 .17 h / .15), oklch(from var(--_src) .58 .16 h / .29));--button-fg-quaternary-rest: light-dark(oklch(from var(--_src) .46 .17 h / .85), oklch(from var(--_src) .86 .13 h / .85));--button-fg-quaternary-hover: light-dark(oklch(from var(--_src) .38 .17 h), oklch(from var(--_src) .9 .13 h));--button-bg-secondary-rest: light-dark(oklch(from var(--_src) .54 .17 h / .1), oklch(from var(--_src) .58 .16 h / .215));--button-bg-secondary-hover: light-dark(oklch(from var(--_src) .54 .17 h / .15), oklch(from var(--_src) .58 .16 h / .29));--button-bg-secondary-active: light-dark(oklch(from var(--_src) .54 .17 h / .2), oklch(from var(--_src) .58 .16 h / .34))}a-button[tone=brand],a[role=button][data-anta][tone=brand],button[data-anta][tone=brand],input[data-anta]:is([type=reset],[type=submit])[tone=brand]{--_src: var(--anta-seed-brand)}a-button[tone=info],a[role=button][data-anta][tone=info],button[data-anta][tone=info],input[data-anta]:is([type=reset],[type=submit])[tone=info]{--_src: var(--anta-seed-info)}a-button[tone=success],a[role=button][data-anta][tone=success],button[data-anta][tone=success],input[data-anta]:is([type=reset],[type=submit])[tone=success]{--_src: var(--anta-seed-success)}a-button[tone=warning],a[role=button][data-anta][tone=warning],button[data-anta][tone=warning],input[data-anta]:is([type=reset],[type=submit])[tone=warning]{--_src: var(--anta-seed-warning)}a-button[tone=critical],a[role=button][data-anta][tone=critical],button[data-anta][tone=critical],input[data-anta]:is([type=reset],[type=submit])[tone=critical]{--_src: var(--anta-seed-critical)}a-button[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]),a[role=button][data-anta][tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]),button[data-anta][tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]),input[data-anta]:is([type=reset],[type=submit])[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--_src: var(--button-tone-source, transparent);@supports (color: attr(probe type(<color>),red)){--_src: var(--button-tone-source, attr(tone type(<color>), transparent))}}button[data-anta],input[data-anta]:is([type=reset],[type=submit]){box-sizing:border-box;margin:0;appearance:none;-webkit-appearance:none;border:none}a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]){user-select:none;display:inline-flex;align-items:center;gap:.5ch;cursor:pointer;&:has(>a-copy):not(:has(>a-icon)){cursor:copy}flex-shrink:0;color:var(--button-fg);background-color:var(--button-bg);border-radius:var(--_radius);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-stretch:normal;line-height:var(--_lh);letter-spacing:.025ch;text-overflow:ellipsis;text-wrap:nowrap;white-space:nowrap;max-width:100%;padding-inline:var(--button-padding-x);padding-block:var(--button-padding-y);min-height:28px;>a-button-label{display:inline-block;text-overflow:ellipsis;text-wrap:nowrap;white-space:nowrap;overflow:hidden;min-width:0;line-height:var(--_lh);padding-bottom:var(--_pb);&:has(>*){display:inline-flex;gap:.25ch}}>*{pointer-events:none}& a-icon{transition:color var(--button-timing-out)}transition:color var(--button-timing-out),background-color var(--button-timing-out);&:hover,&:focus-visible{transition:color var(--button-timing-in),background-color var(--button-timing-in);& a-icon{transition:color var(--button-timing-in)}}&:active,&[selected]{transition:color var(--button-timing-active),background-color var(--button-timing-active);& a-icon{transition:color var(--button-timing-active)}}&[disabled]{pointer-events:none;cursor:not-allowed;transition:none;& a-icon{transition:none}}&:focus-visible{outline:1px solid var(--focus-ring);outline-offset:1px}&[priority=quaternary]{--button-timing-in: 0s;--button-timing-active: 0s;--button-timing-out: 0s}&[size=small]{--_fs: 13px;--_lh: 16px;--_pb: .5px;min-height:24px;& a-icon{--icon-size: 14px}}&[size=large]{--_fs: 17px;--_lh: 24px;--_pb: 1.5px;min-height:32px;& a-icon{--icon-size: 18px}}&[priority=tertiary],&[priority=quaternary]{&[underline=solid]{text-decoration:underline solid}&[underline=dashed]{text-decoration:underline dashed}&[underline=dotted]{text-decoration:underline dotted}&[underline]{text-decoration-color:color-mix(in oklch,currentColor 75%,transparent);text-decoration-thickness:1px;text-underline-offset:3px;&[selected]{text-decoration-color:var(--button-fg);text-decoration-thickness:1px}@media(hover:hover)and (pointer:fine){&:hover{text-decoration-color:var(--button-fg);text-decoration-thickness:1px}}}&[underline][underline-on-hover]{text-decoration-color:transparent;&[selected]{text-decoration-color:transparent}@media(hover:hover)and (pointer:fine){&:hover{text-decoration-color:var(--button-fg)}}}}&[priority=quaternary][paddingless]{--button-padding-x: 0;--button-padding-y: 0;border-radius:min(var(--_radius),3px);min-height:0;&[loading]:before{clip-path:inset(0 0 0 var(--button-loading-x-period) round min(var(--_radius),3px));animation-name:btn-loading-slide-paddingless}}&:has(>a-icon):not(:has(>a-icon~a-icon)):not(:has(>:not(a-icon):not(a-tooltip):not(a-copy))){--button-padding-y: calc(.5em - 1.5px) ;--button-padding-x: var(--button-padding-y);min-height:0;justify-content:center}&:is(:has(>a-icon:first-child),:has(>a-tooltip:first-child+a-icon)):is(:has(>a-icon~a-icon),:has(>:not(a-icon):not(a-tooltip):not(a-copy))){padding-inline-start:max(0px,var(--button-padding-x) - 2px)}&:is(:has(>a-icon:last-child),:has(>a-icon+a-tooltip:last-child)):is(:has(>a-icon~a-icon),:has(>:not(a-icon):not(a-tooltip):not(a-copy))){padding-inline-end:max(0px,var(--button-padding-x) - 2px)}&[loading]{position:relative;pointer-events:none;cursor:wait;&:before{content:"";position:absolute;top:0;bottom:0;left:calc(0px - var(--button-loading-x-period));width:calc(100% + var(--button-loading-x-period));pointer-events:none;clip-path:inset(0 0 0 var(--button-loading-x-period) round var(--_radius));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,clip-path;animation:btn-loading-slide var(--button-loading-duration) linear infinite;animation-delay:-9999s}}--button-fg: light-dark( oklch(from var(--button-fg-secondary-rest) calc(l - .05) c h), var(--button-fg-secondary-rest) );--button-bg: var(--button-bg-secondary-rest);@media(hover:hover)and (pointer:fine){&:hover{--button-fg: var(--button-fg-secondary-hover);--button-bg: var(--button-bg-secondary-hover)}}&:active{--button-fg: var(--button-fg-secondary-hover);--button-bg: var(--button-bg-secondary-active)}&[selected]{--button-fg: var(--button-fg-secondary-hover);--button-bg: var(--button-bg-secondary-hover)}&[priority=primary]{--button-fg: var(--button-fg-primary-rest);--button-bg: var(--button-bg-primary-rest);box-shadow:none;@media(hover:hover)and (pointer:fine){&:hover{--button-bg: var(--button-bg-primary-hover)}}&:active{--button-bg: var(--button-bg-primary-active)}&[selected]{--button-bg: var(--button-bg-primary-hover)}}&[priority=tertiary]{--button-fg: var(--button-fg-tertiary-rest);--button-bg: transparent;box-shadow:none;@media(hover:hover)and (pointer:fine){&:hover{--button-fg: var(--button-fg-tertiary-hover);--button-bg: var(--button-bg-tertiary-hover)}}&:active{--button-fg: var(--button-fg-tertiary-hover);--button-bg: var(--button-bg-tertiary-active)}&[selected]{--button-fg: var(--button-fg-tertiary-hover);--button-bg: var(--button-bg-tertiary-hover)}}&[priority=quaternary]{--button-fg: var(--button-fg-quaternary-rest);--button-bg: transparent;box-shadow:none;font-weight:400;@media(hover:hover)and (pointer:fine){&:hover{--button-fg: var(--button-fg-quaternary-hover)}}&:active{--button-fg: var(--button-fg-quaternary-rest)}&[selected]{--button-fg: var(--button-fg-quaternary-hover)}}&[selected]{box-shadow:inset 0 0 0 1px color-mix(in oklch,currentColor 50%,transparent);&[priority=quaternary][paddingless]{box-shadow:0 0 0 1px color-mix(in oklch,currentColor 50%,transparent)}}&[disabled]{background-color:var(--bg-secondary-disabled);color:var(--fg-disabled);&[priority=primary]{background-color:var(--bg-primary-disabled);color:var(--fg-disabled-primary)}&[priority=tertiary],&[priority=quaternary]{background-color:transparent;color:var(--fg-disabled)}}}@media(forced-colors:active){:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit])){--anta-forced-foreground: ButtonText;color:ButtonText;background-color:ButtonFace;border:1px solid ButtonText;box-shadow:none}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[priority=primary]{--anta-forced-foreground: ButtonFace;color:ButtonFace;background-color:ButtonText;border-color:ButtonText}a-button:is([priority=primary],[selected]){forced-color-adjust:none}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[priority=tertiary]{--anta-forced-foreground: CanvasText;color:CanvasText;background-color:Canvas;border:0}@media(hover:hover)and (pointer:fine){:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[priority=tertiary]:hover:not(:focus-visible){outline:1px solid ButtonText;outline-offset:0}}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[priority=quaternary]{--anta-forced-foreground: LinkText;color:LinkText;background-color:ButtonFace;border:0;text-decoration:none}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[selected]{--anta-forced-foreground: HighlightText;color:HighlightText;background-color:Highlight;border-color:Highlight}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[disabled]{--anta-forced-foreground: GrayText;color:GrayText;background-color:Canvas;border-color:GrayText;text-decoration-color:GrayText}}}@keyframes btn-loading-slide{to{transform:translate(var(--button-loading-x-period));clip-path:inset(0 var(--button-loading-x-period) 0 0 round var(--_radius))}}@keyframes btn-loading-slide-paddingless{to{transform:translate(var(--button-loading-x-period));clip-path:inset(0 var(--button-loading-x-period) 0 0 round min(var(--_radius),3px))}}

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

@@ -22,8 +22,9 @@ declare global {
  *   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.
+ *   inset ring at 50% `currentColor`, declared after the priority blocks so it
+ *   survives their `box-shadow: none` cancels. Paddingless uses an outside ring
+ *   so the selection mark stays clear of the label.
  * - **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.
@@ -43,10 +44,11 @@ declare global {
  * - **Layout gotchas:** `flex-shrink: 0` (shrinking + `overflow: hidden`
  *   would clip the label silently); 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.
+ * - **Icon-only** is purely structural: one direct icon, with optional
+ *   tooltip or copy helpers, gets equal font-relative padding on both axes
+ *   and no size floor. The default icons produce 24/28/32px square boxes.
+ *   A non-only edge icon trims 2px off its side's padding; `max(0px, …)`
+ *   keeps 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>`.

package/dist/elements/a-dialog.js

@@ -239,7 +239,9 @@ class ADialogElement extends HTMLElementBase {
       if (this.#controlled) this.#reflect(parseOpenState(this.getAttribute("state")));
       else this.#wantOpen = false;
     });
-    this.addEventListener(CLOSE_TRIGGER, () => this.requestClose());
+    this.addEventListener(CLOSE_TRIGGER, (event) => {
+      if (event.target.closest("a-dialog") === this) this.requestClose();
+    });
   }
   connectedCallback() {
     if (this.#controlled) {

package/dist/elements/a-input-date.d.ts

@@ -0,0 +1 @@
+import '../components/InputDate.css';

package/dist/elements/a-input-date.js

@@ -0,0 +1 @@
+import "../components/InputDate.css";

package/dist/elements/a-input.js

@@ -87,8 +87,8 @@ const SHADOW_STYLE = `
   :host([readonly]:state(kb-focus)) .field {
     --_bw: 1px;
     --_bc: var(--input-border);
-    outline: 1px solid var(--focus-ring);
-    outline-offset: 1px;
+    outline: var(--_input-focus-width, 1px) solid var(--focus-ring);
+    outline-offset: var(--_input-focus-offset, 1px);
   }
   @media (forced-colors: active) { .field { border: 1px solid ButtonBorder; } }
 

package/dist/elements/a-select-faceted.d.ts

@@ -0,0 +1 @@
+import '../components/select-parts.css';

package/dist/elements/a-select-faceted.js

@@ -0,0 +1 @@
+import "../components/select-parts.css";

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

@@ -0,0 +1 @@
+import '../components/select-parts.css';

package/dist/elements/a-select.js

@@ -0,0 +1 @@
+import "../components/select-parts.css";

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

@@ -0,0 +1 @@
+import '../components/Steps.css';

package/dist/elements/a-steps.js

@@ -0,0 +1 @@
+import "../components/Steps.css";

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

@@ -9,8 +9,8 @@ export declare class ATabPanelElement extends HTMLElementBase {
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(): void;
-    /** Locate the sibling <a-tabs> (the strip and panels are flat siblings under one
-     *  parent — `Tabs` renders no wrapper) and subscribe to its `change`. */
+    /** Locate the nearest preceding <a-tabs> outside nested Tabs groups and subscribe
+     *  to its `change`. */
     private bindTabs;
     private sync;
 }

package/dist/elements/a-tabpanel.js

@@ -28,10 +28,20 @@ class ATabPanelElement extends HTMLElementBase {
   attributeChangedCallback() {
     this.sync();
   }
-  /** Locate the sibling <a-tabs> (the strip and panels are flat siblings under one
-   *  parent — `Tabs` renders no wrapper) and subscribe to its `change`. */
+  /** Locate the nearest preceding <a-tabs> outside nested Tabs groups and subscribe
+   *  to its `change`. */
   bindTabs() {
-    const tabs = this.parentElement?.querySelector(":scope > a-tabs") ?? null;
+    let sibling = this.previousElementSibling;
+    let nested = 0;
+    while (sibling) {
+      if (sibling.localName === "template" && sibling.hasAttribute("data-anta-tabs-end")) nested++;
+      else if (sibling.localName === "a-tabs") {
+        if (nested === 0) break;
+        nested--;
+      }
+      sibling = sibling.previousElementSibling;
+    }
+    const tabs = sibling;
     if (tabs === this.tabs) return;
     this.tabs?.removeEventListener("change", this.onTabsChange);
     this.tabs = tabs;

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

@@ -0,0 +1 @@
+import './a-tag.css';

package/dist/elements/a-tag.js

@@ -0,0 +1 @@
+import "./a-tag.css";

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

@@ -0,0 +1 @@
+import './a-title.css';

package/dist/elements/a-title.js

@@ -0,0 +1 @@
+import "./a-title.css";

package/dist/elements/index.d.ts

@@ -1,7 +1,7 @@
 /**
  * Barrel: registers ALL Anta custom elements (the convenience path).
  *
- * Each `a-{name}` module self-registers and imports its own CSS when loaded,
+ * Each element with browser behavior self-registers and imports its own CSS when loaded,
  * so re-exporting them here (which evaluates each module) registers the whole
  * set + injects every element's CSS. Importing this barrel for side effects —
  * `import '@antadesign/anta/elements'` — gives you everything.
@@ -9,6 +9,8 @@
  * To reduce bundle size, import only the element(s) you use:
  *   import '@antadesign/anta/elements/a-tooltip'   // registers a-tooltip + its CSS, nothing else
  * That granular path pulls in only that element's code and CSS, nothing else.
+ * Entries for structural tags and composed layouts import only CSS and do not
+ * register custom elements. Load their nested browser elements separately.
  *
  * Must only be imported client-side — registration is guarded against missing
  * `customElements` (SSR), but there's no reason to load it server-side.
@@ -47,3 +49,7 @@ export { AToasterElement, register_a_toaster } from './a-toaster';
 export { AToastElement, register_a_toast } from './a-toast';
 import './a-title.css';
 import './a-tag.css';
+import '../components/Breadcrumbs.css';
+import '../components/InputDate.css';
+import '../components/select-parts.css';
+import '../components/Steps.css';

package/dist/elements/index.js

@@ -32,6 +32,10 @@ import { AToasterElement, register_a_toaster } from "./a-toaster";
 import { AToastElement, register_a_toast } from "./a-toast";
 import "./a-title.css";
 import "./a-tag.css";
+import "../components/Breadcrumbs.css";
+import "../components/InputDate.css";
+import "../components/select-parts.css";
+import "../components/Steps.css";
 export {
   AAvatarElement,
   ABannerElement,

package/dist/theme-antithesis.css

@@ -1 +1 @@
-@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@font-face{font-family:TT Interphases Pro Variable;src:url(https://assets.anta.design/fonts/TT_Interphases_Pro_Variable.woff2) format("woff2");font-style:normal;font-weight:100 900;font-stretch:75% 100%;font-feature-settings:"ss02","ss05","tnum";font-variation-settings:"slnt" 0;font-display:swap}@font-face{font-family:TT Interphases Pro Variable;src:url(https://assets.anta.design/fonts/TT_Interphases_Pro_Variable.woff2) format("woff2");font-style:italic;font-weight:100 900;font-stretch:75% 100%;font-feature-settings:"ss02","ss05","tnum";font-variation-settings:"slnt" 11;font-display:swap}@font-face{font-family:Stringer;src:url(https://assets.anta.design/fonts/Stringer-Regular-Web.woff2) format("woff2");font-style:normal;font-weight:400;font-display:swap}@font-face{font-family:Antithesis Mono;src:url(https://assets.anta.design/fonts/Antithesis_mono_VF_Upright.woff2) format("woff2");font-style:normal;font-weight:400 700;font-display:swap}@font-face{font-family:Antithesis Mono;src:url(https://assets.anta.design/fonts/Antithesis_mono_VF_Italic.woff2) format("woff2");font-style:italic;font-weight:400 700;font-display:swap}:root,.light{--sans-serif: "TT Interphases Pro Variable", sans-serif;--serif: "Stringer", serif;--monospace: "Antithesis Mono", ui-monospace, monospace;font-variation-settings:"slnt" 0}:root,.light{--anta-seed-brand: #cc4636;--anta-seed-neutral: #65605b}@layer anta.theme{:is(address,cite,em,i,var,dt){font-variation-settings:"slnt" 11;font-synthesis:none}dfn{font-variation-settings:"slnt" 0}a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]),a-tab{font-stretch:88%}a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]){letter-spacing:.05ch}a-input{--_input-adornment-font-stretch: 88%}a-tag{font-feature-settings:"tnum" 1,"ss05" 1,"lnum","ss01","ss04","case","calt";letter-spacing:.02ch}a-tag[allcaps]{font-feature-settings:"tnum" 1,"ss05" 1,"ss01","case","calt";letter-spacing:.08ch}:is(h1,h2,h3,a-title[level="1"],a-title[level="2"],a-title[level="3"]){font-family:var(--serif)}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit])):not([round]){--_radius: 999px}a-input:not([round])::part(field),a-input:not([round]):not(:defined):after{border-radius:0}:is(input[data-anta]:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=button],[type=reset],[type=submit],[type=image],[type=hidden]),textarea[data-anta],select[data-anta]):not([round]){--native-field-round: 0px}a-tag{border-radius:1px}}
+@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;:root,.light{--anta-seed-brand: #cc4636;--anta-seed-neutral: #65605b;--anta-seed-critical: #c92c46}:root,.light{--bg-1: #ffffff;--bg-2: #fdfaf8;--bg-3: #faf7f5;--bg-4: #f3f0ee;--bg-5: #eeeae7;--bg-2-brand: #fff6f5;--bg-3-brand: #fff2f0;--bg-4-brand: #ffedeb;--bg-5-brand: #ffe5e0;--bg-2-success: #f7fcf9;--bg-3-success: #ecf9f0;--bg-4-success: #e2f5e8;--bg-5-success: #d9f2e0;--bg-2-critical: #fefbfb;--bg-3-critical: #fdf2f4;--bg-4-critical: #fcebee;--bg-5-critical: #fae5e9;--bg-2-warning: #fefbf6;--bg-3-warning: #fcf4e8;--bg-4-warning: #fbeeda;--bg-5-warning: #f9e7cd;--bg-2-info: #fbfcfe;--bg-3-info: #f2f7fd;--bg-4-info: #e9f3fb;--bg-5-info: #e1eefa;--text-1: #080707;--text-2: #312d2b;--text-3: #665f5b;--text-4: #89817c;--text-5: #a39994;--text-1-brand: #701600;--text-2-brand: #912a0d;--text-3-brand: #912a0dcc;--text-4-brand: #912a0d99;--text-5-brand: #912a0d66;--text-1-success: #004415;--text-2-success: #1f5c31;--text-3-success: #1f5c31cc;--text-4-success: #1f5c3199;--text-5-success: #1f5c3166;--text-1-critical: #8d0017;--text-2-critical: #a01c32;--text-3-critical: #a01c32cc;--text-4-critical: #a01c3299;--text-5-critical: #a01c3266;--text-1-warning: #7f410b;--text-2-warning: #995200;--text-3-warning: #995200cc;--text-4-warning: #99520099;--text-5-warning: #99520066;--text-1-info: #00396b;--text-2-info: #175082;--text-3-info: #175082cc;--text-4-info: #175082b2;--text-5-info: #17508280;--border-1: #99908b;--border-2: #c2b8b2;--border-3: #d8cfca;--border-4: #e4ddd8;--border-5: #eeeae7;--border-1-brand: #ee6d53;--border-2-brand: #fea192;--border-3-brand: #ffc1b8;--border-4-brand: #ffd3cc;--border-5-brand: #ffe5e0;--border-1-success: #44c169;--border-2-success: #88d7a0;--border-3-success: #b3e5c2;--border-4-success: #c6ecd1;--border-5-success: #d9f2e0;--border-1-critical: #e56c80;--border-2-critical: #efa4b0;--border-3-critical: #f4c2cb;--border-4-critical: #f7d4da;--border-5-critical: #fae5e9;--border-1-warning: #d88118;--border-2-warning: #edb25a;--border-3-warning: #f3cc91;--border-4-warning: #f6dbb1;--border-5-warning: #f9e7cd;--border-1-info: #56a1e1;--border-2-info: #93c5ec;--border-3-info: #bad6f3;--border-4-info: #cfe3f7;--border-5-info: #e1eefa}.dark{--bg-1: #0b0409;--bg-2: #170812;--bg-3: #1e0b18;--bg-4: #250e1e;--bg-5: #2c1124;--bg-2-brand: #160803;--bg-3-brand: #1f0c04;--bg-4-brand: #290e05;--bg-5-brand: #321106;--bg-2-success: #041008;--bg-3-success: #05140a;--bg-4-success: #061b0e;--bg-5-success: #081f0f;--bg-2-critical: #190408;--bg-3-critical: #1f0509;--bg-4-critical: #2c070d;--bg-5-critical: #330910;--bg-2-warning: #120a03;--bg-3-warning: #160d04;--bg-4-warning: #201305;--bg-5-warning: #241506;--bg-2-info: #040d18;--bg-3-info: #04111f;--bg-4-info: #051727;--bg-5-info: #071b2c;--text-1: #eeeae7;--text-2: #c0b7bd;--text-3: #a398a0;--text-4: #7c6e78;--text-5: #6b5b66;--text-1-brand: #ffb3a7;--text-2-brand: #f88d7d;--text-3-brand: #f88d7dcc;--text-4-brand: #f88d7d99;--text-5-brand: #f88d7d66;--text-1-success: #9ddeb1;--text-2-success: #74cd8e;--text-3-success: #74cd8ecc;--text-4-success: #74cd8e99;--text-5-success: #74cd8e66;--text-1-critical: #ffabb9;--text-2-critical: #e78e9d;--text-3-critical: #e78e9dcc;--text-4-critical: #e78e9d99;--text-5-critical: #e78e9d66;--text-1-warning: #f0bf75;--text-2-warning: #e1a452;--text-3-warning: #e1a452cc;--text-4-warning: #e1a45299;--text-5-warning: #e1a45266;--text-1-info: #99d0ff;--text-2-info: #7db6e8;--text-3-info: #7db6e8cc;--text-4-info: #7db6e899;--text-5-info: #7db6e866;--border-1: #725769;--border-2: #533c4b;--border-3: #442e3d;--border-4: #2a1824;--border-5: #250e1e;--border-1-brand: #d03711;--border-2-brand: #912a0d;--border-3-brand: #6d240d;--border-4-brand: #3e1609;--border-5-brand: #321106;--border-1-success: #2a7e43;--border-2-success: #1f5c31;--border-3-success: #174525;--border-4-success: #0d2b16;--border-5-success: #081f0f;--border-1-critical: #c92c46;--border-2-critical: #a01c32;--border-3-critical: #761928;--border-4-critical: #471019;--border-5-critical: #330910;--border-1-warning: #995200;--border-2-warning: #6a3b0c;--border-3-warning: #4f2d0d;--border-4-warning: #311d0a;--border-5-warning: #241506;--border-1-info: #1f6eb2;--border-2-info: #175082;--border-3-info: #133e62;--border-4-info: #0d273e;--border-5-info: #071b2c}:root,.light{--fill-1: #665f5b;--fill-1-hover: #56504d;--fill-1-active: #494441;--fill-1-brand: #d03711;--fill-1-brand-hover: #af2e0e;--fill-1-brand-active: #912a0d;--fill-1-info: #1f6eb2;--fill-1-info-hover: #1a5b93;--fill-1-info-active: #175082;--fill-1-success: #2a7e43;--fill-1-success-hover: #226737;--fill-1-success-active: #1f5c31;--fill-1-warning: #c37416;--fill-1-warning-hover: #ae6613;--fill-1-warning-active: #995200;--fill-1-critical: #c92c46;--fill-1-critical-hover: #b02038;--fill-1-critical-active: #a01c32;--fill-2: color-mix(in oklch, #8b6b59 10%, transparent);--fill-2-hover: color-mix(in oklch, #8b6b59 15%, transparent);--fill-2-active: color-mix(in oklch, #8b6b59 20%, transparent);--fill-2-brand: color-mix(in oklch, #e94520 10%, transparent);--fill-2-brand-hover: color-mix(in oklch, #e94520 15%, transparent);--fill-2-brand-active: color-mix(in oklch, #e94520 20%, transparent);--fill-2-info: color-mix(in oklch, #2686d9 10%, transparent);--fill-2-info-hover: color-mix(in oklch, #2686d9 15%, transparent);--fill-2-info-active: color-mix(in oklch, #2686d9 20%, transparent);--fill-2-success: color-mix(in oklch, #329550 10%, transparent);--fill-2-success-hover: color-mix(in oklch, #329550 15%, transparent);--fill-2-success-active: color-mix(in oklch, #329550 20%, transparent);--fill-2-warning: color-mix(in oklch, #ae6613 10%, transparent);--fill-2-warning-hover: color-mix(in oklch, #ae6613 15%, transparent);--fill-2-warning-active: color-mix(in oklch, #ae6613 20%, transparent);--fill-2-critical: color-mix(in oklch, #de455e 10%, transparent);--fill-2-critical-hover: color-mix(in oklch, #de455e 15%, transparent);--fill-2-critical-active: color-mix(in oklch, #de455e 20%, transparent);--fill-3: color-mix(in oklch, #8b6b59 5%, transparent);--fill-3-hover: color-mix(in oklch, #8b6b59 10%, transparent);--fill-3-active: color-mix(in oklch, #8b6b59 15%, transparent);--fill-3-brand: color-mix(in oklch, #e94520 5%, transparent);--fill-3-brand-hover: color-mix(in oklch, #e94520 10%, transparent);--fill-3-brand-active: color-mix(in oklch, #e94520 15%, transparent);--fill-3-info: color-mix(in oklch, #2686d9 5%, transparent);--fill-3-info-hover: color-mix(in oklch, #2686d9 10%, transparent);--fill-3-info-active: color-mix(in oklch, #2686d9 15%, transparent);--fill-3-success: color-mix(in oklch, #329550 5%, transparent);--fill-3-success-hover: color-mix(in oklch, #329550 10%, transparent);--fill-3-success-active: color-mix(in oklch, #329550 15%, transparent);--fill-3-warning: color-mix(in oklch, #ae6613 5%, transparent);--fill-3-warning-hover: color-mix(in oklch, #ae6613 10%, transparent);--fill-3-warning-active: color-mix(in oklch, #ae6613 15%, transparent);--fill-3-critical: color-mix(in oklch, #de455e 5%, transparent);--fill-3-critical-hover: color-mix(in oklch, #de455e 10%, transparent);--fill-3-critical-active: color-mix(in oklch, #de455e 15%, transparent);--fill-1-disabled: color-mix(in oklch, #79716d 50%, transparent);--fill-disabled: color-mix(in oklch, #79716d 10%, transparent);--stroke-1: #d8cfca;--stroke-1-hover: #c2b8b2;--stroke-1-active: #a39994;--stroke-1-brand: #fea192;--stroke-1-brand-hover: #f07866;--stroke-1-brand-active: #ee6d53;--stroke-1-info: #93c5ec;--stroke-1-info-hover: #69ace5;--stroke-1-info-active: #56a1e1;--stroke-1-success: #88d7a0;--stroke-1-success-hover: #5bc87b;--stroke-1-success-active: #44c169;--stroke-1-warning: #edb25a;--stroke-1-warning-hover: #e09127;--stroke-1-warning-active: #d88118;--stroke-1-critical: #efa4b0;--stroke-1-critical-hover: #e87f91;--stroke-1-critical-active: #e56c80;--stroke-2: color-mix(in oklch, #79716d 15%, transparent);--stroke-2-brand: color-mix(in oklch, #e94520 15%, transparent);--stroke-2-info: color-mix(in oklch, #2686d9 15%, transparent);--stroke-2-success: color-mix(in oklch, #329550 15%, transparent);--stroke-2-warning: color-mix(in oklch, #ae6613 15%, transparent);--stroke-2-critical: color-mix(in oklch, #de455e 15%, transparent);--stroke-disabled: color-mix(in oklch, #79716d 10%, transparent);--label-1: #56504d;--label-1-hover: #494441;--label-1-brand: #d03711;--label-1-brand-hover: #af2e0e;--label-1-info: #1f6eb2;--label-1-info-hover: #1a5b93;--label-1-success: #2a7e43;--label-1-success-hover: #226737;--label-1-warning: #995200;--label-1-warning-hover: #7f410b;--label-1-critical: #c92c46;--label-1-critical-hover: #b02038;--label-2: #665f5b;--label-2-hover: #56504d;--label-2-active: #494441;--label-2-brand: #d03711;--label-2-brand-hover: #af2e0e;--label-2-brand-active: #912a0d;--label-2-info: #1f6eb2;--label-2-info-hover: #1a5b93;--label-2-info-active: #175082;--label-2-success: #2a7e43;--label-2-success-hover: #226737;--label-2-success-active: #1f5c31;--label-2-warning: #995200;--label-2-warning-hover: #7f410b;--label-2-warning-active: #6a3b0c;--label-2-critical: #c92c46;--label-2-critical-hover: #b02038;--label-2-critical-active: #a01c32;--label-disabled: #b3a9a3;--label-on-fill: #ffffff;--label-on-fill-critical: #ffffff;--label-on-fill-disabled: #b3a9a3;--focus-ring: #b24393;--focus-halo: color-mix(in oklch, #ffffff 70%, transparent)}.dark{--fill-1: #c0b7bd;--fill-1-hover: #cbc5c9;--fill-1-active: #d5cfd3;--fill-1-brand: #fea192;--fill-1-brand-hover: #ffb3a7;--fill-1-brand-active: #ffc1b8;--fill-1-info: #93c5ec;--fill-1-info-hover: #a6cdef;--fill-1-info-active: #bad6f3;--fill-1-success: #88d7a0;--fill-1-success-hover: #9ddeb1;--fill-1-success-active: #b3e5c2;--fill-1-warning: #edb25a;--fill-1-warning-hover: #ffbd59;--fill-1-warning-active: #ffca7a;--fill-1-critical: #c92c46;--fill-1-critical-hover: #b02038;--fill-1-critical-active: #a01c32;--fill-2: color-mix(in oklch, #a398a0 17%, transparent);--fill-2-hover: color-mix(in oklch, #a398a0 25%, transparent);--fill-2-active: color-mix(in oklch, #a398a0 30%, transparent);--fill-2-brand: color-mix(in oklch, #e94520 25%, transparent);--fill-2-brand-hover: color-mix(in oklch, #e94520 30%, transparent);--fill-2-brand-active: color-mix(in oklch, #e94520 35%, transparent);--fill-2-info: color-mix(in oklch, #2686d9 25%, transparent);--fill-2-info-hover: color-mix(in oklch, #2686d9 30%, transparent);--fill-2-info-active: color-mix(in oklch, #2686d9 35%, transparent);--fill-2-success: color-mix(in oklch, #329550 25%, transparent);--fill-2-success-hover: color-mix(in oklch, #329550 30%, transparent);--fill-2-success-active: color-mix(in oklch, #329550 35%, transparent);--fill-2-warning: color-mix(in oklch, #ae6613 30%, transparent);--fill-2-warning-hover: color-mix(in oklch, #ae6613 30%, transparent);--fill-2-warning-active: color-mix(in oklch, #ae6613 35%, transparent);--fill-2-critical: color-mix(in oklch, #de455e 25%, transparent);--fill-2-critical-hover: color-mix(in oklch, #de455e 30%, transparent);--fill-2-critical-active: color-mix(in oklch, #de455e 35%, transparent);--fill-3: color-mix(in oklch, #a398a0 10%, transparent);--fill-3-hover: color-mix(in oklch, #a398a0 15%, transparent);--fill-3-active: color-mix(in oklch, #a398a0 20%, transparent);--fill-3-brand: color-mix(in oklch, #e94520 10%, transparent);--fill-3-brand-hover: color-mix(in oklch, #e94520 15%, transparent);--fill-3-brand-active: color-mix(in oklch, #e94520 20%, transparent);--fill-3-info: color-mix(in oklch, #2686d9 10%, transparent);--fill-3-info-hover: color-mix(in oklch, #2686d9 15%, transparent);--fill-3-info-active: color-mix(in oklch, #2686d9 20%, transparent);--fill-3-success: color-mix(in oklch, #329550 10%, transparent);--fill-3-success-hover: color-mix(in oklch, #329550 15%, transparent);--fill-3-success-active: color-mix(in oklch, #329550 20%, transparent);--fill-3-warning: color-mix(in oklch, #ae6613 10%, transparent);--fill-3-warning-hover: color-mix(in oklch, #ae6613 15%, transparent);--fill-3-warning-active: color-mix(in oklch, #ae6613 20%, transparent);--fill-3-critical: color-mix(in oklch, #de455e 10%, transparent);--fill-3-critical-hover: color-mix(in oklch, #de455e 15%, transparent);--fill-3-critical-active: color-mix(in oklch, #de455e 20%, transparent);--fill-1-disabled: color-mix(in oklch, #a398a0 50%, transparent);--fill-disabled: color-mix(in oklch, #a398a0 10%, transparent);--stroke-1: #533c4b;--stroke-1-hover: #6b5b66;--stroke-1-active: #7c6e78;--stroke-1-brand: #912a0d;--stroke-1-brand-hover: #d03711;--stroke-1-brand-active: #e94520;--stroke-1-info: #175082;--stroke-1-info-hover: #1f6eb2;--stroke-1-info-active: #2686d9;--stroke-1-success: #1f5c31;--stroke-1-success-hover: #2a7e43;--stroke-1-success-active: #329550;--stroke-1-warning: #6a3b0c;--stroke-1-warning-hover: #995200;--stroke-1-warning-active: #ae6613;--stroke-1-critical: #a01c32;--stroke-1-critical-hover: #c92c46;--stroke-1-critical-active: #de455e;--stroke-2: color-mix(in oklch, #a39994 15%, transparent);--stroke-2-brand: color-mix(in oklch, #e94520 25%, transparent);--stroke-2-info: color-mix(in oklch, #2686d9 25%, transparent);--stroke-2-success: color-mix(in oklch, #329550 25%, transparent);--stroke-2-warning: color-mix(in oklch, #ae6613 25%, transparent);--stroke-2-critical: color-mix(in oklch, #de455e 25%, transparent);--stroke-disabled: color-mix(in oklch, #a398a0 12%, transparent);--label-1: #cbc5c9;--label-1-hover: #d5cfd3;--label-1-brand: #ffb3a7;--label-1-brand-hover: #ffc1b8;--label-1-info: #99d0ff;--label-1-info-hover: #bad6f3;--label-1-success: #68ff95;--label-1-success-hover: #b3e5c2;--label-1-warning: #ffbd59;--label-1-warning-hover: #f3cc91;--label-1-critical: #ffabb9;--label-1-critical-hover: #f4c2cb;--label-2: #b1a8ae;--label-2-hover: #c0b7bd;--label-2-active: #cbc5c9;--label-2-brand: #fea192;--label-2-brand-hover: #ffb3a7;--label-2-brand-active: #ffc1b8;--label-2-info: #93c5ec;--label-2-info-hover: #a6cdef;--label-2-info-active: #bad6f3;--label-2-success: #88d7a0;--label-2-success-hover: #9ddeb1;--label-2-success-active: #b3e5c2;--label-2-warning: #edb25a;--label-2-warning-hover: #f0bf75;--label-2-warning-active: #f3cc91;--label-2-critical: #ff9cad;--label-2-critical-hover: #ffabb9;--label-2-critical-active: #f4c2cb;--label-disabled: #6b5b66;--label-on-fill: #000000;--label-on-fill-critical: #ffffff;--label-on-fill-disabled: #7c6e78;--focus-ring: #e17cc2;--focus-halo: color-mix(in oklch, #000000 70%, transparent)}@layer anta.theme{a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]),a-tab{font-stretch:88%}a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]){letter-spacing:.05ch}a-input{--_input-adornment-font-stretch: 88%}a-tag{letter-spacing:.02ch}a-tag[allcaps]{letter-spacing:.08ch}:is(h1,h2,h3,a-title[level="1"],a-title[level="2"],a-title[level="3"]){font-family:var(--serif)}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit],[type=checkbox],[type=radio]),a-tab,a-menu-item,a[data-anta-menu-item],details[data-anta]>summary):focus-visible,:is(a-checkbox,a-radio,a-switch):focus-visible:before,a-radio-group:focus-visible a-radio:state(selected):before{outline:2px solid var(--focus-ring);outline-offset:calc(-2px * var(--focus-ring-inset, 0));animation:focus-ring-pulse .6s cubic-bezier(.2,0,0,1);@media(prefers-reduced-motion:reduce){animation:none}}a-tab{--focus-ring-inset: 1}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit])):not([round]){--_radius: 999px}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit])){--_padding-x-text: round(.8em, 1px);--button-fg-primary-rest: var(--label-on-fill);--bg-primary-disabled: var(--fill-disabled);--fg-disabled-primary: var(--label-on-fill-disabled);--bg-secondary-disabled: var(--fill-disabled);--fg-disabled: var(--label-disabled);&[priority=primary]:focus-visible{box-shadow:inset 0 0 0 1px var(--focus-halo)}}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit])):not([priority=primary],[priority=tertiary],[priority=quaternary]){--button-fg: var(--button-fg-secondary-rest);box-shadow:inset 0 0 2px -1px currentColor;@media(hover:hover)and (pointer:fine){&:hover{--button-fg: var(--button-fg-secondary-hover)}}&:active,&[selected]{--button-fg: var(--button-fg-secondary-hover)}&[selected]{box-shadow:inset 0 0 0 1px color-mix(in oklch,currentColor 50%,transparent)}&[disabled]{box-shadow:inset 0 0 2px -1px var(--label-1)}}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[priority=quaternary][paddingless][selected]{box-shadow:0 0 0 1px color-mix(in oklch,currentColor 50%,transparent)}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit])):is(:not([tone]),[tone=""],[tone=neutral]){--button-bg-primary-rest: var(--fill-1);--button-bg-primary-hover: var(--fill-1-hover);--button-bg-primary-active: var(--fill-1-active);--button-fg-secondary-rest: var(--label-1);--button-fg-secondary-hover: var(--label-1-hover);--button-bg-secondary-rest: var(--fill-2);--button-bg-secondary-hover: var(--fill-2-hover);--button-bg-secondary-active: var(--fill-2-active);--button-fg-tertiary-rest: var(--label-2);--button-fg-tertiary-hover: var(--label-2-hover);--button-bg-tertiary-hover: var(--fill-3);--button-bg-tertiary-active: var(--fill-3-hover);--button-fg-quaternary-rest: light-dark(var(--label-2), color-mix(in oklch, var(--label-2) 90%, transparent));--button-fg-quaternary-hover: var(--label-2-active)}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[tone=brand]{--button-bg-primary-rest: var(--fill-1-brand);--button-bg-primary-hover: var(--fill-1-brand-hover);--button-bg-primary-active: var(--fill-1-brand-active);--button-fg-secondary-rest: var(--label-1-brand);--button-fg-secondary-hover: var(--label-1-brand-hover);--button-bg-secondary-rest: var(--fill-2-brand);--button-bg-secondary-hover: var(--fill-2-brand-hover);--button-bg-secondary-active: var(--fill-2-brand-active);--button-fg-tertiary-rest: var(--label-2-brand);--button-fg-tertiary-hover: var(--label-2-brand-hover);--button-bg-tertiary-hover: var(--fill-3-brand);--button-bg-tertiary-active: var(--fill-3-brand-hover);--button-fg-quaternary-rest: light-dark(var(--label-2-brand), color-mix(in oklch, var(--label-2-brand) 90%, transparent));--button-fg-quaternary-hover: var(--label-2-brand-active)}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[tone=info]{--button-bg-primary-rest: var(--fill-1-info);--button-bg-primary-hover: var(--fill-1-info-hover);--button-bg-primary-active: var(--fill-1-info-active);--button-fg-secondary-rest: var(--label-1-info);--button-fg-secondary-hover: var(--label-1-info-hover);--button-bg-secondary-rest: var(--fill-2-info);--button-bg-secondary-hover: var(--fill-2-info-hover);--button-bg-secondary-active: var(--fill-2-info-active);--button-fg-tertiary-rest: var(--label-2-info);--button-fg-tertiary-hover: var(--label-2-info-hover);--button-bg-tertiary-hover: var(--fill-3-info);--button-bg-tertiary-active: var(--fill-3-info-hover);--button-fg-quaternary-rest: light-dark(var(--label-2-info), color-mix(in oklch, var(--label-2-info) 90%, transparent));--button-fg-quaternary-hover: var(--label-2-info-active)}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[tone=success]{--button-bg-primary-rest: var(--fill-1-success);--button-bg-primary-hover: var(--fill-1-success-hover);--button-bg-primary-active: var(--fill-1-success-active);--button-fg-secondary-rest: var(--label-1-success);--button-fg-secondary-hover: var(--label-1-success-hover);--button-bg-secondary-rest: var(--fill-2-success);--button-bg-secondary-hover: var(--fill-2-success-hover);--button-bg-secondary-active: var(--fill-2-success-active);--button-fg-tertiary-rest: var(--label-2-success);--button-fg-tertiary-hover: var(--label-2-success-hover);--button-bg-tertiary-hover: var(--fill-3-success);--button-bg-tertiary-active: var(--fill-3-success-hover);--button-fg-quaternary-rest: light-dark(var(--label-2-success), color-mix(in oklch, var(--label-2-success) 90%, transparent));--button-fg-quaternary-hover: var(--label-2-success-active)}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[tone=warning]{--button-bg-primary-rest: var(--fill-1-warning);--button-bg-primary-hover: var(--fill-1-warning-hover);--button-bg-primary-active: var(--fill-1-warning-active);--button-fg-secondary-rest: var(--label-1-warning);--button-fg-secondary-hover: var(--label-1-warning-hover);--button-bg-secondary-rest: var(--fill-2-warning);--button-bg-secondary-hover: var(--fill-2-warning-hover);--button-bg-secondary-active: var(--fill-2-warning-active);--button-fg-tertiary-rest: var(--label-2-warning);--button-fg-tertiary-hover: var(--label-2-warning-hover);--button-bg-tertiary-hover: var(--fill-3-warning);--button-bg-tertiary-active: var(--fill-3-warning-hover);--button-fg-quaternary-rest: light-dark(var(--label-2-warning), color-mix(in oklch, var(--label-2-warning) 90%, transparent));--button-fg-quaternary-hover: var(--label-2-warning-active)}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[tone=critical]{--button-fg-primary-rest: var(--label-on-fill-critical);--button-bg-primary-rest: var(--fill-1-critical);--button-bg-primary-hover: var(--fill-1-critical-hover);--button-bg-primary-active: var(--fill-1-critical-active);--button-fg-secondary-rest: var(--label-1-critical);--button-fg-secondary-hover: var(--label-1-critical-hover);--button-bg-secondary-rest: var(--fill-2-critical);--button-bg-secondary-hover: var(--fill-2-critical-hover);--button-bg-secondary-active: var(--fill-2-critical-active);--button-fg-tertiary-rest: var(--label-2-critical);--button-fg-tertiary-hover: var(--label-2-critical-hover);--button-bg-tertiary-hover: var(--fill-3-critical);--button-bg-tertiary-active: var(--fill-3-critical-hover);--button-fg-quaternary-rest: light-dark(var(--label-2-critical), color-mix(in oklch, var(--label-2-critical) 90%, transparent));--button-fg-quaternary-hover: var(--label-2-critical-active)}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--button-bg-primary-rest: light-dark(oklch(from var(--_src) .51 .17 h), oklch(from var(--_src) .8 .1 h));--button-bg-primary-hover: light-dark(oklch(from var(--_src) .46 .17 h), oklch(from var(--_src) .84 .095 h));--button-bg-primary-active: light-dark(oklch(from var(--_src) .41 .17 h), oklch(from var(--_src) .87 .075 h));--button-fg-secondary-rest: light-dark(oklch(from var(--_src) .46 .17 h), oklch(from var(--_src) .835 .1 h));--button-fg-secondary-hover: light-dark(oklch(from var(--_src) .4 .17 h), oklch(from var(--_src) .865 .07 h));--button-fg-tertiary-rest: light-dark(oklch(from var(--_src) .46 .17 h), oklch(from var(--_src) .8 .11 h));--button-fg-tertiary-hover: light-dark(oklch(from var(--_src) .4 .17 h), oklch(from var(--_src) .83 .09 h));--button-fg-quaternary-rest: light-dark(oklch(from var(--_src) .46 .17 h / .85), oklch(from var(--_src) .76 .115 h));--button-fg-quaternary-hover: light-dark(oklch(from var(--_src) .38 .17 h), oklch(from var(--_src) .835 .09 h))}:is(a-checkbox,input[data-anta][type=checkbox]){--checkbox-icon: var(--label-on-fill);--checkbox-icon-disabled: var(--label-on-fill-disabled);--checkbox-bg-disabled: var(--fill-disabled);--checkbox-border-disabled: var(--stroke-disabled)}a-checkbox{--checkbox-label-color: var(--text-1);--checkbox-hint-color: var(--text-4);--checkbox-mask-size: 12px;--checkbox-mask-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='square'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");--checkbox-mask-indeterminate: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='square'%3E%3Cpath d='M21 12H3'/%3E%3C/svg%3E");&[size=small]{--checkbox-mask-size: 10px;--checkbox-mask-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.84' stroke-linecap='square'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");--checkbox-mask-indeterminate: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.84' stroke-linecap='square'%3E%3Cpath d='M21 12H3'/%3E%3C/svg%3E")}&[size=large]{--checkbox-gap: 10px;--checkbox-mask-size: 14px;--checkbox-mask-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.74' stroke-linecap='square'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");--checkbox-mask-indeterminate: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.74' stroke-linecap='square'%3E%3Cpath d='M21 12H3'/%3E%3C/svg%3E")}&:not([round]):before{border-radius:1px}}:is(a-checkbox,input[data-anta][type=checkbox]):is(:not([tone]),[tone=""],[tone=neutral],[tone-scope=selected]){--checkbox-bg: var(--bg-1);--checkbox-border-neutral: var(--stroke-1);--checkbox-border: var(--checkbox-border-neutral);--checkbox-border-hover: var(--stroke-1-hover);--checkbox-border-active: var(--stroke-1-active)}:is(a-checkbox,input[data-anta][type=checkbox]):is(:not([tone]),[tone=""],[tone=neutral]){--checkbox-bg-selected: var(--fill-1);--checkbox-bg-selected-hover: var(--fill-1-hover);--checkbox-bg-selected-active: var(--fill-1-active)}:is(a-checkbox,input[data-anta][type=checkbox])[tone=brand]{--checkbox-bg-selected: var(--fill-1-brand);--checkbox-bg-selected-hover: var(--fill-1-brand-hover);--checkbox-bg-selected-active: var(--fill-1-brand-active);&:not([tone-scope=selected]){--checkbox-bg: var(--bg-2-brand);--checkbox-border: var(--stroke-1-brand);--checkbox-border-hover: var(--stroke-1-brand-hover);--checkbox-border-active: var(--stroke-1-brand-active)}}:is(a-checkbox,input[data-anta][type=checkbox])[tone=info]{--checkbox-bg-selected: var(--fill-1-info);--checkbox-bg-selected-hover: var(--fill-1-info-hover);--checkbox-bg-selected-active: var(--fill-1-info-active);&:not([tone-scope=selected]){--checkbox-bg: var(--bg-2-info);--checkbox-border: var(--stroke-1-info);--checkbox-border-hover: var(--stroke-1-info-hover);--checkbox-border-active: var(--stroke-1-info-active)}}:is(a-checkbox,input[data-anta][type=checkbox])[tone=success]{--checkbox-bg-selected: var(--fill-1-success);--checkbox-bg-selected-hover: var(--fill-1-success-hover);--checkbox-bg-selected-active: var(--fill-1-success-active);&:not([tone-scope=selected]){--checkbox-bg: var(--bg-2-success);--checkbox-border: var(--stroke-1-success);--checkbox-border-hover: var(--stroke-1-success-hover);--checkbox-border-active: var(--stroke-1-success-active)}}:is(a-checkbox,input[data-anta][type=checkbox])[tone=warning]{--checkbox-bg-selected: var(--fill-1-warning);--checkbox-bg-selected-hover: var(--fill-1-warning-hover);--checkbox-bg-selected-active: var(--fill-1-warning-active);&:not([tone-scope=selected]){--checkbox-bg: var(--bg-2-warning);--checkbox-border: var(--stroke-1-warning);--checkbox-border-hover: var(--stroke-1-warning-hover);--checkbox-border-active: var(--stroke-1-warning-active)}}:is(a-checkbox,input[data-anta][type=checkbox])[tone=critical]{--checkbox-icon: var(--label-on-fill-critical);--checkbox-bg-selected: var(--fill-1-critical);--checkbox-bg-selected-hover: var(--fill-1-critical-hover);--checkbox-bg-selected-active: var(--fill-1-critical-active);&:not([tone-scope=selected]){--checkbox-bg: var(--bg-2-critical);--checkbox-border: var(--stroke-1-critical);--checkbox-border-hover: var(--stroke-1-critical-hover);--checkbox-border-active: var(--stroke-1-critical-active)}}:is(a-checkbox,input[data-anta][type=checkbox])[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--checkbox-bg-selected: light-dark(oklch(from var(--checkbox-tone-source) .5 c h), oklch(from var(--checkbox-tone-source) .8 .1 h));--checkbox-bg-selected-hover: light-dark(oklch(from var(--checkbox-tone-source) .45 c h), oklch(from var(--checkbox-tone-source) .84 .095 h));--checkbox-bg-selected-active: light-dark(oklch(from var(--checkbox-tone-source) .4 c h), oklch(from var(--checkbox-tone-source) .87 .075 h));--_checkbox-off-bg-selected: light-dark(oklch(from var(--checkbox-tone-source) .5 c h), oklch(from var(--checkbox-tone-source) .45 c h))}a-checkbox:after{clip-path:inset(0 100% 0 0)}a-checkbox:is(:state(checked),:state(indeterminate)):after{clip-path:inset(0)}@media(prefers-reduced-motion:no-preference){a-checkbox:is(:hover,:focus-visible):is(:state(checked),:state(indeterminate)):after{transition:clip-path .3s cubic-bezier(.45,.05,.55,.95)}}a-checkbox:is(:state(checked),:state(indeterminate)):focus-visible:before,input[data-anta][type=checkbox]:is(:checked,:indeterminate):focus-visible{border-width:0;box-shadow:inset 0 0 0 1px var(--focus-halo)}label:has(>input[data-anta][type=checkbox]){color:var(--text-1)}label:has(>input[data-anta][type=checkbox][size=large]){gap:10px}label:has(>input[data-anta][type=checkbox]:disabled){color:var(--text-4)}input[data-anta][type=checkbox]:not([round]){--checkbox-round: 1px}input[data-anta][type=checkbox]:disabled{border-color:var(--checkbox-border-disabled);background-color:var(--checkbox-bg-disabled)}input[data-anta][type=checkbox]:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='square'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E")}input[data-anta][type=checkbox]:indeterminate{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='square'%3E%3Cpath d='M21 12H3'/%3E%3C/svg%3E")}.dark input[data-anta][type=checkbox]:not([tone=critical]):checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='square'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E")}.dark input[data-anta][type=checkbox]:not([tone=critical]):indeterminate{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='square'%3E%3Cpath d='M21 12H3'/%3E%3C/svg%3E")}input[data-anta][type=checkbox]:disabled:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3a9a3' stroke-width='3.2' stroke-linecap='square'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E")}input[data-anta][type=checkbox]:disabled:indeterminate{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3a9a3' stroke-width='3.2' stroke-linecap='square'%3E%3Cpath d='M21 12H3'/%3E%3C/svg%3E")}.dark input[data-anta][type=checkbox]:disabled:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c6e78' stroke-width='3.2' stroke-linecap='square'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E")}.dark input[data-anta][type=checkbox]:disabled:indeterminate{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c6e78' stroke-width='3.2' stroke-linecap='square'%3E%3Cpath d='M21 12H3'/%3E%3C/svg%3E")}:is(a-radio,input[data-anta][type=radio]){--radio-bg: var(--bg-1);--radio-border-neutral: var(--stroke-1);--radio-border: var(--radio-border-neutral);--radio-border-hover: var(--stroke-1-hover);--radio-border-active: var(--stroke-1-active);--radio-bg-selected: var(--fill-1);--radio-bg-selected-hover: var(--fill-1-hover);--radio-bg-selected-active: var(--fill-1-active);--radio-dot: var(--label-on-fill);--radio-dot-disabled: var(--label-on-fill-disabled);--radio-bg-disabled: var(--fill-disabled);--radio-border-disabled: var(--stroke-disabled)}:is(a-radio[tone=brand],a-radio-group[tone=brand] a-radio:not([tone]),input[data-anta][type=radio][tone=brand]){--radio-bg-selected: var(--fill-1-brand);--radio-bg-selected-hover: var(--fill-1-brand-hover);--radio-bg-selected-active: var(--fill-1-brand-active);--_radio-tint-bg: var(--bg-2-brand);--_radio-tint-border: var(--stroke-1-brand);--_radio-tint-border-hover: var(--stroke-1-brand-hover);--_radio-tint-border-active: var(--stroke-1-brand-active)}:is(a-radio[tone=info],a-radio-group[tone=info] a-radio:not([tone]),input[data-anta][type=radio][tone=info]){--radio-bg-selected: var(--fill-1-info);--radio-bg-selected-hover: var(--fill-1-info-hover);--radio-bg-selected-active: var(--fill-1-info-active);--_radio-tint-bg: var(--bg-2-info);--_radio-tint-border: var(--stroke-1-info);--_radio-tint-border-hover: var(--stroke-1-info-hover);--_radio-tint-border-active: var(--stroke-1-info-active)}:is(a-radio[tone=success],a-radio-group[tone=success] a-radio:not([tone]),input[data-anta][type=radio][tone=success]){--radio-bg-selected: var(--fill-1-success);--radio-bg-selected-hover: var(--fill-1-success-hover);--radio-bg-selected-active: var(--fill-1-success-active);--_radio-tint-bg: var(--bg-2-success);--_radio-tint-border: var(--stroke-1-success);--_radio-tint-border-hover: var(--stroke-1-success-hover);--_radio-tint-border-active: var(--stroke-1-success-active)}:is(a-radio[tone=warning],a-radio-group[tone=warning] a-radio:not([tone]),input[data-anta][type=radio][tone=warning]){--radio-bg-selected: var(--fill-1-warning);--radio-bg-selected-hover: var(--fill-1-warning-hover);--radio-bg-selected-active: var(--fill-1-warning-active);--_radio-tint-bg: var(--bg-2-warning);--_radio-tint-border: var(--stroke-1-warning);--_radio-tint-border-hover: var(--stroke-1-warning-hover);--_radio-tint-border-active: var(--stroke-1-warning-active)}:is(a-radio[tone=critical],a-radio-group[tone=critical] a-radio:not([tone]),input[data-anta][type=radio][tone=critical]){--radio-dot: var(--label-on-fill-critical);--radio-bg-selected: var(--fill-1-critical);--radio-bg-selected-hover: var(--fill-1-critical-hover);--radio-bg-selected-active: var(--fill-1-critical-active);--_radio-tint-bg: var(--bg-2-critical);--_radio-tint-border: var(--stroke-1-critical);--_radio-tint-border-hover: var(--stroke-1-critical-hover);--_radio-tint-border-active: var(--stroke-1-critical-active)}a-radio[tone]:not([tone=""],[tone=neutral],[tone-scope=selected]),a-radio-group[tone]:not([tone=""],[tone=neutral],[tone-scope=selected]) a-radio:not([tone],[tone-scope=selected]),a-radio-group[tone]:not([tone=""],[tone=neutral])[tone-scope=selected] a-radio[tone-scope=all]:not([tone]),input[data-anta][type=radio][tone]:not([tone=""],[tone=neutral],[tone-scope=selected]){--radio-bg: var(--_radio-tint-bg);--radio-border: var(--_radio-tint-border);--radio-border-hover: var(--_radio-tint-border-hover);--radio-border-active: var(--_radio-tint-border-active)}:is(a-radio[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]),a-radio-group[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]) a-radio:not([tone]),input[data-anta][type=radio][tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])){--radio-bg-selected: light-dark(oklch(from var(--radio-tone-source) .5 c h), oklch(from var(--radio-tone-source) .8 .1 h));--radio-bg-selected-hover: light-dark(oklch(from var(--radio-tone-source) .45 c h), oklch(from var(--radio-tone-source) .84 .095 h));--radio-bg-selected-active: light-dark(oklch(from var(--radio-tone-source) .4 c h), oklch(from var(--radio-tone-source) .87 .075 h));--_radio-off-bg-selected: light-dark(oklch(from var(--radio-tone-source) .5 c h), oklch(from var(--radio-tone-source) .45 c h));--_radio-tint-bg: light-dark(oklch(from var(--radio-off-tone-source) .99 calc(c*.03) h), oklch(from var(--radio-off-tone-source) .15 calc(c*.18) h));--_radio-tint-border: light-dark(oklch(from var(--_radio-border-base) calc(l + .17) c h), var(--_radio-border-base));--_radio-tint-border-hover: oklch(from var(--_radio-border-base) calc(l + .1) c h);--_radio-tint-border-active: light-dark(var(--_radio-border-base), oklch(from var(--_radio-border-base) calc(l + .17) c h))}input[data-anta][type=radio]:disabled{border-color:var(--radio-border-disabled);background-color:var(--radio-bg-disabled)}input[data-anta][type=radio]:disabled:checked{border-color:var(--radio-border-disabled);background:radial-gradient(circle,var(--radio-dot-disabled) 0 var(--radio-dot-core),var(--radio-bg-disabled) var(--radio-dot-edge))}a-radio:state(selected):focus-visible:before,a-radio-group:focus-visible a-radio:state(selected):before,input[data-anta][type=radio]:checked:focus-visible,a-switch:state(checked):focus-visible:before{border-width:0;box-shadow:inset 0 0 0 1px var(--focus-halo)}a-input:not([round])::part(field),a-input:not([round]):not(:defined):after{border-radius:0}a-input{--_input-focus-width: 2px;--_input-focus-offset: -2px}a-input:not([status]:not([status=neutral]),[tone]:not([tone=""]),:disabled){--input-border: var(--stroke-1-hover);--input-border-width: 1px;&:not([priority=tertiary]){--input-rest-border: var(--stroke-1)}}a-input:disabled{--input-border: var(--stroke-disabled);--input-border-width: 1px;&:not([priority=tertiary]){--input-rest-border: var(--stroke-disabled)}&:not([priority=secondary],[priority=tertiary]){--input-bg: var(--fill-disabled)}}:is(input[data-anta]:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=button],[type=reset],[type=submit],[type=image],[type=hidden]),textarea[data-anta],select[data-anta]):not([round]){--native-field-round: 0px}a-tag{border-radius:1px}}@keyframes focus-ring-pulse{0%{outline-width:0;outline-offset:0;outline-color:color-mix(in oklch,var(--focus-ring) 60%,transparent)}30%{outline-width:4px;outline-offset:calc(-4px * var(--focus-ring-inset, 0));outline-color:color-mix(in oklch,var(--focus-ring) 60%,transparent)}}