mtrl 0.2.6 → 0.2.7

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

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

package/src/components/slider/_styles.scss

@@ -5,8 +5,11 @@
 @use '../../styles/abstract/mixins' as m;
 @use '../../styles/abstract/theme' as t;
 
-// $transform: transform 0.2s ease, width 0.2s ease, height 0.2s ease;
-$transform: none;
+// Define the transition properties for smoother animations with absolute positioning
+$track-transition: left 0.2s ease, right 0.2s ease;
+$handle-transition: left 0.2s ease, transform 0.2s ease;
+$bubble-transition: left 0.2s ease, opacity 0.2s ease, visibility 0s linear 0.2s;
+$bubble-transition-visible: left 0.2s ease, opacity 0.2s ease, visibility 0s;
 
 $component: '#{base.$prefix}-slider';
 
@@ -14,17 +17,62 @@ $component: '#{base.$prefix}-slider';
   // Base styles
   position: relative;
   width: 100%;
-  height: 40px;
   display: flex;
-  align-items: center;
+  flex-direction: column;
   user-select: none;
   touch-action: none;
+  padding: 8px 0;
   
   // Container should not have a focus outline
   &:focus {
     outline: none;
   }
   
+  // Label styles
+  &-label {
+    display: block;
+    font-size: 18px;
+    font-weight: 400;
+    color: t.color('on-surface');
+    margin-bottom: 4px;
+  }
+  
+  // Icon positioning
+  &-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: t.color('on-surface-variant');
+    position: absolute;
+    width: 40px;
+    height: 40px;
+    top: 16px;
+    
+    svg {
+      width: 24px;
+      height: 24px;
+    }
+  }
+  
+  // When slider has icon at end position
+  &--icon {
+    .#{$component}-label {
+      margin-left: 48px;
+    }
+
+    .#{$component}-container {
+      margin-left: 48px;
+    }
+  }
+
+  // Slider container - holds all the slider elements
+  &-container {
+    position: relative;
+    height: 40px;
+    display: flex;
+    align-items: center;
+  }
+
   &-track {
     position: relative;
     width: 100%;
@@ -42,15 +90,15 @@ $component: '#{base.$prefix}-slider';
     }
   }
  
-  // Thumb - updated with T-shape and proper focus styles
-  &-thumb {
+  // Handle - updated with T-shape and proper focus styles
+  &-handle {
     position: absolute;
     top: 50%;
     transform: translate(-50%, -50%);
     cursor: pointer;
     z-index: 4;
     padding: 4px 0;
-    transition: $transform;
+    transition: $handle-transition;
     width: 16px;
     height: 50px;
     border-radius: 16px;
@@ -66,7 +114,7 @@ $component: '#{base.$prefix}-slider';
       // Additional styling when focused
     }
 
-    // Create a T-shaped thumb using pseudo-elements
+    // Create a T-shaped handle using pseudo-elements
     &::before {
       pointer-events: none;
       content: '';
@@ -103,7 +151,7 @@ $component: '#{base.$prefix}-slider';
       pointer-events: auto;
     }
     
-    // Make thumb line slimmer during dragging (feedback)
+    // Make handle line slimmer during dragging (feedback)
     .#{$component}--dragging & {
       &::before {
         width: 3px;
@@ -169,7 +217,7 @@ $component: '#{base.$prefix}-slider';
     height: 100%;
     background-color: t.color('primary');
     transform-origin: left center;
-    transition: $transform;
+    transition: $track-transition;
     border-radius: 2px;
     opacity: 0.24;
     z-index: 1;
@@ -198,7 +246,7 @@ $component: '#{base.$prefix}-slider';
     height: 100%;
     background-color: t.color('primary');
     transform-origin: left center;
-    transition: $transform;
+    transition: $track-transition;
     border-radius: 2px;
     z-index: 1;
 
@@ -223,9 +271,8 @@ $component: '#{base.$prefix}-slider';
     height: 100%;
     background-color: t.color('primary');
     transform-origin: left center;
-    transition: $transform;
+    transition: $track-transition;
     border-radius: 2px;
-    width: 100%;
     z-index: 0;
     
     .#{$component}--secondary & {
@@ -304,14 +351,14 @@ $component: '#{base.$prefix}-slider';
   // Tick marks
   &-tick {
     position: absolute;
-    width: 2px;
-    height: 2px;
+    width: 4px;
+    height: 4px;
     background-color: t.color('outline');
     border-radius: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     pointer-events: none;
-    opacity: 1;
+    opacity: 0.8;
     
     &:last-child, &:first-child {
       display: none
@@ -333,6 +380,7 @@ $component: '#{base.$prefix}-slider';
     // Inactive tick (unfilled)
     &--inactive {
       background-color: t.color('primary');
+      opacity: 0.5;
 
       .#{$component}--secondary & {
         background-color: t.color('secondary');
@@ -351,7 +399,7 @@ $component: '#{base.$prefix}-slider';
   
   // Range slider styles
   &--range {
-    .#{$component}-thumb {
+    .#{$component}-handle {
       &:nth-of-type(1) {
         z-index: 3;
       }
@@ -377,14 +425,14 @@ $component: '#{base.$prefix}-slider';
     transform: translateX(-50%);
     visibility: hidden;
     opacity: 0;
-    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
+    transition: $bubble-transition;
     pointer-events: none;
     
     // Show value when interacting
     &--visible {
       visibility: visible;
       opacity: 1;
-      transition: opacity 0.2s ease, visibility 0s;
+      transition: $bubble-transition-visible;
     }
   }
   
@@ -398,19 +446,29 @@ $component: '#{base.$prefix}-slider';
   
   // Sizes
   &--small {
-    height: 32px;
+    .#{$component}-container {
+      height: 32px;
+    }
     
-    .#{$component}-thumb {
+    .#{$component}-handle {
       &::before {
         height: 34px;
       }
     }
   }
   
+  &--medium {
+    .#{$component}-container {
+      height: 40px;
+    }
+  }
+  
   &--large {
-    height: 48px;
+    .#{$component}-container {
+      height: 48px;
+    }
     
-    .#{$component}-thumb {
+    .#{$component}-handle {
       &::before {
         height: 48px;
       }
@@ -423,7 +481,8 @@ $component: '#{base.$prefix}-slider';
     .#{$component}-start-track, 
     .#{$component}-active-track, 
     .#{$component}-remaining-track, 
-    .#{$component}-thumb {
+    .#{$component}-handle,
+    .#{$component}-value {
       transition: none;
     }
   }

package/src/components/slider/accessibility.md

@@ -8,7 +8,7 @@ Based on the provided accessibility requirements, the slider component has been
 
 ### Focus and Keyboard Navigation
 
-- **Direct Thumb Focus**: The initial focus now lands directly on the thumb (not the container)
+- **Direct Handle Focus**: The initial focus now lands directly on the handle (not the container)
 - **Visual Feedback**: Added a clear outline on focus to provide visual cues for keyboard users
 - **Arrow Key Navigation**:
   - Left/Right arrows change the value by one step
@@ -19,11 +19,11 @@ Based on the provided accessibility requirements, the slider component has been
 
 ### Visual Feedback During Interaction
 
-- **Thumb Shrinking**: The thumb width shrinks slightly during interaction to provide feedback
+- **Handle Shrinking**: The handle width shrinks slightly during interaction to provide feedback
 - **Value Display**:
   - Value appears during interaction (touch, drag, mouse click, keyboard navigation)
   - Value remains visible briefly after interaction ends (1.5 seconds)
-  - Value position updates to follow the thumb
+  - Value position updates to follow the handle
 
 ### Visual Anchors for Contrast
 
@@ -39,13 +39,13 @@ Based on the provided accessibility requirements, the slider component has been
    - Set appropriate ARIA attributes for screen readers
 
 2. **Interaction Feedback**:
-   - Modified CSS to shrink thumb width during active states
+   - Modified CSS to shrink handle width during active states
    - Enhanced value bubble display timing
    - Improved touch and mouse event handling
 
 3. **Focus Management**:
    - Set clear focus styles that work cross-browser
-   - Applied focus directly to interactive thumb elements
+   - Applied focus directly to interactive handle elements
    - Ensured focus outline is visible against various backgrounds
 
 ## Keyboard Navigation Map