@getaster/elements 0.3.0 → 0.4.0

package/dist/grid/policy.d.ts

@@ -0,0 +1,58 @@
+/** A capability switch: on or off, a field-name allowlist, or a predicate. */
+export type Capability = boolean | readonly string[] | ((field: string) => boolean);
+/** The plain-data form a composition catalog can carry. Predicates stay in JavaScript. */
+export type CapabilityValue = boolean | readonly string[];
+/**
+ * Per-field capability overrides. They narrow the global entry; they never
+ * grant what it refuses.
+ */
+export interface FieldPolicy {
+    /** Whether this field may be sorted, when the global entry permits it. */
+    sortable?: Capability;
+    /** Whether this field may be filtered, when the global entry permits it. */
+    filterable?: Capability;
+    /** Whether this field may be grouped on, when the global entry permits it. */
+    groupable?: Capability;
+    /** Whether this field's column may be resized, when the global entry permits it. */
+    resizable?: Capability;
+    /** Whether this field's column may be moved, when the global entry permits it. */
+    movable?: Capability;
+    /** Whether this field's column may be hidden, when the global entry permits it. */
+    hideable?: Capability;
+    /** Whether this field's column may be frozen, when the global entry permits it. */
+    freezable?: Capability;
+    /** Whether this field may be edited, when the global entry permits it. */
+    editable?: Capability;
+}
+/**
+ * What the page allows, keyed by field name. Policy can only restrict:
+ * schema and the grid's own structure refuse first, and a page rule's
+ * read-only reason outranks a policy reason. It never joins [[object:GridView]]:
+ * a saved view cannot carry another person's capabilities.
+ */
+export interface GridPolicy {
+    /** Global sort capability, default on. */
+    sortable?: Capability;
+    /** Global filter capability, default on. */
+    filterable?: Capability;
+    /** Global grouping capability, default on. */
+    groupable?: Capability;
+    /** Global column-resize capability, default on. */
+    resizable?: Capability;
+    /** Global column-move capability, default on. */
+    movable?: Capability;
+    /** Global column-hide capability, default on. */
+    hideable?: Capability;
+    /** Global column-freeze capability, default on. */
+    freezable?: Capability;
+    /** Global edit capability, default off. */
+    editable?: Capability;
+    /** Whether rows may be selected, default on. */
+    selectable?: boolean;
+    /** Per-field overrides, by field name. */
+    fields?: Readonly<Record<string, FieldPolicy>>;
+}
+/** One entry's answer for `field`; `fallback` when the entry says nothing. */
+export declare function permits(entry: Capability | undefined, field: string, fallback: boolean): boolean;
+/** The host's answer: the global entry, narrowed by the field's own entry. */
+export declare function policyPermits(policy: GridPolicy, capability: keyof FieldPolicy, field: string, fallback: boolean): boolean;

package/dist/grid/policy.js

@@ -0,0 +1,17 @@
+/** One entry's answer for `field`; `fallback` when the entry says nothing. */
+export function permits(entry, field, fallback) {
+    if (entry === undefined)
+        return fallback;
+    switch (typeof entry) {
+        case "boolean":
+            return entry;
+        case "function":
+            return entry(field);
+        default:
+            return entry.includes(field);
+    }
+}
+/** The host's answer: the global entry, narrowed by the field's own entry. */
+export function policyPermits(policy, capability, field, fallback) {
+    return permits(policy[capability], field, fallback) && permits(policy.fields?.[field]?.[capability], field, true);
+}

package/dist/grid/view.d.ts

@@ -24,9 +24,39 @@ export interface GridView {
     /** How many leading visible columns stay in place when scrolling sideways. */
     readonly frozen: number;
 }
-/** The query a view describes, within `base` (such as "this project only"). */
+/**
+ * Which view entries the grid can apply. A refused entry is a capability
+ * the schema, the grid's structure or the page policy doesn't allow.
+ */
+export interface ViewCapabilities {
+    readonly sortable?: (field: string) => boolean;
+    readonly filterable?: (field: string) => boolean;
+    readonly groupable?: (field: string) => boolean;
+    readonly hideable?: (field: string) => boolean;
+    readonly freezable?: (field: string) => boolean;
+}
+/** A view entry that the derived presentation leaves out, and why it was refused. */
+export interface ViewRefusal {
+    readonly kind: "sort" | "filter" | "criteria" | "group" | "hidden" | "frozen";
+    readonly field: string;
+}
+/** Fields a criteria expression reads, at the level it filters; related-record clauses name the navigation. */
+export declare function criteriaFields(criteria: Criteria): readonly string[];
+/** The view entries `allowed` refuses, for the drift note. The view itself is never rewritten. */
+export declare function viewRefusals(view: GridView, allowed: ViewCapabilities): readonly ViewRefusal[];
+/** The columns shown: a column the page forbids hiding stays visible. */
+export declare function effectiveColumns(view: GridView, hideable?: (field: string) => boolean): readonly GridColumn[];
+/** The frozen prefix, cut where the page forbids freezing a column. */
+export declare function effectiveFrozen(view: GridView, visible: readonly GridColumn[], freezable?: (field: string) => boolean): number;
+/** The grouping levels in force: stored levels the page refuses are left out. */
+export declare function effectiveGroups(view: GridView | undefined, groupable?: (field: string) => boolean): readonly string[];
+/**
+ * The query a view describes, within `base` (such as "this project only").
+ * Entries `allowed` refuses are left out of the derived query while the view
+ * keeps them, so a person's intent resumes when the page allows it again.
+ */
 /** `sortPaths` maps a column to what it sorts by, for a lookup column the related record's display field. */
-export declare function viewQuery(set: string, view: GridView, base?: Criteria, sortPaths?: Readonly<Record<string, string>>): Query;
+export declare function viewQuery(set: string, view: GridView, base?: Criteria, sortPaths?: Readonly<Record<string, string>>, allowed?: ViewCapabilities): Query;
 /** Every field of `type` that has a value to show, in declaration order, the key last. */
 export declare function defaultView(type: EntityType): GridView;
 /** The column's track: its width, or a share of the space with a floor that suits its type. */

package/dist/grid/view.js

@@ -1,10 +1,95 @@
-/** The query a view describes, within `base` (such as "this project only"). */
+/** Fields a criteria expression reads, at the level it filters; related-record clauses name the navigation. */
+export function criteriaFields(criteria) {
+    if (!criteria || typeof criteria !== "object")
+        return [];
+    const node = criteria;
+    switch (node.op) {
+        case "and":
+        case "or":
+            return Array.isArray(node.args) ? node.args.flatMap(criteriaFields) : [];
+        case "not":
+            return node.arg ? criteriaFields(node.arg) : [];
+        default: {
+            const fields = [];
+            if (typeof node.field === "string")
+                fields.push(node.field);
+            // A field-to-field comparison reads both operands; each must pass capability checks.
+            if (typeof node.other === "string")
+                fields.push(node.other);
+            return fields;
+        }
+    }
+}
+/** The view entries `allowed` refuses, for the drift note. The view itself is never rewritten. */
+export function viewRefusals(view, allowed) {
+    const refusals = [];
+    if (allowed.sortable)
+        for (const key of view.sort)
+            if (!allowed.sortable(key.field))
+                refusals.push({ kind: "sort", field: key.field });
+    if (allowed.filterable) {
+        for (const field of Object.keys(view.filters))
+            if (!allowed.filterable(field))
+                refusals.push({ kind: "filter", field });
+        if (view.criteria)
+            for (const field of new Set(criteriaFields(view.criteria)))
+                if (!allowed.filterable(field))
+                    refusals.push({ kind: "criteria", field });
+    }
+    if (allowed.groupable)
+        for (const field of groupFields(view))
+            if (!allowed.groupable(field))
+                refusals.push({ kind: "group", field });
+    if (allowed.hideable)
+        for (const column of view.columns)
+            if (column.hidden && !allowed.hideable(column.field))
+                refusals.push({ kind: "hidden", field: column.field });
+    // Frozen columns are a prefix: the first one the page refuses ends the frozen run.
+    if (allowed.freezable) {
+        const visible = effectiveColumns(view, allowed.hideable);
+        for (let i = 0; i < Math.min(view.frozen, visible.length); i++) {
+            const field = visible[i].field;
+            if (!allowed.freezable(field)) {
+                refusals.push({ kind: "frozen", field });
+                break;
+            }
+        }
+    }
+    return refusals;
+}
+/** The columns shown: a column the page forbids hiding stays visible. */
+export function effectiveColumns(view, hideable) {
+    return view.columns.filter((column) => !column.hidden || (hideable !== undefined && !hideable(column.field)));
+}
+/** The frozen prefix, cut where the page forbids freezing a column. */
+export function effectiveFrozen(view, visible, freezable) {
+    const wanted = Math.min(view.frozen, visible.length);
+    if (!freezable)
+        return wanted;
+    let frozen = 0;
+    while (frozen < wanted && freezable(visible[frozen].field))
+        frozen++;
+    return frozen;
+}
+/** The grouping levels in force: stored levels the page refuses are left out. */
+export function effectiveGroups(view, groupable) {
+    const fields = groupFields(view);
+    return groupable ? fields.filter((field) => groupable(field)) : fields;
+}
+/**
+ * The query a view describes, within `base` (such as "this project only").
+ * Entries `allowed` refuses are left out of the derived query while the view
+ * keeps them, so a person's intent resumes when the page allows it again.
+ */
 /** `sortPaths` maps a column to what it sorts by, for a lookup column the related record's display field. */
-export function viewQuery(set, view, base, sortPaths = {}) {
-    const parts = [...(base ? [base] : []), ...Object.values(view.filters), ...(view.criteria ? [view.criteria] : [])];
+export function viewQuery(set, view, base, sortPaths = {}, allowed = {}) {
+    const sort = allowed.sortable ? view.sort.filter((key) => allowed.sortable(key.field)) : view.sort;
+    const filters = Object.entries(view.filters).filter(([field]) => !allowed.filterable || allowed.filterable(field));
+    const criteria = view.criteria && (!allowed.filterable || criteriaFields(view.criteria).every(allowed.filterable)) ? view.criteria : undefined;
+    const parts = [...(base ? [base] : []), ...filters.map(([, filter]) => filter), ...(criteria ? [criteria] : [])];
     const filter = parts.length === 0 ? undefined : parts.length === 1 ? parts[0] : { op: "and", args: parts };
     const paths = { ...sortPaths, ...Object.fromEntries(view.columns.filter(c => c.sortField).map(c => [c.field, c.sortField])) };
-    const orderBy = view.sort.map((k) => (paths[k.field] ? { ...k, field: paths[k.field] } : k));
+    const orderBy = sort.map((k) => (paths[k.field] ? { ...k, field: paths[k.field] } : k));
     return { set, ...(filter ? { filter } : {}), ...(orderBy.length ? { orderBy } : {}) };
 }
 /** Every field of `type` that has a value to show, in declaration order, the key last. */

package/dist/index.d.ts

@@ -14,11 +14,11 @@ export { CaretGroup } from "./caret/caret-group.ts";
 export { Tabs, type TabItem } from "./tabs/tabs.ts";
 export { TileGrid, type TileContent, type TileState, type TileRenderer, type TilePresenter, type TileOpenDetail } from "./tile-grid/tile-grid.ts";
 export { Listbox, type RowMenuDetail, type RowRenderer } from "./listbox/listbox.ts";
-export { Button } from "./button/button.ts";
+export { Button, type ButtonSize, type ButtonTone } from "./button/button.ts";
 export { Field } from "./field/field.ts";
 export { Switch, type SwitchBinding } from "./switch/switch.ts";
 export { Dialog } from "./dialog/dialog.ts";
-export { Window, type WindowState, type WindowBounds, type WindowPlacement } from "./window/window.ts";
+export { Window, type WindowChrome, type WindowState, type WindowBounds, type WindowPlacement } from "./window/window.ts";
 export { Workspace, type WorkspaceEntry, type WorkspaceSnapshot } from "./window/workspace.ts";
 export { Dashboard } from "./dashboard/dashboard.ts";
 export type { DashboardValue, DashboardConfig, DashboardSize, DashboardWidget, DashboardSnapshot } from "./dashboard/layout.ts";
@@ -27,12 +27,13 @@ export { Toaster, announce, type ToastAction } from "./toast/toast.ts";
 export { Menu, type MenuItem } from "./menu/menu.ts";
 export { morph, setScheme } from "./motion.ts";
 export { absoluteTime, compactMoney, relativeTime } from "./format.ts";
-export { BoundField, type ControlContext } from "./field/bound-field.ts";
+export { BoundField, type ControlContext, type ValidateOn } from "./field/bound-field.ts";
 export { CompositeField, type CompositeFieldContext } from "./field/composite-field.ts";
 export { NumberField, type NumericType, type NumericValue } from "./field/number-field.ts";
 export { Stack, HorizontalLayout, VerticalLayout } from "./layout/stack.ts";
 export { Breadcrumbs, type BreadcrumbItem } from "./breadcrumbs/breadcrumbs.ts";
-export { Accordion, type AccordionItem } from "./section/accordion.ts";
+export { Accordion, type AccordionItem, type AccordionReorderDetail } from "./section/accordion.ts";
+export type { VisibilityMode } from "./section/policy.ts";
 export { Check } from "./field/check.ts";
 export { formatValue, parseInput } from "./field/values.ts";
 export { Select } from "./select/select.ts";
@@ -43,13 +44,14 @@ export { PickerOptions, type OptionsSpec } from "./picker/options.ts";
 export { TreePicker } from "./picker/tree-picker.ts";
 export { TreeChoices, type TreeChoicesSpec } from "./picker/tree-choices.ts";
 export { DateField } from "./date/date-field.ts";
-export { formatDate, parseDate, setClock } from "./date/dates.ts";
-export { Section } from "./section/section.ts";
-export { Form, type FormField, type FormItem, type FormSection, type FormValue } from "./form/form.ts";
-export { controlFor } from "./form/controls.ts";
+export { formatDate, parseDate, setClock, type DateFormat } from "./date/dates.ts";
+export { Section, type SectionChrome } from "./section/section.ts";
+export { Form, type FormChrome, type FormFeature, type FormField, type FormItem, type FormPolicy, type FormSection, type FormSubmitDetail, type FormValue } from "./form/form.ts";
+export { controlFor, type FormControl, type FormControlContext, type FormControlName, type FormControlRender } from "./form/controls.ts";
 export { Split } from "./split/split.ts";
 export { ListEditor, type ListColumn } from "./list-edit/list-edit.ts";
-export { Grid, type CellRenderer, type CellFormatter, type GridSummary, type GridCsvOptions, type Expansion, type ExpansionEditor, type GridTree, type Lookup, type RowControl, type RowState } from "./grid/grid.ts";
+export { Grid, type CellRenderer, type CellFormatter, type GridChrome, type GridCsvOptions, type GridFeature, type GridScrollAlign, type GridSummary, type GridToolbar, type Expansion, type ExpansionEditor, type GridTree, type Lookup, type RowControl, type RowState } from "./grid/grid.ts";
+export { GRID_LABEL_DEFAULTS, type CellClass, type CellClassRule, type CellStyleContext, type ClassNames, type ColumnAlign, type ColumnFormat, type ColumnPresentation, type ColumnValueMap, type GridLabel, type GridLabels, type GridPresentation, type Hilite, type MappedValue, type NumberFormatStyle, type PresentationTone, type RowClass, type RowClassRule, type RowStyleContext, type StyleDecoration, type ValueMapValue, type ValueMatch, type ValueMatchOperator } from "./grid/appearance.ts";
 export { RowHeights } from "./grid/rows.ts";
 export { TreeNavigator } from "./tree/navigator.ts";
 export { Carousel, type Slide } from "./carousel/carousel.ts";
@@ -58,6 +60,7 @@ export { FilterBuilder } from "./filter/filter-builder.ts";
 export { ComponentHost, type ComponentAdapter, type ComponentSession, type ComponentMount, type ComponentEnvironment } from "./component/component.ts";
 export { echartsAdapter, echartsColors, type EChartsAdapterOptions, type EChartsRuntime, type EChartsInstance } from "./component/echarts.ts";
 export { Slicer } from "./slicer/slicer.ts";
-export { defaultView, sortBy, viewQuery, type GridColumn, type GridView } from "./grid/view.ts";
-export { DENSITIES, DENSITY, DENSITY_NAMES, TOKENS, TOKEN_NAMES } from "./styles/contract.ts";
+export { defaultView, sortBy, viewQuery, type GridColumn, type GridView, type ViewCapabilities } from "./grid/view.ts";
+export type { Capability, CapabilityValue, FieldPolicy, GridPolicy } from "./grid/policy.ts";
+export { COMPONENT_VARS, COMPONENT_VAR_NAMES, DENSITIES, DENSITY, DENSITY_NAMES, TOKENS, TOKEN_NAMES } from "./styles/contract.ts";
 export { CompositeSessions, type CompositeSessionsOptions, type CompositeKeyedSession } from "./composition/sessions.ts";

package/dist/index.js

@@ -48,6 +48,7 @@ export { controlFor } from "./form/controls.js";
 export { Split } from "./split/split.js";
 export { ListEditor } from "./list-edit/list-edit.js";
 export { Grid } from "./grid/grid.js";
+export { GRID_LABEL_DEFAULTS } from "./grid/appearance.js";
 export { RowHeights } from "./grid/rows.js";
 export { TreeNavigator } from "./tree/navigator.js";
 export { Carousel } from "./carousel/carousel.js";
@@ -57,5 +58,5 @@ export { ComponentHost } from "./component/component.js";
 export { echartsAdapter, echartsColors } from "./component/echarts.js";
 export { Slicer } from "./slicer/slicer.js";
 export { defaultView, sortBy, viewQuery } from "./grid/view.js";
-export { DENSITIES, DENSITY, DENSITY_NAMES, TOKENS, TOKEN_NAMES } from "./styles/contract.js";
+export { COMPONENT_VARS, COMPONENT_VAR_NAMES, DENSITIES, DENSITY, DENSITY_NAMES, TOKENS, TOKEN_NAMES } from "./styles/contract.js";
 export { CompositeSessions } from "./composition/sessions.js";

package/dist/menu/config.d.ts

@@ -0,0 +1,7 @@
+/**
+ * The `aria-keyshortcuts` value for a human shortcut hint ("Ctrl+S", "⌘K"),
+ * or `undefined` when it isn't a keyboard shortcut this attribute can carry.
+ */
+export declare function ariaKeyshortcuts(shortcut: string | undefined): string | undefined;
+/** Whether a level reserves an icon cell, so labels line up across its items. */
+export declare function hasMenuIcons(items: readonly object[]): boolean;

package/dist/menu/config.js

@@ -0,0 +1,44 @@
+const MODIFIERS = {
+    ctrl: "Control", control: "Control", "⌃": "Control",
+    cmd: "Meta", command: "Meta", meta: "Meta", "⌘": "Meta",
+    alt: "Alt", option: "Alt", "⌥": "Alt",
+    shift: "Shift", "⇧": "Shift",
+};
+const NAMED = {
+    space: "Space", enter: "Enter", escape: "Escape", esc: "Escape", tab: "Tab", backspace: "Backspace",
+    delete: "Delete", home: "Home", end: "End", pageup: "PageUp", pagedown: "PageDown",
+    arrowup: "ArrowUp", arrowdown: "ArrowDown", arrowleft: "ArrowLeft", arrowright: "ArrowRight",
+    up: "ArrowUp", down: "ArrowDown", left: "ArrowLeft", right: "ArrowRight",
+};
+/**
+ * The `aria-keyshortcuts` value for a human shortcut hint ("Ctrl+S", "⌘K"),
+ * or `undefined` when it isn't a keyboard shortcut this attribute can carry.
+ */
+export function ariaKeyshortcuts(shortcut) {
+    if (!shortcut)
+        return undefined;
+    let text = shortcut.trim();
+    const modifiers = [];
+    // Apple-style hints prefix the key with symbols (⇧⌘K) instead of joining with "+".
+    while (/^[⌘⌥⇧⌃]/.test(text)) {
+        modifiers.push(MODIFIERS[text[0]]);
+        text = text.slice(1).trim();
+    }
+    const parts = text.split("+").map((part) => part.trim()).filter(Boolean);
+    const key = parts.pop();
+    if (!key)
+        return undefined;
+    for (const part of parts) {
+        const modifier = MODIFIERS[part.toLowerCase()];
+        if (!modifier)
+            return undefined;
+        modifiers.push(modifier);
+    }
+    const named = NAMED[key.toLowerCase()] ?? (/^F([1-9]|1[0-2])$/i.test(key) ? key.toUpperCase() : undefined);
+    const last = named ?? (key.length === 1 && /\S/.test(key) ? key.toUpperCase() : undefined);
+    return last ? [...modifiers, last].join("+") : undefined;
+}
+/** Whether a level reserves an icon cell, so labels line up across its items. */
+export function hasMenuIcons(items) {
+    return items.some((item) => item.icon !== undefined);
+}

package/dist/menu/menu.d.ts

@@ -5,20 +5,28 @@ export type MenuItem = {
     readonly label: string;
     readonly run: () => void;
     readonly disabled?: string;
+    readonly icon?: View;
+    readonly shortcut?: string;
 } | {
     readonly kind: "link";
     readonly label: string;
     readonly href: string;
     readonly activate?: (event: MouseEvent) => void;
+    readonly icon?: View;
+    readonly shortcut?: string;
 } | {
     readonly kind: "check" | "radio";
     readonly label: string;
     readonly checked: boolean;
     readonly run: () => void;
+    readonly icon?: View;
+    readonly shortcut?: string;
 } | {
     readonly kind: "submenu";
     readonly label: string;
     readonly items: readonly MenuItem[];
+    readonly icon?: View;
+    readonly shortcut?: string;
 } | {
     readonly kind: "group";
     readonly label: string;
@@ -41,6 +49,21 @@ export type MenuItem = {
  */
 export declare class Menu extends AsterElement {
     #private;
+    /** Whether items with an `icon` draw it. Default `true`; an icon column appears only when one is set. */
+    get showIcons(): boolean;
+    set showIcons(v: boolean);
+    /** Whether items with a `shortcut` show its hint. Default `true`. */
+    get showShortcuts(): boolean;
+    set showShortcuts(v: boolean);
+    /** Where a submenu opens: `"auto"` flips at the edges (default), `"end"` or `"start"` fixes the side. */
+    get submenuDirection(): "auto" | "start" | "end";
+    set submenuDirection(v: "auto" | "start" | "end");
+    /** Whether choosing an action closes the menu. Default `true`. */
+    get autoDismiss(): boolean;
+    set autoDismiss(v: boolean);
+    /** Text shown when the menu has nothing to choose. Default `""`: nothing is drawn. */
+    get emptyMessage(): string;
+    set emptyMessage(v: string);
     /** Opens at a point, such as a right-click. */
     openAt(point: {
         x: number;

package/dist/menu/menu.js

@@ -1,6 +1,7 @@
 import { html, nothing } from "lit-html";
 import { AsterElement, define, uid } from "../base/element.js";
 import { openWhen, placeStyle } from "../overlay/anchor.js";
+import { ariaKeyshortcuts, hasMenuIcons } from "./config.js";
 /**
  * A menu in the top layer (Popover API), following the APG menu pattern: it
  * opens at a point (a context menu) or against an element, focuses its
@@ -23,11 +24,39 @@ export class Menu extends AsterElement {
     #anchor = this.prop(undefined);
     /** Check and radio marks changed since the menu opened; items keep the state they were given. */
     #marks = this.prop(new Map());
+    #showIcons = this.prop(true);
+    #showShortcuts = this.prop(true);
+    #submenuDirection = this.prop("auto");
+    #autoDismiss = this.prop(true);
+    #emptyMessage = this.prop("");
     #id = uid("aster-menu");
     #opener = null;
     /** The item to focus once its menu has rendered and its popover is open. */
     #focusNext;
     #stop;
+    /** Whether items with an `icon` draw it. Default `true`; an icon column appears only when one is set. */
+    get showIcons() { return this.#showIcons.value; }
+    set showIcons(v) { this.#showIcons.value = v === true; }
+    /** Whether items with a `shortcut` show its hint. Default `true`. */
+    get showShortcuts() { return this.#showShortcuts.value; }
+    set showShortcuts(v) { this.#showShortcuts.value = v === true; }
+    /** Where a submenu opens: `"auto"` flips at the edges (default), `"end"` or `"start"` fixes the side. */
+    get submenuDirection() { return this.#submenuDirection.value; }
+    set submenuDirection(v) {
+        if (v !== "auto" && v !== "start" && v !== "end")
+            throw new TypeError('submenuDirection must be "auto", "start" or "end"');
+        this.#submenuDirection.value = v;
+    }
+    /** Whether choosing an action closes the menu. Default `true`. */
+    get autoDismiss() { return this.#autoDismiss.value; }
+    set autoDismiss(v) { this.#autoDismiss.value = v === true; }
+    /** Text shown when the menu has nothing to choose. Default `""`: nothing is drawn. */
+    get emptyMessage() { return this.#emptyMessage.value; }
+    set emptyMessage(v) {
+        if (typeof v !== "string")
+            throw new TypeError("emptyMessage must be a string");
+        this.#emptyMessage.value = v;
+    }
     /** Opens at a point, such as a right-click. */
     openAt(point, items, label, opener) {
         this.style.setProperty("--menu-x", `${point.x}px`);
@@ -59,16 +88,28 @@ export class Menu extends AsterElement {
             levels.push({ items: parent.items, label: parent.label });
         }
         const anchored = this.#anchor.value;
+        const direction = this.#submenuDirection.value;
+        const icons = this.#showIcons.value;
+        const shortcuts = this.#showShortcuts.value;
         return html `${levels.map((level, depth) => {
             const place = depth > 0 ? placeStyle(this.#itemId(depth - 1, path[depth - 1])) : anchored ? placeStyle(anchored) : nothing;
-            return html `<div class="aster-menu" popover="manual" role="menu" aria-label=${level.label || nothing}
-        data-depth=${depth} ?data-anchored=${depth > 0 || anchored !== undefined} style=${place} ${openWhen(true)}
+            const items = focusables(level.items);
+            const empty = items.length === 0;
+            return html `<div class="aster-menu" popover="manual" role=${empty ? nothing : "menu"} aria-label=${empty ? nothing : level.label || nothing}
+        data-depth=${depth} ?data-anchored=${depth > 0 || anchored !== undefined}
+        data-submenu=${depth > 0 && direction !== "auto" ? direction : nothing}
+        style=${place} tabindex="-1" ${openWhen(true)}
         @keydown=${(e) => this.#key(e, depth)}>
-        ${this.#entries(level.items, depth, { next: 0 })}
+        ${empty ? this.#empty() : nothing}
+        ${this.#entries(level.items, depth, { next: 0 }, icons && hasMenuIcons(items), shortcuts)}
       </div>`;
         })}`;
     }
-    #entries(items, depth, counter) {
+    #empty() {
+        const message = this.#emptyMessage.value;
+        return message ? html `<div class="aster-menu-empty">${message}</div>` : nothing;
+    }
+    #entries(items, depth, counter, icons, shortcuts) {
         return items.map((item) => {
             if (item.kind === "separator")
                 return html `<div role="separator" class="aster-menu-separator"></div>`;
@@ -76,35 +117,41 @@ export class Menu extends AsterElement {
                 const id = `${this.#id}-g${depth}-${counter.next}`;
                 return html `<div role="group" aria-labelledby=${id}>
           <div class="aster-menu-heading" id=${id}>${item.label}</div>
-          ${this.#entries(item.items, depth, counter)}
+          ${this.#entries(item.items, depth, counter, icons, shortcuts)}
         </div>`;
             }
             const index = counter.next++;
             const id = this.#itemId(depth, index);
             const expanded = this.#path.value[depth] === index;
             const enter = () => this.#hover(depth, index, item);
+            const icon = icons ? html `<span class="aster-menu-icon" aria-hidden="true">${item.icon ?? nothing}</span>` : nothing;
+            const shortcut = shortcuts && item.shortcut
+                ? html `<span class="aster-menu-shortcut" aria-hidden="true">${item.shortcut}</span>`
+                : nothing;
+            const keys = shortcuts ? ariaKeyshortcuts(item.shortcut) : undefined;
             switch (item.kind) {
                 case "link":
-                    return html `<a role="menuitem" tabindex="-1" id=${id} href=${item.href} @pointerenter=${enter}
-            @click=${(event) => { this.close(); item.activate?.(event); }}><span class="aster-menu-mark" aria-hidden="true"></span>${item.label}</a>`;
+                    return html `<a role="menuitem" tabindex="-1" id=${id} href=${item.href} aria-keyshortcuts=${keys ?? nothing} @pointerenter=${enter}
+            @click=${(event) => { if (this.#autoDismiss.peek())
+                        this.close(); item.activate?.(event); }}><span class="aster-menu-mark" aria-hidden="true"></span>${icon}${item.label}${shortcut}</a>`;
                 case "check":
                 case "radio":
                     {
                         const checked = this.#marks.value.get(item) ?? item.checked;
                         return html `<button type="button" role=${item.kind === "check" ? "menuitemcheckbox" : "menuitemradio"} tabindex="-1"
-              id=${id} aria-checked=${checked ? "true" : "false"} @pointerenter=${enter} @click=${() => this.#choose(item)}>
-              <span class="aster-menu-mark" aria-hidden="true">${checked ? (item.kind === "check" ? "✓" : "•") : ""}</span>${item.label}</button>`;
+              id=${id} aria-checked=${checked ? "true" : "false"} aria-keyshortcuts=${keys ?? nothing} @pointerenter=${enter} @click=${() => this.#choose(item)}>
+              <span class="aster-menu-mark" aria-hidden="true">${checked ? (item.kind === "check" ? "✓" : "•") : ""}</span>${icon}${item.label}${shortcut}</button>`;
                     }
                 case "submenu":
                     return html `<button type="button" role="menuitem" tabindex="-1" id=${id} aria-haspopup="menu"
-            aria-expanded=${expanded ? "true" : "false"} style=${`anchor-name: --${id}`}
+            aria-expanded=${expanded ? "true" : "false"} aria-keyshortcuts=${keys ?? nothing} style=${`anchor-name: --${id}`}
             @pointerenter=${enter} @click=${() => this.#openSub(depth, index, true)}>
-            <span class="aster-menu-mark" aria-hidden="true"></span>${item.label}<span class="aster-menu-more" aria-hidden="true">›</span></button>`;
+            <span class="aster-menu-mark" aria-hidden="true"></span>${icon}${item.label}${shortcut}<span class="aster-menu-more" aria-hidden="true">›</span></button>`;
                 default:
                     return html `<button type="button" role="menuitem" tabindex="-1" id=${id}
-            aria-disabled=${item.disabled ? "true" : nothing} title=${item.disabled ?? nothing}
+            aria-disabled=${item.disabled ? "true" : nothing} aria-keyshortcuts=${keys ?? nothing} title=${item.disabled ?? nothing}
             @pointerenter=${enter} @click=${() => this.#choose(item)}>
-            <span class="aster-menu-mark" aria-hidden="true"></span>${item.label}</button>`;
+            <span class="aster-menu-mark" aria-hidden="true"></span>${icon}${item.label}${shortcut}</button>`;
             }
         });
     }
@@ -126,10 +173,11 @@ export class Menu extends AsterElement {
         // After the popovers this render opened (they open in a microtask too).
         queueMicrotask(() => {
             const target = this.#level(next.depth)[next.index];
-            if (!target)
-                return;
             this.#focusNext = undefined;
-            target.focus();
+            if (target)
+                target.focus();
+            else
+                this.#container(next.depth)?.focus();
         });
     }
     #itemId(depth, index) {
@@ -139,6 +187,9 @@ export class Menu extends AsterElement {
         const menu = this.querySelector(`.aster-menu[data-depth="${depth}"]`);
         return menu ? [...menu.querySelectorAll(':scope > [role^="menuitem"], :scope > [role="group"] > [role^="menuitem"]')] : [];
     }
+    #container(depth) {
+        return this.querySelector(`.aster-menu[data-depth="${depth}"]`);
+    }
     #choose(item) {
         if (item.kind === "submenu" || item.kind === "link")
             return;
@@ -156,7 +207,8 @@ export class Menu extends AsterElement {
             item.run();
             return;
         }
-        this.close();
+        if (this.#autoDismiss.peek())
+            this.close();
         item.run();
     }
     #openSub(depth, index, focus) {

package/dist/picker/picker.js

@@ -100,7 +100,8 @@ export class Picker extends BoundField {
         const multiple = this.#multiple.value;
         const chosen = multiple ? this.#values.value : c.value === null || c.value === undefined ? [] : [c.value];
         const query = this.#query.value;
-        const open = this.#open.value && !c.state.readOnly;
+        const disabled = !c.state.enabled;
+        const open = this.#open.value && !c.state.readOnly && !disabled;
         const list = this.#list();
         const loaded = (list?.items.value ?? []).filter((e) => e !== undefined);
         const searching = this.#searching.value;
@@ -171,14 +172,18 @@ export class Picker extends BoundField {
           aria-required=${c.state.required ? "true" : nothing}
           aria-invalid=${c.invalid ? "true" : nothing}
           aria-describedby=${describedBy ?? nothing}
-          ?readonly=${c.state.readOnly}
+          ?readonly=${c.state.readOnly} ?disabled=${disabled}
           autocomplete="off" spellcheck="false"
           @input=${(e) => {
+            if (disabled)
+                return;
             // Typing replaces the shown name, even where the engine didn't select it on click.
             const t = e.target.value;
             this.#type(query === undefined && label && t.startsWith(label) && t.length > label.length ? t.slice(label.length) : t);
         }}
           @click=${(e) => {
+            if (disabled)
+                return;
             if (this.#open.peek())
                 return this.#close();
             this.#show();
@@ -191,7 +196,7 @@ export class Picker extends BoundField {
             this.#close();
         }}
           @keydown=${(e) => {
-            if (c.state.readOnly)
+            if (c.state.readOnly || disabled)
                 return;
             const isOpen = this.#open.peek();
             switch (e.key) {