mtrl 0.8.0-next.8 → 0.8.0

package/dist/components/card/features.js

@@ -0,0 +1,225 @@
+import { PREFIX } from "../../core/config.js";
+import { createElement } from "../../core/dom/create.js";
+import { CARD_ELEVATION_LEVELS } from "./config.js";
+export const withLoading = (config = {}) => (component) => {
+    const initialState = config.initialState || false;
+    let loadingElement = null;
+    let isLoading = initialState;
+    function setLoading(loading) {
+        isLoading = loading;
+        if (loading && !loadingElement) {
+            loadingElement = createElement({
+                tag: "div",
+                className: `${PREFIX}-card-loading-overlay`,
+                container: component.element,
+                attributes: {
+                    role: "progressbar",
+                    "aria-busy": "true",
+                    "aria-label": "Loading",
+                },
+            });
+            createElement({
+                tag: "div",
+                className: `${PREFIX}-card-loading-spinner`,
+                container: loadingElement,
+            });
+            component.element.classList.add(`${PREFIX}-card--state-loading`);
+            component.element.setAttribute("aria-busy", "true");
+        }
+        else if (!loading && loadingElement) {
+            loadingElement.remove();
+            loadingElement = null;
+            component.element.classList.remove(`${PREFIX}-card--state-loading`);
+            component.element.setAttribute("aria-busy", "false");
+        }
+    }
+    if (initialState) {
+        setLoading(true);
+    }
+    return {
+        ...component,
+        loading: {
+            isLoading: () => isLoading,
+            setLoading,
+        },
+    };
+};
+export const withElevation = (component) => {
+    const config = component.config;
+    if (config.variant === "elevated") {
+        component.element.style.setProperty(`--${config.prefix}-card-elevation`, String(CARD_ELEVATION_LEVELS.LEVEL1));
+    }
+    else {
+        component.element.style.setProperty(`--${config.prefix}-card-elevation`, String(CARD_ELEVATION_LEVELS.LEVEL0));
+    }
+    return component;
+};
+export const withExpandable = (config = {}) => (component) => {
+    const initialExpanded = config.initialExpanded || false;
+    let isExpanded = initialExpanded;
+    const expandableContent = config.expandableContent;
+    const expandButton = createElement({
+        tag: "button",
+        className: `${PREFIX}-card-expand-button`,
+        attributes: {
+            "aria-expanded": isExpanded ? "true" : "false",
+            "aria-label": isExpanded ? "Collapse content" : "Expand content",
+            "aria-controls": expandableContent?.id ||
+                `${component.element.id || "card"}-expandable-content`,
+        },
+    });
+    const actionsContainer = component.element.querySelector(`.${PREFIX}-card-actions`);
+    if (actionsContainer) {
+        actionsContainer.appendChild(expandButton);
+    }
+    else {
+        const newActionsContainer = createElement({
+            tag: "div",
+            className: `${PREFIX}-card-actions`,
+            container: component.element,
+            attributes: {
+                role: "group",
+            },
+        });
+        newActionsContainer.appendChild(expandButton);
+    }
+    if (expandableContent) {
+        expandableContent.classList.add(`${PREFIX}-card-expandable-content`);
+        if (!expandableContent.id) {
+            expandableContent.id = `${component.element.id || "card"}-expandable-content`;
+        }
+        if (!initialExpanded) {
+            expandableContent.style.display = "none";
+            expandableContent.setAttribute("aria-hidden", "true");
+        }
+        else {
+            expandableContent.setAttribute("aria-hidden", "false");
+        }
+        component.element.appendChild(expandableContent);
+    }
+    function setExpanded(expanded) {
+        isExpanded = expanded;
+        if (expandableContent) {
+            expandableContent.style.display = expanded ? "block" : "none";
+            expandableContent.setAttribute("aria-hidden", expanded ? "false" : "true");
+        }
+        expandButton.setAttribute("aria-expanded", expanded ? "true" : "false");
+        expandButton.setAttribute("aria-label", expanded ? "Collapse content" : "Expand content");
+        if (expanded) {
+            component.element.classList.add(`${PREFIX}-card--expanded`);
+        }
+        else {
+            component.element.classList.remove(`${PREFIX}-card--expanded`);
+        }
+        component.emit?.("expandedChanged", { expanded });
+    }
+    function toggleExpanded() {
+        setExpanded(!isExpanded);
+    }
+    expandButton.addEventListener("click", (e) => {
+        e.stopPropagation();
+        toggleExpanded();
+    });
+    expandButton.addEventListener("keydown", (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            toggleExpanded();
+        }
+    });
+    return {
+        ...component,
+        expandable: {
+            isExpanded: () => isExpanded,
+            setExpanded,
+            toggleExpanded,
+        },
+    };
+};
+export const withSwipeable = (config = {}) => (component) => {
+    const threshold = config.threshold || 100;
+    let startX = 0;
+    let currentX = 0;
+    component.element.setAttribute("aria-description", "Swipeable card. Swipe left or right to perform actions.");
+    const leftActionButton = createElement({
+        tag: "button",
+        className: `${PREFIX}-card-swipe-left-action`,
+        text: "Swipe Left Action",
+        container: component.element,
+        attributes: {
+            "aria-label": "Perform swipe left action",
+            style: "position: absolute; left: -9999px; top: -9999px; visibility: hidden;",
+        },
+    });
+    const rightActionButton = createElement({
+        tag: "button",
+        className: `${PREFIX}-card-swipe-right-action`,
+        text: "Swipe Right Action",
+        container: component.element,
+        attributes: {
+            "aria-label": "Perform swipe right action",
+            style: "position: absolute; left: -9999px; top: -9999px; visibility: hidden;",
+        },
+    });
+    leftActionButton.addEventListener("click", () => {
+        if (config.onSwipeLeft) {
+            component.element.style.transform = "translateX(-100%)";
+            component.element.style.transition = "transform 0.3s ease";
+            config.onSwipeLeft(component);
+        }
+    });
+    rightActionButton.addEventListener("click", () => {
+        if (config.onSwipeRight) {
+            component.element.style.transform = "translateX(100%)";
+            component.element.style.transition = "transform 0.3s ease";
+            config.onSwipeRight(component);
+        }
+    });
+    function handleTouchStart(e) {
+        startX = e.touches[0].clientX;
+        component.element.style.transition = "none";
+    }
+    function handleTouchMove(e) {
+        if (!startX)
+            return;
+        currentX = e.touches[0].clientX;
+        const diffX = currentX - startX;
+        component.element.style.transform = `translateX(${diffX}px)`;
+    }
+    function handleTouchEnd() {
+        if (!startX)
+            return;
+        component.element.style.transition = "transform 0.3s ease";
+        const diffX = currentX - startX;
+        if (Math.abs(diffX) >= threshold) {
+            if (diffX > 0 && config.onSwipeRight) {
+                component.element.style.transform = "translateX(100%)";
+                config.onSwipeRight(component);
+            }
+            else if (diffX < 0 && config.onSwipeLeft) {
+                component.element.style.transform = "translateX(-100%)";
+                config.onSwipeLeft(component);
+            }
+            else {
+                component.element.style.transform = "translateX(0)";
+            }
+        }
+        else {
+            component.element.style.transform = "translateX(0)";
+        }
+        startX = 0;
+        currentX = 0;
+    }
+    component.element.addEventListener("touchstart", handleTouchStart, { passive: true });
+    component.element.addEventListener("touchmove", handleTouchMove, { passive: true });
+    component.element.addEventListener("touchend", handleTouchEnd);
+    component.element.classList.add(`${PREFIX}-card--swipeable`);
+    return {
+        ...component,
+        swipeable: {
+            reset: () => {
+                component.element.style.transition = "transform 0.3s ease";
+                component.element.style.transform = "translateX(0)";
+            },
+        },
+    };
+};

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

@@ -59,13 +59,13 @@
  * Factory function to create a new Card component.
  * @see CardComponent for the full API reference
  */
-export { default } from "./card";
+export { default } from "./card.js";
 /**
  * Card component types and interfaces
  *
  * These types define the structure and behavior of the Card component.
  */
-export { CardVariant, CardElevationLevel, CardSchema, CardHeaderConfig, CardContentConfig, CardActionsConfig, CardMediaConfig, CardAriaAttributes, CardComponent, LoadingFeature, ExpandableFeature, SwipeableFeature, } from "./types";
-export { createCardContent, createCardHeader, createCardActions, createCardMedia, } from "./content";
-export { withAPI } from "./api";
-export { withLoading, withExpandable, withSwipeable, withElevation, } from "./features";
+export type { CardVariant, CardElevationLevel, CardSchema, CardHeaderConfig, CardContentConfig, CardActionsConfig, CardMediaConfig, CardAriaAttributes, CardComponent, LoadingFeature, ExpandableFeature, SwipeableFeature, } from "./types.js";
+export { createCardContent, createCardHeader, createCardActions, createCardMedia, } from "./content.js";
+export { withAPI } from "./api.js";
+export { withLoading, withExpandable, withSwipeable, withElevation, } from "./features.js";

package/dist/components/card/index.js

@@ -0,0 +1,4 @@
+export { default } from "./card.js";
+export { createCardContent, createCardHeader, createCardActions, createCardMedia, } from "./content.js";
+export { withAPI } from "./api.js";
+export { withLoading, withExpandable, withSwipeable, withElevation, } from "./features.js";

package/dist/components/card/types.js

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

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

@@ -1,4 +1,4 @@
-import { CarouselComponent, CarouselVariant, SlidesAPI } from "./types";
+import { CarouselComponent, CarouselVariant, SlidesAPI } from "./types.js";
 interface ApiComponent {
     element: HTMLElement;
     slides: SlidesAPI;

package/dist/components/carousel/api.js

@@ -0,0 +1,46 @@
+export const withAPI = () => (component) => {
+    const api = {
+        element: component.element,
+        slides: component.slides,
+        lifecycle: { destroy: () => component.lifecycle?.destroy() },
+        getClass: component.getClass,
+        next() {
+            component.next();
+            return api;
+        },
+        prev() {
+            component.prev();
+            return api;
+        },
+        goTo(index) {
+            component.goTo(index);
+            return api;
+        },
+        getCurrentSlide: () => component.getCurrentSlide(),
+        getVariant: () => component.getVariant(),
+        addSlide(slide, index) {
+            component.slides.addSlide(slide, index);
+            return api;
+        },
+        removeSlide(index) {
+            component.slides.removeSlide(index);
+            return api;
+        },
+        destroy() {
+            component.lifecycle?.destroy();
+        },
+        on(event, handler) {
+            component.on?.(event, handler);
+            return api;
+        },
+        off(event, handler) {
+            component.off?.(event, handler);
+            return api;
+        },
+        addClass(...classes) {
+            component.element.classList.add(...classes);
+            return api;
+        },
+    };
+    return api;
+};

package/dist/components/carousel/arrangement.js

@@ -0,0 +1,61 @@
+const MEDIUM_ITEM_FLEX = 0.1;
+export const itemCount = (a) => a.largeCount + a.mediumCount + a.smallCount;
+const isValid = (a) => {
+    if (a.largeCount > 0 && a.smallCount > 0 && a.mediumCount > 0) {
+        return a.largeSize > a.mediumSize && a.mediumSize > a.smallSize;
+    }
+    if (a.largeCount > 0 && a.smallCount > 0) {
+        return a.largeSize > a.smallSize;
+    }
+    return true;
+};
+const cost = (a, targetLargeSize) => isValid(a) ? Math.abs(targetLargeSize - a.largeSize) * a.priority : Number.MAX_VALUE;
+const largeSizeFor = (space, smallCount, smallSize, mediumCount, largeCount) => (space - (smallCount + mediumCount / 2) * smallSize) / (largeCount + mediumCount / 2);
+const fit = (priority, availableSpace, gap, smallCount, smallSize, minSmallSize, maxSmallSize, mediumCount, mediumSize, largeCount, largeSize) => {
+    const total = largeCount + mediumCount + smallCount;
+    const space = availableSpace - (total - 1) * gap;
+    let small = Math.min(Math.max(smallSize, minSmallSize), maxSmallSize);
+    const taken = largeSize * largeCount + mediumSize * mediumCount + small * smallCount;
+    const delta = space - taken;
+    if (smallCount > 0 && delta > 0) {
+        small += Math.min(delta / smallCount, maxSmallSize - small);
+    }
+    else if (smallCount > 0 && delta < 0) {
+        small += Math.max(delta / smallCount, minSmallSize - small);
+    }
+    small = smallCount > 0 ? small : 0;
+    let large = largeSizeFor(space, smallCount, small, mediumCount, largeCount);
+    let medium = (large + small) / 2;
+    if (mediumCount > 0 && large !== largeSize) {
+        const targetAdjustment = (largeSize - large) * largeCount;
+        const flex = medium * MEDIUM_ITEM_FLEX * mediumCount;
+        const distribute = Math.min(Math.abs(targetAdjustment), flex);
+        if (targetAdjustment > 0) {
+            medium -= distribute / mediumCount;
+            large += distribute / largeCount;
+        }
+        else {
+            medium += distribute / mediumCount;
+            large -= distribute / largeCount;
+        }
+    }
+    return { priority, smallSize: small, smallCount, mediumSize: medium, mediumCount, largeSize: large, largeCount };
+};
+export const findLowestCostArrangement = (o) => {
+    let lowest = null;
+    let priority = 1;
+    for (const largeCount of o.largeCounts) {
+        for (const mediumCount of o.mediumCounts) {
+            for (const smallCount of o.smallCounts) {
+                const candidate = fit(priority, o.availableSpace, o.gap, smallCount, o.targetSmallSize, o.minSmallSize, o.maxSmallSize, mediumCount, o.targetMediumSize, largeCount, o.targetLargeSize);
+                if (lowest === null || cost(candidate, o.targetLargeSize) < cost(lowest, o.targetLargeSize)) {
+                    lowest = candidate;
+                    if (cost(lowest, o.targetLargeSize) === 0)
+                        return lowest;
+                }
+                priority++;
+            }
+        }
+    }
+    return lowest;
+};

package/dist/components/carousel/carousel.d.ts

@@ -1,4 +1,4 @@
-import { CarouselConfig, CarouselComponent } from "./types";
+import { CarouselConfig, CarouselComponent } from "./types.js";
 /**
  * Creates a Material 3 carousel.
  *

package/dist/components/carousel/carousel.js

@@ -0,0 +1,11 @@
+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 { withSlides, withScroll } from "./features/index.js";
+import { withAPI } from "./api.js";
+import { createBaseConfig, getElementConfig } from "./config.js";
+export const createCarousel = (config = {}) => {
+    const baseConfig = createBaseConfig(config);
+    return pipe(createBase, withEvents(), withElement(getElementConfig(baseConfig)), withSlides(baseConfig), withLifecycle(), withScroll(baseConfig), withAPI())(baseConfig);
+};
+export default createCarousel;

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

@@ -1,4 +1,4 @@
-import { CarouselConfig } from "./types";
+import { CarouselConfig } from "./types.js";
 export declare const defaultConfig: CarouselConfig;
 /** Layout-dependent defaults: full-screen has no padding and 16dp between items; uncontained scrolls freely */
 export declare const resolveLayoutDefaults: (config: CarouselConfig) => Required<Pick<CarouselConfig, "variant" | "gap" | "padding" | "snap">>;

package/dist/components/carousel/config.js

@@ -0,0 +1,40 @@
+import { createComponentConfig, createElementConfig, } from "../../core/config/component.js";
+import { CAROUSEL_DEFAULTS, CAROUSEL_VARIANTS } from "./constants.js";
+export const defaultConfig = {
+    variant: CAROUSEL_DEFAULTS.VARIANT,
+    cornerRadius: CAROUSEL_DEFAULTS.CORNER_RADIUS,
+    initialSlide: CAROUSEL_DEFAULTS.INITIAL_SLIDE,
+    minSmallItemWidth: CAROUSEL_DEFAULTS.MIN_SMALL_ITEM_WIDTH,
+    maxSmallItemWidth: CAROUSEL_DEFAULTS.MAX_SMALL_ITEM_WIDTH,
+};
+export const resolveLayoutDefaults = (config) => {
+    const variant = (config.variant || CAROUSEL_DEFAULTS.VARIANT);
+    const fullScreen = variant === CAROUSEL_VARIANTS.FULL_SCREEN;
+    return {
+        variant,
+        gap: config.gap ?? (fullScreen ? CAROUSEL_DEFAULTS.GAP_FULL_SCREEN : CAROUSEL_DEFAULTS.GAP),
+        padding: config.padding ?? (fullScreen ? 0 : CAROUSEL_DEFAULTS.PADDING),
+        snap: config.snap ?? variant !== CAROUSEL_VARIANTS.UNCONTAINED,
+    };
+};
+export const createBaseConfig = (config = {}) => createComponentConfig(defaultConfig, config, "carousel");
+export const getElementConfig = (config) => {
+    const { variant } = resolveLayoutDefaults(config);
+    return createElementConfig(config, {
+        tag: "div",
+        attributes: {
+            role: "region",
+            "aria-roledescription": "carousel",
+            "aria-label": config.ariaLabel || "Carousel",
+        },
+        className: [
+            config.class,
+            `${config.prefix}-carousel--${variant}`,
+            variant === CAROUSEL_VARIANTS.FULL_SCREEN ? `${config.prefix}-carousel--vertical` : null,
+        ],
+        forwardEvents: {
+            focus: true,
+            blur: true,
+        },
+    });
+};

package/dist/components/carousel/constants.js

@@ -0,0 +1,23 @@
+export const CAROUSEL_VARIANTS = {
+    MULTI_BROWSE: "multi-browse",
+    UNCONTAINED: "uncontained",
+    HERO: "hero",
+    HERO_CENTER: "hero-center",
+    FULL_SCREEN: "full-screen",
+};
+export const CAROUSEL_EVENTS = {
+    CHANGE: "change",
+};
+export const CAROUSEL_DEFAULTS = {
+    VARIANT: CAROUSEL_VARIANTS.MULTI_BROWSE,
+    ITEM_WIDTH: 280,
+    GAP: 8,
+    GAP_FULL_SCREEN: 16,
+    PADDING: 16,
+    CORNER_RADIUS: 28,
+    MIN_SMALL_ITEM_WIDTH: 40,
+    MAX_SMALL_ITEM_WIDTH: 56,
+    ANCHOR_SIZE: 10,
+    MEDIUM_LARGE_THRESHOLD: 0.85,
+    INITIAL_SLIDE: 0,
+};

package/dist/components/carousel/features/index.d.ts

@@ -1,2 +1,2 @@
-export { withSlides } from "./slides";
-export { withScroll } from "./scroll";
+export { withSlides } from "./slides.js";
+export { withScroll } from "./scroll.js";

package/dist/components/carousel/features/index.js

@@ -0,0 +1,2 @@
+export { withSlides } from "./slides.js";
+export { withScroll } from "./scroll.js";

package/dist/components/carousel/features/scroll.d.ts

@@ -1,5 +1,5 @@
-import { CarouselConfig, CarouselVariant } from "../types";
-import type { SlidesComponent } from "./slides";
+import { CarouselConfig, CarouselVariant } from "../types.js";
+import type { SlidesComponent } from "./slides.js";
 interface ScrollComponent {
     getCurrentSlide: () => number;
     getVariant: () => CarouselVariant;