material 1.0.4 → 3.0.0-next.1

package/dist/elements/fab-menu.d.ts

@@ -0,0 +1,117 @@
+/**
+ * `<m-fab-menu>` with `<m-fab-menu-item>` children.
+ *
+ * Each `<m-fab-menu-item>` declares one action: its text (or `label`),
+ * `value` and `icon`. The FAB takes `icon` and `aria-label`, which names the
+ * menu it opens. `color`, `size`, `presentation` and `placement` are the
+ * factory's options: the expressive list below 600px, the baseline menu from
+ * 600px, unless `presentation` says otherwise.
+ *
+ * `open` is state, as on `<m-menu>`: the attribute reflects whether the menu
+ * is open, and setting or removing it opens or closes it. `show()`, `hide()`
+ * and `toggle()` do the same. `open` and `close` are dispatched as it opens
+ * and closes, by those methods or the user (not when the attribute or the
+ * property is what changed: that is applied at once, and quietly), and
+ * `select` with the item's value when one is chosen.
+ *
+ * Parts: `fab-menu`, `fab`, `list`, `item`.
+ *
+ * @module elements
+ */
+import type { FabMenuComponent } from "../components/fab-menu/types.js";
+import { type Config, type DefineOptions, type ElementAttributes, type ElementInstance } from "./define.js";
+/** The FAB menu, with the methods the element adds to it. */
+export type FabMenuElementComponent = FabMenuComponent & {
+    /** Opens the menu. */
+    show: () => void;
+    /** Closes the menu. */
+    hide: () => void;
+};
+declare const fabMenuSpec: {
+    name: string;
+    ssr: false;
+    create: (config: Config) => FabMenuElementComponent;
+    styles: string[];
+    attributes: {
+        open: {
+            type: "boolean";
+            update: (c: FabMenuElementComponent, v: import("./define.js").AttributeValue) => void;
+        };
+        /** Markup (HTML). Not sanitized by default: see Markup and sanitizing. The menu opts out of server rendering, so the server leaves this escaped until the component upgrades. */
+        icon: {
+            type: "string";
+            config: string;
+        };
+        "aria-label": {
+            type: "string";
+            config: string;
+            update: (c: FabMenuElementComponent, v: import("./define.js").AttributeValue) => void;
+        };
+        color: {
+            type: "string";
+            config: string;
+        };
+        size: {
+            type: "string";
+            config: string;
+        };
+        presentation: {
+            type: "string";
+            config: string;
+        };
+        placement: {
+            type: "string";
+            config: string;
+        };
+    };
+    methods: readonly ["show", "hide", "toggle"];
+    events: {
+        open: {
+            detail: () => {};
+            state: true;
+        };
+        close: {
+            detail: () => {};
+            state: true;
+        };
+        select: {
+            detail: (payload: unknown) => {
+                value: string;
+            };
+        };
+    };
+    config: (host: HTMLElement) => Config;
+    setup: (host: import("./define.js").ElementHost<FabMenuElementComponent>, c: FabMenuElementComponent) => void;
+    observeChildren: (host: import("./define.js").ElementHost<FabMenuElementComponent>, c: FabMenuElementComponent) => boolean;
+};
+export declare const fabMenuElement: import("./define.js").ElementDefinition<FabMenuElementComponent>;
+export type FabMenuSpec = typeof fabMenuSpec;
+/** `<m-fab-menu>` as a ref or a query returns it. */
+export type FabMenuElement = ElementInstance<FabMenuSpec, FabMenuElementComponent>;
+/** `<m-fab-menu-item>` declares one action and renders nothing. Its text is the label unless `label` is set. */
+export declare const fabMenuItemDeclaration: {
+    readonly name: "fab-menu-item";
+    readonly attributes: {
+        readonly value: {
+            readonly type: "string";
+        };
+        readonly label: {
+            readonly type: "string";
+        };
+        /** Markup (HTML). Not sanitized by default: see Markup and sanitizing. The menu opts out of server rendering, so the server leaves this escaped until the component upgrades. */
+        readonly icon: {
+            readonly type: "string";
+        };
+    };
+};
+export type FabMenuItemAttributes = ElementAttributes<typeof fabMenuItemDeclaration>;
+/** Registers `<m-fab-menu>` and `<m-fab-menu-item>` (or with another prefix). */
+export declare const defineFabMenu: (options?: DefineOptions) => string;
+declare global {
+    /** `document.querySelector("m-…")` and `createElement` return the element's type (the default prefix). */
+    interface HTMLElementTagNameMap {
+        "m-fab-menu": FabMenuElement;
+        "m-fab-menu-item": HTMLElement & FabMenuItemAttributes;
+    }
+}
+export {};

package/dist/elements/fab-menu.js

@@ -0,0 +1,72 @@
+import createFabMenu from "../components/fab-menu/index.js";
+import { createDeclarationClass, defineElement, DEFAULT_PREFIX, } from "./define.js";
+const declaredItems = (host, tag) => Array.from(host.children)
+    .filter((child) => child.localName === tag)
+    .map((child) => {
+    const text = child.getAttribute("label") ?? (child.textContent ?? "").trim();
+    return { id: child.getAttribute("value") ?? text, text, icon: child.getAttribute("icon") ?? undefined };
+});
+const built = new WeakMap();
+const create = (config) => {
+    const { host, ...rest } = config;
+    const menu = createFabMenu(rest);
+    built.set(menu, JSON.stringify(rest.items));
+    menu.on("open", () => host.toggleAttribute("open", true));
+    menu.on("close", () => host.removeAttribute("open"));
+    return Object.assign(menu, {
+        show: () => void menu.open(),
+        hide: () => void menu.close(),
+    });
+};
+const fabMenuSpec = {
+    name: "fab-menu",
+    ssr: false,
+    create: (config) => create(config),
+    styles: ["fab", "menu", "fab-menu"],
+    attributes: {
+        open: {
+            type: "boolean",
+            update: (c, v) => {
+                if (!!v !== c.isOpen())
+                    (v ? c.show : c.hide)();
+            },
+        },
+        icon: { type: "string", config: "icon" },
+        "aria-label": {
+            type: "string",
+            config: "ariaLabel",
+            update: (c, v) => c.fab.setAttribute("aria-label", v === null ? "" : String(v)),
+        },
+        color: { type: "string", config: "color" },
+        size: { type: "string", config: "size" },
+        presentation: { type: "string", config: "presentation" },
+        placement: { type: "string", config: "placement" },
+    },
+    methods: ["show", "hide", "toggle"],
+    events: {
+        open: { detail: () => ({}), state: true },
+        close: { detail: () => ({}), state: true },
+        select: { detail: (payload) => ({ value: payload.value }) },
+    },
+    config: (host) => ({ host, items: declaredItems(host, `${host.localName}-item`) }),
+    setup: (host, c) => {
+        if (host.hasAttribute("open"))
+            c.show();
+    },
+    observeChildren: (host, c) => built.get(c) === JSON.stringify(declaredItems(host, `${host.localName}-item`)),
+};
+export const fabMenuElement = defineElement(fabMenuSpec);
+export const fabMenuItemDeclaration = {
+    name: "fab-menu-item",
+    attributes: {
+        value: { type: "string" },
+        label: { type: "string" },
+        icon: { type: "string" },
+    },
+};
+export const defineFabMenu = (options) => {
+    const itemTag = `${options?.prefix ?? DEFAULT_PREFIX}-${fabMenuItemDeclaration.name}`;
+    if (!customElements.get(itemTag))
+        customElements.define(itemTag, createDeclarationClass(fabMenuItemDeclaration.attributes));
+    return fabMenuElement.define(options);
+};

package/dist/elements/fab.d.ts

@@ -0,0 +1,74 @@
+/**
+ * `<m-fab>`: the floating action button as a custom element. It has no text,
+ * so `aria-label` is its accessible name.
+ *
+ * `variant`, `size`, `position` and `aria-label` have no setter on the FAB:
+ * changing one recreates it. `type="submit"` and `type="reset"` act on the
+ * host's form.
+ *
+ * Parts: `fab`, `icon`, `ripple`.
+ *
+ * @module elements
+ */
+import type { FabComponent } from "../components/fab/types.js";
+import { type DefineOptions, type ElementInstance } from "./define.js";
+declare const fabSpec: {
+    name: string;
+    create: (config: import("./define.js").Config) => FabComponent;
+    styles: string[];
+    hostStyles: string;
+    attributes: {
+        variant: {
+            type: "string";
+            config: string;
+        };
+        size: {
+            type: "string";
+            config: string;
+        };
+        disabled: {
+            type: "boolean";
+            config: string;
+            update: (c: FabComponent, v: import("./define.js").AttributeValue) => undefined;
+        };
+        /** Markup (HTML). Not sanitized by default: see Markup and sanitizing. */
+        icon: {
+            type: "string";
+            config: string;
+            update: (c: FabComponent, v: import("./define.js").AttributeValue) => undefined;
+        };
+        position: {
+            type: "string";
+            config: string;
+        };
+        value: {
+            type: "string";
+            config: string;
+            update: (c: FabComponent, v: import("./define.js").AttributeValue) => undefined;
+        };
+        type: {
+            readonly type: "string";
+            readonly update: () => undefined;
+        };
+        "aria-label": {
+            type: "string";
+            config: string;
+        };
+    };
+    methods: readonly ["lower", "raise"];
+    form: import("./define.js").FormSpec<FabComponent>;
+    setup: <C extends import("./define.js").ElementComponent>(host: import("./define.js").ElementHost<C>) => (() => void);
+};
+export declare const fabElement: import("./define.js").ElementDefinition<FabComponent>;
+export type FabSpec = typeof fabSpec;
+/** `<m-fab>` as a ref or a query returns it. */
+export type FabElement = ElementInstance<FabSpec, FabComponent>;
+/** Registers `<m-fab>` (or `<prefix-fab>`). */
+export declare const defineFab: (options?: DefineOptions) => string;
+declare global {
+    /** `document.querySelector("m-…")` and `createElement` return the element's type (the default prefix). */
+    interface HTMLElementTagNameMap {
+        "m-fab": FabElement;
+    }
+}
+export {};

package/dist/elements/fab.js

@@ -0,0 +1,24 @@
+import createFab from "../components/fab/index.js";
+import { defineElement } from "./define.js";
+import { buttonForm, submitOnClick, typeAttribute } from "./form-button.js";
+const fabSpec = {
+    name: "fab",
+    create: (config) => createFab({ ...config, type: "button" }),
+    styles: ["fab"],
+    hostStyles: ":host{vertical-align:middle}",
+    attributes: {
+        variant: { type: "string", config: "variant" },
+        size: { type: "string", config: "size" },
+        disabled: { type: "boolean", config: "disabled", update: (c, v) => void (v ? c.disable() : c.enable()) },
+        icon: { type: "string", config: "icon", update: (c, v) => void c.setIcon(String(v ?? "")) },
+        position: { type: "string", config: "position" },
+        value: { type: "string", config: "value", update: (c, v) => void c.setValue(String(v ?? "")) },
+        type: typeAttribute,
+        "aria-label": { type: "string", config: "ariaLabel" },
+    },
+    methods: ["lower", "raise"],
+    form: buttonForm(),
+    setup: submitOnClick,
+};
+export const fabElement = defineElement(fabSpec);
+export const defineFab = (options) => fabElement.define(options);

package/dist/elements/form-button.d.ts

@@ -0,0 +1,29 @@
+/**
+ * What the button-like elements (`<m-button>`, `<m-icon-button>`, `<m-fab>`,
+ * `<m-extended-fab>`) share: `type="submit"` and `type="reset"` act on the
+ * host's form, which a button inside a shadow root cannot reach by itself.
+ *
+ * @module elements
+ */
+import type { ElementComponent, ElementHost, FormSpec } from "./define.js";
+/** The part of a button-like component the form wiring uses. */
+interface Disableable {
+    enable: () => unknown;
+    disable: () => unknown;
+}
+/**
+ * The `type` attribute: read by the click handler, never passed to the
+ * factory, whose inner button stays `type="button"`.
+ */
+export declare const typeAttribute: {
+    readonly type: "string";
+    readonly update: () => undefined;
+};
+/**
+ * Form association without a value, so `internals.form` is the host's form
+ * and a disabled fieldset disables the button.
+ */
+export declare const buttonForm: <C extends Disableable>() => FormSpec<C>;
+/** Submits or resets the host's form on click, as `type` asks. Returns the cleanup. */
+export declare const submitOnClick: <C extends ElementComponent>(host: ElementHost<C>) => (() => void);
+export {};

package/dist/elements/form-button.js

@@ -0,0 +1,19 @@
+export const typeAttribute = { type: "string", update: () => undefined };
+export const buttonForm = () => ({
+    value: () => null,
+    disable: (c, disabled) => void (disabled ? c.disable() : c.enable()),
+});
+export const submitOnClick = (host) => {
+    const onClick = () => {
+        const form = host.internals?.form;
+        const type = host.getAttribute("type");
+        if (!form || host.hasAttribute("disabled"))
+            return;
+        if (type === "submit")
+            form.requestSubmit();
+        else if (type === "reset")
+            form.reset();
+    };
+    host.addEventListener("click", onClick);
+    return () => host.removeEventListener("click", onClick);
+};

package/dist/elements/icon-button.d.ts

@@ -0,0 +1,118 @@
+/**
+ * `<m-icon-button>`: the icon button as a custom element. It has no text, so
+ * `aria-label` is its accessible name.
+ *
+ * With `toggle`, the `selected` attribute is the default state and the
+ * `selected` property the live one: the attribute moves the state until the
+ * user or script changes it. A click dispatches `change` with `{ selected, value }`
+ * from the host, as `<m-switch>` and `<m-checkbox>` do. The `toggle` event
+ * 0.10 dispatched beside it, which clashed with the native ToggleEvent, is
+ * gone in material 3.0.0 (FLO-295).
+ * `type="submit"` and `type="reset"` act on the host's form.
+ *
+ * Parts: `icon-button`, `icon`, `ripple`.
+ *
+ * @module elements
+ */
+import type { IconButtonComponent } from "../components/icon-button/types.js";
+import { type DefineOptions, type ElementInstance } from "./define.js";
+declare const iconButtonSpec: {
+    name: string;
+    create: (config: import("./define.js").Config) => IconButtonComponent;
+    styles: string[];
+    hostStyles: string;
+    attributes: {
+        variant: {
+            type: "string";
+            config: string;
+            update: (c: IconButtonComponent, v: import("./define.js").AttributeValue) => undefined;
+        };
+        size: {
+            type: "string";
+            config: string;
+            update: (c: IconButtonComponent, v: import("./define.js").AttributeValue) => undefined;
+        };
+        shape: {
+            type: "string";
+            config: string;
+            update: (c: IconButtonComponent, v: import("./define.js").AttributeValue) => undefined;
+        };
+        width: {
+            type: "string";
+            config: string;
+            update: (c: IconButtonComponent, v: import("./define.js").AttributeValue) => undefined;
+        };
+        disabled: {
+            type: "boolean";
+            config: string;
+            update: (c: IconButtonComponent, v: import("./define.js").AttributeValue) => undefined;
+        };
+        /** Markup (HTML). Not sanitized by default: see Markup and sanitizing. */
+        icon: {
+            type: "string";
+            config: string;
+            update: (c: IconButtonComponent, v: import("./define.js").AttributeValue) => undefined;
+        };
+        /** Markup (HTML), shown while `toggle` and `selected`. Not sanitized by default: see Markup and sanitizing. */
+        "selected-icon": {
+            type: "string";
+            config: string;
+            update: (c: IconButtonComponent, v: import("./define.js").AttributeValue) => undefined;
+        };
+        toggle: {
+            type: "boolean";
+            config: string;
+        };
+        selected: {
+            type: "boolean";
+            config: string;
+            update: (c: IconButtonComponent, v: import("./define.js").AttributeValue) => undefined;
+        };
+        value: {
+            type: "string";
+            config: string;
+            update: (c: IconButtonComponent, v: import("./define.js").AttributeValue) => undefined;
+        };
+        type: {
+            readonly type: "string";
+            readonly update: () => undefined;
+        };
+        "aria-label": {
+            type: "string";
+            config: string;
+            update: (c: IconButtonComponent, v: import("./define.js").AttributeValue) => undefined;
+        };
+    };
+    properties: {
+        selected: {
+            get: (c: IconButtonComponent) => boolean;
+            set: (c: IconButtonComponent, v: unknown) => undefined;
+            config: string;
+        };
+    };
+    methods: readonly ["select", "deselect", "toggleSelected"];
+    model: "selected";
+    events: {
+        change: {
+            detail: (payload: unknown) => {
+                selected: boolean;
+                value: string;
+            };
+        };
+    };
+    form: import("./define.js").FormSpec<IconButtonComponent>;
+    setup: <C extends import("./define.js").ElementComponent>(host: import("./define.js").ElementHost<C>) => (() => void);
+};
+export declare const iconButtonElement: import("./define.js").ElementDefinition<IconButtonComponent>;
+export type IconButtonSpec = typeof iconButtonSpec;
+/** `<m-icon-button>` as a ref or a query returns it. */
+export type IconButtonElement = ElementInstance<IconButtonSpec, IconButtonComponent>;
+/** Registers `<m-icon-button>` (or `<prefix-icon-button>`). */
+export declare const defineIconButton: (options?: DefineOptions) => string;
+declare global {
+    /** `document.querySelector("m-…")` and `createElement` return the element's type (the default prefix). */
+    interface HTMLElementTagNameMap {
+        "m-icon-button": IconButtonElement;
+    }
+}
+export {};

package/dist/elements/icon-button.js

@@ -0,0 +1,48 @@
+import createIconButton from "../components/icon-button/index.js";
+import { defineElement } from "./define.js";
+import { buttonForm, submitOnClick, typeAttribute } from "./form-button.js";
+const iconButtonSpec = {
+    name: "icon-button",
+    create: (config) => createIconButton({ ariaLabel: "", ...config, type: "button" }),
+    styles: ["icon-button"],
+    hostStyles: ":host{vertical-align:middle}",
+    attributes: {
+        variant: { type: "string", config: "variant", update: (c, v) => void c.setVariant(String(v ?? "standard")) },
+        size: { type: "string", config: "size", update: (c, v) => void c.setSize(String(v ?? "s")) },
+        shape: { type: "string", config: "shape", update: (c, v) => void c.setShape(String(v ?? "round")) },
+        width: { type: "string", config: "width", update: (c, v) => void c.setWidth(String(v ?? "default")) },
+        disabled: { type: "boolean", config: "disabled", update: (c, v) => void (v ? c.disable() : c.enable()) },
+        icon: { type: "string", config: "icon", update: (c, v) => void c.setIcon(String(v ?? "")) },
+        "selected-icon": {
+            type: "string",
+            config: "selectedIcon",
+            update: (c, v) => void c.setSelectedIcon(String(v ?? "")),
+        },
+        toggle: { type: "boolean", config: "toggle" },
+        selected: { type: "boolean", config: "selected", update: (c, v) => void (v ? c.select() : c.deselect()) },
+        value: { type: "string", config: "value", update: (c, v) => void c.setValue(String(v ?? "")) },
+        type: typeAttribute,
+        "aria-label": { type: "string", config: "ariaLabel", update: (c, v) => void c.setAriaLabel(String(v ?? "")) },
+    },
+    properties: {
+        selected: {
+            get: (c) => c.isSelected(),
+            set: (c, v) => void (v ? c.select() : c.deselect()),
+            config: "selected",
+        },
+    },
+    methods: ["select", "deselect", "toggleSelected"],
+    model: "selected",
+    events: {
+        change: {
+            detail: (payload) => {
+                const { selected, value } = payload;
+                return { selected, value };
+            },
+        },
+    },
+    form: buttonForm(),
+    setup: submitOnClick,
+};
+export const iconButtonElement = defineElement(iconButtonSpec);
+export const defineIconButton = (options) => iconButtonElement.define(options);