mtrl 0.3.2 → 0.3.5

package/CONTRIBUTING.md

@@ -1,18 +1,18 @@
 # Contributing to mtrl
 
-Thank you for your interest in contributing to mtrl! This document provides guidelines and instructions for contributing to this lightweight, ES6-focused JavaScript UI component library.
+Thank you for your interest in contributing to mtrl! This document provides guidelines and instructions for contributing to this lightweight, TypeScript-focused UI component library.
 
 ## Why Contribute?
 
 mtrl aims to be a modern, flexible UI component library with:
 
 - Zero dependencies (except Bun for development)
-- ES6+ focused codebase
+- TypeScript-first codebase
 - Lightweight, tree-shakable components
 - Simple and extensible API
 - Excellent documentation
 
-By contributing to mtrl, you'll help create a lean alternative to heavier frameworks while gaining experience with modern JavaScript patterns and component design.
+By contributing to mtrl, you'll help create a lean alternative to heavier frameworks while gaining experience with modern TypeScript patterns and component design.
 
 ## Getting Started
 
@@ -76,16 +76,29 @@ mtrl uses a separate repository called mtrl.app (https://mtrl.app) for showcasin
 
 mtrl components follow a consistent pattern:
 
-```javascript
-// src/components/mycomponent/index.js
+```typescript
+// src/components/mycomponent/index.ts
 export { createMyComponent } from './mycomponent';
+export type { MyComponentOptions } from './types';
 
-// src/components/mycomponent/mycomponent.js
+// src/components/mycomponent/types.ts
+export interface MyComponentOptions {
+  text?: string;
+  onClick?: (event: MouseEvent) => void;
+  // other options...
+}
+
+// src/components/mycomponent/mycomponent.ts
 import { createElement } from '../../core/dom/create';
 import { createLifecycle } from '../../core/state/lifecycle';
-// etc...
-
-export const createMyComponent = (options = {}) => {
+import type { MyComponentOptions } from './types';
+
+/**
+ * Creates a new MyComponent instance
+ * @param options - Configuration options for MyComponent
+ * @returns The MyComponent instance
+ */
+export const createMyComponent = (options: MyComponentOptions = {}) => {
   // Create DOM elements
   const element = createElement({...});
   
@@ -108,21 +121,30 @@ export const createMyComponent = (options = {}) => {
 The mtrl.app showcase application is the best way to develop and test your components:
 
 1. Clone the mtrl.app repository alongside your mtrl clone.
-2. Create a new view file in `src/client/views/components/` for your component.
-3. Add the route in `src/client/core/navigation.js` of the mtrl.app repository.
+2. Create a new view file in `src/client/content/components/` for your component.
+3. Add the route in `src/client/core/navigation.ts` of the mtrl.app repository.
 4. Implement different variants and states for testing.
 5. Run the showcase server with `bun run dev` in the mtrl.app directory.
 
 This separation of the library code (mtrl) and the showcase app (mtrl.app) keeps the core library clean while providing a rich development environment.
 
+### TypeScript Standards
+
+- Use TypeScript's type system to create clear interfaces and types
+- Export types and interfaces separately from implementations
+- Use strict typing and avoid `any` when possible
+- Prefer interfaces for public APIs and type aliases for complex types
+- Add proper return types to all functions
+
 ### Coding Standards
 
-- Use ES6+ features but maintain browser compatibility
-- Follow functional programming principles when possible
+- Add file path as a comment on the first line of each file
+- Use functional programming principles when possible
 - Use consistent naming conventions:
   - Factory functions should be named `createXyz`
   - Utilities should use clear, descriptive names
-- Write JSDoc comments for all public functions
+  - Interfaces should be named in PascalCase (e.g., `ButtonOptions`)
+- Write TypeDoc comments for all public functions and types
 
 ### CSS/SCSS Guidelines
 
@@ -143,7 +165,7 @@ This separation of the library code (mtrl) and the showcase app (mtrl.app) keeps
 
 Please add appropriate tests for your changes:
 
-```javascript
+```typescript
 // Example test structure
 describe('myComponent', () => {
   it('should render correctly', () => {
@@ -158,12 +180,29 @@ describe('myComponent', () => {
 
 ## Documentation
 
-For any new feature or component:
+Documentation is crucial for this project:
 
-- Add JSDoc comments for API methods
+- Add TypeDoc comments for all public API methods and types
+- Comment the file path at the top of each file
 - Update the component's README.md (if applicable)
 - Consider adding example code in the playground
 
+Example of proper TypeDoc:
+
+```typescript
+/**
+ * Creates a button element with specified options
+ * 
+ * @param options - The button configuration options
+ * @returns A button component instance
+ * @example
+ * ```ts
+ * const button = createButton({ text: 'Click me', variant: 'primary' });
+ * document.body.appendChild(button.element);
+ * ```
+ */
+```
+
 ## Community and Communication
 
 - Submit issues for bugs or feature requests

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mtrl",
-  "version": "0.3.2",
+  "version": "0.3.5",
   "description": "A functional TypeScript/JavaScript component library with composable architecture based on Material Design 3",
   "author": "floor",
   "license": "MIT License",

package/src/components/navigation/nav-item.ts

@@ -107,11 +107,22 @@ export const createNavItem = (
     itemElement.appendChild(icon);
   }
 
-  // Add label if provided
+  // Add label if provided - CONVERTED TO ANCHOR FOR SEO
   if (config.label) {
-    const label = document.createElement('span');
+    // Create anchor instead of span for the label
+    const label = document.createElement('a');
     label.className = `${prefix}-${NavClass.LABEL}`;
     label.textContent = config.label;
+    label.href = `/${config.id}`; // Create path based on ID
+    
+    // Ensure the anchor looks the same as a span would
+    label.style.textDecoration = 'none';
+    label.style.color = 'inherit';
+    label.style.pointerEvents = 'none'; // Let the button handle click events
+    
+    // Add SEO attributes
+    label.setAttribute('title', config.label);
+    
     itemElement.appendChild(label);
     itemElement.setAttribute('aria-label', config.label);
   }

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 });
+  };

package/src/core/dom/create.ts

@@ -6,6 +6,17 @@
 
 import { setAttributes } from './attributes';
 import { normalizeClasses } from '../utils';
+import { PREFIX } from '../config';
+
+/**
+ * Event handler function type
+ */
+export type EventHandler = (event: Event) => void;
+
+/**
+ * Event condition type - either a boolean or a function that returns a boolean
+ */
+export type EventCondition = boolean | ((context: any, event: Event) => boolean);
 
 /**
  * Options for element creation
@@ -59,7 +70,7 @@ export interface CreateElementOptions {
   /**
    * Events to forward when component has emit method
    */
-  forwardEvents?: Record<string, boolean | ((context: any, event: Event) => boolean)>;
+  forwardEvents?: Record<string, EventCondition>;
   
   /**
    * Callback after element creation
@@ -81,9 +92,12 @@ export interface CreateElementOptions {
  * Event handler storage to facilitate cleanup
  */
 export interface EventHandlerStorage {
-  [eventName: string]: EventListener;
+  [eventName: string]: EventHandler;
 }
 
+// Constant for prefix with dash
+const PREFIX_WITH_DASH = `${PREFIX}-`;
+
 /**
  * Creates a DOM element with the specified options
  *
@@ -108,89 +122,78 @@ export const createElement = (options: CreateElementOptions = {}): HTMLElement =
 
   const element = document.createElement(tag);
 
-  // Handle content
+  // Apply basic properties
   if (html) element.innerHTML = html;
   if (text) element.textContent = text;
   if (id) element.id = id;
 
   // Handle classes
   if (className) {
-    const normalizedClasses = normalizeClasses(className);
-    if (normalizedClasses.length) {
-      element.classList.add(...normalizedClasses);
+    const classes = normalizeClasses(className);
+    if (classes.length) {
+      // Apply prefix to classes in a single operation
+      element.classList.add(...classes.map(cls => 
+        cls && !cls.startsWith(PREFIX_WITH_DASH) ? PREFIX_WITH_DASH + cls : cls
+      ).filter(Boolean));
     }
   }
 
-  // Handle data attributes
-  Object.entries(data).forEach(([key, value]) => {
-    element.dataset[key] = value;
-  });
+  // Handle data attributes directly
+  for (const key in data) {
+    element.dataset[key] = data[key];
+  }
 
-  // Handle all other attributes
+  // Handle regular attributes
   const allAttrs = { ...attrs, ...rest };
-  Object.entries(allAttrs).forEach(([key, value]) => {
+  for (const key in allAttrs) {
+    const value = allAttrs[key];
     if (value != null) element.setAttribute(key, String(value));
-  });
-
-  // Initialize event handler storage if not present
-  if (!element.__eventHandlers) {
-    element.__eventHandlers = {};
   }
 
-  // Handle event forwarding if context has emit method or is a component with on method
+  // Handle event forwarding
   if (forwardEvents && (context?.emit || context?.on)) {
-    Object.entries(forwardEvents).forEach(([nativeEvent, eventConfig]) => {
-      // Create a wrapper handler function to evaluate condition and forward event
+    element.__eventHandlers = {};
+    
+    for (const nativeEvent in forwardEvents) {
+      const eventConfig = forwardEvents[nativeEvent];
+      
       const handler = (event: Event) => {
-        // Determine if the event should be forwarded
         let shouldForward = true;
         
         if (typeof eventConfig === 'function') {
           try {
-            // If it's a function, call with component context and event
-            shouldForward = eventConfig({ ...context, element }, event);
+            // Create a lightweight context clone
+            const ctxWithElement = { ...context, element };
+            shouldForward = eventConfig(ctxWithElement, event);
           } catch (error) {
             console.warn(`Error in event condition for ${nativeEvent}:`, error);
             shouldForward = false;
           }
         } else {
-          // If it's a boolean, use directly
           shouldForward = Boolean(eventConfig);
         }
         
-        // Forward the event if condition passes
         if (shouldForward) {
           if (context.emit) {
             context.emit(nativeEvent, { event, element, originalEvent: event });
           } else if (context.on) {
-            // This is a component with on method but no emit method
-            // Dispatch a custom event that can be listened to
-            const customEvent = new CustomEvent(nativeEvent, {
+            element.dispatchEvent(new CustomEvent(nativeEvent, {
               detail: { event, element, originalEvent: event },
               bubbles: true,
               cancelable: true
-            });
-            element.dispatchEvent(customEvent);
+            }));
           }
         }
       };
       
-      // Store the handler for future removal
       element.__eventHandlers[nativeEvent] = handler;
-      
-      // Add the actual event listener
       element.addEventListener(nativeEvent, handler);
-    });
+    }
   }
 
   // Append to container if provided
-  if (container) {
-    container.appendChild(element);
-  }
-
-  if (typeof onCreate === 'function') {
-    onCreate(element, context);
-  }
+  if (container) container.appendChild(element);
+  if (onCreate) onCreate(element, context);
 
   return element;
 };
@@ -200,10 +203,11 @@ export const createElement = (options: CreateElementOptions = {}): HTMLElement =
  * @param element - Element to cleanup
  */
 export const removeEventHandlers = (element: HTMLElement): void => {
-  if (element.__eventHandlers) {
-    Object.entries(element.__eventHandlers).forEach(([eventName, handler]) => {
-      element.removeEventListener(eventName, handler);
-    });
+  const handlers = element.__eventHandlers;
+  if (handlers) {
+    for (const event in handlers) {
+      element.removeEventListener(event, handlers[event]);
+    }
     delete element.__eventHandlers;
   }
 };
@@ -228,7 +232,9 @@ export const withClasses = (...classes: (string | string[])[]) =>
   (element: HTMLElement): HTMLElement => {
     const normalizedClasses = normalizeClasses(...classes);
     if (normalizedClasses.length) {
-      element.classList.add(...normalizedClasses);
+      element.classList.add(...normalizedClasses.map(cls => 
+        cls && !cls.startsWith(PREFIX_WITH_DASH) ? PREFIX_WITH_DASH + cls : cls
+      ).filter(Boolean));
     }
     return element;
   };
@@ -240,17 +246,17 @@ export const withClasses = (...classes: (string | string[])[]) =>
  */
 export const withContent = (content: Node | string) => 
   (element: HTMLElement): HTMLElement => {
-    if (content instanceof Node) {
-      element.appendChild(content);
-    } else {
-      element.textContent = content;
-    }
+    if (content instanceof Node) element.appendChild(content);
+    else element.textContent = content;
     return element;
   };
 
 // Extend HTMLElement interface to add eventHandlers property
 declare global {
   interface HTMLElement {
+    /**
+     * Storage for event handlers to enable cleanup
+     */
     __eventHandlers?: EventHandlerStorage;
   }
 }

package/src/styles/components/_button.scss

@@ -96,6 +96,12 @@ $component: '#{base.$prefix}-button';
     }
   }
   
+
+  &--icon {
+    padding: 0 v.button('padding-horizontal') 0 calc(v.button('padding-horizontal') / 2 + 6px);
+  }
+  
+
   &--disabled {
     opacity: 0.38
   }

package/src/styles/components/_chip.scss

@@ -124,7 +124,7 @@ $container: '#{base.$prefix}-chips';
       background-color: t.color('on-surface');
       opacity: 0.08;
       pointer-events: none;
-      border-radius: inherit;
+      border-radius: v.chip('border-radius');
     }
     
     &:active::after {
@@ -253,7 +253,6 @@ $container: '#{base.$prefix}-chips';
   
   // Filter chip
   &--filter {
-    
     color: t.color('on-surface');
     position: relative;
     border: 1px solid t.alpha('outline', v.chip('outlined-border-opacity'));
@@ -266,7 +265,7 @@ $container: '#{base.$prefix}-chips';
       background-color: t.color('on-surface');
       opacity: 0.08;
       pointer-events: none;
-      border-radius: inherit;
+      border-radius: calc(v.chip('border-radius') - 1px);
     }
     
     &.#{$component}--selected {
@@ -309,7 +308,7 @@ $container: '#{base.$prefix}-chips';
         background-color: t.color('on-secondary-container');
         opacity: 0.08;
         pointer-events: none;
-        border-radius: inherit;
+        border-radius: calc(v.chip('border-radius') - 1px);
       }
     }
   }
@@ -330,7 +329,7 @@ $container: '#{base.$prefix}-chips';
       background-color: t.color('on-surface');
       opacity: 0.08;
       pointer-events: none;
-      border-radius: inherit;
+      border-radius: v.chip('border-radius');
     }
     
     &.#{$component}--selected {

package/src/styles/components/_segmented-button.scss

@@ -13,49 +13,103 @@ $component: '#{base.$prefix}-segmented-button';
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  height: 40px;
-  border-radius: v.shape('full');
+  border-radius: 20px; // Half of height per MD3 specs
   border: 1px solid t.color('outline');
   background-color: transparent;
   overflow: hidden;
   
-  // Disabled state
+  // Density variables with defaults (Material Design 3 standard density)
+  --segment-height: 40px;
+  --segment-padding-x: 24px;
+  --segment-padding-icon-only: 12px;
+  --segment-padding-icon-text-left: 16px;
+  --segment-padding-icon-text-right: 24px;
+  --segment-icon-size: 18px;
+  --segment-text-size: 0.875rem;
+  --segment-border-radius: 20px;
+  
+  // Set height from the CSS variable
+  height: var(--segment-height);
+  // Adjust border radius based on height
+  border-radius: calc(var(--segment-height) / 2);
+  
+  // Comfortable density (medium)
+  &--comfortable {
+    --segment-height: 36px;
+    --segment-padding-x: 20px;
+    --segment-padding-icon-only: 10px;
+    --segment-padding-icon-text-left: 14px;
+    --segment-padding-icon-text-right: 20px;
+    --segment-icon-size: 16px;
+    --segment-text-size: 0.8125rem;
+    --segment-border-radius: 18px;
+    
+    border-radius: var(--segment-border-radius);
+  }
+  
+  // Compact density (small)
+  &--compact {
+    --segment-height: 32px;
+    --segment-padding-x: 16px;
+    --segment-padding-icon-only: 8px;
+    --segment-padding-icon-text-left: 12px;
+    --segment-padding-icon-text-right: 16px;
+    --segment-icon-size: 16px;
+    --segment-text-size: 0.75rem;
+    --segment-border-radius: 16px;
+    
+    border-radius: var(--segment-border-radius);
+  }
+  
+  // Disabled state for whole component
   &--disabled {
     opacity: 0.38;
     pointer-events: none;
   }
 
-  // Segment container
-  &-segment {
-    // Base styles
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-    min-width: 48px;
-    padding: 0 12px;
-    border: none;
+  // Style for button elements used as segments
+  .#{base.$prefix}-button {
+    // Reset button styles that we don't want
+    margin: 0;
+    box-shadow: none;
     background-color: transparent;
-    color: t.color('on-surface');
-    cursor: pointer;
-    user-select: none;
+    border: none;
+    position: relative; // For pseudo-elements
+    border-radius: 0; // Reset any border-radius
+    min-width: 48px;
+    height: 100%;
+    color: t.color('on-surface'); // Original color
+    
+    // Use CSS variables for dynamic sizing based on density
+    padding: 0 var(--segment-padding-x);
     
-    // Fix segmented borders
-    &:not(:first-child) {
-      border-left: 1px solid t.color('outline');
+    // Icon-only segments have equal padding all around
+    &.#{base.$prefix}-button--circular {
+      padding: 0 var(--segment-padding-icon-only);
     }
     
-    // Typography
-    @include m.typography('label-large');
+    // Segments with both icon and text
+    &:has(.#{base.$prefix}-button-icon + .#{base.$prefix}-button-text) {
+      padding: 0 var(--segment-padding-icon-text-right) 0 var(--segment-padding-icon-text-left);
+    }
     
-    // Transition
-    @include m.motion-transition(
-      background-color, 
-      color
-    );
+    // Only add border radius to first and last segments
+    &:first-child {
+      border-top-left-radius: var(--segment-border-radius);
+      border-bottom-left-radius: var(--segment-border-radius);
+    }
     
-    // States
+    &:last-child {
+      border-top-right-radius: var(--segment-border-radius);
+      border-bottom-right-radius: var(--segment-border-radius);
+    }
+    
+    // Hover state - keeping original color
+    &:hover:not([disabled]) {
+      background-color: t.alpha('on-surface', 0.08);
+    }
+    
+    // Focus state
     &:focus {
       outline: none;
     }
@@ -65,53 +119,109 @@ $component: '#{base.$prefix}-segmented-button';
       outline-offset: -2px;
     }
     
-    &:hover:not(.#{$component}-segment--disabled) {
-      background-color: t.alpha('on-surface', 0.08);
+    // Replace border with pseudo-elements for better control
+    // Each segment has its own right border (except last)
+    &:not(:last-child)::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      right: 0;
+      height: 100%;
+      width: 1px;
+      background-color: t.color('outline');
+      pointer-events: none;
     }
     
-    // Selected state
-    &--selected {
-      background-color: t.color('secondary-container');
-      color: t.color('on-secondary-container');
+    // Disabled state handling
+    &[disabled] {
+      opacity: 0.38;
+      
+      // When a disabled button has a right border, make it lower opacity
+      &::after {
+        background-color: t.alpha('outline', 0.38);
+      }
+      
+      // When a disabled button is before a non-disabled button, let the non-disabled handle the border
+      + .#{base.$prefix}-button:not([disabled])::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 100%;
+        width: 1px;
+        background-color: t.color('outline');
+        pointer-events: none;
+      }
       
-      &:hover:not(.#{$component}-segment--disabled) {
-        background-color: t.alpha('secondary-container', 0.8);
+      // When a disabled button is after a non-disabled button, make the non-disabled button's border low opacity
+      &:not(:first-child) {
+        &::before {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: 0;
+          height: 100%;
+          width: 1px;
+          background-color: t.alpha('outline', 0.38);
+          pointer-events: none;
+        }
       }
     }
     
-    // Disabled state
-    &--disabled {
-      opacity: 0.38;
-      cursor: not-allowed;
+    // Ensure all button styles are reset appropriately
+    &.#{base.$prefix}-button--filled,
+    &.#{base.$prefix}-button--outlined,
+    &.#{base.$prefix}-button--tonal,
+    &.#{base.$prefix}-button--elevated,
+    &.#{base.$prefix}-button--text {
+      background-color: transparent;
+      box-shadow: none;
+      color: t.color('on-surface');
     }
+  }
+  
+  // Selected state
+  .#{base.$prefix}-segment--selected {
+    background-color: t.color('secondary-container');
+    color: t.color('on-secondary-container');
     
-    // Text element
-    &-text {
-      // For when both icon and text are present
-      margin: 0 auto;
+    &:hover:not([disabled]) {
+      background-color: t.alpha('secondary-container', 0.8);
     }
     
-    // Icon styles
-    &-icon, &-checkmark {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      width: 18px;
-      height: 18px;
-      
-      svg {
-        width: 18px;
-        height: 18px;
-      }
-      
-      + .#{$component}-segment-text {
-        margin-left: 8px;
-      }
+    // Ensure color change even with different button variants
+    &.#{base.$prefix}-button--filled,
+    &.#{base.$prefix}-button--outlined,
+    &.#{base.$prefix}-button--tonal,
+    &.#{base.$prefix}-button--elevated,
+    &.#{base.$prefix}-button--text {
+      background-color: t.color('secondary-container');
+      color: t.color('on-secondary-container');
     }
+  }
+  
+  // Ensure proper spacing in button contents
+  .#{base.$prefix}-button-text {
+    margin: 0;
+    white-space: nowrap;
+    @include m.typography('label-large');
+    // Apply density-specific font sizing
+    font-size: var(--segment-text-size);
+  }
+  
+  .#{base.$prefix}-button-icon + .#{base.$prefix}-button-text {
+    margin-left: 8px; // MD3 spec for space between icon and text
+  }
+  
+  // Icon sizing per MD3
+  .#{base.$prefix}-button-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     
-    // Space the checkmark icon
-    &-checkmark + .#{$component}-segment-text {
-      margin-left: 8px;
+    svg {
+      width: var(--segment-icon-size);
+      height: var(--segment-icon-size);
     }
   }
 }

package/src/styles/themes/_autumn.scss

@@ -58,6 +58,9 @@
   --#{$prefix}-sys-color-on-info: #003060;
   --#{$prefix}-sys-color-on-info-rgb: 0, 48, 96;
 
+    // Include status colors for light theme
+  @include status-colors-light();
+
   &[data-theme-mode="dark"] {
     // Key colors
     --#{$prefix}-sys-color-primary: #DDB995; // Softer brown