@getaster/elements 0.3.5 → 0.4.5

package/dist/composition/builtins.js

@@ -22,9 +22,12 @@ import { DateField } from "../date/date-field.js";
 import { Choice } from "../select/choice-element.js";
 import { Switch } from "../switch/switch.js";
 import { Grid } from "../grid/grid.js";
+import { validateFeatures } from "../grid/features.js";
+import { validateGridLabels, validateGridPresentation } from "../grid/appearance.js";
 import { TileGrid } from "../tile-grid/tile-grid.js";
 import { Listbox } from "../listbox/listbox.js";
 import { Form } from "../form/form.js";
+import { validateFormFeatures } from "../form/features.js";
 import { ListEditor } from "../list-edit/list-edit.js";
 import { RuleEditor } from "../rule/rule-editor.js";
 import { FilterBuilder } from "../filter/filter-builder.js";
@@ -37,6 +40,7 @@ import { Slicer } from "../slicer/slicer.js";
 import { ComponentHost } from "../component/component.js";
 import { Window } from "../window/window.js";
 import { Dialog } from "../dialog/dialog.js";
+import { Menu } from "../menu/menu.js";
 import { Dashboard } from "../dashboard/dashboard.js";
 import { CommandBar } from "../composition/command-bar.js";
 const object = (value) => !!value && typeof value === "object" && [Object.prototype, null].includes(Object.getPrototypeOf(value));
@@ -74,20 +78,136 @@ const numeric = (v) => {
     }
 };
 const sourceOptions = (v) => v === undefined || v instanceof Collection || v instanceof PickerOptions;
-const formItem = checked("field name, configured field or derived value", v => typeof v === "string" || object(v) && optionalNumber(v.span) && (typeof v.field === "string" && sourceOptions(v.options)
-    || typeof v.title === "string" && t.signal(t.string).validate(v.value)));
+const formControlName = checked("form control name", (v) => v === "text" || v === "number" || v === "date" || v === "check" || v === "select" || v === "picker");
+const formItem = checked("field name, configured field or derived value", v => typeof v === "string" || (object(v) && optionalNumber(v.span) && ((typeof v.field === "string" && sourceOptions(v.options)
+    && (v.title === undefined || typeof v.title === "string")
+    && (v.hint === undefined || typeof v.hint === "string")
+    && (v.placeholder === undefined || typeof v.placeholder === "string")
+    && optionalBoolean(v.readOnly) && optionalBoolean(v.disabled) && optionalBoolean(v.required)
+    && (v.control === undefined || formControlName.validate(v.control)))
+    || (typeof v.title === "string" && t.signal(t.string).validate(v.value)))));
 const sections = t.array(t.object({ title: t.string, columns: t.optional(t.positiveInteger), open: t.optional(t.boolean), items: t.array(formItem) }));
+const formPolicy = t.object({ readOnly: t.optional(t.boolean), disabled: t.optional(t.boolean) });
+const formChrome = t.object({
+    columns: t.optional(t.positiveInteger),
+    titleOrientation: t.optional(literals("top", "start")),
+    showInlineErrors: t.optional(t.boolean),
+    errorSummary: t.optional(t.boolean),
+    autoFocus: t.optional(t.boolean),
+});
+const formFeatures = t.custom("form feature list", (value) => {
+    try {
+        validateFormFeatures(value);
+        return true;
+    }
+    catch {
+        return false;
+    }
+}, { type: "array", items: { type: "object" } });
+const isoDate = checked("date (YYYY-MM-DD)", (v) => typeof v === "string" && /^\d{4}-\d{2}-\d{2}$/.test(v));
 const gridView = checked("Grid view", v => object(v)
     && Array.isArray(v.columns) && v.columns.every(c => object(c) && typeof c.field === "string" && optionalNumber(c.width) && optionalBoolean(c.hidden) && (c.sortField === undefined || typeof c.sortField === "string" && c.sortField.trim().length > 0))
     && Array.isArray(v.sort) && v.sort.every(k => object(k) && typeof k.field === "string" && optionalBoolean(k.descending))
     && object(v.filters) && Object.values(v.filters).every(c => object(c) && typeof c.op === "string")
     && typeof v.frozen === "number" && Number.isSafeInteger(v.frozen) && v.frozen >= 0
     && (v.groupBy === undefined || typeof v.groupBy === "string" || Array.isArray(v.groupBy) && v.groupBy.every(k => typeof k === "string")));
+const gridChrome = t.object({
+    toolbar: t.optional(t.boolean),
+    header: t.optional(t.boolean),
+    filterRow: t.optional(checked('true, false or "auto"', v => v === "auto" || typeof v === "boolean")),
+    headerMenu: t.optional(t.boolean),
+    pagingBar: t.optional(t.boolean),
+});
+const gridToolbar = t.object({
+    count: t.optional(t.boolean),
+    sort: t.optional(t.boolean),
+    filters: t.optional(t.boolean),
+    advanced: t.optional(t.boolean),
+    columns: t.optional(t.boolean),
+    views: t.optional(t.boolean),
+    expandAll: t.optional(t.boolean),
+    extra: t.optional(checked("Grid.toolbar.extra", v => v === undefined || view(v))),
+});
+// Capability switches in a composition catalog are plain data: a boolean or a
+// field-name allowlist. Predicates remain a JavaScript-only setter value.
+const gridCapability = t.custom("boolean or field allowlist", (value) => typeof value === "boolean" || Array.isArray(value) && value.every((field) => typeof field === "string"), { anyOf: [{ type: "boolean" }, { type: "array", items: { type: "string" } }] });
+const fieldPolicy = t.object({
+    sortable: t.optional(gridCapability), filterable: t.optional(gridCapability), groupable: t.optional(gridCapability),
+    resizable: t.optional(gridCapability), movable: t.optional(gridCapability), hideable: t.optional(gridCapability),
+    freezable: t.optional(gridCapability), editable: t.optional(gridCapability),
+});
+const fieldPolicies = t.custom("field policy record", (value) => object(value) && Object.values(value).every((entry) => fieldPolicy.validate(entry)), { type: "object", additionalProperties: fieldPolicy.schema ?? {} });
+const gridPolicy = t.object({
+    sortable: t.optional(gridCapability),
+    filterable: t.optional(gridCapability),
+    groupable: t.optional(gridCapability),
+    resizable: t.optional(gridCapability),
+    movable: t.optional(gridCapability),
+    hideable: t.optional(gridCapability),
+    freezable: t.optional(gridCapability),
+    editable: t.optional(gridCapability),
+    selectable: t.optional(t.boolean),
+    fields: t.optional(fieldPolicies),
+});
+const gridFeatures = t.custom("grid feature list", (value) => {
+    try {
+        validateFeatures(value);
+        return true;
+    }
+    catch {
+        return false;
+    }
+}, { type: "array", items: { type: "object" } });
+// Presentation is plain data in a catalog; JS-only class predicates and hilite
+// tests fail validation because `validateGridPresentation` rejects functions.
+const gridPresentation = t.custom("grid presentation", (value) => {
+    try {
+        validateGridPresentation(value);
+        return true;
+    }
+    catch {
+        return false;
+    }
+}, { type: "object" });
+const gridLabels = t.custom("grid label bag", (value) => {
+    try {
+        validateGridLabels(value);
+        return true;
+    }
+    catch {
+        return false;
+    }
+}, { type: "object", additionalProperties: { type: "string" } });
 const milliseconds = t.custom("nonnegative milliseconds", (value) => Number.isSafeInteger(value) && typeof value === "number" && value >= 0 && value <= 2_147_483_647, { type: "integer", minimum: 0, maximum: 2_147_483_647 });
+const sectionChrome = t.object({
+    titleBar: t.optional(t.boolean),
+    fold: t.optional(t.boolean),
+    close: t.optional(t.boolean),
+    footer: t.optional(t.boolean),
+    status: t.optional(literals("collapsed", "always")),
+});
+const windowChrome = t.object({
+    header: t.optional(t.boolean),
+    title: t.optional(t.boolean),
+    close: t.optional(t.boolean),
+    minimize: t.optional(t.boolean),
+    maximize: t.optional(t.boolean),
+    resizer: t.optional(t.boolean),
+    footer: t.optional(t.boolean),
+    statusBar: t.optional(t.boolean),
+});
+const positiveNumber = t.custom("positive finite number", (v) => typeof v === "number" && Number.isFinite(v) && v > 0, { type: "number", exclusiveMinimum: 0 });
+const windowPlacement = t.object({
+    state: literals("normal", "maximized", "minimized"),
+    bounds: t.optional(t.object({ x: t.number, y: t.number, width: positiveNumber, height: positiveNumber })),
+    restoreMaximized: t.optional(t.boolean),
+});
+const initialFocus = checked('"first", "dialog", "none" or a focus function', v => v === undefined || v === "first" || v === "dialog" || v === "none" || fn(v));
 const progressTiming = t.object({ delayMs: t.optional(milliseconds), minVisibleMs: t.optional(milliseconds) });
 const bound = {
     model: t.optional(t.instance(EditModel)), field: t.string, label: t.string,
     labelled: t.boolean, sharedReasons: t.instance((Map)),
+    hint: t.string, showErrors: t.boolean, validateOn: literals("submit", "change", "exit"),
 };
 /** Reusable public control contracts. Select entries explicitly for an application's allowlist. */
 export const asterComponents = Object.freeze({
@@ -97,6 +217,9 @@ export const asterComponents = Object.freeze({
         confirmLabel: t.optional(t.string),
         busy: bindable(t.boolean),
         variant: literals("secondary", "primary"),
+        tone: literals("secondary", "primary", "danger"),
+        size: literals("sm", "md", "lg"),
+        disabled: t.boolean,
         type: literals("button", "submit"),
         icon: checked("Button.icon", view),
         reason: t.optional(t.string),
@@ -131,6 +254,8 @@ export const asterComponents = Object.freeze({
     Accordion: element()("aster-accordion", {
         items: checked("accordion items", v => Array.isArray(v) && new Set(v.map(i => i?.id)).size === v.length && v.every(i => object(i) && typeof i.id === "string" && i.id.length > 0 && typeof i.heading === "string" && !(i.body !== undefined && i.create !== undefined) && optionalBoolean(i.disabled) && (i.body === undefined || view(i.body)) && (i.summary === undefined || view(i.summary)) && (i.actions === undefined || view(i.actions)) && (i.create === undefined || fn(i.create)))),
         expanded: t.array(t.string), multiple: t.boolean, headingLevel: literals(2, 3, 4),
+        visibilityMode: literals("multiple", "mutex"),
+        canClose: t.boolean, canReorder: t.boolean, canCollapseAll: t.boolean,
     }),
     Check: element()("aster-check", {
         ...bound,
@@ -138,6 +263,10 @@ export const asterComponents = Object.freeze({
     Select: element()("aster-select", {
         ...bound,
         choices: t.optional(options),
+        placeholder: t.string,
+        filter: t.boolean,
+        clearable: t.boolean,
+        noResults: t.string,
     }),
     Picker: element()("aster-picker", {
         ...bound,
@@ -155,16 +284,29 @@ export const asterComponents = Object.freeze({
     }),
     DateField: element()("aster-date", {
         ...bound,
+        min: t.optional(isoDate),
+        max: t.optional(isoDate),
+        format: literals("medium", "short", "iso"),
+        placeholder: t.string,
+        dismissOnSelect: t.boolean,
     }),
     Choice: element()("aster-choice", {
         options: options,
         value: checked("Choice.value", v => v === undefined || value(v)),
         label: t.string,
         placeholder: t.string,
+        filter: t.boolean,
+        clearable: t.boolean,
+        noResults: t.string,
+        disabled: t.boolean,
     }),
     Switch: element()("aster-switch", {
         binding: checked("Switch.binding", v => v === undefined || object(v) && v.ctx instanceof DataContext && typeof v.set === "string" && typeof v.key === "string" && typeof v.field === "string"),
         label: t.string,
+        disabled: t.boolean,
+        readOnly: t.boolean,
+        onLabel: t.optional(t.string),
+        offLabel: t.optional(t.string),
     }),
     Grid: element()("aster-grid", {
         progressPolicy: progressTiming,
@@ -177,18 +319,55 @@ export const asterComponents = Object.freeze({
         persist: t.string,
         renderers: checked("Grid.renderers", v => object(v) && Object.values(v).every(fn)),
         formatters: checked("Grid.formatters", v => object(v) && Object.values(v).every(fn)),
+        presentation: gridPresentation,
+        labels: gridLabels,
         summaries: checked("Grid.summaries", v => Array.isArray(v) && v.every(s => object(s) && (s.label === undefined || typeof s.label === "string") && (s.method === "count" || ["sum", "min", "max", "average", "countdistinct"].includes(String(s.method)) && typeof s.field === "string"))),
         lookups: checked("Grid.lookups", v => object(v) && Object.values(v).every(l => object(l) && typeof l.set === "string" && typeof l.display === "string")),
         rowMenu: checked("Grid.rowMenu", fn),
-        tree: checked("Grid.tree", v => v === undefined || object(v) && typeof v.parentField === "string" && optionalBoolean(v.draggable) && (v.filterMode === undefined || ["keepAncestors", "strict"].includes(String(v.filterMode)))),
+        columnMenu: checked("Grid.columnMenu", fn),
+        filterOperators: checked("Grid.filterOperators", v => object(v) && Object.values(v).every(list => Array.isArray(list) && list.every(op => typeof op === "string" && op.length > 0))),
+        tree: checked("Grid.tree", v => v === undefined || object(v) && typeof v.parentField === "string"
+            && optionalBoolean(v.draggable) && optionalBoolean(v.reparent) && optionalBoolean(v.dropOnLeaves) && optionalBoolean(v.cascadeSelection)
+            && optionalBoolean(v.showOpener) && (v.autoOpen === undefined || Number.isSafeInteger(v.autoOpen) && typeof v.autoOpen === "number" && v.autoOpen >= 0)
+            && (v.pageSize === undefined || t.positiveInteger.validate(v.pageSize)) && (v.matchLimit === undefined || t.positiveInteger.validate(v.matchLimit))
+            && (v.openLimit === undefined || t.positiveInteger.validate(v.openLimit))
+            && (v.folderIcon === undefined || view(v.folderIcon)) && (v.nodeIcon === undefined || view(v.nodeIcon))
+            && (v.filterMode === undefined || ["keepAncestors", "strict"].includes(String(v.filterMode)))),
         rowControls: checked("Grid.rowControls", v => v === undefined || fn(v)),
         expansion: checked("Grid.expansion", v => v === undefined || object(v) && fn(v.content) && optionalBoolean(v.single) && optionalNumber(v.limit) && (v.canExpand === undefined || fn(v.canExpand))),
-        editable: t.boolean,
+        policy: gridPolicy,
+        features: gridFeatures,
+        sortable: gridCapability,
+        filterable: gridCapability,
+        groupable: gridCapability,
+        resizable: gridCapability,
+        movable: gridCapability,
+        hideable: gridCapability,
+        freezable: gridCapability,
+        editable: gridCapability,
+        multiSort: t.boolean,
+        editMode: literals("row", "cell"),
+        selectionAppearance: literals("row", "cell"),
+        selectionColumn: t.boolean,
         rules: checked("Grid.rules", object),
         empty: checked("Grid.empty", view),
+        loading: checked("Grid.loading", view),
+        loadingMessage: t.string,
+        error: checked("Grid.error", v => v === undefined || fn(v)),
+        autoFetch: t.boolean,
+        pageSize: t.positiveInteger,
+        keepPages: t.optional(t.positiveInteger),
+        exactCount: t.boolean,
         collection: t.optional(t.instance(Collection)),
         selection: t.optional(t.instance(Selection)),
         selectable: t.boolean,
+        chrome: gridChrome,
+        toolbar: gridToolbar,
+        showHeader: t.boolean,
+        showToolbar: t.boolean,
+        showFilterRow: t.boolean,
+        showHeaderMenu: t.boolean,
+        showPagingBar: t.boolean,
     }),
     TileGrid: element()("aster-tile-grid", {
         collection: t.optional(t.instance(Collection)),
@@ -215,6 +394,18 @@ export const asterComponents = Object.freeze({
         model: t.optional(t.instance(EditModel)),
         sections,
         headingLevel: literals(2, 3, 4),
+        policy: formPolicy,
+        readOnly: t.boolean,
+        disabled: t.boolean,
+        chrome: formChrome,
+        columns: t.positiveInteger,
+        titleOrientation: literals("top", "start"),
+        showInlineErrors: t.boolean,
+        errorSummary: t.boolean,
+        autoFocus: t.boolean,
+        features: formFeatures,
+        validateOn: literals("submit", "change", "exit"),
+        saveOnEnter: t.boolean,
     }),
     ListEditor: element()("aster-list-editor", {
         list: t.optional(t.instance(ListEdit)),
@@ -238,6 +429,7 @@ export const asterComponents = Object.freeze({
         model: t.optional(t.instance(FilterDraft)),
         label: t.string,
         readOnlyReason: t.optional(t.string),
+        operators: checked("FilterBuilder.operators", v => v === undefined || fn(v)),
     }),
     TreeNavigator: element()("aster-tree-navigator", {
         tree: t.optional(t.instance(Tree)),
@@ -246,6 +438,7 @@ export const asterComponents = Object.freeze({
         choosable: checked("TreeNavigator.choosable", v => v === undefined || fn(v)),
         headingLevel: literals(1, 2, 3, 4, 5, 6),
         chooseLabel: t.string,
+        search: t.boolean,
     }),
     Tabs: element()("aster-tabs", {
         renderPanel: checked("Tabs.renderPanel", v => v === undefined || fn(v)),
@@ -257,12 +450,16 @@ export const asterComponents = Object.freeze({
     }),
     Section: element()("aster-section", {
         actions: checked("Section.actions", view),
+        chrome: sectionChrome,
+        collapsible: t.boolean,
         disabled: t.boolean,
+        footer: checked("Section.footer", view),
         heading: t.string,
         open: t.boolean,
         body: checked("Section.body", view),
         level: literals(2, 3, 4),
         summary: checked("Section.summary", view),
+        canClose: t.boolean,
     }),
     Split: element()("aster-split", {
         orientation: literals("horizontal", "vertical"), size: t.number, collapsible: t.boolean, collapsed: t.boolean, responsive: t.boolean,
@@ -296,10 +493,41 @@ export const asterComponents = Object.freeze({
         managed: t.boolean,
         preserveContent: t.boolean,
         beforeClose: checked("Window.beforeClose", v => v === undefined || fn(v)),
+        chrome: windowChrome,
+        footer: checked("Window.footer", view),
+        status: checked("Window.status", view),
+        initialPlacement: windowPlacement,
+        modal: t.boolean,
+        dismissOnEscape: t.boolean,
+        keepInParentRect: t.boolean,
+        autoCenter: t.boolean,
+        showHeader: t.boolean,
+        showTitle: t.boolean,
+        showCloseButton: t.boolean,
+        showMinimizeButton: t.boolean,
+        showMaximizeButton: t.boolean,
+        showResizer: t.boolean,
+        showFooter: t.boolean,
+        showStatusBar: t.boolean,
     }),
     Dialog: element()("aster-dialog", {
         content: checked("Dialog.content", view),
         labelledBy: t.optional(t.string),
+        title: t.string,
+        header: t.boolean,
+        footer: checked("Dialog.footer", view),
+        showCloseButton: t.boolean,
+        modal: t.boolean,
+        dismissOnEscape: t.boolean,
+        dismissOnBackdrop: t.boolean,
+        initialFocus,
+    }),
+    Menu: element()("aster-menu", {
+        showIcons: t.boolean,
+        showShortcuts: t.boolean,
+        submenuDirection: literals("auto", "start", "end"),
+        autoDismiss: t.boolean,
+        emptyMessage: t.string,
     }),
     Dashboard: element()("aster-dashboard", {
         label: t.string,

package/dist/date/calendar.d.ts

@@ -16,6 +16,9 @@ export interface CalendarProps {
     readonly value: string | undefined;
     readonly today: string;
     readonly label: string;
+    /** Inclusive bounds, `YYYY-MM-DD`; days outside are shown but can't be chosen. */
+    readonly min?: string | undefined;
+    readonly max?: string | undefined;
     readonly choose: (date: string) => void;
     /** Closed without a choice: Escape, or a press outside. */
     readonly dismiss: (refocus: boolean) => void;

package/dist/date/calendar.js

@@ -59,6 +59,11 @@ export function calendarView(state, p) {
         queueMicrotask(() => document.getElementById(`${p.id}-${to}`)?.focus());
     };
     const page = (by) => (state.focused.value = shift(focused, by));
+    const allowed = (day) => (p.min === undefined || day >= p.min) && (p.max === undefined || day <= p.max);
+    const choose = (day) => {
+        if (allowed(day))
+            p.choose(day);
+    };
     const grid = (e) => {
         const to = gridKey(e, focused);
         if (to) {
@@ -67,7 +72,7 @@ export function calendarView(state, p) {
         }
         else if (e.key === "Enter" || e.key === " ") {
             e.preventDefault();
-            p.choose(focused);
+            choose(focused);
         }
     };
     const dialog = (e) => {
@@ -106,8 +111,9 @@ export function calendarView(state, p) {
         ? html `<td></td>`
         : html `<td role="gridcell" id=${`${p.id}-${day}`} tabindex=${day === focused ? "0" : "-1"}
                   aria-selected=${day === p.value ? "true" : nothing} aria-current=${day === p.today ? "date" : nothing}
+                  aria-disabled=${allowed(day) ? nothing : "true"}
                   aria-label=${DAY.format(Date.parse(`${day}T12:00:00Z`))}
-                  @click=${() => p.choose(day)}>${Number(day.slice(8))}</td>`)}</tr>`)}
+                  @click=${() => choose(day)}>${Number(day.slice(8))}</td>`)}</tr>`)}
       </tbody>
     </table>
   </div>`;

package/dist/date/date-field.d.ts

@@ -1,5 +1,7 @@
+import type { Field as FieldMeta, Value } from "@getaster/data";
 import { type View } from "../base/element.ts";
 import { BoundField, type ControlContext } from "../field/bound-field.ts";
+import { type DateFormat } from "./dates.ts";
 /**
  * A date field: typed dates in the forms people write them ("7 Oct",
  * "7/10/2026", "2026-10-07"), shown as "7 Oct 2026", with a calendar
@@ -7,12 +9,30 @@ import { BoundField, type ControlContext } from "../field/bound-field.ts";
  * typed while the input has focus; text that isn't a date stays text, and
  * validation says so.
  *
- * The calendar button takes focus on press in every engine (macOS engines
- * don't focus buttons on click), so focus never falls to the body between
- * the input and the calendar: a grid row being edited would end its edit.
+ * `min` and `max` bound the calendar and the value; `format` chooses how a
+ * date is written. The calendar button takes focus on press in every engine
+ * (macOS engines don't focus buttons on click), so focus never falls to the
+ * body between the input and the calendar: a grid row being edited would end
+ * its edit.
  */
 export declare class DateField extends BoundField {
     #private;
+    /** The earliest date that can be chosen, `YYYY-MM-DD`, inclusive. */
+    get min(): string | undefined;
+    set min(v: string | undefined);
+    /** The latest date that can be chosen, `YYYY-MM-DD`, inclusive. */
+    get max(): string | undefined;
+    set max(v: string | undefined);
+    /** How a date is written in the input: `"medium"` (default), `"short"` or `"iso"`. */
+    get format(): DateFormat;
+    set format(v: DateFormat);
+    /** Placeholder text. Default: "None" for a nullable field, otherwise a date hint. */
+    get placeholder(): string;
+    set placeholder(v: string);
+    /** Whether choosing a day closes the calendar. Default `true`. */
+    get dismissOnSelect(): boolean;
+    set dismissOnSelect(v: boolean);
     focus(options?: FocusOptions): void;
+    protected validation(_meta: FieldMeta | undefined, value: Value | undefined): string | undefined;
     protected control(c: ControlContext): View;
 }

package/dist/date/date-field.js

@@ -4,7 +4,7 @@ import { define } from "../base/element.js";
 import { BoundField } from "../field/bound-field.js";
 import { anchorStyle } from "../overlay/anchor.js";
 import { CalendarState, calendarView, closeOutside } from "./calendar.js";
-import { formatDate, parseDate, today } from "./dates.js";
+import { formatDate, isIsoDate, parseDate, today } from "./dates.js";
 /**
  * A date field: typed dates in the forms people write them ("7 Oct",
  * "7/10/2026", "2026-10-07"), shown as "7 Oct 2026", with a calendar
@@ -12,22 +12,85 @@ import { formatDate, parseDate, today } from "./dates.js";
  * typed while the input has focus; text that isn't a date stays text, and
  * validation says so.
  *
- * The calendar button takes focus on press in every engine (macOS engines
- * don't focus buttons on click), so focus never falls to the body between
- * the input and the calendar: a grid row being edited would end its edit.
+ * `min` and `max` bound the calendar and the value; `format` chooses how a
+ * date is written. The calendar button takes focus on press in every engine
+ * (macOS engines don't focus buttons on click), so focus never falls to the
+ * body between the input and the calendar: a grid row being edited would end
+ * its edit.
  */
 export class DateField extends BoundField {
     #calendar = new CalendarState();
     /** What's being typed, while the input has focus. */
     #draft = this.prop(undefined);
+    #min = this.prop(undefined);
+    #max = this.prop(undefined);
+    #format = this.prop("medium");
+    #placeholder = this.prop("");
+    #dismissOnSelect = this.prop(true);
+    /** The earliest date that can be chosen, `YYYY-MM-DD`, inclusive. */
+    get min() {
+        return this.#min.value;
+    }
+    set min(v) {
+        if (v !== undefined && !isIsoDate(v))
+            throw new TypeError("min must be a date, like 2026-10-07");
+        this.#min.value = v;
+    }
+    /** The latest date that can be chosen, `YYYY-MM-DD`, inclusive. */
+    get max() {
+        return this.#max.value;
+    }
+    set max(v) {
+        if (v !== undefined && !isIsoDate(v))
+            throw new TypeError("max must be a date, like 2026-10-07");
+        this.#max.value = v;
+    }
+    /** How a date is written in the input: `"medium"` (default), `"short"` or `"iso"`. */
+    get format() {
+        return this.#format.value;
+    }
+    set format(v) {
+        if (v !== "medium" && v !== "short" && v !== "iso")
+            throw new TypeError('format must be "medium", "short" or "iso"');
+        this.#format.value = v;
+    }
+    /** Placeholder text. Default: "None" for a nullable field, otherwise a date hint. */
+    get placeholder() {
+        return this.#placeholder.value;
+    }
+    set placeholder(v) {
+        this.#placeholder.value = v;
+    }
+    /** Whether choosing a day closes the calendar. Default `true`. */
+    get dismissOnSelect() {
+        return this.#dismissOnSelect.value;
+    }
+    set dismissOnSelect(v) {
+        this.#dismissOnSelect.value = v;
+    }
     focus(options) {
         this.querySelector("input")?.focus(options);
     }
+    validation(_meta, value) {
+        if (typeof value !== "string" || !isIsoDate(value))
+            return undefined;
+        const min = this.#min.value;
+        const max = this.#max.value;
+        if (min !== undefined && max !== undefined && min > max)
+            return "The earliest date is after the latest date.";
+        if (min !== undefined && value < min)
+            return `Choose ${formatDate(min)} or later.`;
+        if (max !== undefined && value > max)
+            return `Choose ${formatDate(max)} or earlier.`;
+        return undefined;
+    }
     control(c) {
         const value = typeof c.value === "string" ? c.value : undefined;
         const readOnly = c.state.readOnly;
+        const disabled = !c.state.enabled;
         const open = this.#calendar.open.value;
-        const text = this.#draft.value ?? (value === undefined ? "" : formatDate(value));
+        const text = this.#draft.value ?? (value === undefined ? "" : formatDate(value, this.#format.value));
+        const placeholder = this.#placeholder.value || (c.meta?.nullable ? "None" : "A date, like 7 Oct");
         const button = `${c.id}-calendar`;
         const close = (refocus) => {
             this.#calendar.open.value = false;
@@ -37,8 +100,8 @@ export class DateField extends BoundField {
         return html `<div class="aster-field aster-date" data-ring-owner style=${anchorStyle(c.id)}>
         <input id=${c.id} .value=${live(text)}
           aria-label=${this.labelled ? nothing : c.label}
-          placeholder=${c.meta?.nullable ? "None" : "A date, like 7 Oct"}
-          ?readonly=${readOnly}
+          placeholder=${placeholder}
+          ?readonly=${readOnly} ?disabled=${disabled}
           aria-required=${c.state.required ? "true" : nothing}
           aria-invalid=${c.invalid ? "true" : nothing}
           aria-describedby=${c.describedBy ?? nothing}
@@ -53,6 +116,7 @@ export class DateField extends BoundField {
             ? nothing
             : html `<button type="button" class="aster-date-button" id=${button} aria-label=${`Choose ${c.label}`}
               aria-haspopup="dialog" aria-expanded=${open ? "true" : "false"} aria-controls=${`${c.id}-dialog`}
+              ?disabled=${disabled}
               @pointerdown=${(e) => e.currentTarget.focus()}
               @mousedown=${(e) => e.preventDefault()}
               @click=${() => (open ? close(false) : this.#open(value))}>
@@ -65,10 +129,14 @@ export class DateField extends BoundField {
             value,
             today: today(),
             label: `Choose ${c.label}`,
+            min: this.#min.value,
+            max: this.#max.value,
             choose: (date) => {
                 this.write(date);
-                close(false);
-                this.querySelector("input")?.focus();
+                if (this.#dismissOnSelect.peek()) {
+                    close(false);
+                    this.querySelector("input")?.focus();
+                }
             },
             dismiss: close,
         })}`;

package/dist/date/dates.d.ts

@@ -1,6 +1,14 @@
 export declare function iso(year: number, month: number, day: number): string | undefined;
-/** "7 Oct 2026" for `2026-10-07`; other text unchanged. Month names are ours, the same in every engine. */
-export declare function formatDate(value: string): string;
+/** How a date is written in a field's input. */
+export type DateFormat = "medium" | "short" | "iso";
+/**
+ * A date as written: "7 Oct 2026" (`medium`, the default), "7 Oct 26"
+ * (`short`) or `2026-10-07` (`iso`). Other text unchanged. Month names are
+ * ours, the same in every engine.
+ */
+export declare function formatDate(value: string, format?: DateFormat): string;
+/** Whether text is a real `YYYY-MM-DD` calendar date. */
+export declare function isIsoDate(text: string): boolean;
 /**
  * A typed date: `2026-10-07`, `7/10/2026` (day first), `7 Oct 2026`,
  * `Oct 7 2026`, or `7 Oct` (this year). `undefined` when it isn't one.

package/dist/date/dates.js

@@ -7,10 +7,30 @@ export function iso(year, month, day) {
         return undefined;
     return d.toISOString().slice(0, 10);
 }
-/** "7 Oct 2026" for `2026-10-07`; other text unchanged. Month names are ours, the same in every engine. */
-export function formatDate(value) {
+/**
+ * A date as written: "7 Oct 2026" (`medium`, the default), "7 Oct 26"
+ * (`short`) or `2026-10-07` (`iso`). Other text unchanged. Month names are
+ * ours, the same in every engine.
+ */
+export function formatDate(value, format = "medium") {
     const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value);
-    return m ? `${Number(m[3])} ${SHORT[Number(m[2]) - 1]} ${m[1]}` : value;
+    if (!m)
+        return value;
+    switch (format) {
+        case "iso":
+            return value;
+        case "short":
+            return `${Number(m[3])} ${SHORT[Number(m[2]) - 1]} ${m[1].slice(2)}`;
+        case "medium":
+            return `${Number(m[3])} ${SHORT[Number(m[2]) - 1]} ${m[1]}`;
+    }
+}
+/** Whether text is a real `YYYY-MM-DD` calendar date. */
+export function isIsoDate(text) {
+    if (!/^\d{4}-\d{2}-\d{2}$/.test(text))
+        return false;
+    const [y, m, d] = text.split("-").map(Number);
+    return iso(y, m, d) === text;
 }
 /**
  * A typed date: `2026-10-07`, `7/10/2026` (day first), `7 Oct 2026`,

package/dist/dialog/config.d.ts

@@ -0,0 +1,4 @@
+/** A header appears when the dialog has a title, unless `header` says otherwise. */
+export declare function dialogHeaderShown(title: string | undefined, header: boolean | undefined): boolean;
+/** The close control belongs to the header and is off by default, preserving today's dialogs. */
+export declare function dialogCloseShown(header: boolean, showCloseButton: boolean | undefined): boolean;

package/dist/dialog/config.js

@@ -0,0 +1,8 @@
+/** A header appears when the dialog has a title, unless `header` says otherwise. */
+export function dialogHeaderShown(title, header) {
+    return header ?? (title !== undefined && title !== "");
+}
+/** The close control belongs to the header and is off by default, preserving today's dialogs. */
+export function dialogCloseShown(header, showCloseButton) {
+    return header && showCloseButton === true;
+}