mtrl 0.2.7 → 0.2.9

package/index.ts

@@ -18,6 +18,7 @@ import {
   createList,
   createMenu,
   createNavigation,
+  createNavigationSystem,
   createProgress,
   createRadios,
   createSearch,
@@ -51,6 +52,7 @@ export {
   createList,
   createMenu,
   createNavigation,
+  createNavigationSystem,
   createProgress,
   createRadios,
   createSearch,

package/package.json

@@ -1,7 +1,9 @@
 {
   "name": "mtrl",
-  "version": "0.2.7",
+  "version": "0.2.9",
   "description": "A functional TypeScript/JavaScript component library with composable architecture based on Material Design 3",
+  "author": "floor",
+  "license": "MIT License",
   "keywords": [
     "component",
     "library",
@@ -13,8 +15,18 @@
     "material design 3",
     "md3"
   ],
+  "type": "module",
   "main": "index.js",
   "scripts": {
+    "start": "bun run server.js",
+    "dev": "bun --watch server.js",
+    "build:demo": "bun run demo/build.ts",
+    "dev:demo": "bun run demo/build.ts --watch",
+    "clean:demo": "rm -rf demo/dist",
+    "build:js": "bun build demo/main.js --outfile=demo/dist/bundle.js --format=esm",
+    "build:css": "sass src/styles/main.scss:demo/dist/styles.css --style=compressed",
+    "build": "bun run build:js && bun run build:css",
+    "build:watch": "bun build --watch demo/main.js --outfile=demo/dist/bundle.js & sass --watch src/styles/main.scss:demo/dist/styles.css",
     "test": "bun test",
     "test:watch": "bun test --watch",
     "test:coverage": "bun test --coverage",
@@ -29,9 +41,8 @@
     "type": "git",
     "url": "https://github.com/floor/mtrl.git"
   },
-  "author": "floor",
-  "license": "MIT License",
   "devDependencies": {
+    "sass": "^1.85.1",
     "typedoc": "^0.27.9"
   }
 }

package/src/components/badge/api.ts

@@ -1,10 +1,5 @@
 // src/components/badge/api.ts
-import { BadgeComponent } from './types';
-import { 
-  BADGE_VARIANTS,
-  BADGE_COLORS, 
-  BADGE_POSITIONS 
-} from './constants';
+import { BadgeComponent, BadgeColor, BadgeVariant, BadgePosition } from './types';
 import { formatBadgeLabel } from './config';
 
 interface ApiOptions {
@@ -34,6 +29,20 @@ interface ComponentWithElements {
   off: (event: string, handler: Function) => any;
 }
 
+// Common variant constants for internal use
+const VARIANT_SMALL = 'small';
+
+// Map of all badge colors for class removal
+const ALL_COLORS = [
+  'error', 'primary', 'secondary', 'tertiary', 'success', 'warning', 'info'
+];
+
+// Map of all badge variants for class removal
+const ALL_VARIANTS = ['small', 'large'];
+
+// Map of all badge positions for class removal
+const ALL_POSITIONS = ['top-right', 'top-left', 'bottom-right', 'bottom-left'];
+
 /**
  * Enhances a badge component with API methods
  * @param {ApiOptions} options - API configuration options
@@ -53,7 +62,7 @@ export const withAPI = ({ visibility, lifecycle }: ApiOptions) =>
       component.config.label = label;
       
       // Small badges (dot variant) don't have text
-      if (component.config.variant === BADGE_VARIANTS.SMALL) {
+      if (component.config.variant === VARIANT_SMALL) {
         component.element.textContent = '';
         return this;
       }
@@ -146,9 +155,9 @@ export const withAPI = ({ visibility, lifecycle }: ApiOptions) =>
      * @param {string} color - Color variant to apply
      * @returns {BadgeComponent} Badge component instance for chaining
      */
-    setColor(color: keyof typeof BADGE_COLORS | (typeof BADGE_COLORS)[keyof typeof BADGE_COLORS]) {
+    setColor(color: BadgeColor | string) {
       // Remove existing color classes
-      Object.values(BADGE_COLORS).forEach(colorName => {
+      ALL_COLORS.forEach(colorName => {
         component.element.classList.remove(`${component.getClass('badge')}--${colorName}`);
       });
       
@@ -162,9 +171,9 @@ export const withAPI = ({ visibility, lifecycle }: ApiOptions) =>
      * @param {string} variant - Variant to apply (small or large)
      * @returns {BadgeComponent} Badge component instance for chaining
      */
-    setVariant(variant: keyof typeof BADGE_VARIANTS | (typeof BADGE_VARIANTS)[keyof typeof BADGE_VARIANTS]) {
+    setVariant(variant: BadgeVariant | string) {
       // Remove existing variant classes
-      Object.values(BADGE_VARIANTS).forEach(variantName => {
+      ALL_VARIANTS.forEach(variantName => {
         component.element.classList.remove(`${component.getClass('badge')}--${variantName}`);
       });
       
@@ -175,7 +184,7 @@ export const withAPI = ({ visibility, lifecycle }: ApiOptions) =>
       component.config.variant = variant;
       
       // Update accessibility attributes
-      if (variant === BADGE_VARIANTS.SMALL) {
+      if (variant === VARIANT_SMALL) {
         component.element.textContent = '';
         component.element.setAttribute('aria-hidden', 'true');
       } else {
@@ -195,9 +204,9 @@ export const withAPI = ({ visibility, lifecycle }: ApiOptions) =>
      * @param {string} position - Position variant to apply
      * @returns {BadgeComponent} Badge component instance for chaining
      */
-    setPosition(position: keyof typeof BADGE_POSITIONS | (typeof BADGE_POSITIONS)[keyof typeof BADGE_POSITIONS]) {
+    setPosition(position: BadgePosition | string) {
       // Remove existing position classes
-      Object.values(BADGE_POSITIONS).forEach(posName => {
+      ALL_POSITIONS.forEach(posName => {
         component.element.classList.remove(`${component.getClass('badge')}--${posName}`);
       });
       

package/src/components/badge/badge.ts

@@ -25,14 +25,14 @@ import { createBaseConfig, getElementConfig, getApiConfig } from './config';
  * @example
  * // Create a small dot badge
  * const notificationBadge = createBadge({ 
- *   variant: BADGE_VARIANTS.SMALL,
+ *   variant: 'small',
  *   target: document.querySelector('.icon-button')
  * });
  * 
  * @example
  * // Create a large badge with a count
  * const countBadge = createBadge({
- *   variant: BADGE_VARIANTS.LARGE,
+ *   variant: 'large',
  *   label: 5,
  *   target: document.querySelector('.notification-icon')
  * });

package/src/components/badge/config.ts

@@ -4,20 +4,19 @@ import {
   createElementConfig
 } from '../../core/config/component-config';
 import { BadgeConfig } from './types';
-import { 
-  BADGE_VARIANTS, 
-  BADGE_COLORS, 
-  BADGE_POSITIONS, 
-  BADGE_MAX_CHARACTERS 
-} from './constants';
+
+/**
+ * Maximum character count for badge labels
+ */
+export const BADGE_MAX_CHARACTERS = 4;
 
 /**
  * Default configuration for the Badge component
  */
 export const defaultConfig: BadgeConfig = {
-  variant: BADGE_VARIANTS.LARGE,
-  color: BADGE_COLORS.ERROR,
-  position: BADGE_POSITIONS.TOP_RIGHT,
+  variant: 'large',
+  color: 'error',
+  position: 'top-right',
   label: '',
   visible: true
 };
@@ -40,12 +39,12 @@ export const getElementConfig = (config: BadgeConfig) => {
   const attrs: Record<string, any> = {};
   
   // For large badges, set appropriate ARIA attributes
-  if (config.variant !== BADGE_VARIANTS.SMALL) {
+  if (config.variant !== 'small') {
     attrs.role = 'status';
   }
   
   // Format the label if needed
-  const formattedLabel = config.variant === BADGE_VARIANTS.SMALL 
+  const formattedLabel = config.variant === 'small' 
     ? '' 
     : formatBadgeLabel(config.label || '', config.max);
   

package/src/components/badge/features.ts

@@ -1,12 +1,17 @@
 // src/components/badge/features.ts
-import { 
-  BADGE_VARIANTS, 
-  BADGE_COLORS, 
-  BADGE_POSITIONS 
-} from './constants';
 import { BadgeConfig } from './types';
 import { formatBadgeLabel } from './config';
 
+// Common badge variants
+const VARIANT_SMALL = 'small';
+const VARIANT_LARGE = 'large';
+
+// Common badge colors
+const COLOR_ERROR = 'error';
+
+// Common badge positions
+const POSITION_TOP_RIGHT = 'top-right';
+
 /**
  * Higher-order function that adds visibility control features to a component
  * @returns {Function} Component enhancer with visibility features
@@ -69,13 +74,13 @@ export const withVisibility = () => component => {
  */
 export const withVariant = (config: BadgeConfig) => component => {
   // Get variant from config with fallback to default
-  const variant = config.variant || BADGE_VARIANTS.LARGE;
+  const variant = config.variant || VARIANT_LARGE;
   
   // Apply variant class
   component.element.classList.add(`${component.getClass('badge')}--${variant}`);
   
   // Small badges (dot variant) don't have text
-  if (variant === BADGE_VARIANTS.SMALL) {
+  if (variant === VARIANT_SMALL) {
     component.element.textContent = '';
     component.element.setAttribute('aria-hidden', 'true');
   } else {
@@ -100,7 +105,7 @@ export const withVariant = (config: BadgeConfig) => component => {
  */
 export const withColor = (config: BadgeConfig) => component => {
   // Get color from config with fallback to default
-  const color = config.color || BADGE_COLORS.ERROR;
+  const color = config.color || COLOR_ERROR;
   
   // Apply color class
   component.element.classList.add(`${component.getClass('badge')}--${color}`);
@@ -115,7 +120,7 @@ export const withColor = (config: BadgeConfig) => component => {
  */
 export const withPosition = (config: BadgeConfig) => component => {
   // Get position from config with fallback to default
-  const position = config.position || BADGE_POSITIONS.TOP_RIGHT;
+  const position = config.position || POSITION_TOP_RIGHT;
   
   // Apply position class
   component.element.classList.add(`${component.getClass('badge')}--${position}`);
@@ -135,7 +140,7 @@ export const withPosition = (config: BadgeConfig) => component => {
  */
 export const withMax = (config: BadgeConfig) => component => {
   // Skip if no max is defined or for small badges
-  if (config.max === undefined || config.variant === BADGE_VARIANTS.SMALL) {
+  if (config.max === undefined || config.variant === VARIANT_SMALL) {
     return component;
   }
   

package/src/components/badge/index.ts

@@ -1,4 +1,29 @@
 // src/components/badge/index.ts
 export { default } from './badge';
-export { BADGE_VARIANTS, BADGE_SIZES, BADGE_COLORS, BADGE_POSITIONS } from './constants';
-export { BadgeConfig, BadgeComponent } from './types';
+export { BadgeConfig, BadgeComponent, BadgeVariant, BadgeColor, BadgePosition } from './types';
+
+// Export common badge constants for convenience and backward compatibility
+export const BADGE_VARIANTS = {
+  SMALL: 'small',
+  LARGE: 'large'
+} as const;
+
+export const BADGE_COLORS = {
+  ERROR: 'error',
+  PRIMARY: 'primary',
+  SECONDARY: 'secondary',
+  TERTIARY: 'tertiary',
+  SUCCESS: 'success',
+  WARNING: 'warning',
+  INFO: 'info'
+} as const;
+
+export const BADGE_POSITIONS = {
+  TOP_RIGHT: 'top-right',
+  TOP_LEFT: 'top-left',
+  BOTTOM_RIGHT: 'bottom-right',
+  BOTTOM_LEFT: 'bottom-left'
+} as const;
+
+// Export max characters constant
+export const BADGE_MAX_CHARACTERS = 4;

package/src/components/badge/types.ts

@@ -1,5 +1,22 @@
 // src/components/badge/types.ts
-import { BADGE_VARIANTS, BADGE_COLORS, BADGE_POSITIONS } from './constants';
+
+/**
+ * Badge variant types
+ * @category Components
+ */
+export type BadgeVariant = 'small' | 'large';
+
+/**
+ * Badge color types
+ * @category Components
+ */
+export type BadgeColor = 'error' | 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'info';
+
+/**
+ * Badge position types
+ * @category Components
+ */
+export type BadgePosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
 
 /**
  * Configuration interface for the Badge component
@@ -9,18 +26,21 @@ export interface BadgeConfig {
   /** 
    * Badge variant (small dot or large numbered)
    * Small badge (6dp) or Large badge (16dp height)
+   * @default 'large'
    */
-  variant?: keyof typeof BADGE_VARIANTS | (typeof BADGE_VARIANTS)[keyof typeof BADGE_VARIANTS];
+  variant?: BadgeVariant | string;
   
   /** 
    * Badge color (error is default)
+   * @default 'error'
    */
-  color?: keyof typeof BADGE_COLORS | (typeof BADGE_COLORS)[keyof typeof BADGE_COLORS];
+  color?: BadgeColor | string;
   
   /** 
-   * Badge position relative to its container 
+   * Badge position relative to its container
+   * @default 'top-right' 
    */
-  position?: keyof typeof BADGE_POSITIONS | (typeof BADGE_POSITIONS)[keyof typeof BADGE_POSITIONS];
+  position?: BadgePosition | string;
   
   /** 
    * Text label inside the badge (for large badges)
@@ -83,13 +103,13 @@ export interface BadgeComponent {
   setMax: (max: number) => BadgeComponent;
   
   /** Sets badge color */
-  setColor: (color: keyof typeof BADGE_COLORS | (typeof BADGE_COLORS)[keyof typeof BADGE_COLORS]) => BadgeComponent;
+  setColor: (color: BadgeColor | string) => BadgeComponent;
   
   /** Sets badge variant */
-  setVariant: (variant: keyof typeof BADGE_VARIANTS | (typeof BADGE_VARIANTS)[keyof typeof BADGE_VARIANTS]) => BadgeComponent;
+  setVariant: (variant: BadgeVariant | string) => BadgeComponent;
   
   /** Sets badge position */
-  setPosition: (position: keyof typeof BADGE_POSITIONS | (typeof BADGE_POSITIONS)[keyof typeof BADGE_POSITIONS]) => BadgeComponent;
+  setPosition: (position: BadgePosition | string) => BadgeComponent;
   
   /** Attaches badge to a target element */
   attachTo: (target: HTMLElement) => BadgeComponent;

package/src/components/bottom-app-bar/bottom-app-bar.ts

@@ -13,50 +13,8 @@ import {
   BaseComponent 
 } from '../../core/compose';
 
-import { createConfig, BottomAppBarConfig } from './config';
-
-/**
- * Bottom app bar component interface
- */
-export interface BottomAppBar extends ElementComponent {
-  /**
-   * Adds an action button to the bottom bar
-   * @param {HTMLElement} button - Button element to add
-   * @returns {BottomAppBar} BottomAppBar instance for chaining
-   */
-  addAction: (button: HTMLElement) => BottomAppBar;
-  
-  /**
-   * Adds a floating action button to the bottom bar
-   * @param {HTMLElement} fab - FAB element to add
-   * @returns {BottomAppBar} BottomAppBar instance for chaining
-   */
-  addFab: (fab: HTMLElement) => BottomAppBar;
-  
-  /**
-   * Shows the bottom bar
-   * @returns {BottomAppBar} BottomAppBar instance for chaining
-   */
-  show: () => BottomAppBar;
-  
-  /**
-   * Hides the bottom bar
-   * @returns {BottomAppBar} BottomAppBar instance for chaining
-   */
-  hide: () => BottomAppBar;
-  
-  /**
-   * Checks if the bottom bar is visible
-   * @returns {boolean} Whether the bottom bar is visible
-   */
-  isVisible: () => boolean;
-
-  /**
-   * Get the actions container element
-   * @returns {HTMLElement} Actions container element
-   */
-  getActionsContainer: () => HTMLElement;
-}
+import { createConfig } from './config';
+import { BottomAppBar, BottomAppBarConfig } from './types';
 
 /**
  * Creates a bottom app bar component

package/src/components/bottom-app-bar/config.ts

@@ -6,51 +6,7 @@
 
 import { createComponentConfig, BaseComponentConfig } from '../../core/config/component-config';
 import { PREFIX } from '../../core/config';
-
-/**
- * Configuration options for bottom app bar
- */
-export interface BottomAppBarConfig extends BaseComponentConfig {
-  /**
-   * Element to use for the container
-   * @default 'div'
-   */
-  tag?: string;
-  
-  /**
-   * Whether to show FAB in the bottom bar
-   * @default false
-   */
-  hasFab?: boolean;
-  
-  /**
-   * FAB position in bottom bar
-   * @default 'end'
-   */
-  fabPosition?: 'center' | 'end';
-  
-  /**
-   * Additional CSS classes to apply
-   */
-  class?: string;
-  
-  /**
-   * Whether to enable auto-hide on scroll
-   * @default false
-   */
-  autoHide?: boolean;
-
-  /**
-   * Transition duration for show/hide in ms
-   * @default 300
-   */
-  transitionDuration?: number;
-
-  /**
-   * Optional callback when scrolling shows/hides the bar
-   */
-  onVisibilityChange?: (visible: boolean) => void;
-}
+import { BottomAppBarConfig } from './types';
 
 /**
  * Default configuration for bottom app bar

package/src/components/bottom-app-bar/index.ts

@@ -8,4 +8,10 @@ import { createBottomAppBar } from './bottom-app-bar';
 
 export default createBottomAppBar;
 export { createBottomAppBar };
-export type { BottomAppBarConfig } from './config';
+export type { BottomAppBarConfig, BottomAppBar } from './types';
+
+// Export position constants for convenience and backward compatibility
+export const FAB_POSITIONS = {
+  CENTER: 'center',
+  END: 'end'
+} as const;

package/src/components/bottom-app-bar/types.ts

@@ -6,6 +6,12 @@
 
 import { ElementComponent } from '../../core/compose';
 
+/**
+ * FAB position type for Bottom App Bar
+ * @category Components
+ */
+export type FabPosition = 'center' | 'end';
+
 /**
  * Configuration options for Bottom App Bar component
  * @category Components
@@ -27,7 +33,7 @@ export interface BottomAppBarConfig {
    * FAB position in bottom bar
    * @default 'end'
    */
-  fabPosition?: 'center' | 'end';
+  fabPosition?: FabPosition;
   
   /**
    * Additional CSS classes to apply

package/src/components/button/button.ts

@@ -13,7 +13,6 @@ import {
 } from '../../core/compose/features';
 import { withAPI } from './api';
 import { ButtonConfig } from './types';
-import { BUTTON_VARIANTS } from './constants';
 import { createBaseConfig, getElementConfig, getApiConfig } from './config';
 
 /**

package/src/components/button/config.ts

@@ -5,13 +5,12 @@ import {
   BaseComponentConfig 
 } from '../../core/config/component-config';
 import { ButtonConfig } from './types';
-import { BUTTON_VARIANTS } from './constants';
 
 /**
  * Default configuration for the Button component
  */
 export const defaultConfig: ButtonConfig = {
-  variant: BUTTON_VARIANTS.FILLED,
+  variant: 'filled',
   type: 'button'
   // Don't set disabled: false as default - it should be undefined by default
 };

package/src/components/button/index.ts

@@ -1,4 +1,12 @@
 // src/components/button/index.ts
 export { default } from './button'
-export { BUTTON_VARIANTS } from './constants'
-export { ButtonConfig, ButtonComponent } from './types'
+export { ButtonConfig, ButtonComponent, ButtonVariant } from './types'
+
+// Export common button variants for convenience
+export const BUTTON_VARIANTS = {
+  FILLED: 'filled',
+  TONAL: 'tonal',
+  OUTLINED: 'outlined',
+  ELEVATED: 'elevated',
+  TEXT: 'text'
+} as const;

package/src/components/button/types.ts

@@ -1,5 +1,10 @@
 // src/components/button/types.ts
-import { BUTTON_VARIANTS } from './constants';
+
+/**
+ * Button variant types
+ * @category Components
+ */
+export type ButtonVariant = 'filled' | 'tonal' | 'outlined' | 'elevated' | 'text';
 
 /**
  * Configuration interface for the Button component
@@ -10,7 +15,7 @@ export interface ButtonConfig {
    * Button variant that determines visual styling
    * @default 'filled'
    */
-  variant?: keyof typeof BUTTON_VARIANTS | string;
+  variant?: ButtonVariant | string;
   
   /** 
    * Whether the button is initially disabled
@@ -260,4 +265,11 @@ export interface ButtonComponent {
    * @returns The button component for chaining
    */
   addClass: (...classes: string[]) => ButtonComponent;
+
+  /**
+   * Sets the aria-label attribute for accessibility
+   * @param label - Aria label text
+   * @returns The button component for chaining
+   */
+  setAriaLabel: (label: string) => ButtonComponent;
 }

package/src/components/card/config.ts

@@ -1,10 +1,8 @@
 // src/components/card/config.ts
-
 import { 
   createComponentConfig, 
   createElementConfig
 } from '../../core/config/component-config';
-import { CARD_VARIANTS, CARD_ELEVATIONS } from './constants';
 import { 
   createCardHeader, 
   createCardContent, 
@@ -18,7 +16,7 @@ import { CardComponent, CardSchema, ButtonConfig, BaseComponent } from './types'
  * @const {CardSchema}
  */
 export const defaultConfig: CardSchema = {
-  variant: CARD_VARIANTS.ELEVATED,
+  variant: 'elevated',
   interactive: false,
   fullWidth: false,
   clickable: false,
@@ -191,6 +189,16 @@ export const getApiConfig = (comp: any) => ({
   }
 });
 
+/**
+ * Card elevation levels
+ */
+export const CARD_ELEVATION_LEVELS = {
+  LEVEL0: 0,
+  LEVEL1: 1,
+  LEVEL2: 2,
+  LEVEL4: 4
+};
+
 /**
  * Adds interactive behavior to card component
  * Uses the MTRL elevation system for proper elevation levels
@@ -206,14 +214,14 @@ export const withInteractiveBehavior = (comp: BaseComponent): BaseComponent => {
   if (isInteractive) {
     // Mouse interactions
     comp.element.addEventListener('mouseenter', () => {
-      if (config.variant === CARD_VARIANTS.ELEVATED) {
-        comp.element.style.setProperty('--card-elevation', String(CARD_ELEVATIONS.LEVEL2));
+      if (config.variant === 'elevated') {
+        comp.element.style.setProperty('--card-elevation', String(CARD_ELEVATION_LEVELS.LEVEL2));
       }
     });
 
     comp.element.addEventListener('mouseleave', () => {
-      if (config.variant === CARD_VARIANTS.ELEVATED) {
-        comp.element.style.setProperty('--card-elevation', String(CARD_ELEVATIONS.LEVEL1));
+      if (config.variant === 'elevated') {
+        comp.element.style.setProperty('--card-elevation', String(CARD_ELEVATION_LEVELS.LEVEL1));
       }
     });
     
@@ -241,7 +249,7 @@ export const withInteractiveBehavior = (comp: BaseComponent): BaseComponent => {
     comp.element.setAttribute('draggable', 'true');
     
     comp.element.addEventListener('dragstart', (e: DragEvent) => {
-      comp.element.style.setProperty('--card-elevation', String(CARD_ELEVATIONS.LEVEL4));
+      comp.element.style.setProperty('--card-elevation', String(CARD_ELEVATION_LEVELS.LEVEL4));
       comp.element.classList.add(`${comp.getClass('card')}--dragging`);
       comp.emit?.('dragstart', { event: e });
       
@@ -254,7 +262,7 @@ export const withInteractiveBehavior = (comp: BaseComponent): BaseComponent => {
     });
 
     comp.element.addEventListener('dragend', (e: DragEvent) => {
-      comp.element.style.setProperty('--card-elevation', String(CARD_ELEVATIONS.LEVEL1));
+      comp.element.style.setProperty('--card-elevation', String(CARD_ELEVATION_LEVELS.LEVEL1));
       comp.element.classList.remove(`${comp.getClass('card')}--dragging`);
       comp.emit?.('dragend', { event: e });
     });