lintje 0.1.1

package/dist-elements/types/components/forms/form-actions/form-actions.d.ts

@@ -0,0 +1,35 @@
+/**
+ * `<lintje-form-actions>` — the sticky action bar of a form: draft status left, slotted
+ * `lintje-button`s right (the last, primary one). On `busy` the primary button turns `busy` and
+ * the others `disabled`; leaving `busy` restores what each had. No shadow while stuck:
+ * `--shadow-sticky` falls downwards, off-screen under a bottom bar. While connected it reserves
+ * its height as the page scroller's `scroll-padding-bottom`, so a field the focus scrolls to is
+ * not hidden behind it (WCAG 2.4.11). Events: none.
+ */
+import { type PropertyDeclarations, type TemplateResult } from 'lit';
+import { LintjeElement } from '../../../core/element.js';
+import '../../../primitives/button/button.js';
+export type FormActionsState = '' | 'dirty' | 'busy' | 'saved' | 'draft';
+/** "10:42" from "10:42", an ISO moment or a `Date`; `''` for what is not a time. */
+export declare function clockTime(value: string | Date | null | undefined): string;
+export declare class LintjeFormActions extends LintjeElement {
+    #private;
+    static styles: import("lit").CSSResult[];
+    static properties: PropertyDeclarations;
+    /** Set by the surrounding `lintje-form` (with `saved-at`); standing alone, the host sets it. */
+    state: FormActionsState;
+    /** When it was saved: "10:42" or anything `Date` parses. */
+    savedAt?: string;
+    connectedCallback(): void;
+    get buttons(): HTMLElement[];
+    get primaryButton(): HTMLElement | null;
+    disconnectedCallback(): void;
+    protected updated(): void;
+    private renderStatus;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lintje-form-actions': LintjeFormActions;
+    }
+}

package/dist-elements/types/components/forms/form-section/form-section.d.ts

@@ -0,0 +1,29 @@
+/**
+ * `<lintje-form-section>` — a group of fields with a heading and an explanation: a `<fieldset>`
+ * with its `<legend>`, which holds an `<h3>` so the heading is in the page's outline. Bare inside
+ * a tile, or a tile itself (`variant="tile"`).
+ *
+ * `disabled` sets `disabled` on every slotted control itself and hands back what each had: a
+ * `<fieldset disabled>` in a shadow root disables nothing slotted.
+ */
+import { type PropertyDeclarations, type PropertyValues, type TemplateResult } from 'lit';
+import { LintjeElement } from '../../../core/element.js';
+export type FormSectionVariant = 'plain' | 'tile';
+export declare class LintjeFormSection extends LintjeElement {
+    #private;
+    static styles: import("lit").CSSResult;
+    static properties: PropertyDeclarations;
+    /** The legend; as a tile, the tile title. */
+    heading: string;
+    description?: string;
+    variant: FormSectionVariant;
+    disabled: boolean;
+    protected updated(changed: PropertyValues<this>): void;
+    disconnectedCallback(): void;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lintje-form-section': LintjeFormSection;
+    }
+}

package/dist-elements/types/components/forms/repeater/repeater.d.ts

@@ -0,0 +1,61 @@
+/**
+ * `<lintje-repeater>` — a group of fields that repeats. The host writes the rows and owns the
+ * list; the repeater asks, numbers and names the rows, and bounds them by `min` and `max`.
+ * After an add, focus goes to the new row's first field; after a remove, to the remove button
+ * of the row above (the add button when none is left). A live region says both.
+ * It keeps no values and draws no undo toast.
+ *
+ * Events: `lintje-row-add` (detail: the index the new row gets) from the repeater, and
+ * `lintje-row-remove` (detail: the row's index) from the row; both bubble and are composed.
+ */
+import { type PropertyDeclarations, type PropertyValues, type TemplateResult } from 'lit';
+import { LintjeElement } from '../../../core/element.js';
+import '../../../primitives/button/button.js';
+import '../../../primitives/icon-button/icon-button.js';
+/** The first focusable control inside an element, through the shadow roots on the way. */
+export declare function firstFocusable(root: Element): HTMLElement | null;
+export declare class LintjeRepeaterRow extends LintjeElement {
+    static styles: import("lit").CSSResult;
+    static properties: PropertyDeclarations;
+    index: number;
+    label: string;
+    removable: boolean;
+    disabled: boolean;
+    focusRemove(): void;
+    private requestRemove;
+    protected render(): TemplateResult;
+}
+export declare class LintjeRepeater extends LintjeElement {
+    static styles: import("lit").CSSResult;
+    static properties: PropertyDeclarations;
+    legend: string;
+    /** What one row is, "Betrokkene": it names the rows and their remove buttons. */
+    itemLabel: string;
+    /** The add button's text. Default: "<item-label> toevoegen", or "Rij toevoegen". */
+    addLabel?: string;
+    min: number;
+    max?: number;
+    disabled: boolean;
+    protected count: number;
+    protected spoken: string;
+    /** The reader's last request, so focus can follow once the host has answered. */
+    private pending;
+    private readonly onRowRemove;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private name;
+    private get rows();
+    private get atMax();
+    private sync;
+    private afterRows;
+    private focusAdd;
+    private add;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lintje-repeater': LintjeRepeater;
+        'lintje-repeater-row': LintjeRepeaterRow;
+    }
+}

package/dist-elements/types/components/forms/stepper/stepper.d.ts

@@ -0,0 +1,68 @@
+/**
+ * `<lintje-stepper>` — the steps of a form that takes more than one screen, or the phases of a
+ * process. A line joins the markers: drawn through up to the current step, dashed after it. A
+ * step still to come does nothing: jumping ahead is not possible. The host decides which step is
+ * current; the element never reads the URL. A plain click on a done step is sent as
+ * `lintje-navigate`, which a host that routes cancels; a modified click is the browser's.
+ *
+ * Events: `lintje-navigate` `{ href }`.
+ */
+import { type PropertyDeclarations, type PropertyValues, type TemplateResult } from 'lit';
+import { LintjeElement } from '../../../core/element.js';
+import '../../../primitives/progress-bar/progress-bar.js';
+export type StepState = 'done' | 'current' | 'next';
+export interface Step {
+    label: string;
+    href?: string;
+    state: StepState;
+    /** How many errors a done step still has; the check becomes a warning with "2 fouten". */
+    errors?: number;
+    /** A short line under the label, in Dutch as the host wrote it: "aug – sept 2023". */
+    meta?: string;
+    /** A sentence or two about the step, shown only when the steps stand in a column. */
+    description?: string;
+}
+export type StepperLayout = 'row' | 'column';
+export type StepperOrientation = 'horizontal' | 'vertical';
+export declare function errorText(errors: number): string;
+export declare function position(steps: Step[]): {
+    place: number;
+    total: number;
+    percent: number;
+};
+/**
+ * Row or column. In a column the steps' width cannot be measured, so the width remembered from
+ * the last row decides when the row fits again.
+ */
+export declare function chooseLayout(layout: StepperLayout, available: number, needed: number, remembered: number): StepperLayout;
+export declare class LintjeStepper extends LintjeElement {
+    #private;
+    static styles: import("lit").CSSResult[];
+    static properties: PropertyDeclarations;
+    steps: Step[];
+    label: string;
+    /**
+     * `horizontal` lays the steps in a row and stands them up when the row does not fit; on a phone
+     * it becomes one line with a bar. `vertical` always stands them in a column, on a phone too.
+     */
+    orientation: StepperOrientation;
+    protected layout: StepperLayout;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    protected updated(changed: PropertyValues<this>): void;
+    private get vertical();
+    private fit;
+    private follow;
+    private renderMarker;
+    private renderName;
+    /** The line to the next step stands on the label's line, so the meta line may run under it. */
+    private renderBody;
+    private renderPhone;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lintje-stepper': LintjeStepper;
+    }
+}

package/dist-elements/types/components/frame/app-search/app-search.d.ts

@@ -0,0 +1,70 @@
+/**
+ * `<lintje-app-search>` — one search field over everything in an application, opened with `/`.
+ *
+ * The owner holds `open`, `groups` and `loading`. A dialog on the shared focus-trap stack. The
+ * field is a native `<input>`: `aria-controls` and `aria-activedescendant` cannot cross a root.
+ *
+ * Below 768 px it opens from below as a sheet, with the filter sheet's head — its name and a close
+ * button — and the line of keys goes.
+ *
+ * Events: `lintje-open`, `lintje-search` (the term), `lintje-navigate` `{ href }`, `lintje-action`
+ * (the id), `lintje-close` `{ reason: 'escape' | 'scrim' | 'button' | 'choice' }`.
+ */
+import { nothing, type PropertyDeclarations, type PropertyValues, type TemplateResult } from 'lit';
+import { LintjeElement } from '../../../core/element.js';
+import '../../../primitives/spinner/spinner.js';
+export interface SearchResult {
+    /** What `lintje-action` carries. */
+    id: string;
+    label: string;
+    /** A fact on the right in the muted colour: a duration, a date. */
+    meta?: string;
+    /** The result is a page: a choice sends `lintje-navigate`. */
+    href?: string;
+}
+export interface SearchGroup {
+    label: string;
+    items: SearchResult[];
+}
+export type AppSearchCloseReason = 'escape' | 'scrim' | 'button' | 'choice';
+/** Milliseconds after the last keystroke before `lintje-search` is sent. */
+export declare const SEARCH_DELAY = 200;
+/** The label split around the first case-insensitive occurrence of the term; null when absent. */
+export declare function splitMatch(label: string, query: string): [string, string, string] | null;
+/** What the live region says; while loading the spinner's own status speaks. */
+export declare function resultsMessage(count: number, query: string, loading: boolean): string;
+export declare class LintjeAppSearch extends LintjeElement {
+    #private;
+    static styles: import("lit").CSSResult[];
+    static properties: PropertyDeclarations;
+    /** The owner's: the element asks to be opened and closed and never does either itself. */
+    open: boolean;
+    /** The field's accessible name. */
+    label: string;
+    query: string;
+    /** The host is answering a search. */
+    loading: boolean;
+    groups: SearchGroup[];
+    /** The chosen row across all groups; -1 is none. */
+    protected active: number;
+    private get results();
+    private get input();
+    private optionId;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private close;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    protected updated(changed: PropertyValues<this>): void;
+    private onInput;
+    private onFieldKeydown;
+    private choose;
+    private renderLabel;
+    private renderOption;
+    private renderResults;
+    protected render(): TemplateResult | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lintje-app-search': LintjeAppSearch;
+    }
+}

package/dist-elements/types/components/frame/breadcrumbs/breadcrumbs.d.ts

@@ -0,0 +1,40 @@
+/**
+ * `<lintje-breadcrumbs>` — the breadcrumb trail above a page's title.
+ *
+ * The last item is the current page (`aria-current`), never a link. Past `MAX_LEVELS` the middle
+ * collapses into a "…" menu. It never reads the URL: the host passes the levels.
+ *
+ * Events: `lintje-navigate` `{ href }`.
+ */
+import { nothing, type PropertyDeclarations, type TemplateResult } from 'lit';
+import { LintjeElement } from '../../../core/element.js';
+import '../../actions/menu-button/menu-button.js';
+/** Without `href` a level is not a link. */
+export interface Crumb {
+    label: string;
+    href?: string;
+}
+export declare const MAX_LEVELS = 4;
+export interface Trail {
+    head: Crumb[];
+    folded: Crumb[];
+    tail: Crumb[];
+}
+export declare function trail(items: Crumb[]): Trail;
+export declare class LintjeBreadcrumbs extends LintjeElement {
+    #private;
+    static styles: import("lit").CSSResult[];
+    static properties: PropertyDeclarations;
+    items: Crumb[];
+    label: string;
+    private follow;
+    private renderCrumb;
+    private renderMenu;
+    private renderPhone;
+    protected render(): TemplateResult | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lintje-breadcrumbs': LintjeBreadcrumbs;
+    }
+}

package/dist-elements/types/components/frame/footer/footer.d.ts

@@ -0,0 +1,40 @@
+/**
+ * `<lintje-footer>` — the foot of a site or an application: a line that says what it is, columns
+ * of links under a heading, and a row of the links every page carries (privacy, accessibility).
+ * It stands on the menu's own fill and runs edge to edge; in `lintje-shell` it goes in the
+ * `footer` slot. Below 768 px the columns stand under each other.
+ *
+ * Events: `lintje-navigate` `{ href }` for a plain click on a link.
+ */
+import { type PropertyDeclarations, type TemplateResult } from 'lit';
+import { LintjeElement } from '../../../core/element.js';
+export interface FooterLink {
+    label: string;
+    href: string;
+}
+export interface FooterColumn {
+    heading: string;
+    links: FooterLink[];
+}
+export interface FooterData {
+    /** One line that says what the site is: "Datacatalogus — alle producten van het dataplatform". */
+    tagline?: string;
+    columns?: FooterColumn[];
+    /** The links every page carries, in the bottom row. */
+    links?: FooterLink[];
+    /** A short line beside them: the version, the last change. */
+    note?: string;
+}
+export declare class LintjeFooter extends LintjeElement {
+    static styles: import("lit").CSSResult;
+    static properties: PropertyDeclarations;
+    data?: FooterData;
+    private onLink;
+    private link;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lintje-footer': LintjeFooter;
+    }
+}

package/dist-elements/types/components/frame/hero/hero.d.ts

@@ -0,0 +1,38 @@
+/**
+ * `<lintje-hero>` — the opening band of a start page: a large title, a line of introduction and
+ * one way onward, on the theme's wash. It runs from edge to edge; its text keeps to the
+ * content column. In `lintje-shell` it goes in the `full` slot, above the page's content.
+ *
+ * The title is an h2, as the page header's: the page's h1 is the shell's `name`.
+ * Slots: the default slot under the description (a search field, a short form); `status` above
+ * the title (a badge); `aside` for one picture beside the text (an emblem, an illustration), left
+ * out below 1024 px; `panel` for content beside the text (what is said now in a running
+ * recording), half the band from 1024 px and under the text below it; `overlap` for what stands
+ * half over the band's lower edge, such as a panel of tabs.
+ *
+ * Events: `lintje-navigate` `{ href }` for the action.
+ */
+import { type PropertyDeclarations, type TemplateResult } from 'lit';
+import { LintjeElement } from '../../../core/element.js';
+export declare class LintjeHero extends LintjeElement {
+    static styles: import("lit").CSSResult[];
+    static properties: PropertyDeclarations;
+    heading: string;
+    description?: string;
+    /** The one link onward under the introduction; drawn only with `href`. */
+    action?: string;
+    href?: string;
+    protected hasOverlap: boolean;
+    protected hasAside: boolean;
+    protected hasPanel: boolean;
+    private onOverlapChange;
+    private onAsideChange;
+    private onPanelChange;
+    private onAction;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lintje-hero': LintjeHero;
+    }
+}

package/dist-elements/types/components/frame/notifications/notifications.d.ts

@@ -0,0 +1,64 @@
+/**
+ * `<lintje-notifications>` — the bell with its unread counter, and the panel it opens.
+ *
+ * An unread item has the selected surface, a bold title and a dot, so colour is never the only
+ * carrier (rule 13). A new counter pops in; a figure that replaces another rises in, as a KPI tile
+ * does. Above 768 px the panel is a non-modal popover; below it a full-screen modal sheet on the
+ * focus-trap stack. It fetches and marks nothing: the host sets `.items`.
+ *
+ * More unread items than before are spoken from a status region beside the bell ("2 nieuwe
+ * meldingen"). When "Alles gelezen" goes with the focus on it, the focus moves to the first item.
+ *
+ * Events: `lintje-notification-open` `{ id, href? }` — a plain click on a title with an `href`
+ * is cancelled and left to the host —, `lintje-notifications-read` ("Alles gelezen").
+ */
+import { type PropertyDeclarations, type PropertyValues, type TemplateResult } from 'lit';
+import { LintjeElement } from '../../../core/element.js';
+import '../../../primitives/badge/badge.js';
+import '../../../primitives/popover/popover.js';
+export interface NotificationItem {
+    id: string;
+    title: string;
+    /** One line under the title: the file, the reason. */
+    text?: string;
+    /** When, as text the host formatted: "2 minuten geleden". */
+    when: string;
+    href?: string;
+    unread?: boolean;
+}
+export declare function countLabel(count: number, max?: number): string;
+/** The bell's name says the count as the badge shows it, so a voice command can use it (WCAG 2.5.3). */
+export declare function bellLabel(count: number, max?: number): string;
+export declare function newsMessage(added: number): string;
+export declare class LintjeNotifications extends LintjeElement {
+    #private;
+    static styles: import("lit").CSSResult[];
+    static properties: PropertyDeclarations;
+    items: NotificationItem[];
+    /**
+     * The highest figure the counter shows; above it the figure gets a plus, "9+". The bell's name
+     * says the exact count.
+     */
+    max: number;
+    open: boolean;
+    /** What the status region says; emptied first, filled a frame later, so a repeat is spoken. */
+    protected news: string;
+    private get bell();
+    private get unread();
+    private hide;
+    private readonly onFocusOut;
+    constructor();
+    disconnectedCallback(): void;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    protected updated(changed: PropertyValues<this>): void;
+    private onPopoverClose;
+    private choose;
+    private renderItem;
+    private renderPanel;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lintje-notifications': LintjeNotifications;
+    }
+}

package/dist-elements/types/components/frame/page-header/page-header.d.ts

@@ -0,0 +1,51 @@
+/**
+ * `<lintje-page-header>` — the title zone of a page, with an announcement above it.
+ *
+ * The title is an h2: the page's h1 is the shell's `name`.
+ * Slots: `breadcrumbs` above the title, `actions` on its right.
+ *
+ * In the page's content it is a band, and tells the shell through the shared store when the
+ * title scrolls under the top bar. The observer watches the title itself: a sentinel element in
+ * this column would pick up the gap and push the page down 6 px.
+ *
+ * In `lintje-shell`'s `header` slot it stands flush in the shell's content column, as an
+ * application's title row: no band, the description at every width, no observer.
+ *
+ * `editable` puts a pencil beside the title, shown while the title is pointed at or focused: the
+ * way to rename what the page is about. The page renames; the header only asks.
+ *
+ * Events: `lintje-title-edit` (the pencil was pressed).
+ */
+import { nothing, type PropertyDeclarations, type TemplateResult, type PropertyValues } from 'lit';
+import { LintjeElement, type FrameSettings } from '../../../core/element.js';
+import '../../feedback/announcement/announcement.js';
+import '../../../primitives/icon-button/icon-button.js';
+import type { PageHeaderData } from '../../../types.js';
+export declare class LintjePageHeader extends LintjeElement {
+    static styles: import("lit").CSSResult;
+    static properties: PropertyDeclarations;
+    data?: PageHeaderData | null;
+    /** In `lintje-shell`'s `header` slot: an application's title row, with no top bar to tell. */
+    inShell: boolean;
+    /** An empty actions slot takes no place, so a long title never wraps onto an empty line. */
+    hasActions: boolean;
+    /** A pencil beside the title asks to rename it. */
+    editable: boolean;
+    protected get dataSettings(): FrameSettings | undefined;
+    private readonly mobile;
+    private observer;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private stopObserving;
+    /**
+     * Thresholds 0 and 1: the observer fires when the title starts to disappear and when it is
+     * gone. The top edge decides, so a title below the viewport does not count as hidden.
+     */
+    protected updated(changed: PropertyValues<this>): void;
+    protected render(): TemplateResult | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lintje-page-header': LintjePageHeader;
+    }
+}

package/dist-elements/types/components/frame/session-expiry/session-expiry.d.ts

@@ -0,0 +1,55 @@
+/**
+ * `<lintje-session-expiry>` — the warning before the session runs out, the notice after it, and
+ * the "Je concept is teruggezet" announcement (`restored-at`).
+ *
+ * The window is a `role="alertdialog"` in `<lintje-confirm-dialog>`'s frame (its stylesheet).
+ * Escape and the scrim do nothing, because the session runs out either way. The element never
+ * calls a server: the host sets `busy`, moves `expires-at` or sets `expired`.
+ *
+ * Events: `lintje-session-extend`, `lintje-logout`, `lintje-login`, `lintje-draft-discard`.
+ */
+import { type PropertyDeclarations, type PropertyValues, type TemplateResult } from 'lit';
+import { LintjeElement } from '../../../core/element.js';
+import '../../feedback/announcement/announcement.js';
+import '../../../primitives/button/button.js';
+export type SessionPhase = 'active' | 'warning' | 'expired';
+export type RestoredReason = 'logout' | 'reload';
+/** The shortest warning, in seconds: time to read the question and answer it. */
+export declare const MIN_WARNING = 20;
+/** Where the session stands at `now`. Without an `expiresAt` it is active, unless `expired`. */
+export declare function sessionPhase(expiresAt: number | null, now: number, warnBeforeSeconds: number, expired?: boolean): SessionPhase;
+export declare function warningTitle(remainingMs: number): string;
+/** "10:42", or null for a moment that does not parse. */
+export declare function clockTime(moment: string): string | null;
+export declare class LintjeSessionExpiry extends LintjeElement {
+    #private;
+    static styles: import("lit").CSSResult[];
+    static properties: PropertyDeclarations;
+    /** When the session ends, as an ISO moment. */
+    expiresAt?: string;
+    /** Seconds before the end that the warning opens; at least `MIN_WARNING`. */
+    warnBefore: number;
+    /** When the restored draft was saved; set, the announcement shows. */
+    restoredAt?: string;
+    /** Why the draft came back; it picks the announcement's words. */
+    restoredReason: RestoredReason;
+    busy: boolean;
+    /** The host's word that the session is gone (extending failed). */
+    expired: boolean;
+    /** The clock, read once a second while there is an `expires-at`. A test replaces it. */
+    now: () => number;
+    protected clock: number;
+    get phase(): SessionPhase;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    protected updated(changed: PropertyValues<this>): void;
+    private renderRestored;
+    private renderDialog;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lintje-session-expiry': LintjeSessionExpiry;
+    }
+}

package/dist-elements/types/components/frame/shell/header.d.ts

@@ -0,0 +1,92 @@
+/**
+ * The header of the top layout: a logo bar and a navigation bar, as two render functions styled
+ * by `header.css`. The calling element adopts the stylesheet and owns all state (open group,
+ * active page, clicks); the functions read no URL.
+ *
+ * When the entries do not fit (`collapsed`) they give way to "Menu". They stay in the DOM, hidden,
+ * so their width can be measured in either state (`SubmenuController`).
+ */
+import { nothing, type ReactiveController, type ReactiveControllerHost, type TemplateResult } from 'lit';
+import '../../actions/logo/logo.js';
+import type { ShellLink } from '../../../types.js';
+/** Pages as the bars draw them: adjacent loose pages form one group without a heading. */
+export interface NavGroup {
+    heading?: string;
+    items: ShellLink[];
+}
+/** The ribbon's width in px; matches `--w-ribbon`. */
+export declare const RIBBON_WIDTH: {
+    readonly desktop: 48;
+    readonly phone: 40;
+};
+export interface LogoBarOptions {
+    /** URL or data URI of an emblem the host resolved itself; wins over `emblem`. */
+    logo?: string;
+    /** The theme's emblem (the ribbon) by file name, with the organisation's name and byline. */
+    emblem?: {
+        name: string;
+        label: string;
+        byline?: string;
+    };
+    /** `RIBBON_WIDTH.desktop` or `.phone`. */
+    ribbon: number;
+    /** The environment outside production ("Acceptatie"); a phone shows its first three letters. */
+    environment?: string;
+    /** Without it the logo is not a link. */
+    home?: {
+        href: string;
+        onNavigate: (event: MouseEvent) => void;
+    };
+}
+export declare function renderLogoBar(options: LogoBarOptions): TemplateResult;
+/** `NavBarOptions.open` while the panel of "Menu", the whole menu, is open. */
+export declare const WHOLE_MENU = -1;
+export interface NavBarOptions {
+    /** Unique within the calling shadow root: the submenus' ids are built from it. */
+    id: string;
+    groups: NavGroup[];
+    /** Index in `groups` of the open group, `WHOLE_MENU`, or `null`. */
+    open: number | null;
+    collapsed?: boolean;
+    /** A plain click on an entry with a page. */
+    onNavigate: (item: ShellLink, event: MouseEvent) => void;
+    /** Opens the submenu of this group, or closes whichever is open (`null`). */
+    onOpen: (index: number | null) => void;
+    start?: TemplateResult | typeof nothing;
+    end?: TemplateResult | typeof nothing;
+}
+/** An entry the reader can open: it has a page and nothing withholds it. */
+export declare const hasPage: (item: ShellLink) => boolean;
+/** Why an entry cannot be opened, in words: `aria-disabled` means nothing on a plain span, and
+ * the muted colour alone is no reason (rule 13). */
+export declare function unavailableWord(item: ShellLink): TemplateResult;
+export declare function renderNavBar(options: NavBarOptions): TemplateResult;
+export interface SubmenuHost extends ReactiveControllerHost {
+    /** As `NavBarOptions.open`. */
+    openGroup: number | null;
+    readonly renderRoot: HTMLElement | DocumentFragment;
+}
+/**
+ * Closes the open submenu from outside the bar: Escape (unless a dialog over the bar owns it), a
+ * click outside, focus leaving, a viewport under 768 px. It also decides `collapsed` (`measure`).
+ * Both widths compared are independent of the outcome, so it cannot flip back and forth.
+ */
+export declare class SubmenuController implements ReactiveController {
+    #private;
+    private readonly host;
+    /** Pass as `NavBarOptions.collapsed`. */
+    collapsed: boolean;
+    constructor(host: SubmenuHost);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    /** Below 768 px there is no bar: the open group closes and stays closed on widening. */
+    hostUpdate(): void;
+    hostUpdated(): void;
+    /**
+     * A change of `collapsed` closes whatever was open, whose entry has gone. Without layout it
+     * leaves the state as is. An open panel gets the room under the bar to scroll inside itself.
+     */
+    measure(): void;
+}
+/** A sibling of the bars: inside the bar's stacking context it would dim the submenu itself. */
+export declare function renderHeaderScrim(visible: boolean): TemplateResult | typeof nothing;