mtrl 0.6.2 → 0.7.0

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/fab/index.d.ts

@@ -31,5 +31,5 @@
  *
  * @category Components
  */
-export { default, default as createFab } from './fab';
-export { FabConfig, FabComponent, FabVariant, FabSize, FabPosition } from './types';
+export { default, default as createFab } from "./fab";
+export { FabConfig, FabComponent, FabVariant, FabSize, FabPosition, } from "./types";

package/dist/components/index.d.ts

@@ -1,54 +1,12 @@
 /**
  * Component library exports
  *
- * This file re-exports all components and their associated types, constants,
- * and utilities from the mtrl library. Both named exports and default exports
- * are handled to provide a consistent public API while maintaining tree-shaking
- * compatibility.
+ * This file exports all component creators and their types.
+ * Constants are NOT re-exported here to enable proper tree-shaking.
+ * Import constants directly from component paths if needed.
  *
  * @packageDocumentation
  */
-export { LIST_DEFAULTS, LIST_TYPES, LIST_SELECTION_MODES, LIST_EVENTS, LIST_SCROLL_POSITIONS, LIST_CLASSES, } from "./list/constants";
-export type { ListConfig, ListComponent, SelectEvent as ListSelectEvent, // Rename to avoid collision
-LoadEvent, } from "./list/types";
-export { BUTTON_GROUP_VARIANTS, BUTTON_GROUP_ORIENTATIONS, BUTTON_GROUP_DENSITY, BUTTON_GROUP_EVENTS, BUTTON_GROUP_DEFAULTS, BUTTON_GROUP_CLASSES, BUTTON_GROUP_HEIGHTS, BUTTON_GROUP_RADII, } from "./button-group/constants";
-export type { ButtonGroupConfig, ButtonGroupComponent, ButtonGroupItemConfig, ButtonGroupEvent, ButtonGroupEventType, ButtonGroupVariant, ButtonGroupOrientation, ButtonGroupDensity, } from "./button-group/types";
-export { SELECT_VARIANTS, SELECT_PLACEMENT, SELECT_INTERACTION, SELECT_EVENTS, SELECT_ICONS, SELECT_DEFAULTS, SELECT_CLASSES, } from "./select/constants";
-export type { SelectConfig, SelectComponent, SelectOption, SelectEvent, // Keep the original name since select is more commonly used
-SelectChangeEvent, } from "./select/types";
-export * from "./badge";
-export * from "./bottom-app-bar";
-export * from "./button";
-export * from "./button-group";
-export * from "./card";
-export * from "./carousel";
-export * from "./checkbox";
-export * from "./chips";
-export * from "./datepicker";
-export * from "./dialog";
-export * from "./fab";
-export * from "./extended-fab";
-export * from "./icon-button";
-export * from "./menu";
-export * from "./navigation";
-export { PROGRESS_VARIANTS, PROGRESS_SHAPES, PROGRESS_EVENTS, PROGRESS_DEFAULTS, PROGRESS_CLASSES, PROGRESS_MEASUREMENTS, PROGRESS_THICKNESS, } from "./progress/constants";
-export type { ProgressConfig, ProgressComponent, ProgressShape, } from "./progress/types";
-export * from "./radios";
-export * from "./search";
-export * from "./segmented-button";
-export * from "./sheet";
-export * from "./slider";
-export * from "./snackbar";
-export * from "./switch";
-export * from "./tabs";
-export * from "./textfield";
-export * from "./timepicker";
-export * from "./top-app-bar";
-export * from "./tooltip";
-export { createDivider } from "./divider";
-export type { DividerConfig } from "./divider/config";
-export type { DividerComponent } from "./divider/types";
-export { createCardContent, createCardHeader, createCardActions, createCardMedia, } from "./card/content";
 export { default as createBadge } from "./badge";
 export { default as createBottomAppBar } from "./bottom-app-bar";
 export { default as createButton } from "./button";
@@ -59,13 +17,13 @@ export { default as createCheckbox } from "./checkbox";
 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";
@@ -82,3 +40,36 @@ export { default as createTextfield } from "./textfield";
 export { default as createTimePicker } from "./timepicker";
 export { default as createTopAppBar } from "./top-app-bar";
 export { default as createTooltip } from "./tooltip";
+export { createCardContent, createCardHeader, createCardActions, createCardMedia, } from "./card/content";
+export type { BadgeConfig, BadgeComponent } from "./badge/types";
+export type { BottomAppBarConfig, BottomAppBar } from "./bottom-app-bar/types";
+export type { ButtonConfig, ButtonComponent, ButtonVariant, } from "./button/types";
+export type { ButtonGroupConfig, ButtonGroupComponent, ButtonGroupItemConfig, ButtonGroupEvent, ButtonGroupEventType, ButtonGroupVariant, ButtonGroupOrientation, ButtonGroupDensity, } from "./button-group/types";
+export type { CardSchema } from "./card/types";
+export type { CarouselConfig, CarouselComponent } from "./carousel/types";
+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";
+export type { ExtendedFabConfig, ExtendedFabComponent, } from "./extended-fab/types";
+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 { ProgressConfig, ProgressComponent, ProgressShape, } from "./progress/types";
+export type { RadiosConfig, RadiosComponent, RadioOptionConfig, } from "./radios/types";
+export type { SearchConfig, SearchComponent } from "./search/types";
+export type { SelectConfig, SelectComponent, SelectOption, SelectEvent, SelectChangeEvent, } from "./select/types";
+export type { SegmentedButtonConfig, SegmentedButtonComponent, } from "./segmented-button/types";
+export type { SheetConfig, SheetComponent } from "./sheet/types";
+export type { SliderConfig, SliderComponent, SliderEvent, } from "./slider/types";
+export type { SnackbarConfig, SnackbarComponent } from "./snackbar/types";
+export type { SwitchConfig, SwitchComponent } from "./switch/types";
+export type { TabsConfig, TabsComponent, TabConfig, TabComponent, } from "./tabs/types";
+export type { TextfieldConfig, TextfieldComponent } from "./textfield/types";
+export type { TimePickerConfig, TimePickerComponent } from "./timepicker/types";
+export type { TopAppBarConfig, TopAppBar } from "./top-app-bar/types";
+export type { TooltipConfig, TooltipComponent } from "./tooltip/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
      */

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

@@ -1,3 +1,2 @@
-export { default } from './progress';
-export { ProgressConfig, ProgressComponent, ProgressShape } from './types';
-export { PROGRESS_VARIANTS, PROGRESS_SHAPES, PROGRESS_EVENTS, PROGRESS_DEFAULTS, PROGRESS_CLASSES, PROGRESS_MEASUREMENTS, PROGRESS_THICKNESS } from './constants';
+export { default } from "./progress";
+export { ProgressConfig, ProgressComponent, ProgressShape } from "./types";

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

@@ -239,6 +239,14 @@ export interface ProgressComponent {
      * @returns Current size in pixels, or undefined for linear variant
      */
     getSize: () => number | undefined;
+    /**
+     * Returns a Promise that resolves after the current canvas state
+     * has been painted to screen. Useful when you need to ensure a
+     * value change (e.g. 100%) is visually rendered before proceeding.
+     *
+     * @returns Promise that resolves after the next paint
+     */
+    painted: () => Promise<void>;
     /**
      * Adds an event listener to the progress
      * @param event - Event name ('change', 'complete')

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

@@ -1,3 +1,2 @@
 export { default } from "./search";
 export type { SearchConfig, SearchComponent, SearchEvent, SearchState, SearchViewMode, SearchEventType, SearchSuggestion, SearchTrailingItem, } from "./types";
-export { SEARCH_STATES, SEARCH_VIEW_MODES, SEARCH_EVENTS, SEARCH_ICONS, SEARCH_DEFAULTS, SEARCH_CLASSES, SEARCH_MEASUREMENTS, SEARCH_KEYS, } from "./constants";

package/dist/components/segmented-button/index.d.ts

@@ -1,4 +1,3 @@
-export { default, default as createSegmentedButton } from './segmented-button';
-export { SelectionMode, Density } from './types';
-export type { SegmentedButtonConfig, SegmentedButtonComponent, SegmentConfig, Segment } from './types';
-export { SEGMENTED_BUTTON_MODES, SEGMENTED_BUTTON_DENSITY, SEGMENTED_BUTTON_EVENTS, SEGMENTED_BUTTON_DEFAULTS, SEGMENTED_BUTTON_ICONS, SEGMENTED_BUTTON_CLASSES } from './constants';
+export { default, default as createSegmentedButton } from "./segmented-button";
+export { SelectionMode, Density } from "./types";
+export type { SegmentedButtonConfig, SegmentedButtonComponent, SegmentConfig, Segment, } from "./types";

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

@@ -1,3 +1,2 @@
-export { default } from './slider';
-export { SLIDER_COLORS, SLIDER_SIZES, SLIDER_EVENTS, SLIDER_POSITIONS, SLIDER_DEFAULTS, SLIDER_CLASSES } from './constants';
-export { type SliderConfig, type SliderComponent, type SliderEvent } from './types';
+export { default } from "./slider";
+export { type SliderConfig, type SliderComponent, type SliderEvent, } from "./types";

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

@@ -1,3 +1,2 @@
-export { default } from './snackbar';
-export { SNACKBAR_VARIANTS, SNACKBAR_POSITIONS, SNACKBAR_STATES, SNACKBAR_EVENTS, SNACKBAR_DEFAULTS, SNACKBAR_CLASSES } from './constants';
-export { SnackbarConfig, SnackbarComponent } from './types';
+export { default } from "./snackbar";
+export { SnackbarConfig, SnackbarComponent } from "./types";

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

@@ -1,3 +1,2 @@
 export { default } from "./textfield";
-export { TEXTFIELD_VARIANTS, TEXTFIELD_STATES, TEXTFIELD_TYPES, TEXTFIELD_EVENTS, TEXTFIELD_DEFAULTS, TEXTFIELD_CLASSES, TEXTFIELD_DENSITY, } from "./constants";
 export { TextfieldConfig, TextfieldComponent, TextfieldDensity } from "./types";