@fusion.dev/helix 0.116.0 → 0.117.0

package/types/svelte.d.ts

@@ -62,6 +62,7 @@ declare module 'svelte/elements' {
     'helix-filter-input': CustomElements['helix-filter-input']
     'helix-flex': CustomElements['helix-flex']
     'helix-format-date': CustomElements['helix-format-date']
+    'helix-graph': CustomElements['helix-graph']
     'helix-grid': CustomElements['helix-grid']
     'helix-heatmap': CustomElements['helix-heatmap']
     'helix-icon-button': CustomElements['helix-icon-button']

package/types/vue.d.ts

@@ -52,6 +52,7 @@ import type {
   HelixFilterInput,
   HelixFlex,
   HelixFormatDate,
+  HelixGraph,
   HelixGrid,
   HelixHeatmap,
   HelixIconButton,
@@ -185,10 +186,13 @@ import type {
   HelixReorderEvent,
   HelixSortEvent,
   HelixFacetEvent,
-  HelixResizeEvent,
-  HelixShortcutEvent,
   HelixActivateEvent,
   HelixBeforeActivateEvent,
+  HelixGraphPanEvent,
+  HelixGraphReadyEvent,
+  HelixGraphZoomEvent,
+  HelixResizeEvent,
+  HelixShortcutEvent,
   HelixMapPartChangeEvent,
   HelixMapClusterEvent,
   HelixMapPanEvent,
@@ -5642,6 +5646,221 @@ Empty is the runtime's own. */
 
 export type HelixFormatDateVueEvents = {};
 
+/** `HelixGraph` component event */
+export type HelixGraphElementEvent<E = Event> = TypedEvent<HelixGraph, E>;
+/** `helix-activate` event type */
+export type HelixGraphHelixActivateElementEvent =
+  HelixGraphElementEvent<HelixActivateEvent>;
+/** `helix-before-activate` event type */
+export type HelixGraphHelixBeforeActivateElementEvent =
+  HelixGraphElementEvent<HelixBeforeActivateEvent>;
+/** `helix-graph-pan` event type */
+export type HelixGraphHelixGraphPanElementEvent =
+  HelixGraphElementEvent<HelixGraphPanEvent>;
+/** `helix-graph-ready` event type */
+export type HelixGraphHelixGraphReadyElementEvent =
+  HelixGraphElementEvent<HelixGraphReadyEvent>;
+/** `helix-graph-zoom` event type */
+export type HelixGraphHelixGraphZoomElementEvent =
+  HelixGraphElementEvent<HelixGraphZoomEvent>;
+
+export type HelixGraphVueProps = {
+  /** 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?: (HelixGraph["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"?: (HelixGraph["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?: (HelixGraph["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"?: (HelixGraph["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?: (HelixGraph["controlsPlacement"]) | undefined;
+  /** The fullscreen button's label. */
+  "fullscreen-label"?: (HelixGraph["fullscreenLabel"]) | undefined;
+  /** The fullscreen button's label. */
+  fullscreenLabel?: (HelixGraph["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"?: (HelixGraph["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?: (HelixGraph["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"?: (HelixGraph["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?: (HelixGraph["panDownLabel"]) | undefined;
+  /** The pan left button's label. */
+  "pan-left-label"?: (HelixGraph["panLeftLabel"]) | undefined;
+  /** The pan left button's label. */
+  panLeftLabel?: (HelixGraph["panLeftLabel"]) | undefined;
+  /** The pan right button's label. */
+  "pan-right-label"?: (HelixGraph["panRightLabel"]) | undefined;
+  /** The pan right button's label. */
+  panRightLabel?: (HelixGraph["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"?: (HelixGraph["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?: (HelixGraph["panStep"]) | undefined;
+  /** The pan up button's label. */
+  "pan-up-label"?: (HelixGraph["panUpLabel"]) | undefined;
+  /** The pan up button's label. */
+  panUpLabel?: (HelixGraph["panUpLabel"]) | undefined;
+  /** The zoom in button's label. */
+  "zoom-in-label"?: (HelixGraph["zoomInLabel"]) | undefined;
+  /** The zoom in button's label. */
+  zoomInLabel?: (HelixGraph["zoomInLabel"]) | undefined;
+  /** The zoom out button's label. */
+  "zoom-out-label"?: (HelixGraph["zoomOutLabel"]) | undefined;
+  /** The zoom out button's label. */
+  zoomOutLabel?: (HelixGraph["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?: (HelixGraph["active"]) | undefined;
+  /** The `value` of the item declared current in markup.
+
+Ignored once `active` is written. */
+  "default-active"?: (HelixGraph["defaultActive"]) | undefined;
+  /** The `value` of the item declared current in markup.
+
+Ignored once `active` is written. */
+  defaultActive?: (HelixGraph["defaultActive"]) | undefined;
+  /** What the list says of a note's count, with `{count}`. */
+  "count-label"?: (HelixGraph["countLabel"]) | undefined;
+  /** What the list says of a note's count, with `{count}`. */
+  countLabel?: (HelixGraph["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?: (HelixGraph["depth"]) | undefined;
+  /** The graph's name, read by screen readers, such as "Research notes".
+Required. */
+  label?: (HelixGraph["label"]) | 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}`. */
+  linkedBothLabel?: (HelixGraph["linkedBothLabel"]) | undefined;
+  /** How a note the selected one links to is described, with `{note}`, the selected note's name. */
+  "linked-from-label"?: (HelixGraph["linkedFromLabel"]) | undefined;
+  /** How a note the selected one links to is described, with `{note}`, the selected note's name. */
+  linkedFromLabel?: (HelixGraph["linkedFromLabel"]) | undefined;
+  /** How a note that links to the selected one is described, with `{note}`. */
+  "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. */
+  "notes-label"?: (HelixGraph["notesLabel"]) | undefined;
+  /** The list's name, read by screen readers. */
+  notesLabel?: (HelixGraph["notesLabel"]) | undefined;
+  /** The search field's name. */
+  "search-label"?: (HelixGraph["searchLabel"]) | undefined;
+  /** The search field's name. */
+  searchLabel?: (HelixGraph["searchLabel"]) | undefined;
+  /** How the selected note is described in the list. */
+  "selected-label"?: (HelixGraph["selectedLabel"]) | undefined;
+  /** How the selected note is described in the list. */
+  selectedLabel?: (HelixGraph["selectedLabel"]) | 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. */
+  nodes?: (HelixGraph["nodes"]) | undefined;
+};
+
+export type HelixGraphVueEvents = {
+  /** A note was selected, in the list or in the drawing. The detail's `value` is its `id`. */
+  "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 pan button or arrow key was pressed. Move the drawing. */
+  "helix-graph-pan": HelixGraphHelixGraphPanElementEvent;
+  /** The graph has been drawn whole, laid out and settled. Sent each time `drawn()` says it is drawn after it was not. */
+  "helix-graph-ready": HelixGraphHelixGraphReadyElementEvent;
+  /** A zoom button or key was pressed. Zoom the drawing. */
+  "helix-graph-zoom": HelixGraphHelixGraphZoomElementEvent;
+};
+
 export type HelixGridVueProps = {
   /** How each cell aligns within its row. Sets `align-items`.
 
@@ -13965,6 +14184,14 @@ export type CustomCssProperties = {
   "--filter-input-shadow"?: (string) | undefined;
   /** The height of the empty field. The field grows from this height. */
   "--filter-input-size"?: (string) | undefined;
+  /** The color behind the drawing while it loads. */
+  "--graph-background-color"?: (string) | undefined;
+  /** The frame's height, as a length. */
+  "--graph-block-size"?: (string) | undefined;
+  /** The frame's border color. */
+  "--graph-border-color"?: (string) | undefined;
+  /** The list's width beside the drawing. */
+  "--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;
   /** How tall a cell is. One row of tall, narrow cells looks like a status page. */
@@ -14979,6 +15206,12 @@ 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. */
+  "helix-graph": DefineCustomElement<
+    HelixGraph,
+    HelixGraphVueProps,
+    HelixGraphVueEvents
+  >;
   /** Set columns in one of two ways:  - 'columns' sets a fixed count. - 'min' fits as many equal columns as there is room for at that width, so the   layout responds with no breakpoints to maintain.  If you set both, 'min' wins. The grid is presentation only, so there is no headless tier. */
   "helix-grid": DefineCustomElement<
     HelixGrid,