mtrl 0.8.0-next.8 → 0.8.0

package/dist/components/badge/config.d.ts

@@ -1,4 +1,4 @@
-import { BadgeConfig } from "./types";
+import { BadgeConfig } from "./types.js";
 /**
  * Default configuration for the Badge component
  * These values will be used when not explicitly specified by the user.

package/dist/components/badge/config.js

@@ -0,0 +1,63 @@
+import { createComponentConfig, createElementConfig, } from "../../core/config/component.js";
+import { BADGE_VARIANTS, BADGE_COLORS, BADGE_POSITIONS, BADGE_MAX_CHARACTERS, } from "./constants.js";
+export const defaultConfig = {
+    variant: BADGE_VARIANTS.LARGE,
+    color: BADGE_COLORS.ERROR,
+    position: BADGE_POSITIONS.TOP_RIGHT,
+    label: "",
+    visible: true,
+};
+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 getApiConfig = (comp) => ({
+    visibility: {
+        show: () => comp.visibility.show(),
+        hide: () => comp.visibility.hide(),
+        toggle: (visible) => comp.visibility.toggle(visible),
+        isVisible: () => comp.visibility.isVisible(),
+    },
+    lifecycle: {
+        destroy: () => comp.lifecycle.destroy(),
+    },
+});
+export const formatBadgeLabel = (label, max) => {
+    if (label === undefined || label === null || label === "") {
+        return "";
+    }
+    let formattedLabel = String(label);
+    const numericLabel = Number(label);
+    if (max !== undefined && !isNaN(numericLabel) && numericLabel > max) {
+        formattedLabel = `${max}+`;
+    }
+    if (formattedLabel.length > BADGE_MAX_CHARACTERS) {
+        const numericValue = Number(label);
+        if (!isNaN(numericValue)) {
+            if (numericValue >= 1000) {
+                formattedLabel = "999+";
+            }
+            else {
+                formattedLabel =
+                    formattedLabel.substring(0, BADGE_MAX_CHARACTERS - 1) + "+";
+            }
+        }
+        else {
+            formattedLabel = formattedLabel.substring(0, BADGE_MAX_CHARACTERS);
+        }
+    }
+    return formattedLabel;
+};
+export default defaultConfig;

package/dist/components/badge/constants.js

@@ -0,0 +1,20 @@
+export const BADGE_VARIANTS = {
+    SMALL: 'small',
+    LARGE: 'large'
+};
+export const BADGE_COLORS = {
+    ERROR: 'error',
+    PRIMARY: 'primary',
+    SECONDARY: 'secondary',
+    TERTIARY: 'tertiary',
+    SUCCESS: 'success',
+    WARNING: 'warning',
+    INFO: 'info'
+};
+export const BADGE_POSITIONS = {
+    TOP_RIGHT: 'top-right',
+    TOP_LEFT: 'top-left',
+    BOTTOM_RIGHT: 'bottom-right',
+    BOTTOM_LEFT: 'bottom-left'
+};
+export const BADGE_MAX_CHARACTERS = 4;

package/dist/components/badge/features.d.ts

@@ -1,4 +1,4 @@
-import { BadgeConfig } from './types';
+import { BadgeConfig } from "./types.js";
 /**
  * Higher-order function that adds visibility control features to a component
  * @returns {Function} Component enhancer with visibility features

package/dist/components/badge/features.js

@@ -0,0 +1,95 @@
+import { formatBadgeLabel } from "./config.js";
+const VARIANT_SMALL = 'small';
+const VARIANT_LARGE = 'large';
+const COLOR_ERROR = 'error';
+const POSITION_TOP_RIGHT = 'top-right';
+export const withVisibility = () => component => {
+    const visible = component.config.visible !== false;
+    if (!visible) {
+        component.element.classList.add(`${component.getClass('badge')}--invisible`);
+    }
+    return {
+        ...component,
+        visibility: {
+            show() {
+                component.element.classList.remove(`${component.getClass('badge')}--invisible`);
+            },
+            hide() {
+                component.element.classList.add(`${component.getClass('badge')}--invisible`);
+            },
+            toggle(visible) {
+                if (visible === undefined) {
+                    component.element.classList.toggle(`${component.getClass('badge')}--invisible`);
+                }
+                else if (visible) {
+                    this.show();
+                }
+                else {
+                    this.hide();
+                }
+            },
+            isVisible() {
+                return !component.element.classList.contains(`${component.getClass('badge')}--invisible`);
+            }
+        }
+    };
+};
+export const withVariant = (config) => component => {
+    const variant = config.variant || VARIANT_LARGE;
+    component.element.classList.add(`${component.getClass('badge')}--${variant}`);
+    if (variant === VARIANT_SMALL) {
+        component.element.textContent = '';
+        component.element.setAttribute('aria-hidden', 'true');
+    }
+    else {
+        component.element.setAttribute('role', 'status');
+        if (config.label !== undefined && config.label !== '') {
+            const formattedLabel = formatBadgeLabel(config.label, config.max);
+            component.element.textContent = formattedLabel;
+        }
+    }
+    return component;
+};
+export const withColor = (config) => component => {
+    const color = config.color || COLOR_ERROR;
+    component.element.classList.add(`${component.getClass('badge')}--${color}`);
+    return component;
+};
+export const withPosition = (config) => component => {
+    const position = config.position || POSITION_TOP_RIGHT;
+    component.element.classList.add(`${component.getClass('badge')}--${position}`);
+    if (config.target) {
+        component.element.classList.add(`${component.getClass('badge')}--positioned`);
+    }
+    return component;
+};
+export const withMax = (config) => component => {
+    if (config.max === undefined || config.variant === VARIANT_SMALL) {
+        return component;
+    }
+    component.config.max = config.max;
+    if (config.label !== undefined && config.label !== '') {
+        const formattedLabel = formatBadgeLabel(config.label, config.max);
+        component.element.textContent = formattedLabel;
+        if (typeof config.label === 'number' && config.label > config.max) {
+            component.element.classList.add(`${component.getClass('badge')}--overflow`);
+        }
+    }
+    return component;
+};
+export const withAttachment = (config) => component => {
+    if (!config.target) {
+        return component;
+    }
+    const wrapper = document.createElement('div');
+    wrapper.classList.add(component.getClass('badge-wrapper'));
+    wrapper.style.position = 'relative';
+    const parent = config.target.parentNode;
+    if (parent) {
+        parent.replaceChild(wrapper, config.target);
+        wrapper.appendChild(config.target);
+        wrapper.appendChild(component.element);
+        component.wrapper = wrapper;
+    }
+    return component;
+};

package/dist/components/badge/index.d.ts

@@ -4,5 +4,5 @@
  * @description A small element that communicates status, shows a count,
  * or highlights an element requiring attention.
  */
-export { default } from "./badge";
-export type { BadgeConfig, BadgeComponent, BadgeVariant, BadgeColor, BadgePosition, } from "./types";
+export { default } from "./badge.js";
+export type { BadgeConfig, BadgeComponent, BadgeVariant, BadgeColor, BadgePosition, } from "./types.js";

package/dist/components/badge/index.js

@@ -0,0 +1 @@
+export { default } from "./badge.js";

package/dist/components/badge/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/bottom-app-bar/bottom-app-bar.d.ts

@@ -2,7 +2,7 @@
  * @module components/bottom-app-bar
  * @description Bottom app bar implementation
  */
-import { BottomAppBar, BottomAppBarConfig } from "./types";
+import { BottomAppBar, BottomAppBarConfig } from "./types.js";
 /**
  * Creates a bottom app bar component
  *

package/dist/components/bottom-app-bar/bottom-app-bar.js

@@ -0,0 +1,91 @@
+import { createBase, withElement, withEvents, withLifecycle, } from "../../core/compose/index.js";
+import { createConfig } from "./config.js";
+export const createBottomAppBar = (config = {}) => {
+    const componentConfig = createConfig(config);
+    const component = createBase(componentConfig);
+    const actionsContainer = document.createElement("div");
+    actionsContainer.className = `${component.getClass("bottom-app-bar")}-actions`;
+    const fabContainer = document.createElement("div");
+    fabContainer.className = `${component.getClass("bottom-app-bar")}-fab-container`;
+    const enhancedComponent = withElement({
+        tag: componentConfig.tag,
+        componentName: "bottom-app-bar",
+        className: [
+            componentConfig.hasFab
+                ? `${component.getClass("bottom-app-bar")}--with-fab`
+                : "",
+            componentConfig.fabPosition === "center"
+                ? `${component.getClass("bottom-app-bar")}--fab-center`
+                : "",
+            componentConfig.class,
+        ],
+        attributes: {
+            role: "toolbar",
+            "aria-label": "Bottom app bar",
+        },
+        interactive: true,
+    })(component);
+    const withEventsComponent = withEvents()(enhancedComponent);
+    const withLifecycleComponent = withLifecycle()(withEventsComponent);
+    withLifecycleComponent.element.appendChild(actionsContainer);
+    withLifecycleComponent.element.appendChild(fabContainer);
+    let isVisible = true;
+    let prevScrollY = window.scrollY;
+    if (componentConfig.autoHide) {
+        const handleScroll = () => {
+            const currentScrollY = window.scrollY;
+            if (currentScrollY > prevScrollY + 10) {
+                if (isVisible) {
+                    bottomBar.hide();
+                    componentConfig.onVisibilityChange?.(false);
+                }
+            }
+            else if (currentScrollY < prevScrollY - 10) {
+                if (!isVisible) {
+                    bottomBar.show();
+                    componentConfig.onVisibilityChange?.(true);
+                }
+            }
+            prevScrollY = currentScrollY;
+        };
+        window.addEventListener("scroll", handleScroll, { passive: true });
+        const originalDestroy = withLifecycleComponent.lifecycle.destroy;
+        withLifecycleComponent.lifecycle.destroy = () => {
+            window.removeEventListener("scroll", handleScroll);
+            originalDestroy();
+        };
+    }
+    const bottomBar = {
+        ...withLifecycleComponent,
+        addAction(button) {
+            actionsContainer.appendChild(button);
+            return this;
+        },
+        addFab(fab) {
+            fabContainer.innerHTML = "";
+            fabContainer.appendChild(fab);
+            this.element.classList.add(`${component.getClass("bottom-app-bar")}--with-fab`);
+            return this;
+        },
+        show() {
+            this.element.classList.remove(`${component.getClass("bottom-app-bar")}--hidden`);
+            isVisible = true;
+            return this;
+        },
+        hide() {
+            this.element.classList.add(`${component.getClass("bottom-app-bar")}--hidden`);
+            isVisible = false;
+            return this;
+        },
+        isVisible() {
+            return isVisible;
+        },
+        getActionsContainer() {
+            return actionsContainer;
+        },
+    };
+    if (componentConfig.autoHide && componentConfig.transitionDuration) {
+        bottomBar.element.style.transition = `transform ${componentConfig.transitionDuration}ms ease-in-out`;
+    }
+    return bottomBar;
+};

package/dist/components/bottom-app-bar/config.d.ts

@@ -2,7 +2,7 @@
  * @module components/bottom-app-bar
  * @description Configuration for bottom app bar component
  */
-import { BottomAppBarConfig } from "./types";
+import { BottomAppBarConfig } from "./types.js";
 /**
  * Default configuration for bottom app bar
  */

package/dist/components/bottom-app-bar/config.js

@@ -0,0 +1,10 @@
+import { createComponentConfig } from "../../core/config/component.js";
+import { FAB_POSITIONS, DEFAULT_TRANSITION_DURATION } from "./constants.js";
+export const defaultConfig = {
+    tag: "div",
+    hasFab: false,
+    fabPosition: FAB_POSITIONS.END,
+    autoHide: false,
+    transitionDuration: DEFAULT_TRANSITION_DURATION,
+};
+export const createConfig = (config = {}) => createComponentConfig(defaultConfig, config, "bottom-app-bar");

package/dist/components/bottom-app-bar/constants.js

@@ -0,0 +1,13 @@
+export const FAB_POSITIONS = {
+    CENTER: 'center',
+    END: 'end'
+};
+export const DEFAULT_TRANSITION_DURATION = 300;
+export const BOTTOM_APP_BAR_CLASSES = {
+    ROOT: 'bottom-app-bar',
+    ACTIONS: 'bottom-app-bar-actions',
+    FAB_CONTAINER: 'bottom-app-bar-fab',
+    HIDDEN: 'bottom-app-bar--hidden',
+    FAB_CENTER: 'bottom-app-bar--fab-center',
+    FAB_END: 'bottom-app-bar--fab-end'
+};

package/dist/components/bottom-app-bar/index.d.ts

@@ -2,7 +2,7 @@
  * @module components/bottom-app-bar
  * @description Bottom app bar component for mobile interfaces
  */
-import { createBottomAppBar } from './bottom-app-bar';
+import { createBottomAppBar } from "./bottom-app-bar.js";
 export default createBottomAppBar;
 export { createBottomAppBar };
-export type { BottomAppBarConfig, BottomAppBar } from './types';
+export type { BottomAppBarConfig, BottomAppBar } from "./types.js";

package/dist/components/bottom-app-bar/index.js

@@ -0,0 +1,3 @@
+import { createBottomAppBar } from "./bottom-app-bar.js";
+export default createBottomAppBar;
+export { createBottomAppBar };

package/dist/components/bottom-app-bar/types.d.ts

@@ -2,7 +2,7 @@
  * @module components/bottom-app-bar
  * @description Type definitions for Bottom App Bar component
  */
-import { ElementComponent } from '../../core/compose';
+import { ElementComponent } from "../../core/compose/index.js";
 /**
  * FAB position type for Bottom App Bar
  * @category Components

package/dist/components/bottom-app-bar/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/bottom-sheet/api.d.ts

@@ -0,0 +1,43 @@
+import { BottomSheetComponent, BottomSheetEventHandlers, BottomSheetState } from "./types.js";
+interface ApiOptions {
+    state: {
+        open: () => void;
+        close: () => void;
+        expand: () => void;
+        collapse: () => void;
+        isOpen: () => boolean;
+        getState: () => BottomSheetState;
+        release: () => void;
+    };
+    structure: {
+        setContent: (content: string | HTMLElement) => void;
+        setTitle: (title: string) => void;
+    };
+    drag: {
+        release: () => void;
+    };
+    lifecycle: {
+        destroy: () => void;
+    };
+}
+interface BaseComponent {
+    element: HTMLElement;
+    getClass: (name: string) => string;
+    on: (event: string, handler: (...args: never[]) => void) => unknown;
+    off: (event: string, handler: (...args: never[]) => void) => unknown;
+}
+/**
+ * The public surface. Every method here is backed by a feature above it; none
+ * is declared and left unwired.
+ */
+export declare const withAPI: ({ state, structure, drag, lifecycle }: ApiOptions) => <C extends BaseComponent>(component: C) => BottomSheetComponent;
+/**
+ * Registers the handlers given at creation.
+ *
+ * Several components in this library declare an `on` option and never read it,
+ * so handlers passed at creation are silently dropped. This one reads it.
+ */
+export declare const applyEventHandlers: (component: {
+    on: (event: string, handler: (...args: never[]) => void) => unknown;
+}, handlers?: BottomSheetEventHandlers) => void;
+export {};

package/dist/components/bottom-sheet/api.js

@@ -0,0 +1,56 @@
+export const withAPI = ({ state, structure, drag, lifecycle }) => (component) => {
+    const api = {
+        element: component.element,
+        getClass: component.getClass,
+        open() {
+            state.open();
+            return this;
+        },
+        close() {
+            state.close();
+            return this;
+        },
+        expand() {
+            state.expand();
+            return this;
+        },
+        collapse() {
+            state.collapse();
+            return this;
+        },
+        isOpen: () => state.isOpen(),
+        getState: () => state.getState(),
+        setContent(content) {
+            structure.setContent(content);
+            return this;
+        },
+        setTitle(title) {
+            structure.setTitle(title);
+            return this;
+        },
+        on(event, handler) {
+            component.on(event, handler);
+            return this;
+        },
+        off(event, handler) {
+            component.off(event, handler);
+            return this;
+        },
+        destroy() {
+            drag.release();
+            state.release();
+            lifecycle.destroy();
+            component.element.remove();
+        },
+    };
+    return api;
+};
+export const applyEventHandlers = (component, handlers) => {
+    if (!handlers)
+        return;
+    for (const [event, handler] of Object.entries(handlers)) {
+        if (typeof handler === "function") {
+            component.on(event, handler);
+        }
+    }
+};

package/dist/components/bottom-sheet/bottom-sheet.d.ts

@@ -0,0 +1,24 @@
+import { BottomSheetConfig, BottomSheetComponent } from "./types.js";
+/**
+ * Creates a bottom sheet: a surface anchored to the bottom edge holding
+ * content secondary to the page.
+ *
+ * A modal sheet covers the page with a scrim and takes focus, for a task that
+ * must finish first. A standard sheet leaves the page usable alongside it.
+ *
+ * @param {BottomSheetConfig} config - Bottom sheet configuration
+ * @returns {BottomSheetComponent} Bottom sheet instance
+ *
+ * @example
+ * ```ts
+ * const sheet = createBottomSheet({
+ *   title: 'Share',
+ *   content: '<p>Choose where to send it.</p>',
+ *   on: { close: () => console.info('closed') }
+ * });
+ *
+ * sheet.open();
+ * ```
+ */
+declare const createBottomSheet: (config?: BottomSheetConfig) => BottomSheetComponent;
+export default createBottomSheet;

package/dist/components/bottom-sheet/bottom-sheet.js

@@ -0,0 +1,18 @@
+import { pipe } from "../../core/compose/index.js";
+import { createBase, withElement } from "../../core/compose/component.js";
+import { withEvents, withLifecycle } from "../../core/compose/features/index.js";
+import { withStructure, withState, withDrag } from "./features/index.js";
+import { withAPI, applyEventHandlers } from "./api.js";
+import { createBaseConfig, getElementConfig } from "./config.js";
+const createBottomSheet = (config = {}) => {
+    const baseConfig = createBaseConfig(config);
+    const component = pipe(createBase, withEvents(), withElement(getElementConfig(baseConfig)), withStructure(baseConfig), withState(baseConfig), withDrag(baseConfig), withLifecycle())(baseConfig);
+    applyEventHandlers(component, baseConfig.on);
+    return withAPI({
+        state: component.state,
+        structure: component.structure,
+        drag: component.drag,
+        lifecycle: { destroy: component.lifecycle?.destroy ?? (() => { }) },
+    })(component);
+};
+export default createBottomSheet;

package/dist/components/bottom-sheet/config.d.ts

@@ -0,0 +1,34 @@
+import { BottomSheetConfig } from "./types.js";
+/**
+ * What the component applies when the caller says nothing.
+ */
+export declare const defaultConfig: Partial<BottomSheetConfig>;
+/**
+ * Merges the caller's configuration over the defaults.
+ */
+export declare const createBaseConfig: (config?: BottomSheetConfig) => BottomSheetConfig;
+/**
+ * The root element: a fixed layer holding the scrim and the sheet itself.
+ */
+export declare const getElementConfig: (config: BottomSheetConfig) => {
+    tag: string;
+    componentName: string;
+    attributes: Record<string, any>;
+    className: string[];
+    rawClass: string | string[];
+    id: string;
+    name: string;
+    title: string;
+    tabIndex: number;
+    style: string | Partial<CSSStyleDeclaration>;
+    data: Record<string, string>;
+    role: string;
+    ariaLabel: string;
+    ariaDescribedBy: string;
+    ariaLabelledBy: string;
+    ariaHidden: boolean;
+    html: string;
+    text: string;
+    forwardEvents: Record<string, boolean | ((component: any, event: Event) => boolean)>;
+    interactive: boolean;
+};

package/dist/components/bottom-sheet/config.js

@@ -0,0 +1,19 @@
+import { createComponentConfig, createElementConfig, } from "../../core/config/component.js";
+import { BOTTOM_SHEET_DEFAULTS, BOTTOM_SHEET_STATES, } from "./constants.js";
+export const defaultConfig = {
+    variant: BOTTOM_SHEET_DEFAULTS.VARIANT,
+    dragHandle: BOTTOM_SHEET_DEFAULTS.DRAG_HANDLE,
+    peekHeight: BOTTOM_SHEET_DEFAULTS.PEEK_HEIGHT,
+    maxWidth: BOTTOM_SHEET_DEFAULTS.MAX_WIDTH,
+    initialState: BOTTOM_SHEET_STATES.HIDDEN,
+    closeOnScrimClick: BOTTOM_SHEET_DEFAULTS.CLOSE_ON_SCRIM_CLICK,
+    closeOnEscape: BOTTOM_SHEET_DEFAULTS.CLOSE_ON_ESCAPE,
+};
+export const createBaseConfig = (config = {}) => createComponentConfig(defaultConfig, config, "bottom-sheet");
+export const getElementConfig = (config) => createElementConfig(config, {
+    tag: "div",
+    className: [config.class].filter(Boolean),
+    attributes: {
+        "aria-hidden": "true",
+    },
+});

package/dist/components/bottom-sheet/constants.d.ts

@@ -0,0 +1,65 @@
+/**
+ * Bottom sheet variants.
+ *
+ * A standard sheet sits alongside the page and leaves it usable. A modal sheet
+ * puts a scrim over the page and takes focus, so it is the one to reach for
+ * when the sheet's task must finish before anything else continues.
+ */
+export declare const BOTTOM_SHEET_VARIANTS: {
+    readonly STANDARD: "standard";
+    readonly MODAL: "modal";
+};
+/**
+ * How far the sheet is open.
+ *
+ * `partial` shows the peek height, enough to say what the sheet holds without
+ * covering the page. `expanded` shows as much as the content needs.
+ */
+export declare const BOTTOM_SHEET_STATES: {
+    readonly HIDDEN: "hidden";
+    readonly PARTIAL: "partial";
+    readonly EXPANDED: "expanded";
+};
+/**
+ * Defaults, from Compose BottomSheetDefaults and SheetBottomTokens.
+ */
+export declare const BOTTOM_SHEET_DEFAULTS: {
+    readonly VARIANT: "modal";
+    /** BottomSheetDefaults.SheetPeekHeight */
+    readonly PEEK_HEIGHT: 56;
+    /** BottomSheetDefaults.SheetMaxWidth; wider viewports centre the sheet */
+    readonly MAX_WIDTH: 640;
+    /** A drag handle is part of the anatomy, so it is on unless asked otherwise */
+    readonly DRAG_HANDLE: true;
+    readonly CLOSE_ON_SCRIM_CLICK: true;
+    readonly CLOSE_ON_ESCAPE: true;
+    /**
+     * BottomSheetDefaults.PositionalThreshold: how far the sheet must be dragged
+     * before it settles at the next anchor rather than springing back.
+     */
+    readonly POSITIONAL_THRESHOLD: 56;
+    /** BottomSheetDefaults.VelocityThreshold, in dp per second */
+    readonly VELOCITY_THRESHOLD: 125;
+};
+/**
+ * Class names, without the prefix. `getClass` adds it.
+ */
+export declare const BOTTOM_SHEET_CLASSES: {
+    readonly ROOT: "bottom-sheet";
+    readonly SCRIM: "bottom-sheet-scrim";
+    readonly CONTAINER: "bottom-sheet-container";
+    readonly HANDLE: "bottom-sheet-handle";
+    readonly HEADER: "bottom-sheet-header";
+    readonly TITLE: "bottom-sheet-title";
+    readonly CONTENT: "bottom-sheet-content";
+};
+/**
+ * Events the sheet emits.
+ */
+export declare const BOTTOM_SHEET_EVENTS: {
+    readonly OPEN: "open";
+    readonly CLOSE: "close";
+    readonly STATE_CHANGE: "stateChange";
+    readonly DRAG_START: "dragStart";
+    readonly DRAG_END: "dragEnd";
+};