mtrl 0.3.3 → 0.3.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mtrl",
-  "version": "0.3.3",
+  "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/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/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);
     }
   }
 }