mtrl 0.2.5 → 0.2.7

package/src/styles/themes/_spring.scss

@@ -35,6 +35,9 @@
   --#{$prefix}-sys-color-outline: #727970;
   --#{$prefix}-sys-color-outline-variant: #C1C9BE;
 
+  // Include status colors for light theme
+  @include status-colors-light();
+
   &[data-theme-mode="dark"] {
     // Key colors
     --#{$prefix}-sys-color-primary: #79DC80;
@@ -67,5 +70,8 @@
     
     --#{$prefix}-sys-color-outline: #8B9388;
     --#{$prefix}-sys-color-outline-variant: #424940;
+
+    // Include status colors for dark theme
+    @include status-colors-dark();
   }
 }

package/src/styles/themes/_summer.scss

@@ -41,6 +41,9 @@
   --#{$prefix}-sys-color-outline: #827568;
   --#{$prefix}-sys-color-outline-variant: #D5C8B9;
 
+  // Include status colors for light theme
+  @include status-colors-light();
+
   &[data-theme-mode="dark"] {
     // Key colors - darker but still vibrant
     --#{$prefix}-sys-color-primary: #9ECAFF;
@@ -78,5 +81,7 @@
     
     --#{$prefix}-sys-color-outline: #9E8F80;
     --#{$prefix}-sys-color-outline-variant: #50453B;
+    // Include status colors for dark theme
+    @include status-colors-dark();
   }
 }

package/src/styles/themes/_sunset.scss

@@ -35,6 +35,9 @@
   --#{$prefix}-sys-color-outline: #85736D;
   --#{$prefix}-sys-color-outline-variant: #D8C2BB;
 
+  // Include status colors for light theme
+  @include status-colors-light();
+
    &[data-theme-mode="dark"] {
     --#{$prefix}-sys-color-primary: #FFB686;
     --#{$prefix}-sys-color-on-primary: #5C2800;
@@ -51,5 +54,7 @@
     --#{$prefix}-sys-color-surface-container: #2B1714;
     
     --#{$prefix}-sys-color-outline: #B89784;
+    // Include status colors for dark theme
+    @include status-colors-dark();
   }
 }

package/src/styles/themes/_tealcaramel.scss

@@ -0,0 +1,125 @@
+// src/styles/themes/_tealcaramel.scss
+@use '../abstract/base' as *;
+@use 'base-theme' as *;
+
+@include create-theme('tealcaramel') {
+  // Key colors based on teal and caramel combination
+  --#{$prefix}-sys-color-primary: #2B4D56; // Teal as primary
+  --#{$prefix}-sys-color-primary-rgb: 0, 105, 92;
+  --#{$prefix}-sys-color-on-primary: #FFFFFF;
+  --#{$prefix}-sys-color-on-primary-rgb: 255, 255, 255;
+  --#{$prefix}-sys-color-primary-container: #B2DFDB;
+  --#{$prefix}-sys-color-primary-container-rgb: 178, 223, 219;
+  --#{$prefix}-sys-color-on-primary-container: #002A25;
+  --#{$prefix}-sys-color-on-primary-container-rgb: 0, 42, 37;
+  
+  --#{$prefix}-sys-color-secondary: #9A6433; // Caramel as secondary
+  --#{$prefix}-sys-color-secondary-rgb: 198, 124, 78;
+  --#{$prefix}-sys-color-on-secondary: #FFFFFF;
+  --#{$prefix}-sys-color-on-secondary-rgb: 255, 255, 255;
+  --#{$prefix}-sys-color-secondary-container: #FFD8C2;
+  --#{$prefix}-sys-color-secondary-container-rgb: 255, 216, 194;
+  --#{$prefix}-sys-color-on-secondary-container: #3E2715;
+  --#{$prefix}-sys-color-on-secondary-container-rgb: 62, 39, 21;
+  
+  --#{$prefix}-sys-color-tertiary: #4A7C6E; // Muted teal as tertiary
+  --#{$prefix}-sys-color-tertiary-rgb: 74, 124, 110;
+  --#{$prefix}-sys-color-on-tertiary: #FFFFFF;
+  --#{$prefix}-sys-color-on-tertiary-rgb: 255, 255, 255;
+  --#{$prefix}-sys-color-tertiary-container: #CCE6DF;
+  --#{$prefix}-sys-color-tertiary-container-rgb: 204, 230, 223;
+  --#{$prefix}-sys-color-on-tertiary-container: #0E3029;
+  --#{$prefix}-sys-color-on-tertiary-container-rgb: 14, 48, 41;
+
+  // Neutral colors with subtle teal undertones
+  --#{$prefix}-sys-color-surface: #F9FCFC;
+  --#{$prefix}-sys-color-surface-rgb: 249, 252, 252;
+  --#{$prefix}-sys-color-surface-dim: #E5ECEB;
+  --#{$prefix}-sys-color-surface-dim-rgb: 229, 236, 235;
+  --#{$prefix}-sys-color-surface-bright: #F9FCFC;
+  --#{$prefix}-sys-color-surface-bright-rgb: 249, 252, 252;
+  --#{$prefix}-sys-color-surface-container-lowest: #FFFFFF;
+  --#{$prefix}-sys-color-surface-container-lowest-rgb: 255, 255, 255;
+  --#{$prefix}-sys-color-surface-container-low: #F3F7F6;
+  --#{$prefix}-sys-color-surface-container-low-rgb: 243, 247, 246;
+  --#{$prefix}-sys-color-surface-container: #EDF2F1;
+  --#{$prefix}-sys-color-surface-container-rgb: 237, 242, 241;
+  --#{$prefix}-sys-color-surface-container-high: #E7ECEB;
+  --#{$prefix}-sys-color-surface-container-high-rgb: 231, 236, 235;
+  --#{$prefix}-sys-color-surface-container-highest: #E1E6E5;
+  --#{$prefix}-sys-color-surface-container-highest-rgb: 225, 230, 229;
+  
+  --#{$prefix}-sys-color-on-surface: #191D1C;
+  --#{$prefix}-sys-color-on-surface-rgb: 25, 29, 28;
+  --#{$prefix}-sys-color-on-surface-variant: #404847;
+  --#{$prefix}-sys-color-on-surface-variant-rgb: 64, 72, 71;
+  
+  --#{$prefix}-sys-color-outline: #6E7978;
+  --#{$prefix}-sys-color-outline-rgb: 110, 121, 120;
+  --#{$prefix}-sys-color-outline-variant: #C1CCCB;
+  --#{$prefix}-sys-color-outline-variant-rgb: 193, 204, 203;
+
+  // Include status colors for light theme
+  @include status-colors-light();
+
+  &[data-theme-mode="dark"] {
+    // Key colors for dark mode
+    --#{$prefix}-sys-color-primary: #85CFC6; // Lighter teal
+    --#{$prefix}-sys-color-primary-rgb: 133, 207, 198;
+    --#{$prefix}-sys-color-on-primary: #003E36;
+    --#{$prefix}-sys-color-on-primary-rgb: 0, 62, 54;
+    --#{$prefix}-sys-color-primary-container: #005349;
+    --#{$prefix}-sys-color-primary-container-rgb: 0, 83, 73;
+    --#{$prefix}-sys-color-on-primary-container: #B2DFDB;
+    --#{$prefix}-sys-color-on-primary-container-rgb: 178, 223, 219;
+    
+    --#{$prefix}-sys-color-secondary: #FFB68D; // Lighter caramel
+    --#{$prefix}-sys-color-secondary-rgb: 255, 182, 141;
+    --#{$prefix}-sys-color-on-secondary: #5D3726;
+    --#{$prefix}-sys-color-on-secondary-rgb: 93, 55, 38;
+    --#{$prefix}-sys-color-secondary-container: #7D4F3A;
+    --#{$prefix}-sys-color-secondary-container-rgb: 125, 79, 58;
+    --#{$prefix}-sys-color-on-secondary-container: #FFD8C2;
+    --#{$prefix}-sys-color-on-secondary-container-rgb: 255, 216, 194;
+    
+    --#{$prefix}-sys-color-tertiary: #A0CCC2; // Lighter muted teal
+    --#{$prefix}-sys-color-tertiary-rgb: 160, 204, 194;
+    --#{$prefix}-sys-color-on-tertiary: #1A463E;
+    --#{$prefix}-sys-color-on-tertiary-rgb: 26, 70, 62;
+    --#{$prefix}-sys-color-tertiary-container: #315C53;
+    --#{$prefix}-sys-color-tertiary-container-rgb: 49, 92, 83;
+    --#{$prefix}-sys-color-on-tertiary-container: #CCE6DF;
+    --#{$prefix}-sys-color-on-tertiary-container-rgb: 204, 230, 223;
+
+    // Neutral colors for dark mode
+    --#{$prefix}-sys-color-surface: #191D1C;
+    --#{$prefix}-sys-color-surface-rgb: 25, 29, 28;
+    --#{$prefix}-sys-color-surface-dim: #121615;
+    --#{$prefix}-sys-color-surface-dim-rgb: 18, 22, 21;
+    --#{$prefix}-sys-color-surface-bright: #363B3A;
+    --#{$prefix}-sys-color-surface-bright-rgb: 54, 59, 58;
+    --#{$prefix}-sys-color-surface-container-lowest: #0E1211;
+    --#{$prefix}-sys-color-surface-container-lowest-rgb: 14, 18, 17;
+    --#{$prefix}-sys-color-surface-container-low: #191D1C;
+    --#{$prefix}-sys-color-surface-container-low-rgb: 25, 29, 28;
+    --#{$prefix}-sys-color-surface-container: #1E2221;
+    --#{$prefix}-sys-color-surface-container-rgb: 30, 34, 33;
+    --#{$prefix}-sys-color-surface-container-high: #282C2B;
+    --#{$prefix}-sys-color-surface-container-high-rgb: 40, 44, 43;
+    --#{$prefix}-sys-color-surface-container-highest: #333736;
+    --#{$prefix}-sys-color-surface-container-highest-rgb: 51, 55, 54;
+    
+    --#{$prefix}-sys-color-on-surface: #E1E3E3;
+    --#{$prefix}-sys-color-on-surface-rgb: 225, 227, 227;
+    --#{$prefix}-sys-color-on-surface-variant: #C1CCCB;
+    --#{$prefix}-sys-color-on-surface-variant-rgb: 193, 204, 203;
+    
+    --#{$prefix}-sys-color-outline: #8B9695;
+    --#{$prefix}-sys-color-outline-rgb: 139, 150, 149;
+    --#{$prefix}-sys-color-outline-variant: #404847;
+    --#{$prefix}-sys-color-outline-variant-rgb: 64, 72, 71;
+
+    // Include status colors for dark theme
+    @include status-colors-dark();
+  }
+}

package/src/styles/themes/_winter.scss

@@ -35,6 +35,9 @@
   --#{$prefix}-sys-color-outline: #70787D;
   --#{$prefix}-sys-color-outline-variant: #C0C8CC;
 
+  // Include status colors for light theme
+  @include status-colors-light();
+
   &[data-theme-mode="dark"] {
     // Key colors
     --#{$prefix}-sys-color-primary: #73D0EE;
@@ -67,5 +70,8 @@
     
     --#{$prefix}-sys-color-outline: #8A9297;
     --#{$prefix}-sys-color-outline-variant: #40484C;
+
+    // Include status colors for dark theme
+    @include status-colors-dark();
   }
 }

package/src/components/card/actions.ts

@@ -1,48 +0,0 @@
-// src/components/card/actions.ts
-import { PREFIX } from '../../core/config';
-import { pipe } from '../../core/compose';
-import { createBase, withElement } from '../../core/compose/component';
-import { CardActionsConfig } from './types';
-
-/**
- * Creates a card actions component
- * @param {CardActionsConfig} config - Actions configuration
- * @returns {HTMLElement} Card actions element
- */
-export const createCardActions = (config: CardActionsConfig = {}): HTMLElement => {
-  const baseConfig = {
-    ...config,
-    componentName: 'card-actions',
-    prefix: PREFIX
-  };
-
-  try {
-    const actions = pipe(
-      createBase,
-      withElement({
-        tag: 'div',
-        componentName: 'card-actions',
-        className: [
-          config.class,
-          config.fullBleed ? `${PREFIX}-card-actions--full-bleed` : null,
-          config.vertical ? `${PREFIX}-card-actions--vertical` : null,
-          config.align ? `${PREFIX}-card-actions--${config.align}` : null
-        ]
-      })
-    )(baseConfig);
-
-    // Add action elements if provided
-    if (Array.isArray(config.actions)) {
-      config.actions.forEach(action => {
-        if (action instanceof HTMLElement) {
-          actions.element.appendChild(action);
-        }
-      });
-    }
-
-    return actions.element;
-  } catch (error) {
-    console.error('Card actions creation error:', error instanceof Error ? error.message : String(error));
-    throw new Error(`Failed to create card actions: ${error instanceof Error ? error.message : String(error)}`);
-  }
-};

package/src/components/card/header.ts

@@ -1,88 +0,0 @@
-// src/components/card/header.ts
-import { PREFIX } from '../../core/config';
-import { pipe } from '../../core/compose';
-import { createBase, withElement } from '../../core/compose/component';
-import { createElement } from '../../core/dom/create';
-import { CardHeaderConfig } from './types';
-
-/**
- * Creates a card header component
- * @param {CardHeaderConfig} config - Header configuration
- * @returns {HTMLElement} Card header element
- */
-export const createCardHeader = (config: CardHeaderConfig = {}): HTMLElement => {
-  const baseConfig = {
-    ...config,
-    componentName: 'card-header',
-    prefix: PREFIX
-  };
-
-  try {
-    const header = pipe(
-      createBase,
-      withElement({
-        tag: 'div',
-        componentName: 'card-header',
-        className: config.class
-      })
-    )(baseConfig);
-
-    // Create text container
-    const textContainer = createElement({
-      tag: 'div',
-      className: `${PREFIX}-card-header-text`,
-      container: header.element
-    });
-
-    // Add title if provided
-    if (config.title) {
-      createElement({
-        tag: 'h3',
-        className: `${PREFIX}-card-header-title`,
-        text: config.title,
-        container: textContainer
-      });
-    }
-
-    // Add subtitle if provided
-    if (config.subtitle) {
-      createElement({
-        tag: 'h4',
-        className: `${PREFIX}-card-header-subtitle`,
-        text: config.subtitle,
-        container: textContainer
-      });
-    }
-
-    // Add avatar if provided
-    if (config.avatar) {
-      const avatarElement = typeof config.avatar === 'string'
-        ? createElement({
-          tag: 'div',
-          className: `${PREFIX}-card-header-avatar`,
-          html: config.avatar
-        })
-        : config.avatar;
-
-      header.element.insertBefore(avatarElement, header.element.firstChild);
-    }
-
-    // Add action if provided
-    if (config.action) {
-      const actionElement = typeof config.action === 'string'
-        ? createElement({
-          tag: 'div',
-          className: `${PREFIX}-card-header-action`,
-          html: config.action
-        })
-        : config.action;
-
-      header.element.appendChild(actionElement);
-    }
-
-    return header.element;
-  } catch (error) {
-    console.error('Card header creation error:', error instanceof Error ? error.message : String(error));
-    throw new Error(`Failed to create card header: ${error instanceof Error ? error.message : String(error)}`);
-  }
-};

package/src/components/card/media.ts

@@ -1,52 +0,0 @@
-// src/components/card/media.ts
-import { PREFIX } from '../../core/config';
-import { pipe } from '../../core/compose';
-import { createBase, withElement } from '../../core/compose/component';
-import { CardMediaConfig } from './types';
-
-/**
- * Creates a card media component
- * @param {CardMediaConfig} config - Media configuration
- * @returns {HTMLElement} Card media element
- */
-export const createCardMedia = (config: CardMediaConfig = {}): HTMLElement => {
-  const baseConfig = {
-    ...config,
-    componentName: 'card-media',
-    prefix: PREFIX
-  };
-
-  try {
-    const media = pipe(
-      createBase,
-      withElement({
-        tag: 'div',
-        componentName: 'card-media',
-        className: [
-          config.class,
-          config.aspectRatio ? `${PREFIX}-card-media--${config.aspectRatio.replace(':', '-')}` : null,
-          config.contain ? `${PREFIX}-card-media--contain` : null
-        ]
-      })
-    )(baseConfig);
-
-    // If custom element is provided, use it
-    if (config.element instanceof HTMLElement) {
-      media.element.appendChild(config.element);
-    }
-
-    // Otherwise create an image if src is provided
-    else if (config.src) {
-      const img = document.createElement('img');
-      img.src = config.src;
-      if (config.alt) img.alt = config.alt;
-      img.className = `${PREFIX}-card-media-img`;
-      media.element.appendChild(img);
-    }
-
-    return media.element;
-  } catch (error) {
-    console.error('Card media creation error:', error instanceof Error ? error.message : String(error));
-    throw new Error(`Failed to create card media: ${error instanceof Error ? error.message : String(error)}`);
-  }
-};

package/src/components/navigation/features/items.js

@@ -1,192 +0,0 @@
-// src/components/navigation/features/items.js
-import { createNavItem, getAllNestedItems } from '../nav-item'
-
-export const withNavItems = (config) => (component) => {
-  const items = new Map()
-  let activeItem = null
-
-  /**
-   * Recursively stores items in the items Map
-   * @param {Object} itemConfig - Item configuration
-   * @param {HTMLElement} item - Created item element
-   */
-  const storeItem = (itemConfig, item) => {
-    items.set(itemConfig.id, { element: item, config: itemConfig })
-
-    if (itemConfig.items?.length) {
-      itemConfig.items.forEach(nestedConfig => {
-        const container = item.closest(`.${config.prefix}-nav-item-container`)
-        const nestedContainer = container.querySelector(`.${config.prefix}-nav-nested-container`)
-        const nestedItem = nestedContainer.querySelector(`[data-id="${nestedConfig.id}"]`)
-        storeItem(nestedConfig, nestedItem)
-      })
-    }
-  }
-
-  // Create initial items
-  if (config.items) {
-    config.items.forEach(itemConfig => {
-      const item = createNavItem(itemConfig, component.element, config.prefix)
-      storeItem(itemConfig, item)
-
-      if (itemConfig.active) {
-        activeItem = { element: item, config: itemConfig }
-        item.classList.add(`${config.prefix}-nav-item--active`)
-        item.setAttribute('aria-selected', 'true')
-      }
-    })
-  }
-
-  // Handle item clicks
-  component.element.addEventListener('click', (event) => {
-    const item = event.target.closest(`.${config.prefix}-nav-item`)
-    if (!item || item.disabled || item.getAttribute('aria-haspopup') === 'true') return
-
-    const id = item.dataset.id
-    const itemData = items.get(id)
-    if (!itemData) return
-
-    // Store previous item before updating
-    const previousItem = activeItem
-
-    // Update active state
-    if (activeItem) {
-      activeItem.element.classList.remove(`${config.prefix}-nav-item--active`)
-      activeItem.element.setAttribute('aria-selected', 'false')
-    }
-
-    item.classList.add(`${config.prefix}-nav-item--active`)
-    item.setAttribute('aria-selected', 'true')
-    activeItem = itemData
-
-    // Emit change event with item data
-    component.emit('change', {
-      id,
-      item: itemData,
-      previousItem,
-      path: getItemPath(id)
-    })
-  })
-
-  /**
-   * Gets the path to an item (parent IDs)
-   * @param {string} id - Item ID to get path for
-   * @returns {Array<string>} Array of parent item IDs
-   */
-  const getItemPath = (id) => {
-    const path = []
-    let currentItem = items.get(id)
-
-    while (currentItem) {
-      const parentContainer = currentItem.element.closest(`.${config.prefix}-nav-nested-container`)
-      if (!parentContainer) break
-
-      const parentItem = parentContainer.previousElementSibling
-      if (!parentItem) break
-
-      const parentId = parentItem.dataset.id
-      if (!parentId) break
-
-      path.unshift(parentId)
-      currentItem = items.get(parentId)
-    }
-
-    return path
-  }
-
-  // Clean up when component is destroyed
-  if (component.lifecycle) {
-    const originalDestroy = component.lifecycle.destroy
-    component.lifecycle.destroy = () => {
-      items.clear()
-      originalDestroy?.()
-    }
-  }
-
-  return {
-    ...component,
-    items,
-
-    addItem (itemConfig) {
-      if (items.has(itemConfig.id)) return this
-
-      const item = createNavItem(itemConfig, component.element, config.prefix)
-      storeItem(itemConfig, item)
-
-      if (itemConfig.active) {
-        this.setActive(itemConfig.id)
-      }
-
-      component.emit('itemAdded', {
-        id: itemConfig.id,
-        item: { element: item, config: itemConfig }
-      })
-      return this
-    },
-
-    removeItem (id) {
-      const item = items.get(id)
-      if (!item) return this
-
-      // Remove all nested items first
-      const nestedItems = getAllNestedItems(item.element, config.prefix)
-      nestedItems.forEach(nestedItem => {
-        const nestedId = nestedItem.dataset.id
-        if (nestedId) items.delete(nestedId)
-      })
-
-      if (activeItem?.config.id === id) {
-        activeItem = null
-      }
-
-      // Remove the entire item container
-      const container = item.element.closest(`.${config.prefix}-nav-item-container`)
-      container?.remove()
-      items.delete(id)
-
-      component.emit('itemRemoved', { id, item })
-      return this
-    },
-
-    getItem: (id) => items.get(id),
-    getAllItems: () => Array.from(items.values()),
-    getActive: () => activeItem,
-    getItemPath: (id) => getItemPath(id),
-
-    setActive (id) {
-      const item = items.get(id)
-      if (!item || item.config.disabled) return this
-
-      if (activeItem) {
-        activeItem.element.classList.remove(`${config.prefix}-nav-item--active`)
-        activeItem.element.setAttribute('aria-selected', 'false')
-      }
-
-      item.element.classList.add(`${config.prefix}-nav-item--active`)
-      item.element.setAttribute('aria-selected', 'true')
-      activeItem = item
-
-      // Ensure all parent items are expanded
-      const path = getItemPath(id)
-      path.forEach(parentId => {
-        const parentItem = items.get(parentId)
-        if (parentItem) {
-          const parentButton = parentItem.element
-          const nestedContainer = parentButton.closest(`.${config.prefix}-nav-item-container`)
-            .querySelector(`.${config.prefix}-nav-nested-container`)
-
-          parentButton.setAttribute('aria-expanded', 'true')
-          nestedContainer.hidden = false
-        }
-      })
-
-      component.emit('activeChanged', {
-        id,
-        item,
-        previousItem: activeItem,
-        path: getItemPath(id)
-      })
-      return this
-    }
-  }
-}

package/src/components/slider/features/appearance.ts

@@ -1,94 +0,0 @@
-// src/components/slider/features/appearance.ts
-import { SLIDER_COLORS, SLIDER_SIZES } from '../constants';
-import { SliderConfig } from '../types';
-
-/**
- * Add appearance management features to slider component
- * @param config Slider configuration
- * @returns Component enhancer with appearance features
- */
-export const withAppearance = (config: SliderConfig) => component => {
-  return {
-    ...component,
-    appearance: {
-      /**
-       * Sets slider color
-       * @param color Color variant
-       */
-      setColor(color: keyof typeof SLIDER_COLORS | SLIDER_COLORS) {
-        // Remove existing color classes
-        Object.values(SLIDER_COLORS).forEach(colorName => {
-          component.element.classList.remove(`${component.getClass('slider')}--${colorName}`);
-        });
-        
-        // Add new color class if not primary (default)
-        if (color !== SLIDER_COLORS.PRIMARY) {
-          component.element.classList.add(`${component.getClass('slider')}--${color}`);
-        }
-      },
-      
-      /**
-       * Gets slider color
-       * @returns Current color name
-       */
-      getColor() {
-        // Find which color class is active
-        const colorClass = Object.values(SLIDER_COLORS).find(colorName => 
-          component.element.classList.contains(`${component.getClass('slider')}--${colorName}`)
-        );
-        
-        return colorClass || SLIDER_COLORS.PRIMARY;
-      },
-      
-      /**
-       * Sets slider size
-       * @param size Size variant
-       */
-      setSize(size: keyof typeof SLIDER_SIZES | SLIDER_SIZES) {
-        // Remove existing size classes
-        Object.values(SLIDER_SIZES).forEach(sizeName => {
-          component.element.classList.remove(`${component.getClass('slider')}--${sizeName}`);
-        });
-        
-        // Add new size class if not medium (default)
-        if (size !== SLIDER_SIZES.MEDIUM) {
-          component.element.classList.add(`${component.getClass('slider')}--${size}`);
-        }
-      },
-      
-      /**
-       * Gets slider size
-       * @returns Current size name
-       */
-      getSize() {
-        // Find which size class is active
-        const sizeClass = Object.values(SLIDER_SIZES).find(sizeName => 
-          component.element.classList.contains(`${component.getClass('slider')}--${sizeName}`)
-        );
-        
-        return sizeClass || SLIDER_SIZES.MEDIUM;
-      },
-      
-      /**
-       * Shows or hides tick marks
-       * @param show Whether to show ticks
-       */
-      showTicks(show: boolean) {
-        config.ticks = show;
-        
-        // Regenerate ticks if slider is initialized
-        if (component.slider) {
-          component.slider.regenerateTicks();
-        }
-      },
-      
-      /**
-       * Shows or hides current value bubble while dragging
-       * @param show Whether to show value bubble
-       */
-      showCurrentValue(show: boolean) {
-        config.showValue = show;
-      }
-    }
-  };
-};