mtrl 0.2.4 → 0.2.6

package/src/components/textfield/_styles.scss

@@ -14,104 +14,6 @@ $component: '#{base.$prefix}-textfield';
   display: inline-flex;
   flex-direction: column;
   min-width: 210px;
-
-  // Size variants
-  &--small {
-    .#{$component}-input {
-      height: 40px;
-      font-size: 14px;
-    }
-    
-    .#{$component}-label {
-      font-size: 14px;
-    }
-    
-    .#{$component}-helper {
-      font-size: 11px;
-      margin-top: 2px;
-    }
-    
-    &.#{$component}--filled {
-      .#{$component}-input {
-        padding: 16px 12px 6px;
-        
-        &:focus {
-          padding-bottom: 5px;
-        }
-      }
-      
-      &:not(.#{$component}--empty) .#{$component}-label,
-      &.#{$component}--focused .#{$component}-label {
-        transform: translateY(-85%) scale(0.75);
-      }
-    }
-    
-    &.#{$component}--outlined {
-      .#{$component}-input {
-        padding: 10px 12px 11px;
-      }
-      
-      &:not(.#{$component}--empty) .#{$component}-label,
-      &.#{$component}--focused .#{$component}-label {
-        transform: translateY(-130%) scale(0.75);
-      }
-      
-      &.#{$component}--focused .#{$component}-input {
-        height: 38px;
-        padding: 9px 11px 10px;
-      }
-    }
-  }
-  
-  &--medium {
-    // Default size, styles already defined in base
-  }
-  
-  &--large {
-    .#{$component}-input {
-      height: 64px;
-      font-size: 16px;
-    }
-    
-    .#{$component}-label {
-      font-size: 16px;
-    }
-    
-    .#{$component}-helper {
-      font-size: 13px;
-      margin-top: 6px;
-    }
-    
-    &.#{$component}--filled {
-      .#{$component}-input {
-        padding: 26px 20px 8px;
-        
-        &:focus {
-          padding-bottom: 7px;
-        }
-      }
-      
-      &:not(.#{$component}--empty) .#{$component}-label,
-      &.#{$component}--focused .#{$component}-label {
-        transform: translateY(-110%) scale(0.75);
-      }
-    }
-    
-    &.#{$component}--outlined {
-      .#{$component}-input {
-        padding: 16px 20px 17px;
-      }
-      
-      &:not(.#{$component}--empty) .#{$component}-label,
-      &.#{$component}--focused .#{$component}-label {
-        transform: translateY(-170%) scale(0.75);
-      }
-      
-      &.#{$component}--focused .#{$component}-input {
-        padding: 15px 19px 16px;
-      }
-    }
-  }
   
   // Label
   &-label {

package/src/components/textfield/config.ts

@@ -5,15 +5,14 @@ import {
   BaseComponentConfig 
 } from '../../core/config/component-config';
 import { TextfieldConfig, BaseComponent, ApiOptions } from './types';
-import { TEXTFIELD_VARIANTS, TEXTFIELD_TYPES, TEXTFIELD_SIZES } from './constants';
+import { TEXTFIELD_VARIANTS, TEXTFIELD_TYPES } from './constants';
 
 /**
  * Default configuration for the Textfield component
  */
 export const defaultConfig: TextfieldConfig = {
   type: TEXTFIELD_TYPES.TEXT,
-  variant: TEXTFIELD_VARIANTS.FILLED,
-  size: TEXTFIELD_SIZES.MEDIUM
+  variant: TEXTFIELD_VARIANTS.FILLED
 };
 
 /**

package/src/components/textfield/constants.ts

@@ -8,15 +8,6 @@ export const TEXTFIELD_VARIANTS = {
   OUTLINED: 'outlined'
 } as const;
 
-/**
- * Textfield size variants
- */
-export const TEXTFIELD_SIZES = {
-  SMALL: 'small',
-  MEDIUM: 'medium',
-  LARGE: 'large'
-} as const;
-
 /**
  * Textfield input types
  */
@@ -45,11 +36,6 @@ export const TEXTFIELD_SCHEMA = {
     enum: Object.values(TEXTFIELD_VARIANTS),
     required: false
   },
-  size: {
-    type: 'string',
-    enum: Object.values(TEXTFIELD_SIZES),
-    required: false
-  },
   name: {
     type: 'string',
     required: false

package/src/components/textfield/index.ts

@@ -1,4 +1,4 @@
 // src/components/textfield/index.ts
 export { default } from './textfield'
-export { TEXTFIELD_VARIANTS, TEXTFIELD_SIZES, TEXTFIELD_TYPES } from './constants'
-export { TextfieldConfig, TextfieldComponent } from './types'
+export { TEXTFIELD_VARIANTS, TEXTFIELD_TYPES } from './constants'
+export { TextfieldConfig, TextfieldComponent } from './types'

package/src/components/textfield/textfield.ts

@@ -6,7 +6,6 @@ import {
   withDisabled,
   withLifecycle,
   withVariant,
-  withSize,
   withTextInput,
   withTextLabel
 } from '../../core/compose/features';
@@ -32,7 +31,6 @@ const createTextfield = (config: TextfieldConfig = {}): TextfieldComponent => {
       withEvents(),
       withElement(getElementConfig(baseConfig)),
       withVariant(baseConfig),
-      withSize(baseConfig),
       withTextInput(baseConfig),
       withTextLabel(baseConfig),
       withDisabled(baseConfig),

package/src/components/textfield/types.ts

@@ -1,5 +1,5 @@
 // src/components/textfield/types.ts
-import { TEXTFIELD_VARIANTS, TEXTFIELD_SIZES, TEXTFIELD_TYPES } from './constants';
+import { TEXTFIELD_VARIANTS, TEXTFIELD_TYPES } from './constants';
 
 /**
  * Configuration interface for the Textfield component
@@ -11,9 +11,6 @@ export interface TextfieldConfig {
   /** Visual variant (filled, outlined) */
   variant?: keyof typeof TEXTFIELD_VARIANTS | string;
   
-  /** Size variant (small, medium, large) */
-  size?: keyof typeof TEXTFIELD_SIZES | string;
-  
   /** Input name attribute */
   name?: string;
   

package/src/core/compose/component.ts

@@ -204,7 +204,7 @@ export const withElement = (options: WithElementOptions = {}) =>
       className: [
         base.getClass(options.componentName || base.componentName || 'component'),
         hasTouchSupport() && options.interactive ? base.getClass('interactive') : null,
-        options.className
+        ...(Array.isArray(options.className) ? options.className : [options.className])
       ].filter(Boolean),
       attrs: options.attrs || {},
       forwardEvents: options.forwardEvents || {},

package/src/core/compose/features/badge.ts

@@ -0,0 +1,79 @@
+// src/core/compose/features/badge.ts
+
+import { BaseComponent, ElementComponent } from '../component';
+import createBadge from '../../../components/badge';
+import { PREFIX } from '../../config';
+
+/**
+ * Configuration for badge feature
+ */
+export interface BadgeConfig {
+  /**
+   * Badge content to display
+   */
+  badge?: string | number;
+  
+  /**
+   * Custom badge configuration
+   */
+  badgeConfig?: {
+    variant?: string;
+    color?: string;
+    size?: string;
+    position?: string;
+    max?: number;
+    [key: string]: any;
+  };
+  
+  /**
+   * CSS class prefix
+   */
+  prefix?: string;
+  
+  [key: string]: any;
+}
+
+/**
+ * Component with badge capabilities
+ */
+export interface BadgeComponent extends BaseComponent {
+  /**
+   * Badge component instance
+   */
+  badge?: any;
+}
+
+/**
+ * Adds badge functionality to a component
+ * Creates and configures a badge component attached to the main component
+ * 
+ * @param {BadgeConfig} config - Badge configuration
+ * @returns {Function} Component enhancer with badge functionality
+ */
+export const withBadge = <T extends BadgeConfig>(config: T) => 
+  <C extends ElementComponent>(component: C): C & BadgeComponent => {
+    // Only create badge if content is provided
+    if (config.badge === undefined) {
+      return component as C & BadgeComponent;
+    }
+    
+    // Create badge configuration
+    const badgeConfig = {
+      content: config.badge,
+      standalone: false,
+      target: component.element,
+      ...config.badgeConfig || {},
+      // Default to top-right position if not specified
+      position: config.badgeConfig?.position || 'top-right',
+      // Set prefix to match parent component
+      prefix: config.prefix || PREFIX
+    };
+    
+    // Create badge component
+    const badge = createBadge(badgeConfig);
+    
+    return {
+      ...component,
+      badge
+    };
+  };

package/src/core/compose/features/index.ts

@@ -15,6 +15,7 @@ export { withTextInput } from './textinput';
 export { withTextLabel } from './textlabel';
 export { withTrack } from './track';
 export { withEvents as withEnhancedEvents } from './withEvents';
+export { withBadge } from './badge';
 
 // State management features
 export { withDisabled } from './disabled';
@@ -32,4 +33,5 @@ export type { CheckableComponent, CheckableManager } from './checkable';
 export type { TextInputComponent } from './textinput';
 export type { LabelComponent, LabelManager } from './textlabel';
 export type { TrackComponent } from './track';
-export type { EnhancedEventComponent } from './withEvents';
+export type { EnhancedEventComponent } from './withEvents';
+export type { BadgeComponent, BadgeConfig } from './badge';

package/src/styles/abstract/_theme.scss

@@ -70,41 +70,93 @@ $mtrl-sys-shape: (
   --#{$prefix}-sys-color-primary: #D0BCFF;
   --#{$prefix}-sys-color-primary-rgb: 208, 188, 255;
   --#{$prefix}-sys-color-on-primary: #381E72;
+  --#{$prefix}-sys-color-on-primary-rgb: 56, 30, 114;
   --#{$prefix}-sys-color-primary-container: #4F378B;
+  --#{$prefix}-sys-color-primary-container-rgb: 79, 55, 139;
   --#{$prefix}-sys-color-on-primary-container: #EADDFF;
+  --#{$prefix}-sys-color-on-primary-container-rgb: 234, 221, 255;
   
   --#{$prefix}-sys-color-secondary: #CCC2DC;
+  --#{$prefix}-sys-color-secondary-rgb: 204, 194, 220;
   --#{$prefix}-sys-color-on-secondary: #332D41;
+  --#{$prefix}-sys-color-on-secondary-rgb: 51, 45, 65;
   --#{$prefix}-sys-color-secondary-container: #4A4458;
+  --#{$prefix}-sys-color-secondary-container-rgb: 74, 68, 88;
   --#{$prefix}-sys-color-on-secondary-container: #E8DEF8;
+  --#{$prefix}-sys-color-on-secondary-container-rgb: 232, 222, 248;
   
   --#{$prefix}-sys-color-tertiary: #EFB8C8;
+  --#{$prefix}-sys-color-tertiary-rgb: 239, 184, 200;
   --#{$prefix}-sys-color-on-tertiary: #492532;
+  --#{$prefix}-sys-color-on-tertiary-rgb: 73, 37, 50;
   --#{$prefix}-sys-color-tertiary-container: #633B48;
+  --#{$prefix}-sys-color-tertiary-container-rgb: 99, 59, 72;
   --#{$prefix}-sys-color-on-tertiary-container: #FFD8E4;
+  --#{$prefix}-sys-color-on-tertiary-container-rgb: 255, 216, 228;
+
+  // Status colors
+  --#{$prefix}-sys-color-error: #F2B8B5;
+  --#{$prefix}-sys-color-error-rgb: 242, 184, 181;
+  --#{$prefix}-sys-color-on-error: #601410;
+  --#{$prefix}-sys-color-on-error-rgb: 96, 20, 16;
+  --#{$prefix}-sys-color-error-container: #8C1D18;
+  --#{$prefix}-sys-color-error-container-rgb: 140, 29, 24;
+  --#{$prefix}-sys-color-on-error-container: #F9DEDC;
+  --#{$prefix}-sys-color-on-error-container-rgb: 249, 222, 220;
+  
+  --#{$prefix}-sys-color-success: #85CFA9;
+  --#{$prefix}-sys-color-success-rgb: 133, 207, 169;
+  --#{$prefix}-sys-color-on-success: #00392D;
+  --#{$prefix}-sys-color-on-success-rgb: 0, 57, 45;
+  
+  --#{$prefix}-sys-color-warning: #FFB95C;
+  --#{$prefix}-sys-color-warning-rgb: 255, 185, 92;
+  --#{$prefix}-sys-color-on-warning: #3F2200;
+  --#{$prefix}-sys-color-on-warning-rgb: 63, 34, 0;
+  
+  --#{$prefix}-sys-color-info: #99CBFF;
+  --#{$prefix}-sys-color-info-rgb: 153, 203, 255;
+  --#{$prefix}-sys-color-on-info: #003060;
+  --#{$prefix}-sys-color-on-info-rgb: 0, 48, 96;
 
   // Neutral colors
   --#{$prefix}-sys-color-surface: #1C1B1F;
+  --#{$prefix}-sys-color-surface-rgb: 28, 27, 31;
   --#{$prefix}-sys-color-surface-dim: #141218;
+  --#{$prefix}-sys-color-surface-dim-rgb: 20, 18, 24;
   --#{$prefix}-sys-color-surface-bright: #3B383D;
+  --#{$prefix}-sys-color-surface-bright-rgb: 59, 56, 61;
   --#{$prefix}-sys-color-surface-container-lowest: #0F0D13;
+  --#{$prefix}-sys-color-surface-container-lowest-rgb: 15, 13, 19;
   --#{$prefix}-sys-color-surface-container-low: #1D1B20;
+  --#{$prefix}-sys-color-surface-container-low-rgb: 29, 27, 32;
   --#{$prefix}-sys-color-surface-container: #211F26;
+  --#{$prefix}-sys-color-surface-container-rgb: 33, 31, 38;
   --#{$prefix}-sys-color-surface-container-high: #2B2930;
+  --#{$prefix}-sys-color-surface-container-high-rgb: 43, 41, 48;
   --#{$prefix}-sys-color-surface-container-highest: #36343B;
+  --#{$prefix}-sys-color-surface-container-highest-rgb: 54, 52, 59;
   
   --#{$prefix}-sys-color-on-surface: #E6E1E5;
-  --#{$prefix}-sys-color-on-surface-variant: #CAC4D0;
   --#{$prefix}-sys-color-on-surface-rgb: 230, 225, 229;
+  --#{$prefix}-sys-color-on-surface-variant: #CAC4D0;
+  --#{$prefix}-sys-color-on-surface-variant-rgb: 202, 196, 208;
   
   // Additional colors
   --#{$prefix}-sys-color-outline: #938F99;
+  --#{$prefix}-sys-color-outline-rgb: 147, 143, 153;
   --#{$prefix}-sys-color-outline-variant: #444746;
+  --#{$prefix}-sys-color-outline-variant-rgb: 68, 71, 70;
   --#{$prefix}-sys-color-shadow: #000000;
+  --#{$prefix}-sys-color-shadow-rgb: 0, 0, 0;
   --#{$prefix}-sys-color-scrim: #000000;
+  --#{$prefix}-sys-color-scrim-rgb: 0, 0, 0;
   --#{$prefix}-sys-color-inverse-surface: #E6E1E5;
+  --#{$prefix}-sys-color-inverse-surface-rgb: 230, 225, 229;
   --#{$prefix}-sys-color-inverse-on-surface: #313033;
+  --#{$prefix}-sys-color-inverse-on-surface-rgb: 49, 48, 51;
   --#{$prefix}-sys-color-inverse-primary: #6750A4;
+  --#{$prefix}-sys-color-inverse-primary-rgb: 103, 80, 164;
 }
 
 @mixin light-theme {
@@ -112,41 +164,93 @@ $mtrl-sys-shape: (
   --#{$prefix}-sys-color-primary: #6750A4;
   --#{$prefix}-sys-color-primary-rgb: 103, 80, 164;
   --#{$prefix}-sys-color-on-primary: #FFFFFF;
+  --#{$prefix}-sys-color-on-primary-rgb: 255, 255, 255;
   --#{$prefix}-sys-color-primary-container: #EADDFF;
+  --#{$prefix}-sys-color-primary-container-rgb: 234, 221, 255;
   --#{$prefix}-sys-color-on-primary-container: #21005D;
+  --#{$prefix}-sys-color-on-primary-container-rgb: 33, 0, 93;
   
   --#{$prefix}-sys-color-secondary: #625B71;
+  --#{$prefix}-sys-color-secondary-rgb: 98, 91, 113;
   --#{$prefix}-sys-color-on-secondary: #FFFFFF;
+  --#{$prefix}-sys-color-on-secondary-rgb: 255, 255, 255;
   --#{$prefix}-sys-color-secondary-container: #E8DEF8;
+  --#{$prefix}-sys-color-secondary-container-rgb: 232, 222, 248;
   --#{$prefix}-sys-color-on-secondary-container: #1D192B;
+  --#{$prefix}-sys-color-on-secondary-container-rgb: 29, 25, 43;
   
   --#{$prefix}-sys-color-tertiary: #7D5260;
+  --#{$prefix}-sys-color-tertiary-rgb: 125, 82, 96;
   --#{$prefix}-sys-color-on-tertiary: #FFFFFF;
+  --#{$prefix}-sys-color-on-tertiary-rgb: 255, 255, 255;
   --#{$prefix}-sys-color-tertiary-container: #FFD8E4;
+  --#{$prefix}-sys-color-tertiary-container-rgb: 255, 216, 228;
   --#{$prefix}-sys-color-on-tertiary-container: #31111D;
+  --#{$prefix}-sys-color-on-tertiary-container-rgb: 49, 17, 29;
+
+  // Status colors
+  --#{$prefix}-sys-color-error: #B3261E;
+  --#{$prefix}-sys-color-error-rgb: 179, 38, 30;
+  --#{$prefix}-sys-color-on-error: #FFFFFF;
+  --#{$prefix}-sys-color-on-error-rgb: 255, 255, 255;
+  --#{$prefix}-sys-color-error-container: #F9DEDC;
+  --#{$prefix}-sys-color-error-container-rgb: 249, 222, 220;
+  --#{$prefix}-sys-color-on-error-container: #410E0B;
+  --#{$prefix}-sys-color-on-error-container-rgb: 65, 14, 11;
+  
+  --#{$prefix}-sys-color-success: #007B5A;
+  --#{$prefix}-sys-color-success-rgb: 0, 123, 90;
+  --#{$prefix}-sys-color-on-success: #FFFFFF;
+  --#{$prefix}-sys-color-on-success-rgb: 255, 255, 255;
+  
+  --#{$prefix}-sys-color-warning: #DD6D06;
+  --#{$prefix}-sys-color-warning-rgb: 221, 109, 6;
+  --#{$prefix}-sys-color-on-warning: #FFFFFF;
+  --#{$prefix}-sys-color-on-warning-rgb: 255, 255, 255;
+  
+  --#{$prefix}-sys-color-info: #0061A4;
+  --#{$prefix}-sys-color-info-rgb: 0, 97, 164;
+  --#{$prefix}-sys-color-on-info: #FFFFFF;
+  --#{$prefix}-sys-color-on-info-rgb: 255, 255, 255;
 
   // Neutral colors
   --#{$prefix}-sys-color-surface: #FFFBFE;
+  --#{$prefix}-sys-color-surface-rgb: 255, 251, 254;
   --#{$prefix}-sys-color-surface-dim: #DED8E1;
+  --#{$prefix}-sys-color-surface-dim-rgb: 222, 216, 225;
   --#{$prefix}-sys-color-surface-bright: #FFF8F7;
+  --#{$prefix}-sys-color-surface-bright-rgb: 255, 248, 247;
   --#{$prefix}-sys-color-surface-container-lowest: #FFFFFF;
+  --#{$prefix}-sys-color-surface-container-lowest-rgb: 255, 255, 255;
   --#{$prefix}-sys-color-surface-container-low: #F7F2FA;
+  --#{$prefix}-sys-color-surface-container-low-rgb: 247, 242, 250;
   --#{$prefix}-sys-color-surface-container: #F3EDF7;
+  --#{$prefix}-sys-color-surface-container-rgb: 243, 237, 247;
   --#{$prefix}-sys-color-surface-container-high: #ECE6F0;
+  --#{$prefix}-sys-color-surface-container-high-rgb: 236, 230, 240;
   --#{$prefix}-sys-color-surface-container-highest: #E6E0E9;
+  --#{$prefix}-sys-color-surface-container-highest-rgb: 230, 224, 233;
   
   --#{$prefix}-sys-color-on-surface: #1C1B1F;
-  --#{$prefix}-sys-color-on-surface-variant: #49454F;
   --#{$prefix}-sys-color-on-surface-rgb: 28, 27, 31;
+  --#{$prefix}-sys-color-on-surface-variant: #49454F;
+  --#{$prefix}-sys-color-on-surface-variant-rgb: 73, 69, 79;
   
   // Additional colors
   --#{$prefix}-sys-color-outline: #79747E;
+  --#{$prefix}-sys-color-outline-rgb: 121, 116, 126;
   --#{$prefix}-sys-color-outline-variant: #CAC4D0;
+  --#{$prefix}-sys-color-outline-variant-rgb: 202, 196, 208;
   --#{$prefix}-sys-color-shadow: #000000;
+  --#{$prefix}-sys-color-shadow-rgb: 0, 0, 0;
   --#{$prefix}-sys-color-scrim: #000000;
+  --#{$prefix}-sys-color-scrim-rgb: 0, 0, 0;
   --#{$prefix}-sys-color-inverse-surface: #313033;
+  --#{$prefix}-sys-color-inverse-surface-rgb: 49, 48, 51;
   --#{$prefix}-sys-color-inverse-on-surface: #F4EFF4;
+  --#{$prefix}-sys-color-inverse-on-surface-rgb: 244, 239, 244;
   --#{$prefix}-sys-color-inverse-primary: #D0BCFF;
+  --#{$prefix}-sys-color-inverse-primary-rgb: 208, 188, 255;
 }
 
 // Auto dark mode based on system preference

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