@antadesign/anta 0.3.1 → 0.3.3

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

@@ -16,6 +16,11 @@ export declare class AInputElement extends HTMLElementBase {
     private ready;
     private formDisabled;
     constructor();
+    /** Floating-element anchor protocol (see `anchorRect` in anta_helpers): point
+     *  a menu / tooltip anchored to this input at the `.field` box, not the host —
+     *  the host's box also spans the label and hint, which would push a dropdown
+     *  below the hint or misalign a tooltip. */
+    getAnchorRect(): DOMRect;
     connectedCallback(): void;
     attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
     /** (Re)build the shadow control from the current attributes. */
@@ -61,6 +66,7 @@ export declare class AInputElement extends HTMLElementBase {
     /** Form field name — mirrors the `name` attribute, like native `<input>.name`,
      *  so `el.name` works (e.g. keying validation messages by field in a form loop). */
     get name(): string;
+    set name(v: string);
     formResetCallback(): void;
     formDisabledCallback(disabled: boolean): void;
     formStateRestoreCallback(state: string): void;

package/dist/elements/a-input.js

@@ -14,7 +14,12 @@ const FORWARDED = [
   "required",
   "min",
   "max",
-  "step"
+  "step",
+  // `aria-label` on the host names the internal control (the actual textbox);
+  // without forwarding it, a bare `<a-input aria-label>` leaves the control
+  // unnamed. `applyLabelAria` already defers to a host `aria-label` over the
+  // label-slot text, so the two don't fight.
+  "aria-label"
 ];
 const BOOL_FORWARDED = /* @__PURE__ */ new Set(["readonly", "required"]);
 const CLEAR_TRIGGER = "clearrequest";
@@ -45,6 +50,7 @@ const SHADOW_STYLE = `
   .field {
     --_bc: var(--input-border);
     --_bw: 0.5px;
+    --_pad-block: 4px;
 
     display: flex;
     align-items: center;
@@ -58,9 +64,10 @@ const SHADOW_STYLE = `
   :host([multiline]) .field { align-items: stretch; }
   :host([status]) .field { --_bw: 1px; }
   :host([size="small"]) { --_fs: 13px; --_lh: 16px; }
-  :host([size="large"]) { --_fs: 17px; --_lh: 24px; }
+  :host([size="large"]) { --_fs: 17px; --_lh: 22px; }
   :host([size="small"]) .field { min-height: 24px; }
   :host([size="large"]) .field { min-height: 32px; }
+  :host([round]) .field { border-radius: var(--input-round, 999px); }
 
   @media (hover: hover) and (pointer: fine) {
     :host(:not(:disabled)) .field:hover { --_bc: var(--input-border-hover); }
@@ -84,7 +91,7 @@ const SHADOW_STYLE = `
     outline: none;
     color: var(--input-text);
     font-family: var(--sans-serif);
-    font-feature-settings: 'ss02', 'ss05';
+    font-feature-settings: 'ss02', 'ss05', 'tnum';
     font-size: var(--_fs);
     line-height: var(--_lh);
     font-weight: 400;
@@ -92,8 +99,6 @@ const SHADOW_STYLE = `
             appearance: none;
   }
   textarea {
-    --_pad-block: 4px;
-
     resize: none;
     padding-block: var(--_pad-block);
     overflow-y: auto;
@@ -103,6 +108,10 @@ const SHADOW_STYLE = `
   }
   input::placeholder, textarea::placeholder { color: var(--input-placeholder); opacity: 1; }
   input:disabled, textarea:disabled { cursor: not-allowed; }
+  :host([readonly]:not([disabled])) .field,
+  :host([readonly]:not([disabled])) input,
+  :host([readonly]:not([disabled])) textarea { cursor: pointer; }
+  :host([readonly]:not([disabled])) input { text-overflow: ellipsis; }
   input::-webkit-search-cancel-button,
   input::-webkit-search-decoration,
   input::-webkit-search-results-button,
@@ -142,15 +151,15 @@ const SHADOW_STYLE = `
   .field.is-filled slot[name="clear"] { display: flex; align-items: center; }
   :host(:disabled) slot[name="clear"],
   :host([readonly]) slot[name="clear"] { display: none; }
-  :host([multiline]) slot[name="clear"] { align-self: flex-start; }
 
   .field.has-leading slot[name="leading"] { margin-inline-start: 7px; }
   .field.has-leading input,
   .field.has-leading textarea { padding-inline-start: 5px; }
   :host([multiline]) .field.has-leading slot[name="leading"],
-  :host([multiline]) .field.has-trailing slot[name="trailing"] {
-    align-items: flex-start;
-    padding-top: 2px;
+  :host([multiline]) .field.has-trailing slot[name="trailing"],
+  :host([multiline]) .field.is-filled slot[name="clear"] {
+    align-self: flex-start;
+    height: calc(var(--_lh) + var(--_pad-block) * 2);
   }
 
   .hint {
@@ -245,6 +254,13 @@ class AInputElement extends HTMLElementBase {
     const extrasSlot = document.createElement("slot");
     shadow.append(style, this.labelBox, this.field, extrasSlot, this.hintBox);
   }
+  /** Floating-element anchor protocol (see `anchorRect` in anta_helpers): point
+   *  a menu / tooltip anchored to this input at the `.field` box, not the host —
+   *  the host's box also spans the label and hint, which would push a dropdown
+   *  below the hint or misalign a tooltip. */
+  getAnchorRect() {
+    return this.field.getBoundingClientRect();
+  }
   connectedCallback() {
     if (Object.prototype.hasOwnProperty.call(this, "value")) {
       const v = this.value;
@@ -484,6 +500,9 @@ class AInputElement extends HTMLElementBase {
   get name() {
     return this.getAttribute("name") ?? "";
   }
+  set name(v) {
+    this.setAttribute("name", v);
+  }
   // --- Form-associated callbacks ---
   formResetCallback() {
     this.value = this.getAttribute("defaultvalue") ?? "";

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

@@ -1 +1 @@
-@layer anta{a-menu-group:not(:defined){display:none}a-menu-group{display:block}a-menu-group-label{display:block;padding:6px 8px 2px;color:var(--text-5);font-size:.75em;font-weight:600;letter-spacing:.06em;text-transform:uppercase;user-select:none}}
+@layer anta{a-menu-group:not(:defined){display:none}a-menu-group{display:flex;flex-direction:column;gap:1px}a-menu-group-label{display:block;padding:6px 8px 2px;color:var(--text-5);font-size:.75em;font-weight:600;letter-spacing:.06em;text-transform:uppercase;user-select:none}}

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-hover: 5%;--menu-item-active: 9%;--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-item:hover,a-menu-item:focus-visible{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:focus-visible{outline:1px solid var(--focus-ring);outline-offset:1px}a-menu-item>a-menu-item-label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}a-menu-item>a-icon{flex:none;--icon-size: 16px;color:var(--menu-item-icon-color)}a-menu-item:has(>a-icon:first-child:not(:only-child)){padding-inline-start:max(0px,var(--menu-item-padding-x) - 2px)}a-menu-item: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)}a-menu-item[tone=info]{--menu-item-color: var(--text-2-info)}a-menu-item[tone=success]{--menu-item-color: var(--text-2-success)}a-menu-item[tone=warning]{--menu-item-color: var(--text-2-warning)}a-menu-item[tone=critical]{--menu-item-color: var(--text-2-critical)}a-menu-item[disabled]{--menu-item-color: var(--text-5);--menu-item-icon-color: var(--text-5);cursor:default;pointer-events:none}.dark a-menu-item{--menu-item-hover: 10%;--menu-item-active: 15%}}
+@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: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%}}

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

@@ -36,12 +36,22 @@ declare global {
  *   surface's 4px padding; pairs with the hover background so keyboard focus
  *   reads as tint + ring.
  * - Optical side padding (same idea as a-button): a non-only icon at an edge
- *   is trimmed ~2px on that side. Submenu items keep symmetric padding —
- *   the nested `<a-menu>` is the actual last child, so the trim rule doesn't
- *   fire — and the chevron / a trailing icon is instead nudged toward the
- *   edge with relative positioning (visual only, no reflow).
+ *   is trimmed ~2px on that side. Submenu items keep symmetric padding — the
+ *   end-trim is scoped `:not([submenu])` — and the chevron / a trailing icon is
+ *   instead nudged toward the edge with relative positioning (visual only, no
+ *   reflow). The trim's `:not([submenu])` guard is why children (which include a
+ *   submenu's nested `<a-menu>`) can render before the chevron without the
+ *   chevron-as-last-child re-triggering the trim.
  */
 export declare class AMenuItemElement extends HTMLElementBase {
+    private internals?;
+    constructor();
+    /** The active (combobox) cursor. `a-menu` sets this **property** (never an
+     *  attribute — no DOM mutation, same rule as `a-radio.selected`) as ArrowUp/Down
+     *  move the cursor while focus stays in the filter input; the item mirrors it to
+     *  `:state(active)` for CSS. Off-DOM, so a reactive re-render never churns it. */
+    set active(on: boolean);
+    get active(): boolean;
     connectedCallback(): void;
 }
 export declare function register_a_menu_item(): void;

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

@@ -1,6 +1,23 @@
 import { HTMLElementBase } from "../anta_helpers";
 import "./a-menu-item.css";
 class AMenuItemElement extends HTMLElementBase {
+  internals;
+  constructor() {
+    super();
+    this.internals = this.attachInternals?.();
+  }
+  /** The active (combobox) cursor. `a-menu` sets this **property** (never an
+   *  attribute — no DOM mutation, same rule as `a-radio.selected`) as ArrowUp/Down
+   *  move the cursor while focus stays in the filter input; the item mirrors it to
+   *  `:state(active)` for CSS. Off-DOM, so a reactive re-render never churns it. */
+  set active(on) {
+    if (!this.internals) return;
+    if (on) this.internals.states.add("active");
+    else this.internals.states.delete("active");
+  }
+  get active() {
+    return this.internals?.states.has("active") ?? false;
+  }
   connectedCallback() {
     const doc = this.doc;
     if (!doc.hasKeyListenerForAMenuItem) {

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

@@ -1 +1 @@
-@layer anta{a-menu-separator:not(:defined){display:none}a-menu-separator{display:block;flex-shrink:0;height:1px;margin:2px 4px;background:var(--border-5)}}
+@layer anta{a-menu-separator:not(:defined){display:none}a-menu-separator{--menu-separator-label-size: 13px;display:block;flex-shrink:0;height:1px;margin:2px 4px;background:var(--border-5)}a-menu-separator:not(:empty){height:auto;margin:0;padding:6px 8px;background:none;color:var(--text-3);font-size:var(--menu-separator-label-size);line-height:1.3;user-select:none}}

package/dist/elements/a-menu.css

@@ -1 +1 @@
-@layer anta{a-menu:not(:defined){display:none}a-menu{--menu-bg: color-mix(in oklch, var(--bg-1) 90%, transparent);--menu-radius: var(--radius-md, 8px);--menu-border: 1px solid var(--border-3);--menu-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);--menu-padding: 4px;--menu-min-width: 88px;--menu-backdrop-filter: blur(20px)}.dark a-menu{--menu-bg: color-mix(in oklch, var(--bg-1) 78%, transparent);--menu-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)}}
+@layer anta{a-menu:not(:defined){display:none}a-menu{--menu-bg: color-mix(in oklch, var(--bg-1) 90%, transparent);--menu-radius: var(--radius-md, 8px);--menu-border: 1px solid var(--border-3);--menu-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);--menu-padding: 4px;--menu-min-width: 88px;--menu-backdrop-filter: blur(20px)}a-menu[round]{--menu-radius: attr(round type(<length>), 20px)}.dark a-menu{--menu-bg: color-mix(in oklch, var(--bg-1) 78%, transparent);--menu-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)}}

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

@@ -22,9 +22,12 @@ type MenuState = 'open' | 'closed';
  *   slotted light DOM (see `a-menu-item.css`), directly styleable.
  */
 export declare class AMenuElement extends HTMLElementBase {
+    #private;
     static observedAttributes: string[];
     /** Shadow-internal popover surface — the only thing we ever mutate. */
     surface: HTMLDivElement;
+    /** The scrolling body inside the surface (holds the items). */
+    private scrollEl;
     listening: boolean;
     private _shown;
     private teardown?;
@@ -36,6 +39,9 @@ export declare class AMenuElement extends HTMLElementBase {
     private closeTimer?;
     private typeBuffer;
     private typeTimer?;
+    private activeItem;
+    private comboObserver?;
+    private _flippedTop;
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -48,16 +54,13 @@ export declare class AMenuElement extends HTMLElementBase {
     /** A submenu is an `<a-menu>` nested inside an `<a-menu-item>` — derived from
      *  structure, no `submenu` attribute needed (the parent item is the anchor). */
     get isSubmenu(): boolean;
-    private get isContext();
-    private get isCoord();
-    private get isHover();
-    private get offset();
-    private get placement();
     /** Root menu: the previous element sibling is the trigger. Submenu: the
      *  enclosing menu item. One deterministic rule per case — no ambiguity. */
     get triggerAnchor(): HTMLElement | null;
-    /** For a submenu: the menu that contains its anchor item. */
-    private get ownerMenu();
+    /** Return focus to the trigger. Focuses the first focusable in the anchor; if
+     *  there is none (a mis-authored trigger — e.g. `renderTrigger` returning a
+     *  fragment or a non-focusable node), warns instead of silently focusing air. */
+    private focusTrigger;
     get isOpen(): boolean;
     /** Skip elements that can't actually take focus — `display:none` (incl. a
      *  closed submenu's contents), `visibility:hidden`, `content-visibility`
@@ -74,7 +77,41 @@ export declare class AMenuElement extends HTMLElementBase {
      *  used to trap Tab within the open menu. Submenu contents are excluded
      *  (their nearest `a-menu` is the submenu). */
     private focusables;
-    private focusFirstItem;
+    /** On open, seat initial focus like a native `<select>` / macOS menu: a menu
+     *  carrying a current value opens *at* that value, not at the top. Brings the
+     *  first selected row into view and, when opened via keyboard, focuses it;
+     *  with no selected row it focuses the first item (keyboard) and does nothing
+     *  otherwise. "Selected" = a `selected` row (tint) or `aria-checked` /
+     *  `aria-selected="true"` (checkable rows) — the first such visible item of
+     *  THIS menu, so a leaf buried in a closed submenu (not visible) is skipped and
+     *  a multi-select lands on its topmost checked row. */
+    private seatInitialFocus;
+    /** Scroll THIS menu's body so `item` sits inside the visible scroll viewport,
+     *  touching only the internal `.scroll` container — never the document, whose
+     *  scroll would trip the anchor-scrolled-out dismiss. No-op for a menu short
+     *  enough not to scroll. */
+    private scrollItemIntoView;
+    /** Fade the scrolling body's content into the top / bottom edges — but only on the
+     *  side that actually has more to scroll, so a short (non-scrolling) menu and the
+     *  true top / bottom stay crisp. Drives the `--fade-*` / `--gap-top` vars the
+     *  `.scroll` mask reads; runs on scroll and after every (re)position.
+     *  Shadow-internal only. */
+    private updateScrollFade;
+    /** Move the combobox cursor. Sets the item's `active` **property** (off-DOM
+     *  `:state(active)`, no attribute churn) and reflects `aria-activedescendant`
+     *  onto the search field — the same ARIA-state-reflection latitude as
+     *  `aria-expanded` on the anchor. `null` clears the cursor. */
+    private setActive;
+    /** Re-seat the cursor on the first option — but only once the filter has input.
+     *  An empty filter (e.g. right after opening) shows NO active row, so the first
+     *  ArrowDown is what steps onto the list; typing then keeps the top match active.
+     *  Rows marked `data-menu-skip-active` (e.g. a Select-all action) are skipped as
+     *  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). */
+    private handleComboKey;
     /** Public imperative API. Routes through the same intent path as the
      *  triggers, so it emits `statechange` and respects controlled mode. */
     open(opts?: {
@@ -109,6 +146,12 @@ export declare class AMenuElement extends HTMLElementBase {
     /** Apply OPEN to the DOM (no event) — used by uncontrolled intent and by the
      *  controlled `state` sync. */
     private show;
+    /** While a filter field is open, the visible option list changes as the user
+     *  types (the consumer re-renders the matches); re-seat the cursor on the first
+     *  match. `childList` only — an item toggling its own `selected` (multi-select)
+     *  mutates deep in its subtree, not this menu's direct children, so it won't
+     *  spuriously reset the cursor. */
+    private startComboObserver;
     /** Watch the root trigger and dismiss the system once it scrolls out of the
      *  spot it held at open (see trackPosition). Deferred a frame so the trigger's
      *  post-open layout has settled before the rect is snapshotted; guarded in case