@fusion.dev/helix-headless 0.201.1 → 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",
@@ -156917,6 +156917,10 @@
               "description": "The outline around the bar the pointer or the keys rest on, painted after it, so the bars in front of it cover it.",
               "name": "ring"
             },
+            {
+              "description": "The same outline, faint and dashed, drawn over every bar, so the part of the bar the pointer or the keys rest on that others hide still shows.",
+              "name": "ring-behind"
+            },
             {
               "description": "The number of bars, series, and categories, and the range of values, written as a sentence for screen readers, which describes the plot. Hide it visually.",
               "name": "summary"
@@ -167252,6 +167256,10 @@
               "description": "The outline around the block the pointer or the keys rest on, painted after it, so the blocks in front of it cover it.",
               "name": "ring"
             },
+            {
+              "description": "The same outline, faint and dashed, drawn over every block, so the part of the block the pointer or the keys rest on that others hide still shows.",
+              "name": "ring-behind"
+            },
             {
               "description": "The number of items and groups and the range of their sizes, written as a sentence for screen readers, which describes the plot. Hide it visually.",
               "name": "summary"
@@ -219285,6 +219293,6 @@
   ],
   "helix": {
     "package": "@fusion.dev/helix-headless",
-    "version": "0.201.1"
+    "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 = () => {

package/dist/spatial-bar-chart/root/spatial-bar-chart-root.d.ts

@@ -85,6 +85,7 @@ declare const HelixHeadlessSpatialBarChart_base: typeof HelixElement & (new (...
  * @csspart mark - The invisible point the tooltip is anchored to, where the renderer draws the reading.
  * @csspart plot - The box the drawing fills, which takes focus to be read by key. It is named by the host's `aria-labelledby` or `aria-label`, then by `label`, then by the caption of the table.
  * @csspart ring - The outline around the bar the pointer or the keys rest on, painted after it, so the bars in front of it cover it.
+ * @csspart ring-behind - The same outline, faint and dashed, drawn over every bar, so the part of the bar the pointer or the keys rest on that others hide still shows.
  * @csspart summary - The number of bars, series, and categories, and the range of values, written as a sentence for screen readers, which describes the plot. Hide it visually.
  * @csspart table - The readings as a table, for a screen reader, rendered only where they were drawn from `data`. Hide it visually.
  * @csspart tick - A category's or a series' name, or a value at a tick, along its edge of the box, in the chart's own drawing.

package/dist/spatial-bar-chart/root/spatial-bar-chart-root.js

@@ -177,7 +177,7 @@ let HelixHeadlessSpatialBarChart = class HelixHeadlessSpatialBarChart extends Mi
         @pointermove=${this.onDrawingMove}
         @pointerup=${this.onDrawingTap}
       >${this.noBox ? nothing : drawBox(view)}${depthOrder(view.projection, bars).map((bar) => svg `${this.renderBar(field, bar, at)}${bar === active ? svg `<path d=${active.drawn.outline} part="ring"></path>` : nothing}`)}${active
-            ? svg `<foreignObject height="0.001" overflow="visible" width="0.001" x=${active.drawn.peak.x} y=${active.drawn.peak.y}>${this.renderOwnTooltip(cell?.row)}</foreignObject>`
+            ? svg `<path d=${active.drawn.outline} part="ring-behind"></path><foreignObject height="0.001" overflow="visible" width="0.001" x=${active.drawn.peak.x} y=${active.drawn.peak.y}>${this.renderOwnTooltip(cell?.row)}</foreignObject>`
             : nothing}</svg>
     </div>`;
     }

package/dist/spatial-treemap/root/spatial-treemap-root.d.ts

@@ -85,6 +85,7 @@ declare const HelixHeadlessSpatialTreemap_base: typeof HelixElement & (new (...a
  * @csspart mark - The invisible point the tooltip is anchored to, where the renderer draws the reading.
  * @csspart plot - The box the drawing fills, which takes focus to be read by key. It is named by the host's `aria-labelledby` or `aria-label`, then by `label`, then by the caption of the table.
  * @csspart ring - The outline around the block the pointer or the keys rest on, painted after it, so the blocks in front of it cover it.
+ * @csspart ring-behind - The same outline, faint and dashed, drawn over every block, so the part of the block the pointer or the keys rest on that others hide still shows.
  * @csspart summary - The number of items and groups and the range of their sizes, written as a sentence for screen readers, which describes the plot. Hide it visually.
  * @csspart table - The readings as a table, for a screen reader, rendered only where they were drawn from `data`. Hide it visually.
  * @csspart tick - A height at a tick, along its edge of the box, in the chart's own drawing.

package/dist/spatial-treemap/root/spatial-treemap-root.js

@@ -174,7 +174,7 @@ let HelixHeadlessSpatialTreemap = class HelixHeadlessSpatialTreemap extends Mixi
         @pointermove=${this.onDrawingMove}
         @pointerup=${this.onDrawingTap}
       >${this.noBox ? nothing : drawBox(view)}${paintOrder(view.projection, blocks).map((block) => svg `${this.renderBlock(field, block, at)}${block === active ? svg `<path d=${active.drawn.outline} part="ring"></path>` : nothing}`)}${active
-            ? svg `<foreignObject height="0.001" overflow="visible" width="0.001" x=${active.drawn.peak.x} y=${active.drawn.peak.y}>${this.renderOwnTooltip(field.blocks[at]?.row)}</foreignObject>`
+            ? svg `<path d=${active.drawn.outline} part="ring-behind"></path><foreignObject height="0.001" overflow="visible" width="0.001" x=${active.drawn.peak.x} y=${active.drawn.peak.y}>${this.renderOwnTooltip(field.blocks[at]?.row)}</foreignObject>`
             : nothing}</svg>
     </div>`;
     }