lintje 0.1.1

package/dist-elements/types/icons/loader.d.ts

@@ -0,0 +1,25 @@
+import type { IconGlyph } from './register.js';
+/** Where a single icon is fetched from, and under which build. */
+export interface IconSource {
+    base: string;
+    /** The build id, appended as `?b=…` so a hard cache follows a release. */
+    version?: string;
+}
+/** Where the loader fetches names it lacks; `base` is the folder `dist-icons/` is served from. */
+export declare function setIconSource(next: IconSource): void;
+export declare function iconSource(): IconSource;
+export declare function loadedIcon(name: string | undefined): IconGlyph | undefined;
+export declare function iconIsMissing(name: string | undefined): boolean;
+export declare function loadedIconNames(): string[];
+/** Puts glyphs in the store directly (a host that has them; tests). Notifies once per batch. */
+export declare function putIcons(entries: Iterable<[string, IconGlyph]>): void;
+/**
+ * Called whenever a glyph arrives or a name turns out not to exist. The callback gets the name
+ * when the change was about one, nothing for a batch (`putIcons`), so a listener can ignore others.
+ */
+export declare function onIconChange(redraw: (name?: string) => void): () => void;
+/** Asks for one icon and returns at once; icons waiting for the name redraw when it lands. */
+export declare function requestIcon(name: string | undefined): void;
+/** Resolves with the glyph, or `undefined` when the name has no file. */
+export declare function loadIcon(name: string): Promise<IconGlyph | undefined>;
+export declare function resetIcons(): void;

package/dist-elements/types/icons/register.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Generated by `npm run build:icons` — do not edit.
+ *
+ * The icons the bundle carries itself: the chrome a component draws by name.
+ * Every other icon is fetched by name when a name needs it
+ * (`src/icons/loader.ts`); the name is always the file name.
+ *
+ * 59 icons, of 1192 in `dist-icons/`.
+ */
+export interface IconGlyph {
+    /** The file's own viewBox: 64 or 48 in RVO's set, 24 for an own icon, 346x75 for an emblem. */
+    viewBox: string;
+    /** The root attributes that carry the drawing style (fill, stroke, …). */
+    attributes: Record<string, string>;
+    /** The markup inside the `<svg>`. */
+    body: string;
+}
+export declare const ICONS: Record<string, IconGlyph>;
+/** The names the bundle carries. Every other name goes through the loader. */
+export type IconName = keyof typeof ICONS;

package/dist-elements/types/icons/render.d.ts

@@ -0,0 +1,27 @@
+/**
+ * `renderIcon()` — one icon as a template in the calling component's own root, so a glyph costs
+ * no nested shadow root. `<lintje-icon>` draws through it too.
+ *
+ * Sources in order: `src` (a mask in the text colour); the register; the loader (names from
+ * data); `nothing`. A name without a file draws nothing: compare the result with `nothing` and
+ * show the Dutch label instead.
+ */
+import { nothing, type CSSResult, type TemplateResult } from 'lit';
+import { type IconGlyph } from './register.js';
+export declare const iconStyles: CSSResult;
+export interface IconOptions {
+    size?: number;
+    label?: string;
+    /** An SVG file the host resolved, as a URL or data URI. Wins over the name. */
+    src?: string;
+    className?: string;
+    /** A quarter turn of the drawing, as a CSS transform. */
+    rotate?: 90 | 180 | 270;
+    flip?: 'horizontal' | 'vertical';
+    /** Draws the box but does not ask for the file yet (`<lintje-icon lazy>`). */
+    defer?: boolean;
+}
+export declare function iconGlyph(name: string | undefined): IconGlyph | undefined;
+/** An icon before a line of text: one wrapper for tile title, KPI label and disclosure (rule 2). */
+export declare function renderLeadingIcon(name: string | undefined, className: string): TemplateResult | typeof nothing;
+export declare function renderIcon(name: string | undefined, options?: IconOptions): TemplateResult | typeof nothing;

package/dist-elements/types/icons/visible.d.ts

@@ -0,0 +1,10 @@
+/**
+ * One `IntersectionObserver` for every `<lintje-icon lazy>`: the icon asks for its file only
+ * within `MARGIN` of the viewport. Without `IntersectionObserver` it reveals at once.
+ */
+export declare const MARGIN = "400px";
+/** Calls `reveal` once `element` is within `MARGIN` of the viewport. Idempotent per element. */
+export declare function observeIcon(element: Element, reveal: () => void): void;
+export declare function unobserveIcon(element: Element): void;
+/** Testing seam: forget the observer, so the next call builds a fresh one. */
+export declare function resetIconObserver(): void;

package/dist-elements/types/primitives/badge/badge.d.ts

@@ -0,0 +1,40 @@
+/**
+ * `<lintje-badge>` — a status as a word; two words at most (rule 13). `variant="count"` is the
+ * quiet counter in a tab or button, `variant="unread"` the round counter of the menu.
+ *
+ * A root that draws a badge without the element calls `renderBadge()` and adopts `badgeStyles`,
+ * as `renderIcon()` / `iconStyles` do.
+ */
+import { type CSSResult, type PropertyDeclarations, type TemplateResult } from 'lit';
+import { LintjeElement } from '../../core/element.js';
+export type BadgeTone = 'neutral' | 'subtle' | 'busy' | 'success' | 'warning' | 'error' | 'info' | 'attention'
+/** A recording that runs now: the error fill with a dot before the word. */
+ | 'live';
+export type BadgeVariant = 'label' | 'count' | 'unread';
+export declare const badgeStyles: CSSResult;
+export interface BadgeOptions {
+    value: unknown;
+    tone?: BadgeTone;
+    variant?: BadgeVariant;
+    /** What a screen reader hears instead of a bare number: "2 opmerkingen". */
+    label?: string;
+    /** `nav`: the badge stands on the menu's surface and takes its colours; `tone` does not apply. */
+    surface?: 'nav';
+    muted?: boolean;
+    /** BEM classes of the surrounding block, space-separated. */
+    className?: string;
+}
+export declare function renderBadge(options: BadgeOptions): TemplateResult;
+export declare class LintjeBadge extends LintjeElement {
+    static styles: CSSResult[];
+    static properties: PropertyDeclarations;
+    tone: BadgeTone;
+    variant: BadgeVariant;
+    label?: string;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lintje-badge': LintjeBadge;
+    }
+}

package/dist-elements/types/primitives/button/button.d.ts

@@ -0,0 +1,73 @@
+/**
+ * `<lintje-button>` — a button or, with `href`, a link with the same look.
+ *
+ * `disabled` and `busy` render `aria-disabled="true"`, never the native `disabled`: the button
+ * stays in the tab order. A capturing `click` listener on the host swallows the activation, so
+ * no host listener and no form sees it. `busy` keeps the variant's colours and the exact width.
+ * A disabled or busy link renders no `href` and keeps `role="link"` and `tabindex="0"`.
+ * `type="submit"|"reset"` acts on the nearest `<form>` itself: the inner `<button>` has no form
+ * owner in a shadow root. ARIA on the host never reaches the inner control, so what a host needs
+ * there (`expanded`, `pressed`, `haspopup`, `keyshortcuts`, `accessible-name`, `description`, `invalid`) is a
+ * property; focusing the host focuses the inner control.
+ */
+import { type PropertyDeclarations, type TemplateResult } from 'lit';
+import { LintjeElement } from '../../core/element.js';
+export type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'link' | 'danger' | 'danger-secondary';
+export type ButtonSize = 'regular' | 'compact' | 'chrome';
+export declare class LintjeButton extends LintjeElement {
+    static styles: import("lit").CSSResult[];
+    static shadowRootOptions: ShadowRootInit;
+    static properties: PropertyDeclarations;
+    variant: ButtonVariant;
+    size: ButtonSize;
+    icon?: string;
+    iconRight?: string;
+    /** Unavailable: disabled gray and `aria-disabled`, still focusable. */
+    disabled: boolean;
+    /** Why it is disabled, read with the button. Say it on the page as well: a mouse does not hear it. */
+    reason?: string;
+    busy: boolean;
+    type: 'button' | 'submit' | 'reset';
+    /** Makes the button an `<a>` with the same look; `type` is then ignored. */
+    href?: string;
+    /** The link's browsing context; `_blank` without a `rel` gets `noopener noreferrer`. */
+    target?: string;
+    rel?: string;
+    /** The link downloads its target; the value is the suggested file name. */
+    download?: string;
+    /** The label for a host that passes a property; slotted children win. */
+    label?: string;
+    /** `aria-expanded` on the inner control, for a button that opens something; unset: none. */
+    expanded?: boolean;
+    /** `aria-pressed` on the inner button, for a toggle; unset: none. */
+    pressed?: boolean;
+    /** `aria-haspopup` on the inner control: `menu`, `dialog`, `listbox`… */
+    haspopup?: string;
+    /** `aria-keyshortcuts` on the inner control, e.g. `/`. */
+    keyshortcuts?: string;
+    /** The name when the visible label alone does not say enough; it starts with that label. */
+    accessibleName?: string;
+    /** Extra description read after the name, e.g. a field's hint or error. */
+    description?: string;
+    /** `aria-invalid` on the inner control, for a button that stands for a field. */
+    invalid: boolean;
+    /** Whether the slot holds anything. The empty label span is hidden, not removed: removing the
+     * `<slot>` could make `slotchange` fire again. */
+    slotted: boolean;
+    constructor();
+    /**
+     * A submit or reset button acts on the host's form. A task later, so every listener has seen
+     * the click and may have prevented it.
+     */
+    private actOnForm;
+    private refuseWhileUnavailable;
+    private onSlotChange;
+    protected render(): TemplateResult;
+    private renderReason;
+    private renderContent;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lintje-button': LintjeButton;
+    }
+}

package/dist-elements/types/primitives/grid/grid.d.ts

@@ -0,0 +1,30 @@
+/**
+ * `<lintje-grid>` — the 12-column grid. Its items are its own children; a tile carries `span`
+ * itself and needs no wrapper.
+ * Events: none.
+ */
+import { type PropertyValues, type TemplateResult } from 'lit';
+import { LintjeElement } from '../../core/element.js';
+export declare class LintjeGrid extends LintjeElement {
+    static styles: import("lit").CSSResult;
+    static properties: {
+        columns: {
+            type: NumberConstructor;
+        };
+        variant: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    /** Columns at desktop width. */
+    columns: number;
+    /** `kpi-row` switches to 3 columns at 768-1023 and 2 below that. */
+    variant?: 'kpi-row';
+    protected willUpdate(changed: PropertyValues<this>): void;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lintje-grid': LintjeGrid;
+    }
+}

package/dist-elements/types/primitives/grid-item/grid-item.d.ts

@@ -0,0 +1,12 @@
+/** `<lintje-grid-item>` — a grid cell for non-`lintje-` content. Events: none. */
+import { type TemplateResult } from 'lit';
+import { LintjeGridItemElement } from '../shared/grid-item-element.js';
+export declare class LintjeGridItem extends LintjeGridItemElement {
+    static styles: import("lit").CSSResult;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lintje-grid-item': LintjeGridItem;
+    }
+}

package/dist-elements/types/primitives/icon-button/icon-button.d.ts

@@ -0,0 +1,71 @@
+/**
+ * `<lintje-icon-button>` — a square button with one icon, or its Dutch label as text when the
+ * icon has no file. `disabled` renders `aria-disabled="true"` and a capturing `click` listener
+ * swallows the activation, so the button stays focusable but no host listener sees it.
+ * `live` is for what listens or speaks now (dictating, reading aloud): the primary fill and
+ * moving bars beside the icon; the host still sets `pressed` and the label that stops it.
+ */
+import { type TemplateResult } from 'lit';
+import { LintjeElement } from '../../core/element.js';
+export type IconButtonVariant = 'flat' | 'outlined' | 'tile';
+export declare class LintjeIconButton extends LintjeElement {
+    static styles: import("lit").CSSResult[];
+    static properties: {
+        icon: {
+            type: StringConstructor;
+        };
+        label: {
+            type: StringConstructor;
+        };
+        variant: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        active: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        size: {
+            type: NumberConstructor;
+        };
+        pressed: {
+            type: BooleanConstructor;
+        };
+        expanded: {
+            type: BooleanConstructor;
+        };
+        description: {
+            type: StringConstructor;
+        };
+        live: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    icon?: string;
+    /** The accessible name and the tooltip. Required: the button has no text. */
+    label: string;
+    /** Accepted for hosts that set it; the box is always `--h-icon-button`. */
+    size: 28 | 32 | 36 | 40 | 44;
+    variant: IconButtonVariant;
+    active: boolean;
+    disabled: boolean;
+    pressed?: boolean;
+    expanded?: boolean;
+    /** Extra description read after the name; a wrapping `lintje-tooltip` sets its text here. */
+    description?: string;
+    /** It listens or speaks now: the primary fill, with moving bars beside the icon. */
+    live: boolean;
+    constructor();
+    private refuseWhileDisabled;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lintje-icon-button': LintjeIconButton;
+    }
+}

package/dist-elements/types/primitives/index.d.ts

@@ -0,0 +1,33 @@
+/** The primitives layer. Importing this module registers its tags. */
+import './button/button.js';
+import './icon-button/icon-button.js';
+import './status-dot/status-dot.js';
+import './skeleton/skeleton.js';
+import './grid/grid.js';
+import './grid-item/grid-item.js';
+import './tile/tile.js';
+import './badge/badge.js';
+import './spinner/spinner.js';
+import './progress-bar/progress-bar.js';
+import './popover/popover.js';
+import './tooltip/tooltip.js';
+export { LintjeButton } from './button/button.js';
+export type { ButtonSize, ButtonVariant } from './button/button.js';
+export { LintjeIconButton } from './icon-button/icon-button.js';
+export type { IconButtonVariant } from './icon-button/icon-button.js';
+export { LintjeStatusDot, STATUS_LABEL } from './status-dot/status-dot.js';
+export { LintjeSkeleton } from './skeleton/skeleton.js';
+export { LintjeGrid } from './grid/grid.js';
+export { LintjeGridItem } from './grid-item/grid-item.js';
+export { LintjeGridItemElement, spanStyles } from './shared/grid-item-element.js';
+export { LintjeTile } from './tile/tile.js';
+export { LintjeBadge, badgeStyles, renderBadge } from './badge/badge.js';
+export type { BadgeOptions, BadgeTone, BadgeVariant } from './badge/badge.js';
+export { LintjeSpinner } from './spinner/spinner.js';
+export type { SpinnerSize } from './spinner/spinner.js';
+export { LintjeProgressBar } from './progress-bar/progress-bar.js';
+export type { ProgressTone } from './progress-bar/progress-bar.js';
+export { LintjePopover } from './popover/popover.js';
+export { LintjeTooltip } from './tooltip/tooltip.js';
+export { place } from './shared/place.js';
+export type { Place, Placement } from './shared/place.js';

package/dist-elements/types/primitives/popover/popover.d.ts

@@ -0,0 +1,50 @@
+/**
+ * `<lintje-popover>` — the floating panel: a surface fixed to the viewport under its anchor
+ * (`.anchor`, or the previous sibling). Content and padding come through the slot.
+ *
+ * The owner holds `open`: the popover only asks to be closed. Events: `lintje-close`
+ * `{ reason: 'escape' | 'outside' }`; a component drawing a popover in its own root stops it.
+ */
+import { nothing, type PropertyDeclarations, type PropertyValues, type TemplateResult } from 'lit';
+import { LintjeElement } from '../../core/element.js';
+import { type Place, type Placement } from '../shared/place.js';
+export declare class LintjePopover extends LintjeElement {
+    static styles: import("lit").CSSResult;
+    static properties: PropertyDeclarations;
+    /** The owner's; the popover never opens or closes itself. */
+    open: boolean;
+    placement: Placement;
+    label?: string;
+    /** `dialog`, `menu` or `listbox`, when the slotted content has no role itself. */
+    panelRole?: string;
+    matchWidth: boolean;
+    /** What the panel hangs under; default the previous sibling. */
+    anchor?: Element | null;
+    protected spot: Place | null;
+    private reflowFrame;
+    private get anchorElement();
+    private readonly onOutsidePress;
+    /**
+     * Capture phase and stopped: Escape closes the popover, not the drawer it stands in. Unless
+     * the focus stands in a modal dialog opened over it: then the key is the dialog's. With the
+     * focus inside the panel, a control there answers first (a lifted grip puts its row back).
+     */
+    private readonly onKeydown;
+    /** What a control inside the panel left of an Escape, before the drawer around it hears it. */
+    private readonly onOwnKeydown;
+    constructor();
+    private readonly onReflow;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private anchorWidth;
+    private measure;
+    /** Measures before the first paint, so nothing flashes in the corner. */
+    protected willUpdate(changed: PropertyValues<this>): void;
+    protected updated(changed: PropertyValues<this>): void;
+    protected render(): TemplateResult | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lintje-popover': LintjePopover;
+    }
+}

package/dist-elements/types/primitives/progress-bar/progress-bar.d.ts

@@ -0,0 +1,31 @@
+/**
+ * `<lintje-progress-bar>` — how far a task is. Without a `value` the duration is unknown and a
+ * block slides along the track. The default slot takes one action right of the label line.
+ * Done, error and paused are said in the value text and marked by a glyph before the label.
+ */
+import { type PropertyDeclarations, type TemplateResult } from 'lit';
+import { LintjeElement } from '../../core/element.js';
+export type ProgressTone = 'run' | 'done' | 'error' | 'paused';
+export declare class LintjeProgressBar extends LintjeElement {
+    static styles: import("lit").CSSResult[];
+    static properties: PropertyDeclarations;
+    /** 0–100; left out when the duration is unknown. */
+    value?: number | null;
+    /** What is happening, in Dutch: the bar's accessible name. */
+    label: string;
+    /** Keeps the label for screen readers only. */
+    hideLabel: boolean;
+    /** The figure on the right: "62% · nog ongeveer 3 min". */
+    detail?: string;
+    tone: ProgressTone;
+    private get known();
+    private get percent();
+    private get resolvedTone();
+    private valueText;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lintje-progress-bar': LintjeProgressBar;
+    }
+}

package/dist-elements/types/primitives/shared/grid-item-element.d.ts

@@ -0,0 +1,11 @@
+/** What every element that can stand in a `<lintje-grid>` shares: `span` and `span.css`. */
+import { type PropertyDeclarations, type PropertyValues } from 'lit';
+import { LintjeElement } from '../../core/element.js';
+export declare const spanStyles: import("lit").CSSResult;
+/** The `span` attribute, reflected, and `--lintje-span` written inline for `span.css`. */
+export declare class LintjeGridItemElement extends LintjeElement {
+    static properties: PropertyDeclarations;
+    /** Columns of the 12-column grid; default one. */
+    span?: number;
+    protected willUpdate(changed: PropertyValues<this>): void;
+}

package/dist-elements/types/primitives/shared/length.d.ts

@@ -0,0 +1,2 @@
+/** A CSS length: a number or numeric string (an attribute arrives as text) is pixels. */
+export declare function length(value: number | string | undefined): string | undefined;

package/dist-elements/types/primitives/shared/place.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Where a floating box stands against its anchor, in viewport pixels: below or above at a fixed
+ * gap, flipped when the room is too small and the other side has more, never past the viewport.
+ * Shared by the popover and the tooltip.
+ */
+export type Placement = 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end' | 'top-center';
+/** `bottom` is set instead of `top` when the box stands above the anchor. */
+export interface Place {
+    top: number | null;
+    bottom: number | null;
+    left: number;
+    /** The room on the side the box stands: its `max-height`. */
+    space: number;
+}
+export interface Rect {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+    width: number;
+}
+export declare const EDGE = 8;
+export declare function place(anchor: Rect, box: {
+    width: number;
+    height: number;
+}, view: {
+    width: number;
+    height: number;
+}, placement?: Placement, gap?: number): Place;
+export declare function samePlace(a: Place | null, b: Place | null): boolean;
+/** The viewport size; `window.innerWidth` is zero in a test document. */
+export declare function viewport(): {
+    width: number;
+    height: number;
+};

package/dist-elements/types/primitives/skeleton/skeleton.d.ts

@@ -0,0 +1,25 @@
+/** `<lintje-skeleton>` — the shimmer that holds a box while its content loads. Events: none. */
+import { type PropertyValues, type TemplateResult } from 'lit';
+import { LintjeElement } from '../../core/element.js';
+export declare class LintjeSkeleton extends LintjeElement {
+    static styles: import("lit").CSSResult;
+    static properties: {
+        width: {
+            type: StringConstructor;
+        };
+        height: {
+            type: StringConstructor;
+        };
+    };
+    /** A number is pixels; the default is the full width of its box. */
+    width: number | string;
+    height: number | string;
+    /** The size goes on the host: a percentage on the inner span would resolve against height 0. */
+    protected willUpdate(changed: PropertyValues<this>): void;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lintje-skeleton': LintjeSkeleton;
+    }
+}

package/dist-elements/types/primitives/spinner/spinner.d.ts

@@ -0,0 +1,31 @@
+/**
+ * `<lintje-spinner>` — the loading ring for content whose shape is not known; for a known shape
+ * use `<lintje-skeleton>`. The label is what a screen reader hears (`role="status"`).
+ * Events: none.
+ */
+import { type PropertyDeclarations, type PropertyValues, type TemplateResult } from 'lit';
+import { LintjeElement } from '../../core/element.js';
+export type SpinnerSize = 16 | 24 | 40;
+export declare class LintjeSpinner extends LintjeElement {
+    #private;
+    static styles: import("lit").CSSResult;
+    static properties: PropertyDeclarations;
+    size: SpinnerSize;
+    /** What is loading, in Dutch. Without it the ring says nothing. */
+    label?: string;
+    stacked: boolean;
+    /** Draws in `currentColor`, for a ring on a fill. */
+    current: boolean;
+    /** The label in the status region, a frame after the region: one inserted together with its
+     * words is not announced. */
+    protected filled: string | null;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: PropertyValues<this>): void;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lintje-spinner': LintjeSpinner;
+    }
+}

package/dist-elements/types/primitives/status-dot/status-dot.d.ts

@@ -0,0 +1,33 @@
+/**
+ * `<lintje-status-dot>` — a status with its word; colour is never the only carrier (rule 13).
+ * Events: none.
+ */
+import { type TemplateResult } from 'lit';
+import { LintjeElement } from '../../core/element.js';
+export type StatusTone = 'complete' | 'delayed' | 'outage' | 'no-data';
+export declare const STATUS_LABEL: Record<StatusTone, string>;
+export declare class LintjeStatusDot extends LintjeElement {
+    static styles: import("lit").CSSResult;
+    static properties: {
+        tone: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        label: {
+            type: StringConstructor;
+        };
+        size: {
+            type: NumberConstructor;
+        };
+    };
+    tone: StatusTone;
+    /** Overrides the Dutch word for the tone. */
+    label?: string;
+    size: number;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lintje-status-dot': LintjeStatusDot;
+    }
+}