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

package/dist/select/choice.js

@@ -0,0 +1,122 @@
+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. */
+export class ChoiceState {
+    open = signal(false);
+    active = signal(0);
+}
+/**
+ * A select-only combobox: the value in a frame, and a list drawn like the
+ * picker's rather than by the platform.
+ *
+ * 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`.
+ */
+export function choiceView(state, p) {
+    const choices = p.options;
+    const current = p.value ?? null;
+    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 listId = `${p.id}-options`;
+    const optionId = (i) => `${p.id}-option-${i}`;
+    const choose = (i) => {
+        const o = choices[i];
+        if (o)
+            p.choose(o.value);
+        state.open.value = false;
+    };
+    const show = () => {
+        if (p.readOnly)
+            return;
+        state.active.value = Math.max(0, chosen);
+        state.open.value = true;
+    };
+    return html `<div class="aster-picker">
+    <div class="aster-field aster-select" data-ring-owner style=${anchorStyle(p.id)}
+      @click=${(e) => {
+        e.currentTarget.querySelector("[role=combobox]")?.focus();
+        if (state.open.peek())
+            state.open.value = false;
+        else
+            show();
+    }}>
+      <div id=${p.id} class="aster-select-value" role="combobox" tabindex="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-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)}
+          @keydown=${(e) => {
+        if (p.readOnly)
+            return;
+        const n = choices.length;
+        if (!state.open.peek()) {
+            if (["ArrowDown", "ArrowUp", "Enter", " "].includes(e.key)) {
+                e.preventDefault();
+                show();
+            }
+            return;
+        }
+        const move = (i) => {
+            e.preventDefault();
+            state.active.value = i;
+        };
+        switch (e.key) {
+            case "ArrowDown":
+                return move(Math.min(n - 1, active + 1));
+            case "ArrowUp":
+                return move(Math.max(0, active - 1));
+            case "Home":
+                return move(0);
+            case "End":
+                return move(n - 1);
+            case "Enter":
+            case " ":
+                e.preventDefault();
+                return choose(active);
+            case "Escape":
+                e.preventDefault();
+                e.stopPropagation();
+                state.open.value = false;
+                return;
+            case "Tab":
+                state.open.value = false;
+                return;
+            default: {
+                if (e.key.length !== 1 || !/\S/.test(e.key))
+                    return;
+                const k = e.key.toLowerCase();
+                for (let step = 1; step <= n; step++) {
+                    const i = (active + step) % n;
+                    if (choices[i].label.toLowerCase().startsWith(k))
+                        return move(i);
+                }
+            }
+        }
+    }}>${shown}</div>
+      <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>`)}
+    </div>
+  </div>`;
+}

package/dist/select/many.d.ts

@@ -0,0 +1,13 @@
+import type { Value } from "@getaster/data";
+import type { Option } from "./choice.ts";
+/** The same finite multi-choice control for record rules and query drafts. */
+export declare function manyView(p: {
+    readonly label: string;
+    readonly options: readonly Option[];
+    readonly values: readonly Value[];
+    readonly change: (values: readonly Value[]) => void;
+    readonly readOnly?: boolean;
+    readonly invalid?: boolean;
+    readonly describedBy?: string;
+    readonly pending?: boolean;
+}): import("lit-html").TemplateResult<1>;

package/dist/select/many.js

@@ -0,0 +1,20 @@
+import { html, nothing } from "lit-html";
+/** The same finite multi-choice control for record rules and query drafts. */
+export function manyView(p) {
+    const missing = p.values.filter((v) => !p.options.some((o) => o.value === v));
+    const options = [...p.options, ...missing.map((value) => ({ value, label: `Unavailable: ${String(value)}` }))];
+    return html `<fieldset class="aster-rule-many" tabindex="-1" aria-invalid=${p.invalid ? "true" : nothing}
+    aria-describedby=${p.describedBy ?? nothing} ?disabled=${p.readOnly} ?data-pending=${p.pending}>
+    <legend class="aster-sr-only">${p.label}</legend>
+    ${options.map((o) => html `<label><input type="checkbox" .checked=${p.values.includes(o.value)}
+      @change=${(e) => {
+        const input = e.target;
+        const group = input.closest("fieldset");
+        p.change(input.checked ? [...p.values, o.value] : p.values.filter((v) => v !== o.value));
+        queueMicrotask(() => {
+            if (!input.isConnected && group?.isConnected)
+                (group.querySelector("input") ?? group).focus();
+        });
+    }}>${o.label}</label>`)}
+  </fieldset>`;
+}

package/dist/select/select.d.ts

@@ -0,0 +1,16 @@
+import { type View } from "../base/element.ts";
+import { BoundField, type ControlContext } from "../field/bound-field.ts";
+import { type Option } from "./choice.ts";
+/**
+ * One of a field's allowed values (`Validation.AllowedValues`), labelled from
+ * metadata; a nullable field also offers "None". `choices` replaces them,
+ * such as the operators that suit another field's type. A select-only
+ * combobox (see `choiceView`), so its list matches the picker's.
+ */
+export declare class Select extends BoundField {
+    #private;
+    get choices(): readonly Option[] | undefined;
+    set choices(v: readonly Option[] | undefined);
+    focus(options?: FocusOptions): void;
+    protected control(c: ControlContext): View;
+}

package/dist/select/select.js

@@ -0,0 +1,40 @@
+import { define } from "../base/element.js";
+import { BoundField } from "../field/bound-field.js";
+import { ChoiceState, choiceView } from "./choice.js";
+/**
+ * One of a field's allowed values (`Validation.AllowedValues`), labelled from
+ * metadata; a nullable field also offers "None". `choices` replaces them,
+ * such as the operators that suit another field's type. A select-only
+ * combobox (see `choiceView`), so its list matches the picker's.
+ */
+export class Select extends BoundField {
+    #state = new ChoiceState();
+    #choices = this.prop(undefined);
+    get choices() {
+        return this.#choices.value;
+    }
+    set choices(v) {
+        this.#choices.value = v;
+    }
+    focus(options) {
+        this.querySelector("[role=combobox]")?.focus(options);
+    }
+    control(c) {
+        return choiceView(this.#state, {
+            id: c.id,
+            options: this.#choices.value ?? [
+                ...(c.meta?.nullable ? [{ value: null, label: "None" }] : []),
+                ...(c.meta?.allowedValues ?? []).map((a) => ({ value: a.value, label: a.label ?? String(a.value) })),
+            ],
+            value: c.value,
+            placeholder: "Choose…",
+            readOnly: c.state.readOnly,
+            ...(this.labelled ? { labelledBy: `${c.id}-label` } : { label: c.label }),
+            required: c.state.required,
+            invalid: c.invalid,
+            ...(c.describedBy ? { describedBy: c.describedBy } : {}),
+            choose: (v) => this.write(v),
+        });
+    }
+}
+define("aster-select", Select);

package/dist/sidebar/sidebar.d.ts

@@ -0,0 +1,47 @@
+import { type View } from "../base/element.ts";
+export interface SidebarItem {
+    readonly id: string;
+    readonly label: string;
+    readonly href?: string;
+    readonly badge?: string;
+    readonly icon?: string;
+    readonly hidden?: boolean;
+    readonly disabled?: boolean;
+    readonly reason?: string;
+    readonly children?: readonly SidebarItem[];
+}
+/** Navigation URLs are limited to web, relative and fragment destinations. */
+export declare function sidebarHref(value: string): boolean;
+export declare const sidebarItems: import("../index.ts").CompositeType<readonly SidebarItem[]>;
+/** Controlled navigation: hosts own routing, permissions and selection policy. */
+export declare const Sidebar: import("../index.ts").DeclaredElement<{
+    readonly label: {
+        readonly type: import("../index.ts").CompositeType<string>;
+        readonly initial: () => string;
+        readonly description: string;
+    };
+    readonly items: {
+        readonly type: import("../index.ts").CompositeType<readonly SidebarItem[]>;
+        readonly initial: () => readonly SidebarItem[];
+        readonly description: string;
+    };
+    readonly value: {
+        readonly type: Omit<import("../index.ts").CompositeType<string>, "validate"> & import("../index.ts").CompositeType<string | undefined> & {
+            readonly optional: true;
+        };
+        readonly initial: () => string | undefined;
+        readonly description: string;
+    };
+    readonly renderIcon: {
+        readonly type: Omit<import("../index.ts").CompositeType<(item: SidebarItem) => View>, "validate"> & import("../index.ts").CompositeType<((item: SidebarItem) => View) | undefined> & {
+            readonly optional: true;
+        };
+        readonly initial: () => ((item: SidebarItem) => View) | undefined;
+        readonly description: string;
+    };
+    readonly compact: {
+        readonly type: import("../index.ts").CompositeType<boolean>;
+        readonly initial: () => boolean;
+        readonly description: string;
+    };
+}>;

package/dist/sidebar/sidebar.js

@@ -0,0 +1,105 @@
+import { html, nothing } from "lit-html";
+import { each } from "../base/element.js";
+import { defineElement, elementProperty } from "../composition/element.js";
+import { compositeTypes as t } from "../composition/contracts.js";
+/** Navigation URLs are limited to web, relative and fragment destinations. */
+export function sidebarHref(value) {
+    try {
+        return ["http:", "https:"].includes(new URL(value, "https://aster.invalid/").protocol);
+    }
+    catch {
+        return false;
+    }
+}
+function itemsValid(value) {
+    const ids = new Set();
+    const visit = (items, depth) => Array.isArray(items) && depth < 16 && items.every(item => {
+        if (!item || typeof item !== "object" || typeof item.id !== "string" || !item.id || ids.has(item.id) || typeof item.label !== "string" || !item.label.trim())
+            return false;
+        ids.add(item.id);
+        const keys = ["id", "label", "href", "badge", "icon", "hidden", "disabled", "reason", "children"];
+        return Object.keys(item).every(key => keys.includes(key))
+            && ["badge", "icon", "reason"].every(key => item[key] === undefined || typeof item[key] === "string")
+            && ["hidden", "disabled"].every(key => item[key] === undefined || typeof item[key] === "boolean")
+            && (item.href === undefined || typeof item.href === "string" && sidebarHref(item.href))
+            && (item.children === undefined || item.href === undefined && visit(item.children, depth + 1));
+    });
+    return visit(value, 0);
+}
+const itemSchema = {
+    type: "object", additionalProperties: false, required: ["id", "label"],
+    properties: {
+        id: { type: "string", minLength: 1 }, label: { type: "string", minLength: 1 },
+        href: { type: "string" }, badge: { type: "string" }, icon: { type: "string" },
+        hidden: { type: "boolean" }, disabled: { type: "boolean" }, reason: { type: "string" },
+        children: { type: "array", items: { type: "object" } },
+    },
+};
+export const sidebarItems = t.custom("navigation items with unique IDs and safe URLs", itemsValid, {
+    type: "array", items: itemSchema,
+});
+/** Controlled navigation: hosts own routing, permissions and selection policy. */
+export const Sidebar = defineElement({
+    tag: "aster-sidebar",
+    properties: {
+        label: elementProperty(t.string, () => "Navigation", "Accessible navigation name"),
+        items: elementProperty(sidebarItems, () => [], "Navigation items; derive visibility and availability in the model"),
+        value: elementProperty(t.optional(t.string), () => undefined, "Current item ID"),
+        renderIcon: elementProperty(t.optional(t.custom("navigation icon renderer", (value) => typeof value === "function", { asterType: "function" })), () => undefined, "Trusted icon renderer; labels remain text"),
+        compact: elementProperty(t.boolean, () => false, "Use an icon rail with accessible labels"),
+    },
+    render: ({ label, items, value, compact, renderIcon }, element) => {
+        const choose = (event, item) => {
+            if (item.disabled) {
+                event.preventDefault();
+                return;
+            }
+            // Modified link clicks keep native open-in-new-tab behaviour.
+            if (item.href && (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || event.button !== 0))
+                return;
+            const allowed = element.dispatchEvent(new CustomEvent("navigate", { detail: item.id, bubbles: true, cancelable: true }));
+            if (!allowed)
+                event.preventDefault();
+        };
+        const list = (entries, unavailable = false) => html `<ul>
+      ${each(entries.filter(item => !item.hidden), item => item.id, item => {
+            const disabled = unavailable || !!item.disabled;
+            const effective = disabled ? { ...item, disabled: true } : item;
+            const content = html `<span class="aster-sidebar-icon" aria-hidden="true">${renderIcon ? renderIcon(item) : item.icon ?? item.label.slice(0, 1)}</span>
+          <span class="aster-sidebar-label">${item.label}</span>${item.badge ? html `<span class="aster-sidebar-badge">${item.badge}</span>` : nothing}`;
+            return html `<li>${item.children ? html `<details open><summary title=${compact ? item.label : nothing}>${content}</summary>${list(item.children, disabled)}</details>`
+                : item.href ? html `<a class="aster-sidebar-item" href=${disabled ? nothing : item.href}
+            aria-disabled=${disabled ? "true" : nothing} aria-current=${item.id === value ? "page" : nothing}
+            tabindex=${disabled ? "-1" : nothing} title=${item.reason ?? (compact ? item.label : nothing)}
+            @click=${(event) => choose(event, effective)}>${content}${item.reason ? html `<span class="aster-sr-only"> ${item.reason}</span>` : nothing}</a>`
+                    : html `<button class="aster-sidebar-item" type="button" ?disabled=${disabled}
+            aria-current=${item.id === value ? "page" : nothing} title=${item.reason ?? (compact ? item.label : nothing)}
+            @click=${(event) => choose(event, effective)}>${content}${item.reason ? html `<span class="aster-sr-only"> ${item.reason}</span>` : nothing}</button>`}</li>`;
+        })}</ul>`;
+        return html `<nav class="aster-sidebar" aria-label=${label} ?data-compact=${compact}
+      @keydown=${(event) => {
+            if (!(event.target instanceof HTMLElement) || !event.target.matches("a, button, summary"))
+                return;
+            const controls = [...element.querySelectorAll("a[href],button:not(:disabled),summary")].filter(node => node.getClientRects().length > 0);
+            const index = controls.indexOf(event.target);
+            let next;
+            switch (event.key) {
+                case "ArrowDown":
+                    next = Math.min(index + 1, controls.length - 1);
+                    break;
+                case "ArrowUp":
+                    next = Math.max(0, index - 1);
+                    break;
+                case "Home":
+                    next = 0;
+                    break;
+                case "End":
+                    next = controls.length - 1;
+                    break;
+                default: return;
+            }
+            event.preventDefault();
+            controls[next]?.focus();
+        }}>${list(items)}</nav>`;
+    },
+});

package/dist/slicer/slicer.d.ts

@@ -0,0 +1,26 @@
+import type { SharedFilters } from "@getaster/data";
+import { AsterElement, type View } from "../base/element.ts";
+/**
+ * The page's shared filter as chips: one per contribution, said in words,
+ * each removing its own. It's a toolbar (WAI-ARIA APG): one tab stop; ←, →,
+ * Home and End move between chips; Enter, Space, Delete and Backspace remove
+ * the focused one; focus then moves to its neighbour, or to the "no
+ * filters" text when none is left. "Clear all" is the last item when there
+ * are two or more. Every removal is announced.
+ *
+ * A contribution whose contributor gave no way to withdraw it (`removable`
+ * false) shows as a chip that can't be pressed, and says so.
+ */
+export declare class Slicer extends AsterElement {
+    #private;
+    get filters(): SharedFilters | undefined;
+    set filters(v: SharedFilters | undefined);
+    /** Names the toolbar, and shows before the chips. */
+    get label(): string;
+    set label(v: string);
+    /** Shown, and focused after the last removal, when there are no contributions. */
+    get empty(): string;
+    set empty(v: string);
+    protected render(): View;
+    protected updated(): void;
+}

package/dist/slicer/slicer.js

@@ -0,0 +1,140 @@
+import { html, nothing } from "lit-html";
+import { AsterElement, define, each, uid } from "../base/element.js";
+import { announce } from "../toast/toast.js";
+const CROSS = html `<svg viewBox="0 0 10 10" aria-hidden="true"><path d="M2 2l6 6M8 2l-6 6" /></svg>`;
+/**
+ * The page's shared filter as chips: one per contribution, said in words,
+ * each removing its own. It's a toolbar (WAI-ARIA APG): one tab stop; ←, →,
+ * Home and End move between chips; Enter, Space, Delete and Backspace remove
+ * the focused one; focus then moves to its neighbour, or to the "no
+ * filters" text when none is left. "Clear all" is the last item when there
+ * are two or more. Every removal is announced.
+ *
+ * A contribution whose contributor gave no way to withdraw it (`removable`
+ * false) shows as a chip that can't be pressed, and says so.
+ */
+export class Slicer extends AsterElement {
+    #filters = this.prop(undefined);
+    #label = this.prop("Filters");
+    #empty = this.prop("None. Showing everything.");
+    /** The roving tab stop, by position among the toolbar's items. */
+    #active = this.prop(0);
+    #id = uid("aster-slicer");
+    /** Where focus goes after the next commit: an item's position, or the empty text. */
+    #refocus;
+    get filters() {
+        return this.#filters.value;
+    }
+    set filters(v) {
+        this.#filters.value = v;
+    }
+    /** Names the toolbar, and shows before the chips. */
+    get label() {
+        return this.#label.value;
+    }
+    set label(v) {
+        this.#label.value = v;
+    }
+    /** Shown, and focused after the last removal, when there are no contributions. */
+    get empty() {
+        return this.#empty.value;
+    }
+    set empty(v) {
+        this.#empty.value = v;
+    }
+    render() {
+        const filters = this.#filters.value;
+        if (!filters)
+            return nothing;
+        const items = filters.contributions.value;
+        const label = html `<span class="aster-slicer-label" id=${`${this.#id}-label`}>${this.#label.value}</span>`;
+        if (items.length === 0) {
+            return html `<div class="aster-slicer">${label}<p class="aster-slicer-empty" tabindex="-1" aria-describedby=${`${this.#id}-label`}>${this.#empty.value}</p></div>`;
+        }
+        const count = items.length + (items.length > 1 ? 1 : 0);
+        const active = Math.min(this.#active.value, count - 1);
+        return html `<div class="aster-slicer">
+      ${label}
+      <div class="aster-slicer-chips" role="toolbar" aria-labelledby=${`${this.#id}-label`} @keydown=${(e) => this.#key(e, count)}>
+        ${each(items, (c) => c.by, (c) => {
+            const i = items.indexOf(c);
+            const removable = filters.removable(c.by);
+            return html `<button type="button" class="aster-slicer-chip" data-index=${i} tabindex=${i === active ? 0 : -1}
+              aria-label=${removable ? `Remove filter: ${c.label}` : `Filter: ${c.label}, set by its source`}
+              aria-disabled=${removable ? nothing : "true"}
+              @click=${() => this.#remove(c, i)} @focus=${() => (this.#active.value = i)}>
+              <span>${c.label}</span>${removable ? CROSS : nothing}
+            </button>`;
+        })}
+        ${items.length > 1
+            ? html `<button type="button" class="aster-slicer-clear" data-index=${items.length} tabindex=${active === items.length ? 0 : -1}
+              @click=${() => this.#clearAll()} @focus=${() => (this.#active.value = items.length)}>Clear all</button>`
+            : nothing}
+      </div>
+    </div>`;
+    }
+    updated() {
+        const to = this.#refocus;
+        if (to === undefined)
+            return;
+        this.#refocus = undefined;
+        const target = to === "empty" ? this.querySelector(".aster-slicer-empty") : this.querySelector(`[data-index="${to}"]`);
+        target?.focus();
+    }
+    #key(e, count) {
+        const at = Number(e.target.closest("[data-index]")?.getAttribute("data-index") ?? 0);
+        let to;
+        switch (e.key) {
+            case "ArrowRight":
+            case "ArrowDown":
+                to = (at + 1) % count;
+                break;
+            case "ArrowLeft":
+            case "ArrowUp":
+                to = (at - 1 + count) % count;
+                break;
+            case "Home":
+                to = 0;
+                break;
+            case "End":
+                to = count - 1;
+                break;
+            case "Delete":
+            case "Backspace":
+                e.preventDefault();
+                e.target.closest(".aster-slicer-chip")?.click();
+                return;
+            default:
+                return;
+        }
+        e.preventDefault();
+        this.#active.value = to;
+        this.querySelector(`[data-index="${to}"]`)?.focus();
+    }
+    #remove(c, at) {
+        const filters = this.#filters.peek();
+        if (!filters?.removable(c.by))
+            return;
+        filters.remove(c.by);
+        const left = filters.contributions.peek().length;
+        // The neighbour that slid into this place, or the one before it.
+        const next = left === 0 ? "empty" : Math.min(at, left - 1);
+        this.#active.value = next === "empty" ? 0 : next;
+        this.#refocus = next;
+        announce(`Removed filter: ${c.label}. ${left === 0 ? "No filters." : left === 1 ? "1 filter left." : `${left} filters left.`}`);
+        this.emit("slicer-change", { removed: [c.by] });
+    }
+    #clearAll() {
+        const filters = this.#filters.peek();
+        if (!filters)
+            return;
+        const before = filters.contributions.peek().map((c) => c.by);
+        filters.clear();
+        const left = filters.contributions.peek().length;
+        this.#active.value = 0;
+        this.#refocus = left === 0 ? "empty" : 0;
+        announce(left === 0 ? "Cleared all filters." : `Cleared the filters that can be removed. ${left === 1 ? "1 filter left." : `${left} filters left.`}`);
+        this.emit("slicer-change", { removed: before.filter((b) => !filters.contributions.peek().some((c) => c.by === b)) });
+    }
+}
+define("aster-slicer", Slicer);

package/dist/split/split.d.ts

@@ -0,0 +1,41 @@
+import { AsterElement, type View } from "../base/element.ts";
+/**
+ * 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 declare class Split extends AsterElement {
+    #private;
+    get size(): number;
+    set size(v: number);
+    get orientation(): "horizontal" | "vertical";
+    set orientation(v: "horizontal" | "vertical");
+    get collapsible(): boolean;
+    set collapsible(v: boolean);
+    get collapsed(): boolean;
+    set collapsed(v: boolean);
+    get responsive(): boolean;
+    set responsive(v: boolean);
+    disconnectedCallback(): void;
+    protected updated(): void;
+    get start(): View;
+    set start(v: View);
+    get end(): View;
+    set end(v: View);
+    get width(): number;
+    set width(v: number);
+    get min(): number;
+    set min(v: number);
+    get max(): number;
+    set max(v: number);
+    /** The separator's accessible name. */
+    get label(): string;
+    set label(v: string);
+    get persist(): string;
+    set persist(v: string);
+    protected render(): View;
+}