@antadesign/anta 0.3.25 → 0.3.26

package/dist/elements/a-slider.css

@@ -1 +1 @@
-@layer anta.components{:where(a-slider,input[data-anta][type=range]){--anta-slider-control-size: 28px;--anta-slider-track-size: 2px;--anta-slider-thumb-size: 16px;--anta-slider-thumb-border-width: 1.5px}:where(a-slider,input[data-anta][type=range])[size=small]{--anta-slider-control-size: 24px;--anta-slider-thumb-size: 12px}:where(a-slider,input[data-anta][type=range])[size=large]{--anta-slider-control-size: 32px;--anta-slider-thumb-size: 20px}:where(a-slider,input[data-anta][type=range])[track-size]{--anta-slider-track-size: attr(track-size type(<length>), 2px)}:where(a-slider,input[data-anta][type=range])[thumb-size]{--anta-slider-thumb-size: attr(thumb-size type(<length>), 16px)}a-slider{--slider-track-inset: 1px;--slider-track-radius: 999px;--slider-thumb-radius: 50%;--slider-track: var(--border-4);--slider-interactive-rest: color-mix(in oklch, var(--border-2) 50%, var(--border-1));--slider-fill: var(--slider-interactive-rest);--slider-fill-hover: var(--border-1);--slider-thumb: var(--bg-1);--slider-thumb-active: var(--bg-3);--slider-thumb-interactive-rest: color-mix(in oklch, var(--border-2) 50%, var(--border-1));--slider-thumb-border: var(--slider-thumb-interactive-rest);--slider-thumb-border-active: var(--border-1);--slider-label: var(--text-3);--slider-value: var(--text-1);--slider-value-affix: var(--text-3);--slider-marker: var(--text-3);--slider-label-size: 15px;--slider-label-line-height: 20px;--slider-value-size: 15px;--slider-value-line-height: 20px;--slider-marker-size: 13px;--slider-marker-line-height: 16px;display:grid;grid-template-columns:minmax(0,1fr);gap:1px;width:100%}a-slider[size=small]{--slider-label-size: 13px;--slider-label-line-height: 16px;--slider-value-size: 13px;--slider-value-line-height: 16px;--slider-marker-size: 12px;--slider-marker-line-height: 14px}a-slider[size=large]{--slider-label-size: 17px;--slider-label-line-height: 22px;--slider-value-size: 17px;--slider-value-line-height: 22px;--slider-marker-size: 15px;--slider-marker-line-height: 19px}a-slider[round]{--slider-track-radius: var(--slider-round, attr(round type(<length>), 999px));--slider-thumb-radius: var(--slider-round, attr(round type(<length>), 999px))}a-slider[tone=brand]{--slider-interactive-rest: color-mix(in oklch, var(--border-2-brand) 50%, var(--border-1-brand));--slider-fill-hover: var(--border-1-brand)}a-slider[tone=info]{--slider-interactive-rest: color-mix(in oklch, var(--border-2-info) 50%, var(--border-1-info));--slider-fill-hover: var(--border-1-info)}a-slider[tone=success]{--slider-interactive-rest: color-mix(in oklch, var(--border-2-success) 50%, var(--border-1-success));--slider-fill-hover: var(--border-1-success)}a-slider[tone=warning]{--slider-interactive-rest: color-mix(in oklch, var(--border-2-warning) 50%, var(--border-1-warning));--slider-fill-hover: var(--border-1-warning)}a-slider[tone=critical]{--slider-interactive-rest: color-mix(in oklch, var(--border-2-critical) 50%, var(--border-1-critical));--slider-fill-hover: var(--border-1-critical)}a-slider[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--slider-tone-source: attr(tone type(<color>), transparent);--slider-interactive-rest: color-mix(in oklch, var(--slider-tone-source) 65%, var(--border-2));--slider-fill-hover: color-mix(in oklch, var(--slider-tone-source) 80%, var(--border-1))}a-slider[thumb-tone=brand]{--slider-thumb-interactive-rest: color-mix(in oklch, var(--border-2-brand) 50%, var(--border-1-brand));--slider-thumb-border-active: var(--border-1-brand)}a-slider[thumb-tone=info]{--slider-thumb-interactive-rest: color-mix(in oklch, var(--border-2-info) 50%, var(--border-1-info));--slider-thumb-border-active: var(--border-1-info)}a-slider[thumb-tone=success]{--slider-thumb-interactive-rest: color-mix(in oklch, var(--border-2-success) 50%, var(--border-1-success));--slider-thumb-border-active: var(--border-1-success)}a-slider[thumb-tone=warning]{--slider-thumb-interactive-rest: color-mix(in oklch, var(--border-2-warning) 50%, var(--border-1-warning));--slider-thumb-border-active: var(--border-1-warning)}a-slider[thumb-tone=critical]{--slider-thumb-interactive-rest: color-mix(in oklch, var(--border-2-critical) 50%, var(--border-1-critical));--slider-thumb-border-active: var(--border-1-critical)}a-slider[thumb-tone]:not([thumb-tone=""],[thumb-tone=neutral],[thumb-tone=brand],[thumb-tone=info],[thumb-tone=success],[thumb-tone=warning],[thumb-tone=critical]){--slider-thumb-tone-source: attr(thumb-tone type(<color>), transparent);--slider-thumb-interactive-rest: color-mix(in oklch, var(--slider-thumb-tone-source) 65%, var(--border-2));--slider-thumb-border-active: color-mix(in oklch, var(--slider-thumb-tone-source) 80%, var(--border-1))}a-slider[thumb-fill]{--slider-thumb: var(--slider-thumb-border);--slider-thumb-active: var(--slider-thumb-border-active)}a-slider[track-click=jump]{cursor:pointer}a-slider[disabled],a-slider:disabled{--slider-track: color-mix(in oklch, var(--border-4) 55%, transparent);--slider-fill: color-mix(in oklch, var(--border-2) 45%, transparent);--slider-thumb: var(--bg-2);--slider-thumb-border: var(--border-3);--slider-label: var(--text-4);--slider-value: var(--text-4);--slider-value-affix: var(--text-4);--slider-marker: var(--text-5);cursor:not-allowed}a-slider:not([disabled]):not(:disabled):focus-visible{outline:none;--slider-thumb-border: var(--slider-thumb-border-active);--slider-fill: var(--slider-fill-hover)}@media(hover:hover)and (pointer:fine){a-slider:not([disabled]):not(:disabled):hover{--slider-thumb-border: var(--slider-thumb-border-active);--slider-fill: var(--slider-fill-hover)}}input[data-anta][type=range]{--anta-native-range-control-size: var(--anta-slider-control-size);--anta-native-range-track-size: var(--anta-slider-track-size);--anta-native-range-track-radius: 999px;--anta-native-range-thumb-size: var(--anta-slider-thumb-size);--anta-native-range-thumb-border-width: var(--anta-slider-thumb-border-width);--anta-native-range-thumb-radius: 50%;--anta-native-range-fill-clip-edge: 2px;--anta-native-range-track: var(--border-4);--anta-native-range-interactive-rest: color-mix(in oklch, var(--border-2) 50%, var(--border-1));--anta-native-range-fill: var(--anta-native-range-interactive-rest);--anta-native-range-fill-hover: var(--border-1);--anta-native-range-thumb: var(--bg-1);--anta-native-range-thumb-active: var(--bg-3);--anta-native-range-thumb-interactive-rest: color-mix(in oklch, var(--border-2) 50%, var(--border-1));--anta-native-range-thumb-border: var(--anta-native-range-thumb-interactive-rest);--anta-native-range-thumb-border-active: var(--border-1);box-sizing:border-box;display:block;inline-size:100%;block-size:var(--anta-native-range-control-size);margin:0;padding:0;border:0;appearance:none;-webkit-appearance:none;-moz-appearance:none;background:transparent;cursor:pointer;overflow:hidden;vertical-align:middle;box-shadow:none}input[data-anta][type=range][tone=brand]{--anta-native-range-interactive-rest: color-mix(in oklch, var(--border-2-brand) 50%, var(--border-1-brand));--anta-native-range-fill-hover: var(--border-1-brand)}input[data-anta][type=range][tone=info]{--anta-native-range-interactive-rest: color-mix(in oklch, var(--border-2-info) 50%, var(--border-1-info));--anta-native-range-fill-hover: var(--border-1-info)}input[data-anta][type=range][tone=success]{--anta-native-range-interactive-rest: color-mix(in oklch, var(--border-2-success) 50%, var(--border-1-success));--anta-native-range-fill-hover: var(--border-1-success)}input[data-anta][type=range][tone=warning]{--anta-native-range-interactive-rest: color-mix(in oklch, var(--border-2-warning) 50%, var(--border-1-warning));--anta-native-range-fill-hover: var(--border-1-warning)}input[data-anta][type=range][tone=critical]{--anta-native-range-interactive-rest: color-mix(in oklch, var(--border-2-critical) 50%, var(--border-1-critical));--anta-native-range-fill-hover: var(--border-1-critical)}input[data-anta][type=range][tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--anta-native-range-tone-source: attr(tone type(<color>), transparent);--anta-native-range-interactive-rest: color-mix(in oklch, var(--anta-native-range-tone-source) 65%, var(--border-2));--anta-native-range-fill-hover: color-mix(in oklch, var(--anta-native-range-tone-source) 80%, var(--border-1))}input[data-anta][type=range][thumb-tone=brand]{--anta-native-range-thumb-interactive-rest: color-mix(in oklch, var(--border-2-brand) 50%, var(--border-1-brand));--anta-native-range-thumb-border-active: var(--border-1-brand)}input[data-anta][type=range][thumb-tone=info]{--anta-native-range-thumb-interactive-rest: color-mix(in oklch, var(--border-2-info) 50%, var(--border-1-info));--anta-native-range-thumb-border-active: var(--border-1-info)}input[data-anta][type=range][thumb-tone=success]{--anta-native-range-thumb-interactive-rest: color-mix(in oklch, var(--border-2-success) 50%, var(--border-1-success));--anta-native-range-thumb-border-active: var(--border-1-success)}input[data-anta][type=range][thumb-tone=warning]{--anta-native-range-thumb-interactive-rest: color-mix(in oklch, var(--border-2-warning) 50%, var(--border-1-warning));--anta-native-range-thumb-border-active: var(--border-1-warning)}input[data-anta][type=range][thumb-tone=critical]{--anta-native-range-thumb-interactive-rest: color-mix(in oklch, var(--border-2-critical) 50%, var(--border-1-critical));--anta-native-range-thumb-border-active: var(--border-1-critical)}input[data-anta][type=range][thumb-tone]:not([thumb-tone=""],[thumb-tone=neutral],[thumb-tone=brand],[thumb-tone=info],[thumb-tone=success],[thumb-tone=warning],[thumb-tone=critical]){--anta-native-range-thumb-tone-source: attr(thumb-tone type(<color>), transparent);--anta-native-range-thumb-interactive-rest: color-mix(in oklch, var(--anta-native-range-thumb-tone-source) 65%, var(--border-2));--anta-native-range-thumb-border-active: color-mix(in oklch, var(--anta-native-range-thumb-tone-source) 80%, var(--border-1))}input[data-anta][type=range][thumb-fill]{--anta-native-range-thumb: var(--anta-native-range-thumb-border);--anta-native-range-thumb-active: var(--anta-native-range-thumb-border-active)}input[data-anta][type=range][round]{--anta-native-range-track-radius: attr(round type(<length>), 999px);--anta-native-range-thumb-radius: attr(round type(<length>), 999px)}input[data-anta][type=range][round]:not([round=""]){--anta-native-range-fill-clip-edge: 0px}input[data-anta][type=range]::-webkit-slider-container{block-size:var(--anta-native-range-control-size);overflow:hidden}input[data-anta][type=range]::-webkit-slider-runnable-track{position:relative;box-sizing:border-box;block-size:var(--anta-native-range-thumb-size);border:0;border-radius:var(--anta-native-range-track-radius);appearance:none;-webkit-appearance:none;background:linear-gradient(var(--anta-native-range-track) 0 0) center / 100% var(--anta-native-range-track-size) no-repeat;transition:background-color 75ms ease-out}input[data-anta][type=range]::-webkit-slider-thumb{--anta-native-range-fill-clip-top: calc((var(--anta-native-range-thumb-size) - var(--anta-native-range-track-size)) / 2);--anta-native-range-fill-clip-bottom: calc(100% - var(--anta-native-range-fill-clip-top));position:relative;box-sizing:border-box;inline-size:var(--anta-native-range-thumb-size);block-size:var(--anta-native-range-thumb-size);margin-block-start:0;border:0;border-radius:var(--anta-native-range-thumb-radius);appearance:none;-webkit-appearance:none;background:var(--anta-native-range-thumb);box-shadow:inset 0 0 0 var(--anta-native-range-thumb-border-width) var(--anta-native-range-thumb-border),calc(-100vmax - var(--anta-native-range-thumb-size)) 0 0 100vmax var(--anta-native-range-fill);clip-path:polygon(100% -1px,var(--anta-native-range-fill-clip-edge) -1px,0 var(--anta-native-range-fill-clip-top),-100vmax var(--anta-native-range-fill-clip-top),-100vmax var(--anta-native-range-fill-clip-bottom),0 var(--anta-native-range-fill-clip-bottom),var(--anta-native-range-fill-clip-edge) 100%,calc(100% + 1px) calc(100% + 1px));transition:background-color 75ms ease-out,box-shadow 75ms ease-out}input[data-anta][type=range]::-moz-range-track{box-sizing:border-box;block-size:var(--anta-native-range-track-size);border:0;border-radius:var(--anta-native-range-track-radius);background:var(--anta-native-range-track);transition:background-color 75ms ease-out}input[data-anta][type=range]::-moz-range-progress{block-size:var(--anta-native-range-track-size);border:0;border-radius:var(--anta-native-range-track-radius);background:var(--anta-native-range-fill);transition:background-color 75ms ease-out}input[data-anta][type=range]::-moz-range-thumb{box-sizing:border-box;inline-size:var(--anta-native-range-thumb-size);block-size:var(--anta-native-range-thumb-size);border:0;border-radius:var(--anta-native-range-thumb-radius);background:var(--anta-native-range-thumb);box-shadow:inset 0 0 0 var(--anta-native-range-thumb-border-width) var(--anta-native-range-thumb-border);transition:background-color 75ms ease-out,box-shadow 75ms ease-out}input[data-anta][type=range]:focus-visible{outline:1px solid var(--focus-ring);outline-offset:0;--anta-native-range-fill: var(--anta-native-range-fill-hover);--anta-native-range-thumb-border: var(--anta-native-range-thumb-border-active)}@media(hover:hover)and (pointer:fine){input[data-anta][type=range]:not(:disabled):hover{--anta-native-range-fill: var(--anta-native-range-fill-hover);--anta-native-range-thumb-border: var(--anta-native-range-thumb-border-active)}}input[data-anta][type=range]:not(:disabled):active{cursor:grabbing;--anta-native-range-thumb: var(--anta-native-range-thumb-active)}input[data-anta][type=range]:disabled{--anta-native-range-track: color-mix(in oklch, var(--border-4) 55%, transparent);--anta-native-range-fill: color-mix(in oklch, var(--border-2) 45%, transparent);--anta-native-range-thumb: var(--bg-2);--anta-native-range-thumb-border: var(--border-3);cursor:not-allowed}@media(forced-colors:active){input[data-anta][type=range]{forced-color-adjust:none;--anta-native-range-track: CanvasText;--anta-native-range-fill: Highlight;--anta-native-range-thumb: Canvas;--anta-native-range-thumb-border: CanvasText}input[data-anta][type=range]:focus-visible{outline:2px solid Highlight}}@media(prefers-reduced-motion:reduce){input[data-anta][type=range]::-webkit-slider-runnable-track,input[data-anta][type=range]::-webkit-slider-thumb,input[data-anta][type=range]::-moz-range-track,input[data-anta][type=range]::-moz-range-progress,input[data-anta][type=range]::-moz-range-thumb{transition:none}}a-slider:not(:defined){display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:1px;row-gap:1px;opacity:.5;transition:opacity .28s ease-out 40ms}a-slider:not(:defined)>[slot=label]{display:block!important;grid-column:1;grid-row:1;min-width:0;color:var(--slider-label);font-family:var(--sans-serif);font-size:var(--slider-label-size);font-weight:500;line-height:var(--slider-label-line-height)}a-slider:not(:defined):before{grid-column:1 / -1;grid-row:2;content:"";block-size:var(--anta-slider-control-size);border-radius:4px;background:linear-gradient(to right,transparent var(--slider-track-inset),var(--slider-track) var(--slider-track-inset) calc(100% - var(--slider-track-inset)),transparent calc(100% - var(--slider-track-inset))) center / 100% var(--anta-slider-track-size) no-repeat}a-slider:not(:defined):after{grid-column:2;grid-row:1;content:attr(value-prefix) attr(min) attr(value-suffix);color:var(--slider-value);font-family:var(--sans-serif);font-feature-settings:"ss02","ss05","tnum";font-size:var(--slider-value-size);font-variant-numeric:tabular-nums;line-height:var(--slider-value-line-height);padding-inline-start:1ch}a-slider[defaultvalue]:not([value]):not(:defined):after{content:attr(value-prefix) attr(defaultvalue) attr(value-suffix)}a-slider[value]:not(:defined):after{content:attr(value-prefix) attr(value) attr(value-suffix)}a-slider[value-display=thumb]:not(:defined):after,a-slider[value-display=none]:not(:defined):after{display:none}a-slider[value-display=inline]:not(:defined):after{content:": " attr(value-prefix) attr(min) attr(value-suffix);display:block;white-space:nowrap}a-slider[value-display=inline][defaultvalue]:not([value]):not(:defined):after{content:": " attr(value-prefix) attr(defaultvalue) attr(value-suffix)}a-slider[value-display=inline][value]:not(:defined):after{content:": " attr(value-prefix) attr(value) attr(value-suffix)}a-slider[value-display=none]:not(:defined):not(:has(>[slot=label])):before{grid-row:1}a-slider:not(:defined)>[slot=markers]{grid-column:1 / -1;grid-row:3;position:relative;inset-inline-start:var(--slider-marker-position);max-inline-size:min(12rem,50vw);color:var(--slider-marker, var(--text-4));font-family:var(--sans-serif);font-feature-settings:"ss02","ss05","tnum";font-size:var(--slider-marker-size);font-variant-numeric:tabular-nums;line-height:var(--slider-marker-line-height);text-align:center;transform:translate(-50%);white-space:nowrap}a-slider:not(:defined)>[slot=markers][data-slider-marker-start]{text-align:start;transform:translate(0)}a-slider:not(:defined)>[slot=markers][data-slider-marker-end]{text-align:end;transform:translate(-100%)}a-slider:not(:defined)>:not([slot]){grid-column:1 / -1;grid-row:3}a-slider:defined{opacity:1;transition:opacity .28s ease-out 40ms}@media(prefers-reduced-motion:reduce){a-slider,a-slider:not(:defined),a-slider:defined{transition:none}}}
+@layer anta.components{:where(a-slider,input[data-anta][type=range]){--anta-slider-control-size: 28px;--anta-slider-track-size: 2px;--anta-slider-thumb-size: 16px;--anta-slider-thumb-border-width: 1.5px}:where(a-slider,input[data-anta][type=range])[size=small]{--anta-slider-control-size: 24px;--anta-slider-thumb-size: 12px}:where(a-slider,input[data-anta][type=range])[size=large]{--anta-slider-control-size: 32px;--anta-slider-thumb-size: 20px}:where(a-slider,input[data-anta][type=range])[track-size]{--anta-slider-track-size: 2px;@supports (border-radius: attr(probe type(<length>),1px)){--anta-slider-track-size: attr(track-size type(<length>), 2px)}}:where(a-slider,input[data-anta][type=range])[thumb-size]{--anta-slider-thumb-size: 16px;@supports (border-radius: attr(probe type(<length>),1px)){--anta-slider-thumb-size: attr(thumb-size type(<length>), 16px)}}a-slider{--slider-track-inset: 1px;--slider-track-radius: 999px;--slider-thumb-radius: 50%;--slider-track: var(--border-4);--slider-interactive-rest: color-mix(in oklch, var(--border-2) 50%, var(--border-1));--slider-fill: var(--slider-interactive-rest);--slider-fill-hover: var(--border-1);--slider-thumb: var(--bg-1);--slider-thumb-active: var(--bg-3);--slider-thumb-interactive-rest: color-mix(in oklch, var(--border-2) 50%, var(--border-1));--slider-thumb-border: var(--slider-thumb-interactive-rest);--slider-thumb-border-active: var(--border-1);--slider-label: var(--text-3);--slider-value: var(--text-1);--slider-value-affix: var(--text-3);--slider-marker: var(--text-3);--slider-label-size: 15px;--slider-label-line-height: 20px;--slider-value-size: 15px;--slider-value-line-height: 20px;--slider-marker-size: 13px;--slider-marker-line-height: 16px;display:grid;grid-template-columns:minmax(0,1fr);gap:1px;width:100%}a-slider[size=small]{--slider-label-size: 13px;--slider-label-line-height: 16px;--slider-value-size: 13px;--slider-value-line-height: 16px;--slider-marker-size: 12px;--slider-marker-line-height: 14px}a-slider[size=large]{--slider-label-size: 17px;--slider-label-line-height: 22px;--slider-value-size: 17px;--slider-value-line-height: 22px;--slider-marker-size: 15px;--slider-marker-line-height: 19px}a-slider[round]{--slider-track-radius: var(--slider-round, 999px);--slider-thumb-radius: var(--slider-round, 999px);@supports (border-radius: attr(probe type(<length>),1px)){--slider-track-radius: var(--slider-round, attr(round type(<length>), 999px));--slider-thumb-radius: var(--slider-round, attr(round type(<length>), 999px))}}a-slider[tone=brand]{--slider-interactive-rest: color-mix(in oklch, var(--border-2-brand) 50%, var(--border-1-brand));--slider-fill-hover: var(--border-1-brand)}a-slider[tone=info]{--slider-interactive-rest: color-mix(in oklch, var(--border-2-info) 50%, var(--border-1-info));--slider-fill-hover: var(--border-1-info)}a-slider[tone=success]{--slider-interactive-rest: color-mix(in oklch, var(--border-2-success) 50%, var(--border-1-success));--slider-fill-hover: var(--border-1-success)}a-slider[tone=warning]{--slider-interactive-rest: color-mix(in oklch, var(--border-2-warning) 50%, var(--border-1-warning));--slider-fill-hover: var(--border-1-warning)}a-slider[tone=critical]{--slider-interactive-rest: color-mix(in oklch, var(--border-2-critical) 50%, var(--border-1-critical));--slider-fill-hover: var(--border-1-critical)}a-slider[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--slider-tone-source: transparent;--slider-interactive-rest: color-mix(in oklch, var(--slider-tone-source) 65%, var(--border-2));--slider-fill-hover: color-mix(in oklch, var(--slider-tone-source) 80%, var(--border-1));@supports (color: attr(probe type(<color>),red)){--slider-tone-source: attr(tone type(<color>), transparent)}}a-slider[thumb-tone=brand]{--slider-thumb-interactive-rest: color-mix(in oklch, var(--border-2-brand) 50%, var(--border-1-brand));--slider-thumb-border-active: var(--border-1-brand)}a-slider[thumb-tone=info]{--slider-thumb-interactive-rest: color-mix(in oklch, var(--border-2-info) 50%, var(--border-1-info));--slider-thumb-border-active: var(--border-1-info)}a-slider[thumb-tone=success]{--slider-thumb-interactive-rest: color-mix(in oklch, var(--border-2-success) 50%, var(--border-1-success));--slider-thumb-border-active: var(--border-1-success)}a-slider[thumb-tone=warning]{--slider-thumb-interactive-rest: color-mix(in oklch, var(--border-2-warning) 50%, var(--border-1-warning));--slider-thumb-border-active: var(--border-1-warning)}a-slider[thumb-tone=critical]{--slider-thumb-interactive-rest: color-mix(in oklch, var(--border-2-critical) 50%, var(--border-1-critical));--slider-thumb-border-active: var(--border-1-critical)}a-slider[thumb-tone]:not([thumb-tone=""],[thumb-tone=neutral],[thumb-tone=brand],[thumb-tone=info],[thumb-tone=success],[thumb-tone=warning],[thumb-tone=critical]){--slider-thumb-tone-source: transparent;--slider-thumb-interactive-rest: color-mix(in oklch, var(--slider-thumb-tone-source) 65%, var(--border-2));--slider-thumb-border-active: color-mix(in oklch, var(--slider-thumb-tone-source) 80%, var(--border-1));@supports (color: attr(probe type(<color>),red)){--slider-thumb-tone-source: attr(thumb-tone type(<color>), transparent)}}a-slider[thumb-fill]{--slider-thumb: var(--slider-thumb-border);--slider-thumb-active: var(--slider-thumb-border-active)}a-slider[track-click=jump]{cursor:pointer}a-slider[disabled],a-slider:disabled{--slider-track: color-mix(in oklch, var(--border-4) 55%, transparent);--slider-fill: color-mix(in oklch, var(--border-2) 45%, transparent);--slider-thumb: var(--bg-2);--slider-thumb-border: var(--border-3);--slider-label: var(--text-4);--slider-value: var(--text-4);--slider-value-affix: var(--text-4);--slider-marker: var(--text-5);cursor:not-allowed}a-slider:not([disabled]):not(:disabled):focus-visible{outline:none;--slider-thumb-border: var(--slider-thumb-border-active);--slider-fill: var(--slider-fill-hover)}@media(hover:hover)and (pointer:fine){a-slider:not([disabled]):not(:disabled):hover{--slider-thumb-border: var(--slider-thumb-border-active);--slider-fill: var(--slider-fill-hover)}}input[data-anta][type=range]{--anta-native-range-control-size: var(--anta-slider-control-size);--anta-native-range-track-size: var(--anta-slider-track-size);--anta-native-range-track-radius: 999px;--anta-native-range-thumb-size: var(--anta-slider-thumb-size);--anta-native-range-thumb-border-width: var(--anta-slider-thumb-border-width);--anta-native-range-thumb-radius: 50%;--anta-native-range-fill-clip-edge: 2px;--anta-native-range-track: var(--border-4);--anta-native-range-interactive-rest: color-mix(in oklch, var(--border-2) 50%, var(--border-1));--anta-native-range-fill: var(--anta-native-range-interactive-rest);--anta-native-range-fill-hover: var(--border-1);--anta-native-range-thumb: var(--bg-1);--anta-native-range-thumb-active: var(--bg-3);--anta-native-range-thumb-interactive-rest: color-mix(in oklch, var(--border-2) 50%, var(--border-1));--anta-native-range-thumb-border: var(--anta-native-range-thumb-interactive-rest);--anta-native-range-thumb-border-active: var(--border-1);box-sizing:border-box;display:block;inline-size:100%;block-size:var(--anta-native-range-control-size);margin:0;padding:0;border:0;appearance:none;-webkit-appearance:none;-moz-appearance:none;background:transparent;cursor:pointer;overflow:hidden;vertical-align:middle;box-shadow:none}input[data-anta][type=range][tone=brand]{--anta-native-range-interactive-rest: color-mix(in oklch, var(--border-2-brand) 50%, var(--border-1-brand));--anta-native-range-fill-hover: var(--border-1-brand)}input[data-anta][type=range][tone=info]{--anta-native-range-interactive-rest: color-mix(in oklch, var(--border-2-info) 50%, var(--border-1-info));--anta-native-range-fill-hover: var(--border-1-info)}input[data-anta][type=range][tone=success]{--anta-native-range-interactive-rest: color-mix(in oklch, var(--border-2-success) 50%, var(--border-1-success));--anta-native-range-fill-hover: var(--border-1-success)}input[data-anta][type=range][tone=warning]{--anta-native-range-interactive-rest: color-mix(in oklch, var(--border-2-warning) 50%, var(--border-1-warning));--anta-native-range-fill-hover: var(--border-1-warning)}input[data-anta][type=range][tone=critical]{--anta-native-range-interactive-rest: color-mix(in oklch, var(--border-2-critical) 50%, var(--border-1-critical));--anta-native-range-fill-hover: var(--border-1-critical)}input[data-anta][type=range][tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--anta-native-range-tone-source: transparent;--anta-native-range-interactive-rest: color-mix(in oklch, var(--anta-native-range-tone-source) 65%, var(--border-2));--anta-native-range-fill-hover: color-mix(in oklch, var(--anta-native-range-tone-source) 80%, var(--border-1));@supports (color: attr(probe type(<color>),red)){--anta-native-range-tone-source: attr(tone type(<color>), transparent)}}input[data-anta][type=range][thumb-tone=brand]{--anta-native-range-thumb-interactive-rest: color-mix(in oklch, var(--border-2-brand) 50%, var(--border-1-brand));--anta-native-range-thumb-border-active: var(--border-1-brand)}input[data-anta][type=range][thumb-tone=info]{--anta-native-range-thumb-interactive-rest: color-mix(in oklch, var(--border-2-info) 50%, var(--border-1-info));--anta-native-range-thumb-border-active: var(--border-1-info)}input[data-anta][type=range][thumb-tone=success]{--anta-native-range-thumb-interactive-rest: color-mix(in oklch, var(--border-2-success) 50%, var(--border-1-success));--anta-native-range-thumb-border-active: var(--border-1-success)}input[data-anta][type=range][thumb-tone=warning]{--anta-native-range-thumb-interactive-rest: color-mix(in oklch, var(--border-2-warning) 50%, var(--border-1-warning));--anta-native-range-thumb-border-active: var(--border-1-warning)}input[data-anta][type=range][thumb-tone=critical]{--anta-native-range-thumb-interactive-rest: color-mix(in oklch, var(--border-2-critical) 50%, var(--border-1-critical));--anta-native-range-thumb-border-active: var(--border-1-critical)}input[data-anta][type=range][thumb-tone]:not([thumb-tone=""],[thumb-tone=neutral],[thumb-tone=brand],[thumb-tone=info],[thumb-tone=success],[thumb-tone=warning],[thumb-tone=critical]){--anta-native-range-thumb-tone-source: transparent;--anta-native-range-thumb-interactive-rest: color-mix(in oklch, var(--anta-native-range-thumb-tone-source) 65%, var(--border-2));--anta-native-range-thumb-border-active: color-mix(in oklch, var(--anta-native-range-thumb-tone-source) 80%, var(--border-1));@supports (color: attr(probe type(<color>),red)){--anta-native-range-thumb-tone-source: attr(thumb-tone type(<color>), transparent)}}input[data-anta][type=range][thumb-fill]{--anta-native-range-thumb: var(--anta-native-range-thumb-border);--anta-native-range-thumb-active: var(--anta-native-range-thumb-border-active)}input[data-anta][type=range][round]{--anta-native-range-track-radius: 999px;--anta-native-range-thumb-radius: 999px;@supports (border-radius: attr(probe type(<length>),1px)){--anta-native-range-track-radius: attr(round type(<length>), 999px);--anta-native-range-thumb-radius: attr(round type(<length>), 999px)}}input[data-anta][type=range][round]:not([round=""]){--anta-native-range-fill-clip-edge: 0px}input[data-anta][type=range]::-webkit-slider-container{block-size:var(--anta-native-range-control-size);overflow:hidden}input[data-anta][type=range]::-webkit-slider-runnable-track{position:relative;box-sizing:border-box;block-size:var(--anta-native-range-thumb-size);border:0;border-radius:var(--anta-native-range-track-radius);appearance:none;-webkit-appearance:none;background:linear-gradient(var(--anta-native-range-track) 0 0) center / 100% var(--anta-native-range-track-size) no-repeat;transition:background-color 75ms ease-out}input[data-anta][type=range]::-webkit-slider-thumb{--anta-native-range-fill-clip-top: calc((var(--anta-native-range-thumb-size) - var(--anta-native-range-track-size)) / 2);--anta-native-range-fill-clip-bottom: calc(100% - var(--anta-native-range-fill-clip-top));position:relative;box-sizing:border-box;inline-size:var(--anta-native-range-thumb-size);block-size:var(--anta-native-range-thumb-size);margin-block-start:0;border:0;border-radius:var(--anta-native-range-thumb-radius);appearance:none;-webkit-appearance:none;background:var(--anta-native-range-thumb);box-shadow:inset 0 0 0 var(--anta-native-range-thumb-border-width) var(--anta-native-range-thumb-border),calc(-100vmax - var(--anta-native-range-thumb-size)) 0 0 100vmax var(--anta-native-range-fill);clip-path:polygon(100% -1px,var(--anta-native-range-fill-clip-edge) -1px,0 var(--anta-native-range-fill-clip-top),-100vmax var(--anta-native-range-fill-clip-top),-100vmax var(--anta-native-range-fill-clip-bottom),0 var(--anta-native-range-fill-clip-bottom),var(--anta-native-range-fill-clip-edge) 100%,calc(100% + 1px) calc(100% + 1px));transition:background-color 75ms ease-out,box-shadow 75ms ease-out}input[data-anta][type=range]::-moz-range-track{box-sizing:border-box;block-size:var(--anta-native-range-track-size);border:0;border-radius:var(--anta-native-range-track-radius);background:var(--anta-native-range-track);transition:background-color 75ms ease-out}input[data-anta][type=range]::-moz-range-progress{block-size:var(--anta-native-range-track-size);border:0;border-radius:var(--anta-native-range-track-radius);background:var(--anta-native-range-fill);transition:background-color 75ms ease-out}input[data-anta][type=range]::-moz-range-thumb{box-sizing:border-box;inline-size:var(--anta-native-range-thumb-size);block-size:var(--anta-native-range-thumb-size);border:0;border-radius:var(--anta-native-range-thumb-radius);background:var(--anta-native-range-thumb);box-shadow:inset 0 0 0 var(--anta-native-range-thumb-border-width) var(--anta-native-range-thumb-border);transition:background-color 75ms ease-out,box-shadow 75ms ease-out}input[data-anta][type=range]:focus-visible{outline:1px solid var(--focus-ring);outline-offset:0;--anta-native-range-fill: var(--anta-native-range-fill-hover);--anta-native-range-thumb-border: var(--anta-native-range-thumb-border-active)}@media(hover:hover)and (pointer:fine){input[data-anta][type=range]:not(:disabled):hover{--anta-native-range-fill: var(--anta-native-range-fill-hover);--anta-native-range-thumb-border: var(--anta-native-range-thumb-border-active)}}input[data-anta][type=range]:not(:disabled):active{cursor:grabbing;--anta-native-range-thumb: var(--anta-native-range-thumb-active)}input[data-anta][type=range]:disabled{--anta-native-range-track: color-mix(in oklch, var(--border-4) 55%, transparent);--anta-native-range-fill: color-mix(in oklch, var(--border-2) 45%, transparent);--anta-native-range-thumb: var(--bg-2);--anta-native-range-thumb-border: var(--border-3);cursor:not-allowed}@media(forced-colors:active){input[data-anta][type=range]{forced-color-adjust:none;--anta-native-range-track: CanvasText;--anta-native-range-fill: Highlight;--anta-native-range-thumb: Canvas;--anta-native-range-thumb-border: CanvasText}input[data-anta][type=range]:focus-visible{outline:2px solid Highlight}}@media(prefers-reduced-motion:reduce){input[data-anta][type=range]::-webkit-slider-runnable-track,input[data-anta][type=range]::-webkit-slider-thumb,input[data-anta][type=range]::-moz-range-track,input[data-anta][type=range]::-moz-range-progress,input[data-anta][type=range]::-moz-range-thumb{transition:none}}a-slider:not(:defined){display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:1px;row-gap:1px;opacity:.5;transition:opacity .28s ease-out 40ms}a-slider:not(:defined)>[slot=label]{display:block!important;grid-column:1;grid-row:1;min-width:0;color:var(--slider-label);font-family:var(--sans-serif);font-size:var(--slider-label-size);font-weight:500;line-height:var(--slider-label-line-height)}a-slider:not(:defined):before{grid-column:1 / -1;grid-row:2;content:"";block-size:var(--anta-slider-control-size);border-radius:4px;background:linear-gradient(to right,transparent var(--slider-track-inset),var(--slider-track) var(--slider-track-inset) calc(100% - var(--slider-track-inset)),transparent calc(100% - var(--slider-track-inset))) center / 100% var(--anta-slider-track-size) no-repeat}a-slider:not(:defined):after{grid-column:2;grid-row:1;content:attr(value-prefix) attr(min) attr(value-suffix);color:var(--slider-value);font-family:var(--sans-serif);font-feature-settings:"ss02","ss05","tnum";font-size:var(--slider-value-size);font-variant-numeric:tabular-nums;line-height:var(--slider-value-line-height);padding-inline-start:1ch}a-slider[defaultvalue]:not([value]):not(:defined):after{content:attr(value-prefix) attr(defaultvalue) attr(value-suffix)}a-slider[value]:not(:defined):after{content:attr(value-prefix) attr(value) attr(value-suffix)}a-slider[value-display=thumb]:not(:defined):after,a-slider[value-display=none]:not(:defined):after{display:none}a-slider[value-display=inline]:not(:defined):after{content:": " attr(value-prefix) attr(min) attr(value-suffix);display:block;white-space:nowrap}a-slider[value-display=inline][defaultvalue]:not([value]):not(:defined):after{content:": " attr(value-prefix) attr(defaultvalue) attr(value-suffix)}a-slider[value-display=inline][value]:not(:defined):after{content:": " attr(value-prefix) attr(value) attr(value-suffix)}a-slider[value-display=none]:not(:defined):not(:has(>[slot=label])):before{grid-row:1}a-slider:not(:defined)>[slot=markers]{grid-column:1 / -1;grid-row:3;position:relative;inset-inline-start:var(--slider-marker-position);max-inline-size:min(12rem,50vw);color:var(--slider-marker, var(--text-4));font-family:var(--sans-serif);font-feature-settings:"ss02","ss05","tnum";font-size:var(--slider-marker-size);font-variant-numeric:tabular-nums;line-height:var(--slider-marker-line-height);text-align:center;transform:translate(-50%);white-space:nowrap}a-slider:not(:defined)>[slot=markers][data-slider-marker-start]{text-align:start;transform:translate(0)}a-slider:not(:defined)>[slot=markers][data-slider-marker-end]{text-align:end;transform:translate(-100%)}a-slider:not(:defined)>:not([slot]){grid-column:1 / -1;grid-row:3}a-slider:defined{opacity:1;transition:opacity .28s ease-out 40ms}@media(prefers-reduced-motion:reduce){a-slider,a-slider:not(:defined),a-slider:defined{transition:none}}}

package/dist/elements/a-switch.css

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

package/dist/elements/a-switch.js

@@ -78,8 +78,8 @@ class ASwitchElement extends HTMLElementBase {
   paint() {
     const internals = this.internals;
     if (!internals) return;
-    internals.states.delete("checked");
-    if (this.currentState === "checked") internals.states.add("checked");
+    internals?.states?.delete("checked");
+    if (this.currentState === "checked") internals?.states?.add("checked");
     internals.ariaChecked = this.currentState === "checked" ? "true" : "false";
     internals.setFormValue?.(
       this.currentState === "checked" ? this.getAttribute("value") ?? "on" : null,

package/dist/elements/a-tabpanel.js

@@ -41,8 +41,8 @@ class ATabPanelElement extends HTMLElementBase {
     const value = this.getAttribute("value");
     const active = !!this.tabs && value === (this.tabs.value ?? null);
     try {
-      if (active) this.internals?.states.add("active");
-      else this.internals?.states.delete("active");
+      if (active) this.internals?.states?.add("active");
+      else this.internals?.states?.delete("active");
     } catch {
     }
     if (this.internals && "ariaLabelledByElements" in this.internals) {

package/dist/elements/a-tabs.css

@@ -1 +1 @@
-@layer anta.components{a-tabs{--_fs: 15px;--_lh: 20px;--_pb: 1px;--tab-padding-x: 9px;--tab-height: 28px;--tab-radius: 4px;--tabs-gap: 3px;--tab-timing: .15s ease-out;--tabs-tone-source: var(--anta-seed-neutral);--tab-fg-rest: var(--text-3);--tab-selected-text: var(--text-1);--tab-text-2: var(--text-2);--_track-l: .55;--_track-c: .008;--_track-a: .06;--_sec-a: .03;--tabs-track-bg: oklch(from var(--tabs-tone-source) var(--_track-l) var(--_track-c) h / var(--_track-a));--tabs-track-border: var(--border-4);--tabs-track-shadow: inset 0 0 0px .5px var(--tabs-track-border);--tab-selected-bg: var(--bg-1);--tab-selected-border: var(--border-2);--tab-selected-shadow: inset 0 0 0px .5px var(--tab-selected-border);--tab-secondary-bg: oklch(from var(--tabs-tone-source) var(--_track-l) var(--_track-c) h / var(--_sec-a));display:flex;flex-direction:row;align-items:stretch;gap:var(--tabs-gap);padding:0;width:fit-content;align-self:flex-start;min-width:0;max-width:100%;overflow:hidden;scroll-behavior:smooth}a-tabs[size=small]{--_fs: 13px;--_lh: 16px;--_pb: .5px;--tab-padding-x: 7px;--tab-height: 24px}a-tabs[size=large]{--_fs: 17px;--_lh: 24px;--_pb: 1.5px;--tab-padding-x: 13px;--tab-height: 32px}a-tabs a-tab :is(a-icon,a-loader){--icon-size: 16px}a-tabs[size=small] a-tab :is(a-icon,a-loader){--icon-size: 14px}a-tabs[size=large] a-tab :is(a-icon,a-loader){--icon-size: 18px}a-tabs[tone=brand],a-tab[tone=brand]{--tabs-tone-source: var(--anta-seed-brand);--tab-selected-text: var(--text-1-brand);--tab-text-2: var(--text-2-brand);--tab-rest-tone: var(--text-3-brand);--tabs-track-border: var(--border-4-brand);--tab-selected-border: var(--border-2-brand)}a-tabs[tone=info],a-tab[tone=info]{--tabs-tone-source: var(--anta-seed-info);--tab-selected-text: var(--text-1-info);--tab-text-2: var(--text-2-info);--tab-rest-tone: var(--text-3-info);--tabs-track-border: var(--border-4-info);--tab-selected-border: var(--border-2-info)}a-tabs[tone=success],a-tab[tone=success]{--tabs-tone-source: var(--anta-seed-success);--tab-selected-text: var(--text-1-success);--tab-text-2: var(--text-2-success);--tab-rest-tone: var(--text-3-success);--tabs-track-border: var(--border-4-success);--tab-selected-border: var(--border-2-success)}a-tabs[tone=warning],a-tab[tone=warning]{--tabs-tone-source: var(--anta-seed-warning);--tab-selected-text: var(--text-1-warning);--tab-text-2: var(--text-2-warning);--tab-rest-tone: var(--text-3-warning);--tabs-track-border: var(--border-4-warning);--tab-selected-border: var(--border-2-warning)}a-tabs[tone=critical],a-tab[tone=critical]{--tabs-tone-source: var(--anta-seed-critical);--tab-selected-text: var(--text-1-critical);--tab-text-2: var(--text-2-critical);--tab-rest-tone: var(--text-3-critical);--tabs-track-border: var(--border-4-critical);--tab-selected-border: var(--border-2-critical)}a-tab[tone=neutral]{--tabs-tone-source: var(--anta-seed-neutral);--tab-selected-text: var(--text-1);--tab-text-2: var(--text-2);--tab-rest-tone: var(--text-3);--tabs-track-border: var(--border-4);--tab-selected-border: var(--border-2);--_track-c: .008}a-tabs[tone]:not([tone=""],[tone=neutral]),a-tab[tone]:not([tone=""],[tone=neutral]){--_track-c: .14}a-tabs:has(>a-tab[tone=brand]:state(selected)){--tabs-tone-source: var(--anta-seed-brand);--tab-selected-text: var(--text-1-brand);--tab-selected-border: var(--border-2-brand)}a-tabs:has(>a-tab[tone=info]:state(selected)){--tabs-tone-source: var(--anta-seed-info);--tab-selected-text: var(--text-1-info);--tab-selected-border: var(--border-2-info)}a-tabs:has(>a-tab[tone=success]:state(selected)){--tabs-tone-source: var(--anta-seed-success);--tab-selected-text: var(--text-1-success);--tab-selected-border: var(--border-2-success)}a-tabs:has(>a-tab[tone=warning]:state(selected)){--tabs-tone-source: var(--anta-seed-warning);--tab-selected-text: var(--text-1-warning);--tab-selected-border: var(--border-2-warning)}a-tabs:has(>a-tab[tone=critical]:state(selected)){--tabs-tone-source: var(--anta-seed-critical);--tab-selected-text: var(--text-1-critical);--tab-selected-border: var(--border-2-critical)}a-tabs:has(>a-tab[tone]:state(selected):not([tone=""],[tone=neutral])){--_track-c: .14}a-tabs[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]),a-tab[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--tabs-tone-source: attr(tone type(<color>), #635b65);--tab-selected-text: oklch(from var(--tabs-tone-source) .38 .13 h);--tab-text-2: oklch(from var(--tabs-tone-source) .45 .13 h);--tab-rest-tone: oklch(from var(--tabs-tone-source) .45 .13 h / .8);--tabs-track-border: oklch(from var(--tabs-tone-source) .9 .045 h);--tab-selected-border: oklch(from var(--tabs-tone-source) .8 .09 h)}a-tabs a-tab{--tab-fg: var(--tab-fg-rest);--tab-bg: transparent}a-tabs:not([orientation=vertical]) a-tab{flex:1 1 0;max-width:max-content}a-tabs[fill]{width:100%;align-self:stretch}a-tabs[fill]:not([orientation=vertical]) a-tab{flex:1 1 0;max-width:none}@media(hover:hover)and (pointer:fine){a-tabs a-tab:hover{--tab-fg: var(--tab-selected-text)}}a-tabs:not([priority=secondary],[priority=tertiary]){background:var(--tabs-track-bg);box-shadow:var(--tabs-track-shadow);border-radius:4px}a-tabs[round]{--tab-radius: 999px;--tabs-round: attr(round type(<length>), 999px)}a-tabs[round]:not([priority=secondary],[priority=tertiary]){border-radius:var(--tabs-round, 999px)}a-tabs:not([priority=secondary],[priority=tertiary]) a-tab:state(selected){--tab-fg: var(--tab-selected-text);--tab-bg: var(--tab-selected-bg);box-shadow:var(--tab-selected-shadow)}a-tabs[tone]:not([tone=""],[tone=neutral]),a-tab[tone]:not([tone=""],[tone=neutral]){--tab-fg-rest: var(--tab-rest-tone)}@media(hover:hover)and (pointer:fine){a-tabs[priority=secondary] a-tab:hover{--tab-fg: var(--tab-selected-text)}}a-tabs[priority=secondary] a-tab:state(selected){--tab-fg: var(--tab-selected-text);--tab-bg: var(--tab-secondary-bg);box-shadow:var(--tab-selected-shadow)}a-tabs[priority=tertiary] a-tab{--tab-underline-size: 1px;--tab-underline-color: transparent;position:relative;border-radius:0}a-tabs[priority=tertiary] a-tab:after{content:"";position:absolute;inset:0;box-sizing:border-box;pointer-events:none;border-bottom:var(--tab-underline-size) solid var(--tab-underline-color);transition:border-width var(--tab-timing),border-color var(--tab-timing)}a-tabs[orientation=vertical][priority=tertiary] a-tab:after{border-bottom:0;border-inline-end:var(--tab-underline-size) solid var(--tab-underline-color)}@media(hover:hover)and (pointer:fine){a-tabs[priority=tertiary] a-tab:hover{--tab-fg: var(--tab-text-2)}}a-tabs[priority=tertiary] a-tab:state(selected){--tab-fg: var(--tab-selected-text);--tab-underline-size: 1px;--tab-underline-color: var(--tab-selected-text)}a-tabs[orientation=vertical]{flex-direction:column;align-items:stretch;max-width:none;overflow-x:hidden;overflow-y:auto;flex-shrink:0}a-tabs[orientation=vertical] a-tab{justify-content:flex-start;flex-shrink:0}@supports (anchor-scope: all){a-tabs:not([noslide]){position:relative;anchor-scope:all}a-tabs:not([noslide]) a-tab{position:relative;z-index:1}a-tabs:not([noslide]) a-tab:state(selected){anchor-name:--tabs-active}a-tabs:not([noslide]):before{content:"";position:absolute;z-index:0;box-sizing:border-box;position-anchor:--tabs-active;top:anchor(top);right:anchor(right);bottom:anchor(bottom);left:anchor(left);transition:top var(--tab-timing),right var(--tab-timing),bottom var(--tab-timing),left var(--tab-timing)}a-tabs:state(resizing):not([noslide]):before{transition:none}a-tabs:not([noslide]):not(:has(a-tab:state(selected))):before{display:none}@media(prefers-reduced-motion:reduce){a-tabs:not([noslide]):before{transition:none}}a-tabs:not([noslide]) a-tab:state(selected){--tab-bg: transparent;box-shadow:none}a-tabs:not([noslide],[priority=secondary],[priority=tertiary]):before{background:var(--tab-selected-bg);border-radius:var(--tab-radius);box-shadow:var(--tab-selected-shadow)}a-tabs:not([noslide])[priority=secondary]:before{background:var(--tab-secondary-bg);border-radius:var(--tab-radius);box-shadow:var(--tab-selected-shadow)}a-tabs:not([noslide])[priority=tertiary] a-tab:state(selected){--tab-underline-size: 1px;--tab-underline-color: transparent}a-tabs:not([noslide])[priority=tertiary]:before{z-index:2;border-bottom:1px solid var(--tab-selected-text)}a-tabs[orientation=vertical]:not([noslide])[priority=tertiary]:before{border-bottom:0;border-inline-end:1px solid var(--tab-selected-text)}}.dark a-tabs{--_track-l: .8;--_track-a: .07;--_sec-a: .08}.dark a-tabs[tone]:not([tone=""],[tone=neutral]),.dark a-tab[tone]:not([tone=""],[tone=neutral]){--_track-c: .12}.dark a-tabs:has(>a-tab[tone]:state(selected):not([tone=""],[tone=neutral])){--_track-c: .12}.dark a-tabs[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]),.dark a-tab[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--tab-selected-text: oklch(from var(--tabs-tone-source) .83 .1 h);--tab-text-2: oklch(from var(--tabs-tone-source) .76 .11 h);--tab-rest-tone: oklch(from var(--tabs-tone-source) .76 .11 h / .8);--tabs-track-border: oklch(from var(--tabs-tone-source) .26 .055 h);--tab-selected-border: oklch(from var(--tabs-tone-source) .4 .11 h)}@media(forced-colors:active){a-tabs:not([priority=secondary],[priority=tertiary]){background-color:Canvas;border:1px solid CanvasText;box-shadow:none}a-tabs[priority=tertiary] a-tab{--tab-underline-size: 0px;--tab-underline-color: transparent}a-tabs[priority=tertiary] a-tab:state(selected){--tab-underline-size: 2px;--tab-underline-color: CanvasText}a-tabs:not([priority=secondary],[priority=tertiary]) a-tab:state(selected){--anta-forced-foreground: ButtonFace;forced-color-adjust:none;color:ButtonFace;background-color:ButtonText;border:1px solid ButtonText;box-shadow:none}a-tabs[priority=secondary] a-tab:state(selected){background-color:Canvas;border:1px solid CanvasText;box-shadow:none}@supports (anchor-scope: all){a-tabs:not([noslide],[priority=tertiary]) a-tab:state(selected){background-color:transparent;border:0}a-tabs:not([noslide])[priority=tertiary] a-tab:state(selected){--tab-underline-size: 0px;--tab-underline-color: transparent}a-tabs:not([noslide],[priority=secondary],[priority=tertiary]):before{forced-color-adjust:none;background-color:ButtonText;border:1px solid ButtonText;box-shadow:none}a-tabs:not([noslide])[priority=secondary]:before{forced-color-adjust:none;background-color:Canvas;border:1px solid CanvasText;box-shadow:none}a-tabs:not([noslide])[priority=tertiary]:before{forced-color-adjust:none;border-bottom-width:2px;border-bottom-color:CanvasText}a-tabs[orientation=vertical]:not([noslide])[priority=tertiary]:before{border-inline-end-width:2px;border-inline-end-color:CanvasText}}}}
+@layer anta.components{a-tabs{--_fs: 15px;--_lh: 20px;--_pb: 1px;--tab-padding-x: 9px;--tab-height: 28px;--tab-radius: 4px;--tabs-gap: 3px;--tab-timing: .15s ease-out;--tabs-tone-source: var(--anta-seed-neutral);--tab-fg-rest: var(--text-3);--tab-selected-text: var(--text-1);--tab-text-2: var(--text-2);--_track-l: .55;--_track-c: .008;--_track-a: .06;--_sec-a: .03;--tabs-track-bg: oklch(from var(--tabs-tone-source) var(--_track-l) var(--_track-c) h / var(--_track-a));--tabs-track-border: var(--border-4);--tabs-track-shadow: inset 0 0 0px .5px var(--tabs-track-border);--tab-selected-bg: var(--bg-1);--tab-selected-border: var(--border-2);--tab-selected-shadow: inset 0 0 0px .5px var(--tab-selected-border);--tab-secondary-bg: oklch(from var(--tabs-tone-source) var(--_track-l) var(--_track-c) h / var(--_sec-a));display:flex;flex-direction:row;align-items:stretch;gap:var(--tabs-gap);padding:0;width:fit-content;align-self:flex-start;min-width:0;max-width:100%;overflow:hidden;scroll-behavior:smooth}a-tabs[size=small]{--_fs: 13px;--_lh: 16px;--_pb: .5px;--tab-padding-x: 7px;--tab-height: 24px}a-tabs[size=large]{--_fs: 17px;--_lh: 24px;--_pb: 1.5px;--tab-padding-x: 13px;--tab-height: 32px}a-tabs a-tab :is(a-icon,a-loader){--icon-size: 16px}a-tabs[size=small] a-tab :is(a-icon,a-loader){--icon-size: 14px}a-tabs[size=large] a-tab :is(a-icon,a-loader){--icon-size: 18px}a-tabs[tone=brand],a-tab[tone=brand]{--tabs-tone-source: var(--anta-seed-brand);--tab-selected-text: var(--text-1-brand);--tab-text-2: var(--text-2-brand);--tab-rest-tone: var(--text-3-brand);--tabs-track-border: var(--border-4-brand);--tab-selected-border: var(--border-2-brand)}a-tabs[tone=info],a-tab[tone=info]{--tabs-tone-source: var(--anta-seed-info);--tab-selected-text: var(--text-1-info);--tab-text-2: var(--text-2-info);--tab-rest-tone: var(--text-3-info);--tabs-track-border: var(--border-4-info);--tab-selected-border: var(--border-2-info)}a-tabs[tone=success],a-tab[tone=success]{--tabs-tone-source: var(--anta-seed-success);--tab-selected-text: var(--text-1-success);--tab-text-2: var(--text-2-success);--tab-rest-tone: var(--text-3-success);--tabs-track-border: var(--border-4-success);--tab-selected-border: var(--border-2-success)}a-tabs[tone=warning],a-tab[tone=warning]{--tabs-tone-source: var(--anta-seed-warning);--tab-selected-text: var(--text-1-warning);--tab-text-2: var(--text-2-warning);--tab-rest-tone: var(--text-3-warning);--tabs-track-border: var(--border-4-warning);--tab-selected-border: var(--border-2-warning)}a-tabs[tone=critical],a-tab[tone=critical]{--tabs-tone-source: var(--anta-seed-critical);--tab-selected-text: var(--text-1-critical);--tab-text-2: var(--text-2-critical);--tab-rest-tone: var(--text-3-critical);--tabs-track-border: var(--border-4-critical);--tab-selected-border: var(--border-2-critical)}a-tab[tone=neutral]{--tabs-tone-source: var(--anta-seed-neutral);--tab-selected-text: var(--text-1);--tab-text-2: var(--text-2);--tab-rest-tone: var(--text-3);--tabs-track-border: var(--border-4);--tab-selected-border: var(--border-2);--_track-c: .008}a-tabs[tone]:not([tone=""],[tone=neutral]),a-tab[tone]:not([tone=""],[tone=neutral]){--_track-c: .14}a-tabs:has(>a-tab[tone=brand]:state(selected)){--tabs-tone-source: var(--anta-seed-brand);--tab-selected-text: var(--text-1-brand);--tab-selected-border: var(--border-2-brand)}a-tabs:has(>a-tab[tone=info]:state(selected)){--tabs-tone-source: var(--anta-seed-info);--tab-selected-text: var(--text-1-info);--tab-selected-border: var(--border-2-info)}a-tabs:has(>a-tab[tone=success]:state(selected)){--tabs-tone-source: var(--anta-seed-success);--tab-selected-text: var(--text-1-success);--tab-selected-border: var(--border-2-success)}a-tabs:has(>a-tab[tone=warning]:state(selected)){--tabs-tone-source: var(--anta-seed-warning);--tab-selected-text: var(--text-1-warning);--tab-selected-border: var(--border-2-warning)}a-tabs:has(>a-tab[tone=critical]:state(selected)){--tabs-tone-source: var(--anta-seed-critical);--tab-selected-text: var(--text-1-critical);--tab-selected-border: var(--border-2-critical)}a-tabs:has(>a-tab[tone]:state(selected):not([tone=""],[tone=neutral])){--_track-c: .14}a-tabs[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]),a-tab[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--tabs-tone-source: #635b65;--tab-selected-text: oklch(from var(--tabs-tone-source) .38 .13 h);--tab-text-2: oklch(from var(--tabs-tone-source) .45 .13 h);--tab-rest-tone: oklch(from var(--tabs-tone-source) .45 .13 h / .8);--tabs-track-border: oklch(from var(--tabs-tone-source) .9 .045 h);--tab-selected-border: oklch(from var(--tabs-tone-source) .8 .09 h);@supports (color: attr(probe type(<color>),red)){--tabs-tone-source: attr(tone type(<color>), #635b65)}}a-tabs a-tab{--tab-fg: var(--tab-fg-rest);--tab-bg: transparent}a-tabs:not([orientation=vertical]) a-tab{flex:1 1 0;max-width:max-content}a-tabs[fill]{width:100%;align-self:stretch}a-tabs[fill]:not([orientation=vertical]) a-tab{flex:1 1 0;max-width:none}@media(hover:hover)and (pointer:fine){a-tabs a-tab:hover{--tab-fg: var(--tab-selected-text)}}a-tabs:not([priority=secondary],[priority=tertiary]){background:var(--tabs-track-bg);box-shadow:var(--tabs-track-shadow);border-radius:4px}a-tabs[round]{--tab-radius: 999px;--tabs-round: 999px;@supports (border-radius: attr(probe type(<length>),1px)){--tabs-round: attr(round type(<length>), 999px)}}a-tabs[round]:not([priority=secondary],[priority=tertiary]){border-radius:var(--tabs-round, 999px)}a-tabs:not([priority=secondary],[priority=tertiary]) a-tab:state(selected){--tab-fg: var(--tab-selected-text);--tab-bg: var(--tab-selected-bg);box-shadow:var(--tab-selected-shadow)}a-tabs[tone]:not([tone=""],[tone=neutral]),a-tab[tone]:not([tone=""],[tone=neutral]){--tab-fg-rest: var(--tab-rest-tone)}@media(hover:hover)and (pointer:fine){a-tabs[priority=secondary] a-tab:hover{--tab-fg: var(--tab-selected-text)}}a-tabs[priority=secondary] a-tab:state(selected){--tab-fg: var(--tab-selected-text);--tab-bg: var(--tab-secondary-bg);box-shadow:var(--tab-selected-shadow)}a-tabs[priority=tertiary] a-tab{--tab-underline-size: 1px;--tab-underline-color: transparent;position:relative;border-radius:0}a-tabs[priority=tertiary] a-tab:after{content:"";position:absolute;inset:0;box-sizing:border-box;pointer-events:none;border-bottom:var(--tab-underline-size) solid var(--tab-underline-color);transition:border-width var(--tab-timing),border-color var(--tab-timing)}a-tabs[orientation=vertical][priority=tertiary] a-tab:after{border-bottom:0;border-inline-end:var(--tab-underline-size) solid var(--tab-underline-color)}@media(hover:hover)and (pointer:fine){a-tabs[priority=tertiary] a-tab:hover{--tab-fg: var(--tab-text-2)}}a-tabs[priority=tertiary] a-tab:state(selected){--tab-fg: var(--tab-selected-text);--tab-underline-size: 1px;--tab-underline-color: var(--tab-selected-text)}a-tabs[orientation=vertical]{flex-direction:column;align-items:stretch;max-width:none;overflow-x:hidden;overflow-y:auto;flex-shrink:0}a-tabs[orientation=vertical] a-tab{justify-content:flex-start;flex-shrink:0}@supports (anchor-scope: all){a-tabs:not([noslide]){position:relative;anchor-scope:all}a-tabs:not([noslide]) a-tab{position:relative;z-index:1}a-tabs:not([noslide]) a-tab:state(selected){anchor-name:--tabs-active}a-tabs:not([noslide]):before{content:"";position:absolute;z-index:0;box-sizing:border-box;position-anchor:--tabs-active;top:anchor(top);right:anchor(right);bottom:anchor(bottom);left:anchor(left);transition:top var(--tab-timing),right var(--tab-timing),bottom var(--tab-timing),left var(--tab-timing)}a-tabs:state(resizing):not([noslide]):before{transition:none}a-tabs:not([noslide]):not(:has(a-tab:state(selected))):before{display:none}@media(prefers-reduced-motion:reduce){a-tabs:not([noslide]):before{transition:none}}a-tabs:not([noslide]) a-tab:state(selected){--tab-bg: transparent;box-shadow:none}a-tabs:not([noslide],[priority=secondary],[priority=tertiary]):before{background:var(--tab-selected-bg);border-radius:var(--tab-radius);box-shadow:var(--tab-selected-shadow)}a-tabs:not([noslide])[priority=secondary]:before{background:var(--tab-secondary-bg);border-radius:var(--tab-radius);box-shadow:var(--tab-selected-shadow)}a-tabs:not([noslide])[priority=tertiary] a-tab:state(selected){--tab-underline-size: 1px;--tab-underline-color: transparent}a-tabs:not([noslide])[priority=tertiary]:before{z-index:2;border-bottom:1px solid var(--tab-selected-text)}a-tabs[orientation=vertical]:not([noslide])[priority=tertiary]:before{border-bottom:0;border-inline-end:1px solid var(--tab-selected-text)}}.dark a-tabs{--_track-l: .8;--_track-a: .07;--_sec-a: .08}.dark a-tabs[tone]:not([tone=""],[tone=neutral]),.dark a-tab[tone]:not([tone=""],[tone=neutral]){--_track-c: .12}.dark a-tabs:has(>a-tab[tone]:state(selected):not([tone=""],[tone=neutral])){--_track-c: .12}.dark a-tabs[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]),.dark a-tab[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--tab-selected-text: oklch(from var(--tabs-tone-source) .83 .1 h);--tab-text-2: oklch(from var(--tabs-tone-source) .76 .11 h);--tab-rest-tone: oklch(from var(--tabs-tone-source) .76 .11 h / .8);--tabs-track-border: oklch(from var(--tabs-tone-source) .26 .055 h);--tab-selected-border: oklch(from var(--tabs-tone-source) .4 .11 h)}@media(forced-colors:active){a-tabs:not([priority=secondary],[priority=tertiary]){background-color:Canvas;border:1px solid CanvasText;box-shadow:none}a-tabs[priority=tertiary] a-tab{--tab-underline-size: 0px;--tab-underline-color: transparent}a-tabs[priority=tertiary] a-tab:state(selected){--tab-underline-size: 2px;--tab-underline-color: CanvasText}a-tabs:not([priority=secondary],[priority=tertiary]) a-tab:state(selected){--anta-forced-foreground: ButtonFace;forced-color-adjust:none;color:ButtonFace;background-color:ButtonText;border:1px solid ButtonText;box-shadow:none}a-tabs[priority=secondary] a-tab:state(selected){background-color:Canvas;border:1px solid CanvasText;box-shadow:none}@supports (anchor-scope: all){a-tabs:not([noslide],[priority=tertiary]) a-tab:state(selected){background-color:transparent;border:0}a-tabs:not([noslide])[priority=tertiary] a-tab:state(selected){--tab-underline-size: 0px;--tab-underline-color: transparent}a-tabs:not([noslide],[priority=secondary],[priority=tertiary]):before{forced-color-adjust:none;background-color:ButtonText;border:1px solid ButtonText;box-shadow:none}a-tabs:not([noslide])[priority=secondary]:before{forced-color-adjust:none;background-color:Canvas;border:1px solid CanvasText;box-shadow:none}a-tabs:not([noslide])[priority=tertiary]:before{forced-color-adjust:none;border-bottom-width:2px;border-bottom-color:CanvasText}a-tabs[orientation=vertical]:not([noslide])[priority=tertiary]:before{border-inline-end-width:2px;border-inline-end-color:CanvasText}}}}

package/dist/elements/a-tabs.js

@@ -64,8 +64,8 @@ class ATabsElement extends HTMLElementBase {
     if (name === "state" && this.alive && newValue !== oldValue) this.emitChange();
   }
   formDisabledCallback(disabled) {
-    if (disabled) this.internals?.states.add("disabled");
-    else this.internals?.states.delete("disabled");
+    if (disabled) this.internals?.states?.add("disabled");
+    else this.internals?.states?.delete("disabled");
     this.sync();
   }
   // Controlled when `state` is present; otherwise the in-memory uncontrolled value.
@@ -73,7 +73,7 @@ class ATabsElement extends HTMLElementBase {
     return this.hasAttribute("state") ? this.getAttribute("state") : this.uncontrolledValue;
   }
   get #isDisabled() {
-    return this.hasAttribute("disabled") || (this.internals?.states.has("disabled") ?? false);
+    return this.hasAttribute("disabled") || (this.internals?.states?.has("disabled") ?? false);
   }
   get #isVertical() {
     return this.getAttribute("orientation") === "vertical";
@@ -94,7 +94,7 @@ class ATabsElement extends HTMLElementBase {
   // The anchored indicator's far edge changes when its strip resizes. Pause its
   // edge transition through a resize burst so it cannot stretch between layouts.
   #pauseIndicatorTransition = () => {
-    this.internals?.states.add("resizing");
+    this.internals?.states?.add("resizing");
     if (this.resizeTimer != null) this.view.clearTimeout(this.resizeTimer);
     if (this.resizeFrame != null) this.view.cancelAnimationFrame(this.resizeFrame);
     this.resizeFrame = void 0;
@@ -102,7 +102,7 @@ class ATabsElement extends HTMLElementBase {
       this.resizeTimer = void 0;
       this.resizeFrame = this.view.requestAnimationFrame(() => {
         this.resizeFrame = void 0;
-        this.internals?.states.delete("resizing");
+        this.internals?.states?.delete("resizing");
       });
     }, 120);
   };
@@ -111,7 +111,7 @@ class ATabsElement extends HTMLElementBase {
     if (this.resizeFrame != null) this.view.cancelAnimationFrame(this.resizeFrame);
     this.resizeTimer = void 0;
     this.resizeFrame = void 0;
-    this.internals?.states.delete("resizing");
+    this.internals?.states?.delete("resizing");
   }
   sync = () => {
     if (!this.childrenReady) return;

package/dist/elements/a-tag.css

@@ -1 +1 @@
-@layer anta.components{a-tag{--tag-tone-source: var(--anta-seed-neutral);--_tag-tint-l: .55;--_tag-tint-c: .03;--_tag-solid-l: .55;--_tag-solid-c: .015;--tag-tint: oklch(from var(--tag-tone-source) var(--_tag-tint-l) var(--_tag-tint-c) h);--tag-bg-solid: oklch(from var(--tag-tone-source) var(--_tag-solid-l) var(--_tag-solid-c) h);--tag-text: var(--text-3);--tag-edge: var(--text-2);--_tag-bg-alpha: 10%;--_tag-border-alpha: 15%;--_tag-edge-alpha: 20%;--tag-bg: color-mix(in oklch, var(--tag-tint) var(--_tag-bg-alpha), transparent);--tag-border: color-mix(in oklch, var(--tag-tint) var(--_tag-border-alpha), transparent);--tag-separator: color-mix(in oklch, var(--tag-text) 30%, transparent);--tag-padding-block: 1.5px;--tag-padding-inline: 6.5px;--tag-icon-size: 13px;--tag-label-weight: 600;--tag-gap: .6ch;display:inline-flex;align-items:center;gap:var(--tag-gap);box-sizing:border-box;max-width:100%;vertical-align:middle;overflow:hidden;white-space:nowrap;-webkit-user-drag:none;color:var(--tag-text);background:var(--tag-bg);border:.5px solid var(--tag-border);border-radius:22px;padding-block:var(--tag-padding-block);padding-inline:var(--tag-padding-inline);font-family:var(--sans-serif);font-weight:450;font-size:12px;line-height:16px;text-transform:none;letter-spacing:.02ch;font-feature-settings:"tnum" 1,"ss05" 1,"lnum","ss01","ss04","case","calt"}a-tag a-icon{--icon-size: var(--tag-icon-size);flex:none}a-tag a-tag-label,a-tag a-tag-value{display:inline-block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}a-tag a-tag-value{font-weight:450}a-tag a-tag-label{font-weight:var(--tag-label-weight)}a-tag:has(>a-icon:first-child){padding-inline-start:max(0px,var(--tag-padding-inline) - 2px)}a-tag:has(>a-icon:last-child){padding-inline-end:max(0px,var(--tag-padding-inline) - 2px)}a-tag>:not(a-icon,a-tag-label,a-tag-value)~:not(a-icon,a-tag-label,a-tag-value){padding-left:var(--tag-gap);border-left:.5px solid var(--tag-separator)}a-tag[tone]:not([tone=""],[tone=neutral]){--_tag-tint-l: .57;--_tag-tint-c: .16;--_tag-solid-l: .58;--_tag-solid-c: .175}a-tag[tone=brand]{--tag-tone-source: var(--anta-seed-brand);--tag-text: var(--text-3-brand);--tag-edge: var(--text-2-brand)}a-tag[tone=info]{--tag-tone-source: var(--anta-seed-info);--tag-text: var(--text-3-info);--tag-edge: var(--text-2-info)}a-tag[tone=success]{--tag-tone-source: var(--anta-seed-success);--tag-text: var(--text-3-success);--tag-edge: var(--text-2-success)}a-tag[tone=warning]{--tag-tone-source: var(--anta-seed-warning);--tag-text: var(--text-3-warning);--tag-edge: var(--text-2-warning)}a-tag[tone=critical]{--tag-tone-source: var(--anta-seed-critical);--tag-text: var(--text-3-critical);--tag-edge: var(--text-2-critical)}.dark a-tag:not([tone]),.dark a-tag[tone=neutral]{--_tag-tint-l: .63;--_tag-tint-c: .04;--_tag-solid-l: .48;--_tag-bg-alpha: 20%;--_tag-border-alpha: 25%;--_tag-edge-alpha: 30%}.dark a-tag[tone]:not([tone=""],[tone=neutral]){--_tag-tint-l: .63;--_tag-tint-c: .17;--_tag-solid-l: .46;--_tag-solid-c: .165;--_tag-bg-alpha: 20%;--_tag-border-alpha: 25%;--_tag-edge-alpha: 30%}a-tag[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--tag-tone-source: attr(tone type(<color>), currentColor);--tag-text: color-mix(in oklch, oklch(from var(--tag-tone-source) .43 .15 h) 80%, transparent);--tag-edge: oklch(from var(--tag-tone-source) .43 .15 h)}.dark a-tag[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--tag-text: color-mix(in oklch, oklch(from var(--tag-tone-source) .77 .11 h) 80%, transparent);--tag-edge: oklch(from var(--tag-tone-source) .77 .11 h)}a-tag[priority=primary]{--tag-bg: var(--tag-bg-solid);--tag-text: #fff}a-tag[priority=primary][tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--tag-text: #fff}a-tag[priority=tertiary]{--tag-bg: transparent;--tag-border: color-mix(in oklch, var(--tag-edge) var(--_tag-edge-alpha), transparent)}a-tag[size=small]{--tag-padding-block: .5px;--tag-padding-inline: 4.5px;--tag-icon-size: 11px;font-size:11px;line-height:14px}a-tag[size=large]{--tag-padding-block: 2.5px;--tag-padding-inline: 8.5px;--tag-icon-size: 15px;font-size:13px;line-height:18px}a-tag[allcaps]{font-size:11px;text-transform:uppercase;letter-spacing:.08ch;font-feature-settings:"tnum" 1,"ss05" 1,"ss01","case","calt"}a-tag[size=small][allcaps]{font-size:10px}a-tag[size=large][allcaps]{font-size:12px}@media(forced-colors:active){a-tag{--anta-forced-foreground: CanvasText;color:CanvasText;background-color:Canvas;border:1px solid CanvasText}a-tag[priority=primary]{--anta-forced-foreground: ButtonFace;color:ButtonFace;background-color:ButtonText;border-color:ButtonText}a-tag[priority=primary]{forced-color-adjust:none}a-tag[priority=tertiary]{border-style:dashed}}}
+@layer anta.components{a-tag{--tag-tone-source: var(--anta-seed-neutral);--_tag-tint-l: .55;--_tag-tint-c: .03;--_tag-solid-l: .55;--_tag-solid-c: .015;--tag-tint: oklch(from var(--tag-tone-source) var(--_tag-tint-l) var(--_tag-tint-c) h);--tag-bg-solid: oklch(from var(--tag-tone-source) var(--_tag-solid-l) var(--_tag-solid-c) h);--tag-text: var(--text-3);--tag-edge: var(--text-2);--_tag-bg-alpha: 10%;--_tag-border-alpha: 15%;--_tag-edge-alpha: 20%;--tag-bg: color-mix(in oklch, var(--tag-tint) var(--_tag-bg-alpha), transparent);--tag-border: color-mix(in oklch, var(--tag-tint) var(--_tag-border-alpha), transparent);--tag-separator: color-mix(in oklch, var(--tag-text) 30%, transparent);--tag-padding-block: 1.5px;--tag-padding-inline: 6.5px;--tag-icon-size: 13px;--tag-label-weight: 600;--tag-gap: .6ch;display:inline-flex;align-items:center;gap:var(--tag-gap);box-sizing:border-box;max-width:100%;vertical-align:middle;overflow:hidden;white-space:nowrap;-webkit-user-drag:none;color:var(--tag-text);background:var(--tag-bg);border:.5px solid var(--tag-border);border-radius:22px;padding-block:var(--tag-padding-block);padding-inline:var(--tag-padding-inline);font-family:var(--sans-serif);font-weight:450;font-size:12px;line-height:16px;text-transform:none;letter-spacing:.02ch;font-feature-settings:"tnum" 1,"ss05" 1,"lnum","ss01","ss04","case","calt"}a-tag a-icon{--icon-size: var(--tag-icon-size);flex:none}a-tag a-tag-label,a-tag a-tag-value{display:inline-block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}a-tag a-tag-value{font-weight:450}a-tag a-tag-label{font-weight:var(--tag-label-weight)}a-tag:has(>a-icon:first-child){padding-inline-start:max(0px,var(--tag-padding-inline) - 2px)}a-tag:has(>a-icon:last-child){padding-inline-end:max(0px,var(--tag-padding-inline) - 2px)}a-tag>:not(a-icon,a-tag-label,a-tag-value)~:not(a-icon,a-tag-label,a-tag-value){padding-left:var(--tag-gap);border-left:.5px solid var(--tag-separator)}a-tag[tone]:not([tone=""],[tone=neutral]){--_tag-tint-l: .57;--_tag-tint-c: .16;--_tag-solid-l: .58;--_tag-solid-c: .175}a-tag[tone=brand]{--tag-tone-source: var(--anta-seed-brand);--tag-text: var(--text-3-brand);--tag-edge: var(--text-2-brand)}a-tag[tone=info]{--tag-tone-source: var(--anta-seed-info);--tag-text: var(--text-3-info);--tag-edge: var(--text-2-info)}a-tag[tone=success]{--tag-tone-source: var(--anta-seed-success);--tag-text: var(--text-3-success);--tag-edge: var(--text-2-success)}a-tag[tone=warning]{--tag-tone-source: var(--anta-seed-warning);--tag-text: var(--text-3-warning);--tag-edge: var(--text-2-warning)}a-tag[tone=critical]{--tag-tone-source: var(--anta-seed-critical);--tag-text: var(--text-3-critical);--tag-edge: var(--text-2-critical)}.dark a-tag:not([tone]),.dark a-tag[tone=neutral]{--_tag-tint-l: .63;--_tag-tint-c: .04;--_tag-solid-l: .48;--_tag-bg-alpha: 20%;--_tag-border-alpha: 25%;--_tag-edge-alpha: 30%}.dark a-tag[tone]:not([tone=""],[tone=neutral]){--_tag-tint-l: .63;--_tag-tint-c: .17;--_tag-solid-l: .46;--_tag-solid-c: .165;--_tag-bg-alpha: 20%;--_tag-border-alpha: 25%;--_tag-edge-alpha: 30%}a-tag[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--tag-tone-source: currentColor;--tag-text: color-mix(in oklch, oklch(from var(--tag-tone-source) .43 .15 h) 80%, transparent);--tag-edge: oklch(from var(--tag-tone-source) .43 .15 h);@supports (color: attr(probe type(<color>),red)){--tag-tone-source: attr(tone type(<color>), currentColor)}}.dark a-tag[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--tag-text: color-mix(in oklch, oklch(from var(--tag-tone-source) .77 .11 h) 80%, transparent);--tag-edge: oklch(from var(--tag-tone-source) .77 .11 h)}a-tag[priority=primary]{--tag-bg: var(--tag-bg-solid);--tag-text: #fff}a-tag[priority=primary][tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--tag-text: #fff}a-tag[priority=tertiary]{--tag-bg: transparent;--tag-border: color-mix(in oklch, var(--tag-edge) var(--_tag-edge-alpha), transparent)}a-tag[size=small]{--tag-padding-block: .5px;--tag-padding-inline: 4.5px;--tag-icon-size: 11px;font-size:11px;line-height:14px}a-tag[size=large]{--tag-padding-block: 2.5px;--tag-padding-inline: 8.5px;--tag-icon-size: 15px;font-size:13px;line-height:18px}a-tag[allcaps]{font-size:11px;text-transform:uppercase;letter-spacing:.08ch;font-feature-settings:"tnum" 1,"ss05" 1,"ss01","case","calt"}a-tag[size=small][allcaps]{font-size:10px}a-tag[size=large][allcaps]{font-size:12px}@media(forced-colors:active){a-tag{--anta-forced-foreground: CanvasText;color:CanvasText;background-color:Canvas;border:1px solid CanvasText}a-tag[priority=primary]{--anta-forced-foreground: ButtonFace;color:ButtonFace;background-color:ButtonText;border-color:ButtonText}a-tag[priority=primary]{forced-color-adjust:none}a-tag[priority=tertiary]{border-style:dashed}}}

package/dist/elements/a-text.css

@@ -1 +1 @@
-@layer anta.components{a-text{--text-color: var(--text-2);--text-link-color: var(--link-color);--text-link-hover: var(--link-color-hover);display:block;font-family:var(--sans-serif);color:var(--text-color);font-size:15px;line-height:20px;text-wrap:pretty;font-feature-settings:"ss02","ss05","tnum"}a-text[size=small]{font-size:13px;line-height:16px}a-text[size=medium]{font-size:15px;line-height:20px}a-text[size=large]{font-size:17px;line-height:24px}a-text[inline]{display:inline-block}a-text[truncate]{min-width:0}a-text[priority=primary]{--text-color: var(--text-1)}a-text[priority=tertiary]{--text-color: var(--text-3);--text-link-color: currentColor;--text-link-hover: var(--text-2)}a-text[priority=quaternary]{--text-color: var(--text-4);--text-link-color: currentColor;--text-link-hover: var(--text-3)}a-text[tone=brand]{--text-color: var(--text-2-brand);--text-link-color: currentColor;--text-link-hover: var(--text-1-brand)}a-text[tone=brand][priority=primary]{--text-color: var(--text-1-brand)}a-text[tone=brand][priority=tertiary]{--text-color: var(--text-3-brand);--text-link-hover: var(--text-2-brand)}a-text[tone=brand][priority=quaternary]{--text-color: var(--text-4-brand);--text-link-hover: var(--text-3-brand)}a-text[tone=success]{--text-color: var(--text-2-success);--text-link-color: currentColor;--text-link-hover: var(--text-1-success)}a-text[tone=success][priority=primary]{--text-color: var(--text-1-success)}a-text[tone=success][priority=tertiary]{--text-color: var(--text-3-success);--text-link-hover: var(--text-2-success)}a-text[tone=success][priority=quaternary]{--text-color: var(--text-4-success);--text-link-hover: var(--text-3-success)}a-text[tone=critical]{--text-color: var(--text-2-critical);--text-link-color: currentColor;--text-link-hover: var(--text-1-critical)}a-text[tone=critical][priority=primary]{--text-color: var(--text-1-critical)}a-text[tone=critical][priority=tertiary]{--text-color: var(--text-3-critical);--text-link-hover: var(--text-2-critical)}a-text[tone=critical][priority=quaternary]{--text-color: var(--text-4-critical);--text-link-hover: var(--text-3-critical)}a-text[tone=warning]{--text-color: var(--text-2-warning);--text-link-color: currentColor;--text-link-hover: var(--text-1-warning)}a-text[tone=warning][priority=primary]{--text-color: var(--text-1-warning)}a-text[tone=warning][priority=tertiary]{--text-color: var(--text-3-warning);--text-link-hover: var(--text-2-warning)}a-text[tone=warning][priority=quaternary]{--text-color: var(--text-4-warning);--text-link-hover: var(--text-3-warning)}a-text[tone=info]{--text-color: var(--text-2-info);--text-link-color: currentColor;--text-link-hover: var(--text-1-info)}a-text[tone=info][priority=primary]{--text-color: var(--text-1-info)}a-text[tone=info][priority=tertiary]{--text-color: var(--text-3-info);--text-link-hover: var(--text-2-info)}a-text[tone=info][priority=quaternary]{--text-color: var(--text-4-info);--text-link-hover: var(--text-3-info)}a-text[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--text-tone-source: attr(tone type(<color>), currentColor);--_text-tone: oklch(from var(--text-tone-source) .41 .15 h);--text-color: var(--_text-tone);--text-link-color: currentColor;--text-link-hover: oklch(from var(--text-tone-source) .33 .15 h)}a-text[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=primary]{--text-color: oklch(from var(--text-tone-source) .33 .15 h)}a-text[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=tertiary]{--text-color: color-mix(in oklch, var(--_text-tone) 80%, transparent);--text-link-hover: var(--_text-tone)}a-text[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=quaternary]{--text-color: color-mix(in oklch, var(--_text-tone) 60%, transparent)}.dark a-text[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--_text-tone: oklch(from var(--text-tone-source) .75 .11 h);--text-link-hover: oklch(from var(--text-tone-source) .82 .1 h)}.dark a-text[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=primary]{--text-color: oklch(from var(--text-tone-source) .82 .1 h)}a-text a,a-text a:link,a-text a:visited{color:var(--text-link-color)}@media(hover:hover)and (pointer:fine){a-text a:hover{color:var(--text-link-hover);text-decoration-color:var(--text-link-hover)}}}
+@layer anta.components{a-text{--text-color: var(--text-2);--text-link-color: var(--link-color);--text-link-hover: var(--link-color-hover);display:block;font-family:var(--sans-serif);color:var(--text-color);font-size:15px;line-height:20px;text-wrap:pretty;font-feature-settings:"ss02","ss05","tnum"}a-text[size=small]{font-size:13px;line-height:16px}a-text[size=medium]{font-size:15px;line-height:20px}a-text[size=large]{font-size:17px;line-height:24px}a-text[inline]{display:inline-block}a-text[truncate]{min-width:0}a-text[priority=primary]{--text-color: var(--text-1)}a-text[priority=tertiary]{--text-color: var(--text-3);--text-link-color: currentColor;--text-link-hover: var(--text-2)}a-text[priority=quaternary]{--text-color: var(--text-4);--text-link-color: currentColor;--text-link-hover: var(--text-3)}a-text[tone=brand]{--text-color: var(--text-2-brand);--text-link-color: currentColor;--text-link-hover: var(--text-1-brand)}a-text[tone=brand][priority=primary]{--text-color: var(--text-1-brand)}a-text[tone=brand][priority=tertiary]{--text-color: var(--text-3-brand);--text-link-hover: var(--text-2-brand)}a-text[tone=brand][priority=quaternary]{--text-color: var(--text-4-brand);--text-link-hover: var(--text-3-brand)}a-text[tone=success]{--text-color: var(--text-2-success);--text-link-color: currentColor;--text-link-hover: var(--text-1-success)}a-text[tone=success][priority=primary]{--text-color: var(--text-1-success)}a-text[tone=success][priority=tertiary]{--text-color: var(--text-3-success);--text-link-hover: var(--text-2-success)}a-text[tone=success][priority=quaternary]{--text-color: var(--text-4-success);--text-link-hover: var(--text-3-success)}a-text[tone=critical]{--text-color: var(--text-2-critical);--text-link-color: currentColor;--text-link-hover: var(--text-1-critical)}a-text[tone=critical][priority=primary]{--text-color: var(--text-1-critical)}a-text[tone=critical][priority=tertiary]{--text-color: var(--text-3-critical);--text-link-hover: var(--text-2-critical)}a-text[tone=critical][priority=quaternary]{--text-color: var(--text-4-critical);--text-link-hover: var(--text-3-critical)}a-text[tone=warning]{--text-color: var(--text-2-warning);--text-link-color: currentColor;--text-link-hover: var(--text-1-warning)}a-text[tone=warning][priority=primary]{--text-color: var(--text-1-warning)}a-text[tone=warning][priority=tertiary]{--text-color: var(--text-3-warning);--text-link-hover: var(--text-2-warning)}a-text[tone=warning][priority=quaternary]{--text-color: var(--text-4-warning);--text-link-hover: var(--text-3-warning)}a-text[tone=info]{--text-color: var(--text-2-info);--text-link-color: currentColor;--text-link-hover: var(--text-1-info)}a-text[tone=info][priority=primary]{--text-color: var(--text-1-info)}a-text[tone=info][priority=tertiary]{--text-color: var(--text-3-info);--text-link-hover: var(--text-2-info)}a-text[tone=info][priority=quaternary]{--text-color: var(--text-4-info);--text-link-hover: var(--text-3-info)}a-text[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--text-tone-source: currentColor;--_text-tone: oklch(from var(--text-tone-source) .41 .15 h);--text-color: var(--_text-tone);--text-link-color: currentColor;--text-link-hover: oklch(from var(--text-tone-source) .33 .15 h);@supports (color: attr(probe type(<color>),red)){--text-tone-source: attr(tone type(<color>), currentColor)}}a-text[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=primary]{--text-color: oklch(from var(--text-tone-source) .33 .15 h)}a-text[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=tertiary]{--text-color: color-mix(in oklch, var(--_text-tone) 80%, transparent);--text-link-hover: var(--_text-tone)}a-text[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=quaternary]{--text-color: color-mix(in oklch, var(--_text-tone) 60%, transparent)}.dark a-text[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--_text-tone: oklch(from var(--text-tone-source) .75 .11 h);--text-link-hover: oklch(from var(--text-tone-source) .82 .1 h)}.dark a-text[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=primary]{--text-color: oklch(from var(--text-tone-source) .82 .1 h)}a-text a,a-text a:link,a-text a:visited{color:var(--text-link-color)}@media(hover:hover)and (pointer:fine){a-text a:hover{color:var(--text-link-hover);text-decoration-color:var(--text-link-hover)}}}

package/dist/elements/a-title.css

@@ -1 +1 @@
-@layer anta.components{a-title{display:block;font-family:var(--sans-serif);color:var(--text-1);font-weight:584.62;letter-spacing:0;text-wrap:balance;font-feature-settings:"ss02","ss05","tnum"}a-title a-icon{transform:translateY(-.05em)}a-title[level="1"]{font-size:28px;line-height:32px}a-title[level="2"]{font-size:24px;line-height:28px}a-title[level="3"]{font-size:20px;line-height:24px}a-title[level="4"]{font-size:17px;line-height:20px}a-title[level="5"]{font-size:15px;line-height:20px}a-title[level="6"]{font-size:13px;line-height:16px}a-title[priority=secondary]{color:var(--text-2)}a-title[priority=tertiary]{color:var(--text-3)}a-title[priority=quaternary]{color:var(--text-4)}a-title[tone=brand]{color:var(--text-1-brand)}a-title[tone=brand][priority=secondary]{color:var(--text-2-brand)}a-title[tone=brand][priority=tertiary]{color:var(--text-3-brand)}a-title[tone=brand][priority=quaternary]{color:var(--text-4-brand)}a-title[tone=success]{color:var(--text-1-success)}a-title[tone=success][priority=secondary]{color:var(--text-2-success)}a-title[tone=success][priority=tertiary]{color:var(--text-3-success)}a-title[tone=success][priority=quaternary]{color:var(--text-4-success)}a-title[tone=critical]{color:var(--text-1-critical)}a-title[tone=critical][priority=secondary]{color:var(--text-2-critical)}a-title[tone=critical][priority=tertiary]{color:var(--text-3-critical)}a-title[tone=critical][priority=quaternary]{color:var(--text-4-critical)}a-title[tone=warning]{color:var(--text-1-warning)}a-title[tone=warning][priority=secondary]{color:var(--text-2-warning)}a-title[tone=warning][priority=tertiary]{color:var(--text-3-warning)}a-title[tone=warning][priority=quaternary]{color:var(--text-4-warning)}a-title[tone=info]{color:var(--text-1-info)}a-title[tone=info][priority=secondary]{color:var(--text-2-info)}a-title[tone=info][priority=tertiary]{color:var(--text-3-info)}a-title[tone=info][priority=quaternary]{color:var(--text-4-info)}a-title[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--title-tone-source: attr(tone type(<color>), currentColor);--_title-tone: oklch(from var(--title-tone-source) .41 .15 h);color:oklch(from var(--title-tone-source) .33 .15 h)}a-title[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=secondary]{color:var(--_title-tone)}a-title[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=tertiary]{color:color-mix(in oklch,var(--_title-tone) 80%,transparent)}a-title[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=quaternary]{color:color-mix(in oklch,var(--_title-tone) 60%,transparent)}.dark a-title[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--_title-tone: oklch(from var(--title-tone-source) .75 .11 h);color:oklch(from var(--title-tone-source) .82 .1 h)}}
+@layer anta.components{a-title{display:block;font-family:var(--sans-serif);color:var(--text-1);font-weight:584.62;letter-spacing:0;text-wrap:balance;font-feature-settings:"ss02","ss05","tnum"}a-title a-icon{transform:translateY(-.05em)}a-title[level="1"]{font-size:28px;line-height:32px}a-title[level="2"]{font-size:24px;line-height:28px}a-title[level="3"]{font-size:20px;line-height:24px}a-title[level="4"]{font-size:17px;line-height:20px}a-title[level="5"]{font-size:15px;line-height:20px}a-title[level="6"]{font-size:13px;line-height:16px}a-title[priority=secondary]{color:var(--text-2)}a-title[priority=tertiary]{color:var(--text-3)}a-title[priority=quaternary]{color:var(--text-4)}a-title[tone=brand]{color:var(--text-1-brand)}a-title[tone=brand][priority=secondary]{color:var(--text-2-brand)}a-title[tone=brand][priority=tertiary]{color:var(--text-3-brand)}a-title[tone=brand][priority=quaternary]{color:var(--text-4-brand)}a-title[tone=success]{color:var(--text-1-success)}a-title[tone=success][priority=secondary]{color:var(--text-2-success)}a-title[tone=success][priority=tertiary]{color:var(--text-3-success)}a-title[tone=success][priority=quaternary]{color:var(--text-4-success)}a-title[tone=critical]{color:var(--text-1-critical)}a-title[tone=critical][priority=secondary]{color:var(--text-2-critical)}a-title[tone=critical][priority=tertiary]{color:var(--text-3-critical)}a-title[tone=critical][priority=quaternary]{color:var(--text-4-critical)}a-title[tone=warning]{color:var(--text-1-warning)}a-title[tone=warning][priority=secondary]{color:var(--text-2-warning)}a-title[tone=warning][priority=tertiary]{color:var(--text-3-warning)}a-title[tone=warning][priority=quaternary]{color:var(--text-4-warning)}a-title[tone=info]{color:var(--text-1-info)}a-title[tone=info][priority=secondary]{color:var(--text-2-info)}a-title[tone=info][priority=tertiary]{color:var(--text-3-info)}a-title[tone=info][priority=quaternary]{color:var(--text-4-info)}a-title[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--title-tone-source: currentColor;--_title-tone: oklch(from var(--title-tone-source) .41 .15 h);color:oklch(from var(--title-tone-source) .33 .15 h);@supports (color: attr(probe type(<color>),red)){--title-tone-source: attr(tone type(<color>), currentColor)}}a-title[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=secondary]{color:var(--_title-tone)}a-title[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=tertiary]{color:color-mix(in oklch,var(--_title-tone) 80%,transparent)}a-title[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=quaternary]{color:color-mix(in oklch,var(--_title-tone) 60%,transparent)}.dark a-title[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--_title-tone: oklch(from var(--title-tone-source) .75 .11 h);color:oklch(from var(--title-tone-source) .82 .1 h)}}

package/dist/elements/a-toast.js

@@ -84,7 +84,7 @@ class AToastElement extends HTMLElementBase {
       this.#exitTimer = void 0;
     }
     this.#leaving = false;
-    this.#internals?.states.delete("leaving");
+    this.#internals?.states?.delete("leaving");
     this.#startTimer();
   }
   /** A live DOM node to show as the content (set by the wrapper's DOM-node
@@ -239,7 +239,7 @@ class AToastElement extends HTMLElementBase {
     this.#leaving = true;
     this.#clearTimer();
     this.#pauseCountdown();
-    this.#internals?.states.add("leaving");
+    this.#internals?.states?.add("leaving");
     const wait = this.#exitDuration();
     this.#exitTimer = this.view.setTimeout(() => {
       this.#exitTimer = void 0;

package/dist/elements/a-tooltip.css

@@ -1 +1 @@
-@layer anta.components{a-tooltip:not(:defined){display:none}@media(hover:none)and (pointer:coarse){:where(:has(>a-tooltip)){-webkit-touch-callout:none;user-select:none}}a-tooltip{--tooltip-bg: color-mix(in oklch, var(--bg-1) 80%, transparent);--tooltip-shadow: 0 1px 8px color-mix(in oklch, var(--text-1) 15%, transparent), 0 0 1px color-mix(in oklch, var(--text-1) 50%, transparent);--tooltip-radius: 3px;--tooltip-max-width: min( calc(100vw - 20px) , 80ch);--tooltip-border: none;--tooltip-backdrop-filter: blur(8px)}a-tooltip[round]{--tooltip-radius: attr(round type(<length>), 20px)}.dark a-tooltip{--tooltip-bg: color-mix(in oklch, var(--bg-1) 70%, transparent);--tooltip-shadow: 0 2px 16px color-mix(in oklch, black 70%, transparent), inset 0 0 0 1px color-mix(in oklch, white 15%, transparent)}@media(forced-colors:active){a-tooltip{--tooltip-border: 1px dotted CanvasText}}}a-tooltip>p:last-child,a-tooltip>:not([slot])>p:last-child{margin-block-end:0}
+@layer anta.components{a-tooltip:not(:defined){display:none}@media(hover:none)and (pointer:coarse){:where(:has(>a-tooltip)){-webkit-touch-callout:none;user-select:none}}a-tooltip{--tooltip-bg: color-mix(in oklch, var(--bg-1) 80%, transparent);--tooltip-shadow: 0 1px 8px color-mix(in oklch, var(--text-1) 15%, transparent), 0 0 1px color-mix(in oklch, var(--text-1) 50%, transparent);--tooltip-radius: 3px;--tooltip-max-width: min( calc(100vw - 20px) , 80ch);--tooltip-border: none;--tooltip-backdrop-filter: blur(8px)}a-tooltip[round]{--tooltip-radius: 20px;@supports (border-radius: attr(probe type(<length>),1px)){--tooltip-radius: attr(round type(<length>), 20px)}}.dark a-tooltip{--tooltip-bg: color-mix(in oklch, var(--bg-1) 70%, transparent);--tooltip-shadow: 0 2px 16px color-mix(in oklch, black 70%, transparent), inset 0 0 0 1px color-mix(in oklch, white 15%, transparent)}@media(forced-colors:active){a-tooltip{--tooltip-border: 1px dotted CanvasText}}}a-tooltip>p:last-child,a-tooltip>:not([slot])>p:last-child{margin-block-end:0}

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

@@ -72,9 +72,10 @@ export declare class ATooltipElement extends HTMLElementBase {
     private anchorText;
     private syncAutomaticTextContent;
     /** The elements whose overflow decides whether the tooltip shows: every
-     *  `truncated-selector` match within the anchor wins; else every one of
-     *  Anta's ellipsizing label parts inside the anchor; else the anchor itself
-     *  (which may be the clipping box for a hand-authored target). */
+     *  `truncated-selector` match within the anchor wins; else the anchor itself
+     *  when it reports its own truncation; else every one of Anta's ellipsizing
+     *  label parts inside the anchor; else the anchor itself (which may be the
+     *  clipping box for a hand-authored target). */
     private resolveTruncationTargets;
     /** True when any resolved target overflows its box (horizontal ellipsis or
      *  vertical clamp). A 1px threshold absorbs sub-pixel rounding; a zero-size

package/dist/elements/a-tooltip.js

@@ -13,6 +13,9 @@ const PROX_FAR = 100;
 const PROX_FADE_MS = 60;
 const ENTER_TOUCH_DELAY = 500;
 const TRUNCATING_PARTS = "a-tab-label, a-button-label, a-step-hint";
+function reportsTruncation(el) {
+  return typeof el.isTruncated === "boolean";
+}
 const AUTOMATIC_TEXT_TOOLTIP = "data-anta-text-tooltip";
 const LEAVE_TOUCH_DELAY = 1500;
 const TOUCH_SLOP = 10;
@@ -290,9 +293,10 @@ class ATooltipElement extends HTMLElementBase {
     if (this.#isAutomaticTextTooltip) this.bubble.textContent = this.anchorText();
   }
   /** The elements whose overflow decides whether the tooltip shows: every
-   *  `truncated-selector` match within the anchor wins; else every one of
-   *  Anta's ellipsizing label parts inside the anchor; else the anchor itself
-   *  (which may be the clipping box for a hand-authored target). */
+   *  `truncated-selector` match within the anchor wins; else the anchor itself
+   *  when it reports its own truncation; else every one of Anta's ellipsizing
+   *  label parts inside the anchor; else the anchor itself (which may be the
+   *  clipping box for a hand-authored target). */
   resolveTruncationTargets() {
     const anchor = this.anchor;
     if (!anchor) return [];
@@ -304,6 +308,7 @@ class ATooltipElement extends HTMLElementBase {
       } catch {
       }
     }
+    if (reportsTruncation(anchor)) return [anchor];
     const parts = Array.from(
       anchor.querySelectorAll(TRUNCATING_PARTS)
     );
@@ -315,8 +320,7 @@ class ATooltipElement extends HTMLElementBase {
    *  show attempt, so late fonts / resizes self-correct with no observer. */
   isTargetTruncated() {
     return this.resolveTruncationTargets().some((target) => {
-      const reported = target.isTruncated;
-      if (typeof reported === "boolean") return reported;
+      if (reportsTruncation(target)) return target.isTruncated;
       if (target.clientWidth === 0 && target.clientHeight === 0) return false;
       return target.scrollWidth - target.clientWidth > 1 || target.scrollHeight - target.clientHeight > 1;
     });

package/dist/elements/index.d.ts

@@ -17,6 +17,7 @@ export { AAvatarElement, register_a_avatar } from './a-avatar';
 export { AProgressElement, register_a_progress } from './a-progress';
 export { ALoaderElement, register_a_loader } from './a-loader';
 export { ATextElement, register_a_text } from './a-text';
+export { ABoxElement, register_a_box } from './a-box';
 export { AIconElement, register_a_icon } from './a-icon';
 export { AButtonElement, register_a_button } from './a-button';
 export { ACopyElement, register_a_copy } from './a-copy';

package/dist/elements/index.js

@@ -2,6 +2,7 @@ import { AAvatarElement, register_a_avatar } from "./a-avatar";
 import { AProgressElement, register_a_progress } from "./a-progress";
 import { ALoaderElement, register_a_loader } from "./a-loader";
 import { ATextElement, register_a_text } from "./a-text";
+import { ABoxElement, register_a_box } from "./a-box";
 import { AIconElement, register_a_icon } from "./a-icon";
 import { AButtonElement, register_a_button } from "./a-button";
 import { ACopyElement, register_a_copy } from "./a-copy";
@@ -32,6 +33,7 @@ import "./a-tag.css";
 export {
   AAvatarElement,
   ABannerElement,
+  ABoxElement,
   AButtonElement,
   ACalendarElement,
   ACardElement,
@@ -61,6 +63,7 @@ export {
   ATooltipElement,
   register_a_avatar,
   register_a_banner,
+  register_a_box,
   register_a_button,
   register_a_calendar,
   register_a_card,

package/dist/general_types.d.ts

@@ -1,4 +1,5 @@
 import type { IconShape } from './elements/a-icon.shapes';
+import type { BoxContextChange, BoxDisplay, BoxMeasurementChange } from './box-types';
 /** Common props for JSX component wrappers. */
 export interface BaseProps {
     /** CSS class on the component's root element (merged with the component's own
@@ -267,6 +268,41 @@ export interface ATextAttributes extends BaseAttributes {
     /** ARIA disclosure state, mirrors the JSX wrapper's `expanded` flag. */
     'aria-expanded'?: boolean | 'true' | 'false';
 }
+/** Attributes for the light-DOM `<a-box>` observing container. For the JSX
+ * wrapper with cross-renderer event unwrapping, use `Box` from
+ * `@antadesign/anta`. */
+export interface ABoxAttributes extends BaseAttributes {
+    /** Host display mode. Omit for the default block box. */
+    display?: BoxDisplay;
+    /** Fully-round corners (`border-radius: 999px`), or a custom radius via a
+     *  length value (`round="12px"`). Presence-based for the boolean form. */
+    round?: boolean | number | string;
+    /** Gap between children, as a length value (`gap="8px"`). Engines without
+     *  typed `attr()` read it from `--box-gap` in the host's inline style
+     *  instead, which is what the JSX wrapper always sets. */
+    gap?: boolean | '' | number | string;
+    /** Masks every edge that currently hides clipped content. */
+    fade?: boolean | '';
+    /** What the box watches. `size` reports geometry and overflow through
+     *  `measurechange` and the CSS states; `context` reports the rendering
+     *  environment through `contextchange`; `all`, or a bare `observe`, does both.
+     *  A box without it (and without `fade`) runs no observers, so a listener
+     *  alone reports nothing. The JSX wrapper sets it from `observe` and from the
+     *  handlers you pass. */
+    observe?: 'size' | 'context' | 'all' | '';
+    /** Depth of that mask, as a length value (`fade-size="2rem"`). Engines
+     *  without typed `attr()` read it from `--box-fade-size` in the host's
+     *  inline style instead, which is what the JSX wrapper always sets. */
+    'fade-size'?: number | string;
+    /** Native event fired when geometry or overflow changes. */
+    onmeasurechange?: (event: CustomEvent<BoxMeasurementChange> | {
+        nativeEvent: CustomEvent<BoxMeasurementChange>;
+    }) => void;
+    /** Native event fired when rendering context or focus-within changes. */
+    oncontextchange?: (event: CustomEvent<BoxContextChange> | {
+        nativeEvent: CustomEvent<BoxContextChange>;
+    }) => void;
+}
 /**
  * Attributes for the `<a-title>` styled tag.
  *

package/dist/index.d.ts

@@ -26,6 +26,9 @@ export { Loader } from './components/Loader';
 export type { LoaderProps } from './components/Loader';
 export { Text } from './components/Text';
 export type { TextProps, ExpandMode } from './components/Text';
+export { Box } from './components/Box';
+export type { BoxProps } from './components/Box';
+export type { BoxChange, BoxContext, BoxContextChange, BoxDisplay, BoxFont, BoxInset, BoxMeasurement, BoxMeasurementChange, BoxMode, BoxOS, BoxBrowser, BoxPointer, } from './box-types';
 export { Title } from './components/Title';
 export type { TitleProps } from './components/Title';
 export { Tag } from './components/Tag';

package/dist/index.js

@@ -15,6 +15,7 @@ import {
 import { Progress } from "./components/Progress";
 import { Loader } from "./components/Loader";
 import { Text } from "./components/Text";
+import { Box } from "./components/Box";
 import { Title } from "./components/Title";
 import { Tag } from "./components/Tag";
 import { Icon } from "./components/Icon";
@@ -67,6 +68,7 @@ import { configure } from "./jsx-runtime";
 export {
   Avatar,
   Banner,
+  Box,
   Breadcrumbs,
   Button,
   ButtonCopy,

package/dist/jsx-runtime.d.ts

@@ -44,7 +44,7 @@ export declare function useSyncExternalStore<T>(subscribe: (onChange: () => void
 export declare function jsx(type: ComponentType, props: Record<string, unknown> | null, key?: string | number): unknown;
 export declare function jsxs(type: ComponentType, props: Record<string, unknown> | null, key?: string | number): unknown;
 export { _Fragment as Fragment };
-import type { AAvatarAttributes, AProgressAttributes, ALoaderAttributes, ATextAttributes, ATitleAttributes, ATagAttributes, AExpanderAttributes, AIconAttributes, AButtonAttributes, ACopyAttributes, ACheckboxAttributes, ASwitchAttributes, ATooltipAttributes, AInputAttributes, ASliderAttributes, AInputTimeAttributes, ACalendarAttributes, ARadioAttributes, ARadioGroupAttributes, AMenuAttributes, AMenuItemAttributes, AMenuGroupAttributes, ATabsAttributes, ATabAttributes, ATabpanelAttributes, ADialogAttributes, ACardAttributes, ABannerAttributes, AToasterAttributes, AToastAttributes, BaseAttributes } from './general_types';
+import type { AAvatarAttributes, AProgressAttributes, ALoaderAttributes, ATextAttributes, ABoxAttributes, ATitleAttributes, ATagAttributes, AExpanderAttributes, AIconAttributes, AButtonAttributes, ACopyAttributes, ACheckboxAttributes, ASwitchAttributes, ATooltipAttributes, AInputAttributes, ASliderAttributes, AInputTimeAttributes, ACalendarAttributes, ARadioAttributes, ARadioGroupAttributes, AMenuAttributes, AMenuItemAttributes, AMenuGroupAttributes, ATabsAttributes, ATabAttributes, ATabpanelAttributes, ADialogAttributes, ACardAttributes, ABannerAttributes, AToasterAttributes, AToastAttributes, BaseAttributes } from './general_types';
 export declare namespace JSX {
     interface IntrinsicElements extends React.JSX.IntrinsicElements, AntaIntrinsicElements {
     }
@@ -60,6 +60,7 @@ export interface AntaIntrinsicElements {
     'a-progress-text': BaseAttributes;
     'a-progress-hint': BaseAttributes;
     'a-text': ATextAttributes;
+    'a-box': ABoxAttributes;
     'a-title': ATitleAttributes;
     'a-tag': ATagAttributes;
     'a-tag-label': BaseAttributes;

package/docs/changelog.md

@@ -3,6 +3,26 @@
 This page tracks changes that ship in `@antadesign/anta`. Documentation-only
 changes are not listed.
 
+## 0.3.26 — September 4, 2026
+
+### Added
+
+- Added `Box` / `<a-box>`, a light-DOM container with layout props, overflow
+  states, optional edge fades, and measurement and context events. Set
+  `observe` to update states or receive events; the JSX wrapper derives it from
+  handlers, while a hand-written `<a-box>` sets it directly.
+
+### Fixed
+
+- `Box` applies its fade mask only to edges that hide content, preserving an
+  outset box shadow and focus ring when all content is visible.
+- `Tooltip` with `truncatedOnly` detects clipping on its own `Box` anchor when
+  child labels do not truncate.
+- Raw custom-element length and color attributes work in Firefox and Safari,
+  which do not support typed `attr()`.
+- Custom states work in Safari 16.4-17.3 and Firefox 93-125, where
+  `ElementInternals` lacks `CustomStateSet`.
+
 ## 0.3.25 — September 2, 2026
 
 ### Added
@@ -14,9 +34,9 @@ changes are not listed.
 
 - `Banner` content starts at the inline edge by default; pass `align="center"` to
   center it.
-- `reset.css` now applies Anta page and prose defaults; `body` backgrounds paint the
-  browser canvas. For page-wide dark mode, put `class="dark"` on `<html>`; use
-  `class="light"` in a dark subtree.
+- `reset.css` now applies Anta page and prose defaults; `body` backgrounds paint
+  the browser canvas. For page-wide dark mode, put `class="dark"` on `<html>`;
+  use `class="light"` in a dark subtree.
 
 ### Fixed