@fusion.dev/helix-headless 0.202.0 → 0.203.0

package/custom-elements.json

@@ -114946,7 +114946,7 @@
               "name": "handleKeyDown",
               "privacy": "private",
               "readonly": true,
-              "description": "Down Arrow on the trigger of an open panel moves focus to the panel's first\nlink or control, as Radix's navigation menu does."
+              "description": "Down Arrow on the trigger moves focus to the panel's first link or\ncontrol, opening the panel first where it is closed, as Radix's\nnavigation menu does.\n\n**Opening is the half a trigger that is a link needs.** A page may slot\nan anchor as the trigger, so the word in the bar goes to its product's\npage on a press and the panel opens on hover. Enter on that anchor goes\nto the page, which leaves a keyboard the arrow as its way into the panel."
             },
             {
               "kind": "field",
@@ -219293,6 +219293,6 @@
   ],
   "helix": {
     "package": "@fusion.dev/helix-headless",
-    "version": "0.202.0"
+    "version": "0.203.0"
   }
 }

package/dist/graph/root/graph-model.d.ts

@@ -3,7 +3,7 @@ export type GraphNodeShape = 'circle' | 'diamond' | 'ring' | 'square';
 /** How heavily a note is drawn, from the `emphasis` axis. */
 export type GraphNodeEmphasis = 'outlined' | 'solid' | 'subtle';
 /** What a note is drawn as made of, from the `material` axis. */
-export type GraphNodeMaterial = 'frosted' | 'glass';
+export type GraphNodeMaterial = 'frosted' | 'glass' | 'mark';
 /** What a note means, from the `tone` axis, which colors it over its group. */
 export type GraphNodeTone = 'accent' | 'danger' | 'info' | 'neutral' | 'primary' | 'success' | 'warning';
 /** One note in a graph. */
@@ -20,7 +20,7 @@ export interface GraphNode {
     emphasis?: GraphNodeEmphasis | undefined;
     /** A kind the note belongs to, such as a tag, which a renderer colors it by. */
     group?: string | undefined;
-    /** What it is drawn as made of: `glass` or `frosted`. Unset is the renderer's own. */
+    /** What it is drawn as made of: `glass`, `frosted`, or `mark`. Unset is the renderer's own. */
     material?: GraphNodeMaterial | undefined;
     /**
      * Its shape, which says what kind of note it is at a glance: a person as a

package/dist/megamenu/root/megamenu-root.d.ts

@@ -224,8 +224,14 @@ export declare class HelixHeadlessMegamenu extends HelixHeadlessMegamenu_base {
      */
     protected readonly keys: KeyboardNavigationController;
     /**
-     * Down Arrow on the trigger of an open panel moves focus to the panel's first
-     * link or control, as Radix's navigation menu does.
+     * Down Arrow on the trigger moves focus to the panel's first link or
+     * control, opening the panel first where it is closed, as Radix's
+     * navigation menu does.
+     *
+     * **Opening is the half a trigger that is a link needs.** A page may slot
+     * an anchor as the trigger, so the word in the bar goes to its product's
+     * page on a press and the panel opens on hover. Enter on that anchor goes
+     * to the page, which leaves a keyboard the arrow as its way into the panel.
      */
     private readonly handleKeyDown;
     /** Watches the panel's links for the one that is the page you are on. */

package/dist/megamenu/root/megamenu-root.js

@@ -39,17 +39,24 @@ let HelixHeadlessMegamenu = class HelixHeadlessMegamenu extends MixinControllerO
             wrap: false,
         });
         this.handleKeyDown = (event) => {
-            if (event.key !== 'ArrowDown' || !this.open || event.defaultPrevented) {
+            if (event.key !== 'ArrowDown' || event.defaultPrevented) {
                 return;
             }
             const trigger = this.trigger;
             if (!event.composedPath().includes(trigger)) {
                 return;
             }
-            const first = focusableElements(this).find((element) => element !== trigger && !element.closest('[slot="trigger"]'));
-            if (first) {
-                event.preventDefault();
-                first.focus();
+            event.preventDefault();
+            const enter = () => {
+                focusableElements(this)
+                    .find((element) => element !== trigger && !element.closest('[slot="trigger"]'))
+                    ?.focus();
+            };
+            if (this.open) {
+                enter();
+            }
+            else if (this.requestOpen(true)) {
+                this.updateComplete.then(enter);
             }
         };
         this.handleScroll = () => {