@fusion.dev/helix-headless 0.116.0 → 0.117.0

package/types/jsx.d.ts

@@ -36,6 +36,9 @@ import type {
   HelixFacetEvent,
   HelixFilterEvent,
   HelixFormElement,
+  HelixGraphPanEvent,
+  HelixGraphReadyEvent,
+  HelixGraphZoomEvent,
   HelixHeadlessAccordion,
   HelixHeadlessAccordionItem,
   HelixHeadlessAnnouncement,
@@ -87,6 +90,7 @@ import type {
   HelixHeadlessFilterMenu,
   HelixHeadlessFilterOperator,
   HelixHeadlessFormatDate,
+  HelixHeadlessGraph,
   HelixHeadlessHeatmap,
   HelixHeadlessIcon,
   HelixHeadlessIconButton,
@@ -9265,6 +9269,439 @@ Empty is the runtime's own. */
   textContent?: (string | number) | undefined;
 };
 
+/** `HelixHeadlessGraph` component event */
+export type HelixHeadlessGraphElementEvent<E = Event> = TypedEvent<
+  HelixHeadlessGraph,
+  E
+>;
+/** `helix-activate` event type */
+export type HelixHeadlessGraphHelixActivateElementEvent =
+  HelixHeadlessGraphElementEvent<HelixActivateEvent>;
+/** `helix-before-activate` event type */
+export type HelixHeadlessGraphHelixBeforeActivateElementEvent =
+  HelixHeadlessGraphElementEvent<HelixBeforeActivateEvent>;
+/** `helix-graph-pan` event type */
+export type HelixHeadlessGraphHelixGraphPanElementEvent =
+  HelixHeadlessGraphElementEvent<HelixGraphPanEvent>;
+/** `helix-graph-ready` event type */
+export type HelixHeadlessGraphHelixGraphReadyElementEvent =
+  HelixHeadlessGraphElementEvent<HelixGraphReadyEvent>;
+/** `helix-graph-zoom` event type */
+export type HelixHeadlessGraphHelixGraphZoomElementEvent =
+  HelixHeadlessGraphElementEvent<HelixGraphZoomEvent>;
+
+export type HelixHeadlessGraphProps = {
+  /** What the list says of a note's count, with `{count}`. */
+  "count-label"?: (HelixHeadlessGraph["countLabel"]) | undefined;
+  /** What the list says of a note's count, with `{count}`. */
+  countLabel?: (HelixHeadlessGraph["countLabel"]) | undefined;
+  /** How many links from the selected note to show, for its local graph. Unset
+shows every note. The list holds what the drawing shows. */
+  depth?: (HelixHeadlessGraph["depth"]) | undefined;
+  /** The graph's name, read by screen readers, such as "Research notes".
+Required. */
+  label?: (HelixHeadlessGraph["label"]) | undefined;
+  /** How a note linked both to and from the selected one is described, with `{note}`. */
+  "linked-both-label"?: (HelixHeadlessGraph["linkedBothLabel"]) | undefined;
+  /** How a note linked both to and from the selected one is described, with `{note}`. */
+  linkedBothLabel?: (HelixHeadlessGraph["linkedBothLabel"]) | undefined;
+  /** How a note the selected one links to is described, with `{note}`, the selected note's name. */
+  "linked-from-label"?: (HelixHeadlessGraph["linkedFromLabel"]) | undefined;
+  /** How a note the selected one links to is described, with `{note}`, the selected note's name. */
+  linkedFromLabel?: (HelixHeadlessGraph["linkedFromLabel"]) | undefined;
+  /** How a note that links to the selected one is described, with `{note}`. */
+  "links-to-label"?: (HelixHeadlessGraph["linksToLabel"]) | undefined;
+  /** How a note that links to the selected one is described, with `{note}`. */
+  linksToLabel?: (HelixHeadlessGraph["linksToLabel"]) | undefined;
+  /** The list's name, read by screen readers. */
+  "notes-label"?: (HelixHeadlessGraph["notesLabel"]) | undefined;
+  /** The list's name, read by screen readers. */
+  notesLabel?: (HelixHeadlessGraph["notesLabel"]) | undefined;
+  /** The search field's name. */
+  "search-label"?: (HelixHeadlessGraph["searchLabel"]) | undefined;
+  /** The search field's name. */
+  searchLabel?: (HelixHeadlessGraph["searchLabel"]) | undefined;
+  /** How the selected note is described in the list. */
+  "selected-label"?: (HelixHeadlessGraph["selectedLabel"]) | undefined;
+  /** How the selected note is described in the list. */
+  selectedLabel?: (HelixHeadlessGraph["selectedLabel"]) | undefined;
+  /** Which controls to show, as a list such as `pan zoom fullscreen`, or
+`none`. A family can add words of its own.
+
+**A list rather than a switch, because the overlap is not symmetric.** A
+surface a consumer brings often has zoom controls of its own and almost
+never has pan buttons, so a single switch would make them choose between
+a duplicate and nothing.
+
+`none` draws none of them, which is the right answer where what was
+slotted already has controls a reader can find: what this argues for is
+that *a* findable control exists, never that it is ours. The methods stay
+public either way, so a consumer drawing their own chrome can still drive
+the surface.
+
+Absent is whatever the family rests at, which is this library's rule that
+a resting value is an attribute's absence: zoom, the compass and
+fullscreen for a map, whose pan buttons a page asks for, and zoom and
+fullscreen for a board, which a reader drags and whose pad took a third
+of the frame. The
+stylesheet lays the cluster out by which buttons are in it rather than by
+this attribute, so the two defaults need no rule each. */
+  controls?: (HelixHeadlessGraph["controls"]) | undefined;
+  /** The name of the group of controls, read by screen readers.
+
+Absent is the family's own name for it, "Map controls" or "Board
+controls", which names what the controls drive rather than the
+mechanism. Written here to say it in another language, which every other
+string this surface speaks already allowed and this one did not. */
+  "controls-label"?: (HelixHeadlessGraph["controlsLabel"]) | undefined;
+  /** The name of the group of controls, read by screen readers.
+
+Absent is the family's own name for it, "Map controls" or "Board
+controls", which names what the controls drive rather than the
+mechanism. Written here to say it in another language, which every other
+string this surface speaks already allowed and this one did not. */
+  controlsLabel?: (HelixHeadlessGraph["controlsLabel"]) | undefined;
+  /** Which corner the controls sit in.
+
+**Configurable because there is no safe default**, which is a collision
+rather than a taste: whatever a consumer slots may put its own controls
+in any corner, and every library that draws some made this a setting for
+the same reason.
+
+Logical corners rather than left and right, so a right-to-left page moves
+them without a consumer writing a second rule. Absent is the top end, a
+resting value being an attribute's absence: a default that reflected
+would write an attribute onto every host that no server sent. */
+  "controls-placement"?: (HelixHeadlessGraph["controlsPlacement"]) | undefined;
+  /** Which corner the controls sit in.
+
+**Configurable because there is no safe default**, which is a collision
+rather than a taste: whatever a consumer slots may put its own controls
+in any corner, and every library that draws some made this a setting for
+the same reason.
+
+Logical corners rather than left and right, so a right-to-left page moves
+them without a consumer writing a second rule. Absent is the top end, a
+resting value being an attribute's absence: a default that reflected
+would write an attribute onto every host that no server sent. */
+  controlsPlacement?: (HelixHeadlessGraph["controlsPlacement"]) | undefined;
+  /** The fullscreen button's label. */
+  "fullscreen-label"?: (HelixHeadlessGraph["fullscreenLabel"]) | undefined;
+  /** The fullscreen button's label. */
+  fullscreenLabel?: (HelixHeadlessGraph["fullscreenLabel"]) | undefined;
+  /** How long, in milliseconds, before the header and footer hide when the user is inactive. `0` keeps them visible.
+
+Zero keeps it up, which is the default: these controls are how a keyboard
+reader operates the surface, and chrome that hid itself by default would
+be the component undoing its own argument. Set it for a display nobody
+drives. */
+  "idle-delay"?: (HelixHeadlessGraph["idleDelay"] | `${number}`) | undefined;
+  /** How long, in milliseconds, before the header and footer hide when the user is inactive. `0` keeps them visible.
+
+Zero keeps it up, which is the default: these controls are how a keyboard
+reader operates the surface, and chrome that hid itself by default would
+be the component undoing its own argument. Set it for a display nobody
+drives. */
+  idleDelay?: (HelixHeadlessGraph["idleDelay"]) | undefined;
+  /** The pan down button's label.
+
+**A label for each way rather than one with the way filled in**, which is
+what this was: `Pan {way}` filled in with `left`, so a page that said it
+in French read out "Déplacer left". The word for a direction is as much
+the translator's as the word for panning, and a language can put it
+anywhere in the phrase. */
+  "pan-down-label"?: (HelixHeadlessGraph["panDownLabel"]) | undefined;
+  /** The pan down button's label.
+
+**A label for each way rather than one with the way filled in**, which is
+what this was: `Pan {way}` filled in with `left`, so a page that said it
+in French read out "Déplacer left". The word for a direction is as much
+the translator's as the word for panning, and a language can put it
+anywhere in the phrase. */
+  panDownLabel?: (HelixHeadlessGraph["panDownLabel"]) | undefined;
+  /** The pan left button's label. */
+  "pan-left-label"?: (HelixHeadlessGraph["panLeftLabel"]) | undefined;
+  /** The pan left button's label. */
+  panLeftLabel?: (HelixHeadlessGraph["panLeftLabel"]) | undefined;
+  /** The pan right button's label. */
+  "pan-right-label"?: (HelixHeadlessGraph["panRightLabel"]) | undefined;
+  /** The pan right button's label. */
+  panRightLabel?: (HelixHeadlessGraph["panRightLabel"]) | undefined;
+  /** How far one press pans the view, as a fraction of its size.
+
+A fraction rather than a distance, because this surface does not know the
+scale of what is inside it: a quarter of the viewport is the same gesture
+at any zoom, and a consumer who wants their own units multiplies by them. */
+  "pan-step"?: (HelixHeadlessGraph["panStep"] | `${number}`) | undefined;
+  /** How far one press pans the view, as a fraction of its size.
+
+A fraction rather than a distance, because this surface does not know the
+scale of what is inside it: a quarter of the viewport is the same gesture
+at any zoom, and a consumer who wants their own units multiplies by them. */
+  panStep?: (HelixHeadlessGraph["panStep"]) | undefined;
+  /** The pan up button's label. */
+  "pan-up-label"?: (HelixHeadlessGraph["panUpLabel"]) | undefined;
+  /** The pan up button's label. */
+  panUpLabel?: (HelixHeadlessGraph["panUpLabel"]) | undefined;
+  /** The zoom in button's label. */
+  "zoom-in-label"?: (HelixHeadlessGraph["zoomInLabel"]) | undefined;
+  /** The zoom in button's label. */
+  zoomInLabel?: (HelixHeadlessGraph["zoomInLabel"]) | undefined;
+  /** The zoom out button's label. */
+  "zoom-out-label"?: (HelixHeadlessGraph["zoomOutLabel"]) | undefined;
+  /** The zoom out button's label. */
+  zoomOutLabel?: (HelixHeadlessGraph["zoomOutLabel"]) | undefined;
+  /** The `value` of the current item.
+
+Not `option.active`, which is the option the keyboard is on: that is a
+different question from which one is chosen.
+
+Writing always applies, so `<helix-tabs active="one">` starts on that
+tab, and `default-active` is how markup says where to start without
+naming the current one. */
+  active?: (HelixHeadlessGraph["active"]) | undefined;
+  /** The `value` of the item declared current in markup.
+
+Ignored once `active` is written. */
+  "default-active"?: (HelixHeadlessGraph["defaultActive"]) | undefined;
+  /** The `value` of the item declared current in markup.
+
+Ignored once `active` is written. */
+  defaultActive?: (HelixHeadlessGraph["defaultActive"]) | undefined;
+  /** The links between notes, each from `source` to `target`. A property, never an attribute. */
+  links?: (HelixHeadlessGraph["links"]) | undefined;
+  /** The notes. A property, never an attribute. */
+  nodes?: (HelixHeadlessGraph["nodes"]) | undefined;
+
+  /** A note was selected, in the list or in the drawing. The detail's `value` is its `id`. */
+  "onhelix-activate"?: ((e: HelixHeadlessGraphHelixActivateElementEvent) => void) | undefined;
+  /** A note is about to be selected. Cancelable: cancel it to keep the selection in your own state. */
+  "onhelix-before-activate"?: ((
+    e: HelixHeadlessGraphHelixBeforeActivateElementEvent,
+  ) => void) | undefined;
+  /** A pan button or arrow key was pressed. Move the drawing. */
+  "onhelix-graph-pan"?: ((
+    e: HelixHeadlessGraphHelixGraphPanElementEvent,
+  ) => void) | undefined;
+  /** The graph has been drawn whole, laid out and settled. Sent each time `drawn()` says it is drawn after it was not. */
+  "onhelix-graph-ready"?: ((
+    e: HelixHeadlessGraphHelixGraphReadyElementEvent,
+  ) => void) | undefined;
+  /** A zoom button or key was pressed. Zoom the drawing. */
+  "onhelix-graph-zoom"?: ((
+    e: HelixHeadlessGraphHelixGraphZoomElementEvent,
+  ) => void) | undefined;
+};
+
+export type HelixHeadlessGraphSolidJsProps = {
+  /** What the list says of a note's count, with `{count}`. */
+  "attr:count-label"?: (HelixHeadlessGraph["countLabel"]) | undefined;
+  /** What the list says of a note's count, with `{count}`. */
+  "prop:countLabel"?: (HelixHeadlessGraph["countLabel"]) | undefined;
+  /** How many links from the selected note to show, for its local graph. Unset
+shows every note. The list holds what the drawing shows. */
+  "prop:depth"?: (HelixHeadlessGraph["depth"]) | undefined;
+  /** The graph's name, read by screen readers, such as "Research notes".
+Required. */
+  "prop:label"?: (HelixHeadlessGraph["label"]) | undefined;
+  /** How a note linked both to and from the selected one is described, with `{note}`. */
+  "attr:linked-both-label"?: (HelixHeadlessGraph["linkedBothLabel"]) | undefined;
+  /** How a note linked both to and from the selected one is described, with `{note}`. */
+  "prop:linkedBothLabel"?: (HelixHeadlessGraph["linkedBothLabel"]) | undefined;
+  /** How a note the selected one links to is described, with `{note}`, the selected note's name. */
+  "attr:linked-from-label"?: (HelixHeadlessGraph["linkedFromLabel"]) | undefined;
+  /** How a note the selected one links to is described, with `{note}`, the selected note's name. */
+  "prop:linkedFromLabel"?: (HelixHeadlessGraph["linkedFromLabel"]) | undefined;
+  /** How a note that links to the selected one is described, with `{note}`. */
+  "attr:links-to-label"?: (HelixHeadlessGraph["linksToLabel"]) | undefined;
+  /** How a note that links to the selected one is described, with `{note}`. */
+  "prop:linksToLabel"?: (HelixHeadlessGraph["linksToLabel"]) | undefined;
+  /** The list's name, read by screen readers. */
+  "attr:notes-label"?: (HelixHeadlessGraph["notesLabel"]) | undefined;
+  /** The list's name, read by screen readers. */
+  "prop:notesLabel"?: (HelixHeadlessGraph["notesLabel"]) | undefined;
+  /** The search field's name. */
+  "attr:search-label"?: (HelixHeadlessGraph["searchLabel"]) | undefined;
+  /** The search field's name. */
+  "prop:searchLabel"?: (HelixHeadlessGraph["searchLabel"]) | undefined;
+  /** How the selected note is described in the list. */
+  "attr:selected-label"?: (HelixHeadlessGraph["selectedLabel"]) | undefined;
+  /** How the selected note is described in the list. */
+  "prop:selectedLabel"?: (HelixHeadlessGraph["selectedLabel"]) | undefined;
+  /** Which controls to show, as a list such as `pan zoom fullscreen`, or
+`none`. A family can add words of its own.
+
+**A list rather than a switch, because the overlap is not symmetric.** A
+surface a consumer brings often has zoom controls of its own and almost
+never has pan buttons, so a single switch would make them choose between
+a duplicate and nothing.
+
+`none` draws none of them, which is the right answer where what was
+slotted already has controls a reader can find: what this argues for is
+that *a* findable control exists, never that it is ours. The methods stay
+public either way, so a consumer drawing their own chrome can still drive
+the surface.
+
+Absent is whatever the family rests at, which is this library's rule that
+a resting value is an attribute's absence: zoom, the compass and
+fullscreen for a map, whose pan buttons a page asks for, and zoom and
+fullscreen for a board, which a reader drags and whose pad took a third
+of the frame. The
+stylesheet lays the cluster out by which buttons are in it rather than by
+this attribute, so the two defaults need no rule each. */
+  "prop:controls"?: (HelixHeadlessGraph["controls"]) | undefined;
+  /** The name of the group of controls, read by screen readers.
+
+Absent is the family's own name for it, "Map controls" or "Board
+controls", which names what the controls drive rather than the
+mechanism. Written here to say it in another language, which every other
+string this surface speaks already allowed and this one did not. */
+  "attr:controls-label"?: (HelixHeadlessGraph["controlsLabel"]) | undefined;
+  /** The name of the group of controls, read by screen readers.
+
+Absent is the family's own name for it, "Map controls" or "Board
+controls", which names what the controls drive rather than the
+mechanism. Written here to say it in another language, which every other
+string this surface speaks already allowed and this one did not. */
+  "prop:controlsLabel"?: (HelixHeadlessGraph["controlsLabel"]) | undefined;
+  /** Which corner the controls sit in.
+
+**Configurable because there is no safe default**, which is a collision
+rather than a taste: whatever a consumer slots may put its own controls
+in any corner, and every library that draws some made this a setting for
+the same reason.
+
+Logical corners rather than left and right, so a right-to-left page moves
+them without a consumer writing a second rule. Absent is the top end, a
+resting value being an attribute's absence: a default that reflected
+would write an attribute onto every host that no server sent. */
+  "attr:controls-placement"?: (HelixHeadlessGraph["controlsPlacement"]) | undefined;
+  /** Which corner the controls sit in.
+
+**Configurable because there is no safe default**, which is a collision
+rather than a taste: whatever a consumer slots may put its own controls
+in any corner, and every library that draws some made this a setting for
+the same reason.
+
+Logical corners rather than left and right, so a right-to-left page moves
+them without a consumer writing a second rule. Absent is the top end, a
+resting value being an attribute's absence: a default that reflected
+would write an attribute onto every host that no server sent. */
+  "prop:controlsPlacement"?: (HelixHeadlessGraph["controlsPlacement"]) | undefined;
+  /** The fullscreen button's label. */
+  "attr:fullscreen-label"?: (HelixHeadlessGraph["fullscreenLabel"]) | undefined;
+  /** The fullscreen button's label. */
+  "prop:fullscreenLabel"?: (HelixHeadlessGraph["fullscreenLabel"]) | undefined;
+  /** How long, in milliseconds, before the header and footer hide when the user is inactive. `0` keeps them visible.
+
+Zero keeps it up, which is the default: these controls are how a keyboard
+reader operates the surface, and chrome that hid itself by default would
+be the component undoing its own argument. Set it for a display nobody
+drives. */
+  "attr:idle-delay"?: (HelixHeadlessGraph["idleDelay"] | `${number}`) | undefined;
+  /** How long, in milliseconds, before the header and footer hide when the user is inactive. `0` keeps them visible.
+
+Zero keeps it up, which is the default: these controls are how a keyboard
+reader operates the surface, and chrome that hid itself by default would
+be the component undoing its own argument. Set it for a display nobody
+drives. */
+  "prop:idleDelay"?: (HelixHeadlessGraph["idleDelay"]) | undefined;
+  /** The pan down button's label.
+
+**A label for each way rather than one with the way filled in**, which is
+what this was: `Pan {way}` filled in with `left`, so a page that said it
+in French read out "Déplacer left". The word for a direction is as much
+the translator's as the word for panning, and a language can put it
+anywhere in the phrase. */
+  "attr:pan-down-label"?: (HelixHeadlessGraph["panDownLabel"]) | undefined;
+  /** The pan down button's label.
+
+**A label for each way rather than one with the way filled in**, which is
+what this was: `Pan {way}` filled in with `left`, so a page that said it
+in French read out "Déplacer left". The word for a direction is as much
+the translator's as the word for panning, and a language can put it
+anywhere in the phrase. */
+  "prop:panDownLabel"?: (HelixHeadlessGraph["panDownLabel"]) | undefined;
+  /** The pan left button's label. */
+  "attr:pan-left-label"?: (HelixHeadlessGraph["panLeftLabel"]) | undefined;
+  /** The pan left button's label. */
+  "prop:panLeftLabel"?: (HelixHeadlessGraph["panLeftLabel"]) | undefined;
+  /** The pan right button's label. */
+  "attr:pan-right-label"?: (HelixHeadlessGraph["panRightLabel"]) | undefined;
+  /** The pan right button's label. */
+  "prop:panRightLabel"?: (HelixHeadlessGraph["panRightLabel"]) | undefined;
+  /** How far one press pans the view, as a fraction of its size.
+
+A fraction rather than a distance, because this surface does not know the
+scale of what is inside it: a quarter of the viewport is the same gesture
+at any zoom, and a consumer who wants their own units multiplies by them. */
+  "attr:pan-step"?: (HelixHeadlessGraph["panStep"] | `${number}`) | undefined;
+  /** How far one press pans the view, as a fraction of its size.
+
+A fraction rather than a distance, because this surface does not know the
+scale of what is inside it: a quarter of the viewport is the same gesture
+at any zoom, and a consumer who wants their own units multiplies by them. */
+  "prop:panStep"?: (HelixHeadlessGraph["panStep"]) | undefined;
+  /** The pan up button's label. */
+  "attr:pan-up-label"?: (HelixHeadlessGraph["panUpLabel"]) | undefined;
+  /** The pan up button's label. */
+  "prop:panUpLabel"?: (HelixHeadlessGraph["panUpLabel"]) | undefined;
+  /** The zoom in button's label. */
+  "attr:zoom-in-label"?: (HelixHeadlessGraph["zoomInLabel"]) | undefined;
+  /** The zoom in button's label. */
+  "prop:zoomInLabel"?: (HelixHeadlessGraph["zoomInLabel"]) | undefined;
+  /** The zoom out button's label. */
+  "attr:zoom-out-label"?: (HelixHeadlessGraph["zoomOutLabel"]) | undefined;
+  /** The zoom out button's label. */
+  "prop:zoomOutLabel"?: (HelixHeadlessGraph["zoomOutLabel"]) | undefined;
+  /** The `value` of the current item.
+
+Not `option.active`, which is the option the keyboard is on: that is a
+different question from which one is chosen.
+
+Writing always applies, so `<helix-tabs active="one">` starts on that
+tab, and `default-active` is how markup says where to start without
+naming the current one. */
+  "prop:active"?: (HelixHeadlessGraph["active"]) | undefined;
+  /** The `value` of the item declared current in markup.
+
+Ignored once `active` is written. */
+  "attr:default-active"?: (HelixHeadlessGraph["defaultActive"]) | undefined;
+  /** The `value` of the item declared current in markup.
+
+Ignored once `active` is written. */
+  "prop:defaultActive"?: (HelixHeadlessGraph["defaultActive"]) | undefined;
+  /** The links between notes, each from `source` to `target`. A property, never an attribute. */
+  "prop:links"?: (HelixHeadlessGraph["links"]) | undefined;
+  /** The notes. A property, never an attribute. */
+  "prop:nodes"?: (HelixHeadlessGraph["nodes"]) | undefined;
+  /** A note was selected, in the list or in the drawing. The detail's `value` is its `id`. */
+  "on:helix-activate"?: ((
+    e: HelixHeadlessGraphHelixActivateElementEvent,
+  ) => void) | undefined;
+  /** A note is about to be selected. Cancelable: cancel it to keep the selection in your own state. */
+  "on:helix-before-activate"?: ((
+    e: HelixHeadlessGraphHelixBeforeActivateElementEvent,
+  ) => void) | undefined;
+  /** A pan button or arrow key was pressed. Move the drawing. */
+  "on:helix-graph-pan"?: ((
+    e: HelixHeadlessGraphHelixGraphPanElementEvent,
+  ) => void) | undefined;
+  /** The graph has been drawn whole, laid out and settled. Sent each time `drawn()` says it is drawn after it was not. */
+  "on:helix-graph-ready"?: ((
+    e: HelixHeadlessGraphHelixGraphReadyElementEvent,
+  ) => void) | undefined;
+  /** A zoom button or key was pressed. Zoom the drawing. */
+  "on:helix-graph-zoom"?: ((
+    e: HelixHeadlessGraphHelixGraphZoomElementEvent,
+  ) => void) | undefined;
+
+  /** Set the innerHTML of the element */
+  innerHTML?: (string) | undefined;
+  /** Set the textContent of the element */
+  textContent?: (string | number) | undefined;
+};
+
 /** `HelixHeadlessHeatmap` component event */
 export type HelixHeadlessHeatmapElementEvent<E = Event> = TypedEvent<
   HelixHeadlessHeatmap,
@@ -30518,6 +30955,229 @@ export type CustomElements = {
       BaseEvents<HelixHeadlessFormatDate>
   >;
 
+  /**
+   * Helix draws no graph. A force layout of thousands of notes is physics and
+   * WebGL, which a renderer such as Sigma.js does. Put the renderer's box in the
+   * frame, draw `nodes` and `links` in it, and answer the frame's pan and zoom
+   * events by moving the drawing.
+   *
+   * What the frame adds is what a drawing of a graph cannot do: a list of every
+   * note beside it, which is the graph for a screen reader and a quick way to
+   * find a note for anyone. The selected note comes first, then the notes it
+   * links to and from, then every other note, and the search field narrows it.
+   * Selecting a note in the list or in the drawing is the same selection.
+   *
+   * Set `depth` to show the local graph: only the notes within that many links
+   * of the selected one.
+   *
+   * `nodes` and `links` are properties, never markup: a graph of ten thousand
+   * notes as ten thousand elements would cost what the renderer exists to save.
+   * The list draws only the rows in view.
+   *
+   * The list scrolls on this tier. It carries `data-scroller`, and `core` ships
+   * `[data-scroller] { overflow: auto }` into every shadow root. You still need
+   * to set a block size on the list, or it grows to hold every row.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `count-label`/`countLabel`: What the list says of a note's count, with `{count}`.
+   * - `depth`: How many links from the selected note to show, for its local graph. Unset
+   * shows every note. The list holds what the drawing shows.
+   * - `label`: The graph's name, read by screen readers, such as "Research notes".
+   * Required.
+   * - `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.
+   * - `search-label`/`searchLabel`: The search field's name.
+   * - `selected-label`/`selectedLabel`: How the selected note is described in the list.
+   * - `controls`: Which controls to show, as a list such as `pan zoom fullscreen`, or
+   * `none`. A family can add words of its own.
+   *
+   * **A list rather than a switch, because the overlap is not symmetric.** A
+   * surface a consumer brings often has zoom controls of its own and almost
+   * never has pan buttons, so a single switch would make them choose between
+   * a duplicate and nothing.
+   *
+   * `none` draws none of them, which is the right answer where what was
+   * slotted already has controls a reader can find: what this argues for is
+   * that *a* findable control exists, never that it is ours. The methods stay
+   * public either way, so a consumer drawing their own chrome can still drive
+   * the surface.
+   *
+   * Absent is whatever the family rests at, which is this library's rule that
+   * a resting value is an attribute's absence: zoom, the compass and
+   * fullscreen for a map, whose pan buttons a page asks for, and zoom and
+   * fullscreen for a board, which a reader drags and whose pad took a third
+   * of the frame. The
+   * stylesheet lays the cluster out by which buttons are in it rather than by
+   * this attribute, so the two defaults need no rule each.
+   * - `controls-label`/`controlsLabel`: The name of the group of controls, read by screen readers.
+   *
+   * Absent is the family's own name for it, "Map controls" or "Board
+   * controls", which names what the controls drive rather than the
+   * mechanism. Written here to say it in another language, which every other
+   * string this surface speaks already allowed and this one did not.
+   * - `controls-placement`/`controlsPlacement`: Which corner the controls sit in.
+   *
+   * **Configurable because there is no safe default**, which is a collision
+   * rather than a taste: whatever a consumer slots may put its own controls
+   * in any corner, and every library that draws some made this a setting for
+   * the same reason.
+   *
+   * Logical corners rather than left and right, so a right-to-left page moves
+   * them without a consumer writing a second rule. Absent is the top end, a
+   * resting value being an attribute's absence: a default that reflected
+   * would write an attribute onto every host that no server sent.
+   * - `fullscreen-label`/`fullscreenLabel`: The fullscreen button's label.
+   * - `idle-delay`/`idleDelay`: How long, in milliseconds, before the header and footer hide when the user is inactive. `0` keeps them visible.
+   *
+   * Zero keeps it up, which is the default: these controls are how a keyboard
+   * reader operates the surface, and chrome that hid itself by default would
+   * be the component undoing its own argument. Set it for a display nobody
+   * drives.
+   * - `pan-down-label`/`panDownLabel`: The pan down button's label.
+   *
+   * **A label for each way rather than one with the way filled in**, which is
+   * what this was: `Pan {way}` filled in with `left`, so a page that said it
+   * in French read out "Déplacer left". The word for a direction is as much
+   * the translator's as the word for panning, and a language can put it
+   * anywhere in the phrase.
+   * - `pan-left-label`/`panLeftLabel`: The pan left button's label.
+   * - `pan-right-label`/`panRightLabel`: The pan right button's label.
+   * - `pan-step`/`panStep`: How far one press pans the view, as a fraction of its size.
+   *
+   * A fraction rather than a distance, because this surface does not know the
+   * scale of what is inside it: a quarter of the viewport is the same gesture
+   * at any zoom, and a consumer who wants their own units multiplies by them.
+   * - `pan-up-label`/`panUpLabel`: The pan up button's label.
+   * - `zoom-in-label`/`zoomInLabel`: The zoom in button's label.
+   * - `zoom-out-label`/`zoomOutLabel`: The zoom out button's label.
+   * - `active`: The `value` of the current item.
+   *
+   * Not `option.active`, which is the option the keyboard is on: that is a
+   * different question from which one is chosen.
+   *
+   * Writing always applies, so `<helix-tabs active="one">` starts on that
+   * tab, and `default-active` is how markup says where to start without
+   * naming the current one.
+   * - `default-active`/`defaultActive`: The `value` of the item declared current in markup.
+   *
+   * Ignored once `active` is written.
+   * - `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)
+   * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
+   *
+   * **Named `whenSettled` because `settled` is taken four times over**, by
+   * Image, Splitter and both color controls, none of them about transitions. A
+   * base class takes the name every subclass then cannot use.
+   *
+   * **The state it reports cannot be watched, which is why this exists.** A
+   * custom state is deliberately not in the DOM, so there is no
+   * `MutationObserver` equivalent for `ElementInternals.states`. Await this
+   * instead.
+   *
+   * Separate from `updateComplete`, which resolves in the microtask checkpoint
+   * the suppression is still active in. That is the distinction `readyToMove`
+   * in `@fusion.dev/helix-testing` is written around.
+   *
+   * It never resolves where `requestAnimationFrame` never fires, which is a
+   * server, a hidden tab, and happy-dom. Callers that must not hang there race
+   * it against a timeout, as the happy-dom harness's `readyToMove` does. The
+   * browser harness's awaits it alone: a browser always runs the frame, and a
+   * timer beside it was a bet on how long one takes, which a busy run lost. (property only) (readonly)
+   *
+   * ## Events
+   *
+   * Events that will be emitted by the component.
+   *
+   * - `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-pan`: A pan button or arrow key was pressed. Move the drawing.
+   * - `helix-graph-ready`: The graph has been drawn whole, laid out and settled. Sent each time `drawn()` says it is drawn after it was not.
+   * - `helix-graph-zoom`: A zoom button or key was pressed. Zoom the drawing.
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `(default)`: The renderer's box, which the drawing is made in.
+   * - `filter-icon`: The icon in the search field. Defaults to a magnifying glass.
+   * - `footer`: Content below the graph.
+   * - `header`: Content above the graph.
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `drawn(whole = true) => void`: Says the graph has been drawn whole, or with `false`, that it no longer
+   * is. Call it when the renderer's layout has settled and the graph is
+   * finished. The first call after
+   * the graph was not drawn sends `helix-graph-ready` and turns on
+   * `:state(ready)`.
+   * - `pan(to: ViewportWay) => void`: Pans the view one step in a direction.
+   * - `zoom(by: number) => void`: Zooms the view one step: `1` zooms in and `-1` zooms out.
+   * - `toggleFullscreen() => void`: Turns fullscreen on or off.
+   * - `requestActive(next: string) => boolean`: Requests a new current item, and returns whether the change was applied.
+   *
+   * Announces before it acts, so `preventDefault()` on the `helix-before-activate` is
+   * a refusal and nothing moves. Unlike a native control, nothing has moved
+   * by the time this runs, so refusing is simply not writing: there is
+   * nothing to put back. Nobody refusing means the set updates itself,
+   * whether or not a consumer declared `active`, a declared property being a
+   * seed and a correction.
+   *
+   * ## CSS Parts
+   *
+   * Custom selectors for styling elements within the component.
+   *
+   * - `after`: The room the notes after those drawn would take, so the list scrolls its whole length.
+   * - `before`: The room the notes before those drawn would take.
+   * - `body`: The drawing beside the list, or above it where the frame is narrow.
+   * - `controls`: The group the pan and zoom buttons sit in.
+   * - `count`: How many notes the list holds, which a search narrows, at the end of the search bar.
+   * - `filter-icon`: The icon beside the search field.
+   * - `filter-mark`: The default icon beside the search field, shown when none is slotted.
+   * - `footer`: The strip below the graph.
+   * - `fullscreen`: The button that makes the graph fill the screen.
+   * - `header`: The strip above the graph.
+   * - `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.
+   * - `note-cursor`: The note the keyboard is on in the list.
+   * - `note-linked`: A note linked to or from the selected one.
+   * - `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.
+   * - `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.
+   * - `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.
+   * - `stage`: The drawing and its controls.
+   * - `viewport`: The box the renderer draws in.
+   * - `zoom-in`: The zoom in button.
+   * - `zoom-out`: The zoom out button.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `fullscreen`: The graph fills the screen.
+   * - `idle`: The user has been still long enough for the header and footer to fade.
+   * - `ready`: The graph has been drawn whole, after `helix-graph-ready`.
+   * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
+   */
+  "helix-headless-graph": Partial<
+    HelixHeadlessGraphProps & BaseProps<HelixHeadlessGraph> & BaseEvents<HelixHeadlessGraph>
+  >;
+
   /**
    * A grid of cells, each colored by a tone. `rows="1"` makes a status strip, and
    * `rows="7"` makes a contribution graph. GitHub's contribution graph uses five
@@ -50583,6 +51243,232 @@ export type CustomElementsSolidJs = {
       BaseEvents<HelixHeadlessFormatDate>
   >;
 
+  /**
+   * Helix draws no graph. A force layout of thousands of notes is physics and
+   * WebGL, which a renderer such as Sigma.js does. Put the renderer's box in the
+   * frame, draw `nodes` and `links` in it, and answer the frame's pan and zoom
+   * events by moving the drawing.
+   *
+   * What the frame adds is what a drawing of a graph cannot do: a list of every
+   * note beside it, which is the graph for a screen reader and a quick way to
+   * find a note for anyone. The selected note comes first, then the notes it
+   * links to and from, then every other note, and the search field narrows it.
+   * Selecting a note in the list or in the drawing is the same selection.
+   *
+   * Set `depth` to show the local graph: only the notes within that many links
+   * of the selected one.
+   *
+   * `nodes` and `links` are properties, never markup: a graph of ten thousand
+   * notes as ten thousand elements would cost what the renderer exists to save.
+   * The list draws only the rows in view.
+   *
+   * The list scrolls on this tier. It carries `data-scroller`, and `core` ships
+   * `[data-scroller] { overflow: auto }` into every shadow root. You still need
+   * to set a block size on the list, or it grows to hold every row.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `count-label`/`countLabel`: What the list says of a note's count, with `{count}`.
+   * - `depth`: How many links from the selected note to show, for its local graph. Unset
+   * shows every note. The list holds what the drawing shows.
+   * - `label`: The graph's name, read by screen readers, such as "Research notes".
+   * Required.
+   * - `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.
+   * - `search-label`/`searchLabel`: The search field's name.
+   * - `selected-label`/`selectedLabel`: How the selected note is described in the list.
+   * - `controls`: Which controls to show, as a list such as `pan zoom fullscreen`, or
+   * `none`. A family can add words of its own.
+   *
+   * **A list rather than a switch, because the overlap is not symmetric.** A
+   * surface a consumer brings often has zoom controls of its own and almost
+   * never has pan buttons, so a single switch would make them choose between
+   * a duplicate and nothing.
+   *
+   * `none` draws none of them, which is the right answer where what was
+   * slotted already has controls a reader can find: what this argues for is
+   * that *a* findable control exists, never that it is ours. The methods stay
+   * public either way, so a consumer drawing their own chrome can still drive
+   * the surface.
+   *
+   * Absent is whatever the family rests at, which is this library's rule that
+   * a resting value is an attribute's absence: zoom, the compass and
+   * fullscreen for a map, whose pan buttons a page asks for, and zoom and
+   * fullscreen for a board, which a reader drags and whose pad took a third
+   * of the frame. The
+   * stylesheet lays the cluster out by which buttons are in it rather than by
+   * this attribute, so the two defaults need no rule each.
+   * - `controls-label`/`controlsLabel`: The name of the group of controls, read by screen readers.
+   *
+   * Absent is the family's own name for it, "Map controls" or "Board
+   * controls", which names what the controls drive rather than the
+   * mechanism. Written here to say it in another language, which every other
+   * string this surface speaks already allowed and this one did not.
+   * - `controls-placement`/`controlsPlacement`: Which corner the controls sit in.
+   *
+   * **Configurable because there is no safe default**, which is a collision
+   * rather than a taste: whatever a consumer slots may put its own controls
+   * in any corner, and every library that draws some made this a setting for
+   * the same reason.
+   *
+   * Logical corners rather than left and right, so a right-to-left page moves
+   * them without a consumer writing a second rule. Absent is the top end, a
+   * resting value being an attribute's absence: a default that reflected
+   * would write an attribute onto every host that no server sent.
+   * - `fullscreen-label`/`fullscreenLabel`: The fullscreen button's label.
+   * - `idle-delay`/`idleDelay`: How long, in milliseconds, before the header and footer hide when the user is inactive. `0` keeps them visible.
+   *
+   * Zero keeps it up, which is the default: these controls are how a keyboard
+   * reader operates the surface, and chrome that hid itself by default would
+   * be the component undoing its own argument. Set it for a display nobody
+   * drives.
+   * - `pan-down-label`/`panDownLabel`: The pan down button's label.
+   *
+   * **A label for each way rather than one with the way filled in**, which is
+   * what this was: `Pan {way}` filled in with `left`, so a page that said it
+   * in French read out "Déplacer left". The word for a direction is as much
+   * the translator's as the word for panning, and a language can put it
+   * anywhere in the phrase.
+   * - `pan-left-label`/`panLeftLabel`: The pan left button's label.
+   * - `pan-right-label`/`panRightLabel`: The pan right button's label.
+   * - `pan-step`/`panStep`: How far one press pans the view, as a fraction of its size.
+   *
+   * A fraction rather than a distance, because this surface does not know the
+   * scale of what is inside it: a quarter of the viewport is the same gesture
+   * at any zoom, and a consumer who wants their own units multiplies by them.
+   * - `pan-up-label`/`panUpLabel`: The pan up button's label.
+   * - `zoom-in-label`/`zoomInLabel`: The zoom in button's label.
+   * - `zoom-out-label`/`zoomOutLabel`: The zoom out button's label.
+   * - `active`: The `value` of the current item.
+   *
+   * Not `option.active`, which is the option the keyboard is on: that is a
+   * different question from which one is chosen.
+   *
+   * Writing always applies, so `<helix-tabs active="one">` starts on that
+   * tab, and `default-active` is how markup says where to start without
+   * naming the current one.
+   * - `default-active`/`defaultActive`: The `value` of the item declared current in markup.
+   *
+   * Ignored once `active` is written.
+   * - `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)
+   * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
+   *
+   * **Named `whenSettled` because `settled` is taken four times over**, by
+   * Image, Splitter and both color controls, none of them about transitions. A
+   * base class takes the name every subclass then cannot use.
+   *
+   * **The state it reports cannot be watched, which is why this exists.** A
+   * custom state is deliberately not in the DOM, so there is no
+   * `MutationObserver` equivalent for `ElementInternals.states`. Await this
+   * instead.
+   *
+   * Separate from `updateComplete`, which resolves in the microtask checkpoint
+   * the suppression is still active in. That is the distinction `readyToMove`
+   * in `@fusion.dev/helix-testing` is written around.
+   *
+   * It never resolves where `requestAnimationFrame` never fires, which is a
+   * server, a hidden tab, and happy-dom. Callers that must not hang there race
+   * it against a timeout, as the happy-dom harness's `readyToMove` does. The
+   * browser harness's awaits it alone: a browser always runs the frame, and a
+   * timer beside it was a bet on how long one takes, which a busy run lost. (property only) (readonly)
+   *
+   * ## Events
+   *
+   * Events that will be emitted by the component.
+   *
+   * - `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-pan`: A pan button or arrow key was pressed. Move the drawing.
+   * - `helix-graph-ready`: The graph has been drawn whole, laid out and settled. Sent each time `drawn()` says it is drawn after it was not.
+   * - `helix-graph-zoom`: A zoom button or key was pressed. Zoom the drawing.
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `(default)`: The renderer's box, which the drawing is made in.
+   * - `filter-icon`: The icon in the search field. Defaults to a magnifying glass.
+   * - `footer`: Content below the graph.
+   * - `header`: Content above the graph.
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `drawn(whole = true) => void`: Says the graph has been drawn whole, or with `false`, that it no longer
+   * is. Call it when the renderer's layout has settled and the graph is
+   * finished. The first call after
+   * the graph was not drawn sends `helix-graph-ready` and turns on
+   * `:state(ready)`.
+   * - `pan(to: ViewportWay) => void`: Pans the view one step in a direction.
+   * - `zoom(by: number) => void`: Zooms the view one step: `1` zooms in and `-1` zooms out.
+   * - `toggleFullscreen() => void`: Turns fullscreen on or off.
+   * - `requestActive(next: string) => boolean`: Requests a new current item, and returns whether the change was applied.
+   *
+   * Announces before it acts, so `preventDefault()` on the `helix-before-activate` is
+   * a refusal and nothing moves. Unlike a native control, nothing has moved
+   * by the time this runs, so refusing is simply not writing: there is
+   * nothing to put back. Nobody refusing means the set updates itself,
+   * whether or not a consumer declared `active`, a declared property being a
+   * seed and a correction.
+   *
+   * ## CSS Parts
+   *
+   * Custom selectors for styling elements within the component.
+   *
+   * - `after`: The room the notes after those drawn would take, so the list scrolls its whole length.
+   * - `before`: The room the notes before those drawn would take.
+   * - `body`: The drawing beside the list, or above it where the frame is narrow.
+   * - `controls`: The group the pan and zoom buttons sit in.
+   * - `count`: How many notes the list holds, which a search narrows, at the end of the search bar.
+   * - `filter-icon`: The icon beside the search field.
+   * - `filter-mark`: The default icon beside the search field, shown when none is slotted.
+   * - `footer`: The strip below the graph.
+   * - `fullscreen`: The button that makes the graph fill the screen.
+   * - `header`: The strip above the graph.
+   * - `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.
+   * - `note-cursor`: The note the keyboard is on in the list.
+   * - `note-linked`: A note linked to or from the selected one.
+   * - `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.
+   * - `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.
+   * - `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.
+   * - `stage`: The drawing and its controls.
+   * - `viewport`: The box the renderer draws in.
+   * - `zoom-in`: The zoom in button.
+   * - `zoom-out`: The zoom out button.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `fullscreen`: The graph fills the screen.
+   * - `idle`: The user has been still long enough for the header and footer to fade.
+   * - `ready`: The graph has been drawn whole, after `helix-graph-ready`.
+   * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
+   */
+  "helix-headless-graph": Partial<
+    HelixHeadlessGraphProps &
+      HelixHeadlessGraphSolidJsProps &
+      BaseProps<HelixHeadlessGraph> &
+      BaseEvents<HelixHeadlessGraph>
+  >;
+
   /**
    * A grid of cells, each colored by a tone. `rows="1"` makes a status strip, and
    * `rows="7"` makes a contribution graph. GitHub's contribution graph uses five