@antadesign/anta 0.3.21 → 0.3.22

package/dist/components/Button.d.ts

@@ -135,4 +135,4 @@ export type ButtonProps = BaseButtonProps & PriorityMode & ContentMode & SubmitM
  * <Button href="/docs" target="_blank" label="Read the docs" />
  * ```
  */
-export declare const Button: ({ priority, tone, underline, icon, iconTrailing, paddingless, label, size, loading, disabled, selected, round, href, target, rel, download, ping, type, form, className, style, children, ...rest }: ButtonProps) => any;
+export declare const Button: ({ priority, tone, underline, icon, iconTrailing, paddingless, label, size, loading, disabled, selected, round, onClick, href, target, rel, download, ping, type, form, className, style, children, ...rest }: ButtonProps) => any;

package/dist/components/Button.js

@@ -13,6 +13,7 @@ const Button = ({
   disabled,
   selected,
   round,
+  onClick,
   href,
   target,
   rel,
@@ -26,6 +27,7 @@ const Button = ({
   ...rest
 }) => {
   const toneAttr = tone || void 0;
+  const unavailable = disabled || loading;
   const computedStyle = roundStyle(round, "--button-round", toneStyle(toneAttr, "--button-tone-source", style));
   const isIconOnly = icon != null && label == null && children == null && iconTrailing == null;
   const sharedAttrs = {
@@ -53,8 +55,8 @@ const Button = ({
     // Disabled AND loading both leave the keyboard tab order — a loading
     // button blocks the mouse (pointer-events), so it must block Enter/Space
     // activation too, else the loading guard would be mouse-only.
-    tabIndex: disabled || loading ? -1 : 0,
-    "aria-disabled": disabled || loading ? "true" : void 0,
+    tabIndex: unavailable ? -1 : 0,
+    "aria-disabled": unavailable ? "true" : void 0,
     "aria-busy": loading ? "true" : void 0,
     "aria-pressed": selected ? "true" : void 0,
     // Icon-only buttons get an accessible name from the icon shape. Consumer's
@@ -62,7 +64,8 @@ const Button = ({
     // ButtonCopy uses to name an icon-only copy button "Copy".
     "aria-label": isIconOnly ? icon : void 0,
     class: className,
-    style: computedStyle
+    style: computedStyle,
+    onClick: unavailable ? void 0 : onClick
   };
   const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
     icon && /* @__PURE__ */ jsx("a-icon", { shape: icon, "aria-hidden": "true" }),
@@ -71,16 +74,20 @@ const Button = ({
     iconTrailing && /* @__PURE__ */ jsx("a-icon", { shape: iconTrailing, "aria-hidden": "true" })
   ] });
   if (href != null) {
+    const anchorAttrs = {
+      ...sharedAttrs,
+      disabled: unavailable || void 0
+    };
     return /* @__PURE__ */ jsx(
       "a",
       {
-        href,
+        href: unavailable ? void 0 : href,
         "data-anta": "",
         target,
         rel,
         download,
         ping,
-        ...sharedAttrs,
+        ...anchorAttrs,
         ...rest,
         children: inner
       }

package/dist/components/Checkbox.js

@@ -33,7 +33,11 @@ const Checkbox = ({
     toneStyle(
       toneSelected,
       "--checkbox-tone-source",
-      toneStyle(tone, "--checkbox-tone-source", style)
+      toneStyle(
+        tone,
+        "--checkbox-off-tone-source",
+        toneSelected == null ? toneStyle(tone, "--checkbox-tone-source", style) : style
+      )
     )
   );
   const explicitAriaLabel = rest["aria-label"];
@@ -64,7 +68,7 @@ const Checkbox = ({
       "default-state": defaultStateAttr,
       disabled: disabled ? "" : void 0,
       tone: tone && tone !== "neutral" ? tone : void 0,
-      "tone-selected": toneSelected && toneSelected !== "neutral" ? toneSelected : void 0,
+      "tone-selected": toneSelected || void 0,
       size: size && size !== "medium" ? size : void 0,
       round: roundAttr(round),
       tabIndex: disabled ? -1 : tabIndex ?? 0,

package/dist/components/Input.d.ts

@@ -93,7 +93,8 @@ export interface InputProps extends BaseProps, DOMEventHandlers {
     /** Placeholder shown when empty. */
     placeholder?: string;
     /** Ellipsize an overflowing single-line value. Read-only inputs already do
-     * this; use `truncate` when an editable field should keep the same treatment. */
+     * this; pass `false` when an editable field should show the full value.
+     * @defaultValue true */
     truncate?: boolean;
     /** Disable the field. */
     disabled?: boolean;

package/dist/components/Input.js

@@ -51,7 +51,7 @@ const Input = ({
   inputMode,
   name,
   placeholder,
-  truncate,
+  truncate = true,
   disabled,
   readOnly,
   required,

package/dist/components/InputDate.js

@@ -129,6 +129,7 @@ const InputDate = ({
         placeholder: pattern,
         inputMode: time ? "text" : "numeric",
         autoComplete: "off",
+        role: "combobox",
         "aria-haspopup": "dialog",
         "aria-expanded": open ? "true" : "false",
         onInput: (e) => {

package/dist/components/Menu.d.ts

@@ -43,6 +43,11 @@ export interface MenuProps extends BaseProps {
      *  fully round. A `number` (px) or CSS length string tunes the container radius
      *  only — items stay full pills. */
     round?: boolean | number | string;
+    /** Contain events so they don't bubble out of the menu to ancestor handlers
+     *  (e.g. a clickable row the menu sits in). Selecting an item is always
+     *  contained; this extends it to whole event types. `true` contains `click`;
+     *  pass an event name or list (`"click pointerdown"`) to contain those. */
+    stopPropagation?: boolean | string | string[];
     /** Fired before the open state changes — on open, and on every dismiss (Esc,
      *  outside-click, scroll, selecting an item). `event` is the cancelable
      *  `statechange`; `detail.next`/`detail.prev` are the requested/previous open
@@ -96,4 +101,4 @@ export interface MenuProps extends BaseProps {
  * </Menu>
  * ```
  */
-export declare const Menu: ({ placement, context, coord, nohover, offset, autoWidth, inset, open, onStateChange, round, role, className, style, children, ...rest }: MenuProps) => any;
+export declare const Menu: ({ placement, context, coord, nohover, offset, autoWidth, inset, open, onStateChange, round, stopPropagation, role, className, style, children, ...rest }: MenuProps) => any;

package/dist/components/Menu.js

@@ -11,6 +11,7 @@ const Menu = ({
   open,
   onStateChange,
   round,
+  stopPropagation,
   role = "menu",
   className,
   style,
@@ -36,6 +37,7 @@ const Menu = ({
           });
       } : void 0,
       round: roundAttr(round),
+      "stop-propagation": stopPropagation === void 0 || stopPropagation === false ? void 0 : stopPropagation === true ? "" : Array.isArray(stopPropagation) ? stopPropagation.join(" ") : stopPropagation,
       role,
       "aria-orientation": "vertical",
       class: className,

package/dist/components/RadioGroup.js

@@ -64,7 +64,7 @@ const RadioGroup = ({
       name,
       status: status && status !== "neutral" ? status : void 0,
       tone: tone && tone !== "neutral" ? tone : void 0,
-      "tone-selected": toneSelected && toneSelected !== "neutral" ? toneSelected : void 0,
+      "tone-selected": toneSelected || void 0,
       size: size && size !== "medium" ? size : void 0,
       disabled: disabled ? "" : void 0,
       orientation: orientation && orientation !== "vertical" ? orientation : void 0,
@@ -73,7 +73,15 @@ const RadioGroup = ({
       onfocusin: onFocus,
       onfocusout: onBlur,
       class: className,
-      style: toneStyle(toneSelected, "--radio-tone-source", toneStyle(tone, "--radio-tone-source", style)),
+      style: toneStyle(
+        toneSelected,
+        "--radio-tone-source",
+        toneStyle(
+          tone,
+          "--radio-off-tone-source",
+          toneSelected == null ? toneStyle(tone, "--radio-tone-source", style) : style
+        )
+      ),
       children: [
         label && /* @__PURE__ */ jsx("a-radio-group-label", { id: labelId, children: label }),
         hint && /* @__PURE__ */ jsx("a-radio-group-hint", { id: hintId, children: hint }),
@@ -88,12 +96,20 @@ const RadioGroup = ({
               value: o.value,
               "aria-disabled": optDisabled ? "true" : void 0,
               tabIndex: o.value === tabStopValue ? 0 : -1,
-              tone: o.tone && o.tone !== "neutral" ? o.tone : void 0,
-              "tone-selected": o.toneSelected && o.toneSelected !== "neutral" ? o.toneSelected : void 0,
+              tone: o.tone || void 0,
+              "tone-selected": o.toneSelected || void 0,
               size: o.size && o.size !== "medium" ? o.size : void 0,
               disabled: o.disabled ? "" : void 0,
               class: optionClassName,
-              style: toneStyle(o.toneSelected, "--radio-tone-source", toneStyle(o.tone, "--radio-tone-source", optionStyle)),
+              style: toneStyle(
+                o.toneSelected,
+                "--radio-tone-source",
+                toneStyle(
+                  o.tone,
+                  "--radio-off-tone-source",
+                  o.toneSelected == null ? toneStyle(o.tone, "--radio-tone-source", optionStyle) : optionStyle
+                )
+              ),
               children: [
                 /* @__PURE__ */ jsx("a-radio-label", { children: o.label }),
                 o.hint != null && /* @__PURE__ */ jsx("a-radio-hint", { children: o.hint })

package/dist/components/Select.d.ts

@@ -248,7 +248,9 @@ export interface SelectCommonProps<V extends OptionValue = string> extends Omit<
      *  one focusable element, such as an Anta `Button`. The menu is positioned
      *  relative to that element and opens when it is clicked. Do not return a
      *  fragment, multiple siblings, or a non-focusable wrapper. Add
-     *  `aria-haspopup="menu"` and `aria-expanded={state.open}` to the element.
+     *  `aria-haspopup="menu"` and `aria-expanded={state.open}` to the element, on a
+     *  role that supports them (an Anta `Button` already carries `role="button"`;
+     *  otherwise add `role="combobox"`).
      *  Field props (`label`, `hint`, `size`, `status`, `placeholder`, and `round`) and
      *  `className` / `style` apply only to the default field. Add styling and
      *  attributes to the returned element instead. */

package/dist/components/Select.js

@@ -270,6 +270,7 @@ const Select = (props) => {
         status,
         statusIcon,
         round,
+        role: "combobox",
         "aria-haspopup": "menu",
         "aria-expanded": open ? "true" : "false",
         trailing: (

package/dist/components/SelectFaceted.d.ts

@@ -165,8 +165,10 @@ export interface SelectFacetedProps extends Omit<BaseProps, 'children'> {
      *  Receives a `SelectFacetedTriggerState`. Return exactly one focusable element:
      *  the menu is positioned relative to that element and opens when it is clicked.
      *  Add `aria-haspopup="menu"` and `aria-expanded={state.open}` to the returned
-     *  element. `className`, `style`, and other trigger props apply only to the
-     *  default Button, so add styling and attributes to the returned element. */
+     *  element, on a role that supports them (an Anta `Button` already carries
+     *  `role="button"`; otherwise add `role="combobox"`). `className`, `style`, and
+     *  other trigger props apply only to the default Button, so add styling and
+     *  attributes to the returned element. */
     renderTrigger?: (state: SelectFacetedTriggerState) => React.ReactNode;
 }
 /**

package/dist/elements/a-checkbox.css

@@ -1 +1 @@
-@layer anta{a-checkbox{--checkbox-gap: 8px;--checkbox-box-size: 16px;--checkbox-bg: var(--bg-1);--checkbox-tone-source: var(--anta-seed-neutral);--_tone-l-rest: .6;--_tone-l-hover: .45;--_tone-l-active: .4;--checkbox-bg-selected: oklch(from var(--checkbox-tone-source) var(--_tone-l-rest) c h);--checkbox-bg-selected-hover: oklch(from var(--checkbox-tone-source) var(--_tone-l-hover) c h);--checkbox-bg-selected-active: oklch(from var(--checkbox-tone-source) var(--_tone-l-active) c h);--checkbox-border-neutral: var(--border-3);--checkbox-border: var(--checkbox-border-neutral);--checkbox-border-hover: var(--border-2);--checkbox-border-active: var(--border-1);--checkbox-icon: #f6f4f6;--checkbox-icon-disabled: #c1b9c1;--checkbox-bg-disabled: color-mix(in oklch, #44374b 10%, transparent);--checkbox-border-disabled: color-mix(in oklch, #44374b 10%, transparent);--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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");--checkbox-label-color: var(--text-2);--checkbox-label-color-disabled: var(--text-4);--checkbox-hint-color: var(--text-3);--checkbox-label-fs: 15px;--checkbox-label-lh: 20px;--checkbox-hint-fs: 13px;--checkbox-hint-lh: 16px;display:inline-grid;grid-template-columns:auto 1fr;align-items:start;column-gap:var(--checkbox-gap);vertical-align:middle;cursor:pointer;user-select:none;-webkit-user-drag:none;outline:none;color:var(--checkbox-label-color);font-family:var(--sans-serif);font-size:var(--checkbox-label-fs);line-height:var(--checkbox-label-lh);font-feature-settings:"ss02","ss05","tnum";&:before{content:"";grid-column:1;grid-row:1 / -1;align-self:start;margin-block-start:calc((var(--checkbox-label-lh) - var(--checkbox-box-size)) / 2);box-sizing:border-box;inline-size:16px;block-size:16px;border-radius:4px;background:var(--checkbox-bg);border:1.5px solid var(--checkbox-border);transition:background-color .15s ease-out,border-color .15s ease-out}&[round]{--checkbox-round: attr(round type(<length>), 999px)}&[round]:before{border-radius:var(--checkbox-round, 999px)}&:after{content:"";grid-column:1;grid-row:1 / -1;align-self:start;margin-block-start:calc((var(--checkbox-label-lh) - var(--checkbox-box-size)) / 2);inline-size:16px;block-size:16px;background-color:transparent;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:var(--checkbox-mask-size);mask-size:var(--checkbox-mask-size)}@media(hover:hover)and (pointer:fine){&:not(:disabled):hover:before{border-color:var(--checkbox-border-hover);transition:background-color 75ms ease-in,border-color 75ms ease-in}&:not(:disabled):hover:is(:state(checked),:state(indeterminate)):before{background:var(--checkbox-bg-selected-hover);border-color:var(--checkbox-bg-selected-hover)}}&:not(:disabled):active:before{border-color:var(--checkbox-border-active);transition:background-color 50ms linear,border-color 50ms linear}&:not(:disabled):active:is(:state(checked),:state(indeterminate)):before{background:var(--checkbox-bg-selected-active);border-color:var(--checkbox-bg-selected-active)}&:is(:state(checked),:state(indeterminate)){&:before{background:var(--checkbox-bg-selected);border-color:var(--checkbox-bg-selected)}&:after{background-color:var(--checkbox-icon)}}&:state(checked):after{-webkit-mask-image:var(--checkbox-mask-check);mask-image:var(--checkbox-mask-check)}&:state(indeterminate):after{-webkit-mask-image:var(--checkbox-mask-indeterminate);mask-image:var(--checkbox-mask-indeterminate)}&:focus-visible:before{outline:1px solid var(--focus-ring);outline-offset:1px}&:disabled{cursor:not-allowed;color:var(--checkbox-label-color-disabled);&:before{background:var(--checkbox-bg-disabled);border-color:var(--checkbox-border-disabled);transition:none}&:is(:state(checked),:state(indeterminate)):after{background-color:var(--checkbox-icon-disabled)}a-checkbox-hint{color:var(--checkbox-label-color-disabled)}}&[size=small]{--checkbox-gap: 6px;--checkbox-box-size: 14px;--checkbox-label-fs: 13px;--checkbox-label-lh: 16px;--checkbox-hint-fs: 12px;--checkbox-hint-lh: 14px;--checkbox-mask-size: 10px;&:before,&:after{inline-size:14px;block-size:14px}}&[size=large]{--checkbox-box-size: 18px;--checkbox-label-fs: 17px;--checkbox-label-lh: 22px;--checkbox-hint-fs: 15px;--checkbox-hint-lh: 19px;--checkbox-mask-size: 14px;&:before,&:after{inline-size:18px;block-size:18px}}}.dark a-checkbox{--checkbox-mask-size: 13px}.dark a-checkbox[size=small]{--checkbox-mask-size: 11px}.dark a-checkbox[size=large]{--checkbox-mask-size: 15px}a-checkbox-label,a-checkbox-hint{display:block;grid-column:2;min-width:0}a-checkbox-hint{color:var(--checkbox-hint-color);font-size:var(--checkbox-hint-fs);line-height:var(--checkbox-hint-lh);margin-block-start:2px}a-checkbox[tone]:not([tone=""],[tone=neutral]),a-checkbox[tone-selected]:not([tone-selected=""],[tone-selected=neutral]){--_tone-l-rest: .5;--_tone-l-hover: .45;--_tone-l-active: .4}a-checkbox[tone=brand],a-checkbox[tone-selected=brand]{--checkbox-tone-source: var(--anta-seed-brand)}a-checkbox[tone=info],a-checkbox[tone-selected=info]{--checkbox-tone-source: var(--anta-seed-info)}a-checkbox[tone=success],a-checkbox[tone-selected=success]{--checkbox-tone-source: var(--anta-seed-success)}a-checkbox[tone=warning],a-checkbox[tone-selected=warning]{--checkbox-tone-source: var(--anta-seed-warning)}a-checkbox[tone=critical],a-checkbox[tone-selected=critical]{--checkbox-tone-source: var(--anta-seed-critical)}a-checkbox[tone=neutral],a-checkbox[tone-selected=neutral]{--checkbox-tone-source: var(--anta-seed-neutral)}a-checkbox[tone]:not([tone=""],[tone=neutral]){--checkbox-bg: oklch(from var(--checkbox-tone-source) .99 calc(c*.03) h);--_checkbox-border-base: color-mix(in oklch, var(--checkbox-bg-selected) 70%, var(--checkbox-border-neutral));--checkbox-border: oklch(from var(--_checkbox-border-base) calc(l + .17) c h);--checkbox-border-hover: oklch(from var(--_checkbox-border-base) calc(l + .1) c h);--checkbox-border-active: var(--_checkbox-border-base)}a-checkbox[tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]){--checkbox-tone-source: attr(tone type(<color>), transparent)}a-checkbox[tone-selected]:not([tone-selected=""],[tone-selected=brand],[tone-selected=neutral],[tone-selected=info],[tone-selected=success],[tone-selected=warning],[tone-selected=critical]){--checkbox-tone-source: attr(tone-selected type(<color>), transparent)}.dark a-checkbox{--checkbox-border-neutral: var(--border-3);--checkbox-border-hover: var(--border-2);--checkbox-border-active: var(--border-1);--checkbox-icon: #ece9ec;--checkbox-icon-disabled: #534c57;--checkbox-bg-disabled: color-mix(in oklch, #e4d1ef 10%, transparent);--checkbox-border-disabled: color-mix(in oklch, #e4d1ef 10%, transparent);--_tone-l-rest: .42;--_tone-l-hover: .45;--_tone-l-active: .5}.dark a-checkbox[tone]:not([tone=""],[tone=neutral]),.dark a-checkbox[tone-selected]:not([tone-selected=""],[tone-selected=neutral]){--_tone-l-rest: .45;--_tone-l-hover: .5;--_tone-l-active: .57}.dark a-checkbox[tone]:not([tone=""],[tone=neutral]){--checkbox-bg: oklch(from var(--checkbox-tone-source) .15 calc(c*.18) h);--checkbox-border: var(--_checkbox-border-base);--checkbox-border-hover: oklch(from var(--_checkbox-border-base) calc(l + .1) c h);--checkbox-border-active: oklch(from var(--_checkbox-border-base) calc(l + .17) c h)}label:has(>input[data-anta][type=checkbox]){display:inline-flex;align-items:center;gap:8px;color:var(--text-2);font-family:var(--sans-serif);font-feature-settings:"ss02","ss05","tnum";font-size:15px;line-height:20px}input[data-anta][type=checkbox]{--native-choice-size: 16px;--native-choice-mark-size: 12px;--native-choice-round: 4px;--native-choice-bg: var(--bg-1);--native-choice-border-neutral: var(--border-3);--native-choice-border: var(--native-choice-border-neutral);--native-choice-border-hover: var(--border-2);--native-choice-border-active: var(--border-1);--native-choice-tone-source: var(--anta-seed-neutral);--_native-choice-l-rest: .6;--_native-choice-l-hover: .45;--_native-choice-l-active: .4;--native-choice-selected: oklch(from var(--native-choice-tone-source) var(--_native-choice-l-rest) c h);--native-choice-selected-hover: oklch(from var(--native-choice-tone-source) var(--_native-choice-l-hover) c h);--native-choice-selected-active: oklch(from var(--native-choice-tone-source) var(--_native-choice-l-active) c h);box-sizing:border-box;flex:0 0 var(--native-choice-size);inline-size:var(--native-choice-size);block-size:var(--native-choice-size);margin:0;appearance:none;-webkit-appearance:none;border:1.5px solid var(--native-choice-border);border-radius:var(--native-choice-round);background-color:var(--native-choice-bg);background-repeat:no-repeat;background-position:center;background-size:var(--native-choice-mark-size);cursor:pointer;vertical-align:middle;transition:background-color .15s ease-out,border-color .15s ease-out}label:has(>input[data-anta][type=checkbox][size=small]){gap:6px;font-size:13px;line-height:16px}label:has(>input[data-anta][type=checkbox][size=large]){font-size:17px;line-height:22px}input[data-anta][type=checkbox][size=small]{--native-choice-size: 14px;--native-choice-mark-size: 10px}input[data-anta][type=checkbox][size=large]{--native-choice-size: 18px;--native-choice-mark-size: 14px}input[data-anta][type=checkbox][round]{--native-choice-round: attr(round type(<length>), 999px)}input[data-anta][type=checkbox][tone]:not([tone=""],[tone=neutral]),input[data-anta][type=checkbox][tone-selected]:not([tone-selected=""],[tone-selected=neutral]){--_native-choice-l-rest: .5;--_native-choice-l-hover: .45;--_native-choice-l-active: .4}input[data-anta][type=checkbox][tone=brand],input[data-anta][type=checkbox][tone-selected=brand]{--native-choice-tone-source: var(--anta-seed-brand)}input[data-anta][type=checkbox][tone=info],input[data-anta][type=checkbox][tone-selected=info]{--native-choice-tone-source: var(--anta-seed-info)}input[data-anta][type=checkbox][tone=success],input[data-anta][type=checkbox][tone-selected=success]{--native-choice-tone-source: var(--anta-seed-success)}input[data-anta][type=checkbox][tone=warning],input[data-anta][type=checkbox][tone-selected=warning]{--native-choice-tone-source: var(--anta-seed-warning)}input[data-anta][type=checkbox][tone=critical],input[data-anta][type=checkbox][tone-selected=critical]{--native-choice-tone-source: var(--anta-seed-critical)}input[data-anta][type=checkbox][tone=neutral],input[data-anta][type=checkbox][tone-selected=neutral]{--native-choice-tone-source: var(--anta-seed-neutral)}input[data-anta][type=checkbox][tone]:not([tone=""],[tone=neutral]){--native-choice-bg: oklch(from var(--native-choice-tone-source) .99 calc(c*.03) h);--_native-choice-border-base: color-mix(in oklch, var(--native-choice-selected) 70%, var(--native-choice-border-neutral));--native-choice-border: oklch(from var(--_native-choice-border-base) calc(l + .17) c h);--native-choice-border-hover: oklch(from var(--_native-choice-border-base) calc(l + .1) c h);--native-choice-border-active: var(--_native-choice-border-base)}input[data-anta][type=checkbox][tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]){--native-choice-tone-source: attr(tone type(<color>), var(--anta-seed-neutral))}input[data-anta][type=checkbox][tone-selected]:not([tone-selected=""],[tone-selected=brand],[tone-selected=neutral],[tone-selected=info],[tone-selected=success],[tone-selected=warning],[tone-selected=critical]){--native-choice-tone-source: attr(tone-selected type(<color>), var(--anta-seed-neutral))}@media(hover:hover)and (pointer:fine){input[data-anta][type=checkbox]:not(:disabled):hover{border-color:var(--native-choice-border-hover)}input[data-anta][type=checkbox]:not(:disabled):hover:is(:checked,:indeterminate){background-color:var(--native-choice-selected-hover);border-color:var(--native-choice-selected-hover)}}input[data-anta][type=checkbox]:not(:disabled):active{border-color:var(--native-choice-border-active)}input[data-anta][type=checkbox]:not(:disabled):active:is(:checked,:indeterminate){background-color:var(--native-choice-selected-active);border-color:var(--native-choice-selected-active)}input[data-anta][type=checkbox]:is(:checked,:indeterminate){background-color:var(--native-choice-selected);border-color:var(--native-choice-selected)}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='%23f6f4f6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%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='%23f6f4f6' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E")}input[data-anta][type=checkbox]:focus-visible{outline:1px solid var(--focus-ring);outline-offset:1px}input[data-anta][type=checkbox]:disabled{border-color:color-mix(in oklch,var(--text-1) 10%,transparent);background-color:color-mix(in oklch,var(--text-1) 10%,transparent);cursor:not-allowed}input[data-anta][type=checkbox]:disabled:is(:checked,:indeterminate){background-color:color-mix(in oklch,var(--text-1) 10%,transparent)}.dark input[data-anta][type=checkbox]{--_native-choice-l-rest: .42;--_native-choice-l-hover: .45;--_native-choice-l-active: .5}.dark input[data-anta][type=checkbox][tone]:not([tone=""],[tone=neutral]),.dark input[data-anta][type=checkbox][tone-selected]:not([tone-selected=""],[tone-selected=neutral]){--_native-choice-l-rest: .45;--_native-choice-l-hover: .5;--_native-choice-l-active: .57}.dark input[data-anta][type=checkbox][tone]:not([tone=""],[tone=neutral]){--native-choice-bg: oklch(from var(--native-choice-tone-source) .15 calc(c*.18) h);--native-choice-border: var(--_native-choice-border-base);--native-choice-border-hover: oklch(from var(--_native-choice-border-base) calc(l + .1) c h);--native-choice-border-active: oklch(from var(--_native-choice-border-base) calc(l + .17) c h)}@media(forced-colors:active){a-checkbox:is(:state(checked),:state(indeterminate)):before{forced-color-adjust:none;background-color:Highlight;border-color:Highlight}a-checkbox:is(:state(checked),:state(indeterminate)):after{forced-color-adjust:none;background-color:HighlightText}a-checkbox:disabled:before{background-color:Canvas;border-color:GrayText}a-checkbox:disabled:is(:state(checked),:state(indeterminate)):after{background-color:GrayText}}}
+@layer anta{a-checkbox{--checkbox-gap: 8px;--checkbox-box-size: 16px;--checkbox-bg: var(--bg-1);--checkbox-tone-source: var(--anta-seed-neutral);--checkbox-off-tone-source: var(--anta-seed-neutral);--_tone-l-rest: .6;--_tone-l-hover: .45;--_tone-l-active: .4;--checkbox-bg-selected: oklch(from var(--checkbox-tone-source) var(--_tone-l-rest) c h);--checkbox-bg-selected-hover: oklch(from var(--checkbox-tone-source) var(--_tone-l-hover) c h);--checkbox-bg-selected-active: oklch(from var(--checkbox-tone-source) var(--_tone-l-active) c h);--checkbox-border-neutral: var(--border-3);--checkbox-border: var(--checkbox-border-neutral);--checkbox-border-hover: var(--border-2);--checkbox-border-active: var(--border-1);--checkbox-icon: #f6f4f6;--checkbox-icon-disabled: #c1b9c1;--checkbox-bg-disabled: color-mix(in oklch, #44374b 10%, transparent);--checkbox-border-disabled: color-mix(in oklch, #44374b 10%, transparent);--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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");--checkbox-label-color: var(--text-2);--checkbox-label-color-disabled: var(--text-4);--checkbox-hint-color: var(--text-3);--checkbox-label-fs: 15px;--checkbox-label-lh: 20px;--checkbox-hint-fs: 13px;--checkbox-hint-lh: 16px;display:inline-grid;grid-template-columns:auto 1fr;align-items:start;column-gap:var(--checkbox-gap);vertical-align:middle;cursor:pointer;user-select:none;-webkit-user-drag:none;outline:none;color:var(--checkbox-label-color);font-family:var(--sans-serif);font-size:var(--checkbox-label-fs);line-height:var(--checkbox-label-lh);font-feature-settings:"ss02","ss05","tnum";&:before{content:"";grid-column:1;grid-row:1 / -1;align-self:start;margin-block-start:calc((var(--checkbox-label-lh) - var(--checkbox-box-size)) / 2);box-sizing:border-box;inline-size:16px;block-size:16px;border-radius:4px;background:var(--checkbox-bg);border:1.5px solid var(--checkbox-border);transition:background-color .15s ease-out,border-color .15s ease-out}&[round]{--checkbox-round: attr(round type(<length>), 999px)}&[round]:before{border-radius:var(--checkbox-round, 999px)}&:after{content:"";grid-column:1;grid-row:1 / -1;align-self:start;margin-block-start:calc((var(--checkbox-label-lh) - var(--checkbox-box-size)) / 2);inline-size:16px;block-size:16px;background-color:transparent;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:var(--checkbox-mask-size);mask-size:var(--checkbox-mask-size)}@media(hover:hover)and (pointer:fine){&:not(:disabled):hover:before{border-color:var(--checkbox-border-hover);transition:background-color 75ms ease-in,border-color 75ms ease-in}&:not(:disabled):hover:is(:state(checked),:state(indeterminate)):before{background:var(--checkbox-bg-selected-hover);border-color:var(--checkbox-bg-selected-hover)}}&:not(:disabled):active:before{border-color:var(--checkbox-border-active);transition:background-color 50ms linear,border-color 50ms linear}&:not(:disabled):active:is(:state(checked),:state(indeterminate)):before{background:var(--checkbox-bg-selected-active);border-color:var(--checkbox-bg-selected-active)}&:is(:state(checked),:state(indeterminate)){&:before{background:var(--checkbox-bg-selected);border-color:var(--checkbox-bg-selected)}&:after{background-color:var(--checkbox-icon)}}&:state(checked):after{-webkit-mask-image:var(--checkbox-mask-check);mask-image:var(--checkbox-mask-check)}&:state(indeterminate):after{-webkit-mask-image:var(--checkbox-mask-indeterminate);mask-image:var(--checkbox-mask-indeterminate)}&:focus-visible{outline:none}&:focus-visible:before{outline:1px solid var(--focus-ring);outline-offset:1px}&:disabled{cursor:not-allowed;color:var(--checkbox-label-color-disabled);&:before{background:var(--checkbox-bg-disabled);border-color:var(--checkbox-border-disabled);transition:none}&:is(:state(checked),:state(indeterminate)):after{background-color:var(--checkbox-icon-disabled)}a-checkbox-hint{color:var(--checkbox-label-color-disabled)}}&[size=small]{--checkbox-gap: 6px;--checkbox-box-size: 14px;--checkbox-label-fs: 13px;--checkbox-label-lh: 16px;--checkbox-hint-fs: 12px;--checkbox-hint-lh: 14px;--checkbox-mask-size: 10px;&:before,&:after{inline-size:14px;block-size:14px}}&[size=large]{--checkbox-box-size: 18px;--checkbox-label-fs: 17px;--checkbox-label-lh: 22px;--checkbox-hint-fs: 15px;--checkbox-hint-lh: 19px;--checkbox-mask-size: 14px;&:before,&:after{inline-size:18px;block-size:18px}}}.dark a-checkbox{--checkbox-mask-size: 13px}.dark a-checkbox[size=small]{--checkbox-mask-size: 11px}.dark a-checkbox[size=large]{--checkbox-mask-size: 15px}a-checkbox-label,a-checkbox-hint{display:block;grid-column:2;min-width:0}a-checkbox-hint{color:var(--checkbox-hint-color);font-size:var(--checkbox-hint-fs);line-height:var(--checkbox-hint-lh);margin-block-start:2px}a-checkbox[tone]:not([tone=""],[tone=neutral]),a-checkbox[tone-selected]:not([tone-selected=""],[tone-selected=neutral]){--_tone-l-rest: .5;--_tone-l-hover: .45;--_tone-l-active: .4}a-checkbox[tone=brand]{--checkbox-tone-source: var(--anta-seed-brand);--checkbox-off-tone-source: var(--anta-seed-brand)}a-checkbox[tone=info]{--checkbox-tone-source: var(--anta-seed-info);--checkbox-off-tone-source: var(--anta-seed-info)}a-checkbox[tone=success]{--checkbox-tone-source: var(--anta-seed-success);--checkbox-off-tone-source: var(--anta-seed-success)}a-checkbox[tone=warning]{--checkbox-tone-source: var(--anta-seed-warning);--checkbox-off-tone-source: var(--anta-seed-warning)}a-checkbox[tone=critical]{--checkbox-tone-source: var(--anta-seed-critical);--checkbox-off-tone-source: var(--anta-seed-critical)}a-checkbox[tone=neutral]{--checkbox-tone-source: var(--anta-seed-neutral);--checkbox-off-tone-source: var(--anta-seed-neutral)}a-checkbox[tone]:not([tone=""],[tone=neutral]){--checkbox-bg: oklch(from var(--checkbox-off-tone-source) .99 calc(c*.03) h);--_checkbox-off-bg-selected: oklch(from var(--checkbox-off-tone-source) var(--_tone-l-rest) c h);--_checkbox-border-base: color-mix(in oklch, var(--_checkbox-off-bg-selected) 70%, var(--checkbox-border-neutral));--checkbox-border: oklch(from var(--_checkbox-border-base) calc(l + .17) c h);--checkbox-border-hover: oklch(from var(--_checkbox-border-base) calc(l + .1) c h);--checkbox-border-active: var(--_checkbox-border-base)}a-checkbox[tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]){--checkbox-tone-source: attr(tone type(<color>), transparent);--checkbox-off-tone-source: attr(tone type(<color>), transparent)}a-checkbox[tone-selected=brand]{--checkbox-tone-source: var(--anta-seed-brand)}a-checkbox[tone-selected=info]{--checkbox-tone-source: var(--anta-seed-info)}a-checkbox[tone-selected=success]{--checkbox-tone-source: var(--anta-seed-success)}a-checkbox[tone-selected=warning]{--checkbox-tone-source: var(--anta-seed-warning)}a-checkbox[tone-selected=critical]{--checkbox-tone-source: var(--anta-seed-critical)}a-checkbox[tone-selected=neutral]{--checkbox-tone-source: var(--anta-seed-neutral);--_tone-l-rest: .6;--_tone-l-hover: .45;--_tone-l-active: .4}a-checkbox[tone-selected]:not([tone-selected=""],[tone-selected=brand],[tone-selected=neutral],[tone-selected=info],[tone-selected=success],[tone-selected=warning],[tone-selected=critical]){--checkbox-tone-source: attr(tone-selected type(<color>), transparent)}.dark a-checkbox{--checkbox-border-neutral: var(--border-3);--checkbox-border-hover: var(--border-2);--checkbox-border-active: var(--border-1);--checkbox-icon: #ece9ec;--checkbox-icon-disabled: #534c57;--checkbox-bg-disabled: color-mix(in oklch, #e4d1ef 10%, transparent);--checkbox-border-disabled: color-mix(in oklch, #e4d1ef 10%, transparent);--_tone-l-rest: .42;--_tone-l-hover: .45;--_tone-l-active: .5}.dark a-checkbox[tone]:not([tone=""],[tone=neutral]),.dark a-checkbox[tone-selected]:not([tone-selected=""],[tone-selected=neutral]){--_tone-l-rest: .45;--_tone-l-hover: .5;--_tone-l-active: .57}.dark a-checkbox[tone]:not([tone=""],[tone=neutral]){--checkbox-bg: oklch(from var(--checkbox-off-tone-source) .15 calc(c*.18) h);--checkbox-border: var(--_checkbox-border-base);--checkbox-border-hover: oklch(from var(--_checkbox-border-base) calc(l + .1) c h);--checkbox-border-active: oklch(from var(--_checkbox-border-base) calc(l + .17) c h)}.dark a-checkbox[tone-selected=neutral]{--_tone-l-rest: .42;--_tone-l-hover: .45;--_tone-l-active: .5}label:has(>input[data-anta][type=checkbox]){display:inline-flex;align-items:center;gap:8px;color:var(--text-2);font-family:var(--sans-serif);font-feature-settings:"ss02","ss05","tnum";font-size:15px;line-height:20px}input[data-anta][type=checkbox]{--native-choice-size: 16px;--native-choice-mark-size: 12px;--native-choice-round: 4px;--native-choice-bg: var(--bg-1);--native-choice-border-neutral: var(--border-3);--native-choice-border: var(--native-choice-border-neutral);--native-choice-border-hover: var(--border-2);--native-choice-border-active: var(--border-1);--native-choice-tone-source: var(--anta-seed-neutral);--native-choice-off-tone-source: var(--anta-seed-neutral);--_native-choice-l-rest: .6;--_native-choice-l-hover: .45;--_native-choice-l-active: .4;--native-choice-selected: oklch(from var(--native-choice-tone-source) var(--_native-choice-l-rest) c h);--native-choice-selected-hover: oklch(from var(--native-choice-tone-source) var(--_native-choice-l-hover) c h);--native-choice-selected-active: oklch(from var(--native-choice-tone-source) var(--_native-choice-l-active) c h);box-sizing:border-box;flex:0 0 var(--native-choice-size);inline-size:var(--native-choice-size);block-size:var(--native-choice-size);margin:0;appearance:none;-webkit-appearance:none;border:1.5px solid var(--native-choice-border);border-radius:var(--native-choice-round);background-color:var(--native-choice-bg);background-repeat:no-repeat;background-position:center;background-size:var(--native-choice-mark-size);cursor:pointer;vertical-align:middle;transition:background-color .15s ease-out,border-color .15s ease-out}label:has(>input[data-anta][type=checkbox][size=small]){gap:6px;font-size:13px;line-height:16px}label:has(>input[data-anta][type=checkbox][size=large]){font-size:17px;line-height:22px}input[data-anta][type=checkbox][size=small]{--native-choice-size: 14px;--native-choice-mark-size: 10px}input[data-anta][type=checkbox][size=large]{--native-choice-size: 18px;--native-choice-mark-size: 14px}input[data-anta][type=checkbox][round]{--native-choice-round: attr(round type(<length>), 999px)}input[data-anta][type=checkbox][tone]:not([tone=""],[tone=neutral]),input[data-anta][type=checkbox][tone-selected]:not([tone-selected=""],[tone-selected=neutral]){--_native-choice-l-rest: .5;--_native-choice-l-hover: .45;--_native-choice-l-active: .4}input[data-anta][type=checkbox][tone=brand]{--native-choice-tone-source: var(--anta-seed-brand);--native-choice-off-tone-source: var(--anta-seed-brand)}input[data-anta][type=checkbox][tone=info]{--native-choice-tone-source: var(--anta-seed-info);--native-choice-off-tone-source: var(--anta-seed-info)}input[data-anta][type=checkbox][tone=success]{--native-choice-tone-source: var(--anta-seed-success);--native-choice-off-tone-source: var(--anta-seed-success)}input[data-anta][type=checkbox][tone=warning]{--native-choice-tone-source: var(--anta-seed-warning);--native-choice-off-tone-source: var(--anta-seed-warning)}input[data-anta][type=checkbox][tone=critical]{--native-choice-tone-source: var(--anta-seed-critical);--native-choice-off-tone-source: var(--anta-seed-critical)}input[data-anta][type=checkbox][tone=neutral]{--native-choice-tone-source: var(--anta-seed-neutral);--native-choice-off-tone-source: var(--anta-seed-neutral)}input[data-anta][type=checkbox][tone]:not([tone=""],[tone=neutral]){--native-choice-bg: oklch(from var(--native-choice-off-tone-source) .99 calc(c*.03) h);--_native-choice-off-selected: oklch(from var(--native-choice-off-tone-source) var(--_native-choice-l-rest) c h);--_native-choice-border-base: color-mix(in oklch, var(--_native-choice-off-selected) 70%, var(--native-choice-border-neutral));--native-choice-border: oklch(from var(--_native-choice-border-base) calc(l + .17) c h);--native-choice-border-hover: oklch(from var(--_native-choice-border-base) calc(l + .1) c h);--native-choice-border-active: var(--_native-choice-border-base)}input[data-anta][type=checkbox][tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]){--native-choice-tone-source: attr(tone type(<color>), var(--anta-seed-neutral));--native-choice-off-tone-source: attr(tone type(<color>), var(--anta-seed-neutral))}input[data-anta][type=checkbox][tone-selected=brand]{--native-choice-tone-source: var(--anta-seed-brand)}input[data-anta][type=checkbox][tone-selected=info]{--native-choice-tone-source: var(--anta-seed-info)}input[data-anta][type=checkbox][tone-selected=success]{--native-choice-tone-source: var(--anta-seed-success)}input[data-anta][type=checkbox][tone-selected=warning]{--native-choice-tone-source: var(--anta-seed-warning)}input[data-anta][type=checkbox][tone-selected=critical]{--native-choice-tone-source: var(--anta-seed-critical)}input[data-anta][type=checkbox][tone-selected=neutral]{--native-choice-tone-source: var(--anta-seed-neutral);--_native-choice-l-rest: .6;--_native-choice-l-hover: .45;--_native-choice-l-active: .4}input[data-anta][type=checkbox][tone-selected]:not([tone-selected=""],[tone-selected=brand],[tone-selected=neutral],[tone-selected=info],[tone-selected=success],[tone-selected=warning],[tone-selected=critical]){--native-choice-tone-source: attr(tone-selected type(<color>), var(--anta-seed-neutral))}@media(hover:hover)and (pointer:fine){input[data-anta][type=checkbox]:not(:disabled):hover{border-color:var(--native-choice-border-hover)}input[data-anta][type=checkbox]:not(:disabled):hover:is(:checked,:indeterminate){background-color:var(--native-choice-selected-hover);border-color:var(--native-choice-selected-hover)}}input[data-anta][type=checkbox]:not(:disabled):active{border-color:var(--native-choice-border-active)}input[data-anta][type=checkbox]:not(:disabled):active:is(:checked,:indeterminate){background-color:var(--native-choice-selected-active);border-color:var(--native-choice-selected-active)}input[data-anta][type=checkbox]:is(:checked,:indeterminate){background-color:var(--native-choice-selected);border-color:var(--native-choice-selected)}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='%23f6f4f6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%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='%23f6f4f6' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E")}input[data-anta][type=checkbox]:focus-visible{outline:1px solid var(--focus-ring);outline-offset:1px}input[data-anta][type=checkbox]:disabled{border-color:color-mix(in oklch,var(--text-1) 10%,transparent);background-color:color-mix(in oklch,var(--text-1) 10%,transparent);cursor:not-allowed}input[data-anta][type=checkbox]:disabled:is(:checked,:indeterminate){background-color:color-mix(in oklch,var(--text-1) 10%,transparent)}.dark input[data-anta][type=checkbox]{--_native-choice-l-rest: .42;--_native-choice-l-hover: .45;--_native-choice-l-active: .5}.dark input[data-anta][type=checkbox][tone]:not([tone=""],[tone=neutral]),.dark input[data-anta][type=checkbox][tone-selected]:not([tone-selected=""],[tone-selected=neutral]){--_native-choice-l-rest: .45;--_native-choice-l-hover: .5;--_native-choice-l-active: .57}.dark input[data-anta][type=checkbox][tone]:not([tone=""],[tone=neutral]){--native-choice-bg: oklch(from var(--native-choice-off-tone-source) .15 calc(c*.18) h);--native-choice-border: var(--_native-choice-border-base);--native-choice-border-hover: oklch(from var(--_native-choice-border-base) calc(l + .1) c h);--native-choice-border-active: oklch(from var(--_native-choice-border-base) calc(l + .17) c h)}.dark input[data-anta][type=checkbox][tone-selected=neutral]{--_native-choice-l-rest: .42;--_native-choice-l-hover: .45;--_native-choice-l-active: .5}@media(forced-colors:active){a-checkbox:is(:state(checked),:state(indeterminate)):before{forced-color-adjust:none;background-color:Highlight;border-color:Highlight}a-checkbox:is(:state(checked),:state(indeterminate)):after{forced-color-adjust:none;background-color:HighlightText}a-checkbox:disabled:before{background-color:Canvas;border-color:GrayText}a-checkbox:disabled:is(:state(checked),:state(indeterminate)):after{background-color:GrayText}}}

package/dist/elements/a-input-time.css

@@ -1 +1 @@
-@layer anta{a-input-time:not(:defined){display:grid;grid-template-columns:minmax(0,1fr);row-gap:4px}a-input-time:not(:defined)>[slot=leading],a-input-time:not(:defined)>[slot=trailing],a-input-time:not(:defined)>[slot=clear],a-input-time:not(:defined)>[slot=hint]{display:none!important}a-input-time:not(:defined)>[slot=label]{display:block;color:var(--input-time-label);font-family:var(--sans-serif);font-size:var(--input-time-font-size);line-height:var(--input-time-line-height);font-weight:500}a-input-time:not(:defined):after{content:"\2013\2013:\2013\2013";display:block;min-height:var(--input-time-field-height);line-height:var(--input-time-field-height);padding-inline:8px;border-radius:var(--input-time-field-radius);box-shadow:inset 0 0 0 .5px var(--input-time-border);color:var(--input-time-placeholder);font-family:var(--sans-serif);font-size:var(--input-time-font-size);font-weight:400;font-feature-settings:"ss02","ss05","tnum";font-variation-settings:"wdth" 100,"slnt" 0,"ital" 0;white-space:nowrap}@media(forced-colors:active){a-input-time:not(:defined):after{border:1px solid ButtonBorder}}a-input-time{transition:opacity .28s ease-out 40ms}a-input-time:not(:defined){opacity:.5}@media(prefers-reduced-motion:reduce){a-input-time{transition:none}}a-input-time{--input-time-bg: var(--bg-1);--input-time-border: var(--border-2);--input-time-border-hover: var(--border-1);--input-time-text: var(--text-1);--input-time-label: var(--text-3);--input-time-placeholder: var(--text-3);--input-time-adornment: var(--text-3);--input-time-hint: var(--text-3);--input-time-period-color: var(--text-3);--input-time-font-size: 15px;--input-time-line-height: 20px;--input-time-field-height: 28px;--input-time-field-radius: 4px;width:fit-content;max-width:100%}a-input-time:has(>[slot=label])::part(label){display:block}a-input-time:has(>[slot=leading])::part(leading){display:flex;align-items:center;flex-shrink:0;margin-inline-start:7px}a-input-time:has(>[slot=leading])::part(segments){padding-inline-start:4px}a-input-time:has(>[slot=trailing])::part(trailing){display:flex;align-items:center;gap:2px;flex-shrink:0;color:var(--input-time-adornment);font-size:var(--input-time-font-size)}a-input-time:has(>[slot=hint])::part(hint){display:flex}a-input-time[size=small]{--input-time-font-size: 13px;--input-time-line-height: 16px;--input-time-field-height: 24px}a-input-time[size=large]{--input-time-font-size: 17px;--input-time-line-height: 22px;--input-time-field-height: 32px}a-input-time[round]{--input-time-round: attr(round type(<length>), 999px);--input-time-field-radius: var(--input-time-round, 999px)}a-input-time[size=small] a-icon{--icon-size: 14px}a-input-time[size=large] a-icon{--icon-size: 18px}a-input-time[tone]:not([tone=""]){--input-time-tone-source: attr(tone type(<color>), var(--border-2));--input-time-border: oklch(from var(--input-time-tone-source) .7 calc(c*.8) h);--input-time-border-hover: oklch(from var(--input-time-tone-source) .6 c h);.dark &{--input-time-border: oklch(from var(--input-time-tone-source) .5 calc(c*.8) h);--input-time-border-hover: oklch(from var(--input-time-tone-source) .6 c h)}}a-input-time[status=critical]{--input-time-tone-source: var(--anta-seed-critical);--input-time-bg: var(--bg-2-critical);--input-time-hint: var(--text-2-critical)}a-input-time[status=warning]{--input-time-tone-source: var(--anta-seed-warning);--input-time-bg: var(--bg-2-warning);--input-time-hint: var(--text-2-warning)}a-input-time[status=success]{--input-time-tone-source: var(--anta-seed-success);--input-time-bg: var(--bg-2-success);--input-time-hint: var(--text-2-success)}a-input-time[status=info]{--input-time-tone-source: var(--anta-seed-info);--input-time-bg: var(--bg-2-info);--input-time-hint: var(--text-2-info)}a-input-time[status=brand]{--input-time-tone-source: var(--anta-seed-brand);--input-time-bg: var(--bg-2-brand);--input-time-hint: var(--text-2-brand)}a-input-time[status]{--input-time-border: oklch(from var(--input-time-tone-source) .58 c h);--input-time-border-hover: oklch(from var(--input-time-tone-source) .58 c h)}.dark a-input-time[status]{--input-time-border: oklch(from var(--input-time-tone-source) .52 c h);--input-time-border-hover: oklch(from var(--input-time-tone-source) .52 c h)}a-input-time:disabled{--input-time-bg: #44374b12;--input-time-border: #44374b26;--input-time-border-hover: #44374b26;--input-time-text: var(--text-4);--input-time-label: var(--text-4);--input-time-hint: var(--text-5);cursor:not-allowed}.dark a-input-time:disabled{--input-time-bg: #e4d1ef0d;--input-time-border: #e4d1ef1f;--input-time-border-hover: #e4d1ef1f}}
+@layer anta{a-input-time:not(:defined){display:grid;grid-template-columns:minmax(0,1fr);row-gap:4px}a-input-time:not(:defined)>[slot=leading],a-input-time:not(:defined)>[slot=trailing],a-input-time:not(:defined)>[slot=clear],a-input-time:not(:defined)>[slot=hint]{display:none!important}a-input-time:not(:defined)>[slot=label]{display:block;color:var(--input-time-label);font-family:var(--sans-serif);font-size:var(--input-time-font-size);line-height:var(--input-time-line-height);font-weight:500}a-input-time:not(:defined):after{content:"\2013\2013:\2013\2013";display:block;min-height:var(--input-time-field-height);line-height:var(--input-time-field-height);padding-inline:8px;border-radius:var(--input-time-field-radius);box-shadow:inset 0 0 0 .5px var(--input-time-border);color:var(--input-time-placeholder);font-family:var(--sans-serif);font-size:var(--input-time-font-size);font-weight:400;font-feature-settings:"ss02","ss05","tnum";font-variation-settings:"wdth" 100,"slnt" 0,"ital" 0;white-space:nowrap}@media(forced-colors:active){a-input-time:not(:defined):after{border:1px solid ButtonBorder}}a-input-time{transition:opacity .28s ease-out 40ms}a-input-time:not(:defined){opacity:.5}@media(prefers-reduced-motion:reduce){a-input-time{transition:none}}a-input-time{--input-time-bg: var(--bg-1);--input-time-border: var(--border-2);--input-time-border-hover: var(--border-1);--input-time-text: var(--text-1);--input-time-label: var(--text-3);--input-time-placeholder: var(--text-3);--input-time-adornment: var(--text-3);--input-time-hint: var(--text-3);--input-time-period-color: var(--text-3);--input-time-font-size: 15px;--input-time-line-height: 20px;--input-time-field-height: 28px;--input-time-field-radius: 4px;width:fit-content;max-width:100%}a-input-time:has(>[slot=label])::part(label){display:block}a-input-time:has(>[slot=leading])::part(leading){display:flex;align-items:center;flex-shrink:0;margin-inline-start:7px}a-input-time:has(>[slot=leading])::part(segments){padding-inline-start:4px}a-input-time:has(>[slot=trailing])::part(trailing){display:flex;align-items:center;gap:2px;flex-shrink:0;color:var(--input-time-adornment);font-size:var(--input-time-font-size)}a-input-time:has(>[slot=hint])::part(hint){display:flex}a-input-time[size=small]{--input-time-font-size: 13px;--input-time-line-height: 16px;--input-time-field-height: 24px}a-input-time[size=large]{--input-time-font-size: 17px;--input-time-line-height: 22px;--input-time-field-height: 32px}a-input-time[round]{--input-time-round: attr(round type(<length>), 999px);--input-time-field-radius: var(--input-time-round, 999px)}a-input-time[size=small] a-icon{--icon-size: 14px}a-input-time[size=large] a-icon{--icon-size: 18px}a-input-time[tone]:not([tone=""]){--input-time-tone-source: attr(tone type(<color>), var(--border-2));--input-time-border: oklch(from var(--input-time-tone-source) .7 calc(c*.8) h);--input-time-border-hover: oklch(from var(--input-time-tone-source) .6 c h);.dark &{--input-time-border: oklch(from var(--input-time-tone-source) .5 calc(c*.8) h);--input-time-border-hover: oklch(from var(--input-time-tone-source) .6 c h)}}a-input-time[status=critical]{--input-time-tone-source: var(--anta-seed-critical);--input-time-bg: var(--bg-2-critical);--input-time-hint: var(--text-2-critical)}a-input-time[status=warning]{--input-time-tone-source: var(--anta-seed-warning);--input-time-bg: var(--bg-2-warning);--input-time-hint: var(--text-2-warning)}a-input-time[status=success]{--input-time-tone-source: var(--anta-seed-success);--input-time-bg: var(--bg-2-success);--input-time-hint: var(--text-2-success)}a-input-time[status=info]{--input-time-tone-source: var(--anta-seed-info);--input-time-bg: var(--bg-2-info);--input-time-hint: var(--text-2-info)}a-input-time[status=brand]{--input-time-tone-source: var(--anta-seed-brand);--input-time-bg: var(--bg-2-brand);--input-time-hint: var(--text-2-brand)}a-input-time[status]:not([status=neutral]){--input-time-border: oklch(from var(--input-time-tone-source) .58 c h);--input-time-border-hover: oklch(from var(--input-time-tone-source) .58 c h)}.dark a-input-time[status]:not([status=neutral]){--input-time-border: oklch(from var(--input-time-tone-source) .52 c h);--input-time-border-hover: oklch(from var(--input-time-tone-source) .52 c h)}a-input-time:disabled{--input-time-bg: #44374b12;--input-time-border: #44374b26;--input-time-border-hover: #44374b26;--input-time-text: var(--text-4);--input-time-label: var(--text-4);--input-time-hint: var(--text-5);cursor:not-allowed}.dark a-input-time:disabled{--input-time-bg: #e4d1ef0d;--input-time-border: #e4d1ef1f;--input-time-border-hover: #e4d1ef1f}}

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

@@ -39,7 +39,7 @@ const SHADOW_STYLE = `
     box-shadow: inset 0 0 0 var(--_bw) var(--_bc);
     transition: box-shadow 120ms ease;
   }
-  :host([status]) .field { --_bw: 1px; }
+  :host([status]:not([status="neutral"])) .field { --_bw: 1px; }
 
   @media (hover: hover) and (pointer: fine) {
     :host(:not(:disabled)) .field:hover {

package/dist/elements/a-input.css

@@ -1 +1 @@
-@layer anta{a-input:not(:defined){display:grid;grid-template-columns:minmax(0,1fr);row-gap:4px}a-input:not(:defined)>[slot=leading],a-input:not(:defined)>[slot=trailing],a-input:not(:defined)>[slot=clear],a-input:not(:defined)>[slot=hint]{display:none!important}a-input:not(:defined)>[slot=label]{display:block;color:var(--input-label);font-family:var(--sans-serif);font-size:15px;line-height:20px;font-weight:500}a-input[size=small]:not(:defined)>[slot=label]{font-size:13px;line-height:16px}a-input[size=large]:not(:defined)>[slot=label]{font-size:17px;line-height:22px}a-input:not(:defined):after{content:attr(placeholder);display:block;min-height:28px;line-height:28px;padding-inline:7px;border-radius:4px;box-shadow:inset 0 0 0 .5px var(--input-border);color:var(--input-placeholder);font-family:var(--sans-serif);font-size:15px;font-weight:400;font-feature-settings:"ss02","ss05","tnum";font-variation-settings:"wdth" 100,"slnt" 0,"ital" 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}a-input[value]:not([value=""]):not([type=password]):not(:defined):after{content:attr(value);color:var(--input-text)}a-input[size=small]:not(:defined):after{min-height:24px;line-height:24px;font-size:13px}a-input[size=large]:not(:defined):after{min-height:32px;line-height:32px;font-size:17px}@media(forced-colors:active){a-input:not(:defined):after{border:1px solid ButtonBorder}}a-input[round]:not(:defined):after{border-radius:var(--input-round, 999px)}a-input{transition:opacity .28s ease-out 40ms}a-input:not(:defined){opacity:.5}@media(prefers-reduced-motion:reduce){a-input{transition:none}}a-input{--input-bg: var(--bg-1);--input-border: var(--border-2);--input-text: var(--text-1);--input-label: var(--text-3);--input-placeholder: var(--text-4);--input-adornment: var(--text-3);--input-hint: var(--text-3);--input-trailing-inset: 7px;width:100%}a-input:has(>[slot=label])::part(label){display:block}a-input:has(>[slot=leading])::part(leading),a-input:has(>[slot=trailing])::part(trailing){display:flex;align-items:center;flex-shrink:0}a-input:has(>[slot=leading])::part(leading){margin-inline-start:7px}a-input:has(>[slot=trailing])::part(trailing){gap:2px;margin-inline-end:var(--input-trailing-inset, 7px)}a-input:has(>[slot=leading])::part(input){padding-inline-start:5px}a-input[truncate]:not([multiline])::part(input){text-overflow:ellipsis}a-input:has(>[slot=hint])::part(hint){display:flex}a-input[multiline]:has(>[slot=leading])::part(leading),a-input[multiline]:has(>[slot=trailing])::part(trailing){align-self:flex-start;height:calc(var(--_lh) + var(--_pad-block) * 2)}a-input:has([slot=trailing] :is(a-button,button)),a-input:has([slot=trailing]:is(a-button,button)){--input-trailing-inset: 0}a-input[round]{--input-round: attr(round type(<length>), 999px)}a-input[tone]:not([tone=""]):not([status]){--input-tone-source: attr(tone type(<color>), var(--border-2));--input-border: oklch(from var(--input-tone-source) .7 calc(c*.8) h);.dark &{--input-border: oklch(from var(--input-tone-source) .5 calc(c*.8) h)}}a-input[status=critical]{--input-status-source: var(--anta-seed-critical);--input-bg: var(--bg-2-critical);--input-hint: var(--text-2-critical)}a-input[status=warning]{--input-status-source: var(--anta-seed-warning);--input-bg: var(--bg-2-warning);--input-hint: var(--text-2-warning)}a-input[status=success]{--input-status-source: var(--anta-seed-success);--input-bg: var(--bg-2-success);--input-hint: var(--text-2-success)}a-input[status=info]{--input-status-source: var(--anta-seed-info);--input-bg: var(--bg-2-info);--input-hint: var(--text-2-info)}a-input[status=brand]{--input-status-source: var(--anta-seed-brand);--input-bg: var(--bg-2-brand);--input-hint: var(--text-2-brand)}a-input[status]{--input-border: oklch(from var(--input-status-source) .58 c h)}.dark a-input[status]{--input-border: oklch(from var(--input-status-source) .52 c h)}a-input:disabled{--input-bg: #44374b12;--input-border: #44374b26;--input-text: var(--text-4);--input-label: var(--text-4);--input-hint: var(--text-5);cursor:not-allowed}a-input[status]:disabled{--input-bg: #44374b12;--input-border: #44374b26;--input-hint: var(--text-5)}.dark a-input:disabled{--input-bg: #e4d1ef0d;--input-border: #e4d1ef1f}.dark a-input[status]:disabled{--input-bg: #e4d1ef0d;--input-border: #e4d1ef1f;--input-hint: var(--text-5)}a-input[size=small] a-icon{--icon-size: 14px}a-input[size=large] a-icon{--icon-size: 18px}a-input [slot=hint]>a-icon{margin-block-start:1px}a-input[size=small] [slot=hint]>a-icon{margin-block-start:.5px}a-input[size=large] [slot=hint]>a-icon{margin-block-start:1.5px}input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week]){--native-field-block-size: 28px;--native-field-padding-block: 4px;--native-field-font-size: 15px;--native-field-line-height: 20px;--native-field-round: 4px;--native-field-border: var(--border-2);box-sizing:border-box;block-size:var(--native-field-block-size);margin:0;padding-block:var(--native-field-padding-block);padding-inline:7px;border:0;border-radius:var(--native-field-round);outline:0;background:var(--bg-1);box-shadow:inset 0 0 0 .5px var(--native-field-border);color:var(--text-1);caret-color:currentColor;color-scheme:light;font-family:var(--sans-serif);font-size:var(--native-field-font-size);font-weight:400;font-feature-settings:"ss02","ss05","tnum";font-variation-settings:"wdth" 100,"slnt" 0,"ital" 0;line-height:var(--native-field-line-height);transition:box-shadow .12s ease}input[data-anta][list]::-webkit-calendar-picker-indicator{opacity:0!important;pointer-events:none!important}.dark input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week]){color-scheme:dark}@media(hover:hover)and (pointer:fine){input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week]):not(:disabled):hover{box-shadow:inset 0 0 0 1px var(--native-field-border)}}input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week]):focus{box-shadow:inset 0 0 0 1px var(--native-field-border);outline:1px solid var(--focus-ring);outline-offset:1px}input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week]):disabled{background:color-mix(in oklch,var(--text-1) 4%,var(--bg-1));box-shadow:inset 0 0 0 .5px color-mix(in oklch,var(--text-1) 15%,transparent);color:var(--text-4);cursor:not-allowed}input[data-anta][type=number]{appearance:textfield;-moz-appearance:textfield}input[data-anta][type=number]::-webkit-inner-spin-button,input[data-anta][type=number]::-webkit-outer-spin-button{appearance:none;margin:0}input[data-anta][type=file]{--native-file-block-size: 28px;--native-file-padding-block: 4px;--native-file-font-size: 15px;--native-file-line-height: 20px;box-sizing:border-box;min-block-size:var(--native-file-block-size);margin:0;padding:0;border:0;color:var(--text-2);color-scheme:light;font-family:var(--sans-serif);font-size:var(--native-file-font-size);font-weight:400;font-feature-settings:"ss02","ss05","tnum";font-variation-settings:"wdth" 100,"slnt" 0,"ital" 0;line-height:var(--native-file-line-height)}.dark input[data-anta][type=file]{color-scheme:dark}input[data-anta][type=file]::file-selector-button{box-sizing:border-box;min-block-size:var(--native-file-block-size);margin:0 8px 0 0;padding:var(--native-file-padding-block) 9px;border:0;border-radius:4px;color:var(--text-2);background:color-mix(in oklch,var(--text-1) 10%,transparent);box-shadow:inset 0 0 1px color-mix(in oklch,currentColor,transparent 90%);font:inherit;font-weight:450;letter-spacing:.05ch;line-height:var(--native-file-line-height);cursor:pointer;transition:color .15s ease-out,background-color .15s ease-out}@media(hover:hover)and (pointer:fine){input[data-anta][type=file]:not(:disabled):hover::file-selector-button{color:var(--text-1);background:color-mix(in oklch,var(--text-1) 15%,transparent)}}input[data-anta][type=file]:not(:disabled):active::file-selector-button{color:var(--text-1);background:color-mix(in oklch,var(--text-1) 20%,transparent)}input[data-anta][type=file]:focus-visible{outline:1px solid var(--focus-ring);outline-offset:1px}input[data-anta][type=file]:disabled{color:var(--text-4);cursor:not-allowed}input[data-anta][type=file]:disabled::file-selector-button{color:var(--text-4);background:color-mix(in oklch,var(--text-1) 4%,var(--bg-1));cursor:not-allowed}select[data-anta]{--native-field-block-size: 28px;--native-field-padding-block: 4px;--native-field-font-size: 15px;--native-field-line-height: 20px;--native-field-round: 4px;--native-field-border: var(--border-2);--native-select-picker-bg: color-mix(in oklch, var(--bg-1) 90%, transparent);--native-select-picker-radius: var(--radius-md, 8px);--native-select-picker-border: 1px solid var(--border-3);--native-select-picker-shadow: 0 2px 6px color-mix(in oklch, var(--text-1) 8%, transparent), 0 8px 24px color-mix(in oklch, var(--text-1) 10%, transparent);--native-select-option-color: var(--text-2);--native-select-option-hover: 5%;--native-select-option-active: 8%;--native-select-option-selected: 8%;--native-select-option-padding-x: 8px;--native-select-option-padding-y: 6px;box-sizing:border-box;block-size:var(--native-field-block-size);margin:0;padding-block:var(--native-field-padding-block);padding-inline:7px;border:0;border-radius:var(--native-field-round);outline:0;background:var(--bg-1);box-shadow:inset 0 0 0 .5px var(--native-field-border);color:var(--text-1);color-scheme:light;font-family:var(--sans-serif);font-size:var(--native-field-font-size);font-weight:400;font-feature-settings:"ss02","ss05","tnum";font-variation-settings:"wdth" 100,"slnt" 0,"ital" 0;line-height:var(--native-field-line-height);transition:box-shadow .12s ease}.dark select[data-anta]{--native-select-picker-bg: color-mix(in oklch, var(--bg-1) 78%, transparent);--native-select-picker-shadow: 0 2px 8px color-mix(in oklch, black 50%, transparent), 0 12px 32px color-mix(in oklch, black 40%, transparent), inset 0 0 0 1px color-mix(in oklch, white 8%, transparent);color-scheme:dark}@media(hover:hover)and (pointer:fine){select[data-anta]:not(:disabled):hover{box-shadow:inset 0 0 0 1px var(--native-field-border)}}select[data-anta]:focus{box-shadow:inset 0 0 0 1px var(--native-field-border);outline:1px solid var(--focus-ring);outline-offset:1px}select[data-anta]:disabled{background:color-mix(in oklch,var(--text-1) 4%,var(--bg-1));box-shadow:inset 0 0 0 .5px color-mix(in oklch,var(--text-1) 15%,transparent);color:var(--text-4);cursor:not-allowed}@media(forced-colors:active){input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week]),select[data-anta]{border:1px solid ButtonBorder}}input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week])[data-anta-size=small],select[data-anta][data-anta-size=small]{--native-field-block-size: 24px;--native-field-padding-block: 2px;--native-field-font-size: 13px;--native-field-line-height: 16px}input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week])[data-anta-size=large],select[data-anta][data-anta-size=large]{--native-field-block-size: 32px;--native-field-padding-block: 5px;--native-field-font-size: 17px;--native-field-line-height: 22px}input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week])[round],select[data-anta][round]{--native-field-round: attr(round type(<length>), 999px)}input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week])[tone]:not([tone=""]){--native-field-tone: attr(tone type(<color>), var(--border-2));--native-field-border: oklch(from var(--native-field-tone) .7 calc(c*.8) h)}.dark input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week])[tone]:not([tone=""]){--native-field-border: oklch(from var(--native-field-tone) .5 calc(c*.8) h)}@supports (appearance: base-select){select[data-anta],select[data-anta]::picker(select){appearance:base-select;-webkit-appearance:base-select}select[data-anta]{padding:0}select[data-anta]>button{box-sizing:border-box;display:flex;align-items:center;gap:4px;inline-size:100%;min-block-size:var(--native-field-block-size);padding-block:var(--native-field-padding-block);padding-inline:7px;border:0;background:transparent;color:inherit;cursor:pointer;font:inherit;text-align:start}select[data-anta]>button>selectedcontent{flex:1;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}select[data-anta]::picker-icon{display:none}select[data-anta]>button>a-icon{margin-inline-start:auto;color:var(--text-3);transition:transform .12s ease}select[data-anta]:open>button>a-icon{transform:rotate(180deg)}select[data-anta]::picker(select){box-sizing:border-box;display:flex;flex-direction:column;gap:1px;margin-block-start:4px;padding:4px;border:var(--native-select-picker-border);border-radius:var(--native-select-picker-radius);background:var(--native-select-picker-bg);box-shadow:var(--native-select-picker-shadow);color:var(--native-select-option-color);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}select[data-anta] option{box-sizing:border-box;min-block-size:28px;padding-block:var(--native-select-option-padding-y);padding-inline:var(--native-select-option-padding-x);border-radius:var(--radius-sm, 4px);background:transparent;color:var(--native-select-option-color);cursor:pointer;font-family:var(--sans-serif);font-feature-settings:"ss02","ss05","tnum";font-size:14px;font-weight:400;font-variation-settings:"wdth" 100,"slnt" 0,"ital" 0;letter-spacing:normal;line-height:16px;text-transform:none;transition:background-color .28s ease-out}select[data-anta] option:is(:hover,:focus-visible){background:color-mix(in oklch,currentColor var(--native-select-option-hover),transparent);transition:background-color 60ms ease-in-out}select[data-anta] option:focus-visible{outline:1px solid var(--focus-ring);outline-offset:1px}select[data-anta] option:active{background:color-mix(in oklch,currentColor var(--native-select-option-active),transparent);transition:none}select[data-anta] option:checked{background:color-mix(in oklch,currentColor var(--native-select-option-selected),transparent);transition:background-color .28s ease-out}select[data-anta] option:disabled{color:var(--text-5);cursor:default}select[data-anta] optgroup{display:flex;flex-direction:column;gap:1px;color:var(--text-5);font-family:var(--sans-serif);font-size:.75em;font-weight:600;letter-spacing:.06em;text-transform:uppercase}}}
+@layer anta{a-input:not(:defined){display:grid;grid-template-columns:minmax(0,1fr);row-gap:4px}a-input:not(:defined)>[slot=leading],a-input:not(:defined)>[slot=trailing],a-input:not(:defined)>[slot=clear],a-input:not(:defined)>[slot=hint]{display:none!important}a-input:not(:defined)>[slot=label]{display:block;color:var(--input-label);font-family:var(--sans-serif);font-size:15px;line-height:20px;font-weight:500}a-input[size=small]:not(:defined)>[slot=label]{font-size:13px;line-height:16px}a-input[size=large]:not(:defined)>[slot=label]{font-size:17px;line-height:22px}a-input:not(:defined):after{content:attr(placeholder);display:block;min-height:28px;line-height:28px;padding-inline:7px;border-radius:4px;box-shadow:inset 0 0 0 .5px var(--input-border);color:var(--input-placeholder);font-family:var(--sans-serif);font-size:15px;font-weight:400;font-feature-settings:"ss02","ss05","tnum";font-variation-settings:"wdth" 100,"slnt" 0,"ital" 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}a-input[value]:not([value=""]):not([type=password]):not(:defined):after{content:attr(value);color:var(--input-text)}a-input[size=small]:not(:defined):after{min-height:24px;line-height:24px;font-size:13px}a-input[size=large]:not(:defined):after{min-height:32px;line-height:32px;font-size:17px}@media(forced-colors:active){a-input:not(:defined):after{border:1px solid ButtonBorder}}a-input[round]:not(:defined):after{border-radius:var(--input-round, 999px)}a-input{transition:opacity .28s ease-out 40ms}a-input:not(:defined){opacity:.5}@media(prefers-reduced-motion:reduce){a-input{transition:none}}a-input{--input-bg: var(--bg-1);--input-border: var(--border-2);--input-text: var(--text-1);--input-label: var(--text-3);--input-placeholder: var(--text-4);--input-adornment: var(--text-3);--input-hint: var(--text-3);--input-trailing-inset: 7px;width:100%}a-input:has(>[slot=label])::part(label){display:block}a-input:has(>[slot=leading])::part(leading),a-input:has(>[slot=trailing])::part(trailing){display:flex;align-items:center;flex-shrink:0}a-input:has(>[slot=leading])::part(leading){margin-inline-start:7px}a-input:has(>[slot=trailing])::part(trailing){gap:2px;margin-inline-end:var(--input-trailing-inset, 7px)}a-input:has(>[slot=leading])::part(input){padding-inline-start:5px}a-input[truncate]:not([multiline])::part(input){text-overflow:ellipsis}a-input:has(>[slot=hint])::part(hint){display:flex}a-input[multiline]:has(>[slot=leading])::part(leading),a-input[multiline]:has(>[slot=trailing])::part(trailing){align-self:flex-start;height:calc(var(--_lh) + var(--_pad-block) * 2)}a-input:has([slot=trailing] :is(a-button,button)),a-input:has([slot=trailing]:is(a-button,button)){--input-trailing-inset: 0}a-input[round]{--input-round: attr(round type(<length>), 999px)}a-input[tone]:not([tone=""]):not([status]){--input-tone-source: attr(tone type(<color>), var(--border-2));--input-border: oklch(from var(--input-tone-source) .7 calc(c*.8) h);.dark &{--input-border: oklch(from var(--input-tone-source) .5 calc(c*.8) h)}}a-input[status=critical]{--input-status-source: var(--anta-seed-critical);--input-bg: var(--bg-2-critical);--input-hint: var(--text-2-critical)}a-input[status=warning]{--input-status-source: var(--anta-seed-warning);--input-bg: var(--bg-2-warning);--input-hint: var(--text-2-warning)}a-input[status=success]{--input-status-source: var(--anta-seed-success);--input-bg: var(--bg-2-success);--input-hint: var(--text-2-success)}a-input[status=info]{--input-status-source: var(--anta-seed-info);--input-bg: var(--bg-2-info);--input-hint: var(--text-2-info)}a-input[status=brand]{--input-status-source: var(--anta-seed-brand);--input-bg: var(--bg-2-brand);--input-hint: var(--text-2-brand)}a-input[status]:not([status=neutral]){--input-border: oklch(from var(--input-status-source) .58 c h)}.dark a-input[status]:not([status=neutral]){--input-border: oklch(from var(--input-status-source) .52 c h)}a-input:disabled{--input-bg: #44374b12;--input-border: #44374b26;--input-text: var(--text-4);--input-label: var(--text-4);--input-hint: var(--text-5);cursor:not-allowed}a-input[status]:disabled{--input-bg: #44374b12;--input-border: #44374b26;--input-hint: var(--text-5)}.dark a-input:disabled{--input-bg: #e4d1ef0d;--input-border: #e4d1ef1f}.dark a-input[status]:disabled{--input-bg: #e4d1ef0d;--input-border: #e4d1ef1f;--input-hint: var(--text-5)}a-input[size=small] a-icon{--icon-size: 14px}a-input[size=large] a-icon{--icon-size: 18px}a-input [slot=hint]>a-icon{margin-block-start:1px}a-input[size=small] [slot=hint]>a-icon{margin-block-start:.5px}a-input[size=large] [slot=hint]>a-icon{margin-block-start:1.5px}input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week]){--native-field-block-size: 28px;--native-field-padding-block: 4px;--native-field-font-size: 15px;--native-field-line-height: 20px;--native-field-round: 4px;--native-field-border: var(--border-2);box-sizing:border-box;block-size:var(--native-field-block-size);margin:0;padding-block:var(--native-field-padding-block);padding-inline:7px;border:0;border-radius:var(--native-field-round);outline:0;background:var(--bg-1);box-shadow:inset 0 0 0 .5px var(--native-field-border);color:var(--text-1);caret-color:currentColor;color-scheme:light;font-family:var(--sans-serif);font-size:var(--native-field-font-size);font-weight:400;font-feature-settings:"ss02","ss05","tnum";font-variation-settings:"wdth" 100,"slnt" 0,"ital" 0;line-height:var(--native-field-line-height);transition:box-shadow .12s ease}input[data-anta][list]::-webkit-calendar-picker-indicator{opacity:0!important;pointer-events:none!important}.dark input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week]){color-scheme:dark}@media(hover:hover)and (pointer:fine){input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week]):not(:disabled):hover{box-shadow:inset 0 0 0 1px var(--native-field-border)}}input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week]):focus{box-shadow:inset 0 0 0 1px var(--native-field-border);outline:1px solid var(--focus-ring);outline-offset:1px}input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week]):disabled{background:color-mix(in oklch,var(--text-1) 4%,var(--bg-1));box-shadow:inset 0 0 0 .5px color-mix(in oklch,var(--text-1) 15%,transparent);color:var(--text-4);cursor:not-allowed}input[data-anta][type=number]{appearance:textfield;-moz-appearance:textfield}input[data-anta][type=number]::-webkit-inner-spin-button,input[data-anta][type=number]::-webkit-outer-spin-button{appearance:none;margin:0}input[data-anta][type=file]{--native-file-block-size: 28px;--native-file-padding-block: 4px;--native-file-font-size: 15px;--native-file-line-height: 20px;box-sizing:border-box;min-block-size:var(--native-file-block-size);margin:0;padding:0;border:0;color:var(--text-2);color-scheme:light;font-family:var(--sans-serif);font-size:var(--native-file-font-size);font-weight:400;font-feature-settings:"ss02","ss05","tnum";font-variation-settings:"wdth" 100,"slnt" 0,"ital" 0;line-height:var(--native-file-line-height)}.dark input[data-anta][type=file]{color-scheme:dark}input[data-anta][type=file]::file-selector-button{box-sizing:border-box;min-block-size:var(--native-file-block-size);margin:0 8px 0 0;padding:var(--native-file-padding-block) 9px;border:0;border-radius:4px;color:var(--text-2);background:color-mix(in oklch,var(--text-1) 10%,transparent);box-shadow:inset 0 0 1px color-mix(in oklch,currentColor,transparent 90%);font:inherit;font-weight:450;letter-spacing:.05ch;line-height:var(--native-file-line-height);cursor:pointer;transition:color .15s ease-out,background-color .15s ease-out}@media(hover:hover)and (pointer:fine){input[data-anta][type=file]:not(:disabled):hover::file-selector-button{color:var(--text-1);background:color-mix(in oklch,var(--text-1) 15%,transparent)}}input[data-anta][type=file]:not(:disabled):active::file-selector-button{color:var(--text-1);background:color-mix(in oklch,var(--text-1) 20%,transparent)}input[data-anta][type=file]:focus-visible{outline:1px solid var(--focus-ring);outline-offset:1px}input[data-anta][type=file]:disabled{color:var(--text-4);cursor:not-allowed}input[data-anta][type=file]:disabled::file-selector-button{color:var(--text-4);background:color-mix(in oklch,var(--text-1) 4%,var(--bg-1));cursor:not-allowed}select[data-anta]{--native-field-block-size: 28px;--native-field-padding-block: 4px;--native-field-font-size: 15px;--native-field-line-height: 20px;--native-field-round: 4px;--native-field-border: var(--border-2);--native-select-picker-bg: color-mix(in oklch, var(--bg-1) 90%, transparent);--native-select-picker-radius: var(--radius-md, 8px);--native-select-picker-border: 1px solid var(--border-3);--native-select-picker-shadow: 0 2px 6px color-mix(in oklch, var(--text-1) 8%, transparent), 0 8px 24px color-mix(in oklch, var(--text-1) 10%, transparent);--native-select-option-color: var(--text-2);--native-select-option-hover: 5%;--native-select-option-active: 8%;--native-select-option-selected: 8%;--native-select-option-padding-x: 8px;--native-select-option-padding-y: 6px;box-sizing:border-box;block-size:var(--native-field-block-size);margin:0;padding-block:var(--native-field-padding-block);padding-inline:7px;border:0;border-radius:var(--native-field-round);outline:0;background:var(--bg-1);box-shadow:inset 0 0 0 .5px var(--native-field-border);color:var(--text-1);color-scheme:light;font-family:var(--sans-serif);font-size:var(--native-field-font-size);font-weight:400;font-feature-settings:"ss02","ss05","tnum";font-variation-settings:"wdth" 100,"slnt" 0,"ital" 0;line-height:var(--native-field-line-height);transition:box-shadow .12s ease}.dark select[data-anta]{--native-select-picker-bg: color-mix(in oklch, var(--bg-1) 78%, transparent);--native-select-picker-shadow: 0 2px 8px color-mix(in oklch, black 50%, transparent), 0 12px 32px color-mix(in oklch, black 40%, transparent), inset 0 0 0 1px color-mix(in oklch, white 8%, transparent);color-scheme:dark}@media(hover:hover)and (pointer:fine){select[data-anta]:not(:disabled):hover{box-shadow:inset 0 0 0 1px var(--native-field-border)}}select[data-anta]:focus{box-shadow:inset 0 0 0 1px var(--native-field-border);outline:1px solid var(--focus-ring);outline-offset:1px}select[data-anta]:disabled{background:color-mix(in oklch,var(--text-1) 4%,var(--bg-1));box-shadow:inset 0 0 0 .5px color-mix(in oklch,var(--text-1) 15%,transparent);color:var(--text-4);cursor:not-allowed}@media(forced-colors:active){input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week]),select[data-anta]{border:1px solid ButtonBorder}}input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week])[data-anta-size=small],select[data-anta][data-anta-size=small]{--native-field-block-size: 24px;--native-field-padding-block: 2px;--native-field-font-size: 13px;--native-field-line-height: 16px}input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week])[data-anta-size=large],select[data-anta][data-anta-size=large]{--native-field-block-size: 32px;--native-field-padding-block: 5px;--native-field-font-size: 17px;--native-field-line-height: 22px}input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week])[round],select[data-anta][round]{--native-field-round: attr(round type(<length>), 999px)}input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week])[tone]:not([tone=""]){--native-field-tone: attr(tone type(<color>), var(--border-2));--native-field-border: oklch(from var(--native-field-tone) .7 calc(c*.8) h)}.dark input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week])[tone]:not([tone=""]){--native-field-border: oklch(from var(--native-field-tone) .5 calc(c*.8) h)}@supports (appearance: base-select){select[data-anta],select[data-anta]::picker(select){appearance:base-select;-webkit-appearance:base-select}select[data-anta]{padding:0}select[data-anta]>button{box-sizing:border-box;display:flex;align-items:center;gap:4px;inline-size:100%;min-block-size:var(--native-field-block-size);padding-block:var(--native-field-padding-block);padding-inline:7px;border:0;background:transparent;color:inherit;cursor:pointer;font:inherit;text-align:start}select[data-anta]>button>selectedcontent{flex:1;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}select[data-anta]::picker-icon{display:none}select[data-anta]>button>a-icon{margin-inline-start:auto;color:var(--text-3);transition:transform .12s ease}select[data-anta]:open>button>a-icon{transform:rotate(180deg)}select[data-anta]::picker(select){box-sizing:border-box;display:flex;flex-direction:column;gap:1px;margin-block-start:4px;padding:4px;border:var(--native-select-picker-border);border-radius:var(--native-select-picker-radius);background:var(--native-select-picker-bg);box-shadow:var(--native-select-picker-shadow);color:var(--native-select-option-color);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}select[data-anta] option{box-sizing:border-box;min-block-size:28px;padding-block:var(--native-select-option-padding-y);padding-inline:var(--native-select-option-padding-x);border-radius:var(--radius-sm, 4px);background:transparent;color:var(--native-select-option-color);cursor:pointer;font-family:var(--sans-serif);font-feature-settings:"ss02","ss05","tnum";font-size:14px;font-weight:400;font-variation-settings:"wdth" 100,"slnt" 0,"ital" 0;letter-spacing:normal;line-height:16px;text-transform:none;transition:background-color .28s ease-out}select[data-anta] option:is(:hover,:focus-visible){background:color-mix(in oklch,currentColor var(--native-select-option-hover),transparent);transition:background-color 60ms ease-in-out}select[data-anta] option:focus-visible{outline:1px solid var(--focus-ring);outline-offset:1px}select[data-anta] option:active{background:color-mix(in oklch,currentColor var(--native-select-option-active),transparent);transition:none}select[data-anta] option:checked{background:color-mix(in oklch,currentColor var(--native-select-option-selected),transparent);transition:background-color .28s ease-out}select[data-anta] option:disabled{color:var(--text-5);cursor:default}select[data-anta] optgroup{display:flex;flex-direction:column;gap:1px;color:var(--text-5);font-family:var(--sans-serif);font-size:.75em;font-weight:600;letter-spacing:.06em;text-transform:uppercase}}}

package/dist/elements/a-input.js

@@ -73,7 +73,7 @@ const SHADOW_STYLE = `
     transition: box-shadow 120ms ease;
   }
   :host([multiline]) .field { align-items: stretch; }
-  :host([status]) .field { --_bw: 1px; }
+  :host([status]:not([status="neutral"])) .field { --_bw: 1px; }
   :host([size="small"]) { --_fs: 13px; --_lh: 16px; }
   :host([size="large"]) { --_fs: 17px; --_lh: 22px; }
   :host([size="small"]) .field { min-height: 24px; }

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

@@ -198,8 +198,10 @@ export declare class AMenuElement extends HTMLElementBase {
     /**
      * Fully declarative close contract — decided synchronously from the DOM, so
      * it never depends on the consumer's click handler (which in a worker-thread
-     * runtime can't `preventDefault` on the UI thread). The menu never
-     * stops/prevents the click, so the consumer's selection handler always runs.
+     * runtime can't `preventDefault` on the UI thread). A menu-item / `data-menu-close`
+     * activation stops the click at the surface so it doesn't leak to an ancestor (a
+     * clickable row the menu sits in); it never prevents it, so item handlers and link
+     * navigation still run. Other clicks bubble unless `stop-propagation` opts in.
      *
      * Walk the click's composedPath outward to the surface; the NEAREST marker
      * wins:

package/dist/elements/a-menu.js

@@ -9,6 +9,7 @@ const SUBMENU_CLOSE_DELAY = 130;
 const TYPEAHEAD_RESET = 500;
 const SELF_ACTIVATING = 'a-button, button, a[href], input[type="button"], input[type="submit"], input[type="reset"], [role="button"]';
 const EDITABLE_FIELD = "input:not([readonly]), textarea:not([readonly]), a-input:not([readonly]), a-input-time:not([readonly])";
+const DECLARATIVE_TRIGGER = "[data-dialog-open], [data-dialog-close], [data-toast-dismiss], [data-banner-dismiss]";
 const openStack = [];
 let docBound = false;
 let boundDoc = null;
@@ -115,7 +116,7 @@ function handleIntersection(entries) {
 }
 const lazyObserver = typeof IntersectionObserver !== "undefined" ? new IntersectionObserver(handleIntersection, { root: null, rootMargin: "0px", threshold: 0 }) : null;
 class AMenuElement extends HTMLElementBase {
-  static observedAttributes = ["placement", "context", "coord", "offset", "nohover", "state"];
+  static observedAttributes = ["placement", "context", "coord", "offset", "nohover", "state", "stop-propagation"];
   /** Shadow-internal popover surface — the only thing we ever mutate. */
   surface;
   /** The scrolling body inside the surface (holds the items). */
@@ -143,6 +144,21 @@ class AMenuElement extends HTMLElementBase {
   // event, which the reactive layer reflects onto the field's `aria-activedescendant`.
   activeItem = null;
   comboObserver;
+  // An open menu follows its anchor vertically through scrolling, transforms, and
+  // layout shifts. Those movements do not all produce a DOM observer callback, so
+  // this frame is active only while the menu is visible.
+  #anchorTrackingFrame;
+  #lastAnchorRect;
+  // Vertical-follow baseline captured on each full position(): the frozen
+  // horizontal offset and the gap to the anchor's top. Tracking translates to hold
+  // this gap as the anchor moves; it never re-flips or chases the anchor sideways.
+  #followLeft;
+  #followGap;
+  // Opt-in event containment (`stop-propagation`): event types whose bubbling out
+  // of the surface is suppressed. Selecting an item is always contained (see
+  // onSurfaceClick); this is the broad, configurable lever on top of that.
+  #stopEvents = /* @__PURE__ */ new Set();
+  #stopHandler = (e) => e.stopPropagation();
   // The vertical side chosen at open (true = flipped above the anchor). A re-anchor
   // (filtering changes height) keeps this side rather than re-deciding — a shrunk
   // menu shouldn't hop back under the trigger.
@@ -283,6 +299,7 @@ class AMenuElement extends HTMLElementBase {
   }
   connectedCallback() {
     ensureMenuItemKeyListener(this.doc);
+    this.#syncStopPropagation();
     const anchor = this.triggerAnchor;
     if (anchor) {
       anchorToMenu.set(anchor, this);
@@ -306,6 +323,10 @@ class AMenuElement extends HTMLElementBase {
       this.syncState();
       return;
     }
+    if (name === "stop-propagation") {
+      this.#syncStopPropagation();
+      return;
+    }
     if (this.listening) {
       this.teardownListeners();
       this.setupListeners();
@@ -726,6 +747,7 @@ class AMenuElement extends HTMLElementBase {
     this.reflectOpen(true);
     this.hideAnchorTooltip();
     this.position(coord, instant);
+    this.#startAnchorTracking(coord);
   }
   /** Dismiss any tooltip on the trigger as the menu opens, so the trigger's
    *  hover tooltip doesn't linger over the just-opened menu. `a-tooltip.hide()`
@@ -737,6 +759,7 @@ class AMenuElement extends HTMLElementBase {
   }
   /** Shadow-only hide. */
   _doHide() {
+    this.#stopAnchorTracking();
     if (this.surface.isConnected && this._shown) this.surface.hidePopover();
     this._shown = false;
     this.reflectOpen(false);
@@ -759,6 +782,65 @@ class AMenuElement extends HTMLElementBase {
     }
   }
   /* ============================ positioning ============================ */
+  /** Follow an anchor-positioned menu on the vertical axis as its target moves
+   *  (scroll, transform, layout shift). The side chosen at open never flips and the
+   *  horizontal position stays put — a re-flip would fight the open-time placement,
+   *  and chasing the anchor sideways isn't wanted. Coordinate menus keep their
+   *  opening point. */
+  #startAnchorTracking(coord) {
+    this.#stopAnchorTracking();
+    if (coord || this.#isCoord) return;
+    const anchor = this.triggerAnchor;
+    if (!anchor) return;
+    this.#lastAnchorRect = this.#anchorRectValues(anchor);
+    const track = () => {
+      if (!this._shown) {
+        this.#anchorTrackingFrame = void 0;
+        return;
+      }
+      const currentAnchor = this.triggerAnchor;
+      if (!currentAnchor) {
+        this.#anchorTrackingFrame = void 0;
+        return;
+      }
+      const next = this.#anchorRectValues(currentAnchor);
+      if (!this.#sameAnchorRect(next)) {
+        this.#lastAnchorRect = next;
+        this.#followVertically(currentAnchor);
+      }
+      this.#anchorTrackingFrame = this.view.requestAnimationFrame(track);
+    };
+    this.#anchorTrackingFrame = this.view.requestAnimationFrame(track);
+  }
+  /** Hold the vertical gap captured at the last full position() as the anchor
+   *  moves — a pure translate, so no reflow. Horizontal stays frozen and the side
+   *  never flips; the menu clamps within the viewport. */
+  #followVertically(anchor) {
+    if (this.#followGap === void 0 || this.#followLeft === void 0) return;
+    const box = this.surface.getBoundingClientRect();
+    let top = anchorRect(anchor).top + this.#followGap;
+    top = Math.min(top, this.view.innerHeight - box.height - MARGIN);
+    top = Math.max(MARGIN, top);
+    this.surface.style.transform = `translate(${this.#followLeft}px, ${Math.round(top)}px)`;
+    this.updateScrollFade();
+  }
+  #stopAnchorTracking() {
+    if (this.#anchorTrackingFrame !== void 0) {
+      this.view.cancelAnimationFrame(this.#anchorTrackingFrame);
+      this.#anchorTrackingFrame = void 0;
+    }
+    this.#lastAnchorRect = void 0;
+    this.#followLeft = void 0;
+    this.#followGap = void 0;
+  }
+  #anchorRectValues(anchor) {
+    const { left, top, right, bottom, width, height } = anchorRect(anchor);
+    return [left, top, right, bottom, width, height];
+  }
+  #sameAnchorRect(next) {
+    const prev = this.#lastAnchorRect;
+    return !!prev && prev.length === next.length && prev.every((value, index) => value === next[index]);
+  }
   position(coord, sync = false, reanchor = false) {
     const run = () => {
       if (!this._shown) return;
@@ -840,8 +922,14 @@ class AMenuElement extends HTMLElementBase {
           top = Math.max(MARGIN, top);
         }
       }
-      surface.style.transform = `translate(${Math.round(left)}px, ${Math.round(top)}px)`;
+      const appliedLeft = Math.round(left);
+      const appliedTop = Math.round(top);
+      surface.style.transform = `translate(${appliedLeft}px, ${appliedTop}px)`;
       this.updateScrollFade();
+      if (!coord && !this.#isCoord && this.triggerAnchor) {
+        this.#followLeft = appliedLeft;
+        this.#followGap = appliedTop - anchorRect(this.triggerAnchor).top;
+      }
     };
     if (sync) run();
     else requestAnimationFrame(run);
@@ -850,8 +938,10 @@ class AMenuElement extends HTMLElementBase {
   /**
    * Fully declarative close contract — decided synchronously from the DOM, so
    * it never depends on the consumer's click handler (which in a worker-thread
-   * runtime can't `preventDefault` on the UI thread). The menu never
-   * stops/prevents the click, so the consumer's selection handler always runs.
+   * runtime can't `preventDefault` on the UI thread). A menu-item / `data-menu-close`
+   * activation stops the click at the surface so it doesn't leak to an ancestor (a
+   * clickable row the menu sits in); it never prevents it, so item handlers and link
+   * navigation still run. Other clicks bubble unless `stop-propagation` opts in.
    *
    * Walk the click's composedPath outward to the surface; the NEAREST marker
    * wins:
@@ -861,6 +951,15 @@ class AMenuElement extends HTMLElementBase {
    *   - nothing → keep open (plain custom content doesn't dismiss).
    */
   onSurfaceClick = (e) => {
+    let contain = false;
+    let exemptTrigger = false;
+    for (const node of e.composedPath()) {
+      if (node === this.surface) break;
+      if (!(node instanceof Element)) continue;
+      if (node.matches(DECLARATIVE_TRIGGER)) exemptTrigger = true;
+      if (node instanceof AMenuItemElement || node.hasAttribute("data-menu-close")) contain = true;
+    }
+    if (contain && !exemptTrigger) e.stopPropagation();
     for (const node of e.composedPath()) {
       if (node === this.surface) break;
       if (node instanceof AMenuItemElement) {
@@ -899,6 +998,25 @@ class AMenuElement extends HTMLElementBase {
     const root = openStack[0] ?? this;
     root.requestClose(e);
   }
+  /** Event types the `stop-propagation` attribute contains at the surface. A bare
+   *  or empty attribute defaults to `click`; a value is a space / comma list. */
+  #parseStopEvents() {
+    if (!this.hasAttribute("stop-propagation")) return /* @__PURE__ */ new Set();
+    const raw = (this.getAttribute("stop-propagation") ?? "").trim();
+    return new Set(raw ? raw.split(/[\s,]+/) : ["click"]);
+  }
+  /** Reconcile the surface's containment listeners with the `stop-propagation`
+   *  attribute. Each listed type gets a bubble listener that stops it at the
+   *  surface, so it never reaches an ancestor / document handler. Selecting an item
+   *  is already contained by onSurfaceClick; this is the broad, opt-in lever. */
+  #syncStopPropagation() {
+    const next = this.#parseStopEvents();
+    for (const type of this.#stopEvents)
+      if (!next.has(type)) this.surface.removeEventListener(type, this.#stopHandler);
+    for (const type of next)
+      if (!this.#stopEvents.has(type)) this.surface.addEventListener(type, this.#stopHandler);
+    this.#stopEvents = next;
+  }
   /* ============================ keyboard ============================ */
   /** Called by the coordinator on the topmost open menu. Handles navigation;
    *  roving Enter / Space activation is `<a-menu-item>`'s own delegated keyup

package/dist/elements/a-radio.css

@@ -1 +1 @@
-@layer anta{a-radio{--radio-control-size: 16px;--radio-border-width: 1.5px;--radio-dot-size: 6px;--_radio-dot-adjust: 0px;--radio-gap: 8px;--radio-bg: var(--bg-1);--radio-tone-source: var(--anta-seed-neutral);--_tone-l-rest: .6;--_tone-l-hover: .45;--_tone-l-active: .4;--radio-bg-selected: oklch(from var(--radio-tone-source) var(--_tone-l-rest) c h);--radio-bg-selected-hover: oklch(from var(--radio-tone-source) var(--_tone-l-hover) c h);--radio-bg-selected-active: oklch(from var(--radio-tone-source) var(--_tone-l-active) c h);--radio-border-neutral: var(--border-3);--radio-border: var(--radio-border-neutral);--radio-border-hover: var(--border-2);--radio-border-active: var(--border-1);--radio-dot: #f6f4f6;--radio-dot-disabled: #c1b9c1;--radio-bg-disabled: color-mix(in oklch, #44374b 10%, transparent);--radio-border-disabled: color-mix(in oklch, #44374b 10%, transparent);--radio-label-color: var(--text-2);--radio-label-color-disabled: var(--text-4);--radio-hint-color: var(--text-3);--radio-label-fs: 15px;--radio-label-lh: 20px;--radio-hint-fs: 14px;--radio-hint-lh: 17px;display:inline-grid;grid-template-columns:auto 1fr;align-items:start;column-gap:var(--radio-gap);cursor:pointer;user-select:none;-webkit-user-drag:none;vertical-align:middle;outline:none;color:var(--radio-label-color);font-family:var(--sans-serif);font-size:var(--radio-label-fs);line-height:var(--radio-label-lh);font-feature-settings:"ss02","ss05","tnum";&:before{content:"";grid-column:1;grid-row:1 / -1;align-self:start;margin-block-start:calc((var(--radio-label-lh) - var(--radio-control-size)) / 2);box-sizing:border-box;inline-size:var(--radio-control-size);block-size:var(--radio-control-size);border-radius:50%;background:var(--radio-bg);border:var(--radio-border-width) solid var(--radio-border);transition:background-color .15s ease-out,border-color .15s ease-out}&:after{content:"";grid-column:1;grid-row:1 / -1;align-self:start;justify-self:center;margin-block-start:calc((var(--radio-label-lh) - (var(--radio-dot-size) - var(--_radio-dot-adjust))) / 2);inline-size:calc(var(--radio-dot-size) - var(--_radio-dot-adjust));block-size:calc(var(--radio-dot-size) - var(--_radio-dot-adjust));border-radius:50%;background:var(--radio-dot);transform:scale(0);transition:transform .12s ease-out;pointer-events:none}@media(hover:hover)and (pointer:fine){&:not([disabled]):hover:before{border-color:var(--radio-border-hover);transition:background-color 75ms ease-in,border-color 75ms ease-in}&:not([disabled]):hover:state(selected):before{background:var(--radio-bg-selected-hover);border-color:var(--radio-bg-selected-hover)}}&:not([disabled]):active:before{border-color:var(--radio-border-active);transition:background-color 50ms linear,border-color 50ms linear}&:not([disabled]):active:state(selected):before{background:var(--radio-bg-selected-active);border-color:var(--radio-bg-selected-active)}&:state(selected){&:before{background:var(--radio-bg-selected);border-color:var(--radio-bg-selected)}&:after{transform:scale(1)}}&:focus-visible:before{outline:1px solid var(--focus-ring);outline-offset:1px}&[disabled]{cursor:not-allowed;color:var(--radio-label-color-disabled);&:before{background:var(--radio-bg-disabled);border-color:var(--radio-border-disabled);transition:none}&:state(selected):after{background:var(--radio-dot-disabled)}a-radio-hint{color:var(--radio-label-color-disabled)}}&[size=small]{--radio-control-size: 14px;--radio-dot-size: 5px;--radio-gap: 6px;--radio-label-fs: 13px;--radio-label-lh: 16px;--radio-hint-fs: 12px;--radio-hint-lh: 14px}&[size=large]{--radio-control-size: 18px;--radio-dot-size: 7px;--radio-label-fs: 17px;--radio-label-lh: 22px;--radio-hint-fs: 16px;--radio-hint-lh: 21px}}a-radio-label,a-radio-hint{display:block;grid-column:2;min-width:0}a-radio-hint{color:var(--radio-hint-color);font-size:var(--radio-hint-fs);line-height:var(--radio-hint-lh);margin-block-start:2px}a-radio-group:focus-visible a-radio:state(selected):before{outline:1px solid var(--focus-ring);outline-offset:1px}a-radio[tone]:not([tone=""],[tone=neutral]),a-radio[tone-selected]:not([tone-selected=""],[tone-selected=neutral]),a-radio-group[tone]:not([tone=""],[tone=neutral]) a-radio:not([tone]),a-radio-group[tone-selected]:not([tone-selected=""],[tone-selected=neutral]) a-radio:not([tone-selected]){--_tone-l-rest: .5;--_tone-l-hover: .45;--_tone-l-active: .4}a-radio[tone=brand],a-radio[tone-selected=brand],a-radio-group[tone=brand] a-radio:not([tone]),a-radio-group[tone-selected=brand] a-radio:not([tone-selected]){--radio-tone-source: var(--anta-seed-brand)}a-radio[tone=info],a-radio[tone-selected=info],a-radio-group[tone=info] a-radio:not([tone]),a-radio-group[tone-selected=info] a-radio:not([tone-selected]){--radio-tone-source: var(--anta-seed-info)}a-radio[tone=success],a-radio[tone-selected=success],a-radio-group[tone=success] a-radio:not([tone]),a-radio-group[tone-selected=success] a-radio:not([tone-selected]){--radio-tone-source: var(--anta-seed-success)}a-radio[tone=warning],a-radio[tone-selected=warning],a-radio-group[tone=warning] a-radio:not([tone]),a-radio-group[tone-selected=warning] a-radio:not([tone-selected]){--radio-tone-source: var(--anta-seed-warning)}a-radio[tone=critical],a-radio[tone-selected=critical],a-radio-group[tone=critical] a-radio:not([tone]),a-radio-group[tone-selected=critical] a-radio:not([tone-selected]){--radio-tone-source: var(--anta-seed-critical)}a-radio[tone=neutral],a-radio[tone-selected=neutral],a-radio-group[tone=neutral] a-radio:not([tone]),a-radio-group[tone-selected=neutral] a-radio:not([tone-selected]){--radio-tone-source: var(--anta-seed-neutral)}a-radio[tone]:not([tone=""],[tone=neutral]),a-radio-group[tone]:not([tone=""],[tone=neutral]) a-radio:not([tone]){--radio-bg: oklch(from var(--radio-tone-source) .99 calc(c*.03) h);--_radio-border-base: color-mix(in oklch, var(--radio-bg-selected) 70%, var(--radio-border-neutral));--radio-border: oklch(from var(--_radio-border-base) calc(l + .17) c h);--radio-border-hover: oklch(from var(--_radio-border-base) calc(l + .1) c h);--radio-border-active: var(--_radio-border-base)}a-radio[tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]){--radio-tone-source: attr(tone type(<color>), transparent)}a-radio[tone-selected]:not([tone-selected=""],[tone-selected=brand],[tone-selected=neutral],[tone-selected=info],[tone-selected=success],[tone-selected=warning],[tone-selected=critical]){--radio-tone-source: attr(tone-selected type(<color>), transparent)}.dark a-radio{--_radio-dot-adjust: 1px;&:after{box-shadow:0 0 1px 1px color-mix(in oklch,black 40%,transparent)}--radio-border-neutral: var(--border-3);--radio-border-hover: var(--border-2);--radio-border-active: var(--border-1);--radio-dot: #ece9ec;--radio-dot-disabled: #534c57;--radio-bg-disabled: color-mix(in oklch, #e4d1ef 10%, transparent);--radio-border-disabled: color-mix(in oklch, #e4d1ef 10%, transparent);--_tone-l-rest: .42;--_tone-l-hover: .45;--_tone-l-active: .5}.dark a-radio[tone]:not([tone=""],[tone=neutral]),.dark a-radio[tone-selected]:not([tone-selected=""],[tone-selected=neutral]),.dark a-radio-group[tone]:not([tone=""],[tone=neutral]) a-radio:not([tone]),.dark a-radio-group[tone-selected]:not([tone-selected=""],[tone-selected=neutral]) a-radio:not([tone-selected]){--_tone-l-rest: .45;--_tone-l-hover: .5;--_tone-l-active: .57}.dark a-radio[tone]:not([tone=""],[tone=neutral]),.dark a-radio-group[tone]:not([tone=""],[tone=neutral]) a-radio:not([tone]){--radio-bg: oklch(from var(--radio-tone-source) .15 calc(c*.18) h);--radio-border: var(--_radio-border-base);--radio-border-hover: oklch(from var(--_radio-border-base) calc(l + .1) c h);--radio-border-active: oklch(from var(--_radio-border-base) calc(l + .17) c h)}label:has(>input[data-anta][type=radio]){display:inline-flex;align-items:center;gap:8px;color:var(--text-2);font-family:var(--sans-serif);font-feature-settings:"ss02","ss05","tnum";font-size:15px;line-height:20px}input[data-anta][type=radio]{--native-choice-size: 16px;--native-choice-dot-core: 3px;--native-choice-dot-edge: 3.5px;--native-choice-bg: var(--bg-1);--native-choice-border-neutral: var(--border-3);--native-choice-border: var(--native-choice-border-neutral);--native-choice-border-hover: var(--border-2);--native-choice-border-active: var(--border-1);--native-choice-tone-source: var(--anta-seed-neutral);--_native-choice-l-rest: .6;--_native-choice-l-hover: .45;--_native-choice-l-active: .4;--native-choice-selected: oklch(from var(--native-choice-tone-source) var(--_native-choice-l-rest) c h);--native-choice-selected-hover: oklch(from var(--native-choice-tone-source) var(--_native-choice-l-hover) c h);--native-choice-selected-active: oklch(from var(--native-choice-tone-source) var(--_native-choice-l-active) c h);--native-choice-dot: #f6f4f6;box-sizing:border-box;flex:0 0 var(--native-choice-size);inline-size:var(--native-choice-size);block-size:var(--native-choice-size);margin:0;appearance:none;-webkit-appearance:none;border:1.5px solid var(--native-choice-border);border-radius:50%;background-color:var(--native-choice-bg);cursor:pointer;vertical-align:middle;transition:background-color .15s ease-out,border-color .15s ease-out}label:has(>input[data-anta][type=radio][size=small]){gap:6px;font-size:13px;line-height:16px}label:has(>input[data-anta][type=radio][size=large]){font-size:17px;line-height:22px}input[data-anta][type=radio][size=small]{--native-choice-size: 14px;--native-choice-dot-core: 2.5px;--native-choice-dot-edge: 3px}input[data-anta][type=radio][size=large]{--native-choice-size: 18px;--native-choice-dot-core: 3.5px;--native-choice-dot-edge: 4px}input[data-anta][type=radio][tone]:not([tone=""],[tone=neutral]),input[data-anta][type=radio][tone-selected]:not([tone-selected=""],[tone-selected=neutral]){--_native-choice-l-rest: .5;--_native-choice-l-hover: .45;--_native-choice-l-active: .4}input[data-anta][type=radio][tone=brand],input[data-anta][type=radio][tone-selected=brand]{--native-choice-tone-source: var(--anta-seed-brand)}input[data-anta][type=radio][tone=info],input[data-anta][type=radio][tone-selected=info]{--native-choice-tone-source: var(--anta-seed-info)}input[data-anta][type=radio][tone=success],input[data-anta][type=radio][tone-selected=success]{--native-choice-tone-source: var(--anta-seed-success)}input[data-anta][type=radio][tone=warning],input[data-anta][type=radio][tone-selected=warning]{--native-choice-tone-source: var(--anta-seed-warning)}input[data-anta][type=radio][tone=critical],input[data-anta][type=radio][tone-selected=critical]{--native-choice-tone-source: var(--anta-seed-critical)}input[data-anta][type=radio][tone=neutral],input[data-anta][type=radio][tone-selected=neutral]{--native-choice-tone-source: var(--anta-seed-neutral)}input[data-anta][type=radio][tone]:not([tone=""],[tone=neutral]){--native-choice-bg: oklch(from var(--native-choice-tone-source) .99 calc(c*.03) h);--_native-choice-border-base: color-mix(in oklch, var(--native-choice-selected) 70%, var(--native-choice-border-neutral));--native-choice-border: oklch(from var(--_native-choice-border-base) calc(l + .17) c h);--native-choice-border-hover: oklch(from var(--_native-choice-border-base) calc(l + .1) c h);--native-choice-border-active: var(--_native-choice-border-base)}input[data-anta][type=radio][tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]){--native-choice-tone-source: attr(tone type(<color>), var(--anta-seed-neutral))}input[data-anta][type=radio][tone-selected]:not([tone-selected=""],[tone-selected=brand],[tone-selected=neutral],[tone-selected=info],[tone-selected=success],[tone-selected=warning],[tone-selected=critical]){--native-choice-tone-source: attr(tone-selected type(<color>), var(--anta-seed-neutral))}@media(hover:hover)and (pointer:fine){input[data-anta][type=radio]:not(:disabled):hover{border-color:var(--native-choice-border-hover)}input[data-anta][type=radio]:not(:disabled):hover:checked{border-color:var(--native-choice-selected-hover);background:radial-gradient(circle,var(--native-choice-dot) 0 var(--native-choice-dot-core),var(--native-choice-selected-hover) var(--native-choice-dot-edge))}}input[data-anta][type=radio]:not(:disabled):active{border-color:var(--native-choice-border-active)}input[data-anta][type=radio]:not(:disabled):active:checked{border-color:var(--native-choice-selected-active);background:radial-gradient(circle,var(--native-choice-dot) 0 var(--native-choice-dot-core),var(--native-choice-selected-active) var(--native-choice-dot-edge))}input[data-anta][type=radio]:checked{border-color:var(--native-choice-selected);background:radial-gradient(circle,var(--native-choice-dot) 0 var(--native-choice-dot-core),var(--native-choice-selected) var(--native-choice-dot-edge))}input[data-anta][type=radio]:focus-visible{outline:1px solid var(--focus-ring);outline-offset:1px}input[data-anta][type=radio]:disabled{border-color:color-mix(in oklch,var(--text-1) 10%,transparent);background-color:color-mix(in oklch,var(--text-1) 10%,transparent);cursor:not-allowed}input[data-anta][type=radio]:disabled:checked{border-color:color-mix(in oklch,var(--text-1) 10%,transparent);background:radial-gradient(circle,var(--text-4) 0 var(--native-choice-dot-core),color-mix(in oklch,var(--text-1) 10%,transparent) var(--native-choice-dot-edge))}.dark input[data-anta][type=radio]{--_native-choice-l-rest: .42;--_native-choice-l-hover: .45;--_native-choice-l-active: .5;--native-choice-dot: #ece9ec}.dark input[data-anta][type=radio][tone]:not([tone=""],[tone=neutral]),.dark input[data-anta][type=radio][tone-selected]:not([tone-selected=""],[tone-selected=neutral]){--_native-choice-l-rest: .45;--_native-choice-l-hover: .5;--_native-choice-l-active: .57}.dark input[data-anta][type=radio][tone]:not([tone=""],[tone=neutral]){--native-choice-bg: oklch(from var(--native-choice-tone-source) .15 calc(c*.18) h);--native-choice-border: var(--_native-choice-border-base);--native-choice-border-hover: oklch(from var(--_native-choice-border-base) calc(l + .1) c h);--native-choice-border-active: oklch(from var(--_native-choice-border-base) calc(l + .17) c h)}@media(forced-colors:active){a-radio:state(selected):before{forced-color-adjust:none;background-color:Highlight;border-color:Highlight}a-radio:state(selected):after{forced-color-adjust:none;background-color:HighlightText;box-shadow:none}a-radio[disabled]:before{background-color:Canvas;border-color:GrayText}a-radio[disabled]:state(selected):after{background-color:GrayText}}}
+@layer anta{a-radio{--radio-control-size: 16px;--radio-border-width: 1.5px;--radio-dot-size: 6px;--_radio-dot-adjust: 0px;--radio-gap: 8px;--radio-bg: var(--bg-1);--radio-tone-source: var(--anta-seed-neutral);--radio-off-tone-source: var(--anta-seed-neutral);--_tone-l-rest: .6;--_tone-l-hover: .45;--_tone-l-active: .4;--radio-bg-selected: oklch(from var(--radio-tone-source) var(--_tone-l-rest) c h);--radio-bg-selected-hover: oklch(from var(--radio-tone-source) var(--_tone-l-hover) c h);--radio-bg-selected-active: oklch(from var(--radio-tone-source) var(--_tone-l-active) c h);--radio-border-neutral: var(--border-3);--radio-border: var(--radio-border-neutral);--radio-border-hover: var(--border-2);--radio-border-active: var(--border-1);--radio-dot: #f6f4f6;--radio-dot-disabled: #c1b9c1;--radio-bg-disabled: color-mix(in oklch, #44374b 10%, transparent);--radio-border-disabled: color-mix(in oklch, #44374b 10%, transparent);--radio-label-color: var(--text-2);--radio-label-color-disabled: var(--text-4);--radio-hint-color: var(--text-3);--radio-label-fs: 15px;--radio-label-lh: 20px;--radio-hint-fs: 14px;--radio-hint-lh: 17px;display:inline-grid;grid-template-columns:auto 1fr;align-items:start;column-gap:var(--radio-gap);cursor:pointer;user-select:none;-webkit-user-drag:none;vertical-align:middle;outline:none;color:var(--radio-label-color);font-family:var(--sans-serif);font-size:var(--radio-label-fs);line-height:var(--radio-label-lh);font-feature-settings:"ss02","ss05","tnum";&:before{content:"";grid-column:1;grid-row:1 / -1;align-self:start;margin-block-start:calc((var(--radio-label-lh) - var(--radio-control-size)) / 2);box-sizing:border-box;inline-size:var(--radio-control-size);block-size:var(--radio-control-size);border-radius:50%;background:var(--radio-bg);border:var(--radio-border-width) solid var(--radio-border);transition:background-color .15s ease-out,border-color .15s ease-out}&:after{content:"";grid-column:1;grid-row:1 / -1;align-self:start;justify-self:center;margin-block-start:calc((var(--radio-label-lh) - (var(--radio-dot-size) - var(--_radio-dot-adjust))) / 2);inline-size:calc(var(--radio-dot-size) - var(--_radio-dot-adjust));block-size:calc(var(--radio-dot-size) - var(--_radio-dot-adjust));border-radius:50%;background:var(--radio-dot);transform:scale(0);transition:transform .12s ease-out;pointer-events:none}@media(hover:hover)and (pointer:fine){&:not([disabled]):hover:before{border-color:var(--radio-border-hover);transition:background-color 75ms ease-in,border-color 75ms ease-in}&:not([disabled]):hover:state(selected):before{background:var(--radio-bg-selected-hover);border-color:var(--radio-bg-selected-hover)}}&:not([disabled]):active:before{border-color:var(--radio-border-active);transition:background-color 50ms linear,border-color 50ms linear}&:not([disabled]):active:state(selected):before{background:var(--radio-bg-selected-active);border-color:var(--radio-bg-selected-active)}&:state(selected){&:before{background:var(--radio-bg-selected);border-color:var(--radio-bg-selected)}&:after{transform:scale(1)}}&:focus-visible{outline:none}&:focus-visible:before{outline:1px solid var(--focus-ring);outline-offset:1px}&[disabled]{cursor:not-allowed;color:var(--radio-label-color-disabled);&:before{background:var(--radio-bg-disabled);border-color:var(--radio-border-disabled);transition:none}&:state(selected):after{background:var(--radio-dot-disabled)}a-radio-hint{color:var(--radio-label-color-disabled)}}&[size=small]{--radio-control-size: 14px;--radio-dot-size: 5px;--radio-gap: 6px;--radio-label-fs: 13px;--radio-label-lh: 16px;--radio-hint-fs: 12px;--radio-hint-lh: 14px}&[size=large]{--radio-control-size: 18px;--radio-dot-size: 7px;--radio-label-fs: 17px;--radio-label-lh: 22px;--radio-hint-fs: 16px;--radio-hint-lh: 21px}}a-radio-label,a-radio-hint{display:block;grid-column:2;min-width:0}a-radio-hint{color:var(--radio-hint-color);font-size:var(--radio-hint-fs);line-height:var(--radio-hint-lh);margin-block-start:2px}a-radio-group:focus-visible a-radio:state(selected):before{outline:1px solid var(--focus-ring);outline-offset:1px}a-radio[tone]:not([tone=""],[tone=neutral]),a-radio[tone-selected]:not([tone-selected=""],[tone-selected=neutral]),a-radio-group[tone]:not([tone=""],[tone=neutral]) a-radio:not([tone],[tone-selected]),a-radio-group[tone-selected]:not([tone-selected=""],[tone-selected=neutral]) a-radio:not([tone],[tone-selected]){--_tone-l-rest: .5;--_tone-l-hover: .45;--_tone-l-active: .4}a-radio[tone=brand],a-radio-group[tone=brand] a-radio:not([tone],[tone-selected]){--radio-tone-source: var(--anta-seed-brand);--radio-off-tone-source: var(--anta-seed-brand)}a-radio[tone=info],a-radio-group[tone=info] a-radio:not([tone],[tone-selected]){--radio-tone-source: var(--anta-seed-info);--radio-off-tone-source: var(--anta-seed-info)}a-radio[tone=success],a-radio-group[tone=success] a-radio:not([tone],[tone-selected]){--radio-tone-source: var(--anta-seed-success);--radio-off-tone-source: var(--anta-seed-success)}a-radio[tone=warning],a-radio-group[tone=warning] a-radio:not([tone],[tone-selected]){--radio-tone-source: var(--anta-seed-warning);--radio-off-tone-source: var(--anta-seed-warning)}a-radio[tone=critical],a-radio-group[tone=critical] a-radio:not([tone],[tone-selected]){--radio-tone-source: var(--anta-seed-critical);--radio-off-tone-source: var(--anta-seed-critical)}a-radio[tone=neutral],a-radio-group[tone=neutral] a-radio:not([tone],[tone-selected]){--radio-tone-source: var(--anta-seed-neutral);--radio-off-tone-source: var(--anta-seed-neutral)}a-radio[tone]:not([tone=""],[tone=neutral]),a-radio-group[tone]:not([tone=""],[tone=neutral]) a-radio:not([tone],[tone-selected]){--radio-bg: oklch(from var(--radio-off-tone-source) .99 calc(c*.03) h);--_radio-off-bg-selected: oklch(from var(--radio-off-tone-source) var(--_tone-l-rest) c h);--_radio-border-base: color-mix(in oklch, var(--_radio-off-bg-selected) 70%, var(--radio-border-neutral));--radio-border: oklch(from var(--_radio-border-base) calc(l + .17) c h);--radio-border-hover: oklch(from var(--_radio-border-base) calc(l + .1) c h);--radio-border-active: var(--_radio-border-base)}a-radio[tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]){--radio-tone-source: attr(tone type(<color>), transparent);--radio-off-tone-source: attr(tone type(<color>), transparent)}a-radio-group[tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]){--radio-tone-source: attr(tone type(<color>), transparent);--radio-off-tone-source: attr(tone type(<color>), transparent)}a-radio-group[tone]:where(:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical])) a-radio:not([tone],[tone-selected]){--radio-tone-source: inherit;--radio-off-tone-source: inherit}a-radio[tone-selected=brand],a-radio-group[tone-selected=brand] a-radio:not([tone],[tone-selected]){--radio-tone-source: var(--anta-seed-brand)}a-radio[tone-selected=info],a-radio-group[tone-selected=info] a-radio:not([tone],[tone-selected]){--radio-tone-source: var(--anta-seed-info)}a-radio[tone-selected=success],a-radio-group[tone-selected=success] a-radio:not([tone],[tone-selected]){--radio-tone-source: var(--anta-seed-success)}a-radio[tone-selected=warning],a-radio-group[tone-selected=warning] a-radio:not([tone],[tone-selected]){--radio-tone-source: var(--anta-seed-warning)}a-radio[tone-selected=critical],a-radio-group[tone-selected=critical] a-radio:not([tone],[tone-selected]){--radio-tone-source: var(--anta-seed-critical)}a-radio[tone-selected=neutral],a-radio-group[tone-selected=neutral] a-radio:not([tone],[tone-selected]){--radio-tone-source: var(--anta-seed-neutral);--_tone-l-rest: .6;--_tone-l-hover: .45;--_tone-l-active: .4}a-radio[tone-selected]:not([tone-selected=""],[tone-selected=brand],[tone-selected=neutral],[tone-selected=info],[tone-selected=success],[tone-selected=warning],[tone-selected=critical]){--radio-tone-source: attr(tone-selected type(<color>), transparent)}a-radio-group[tone-selected]:not([tone-selected=""],[tone-selected=brand],[tone-selected=neutral],[tone-selected=info],[tone-selected=success],[tone-selected=warning],[tone-selected=critical]){--radio-tone-source: attr(tone-selected type(<color>), transparent)}a-radio-group[tone-selected]:not([tone-selected=""],[tone-selected=brand],[tone-selected=neutral],[tone-selected=info],[tone-selected=success],[tone-selected=warning],[tone-selected=critical]) a-radio:not([tone],[tone-selected]){--radio-tone-source: inherit}.dark a-radio{--_radio-dot-adjust: 1px;&:after{box-shadow:0 0 1px 1px color-mix(in oklch,black 40%,transparent)}--radio-border-neutral: var(--border-3);--radio-border-hover: var(--border-2);--radio-border-active: var(--border-1);--radio-dot: #ece9ec;--radio-dot-disabled: #534c57;--radio-bg-disabled: color-mix(in oklch, #e4d1ef 10%, transparent);--radio-border-disabled: color-mix(in oklch, #e4d1ef 10%, transparent);--_tone-l-rest: .42;--_tone-l-hover: .45;--_tone-l-active: .5}.dark a-radio[tone]:not([tone=""],[tone=neutral]),.dark a-radio[tone-selected]:not([tone-selected=""],[tone-selected=neutral]),.dark a-radio-group[tone]:not([tone=""],[tone=neutral]) a-radio:not([tone],[tone-selected]),.dark a-radio-group[tone-selected]:not([tone-selected=""],[tone-selected=neutral]) a-radio:not([tone],[tone-selected]){--_tone-l-rest: .45;--_tone-l-hover: .5;--_tone-l-active: .57}.dark a-radio[tone]:not([tone=""],[tone=neutral]),.dark a-radio-group[tone]:not([tone=""],[tone=neutral]) a-radio:not([tone],[tone-selected]){--radio-bg: oklch(from var(--radio-off-tone-source) .15 calc(c*.18) h);--radio-border: var(--_radio-border-base);--radio-border-hover: oklch(from var(--_radio-border-base) calc(l + .1) c h);--radio-border-active: oklch(from var(--_radio-border-base) calc(l + .17) c h)}.dark a-radio[tone-selected=neutral],.dark a-radio-group[tone-selected=neutral] a-radio:not([tone],[tone-selected]){--_tone-l-rest: .42;--_tone-l-hover: .45;--_tone-l-active: .5}label:has(>input[data-anta][type=radio]){display:inline-flex;align-items:center;gap:8px;color:var(--text-2);font-family:var(--sans-serif);font-feature-settings:"ss02","ss05","tnum";font-size:15px;line-height:20px}input[data-anta][type=radio]{--native-choice-size: 16px;--native-choice-dot-core: 3px;--native-choice-dot-edge: 3.5px;--native-choice-bg: var(--bg-1);--native-choice-border-neutral: var(--border-3);--native-choice-border: var(--native-choice-border-neutral);--native-choice-border-hover: var(--border-2);--native-choice-border-active: var(--border-1);--native-choice-tone-source: var(--anta-seed-neutral);--native-choice-off-tone-source: var(--anta-seed-neutral);--_native-choice-l-rest: .6;--_native-choice-l-hover: .45;--_native-choice-l-active: .4;--native-choice-selected: oklch(from var(--native-choice-tone-source) var(--_native-choice-l-rest) c h);--native-choice-selected-hover: oklch(from var(--native-choice-tone-source) var(--_native-choice-l-hover) c h);--native-choice-selected-active: oklch(from var(--native-choice-tone-source) var(--_native-choice-l-active) c h);--native-choice-dot: #f6f4f6;box-sizing:border-box;flex:0 0 var(--native-choice-size);inline-size:var(--native-choice-size);block-size:var(--native-choice-size);margin:0;appearance:none;-webkit-appearance:none;border:1.5px solid var(--native-choice-border);border-radius:50%;background-color:var(--native-choice-bg);cursor:pointer;vertical-align:middle;transition:background-color .15s ease-out,border-color .15s ease-out}label:has(>input[data-anta][type=radio][size=small]){gap:6px;font-size:13px;line-height:16px}label:has(>input[data-anta][type=radio][size=large]){font-size:17px;line-height:22px}input[data-anta][type=radio][size=small]{--native-choice-size: 14px;--native-choice-dot-core: 2.5px;--native-choice-dot-edge: 3px}input[data-anta][type=radio][size=large]{--native-choice-size: 18px;--native-choice-dot-core: 3.5px;--native-choice-dot-edge: 4px}input[data-anta][type=radio][tone]:not([tone=""],[tone=neutral]),input[data-anta][type=radio][tone-selected]:not([tone-selected=""],[tone-selected=neutral]){--_native-choice-l-rest: .5;--_native-choice-l-hover: .45;--_native-choice-l-active: .4}input[data-anta][type=radio][tone=brand]{--native-choice-tone-source: var(--anta-seed-brand);--native-choice-off-tone-source: var(--anta-seed-brand)}input[data-anta][type=radio][tone=info]{--native-choice-tone-source: var(--anta-seed-info);--native-choice-off-tone-source: var(--anta-seed-info)}input[data-anta][type=radio][tone=success]{--native-choice-tone-source: var(--anta-seed-success);--native-choice-off-tone-source: var(--anta-seed-success)}input[data-anta][type=radio][tone=warning]{--native-choice-tone-source: var(--anta-seed-warning);--native-choice-off-tone-source: var(--anta-seed-warning)}input[data-anta][type=radio][tone=critical]{--native-choice-tone-source: var(--anta-seed-critical);--native-choice-off-tone-source: var(--anta-seed-critical)}input[data-anta][type=radio][tone=neutral]{--native-choice-tone-source: var(--anta-seed-neutral);--native-choice-off-tone-source: var(--anta-seed-neutral)}input[data-anta][type=radio][tone]:not([tone=""],[tone=neutral]){--native-choice-bg: oklch(from var(--native-choice-off-tone-source) .99 calc(c*.03) h);--_native-choice-off-selected: oklch(from var(--native-choice-off-tone-source) var(--_native-choice-l-rest) c h);--_native-choice-border-base: color-mix(in oklch, var(--_native-choice-off-selected) 70%, var(--native-choice-border-neutral));--native-choice-border: oklch(from var(--_native-choice-border-base) calc(l + .17) c h);--native-choice-border-hover: oklch(from var(--_native-choice-border-base) calc(l + .1) c h);--native-choice-border-active: var(--_native-choice-border-base)}input[data-anta][type=radio][tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]){--native-choice-tone-source: attr(tone type(<color>), var(--anta-seed-neutral));--native-choice-off-tone-source: attr(tone type(<color>), var(--anta-seed-neutral))}input[data-anta][type=radio][tone-selected=brand]{--native-choice-tone-source: var(--anta-seed-brand)}input[data-anta][type=radio][tone-selected=info]{--native-choice-tone-source: var(--anta-seed-info)}input[data-anta][type=radio][tone-selected=success]{--native-choice-tone-source: var(--anta-seed-success)}input[data-anta][type=radio][tone-selected=warning]{--native-choice-tone-source: var(--anta-seed-warning)}input[data-anta][type=radio][tone-selected=critical]{--native-choice-tone-source: var(--anta-seed-critical)}input[data-anta][type=radio][tone-selected=neutral]{--native-choice-tone-source: var(--anta-seed-neutral);--_native-choice-l-rest: .6;--_native-choice-l-hover: .45;--_native-choice-l-active: .4}input[data-anta][type=radio][tone-selected]:not([tone-selected=""],[tone-selected=brand],[tone-selected=neutral],[tone-selected=info],[tone-selected=success],[tone-selected=warning],[tone-selected=critical]){--native-choice-tone-source: attr(tone-selected type(<color>), var(--anta-seed-neutral))}@media(hover:hover)and (pointer:fine){input[data-anta][type=radio]:not(:disabled):hover{border-color:var(--native-choice-border-hover)}input[data-anta][type=radio]:not(:disabled):hover:checked{border-color:var(--native-choice-selected-hover);background:radial-gradient(circle,var(--native-choice-dot) 0 var(--native-choice-dot-core),var(--native-choice-selected-hover) var(--native-choice-dot-edge))}}input[data-anta][type=radio]:not(:disabled):active{border-color:var(--native-choice-border-active)}input[data-anta][type=radio]:not(:disabled):active:checked{border-color:var(--native-choice-selected-active);background:radial-gradient(circle,var(--native-choice-dot) 0 var(--native-choice-dot-core),var(--native-choice-selected-active) var(--native-choice-dot-edge))}input[data-anta][type=radio]:checked{border-color:var(--native-choice-selected);background:radial-gradient(circle,var(--native-choice-dot) 0 var(--native-choice-dot-core),var(--native-choice-selected) var(--native-choice-dot-edge))}input[data-anta][type=radio]:focus-visible{outline:1px solid var(--focus-ring);outline-offset:1px}input[data-anta][type=radio]:disabled{border-color:color-mix(in oklch,var(--text-1) 10%,transparent);background-color:color-mix(in oklch,var(--text-1) 10%,transparent);cursor:not-allowed}input[data-anta][type=radio]:disabled:checked{border-color:color-mix(in oklch,var(--text-1) 10%,transparent);background:radial-gradient(circle,var(--text-4) 0 var(--native-choice-dot-core),color-mix(in oklch,var(--text-1) 10%,transparent) var(--native-choice-dot-edge))}.dark input[data-anta][type=radio]{--_native-choice-l-rest: .42;--_native-choice-l-hover: .45;--_native-choice-l-active: .5;--native-choice-dot: #ece9ec}.dark input[data-anta][type=radio][tone]:not([tone=""],[tone=neutral]),.dark input[data-anta][type=radio][tone-selected]:not([tone-selected=""],[tone-selected=neutral]){--_native-choice-l-rest: .45;--_native-choice-l-hover: .5;--_native-choice-l-active: .57}.dark input[data-anta][type=radio][tone]:not([tone=""],[tone=neutral]){--native-choice-bg: oklch(from var(--native-choice-off-tone-source) .15 calc(c*.18) h);--native-choice-border: var(--_native-choice-border-base);--native-choice-border-hover: oklch(from var(--_native-choice-border-base) calc(l + .1) c h);--native-choice-border-active: oklch(from var(--_native-choice-border-base) calc(l + .17) c h)}.dark input[data-anta][type=radio][tone-selected=neutral]{--_native-choice-l-rest: .42;--_native-choice-l-hover: .45;--_native-choice-l-active: .5}@media(forced-colors:active){a-radio:state(selected):before{forced-color-adjust:none;background-color:Highlight;border-color:Highlight}a-radio:state(selected):after{forced-color-adjust:none;background-color:HighlightText;box-shadow:none}a-radio[disabled]:before{background-color:Canvas;border-color:GrayText}a-radio[disabled]:state(selected):after{background-color:GrayText}}}

package/dist/elements/a-switch.css

@@ -1 +1 @@
-@layer anta{a-switch{--switch-gap: 8px;--switch-track-inline-size: 30px;--switch-track-block-size: 18px;--switch-thumb-size: 12px;--switch-thumb-size-off: 10px;--switch-thumb-inset: 2px;--switch-thumb-inset-off: 4px;--switch-thumb-travel: 13px;--switch-track-round: 999px;--switch-thumb-round: 999px;--switch-label-fs: 15px;--switch-label-lh: 20px;--switch-track-off-stroke-neutral: var(--border-3);--switch-track-off-stroke: var(--switch-track-off-stroke-neutral);--switch-track-off-stroke-hover: var(--border-2);--switch-track-off-stroke-active: var(--border-1);--switch-track-disabled: color-mix(in oklch, #44374b 10%, transparent);--switch-thumb: var(--bg-1);--switch-thumb-off: var(--switch-track-off-stroke);--switch-tone-source: var(--anta-seed-brand);--switch-off-tone-source: var(--anta-seed-brand);--_switch-tone-l-rest: .56;--_switch-tone-l-hover: .48;--_switch-tone-l-active: .42;--switch-track-on: oklch(from var(--switch-tone-source) var(--_switch-tone-l-rest) c h);--switch-track-on-hover: oklch(from var(--switch-tone-source) var(--_switch-tone-l-hover) c h);--switch-track-on-active: oklch(from var(--switch-tone-source) var(--_switch-tone-l-active) c h);--switch-label-color: var(--text-2);--switch-label-color-disabled: var(--text-4);--switch-hint-color: var(--text-3);--switch-hint-fs: 13px;--switch-hint-lh: 16px;display:inline-grid;grid-template-columns:auto minmax(0,1fr);align-items:start;column-gap:var(--switch-gap);min-inline-size:0;vertical-align:middle;cursor:pointer;user-select:none;-webkit-user-drag:none;outline:none;color:var(--switch-label-color);font-family:var(--sans-serif);font-size:var(--switch-label-fs);line-height:var(--switch-label-lh);font-feature-settings:"ss02","ss05","tnum";&:before,&:after{grid-column:1;grid-row:1 / -1;align-self:start;box-sizing:border-box;content:"";position:relative}&:before{z-index:0;box-sizing:border-box;inline-size:var(--switch-track-inline-size);block-size:var(--switch-track-block-size);margin-block-start:calc((var(--switch-label-lh) - var(--switch-track-block-size)) / 2);border-radius:var(--switch-track-round);background:transparent;border:1.5px solid var(--switch-track-off-stroke);transition:background-color .15s ease-out,border-color .15s ease-out}&:after{z-index:2;justify-self:start;inline-size:var(--switch-thumb-size-off);block-size:var(--switch-thumb-size-off);margin-inline-start:var(--switch-thumb-inset-off);margin-block-start:calc((var(--switch-label-lh) - var(--switch-thumb-size-off)) / 2);border-radius:var(--switch-thumb-round);background:var(--switch-thumb-off);box-shadow:none;transition:transform .15s ease-out,inline-size .15s ease-out,block-size .15s ease-out,margin-inline-start .15s ease-out,margin-block-start .15s ease-out,background-color .15s ease-out,box-shadow .15s ease-out}&[label-position=start]{grid-template-columns:minmax(0,1fr) auto;&:before,&:after{grid-column:2}a-switch-label,a-switch-hint{grid-column:1}}&[round]{--switch-track-round: var(--switch-round, attr(round type(<length>), 999px));--switch-thumb-round: max(0px, calc(var(--switch-track-round) - 3px))}&:state(checked){&:before{background:var(--switch-track-on);border-color:transparent}&:after{inline-size:var(--switch-thumb-size);block-size:var(--switch-thumb-size);margin-inline-start:var(--switch-thumb-inset);margin-block-start:calc((var(--switch-label-lh) - var(--switch-thumb-size)) / 2);transform:translate(var(--switch-thumb-travel));background:var(--switch-thumb);box-shadow:0 1px 2px color-mix(in oklch,#44374b 25%,transparent)}}@media(hover:hover)and (pointer:fine){&:not(:disabled):not(:state(checked)):hover:before{border-color:var(--switch-track-off-stroke-hover)}&:not(:disabled):hover:state(checked):before{background:var(--switch-track-on-hover)}}&:not(:disabled):not(:state(checked)):active:before{border-color:var(--switch-track-off-stroke-active)}&:not(:disabled):active:state(checked):before{background:var(--switch-track-on-active)}&:focus-visible:before{outline:1px solid var(--focus-ring);outline-offset:1px}&:disabled{cursor:not-allowed;color:var(--switch-label-color-disabled);&:before{background:var(--switch-track-disabled);border-color:var(--switch-track-disabled);transition:none}&:after{box-shadow:none;transition:none}&:state(checked){&:before{background:color-mix(in oklch,var(--switch-track-on) 50%,transparent);border-color:transparent}&:after{background:color-mix(in oklch,var(--switch-thumb) 50%,transparent);box-shadow:0 1px 2px color-mix(in oklch,#44374b 12.5%,transparent)}}a-switch-hint{color:var(--switch-label-color-disabled)}}&[size=small]{--switch-gap: 6px;--switch-track-inline-size: 26px;--switch-track-block-size: 16px;--switch-thumb-size: 10px;--switch-thumb-size-off: 8px;--switch-thumb-inset-off: 4px;--switch-thumb-travel: 11px;--switch-label-fs: 13px;--switch-label-lh: 16px;--switch-hint-fs: 12px;--switch-hint-lh: 14px}&[size=large]{--switch-track-inline-size: 34px;--switch-track-block-size: 20px;--switch-thumb-size: 14px;--switch-thumb-size-off: 11px;--switch-thumb-inset-off: 5px;--switch-thumb-travel: 15px;--switch-label-fs: 17px;--switch-label-lh: 22px;--switch-hint-fs: 15px;--switch-hint-lh: 19px}}a-switch-label,a-switch-hint{display:block;grid-column:2;min-inline-size:0}a-switch-hint{color:var(--switch-hint-color);font-size:var(--switch-hint-fs);line-height:var(--switch-hint-lh);margin-block-start:2px}a-switch[tone=brand]{--switch-tone-source: var(--anta-seed-brand);--switch-off-tone-source: var(--anta-seed-brand)}a-switch[tone=neutral]{--switch-tone-source: var(--anta-seed-neutral);--switch-off-tone-source: var(--anta-seed-neutral)}a-switch[tone=info]{--switch-tone-source: var(--anta-seed-info);--switch-off-tone-source: var(--anta-seed-info)}a-switch[tone=success]{--switch-tone-source: var(--anta-seed-success);--switch-off-tone-source: var(--anta-seed-success)}a-switch[tone=warning]{--switch-tone-source: var(--anta-seed-warning);--switch-off-tone-source: var(--anta-seed-warning)}a-switch[tone=critical]{--switch-tone-source: var(--anta-seed-critical);--switch-off-tone-source: var(--anta-seed-critical)}a-switch[tone]:not([tone=""],[tone=neutral]){--_switch-off-track: oklch(from var(--switch-off-tone-source) var(--_switch-tone-l-rest) c h);--_switch-off-chrome: color-mix(in oklch, var(--_switch-off-track) 70%, var(--switch-track-off-stroke-neutral));--switch-track-off-stroke: oklch(from var(--_switch-off-chrome) calc(l + .17) c h);--switch-track-off-stroke-hover: oklch(from var(--_switch-off-chrome) calc(l + .1) c h);--switch-track-off-stroke-active: var(--_switch-off-chrome);--switch-thumb-off: var(--_switch-off-chrome)}a-switch[tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]){--switch-tone-source: attr(tone type(<color>), transparent);--switch-off-tone-source: attr(tone type(<color>), transparent)}a-switch[tone-selected=brand]{--switch-tone-source: var(--anta-seed-brand)}a-switch[tone-selected=neutral]{--switch-tone-source: var(--anta-seed-neutral)}a-switch[tone-selected=info]{--switch-tone-source: var(--anta-seed-info)}a-switch[tone-selected=success]{--switch-tone-source: var(--anta-seed-success)}a-switch[tone-selected=warning]{--switch-tone-source: var(--anta-seed-warning)}a-switch[tone-selected=critical]{--switch-tone-source: var(--anta-seed-critical)}a-switch[tone-selected]:not([tone-selected=""],[tone-selected=brand],[tone-selected=neutral],[tone-selected=info],[tone-selected=success],[tone-selected=warning],[tone-selected=critical]){--switch-tone-source: attr(tone-selected type(<color>), transparent)}.dark a-switch{--switch-track-disabled: color-mix(in oklch, #e4d1ef 10%, transparent);--switch-thumb: #ece9ec;--switch-thumb-off: var(--switch-track-off-stroke);--_switch-tone-l-rest: .47;--_switch-tone-l-hover: .53;--_switch-tone-l-active: .58}.dark a-switch[tone]:not([tone=""],[tone=neutral]){--switch-track-off-stroke: var(--_switch-off-chrome);--switch-track-off-stroke-hover: oklch(from var(--_switch-off-chrome) calc(l + .1) c h);--switch-track-off-stroke-active: oklch(from var(--_switch-off-chrome) calc(l + .17) c h)}@media(forced-colors:active){a-switch:before,a-switch:after{forced-color-adjust:none}a-switch:before{background-color:Canvas;border-color:CanvasText}a-switch:after{background-color:CanvasText;box-shadow:none}a-switch:state(checked):before{background-color:CanvasText;border-color:CanvasText}a-switch:state(checked):after{background-color:Canvas}a-switch:disabled:before{background-color:Canvas;border-color:GrayText}a-switch:disabled:after{background-color:GrayText}a-switch:disabled:state(checked):before{background-color:GrayText;border-color:GrayText}a-switch:disabled:state(checked):after{background-color:Canvas}}}
+@layer anta{a-switch{--switch-gap: 8px;--switch-track-inline-size: 30px;--switch-track-block-size: 18px;--switch-thumb-size: 12px;--switch-thumb-size-off: 10px;--switch-thumb-inset: 2px;--switch-thumb-inset-off: 4px;--switch-thumb-travel: 13px;--switch-track-round: 999px;--switch-thumb-round: 999px;--switch-label-fs: 15px;--switch-label-lh: 20px;--switch-track-off-stroke-neutral: var(--border-3);--switch-track-off-stroke: var(--switch-track-off-stroke-neutral);--switch-track-off-stroke-hover: var(--border-2);--switch-track-off-stroke-active: var(--border-1);--switch-track-disabled: color-mix(in oklch, #44374b 10%, transparent);--switch-thumb: var(--bg-1);--switch-thumb-off: var(--switch-track-off-stroke);--switch-tone-source: var(--anta-seed-brand);--switch-off-tone-source: var(--anta-seed-brand);--_switch-tone-l-rest: .56;--_switch-tone-l-hover: .48;--_switch-tone-l-active: .42;--switch-track-on: oklch(from var(--switch-tone-source) var(--_switch-tone-l-rest) c h);--switch-track-on-hover: oklch(from var(--switch-tone-source) var(--_switch-tone-l-hover) c h);--switch-track-on-active: oklch(from var(--switch-tone-source) var(--_switch-tone-l-active) c h);--switch-label-color: var(--text-2);--switch-label-color-disabled: var(--text-4);--switch-hint-color: var(--text-3);--switch-hint-fs: 13px;--switch-hint-lh: 16px;display:inline-grid;grid-template-columns:auto minmax(0,1fr);align-items:start;column-gap:var(--switch-gap);min-inline-size:0;vertical-align:middle;cursor:pointer;user-select:none;-webkit-user-drag:none;outline:none;color:var(--switch-label-color);font-family:var(--sans-serif);font-size:var(--switch-label-fs);line-height:var(--switch-label-lh);font-feature-settings:"ss02","ss05","tnum";&:before,&:after{grid-column:1;grid-row:1 / -1;align-self:start;box-sizing:border-box;content:"";position:relative}&:before{z-index:0;box-sizing:border-box;inline-size:var(--switch-track-inline-size);block-size:var(--switch-track-block-size);margin-block-start:calc((var(--switch-label-lh) - var(--switch-track-block-size)) / 2);border-radius:var(--switch-track-round);background:transparent;border:1.5px solid var(--switch-track-off-stroke);transition:background-color .15s ease-out,border-color .15s ease-out}&:after{z-index:2;justify-self:start;inline-size:var(--switch-thumb-size-off);block-size:var(--switch-thumb-size-off);margin-inline-start:var(--switch-thumb-inset-off);margin-block-start:calc((var(--switch-label-lh) - var(--switch-thumb-size-off)) / 2);border-radius:var(--switch-thumb-round);background:var(--switch-thumb-off);box-shadow:none;transition:transform .15s ease-out,inline-size .15s ease-out,block-size .15s ease-out,margin-inline-start .15s ease-out,margin-block-start .15s ease-out,background-color .15s ease-out,box-shadow .15s ease-out}&[label-position=start]{grid-template-columns:minmax(0,1fr) auto;&:before,&:after{grid-column:2}a-switch-label,a-switch-hint{grid-column:1}}&[round]{--switch-track-round: var(--switch-round, attr(round type(<length>), 999px));--switch-thumb-round: max(0px, calc(var(--switch-track-round) - 3px))}&:state(checked){&:before{background:var(--switch-track-on);border-color:transparent}&:after{inline-size:var(--switch-thumb-size);block-size:var(--switch-thumb-size);margin-inline-start:var(--switch-thumb-inset);margin-block-start:calc((var(--switch-label-lh) - var(--switch-thumb-size)) / 2);transform:translate(var(--switch-thumb-travel));background:var(--switch-thumb);box-shadow:0 1px 2px color-mix(in oklch,#44374b 25%,transparent)}}@media(hover:hover)and (pointer:fine){&:not(:disabled):not(:state(checked)):hover:before{border-color:var(--switch-track-off-stroke-hover)}&:not(:disabled):hover:state(checked):before{background:var(--switch-track-on-hover)}}&:not(:disabled):not(:state(checked)):active:before{border-color:var(--switch-track-off-stroke-active)}&:not(:disabled):active:state(checked):before{background:var(--switch-track-on-active)}&:focus-visible{outline:none}&:focus-visible:before{outline:1px solid var(--focus-ring);outline-offset:1px}&:disabled{cursor:not-allowed;color:var(--switch-label-color-disabled);&:before{background:var(--switch-track-disabled);border-color:var(--switch-track-disabled);transition:none}&:after{box-shadow:none;transition:none}&:state(checked){&:before{background:color-mix(in oklch,var(--switch-track-on) 50%,transparent);border-color:transparent}&:after{background:color-mix(in oklch,var(--switch-thumb) 50%,transparent);box-shadow:0 1px 2px color-mix(in oklch,#44374b 12.5%,transparent)}}a-switch-hint{color:var(--switch-label-color-disabled)}}&[size=small]{--switch-gap: 6px;--switch-track-inline-size: 26px;--switch-track-block-size: 16px;--switch-thumb-size: 10px;--switch-thumb-size-off: 8px;--switch-thumb-inset-off: 4px;--switch-thumb-travel: 11px;--switch-label-fs: 13px;--switch-label-lh: 16px;--switch-hint-fs: 12px;--switch-hint-lh: 14px}&[size=large]{--switch-track-inline-size: 34px;--switch-track-block-size: 20px;--switch-thumb-size: 14px;--switch-thumb-size-off: 11px;--switch-thumb-inset-off: 5px;--switch-thumb-travel: 15px;--switch-label-fs: 17px;--switch-label-lh: 22px;--switch-hint-fs: 15px;--switch-hint-lh: 19px}}a-switch-label,a-switch-hint{display:block;grid-column:2;min-inline-size:0}a-switch-hint{color:var(--switch-hint-color);font-size:var(--switch-hint-fs);line-height:var(--switch-hint-lh);margin-block-start:2px}a-switch[tone=brand]{--switch-tone-source: var(--anta-seed-brand);--switch-off-tone-source: var(--anta-seed-brand)}a-switch[tone=neutral]{--switch-tone-source: var(--anta-seed-neutral);--switch-off-tone-source: var(--anta-seed-neutral)}a-switch[tone=info]{--switch-tone-source: var(--anta-seed-info);--switch-off-tone-source: var(--anta-seed-info)}a-switch[tone=success]{--switch-tone-source: var(--anta-seed-success);--switch-off-tone-source: var(--anta-seed-success)}a-switch[tone=warning]{--switch-tone-source: var(--anta-seed-warning);--switch-off-tone-source: var(--anta-seed-warning)}a-switch[tone=critical]{--switch-tone-source: var(--anta-seed-critical);--switch-off-tone-source: var(--anta-seed-critical)}a-switch[tone]:not([tone=""],[tone=neutral]){--_switch-off-track: oklch(from var(--switch-off-tone-source) var(--_switch-tone-l-rest) c h);--_switch-off-chrome: color-mix(in oklch, var(--_switch-off-track) 70%, var(--switch-track-off-stroke-neutral));--switch-track-off-stroke: oklch(from var(--_switch-off-chrome) calc(l + .17) c h);--switch-track-off-stroke-hover: oklch(from var(--_switch-off-chrome) calc(l + .1) c h);--switch-track-off-stroke-active: var(--_switch-off-chrome);--switch-thumb-off: var(--_switch-off-chrome)}a-switch[tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]){--switch-tone-source: attr(tone type(<color>), transparent);--switch-off-tone-source: attr(tone type(<color>), transparent)}a-switch[tone-selected=brand]{--switch-tone-source: var(--anta-seed-brand)}a-switch[tone-selected=neutral]{--switch-tone-source: var(--anta-seed-neutral)}a-switch[tone-selected=info]{--switch-tone-source: var(--anta-seed-info)}a-switch[tone-selected=success]{--switch-tone-source: var(--anta-seed-success)}a-switch[tone-selected=warning]{--switch-tone-source: var(--anta-seed-warning)}a-switch[tone-selected=critical]{--switch-tone-source: var(--anta-seed-critical)}a-switch[tone-selected]:not([tone-selected=""],[tone-selected=brand],[tone-selected=neutral],[tone-selected=info],[tone-selected=success],[tone-selected=warning],[tone-selected=critical]){--switch-tone-source: attr(tone-selected type(<color>), transparent)}.dark a-switch{--switch-track-disabled: color-mix(in oklch, #e4d1ef 10%, transparent);--switch-thumb: #ece9ec;--switch-thumb-off: var(--switch-track-off-stroke);--_switch-tone-l-rest: .47;--_switch-tone-l-hover: .53;--_switch-tone-l-active: .58}.dark a-switch[tone]:not([tone=""],[tone=neutral]){--switch-track-off-stroke: var(--_switch-off-chrome);--switch-track-off-stroke-hover: oklch(from var(--_switch-off-chrome) calc(l + .1) c h);--switch-track-off-stroke-active: oklch(from var(--_switch-off-chrome) calc(l + .17) c h)}@media(forced-colors:active){a-switch:before,a-switch:after{forced-color-adjust:none}a-switch:before{background-color:Canvas;border-color:CanvasText}a-switch:after{background-color:CanvasText;box-shadow:none}a-switch:state(checked):before{background-color:CanvasText;border-color:CanvasText}a-switch:state(checked):after{background-color:Canvas}a-switch:disabled:before{background-color:Canvas;border-color:GrayText}a-switch:disabled:after{background-color:GrayText}a-switch:disabled:state(checked):before{background-color:GrayText;border-color:GrayText}a-switch:disabled:state(checked):after{background-color:Canvas}}}

package/dist/general_types.d.ts

@@ -813,6 +813,12 @@ export interface AMenuAttributes extends BaseAttributes {
     onactivedescendant?: (e: CustomEvent<{
         id: string | null;
     }>) => void;
+    /** Contain events so they don't bubble out of the menu surface to ancestor /
+     *  document handlers. Space- or comma-separated event names
+     *  (`stop-propagation="click pointerdown"`); a bare / empty attribute defaults to
+     *  `click`. Menu-item / `data-menu-close` selections are always contained; this
+     *  extends containment to whole event types. */
+    'stop-propagation'?: string;
     /** ARIA role — the JSX wrapper sets this to `'menu'`. */
     role?: string;
     'aria-orientation'?: 'vertical' | 'horizontal';

package/dist/theme-anta.css

@@ -1 +1 @@
-:root:root,.light.light{--bg-1: #ffffff;--bg-2: #fbfafb;--bg-3: #f6f4f6;--bg-4: #f1eff1;--bg-5: #ece9ec;--bg-2-brand: #fcfcfe;--bg-3-brand: #f7f6fd;--bg-4-brand: #efeefc;--bg-5-brand: #e9e5fa;--bg-2-success: #f7fcf9;--bg-3-success: #ecf9f0;--bg-4-success: #e2f5e8;--bg-5-success: #d9f2e0;--bg-2-critical: #fefbfb;--bg-3-critical: #fdf2f2;--bg-4-critical: #fcebeb;--bg-5-critical: #fae5e5;--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: #050306;--text-2: #302b31;--text-3: #635b65;--text-4: #878089;--text-5: #9f99a1;--text-1-brand: #2e1e7b;--text-2-brand: #483493;--text-3-brand: #483493cc;--text-4-brand: #48349399;--text-5-brand: #48349366;--text-1-success: #004618;--text-2-success: #1f5c31;--text-3-success: #1f5c31cc;--text-4-success: #1f5c3199;--text-5-success: #1f5c3166;--text-1-critical: #8f1014;--text-2-critical: #a01c1c;--text-3-critical: #a01c1ccc;--text-4-critical: #a01c1c99;--text-5-critical: #a01c1c66;--text-1-warning: #7f410b;--text-2-warning: #995200;--text-3-warning: #995200cc;--text-4-warning: #99520099;--text-5-warning: #99520066;--text-1-info: #003969;--text-2-info: #175082;--text-3-info: #175082cc;--text-4-info: #175082b2;--text-5-info: #17508280;--border-1: #938d96;--border-2: #c1b9c1;--border-3: #d4ced4;--border-4: #e0dce0;--border-5: #ece9ec;--border-1-brand: #9081df;--border-2-brand: #bcb1f1;--border-3-brand: #d2cbf6;--border-4-brand: #ddd8f8;--border-5-brand: #e9e5fa;--border-1-success: #44c169;--border-2-success: #88d7a0;--border-3-success: #b3e5c2;--border-4-success: #c6ecd1;--border-5-success: #d9f2e0;--border-1-critical: #e56c6c;--border-2-critical: #efa4a4;--border-3-critical: #f4c2c2;--border-4-critical: #f7d4d4;--border-5-critical: #fae5e5;--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;--focus-ring: oklch(.55 .2 284.15)}.dark.dark{--bg-1: #000000;--bg-2: #0e0d0f;--bg-3: #121014;--bg-4: #161316;--bg-5: #1a171b;--bg-2-brand: #08060e;--bg-3-brand: #0f0c1d;--bg-4-brand: #130f24;--bg-5-brand: #16132b;--bg-2-success: #030b06;--bg-3-success: #051209;--bg-4-success: #06160b;--bg-5-success: #081b0e;--bg-2-critical: #120303;--bg-3-critical: #210606;--bg-4-critical: #260808;--bg-5-critical: #2e0a0b;--bg-2-warning: #110a03;--bg-3-warning: #1c1105;--bg-4-warning: #231406;--bg-5-warning: #2b1a08;--bg-2-info: #020a12;--bg-3-info: #05131f;--bg-4-info: #071725;--bg-5-info: #0c2337;--text-1: #ece9ec;--text-2: #c1b9c1;--text-3: #9f99a1;--text-4: #776e77;--text-5: #635b65;--text-1-brand: #c5baff;--text-2-brand: #ada0ee;--text-3-brand: #ada0eecc;--text-4-brand: #ada0ee99;--text-5-brand: #ada0ee66;--text-1-success: #9ddeb1;--text-2-success: #74cd8e;--text-3-success: #74cd8ecc;--text-4-success: #74cd8e99;--text-5-success: #74cd8e66;--text-1-critical: #ffabac;--text-2-critical: #e78e90;--text-3-critical: #e78e90cc;--text-4-critical: #e78e9099;--text-5-critical: #e78e9066;--text-1-warning: #f0bf75;--text-2-warning: #e1a452;--text-3-warning: #e1a452cc;--text-4-warning: #e1a45299;--text-5-warning: #e1a45266;--text-1-info: #9ed2ff;--text-2-info: #7db6e8;--text-3-info: #7db6e8cc;--text-4-info: #7db6e899;--text-5-info: #7db6e866;--border-1: hsl(288deg 5.21% 42%);--border-2: hsl(282deg 7.04% 28%);--border-3: hsl(277.5deg 6.56% 20%);--border-4: hsl(290deg 6.52% 14%);--border-5: hsl(285deg 7.14% 10%);--border-1-brand: hsl(250.08deg 59.8% 58%);--border-2-brand: hsl(250deg 50% 42%);--border-3-brand: hsl(252.63deg 47.74% 30%);--border-4-brand: hsl(249.8deg 39.84% 19%);--border-5-brand: hsl(249deg 39.22% 14%);--border-1-success: hsl(138.18deg 49.75% 29%);--border-2-success: hsl(138.26deg 50.36% 20%);--border-3-success: hsl(137.7deg 49.59% 16%);--border-4-success: hsl(138.46deg 52% 10%);--border-5-success: hsl(138.86deg 53.85% 7.5%);--border-1-critical: hsl(0deg 56% 46%);--border-2-critical: hsl(.42deg 63% 30%);--border-3-critical: hsl(0deg 62.21% 23%);--border-4-critical: hsl(359.13deg 59% 15%);--border-5-critical: hsl(359.06deg 63% 11%);--border-1-warning: hsl(32.13deg 80.31% 34%);--border-2-warning: hsl(27.93deg 84.06% 24%);--border-3-warning: hsl(30deg 79.66% 17%);--border-4-warning: hsl(28.75deg 63.16% 12%);--border-5-warning: hsl(28.64deg 66.67% 9%);--border-1-info: hsl(207.82deg 70.2% 40%);--border-2-info: hsl(207.77deg 69.94% 29%);--border-3-info: hsl(208.04deg 69.93% 21%);--border-4-info: hsl(208.52deg 62.89% 14%);--border-5-info: hsl(207.78deg 65.85% 10.5%);--focus-ring: #a897fc}@layer anta{a-button:not([tone]),a[role=button][data-anta]:not([tone]),button[data-anta]:not([tone]),input[data-anta]:is([type=reset],[type=submit]):not([tone]){--button-bg-primary-rest: #635b65;--button-bg-primary-hover: #534c57;--button-bg-primary-active: #49424c;--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}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]{--button-bg-primary-rest: #5f4bc3;--button-bg-primary-hover: #503cb4;--button-bg-primary-active: #483493;--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[data-anta][tone=critical],input[data-anta]:is([type=reset],[type=submit])[tone=critical]{--button-bg-primary-rest: #c9302c;--button-bg-primary-hover: #b02120;--button-bg-primary-active: #a01c1c;--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[data-anta][tone=info],input[data-anta]:is([type=reset],[type=submit])[tone=info]{--button-bg-primary-rest: #1f6eb2;--button-bg-primary-hover: #1a5b93;--button-bg-primary-active: #175082;--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[data-anta][tone=success],input[data-anta]:is([type=reset],[type=submit])[tone=success]{--button-bg-primary-rest: #2a7e43;--button-bg-primary-hover: #226737;--button-bg-primary-active: #1f5c31;--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[data-anta][tone=warning],input[data-anta]:is([type=reset],[type=submit])[tone=warning]{--button-bg-primary-rest: #c37416;--button-bg-primary-hover: #ae6613;--button-bg-primary-active: #995200;--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:not([tone]),.dark a[role=button][data-anta]:not([tone]),.dark button[data-anta]:not([tone]),.dark input[data-anta]:is([type=reset],[type=submit]):not([tone]){--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],.dark button[data-anta][tone=brand],.dark input[data-anta]:is([type=reset],[type=submit])[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],.dark button[data-anta][tone=critical],.dark input[data-anta]:is([type=reset],[type=submit])[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],.dark button[data-anta][tone=info],.dark input[data-anta]:is([type=reset],[type=submit])[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],.dark button[data-anta][tone=success],.dark input[data-anta]:is([type=reset],[type=submit])[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],.dark button[data-anta][tone=warning],.dark input[data-anta]:is([type=reset],[type=submit])[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-checkbox[tone=brand],a-checkbox[tone-selected=brand]{--checkbox-bg-selected: #5f4bc3;--checkbox-bg-selected-hover: #503cb4;--checkbox-bg-selected-active: #483493}a-checkbox[tone=neutral],a-checkbox[tone-selected=neutral]{--checkbox-bg-selected: #878089;--checkbox-bg-selected-hover: #776e77;--checkbox-bg-selected-active: #635b65}a-checkbox[tone=info],a-checkbox[tone-selected=info]{--checkbox-bg-selected: #1f6eb2;--checkbox-bg-selected-hover: #1a5b93;--checkbox-bg-selected-active: #175082}a-checkbox[tone=success],a-checkbox[tone-selected=success]{--checkbox-bg-selected: #2a7e43;--checkbox-bg-selected-hover: #226737;--checkbox-bg-selected-active: #1f5c31}a-checkbox[tone=warning],a-checkbox[tone-selected=warning]{--checkbox-bg-selected: #c37416;--checkbox-bg-selected-hover: #ae6613;--checkbox-bg-selected-active: #995200}a-checkbox[tone=critical],a-checkbox[tone-selected=critical]{--checkbox-bg-selected: #c9302c;--checkbox-bg-selected-hover: #b02120;--checkbox-bg-selected-active: #a01c1c}a-checkbox[tone=brand]{--checkbox-bg: #fcfcfe;--checkbox-border: #bcb1f1;--checkbox-border-hover: #9e8eeb;--checkbox-border-active: #9081df}a-checkbox[tone=info]{--checkbox-bg: #fbfcfe;--checkbox-border: #93c5ec;--checkbox-border-hover: #69ace5;--checkbox-border-active: #56a1e1}a-checkbox[tone=success]{--checkbox-bg: #f7fcf9;--checkbox-border: #88d7a0;--checkbox-border-hover: #5bc87b;--checkbox-border-active: #44c169}a-checkbox[tone=warning]{--checkbox-bg: #fefbf6;--checkbox-border: #edb25a;--checkbox-border-hover: #e09127;--checkbox-border-active: #d88118}a-checkbox[tone=critical]{--checkbox-bg: #fefbfb;--checkbox-border: #efa4a4;--checkbox-border-hover: #e87f7f;--checkbox-border-active: #e56c6c}.dark a-checkbox:not([tone]):not([tone-selected]){--checkbox-border-neutral: #49424c;--checkbox-border-hover: #635b65;--checkbox-border-active: #776e77;--checkbox-bg-selected: #49424c;--checkbox-bg-selected-hover: #534c57;--checkbox-bg-selected-active: #635b65;--checkbox-border-disabled: color-mix(in oklch, #e4d1ef 10%, transparent)}.dark a-checkbox[tone=brand],.dark a-checkbox[tone-selected=brand]{--checkbox-bg-selected: #503cb4;--checkbox-bg-selected-hover: #5f4bc3;--checkbox-bg-selected-active: #7460d7}.dark a-checkbox[tone=neutral],.dark a-checkbox[tone-selected=neutral]{--checkbox-bg-selected: #49424c;--checkbox-bg-selected-hover: #534c57;--checkbox-bg-selected-active: #635b65}.dark a-checkbox[tone=info],.dark a-checkbox[tone-selected=info]{--checkbox-bg-selected: #1a5b93;--checkbox-bg-selected-hover: #1f6eb2;--checkbox-bg-selected-active: #2686d9}.dark a-checkbox[tone=success],.dark a-checkbox[tone-selected=success]{--checkbox-bg-selected: #226737;--checkbox-bg-selected-hover: #2a7e43;--checkbox-bg-selected-active: #329550}.dark a-checkbox[tone=warning],.dark a-checkbox[tone-selected=warning]{--checkbox-bg-selected: #7f410b;--checkbox-bg-selected-hover: #995200;--checkbox-bg-selected-active: #ae6613}.dark a-checkbox[tone=critical],.dark a-checkbox[tone-selected=critical]{--checkbox-bg-selected: #b02120;--checkbox-bg-selected-hover: #c9302c;--checkbox-bg-selected-active: #de4545}.dark a-checkbox[tone=brand]{--checkbox-bg: #0b0916;--checkbox-border: #483493;--checkbox-border-hover: #5f4bc3;--checkbox-border-active: #7460d7}.dark a-checkbox[tone=info]{--checkbox-bg: #040d18;--checkbox-border: #175082;--checkbox-border-hover: #1f6eb2;--checkbox-border-active: #2686d9}.dark a-checkbox[tone=success]{--checkbox-bg: #041008;--checkbox-border: #1f5c31;--checkbox-border-hover: #2a7e43;--checkbox-border-active: #329550}.dark a-checkbox[tone=warning]{--checkbox-bg: #120a03;--checkbox-border: #6a3b0c;--checkbox-border-hover: #995200;--checkbox-border-active: #ae6613}.dark a-checkbox[tone=critical]{--checkbox-bg: #190405;--checkbox-border: #a01c1c;--checkbox-border-hover: #c9302c;--checkbox-border-active: #de4545}a-radio:not([tone]):not([tone-selected]){--radio-border-width: 1.5px;--radio-bg: var(--bg-1);--radio-bg-selected: #878089;--radio-bg-selected-hover: #776e77;--radio-bg-selected-active: #635b65;--radio-border-neutral: #d4ced4;--radio-border: var(--radio-border-neutral);--radio-border-hover: #c1b9c1;--radio-border-active: #9f99a1;--radio-border-disabled: color-mix(in oklch, #44374b 10%, transparent)}a-radio[tone=brand],a-radio[tone-selected=brand],a-radio-group[tone=brand] a-radio:not([tone]),a-radio-group[tone-selected=brand] a-radio:not([tone-selected]){--radio-bg-selected: #5f4bc3;--radio-bg-selected-hover: #503cb4;--radio-bg-selected-active: #483493}a-radio[tone=neutral],a-radio[tone-selected=neutral],a-radio-group[tone=neutral] a-radio:not([tone]),a-radio-group[tone-selected=neutral] a-radio:not([tone-selected]){--radio-bg-selected: #878089;--radio-bg-selected-hover: #776e77;--radio-bg-selected-active: #635b65}a-radio[tone=info],a-radio[tone-selected=info],a-radio-group[tone=info] a-radio:not([tone]),a-radio-group[tone-selected=info] a-radio:not([tone-selected]){--radio-bg-selected: #1f6eb2;--radio-bg-selected-hover: #1a5b93;--radio-bg-selected-active: #175082}a-radio[tone=success],a-radio[tone-selected=success],a-radio-group[tone=success] a-radio:not([tone]),a-radio-group[tone-selected=success] a-radio:not([tone-selected]){--radio-bg-selected: #2a7e43;--radio-bg-selected-hover: #226737;--radio-bg-selected-active: #1f5c31}a-radio[tone=warning],a-radio[tone-selected=warning],a-radio-group[tone=warning] a-radio:not([tone]),a-radio-group[tone-selected=warning] a-radio:not([tone-selected]){--radio-bg-selected: #c37416;--radio-bg-selected-hover: #ae6613;--radio-bg-selected-active: #995200}a-radio[tone=critical],a-radio[tone-selected=critical],a-radio-group[tone=critical] a-radio:not([tone]),a-radio-group[tone-selected=critical] a-radio:not([tone-selected]){--radio-bg-selected: #c9302c;--radio-bg-selected-hover: #b02120;--radio-bg-selected-active: #a01c1c}a-radio[tone=brand],a-radio-group[tone=brand] a-radio:not([tone]){--radio-bg: #fcfcfe;--radio-border: #bcb1f1;--radio-border-hover: #9e8eeb;--radio-border-active: #9081df}a-radio[tone=info],a-radio-group[tone=info] a-radio:not([tone]){--radio-bg: #fbfcfe;--radio-border: #93c5ec;--radio-border-hover: #69ace5;--radio-border-active: #56a1e1}a-radio[tone=success],a-radio-group[tone=success] a-radio:not([tone]){--radio-bg: #f7fcf9;--radio-border: #88d7a0;--radio-border-hover: #5bc87b;--radio-border-active: #44c169}a-radio[tone=warning],a-radio-group[tone=warning] a-radio:not([tone]){--radio-bg: #fefbf6;--radio-border: #edb25a;--radio-border-hover: #e09127;--radio-border-active: #d88118}a-radio[tone=critical],a-radio-group[tone=critical] a-radio:not([tone]){--radio-bg: #fefbfb;--radio-border: #efa4a4;--radio-border-hover: #e87f7f;--radio-border-active: #e56c6c}.dark a-radio:not([tone]):not([tone-selected]){--radio-border-hover: #635b65;--radio-border-active: #776e77;--radio-bg-selected: #49424c;--radio-bg-selected-hover: #534c57;--radio-bg-selected-active: #635b65;--radio-border-disabled: color-mix(in oklch, #e4d1ef 10%, transparent)}.dark a-radio[tone=brand],.dark a-radio[tone-selected=brand],.dark a-radio-group[tone=brand] a-radio:not([tone]),.dark a-radio-group[tone-selected=brand] a-radio:not([tone-selected]){--radio-bg-selected: #503cb4;--radio-bg-selected-hover: #5f4bc3;--radio-bg-selected-active: #7460d7}.dark a-radio[tone=neutral],.dark a-radio[tone-selected=neutral],.dark a-radio-group[tone=neutral] a-radio:not([tone]),.dark a-radio-group[tone-selected=neutral] a-radio:not([tone-selected]){--radio-bg-selected: #49424c;--radio-bg-selected-hover: #534c57;--radio-bg-selected-active: #635b65}.dark a-radio[tone=info],.dark a-radio[tone-selected=info],.dark a-radio-group[tone=info] a-radio:not([tone]),.dark a-radio-group[tone-selected=info] a-radio:not([tone-selected]){--radio-bg-selected: #1a5b93;--radio-bg-selected-hover: #1f6eb2;--radio-bg-selected-active: #2686d9}.dark a-radio[tone=success],.dark a-radio[tone-selected=success],.dark a-radio-group[tone=success] a-radio:not([tone]),.dark a-radio-group[tone-selected=success] a-radio:not([tone-selected]){--radio-bg-selected: #226737;--radio-bg-selected-hover: #2a7e43;--radio-bg-selected-active: #329550}.dark a-radio[tone=warning],.dark a-radio[tone-selected=warning],.dark a-radio-group[tone=warning] a-radio:not([tone]),.dark a-radio-group[tone-selected=warning] a-radio:not([tone-selected]){--radio-bg-selected: #7f410b;--radio-bg-selected-hover: #995200;--radio-bg-selected-active: #ae6613}.dark a-radio[tone=critical],.dark a-radio[tone-selected=critical],.dark a-radio-group[tone=critical] a-radio:not([tone]),.dark a-radio-group[tone-selected=critical] a-radio:not([tone-selected]){--radio-bg-selected: #b02120;--radio-bg-selected-hover: #c9302c;--radio-bg-selected-active: #de4545}.dark a-radio[tone=brand],.dark a-radio-group[tone=brand] a-radio:not([tone]){--radio-bg: #0b0916;--radio-border: #483493;--radio-border-hover: #5f4bc3;--radio-border-active: #7460d7}.dark a-radio[tone=info],.dark a-radio-group[tone=info] a-radio:not([tone]){--radio-bg: #040d18;--radio-border: #175082;--radio-border-hover: #1f6eb2;--radio-border-active: #2686d9}.dark a-radio[tone=success],.dark a-radio-group[tone=success] a-radio:not([tone]){--radio-bg: #041008;--radio-border: #1f5c31;--radio-border-hover: #2a7e43;--radio-border-active: #329550}.dark a-radio[tone=warning],.dark a-radio-group[tone=warning] a-radio:not([tone]){--radio-bg: #120a03;--radio-border: #6a3b0c;--radio-border-hover: #995200;--radio-border-active: #ae6613}.dark a-radio[tone=critical],.dark a-radio-group[tone=critical] a-radio:not([tone]){--radio-bg: #190405;--radio-border: #a01c1c;--radio-border-hover: #c9302c;--radio-border-active: #de4545}a-tag:not([tone]){--tag-tint: #44374b;--tag-bg-solid: #776e77;--tag-edge: var(--tag-tint);--_tag-bg-alpha: 7%;--_tag-border-alpha: 15%;--_tag-edge-alpha: 25%}a-tag[tone=brand]{--tag-tint: #7460d7;--tag-bg-solid: #7460d7;--tag-edge: var(--text-2-brand);--_tag-bg-alpha: 10%;--_tag-edge-alpha: 20%}a-tag[tone=info]{--tag-tint: #2686d9;--tag-bg-solid: #2686d9;--tag-edge: var(--text-2-info);--_tag-bg-alpha: 10%;--_tag-edge-alpha: 20%}a-tag[tone=success]{--tag-tint: #329550;--tag-bg-solid: #329550;--tag-edge: var(--text-2-success);--_tag-bg-alpha: 10%;--_tag-edge-alpha: 20%}a-tag[tone=warning]{--tag-tint: #c37416;--tag-bg-solid: #ae6613;--tag-edge: var(--text-2-warning);--_tag-bg-alpha: 10%;--_tag-edge-alpha: 20%}a-tag[tone=critical]{--tag-tint: #de4545;--tag-bg-solid: #de4545;--tag-edge: var(--text-2-critical);--_tag-bg-alpha: 10%;--_tag-edge-alpha: 20%}.dark a-tag:not([tone]),.dark a-tag[tone=neutral]{--tag-tint: #e4d1ef;--tag-bg-solid: #635b65;--_tag-bg-alpha: 12%}.dark a-tag[tone=brand],.dark a-tag[tone=info],.dark a-tag[tone=success],.dark a-tag[tone=warning],.dark a-tag[tone=critical]{--_tag-bg-alpha: 20%;--_tag-border-alpha: 25%;--_tag-edge-alpha: 30%}.dark a-tag[tone=brand]{--tag-bg-solid: #5f4bc3}.dark a-tag[tone=info]{--tag-bg-solid: #1f6eb2}.dark a-tag[tone=success]{--tag-bg-solid: #2a7e43}.dark a-tag[tone=warning]{--tag-bg-solid: #995200}.dark a-tag[tone=critical]{--tag-bg-solid: #c9302c}.dark a-tag[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--_tag-bg-alpha: 20%;--_tag-border-alpha: 25%;--_tag-edge-alpha: 30%}.dark a-tabs{--tabs-track-bg: color-mix(in oklch, #e4d1ef 7%, transparent);--tab-secondary-bg: color-mix(in oklch, #e4d1ef 8%, transparent)}a-input:not([tone]){--input-bg: var(--bg-1);--input-border: var(--border-2);--input-hint: var(--text-3)}a-input[status=critical]{--input-bg: #fefbfb;--input-border: #de4545;--input-hint: #c9302c}a-input[status=warning]{--input-bg: #fefbf6;--input-border: #ae6613;--input-hint: #995200}a-input[status=success]{--input-bg: #f7fcf9;--input-border: #329550;--input-hint: #2a7e43}a-input[status=info]{--input-bg: #fbfcfe;--input-border: #2686d9;--input-hint: #175082}a-input[status=brand]{--input-bg: #fcfcfe;--input-border: #7460d7;--input-hint: #5f4bc3}.dark a-input[status=critical]{--input-bg: #1f0506;--input-border: #c9302c;--input-hint: #e25858}.dark a-input[status=warning]{--input-bg: #120a03;--input-border: #995200;--input-hint: #c37416}.dark a-input[status=success]{--input-bg: #041008;--input-border: #2a7e43;--input-hint: #3aab5c}.dark a-input[status=info]{--input-bg: #040d18;--input-border: #1f6eb2;--input-hint: #3e93dd}.dark a-input[status=brand]{--input-bg: #0b0916;--input-border: #5f4bc3;--input-hint: #8270db}a-input:disabled{--input-bg: #44374b12;--input-border: #44374b26;--input-hint: var(--text-5)}a-input[status]:disabled{--input-bg: #44374b12;--input-border: #44374b26;--input-hint: var(--text-5)}.dark a-input:disabled{--input-bg: #e4d1ef0d;--input-border: #e4d1ef1f}.dark a-input[status]:disabled{--input-bg: #e4d1ef0d;--input-border: #e4d1ef1f;--input-hint: var(--text-5)}.dark a-input:not([status]):not([tone]){--input-border: #49424c}.dark a-input[status=success]{--input-border: var(--border-1-success)}a-input-time{--input-time-bg: var(--bg-1);--input-time-border: var(--border-2);--input-time-border-hover: var(--border-1);--input-time-hint: var(--text-3)}a-input-time[status=critical]{--input-time-bg: #fefbfb;--input-time-border: #de4545;--input-time-border-hover: #de4545;--input-time-hint: #c9302c}a-input-time[status=warning]{--input-time-bg: #fefbf6;--input-time-border: #ae6613;--input-time-border-hover: #ae6613;--input-time-hint: #995200}a-input-time[status=success]{--input-time-bg: #f7fcf9;--input-time-border: #329550;--input-time-border-hover: #329550;--input-time-hint: #2a7e43}a-input-time[status=info]{--input-time-bg: #fbfcfe;--input-time-border: #2686d9;--input-time-border-hover: #2686d9;--input-time-hint: #175082}a-input-time[status=brand]{--input-time-bg: #fcfcfe;--input-time-border: #7460d7;--input-time-border-hover: #7460d7;--input-time-hint: #5f4bc3}.dark a-input-time[status=critical]{--input-time-bg: #1f0506;--input-time-border: #c9302c;--input-time-border-hover: #c9302c;--input-time-hint: #e25858}.dark a-input-time[status=warning]{--input-time-bg: #120a03;--input-time-border: #995200;--input-time-border-hover: #995200;--input-time-hint: #c37416}.dark a-input-time[status=success]{--input-time-bg: #041008;--input-time-border: var(--border-1-success);--input-time-border-hover: var(--border-1-success);--input-time-hint: #3aab5c}.dark a-input-time[status=info]{--input-time-bg: #040d18;--input-time-border: #1f6eb2;--input-time-border-hover: #1f6eb2;--input-time-hint: #3e93dd}.dark a-input-time[status=brand]{--input-time-bg: #0b0916;--input-time-border: #5f4bc3;--input-time-border-hover: #5f4bc3;--input-time-hint: #8270db}a-input-time:disabled{--input-time-bg: #44374b12;--input-time-border: #44374b26;--input-time-border-hover: #44374b26;--input-time-hint: var(--text-5)}.dark a-input-time:disabled{--input-time-bg: #e4d1ef0d;--input-time-border: #e4d1ef1f;--input-time-border-hover: #e4d1ef1f}.dark a-input-time:not([status]){--input-time-border: #49424c;--input-time-border-hover: #635b65}}
+:root:root,.light.light{--bg-1: #ffffff;--bg-2: #fbfafb;--bg-3: #f6f4f6;--bg-4: #f1eff1;--bg-5: #ece9ec;--bg-2-brand: #fcfcfe;--bg-3-brand: #f7f6fd;--bg-4-brand: #efeefc;--bg-5-brand: #e9e5fa;--bg-2-success: #f7fcf9;--bg-3-success: #ecf9f0;--bg-4-success: #e2f5e8;--bg-5-success: #d9f2e0;--bg-2-critical: #fefbfb;--bg-3-critical: #fdf2f2;--bg-4-critical: #fcebeb;--bg-5-critical: #fae5e5;--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: #050306;--text-2: #302b31;--text-3: #635b65;--text-4: #878089;--text-5: #9f99a1;--text-1-brand: #2e1e7b;--text-2-brand: #483493;--text-3-brand: #483493cc;--text-4-brand: #48349399;--text-5-brand: #48349366;--text-1-success: #004618;--text-2-success: #1f5c31;--text-3-success: #1f5c31cc;--text-4-success: #1f5c3199;--text-5-success: #1f5c3166;--text-1-critical: #8f1014;--text-2-critical: #a01c1c;--text-3-critical: #a01c1ccc;--text-4-critical: #a01c1c99;--text-5-critical: #a01c1c66;--text-1-warning: #7f410b;--text-2-warning: #995200;--text-3-warning: #995200cc;--text-4-warning: #99520099;--text-5-warning: #99520066;--text-1-info: #003969;--text-2-info: #175082;--text-3-info: #175082cc;--text-4-info: #175082b2;--text-5-info: #17508280;--border-1: #938d96;--border-2: #c1b9c1;--border-3: #d4ced4;--border-4: #e0dce0;--border-5: #ece9ec;--border-1-brand: #9081df;--border-2-brand: #bcb1f1;--border-3-brand: #d2cbf6;--border-4-brand: #ddd8f8;--border-5-brand: #e9e5fa;--border-1-success: #44c169;--border-2-success: #88d7a0;--border-3-success: #b3e5c2;--border-4-success: #c6ecd1;--border-5-success: #d9f2e0;--border-1-critical: #e56c6c;--border-2-critical: #efa4a4;--border-3-critical: #f4c2c2;--border-4-critical: #f7d4d4;--border-5-critical: #fae5e5;--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;--focus-ring: oklch(.55 .2 284.15)}.dark.dark{--bg-1: #000000;--bg-2: #0e0d0f;--bg-3: #121014;--bg-4: #161316;--bg-5: #1a171b;--bg-2-brand: #08060e;--bg-3-brand: #0f0c1d;--bg-4-brand: #130f24;--bg-5-brand: #16132b;--bg-2-success: #030b06;--bg-3-success: #051209;--bg-4-success: #06160b;--bg-5-success: #081b0e;--bg-2-critical: #120303;--bg-3-critical: #210606;--bg-4-critical: #260808;--bg-5-critical: #2e0a0b;--bg-2-warning: #110a03;--bg-3-warning: #1c1105;--bg-4-warning: #231406;--bg-5-warning: #2b1a08;--bg-2-info: #020a12;--bg-3-info: #05131f;--bg-4-info: #071725;--bg-5-info: #0c2337;--text-1: #ece9ec;--text-2: #c1b9c1;--text-3: #9f99a1;--text-4: #776e77;--text-5: #635b65;--text-1-brand: #c5baff;--text-2-brand: #ada0ee;--text-3-brand: #ada0eecc;--text-4-brand: #ada0ee99;--text-5-brand: #ada0ee66;--text-1-success: #9ddeb1;--text-2-success: #74cd8e;--text-3-success: #74cd8ecc;--text-4-success: #74cd8e99;--text-5-success: #74cd8e66;--text-1-critical: #ffabac;--text-2-critical: #e78e90;--text-3-critical: #e78e90cc;--text-4-critical: #e78e9099;--text-5-critical: #e78e9066;--text-1-warning: #f0bf75;--text-2-warning: #e1a452;--text-3-warning: #e1a452cc;--text-4-warning: #e1a45299;--text-5-warning: #e1a45266;--text-1-info: #9ed2ff;--text-2-info: #7db6e8;--text-3-info: #7db6e8cc;--text-4-info: #7db6e899;--text-5-info: #7db6e866;--border-1: hsl(288deg 5.21% 42%);--border-2: hsl(282deg 7.04% 28%);--border-3: hsl(277.5deg 6.56% 20%);--border-4: hsl(290deg 6.52% 14%);--border-5: hsl(285deg 7.14% 10%);--border-1-brand: hsl(250.08deg 59.8% 58%);--border-2-brand: hsl(250deg 50% 42%);--border-3-brand: hsl(252.63deg 47.74% 30%);--border-4-brand: hsl(249.8deg 39.84% 19%);--border-5-brand: hsl(249deg 39.22% 14%);--border-1-success: hsl(138.18deg 49.75% 29%);--border-2-success: hsl(138.26deg 50.36% 20%);--border-3-success: hsl(137.7deg 49.59% 16%);--border-4-success: hsl(138.46deg 52% 10%);--border-5-success: hsl(138.86deg 53.85% 7.5%);--border-1-critical: hsl(0deg 56% 46%);--border-2-critical: hsl(.42deg 63% 30%);--border-3-critical: hsl(0deg 62.21% 23%);--border-4-critical: hsl(359.13deg 59% 15%);--border-5-critical: hsl(359.06deg 63% 11%);--border-1-warning: hsl(32.13deg 80.31% 34%);--border-2-warning: hsl(27.93deg 84.06% 24%);--border-3-warning: hsl(30deg 79.66% 17%);--border-4-warning: hsl(28.75deg 63.16% 12%);--border-5-warning: hsl(28.64deg 66.67% 9%);--border-1-info: hsl(207.82deg 70.2% 40%);--border-2-info: hsl(207.77deg 69.94% 29%);--border-3-info: hsl(208.04deg 69.93% 21%);--border-4-info: hsl(208.52deg 62.89% 14%);--border-5-info: hsl(207.78deg 65.85% 10.5%);--focus-ring: #a897fc}@layer anta{a-button:not([tone]),a-button[tone=neutral],a[role=button][data-anta]:not([tone]),a[role=button][data-anta][tone=neutral],button[data-anta]:not([tone]),button[data-anta][tone=neutral],input[data-anta]:is([type=reset],[type=submit]):not([tone]),input[data-anta]:is([type=reset],[type=submit])[tone=neutral]{--button-bg-primary-rest: #635b65;--button-bg-primary-hover: #534c57;--button-bg-primary-active: #49424c;--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}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]{--button-bg-primary-rest: #5f4bc3;--button-bg-primary-hover: #503cb4;--button-bg-primary-active: #483493;--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[data-anta][tone=critical],input[data-anta]:is([type=reset],[type=submit])[tone=critical]{--button-bg-primary-rest: #c9302c;--button-bg-primary-hover: #b02120;--button-bg-primary-active: #a01c1c;--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[data-anta][tone=info],input[data-anta]:is([type=reset],[type=submit])[tone=info]{--button-bg-primary-rest: #1f6eb2;--button-bg-primary-hover: #1a5b93;--button-bg-primary-active: #175082;--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[data-anta][tone=success],input[data-anta]:is([type=reset],[type=submit])[tone=success]{--button-bg-primary-rest: #2a7e43;--button-bg-primary-hover: #226737;--button-bg-primary-active: #1f5c31;--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[data-anta][tone=warning],input[data-anta]:is([type=reset],[type=submit])[tone=warning]{--button-bg-primary-rest: #c37416;--button-bg-primary-hover: #ae6613;--button-bg-primary-active: #995200;--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:not([tone]),.dark a-button[tone=neutral],.dark a[role=button][data-anta]:not([tone]),.dark a[role=button][data-anta][tone=neutral],.dark button[data-anta]:not([tone]),.dark button[data-anta][tone=neutral],.dark input[data-anta]:is([type=reset],[type=submit]):not([tone]),.dark input[data-anta]:is([type=reset],[type=submit])[tone=neutral]{--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],.dark button[data-anta][tone=brand],.dark input[data-anta]:is([type=reset],[type=submit])[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],.dark button[data-anta][tone=critical],.dark input[data-anta]:is([type=reset],[type=submit])[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],.dark button[data-anta][tone=info],.dark input[data-anta]:is([type=reset],[type=submit])[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],.dark button[data-anta][tone=success],.dark input[data-anta]:is([type=reset],[type=submit])[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],.dark button[data-anta][tone=warning],.dark input[data-anta]:is([type=reset],[type=submit])[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-checkbox:not([tone]):not([tone-selected]){--checkbox-bg-selected: #878089;--checkbox-bg-selected-hover: #776e77;--checkbox-bg-selected-active: #635b65}a-checkbox[tone=brand]{--checkbox-bg-selected: #5f4bc3;--checkbox-bg-selected-hover: #503cb4;--checkbox-bg-selected-active: #483493}a-checkbox[tone=neutral]{--checkbox-bg-selected: #878089;--checkbox-bg-selected-hover: #776e77;--checkbox-bg-selected-active: #635b65}a-checkbox[tone=info]{--checkbox-bg-selected: #1f6eb2;--checkbox-bg-selected-hover: #1a5b93;--checkbox-bg-selected-active: #175082}a-checkbox[tone=success]{--checkbox-bg-selected: #2a7e43;--checkbox-bg-selected-hover: #226737;--checkbox-bg-selected-active: #1f5c31}a-checkbox[tone=warning]{--checkbox-bg-selected: #c37416;--checkbox-bg-selected-hover: #ae6613;--checkbox-bg-selected-active: #995200}a-checkbox[tone=critical]{--checkbox-bg-selected: #c9302c;--checkbox-bg-selected-hover: #b02120;--checkbox-bg-selected-active: #a01c1c}a-checkbox[tone=brand]{--checkbox-bg: #fcfcfe;--checkbox-border: #bcb1f1;--checkbox-border-hover: #9e8eeb;--checkbox-border-active: #9081df}a-checkbox[tone=info]{--checkbox-bg: #fbfcfe;--checkbox-border: #93c5ec;--checkbox-border-hover: #69ace5;--checkbox-border-active: #56a1e1}a-checkbox[tone=success]{--checkbox-bg: #f7fcf9;--checkbox-border: #88d7a0;--checkbox-border-hover: #5bc87b;--checkbox-border-active: #44c169}a-checkbox[tone=warning]{--checkbox-bg: #fefbf6;--checkbox-border: #edb25a;--checkbox-border-hover: #e09127;--checkbox-border-active: #d88118}a-checkbox[tone=critical]{--checkbox-bg: #fefbfb;--checkbox-border: #efa4a4;--checkbox-border-hover: #e87f7f;--checkbox-border-active: #e56c6c}a-checkbox[tone-selected=brand]{--checkbox-bg-selected: #5f4bc3;--checkbox-bg-selected-hover: #503cb4;--checkbox-bg-selected-active: #483493}a-checkbox[tone-selected=neutral]{--checkbox-bg-selected: #878089;--checkbox-bg-selected-hover: #776e77;--checkbox-bg-selected-active: #635b65}a-checkbox[tone-selected=info]{--checkbox-bg-selected: #1f6eb2;--checkbox-bg-selected-hover: #1a5b93;--checkbox-bg-selected-active: #175082}a-checkbox[tone-selected=success]{--checkbox-bg-selected: #2a7e43;--checkbox-bg-selected-hover: #226737;--checkbox-bg-selected-active: #1f5c31}a-checkbox[tone-selected=warning]{--checkbox-bg-selected: #c37416;--checkbox-bg-selected-hover: #ae6613;--checkbox-bg-selected-active: #995200}a-checkbox[tone-selected=critical]{--checkbox-bg-selected: #c9302c;--checkbox-bg-selected-hover: #b02120;--checkbox-bg-selected-active: #a01c1c}a-checkbox[tone-selected]:not([tone-selected=""],[tone-selected=brand],[tone-selected=neutral],[tone-selected=info],[tone-selected=success],[tone-selected=warning],[tone-selected=critical]){--checkbox-bg-selected: oklch(from var(--checkbox-tone-source) var(--_tone-l-rest) c h);--checkbox-bg-selected-hover: oklch(from var(--checkbox-tone-source) var(--_tone-l-hover) c h);--checkbox-bg-selected-active: oklch(from var(--checkbox-tone-source) var(--_tone-l-active) c h)}.dark a-checkbox:not([tone]):not([tone-selected]){--checkbox-border-neutral: #49424c;--checkbox-border-hover: #635b65;--checkbox-border-active: #776e77;--checkbox-bg-selected: #49424c;--checkbox-bg-selected-hover: #534c57;--checkbox-bg-selected-active: #635b65;--checkbox-border-disabled: color-mix(in oklch, #e4d1ef 10%, transparent)}.dark a-checkbox[tone=brand]{--checkbox-bg-selected: #503cb4;--checkbox-bg-selected-hover: #5f4bc3;--checkbox-bg-selected-active: #7460d7}.dark a-checkbox[tone=neutral]{--checkbox-bg-selected: #49424c;--checkbox-bg-selected-hover: #534c57;--checkbox-bg-selected-active: #635b65}.dark a-checkbox[tone=info]{--checkbox-bg-selected: #1a5b93;--checkbox-bg-selected-hover: #1f6eb2;--checkbox-bg-selected-active: #2686d9}.dark a-checkbox[tone=success]{--checkbox-bg-selected: #226737;--checkbox-bg-selected-hover: #2a7e43;--checkbox-bg-selected-active: #329550}.dark a-checkbox[tone=warning]{--checkbox-bg-selected: #7f410b;--checkbox-bg-selected-hover: #995200;--checkbox-bg-selected-active: #ae6613}.dark a-checkbox[tone=critical]{--checkbox-bg-selected: #b02120;--checkbox-bg-selected-hover: #c9302c;--checkbox-bg-selected-active: #de4545}.dark a-checkbox[tone=brand]{--checkbox-bg: #0b0916;--checkbox-border: #483493;--checkbox-border-hover: #5f4bc3;--checkbox-border-active: #7460d7}.dark a-checkbox[tone=info]{--checkbox-bg: #040d18;--checkbox-border: #175082;--checkbox-border-hover: #1f6eb2;--checkbox-border-active: #2686d9}.dark a-checkbox[tone=success]{--checkbox-bg: #041008;--checkbox-border: #1f5c31;--checkbox-border-hover: #2a7e43;--checkbox-border-active: #329550}.dark a-checkbox[tone=warning]{--checkbox-bg: #120a03;--checkbox-border: #6a3b0c;--checkbox-border-hover: #995200;--checkbox-border-active: #ae6613}.dark a-checkbox[tone=critical]{--checkbox-bg: #190405;--checkbox-border: #a01c1c;--checkbox-border-hover: #c9302c;--checkbox-border-active: #de4545}.dark a-checkbox[tone-selected=brand]{--checkbox-bg-selected: #503cb4;--checkbox-bg-selected-hover: #5f4bc3;--checkbox-bg-selected-active: #7460d7}.dark a-checkbox[tone-selected=neutral]{--checkbox-bg-selected: #49424c;--checkbox-bg-selected-hover: #534c57;--checkbox-bg-selected-active: #635b65}.dark a-checkbox[tone-selected=info]{--checkbox-bg-selected: #1a5b93;--checkbox-bg-selected-hover: #1f6eb2;--checkbox-bg-selected-active: #2686d9}.dark a-checkbox[tone-selected=success]{--checkbox-bg-selected: #226737;--checkbox-bg-selected-hover: #2a7e43;--checkbox-bg-selected-active: #329550}.dark a-checkbox[tone-selected=warning]{--checkbox-bg-selected: #7f410b;--checkbox-bg-selected-hover: #995200;--checkbox-bg-selected-active: #ae6613}.dark a-checkbox[tone-selected=critical]{--checkbox-bg-selected: #b02120;--checkbox-bg-selected-hover: #c9302c;--checkbox-bg-selected-active: #de4545}.dark a-checkbox[tone-selected]:not([tone-selected=""],[tone-selected=brand],[tone-selected=neutral],[tone-selected=info],[tone-selected=success],[tone-selected=warning],[tone-selected=critical]){--checkbox-bg-selected: oklch(from var(--checkbox-tone-source) var(--_tone-l-rest) c h);--checkbox-bg-selected-hover: oklch(from var(--checkbox-tone-source) var(--_tone-l-hover) c h);--checkbox-bg-selected-active: oklch(from var(--checkbox-tone-source) var(--_tone-l-active) c h)}a-radio:not([tone]):not([tone-selected]){--radio-border-width: 1.5px;--radio-bg: var(--bg-1);--radio-bg-selected: #878089;--radio-bg-selected-hover: #776e77;--radio-bg-selected-active: #635b65;--radio-border-neutral: #d4ced4;--radio-border: var(--radio-border-neutral);--radio-border-hover: #c1b9c1;--radio-border-active: #9f99a1;--radio-border-disabled: color-mix(in oklch, #44374b 10%, transparent)}a-radio[tone=brand],a-radio-group[tone=brand] a-radio:not([tone],[tone-selected]){--radio-bg-selected: #5f4bc3;--radio-bg-selected-hover: #503cb4;--radio-bg-selected-active: #483493}a-radio[tone=neutral],a-radio-group[tone=neutral] a-radio:not([tone],[tone-selected]){--radio-bg-selected: #878089;--radio-bg-selected-hover: #776e77;--radio-bg-selected-active: #635b65}a-radio[tone=info],a-radio-group[tone=info] a-radio:not([tone],[tone-selected]){--radio-bg-selected: #1f6eb2;--radio-bg-selected-hover: #1a5b93;--radio-bg-selected-active: #175082}a-radio[tone=success],a-radio-group[tone=success] a-radio:not([tone],[tone-selected]){--radio-bg-selected: #2a7e43;--radio-bg-selected-hover: #226737;--radio-bg-selected-active: #1f5c31}a-radio[tone=warning],a-radio-group[tone=warning] a-radio:not([tone],[tone-selected]){--radio-bg-selected: #c37416;--radio-bg-selected-hover: #ae6613;--radio-bg-selected-active: #995200}a-radio[tone=critical],a-radio-group[tone=critical] a-radio:not([tone],[tone-selected]){--radio-bg-selected: #c9302c;--radio-bg-selected-hover: #b02120;--radio-bg-selected-active: #a01c1c}a-radio[tone=brand],a-radio-group[tone=brand] a-radio:not([tone],[tone-selected]){--radio-bg: #fcfcfe;--radio-border: #bcb1f1;--radio-border-hover: #9e8eeb;--radio-border-active: #9081df}a-radio[tone=info],a-radio-group[tone=info] a-radio:not([tone],[tone-selected]){--radio-bg: #fbfcfe;--radio-border: #93c5ec;--radio-border-hover: #69ace5;--radio-border-active: #56a1e1}a-radio[tone=success],a-radio-group[tone=success] a-radio:not([tone],[tone-selected]){--radio-bg: #f7fcf9;--radio-border: #88d7a0;--radio-border-hover: #5bc87b;--radio-border-active: #44c169}a-radio[tone=warning],a-radio-group[tone=warning] a-radio:not([tone],[tone-selected]){--radio-bg: #fefbf6;--radio-border: #edb25a;--radio-border-hover: #e09127;--radio-border-active: #d88118}a-radio[tone=critical],a-radio-group[tone=critical] a-radio:not([tone],[tone-selected]){--radio-bg: #fefbfb;--radio-border: #efa4a4;--radio-border-hover: #e87f7f;--radio-border-active: #e56c6c}a-radio-group[tone]:where(:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical])) a-radio:not([tone],[tone-selected]){--radio-bg-selected: oklch(from var(--radio-tone-source) var(--_tone-l-rest) c h);--radio-bg-selected-hover: oklch(from var(--radio-tone-source) var(--_tone-l-hover) c h);--radio-bg-selected-active: oklch(from var(--radio-tone-source) var(--_tone-l-active) c h);--radio-bg: oklch(from var(--radio-off-tone-source) .99 calc(c*.03) h);--_radio-border-base: color-mix(in oklch, var(--_radio-off-bg-selected) 70%, var(--radio-border-neutral));--radio-border: oklch(from var(--_radio-border-base) calc(l + .17) c h);--radio-border-hover: oklch(from var(--_radio-border-base) calc(l + .1) c h);--radio-border-active: var(--_radio-border-base)}a-radio[tone-selected=brand],a-radio-group[tone-selected=brand] a-radio:not([tone],[tone-selected]){--radio-bg-selected: #5f4bc3;--radio-bg-selected-hover: #503cb4;--radio-bg-selected-active: #483493}a-radio[tone-selected=neutral],a-radio-group[tone-selected=neutral] a-radio:not([tone],[tone-selected]){--radio-bg-selected: #878089;--radio-bg-selected-hover: #776e77;--radio-bg-selected-active: #635b65}a-radio[tone-selected=info],a-radio-group[tone-selected=info] a-radio:not([tone],[tone-selected]){--radio-bg-selected: #1f6eb2;--radio-bg-selected-hover: #1a5b93;--radio-bg-selected-active: #175082}a-radio[tone-selected=success],a-radio-group[tone-selected=success] a-radio:not([tone],[tone-selected]){--radio-bg-selected: #2a7e43;--radio-bg-selected-hover: #226737;--radio-bg-selected-active: #1f5c31}a-radio[tone-selected=warning],a-radio-group[tone-selected=warning] a-radio:not([tone],[tone-selected]){--radio-bg-selected: #c37416;--radio-bg-selected-hover: #ae6613;--radio-bg-selected-active: #995200}a-radio[tone-selected=critical],a-radio-group[tone-selected=critical] a-radio:not([tone],[tone-selected]){--radio-bg-selected: #c9302c;--radio-bg-selected-hover: #b02120;--radio-bg-selected-active: #a01c1c}a-radio[tone-selected]:not([tone-selected=""],[tone-selected=brand],[tone-selected=neutral],[tone-selected=info],[tone-selected=success],[tone-selected=warning],[tone-selected=critical]),a-radio-group[tone-selected]:not([tone-selected=""],[tone-selected=brand],[tone-selected=neutral],[tone-selected=info],[tone-selected=success],[tone-selected=warning],[tone-selected=critical]) a-radio:not([tone],[tone-selected]){--radio-bg-selected: oklch(from var(--radio-tone-source) var(--_tone-l-rest) c h);--radio-bg-selected-hover: oklch(from var(--radio-tone-source) var(--_tone-l-hover) c h);--radio-bg-selected-active: oklch(from var(--radio-tone-source) var(--_tone-l-active) c h)}.dark a-radio:not([tone]):not([tone-selected]){--radio-border-hover: #635b65;--radio-border-active: #776e77;--radio-bg-selected: #49424c;--radio-bg-selected-hover: #534c57;--radio-bg-selected-active: #635b65;--radio-border-disabled: color-mix(in oklch, #e4d1ef 10%, transparent)}.dark a-radio[tone=brand],.dark a-radio-group[tone=brand] a-radio:not([tone],[tone-selected]){--radio-bg-selected: #503cb4;--radio-bg-selected-hover: #5f4bc3;--radio-bg-selected-active: #7460d7}.dark a-radio[tone=neutral],.dark a-radio-group[tone=neutral] a-radio:not([tone],[tone-selected]){--radio-bg-selected: #49424c;--radio-bg-selected-hover: #534c57;--radio-bg-selected-active: #635b65}.dark a-radio[tone=info],.dark a-radio-group[tone=info] a-radio:not([tone],[tone-selected]){--radio-bg-selected: #1a5b93;--radio-bg-selected-hover: #1f6eb2;--radio-bg-selected-active: #2686d9}.dark a-radio[tone=success],.dark a-radio-group[tone=success] a-radio:not([tone],[tone-selected]){--radio-bg-selected: #226737;--radio-bg-selected-hover: #2a7e43;--radio-bg-selected-active: #329550}.dark a-radio[tone=warning],.dark a-radio-group[tone=warning] a-radio:not([tone],[tone-selected]){--radio-bg-selected: #7f410b;--radio-bg-selected-hover: #995200;--radio-bg-selected-active: #ae6613}.dark a-radio[tone=critical],.dark a-radio-group[tone=critical] a-radio:not([tone],[tone-selected]){--radio-bg-selected: #b02120;--radio-bg-selected-hover: #c9302c;--radio-bg-selected-active: #de4545}.dark a-radio[tone=brand],.dark a-radio-group[tone=brand] a-radio:not([tone],[tone-selected]){--radio-bg: #0b0916;--radio-border: #483493;--radio-border-hover: #5f4bc3;--radio-border-active: #7460d7}.dark a-radio[tone=info],.dark a-radio-group[tone=info] a-radio:not([tone],[tone-selected]){--radio-bg: #040d18;--radio-border: #175082;--radio-border-hover: #1f6eb2;--radio-border-active: #2686d9}.dark a-radio[tone=success],.dark a-radio-group[tone=success] a-radio:not([tone],[tone-selected]){--radio-bg: #041008;--radio-border: #1f5c31;--radio-border-hover: #2a7e43;--radio-border-active: #329550}.dark a-radio[tone=warning],.dark a-radio-group[tone=warning] a-radio:not([tone],[tone-selected]){--radio-bg: #120a03;--radio-border: #6a3b0c;--radio-border-hover: #995200;--radio-border-active: #ae6613}.dark a-radio[tone=critical],.dark a-radio-group[tone=critical] a-radio:not([tone],[tone-selected]){--radio-bg: #190405;--radio-border: #a01c1c;--radio-border-hover: #c9302c;--radio-border-active: #de4545}.dark a-radio-group[tone]:where(:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical])) a-radio:not([tone],[tone-selected]){--radio-bg-selected: oklch(from var(--radio-tone-source) var(--_tone-l-rest) c h);--radio-bg-selected-hover: oklch(from var(--radio-tone-source) var(--_tone-l-hover) c h);--radio-bg-selected-active: oklch(from var(--radio-tone-source) var(--_tone-l-active) c h);--radio-bg: oklch(from var(--radio-off-tone-source) .15 calc(c*.18) h);--radio-border: var(--_radio-border-base);--radio-border-hover: oklch(from var(--_radio-border-base) calc(l + .1) c h);--radio-border-active: oklch(from var(--_radio-border-base) calc(l + .17) c h)}.dark a-radio[tone-selected=brand],.dark a-radio-group[tone-selected=brand] a-radio:not([tone],[tone-selected]){--radio-bg-selected: #503cb4;--radio-bg-selected-hover: #5f4bc3;--radio-bg-selected-active: #7460d7}.dark a-radio[tone-selected=neutral],.dark a-radio-group[tone-selected=neutral] a-radio:not([tone],[tone-selected]){--radio-bg-selected: #49424c;--radio-bg-selected-hover: #534c57;--radio-bg-selected-active: #635b65}.dark a-radio[tone-selected=info],.dark a-radio-group[tone-selected=info] a-radio:not([tone],[tone-selected]){--radio-bg-selected: #1a5b93;--radio-bg-selected-hover: #1f6eb2;--radio-bg-selected-active: #2686d9}.dark a-radio[tone-selected=success],.dark a-radio-group[tone-selected=success] a-radio:not([tone],[tone-selected]){--radio-bg-selected: #226737;--radio-bg-selected-hover: #2a7e43;--radio-bg-selected-active: #329550}.dark a-radio[tone-selected=warning],.dark a-radio-group[tone-selected=warning] a-radio:not([tone],[tone-selected]){--radio-bg-selected: #7f410b;--radio-bg-selected-hover: #995200;--radio-bg-selected-active: #ae6613}.dark a-radio[tone-selected=critical],.dark a-radio-group[tone-selected=critical] a-radio:not([tone],[tone-selected]){--radio-bg-selected: #b02120;--radio-bg-selected-hover: #c9302c;--radio-bg-selected-active: #de4545}.dark a-radio[tone-selected]:not([tone-selected=""],[tone-selected=brand],[tone-selected=neutral],[tone-selected=info],[tone-selected=success],[tone-selected=warning],[tone-selected=critical]),.dark a-radio-group[tone-selected]:not([tone-selected=""],[tone-selected=brand],[tone-selected=neutral],[tone-selected=info],[tone-selected=success],[tone-selected=warning],[tone-selected=critical]) a-radio:not([tone],[tone-selected]){--radio-bg-selected: oklch(from var(--radio-tone-source) var(--_tone-l-rest) c h);--radio-bg-selected-hover: oklch(from var(--radio-tone-source) var(--_tone-l-hover) c h);--radio-bg-selected-active: oklch(from var(--radio-tone-source) var(--_tone-l-active) c h)}a-tag:not([tone]),a-tag[tone=neutral]{--tag-tint: #44374b;--tag-bg-solid: #776e77;--tag-edge: var(--tag-tint);--_tag-bg-alpha: 7%;--_tag-border-alpha: 15%;--_tag-edge-alpha: 25%}a-tag[tone=brand]{--tag-tint: #7460d7;--tag-bg-solid: #7460d7;--tag-edge: var(--text-2-brand);--_tag-bg-alpha: 10%;--_tag-edge-alpha: 20%}a-tag[tone=info]{--tag-tint: #2686d9;--tag-bg-solid: #2686d9;--tag-edge: var(--text-2-info);--_tag-bg-alpha: 10%;--_tag-edge-alpha: 20%}a-tag[tone=success]{--tag-tint: #329550;--tag-bg-solid: #329550;--tag-edge: var(--text-2-success);--_tag-bg-alpha: 10%;--_tag-edge-alpha: 20%}a-tag[tone=warning]{--tag-tint: #c37416;--tag-bg-solid: #ae6613;--tag-edge: var(--text-2-warning);--_tag-bg-alpha: 10%;--_tag-edge-alpha: 20%}a-tag[tone=critical]{--tag-tint: #de4545;--tag-bg-solid: #de4545;--tag-edge: var(--text-2-critical);--_tag-bg-alpha: 10%;--_tag-edge-alpha: 20%}.dark a-tag:not([tone]),.dark a-tag[tone=neutral]{--tag-tint: #e4d1ef;--tag-bg-solid: #635b65;--_tag-bg-alpha: 12%}.dark a-tag[tone=brand],.dark a-tag[tone=info],.dark a-tag[tone=success],.dark a-tag[tone=warning],.dark a-tag[tone=critical]{--_tag-bg-alpha: 20%;--_tag-border-alpha: 25%;--_tag-edge-alpha: 30%}.dark a-tag[tone=brand]{--tag-bg-solid: #5f4bc3}.dark a-tag[tone=info]{--tag-bg-solid: #1f6eb2}.dark a-tag[tone=success]{--tag-bg-solid: #2a7e43}.dark a-tag[tone=warning]{--tag-bg-solid: #995200}.dark a-tag[tone=critical]{--tag-bg-solid: #c9302c}.dark a-tag[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--_tag-bg-alpha: 20%;--_tag-border-alpha: 25%;--_tag-edge-alpha: 30%}.dark a-tabs{--tabs-track-bg: color-mix(in oklch, #e4d1ef 7%, transparent);--tab-secondary-bg: color-mix(in oklch, #e4d1ef 8%, transparent)}a-input:not([tone]){--input-bg: var(--bg-1);--input-border: var(--border-2);--input-hint: var(--text-3)}a-input[status=critical]{--input-bg: #fefbfb;--input-border: #de4545;--input-hint: #c9302c}a-input[status=warning]{--input-bg: #fefbf6;--input-border: #ae6613;--input-hint: #995200}a-input[status=success]{--input-bg: #f7fcf9;--input-border: #329550;--input-hint: #2a7e43}a-input[status=info]{--input-bg: #fbfcfe;--input-border: #2686d9;--input-hint: #175082}a-input[status=brand]{--input-bg: #fcfcfe;--input-border: #7460d7;--input-hint: #5f4bc3}.dark a-input[status=critical]{--input-bg: #1f0506;--input-border: #c9302c;--input-hint: #e25858}.dark a-input[status=warning]{--input-bg: #120a03;--input-border: #995200;--input-hint: #c37416}.dark a-input[status=success]{--input-bg: #041008;--input-border: #2a7e43;--input-hint: #3aab5c}.dark a-input[status=info]{--input-bg: #040d18;--input-border: #1f6eb2;--input-hint: #3e93dd}.dark a-input[status=brand]{--input-bg: #0b0916;--input-border: #5f4bc3;--input-hint: #8270db}a-input:disabled{--input-bg: #44374b12;--input-border: #44374b26;--input-hint: var(--text-5)}a-input[status]:disabled{--input-bg: #44374b12;--input-border: #44374b26;--input-hint: var(--text-5)}.dark a-input:disabled{--input-bg: #e4d1ef0d;--input-border: #e4d1ef1f}.dark a-input[status]:disabled{--input-bg: #e4d1ef0d;--input-border: #e4d1ef1f;--input-hint: var(--text-5)}.dark a-input:not([status]):not([tone]){--input-border: #49424c}.dark a-input[status=success]{--input-border: var(--border-1-success)}a-input-time{--input-time-bg: var(--bg-1);--input-time-border: var(--border-2);--input-time-border-hover: var(--border-1);--input-time-hint: var(--text-3)}a-input-time[status=critical]{--input-time-bg: #fefbfb;--input-time-border: #de4545;--input-time-border-hover: #de4545;--input-time-hint: #c9302c}a-input-time[status=warning]{--input-time-bg: #fefbf6;--input-time-border: #ae6613;--input-time-border-hover: #ae6613;--input-time-hint: #995200}a-input-time[status=success]{--input-time-bg: #f7fcf9;--input-time-border: #329550;--input-time-border-hover: #329550;--input-time-hint: #2a7e43}a-input-time[status=info]{--input-time-bg: #fbfcfe;--input-time-border: #2686d9;--input-time-border-hover: #2686d9;--input-time-hint: #175082}a-input-time[status=brand]{--input-time-bg: #fcfcfe;--input-time-border: #7460d7;--input-time-border-hover: #7460d7;--input-time-hint: #5f4bc3}.dark a-input-time[status=critical]{--input-time-bg: #1f0506;--input-time-border: #c9302c;--input-time-border-hover: #c9302c;--input-time-hint: #e25858}.dark a-input-time[status=warning]{--input-time-bg: #120a03;--input-time-border: #995200;--input-time-border-hover: #995200;--input-time-hint: #c37416}.dark a-input-time[status=success]{--input-time-bg: #041008;--input-time-border: var(--border-1-success);--input-time-border-hover: var(--border-1-success);--input-time-hint: #3aab5c}.dark a-input-time[status=info]{--input-time-bg: #040d18;--input-time-border: #1f6eb2;--input-time-border-hover: #1f6eb2;--input-time-hint: #3e93dd}.dark a-input-time[status=brand]{--input-time-bg: #0b0916;--input-time-border: #5f4bc3;--input-time-border-hover: #5f4bc3;--input-time-hint: #8270db}a-input-time:disabled{--input-time-bg: #44374b12;--input-time-border: #44374b26;--input-time-border-hover: #44374b26;--input-time-hint: var(--text-5)}.dark a-input-time:disabled{--input-time-bg: #e4d1ef0d;--input-time-border: #e4d1ef1f;--input-time-border-hover: #e4d1ef1f}.dark a-input-time:not([status]){--input-time-border: #49424c;--input-time-border-hover: #635b65}}

package/docs/changelog.md

@@ -3,6 +3,34 @@
 This page tracks changes that ship in `@antadesign/anta`. Documentation-only
 changes are not listed.
 
+## 0.3.22 — August 20, 2026
+
+### Changed
+
+- JSX `Input` now truncates overflowing single-line values by default. Pass
+  `truncate={false}` to show the full value.
+- Selecting a `Menu` item no longer bubbles the click to ancestor handlers (e.g. a
+  clickable row the menu sits in). Set `stopPropagation` to contain more event types.
+- Open menus follow their trigger vertically as it scrolls or shifts, keeping the
+  side chosen at open.
+
+### Fixed
+
+- Buttons and Tags with an explicit `tone="neutral"` now receive the reference
+  theme's neutral values.
+- Disabled and loading Buttons with `href` now use the disabled palette and block
+  activation.
+- `Select` and `InputDate` triggers carry a `combobox` role, so their
+  `aria-expanded` is valid (WCAG 4.1.2 / `aria-allowed-attr`) — it was previously
+  set on an element with no supporting role.
+- Checkbox, Radio, and Switch now show one focus ring around their visual control.
+- Checkboxes without a tone now receive the Anta neutral reference values;
+  `tone="neutral"` remains equivalent.
+- Checkbox and Radio `toneSelected` now consistently overrides `tone`, including
+  explicit neutral selected tones and custom `RadioGroup` tones.
+- `a-input` and `a-input-time` now treat `status="neutral"` like their default
+  status.
+
 ## 0.3.21 — August 11, 2026
 
 ### Added

package/docs/components/input.md

@@ -513,8 +513,8 @@ wraps to fewer columns as it narrows. Resize the preview to see it reflow.
  other controls' custom-tone knob; a `status` still overrides for validation. |
 | `trailing?` | ReactNode | — | Content pinned to the end of the field (e.g. icons, buttons), after the
  clear button when `clearable`. |
-| `truncate?` | boolean | — | Ellipsize an overflowing single-line value. Read-only inputs already do
-this; use `truncate` when an editable field should keep the same treatment. |
+| `truncate?` | boolean | true | Ellipsize an overflowing single-line value. Read-only inputs already do
+this; pass `false` when an editable field should show the full value. |
 | `type?` | 'text' \| 'search' \| 'email' \| 'password' \| 'tel' \| 'url' \| 'number' | text | Single-line input type. Ignored when `multiline`. `search` is a
  **wrapper-only** shorthand: it defaults a leading search icon and a clear
  button (both overridable — pass your own `leading`, or `clearable={false}`)

package/docs/components/menu.md

@@ -240,6 +240,11 @@ run off the UI thread. Walking out from the click, the nearest marker wins:
   element (or a "Done" button inside a `data-menu-open` region) can dismiss the
   menu without being a `MenuItem`.
 
+Selecting an item won't also click the region the menu sits in — the activation
+click stops at the surface, so a `<Menu>` inside a clickable row or card is safe.
+Other events still bubble; pass `stopPropagation` (`true` for clicks, or event
+names like `"click pointerdown"`) to contain those too.
+
 For programmatic open/close from app state, drive the `open` prop (the `state`
 attribute, `"open"` / `"closed"`) and react via `onStateChange`, or keep a `ref`
 and call `.open()` / `.close()` / `.toggle()`.
@@ -261,6 +266,34 @@ and call `.open()` / `.close()` / `.toggle()`.
 </Menu>
 ```
 
+## Inside a clickable row
+
+A `<Menu>` can live inside a clickable row or card without its items triggering
+that row's `onClick` — selecting an item is contained at the menu surface. In the
+row below, the counter moves when you click the row, but not when you pick a menu
+item. The kebab trigger is a plain button, so its click is stopped by hand; the menu
+items need nothing. To contain more (a slotted control's clicks, say), add
+`stopPropagation` to the `<Menu>`.
+
+```tsx
+<div className="row" onClick={openRow}>
+  <span>Quarterly report.pdf</span>
+  {/* the trigger is a plain button — stop its click so opening the
+      menu isn't a row click; the menu items need no handling */}
+  <Button
+    icon="dots-vertical"
+    aria-label="File actions"
+    onClick={(e) => e.stopPropagation()}
+  />
+  <Menu>
+    <MenuItem icon="edit" label="Rename" onSelect={rename} />
+    <MenuItem icon="copy" label="Duplicate" onSelect={duplicate} />
+    <MenuSeparator />
+    <MenuItem icon="trash" tone="critical" label="Delete" onSelect={confirmDelete} />
+  </Menu>
+</div>
+```
+
 ## Links
 
 Give a `MenuItem` an **`href`** and it renders a native `<a>` instead of the

package/docs/components/select-faceted.md

@@ -381,8 +381,10 @@ const recency: SelectFacetCustom<Recency> = {
  Receives a `SelectFacetedTriggerState`. Return exactly one focusable element:
  the menu is positioned relative to that element and opens when it is clicked.
  Add `aria-haspopup="menu"` and `aria-expanded={state.open}` to the returned
- element. `className`, `style`, and other trigger props apply only to the
- default Button, so add styling and attributes to the returned element. |
+ element, on a role that supports them (an Anta `Button` already carries
+ `role="button"`; otherwise add `role="combobox"`). `className`, `style`, and
+ other trigger props apply only to the default Button, so add styling and
+ attributes to the returned element. |
 | `searchable?` | boolean | — | Adds a search field at the top of the root menu. It searches the options of
  every `single` and `multiple` facet in one list. For example, "alice" can
  appear under application-defined Assignee and Owner facets. `text` and

package/docs/components/select.md

@@ -702,7 +702,9 @@ scannable list instead of hiding matches behind flyouts.
  one focusable element, such as an Anta `Button`. The menu is positioned
  relative to that element and opens when it is clicked. Do not return a
  fragment, multiple siblings, or a non-focusable wrapper. Add
- `aria-haspopup="menu"` and `aria-expanded={state.open}` to the element.
+ `aria-haspopup="menu"` and `aria-expanded={state.open}` to the element, on a
+ role that supports them (an Anta `Button` already carries `role="button"`;
+ otherwise add `role="combobox"`).
  Field props (`label`, `hint`, `size`, `status`, `placeholder`, and `round`) and
  `className` / `style` apply only to the default field. Add styling and
  attributes to the returned element instead. |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antadesign/anta",
-  "version": "0.3.21",
+  "version": "0.3.22",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",