@antadesign/anta 0.3.21 → 0.3.23

package/dist/components/Tabs.d.ts

@@ -41,9 +41,10 @@ export interface TabOption extends OptionPresentationProps {
     /** Disable just this tab — skipped by keyboard nav and dropped from the tab order
      *  (a disabled-but-selected tab stays reachable, per the ARIA pattern). */
     disabled?: boolean;
-    /** Tooltip for this tab — a string or any node — shown **only when the tab's label
-     *  is truncated** (tabs ellipsize when the strip overflows), so a clipped tab reveals
-     *  its full text on hover while a tab that fits shows nothing. Rendered as a
+    /** Tooltip for this tab — a string or any node — shown **only when one of the
+     *  tab's ellipsizing label parts is truncated** (tabs ellipsize when the strip
+     *  overflows), so clipped content reveals its full text on hover while a tab that
+     *  fits shows nothing. Rendered as a
      *  `truncatedOnly` `<Tooltip>` anchored to the tab. For an always-visible tooltip or
      *  other custom trigger content, use `children` with your own `<Tooltip>` instead. */
     tooltip?: React.ReactNode;
@@ -58,7 +59,8 @@ export interface TabsProps extends Omit<BaseProps, "onChange"> {
     children?: React.ReactNode;
     /** The tabs, as a data array (the strip's single source). Each entry is a
      *  `TabOption` (`value`, `label` or `children`, `icon`, `iconTrailing`, `tone`,
-     *  `disabled`, `round`). */
+     *  `disabled`, `round`, `className`, `style`). `className` and `style` land on
+     *  that option's individual `<a-tab>`, not on the strip. */
     options?: TabOption[];
     /** Controlled active value — the tab `value` to mark selected (and, when a
      *  `<TabPanel value="…">` shares it, the panel to reveal). When set, you own
@@ -103,6 +105,9 @@ export interface TabsProps extends Omit<BaseProps, "onChange"> {
      *  is opt-in via CSS); vertical stacks them.
      *  @defaultValue 'horizontal' */
     orientation?: "horizontal" | "vertical";
+    /** Makes horizontal tabs share the available inline space equally.
+     *  @defaultValue false */
+    fill?: boolean;
     /** Disable the sliding indicator. By default the selected-tab indicator animates
      *  between tabs (a single rectangle, via CSS anchor positioning); `noslide` paints it
      *  per tab so it snaps with no movement. (Browsers without anchor positioning get that
@@ -149,5 +154,5 @@ export interface TabsProps extends Omit<BaseProps, "onChange"> {
  * </Tabs>
  * ```
  */
-export declare const Tabs: ({ children, options, value, defaultValue, onStateChange, onChange, onValueChange, onFocus, onBlur, label, priority, tone, size, orientation, noslide, round, disabled, className, style, id, ...rest }: TabsProps) => any;
+export declare const Tabs: ({ children, options, value, defaultValue, onStateChange, onChange, onValueChange, onFocus, onBlur, label, priority, tone, size, orientation, fill, noslide, round, disabled, className, style, id, ...rest }: TabsProps) => any;
 export {};

package/dist/components/Tabs.js

@@ -17,6 +17,7 @@ const Tabs = ({
   tone,
   size,
   orientation,
+  fill,
   noslide,
   round,
   disabled,
@@ -61,6 +62,7 @@ const Tabs = ({
       tone: tone && tone !== "neutral" ? tone : void 0,
       size: size && size !== "medium" ? size : void 0,
       orientation: vertical ? "vertical" : void 0,
+      fill: fill ? "" : void 0,
       noslide: noslide ? "" : void 0,
       round: roundAttr(round),
       disabled: disabled ? "" : void 0,
@@ -76,13 +78,13 @@ const Tabs = ({
         const tabDisabled = disabled || p.disabled;
         const isSelected = p.value === currentValue;
         const { className: optionClassName, style: optionStyle, ...optionAttrs } = optionPresentationAttrs(p);
-        return /* @__PURE__ */ jsxs(
+        const tab = /* @__PURE__ */ jsxs(
           "a-tab",
           {
             ...optionAttrs,
             role: "tab",
             value: p.value,
-            tone: p.tone && p.tone !== "neutral" ? p.tone : void 0,
+            tone: p.tone || void 0,
             "aria-disabled": tabDisabled ? "true" : void 0,
             tabIndex: tabDisabled && !isSelected ? -1 : 0,
             disabled: tabDisabled ? "" : void 0,
@@ -98,6 +100,7 @@ const Tabs = ({
           },
           p.value
         );
+        return tab;
       })
     }
   );

package/dist/components/Tooltip.d.ts

@@ -25,12 +25,12 @@ export interface TooltipProps extends BaseProps {
     interactive?: boolean;
     /** Only show when the target is actually truncated (its text overflows and is
      *  ellipsized); a label that fits gets no tooltip. The check is a UI-thread
-     *  layout read, re-measured on each show. By default it measures the nearest
-     *  Anta ellipsizing label part (`<a-tab-label>` / `<a-button-label>`) inside
-     *  the anchor, then the anchor itself — override with `truncatedSelector`. */
+     *  layout read, re-measured on each show. By default it measures every Anta
+     *  ellipsizing label part inside the anchor, then the anchor itself —
+     *  override with `truncatedSelector`. */
     truncatedOnly?: boolean;
-    /** CSS selector (resolved within the anchor) for the element whose overflow
-     *  decides whether a `truncatedOnly` tooltip shows. */
+    /** CSS selector (resolved within the anchor) for the element or elements
+     *  whose overflow decides whether a `truncatedOnly` tooltip shows. */
     truncatedSelector?: string;
 }
 /**

package/dist/elements/a-avatar.css

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

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

@@ -0,0 +1,31 @@
+import { HTMLElementBase } from '../anta_helpers';
+import './a-avatar.css';
+/**
+ * `<a-avatar>` — a userpic container. It shows one of three things, in priority
+ * order: the `src` image, a seed-generated figure, or initials from `name`.
+ *
+ * Generation runs in `avatar-core` (pure) and is drawn into the shadow root as
+ * SVG. `seed` (falling back to `name`) drives the deterministic result; the
+ * brand constraints ride on the `config` attribute as a JSON string, so the
+ * element stays declarative — it works from server-rendered HTML and hand-
+ * authored markup, not only through the wrapper. With no `config`,
+ * `DEFAULT_CONFIG` produces a varied figure; a config whose head and body shapes
+ * are both `off` renders initials.
+ *
+ * Shadow structure — the picture is the box, with no wrapper around it:
+ *
+ *   :host
+ *     <svg> | <img>   ← the generated figure or the image, part="frame"
+ *     .badge          ← the optional corner badge, part="badge"
+ *
+ * The picture carries the frame's radius and the badge cutout; the host stays
+ * unclipped so the badge can sit at the very corner.
+ */
+export declare class AAvatarElement extends HTMLElementBase {
+    #private;
+    static observedAttributes: string[];
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+}
+export declare function register_a_avatar(): void;

package/dist/elements/a-avatar.js

@@ -0,0 +1,98 @@
+import { HTMLElementBase } from "../anta_helpers";
+import { resolveAvatar, avatarToSvg, getInitials, DEFAULT_CONFIG } from "../avatar-core";
+import "./a-avatar.css";
+class AAvatarElement extends HTMLElementBase {
+  static observedAttributes = ["seed", "name", "src", "size", "badge", "config"];
+  #badge;
+  #picture;
+  constructor() {
+    super();
+    const shadow = this.attachShadow({ mode: "open" });
+    const style = document.createElement("style");
+    style.textContent = SHADOW_STYLE;
+    this.#badge = document.createElement("span");
+    this.#badge.className = "badge";
+    this.#badge.setAttribute("part", "badge");
+    this.#badge.style.display = "none";
+    shadow.append(style, this.#badge);
+  }
+  /** Swap in the picture, keeping it between the style and the indicator. */
+  #setPicture(node) {
+    if (this.#picture) this.#picture.replaceWith(node);
+    else this.#badge.before(node);
+    this.#picture = node;
+  }
+  connectedCallback() {
+    this.#render();
+  }
+  attributeChangedCallback() {
+    this.#render();
+  }
+  /** Parse the `config` JSON attribute; fall back to the varied default. */
+  #parseConfig() {
+    const raw = this.getAttribute("config");
+    if (!raw) return DEFAULT_CONFIG;
+    try {
+      const parsed = JSON.parse(raw);
+      return parsed && typeof parsed === "object" ? parsed : DEFAULT_CONFIG;
+    } catch {
+      return DEFAULT_CONFIG;
+    }
+  }
+  #render() {
+    const badge = this.getAttribute("badge");
+    this.#badge.style.display = badge && badge !== "none" ? "" : "none";
+    const name = this.getAttribute("name") ?? void 0;
+    const src = this.getAttribute("src");
+    if (src) {
+      const img = document.createElement("img");
+      img.setAttribute("part", "frame image");
+      img.src = src;
+      img.alt = name ?? "";
+      img.loading = "lazy";
+      this.#setPicture(img);
+      return;
+    }
+    const seed = this.getAttribute("seed") ?? name ?? "";
+    const resolved = resolveAvatar(this.#parseConfig(), seed);
+    const tpl = document.createElement("template");
+    tpl.innerHTML = avatarToSvg(resolved, { initials: getInitials(name), title: name });
+    const svg = tpl.content.firstElementChild;
+    if (svg) {
+      svg.setAttribute("part", "frame");
+      this.#setPicture(svg);
+    }
+  }
+}
+const SHADOW_STYLE = `
+  :host { display: inline-block; position: relative; vertical-align: middle; }
+  svg, img {
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+    border-radius: var(--avatar-radius);
+    background: var(--avatar-placeholder-bg);
+    mask-image: var(--avatar-badge-mask);
+  }
+  img { object-fit: cover; }
+  .badge {
+    position: absolute;
+    right: var(--avatar-badge-inset);
+    bottom: var(--avatar-badge-inset);
+    inline-size: var(--avatar-badge-size);
+    block-size: var(--avatar-badge-size);
+    border-radius: 50%;
+    background: var(--avatar-badge-color);
+  }
+`;
+function register_a_avatar() {
+  if (typeof customElements === "undefined") return;
+  if (!customElements.get("a-avatar")) {
+    customElements.define("a-avatar", AAvatarElement);
+  }
+}
+register_a_avatar();
+export {
+  AAvatarElement,
+  register_a_avatar
+};

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}}}