@antadesign/anta 0.3.31 → 0.3.33

package/dist/elements/a-expander.css

@@ -1 +1 @@
-@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-expander,details[data-anta]{--_expander-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3e%3cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m9 18 6-6-6-6'/%3e%3c/svg%3e")}a-expander{--expander-text: var(--text-2);--expander-text-hover: var(--text-1);--expander-bg-secondary: var(--bg-2);--expander-border-secondary: var(--border-5);--expander-bg-primary: var(--bg-4);--expander-border-primary: var(--border-4);--expander-bg: var(--expander-bg-secondary);--expander-border: var(--expander-border-secondary);--expander-bg-hover-lift: .01;--expander-bg-hover: oklch(from var(--expander-bg) calc(l + var(--expander-bg-hover-lift)) c h);--expander-gutter: 24px;display:block;width:100%;box-sizing:border-box;border:1px solid var(--expander-border);border-radius:4px;color:var(--expander-text);background:var(--expander-bg);transition:background-color .1s ease}a-expander[round]{border-radius:var(--expander-round, var(--_expander-round-radius, 999px));@supports (border-radius: attr(probe type(<length>),1px)){--expander-round: attr(round type(<length>))}}a-expander>span[slot=actions]{display:contents}a-expander:not(:defined) a-expander-details{display:none}a-expander:not(:defined)[state=open] a-expander-details,a-expander:not(:defined)[default-state=open] a-expander-details{display:block}a-expander:not(:defined) a-expander-summary{position:relative;padding:6px 4px 6px var(--expander-gutter)}a-expander:not(:defined) a-expander-summary:before{content:"";position:absolute;left:calc(var(--expander-gutter) - 16px - 2px);top:50%;width:16px;height:16px;transform:translateY(-50%);background-color:currentColor;-webkit-mask:var(--_expander-chevron) center / contain no-repeat;mask:var(--_expander-chevron) center / contain no-repeat;opacity:.6}a-expander:not(:defined){display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center}a-expander:not(:defined) a-expander-summary{grid-column:1}a-expander:not(:defined)>[slot=actions]{grid-column:2;display:flex;align-items:center;gap:2px;flex-shrink:0;margin-inline-start:8px;margin-inline-end:4px}a-expander:not(:defined) a-expander-details{grid-column:1 / -1}a-expander-summary{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;line-height:20px;font-weight:584.62;letter-spacing:0;text-decoration-line:var(--_summary-underline, none);text-decoration-style:dotted;text-decoration-color:color-mix(in oklch,currentColor 75%,transparent);text-decoration-thickness:1px;text-underline-offset:3px;transition:color .15s ease}a-expander[level="1"] a-expander-summary{font-size:28px;line-height:32px}a-expander[level="2"] a-expander-summary{font-size:24px;line-height:28px}a-expander[level="3"] a-expander-summary{font-size:20px;line-height:24px}a-expander[level="4"] a-expander-summary{font-size:17px;line-height:20px}a-expander[level="6"] a-expander-summary{font-size:13px;line-height:16px}a-expander-details{display:block;padding:2px 4px 6px var(--expander-gutter);line-height:20px;overflow:auto}a-expander[priority=tertiary][outdent] a-expander-details{padding-inline-start:4px;margin-inline-start:-4px}a-expander[priority=primary]{--expander-bg: var(--expander-bg-primary);--expander-border: var(--expander-border-primary)}a-expander[priority=tertiary]{--expander-bg: transparent;--expander-border: transparent}a-expander:not([disabled]):not(:state(open)):hover{background:var(--expander-bg-hover)}a-expander:not([disabled]):not(:state(open)):active{background:var(--expander-bg)}a-expander[priority=tertiary][outdent]{--expander-gutter: 0px}a-expander[tone=brand]{--expander-text: var(--text-2-brand);--expander-text-hover: var(--text-1-brand);--expander-bg-secondary: var(--bg-2-brand);--expander-border-secondary: var(--border-5-brand);--expander-bg-primary: var(--bg-4-brand);--expander-border-primary: var(--border-4-brand)}a-expander[tone=info]{--expander-text: var(--text-2-info);--expander-text-hover: var(--text-1-info);--expander-bg-secondary: var(--bg-2-info);--expander-border-secondary: var(--border-5-info);--expander-bg-primary: var(--bg-4-info);--expander-border-primary: var(--border-4-info)}a-expander[tone=success]{--expander-text: var(--text-2-success);--expander-text-hover: var(--text-1-success);--expander-bg-secondary: var(--bg-2-success);--expander-border-secondary: var(--border-5-success);--expander-bg-primary: var(--bg-4-success);--expander-border-primary: var(--border-4-success)}a-expander[tone=warning]{--expander-text: var(--text-2-warning);--expander-text-hover: var(--text-1-warning);--expander-bg-secondary: var(--bg-2-warning);--expander-border-secondary: var(--border-5-warning);--expander-bg-primary: var(--bg-4-warning);--expander-border-primary: var(--border-4-warning)}a-expander[tone=critical]{--expander-text: var(--text-2-critical);--expander-text-hover: var(--text-1-critical);--expander-bg-secondary: var(--bg-2-critical);--expander-border-secondary: var(--border-5-critical);--expander-bg-primary: var(--bg-4-critical);--expander-border-primary: var(--border-4-critical)}a-expander[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--expander-tone-source: currentColor;--expander-text: light-dark(oklch(from var(--expander-tone-source) .5 .125 h), oklch(from var(--expander-tone-source) .77 .11 h));--expander-text-hover: light-dark(oklch(from var(--expander-tone-source) .4 .11 h), oklch(from var(--expander-tone-source) .85 .1 h));--expander-bg-secondary: light-dark(oklch(from var(--expander-tone-source) .99 .004 h), oklch(from var(--expander-tone-source) .13 .02 h));--expander-border-secondary: light-dark(oklch(from var(--expander-tone-source) .935 .028 h), oklch(from var(--expander-tone-source) .21 .045 h));--expander-bg-primary: light-dark(oklch(from var(--expander-tone-source) .955 .02 h), oklch(from var(--expander-tone-source) .185 .05 h));--expander-border-primary: light-dark(oklch(from var(--expander-tone-source) .9 .04 h), oklch(from var(--expander-tone-source) .26 .06 h));@supports (color: attr(probe type(<color>),red)){--expander-tone-source: attr(tone type(<color>), currentColor)}}a-expander[disabled],a-expander[disabled][tone]{--expander-text: light-dark(#afa9b1, #635b65)}details[data-anta]{--native-expander-gutter: 24px;--native-expander-summary-padding-block: 6px;--native-expander-summary-font-size: 15px;--native-expander-summary-line-height: 20px;--native-expander-chevron-size: 16px;--native-expander-text: var(--text-2);--native-expander-text-hover: var(--text-1);--native-expander-bg-secondary: var(--bg-2);--native-expander-border-secondary: var(--border-5);--native-expander-bg-primary: var(--bg-4);--native-expander-border-primary: var(--border-4);--native-expander-round-size: 16px;--native-expander-round: 4px;--native-expander-bg: transparent;--native-expander-border: transparent;display:block;inline-size:100%;box-sizing:border-box;border:0 solid var(--native-expander-border);border-radius:var(--native-expander-round);color:var(--native-expander-text);background:var(--native-expander-bg);font-family:var(--sans-serif);font-size:15px;line-height:var(--native-expander-summary-line-height);transition:background-color .1s ease}details[data-anta][priority=secondary]{--native-expander-bg: var(--native-expander-bg-secondary);--native-expander-border: var(--native-expander-border-secondary);border-width:1px}details[data-anta][priority=primary]{--native-expander-bg: var(--native-expander-bg-primary);--native-expander-border: var(--native-expander-border-primary);border-width:1px}details[data-anta][level="1"]{--native-expander-summary-font-size: 28px;--native-expander-summary-line-height: 32px;--native-expander-round-size: 22px}details[data-anta][level="2"]{--native-expander-summary-font-size: 24px;--native-expander-summary-line-height: 28px;--native-expander-round-size: 20px}details[data-anta][level="3"]{--native-expander-summary-font-size: 20px;--native-expander-summary-line-height: 24px;--native-expander-round-size: 18px}details[data-anta][level="4"]{--native-expander-summary-font-size: 17px;--native-expander-summary-line-height: 20px}details[data-anta][level="6"]{--native-expander-summary-font-size: 13px;--native-expander-summary-line-height: 16px;--native-expander-round-size: 14px}details[data-anta][round]{--native-expander-round: var(--native-expander-round-size)}details[data-anta][round]:not([round=""]){--native-expander-round: var(--native-expander-round-size);@supports (border-radius: attr(probe type(<length>),1px)){--native-expander-round: attr(round type(<length>), var(--native-expander-round-size))}}details[data-anta][priority=tertiary][outdent]{--native-expander-gutter: 0px}details[data-anta][tone=brand]{--native-expander-text: var(--text-2-brand);--native-expander-text-hover: var(--text-1-brand);--native-expander-bg-secondary: var(--bg-2-brand);--native-expander-border-secondary: var(--border-5-brand);--native-expander-bg-primary: var(--bg-4-brand);--native-expander-border-primary: var(--border-4-brand)}details[data-anta][tone=info]{--native-expander-text: var(--text-2-info);--native-expander-text-hover: var(--text-1-info);--native-expander-bg-secondary: var(--bg-2-info);--native-expander-border-secondary: var(--border-5-info);--native-expander-bg-primary: var(--bg-4-info);--native-expander-border-primary: var(--border-4-info)}details[data-anta][tone=success]{--native-expander-text: var(--text-2-success);--native-expander-text-hover: var(--text-1-success);--native-expander-bg-secondary: var(--bg-2-success);--native-expander-border-secondary: var(--border-5-success);--native-expander-bg-primary: var(--bg-4-success);--native-expander-border-primary: var(--border-4-success)}details[data-anta][tone=warning]{--native-expander-text: var(--text-2-warning);--native-expander-text-hover: var(--text-1-warning);--native-expander-bg-secondary: var(--bg-2-warning);--native-expander-border-secondary: var(--border-5-warning);--native-expander-bg-primary: var(--bg-4-warning);--native-expander-border-primary: var(--border-4-warning)}details[data-anta][tone=critical]{--native-expander-text: var(--text-2-critical);--native-expander-text-hover: var(--text-1-critical);--native-expander-bg-secondary: var(--bg-2-critical);--native-expander-border-secondary: var(--border-5-critical);--native-expander-bg-primary: var(--bg-4-critical);--native-expander-border-primary: var(--border-4-critical)}details[data-anta][tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--native-expander-tone-source: currentColor;--native-expander-text: light-dark(oklch(from var(--native-expander-tone-source) .5 .125 h), oklch(from var(--native-expander-tone-source) .77 .11 h));--native-expander-text-hover: light-dark(oklch(from var(--native-expander-tone-source) .4 .11 h), oklch(from var(--native-expander-tone-source) .85 .1 h));--native-expander-bg-secondary: light-dark(oklch(from var(--native-expander-tone-source) .99 .004 h), oklch(from var(--native-expander-tone-source) .13 .02 h));--native-expander-border-secondary: light-dark(oklch(from var(--native-expander-tone-source) .935 .028 h), oklch(from var(--native-expander-tone-source) .21 .045 h));--native-expander-bg-primary: light-dark(oklch(from var(--native-expander-tone-source) .955 .02 h), oklch(from var(--native-expander-tone-source) .185 .05 h));--native-expander-border-primary: light-dark(oklch(from var(--native-expander-tone-source) .9 .04 h), oklch(from var(--native-expander-tone-source) .26 .06 h));@supports (color: attr(probe type(<color>),red)){--native-expander-tone-source: attr(tone type(<color>), currentColor)}}details[data-anta]>summary{position:relative;box-sizing:border-box;display:block;min-width:0;padding:var(--native-expander-summary-padding-block) 4px var(--native-expander-summary-padding-block) var(--native-expander-gutter);color:inherit;cursor:pointer;font:inherit;font-variation-settings:inherit;font-size:var(--native-expander-summary-font-size);line-height:var(--native-expander-summary-line-height);font-weight:584.62;letter-spacing:0;list-style:none;text-decoration-line:none;transition:color .15s ease}details[data-anta]>summary::-webkit-details-marker{display:none}details[data-anta]>summary::marker{content:""}details[data-anta]>summary:before{content:"";position:absolute;left:calc(var(--native-expander-gutter) - var(--native-expander-chevron-size) - 2px);top:var(--native-expander-summary-padding-block);width:var(--native-expander-chevron-size);height:var(--native-expander-summary-line-height);background-color:currentColor;-webkit-mask:var(--_expander-chevron) center / var(--native-expander-chevron-size) no-repeat;mask:var(--_expander-chevron) center / var(--native-expander-chevron-size) no-repeat;opacity:.6;transform:rotate(0);transition:transform .15s ease,opacity .15s ease,background-color .15s ease}details[data-anta][open]>summary:before{opacity:1;transform:rotate(90deg)}details[data-anta]:is([priority=primary],[priority=secondary]):not([open]):hover{background:oklch(from var(--native-expander-bg) calc(l + .01) c h)}details[data-anta]:is([priority=primary],[priority=secondary]):not([open]):active{background:var(--native-expander-bg)}details[data-anta]>summary:hover{color:var(--native-expander-text-hover);text-decoration-line:underline;text-decoration-style:dotted;text-decoration-color:color-mix(in oklch,currentColor 75%,transparent);text-decoration-thickness:1px;text-underline-offset:3px}details[data-anta]>summary:hover:before{opacity:1}details[data-anta]>summary:active{color:var(--native-expander-text)}details[data-anta]>summary:focus-visible{outline:1px solid var(--focus-ring);outline-offset:1px}details[data-anta]>:not(summary){display:block;padding:2px 4px 6px var(--native-expander-gutter);line-height:20px}@media(forced-colors:active){:is(a-expander,details[data-anta]){border-color:CanvasText}:is(a-expander,details[data-anta]):not([priority=primary],[priority=tertiary]){border-style:dashed}:is(a-expander,details[data-anta])[priority=tertiary]{border-color:Canvas}a-expander::part(summary):before,a-expander:not(:defined) a-expander-summary:before,details[data-anta]>summary:before{forced-color-adjust:none;background-color:CanvasText}a-expander[disabled]::part(summary):before{background-color:GrayText}}}a-expander-details>p:last-child,a-expander-details>:not([slot])>p:last-child,details[data-anta]>p:last-child,details[data-anta]>:not(summary)>p:last-child{margin-block-end:0}
+@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-expander,details[data-anta]{--_expander-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3e%3cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m9 18 6-6-6-6'/%3e%3c/svg%3e")}a-expander{--expander-text: var(--text-2);--expander-text-hover: var(--text-1);--expander-bg-secondary: var(--bg-2);--expander-border-secondary: var(--border-5);--expander-bg-primary: var(--bg-4);--expander-border-primary: var(--border-4);--expander-bg: var(--expander-bg-secondary);--expander-border: var(--expander-border-secondary);--expander-bg-hover-lift: .01;--expander-bg-hover: oklch(from var(--expander-bg) calc(l + var(--expander-bg-hover-lift)) c h);--expander-gutter: 24px;--_expander-indicator-size: 16px;--_expander-indicator-edge: 6px;--_expander-indicator-gap: 2px;--_expander-indicator-stroke: 2px;--_expander-indicator-track: calc(var(--_expander-indicator-edge) + var(--_expander-indicator-size) + var(--_expander-indicator-gap));--_expander-indicator-start: calc(var(--expander-gutter) - var(--_expander-indicator-size) - var(--_expander-indicator-gap));--_expander-indicator-mask: var(--_expander-chevron);--_expander-skeleton-indicator-start: var(--_expander-indicator-start);--_expander-skeleton-indicator-end: auto;--_expander-skeleton-indicator-top: 50%;--_expander-skeleton-indicator-transform: translateY(-50%);--_expander-header-padding-block: 6px;--_expander-header-padding-end: 4px;--_expander-actions-gap: 2px;--_expander-actions-start: 8px;--_expander-actions-end: 4px;display:block;width:100%;box-sizing:border-box;border:1px solid var(--expander-border);border-radius:4px;color:var(--expander-text);background:var(--expander-bg);transition:background-color .1s ease}a-expander[indicator-placement=end]{--expander-gutter: 12px;--_expander-skeleton-indicator-start: auto;--_expander-skeleton-indicator-end: var(--_expander-indicator-edge);--_expander-skeleton-indicator-top: 8px;--_expander-skeleton-indicator-transform: rotate(90deg);--_expander-actions-end: var(--_expander-actions-gap)}a-expander[indicator=triangle]{--_expander-indicator-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 2.5 12 8l-7 5.5z'/%3E%3C/svg%3E")}a-expander[indicator=plus]{--_expander-indicator-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7 2h2v12H7zM2 7h12v2H2z'/%3E%3C/svg%3E")}a-expander:not(:defined):has(>[slot=indicator]){--_expander-skeleton-indicator-display: none}a-expander[round]{border-radius:var(--expander-round, var(--_expander-round-radius, 999px));@supports (border-radius: attr(probe type(<length>),1px)){--expander-round: attr(round type(<length>))}}a-expander>span[slot=actions]{display:contents}a-expander:not(:defined) a-expander-details{display:none}a-expander:not(:defined)[state=open] a-expander-details,a-expander:not(:defined)[default-state=open] a-expander-details{display:block}a-expander:not(:defined) a-expander-summary{position:relative;padding:var(--_expander-header-padding-block) var(--_expander-header-padding-end) var(--_expander-header-padding-block) var(--expander-gutter)}a-expander:not(:defined) a-expander-summary:before{content:"";display:var(--_expander-skeleton-indicator-display, block);position:absolute;inset-inline-start:var(--_expander-skeleton-indicator-start);inset-inline-end:var(--_expander-skeleton-indicator-end);top:var(--_expander-skeleton-indicator-top);width:var(--_expander-indicator-size);height:var(--_expander-indicator-size);transform:var(--_expander-skeleton-indicator-transform);background-color:currentColor;-webkit-mask:var(--_expander-indicator-mask) center / contain no-repeat;mask:var(--_expander-indicator-mask) center / contain no-repeat;opacity:.6;pointer-events:none}a-expander:not(:defined)[indicator-placement=end] a-expander-summary{position:static;grid-column:1;padding-inline-start:var(--expander-gutter);padding-inline-end:var(--_expander-header-padding-end)}a-expander:not(:defined)>[slot=indicator]{display:grid;place-items:center;position:absolute;inset-inline-start:var(--_expander-indicator-start);top:8px;width:var(--_expander-indicator-size);height:var(--_expander-indicator-size);pointer-events:none}a-expander:not(:defined)[indicator-placement=end]>[slot=indicator]{inset-inline-start:auto;inset-inline-end:var(--_expander-indicator-edge)}a-expander:not(:defined)>[slot=indicator][data-when=open]{display:none}a-expander:not(:defined):is([state=open],[default-state=open])>[slot=indicator][data-when=open]{display:grid}a-expander:not(:defined):is([state=open],[default-state=open])>[slot=indicator][data-when=closed]{display:none}a-expander:not(:defined):is([state=open],[default-state=open])>[slot=indicator]:not([data-when]){transform:rotate(90deg)}a-expander:not(:defined)[indicator-placement=end]:is([state=open],[default-state=open])>[slot=indicator]:not([data-when]){transform:rotate(180deg)}a-expander:not(:defined)[indicator-placement=end]{grid-template-columns:minmax(0,1fr) auto var(--_expander-indicator-track)}a-expander:not(:defined){display:grid;position:relative;grid-template-columns:minmax(0,1fr) auto;align-items:center}a-expander:not(:defined) a-expander-summary{grid-column:1}a-expander:not(:defined)>[slot=actions]{grid-column:2;display:flex;align-items:center;gap:var(--_expander-actions-gap);flex-shrink:0;margin-inline-start:var(--_expander-actions-start);margin-inline-end:var(--_expander-actions-end)}a-expander:not(:defined) a-expander-details{grid-column:1 / -1}a-expander-summary{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;line-height:20px;font-weight:584.62;letter-spacing:0;text-decoration-line:var(--_summary-underline, none);text-decoration-style:dotted;text-decoration-color:color-mix(in oklch,currentColor 75%,transparent);text-decoration-thickness:1px;text-underline-offset:3px;transition:color .15s ease}a-expander[level="1"] a-expander-summary{font-size:28px;line-height:32px}a-expander[level="2"] a-expander-summary{font-size:24px;line-height:28px}a-expander[level="3"] a-expander-summary{font-size:20px;line-height:24px}a-expander[level="4"] a-expander-summary{font-size:17px;line-height:20px}a-expander[level="6"] a-expander-summary{font-size:13px;line-height:16px}a-expander-details{display:block;padding:2px 4px 6px var(--expander-gutter);line-height:20px;overflow:auto}a-expander[indicator-placement=end] a-expander-details{padding-inline-start:var(--expander-gutter)}a-expander[priority=tertiary][outdent] a-expander-details{padding-inline-start:4px;margin-inline-start:-4px}a-expander[priority=primary]{--expander-bg: var(--expander-bg-primary);--expander-border: var(--expander-border-primary)}a-expander[priority=tertiary]{--expander-bg: transparent;--expander-border: transparent}a-expander:not([disabled]):not(:state(open)):hover{background:var(--expander-bg-hover)}a-expander:not([disabled]):not(:state(open)):active{background:var(--expander-bg)}a-expander[priority=tertiary][outdent]{--expander-gutter: 0px}a-expander[tone=brand]{--expander-text: var(--text-2-brand);--expander-text-hover: var(--text-1-brand);--expander-bg-secondary: var(--bg-2-brand);--expander-border-secondary: var(--border-5-brand);--expander-bg-primary: var(--bg-4-brand);--expander-border-primary: var(--border-4-brand)}a-expander[tone=info]{--expander-text: var(--text-2-info);--expander-text-hover: var(--text-1-info);--expander-bg-secondary: var(--bg-2-info);--expander-border-secondary: var(--border-5-info);--expander-bg-primary: var(--bg-4-info);--expander-border-primary: var(--border-4-info)}a-expander[tone=success]{--expander-text: var(--text-2-success);--expander-text-hover: var(--text-1-success);--expander-bg-secondary: var(--bg-2-success);--expander-border-secondary: var(--border-5-success);--expander-bg-primary: var(--bg-4-success);--expander-border-primary: var(--border-4-success)}a-expander[tone=warning]{--expander-text: var(--text-2-warning);--expander-text-hover: var(--text-1-warning);--expander-bg-secondary: var(--bg-2-warning);--expander-border-secondary: var(--border-5-warning);--expander-bg-primary: var(--bg-4-warning);--expander-border-primary: var(--border-4-warning)}a-expander[tone=critical]{--expander-text: var(--text-2-critical);--expander-text-hover: var(--text-1-critical);--expander-bg-secondary: var(--bg-2-critical);--expander-border-secondary: var(--border-5-critical);--expander-bg-primary: var(--bg-4-critical);--expander-border-primary: var(--border-4-critical)}a-expander[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--expander-tone-source: currentColor;--expander-text: light-dark(oklch(from var(--expander-tone-source) .5 .125 h), oklch(from var(--expander-tone-source) .77 .11 h));--expander-text-hover: light-dark(oklch(from var(--expander-tone-source) .4 .11 h), oklch(from var(--expander-tone-source) .85 .1 h));--expander-bg-secondary: light-dark(oklch(from var(--expander-tone-source) .99 .004 h), oklch(from var(--expander-tone-source) .13 .02 h));--expander-border-secondary: light-dark(oklch(from var(--expander-tone-source) .935 .028 h), oklch(from var(--expander-tone-source) .21 .045 h));--expander-bg-primary: light-dark(oklch(from var(--expander-tone-source) .955 .02 h), oklch(from var(--expander-tone-source) .185 .05 h));--expander-border-primary: light-dark(oklch(from var(--expander-tone-source) .9 .04 h), oklch(from var(--expander-tone-source) .26 .06 h));@supports (color: attr(probe type(<color>),red)){--expander-tone-source: attr(tone type(<color>), currentColor)}}a-expander[disabled],a-expander[disabled][tone]{--expander-text: light-dark(#afa9b1, #635b65)}details[data-anta]{--native-expander-gutter: 24px;--native-expander-summary-padding-block: 6px;--native-expander-summary-font-size: 15px;--native-expander-summary-line-height: 20px;--native-expander-chevron-size: 16px;--native-expander-text: var(--text-2);--native-expander-text-hover: var(--text-1);--native-expander-bg-secondary: var(--bg-2);--native-expander-border-secondary: var(--border-5);--native-expander-bg-primary: var(--bg-4);--native-expander-border-primary: var(--border-4);--native-expander-round-size: 16px;--native-expander-round: 4px;--native-expander-bg: transparent;--native-expander-border: transparent;display:block;inline-size:100%;box-sizing:border-box;border:0 solid var(--native-expander-border);border-radius:var(--native-expander-round);color:var(--native-expander-text);background:var(--native-expander-bg);font-family:var(--sans-serif);font-size:15px;line-height:var(--native-expander-summary-line-height);transition:background-color .1s ease}details[data-anta][priority=secondary]{--native-expander-bg: var(--native-expander-bg-secondary);--native-expander-border: var(--native-expander-border-secondary);border-width:1px}details[data-anta][priority=primary]{--native-expander-bg: var(--native-expander-bg-primary);--native-expander-border: var(--native-expander-border-primary);border-width:1px}details[data-anta][level="1"]{--native-expander-summary-font-size: 28px;--native-expander-summary-line-height: 32px;--native-expander-round-size: 22px}details[data-anta][level="2"]{--native-expander-summary-font-size: 24px;--native-expander-summary-line-height: 28px;--native-expander-round-size: 20px}details[data-anta][level="3"]{--native-expander-summary-font-size: 20px;--native-expander-summary-line-height: 24px;--native-expander-round-size: 18px}details[data-anta][level="4"]{--native-expander-summary-font-size: 17px;--native-expander-summary-line-height: 20px}details[data-anta][level="6"]{--native-expander-summary-font-size: 13px;--native-expander-summary-line-height: 16px;--native-expander-round-size: 14px}details[data-anta][round]{--native-expander-round: var(--native-expander-round-size)}details[data-anta][round]:not([round=""]){--native-expander-round: var(--native-expander-round-size);@supports (border-radius: attr(probe type(<length>),1px)){--native-expander-round: attr(round type(<length>), var(--native-expander-round-size))}}details[data-anta][priority=tertiary][outdent]{--native-expander-gutter: 0px}details[data-anta][tone=brand]{--native-expander-text: var(--text-2-brand);--native-expander-text-hover: var(--text-1-brand);--native-expander-bg-secondary: var(--bg-2-brand);--native-expander-border-secondary: var(--border-5-brand);--native-expander-bg-primary: var(--bg-4-brand);--native-expander-border-primary: var(--border-4-brand)}details[data-anta][tone=info]{--native-expander-text: var(--text-2-info);--native-expander-text-hover: var(--text-1-info);--native-expander-bg-secondary: var(--bg-2-info);--native-expander-border-secondary: var(--border-5-info);--native-expander-bg-primary: var(--bg-4-info);--native-expander-border-primary: var(--border-4-info)}details[data-anta][tone=success]{--native-expander-text: var(--text-2-success);--native-expander-text-hover: var(--text-1-success);--native-expander-bg-secondary: var(--bg-2-success);--native-expander-border-secondary: var(--border-5-success);--native-expander-bg-primary: var(--bg-4-success);--native-expander-border-primary: var(--border-4-success)}details[data-anta][tone=warning]{--native-expander-text: var(--text-2-warning);--native-expander-text-hover: var(--text-1-warning);--native-expander-bg-secondary: var(--bg-2-warning);--native-expander-border-secondary: var(--border-5-warning);--native-expander-bg-primary: var(--bg-4-warning);--native-expander-border-primary: var(--border-4-warning)}details[data-anta][tone=critical]{--native-expander-text: var(--text-2-critical);--native-expander-text-hover: var(--text-1-critical);--native-expander-bg-secondary: var(--bg-2-critical);--native-expander-border-secondary: var(--border-5-critical);--native-expander-bg-primary: var(--bg-4-critical);--native-expander-border-primary: var(--border-4-critical)}details[data-anta][tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--native-expander-tone-source: currentColor;--native-expander-text: light-dark(oklch(from var(--native-expander-tone-source) .5 .125 h), oklch(from var(--native-expander-tone-source) .77 .11 h));--native-expander-text-hover: light-dark(oklch(from var(--native-expander-tone-source) .4 .11 h), oklch(from var(--native-expander-tone-source) .85 .1 h));--native-expander-bg-secondary: light-dark(oklch(from var(--native-expander-tone-source) .99 .004 h), oklch(from var(--native-expander-tone-source) .13 .02 h));--native-expander-border-secondary: light-dark(oklch(from var(--native-expander-tone-source) .935 .028 h), oklch(from var(--native-expander-tone-source) .21 .045 h));--native-expander-bg-primary: light-dark(oklch(from var(--native-expander-tone-source) .955 .02 h), oklch(from var(--native-expander-tone-source) .185 .05 h));--native-expander-border-primary: light-dark(oklch(from var(--native-expander-tone-source) .9 .04 h), oklch(from var(--native-expander-tone-source) .26 .06 h));@supports (color: attr(probe type(<color>),red)){--native-expander-tone-source: attr(tone type(<color>), currentColor)}}details[data-anta]>summary{position:relative;box-sizing:border-box;display:block;min-width:0;padding:var(--native-expander-summary-padding-block) 4px var(--native-expander-summary-padding-block) var(--native-expander-gutter);color:inherit;cursor:pointer;font:inherit;font-variation-settings:inherit;font-size:var(--native-expander-summary-font-size);line-height:var(--native-expander-summary-line-height);font-weight:584.62;letter-spacing:0;list-style:none;text-decoration-line:none;transition:color .15s ease}details[data-anta]>summary::-webkit-details-marker{display:none}details[data-anta]>summary::marker{content:""}details[data-anta]>summary:before{content:"";position:absolute;left:calc(var(--native-expander-gutter) - var(--native-expander-chevron-size) - 2px);top:var(--native-expander-summary-padding-block);width:var(--native-expander-chevron-size);height:var(--native-expander-summary-line-height);background-color:currentColor;-webkit-mask:var(--_expander-chevron) center / var(--native-expander-chevron-size) no-repeat;mask:var(--_expander-chevron) center / var(--native-expander-chevron-size) no-repeat;opacity:.6;transform:rotate(0);transition:transform .15s ease,opacity .15s ease,background-color .15s ease}details[data-anta][open]>summary:before{opacity:1;transform:rotate(90deg)}details[data-anta]:is([priority=primary],[priority=secondary]):not([open]):hover{background:oklch(from var(--native-expander-bg) calc(l + .01) c h)}details[data-anta]:is([priority=primary],[priority=secondary]):not([open]):active{background:var(--native-expander-bg)}details[data-anta]>summary:hover{color:var(--native-expander-text-hover);text-decoration-line:underline;text-decoration-style:dotted;text-decoration-color:color-mix(in oklch,currentColor 75%,transparent);text-decoration-thickness:1px;text-underline-offset:3px}details[data-anta]>summary:hover:before{opacity:1}details[data-anta]>summary:active{color:var(--native-expander-text)}details[data-anta]>summary:focus-visible{outline:1px solid var(--focus-ring);outline-offset:1px}details[data-anta]>:not(summary){display:block;padding:2px 4px 6px var(--native-expander-gutter);line-height:20px}@media(forced-colors:active){:is(a-expander,details[data-anta]){border-color:CanvasText}:is(a-expander,details[data-anta]):not([priority=primary],[priority=tertiary]){border-style:dashed}:is(a-expander,details[data-anta])[priority=tertiary]{border-color:Canvas}a-expander::part(indicator){forced-color-adjust:none;color:CanvasText}a-expander[disabled]::part(indicator){color:GrayText}a-expander:not(:defined) a-expander-summary:before,details[data-anta]>summary:before{forced-color-adjust:none;background-color:CanvasText}a-expander:not(:defined)[disabled] a-expander-summary:before{background-color:GrayText}}}a-expander-details>p:last-child,a-expander-details>:not([slot])>p:last-child,details[data-anta]>p:last-child,details[data-anta]>:not(summary)>p:last-child{margin-block-end:0}

package/dist/elements/a-expander.js

@@ -17,15 +17,25 @@ const SHADOW_STYLE = `
     align-items: stretch;
   }
 
+  :host([indicator-placement="end"]) .header {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto var(--_expander-indicator-track);
+  }
+
   slot[name="actions"] { display: none; }
   .header.has-actions slot[name="actions"] {
     display: flex;
     align-items: center;
-    gap: 2px;
+    gap: var(--_expander-actions-gap);
     flex-shrink: 0;
-    margin-inline-start: 8px;
+    margin-inline-start: var(--_expander-actions-start);
     /* Inset from the right edge (the host has no padding of its own). */
-    margin-inline-end: 4px;
+    margin-inline-end: var(--_expander-actions-end);
+  }
+  :host([indicator-placement="end"]) .header.has-actions slot[name="actions"] {
+    grid-column: 2;
+    grid-row: 1;
+    z-index: 1;
   }
 
   button {
@@ -34,14 +44,11 @@ const SHADOW_STYLE = `
     background: none;
     border: none;
     margin: 0;
-    /* The button is the full-bleed header: it spans the host's width (flex: 1)
-       and height (.header stretch). The title is inset by --expander-gutter
-       (the chevron lives absolutely inside that gutter, below \u2014 it never pushes
-       the title), so the title + the body share one inset value; 6px block
-       gives the header a touch more height. Restyle it edge-to-edge via
-       ::part(summary). */
+    /* The default button fills the header beside its actions. The title and
+       body share --expander-gutter, and the indicator hangs inside that gutter.
+       End placement switches to the header's subgrid. */
     position: relative;
-    padding: 6px 4px 6px var(--expander-gutter);
+    padding: var(--_expander-header-padding-block) var(--_expander-header-padding-end) var(--_expander-header-padding-block) var(--expander-gutter);
     flex: 1;
     min-width: 0;
     font: inherit;
@@ -58,49 +65,108 @@ const SHADOW_STYLE = `
     outline: none;
   }
 
+  :host([indicator-placement="end"]) button {
+    grid-column: 1 / -1;
+    grid-row: 1;
+    display: grid;
+    grid-template-columns: subgrid;
+    padding: var(--_expander-header-padding-block) 0;
+  }
+  :host([indicator-placement="end"]) slot[name="title"] {
+    grid-column: 1;
+    display: block;
+    min-width: 0;
+    margin-inline-start: var(--expander-gutter);
+  }
+
   button:focus-visible {
     outline: 1px solid var(--focus-ring);
     outline-offset: 0px;
   }
 
-  /* The chevron sits absolutely INSIDE the gutter \u2014 out of flow, so it never
-     pushes the title. Its right edge lands 2px before the gutter (left = gutter
-     - 16px - 2px), leaving a 2px gap before the title; at the default 24px
-     gutter the chevron box is [6px, 22px], and on outdent (gutter 0) it
-     auto-hangs at -18px in the negative gutter. One var drives the title inset,
-     the body inset, and the chevron position. */
-  button::before {
-    content: '';
+  .indicator {
     position: absolute;
-    left: calc(var(--expander-gutter) - 16px - 2px);
+    inset-inline-start: var(--_expander-indicator-start);
     top: 50%;
-    width: 16px;
-    height: 16px;
+    width: var(--_expander-indicator-size);
+    height: var(--_expander-indicator-size);
+    pointer-events: none;
+    opacity: 0.6;
+    transform: translateY(-50%);
+    transition: transform 150ms ease, opacity 150ms ease;
+  }
+  .indicator slot { display: grid; place-items: center; width: 100%; height: 100%; }
+  .indicator slot::slotted(*) { pointer-events: none; }
+  .indicator .glyph {
+    display: block;
+    width: var(--_expander-indicator-size);
+    height: var(--_expander-indicator-size);
     background-color: currentColor;
-    -webkit-mask-image: var(--_expander-chevron);
-            mask-image: var(--_expander-chevron);
+    -webkit-mask-image: var(--_expander-indicator-mask);
+            mask-image: var(--_expander-indicator-mask);
     -webkit-mask-size: contain;
             mask-size: contain;
     -webkit-mask-repeat: no-repeat;
             mask-repeat: no-repeat;
     -webkit-mask-position: center;
             mask-position: center;
-    opacity: 0.6;
-    /* translateY centers it; the open state adds rotate (same transform so the
-       transition animates only the rotation). */
-    transform: translateY(-50%);
-    transition: transform 150ms ease, opacity 150ms ease, background-color 150ms ease;
   }
-  button:enabled:hover::before { opacity: 1; }
-  button[aria-expanded="true"]::before { transform: translateY(-50%) rotate(90deg); opacity: 1; }
+  :host([indicator="plus"]) .indicator .glyph { position: relative; background: none; mask: none; -webkit-mask: none; }
+  :host([indicator="plus"]) .indicator .glyph::before,
+  :host([indicator="plus"]) .indicator .glyph::after {
+    content: '';
+    position: absolute;
+    background: currentColor;
+    border-radius: calc(var(--_expander-indicator-stroke) / 2);
+  }
+  :host([indicator="plus"]) .indicator .glyph::before {
+    width: calc(var(--_expander-indicator-size) - 2 * var(--_expander-indicator-stroke));
+    height: var(--_expander-indicator-stroke);
+    left: var(--_expander-indicator-stroke);
+    top: calc((var(--_expander-indicator-size) - var(--_expander-indicator-stroke)) / 2);
+  }
+  :host([indicator="plus"]) .indicator .glyph::after {
+    width: var(--_expander-indicator-stroke);
+    height: calc(var(--_expander-indicator-size) - 2 * var(--_expander-indicator-stroke));
+    left: calc((var(--_expander-indicator-size) - var(--_expander-indicator-stroke)) / 2);
+    top: var(--_expander-indicator-stroke);
+    transition: transform 150ms ease;
+  }
+  button:enabled:hover .indicator { opacity: 1; }
+  button[aria-expanded="true"] .indicator { transform: translateY(-50%) rotate(90deg); opacity: 1; }
+  :host([indicator="plus"]) button[aria-expanded="true"] .indicator,
+  button[aria-expanded="true"] .indicator.has-pair { transform: translateY(-50%); }
+  :host([indicator="plus"]) button[aria-expanded="true"] .glyph::after { transform: scaleY(0); }
+  button[aria-expanded="false"] slot[name="indicator"]::slotted([data-when="open"]),
+  button[aria-expanded="true"] slot[name="indicator"]::slotted([data-when="closed"]) { display: none; }
+
+  :host([indicator-placement="end"]) .indicator {
+    position: static;
+    grid-column: 3;
+    grid-row: 1;
+    justify-self: end;
+    align-self: center;
+    margin-inline-end: var(--_expander-indicator-edge);
+    transform: rotate(90deg);
+  }
+  :host([indicator-placement="end"]) button[aria-expanded="true"] .indicator { transform: rotate(270deg); }
+  :host([indicator-placement="end"]) .indicator.has-custom,
+  :host([indicator-placement="end"]) .indicator.has-pair { transform: none; }
+  :host([indicator-placement="end"][indicator="plus"]) .indicator { transform: none; }
+  :host([indicator-placement="end"]) button[aria-expanded="true"] .indicator.has-custom { transform: rotate(180deg); }
+  :host([indicator-placement="end"]) button[aria-expanded="true"] .indicator.has-pair,
+  :host([indicator-placement="end"][indicator="plus"]) button[aria-expanded="true"] .indicator { transform: none; }
 
   button:enabled:hover { color: var(--expander-text-hover); }
   :host([priority="tertiary"]) button:enabled:hover { --_summary-underline: underline; }
   button:enabled:active { color: var(--expander-text); }
   button:disabled { cursor: default; }
-  button:enabled:not([aria-expanded="true"]):active::before {
+  button:enabled:not([aria-expanded="true"]):active .indicator {
     opacity: 0.6;
   }
+  @media (prefers-reduced-motion: reduce) {
+    .indicator, :host([indicator="plus"]) .indicator .glyph::after { transition: none; }
+  }
 
   .region {
     display: grid;
@@ -109,11 +175,8 @@ const SHADOW_STYLE = `
   }
   .header:has(button[aria-expanded="true"]) + .region { grid-template-rows: 1fr; }
 
-  /* Outdent flush correction: the host keeps its 1px (transparent) border for
-     cross-priority box stability, which insets the content-box by 1px. Pull the
-     header + region back by that 1px so the title and body land exactly on the
-     surrounding content (the chevron, absolutely positioned inside the header,
-     rides along). Logical start so it follows RTL. */
+  /* The transparent tertiary border still insets the content by 1px. Pull the
+     header and region back so outdent lands flush with surrounding content. */
   :host([priority="tertiary"][outdent]) .header,
   :host([priority="tertiary"][outdent]) .region {
     margin-inline-start: -1px;
@@ -145,8 +208,7 @@ class AExpanderElement extends HTMLElementBase {
   // including custom header content. Guarded for engines without ResizeObserver.
   roundObserver;
   // ElementInternals exposes the open/closed state as a custom state
-  // (`:state(open)`) for consumer styling — e.g. rotating a chevron that lives
-  // in `actions`, or matching an open header to a design. It's NOT a host
+  // (`:state(open)`) for consumer styling, including the indicator. It's NOT a host
   // attribute (declarative-DOM safe: no host mutation, no reconciliation
   // churn), just element-internal state the browser exposes for CSS matching.
   // Guarded for engines without attachInternals / CustomStateSet (no-op there).
@@ -164,7 +226,24 @@ class AExpanderElement extends HTMLElementBase {
     const titleSlot = document.createElement("slot");
     titleSlot.name = "title";
     this.titleSlot = titleSlot;
-    this.summary.append(titleSlot);
+    const indicator = document.createElement("span");
+    indicator.className = "indicator";
+    indicator.setAttribute("part", "indicator");
+    indicator.setAttribute("aria-hidden", "true");
+    indicator.inert = true;
+    const indicatorSlot = document.createElement("slot");
+    indicatorSlot.name = "indicator";
+    const glyph = document.createElement("span");
+    glyph.className = "glyph";
+    indicatorSlot.append(glyph);
+    indicatorSlot.addEventListener("slotchange", () => {
+      const assigned = indicatorSlot.assignedElements();
+      const hasPair = assigned.some((el) => el.hasAttribute("data-when"));
+      indicator.classList.toggle("has-custom", assigned.length > 0 && !hasPair);
+      indicator.classList.toggle("has-pair", hasPair);
+    });
+    indicator.append(indicatorSlot);
+    this.summary.append(titleSlot, indicator);
     this.summary.addEventListener("click", this.onSummaryClick);
     const header = document.createElement("div");
     header.className = "header";

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

@@ -146,8 +146,7 @@ const SHADOW_STYLE = `
     flex-shrink: 0;
     visibility: hidden;
   }
-  :host(:state(filled)) slot[name="clear"] { visibility: visible; }
-  :host(:disabled) slot[name="clear"] { display: none; }
+  :host(:state(filled):not(:disabled)) slot[name="clear"] { visibility: visible; }
 
   .hint {
     display: none;

package/dist/elements/a-input.css

@@ -1 +1 @@
-@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{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-stretch:normal;font-style:normal;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: 999px;@supports (border-radius: attr(probe type(<length>),1px)){--input-round: attr(round type(<length>), 999px)}}a-input[tone]:not([tone=""]):not([status]){--input-tone-source: var(--border-2);--input-border: light-dark( oklch(from var(--input-tone-source) .7 calc(c*.8) h), oklch(from var(--input-tone-source) .5 calc(c*.8) h) );@supports (color: attr(probe type(<color>),red)){--input-tone-source: attr(tone type(<color>), var(--border-2))}}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: light-dark( oklch(from var(--input-status-source) .58 c h), oklch(from var(--input-status-source) .52 c h) )}a-input:disabled{--input-bg: light-dark(#44374b12, #e4d1ef0d);--input-border: light-dark(#44374b26, #e4d1ef1f);--input-text: var(--text-4);--input-label: var(--text-4);--input-hint: var(--text-5);cursor:not-allowed}a-input[status]:disabled{--input-bg: light-dark(#44374b12, #e4d1ef0d);--input-border: light-dark(#44374b26, #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]),textarea[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);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:inherit;font-family:var(--sans-serif);font-size:var(--native-field-font-size);font-weight:400;font-stretch:normal;font-style:normal;line-height:var(--native-field-line-height);transition:box-shadow .12s ease}textarea[data-anta]{block-size:auto;min-block-size:var(--native-field-block-size);resize:vertical;overflow-y:auto}input[data-anta][list]::-webkit-calendar-picker-indicator{opacity:0!important;pointer-events:none!important}@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,textarea[data-anta]: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,textarea[data-anta]: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,textarea[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}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:inherit;font-family:var(--sans-serif);font-size:var(--native-file-font-size);font-weight:400;font-stretch:normal;font-style:normal;line-height:var(--native-file-line-height)}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-variation-settings: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: light-dark( color-mix(in oklch, var(--bg-1) 90%, transparent), color-mix(in oklch, var(--bg-1) 78%, 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:inherit;font-family:var(--sans-serif);font-size:var(--native-field-font-size);font-weight:400;font-stretch:normal;font-style:normal;line-height:var(--native-field-line-height);transition:box-shadow .12s ease}.dark select[data-anta]{--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)}@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],textarea[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],textarea[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],textarea[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],textarea[data-anta][round]{--native-field-round: 999px;@supports (border-radius: attr(probe type(<length>),1px)){--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=""]),textarea[data-anta][tone]:not([tone=""]){--native-field-tone: var(--border-2);--native-field-border: light-dark( oklch(from var(--native-field-tone) .7 calc(c*.8) h), oklch(from var(--native-field-tone) .5 calc(c*.8) h) );@supports (color: attr(probe type(<color>),red)){--native-field-tone: attr(tone type(<color>), var(--border-2))}}@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;font-variation-settings: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-size:14px;font-weight:400;font-stretch:normal;font-style:normal;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 base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{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;background:var(--input-bg);box-shadow:inset 0 0 0 var(--input-border-width) var(--input-rest-border);color:var(--input-placeholder);font-family:var(--sans-serif);font-size:15px;font-weight:400;font-stretch:normal;font-style:normal;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-rest-border: var(--input-border);--input-border-width: .5px;--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[priority=secondary],a-input[priority=tertiary]{--input-bg: transparent}a-input[priority=tertiary]{--input-rest-border: transparent}@media(hover:hover)and (pointer:fine){a-input:not(:defined):not(:disabled):hover:after{box-shadow:inset 0 0 0 1px var(--input-border)}}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: 999px;@supports (border-radius: attr(probe type(<length>),1px)){--input-round: attr(round type(<length>), 999px)}}a-input[tone]:not([tone=""]):not([status]){--input-tone-source: var(--border-2);--input-border: light-dark( oklch(from var(--input-tone-source) .7 calc(c*.8) h), oklch(from var(--input-tone-source) .5 calc(c*.8) h) );@supports (color: attr(probe type(<color>),red)){--input-tone-source: attr(tone type(<color>), var(--border-2))}}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-width: 1px;--input-rest-border: var(--input-border);--input-border: light-dark( oklch(from var(--input-status-source) .58 c h), oklch(from var(--input-status-source) .52 c h) )}a-input:disabled{--input-bg: light-dark(#44374b12, #e4d1ef0d);--input-border: light-dark(#44374b26, #e4d1ef1f);--input-text: var(--text-4);--input-label: var(--text-4);--input-hint: var(--text-5);cursor:not-allowed}a-input[status]:disabled{--input-bg: light-dark(#44374b12, #e4d1ef0d);--input-border: light-dark(#44374b26, #e4d1ef1f);--input-hint: var(--text-5)}a-input[priority=secondary]:disabled,a-input[priority=tertiary]:disabled{--input-bg: transparent}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]),textarea[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);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:inherit;font-family:var(--sans-serif);font-size:var(--native-field-font-size);font-weight:400;font-stretch:normal;font-style:normal;line-height:var(--native-field-line-height);transition:box-shadow .12s ease}textarea[data-anta]{block-size:auto;min-block-size:var(--native-field-block-size);resize:vertical;overflow-y:auto}input[data-anta][list]::-webkit-calendar-picker-indicator{opacity:0!important;pointer-events:none!important}@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,textarea[data-anta]: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,textarea[data-anta]: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,textarea[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}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:inherit;font-family:var(--sans-serif);font-size:var(--native-file-font-size);font-weight:400;font-stretch:normal;font-style:normal;line-height:var(--native-file-line-height)}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-variation-settings: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: light-dark( color-mix(in oklch, var(--bg-1) 90%, transparent), color-mix(in oklch, var(--bg-1) 78%, 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:inherit;font-family:var(--sans-serif);font-size:var(--native-field-font-size);font-weight:400;font-stretch:normal;font-style:normal;line-height:var(--native-field-line-height);transition:box-shadow .12s ease}.dark select[data-anta]{--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)}@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],textarea[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],textarea[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],textarea[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],textarea[data-anta][round]{--native-field-round: 999px;@supports (border-radius: attr(probe type(<length>),1px)){--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=""]),textarea[data-anta][tone]:not([tone=""]){--native-field-tone: var(--border-2);--native-field-border: light-dark( oklch(from var(--native-field-tone) .7 calc(c*.8) h), oklch(from var(--native-field-tone) .5 calc(c*.8) h) );@supports (color: attr(probe type(<color>),red)){--native-field-tone: attr(tone type(<color>), var(--border-2))}}@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;font-variation-settings: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-size:14px;font-weight:400;font-stretch:normal;font-style:normal;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

@@ -60,8 +60,8 @@ const SHADOW_STYLE = `
   }
 
   .field {
-    --_bc: var(--input-border);
-    --_bw: 0.5px;
+    --_bc: var(--input-rest-border);
+    --_bw: var(--input-border-width);
     --_pad-block: 4px;
 
     display: flex;
@@ -74,7 +74,6 @@ const SHADOW_STYLE = `
     transition: box-shadow 120ms ease;
   }
   :host([multiline]) .field { align-items: stretch; }
-  :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; }
@@ -82,11 +81,12 @@ const SHADOW_STYLE = `
   :host([round]) .field { border-radius: var(--input-round, 999px); }
 
   @media (hover: hover) and (pointer: fine) {
-    :host(:not(:disabled)) .field:hover { --_bw: 1px; }
+    :host(:not(:disabled)) .field:hover { --_bw: 1px; --_bc: var(--input-border); }
   }
   :host(:not([readonly])) .field:has(input:focus, textarea:focus, button:focus-visible),
   :host([readonly]:state(kb-focus)) .field {
     --_bw: 1px;
+    --_bc: var(--input-border);
     outline: 1px solid var(--focus-ring);
     outline-offset: 1px;
   }
@@ -163,10 +163,13 @@ const SHADOW_STYLE = `
   :host(:disabled) slot[name="leading"],
   :host(:disabled) slot[name="trailing"] { opacity: 0.5; pointer-events: none; }
 
-  slot[name="clear"] { display: none; flex-shrink: 0; }
-  :host(:state(filled)) slot[name="clear"] { display: flex; align-items: center; }
-  :host(:disabled) slot[name="clear"],
-  :host([readonly]) slot[name="clear"] { display: none; }
+  slot[name="clear"] {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    visibility: hidden;
+  }
+  :host(:state(filled):not(:disabled):not([readonly])) slot[name="clear"] { visibility: visible; }
 
   :host([multiline]:state(filled)) slot[name="clear"] {
     align-self: flex-start;

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

@@ -206,7 +206,7 @@ export declare class AMenuElement extends HTMLElementBase {
      *   - nothing → keep open (plain custom content doesn't dismiss).
      */
     private onSurfaceClick;
-    /** Close the whole open menu system from the root down. */
+    /** Close this popup inside persistent content, or the menu system otherwise. */
     private closeSystem;
     /** 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-menu.js

@@ -22,9 +22,20 @@ const openStack = [];
 let docBound = false;
 let boundDoc = null;
 let boundView = null;
+let mouseX = null;
+let mouseY = 0;
+function trackMouse(e) {
+  mouseX = e.pointerType === "mouse" ? e.clientX : null;
+  if (mouseX !== null) mouseY = e.clientY;
+}
+function mouseInside(rect) {
+  return mouseX !== null && mouseX >= rect.left && mouseX < rect.right && mouseY >= rect.top && mouseY < rect.bottom;
+}
 function bindDocListeners(doc, view) {
   if (docBound) return;
   doc.addEventListener("pointerdown", onDocPointerDown, true);
+  doc.addEventListener("pointermove", trackMouse, { capture: true, passive: true });
+  doc.addEventListener("pointerleave", clearMouse);
   doc.addEventListener("keydown", onDocKeyDown, true);
   doc.addEventListener("keyup", onDocKeyUp, true);
   doc.addEventListener("contextmenu", onDocContextMenu, true);
@@ -36,6 +47,8 @@ function bindDocListeners(doc, view) {
 function unbindDocListeners() {
   if (!docBound) return;
   boundDoc?.removeEventListener("pointerdown", onDocPointerDown, true);
+  boundDoc?.removeEventListener("pointermove", trackMouse, true);
+  boundDoc?.removeEventListener("pointerleave", clearMouse);
   boundDoc?.removeEventListener("keydown", onDocKeyDown, true);
   boundDoc?.removeEventListener("keyup", onDocKeyUp, true);
   boundDoc?.removeEventListener("contextmenu", onDocContextMenu, true);
@@ -43,6 +56,10 @@ function unbindDocListeners() {
   boundDoc = null;
   boundView = null;
   docBound = false;
+  mouseX = null;
+}
+function clearMouse() {
+  mouseX = null;
 }
 function menuIndexForEvent(e, primaryClick = false) {
   const path = e.composedPath();
@@ -75,6 +92,7 @@ setMenuPresence({
   contains: nodeHitsMenus
 });
 function onDocPointerDown(e) {
+  trackMouse(e);
   if (!openStack.length) return;
   const index = menuIndexForEvent(e, e.button === 0);
   openStack[index + 1]?.requestClose(e);
@@ -145,6 +163,7 @@ class AMenuElement extends HTMLElementBase {
   // Submenu hover-intent timers.
   openTimer;
   closeTimer;
+  #holdHoverClose = false;
   // Typeahead state (root navigation).
   typeBuffer = "";
   typeTimer;
@@ -307,7 +326,10 @@ class AMenuElement extends HTMLElementBase {
     this.surface.append(header, scroll, footer);
     this.surface.addEventListener("pointerenter", (e) => {
       if (e.pointerType !== "mouse") return;
-      if (this.isSubmenu) this.cancelCloseTimer();
+      if (this.isSubmenu) {
+        this.#holdHoverClose = false;
+        this.cancelCloseTimer();
+      }
     });
     this.surface.addEventListener("pointerleave", (e) => {
       if (e.pointerType !== "mouse") return;
@@ -761,7 +783,11 @@ class AMenuElement extends HTMLElementBase {
       if (parent) {
         const pidx = openStack.indexOf(parent);
         if (pidx !== -1) {
-          for (let i = openStack.length - 1; i > pidx; i--) openStack[i]._doHide();
+          for (let i = openStack.length - 1; i > pidx; i--) {
+            const menu = openStack[i];
+            if (menu !== this && menu.isOpen && !menu._dismissNotified) menu.emitChange("closed");
+            menu._doHide();
+          }
           openStack.length = pidx + 1;
         }
       }
@@ -850,6 +876,7 @@ class AMenuElement extends HTMLElementBase {
   _doShow(coord, instant = false) {
     if (this.surface.isConnected && !this._shown) this.surface.showPopover();
     this._shown = true;
+    this.#holdHoverClose = false;
     this._dismissNotified = false;
     this.reflectOpen(true);
     this.hideAnchorTooltip();
@@ -866,9 +893,18 @@ class AMenuElement extends HTMLElementBase {
   }
   /** Shadow-only hide. */
   _doHide() {
+    const parent = this.parentElement?.closest("a-menu");
+    if (this._shown && parent && mouseX !== null && mouseInside(this.surface.getBoundingClientRect())) {
+      for (let ancestor = parent; ancestor; ancestor = ancestor.parentElement?.closest("a-menu")) {
+        if (!ancestor.isSubmenu || !ancestor.#isHover || !ancestor._shown || ancestor.surface.matches(":hover")) continue;
+        ancestor.#holdHoverClose = true;
+        ancestor.cancelCloseTimer();
+      }
+    }
     this.#stopAnchorTracking();
     if (this.surface.isConnected && this._shown) this.surface.hidePopover();
     this._shown = false;
+    this.#holdHoverClose = false;
     this.reflectOpen(false);
     this.cancelOpenTimer();
     this.cancelCloseTimer();
@@ -1059,6 +1095,10 @@ class AMenuElement extends HTMLElementBase {
    *   - nothing → keep open (plain custom content doesn't dismiss).
    */
   onSurfaceClick = (e) => {
+    for (const node of e.composedPath()) {
+      if (node === this.surface) break;
+      if (node instanceof AMenuElement && node !== this) return;
+    }
     let contain = false;
     let exemptTrigger = false;
     for (const node of e.composedPath()) {
@@ -1098,11 +1138,15 @@ class AMenuElement extends HTMLElementBase {
         return this.closeSystem(e);
       }
       if (node.matches("a[data-anta-menu-item]")) return this.closeSystem(e);
-      if (node.hasAttribute("data-menu-close")) return this.closeSystem(e);
+      if (node.hasAttribute("data-menu-close")) return this.closeSystem(e, true);
     }
   };
-  /** Close the whole open menu system from the root down. */
-  closeSystem(e) {
+  /** Close this popup inside persistent content, or the menu system otherwise. */
+  closeSystem(e, explicit = false) {
+    if (!explicit && this.closest("[data-menu-open]")) {
+      this.requestClose(e);
+      return;
+    }
     const root = openStack[0] ?? this;
     root.requestClose(e);
   }
@@ -1242,7 +1286,9 @@ class AMenuElement extends HTMLElementBase {
       let onLeave;
       if (this.#isHover) {
         onEnter = (e) => {
-          if (e.pointerType === "mouse") this.scheduleOpen();
+          if (e.pointerType !== "mouse") return;
+          this.#holdHoverClose = false;
+          this.scheduleOpen();
         };
         onLeave = (e) => {
           if (e.pointerType === "mouse") this.scheduleClose();
@@ -1275,6 +1321,7 @@ class AMenuElement extends HTMLElementBase {
       return;
     } else {
       const onClick = (e) => {
+        if (anchor.matches("a-input") && e.composedPath().some((node) => node instanceof Element && node.getAttribute("slot") === "clear")) return;
         const viaKeyboard = e.detail === 0;
         const coord = this.#isCoord ? viaKeyboard ? this.#anchorCoord(anchor) : [e.clientX, e.clientY] : void 0;
         if (this._shown) this.requestClose(e);
@@ -1320,9 +1367,12 @@ class AMenuElement extends HTMLElementBase {
   scheduleClose() {
     this.cancelOpenTimer();
     if (!this._shown) return;
+    if (this.#holdHoverClose) return;
     if (this.#hasKeyboardFocusInside) return;
-    if (openStack.some((m) => m !== this && (this.contains(m) || m.triggerAnchor != null && this.contains(m.triggerAnchor))))
+    if (openStack.some((m) => m !== this && (this.contains(m) || m.triggerAnchor != null && this.contains(m.triggerAnchor)))) {
+      this.cancelCloseTimer();
       return;
+    }
     this.cancelCloseTimer();
     this.closeTimer = setTimeout(() => {
       this.closeTimer = void 0;