@antadesign/anta 0.1.1-dev.8 → 0.2.0

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

@@ -0,0 +1,162 @@
+@layer anta {
+  /* Before the custom element upgrades, items inside an <a-menu> would flash
+     inline in the page (the menu host hides them once defined — see
+     a-menu.css). Items used standalone stay hidden until defined too, which
+     is harmless. */
+  a-menu-item:not(:defined) {
+    display: none;
+  }
+
+  /* a-menu-item is light DOM — style it (and its a-icon / kbd /
+     a-menu-item-label children) directly with your own CSS. The custom
+     properties below are INTERNAL plumbing for the tone + dark variant
+     matrix, not a public theming API: `--menu-item-color` is the text colour
+     (the hover/active tint mixes from `currentColor`, so it tracks the tone
+     for free), and `--menu-item-hover` / `--menu-item-active` are the mix
+     percentages. */
+  a-menu-item {
+    --menu-item-color: var(--text-2);
+    --menu-item-icon-color: var(--text-3);
+    --menu-item-hover: 6%;
+    --menu-item-active: 10%;
+    --menu-item-padding-x: 8px;
+    --menu-item-padding-y: 6px;
+    /* Keyboard focus ring colour — matches a-button's --button-focus (brand). */
+    --menu-item-focus: #503cb4;
+
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: 0.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;
+    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);
+  }
+  a-menu-item:active {
+    background: color-mix(in oklch, currentColor var(--menu-item-active), transparent);
+  }
+
+  /* Keyboard focus ring (like a-button): the ring sits just OUTSIDE the row at
+     the same +1px offset buttons use. The surface's 4px padding gives it room
+     on the sides. Pairs with the focus background above, so a keyboard-focused
+     row reads as bg tint + ring (distinct from a plain hover, which is bg only). */
+  a-menu-item:focus-visible {
+    outline: 1px solid var(--menu-item-focus);
+    outline-offset: 1px;
+  }
+
+  /* Label takes the remaining width and truncates; the trailing kbd / chevron
+     stays pinned to the right. */
+  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);
+  }
+
+  /* Optical side padding (same idea as a-button): an icon at an edge needs
+     less breathing room than text, so trim ~2px off whichever side a (non-only)
+     icon occupies — leading icon trims the start, trailing icon trims the end.
+     Submenu items are NOT trimmed here: they keep the symmetric padding and the
+     chevron is shifted instead (see the [submenu] chevron rule above). */
+  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);
+  }
+
+  /* Trailing keyboard hint — a plain light-DOM <kbd>. */
+  a-menu-item > kbd {
+    flex: none;
+    margin-left: auto;
+    padding-left: 12px;
+    color: var(--text-5);
+    font: inherit;
+    font-size: 1em;
+    letter-spacing: 0.1ch;
+    white-space: nowrap;
+  }
+
+  /* The submenu chevron hugs the right edge. The nested submenu <a-menu> never
+     renders in flow (it's a popover), so it doesn't participate in layout. */
+  a-menu-item[submenu] > a-icon:last-of-type {
+    margin-left: auto;
+  }
+
+  /* A trailing icon and a submenu chevron are both nudged toward the edge with
+     relative positioning (visual only, no reflow). A real trailing icon ALSO
+     gets the end-padding trim below (→ 6px), so it sits a touch closer to the
+     edge; the submenu keeps its symmetric padding (the nested <a-menu> is the
+     actual last child, so the trim rule doesn't fire for it). */
+  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;
+  }
+
+  /* Semantic tones: text + icon take the tone's `--text-2-{tone}`. The
+     hover/active tint mixes from currentColor at the SAME percentages as the
+     neutral item, so a toned row doesn't read heavier than a gray one. */
+  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;
+  }
+
+  /* Future checkbox / radio items: a leading check slot keyed off the role +
+     checked presence. Architecture-ready — no item logic changes needed. */
+  a-menu-item[role="menuitemcheckbox"] > a-icon[data-check],
+  a-menu-item[role="menuitemradio"] > a-icon[data-check] {
+    visibility: hidden;
+  }
+  a-menu-item[role="menuitemcheckbox"][checked] > a-icon[data-check],
+  a-menu-item[role="menuitemradio"][checked] > a-icon[data-check] {
+    visibility: visible;
+  }
+
+  /* Hover/active read a touch stronger in dark. */
+  .dark a-menu-item {
+    --menu-item-hover: 13%;
+    --menu-item-active: 19%;
+    --menu-item-focus: #a897fc;
+  }
+}

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

@@ -0,0 +1,27 @@
+import { HTMLElementBase } from '../anta_helpers';
+import './a-menu-item.css';
+declare global {
+    interface Document {
+        hasKeyListenerForAMenuItem?: boolean;
+    }
+}
+/**
+ * `<a-menu-item>` — a single row inside an `<a-menu>`.
+ *
+ * No shadow DOM: its content (leading icon, label, trailing `kbd` /
+ * chevron) is slotted light DOM, styled entirely from `a-menu-item.css`.
+ * The element carries almost no logic — the parent `<a-menu>` owns
+ * click delegation, keyboard navigation, and the close contract. This
+ * class exists so the menu can identify items via `instanceof` and so
+ * Enter / Space on a focused item synthesizes a click (the single
+ * activation path that flows through the menu's click delegation).
+ *
+ * ARIA (`role="menuitem"`, `tabindex="-1"`, `aria-haspopup`/`aria-expanded`
+ * for submenu parents) is added by the `MenuItem` JSX wrapper, never here —
+ * the element must stay re-renderable from any reactive engine without
+ * churning host attributes.
+ */
+export declare class AMenuItemElement extends HTMLElementBase {
+    connectedCallback(): void;
+}
+export declare function register_a_menu_item(): void;

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

@@ -0,0 +1,29 @@
+import { HTMLElementBase } from "../anta_helpers";
+import "./a-menu-item.css";
+class AMenuItemElement extends HTMLElementBase {
+  connectedCallback() {
+    if (!document.hasKeyListenerForAMenuItem) {
+      document.addEventListener("keydown", handleKeyDown, true);
+      document.hasKeyListenerForAMenuItem = true;
+    }
+  }
+}
+function handleKeyDown(e) {
+  if (e.key !== "Enter" && e.key !== " ") return;
+  const el = e.target?.closest?.("a-menu-item");
+  if (!el) return;
+  e.preventDefault();
+  if (el.hasAttribute("disabled")) return;
+  el.click();
+}
+function register_a_menu_item() {
+  if (typeof customElements === "undefined") return;
+  if (!customElements.get("a-menu-item")) {
+    customElements.define("a-menu-item", AMenuItemElement);
+  }
+}
+register_a_menu_item();
+export {
+  AMenuItemElement,
+  register_a_menu_item
+};

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

@@ -0,0 +1,15 @@
+@layer anta {
+  a-menu-separator:not(:defined) {
+    display: none;
+  }
+
+  a-menu-separator {
+    display: block;
+    flex-shrink: 0;
+    height: 1px;
+    margin: 2px 4px;
+    /* --border-5 is the most subtle border token, and it's mode-adaptive
+       (light in light mode, dark in dark mode), so no .dark override needed. */
+    background: var(--border-5);
+  }
+}

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

@@ -0,0 +1,12 @@
+import { HTMLElementBase } from '../anta_helpers';
+import './a-menu-separator.css';
+/**
+ * `<a-menu-separator>` — a thin divider between groups of menu items.
+ * No JS / no shadow DOM; styled entirely by `a-menu-separator.css`. The
+ * trivial class exists only so importing this module registers the tag and
+ * pulls its CSS along the granular entry point. `role="separator"` is added
+ * by the `MenuSeparator` JSX wrapper.
+ */
+export declare class AMenuSeparatorElement extends HTMLElementBase {
+}
+export declare function register_a_menu_separator(): void;

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

@@ -0,0 +1,15 @@
+import { HTMLElementBase } from "../anta_helpers";
+import "./a-menu-separator.css";
+class AMenuSeparatorElement extends HTMLElementBase {
+}
+function register_a_menu_separator() {
+  if (typeof customElements === "undefined") return;
+  if (!customElements.get("a-menu-separator")) {
+    customElements.define("a-menu-separator", AMenuSeparatorElement);
+  }
+}
+register_a_menu_separator();
+export {
+  AMenuSeparatorElement,
+  register_a_menu_separator
+};

package/dist/elements/a-menu.css

@@ -0,0 +1,34 @@
+@layer anta {
+  /* Before the element upgrades, <a-menu> is an unknown inline element and
+     its items would flash inline in the page. Hide it until defined; once
+     defined the shadow `:host { display: contents }` governs and content
+     renders only inside the popover surface via the slot. */
+  a-menu:not(:defined) {
+    display: none;
+  }
+
+  /* Only the surface "chrome" is exposed as tokens — it lives inside the
+     shadow popover and is unreachable from plain consumer CSS. Item styling
+     lives in a-menu-item.css (slotted light DOM, already styleable). These
+     custom properties inherit across the shadow boundary into the surface
+     (see a-menu.ts). The host draws nothing and stays out of layout. */
+  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);
+  }
+}

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

@@ -0,0 +1,120 @@
+import { HTMLElementBase } from '../anta_helpers';
+import './a-menu.css';
+export declare class AMenuElement extends HTMLElementBase {
+    static observedAttributes: string[];
+    /** Shadow-internal popover surface — the only thing we ever mutate. */
+    surface: HTMLDivElement;
+    listening: boolean;
+    private _shown;
+    private teardown?;
+    private openTimer?;
+    private closeTimer?;
+    private typeBuffer;
+    private typeTimer?;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    /** Apply the controlled `state` attribute to actual visibility, silently.
+     *  Absent → uncontrolled (no-op here; triggers manage it). */
+    private syncState;
+    /** Controlled iff the consumer is managing the `state` attribute. */
+    get isControlled(): boolean;
+    private get view();
+    private get doc();
+    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();
+    get isOpen(): boolean;
+    /** Skip elements that can't actually take focus — `display:none` (incl. a
+     *  closed submenu's contents), `visibility:hidden`, `content-visibility`
+     *  skipped — so navigation never lands on a hidden node (programmatic
+     *  `.focus()` on one silently fails). `getClientRects` is the fallback where
+     *  `checkVisibility` isn't available. */
+    private isVisible;
+    private focusableItems;
+    /** Every tabbable element belonging to THIS menu (items + nested controls
+     *  like inputs / sliders / buttons), in DOM order, visible and enabled —
+     *  used to trap Tab within the open menu. Submenu contents are excluded
+     *  (their nearest `a-menu` is the submenu). */
+    private focusables;
+    private focusFirstItem;
+    /** Public imperative API. Routes through the same intent path as the
+     *  triggers, so it emits `openchange` and respects controlled mode. */
+    open(opts?: {
+        coord?: [number, number];
+        viaKeyboard?: boolean;
+        originEvent?: Event;
+    }): void;
+    close(originEvent?: Event): void;
+    toggle(opts?: {
+        coord?: [number, number];
+        viaKeyboard?: boolean;
+        originEvent?: Event;
+    }): void;
+    /** Dispatch the single `openchange` event (new state + old state). */
+    emitChange(next: boolean, opts?: {
+        coord?: [number, number];
+        originEvent?: Event;
+    }): void;
+    /** Intent to open (trigger / method / keyboard). Emits `openchange`; applies
+     *  the visibility itself ONLY when uncontrolled — a controlled menu waits for
+     *  the consumer to flip `state` (strict). */
+    requestOpen(opts?: {
+        coord?: [number, number];
+        viaKeyboard?: boolean;
+        originEvent?: Event;
+    }): void;
+    /** Intent to close. Emits `openchange`; hides itself only when uncontrolled. */
+    requestClose(originEvent?: Event): void;
+    /** Apply OPEN to the DOM (no event) — used by uncontrolled intent and by the
+     *  controlled `state` sync. */
+    private show;
+    /** Apply CLOSE to the DOM (no event). Closes this menu and everything stacked
+     *  above it (its submenus). */
+    private hide;
+    /** Shadow-only show: open the popover and position it. `instant` skips the
+     *  enter-fade and positions synchronously, so a menu opening over an
+     *  already-visible one snaps in without a blink. */
+    _doShow(coord?: [number, number], instant?: boolean): void;
+    /** Shadow-only hide. */
+    _doHide(): void;
+    private position;
+    /**
+     * Fully declarative close contract — decided synchronously from the DOM, so
+     * it never depends on the consumer's click handler (which in a worker-thread
+     * runtime can't `preventDefault` on the UI thread). The menu never
+     * stops/prevents the click, so the consumer's selection handler always runs.
+     *
+     * Walk the click's composedPath outward to the surface; the NEAREST marker
+     * wins:
+     *   - `data-menu-open`  → keep the menu open (a Done button can still close
+     *                          from inside such a region — it's hit first).
+     *   - `a-menu-item` (a choice) or `data-menu-close` → close the menu.
+     *   - nothing → keep open (plain custom content doesn't dismiss).
+     */
+    private onSurfaceClick;
+    /** Close the whole open menu system from the root down. */
+    private closeSystem;
+    /** Called by the coordinator on the topmost open menu. Handles navigation;
+     *  Enter / Space activation is handled by a-menu-item's own global keydown
+     *  (which synthesizes a click → routed through onSurfaceClick). */
+    handleKey(e: KeyboardEvent): void;
+    private submenuOf;
+    private typeahead;
+    setupListeners(): void;
+    teardownListeners(): void;
+    private scheduleOpen;
+    private scheduleClose;
+    private cancelOpenTimer;
+    private cancelCloseTimer;
+}
+export declare function register_a_menu(): void;