mtrl 0.3.3 → 0.3.6

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

@@ -1,6 +1,6 @@
 // src/components/segmented-button/config.ts
 import { createComponentConfig } from '../../core/config/component-config';
-import { SegmentedButtonConfig, SelectionMode } from './types';
+import { SegmentedButtonConfig, SelectionMode, Density } from './types';
 
 export const DEFAULT_CHECKMARK_ICON = `
 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@@ -13,7 +13,8 @@ export const DEFAULT_CHECKMARK_ICON = `
  */
 export const DEFAULT_CONFIG = {
   mode: SelectionMode.SINGLE,
-  ripple: true
+  ripple: true,
+  density: Density.DEFAULT
 };
 
 /**
@@ -31,20 +32,56 @@ export const createBaseConfig = (config: SegmentedButtonConfig = {}): SegmentedB
  * @returns {Object} Element configuration object for withElement
  * @internal
  */
-export const getContainerConfig = (config: SegmentedButtonConfig) => ({
-  tag: 'div',
-  componentName: 'segmented-button',
-  attrs: {
-    role: 'group',
-    'aria-label': 'Segmented button',
-    'data-mode': config.mode || SelectionMode.SINGLE
-  },
-  className: [
-    config.class,
-    config.disabled ? `${config.prefix}-segmented-button--disabled` : null
-  ],
-  interactive: true
-});
+export const getContainerConfig = (config: SegmentedButtonConfig) => {
+  const density = config.density || Density.DEFAULT;
+  
+  return {
+    tag: 'div',
+    componentName: 'segmented-button',
+    attrs: {
+      role: 'group',
+      'aria-label': 'Segmented button',
+      'data-mode': config.mode || SelectionMode.SINGLE,
+      'data-density': density
+    },
+    className: [
+      config.class,
+      config.disabled ? `${config.prefix}-segmented-button--disabled` : null,
+      density !== Density.DEFAULT ? `${config.prefix}-segmented-button--${density}` : null
+    ],
+    interactive: true
+  };
+};
+
+/**
+ * Gets density-specific sizing and spacing values
+ * @param {string} density - The density level
+ * @returns {Object} CSS variables with sizing values
+ * @internal
+ */
+export const getDensityStyles = (density: string): Record<string, string> => {
+  switch (density) {
+    case Density.COMPACT:
+      return {
+        '--segment-padding': '4px 8px',
+        '--segment-height': '28px',
+        '--segment-font-size': '0.8125rem'
+      };
+    case Density.COMFORTABLE:
+      return {
+        '--segment-padding': '6px 12px',
+        '--segment-height': '32px',
+        '--segment-font-size': '0.875rem'
+      };
+    case Density.DEFAULT:
+    default:
+      return {
+        '--segment-padding': '8px 16px',
+        '--segment-height': '36px',
+        '--segment-font-size': '0.875rem'
+      };
+  }
+};
 
 /**
  * Generates configuration for a segment element
@@ -57,6 +94,7 @@ export const getContainerConfig = (config: SegmentedButtonConfig) => ({
 export const getSegmentConfig = (segment, prefix, groupDisabled = false) => {
   const isDisabled = groupDisabled || segment.disabled;
   
+  // We use button as our base class, but add segment-specific classes for states
   return {
     tag: 'button',
     attrs: {
@@ -67,10 +105,11 @@ export const getSegmentConfig = (segment, prefix, groupDisabled = false) => {
       value: segment.value
     },
     className: [
-      `${prefix}-segment`,
-      segment.selected ? `${prefix}-segment--selected` : null,
-      isDisabled ? `${prefix}-segment--disabled` : null,
-      segment.class
+      `${prefix}-button`, // Base button class
+      `${prefix}-segmented-button-segment`, // Specific segment class
+      segment.selected ? `${prefix}-segment--selected` : null, // Selected state
+      isDisabled ? `${prefix}-segment--disabled` : null, // Disabled state
+      segment.class // Custom class if provided
     ],
     forwardEvents: {
       click: (component) => !isDisabled

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

@@ -1,4 +1,4 @@
 // src/components/segmented-button/index.ts
 export { default, default as createSegmentedButton } from './segmented-button';
-export { SelectionMode } from './types';
+export { SelectionMode, Density } from './types';
 export type { SegmentedButtonConfig, SegmentedButtonComponent, SegmentConfig, Segment } from './types';

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

@@ -1,11 +1,10 @@
 // src/components/segmented-button/segment.ts
-import { createElement } from '../../core/dom/create';
-import { createRipple } from '../../core/build/ripple';
+import createButton from '../button';
 import { SegmentConfig, Segment } from './types';
-import { getSegmentConfig } from './config';
+import { DEFAULT_CHECKMARK_ICON } from './config';
 
 /**
- * Creates a segment for the segmented button
+ * Creates a segment for the segmented button using the button component
  * @param {SegmentConfig} config - Segment configuration
  * @param {HTMLElement} container - Container element
  * @param {string} prefix - Component prefix
@@ -21,59 +20,36 @@ export const createSegment = (
   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);
-  }
+  const isDisabled = groupDisabled || config.disabled;
+  const originalIcon = config.icon;
+  const checkmarkIcon = config.checkmarkIcon || DEFAULT_CHECKMARK_ICON;
+
+  // Create segment using button component with appropriate initial icon
+  const button = createButton({
+    text: config.text,
+    // If selected and has both icon and text, use checkmark instead of the original icon
+    icon: (config.selected && config.text && originalIcon) ? checkmarkIcon : originalIcon,
+    value: config.value || config.text || '',
+    disabled: isDisabled,
+    ripple: options.ripple,
+    rippleConfig: options.rippleConfig,
+    class: config.class,
+    // No variant - we'll style it via the segmented button styles
+  });
+
+  // Add segment-specific classes
+  button.element.classList.add(`${prefix}-segmented-button-segment`);
   
-  // Create text element if provided
-  let textElement;
-  if (config.text) {
-    textElement = createElement({
-      tag: 'span',
-      className: `${prefix}-segmentedbutton-segment-text`,
-      text: config.text,
-      container: element
-    });
+  // Set initial selected state
+  if (config.selected) {
+    button.element.classList.add(`${prefix}-segment--selected`);
+    button.element.setAttribute('aria-pressed', 'true');
+  } else {
+    button.element.setAttribute('aria-pressed', 'false');
   }
   
-  // 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';
-    }
-  }
+  // Add to container
+  container.appendChild(button.element);
   
   /**
    * Updates the visual state based on selection
@@ -81,45 +57,27 @@ export const createSegment = (
    * @private
    */
   const updateSelectedState = (selected: boolean) => {
-    element.classList.toggle(`${prefix}-segmentedbutton-segment--selected`, selected);
-    element.setAttribute('aria-pressed', selected ? 'true' : 'false');
+    button.element.classList.toggle(`${prefix}-segment--selected`, selected);
+    button.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');
+    // Handle icon/checkmark swap if we have both text and original icon
+    if (config.text && originalIcon) {
+      if (selected) {
+        // When selected and has both text and icon, show checkmark
+        button.setIcon(checkmarkIcon);
+      } else {
+        // When not selected, restore original icon
+        button.setIcon(originalIcon);
+      }
     }
   };
   
-  // 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,
+    element: button.element,
+    value: config.value || config.text || '',
     
     isSelected() {
       return isSelected;
@@ -131,24 +89,20 @@ export const createSegment = (
     },
     
     isDisabled() {
-      return isDisabled || groupDisabled;
+      return button.disabled?.isDisabled?.() || false;
     },
     
     setDisabled(disabled: boolean) {
-      isDisabled = disabled;
-      updateDisabledState(disabled);
+      if (disabled) {
+        button.disable();
+      } else {
+        button.enable();
+      }
     },
     
     destroy() {
-      // Clean up ripple if it exists
-      if (ripple) {
-        ripple.unmount(element);
-      }
-      
-      // Remove from DOM
-      if (element.parentNode) {
-        element.parentNode.removeChild(element);
-      }
+      // Use the button's built-in destroy method for cleanup
+      button.destroy();
     }
   };
 };

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

@@ -3,19 +3,61 @@ 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 { SegmentedButtonConfig, SegmentedButtonComponent, SelectionMode, Density, Segment } from './types';
+import { createBaseConfig, getContainerConfig, getDensityStyles } from './config';
 import { createSegment } from './segment';
 
 /**
  * Creates a new Segmented Button component
+ * 
+ * The Segmented Button component provides a group of related buttons that can
+ * be used for selection and filtering. It supports single or multiple selection modes,
+ * configurable density, disabled states, and event handling.
+ * 
  * @param {SegmentedButtonConfig} config - Segmented Button configuration
  * @returns {SegmentedButtonComponent} Segmented Button component instance
+ * 
+ * @example
+ * // Create a segmented button with three segments in single selection mode
+ * const viewToggle = createSegmentedButton({
+ *   segments: [
+ *     { text: 'Day', value: 'day', selected: true },
+ *     { text: 'Week', value: 'week' },
+ *     { text: 'Month', value: 'month' }
+ *   ],
+ *   mode: SelectionMode.SINGLE
+ * });
+ * 
+ * // Listen for selection changes
+ * viewToggle.on('change', (event) => {
+ *   console.log('Selected view:', event.value[0]);
+ *   updateCalendarView(event.value[0]);
+ * });
+ * 
+ * @example
+ * // Create a compact multi-select segmented button with icons
+ * const filterOptions = createSegmentedButton({
+ *   segments: [
+ *     { 
+ *       icon: '<svg>...</svg>', 
+ *       text: 'Filter 1', 
+ *       value: 'filter1' 
+ *     },
+ *     { 
+ *       icon: '<svg>...</svg>', 
+ *       text: 'Filter 2', 
+ *       value: 'filter2' 
+ *     }
+ *   ],
+ *   mode: SelectionMode.MULTI,
+ *   density: Density.COMPACT
+ * });
  */
 const createSegmentedButton = (config: SegmentedButtonConfig = {}): SegmentedButtonComponent => {
   // Process configuration
   const baseConfig = createBaseConfig(config);
   const mode = baseConfig.mode || SelectionMode.SINGLE;
+  const density = baseConfig.density || Density.DEFAULT;
   const emitter = createEmitter();
   
   try {
@@ -27,6 +69,12 @@ const createSegmentedButton = (config: SegmentedButtonConfig = {}): SegmentedBut
       withLifecycle()
     )(baseConfig);
     
+    // Apply density styles
+    const densityStyles = getDensityStyles(density as string);
+    Object.entries(densityStyles).forEach(([prop, value]) => {
+      component.element.style.setProperty(prop, value);
+    });
+    
     // Create segments
     const segments: Segment[] = [];
     if (baseConfig.segments && baseConfig.segments.length) {
@@ -125,6 +173,34 @@ const createSegmentedButton = (config: SegmentedButtonConfig = {}): SegmentedBut
      */
     const findSegmentByValue = (value: string) => segments.find(segment => segment.value === value);
     
+    /**
+     * Updates the density of the segmented button
+     * @param {string} newDensity - New density value
+     * @private
+     */
+    const updateDensity = (newDensity: string) => {
+      // Remove existing density classes
+      [Density.DEFAULT, Density.COMFORTABLE, Density.COMPACT].forEach(d => {
+        if (d !== Density.DEFAULT) {
+          component.element.classList.remove(`${baseConfig.prefix}-segmented-button--${d}`);
+        }
+      });
+      
+      // Add new density class if not default
+      if (newDensity !== Density.DEFAULT) {
+        component.element.classList.add(`${baseConfig.prefix}-segmented-button--${newDensity}`);
+      }
+      
+      // Update data attribute
+      component.element.setAttribute('data-density', newDensity);
+      
+      // Apply density styles
+      const densityStyles = getDensityStyles(newDensity);
+      Object.entries(densityStyles).forEach(([prop, value]) => {
+        component.element.style.setProperty(prop, value);
+      });
+    };
+    
     // Create the component API
     const segmentedButton: SegmentedButtonComponent = {
       element: component.element,
@@ -205,15 +281,51 @@ const createSegmentedButton = (config: SegmentedButtonConfig = {}): SegmentedBut
       enable() {
         // Enable the entire component
         component.element.classList.remove(`${baseConfig.prefix}-segmented-button--disabled`);
+        // Enable all segments (unless individually disabled)
+        segments.forEach(segment => {
+          // Only enable if it wasn't individually disabled
+          if (!baseConfig.segments?.find(s => s.value === segment.value)?.disabled) {
+            segment.setDisabled(false);
+          }
+        });
         return this;
       },
       
       disable() {
         // Disable the entire component
         component.element.classList.add(`${baseConfig.prefix}-segmented-button--disabled`);
+        // Disable all segments
+        segments.forEach(segment => {
+          segment.setDisabled(true);
+        });
         return this;
       },
       
+      enableSegment(value) {
+        const segment = findSegmentByValue(value);
+        if (segment) {
+          segment.setDisabled(false);
+        }
+        return this;
+      },
+      
+      disableSegment(value) {
+        const segment = findSegmentByValue(value);
+        if (segment) {
+          segment.setDisabled(true);
+        }
+        return this;
+      },
+      
+      setDensity(newDensity) {
+        updateDensity(newDensity);
+        return this;
+      },
+      
+      getDensity() {
+        return component.element.getAttribute('data-density') || Density.DEFAULT;
+      },
+      
       on(event, handler) {
         emitter.on(event, handler);
         return this;

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

@@ -11,6 +11,20 @@ export enum SelectionMode {
   MULTI = 'multi'
 }
 
+/**
+ * Density options for segmented button
+ * Controls the overall sizing and spacing of the component.
+ * @category Components
+ */
+export enum Density {
+  /** Default size with standard spacing */
+  DEFAULT = 'default',
+  /** Reduced size and spacing, more compact */
+  COMFORTABLE = 'comfortable',
+  /** Minimal size and spacing, most compact */
+  COMPACT = 'compact'
+}
+
 /**
  * Event types for segmented button
  */
@@ -77,6 +91,11 @@ export interface SegmentConfig {
    * Additional CSS class names for this segment
    */
   class?: string;
+  
+  /**
+   * Custom icon to display when segment is selected (replaces default checkmark)
+   */
+  checkmarkIcon?: string;
 }
 
 /**
@@ -122,6 +141,12 @@ export interface SegmentedButtonConfig {
    * @default true
    */
   ripple?: boolean;
+  
+  /**
+   * Density setting that controls the component's size and spacing
+   * @default Density.DEFAULT
+   */
+  density?: Density | string;
 
   /**
    * Ripple effect configuration
@@ -230,6 +255,33 @@ export interface SegmentedButtonComponent {
    * @returns The SegmentedButtonComponent for chaining
    */
   disable: () => SegmentedButtonComponent;
+  
+  /**
+   * Enables a specific segment by its value
+   * @param value - The value of the segment to enable
+   * @returns The SegmentedButtonComponent for chaining 
+   */
+  enableSegment: (value: string) => SegmentedButtonComponent;
+  
+  /**
+   * Disables a specific segment by its value
+   * @param value - The value of the segment to disable
+   * @returns The SegmentedButtonComponent for chaining
+   */
+  disableSegment: (value: string) => SegmentedButtonComponent;
+  
+  /**
+   * Sets the density of the segmented button
+   * @param density - The density level to set
+   * @returns The SegmentedButtonComponent for chaining
+   */
+  setDensity: (density: Density | string) => SegmentedButtonComponent;
+  
+  /**
+   * Gets the current density setting
+   * @returns The current density
+   */
+  getDensity: () => string;
 
   /**
    * Adds an event listener to the segmented button

package/src/core/compose/features/icon.ts

@@ -41,29 +41,31 @@ const updateCircularStyle = (component: ElementComponent, config: IconConfig): v
 
 /**
  * Adds icon management to a component
- * 
  * @param config - Configuration object containing icon information
  * @returns Function that enhances a component with icon capabilities
  */
 export const withIcon = <T extends IconConfig>(config: T) => 
   <C extends ElementComponent>(component: C): C & IconComponent => {
+    // Create the icon with configuration settings
     const icon = createIcon(component.element, {
       prefix: config.prefix,
       type: config.componentName || 'component',
       position: config.iconPosition,
       iconSize: config.iconSize
     });
-
-    if (config.icon) {
-      icon.setIcon(config.icon);
-    }
-
+    
+    // Set icon if provided in config
+    config.icon && icon.setIcon(config.icon);
+    
+    // Apply button-specific styling if the component is a button
     if (component.componentName === 'button') {
-      updateCircularStyle(component, config);
+      if (!config.text) {
+        updateCircularStyle(component, config);
+      } else if (config.icon && config.text) {
+        component.element.classList.add(`${component.getClass('button')}--icon`);
+      }
     }
-
-    return {
-      ...component,
-      icon
-    };
-  };
+    
+    // Return enhanced component with icon capabilities
+    return Object.assign(component, { icon });
+  };