mtrl 0.3.8 → 0.4.0

package/src/components/sheet/types.ts

@@ -1,294 +0,0 @@
-// src/components/sheet/types.ts
-
-/**
- * Sheet variants
- */
-export const SHEET_VARIANTS = {
-  STANDARD: 'standard',
-  MODAL: 'modal',
-  EXPANDED: 'expanded'
-} as const;
-
-/**
- * Sheet positions
- */
-export const SHEET_POSITIONS = {
-  BOTTOM: 'bottom',
-  TOP: 'top',
-  LEFT: 'left',
-  RIGHT: 'right'
-} as const;
-
-/**
- * Sheet events
- */
-export const SHEET_EVENTS = {
-  OPEN: 'open',
-  CLOSE: 'close',
-  DRAG_START: 'dragstart',
-  DRAG_END: 'dragend'
-} as const;
-
-/**
- * Configuration interface for the Sheet component
- * @category Components
- */
-export interface SheetConfig {
-  /** 
-   * Sheet variant that determines visual styling
-   * @default 'standard'
-   */
-  variant?: keyof typeof SHEET_VARIANTS | string;
-  
-  /** 
-   * Sheet position on the screen
-   * @default 'bottom'
-   */
-  position?: keyof typeof SHEET_POSITIONS | string;
-  
-  /** 
-   * Whether the sheet is initially open
-   * @default false
-   */
-  open?: boolean;
-  
-  /** 
-   * Whether the sheet can be dismissed by clicking the scrim
-   * @default true
-   */
-  dismissible?: boolean;
-  
-  /** 
-   * Whether to show a drag handle
-   * @default true
-   */
-  dragHandle?: boolean;
-  
-  /** 
-   * Content for the sheet
-   * @example '<div>Sheet content</div>'
-   */
-  content?: string;
-  
-  /** 
-   * Title for the sheet
-   * @example 'Sheet Title'
-   */
-  title?: string;
-  
-  /** 
-   * Additional CSS classes to add to the sheet
-   * @example 'custom-sheet settings-panel'
-   */
-  class?: string;
-  
-  /**
-   * Component prefix for class names
-   * @default 'mtrl'
-   */
-  prefix?: string;
-  
-  /**
-   * Component name used in class generation
-   */
-  componentName?: string;
-  
-  /**
-   * Elevation level for the sheet (1-5)
-   * @default 3
-   */
-  elevation?: number;
-  
-  /**
-   * Maximum height of the sheet (CSS value)
-   * @example '80%'
-   */
-  maxHeight?: string;
-  
-  /**
-   * Whether to enable gesture-based interactions
-   * @default true
-   */
-  enableGestures?: boolean;
-  
-  /**
-   * Callback when sheet is opened
-   */
-  onOpen?: () => void;
-  
-  /**
-   * Callback when sheet is closed
-   */
-  onClose?: () => void;
-}
-
-/**
- * Content API interface for managing sheet content
- * @category Components
- */
-export interface ContentAPI {
-  /**
-   * Sets the content HTML
-   * @param html - HTML string for the content
-   * @returns The content API for chaining
-   */
-  setContent: (html: string) => ContentAPI;
-  
-  /**
-   * Gets the current content HTML
-   * @returns HTML string for the content
-   */
-  getContent: () => string;
-  
-  /**
-   * Gets the content DOM element
-   * @returns The content element or null if not present
-   */
-  getElement: () => HTMLElement | null;
-}
-
-/**
- * Title API interface for managing sheet title
- * @category Components
- */
-export interface TitleAPI {
-  /**
-   * Sets the title content
-   * @param text - Title text
-   * @returns The title API for chaining
-   */
-  setTitle: (text: string) => TitleAPI;
-  
-  /**
-   * Gets the current title text
-   * @returns Sheet title text
-   */
-  getTitle: () => string;
-  
-  /**
-   * Gets the title DOM element
-   * @returns The title element or null if not present
-   */
-  getElement: () => HTMLElement | null;
-}
-
-/**
- * Sheet component interface
- * @category Components
- */
-export interface SheetComponent {
-  /** The sheet's root DOM element */
-  element: HTMLElement;
-  
-  /** The sheet's container DOM element */
-  container: HTMLElement;
-  
-  /** API for managing sheet content */
-  content: ContentAPI;
-  
-  /** API for managing sheet title */
-  title: TitleAPI;
-  
-  /** API for managing sheet state */
-  state: {
-    /** Opens the sheet */
-    open: () => void;
-    /** Closes the sheet */
-    close: () => void;
-    /** Checks if the sheet is open */
-    isOpen: () => boolean;
-  };
-  
-  /** API for managing component lifecycle */
-  lifecycle: {
-    /** Destroys the component and cleans up resources */
-    destroy: () => void;
-  };
-  
-  /**
-   * Gets a class name with the component's prefix
-   * @param name - Base class name
-   * @returns Prefixed class name
-   */
-  getClass: (name: string) => string;
-  
-  /**
-   * Opens the sheet
-   * @returns The sheet component for chaining
-   */
-  open: () => SheetComponent;
-  
-  /**
-   * Closes the sheet
-   * @returns The sheet component for chaining
-   */
-  close: () => SheetComponent;
-  
-  /**
-   * Sets the sheet content
-   * @param html - Content HTML
-   * @returns The sheet component for chaining
-   */
-  setContent: (html: string) => SheetComponent;
-  
-  /**
-   * Gets the sheet content HTML
-   * @returns Content HTML
-   */
-  getContent: () => string;
-  
-  /**
-   * Sets the sheet title
-   * @param text - Title text
-   * @returns The sheet component for chaining
-   */
-  setTitle: (text: string) => SheetComponent;
-  
-  /**
-   * Gets the sheet title text
-   * @returns Title text
-   */
-  getTitle: () => string;
-  
-  /**
-   * Enables or disables the drag handle
-   * @param enabled - Whether to show the drag handle
-   * @returns The sheet component for chaining
-   */
-  setDragHandle: (enabled: boolean) => SheetComponent;
-  
-  /**
-   * Sets the maximum height of the sheet
-   * @param height - CSS value for max height
-   * @returns The sheet component for chaining
-   */
-  setMaxHeight: (height: string) => SheetComponent;
-  
-  /**
-   * Destroys the sheet component and cleans up resources
-   */
-  destroy: () => void;
-  
-  /**
-   * Adds an event listener to the sheet
-   * @param event - Event name ('open', 'close', etc.)
-   * @param handler - Event handler function
-   * @returns The sheet component for chaining
-   */
-  on: (event: string, handler: Function) => SheetComponent;
-  
-  /**
-   * Removes an event listener from the sheet
-   * @param event - Event name
-   * @param handler - Event handler function
-   * @returns The sheet component for chaining
-   */
-  off: (event: string, handler: Function) => SheetComponent;
-  
-  /**
-   * Adds CSS classes to the sheet element
-   * @param classes - One or more class names to add
-   * @returns The sheet component for chaining
-   */
-  addClass: (...classes: string[]) => SheetComponent;
-}

package/src/components/slider/accessibility.md

@@ -1,59 +0,0 @@
-# Slider Accessibility Enhancements
-
-## Overview
-
-Based on the provided accessibility requirements, the slider component has been enhanced to provide better keyboard navigation, visual feedback, and overall accessibility. The changes focus on ensuring that the slider meets Material Design accessibility standards and provides appropriate feedback based on input type.
-
-## Key Enhancements
-
-### Focus and Keyboard Navigation
-
-- **Direct Handle Focus**: The initial focus now lands directly on the handle (not the container)
-- **Visual Feedback**: Added a clear outline on focus to provide visual cues for keyboard users
-- **Arrow Key Navigation**:
-  - Left/Right arrows change the value by one step
-  - Up/Down arrows also change the value (for consistency with other controls)
-  - Home/End keys jump to minimum/maximum values
-  - Page Up/Down for larger step increments
-  - Shift + arrows for faster navigation (10x step size)
-
-### Visual Feedback During Interaction
-
-- **Handle Shrinking**: The handle width shrinks slightly during interaction to provide feedback
-- **Value Display**:
-  - Value appears during interaction (touch, drag, mouse click, keyboard navigation)
-  - Value remains visible briefly after interaction ends (1.5 seconds)
-  - Value position updates to follow the handle
-
-### Visual Anchors for Contrast
-
-- **Track End Indicators**: Added dot elements at both ends of the track
-- **Color Contrast**: Ensured sufficient contrast for all elements
-- **Disabled State**: Properly indicated visually and via ARIA attributes
-
-## Implementation Details
-
-1. **Keyboard Handling**:
-   - Enhanced keyboard navigation with proper step calculations
-   - Added support for modifier keys (Shift)
-   - Set appropriate ARIA attributes for screen readers
-
-2. **Interaction Feedback**:
-   - Modified CSS to shrink handle width during active states
-   - Enhanced value bubble display timing
-   - Improved touch and mouse event handling
-
-3. **Focus Management**:
-   - Set clear focus styles that work cross-browser
-   - Applied focus directly to interactive handle elements
-   - Ensured focus outline is visible against various backgrounds
-
-## Keyboard Navigation Map
-
-| Keys | Actions |
-|------|---------|
-| Tab | Moves focus to the slider handle |
-| Arrows | Increase and decrease the value by one step |
-| Shift + Arrows | Increase and decrease by 10x step size |
-| Home / End | Set to minimum or maximum value |
-| Page Up / Down | Increase/decrease by larger increments |

package/src/components/slider/api.ts

@@ -1,192 +0,0 @@
-// src/components/slider/api.ts
-import { SliderComponent, SliderEvent } from './types';
-import { SLIDER_COLORS, SLIDER_SIZES, SLIDER_EVENTS } from './types';
-
-/**
- * API options interface - structured by feature area
- */
-interface ApiOptions {
-  slider: {
-    setValue: (value: number, triggerEvent?: boolean) => any;
-    getValue: () => number;
-    setSecondValue: (value: number, triggerEvent?: boolean) => any;
-    getSecondValue: () => number | null;
-    setMin: (min: number) => any;
-    getMin: () => number;
-    setMax: (max: number) => any;
-    getMax: () => number;
-    setStep: (step: number) => any;
-    getStep: () => number;
-    regenerateTicks: () => any;
-  };
-  disabled: {
-    enable: () => void;
-    disable: () => void;
-    isDisabled: () => boolean;
-  };
-  appearance: {
-    setColor: (color: string) => void;
-    getColor: () => string;
-    setSize: (size: string) => void;
-    getSize: () => string;
-    showTicks: (show: boolean) => void;
-    showCurrentValue: (show: boolean) => void;
-  };
-  text: {
-    setText: (text: string) => void;
-    getText: () => string;
-  };
-  icon: {
-    setIcon: (html: string) => void;
-    getIcon: () => string;
-  };
-  events: {
-    on: (event: string, handler: Function) => void;
-    off: (event: string, handler: Function) => void;
-  };
-  lifecycle: {
-    destroy: () => void;
-  };
-}
-
-/**
- * Enhances a slider component with a streamlined API
- * @param {ApiOptions} options - API configuration options
- * @returns {Function} Higher-order function that adds API methods to component
- * @internal This is an internal utility for the Slider component
- */
-export const withAPI = (options: ApiOptions) => 
-  (component: { element: HTMLElement }): SliderComponent => {
-    return {
-      ...component as any,
-      
-      // Element access
-      element: component.element,
-      
-      // Value management
-      setValue(value: number, triggerEvent: boolean = true) {
-        options.slider.setValue(value, triggerEvent);
-        return this;
-      },
-      
-      getValue() {
-        return options.slider.getValue();
-      },
-      
-      setSecondValue(value: number, triggerEvent: boolean = true) {
-        options.slider.setSecondValue(value, triggerEvent);
-        return this;
-      },
-      
-      getSecondValue() {
-        return options.slider.getSecondValue();
-      },
-      
-      // Range management
-      setMin(min: number) {
-        options.slider.setMin(min);
-        return this;
-      },
-      
-      getMin() {
-        return options.slider.getMin();
-      },
-      
-      setMax(max: number) {
-        options.slider.setMax(max);
-        return this;
-      },
-      
-      getMax() {
-        return options.slider.getMax();
-      },
-      
-      setStep(step: number) {
-        options.slider.setStep(step);
-        return this;
-      },
-      
-      getStep() {
-        return options.slider.getStep();
-      },
-      
-      // State management
-      enable() {
-        options.disabled.enable();
-        return this;
-      },
-      
-      disable() {
-        options.disabled.disable();
-        return this;
-      },
-      
-      isDisabled() {
-        return options.disabled.isDisabled();
-      },
-      
-      // Appearance management
-      setColor(color: keyof typeof SLIDER_COLORS | typeof SLIDER_COLORS[keyof typeof SLIDER_COLORS]) {
-        options.appearance.setColor(color);
-        return this;
-      },
-      
-      getColor() {
-        return options.appearance.getColor();
-      },
-      
-      setSize(size: keyof typeof SLIDER_SIZES | typeof SLIDER_SIZES[keyof typeof SLIDER_SIZES]) {
-        options.appearance.setSize(size);
-        return this;
-      },
-      
-      getSize() {
-        return options.appearance.getSize();
-      },
-      
-      showTicks(show: boolean) {
-        options.appearance.showTicks(show);
-        return this;
-      },
-      
-      showCurrentValue(show: boolean) {
-        options.appearance.showCurrentValue(show);
-        return this;
-      },
-      
-      // Label and icon management
-      setLabel(text: string) {
-        if (options.text?.setText) options.text.setText(text);
-        return this;
-      },
-      
-      getLabel() {
-        return options.text?.getText ? options.text.getText() : '';
-      },
-      
-      setIcon(iconHtml: string) {
-        if (options.icon?.setIcon) options.icon.setIcon(iconHtml);
-        return this;
-      },
-      
-      getIcon() {
-        return options.icon?.getIcon ? options.icon.getIcon() : '';
-      },
-      
-      // Event management
-      on(event: keyof typeof SLIDER_EVENTS | typeof SLIDER_EVENTS[keyof typeof SLIDER_EVENTS], handler: (event: SliderEvent) => void) {
-        if (options.events?.on) options.events.on(event, handler);
-        return this;
-      },
-      
-      off(event: keyof typeof SLIDER_EVENTS | typeof SLIDER_EVENTS[keyof typeof SLIDER_EVENTS], handler: (event: SliderEvent) => void) {
-        if (options.events?.off) options.events.off(event, handler);
-        return this;
-      },
-      
-      // Lifecycle management
-      destroy() {
-        if (options.lifecycle?.destroy) options.lifecycle.destroy();
-      }
-    };
-  };

package/src/components/slider/config.ts

@@ -1,118 +0,0 @@
-// src/components/slider/config.ts
-import { 
-  createComponentConfig, 
-  createElementConfig
-} from '../../core/config/component-config';
-import { SliderConfig } from './types';
-import { SLIDER_COLORS, SLIDER_SIZES } from './types';
-import { createSliderSchema } from './schema';
-
-/**
- * Default configuration for the Slider component
- */
-export const defaultConfig: SliderConfig = {
-  min: 0,
-  max: 100,
-  value: 0,
-  step: 1,
-  disabled: false,
-  color: SLIDER_COLORS.PRIMARY,
-  size: SLIDER_SIZES.MEDIUM,
-  ticks: false,
-  showValue: true,
-  snapToSteps: true,
-  range: false,
-  iconPosition: 'start',
-  labelPosition: 'start',
-  valueFormatter: (value) => value.toString()
-};
-
-/**
- * Creates the base configuration for Slider component
- * @param {SliderConfig} config - User provided configuration
- * @returns {SliderConfig} Complete configuration with defaults applied
- */
-export const createBaseConfig = (config: SliderConfig = {}): SliderConfig => {
-  // Create the base config with defaults applied
-  const baseConfig = createComponentConfig(defaultConfig, config, 'slider') as SliderConfig;
-  
-  // Create a basic component object for structure generation
-  const baseComponent = {
-    componentName: 'slider',
-    config: baseConfig,
-    getClass: (className) => {
-      const prefix = baseConfig.prefix || 'mtrl';
-      return `${prefix}-${className}`;
-    }
-  };
-  
-  // Add the structure definition to the config
-  baseConfig.schema = createSliderSchema(baseComponent, baseConfig);
-  
-  return baseConfig;
-};
-
-/**
- * Generates element configuration for the Slider component
- * @param {SliderConfig} config - Slider configuration
- * @returns {Object} Element configuration object for withElement
- */
-export const getElementConfig = (config: SliderConfig) => 
-  createElementConfig(config, {
-    tag: 'div',
-    attrs: {
-      tabindex: '-1',
-      'aria-disabled': config.disabled === true ? 'true' : 'false',
-      role: 'none'
-    },
-    className: config.class
-  });
-
-/**
- * Creates API configuration for the Slider component
- * @param {Object} comp - Component with slider features
- * @returns {Object} API configuration object
- */
-export const getApiConfig = (comp) => ({
-  slider: {
-    setValue: (v, t) => comp.slider?.setValue(v, t),
-    getValue: () => comp.slider?.getValue() ?? 0,
-    setSecondValue: (v, t) => comp.slider?.setSecondValue(v, t),
-    getSecondValue: () => comp.slider?.getSecondValue() ?? null,
-    setMin: (m) => comp.slider?.setMin(m),
-    getMin: () => comp.slider?.getMin() ?? 0,
-    setMax: (m) => comp.slider?.setMax(m),
-    getMax: () => comp.slider?.getMax() ?? 100,
-    setStep: (s) => comp.slider?.setStep(s),
-    getStep: () => comp.slider?.getStep() ?? 1,
-    regenerateTicks: () => comp.slider?.regenerateTicks?.()
-  },
-  disabled: {
-    enable: () => comp.disabled?.enable?.(),
-    disable: () => comp.disabled?.disable?.(),
-    isDisabled: () => comp.disabled?.isDisabled?.() ?? false
-  },
-  appearance: {
-    setColor: (c) => comp.appearance?.setColor?.(c),
-    getColor: () => comp.appearance?.getColor?.() ?? 'primary',
-    setSize: (s) => comp.appearance?.setSize?.(s),
-    getSize: () => comp.appearance?.getSize?.() ?? 'medium',
-    showTicks: (s) => comp.appearance?.showTicks?.(s),
-    showCurrentValue: (s) => comp.appearance?.showCurrentValue?.(s)
-  },
-  text: {
-    setText: (t) => comp.label?.setText?.(t),
-    getText: () => comp.label?.getText?.() ?? ''
-  },
-  icon: {
-    setIcon: (h) => comp.icon?.setIcon?.(h),
-    getIcon: () => comp.icon?.getIcon?.() ?? ''
-  },
-  events: {
-    on: (e, h) => comp.on?.(e, h),
-    off: (e, h) => comp.off?.(e, h)
-  },
-  lifecycle: {
-    destroy: () => comp.lifecycle?.destroy?.()
-  }
-});