mtrl 0.8.0-next.35 → 0.8.0-next.37

package/README.md

@@ -63,7 +63,9 @@ bun add mtrl
 
 ## Tree-Shaking Optimized Imports
 
-mtrl is optimized for tree-shaking. Constants are exported separately from component creators to minimize bundle size.
+mtrl publishes ESM modules so application bundlers can remove unused exports and
+split dynamic imports. The root and direct component imports use the same modules.
+CommonJS remains available through `require('mtrl')`.
 
 ### Import Patterns
 
@@ -100,6 +102,90 @@ const slider = createSlider({
 
 **Note:** Constants are NOT exported from main entry points. Always import them from the component's constants file.
 
+### Selective styles
+
+The full stylesheet remains available:
+
+```typescript
+import 'mtrl/styles';
+```
+
+For smaller applications, import the base once, followed by the components you use:
+
+```typescript
+import 'mtrl/styles/base';
+import 'mtrl/styles/button';
+import 'mtrl/styles/textfield';
+
+// Optional: alternate themes and utility classes
+import 'mtrl/themes/ocean';
+import 'mtrl/styles/utilities';
+```
+
+The base includes the baseline light/dark theme, tokens, reset, typography, and
+ripple styles. Selective style entry points are JavaScript modules that import
+their CSS and dependencies (for example, button imports progress; select imports
+textfield and menu). Use a CSS-capable application bundler to resolve and
+deduplicate these imports. Their ordered `mtrl` cascade layers preserve component
+overrides even when a bundler reorders CSS chunks. Unlayered application CSS can
+override these library styles. Load optional themes after the base.
+Choose either the full stylesheet or selective imports to avoid
+duplicating styles. DatePicker remains available through the full stylesheet;
+it has no separate style entry while in development.
+
+Button progress and card action buttons retain their dynamic imports in ESM.
+Enable code splitting in your application build to load those features on demand.
+The CommonJS compatibility bundle includes them eagerly.
+
+Slider decoration uses DOM tracks and CSS backgrounds for ticks; it no longer
+creates a canvas or subscribes to theme changes. Its public slider API and
+accessible handles remain. Themes and per-slider colour overrides apply through
+CSS. Custom styling that targets the former `.mtrl-slider-canvas` element must be
+updated. Run `bun run slider:check` after building for slider geometry, keyboard,
+pointer, resize, and lifecycle checks. For comparison with a previous canvas
+build, pass `--reference=/path/to/reference` to `scripts/check-slider.ts`; that
+directory must contain an ESM `slider.js` exporting `createSlider` and its full
+`styles.css`. Comparison screenshots and measurements go to `analysis/slider-dom`.
+CSS rounded corners differ slightly from the previous canvas curves.
+
+### Checking distribution size
+
+```bash
+bun run build
+bun run size:check
+```
+
+The size check packs and installs the local distribution in a temporary directory,
+checks Node ESM/CommonJS and TypeScript imports, and measures minified consumer
+bundles with gzip and Brotli. It enforces budgets for individual imports, a form,
+CSS, and the initial button chunks. Results are saved to
+`analysis/package-size.json`. Run it after building; it does not rebuild dist.
+
+For a second bundler and real-browser checks:
+
+```bash
+node node_modules/playwright/cli.js install chromium
+bun run consumer:check
+```
+
+This builds a packed Vite application and checks tree-shaking, CSS deduplication,
+and on-demand progress loading. Chromium compares full and selective CSS with
+screenshots and computed styles across component states, baseline/ocean themes,
+light/dark modes, and desktop/mobile widths. It also exercises pointer and keyboard
+interactions. Reports and screenshots are saved to `analysis/browser`; CI runs
+these checks and uploads the artifacts. Comparisons use the full stylesheet from
+the same build as their reference, so they test distribution equivalence rather
+than establish a separate design baseline.
+
+`scripts/style-manifest.ts` declares selective entries and their dependencies.
+The build rejects missing dependencies and cycles, checks the manifest against
+Sass's parsed full-stylesheet imports, and verifies component dependencies retained
+by tree-shaking, including lazy imports. Vite and Playwright are development-only
+dependencies, pinned along with the existing tools in `bun.lock`.
+
+Builds fail on TypeScript or Sass errors. Published ESM is readable and includes
+declarations; source maps are omitted from the package to reduce installation size.
+
 ## Component Architecture
 
 Let's look at how mtrl components are constructed:

package/dist/README.md

@@ -63,7 +63,9 @@ bun add mtrl
 
 ## Tree-Shaking Optimized Imports
 
-mtrl is optimized for tree-shaking. Constants are exported separately from component creators to minimize bundle size.
+mtrl publishes ESM modules so application bundlers can remove unused exports and
+split dynamic imports. The root and direct component imports use the same modules.
+CommonJS remains available through `require('mtrl')`.
 
 ### Import Patterns
 
@@ -100,6 +102,90 @@ const slider = createSlider({
 
 **Note:** Constants are NOT exported from main entry points. Always import them from the component's constants file.
 
+### Selective styles
+
+The full stylesheet remains available:
+
+```typescript
+import 'mtrl/styles';
+```
+
+For smaller applications, import the base once, followed by the components you use:
+
+```typescript
+import 'mtrl/styles/base';
+import 'mtrl/styles/button';
+import 'mtrl/styles/textfield';
+
+// Optional: alternate themes and utility classes
+import 'mtrl/themes/ocean';
+import 'mtrl/styles/utilities';
+```
+
+The base includes the baseline light/dark theme, tokens, reset, typography, and
+ripple styles. Selective style entry points are JavaScript modules that import
+their CSS and dependencies (for example, button imports progress; select imports
+textfield and menu). Use a CSS-capable application bundler to resolve and
+deduplicate these imports. Their ordered `mtrl` cascade layers preserve component
+overrides even when a bundler reorders CSS chunks. Unlayered application CSS can
+override these library styles. Load optional themes after the base.
+Choose either the full stylesheet or selective imports to avoid
+duplicating styles. DatePicker remains available through the full stylesheet;
+it has no separate style entry while in development.
+
+Button progress and card action buttons retain their dynamic imports in ESM.
+Enable code splitting in your application build to load those features on demand.
+The CommonJS compatibility bundle includes them eagerly.
+
+Slider decoration uses DOM tracks and CSS backgrounds for ticks; it no longer
+creates a canvas or subscribes to theme changes. Its public slider API and
+accessible handles remain. Themes and per-slider colour overrides apply through
+CSS. Custom styling that targets the former `.mtrl-slider-canvas` element must be
+updated. Run `bun run slider:check` after building for slider geometry, keyboard,
+pointer, resize, and lifecycle checks. For comparison with a previous canvas
+build, pass `--reference=/path/to/reference` to `scripts/check-slider.ts`; that
+directory must contain an ESM `slider.js` exporting `createSlider` and its full
+`styles.css`. Comparison screenshots and measurements go to `analysis/slider-dom`.
+CSS rounded corners differ slightly from the previous canvas curves.
+
+### Checking distribution size
+
+```bash
+bun run build
+bun run size:check
+```
+
+The size check packs and installs the local distribution in a temporary directory,
+checks Node ESM/CommonJS and TypeScript imports, and measures minified consumer
+bundles with gzip and Brotli. It enforces budgets for individual imports, a form,
+CSS, and the initial button chunks. Results are saved to
+`analysis/package-size.json`. Run it after building; it does not rebuild dist.
+
+For a second bundler and real-browser checks:
+
+```bash
+node node_modules/playwright/cli.js install chromium
+bun run consumer:check
+```
+
+This builds a packed Vite application and checks tree-shaking, CSS deduplication,
+and on-demand progress loading. Chromium compares full and selective CSS with
+screenshots and computed styles across component states, baseline/ocean themes,
+light/dark modes, and desktop/mobile widths. It also exercises pointer and keyboard
+interactions. Reports and screenshots are saved to `analysis/browser`; CI runs
+these checks and uploads the artifacts. Comparisons use the full stylesheet from
+the same build as their reference, so they test distribution equivalence rather
+than establish a separate design baseline.
+
+`scripts/style-manifest.ts` declares selective entries and their dependencies.
+The build rejects missing dependencies and cycles, checks the manifest against
+Sass's parsed full-stylesheet imports, and verifies component dependencies retained
+by tree-shaking, including lazy imports. Vite and Playwright are development-only
+dependencies, pinned along with the existing tools in `bun.lock`.
+
+Builds fail on TypeScript or Sass errors. Published ESM is readable and includes
+declarations; source maps are omitted from the package to reduce installation size.
+
 ## Component Architecture
 
 Let's look at how mtrl components are constructed:

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

@@ -1,4 +1,4 @@
-import { BadgeComponent } from "./types";
+import { BadgeComponent } from "./types.js";
 /**
  * API configuration options for badge component
  * @category Components

package/dist/components/badge/api.js

@@ -0,0 +1,162 @@
+import { formatBadgeLabel } from "./config.js";
+const VARIANT_SMALL = "small";
+const ALL_COLORS = [
+    "error",
+    "primary",
+    "secondary",
+    "tertiary",
+    "success",
+    "warning",
+    "info",
+];
+const ALL_VARIANTS = ["small", "large"];
+const ALL_POSITIONS = ["top-right", "top-left", "bottom-right", "bottom-left"];
+export const withAPI = ({ visibility, lifecycle }) => (component) => {
+    const badgeComponent = {
+        element: component.element,
+        wrapper: component.wrapper,
+        getClass: component.getClass,
+        setLabel(label) {
+            component.config.label = label;
+            if (component.config.variant === VARIANT_SMALL) {
+                component.element.textContent = "";
+                return badgeComponent;
+            }
+            const formattedLabel = formatBadgeLabel(label, component.config.max);
+            component.element.textContent = formattedLabel;
+            component.element.classList.remove(`${component.getClass("badge")}--overflow`);
+            if (typeof label === "number" &&
+                component.config.max !== undefined &&
+                label > component.config.max) {
+                component.element.classList.add(`${component.getClass("badge")}--overflow`);
+            }
+            if (formattedLabel === "" || formattedLabel === "0") {
+                badgeComponent.hide();
+            }
+            else {
+                badgeComponent.show();
+            }
+            return badgeComponent;
+        },
+        getLabel() {
+            return component.element.textContent || "";
+        },
+        setContent(content) {
+            return badgeComponent.setLabel(content);
+        },
+        getContent() {
+            return badgeComponent.getLabel();
+        },
+        show() {
+            visibility.show();
+            return badgeComponent;
+        },
+        hide() {
+            visibility.hide();
+            return badgeComponent;
+        },
+        toggle(visible) {
+            visibility.toggle(visible);
+            return badgeComponent;
+        },
+        isVisible() {
+            return visibility.isVisible();
+        },
+        setMax(max) {
+            component.config.max = max;
+            if (component.config.label !== undefined) {
+                badgeComponent.setLabel(component.config.label);
+            }
+            return badgeComponent;
+        },
+        setColor(color) {
+            ALL_COLORS.forEach((colorName) => {
+                component.element.classList.remove(`${component.getClass("badge")}--${colorName}`);
+            });
+            component.element.classList.add(`${component.getClass("badge")}--${color}`);
+            return badgeComponent;
+        },
+        setVariant(variant) {
+            ALL_VARIANTS.forEach((variantName) => {
+                component.element.classList.remove(`${component.getClass("badge")}--${variantName}`);
+            });
+            component.element.classList.add(`${component.getClass("badge")}--${variant}`);
+            component.config.variant = variant;
+            if (variant === VARIANT_SMALL) {
+                component.element.textContent = "";
+                component.element.setAttribute("aria-hidden", "true");
+            }
+            else {
+                component.element.setAttribute("role", "status");
+                if (component.config.label !== undefined) {
+                    badgeComponent.setLabel(component.config.label);
+                }
+            }
+            return badgeComponent;
+        },
+        setPosition(position) {
+            ALL_POSITIONS.forEach((posName) => {
+                component.element.classList.remove(`${component.getClass("badge")}--${posName}`);
+            });
+            component.element.classList.add(`${component.getClass("badge")}--${position}`);
+            return badgeComponent;
+        },
+        attachTo(target) {
+            if (component.wrapper &&
+                component.wrapper.contains(component.element)) {
+                component.wrapper.removeChild(component.element);
+            }
+            const wrapper = document.createElement("div");
+            wrapper.classList.add(component.getClass("badge-wrapper"));
+            wrapper.style.position = "relative";
+            const parent = target.parentNode;
+            if (parent) {
+                parent.replaceChild(wrapper, target);
+                wrapper.appendChild(target);
+                wrapper.appendChild(component.element);
+                component.element.classList.add(`${component.getClass("badge")}--positioned`);
+                component.wrapper = wrapper;
+                badgeComponent.wrapper = wrapper;
+            }
+            return badgeComponent;
+        },
+        detach() {
+            if (component.wrapper &&
+                component.wrapper.contains(component.element)) {
+                component.wrapper.removeChild(component.element);
+                component.element.classList.remove(`${component.getClass("badge")}--positioned`);
+                document.body.appendChild(component.element);
+                component.wrapper = undefined;
+                badgeComponent.wrapper = undefined;
+            }
+            return badgeComponent;
+        },
+        destroy() {
+            lifecycle.destroy();
+            if (component.wrapper) {
+                const target = component.wrapper.firstChild;
+                const parent = component.wrapper.parentNode;
+                if (parent && target) {
+                    parent.replaceChild(target, component.wrapper);
+                }
+            }
+        },
+        addClass: (...classes) => {
+            component.addClass(...classes);
+            return badgeComponent;
+        },
+        removeClass: (...classes) => {
+            component.removeClass(...classes);
+            return badgeComponent;
+        },
+        on: (event, handler) => {
+            component.on(event, handler);
+            return badgeComponent;
+        },
+        off: (event, handler) => {
+            component.off(event, handler);
+            return badgeComponent;
+        },
+    };
+    return badgeComponent;
+};

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

@@ -1,4 +1,4 @@
-import { BadgeConfig, BadgeComponent } from './types';
+import { BadgeConfig, BadgeComponent } from "./types.js";
 /**
  * Creates a new Badge component following Material Design 3 guidelines.
  *

package/dist/components/badge/badge.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 { withVisibility, withVariant, withColor, withPosition, withMax, withAttachment } from "./features.js";
+import { withAPI } from "./api.js";
+import { createBaseConfig, getElementConfig, getApiConfig } from "./config.js";
+const createBadge = (config = {}) => {
+    const baseConfig = createBaseConfig(config);
+    try {
+        const badge = pipe(createBase, withEvents(), withElement(getElementConfig(baseConfig)), withVariant(baseConfig), withColor(baseConfig), withPosition(baseConfig), withMax(baseConfig), withVisibility(), withAttachment(baseConfig), withLifecycle(), comp => withAPI(getApiConfig(comp))(comp))(baseConfig);
+        return badge;
+    }
+    catch (error) {
+        console.error('Badge creation error:', error);
+        throw new Error(`Failed to create badge: ${error.message}`);
+    }
+};
+export default createBadge;

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
  *