@getaster/elements 0.3.0 → 0.4.0

package/dist/select/choice.js

@@ -1,10 +1,11 @@
 import { signal } from "@preact/signals-core";
 import { html, nothing } from "lit-html";
 import { anchorStyle, openWhen, placeStyle } from "../overlay/anchor.js";
-/** Whether a choice's list is open, and which option is active in it. */
+/** Whether a choice's list is open, which option is active in it, and the filter text. */
 export class ChoiceState {
     open = signal(false);
     active = signal(0);
+    query = signal("");
 }
 /**
  * A select-only combobox: the value in a frame, and a list drawn like the
@@ -12,51 +13,70 @@ export class ChoiceState {
  *
  * Keyboard: ↓/↑, Enter or Space open; in the list ↓/↑, Home and End move,
  * a letter jumps to the next label starting with it, Enter or Space choose,
- * Escape and Tab close. The active option is `aria-activedescendant`.
+ * Escape and Tab close. With `filter`, typed text narrows the list and
+ * Backspace edits it; Enter chooses the active option. The active option is
+ * `aria-activedescendant`.
  */
 export function choiceView(state, p) {
-    const choices = p.options;
+    const locked = p.disabled === true;
+    const readOnly = p.readOnly === true;
+    const filter = p.filter === true;
+    const query = filter ? state.query.value : "";
+    const all = p.options;
+    const choices = filter && query.trim() !== "" ? all.filter((o) => o.label.toLowerCase().includes(query.trim().toLowerCase())) : all;
     const current = p.value ?? null;
+    const chosenAll = all.findIndex((o) => o.value === current);
     const chosen = choices.findIndex((o) => o.value === current);
-    const shown = chosen >= 0 ? choices[chosen].label : current === null || current === "" ? p.placeholder : String(current);
-    const open = state.open.value && !p.readOnly;
-    const active = Math.min(state.active.value, choices.length - 1);
+    const shownValue = chosenAll >= 0 ? all[chosenAll].label : current === null || current === "" ? p.placeholder : String(current);
+    const shown = filter && state.open.peek() && query !== "" ? query : shownValue;
+    const open = state.open.value && !readOnly && !locked;
+    const active = choices.length ? Math.min(state.active.value, choices.length - 1) : -1;
     const listId = `${p.id}-options`;
     const optionId = (i) => `${p.id}-option-${i}`;
+    const close = () => {
+        state.open.value = false;
+        state.query.value = "";
+    };
     const choose = (i) => {
         const o = choices[i];
         if (o)
             p.choose(o.value);
-        state.open.value = false;
+        close();
     };
     const show = () => {
-        if (p.readOnly)
+        if (readOnly || locked)
             return;
         state.active.value = Math.max(0, chosen);
+        state.query.value = "";
         state.open.value = true;
     };
+    const clearable = p.clearable === true && current !== null && current !== "" && !readOnly && !locked;
     return html `<div class="aster-picker">
     <div class="aster-field aster-select" data-ring-owner style=${anchorStyle(p.id)}
       @click=${(e) => {
+        if (readOnly || locked)
+            return;
         e.currentTarget.querySelector("[role=combobox]")?.focus();
         if (state.open.peek())
-            state.open.value = false;
+            close();
         else
             show();
     }}>
-      <div id=${p.id} class="aster-select-value" role="combobox" tabindex="0"
+      <div id=${p.id} class="aster-select-value" role="combobox" tabindex=${locked ? "-1" : "0"}
         aria-label=${p.label ?? nothing}
         aria-labelledby=${p.labelledBy ?? nothing}
         aria-haspopup="listbox" aria-expanded=${open ? "true" : "false"} aria-controls=${listId}
-        aria-activedescendant=${open ? optionId(active) : nothing}
-        aria-readonly=${p.readOnly ? "true" : nothing}
+        aria-activedescendant=${open && active >= 0 ? optionId(active) : nothing}
+        aria-autocomplete=${filter ? "list" : nothing}
+        aria-readonly=${readOnly ? "true" : nothing}
+        aria-disabled=${locked ? "true" : nothing}
         aria-required=${p.required ? "true" : nothing}
         aria-invalid=${p.invalid ? "true" : nothing}
         aria-describedby=${p.describedBy ?? nothing}
-        ?data-placeholder=${chosen < 0}
-        @blur=${() => (state.open.value = false)}
+        ?data-placeholder=${chosenAll < 0 && !(filter && query !== "")}
+        @blur=${() => close()}
           @keydown=${(e) => {
-        if (p.readOnly)
+        if (readOnly || locked)
             return;
         const n = choices.length;
         if (!state.open.peek()) {
@@ -64,6 +84,18 @@ export function choiceView(state, p) {
                 e.preventDefault();
                 show();
             }
+            else if (filter && isTyping(e)) {
+                e.preventDefault();
+                state.query.value = e.key;
+                state.active.value = 0;
+                state.open.value = true;
+            }
+            return;
+        }
+        if (filter && isTyping(e)) {
+            e.preventDefault();
+            state.query.value = query + e.key;
+            state.active.value = 0;
             return;
         }
         const move = (i) => {
@@ -80,19 +112,34 @@ export function choiceView(state, p) {
             case "End":
                 return move(n - 1);
             case "Enter":
+                e.preventDefault();
+                return choose(active);
             case " ":
+                if (filter) {
+                    e.preventDefault();
+                    state.query.value = query + e.key;
+                    state.active.value = 0;
+                    return;
+                }
                 e.preventDefault();
                 return choose(active);
+            case "Backspace":
+                if (!filter)
+                    return;
+                e.preventDefault();
+                state.query.value = query.slice(0, -1);
+                state.active.value = 0;
+                return;
             case "Escape":
                 e.preventDefault();
                 e.stopPropagation();
-                state.open.value = false;
+                close();
                 return;
             case "Tab":
-                state.open.value = false;
+                close();
                 return;
             default: {
-                if (e.key.length !== 1 || !/\S/.test(e.key))
+                if (filter || !isTyping(e))
                     return;
                 const k = e.key.toLowerCase();
                 for (let step = 1; step <= n; step++) {
@@ -103,20 +150,38 @@ export function choiceView(state, p) {
             }
         }
     }}>${shown}</div>
+      ${clearable
+        ? html `<button type="button" class="aster-select-clear" aria-label=${`Clear ${p.label || "selection"}`}
+            @click=${(e) => {
+            e.stopPropagation();
+            close();
+            p.choose(null);
+            const frame = e.currentTarget.closest(".aster-select");
+            queueMicrotask(() => frame?.querySelector("[role=combobox]")?.focus());
+        }}>
+            <svg viewBox="0 0 12 12" aria-hidden="true"><path d="M3 3l6 6M9 3l-6 6"/></svg>
+          </button>`
+        : nothing}
       <svg class="aster-picker-chevron" viewBox="0 0 10 10" aria-hidden="true"><path d="M2 3.8 5 6.8l3-3"/></svg>
     </div>
     <div class="aster-picker-list aster-popover" popover="manual" style=${placeStyle(p.id)} ${openWhen(open)}
       id=${listId} role="listbox" aria-label=${p.label ?? nothing} aria-labelledby=${p.labelledBy ?? nothing}>
-      ${choices.map((o, i) => html `<div class="aster-option" role="option" id=${optionId(i)}
-          aria-selected=${i === chosen ? "true" : "false"} ?data-active=${i === active}
-          @pointerdown=${(ev) => ev.preventDefault()}
-          @pointerup=${(ev) => {
-        // WebKit suppresses touch clicks after pointerdown is cancelled to retain focus.
-        if (ev.pointerType === "touch" && state.open.peek())
-            choose(i);
-    }}
-          @click=${() => { if (state.open.peek())
-        choose(i); }}>${o.label}</div>`)}
+      ${choices.length === 0 && filter && query !== ""
+        ? html `<div class="aster-choice-empty" role="status">${p.noResults ?? "No matches"}</div>`
+        : choices.map((o, i) => html `<div class="aster-option" role="option" id=${optionId(i)}
+            aria-selected=${i === chosen ? "true" : "false"} ?data-active=${i === active}
+            @pointerdown=${(ev) => ev.preventDefault()}
+            @pointerup=${(ev) => {
+            // WebKit suppresses touch clicks after pointerdown is cancelled to retain focus.
+            if (ev.pointerType === "touch" && state.open.peek())
+                choose(i);
+        }}
+            @click=${() => { if (state.open.peek())
+            choose(i); }}>${o.label}</div>`)}
     </div>
   </div>`;
 }
+/** A printable character typed with no command modifier. */
+function isTyping(e) {
+    return e.key.length === 1 && /\S/.test(e.key) && !e.ctrlKey && !e.metaKey && !e.altKey;
+}

package/dist/select/select.d.ts

@@ -11,6 +11,18 @@ export declare class Select extends BoundField {
     #private;
     get choices(): readonly Option[] | undefined;
     set choices(v: readonly Option[] | undefined);
+    /** Shown when no value is chosen. Default "Choose…". */
+    get placeholder(): string;
+    set placeholder(v: string);
+    /** Filters the allowed values as the person types. Default `false`. */
+    get filter(): boolean;
+    set filter(v: boolean);
+    /** Shows a clear button while a value is chosen; only acts on a nullable field. Default `false`. */
+    get clearable(): boolean;
+    set clearable(v: boolean);
+    /** What the filtered list says when nothing matches. Default "No matches". */
+    get noResults(): string;
+    set noResults(v: string);
     focus(options?: FocusOptions): void;
     protected control(c: ControlContext): View;
 }

package/dist/select/select.js

@@ -10,12 +10,44 @@ import { ChoiceState, choiceView } from "./choice.js";
 export class Select extends BoundField {
     #state = new ChoiceState();
     #choices = this.prop(undefined);
+    #placeholder = this.prop("Choose…");
+    #filter = this.prop(false);
+    #clearable = this.prop(false);
+    #noResults = this.prop("No matches");
     get choices() {
         return this.#choices.value;
     }
     set choices(v) {
         this.#choices.value = v;
     }
+    /** Shown when no value is chosen. Default "Choose…". */
+    get placeholder() {
+        return this.#placeholder.value;
+    }
+    set placeholder(v) {
+        this.#placeholder.value = v;
+    }
+    /** Filters the allowed values as the person types. Default `false`. */
+    get filter() {
+        return this.#filter.value;
+    }
+    set filter(v) {
+        this.#filter.value = v;
+    }
+    /** Shows a clear button while a value is chosen; only acts on a nullable field. Default `false`. */
+    get clearable() {
+        return this.#clearable.value;
+    }
+    set clearable(v) {
+        this.#clearable.value = v;
+    }
+    /** What the filtered list says when nothing matches. Default "No matches". */
+    get noResults() {
+        return this.#noResults.value;
+    }
+    set noResults(v) {
+        this.#noResults.value = v;
+    }
     focus(options) {
         this.querySelector("[role=combobox]")?.focus(options);
     }
@@ -27,8 +59,12 @@ export class Select extends BoundField {
                 ...(c.meta?.allowedValues ?? []).map((a) => ({ value: a.value, label: a.label ?? String(a.value) })),
             ],
             value: c.value,
-            placeholder: "Choose…",
+            placeholder: this.#placeholder.value,
             readOnly: c.state.readOnly,
+            disabled: !c.state.enabled,
+            filter: this.#filter.value,
+            clearable: this.#clearable.value && c.meta?.nullable === true,
+            noResults: this.#noResults.value,
             ...(this.labelled ? { labelledBy: `${c.id}-label` } : { label: c.label }),
             required: c.state.required,
             invalid: c.invalid,

package/dist/styles/contract.d.ts

@@ -34,3 +34,17 @@ export declare const TOKEN_NAMES: readonly string[];
 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[];
+/**
+ * Component geometry intents, by component. Unlike [[TOKENS]] an identity
+ * need not define these: each has a default in `base.css`, and a component
+ * uses it for geometry CSS owns. An app may set one on a placement.
+ */
+export declare const COMPONENT_VARS: {
+    readonly form: readonly ["label-width"];
+    readonly grid: readonly ["header-height", "toolbar-height", "row-min-height", "tree-indent", "summary-height"];
+    readonly menu: readonly ["cell-height", "icon-size"];
+    readonly window: readonly ["header-height"];
+    readonly dialog: readonly ["max-width"];
+};
+/** Every name in [[constant:COMPONENT_VARS]] as a full custom property name, such as `--aster-grid-header-height`. */
+export declare const COMPONENT_VAR_NAMES: readonly string[];

package/dist/styles/contract.js

@@ -37,3 +37,18 @@ export const TOKEN_NAMES = Object.values(TOKENS).flat().map((t) => `--aster-${t}
 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}`);
+/**
+ * Component geometry intents, by component. Unlike [[TOKENS]] an identity
+ * need not define these: each has a default in `base.css`, and a component
+ * uses it for geometry CSS owns. An app may set one on a placement.
+ */
+export const COMPONENT_VARS = {
+    form: ["label-width"],
+    grid: ["header-height", "toolbar-height", "row-min-height", "tree-indent", "summary-height"],
+    menu: ["cell-height", "icon-size"],
+    window: ["header-height"],
+    dialog: ["max-width"],
+};
+/** Every name in [[constant:COMPONENT_VARS]] as a full custom property name, such as `--aster-grid-header-height`. */
+export const COMPONENT_VAR_NAMES = Object.entries(COMPONENT_VARS)
+    .flatMap(([component, names]) => names.map((name) => `--aster-${component}-${name}`));

package/dist/switch/switch.d.ts

@@ -11,6 +11,10 @@ export interface SwitchBinding {
  * 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.
+ *
+ * `readOnly` keeps the switch focusable and announced but stops changes;
+ * `disabled` takes it out of the tab order as well. `onLabel` and `offLabel`
+ * reword the visible state ("Visible" / "Hidden").
  */
 export declare class Switch extends AsterElement {
     #private;
@@ -18,5 +22,17 @@ export declare class Switch extends AsterElement {
     set binding(v: SwitchBinding | undefined);
     get label(): string;
     set label(v: string);
+    /** Removes the switch from the tab order and stops it toggling. Default `false`. */
+    get disabled(): boolean;
+    set disabled(v: boolean);
+    /** Keeps the switch focusable but stops it toggling. Default `false`. */
+    get readOnly(): boolean;
+    set readOnly(v: boolean);
+    /** Text shown while the switch is on. Default "On" when either label is given. */
+    get onLabel(): string | undefined;
+    set onLabel(v: string | undefined);
+    /** Text shown while the switch is off. Default "Off" when either label is given. */
+    get offLabel(): string | undefined;
+    set offLabel(v: string | undefined);
     protected render(): View;
 }

package/dist/switch/switch.js

@@ -6,12 +6,20 @@ import { AsterElement, define, uid } from "../base/element.js";
  * 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.
+ *
+ * `readOnly` keeps the switch focusable and announced but stops changes;
+ * `disabled` takes it out of the tab order as well. `onLabel` and `offLabel`
+ * reword the visible state ("Visible" / "Hidden").
  */
 export class Switch extends AsterElement {
     #binding = this.prop(undefined);
     #label = this.prop("");
     #pending = this.prop(undefined);
     #error = this.prop(undefined);
+    #disabled = this.prop(false);
+    #readOnly = this.prop(false);
+    #onLabel = this.prop(undefined);
+    #offLabel = this.prop(undefined);
     #id = uid("aster-switch");
     get binding() {
         return this.#binding.value;
@@ -25,6 +33,34 @@ export class Switch extends AsterElement {
     set label(v) {
         this.#label.value = v;
     }
+    /** Removes the switch from the tab order and stops it toggling. Default `false`. */
+    get disabled() {
+        return this.#disabled.value;
+    }
+    set disabled(v) {
+        this.#disabled.value = v;
+    }
+    /** Keeps the switch focusable but stops it toggling. Default `false`. */
+    get readOnly() {
+        return this.#readOnly.value;
+    }
+    set readOnly(v) {
+        this.#readOnly.value = v;
+    }
+    /** Text shown while the switch is on. Default "On" when either label is given. */
+    get onLabel() {
+        return this.#onLabel.value;
+    }
+    set onLabel(v) {
+        this.#onLabel.value = v;
+    }
+    /** Text shown while the switch is off. Default "Off" when either label is given. */
+    get offLabel() {
+        return this.#offLabel.value;
+    }
+    set offLabel(v) {
+        this.#offLabel.value = v;
+    }
     render() {
         const b = this.#binding.value;
         if (!b)
@@ -34,23 +70,37 @@ export class Switch extends AsterElement {
         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)}>
+        const labelled = this.#onLabel.value !== undefined || this.#offLabel.value !== undefined;
+        const stateText = labelled ? (on ? this.#onLabel.value ?? "On" : this.#offLabel.value ?? "Off") : undefined;
+        const stateId = stateText === undefined ? undefined : `${this.#id}-state`;
+        const describedBy = [stateId ?? "", error ? `${this.#id}-error` : ""].filter(Boolean).join(" ") || undefined;
+        return html `<div class="aster-switch-row" data-click
+        ?data-disabled=${this.#disabled.value} ?data-readonly=${this.#readOnly.value}
+        @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>
+        <span class="aster-switch-end">
+          ${stateText === undefined ? nothing : html `<span class="aster-switch-state" id=${stateId}>${stateText}</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-disabled=${this.#readOnly.value ? "true" : nothing}
+            aria-readonly=${this.#readOnly.value ? "true" : nothing}
+            aria-describedby=${describedBy ?? nothing}
+            ?disabled=${this.#disabled.value}
+            @click=${() => this.#toggle(!on)}></button>
+        </span>
       </div>
       ${error ? html `<p class="aster-error" id=${`${this.#id}-error`} role="alert">${error}</p>` : nothing}`;
     }
     #rowClick(e) {
+        if (this.#disabled.peek() || this.#readOnly.peek())
+            return;
         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)
+        if (!b || this.#disabled.peek() || this.#readOnly.peek() || this.#pending.peek() !== undefined)
             return;
         this.#pending.value = to;
         this.#error.value = undefined;

package/dist/tree/navigator.d.ts

@@ -28,6 +28,9 @@ export declare class TreeNavigator extends AsterElement {
     set choosable(v: ((entity: Entity) => string | undefined) | undefined);
     /** The level shown, as keys from the top. */
     get path(): readonly KeyText[];
+    /** Whether the bar carries a search field that narrows the level's loaded rows. Default `false`. */
+    get search(): boolean;
+    set search(v: boolean);
     /** Shows the level under `key` (`undefined`: the top), as if each level were opened in turn. */
     go(key: KeyText | undefined): Promise<void>;
     focus(options?: FocusOptions): void;

package/dist/tree/navigator.js

@@ -18,6 +18,8 @@ export class TreeNavigator extends AsterElement {
     #chooseLabel = this.prop("Choose");
     #headingLevel = this.prop(2);
     #choosable = this.prop(undefined);
+    #search = this.prop(false);
+    #query = this.prop("");
     /** Keys from the top level down to the level shown. */
     #path = signal([]);
     #back = signal([]);
@@ -59,6 +61,15 @@ export class TreeNavigator extends AsterElement {
     get path() {
         return this.#path.value;
     }
+    /** Whether the bar carries a search field that narrows the level's loaded rows. Default `false`. */
+    get search() {
+        return this.#search.value;
+    }
+    set search(v) {
+        this.#search.value = v;
+        if (!v)
+            this.#query.value = "";
+    }
     /** Shows the level under `key` (`undefined`: the top), as if each level were opened in turn. */
     async go(key) {
         const tree = this.#tree.peek();
@@ -83,6 +94,8 @@ export class TreeNavigator extends AsterElement {
             return e ? String(e[display] ?? "") : "…";
         };
         const loaded = level.keys.value.filter((k) => k !== undefined);
+        const query = this.#query.value.trim().toLowerCase();
+        const matches = query ? loaded.filter((key) => title(key).toLowerCase().includes(query)) : loaded;
         const count = level.count.value;
         if (count === undefined && level.status.peek() !== "loading")
             queueMicrotask(() => void level.ensure(0, level.pageSize).catch(() => { }));
@@ -99,6 +112,10 @@ export class TreeNavigator extends AsterElement {
                 @click=${() => this.#move(path.slice(0, i + 1), i + 1 >= path.length ? 1 : -1)}>${title(k)}</button></li>`)}
           </ol>
         </nav>
+        ${this.#search.value ? html `<div class="aster-drill-search">
+          <input type="search" placeholder="Search" aria-label=${`Search ${this.#label.value || "this level"}`}
+            .value=${this.#query.value} @input=${(e) => { this.#query.value = e.target.value; }}>
+        </div>` : nothing}
       </div>
       <div class="aster-drill-heading" role="heading" aria-level=${this.#headingLevel.value} id=${`${this.#id}-heading`} tabindex="-1">${heading}</div>
       <div class="aster-drill-viewport">
@@ -110,7 +127,8 @@ export class TreeNavigator extends AsterElement {
         }}>
           ${count === undefined ? html `<li class="aster-drill-empty"><span role="status">Loading…</span></li>` : nothing}
           ${count === 0 ? html `<li class="aster-drill-empty">Nothing here.</li>` : nothing}
-          ${loaded.map((key) => {
+          ${query && loaded.length > 0 && matches.length === 0 ? html `<li class="aster-drill-empty"><span role="status">Nothing matches.</span></li>` : nothing}
+          ${matches.map((key) => {
             const entity = this.#entity(key);
             const name = title(key);
             const folder = tree.hasChildren(key, parent);
@@ -128,7 +146,7 @@ export class TreeNavigator extends AsterElement {
                 : nothing}
             </li>`;
         })}
-          ${count !== undefined && loaded.length < count ? html `<li class="aster-drill-empty"><span role="status">${loaded.length} of ${count}…</span></li>` : nothing}
+          ${!query && count !== undefined && loaded.length < count ? html `<li class="aster-drill-empty"><span role="status">${loaded.length} of ${count}…</span></li>` : nothing}
         </ul>
       </div>
     </section>`;
@@ -151,6 +169,7 @@ export class TreeNavigator extends AsterElement {
         return this.#tree.value?.entity(key);
     }
     #move(path, direction, replaceHistory = false) {
+        this.#query.value = "";
         const from = this.#path.peek();
         if (from.join() === path.join())
             return;
@@ -216,6 +235,11 @@ export class TreeNavigator extends AsterElement {
     #key(e) {
         if (e.key === "Escape") {
             e.stopPropagation();
+            if (e.target instanceof HTMLInputElement && this.#query.peek()) {
+                e.preventDefault();
+                this.#query.value = "";
+                return;
+            }
             this.emit("cancel");
         }
         else if (e.key === "Backspace" && !e.target.matches("input, textarea") && this.#path.peek().length) {

package/dist/window/chrome.d.ts

@@ -1,3 +1,7 @@
 import type { View } from "../base/element.ts";
+export interface WindowBarOptions {
+    /** The heading's outline level. `2` is the native h2 level and adds no attribute. */
+    readonly level?: number;
+}
 /** Shared title/chrome geometry for floating windows and dashboard portlets. */
-export declare function windowBar(id: string, heading: string, actions: View, drag?: (event: PointerEvent) => void): View;
+export declare function windowBar(id: string, heading: string | View, actions: View, drag?: (event: PointerEvent) => void, options?: WindowBarOptions): View;

package/dist/window/chrome.js

@@ -1,7 +1,8 @@
-import { html } from "lit-html";
+import { html, nothing } from "lit-html";
 /** Shared title/chrome geometry for floating windows and dashboard portlets. */
-export function windowBar(id, heading, actions, drag) {
+export function windowBar(id, heading, actions, drag, options) {
+    const level = options?.level === undefined || options.level === 2 ? nothing : options.level;
     return html `<div class="aster-window-bar" @pointerdown=${drag}>
-    <h2 id=${id}>${heading}</h2>${actions}
+    <h2 id=${id} aria-level=${level}>${heading}</h2>${actions}
   </div>`;
 }

package/dist/window/config.d.ts

@@ -0,0 +1,71 @@
+/** The parts of a floating window's chrome it draws. Omitted fields keep their defaults. */
+export interface WindowChrome {
+    /** The title bar: heading, move control and window controls. Default `true`. */
+    readonly header?: boolean;
+    /** The heading inside the title bar. Default `true`; a hidden heading still names the window. */
+    readonly title?: boolean;
+    /** The Close control. Default `true`. */
+    readonly close?: boolean;
+    /** The Minimize control. Default: shown for managed windows. */
+    readonly minimize?: boolean;
+    /** The Maximize/Restore control. Default: shown for managed windows. */
+    readonly maximize?: boolean;
+    /** Pointer and keyboard resizing. Default `true`. */
+    readonly resizer?: boolean;
+    /** The footer region at the bottom of the window. Default `false`; setting `footer` turns it on. */
+    readonly footer?: boolean;
+    /** The status region at the bottom of the window. Default `false`; setting `status` turns it on. */
+    readonly statusBar?: boolean;
+}
+export type WindowState = "normal" | "maximized" | "minimized";
+export interface WindowBounds {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface WindowPlacement {
+    state: WindowState;
+    bounds?: WindowBounds;
+    restoreMaximized?: boolean;
+}
+/** [[object:WindowChrome]] with every default filled in. */
+export interface ResolvedWindowChrome {
+    readonly header: boolean;
+    readonly title: boolean;
+    readonly close: boolean;
+    readonly minimize: boolean;
+    readonly maximize: boolean;
+    readonly resizer: boolean;
+    readonly footer: boolean;
+    readonly statusBar: boolean;
+}
+/** Minimize and maximize stay managed-window chrome unless the host overrides them. */
+export declare function resolveWindowChrome(chrome: WindowChrome, managed: boolean): ResolvedWindowChrome;
+/** A placement is rejected atomically; bounds are finite and positive. */
+export declare function parseWindowPlacement(value: unknown): WindowPlacement;
+/** The rectangle a window may occupy, in viewport pixels. */
+export interface WindowLimits {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+}
+/** Keeps a window's top-left inside `limits`, never computing layout of its own. */
+export declare function clampWindow(at: {
+    x: number;
+    y: number;
+}, size: {
+    width: number;
+    height: number;
+}, limits: WindowLimits): {
+    x: number;
+    y: number;
+};
+export declare function centerWindow(size: {
+    width: number;
+    height: number;
+}, limits: WindowLimits): {
+    x: number;
+    y: number;
+};