mtrl 0.6.3 → 0.7.0

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

@@ -0,0 +1,54 @@
+import { DrawerComponent, DrawerItemConfig } from './types';
+/**
+ * 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: Function) => ComponentWithElements;
+    off?: (event: string, handler: Function) => ComponentWithElements;
+    addClass?: (...classes: string[]) => ComponentWithElements;
+}
+/**
+ * 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/config.d.ts

@@ -0,0 +1,106 @@
+import { DrawerConfig } from "./types";
+/**
+ * Default configuration for the Drawer component.
+ * These values will be used when not explicitly specified by the user.
+ *
+ * @category Components
+ */
+export declare const defaultConfig: DrawerConfig;
+/**
+ * Creates the base configuration for the Drawer component by merging
+ * user-provided config with default values. Global configuration is
+ * automatically applied by createComponentConfig.
+ *
+ * @param {DrawerConfig} config - User provided configuration
+ * @returns {DrawerConfig} Complete configuration with defaults applied
+ * @category Components
+ * @internal
+ */
+export declare const createBaseConfig: (config?: DrawerConfig) => DrawerConfig;
+/**
+ * Generates element configuration for the Drawer component.
+ * This function creates the necessary attributes and configuration
+ * for the DOM element creation process.
+ *
+ * @param {DrawerConfig} config - Drawer configuration
+ * @returns {Object} Element configuration object for withElement
+ * @category Components
+ * @internal
+ */
+export declare const getElementConfig: (config: DrawerConfig) => {
+    tag: string;
+    componentName: string;
+    attributes: Record<string, any>;
+    className: string[];
+    rawClass: string | string[];
+    id: string;
+    name: string;
+    title: string;
+    tabIndex: number;
+    style: string | Partial<CSSStyleDeclaration>;
+    data: Record<string, string>;
+    role: string;
+    ariaLabel: string;
+    ariaDescribedBy: string;
+    ariaLabelledBy: string;
+    ariaHidden: boolean;
+    html: string;
+    text: string;
+    forwardEvents: Record<string, boolean | ((component: any, event: Event) => boolean)>;
+    interactive: boolean;
+};
+/**
+ * Creates API configuration for the Drawer component.
+ * This connects the core component features (state, items, headline)
+ * to the public API methods exposed to users.
+ *
+ * @param {Object} comp - Component with all features applied
+ * @returns {Object} API configuration object
+ * @category Components
+ * @internal
+ */
+export declare const getApiConfig: (comp: {
+    drawerState: {
+        open: () => void;
+        close: () => void;
+        toggle: () => void;
+        isOpen: () => boolean;
+    };
+    drawerItems: {
+        setActive: (id: string) => void;
+        getActive: () => string | null;
+        setItems: (items: DrawerConfig["items"]) => void;
+        getItems: () => DrawerConfig["items"];
+        setBadge: (id: string, badge: string) => void;
+    };
+    drawerHeadline: {
+        setHeadline: (text: string) => void;
+        getHeadline: () => string;
+    };
+    lifecycle: {
+        destroy: () => void;
+    };
+    _stateCleanup?: () => void;
+}) => {
+    state: {
+        open: () => void;
+        close: () => void;
+        toggle: () => void;
+        isOpen: () => boolean;
+    };
+    items: {
+        setActive: (id: string) => void;
+        getActive: () => string;
+        setItems: (items: DrawerConfig["items"]) => void;
+        getItems: () => import("./types").DrawerItemConfig[];
+        setBadge: (id: string, badge: string) => void;
+    };
+    headline: {
+        setHeadline: (text: string) => void;
+        getHeadline: () => string;
+    };
+    lifecycle: {
+        destroy: () => void;
+    };
+};
+export default defaultConfig;

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

@@ -0,0 +1,97 @@
+/**
+ * Drawer variants matching MD3 navigation drawer specification
+ */
+export declare const DRAWER_VARIANTS: {
+    /** Standard drawer — inline, can be permanently visible or toggled */
+    readonly STANDARD: "standard";
+    /** Modal drawer — overlays content with scrim, for compact/medium screens */
+    readonly MODAL: "modal";
+};
+/**
+ * Drawer positions (anchor edge)
+ */
+export declare const DRAWER_POSITIONS: {
+    /** Start edge (left in LTR, right in RTL) — default per MD3 */
+    readonly START: "start";
+    /** End edge (right in LTR, left in RTL) */
+    readonly END: "end";
+};
+/**
+ * Drawer item types for the items configuration array
+ */
+export declare const DRAWER_ITEM_TYPES: {
+    /** Navigation destination item */
+    readonly ITEM: "item";
+    /** Visual separator between groups */
+    readonly DIVIDER: "divider";
+    /** Section label / subhead for grouping */
+    readonly SECTION: "section";
+};
+/**
+ * Drawer events
+ */
+export declare const DRAWER_EVENTS: {
+    /** Fired when the drawer opens */
+    readonly OPEN: "open";
+    /** Fired when the drawer closes */
+    readonly CLOSE: "close";
+    /** Fired when a navigation item is selected */
+    readonly SELECT: "select";
+};
+/**
+ * CSS classes used by the drawer component
+ */
+export declare const DRAWER_CLASSES: {
+    /** Root container */
+    readonly ROOT: "drawer";
+    /** Scrim overlay (modal variant only) */
+    readonly SCRIM: "drawer__scrim";
+    /** Inner sheet / panel */
+    readonly SHEET: "drawer__sheet";
+    /** Headline text */
+    readonly HEADLINE: "drawer__headline";
+    /** Scrollable items container */
+    readonly ITEMS: "drawer__items";
+    /** Single navigation item */
+    readonly ITEM: "drawer__item";
+    /** Item icon */
+    readonly ITEM_ICON: "drawer__item-icon";
+    /** Item label text */
+    readonly ITEM_LABEL: "drawer__item-label";
+    /** Item badge */
+    readonly ITEM_BADGE: "drawer__item-badge";
+    /** Active indicator shape */
+    readonly ACTIVE_INDICATOR: "drawer__active-indicator";
+    /** Dense/compact variant */
+    readonly DENSE: "drawer--dense";
+    /** Divider separator */
+    readonly DIVIDER: "drawer__divider";
+    /** Section label */
+    readonly SECTION_LABEL: "drawer__section-label";
+};
+/**
+ * Default animation configuration
+ */
+export declare const DRAWER_ANIMATION: {
+    /** Animation duration in milliseconds */
+    readonly DURATION: 300;
+    /** Easing for opening */
+    readonly EASING_OPEN: "cubic-bezier(0.0, 0.0, 0.2, 1.0)";
+    /** Easing for closing */
+    readonly EASING_CLOSE: "cubic-bezier(0.3, 0.0, 1.0, 1.0)";
+};
+/**
+ * Drawer default values
+ */
+export declare const DRAWER_DEFAULTS: {
+    /** Default variant */
+    readonly VARIANT: "standard";
+    /** Default position */
+    readonly POSITION: "start";
+    /** Whether drawer is open by default */
+    readonly OPEN: false;
+    /** Whether modal can be dismissed via scrim */
+    readonly DISMISSIBLE: true;
+    /** Default drawer width in pixels */
+    readonly WIDTH: 360;
+};

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

@@ -0,0 +1,59 @@
+import { DrawerConfig } from "./types";
+/**
+ * Creates a new Drawer component with the specified configuration.
+ *
+ * The Drawer component implements Material Design 3 navigation drawer with
+ * support for standard (inline) and modal (overlay) variants. It provides
+ * navigation destinations with icons, labels, badges, dividers, and section
+ * labels following the MD3 specification.
+ *
+ * The Drawer component is created using a functional composition pattern,
+ * applying various features through the pipe function.
+ *
+ * @param {DrawerConfig} config - Configuration options for the drawer
+ *  This can include variant, items, headline, position, open state,
+ *  and other drawer properties. See {@link DrawerConfig} for available options.
+ *
+ * @returns {DrawerComponent} A fully configured drawer component instance with
+ *  all requested features applied. The returned component has methods for
+ *  state management, item selection, and lifecycle management.
+ *
+ * @throws {Error} Throws an error if drawer creation fails for any reason
+ *
+ * @example
+ * ```ts
+ * // Create a standard navigation drawer
+ * const drawer = createDrawer({
+ *   variant: 'standard',
+ *   headline: 'Mail',
+ *   open: true,
+ *   items: [
+ *     { id: 'inbox', label: 'Inbox', icon: '<svg>...</svg>', badge: '24', active: true },
+ *     { id: 'outbox', label: 'Outbox', icon: '<svg>...</svg>' },
+ *     { type: 'divider' },
+ *     { type: 'section', label: 'Labels' },
+ *     { id: 'family', label: 'Family', icon: '<svg>...</svg>' },
+ *   ],
+ *   onSelect: (event) => console.log('Selected:', event.id),
+ * });
+ *
+ * document.body.appendChild(drawer.element);
+ *
+ * // Create a modal drawer
+ * const modalDrawer = createDrawer({
+ *   variant: 'modal',
+ *   headline: 'Navigation',
+ *   items: [
+ *     { id: 'home', label: 'Home', icon: '<svg>...</svg>', active: true },
+ *     { id: 'settings', label: 'Settings', icon: '<svg>...</svg>' },
+ *   ],
+ * });
+ *
+ * document.body.appendChild(modalDrawer.element);
+ * modalDrawer.open();
+ * ```
+ *
+ * @category Components
+ */
+declare const createDrawer: (config?: DrawerConfig) => any;
+export default createDrawer;

package/dist/components/drawer/features/headline.d.ts

@@ -0,0 +1,17 @@
+import { DrawerConfig } from "../types";
+/**
+ * Component shape expected by withHeadline
+ */
+interface HeadlineBaseComponent {
+    element: HTMLElement;
+    getClass: (name: string) => string;
+    [key: string]: unknown;
+}
+/**
+ * Adds headline management to the drawer component
+ *
+ * @param config - Drawer configuration
+ * @returns Component enhancer function
+ */
+export declare const withHeadline: (config: DrawerConfig) => (component: HeadlineBaseComponent) => HeadlineBaseComponent;
+export {};

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

@@ -0,0 +1,3 @@
+export { withItems } from "./items";
+export { withState } from "./state";
+export { withHeadline } from "./headline";

package/dist/components/drawer/features/items.d.ts

@@ -0,0 +1,18 @@
+import { DrawerConfig } from "../types";
+/**
+ * Component shape expected by withItems
+ */
+interface ItemsBaseComponent {
+    element: HTMLElement;
+    getClass: (name: string) => string;
+    emit: (event: string, data?: unknown) => void;
+    [key: string]: unknown;
+}
+/**
+ * Adds item management functionality to the drawer component
+ *
+ * @param config - Drawer configuration
+ * @returns Component enhancer function
+ */
+export declare const withItems: (config: DrawerConfig) => (component: ItemsBaseComponent) => ItemsBaseComponent;
+export {};

package/dist/components/drawer/features/state.d.ts

@@ -0,0 +1,18 @@
+import { DrawerConfig } from "../types";
+/**
+ * Component shape expected by withState
+ */
+interface StateBaseComponent {
+    element: HTMLElement;
+    getClass: (name: string) => string;
+    emit: (event: string, data?: unknown) => void;
+    [key: string]: unknown;
+}
+/**
+ * Adds open/close state management, scrim, and keyboard dismiss to the drawer
+ *
+ * @param config - Drawer configuration
+ * @returns Component enhancer function
+ */
+export declare const withState: (config: DrawerConfig) => (component: StateBaseComponent) => StateBaseComponent;
+export {};

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

@@ -0,0 +1,6 @@
+/**
+ * Drawer component module
+ * @module components/drawer
+ */
+export { default } from './drawer';
+export type { DrawerConfig, DrawerComponent, DrawerVariant, DrawerPosition, DrawerItemConfig, DrawerSelectEvent, } from './types';

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

@@ -0,0 +1,233 @@
+import { BaseComponentConfig } from "../../core/config/component";
+/**
+ * Drawer variant type — controls layout behavior
+ * @category Components
+ * @remarks
+ * - standard: Inline drawer, can be permanently visible or toggled. Best for expanded+ window sizes.
+ * - modal: Overlay drawer with scrim. Best for compact/medium window sizes.
+ */
+export type DrawerVariant = "standard" | "modal";
+/**
+ * Drawer position — which edge the drawer anchors to
+ * @category Components
+ */
+export type DrawerPosition = "start" | "end";
+/**
+ * Configuration for a navigation destination item
+ * @category Components
+ */
+export interface DrawerItemConfig {
+    /** Item type — defaults to 'item' if omitted */
+    type?: "item" | "divider" | "section";
+    /** Unique identifier for the item */
+    id?: string;
+    /** Destination label text */
+    label?: string;
+    /** Icon HTML content (placed before label) */
+    icon?: string;
+    /** Badge text (e.g. unread count) */
+    badge?: string;
+    /** Whether this item is initially active/selected */
+    active?: boolean;
+    /** Section label text (only when type is 'section') */
+    sectionLabel?: string;
+    /** Whether the item is disabled */
+    disabled?: boolean;
+}
+/**
+ * Event detail emitted when a drawer item is selected
+ * @category Components
+ */
+export interface DrawerSelectEvent {
+    /** The selected item's id */
+    id: string;
+    /** The selected item's label */
+    label: string;
+    /** The selected item's index within navigation items (excludes dividers/sections) */
+    index: number;
+    /** The underlying DOM event */
+    originalEvent: Event;
+}
+/**
+ * Configuration interface for the Drawer component
+ * @category Components
+ */
+export interface DrawerConfig extends BaseComponentConfig {
+    /**
+     * Drawer variant that determines layout behavior
+     * @default 'standard'
+     */
+    variant?: DrawerVariant | string;
+    /**
+     * Drawer anchor position
+     * @default 'start'
+     */
+    position?: DrawerPosition | string;
+    /**
+     * Whether the drawer is initially open
+     * @default false
+     */
+    open?: boolean;
+    /**
+     * Whether the modal drawer can be dismissed by clicking the scrim
+     * @default true
+     */
+    dismissible?: boolean;
+    /**
+     * Optional headline text displayed at the top of the drawer
+     * @example 'Mail'
+     */
+    headline?: string;
+    /**
+     * Navigation items configuration array.
+     * Supports destination items, dividers, and section labels.
+     * @example
+     * [
+     *   { id: 'inbox', label: 'Inbox', icon: '<svg>...</svg>', badge: '24', active: true },
+     *   { type: 'divider' },
+     *   { type: 'section', label: 'Labels' },
+     *   { id: 'family', label: 'Family', icon: '<svg>...</svg>' },
+     * ]
+     */
+    items?: DrawerItemConfig[];
+    /**
+     * Drawer width as a CSS value
+     * @default '360px'
+     */
+    width?: string | number;
+    /**
+     * When true, renders a compact drawer with smaller items and tighter spacing.
+     * Useful in dense UIs like admin panels where the standard 56px item height
+     * is too large.
+     * @default false
+     */
+    dense?: boolean;
+    /**
+     * Additional CSS classes to add to the drawer
+     */
+    class?: string;
+    /**
+     * Component prefix for class names
+     * @default 'mtrl'
+     */
+    prefix?: string;
+    /**
+     * Component name used in class generation
+     */
+    componentName?: string;
+    /**
+     * Callback when a navigation item is selected
+     */
+    onSelect?: (event: DrawerSelectEvent) => void;
+    /**
+     * Callback when the drawer opens
+     */
+    onOpen?: () => void;
+    /**
+     * Callback when the drawer closes
+     */
+    onClose?: () => void;
+}
+/**
+ * Drawer component interface — public API
+ * @category Components
+ */
+export interface DrawerComponent {
+    /** The drawer's root DOM element */
+    element: HTMLElement;
+    /**
+     * Gets a class name with the component's prefix
+     * @param name - Base class name
+     * @returns Prefixed class name
+     */
+    getClass: (name: string) => string;
+    /**
+     * Opens the drawer
+     * @returns The drawer component for chaining
+     */
+    open: () => DrawerComponent;
+    /**
+     * Closes the drawer
+     * @returns The drawer component for chaining
+     */
+    close: () => DrawerComponent;
+    /**
+     * Toggles the drawer open/closed state
+     * @returns The drawer component for chaining
+     */
+    toggle: () => DrawerComponent;
+    /**
+     * Checks if the drawer is currently open
+     * @returns True if the drawer is open
+     */
+    isOpen: () => boolean;
+    /**
+     * Sets the active navigation item by id
+     * @param id - Item id to activate
+     * @returns The drawer component for chaining
+     */
+    setActive: (id: string) => DrawerComponent;
+    /**
+     * Gets the currently active item id
+     * @returns Active item id or null
+     */
+    getActive: () => string | null;
+    /**
+     * Sets the headline text
+     * @param text - Headline text
+     * @returns The drawer component for chaining
+     */
+    setHeadline: (text: string) => DrawerComponent;
+    /**
+     * Gets the headline text
+     * @returns Headline text
+     */
+    getHeadline: () => string;
+    /**
+     * Sets the navigation items
+     * @param items - Array of item configurations
+     * @returns The drawer component for chaining
+     */
+    setItems: (items: DrawerItemConfig[]) => DrawerComponent;
+    /**
+     * Gets the current items configuration
+     * @returns Array of item configurations
+     */
+    getItems: () => DrawerItemConfig[];
+    /**
+     * Sets a badge on a specific item
+     * @param id - Item id
+     * @param badge - Badge text or empty string to remove
+     * @returns The drawer component for chaining
+     */
+    setBadge: (id: string, badge: string) => DrawerComponent;
+    /**
+     * Adds an event listener
+     * @param event - Event name ('select', 'open', 'close')
+     * @param handler - Event handler function
+     * @returns The drawer component for chaining
+     */
+    on: (event: string, handler: Function) => DrawerComponent;
+    /**
+     * Removes an event listener
+     * @param event - Event name
+     * @param handler - Event handler function
+     * @returns The drawer component for chaining
+     */
+    off: (event: string, handler: Function) => DrawerComponent;
+    /**
+     * Adds CSS classes to the drawer element
+     * @param classes - One or more class names to add
+     * @returns The drawer component for chaining
+     */
+    addClass: (...classes: string[]) => DrawerComponent;
+    /**
+     * Destroys the drawer component and cleans up resources
+     */
+    destroy: () => void;
+    /** API for managing component lifecycle */
+    lifecycle: {
+        /** Destroys the component and cleans up resources */
+        destroy: () => void;
+    };
+}

package/dist/components/index.d.ts

@@ -18,13 +18,12 @@ export { createChip, createChips } from "./chips";
 export { default as createDatePicker } from "./datepicker";
 export { default as createDialog } from "./dialog";
 export { createDivider } from "./divider";
+export { default as createDrawer } from "./drawer";
 export { default as createFab } from "./fab";
 export { default as createExtendedFab } from "./extended-fab";
 export { default as createIconButton } from "./icon-button";
 export { default as createList } from "./list";
 export { default as createMenu } from "./menu";
-export { default as createNavigation } from "./navigation";
-export { default as createNavigationSystem } from "./navigation/system";
 export { default as createProgress } from "./progress";
 export { default as createRadios } from "./radios";
 export { default as createSearch } from "./search";
@@ -52,6 +51,7 @@ export type { CheckboxConfig, CheckboxComponent } from "./checkbox/types";
 export type { ChipConfig, ChipComponent, ChipVariant, ChipsConfig, ChipsComponent, } from "./chips/types";
 export type { DatePickerConfig, DatePickerComponent } from "./datepicker/types";
 export type { DialogConfig, DialogComponent } from "./dialog/types";
+export type { DrawerConfig, DrawerComponent, DrawerVariant, DrawerPosition, DrawerItemConfig, DrawerSelectEvent, } from "./drawer/types";
 export type { DividerConfig } from "./divider/config";
 export type { DividerComponent } from "./divider/types";
 export type { FabConfig, FabComponent } from "./fab/types";
@@ -59,7 +59,6 @@ export type { ExtendedFabConfig, ExtendedFabComponent, } from "./extended-fab/ty
 export type { IconButtonConfig, IconButtonComponent, } from "./icon-button/types";
 export type { ListConfig, ListComponent, SelectEvent as ListSelectEvent, LoadEvent, } from "./list/types";
 export type { MenuConfig, MenuComponent, MenuItem } from "./menu/types";
-export type { NavigationConfig, NavigationComponent, NavItemConfig, } from "./navigation/types";
 export type { ProgressConfig, ProgressComponent, ProgressShape, } from "./progress/types";
 export type { RadiosConfig, RadiosComponent, RadioOptionConfig, } from "./radios/types";
 export type { SearchConfig, SearchComponent } from "./search/types";

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

@@ -103,4 +103,6 @@ export declare const MENU_CLASSES: {
     readonly ITEM_SHORTCUT: "menu__item-shortcut";
     /** Submenu indicator */
     readonly SUBMENU_INDICATOR: "menu__submenu-indicator";
+    /** Dense/compact variant */
+    readonly DENSE: "menu--dense";
 };

package/dist/components/menu/features/opener.d.ts

@@ -1,4 +1,4 @@
-import { MenuConfig } from '../types';
+import { MenuConfig } from "../types";
 /**
  * Adds opener functionality to menu component
  * Manages the relationship between menu and its opener element

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

@@ -181,6 +181,20 @@ export interface MenuConfig {
      * Use this when the menu needs to stay within a specific container (e.g., inside a dialog)
      */
     container?: HTMLElement | null;
+    /**
+     * When true, the opener is used only for positioning.
+     * No click, blur, or keyboard handlers are attached to the opener element.
+     * The consumer is responsible for calling open() / close() manually.
+     * @default false
+     */
+    manualOpen?: boolean;
+    /**
+     * When true, renders a compact menu with smaller items and tighter spacing.
+     * Useful in dense UIs like toolbars and action bars where the standard
+     * 48px item height is too large.
+     * @default false
+     */
+    dense?: boolean;
     /**
      * Additional CSS classes to add to the menu
      */