@antadesign/anta 0.3.28 → 0.3.29

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: 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-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-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 base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@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-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-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-slider.d.ts

@@ -10,6 +10,7 @@ export declare class ASliderElement extends HTMLElementBase {
     #private;
     static formAssociated: boolean;
     static observedAttributes: string[];
+    private internals?;
     get value(): number;
     set value(value: number | string);
     get defaultValue(): number;

package/dist/elements/a-slider.js

@@ -18,7 +18,7 @@ class ASliderElement extends HTMLElementBase {
     "value-prefix",
     "value-suffix"
   ];
-  #internals;
+  internals;
   #control;
   #railArea;
   #fill;
@@ -54,7 +54,7 @@ class ASliderElement extends HTMLElementBase {
   }
   constructor() {
     super();
-    this.#internals = this.attachInternals?.();
+    this.internals = this.attachInternals?.();
     const shadow = this.attachShadow({ mode: "open" });
     const style = document.createElement("style");
     style.textContent = `
@@ -366,7 +366,7 @@ class ASliderElement extends HTMLElementBase {
       element.prepend(prefixElement);
       element.append(suffixElement);
     }
-    const internals = this.#internals;
+    const internals = this.internals;
     if (!internals) return;
     internals.ariaValueMin = String(this.#min);
     internals.ariaValueMax = String(this.#max);

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: light-dark( color-mix(in oklch, #44374b 10%, transparent), color-mix(in oklch, #e4d1ef 10%, transparent) );--switch-thumb: light-dark(var(--bg-1), #ece9ec);--switch-thumb-off: var(--switch-track-off-stroke);--switch-tone-source: var(--anta-seed-brand);--switch-off-tone-source: var(--anta-seed-brand);--switch-track-on: light-dark( oklch(from var(--switch-tone-source) .56 c h), oklch(from var(--switch-tone-source) .47 c h) );--switch-track-on-hover: light-dark( oklch(from var(--switch-tone-source) .48 c h), oklch(from var(--switch-tone-source) .53 c h) );--switch-track-on-active: light-dark( oklch(from var(--switch-tone-source) .42 c h), oklch(from var(--switch-tone-source) .58 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);&: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:not([tone],[tone-scope=selected]),a-switch[tone]:not([tone=""],[tone=neutral],[tone-scope=selected]){--_switch-off-track: light-dark( oklch(from var(--switch-off-tone-source) .56 c h), oklch(from var(--switch-off-tone-source) .47 c h) );--_switch-off-chrome: color-mix(in oklch, var(--_switch-off-track) 70%, var(--switch-track-off-stroke-neutral));--switch-track-off-stroke: light-dark( oklch(from var(--_switch-off-chrome) calc(l + .17) c h), 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: light-dark( var(--_switch-off-chrome), oklch(from var(--_switch-off-chrome) calc(l + .17) c h) );--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)}}@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 base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@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: light-dark( color-mix(in oklch, #44374b 10%, transparent), color-mix(in oklch, #e4d1ef 10%, transparent) );--switch-thumb: light-dark(var(--bg-1), #ece9ec);--switch-thumb-off: var(--switch-track-off-stroke);--switch-tone-source: var(--anta-seed-neutral);--switch-off-tone-source: var(--anta-seed-neutral);--switch-track-on: light-dark( oklch(from var(--switch-tone-source) .56 c h), oklch(from var(--switch-tone-source) .47 c h) );--switch-track-on-hover: light-dark( oklch(from var(--switch-tone-source) .48 c h), oklch(from var(--switch-tone-source) .53 c h) );--switch-track-on-active: light-dark( oklch(from var(--switch-tone-source) .42 c h), oklch(from var(--switch-tone-source) .58 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);&: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],[tone-scope=selected]){--_switch-off-track: light-dark( oklch(from var(--switch-off-tone-source) .56 c h), oklch(from var(--switch-off-tone-source) .47 c h) );--_switch-off-chrome: color-mix(in oklch, var(--_switch-off-track) 70%, var(--switch-track-off-stroke-neutral));--switch-track-off-stroke: light-dark( oklch(from var(--_switch-off-chrome) calc(l + .17) c h), 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: light-dark( var(--_switch-off-chrome), oklch(from var(--_switch-off-chrome) calc(l + .17) c h) );--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)}}@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.d.ts

@@ -15,15 +15,18 @@ export declare class ASwitchElement extends HTMLElementBase {
     private seeded;
     private dirty;
     private alive;
+    private accessibilityObserver?;
     /** Current checked value. Write through the `state` attribute instead. */
     get checked(): boolean;
     constructor();
     connectedCallback(): void;
+    disconnectedCallback(): void;
     attributeChangedCallback(name: string): void;
     private seed;
     private emitChange;
     private toggle;
     private paint;
+    private syncAccessibilityRelations;
     formResetCallback(): void;
     formStateRestoreCallback(state: string): void;
     formDisabledCallback(): void;

package/dist/elements/a-switch.js

@@ -1,4 +1,4 @@
-import { HTMLElementBase } from "../anta_helpers";
+import { applyAccessibilityRelations, HTMLElementBase } from "../anta_helpers";
 import "./a-switch.css";
 const parseState = (value) => value === "checked" ? "checked" : "unchecked";
 class ASwitchElement extends HTMLElementBase {
@@ -9,6 +9,7 @@ class ASwitchElement extends HTMLElementBase {
   seeded = false;
   dirty = false;
   alive = false;
+  accessibilityObserver;
   /** Current checked value. Write through the `state` attribute instead. */
   get checked() {
     return this.currentState === "checked";
@@ -30,8 +31,16 @@ class ASwitchElement extends HTMLElementBase {
       this.seeded = true;
     }
     this.paint();
+    this.syncAccessibilityRelations();
+    this.accessibilityObserver ??= new this.view.MutationObserver(
+      () => this.syncAccessibilityRelations()
+    );
+    this.accessibilityObserver.observe(this, { childList: true });
     this.alive = true;
   }
+  disconnectedCallback() {
+    this.accessibilityObserver?.disconnect();
+  }
   attributeChangedCallback(name) {
     if (name === "state") {
       const next = parseState(this.getAttribute("state"));
@@ -86,6 +95,13 @@ class ASwitchElement extends HTMLElementBase {
       this.currentState
     );
   }
+  syncAccessibilityRelations() {
+    applyAccessibilityRelations(
+      this.internals,
+      Array.from(this.querySelectorAll(":scope > a-switch-label")),
+      Array.from(this.querySelectorAll(":scope > a-switch-hint"))
+    );
+  }
   formResetCallback() {
     this.seed();
     this.paint();

package/dist/elements/a-tab.css

@@ -1 +1 @@
-@layer anta.components{a-tab{user-select:none;display:inline-flex;align-items:center;justify-content:center;gap:.5ch;flex-shrink:1;min-width:0;cursor:pointer;color:var(--tab-fg, var(--text-3));background-color:var(--tab-bg, transparent);border:none;border-radius:var(--tab-radius);&[round]{--tab-radius: 999px}box-shadow:inset 0 0 0 0 transparent;font-size:var(--_fs);font-family:var(--sans-serif);font-weight:450;font-stretch:normal;line-height:var(--_lh);letter-spacing:.05ch;white-space:nowrap;text-wrap:nowrap;min-height:var(--tab-height);padding-block:calc((8px - var(--_pb)) / 2);padding-inline:var(--tab-padding-x);transition:background-color var(--tab-timing),box-shadow var(--tab-timing);>a-tab-label{display:inline-block;min-width:0;overflow:hidden;text-overflow:ellipsis;text-wrap:nowrap;white-space:nowrap;line-height:calc(var(--_lh) - 2px);padding-bottom:var(--_pb);&:has(>*){display:inline-flex;gap:.25ch}}>*{pointer-events:none}&:has(>a-icon:first-child):has(>a-tab-label){padding-inline-start:max(0px,var(--tab-padding-x) - 2px)}&:has(>a-icon:last-child):has(>a-tab-label){padding-inline-end:max(0px,var(--tab-padding-x) - 2px)}}a-tab:focus-visible{outline:1px solid var(--focus-ring);outline-offset:-1px}a-tab[disabled]{pointer-events:none;cursor:not-allowed;opacity:.45}}
+@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-tab{user-select:none;display:inline-flex;align-items:center;justify-content:center;gap:.5ch;flex-shrink:1;min-width:0;cursor:pointer;color:var(--tab-fg, var(--text-3));background-color:var(--tab-bg, transparent);border:none;border-radius:var(--tab-radius);&[round]{--tab-radius: 999px}box-shadow:inset 0 0 0 0 transparent;font-size:var(--_fs);font-family:var(--sans-serif);font-weight:450;font-stretch:normal;line-height:var(--_lh);letter-spacing:.025ch;white-space:nowrap;text-wrap:nowrap;min-height:var(--tab-height);padding-block:calc((8px - var(--_pb)) / 2);padding-inline:var(--tab-padding-x);transition:background-color var(--tab-timing),box-shadow var(--tab-timing);>a-tab-label{display:inline-block;min-width:0;overflow:hidden;text-overflow:ellipsis;text-wrap:nowrap;white-space:nowrap;line-height:calc(var(--_lh) - 2px);padding-bottom:var(--_pb);&:has(>*){display:inline-flex;gap:.25ch}}>*{pointer-events:none}&:has(>a-icon:first-child):has(>a-tab-label){padding-inline-start:max(0px,var(--tab-padding-x) - 2px)}&:has(>a-icon:last-child):has(>a-tab-label){padding-inline-end:max(0px,var(--tab-padding-x) - 2px)}}a-tab:focus-visible{outline:1px solid var(--focus-ring);outline-offset:-1px}a-tab[disabled]{pointer-events:none;cursor:not-allowed;opacity:.45}}

package/dist/elements/a-tabpanel.css

@@ -1 +1 @@
-@layer anta.components{a-tabpanel{display:block}a-tabpanel:not(:state(active)):not([hide-mode=visibility]){display:none}a-tabpanel[hide-mode=visibility]:not(:state(active)){visibility:hidden}}
+@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-tabpanel{display:block}a-tabpanel:not(:state(active)):not([hide-mode=visibility]){display:none}a-tabpanel[hide-mode=visibility]:not(:state(active)){visibility:hidden}}

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);--tabs-track-bg: light-dark( oklch(from var(--tabs-tone-source) .55 .008 h / .06), oklch(from var(--tabs-tone-source) .8 .008 h / .07) );--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: light-dark( oklch(from var(--tabs-tone-source) .55 .008 h / .03), oklch(from var(--tabs-tone-source) .8 .008 h / .08) );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)}a-tabs[tone]:not([tone=""],[tone=neutral]),a-tab[tone]:not([tone=""],[tone=neutral]){--tabs-track-bg: light-dark( oklch(from var(--tabs-tone-source) .55 .14 h / .06), oklch(from var(--tabs-tone-source) .8 .12 h / .07) );--tab-secondary-bg: light-dark( oklch(from var(--tabs-tone-source) .55 .14 h / .03), oklch(from var(--tabs-tone-source) .8 .12 h / .08) )}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])){--tabs-track-bg: light-dark( oklch(from var(--tabs-tone-source) .55 .14 h / .06), oklch(from var(--tabs-tone-source) .8 .12 h / .07) );--tab-secondary-bg: light-dark( oklch(from var(--tabs-tone-source) .55 .14 h / .03), oklch(from var(--tabs-tone-source) .8 .12 h / .08) )}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: light-dark(oklch(from var(--tabs-tone-source) .38 .13 h), oklch(from var(--tabs-tone-source) .83 .1 h));--tab-text-2: light-dark(oklch(from var(--tabs-tone-source) .45 .13 h), oklch(from var(--tabs-tone-source) .76 .11 h));--tab-rest-tone: light-dark(oklch(from var(--tabs-tone-source) .45 .13 h / .8), oklch(from var(--tabs-tone-source) .76 .11 h / .8));--tabs-track-border: light-dark(oklch(from var(--tabs-tone-source) .9 .045 h), oklch(from var(--tabs-tone-source) .26 .055 h));--tab-selected-border: light-dark(oklch(from var(--tabs-tone-source) .8 .09 h), oklch(from var(--tabs-tone-source) .4 .11 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)}}@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 base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@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);--tabs-track-bg: light-dark( oklch(from var(--tabs-tone-source) .55 .008 h / .06), oklch(from var(--tabs-tone-source) .8 .008 h / .07) );--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: light-dark( oklch(from var(--tabs-tone-source) .55 .008 h / .03), oklch(from var(--tabs-tone-source) .8 .008 h / .08) );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)}a-tabs[tone]:not([tone=""],[tone=neutral]),a-tab[tone]:not([tone=""],[tone=neutral]){--tabs-track-bg: light-dark( oklch(from var(--tabs-tone-source) .55 .14 h / .06), oklch(from var(--tabs-tone-source) .8 .12 h / .07) );--tab-secondary-bg: light-dark( oklch(from var(--tabs-tone-source) .55 .14 h / .03), oklch(from var(--tabs-tone-source) .8 .12 h / .08) )}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])){--tabs-track-bg: light-dark( oklch(from var(--tabs-tone-source) .55 .14 h / .06), oklch(from var(--tabs-tone-source) .8 .12 h / .07) );--tab-secondary-bg: light-dark( oklch(from var(--tabs-tone-source) .55 .14 h / .03), oklch(from var(--tabs-tone-source) .8 .12 h / .08) )}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: light-dark(oklch(from var(--tabs-tone-source) .38 .13 h), oklch(from var(--tabs-tone-source) .83 .1 h));--tab-text-2: light-dark(oklch(from var(--tabs-tone-source) .45 .13 h), oklch(from var(--tabs-tone-source) .76 .11 h));--tab-rest-tone: light-dark(oklch(from var(--tabs-tone-source) .45 .13 h / .8), oklch(from var(--tabs-tone-source) .76 .11 h / .8));--tabs-track-border: light-dark(oklch(from var(--tabs-tone-source) .9 .045 h), oklch(from var(--tabs-tone-source) .26 .055 h));--tab-selected-border: light-dark(oklch(from var(--tabs-tone-source) .8 .09 h), oklch(from var(--tabs-tone-source) .4 .11 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)}}@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-tag.css

@@ -1 +1 @@
-@layer anta.components{a-tag{--tag-tone-source: var(--anta-seed-neutral);--tag-tint: light-dark(oklch(from var(--tag-tone-source) .55 .03 h), oklch(from var(--tag-tone-source) .63 .04 h));--tag-bg-solid: light-dark(oklch(from var(--tag-tone-source) .55 .015 h), oklch(from var(--tag-tone-source) .48 .015 h));--tag-text: var(--text-3);--tag-edge: var(--text-2);--tag-bg: light-dark(color-mix(in oklch, var(--tag-tint) 10%, transparent), color-mix(in oklch, var(--tag-tint) 20%, transparent));--tag-border: light-dark(color-mix(in oklch, var(--tag-tint) 15%, transparent), color-mix(in oklch, var(--tag-tint) 25%, 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:.1ch;font-variant-numeric:lining-nums tabular-nums}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: light-dark(oklch(from var(--tag-tone-source) .57 .16 h), oklch(from var(--tag-tone-source) .63 .17 h));--tag-bg-solid: light-dark(oklch(from var(--tag-tone-source) .58 .175 h), oklch(from var(--tag-tone-source) .46 .165 h))}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)}a-tag[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--tag-tone-source: currentColor;--tag-text: light-dark( color-mix(in oklch, oklch(from var(--tag-tone-source) .43 .15 h) 80%, transparent), color-mix(in oklch, oklch(from var(--tag-tone-source) .77 .11 h) 80%, transparent) );--tag-edge: light-dark(oklch(from var(--tag-tone-source) .43 .15 h), oklch(from var(--tag-tone-source) .77 .11 h));@supports (color: attr(probe type(<color>),red)){--tag-tone-source: attr(tone type(<color>), currentColor)}}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: light-dark( color-mix(in oklch, var(--tag-edge) 20%, transparent), color-mix(in oklch, var(--tag-edge) 30%, 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}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 base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-tag{--tag-tone-source: var(--anta-seed-neutral);--tag-tint: light-dark(oklch(from var(--tag-tone-source) .55 .03 h), oklch(from var(--tag-tone-source) .63 .04 h));--tag-bg-solid: light-dark(oklch(from var(--tag-tone-source) .55 .015 h), oklch(from var(--tag-tone-source) .48 .015 h));--tag-text: var(--text-3);--tag-edge: var(--text-2);--tag-bg: light-dark(color-mix(in oklch, var(--tag-tint) 10%, transparent), color-mix(in oklch, var(--tag-tint) 20%, transparent));--tag-border: light-dark(color-mix(in oklch, var(--tag-tint) 15%, transparent), color-mix(in oklch, var(--tag-tint) 25%, 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;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:.1ch;font-variant-numeric:lining-nums tabular-nums}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: light-dark(oklch(from var(--tag-tone-source) .57 .16 h), oklch(from var(--tag-tone-source) .63 .17 h));--tag-bg-solid: light-dark(oklch(from var(--tag-tone-source) .58 .175 h), oklch(from var(--tag-tone-source) .46 .165 h))}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)}a-tag[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--tag-tone-source: currentColor;--tag-text: light-dark( color-mix(in oklch, oklch(from var(--tag-tone-source) .43 .15 h) 80%, transparent), color-mix(in oklch, oklch(from var(--tag-tone-source) .77 .11 h) 80%, transparent) );--tag-edge: light-dark(oklch(from var(--tag-tone-source) .43 .15 h), oklch(from var(--tag-tone-source) .77 .11 h));@supports (color: attr(probe type(<color>),red)){--tag-tone-source: attr(tone type(<color>), currentColor)}}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: light-dark( color-mix(in oklch, var(--tag-edge) 20%, transparent), color-mix(in oklch, var(--tag-edge) 30%, 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}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}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: light-dark(oklch(from var(--text-tone-source) .41 .15 h), oklch(from var(--text-tone-source) .75 .11 h));--text-color: var(--_text-tone);--text-link-color: currentColor;--text-link-hover: light-dark(oklch(from var(--text-tone-source) .33 .15 h), oklch(from var(--text-tone-source) .82 .1 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: light-dark(oklch(from var(--text-tone-source) .33 .15 h), oklch(from var(--text-tone-source) .82 .1 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)}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 base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@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}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: light-dark(oklch(from var(--text-tone-source) .41 .15 h), oklch(from var(--text-tone-source) .75 .11 h));--text-color: var(--_text-tone);--text-link-color: currentColor;--text-link-hover: light-dark(oklch(from var(--text-tone-source) .33 .15 h), oklch(from var(--text-tone-source) .82 .1 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: light-dark(oklch(from var(--text-tone-source) .33 .15 h), oklch(from var(--text-tone-source) .82 .1 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)}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}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: light-dark(oklch(from var(--title-tone-source) .41 .15 h), oklch(from var(--title-tone-source) .75 .11 h));color:light-dark(oklch(from var(--title-tone-source) .33 .15 h),oklch(from var(--title-tone-source) .82 .1 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)}}
+@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@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}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: light-dark(oklch(from var(--title-tone-source) .41 .15 h), oklch(from var(--title-tone-source) .75 .11 h));color:light-dark(oklch(from var(--title-tone-source) .33 .15 h),oklch(from var(--title-tone-source) .82 .1 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)}}

package/dist/elements/a-toast.css

@@ -1 +1 @@
-@property --toast-remaining{syntax: "<number>"; inherits: true; initial-value: 1;}@layer anta.components{a-toast{--toast-dur: .22s}a-toast:not(:defined){display:none}}
+@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@property --toast-remaining{syntax: "<number>"; inherits: true; initial-value: 1;}@layer anta.components{a-toast{--toast-dur: .22s}a-toast:not(:defined){display:none}}

package/dist/elements/a-toaster.css

@@ -1 +1 @@
-@layer anta.components{a-toaster{--toaster-inset: 16px;--toaster-gap: 12px;--toaster-width: 380px}a-toaster:not(:defined){display:none}}
+@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-toaster{--toaster-inset: 16px;--toaster-gap: 12px;--toaster-width: 380px}a-toaster:not(:defined){display:none}}

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: light-dark( color-mix(in oklch, var(--bg-1) 80%, transparent), color-mix(in oklch, var(--bg-1) 70%, 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-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 base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@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: light-dark( color-mix(in oklch, var(--bg-1) 80%, transparent), color-mix(in oklch, var(--bg-1) 70%, 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-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.js

@@ -21,17 +21,21 @@ const LEAVE_TOUCH_DELAY = 1500;
 const TOUCH_SLOP = 10;
 let currentOpen = null;
 let graceTimer;
+let graceFollows = false;
 function graceActive() {
   return graceTimer !== void 0;
 }
-function isHot() {
-  return currentOpen !== null || graceActive();
+function isHot(next) {
+  if (!next.hasAttribute("follow")) return false;
+  if (currentOpen) return currentOpen.hasAttribute("follow");
+  return graceActive() && graceFollows;
 }
 function clearGrace() {
   if (graceTimer !== void 0) {
     clearTimeout(graceTimer);
     graceTimer = void 0;
   }
+  graceFollows = false;
 }
 function claimOpen(el) {
   if (currentOpen && currentOpen !== el) {
@@ -45,8 +49,10 @@ function releaseOpen(el) {
   if (currentOpen !== el) return;
   currentOpen = null;
   clearGrace();
+  graceFollows = el.hasAttribute("follow");
   graceTimer = setTimeout(() => {
     graceTimer = void 0;
+    graceFollows = false;
   }, GRACE_MS);
 }
 const anchorToTooltips = /* @__PURE__ */ new WeakMap();
@@ -170,7 +176,7 @@ class ATooltipElement extends HTMLElementBase {
         font-style: normal;
         font-stretch: normal;
         line-height: 1.5;
-        letter-spacing: 0.02ch;
+        letter-spacing: var(--_tooltip-letter-spacing, 0.025ch);
         word-spacing: normal;
         text-transform: none;
         white-space: break-spaces;
@@ -251,6 +257,9 @@ class ATooltipElement extends HTMLElementBase {
   get #prefersTop() {
     return this.getAttribute("placement") === "top";
   }
+  get #prefersLeft() {
+    return this.getAttribute("placement") === "left";
+  }
   get #delay() {
     const attr = this.getAttribute("delay");
     if (attr == null) return DEFAULT_DELAY;
@@ -386,9 +395,10 @@ class ATooltipElement extends HTMLElementBase {
   }
   /** Clamp a candidate (left, top) into the viewport and write it as the
    *  container's transform — the single place the transform is set. */
-  place(left, top, boxWidth, vw) {
+  place(left, top, boxWidth, boxHeight, vw, vh) {
     if (left + boxWidth > vw) left = vw - boxWidth - MARGIN;
     left = Math.max(MARGIN, left);
+    if (top + boxHeight > vh) top = vh - boxHeight - MARGIN;
     top = Math.max(MARGIN, top);
     this.container.style.transform = `translate(${Math.round(left)}px, ${Math.round(top)}px)`;
   }
@@ -398,8 +408,15 @@ class ATooltipElement extends HTMLElementBase {
       const a = anchorRect(this.anchor);
       const box = this.container.getBoundingClientRect();
       const { innerWidth: vw, innerHeight: vh } = this.view;
+      if (this.#prefersLeft) {
+        const preferredLeft = a.left - box.width - MARGIN;
+        const left = preferredLeft >= MARGIN ? preferredLeft : a.right + MARGIN;
+        const top2 = a.top + (a.height - box.height) / 2;
+        this.place(left, top2, box.width, box.height, vw, vh);
+        return;
+      }
       const top = this.flipVertical(a.top - box.height - MARGIN, a.bottom + MARGIN, box.height, vh, this.#prefersTop || this.touchOpen);
-      this.place(a.left, top, box.width, vw);
+      this.place(a.left, top, box.width, box.height, vw, vh);
     });
   };
   positionToMouse = (e) => {
@@ -407,8 +424,14 @@ class ATooltipElement extends HTMLElementBase {
       if (!this.shown && !this.fading) return;
       const box = this.container.getBoundingClientRect();
       const { innerWidth: vw, innerHeight: vh } = this.view;
+      if (this.#prefersLeft) {
+        const preferredLeft = e.clientX - box.width - MARGIN;
+        const left = preferredLeft >= MARGIN ? preferredLeft : e.clientX + CURSOR_SIZE;
+        this.place(left, e.clientY - box.height / 2, box.width, box.height, vw, vh);
+        return;
+      }
       const top = this.flipVertical(e.clientY - box.height - MARGIN * 2, e.clientY + CURSOR_SIZE, box.height, vh, this.#prefersTop);
-      this.place(e.clientX - PADDING_X, top, box.width, vw);
+      this.place(e.clientX - PADDING_X, top, box.width, box.height, vw, vh);
     });
   };
   position(e) {
@@ -553,7 +576,7 @@ class ATooltipElement extends HTMLElementBase {
     if (this.hasExplicitTextTooltip()) return;
     if (this.isEmpty()) return;
     if (this.#truncatedOnly && !this.isTargetTruncated()) return;
-    if (isHot()) {
+    if (isHot(this)) {
       this.debouncedShow?.cancel();
       this.show(e);
     } else {

package/dist/elements/focus.d.ts

@@ -0,0 +1,9 @@
+export type FocusTarget = HTMLElement | SVGElement;
+export declare function activeFocus(doc: Document): Element | null;
+/** Follow rendered ancestry through slots and shadow roots. */
+export declare function focusParent(node: Node): Node | null;
+export declare function containsFocus(scope: Element, node: Node | null): boolean;
+export declare function canFocus(node: Element | null): node is FocusTarget;
+export declare function tabStops(scope: Element): FocusTarget[];
+/** Cycle through rendered Tab stops, optionally focusing an empty scope. */
+export declare function cycleFocus(nodes: FocusTarget[], current: Element | null, backward: boolean, fallback?: FocusTarget): boolean;

package/dist/elements/focus.js

@@ -0,0 +1,41 @@
+import { isFocusable, tabbable } from "tabbable";
+const options = { getShadowRoot: true };
+function activeFocus(doc) {
+  let active = doc.activeElement;
+  while (active?.shadowRoot?.activeElement) active = active.shadowRoot.activeElement;
+  return active;
+}
+function focusParent(node) {
+  if (node.nodeType === 1 && node.assignedSlot) return node.assignedSlot;
+  const parent = node.parentNode;
+  return parent?.nodeType === 11 && "host" in parent ? parent.host : parent;
+}
+function containsFocus(scope, node) {
+  while (node) {
+    if (node === scope) return true;
+    node = focusParent(node);
+  }
+  return false;
+}
+function canFocus(node) {
+  return !!node && "focus" in node && isFocusable(node, options);
+}
+function tabStops(scope) {
+  return tabbable(scope, options);
+}
+function cycleFocus(nodes, current, backward, fallback) {
+  const index = nodes.indexOf(current);
+  const next = index < 0 ? backward ? nodes.length - 1 : 0 : (index + (backward ? -1 : 1) + nodes.length) % nodes.length;
+  const target = nodes[next] ?? fallback;
+  if (!target) return false;
+  target.focus();
+  return true;
+}
+export {
+  activeFocus,
+  canFocus,
+  containsFocus,
+  cycleFocus,
+  focusParent,
+  tabStops
+};

package/dist/elements/index.d.ts

@@ -19,6 +19,7 @@ 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 { ACaptureElement, register_a_capture } from './a-capture';
+export { APanelElement, register_a_panel } from './a-panel';
 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

@@ -4,6 +4,7 @@ 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 { ACaptureElement, register_a_capture } from "./a-capture";
+import { APanelElement, register_a_panel } from "./a-panel";
 import { AIconElement, register_a_icon } from "./a-icon";
 import { AButtonElement, register_a_button } from "./a-button";
 import { ACopyElement, register_a_copy } from "./a-copy";
@@ -51,6 +52,7 @@ export {
   AMenuGroupElement,
   AMenuItemElement,
   AMenuSeparatorElement,
+  APanelElement,
   AProgressElement,
   ARadioElement,
   ARadioGroupElement,
@@ -82,6 +84,7 @@ export {
   register_a_menu_group,
   register_a_menu_item,
   register_a_menu_separator,
+  register_a_panel,
   register_a_progress,
   register_a_radio,
   register_a_radio_group,

package/dist/elements/panel-focus.d.ts

@@ -0,0 +1,10 @@
+export { activeFocus } from './focus';
+/** One active Panel scope per document; later scopes suspend earlier ones. */
+export declare class PanelFocusScope {
+    #private;
+    constructor(surface: HTMLSlotElement);
+    activate(previous: Element | null): void;
+    focusInside(preferred?: Element | null): void;
+    /** Remove listeners before hiding the popover, then restore focus after layout. */
+    deactivate(): () => void;
+}