@antadesign/anta 0.3.33 → 0.3.35

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

@@ -12,9 +12,9 @@ declare global {
  * 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).
+ * class owns the active cursor state and ensures Enter / Space on a focused
+ * item synthesizes a click (the single activation path through the menu's
+ * click delegation).
  *
  * ARIA (`role="menuitem"`, `tabindex`, `aria-haspopup` on submenu parents) is
  * added by the `MenuItem` JSX wrapper, never here — the element must stay
@@ -61,6 +61,8 @@ export declare class AMenuItemElement extends HTMLElementBase {
  *  (`<a data-anta-menu-item href>`) that `MenuItem` renders when given an `href`.
  *  Used for hit-testing (Enter/Space activation, arrow nav, close-on-select). */
 export declare const MENU_ITEM_SELECTOR = "a-menu-item, a[data-anta-menu-item]";
+/** True for a custom menu row across independently compiled builds and realms. */
+export declare function isCustomMenuItem(el: EventTarget | null | undefined): el is AMenuItemElement;
 /** True for either menu-item shape (see `MENU_ITEM_SELECTOR`). Narrows an
  *  `EventTarget` / focused node to the row element. */
 export declare function isMenuItemEl(el: EventTarget | null | undefined): el is HTMLElement;

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

@@ -25,8 +25,11 @@ class AMenuItemElement extends HTMLElementBase {
   }
 }
 const MENU_ITEM_SELECTOR = "a-menu-item, a[data-anta-menu-item]";
+function isCustomMenuItem(el) {
+  return isMenuItemEl(el) && el.localName === "a-menu-item";
+}
 function isMenuItemEl(el) {
-  return el instanceof AMenuItemElement || el instanceof HTMLElement && el.matches("a[data-anta-menu-item]");
+  return !!el && el.nodeType === 1 && el.matches(MENU_ITEM_SELECTOR);
 }
 function ensureMenuItemKeyListener(doc) {
   if (doc.hasKeyListenerForAMenuItem) return;
@@ -54,6 +57,7 @@ export {
   AMenuItemElement,
   MENU_ITEM_SELECTOR,
   ensureMenuItemKeyListener,
+  isCustomMenuItem,
   isMenuItemEl,
   register_a_menu_item
 };

package/dist/elements/a-menu.css

@@ -1 +1 @@
-@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-menu:not(:defined){display:none}a-menu{--menu-bg: light-dark( color-mix(in oklch, var(--bg-1) 90%, transparent), color-mix(in oklch, var(--bg-1) 78%, 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);--menu-width-duration: .16s}@media(prefers-reduced-motion:reduce){a-menu{--menu-width-duration: 0}}a-menu[round]{--menu-radius: 20px;@supports (border-radius: attr(probe type(<length>),1px)){--menu-radius: attr(round type(<length>), 20px)}}.dark a-menu{--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 base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-menu:not(:defined){display:none}a-menu{--menu-bg: light-dark( color-mix(in oklch, var(--bg-1) 90%, transparent), color-mix(in oklch, var(--bg-1) 78%, transparent) );--menu-round: initial;--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-item-radius: max(0px, calc(var(--menu-radius) - var(--menu-padding)));--menu-min-width: 88px;--menu-backdrop-filter: blur(20px);--menu-width-duration: .16s;--_anchor-width: initial;--_menu-max-height: initial;--_menu-fade-top: initial;--_menu-fade-bottom: initial;--_menu-gap-top: initial;display:contents}a-menu::part(menu){position:fixed;inset:0 auto auto 0;margin:0;padding:0;box-sizing:border-box;flex-direction:column;min-width:max(var(--menu-min-width, 88px),var(--_anchor-width, 0px));max-width:calc(100vw - 8px);max-height:var(--_menu-max-height, calc(100dvh - 8px) );overflow:hidden;background:var(--menu-bg, Canvas);color:var(--text-2, CanvasText);border:var(--menu-border, 1px solid);border-radius:var(--menu-radius, 8px);box-shadow:var(--menu-shadow, 0 8px 24px color-mix(in oklch, black 20%, transparent));-webkit-backdrop-filter:var(--menu-backdrop-filter, blur(20px));backdrop-filter:var(--menu-backdrop-filter, blur(20px));outline:none;opacity:0;translate:0 -4px;transition:opacity .14s ease-out,translate .14s ease-out,width var(--menu-width-duration, .16s) ease,display .14s allow-discrete,overlay .14s allow-discrete}a-menu::part(menu):popover-open{display:flex;opacity:1;translate:0 0;transition:opacity .1s ease-out,translate .1s ease-out,width var(--menu-width-duration, .16s) ease,display .1s allow-discrete,overlay .1s allow-discrete}@starting-style{a-menu::part(menu):popover-open{opacity:0;translate:0 -4px}}a-menu::part(header),a-menu::part(footer){display:block;flex:none}:where(a-menu>:is(a-menu-header,a-select-header)[slot=header]),:where(a-menu>:is(a-menu-footer,a-select-footer)[slot=footer]){display:block;padding:var(--menu-padding, 4px)}a-menu::part(scroll){flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:1px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:var(--menu-padding, 4px);scroll-padding-block:var(--menu-padding, 4px);-webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent var(--_menu-gap-top, 0px),#000 var(--_menu-fade-top, 0px),#000 calc(100% - var(--_menu-fade-bottom, 0px)),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,transparent var(--_menu-gap-top, 0px),#000 var(--_menu-fade-top, 0px),#000 calc(100% - var(--_menu-fade-bottom, 0px)),transparent 100%)}@media(prefers-reduced-motion:reduce){a-menu{--menu-width-duration: 0}}a-menu[round]{--menu-radius: var(--menu-round, 20px);@supports (border-radius: attr(probe type(<length>),1px)){--menu-radius: var(--menu-round, attr(round type(<length>), 20px))}}a-menu[round] a-menu:not([round]){--menu-radius: inherit}.dark a-menu{--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

@@ -14,7 +14,7 @@ type MenuState = 'open' | 'closed';
  * Styling notes (`a-menu.css` ships comment-free):
  * - `a-menu:not(:defined)` is hidden — before upgrade the host is an unknown
  *   inline element and its light-DOM items would flash in the page. Once
- *   defined, the shadow `:host { display: contents }` governs and content
+ *   defined, external `display: contents` governs and content
  *   renders only inside the popover surface via the slot.
  * - Only the surface "chrome" is tokenized (`--menu-*`): it lives inside the
  *   shadow popover, unreachable from plain consumer CSS; the custom
@@ -99,7 +99,7 @@ export declare class AMenuElement extends HTMLElementBase {
     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
+     *  true top / bottom stay crisp. Drives the private fade/gap properties the
      *  `.scroll` mask reads; runs on scroll and after every (re)position.
      *  Shadow-internal only. */
     private updateScrollFade;
@@ -157,11 +157,8 @@ 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. */
+    /** Reconcile changed results while filtering. Slotted filters observe direct
+     * children only; autocomplete also observes row content and disabled changes. */
     private startComboObserver;
     /** Apply CLOSE without notifying this menu's owner. Notify nested menus so
      *  their controlled state follows the closing parent. */
@@ -224,6 +221,7 @@ export declare class AMenuElement extends HTMLElementBase {
     teardownListeners(): void;
     private scheduleOpen;
     private scheduleClose;
+    private holdHoverClose;
     private cancelOpenTimer;
     private cancelCloseTimer;
 }