@getaster/elements 0.0.0-stage → 0.1.0-preview.1

package/dist/split/split.js

@@ -0,0 +1,237 @@
+import { computed } from "@preact/signals-core";
+import { html, nothing } from "lit-html";
+import { styleMap } from "lit-html/directives/style-map.js";
+import { AsterElement, define, uid } from "../base/element.js";
+const STEP = 16;
+/**
+ * Two panes side by side with a resize bar between them. The bar is an ARIA
+ * `separator`: drag it, or focus it and use ←/→ (Home and End for the
+ * limits). The width is clamped to `min` and `max` and written as
+ * `--split-start`; CSS lays out the panes and stacks horizontal splits in narrow containers. ← and → follow the text direction.
+ * With `persist`, the width is kept per viewer under that name. The width
+ * asked for is kept apart from the width shown, which is always inside
+ * `min` and `max`, so changing any of them in any order re-clamps it.
+ */
+export class Split extends AsterElement {
+    #wanted = this.prop(320);
+    #min = this.prop(220);
+    #max = this.prop(560);
+    #start = computed(() => Math.round(Math.min(this.#max.value, Math.max(this.#min.value, this.#wanted.value))));
+    #label = this.prop("Resize");
+    #persist = "";
+    #startView = this.prop(nothing);
+    #endView = this.prop(nothing);
+    #id = uid("aster-split");
+    #orientation = this.prop("horizontal");
+    #collapsible = this.prop(false);
+    #collapsed = this.prop(false);
+    #responsive = this.prop(true);
+    #actual = this.prop(undefined);
+    #resize;
+    #stopDrag;
+    get size() { return this.width; }
+    set size(v) { this.width = v; }
+    get orientation() { return this.#orientation.value; }
+    set orientation(v) { if (!["horizontal", "vertical"].includes(v))
+        throw new TypeError("Unknown split orientation"); this.#orientation.value = v; }
+    get collapsible() { return this.#collapsible.value; }
+    set collapsible(v) { this.#collapsible.value = v; }
+    get collapsed() { return this.#collapsed.value; }
+    set collapsed(v) {
+        if (v && this.querySelector("[data-pane=start]")?.contains(document.activeElement)) {
+            const bar = this.querySelector(":scope > .aster-split-layout > [role=separator]");
+            (bar?.getClientRects().length ? bar : this.querySelector(":scope > .aster-split-tools button, :scope > .aster-split-layout > [data-pane=end]"))?.focus();
+        }
+        if (v !== this.#collapsed.peek())
+            this.#actual.value = undefined;
+        this.#collapsed.value = v;
+    }
+    get responsive() { return this.#responsive.value; }
+    set responsive(v) { this.#responsive.value = v; }
+    disconnectedCallback() {
+        this.#resize?.disconnect();
+        this.#resize = undefined;
+        this.#stopDrag?.();
+        super.disconnectedCallback();
+    }
+    updated() {
+        if (this.#resize)
+            return;
+        const pane = this.querySelector("[data-pane=start]");
+        if (!pane)
+            return;
+        this.#resize = new ResizeObserver(() => {
+            const box = pane.getBoundingClientRect();
+            this.#actual.value = Math.round(this.#orientation.peek() === "horizontal" ? box.width : box.height);
+        });
+        this.#resize.observe(pane);
+    }
+    get start() {
+        return this.#startView.value;
+    }
+    set start(v) {
+        this.#startView.value = v;
+    }
+    get end() {
+        return this.#endView.value;
+    }
+    set end(v) {
+        this.#endView.value = v;
+    }
+    get width() {
+        return this.#start.value;
+    }
+    set width(v) {
+        if (!Number.isFinite(v) || v < 0)
+            throw new TypeError("Split size must be a finite nonnegative number");
+        this.#wanted.value = v;
+    }
+    get min() {
+        return this.#min.value;
+    }
+    set min(v) {
+        if (!Number.isFinite(v) || v < 0)
+            throw new TypeError("Split minimum must be nonnegative");
+        this.#min.value = v;
+    }
+    get max() {
+        return this.#max.value;
+    }
+    set max(v) {
+        if (!Number.isFinite(v) || v < 0)
+            throw new TypeError("Split maximum must be nonnegative");
+        this.#max.value = v;
+    }
+    /** The separator's accessible name. */
+    get label() {
+        return this.#label.value;
+    }
+    set label(v) {
+        this.#label.value = v;
+    }
+    get persist() {
+        return this.#persist;
+    }
+    set persist(v) {
+        this.#persist = v;
+        try {
+            const saved = Number(localStorage.getItem(`aster-split:${v}`));
+            if (saved)
+                this.#wanted.value = saved;
+        }
+        catch {
+            // Storage can be unavailable; the default width stands.
+        }
+    }
+    render() {
+        const width = this.#start.value, vertical = this.#orientation.value === "vertical", collapsed = this.#collapsed.value;
+        this.style.setProperty("--split-start", `${width}px`);
+        return html `${this.#collapsible.value ? html `<div class="aster-split-tools"><button type="button" aria-expanded=${!collapsed} aria-controls=${`${this.#id}-start`} @click=${() => this.collapsed = !collapsed}>${collapsed ? "Restore pane" : "Collapse pane"}</button></div>` : nothing}
+      <div class="aster-split-layout" data-orientation=${this.#orientation.value} ?data-responsive=${this.#responsive.value} ?data-collapsed=${collapsed}
+        style=${styleMap({ "--split-start": `${width}px` })}>
+      <div class="aster-split-pane" tabindex="0" data-pane="start" id=${`${this.#id}-start`} ?inert=${collapsed} aria-hidden=${collapsed ? "true" : nothing}>${this.#startView.value}</div>
+      <div class="aster-split-bar" role="separator" tabindex="0" aria-orientation=${vertical ? "horizontal" : "vertical"}
+        aria-label=${this.#label.value} aria-controls=${`${this.#id}-start`}
+        aria-valuenow=${collapsed ? 0 : Math.min(this.#max.value, this.#actual.value ?? width)} aria-valuemin=${this.#collapsible.value || collapsed ? 0 : Math.min(this.#min.value, this.#actual.value ?? width)} aria-valuemax=${this.#max.value}
+        aria-valuetext=${collapsed ? "Collapsed" : `${this.#actual.value ?? width} pixels`}
+        @pointerdown=${(e) => this.#drag(e)}
+        @keydown=${(e) => this.#key(e)}></div>
+      <div class="aster-split-pane" tabindex="0" data-pane="end">${this.#endView.value}</div></div>`;
+    }
+    #drag(e) {
+        if (e.button !== 0 || this.#collapsed.peek())
+            return;
+        this.#stopDrag?.();
+        const bar = e.currentTarget;
+        bar.focus();
+        e.preventDefault();
+        bar.setPointerCapture(e.pointerId);
+        const vertical = this.#orientation.peek() === "vertical";
+        const from = vertical ? e.clientY : e.clientX, width = this.#start.peek();
+        const dir = !vertical && getComputedStyle(this).direction === "rtl" ? -1 : 1;
+        const move = (m) => (this.#wanted.value = this.#clamp(width + ((vertical ? m.clientY : m.clientX) - from) * dir));
+        const cleanup = () => {
+            bar.removeEventListener("pointermove", move);
+            bar.removeEventListener("pointerup", up);
+            bar.removeEventListener("pointercancel", cancel);
+            bar.removeEventListener("lostpointercapture", cancel);
+            document.removeEventListener("keydown", escape, true);
+            this.#stopDrag = undefined;
+            if (bar.hasPointerCapture(e.pointerId))
+                bar.releasePointerCapture(e.pointerId);
+        };
+        const cancel = () => { this.#wanted.value = width; cleanup(); };
+        const up = () => { cleanup(); this.#save(); };
+        const escape = (key) => { if (key.key === "Escape") {
+            key.preventDefault();
+            key.stopPropagation();
+            cancel();
+        } };
+        this.#stopDrag = cancel;
+        bar.addEventListener("pointermove", move);
+        bar.addEventListener("pointerup", up);
+        bar.addEventListener("pointercancel", cancel);
+        bar.addEventListener("lostpointercapture", cancel);
+        document.addEventListener("keydown", escape, true);
+    }
+    #key(e) {
+        const width = this.#start.peek();
+        if (e.key === "Enter" && this.#collapsible.peek()) {
+            e.preventDefault();
+            this.collapsed = !this.collapsed;
+            return;
+        }
+        if (this.#collapsed.peek())
+            return;
+        const vertical = this.#orientation.peek() === "vertical";
+        const forward = !vertical && getComputedStyle(this).direction === "rtl" ? -STEP : STEP;
+        let next;
+        switch (e.key) {
+            case "ArrowLeft":
+                if (vertical)
+                    return;
+                next = width - forward;
+                break;
+            case "ArrowRight":
+                if (vertical)
+                    return;
+                next = width + forward;
+                break;
+            case "ArrowUp":
+                if (!vertical)
+                    return;
+                next = width - STEP;
+                break;
+            case "ArrowDown":
+                if (!vertical)
+                    return;
+                next = width + STEP;
+                break;
+            case "Home":
+                next = this.#min.peek();
+                break;
+            case "End":
+                next = this.#max.peek();
+                break;
+            default:
+                return;
+        }
+        e.preventDefault();
+        this.#wanted.value = this.#clamp(next);
+        this.#save();
+    }
+    #clamp(v) {
+        return Math.round(Math.min(this.#max.peek(), Math.max(this.#min.peek(), v)));
+    }
+    #save() {
+        if (!this.#persist)
+            return;
+        try {
+            localStorage.setItem(`aster-split:${this.#persist}`, String(this.#start.peek()));
+        }
+        catch {
+            // Not kept; the width still applies now.
+        }
+    }
+}
+define("aster-split", Split);

package/dist/styles/contract.d.ts

@@ -0,0 +1,36 @@
+/**
+ * The token contract: every custom property an identity must define, by
+ * role. Elements and apps style themselves only through these, so an
+ * identity is a complete set of values and nothing else.
+ *
+ * A dark scheme (`:root[data-scheme="dark"]`) may override any of them and
+ * needs to define none.
+ */
+export declare const TOKENS: {
+    readonly type: readonly ["font-ui", "font-figure", "font-size", "line", "weight", "weight-strong", "weight-label", "figure-settings", "title-settings", "heading-settings", "prose-settings"];
+    readonly surfaces: readonly ["page", "surface", "sunk", "pane", "backdrop", "frame", "texture", "texture-blend", "texture-opacity"];
+    readonly text: readonly ["text", "text-2", "text-3"];
+    /** `mark-ring` outlines identity dots and avatars so a pale hue still shows. */
+    readonly edges: readonly ["rule", "rule-2", "mark-ring"];
+    /** Accent acts (buttons, links, focus); indicator only marks where to look (the caret). */
+    readonly accent: readonly ["accent", "accent-hi", "accent-soft", "on-accent", "accent-sheen", "focus", "focus-offset", "indicator"];
+    readonly status: readonly ["positive", "negative", "caution"];
+    /** Identity colours take their hue from data and lightness and chroma from here. */
+    readonly identity: readonly ["identity-l", "identity-c"];
+    /** `press` is the inset shadow colour of a pressed primary button. */
+    readonly elevation: readonly ["shadow", "highlight", "ring", "e1", "e2", "e3", "well", "scrim", "press"];
+    readonly shape: readonly ["r-ctl", "r-card", "r-pop", "r-dialog"];
+    readonly motion: readonly ["ease", "t-morph", "t-ink", "t-micro", "t-caret", "t-scheme"];
+    readonly toast: readonly ["toast-bg", "toast-text", "toast-action", "toast-mark"];
+    /** Lamplight's lamp, which other identities set to something neutral; `lamp-bulb` is the glow round the switch's bulb. */
+    readonly light: readonly ["lamp", "glow", "lamp-bulb"];
+};
+export declare const TOKEN_NAMES: readonly string[];
+/**
+ * Sizes that follow density rather than identity: control height, a tighter
+ * control for grids, vertical padding of grid cells and listbox rows, of
+ * single-line rows, and of panels and bars, and the gap between fields. `base.css` defines them for each density.
+ */
+export declare const DENSITY: readonly ["ctl", "ctl-tight", "pad-y", "row-y", "pad", "gap"];
+export declare const DENSITIES: readonly ["compact", "standard", "comfortable"];
+export declare const DENSITY_NAMES: readonly string[];

package/dist/styles/contract.js

@@ -0,0 +1,39 @@
+/**
+ * The token contract: every custom property an identity must define, by
+ * role. Elements and apps style themselves only through these, so an
+ * identity is a complete set of values and nothing else.
+ *
+ * A dark scheme (`:root[data-scheme="dark"]`) may override any of them and
+ * needs to define none.
+ */
+export const TOKENS = {
+    type: [
+        "font-ui", "font-figure", "font-size", "line", "weight", "weight-strong", "weight-label",
+        "figure-settings", "title-settings", "heading-settings", "prose-settings",
+    ],
+    surfaces: ["page", "surface", "sunk", "pane", "backdrop", "frame", "texture", "texture-blend", "texture-opacity"],
+    text: ["text", "text-2", "text-3"],
+    /** `mark-ring` outlines identity dots and avatars so a pale hue still shows. */
+    edges: ["rule", "rule-2", "mark-ring"],
+    /** Accent acts (buttons, links, focus); indicator only marks where to look (the caret). */
+    accent: ["accent", "accent-hi", "accent-soft", "on-accent", "accent-sheen", "focus", "focus-offset", "indicator"],
+    status: ["positive", "negative", "caution"],
+    /** Identity colours take their hue from data and lightness and chroma from here. */
+    identity: ["identity-l", "identity-c"],
+    /** `press` is the inset shadow colour of a pressed primary button. */
+    elevation: ["shadow", "highlight", "ring", "e1", "e2", "e3", "well", "scrim", "press"],
+    shape: ["r-ctl", "r-card", "r-pop", "r-dialog"],
+    motion: ["ease", "t-morph", "t-ink", "t-micro", "t-caret", "t-scheme"],
+    toast: ["toast-bg", "toast-text", "toast-action", "toast-mark"],
+    /** Lamplight's lamp, which other identities set to something neutral; `lamp-bulb` is the glow round the switch's bulb. */
+    light: ["lamp", "glow", "lamp-bulb"],
+};
+export const TOKEN_NAMES = Object.values(TOKENS).flat().map((t) => `--aster-${t}`);
+/**
+ * Sizes that follow density rather than identity: control height, a tighter
+ * control for grids, vertical padding of grid cells and listbox rows, of
+ * single-line rows, and of panels and bars, and the gap between fields. `base.css` defines them for each density.
+ */
+export const DENSITY = ["ctl", "ctl-tight", "pad-y", "row-y", "pad", "gap"];
+export const DENSITIES = ["compact", "standard", "comfortable"];
+export const DENSITY_NAMES = DENSITY.map((t) => `--aster-${t}`);

package/dist/switch/switch.d.ts

@@ -0,0 +1,22 @@
+import type { DataContext, KeyText } from "@getaster/data";
+import { AsterElement, type View } from "../base/element.ts";
+export interface SwitchBinding {
+    readonly ctx: DataContext;
+    readonly set: string;
+    readonly key: KeyText;
+    readonly field: string;
+}
+/**
+ * A row with a switch, bound to one Boolean field of a stored record. The
+ * whole row toggles it. A toggle saves straight away: the switch shows the
+ * new state while the save runs, and if the save fails it goes back and the
+ * error shows under the row. The label is the field's title from metadata.
+ */
+export declare class Switch extends AsterElement {
+    #private;
+    get binding(): SwitchBinding | undefined;
+    set binding(v: SwitchBinding | undefined);
+    get label(): string;
+    set label(v: string);
+    protected render(): View;
+}

package/dist/switch/switch.js

@@ -0,0 +1,69 @@
+import { ODataError } from "@getaster/data";
+import { html, nothing } from "lit-html";
+import { AsterElement, define, uid } from "../base/element.js";
+/**
+ * A row with a switch, bound to one Boolean field of a stored record. The
+ * whole row toggles it. A toggle saves straight away: the switch shows the
+ * new state while the save runs, and if the save fails it goes back and the
+ * error shows under the row. The label is the field's title from metadata.
+ */
+export class Switch extends AsterElement {
+    #binding = this.prop(undefined);
+    #label = this.prop("");
+    #pending = this.prop(undefined);
+    #error = this.prop(undefined);
+    #id = uid("aster-switch");
+    get binding() {
+        return this.#binding.value;
+    }
+    set binding(v) {
+        this.#binding.value = v;
+    }
+    get label() {
+        return this.#label.value;
+    }
+    set label(v) {
+        this.#label.value = v;
+    }
+    render() {
+        const b = this.#binding.value;
+        if (!b)
+            return nothing;
+        const stored = b.ctx.store.record(b.set, b.key).value?.entity[b.field];
+        const pending = this.#pending.value;
+        const on = pending ?? stored === true;
+        const label = this.#label.value || b.ctx.schema.set(b.set).type.field(b.field)?.title || b.field;
+        const error = this.#error.value;
+        return html `<div class="aster-switch-row" data-click @click=${(e) => this.#rowClick(e)}>
+        <span id=${`${this.#id}-label`}>${label}</span>
+        <button type="button" class="aster-switch" role="switch" aria-checked=${on ? "true" : "false"}
+          aria-labelledby=${`${this.#id}-label`} aria-busy=${pending === undefined ? "false" : "true"}
+          aria-describedby=${error ? `${this.#id}-error` : nothing}
+          @click=${() => this.#toggle(!on)}></button>
+      </div>
+      ${error ? html `<p class="aster-error" id=${`${this.#id}-error`} role="alert">${error}</p>` : nothing}`;
+    }
+    #rowClick(e) {
+        if (e.target.closest('[role="switch"]'))
+            return;
+        this.querySelector('[role="switch"]')?.click();
+    }
+    async #toggle(to) {
+        const b = this.#binding.peek();
+        if (!b || this.#pending.peek() !== undefined)
+            return;
+        this.#pending.value = to;
+        this.#error.value = undefined;
+        try {
+            await b.ctx.update(b.set, b.key, { [b.field]: to }, this);
+        }
+        catch (e) {
+            const what = to ? "turn this on" : "turn this off";
+            this.#error.value = `Couldn’t ${what}: ${e instanceof ODataError ? e.message : String(e)} It’s back as it was.`;
+        }
+        finally {
+            this.#pending.value = undefined;
+        }
+    }
+}
+define("aster-switch", Switch);

package/dist/tabs/tabs.d.ts

@@ -0,0 +1,30 @@
+import { AsterElement, type Bindable, type View } from "../base/element.ts";
+import "../caret/caret-group.ts";
+export interface TabItem {
+    readonly value: string;
+    readonly label: string;
+    readonly closable?: boolean;
+    readonly disabled?: boolean;
+}
+/** Controlled tabs with optional retained lazy panels and owner-managed close requests. */
+export declare class Tabs extends AsterElement {
+    #private;
+    /** Render on first activation; keep the panel mounted until its item is removed. */
+    get renderPanel(): ((item: TabItem) => View) | undefined;
+    set renderPanel(v: ((item: TabItem) => View) | undefined);
+    get activation(): "automatic" | "manual";
+    set activation(v: "automatic" | "manual");
+    get items(): Bindable<readonly TabItem[]>;
+    set items(v: Bindable<readonly TabItem[]>);
+    get value(): Bindable<string | undefined>;
+    set value(v: Bindable<string | undefined>);
+    /** The tablist's accessible name. */
+    get label(): string;
+    set label(v: string);
+    /** The id of the panel the tabs control. */
+    get controls(): string | undefined;
+    set controls(v: string | undefined);
+    protected render(): View;
+    protected updated(): void;
+    disconnectedCallback(): void;
+}

package/dist/tabs/tabs.js

@@ -0,0 +1,202 @@
+import { html, nothing } from "lit-html";
+import { ifDefined } from "lit-html/directives/if-defined.js";
+import { AsterElement, define, each, read, uid } from "../base/element.js";
+import "../caret/caret-group.js";
+/** Controlled tabs with optional retained lazy panels and owner-managed close requests. */
+export class Tabs extends AsterElement {
+    #items = this.prop([]);
+    #value = this.prop(undefined);
+    #label = this.prop("");
+    #controls = this.prop(undefined);
+    #id = uid("aster-tab");
+    /** The panel last labelled, so a new `controls` or a disconnect clears the old one. */
+    #panel = null;
+    #renderPanel = this.prop(undefined);
+    #activation = this.prop("automatic");
+    #overflow = this.prop(false);
+    #visited = new Set();
+    #observer;
+    #resizeFrame = 0;
+    #selected;
+    #focusAfterClose = false;
+    /** Render on first activation; keep the panel mounted until its item is removed. */
+    get renderPanel() { return this.#renderPanel.value; }
+    set renderPanel(v) { this.#renderPanel.value = v; }
+    get activation() { return this.#activation.value; }
+    set activation(v) { this.#activation.value = v; }
+    get items() {
+        return this.#items.value;
+    }
+    set items(v) {
+        this.#items.value = v;
+    }
+    get value() {
+        return this.#value.value;
+    }
+    set value(v) {
+        this.#value.value = v;
+    }
+    /** The tablist's accessible name. */
+    get label() {
+        return this.#label.value;
+    }
+    set label(v) {
+        this.#label.value = v;
+    }
+    /** The id of the panel the tabs control. */
+    get controls() {
+        return this.#controls.value;
+    }
+    set controls(v) {
+        this.#controls.value = v;
+    }
+    render() {
+        const items = read(this.#items.value);
+        const active = this.#active(items);
+        const renderer = this.#renderPanel.value;
+        const separateActions = items.some(t => t.closable);
+        for (const value of this.#visited)
+            if (!items.some(t => t.value === value))
+                this.#visited.delete(value);
+        if (renderer && active !== undefined)
+            this.#visited.add(active);
+        // Close buttons remain siblings; the tablist owns only tabs in the accessibility tree.
+        return html `${separateActions ? html `<span class="aster-sr-only" role="tablist" aria-label=${this.#label.value}
+      aria-owns=${items.map(t => this.#tabId(t.value)).join(" ")}></span>` : nothing}
+    <div class="aster-tabs-strip">
+      <button type="button" class="aster-tabs-scroll" aria-label="Scroll tabs backward" ?hidden=${!this.#overflow.value}
+        @click=${() => this.#scroll(-1)}><svg viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="m10 4-4 4 4 4"/></svg></button>
+      <div class="aster-tabs-viewport">
+        <aster-caret-group axis="x" class="aster-tabs" role=${separateActions || items.length === 0 ? "presentation" : "tablist"} aria-label=${ifDefined(separateActions || items.length === 0 ? undefined : this.#label.value)}
+          @keydown=${(e) => this.#key(e, items)}>
+          ${each(items, t => t.value, t => html `<span class="aster-tab-item" role="presentation">
+            <button type="button" role="tab" id=${this.#tabId(t.value)} data-value=${t.value} title=${t.label}
+              aria-selected=${t.value === active ? "true" : "false"} ?disabled=${t.disabled}
+              aria-controls=${ifDefined(renderer ? this.#panelId(t.value) : this.#controls.value)}
+              tabindex=${t.value === active ? 0 : -1}
+              @click=${() => this.#choose(t.value)}>${t.label}</button>
+            ${t.closable ? html `<button type="button" class="aster-tab-close" aria-label=${`Close ${t.label}`}
+              ?disabled=${t.disabled} tabindex=${t.value === active ? 0 : -1}
+              @click=${() => this.#close(t.value)}><svg viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="m4.5 4.5 7 7m0-7-7 7"/></svg></button>` : nothing}
+          </span>`)}
+        </aster-caret-group>
+      </div>
+      <button type="button" class="aster-tabs-scroll" aria-label="Scroll tabs forward" ?hidden=${!this.#overflow.value}
+        @click=${() => this.#scroll(1)}><svg viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="m6 4 4 4-4 4"/></svg></button>
+    </div>
+    ${renderer ? each(items, t => t.value, t => html `<div role="tabpanel" id=${this.#panelId(t.value)}
+      aria-labelledby=${this.#tabId(t.value)} tabindex="0" ?hidden=${t.value !== active}
+      >${this.#visited.has(t.value) ? renderer(t) : nothing}</div>`) : nothing}`;
+    }
+    #active(items) {
+        const value = read(this.#value.value);
+        return items.find(t => t.value === value && !t.disabled)?.value ?? items.find(t => !t.disabled)?.value;
+    }
+    #panelId(value) { return `${this.#tabId(value)}-panel`; }
+    #scroll(direction) {
+        const viewport = this.querySelector(".aster-tabs-viewport");
+        if (viewport)
+            viewport.scrollBy({ left: direction * viewport.clientWidth * (getComputedStyle(this).direction === "rtl" ? -1 : 1), behavior: "instant" });
+    }
+    #close(value) {
+        this.#focusAfterClose = this.contains(document.activeElement);
+        this.emit("close", value);
+        queueMicrotask(() => {
+            if (this.#focusAfterClose && !read(this.#items.peek()).some(t => t.value === value))
+                this.#focusSelected();
+            this.#focusAfterClose = false;
+        });
+    }
+    #revealSelected() {
+        this.querySelector(".aster-tabs")?.querySelector('[role="tab"][aria-selected="true"]')?.scrollIntoView({ block: "nearest", inline: "nearest", behavior: "instant" });
+    }
+    #focusSelected() {
+        this.querySelector(".aster-tabs")?.querySelector('[role="tab"][aria-selected="true"]')?.focus();
+    }
+    /** Stable for a value while the element lives; encoded so any value is a valid single id token. */
+    #tabId(value) {
+        return `${this.#id}-${encodeURIComponent(value)}`;
+    }
+    updated() {
+        const viewport = this.querySelector(".aster-tabs-viewport");
+        if (!this.#observer) {
+            this.#observer = new ResizeObserver(() => {
+                if (this.#resizeFrame)
+                    return;
+                this.#resizeFrame = requestAnimationFrame(() => {
+                    this.#resizeFrame = 0;
+                    this.#overflow.value = viewport.scrollWidth > viewport.parentElement.clientWidth + 1;
+                    this.#revealSelected();
+                });
+            });
+            this.#observer.observe(viewport);
+            this.#observer.observe(this.querySelector(".aster-tabs"));
+        }
+        const active = this.#active(read(this.#items.peek()));
+        if (active !== this.#selected) {
+            this.#selected = active;
+            this.#revealSelected();
+        }
+        const id = this.#renderPanel.peek() ? undefined : this.#controls.peek();
+        const panel = id ? this.getRootNode().getElementById(id) : null;
+        if (this.#panel && this.#panel !== panel)
+            this.#panel.removeAttribute("aria-labelledby");
+        this.#panel = panel;
+        const selected = this.querySelector(".aster-tabs")?.querySelector('[role="tab"][aria-selected="true"]');
+        if (panel && selected)
+            panel.setAttribute("aria-labelledby", selected.id);
+        else
+            panel?.removeAttribute("aria-labelledby");
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.#panel?.removeAttribute("aria-labelledby");
+        this.#panel = null;
+        this.#observer?.disconnect();
+        this.#observer = undefined;
+        cancelAnimationFrame(this.#resizeFrame);
+        this.#resizeFrame = 0;
+    }
+    #choose(value) {
+        if (value !== this.#active(read(this.#items.peek())))
+            this.emit("change", value);
+    }
+    #key(e, items) {
+        if (!(e.target instanceof HTMLElement) || e.target.getAttribute("role") !== "tab")
+            return;
+        const tabs = [...this.querySelector(".aster-tabs").querySelectorAll('[role="tab"]:not(:disabled)')];
+        const i = tabs.indexOf(e.target);
+        if (i < 0)
+            return;
+        const item = items.find(t => t.value === tabs[i].dataset.value);
+        if (e.key === "Delete" && item.closable) {
+            e.preventDefault();
+            this.#close(item.value);
+            return;
+        }
+        const rtl = getComputedStyle(this).direction === "rtl";
+        let n;
+        switch (e.key) {
+            case "Home":
+                n = 0;
+                break;
+            case "End":
+                n = tabs.length - 1;
+                break;
+            case "ArrowRight":
+                n = (i + (rtl ? -1 : 1) + tabs.length) % tabs.length;
+                break;
+            case "ArrowLeft":
+                n = (i + (rtl ? 1 : -1) + tabs.length) % tabs.length;
+                break;
+            default: return;
+        }
+        e.preventDefault();
+        tabs.forEach((tab, index) => { tab.tabIndex = index === n ? 0 : -1; });
+        tabs[n].focus();
+        tabs[n].scrollIntoView({ block: "nearest", inline: "nearest", behavior: "instant" });
+        if (this.#activation.peek() === "automatic")
+            this.#choose(tabs[n].dataset.value);
+    }
+}
+define("aster-tabs", Tabs);

package/dist/tile-grid/scroll.d.ts

@@ -0,0 +1,9 @@
+/** Projects measured logical row offsets into a browser-safe scroll extent. */
+export declare class TileScroll {
+    #private;
+    readonly extent: number;
+    constructor(rows: number, stride: number, height: number, gap: number);
+    logical(top: number): number;
+    physical(top: number): number;
+    rowTop(offset: number, top: number): number;
+}

package/dist/tile-grid/scroll.js

@@ -0,0 +1,21 @@
+/** Projects measured logical row offsets into a browser-safe scroll extent. */
+export class TileScroll {
+    extent;
+    #logical;
+    #physical;
+    constructor(rows, stride, height, gap) {
+        const natural = Math.max(0, rows * stride - gap);
+        this.extent = Math.min(8_000_000, natural);
+        this.#logical = Math.max(0, natural - height);
+        this.#physical = Math.max(0, this.extent - height);
+    }
+    logical(top) {
+        return this.#physical ? Math.max(0, Math.min(this.#physical, top)) * this.#logical / this.#physical : 0;
+    }
+    physical(top) {
+        return this.#logical ? Math.max(0, Math.min(this.#logical, top)) * this.#physical / this.#logical : 0;
+    }
+    rowTop(offset, top) {
+        return offset - (this.logical(top) - top);
+    }
+}