mtrl 0.2.5 → 0.2.7

package/src/components/badge/config.ts

@@ -1,23 +1,25 @@
 // src/components/badge/config.ts
 import { 
   createComponentConfig, 
-  createElementConfig,
-  BaseComponentConfig 
+  createElementConfig
 } from '../../core/config/component-config';
 import { BadgeConfig } from './types';
-import { BADGE_VARIANTS, BADGE_SIZES, BADGE_COLORS, BADGE_POSITIONS } from './constants';
+import { 
+  BADGE_VARIANTS, 
+  BADGE_COLORS, 
+  BADGE_POSITIONS, 
+  BADGE_MAX_CHARACTERS 
+} from './constants';
 
 /**
  * Default configuration for the Badge component
  */
 export const defaultConfig: BadgeConfig = {
-  variant: BADGE_VARIANTS.STANDARD,
-  size: BADGE_SIZES.MEDIUM,
+  variant: BADGE_VARIANTS.LARGE,
   color: BADGE_COLORS.ERROR,
   position: BADGE_POSITIONS.TOP_RIGHT,
-  content: '',
-  visible: true,
-  standalone: false
+  label: '',
+  visible: true
 };
 
 /**
@@ -37,14 +39,21 @@ export const getElementConfig = (config: BadgeConfig) => {
   // Create the attributes object
   const attrs: Record<string, any> = {};
   
-  // Convert numeric content to string if needed
-  const content = config.content !== undefined ? String(config.content) : '';
+  // For large badges, set appropriate ARIA attributes
+  if (config.variant !== BADGE_VARIANTS.SMALL) {
+    attrs.role = 'status';
+  }
+  
+  // Format the label if needed
+  const formattedLabel = config.variant === BADGE_VARIANTS.SMALL 
+    ? '' 
+    : formatBadgeLabel(config.label || '', config.max);
   
   return createElementConfig(config, {
     tag: 'span',
     attrs,
     className: config.class,
-    content: config.variant === BADGE_VARIANTS.DOT ? '' : content
+    text: formattedLabel // Use the formatted label
   });
 };
 
@@ -65,4 +74,49 @@ export const getApiConfig = (comp) => ({
   }
 });
 
+/**
+ * Format a label
+ * - Max 4 characters including "+" for overflow
+ * - Add "+" for numeric values exceeding max
+ * 
+ * @param {string|number} label - Original label
+ * @param {number} max - Maximum value before using "+"
+ * @returns {string} Formatted label
+ */
+export const formatBadgeLabel = (label: string | number, max?: number): string => {
+  // Handle empty or undefined labels
+  if (label === undefined || label === null || label === '') {
+    return '';
+  }
+  
+  let formattedLabel = String(label);
+  
+  const numericLabel = Number(label);
+
+  // Apply max value formatting
+  if (max !== undefined && !isNaN(numericLabel) && numericLabel > max) {
+    formattedLabel = `${max}+`;
+  }
+  
+  // Ensure label doesn't exceed max characters
+  if (formattedLabel.length > BADGE_MAX_CHARACTERS) {
+    // Try to preserve as much information as possible
+    // For large numbers, use abbreviated format with "+"
+    const numericValue = Number(label);
+    if (!isNaN(numericValue)) {
+      if (numericValue >= 1000) {
+        formattedLabel = '999+';
+      } else {
+        // For numbers under 1000 but still too long, truncate
+        formattedLabel = formattedLabel.substring(0, BADGE_MAX_CHARACTERS - 1) + '+';
+      }
+    } else {
+      // For non-numeric values, simply truncate
+      formattedLabel = formattedLabel.substring(0, BADGE_MAX_CHARACTERS);
+    }
+  }
+  
+  return formattedLabel;
+};
+
 export default defaultConfig;

package/src/components/badge/constants.ts

@@ -1,30 +1,40 @@
 // src/components/badge/constants.ts
 
+/**
+ * Badge variants
+ * - SMALL: Simple dot badge (6dp diameter)
+ * - LARGE: Numbered badge (16dp height)
+ */
 export const BADGE_VARIANTS = {
-  STANDARD: 'standard',
-  DOT: 'dot',
-  OUTLINED: 'outlined'
-}
-
-export const BADGE_SIZES = {
   SMALL: 'small',
-  MEDIUM: 'medium',
   LARGE: 'large'
-}
+} as const;
 
+/**
+ * Badge colors
+ * ERROR is the default
+ */
 export const BADGE_COLORS = {
+  ERROR: 'error',      // Default
   PRIMARY: 'primary',
   SECONDARY: 'secondary',
   TERTIARY: 'tertiary',
-  ERROR: 'error',
   SUCCESS: 'success',
   WARNING: 'warning',
   INFO: 'info'
-}
+} as const;
 
+/**
+ * Badge positions relative to its container
+ */
 export const BADGE_POSITIONS = {
-  TOP_RIGHT: 'top-right',
+  TOP_RIGHT: 'top-right',     // Default
   TOP_LEFT: 'top-left',
   BOTTOM_RIGHT: 'bottom-right',
   BOTTOM_LEFT: 'bottom-left'
-}
+} as const;
+
+/**
+ * Maximum character count for badge labels
+ */
+export const BADGE_MAX_CHARACTERS = 4;

package/src/components/badge/features.ts

@@ -1,6 +1,11 @@
 // src/components/badge/features.ts
-import { BADGE_VARIANTS, BADGE_SIZES, BADGE_COLORS, BADGE_POSITIONS } from './constants';
+import { 
+  BADGE_VARIANTS, 
+  BADGE_COLORS, 
+  BADGE_POSITIONS 
+} from './constants';
 import { BadgeConfig } from './types';
+import { formatBadgeLabel } from './config';
 
 /**
  * Higher-order function that adds visibility control features to a component
@@ -64,15 +69,24 @@ export const withVisibility = () => component => {
  */
 export const withVariant = (config: BadgeConfig) => component => {
   // Get variant from config with fallback to default
-  const variant = config.variant || BADGE_VARIANTS.STANDARD;
-  
-  // Apply variant class if not standard variant
-  if (variant !== BADGE_VARIANTS.STANDARD) {
-    component.element.classList.add(`${component.getClass('badge')}--${variant}`);
+  const variant = config.variant || BADGE_VARIANTS.LARGE;
+  
+  // Apply variant class
+  component.element.classList.add(`${component.getClass('badge')}--${variant}`);
+  
+  // Small badges (dot variant) don't have text
+  if (variant === BADGE_VARIANTS.SMALL) {
+    component.element.textContent = '';
+    component.element.setAttribute('aria-hidden', 'true');
+  } else {
+    // Add accessibility for large badges
+    component.element.setAttribute('role', 'status');
     
-    // Clear content if dot variant
-    if (variant === BADGE_VARIANTS.DOT) {
-      component.element.textContent = '';
+    // Set the label if available and variant is large
+    if (config.label !== undefined && config.label !== '') {
+      // Format the label according to max value
+      const formattedLabel = formatBadgeLabel(config.label, config.max);
+      component.element.textContent = formattedLabel;
     }
   }
   
@@ -94,40 +108,22 @@ export const withColor = (config: BadgeConfig) => component => {
   return component;
 };
 
-/**
- * Higher-order function that adds size features to a badge component
- * @param {BadgeConfig} config - Badge configuration
- * @returns {Function} Component enhancer with size features
- */
-export const withSize = (config: BadgeConfig) => component => {
-  // Get size from config with fallback to default
-  const size = config.size || BADGE_SIZES.MEDIUM;
-  
-  // Apply size class if not medium (default)
-  if (size !== BADGE_SIZES.MEDIUM) {
-    component.element.classList.add(`${component.getClass('badge')}--${size}`);
-  }
-  
-  return component;
-};
-
 /**
  * Higher-order function that adds positioning features to a badge component
  * @param {BadgeConfig} config - Badge configuration
  * @returns {Function} Component enhancer with positioning features
  */
 export const withPosition = (config: BadgeConfig) => component => {
-  // Skip for standalone badges
-  if (config.standalone) {
-    return component;
-  }
-  
   // Get position from config with fallback to default
   const position = config.position || BADGE_POSITIONS.TOP_RIGHT;
   
-  // Apply position class and positioned class
+  // Apply position class
   component.element.classList.add(`${component.getClass('badge')}--${position}`);
-  component.element.classList.add(`${component.getClass('badge')}--positioned`);
+  
+  // If there's a target, add positioned class
+  if (config.target) {
+    component.element.classList.add(`${component.getClass('badge')}--positioned`);
+  }
   
   return component;
 };
@@ -138,8 +134,8 @@ export const withPosition = (config: BadgeConfig) => component => {
  * @returns {Function} Component enhancer with max value features
  */
 export const withMax = (config: BadgeConfig) => component => {
-  // Skip if no max is defined
-  if (config.max === undefined) {
+  // Skip if no max is defined or for small badges
+  if (config.max === undefined || config.variant === BADGE_VARIANTS.SMALL) {
     return component;
   }
   
@@ -147,9 +143,14 @@ export const withMax = (config: BadgeConfig) => component => {
   component.config.max = config.max;
   
   // Apply max formatting if needed
-  if (typeof config.content === 'number' && config.content > config.max) {
-    component.element.textContent = String(config.max);
-    component.element.classList.add(`${component.getClass('badge')}--max`);
+  if (config.label !== undefined && config.label !== '') {
+    const formattedLabel = formatBadgeLabel(config.label, config.max);
+    component.element.textContent = formattedLabel;
+    
+    // Add overflow class if label was truncated
+    if (typeof config.label === 'number' && config.label > config.max) {
+      component.element.classList.add(`${component.getClass('badge')}--overflow`);
+    }
   }
   
   return component;
@@ -161,8 +162,8 @@ export const withMax = (config: BadgeConfig) => component => {
  * @returns {Function} Component enhancer with attachment features
  */
 export const withAttachment = (config: BadgeConfig) => component => {
-  // Skip for standalone badges or if no target is provided
-  if (config.standalone || !config.target) {
+  // Skip if no target is provided
+  if (!config.target) {
     return component;
   }
   
@@ -170,6 +171,9 @@ export const withAttachment = (config: BadgeConfig) => component => {
   const wrapper = document.createElement('div');
   wrapper.classList.add(component.getClass('badge-wrapper'));
   
+  // Make sure positioning context is correct
+  wrapper.style.position = 'relative';
+  
   // Replace the target with the wrapper
   const parent = config.target.parentNode;
   if (parent) {

package/src/components/badge/types.ts

@@ -1,43 +1,58 @@
 // src/components/badge/types.ts
-import { BADGE_VARIANTS, BADGE_SIZES, BADGE_COLORS, BADGE_POSITIONS } from './constants';
+import { BADGE_VARIANTS, BADGE_COLORS, BADGE_POSITIONS } from './constants';
 
 /**
  * Configuration interface for the Badge component
+ * Following Material Design 3 specifications
  */
 export interface BadgeConfig {
-  /** Badge variant (standard, dot, outlined) */
-  variant?: keyof typeof BADGE_VARIANTS | BADGE_VARIANTS;
-  
-  /** Badge size (small, medium, large) */
-  size?: keyof typeof BADGE_SIZES | BADGE_SIZES;
-  
-  /** Badge color (primary, secondary, tertiary, error, success, warning, info) */
-  color?: keyof typeof BADGE_COLORS | BADGE_COLORS;
-  
-  /** Badge position relative to its container (top-right, top-left, bottom-right, bottom-left) */
-  position?: keyof typeof BADGE_POSITIONS | BADGE_POSITIONS;
-  
-  /** Text content inside the badge */
-  content?: string | number;
-  
-  /** Maximum value to display (shows "{max}+" if content exceeds max) */
+  /** 
+   * Badge variant (small dot or large numbered)
+   * Small badge (6dp) or Large badge (16dp height)
+   */
+  variant?: keyof typeof BADGE_VARIANTS | (typeof BADGE_VARIANTS)[keyof typeof BADGE_VARIANTS];
+  
+  /** 
+   * Badge color (error is default)
+   */
+  color?: keyof typeof BADGE_COLORS | (typeof BADGE_COLORS)[keyof typeof BADGE_COLORS];
+  
+  /** 
+   * Badge position relative to its container 
+   */
+  position?: keyof typeof BADGE_POSITIONS | (typeof BADGE_POSITIONS)[keyof typeof BADGE_POSITIONS];
+  
+  /** 
+   * Text label inside the badge (for large badges)
+   * Up to 4 characters, with "+" for overflow 
+   */
+  label?: string | number;
+  
+  /** 
+   * Maximum value to display (shows "{max}+" if label exceeds max)
+   * Usually 999+ for large numbers
+   */
   max?: number;
   
   /** Whether the badge should be visible */
   visible?: boolean;
   
-  /** Whether the badge should be standalone (not attached to another element) */
-  standalone?: boolean;
-  
   /** Target element to which badge will be attached */
   target?: HTMLElement;
   
   /** Additional CSS classes */
   class?: string;
+  
+  /** CSS class prefix */
+  prefix?: string;
+  
+  /** Component name */
+  componentName?: string;
 }
 
 /**
  * Badge component interface
+ * Following Material Design 3 specifications
  */
 export interface BadgeComponent {
   /** Badge element */
@@ -46,11 +61,11 @@ export interface BadgeComponent {
   /** Badge wrapper element (if badge is attached to target) */
   wrapper?: HTMLElement;
   
-  /** Sets badge text content */
-  setContent: (content: string | number) => BadgeComponent;
+  /** Sets badge text label */
+  setLabel: (label: string | number) => BadgeComponent;
   
-  /** Gets badge text content */
-  getContent: () => string;
+  /** Gets badge text label */
+  getLabel: () => string;
   
   /** Shows the badge */
   show: () => BadgeComponent;
@@ -68,16 +83,13 @@ export interface BadgeComponent {
   setMax: (max: number) => BadgeComponent;
   
   /** Sets badge color */
-  setColor: (color: keyof typeof BADGE_COLORS | BADGE_COLORS) => BadgeComponent;
+  setColor: (color: keyof typeof BADGE_COLORS | (typeof BADGE_COLORS)[keyof typeof BADGE_COLORS]) => BadgeComponent;
   
   /** Sets badge variant */
-  setVariant: (variant: keyof typeof BADGE_VARIANTS | BADGE_VARIANTS) => BadgeComponent;
-  
-  /** Sets badge size */
-  setSize: (size: keyof typeof BADGE_SIZES | BADGE_SIZES) => BadgeComponent;
+  setVariant: (variant: keyof typeof BADGE_VARIANTS | (typeof BADGE_VARIANTS)[keyof typeof BADGE_VARIANTS]) => BadgeComponent;
   
   /** Sets badge position */
-  setPosition: (position: keyof typeof BADGE_POSITIONS | BADGE_POSITIONS) => BadgeComponent;
+  setPosition: (position: keyof typeof BADGE_POSITIONS | (typeof BADGE_POSITIONS)[keyof typeof BADGE_POSITIONS]) => BadgeComponent;
   
   /** Attaches badge to a target element */
   attachTo: (target: HTMLElement) => BadgeComponent;

package/src/components/bottom-app-bar/_styles.scss

@@ -0,0 +1,103 @@
+// src/components/bottom-app-bar/styles.scss
+@use 'sass:map';
+@use '../../styles/abstract/base' as base;
+@use '../../styles/abstract/variables' as v;
+@use '../../styles/abstract/functions' as f;
+@use '../../styles/abstract/mixins' as m;
+@use '../../styles/abstract/theme' as t;
+
+$component: '#{base.$prefix}-bottom-app-bar';
+
+.#{$component} {
+  // Core Properties
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: f.get-z-index('fixed');
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 80px; // Default height as per specs
+  padding: 12px 16px 12px 4px; // top/bottom 12px, right 16px, left 4px
+  background-color: t.color('surface-container');
+  
+  // Apply material elevation
+  @include m.elevation(2);
+  
+  // Apply border radius at the top
+  border-top-left-radius: t.shape('medium');
+  border-top-right-radius: t.shape('medium');
+  
+  // Add transition for smooth animations
+  transition: transform 0.3s ease-in-out;
+  
+  // Actions container on the left side
+  &-actions {
+    display: flex;
+    align-items: center;
+    gap: 4px; // Small gap between action buttons
+    height: 100%;
+    
+    // Icon buttons should have consistent sizing
+    > * {
+      flex-shrink: 0;
+    }
+  }
+  
+  // FAB container on the right side
+  &-fab-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: auto;
+  }
+  
+  // Adjustment for when FAB is present - use the specified height
+  &--with-fab {
+    height: 72px;
+  }
+  
+  // Adjustment for when FAB is centered
+  &--fab-center {
+    .#{$component}-fab-container {
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
+  
+  // Hidden state - moved off-screen
+  &--hidden {
+    transform: translateY(100%);
+  }
+  
+  // RTL Support
+  [dir="rtl"] & {
+    padding: 12px 4px 12px 16px;
+    
+    &-actions {
+      flex-direction: row-reverse;
+    }
+    
+    &-fab-container {
+      margin-right: auto;
+      margin-left: initial;
+    }
+  }
+  
+  // // Media query to hide on large screens
+  // @media (min-width: map.get(v.$breakpoints, 'lg')) {
+  //   display: none;
+  // }
+  
+  // Reduced motion support
+  @include m.reduced-motion {
+    transition-duration: 0.01ms;
+  }
+  
+  // High contrast mode support
+  @include m.high-contrast {
+    border-top: 1px solid currentColor;
+  }
+}