@antadesign/anta 0.3.27 → 0.3.28

package/dist/components/Switch.js

@@ -10,7 +10,7 @@ const Switch = ({
   defaultChecked,
   disabled,
   tone,
-  toneSelected,
+  toneScope,
   size,
   round,
   labelPosition,
@@ -28,15 +28,7 @@ const Switch = ({
   const computedStyle = roundStyle(
     round,
     "--switch-round",
-    toneStyle(
-      toneSelected,
-      "--switch-tone-source",
-      toneStyle(
-        tone,
-        "--switch-off-tone-source",
-        toneSelected == null ? toneStyle(tone, "--switch-tone-source", style) : style
-      )
-    )
+    toneStyle(tone, "--switch-tone-source", toneStyle(tone, "--switch-off-tone-source", style))
   );
   const explicitAriaLabel = rest["aria-label"];
   const ariaLabel = (typeof explicitAriaLabel === "string" ? explicitAriaLabel : void 0) ?? label ?? (typeof children === "string" ? children : void 0);
@@ -66,7 +58,7 @@ const Switch = ({
       "default-state": defaultStateAttr,
       disabled: disabled ? "" : void 0,
       tone,
-      "tone-selected": toneSelected,
+      "tone-scope": toneScope && toneScope !== "all" ? toneScope : void 0,
       size: size && size !== "medium" ? size : void 0,
       round: roundAttr(round),
       "label-position": labelPosition && labelPosition !== "end" ? labelPosition : void 0,

package/dist/components/Tabs.js

@@ -1,6 +1,6 @@
 import { Fragment, jsx, jsxs } from "@antadesign/anta/jsx-runtime";
 import { useState } from "../jsx-runtime";
-import { nativeStateChange, optionPresentationAttrs, toneStyle, roundStyle, roundAttr, wrapLabel } from "../anta_helpers";
+import { nativeStateChange, neutralToneAttr, optionPresentationAttrs, toneStyle, roundStyle, roundAttr, wrapLabel } from "../anta_helpers";
 import { Tooltip } from "./Tooltip";
 const Tabs = ({
   children,
@@ -59,7 +59,7 @@ const Tabs = ({
       state: controlled ? value : void 0,
       "default-state": !controlled ? defaultValue : void 0,
       priority: priority && priority !== "primary" ? priority : void 0,
-      tone: tone && tone !== "neutral" ? tone : void 0,
+      tone: neutralToneAttr(tone),
       size: size && size !== "medium" ? size : void 0,
       orientation: vertical ? "vertical" : void 0,
       fill: fill ? "" : void 0,

package/dist/components/Tag.d.ts

@@ -28,8 +28,7 @@ export interface TagProps extends BaseProps {
      *  default — both render identically and emit no DOM attribute.
      *  @defaultValue medium */
     size?: 'small' | 'medium' | 'large';
-    /** Render in all-caps instead of the default normal (mixed) case
-     *  (uppercase tracks wider than the default body-text letter-spacing). */
+    /** Render in all-caps instead of the default normal (mixed) case. */
     allcaps?: boolean;
     /** Leading icon shape. Sits flush before the label, scaled to the pill. */
     icon?: IconShape;
@@ -59,8 +58,8 @@ export interface TagProps extends BaseProps {
  *   at 20px), so text is never clipped and the padding tokens can be
  *   retuned freely. An edge icon trims ~2px off its side's padding
  *   (optical), and icons scale to `--tag-icon-size`.
- * - Color comes from the theme-aware semantic tokens, so named tones need
- *   no `.dark` rules; the hairline border and the segment divider both
+ * - Color comes from the theme-aware semantic tokens and `light-dark()`; the
+ *   hairline border and the segment divider both
  *   derive from `--tag-text`, so every tone gets a matching edge. A lone
  *   `label` is dropped into `<a-tag-value>` by this wrapper so it keeps the
  *   default weight; `<a-tag-label>` only renders as the bold key before a
@@ -69,13 +68,12 @@ export interface TagProps extends BaseProps {
  *   elements) get a hairline left border per segment after the first; the
  *   flex `gap` sits left of the border and `padding-left` balances it.
  * - Custom tones (any non-named `tone`) keep the source hue with
- *   lightness/chroma pinned via oklch relative color; the `--_tag-*` knobs
- *   are the only numbers to tune and the `.dark` block re-tunes them. The
+ *   lightness/chroma pinned via oklch relative color. `light-dark()` selects
+ *   the matching ramp from the nearest inherited color scheme. The
  *   wrapper writes `--tag-tone-source` inline; a typed `attr()` fallback
  *   picks up raw `<a-tag tone="…">` on Chrome 133+/Safari 18.2+.
- * - `allcaps` switches on the uppercase transform and widens tracking to
- *   0.08ch (the default mixed case uses the body-text 0.02ch); tabular
- *   figures + `ss05` stay on. Each size steps down 1px under `allcaps`
+ * - `allcaps` switches on the uppercase transform; tabular figures stay on.
+ *   Each size steps down 1px under `allcaps`
  *   (uppercase reads larger than mixed case at the same px), with height
  *   unchanged.
  *

package/dist/components/Tag.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
-import { toneStyle } from "../anta_helpers";
+import { neutralToneAttr, toneStyle } from "../anta_helpers";
 import { Icon } from "./Icon";
 const Tag = ({
   icon,
@@ -15,7 +15,7 @@ const Tag = ({
   children,
   ...rest
 }) => {
-  const toneAttr = tone || void 0;
+  const toneAttr = neutralToneAttr(tone);
   const computedStyle = toneStyle(toneAttr, "--tag-tone-source", style);
   const hasValue = value != null;
   const isIconOnly = icon != null && label == null && value == null && children == null && iconTrailing == null;

package/dist/components/Text.js

@@ -1,10 +1,10 @@
 import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
-import { toneStyle } from "../anta_helpers";
+import { neutralToneAttr, toneStyle } from "../anta_helpers";
 import { Tooltip } from "./Tooltip";
 const Text = ({ priority, tone, size, inline, truncate, expandable, collapsible, className, style, children, ...rest }) => {
   const n = typeof truncate === "number" ? truncate : truncate ? 1 : null;
   const lineCount = n != null && n >= 1 ? n : null;
-  const toneAttr = tone || void 0;
+  const toneAttr = neutralToneAttr(tone);
   const computedStyle = toneStyle(
     toneAttr,
     "--text-tone-source",

package/dist/components/Title.js

@@ -1,7 +1,7 @@
 import { jsx } from "@antadesign/anta/jsx-runtime";
-import { toneStyle } from "../anta_helpers";
+import { neutralToneAttr, toneStyle } from "../anta_helpers";
 const Title = ({ level = 2, priority, tone, className, style, children, ...rest }) => {
-  const toneAttr = tone || void 0;
+  const toneAttr = neutralToneAttr(tone);
   return /* @__PURE__ */ jsx(
     "a-title",
     {

package/dist/elements/a-avatar.css

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

package/dist/elements/a-banner.css

@@ -1 +1 @@
-@layer anta.components{a-banner{--banner-bg: var(--bg-4);--banner-border: var(--border-4);--banner-text: var(--text-2);display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:4px 1ch;position:relative;box-sizing:border-box;width:100%;min-height:40px;padding-block:6px;padding-inline:16px 48px;color:var(--banner-text);background:var(--banner-bg);border:0 solid var(--banner-border);border-radius:0;overflow:clip;overflow-clip-margin:3px;interpolate-size:allow-keywords;transition:opacity .16s ease,block-size .2s ease,padding-block .2s ease,border-block-width .2s ease,display .2s allow-discrete}a-banner[align=center]{justify-content:center;padding-inline:48px}a-banner[round]{border-radius:var(--banner-round, 999px);@supports (border-radius: attr(probe type(<length>),1px)){--banner-round: attr(round type(<length>))}}a-banner [slot=close] a-button,a-banner a-button[slot=close]{height:100%;width:40px}a-banner-message{font-size:14px;line-height:20px;font-weight:475;text-align:start}a-banner[align=center] a-banner-message{text-align:center}a-banner[tone=brand]{--banner-bg: var(--bg-4-brand);--banner-border: var(--border-4-brand);--banner-text: var(--text-2-brand)}a-banner[tone=info]{--banner-bg: var(--bg-4-info);--banner-border: var(--border-4-info);--banner-text: var(--text-2-info)}a-banner[tone=success]{--banner-bg: var(--bg-4-success);--banner-border: var(--border-4-success);--banner-text: var(--text-2-success)}a-banner[tone=warning]{--banner-bg: var(--bg-4-warning);--banner-border: var(--border-4-warning);--banner-text: var(--text-2-warning)}a-banner[tone=critical]{--banner-bg: var(--bg-4-critical);--banner-border: var(--border-4-critical);--banner-text: var(--text-2-critical)}a-banner[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--banner-tone-source: currentColor;--banner-text: oklch(from var(--banner-tone-source) .5 .125 h);--banner-bg: oklch(from var(--banner-tone-source) .955 .02 h);--banner-border: oklch(from var(--banner-tone-source) .9 .04 h);.dark &{--banner-text: oklch(from var(--banner-tone-source) .77 .11 h);--banner-bg: oklch(from var(--banner-tone-source) .185 .05 h);--banner-border: oklch(from var(--banner-tone-source) .26 .06 h)}@supports (color: attr(probe type(<color>),red)){--banner-tone-source: attr(tone type(<color>), currentColor)}}a-banner:not(:defined){opacity:0}a-banner[state=closed],a-banner[default-state=closed],a-banner:state(closed){display:none;block-size:0;min-block-size:0;padding-block:0;border-block-width:0;opacity:0}@media(forced-colors:active){a-banner{border-width:1px;border-color:CanvasText}}@media(prefers-reduced-motion:reduce){a-banner{transition:none}}}
+@layer anta.components{a-banner{--banner-bg: var(--bg-4);--banner-border: var(--border-4);--banner-text: var(--text-2);display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:4px 1ch;position:relative;box-sizing:border-box;width:100%;min-height:40px;padding-block:6px;padding-inline:16px 48px;color:var(--banner-text);background:var(--banner-bg);border:0 solid var(--banner-border);border-radius:0;overflow:clip;overflow-clip-margin:3px;interpolate-size:allow-keywords;transition:opacity .16s ease,block-size .2s ease,padding-block .2s ease,border-block-width .2s ease,display .2s allow-discrete}a-banner[align=center]{justify-content:center;padding-inline:48px}a-banner[round]{border-radius:var(--banner-round, 999px);@supports (border-radius: attr(probe type(<length>),1px)){--banner-round: attr(round type(<length>))}}a-banner [slot=close] a-button,a-banner a-button[slot=close]{height:100%;width:40px}a-banner-message{font-size:14px;line-height:20px;font-weight:475;text-align:start}a-banner[align=center] a-banner-message{text-align:center}a-banner[tone=brand]{--banner-bg: var(--bg-4-brand);--banner-border: var(--border-4-brand);--banner-text: var(--text-2-brand)}a-banner[tone=info]{--banner-bg: var(--bg-4-info);--banner-border: var(--border-4-info);--banner-text: var(--text-2-info)}a-banner[tone=success]{--banner-bg: var(--bg-4-success);--banner-border: var(--border-4-success);--banner-text: var(--text-2-success)}a-banner[tone=warning]{--banner-bg: var(--bg-4-warning);--banner-border: var(--border-4-warning);--banner-text: var(--text-2-warning)}a-banner[tone=critical]{--banner-bg: var(--bg-4-critical);--banner-border: var(--border-4-critical);--banner-text: var(--text-2-critical)}a-banner[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--banner-tone-source: currentColor;--banner-text: light-dark( oklch(from var(--banner-tone-source) .5 .125 h), oklch(from var(--banner-tone-source) .77 .11 h) );--banner-bg: light-dark( oklch(from var(--banner-tone-source) .955 .02 h), oklch(from var(--banner-tone-source) .185 .05 h) );--banner-border: light-dark( oklch(from var(--banner-tone-source) .9 .04 h), oklch(from var(--banner-tone-source) .26 .06 h) );@supports (color: attr(probe type(<color>),red)){--banner-tone-source: attr(tone type(<color>), currentColor)}}a-banner:not(:defined){opacity:0}a-banner[state=closed],a-banner[default-state=closed],a-banner:state(closed){display:none;block-size:0;min-block-size:0;padding-block:0;border-block-width:0;opacity:0}@media(forced-colors:active){a-banner{border-width:1px;border-color:CanvasText}}@media(prefers-reduced-motion:reduce){a-banner{transition:none}}}

package/dist/elements/a-button.css

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

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

@@ -17,8 +17,8 @@ declare global {
  *   secondary is declared unscoped so a bare `a-button` consumer selector
  *   can override it without bumping specificity; primary/tertiary/quaternary
  *   match an explicit `[priority]` and win on specificity. Secondary's rest
- *   label is darkened by `--button-fg-secondary-l-shift` oklch lightness
- *   (0.05 light mode, zeroed in dark) at the `--button-fg` wiring, so it
+ *   label is darkened by 0.05 oklch lightness in light mode at the
+ *   `--button-fg` wiring, while `light-dark()` keeps the dark label unchanged, so it
  *   covers named and custom tones alike; secondary also carries a 1px
  *   hairline box-shadow in the current fg tone at 50% alpha, which the
  *   other priorities cancel in their own blocks. `[selected]` adds a 1px
@@ -29,8 +29,8 @@ declare global {
  *   contrast.
  * - **Custom tones** (any non-named `tone` value): primary uses the literal
  *   color; other priorities derive from the source HUE via oklch relative
- *   color with lightness/chroma/alpha pinned near Brand. The `--_tone-*`
- *   knobs are the only numbers to tune (the `.dark` block re-tunes them).
+ *   color with lightness/chroma/alpha pinned near Brand. `light-dark()` selects
+ *   the matching output ramp from the nearest inherited color scheme.
  *   The JSX wrapper writes `--button-tone-source` inline; a typed `attr()`
  *   fallback picks up raw `<a-button tone="…">` on Chrome 133+/Safari 18.2+.
  * - **Hover is gated** to `(hover: hover) and (pointer: fine)` so it doesn't
@@ -41,10 +41,8 @@ declare global {
  *   returns to rest instead — it's already light), and has instant
  *   transitions in every direction.
  * - **Layout gotchas:** `flex-shrink: 0` (shrinking + `overflow: hidden`
- *   would clip the label silently); `font-variation-settings` must restate
- *   ALL axes — it replaces rather than merges, and dropping "slnt"/"ital"
- *   renders italic in Safari; the label uses a 17px line box + 1px bottom
- *   padding for optical vertical centering at an unchanged 18px box.
+ *   would clip the label silently); the label uses a 17px line box + 1px
+ *   bottom padding for optical vertical centering at an unchanged 18px box.
  * - **Icon-only** is purely structural — `:has(> a-icon:only-child)` gives
  *   square padding + a min-size pin (and centers when the host is sized
  *   bigger). A non-only edge icon trims ~2px off its side's padding
@@ -58,7 +56,7 @@ declare global {
  *   `animation-delay` desyncs instances so a row doesn't pulse in lockstep.
  * - **Disabled** sets `background-color`/`color` directly (not the vars) so
  *   an inline `--button-bg` override can't keep a disabled button alive, and
- *   skips transitions — a `.dark` toggle would flash the tone hue
+ *   skips transitions — a color-mode toggle would flash the tone hue
  *   mid-resolve.
  */
 export declare class AButtonElement extends HTMLElementBase {

package/dist/elements/a-calendar.css

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

package/dist/elements/a-card.css

@@ -1 +1 @@
-@layer anta.components{a-card{--card-text: var(--text-2);--card-bg-secondary: var(--bg-2);--card-bg-primary: var(--bg-1);--card-bg: var(--card-bg-primary);--card-border: var(--border-4);--card-border-hover: var(--border-3);--card-selected-ring: var(--border-1);--card-bg-hover-lift: .01;--card-radius: 8px;--card-padding: 12px;--card-content-fs: 15px;--card-content-lh: 20px;--card-icon-size: 40px;--card-icon-bg: var(--bg-4);--card-header-nudge: 2px;display:block;box-sizing:border-box;position:relative;width:100%;container-type:inline-size;container-name:card;color:var(--card-text);background:var(--card-bg);box-shadow:0 0 0 1px var(--card-border);border-radius:var(--card-radius);overflow:clip;transition:background-color .15s ease,box-shadow .15s ease,opacity .18s ease}a-card[priority=secondary]{--card-bg: var(--card-bg-secondary);--card-icon-blend: multiply}.dark a-card:not([priority=tertiary]){--card-icon-blend: exclusion}a-card[round]{--card-radius: var(--card-round, 999px);@supports (border-radius: attr(probe type(<length>),1px)){--card-round: attr(round type(<length>))}}a-card[priority=tertiary]{--card-bg: color-mix(in oklch, var(--card-bg-primary) 1%, transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.dark a-card:not([tone]),.dark a-card[tone=neutral]{--card-bg-primary: var(--bg-4);--card-icon-bg: var(--bg-5)}@media(hover:hover)and (pointer:fine){a-card[href]:not([loading]):hover{background:oklch(from var(--card-bg) calc(l + var(--card-bg-hover-lift)) c h)}a-card:not([loading]):hover{box-shadow:0 0 0 1px var(--card-border-hover)}}a-card[href]:not([loading]):active{box-shadow:0 0 0 1px var(--card-border)}@media(prefers-reduced-motion:reduce){a-card{transition:none}}a-card:not(:defined){padding:var(--card-padding);opacity:0}a-card:not(:has(>[slot=media]))::part(media),a-card:not(:has(>[slot=header])):not(:has(>[slot=icon]))::part(header),a-card:not(:has(>[slot=icon]))::part(icon),a-card:not(:has(>[slot=footer]))::part(footer),a-card:not(:has(>:not([slot])))::part(body){display:none}a-card>a-card-icon-chip[slot=icon]{display:grid;place-items:center;width:var(--card-icon-size);height:var(--card-icon-size);border-radius:50%;background:var(--card-icon-bg)}a-card:is(:has(>[slot=header]),:has(>[slot=icon]))::part(body){padding-block-start:0}a-card:has(>[slot=footer])::part(body){padding-block-end:0}a-card :is(h1,h2,h3,h4,h5,h6),a-card a-title[level]{margin-block-start:0}a-card>:is(h1,h2,h3,h4,h5,h6)[slot=header],a-card>a-title[slot=header]{margin-block-end:0}a-card>a-title[slot=header]+a-text[slot=header],a-card>:is(h1,h2,h3,h4,h5,h6)[slot=header]+a-text[slot=header]{margin-block-start:1px}a-card[size=large]>a-title[slot=header]+a-text[slot=header],a-card[size=large]>:is(h1,h2,h3,h4,h5,h6)[slot=header]+a-text[slot=header]{margin-block-start:2px}a-card[tone=brand]{--card-text: var(--text-2-brand);--card-bg-secondary: var(--bg-4-brand);--card-bg-primary: var(--bg-2-brand);--card-border: var(--border-4-brand);--card-border-hover: var(--border-3-brand);--card-icon-bg: var(--bg-5-brand);--card-selected-ring: var(--border-1-brand)}a-card[tone=info]{--card-text: var(--text-2-info);--card-bg-secondary: var(--bg-4-info);--card-bg-primary: var(--bg-2-info);--card-border: var(--border-4-info);--card-border-hover: var(--border-3-info);--card-icon-bg: var(--bg-5-info);--card-selected-ring: var(--border-1-info)}a-card[tone=success]{--card-text: var(--text-2-success);--card-bg-secondary: var(--bg-4-success);--card-bg-primary: var(--bg-2-success);--card-border: var(--border-4-success);--card-border-hover: var(--border-3-success);--card-icon-bg: var(--bg-5-success);--card-selected-ring: var(--border-1-success)}a-card[tone=warning]{--card-text: var(--text-2-warning);--card-bg-secondary: var(--bg-4-warning);--card-bg-primary: var(--bg-2-warning);--card-border: var(--border-4-warning);--card-border-hover: var(--border-3-warning);--card-icon-bg: var(--bg-5-warning);--card-selected-ring: var(--border-1-warning)}a-card[tone=critical]{--card-text: var(--text-2-critical);--card-bg-secondary: var(--bg-4-critical);--card-bg-primary: var(--bg-2-critical);--card-border: var(--border-4-critical);--card-border-hover: var(--border-3-critical);--card-icon-bg: var(--bg-5-critical);--card-selected-ring: var(--border-1-critical)}.dark a-card[tone=brand]{--card-bg-primary: var(--bg-4-brand);--card-bg-secondary: var(--bg-2-brand)}.dark a-card[tone=info]{--card-bg-primary: var(--bg-4-info);--card-bg-secondary: var(--bg-2-info)}.dark a-card[tone=success]{--card-bg-primary: var(--bg-4-success);--card-bg-secondary: var(--bg-2-success)}.dark a-card[tone=warning]{--card-bg-primary: var(--bg-4-warning);--card-bg-secondary: var(--bg-2-warning)}.dark a-card[tone=critical]{--card-bg-primary: var(--bg-4-critical);--card-bg-secondary: var(--bg-2-critical)}a-card[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--card-tone-source: currentColor;--card-text: oklch(from var(--card-tone-source) .41 .15 h);--card-bg-secondary: oklch(from var(--card-tone-source) .955 .02 h);--card-bg-primary: oklch(from var(--card-tone-source) .99 .006 h);--card-icon-bg: oklch(from var(--card-tone-source) .925 .03 h);--card-border: oklch(from var(--card-tone-source) .895 .045 h);--card-border-hover: oklch(from var(--card-tone-source) .85 .06 h);--card-selected-ring: oklch(from var(--card-tone-source) .6 .15 h);@supports (color: attr(probe type(<color>),red)){--card-tone-source: attr(tone type(<color>), currentColor)}}.dark a-card[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--card-text: oklch(from var(--card-tone-source) .75 .11 h);--card-bg-secondary: oklch(from var(--card-tone-source) .13 .02 h);--card-bg-primary: oklch(from var(--card-tone-source) .19 .04 h);--card-icon-bg: oklch(from var(--card-tone-source) .22 .05 h);--card-border: oklch(from var(--card-tone-source) .26 .07 h);--card-border-hover: oklch(from var(--card-tone-source) .32 .09 h);--card-selected-ring: oklch(from var(--card-tone-source) .7 .13 h)}a-card[priority=tertiary]{--card-icon-bg: var(--bg-3)}a-card[tone=brand][priority=tertiary]{--card-icon-bg: var(--bg-3-brand)}a-card[tone=info][priority=tertiary]{--card-icon-bg: var(--bg-3-info)}a-card[tone=success][priority=tertiary]{--card-icon-bg: var(--bg-3-success)}a-card[tone=warning][priority=tertiary]{--card-icon-bg: var(--bg-3-warning)}a-card[tone=critical][priority=tertiary]{--card-icon-bg: var(--bg-3-critical)}a-card[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=tertiary]{--card-icon-bg: oklch(from var(--card-tone-source) .97 .014 h)}.dark a-card[tone=brand][priority=tertiary]{--card-icon-bg: color-mix(in oklch, var(--bg-5-brand), white 10%)}.dark a-card[tone=info][priority=tertiary]{--card-icon-bg: color-mix(in oklch, var(--bg-5-info), white 10%)}.dark a-card[tone=success][priority=tertiary]{--card-icon-bg: color-mix(in oklch, var(--bg-5-success), white 10%)}.dark a-card[tone=warning][priority=tertiary]{--card-icon-bg: color-mix(in oklch, var(--bg-5-warning), white 10%)}.dark a-card[tone=critical][priority=tertiary]{--card-icon-bg: color-mix(in oklch, var(--bg-5-critical), white 10%)}.dark a-card:not([tone])[priority=tertiary],.dark a-card[tone=neutral][priority=tertiary]{--card-icon-bg: color-mix(in oklch, var(--bg-5), white 10%)}.dark a-card[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=tertiary]{--card-icon-bg: color-mix(in oklch, oklch(from var(--card-tone-source) .22 .05 h), white 10%)}@media(forced-colors:active){a-card{border:1px solid CanvasText;box-shadow:none}a-card[href]{border-color:LinkText}a-card>a-card-icon-chip[slot=icon]{box-sizing:border-box;border:1px dotted CanvasText}}a-card[size=small]{--card-padding: 8px;--card-header-nudge: 1px;--card-icon-size: 32px;--card-content-fs: 13px;--card-content-lh: 16px}a-card[size=large]{--card-padding: 16px;--card-header-nudge: 4px;--card-icon-size: 44px;--card-content-fs: 17px;--card-content-lh: 24px}}a-card>p:last-child,a-card>:not([slot])>p:last-child{margin-block-end:0}
+@layer anta.components{a-card{--card-text: var(--text-2);--card-bg-secondary: var(--bg-2);--card-bg-primary: light-dark(var(--bg-1), var(--bg-4));--card-bg: var(--card-bg-primary);--card-border: var(--border-4);--card-border-hover: var(--border-3);--card-selected-ring: var(--border-1);--card-bg-hover-lift: .01;--card-radius: 8px;--card-padding: 12px;--card-content-fs: 15px;--card-content-lh: 20px;--card-icon-size: 40px;--card-icon-bg: light-dark(var(--bg-4), var(--bg-5));--card-header-nudge: 2px;display:block;box-sizing:border-box;position:relative;width:100%;container-type:inline-size;container-name:card;color:var(--card-text);background:var(--card-bg);box-shadow:0 0 0 1px var(--card-border);border-radius:var(--card-radius);overflow:clip;transition:background-color .15s ease,box-shadow .15s ease,opacity .18s ease}a-card[priority=secondary]{--card-bg: var(--card-bg-secondary);--card-icon-blend: multiply}.dark a-card:not([priority=tertiary]){--card-icon-blend: exclusion}a-card[round]{--card-radius: var(--card-round, 999px);@supports (border-radius: attr(probe type(<length>),1px)){--card-round: attr(round type(<length>))}}a-card[priority=tertiary]{--card-bg: color-mix(in oklch, var(--card-bg-primary) 1%, transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}@media(hover:hover)and (pointer:fine){a-card[href]:not([loading]):hover{background:oklch(from var(--card-bg) calc(l + var(--card-bg-hover-lift)) c h)}a-card:not([loading]):hover{box-shadow:0 0 0 1px var(--card-border-hover)}}a-card[href]:not([loading]):active{box-shadow:0 0 0 1px var(--card-border)}@media(prefers-reduced-motion:reduce){a-card{transition:none}}a-card:not(:defined){padding:var(--card-padding);opacity:0}a-card:not(:has(>[slot=media]))::part(media),a-card:not(:has(>[slot=header])):not(:has(>[slot=icon]))::part(header),a-card:not(:has(>[slot=icon]))::part(icon),a-card:not(:has(>[slot=footer]))::part(footer),a-card:not(:has(>:not([slot])))::part(body){display:none}a-card>a-card-icon-chip[slot=icon]{display:grid;place-items:center;width:var(--card-icon-size);height:var(--card-icon-size);border-radius:50%;background:var(--card-icon-bg)}a-card:is(:has(>[slot=header]),:has(>[slot=icon]))::part(body){padding-block-start:0}a-card:has(>[slot=footer])::part(body){padding-block-end:0}a-card :is(h1,h2,h3,h4,h5,h6),a-card a-title[level]{margin-block-start:0}a-card>:is(h1,h2,h3,h4,h5,h6)[slot=header],a-card>a-title[slot=header]{margin-block-end:0}a-card>a-title[slot=header]+a-text[slot=header],a-card>:is(h1,h2,h3,h4,h5,h6)[slot=header]+a-text[slot=header]{margin-block-start:1px}a-card[size=large]>a-title[slot=header]+a-text[slot=header],a-card[size=large]>:is(h1,h2,h3,h4,h5,h6)[slot=header]+a-text[slot=header]{margin-block-start:2px}a-card[tone=brand]{--card-text: var(--text-2-brand);--card-bg-secondary: light-dark(var(--bg-4-brand), var(--bg-2-brand));--card-bg-primary: light-dark(var(--bg-2-brand), var(--bg-4-brand));--card-border: var(--border-4-brand);--card-border-hover: var(--border-3-brand);--card-icon-bg: var(--bg-5-brand);--card-selected-ring: var(--border-1-brand)}a-card[tone=info]{--card-text: var(--text-2-info);--card-bg-secondary: light-dark(var(--bg-4-info), var(--bg-2-info));--card-bg-primary: light-dark(var(--bg-2-info), var(--bg-4-info));--card-border: var(--border-4-info);--card-border-hover: var(--border-3-info);--card-icon-bg: var(--bg-5-info);--card-selected-ring: var(--border-1-info)}a-card[tone=success]{--card-text: var(--text-2-success);--card-bg-secondary: light-dark(var(--bg-4-success), var(--bg-2-success));--card-bg-primary: light-dark(var(--bg-2-success), var(--bg-4-success));--card-border: var(--border-4-success);--card-border-hover: var(--border-3-success);--card-icon-bg: var(--bg-5-success);--card-selected-ring: var(--border-1-success)}a-card[tone=warning]{--card-text: var(--text-2-warning);--card-bg-secondary: light-dark(var(--bg-4-warning), var(--bg-2-warning));--card-bg-primary: light-dark(var(--bg-2-warning), var(--bg-4-warning));--card-border: var(--border-4-warning);--card-border-hover: var(--border-3-warning);--card-icon-bg: var(--bg-5-warning);--card-selected-ring: var(--border-1-warning)}a-card[tone=critical]{--card-text: var(--text-2-critical);--card-bg-secondary: light-dark(var(--bg-4-critical), var(--bg-2-critical));--card-bg-primary: light-dark(var(--bg-2-critical), var(--bg-4-critical));--card-border: var(--border-4-critical);--card-border-hover: var(--border-3-critical);--card-icon-bg: var(--bg-5-critical);--card-selected-ring: var(--border-1-critical)}a-card[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--card-tone-source: currentColor;--card-text: light-dark(oklch(from var(--card-tone-source) .41 .15 h), oklch(from var(--card-tone-source) .75 .11 h));--card-bg-secondary: light-dark(oklch(from var(--card-tone-source) .955 .02 h), oklch(from var(--card-tone-source) .13 .02 h));--card-bg-primary: light-dark(oklch(from var(--card-tone-source) .99 .006 h), oklch(from var(--card-tone-source) .19 .04 h));--card-icon-bg: light-dark(oklch(from var(--card-tone-source) .925 .03 h), oklch(from var(--card-tone-source) .22 .05 h));--card-border: light-dark(oklch(from var(--card-tone-source) .895 .045 h), oklch(from var(--card-tone-source) .26 .07 h));--card-border-hover: light-dark(oklch(from var(--card-tone-source) .85 .06 h), oklch(from var(--card-tone-source) .32 .09 h));--card-selected-ring: light-dark(oklch(from var(--card-tone-source) .6 .15 h), oklch(from var(--card-tone-source) .7 .13 h));@supports (color: attr(probe type(<color>),red)){--card-tone-source: attr(tone type(<color>), currentColor)}}a-card[priority=tertiary]{--card-icon-bg: light-dark(var(--bg-3), color-mix(in oklch, var(--bg-5), white 10%))}a-card[tone=brand][priority=tertiary]{--card-icon-bg: light-dark(var(--bg-3-brand), color-mix(in oklch, var(--bg-5-brand), white 10%))}a-card[tone=info][priority=tertiary]{--card-icon-bg: light-dark(var(--bg-3-info), color-mix(in oklch, var(--bg-5-info), white 10%))}a-card[tone=success][priority=tertiary]{--card-icon-bg: light-dark(var(--bg-3-success), color-mix(in oklch, var(--bg-5-success), white 10%))}a-card[tone=warning][priority=tertiary]{--card-icon-bg: light-dark(var(--bg-3-warning), color-mix(in oklch, var(--bg-5-warning), white 10%))}a-card[tone=critical][priority=tertiary]{--card-icon-bg: light-dark(var(--bg-3-critical), color-mix(in oklch, var(--bg-5-critical), white 10%))}a-card[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=tertiary]{--card-icon-bg: light-dark( oklch(from var(--card-tone-source) .97 .014 h), color-mix(in oklch, oklch(from var(--card-tone-source) .22 .05 h), white 10%) )}@media(forced-colors:active){a-card{border:1px solid CanvasText;box-shadow:none}a-card[href]{border-color:LinkText}a-card>a-card-icon-chip[slot=icon]{box-sizing:border-box;border:1px dotted CanvasText}}a-card[size=small]{--card-padding: 8px;--card-header-nudge: 1px;--card-icon-size: 32px;--card-content-fs: 13px;--card-content-lh: 16px}a-card[size=large]{--card-padding: 16px;--card-header-nudge: 4px;--card-icon-size: 44px;--card-content-fs: 17px;--card-content-lh: 24px}}a-card>p:last-child,a-card>:not([slot])>p:last-child{margin-block-end:0}

package/dist/elements/a-checkbox.css

@@ -1 +1 @@
-@layer anta.components{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: 999px;@supports (border-radius: attr(probe type(<length>),1px)){--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: transparent;--checkbox-off-tone-source: transparent;@supports (color: attr(probe type(<color>),red)){--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: transparent;@supports (color: attr(probe type(<color>),red)){--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]{--checkbox-box-size: 16px;--checkbox-mask-size: 12px;--checkbox-round: 4px;--checkbox-bg: var(--bg-1);--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-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);box-sizing:border-box;flex:0 0 var(--checkbox-box-size);inline-size:var(--checkbox-box-size);block-size:var(--checkbox-box-size);margin:0;appearance:none;-webkit-appearance:none;border:1.5px solid var(--checkbox-border);border-radius:var(--checkbox-round);background-color:var(--checkbox-bg);background-repeat:no-repeat;background-position:center;background-size:var(--checkbox-mask-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]{--checkbox-box-size: 14px;--checkbox-mask-size: 10px}input[data-anta][type=checkbox][size=large]{--checkbox-box-size: 18px;--checkbox-mask-size: 14px}input[data-anta][type=checkbox][round]{--checkbox-round: 999px;@supports (border-radius: attr(probe type(<length>),1px)){--checkbox-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]){--_tone-l-rest: .5;--_tone-l-hover: .45;--_tone-l-active: .4}input[data-anta][type=checkbox][tone=brand]{--checkbox-tone-source: var(--anta-seed-brand);--checkbox-off-tone-source: var(--anta-seed-brand)}input[data-anta][type=checkbox][tone=info]{--checkbox-tone-source: var(--anta-seed-info);--checkbox-off-tone-source: var(--anta-seed-info)}input[data-anta][type=checkbox][tone=success]{--checkbox-tone-source: var(--anta-seed-success);--checkbox-off-tone-source: var(--anta-seed-success)}input[data-anta][type=checkbox][tone=warning]{--checkbox-tone-source: var(--anta-seed-warning);--checkbox-off-tone-source: var(--anta-seed-warning)}input[data-anta][type=checkbox][tone=critical]{--checkbox-tone-source: var(--anta-seed-critical);--checkbox-off-tone-source: var(--anta-seed-critical)}input[data-anta][type=checkbox][tone=neutral]{--checkbox-tone-source: var(--anta-seed-neutral);--checkbox-off-tone-source: var(--anta-seed-neutral)}input[data-anta][type=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)}input[data-anta][type=checkbox][tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]){--checkbox-tone-source: var(--anta-seed-neutral);--checkbox-off-tone-source: var(--anta-seed-neutral);@supports (color: attr(probe type(<color>),red)){--checkbox-tone-source: attr(tone type(<color>), var(--anta-seed-neutral));--checkbox-off-tone-source: attr(tone type(<color>), var(--anta-seed-neutral))}}input[data-anta][type=checkbox][tone-selected=brand]{--checkbox-tone-source: var(--anta-seed-brand)}input[data-anta][type=checkbox][tone-selected=info]{--checkbox-tone-source: var(--anta-seed-info)}input[data-anta][type=checkbox][tone-selected=success]{--checkbox-tone-source: var(--anta-seed-success)}input[data-anta][type=checkbox][tone-selected=warning]{--checkbox-tone-source: var(--anta-seed-warning)}input[data-anta][type=checkbox][tone-selected=critical]{--checkbox-tone-source: var(--anta-seed-critical)}input[data-anta][type=checkbox][tone-selected=neutral]{--checkbox-tone-source: var(--anta-seed-neutral);--_tone-l-rest: .6;--_tone-l-hover: .45;--_tone-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]){--checkbox-tone-source: var(--anta-seed-neutral);@supports (color: attr(probe type(<color>),red)){--checkbox-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(--checkbox-border-hover)}input[data-anta][type=checkbox]:not(:disabled):hover:is(:checked,:indeterminate){background-color:var(--checkbox-bg-selected-hover);border-color:var(--checkbox-bg-selected-hover)}}input[data-anta][type=checkbox]:not(:disabled):active{border-color:var(--checkbox-border-active)}input[data-anta][type=checkbox]:not(:disabled):active:is(:checked,:indeterminate){background-color:var(--checkbox-bg-selected-active);border-color:var(--checkbox-bg-selected-active)}input[data-anta][type=checkbox]:is(:checked,:indeterminate){background-color:var(--checkbox-bg-selected);border-color:var(--checkbox-bg-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]{--_tone-l-rest: .42;--_tone-l-hover: .45;--_tone-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]){--_tone-l-rest: .45;--_tone-l-hover: .5;--_tone-l-active: .57}.dark input[data-anta][type=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 input[data-anta][type=checkbox][tone-selected=neutral]{--_tone-l-rest: .42;--_tone-l-hover: .45;--_tone-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}}}
+@layer anta.components{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);--checkbox-bg-selected: light-dark(oklch(from var(--checkbox-tone-source) .6 c h), oklch(from var(--checkbox-tone-source) .42 c h));--checkbox-bg-selected-hover: oklch(from var(--checkbox-tone-source) .45 c h);--checkbox-bg-selected-active: light-dark(oklch(from var(--checkbox-tone-source) .4 c h), oklch(from var(--checkbox-tone-source) .5 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: light-dark(#f6f4f6, #ece9ec);--checkbox-icon-disabled: light-dark(#c1b9c1, #534c57);--checkbox-bg-disabled: light-dark(color-mix(in oklch, #44374b 10%, transparent), color-mix(in oklch, #e4d1ef 10%, transparent));--checkbox-border-disabled: var(--checkbox-bg-disabled);--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);&: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: 999px;@supports (border-radius: attr(probe type(<length>),1px)){--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]){--checkbox-bg-selected: light-dark(oklch(from var(--checkbox-tone-source) .5 c h), oklch(from var(--checkbox-tone-source) .45 c h));--checkbox-bg-selected-hover: light-dark(oklch(from var(--checkbox-tone-source) .45 c h), oklch(from var(--checkbox-tone-source) .5 c h));--checkbox-bg-selected-active: light-dark(oklch(from var(--checkbox-tone-source) .4 c h), oklch(from var(--checkbox-tone-source) .57 c h))}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],[tone-scope=selected]){--checkbox-bg: light-dark(oklch(from var(--checkbox-off-tone-source) .99 calc(c*.03) h), oklch(from var(--checkbox-off-tone-source) .15 calc(c*.18) h));--_checkbox-off-bg-selected: var(--checkbox-bg-selected);--_checkbox-border-base: color-mix(in oklch, var(--_checkbox-off-bg-selected) 70%, var(--checkbox-border-neutral));--checkbox-border: light-dark(oklch(from var(--_checkbox-border-base) calc(l + .17) c h), var(--_checkbox-border-base));--checkbox-border-hover: oklch(from var(--_checkbox-border-base) calc(l + .1) c h);--checkbox-border-active: light-dark(var(--_checkbox-border-base), oklch(from var(--_checkbox-border-base) calc(l + .17) c h))}a-checkbox[tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]){--checkbox-tone-source: transparent;--checkbox-off-tone-source: transparent;@supports (color: attr(probe type(<color>),red)){--checkbox-tone-source: attr(tone type(<color>), transparent);--checkbox-off-tone-source: attr(tone type(<color>), transparent)}}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-size:15px;line-height:20px}input[data-anta][type=checkbox]{--checkbox-box-size: 16px;--checkbox-mask-size: 12px;--checkbox-round: 4px;--checkbox-bg: var(--bg-1);--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-tone-source: var(--anta-seed-neutral);--checkbox-off-tone-source: var(--anta-seed-neutral);--checkbox-bg-selected: light-dark(oklch(from var(--checkbox-tone-source) .6 c h), oklch(from var(--checkbox-tone-source) .42 c h));--checkbox-bg-selected-hover: oklch(from var(--checkbox-tone-source) .45 c h);--checkbox-bg-selected-active: light-dark(oklch(from var(--checkbox-tone-source) .4 c h), oklch(from var(--checkbox-tone-source) .5 c h));box-sizing:border-box;flex:0 0 var(--checkbox-box-size);inline-size:var(--checkbox-box-size);block-size:var(--checkbox-box-size);margin:0;appearance:none;-webkit-appearance:none;border:1.5px solid var(--checkbox-border);border-radius:var(--checkbox-round);background-color:var(--checkbox-bg);background-repeat:no-repeat;background-position:center;background-size:var(--checkbox-mask-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]{--checkbox-box-size: 14px;--checkbox-mask-size: 10px}input[data-anta][type=checkbox][size=large]{--checkbox-box-size: 18px;--checkbox-mask-size: 14px}input[data-anta][type=checkbox][round]{--checkbox-round: 999px;@supports (border-radius: attr(probe type(<length>),1px)){--checkbox-round: attr(round type(<length>), 999px)}}input[data-anta][type=checkbox][tone]:not([tone=""],[tone=neutral]){--checkbox-bg-selected: light-dark(oklch(from var(--checkbox-tone-source) .5 c h), oklch(from var(--checkbox-tone-source) .45 c h));--checkbox-bg-selected-hover: light-dark(oklch(from var(--checkbox-tone-source) .45 c h), oklch(from var(--checkbox-tone-source) .5 c h));--checkbox-bg-selected-active: light-dark(oklch(from var(--checkbox-tone-source) .4 c h), oklch(from var(--checkbox-tone-source) .57 c h))}input[data-anta][type=checkbox][tone=brand]{--checkbox-tone-source: var(--anta-seed-brand);--checkbox-off-tone-source: var(--anta-seed-brand)}input[data-anta][type=checkbox][tone=info]{--checkbox-tone-source: var(--anta-seed-info);--checkbox-off-tone-source: var(--anta-seed-info)}input[data-anta][type=checkbox][tone=success]{--checkbox-tone-source: var(--anta-seed-success);--checkbox-off-tone-source: var(--anta-seed-success)}input[data-anta][type=checkbox][tone=warning]{--checkbox-tone-source: var(--anta-seed-warning);--checkbox-off-tone-source: var(--anta-seed-warning)}input[data-anta][type=checkbox][tone=critical]{--checkbox-tone-source: var(--anta-seed-critical);--checkbox-off-tone-source: var(--anta-seed-critical)}input[data-anta][type=checkbox][tone=neutral]{--checkbox-tone-source: var(--anta-seed-neutral);--checkbox-off-tone-source: var(--anta-seed-neutral)}input[data-anta][type=checkbox][tone]:not([tone=""],[tone=neutral],[tone-scope=selected]){--checkbox-bg: light-dark(oklch(from var(--checkbox-off-tone-source) .99 calc(c*.03) h), oklch(from var(--checkbox-off-tone-source) .15 calc(c*.18) h));--_checkbox-off-bg-selected: var(--checkbox-bg-selected);--_checkbox-border-base: color-mix(in oklch, var(--_checkbox-off-bg-selected) 70%, var(--checkbox-border-neutral));--checkbox-border: light-dark(oklch(from var(--_checkbox-border-base) calc(l + .17) c h), var(--_checkbox-border-base));--checkbox-border-hover: oklch(from var(--_checkbox-border-base) calc(l + .1) c h);--checkbox-border-active: light-dark(var(--_checkbox-border-base), oklch(from var(--_checkbox-border-base) calc(l + .17) c h))}input[data-anta][type=checkbox][tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]){--checkbox-tone-source: var(--anta-seed-neutral);--checkbox-off-tone-source: var(--anta-seed-neutral);@supports (color: attr(probe type(<color>),red)){--checkbox-tone-source: attr(tone type(<color>), var(--anta-seed-neutral));--checkbox-off-tone-source: attr(tone type(<color>), var(--anta-seed-neutral))}}@media(hover:hover)and (pointer:fine){input[data-anta][type=checkbox]:not(:disabled):hover{border-color:var(--checkbox-border-hover)}input[data-anta][type=checkbox]:not(:disabled):hover:is(:checked,:indeterminate){background-color:var(--checkbox-bg-selected-hover);border-color:var(--checkbox-bg-selected-hover)}}input[data-anta][type=checkbox]:not(:disabled):active{border-color:var(--checkbox-border-active)}input[data-anta][type=checkbox]:not(:disabled):active:is(:checked,:indeterminate){background-color:var(--checkbox-bg-selected-active);border-color:var(--checkbox-bg-selected-active)}input[data-anta][type=checkbox]:is(:checked,:indeterminate){background-color:var(--checkbox-bg-selected);border-color:var(--checkbox-bg-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)}@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-dialog.css

@@ -1 +1 @@
-@layer anta.components{a-dialog{--dialog-bg: var(--bg-1);--dialog-text: var(--text-2);--dialog-border: color-mix(in oklch, black 9%, transparent);--dialog-radius: 10px;--dialog-shadow: inset 0 0 0 1px var(--dialog-border), 0 1px 3px color-mix(in oklch, black 10%, transparent), 0 12px 32px color-mix(in oklch, black 22%, transparent), 0 28px 64px color-mix(in oklch, black 14%, transparent);--dialog-overlay: color-mix(in oklch, black 42%, transparent);display:contents}a-dialog[round]{--dialog-round: var(--dialog-radius, 10px);@supports (border-radius: attr(probe type(<length>),1px)){--dialog-round: attr(round type(<length>), var(--dialog-radius, 10px))}}a-dialog:not(:defined){display:none}.dark a-dialog{--dialog-border: color-mix(in oklch, white 14%, transparent);--dialog-shadow: inset 0 0 0 1px var(--dialog-border), 0 1px 3px color-mix(in oklch, black 40%, transparent), 0 12px 32px color-mix(in oklch, black 55%, transparent), 0 28px 64px color-mix(in oklch, black 40%, transparent);--dialog-overlay: color-mix(in oklch, black 62%, transparent)}@media(forced-colors:active){a-dialog{--dialog-outline: 1px solid CanvasText;--dialog-shadow: none}}}a-dialog>p:last-child,a-dialog>:not([slot])>p:last-child{margin-block-end:0}
+@layer anta.components{a-dialog{--dialog-bg: var(--bg-1);--dialog-text: var(--text-2);--dialog-border: light-dark( color-mix(in oklch, black 9%, transparent), color-mix(in oklch, white 14%, transparent) );--dialog-radius: 10px;--dialog-shadow: inset 0 0 0 1px var(--dialog-border), 0 1px 3px color-mix(in oklch, black 10%, transparent), 0 12px 32px color-mix(in oklch, black 22%, transparent), 0 28px 64px color-mix(in oklch, black 14%, transparent);--dialog-overlay: light-dark( color-mix(in oklch, black 42%, transparent), color-mix(in oklch, black 62%, transparent) );display:contents}a-dialog[round]{--dialog-round: var(--dialog-radius, 10px);@supports (border-radius: attr(probe type(<length>),1px)){--dialog-round: attr(round type(<length>), var(--dialog-radius, 10px))}}a-dialog:not(:defined){display:none}.dark a-dialog{--dialog-shadow: inset 0 0 0 1px var(--dialog-border), 0 1px 3px color-mix(in oklch, black 40%, transparent), 0 12px 32px color-mix(in oklch, black 55%, transparent), 0 28px 64px color-mix(in oklch, black 40%, transparent)}@media(forced-colors:active){a-dialog{--dialog-outline: 1px solid CanvasText;--dialog-shadow: none}}}a-dialog>p:last-child,a-dialog>:not([slot])>p:last-child{margin-block-end:0}

package/dist/elements/a-expander.css

@@ -1 +1 @@
-@layer anta.components{a-expander,details[data-anta]{--_expander-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3e%3cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m9 18 6-6-6-6'/%3e%3c/svg%3e")}a-expander{--expander-text: var(--text-2);--expander-text-hover: var(--text-1);--expander-bg-secondary: var(--bg-2);--expander-border-secondary: var(--border-5);--expander-bg-primary: var(--bg-4);--expander-border-primary: var(--border-4);--expander-bg: var(--expander-bg-secondary);--expander-border: var(--expander-border-secondary);--expander-bg-hover-lift: .01;--expander-bg-hover: oklch(from var(--expander-bg) calc(l + var(--expander-bg-hover-lift)) c h);--expander-gutter: 24px;display:block;width:100%;box-sizing:border-box;border:1px solid var(--expander-border);border-radius:4px;color:var(--expander-text);background:var(--expander-bg);transition:background-color .1s ease}a-expander[round]{border-radius:var(--expander-round, var(--_expander-round-radius, 999px));@supports (border-radius: attr(probe type(<length>),1px)){--expander-round: attr(round type(<length>))}}a-expander>span[slot=actions]{display:contents}a-expander:not(:defined) a-expander-details{display:none}a-expander:not(:defined)[state=open] a-expander-details,a-expander:not(:defined)[default-state=open] a-expander-details{display:block}a-expander:not(:defined) a-expander-summary{position:relative;padding:6px 4px 6px var(--expander-gutter)}a-expander:not(:defined) a-expander-summary:before{content:"";position:absolute;left:calc(var(--expander-gutter) - 16px - 2px);top:50%;width:16px;height:16px;transform:translateY(-50%);background-color:currentColor;-webkit-mask:var(--_expander-chevron) center / contain no-repeat;mask:var(--_expander-chevron) center / contain no-repeat;opacity:.6}a-expander:not(:defined){display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center}a-expander:not(:defined) a-expander-summary{grid-column:1}a-expander:not(:defined)>[slot=actions]{grid-column:2;display:flex;align-items:center;gap:2px;flex-shrink:0;margin-inline-start:8px;margin-inline-end:4px}a-expander:not(:defined) a-expander-details{grid-column:1 / -1}a-expander-summary{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;line-height:20px;font-weight:584.62;letter-spacing:0;text-decoration-line:var(--_summary-underline, none);text-decoration-style:dotted;text-decoration-color:color-mix(in oklch,currentColor 75%,transparent);text-decoration-thickness:1px;text-underline-offset:3px;transition:color .15s ease}a-expander[level="1"] a-expander-summary{font-size:28px;line-height:32px}a-expander[level="2"] a-expander-summary{font-size:24px;line-height:28px}a-expander[level="3"] a-expander-summary{font-size:20px;line-height:24px}a-expander[level="4"] a-expander-summary{font-size:17px;line-height:20px}a-expander[level="6"] a-expander-summary{font-size:13px;line-height:16px}a-expander-details{display:block;padding:2px 4px 6px var(--expander-gutter);line-height:20px;overflow:auto}a-expander[priority=tertiary][outdent] a-expander-details{padding-inline-start:4px;margin-inline-start:-4px}a-expander[priority=primary]{--expander-bg: var(--expander-bg-primary);--expander-border: var(--expander-border-primary)}a-expander[priority=tertiary]{--expander-bg: transparent;--expander-border: transparent}a-expander:not([disabled]):not(:state(open)):hover{background:var(--expander-bg-hover)}a-expander:not([disabled]):not(:state(open)):active{background:var(--expander-bg)}a-expander[priority=tertiary][outdent]{--expander-gutter: 0px}a-expander[tone=brand]{--expander-text: var(--text-2-brand);--expander-text-hover: var(--text-1-brand);--expander-bg-secondary: var(--bg-2-brand);--expander-border-secondary: var(--border-5-brand);--expander-bg-primary: var(--bg-4-brand);--expander-border-primary: var(--border-4-brand)}a-expander[tone=info]{--expander-text: var(--text-2-info);--expander-text-hover: var(--text-1-info);--expander-bg-secondary: var(--bg-2-info);--expander-border-secondary: var(--border-5-info);--expander-bg-primary: var(--bg-4-info);--expander-border-primary: var(--border-4-info)}a-expander[tone=success]{--expander-text: var(--text-2-success);--expander-text-hover: var(--text-1-success);--expander-bg-secondary: var(--bg-2-success);--expander-border-secondary: var(--border-5-success);--expander-bg-primary: var(--bg-4-success);--expander-border-primary: var(--border-4-success)}a-expander[tone=warning]{--expander-text: var(--text-2-warning);--expander-text-hover: var(--text-1-warning);--expander-bg-secondary: var(--bg-2-warning);--expander-border-secondary: var(--border-5-warning);--expander-bg-primary: var(--bg-4-warning);--expander-border-primary: var(--border-4-warning)}a-expander[tone=critical]{--expander-text: var(--text-2-critical);--expander-text-hover: var(--text-1-critical);--expander-bg-secondary: var(--bg-2-critical);--expander-border-secondary: var(--border-5-critical);--expander-bg-primary: var(--bg-4-critical);--expander-border-primary: var(--border-4-critical)}a-expander[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--expander-tone-source: currentColor;--expander-text: oklch(from var(--expander-tone-source) .5 .125 h);--expander-text-hover: oklch(from var(--expander-tone-source) .4 .11 h);--expander-bg-secondary: oklch(from var(--expander-tone-source) .99 .004 h);--expander-border-secondary: oklch(from var(--expander-tone-source) .935 .028 h);--expander-bg-primary: oklch(from var(--expander-tone-source) .955 .02 h);--expander-border-primary: oklch(from var(--expander-tone-source) .9 .04 h);@supports (color: attr(probe type(<color>),red)){--expander-tone-source: attr(tone type(<color>), currentColor)}}.dark a-expander[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--expander-text: oklch(from var(--expander-tone-source) .77 .11 h);--expander-text-hover: oklch(from var(--expander-tone-source) .85 .1 h);--expander-bg-secondary: oklch(from var(--expander-tone-source) .13 .02 h);--expander-border-secondary: oklch(from var(--expander-tone-source) .21 .045 h);--expander-bg-primary: oklch(from var(--expander-tone-source) .185 .05 h);--expander-border-primary: oklch(from var(--expander-tone-source) .26 .06 h)}a-expander[disabled],a-expander[disabled][tone]{--expander-text: #afa9b1}.dark a-expander[disabled],.dark a-expander[disabled][tone]{--expander-text: #635b65}details[data-anta]{--native-expander-gutter: 24px;--native-expander-summary-padding-block: 6px;--native-expander-summary-font-size: 15px;--native-expander-summary-line-height: 20px;--native-expander-chevron-size: 16px;--native-expander-text: var(--text-2);--native-expander-text-hover: var(--text-1);--native-expander-bg-secondary: var(--bg-2);--native-expander-border-secondary: var(--border-5);--native-expander-bg-primary: var(--bg-4);--native-expander-border-primary: var(--border-4);--native-expander-round-size: 16px;--native-expander-round: 4px;--native-expander-bg: transparent;--native-expander-border: transparent;display:block;inline-size:100%;box-sizing:border-box;border:0 solid var(--native-expander-border);border-radius:var(--native-expander-round);color:var(--native-expander-text);background:var(--native-expander-bg);font-family:var(--sans-serif);font-size:15px;font-feature-settings:"ss02","ss05","tnum";line-height:var(--native-expander-summary-line-height);transition:background-color .1s ease}details[data-anta][priority=secondary]{--native-expander-bg: var(--native-expander-bg-secondary);--native-expander-border: var(--native-expander-border-secondary);border-width:1px}details[data-anta][priority=primary]{--native-expander-bg: var(--native-expander-bg-primary);--native-expander-border: var(--native-expander-border-primary);border-width:1px}details[data-anta][level="1"]{--native-expander-summary-font-size: 28px;--native-expander-summary-line-height: 32px;--native-expander-round-size: 22px}details[data-anta][level="2"]{--native-expander-summary-font-size: 24px;--native-expander-summary-line-height: 28px;--native-expander-round-size: 20px}details[data-anta][level="3"]{--native-expander-summary-font-size: 20px;--native-expander-summary-line-height: 24px;--native-expander-round-size: 18px}details[data-anta][level="4"]{--native-expander-summary-font-size: 17px;--native-expander-summary-line-height: 20px}details[data-anta][level="6"]{--native-expander-summary-font-size: 13px;--native-expander-summary-line-height: 16px;--native-expander-round-size: 14px}details[data-anta][round]{--native-expander-round: var(--native-expander-round-size)}details[data-anta][round]:not([round=""]){--native-expander-round: var(--native-expander-round-size);@supports (border-radius: attr(probe type(<length>),1px)){--native-expander-round: attr(round type(<length>), var(--native-expander-round-size))}}details[data-anta][priority=tertiary][outdent]{--native-expander-gutter: 0px}details[data-anta][tone=brand]{--native-expander-text: var(--text-2-brand);--native-expander-text-hover: var(--text-1-brand);--native-expander-bg-secondary: var(--bg-2-brand);--native-expander-border-secondary: var(--border-5-brand);--native-expander-bg-primary: var(--bg-4-brand);--native-expander-border-primary: var(--border-4-brand)}details[data-anta][tone=info]{--native-expander-text: var(--text-2-info);--native-expander-text-hover: var(--text-1-info);--native-expander-bg-secondary: var(--bg-2-info);--native-expander-border-secondary: var(--border-5-info);--native-expander-bg-primary: var(--bg-4-info);--native-expander-border-primary: var(--border-4-info)}details[data-anta][tone=success]{--native-expander-text: var(--text-2-success);--native-expander-text-hover: var(--text-1-success);--native-expander-bg-secondary: var(--bg-2-success);--native-expander-border-secondary: var(--border-5-success);--native-expander-bg-primary: var(--bg-4-success);--native-expander-border-primary: var(--border-4-success)}details[data-anta][tone=warning]{--native-expander-text: var(--text-2-warning);--native-expander-text-hover: var(--text-1-warning);--native-expander-bg-secondary: var(--bg-2-warning);--native-expander-border-secondary: var(--border-5-warning);--native-expander-bg-primary: var(--bg-4-warning);--native-expander-border-primary: var(--border-4-warning)}details[data-anta][tone=critical]{--native-expander-text: var(--text-2-critical);--native-expander-text-hover: var(--text-1-critical);--native-expander-bg-secondary: var(--bg-2-critical);--native-expander-border-secondary: var(--border-5-critical);--native-expander-bg-primary: var(--bg-4-critical);--native-expander-border-primary: var(--border-4-critical)}details[data-anta][tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--native-expander-tone-source: currentColor;--native-expander-text: oklch(from var(--native-expander-tone-source) .5 .125 h);--native-expander-text-hover: oklch(from var(--native-expander-tone-source) .4 .11 h);--native-expander-bg-secondary: oklch(from var(--native-expander-tone-source) .99 .004 h);--native-expander-border-secondary: oklch(from var(--native-expander-tone-source) .935 .028 h);--native-expander-bg-primary: oklch(from var(--native-expander-tone-source) .955 .02 h);--native-expander-border-primary: oklch(from var(--native-expander-tone-source) .9 .04 h);@supports (color: attr(probe type(<color>),red)){--native-expander-tone-source: attr(tone type(<color>), currentColor)}}.dark details[data-anta][tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--native-expander-text: oklch(from var(--native-expander-tone-source) .77 .11 h);--native-expander-text-hover: oklch(from var(--native-expander-tone-source) .85 .1 h);--native-expander-bg-secondary: oklch(from var(--native-expander-tone-source) .13 .02 h);--native-expander-border-secondary: oklch(from var(--native-expander-tone-source) .21 .045 h);--native-expander-bg-primary: oklch(from var(--native-expander-tone-source) .185 .05 h);--native-expander-border-primary: oklch(from var(--native-expander-tone-source) .26 .06 h)}details[data-anta]>summary{position:relative;box-sizing:border-box;display:block;min-width:0;padding:var(--native-expander-summary-padding-block) 4px var(--native-expander-summary-padding-block) var(--native-expander-gutter);color:inherit;cursor:pointer;font:inherit;font-size:var(--native-expander-summary-font-size);line-height:var(--native-expander-summary-line-height);font-weight:584.62;letter-spacing:0;list-style:none;text-decoration-line:none;transition:color .15s ease}details[data-anta]>summary::-webkit-details-marker{display:none}details[data-anta]>summary::marker{content:""}details[data-anta]>summary:before{content:"";position:absolute;left:calc(var(--native-expander-gutter) - var(--native-expander-chevron-size) - 2px);top:var(--native-expander-summary-padding-block);width:var(--native-expander-chevron-size);height:var(--native-expander-summary-line-height);background-color:currentColor;-webkit-mask:var(--_expander-chevron) center / var(--native-expander-chevron-size) no-repeat;mask:var(--_expander-chevron) center / var(--native-expander-chevron-size) no-repeat;opacity:.6;transform:rotate(0);transition:transform .15s ease,opacity .15s ease,background-color .15s ease}details[data-anta][open]>summary:before{opacity:1;transform:rotate(90deg)}details[data-anta]:is([priority=primary],[priority=secondary]):not([open]):hover{background:oklch(from var(--native-expander-bg) calc(l + .01) c h)}details[data-anta]:is([priority=primary],[priority=secondary]):not([open]):active{background:var(--native-expander-bg)}details[data-anta]>summary:hover{color:var(--native-expander-text-hover);text-decoration-line:underline;text-decoration-style:dotted;text-decoration-color:color-mix(in oklch,currentColor 75%,transparent);text-decoration-thickness:1px;text-underline-offset:3px}details[data-anta]>summary:hover:before{opacity:1}details[data-anta]>summary:active{color:var(--native-expander-text)}details[data-anta]>summary:focus-visible{outline:1px solid var(--focus-ring);outline-offset:1px}details[data-anta]>:not(summary){display:block;padding:2px 4px 6px var(--native-expander-gutter);line-height:20px}@media(forced-colors:active){:is(a-expander,details[data-anta]){border-color:CanvasText}:is(a-expander,details[data-anta]):not([priority=primary],[priority=tertiary]){border-style:dashed}:is(a-expander,details[data-anta])[priority=tertiary]{border-color:Canvas}a-expander::part(summary):before,a-expander:not(:defined) a-expander-summary:before,details[data-anta]>summary:before{forced-color-adjust:none;background-color:CanvasText}a-expander[disabled]::part(summary):before{background-color:GrayText}}}a-expander-details>p:last-child,a-expander-details>:not([slot])>p:last-child,details[data-anta]>p:last-child,details[data-anta]>:not(summary)>p:last-child{margin-block-end:0}
+@layer anta.components{a-expander,details[data-anta]{--_expander-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3e%3cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m9 18 6-6-6-6'/%3e%3c/svg%3e")}a-expander{--expander-text: var(--text-2);--expander-text-hover: var(--text-1);--expander-bg-secondary: var(--bg-2);--expander-border-secondary: var(--border-5);--expander-bg-primary: var(--bg-4);--expander-border-primary: var(--border-4);--expander-bg: var(--expander-bg-secondary);--expander-border: var(--expander-border-secondary);--expander-bg-hover-lift: .01;--expander-bg-hover: oklch(from var(--expander-bg) calc(l + var(--expander-bg-hover-lift)) c h);--expander-gutter: 24px;display:block;width:100%;box-sizing:border-box;border:1px solid var(--expander-border);border-radius:4px;color:var(--expander-text);background:var(--expander-bg);transition:background-color .1s ease}a-expander[round]{border-radius:var(--expander-round, var(--_expander-round-radius, 999px));@supports (border-radius: attr(probe type(<length>),1px)){--expander-round: attr(round type(<length>))}}a-expander>span[slot=actions]{display:contents}a-expander:not(:defined) a-expander-details{display:none}a-expander:not(:defined)[state=open] a-expander-details,a-expander:not(:defined)[default-state=open] a-expander-details{display:block}a-expander:not(:defined) a-expander-summary{position:relative;padding:6px 4px 6px var(--expander-gutter)}a-expander:not(:defined) a-expander-summary:before{content:"";position:absolute;left:calc(var(--expander-gutter) - 16px - 2px);top:50%;width:16px;height:16px;transform:translateY(-50%);background-color:currentColor;-webkit-mask:var(--_expander-chevron) center / contain no-repeat;mask:var(--_expander-chevron) center / contain no-repeat;opacity:.6}a-expander:not(:defined){display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center}a-expander:not(:defined) a-expander-summary{grid-column:1}a-expander:not(:defined)>[slot=actions]{grid-column:2;display:flex;align-items:center;gap:2px;flex-shrink:0;margin-inline-start:8px;margin-inline-end:4px}a-expander:not(:defined) a-expander-details{grid-column:1 / -1}a-expander-summary{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;line-height:20px;font-weight:584.62;letter-spacing:0;text-decoration-line:var(--_summary-underline, none);text-decoration-style:dotted;text-decoration-color:color-mix(in oklch,currentColor 75%,transparent);text-decoration-thickness:1px;text-underline-offset:3px;transition:color .15s ease}a-expander[level="1"] a-expander-summary{font-size:28px;line-height:32px}a-expander[level="2"] a-expander-summary{font-size:24px;line-height:28px}a-expander[level="3"] a-expander-summary{font-size:20px;line-height:24px}a-expander[level="4"] a-expander-summary{font-size:17px;line-height:20px}a-expander[level="6"] a-expander-summary{font-size:13px;line-height:16px}a-expander-details{display:block;padding:2px 4px 6px var(--expander-gutter);line-height:20px;overflow:auto}a-expander[priority=tertiary][outdent] a-expander-details{padding-inline-start:4px;margin-inline-start:-4px}a-expander[priority=primary]{--expander-bg: var(--expander-bg-primary);--expander-border: var(--expander-border-primary)}a-expander[priority=tertiary]{--expander-bg: transparent;--expander-border: transparent}a-expander:not([disabled]):not(:state(open)):hover{background:var(--expander-bg-hover)}a-expander:not([disabled]):not(:state(open)):active{background:var(--expander-bg)}a-expander[priority=tertiary][outdent]{--expander-gutter: 0px}a-expander[tone=brand]{--expander-text: var(--text-2-brand);--expander-text-hover: var(--text-1-brand);--expander-bg-secondary: var(--bg-2-brand);--expander-border-secondary: var(--border-5-brand);--expander-bg-primary: var(--bg-4-brand);--expander-border-primary: var(--border-4-brand)}a-expander[tone=info]{--expander-text: var(--text-2-info);--expander-text-hover: var(--text-1-info);--expander-bg-secondary: var(--bg-2-info);--expander-border-secondary: var(--border-5-info);--expander-bg-primary: var(--bg-4-info);--expander-border-primary: var(--border-4-info)}a-expander[tone=success]{--expander-text: var(--text-2-success);--expander-text-hover: var(--text-1-success);--expander-bg-secondary: var(--bg-2-success);--expander-border-secondary: var(--border-5-success);--expander-bg-primary: var(--bg-4-success);--expander-border-primary: var(--border-4-success)}a-expander[tone=warning]{--expander-text: var(--text-2-warning);--expander-text-hover: var(--text-1-warning);--expander-bg-secondary: var(--bg-2-warning);--expander-border-secondary: var(--border-5-warning);--expander-bg-primary: var(--bg-4-warning);--expander-border-primary: var(--border-4-warning)}a-expander[tone=critical]{--expander-text: var(--text-2-critical);--expander-text-hover: var(--text-1-critical);--expander-bg-secondary: var(--bg-2-critical);--expander-border-secondary: var(--border-5-critical);--expander-bg-primary: var(--bg-4-critical);--expander-border-primary: var(--border-4-critical)}a-expander[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--expander-tone-source: currentColor;--expander-text: light-dark(oklch(from var(--expander-tone-source) .5 .125 h), oklch(from var(--expander-tone-source) .77 .11 h));--expander-text-hover: light-dark(oklch(from var(--expander-tone-source) .4 .11 h), oklch(from var(--expander-tone-source) .85 .1 h));--expander-bg-secondary: light-dark(oklch(from var(--expander-tone-source) .99 .004 h), oklch(from var(--expander-tone-source) .13 .02 h));--expander-border-secondary: light-dark(oklch(from var(--expander-tone-source) .935 .028 h), oklch(from var(--expander-tone-source) .21 .045 h));--expander-bg-primary: light-dark(oklch(from var(--expander-tone-source) .955 .02 h), oklch(from var(--expander-tone-source) .185 .05 h));--expander-border-primary: light-dark(oklch(from var(--expander-tone-source) .9 .04 h), oklch(from var(--expander-tone-source) .26 .06 h));@supports (color: attr(probe type(<color>),red)){--expander-tone-source: attr(tone type(<color>), currentColor)}}a-expander[disabled],a-expander[disabled][tone]{--expander-text: light-dark(#afa9b1, #635b65)}details[data-anta]{--native-expander-gutter: 24px;--native-expander-summary-padding-block: 6px;--native-expander-summary-font-size: 15px;--native-expander-summary-line-height: 20px;--native-expander-chevron-size: 16px;--native-expander-text: var(--text-2);--native-expander-text-hover: var(--text-1);--native-expander-bg-secondary: var(--bg-2);--native-expander-border-secondary: var(--border-5);--native-expander-bg-primary: var(--bg-4);--native-expander-border-primary: var(--border-4);--native-expander-round-size: 16px;--native-expander-round: 4px;--native-expander-bg: transparent;--native-expander-border: transparent;display:block;inline-size:100%;box-sizing:border-box;border:0 solid var(--native-expander-border);border-radius:var(--native-expander-round);color:var(--native-expander-text);background:var(--native-expander-bg);font-family:var(--sans-serif);font-size:15px;line-height:var(--native-expander-summary-line-height);transition:background-color .1s ease}details[data-anta][priority=secondary]{--native-expander-bg: var(--native-expander-bg-secondary);--native-expander-border: var(--native-expander-border-secondary);border-width:1px}details[data-anta][priority=primary]{--native-expander-bg: var(--native-expander-bg-primary);--native-expander-border: var(--native-expander-border-primary);border-width:1px}details[data-anta][level="1"]{--native-expander-summary-font-size: 28px;--native-expander-summary-line-height: 32px;--native-expander-round-size: 22px}details[data-anta][level="2"]{--native-expander-summary-font-size: 24px;--native-expander-summary-line-height: 28px;--native-expander-round-size: 20px}details[data-anta][level="3"]{--native-expander-summary-font-size: 20px;--native-expander-summary-line-height: 24px;--native-expander-round-size: 18px}details[data-anta][level="4"]{--native-expander-summary-font-size: 17px;--native-expander-summary-line-height: 20px}details[data-anta][level="6"]{--native-expander-summary-font-size: 13px;--native-expander-summary-line-height: 16px;--native-expander-round-size: 14px}details[data-anta][round]{--native-expander-round: var(--native-expander-round-size)}details[data-anta][round]:not([round=""]){--native-expander-round: var(--native-expander-round-size);@supports (border-radius: attr(probe type(<length>),1px)){--native-expander-round: attr(round type(<length>), var(--native-expander-round-size))}}details[data-anta][priority=tertiary][outdent]{--native-expander-gutter: 0px}details[data-anta][tone=brand]{--native-expander-text: var(--text-2-brand);--native-expander-text-hover: var(--text-1-brand);--native-expander-bg-secondary: var(--bg-2-brand);--native-expander-border-secondary: var(--border-5-brand);--native-expander-bg-primary: var(--bg-4-brand);--native-expander-border-primary: var(--border-4-brand)}details[data-anta][tone=info]{--native-expander-text: var(--text-2-info);--native-expander-text-hover: var(--text-1-info);--native-expander-bg-secondary: var(--bg-2-info);--native-expander-border-secondary: var(--border-5-info);--native-expander-bg-primary: var(--bg-4-info);--native-expander-border-primary: var(--border-4-info)}details[data-anta][tone=success]{--native-expander-text: var(--text-2-success);--native-expander-text-hover: var(--text-1-success);--native-expander-bg-secondary: var(--bg-2-success);--native-expander-border-secondary: var(--border-5-success);--native-expander-bg-primary: var(--bg-4-success);--native-expander-border-primary: var(--border-4-success)}details[data-anta][tone=warning]{--native-expander-text: var(--text-2-warning);--native-expander-text-hover: var(--text-1-warning);--native-expander-bg-secondary: var(--bg-2-warning);--native-expander-border-secondary: var(--border-5-warning);--native-expander-bg-primary: var(--bg-4-warning);--native-expander-border-primary: var(--border-4-warning)}details[data-anta][tone=critical]{--native-expander-text: var(--text-2-critical);--native-expander-text-hover: var(--text-1-critical);--native-expander-bg-secondary: var(--bg-2-critical);--native-expander-border-secondary: var(--border-5-critical);--native-expander-bg-primary: var(--bg-4-critical);--native-expander-border-primary: var(--border-4-critical)}details[data-anta][tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--native-expander-tone-source: currentColor;--native-expander-text: light-dark(oklch(from var(--native-expander-tone-source) .5 .125 h), oklch(from var(--native-expander-tone-source) .77 .11 h));--native-expander-text-hover: light-dark(oklch(from var(--native-expander-tone-source) .4 .11 h), oklch(from var(--native-expander-tone-source) .85 .1 h));--native-expander-bg-secondary: light-dark(oklch(from var(--native-expander-tone-source) .99 .004 h), oklch(from var(--native-expander-tone-source) .13 .02 h));--native-expander-border-secondary: light-dark(oklch(from var(--native-expander-tone-source) .935 .028 h), oklch(from var(--native-expander-tone-source) .21 .045 h));--native-expander-bg-primary: light-dark(oklch(from var(--native-expander-tone-source) .955 .02 h), oklch(from var(--native-expander-tone-source) .185 .05 h));--native-expander-border-primary: light-dark(oklch(from var(--native-expander-tone-source) .9 .04 h), oklch(from var(--native-expander-tone-source) .26 .06 h));@supports (color: attr(probe type(<color>),red)){--native-expander-tone-source: attr(tone type(<color>), currentColor)}}details[data-anta]>summary{position:relative;box-sizing:border-box;display:block;min-width:0;padding:var(--native-expander-summary-padding-block) 4px var(--native-expander-summary-padding-block) var(--native-expander-gutter);color:inherit;cursor:pointer;font:inherit;font-variation-settings:inherit;font-size:var(--native-expander-summary-font-size);line-height:var(--native-expander-summary-line-height);font-weight:584.62;letter-spacing:0;list-style:none;text-decoration-line:none;transition:color .15s ease}details[data-anta]>summary::-webkit-details-marker{display:none}details[data-anta]>summary::marker{content:""}details[data-anta]>summary:before{content:"";position:absolute;left:calc(var(--native-expander-gutter) - var(--native-expander-chevron-size) - 2px);top:var(--native-expander-summary-padding-block);width:var(--native-expander-chevron-size);height:var(--native-expander-summary-line-height);background-color:currentColor;-webkit-mask:var(--_expander-chevron) center / var(--native-expander-chevron-size) no-repeat;mask:var(--_expander-chevron) center / var(--native-expander-chevron-size) no-repeat;opacity:.6;transform:rotate(0);transition:transform .15s ease,opacity .15s ease,background-color .15s ease}details[data-anta][open]>summary:before{opacity:1;transform:rotate(90deg)}details[data-anta]:is([priority=primary],[priority=secondary]):not([open]):hover{background:oklch(from var(--native-expander-bg) calc(l + .01) c h)}details[data-anta]:is([priority=primary],[priority=secondary]):not([open]):active{background:var(--native-expander-bg)}details[data-anta]>summary:hover{color:var(--native-expander-text-hover);text-decoration-line:underline;text-decoration-style:dotted;text-decoration-color:color-mix(in oklch,currentColor 75%,transparent);text-decoration-thickness:1px;text-underline-offset:3px}details[data-anta]>summary:hover:before{opacity:1}details[data-anta]>summary:active{color:var(--native-expander-text)}details[data-anta]>summary:focus-visible{outline:1px solid var(--focus-ring);outline-offset:1px}details[data-anta]>:not(summary){display:block;padding:2px 4px 6px var(--native-expander-gutter);line-height:20px}@media(forced-colors:active){:is(a-expander,details[data-anta]){border-color:CanvasText}:is(a-expander,details[data-anta]):not([priority=primary],[priority=tertiary]){border-style:dashed}:is(a-expander,details[data-anta])[priority=tertiary]{border-color:Canvas}a-expander::part(summary):before,a-expander:not(:defined) a-expander-summary:before,details[data-anta]>summary:before{forced-color-adjust:none;background-color:CanvasText}a-expander[disabled]::part(summary):before{background-color:GrayText}}}a-expander-details>p:last-child,a-expander-details>:not([slot])>p:last-child,details[data-anta]>p:last-child,details[data-anta]>:not(summary)>p:last-child{margin-block-end:0}

package/dist/elements/a-expander.js

@@ -45,6 +45,7 @@ const SHADOW_STYLE = `
     flex: 1;
     min-width: 0;
     font: inherit;
+    font-variation-settings: inherit;
     color: inherit;
     text-align: left;
 

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

@@ -1 +1 @@
-@layer anta.components{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: 999px;--input-time-field-radius: var(--input-time-round, 999px);@supports (border-radius: attr(probe type(<length>),1px)){--input-time-round: attr(round type(<length>), 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: 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)}@supports (color: attr(probe type(<color>),red)){--input-time-tone-source: attr(tone type(<color>), var(--border-2))}}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}}
+@layer anta.components{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-stretch:normal;font-style:normal;font-variant-numeric:tabular-nums;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: 999px;--input-time-field-radius: var(--input-time-round, 999px);@supports (border-radius: attr(probe type(<length>),1px)){--input-time-round: attr(round type(<length>), 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: var(--border-2);--input-time-border: light-dark( oklch(from var(--input-time-tone-source) .7 calc(c*.8) h), 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);@supports (color: attr(probe type(<color>),red)){--input-time-tone-source: attr(tone type(<color>), var(--border-2))}}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: light-dark( oklch(from var(--input-time-tone-source) .58 c h), oklch(from var(--input-time-tone-source) .52 c h) );--input-time-border-hover: var(--input-time-border)}a-input-time:disabled{--input-time-bg: light-dark(#44374b12, #e4d1ef0d);--input-time-border: light-dark(#44374b26, #e4d1ef1f);--input-time-border-hover: var(--input-time-border);--input-time-text: var(--text-4);--input-time-label: var(--text-4);--input-time-hint: var(--text-5);cursor:not-allowed}}

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

@@ -74,8 +74,8 @@ const SHADOW_STYLE = `
     padding-inline: 7px;
     color: var(--input-time-text);
     font-family: var(--sans-serif);
-    font-feature-settings: 'ss02', 'ss05', 'tnum';
-    font-variation-settings: 'wdth' 100, 'slnt' 0, 'ital' 0;
+    font-stretch: normal;
+    font-style: normal;
     font-size: var(--input-time-font-size);
     line-height: var(--input-time-line-height);
     font-weight: 400;
@@ -92,8 +92,9 @@ const SHADOW_STYLE = `
     background: transparent;
     color: inherit;
     font: inherit;
-    font-feature-settings: 'ss02', 'ss05', 'tnum';
-    font-variation-settings: 'wdth' 100, 'slnt' 0, 'ital' 0;
+    font-variation-settings: inherit;
+    font-stretch: inherit;
+    font-style: inherit;
     line-height: inherit;
     text-align: center;
     white-space: nowrap;
@@ -101,9 +102,6 @@ const SHADOW_STYLE = `
     cursor: text;
     font-variant-numeric: tabular-nums;
   }
-  @media (pointer: coarse) {
-    :host(:focus-within) .seg { font-size: max(16px, var(--input-time-font-size)); }
-  }
   .seg--period {
     field-sizing: content;
     width: auto;