@antadesign/anta 0.3.4 → 0.3.6

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}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-border-hover: var(--border-1);--input-text: var(--text-1);--input-label: var(--text-3);--input-placeholder: var(--text-4);--input-adornment: var(--text-4);--input-hint: var(--text-3);width:100%}a-input[round]{--input-round: attr(round type(<length>), 999px)}a-input[tone]:not([tone=""]){--input-tone-source: attr(tone type(<color>), var(--border-2));--input-border: oklch(from var(--input-tone-source) .7 calc(c*.8) h);--input-border-hover: oklch(from var(--input-tone-source) .6 c h);.dark &{--input-border: oklch(from var(--input-tone-source) .5 calc(c*.8) h);--input-border-hover: oklch(from var(--input-tone-source) .6 c h)}}a-input[status=critical]{--input-bg: #fefbfb;--input-border: #de4545;--input-border-hover: #de4545;--input-hint: #c9302c}a-input[status=warning]{--input-bg: #fefbf6;--input-border: #ae6613;--input-border-hover: #ae6613;--input-hint: #995200}a-input[status=success]{--input-bg: #f7fcf9;--input-border: #329550;--input-border-hover: #329550;--input-hint: #2a7e43}a-input[status=info]{--input-bg: #fbfcfe;--input-border: #2686d9;--input-border-hover: #2686d9;--input-hint: #175082}a-input[status=brand]{--input-bg: #fcfcfe;--input-border: #7460d7;--input-border-hover: #7460d7;--input-hint: #5f4bc3}.dark a-input[status=critical]{--input-bg: #1f0506;--input-border: #c9302c;--input-border-hover: #c9302c;--input-hint: #e25858}.dark a-input[status=warning]{--input-bg: #120a03;--input-border: #995200;--input-border-hover: #995200;--input-hint: #c37416}.dark a-input[status=success]{--input-bg: #041008;--input-border: #2a7e43;--input-border-hover: #2a7e43;--input-hint: #3aab5c}.dark a-input[status=info]{--input-bg: #040d18;--input-border: #1f6eb2;--input-border-hover: #1f6eb2;--input-hint: #3e93dd}.dark a-input[status=brand]{--input-bg: #0b0916;--input-border: #5f4bc3;--input-border-hover: #5f4bc3;--input-hint: #8270db}a-input:disabled{--input-bg: #44374b12;--input-border: #44374b26;--input-border-hover: #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-border-hover: #44374b26;--input-hint: var(--text-5)}.dark a-input:disabled{--input-bg: #e4d1ef0d;--input-border: #e4d1ef1f;--input-border-hover: #e4d1ef1f}.dark a-input[status]:disabled{--input-bg: #e4d1ef0d;--input-border: #e4d1ef1f;--input-border-hover: #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}.dark a-input:not([status]){--input-border: #49424c;--input-border-hover: #635b65}.dark a-input[status=success]{--input-border: var(--border-1-success);--input-border-hover: var(--border-1-success)}}
+@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}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-border-hover: var(--border-1);--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);width:100%}a-input[round]{--input-round: attr(round type(<length>), 999px)}a-input[tone]:not([tone=""]){--input-tone-source: attr(tone type(<color>), var(--border-2));--input-border: oklch(from var(--input-tone-source) .7 calc(c*.8) h);--input-border-hover: oklch(from var(--input-tone-source) .6 c h);.dark &{--input-border: oklch(from var(--input-tone-source) .5 calc(c*.8) h);--input-border-hover: oklch(from var(--input-tone-source) .6 c h)}}a-input[status=critical]{--input-bg: #fefbfb;--input-border: #de4545;--input-border-hover: #de4545;--input-hint: #c9302c}a-input[status=warning]{--input-bg: #fefbf6;--input-border: #ae6613;--input-border-hover: #ae6613;--input-hint: #995200}a-input[status=success]{--input-bg: #f7fcf9;--input-border: #329550;--input-border-hover: #329550;--input-hint: #2a7e43}a-input[status=info]{--input-bg: #fbfcfe;--input-border: #2686d9;--input-border-hover: #2686d9;--input-hint: #175082}a-input[status=brand]{--input-bg: #fcfcfe;--input-border: #7460d7;--input-border-hover: #7460d7;--input-hint: #5f4bc3}.dark a-input[status=critical]{--input-bg: #1f0506;--input-border: #c9302c;--input-border-hover: #c9302c;--input-hint: #e25858}.dark a-input[status=warning]{--input-bg: #120a03;--input-border: #995200;--input-border-hover: #995200;--input-hint: #c37416}.dark a-input[status=success]{--input-bg: #041008;--input-border: #2a7e43;--input-border-hover: #2a7e43;--input-hint: #3aab5c}.dark a-input[status=info]{--input-bg: #040d18;--input-border: #1f6eb2;--input-border-hover: #1f6eb2;--input-hint: #3e93dd}.dark a-input[status=brand]{--input-bg: #0b0916;--input-border: #5f4bc3;--input-border-hover: #5f4bc3;--input-hint: #8270db}a-input:disabled{--input-bg: #44374b12;--input-border: #44374b26;--input-border-hover: #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-border-hover: #44374b26;--input-hint: var(--text-5)}.dark a-input:disabled{--input-bg: #e4d1ef0d;--input-border: #e4d1ef1f;--input-border-hover: #e4d1ef1f}.dark a-input[status]:disabled{--input-bg: #e4d1ef0d;--input-border: #e4d1ef1f;--input-border-hover: #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}.dark a-input:not([status]){--input-border: #49424c;--input-border-hover: #635b65}.dark a-input[status=success]{--input-border: var(--border-1-success);--input-border-hover: var(--border-1-success)}}

package/dist/elements/a-input.js

@@ -121,7 +121,13 @@ const SHADOW_STYLE = `
   input::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; display: none; }
   input::-ms-clear, input::-ms-reveal { display: none; }
 
-  slot[name="leading"], slot[name="trailing"] { display: none; color: var(--input-adornment); }
+  slot[name="leading"], slot[name="trailing"] {
+    display: none;
+    color: var(--input-adornment);
+    font-size: var(--_fs);
+    line-height: var(--_lh);
+    font-variation-settings: "wdth" 88, "slnt" 0, "ital" 0;
+  }
   .field.has-leading slot[name="leading"],
   .field.has-trailing slot[name="trailing"] {
     display: flex;

package/dist/elements/a-menu-item.css

@@ -1 +1 @@
-@layer anta{a-menu-item:not(:defined){display:none}a-menu-item{--menu-item-color: var(--text-2);--menu-item-icon-color: var(--text-3);--menu-item-hint-color: var(--text-3);--menu-item-hover: 5%;--menu-item-active: 8%;--menu-item-selected: 8%;--menu-item-timing-in: 60ms ease-in-out;--menu-item-timing-out: .28s ease-out;--menu-item-padding-x: 8px;--menu-item-padding-y: 6px;display:flex;flex-shrink:0;align-items:center;gap:.6ch;box-sizing:border-box;width:100%;min-height:28px;padding-block:var(--menu-item-padding-y);padding-inline:var(--menu-item-padding-x);border-radius:var(--radius-sm, 4px);color:var(--menu-item-color);background:transparent;transition:background-color var(--menu-item-timing-out);font:inherit;font-size:14px;line-height:16px;text-align:left;white-space:nowrap;cursor:pointer;user-select:none;outline:none}a-menu[round] a-menu-item{border-radius:999px}a-menu-item:hover,a-menu-item:focus-visible,a-menu-item:has(>a-menu:state(open)),a-menu-item:state(active){background:color-mix(in oklch,currentColor var(--menu-item-hover),transparent);transition:background-color var(--menu-item-timing-in)}a-menu-item:active{background:color-mix(in oklch,currentColor var(--menu-item-active),transparent);transition:none}a-menu-item[selected]{background:color-mix(in oklch,currentColor var(--menu-item-selected),transparent)}a-menu-item:focus-visible{outline:1px solid var(--focus-ring);outline-offset:1px}a-menu-item>a-menu-item-label,a-menu-item>a-menu-item-text{flex:1 1 auto;min-width:0}a-menu-item>a-menu-item-text{display:flex;flex-direction:column}a-menu-item:has(>a-menu-item-text){align-items:flex-start}a-menu-item-label{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis}a-menu-item-hint{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;margin-block-start:1px;color:var(--menu-item-hint-color);font-size:12px;line-height:15px}a-menu-item>a-icon{flex:none;--icon-size: 16px;color:var(--menu-item-icon-color)}a-menu-item>a-checkbox,a-menu-item>a-radio{flex:none;--checkbox-gap: 0;--radio-gap: 0;pointer-events:none}a-menu-item:has(>:is(a-icon,a-checkbox,a-radio,[data-indicator]):first-child:not(:only-child)){padding-inline-start:var(--menu-item-padding-y)}a-menu-item:not([submenu]):has(>a-icon:last-child:not(:only-child)){padding-inline-end:max(0px,var(--menu-item-padding-x) - 2px)}a-menu-item>kbd{flex:none;margin-left:auto;padding-left:12px;color:var(--text-5);font:inherit;font-size:1em;letter-spacing:.1ch;white-space:nowrap}a-menu-item[submenu]>a-icon:last-of-type{margin-left:auto}a-menu-item[submenu]>a-icon:last-of-type,a-menu-item>a-icon:last-child:not(:only-child){position:relative;inset-inline-end:-2px}a-menu-item[tone=brand],a-menu-item[tone=info],a-menu-item[tone=success],a-menu-item[tone=warning],a-menu-item[tone=critical]{--menu-item-icon-color: var(--menu-item-color)}a-menu-item[tone=brand]{--menu-item-color: var(--text-2-brand);--menu-item-hint-color: var(--text-3-brand)}a-menu-item[tone=info]{--menu-item-color: var(--text-2-info);--menu-item-hint-color: var(--text-3-info)}a-menu-item[tone=success]{--menu-item-color: var(--text-2-success);--menu-item-hint-color: var(--text-3-success)}a-menu-item[tone=warning]{--menu-item-color: var(--text-2-warning);--menu-item-hint-color: var(--text-3-warning)}a-menu-item[tone=critical]{--menu-item-color: var(--text-2-critical);--menu-item-hint-color: var(--text-3-critical)}a-menu-item[tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]){--menu-item-tone-source: attr(tone type(<color>), var(--text-2));--menu-item-color: oklch(from var(--menu-item-tone-source) .45 c h);--menu-item-icon-color: var(--menu-item-color);--menu-item-hint-color: oklch(from var(--menu-item-tone-source) .55 calc(c*.85) h);.dark &{--menu-item-color: oklch(from var(--menu-item-tone-source) .78 c h);--menu-item-hint-color: oklch(from var(--menu-item-tone-source) .68 calc(c*.85) h)}}a-menu-item[disabled]{--menu-item-color: var(--text-5);--menu-item-icon-color: var(--text-5);--menu-item-hint-color: var(--text-5);cursor:default;pointer-events:none}.dark a-menu-item{--menu-item-hover: 10%;--menu-item-active: 14%;--menu-item-selected: 14%}}
+@layer anta{a-menu-item:not(:defined){display:none}a-menu-item{--menu-item-color: var(--text-2);--menu-item-icon-color: var(--text-3);--menu-item-hint-color: var(--text-3);--menu-item-hover: 5%;--menu-item-active: 8%;--menu-item-selected: 8%;--menu-item-timing-in: 60ms ease-in-out;--menu-item-timing-out: .28s ease-out;--menu-item-padding-x: 8px;--menu-item-padding-y: 6px;display:flex;flex-shrink:0;align-items:center;gap:.6ch;box-sizing:border-box;width:100%;min-height:28px;padding-block:var(--menu-item-padding-y);padding-inline:var(--menu-item-padding-x);border-radius:var(--radius-sm, 4px);color:var(--menu-item-color);background:transparent;transition:background-color var(--menu-item-timing-out);font:inherit;font-size:14px;line-height:16px;text-align:left;white-space:nowrap;cursor:pointer;user-select:none;outline:none}a-menu[round] a-menu-item{border-radius:999px}a-menu-item:hover,a-menu-item:focus-visible,a-menu-item:has(>a-menu:state(open)),a-menu-item:state(active){background:color-mix(in oklch,currentColor var(--menu-item-hover),transparent);transition:background-color var(--menu-item-timing-in)}a-menu-item:active{background:color-mix(in oklch,currentColor var(--menu-item-active),transparent);transition:none}a-menu-item[selected]{background:color-mix(in oklch,currentColor var(--menu-item-selected),transparent)}a-menu-item:focus-visible{outline:1px solid var(--focus-ring);outline-offset:1px}a-menu-item>a-menu-item-label,a-menu-item>a-menu-item-text{flex:1 1 auto;min-width:0}a-menu-item>a-menu-item-text{display:flex;flex-direction:column}a-menu-item:has(>a-menu-item-text){align-items:flex-start}a-menu-item-label{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis}a-menu-item-hint{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;margin-block-start:1px;color:var(--menu-item-hint-color);font-size:12px;line-height:15px}a-menu-item>a-icon{flex:none;--icon-size: 16px;color:var(--menu-item-icon-color)}a-menu-item>a-checkbox,a-menu-item>a-radio{flex:none;--checkbox-gap: 0;--radio-gap: 0;pointer-events:none}a-menu-item>a-checkbox:before,a-menu-item>a-checkbox:after,a-menu-item>a-radio:before{margin-block-start:0}a-menu-item>a-radio:after{margin-block-start:calc((var(--radio-control-size) - (var(--radio-dot-size) - var(--_radio-dot-adjust))) / 2)}a-menu-item:has(>:is(a-icon,a-checkbox,a-radio,[data-indicator]):first-child:not(:only-child)){padding-inline-start:var(--menu-item-padding-y)}a-menu-item:not([submenu]):has(>a-icon:last-child:not(:only-child)){padding-inline-end:max(0px,var(--menu-item-padding-x) - 2px)}a-menu-item>kbd{flex:none;margin-left:auto;padding-left:12px;color:var(--text-5);font:inherit;font-size:1em;letter-spacing:.1ch;white-space:nowrap}a-menu-item[submenu]>a-icon:last-of-type{margin-left:auto}a-menu-item[submenu]>a-icon:last-of-type,a-menu-item>a-icon:last-child:not(:only-child){position:relative;inset-inline-end:-2px}a-menu-item[tone=brand],a-menu-item[tone=info],a-menu-item[tone=success],a-menu-item[tone=warning],a-menu-item[tone=critical]{--menu-item-icon-color: var(--menu-item-color)}a-menu-item[tone=brand]{--menu-item-color: var(--text-2-brand);--menu-item-hint-color: var(--text-3-brand)}a-menu-item[tone=info]{--menu-item-color: var(--text-2-info);--menu-item-hint-color: var(--text-3-info)}a-menu-item[tone=success]{--menu-item-color: var(--text-2-success);--menu-item-hint-color: var(--text-3-success)}a-menu-item[tone=warning]{--menu-item-color: var(--text-2-warning);--menu-item-hint-color: var(--text-3-warning)}a-menu-item[tone=critical]{--menu-item-color: var(--text-2-critical);--menu-item-hint-color: var(--text-3-critical)}a-menu-item[tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]){--menu-item-tone-source: attr(tone type(<color>), var(--text-2));--menu-item-color: oklch(from var(--menu-item-tone-source) .45 c h);--menu-item-icon-color: var(--menu-item-color);--menu-item-hint-color: oklch(from var(--menu-item-tone-source) .55 calc(c*.85) h);.dark &{--menu-item-color: oklch(from var(--menu-item-tone-source) .78 c h);--menu-item-hint-color: oklch(from var(--menu-item-tone-source) .68 calc(c*.85) h)}}a-menu-item[disabled]{--menu-item-color: var(--text-5);--menu-item-icon-color: var(--text-5);--menu-item-hint-color: var(--text-5);cursor:default;pointer-events:none}.dark a-menu-item{--menu-item-hover: 10%;--menu-item-active: 14%;--menu-item-selected: 14%}}

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

@@ -110,8 +110,11 @@ export declare class AMenuElement extends HTMLElementBase {
      *  the seat target — the cursor lands on the first real option — but they stay
      *  arrow-reachable. */
     private resetActive;
-    /** Combobox arrow / Home / End / Enter handling; returns true if it consumed the
-     *  key (so `handleKey` stops). Any other key falls through to the input (typing). */
+    /** Combobox arrow / PageUp / PageDown / Enter handling; returns true if it
+     *  consumed the key (so `handleKey` stops). Home / End are deliberately NOT
+     *  handled: focus is in a text field, so they must reach it for caret movement
+     *  (line start/end); PageUp / PageDown jump the option list to first / last
+     *  instead. Any other key falls through to the input (typing). */
     private handleComboKey;
     /** Public imperative API. Routes through the same intent path as the
      *  triggers, so it emits `statechange` and respects controlled mode. */

package/dist/elements/a-menu.js

@@ -451,11 +451,22 @@ class AMenuElement extends HTMLElementBase {
     el.style.setProperty("--fade-bottom", bottom ? "14px" : "0px");
   }
   /* ------------------------------ combobox mode ------------------------------ */
-  /** The filter field slotted into THIS menu (never a submenu's), or null. Its
+  /** Combobox-anchor mode: the trigger anchor ITSELF is the filter field (it
+   *  carries `[data-menu-search]`), as in `InputAutocomplete` where an editable
+   *  `<a-input>` is the always-visible field the menu hangs under. null for the
+   *  normal case — `Select`/`SelectFaceted` slot the field as a child, so their
+   *  anchor never carries the marker and this stays inert for them. */
+  get #comboAnchor() {
+    const a = this.triggerAnchor;
+    return a?.matches("[data-menu-search]") ? a : null;
+  }
+  /** The filter field of THIS menu, or null. A slotted child (never a submenu's)
+   *  wins; else the anchor when it's the field (combobox-anchor mode). Its
    *  presence switches the menu to the combobox keyboard. */
   get #searchField() {
     const el = this.querySelector("[data-menu-search]");
-    return el && el.closest("a-menu") === this ? el : null;
+    if (el && el.closest("a-menu") === this) return el;
+    return this.#comboAnchor;
   }
   /** Move the combobox cursor. Sets the item's `active` **property** (off-DOM
    *  `:state(active)`, no attribute churn) for the highlight, and REPORTS the
@@ -481,11 +492,15 @@ class AMenuElement extends HTMLElementBase {
   resetActive() {
     const q = this.#searchField?.value;
     if (!q || !q.trim()) return this.setActive(null);
+    if (this.#comboAnchor) return this.setActive(null);
     const items = this.focusableItems();
     this.setActive(items.find((it) => !it.hasAttribute("data-menu-skip-active")) ?? items[0] ?? null);
   }
-  /** Combobox arrow / Home / End / Enter handling; returns true if it consumed the
-   *  key (so `handleKey` stops). Any other key falls through to the input (typing). */
+  /** Combobox arrow / PageUp / PageDown / Enter handling; returns true if it
+   *  consumed the key (so `handleKey` stops). Home / End are deliberately NOT
+   *  handled: focus is in a text field, so they must reach it for caret movement
+   *  (line start/end); PageUp / PageDown jump the option list to first / last
+   *  instead. Any other key falls through to the input (typing). */
   handleComboKey(e) {
     const items = this.focusableItems();
     const idx = this.activeItem ? items.indexOf(this.activeItem) : -1;
@@ -498,11 +513,11 @@ class AMenuElement extends HTMLElementBase {
         e.preventDefault();
         this.setActive(items[idx <= 0 ? items.length - 1 : idx - 1] ?? null);
         return true;
-      case "Home":
+      case "PageUp":
         e.preventDefault();
         this.setActive(items[0] ?? null);
         return true;
-      case "End":
+      case "PageDown":
         e.preventDefault();
         this.setActive(items[items.length - 1] ?? null);
         return true;
@@ -561,6 +576,15 @@ class AMenuElement extends HTMLElementBase {
    *  uncontrolled and not vetoed. */
   requestClose(originEvent) {
     if (!this._shown) return;
+    const idx = openStack.indexOf(this);
+    if (idx !== -1) {
+      for (let i = openStack.length - 1; i > idx; i--) {
+        const m = openStack[i];
+        if (m.isOpen && !m._dismissNotified) m.emitChange("closed");
+        m._doHide();
+      }
+      openStack.length = idx + 1;
+    }
     const ok = this.emitChange("closed", { originEvent });
     if (this.isControlled) {
       this._dismissNotified = true;
@@ -742,7 +766,8 @@ class AMenuElement extends HTMLElementBase {
       } else {
         const a = this.triggerAnchor ? anchorRect(this.triggerAnchor) : null;
         if (!a) return;
-        surface.style.setProperty("--_anchor-width", `${Math.ceil(a.width)}px`);
+        if (this.hasAttribute("autowidth")) surface.style.removeProperty("--_anchor-width");
+        else surface.style.setProperty("--_anchor-width", `${Math.ceil(a.width)}px`);
         const p = this.#placement;
         const spaceBelow = vh - a.bottom - 2 * MARGIN;
         const spaceAbove = a.top - 2 * MARGIN;
@@ -838,6 +863,10 @@ class AMenuElement extends HTMLElementBase {
       return;
     }
     if (e.key === "Tab") {
+      if (this.#comboAnchor) {
+        this.requestClose(e);
+        return;
+      }
       const f = this.focusables();
       if (!f.length) return;
       e.preventDefault();
@@ -959,6 +988,12 @@ class AMenuElement extends HTMLElementBase {
         anchor.removeEventListener("contextmenu", onContext);
         this.listening = false;
       };
+    } else if (this.#comboAnchor) {
+      this.teardown = () => {
+        this.listening = false;
+      };
+      this.listening = true;
+      return;
     } else {
       const onClick = (e) => {
         const viaKeyboard = e.detail === 0;

package/dist/elements/a-tab.css

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

package/dist/elements/a-tabs.css

@@ -1 +1 @@
-@layer anta{a-tabs{--_fs: 15px;--_lh: 20px;--_pb: 1px;--tab-padding-x: 9px;--tab-padding-y: calc((10px - var(--_pb)) / 2);--tab-radius: 4px;--tabs-gap: 3px;--tab-timing: .15s ease-out;--tabs-tone-source: #635b65;--tab-fg-rest: var(--text-3);--tab-fg-hover: var(--text-1);--tab-selected-text: var(--text-1);--tab-text-2: var(--text-2);--tabs-track-bg: color-mix(in oklch, #44374b 6%, transparent);--tabs-track-border: var(--border-4);--tab-pill-bg: var(--bg-1);--tab-pill-shadow: 0 0 3px 0 var(--border-3);--tab-secondary-bg: color-mix(in oklch, #44374b 3%, transparent);--tab-secondary-border: var(--border-3);--tab-secondary-shadow: 0 0 0px 1px var(--tab-secondary-border);display:flex;flex-direction:row;align-items:stretch;gap:var(--tabs-gap);width:fit-content;align-self:flex-start;min-width:0;max-width:100%;overflow:hidden;scroll-behavior:smooth}a-tabs[size=small]{--_fs: 13px;--_lh: 16px;--_pb: .5px;--tab-padding-x: 7px}a-tabs[size=large]{--_fs: 17px;--_lh: 24px;--_pb: 1.5px;--tab-padding-x: 13px}a-tabs a-tab a-icon{--icon-size: 16px}a-tabs[size=small] a-tab a-icon{--icon-size: 14px}a-tabs[size=large] a-tab a-icon{--icon-size: 18px}a-tabs[tone=brand],a-tab[tone=brand]{--tabs-tone-source: #5f4bc3;--tab-selected-text: var(--text-1-brand);--tab-text-2: var(--text-2-brand);--tab-rest-tone: var(--text-3-brand);--tabs-track-border: var(--border-4-brand);--tab-secondary-border: var(--border-3-brand)}a-tabs[tone=info],a-tab[tone=info]{--tabs-tone-source: #1f6eb2;--tab-selected-text: var(--text-1-info);--tab-text-2: var(--text-2-info);--tab-rest-tone: var(--text-3-info);--tabs-track-border: var(--border-4-info);--tab-secondary-border: var(--border-3-info)}a-tabs[tone=success],a-tab[tone=success]{--tabs-tone-source: #2a7e43;--tab-selected-text: var(--text-1-success);--tab-text-2: var(--text-2-success);--tab-rest-tone: var(--text-3-success);--tabs-track-border: var(--border-4-success);--tab-secondary-border: var(--border-3-success)}a-tabs[tone=warning],a-tab[tone=warning]{--tabs-tone-source: #c37416;--tab-selected-text: var(--text-1-warning);--tab-text-2: var(--text-2-warning);--tab-rest-tone: var(--text-3-warning);--tabs-track-border: var(--border-4-warning);--tab-secondary-border: var(--border-3-warning)}a-tabs[tone=critical],a-tab[tone=critical]{--tabs-tone-source: #c9302c;--tab-selected-text: var(--text-1-critical);--tab-text-2: var(--text-2-critical);--tab-rest-tone: var(--text-3-critical);--tabs-track-border: var(--border-4-critical);--tab-secondary-border: var(--border-3-critical)}a-tabs[tone]:not([tone=""],[tone=neutral]),a-tab[tone]:not([tone=""],[tone=neutral]){--tabs-track-bg: oklch(from var(--tabs-tone-source) .55 .14 h / .08);--tab-secondary-bg: oklch(from var(--tabs-tone-source) .55 .14 h / .03);--tab-pill-shadow: 0 0 3px 0 oklch(from var(--tabs-tone-source) .62 .12 h / .5)}a-tabs:has(>a-tab[tone=brand]:state(selected)){--tabs-tone-source: #5f4bc3;--tab-selected-text: var(--text-1-brand);--tab-secondary-border: var(--border-3-brand)}a-tabs:has(>a-tab[tone=info]:state(selected)){--tabs-tone-source: #1f6eb2;--tab-selected-text: var(--text-1-info);--tab-secondary-border: var(--border-3-info)}a-tabs:has(>a-tab[tone=success]:state(selected)){--tabs-tone-source: #2a7e43;--tab-selected-text: var(--text-1-success);--tab-secondary-border: var(--border-3-success)}a-tabs:has(>a-tab[tone=warning]:state(selected)){--tabs-tone-source: #c37416;--tab-selected-text: var(--text-1-warning);--tab-secondary-border: var(--border-3-warning)}a-tabs:has(>a-tab[tone=critical]:state(selected)){--tabs-tone-source: #c9302c;--tab-selected-text: var(--text-1-critical);--tab-secondary-border: var(--border-3-critical)}a-tabs:has(>a-tab[tone]:state(selected):not([tone=""],[tone=neutral])){--tab-pill-shadow: 0 0 3px 0 oklch(from var(--tabs-tone-source) .62 .12 h / .5);--tab-secondary-bg: oklch(from var(--tabs-tone-source) .55 .14 h / .03)}a-tabs[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]),a-tab[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--tabs-tone-source: attr(tone type(<color>), #635b65);--tab-selected-text: oklch(from var(--tabs-tone-source) .38 .13 h);--tab-text-2: oklch(from var(--tabs-tone-source) .45 .13 h);--tab-rest-tone: oklch(from var(--tabs-tone-source) .45 .13 h);--tabs-track-border: oklch(from var(--tabs-tone-source) .9 .047 h);--tab-secondary-border: oklch(from var(--tabs-tone-source) .87 .065 h)}a-tabs a-tab{--tab-fg: var(--tab-fg-rest);--tab-bg: transparent}a-tabs:not([orientation=vertical]) a-tab{flex:1 1 0;max-width:max-content}@media(hover:hover)and (pointer:fine){a-tabs a-tab:hover{--tab-fg: var(--tab-fg-hover)}}a-tabs:not([priority=secondary],[priority=tertiary]){background:var(--tabs-track-bg);border:.5px solid var(--tabs-track-border);border-radius:6px;padding:1.5px}a-tabs[round]{--tab-radius: 999px;--tabs-round: attr(round type(<length>), 999px)}a-tabs[round]:not([priority=secondary],[priority=tertiary]){border-radius:var(--tabs-round, 999px)}a-tabs:not([priority=secondary],[priority=tertiary]) a-tab:state(selected){--tab-fg: var(--tab-selected-text);--tab-bg: var(--tab-pill-bg);box-shadow:var(--tab-pill-shadow)}a-tabs[tone]:not([tone=""],[tone=neutral]),a-tab[tone]:not([tone=""],[tone=neutral]){--tab-fg-rest: var(--tab-rest-tone);--tab-fg-hover: var(--tab-selected-text)}a-tabs[priority=secondary]{border:.5px solid transparent;padding:1.5px}@media(hover:hover)and (pointer:fine){a-tabs[priority=secondary] a-tab:hover{--tab-fg: var(--tab-selected-text)}}a-tabs[priority=secondary] a-tab:state(selected){--tab-fg: var(--tab-selected-text);--tab-bg: var(--tab-secondary-bg);box-shadow:var(--tab-secondary-shadow)}a-tabs[priority=tertiary]{padding-inline:2px}a-tabs[priority=tertiary] a-tab{--tab-underline-size: 1px;--tab-underline-color: transparent;position:relative;border-radius:0}a-tabs[priority=tertiary]:not([orientation=vertical]) a-tab{padding-block:calc(var(--tab-padding-y) + 2px)}a-tabs[priority=tertiary] a-tab:after{content:"";position:absolute;inset:0;box-sizing:border-box;pointer-events:none;border-bottom:var(--tab-underline-size) solid var(--tab-underline-color);transition:border-width var(--tab-timing),border-color var(--tab-timing)}a-tabs[orientation=vertical][priority=tertiary] a-tab:after{border-bottom:0;border-inline-end:var(--tab-underline-size) solid var(--tab-underline-color)}@media(hover:hover)and (pointer:fine){a-tabs[priority=tertiary] a-tab:hover{--tab-fg: var(--tab-text-2)}}a-tabs[priority=tertiary] a-tab:state(selected){--tab-fg: var(--tab-selected-text);--tab-underline-size: 1px;--tab-underline-color: var(--tab-selected-text)}a-tabs[orientation=vertical]{flex-direction:column;align-items:stretch;max-width:none;overflow-x:hidden;overflow-y:auto;flex-shrink:0}a-tabs[orientation=vertical] a-tab{justify-content:flex-start;flex-shrink:0}@supports (anchor-scope: all){a-tabs:not([noslide]){position:relative;anchor-scope:all}a-tabs:not([noslide]) a-tab{position:relative;z-index:1}a-tabs:not([noslide]) a-tab:state(selected){anchor-name:--tabs-active}a-tabs:not([noslide]):before{content:"";position:absolute;z-index:0;box-sizing:border-box;position-anchor:--tabs-active;top:anchor(top);right:anchor(right);bottom:anchor(bottom);left:anchor(left);transition:top var(--tab-timing),right var(--tab-timing),bottom var(--tab-timing),left var(--tab-timing)}a-tabs:not([noslide]):not(:has(a-tab:state(selected))):before{display:none}@media(prefers-reduced-motion:reduce){a-tabs:not([noslide]):before{transition:none}}a-tabs:not([noslide]) a-tab:state(selected){--tab-bg: transparent;box-shadow:none}a-tabs:not([noslide],[priority=secondary],[priority=tertiary]):before{background:var(--tab-pill-bg);border-radius:var(--tab-radius);box-shadow:var(--tab-pill-shadow)}a-tabs:not([noslide])[priority=secondary]:before{background:var(--tab-secondary-bg);border-radius:var(--tab-radius);box-shadow:var(--tab-secondary-shadow)}a-tabs:not([noslide])[priority=tertiary] a-tab:state(selected){--tab-underline-size: 1px;--tab-underline-color: transparent}a-tabs:not([noslide])[priority=tertiary]:before{z-index:2;border-bottom:1px solid var(--tab-selected-text)}a-tabs[orientation=vertical]:not([noslide])[priority=tertiary]:before{border-bottom:0;border-inline-end:1px solid var(--tab-selected-text)}}.dark a-tabs{--tabs-track-bg: color-mix(in oklch, #e4d1ef 10%, transparent);--tab-secondary-bg: color-mix(in oklch, #e4d1ef 6%, transparent)}.dark a-tabs[tone]:not([tone=""],[tone=neutral]),.dark a-tab[tone]:not([tone=""],[tone=neutral]){--tabs-track-bg: oklch(from var(--tabs-tone-source) .8 .12 h / .12);--tab-secondary-bg: oklch(from var(--tabs-tone-source) .8 .12 h / .06);--tab-pill-shadow: 0 0 3px 0 oklch(from var(--tabs-tone-source) .8 .1 h / .45)}.dark a-tabs:has(>a-tab[tone]:state(selected):not([tone=""],[tone=neutral])){--tab-secondary-bg: oklch(from var(--tabs-tone-source) .8 .12 h / .06);--tab-pill-shadow: 0 0 3px 0 oklch(from var(--tabs-tone-source) .8 .1 h / .45)}.dark a-tabs[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]),.dark a-tab[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--tab-selected-text: oklch(from var(--tabs-tone-source) .83 .1 h);--tab-text-2: oklch(from var(--tabs-tone-source) .76 .11 h);--tab-rest-tone: oklch(from var(--tabs-tone-source) .76 .11 h);--tabs-track-border: oklch(from var(--tabs-tone-source) .25 .057 h);--tab-secondary-border: oklch(from var(--tabs-tone-source) .33 .087 h)}}
+@layer anta{a-tabs{--_fs: 15px;--_lh: 20px;--_pb: 1px;--tab-padding-x: 9px;--tab-height: 28px;--tab-radius: 4px;--tabs-gap: 3px;--tab-timing: .15s ease-out;--tabs-tone-source: #635b65;--tab-fg-rest: var(--text-3);--tab-selected-text: var(--text-1);--tab-text-2: var(--text-2);--tabs-track-bg: color-mix(in oklch, #44374b 6%, transparent);--tabs-track-border: var(--border-4);--tabs-track-shadow: inset 0 0 0px .5px var(--tabs-track-border);--tab-selected-bg: var(--bg-1);--tab-selected-border: var(--border-2);--tab-selected-shadow: inset 0 0 0px .5px var(--tab-selected-border);--tab-secondary-bg: color-mix(in oklch, #44374b 3%, transparent);display:flex;flex-direction:row;align-items:stretch;gap:var(--tabs-gap);padding:0;width:fit-content;align-self:flex-start;min-width:0;max-width:100%;overflow:hidden;scroll-behavior:smooth}a-tabs[size=small]{--_fs: 13px;--_lh: 16px;--_pb: .5px;--tab-padding-x: 7px;--tab-height: 24px}a-tabs[size=large]{--_fs: 17px;--_lh: 24px;--_pb: 1.5px;--tab-padding-x: 13px;--tab-height: 32px}a-tabs a-tab a-icon{--icon-size: 16px}a-tabs[size=small] a-tab a-icon{--icon-size: 14px}a-tabs[size=large] a-tab a-icon{--icon-size: 18px}a-tabs[tone=brand],a-tab[tone=brand]{--tabs-tone-source: #5f4bc3;--tab-selected-text: var(--text-1-brand);--tab-text-2: var(--text-2-brand);--tab-rest-tone: var(--text-3-brand);--tabs-track-border: var(--border-4-brand);--tab-selected-border: var(--border-2-brand)}a-tabs[tone=info],a-tab[tone=info]{--tabs-tone-source: #1f6eb2;--tab-selected-text: var(--text-1-info);--tab-text-2: var(--text-2-info);--tab-rest-tone: var(--text-3-info);--tabs-track-border: var(--border-4-info);--tab-selected-border: var(--border-2-info)}a-tabs[tone=success],a-tab[tone=success]{--tabs-tone-source: #2a7e43;--tab-selected-text: var(--text-1-success);--tab-text-2: var(--text-2-success);--tab-rest-tone: var(--text-3-success);--tabs-track-border: var(--border-4-success);--tab-selected-border: var(--border-2-success)}a-tabs[tone=warning],a-tab[tone=warning]{--tabs-tone-source: #c37416;--tab-selected-text: var(--text-1-warning);--tab-text-2: var(--text-2-warning);--tab-rest-tone: var(--text-3-warning);--tabs-track-border: var(--border-4-warning);--tab-selected-border: var(--border-2-warning)}a-tabs[tone=critical],a-tab[tone=critical]{--tabs-tone-source: #c9302c;--tab-selected-text: var(--text-1-critical);--tab-text-2: var(--text-2-critical);--tab-rest-tone: var(--text-3-critical);--tabs-track-border: var(--border-4-critical);--tab-selected-border: var(--border-2-critical)}a-tabs[tone]:not([tone=""],[tone=neutral]),a-tab[tone]:not([tone=""],[tone=neutral]){--tabs-track-bg: oklch(from var(--tabs-tone-source) .55 .14 h / .06);--tab-secondary-bg: oklch(from var(--tabs-tone-source) .55 .14 h / .03)}a-tabs:has(>a-tab[tone=brand]:state(selected)){--tabs-tone-source: #5f4bc3;--tab-selected-text: var(--text-1-brand);--tab-selected-border: var(--border-2-brand)}a-tabs:has(>a-tab[tone=info]:state(selected)){--tabs-tone-source: #1f6eb2;--tab-selected-text: var(--text-1-info);--tab-selected-border: var(--border-2-info)}a-tabs:has(>a-tab[tone=success]:state(selected)){--tabs-tone-source: #2a7e43;--tab-selected-text: var(--text-1-success);--tab-selected-border: var(--border-2-success)}a-tabs:has(>a-tab[tone=warning]:state(selected)){--tabs-tone-source: #c37416;--tab-selected-text: var(--text-1-warning);--tab-selected-border: var(--border-2-warning)}a-tabs:has(>a-tab[tone=critical]:state(selected)){--tabs-tone-source: #c9302c;--tab-selected-text: var(--text-1-critical);--tab-selected-border: var(--border-2-critical)}a-tabs:has(>a-tab[tone]:state(selected):not([tone=""],[tone=neutral])){--tab-secondary-bg: oklch(from var(--tabs-tone-source) .55 .14 h / .03)}a-tabs[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]),a-tab[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--tabs-tone-source: attr(tone type(<color>), #635b65);--tab-selected-text: oklch(from var(--tabs-tone-source) .38 .13 h);--tab-text-2: oklch(from var(--tabs-tone-source) .45 .13 h);--tab-rest-tone: oklch(from var(--tabs-tone-source) .45 .13 h);--tabs-track-border: oklch(from var(--tabs-tone-source) .86 .06 h);--tab-selected-border: oklch(from var(--tabs-tone-source) .8 .09 h)}a-tabs a-tab{--tab-fg: var(--tab-fg-rest);--tab-bg: transparent}a-tabs:not([orientation=vertical]) a-tab{flex:1 1 0;max-width:max-content}@media(hover:hover)and (pointer:fine){a-tabs a-tab:hover{--tab-fg: var(--tab-selected-text)}}a-tabs:not([priority=secondary],[priority=tertiary]){background:var(--tabs-track-bg);box-shadow:var(--tabs-track-shadow);border-radius:4px}a-tabs[round]{--tab-radius: 999px;--tabs-round: attr(round type(<length>), 999px)}a-tabs[round]:not([priority=secondary],[priority=tertiary]){border-radius:var(--tabs-round, 999px)}a-tabs:not([priority=secondary],[priority=tertiary]) a-tab:state(selected){--tab-fg: var(--tab-selected-text);--tab-bg: var(--tab-selected-bg);box-shadow:var(--tab-selected-shadow)}a-tabs[tone]:not([tone=""],[tone=neutral]),a-tab[tone]:not([tone=""],[tone=neutral]){--tab-fg-rest: var(--tab-rest-tone)}@media(hover:hover)and (pointer:fine){a-tabs[priority=secondary] a-tab:hover{--tab-fg: var(--tab-selected-text)}}a-tabs[priority=secondary] a-tab:state(selected){--tab-fg: var(--tab-selected-text);--tab-bg: var(--tab-secondary-bg);box-shadow:var(--tab-selected-shadow)}a-tabs[priority=tertiary] a-tab{--tab-underline-size: 1px;--tab-underline-color: transparent;position:relative;border-radius:0}a-tabs[priority=tertiary] a-tab:after{content:"";position:absolute;inset:0;box-sizing:border-box;pointer-events:none;border-bottom:var(--tab-underline-size) solid var(--tab-underline-color);transition:border-width var(--tab-timing),border-color var(--tab-timing)}a-tabs[orientation=vertical][priority=tertiary] a-tab:after{border-bottom:0;border-inline-end:var(--tab-underline-size) solid var(--tab-underline-color)}@media(hover:hover)and (pointer:fine){a-tabs[priority=tertiary] a-tab:hover{--tab-fg: var(--tab-text-2)}}a-tabs[priority=tertiary] a-tab:state(selected){--tab-fg: var(--tab-selected-text);--tab-underline-size: 1px;--tab-underline-color: var(--tab-selected-text)}a-tabs[orientation=vertical]{flex-direction:column;align-items:stretch;max-width:none;overflow-x:hidden;overflow-y:auto;flex-shrink:0}a-tabs[orientation=vertical] a-tab{justify-content:flex-start;flex-shrink:0}@supports (anchor-scope: all){a-tabs:not([noslide]){position:relative;anchor-scope:all}a-tabs:not([noslide]) a-tab{position:relative;z-index:1}a-tabs:not([noslide]) a-tab:state(selected){anchor-name:--tabs-active}a-tabs:not([noslide]):before{content:"";position:absolute;z-index:0;box-sizing:border-box;position-anchor:--tabs-active;top:anchor(top);right:anchor(right);bottom:anchor(bottom);left:anchor(left);transition:top var(--tab-timing),right var(--tab-timing),bottom var(--tab-timing),left var(--tab-timing)}a-tabs:not([noslide]):not(:has(a-tab:state(selected))):before{display:none}@media(prefers-reduced-motion:reduce){a-tabs:not([noslide]):before{transition:none}}a-tabs:not([noslide]) a-tab:state(selected){--tab-bg: transparent;box-shadow:none}a-tabs:not([noslide],[priority=secondary],[priority=tertiary]):before{background:var(--tab-selected-bg);border-radius:var(--tab-radius);box-shadow:var(--tab-selected-shadow)}a-tabs:not([noslide])[priority=secondary]:before{background:var(--tab-secondary-bg);border-radius:var(--tab-radius);box-shadow:var(--tab-selected-shadow)}a-tabs:not([noslide])[priority=tertiary] a-tab:state(selected){--tab-underline-size: 1px;--tab-underline-color: transparent}a-tabs:not([noslide])[priority=tertiary]:before{z-index:2;border-bottom:1px solid var(--tab-selected-text)}a-tabs[orientation=vertical]:not([noslide])[priority=tertiary]:before{border-bottom:0;border-inline-end:1px solid var(--tab-selected-text)}}.dark a-tabs{--tabs-track-bg: color-mix(in oklch, #e4d1ef 7%, transparent);--tab-secondary-bg: color-mix(in oklch, #e4d1ef 8%, transparent)}.dark a-tabs[tone]:not([tone=""],[tone=neutral]),.dark a-tab[tone]:not([tone=""],[tone=neutral]){--tabs-track-bg: oklch(from var(--tabs-tone-source) .8 .12 h / .07);--tab-secondary-bg: oklch(from var(--tabs-tone-source) .8 .12 h / .08)}.dark a-tabs:has(>a-tab[tone]:state(selected):not([tone=""],[tone=neutral])){--tab-secondary-bg: oklch(from var(--tabs-tone-source) .8 .12 h / .08)}.dark a-tabs[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]),.dark a-tab[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--tab-selected-text: oklch(from var(--tabs-tone-source) .83 .1 h);--tab-text-2: oklch(from var(--tabs-tone-source) .76 .11 h);--tab-rest-tone: oklch(from var(--tabs-tone-source) .76 .11 h);--tabs-track-border: oklch(from var(--tabs-tone-source) .33 .08 h);--tab-selected-border: oklch(from var(--tabs-tone-source) .4 .11 h)}}

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

@@ -52,6 +52,9 @@ export declare class ATooltipElement extends HTMLElementBase {
     private fading;
     private fadeTimer?;
     private docMoveBound;
+    /** Active only while shown: re-runs the empty gate when the slotted content
+     *  changes under a live bubble. See observeContent(). */
+    private contentObserver?;
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -76,6 +79,20 @@ export declare class ATooltipElement extends HTMLElementBase {
      *  (so formatting whitespace / an empty conditional doesn't open a blank bubble).
      *  Re-checked on every show(), so a tooltip populated later self-corrects. */
     private isEmpty;
+    /** While shown, watch the slotted content so a bubble whose content is
+     *  cleared out from under it — a reactive re-render dropping the text /
+     *  children under one persistent anchor — self-hides. The mirror of
+     *  isEmpty()'s "populated later self-corrects": the show-time gate can't fire
+     *  again on its own once open, so this drives the reverse.
+     *
+     *  A MutationObserver, not `slotchange`, because reactive renderers update
+     *  text in place — React sets an existing text node's nodeValue rather than
+     *  replacing the node — which changes no assigned-node set and so fires no
+     *  `slotchange`; childList + characterData + subtree catches both that and
+     *  node removal. Observing our own light-DOM children is a READ (like the
+     *  truncation measurements), so it stays within the no-host-mutation rule.
+     *  Runs only while shown — attached here, disconnected by hide() / cleanup(). */
+    private observeContent;
     private positionFrame?;
     private pendingPosition?;
     private schedulePosition;

package/dist/elements/a-tooltip.js

@@ -85,6 +85,9 @@ class ATooltipElement extends HTMLElementBase {
   fading = false;
   fadeTimer;
   docMoveBound = false;
+  /** Active only while shown: re-runs the empty gate when the slotted content
+   *  changes under a live bubble. See observeContent(). */
+  contentObserver;
   constructor() {
     super();
     const shadow = this.attachShadow({ mode: "open" });
@@ -128,7 +131,7 @@ class ATooltipElement extends HTMLElementBase {
         overflow: clip;
         text-align: left;
         background: var(--tooltip-bg, Canvas);
-        color: var(--text-3, CanvasText);
+        color: var(--text-2, CanvasText);
         box-shadow: var(--tooltip-shadow, 0 1px 8px rgba(0, 0, 0, 0.2));
         -webkit-backdrop-filter: var(--tooltip-backdrop-filter, blur(8px));
         backdrop-filter: var(--tooltip-backdrop-filter, blur(8px));
@@ -259,6 +262,28 @@ class ATooltipElement extends HTMLElementBase {
   isEmpty() {
     return this.children.length === 0 && (this.textContent ?? "").trim() === "";
   }
+  /** While shown, watch the slotted content so a bubble whose content is
+   *  cleared out from under it — a reactive re-render dropping the text /
+   *  children under one persistent anchor — self-hides. The mirror of
+   *  isEmpty()'s "populated later self-corrects": the show-time gate can't fire
+   *  again on its own once open, so this drives the reverse.
+   *
+   *  A MutationObserver, not `slotchange`, because reactive renderers update
+   *  text in place — React sets an existing text node's nodeValue rather than
+   *  replacing the node — which changes no assigned-node set and so fires no
+   *  `slotchange`; childList + characterData + subtree catches both that and
+   *  node removal. Observing our own light-DOM children is a READ (like the
+   *  truncation measurements), so it stays within the no-host-mutation rule.
+   *  Runs only while shown — attached here, disconnected by hide() / cleanup(). */
+  observeContent() {
+    if (typeof MutationObserver === "undefined") return;
+    if (!this.contentObserver) {
+      this.contentObserver = new MutationObserver(() => {
+        if (this.shown && this.isEmpty()) this.hide();
+      });
+    }
+    this.contentObserver.observe(this, { childList: true, characterData: true, subtree: true });
+  }
   // --- positioning (sets only the shadow container's own transform) ---
   // Single pending position frame: a burst of mousemoves within one frame
   // coalesces to ONE layout read + transform write, using the LATEST geometry
@@ -353,6 +378,7 @@ class ATooltipElement extends HTMLElementBase {
         this.doc.addEventListener("mousemove", this.onDocMove);
         this.docMoveBound = true;
       }
+      this.observeContent();
     }
     this.position(e);
   };
@@ -361,6 +387,7 @@ class ATooltipElement extends HTMLElementBase {
     if (!this.shown) return;
     this.shown = false;
     this.touchOpen = false;
+    this.contentObserver?.disconnect();
     this.container.hidePopover();
     this.fading = true;
     if (this.fadeTimer !== void 0) clearTimeout(this.fadeTimer);
@@ -391,6 +418,7 @@ class ATooltipElement extends HTMLElementBase {
    *  calls it. */
   cleanup() {
     this.cancelHide();
+    this.contentObserver?.disconnect();
     if (this.shown) {
       this.shown = false;
       this.touchOpen = false;

package/dist/elements/index.d.ts

@@ -21,6 +21,7 @@ export { ACheckboxElement, register_a_checkbox } from './a-checkbox';
 export { AExpanderElement, register_a_expander } from './a-expander';
 export { ATooltipElement, register_a_tooltip } from './a-tooltip';
 export { AInputElement, register_a_input } from './a-input';
+export { AInputTimeElement, register_a_input_time } from './a-input-time';
 export { ACalendarElement, register_a_calendar } from './a-calendar';
 export { ARadioElement, register_a_radio } from './a-radio';
 export { ARadioGroupElement, register_a_radio_group } from './a-radio-group';
@@ -31,5 +32,6 @@ export { AMenuGroupElement, register_a_menu_group } from './a-menu-group';
 export { ATabElement, register_a_tab } from './a-tab';
 export { ATabsElement, register_a_tabs } from './a-tabs';
 export { ATabPanelElement, register_a_tabpanel } from './a-tabpanel';
+export { ADialogElement, register_a_dialog } from './a-dialog';
 import './a-title.css';
 import './a-tag.css';

package/dist/elements/index.js

@@ -6,6 +6,7 @@ import { ACheckboxElement, register_a_checkbox } from "./a-checkbox";
 import { AExpanderElement, register_a_expander } from "./a-expander";
 import { ATooltipElement, register_a_tooltip } from "./a-tooltip";
 import { AInputElement, register_a_input } from "./a-input";
+import { AInputTimeElement, register_a_input_time } from "./a-input-time";
 import { ACalendarElement, register_a_calendar } from "./a-calendar";
 import { ARadioElement, register_a_radio } from "./a-radio";
 import { ARadioGroupElement, register_a_radio_group } from "./a-radio-group";
@@ -16,15 +17,18 @@ import { AMenuGroupElement, register_a_menu_group } from "./a-menu-group";
 import { ATabElement, register_a_tab } from "./a-tab";
 import { ATabsElement, register_a_tabs } from "./a-tabs";
 import { ATabPanelElement, register_a_tabpanel } from "./a-tabpanel";
+import { ADialogElement, register_a_dialog } from "./a-dialog";
 import "./a-title.css";
 import "./a-tag.css";
 export {
   AButtonElement,
   ACalendarElement,
   ACheckboxElement,
+  ADialogElement,
   AExpanderElement,
   AIconElement,
   AInputElement,
+  AInputTimeElement,
   AMenuElement,
   AMenuGroupElement,
   AMenuItemElement,
@@ -40,9 +44,11 @@ export {
   register_a_button,
   register_a_calendar,
   register_a_checkbox,
+  register_a_dialog,
   register_a_expander,
   register_a_icon,
   register_a_input,
+  register_a_input_time,
   register_a_menu,
   register_a_menu_group,
   register_a_menu_item,

package/dist/general_types.d.ts

@@ -291,6 +291,51 @@ export interface AExpanderAttributes extends BaseAttributes {
         prev: 'open' | 'closed';
     }>) => void;
 }
+/**
+ * Attributes for the `<a-dialog>` custom element — a modal dialog / edge drawer
+ * built on a native `<dialog>` in shadow DOM (top layer, focus trap, backdrop,
+ * Esc from the platform). Slots (light-DOM children): `header`, `footer`,
+ * `close` (the close button), and the default slot for the body. The element
+ * exposes `::part(dialog | header | body | footer | close)`. Low-level
+ * attributes; for the typed JSX wrapper use `Dialog` from `@antadesign/anta`.
+ */
+export interface ADialogAttributes extends BaseAttributes {
+    /** Controlled open state (`'open'` / `'closed'`). Present → controlled: the
+     *  attribute is the source of truth, user dismiss only dispatches the
+     *  cancelable `statechange` event, and the consumer answers by updating it.
+     *  Absent → uncontrolled (use `default-state`). See STATEFUL-COMPONENTS.md. */
+    state?: 'open' | 'closed';
+    /** Initial open state for the uncontrolled mode (`'open'` / `'closed'`); read
+     *  once when the element connects. */
+    'default-state'?: 'open' | 'closed';
+    /** Placement. `center` (default, omit) is a centered modal; `left` / `right` /
+     *  `top` / `bottom` turn it into an edge drawer; `fullscreen` fills the whole
+     *  viewport (no edge gap, no radius). */
+    position?: 'center' | 'left' | 'right' | 'top' | 'bottom' | 'fullscreen';
+    /** Corner radius. A side keyword (`top` / `right` / `bottom` / `left`) rounds
+     *  only that edge's two corners at `--dialog-radius`; a length (`round="20px"`)
+     *  or full `border-radius` shorthand rounds all corners at that value; bare
+     *  `round` rounds all corners at `--dialog-radius`. Omit for the position
+     *  default (center rounded, drawers / fullscreen square). */
+    round?: boolean | number | 'top' | 'right' | 'bottom' | 'left' | (string & {});
+    /** Disable light dismiss — Esc + backdrop click no longer close the dialog (it
+     *  closes only via the close button or programmatically). For alert / confirm
+     *  dialogs. Presence-based (`''` on, omit off). */
+    persistent?: boolean | '';
+    /** Uncontrolled trigger name. Any element with `data-dialog-open="{name}"`
+     *  opens this dialog and `data-dialog-close="{name}"` closes it, via a document
+     *  click listener. Ignored in controlled mode. */
+    name?: string;
+    /** Fires before the open state changes — the element dispatches a `cancelable`
+     *  `statechange` `CustomEvent` whose `detail` is `{ next, prev }` in the
+     *  `'open'|'closed'` vocabulary. Uncontrolled, `preventDefault()` vetoes the
+     *  transition. All-lowercase so both renderers bind it (React 19 keeps the case
+     *  after `on`; Preact lowercases). */
+    onstatechange?: (e: CustomEvent<{
+        next: 'open' | 'closed';
+        prev: 'open' | 'closed';
+    }>) => void;
+}
 /**
  * Attributes for the `<a-icon>` custom element. `shape` is typed as
  * `IconShape` (`keyof IconShapes`); the `IconShapes` interface is
@@ -478,6 +523,52 @@ export interface AInputAttributes extends BaseAttributes {
     'aria-invalid'?: 'true' | 'false' | boolean;
     'aria-label'?: string;
 }
+/** Attributes for the `<a-input-time>` custom element — a segmented wall-clock
+ *  time field (hour / minute / AM-PM spinbutton sections in one box). */
+export interface AInputTimeAttributes extends BaseAttributes {
+    /** Controlled value — 24-hour `"HH:mm"`, `''` when incomplete. */
+    value?: string;
+    /** Initial value for the uncontrolled case (24-hour `"HH:mm"`). */
+    defaultvalue?: string;
+    /** BCP-47 locale driving the clock (12h vs 24h), segment order, separator, and
+     *  the AM/PM text. Defaults to `navigator.language`. */
+    locale?: string;
+    /** Force the clock — `'true'` = 12-hour (AM/PM), `'false'` = 24-hour. Omit to
+     *  follow the locale. Value-based (tri-state), not a presence boolean. */
+    hour12?: 'true' | 'false';
+    /** Earliest allowed time, 24-hour `"HH:mm"` — complete values below it clamp up
+     *  and flag `rangeUnderflow`. */
+    min?: string;
+    /** Latest allowed time, 24-hour `"HH:mm"` — complete values above it clamp down
+     *  and flag `rangeOverflow`. */
+    max?: string;
+    /** Validation/feedback tone. Only `critical` carries validity weight. */
+    status?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical';
+    /** Custom accent colour (any literal CSS colour) — tints the resting + hover
+     *  border via an oklch derivation; `status` overrides for validation. */
+    tone?: string;
+    /** Disabled state. Presence-based. */
+    disabled?: boolean | '';
+    /** Required — drives native validity. Presence-based. */
+    required?: boolean | '';
+    /** Dim the trailing adornments at rest (0.6); brighten on hover / focus. */
+    'dim-actions'?: boolean | '';
+    /** Fully-round field, or a custom radius via a length value. Presence-based
+     *  for the boolean form. */
+    round?: boolean | number | string;
+    /** Size variant. small=24px, medium (default)=28px, large=32px. */
+    size?: 'small' | 'medium' | 'large';
+    /** Form field name — the 24-hour value submits via ElementInternals. */
+    name?: string;
+    /** Fires on every segment edit (`input` is composed — it reaches the host). */
+    oninput?: (e: any) => void;
+    /** Fires on commit (blur). */
+    onchange?: (e: any) => void;
+    /** Fires after the built-in clear button empties the field (`clearinput`). */
+    onclearinput?: (e: any) => void;
+    'aria-invalid'?: 'true' | 'false' | boolean;
+    'aria-label'?: string;
+}
 /**
  * Attributes for the `<a-calendar>` custom element — a **light-DOM,
  * form-associated** month grid, and the **interaction authority** for it. The
@@ -558,6 +649,12 @@ export interface AMenuAttributes extends BaseAttributes {
     round?: boolean | number | string;
     /** Gap in pixels between the trigger and the menu. Defaults to 4. */
     offset?: number | string;
+    /** Size the menu to its content instead of flooring its width to the trigger.
+     *  By default a root menu is never narrower than its trigger; `autowidth` drops
+     *  that floor (min-width falls back to `--menu-min-width`) for a content menu
+     *  under a wide trigger, e.g. InputDate's calendar below a full-width field.
+     *  Presence-based (`''` on, omit off). */
+    autowidth?: boolean | '';
     /** Controlled open state (`'open'` / `'closed'`). Omit for uncontrolled;
      *  present → visibility follows this value, and the element never writes it
      *  (the consumer owns it). Listen to `statechange` to keep it in sync. See

package/dist/index.d.ts

@@ -49,16 +49,24 @@ export { Calendar } from './components/Calendar';
 export type { CalendarProps, CalendarChangeAttrs } from './components/Calendar';
 export { InputDate } from './components/InputDate';
 export type { InputDateProps, InputDateChangeAttrs } from './components/InputDate';
+export { InputTime } from './components/InputTime';
+export type { InputTimeProps, InputTimeChangeAttrs } from './components/InputTime';
+export { InputAutocomplete } from './components/InputAutocomplete';
+export type { InputAutocompleteProps } from './components/InputAutocomplete';
 export { buildMonth, getWeekdays, firstDayOfWeek, clampDate, isOutOfRange, parseISODate, parseDateInput, formatDateInput, dateFormatPattern, parseTimeInput, parseDateTimeInput, formatDateTimeInput, dateTimeFormatPattern, usesHour12, } from './calendar-core';
 export type { CalendarDay, CalendarWeekday, CalendarMonth, BuildMonthOptions, ParseDateOptions, } from './calendar-core';
 export { RadioGroup } from './components/RadioGroup';
 export type { RadioGroupProps, RadioOption } from './components/RadioGroup';
 export { Select, optionsWithSelection } from './components/Select';
 export type { SelectProps, SelectCommonProps, SelectOption, SelectGroup, SelectSubmenu, SelectItem, SelectChangeAttrs, OptionState, TriggerState, EmptyState, SelectionState, SelectedOption, SelectedGroup, SelectedSubmenu, SelectedItem, } from './components/Select';
+export { SelectFaceted } from './components/SelectFaceted';
+export type { SelectFacetedProps, SelectFacet, SelectFacetSingle, SelectFacetMultiple, SelectFacetText, SelectFacetCustom, SelectFacetCustomContext, SelectFacetedValue, SelectFacetedChangeAttrs, SelectFacetedTriggerState, } from './components/SelectFaceted';
 export { Tabs } from './components/Tabs';
 export type { TabsProps, TabOption, TabsChangeAttrs } from './components/Tabs';
 export { TabPanel } from './components/TabPanel';
 export type { TabPanelProps } from './components/TabPanel';
+export { Dialog } from './components/Dialog';
+export type { DialogProps } from './components/Dialog';
 export type { BaseProps, BaseAttributes } from './general_types';
 export { configure } from './jsx-runtime';
 export type { AntaIntrinsicElements } from './jsx-runtime';

package/dist/index.js

@@ -15,6 +15,8 @@ import { Expander } from "./components/Expander";
 import { Input } from "./components/Input";
 import { Calendar } from "./components/Calendar";
 import { InputDate } from "./components/InputDate";
+import { InputTime } from "./components/InputTime";
+import { InputAutocomplete } from "./components/InputAutocomplete";
 import {
   buildMonth,
   getWeekdays,
@@ -33,19 +35,24 @@ import {
 } from "./calendar-core";
 import { RadioGroup } from "./components/RadioGroup";
 import { Select, optionsWithSelection } from "./components/Select";
+import { SelectFaceted } from "./components/SelectFaceted";
 import { Tabs } from "./components/Tabs";
 import { TabPanel } from "./components/TabPanel";
+import { Dialog } from "./components/Dialog";
 import { configure } from "./jsx-runtime";
 export {
   Button,
   Calendar,
   Checkbox,
+  Dialog,
   Expander,
   ICON_SHAPES,
   ICON_SYNONYMS,
   Icon,
   Input,
+  InputAutocomplete,
   InputDate,
+  InputTime,
   Menu,
   MenuGroup,
   MenuItem,
@@ -53,6 +60,7 @@ export {
   Progress,
   RadioGroup,
   Select,
+  SelectFaceted,
   TabPanel,
   Tabs,
   Tag,

package/dist/jsx-runtime.d.ts

@@ -41,7 +41,7 @@ export declare function useMemo<T>(factory: () => T, deps: unknown[]): T;
 export declare function jsx(type: ComponentType, props: Record<string, unknown> | null, key?: string | number): unknown;
 export declare function jsxs(type: ComponentType, props: Record<string, unknown> | null, key?: string | number): unknown;
 export { _Fragment as Fragment };
-import type { AProgressAttributes, ATextAttributes, ATitleAttributes, ATagAttributes, AExpanderAttributes, AIconAttributes, AButtonAttributes, ACheckboxAttributes, ATooltipAttributes, AInputAttributes, ACalendarAttributes, ARadioAttributes, ARadioGroupAttributes, AMenuAttributes, AMenuItemAttributes, AMenuGroupAttributes, ATabsAttributes, ATabAttributes, ATabpanelAttributes, BaseAttributes } from './general_types';
+import type { AProgressAttributes, ATextAttributes, ATitleAttributes, ATagAttributes, AExpanderAttributes, AIconAttributes, AButtonAttributes, ACheckboxAttributes, ATooltipAttributes, AInputAttributes, AInputTimeAttributes, ACalendarAttributes, ARadioAttributes, ARadioGroupAttributes, AMenuAttributes, AMenuItemAttributes, AMenuGroupAttributes, ATabsAttributes, ATabAttributes, ATabpanelAttributes, ADialogAttributes, BaseAttributes } from './general_types';
 export declare namespace JSX {
     interface IntrinsicElements extends React.JSX.IntrinsicElements, AntaIntrinsicElements {
     }
@@ -70,6 +70,7 @@ export interface AntaIntrinsicElements {
     'a-checkbox-hint': BaseAttributes;
     'a-tooltip': ATooltipAttributes;
     'a-input': AInputAttributes;
+    'a-input-time': AInputTimeAttributes;
     'a-calendar': ACalendarAttributes;
     'a-radio': ARadioAttributes;
     'a-radio-group': ARadioGroupAttributes;
@@ -90,4 +91,5 @@ export interface AntaIntrinsicElements {
     'a-tab': ATabAttributes;
     'a-tab-label': BaseAttributes;
     'a-tabpanel': ATabpanelAttributes;
+    'a-dialog': ADialogAttributes;
 }

package/dist/reset.css

@@ -1 +1 @@
-@layer anta{*,*:before,*:after{box-sizing:border-box}*{margin:0}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}h1,h2,h3,h4,h5,h6{color:var(--text-1);font-weight:584.62;letter-spacing:0}h1{font-size:28px;line-height:32px;margin-block:0 16px}h2{font-size:24px;line-height:28px;margin-block:32px 12px}h3{font-size:20px;line-height:24px;margin-block:24px 12px}h4{font-size:17px;line-height:20px;margin-block:20px 8px}h5{font-size:15px;line-height:20px;margin-block:16px 8px}h6{font-size:13px;line-height:16px;margin-block:16px 4px}strong{font-weight:600}code{line-height:1em}code,kbd,samp,pre{letter-spacing:0}ul,ol{padding-left:3ch}:is(ul,ol)>li{margin-bottom:.5em}:is(ul,ol)>li::marker{color:var(--text-5)}menu{list-style:none;padding:0;margin:0}menu>li{margin:0}a:not(:where([role=button])),a:not(:where([role=button])):link,a:not(:where([role=button])):visited{color:var(--link-color);text-decoration:underline;text-decoration-style:solid;text-decoration-color:color-mix(in srgb,currentColor 75%,transparent);text-decoration-thickness:.5px;text-underline-offset:3px}@media(hover:hover)and (pointer:fine){a:not(:where([role=button])):hover{color:var(--link-color-hover);text-decoration-thickness:1px}}a:not(:where([role=button])):active{text-decoration-color:color-mix(in srgb,currentColor 75%,transparent)}::selection{background:color-mix(in srgb,var(--text-1-brand),transparent 85%)}table{border-collapse:collapse;font-variant-numeric:lining-nums tabular-nums}caption{text-align:left;color:var(--text-3);padding-left:10px;margin-bottom:.25em}th,td{padding:5px 10px;text-align:left;vertical-align:top;border-bottom:1px solid var(--border-4)}thead th{font-weight:600}tfoot tr:last-child>:is(th,td),table:not(:has(tfoot)) tbody tr:last-child>:is(th,td){border-bottom:none}table[data-bordered]{border-collapse:separate;border-spacing:0;border:1px solid var(--border-4);border-radius:3px}table[data-bordered] :is(th,td){border-right:1px solid var(--border-4)}table[data-bordered] tr>:is(th,td):last-child{border-right:0}}
+@layer anta{*,*:before,*:after{box-sizing:border-box}*{margin:0}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}h1,h2,h3,h4,h5,h6{color:var(--text-1);font-weight:584.62;letter-spacing:0}h1{font-size:28px;line-height:32px;margin-block:0 16px}h2{font-size:24px;line-height:28px;margin-block:32px 12px}h3{font-size:20px;line-height:24px;margin-block:24px 12px}h4{font-size:17px;line-height:20px;margin-block:20px 8px}h5{font-size:15px;line-height:20px;margin-block:16px 8px}h6{font-size:13px;line-height:16px;margin-block:16px 4px}strong{font-weight:600}code{line-height:1em}code,kbd,samp,pre{letter-spacing:0}ul,ol{padding-left:3ch}:is(ul,ol)>li{margin-bottom:.5em}:is(ul,ol)>li::marker{color:var(--text-5)}menu{list-style:none;padding:0;margin:0}menu>li{margin:0}a:not(:where([role=button])),a:not(:where([role=button])):link,a:not(:where([role=button])):visited{color:var(--link-color);text-decoration:underline;text-decoration-style:solid;text-decoration-color:color-mix(in srgb,currentColor 75%,transparent);text-decoration-thickness:.5px;text-underline-offset:3px}@media(hover:hover)and (pointer:fine){a:not(:where([role=button])):hover{color:var(--link-color-hover);text-decoration-thickness:1px}}a:not(:where([role=button])):active{text-decoration-color:color-mix(in srgb,currentColor 75%,transparent)}::selection{background:color-mix(in oklch,var(--focus-ring) 20%,transparent)}.dark ::selection{background:color-mix(in oklch,var(--focus-ring) 30%,transparent)}table{border-collapse:collapse;font-variant-numeric:lining-nums tabular-nums}caption{text-align:left;color:var(--text-3);padding-left:10px;margin-bottom:.25em}th,td{padding:5px 10px;text-align:left;vertical-align:top;border-bottom:1px solid var(--border-4)}thead th{font-weight:600}tfoot tr:last-child>:is(th,td),table:not(:has(tfoot)) tbody tr:last-child>:is(th,td){border-bottom:none}table[data-bordered]{border-collapse:separate;border-spacing:0;border:1px solid var(--border-4);border-radius:3px}table[data-bordered] :is(th,td){border-right:1px solid var(--border-4)}table[data-bordered] tr>:is(th,td):last-child{border-right:0}}