mtrl 0.2.1 → 0.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mtrl",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "A functional JavaScript component library with composable architecture based on Material Design 3",
   "keywords": [
     "component",

package/src/components/card/constants.ts

@@ -21,6 +21,20 @@ export const CARD_ELEVATIONS = {
   DRAGGED: CardElevation.DRAGGED
 };
 
+// Default width values following MD3 principles
+export const CARD_WIDTHS = {
+  // Mobile-optimized default (MD3 recommends 344dp for small screens)
+  DEFAULT: '344px',
+  // Percentage-based responsive options
+  FULL: '100%',
+  HALF: '50%',
+  // Fixed widths for different breakpoints
+  SMALL: '344px',
+  MEDIUM: '480px',
+  LARGE: '624px'
+}
+
+
 /**
  * Validation schema for card configuration
  */

package/src/components/chip/_styles.scss

@@ -13,25 +13,21 @@ $component: '#{base.$prefix}-chip';
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  height: 32px;
-  padding: 0 12px;
-  border: none;
-  border-radius: 8px;
+  height: v.chip('height');
+  padding: 0 v.chip('padding-horizontal');
+  border-radius: v.chip('border-radius');
   background-color: transparent;
-  color: inherit;
-  font: inherit;
-  text-decoration: none;
-  cursor: pointer;
-  user-select: none;
-  vertical-align: middle;
-  appearance: none;
+  max-width: 100%;
   overflow: hidden;
-  transition: background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, 
-              border-color 0.15s ease, opacity 0.15s ease;
+  user-select: none;
+  cursor: pointer;
   
   // Typography
   @include m.typography('label-large');
   
+  // Interaction styles
+  @include m.motion-transition(background-color, color, border-color, box-shadow);
+  
   // Focus styles
   &:focus {
     outline: none;
@@ -43,50 +39,57 @@ $component: '#{base.$prefix}-chip';
   }
   
   // Disabled state
-  &[aria-disabled="true"] {
-    pointer-events: none;
+  &--disabled {
     opacity: 0.38;
+    pointer-events: none;
   }
   
-  // Leading icon styles
-  &-icon {
-    display: inline-flex;
+  // Content container
+  &-content {
+    display: flex;
     align-items: center;
     justify-content: center;
-    width: 18px;
-    height: 18px;
-    margin-right: 8px;
-    
-    svg {
-      width: 18px;
-      height: 18px;
-    }
+    width: 100%;
+    height: 100%;
   }
   
-  // Trailing icon styles
+  // Ensure proper layout with icons
+  &-leading-icon,
   &-trailing-icon {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 18px;
     height: 18px;
-    margin-left: 8px;
     
     svg {
       width: 18px;
       height: 18px;
     }
+  }
+  
+  &-leading-icon {
+    margin-right: 8px;
+  }
+  
+  &-trailing-icon {
+    margin-left: 8px;
     
     &:hover {
-      opacity: 0.8;
+      opacity: 0.7;
     }
   }
   
-  // Text content
   &-text {
     // Text truncation for long chip labels
     @include m.truncate;
-    max-width: 150px;
+  }
+  
+  // Selected state
+  &--selected {
+    // Default selected state styling (can be overridden by variants)
+    background-color: t.alpha('on-surface', 0.12);
+    font-weight: 500;
   }
   
   // Ripple container
@@ -99,9 +102,7 @@ $component: '#{base.$prefix}-chip';
     opacity: 0.12;
   }
   
-  // === VARIANTS ===
-  
-  // Filled chip (default)
+  // Variants
   &--filled {
     background-color: t.color('surface-container-highest');
     color: t.color('on-surface');
@@ -128,7 +129,6 @@ $component: '#{base.$prefix}-chip';
     }
   }
   
-  // Outlined chip
   &--outlined {
     border: 1px solid t.color('outline');
     color: t.color('on-surface');
@@ -142,21 +142,16 @@ $component: '#{base.$prefix}-chip';
     }
     
     &.#{$component}--selected {
-      border-color: t.color('secondary');
+      border-color: t.color('outline');
       background-color: t.color('secondary-container');
       color: t.color('on-secondary-container');
       
       &:hover {
         @include m.state-layer(t.color('on-secondary-container'), 'hover');
       }
-      
-      &:active {
-        @include m.state-layer(t.color('on-secondary-container'), 'pressed');
-      }
     }
   }
   
-  // Elevated chip
   &--elevated {
     background-color: t.color('surface-container-low');
     color: t.color('on-surface');
@@ -179,109 +174,79 @@ $component: '#{base.$prefix}-chip';
       &:hover {
         @include m.state-layer(t.color('on-secondary-container'), 'hover');
       }
-      
-      &:active {
-        @include m.state-layer(t.color('on-secondary-container'), 'pressed');
-      }
-    }
-    
-    &[aria-disabled="true"] {
-      @include m.elevation(0);
-      box-shadow: none;
     }
   }
   
-  // Assist chip
-  &--assist {
-    background-color: t.color('surface-container');
+  // Filter chip specific styling
+  &--filter {
+    background-color: t.color('surface-container-highest');
     color: t.color('on-surface');
     
     &:hover {
       @include m.state-layer(t.color('on-surface'), 'hover');
     }
     
-    &:active {
-      @include m.state-layer(t.color('on-surface'), 'pressed');
-    }
-    
-    .#{$component}-icon {
-      color: t.color('primary');
+    &.#{$component}--selected {
+      background-color: t.color('secondary-container');
+      color: t.color('on-secondary-container');
+      
+      .#{$component}-leading-icon {
+        color: t.color('on-secondary-container');
+      }
     }
   }
   
-  // Filter chip
-  &--filter {
-    background-color: t.color('surface-container-highest');
+  // Assist chip specific styling
+  &--assist {
+    background-color: t.color('surface-container-low');
     color: t.color('on-surface');
     
-    &:hover {
-      @include m.state-layer(t.color('on-surface'), 'hover');
-    }
-    
-    &:active {
-      @include m.state-layer(t.color('on-surface'), 'pressed');
+    .#{$component}-leading-icon {
+      color: t.color('primary');
     }
     
     &.#{$component}--selected {
       background-color: t.color('secondary-container');
       color: t.color('on-secondary-container');
       
-      &:hover {
-        @include m.state-layer(t.color('on-secondary-container'), 'hover');
-      }
-      
-      &:active {
-        @include m.state-layer(t.color('on-secondary-container'), 'pressed');
-      }
-      
-      // Checkmark icon for selected filter chips
-      .#{$component}-icon {
+      .#{$component}-leading-icon {
         color: t.color('on-secondary-container');
       }
     }
   }
   
-  // Input chip
+  // Input chip specific styling
   &--input {
     background-color: t.color('surface-container-highest');
     color: t.color('on-surface');
-    padding-right: 8px; // Less padding on the right to accommodate the trailing icon
-    
-    &:hover {
-      @include m.state-layer(t.color('on-surface'), 'hover');
-    }
     
     .#{$component}-trailing-icon {
-      color: t.color('on-surface-variant');
+      cursor: pointer;
       
       &:hover {
-        color: t.color('on-surface');
+        color: t.color('error');
       }
     }
   }
   
-  // Suggestion chip
+  // Suggestion chip styling
   &--suggestion {
     background-color: t.color('surface-container');
     color: t.color('on-surface');
     
-    &:hover {
-      @include m.state-layer(t.color('on-surface'), 'hover');
-    }
-    
-    &:active {
-      @include m.state-layer(t.color('on-surface'), 'pressed');
+    &.#{$component}--selected {
+      background-color: t.color('secondary-container');
+      color: t.color('on-secondary-container');
     }
   }
   
-  // === SIZES ===
-  
+  // Size variants
   &--small {
     height: 24px;
     padding: 0 8px;
     font-size: 12px;
     
-    .#{$component}-icon,
+    .#{$component}-leading-icon,
     .#{$component}-trailing-icon {
       width: 16px;
       height: 16px;
@@ -291,23 +256,18 @@ $component: '#{base.$prefix}-chip';
         height: 16px;
       }
     }
-    
-    .#{$component}-icon {
-      margin-right: 4px;
-    }
-    
-    .#{$component}-trailing-icon {
-      margin-left: 4px;
-    }
+  }
+  
+  &--medium {
+    // Default size, styles already defined
   }
   
   &--large {
     height: 40px;
     padding: 0 16px;
-    font-size: 15px;
-    border-radius: 12px;
+    font-size: 16px;
     
-    .#{$component}-icon,
+    .#{$component}-leading-icon,
     .#{$component}-trailing-icon {
       width: 20px;
       height: 20px;
@@ -317,40 +277,11 @@ $component: '#{base.$prefix}-chip';
         height: 20px;
       }
     }
-    
-    .#{$component}-icon {
-      margin-right: 10px;
-    }
-    
-    .#{$component}-trailing-icon {
-      margin-left: 10px;
-    }
-  }
-  
-  // === SPECIAL CASES ===
-  
-  // For chips with only icons (no text)
-  &--icon-only {
-    padding: 0;
-    width: 32px;
-    
-    &.#{$component}--small {
-      width: 24px;
-    }
-    
-    &.#{$component}--large {
-      width: 40px;
-    }
-    
-    .#{$component}-icon {
-      margin-right: 0;
-    }
   }
 }
 
-// === CHIP SET STYLES ===
-
-.#{$component}-set {
+// Chip set container
+.#{base.$prefix}-chip-set {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
@@ -358,11 +289,23 @@ $component: '#{base.$prefix}-chip';
   &--scrollable {
     flex-wrap: nowrap;
     overflow-x: auto;
-    scrollbar-width: none; // Firefox
+    padding-bottom: 8px;
+    margin-bottom: -8px; // Compensate for padding to maintain vertical alignment
+    -webkit-overflow-scrolling: touch; // Smooth scrolling on iOS
     
+    // Hide scrollbar in various browsers while maintaining functionality
     &::-webkit-scrollbar {
-      display: none; // Chrome, Safari, Edge
+      height: 4px;
     }
+    
+    &::-webkit-scrollbar-thumb {
+      background-color: t.alpha('on-surface', 0.2);
+      border-radius: 4px;
+    }
+    
+    // Style for Firefox
+    scrollbar-width: thin;
+    scrollbar-color: t.alpha('on-surface', 0.2) transparent;
   }
   
   &--vertical {

package/src/components/chip/api.ts

@@ -8,108 +8,237 @@
  * @returns {Function} Higher-order function that adds API methods to component
  * @internal This is an internal utility for the Chip component
  */
-export const withAPI = ({ disabled, lifecycle }) => (component) => ({
-  ...component,
-  element: component.element,
-
-  /**
-   * Gets the chip's value
-   * @returns {string} The chip's value attribute
-   */
-  getValue: () => component.element.getAttribute('data-value'),
-
-  /**
-   * Sets the chip's value
-   * @param {string} value - Value to set
-   * @returns {Object} The chip instance for chaining
-   */
-  setValue (value) {
-    component.element.setAttribute('data-value', value)
-    return this
-  },
-
-  /**
-   * Enables the chip
-   * @returns {Object} The chip instance for chaining
-   */
-  enable () {
-    disabled.enable()
-    component.element.setAttribute('aria-disabled', 'false')
-    return this
-  },
-
-  /**
-   * Disables the chip
-   * @returns {Object} The chip instance for chaining
-   */
-  disable () {
-    disabled.disable()
-    component.element.setAttribute('aria-disabled', 'true')
-    return this
-  },
-
-  /**
-   * Sets the chip's text content
-   * @param {string} content - Text content
-   * @returns {Object} The chip instance for chaining
-   */
-  setText (content) {
-    component.text.setText(content)
-    return this
-  },
-
-  /**
-   * Gets the chip's text content
-   * @returns {string} The chip's text content
-   */
-  getText () {
-    return component.text.getText()
-  },
-
-  /**
-   * Sets the chip's leading icon
-   * @param {string} icon - Icon HTML content
-   * @returns {Object} The chip instance for chaining
-   */
-  setIcon (icon) {
-    component.icon.setIcon(icon)
-    return this
-  },
-
-  /**
-   * Gets the chip's icon content
-   * @returns {string} The chip's icon HTML
-   */
-  getIcon () {
-    return component.icon.getIcon()
-  },
-
-  /**
-   * Sets the chip's trailing icon
-   * @param {string} icon - Icon HTML content
-   * @returns {Object} The chip instance for chaining
-   */
-  setTrailingIcon (icon) {
-    const trailingIconSelector = `.${component.getClass('chip')}-trailing-icon`
-    let trailingIconElement = component.element.querySelector(trailingIconSelector)
-
-    if (!trailingIconElement && icon) {
-      trailingIconElement = document.createElement('span')
-      trailingIconElement.className = `${component.getClass('chip')}-trailing-icon`
-      component.element.appendChild(trailingIconElement)
-    }
+export const withAPI = ({ disabled, lifecycle }) => (component) => {
+  // Track selected state internally
+  let isSelected = component.element.classList.contains(`${component.getClass('chip')}--selected`);
+  
+  return {
+    ...component,
+    element: component.element,
 
-    if (trailingIconElement) {
-      trailingIconElement.innerHTML = icon || ''
-    }
+    /**
+     * Gets the chip's value
+     * @returns {string} The chip's value attribute
+     */
+    getValue() {
+      return component.element.getAttribute('data-value') || '';
+    },
+
+    /**
+     * Sets the chip's value
+     * @param {string} value - Value to set
+     * @returns {Object} The chip instance for chaining
+     */
+    setValue(value) {
+      component.element.setAttribute('data-value', value || '');
+      return this;
+    },
+
+    /**
+     * Checks if the chip is disabled
+     * @returns {boolean} True if the chip is disabled
+     */
+    isDisabled() {
+      return component.element.getAttribute('aria-disabled') === 'true';
+    },
+
+    /**
+     * Enables the chip
+     * @returns {Object} The chip instance for chaining
+     */
+    enable() {
+      disabled.enable();
+      component.element.classList.remove(`${component.getClass('chip')}--disabled`);
+      component.element.setAttribute('aria-disabled', 'false');
+      component.element.setAttribute('tabindex', '0');
+      return this;
+    },
+
+    /**
+     * Disables the chip
+     * @returns {Object} The chip instance for chaining
+     */
+    disable() {
+      disabled.disable();
+      component.element.classList.add(`${component.getClass('chip')}--disabled`);
+      component.element.setAttribute('aria-disabled', 'true');
+      component.element.setAttribute('tabindex', '-1');
+      return this;
+    },
+
+    /**
+     * Sets the chip's text content
+     * @param {string} content - Text content
+     * @returns {Object} The chip instance for chaining
+     */
+    setText(content) {
+      const containerSelector = `.${component.getClass('chip')}-content`;
+      const contentContainer = component.element.querySelector(containerSelector) || component.element;
+      
+      const textSelector = `.${component.getClass('chip')}-text`;
+      let textElement = component.element.querySelector(textSelector);
+      
+      if (!textElement && content) {
+        textElement = document.createElement('span');
+        textElement.className = `${component.getClass('chip')}-text`;
+        
+        // Find the right position to insert (after leading icon if present, or as first child)
+        const leadingIcon = component.element.querySelector(`.${component.getClass('chip')}-leading-icon`);
+        if (leadingIcon) {
+          contentContainer.insertBefore(textElement, leadingIcon.nextSibling);
+        } else {
+          contentContainer.insertBefore(textElement, contentContainer.firstChild);
+        }
+      }
+      
+      if (textElement) {
+        textElement.textContent = content || '';
+        
+        // Remove the element if content is empty
+        if (!content && textElement.parentNode) {
+          textElement.parentNode.removeChild(textElement);
+        }
+      }
+      
+      return this;
+    },
+
+    /**
+     * Gets the chip's text content
+     * @returns {string} The chip's text content
+     */
+    getText() {
+      const textElement = component.element.querySelector(`.${component.getClass('chip')}-text`);
+      return textElement ? textElement.textContent : '';
+    },
+
+    /**
+     * Sets the chip's leading icon (alias for setLeadingIcon)
+     * @param {string} icon - Icon HTML content
+     * @returns {Object} The chip instance for chaining
+     */
+    setIcon(icon) {
+      return this.setLeadingIcon(icon);
+    },
 
-    return this
-  },
+    /**
+     * Gets the chip's icon content
+     * @returns {string} The chip's icon HTML
+     */
+    getIcon() {
+      const iconElement = component.element.querySelector(`.${component.getClass('chip')}-leading-icon`);
+      return iconElement ? iconElement.innerHTML : '';
+    },
 
-  /**
-   * Destroys the chip component and cleans up resources
-   */
-  destroy () {
-    lifecycle.destroy()
-  }
-})
+    /**
+     * Sets the chip's leading icon
+     * @param {string} icon - Icon HTML content
+     * @returns {Object} The chip instance for chaining
+     */
+    setLeadingIcon(icon) {
+      const contentContainer = component.element.querySelector(`.${component.getClass('chip')}-content`) || component.element;
+      const leadingIconSelector = `.${component.getClass('chip')}-leading-icon`;
+      let leadingIconElement = component.element.querySelector(leadingIconSelector);
+
+      if (!leadingIconElement && icon) {
+        leadingIconElement = document.createElement('span');
+        leadingIconElement.className = `${component.getClass('chip')}-leading-icon`;
+        
+        // Insert as first child of the content container
+        contentContainer.insertBefore(leadingIconElement, contentContainer.firstChild);
+      }
+
+      if (leadingIconElement) {
+        leadingIconElement.innerHTML = icon || '';
+        
+        // Remove the element if icon is empty
+        if (!icon && leadingIconElement.parentNode) {
+          leadingIconElement.parentNode.removeChild(leadingIconElement);
+        }
+      }
+
+      return this;
+    },
+
+    /**
+     * Sets the chip's trailing icon
+     * @param {string} icon - Icon HTML content
+     * @param {Function} [onClick] - Click handler for the trailing icon
+     * @returns {Object} The chip instance for chaining
+     */
+    setTrailingIcon(icon, onClick) {
+      const contentContainer = component.element.querySelector(`.${component.getClass('chip')}-content`) || component.element;
+      const trailingIconSelector = `.${component.getClass('chip')}-trailing-icon`;
+      let trailingIconElement = component.element.querySelector(trailingIconSelector);
+
+      if (!trailingIconElement && icon) {
+        trailingIconElement = document.createElement('span');
+        trailingIconElement.className = `${component.getClass('chip')}-trailing-icon`;
+        
+        // Add as last child of content container
+        contentContainer.appendChild(trailingIconElement);
+        
+        // Add click handler if provided
+        if (onClick) {
+          trailingIconElement.addEventListener('click', (e) => {
+            e.stopPropagation(); // Prevent chip click event
+            onClick(this);
+          });
+        }
+      }
+
+      if (trailingIconElement) {
+        trailingIconElement.innerHTML = icon || '';
+        
+        // Remove the element if icon is empty
+        if (!icon && trailingIconElement.parentNode) {
+          trailingIconElement.parentNode.removeChild(trailingIconElement);
+        }
+      }
+
+      return this;
+    },
+    
+    /**
+     * Checks if the chip is selected
+     * @returns {boolean} True if the chip is selected
+     */
+    isSelected() {
+      return isSelected;
+    },
+    
+    /**
+     * Sets the chip's selected state
+     * @param {boolean} selected - Whether the chip should be selected
+     * @returns {Object} The chip instance for chaining
+     */
+    setSelected(selected) {
+      isSelected = !!selected;
+      
+      if (selected) {
+        component.element.classList.add(`${component.getClass('chip')}--selected`);
+        component.element.setAttribute('aria-selected', 'true');
+      } else {
+        component.element.classList.remove(`${component.getClass('chip')}--selected`);
+        component.element.setAttribute('aria-selected', 'false');
+      }
+      
+      return this;
+    },
+    
+    /**
+     * Toggles the chip's selected state
+     * @returns {Object} The chip instance for chaining
+     */
+    toggleSelected() {
+      return this.setSelected(!isSelected);
+    },
+
+    /**
+     * Destroys the chip component and cleans up resources
+     */
+    destroy() {
+      lifecycle.destroy();
+    }
+  };
+};

package/src/components/chip/chip.ts

@@ -1,6 +1,7 @@
-// src/components/chip/chip.ts
-import { pipe } from '../../core/compose';
-import { createBase, withElement } from '../../core/compose/component';
+// src/components/chip/chip.js
+import { PREFIX } from '../../core/config'
+import { pipe } from '../../core/compose'
+import { createBase, withElement } from '../../core/compose/component'
 import {
   withEvents,
   withText,
@@ -10,72 +11,383 @@ import {
   withRipple,
   withDisabled,
   withLifecycle
-} from '../../core/compose/features';
-import { withAPI } from './api';
-import { ChipConfig, ChipComponent, BaseComponent } from './types';
-import { createBaseConfig, getElementConfig, getApiConfig } from './config';
+} from '../../core/compose/features'
+import { withAPI } from './api'
+import { CHIP_VARIANTS, CHIP_SIZES } from './constants'
 
 /**
  * Creates a new Chip component
- * @param {ChipConfig} config - Chip configuration object
- * @returns {ChipComponent} Chip component instance
+ * @param {Object} config - Chip configuration
+ * @param {string} [config.variant='filled'] - Chip variant
+ * @param {string} [config.size='medium'] - Chip size
+ * @param {boolean} [config.selected=false] - Whether the chip is initially selected
+ * @param {boolean} [config.disabled=false] - Whether the chip is initially disabled
+ * @param {string} [config.text] - Chip text content
+ * @param {string} [config.leadingIcon] - Leading icon HTML content
+ * @param {string} [config.trailingIcon] - Trailing icon HTML content
+ * @param {string} [config.class] - Additional CSS classes
+ * @param {string} [config.value] - Chip value
+ * @param {boolean} [config.ripple=true] - Whether to enable ripple effect
+ * @param {Function} [config.onTrailingIconClick] - Callback when trailing icon is clicked
+ * @param {Function} [config.onSelect] - Callback when chip is selected
+ * @param {Function} [config.onChange] - Callback when chip selection changes
+ * @returns {Object} Chip component instance
  */
-const createChip = (config: ChipConfig = {}): ChipComponent => {
-  const baseConfig = createBaseConfig(config);
+const createChip = (config = {}) => {
+  const baseConfig = {
+    ...config,
+    variant: config.variant || CHIP_VARIANTS.FILLED,
+    size: config.size || CHIP_SIZES.MEDIUM,
+    componentName: 'chip',
+    prefix: PREFIX,
+    ripple: config.ripple !== false
+  }
 
   try {
+    // Create base component with core features
     const chip = pipe(
       createBase,
       withEvents(),
-      withElement(getElementConfig(baseConfig)),
-      withVariant(baseConfig),
-      withSize(baseConfig),
-      withText(baseConfig),
-      withIcon({
-        ...baseConfig,
-        position: 'start',
-        iconContent: config.leadingIcon || config.icon
+      withElement({
+        tag: 'div',
+        componentName: 'chip',
+        attrs: {
+          role: 'button',
+          tabindex: '0',
+          'aria-disabled': config.disabled ? 'true' : 'false',
+          'aria-selected': config.selected ? 'true' : 'false',
+          'data-value': config.value || ''
+        },
+        className: config.class,
+        forwardEvents: {
+          click: (component) => component.element.getAttribute('aria-disabled') !== 'true',
+          focus: true,
+          blur: true
+        }
       }),
-      withDisabled(baseConfig),
-      withRipple(baseConfig),
-      withLifecycle(),
-      comp => withAPI(getApiConfig(comp))(comp)
-    )(baseConfig);
+      withLifecycle()
+    )(baseConfig)
+    
+    // Track selected state
+    let isSelectedState = !!config.selected;
+    
+    // Manually add the variant class
+    if (config.variant) {
+      chip.element.classList.add(`${chip.getClass('chip')}--${config.variant}`)
+    }
+    
+    // Manually add the size class
+    if (config.size) {
+      chip.element.classList.add(`${chip.getClass('chip')}--${config.size}`)
+    }
+    
+    // Add ripple if enabled
+    if (config.ripple) {
+      withRipple(baseConfig)(chip)
+    }
+    
+    // Add disabled state if needed
+    if (config.disabled) {
+      withDisabled(baseConfig)(chip)
+    }
+
+    // Add selected class if needed
+    if (config.selected) {
+      chip.element.classList.add(`${chip.getClass('chip')}--selected`)
+    }
+
+    // Create a container for the chip content to ensure proper ordering
+    const contentContainer = document.createElement('div')
+    contentContainer.className = `${chip.getClass('chip')}-content`
+    contentContainer.style.display = 'flex'
+    contentContainer.style.alignItems = 'center'
+    contentContainer.style.justifyContent = 'center'
+    contentContainer.style.width = '100%'
+    chip.element.appendChild(contentContainer)
+    
+    // Add leading icon if provided
+    if (config.leadingIcon) {
+      const leadingIconElement = document.createElement('span')
+      leadingIconElement.className = `${chip.getClass('chip')}-leading-icon`
+      leadingIconElement.innerHTML = config.leadingIcon
+      contentContainer.appendChild(leadingIconElement)
+    }
+
+    // Add text element if provided
+    if (config.text) {
+      const textElement = document.createElement('span')
+      textElement.className = `${chip.getClass('chip')}-text`
+      textElement.textContent = config.text
+      contentContainer.appendChild(textElement)
+    }
 
     // Add trailing icon if provided
     if (config.trailingIcon) {
-      const trailingIconElement = document.createElement('span');
-      trailingIconElement.className = `${baseConfig.prefix}-chip-trailing-icon`;
-      trailingIconElement.innerHTML = config.trailingIcon;
-      chip.element.appendChild(trailingIconElement);
-
-      // Add event listener for remove/close action if needed
+      const trailingIconElement = document.createElement('span')
+      trailingIconElement.className = `${chip.getClass('chip')}-trailing-icon`
+      trailingIconElement.innerHTML = config.trailingIcon
+      
+      // Add click handler for trailing icon
       if (config.onTrailingIconClick) {
         trailingIconElement.addEventListener('click', (e) => {
-          e.stopPropagation();
-          config.onTrailingIconClick!(chip as ChipComponent);
-        });
+          e.stopPropagation() // Prevent chip click event
+          config.onTrailingIconClick(enhancedChip)
+        })
       }
+      
+      contentContainer.appendChild(trailingIconElement)
     }
 
-    // Initialize selected state if needed
-    if (config.selected) {
-      (chip as ChipComponent).setSelected(true);
-    }
+    // Create enhanced component with API
+    const enhancedChip = {
+      ...chip,
+      
+      /**
+       * Checks if the chip is disabled
+       * @returns {boolean} True if the chip is disabled
+       */
+      isDisabled() {
+        return chip.element.getAttribute('aria-disabled') === 'true';
+      },
+      
+      /**
+       * Checks if the chip is selected
+       * @returns {boolean} True if the chip is selected
+       */
+      isSelected() {
+        return isSelectedState;
+      },
+      
+      /**
+       * Sets the chip's selected state
+       * @param {boolean} selected - Whether the chip should be selected
+       * @returns {Object} The chip instance for chaining
+       */
+      setSelected(selected) {
+        isSelectedState = !!selected;
+        
+        if (selected) {
+          chip.element.classList.add(`${chip.getClass('chip')}--selected`);
+          chip.element.setAttribute('aria-selected', 'true');
+        } else {
+          chip.element.classList.remove(`${chip.getClass('chip')}--selected`);
+          chip.element.setAttribute('aria-selected', 'false');
+        }
+        
+        return this;
+      },
+      
+      /**
+       * Toggles the chip's selected state
+       * @returns {Object} The chip instance for chaining
+       */
+      toggleSelected() {
+        return this.setSelected(!isSelectedState);
+      },
+      
+      /**
+       * Gets the chip's value
+       * @returns {string} The chip's value
+       */
+      getValue() {
+        return chip.element.getAttribute('data-value');
+      },
+      
+      /**
+       * Sets the chip's value
+       * @param {string} value - Value to set
+       * @returns {Object} The chip instance for chaining
+       */
+      setValue(value) {
+        chip.element.setAttribute('data-value', value);
+        return this;
+      },
+      
+      /**
+       * Enables the chip
+       * @returns {Object} The chip instance for chaining
+       */
+      enable() {
+        chip.element.classList.remove(`${chip.getClass('chip')}--disabled`);
+        chip.element.setAttribute('aria-disabled', 'false');
+        chip.element.setAttribute('tabindex', '0');
+        return this;
+      },
+      
+      /**
+       * Disables the chip
+       * @returns {Object} The chip instance for chaining
+       */
+      disable() {
+        chip.element.classList.add(`${chip.getClass('chip')}--disabled`);
+        chip.element.setAttribute('aria-disabled', 'true');
+        chip.element.setAttribute('tabindex', '-1');
+        return this;
+      },
+      
+      /**
+       * Sets the chip's text content
+       * @param {string} content - Text content
+       * @returns {Object} The chip instance for chaining
+       */
+      setText(content) {
+        const textElement = chip.element.querySelector(`.${chip.getClass('chip')}-text`);
+        
+        if (textElement) {
+          textElement.textContent = content;
+        } else if (content) {
+          const newTextElement = document.createElement('span');
+          newTextElement.className = `${chip.getClass('chip')}-text`;
+          newTextElement.textContent = content;
+          contentContainer.appendChild(newTextElement);
+        }
+        
+        return this;
+      },
+      
+      /**
+       * Gets the chip's text content
+       * @returns {string} The chip's text content
+       */
+      getText() {
+        const textElement = chip.element.querySelector(`.${chip.getClass('chip')}-text`);
+        return textElement ? textElement.textContent : '';
+      },
+      
+      /**
+       * Sets the chip's icon
+       * @param {string} icon - Icon HTML content
+       * @returns {Object} The chip instance for chaining
+       */
+      setIcon(icon) {
+        return this.setLeadingIcon(icon);
+      },
+      
+      /**
+       * Gets the chip's icon
+       * @returns {string} The chip's icon HTML
+       */
+      getIcon() {
+        const iconElement = chip.element.querySelector(`.${chip.getClass('chip')}-leading-icon`);
+        return iconElement ? iconElement.innerHTML : '';
+      },
+      
+      /**
+       * Sets the chip's leading icon
+       * @param {string} icon - Icon HTML content
+       * @returns {Object} The chip instance for chaining
+       */
+      setLeadingIcon(icon) {
+        const leadingIconSelector = `.${chip.getClass('chip')}-leading-icon`;
+        let leadingIconElement = chip.element.querySelector(leadingIconSelector);
+        
+        if (!leadingIconElement && icon) {
+          leadingIconElement = document.createElement('span');
+          leadingIconElement.className = `${chip.getClass('chip')}-leading-icon`;
+          
+          // Insert at the beginning of the content container
+          contentContainer.insertBefore(leadingIconElement, contentContainer.firstChild);
+        }
+        
+        if (leadingIconElement) {
+          leadingIconElement.innerHTML = icon || '';
+          
+          // Remove the element if icon is empty
+          if (!icon && leadingIconElement.parentNode) {
+            leadingIconElement.parentNode.removeChild(leadingIconElement);
+          }
+        }
+        
+        return this;
+      },
+      
+      /**
+       * Sets the chip's trailing icon
+       * @param {string} icon - Icon HTML content
+       * @param {Function} [onClick] - Click handler for the trailing icon
+       * @returns {Object} The chip instance for chaining
+       */
+      setTrailingIcon(icon, onClick) {
+        const trailingIconSelector = `.${chip.getClass('chip')}-trailing-icon`;
+        let trailingIconElement = chip.element.querySelector(trailingIconSelector);
+        
+        if (!trailingIconElement && icon) {
+          trailingIconElement = document.createElement('span');
+          trailingIconElement.className = `${chip.getClass('chip')}-trailing-icon`;
+          
+          // Add at the end of the content container
+          contentContainer.appendChild(trailingIconElement);
+          
+          // Add click handler if provided
+          if (onClick) {
+            trailingIconElement.addEventListener('click', (e) => {
+              e.stopPropagation(); // Prevent chip click event
+              onClick(this);
+            });
+          }
+        }
+        
+        if (trailingIconElement) {
+          trailingIconElement.innerHTML = icon || '';
+          
+          // Remove the element if icon is empty
+          if (!icon && trailingIconElement.parentNode) {
+            trailingIconElement.parentNode.removeChild(trailingIconElement);
+          }
+        }
+        
+        return this;
+      },
+      
+      /**
+       * Destroys the chip component and cleans up resources
+       */
+      destroy() {
+        chip.lifecycle && chip.lifecycle.destroy && chip.lifecycle.destroy();
+        chip.element.remove();
+      },
+      
+      // Forward event methods from the original chip
+      on: chip.on,
+      off: chip.off,
+      
+      /**
+       * Add CSS classes to the chip element
+       * @param {...string} classes - CSS classes to add
+       * @returns {Object} The chip instance for chaining
+       */
+      addClass(...classes) {
+        chip.element.classList.add(...classes);
+        return this;
+      }
+    };
 
-    // Handle selection callback
-    if (config.onSelect) {
+    // Add click handler for selection toggle
+    if (config.variant === CHIP_VARIANTS.FILTER || 
+        config.variant === CHIP_VARIANTS.ASSIST ||
+        config.selectable) {
+      
       chip.element.addEventListener('click', () => {
-        if (chip.element.getAttribute('aria-disabled') !== 'true') {
-          config.onSelect!(chip as ChipComponent);
+        if (enhancedChip.isDisabled()) return;
+        
+        enhancedChip.toggleSelected();
+        
+        // Call onChange callback if provided
+        if (config.onChange) {
+          config.onChange(enhancedChip);
+        }
+        
+        // Call onSelect callback if provided
+        if (config.onSelect) {
+          config.onSelect(enhancedChip);
         }
       });
     }
 
-    return chip as ChipComponent;
+    return enhancedChip;
   } catch (error) {
-    console.error('Chip creation error:', error instanceof Error ? error.message : String(error));
-    throw new Error(`Failed to create chip: ${error instanceof Error ? error.message : String(error)}`);
+    console.error('Chip creation error:', error);
+    throw new Error(`Failed to create chip: ${error.message}`);
   }
 };
 

package/src/components/chip/constants.ts

@@ -1,4 +1,4 @@
-// src/components/chip/constants.ts
+// src/components/chip/constants.js
 
 /**
  * Available variants for the Chip component
@@ -25,7 +25,7 @@ export const CHIP_VARIANTS = {
 
   /** Suggestion chip for presenting options */
   SUGGESTION: 'suggestion'
-} as const;
+};
 
 /**
  * Available sizes for the Chip component
@@ -35,4 +35,4 @@ export const CHIP_SIZES = {
   SMALL: 'small',
   MEDIUM: 'medium',
   LARGE: 'large'
-} as const;
+};

package/src/components/chip/index.ts

@@ -1,4 +1,4 @@
-// src/components/chip/index.ts
+// src/components/chip/index.js
 export { default } from './chip'
-export { CHIP_VARIANTS, CHIP_SIZES } from './constants'
-export { ChipConfig, ChipComponent } from './types'
+export { default as createChipSet } from './chip-set'
+export { CHIP_VARIANTS, CHIP_SIZES } from './constants'

package/src/styles/abstract/_variables.scss

@@ -180,6 +180,18 @@ $z-index: (
 ) !default;
 
 // Component-specific tokens
+@function card($key) {
+  $card: (
+    'width': 344px,
+    'width-small': 344px,
+    'width-medium': 480px,
+    'width-large': 624px,
+    'border-radius': 12px,
+    'padding': 16px
+  );
+  
+  @return map-get($card, $key);
+}
 $button: (
   'height': 40px,
   'min-width': 64px,