@fusion.dev/helix-headless 0.143.0 → 0.145.0

package/dist/object-inspector/rows.d.ts

@@ -0,0 +1,57 @@
+/** One visible line of the tree: a value, where it sits, and whether it is open. */
+export interface Row {
+    branch: boolean;
+    depth: number;
+    /** The property name or array index this value is under; absent for the root. */
+    key?: string;
+    /** Whether its key or its value holds what the tree is filtered by. */
+    match: boolean;
+    open: boolean;
+    path: string;
+    position: number;
+    siblings: number;
+    value: unknown;
+}
+/** Whether a value has entries of its own, an object or an array. */
+export declare const branchy: (value: unknown) => value is object;
+/** A branch's entries, an array's under its indexes. */
+export declare const entries: (value: object) => [string, unknown][];
+/** A child's path under its parent's, escaped the way a JSON Pointer escapes one. */
+export declare const child: (path: string, key: string) => string;
+/**
+ * Every branch a path sits inside, from the root down, and not the path itself.
+ *
+ * The root's path is the empty string, so every other path has it first. A
+ * key's own `/` is escaped as `~1`, so cutting at each `/` cuts between keys.
+ */
+export declare const ancestorsOf: (path: string) => string[];
+/**
+ * The paths of every entry whose key or value holds `query`, ignoring case,
+ * across the whole value and not only the open branches.
+ *
+ * A branch is matched by its key alone: its brackets and its count are drawn,
+ * and they are not what a reader is looking for.
+ */
+export declare const search: (root: unknown, query: string) => Set<string>;
+/**
+ * Every visible row, in order, for a value with `opened` branches open.
+ *
+ * With `found`, the paths a filter matched, a branch shows only the entries
+ * that matched or lead to one, and a matched entry shows everything under it.
+ * Position and set size count the entries shown, which is the set a reader
+ * hears.
+ */
+export declare const flatten: (root: unknown, opened: Set<string>, found?: Set<string>) => Row[];
+/**
+ * Which branches are open for a value, by path.
+ *
+ * Every branch shallower than `depth` opens. A branch in `known`, the
+ * branches of the last value, keeps whether it was in `opened`, so a new value
+ * keeps the branches a reader opened or closed and only a new one takes the
+ * default. Returns the open branches and every branch, for the next value to
+ * be told apart from this one.
+ */
+export declare const seed: (root: unknown, depth: number, known?: Set<string>, opened?: Set<string>) => {
+    branches: Set<string>;
+    opened: Set<string>;
+};

package/dist/object-inspector/rows.js

@@ -0,0 +1,86 @@
+export const branchy = (value) => value !== null && typeof value === 'object';
+export const entries = (value) => Array.isArray(value) ? value.map((item, at) => [String(at), item]) : Object.entries(value);
+export const child = (path, key) => `${path}/${key.replaceAll('~', '~0').replaceAll('/', '~1')}`;
+export const ancestorsOf = (path) => {
+    const cuts = [];
+    for (let at = path.indexOf('/'); at !== -1; at = path.indexOf('/', at + 1)) {
+        cuts.push(path.slice(0, at));
+    }
+    return cuts;
+};
+const words = (value) => (branchy(value) ? '' : String(value));
+export const search = (root, query) => {
+    const found = new Set();
+    const wanted = query.trim().toLocaleLowerCase();
+    if (wanted === '' || root === undefined) {
+        return found;
+    }
+    const visit = (value, path, key) => {
+        if (key?.toLocaleLowerCase().includes(wanted) ||
+            words(value).toLocaleLowerCase().includes(wanted)) {
+            found.add(path);
+        }
+        if (branchy(value)) {
+            for (const [name, item] of entries(value)) {
+                visit(item, child(path, name), name);
+            }
+        }
+    };
+    visit(root, '');
+    return found;
+};
+export const flatten = (root, opened, found) => {
+    const rows = [];
+    if (root === undefined) {
+        return rows;
+    }
+    const trail = new Set([...(found ?? [])].flatMap(ancestorsOf));
+    const visit = (value, path, depth, position, siblings, under, key) => {
+        const branch = branchy(value);
+        const open = branch && opened.has(path);
+        const match = found?.has(path) === true;
+        rows.push({
+            branch,
+            depth,
+            match,
+            open,
+            path,
+            position,
+            siblings,
+            value,
+            ...(key === undefined ? {} : { key }),
+        });
+        if (!open) {
+            return;
+        }
+        const inside = under || match || !found;
+        const children = entries(value)
+            .map(([name, item]) => [name, item, child(path, name)])
+            .filter(([, , at]) => inside || found?.has(at) || trail.has(at));
+        children.forEach(([name, item, at], index) => {
+            visit(item, at, depth + 1, index + 1, children.length, inside && !!found, name);
+        });
+    };
+    if (!found || found.has('') || trail.has('')) {
+        visit(root, '', 0, 1, 1, false);
+    }
+    return rows;
+};
+export const seed = (root, depth, known = new Set(), opened = new Set()) => {
+    const open = new Set();
+    const branches = new Set();
+    const visit = (value, path, level) => {
+        if (!branchy(value)) {
+            return;
+        }
+        branches.add(path);
+        if (known.has(path) ? opened.has(path) : level < depth) {
+            open.add(path);
+        }
+        for (const [name, item] of entries(value)) {
+            visit(item, child(path, name), level + 1);
+        }
+    };
+    visit(root, '', 0);
+    return { branches, opened: open };
+};

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

@@ -1,4 +1,4 @@
-import { HelixElement } from '@fusion.dev/helix-core';
+import { HelixElement, type LinkModifiers } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 /**
  * The options among some elements, reaching one level into a group.
@@ -34,6 +34,9 @@ export declare const optionsAmong: (elements: readonly Element[]) => HelixHeadle
  * Filtering belongs to the owner, which hides an option with `hidden`. What
  * counts as a match differs between a select and a command palette.
  *
+ * An option with `href` is a link: choosing it follows the link and selects
+ * nothing, as an entry in a command palette that goes to a page does.
+ *
  * @since 0.1.0
  * @status stable
  * @category forms
@@ -44,7 +47,7 @@ export declare const optionsAmong: (elements: readonly Element[]) => HelixHeadle
  * @slot end - Content after the label, such as a shortcut or a count.
  * @slot start - Content before the label, such as an icon or an avatar.
  *
- * @event {HelixSelectEvent} helix-select - The option was chosen. Cancelable: canceling it leaves the selection as it was.
+ * @event {HelixSelectEvent} helix-select - The option was chosen. Cancelable: canceling it leaves the selection as it was, and keeps the browser from following an option's `href`.
  *
  * @csspart description - The description under the label, when there is one.
  * @csspart item - The row.
@@ -148,6 +151,28 @@ export declare class HelixHeadlessOption extends HelixElement {
      * Prevents the option from being chosen.
      */
     disabled: boolean;
+    /**
+     * Whether following the link downloads what it names. Only meaningful
+     * beside an `href`.
+     */
+    download: boolean;
+    /**
+     * The URL the option links to. Setting it makes the option a link: choosing
+     * it, with a press, Enter or a click, follows the link and selects nothing,
+     * as React Aria's items with `href` do. Command, Control and Shift open it
+     * where they open a link, in a new tab or a new window.
+     *
+     * `helix-select` is said first with the `href` in it, and canceling it keeps
+     * the browser from following, so a client-side router follows it instead.
+     *
+     * **The option stays an option**, and an anchor is never drawn inside it:
+     * `role="option"` sits on the host, where a listbox's
+     * `aria-activedescendant` can name it, and an `<a>` inside would be exposed
+     * as a link within the option and take its name (Menu Item's `href` records
+     * the measurement). The link is followed through an anchor made for the
+     * moment, which `followLink` describes.
+     */
+    href: string;
     /**
      * A shorter name for this choice, for where the row does not fit.
      *
@@ -161,12 +186,30 @@ export declare class HelixHeadlessOption extends HelixElement {
      * nothing for every choice.
      */
     label: string;
+    /**
+     * The link's `rel`. Set it whenever you set `target="_blank"`.
+     */
+    rel: string;
     /**
      * Whether this choice is currently chosen.
      *
      * Written by the listbox.
      */
     selected: boolean;
+    /**
+     * Where the link opens, such as `_blank`, for an option with an `href`.
+     */
+    target: string;
+    /**
+     * The words a reader types to reach this choice, where the row's own words
+     * are not them: typeahead, a filter and a combobox match against it, and a
+     * select's trigger shows it.
+     *
+     * For a row whose content is a picture, an avatar beside a name and a role,
+     * or a name written in another script, as React Aria's `textValue`. Empty
+     * reads the row's words, then `label`.
+     */
+    textValue: string;
     /**
      * The value that identifies the option, and that a form submits.
      */
@@ -210,11 +253,17 @@ export declare class HelixHeadlessOption extends HelixElement {
      * it is in every comparison too.
      *
      * **The `label` where the slot holds nothing**, which is what the row shows
-     * then, so the six read the words a reader sees.
+     * then, so the six read the words a reader sees. `text-value` wins over both,
+     * being the consumer saying outright what the words are.
      */
     get text(): string;
-    /** Sends `helix-select` for this option. Does nothing when it is disabled. */
-    select(): void;
+    /**
+     * Sends `helix-select` for this option. Does nothing when it is disabled.
+     *
+     * An option with an `href` then follows its link, unless the event was
+     * canceled, with the keys `modifiers` names held.
+     */
+    select(modifiers?: LinkModifiers): void;
     /**
      * Mirrors the chosen state where a stylesheet can select on it.
      *

package/dist/option/root/option-root.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, HelixElement, HelixSelectEvent } from '@fusion.dev/helix-core';
+import { customElement, followLink, HelixElement, HelixSelectEvent, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 export const optionsAmong = (elements) => {
@@ -18,8 +18,13 @@ let HelixHeadlessOption = class HelixHeadlessOption extends HelixElement {
         this.alternate = '';
         this.alternateLabel = '';
         this.disabled = false;
+        this.download = false;
+        this.href = '';
         this.label = '';
+        this.rel = '';
         this.selected = false;
+        this.target = '';
+        this.textValue = '';
         this.value = '';
     }
     get defaultSelected() {
@@ -29,17 +34,26 @@ let HelixHeadlessOption = class HelixHeadlessOption extends HelixElement {
         this.toggleAttribute('selected', next);
     }
     get text() {
+        if (this.textValue !== '') {
+            return this.textValue;
+        }
         return ([...this.childNodes]
             .filter((node) => node.nodeType === Node.TEXT_NODE || (node instanceof Element && node.slot === ''))
             .map((node) => node.textContent ?? '')
             .join('')
             .trim() || this.label);
     }
-    select() {
+    select(modifiers) {
         if (this.disabled) {
             return;
         }
-        this.dispatchEvent(new HelixSelectEvent({ value: this.value }));
+        if (this.href === '') {
+            this.dispatchEvent(new HelixSelectEvent({ value: this.value }));
+            return;
+        }
+        if (this.dispatchEvent(new HelixSelectEvent({ href: this.href, value: this.value }))) {
+            followLink(this.ownerDocument, this, modifiers);
+        }
     }
     willUpdate(changed) {
         super.willUpdate(changed);
@@ -48,13 +62,13 @@ let HelixHeadlessOption = class HelixHeadlessOption extends HelixElement {
     }
     render() {
         this.internals.role = 'option';
-        this.internals.ariaSelected = String(this.selected);
+        this.internals.ariaSelected = this.href === '' ? String(this.selected) : null;
         this.internals.ariaDisabled = this.disabled ? 'true' : null;
         this.internals.ariaDescription =
             this.alternate !== '' && this.alternateLabel !== '' ? this.alternateLabel : null;
         return html `<div
       part="item${this.selected ? ' item-selected' : ''}${this.active ? ' item-active' : ''}"
-      @click=${() => this.select()}
+      @click=${(event) => this.select(event)}
     >
       <slot name="start"></slot>
       <span part="text">
@@ -80,12 +94,27 @@ __decorate([
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessOption.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessOption.prototype, "download", void 0);
+__decorate([
+    property()
+], HelixHeadlessOption.prototype, "href", void 0);
 __decorate([
     property()
 ], HelixHeadlessOption.prototype, "label", void 0);
+__decorate([
+    property()
+], HelixHeadlessOption.prototype, "rel", void 0);
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessOption.prototype, "selected", void 0);
+__decorate([
+    property()
+], HelixHeadlessOption.prototype, "target", void 0);
+__decorate([
+    property({ attribute: 'text-value' })
+], HelixHeadlessOption.prototype, "textValue", void 0);
 __decorate([
     property()
 ], HelixHeadlessOption.prototype, "value", void 0);

package/dist/outline/levels.d.ts

@@ -0,0 +1,31 @@
+/**
+ * The levels of a flat run of links, as the nested lists they describe.
+ *
+ * A contents list written flat, `<a data-level="2">`, says its depth in an
+ * attribute that only a stylesheet reads. The outline turns the run into lists
+ * inside list items in its shadow root, so a screen reader hears the levels a
+ * nested `<ul>` would have given it, with the links left where they are.
+ */
+/** One link in the tree: its place in the run, and the links nested under it. */
+export interface Branch {
+    /** The link's position in the flat run, counted from zero. */
+    index: number;
+    /** The links one level or more deeper that follow it, before the next at its level. */
+    children: Branch[];
+}
+/**
+ * The level a link's `data-level` asks for, a whole number from 1.
+ *
+ * Absent, empty, or not a number is the top level, which is how the outline
+ * has always read a link without one.
+ */
+export declare const levelOf: (value: string | null) => number;
+/**
+ * Nests a run of levels.
+ *
+ * Each link goes under the nearest link before it with a lower level, and to
+ * the top where there is none. A jump of two levels nests one list deeper and
+ * not two, since a list item with no link of its own would be read as an empty
+ * entry. A run that starts deeper than 1 starts at the top all the same.
+ */
+export declare const nest: (levels: readonly number[]) => Branch[];

package/dist/outline/levels.js

@@ -0,0 +1,23 @@
+export const levelOf = (value) => {
+    const level = Number.parseInt(value ?? '', 10);
+    return Number.isFinite(level) && level >= 1 ? level : 1;
+};
+export const nest = (levels) => {
+    const top = [];
+    const open = [];
+    levels.forEach((level, index) => {
+        const branch = { children: [], index };
+        while (open.length > 0 && (open.at(-1)?.level ?? 0) >= level) {
+            open.pop();
+        }
+        const parent = open.at(-1);
+        if (parent) {
+            parent.branch.children.push(branch);
+        }
+        else {
+            top.push(branch);
+        }
+        open.push({ branch, level });
+    });
+    return top;
+};

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

@@ -1,5 +1,6 @@
 import { HelixElement } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
+import { type Branch } from '../levels.js';
 /**
  * @summary Links to the headings on the page, with the section in view marked.
  *
@@ -12,8 +13,12 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * the same page.
  *
  * Write the anchors flat, with `data-level` for their depth, or nested in
- * lists, `<ul><li><a>`. A screen reader hears a nested list's levels; it hears
- * `data-level` as a flat run of links.
+ * lists, `<ul><li><a>`. A screen reader hears the levels either way: the
+ * outline puts a flat run into lists inside list items of its own, nested by
+ * `data-level`, and leaves the links where they are. A link without
+ * `data-level` is at the top level.
+ *
+ * A heading slotted into `heading` names the navigation, in place of `label`.
  *
  * The current section is decided by the headings' positions. An
  * `IntersectionObserver` with a band near the top fails both ways: when
@@ -27,13 +32,24 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @documentation https://fusion.dev/helix/components/outline
  *
  * @slot - The links, as anchors with fragment hrefs, or lists holding them.
+ * @slot heading - A heading above the links, such as "On this page". It names the navigation.
  *
  * @event {HelixActivateEvent} helix-activate - Fired when the section in view changes, with its id as the value. It reports the scroll position and cannot be prevented.
  *
+ * @csspart heading - The box holding the `heading` slot, above the navigation.
  * @csspart indicator - The mark that moves to the section in view.
  * @csspart nav - The navigation landmark.
  */
 export declare class HelixHeadlessOutline extends HelixElement {
+    /**
+     * Manual, so each link in a flat run can be put in a list item of its own.
+     *
+     * The list items are slots, which lay out as nothing at all, so each link is
+     * still laid out as a child of the navigation exactly where it was, and the
+     * consumer's markup is not touched. A run holding anything but links, a
+     * `<ul>` among them, goes to one plain slot as before.
+     */
+    static shadowRootOptions: ShadowRootInit;
     private readonly indicator;
     /**
      * How the page scrolls to a section when its link is clicked.
@@ -58,7 +74,8 @@ export declare class HelixHeadlessOutline extends HelixElement {
      */
     behavior: ScrollBehavior;
     /**
-     * The navigation's name, read by screen readers.
+     * The navigation's name, read by screen readers. A heading in the `heading`
+     * slot names it in place of this.
      */
     label: string;
     /**
@@ -92,6 +109,11 @@ export declare class HelixHeadlessOutline extends HelixElement {
      */
     private reading;
     private observer;
+    /**
+     * Watches the children, which a manual root is not told about: a link
+     * arriving, leaving or changing its level changes the lists drawn for them.
+     */
+    private childWatch;
     /**
      * The links, in document order. Empty on the server, which has no tree.
      *
@@ -101,6 +123,18 @@ export declare class HelixHeadlessOutline extends HelixElement {
      * nothing was announced, and nothing said why.
      */
     private get links();
+    /** The children that are the content, which is all of them but the heading. */
+    private get content();
+    /**
+     * The links of a flat run, which the render puts into lists, or `undefined`
+     * where the content is anything else.
+     *
+     * Anything else is a list a consumer wrote, which already has its levels, a
+     * slot forwarded from a component around this one, or a server's render and
+     * the hydration of one, which cannot know the children. A root a server sent
+     * routes by name, so it keeps the plain slot after hydration too.
+     */
+    private get run();
     /**
      * What each link points at, paired with the link, skipping anything missing.
      *
@@ -250,8 +284,39 @@ export declare class HelixHeadlessOutline extends HelixElement {
     private unland;
     connectedCallback(): void;
     protected firstUpdated(changed: PropertyValues): void;
+    /**
+     * Puts each child in its slot, on a root this element made.
+     *
+     * A link of a flat run goes to the slot inside its list item, and anything
+     * else, with the text between, to the plain slot. A root a server sent
+     * routes by name and needs none of it.
+     */
+    private assign;
+    /** Whether the heading is what names the navigation. */
+    private namedByHeading;
+    /**
+     * Names the navigation by what is in the `heading` slot, in place of `label`.
+     *
+     * An element reference, because the heading is in the light DOM and the
+     * `<nav>` in this shadow root, which an IDREF cannot cross. A browser without
+     * element reflection keeps `label`.
+     */
+    private readonly nameByHeading;
     protected updated(changed: PropertyValues): void;
     protected render(): TemplateResult;
+    /**
+     * A list for a run of links, with a list item for each, nested by level.
+     *
+     * **Slots, because a slot lays out as nothing.** A list and its items drawn
+     * as boxes would put each link inside an item, out of the navigation's own
+     * flex column, and every outline styled against that column would move. A
+     * slot is `display: contents`, keeps a role it is given, and shows its
+     * children while nothing is assigned to it, so the items nest in the
+     * accessibility tree and nowhere else. Measured in Chromium: every link at the
+     * same box with and without the lists, and each item at the level its
+     * nesting gives it.
+     */
+    protected renderList(branches: Branch[]): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/outline/root/outline-root.js

@@ -4,9 +4,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, elementById, HelixActivateEvent, HelixElement, IndicatorController, } from '@fusion.dev/helix-core';
-import { html } from 'lit';
+import { customElement, elementById, HelixActivateEvent, HelixElement, IndicatorController, reflectElements, } from '@fusion.dev/helix-core';
+import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
+import { levelOf, nest } from '../levels.js';
+const isFragment = (element) => element instanceof HTMLAnchorElement && element.getAttribute('href')?.startsWith('#') === true;
 let HelixHeadlessOutline = class HelixHeadlessOutline extends HelixElement {
     constructor() {
         super(...arguments);
@@ -72,16 +74,38 @@ let HelixHeadlessOutline = class HelixHeadlessOutline extends HelixElement {
             this.watch();
             this.indicator.place();
         };
+        this.namedByHeading = false;
+        this.nameByHeading = () => {
+            const slot = this.renderRoot?.querySelector?.('slot[name="heading"]');
+            this.namedByHeading = reflectElements(this.partNamed('nav'), 'ariaLabelledByElements', slot?.assignedElements({ flatten: true }) ?? [], this.namedByHeading);
+        };
     }
+    static { this.shadowRootOptions = {
+        ...HelixElement.shadowRootOptions,
+        slotAssignment: 'manual',
+    }; }
     get current() {
         return this.reading;
     }
     get links() {
-        const slot = this.renderRoot?.querySelector('slot');
-        const fragment = (element) => element instanceof HTMLAnchorElement && element.getAttribute('href')?.startsWith('#') === true;
-        return (slot?.assignedElements({ flatten: true }) ?? []).flatMap((element) => fragment(element)
+        const slots = [
+            ...(this.renderRoot?.querySelectorAll?.('slot[data-link], nav > slot:not([role])') ?? []),
+        ];
+        return slots
+            .flatMap((slot) => slot.assignedElements({ flatten: true }))
+            .flatMap((element) => isFragment(element)
             ? [element]
-            : [...element.querySelectorAll('a[href^="#"]')].filter(fragment));
+            : [...element.querySelectorAll('a[href^="#"]')].filter(isFragment));
+    }
+    get content() {
+        return this.knownChildren.filter((child) => child.slot !== 'heading');
+    }
+    get run() {
+        const content = this.content;
+        if (this.assignsByName || content.length === 0 || !content.every(isFragment)) {
+            return undefined;
+        }
+        return content;
     }
     get sections() {
         return this.links.flatMap((link) => {
@@ -163,6 +187,8 @@ let HelixHeadlessOutline = class HelixHeadlessOutline extends HelixElement {
     }
     disconnectedCallback() {
         super.disconnectedCallback();
+        this.childWatch?.disconnect();
+        this.childWatch = undefined;
         this.removeEventListener('click', this.handleClick);
         document.removeEventListener('scroll', this.handleScroll, true);
         if (this.frame !== 0) {
@@ -183,6 +209,12 @@ let HelixHeadlessOutline = class HelixHeadlessOutline extends HelixElement {
     }
     connectedCallback() {
         super.connectedCallback();
+        this.childWatch = new MutationObserver(() => this.requestUpdate());
+        this.childWatch.observe(this, {
+            attributeFilter: ['data-level', 'href', 'slot'],
+            childList: true,
+            subtree: true,
+        });
         this.addEventListener('click', this.handleClick);
         document.addEventListener('scroll', this.handleScroll, {
             capture: true,
@@ -195,9 +227,32 @@ let HelixHeadlessOutline = class HelixHeadlessOutline extends HelixElement {
     firstUpdated(changed) {
         super.firstUpdated(changed);
         this.watch();
+        this.finishHydration();
+    }
+    assign() {
+        if (this.assignsByName) {
+            return;
+        }
+        const root = this.renderRoot;
+        const heading = root?.querySelector?.('slot[name="heading"]');
+        heading?.assign?.(...this.knownChildren.filter((child) => child.slot === 'heading'));
+        const run = this.run;
+        if (run) {
+            for (const slot of root?.querySelectorAll?.('slot[data-link]') ?? []) {
+                const link = run[Number(slot.dataset.link)];
+                if (link) {
+                    slot.assign(link);
+                }
+            }
+            return;
+        }
+        const plain = root?.querySelector?.('nav > slot:not([role])');
+        plain?.assign?.(...[...this.childNodes].filter((node) => node instanceof Element ? node.slot !== 'heading' : node instanceof Text));
     }
     updated(changed) {
         super.updated(changed);
+        this.assign();
+        this.nameByHeading();
         if (changed.has('offset')) {
             this.reach();
             this.mark();
@@ -208,11 +263,21 @@ let HelixHeadlessOutline = class HelixHeadlessOutline extends HelixElement {
         this.indicator.place();
     }
     render() {
-        return html `<nav part="nav" aria-label=${this.label}>
-      <slot @slotchange=${this.handleSlotChange}></slot>
+        const run = this.run;
+        return html `<div part="heading"><slot name="heading" @slotchange=${this.nameByHeading}></slot></div>
+      <nav part="nav" aria-label=${this.label} @slotchange=${this.handleSlotChange}>
+      ${run ? this.renderList(nest(run.map((link) => levelOf(link.getAttribute('data-level'))))) : html `<slot></slot>`}
       <span part="indicator" aria-hidden="true"></span>
     </nav>`;
     }
+    renderList(branches) {
+        return html `<slot role="list"
+      >${branches.map((branch) => html `<slot role="listitem"
+            ><slot data-link=${branch.index}></slot
+            >${branch.children.length > 0 ? this.renderList(branch.children) : nothing}</slot
+          >`)}</slot
+    >`;
+    }
 };
 __decorate([
     property()