@fusion.dev/helix 0.127.0 → 0.128.1

package/custom-elements.json

@@ -61971,7 +61971,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "The styled frame: the drawing with its zoom and fullscreen buttons, and the\nlist of notes beside it, which moves below the drawing where the frame is\nnarrower than 40rem. The selected note leads the list on a surface of its\nown, and the notes linked to it are named by how they link.",
+          "description": "The styled frame: the drawing with its zoom and fullscreen buttons, and the\nlist of notes beside it, which moves below the drawing where the frame is\nnarrower than 40rem. The selected note leads the list on a surface of its\nown, and the notes linked to it are named by how they link. With\n`no-panel`, the drawing takes the whole frame, and a button among the\ncontrols opens the search and the list over its end.",
           "name": "HelixGraph",
           "cssProperties": [
             {
@@ -61987,7 +61987,7 @@
               "name": "--graph-border-color"
             },
             {
-              "description": "The list's width beside the drawing.",
+              "description": "The list's width beside the drawing, or over it when opened with `no-panel`.",
               "name": "--graph-panel-size"
             },
             {
@@ -63065,6 +63065,21 @@
                 "module": "src/graph/root/graph-root.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "noPanel",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Leaves the search and the list out of the frame, behind a button among\nits controls that opens them over the drawing. For a graph shown large,\nsuch as at the top of a page, where the drawing takes the whole frame.",
+              "attribute": "no-panel",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "HelixHeadlessGraph",
+                "module": "src/graph/root/graph-root.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "notesLabel",
@@ -63072,7 +63087,7 @@
                 "text": "string"
               },
               "default": "'Notes'",
-              "description": "The list's name, read by screen readers.",
+              "description": "The list's name, read by screen readers, and the name of the button that opens it with `no-panel`.",
               "attribute": "notes-label",
               "inheritedFrom": {
                 "name": "HelixHeadlessGraph",
@@ -63135,6 +63150,20 @@
                 "module": "src/graph/root/graph-root.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "panelOpen",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false",
+              "description": "Whether the search and the list are open over the drawing, with `no-panel`.",
+              "inheritedFrom": {
+                "name": "HelixHeadlessGraph",
+                "module": "src/graph/root/graph-root.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "adjacency",
@@ -63434,6 +63463,38 @@
                 "module": "src/graph/root/graph-root.ts"
               }
             },
+            {
+              "kind": "method",
+              "name": "togglePanel",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "open",
+                  "default": "!this.panelOpen"
+                }
+              ],
+              "description": "Opens the search and the list over the drawing, or closes them, with\n`no-panel`. **Opened, the search field takes the focus**, since finding\na note is what the button is pressed for; closed from inside, the focus\ngoes back to the button, where it was.",
+              "inheritedFrom": {
+                "name": "HelixHeadlessGraph",
+                "module": "src/graph/root/graph-root.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "handlePanelKeydown",
+              "privacy": "private",
+              "readonly": true,
+              "description": "Escape in the panel closes it, with `no-panel`, once the search it holds is empty.",
+              "inheritedFrom": {
+                "name": "HelixHeadlessGraph",
+                "module": "src/graph/root/graph-root.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "handleSearch",
@@ -64163,13 +64224,26 @@
                 "module": "src/graph/root/graph-root.ts"
               }
             },
+            {
+              "name": "no-panel",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Leaves the search and the list out of the frame, behind a button among\nits controls that opens them over the drawing. For a graph shown large,\nsuch as at the top of a page, where the drawing takes the whole frame.",
+              "fieldName": "noPanel",
+              "inheritedFrom": {
+                "name": "HelixHeadlessGraph",
+                "module": "src/graph/root/graph-root.ts"
+              }
+            },
             {
               "name": "notes-label",
               "type": {
                 "text": "string"
               },
               "default": "'Notes'",
-              "description": "The list's name, read by screen readers.",
+              "description": "The list's name, read by screen readers, and the name of the button that opens it with `no-panel`.",
               "fieldName": "notesLabel",
               "inheritedFrom": {
                 "name": "HelixHeadlessGraph",
@@ -64496,6 +64570,14 @@
                 "module": "src/graph/root/graph-root.ts"
               }
             },
+            {
+              "description": "The button among the controls that opens the search and the list over the drawing, with `no-panel`.",
+              "name": "notes-toggle",
+              "inheritedFrom": {
+                "name": "HelixHeadlessGraph",
+                "module": "src/graph/root/graph-root.ts"
+              }
+            },
             {
               "description": "The button that moves the graph down.",
               "name": "pan-down",
@@ -64529,7 +64611,7 @@
               }
             },
             {
-              "description": "The search field and the list, beside the drawing or below it.",
+              "description": "The search field and the list, beside the drawing or below it, or over the drawing when opened with `no-panel`.",
               "name": "panel",
               "inheritedFrom": {
                 "name": "HelixHeadlessGraph",

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

@@ -62,6 +62,57 @@ border-inline-start: none;
 }
 }
 
+:host([no-panel]) [part="body"] {
+grid-template-columns: minmax(0, 1fr);
+grid-template-rows: minmax(0, 1fr);
+position: relative;
+}
+
+:host([no-panel]) [part="panel"] {
+border: var(--helix-border-floating) solid var(--helix-color-border);
+border-radius: var(--helix-radii-sm);
+box-shadow: var(--helix-shadow-floating);
+inline-size: min(var(--graph-panel-size, 18rem), calc(100% - var(--helix-space-sm) * 2));
+inset-block: var(--helix-space-sm);
+inset-inline-end: var(--helix-space-sm);
+overflow: hidden;
+position: absolute;
+z-index: 1;
+}
+
+:host([no-panel]) [part="panel"][hidden] {
+display: none;
+}
+
+:host([no-panel]) [part="body"]:has([part="panel"]:not([hidden])) [part="controls"] {
+inset-inline-end: calc(min(var(--graph-panel-size, 18rem), 100%) + var(--helix-space-sm) * 2);
+}
+
+[part="notes-toggle"] {
+grid-area: notes;
+}
+
+[part="notes-toggle"] svg {
+block-size: 1em;
+inline-size: 1em;
+}
+
+[part="controls"]:has([part="notes-toggle"]):not(:has([part="pan-up"])) {
+grid-template-areas:
+"zoomin"
+"zoomout"
+"notes"
+"full";
+}
+
+[part="controls"]:has([part="notes-toggle"]):has([part="pan-up"]) {
+grid-template-areas:
+".      up    .      zoomin"
+"start  .     end    zoomout"
+".      down  .      notes"
+".      .     .      full";
+}
+
 [part="search"] {
 align-items: center;
 border-block-end: var(--helix-border-thin) solid var(--helix-color-border);

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

@@ -7,7 +7,9 @@ import type { CSSResultGroup } from 'lit';
  * The styled frame: the drawing with its zoom and fullscreen buttons, and the
  * list of notes beside it, which moves below the drawing where the frame is
  * narrower than 40rem. The selected note leads the list on a surface of its
- * own, and the notes linked to it are named by how they link.
+ * own, and the notes linked to it are named by how they link. With
+ * `no-panel`, the drawing takes the whole frame, and a button among the
+ * controls opens the search and the list over its end.
  *
  * @since 0.116.0
  * @status experimental
@@ -18,7 +20,7 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --graph-background-color - The color behind the drawing while it loads.
  * @cssproperty --graph-block-size - The frame's height, as a length.
  * @cssproperty --graph-border-color - The frame's border color.
- * @cssproperty --graph-panel-size - The list's width beside the drawing.
+ * @cssproperty --graph-panel-size - The list's width beside the drawing, or over it when opened with `no-panel`.
  * @cssproperty --viewport-control-background-color - The background of the zoom and fullscreen buttons. Map and Canvas use the same property.
  */
 export declare class HelixGraph extends HelixHeadlessGraph {

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.127.0",
+  "version": "0.128.1",
   "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.127.0",
-    "@fusion.dev/helix-headless": "0.127.0",
-    "@fusion.dev/helix-styles": "0.127.0"
+    "@fusion.dev/helix-core": "0.128.1",
+    "@fusion.dev/helix-headless": "0.128.1",
+    "@fusion.dev/helix-styles": "0.128.1"
   },
   "devDependencies": {
-    "@fusion.dev/helix-cem": "0.127.0",
-    "@fusion.dev/helix-testing": "0.127.0",
+    "@fusion.dev/helix-cem": "0.128.1",
+    "@fusion.dev/helix-testing": "0.128.1",
     "@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

@@ -11338,9 +11338,17 @@ Required. */
   "links-to-label"?: (HelixGraph["linksToLabel"]) | undefined;
   /** How a note that links to the selected one is described, with `{note}`. */
   linksToLabel?: (HelixGraph["linksToLabel"]) | undefined;
-  /** The list's name, read by screen readers. */
+  /** Leaves the search and the list out of the frame, behind a button among
+its controls that opens them over the drawing. For a graph shown large,
+such as at the top of a page, where the drawing takes the whole frame. */
+  "no-panel"?: (HelixGraph["noPanel"]) | undefined;
+  /** Leaves the search and the list out of the frame, behind a button among
+its controls that opens them over the drawing. For a graph shown large,
+such as at the top of a page, where the drawing takes the whole frame. */
+  noPanel?: (HelixGraph["noPanel"]) | undefined;
+  /** The list's name, read by screen readers, and the name of the button that opens it with `no-panel`. */
   "notes-label"?: (HelixGraph["notesLabel"]) | undefined;
-  /** The list's name, read by screen readers. */
+  /** The list's name, read by screen readers, and the name of the button that opens it with `no-panel`. */
   notesLabel?: (HelixGraph["notesLabel"]) | undefined;
   /** The search field's name. */
   "search-label"?: (HelixGraph["searchLabel"]) | undefined;
@@ -11589,9 +11597,17 @@ Required. */
   "attr:links-to-label"?: (HelixGraph["linksToLabel"]) | undefined;
   /** How a note that links to the selected one is described, with `{note}`. */
   "prop:linksToLabel"?: (HelixGraph["linksToLabel"]) | undefined;
-  /** The list's name, read by screen readers. */
+  /** Leaves the search and the list out of the frame, behind a button among
+its controls that opens them over the drawing. For a graph shown large,
+such as at the top of a page, where the drawing takes the whole frame. */
+  "bool:no-panel"?: (HelixGraph["noPanel"]) | undefined;
+  /** Leaves the search and the list out of the frame, behind a button among
+its controls that opens them over the drawing. For a graph shown large,
+such as at the top of a page, where the drawing takes the whole frame. */
+  "prop:noPanel"?: (HelixGraph["noPanel"]) | undefined;
+  /** The list's name, read by screen readers, and the name of the button that opens it with `no-panel`. */
   "attr:notes-label"?: (HelixGraph["notesLabel"]) | undefined;
-  /** The list's name, read by screen readers. */
+  /** The list's name, read by screen readers, and the name of the button that opens it with `no-panel`. */
   "prop:notesLabel"?: (HelixGraph["notesLabel"]) | undefined;
   /** The search field's name. */
   "attr:search-label"?: (HelixGraph["searchLabel"]) | undefined;
@@ -35478,7 +35494,9 @@ export type CustomElements = {
    * The styled frame: the drawing with its zoom and fullscreen buttons, and the
    * list of notes beside it, which moves below the drawing where the frame is
    * narrower than 40rem. The selected note leads the list on a surface of its
-   * own, and the notes linked to it are named by how they link.
+   * own, and the notes linked to it are named by how they link. With
+   * `no-panel`, the drawing takes the whole frame, and a button among the
+   * controls opens the search and the list over its end.
    *
    * ## Attributes & Properties
    *
@@ -35593,7 +35611,10 @@ export type CustomElements = {
    * - `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}`.
-   * - `notes-label`/`notesLabel`: The list's name, read by screen readers.
+   * - `no-panel`/`noPanel`: Leaves the search and the list out of the frame, behind a button among
+   * its controls that opens them over the drawing. For a graph shown large,
+   * such as at the top of a page, where the drawing takes the whole frame.
+   * - `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.
    * - `links`: The links between notes, each from `source` to `target`. A property, never an attribute. (property only)
@@ -35682,7 +35703,7 @@ export type CustomElements = {
    * - `--graph-background-color`: The color behind the drawing while it loads. (default: `undefined`)
    * - `--graph-block-size`: The frame's height, as a length. (default: `undefined`)
    * - `--graph-border-color`: The frame's border color. (default: `undefined`)
-   * - `--graph-panel-size`: The list's width beside the drawing. (default: `undefined`)
+   * - `--graph-panel-size`: The list's width beside the drawing, or over it when opened with `no-panel`. (default: `undefined`)
    * - `--viewport-control-background-color`: The background of the zoom and fullscreen buttons. Map and Canvas use the same property. (default: `undefined`)
    *
    * ## CSS Parts
@@ -35709,11 +35730,12 @@ export type CustomElements = {
    * - `note-name`: A note's name in the list.
    * - `note-relation`: How a note stands to the selected one, such as "Linked from Alpha".
    * - `note-selected`: The selected note, first in the list.
+   * - `notes-toggle`: The button among the controls that opens the search and the list over the drawing, with `no-panel`.
    * - `pan-down`: The button that moves the graph down.
    * - `pan-end`: The button that moves the graph toward the end of a line of text: right in English.
    * - `pan-start`: The button that moves the graph toward the start of a line of text: left in English.
    * - `pan-up`: The button that moves the graph up.
-   * - `panel`: The search field and the list, beside the drawing or below it.
+   * - `panel`: The search field and the list, beside the drawing or below it, or over the drawing when opened with `no-panel`.
    * - `region`: The frame: the drawing, its controls and the list.
    * - `search`: The bar holding the icon, the search field and the count.
    * - `search-field`: The field that finds a note by its name.
@@ -57767,7 +57789,9 @@ export type CustomElementsSolidJs = {
    * The styled frame: the drawing with its zoom and fullscreen buttons, and the
    * list of notes beside it, which moves below the drawing where the frame is
    * narrower than 40rem. The selected note leads the list on a surface of its
-   * own, and the notes linked to it are named by how they link.
+   * own, and the notes linked to it are named by how they link. With
+   * `no-panel`, the drawing takes the whole frame, and a button among the
+   * controls opens the search and the list over its end.
    *
    * ## Attributes & Properties
    *
@@ -57882,7 +57906,10 @@ export type CustomElementsSolidJs = {
    * - `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}`.
-   * - `notes-label`/`notesLabel`: The list's name, read by screen readers.
+   * - `no-panel`/`noPanel`: Leaves the search and the list out of the frame, behind a button among
+   * its controls that opens them over the drawing. For a graph shown large,
+   * such as at the top of a page, where the drawing takes the whole frame.
+   * - `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.
    * - `links`: The links between notes, each from `source` to `target`. A property, never an attribute. (property only)
@@ -57971,7 +57998,7 @@ export type CustomElementsSolidJs = {
    * - `--graph-background-color`: The color behind the drawing while it loads. (default: `undefined`)
    * - `--graph-block-size`: The frame's height, as a length. (default: `undefined`)
    * - `--graph-border-color`: The frame's border color. (default: `undefined`)
-   * - `--graph-panel-size`: The list's width beside the drawing. (default: `undefined`)
+   * - `--graph-panel-size`: The list's width beside the drawing, or over it when opened with `no-panel`. (default: `undefined`)
    * - `--viewport-control-background-color`: The background of the zoom and fullscreen buttons. Map and Canvas use the same property. (default: `undefined`)
    *
    * ## CSS Parts
@@ -57998,11 +58025,12 @@ export type CustomElementsSolidJs = {
    * - `note-name`: A note's name in the list.
    * - `note-relation`: How a note stands to the selected one, such as "Linked from Alpha".
    * - `note-selected`: The selected note, first in the list.
+   * - `notes-toggle`: The button among the controls that opens the search and the list over the drawing, with `no-panel`.
    * - `pan-down`: The button that moves the graph down.
    * - `pan-end`: The button that moves the graph toward the end of a line of text: right in English.
    * - `pan-start`: The button that moves the graph toward the start of a line of text: left in English.
    * - `pan-up`: The button that moves the graph up.
-   * - `panel`: The search field and the list, beside the drawing or below it.
+   * - `panel`: The search field and the list, beside the drawing or below it, or over the drawing when opened with `no-panel`.
    * - `region`: The frame: the drawing, its controls and the list.
    * - `search`: The bar holding the icon, the search field and the count.
    * - `search-field`: The field that finds a note by its name.
@@ -72219,7 +72247,7 @@ export type CustomCssProperties = {
   "--graph-block-size"?: (string) | undefined;
   /** The frame's border color. */
   "--graph-border-color"?: (string) | undefined;
-  /** The list's width beside the drawing. */
+  /** The list's width beside the drawing, or over it when opened with `no-panel`. */
   "--graph-panel-size"?: (string) | undefined;
   /** An explicit track list. It overrides `min` and `columns`. Use it for tracks of unequal widths, which neither attribute can set. */
   "--grid-columns"?: (string) | undefined;

package/types/vue.d.ts

@@ -5934,9 +5934,17 @@ Required. */
   "links-to-label"?: (HelixGraph["linksToLabel"]) | undefined;
   /** How a note that links to the selected one is described, with `{note}`. */
   linksToLabel?: (HelixGraph["linksToLabel"]) | undefined;
-  /** The list's name, read by screen readers. */
+  /** Leaves the search and the list out of the frame, behind a button among
+its controls that opens them over the drawing. For a graph shown large,
+such as at the top of a page, where the drawing takes the whole frame. */
+  "no-panel"?: (HelixGraph["noPanel"]) | undefined;
+  /** Leaves the search and the list out of the frame, behind a button among
+its controls that opens them over the drawing. For a graph shown large,
+such as at the top of a page, where the drawing takes the whole frame. */
+  noPanel?: (HelixGraph["noPanel"]) | undefined;
+  /** The list's name, read by screen readers, and the name of the button that opens it with `no-panel`. */
   "notes-label"?: (HelixGraph["notesLabel"]) | undefined;
-  /** The list's name, read by screen readers. */
+  /** The list's name, read by screen readers, and the name of the button that opens it with `no-panel`. */
   notesLabel?: (HelixGraph["notesLabel"]) | undefined;
   /** The search field's name. */
   "search-label"?: (HelixGraph["searchLabel"]) | undefined;
@@ -14311,7 +14319,7 @@ export type CustomCssProperties = {
   "--graph-block-size"?: (string) | undefined;
   /** The frame's border color. */
   "--graph-border-color"?: (string) | undefined;
-  /** The list's width beside the drawing. */
+  /** The list's width beside the drawing, or over it when opened with `no-panel`. */
   "--graph-panel-size"?: (string) | undefined;
   /** An explicit track list. It overrides `min` and `columns`. Use it for tracks of unequal widths, which neither attribute can set. */
   "--grid-columns"?: (string) | undefined;
@@ -15327,7 +15335,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixFormatDateVueProps,
     HelixFormatDateVueEvents
   >;
-  /** The styled frame: the drawing with its zoom and fullscreen buttons, and the list of notes beside it, which moves below the drawing where the frame is narrower than 40rem. The selected note leads the list on a surface of its own, and the notes linked to it are named by how they link. */
+  /** The styled frame: the drawing with its zoom and fullscreen buttons, and the list of notes beside it, which moves below the drawing where the frame is narrower than 40rem. The selected note leads the list on a surface of its own, and the notes linked to it are named by how they link. With 'no-panel', the drawing takes the whole frame, and a button among the controls opens the search and the list over its end. */
   "helix-graph": DefineCustomElement<
     HelixGraph,
     HelixGraphVueProps,