@antadesign/anta 0.3.34 → 0.3.35

package/dist/elements/a-switch.css

@@ -1 +1 @@
-@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}}}
+@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-track-disabled-border: var(--switch-track-disabled);--switch-track-on-disabled-border: transparent;--switch-thumb: light-dark(var(--bg-1), #ece9ec);--switch-thumb-off: var(--switch-track-off-stroke);--switch-thumb-off-disabled: var(--switch-thumb-off);--switch-thumb-shadow: 0 1px 2px color-mix(in oklch, #44374b 25%, transparent);--switch-thumb-shadow-disabled: 0 1px 2px color-mix(in oklch, #44374b 12.5%, transparent);--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-track-on-disabled: color-mix(in oklch, var(--switch-track-on) 50%, transparent);--switch-thumb-on-disabled: color-mix(in oklch, var(--switch-thumb) 50%, transparent);--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:var(--switch-thumb-shadow)}}@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-border);transition:none}&:after{background:var(--switch-thumb-off-disabled);box-shadow:none;transition:none}&:state(checked){&:before{background:var(--switch-track-on-disabled);border-color:var(--switch-track-on-disabled-border)}&:after{background:var(--switch-thumb-on-disabled);box-shadow:var(--switch-thumb-shadow-disabled)}}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-tab.css

@@ -1 +1 @@
-@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}}
+@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: var(--tabs-round, 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-tabs.css

@@ -1 +1 @@
-@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}}}}
+@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-neutral-bg: light-dark( oklch(from var(--anta-seed-neutral) .55 .008 h / .03), oklch(from var(--anta-seed-neutral) .8 .008 h / .08) );--tab-secondary-bg: var(--tab-secondary-neutral-bg);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-indicator-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-indicator-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-indicator-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-indicator-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-indicator-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:is([tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]):state(selected)){--tab-secondary-bg: light-dark( oklch(from var(--tabs-indicator-tone-source) .55 .14 h / .03), oklch(from var(--tabs-indicator-tone-source) .8 .12 h / .08) )}a-tabs:has(>a-tab[tone=neutral]:state(selected)){--tab-selected-text: var(--text-1);--tab-selected-border: var(--border-2);--tab-secondary-bg: var(--tab-secondary-neutral-bg)}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]{--tabs-round: 999px;--tab-radius: var(--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(--tab-radius)}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-tabs.d.ts

@@ -13,7 +13,7 @@ export declare class ATabsElement extends HTMLElementBase {
     private lastSelected;
     private alive;
     private childrenReady;
-    /** The selected tab's value, or `null` when nothing is selected. */
+    /** Applied tab value, or `null` when empty. Read-only; supply selection through `state`. */
     get value(): string | null;
     constructor();
     connectedCallback(): void;

package/dist/elements/a-tabs.js

@@ -21,7 +21,7 @@ class ATabsElement extends HTMLElementBase {
   // `t.selected` as own properties that shadow the accessors after upgrade.
   // Microtasks run after the adopting task's upgrades, so deferring is enough.
   childrenReady = false;
-  /** The selected tab's value, or `null` when nothing is selected. */
+  /** Applied tab value, or `null` when empty. Read-only; supply selection through `state`. */
   get value() {
     return this.#currentValue;
   }
@@ -31,7 +31,7 @@ class ATabsElement extends HTMLElementBase {
   }
   connectedCallback() {
     if (!this.seeded) {
-      this.uncontrolledValue = this.getAttribute("default-state");
+      this.uncontrolledValue = this.getAttribute("state") ?? this.getAttribute("default-state");
       this.seeded = true;
     }
     this.addEventListener("click", this.onClick);
@@ -60,8 +60,10 @@ class ATabsElement extends HTMLElementBase {
   }
   attributeChangedCallback(name, oldValue, newValue) {
     if (name === "noslide" && this.isConnected) this.#syncResizeObserver();
+    const previous = oldValue ?? this.uncontrolledValue;
+    if (name === "state") this.uncontrolledValue = newValue ?? oldValue;
     this.sync();
-    if (name === "state" && this.alive && newValue !== oldValue) this.emitChange();
+    if (name === "state" && this.alive && this.#currentValue !== previous) this.emitChange();
   }
   formDisabledCallback(disabled) {
     if (disabled) this.internals?.states?.add("disabled");
@@ -159,7 +161,7 @@ class ATabsElement extends HTMLElementBase {
     }
   }
   // Native `change`, fired *after* a selection applies (user pick or a controlled
-  // `state` update) — the post-apply counterpart to the cancelable `statechange`.
+  // `value` update) — the post-apply counterpart to the cancelable `statechange`.
   emitChange() {
     this.dispatchEvent(new Event("change", { bubbles: true }));
   }

package/dist/elements/a-tag.css

@@ -1 +1 @@
-@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}}}
+@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-secondary: light-dark(color-mix(in oklch, var(--tag-tint) 10%, transparent), color-mix(in oklch, var(--tag-tint) 20%, transparent));--tag-bg: var(--tag-bg-secondary);--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 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)}}}
+@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-text{--line-clamp: 1;--text-color: var(--text-2);--text-link-color: var(--link-color);--text-link-hover: var(--link-color-hover);display:block;position:relative;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-content{display:contents}a-text>a-button:has(+a-text-content),a-text>a-text-content+a-button{display:none}a-text[truncate][expandable]:state(expanded)[collapsible]{box-sizing:border-box;padding-block-end:16px}a-text[truncate]:not([expandable]),a-text[truncate][expandable]>a-text-content{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--line-clamp, 1);overflow:hidden}a-text[inline][truncate]:not([expandable]){display:-webkit-inline-box}a-text[truncate][expandable]>a-text-content{overflow:clip}a-text[truncate][expandable]:state(expanded)>a-text-content{display:block;-webkit-line-clamp:unset;overflow:visible}a-text[truncate][expandable]:state(overflowing):not(:state(expanded))>a-text-content{mask-image:linear-gradient(to bottom,black calc(100% - 2em),transparent 97%)}a-text[truncate="1"][expandable]:state(overflowing):not(:state(expanded))>a-text-content{mask-image:linear-gradient(to right,black calc(100% - 7ch),transparent 97%)}a-text[truncate="1"][expandable]:state(overflowing):not(:state(expanded)):dir(rtl)>a-text-content{mask-image:linear-gradient(to left,black calc(100% - 7ch),transparent 97%)}a-text[truncate][expandable]>a-button{appearance:none;background:transparent;box-shadow:none;border:none;border-radius:0;margin:0;padding:0;min-width:0;min-height:0;color:var(--text-3);cursor:pointer;font:inherit;font-variation-settings:inherit;display:none;position:absolute;z-index:1;inset-inline:0;bottom:0;width:auto;height:1.5em;opacity:0;transition:opacity .15s ease-out,color .15s ease-out}a-text[truncate][expandable]>a-button:is(:hover,:active){background:transparent;box-shadow:none;color:var(--text-1)}a-text[truncate][expandable]>a-button:before{content:"";position:absolute;inset-inline-end:3px;bottom:3px;width:6px;height:6px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg);transition:transform .15s ease-out}a-text[truncate][expandable]>a-button:after{content:none}a-text[truncate][expandable]:state(overflowing):not(:state(expanded))>a-button,a-text[truncate][expandable]:state(expanded)[collapsible]>a-button{display:block}a-text[truncate="1"][expandable]:not(:state(expanded))>a-button{inset-inline-start:auto;top:0;width:3em;height:auto}a-text[truncate][expandable]:state(expanded)[collapsible]>a-button{height:16px}a-text[truncate][expandable][expandable-inert]:state(overflowing):not(:state(expanded))>a-button{inset:0;width:auto;height:auto}a-text[truncate][expandable]:is(:hover,:focus-within)>a-button,a-text[truncate][expandable]:state(expanded)>a-button{opacity:1}a-text[truncate][expandable]:state(expanded)>a-button:before{transform:rotate(225deg)}@media(prefers-reduced-motion:reduce){a-text[truncate][expandable]>a-button,a-text[truncate][expandable]>a-button:before{transition:none}}@media(forced-colors:active){a-text[truncate][expandable]>a-text-content{mask-image:none}a-text[truncate][expandable]>a-button{color:ButtonText;opacity:1}}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-text.d.ts

@@ -1,55 +1,18 @@
 import { HTMLElementBase } from '../anta_helpers';
 import './a-text.css';
-/**
- * `<a-text>` — body text element with truncation / expansion.
- *
- * Styling notes (`a-text.css` ships comment-free):
- * - `a-text[truncate] { min-width: 0 }` is the one external requirement of
- *   the shadow clamp: the host must be allowed to shrink inside flex/grid
- *   parents so the inner clamp can actually clip content.
- * - The default (no `priority`) is the SECONDARY level — body text reads at
- *   `--text-2` on the base rule; `priority="primary"` opts into the
- *   strongest `--text-1`.
- * - Priority/tone link colors: levels 1–2 keep the brand link color; levels
- *   3–5 mute the link to `currentColor` and step the hover up one level
- *   (3→2, 4→3, 5→4). Tinted variants do the same within their
- *   `--text-{N}-{tone}` ramp (level 1 has nothing above it — hover keeps the
- *   color and only the underline alpha changes).
- * - The `a-text a` rules layer on anta's global `a` defaults from
- *   `reset.css`, overriding only color and the one-step-up hover color
- *   (underline thickness/offset/alpha are inherited); the hover repeats the
- *   underline color so it tracks the priority color. Hover is gated to
- *   `(hover: hover) and (pointer: fine)` to avoid sticky hover after a tap.
- */
+/** Light-DOM text with overflow measurement and expansion. The element keeps
+ * state in ElementInternals; it never rewrites authored markup or attributes. */
 export declare class ATextElement extends HTMLElementBase {
     #private;
     static observedAttributes: string[];
-    private slotEl;
-    /** The chevron — built only while expandable, removed on drop or one-way expand. */
-    private expandBtn?;
-    /** Expanded state lives on the element — a stateless wrapper can't hold it. */
-    private expanded;
-    private overflowObserver?;
-    private contentObserver?;
     constructor();
+    addEventListener<K extends keyof HTMLElementEventMap>(type: K, callback: (this: HTMLElement, event: HTMLElementEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+    addEventListener(type: string, callback: EventListenerOrEventListenerObject | null, options?: boolean | AddEventListenerOptions): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
-    /** True when `truncate` currently hides some of the slotted content. This is
-     *  a UI-thread layout read, used by a nested `a-tooltip`; it never writes to
-     *  the host or light DOM. */
+    /** Whether the current clamp hides content. Also used by truncated-only
+     * tooltips. This layout read changes neither markup nor accessibility. */
     get isTruncated(): boolean;
-    /** Create or remove the chevron to match `expandable`, then refresh it. */
-    private syncExpandButton;
-    private handleToggle;
-    private setExpanded;
-    private startOverflowObserver;
-    private stopOverflowObserver;
-    /** Toggle `slot.overflowing` (gates the fade + chevron) to whether the clamp
-     *  clips. Frozen on while expanded; height catches wrapped text, width a long word. */
-    private measureOverflow;
-    /** Reflect state onto the button (label + `aria-expanded` + `.expanded`); a
-     *  one-way expand removes it once open. */
-    private refreshButton;
 }
 export declare function register_a_text(): void;

package/dist/elements/a-text.js

@@ -1,220 +1,137 @@
-import { HTMLElementBase } from "../anta_helpers";
+import { HTMLElementBase, isTextToggleReceiver, SYNC_TEXT_TOGGLE } from "../anta_helpers";
 import "./a-text.css";
-const SHADOW_STYLE = `
-  :host {
-    display: block;
-    position: relative;
-  }
-  :host([inline]) {
-    display: inline-block;
-  }
-
-  slot {
-    display: contents;
-  }
-
-  :host([truncate]) slot {
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: var(--line-clamp, 1);
-    overflow: hidden;
-  }
-
-  :host([truncate][expandable]) slot.overflowing:not(.expanded) {
-    -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 2em), transparent 97%);
-            mask-image: linear-gradient(to bottom, black calc(100% - 2em), transparent 97%);
-  }
-
-  :host([truncate="1"][expandable]) slot.overflowing:not(.expanded) {
-    -webkit-mask-image: linear-gradient(to right, black calc(100% - 7ch), transparent 97%);
-            mask-image: linear-gradient(to right, black calc(100% - 7ch), transparent 97%);
-  }
-
-  :host([truncate]) slot.expanded {
-    display: block;
-    -webkit-line-clamp: unset;
-    overflow: visible;
-  }
-
-  .expand-btn {
-    appearance: none;
-    background: transparent;
-    border: none;
-    margin: 0;
-    padding: 0;
-    color: var(--text-3);
-    cursor: pointer;
-    font: inherit;
-    font-variation-settings: inherit;
-    display: none;
-    position: absolute;
-    z-index: 1;
-    opacity: 0;
-    transition: opacity 150ms ease-out, color 150ms ease-out;
-  }
-  .expand-btn:hover {
-    color: var(--text-1);
-  }
-  .expand-btn::before {
-    content: '';
-    position: absolute;
-    right: -1px;
-    bottom: -1px;
-    width: 14px;
-    height: 14px;
-    background-color: currentColor;
-    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
-            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
-    -webkit-mask-position: center;
-            mask-position: center;
-    -webkit-mask-repeat: no-repeat;
-            mask-repeat: no-repeat;
-    -webkit-mask-size: contain;
-            mask-size: contain;
-    transition: transform 150ms ease-out;
-  }
-
-  :host([truncate][expandable]) slot.overflowing ~ .expand-btn {
-    display: block;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    height: 1.5em;
-  }
-
-  :host([truncate="1"][expandable]) slot.overflowing ~ .expand-btn {
-    left: auto;
-    top: 0;
-    bottom: 0;
-    width: 3em;
-  }
-
-  :host([truncate][expandable]:hover) slot.overflowing ~ .expand-btn,
-  :host([truncate][expandable]:focus-within) slot.overflowing ~ .expand-btn,
-  .expand-btn.expanded {
-    opacity: 1;
-  }
-
-  .expand-btn.expanded::before {
-    transform: rotate(180deg);
-  }
-`;
 class ATextElement extends HTMLElementBase {
   static observedAttributes = ["expandable", "truncate", "collapsible"];
-  slotEl;
-  /** The chevron — built only while expandable, removed on drop or one-way expand. */
-  expandBtn;
-  /** Expanded state lives on the element — a stateless wrapper can't hold it. */
-  expanded = false;
-  // Re-sync `slot.overflowing`: the resize observer watches the box (width),
-  // the mutation observer watches the slotted content — the clamped box never
-  // resizes as content grows, so resize alone misses added lines.
-  overflowObserver;
-  contentObserver;
+  #internals;
+  #expanded = false;
+  #resizeObserver;
+  #contentObserver;
+  #content;
+  #control;
+  #reportQueued = false;
+  #reported;
   constructor() {
     super();
-    const shadow = this.attachShadow({ mode: "open" });
-    const style = document.createElement("style");
-    style.textContent = SHADOW_STYLE;
-    this.slotEl = document.createElement("slot");
-    shadow.append(style, this.slotEl);
+    this.#internals = this.attachInternals();
+  }
+  addEventListener(type, callback, options) {
+    if (callback) super.addEventListener(type, callback, options);
+    if (type === "textpresentationchange" && callback) this.#reportPresentation(true);
   }
   connectedCallback() {
-    this.syncExpandButton();
-    if (this.#isExpandable) this.startOverflowObserver();
+    this.addEventListener("click", this.#onToggle);
+    this.addEventListener("anta-text-control-ready", this.#onControlReady);
+    this.#sync();
   }
   disconnectedCallback() {
-    this.overflowObserver?.disconnect();
-    this.contentObserver?.disconnect();
+    this.removeEventListener("click", this.#onToggle);
+    this.removeEventListener("anta-text-control-ready", this.#onControlReady);
+    this.#resizeObserver?.disconnect();
+    this.#contentObserver?.disconnect();
+    this.#content = void 0;
+    this.#clearControl();
   }
   attributeChangedCallback(name, oldValue, newValue) {
     if (oldValue === newValue) return;
-    if (name === "truncate" || name === "expandable") this.setExpanded(false);
-    this.syncExpandButton();
-    if (name === "truncate" || name === "expandable") {
-      if (this.#isExpandable) this.startOverflowObserver();
-      else this.stopOverflowObserver();
-    }
+    if (name === "truncate" || name === "expandable") this.#setExpanded(false);
+    if (this.isConnected) this.#sync();
   }
-  get #isExpandable() {
+  get #canExpand() {
     return this.hasAttribute("truncate") && this.hasAttribute("expandable");
   }
-  get #isCollapsible() {
-    return this.hasAttribute("collapsible");
-  }
-  /** True when `truncate` currently hides some of the slotted content. This is
-   *  a UI-thread layout read, used by a nested `a-tooltip`; it never writes to
-   *  the host or light DOM. */
+  /** Whether the current clamp hides content. Also used by truncated-only
+   * tooltips. This layout read changes neither markup nor accessibility. */
   get isTruncated() {
-    if (!this.hasAttribute("truncate") || this.expanded) return false;
-    const s = this.slotEl;
-    if (s.clientWidth === 0 && s.clientHeight === 0) return false;
-    return s.scrollHeight > s.clientHeight + 1 || s.scrollWidth > s.clientWidth + 1;
-  }
-  /** Create or remove the chevron to match `expandable`, then refresh it. */
-  syncExpandButton() {
-    if (this.#isExpandable && !this.expandBtn) {
-      const btn = document.createElement("button");
-      btn.className = "expand-btn";
-      btn.type = "button";
-      btn.addEventListener("click", this.handleToggle);
-      this.shadowRoot.append(btn);
-      this.expandBtn = btn;
-    } else if (!this.#isExpandable && this.expandBtn) {
-      this.expandBtn.remove();
-      this.expandBtn = void 0;
+    if (!this.hasAttribute("truncate") || this.#expanded) return false;
+    const content = this.#clampBox();
+    if (!content || content.clientWidth === 0 && content.clientHeight === 0) return false;
+    return content.scrollHeight > content.clientHeight + 1 || content.scrollWidth > content.clientWidth + 1;
+  }
+  #clampBox() {
+    return this.#canExpand ? this.querySelector(":scope > a-text-content") : this;
+  }
+  #sync() {
+    if (!this.#canExpand) {
+      this.#resizeObserver?.disconnect();
+      this.#contentObserver?.disconnect();
+      this.#content = void 0;
+      this.#internals.states.delete("overflowing");
+      this.#clearControl();
+      this.#reportPresentation();
+      return;
     }
-    this.refreshButton();
-  }
-  handleToggle = () => {
-    this.setExpanded(!this.expanded);
-  };
-  setExpanded(next) {
-    if (next === this.expanded) return;
-    this.expanded = next;
-    this.slotEl.classList.toggle("expanded", next);
-    this.refreshButton();
-    if (!next) this.measureOverflow();
-  }
-  startOverflowObserver() {
-    if (!this.#isExpandable) return;
-    this.overflowObserver ??= new ResizeObserver(() => this.measureOverflow());
-    this.contentObserver ??= new MutationObserver(() => this.measureOverflow());
-    this.overflowObserver.observe(this.slotEl);
-    this.contentObserver.observe(this, { childList: true, subtree: true, characterData: true });
-    this.measureOverflow();
+    this.#contentObserver ??= new MutationObserver(() => this.#sync());
+    this.#contentObserver.observe(this, { childList: true, subtree: true, characterData: true });
+    const content = this.#clampBox();
+    this.#resizeObserver ??= new ResizeObserver(() => this.#measureOverflow());
+    if (content !== this.#content) {
+      this.#resizeObserver.disconnect();
+      if (content) this.#resizeObserver.observe(content);
+      this.#content = content ?? void 0;
+    }
+    const control = this.querySelector(":scope > a-button");
+    const receiver = isTextToggleReceiver(control) ? control : void 0;
+    if (receiver !== this.#control) {
+      this.#clearControl();
+      this.#control = receiver;
+    }
+    this.#syncControl();
+    this.#reportPresentation();
+    this.#measureOverflow();
   }
-  stopOverflowObserver() {
-    this.overflowObserver?.disconnect();
-    this.contentObserver?.disconnect();
-    this.slotEl.classList.remove("overflowing");
+  #clearControl() {
+    this.#control?.[SYNC_TEXT_TOGGLE]({ source: this, clear: true });
+    this.#control = void 0;
   }
-  /** Toggle `slot.overflowing` (gates the fade + chevron) to whether the clamp
-   *  clips. Frozen on while expanded; height catches wrapped text, width a long word. */
-  measureOverflow() {
-    if (!this.#isExpandable || this.expanded) return;
-    this.slotEl.classList.toggle("overflowing", this.isTruncated);
+  #syncControl() {
+    this.#control?.[SYNC_TEXT_TOGGLE]({ source: this, expanded: this.#expanded });
   }
-  /** Reflect state onto the button (label + `aria-expanded` + `.expanded`); a
-   *  one-way expand removes it once open. */
-  refreshButton() {
-    const btn = this.expandBtn;
-    if (!btn) return;
-    if (this.expanded && !this.#isCollapsible) {
-      btn.remove();
-      this.expandBtn = void 0;
-      return;
-    }
-    btn.setAttribute("aria-expanded", this.expanded ? "true" : "false");
-    btn.setAttribute("aria-label", this.expanded ? "Show less" : "Show more");
-    btn.classList.toggle("expanded", this.expanded);
+  #onControlReady = (event) => {
+    if (event.target.parentElement === this) this.#sync();
+  };
+  #onToggle = (event) => {
+    if (!this.#canExpand || event.defaultPrevented) return;
+    const control = this.querySelector(":scope > a-button");
+    if (!control || !event.composedPath().includes(control)) return;
+    if (control.hasAttribute("disabled") || control.hasAttribute("loading")) return;
+    if (this.#expanded && !this.hasAttribute("collapsible")) return;
+    if (!this.#expanded && !this.isTruncated) return;
+    this.#setExpanded(!this.#expanded);
+    if (!this.#expanded) this.#measureOverflow();
+  };
+  #setExpanded(next) {
+    this.#expanded = next;
+    if (next) this.#internals.states.add("expanded");
+    else this.#internals.states.delete("expanded");
+    this.#syncControl();
+    this.#reportPresentation();
+  }
+  #measureOverflow() {
+    if (this.#expanded) return;
+    if (this.isTruncated) this.#internals.states.add("overflowing");
+    else this.#internals.states.delete("overflowing");
+    this.#reportPresentation();
+  }
+  #reportPresentation(replay = false) {
+    if (replay) this.#reported = void 0;
+    if (this.#reportQueued) return;
+    this.#reportQueued = true;
+    this.view.queueMicrotask(() => {
+      this.#reportQueued = false;
+      if (!this.isConnected) return;
+      const detail = {
+        expanded: this.#expanded,
+        overflowing: this.#internals.states.has("overflowing")
+      };
+      if (this.#reported?.expanded === detail.expanded && this.#reported.overflowing === detail.overflowing) return;
+      this.#reported = { ...detail };
+      this.dispatchEvent(new this.view.CustomEvent("textpresentationchange", { detail }));
+    });
   }
 }
 function register_a_text() {
   if (typeof customElements === "undefined") return;
-  if (!customElements.get("a-text")) {
-    customElements.define("a-text", ATextElement);
-  }
+  if (!customElements.get("a-text")) customElements.define("a-text", ATextElement);
 }
 register_a_text();
 export {

package/dist/elements/a-title.css

@@ -1 +1 @@
-@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[truncate]{min-width:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--line-clamp, 1);overflow:hidden}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[truncate]{min-width:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--line-clamp, 1);overflow:hidden}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:22px}a-title[level="5"]{font-size:15px;line-height:20px}a-title[level="6"]{font-size:13px;line-height:16px}a-title[font=serif]{font-family:var(--serif)}a-title[font=monospace]{font-family:var(--monospace)}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 @@
-@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}}
+@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;display:block;opacity:1;translate:0 0}a-toast:not(:defined){display:none}a-toast:state(leaving){opacity:0}@starting-style{a-toast{opacity:0;translate:0 12px}}@media(prefers-reduced-motion:no-preference){a-toast{transition:opacity var(--toast-dur, .22s) ease,translate var(--toast-dur, .22s) ease}}a-toast::part(content){--_toast-countdown-from: 1;--_toast-countdown-to: 0;--toast-remaining: 1;display:block}}