mtrl 0.2.5 → 0.2.6

package/package.json

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

package/src/components/badge/_styles.scss

@@ -112,18 +112,18 @@ $component: '#{base.$prefix}-badge';
   }
   
   &--success {
-    background-color: t.color('success', t.color('primary'));
-    color: t.color('on-success', t.color('on-primary'));
+    background-color: t.color('success');
+    color: t.color('on-success');
   }
   
   &--warning {
-    background-color: t.color('warning', t.color('tertiary'));
-    color: t.color('on-warning', t.color('on-tertiary'));
+    background-color: t.color('warning');
+    color: t.color('on-warning');
   }
   
   &--info {
-    background-color: t.color('info', t.color('secondary'));
-    color: t.color('on-info', t.color('on-secondary'));
+    background-color: t.color('info');
+    color: t.color('on-info');
   }
   
   // Outline variant
@@ -148,15 +148,15 @@ $component: '#{base.$prefix}-badge';
     }
     
     &.#{$component}--success {
-      color: t.color('success', t.color('primary'));
+      color: t.color('success');
     }
     
     &.#{$component}--warning {
-      color: t.color('warning', t.color('tertiary'));
+      color: t.color('warning');
     }
     
     &.#{$component}--info {
-      color: t.color('info', t.color('secondary'));
+      color: t.color('info');
     }
   }
   

package/src/components/button/_styles.scss

@@ -8,7 +8,6 @@
 $component: '#{base.$prefix}-button';
 
 .#{$component} {
-  // @include m.touch-target;
   // Base styles
   position: relative;
   display: inline-flex;
@@ -95,16 +94,6 @@ $component: '#{base.$prefix}-button';
     .#{$component}-icon {
      margin: 0;
     }
-
-    .#{$component}--small {
-     width: 32px;
-     height: 32px;
-    }
-
-    .#{$component}--large {
-     width: 48px;
-     height: 48px;
-    }
   }
   
   // Ripple container
@@ -119,7 +108,6 @@ $component: '#{base.$prefix}-button';
   
   &--disabled {
     opacity: 0.38
-    
   }
 
   // Variants
@@ -136,11 +124,6 @@ $component: '#{base.$prefix}-button';
       @include m.state-layer(t.color('on-primary'), 'pressed');
       @include m.elevation(0);
     }
-    
-    // &:disabled {
-    //   background-color: t.alpha('on-surface', 0.12);
-    //   color: t.alpha('on-surface', 0.38);
-    // }
   }
   
   // Elevated button variant
@@ -170,10 +153,6 @@ $component: '#{base.$prefix}-button';
     .#{$component}-icon {
       color: t.color('primary');
     }
-    
-    // &:disabled .#{$component}-icon {
-    //   color: t.alpha('on-surface', 0.38);
-    // }
   }
   
   &--tonal {
@@ -189,11 +168,6 @@ $component: '#{base.$prefix}-button';
       @include m.state-layer(t.color('on-secondary-container'), 'pressed');
       @include m.elevation(0);
     }
-    
-    // &:disabled {
-    //   background-color: t.alpha('on-surface', 0.12);
-    //   color: t.alpha('on-surface', 0.38);
-    // }
   }
   
   &--outlined {
@@ -208,11 +182,6 @@ $component: '#{base.$prefix}-button';
     &:active {
       @include m.state-layer(t.color('primary'), 'pressed');
     }
-    
-    // &:disabled {
-    //   border-color: t.alpha('on-surface', 0.12);
-    //   color: t.alpha('on-surface', 0.38);
-    // }
   }
   
   &--text {
@@ -233,36 +202,11 @@ $component: '#{base.$prefix}-button';
     }
   }
   
-  // Size variants
-  &--small {
-    height: 32px;
-    min-width: 48px;
-    padding: 0 v.button('padding-horizontal-small');
-    font-size: 13px;
-  }
-  
-  &--large {
-    height: 48px;
-    min-width: 78px;
-    padding: 0 32px;
-    font-size: 16px;
-  }
-  
   // Special case for icon-only buttons
   &--icon-only {
     min-width: v.button('height');
     width: v.button('height');
     padding: 0;
     border-radius: 50%;
-    
-    &.#{$component}--small {
-      min-width: 32px;
-      width: 32px;
-    }
-    
-    &.#{$component}--large {
-      min-width: 48px;
-      width: 48px;
-    }
   }
 }

package/src/components/button/button.ts

@@ -7,7 +7,6 @@ import {
   withText,
   withIcon,
   withVariant,
-  withSize,
   withRipple,
   withDisabled,
   withLifecycle
@@ -31,7 +30,6 @@ const createButton = (config: ButtonConfig = {}) => {
       withEvents(),
       withElement(getElementConfig(baseConfig)),
       withVariant(baseConfig),
-      withSize(baseConfig),
       withText(baseConfig),
       withIcon(baseConfig),
       withDisabled(baseConfig),

package/src/components/button/constants.ts

@@ -8,10 +8,4 @@ export const BUTTON_VARIANTS = {
   OUTLINED: 'outlined',
   ELEVATED: 'elevated',
   TEXT: 'text'
-}
-
-export const BUTTON_SIZES = {
-  SMALL: 'small',
-  MEDIUM: 'medium',
-  LARGE: 'large'
 }

package/src/components/button/index.ts

@@ -1,4 +1,4 @@
 // src/components/button/index.ts
 export { default } from './button'
-export { BUTTON_VARIANTS, BUTTON_SIZES } from './constants'
-export { ButtonConfig, ButtonComponent } from './types'
+export { BUTTON_VARIANTS } from './constants'
+export { ButtonConfig, ButtonComponent } from './types'

package/src/components/button/types.ts

@@ -1,5 +1,5 @@
 // src/components/button/types.ts
-import { BUTTON_VARIANTS, BUTTON_SIZES } from './constants';
+import { BUTTON_VARIANTS } from './constants';
 
 /**
  * Configuration interface for the Button component
@@ -12,12 +12,6 @@ export interface ButtonConfig {
    */
   variant?: keyof typeof BUTTON_VARIANTS | string;
   
-  /** 
-   * Button size 
-   * @default 'medium'
-   */
-  size?: keyof typeof BUTTON_SIZES | string;
-  
   /** 
    * Whether the button is initially disabled
    * @default false

package/src/components/card/_styles.scss

@@ -1,4 +1,4 @@
-// src/components/card/_card.scss
+// src/components/card/_styles.scss
 @use '../../styles/abstract/base' as base;
 @use '../../styles/abstract/variables' as v;
 @use '../../styles/abstract/functions' as f;
@@ -13,23 +13,33 @@ $component: '#{base.$prefix}-card';
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
-  border-radius: v.shape('medium');
+  border-radius: f.get-shape('medium'); // Use function for MD3 standard shape
   background-color: t.color('surface');
   color: t.color('on-surface');
   overflow: hidden;
-  width: 320px; // Fixed width since v.card() isn't available
-  --card-elevation: 1;
+  width: v.card('width'); // Use card width variable
+  --card-elevation: 0;
   
-  // Typography
+  // Typography - use mixin
   @include m.typography('body-medium');
   
-  // Transition for elevation and hover states
+  // Transition for elevation and hover states - use motion-transition mixin
   @include m.motion-transition(
     box-shadow,
     background-color,
     border-color
   );
 
+  // Focus outline for accessibility - use focus-ring mixin
+  &:focus-visible {
+    @include m.focus-ring(t.color('secondary'));
+  }
+
+  // Focus state class
+  &--focused {
+    @include m.focus-ring(t.color('secondary'));
+  }
+
   // Ripple styles for clickable cards
   .ripple {
     position: absolute;
@@ -37,7 +47,7 @@ $component: '#{base.$prefix}-card';
     transform: scale(0);
     pointer-events: none;
     background-color: currentColor;
-    opacity: 0.08;
+    opacity: f.get-state-opacity('hover'); // Use function for standard opacity
   }
   
   // Ensure proper stacking for inner components
@@ -45,35 +55,50 @@ $component: '#{base.$prefix}-card';
     margin-bottom: 0;
   }
   
-  // === Variants ===
+  // === Variants - use proper theme colors ===
   
   // Elevated variant
   &--elevated {
-    @include m.elevation(1);
+    background-color: t.color('surface-container-low');
+    @include m.elevation(1); // Use elevation mixin
     
     &:hover.#{$component}--interactive {
-      @include m.elevation(2);
+      @include m.elevation(2); // Use elevation mixin for hover state
+    }
+
+    &:active.#{$component}--interactive {
+      @include m.state-layer(t.color('on-surface'), 'pressed'); // Use state-layer mixin
     }
   }
   
   // Filled variant
   &--filled {
     background-color: t.color('surface-container-highest');
+    @include m.elevation(0); // No elevation
     
     &:hover.#{$component}--interactive {
       @include m.state-layer(t.color('on-surface'), 'hover');
     }
+
+    &:active.#{$component}--interactive {
+      @include m.state-layer(t.color('on-surface'), 'pressed');
+    }
   }
   
   // Outlined variant
   &--outlined {
     border: 1px solid t.color('outline');
     background-color: t.color('surface');
+    @include m.elevation(0); // No elevation
     
     &:hover.#{$component}--interactive {
       @include m.state-layer(t.color('on-surface'), 'hover');
       border-color: t.color('outline-variant');
     }
+
+    &:active.#{$component}--interactive {
+      @include m.state-layer(t.color('on-surface'), 'pressed');
+    }
   }
   
   // === Modifiers ===
@@ -95,10 +120,11 @@ $component: '#{base.$prefix}-card';
   &-header {
     display: flex;
     align-items: center;
-    padding: 16px;
-    
+    padding: v.card('padding');
+    padding-bottom: 0;
+
     &-avatar {
-      margin-right: 16px;
+      margin-right: v.card('padding');
       flex-shrink: 0;
       display: flex;
       align-items: center;
@@ -119,7 +145,7 @@ $component: '#{base.$prefix}-card';
     
     &-title {
       margin: 0;
-      @include m.typography('title-medium');
+      @include m.typography('title-large');
       @include m.truncate;
       color: t.color('on-surface');
     }
@@ -141,7 +167,7 @@ $component: '#{base.$prefix}-card';
   &-media {
     position: relative;
     overflow: hidden;
-    
+    border-radius: f.get-shape('medium');
     &-img {
       display: block;
       width: 100%;
@@ -182,7 +208,7 @@ $component: '#{base.$prefix}-card';
   
   // Card Content
   &-content {
-    padding: 16px;
+    padding: v.card('padding');
     flex: 1 1 auto;
     
     > *:first-child {
@@ -195,7 +221,7 @@ $component: '#{base.$prefix}-card';
     
     // When content follows media without padding
     .#{$component}-media + &:not(.#{$component}-content--no-padding) {
-      padding-top: 16px;
+      padding-top: v.card('padding');
     }
     
     // No padding modifier
@@ -276,7 +302,7 @@ $component: '#{base.$prefix}-card';
   
   // State classes
   &--state-disabled {
-    opacity: 0.38;
+    opacity: 0.38; // Use MTRL standard opacity
     pointer-events: none;
   }
   
@@ -285,7 +311,7 @@ $component: '#{base.$prefix}-card';
   }
   
   &--dragging {
-    @include m.elevation(4);
+    @include m.elevation(4); // Use elevation mixin
     opacity: 0.9;
   }
   
@@ -299,15 +325,15 @@ $component: '#{base.$prefix}-card';
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: rgba(t.color('surface'), 0.7);
-    z-index: 1;
+    background-color: t.alpha('surface', 0.7);
+    z-index: f.get-z-index('default');
   }
   
   &-loading-spinner {
     width: 40px;
     height: 40px;
     border-radius: 50%;
-    border: 3px solid rgba(t.color('primary'), 0.2);
+    border: 3px solid t.alpha('primary', 0.2);
     border-top-color: t.color('primary');
     animation: card-spinner 1s infinite linear;
   }
@@ -315,7 +341,7 @@ $component: '#{base.$prefix}-card';
   // Expandable content
   &-expandable-content {
     overflow: hidden;
-    transition: max-height 0.3s ease;
+    transition: max-height f.get-motion-duration('medium1') f.get-motion-easing('standard');
   }
   
   &-expand-button {
@@ -324,6 +350,9 @@ $component: '#{base.$prefix}-card';
     padding: 8px;
     cursor: pointer;
     color: t.color('primary');
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
     
     &::before {
       content: '';
@@ -333,7 +362,7 @@ $component: '#{base.$prefix}-card';
       border-right: 2px solid currentColor;
       border-bottom: 2px solid currentColor;
       transform: rotate(45deg);
-      transition: transform 0.3s ease;
+      transition: transform f.get-motion-duration('short2') f.get-motion-easing('standard');
     }
     
     &[aria-expanded="true"]::before {
@@ -344,7 +373,13 @@ $component: '#{base.$prefix}-card';
   // Swipeable card
   &--swipeable {
     touch-action: pan-y;
-    transition: transform 0.3s ease;
+    transition: transform f.get-motion-duration('medium1') f.get-motion-easing('standard');
+  }
+  
+  // Hidden buttons for accessibility
+  &-swipe-left-action,
+  &-swipe-right-action {
+    @include m.visually-hidden; // Use visually-hidden mixin
   }
 }
 
@@ -356,4 +391,11 @@ $component: '#{base.$prefix}-card';
   100% {
     transform: rotate(360deg);
   }
+}
+
+// Media query for responsive adjustments
+@include m.breakpoint-down('sm') {
+  .#{$component} {
+    width: 100%; // Full width on small screens
+  }
 }

package/src/components/card/api.ts

@@ -3,6 +3,7 @@ import { BaseComponent, CardComponent, ApiOptions } from './types';
 
 /**
  * Enhances a card component with API methods
+ * 
  * @param {ApiOptions} options - API configuration options
  * @returns {Function} Higher-order function that adds API methods to component
  * @internal This is an internal utility for the Card component
@@ -13,6 +14,7 @@ export const withAPI = ({ lifecycle }: ApiOptions) => (component: BaseComponent)
 
   /**
    * Adds content to the card
+   * 
    * @param {HTMLElement} contentElement - The content element to add
    * @returns {CardComponent} The card instance for chaining
    */
@@ -25,8 +27,18 @@ export const withAPI = ({ lifecycle }: ApiOptions) => (component: BaseComponent)
 
   /**
    * Sets the card header
+   * 
+   * Places the header element in the card. When media elements exist,
+   * the header is placed after the last media element to ensure proper 
+   * visual hierarchy following Material Design guidelines.
+   * 
    * @param {HTMLElement} headerElement - The header element to add
    * @returns {CardComponent} The card instance for chaining
+   * @example
+   * ```typescript
+   * // Add a header after media
+   * card.setHeader(headerElement);
+   * ```
    */
   setHeader(headerElement: HTMLElement): CardComponent {
     if (headerElement && headerElement.classList.contains(`${component.getClass('card')}-header`)) {
@@ -36,14 +48,32 @@ export const withAPI = ({ lifecycle }: ApiOptions) => (component: BaseComponent)
         existingHeader.remove();
       }
 
-      // Insert at the beginning of the card
-      component.element.insertBefore(headerElement, component.element.firstChild);
+      // Look for media element
+      const mediaElement = component.element.querySelector(`.${component.getClass('card')}-media`);
+      
+      if (mediaElement) {
+        // If media exists, insert after the LAST media element
+        // Find all media elements
+        const mediaElements = component.element.querySelectorAll(`.${component.getClass('card')}-media`);
+        const lastMedia = mediaElements[mediaElements.length - 1];
+        
+        // Insert after the last media element
+        if (lastMedia.nextSibling) {
+          component.element.insertBefore(headerElement, lastMedia.nextSibling);
+        } else {
+          component.element.appendChild(headerElement);
+        }
+      } else {
+        // No media, insert at the beginning
+        component.element.insertBefore(headerElement, component.element.firstChild);
+      }
     }
     return this;
   },
 
   /**
    * Adds media to the card
+   * 
    * @param {HTMLElement} mediaElement - The media element to add
    * @param {string} [position='top'] - Position to place media ('top', 'bottom')
    * @returns {CardComponent} The card instance for chaining
@@ -61,6 +91,7 @@ export const withAPI = ({ lifecycle }: ApiOptions) => (component: BaseComponent)
 
   /**
    * Sets the card actions section
+   * 
    * @param {HTMLElement} actionsElement - The actions element to add
    * @returns {CardComponent} The card instance for chaining
    */
@@ -80,19 +111,39 @@ export const withAPI = ({ lifecycle }: ApiOptions) => (component: BaseComponent)
 
   /**
    * Makes the card draggable
+   * 
    * @param {Function} [dragStartCallback] - Callback for drag start event
    * @returns {CardComponent} The card instance for chaining
    */
   makeDraggable(dragStartCallback?: (event: DragEvent) => void): CardComponent {
     component.element.setAttribute('draggable', 'true');
+    component.element.setAttribute('aria-grabbed', 'false');
 
     if (typeof dragStartCallback === 'function') {
-      component.element.addEventListener('dragstart', dragStartCallback as EventListener);
+      component.element.addEventListener('dragstart', (e: DragEvent) => {
+        component.element.setAttribute('aria-grabbed', 'true');
+        dragStartCallback(e);
+      });
+      
+      component.element.addEventListener('dragend', () => {
+        component.element.setAttribute('aria-grabbed', 'false');
+      });
     }
 
     return this;
   },
 
+  /**
+   * Sets focus to the card
+   * Useful for programmatic focus management
+   * 
+   * @returns {CardComponent} The card instance for chaining
+   */
+  focus(): CardComponent {
+    component.element.focus();
+    return this;
+  },
+
   /**
    * Destroys the card component and removes event listeners
    */

package/src/components/card/card.ts

@@ -9,12 +9,42 @@ import {
 } from '../../core/compose/features';
 import { withAPI } from './api';
 import { CardComponent, BaseComponent, CardSchema } from './types';
-import { createBaseConfig, getElementConfig, getApiConfig, withInteractiveBehavior } from './config';
+import { 
+  createBaseConfig, 
+  getElementConfig, 
+  getApiConfig, 
+  withInteractiveBehavior
+} from './config';
+import { withElevation } from './features';
 
 /**
  * Creates a new Card component following Material Design 3 principles
+ * 
+ * Material Design 3 Cards are surfaces that display content and actions about a single topic.
+ * Cards can contain text, media, and UI controls.
+ * 
  * @param {CardSchema} config - Card configuration object
  * @returns {CardComponent} Card component instance
+ * 
+ * @example
+ * ```typescript
+ * // Create a basic elevated card
+ * const card = createCard();
+ * 
+ * // Create a filled card with content
+ * const filledCard = createCard({
+ *   variant: CardVariant.FILLED,
+ *   contentConfig: { text: 'Card content' }
+ * });
+ * 
+ * // Create an interactive outlined card
+ * const interactiveCard = createCard({
+ *   variant: CardVariant.OUTLINED,
+ *   interactive: true,
+ *   clickable: true,
+ *   aria: { label: 'Click to view details' }
+ * });
+ * ```
  */
 const createCard = (config: CardSchema = {}): CardComponent => {
   const baseConfig = createBaseConfig(config);
@@ -28,9 +58,10 @@ const createCard = (config: CardSchema = {}): CardComponent => {
       config.clickable ? withRipple(baseConfig) : (c: BaseComponent) => c,
       withLifecycle(),
       withInteractiveBehavior,
+      withElevation,
       comp => withAPI(getApiConfig(comp))(comp)
     )(baseConfig);
-
+    
     return card as CardComponent;
   } catch (error) {
     console.error('Card creation error:', error instanceof Error ? error.message : String(error));