@antadesign/anta 0.3.22 → 0.3.24

package/dist/elements/a-slider.css

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

package/dist/elements/a-tabs.css

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

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

@@ -71,12 +71,12 @@ export declare class ATooltipElement extends HTMLElementBase {
      *  fallback string. */
     private anchorText;
     private syncAutomaticTextContent;
-    /** The element whose overflow decides whether the tooltip shows: a
-     *  `truncated-selector` resolved within the anchor wins; else the first of
+    /** The elements whose overflow decides whether the tooltip shows: every
+     *  `truncated-selector` match within the anchor wins; else every one of
      *  Anta's ellipsizing label parts inside the anchor; else the anchor itself
      *  (which may be the clipping box for a hand-authored target). */
-    private resolveTruncationTarget;
-    /** True when the resolved target overflows its box (horizontal ellipsis or
+    private resolveTruncationTargets;
+    /** True when any resolved target overflows its box (horizontal ellipsis or
      *  vertical clamp). A 1px threshold absorbs sub-pixel rounding; a zero-size
      *  (hidden / detached) target counts as not truncated. Measured fresh on each
      *  show attempt, so late fonts / resizes self-correct with no observer. */

package/dist/elements/a-tooltip.js

@@ -12,7 +12,7 @@ const PROX_NEAR = 10;
 const PROX_FAR = 100;
 const PROX_FADE_MS = 60;
 const ENTER_TOUCH_DELAY = 500;
-const TRUNCATING_PARTS = "a-tab-label, a-button-label";
+const TRUNCATING_PARTS = "a-tab-label, a-button-label, a-step-hint";
 const AUTOMATIC_TEXT_TOOLTIP = "data-anta-text-tooltip";
 const LEAVE_TOUCH_DELAY = 1500;
 const TOUCH_SLOP = 10;
@@ -289,34 +289,37 @@ class ATooltipElement extends HTMLElementBase {
   syncAutomaticTextContent() {
     if (this.#isAutomaticTextTooltip) this.bubble.textContent = this.anchorText();
   }
-  /** The element whose overflow decides whether the tooltip shows: a
-   *  `truncated-selector` resolved within the anchor wins; else the first of
+  /** The elements whose overflow decides whether the tooltip shows: every
+   *  `truncated-selector` match within the anchor wins; else every one of
    *  Anta's ellipsizing label parts inside the anchor; else the anchor itself
    *  (which may be the clipping box for a hand-authored target). */
-  resolveTruncationTarget() {
+  resolveTruncationTargets() {
     const anchor = this.anchor;
-    if (!anchor) return null;
+    if (!anchor) return [];
     const sel = this.getAttribute("truncated-selector");
     if (sel) {
       try {
-        const found = anchor.querySelector(sel);
-        if (found) return found;
+        const found = Array.from(anchor.querySelectorAll(sel));
+        if (found.length) return found;
       } catch {
       }
     }
-    return anchor.querySelector(TRUNCATING_PARTS) ?? anchor;
+    const parts = Array.from(
+      anchor.querySelectorAll(TRUNCATING_PARTS)
+    );
+    return parts.length ? parts : [anchor];
   }
-  /** True when the resolved target overflows its box (horizontal ellipsis or
+  /** True when any resolved target overflows its box (horizontal ellipsis or
    *  vertical clamp). A 1px threshold absorbs sub-pixel rounding; a zero-size
    *  (hidden / detached) target counts as not truncated. Measured fresh on each
    *  show attempt, so late fonts / resizes self-correct with no observer. */
   isTargetTruncated() {
-    const t = this.resolveTruncationTarget();
-    if (!t) return false;
-    const reported = t.isTruncated;
-    if (typeof reported === "boolean") return reported;
-    if (t.clientWidth === 0 && t.clientHeight === 0) return false;
-    return t.scrollWidth - t.clientWidth > 1 || t.scrollHeight - t.clientHeight > 1;
+    return this.resolveTruncationTargets().some((target) => {
+      const reported = target.isTruncated;
+      if (typeof reported === "boolean") return reported;
+      if (target.clientWidth === 0 && target.clientHeight === 0) return false;
+      return target.scrollWidth - target.clientWidth > 1 || target.scrollHeight - target.clientHeight > 1;
+    });
   }
   /** True when there's nothing worth showing: no element children (so an
    *  icon/image-only bubble still counts as content) and no non-whitespace text

package/dist/elements/index.d.ts

@@ -13,6 +13,7 @@
  * Must only be imported client-side — registration is guarded against missing
  * `customElements` (SSR), but there's no reason to load it server-side.
  */
+export { AAvatarElement, register_a_avatar } from './a-avatar';
 export { AProgressElement, register_a_progress } from './a-progress';
 export { ALoaderElement, register_a_loader } from './a-loader';
 export { ATextElement, register_a_text } from './a-text';

package/dist/elements/index.js

@@ -1,3 +1,4 @@
+import { AAvatarElement, register_a_avatar } from "./a-avatar";
 import { AProgressElement, register_a_progress } from "./a-progress";
 import { ALoaderElement, register_a_loader } from "./a-loader";
 import { ATextElement, register_a_text } from "./a-text";
@@ -29,6 +30,7 @@ import { AToastElement, register_a_toast } from "./a-toast";
 import "./a-title.css";
 import "./a-tag.css";
 export {
+  AAvatarElement,
   ABannerElement,
   AButtonElement,
   ACalendarElement,
@@ -57,6 +59,7 @@ export {
   AToastElement,
   AToasterElement,
   ATooltipElement,
+  register_a_avatar,
   register_a_banner,
   register_a_button,
   register_a_calendar,

package/dist/general_types.d.ts

@@ -181,12 +181,45 @@ export interface AProgressAttributes extends BaseAttributes {
     /** ARIA accessible name. */
     'aria-label'?: string;
 }
+/**
+ * Attributes for the `<a-avatar>` custom element.
+ *
+ * These are the low-level web component attributes. For the typed JSX wrapper,
+ * use `Avatar` from `@antadesign/anta`.
+ */
+export interface AAvatarAttributes extends BaseAttributes {
+    /** Alphanumeric seed driving the generated userpic. Falls back to `name`. */
+    seed?: string;
+    /** Name — supplies the initials fallback and accessible name, and seeds
+     *  generation when `seed` is absent. */
+    name?: string;
+    /** Image URL. Shown instead of a generated userpic when present. */
+    src?: string;
+    /** Size of the square container. `medium` is the default; set a pixel size via
+     *  the `--avatar-size` custom property. */
+    size?: 'small' | 'medium' | 'large';
+    /** Corner badge, colored by tone — a named tone or any literal CSS color
+     *  (derived in oklch). Omit for no badge. */
+    badge?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    /** Fully-round (circular) frame, or a custom radius via a length value
+     *  (`round="12px"`). Presence-based for the boolean form. */
+    round?: boolean | number | string;
+    /** Brand generation constraints as a JSON string (an `AvatarGenConfig`). With
+     *  the `Avatar` wrapper, pass the object as `generator` and it is serialized. */
+    config?: string;
+    /** ARIA role — the JSX wrapper sets this to `'img'`. */
+    role?: string;
+    /** ARIA accessible name. */
+    'aria-label'?: string;
+}
 /**
  * Attributes for the `<a-loader>` custom element. For the JSX wrapper with
  * cross-browser sizing and accessible progress semantics, use `Loader` from
  * `@antadesign/anta`.
  */
 export interface ALoaderAttributes extends BaseAttributes {
+    /** Color tone for the loader. */
+    tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical';
     /** Presence selects the static, determinate gradient. Set `--loader-value`
      * in `style` to its percentage. Omit this attribute for the rotating
      * indeterminate gradient. */
@@ -582,6 +615,8 @@ export interface AInputAttributes extends BaseAttributes {
     name?: string;
     /** Placeholder shown when empty. */
     placeholder?: string;
+    /** Focus this field when its containing `a-dialog` opens. Presence-based. */
+    autofocus?: boolean | '';
     /** Ellipsize an overflowing single-line value. Presence-based. */
     truncate?: boolean | '';
     autocomplete?: string;
@@ -663,6 +698,8 @@ export interface ASliderAttributes extends BaseAttributes {
 export interface AInputTimeAttributes extends BaseAttributes {
     /** Controlled value — 24-hour `"HH:mm"`, `''` when incomplete. */
     value?: string;
+    /** Focus this field when its containing `a-dialog` opens. Presence-based. */
+    autofocus?: boolean | '';
     /** Initial value for the uncontrolled case (24-hour `"HH:mm"`). */
     defaultvalue?: string;
     /** BCP-47 locale driving the clock (12h vs 24h), segment order, separator, and
@@ -886,6 +923,8 @@ export interface AButtonAttributes extends BaseAttributes {
     tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
     /** Underline style. Only renders on `priority="tertiary" | "quaternary"`. */
     underline?: 'solid' | 'dashed' | 'dotted';
+    /** Show the underline only on hover. Requires `underline`. Presence-based (`''` on, omit off). */
+    'underline-on-hover'?: boolean | '';
     /** Size variant. small=22px, medium=26px, large=30px. */
     size?: 'small' | 'medium' | 'large';
     /** Drop outer padding to zero. Only takes effect on `priority="quaternary"`.
@@ -1119,6 +1158,9 @@ export interface ATabsAttributes extends BaseAttributes {
     /** Layout + arrow-key axis. `'horizontal'` (default) ellipsizes labels when tabs
      *  overflow (scrolling is opt-in via CSS); `'vertical'` stacks them. */
     orientation?: 'horizontal' | 'vertical';
+    /** Make horizontal tabs share the available inline space equally. Presence-based
+     *  (`''` on, omit off). */
+    fill?: boolean | '';
     /** Disable the sliding indicator. By default the selected-tab indicator is a single
      *  rectangle that animates between tabs via CSS anchor positioning; with `noslide` the
      *  highlight is painted on each tab and snaps with no movement (also the automatic

package/dist/index.d.ts

@@ -16,6 +16,10 @@
  *
  * @packageDocumentation
  */
+export { Avatar } from './components/Avatar';
+export type { AvatarProps } from './components/Avatar';
+export { resolveAvatar, avatarToSvg, getInitials, hashSeed, mulberry32, rngFromSeed, maxChroma, oklchString, colorLightness, hasFigure, DEFAULT_CONFIG, } from './avatar-core';
+export type { AvatarGenConfig, DimMode, ScalarDim, Vec2Dim, ColorDim, ResolvedAvatar, ResolvedHead, ResolvedBody, SvgOptions, } from './avatar-core';
 export { Progress } from './components/Progress';
 export type { ProgressProps } from './components/Progress';
 export { Loader } from './components/Loader';
@@ -29,10 +33,12 @@ export type { TagProps } from './components/Tag';
 export { Icon } from './components/Icon';
 export type { IconProps } from './components/Icon';
 export { Button } from './components/Button';
-export type { ButtonProps, BaseButtonProps, ContentMode, SubmitMode, PriorityMode, } from './components/Button';
+export type { ButtonProps, BaseButtonProps, ContentMode, SubmitMode, PriorityMode, UnderlineMode, } from './components/Button';
 export { ButtonCopy } from './components/ButtonCopy';
 export type { ButtonCopyProps } from './components/ButtonCopy';
 export type { CopyTarget } from './components/copy-props';
+export { Breadcrumbs } from './components/Breadcrumbs';
+export type { BreadcrumbsProps, BreadcrumbItem, BreadcrumbLinkItem, BreadcrumbActionItem, BreadcrumbCopyItem, BreadcrumbSeparator, BreadcrumbTextSeparator, } from './components/Breadcrumbs';
 export { ICON_SHAPES, ICON_SYNONYMS } from './elements/a-icon.shapes';
 export { Tooltip } from './components/Tooltip';
 export type { TooltipProps } from './components/Tooltip';
@@ -74,6 +80,8 @@ export { SelectFaceted } from './components/SelectFaceted';
 export type { SelectFacetedProps, SelectFacet, SelectFacetSingle, SelectFacetMultiple, SelectFacetText, SelectFacetCustom, SelectFacetCustomContext, FacetFilter, SelectFacetedValue, SelectFacetedChangeAttrs, SelectFacetedTriggerState, } from './components/SelectFaceted';
 export { Tabs } from './components/Tabs';
 export type { TabsProps, TabOption, TabsChangeAttrs } from './components/Tabs';
+export { Steps } from './components/Steps';
+export type { StepsProps, StepMarker, StepMarkerState, StepOption, StepPriority, StepState, StepTone, } from './components/Steps';
 export { TabPanel } from './components/TabPanel';
 export type { TabPanelProps } from './components/TabPanel';
 export { Dialog } from './components/Dialog';

package/dist/index.js

@@ -1,3 +1,17 @@
+import { Avatar } from "./components/Avatar";
+import {
+  resolveAvatar,
+  avatarToSvg,
+  getInitials,
+  hashSeed,
+  mulberry32,
+  rngFromSeed,
+  maxChroma,
+  oklchString,
+  colorLightness,
+  hasFigure,
+  DEFAULT_CONFIG
+} from "./avatar-core";
 import { Progress } from "./components/Progress";
 import { Loader } from "./components/Loader";
 import { Text } from "./components/Text";
@@ -6,6 +20,7 @@ import { Tag } from "./components/Tag";
 import { Icon } from "./components/Icon";
 import { Button } from "./components/Button";
 import { ButtonCopy } from "./components/ButtonCopy";
+import { Breadcrumbs } from "./components/Breadcrumbs";
 import { ICON_SHAPES, ICON_SYNONYMS } from "./elements/a-icon.shapes";
 import { Tooltip } from "./components/Tooltip";
 import { Checkbox } from "./components/Checkbox";
@@ -42,6 +57,7 @@ import { RadioGroup } from "./components/RadioGroup";
 import { Select, optionsWithSelection } from "./components/Select";
 import { SelectFaceted } from "./components/SelectFaceted";
 import { Tabs } from "./components/Tabs";
+import { Steps } from "./components/Steps";
 import { TabPanel } from "./components/TabPanel";
 import { Dialog } from "./components/Dialog";
 import { Card } from "./components/Card";
@@ -49,12 +65,15 @@ import { Banner } from "./components/Banner";
 import { Toaster, createToaster } from "./components/Toaster";
 import { configure } from "./jsx-runtime";
 export {
+  Avatar,
   Banner,
+  Breadcrumbs,
   Button,
   ButtonCopy,
   Calendar,
   Card,
   Checkbox,
+  DEFAULT_CONFIG,
   Dialog,
   Expander,
   ICON_SHAPES,
@@ -75,6 +94,7 @@ export {
   Select,
   SelectFaceted,
   Slider,
+  Steps,
   Switch,
   TabPanel,
   Tabs,
@@ -83,8 +103,10 @@ export {
   Title,
   Toaster,
   Tooltip,
+  avatarToSvg,
   buildMonth,
   clampDate,
+  colorLightness,
   configure,
   createToaster,
   dateFormatPattern,
@@ -92,12 +114,20 @@ export {
   firstDayOfWeek,
   formatDateInput,
   formatDateTimeInput,
+  getInitials,
   getWeekdays,
+  hasFigure,
+  hashSeed,
   isOutOfRange,
+  maxChroma,
+  mulberry32,
+  oklchString,
   optionsWithSelection,
   parseDateInput,
   parseDateTimeInput,
   parseISODate,
   parseTimeInput,
+  resolveAvatar,
+  rngFromSeed,
   usesHour12
 };

package/dist/jsx-runtime.d.ts

@@ -44,7 +44,7 @@ export declare function useSyncExternalStore<T>(subscribe: (onChange: () => void
 export declare function jsx(type: ComponentType, props: Record<string, unknown> | null, key?: string | number): unknown;
 export declare function jsxs(type: ComponentType, props: Record<string, unknown> | null, key?: string | number): unknown;
 export { _Fragment as Fragment };
-import type { AProgressAttributes, ALoaderAttributes, ATextAttributes, ATitleAttributes, ATagAttributes, AExpanderAttributes, AIconAttributes, AButtonAttributes, ACopyAttributes, ACheckboxAttributes, ASwitchAttributes, ATooltipAttributes, AInputAttributes, ASliderAttributes, AInputTimeAttributes, ACalendarAttributes, ARadioAttributes, ARadioGroupAttributes, AMenuAttributes, AMenuItemAttributes, AMenuGroupAttributes, ATabsAttributes, ATabAttributes, ATabpanelAttributes, ADialogAttributes, ACardAttributes, ABannerAttributes, AToasterAttributes, AToastAttributes, BaseAttributes } from './general_types';
+import type { AAvatarAttributes, AProgressAttributes, ALoaderAttributes, ATextAttributes, ATitleAttributes, ATagAttributes, AExpanderAttributes, AIconAttributes, AButtonAttributes, ACopyAttributes, ACheckboxAttributes, ASwitchAttributes, ATooltipAttributes, AInputAttributes, ASliderAttributes, AInputTimeAttributes, ACalendarAttributes, ARadioAttributes, ARadioGroupAttributes, AMenuAttributes, AMenuItemAttributes, AMenuGroupAttributes, ATabsAttributes, ATabAttributes, ATabpanelAttributes, ADialogAttributes, ACardAttributes, ABannerAttributes, AToasterAttributes, AToastAttributes, BaseAttributes } from './general_types';
 export declare namespace JSX {
     interface IntrinsicElements extends React.JSX.IntrinsicElements, AntaIntrinsicElements {
     }
@@ -52,6 +52,7 @@ export declare namespace JSX {
     }
 }
 export interface AntaIntrinsicElements {
+    'a-avatar': AAvatarAttributes;
     'a-progress': AProgressAttributes;
     'a-loader': ALoaderAttributes;
     'a-progress-label': BaseAttributes;
@@ -69,6 +70,8 @@ export interface AntaIntrinsicElements {
     'a-icon': AIconAttributes;
     'a-button': AButtonAttributes;
     'a-button-label': BaseAttributes;
+    'a-breadcrumbs': BaseAttributes;
+    'a-breadcrumb-separator': BaseAttributes;
     'a-copy': ACopyAttributes;
     'a-checkbox': ACheckboxAttributes;
     'a-checkbox-label': BaseAttributes;
@@ -108,6 +111,10 @@ export interface AntaIntrinsicElements {
     'a-tab': ATabAttributes;
     'a-tab-label': BaseAttributes;
     'a-tabpanel': ATabpanelAttributes;
+    'a-steps': BaseAttributes;
+    'a-step-marker': BaseAttributes;
+    'a-step-desc': BaseAttributes;
+    'a-step-hint': BaseAttributes;
     'a-dialog': ADialogAttributes;
     'a-card': ACardAttributes;
     'a-card-icon-chip': BaseAttributes;

package/docs/changelog.md

@@ -3,6 +3,66 @@
 This page tracks changes that ship in `@antadesign/anta`. Documentation-only
 changes are not listed.
 
+## 0.3.24 — August 25, 2026
+
+### Added
+
+- Added `Breadcrumbs`, which composes links, actions, and copy controls with
+  text or icon separators and deterministic More-menu folding.
+- `MenuItemCopy` supports leading, trailing, or no copy glyph, matching
+  `ButtonCopy` placement and confirmation options.
+- Buttons accept `underlineOnHover` with a configured underline style.
+- `Input` and `InputTime` accept `autoFocus` for focusing the field when its
+  containing `Dialog` opens.
+- Added the `circle-user` icon shape.
+
+### Fixed
+
+- Focused editable Anta and `data-anta` fields use at least 16px type on touch
+  devices, preventing iOS automatic input zoom.
+
+### Removed
+
+- Removed the `text-highlight` icon shape.
+
+## 0.3.23 — August 23, 2026
+
+### Removed
+
+- Removed the `education-disk`, `help-disk`, and all `*-logo` icon shapes.
+
+### Added
+
+- `@antadesign/anta/bundle` and `bundle.css` provide one minified full-runtime
+  entry and one matching stylesheet for applications that prefer full imports.
+- `Steps` provides controlled and uncontrolled process navigation with optional
+  panels, horizontal and vertical layouts, accessible tab semantics, process
+  states, number and icon-shape markers, state-aware `renderMarker`, labels
+  and hints with clipped-content tooltips, and per-option tones.
+- `Loader` accepts a named `tone`; the loading Steps state forwards the
+  option tone to it.
+- `Tabs` and `Steps` accept `fill`. Tabs share the available width equally;
+  Steps stretch their connectors between content-sized phases.
+- `Steps` adds `primary`, `secondary`, and `tertiary` priorities. Primary uses a
+  solid selected marker and stronger completed connectors; tertiary is compact
+  and borderless.
+- `StepOption` defaults to the neutral tone. Omitting its `tone` or passing an
+  empty string produces the same result; selected rings use the stronger
+  `border-1` step.
+
+- `Avatar` renders an image, seed-generated placeholder, or initials, with
+  `generator`, `badge`, and `round` options. `avatar-core` generation helpers are
+  also exported.
+
+### Changed
+
+- `Avatar` default generation uses a larger head-to-body gap, shifts figures
+  slightly upward, and varies their position, rotation, color, scale, and shape
+  more widely.
+- `Slider` thumbs are smaller: 12px at `small`, 16px at `medium` (the default,
+  previously 18px), and 20px at `large`, unchanged. `thumbSize` still overrides
+  any of them.
+
 ## 0.3.22 — August 20, 2026
 
 ### Changed

package/docs/comparison.md

@@ -8,11 +8,16 @@ Most systems are React-only and use CSS-in-JS, Sass, StyleX, or Tailwind.
 Anta ships web components with plain CSS in one `@layer`, without a style
 runtime. Consumer CSS overrides its defaults normally.
 
+Browser years show the oldest published fixed floor. `~` marks the earliest
+year shared by a browser feature the current system ships, rather than a
+published support promise. Hover a value for the policy and the feature behind
+that estimate.
+
 Fixed-package sizes are measured from the version named on each card. Each npm
 artifact was downloaded, bundled as a full ESM import with esbuild, minified,
-and gzipped. React and React DOM are external. When a library ships base CSS,
-the total adds its separately gzipped CSS bundle. The line below each figure
-states what it counts.
+and gzipped, then rounded up to the nearest 10 KiB. React and React DOM are
+external. When a library ships base CSS, the total adds its separately gzipped
+CSS bundle. The line below each figure states what it counts.
 
 Tree-shaking, peer dependencies, icons, styles, and copied source still make
 the numbers different shapes. Polaris is a dated CDN snapshot, not a
@@ -24,5 +29,5 @@ stable releases in this snapshot.
 ## Component coverage
 
 Rows group components by job, so Dialog, Modal, and Drawer share one mark.
-Anta covers the common controls but remains narrower than full suites. Base UI
-intentionally focuses on behavior rather than styled components.
+Anta covers the common controls but remains narrower than full suites. The
+shadcn row reflects its default Base UI registry.

package/docs/components/banner.md

@@ -11,7 +11,7 @@ twice the resting height of `Progress`. It's **borderless by default**; add a ru
 under it or an outline around it with `border-bottom-width` / `border-width`, the
 same opt-in as `Progress` ([Styling](#styling)).
 
-## Tones
+## Tone
 
 Pick a semantic `tone` to tint the surface and text together — and the ✕ adopts the
 same tone (it also sets the border color, used if you opt into a border). The set