@antadesign/anta 0.3.20 → 0.3.22

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

@@ -1 +1 @@
-@layer anta{a-input-time:not(:defined){display:grid;grid-template-columns:minmax(0,1fr);row-gap:4px}a-input-time:not(:defined)>[slot=leading],a-input-time:not(:defined)>[slot=trailing],a-input-time:not(:defined)>[slot=clear],a-input-time:not(:defined)>[slot=hint]{display:none!important}a-input-time:not(:defined)>[slot=label]{display:block;color:var(--input-time-label);font-family:var(--sans-serif);font-size:var(--input-time-font-size);line-height:var(--input-time-line-height);font-weight:500}a-input-time:not(:defined):after{content:"\2013\2013:\2013\2013";display:block;min-height:var(--input-time-field-height);line-height:var(--input-time-field-height);padding-inline:8px;border-radius:var(--input-time-field-radius);box-shadow:inset 0 0 0 .5px var(--input-time-border);color:var(--input-time-placeholder);font-family:var(--sans-serif);font-size:var(--input-time-font-size);font-weight:400;font-feature-settings:"ss02","ss05","tnum";font-variation-settings:"wdth" 100,"slnt" 0,"ital" 0;white-space:nowrap}@media(forced-colors:active){a-input-time:not(:defined):after{border:1px solid ButtonBorder}}a-input-time{transition:opacity .28s ease-out 40ms}a-input-time:not(:defined){opacity:.5}@media(prefers-reduced-motion:reduce){a-input-time{transition:none}}a-input-time{--input-time-bg: var(--bg-1);--input-time-border: var(--border-2);--input-time-border-hover: var(--border-1);--input-time-text: var(--text-1);--input-time-label: var(--text-3);--input-time-placeholder: var(--text-3);--input-time-adornment: var(--text-3);--input-time-hint: var(--text-3);--input-time-period-color: var(--text-3);--input-time-font-size: 15px;--input-time-line-height: 20px;--input-time-field-height: 28px;--input-time-field-radius: 4px;width:fit-content;max-width:100%}a-input-time:has(>[slot=label])::part(label){display:block}a-input-time:has(>[slot=leading])::part(leading){display:flex;align-items:center;flex-shrink:0;margin-inline-start:7px}a-input-time:has(>[slot=leading])::part(segments){padding-inline-start:4px}a-input-time:has(>[slot=trailing])::part(trailing){display:flex;align-items:center;gap:2px;flex-shrink:0;color:var(--input-time-adornment);font-size:var(--input-time-font-size)}a-input-time:has(>[slot=hint])::part(hint){display:flex}a-input-time[size=small]{--input-time-font-size: 13px;--input-time-line-height: 16px;--input-time-field-height: 24px}a-input-time[size=large]{--input-time-font-size: 17px;--input-time-line-height: 22px;--input-time-field-height: 32px}a-input-time[round]{--input-time-round: attr(round type(<length>), 999px);--input-time-field-radius: var(--input-time-round, 999px)}a-input-time[size=small] a-icon{--icon-size: 14px}a-input-time[size=large] a-icon{--icon-size: 18px}a-input-time[tone]:not([tone=""]){--input-time-tone-source: attr(tone type(<color>), var(--border-2));--input-time-border: oklch(from var(--input-time-tone-source) .7 calc(c*.8) h);--input-time-border-hover: oklch(from var(--input-time-tone-source) .6 c h);.dark &{--input-time-border: oklch(from var(--input-time-tone-source) .5 calc(c*.8) h);--input-time-border-hover: oklch(from var(--input-time-tone-source) .6 c h)}}a-input-time[status=critical]{--input-time-tone-source: var(--anta-seed-critical);--input-time-bg: var(--bg-2-critical);--input-time-hint: var(--text-2-critical)}a-input-time[status=warning]{--input-time-tone-source: var(--anta-seed-warning);--input-time-bg: var(--bg-2-warning);--input-time-hint: var(--text-2-warning)}a-input-time[status=success]{--input-time-tone-source: var(--anta-seed-success);--input-time-bg: var(--bg-2-success);--input-time-hint: var(--text-2-success)}a-input-time[status=info]{--input-time-tone-source: var(--anta-seed-info);--input-time-bg: var(--bg-2-info);--input-time-hint: var(--text-2-info)}a-input-time[status=brand]{--input-time-tone-source: var(--anta-seed-brand);--input-time-bg: var(--bg-2-brand);--input-time-hint: var(--text-2-brand)}a-input-time[status]{--input-time-border: oklch(from var(--input-time-tone-source) .58 c h);--input-time-border-hover: oklch(from var(--input-time-tone-source) .58 c h)}.dark a-input-time[status]{--input-time-border: oklch(from var(--input-time-tone-source) .52 c h);--input-time-border-hover: oklch(from var(--input-time-tone-source) .52 c h)}a-input-time:disabled{--input-time-bg: #44374b12;--input-time-border: #44374b26;--input-time-border-hover: #44374b26;--input-time-text: var(--text-4);--input-time-label: var(--text-4);--input-time-hint: var(--text-5);cursor:not-allowed}.dark a-input-time:disabled{--input-time-bg: #e4d1ef0d;--input-time-border: #e4d1ef1f;--input-time-border-hover: #e4d1ef1f}}
+@layer anta{a-input-time:not(:defined){display:grid;grid-template-columns:minmax(0,1fr);row-gap:4px}a-input-time:not(:defined)>[slot=leading],a-input-time:not(:defined)>[slot=trailing],a-input-time:not(:defined)>[slot=clear],a-input-time:not(:defined)>[slot=hint]{display:none!important}a-input-time:not(:defined)>[slot=label]{display:block;color:var(--input-time-label);font-family:var(--sans-serif);font-size:var(--input-time-font-size);line-height:var(--input-time-line-height);font-weight:500}a-input-time:not(:defined):after{content:"\2013\2013:\2013\2013";display:block;min-height:var(--input-time-field-height);line-height:var(--input-time-field-height);padding-inline:8px;border-radius:var(--input-time-field-radius);box-shadow:inset 0 0 0 .5px var(--input-time-border);color:var(--input-time-placeholder);font-family:var(--sans-serif);font-size:var(--input-time-font-size);font-weight:400;font-feature-settings:"ss02","ss05","tnum";font-variation-settings:"wdth" 100,"slnt" 0,"ital" 0;white-space:nowrap}@media(forced-colors:active){a-input-time:not(:defined):after{border:1px solid ButtonBorder}}a-input-time{transition:opacity .28s ease-out 40ms}a-input-time:not(:defined){opacity:.5}@media(prefers-reduced-motion:reduce){a-input-time{transition:none}}a-input-time{--input-time-bg: var(--bg-1);--input-time-border: var(--border-2);--input-time-border-hover: var(--border-1);--input-time-text: var(--text-1);--input-time-label: var(--text-3);--input-time-placeholder: var(--text-3);--input-time-adornment: var(--text-3);--input-time-hint: var(--text-3);--input-time-period-color: var(--text-3);--input-time-font-size: 15px;--input-time-line-height: 20px;--input-time-field-height: 28px;--input-time-field-radius: 4px;width:fit-content;max-width:100%}a-input-time:has(>[slot=label])::part(label){display:block}a-input-time:has(>[slot=leading])::part(leading){display:flex;align-items:center;flex-shrink:0;margin-inline-start:7px}a-input-time:has(>[slot=leading])::part(segments){padding-inline-start:4px}a-input-time:has(>[slot=trailing])::part(trailing){display:flex;align-items:center;gap:2px;flex-shrink:0;color:var(--input-time-adornment);font-size:var(--input-time-font-size)}a-input-time:has(>[slot=hint])::part(hint){display:flex}a-input-time[size=small]{--input-time-font-size: 13px;--input-time-line-height: 16px;--input-time-field-height: 24px}a-input-time[size=large]{--input-time-font-size: 17px;--input-time-line-height: 22px;--input-time-field-height: 32px}a-input-time[round]{--input-time-round: attr(round type(<length>), 999px);--input-time-field-radius: var(--input-time-round, 999px)}a-input-time[size=small] a-icon{--icon-size: 14px}a-input-time[size=large] a-icon{--icon-size: 18px}a-input-time[tone]:not([tone=""]){--input-time-tone-source: attr(tone type(<color>), var(--border-2));--input-time-border: oklch(from var(--input-time-tone-source) .7 calc(c*.8) h);--input-time-border-hover: oklch(from var(--input-time-tone-source) .6 c h);.dark &{--input-time-border: oklch(from var(--input-time-tone-source) .5 calc(c*.8) h);--input-time-border-hover: oklch(from var(--input-time-tone-source) .6 c h)}}a-input-time[status=critical]{--input-time-tone-source: var(--anta-seed-critical);--input-time-bg: var(--bg-2-critical);--input-time-hint: var(--text-2-critical)}a-input-time[status=warning]{--input-time-tone-source: var(--anta-seed-warning);--input-time-bg: var(--bg-2-warning);--input-time-hint: var(--text-2-warning)}a-input-time[status=success]{--input-time-tone-source: var(--anta-seed-success);--input-time-bg: var(--bg-2-success);--input-time-hint: var(--text-2-success)}a-input-time[status=info]{--input-time-tone-source: var(--anta-seed-info);--input-time-bg: var(--bg-2-info);--input-time-hint: var(--text-2-info)}a-input-time[status=brand]{--input-time-tone-source: var(--anta-seed-brand);--input-time-bg: var(--bg-2-brand);--input-time-hint: var(--text-2-brand)}a-input-time[status]:not([status=neutral]){--input-time-border: oklch(from var(--input-time-tone-source) .58 c h);--input-time-border-hover: oklch(from var(--input-time-tone-source) .58 c h)}.dark a-input-time[status]:not([status=neutral]){--input-time-border: oklch(from var(--input-time-tone-source) .52 c h);--input-time-border-hover: oklch(from var(--input-time-tone-source) .52 c h)}a-input-time:disabled{--input-time-bg: #44374b12;--input-time-border: #44374b26;--input-time-border-hover: #44374b26;--input-time-text: var(--text-4);--input-time-label: var(--text-4);--input-time-hint: var(--text-5);cursor:not-allowed}.dark a-input-time:disabled{--input-time-bg: #e4d1ef0d;--input-time-border: #e4d1ef1f;--input-time-border-hover: #e4d1ef1f}}

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

@@ -39,7 +39,7 @@ const SHADOW_STYLE = `
     box-shadow: inset 0 0 0 var(--_bw) var(--_bc);
     transition: box-shadow 120ms ease;
   }
-  :host([status]) .field { --_bw: 1px; }
+  :host([status]:not([status="neutral"])) .field { --_bw: 1px; }
 
   @media (hover: hover) and (pointer: fine) {
     :host(:not(:disabled)) .field:hover {

package/dist/elements/a-input.css

@@ -1 +1 @@
-@layer anta{a-input:not(:defined){display:grid;grid-template-columns:minmax(0,1fr);row-gap:4px}a-input:not(:defined)>[slot=leading],a-input:not(:defined)>[slot=trailing],a-input:not(:defined)>[slot=clear],a-input:not(:defined)>[slot=hint]{display:none!important}a-input:not(:defined)>[slot=label]{display:block;color:var(--input-label);font-family:var(--sans-serif);font-size:15px;line-height:20px;font-weight:500}a-input[size=small]:not(:defined)>[slot=label]{font-size:13px;line-height:16px}a-input[size=large]:not(:defined)>[slot=label]{font-size:17px;line-height:22px}a-input:not(:defined):after{content:attr(placeholder);display:block;min-height:28px;line-height:28px;padding-inline:7px;border-radius:4px;box-shadow:inset 0 0 0 .5px var(--input-border);color:var(--input-placeholder);font-family:var(--sans-serif);font-size:15px;font-weight:400;font-feature-settings:"ss02","ss05","tnum";font-variation-settings:"wdth" 100,"slnt" 0,"ital" 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}a-input[value]:not([value=""]):not([type=password]):not(:defined):after{content:attr(value);color:var(--input-text)}a-input[size=small]:not(:defined):after{min-height:24px;line-height:24px;font-size:13px}a-input[size=large]:not(:defined):after{min-height:32px;line-height:32px;font-size:17px}@media(forced-colors:active){a-input:not(:defined):after{border:1px solid ButtonBorder}}a-input[round]:not(:defined):after{border-radius:var(--input-round, 999px)}a-input{transition:opacity .28s ease-out 40ms}a-input:not(:defined){opacity:.5}@media(prefers-reduced-motion:reduce){a-input{transition:none}}a-input{--input-bg: var(--bg-1);--input-border: var(--border-2);--input-text: var(--text-1);--input-label: var(--text-3);--input-placeholder: var(--text-4);--input-adornment: var(--text-3);--input-hint: var(--text-3);--input-trailing-inset: 7px;width:100%}a-input:has(>[slot=label])::part(label){display:block}a-input:has(>[slot=leading])::part(leading),a-input:has(>[slot=trailing])::part(trailing){display:flex;align-items:center;flex-shrink:0}a-input:has(>[slot=leading])::part(leading){margin-inline-start:7px}a-input:has(>[slot=trailing])::part(trailing){gap:2px;margin-inline-end:var(--input-trailing-inset, 7px)}a-input:has(>[slot=leading])::part(input){padding-inline-start:5px}a-input[truncate]:not([multiline])::part(input){text-overflow:ellipsis}a-input:has(>[slot=hint])::part(hint){display:flex}a-input[multiline]:has(>[slot=leading])::part(leading),a-input[multiline]:has(>[slot=trailing])::part(trailing){align-self:flex-start;height:calc(var(--_lh) + var(--_pad-block) * 2)}a-input:has([slot=trailing] :is(a-button,button)),a-input:has([slot=trailing]:is(a-button,button)){--input-trailing-inset: 0}a-input[round]{--input-round: attr(round type(<length>), 999px)}a-input[tone]:not([tone=""]):not([status]){--input-tone-source: attr(tone type(<color>), var(--border-2));--input-border: oklch(from var(--input-tone-source) .7 calc(c*.8) h);.dark &{--input-border: oklch(from var(--input-tone-source) .5 calc(c*.8) h)}}a-input[status=critical]{--input-status-source: var(--anta-seed-critical);--input-bg: var(--bg-2-critical);--input-hint: var(--text-2-critical)}a-input[status=warning]{--input-status-source: var(--anta-seed-warning);--input-bg: var(--bg-2-warning);--input-hint: var(--text-2-warning)}a-input[status=success]{--input-status-source: var(--anta-seed-success);--input-bg: var(--bg-2-success);--input-hint: var(--text-2-success)}a-input[status=info]{--input-status-source: var(--anta-seed-info);--input-bg: var(--bg-2-info);--input-hint: var(--text-2-info)}a-input[status=brand]{--input-status-source: var(--anta-seed-brand);--input-bg: var(--bg-2-brand);--input-hint: var(--text-2-brand)}a-input[status]{--input-border: oklch(from var(--input-status-source) .58 c h)}.dark a-input[status]{--input-border: oklch(from var(--input-status-source) .52 c h)}a-input:disabled{--input-bg: #44374b12;--input-border: #44374b26;--input-text: var(--text-4);--input-label: var(--text-4);--input-hint: var(--text-5);cursor:not-allowed}a-input[status]:disabled{--input-bg: #44374b12;--input-border: #44374b26;--input-hint: var(--text-5)}.dark a-input:disabled{--input-bg: #e4d1ef0d;--input-border: #e4d1ef1f}.dark a-input[status]:disabled{--input-bg: #e4d1ef0d;--input-border: #e4d1ef1f;--input-hint: var(--text-5)}a-input[size=small] a-icon{--icon-size: 14px}a-input[size=large] a-icon{--icon-size: 18px}a-input [slot=hint]>a-icon{margin-block-start:1px}a-input[size=small] [slot=hint]>a-icon{margin-block-start:.5px}a-input[size=large] [slot=hint]>a-icon{margin-block-start:1.5px}input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week]){--native-field-block-size: 28px;--native-field-padding-block: 4px;--native-field-font-size: 15px;--native-field-line-height: 20px;--native-field-round: 4px;--native-field-border: var(--border-2);box-sizing:border-box;block-size:var(--native-field-block-size);margin:0;padding-block:var(--native-field-padding-block);padding-inline:7px;border:0;border-radius:var(--native-field-round);outline:0;background:var(--bg-1);box-shadow:inset 0 0 0 .5px var(--native-field-border);color:var(--text-1);caret-color:currentColor;color-scheme:light;font-family:var(--sans-serif);font-size:var(--native-field-font-size);font-weight:400;font-feature-settings:"ss02","ss05","tnum";font-variation-settings:"wdth" 100,"slnt" 0,"ital" 0;line-height:var(--native-field-line-height);transition:box-shadow .12s ease}input[data-anta][list]::-webkit-calendar-picker-indicator{opacity:0!important;pointer-events:none!important}.dark input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week]){color-scheme:dark}@media(hover:hover)and (pointer:fine){input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week]):not(:disabled):hover{box-shadow:inset 0 0 0 1px var(--native-field-border)}}input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week]):focus{box-shadow:inset 0 0 0 1px var(--native-field-border);outline:1px solid var(--focus-ring);outline-offset:1px}input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week]):disabled{background:color-mix(in oklch,var(--text-1) 4%,var(--bg-1));box-shadow:inset 0 0 0 .5px color-mix(in oklch,var(--text-1) 15%,transparent);color:var(--text-4);cursor:not-allowed}input[data-anta][type=number]{appearance:textfield;-moz-appearance:textfield}input[data-anta][type=number]::-webkit-inner-spin-button,input[data-anta][type=number]::-webkit-outer-spin-button{appearance:none;margin:0}input[data-anta][type=file]{--native-file-block-size: 28px;--native-file-padding-block: 4px;--native-file-font-size: 15px;--native-file-line-height: 20px;box-sizing:border-box;min-block-size:var(--native-file-block-size);margin:0;padding:0;border:0;color:var(--text-2);color-scheme:light;font-family:var(--sans-serif);font-size:var(--native-file-font-size);font-weight:400;font-feature-settings:"ss02","ss05","tnum";font-variation-settings:"wdth" 100,"slnt" 0,"ital" 0;line-height:var(--native-file-line-height)}.dark input[data-anta][type=file]{color-scheme:dark}input[data-anta][type=file]::file-selector-button{box-sizing:border-box;min-block-size:var(--native-file-block-size);margin:0 8px 0 0;padding:var(--native-file-padding-block) 9px;border:0;border-radius:4px;color:var(--text-2);background:color-mix(in oklch,var(--text-1) 10%,transparent);box-shadow:inset 0 0 1px color-mix(in oklch,currentColor,transparent 90%);font:inherit;font-weight:450;letter-spacing:.05ch;line-height:var(--native-file-line-height);cursor:pointer;transition:color .15s ease-out,background-color .15s ease-out}@media(hover:hover)and (pointer:fine){input[data-anta][type=file]:not(:disabled):hover::file-selector-button{color:var(--text-1);background:color-mix(in oklch,var(--text-1) 15%,transparent)}}input[data-anta][type=file]:not(:disabled):active::file-selector-button{color:var(--text-1);background:color-mix(in oklch,var(--text-1) 20%,transparent)}input[data-anta][type=file]:focus-visible{outline:1px solid var(--focus-ring);outline-offset:1px}input[data-anta][type=file]:disabled{color:var(--text-4);cursor:not-allowed}input[data-anta][type=file]:disabled::file-selector-button{color:var(--text-4);background:color-mix(in oklch,var(--text-1) 4%,var(--bg-1));cursor:not-allowed}select[data-anta]{--native-field-block-size: 28px;--native-field-padding-block: 4px;--native-field-font-size: 15px;--native-field-line-height: 20px;--native-field-round: 4px;--native-field-border: var(--border-2);--native-select-picker-bg: color-mix(in oklch, var(--bg-1) 90%, transparent);--native-select-picker-radius: var(--radius-md, 8px);--native-select-picker-border: 1px solid var(--border-3);--native-select-picker-shadow: 0 2px 6px color-mix(in oklch, var(--text-1) 8%, transparent), 0 8px 24px color-mix(in oklch, var(--text-1) 10%, transparent);--native-select-option-color: var(--text-2);--native-select-option-hover: 5%;--native-select-option-active: 8%;--native-select-option-selected: 8%;--native-select-option-padding-x: 8px;--native-select-option-padding-y: 6px;box-sizing:border-box;block-size:var(--native-field-block-size);margin:0;padding-block:var(--native-field-padding-block);padding-inline:7px;border:0;border-radius:var(--native-field-round);outline:0;background:var(--bg-1);box-shadow:inset 0 0 0 .5px var(--native-field-border);color:var(--text-1);color-scheme:light;font-family:var(--sans-serif);font-size:var(--native-field-font-size);font-weight:400;font-feature-settings:"ss02","ss05","tnum";font-variation-settings:"wdth" 100,"slnt" 0,"ital" 0;line-height:var(--native-field-line-height);transition:box-shadow .12s ease}.dark select[data-anta]{--native-select-picker-bg: color-mix(in oklch, var(--bg-1) 78%, transparent);--native-select-picker-shadow: 0 2px 8px color-mix(in oklch, black 50%, transparent), 0 12px 32px color-mix(in oklch, black 40%, transparent), inset 0 0 0 1px color-mix(in oklch, white 8%, transparent);color-scheme:dark}@media(hover:hover)and (pointer:fine){select[data-anta]:not(:disabled):hover{box-shadow:inset 0 0 0 1px var(--native-field-border)}}select[data-anta]:focus{box-shadow:inset 0 0 0 1px var(--native-field-border);outline:1px solid var(--focus-ring);outline-offset:1px}select[data-anta]:disabled{background:color-mix(in oklch,var(--text-1) 4%,var(--bg-1));box-shadow:inset 0 0 0 .5px color-mix(in oklch,var(--text-1) 15%,transparent);color:var(--text-4);cursor:not-allowed}@media(forced-colors:active){input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week]),select[data-anta]{border:1px solid ButtonBorder}}input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week])[data-anta-size=small],select[data-anta][data-anta-size=small]{--native-field-block-size: 24px;--native-field-padding-block: 2px;--native-field-font-size: 13px;--native-field-line-height: 16px}input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week])[data-anta-size=large],select[data-anta][data-anta-size=large]{--native-field-block-size: 32px;--native-field-padding-block: 5px;--native-field-font-size: 17px;--native-field-line-height: 22px}input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week])[round],select[data-anta][round]{--native-field-round: attr(round type(<length>), 999px)}input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week])[tone]:not([tone=""]){--native-field-tone: attr(tone type(<color>), var(--border-2));--native-field-border: oklch(from var(--native-field-tone) .7 calc(c*.8) h)}.dark input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week])[tone]:not([tone=""]){--native-field-border: oklch(from var(--native-field-tone) .5 calc(c*.8) h)}@supports (appearance: base-select){select[data-anta],select[data-anta]::picker(select){appearance:base-select;-webkit-appearance:base-select}select[data-anta]{padding:0}select[data-anta]>button{box-sizing:border-box;display:flex;align-items:center;gap:4px;inline-size:100%;min-block-size:var(--native-field-block-size);padding-block:var(--native-field-padding-block);padding-inline:7px;border:0;background:transparent;color:inherit;cursor:pointer;font:inherit;text-align:start}select[data-anta]>button>selectedcontent{flex:1;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}select[data-anta]::picker-icon{display:none}select[data-anta]>button>a-icon{margin-inline-start:auto;color:var(--text-3);transition:transform .12s ease}select[data-anta]:open>button>a-icon{transform:rotate(180deg)}select[data-anta]::picker(select){box-sizing:border-box;display:flex;flex-direction:column;gap:1px;margin-block-start:4px;padding:4px;border:var(--native-select-picker-border);border-radius:var(--native-select-picker-radius);background:var(--native-select-picker-bg);box-shadow:var(--native-select-picker-shadow);color:var(--native-select-option-color);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}select[data-anta] option{box-sizing:border-box;min-block-size:28px;padding-block:var(--native-select-option-padding-y);padding-inline:var(--native-select-option-padding-x);border-radius:var(--radius-sm, 4px);background:transparent;color:var(--native-select-option-color);cursor:pointer;font-family:var(--sans-serif);font-feature-settings:"ss02","ss05","tnum";font-size:14px;font-weight:400;font-variation-settings:"wdth" 100,"slnt" 0,"ital" 0;letter-spacing:normal;line-height:16px;text-transform:none;transition:background-color .28s ease-out}select[data-anta] option:is(:hover,:focus-visible){background:color-mix(in oklch,currentColor var(--native-select-option-hover),transparent);transition:background-color 60ms ease-in-out}select[data-anta] option:focus-visible{outline:1px solid var(--focus-ring);outline-offset:1px}select[data-anta] option:active{background:color-mix(in oklch,currentColor var(--native-select-option-active),transparent);transition:none}select[data-anta] option:checked{background:color-mix(in oklch,currentColor var(--native-select-option-selected),transparent);transition:background-color .28s ease-out}select[data-anta] option:disabled{color:var(--text-5);cursor:default}select[data-anta] optgroup{display:flex;flex-direction:column;gap:1px;color:var(--text-5);font-family:var(--sans-serif);font-size:.75em;font-weight:600;letter-spacing:.06em;text-transform:uppercase}}}
+@layer anta{a-input:not(:defined){display:grid;grid-template-columns:minmax(0,1fr);row-gap:4px}a-input:not(:defined)>[slot=leading],a-input:not(:defined)>[slot=trailing],a-input:not(:defined)>[slot=clear],a-input:not(:defined)>[slot=hint]{display:none!important}a-input:not(:defined)>[slot=label]{display:block;color:var(--input-label);font-family:var(--sans-serif);font-size:15px;line-height:20px;font-weight:500}a-input[size=small]:not(:defined)>[slot=label]{font-size:13px;line-height:16px}a-input[size=large]:not(:defined)>[slot=label]{font-size:17px;line-height:22px}a-input:not(:defined):after{content:attr(placeholder);display:block;min-height:28px;line-height:28px;padding-inline:7px;border-radius:4px;box-shadow:inset 0 0 0 .5px var(--input-border);color:var(--input-placeholder);font-family:var(--sans-serif);font-size:15px;font-weight:400;font-feature-settings:"ss02","ss05","tnum";font-variation-settings:"wdth" 100,"slnt" 0,"ital" 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}a-input[value]:not([value=""]):not([type=password]):not(:defined):after{content:attr(value);color:var(--input-text)}a-input[size=small]:not(:defined):after{min-height:24px;line-height:24px;font-size:13px}a-input[size=large]:not(:defined):after{min-height:32px;line-height:32px;font-size:17px}@media(forced-colors:active){a-input:not(:defined):after{border:1px solid ButtonBorder}}a-input[round]:not(:defined):after{border-radius:var(--input-round, 999px)}a-input{transition:opacity .28s ease-out 40ms}a-input:not(:defined){opacity:.5}@media(prefers-reduced-motion:reduce){a-input{transition:none}}a-input{--input-bg: var(--bg-1);--input-border: var(--border-2);--input-text: var(--text-1);--input-label: var(--text-3);--input-placeholder: var(--text-4);--input-adornment: var(--text-3);--input-hint: var(--text-3);--input-trailing-inset: 7px;width:100%}a-input:has(>[slot=label])::part(label){display:block}a-input:has(>[slot=leading])::part(leading),a-input:has(>[slot=trailing])::part(trailing){display:flex;align-items:center;flex-shrink:0}a-input:has(>[slot=leading])::part(leading){margin-inline-start:7px}a-input:has(>[slot=trailing])::part(trailing){gap:2px;margin-inline-end:var(--input-trailing-inset, 7px)}a-input:has(>[slot=leading])::part(input){padding-inline-start:5px}a-input[truncate]:not([multiline])::part(input){text-overflow:ellipsis}a-input:has(>[slot=hint])::part(hint){display:flex}a-input[multiline]:has(>[slot=leading])::part(leading),a-input[multiline]:has(>[slot=trailing])::part(trailing){align-self:flex-start;height:calc(var(--_lh) + var(--_pad-block) * 2)}a-input:has([slot=trailing] :is(a-button,button)),a-input:has([slot=trailing]:is(a-button,button)){--input-trailing-inset: 0}a-input[round]{--input-round: attr(round type(<length>), 999px)}a-input[tone]:not([tone=""]):not([status]){--input-tone-source: attr(tone type(<color>), var(--border-2));--input-border: oklch(from var(--input-tone-source) .7 calc(c*.8) h);.dark &{--input-border: oklch(from var(--input-tone-source) .5 calc(c*.8) h)}}a-input[status=critical]{--input-status-source: var(--anta-seed-critical);--input-bg: var(--bg-2-critical);--input-hint: var(--text-2-critical)}a-input[status=warning]{--input-status-source: var(--anta-seed-warning);--input-bg: var(--bg-2-warning);--input-hint: var(--text-2-warning)}a-input[status=success]{--input-status-source: var(--anta-seed-success);--input-bg: var(--bg-2-success);--input-hint: var(--text-2-success)}a-input[status=info]{--input-status-source: var(--anta-seed-info);--input-bg: var(--bg-2-info);--input-hint: var(--text-2-info)}a-input[status=brand]{--input-status-source: var(--anta-seed-brand);--input-bg: var(--bg-2-brand);--input-hint: var(--text-2-brand)}a-input[status]:not([status=neutral]){--input-border: oklch(from var(--input-status-source) .58 c h)}.dark a-input[status]:not([status=neutral]){--input-border: oklch(from var(--input-status-source) .52 c h)}a-input:disabled{--input-bg: #44374b12;--input-border: #44374b26;--input-text: var(--text-4);--input-label: var(--text-4);--input-hint: var(--text-5);cursor:not-allowed}a-input[status]:disabled{--input-bg: #44374b12;--input-border: #44374b26;--input-hint: var(--text-5)}.dark a-input:disabled{--input-bg: #e4d1ef0d;--input-border: #e4d1ef1f}.dark a-input[status]:disabled{--input-bg: #e4d1ef0d;--input-border: #e4d1ef1f;--input-hint: var(--text-5)}a-input[size=small] a-icon{--icon-size: 14px}a-input[size=large] a-icon{--icon-size: 18px}a-input [slot=hint]>a-icon{margin-block-start:1px}a-input[size=small] [slot=hint]>a-icon{margin-block-start:.5px}a-input[size=large] [slot=hint]>a-icon{margin-block-start:1.5px}input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week]){--native-field-block-size: 28px;--native-field-padding-block: 4px;--native-field-font-size: 15px;--native-field-line-height: 20px;--native-field-round: 4px;--native-field-border: var(--border-2);box-sizing:border-box;block-size:var(--native-field-block-size);margin:0;padding-block:var(--native-field-padding-block);padding-inline:7px;border:0;border-radius:var(--native-field-round);outline:0;background:var(--bg-1);box-shadow:inset 0 0 0 .5px var(--native-field-border);color:var(--text-1);caret-color:currentColor;color-scheme:light;font-family:var(--sans-serif);font-size:var(--native-field-font-size);font-weight:400;font-feature-settings:"ss02","ss05","tnum";font-variation-settings:"wdth" 100,"slnt" 0,"ital" 0;line-height:var(--native-field-line-height);transition:box-shadow .12s ease}input[data-anta][list]::-webkit-calendar-picker-indicator{opacity:0!important;pointer-events:none!important}.dark input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week]){color-scheme:dark}@media(hover:hover)and (pointer:fine){input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week]):not(:disabled):hover{box-shadow:inset 0 0 0 1px var(--native-field-border)}}input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week]):focus{box-shadow:inset 0 0 0 1px var(--native-field-border);outline:1px solid var(--focus-ring);outline-offset:1px}input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week]):disabled{background:color-mix(in oklch,var(--text-1) 4%,var(--bg-1));box-shadow:inset 0 0 0 .5px color-mix(in oklch,var(--text-1) 15%,transparent);color:var(--text-4);cursor:not-allowed}input[data-anta][type=number]{appearance:textfield;-moz-appearance:textfield}input[data-anta][type=number]::-webkit-inner-spin-button,input[data-anta][type=number]::-webkit-outer-spin-button{appearance:none;margin:0}input[data-anta][type=file]{--native-file-block-size: 28px;--native-file-padding-block: 4px;--native-file-font-size: 15px;--native-file-line-height: 20px;box-sizing:border-box;min-block-size:var(--native-file-block-size);margin:0;padding:0;border:0;color:var(--text-2);color-scheme:light;font-family:var(--sans-serif);font-size:var(--native-file-font-size);font-weight:400;font-feature-settings:"ss02","ss05","tnum";font-variation-settings:"wdth" 100,"slnt" 0,"ital" 0;line-height:var(--native-file-line-height)}.dark input[data-anta][type=file]{color-scheme:dark}input[data-anta][type=file]::file-selector-button{box-sizing:border-box;min-block-size:var(--native-file-block-size);margin:0 8px 0 0;padding:var(--native-file-padding-block) 9px;border:0;border-radius:4px;color:var(--text-2);background:color-mix(in oklch,var(--text-1) 10%,transparent);box-shadow:inset 0 0 1px color-mix(in oklch,currentColor,transparent 90%);font:inherit;font-weight:450;letter-spacing:.05ch;line-height:var(--native-file-line-height);cursor:pointer;transition:color .15s ease-out,background-color .15s ease-out}@media(hover:hover)and (pointer:fine){input[data-anta][type=file]:not(:disabled):hover::file-selector-button{color:var(--text-1);background:color-mix(in oklch,var(--text-1) 15%,transparent)}}input[data-anta][type=file]:not(:disabled):active::file-selector-button{color:var(--text-1);background:color-mix(in oklch,var(--text-1) 20%,transparent)}input[data-anta][type=file]:focus-visible{outline:1px solid var(--focus-ring);outline-offset:1px}input[data-anta][type=file]:disabled{color:var(--text-4);cursor:not-allowed}input[data-anta][type=file]:disabled::file-selector-button{color:var(--text-4);background:color-mix(in oklch,var(--text-1) 4%,var(--bg-1));cursor:not-allowed}select[data-anta]{--native-field-block-size: 28px;--native-field-padding-block: 4px;--native-field-font-size: 15px;--native-field-line-height: 20px;--native-field-round: 4px;--native-field-border: var(--border-2);--native-select-picker-bg: color-mix(in oklch, var(--bg-1) 90%, transparent);--native-select-picker-radius: var(--radius-md, 8px);--native-select-picker-border: 1px solid var(--border-3);--native-select-picker-shadow: 0 2px 6px color-mix(in oklch, var(--text-1) 8%, transparent), 0 8px 24px color-mix(in oklch, var(--text-1) 10%, transparent);--native-select-option-color: var(--text-2);--native-select-option-hover: 5%;--native-select-option-active: 8%;--native-select-option-selected: 8%;--native-select-option-padding-x: 8px;--native-select-option-padding-y: 6px;box-sizing:border-box;block-size:var(--native-field-block-size);margin:0;padding-block:var(--native-field-padding-block);padding-inline:7px;border:0;border-radius:var(--native-field-round);outline:0;background:var(--bg-1);box-shadow:inset 0 0 0 .5px var(--native-field-border);color:var(--text-1);color-scheme:light;font-family:var(--sans-serif);font-size:var(--native-field-font-size);font-weight:400;font-feature-settings:"ss02","ss05","tnum";font-variation-settings:"wdth" 100,"slnt" 0,"ital" 0;line-height:var(--native-field-line-height);transition:box-shadow .12s ease}.dark select[data-anta]{--native-select-picker-bg: color-mix(in oklch, var(--bg-1) 78%, transparent);--native-select-picker-shadow: 0 2px 8px color-mix(in oklch, black 50%, transparent), 0 12px 32px color-mix(in oklch, black 40%, transparent), inset 0 0 0 1px color-mix(in oklch, white 8%, transparent);color-scheme:dark}@media(hover:hover)and (pointer:fine){select[data-anta]:not(:disabled):hover{box-shadow:inset 0 0 0 1px var(--native-field-border)}}select[data-anta]:focus{box-shadow:inset 0 0 0 1px var(--native-field-border);outline:1px solid var(--focus-ring);outline-offset:1px}select[data-anta]:disabled{background:color-mix(in oklch,var(--text-1) 4%,var(--bg-1));box-shadow:inset 0 0 0 .5px color-mix(in oklch,var(--text-1) 15%,transparent);color:var(--text-4);cursor:not-allowed}@media(forced-colors:active){input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week]),select[data-anta]{border:1px solid ButtonBorder}}input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week])[data-anta-size=small],select[data-anta][data-anta-size=small]{--native-field-block-size: 24px;--native-field-padding-block: 2px;--native-field-font-size: 13px;--native-field-line-height: 16px}input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week])[data-anta-size=large],select[data-anta][data-anta-size=large]{--native-field-block-size: 32px;--native-field-padding-block: 5px;--native-field-font-size: 17px;--native-field-line-height: 22px}input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week])[round],select[data-anta][round]{--native-field-round: attr(round type(<length>), 999px)}input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week])[tone]:not([tone=""]){--native-field-tone: attr(tone type(<color>), var(--border-2));--native-field-border: oklch(from var(--native-field-tone) .7 calc(c*.8) h)}.dark input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week])[tone]:not([tone=""]){--native-field-border: oklch(from var(--native-field-tone) .5 calc(c*.8) h)}@supports (appearance: base-select){select[data-anta],select[data-anta]::picker(select){appearance:base-select;-webkit-appearance:base-select}select[data-anta]{padding:0}select[data-anta]>button{box-sizing:border-box;display:flex;align-items:center;gap:4px;inline-size:100%;min-block-size:var(--native-field-block-size);padding-block:var(--native-field-padding-block);padding-inline:7px;border:0;background:transparent;color:inherit;cursor:pointer;font:inherit;text-align:start}select[data-anta]>button>selectedcontent{flex:1;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}select[data-anta]::picker-icon{display:none}select[data-anta]>button>a-icon{margin-inline-start:auto;color:var(--text-3);transition:transform .12s ease}select[data-anta]:open>button>a-icon{transform:rotate(180deg)}select[data-anta]::picker(select){box-sizing:border-box;display:flex;flex-direction:column;gap:1px;margin-block-start:4px;padding:4px;border:var(--native-select-picker-border);border-radius:var(--native-select-picker-radius);background:var(--native-select-picker-bg);box-shadow:var(--native-select-picker-shadow);color:var(--native-select-option-color);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}select[data-anta] option{box-sizing:border-box;min-block-size:28px;padding-block:var(--native-select-option-padding-y);padding-inline:var(--native-select-option-padding-x);border-radius:var(--radius-sm, 4px);background:transparent;color:var(--native-select-option-color);cursor:pointer;font-family:var(--sans-serif);font-feature-settings:"ss02","ss05","tnum";font-size:14px;font-weight:400;font-variation-settings:"wdth" 100,"slnt" 0,"ital" 0;letter-spacing:normal;line-height:16px;text-transform:none;transition:background-color .28s ease-out}select[data-anta] option:is(:hover,:focus-visible){background:color-mix(in oklch,currentColor var(--native-select-option-hover),transparent);transition:background-color 60ms ease-in-out}select[data-anta] option:focus-visible{outline:1px solid var(--focus-ring);outline-offset:1px}select[data-anta] option:active{background:color-mix(in oklch,currentColor var(--native-select-option-active),transparent);transition:none}select[data-anta] option:checked{background:color-mix(in oklch,currentColor var(--native-select-option-selected),transparent);transition:background-color .28s ease-out}select[data-anta] option:disabled{color:var(--text-5);cursor:default}select[data-anta] optgroup{display:flex;flex-direction:column;gap:1px;color:var(--text-5);font-family:var(--sans-serif);font-size:.75em;font-weight:600;letter-spacing:.06em;text-transform:uppercase}}}

package/dist/elements/a-input.js

@@ -73,7 +73,7 @@ const SHADOW_STYLE = `
     transition: box-shadow 120ms ease;
   }
   :host([multiline]) .field { align-items: stretch; }
-  :host([status]) .field { --_bw: 1px; }
+  :host([status]:not([status="neutral"])) .field { --_bw: 1px; }
   :host([size="small"]) { --_fs: 13px; --_lh: 16px; }
   :host([size="large"]) { --_fs: 17px; --_lh: 22px; }
   :host([size="small"]) .field { min-height: 24px; }

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

@@ -98,8 +98,7 @@ export declare class AMenuElement extends HTMLElementBase {
      *  a multi-select lands on its topmost checked row. */
     private seatInitialFocus;
     /** Scroll THIS menu's body so `item` sits inside the visible scroll viewport,
-     *  touching only the internal `.scroll` container — never the document, whose
-     *  scroll would trip the anchor-scrolled-out dismiss. No-op for a menu short
+     *  touching only the internal `.scroll` container. No-op for a menu short
      *  enough not to scroll. */
     private scrollItemIntoView;
     /** Fade the scrolling body's content into the top / bottom edges — but only on the
@@ -169,12 +168,6 @@ export declare class AMenuElement extends HTMLElementBase {
      *  mutates deep in its subtree, not this menu's direct children, so it won't
      *  spuriously reset the cursor. */
     private startComboObserver;
-    /** Watch the root trigger and dismiss the system once it scrolls out of the
-     *  spot it held at open (see trackPosition). Deferred a frame so the trigger's
-     *  post-open layout has settled before the rect is snapshotted; guarded in case
-     *  the menu closed in between. Tracks the root anchor only — submenus ride
-     *  inside it, so if the root anchor goes, the whole system should go. */
-    private armPositionTracker;
     /** Apply CLOSE to the DOM (no event). Closes this menu and everything stacked
      *  above it (its submenus). */
     private hide;
@@ -205,8 +198,10 @@ export declare class AMenuElement extends HTMLElementBase {
     /**
      * Fully declarative close contract — decided synchronously from the DOM, so
      * it never depends on the consumer's click handler (which in a worker-thread
-     * runtime can't `preventDefault` on the UI thread). The menu never
-     * stops/prevents the click, so the consumer's selection handler always runs.
+     * runtime can't `preventDefault` on the UI thread). A menu-item / `data-menu-close`
+     * activation stops the click at the surface so it doesn't leak to an ancestor (a
+     * clickable row the menu sits in); it never prevents it, so item handlers and link
+     * navigation still run. Other clicks bubble unless `stop-propagation` opts in.
      *
      * Walk the click's composedPath outward to the surface; the NEAREST marker
      * wins:

package/dist/elements/a-menu.js

@@ -7,14 +7,13 @@ const MIN_HEIGHT = 96;
 const SUBMENU_OPEN_DELAY = 130;
 const SUBMENU_CLOSE_DELAY = 130;
 const TYPEAHEAD_RESET = 500;
-const ANCHOR_VISIBLE_RATIO = 0.5;
 const SELF_ACTIVATING = 'a-button, button, a[href], input[type="button"], input[type="submit"], input[type="reset"], [role="button"]';
 const EDITABLE_FIELD = "input:not([readonly]), textarea:not([readonly]), a-input:not([readonly]), a-input-time:not([readonly])";
+const DECLARATIVE_TRIGGER = "[data-dialog-open], [data-dialog-close], [data-toast-dismiss], [data-banner-dismiss]";
 const openStack = [];
 let docBound = false;
 let boundDoc = null;
 let boundView = null;
-let removePosTracker = null;
 function bindDocListeners(doc, view) {
   if (docBound) return;
   doc.addEventListener("pointerdown", onDocPointerDown, true);
@@ -33,31 +32,10 @@ function unbindDocListeners() {
   boundDoc?.removeEventListener("keyup", onDocKeyUp, true);
   boundDoc?.removeEventListener("contextmenu", onDocContextMenu, true);
   boundView?.removeEventListener("resize", onResize);
-  removePosTracker?.();
-  removePosTracker = null;
   boundDoc = null;
   boundView = null;
   docBound = false;
 }
-function trackPosition(el, onEscape) {
-  if (typeof IntersectionObserver === "undefined") return () => {
-  };
-  const doc = el.ownerDocument;
-  const rect = el.getBoundingClientRect();
-  const vw = doc.documentElement.clientWidth;
-  const vh = doc.documentElement.clientHeight;
-  const rootMargin = `${-rect.top}px ${-(vw - rect.right)}px ${-(vh - rect.bottom)}px ${-rect.left}px`;
-  const win = doc.defaultView;
-  const root = win && win !== win.top ? doc.documentElement : null;
-  const io = new IntersectionObserver(
-    ([entry]) => {
-      if (!entry.isIntersecting) onEscape();
-    },
-    { root, rootMargin, threshold: ANCHOR_VISIBLE_RATIO }
-  );
-  io.observe(el);
-  return () => io.disconnect();
-}
 function pathHitsMenus(e, primaryClick = false) {
   const path = e.composedPath();
   for (const m of openStack) {
@@ -138,7 +116,7 @@ function handleIntersection(entries) {
 }
 const lazyObserver = typeof IntersectionObserver !== "undefined" ? new IntersectionObserver(handleIntersection, { root: null, rootMargin: "0px", threshold: 0 }) : null;
 class AMenuElement extends HTMLElementBase {
-  static observedAttributes = ["placement", "context", "coord", "offset", "nohover", "state"];
+  static observedAttributes = ["placement", "context", "coord", "offset", "nohover", "state", "stop-propagation"];
   /** Shadow-internal popover surface — the only thing we ever mutate. */
   surface;
   /** The scrolling body inside the surface (holds the items). */
@@ -166,6 +144,21 @@ class AMenuElement extends HTMLElementBase {
   // event, which the reactive layer reflects onto the field's `aria-activedescendant`.
   activeItem = null;
   comboObserver;
+  // An open menu follows its anchor vertically through scrolling, transforms, and
+  // layout shifts. Those movements do not all produce a DOM observer callback, so
+  // this frame is active only while the menu is visible.
+  #anchorTrackingFrame;
+  #lastAnchorRect;
+  // Vertical-follow baseline captured on each full position(): the frozen
+  // horizontal offset and the gap to the anchor's top. Tracking translates to hold
+  // this gap as the anchor moves; it never re-flips or chases the anchor sideways.
+  #followLeft;
+  #followGap;
+  // Opt-in event containment (`stop-propagation`): event types whose bubbling out
+  // of the surface is suppressed. Selecting an item is always contained (see
+  // onSurfaceClick); this is the broad, configurable lever on top of that.
+  #stopEvents = /* @__PURE__ */ new Set();
+  #stopHandler = (e) => e.stopPropagation();
   // The vertical side chosen at open (true = flipped above the anchor). A re-anchor
   // (filtering changes height) keeps this side rather than re-deciding — a shrunk
   // menu shouldn't hop back under the trigger.
@@ -306,6 +299,7 @@ class AMenuElement extends HTMLElementBase {
   }
   connectedCallback() {
     ensureMenuItemKeyListener(this.doc);
+    this.#syncStopPropagation();
     const anchor = this.triggerAnchor;
     if (anchor) {
       anchorToMenu.set(anchor, this);
@@ -329,6 +323,10 @@ class AMenuElement extends HTMLElementBase {
       this.syncState();
       return;
     }
+    if (name === "stop-propagation") {
+      this.#syncStopPropagation();
+      return;
+    }
     if (this.listening) {
       this.teardownListeners();
       this.setupListeners();
@@ -471,8 +469,7 @@ class AMenuElement extends HTMLElementBase {
     if (viaKeyboard) (selected ?? items[0])?.focus({ preventScroll: true });
   }
   /** Scroll THIS menu's body so `item` sits inside the visible scroll viewport,
-   *  touching only the internal `.scroll` container — never the document, whose
-   *  scroll would trip the anchor-scrolled-out dismiss. No-op for a menu short
+   *  touching only the internal `.scroll` container. No-op for a menu short
    *  enough not to scroll. */
   scrollItemIntoView(item) {
     const c = this.scrollEl;
@@ -696,7 +693,6 @@ class AMenuElement extends HTMLElementBase {
     openStack.push(this);
     if (wasEmpty) {
       bindDocListeners(this.doc, this.view);
-      this.armPositionTracker();
     }
     const search = this.#searchField;
     if (search) {
@@ -722,20 +718,6 @@ class AMenuElement extends HTMLElementBase {
     });
     this.comboObserver.observe(this, { childList: true });
   }
-  /** Watch the root trigger and dismiss the system once it scrolls out of the
-   *  spot it held at open (see trackPosition). Deferred a frame so the trigger's
-   *  post-open layout has settled before the rect is snapshotted; guarded in case
-   *  the menu closed in between. Tracks the root anchor only — submenus ride
-   *  inside it, so if the root anchor goes, the whole system should go. */
-  armPositionTracker() {
-    const anchor = this.triggerAnchor;
-    if (!anchor) return;
-    this.view.requestAnimationFrame(() => {
-      if (!this._shown || openStack[0] !== this) return;
-      removePosTracker?.();
-      removePosTracker = trackPosition(anchor, () => dismiss());
-    });
-  }
   /** Apply CLOSE to the DOM (no event). Closes this menu and everything stacked
    *  above it (its submenus). */
   hide() {
@@ -765,6 +747,7 @@ class AMenuElement extends HTMLElementBase {
     this.reflectOpen(true);
     this.hideAnchorTooltip();
     this.position(coord, instant);
+    this.#startAnchorTracking(coord);
   }
   /** Dismiss any tooltip on the trigger as the menu opens, so the trigger's
    *  hover tooltip doesn't linger over the just-opened menu. `a-tooltip.hide()`
@@ -776,6 +759,7 @@ class AMenuElement extends HTMLElementBase {
   }
   /** Shadow-only hide. */
   _doHide() {
+    this.#stopAnchorTracking();
     if (this.surface.isConnected && this._shown) this.surface.hidePopover();
     this._shown = false;
     this.reflectOpen(false);
@@ -798,6 +782,65 @@ class AMenuElement extends HTMLElementBase {
     }
   }
   /* ============================ positioning ============================ */
+  /** Follow an anchor-positioned menu on the vertical axis as its target moves
+   *  (scroll, transform, layout shift). The side chosen at open never flips and the
+   *  horizontal position stays put — a re-flip would fight the open-time placement,
+   *  and chasing the anchor sideways isn't wanted. Coordinate menus keep their
+   *  opening point. */
+  #startAnchorTracking(coord) {
+    this.#stopAnchorTracking();
+    if (coord || this.#isCoord) return;
+    const anchor = this.triggerAnchor;
+    if (!anchor) return;
+    this.#lastAnchorRect = this.#anchorRectValues(anchor);
+    const track = () => {
+      if (!this._shown) {
+        this.#anchorTrackingFrame = void 0;
+        return;
+      }
+      const currentAnchor = this.triggerAnchor;
+      if (!currentAnchor) {
+        this.#anchorTrackingFrame = void 0;
+        return;
+      }
+      const next = this.#anchorRectValues(currentAnchor);
+      if (!this.#sameAnchorRect(next)) {
+        this.#lastAnchorRect = next;
+        this.#followVertically(currentAnchor);
+      }
+      this.#anchorTrackingFrame = this.view.requestAnimationFrame(track);
+    };
+    this.#anchorTrackingFrame = this.view.requestAnimationFrame(track);
+  }
+  /** Hold the vertical gap captured at the last full position() as the anchor
+   *  moves — a pure translate, so no reflow. Horizontal stays frozen and the side
+   *  never flips; the menu clamps within the viewport. */
+  #followVertically(anchor) {
+    if (this.#followGap === void 0 || this.#followLeft === void 0) return;
+    const box = this.surface.getBoundingClientRect();
+    let top = anchorRect(anchor).top + this.#followGap;
+    top = Math.min(top, this.view.innerHeight - box.height - MARGIN);
+    top = Math.max(MARGIN, top);
+    this.surface.style.transform = `translate(${this.#followLeft}px, ${Math.round(top)}px)`;
+    this.updateScrollFade();
+  }
+  #stopAnchorTracking() {
+    if (this.#anchorTrackingFrame !== void 0) {
+      this.view.cancelAnimationFrame(this.#anchorTrackingFrame);
+      this.#anchorTrackingFrame = void 0;
+    }
+    this.#lastAnchorRect = void 0;
+    this.#followLeft = void 0;
+    this.#followGap = void 0;
+  }
+  #anchorRectValues(anchor) {
+    const { left, top, right, bottom, width, height } = anchorRect(anchor);
+    return [left, top, right, bottom, width, height];
+  }
+  #sameAnchorRect(next) {
+    const prev = this.#lastAnchorRect;
+    return !!prev && prev.length === next.length && prev.every((value, index) => value === next[index]);
+  }
   position(coord, sync = false, reanchor = false) {
     const run = () => {
       if (!this._shown) return;
@@ -879,8 +922,14 @@ class AMenuElement extends HTMLElementBase {
           top = Math.max(MARGIN, top);
         }
       }
-      surface.style.transform = `translate(${Math.round(left)}px, ${Math.round(top)}px)`;
+      const appliedLeft = Math.round(left);
+      const appliedTop = Math.round(top);
+      surface.style.transform = `translate(${appliedLeft}px, ${appliedTop}px)`;
       this.updateScrollFade();
+      if (!coord && !this.#isCoord && this.triggerAnchor) {
+        this.#followLeft = appliedLeft;
+        this.#followGap = appliedTop - anchorRect(this.triggerAnchor).top;
+      }
     };
     if (sync) run();
     else requestAnimationFrame(run);
@@ -889,8 +938,10 @@ class AMenuElement extends HTMLElementBase {
   /**
    * Fully declarative close contract — decided synchronously from the DOM, so
    * it never depends on the consumer's click handler (which in a worker-thread
-   * runtime can't `preventDefault` on the UI thread). The menu never
-   * stops/prevents the click, so the consumer's selection handler always runs.
+   * runtime can't `preventDefault` on the UI thread). A menu-item / `data-menu-close`
+   * activation stops the click at the surface so it doesn't leak to an ancestor (a
+   * clickable row the menu sits in); it never prevents it, so item handlers and link
+   * navigation still run. Other clicks bubble unless `stop-propagation` opts in.
    *
    * Walk the click's composedPath outward to the surface; the NEAREST marker
    * wins:
@@ -900,6 +951,15 @@ class AMenuElement extends HTMLElementBase {
    *   - nothing → keep open (plain custom content doesn't dismiss).
    */
   onSurfaceClick = (e) => {
+    let contain = false;
+    let exemptTrigger = false;
+    for (const node of e.composedPath()) {
+      if (node === this.surface) break;
+      if (!(node instanceof Element)) continue;
+      if (node.matches(DECLARATIVE_TRIGGER)) exemptTrigger = true;
+      if (node instanceof AMenuItemElement || node.hasAttribute("data-menu-close")) contain = true;
+    }
+    if (contain && !exemptTrigger) e.stopPropagation();
     for (const node of e.composedPath()) {
       if (node === this.surface) break;
       if (node instanceof AMenuItemElement) {
@@ -938,6 +998,25 @@ class AMenuElement extends HTMLElementBase {
     const root = openStack[0] ?? this;
     root.requestClose(e);
   }
+  /** Event types the `stop-propagation` attribute contains at the surface. A bare
+   *  or empty attribute defaults to `click`; a value is a space / comma list. */
+  #parseStopEvents() {
+    if (!this.hasAttribute("stop-propagation")) return /* @__PURE__ */ new Set();
+    const raw = (this.getAttribute("stop-propagation") ?? "").trim();
+    return new Set(raw ? raw.split(/[\s,]+/) : ["click"]);
+  }
+  /** Reconcile the surface's containment listeners with the `stop-propagation`
+   *  attribute. Each listed type gets a bubble listener that stops it at the
+   *  surface, so it never reaches an ancestor / document handler. Selecting an item
+   *  is already contained by onSurfaceClick; this is the broad, opt-in lever. */
+  #syncStopPropagation() {
+    const next = this.#parseStopEvents();
+    for (const type of this.#stopEvents)
+      if (!next.has(type)) this.surface.removeEventListener(type, this.#stopHandler);
+    for (const type of next)
+      if (!this.#stopEvents.has(type)) this.surface.addEventListener(type, this.#stopHandler);
+    this.#stopEvents = next;
+  }
   /* ============================ keyboard ============================ */
   /** Called by the coordinator on the topmost open menu. Handles navigation;
    *  roving Enter / Space activation is `<a-menu-item>`'s own delegated keyup

package/dist/elements/a-radio.css

@@ -1 +1 @@
-@layer anta{a-radio{--radio-control-size: 16px;--radio-border-width: 1.5px;--radio-dot-size: 6px;--_radio-dot-adjust: 0px;--radio-gap: 8px;--radio-bg: var(--bg-1);--radio-tone-source: var(--anta-seed-neutral);--_tone-l-rest: .6;--_tone-l-hover: .45;--_tone-l-active: .4;--radio-bg-selected: oklch(from var(--radio-tone-source) var(--_tone-l-rest) c h);--radio-bg-selected-hover: oklch(from var(--radio-tone-source) var(--_tone-l-hover) c h);--radio-bg-selected-active: oklch(from var(--radio-tone-source) var(--_tone-l-active) c h);--radio-border-neutral: var(--border-3);--radio-border: var(--radio-border-neutral);--radio-border-hover: var(--border-2);--radio-border-active: var(--border-1);--radio-dot: #f6f4f6;--radio-dot-disabled: #c1b9c1;--radio-bg-disabled: color-mix(in oklch, #44374b 10%, transparent);--radio-border-disabled: color-mix(in oklch, #44374b 10%, transparent);--radio-label-color: var(--text-2);--radio-label-color-disabled: var(--text-4);--radio-hint-color: var(--text-3);--radio-label-fs: 15px;--radio-label-lh: 20px;--radio-hint-fs: 14px;--radio-hint-lh: 17px;display:inline-grid;grid-template-columns:auto 1fr;align-items:start;column-gap:var(--radio-gap);cursor:pointer;user-select:none;-webkit-user-drag:none;vertical-align:middle;outline:none;color:var(--radio-label-color);font-family:var(--sans-serif);font-size:var(--radio-label-fs);line-height:var(--radio-label-lh);font-feature-settings:"ss02","ss05","tnum";&:before{content:"";grid-column:1;grid-row:1 / -1;align-self:start;margin-block-start:calc((var(--radio-label-lh) - var(--radio-control-size)) / 2);box-sizing:border-box;inline-size:var(--radio-control-size);block-size:var(--radio-control-size);border-radius:50%;background:var(--radio-bg);border:var(--radio-border-width) solid var(--radio-border);transition:background-color .15s ease-out,border-color .15s ease-out}&:after{content:"";grid-column:1;grid-row:1 / -1;align-self:start;justify-self:center;margin-block-start:calc((var(--radio-label-lh) - (var(--radio-dot-size) - var(--_radio-dot-adjust))) / 2);inline-size:calc(var(--radio-dot-size) - var(--_radio-dot-adjust));block-size:calc(var(--radio-dot-size) - var(--_radio-dot-adjust));border-radius:50%;background:var(--radio-dot);transform:scale(0);transition:transform .12s ease-out;pointer-events:none}@media(hover:hover)and (pointer:fine){&:not([disabled]):hover:before{border-color:var(--radio-border-hover);transition:background-color 75ms ease-in,border-color 75ms ease-in}&:not([disabled]):hover:state(selected):before{background:var(--radio-bg-selected-hover);border-color:var(--radio-bg-selected-hover)}}&:not([disabled]):active:before{border-color:var(--radio-border-active);transition:background-color 50ms linear,border-color 50ms linear}&:not([disabled]):active:state(selected):before{background:var(--radio-bg-selected-active);border-color:var(--radio-bg-selected-active)}&:state(selected){&:before{background:var(--radio-bg-selected);border-color:var(--radio-bg-selected)}&:after{transform:scale(1)}}&:focus-visible:before{outline:1px solid var(--focus-ring);outline-offset:1px}&[disabled]{cursor:not-allowed;color:var(--radio-label-color-disabled);&:before{background:var(--radio-bg-disabled);border-color:var(--radio-border-disabled);transition:none}&:state(selected):after{background:var(--radio-dot-disabled)}a-radio-hint{color:var(--radio-label-color-disabled)}}&[size=small]{--radio-control-size: 14px;--radio-dot-size: 5px;--radio-gap: 6px;--radio-label-fs: 13px;--radio-label-lh: 16px;--radio-hint-fs: 12px;--radio-hint-lh: 14px}&[size=large]{--radio-control-size: 18px;--radio-dot-size: 7px;--radio-label-fs: 17px;--radio-label-lh: 22px;--radio-hint-fs: 16px;--radio-hint-lh: 21px}}a-radio-label,a-radio-hint{display:block;grid-column:2;min-width:0}a-radio-hint{color:var(--radio-hint-color);font-size:var(--radio-hint-fs);line-height:var(--radio-hint-lh);margin-block-start:2px}a-radio-group:focus-visible a-radio:state(selected):before{outline:1px solid var(--focus-ring);outline-offset:1px}a-radio[tone]:not([tone=""],[tone=neutral]),a-radio[tone-selected]:not([tone-selected=""],[tone-selected=neutral]),a-radio-group[tone]:not([tone=""],[tone=neutral]) a-radio:not([tone]),a-radio-group[tone-selected]:not([tone-selected=""],[tone-selected=neutral]) a-radio:not([tone-selected]){--_tone-l-rest: .5;--_tone-l-hover: .45;--_tone-l-active: .4}a-radio[tone=brand],a-radio[tone-selected=brand],a-radio-group[tone=brand] a-radio:not([tone]),a-radio-group[tone-selected=brand] a-radio:not([tone-selected]){--radio-tone-source: var(--anta-seed-brand)}a-radio[tone=info],a-radio[tone-selected=info],a-radio-group[tone=info] a-radio:not([tone]),a-radio-group[tone-selected=info] a-radio:not([tone-selected]){--radio-tone-source: var(--anta-seed-info)}a-radio[tone=success],a-radio[tone-selected=success],a-radio-group[tone=success] a-radio:not([tone]),a-radio-group[tone-selected=success] a-radio:not([tone-selected]){--radio-tone-source: var(--anta-seed-success)}a-radio[tone=warning],a-radio[tone-selected=warning],a-radio-group[tone=warning] a-radio:not([tone]),a-radio-group[tone-selected=warning] a-radio:not([tone-selected]){--radio-tone-source: var(--anta-seed-warning)}a-radio[tone=critical],a-radio[tone-selected=critical],a-radio-group[tone=critical] a-radio:not([tone]),a-radio-group[tone-selected=critical] a-radio:not([tone-selected]){--radio-tone-source: var(--anta-seed-critical)}a-radio[tone=neutral],a-radio[tone-selected=neutral],a-radio-group[tone=neutral] a-radio:not([tone]),a-radio-group[tone-selected=neutral] a-radio:not([tone-selected]){--radio-tone-source: var(--anta-seed-neutral)}a-radio[tone]:not([tone=""],[tone=neutral]),a-radio-group[tone]:not([tone=""],[tone=neutral]) a-radio:not([tone]){--radio-bg: oklch(from var(--radio-tone-source) .99 calc(c*.03) h);--_radio-border-base: color-mix(in oklch, var(--radio-bg-selected) 70%, var(--radio-border-neutral));--radio-border: oklch(from var(--_radio-border-base) calc(l + .17) c h);--radio-border-hover: oklch(from var(--_radio-border-base) calc(l + .1) c h);--radio-border-active: var(--_radio-border-base)}a-radio[tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]){--radio-tone-source: attr(tone type(<color>), transparent)}a-radio[tone-selected]:not([tone-selected=""],[tone-selected=brand],[tone-selected=neutral],[tone-selected=info],[tone-selected=success],[tone-selected=warning],[tone-selected=critical]){--radio-tone-source: attr(tone-selected type(<color>), transparent)}.dark a-radio{--_radio-dot-adjust: 1px;&:after{box-shadow:0 0 1px 1px color-mix(in oklch,black 40%,transparent)}--radio-border-neutral: var(--border-3);--radio-border-hover: var(--border-2);--radio-border-active: var(--border-1);--radio-dot: #ece9ec;--radio-dot-disabled: #534c57;--radio-bg-disabled: color-mix(in oklch, #e4d1ef 10%, transparent);--radio-border-disabled: color-mix(in oklch, #e4d1ef 10%, transparent);--_tone-l-rest: .42;--_tone-l-hover: .45;--_tone-l-active: .5}.dark a-radio[tone]:not([tone=""],[tone=neutral]),.dark a-radio[tone-selected]:not([tone-selected=""],[tone-selected=neutral]),.dark a-radio-group[tone]:not([tone=""],[tone=neutral]) a-radio:not([tone]),.dark a-radio-group[tone-selected]:not([tone-selected=""],[tone-selected=neutral]) a-radio:not([tone-selected]){--_tone-l-rest: .45;--_tone-l-hover: .5;--_tone-l-active: .57}.dark a-radio[tone]:not([tone=""],[tone=neutral]),.dark a-radio-group[tone]:not([tone=""],[tone=neutral]) a-radio:not([tone]){--radio-bg: oklch(from var(--radio-tone-source) .15 calc(c*.18) h);--radio-border: var(--_radio-border-base);--radio-border-hover: oklch(from var(--_radio-border-base) calc(l + .1) c h);--radio-border-active: oklch(from var(--_radio-border-base) calc(l + .17) c h)}label:has(>input[data-anta][type=radio]){display:inline-flex;align-items:center;gap:8px;color:var(--text-2);font-family:var(--sans-serif);font-feature-settings:"ss02","ss05","tnum";font-size:15px;line-height:20px}input[data-anta][type=radio]{--native-choice-size: 16px;--native-choice-dot-core: 3px;--native-choice-dot-edge: 3.5px;--native-choice-bg: var(--bg-1);--native-choice-border-neutral: var(--border-3);--native-choice-border: var(--native-choice-border-neutral);--native-choice-border-hover: var(--border-2);--native-choice-border-active: var(--border-1);--native-choice-tone-source: var(--anta-seed-neutral);--_native-choice-l-rest: .6;--_native-choice-l-hover: .45;--_native-choice-l-active: .4;--native-choice-selected: oklch(from var(--native-choice-tone-source) var(--_native-choice-l-rest) c h);--native-choice-selected-hover: oklch(from var(--native-choice-tone-source) var(--_native-choice-l-hover) c h);--native-choice-selected-active: oklch(from var(--native-choice-tone-source) var(--_native-choice-l-active) c h);--native-choice-dot: #f6f4f6;box-sizing:border-box;flex:0 0 var(--native-choice-size);inline-size:var(--native-choice-size);block-size:var(--native-choice-size);margin:0;appearance:none;-webkit-appearance:none;border:1.5px solid var(--native-choice-border);border-radius:50%;background-color:var(--native-choice-bg);cursor:pointer;vertical-align:middle;transition:background-color .15s ease-out,border-color .15s ease-out}label:has(>input[data-anta][type=radio][size=small]){gap:6px;font-size:13px;line-height:16px}label:has(>input[data-anta][type=radio][size=large]){font-size:17px;line-height:22px}input[data-anta][type=radio][size=small]{--native-choice-size: 14px;--native-choice-dot-core: 2.5px;--native-choice-dot-edge: 3px}input[data-anta][type=radio][size=large]{--native-choice-size: 18px;--native-choice-dot-core: 3.5px;--native-choice-dot-edge: 4px}input[data-anta][type=radio][tone]:not([tone=""],[tone=neutral]),input[data-anta][type=radio][tone-selected]:not([tone-selected=""],[tone-selected=neutral]){--_native-choice-l-rest: .5;--_native-choice-l-hover: .45;--_native-choice-l-active: .4}input[data-anta][type=radio][tone=brand],input[data-anta][type=radio][tone-selected=brand]{--native-choice-tone-source: var(--anta-seed-brand)}input[data-anta][type=radio][tone=info],input[data-anta][type=radio][tone-selected=info]{--native-choice-tone-source: var(--anta-seed-info)}input[data-anta][type=radio][tone=success],input[data-anta][type=radio][tone-selected=success]{--native-choice-tone-source: var(--anta-seed-success)}input[data-anta][type=radio][tone=warning],input[data-anta][type=radio][tone-selected=warning]{--native-choice-tone-source: var(--anta-seed-warning)}input[data-anta][type=radio][tone=critical],input[data-anta][type=radio][tone-selected=critical]{--native-choice-tone-source: var(--anta-seed-critical)}input[data-anta][type=radio][tone=neutral],input[data-anta][type=radio][tone-selected=neutral]{--native-choice-tone-source: var(--anta-seed-neutral)}input[data-anta][type=radio][tone]:not([tone=""],[tone=neutral]){--native-choice-bg: oklch(from var(--native-choice-tone-source) .99 calc(c*.03) h);--_native-choice-border-base: color-mix(in oklch, var(--native-choice-selected) 70%, var(--native-choice-border-neutral));--native-choice-border: oklch(from var(--_native-choice-border-base) calc(l + .17) c h);--native-choice-border-hover: oklch(from var(--_native-choice-border-base) calc(l + .1) c h);--native-choice-border-active: var(--_native-choice-border-base)}input[data-anta][type=radio][tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]){--native-choice-tone-source: attr(tone type(<color>), var(--anta-seed-neutral))}input[data-anta][type=radio][tone-selected]:not([tone-selected=""],[tone-selected=brand],[tone-selected=neutral],[tone-selected=info],[tone-selected=success],[tone-selected=warning],[tone-selected=critical]){--native-choice-tone-source: attr(tone-selected type(<color>), var(--anta-seed-neutral))}@media(hover:hover)and (pointer:fine){input[data-anta][type=radio]:not(:disabled):hover{border-color:var(--native-choice-border-hover)}input[data-anta][type=radio]:not(:disabled):hover:checked{border-color:var(--native-choice-selected-hover);background:radial-gradient(circle,var(--native-choice-dot) 0 var(--native-choice-dot-core),var(--native-choice-selected-hover) var(--native-choice-dot-edge))}}input[data-anta][type=radio]:not(:disabled):active{border-color:var(--native-choice-border-active)}input[data-anta][type=radio]:not(:disabled):active:checked{border-color:var(--native-choice-selected-active);background:radial-gradient(circle,var(--native-choice-dot) 0 var(--native-choice-dot-core),var(--native-choice-selected-active) var(--native-choice-dot-edge))}input[data-anta][type=radio]:checked{border-color:var(--native-choice-selected);background:radial-gradient(circle,var(--native-choice-dot) 0 var(--native-choice-dot-core),var(--native-choice-selected) var(--native-choice-dot-edge))}input[data-anta][type=radio]:focus-visible{outline:1px solid var(--focus-ring);outline-offset:1px}input[data-anta][type=radio]:disabled{border-color:color-mix(in oklch,var(--text-1) 10%,transparent);background-color:color-mix(in oklch,var(--text-1) 10%,transparent);cursor:not-allowed}input[data-anta][type=radio]:disabled:checked{border-color:color-mix(in oklch,var(--text-1) 10%,transparent);background:radial-gradient(circle,var(--text-4) 0 var(--native-choice-dot-core),color-mix(in oklch,var(--text-1) 10%,transparent) var(--native-choice-dot-edge))}.dark input[data-anta][type=radio]{--_native-choice-l-rest: .42;--_native-choice-l-hover: .45;--_native-choice-l-active: .5;--native-choice-dot: #ece9ec}.dark input[data-anta][type=radio][tone]:not([tone=""],[tone=neutral]),.dark input[data-anta][type=radio][tone-selected]:not([tone-selected=""],[tone-selected=neutral]){--_native-choice-l-rest: .45;--_native-choice-l-hover: .5;--_native-choice-l-active: .57}.dark input[data-anta][type=radio][tone]:not([tone=""],[tone=neutral]){--native-choice-bg: oklch(from var(--native-choice-tone-source) .15 calc(c*.18) h);--native-choice-border: var(--_native-choice-border-base);--native-choice-border-hover: oklch(from var(--_native-choice-border-base) calc(l + .1) c h);--native-choice-border-active: oklch(from var(--_native-choice-border-base) calc(l + .17) c h)}@media(forced-colors:active){a-radio:state(selected):before{forced-color-adjust:none;background-color:Highlight;border-color:Highlight}a-radio:state(selected):after{forced-color-adjust:none;background-color:HighlightText;box-shadow:none}a-radio[disabled]:before{background-color:Canvas;border-color:GrayText}a-radio[disabled]:state(selected):after{background-color:GrayText}}}
+@layer anta{a-radio{--radio-control-size: 16px;--radio-border-width: 1.5px;--radio-dot-size: 6px;--_radio-dot-adjust: 0px;--radio-gap: 8px;--radio-bg: var(--bg-1);--radio-tone-source: var(--anta-seed-neutral);--radio-off-tone-source: var(--anta-seed-neutral);--_tone-l-rest: .6;--_tone-l-hover: .45;--_tone-l-active: .4;--radio-bg-selected: oklch(from var(--radio-tone-source) var(--_tone-l-rest) c h);--radio-bg-selected-hover: oklch(from var(--radio-tone-source) var(--_tone-l-hover) c h);--radio-bg-selected-active: oklch(from var(--radio-tone-source) var(--_tone-l-active) c h);--radio-border-neutral: var(--border-3);--radio-border: var(--radio-border-neutral);--radio-border-hover: var(--border-2);--radio-border-active: var(--border-1);--radio-dot: #f6f4f6;--radio-dot-disabled: #c1b9c1;--radio-bg-disabled: color-mix(in oklch, #44374b 10%, transparent);--radio-border-disabled: color-mix(in oklch, #44374b 10%, transparent);--radio-label-color: var(--text-2);--radio-label-color-disabled: var(--text-4);--radio-hint-color: var(--text-3);--radio-label-fs: 15px;--radio-label-lh: 20px;--radio-hint-fs: 14px;--radio-hint-lh: 17px;display:inline-grid;grid-template-columns:auto 1fr;align-items:start;column-gap:var(--radio-gap);cursor:pointer;user-select:none;-webkit-user-drag:none;vertical-align:middle;outline:none;color:var(--radio-label-color);font-family:var(--sans-serif);font-size:var(--radio-label-fs);line-height:var(--radio-label-lh);font-feature-settings:"ss02","ss05","tnum";&:before{content:"";grid-column:1;grid-row:1 / -1;align-self:start;margin-block-start:calc((var(--radio-label-lh) - var(--radio-control-size)) / 2);box-sizing:border-box;inline-size:var(--radio-control-size);block-size:var(--radio-control-size);border-radius:50%;background:var(--radio-bg);border:var(--radio-border-width) solid var(--radio-border);transition:background-color .15s ease-out,border-color .15s ease-out}&:after{content:"";grid-column:1;grid-row:1 / -1;align-self:start;justify-self:center;margin-block-start:calc((var(--radio-label-lh) - (var(--radio-dot-size) - var(--_radio-dot-adjust))) / 2);inline-size:calc(var(--radio-dot-size) - var(--_radio-dot-adjust));block-size:calc(var(--radio-dot-size) - var(--_radio-dot-adjust));border-radius:50%;background:var(--radio-dot);transform:scale(0);transition:transform .12s ease-out;pointer-events:none}@media(hover:hover)and (pointer:fine){&:not([disabled]):hover:before{border-color:var(--radio-border-hover);transition:background-color 75ms ease-in,border-color 75ms ease-in}&:not([disabled]):hover:state(selected):before{background:var(--radio-bg-selected-hover);border-color:var(--radio-bg-selected-hover)}}&:not([disabled]):active:before{border-color:var(--radio-border-active);transition:background-color 50ms linear,border-color 50ms linear}&:not([disabled]):active:state(selected):before{background:var(--radio-bg-selected-active);border-color:var(--radio-bg-selected-active)}&:state(selected){&:before{background:var(--radio-bg-selected);border-color:var(--radio-bg-selected)}&:after{transform:scale(1)}}&:focus-visible{outline:none}&:focus-visible:before{outline:1px solid var(--focus-ring);outline-offset:1px}&[disabled]{cursor:not-allowed;color:var(--radio-label-color-disabled);&:before{background:var(--radio-bg-disabled);border-color:var(--radio-border-disabled);transition:none}&:state(selected):after{background:var(--radio-dot-disabled)}a-radio-hint{color:var(--radio-label-color-disabled)}}&[size=small]{--radio-control-size: 14px;--radio-dot-size: 5px;--radio-gap: 6px;--radio-label-fs: 13px;--radio-label-lh: 16px;--radio-hint-fs: 12px;--radio-hint-lh: 14px}&[size=large]{--radio-control-size: 18px;--radio-dot-size: 7px;--radio-label-fs: 17px;--radio-label-lh: 22px;--radio-hint-fs: 16px;--radio-hint-lh: 21px}}a-radio-label,a-radio-hint{display:block;grid-column:2;min-width:0}a-radio-hint{color:var(--radio-hint-color);font-size:var(--radio-hint-fs);line-height:var(--radio-hint-lh);margin-block-start:2px}a-radio-group:focus-visible a-radio:state(selected):before{outline:1px solid var(--focus-ring);outline-offset:1px}a-radio[tone]:not([tone=""],[tone=neutral]),a-radio[tone-selected]:not([tone-selected=""],[tone-selected=neutral]),a-radio-group[tone]:not([tone=""],[tone=neutral]) a-radio:not([tone],[tone-selected]),a-radio-group[tone-selected]:not([tone-selected=""],[tone-selected=neutral]) a-radio:not([tone],[tone-selected]){--_tone-l-rest: .5;--_tone-l-hover: .45;--_tone-l-active: .4}a-radio[tone=brand],a-radio-group[tone=brand] a-radio:not([tone],[tone-selected]){--radio-tone-source: var(--anta-seed-brand);--radio-off-tone-source: var(--anta-seed-brand)}a-radio[tone=info],a-radio-group[tone=info] a-radio:not([tone],[tone-selected]){--radio-tone-source: var(--anta-seed-info);--radio-off-tone-source: var(--anta-seed-info)}a-radio[tone=success],a-radio-group[tone=success] a-radio:not([tone],[tone-selected]){--radio-tone-source: var(--anta-seed-success);--radio-off-tone-source: var(--anta-seed-success)}a-radio[tone=warning],a-radio-group[tone=warning] a-radio:not([tone],[tone-selected]){--radio-tone-source: var(--anta-seed-warning);--radio-off-tone-source: var(--anta-seed-warning)}a-radio[tone=critical],a-radio-group[tone=critical] a-radio:not([tone],[tone-selected]){--radio-tone-source: var(--anta-seed-critical);--radio-off-tone-source: var(--anta-seed-critical)}a-radio[tone=neutral],a-radio-group[tone=neutral] a-radio:not([tone],[tone-selected]){--radio-tone-source: var(--anta-seed-neutral);--radio-off-tone-source: var(--anta-seed-neutral)}a-radio[tone]:not([tone=""],[tone=neutral]),a-radio-group[tone]:not([tone=""],[tone=neutral]) a-radio:not([tone],[tone-selected]){--radio-bg: oklch(from var(--radio-off-tone-source) .99 calc(c*.03) h);--_radio-off-bg-selected: oklch(from var(--radio-off-tone-source) var(--_tone-l-rest) c h);--_radio-border-base: color-mix(in oklch, var(--_radio-off-bg-selected) 70%, var(--radio-border-neutral));--radio-border: oklch(from var(--_radio-border-base) calc(l + .17) c h);--radio-border-hover: oklch(from var(--_radio-border-base) calc(l + .1) c h);--radio-border-active: var(--_radio-border-base)}a-radio[tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]){--radio-tone-source: attr(tone type(<color>), transparent);--radio-off-tone-source: attr(tone type(<color>), transparent)}a-radio-group[tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]){--radio-tone-source: attr(tone type(<color>), transparent);--radio-off-tone-source: attr(tone type(<color>), transparent)}a-radio-group[tone]:where(:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical])) a-radio:not([tone],[tone-selected]){--radio-tone-source: inherit;--radio-off-tone-source: inherit}a-radio[tone-selected=brand],a-radio-group[tone-selected=brand] a-radio:not([tone],[tone-selected]){--radio-tone-source: var(--anta-seed-brand)}a-radio[tone-selected=info],a-radio-group[tone-selected=info] a-radio:not([tone],[tone-selected]){--radio-tone-source: var(--anta-seed-info)}a-radio[tone-selected=success],a-radio-group[tone-selected=success] a-radio:not([tone],[tone-selected]){--radio-tone-source: var(--anta-seed-success)}a-radio[tone-selected=warning],a-radio-group[tone-selected=warning] a-radio:not([tone],[tone-selected]){--radio-tone-source: var(--anta-seed-warning)}a-radio[tone-selected=critical],a-radio-group[tone-selected=critical] a-radio:not([tone],[tone-selected]){--radio-tone-source: var(--anta-seed-critical)}a-radio[tone-selected=neutral],a-radio-group[tone-selected=neutral] a-radio:not([tone],[tone-selected]){--radio-tone-source: var(--anta-seed-neutral);--_tone-l-rest: .6;--_tone-l-hover: .45;--_tone-l-active: .4}a-radio[tone-selected]:not([tone-selected=""],[tone-selected=brand],[tone-selected=neutral],[tone-selected=info],[tone-selected=success],[tone-selected=warning],[tone-selected=critical]){--radio-tone-source: attr(tone-selected type(<color>), transparent)}a-radio-group[tone-selected]:not([tone-selected=""],[tone-selected=brand],[tone-selected=neutral],[tone-selected=info],[tone-selected=success],[tone-selected=warning],[tone-selected=critical]){--radio-tone-source: attr(tone-selected type(<color>), transparent)}a-radio-group[tone-selected]:not([tone-selected=""],[tone-selected=brand],[tone-selected=neutral],[tone-selected=info],[tone-selected=success],[tone-selected=warning],[tone-selected=critical]) a-radio:not([tone],[tone-selected]){--radio-tone-source: inherit}.dark a-radio{--_radio-dot-adjust: 1px;&:after{box-shadow:0 0 1px 1px color-mix(in oklch,black 40%,transparent)}--radio-border-neutral: var(--border-3);--radio-border-hover: var(--border-2);--radio-border-active: var(--border-1);--radio-dot: #ece9ec;--radio-dot-disabled: #534c57;--radio-bg-disabled: color-mix(in oklch, #e4d1ef 10%, transparent);--radio-border-disabled: color-mix(in oklch, #e4d1ef 10%, transparent);--_tone-l-rest: .42;--_tone-l-hover: .45;--_tone-l-active: .5}.dark a-radio[tone]:not([tone=""],[tone=neutral]),.dark a-radio[tone-selected]:not([tone-selected=""],[tone-selected=neutral]),.dark a-radio-group[tone]:not([tone=""],[tone=neutral]) a-radio:not([tone],[tone-selected]),.dark a-radio-group[tone-selected]:not([tone-selected=""],[tone-selected=neutral]) a-radio:not([tone],[tone-selected]){--_tone-l-rest: .45;--_tone-l-hover: .5;--_tone-l-active: .57}.dark a-radio[tone]:not([tone=""],[tone=neutral]),.dark a-radio-group[tone]:not([tone=""],[tone=neutral]) a-radio:not([tone],[tone-selected]){--radio-bg: oklch(from var(--radio-off-tone-source) .15 calc(c*.18) h);--radio-border: var(--_radio-border-base);--radio-border-hover: oklch(from var(--_radio-border-base) calc(l + .1) c h);--radio-border-active: oklch(from var(--_radio-border-base) calc(l + .17) c h)}.dark a-radio[tone-selected=neutral],.dark a-radio-group[tone-selected=neutral] a-radio:not([tone],[tone-selected]){--_tone-l-rest: .42;--_tone-l-hover: .45;--_tone-l-active: .5}label:has(>input[data-anta][type=radio]){display:inline-flex;align-items:center;gap:8px;color:var(--text-2);font-family:var(--sans-serif);font-feature-settings:"ss02","ss05","tnum";font-size:15px;line-height:20px}input[data-anta][type=radio]{--native-choice-size: 16px;--native-choice-dot-core: 3px;--native-choice-dot-edge: 3.5px;--native-choice-bg: var(--bg-1);--native-choice-border-neutral: var(--border-3);--native-choice-border: var(--native-choice-border-neutral);--native-choice-border-hover: var(--border-2);--native-choice-border-active: var(--border-1);--native-choice-tone-source: var(--anta-seed-neutral);--native-choice-off-tone-source: var(--anta-seed-neutral);--_native-choice-l-rest: .6;--_native-choice-l-hover: .45;--_native-choice-l-active: .4;--native-choice-selected: oklch(from var(--native-choice-tone-source) var(--_native-choice-l-rest) c h);--native-choice-selected-hover: oklch(from var(--native-choice-tone-source) var(--_native-choice-l-hover) c h);--native-choice-selected-active: oklch(from var(--native-choice-tone-source) var(--_native-choice-l-active) c h);--native-choice-dot: #f6f4f6;box-sizing:border-box;flex:0 0 var(--native-choice-size);inline-size:var(--native-choice-size);block-size:var(--native-choice-size);margin:0;appearance:none;-webkit-appearance:none;border:1.5px solid var(--native-choice-border);border-radius:50%;background-color:var(--native-choice-bg);cursor:pointer;vertical-align:middle;transition:background-color .15s ease-out,border-color .15s ease-out}label:has(>input[data-anta][type=radio][size=small]){gap:6px;font-size:13px;line-height:16px}label:has(>input[data-anta][type=radio][size=large]){font-size:17px;line-height:22px}input[data-anta][type=radio][size=small]{--native-choice-size: 14px;--native-choice-dot-core: 2.5px;--native-choice-dot-edge: 3px}input[data-anta][type=radio][size=large]{--native-choice-size: 18px;--native-choice-dot-core: 3.5px;--native-choice-dot-edge: 4px}input[data-anta][type=radio][tone]:not([tone=""],[tone=neutral]),input[data-anta][type=radio][tone-selected]:not([tone-selected=""],[tone-selected=neutral]){--_native-choice-l-rest: .5;--_native-choice-l-hover: .45;--_native-choice-l-active: .4}input[data-anta][type=radio][tone=brand]{--native-choice-tone-source: var(--anta-seed-brand);--native-choice-off-tone-source: var(--anta-seed-brand)}input[data-anta][type=radio][tone=info]{--native-choice-tone-source: var(--anta-seed-info);--native-choice-off-tone-source: var(--anta-seed-info)}input[data-anta][type=radio][tone=success]{--native-choice-tone-source: var(--anta-seed-success);--native-choice-off-tone-source: var(--anta-seed-success)}input[data-anta][type=radio][tone=warning]{--native-choice-tone-source: var(--anta-seed-warning);--native-choice-off-tone-source: var(--anta-seed-warning)}input[data-anta][type=radio][tone=critical]{--native-choice-tone-source: var(--anta-seed-critical);--native-choice-off-tone-source: var(--anta-seed-critical)}input[data-anta][type=radio][tone=neutral]{--native-choice-tone-source: var(--anta-seed-neutral);--native-choice-off-tone-source: var(--anta-seed-neutral)}input[data-anta][type=radio][tone]:not([tone=""],[tone=neutral]){--native-choice-bg: oklch(from var(--native-choice-off-tone-source) .99 calc(c*.03) h);--_native-choice-off-selected: oklch(from var(--native-choice-off-tone-source) var(--_native-choice-l-rest) c h);--_native-choice-border-base: color-mix(in oklch, var(--_native-choice-off-selected) 70%, var(--native-choice-border-neutral));--native-choice-border: oklch(from var(--_native-choice-border-base) calc(l + .17) c h);--native-choice-border-hover: oklch(from var(--_native-choice-border-base) calc(l + .1) c h);--native-choice-border-active: var(--_native-choice-border-base)}input[data-anta][type=radio][tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]){--native-choice-tone-source: attr(tone type(<color>), var(--anta-seed-neutral));--native-choice-off-tone-source: attr(tone type(<color>), var(--anta-seed-neutral))}input[data-anta][type=radio][tone-selected=brand]{--native-choice-tone-source: var(--anta-seed-brand)}input[data-anta][type=radio][tone-selected=info]{--native-choice-tone-source: var(--anta-seed-info)}input[data-anta][type=radio][tone-selected=success]{--native-choice-tone-source: var(--anta-seed-success)}input[data-anta][type=radio][tone-selected=warning]{--native-choice-tone-source: var(--anta-seed-warning)}input[data-anta][type=radio][tone-selected=critical]{--native-choice-tone-source: var(--anta-seed-critical)}input[data-anta][type=radio][tone-selected=neutral]{--native-choice-tone-source: var(--anta-seed-neutral);--_native-choice-l-rest: .6;--_native-choice-l-hover: .45;--_native-choice-l-active: .4}input[data-anta][type=radio][tone-selected]:not([tone-selected=""],[tone-selected=brand],[tone-selected=neutral],[tone-selected=info],[tone-selected=success],[tone-selected=warning],[tone-selected=critical]){--native-choice-tone-source: attr(tone-selected type(<color>), var(--anta-seed-neutral))}@media(hover:hover)and (pointer:fine){input[data-anta][type=radio]:not(:disabled):hover{border-color:var(--native-choice-border-hover)}input[data-anta][type=radio]:not(:disabled):hover:checked{border-color:var(--native-choice-selected-hover);background:radial-gradient(circle,var(--native-choice-dot) 0 var(--native-choice-dot-core),var(--native-choice-selected-hover) var(--native-choice-dot-edge))}}input[data-anta][type=radio]:not(:disabled):active{border-color:var(--native-choice-border-active)}input[data-anta][type=radio]:not(:disabled):active:checked{border-color:var(--native-choice-selected-active);background:radial-gradient(circle,var(--native-choice-dot) 0 var(--native-choice-dot-core),var(--native-choice-selected-active) var(--native-choice-dot-edge))}input[data-anta][type=radio]:checked{border-color:var(--native-choice-selected);background:radial-gradient(circle,var(--native-choice-dot) 0 var(--native-choice-dot-core),var(--native-choice-selected) var(--native-choice-dot-edge))}input[data-anta][type=radio]:focus-visible{outline:1px solid var(--focus-ring);outline-offset:1px}input[data-anta][type=radio]:disabled{border-color:color-mix(in oklch,var(--text-1) 10%,transparent);background-color:color-mix(in oklch,var(--text-1) 10%,transparent);cursor:not-allowed}input[data-anta][type=radio]:disabled:checked{border-color:color-mix(in oklch,var(--text-1) 10%,transparent);background:radial-gradient(circle,var(--text-4) 0 var(--native-choice-dot-core),color-mix(in oklch,var(--text-1) 10%,transparent) var(--native-choice-dot-edge))}.dark input[data-anta][type=radio]{--_native-choice-l-rest: .42;--_native-choice-l-hover: .45;--_native-choice-l-active: .5;--native-choice-dot: #ece9ec}.dark input[data-anta][type=radio][tone]:not([tone=""],[tone=neutral]),.dark input[data-anta][type=radio][tone-selected]:not([tone-selected=""],[tone-selected=neutral]){--_native-choice-l-rest: .45;--_native-choice-l-hover: .5;--_native-choice-l-active: .57}.dark input[data-anta][type=radio][tone]:not([tone=""],[tone=neutral]){--native-choice-bg: oklch(from var(--native-choice-off-tone-source) .15 calc(c*.18) h);--native-choice-border: var(--_native-choice-border-base);--native-choice-border-hover: oklch(from var(--_native-choice-border-base) calc(l + .1) c h);--native-choice-border-active: oklch(from var(--_native-choice-border-base) calc(l + .17) c h)}.dark input[data-anta][type=radio][tone-selected=neutral]{--_native-choice-l-rest: .42;--_native-choice-l-hover: .45;--_native-choice-l-active: .5}@media(forced-colors:active){a-radio:state(selected):before{forced-color-adjust:none;background-color:Highlight;border-color:Highlight}a-radio:state(selected):after{forced-color-adjust:none;background-color:HighlightText;box-shadow:none}a-radio[disabled]:before{background-color:Canvas;border-color:GrayText}a-radio[disabled]:state(selected):after{background-color:GrayText}}}

package/dist/elements/a-switch.css

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

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

@@ -35,6 +35,10 @@ export declare class ATextElement extends HTMLElementBase {
     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. */
+    get isTruncated(): boolean;
     /** Create or remove the chevron to match `expandable`, then refresh it. */
     private syncExpandButton;
     private handleToggle;

package/dist/elements/a-text.js

@@ -141,6 +141,15 @@ class ATextElement extends HTMLElementBase {
   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. */
+  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) {
@@ -183,9 +192,7 @@ class ATextElement extends HTMLElementBase {
    *  clips. Frozen on while expanded; height catches wrapped text, width a long word. */
   measureOverflow() {
     if (!this.#isExpandable || this.expanded) return;
-    const s = this.slotEl;
-    const over = s.scrollHeight > s.clientHeight + 1 || s.scrollWidth > s.clientWidth + 1;
-    s.classList.toggle("overflowing", over);
+    this.slotEl.classList.toggle("overflowing", this.isTruncated);
   }
   /** Reflect state onto the button (label + `aria-expanded` + `.expanded`); a
    *  one-way expand removes it once open. */

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

@@ -64,6 +64,13 @@ export declare class ATooltipElement extends HTMLElementBase {
      *  fed the latest cursor event, so it shows at the cursor and so moving back
      *  onto an anchor after the tooltip was dismissed re-arms it. */
     private makeDebouncedShow;
+    private hasExplicitTextTooltip;
+    /** Text rendered by the anchor, excluding every tooltip's light-DOM content.
+     *  An automatic text tooltip has no light children itself, but nested custom
+     *  tooltips might; including their hidden content would produce a misleading
+     *  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
      *  Anta's ellipsizing label parts inside the anchor; else the anchor itself