unfold-nav 0.1.0

package/dist/layout.d.cts

@@ -0,0 +1,197 @@
+/**
+ * Pure geometry: where nodes go, where their labels go, and how edges are drawn.
+ * Coordinates are viewport pixels (y grows downwards, angles are clockwise from +x).
+ *
+ * The guarantee this file is built around: nothing overlaps. Every node reserves room for its label at
+ * the moment its fan is placed, a fan is only accepted when all of its nodes *and* labels fit clear of
+ * everything already on screen (nodes, labels, edges, the viewport edge), and later fans have to keep
+ * clear of what's reserved. When that's impossible (a tiny screen, a huge menu) labels that don't fit
+ * are left out rather than drawn on top of something.
+ */
+export interface Vec {
+    x: number;
+    y: number;
+}
+export interface Circle extends Vec {
+    r: number;
+}
+export interface Rect {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+export interface Size {
+    w: number;
+    h: number;
+}
+/** A label's possible sizes, preferred first (e.g. one line, then wrapped onto two). */
+export type Sizes = Size | Size[];
+export type EdgeKind = 'curved' | 'straight' | 'step' | 'none';
+export declare function distToRect(p: Vec, r: Rect): number;
+export declare function rectsTouch(a: Rect, b: Rect, pad?: number): boolean;
+export declare const rectContains: (r: Rect, p: Vec) => boolean;
+/** Distance from a point to a polyline. */
+export declare function polyDist(p: Vec, poly: Vec[]): number;
+export declare function polyHitsRect(poly: Vec[], r: Rect): boolean;
+export interface EdgeShape {
+    /** SVG path data. */
+    d: string;
+    /** The same edge as a polyline, for overlap checks. */
+    points: Vec[];
+}
+/**
+ * The edge from `a` to `b`, trimmed to both circles.
+ * - `curved` edges leave the parent along the direction it was itself reached from, so deeper branches
+ *   read like a growing tree.
+ * - `step` edges use separate radial ports and two rounded turns, like traces on a circuit board.
+ *   Siblings never share the long axis-aligned stem that a single elbow would create.
+ */
+export declare function edgeShape(a: Circle, b: Circle, style: EdgeKind, parentAngle: number | null): EdgeShape;
+/** SVG path data for an edge (see `edgeShape`). */
+export declare const edgePath: (a: Circle, b: Circle, style: EdgeKind, parentAngle: number | null) => string;
+export interface LabelContext {
+    bounds: Rect;
+    /** Every node and the hub. */
+    circles: Circle[];
+    /** Labels already on screen or reserved. */
+    taken: Rect[];
+    /** Edge polylines a label must not cross (empty to allow crossing). */
+    edges: Vec[][];
+    /** Clearance between any node's rim and any label: room for hover growth, rings and halos. */
+    pad: number;
+    /**
+     * Clearance from the label's own node, if different. Lets the highlighted label sit closer to the
+     * other nodes: only the highlighted node grows, so the others need less room.
+     */
+    ownPad?: number;
+    /** Extra distances from the node to try, nearest first (default `LABEL_RINGS`). */
+    rings?: number[];
+}
+/**
+ * Places several labels so that none of them overlap. Greedy in the given order first; if that leaves
+ * one out, the most constrained label goes first, then the reverse order. Returns rects by index.
+ */
+export declare function placeLabels(items: {
+    node: Circle;
+    size: Sizes;
+    angle: number;
+}[], ctx: LabelContext, place?: (item: {
+    node: Circle;
+    size: Sizes;
+    angle: number;
+}, ctx: LabelContext) => Rect | null): (Rect | null)[];
+/**
+ * Finds a spot for a label next to `node` that touches nothing in `ctx`, trying the preferred direction
+ * first, and each size variant in turn (the full-width label before a wrapped one). `node` must be the
+ * same object as its entry in `ctx.circles`. Null when nothing fits.
+ */
+export declare function placeLabel(node: Circle, sizes: Sizes, angle: number, ctx: LabelContext): Rect | null;
+export interface FanInput {
+    /** The parent node, or the hub for the top level. */
+    origin: Circle;
+    /** Direction the origin itself was reached from (null for the hub). Shapes curved edges. */
+    parentAngle: number | null;
+    count: number;
+    /** Preferred direction the fan opens towards (radians). */
+    direction: number;
+    /** Node radius. */
+    radius: number;
+    /** Preferred distance from origin to each node centre. */
+    distance: number;
+    /** Minimum free space between neighbouring nodes. */
+    gap: number;
+    /** Nodes and labels must stay inside. */
+    bounds: Rect;
+    /** Everything already placed, except the origin. */
+    obstacles: Circle[];
+    /** Label rects already reserved. */
+    blocked?: Rect[];
+    /** Edges already drawn. */
+    edges?: Vec[][];
+    edgeStyle?: EdgeKind;
+    /** Label size(s) to reserve for each new node (null: no label). */
+    labels?: (Sizes | null)[];
+    /** Label size(s) to reserve for the origin itself (an unfolded branch keeps its name on screen). */
+    originLabel?: Sizes | null;
+    /** The edge leading into the origin (its label must not cross it). */
+    parentEdge?: Vec[] | null;
+    /** See `LabelContext.pad`. */
+    labelPad?: number;
+    /** Allow a full ring around the origin (for a free-floating button). */
+    ring?: boolean;
+    /** A comfortable angle between neighbours, used when there is room. */
+    preferredStep?: number;
+    /** Upper bound for the angle the whole fan covers. */
+    maxSpread?: number;
+    /** How far the fan may rotate away from `direction` before other directions are considered. */
+    maxDeviation?: number;
+}
+export interface Fan {
+    points: Vec[];
+    /** Reserved label rect per node; null where no label was asked for or none fits. */
+    labels: (Rect | null)[];
+    /** Reserved label rect for the origin (see `FanInput.originLabel`). */
+    originLabel?: Rect | null;
+}
+/**
+ * Places `count` nodes around `origin`, each with room for its label.
+ *
+ * Search order: the preferred distance first, growing until something fits; within a distance, the
+ * candidate closest to the preferred direction. Passes, each more lenient: (1) strict, near the preferred
+ * direction; (2) strict, any direction, wider fans; (3) as (2) but edges may cross labels and nodes;
+ * (4) nodes still never overlap, but labels that don't fit are left out. Only if there's no room for the
+ * nodes themselves is the least-bad placement used.
+ */
+export declare function placeFan(f: FanInput): Fan;
+export interface Level {
+    /** Unique key for the level (the ids of the expanded path joined), used for caching. */
+    key: string;
+    /** `null` for the top level (children of the button). */
+    parentId: string | null;
+    childIds: string[];
+}
+export interface PlacedNode extends Vec {
+    /** Centre of the parent (the button for top-level pages). */
+    from: Vec;
+    /** Direction from the parent to this node. */
+    angle: number;
+    /** Direction the parent itself was reached from (null for top-level pages). */
+    parentAngle: number | null;
+    /** Room reserved for this node's label; null when labels are off or none fits. */
+    label: Rect | null;
+    /**
+     * The label uses room reserved for a dimmed page's label (only for the level you're looking at, whose
+     * labels are always shown). That dimmed label must then stay hidden while this one is visible.
+     */
+    borrowed?: boolean;
+    /** The edge from the parent as a polyline. */
+    edge: Vec[];
+    /** Room reserved for this node's label while it is unfolded (see `GraphInput.branchLabelSize`). */
+    pathLabel?: Rect | null;
+}
+export interface GraphInput {
+    hub: Circle;
+    bounds: Rect;
+    levels: Level[];
+    nodeRadius: number;
+    distance: number;
+    gap: number;
+    edgeStyle?: EdgeKind;
+    /** Size(s) of each node's label, to reserve room for it. Omit to lay out without labels. */
+    labelSize?: (id: string) => Sizes | null;
+    /** Size(s) of an unfolded branch's label (it may carry an extra hint); defaults to `labelSize`. */
+    branchLabelSize?: (id: string) => Sizes | null;
+    /** See `LabelContext.pad`. */
+    labelPad?: number;
+}
+/**
+ * Lays out the visible part of the tree level by level. Each level only depends on the levels before it,
+ * so a fan never moves when something deeper unfolds; fans are cached per level key.
+ *
+ * When a node unfolds, its own reserved label space is released (its children usually want that
+ * direction); every other reserved label stays out of bounds for deeper levels.
+ */
+export declare function layoutGraph(g: GraphInput, cache?: Map<string, Fan>): Map<string, PlacedNode>;
+/** Index of the node under the pointer, or -1. Picks the nearest node within its radius + slop. */
+export declare function hitTest(p: Vec, nodes: Circle[], slop: number): number;

package/dist/layout.d.ts

@@ -0,0 +1,197 @@
+/**
+ * Pure geometry: where nodes go, where their labels go, and how edges are drawn.
+ * Coordinates are viewport pixels (y grows downwards, angles are clockwise from +x).
+ *
+ * The guarantee this file is built around: nothing overlaps. Every node reserves room for its label at
+ * the moment its fan is placed, a fan is only accepted when all of its nodes *and* labels fit clear of
+ * everything already on screen (nodes, labels, edges, the viewport edge), and later fans have to keep
+ * clear of what's reserved. When that's impossible (a tiny screen, a huge menu) labels that don't fit
+ * are left out rather than drawn on top of something.
+ */
+export interface Vec {
+    x: number;
+    y: number;
+}
+export interface Circle extends Vec {
+    r: number;
+}
+export interface Rect {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+export interface Size {
+    w: number;
+    h: number;
+}
+/** A label's possible sizes, preferred first (e.g. one line, then wrapped onto two). */
+export type Sizes = Size | Size[];
+export type EdgeKind = 'curved' | 'straight' | 'step' | 'none';
+export declare function distToRect(p: Vec, r: Rect): number;
+export declare function rectsTouch(a: Rect, b: Rect, pad?: number): boolean;
+export declare const rectContains: (r: Rect, p: Vec) => boolean;
+/** Distance from a point to a polyline. */
+export declare function polyDist(p: Vec, poly: Vec[]): number;
+export declare function polyHitsRect(poly: Vec[], r: Rect): boolean;
+export interface EdgeShape {
+    /** SVG path data. */
+    d: string;
+    /** The same edge as a polyline, for overlap checks. */
+    points: Vec[];
+}
+/**
+ * The edge from `a` to `b`, trimmed to both circles.
+ * - `curved` edges leave the parent along the direction it was itself reached from, so deeper branches
+ *   read like a growing tree.
+ * - `step` edges use separate radial ports and two rounded turns, like traces on a circuit board.
+ *   Siblings never share the long axis-aligned stem that a single elbow would create.
+ */
+export declare function edgeShape(a: Circle, b: Circle, style: EdgeKind, parentAngle: number | null): EdgeShape;
+/** SVG path data for an edge (see `edgeShape`). */
+export declare const edgePath: (a: Circle, b: Circle, style: EdgeKind, parentAngle: number | null) => string;
+export interface LabelContext {
+    bounds: Rect;
+    /** Every node and the hub. */
+    circles: Circle[];
+    /** Labels already on screen or reserved. */
+    taken: Rect[];
+    /** Edge polylines a label must not cross (empty to allow crossing). */
+    edges: Vec[][];
+    /** Clearance between any node's rim and any label: room for hover growth, rings and halos. */
+    pad: number;
+    /**
+     * Clearance from the label's own node, if different. Lets the highlighted label sit closer to the
+     * other nodes: only the highlighted node grows, so the others need less room.
+     */
+    ownPad?: number;
+    /** Extra distances from the node to try, nearest first (default `LABEL_RINGS`). */
+    rings?: number[];
+}
+/**
+ * Places several labels so that none of them overlap. Greedy in the given order first; if that leaves
+ * one out, the most constrained label goes first, then the reverse order. Returns rects by index.
+ */
+export declare function placeLabels(items: {
+    node: Circle;
+    size: Sizes;
+    angle: number;
+}[], ctx: LabelContext, place?: (item: {
+    node: Circle;
+    size: Sizes;
+    angle: number;
+}, ctx: LabelContext) => Rect | null): (Rect | null)[];
+/**
+ * Finds a spot for a label next to `node` that touches nothing in `ctx`, trying the preferred direction
+ * first, and each size variant in turn (the full-width label before a wrapped one). `node` must be the
+ * same object as its entry in `ctx.circles`. Null when nothing fits.
+ */
+export declare function placeLabel(node: Circle, sizes: Sizes, angle: number, ctx: LabelContext): Rect | null;
+export interface FanInput {
+    /** The parent node, or the hub for the top level. */
+    origin: Circle;
+    /** Direction the origin itself was reached from (null for the hub). Shapes curved edges. */
+    parentAngle: number | null;
+    count: number;
+    /** Preferred direction the fan opens towards (radians). */
+    direction: number;
+    /** Node radius. */
+    radius: number;
+    /** Preferred distance from origin to each node centre. */
+    distance: number;
+    /** Minimum free space between neighbouring nodes. */
+    gap: number;
+    /** Nodes and labels must stay inside. */
+    bounds: Rect;
+    /** Everything already placed, except the origin. */
+    obstacles: Circle[];
+    /** Label rects already reserved. */
+    blocked?: Rect[];
+    /** Edges already drawn. */
+    edges?: Vec[][];
+    edgeStyle?: EdgeKind;
+    /** Label size(s) to reserve for each new node (null: no label). */
+    labels?: (Sizes | null)[];
+    /** Label size(s) to reserve for the origin itself (an unfolded branch keeps its name on screen). */
+    originLabel?: Sizes | null;
+    /** The edge leading into the origin (its label must not cross it). */
+    parentEdge?: Vec[] | null;
+    /** See `LabelContext.pad`. */
+    labelPad?: number;
+    /** Allow a full ring around the origin (for a free-floating button). */
+    ring?: boolean;
+    /** A comfortable angle between neighbours, used when there is room. */
+    preferredStep?: number;
+    /** Upper bound for the angle the whole fan covers. */
+    maxSpread?: number;
+    /** How far the fan may rotate away from `direction` before other directions are considered. */
+    maxDeviation?: number;
+}
+export interface Fan {
+    points: Vec[];
+    /** Reserved label rect per node; null where no label was asked for or none fits. */
+    labels: (Rect | null)[];
+    /** Reserved label rect for the origin (see `FanInput.originLabel`). */
+    originLabel?: Rect | null;
+}
+/**
+ * Places `count` nodes around `origin`, each with room for its label.
+ *
+ * Search order: the preferred distance first, growing until something fits; within a distance, the
+ * candidate closest to the preferred direction. Passes, each more lenient: (1) strict, near the preferred
+ * direction; (2) strict, any direction, wider fans; (3) as (2) but edges may cross labels and nodes;
+ * (4) nodes still never overlap, but labels that don't fit are left out. Only if there's no room for the
+ * nodes themselves is the least-bad placement used.
+ */
+export declare function placeFan(f: FanInput): Fan;
+export interface Level {
+    /** Unique key for the level (the ids of the expanded path joined), used for caching. */
+    key: string;
+    /** `null` for the top level (children of the button). */
+    parentId: string | null;
+    childIds: string[];
+}
+export interface PlacedNode extends Vec {
+    /** Centre of the parent (the button for top-level pages). */
+    from: Vec;
+    /** Direction from the parent to this node. */
+    angle: number;
+    /** Direction the parent itself was reached from (null for top-level pages). */
+    parentAngle: number | null;
+    /** Room reserved for this node's label; null when labels are off or none fits. */
+    label: Rect | null;
+    /**
+     * The label uses room reserved for a dimmed page's label (only for the level you're looking at, whose
+     * labels are always shown). That dimmed label must then stay hidden while this one is visible.
+     */
+    borrowed?: boolean;
+    /** The edge from the parent as a polyline. */
+    edge: Vec[];
+    /** Room reserved for this node's label while it is unfolded (see `GraphInput.branchLabelSize`). */
+    pathLabel?: Rect | null;
+}
+export interface GraphInput {
+    hub: Circle;
+    bounds: Rect;
+    levels: Level[];
+    nodeRadius: number;
+    distance: number;
+    gap: number;
+    edgeStyle?: EdgeKind;
+    /** Size(s) of each node's label, to reserve room for it. Omit to lay out without labels. */
+    labelSize?: (id: string) => Sizes | null;
+    /** Size(s) of an unfolded branch's label (it may carry an extra hint); defaults to `labelSize`. */
+    branchLabelSize?: (id: string) => Sizes | null;
+    /** See `LabelContext.pad`. */
+    labelPad?: number;
+}
+/**
+ * Lays out the visible part of the tree level by level. Each level only depends on the levels before it,
+ * so a fan never moves when something deeper unfolds; fans are cached per level key.
+ *
+ * When a node unfolds, its own reserved label space is released (its children usually want that
+ * direction); every other reserved label stays out of bounds for deeper levels.
+ */
+export declare function layoutGraph(g: GraphInput, cache?: Map<string, Fan>): Map<string, PlacedNode>;
+/** Index of the node under the pointer, or -1. Picks the nearest node within its radius + slop. */
+export declare function hitTest(p: Vec, nodes: Circle[], slop: number): number;

package/dist/navigation.d.cts

@@ -0,0 +1,2 @@
+/** Default browser navigation allows web links and common contact protocols. Custom routers own their URLs. */
+export declare function navigationUrl(href: string, base: string): string | null;

package/dist/navigation.d.ts

@@ -0,0 +1,2 @@
+/** Default browser navigation allows web links and common contact protocols. Custom routers own their URLs. */
+export declare function navigationUrl(href: string, base: string): string | null;

package/dist/options.d.cts

@@ -0,0 +1,6 @@
+import type { IconSource, UnfoldNavOptions, UnfoldNavStrings } from './types.cjs';
+export declare const DEFAULT_STRINGS: UnfoldNavStrings;
+export declare const DEFAULT_OPTIONS: UnfoldNavOptions;
+export declare function isIconSource(value: unknown): value is IconSource;
+/** Validate before applying changes, so an invalid update leaves a working navigation intact. */
+export declare function normalizeOptions(current: UnfoldNavOptions, patch: Partial<UnfoldNavOptions>): UnfoldNavOptions;

package/dist/options.d.ts

@@ -0,0 +1,6 @@
+import type { IconSource, UnfoldNavOptions, UnfoldNavStrings } from './types.js';
+export declare const DEFAULT_STRINGS: UnfoldNavStrings;
+export declare const DEFAULT_OPTIONS: UnfoldNavOptions;
+export declare function isIconSource(value: unknown): value is IconSource;
+/** Validate before applying changes, so an invalid update leaves a working navigation intact. */
+export declare function normalizeOptions(current: UnfoldNavOptions, patch: Partial<UnfoldNavOptions>): UnfoldNavOptions;

package/dist/styles.d.cts

@@ -0,0 +1 @@
+export declare const STYLES: string;

package/dist/styles.d.ts

@@ -0,0 +1 @@
+export declare const STYLES: string;

package/dist/tree.d.cts

@@ -0,0 +1,22 @@
+import type { NavPage } from './types.cjs';
+export interface TreeNode {
+    id: string;
+    page: NavPage;
+    parent: TreeNode | null;
+    children: TreeNode[];
+    /** 0 for the (possibly virtual) root, 1 for top-level pages. */
+    depth: number;
+    index: number;
+}
+export interface Tree {
+    root: TreeNode;
+    byId: Map<string, TreeNode>;
+}
+export declare function buildTree(pages: NavPage[] | NavPage | null | undefined): Tree;
+/** Ids from the top level down to `node` (inclusive). Empty for the root. */
+export declare function pathTo(node: TreeNode | null | undefined): string[];
+/**
+ * The page matching `currentUrl`: an exact path (+ optional query/hash) match wins, otherwise the deepest page whose
+ * path is a prefix of the current one (`/blog` for `/blog/some-post`). The site root `/` only matches exactly.
+ */
+export declare function findCurrent(tree: Tree, currentUrl: string, base: string): TreeNode | null;

package/dist/tree.d.ts

@@ -0,0 +1,22 @@
+import type { NavPage } from './types.js';
+export interface TreeNode {
+    id: string;
+    page: NavPage;
+    parent: TreeNode | null;
+    children: TreeNode[];
+    /** 0 for the (possibly virtual) root, 1 for top-level pages. */
+    depth: number;
+    index: number;
+}
+export interface Tree {
+    root: TreeNode;
+    byId: Map<string, TreeNode>;
+}
+export declare function buildTree(pages: NavPage[] | NavPage | null | undefined): Tree;
+/** Ids from the top level down to `node` (inclusive). Empty for the root. */
+export declare function pathTo(node: TreeNode | null | undefined): string[];
+/**
+ * The page matching `currentUrl`: an exact path (+ optional query/hash) match wins, otherwise the deepest page whose
+ * path is a prefix of the current one (`/blog` for `/blog/some-post`). The site root `/` only matches exactly.
+ */
+export declare function findCurrent(tree: Tree, currentUrl: string, base: string): TreeNode | null;

package/dist/types.d.cts

@@ -0,0 +1,108 @@
+/**
+ * Anything that can be rendered as an icon:
+ * - inline SVG / HTML markup: `'<svg …>…</svg>'` (treated as trusted markup)
+ * - an image URL: `'/icons/home.svg'`, `'https://…/a.png'`, `'data:image/…'`
+ * - an emoji or short text: `'🏠'`, `'A'`
+ * - a name your `iconResolver` understands: `'home'`
+ * - a DOM node (cloned per use) or a function returning one of the above
+ */
+export type IconSource = string | Node | (() => Node | string);
+export interface NavPage {
+    /** Stable id. Generated from the tree position when omitted. */
+    id?: string;
+    label: string;
+    /** Where selecting the page goes. Pages without `href` act as groups (or as actions, see `unfold-select`). */
+    href?: string;
+    /** `_blank` opens in a new tab. */
+    target?: string;
+    icon?: IconSource;
+    /** Shown under the label while the page is highlighted, and exposed to screen readers. */
+    description?: string;
+    /** Per-node accent colour (any CSS colour). */
+    color?: string;
+    disabled?: boolean;
+    children?: NavPage[];
+    /** Free-form payload, handed back in events. */
+    data?: unknown;
+}
+export type Position = 'top-left' | 'top' | 'top-right' | 'left' | 'center' | 'right' | 'bottom-left' | 'bottom' | 'bottom-right'
+/** Render the button in document flow (e.g. inside a header); the graph still unfolds in a top-layer overlay. */
+ | 'inline';
+export type LabelMode = 'auto' | 'always' | 'hover' | 'none';
+export type DockStyle = 'float' | 'bar';
+export type ArrowKeys = 'tree' | 'spatial';
+/** Text the component speaks or shows. Override for other languages. `{label}` is replaced. */
+export interface UnfoldNavStrings {
+    /** Accessible name of the list of pages. */
+    pages: string;
+    /** The centre button at the top level. */
+    close: string;
+    /** The centre button one level down. */
+    backToTop: string;
+    /** The centre button deeper down; `{label}` is the page it goes back to. */
+    back: string;
+}
+export type EdgeStyle = 'curved' | 'straight' | 'step' | 'none';
+export type Theme = 'auto' | 'light' | 'dark';
+export interface SelectDetail {
+    page: NavPage;
+    /** Pages from the top level down to (and including) the selected page. */
+    trail: NavPage[];
+    /** How the selection happened. */
+    via: 'release' | 'click' | 'keyboard';
+}
+export interface UnfoldNavOptions {
+    /** The site map: an array of top-level pages, or a single root page whose children are the top level. */
+    pages: NavPage[] | NavPage;
+    /** Where the button sits. Default `bottom-right`. */
+    position: Position;
+    /**
+     * `float`: the button floats over the page. `bar`: it sits in a strip along its edge.
+     * Use the published `--unfold-inset-*` values for page padding to keep content clear.
+     */
+    dock: DockStyle;
+    /** Distance from the viewport edge in px (`number` or `{ x, y }`). Default 24. */
+    offset: number | {
+        x: number;
+        y: number;
+    };
+    /** Press duration (ms) before the graph opens in drag mode. Default 220. */
+    holdDelay: number;
+    /** Dwell time (ms) over a branch before it unfolds while dragging. Default 140. */
+    expandDelay: number;
+    /** A short tap opens the graph in tap-through mode. Default true. */
+    openOnTap: boolean;
+    /** Diameter of page nodes in px. Default 52. */
+    nodeSize: number;
+    /** Diameter of the button in px. Default 60. */
+    triggerSize: number;
+    /** Preferred distance between a node and its children in px. Default 96. */
+    spacing: number;
+    /** Minimum free space between neighbouring nodes in px. Default 16. */
+    gap: number;
+    /** `auto`: labels for the level you're on + highlighted node. `always`, `hover` or `none`. Default `auto`. */
+    labels: LabelMode;
+    edges: EdgeStyle;
+    /** Dim and blur the page behind the graph. Default true. */
+    backdrop: boolean;
+    /** Vibrate on open / highlight where supported. Default true. */
+    haptics: boolean;
+    theme: Theme;
+    /** URL of the current page. `undefined` = use `location`, `null` = none. */
+    current: string | null | undefined;
+    /** Accessible name of the button and the navigation dialog. Default `Navigation`. */
+    label: string;
+    /**
+     * `tree` (default): the standard tree keys: Up/Down previous/next, Right opens a branch or enters it,
+     * Left closes it or goes to the parent. `spatial`: arrows move to the nearest page in that direction.
+     */
+    arrowKeys: ArrowKeys;
+    /** Override the built-in text (for other languages). */
+    strings: Partial<UnfoldNavStrings>;
+    /** Icon for the button. Defaults to a small graph glyph. */
+    triggerIcon: IconSource | undefined;
+    /** Turn icon names (`icon: 'home'`) into markup or nodes, e.g. from an icon library. */
+    iconResolver: ((name: string, page?: NavPage) => Node | string | null | undefined) | undefined;
+    /** Custom navigation for client-side routers. Called instead of `location.assign`. */
+    navigate: ((page: NavPage, detail: SelectDetail) => void) | undefined;
+}