mtrl 0.8.0-next.8 → 0.8.0

package/dist/components/side-sheet/features/state.js

@@ -0,0 +1,67 @@
+import { SIDE_SHEET_CLASSES, SIDE_SHEET_EVENTS, SIDE_SHEET_VARIANTS, } from "../constants.js";
+export const withState = (config) => (component) => {
+    const { element, getClass, structure } = component;
+    const root = getClass(SIDE_SHEET_CLASSES.ROOT);
+    const isModal = config.variant === SIDE_SHEET_VARIANTS.MODAL;
+    let open = false;
+    let previouslyFocused = null;
+    const apply = () => {
+        element.classList.toggle(`${root}--open`, open);
+        element.setAttribute("aria-hidden", open ? "false" : "true");
+        element.style.pointerEvents = open ? "" : "none";
+    };
+    function show() {
+        if (open)
+            return;
+        if (isModal)
+            previouslyFocused = document.activeElement;
+        open = true;
+        apply();
+        if (isModal)
+            structure.container.focus();
+        component.emit(SIDE_SHEET_EVENTS.OPEN);
+    }
+    function hide() {
+        if (!open)
+            return;
+        open = false;
+        apply();
+        if (isModal && previouslyFocused?.isConnected) {
+            previouslyFocused.focus();
+            previouslyFocused = null;
+        }
+        component.emit(SIDE_SHEET_EVENTS.CLOSE);
+    }
+    const handleKeydown = (event) => {
+        if (event.key !== "Escape" || !open || !config.closeOnEscape)
+            return;
+        event.preventDefault();
+        hide();
+    };
+    const handleScrimClick = () => {
+        if (config.closeOnScrimClick)
+            hide();
+    };
+    const handleCloseClick = () => hide();
+    if (config.open)
+        open = true;
+    apply();
+    if (config.closeOnEscape)
+        document.addEventListener("keydown", handleKeydown);
+    structure.scrim?.addEventListener("click", handleScrimClick);
+    structure.closeButton?.addEventListener("click", handleCloseClick);
+    return {
+        ...component,
+        state: {
+            open: show,
+            close: hide,
+            toggle: () => (open ? hide() : show()),
+            isOpen: () => open,
+            release: () => {
+                document.removeEventListener("keydown", handleKeydown);
+                structure.scrim?.removeEventListener("click", handleScrimClick);
+                structure.closeButton?.removeEventListener("click", handleCloseClick);
+            },
+        },
+    };
+};

package/dist/components/side-sheet/features/structure.d.ts

@@ -0,0 +1,21 @@
+import { SideSheetConfig } from "../types.js";
+/**
+ * Builds the parts of the sheet and puts the whole thing on the page.
+ *
+ * As with the bottom sheet, the root element holds both the scrim and the
+ * container, so neither depends on a parent that does not exist yet.
+ */
+export declare const withStructure: (config: SideSheetConfig) => <C extends {
+    element: HTMLElement;
+    getClass: (n: string) => string;
+}>(component: C) => C & {
+    structure: {
+        scrim: HTMLElement;
+        container: HTMLDivElement;
+        title: HTMLElement;
+        closeButton: HTMLButtonElement;
+        content: HTMLDivElement;
+        setContent(next: string | HTMLElement): void;
+        setTitle(next: string): void;
+    };
+};

package/dist/components/side-sheet/features/structure.js

@@ -0,0 +1,97 @@
+import { SIDE_SHEET_CLASSES, SIDE_SHEET_VARIANTS } from "../constants.js";
+const CLOSE_ICON = `<svg viewBox="0 -960 960 960" width="24" height="24" fill="currentColor" aria-hidden="true"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg>`;
+export const withStructure = (config) => (component) => {
+    const { element, getClass } = component;
+    const isModal = config.variant === SIDE_SHEET_VARIANTS.MODAL;
+    const root = getClass(SIDE_SHEET_CLASSES.ROOT);
+    element.classList.add(root);
+    element.classList.add(`${root}--${config.variant}`);
+    element.classList.add(`${root}--${config.position}`);
+    let scrim = null;
+    if (isModal) {
+        scrim = document.createElement("div");
+        scrim.className = getClass(SIDE_SHEET_CLASSES.SCRIM);
+        element.appendChild(scrim);
+    }
+    const container = document.createElement("div");
+    container.className = getClass(SIDE_SHEET_CLASSES.CONTAINER);
+    container.setAttribute("role", isModal ? "dialog" : "complementary");
+    if (isModal)
+        container.setAttribute("aria-modal", "true");
+    container.tabIndex = -1;
+    if (config.width)
+        container.style.width = `${config.width}px`;
+    if (config.maxWidth)
+        container.style.maxWidth = `${config.maxWidth}px`;
+    let title = null;
+    let closeButton = null;
+    if (config.title || config.closeButton) {
+        const header = document.createElement("div");
+        header.className = getClass(SIDE_SHEET_CLASSES.HEADER);
+        if (config.title) {
+            title = document.createElement("h2");
+            title.className = getClass(SIDE_SHEET_CLASSES.TITLE);
+            title.textContent = config.title;
+            title.id = `${getClass(SIDE_SHEET_CLASSES.TITLE)}-${Math.random()
+                .toString(36)
+                .slice(2, 9)}`;
+            container.setAttribute("aria-labelledby", title.id);
+            header.appendChild(title);
+        }
+        if (config.closeButton) {
+            closeButton = document.createElement("button");
+            closeButton.type = "button";
+            closeButton.className = getClass(SIDE_SHEET_CLASSES.CLOSE);
+            closeButton.innerHTML = CLOSE_ICON;
+            closeButton.setAttribute("aria-label", "Close");
+            header.appendChild(closeButton);
+        }
+        container.appendChild(header);
+    }
+    const content = document.createElement("div");
+    content.className = getClass(SIDE_SHEET_CLASSES.CONTENT);
+    if (config.content instanceof HTMLElement)
+        content.appendChild(config.content);
+    else if (typeof config.content === "string")
+        content.innerHTML = config.content;
+    container.appendChild(content);
+    element.appendChild(container);
+    (config.container || document.body).appendChild(element);
+    return {
+        ...component,
+        structure: {
+            scrim,
+            container,
+            title,
+            closeButton,
+            content,
+            setContent(next) {
+                content.innerHTML = "";
+                if (next instanceof HTMLElement)
+                    content.appendChild(next);
+                else
+                    content.innerHTML = next;
+            },
+            setTitle(next) {
+                if (title) {
+                    title.textContent = next;
+                    return;
+                }
+                title = document.createElement("h2");
+                title.className = getClass(SIDE_SHEET_CLASSES.TITLE);
+                title.textContent = next;
+                title.id = `${getClass(SIDE_SHEET_CLASSES.TITLE)}-${Math.random()
+                    .toString(36)
+                    .slice(2, 9)}`;
+                container.setAttribute("aria-labelledby", title.id);
+                let header = container.querySelector(`.${getClass(SIDE_SHEET_CLASSES.HEADER)}`);
+                if (!header) {
+                    header = document.createElement("div");
+                    header.className = getClass(SIDE_SHEET_CLASSES.HEADER);
+                    container.insertBefore(header, content);
+                }
+                header.insertBefore(title, header.firstChild);
+            },
+        },
+    };
+};

package/dist/components/side-sheet/index.d.ts

@@ -0,0 +1,2 @@
+export { default as createSideSheet, default } from "./side-sheet.js";
+export type { SideSheetConfig, SideSheetComponent, SideSheetVariant, SideSheetPosition, SideSheetEventHandlers, } from "./types.js";

package/dist/components/side-sheet/index.js

@@ -0,0 +1 @@
+export { default as createSideSheet, default } from "./side-sheet.js";

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

@@ -0,0 +1,24 @@
+import { SideSheetConfig, SideSheetComponent } from "./types.js";
+/**
+ * Creates a side sheet: a surface docked to a vertical edge, holding content
+ * that supports the page rather than replacing it.
+ *
+ * A standard sheet sits beside the page and leaves it usable. A modal sheet
+ * floats over it behind a scrim and takes focus.
+ *
+ * @param {SideSheetConfig} config - Side sheet configuration
+ * @returns {SideSheetComponent} Side sheet instance
+ *
+ * @example
+ * ```ts
+ * const filters = createSideSheet({
+ *   title: 'Filters',
+ *   content: '<p>Narrow the results.</p>',
+ *   on: { close: () => applyFilters() }
+ * });
+ *
+ * filters.open();
+ * ```
+ */
+declare const createSideSheet: (config?: SideSheetConfig) => SideSheetComponent;
+export default createSideSheet;

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

@@ -0,0 +1,17 @@
+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 } from "./features/index.js";
+import { withAPI, applyEventHandlers } from "./api.js";
+import { createBaseConfig, getElementConfig } from "./config.js";
+const createSideSheet = (config = {}) => {
+    const baseConfig = createBaseConfig(config);
+    const component = pipe(createBase, withEvents(), withElement(getElementConfig(baseConfig)), withStructure(baseConfig), withState(baseConfig), withLifecycle())(baseConfig);
+    applyEventHandlers(component, baseConfig.on);
+    return withAPI({
+        state: component.state,
+        structure: component.structure,
+        lifecycle: { destroy: component.lifecycle?.destroy ?? (() => { }) },
+    })(component);
+};
+export default createSideSheet;

package/dist/components/side-sheet/types.d.ts

@@ -0,0 +1,102 @@
+import { SIDE_SHEET_VARIANTS, SIDE_SHEET_POSITIONS } from "./constants.js";
+/** Docked or floating over a scrim */
+export type SideSheetVariant = (typeof SIDE_SHEET_VARIANTS)[keyof typeof SIDE_SHEET_VARIANTS];
+/** Which edge it docks to, in logical terms */
+export type SideSheetPosition = (typeof SIDE_SHEET_POSITIONS)[keyof typeof SIDE_SHEET_POSITIONS];
+/** Handlers accepted at creation, one per event name */
+export interface SideSheetEventHandlers {
+    open?: () => void;
+    close?: () => void;
+}
+/**
+ * Configuration for the side sheet.
+ *
+ * @category Components
+ */
+export interface SideSheetConfig {
+    /**
+     * Standard sheets dock beside the page and leave it usable; modal sheets
+     * float over it behind a scrim and take focus.
+     * @default 'modal'
+     */
+    variant?: SideSheetVariant;
+    /**
+     * Which edge to dock to. Logical, so `end` follows the writing direction.
+     * @default 'end'
+     */
+    position?: SideSheetPosition;
+    /**
+     * Headline in the header. Also names the sheet for assistive technology,
+     * through `aria-labelledby`.
+     */
+    title?: string;
+    /** Body of the sheet, as markup or an element */
+    content?: string | HTMLElement;
+    /**
+     * Width in pixels. Capped by `maxWidth`.
+     * @default 256
+     */
+    width?: number;
+    /**
+     * The sheet never grows past this, so it does not take over a wide window.
+     * @default 400
+     */
+    maxWidth?: number;
+    /**
+     * Whether the header carries a close button.
+     * @default true
+     */
+    closeButton?: boolean;
+    /**
+     * Whether a click on the scrim closes a modal sheet. Standard sheets have no
+     * scrim, so this does nothing for them.
+     * @default true
+     */
+    closeOnScrimClick?: boolean;
+    /**
+     * Whether Escape closes it.
+     * @default true
+     */
+    closeOnEscape?: boolean;
+    /** Whether the sheet starts open */
+    open?: boolean;
+    /** Where to mount the sheet. Defaults to `document.body` */
+    container?: HTMLElement;
+    /** Handlers registered at creation, equivalent to calling `on` for each */
+    on?: SideSheetEventHandlers;
+    /** Extra classes for the root element */
+    class?: string;
+    /** @internal */
+    prefix?: string;
+    /** @internal */
+    componentName?: string;
+}
+/**
+ * A side sheet instance.
+ *
+ * @category Components
+ */
+export interface SideSheetComponent {
+    /** The root element, which holds the scrim and the container */
+    element: HTMLElement;
+    /** Opens the sheet */
+    open: () => SideSheetComponent;
+    /** Closes the sheet */
+    close: () => SideSheetComponent;
+    /** Opens it if closed, closes it if open */
+    toggle: () => SideSheetComponent;
+    /** Whether the sheet is showing */
+    isOpen: () => boolean;
+    /** Replaces the body */
+    setContent: (content: string | HTMLElement) => SideSheetComponent;
+    /** Replaces the headline */
+    setTitle: (title: string) => SideSheetComponent;
+    /** Adds an event listener */
+    on: <T extends keyof SideSheetEventHandlers>(event: T, handler: NonNullable<SideSheetEventHandlers[T]>) => SideSheetComponent;
+    /** Removes an event listener */
+    off: <T extends keyof SideSheetEventHandlers>(event: T, handler: NonNullable<SideSheetEventHandlers[T]>) => SideSheetComponent;
+    /** Removes the sheet from the page and releases its listeners */
+    destroy: () => void;
+    /** Prefixes a class name, for styling hooks */
+    getClass: (name: string) => string;
+}

package/dist/components/side-sheet/types.js

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

package/dist/components/slider/api.d.ts

@@ -1,5 +1,5 @@
-import { SliderComponent } from "./types";
-import { SliderSize } from "./constants";
+import { SliderComponent } from "./types.js";
+import { SliderSize } from "./constants.js";
 /**
  * API options interface - structured by feature area
  */

package/dist/components/slider/api.js

@@ -0,0 +1,104 @@
+export const withAPI = (options) => (component) => {
+    return {
+        ...component,
+        element: component.element,
+        setValue(value, triggerEvent = true) {
+            options.slider.setValue(value, triggerEvent);
+            return this;
+        },
+        getValue() {
+            return options.slider.getValue();
+        },
+        setSecondValue(value, triggerEvent = true) {
+            options.slider.setSecondValue(value, triggerEvent);
+            return this;
+        },
+        getSecondValue() {
+            return options.slider.getSecondValue();
+        },
+        setMin(min) {
+            options.slider.setMin(min);
+            return this;
+        },
+        getMin() {
+            return options.slider.getMin();
+        },
+        setMax(max) {
+            options.slider.setMax(max);
+            return this;
+        },
+        getMax() {
+            return options.slider.getMax();
+        },
+        setStep(step) {
+            options.slider.setStep(step);
+            return this;
+        },
+        getStep() {
+            return options.slider.getStep();
+        },
+        enable() {
+            options.disabled.enable();
+            return this;
+        },
+        disable() {
+            options.disabled.disable();
+            return this;
+        },
+        isDisabled() {
+            return options.disabled.isDisabled();
+        },
+        setColor(color) {
+            options.appearance.setColor(color);
+            return this;
+        },
+        getColor() {
+            return options.appearance.getColor();
+        },
+        setSize(size) {
+            options.appearance.setSize(size);
+            return this;
+        },
+        getSize() {
+            return options.appearance.getSize();
+        },
+        showTicks(show) {
+            options.appearance.showTicks(show);
+            return this;
+        },
+        showCurrentValue(show) {
+            options.appearance.showCurrentValue(show);
+            return this;
+        },
+        setLabel(text) {
+            if (options.text?.setText)
+                options.text.setText(text);
+            return this;
+        },
+        getLabel() {
+            return options.text?.getText ? options.text.getText() : "";
+        },
+        setIcon(iconHtml) {
+            if (options.icon?.setIcon)
+                options.icon.setIcon(iconHtml);
+            return this;
+        },
+        getIcon() {
+            return options.icon?.getIcon ? options.icon.getIcon() : "";
+        },
+        on(event, handler) {
+            if (options.events?.on)
+                options.events.on(event, handler);
+            return this;
+        },
+        off(event, handler) {
+            if (options.events?.off)
+                options.events.off(event, handler);
+            return this;
+        },
+        destroy() {
+            if (options.lifecycle?.destroy)
+                options.lifecycle.destroy();
+        },
+    };
+};

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

@@ -1,4 +1,4 @@
-import { SliderConfig } from "./types";
+import { SliderConfig } from "./types.js";
 /**
  * Default configuration for the Slider component
  */

package/dist/components/slider/config.js

@@ -0,0 +1,106 @@
+import { createComponentConfig, createElementConfig, } from "../../core/config/component.js";
+import { SLIDER_DEFAULTS } from "./constants.js";
+export const defaultConfig = {
+    min: SLIDER_DEFAULTS.MIN,
+    max: SLIDER_DEFAULTS.MAX,
+    value: SLIDER_DEFAULTS.VALUE,
+    step: SLIDER_DEFAULTS.STEP,
+    disabled: SLIDER_DEFAULTS.DISABLED,
+    color: SLIDER_DEFAULTS.COLOR,
+    size: SLIDER_DEFAULTS.SIZE,
+    ticks: SLIDER_DEFAULTS.TICKS,
+    showValue: SLIDER_DEFAULTS.SHOW_VALUE,
+    snapToSteps: SLIDER_DEFAULTS.SNAP_TO_STEPS,
+    range: SLIDER_DEFAULTS.RANGE,
+    centered: SLIDER_DEFAULTS.CENTERED,
+    iconPosition: SLIDER_DEFAULTS.ICON_POSITION,
+    labelPosition: SLIDER_DEFAULTS.LABEL_POSITION,
+    valueFormatter: (value) => value.toString(),
+};
+export const createBaseConfig = (config = {}) => {
+    const baseConfig = createComponentConfig(defaultConfig, config, "slider");
+    return baseConfig;
+};
+export const getElementConfig = (config) => {
+    const classes = [
+        "slider",
+        config.class,
+        config.disabled ? "slider--disabled" : "",
+        config.size && config.size !== "XS"
+            ? `slider--${typeof config.size === "string"
+                ? config.size.toLowerCase()
+                : config.size}`
+            : "",
+        config.color && config.color !== "primary" ? `slider--${config.color}` : "",
+        config.range ? "slider--range" : "",
+        config.centered ? "slider--centered" : "",
+        config.icon ? "slider--icon" : "",
+    ]
+        .filter(Boolean)
+        .join(" ");
+    const attributes = {
+        tabindex: "-1",
+    };
+    if (config.disabled) {
+        attributes["aria-disabled"] = "true";
+    }
+    return createElementConfig(config, {
+        tag: "div",
+        attributes,
+        className: classes,
+        forwardEvents: {
+            click: true,
+            keydown: true,
+            touchstart: true,
+            touchmove: true,
+            touchend: true,
+            mousedown: true,
+            mousemove: true,
+            mouseup: true,
+        },
+        interactive: true,
+    });
+};
+export const getApiConfig = (comp) => ({
+    slider: {
+        setValue: (v, t) => comp.slider?.setValue(v, t),
+        getValue: () => comp.slider?.getValue() ?? 0,
+        setSecondValue: (v, t) => comp.slider?.setSecondValue(v, t),
+        getSecondValue: () => comp.slider?.getSecondValue() ?? null,
+        setMin: (m) => comp.slider?.setMin(m),
+        getMin: () => comp.slider?.getMin() ?? 0,
+        setMax: (m) => comp.slider?.setMax(m),
+        getMax: () => comp.slider?.getMax() ?? 100,
+        setStep: (s) => comp.slider?.setStep(s),
+        getStep: () => comp.slider?.getStep() ?? 1,
+        regenerateTicks: () => comp.slider?.regenerateTicks?.(),
+    },
+    disabled: {
+        enable: () => comp.disabled?.enable?.(),
+        disable: () => comp.disabled?.disable?.(),
+        isDisabled: () => comp.disabled?.isDisabled?.() ?? false,
+    },
+    appearance: {
+        setColor: (c) => comp.appearance?.setColor?.(c),
+        getColor: () => comp.appearance?.getColor?.() ?? "primary",
+        setSize: (s) => comp.setSize?.(s),
+        getSize: () => comp.getSize?.() ?? "XS",
+        showTicks: (s) => comp.appearance?.showTicks?.(s),
+        showCurrentValue: (s) => comp.appearance?.showCurrentValue?.(s),
+    },
+    text: {
+        setText: (t) => comp.label?.setText?.(t),
+        getText: () => comp.label?.getText?.() ?? "",
+    },
+    icon: {
+        setIcon: (h) => comp.icon?.setIcon?.(h),
+        getIcon: () => comp.icon?.getIcon?.() ?? "",
+    },
+    events: {
+        on: (e, h) => comp.on?.(e, h),
+        off: (e, h) => comp.off?.(e, h),
+    },
+    lifecycle: {
+        destroy: () => comp.lifecycle?.destroy?.(),
+    },
+});

package/dist/components/slider/constants.js

@@ -0,0 +1,74 @@
+export const SLIDER_COLORS = {
+    PRIMARY: 'primary',
+    SECONDARY: 'secondary',
+    TERTIARY: 'tertiary',
+    ERROR: 'error'
+};
+export const SLIDER_SIZES = {
+    XS: 16,
+    S: 24,
+    M: 40,
+    L: 56,
+    XL: 96
+};
+export const SLIDER_MEASUREMENTS = {
+    HANDLE_SIZE: 16,
+    SMALL_HANDLE_HEIGHT: 44,
+    HANDLE_HEIGHT_OFFSET: 12,
+    MIN_HEIGHT: 48,
+    TRACK_RADIUS: 3,
+    SMALL_TRACK_EXTERNAL_RADIUS: 10,
+    LARGE_TRACK_RADIUS_RATIO: 0.35,
+    TICK_SIZE: 4,
+    DOT_SIZE: 4,
+    HANDLE_GAP: 6,
+    HANDLE_GAP_PRESSED_REDUCTION: 2,
+    CENTER_GAP: 4,
+    EDGE_PADDING: 7
+};
+export const SLIDER_EVENTS = {
+    CHANGE: 'change',
+    INPUT: 'input',
+    FOCUS: 'focus',
+    BLUR: 'blur',
+    START: 'start',
+    END: 'end'
+};
+export const SLIDER_POSITIONS = {
+    START: 'start',
+    END: 'end'
+};
+export const SLIDER_DEFAULTS = {
+    MIN: 0,
+    MAX: 100,
+    VALUE: 0,
+    STEP: 1,
+    DISABLED: false,
+    COLOR: SLIDER_COLORS.PRIMARY,
+    SIZE: 'XS',
+    TICKS: false,
+    SHOW_VALUE: true,
+    SNAP_TO_STEPS: true,
+    RANGE: false,
+    CENTERED: false,
+    ICON_POSITION: SLIDER_POSITIONS.START,
+    LABEL_POSITION: SLIDER_POSITIONS.START
+};
+export const SLIDER_CLASSES = {
+    ROOT: 'slider',
+    CONTAINER: 'slider__container',
+    FILL: 'slider__fill',
+    HANDLE: 'slider__handle',
+    HANDLE_SECOND: 'slider__handle--second',
+    LABEL: 'slider__label',
+    VALUE: 'slider__value',
+    ICON: 'slider__icon',
+    DISABLED: 'slider--disabled',
+    FOCUSED: 'slider--focused',
+    DRAGGING: 'slider--dragging',
+    RANGE: 'slider--range',
+    PRIMARY: 'slider--primary',
+    SECONDARY: 'slider--secondary',
+    TERTIARY: 'slider--tertiary',
+    ERROR: 'slider--error'
+};

package/dist/components/slider/features/controller.d.ts

@@ -1,4 +1,4 @@
-import { SliderConfig } from "../types";
+import { SliderConfig } from "../types.js";
 /**
  * Add controller functionality to slider component
  * Manages state, events, user interactions, and UI rendering