lintje 0.1.1

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

@@ -0,0 +1,120 @@
+/**
+ * `<lintje-tile>` — the frame around a chart, map or table. Top to bottom: header, notice, intro,
+ * legend, content, legend (`legend-below`), footnote. `slot="aside"` puts a key figure beside the
+ * content, above it below 768 px. Hover actions show on focus too, always on touch screens.
+ *
+ * Events: `lintje-tile-expand` and `lintje-tile-download`; the host acts on them.
+ */
+import { type PropertyValues, type TemplateResult } from 'lit';
+import { LintjeGridItemElement } from '../shared/grid-item-element.js';
+import '../button/button.js';
+import '../icon-button/icon-button.js';
+import '../status-dot/status-dot.js';
+import '../skeleton/skeleton.js';
+export type ContentState = 'ready' | 'loading' | 'empty' | 'error';
+export declare class LintjeTile extends LintjeGridItemElement {
+    #private;
+    static styles: import("lit").CSSResult[];
+    static properties: {
+        heading: {
+            type: StringConstructor;
+        };
+        icon: {
+            type: StringConstructor;
+        };
+        subtitle: {
+            type: StringConstructor;
+        };
+        intro: {
+            type: StringConstructor;
+        };
+        footnote: {
+            type: StringConstructor;
+        };
+        footnoteSlotted: {
+            state: boolean;
+        };
+        asideSlotted: {
+            state: boolean;
+        };
+        legendBelow: {
+            type: BooleanConstructor;
+            attribute: string;
+        };
+        expandable: {
+            type: BooleanConstructor;
+        };
+        download: {
+            type: BooleanConstructor;
+        };
+        state: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        message: {
+            type: StringConstructor;
+        };
+        lastKnown: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        contentHeight: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        contentScroll: {
+            type: BooleanConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        flush: {
+            type: BooleanConstructor;
+        };
+        filled: {
+            state: boolean;
+        };
+    };
+    heading?: string;
+    /** An icon file name (`dist-icons/`), drawn before the title. Decorative. */
+    icon?: string;
+    subtitle?: string;
+    intro?: string;
+    /** The line under the rule at the bottom; richer content goes in `slot="footnote"`. */
+    footnote?: string;
+    /** The `<p>` stays in the template, hidden when empty: an unrendered slot reports nothing. */
+    footnoteSlotted: boolean;
+    asideSlotted: boolean;
+    legendBelow: boolean;
+    expandable: boolean;
+    download: boolean;
+    /** `loading`, `empty` and `error` stand in for the content; the tile keeps its size. */
+    state: ContentState;
+    message?: string;
+    lastKnown?: string;
+    contentHeight: string;
+    /** The tile has a height of its own: what does not fit scrolls inside it. */
+    contentScroll: boolean;
+    /** The content runs to the tile's edges and indents what it draws by the tile's padding: rows
+     * whose lines reach the frame, as a work list's. */
+    flush: boolean;
+    /** The words in the loading or error live region, or `null`; filled a frame after the region
+     * is drawn, because a region that arrives with its text is not announced. */
+    protected filled: string | null;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** What the state's live region says, or `null` for a state without one. */
+    private get regionText();
+    protected willUpdate(changed: PropertyValues<this>): void;
+    /** A region that stands empty: its words go in on the next frame. */
+    protected updated(changed: PropertyValues<this>): void;
+    private static filled;
+    private onFootnoteChange;
+    private onAsideChange;
+    protected render(): TemplateResult;
+    private content;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lintje-tile': LintjeTile;
+    }
+}

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

@@ -0,0 +1,54 @@
+/**
+ * `<lintje-tooltip>` — one short sentence about the element it wraps. Shows 300 ms after the
+ * pointer rests, at once on keyboard focus; the pointer can move onto it, and Escape anywhere
+ * hides it. Never the only place for something
+ * the reader must know. The text is the wrapped element's description; `no-describe` leaves
+ * that out when it is already its name.
+ */
+import { type PropertyDeclarations, type PropertyValues, type TemplateResult } from 'lit';
+import { LintjeElement } from '../../core/element.js';
+import { type Place } from '../shared/place.js';
+export declare const TOOLTIP_DELAY = 300;
+/** How long the bubble waits after the pointer leaves: time to cross the gap onto it. */
+export declare const TOOLTIP_LINGER = 150;
+export declare class LintjeTooltip extends LintjeElement {
+    #private;
+    static styles: import("lit").CSSResult;
+    static properties: PropertyDeclarations;
+    text: string;
+    /** The text is already the element's accessible name. */
+    noDescribe: boolean;
+    open: boolean;
+    protected spot: Place | null;
+    private timer;
+    private reflowFrame;
+    private get target();
+    private show;
+    private hide;
+    /** The bubble stands in the shadow root, so the pointer on it is still inside the host. */
+    private readonly onPointerEnter;
+    private readonly onPointerLeave;
+    private readonly onFocusIn;
+    private readonly onFocusOut;
+    /** On the document: a tooltip opened by the pointer is dismissed wherever the focus is. */
+    private readonly onKeydown;
+    /** Fixed to the viewport, so it is placed again when what holds its element scrolls. */
+    private readonly onReflow;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private measure;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    protected updated(changed: PropertyValues<this>): void;
+    /**
+     * An id cannot cross a shadow root, so the description goes on the element as text. An element
+     * with a `description` property (`lintje-button`, `lintje-icon-button`) is a host around its
+     * control: the property carries it to that control, where a screen reader reads it.
+     */
+    private describe;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lintje-tooltip': LintjeTooltip;
+    }
+}

package/dist-elements/types/tokens/colors.d.ts

@@ -0,0 +1,19 @@
+/**
+ * The data-colour names: the one runtime list.
+ *
+ * The values live in `tokens.css` and only the browser resolves them; what crosses between
+ * modules and from a host is the NAME. The map's series keys, the charts' colour table, the
+ * KPI's accents and the unions of the contract derive from this array, so a colour is added
+ * here and in `tokens.css`.
+ *
+ * The order is canonical: the map's shapes stand beside it position for position. A colour is
+ * appended, never inserted, or every series after it changes shape. The tests beside the list
+ * restate the names instead of reading them from here: a test that takes its expectation from
+ * what it guards guards nothing.
+ */
+export declare const DATA_COLORS: readonly ['sky-blue', 'dark-yellow', 'red', 'green', 'mint-green', 'violet', 'orange', 'pink', 'dark-green', 'purple', 'ruby-red', 'yellow', 'dark-brown', 'brown', 'dark-blue', 'light-blue', 'moss-green'];
+/** One variable's colour, named after the Rijkshuisstijl colour it is (rule 10). */
+export type DataColor = (typeof DATA_COLORS)[number];
+export declare function isDataColor(value: unknown): value is DataColor;
+/** The component token a data colour draws: `sky-blue` → `var(--color-chart-sky-blue)`. */
+export declare function chartToken(color: DataColor): string;