material 1.0.3 → 3.0.0-next.0

package/dist/elements/text-field.js

@@ -0,0 +1,102 @@
+import createTextField from "../components/text-field/index.js";
+import { defineElement } from "./define.js";
+const create = (config) => {
+    const field = createTextField(config);
+    const input = field.input;
+    if (config.value && input instanceof HTMLTextAreaElement) {
+        input.defaultValue = config.value;
+        field.updatePositions();
+    }
+    if (config.ariaLabel)
+        input.setAttribute("aria-label", config.ariaLabel);
+    return Object.assign(field, { select: () => input.select() });
+};
+const inputAttribute = (name) => (c, v) => {
+    if (v === null || v === false)
+        c.removeAttribute(name);
+    else
+        c.setAttribute(name, v === true ? "" : String(v));
+};
+const textFieldSpec = {
+    name: "text-field",
+    create: (config) => create(config),
+    styles: ["text-field"],
+    hostStyles: ":host>*{width:100%}",
+    attributes: {
+        variant: {
+            type: "string",
+            config: "variant",
+            update: (c, v) => void c.setVariant(v === "outlined" ? "outlined" : "filled"),
+        },
+        density: { type: "string", config: "density", update: (c, v) => void c.setDensity(String(v ?? "default")) },
+        label: { type: "string", config: "label" },
+        type: { type: "string", config: "type" },
+        value: {
+            type: "string",
+            config: "value",
+            update: (c, v) => {
+                c.input.defaultValue = String(v ?? "");
+                c.updatePositions();
+            },
+        },
+        placeholder: { type: "string", config: "placeholder", update: (c, v) => void c.setAttribute("placeholder", String(v || " ")) },
+        "supporting-text": {
+            type: "string",
+            config: "supportingText",
+            update: (c, v) => void (v ? c.setSupportingText(String(v), c.isError()) : c.removeSupportingText()),
+        },
+        "prefix-text": {
+            type: "string",
+            config: "prefixText",
+            update: (c, v) => void (v ? c.setPrefixText(String(v)) : c.removePrefixText()),
+        },
+        "suffix-text": {
+            type: "string",
+            config: "suffixText",
+            update: (c, v) => void (v ? c.setSuffixText(String(v)) : c.removeSuffixText()),
+        },
+        "leading-icon": {
+            type: "string",
+            config: "leadingIcon",
+            update: (c, v) => void (v ? c.setLeadingIcon(String(v)) : c.removeLeadingIcon()),
+        },
+        "trailing-icon": {
+            type: "string",
+            config: "trailingIcon",
+            update: (c, v) => void (v ? c.setTrailingIcon(String(v)) : c.removeTrailingIcon()),
+        },
+        maxlength: { type: "number", config: "maxLength", update: inputAttribute("maxlength") },
+        pattern: { type: "string", config: "pattern", update: inputAttribute("pattern") },
+        required: { type: "boolean", config: "required", update: (c, v) => void c.setRequired(!!v) },
+        readonly: { type: "boolean", config: "readonly", update: inputAttribute("readonly") },
+        disabled: { type: "boolean", config: "disabled", update: (c, v) => void (v ? c.disable() : c.enable()) },
+        error: { type: "boolean", config: "error", update: (c, v) => void c.setError(!!v) },
+        autocomplete: { type: "string", config: "autocomplete", update: inputAttribute("autocomplete") },
+        "aria-label": { type: "string", config: "ariaLabel", update: inputAttribute("aria-label") },
+    },
+    properties: {
+        value: { get: (c) => c.getValue(), set: (c, v) => void c.setValue(String(v ?? "")) },
+    },
+    methods: ["select", "setError"],
+    model: "value",
+    events: {
+        input: { detail: (payload) => ({ value: payload.value }) },
+        change: { detail: (payload) => ({ value: payload.value }) },
+    },
+    form: {
+        value: (c) => c.getValue(),
+        control: (c) => c.input,
+        events: ["input", "change"],
+        activate: (c) => c.input.focus(),
+        state: (c) => c.getValue(),
+        restore: (c, state) => void c.setValue(state),
+        disable: (c, disabled) => void (disabled ? c.disable() : c.enable()),
+    },
+    setup: (_host, c) => {
+        const stop = (event) => event.stopPropagation();
+        c.input.addEventListener("input", stop);
+        return () => c.input.removeEventListener("input", stop);
+    },
+};
+export const textFieldElement = defineElement(textFieldSpec);
+export const defineTextField = (options) => textFieldElement.define(options);

package/dist/elements/timepicker.d.ts

@@ -0,0 +1,174 @@
+/**
+ * `<m-timepicker>`: the time picker as a form-associated custom element.
+ *
+ * The factory renders no field of its own, only its modal dialog, so the
+ * element shows nothing until it opens: an app opens it from its own control
+ * with `show()` or the `open` attribute (a `<label for>` pointing at it opens
+ * it too), and shows the value where it likes. The dialog is a native
+ * `<dialog>` in the element's shadow root shown with `showModal()`: the page
+ * outside is inert, and focus goes back to whatever opened it.
+ *
+ * The value is a 24-hour time, `HH:MM`, or `HH:MM:SS` when `step` is under a
+ * minute, as on `<input type=time>`; empty is `""`. The dial starts on the
+ * value, or on the current time when there is none.
+ *
+ * The dial edits a draft (FLO-288): `input` is dispatched with `{ value, draftValue }`
+ * as it moves, and OK commits it, dispatching `change` with `{ value }` when
+ * the time differs and `confirm` with `{ value }` on every OK. Cancel, Escape
+ * and the backdrop discard the draft. `open`
+ * reflects the dialog's state, as on `<dialog open>`; `open` and `close` are
+ * dispatched as it opens and closes (not when the attribute is what changed).
+ *
+ * `step` is in seconds, as on `<input type=time>`: under a minute it shows
+ * seconds and is their step (`secondStep`); from a minute up it is the
+ * minute step (`minuteStep`), rounded to whole minutes, which is the finest
+ * the dial has. `show-seconds` shows seconds whatever the step, so a 5- or
+ * 15-minute step can go with them; the value is then `HH:MM:SS`. `min` and
+ * `max` are the factory's `minTime` and `maxTime`. Those four and `name` have
+ * no setter: changing one recreates the picker, keeping the value. `disabled` is the factory's: it does not open. The
+ * element reports `required` itself, as `valueMissing`.
+ *
+ * Parts: `time-picker`, `dialog`, `title`, `selectors`, `hours`, `minutes`, `period`, `dial`,
+ * `dial-handle`, `actions`, `cancel`, `confirm`, among others.
+ *
+ * @module elements
+ */
+import { type TimePickerComponent, type TimePickerEvents } from "../components/timepicker/types.js";
+import { type DefineOptions, type ElementHost, type ElementInstance } from "./define.js";
+/** The time picker as the element sees it: its value can be empty. */
+export interface TimepickerElementComponent {
+    element: HTMLElement;
+    picker: TimePickerComponent;
+    /** The committed time, or "" before one is set or confirmed. */
+    getValue: () => string;
+    setValue: (value: string) => void;
+    /** Opens the dialog, unless the picker is disabled. */
+    show: () => void;
+    /** Closes the dialog without committing. */
+    close: () => void;
+    isOpen: () => boolean;
+    required: boolean;
+    /** Subscribes to the time picker's events; `change` and `input` carry the element's possibly empty value. */
+    on: <K extends keyof TimePickerEvents>(event: K, handler: TimePickerEvents[K]) => void;
+    off: <K extends keyof TimePickerEvents>(event: K, handler: TimePickerEvents[K]) => void;
+    destroy: () => void;
+}
+declare const timepickerSpec: {
+    name: string;
+    create: (config: import("./define.js").Config) => TimepickerElementComponent;
+    styles: string[];
+    hostStyles: string;
+    attributes: {
+        value: {
+            type: "string";
+            config: string;
+            update: (c: TimepickerElementComponent, v: import("./define.js").AttributeValue) => void;
+        };
+        format: {
+            type: "string";
+            config: string;
+            update: (c: TimepickerElementComponent, v: import("./define.js").AttributeValue) => undefined;
+        };
+        type: {
+            type: "string";
+            config: string;
+            update: (c: TimepickerElementComponent, v: import("./define.js").AttributeValue) => undefined;
+        };
+        orientation: {
+            type: "string";
+            config: string;
+            update: (c: TimepickerElementComponent, v: import("./define.js").AttributeValue) => undefined;
+        };
+        min: {
+            type: "string";
+            config: string;
+        };
+        max: {
+            type: "string";
+            config: string;
+        };
+        step: {
+            type: "number";
+            config: string;
+        };
+        "show-seconds": {
+            type: "boolean";
+            config: string;
+        };
+        label: {
+            type: "string";
+            config: string;
+            update: (c: TimepickerElementComponent, v: import("./define.js").AttributeValue) => undefined;
+        };
+        required: {
+            type: "boolean";
+            config: string;
+            update: (c: TimepickerElementComponent, v: import("./define.js").AttributeValue) => void;
+        };
+        disabled: {
+            type: "boolean";
+            config: string;
+            update: (c: TimepickerElementComponent, v: import("./define.js").AttributeValue) => void;
+        };
+        open: {
+            type: "boolean";
+            update: (c: TimepickerElementComponent, v: import("./define.js").AttributeValue, host: HTMLElement) => void;
+        };
+    };
+    properties: {
+        value: {
+            get: (c: TimepickerElementComponent) => string;
+            set: (c: TimepickerElementComponent, value: unknown) => void;
+        };
+    };
+    model: "value";
+    methods: readonly ["show", "close"];
+    events: {
+        change: {
+            detail: (payload: unknown) => {
+                value: string;
+            };
+        };
+        input: {
+            detail: (payload: unknown) => {
+                value: string;
+                draftValue: string;
+            };
+        };
+        confirm: {
+            detail: (payload: unknown) => {
+                value: string;
+            };
+        };
+        open: {
+            detail: () => null;
+            state: true;
+        };
+        close: {
+            detail: () => null;
+            state: true;
+        };
+    };
+    form: {
+        value: (c: TimepickerElementComponent) => string;
+        events: string[];
+        activate: (c: TimepickerElementComponent) => void;
+        state: (c: TimepickerElementComponent) => string;
+        restore: (c: TimepickerElementComponent, state: string) => void;
+        disable: (c: TimepickerElementComponent, disabled: boolean) => void;
+    };
+    setup: (host: ElementHost<TimepickerElementComponent>, c: TimepickerElementComponent) => () => void;
+};
+export declare const timepickerElement: import("./define.js").ElementDefinition<TimepickerElementComponent>;
+export type TimepickerSpec = typeof timepickerSpec;
+/** `<m-timepicker>` as a ref or a query returns it. */
+export type TimepickerElement = ElementInstance<TimepickerSpec, TimepickerElementComponent>;
+/** Registers `<m-timepicker>` (or `<prefix-timepicker>`). */
+export declare const defineTimepicker: (options?: DefineOptions) => string;
+declare global {
+    /** `document.querySelector("m-…")` and `createElement` return the element's type (the default prefix). */
+    interface HTMLElementTagNameMap {
+        "m-timepicker": TimepickerElement;
+    }
+}
+export {};

package/dist/elements/timepicker.js

@@ -0,0 +1,165 @@
+import createTimePicker from "../components/timepicker/index.js";
+import { TIME_FORMAT, TIME_PICKER_ORIENTATION, TIME_PICKER_TYPE, } from "../components/timepicker/types.js";
+import { createEmitter } from "../core/state/emitter.js";
+import { defineElement } from "./define.js";
+const TIME = /^([01]\d|2[0-3]):[0-5]\d(:[0-5]\d)?$/;
+const steps = (step) => {
+    if (!step || step <= 0)
+        return {};
+    if (step < 60)
+        return { showSeconds: true, secondStep: Math.round(step) || 1 };
+    return { minuteStep: Math.round(step / 60) };
+};
+const create = (config) => {
+    const { step, required, value, ...rest } = config;
+    const initial = value && TIME.test(value) ? value : "";
+    const picker = createTimePicker({ ...rest, ...steps(step), value: initial || undefined });
+    const changes = createEmitter();
+    let empty = !initial;
+    const onChange = (event) => {
+        empty = false;
+        changes.emit("change", event);
+    };
+    const onInput = (event) => {
+        changes.emit("input", { value: empty ? "" : event.value, draftValue: event.draftValue });
+    };
+    const onConfirm = (event) => {
+        if (empty)
+            onChange(event);
+    };
+    picker.on("change", onChange);
+    picker.on("input", onInput);
+    picker.on("confirm", onConfirm);
+    return {
+        element: picker.element,
+        picker,
+        getValue: () => (empty ? "" : picker.getValue()),
+        setValue: (next) => {
+            if (next && TIME.test(next)) {
+                empty = false;
+                picker.setValue(next);
+            }
+            else {
+                empty = true;
+            }
+        },
+        show: () => void picker.open(),
+        close: () => void picker.close(),
+        isOpen: picker.isOpen,
+        required: !!required,
+        on: (event, handler) => void (event === "change" || event === "input" ? changes.on(event, handler) : picker.on(event, handler)),
+        off: (event, handler) => void (event === "change" || event === "input" ? changes.off(event, handler) : picker.off(event, handler)),
+        destroy: () => {
+            picker.off("change", onChange);
+            picker.off("input", onInput);
+            picker.off("confirm", onConfirm);
+            changes.clear();
+            picker.destroy();
+        },
+    };
+};
+const hosts = new WeakMap();
+let missing = null;
+const valueMissingMessage = () => (missing ?? (missing = Object.assign(document.createElement("input"), { type: "time", required: true }).validationMessage ||
+    "Please fill out this field."));
+const validate = (c) => {
+    const internals = hosts.get(c)?.internals;
+    if (!internals)
+        return;
+    if (c.required && !c.getValue())
+        internals.setValidity({ valueMissing: true }, valueMissingMessage());
+    else
+        internals.setValidity({});
+};
+const setValue = (c, value) => {
+    c.setValue(value === null || value === undefined ? "" : String(value));
+    validate(c);
+};
+const setDisabled = (c, disabled) => void (disabled ? c.picker.disable() : c.picker.enable());
+const setOpen = (c, open, host) => {
+    if (open)
+        c.show();
+    else
+        c.close();
+    host.toggleAttribute("open", c.isOpen());
+};
+const timepickerSpec = {
+    name: "timepicker",
+    create: (config) => create(config),
+    styles: ["timepicker"],
+    hostStyles: ":host{display:contents}",
+    attributes: {
+        value: { type: "string", config: "value", update: (c, v) => setValue(c, v) },
+        format: {
+            type: "string",
+            config: "format",
+            update: (c, v) => void c.picker.setFormat(v === "24h" ? TIME_FORMAT.MILITARY : TIME_FORMAT.AMPM),
+        },
+        type: {
+            type: "string",
+            config: "type",
+            update: (c, v) => void c.picker.setType(v === "input" ? TIME_PICKER_TYPE.INPUT : TIME_PICKER_TYPE.DIAL),
+        },
+        orientation: {
+            type: "string",
+            config: "orientation",
+            update: (c, v) => void c.picker.setOrientation(v === "horizontal" ? TIME_PICKER_ORIENTATION.HORIZONTAL : TIME_PICKER_ORIENTATION.VERTICAL),
+        },
+        min: { type: "string", config: "minTime" },
+        max: { type: "string", config: "maxTime" },
+        step: { type: "number", config: "step" },
+        "show-seconds": { type: "boolean", config: "showSeconds" },
+        label: { type: "string", config: "title", update: (c, v) => void c.picker.setTitle(v === null ? "" : String(v)) },
+        required: {
+            type: "boolean",
+            config: "required",
+            update: (c, v) => {
+                c.required = !!v;
+                validate(c);
+            },
+        },
+        disabled: { type: "boolean", config: "disabled", update: (c, v) => setDisabled(c, !!v) },
+        open: { type: "boolean", update: (c, v, host) => setOpen(c, !!v, host) },
+    },
+    properties: {
+        value: { get: (c) => c.getValue(), set: setValue },
+    },
+    model: "value",
+    methods: ["show", "close"],
+    events: {
+        change: { detail: (payload) => ({ value: payload.value }) },
+        input: { detail: (payload) => ({ value: payload.value, draftValue: payload.draftValue }) },
+        confirm: { detail: (payload) => ({ value: payload.value }) },
+        open: { detail: () => null, state: true },
+        close: { detail: () => null, state: true },
+    },
+    form: {
+        value: (c) => c.getValue(),
+        events: ["change"],
+        activate: (c) => c.show(),
+        state: (c) => c.getValue(),
+        restore: (c, state) => setValue(c, state),
+        disable: (c, disabled) => setDisabled(c, disabled),
+    },
+    setup: (host, c) => {
+        hosts.set(c, host);
+        validate(c);
+        const reflect = () => void host.toggleAttribute("open", c.isOpen());
+        const onChange = () => validate(c);
+        c.on("open", reflect);
+        c.on("close", reflect);
+        c.on("change", onChange);
+        const stop = (event) => event.stopPropagation();
+        c.element.addEventListener("input", stop);
+        if (host.hasAttribute("open"))
+            setOpen(c, true, host);
+        return () => {
+            c.off("open", reflect);
+            c.off("close", reflect);
+            c.off("change", onChange);
+            c.element.removeEventListener("input", stop);
+        };
+    },
+};
+export const timepickerElement = defineElement(timepickerSpec);
+export const defineTimepicker = (options) => timepickerElement.define(options);

package/dist/elements/toolbar.d.ts

@@ -0,0 +1,103 @@
+/**
+ * `<m-toolbar>`: M3 Expressive's docked and floating toolbars as a container
+ * with slots.
+ *
+ * Children are the items (`<m-icon-button>`, `<m-button>`, a text field),
+ * inside the element with the `toolbar` role: one tab stop, walked with the
+ * arrow keys, Home and End. Each item's host takes the tab stop and delegates
+ * focus to its control. `slot="fab"` takes a FAB, beside the toolbar and
+ * outside its tab stop. `slot="overflow"` takes an `<m-menu>`: the toolbar
+ * adds a "more" button and makes it the menu's anchor.
+ *
+ * `variant`, `orientation`, `placement`, `arrangement`, `fab-position` and
+ * `scroll-behavior` are the factory's options; `color` and `flat` (no
+ * elevation) change in place. `show()` and `hide()` move the toolbar on and
+ * off screen, and `show` and `hide` are dispatched when it does.
+ *
+ * Parts: `toolbar`, `bar`, `fab`, `overflow`.
+ *
+ * @module elements
+ */
+import type { ToolbarComponent } from "../components/toolbar/types.js";
+import { type Config, type DefineOptions, type ElementInstance } from "./define.js";
+declare const toolbarSpec: {
+    name: string;
+    slots: readonly ["fab", "overflow"];
+    create: (config: Config) => ToolbarComponent;
+    styles: string[];
+    hostStyles: string;
+    attributes: {
+        variant: {
+            type: "string";
+            config: string;
+        };
+        color: {
+            type: "string";
+            config: string;
+            update: (c: ToolbarComponent, v: import("./define.js").AttributeValue) => ToolbarComponent;
+        };
+        orientation: {
+            type: "string";
+            config: string;
+        };
+        placement: {
+            type: "string";
+            config: string;
+        };
+        arrangement: {
+            type: "string";
+            config: string;
+        };
+        flat: {
+            type: "boolean";
+            update: (c: ToolbarComponent, v: import("./define.js").AttributeValue) => undefined;
+        };
+        "fab-position": {
+            type: "string";
+            config: string;
+        };
+        "scroll-behavior": {
+            type: "string";
+            config: string;
+        };
+        "scroll-threshold": {
+            type: "number";
+            config: string;
+        };
+        "overflow-label": {
+            type: "string";
+            config: string;
+        };
+        "aria-label": {
+            type: "string";
+            update: (c: ToolbarComponent, v: import("./define.js").AttributeValue) => void;
+        };
+    };
+    methods: readonly ["show", "hide"];
+    events: {
+        show: {
+            detail: () => null;
+            state: true;
+        };
+        hide: {
+            detail: () => null;
+            state: true;
+        };
+    };
+    config: (host: HTMLElement) => Config;
+    observeChildren: (host: import("./define.js").ElementHost<ToolbarComponent>, component: ToolbarComponent) => boolean;
+    setup: (host: import("./define.js").ElementHost<ToolbarComponent>, component: ToolbarComponent) => () => void | undefined;
+};
+export declare const toolbarElement: import("./define.js").ElementDefinition<ToolbarComponent>;
+export type ToolbarSpec = typeof toolbarSpec;
+/** `<m-toolbar>` as a ref or a query returns it. */
+export type ToolbarElement = ElementInstance<ToolbarSpec, ToolbarComponent>;
+/** Registers `<m-toolbar>` (or `<prefix-toolbar>`). */
+export declare const defineToolbar: (options?: DefineOptions) => string;
+declare global {
+    /** `document.querySelector("m-…")` and `createElement` return the element's type (the default prefix). */
+    interface HTMLElementTagNameMap {
+        "m-toolbar": ToolbarElement;
+    }
+}
+export {};

package/dist/elements/toolbar.js

@@ -0,0 +1,78 @@
+import createToolbar from "../components/toolbar/index.js";
+import { defineElement } from "./define.js";
+const slotted = (host, name) => Array.from(host.children).some((child) => child.getAttribute("slot") === name);
+const namedSlot = (name) => {
+    const slot = document.createElement("slot");
+    slot.name = name;
+    return slot;
+};
+const create = (config) => {
+    const { hasFab, hasOverflow, ...rest } = config;
+    const toolbar = createToolbar({
+        ...rest,
+        items: [document.createElement("slot")],
+        fab: hasFab ? namedSlot("fab") : undefined,
+        overflow: hasOverflow ? () => null : undefined,
+    });
+    if (hasOverflow)
+        toolbar.element.append(namedSlot("overflow"));
+    return toolbar;
+};
+const readToolbar = (host) => ({
+    hasFab: slotted(host, "fab"),
+    hasOverflow: slotted(host, "overflow"),
+    elevated: !host.hasAttribute("flat"),
+});
+const anchorMenus = (component) => {
+    const slot = component.element.querySelector('slot[name="overflow"]');
+    for (const menu of slot?.assignedElements() ?? []) {
+        menu.anchor = component.overflowButton;
+    }
+};
+const toolbarSpec = {
+    name: "toolbar",
+    slots: ["fab", "overflow"],
+    create: (config) => create(config),
+    styles: ["icon-button", "toolbar"],
+    hostStyles: ":host{display:block}:host([variant=floating]){width:fit-content}",
+    attributes: {
+        variant: { type: "string", config: "variant" },
+        color: { type: "string", config: "color", update: (c, v) => c.setColor(v === null ? "standard" : String(v)) },
+        orientation: { type: "string", config: "orientation" },
+        placement: { type: "string", config: "placement" },
+        arrangement: { type: "string", config: "arrangement" },
+        flat: {
+            type: "boolean",
+            update: (c, v) => void c.element.classList.toggle(`${c.getClass("toolbar")}--elevated`, !v && c.element.classList.contains(`${c.getClass("toolbar")}--floating`)),
+        },
+        "fab-position": { type: "string", config: "fabPosition" },
+        "scroll-behavior": { type: "string", config: "scrollBehavior" },
+        "scroll-threshold": { type: "number", config: "scrollThreshold" },
+        "overflow-label": { type: "string", config: "overflowLabel" },
+        "aria-label": {
+            type: "string",
+            update: (c, v) => c.bar.setAttribute("aria-label", v === null ? "Toolbar" : String(v)),
+        },
+    },
+    methods: ["show", "hide"],
+    events: {
+        show: { detail: () => null, state: true },
+        hide: { detail: () => null, state: true },
+    },
+    config: readToolbar,
+    observeChildren: (host, component) => slotted(host, "fab") === !!component.element.querySelector('slot[name="fab"]') &&
+        slotted(host, "overflow") === !!component.overflowButton,
+    setup: (host, component) => {
+        const label = host.getAttribute("aria-label");
+        if (label !== null)
+            component.bar.setAttribute("aria-label", label);
+        const overflow = component.element.querySelector('slot[name="overflow"]');
+        const onOverflow = () => anchorMenus(component);
+        overflow?.addEventListener("slotchange", onOverflow);
+        anchorMenus(component);
+        component.bar.dispatchEvent(new Event("slotchange"));
+        return () => overflow?.removeEventListener("slotchange", onOverflow);
+    },
+};
+export const toolbarElement = defineElement(toolbarSpec);
+export const defineToolbar = (options) => toolbarElement.define(options);