material 3.3.4 → 3.4.1

package/README.md

@@ -93,8 +93,8 @@ What a bundler keeps, minified and gzipped (kB is 1,000 bytes), measured from th
 |--------|-----:|
 | `createButton` from `material`, with code splitting: the initial chunks (the progress indicator loads on demand) | 7.6 kB |
 | `createButton`, without code splitting (the progress indicator included) | 13.9 kB |
-| `createButton`, `createTextField` and `createCheckbox`, without code splitting | 20.2 kB |
-| Everything the root exports (`export * from 'material'`), without code splitting | 127.1 kB |
+| `createButton`, `createTextField` and `createCheckbox`, without code splitting | 20.4 kB |
+| Everything the root exports (`export * from 'material'`), without code splitting | 127.3 kB |
 | `material/styles/base` | 2.9 kB |
 | `material/styles/base` and `material/styles/button` | 5.2 kB |
 | `material/styles`, the full stylesheet | 63.7 kB |

package/dist/components/badge/api.js

@@ -1,4 +1,4 @@
-import { isBadgeOverflow, isEmptyBadgeLabel } from "./config.js";
+import { isBadgeOverflow, isEmptyBadgeLabel, smallBadgeLabel } from "./config.js";
 import { formatBadgeLabel } from "./config.js";
 const VARIANT_SMALL = "small";
 const ALL_COLORS = [
@@ -21,10 +21,12 @@ export const withAPI = ({ visibility, lifecycle }) => (component) => {
             component.config.label = label;
             if (component.config.variant === VARIANT_SMALL) {
                 component.element.textContent = "";
+                component.element.setAttribute("aria-label", smallBadgeLabel(label));
                 return badgeComponent;
             }
             const formattedLabel = formatBadgeLabel(label, component.config.max);
             component.element.textContent = formattedLabel;
+            component.element.removeAttribute("aria-label");
             component.element.classList.remove(`${component.getClass("badge")}--overflow`);
             if (isBadgeOverflow(label, component.config.max)) {
                 component.element.classList.add(`${component.getClass("badge")}--overflow`);
@@ -81,14 +83,14 @@ export const withAPI = ({ visibility, lifecycle }) => (component) => {
             });
             component.element.classList.add(`${component.getClass("badge")}--${variant}`);
             component.config.variant = variant;
+            component.element.removeAttribute("aria-hidden");
+            component.element.setAttribute("role", "status");
             if (variant === VARIANT_SMALL) {
                 component.element.textContent = "";
-                component.element.removeAttribute("role");
-                component.element.setAttribute("aria-hidden", "true");
+                component.element.setAttribute("aria-label", smallBadgeLabel(component.config.label));
             }
             else {
-                component.element.removeAttribute("aria-hidden");
-                component.element.setAttribute("role", "status");
+                component.element.removeAttribute("aria-label");
                 if (component.config.label !== undefined) {
                     badgeComponent.setLabel(component.config.label);
                 }

package/dist/components/badge/config.js

@@ -7,22 +7,10 @@ export const defaultConfig = {
     label: "",
     visible: true,
 };
+export const smallBadgeLabel = (label) => typeof label === "string" && isNaN(+label)
+    ? label.trim() : "New notification";
 export const createBaseConfig = (config = {}) => createComponentConfig(defaultConfig, config, "badge");
-export const getElementConfig = (config) => {
-    const attributes = {};
-    if (config.variant !== "small") {
-        attributes.role = "status";
-    }
-    const formattedLabel = config.variant === "small"
-        ? ""
-        : formatBadgeLabel(config.label || "", config.max);
-    return createElementConfig(config, {
-        tag: "span",
-        attributes,
-        className: config.class,
-        text: formattedLabel,
-    });
-};
+export const getElementConfig = (config) => createElementConfig(config, { tag: "span" });
 export const getApiConfig = (comp) => ({
     visibility: {
         show: () => comp.visibility.show(),

package/dist/components/badge/features.js

@@ -1,4 +1,4 @@
-import { formatBadgeLabel, isBadgeOverflow, isEmptyBadgeLabel } from "./config.js";
+import { formatBadgeLabel, isBadgeOverflow, isEmptyBadgeLabel, smallBadgeLabel } from "./config.js";
 const VARIANT_SMALL = 'small';
 const VARIANT_LARGE = 'large';
 const COLOR_ERROR = 'error';
@@ -38,16 +38,14 @@ export const withVisibility = () => (component) => {
 export const withVariant = (config) => (component) => {
     const variant = config.variant || VARIANT_LARGE;
     component.element.classList.add(`${component.getClass('badge')}--${variant}`);
+    component.element.setAttribute('role', 'status');
     if (variant === VARIANT_SMALL) {
-        component.element.textContent = '';
-        component.element.setAttribute('aria-hidden', 'true');
+        component.element.setAttribute('aria-label', smallBadgeLabel(config.label));
+        component.element.removeAttribute('aria-hidden');
     }
     else {
-        component.element.setAttribute('role', 'status');
-        if (config.label !== undefined && config.label !== '') {
-            const formattedLabel = formatBadgeLabel(config.label, config.max);
-            component.element.textContent = formattedLabel;
-        }
+        component.element.removeAttribute('aria-label');
+        component.element.textContent = formatBadgeLabel(config.label ?? '', config.max);
     }
     return component;
 };
@@ -70,8 +68,6 @@ export const withMax = (config) => (component) => {
     }
     component.config.max = config.max;
     if (config.label !== undefined) {
-        const formattedLabel = formatBadgeLabel(config.label, config.max);
-        component.element.textContent = formattedLabel;
         if (isBadgeOverflow(config.label, config.max)) {
             component.element.classList.add(`${component.getClass('badge')}--overflow`);
         }

package/dist/components/chips/chip/chip.js

@@ -90,6 +90,7 @@ const createChip = (config = {}) => {
         root.classList.toggle(base.getClass("chip--avatar"), !!avatar);
         action.disabled = disabled;
         if (oneActionCell) {
+            root.setAttribute("aria-label", label.textContent ?? "");
             if (selectable)
                 root.setAttribute("aria-selected", String(selected));
             root.setAttribute("aria-disabled", String(disabled));
@@ -114,6 +115,8 @@ const createChip = (config = {}) => {
             if (!options.cell)
                 root.setAttribute("aria-label", text);
         }
+        if (options.ariaLabel)
+            (oneActionCell ? root : action).setAttribute("aria-label", options.ariaLabel);
     };
     let made = false;
     const animateChanges = () => {

package/dist/components/chips/types.d.ts

@@ -4,6 +4,7 @@ export type ChipType = "assist" | "filter" | "input" | "suggestion";
 export interface ChipConfig {
     type?: ChipType;
     label?: string;
+    ariaLabel?: string;
     value?: string;
     disabled?: boolean;
     selected?: boolean;

package/dist/components/dialog/api.js

@@ -1,113 +1,113 @@
 import { removeClass } from "../../core/dom/classes.js";
 import { hideFromTopLayer } from "../../core/dom/layer.js";
-export const withAPI = (options) => (component) => ({
-    ...component,
-    open() {
-        options.visibility.open();
-        return this;
-    },
-    close() {
-        options.visibility.close();
-        return this;
-    },
-    toggle(open) {
-        options.visibility.toggle(open);
-        return this;
-    },
-    isOpen() {
-        return options.visibility.isOpen();
-    },
-    setTitle(title) {
-        options.content.setTitle(title);
-        return this;
-    },
-    getTitle() {
-        return options.content.getTitle();
-    },
-    setSubtitle(subtitle) {
-        options.content.setSubtitle(subtitle);
-        return this;
-    },
-    getSubtitle() {
-        return options.content.getSubtitle();
-    },
-    setContent(content) {
-        options.content.setContent(content);
-        return this;
-    },
-    getContent() {
-        return options.content.getContent();
-    },
-    addButton(button) {
-        options.buttons.addButton(button);
-        return this;
-    },
-    removeButton(indexOrText) {
-        options.buttons.removeButton(indexOrText);
-        return this;
-    },
-    getButtons() {
-        return options.buttons.getButtons();
-    },
-    setFooterAlignment(alignment) {
-        options.buttons.setFooterAlignment(alignment);
-        return this;
-    },
-    toggleDivider(show) {
-        options.divider.toggleDivider(show);
-        return this;
-    },
-    hasDivider() {
-        return options.divider.hasDivider();
-    },
-    setSize(size) {
-        options.size.setSize(size);
-        return this;
-    },
-    on(event, handler) {
-        options.events.on(event, handler);
-        return this;
-    },
-    off(event, handler) {
-        options.events.off(event, handler);
-        return this;
-    },
-    getHeaderElement() {
-        return options.content.getHeaderElement();
-    },
-    getContentElement() {
-        return options.content.getContentElement();
-    },
-    getFooterElement() {
-        return options.content.getFooterElement();
-    },
-    confirm(options) {
-        if (component.confirm) {
+export const withAPI = (component) => {
+    const options = component;
+    return {
+        ...component,
+        open() {
+            options.visibility.open();
+            return this;
+        },
+        close() {
+            options.visibility.close();
+            return this;
+        },
+        toggle(open) {
+            options.visibility.toggle(open);
+            return this;
+        },
+        isOpen() {
+            return options.visibility.isOpen();
+        },
+        setTitle(title) {
+            options.content.setTitle(title);
+            return this;
+        },
+        getTitle() {
+            return options.content.getTitle();
+        },
+        setSubtitle(subtitle) {
+            options.content.setSubtitle(subtitle);
+            return this;
+        },
+        getSubtitle() {
+            return options.content.getSubtitle();
+        },
+        setContent(content) {
+            options.content.setContent(content);
+            return this;
+        },
+        getContent() {
+            return options.content.getContent();
+        },
+        addButton(button) {
+            options.buttons.addButton(button);
+            return this;
+        },
+        removeButton(indexOrText) {
+            options.buttons.removeButton(indexOrText);
+            return this;
+        },
+        getButtons() {
+            return options.buttons.getButtons();
+        },
+        setFooterAlignment(alignment) {
+            options.buttons.setFooterAlignment(alignment);
+            return this;
+        },
+        toggleDivider(show) {
+            options.divider.toggleDivider(show);
+            return this;
+        },
+        hasDivider() {
+            return options.divider.hasDivider();
+        },
+        setSize(size) {
+            options.size.setSize(size);
+            return this;
+        },
+        on(event, handler) {
+            options.on(event, handler);
+            return this;
+        },
+        off(event, handler) {
+            options.off(event, handler);
+            return this;
+        },
+        getHeaderElement() {
+            return options.content.getHeaderElement();
+        },
+        getContentElement() {
+            return options.content.getContentElement();
+        },
+        getFooterElement() {
+            return options.content.getFooterElement();
+        },
+        confirm(options) {
             return component.confirm(options || { message: "Are you sure?" });
-        }
-        return Promise.resolve(false);
-    },
-    destroy() {
-        const wasOpen = this.isOpen();
-        options.visibility.cancel();
-        if (wasOpen) {
-            const dialogVisibleClass = `${component.getClass("dialog")}--visible`;
-            const overlayVisibleClass = `${component.getClass("dialog__overlay")}--visible`;
-            removeClass(component.element, dialogVisibleClass);
-            removeClass(component.overlay, overlayVisibleClass);
-            hideFromTopLayer(component.element);
-            if (options.focus && options.focus.releaseFocus) {
-                options.focus.releaseFocus();
+        },
+        destroy() {
+            const wasOpen = this.isOpen();
+            options.visibility.cancel();
+            if (wasOpen) {
+                const dialogVisibleClass = `${component.getClass("dialog")}--visible`;
+                const overlayVisibleClass = `${component.getClass("dialog__overlay")}--visible`;
+                removeClass(component.element, dialogVisibleClass);
+                removeClass(component.overlay, overlayVisibleClass);
+                hideFromTopLayer(component.element);
+                if (options.focus && options.focus.releaseFocus) {
+                    options.focus.releaseFocus();
+                }
             }
-        }
-        options.lifecycle.destroy();
-        if (component.overlay && component.overlay.parentNode) {
-            component.overlay.parentNode.removeChild(component.overlay);
-        }
-        if (component.element.parentNode !== component.overlay) {
-            component.element.remove();
-        }
-    },
-    element: component.element,
-    overlay: component.overlay,
-});
+            options.lifecycle.destroy();
+            if (component.overlay && component.overlay.parentNode) {
+                component.overlay.parentNode.removeChild(component.overlay);
+            }
+            if (component.element.parentNode !== component.overlay) {
+                component.element.remove();
+            }
+        },
+        element: component.element,
+        overlay: component.overlay,
+    };
+};

package/dist/components/dialog/config.js

@@ -35,56 +35,4 @@ export const getElementConfig = (config) => {
         className: config.class
     });
 };
-export const getOverlayConfig = () => {
-    return {
-        tag: 'div',
-        attributes: {},
-        className: ''
-    };
-};
-export const getApiConfig = (comp) => ({
-    visibility: {
-        open: () => comp.visibility.open(),
-        close: () => comp.visibility.close(),
-        toggle: (visible) => comp.visibility.toggle(visible),
-        isOpen: () => comp.visibility.isOpen(),
-        cancel: () => comp.visibility.cancel()
-    },
-    content: {
-        setTitle: (title) => comp.content.setTitle(title),
-        getTitle: () => comp.content.getTitle(),
-        setSubtitle: (subtitle) => comp.content.setSubtitle(subtitle),
-        getSubtitle: () => comp.content.getSubtitle(),
-        setContent: (content) => comp.content.setContent(content),
-        getContent: () => comp.content.getContent(),
-        getHeaderElement: () => comp.content.getHeaderElement(),
-        getContentElement: () => comp.content.getContentElement(),
-        getFooterElement: () => comp.content.getFooterElement()
-    },
-    buttons: {
-        addButton: (button) => comp.buttons.addButton(button),
-        removeButton: (indexOrText) => comp.buttons.removeButton(indexOrText),
-        getButtons: () => comp.buttons.getButtons(),
-        setFooterAlignment: (alignment) => comp.buttons.setFooterAlignment(alignment)
-    },
-    focus: {
-        trapFocus: () => comp.focus.trapFocus(),
-        releaseFocus: () => comp.focus.releaseFocus()
-    },
-    size: {
-        setSize: (size) => comp.size.setSize(size)
-    },
-    divider: {
-        toggleDivider: (show) => comp.divider.toggleDivider(show),
-        hasDivider: () => comp.divider.hasDivider()
-    },
-    events: {
-        on: (event, handler) => comp.on(event, handler),
-        off: (event, handler) => comp.off(event, handler),
-        trigger: (event, data) => comp.emit(event, data)
-    },
-    lifecycle: {
-        destroy: () => comp.lifecycle.destroy()
-    }
-});
 export default defaultConfig;

package/dist/components/dialog/dialog.js

@@ -3,11 +3,11 @@ import { createBase, withElement } from "../../core/compose/component.js";
 import { withEvents, withLifecycle } from "../../core/compose/features/index.js";
 import { withStructure, withVisibility, withContent, withButtons, withSize, withConfirm, withDivider } from "./features.js";
 import { withAPI } from "./api.js";
-import { createBaseConfig, getElementConfig, getApiConfig } from "./config.js";
+import { createBaseConfig, getElementConfig } from "./config.js";
 const createDialog = (config = {}) => {
     const baseConfig = createBaseConfig(config);
     try {
-        const dialog = pipe(createBase, withEvents(), withElement(getElementConfig(baseConfig)), withStructure(baseConfig, () => dialog), withVisibility(() => dialog), withContent(), withButtons(() => dialog), withSize(), withDivider(), withConfirm(), withLifecycle(), comp => withAPI(getApiConfig(comp))(comp))(baseConfig);
+        const dialog = pipe(createBase, withEvents(), withElement(getElementConfig(baseConfig)), withStructure(baseConfig, () => dialog), withVisibility(() => dialog), withContent(), withButtons(() => dialog), withSize(), withDivider(), withConfirm(), withLifecycle(), withAPI)(baseConfig);
         if (baseConfig.on) {
             Object.entries(baseConfig.on).forEach(([event, handler]) => {
                 if (typeof handler === 'function') {