@davidsouther/jiffies 2026.24.0 → 2026.24.1

package/lib/esm/assert.d.ts

@@ -0,0 +1,26 @@
+type AssertMessage = string | (() => string);
+export declare class AssertionError extends Error {
+    constructor(message?: string);
+}
+/**
+ * Throw an error when a condition is not met.
+ */
+export declare function assert<_T extends true>(condition: boolean, message?: AssertMessage): undefined | never;
+/**
+ * Given a value, return it if it is not null nor undefined. Otherwise throw an
+ * error.
+ *
+ * @template T
+ * @returns {NonNullable<T>}
+ */
+export declare function assertExists<T>(t: T, message?: AssertMessage): NonNullable<T>;
+/**
+ * @param {*} n
+ * @returns string
+ */
+export declare function assertString(n: unknown, message?: AssertMessage): string;
+/**
+ * Compile time assertion that no value will used at this point in control flow.
+ */
+export declare function checkExhaustive(value: never, message?: AssertMessage): never;
+export {};

package/lib/esm/assert.js

@@ -0,0 +1,38 @@
+export class AssertionError extends Error {
+    constructor(message = "Assertion failed") {
+        super(message);
+    }
+}
+/**
+ * Throw an error when a condition is not met.
+ */
+export function assert(condition, message) {
+    if (!condition) {
+        throw new AssertionError(message instanceof Function ? message() : message);
+    }
+}
+/**
+ * Given a value, return it if it is not null nor undefined. Otherwise throw an
+ * error.
+ *
+ * @template T
+ * @returns {NonNullable<T>}
+ */
+export function assertExists(t, message = "Assertion failed: value does not exist") {
+    assert(t != null, message);
+    return t;
+}
+/**
+ * @param {*} n
+ * @returns string
+ */
+export function assertString(n, message = () => `Assertion failed: ${n} is not a string`) {
+    assert(typeof n === "string", message);
+    return n;
+}
+/**
+ * Compile time assertion that no value will used at this point in control flow.
+ */
+export function checkExhaustive(value, message = `Unexpected value ${value}`) {
+    throw new Error(message instanceof Function ? message() : message);
+}

package/lib/esm/awaitable.js

@@ -0,0 +1 @@
+export {};

package/lib/esm/case.d.ts

@@ -0,0 +1 @@
+export declare function dashCase(identifier: string): string;

package/lib/esm/case.js

@@ -0,0 +1,5 @@
+export function dashCase(identifier) {
+    return identifier
+        .replace(/([a-z])([A-Z])/g, (_, a, b) => `${a}-${b.toLowerCase()}`)
+        .replace(/ ([A-Z])/g, (_, b) => `-${b.toLowerCase()}`);
+}

package/lib/esm/components/accordion.d.ts

@@ -0,0 +1,5 @@
+import type { Attrs, DenormChildren } from "../dom/dom.ts";
+export type AccordionProps = {
+    summary: DenormChildren | DenormChildren[];
+} & Attrs<HTMLDetailsElement>;
+export declare function Accordion({ summary: summaryContent, ...attrs }: AccordionProps, ...bodyChildren: DenormChildren[]): HTMLDetailsElement;

package/lib/esm/components/accordion.js

@@ -0,0 +1,9 @@
+// Accordion emits the jiffies-css disclosure widget: details > summary + body.
+// Why: jiffies-css targets details > summary; the summary must be the first child
+// and the disclosed body follows it.
+import { details, summary } from "../dom/html.js";
+import { toChildren } from "./children.js";
+// Invariant: <summary> is always the first child; remaining children form the body.
+export function Accordion({ summary: summaryContent, ...attrs }, ...bodyChildren) {
+    return details(attrs, summary(...toChildren(summaryContent)), ...bodyChildren);
+}

package/lib/esm/components/alert.d.ts

@@ -0,0 +1,7 @@
+import type { Attrs, DenormChildren } from "../dom/dom.ts";
+export type AlertVariant = "warning" | "error" | "info" | "success" | "neutral";
+export type AlertProps = {
+    variant: AlertVariant;
+} & Attrs<HTMLElement>;
+export declare function Alert({ variant, ...attrs }: AlertProps, ...children: DenormChildren[]): HTMLElement;
+export declare function Chip({ variant, ...attrs }: AlertProps, ...children: DenormChildren[]): HTMLElement;

package/lib/esm/components/alert.js

@@ -0,0 +1,31 @@
+import { aside, small } from "../dom/html.js";
+// The variant vocabulary is this module's single source of truth; this map both
+// drives Alert's role derivation and stays exhaustive (a new variant without a
+// role entry is a type error).
+const ALERT_ROLE = {
+    warning: "alert",
+    error: "alert",
+    info: "status",
+    success: "status",
+    neutral: "status",
+};
+// Alert emits aside[role][data-variant] for banner-level messaging.
+// Why: jiffies-css styles alerts by role + data-variant, not by class. role and
+// data-variant are not in the typed attrs surface (role is constrained, data-* is
+// not a property), so they are set with setAttribute.
+// Invariant: warning|error => role="alert"; info|success|neutral => role="status";
+// data-variant always equals the variant; emits no class of its own, but
+// forwards a caller-supplied class (and other attrs) to the <aside>.
+export function Alert({ variant, ...attrs }, ...children) {
+    const el = aside(attrs, ...children);
+    el.setAttribute("role", ALERT_ROLE[variant]);
+    el.setAttribute("data-variant", variant);
+    return el;
+}
+// Chip emits small[data-variant] for inline status pills. Same variant vocabulary
+// as Alert, no role. Not exercised by the feature test.
+export function Chip({ variant, ...attrs }, ...children) {
+    const el = small(attrs, ...children);
+    el.setAttribute("data-variant", variant);
+    return el;
+}

package/lib/esm/components/button_bar.d.ts

@@ -0,0 +1,8 @@
+declare const ButtonBar: import("../dom/fc.ts").FCComponentCtor<{
+    value: T;
+    values: T[];
+    events: {
+        onSelect: (current: T) => void;
+    };
+}, object>;
+export default ButtonBar;

package/lib/esm/components/button_bar.js

@@ -0,0 +1,25 @@
+import { display } from "../display.js";
+import { FC } from "../dom/fc.js";
+import { fieldset, input, label } from "../dom/html.js";
+let buttonBarId = 1;
+const nextId = () => buttonBarId++;
+const ButtonBar = FC("button-bar", (_el, { value, values, events }) => {
+    const name = `button-bar-${nextId()}`;
+    return fieldset({ class: "input-group" }, ...values.flatMap((option) => {
+        const opt = `${option}`.replace(/\s+/g, "_").toLowerCase();
+        const id = `${name}-${opt}`;
+        return [
+            label({ role: "button", htmlFor: id }, input({
+                type: "radio",
+                id,
+                name,
+                value: option,
+                checked: option === value,
+                events: {
+                    change: () => events.onSelect(option),
+                },
+            }), display(option)),
+        ];
+    }));
+});
+export default ButtonBar;

package/lib/esm/components/card.d.ts

@@ -0,0 +1,8 @@
+import type { Attrs, DenormChildren } from "../dom/dom.ts";
+export interface CardParts {
+    header?: DenormChildren | DenormChildren[];
+    footer?: DenormChildren | DenormChildren[];
+}
+export type CardProps = CardParts & Attrs<HTMLElement>;
+export declare function Card(parts: CardProps, ...children: DenormChildren[]): HTMLElement;
+export declare function Panel(parts: CardProps, ...children: DenormChildren[]): HTMLElement;

package/lib/esm/components/card.js

@@ -0,0 +1,31 @@
+import { article, footer, header, main, section } from "../dom/html.js";
+import { toChildren } from "./children.js";
+// Build the shared header? / main / footer? sequence. `root` is the wrapper
+// element builder (article for Card, section for Panel); the only difference
+// between the two components is which wrapper they use.
+function cardLike(root, { header: headerPart, footer: footerPart, ...attrs }, children) {
+    const sections = [];
+    if (headerPart !== undefined) {
+        sections.push(header(...toChildren(headerPart)));
+    }
+    sections.push(main(...children));
+    if (footerPart !== undefined) {
+        sections.push(footer(...toChildren(footerPart)));
+    }
+    return root(attrs, ...sections);
+}
+// Card emits the jiffies-css elevated-card structure: article > header? / main / footer?.
+// Why: jiffies-css targets `article > main` for card body padding, so body content
+// must always be wrapped in <main>, never placed as a bare article child.
+// Invariants: <main> is always emitted (even with no parts); <header> only when
+// parts.header is set; <footer> only when parts.footer is set; child order is
+// always header, main, footer; emits no class of its own, but forwards
+// caller-supplied attrs (class, lang, ...) to the wrapper element.
+export function Card(parts, ...children) {
+    return cardLike(article, parts, children);
+}
+// Panel is the flat variant: section > header? / main / footer?. Same contract as
+// Card with `section` in place of `article`. Not exercised by the feature test.
+export function Panel(parts, ...children) {
+    return cardLike(section, parts, children);
+}

package/lib/esm/components/children.d.ts

@@ -0,0 +1,2 @@
+import type { DenormChildren } from "../dom/dom";
+export declare function toChildren(part: DenormChildren | DenormChildren[]): DenormChildren[];

package/{src/components/children.ts → lib/esm/components/children.js}

@@ -1,11 +1,7 @@
-import type { DenormChildren } from "../dom/dom";
-
 // Normalize a "one child or many" part-slot to a flat children array. Several
 // components accept either a single child or an array in the same position
 // (CardParts.header/footer, Accordion summary, PropertyEntry.value); this is the
 // one place that distinction is collapsed.
-export function toChildren(
-  part: DenormChildren | DenormChildren[],
-): DenormChildren[] {
-  return Array.isArray(part) ? part : [part];
+export function toChildren(part) {
+    return Array.isArray(part) ? part : [part];
 }

package/lib/esm/components/form.d.ts

@@ -0,0 +1,5 @@
+import type { Attrs, DenormChildren } from "../dom/dom.ts";
+export type FormGroupProps = {
+    legend: DenormChildren;
+} & Attrs<HTMLFieldSetElement>;
+export declare function FormGroup({ legend: legendLabel, ...attrs }: FormGroupProps, ...children: DenormChildren[]): HTMLFieldSetElement;

package/lib/esm/components/form.js

@@ -0,0 +1,13 @@
+import { fieldset, legend } from "../dom/html.js";
+// FormGroup emits fieldset[role=group] > legend + children — the jiffies-css
+// grouped-controls pattern. This is the structural form group; the richer form
+// controls (Input, Select, Radios, ...) live in src/dom/form/form.ts.
+// Why: jiffies-css targets fieldset[role=group] to lay grouped controls out as a
+// row; role is set with setAttribute since "group" is outside the typed role surface.
+// Invariant: <legend> is the first child; role="group"; emits no class of its own,
+// but forwards caller-supplied attrs (class, lang, ...) to the <fieldset>.
+export function FormGroup({ legend: legendLabel, ...attrs }, ...children) {
+    const group = fieldset(attrs, legend(legendLabel), ...children);
+    group.setAttribute("role", "group");
+    return group;
+}

package/{src/components/index.ts → lib/esm/components/index.d.ts}

@@ -1,5 +1,3 @@
-// Re-exports the public component surface. The feature test imports from here.
-
 export { Accordion, type AccordionProps } from "./accordion.ts";
 export { Alert, type AlertProps, type AlertVariant, Chip } from "./alert.ts";
 export { Card, type CardParts, type CardProps, Panel } from "./card.ts";
@@ -7,16 +5,5 @@ export { FormGroup, type FormGroupProps } from "./form.ts";
 export { type JiffiesCssLinkProps, jiffiesCssLink } from "./link.ts";
 export { Modal } from "./modal.ts";
 export { Breadcrumb, Nav, type NavItem, type NavProps } from "./nav.ts";
-export {
-  type PropertyEntry,
-  PropertySheet,
-  type PropertySheetProps,
-} from "./property.ts";
-export {
-  type StaticTabItem,
-  StaticTabList,
-  type StaticTabListProps,
-  type TabItem,
-  TabList,
-  type TabListProps,
-} from "./tabs.ts";
+export { type PropertyEntry, PropertySheet, type PropertySheetProps, } from "./property.ts";
+export { type StaticTabItem, StaticTabList, type StaticTabListProps, type TabItem, TabList, type TabListProps, } from "./tabs.ts";

package/lib/esm/components/index.js

@@ -0,0 +1,10 @@
+// Re-exports the public component surface. The feature test imports from here.
+export { Accordion } from "./accordion.js";
+export { Alert, Chip } from "./alert.js";
+export { Card, Panel } from "./card.js";
+export { FormGroup } from "./form.js";
+export { jiffiesCssLink } from "./link.js";
+export { Modal } from "./modal.js";
+export { Breadcrumb, Nav } from "./nav.js";
+export { PropertySheet, } from "./property.js";
+export { StaticTabList, TabList, } from "./tabs.js";

package/lib/esm/components/inline_edit.d.ts

@@ -0,0 +1,12 @@
+export interface InlineEditState {
+    mode: number;
+    value: string;
+}
+export declare const InlineEdit: import("../dom/fc.ts").FCComponentCtor<{
+    mode?: number;
+    value: string;
+    events: {
+        change: (value: string) => void;
+    };
+}, InlineEditState>;
+export default InlineEdit;

package/lib/esm/components/inline_edit.js

@@ -0,0 +1,48 @@
+import { width } from "../dom/css/sizing.js";
+import { FC, State } from "../dom/fc.js";
+import { input, span } from "../dom/html.js";
+const Mode = { VIEW: 0, EDIT: 1 };
+export const InlineEdit = FC("inline-edit", (el, { mode = Mode.VIEW, value, events }) => {
+    el[State] ??= { mode, value };
+    const state = el[State];
+    const render = () => {
+        switch (state.mode) {
+            case Mode.EDIT:
+                return edit();
+            case Mode.VIEW:
+                return view();
+            default:
+                return span();
+        }
+    };
+    const view = () => span({
+        style: { cursor: "text", ...width("full", "inline") },
+        events: {
+            click: () => {
+                state.mode = Mode.EDIT;
+                el.update(render());
+            },
+        },
+    }, state.value ?? "");
+    const edit = () => {
+        const edit = span({ style: { display: "block", position: "relative" } }, input({
+            style: {
+                zIndex: "10",
+                position: "absolute",
+                left: "0",
+                marginTop: "-0.375rem",
+            },
+            events: {
+                blur: ({ target }) => events.change(target?.value ?? ""),
+            },
+            type: "text",
+            value: state.value ?? "",
+        }), "\u00a0");
+        setTimeout(() => {
+            edit.dispatchEvent(new Event("focus"));
+        });
+        return edit;
+    };
+    return render();
+});
+export default InlineEdit;

package/lib/esm/components/link.d.ts

@@ -0,0 +1,5 @@
+import type { Attrs } from "../dom/dom.ts";
+export type JiffiesCssLinkProps = {
+    href?: string;
+} & Attrs<HTMLLinkElement>;
+export declare function jiffiesCssLink({ href, ...attrs }?: JiffiesCssLinkProps): HTMLLinkElement;

package/lib/esm/components/link.js

@@ -0,0 +1,11 @@
+import { link } from "../dom/html.js";
+const JIFFIES_CSS_CDN = "https://unpkg.com/@davidsouther/jiffies-css/dist/index.css";
+// jiffiesCssLink builds the <link> a page puts in <head> to load jiffies-css.
+// Why: callers must never hand-write the CDN URL or accidentally point at Pico;
+// this is the single sanctioned source of the stylesheet href.
+// Invariant: returns a <link rel="stylesheet"> whose href contains "jiffies-css"
+// and never "pico". Default href is the unpkg CDN; callers bundling locally pass
+// their own href.
+export function jiffiesCssLink({ href = JIFFIES_CSS_CDN, ...attrs } = {}) {
+    return link({ ...attrs, rel: "stylesheet", href });
+}

package/lib/esm/components/logger.d.ts

@@ -0,0 +1,6 @@
+import { type Logger } from "../log.ts";
+export interface HTMLLogger extends Logger {
+    root: Element;
+}
+export declare function isHTMLLogger(logger: Logger): logger is HTMLLogger;
+export declare function makeHTMLLogger(name: string): HTMLLogger;

package/lib/esm/components/logger.js

@@ -0,0 +1,22 @@
+import { display } from "../display.js";
+import { code, div, li, pre, span, ul } from "../dom/html.js";
+import { LEVEL } from "../log.js";
+export function isHTMLLogger(logger) {
+    return logger.root !== undefined;
+}
+export function makeHTMLLogger(name) {
+    const log = ul();
+    const root = div(div(span(name)), log);
+    const logger = { level: LEVEL.INFO, root };
+    function append(message) {
+        log.appendChild(li(pre(code(message))));
+    }
+    const logAt = (level) => (message) => level >= (logger.level ?? LEVEL.ERROR)
+        ? append(display(message))
+        : undefined;
+    logger.debug = logAt(LEVEL.VERBOSE);
+    logger.info = logAt(LEVEL.INFO);
+    logger.warn = logAt(LEVEL.WARN);
+    logger.error = logAt(LEVEL.ERROR);
+    return logger;
+}

package/lib/esm/components/modal.d.ts

@@ -0,0 +1,2 @@
+import type { DenormAttrs, DenormChildren } from "../dom/dom.ts";
+export declare function Modal(attrs?: DenormAttrs<HTMLDialogElement>, ...children: DenormChildren[]): HTMLDialogElement;

package/{src/components/modal.ts → lib/esm/components/modal.js}

@@ -1,15 +1,10 @@
-import type { DenormAttrs, DenormChildren } from "../dom/dom.ts";
-import { dialog } from "../dom/html.ts";
-
+import { dialog } from "../dom/html.js";
 // Modal emits a <dialog>. It has no domain props, so its leading argument is the
 // denormalized attrs of any html builder: a plain object is attrs (class, lang,
 // ...) applied to the <dialog>, anything else is the first child. The element
 // already carries .update() (attached by up()), so callers toggle visibility
 // later with modal.update({ open: true }) / modal.update({ open: false }).
 // Invariant: returns a <dialog> whose children are the supplied content.
-export function Modal(
-  attrs?: DenormAttrs<HTMLDialogElement>,
-  ...children: DenormChildren[]
-): HTMLDialogElement {
-  return dialog(attrs, ...children);
+export function Modal(attrs, ...children) {
+    return dialog(attrs, ...children);
 }

package/lib/esm/components/nav.d.ts

@@ -0,0 +1,11 @@
+import type { Attrs } from "../dom/dom.ts";
+export interface NavItem {
+    label: string;
+    href?: string;
+    current?: boolean;
+}
+export type NavProps = {
+    items: NavItem[];
+} & Attrs<HTMLElement>;
+export declare function Nav({ items, ...attrs }: NavProps): HTMLElement;
+export declare function Breadcrumb({ items, ...attrs }: NavProps): HTMLElement;

package/lib/esm/components/nav.js

@@ -0,0 +1,27 @@
+import { a, li, nav, ol, span } from "../dom/html.js";
+// One <li><a> per item. aria-current is set with setAttribute (aria-* is not in
+// the typed attrs surface); the anchor carries href only when the item supplies one.
+function navItem(item) {
+    const anchor = a(item.href ? { href: item.href } : {}, item.label);
+    if (item.current) {
+        anchor.setAttribute("aria-current", "page");
+    }
+    return li(anchor);
+}
+function navList(items) {
+    return ol(...items.map(navItem));
+}
+// Nav emits nav > ol > li > a, one <li> per item.
+// Why: jiffies-css targets the nav > ol > li > a chain; a bare ul > li > a is unstyled.
+// Invariants: every item is an <a> inside an <li> inside the single <ol>; an item
+// with current:true gets aria-current="page" on its <a>; emits no class of its own,
+// but forwards caller-supplied attrs (class, lang, ...) to the <nav>.
+export function Nav({ items, ...attrs }) {
+    return nav(attrs, navList(items));
+}
+// Breadcrumb wraps the same nav > ol > li chain in a <span> (span > nav > ol > li),
+// the jiffies-css breadcrumb selector. Same file, same pattern. Not exercised by
+// the feature test.
+export function Breadcrumb({ items, ...attrs }) {
+    return span(attrs, nav(navList(items)));
+}

package/lib/esm/components/property.d.ts

@@ -0,0 +1,9 @@
+import type { Attrs, DenormChildren } from "../dom/dom.ts";
+export interface PropertyEntry {
+    label: string;
+    value: DenormChildren | DenormChildren[];
+}
+export type PropertySheetProps = {
+    entries: PropertyEntry[];
+} & Attrs<HTMLDListElement>;
+export declare function PropertySheet({ entries, ...attrs }: PropertySheetProps): HTMLDListElement;

package/lib/esm/components/property.js

@@ -0,0 +1,16 @@
+import { dd, dl, dt } from "../dom/html.js";
+import { toChildren } from "./children.js";
+// PropertySheet emits dl > (dt + dd)* — the jiffies-css property-sheet pattern,
+// one dt/dd pair per entry.
+// Why: jiffies-css targets dl > dt + dd for aligned label/value rows; a table or
+// div grid is unstyled.
+// Invariant: exactly one <dt> (the label) and one <dd> (the value) per entry, in
+// entry order; emits no class of its own, but forwards caller-supplied attrs
+// (class, lang, ...) to the <dl>.
+export function PropertySheet({ entries, ...attrs }) {
+    const rows = [];
+    for (const entry of entries) {
+        rows.push(dt(entry.label), dd(...toChildren(entry.value)));
+    }
+    return dl(attrs, ...rows);
+}

package/lib/esm/components/select.d.ts

@@ -0,0 +1,10 @@
+import type { EventHandler } from "../dom/dom.ts";
+export declare const Select: import("../dom/fc.ts").FCComponentCtor<{
+    name: string;
+    value: string;
+    events: {
+        change: EventHandler;
+    };
+    disabled: boolean;
+    options: [string, string][];
+}, object>;

package/lib/esm/components/select.js

@@ -0,0 +1,3 @@
+import { FC } from "../dom/fc.js";
+import { option, select } from "../dom/html.js";
+export const Select = FC("jiffies-select", (_el, { name, events: { change }, disabled, value, options }) => select({ name, events: { change }, disabled }, ...options.map(([v, name]) => option({ value: v, selected: value === v }, `${name}`))));

package/lib/esm/components/tabs.d.ts

@@ -0,0 +1,20 @@
+import type { Attrs } from "../dom/dom.ts";
+export interface TabItem {
+    label: string;
+    selected?: boolean;
+    onSelect?: (e: Event) => void;
+}
+export interface StaticTabItem {
+    id: string;
+    label: string;
+    selected?: boolean;
+}
+export type TabListProps = {
+    tabs: TabItem[];
+} & Attrs<HTMLDivElement>;
+export type StaticTabListProps = {
+    name: string;
+    tabs: StaticTabItem[];
+} & Attrs<HTMLDivElement>;
+export declare function TabList({ tabs, ...attrs }: TabListProps): HTMLElement;
+export declare function StaticTabList({ name, tabs, ...attrs }: StaticTabListProps): HTMLElement;

package/lib/esm/components/tabs.js

@@ -0,0 +1,45 @@
+import { button, div, input, label } from "../dom/html.js";
+// Shared tablist container: div[role=tablist] holding the supplied tab controls.
+// Both tab variants emit the same container; this is the one place the role string
+// lives (matching the cardLike/navList helpers elsewhere in the module).
+function tablist(attrs, ...children) {
+    const list = div(attrs, ...children);
+    list.setAttribute("role", "tablist");
+    return list;
+}
+// TabList emits the JS-driven tab strip: div[role=tablist] > button[role=tab].
+// Why: jiffies-css targets [role=tablist] > button[role=tab][aria-selected]; the
+// caller owns which tab is active and re-renders via .update() on the element.
+// Invariant: role="tablist" on the container; every tab is a button[role=tab];
+// selected:true sets aria-selected="true"; onSelect is wired as a click handler.
+export function TabList({ tabs, ...attrs }) {
+    const buttons = tabs.map((tab) => {
+        const btn = button(tab.onSelect
+            ? { type: "button", events: { click: tab.onSelect } }
+            : { type: "button" }, tab.label);
+        btn.setAttribute("role", "tab");
+        if (tab.selected) {
+            btn.setAttribute("aria-selected", "true");
+        }
+        return btn;
+    });
+    return tablist(attrs, ...buttons);
+}
+// StaticTabList emits the CSS-only tab strip: div[role=tablist] >
+// (input[type=radio][name][id] + label[role=tab][for])*. The shared name groups
+// the radios; :checked drives the active panel with zero JavaScript.
+// Invariant: role="tablist" on the container; one radio + one label[role=tab] per
+// tab; id/for pair come from StaticTabItem.id; selected:true sets defaultChecked.
+export function StaticTabList({ name, tabs, ...attrs }) {
+    const children = tabs.flatMap((tab) => {
+        const radio = input({ type: "radio", name, id: tab.id });
+        if (tab.selected) {
+            radio.defaultChecked = true;
+        }
+        const lbl = label(tab.label);
+        lbl.setAttribute("for", tab.id);
+        lbl.setAttribute("role", "tab");
+        return [radio, lbl];
+    });
+    return tablist(attrs, ...children);
+}

package/lib/esm/components/virtual_scroll.d.ts

@@ -0,0 +1,42 @@
+export interface VirtualScrollSettings {
+    minIndex: number;
+    maxIndex: number;
+    startIndex: number;
+    itemHeight: number;
+    count: number;
+    tolerance: number;
+}
+export type VirtualScrollDataAdapter<T> = (offset: number, limit: number) => Iterable<T>;
+export declare function arrayAdapter<T>(data: T[]): VirtualScrollDataAdapter<T>;
+export interface VirtualScrollProps<T, U extends HTMLElement> {
+    settings: Partial<VirtualScrollSettings>;
+    get: VirtualScrollDataAdapter<T>;
+    row: (t: T) => U;
+}
+export declare function fillVirtualScrollSettings(settings: Partial<VirtualScrollSettings>): VirtualScrollSettings;
+export declare function initialState<T>(settings: VirtualScrollSettings): VirtualScrollState<T>;
+export declare function getData<T>(minIndex: number, maxIndex: number, offset: number, limit: number, get: VirtualScrollDataAdapter<T>): T[];
+export declare function doScroll<T>(scrollTop: number, state: VirtualScrollState<T>, get: VirtualScrollDataAdapter<T>): {
+    scrollTop: number;
+    topPaddingHeight: number;
+    bottomPaddingHeight: number;
+    data: T[];
+};
+interface VirtualScrollState<T, U extends HTMLElement = HTMLElement> {
+    settings: VirtualScrollSettings;
+    scrollTop: number;
+    bufferedItems: number;
+    totalHeight: number;
+    viewportHeight: number;
+    topPaddingHeight: number;
+    bottomPaddingHeight: number;
+    toleranceHeight: number;
+    data: T[];
+    rows: U[];
+}
+export interface VirtualScroll<T, U extends HTMLElement> {
+    state: VirtualScrollState<T>;
+    rows: U[];
+}
+export declare const VirtualScroll: import("../dom/fc.ts").FCComponentCtor<VirtualScrollProps<unknown, HTMLElement>, VirtualScrollState<unknown, HTMLElement>>;
+export default VirtualScroll;