@fusion.dev/helix 0.130.0 → 0.131.0

package/custom-elements.json

@@ -62983,6 +62983,19 @@
                 "module": "src/graph/root/graph-root.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "hiddenGroups",
+              "type": {
+                "text": "readonly string[]"
+              },
+              "default": "[]",
+              "description": "The groups turned off in the legend, by name, whose notes neither the drawing nor the list shows. A property, never an attribute.",
+              "inheritedFrom": {
+                "name": "HelixHeadlessGraph",
+                "module": "src/graph/root/graph-root.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "label",
@@ -62997,6 +63010,34 @@
                 "module": "src/graph/root/graph-root.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "legend",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Names the groups over the drawing, each a button in its color that shows\nor hides its notes. Drawn where the notes have two groups or more.",
+              "attribute": "legend",
+              "inheritedFrom": {
+                "name": "HelixHeadlessGraph",
+                "module": "src/graph/root/graph-root.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "legendLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Groups'",
+              "description": "The legend's name, read by screen readers.",
+              "attribute": "legend-label",
+              "inheritedFrom": {
+                "name": "HelixHeadlessGraph",
+                "module": "src/graph/root/graph-root.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "linkedBothLabel",
@@ -63213,7 +63254,21 @@
                 "text": "Set<string> | undefined"
               },
               "privacy": "private",
-              "description": "The notes the local graph keeps, or every note where there is no `depth`.",
+              "description": "The notes the local graph and the legend keep, or `undefined` where neither leaves any out.",
+              "inheritedFrom": {
+                "name": "HelixHeadlessGraph",
+                "module": "src/graph/root/graph-root.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "groups",
+              "type": {
+                "text": "GraphGroupEntry[]"
+              },
+              "privacy": "private",
+              "default": "[]",
+              "description": "The groups the notes are in, each with the tone all its notes share\nwhere they share one. **In the order of their names**, which is the\norder `connectGraph` gives them their colors in.",
               "inheritedFrom": {
                 "name": "HelixHeadlessGraph",
                 "module": "src/graph/root/graph-root.ts"
@@ -63395,6 +63450,44 @@
                 "module": "src/graph/root/graph-root.ts"
               }
             },
+            {
+              "kind": "method",
+              "name": "toggleGroup",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Shows a group's notes or hides them, through the request a page can refuse.",
+              "inheritedFrom": {
+                "name": "HelixHeadlessGraph",
+                "module": "src/graph/root/graph-root.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderLegend",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "TemplateResult | typeof nothing"
+                }
+              },
+              "description": "The groups over the drawing, with `legend`, each a button pressed while\nits notes are shown. **Nothing for one group or none**: a legend of one\nnames what every note is, and turning it off empties the graph.",
+              "inheritedFrom": {
+                "name": "HelixHeadlessGraph",
+                "module": "src/graph/root/graph-root.ts"
+              }
+            },
             {
               "kind": "method",
               "name": "choose",
@@ -63900,7 +63993,7 @@
                 "slug": "large"
               },
               {
-                "description": "A graph of company notes drawn by Sigma.js, with notes arriving and messages passing between them as they happen.",
+                "description": "A graph of company notes drawn by Sigma.js, with notes arriving and messages passing between them as they happen, and a legend that shows or hides each subject.",
                 "slug": "live"
               }
             ],
@@ -64185,6 +64278,32 @@
                 "module": "src/graph/root/graph-root.ts"
               }
             },
+            {
+              "name": "legend",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Names the groups over the drawing, each a button in its color that shows\nor hides its notes. Drawn where the notes have two groups or more.",
+              "fieldName": "legend",
+              "inheritedFrom": {
+                "name": "HelixHeadlessGraph",
+                "module": "src/graph/root/graph-root.ts"
+              }
+            },
+            {
+              "name": "legend-label",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Groups'",
+              "description": "The legend's name, read by screen readers.",
+              "fieldName": "legendLabel",
+              "inheritedFrom": {
+                "name": "HelixHeadlessGraph",
+                "module": "src/graph/root/graph-root.ts"
+              }
+            },
             {
               "name": "linked-both-label",
               "type": {
@@ -64302,6 +64421,18 @@
                 "module": "src/graph/root/graph-root.ts"
               }
             },
+            {
+              "type": {
+                "text": "HelixGraphFilterEvent"
+              },
+              "description": "A group in the legend was pressed, to show or hide its notes. The detail's `hidden` is every group that would be hidden. Cancelable: cancel it to keep the groups as they were, or to set `hiddenGroups` yourself.",
+              "name": "helix-graph-filter",
+              "reactProp": "onhelix-graph-filter",
+              "inheritedFrom": {
+                "name": "HelixHeadlessGraph",
+                "module": "src/graph/root/graph-root.ts"
+              }
+            },
             {
               "type": {
                 "text": "HelixGraphLayoutEvent"
@@ -64506,6 +64637,38 @@
                 "module": "src/graph/root/graph-root.ts"
               }
             },
+            {
+              "description": "The groups over the drawing, with `legend`, each a button that shows or hides its notes.",
+              "name": "legend",
+              "inheritedFrom": {
+                "name": "HelixHeadlessGraph",
+                "module": "src/graph/root/graph-root.ts"
+              }
+            },
+            {
+              "description": "One group in the legend, pressed while its notes are shown. Carries `data-tone` where every note in the group has the same tone, which colors the notes over the group's own color.",
+              "name": "legend-item",
+              "inheritedFrom": {
+                "name": "HelixHeadlessGraph",
+                "module": "src/graph/root/graph-root.ts"
+              }
+            },
+            {
+              "description": "A group in the legend whose notes are hidden.",
+              "name": "legend-item-hidden",
+              "inheritedFrom": {
+                "name": "HelixHeadlessGraph",
+                "module": "src/graph/root/graph-root.ts"
+              }
+            },
+            {
+              "description": "The mark in a group's color, before its name.",
+              "name": "legend-swatch",
+              "inheritedFrom": {
+                "name": "HelixHeadlessGraph",
+                "module": "src/graph/root/graph-root.ts"
+              }
+            },
             {
               "description": "The list of notes, which draws only the rows in view.",
               "name": "list",

package/dist/element-events.generated.js

@@ -90,6 +90,7 @@ registerElementEvents({
     'helix-graph': [
         'helix-activate',
         'helix-before-activate',
+        'helix-graph-filter',
         'helix-graph-layout',
         'helix-graph-pan',
         'helix-graph-part-change',

package/dist/graph/root/graph-root.css.js

@@ -113,6 +113,196 @@ grid-template-areas:
 ".      .     .      full";
 }
 
+[part="legend"] {
+display: flex;
+flex-wrap: wrap;
+gap: var(--helix-space-2xs);
+inset-block-end: var(--helix-space-sm);
+inset-inline-start: var(--helix-space-sm);
+max-inline-size: calc(100% - var(--helix-space-sm) * 3 - var(--helix-size-control-sm));
+position: absolute;
+}
+
+:host([controls-placement="bottom-start"]) [part="legend"] {
+inset-inline: auto var(--helix-space-sm);
+}
+
+@container (inline-size < 40rem) {
+[part="legend"] {
+flex-wrap: nowrap;
+inset-block-end: calc(var(--helix-space-sm) - var(--helix-space-2xs));
+inset-inline-start: calc(var(--helix-space-sm) - var(--helix-space-2xs));
+overflow-x: auto;
+padding: var(--helix-space-2xs);
+scrollbar-width: none;
+}
+}
+
+[part~="legend-item"] {
+align-items: center;
+background-color: var(--viewport-control-background-color, var(--helix-color-surface-overlay));
+block-size: var(--helix-size-control-tight);
+border: var(--helix-border-floating) solid var(--helix-color-border);
+border-radius: var(--helix-radii-sm);
+box-shadow: var(--helix-shadow-floating);
+color: var(--helix-color-foreground);
+cursor: pointer;
+display: inline-flex;
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-xs);
+font-weight: var(--helix-weight-medium);
+gap: var(--helix-space-2xs);
+padding-inline: var(--helix-space-xs);
+white-space: nowrap;
+}
+
+[part~="legend-item"]:focus-visible {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: var(--helix-size-focus-offset);
+}
+
+[part~="legend-item"]:nth-child(24n + 1) {
+--_graph-swatch: var(--helix-color-series-1);
+}
+
+[part~="legend-item"]:nth-child(24n + 2) {
+--_graph-swatch: var(--helix-color-series-2);
+}
+
+[part~="legend-item"]:nth-child(24n + 3) {
+--_graph-swatch: var(--helix-color-series-3);
+}
+
+[part~="legend-item"]:nth-child(24n + 4) {
+--_graph-swatch: var(--helix-color-series-4);
+}
+
+[part~="legend-item"]:nth-child(24n + 5) {
+--_graph-swatch: var(--helix-color-series-5);
+}
+
+[part~="legend-item"]:nth-child(24n + 6) {
+--_graph-swatch: var(--helix-color-series-6);
+}
+
+[part~="legend-item"]:nth-child(24n + 7) {
+--_graph-swatch: var(--helix-color-series-7);
+}
+
+[part~="legend-item"]:nth-child(24n + 8) {
+--_graph-swatch: var(--helix-color-series-8);
+}
+
+[part~="legend-item"]:nth-child(24n + 9) {
+--_graph-swatch: var(--helix-color-series-9);
+}
+
+[part~="legend-item"]:nth-child(24n + 10) {
+--_graph-swatch: var(--helix-color-series-10);
+}
+
+[part~="legend-item"]:nth-child(24n + 11) {
+--_graph-swatch: var(--helix-color-series-11);
+}
+
+[part~="legend-item"]:nth-child(24n + 12) {
+--_graph-swatch: var(--helix-color-series-12);
+}
+
+[part~="legend-item"]:nth-child(24n + 13) {
+--_graph-swatch: var(--helix-color-series-13);
+}
+
+[part~="legend-item"]:nth-child(24n + 14) {
+--_graph-swatch: var(--helix-color-series-14);
+}
+
+[part~="legend-item"]:nth-child(24n + 15) {
+--_graph-swatch: var(--helix-color-series-15);
+}
+
+[part~="legend-item"]:nth-child(24n + 16) {
+--_graph-swatch: var(--helix-color-series-16);
+}
+
+[part~="legend-item"]:nth-child(24n + 17) {
+--_graph-swatch: var(--helix-color-series-17);
+}
+
+[part~="legend-item"]:nth-child(24n + 18) {
+--_graph-swatch: var(--helix-color-series-18);
+}
+
+[part~="legend-item"]:nth-child(24n + 19) {
+--_graph-swatch: var(--helix-color-series-19);
+}
+
+[part~="legend-item"]:nth-child(24n + 20) {
+--_graph-swatch: var(--helix-color-series-20);
+}
+
+[part~="legend-item"]:nth-child(24n + 21) {
+--_graph-swatch: var(--helix-color-series-21);
+}
+
+[part~="legend-item"]:nth-child(24n + 22) {
+--_graph-swatch: var(--helix-color-series-22);
+}
+
+[part~="legend-item"]:nth-child(24n + 23) {
+--_graph-swatch: var(--helix-color-series-23);
+}
+
+[part~="legend-item"]:nth-child(24n + 24) {
+--_graph-swatch: var(--helix-color-series-24);
+}
+
+[part~="legend-item"][data-tone="accent"] {
+--_graph-swatch: var(--helix-color-accent);
+}
+
+[part~="legend-item"][data-tone="danger"] {
+--_graph-swatch: var(--helix-color-danger);
+}
+
+[part~="legend-item"][data-tone="info"] {
+--_graph-swatch: var(--helix-color-info);
+}
+
+[part~="legend-item"][data-tone="neutral"] {
+--_graph-swatch: var(--helix-color-foreground-muted);
+}
+
+[part~="legend-item"][data-tone="primary"] {
+--_graph-swatch: var(--helix-color-primary);
+}
+
+[part~="legend-item"][data-tone="success"] {
+--_graph-swatch: var(--helix-color-success);
+}
+
+[part~="legend-item"][data-tone="warning"] {
+--_graph-swatch: var(--helix-color-warning);
+}
+
+[part="legend-swatch"] {
+block-size: var(--helix-space-xs);
+border: var(--helix-border-thin) solid var(--_graph-swatch, var(--helix-color-foreground-muted));
+border-radius: var(--helix-radii-full);
+box-sizing: border-box;
+background-color: var(--_graph-swatch, var(--helix-color-foreground-muted));
+flex: 0 0 auto;
+inline-size: var(--helix-space-xs);
+}
+
+[part~="legend-item-hidden"] {
+color: var(--helix-color-foreground-subtle);
+}
+
+[part~="legend-item-hidden"] [part="legend-swatch"] {
+background-color: transparent;
+}
+
 [part="search"] {
 align-items: center;
 border-block-end: var(--helix-border-thin) solid var(--helix-color-border);
@@ -239,6 +429,10 @@ min-inline-size: 0;
 }
 
 @media (forced-colors: active) {
+[part~="legend-item-hidden"] {
+color: GrayText;
+}
+
 [part="list"]:focus-visible [part~="note-cursor"] {
 outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
 outline-offset: calc(var(--helix-size-focus-offset) * -1);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix",
   "description": "Styled component tier. Extends the headless tier with token-driven presentation.",
-  "version": "0.130.0",
+  "version": "0.131.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -51,13 +51,13 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.130.0",
-    "@fusion.dev/helix-headless": "0.130.0",
-    "@fusion.dev/helix-styles": "0.130.0"
+    "@fusion.dev/helix-core": "0.131.0",
+    "@fusion.dev/helix-headless": "0.131.0",
+    "@fusion.dev/helix-styles": "0.131.0"
   },
   "devDependencies": {
-    "@fusion.dev/helix-cem": "0.130.0",
-    "@fusion.dev/helix-testing": "0.130.0",
+    "@fusion.dev/helix-cem": "0.131.0",
+    "@fusion.dev/helix-testing": "0.131.0",
     "@fusion.dev/scripts": "0.0.0-dev",
     "@happy-dom/global-registrator": "^20.0.0",
     "@lit-labs/ssr": "^4.1.0",

package/types/jsx.d.ts

@@ -83,6 +83,7 @@ import type {
   HelixFormElement,
   HelixFormatDate,
   HelixGraph,
+  HelixGraphFilterEvent,
   HelixGraphLayoutEvent,
   HelixGraphPanEvent,
   HelixGraphPartChangeEvent,
@@ -11107,6 +11108,9 @@ export type HelixGraphHelixActivateElementEvent =
 /** `helix-before-activate` event type */
 export type HelixGraphHelixBeforeActivateElementEvent =
   HelixGraphElementEvent<HelixBeforeActivateEvent>;
+/** `helix-graph-filter` event type */
+export type HelixGraphHelixGraphFilterElementEvent =
+  HelixGraphElementEvent<HelixGraphFilterEvent>;
 /** `helix-graph-layout` event type */
 export type HelixGraphHelixGraphLayoutElementEvent =
   HelixGraphElementEvent<HelixGraphLayoutEvent>;
@@ -11326,6 +11330,13 @@ shows every note. The list holds what the drawing shows. */
   /** The graph's name, read by screen readers, such as "Research notes".
 Required. */
   label?: (HelixGraph["label"]) | undefined;
+  /** Names the groups over the drawing, each a button in its color that shows
+or hides its notes. Drawn where the notes have two groups or more. */
+  legend?: (HelixGraph["legend"]) | undefined;
+  /** The legend's name, read by screen readers. */
+  "legend-label"?: (HelixGraph["legendLabel"]) | undefined;
+  /** The legend's name, read by screen readers. */
+  legendLabel?: (HelixGraph["legendLabel"]) | undefined;
   /** How a note linked both to and from the selected one is described, with `{note}`. */
   "linked-both-label"?: (HelixGraph["linkedBothLabel"]) | undefined;
   /** How a note linked both to and from the selected one is described, with `{note}`. */
@@ -11358,6 +11369,8 @@ such as at the top of a page, where the drawing takes the whole frame. */
   "selected-label"?: (HelixGraph["selectedLabel"]) | undefined;
   /** How the selected note is described in the list. */
   selectedLabel?: (HelixGraph["selectedLabel"]) | undefined;
+  /** The groups turned off in the legend, by name, whose notes neither the drawing nor the list shows. A property, never an attribute. */
+  hiddenGroups?: (HelixGraph["hiddenGroups"]) | undefined;
   /** The links between notes, each from `source` to `target`. A property, never an attribute. */
   links?: (HelixGraph["links"]) | undefined;
   /** The notes. A property, never an attribute. */
@@ -11369,6 +11382,8 @@ such as at the top of a page, where the drawing takes the whole frame. */
   "onhelix-before-activate"?: ((
     e: HelixGraphHelixBeforeActivateElementEvent,
   ) => void) | undefined;
+  /** A group in the legend was pressed, to show or hide its notes. The detail's `hidden` is every group that would be hidden. Cancelable: cancel it to keep the groups as they were, or to set `hiddenGroups` yourself. */
+  "onhelix-graph-filter"?: ((e: HelixGraphHelixGraphFilterElementEvent) => void) | undefined;
   /** A layout settled, with where it put each note, sent by `laidOut()`. Keep the positions and pass them back as each note's `x` and `y`, and `z` where a renderer draws in three dimensions. */
   "onhelix-graph-layout"?: ((e: HelixGraphHelixGraphLayoutElementEvent) => void) | undefined;
   /** A pan button or arrow key was pressed. `connectGraph` moves the drawing. */
@@ -11585,6 +11600,13 @@ shows every note. The list holds what the drawing shows. */
   /** The graph's name, read by screen readers, such as "Research notes".
 Required. */
   "prop:label"?: (HelixGraph["label"]) | undefined;
+  /** Names the groups over the drawing, each a button in its color that shows
+or hides its notes. Drawn where the notes have two groups or more. */
+  "prop:legend"?: (HelixGraph["legend"]) | undefined;
+  /** The legend's name, read by screen readers. */
+  "attr:legend-label"?: (HelixGraph["legendLabel"]) | undefined;
+  /** The legend's name, read by screen readers. */
+  "prop:legendLabel"?: (HelixGraph["legendLabel"]) | undefined;
   /** How a note linked both to and from the selected one is described, with `{note}`. */
   "attr:linked-both-label"?: (HelixGraph["linkedBothLabel"]) | undefined;
   /** How a note linked both to and from the selected one is described, with `{note}`. */
@@ -11617,6 +11639,8 @@ such as at the top of a page, where the drawing takes the whole frame. */
   "attr:selected-label"?: (HelixGraph["selectedLabel"]) | undefined;
   /** How the selected note is described in the list. */
   "prop:selectedLabel"?: (HelixGraph["selectedLabel"]) | undefined;
+  /** The groups turned off in the legend, by name, whose notes neither the drawing nor the list shows. A property, never an attribute. */
+  "prop:hiddenGroups"?: (HelixGraph["hiddenGroups"]) | undefined;
   /** The links between notes, each from `source` to `target`. A property, never an attribute. */
   "prop:links"?: (HelixGraph["links"]) | undefined;
   /** The notes. A property, never an attribute. */
@@ -11627,6 +11651,8 @@ such as at the top of a page, where the drawing takes the whole frame. */
   "on:helix-before-activate"?: ((
     e: HelixGraphHelixBeforeActivateElementEvent,
   ) => void) | undefined;
+  /** A group in the legend was pressed, to show or hide its notes. The detail's `hidden` is every group that would be hidden. Cancelable: cancel it to keep the groups as they were, or to set `hiddenGroups` yourself. */
+  "on:helix-graph-filter"?: ((e: HelixGraphHelixGraphFilterElementEvent) => void) | undefined;
   /** A layout settled, with where it put each note, sent by `laidOut()`. Keep the positions and pass them back as each note's `x` and `y`, and `z` where a renderer draws in three dimensions. */
   "on:helix-graph-layout"?: ((e: HelixGraphHelixGraphLayoutElementEvent) => void) | undefined;
   /** A pan button or arrow key was pressed. `connectGraph` moves the drawing. */
@@ -35608,6 +35634,9 @@ export type CustomElements = {
    * shows every note. The list holds what the drawing shows.
    * - `label`: The graph's name, read by screen readers, such as "Research notes".
    * Required.
+   * - `legend`: Names the groups over the drawing, each a button in its color that shows
+   * or hides its notes. Drawn where the notes have two groups or more.
+   * - `legend-label`/`legendLabel`: The legend's name, read by screen readers.
    * - `linked-both-label`/`linkedBothLabel`: How a note linked both to and from the selected one is described, with `{note}`.
    * - `linked-from-label`/`linkedFromLabel`: How a note the selected one links to is described, with `{note}`, the selected note's name.
    * - `links-to-label`/`linksToLabel`: How a note that links to the selected one is described, with `{note}`.
@@ -35617,6 +35646,7 @@ export type CustomElements = {
    * - `notes-label`/`notesLabel`: The list's name, read by screen readers, and the name of the button that opens it with `no-panel`.
    * - `search-label`/`searchLabel`: The search field's name.
    * - `selected-label`/`selectedLabel`: How the selected note is described in the list.
+   * - `hiddenGroups`: The groups turned off in the legend, by name, whose notes neither the drawing nor the list shows. A property, never an attribute. (property only)
    * - `links`: The links between notes, each from `source` to `target`. A property, never an attribute. (property only)
    * - `nodes`: The notes. A property, never an attribute. (property only)
    * - `ready`: Whether the graph has been drawn whole. For code that runs after `helix-graph-ready`. (property only) (readonly)
@@ -35647,6 +35677,7 @@ export type CustomElements = {
    *
    * - `helix-activate`: A note was selected, in the list or in the drawing. The detail's `value` is its `id`.
    * - `helix-before-activate`: A note is about to be selected. Cancelable: cancel it to keep the selection in your own state.
+   * - `helix-graph-filter`: A group in the legend was pressed, to show or hide its notes. The detail's `hidden` is every group that would be hidden. Cancelable: cancel it to keep the groups as they were, or to set `hiddenGroups` yourself.
    * - `helix-graph-layout`: A layout settled, with where it put each note, sent by `laidOut()`. Keep the positions and pass them back as each note's `x` and `y`, and `z` where a renderer draws in three dimensions.
    * - `helix-graph-pan`: A pan button or arrow key was pressed. `connectGraph` moves the drawing.
    * - `helix-graph-part-change`: The notes, the links, the selection, the depth or the gestures changed. Used by `connectGraph`; pages do not need to listen for it.
@@ -35722,6 +35753,10 @@ export type CustomElements = {
    * - `gesture-hint`: Words over the graph for a moment when it lets a gesture pass to the page, such as how to zoom it.
    * - `gesture-status`: The line shown while a graph with `gestures="activate"` has the gestures.
    * - `header`: The strip above the graph.
+   * - `legend`: The groups over the drawing, with `legend`, each a button that shows or hides its notes.
+   * - `legend-item`: One group in the legend, pressed while its notes are shown. Carries `data-tone` where every note in the group has the same tone, which colors the notes over the group's own color.
+   * - `legend-item-hidden`: A group in the legend whose notes are hidden.
+   * - `legend-swatch`: The mark in a group's color, before its name.
    * - `list`: The list of notes, which draws only the rows in view.
    * - `live`: What screen readers hear when a search changes how many notes there are.
    * - `note`: One note in the list.
@@ -57903,6 +57938,9 @@ export type CustomElementsSolidJs = {
    * shows every note. The list holds what the drawing shows.
    * - `label`: The graph's name, read by screen readers, such as "Research notes".
    * Required.
+   * - `legend`: Names the groups over the drawing, each a button in its color that shows
+   * or hides its notes. Drawn where the notes have two groups or more.
+   * - `legend-label`/`legendLabel`: The legend's name, read by screen readers.
    * - `linked-both-label`/`linkedBothLabel`: How a note linked both to and from the selected one is described, with `{note}`.
    * - `linked-from-label`/`linkedFromLabel`: How a note the selected one links to is described, with `{note}`, the selected note's name.
    * - `links-to-label`/`linksToLabel`: How a note that links to the selected one is described, with `{note}`.
@@ -57912,6 +57950,7 @@ export type CustomElementsSolidJs = {
    * - `notes-label`/`notesLabel`: The list's name, read by screen readers, and the name of the button that opens it with `no-panel`.
    * - `search-label`/`searchLabel`: The search field's name.
    * - `selected-label`/`selectedLabel`: How the selected note is described in the list.
+   * - `hiddenGroups`: The groups turned off in the legend, by name, whose notes neither the drawing nor the list shows. A property, never an attribute. (property only)
    * - `links`: The links between notes, each from `source` to `target`. A property, never an attribute. (property only)
    * - `nodes`: The notes. A property, never an attribute. (property only)
    * - `ready`: Whether the graph has been drawn whole. For code that runs after `helix-graph-ready`. (property only) (readonly)
@@ -57942,6 +57981,7 @@ export type CustomElementsSolidJs = {
    *
    * - `helix-activate`: A note was selected, in the list or in the drawing. The detail's `value` is its `id`.
    * - `helix-before-activate`: A note is about to be selected. Cancelable: cancel it to keep the selection in your own state.
+   * - `helix-graph-filter`: A group in the legend was pressed, to show or hide its notes. The detail's `hidden` is every group that would be hidden. Cancelable: cancel it to keep the groups as they were, or to set `hiddenGroups` yourself.
    * - `helix-graph-layout`: A layout settled, with where it put each note, sent by `laidOut()`. Keep the positions and pass them back as each note's `x` and `y`, and `z` where a renderer draws in three dimensions.
    * - `helix-graph-pan`: A pan button or arrow key was pressed. `connectGraph` moves the drawing.
    * - `helix-graph-part-change`: The notes, the links, the selection, the depth or the gestures changed. Used by `connectGraph`; pages do not need to listen for it.
@@ -58017,6 +58057,10 @@ export type CustomElementsSolidJs = {
    * - `gesture-hint`: Words over the graph for a moment when it lets a gesture pass to the page, such as how to zoom it.
    * - `gesture-status`: The line shown while a graph with `gestures="activate"` has the gestures.
    * - `header`: The strip above the graph.
+   * - `legend`: The groups over the drawing, with `legend`, each a button that shows or hides its notes.
+   * - `legend-item`: One group in the legend, pressed while its notes are shown. Carries `data-tone` where every note in the group has the same tone, which colors the notes over the group's own color.
+   * - `legend-item-hidden`: A group in the legend whose notes are hidden.
+   * - `legend-swatch`: The mark in a group's color, before its name.
    * - `list`: The list of notes, which draws only the rows in view.
    * - `live`: What screen readers hear when a search changes how many notes there are.
    * - `note`: One note in the list.

package/types/vue.d.ts

@@ -188,6 +188,7 @@ import type {
   HelixFacetEvent,
   HelixActivateEvent,
   HelixBeforeActivateEvent,
+  HelixGraphFilterEvent,
   HelixGraphLayoutEvent,
   HelixGraphPanEvent,
   HelixGraphPartChangeEvent,
@@ -5703,6 +5704,9 @@ export type HelixGraphHelixActivateElementEvent =
 /** `helix-before-activate` event type */
 export type HelixGraphHelixBeforeActivateElementEvent =
   HelixGraphElementEvent<HelixBeforeActivateEvent>;
+/** `helix-graph-filter` event type */
+export type HelixGraphHelixGraphFilterElementEvent =
+  HelixGraphElementEvent<HelixGraphFilterEvent>;
 /** `helix-graph-layout` event type */
 export type HelixGraphHelixGraphLayoutElementEvent =
   HelixGraphElementEvent<HelixGraphLayoutEvent>;
@@ -5922,6 +5926,13 @@ shows every note. The list holds what the drawing shows. */
   /** The graph's name, read by screen readers, such as "Research notes".
 Required. */
   label?: (HelixGraph["label"]) | undefined;
+  /** Names the groups over the drawing, each a button in its color that shows
+or hides its notes. Drawn where the notes have two groups or more. */
+  legend?: (HelixGraph["legend"]) | undefined;
+  /** The legend's name, read by screen readers. */
+  "legend-label"?: (HelixGraph["legendLabel"]) | undefined;
+  /** The legend's name, read by screen readers. */
+  legendLabel?: (HelixGraph["legendLabel"]) | undefined;
   /** How a note linked both to and from the selected one is described, with `{note}`. */
   "linked-both-label"?: (HelixGraph["linkedBothLabel"]) | undefined;
   /** How a note linked both to and from the selected one is described, with `{note}`. */
@@ -5954,6 +5965,8 @@ such as at the top of a page, where the drawing takes the whole frame. */
   "selected-label"?: (HelixGraph["selectedLabel"]) | undefined;
   /** How the selected note is described in the list. */
   selectedLabel?: (HelixGraph["selectedLabel"]) | undefined;
+  /** The groups turned off in the legend, by name, whose notes neither the drawing nor the list shows. A property, never an attribute. */
+  hiddenGroups?: (HelixGraph["hiddenGroups"]) | undefined;
   /** The links between notes, each from `source` to `target`. A property, never an attribute. */
   links?: (HelixGraph["links"]) | undefined;
   /** The notes. A property, never an attribute. */
@@ -5965,6 +5978,8 @@ export type HelixGraphVueEvents = {
   "helix-activate": HelixGraphHelixActivateElementEvent;
   /** A note is about to be selected. Cancelable: cancel it to keep the selection in your own state. */
   "helix-before-activate": HelixGraphHelixBeforeActivateElementEvent;
+  /** A group in the legend was pressed, to show or hide its notes. The detail's `hidden` is every group that would be hidden. Cancelable: cancel it to keep the groups as they were, or to set `hiddenGroups` yourself. */
+  "helix-graph-filter": HelixGraphHelixGraphFilterElementEvent;
   /** A layout settled, with where it put each note, sent by `laidOut()`. Keep the positions and pass them back as each note's `x` and `y`, and `z` where a renderer draws in three dimensions. */
   "helix-graph-layout": HelixGraphHelixGraphLayoutElementEvent;
   /** A pan button or arrow key was pressed. `connectGraph` moves the drawing. */