@f-ewald/components 1.11.0 → 1.13.0

package/dist/tree-view.js

@@ -0,0 +1,200 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 { LitElement, css, html, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { repeat } from "lit/directives/repeat.js";
+import { iconChevronDown, iconChevronRight } from "./icons.js";
+import { tokens } from "./tokens.js";
+/**
+ * A generic, presentational tree shell: renders `nodes` recursively, one row
+ * per node, with each row's content produced by `renderNode` (default: plain
+ * label). Modeled on `data-table`'s headless pattern — knows nothing about
+ * what a node's `data` means beyond what `renderNode` does with it.
+ *
+ * A node with a `children` array (even empty) is a folder: clicking or
+ * activating its row toggles expand/collapse instead of firing `node-click`.
+ * A node with no `children` is a leaf: clicking or activating its row fires
+ * `node-click`. Folders start collapsed; set `default-expanded` to start
+ * every folder expanded instead. Expansion state is otherwise managed
+ * internally and untouched by later `nodes` updates, so a user's manual
+ * toggles survive a data refresh.
+ *
+ * @element tree-view
+ * @fires node-click - A leaf row was activated; detail is `{ id, data }`.
+ */
+let TreeView = class TreeView extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Tree data; opaque to this component beyond what `renderNode` does with it. */
+        this.nodes = [];
+        /** Produces a row's rendered content for `node`. Default: plain label text. */
+        this.renderNode = (node) => node.label;
+        /** Start every folder expanded instead of the default all-collapsed. */
+        this.defaultExpanded = false;
+        this.expanded = new Set();
+        this.#initializedExpansion = false;
+    }
+    static { this.styles = [
+        tokens,
+        css `
+      :host {
+        display: block;
+        font-family: var(
+          --ui-font,
+          ui-sans-serif,
+          system-ui,
+          sans-serif,
+          "Apple Color Emoji",
+          "Segoe UI Emoji",
+          "Segoe UI Symbol",
+          "Noto Color Emoji"
+        );
+        font-size: var(--ui-font-size-sm, 0.75rem);
+      }
+      .row {
+        display: flex;
+        align-items: center;
+        gap: 0.25rem;
+        padding: 0.25rem 0.5rem;
+        border-radius: var(--ui-radius-sm, 0.25rem);
+        color: var(--ui-text, #0f172a);
+        cursor: pointer;
+      }
+      .row:hover {
+        background: var(--ui-surface-muted, #f8fafc);
+      }
+      .row:focus-visible {
+        outline: none;
+        box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));
+      }
+      .toggle {
+        display: inline-flex;
+        flex-shrink: 0;
+        width: 1rem;
+        height: 1rem;
+        align-items: center;
+        justify-content: center;
+        color: var(--ui-text-muted, #64748b);
+      }
+      .content {
+        min-width: 0;
+        flex: 1;
+      }
+      @media (forced-colors: active) {
+        .row:focus-visible {
+          outline: 2px solid CanvasText;
+          outline-offset: -2px;
+          box-shadow: none;
+        }
+      }
+    `,
+    ]; }
+    #initializedExpansion;
+    willUpdate(changed) {
+        if (!changed.has("nodes") || this.#initializedExpansion)
+            return;
+        this.#initializedExpansion = true;
+        if (!this.defaultExpanded)
+            return;
+        const all = new Set();
+        const collect = (list) => {
+            for (const node of list) {
+                if (!node.children)
+                    continue;
+                all.add(node.id);
+                collect(node.children);
+            }
+        };
+        collect(this.nodes);
+        this.expanded = all;
+    }
+    #toggle(id) {
+        const next = new Set(this.expanded);
+        if (next.has(id))
+            next.delete(id);
+        else
+            next.add(id);
+        this.expanded = next;
+    }
+    #activate(node) {
+        if (node.children) {
+            this.#toggle(node.id);
+            return;
+        }
+        this.dispatchEvent(new CustomEvent("node-click", {
+            detail: { id: node.id, data: node.data },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    #onKeydown(node, e) {
+        if (e.key !== "Enter" && e.key !== " ")
+            return;
+        if (e.target !== e.currentTarget)
+            return;
+        e.preventDefault();
+        this.#activate(node);
+    }
+    #onRowClick(node, e) {
+        if (this.#isNestedInteractive(e.composedPath(), e.currentTarget))
+            return;
+        this.#activate(node);
+    }
+    #isNestedInteractive(path, row) {
+        const selector = "a, button, input, select, textarea, summary, [contenteditable], [role='button'], [role='link'], [tabindex]";
+        for (const target of path) {
+            if (target === row)
+                return false;
+            if (target instanceof HTMLElement && target.matches(selector))
+                return true;
+        }
+        return false;
+    }
+    #renderNode(node, depth) {
+        const isFolder = !!node.children;
+        const isOpen = isFolder && this.expanded.has(node.id);
+        return html `
+      <div
+        class="row"
+        role=${isFolder ? "button" : "link"}
+        aria-expanded=${isFolder ? String(isOpen) : nothing}
+        tabindex="0"
+        style="padding-left: ${depth * 1.25}rem"
+        @click=${(e) => this.#onRowClick(node, e)}
+        @keydown=${(e) => this.#onKeydown(node, e)}
+      >
+        <span class="toggle" aria-hidden="true">
+          ${isFolder ? (isOpen ? iconChevronDown(14) : iconChevronRight(14)) : nothing}
+        </span>
+        <span class="content">${this.renderNode(node)}</span>
+      </div>
+      ${isFolder && isOpen
+            ? repeat(node.children, (child) => child.id, (child) => this.#renderNode(child, depth + 1))
+            : nothing}
+    `;
+    }
+    render() {
+        return repeat(this.nodes, (node) => node.id, (node) => this.#renderNode(node, 0));
+    }
+};
+__decorate([
+    property({ attribute: false })
+], TreeView.prototype, "nodes", void 0);
+__decorate([
+    property({ attribute: false })
+], TreeView.prototype, "renderNode", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "default-expanded" })
+], TreeView.prototype, "defaultExpanded", void 0);
+__decorate([
+    state()
+], TreeView.prototype, "expanded", void 0);
+TreeView = __decorate([
+    customElement("tree-view")
+], TreeView);
+export { TreeView };
+//# sourceMappingURL=tree-view.js.map

package/dist/tree-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-view.js","sourceRoot":"","sources":["../src/tree-view.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, css, html, nothing, type TemplateResult } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { repeat } from \"lit/directives/repeat.js\";\nimport { iconChevronDown, iconChevronRight } from \"./icons.js\";\nimport { tokens } from \"./tokens.js\";\n\n/** One tree node: a folder when `children` is set (even `[]`), a leaf otherwise. */\nexport interface TreeNode {\n  id: string;\n  label: string;\n  children?: TreeNode[];\n  data?: unknown;\n}\n\n/**\n * A generic, presentational tree shell: renders `nodes` recursively, one row\n * per node, with each row's content produced by `renderNode` (default: plain\n * label). Modeled on `data-table`'s headless pattern — knows nothing about\n * what a node's `data` means beyond what `renderNode` does with it.\n *\n * A node with a `children` array (even empty) is a folder: clicking or\n * activating its row toggles expand/collapse instead of firing `node-click`.\n * A node with no `children` is a leaf: clicking or activating its row fires\n * `node-click`. Folders start collapsed; set `default-expanded` to start\n * every folder expanded instead. Expansion state is otherwise managed\n * internally and untouched by later `nodes` updates, so a user's manual\n * toggles survive a data refresh.\n *\n * @element tree-view\n * @fires node-click - A leaf row was activated; detail is `{ id, data }`.\n */\n@customElement(\"tree-view\")\nexport class TreeView extends LitElement {\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: block;\n        font-family: var(\n          --ui-font,\n          ui-sans-serif,\n          system-ui,\n          sans-serif,\n          \"Apple Color Emoji\",\n          \"Segoe UI Emoji\",\n          \"Segoe UI Symbol\",\n          \"Noto Color Emoji\"\n        );\n        font-size: var(--ui-font-size-sm, 0.75rem);\n      }\n      .row {\n        display: flex;\n        align-items: center;\n        gap: 0.25rem;\n        padding: 0.25rem 0.5rem;\n        border-radius: var(--ui-radius-sm, 0.25rem);\n        color: var(--ui-text, #0f172a);\n        cursor: pointer;\n      }\n      .row:hover {\n        background: var(--ui-surface-muted, #f8fafc);\n      }\n      .row:focus-visible {\n        outline: none;\n        box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));\n      }\n      .toggle {\n        display: inline-flex;\n        flex-shrink: 0;\n        width: 1rem;\n        height: 1rem;\n        align-items: center;\n        justify-content: center;\n        color: var(--ui-text-muted, #64748b);\n      }\n      .content {\n        min-width: 0;\n        flex: 1;\n      }\n      @media (forced-colors: active) {\n        .row:focus-visible {\n          outline: 2px solid CanvasText;\n          outline-offset: -2px;\n          box-shadow: none;\n        }\n      }\n    `,\n  ];\n\n  /** Tree data; opaque to this component beyond what `renderNode` does with it. */\n  @property({ attribute: false }) nodes: TreeNode[] = [];\n  /** Produces a row's rendered content for `node`. Default: plain label text. */\n  @property({ attribute: false }) renderNode: (node: TreeNode) => unknown = (node) => node.label;\n  /** Start every folder expanded instead of the default all-collapsed. */\n  @property({ type: Boolean, attribute: \"default-expanded\" }) defaultExpanded = false;\n\n  @state() private expanded = new Set<string>();\n  #initializedExpansion = false;\n\n  override willUpdate(changed: Map<string, unknown>): void {\n    if (!changed.has(\"nodes\") || this.#initializedExpansion) return;\n    this.#initializedExpansion = true;\n    if (!this.defaultExpanded) return;\n    const all = new Set<string>();\n    const collect = (list: TreeNode[]) => {\n      for (const node of list) {\n        if (!node.children) continue;\n        all.add(node.id);\n        collect(node.children);\n      }\n    };\n    collect(this.nodes);\n    this.expanded = all;\n  }\n\n  #toggle(id: string): void {\n    const next = new Set(this.expanded);\n    if (next.has(id)) next.delete(id);\n    else next.add(id);\n    this.expanded = next;\n  }\n\n  #activate(node: TreeNode): void {\n    if (node.children) {\n      this.#toggle(node.id);\n      return;\n    }\n    this.dispatchEvent(\n      new CustomEvent(\"node-click\", {\n        detail: { id: node.id, data: node.data },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  #onKeydown(node: TreeNode, e: KeyboardEvent): void {\n    if (e.key !== \"Enter\" && e.key !== \" \") return;\n    if (e.target !== e.currentTarget) return;\n    e.preventDefault();\n    this.#activate(node);\n  }\n\n  #onRowClick(node: TreeNode, e: MouseEvent): void {\n    if (this.#isNestedInteractive(e.composedPath(), e.currentTarget)) return;\n    this.#activate(node);\n  }\n\n  #isNestedInteractive(path: EventTarget[], row: EventTarget | null): boolean {\n    const selector =\n      \"a, button, input, select, textarea, summary, [contenteditable], [role='button'], [role='link'], [tabindex]\";\n    for (const target of path) {\n      if (target === row) return false;\n      if (target instanceof HTMLElement && target.matches(selector)) return true;\n    }\n    return false;\n  }\n\n  #renderNode(node: TreeNode, depth: number): TemplateResult {\n    const isFolder = !!node.children;\n    const isOpen = isFolder && this.expanded.has(node.id);\n    return html`\n      <div\n        class=\"row\"\n        role=${isFolder ? \"button\" : \"link\"}\n        aria-expanded=${isFolder ? String(isOpen) : nothing}\n        tabindex=\"0\"\n        style=\"padding-left: ${depth * 1.25}rem\"\n        @click=${(e: MouseEvent) => this.#onRowClick(node, e)}\n        @keydown=${(e: KeyboardEvent) => this.#onKeydown(node, e)}\n      >\n        <span class=\"toggle\" aria-hidden=\"true\">\n          ${isFolder ? (isOpen ? iconChevronDown(14) : iconChevronRight(14)) : nothing}\n        </span>\n        <span class=\"content\">${this.renderNode(node)}</span>\n      </div>\n      ${isFolder && isOpen\n        ? repeat(\n            node.children!,\n            (child) => child.id,\n            (child) => this.#renderNode(child, depth + 1),\n          )\n        : nothing}\n    `;\n  }\n\n  override render() {\n    return repeat(\n      this.nodes,\n      (node) => node.id,\n      (node) => this.#renderNode(node, 0),\n    );\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"tree-view\": TreeView;\n  }\n}\n"]}

package/dist/ui-checkbox.d.ts

@@ -0,0 +1,49 @@
+import { LitElement, type PropertyValues } from "lit";
+/**
+ * A form-associated boolean checkbox, usable standalone or inside a native
+ * `<form>`. Submits `name=on` when checked (matching native
+ * `<input type="checkbox">` semantics) and participates fully in form
+ * `reset()`, ancestor `<fieldset disabled>`, and `required` validity.
+ *
+ * Renders a native `<input type="checkbox">` wrapped in a `<label>`, styled
+ * via `:has()` on the wrapping label (matching `radio-pills`/`radio-cards`)
+ * rather than styling the native input directly; the checkbox itself renders
+ * at `1rem`, matching the existing radio-input convention.
+ *
+ * @element ui-checkbox
+ * @fires change - The checkbox was toggled by the user, in either direction;
+ *   detail: `{ checked }`. Programmatic `checked` assignments do not fire it.
+ */
+export declare class UiCheckbox extends LitElement {
+    #private;
+    static formAssociated: boolean;
+    static styles: import("lit").CSSResult[];
+    /** Whether the box is checked. */
+    checked: boolean;
+    /** Visual "partial selection" state; cleared on the next user interaction. */
+    indeterminate: boolean;
+    /** Disables interaction; merged with an ancestor `<fieldset disabled>`. */
+    disabled: boolean;
+    /** Marks the control invalid via `ElementInternals` while unchecked. */
+    required: boolean;
+    /** Form field name; submitted as `name=on` only while checked. */
+    name: string;
+    /** Visible label text rendered next to the box. */
+    label: string;
+    private _formDisabled;
+    protected willUpdate(_changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
+    /** Restores the checked state captured at first render, per the form contract. */
+    formResetCallback(): void;
+    /** Mirrors an ancestor fieldset's disabled state. */
+    formDisabledCallback(disabled: boolean): void;
+    /** Restores the checked state from saved form state (bfcache/autofill). */
+    formStateRestoreCallback(state: string | File | FormData | null): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ui-checkbox": UiCheckbox;
+    }
+}
+//# sourceMappingURL=ui-checkbox.d.ts.map

package/dist/ui-checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-checkbox.d.ts","sourceRoot":"","sources":["../src/ui-checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAKjE;;;;;;;;;;;;;;GAcG;AACH,qBACa,UAAW,SAAQ,UAAU;;IACxC,MAAM,CAAC,cAAc,UAAQ;IAE7B,OAAgB,MAAM,4BAkEpB;IAEF,kCAAkC;IACL,OAAO,UAAS;IAC7C,8EAA8E;IACjD,aAAa,UAAS;IACnD,2EAA2E;IAC9C,QAAQ,UAAS;IAC9C,wEAAwE;IAC3C,QAAQ,UAAS;IAC9C,kEAAkE;IACtD,IAAI,SAAM;IACtB,mDAAmD;IACvC,KAAK,SAAM;IAEd,OAAO,CAAC,aAAa,CAAS;IAWvC,UAAmB,UAAU,CAAC,QAAQ,EAAE,cAAc,GAAG,IAAI,CAE5D;IAED,UAAmB,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAQxD;IAED,kFAAkF;IAClF,iBAAiB,IAAI,IAAI,CAGxB;IAED,qDAAqD;IACrD,oBAAoB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAE5C;IAED,2EAA2E;IAC3E,wBAAwB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,QAAQ,GAAG,IAAI,GAAG,IAAI,CAGrE;IAwCQ,MAAM,yCAoBd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

package/dist/ui-checkbox.js

@@ -0,0 +1,228 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 { LitElement, css, html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { ref } from "lit/directives/ref.js";
+import { tokens } from "./tokens.js";
+/**
+ * A form-associated boolean checkbox, usable standalone or inside a native
+ * `<form>`. Submits `name=on` when checked (matching native
+ * `<input type="checkbox">` semantics) and participates fully in form
+ * `reset()`, ancestor `<fieldset disabled>`, and `required` validity.
+ *
+ * Renders a native `<input type="checkbox">` wrapped in a `<label>`, styled
+ * via `:has()` on the wrapping label (matching `radio-pills`/`radio-cards`)
+ * rather than styling the native input directly; the checkbox itself renders
+ * at `1rem`, matching the existing radio-input convention.
+ *
+ * @element ui-checkbox
+ * @fires change - The checkbox was toggled by the user, in either direction;
+ *   detail: `{ checked }`. Programmatic `checked` assignments do not fire it.
+ */
+let UiCheckbox = class UiCheckbox extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Whether the box is checked. */
+        this.checked = false;
+        /** Visual "partial selection" state; cleared on the next user interaction. */
+        this.indeterminate = false;
+        /** Disables interaction; merged with an ancestor `<fieldset disabled>`. */
+        this.disabled = false;
+        /** Marks the control invalid via `ElementInternals` while unchecked. */
+        this.required = false;
+        /** Form field name; submitted as `name=on` only while checked. */
+        this.name = "";
+        /** Visible label text rendered next to the box. */
+        this.label = "";
+        this._formDisabled = false;
+        this.#internals = this.attachInternals();
+        this.#defaultChecked = false;
+        this.#inputEl = null;
+        this.#onInputRef = (el) => {
+            this.#inputEl = el ?? null;
+            if (this.#inputEl)
+                this.#inputEl.indeterminate = this.indeterminate;
+        };
+    }
+    static { this.formAssociated = true; }
+    static { this.styles = [
+        tokens,
+        css `
+      :host {
+        display: inline-block;
+      }
+      .checkbox {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.5rem;
+        min-height: 2rem;
+        cursor: pointer;
+        font-family: var(--ui-font, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
+        font-size: var(--ui-font-size-sm, 0.75rem);
+        line-height: var(--ui-line-height-tight, 1.25);
+        color: var(--ui-text, #0f172a);
+      }
+      .checkbox input {
+        width: 1rem;
+        height: 1rem;
+        margin: 0;
+        accent-color: var(--ui-primary, #4f46e5);
+        cursor: pointer;
+      }
+      .checkbox:has(input:focus-visible) {
+        outline: none;
+      }
+      .checkbox:has(input:focus-visible) input {
+        outline: none;
+        box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));
+        border-radius: var(--ui-radius-sm, 0.25rem);
+      }
+      .checkbox:has(input:disabled) {
+        cursor: not-allowed;
+        opacity: 0.6;
+      }
+      .checkbox:has(input:disabled) input {
+        cursor: not-allowed;
+      }
+      .required-mark {
+        color: var(--ui-danger, #dc2626);
+      }
+      .sr-only {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        margin: -1px;
+        padding: 0;
+        overflow: hidden;
+        clip: rect(0 0 0 0);
+        clip-path: inset(50%);
+        white-space: nowrap;
+        border: 0;
+      }
+      @media (forced-colors: active) {
+        .checkbox:has(input:focus-visible) input {
+          outline: 2px solid CanvasText;
+          outline-offset: 2px;
+          box-shadow: none;
+        }
+        .checkbox:has(input:disabled) {
+          color: GrayText;
+          opacity: 1;
+        }
+      }
+    `,
+    ]; }
+    #internals;
+    #defaultChecked;
+    #inputEl;
+    /** Whether the host or an ancestor fieldset currently disables the control. */
+    get #isDisabled() {
+        return this.disabled || this._formDisabled;
+    }
+    willUpdate(_changed) {
+        if (!this.hasUpdated)
+            this.#defaultChecked = this.checked;
+    }
+    updated(changed) {
+        if (changed.has("checked") || changed.has("name"))
+            this.#syncFormValue();
+        if (changed.has("checked") || changed.has("required") || changed.has("disabled") || changed.has("_formDisabled")) {
+            this.#syncValidity();
+        }
+        if (changed.has("indeterminate") && this.#inputEl) {
+            this.#inputEl.indeterminate = this.indeterminate;
+        }
+    }
+    /** Restores the checked state captured at first render, per the form contract. */
+    formResetCallback() {
+        this.checked = this.#defaultChecked;
+        this.indeterminate = false;
+    }
+    /** Mirrors an ancestor fieldset's disabled state. */
+    formDisabledCallback(disabled) {
+        this._formDisabled = disabled;
+    }
+    /** Restores the checked state from saved form state (bfcache/autofill). */
+    formStateRestoreCallback(state) {
+        if (typeof state !== "string")
+            return;
+        this.checked = state === "on";
+    }
+    #syncFormValue() {
+        if (!this.name || !this.checked) {
+            this.#internals.setFormValue(null);
+            return;
+        }
+        this.#internals.setFormValue("on");
+    }
+    #syncValidity() {
+        if (this.#isDisabled) {
+            this.#internals.setValidity({});
+            return;
+        }
+        if (this.required && !this.checked) {
+            this.#internals.setValidity({ valueMissing: true }, "Please check this box to continue.", this.#inputEl ?? undefined);
+        }
+        else {
+            this.#internals.setValidity({});
+        }
+    }
+    #onChange(e) {
+        const input = e.target;
+        this.checked = input.checked;
+        this.indeterminate = false;
+        this.dispatchEvent(new CustomEvent("change", { detail: { checked: this.checked }, bubbles: true, composed: true }));
+    }
+    #onInputRef;
+    render() {
+        return html `
+      <label class="checkbox">
+        <input
+          ${ref(this.#onInputRef)}
+          type="checkbox"
+          .checked=${this.checked}
+          ?disabled=${this.#isDisabled}
+          ?required=${this.required}
+          @change=${(e) => this.#onChange(e)}
+        />
+        <span
+          >${this.label}${this.required
+            ? html `<span class="required-mark" aria-hidden="true"> *</span><span class="sr-only">
+                  (required)</span
+                >`
+            : ""}</span
+        >
+      </label>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], UiCheckbox.prototype, "checked", void 0);
+__decorate([
+    property({ type: Boolean })
+], UiCheckbox.prototype, "indeterminate", void 0);
+__decorate([
+    property({ type: Boolean })
+], UiCheckbox.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], UiCheckbox.prototype, "required", void 0);
+__decorate([
+    property()
+], UiCheckbox.prototype, "name", void 0);
+__decorate([
+    property()
+], UiCheckbox.prototype, "label", void 0);
+__decorate([
+    state()
+], UiCheckbox.prototype, "_formDisabled", void 0);
+UiCheckbox = __decorate([
+    customElement("ui-checkbox")
+], UiCheckbox);
+export { UiCheckbox };
+//# sourceMappingURL=ui-checkbox.js.map

package/dist/ui-checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-checkbox.js","sourceRoot":"","sources":["../src/ui-checkbox.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC;;;;;;;;;;;;;;GAcG;AAEI,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QAuEL,kCAAkC;QACL,YAAO,GAAG,KAAK,CAAC;QAC7C,8EAA8E;QACjD,kBAAa,GAAG,KAAK,CAAC;QACnD,2EAA2E;QAC9C,aAAQ,GAAG,KAAK,CAAC;QAC9C,wEAAwE;QAC3C,aAAQ,GAAG,KAAK,CAAC;QAC9C,kEAAkE;QACtD,SAAI,GAAG,EAAE,CAAC;QACtB,mDAAmD;QACvC,UAAK,GAAG,EAAE,CAAC;QAEN,kBAAa,GAAG,KAAK,CAAC;QAEvC,eAAU,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QACpC,oBAAe,GAAG,KAAK,CAAC;QACxB,aAAQ,GAA4B,IAAI,CAAC;QAuEzC,gBAAW,GAAG,CAAC,EAAuB,EAAQ,EAAE;YAC9C,IAAI,CAAC,QAAQ,GAAI,EAAmC,IAAI,IAAI,CAAC;YAC7D,IAAI,IAAI,CAAC,QAAQ;gBAAE,IAAI,CAAC,QAAQ,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC;QACtE,CAAC,CAAC;IAuBJ,CAAC;aAxLQ,mBAAc,GAAG,IAAI,AAAP,CAAQ;aAEb,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+DF;KACF,AAlEqB,CAkEpB;IAiBF,UAAU,CAA0B;IACpC,eAAe,CAAS;IACxB,QAAQ,CAAiC;IAEzC,+EAA+E;IAC/E,IAAI,WAAW;QACb,OAAO,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,aAAa,CAAC;IAC7C,CAAC;IAEkB,UAAU,CAAC,QAAwB;QACpD,IAAI,CAAC,IAAI,CAAC,UAAU;YAAE,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC;IAC5D,CAAC;IAEkB,OAAO,CAAC,OAAuB;QAChD,IAAI,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC;YAAE,IAAI,CAAC,cAAc,EAAE,CAAC;QACzE,IAAI,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,eAAe,CAAC,EAAE,CAAC;YACjH,IAAI,CAAC,aAAa,EAAE,CAAC;QACvB,CAAC;QACD,IAAI,OAAO,CAAC,GAAG,CAAC,eAAe,CAAC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClD,IAAI,CAAC,QAAQ,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC;QACnD,CAAC;IACH,CAAC;IAED,kFAAkF;IAClF,iBAAiB;QACf,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,eAAe,CAAC;QACpC,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;IAC7B,CAAC;IAED,qDAAqD;IACrD,oBAAoB,CAAC,QAAiB;QACpC,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC;IAChC,CAAC;IAED,2EAA2E;IAC3E,wBAAwB,CAAC,KAAsC;QAC7D,IAAI,OAAO,KAAK,KAAK,QAAQ;YAAE,OAAO;QACtC,IAAI,CAAC,OAAO,GAAG,KAAK,KAAK,IAAI,CAAC;IAChC,CAAC;IAED,cAAc;QACZ,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YAChC,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;YACnC,OAAO;QACT,CAAC;QACD,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;IACrC,CAAC;IAED,aAAa;QACX,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;YAChC,OAAO;QACT,CAAC;QACD,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YACnC,IAAI,CAAC,UAAU,CAAC,WAAW,CACzB,EAAE,YAAY,EAAE,IAAI,EAAE,EACtB,oCAAoC,EACpC,IAAI,CAAC,QAAQ,IAAI,SAAS,CAC3B,CAAC;QACJ,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;QAClC,CAAC;IACH,CAAC;IAED,SAAS,CAAC,CAAQ;QAChB,MAAM,KAAK,GAAG,CAAC,CAAC,MAA0B,CAAC;QAC3C,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;QAC3B,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAChG,CAAC;IACJ,CAAC;IAED,WAAW,CAGT;IAEO,MAAM;QACb,OAAO,IAAI,CAAA;;;YAGH,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC;;qBAEZ,IAAI,CAAC,OAAO;sBACX,IAAI,CAAC,WAAW;sBAChB,IAAI,CAAC,QAAQ;oBACf,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;;;aAGtC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ;YAC3B,CAAC,CAAC,IAAI,CAAA;;kBAEA;YACN,CAAC,CAAC,EAAE;;;KAGX,CAAC;IACJ,CAAC;CACF,CAAA;AAjH8B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2CAAiB;AAEhB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDAAuB;AAEtB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CAAkB;AAEjB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CAAkB;AAElC;IAAX,QAAQ,EAAE;wCAAW;AAEV;IAAX,QAAQ,EAAE;yCAAY;AAEN;IAAhB,KAAK,EAAE;iDAA+B;AApF5B,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CAyLtB","sourcesContent":["import { LitElement, css, html, type PropertyValues } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { ref } from \"lit/directives/ref.js\";\nimport { tokens } from \"./tokens.js\";\n\n/**\n * A form-associated boolean checkbox, usable standalone or inside a native\n * `<form>`. Submits `name=on` when checked (matching native\n * `<input type=\"checkbox\">` semantics) and participates fully in form\n * `reset()`, ancestor `<fieldset disabled>`, and `required` validity.\n *\n * Renders a native `<input type=\"checkbox\">` wrapped in a `<label>`, styled\n * via `:has()` on the wrapping label (matching `radio-pills`/`radio-cards`)\n * rather than styling the native input directly; the checkbox itself renders\n * at `1rem`, matching the existing radio-input convention.\n *\n * @element ui-checkbox\n * @fires change - The checkbox was toggled by the user, in either direction;\n *   detail: `{ checked }`. Programmatic `checked` assignments do not fire it.\n */\n@customElement(\"ui-checkbox\")\nexport class UiCheckbox extends LitElement {\n  static formAssociated = true;\n\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: inline-block;\n      }\n      .checkbox {\n        display: inline-flex;\n        align-items: center;\n        gap: 0.5rem;\n        min-height: 2rem;\n        cursor: pointer;\n        font-family: var(--ui-font, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n        font-size: var(--ui-font-size-sm, 0.75rem);\n        line-height: var(--ui-line-height-tight, 1.25);\n        color: var(--ui-text, #0f172a);\n      }\n      .checkbox input {\n        width: 1rem;\n        height: 1rem;\n        margin: 0;\n        accent-color: var(--ui-primary, #4f46e5);\n        cursor: pointer;\n      }\n      .checkbox:has(input:focus-visible) {\n        outline: none;\n      }\n      .checkbox:has(input:focus-visible) input {\n        outline: none;\n        box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));\n        border-radius: var(--ui-radius-sm, 0.25rem);\n      }\n      .checkbox:has(input:disabled) {\n        cursor: not-allowed;\n        opacity: 0.6;\n      }\n      .checkbox:has(input:disabled) input {\n        cursor: not-allowed;\n      }\n      .required-mark {\n        color: var(--ui-danger, #dc2626);\n      }\n      .sr-only {\n        position: absolute;\n        width: 1px;\n        height: 1px;\n        margin: -1px;\n        padding: 0;\n        overflow: hidden;\n        clip: rect(0 0 0 0);\n        clip-path: inset(50%);\n        white-space: nowrap;\n        border: 0;\n      }\n      @media (forced-colors: active) {\n        .checkbox:has(input:focus-visible) input {\n          outline: 2px solid CanvasText;\n          outline-offset: 2px;\n          box-shadow: none;\n        }\n        .checkbox:has(input:disabled) {\n          color: GrayText;\n          opacity: 1;\n        }\n      }\n    `,\n  ];\n\n  /** Whether the box is checked. */\n  @property({ type: Boolean }) checked = false;\n  /** Visual \"partial selection\" state; cleared on the next user interaction. */\n  @property({ type: Boolean }) indeterminate = false;\n  /** Disables interaction; merged with an ancestor `<fieldset disabled>`. */\n  @property({ type: Boolean }) disabled = false;\n  /** Marks the control invalid via `ElementInternals` while unchecked. */\n  @property({ type: Boolean }) required = false;\n  /** Form field name; submitted as `name=on` only while checked. */\n  @property() name = \"\";\n  /** Visible label text rendered next to the box. */\n  @property() label = \"\";\n\n  @state() private _formDisabled = false;\n\n  #internals = this.attachInternals();\n  #defaultChecked = false;\n  #inputEl: HTMLInputElement | null = null;\n\n  /** Whether the host or an ancestor fieldset currently disables the control. */\n  get #isDisabled(): boolean {\n    return this.disabled || this._formDisabled;\n  }\n\n  protected override willUpdate(_changed: PropertyValues): void {\n    if (!this.hasUpdated) this.#defaultChecked = this.checked;\n  }\n\n  protected override updated(changed: PropertyValues): void {\n    if (changed.has(\"checked\") || changed.has(\"name\")) this.#syncFormValue();\n    if (changed.has(\"checked\") || changed.has(\"required\") || changed.has(\"disabled\") || changed.has(\"_formDisabled\")) {\n      this.#syncValidity();\n    }\n    if (changed.has(\"indeterminate\") && this.#inputEl) {\n      this.#inputEl.indeterminate = this.indeterminate;\n    }\n  }\n\n  /** Restores the checked state captured at first render, per the form contract. */\n  formResetCallback(): void {\n    this.checked = this.#defaultChecked;\n    this.indeterminate = false;\n  }\n\n  /** Mirrors an ancestor fieldset's disabled state. */\n  formDisabledCallback(disabled: boolean): void {\n    this._formDisabled = disabled;\n  }\n\n  /** Restores the checked state from saved form state (bfcache/autofill). */\n  formStateRestoreCallback(state: string | File | FormData | null): void {\n    if (typeof state !== \"string\") return;\n    this.checked = state === \"on\";\n  }\n\n  #syncFormValue(): void {\n    if (!this.name || !this.checked) {\n      this.#internals.setFormValue(null);\n      return;\n    }\n    this.#internals.setFormValue(\"on\");\n  }\n\n  #syncValidity(): void {\n    if (this.#isDisabled) {\n      this.#internals.setValidity({});\n      return;\n    }\n    if (this.required && !this.checked) {\n      this.#internals.setValidity(\n        { valueMissing: true },\n        \"Please check this box to continue.\",\n        this.#inputEl ?? undefined,\n      );\n    } else {\n      this.#internals.setValidity({});\n    }\n  }\n\n  #onChange(e: Event): void {\n    const input = e.target as HTMLInputElement;\n    this.checked = input.checked;\n    this.indeterminate = false;\n    this.dispatchEvent(\n      new CustomEvent(\"change\", { detail: { checked: this.checked }, bubbles: true, composed: true }),\n    );\n  }\n\n  #onInputRef = (el: Element | undefined): void => {\n    this.#inputEl = (el as HTMLInputElement | undefined) ?? null;\n    if (this.#inputEl) this.#inputEl.indeterminate = this.indeterminate;\n  };\n\n  override render() {\n    return html`\n      <label class=\"checkbox\">\n        <input\n          ${ref(this.#onInputRef)}\n          type=\"checkbox\"\n          .checked=${this.checked}\n          ?disabled=${this.#isDisabled}\n          ?required=${this.required}\n          @change=${(e: Event) => this.#onChange(e)}\n        />\n        <span\n          >${this.label}${this.required\n            ? html`<span class=\"required-mark\" aria-hidden=\"true\"> *</span><span class=\"sr-only\">\n                  (required)</span\n                >`\n            : \"\"}</span\n        >\n      </label>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ui-checkbox\": UiCheckbox;\n  }\n}\n"]}

package/dist/utils/scroll.d.ts

@@ -0,0 +1,9 @@
+/** A scrollable region: either `window`/document scrolling, or an element with its own scrollbox. */
+export type ScrollableTarget = HTMLElement | Window;
+/** Pixels between the current scroll position and the top edge. */
+export declare function distanceFromTop(target: ScrollableTarget): number;
+/** Pixels between the current scroll position and the bottom edge. */
+export declare function distanceFromBottom(target: ScrollableTarget): number;
+/** Scrolls `target` to its top or bottom edge, honoring `prefers-reduced-motion`. */
+export declare function scrollToEdge(target: ScrollableTarget, edge: "top" | "bottom"): void;
+//# sourceMappingURL=scroll.d.ts.map

package/dist/utils/scroll.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll.d.ts","sourceRoot":"","sources":["../../src/utils/scroll.ts"],"names":[],"mappings":"AAAA,qGAAqG;AACrG,MAAM,MAAM,gBAAgB,GAAG,WAAW,GAAG,MAAM,CAAC;AAUpD,mEAAmE;AACnE,wBAAgB,eAAe,CAAC,MAAM,EAAE,gBAAgB,GAAG,MAAM,CAEhE;AAED,sEAAsE;AACtE,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,gBAAgB,GAAG,MAAM,CAGnE;AAED,qFAAqF;AACrF,wBAAgB,YAAY,CAAC,MAAM,EAAE,gBAAgB,EAAE,IAAI,EAAE,KAAK,GAAG,QAAQ,GAAG,IAAI,CAUnF"}

package/dist/utils/scroll.js

@@ -0,0 +1,30 @@
+function metrics(target) {
+    if (target instanceof Window) {
+        const doc = document.documentElement;
+        return { scrollTop: window.scrollY, scrollHeight: doc.scrollHeight, clientHeight: window.innerHeight };
+    }
+    return { scrollTop: target.scrollTop, scrollHeight: target.scrollHeight, clientHeight: target.clientHeight };
+}
+/** Pixels between the current scroll position and the top edge. */
+export function distanceFromTop(target) {
+    return metrics(target).scrollTop;
+}
+/** Pixels between the current scroll position and the bottom edge. */
+export function distanceFromBottom(target) {
+    const { scrollTop, scrollHeight, clientHeight } = metrics(target);
+    return scrollHeight - scrollTop - clientHeight;
+}
+/** Scrolls `target` to its top or bottom edge, honoring `prefers-reduced-motion`. */
+export function scrollToEdge(target, edge) {
+    const behavior = window.matchMedia("(prefers-reduced-motion: reduce)").matches
+        ? "instant"
+        : "smooth";
+    const top = edge === "top" ? 0 : metrics(target).scrollHeight;
+    if (target instanceof Window) {
+        window.scrollTo({ top, behavior });
+    }
+    else {
+        target.scrollTo({ top, behavior });
+    }
+}
+//# sourceMappingURL=scroll.js.map

package/dist/utils/scroll.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll.js","sourceRoot":"","sources":["../../src/utils/scroll.ts"],"names":[],"mappings":"AAGA,SAAS,OAAO,CAAC,MAAwB;IACvC,IAAI,MAAM,YAAY,MAAM,EAAE,CAAC;QAC7B,MAAM,GAAG,GAAG,QAAQ,CAAC,eAAe,CAAC;QACrC,OAAO,EAAE,SAAS,EAAE,MAAM,CAAC,OAAO,EAAE,YAAY,EAAE,GAAG,CAAC,YAAY,EAAE,YAAY,EAAE,MAAM,CAAC,WAAW,EAAE,CAAC;IACzG,CAAC;IACD,OAAO,EAAE,SAAS,EAAE,MAAM,CAAC,SAAS,EAAE,YAAY,EAAE,MAAM,CAAC,YAAY,EAAE,YAAY,EAAE,MAAM,CAAC,YAAY,EAAE,CAAC;AAC/G,CAAC;AAED,mEAAmE;AACnE,MAAM,UAAU,eAAe,CAAC,MAAwB;IACtD,OAAO,OAAO,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC;AACnC,CAAC;AAED,sEAAsE;AACtE,MAAM,UAAU,kBAAkB,CAAC,MAAwB;IACzD,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,YAAY,EAAE,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;IAClE,OAAO,YAAY,GAAG,SAAS,GAAG,YAAY,CAAC;AACjD,CAAC;AAED,qFAAqF;AACrF,MAAM,UAAU,YAAY,CAAC,MAAwB,EAAE,IAAsB;IAC3E,MAAM,QAAQ,GAAmB,MAAM,CAAC,UAAU,CAAC,kCAAkC,CAAC,CAAC,OAAO;QAC5F,CAAC,CAAC,SAAS;QACX,CAAC,CAAC,QAAQ,CAAC;IACb,MAAM,GAAG,GAAG,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,YAAY,CAAC;IAC9D,IAAI,MAAM,YAAY,MAAM,EAAE,CAAC;QAC7B,MAAM,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC,CAAC;IACrC,CAAC;SAAM,CAAC;QACN,MAAM,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC,CAAC;IACrC,CAAC;AACH,CAAC","sourcesContent":["/** A scrollable region: either `window`/document scrolling, or an element with its own scrollbox. */\nexport type ScrollableTarget = HTMLElement | Window;\n\nfunction metrics(target: ScrollableTarget): { scrollTop: number; scrollHeight: number; clientHeight: number } {\n  if (target instanceof Window) {\n    const doc = document.documentElement;\n    return { scrollTop: window.scrollY, scrollHeight: doc.scrollHeight, clientHeight: window.innerHeight };\n  }\n  return { scrollTop: target.scrollTop, scrollHeight: target.scrollHeight, clientHeight: target.clientHeight };\n}\n\n/** Pixels between the current scroll position and the top edge. */\nexport function distanceFromTop(target: ScrollableTarget): number {\n  return metrics(target).scrollTop;\n}\n\n/** Pixels between the current scroll position and the bottom edge. */\nexport function distanceFromBottom(target: ScrollableTarget): number {\n  const { scrollTop, scrollHeight, clientHeight } = metrics(target);\n  return scrollHeight - scrollTop - clientHeight;\n}\n\n/** Scrolls `target` to its top or bottom edge, honoring `prefers-reduced-motion`. */\nexport function scrollToEdge(target: ScrollableTarget, edge: \"top\" | \"bottom\"): void {\n  const behavior: ScrollBehavior = window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n    ? \"instant\"\n    : \"smooth\";\n  const top = edge === \"top\" ? 0 : metrics(target).scrollHeight;\n  if (target instanceof Window) {\n    window.scrollTo({ top, behavior });\n  } else {\n    target.scrollTo({ top, behavior });\n  }\n}\n"]}

package/docs/auto-scroll.md

@@ -0,0 +1,52 @@
+# `<auto-scroll>`
+
+Wraps arbitrary slotted content (e.g. `timeline-container`) and keeps it
+scrolled to the bottom as new children are appended — but only while the
+user is already scrolled near the bottom ("stick to bottom", a chat/log-
+viewer convention). If the user has scrolled up to read earlier content,
+new content does not yank the scroll position back down.
+
+New content is detected via a `MutationObserver`, so no cooperation from
+whatever is slotted in is required. The host itself is the scrollable
+region (`overflow-y: auto`) and needs a consumer-supplied bounded height to
+have anything to scroll, e.g. `auto-scroll { height: 24rem; }`.
+
+## Install
+
+```js
+import "@f-ewald/components/auto-scroll.js";
+```
+
+## Usage
+
+```html
+<auto-scroll style="height: 24rem">
+  <timeline-container>
+    <timeline-entry datetime="2026-07-23T09:00:00Z">
+      <span slot="headline">Deployment started</span>
+      Release v1.4.0 is rolling out.
+    </timeline-entry>
+  </timeline-container>
+</auto-scroll>
+```
+
+## Attributes / properties
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `threshold` | `threshold` | `number` | `24` | Pixels of tolerance from the bottom edge counted as "still at the bottom". |
+| `pinned` | _(JS property only)_ | `boolean` | `—` | Whether the view is currently stuck to the bottom. Read-only; see `scrollToBottom()`. _(read-only)_ |
+
+## Events
+
+| Event | Description |
+| --- | --- |
+| `pinned-change` | The stick-to-bottom state toggled; detail: `{ pinned }`. |
+
+## Slots
+
+_None._
+
+## CSS custom properties
+
+_None._