mtrl 0.2.6 → 0.2.8

package/src/components/segmented-button/segment.ts

@@ -0,0 +1,154 @@
+// src/components/segmented-button/segment.ts
+import { createElement } from '../../core/dom/create';
+import { createRipple } from '../../core/build/ripple';
+import { SegmentConfig, Segment } from './types';
+import { getSegmentConfig } from './config';
+
+/**
+ * Creates a segment for the segmented button
+ * @param {SegmentConfig} config - Segment configuration
+ * @param {HTMLElement} container - Container element
+ * @param {string} prefix - Component prefix
+ * @param {boolean} groupDisabled - Whether the entire group is disabled
+ * @param {Object} options - Additional options
+ * @returns {Segment} Segment object
+ * @internal
+ */
+export const createSegment = (
+  config: SegmentConfig, 
+  container: HTMLElement,
+  prefix: string,
+  groupDisabled = false,
+  options = { ripple: true, rippleConfig: {} }
+): Segment => {
+  const segmentConfig = getSegmentConfig(config, prefix, groupDisabled);
+  const element = createElement(segmentConfig);
+  
+  // Add to container
+  container.appendChild(element);
+  
+  // Create ripple effect if enabled
+  let ripple;
+  if (options.ripple) {
+    ripple = createRipple(options.rippleConfig);
+    ripple.mount(element);
+  }
+  
+  // Create text element if provided
+  let textElement;
+  if (config.text) {
+    textElement = createElement({
+      tag: 'span',
+      className: `${prefix}-segmentedbutton-segment-text`,
+      text: config.text,
+      container: element
+    });
+  }
+  
+  // Create icon and checkmark elements
+  let iconElement, checkmarkElement;
+  if (config.icon) {
+    // Create icon element
+    iconElement = createElement({
+      tag: 'span',
+      className: `${prefix}-segmentedbutton-segment-icon`,
+      html: config.icon,
+      container: element
+    });
+    
+    // Create checkmark element (hidden initially)
+    checkmarkElement = createElement({
+      tag: 'span',
+      className: `${prefix}-segmentedbutton-segment-'checkmark'`,
+      html: 'icon',
+      container: element
+    });
+    
+    // Hide checkmark if not selected
+    if (!config.selected) {
+      checkmarkElement.style.display = 'none';
+    }
+    
+    // Hide icon if selected and we have text (icon replaced by checkmark)
+    if (config.selected && config.text) {
+      iconElement.style.display = 'none';
+    }
+  }
+  
+  /**
+   * Updates the visual state based on selection
+   * @param {boolean} selected - Whether the segment is selected
+   * @private
+   */
+  const updateSelectedState = (selected: boolean) => {
+    element.classList.toggle(`${prefix}-segmentedbutton-segment--selected`, selected);
+    element.setAttribute('aria-pressed', selected ? 'true' : 'false');
+    
+    // Handle icon/checkmark swap if we have both text and icon
+    if (iconElement && checkmarkElement && config.text) {
+      iconElement.style.display = selected ? 'none' : '';
+      checkmarkElement.style.display = selected ? '' : 'none';
+    } else if (checkmarkElement) {
+      // If we have only icons (no text), show checkmark based on selection
+      checkmarkElement.style.display = selected ? '' : 'none';
+    }
+  };
+  
+  /**
+   * Updates the disabled state
+   * @param {boolean} disabled - Whether the segment is disabled
+   * @private
+   */
+  const updateDisabledState = (disabled: boolean) => {
+    const isDisabled = disabled || groupDisabled;
+    element.classList.toggle(`${prefix}-segmentedbutton-segment--disabled`, isDisabled);
+    
+    if (isDisabled) {
+      element.setAttribute('disabled', 'true');
+    } else {
+      element.removeAttribute('disabled');
+    }
+  };
+  
+  // Value to use for the segment
+  const value = config.value || config.text || '';
+  
+  // Initialize state
+  let isSelected = config.selected || false;
+  let isDisabled = config.disabled || false;
+  
+  return {
+    element,
+    value,
+    
+    isSelected() {
+      return isSelected;
+    },
+    
+    setSelected(selected: boolean) {
+      isSelected = selected;
+      updateSelectedState(selected);
+    },
+    
+    isDisabled() {
+      return isDisabled || groupDisabled;
+    },
+    
+    setDisabled(disabled: boolean) {
+      isDisabled = disabled;
+      updateDisabledState(disabled);
+    },
+    
+    destroy() {
+      // Clean up ripple if it exists
+      if (ripple) {
+        ripple.unmount(element);
+      }
+      
+      // Remove from DOM
+      if (element.parentNode) {
+        element.parentNode.removeChild(element);
+      }
+    }
+  };
+};

package/src/components/segmented-button/segmented-button.ts

@@ -0,0 +1,249 @@
+// src/components/segmented-button/segmented-button.ts
+import { pipe } from '../../core/compose/pipe';
+import { createBase, withElement } from '../../core/compose/component';
+import { withEvents, withLifecycle } from '../../core/compose/features';
+import { createEmitter } from '../../core/state/emitter';
+import { SegmentedButtonConfig, SegmentedButtonComponent, SelectionMode, Segment } from './types';
+import { createBaseConfig, getContainerConfig } from './config';
+import { createSegment } from './segment';
+
+/**
+ * Creates a new Segmented Button component
+ * @param {SegmentedButtonConfig} config - Segmented Button configuration
+ * @returns {SegmentedButtonComponent} Segmented Button component instance
+ */
+const createSegmentedButton = (config: SegmentedButtonConfig = {}): SegmentedButtonComponent => {
+  // Process configuration
+  const baseConfig = createBaseConfig(config);
+  const mode = baseConfig.mode || SelectionMode.SINGLE;
+  const emitter = createEmitter();
+  
+  try {
+    // Create the base component
+    const component = pipe(
+      createBase,
+      withEvents(),
+      withElement(getContainerConfig(baseConfig)),
+      withLifecycle()
+    )(baseConfig);
+    
+    // Create segments
+    const segments: Segment[] = [];
+    if (baseConfig.segments && baseConfig.segments.length) {
+      baseConfig.segments.forEach(segmentConfig => {
+        const segment = createSegment(
+          segmentConfig,
+          component.element,
+          baseConfig.prefix,
+          baseConfig.disabled,
+          {
+            ripple: baseConfig.ripple,
+            rippleConfig: baseConfig.rippleConfig
+          }
+        );
+        
+        segments.push(segment);
+      });
+    }
+    
+    // Ensure at least one item is selected in single-select mode
+    if (mode === SelectionMode.SINGLE && !segments.some(s => s.isSelected())) {
+      // Select the first non-disabled segment by default
+      const firstSelectable = segments.find(s => !s.isDisabled());
+      if (firstSelectable) {
+        firstSelectable.setSelected(true);
+      }
+    }
+    
+    /**
+     * Handles click events on segments
+     * @param {Event} event - DOM click event
+     * @private
+     */
+    const handleSegmentClick = (event: Event) => {
+      const segmentElement = event.currentTarget as HTMLElement;
+      const clickedSegment = segments.find(s => s.element === segmentElement);
+      
+      if (!clickedSegment || clickedSegment.isDisabled()) {
+        return;
+      }
+      
+      const oldValue = getSelectedValues();
+      
+      // Handle selection based on mode
+      if (mode === SelectionMode.SINGLE) {
+        // In single-select, deselect all other segments
+        segments.forEach(segment => {
+          segment.setSelected(segment === clickedSegment);
+        });
+      } else {
+        // In multi-select, toggle the clicked segment
+        clickedSegment.setSelected(!clickedSegment.isSelected());
+      }
+      
+      // Emit change event
+      const newValue = getSelectedValues();
+      
+      // Only emit if values actually changed
+      if (
+        oldValue.length !== newValue.length || 
+        oldValue.some(v => !newValue.includes(v)) ||
+        newValue.some(v => !oldValue.includes(v))
+      ) {
+        emitter.emit('change', {
+          selected: getSelected(),
+          value: newValue,
+          oldValue
+        });
+      }
+    };
+    
+    // Attach click handlers to segments
+    segments.forEach(segment => {
+      segment.element.addEventListener('click', handleSegmentClick);
+    });
+    
+    /**
+     * Gets an array of selected segments
+     * @returns {Segment[]} Array of selected segments
+     * @private
+     */
+    const getSelected = () => segments.filter(segment => segment.isSelected());
+    
+    /**
+     * Gets an array of selected segment values
+     * @returns {string[]} Array of selected segment values
+     * @private
+     */
+    const getSelectedValues = () => getSelected().map(segment => segment.value);
+    
+    /**
+     * Finds a segment by its value
+     * @param {string} value - Segment value to find
+     * @returns {Segment|undefined} The found segment or undefined
+     * @private
+     */
+    const findSegmentByValue = (value: string) => segments.find(segment => segment.value === value);
+    
+    // Create the component API
+    const segmentedButton: SegmentedButtonComponent = {
+      element: component.element,
+      segments,
+      
+      getSelected,
+      
+      getValue() {
+        return getSelectedValues();
+      },
+      
+      select(value) {
+        const segment = findSegmentByValue(value);
+        if (segment && !segment.isDisabled()) {
+          const oldValue = getSelectedValues();
+          
+          if (mode === SelectionMode.SINGLE) {
+            // Deselect all other segments
+            segments.forEach(s => s.setSelected(s === segment));
+          } else {
+            // Just select this segment
+            segment.setSelected(true);
+          }
+          
+          // Emit change event
+          const newValue = getSelectedValues();
+          if (oldValue.join(',') !== newValue.join(',')) {
+            emitter.emit('change', {
+              selected: getSelected(),
+              value: newValue,
+              oldValue
+            });
+          }
+        }
+        return this;
+      },
+      
+      deselect(value) {
+        const segment = findSegmentByValue(value);
+        if (segment && !segment.isDisabled()) {
+          // In single select mode, only deselect if there's another selected segment
+          if (mode === SelectionMode.SINGLE) {
+            const selectedSegments = getSelected();
+            // Only allow deselection if there's more than one selected or we're selecting a different segment
+            if (selectedSegments.length > 1 || !segment.isSelected()) {
+              const oldValue = getSelectedValues();
+              segment.setSelected(false);
+              
+              // Emit change event
+              const newValue = getSelectedValues();
+              if (oldValue.join(',') !== newValue.join(',')) {
+                emitter.emit('change', {
+                  selected: getSelected(),
+                  value: newValue,
+                  oldValue
+                });
+              }
+            }
+          } else {
+            // In multi-select, always allow deselection
+            const oldValue = getSelectedValues();
+            segment.setSelected(false);
+            
+            // Emit change event
+            const newValue = getSelectedValues();
+            if (oldValue.join(',') !== newValue.join(',')) {
+              emitter.emit('change', {
+                selected: getSelected(),
+                value: newValue,
+                oldValue
+              });
+            }
+          }
+        }
+        return this;
+      },
+      
+      enable() {
+        // Enable the entire component
+        component.element.classList.remove(`${baseConfig.prefix}-segmented-button--disabled`);
+        return this;
+      },
+      
+      disable() {
+        // Disable the entire component
+        component.element.classList.add(`${baseConfig.prefix}-segmented-button--disabled`);
+        return this;
+      },
+      
+      on(event, handler) {
+        emitter.on(event, handler);
+        return this;
+      },
+      
+      off(event, handler) {
+        emitter.off(event, handler);
+        return this;
+      },
+      
+      destroy() {
+        // Remove event listeners
+        segments.forEach(segment => {
+          segment.element.removeEventListener('click', handleSegmentClick);
+          segment.destroy();
+        });
+        
+        // Clear emitter
+        emitter.clear();
+        
+        // Destroy base component
+        component.lifecycle.destroy();
+      }
+    };
+    
+    return segmentedButton;
+  } catch (error) {
+    console.error('Segmented Button creation error:', error);
+    throw new Error(`Failed to create segmented button: ${(error as Error).message}`);
+  }
+};
+
+export default createSegmentedButton;

package/src/components/segmented-button/types.ts

@@ -0,0 +1,254 @@
+// src/components/segmented-button/types.ts
+
+/**
+ * Segmented button selection mode
+ * @category Components
+ */
+export enum SelectionMode {
+  /** Only one segment can be selected at a time */
+  SINGLE = 'single',
+  /** Multiple segments can be selected */
+  MULTI = 'multi'
+}
+
+/**
+ * Event types for segmented button
+ */
+export type SegmentedButtonEventType = 'change';
+
+/**
+ * Event data for segmented button events
+ */
+export interface SegmentedButtonEvent {
+  /** The segmented button component that triggered the event */
+  segmentedButton: SegmentedButtonComponent;
+  
+  /** The selected segments */
+  selected: Segment[];
+  
+  /** Values of the selected segments */
+  values: string[];
+  
+  /** Original DOM event if available */
+  originalEvent: Event | null;
+  
+  /** Function to prevent default behavior */
+  preventDefault: () => void;
+  
+  /** Whether default behavior was prevented */
+  defaultPrevented: boolean;
+}
+
+/**
+ * Configuration for a single segment within a segmented button
+ * @category Components
+ */
+export interface SegmentConfig {
+  /**
+   * Text content for the segment
+   * @example 'Day'
+   */
+  text?: string;
+
+  /**
+   * Icon HTML content
+   * @example '<svg>...</svg>'
+   */
+  icon?: string;
+
+  /**
+   * Whether this segment is initially selected
+   * @default false
+   */
+  selected?: boolean;
+
+  /**
+   * Value associated with this segment
+   */
+  value?: string;
+
+  /**
+   * Whether this segment is disabled
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Additional CSS class names for this segment
+   */
+  class?: string;
+}
+
+/**
+ * Configuration interface for the Segmented Button component
+ * @category Components
+ */
+export interface SegmentedButtonConfig {
+  /**
+   * Selection mode for the segmented button group
+   * @default SelectionMode.SINGLE
+   */
+  mode?: SelectionMode;
+
+  /**
+   * Array of segment configurations
+   */
+  segments?: SegmentConfig[];
+
+  /**
+   * Component prefix for class names
+   * @default 'mtrl'
+   */
+  prefix?: string;
+
+  /**
+   * Component name used in class generation
+   */
+  componentName?: string;
+
+  /**
+   * Whether the entire segmented button is initially disabled
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Additional CSS class for the segmented button container
+   */
+  class?: string;
+
+  /**
+   * Whether to enable ripple effect
+   * @default true
+   */
+  ripple?: boolean;
+
+  /**
+   * Ripple effect configuration
+   */
+  rippleConfig?: {
+    /** Duration of the ripple animation in milliseconds */
+    duration?: number;
+    /** Timing function for the ripple animation */
+    timing?: string;
+    /** Opacity values for ripple start and end [start, end] */
+    opacity?: [string, string];
+  };
+  
+  /**
+   * Event handlers for segmented button events
+   */
+  on?: {
+    [key in SegmentedButtonEventType]?: (event: SegmentedButtonEvent) => void;
+  };
+}
+
+/**
+ * Interface for a segment within a segmented button
+ * @category Components
+ */
+export interface Segment {
+  /** The segment's DOM element */
+  element: HTMLElement;
+
+  /** The segment's value */
+  value: string;
+
+  /**
+   * Gets whether the segment is selected
+   */
+  isSelected: () => boolean;
+
+  /**
+   * Sets the segment's selected state
+   * @param selected - Whether the segment should be selected
+   */
+  setSelected: (selected: boolean) => void;
+
+  /**
+   * Gets whether the segment is disabled
+   */
+  isDisabled: () => boolean;
+
+  /**
+   * Sets the segment's disabled state
+   * @param disabled - Whether the segment should be disabled
+   */
+  setDisabled: (disabled: boolean) => void;
+
+  /**
+   * Destroys the segment and cleans up resources
+   */
+  destroy: () => void;
+}
+
+/**
+ * Segmented Button component interface
+ * @category Components
+ */
+export interface SegmentedButtonComponent {
+  /** The component's container DOM element */
+  element: HTMLElement;
+
+  /** Array of segment objects */
+  segments: Segment[];
+
+  /**
+   * Gets the selected segment(s)
+   * @returns An array of selected segments
+   */
+  getSelected: () => Segment[];
+
+  /**
+   * Gets the values of selected segment(s)
+   * @returns An array of selected segment values
+   */
+  getValue: () => string[];
+
+  /**
+   * Selects a segment by its value
+   * @param value - The value of the segment to select
+   * @returns The SegmentedButtonComponent for chaining
+   */
+  select: (value: string) => SegmentedButtonComponent;
+
+  /**
+   * Deselects a segment by its value
+   * @param value - The value of the segment to deselect
+   * @returns The SegmentedButtonComponent for chaining
+   */
+  deselect: (value: string) => SegmentedButtonComponent;
+
+  /**
+   * Enables the segmented button
+   * @returns The SegmentedButtonComponent for chaining
+   */
+  enable: () => SegmentedButtonComponent;
+
+  /**
+   * Disables the segmented button
+   * @returns The SegmentedButtonComponent for chaining
+   */
+  disable: () => SegmentedButtonComponent;
+
+  /**
+   * Adds an event listener to the segmented button
+   * @param event - Event name ('change', etc.)
+   * @param handler - Event handler function
+   * @returns The SegmentedButtonComponent for chaining
+   */
+  on: (event: SegmentedButtonEventType, handler: (event: SegmentedButtonEvent) => void) => SegmentedButtonComponent;
+
+  /**
+   * Removes an event listener from the segmented button
+   * @param event - Event name
+   * @param handler - Event handler function
+   * @returns The SegmentedButtonComponent for chaining
+   */
+  off: (event: SegmentedButtonEventType, handler: (event: SegmentedButtonEvent) => void) => SegmentedButtonComponent;
+
+  /**
+   * Destroys the component and cleans up resources
+   */
+  destroy: () => void;
+}

package/src/components/slider/accessibility.md

@@ -8,7 +8,7 @@ Based on the provided accessibility requirements, the slider component has been
 
 ### Focus and Keyboard Navigation
 
-- **Direct Thumb Focus**: The initial focus now lands directly on the thumb (not the container)
+- **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
@@ -19,11 +19,11 @@ Based on the provided accessibility requirements, the slider component has been
 
 ### Visual Feedback During Interaction
 
-- **Thumb Shrinking**: The thumb width shrinks slightly during interaction to provide feedback
+- **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 thumb
+  - Value position updates to follow the handle
 
 ### Visual Anchors for Contrast
 
@@ -39,13 +39,13 @@ Based on the provided accessibility requirements, the slider component has been
    - Set appropriate ARIA attributes for screen readers
 
 2. **Interaction Feedback**:
-   - Modified CSS to shrink thumb width during active states
+   - 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 thumb elements
+   - Applied focus directly to interactive handle elements
    - Ensured focus outline is visible against various backgrounds
 
 ## Keyboard Navigation Map