material 1.0.4 → 3.0.0-next.1

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

@@ -0,0 +1,143 @@
+/**
+ * Configuration options for divider components
+ *
+ * Controls the appearance, orientation, and behavior of Material Design 3 dividers.
+ *
+ * @category Components
+ */
+export interface DividerConfig {
+    /**
+     * CSS class prefix (defaults to 'mtrl')
+     *
+     * Used for generating BEM-style class names for the component
+     */
+    prefix?: string;
+    /**
+     * CSS class to add to the divider
+     *
+     * Additional classes for custom styling needs.
+     * Can be a single class string or an array of class strings.
+     *
+     * @example 'my-custom-divider' or ['my-custom-divider', 'special-spacing']
+     */
+    class?: string | string[];
+    /**
+     * Orientation of the divider
+     *
+     * - 'horizontal': Creates a horizontal line (default)
+     * - 'vertical': Creates a vertical line
+     *
+     * @default 'horizontal'
+     *
+     * @example
+     * ```typescript
+     * // Create a vertical divider
+     * createDivider({ orientation: 'vertical' })
+     * ```
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Variant of the divider
+     *
+     * Controls how the divider is inset within its container:
+     * - 'full-width': Spans the entire width/height (default)
+     * - 'inset': Adds space at the start (left for horizontal, top for vertical)
+     * - 'middle-inset': Adds space at both start and end
+     *
+     * Most commonly used in lists to align dividers with text content.
+     *
+     * @default 'full-width'
+     *
+     * @example
+     * ```typescript
+     * // Create a list divider with left inset
+     * createDivider({ variant: 'inset' })
+     * ```
+     */
+    variant?: 'full-width' | 'inset' | 'middle-inset';
+    /**
+     * Custom inset value (left margin for horizontal, top margin for vertical)
+     *
+     * Overrides the default inset spacing at the start of the divider.
+     * Only applies when variant is 'inset' or 'middle-inset'.
+     *
+     * @default 16 for 'inset' and 'middle-inset' variants
+     *
+     * @example
+     * ```typescript
+     * // Create a divider with 24px left inset
+     * createDivider({ variant: 'inset', insetStart: 24 })
+     * ```
+     */
+    insetStart?: number;
+    /**
+     * Custom inset end value (right margin for horizontal, bottom margin for vertical)
+     *
+     * Overrides the default inset spacing at the end of the divider.
+     * Only applies when variant is 'middle-inset'.
+     *
+     * @default 0 for 'inset', 16 for 'middle-inset'
+     *
+     * @example
+     * ```typescript
+     * // Create a divider with custom insets on both sides
+     * createDivider({ variant: 'middle-inset', insetStart: 16, insetEnd: 24 })
+     * ```
+     */
+    insetEnd?: number;
+    /**
+     * Color of the divider
+     *
+     * Sets a custom color for the divider. Accepts any valid CSS color value.
+     * By default, dividers use the 'outline-variant' color from the Material theme.
+     *
+     * @example
+     * ```typescript
+     * // Create a blue divider
+     * createDivider({ color: '#2196F3' })
+     *
+     * // Create a divider with a semi-transparent color
+     * createDivider({ color: 'rgba(0, 0, 0, 0.12)' })
+     * ```
+     */
+    color?: string;
+    /**
+     * Thickness of the divider in pixels
+     *
+     * Controls the thickness (height for horizontal, width for vertical) of the divider.
+     * Material Design 3 typically uses 1px thickness for dividers.
+     *
+     * @default 1
+     *
+     * @example
+     * ```typescript
+     * // Create a bold divider
+     * createDivider({ thickness: 2 })
+     * ```
+     */
+    thickness?: number;
+    /**
+     * Used internally for component composition
+     *
+     * @internal
+     */
+    componentName?: string;
+}
+/**
+ * Default configuration for dividers
+ *
+ * @internal
+ */
+export declare const defaultConfig: Partial<DividerConfig>;
+/**
+ * Creates a base configuration object for divider
+ *
+ * Merges user-provided configuration with default values and ensures
+ * all required properties have values.
+ *
+ * @param config - User provided configuration
+ * @returns Complete configuration with defaults applied
+ *
+ * @internal
+ */
+export declare const createBaseConfig: (config?: DividerConfig) => DividerConfig;

package/dist/components/divider/config.js

@@ -0,0 +1,9 @@
+import { createComponentConfig } from "../../core/config/component.js";
+export const defaultConfig = {
+    orientation: 'horizontal',
+    variant: 'full-width',
+    thickness: 1
+};
+export const createBaseConfig = (config = {}) => {
+    return createComponentConfig(defaultConfig, config, 'divider');
+};

package/dist/components/divider/constants.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Divider orientation options
+ */
+export declare const DIVIDER_ORIENTATIONS: {
+    /** Horizontal divider (default) */
+    readonly HORIZONTAL: "horizontal";
+    /** Vertical divider */
+    readonly VERTICAL: "vertical";
+};
+/**
+ * Divider variant options
+ */
+export declare const DIVIDER_VARIANTS: {
+    /** Spans the entire width/height of the container (default) */
+    readonly FULL_WIDTH: "full-width";
+    /** Adds space at the start (left for horizontal, top for vertical) */
+    readonly INSET: "inset";
+    /** Adds space at both start and end */
+    readonly MIDDLE_INSET: "middle-inset";
+};
+/**
+ * Default divider thickness in pixels
+ * Following Material Design 3 guidelines
+ */
+export declare const DEFAULT_DIVIDER_THICKNESS = 1;
+/**
+ * Default inset value in pixels
+ * Applied when variant is 'inset' or 'middle-inset'
+ */
+export declare const DEFAULT_INSET_VALUE = 16;
+/**
+ * CSS classes used by the divider component
+ */
+export declare const DIVIDER_CLASSES: {
+    /** Root divider element */
+    readonly ROOT: "divider";
+    /** Applied to horizontal dividers */
+    readonly HORIZONTAL: "divider--horizontal";
+    /** Applied to vertical dividers */
+    readonly VERTICAL: "divider--vertical";
+    /** Applied to inset dividers */
+    readonly INSET: "divider--inset";
+    /** Applied to middle-inset dividers */
+    readonly MIDDLE_INSET: "divider--middle-inset";
+};

package/dist/components/divider/constants.js

@@ -0,0 +1,18 @@
+export const DIVIDER_ORIENTATIONS = {
+    HORIZONTAL: 'horizontal',
+    VERTICAL: 'vertical'
+};
+export const DIVIDER_VARIANTS = {
+    FULL_WIDTH: 'full-width',
+    INSET: 'inset',
+    MIDDLE_INSET: 'middle-inset'
+};
+export const DEFAULT_DIVIDER_THICKNESS = 1;
+export const DEFAULT_INSET_VALUE = 16;
+export const DIVIDER_CLASSES = {
+    ROOT: 'divider',
+    HORIZONTAL: 'divider--horizontal',
+    VERTICAL: 'divider--vertical',
+    INSET: 'divider--inset',
+    MIDDLE_INSET: 'divider--middle-inset'
+};

package/dist/components/divider/divider.d.ts

@@ -0,0 +1,39 @@
+import { DividerConfig } from "./config.js";
+import { DividerComponent } from "./types.js";
+/**
+ * Creates a new Divider component with the specified configuration.
+ *
+ * Dividers are thin lines that separate content into distinct sections following
+ * Material Design 3 guidelines. They can be horizontal or vertical, and offer
+ * various customization options for inset, thickness, and color.
+ *
+ * @param config - Divider configuration options
+ * @returns Divider component instance with methods for managing appearance and behavior
+ *
+ * @throws {Error} If divider creation fails due to invalid configuration
+ *
+ * @category Components
+ *
+ * @example
+ * ```typescript
+ * // Create a basic horizontal divider
+ * const divider = createDivider();
+ * container.appendChild(divider.element);
+ *
+ * // Create a vertical divider with custom styling
+ * const separator = createDivider({
+ *   orientation: 'vertical',
+ *   thickness: 2,
+ *   color: '#2196F3',
+ *   variant: 'middle-inset',
+ *   insetStart: 8,
+ *   insetEnd: 8
+ * });
+ *
+ * // Later, change the divider's appearance
+ * divider.setColor('var(--mtrl-sys-color-outline)');
+ * divider.setThickness(1);
+ * divider.setVariant('inset');
+ * ```
+ */
+export declare const createDivider: (config?: DividerConfig) => DividerComponent;

package/dist/components/divider/divider.js

@@ -0,0 +1,11 @@
+import { createBase, withElement, pipe, withVariant } from "../../core/compose/index.js";
+import { createBaseConfig } from "./config.js";
+import { withOrientation, withInset, withStyle } from "./features.js";
+export const createDivider = (config = {}) => {
+    const processedConfig = createBaseConfig(config);
+    return pipe(createBase, withElement({
+        tag: "hr",
+        componentName: "divider",
+        className: config.class,
+    }), withOrientation(processedConfig), withVariant(processedConfig), withInset(processedConfig), withStyle(processedConfig))(processedConfig);
+};

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

@@ -0,0 +1,6 @@
+import { BaseComponent, ElementComponent } from "../../core/compose/index.js";
+import { DividerConfig } from "./config.js";
+import { DividerOrientation, DividerInset, DividerStyle } from "./types.js";
+export declare const withOrientation: (config: DividerConfig) => <C extends ElementComponent & BaseComponent>(component: C) => C & DividerOrientation;
+export declare const withInset: (config: DividerConfig) => <C extends ElementComponent & BaseComponent & DividerOrientation>(component: C) => C & DividerInset;
+export declare const withStyle: (config: DividerConfig) => <C extends ElementComponent & BaseComponent & DividerOrientation & DividerInset>(component: C) => C & DividerStyle;

package/dist/components/divider/features.js

@@ -0,0 +1,83 @@
+const ORIENTATIONS = ['horizontal', 'vertical'];
+const VARIANTS = ['full-width', 'inset', 'middle-inset'];
+const DEFAULT_INSET = 16;
+const applyLayout = (component, config) => {
+    const { element } = component;
+    const base = component.getClass('divider');
+    const orientation = config.orientation || 'horizontal';
+    const variant = config.variant || 'full-width';
+    const thickness = config.thickness || 1;
+    const horizontal = orientation === 'horizontal';
+    ORIENTATIONS.forEach(name => element.classList.toggle(`${base}--${name}`, name === orientation));
+    VARIANTS.forEach(name => element.classList.toggle(`${base}--${name}`, name === variant));
+    if (horizontal)
+        element.removeAttribute('aria-orientation');
+    else
+        element.setAttribute('aria-orientation', 'vertical');
+    const style = element.style;
+    style.marginLeft = style.marginRight = style.marginTop = style.marginBottom = '';
+    style.marginInlineStart = style.marginInlineEnd = style.marginBlockStart = style.marginBlockEnd = '';
+    const cross = horizontal ? 'height' : 'width';
+    const main = horizontal ? 'width' : 'height';
+    style[cross] = `${thickness}px`;
+    style[main] = '100%';
+    if (variant !== 'full-width') {
+        const insetStart = config.insetStart !== undefined ? config.insetStart : DEFAULT_INSET;
+        const insetEnd = config.insetEnd !== undefined
+            ? config.insetEnd
+            : (variant === 'middle-inset' ? DEFAULT_INSET : 0);
+        style[horizontal ? 'marginInlineStart' : 'marginBlockStart'] = `${insetStart}px`;
+        style[horizontal ? 'marginInlineEnd' : 'marginBlockEnd'] = `${insetEnd}px`;
+        style[main] = 'auto';
+    }
+};
+export const withOrientation = (config) => (component) => {
+    applyLayout(component, config);
+    return {
+        ...component,
+        getOrientation() {
+            return config.orientation || 'horizontal';
+        },
+        setOrientation(newOrientation) {
+            config.orientation = newOrientation;
+            applyLayout(component, config);
+            return this;
+        }
+    };
+};
+export const withInset = (config) => (component) => ({
+    ...component,
+    getVariant() {
+        return config.variant || 'full-width';
+    },
+    setVariant(newVariant) {
+        config.variant = newVariant;
+        applyLayout(component, config);
+        return this;
+    },
+    setInset(insetStart, insetEnd) {
+        if (insetStart !== undefined)
+            config.insetStart = insetStart;
+        if (insetEnd !== undefined)
+            config.insetEnd = insetEnd;
+        applyLayout(component, config);
+        return this;
+    }
+});
+export const withStyle = (config) => (component) => {
+    if (config.color) {
+        component.element.style.backgroundColor = config.color;
+    }
+    return {
+        ...component,
+        setThickness(newThickness) {
+            config.thickness = newThickness;
+            applyLayout(component, config);
+            return this;
+        },
+        setColor(color) {
+            component.element.style.backgroundColor = color;
+            return this;
+        }
+    };
+};

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

@@ -0,0 +1,33 @@
+/**
+ * @module Divider
+ *
+ * The Divider component provides horizontal or vertical lines that separate content into distinct sections.
+ * Dividers follow Material Design 3 guidelines for separating content in lists, layouts, and other UI containers.
+ *
+ * Features:
+ * - Horizontal and vertical orientations
+ * - Multiple inset variants (full-width, inset, middle-inset)
+ * - Customizable thickness and color
+ * - Responsive to parent container
+ *
+ * @example
+ * ```typescript
+ * // Create a standard horizontal divider
+ * const divider = createDivider();
+ * document.body.appendChild(divider.element);
+ *
+ * // Create a vertical divider with custom styles
+ * const verticalDivider = createDivider({
+ *   orientation: 'vertical',
+ *   thickness: 2,
+ *   color: '#2196F3',
+ *   variant: 'middle-inset'
+ * });
+ * ```
+ *
+ * @category Components
+ */
+import { createDivider } from "./divider.js";
+export { createDivider, createDivider as default };
+export type { DividerConfig } from "./config.js";
+export type { DividerComponent } from "./types.js";

package/dist/components/divider/index.js

@@ -0,0 +1,2 @@
+import { createDivider } from "./divider.js";
+export { createDivider, createDivider as default };

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

@@ -0,0 +1,142 @@
+import { BaseComponent, ElementComponent } from "../../core/compose/index.js";
+/**
+ * The three slices of a divider, one per enhancer in features.ts.
+ *
+ * Each is its own interface rather than a Pick of DividerComponent: an indexed
+ * access binds `this` to the type being indexed, so a setter reached through a
+ * Pick reports the whole DividerComponent instead of the component it was
+ * called on -- which is the defect these setters used to paper over with
+ * `return this as unknown as DividerComponent`.
+ */
+export interface DividerOrientation {
+    /**
+     * Gets current orientation of the divider
+     *
+     * @returns Current orientation ('horizontal' or 'vertical')
+     *
+     * @example
+     * ```typescript
+     * const divider = createDivider();
+     * const orientation = divider.getOrientation(); // Returns 'horizontal' by default
+     * ```
+     */
+    getOrientation(): 'horizontal' | 'vertical';
+    /**
+     * Sets orientation of the divider
+     *
+     * Changes the divider's orientation between horizontal (default) and vertical.
+     * This affects the divider's positioning, dimension constraints, and how insets are applied.
+     *
+     * @param orientation - New orientation ('horizontal' or 'vertical')
+     * @returns DividerComponent instance for chaining
+     *
+     * @example
+     * ```typescript
+     * // Change a divider from horizontal to vertical
+     * divider.setOrientation('vertical');
+     * ```
+     */
+    setOrientation(orientation: 'horizontal' | 'vertical'): this;
+}
+/** The inset slice. See DividerOrientation for why these are split. */
+export interface DividerInset {
+    /**
+     * Gets current variant of the divider
+     *
+     * @returns Current variant ('full-width', 'inset', or 'middle-inset')
+     *
+     * @example
+     * ```typescript
+     * const variant = divider.getVariant(); // Returns 'full-width' by default
+     * ```
+     */
+    getVariant(): 'full-width' | 'inset' | 'middle-inset';
+    /**
+     * Sets variant of the divider
+     *
+     * Changes how the divider is inset within its container:
+     * - 'full-width': Spans the entire width/height of the container (default)
+     * - 'inset': Adds space at the start (left for horizontal, top for vertical)
+     * - 'middle-inset': Adds space at both start and end
+     *
+     * @param variant - New variant
+     * @returns DividerComponent instance for chaining
+     *
+     * @example
+     * ```typescript
+     * // Create a list divider with left inset
+     * divider.setVariant('inset');
+     *
+     * // Create a divider with space on both sides
+     * divider.setVariant('middle-inset');
+     * ```
+     */
+    setVariant(variant: 'full-width' | 'inset' | 'middle-inset'): this;
+    /**
+     * Sets custom inset values for the divider
+     *
+     * Allows fine-grained control over inset spacing, overriding the default values
+     * applied by the variant. Only applies if variant is 'inset' or 'middle-inset'.
+     *
+     * @param insetStart - Start inset value in pixels (left for horizontal, top for vertical)
+     * @param insetEnd - End inset value in pixels (right for horizontal, bottom for vertical)
+     * @returns DividerComponent instance for chaining
+     *
+     * @example
+     * ```typescript
+     * // Create a divider with custom insets
+     * const divider = createDivider({ variant: 'inset' });
+     * divider.setInset(24, 8); // 24px from start, 8px from end
+     * ```
+     */
+    setInset(insetStart?: number, insetEnd?: number): this;
+}
+/** The style slice. See DividerOrientation for why these are split. */
+export interface DividerStyle {
+    /**
+     * Sets thickness of the divider
+     *
+     * Changes the divider's thickness (height for horizontal, width for vertical).
+     * The default thickness is 1px, following Material Design 3 guidelines.
+     *
+     * @param thickness - Thickness in pixels
+     * @returns DividerComponent instance for chaining
+     *
+     * @example
+     * ```typescript
+     * // Create a bold divider
+     * divider.setThickness(2);
+     * ```
+     */
+    setThickness(thickness: number): this;
+    /**
+     * Sets custom color for the divider
+     *
+     * By default, dividers use the 'outline-variant' color from the theme.
+     * This method allows setting a custom color via any valid CSS color value.
+     *
+     * @param color - CSS color value (hex, rgb, rgba, hsl, etc.)
+     * @returns DividerComponent instance for chaining
+     *
+     * @example
+     * ```typescript
+     * // Create a blue divider
+     * divider.setColor('#2196F3');
+     *
+     * // Create a semi-transparent divider
+     * divider.setColor('rgba(0, 0, 0, 0.12)');
+     * ```
+     */
+    setColor(color: string): this;
+}
+/**
+ * Divider component interface
+ *
+ * Represents a Material Design 3 divider that separates content into distinct
+ * sections. Provides methods for configuring the appearance, orientation, and
+ * inset behavior.
+ *
+ * @category Components
+ */
+export interface DividerComponent extends BaseComponent, ElementComponent, DividerOrientation, DividerInset, DividerStyle {
+}

package/dist/components/divider/types.js

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

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

@@ -0,0 +1,55 @@
+import type { DrawerComponent, DrawerItemConfig } from "./types.js";
+import type { EventCallback } from "../../core/state/emitter.js";
+/**
+ * API configuration options for drawer component
+ * @category Components
+ * @internal
+ */
+interface ApiOptions {
+    state: {
+        open: () => void;
+        close: () => void;
+        toggle: () => void;
+        isOpen: () => boolean;
+    };
+    items: {
+        setActive: (id: string) => void;
+        getActive: () => string | null;
+        setItems: (items: DrawerItemConfig[] | undefined) => void;
+        getItems: () => DrawerItemConfig[] | undefined;
+        setBadge: (id: string, badge: string) => void;
+    };
+    headline: {
+        setHeadline: (text: string) => void;
+        getHeadline: () => string;
+    };
+    lifecycle: {
+        destroy: () => void;
+    };
+}
+/**
+ * Component with required elements and methods for API enhancement
+ * @category Components
+ * @internal
+ */
+interface ComponentWithElements {
+    element: HTMLElement;
+    getClass: (name: string) => string;
+    on?: (event: string, handler: EventCallback) => unknown;
+    off?: (event: string, handler: EventCallback) => unknown;
+    addClass?: (...classes: string[]) => unknown;
+}
+/**
+ * Enhances a drawer component with public API methods.
+ * This follows the higher-order function pattern to add public API methods
+ * to the component, making them available to the end user.
+ *
+ * All methods that modify the component return the component for chaining.
+ *
+ * @param {ApiOptions} options - API configuration options
+ * @returns {Function} Higher-order function that adds API methods to component
+ * @category Components
+ * @internal This is an internal utility for the Drawer component
+ */
+export declare const withAPI: ({ state, items, headline, lifecycle }: ApiOptions) => (component: ComponentWithElements) => DrawerComponent;
+export {};

package/dist/components/drawer/api.js

@@ -0,0 +1,76 @@
+import { addClass } from "../../core/index.js";
+export const withAPI = ({ state, items, headline, lifecycle }) => (component) => {
+    const drawerComponent = {
+        element: component.element,
+        getClass: component.getClass,
+        lifecycle,
+        on(event, handler) {
+            if (component.on) {
+                component.on(event, handler);
+            }
+            return drawerComponent;
+        },
+        off(event, handler) {
+            if (component.off) {
+                component.off(event, handler);
+            }
+            return drawerComponent;
+        },
+        addClass(...classes) {
+            if (component.addClass) {
+                component.addClass(...classes);
+            }
+            else {
+                addClass(component.element, ...classes);
+            }
+            return drawerComponent;
+        },
+        open() {
+            state.open();
+            return drawerComponent;
+        },
+        close() {
+            state.close();
+            return drawerComponent;
+        },
+        toggle() {
+            state.toggle();
+            return drawerComponent;
+        },
+        isOpen() {
+            return state.isOpen();
+        },
+        setActive(id) {
+            items.setActive(id);
+            return drawerComponent;
+        },
+        getValue() {
+            return items.getActive();
+        },
+        getActive() {
+            return items.getActive();
+        },
+        setItems(newItems) {
+            items.setItems(newItems);
+            return drawerComponent;
+        },
+        getItems() {
+            return (items.getItems() || []);
+        },
+        setBadge(id, badge) {
+            items.setBadge(id, badge);
+            return drawerComponent;
+        },
+        setHeadline(text) {
+            headline.setHeadline(text);
+            return drawerComponent;
+        },
+        getHeadline() {
+            return headline.getHeadline();
+        },
+        destroy() {
+            lifecycle.destroy();
+        },
+    };
+    return drawerComponent;
+};