mtrl 0.2.5 → 0.2.7

package/index.ts

@@ -3,23 +3,32 @@ import {
   createLayout,
   createElement,
   createBadge,
+  createBottomAppBar,
   createButton,
+  createDatePicker,
+  createFab,
+  createExtendedFab,
+  createSegmentedButton,
   createCard,
   createCarousel,
   createCheckbox,
   createChip,
   createDialog,
+  createDivider,
   createList,
   createMenu,
   createNavigation,
   createProgress,
   createRadios,
+  createSearch,
   createSheet,
   createSlider,
   createSnackbar,
   createTabs,
   createTextfield,
+  createTimePicker,
   createTooltip,
+  createTopAppBar,
   createSwitch
 } from './src/index.js'
 
@@ -27,22 +36,31 @@ export {
   createLayout,
   createElement,
   createBadge,
+  createBottomAppBar,
   createButton,
+  createDatePicker,
+  createFab,
+  createExtendedFab,
+  createSegmentedButton,
   createCard,
   createCarousel,
   createCheckbox,
   createChip,
   createDialog,
+  createDivider,
   createList,
   createMenu,
   createNavigation,
   createProgress,
   createRadios,
+  createSearch,
   createSheet,
   createSlider,
   createSnackbar,
   createTabs,
   createTextfield,
+  createTimePicker,
   createTooltip,
+  createTopAppBar,
   createSwitch
 }

package/package.json

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

package/src/components/badge/_styles.scss

@@ -1,96 +1,130 @@
-// src/components/badge/_styles.scss
+// src/components/badge/_badge.scss
 @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;
 
+/**
+ * Badge component styles
+ * 
+ * Badge specifications:
+ * - Small badge size: 6dp
+ * - Large badge height: 16dp
+ * - Small badge corner radius: 3dp
+ * - Large badge corner radius: 8dp
+ * - Small badge: positioned 6dp from container edge
+ * - Large badge: positioned 14dp (height) x 12dp (width) from container edge
+ */
 $component: '#{base.$prefix}-badge';
+$wrapper: '#{base.$prefix}-badge-wrapper';
 
-.#{$component} {
-  // Base styles
+// Wrapper styles to establish positioning context
+.#{$wrapper} {
   position: relative;
   display: inline-flex;
+  flex-shrink: 0;
+}
+
+.#{$component} {
+  // Base badge styles
+  position: absolute;
+  display: flex;
   align-items: center;
   justify-content: center;
-  box-sizing: border-box;
-  min-width: 20px;
-  height: 20px;
-  padding: 0 6px;
-  border-radius: 10px;
-  background-color: t.color('error');
-  color: t.color('on-error');
-  font-size: 11px;
   font-weight: 500;
-  line-height: 1;
-  letter-spacing: 0.5px;
-  white-space: nowrap;
-  text-align: center;
-  
-  // Badge parent wrapper
-  &-wrapper {
-    position: relative;
-    display: inline-flex;
-  }
+  box-sizing: border-box;
+  overflow: hidden;
+  transition: all 200ms ease;
+  text-overflow: ellipsis;
   
-  // Default positioning (top-right)
-  &--positioned {
-    position: absolute;
-    top: -8px;
-    right: -8px;
-    transform: translate(50%, -50%);
+  // Hide for visibility: false
+  &--invisible {
+    display: none;
   }
   
-  // Dot variant 
-  &--dot {
-    min-width: 8px;
-    height: 8px;
+  // Small badge (dot)
+  &--small {
+    width: 6px;
+    height: 6px;
+    min-width: 6px;
+    border-radius: 3px; // 3dp corner radius
+    font-size: 0;
     padding: 0;
-    border-radius: 50%;
   }
   
-  // Small size
-  &--small {
-    min-width: 16px;
+  // Large badge
+  &--large {
     height: 16px;
-    font-size: 10px;
+    min-width: 16px;
+    border-radius: 8px; // 8dp corner radius
     padding: 0 4px;
+    font-size: 11px;
+    line-height: 16px;
+    
+    // Handle max character count container (16dp x 34dp)
+    &.#{$component}--overflow {
+      min-width: auto;
+      max-width: 34px; // max width is 34dp for overflow badges
+      padding: 0 4px;
+    }
   }
   
-  // Large size
-  &--large {
-    min-width: 24px;
-    height: 24px;
-    font-size: 12px;
-    padding: 0 8px;
-  }
-  
-  // Position variants
-  &--top-left {
-    top: 0;
-    left: 0;
-    transform: translate(-50%, -50%);
-  }
-  
-  &--top-right {
-    top: 0;
-    right: 0;
-    transform: translate(50%, -50%);
-  }
-  
-  &--bottom-left {
-    bottom: 0;
-    left: 0;
-    transform: translate(-50%, 50%);
+  // Position specs
+  &--positioned {
+    // Small badge placement (6dp from container edge)
+    &.#{$component}--small {
+      &.#{$component}--top-right {
+        top: -3px;
+        right: -3px;
+      }
+      
+      &.#{$component}--top-left {
+        top: -3px;
+        left: -3px;
+      }
+      
+      &.#{$component}--bottom-right {
+        bottom: -3px;
+        right: -3px;
+      }
+      
+      &.#{$component}--bottom-left {
+        bottom: -3px;
+        left: -3px;
+      }
+    }
+    
+    // Large badge placement (14dp x 12dp from container edge)
+    &.#{$component}--large {
+      &.#{$component}--top-right {
+        top: -8px;
+        right: -8px;
+      }
+      
+      &.#{$component}--top-left {
+        top: -8px;
+        left: -8px;
+      }
+      
+      &.#{$component}--bottom-right {
+        bottom: -8px;
+        right: -8px;
+      }
+      
+      &.#{$component}--bottom-left {
+        bottom: -8px;
+        left: -8px;
+      }
+    }
   }
   
-  &--bottom-right {
-    bottom: 0;
-    right: 0;
-    transform: translate(50%, 50%);
+  // badge color system
+  &--error {
+    background-color: t.color('error');
+    color: t.color('on-error');
   }
   
-  // Color variants
   &--primary {
     background-color: t.color('primary');
     color: t.color('on-primary');
@@ -106,69 +140,43 @@ $component: '#{base.$prefix}-badge';
     color: t.color('on-tertiary');
   }
   
-  &--error {
-    background-color: t.color('error');
-    color: t.color('on-error');
-  }
-  
   &--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
-  &--outlined {
-    background-color: transparent;
-    border: 1px solid currentColor;
-    
-    &.#{$component}--primary {
-      color: t.color('primary');
-    }
-    
-    &.#{$component}--secondary {
-      color: t.color('secondary');
-    }
-    
-    &.#{$component}--tertiary {
-      color: t.color('tertiary');
-    }
-    
-    &.#{$component}--error {
-      color: t.color('error');
+}
+
+// RTL support
+[dir="rtl"] {
+  .#{$component}--positioned {
+    &.#{$component}--top-right {
+      right: auto;
+      left: -8px;
     }
     
-    &.#{$component}--success {
-      color: t.color('success', t.color('primary'));
+    &.#{$component}--top-left {
+      left: auto;
+      right: -8px;
     }
     
-    &.#{$component}--warning {
-      color: t.color('warning', t.color('tertiary'));
+    &.#{$component}--bottom-right {
+      right: auto;
+      left: -8px;
     }
     
-    &.#{$component}--info {
-      color: t.color('info', t.color('secondary'));
+    &.#{$component}--bottom-left {
+      left: auto;
+      right: -8px;
     }
   }
-  
-  // Max value handling
-  &--max {
-    &::after {
-      content: '+';
-    }
-  }
-  
-  // Invisible
-  &--invisible {
-    display: none;
-  }
 }

package/src/components/badge/api.ts

@@ -1,6 +1,11 @@
 // src/components/badge/api.ts
 import { BadgeComponent } from './types';
-import { BADGE_VARIANTS, BADGE_SIZES, BADGE_COLORS, BADGE_POSITIONS } from './constants';
+import { 
+  BADGE_VARIANTS,
+  BADGE_COLORS, 
+  BADGE_POSITIONS 
+} from './constants';
+import { formatBadgeLabel } from './config';
 
 interface ApiOptions {
   visibility: {
@@ -19,7 +24,8 @@ interface ComponentWithElements {
   wrapper?: HTMLElement;
   config: {
     max?: number;
-    content?: string | number;
+    label?: string | number;
+    variant?: string;
   };
   getClass: (name: string) => string;
   addClass: (...classes: string[]) => any;
@@ -39,27 +45,33 @@ export const withAPI = ({ visibility, lifecycle }: ApiOptions) =>
     ...component as any,
     
     /**
-     * Sets the badge content
-     * @param {string|number} content - Content to display in the badge
+     * Sets the badge label
+     * @param {string|number} label - Label to display in the badge
      * @returns {BadgeComponent} Badge component instance for chaining
      */
-    setContent(content: string | number) {
-      const stringContent = String(content);
-      component.config.content = content;
+    setLabel(label: string | number) {
+      component.config.label = label;
       
-      // If max is defined and content is a number greater than max, show max+
-      if (component.config.max !== undefined && 
-          typeof content === 'number' && 
-          content > component.config.max) {
-        component.element.textContent = String(component.config.max);
-        component.element.classList.add(`${component.getClass('badge')}--max`);
-      } else {
-        component.element.textContent = stringContent;
-        component.element.classList.remove(`${component.getClass('badge')}--max`);
+      // Small badges (dot variant) don't have text
+      if (component.config.variant === BADGE_VARIANTS.SMALL) {
+        component.element.textContent = '';
+        return this;
+      }
+      
+      // Format the label
+      const formattedLabel = formatBadgeLabel(label, component.config.max);
+      component.element.textContent = formattedLabel;
+      
+      // Add overflow class if label was truncated
+      component.element.classList.remove(`${component.getClass('badge')}--overflow`);
+      if (typeof label === 'number' && 
+          component.config.max !== undefined && 
+          label > component.config.max) {
+        component.element.classList.add(`${component.getClass('badge')}--overflow`);
       }
       
-      // Toggle the dot variant based on whether content is empty
-      if (stringContent === '' || stringContent === '0') {
+      // Toggle visibility based on whether label is empty
+      if (formattedLabel === '' || formattedLabel === '0') {
         this.hide();
       } else {
         this.show();
@@ -69,10 +81,10 @@ export const withAPI = ({ visibility, lifecycle }: ApiOptions) =>
     },
     
     /**
-     * Gets the badge content
-     * @returns {string} Current badge content
+     * Gets the badge label
+     * @returns {string} Current badge label
      */
-    getContent() {
+    getLabel() {
       return component.element.textContent || '';
     },
     
@@ -114,19 +126,16 @@ export const withAPI = ({ visibility, lifecycle }: ApiOptions) =>
     
     /**
      * Sets maximum value (after which badge shows max+)
+     * 
      * @param {number} max - Maximum value to display
      * @returns {BadgeComponent} Badge component instance for chaining
      */
     setMax(max: number) {
       component.config.max = max;
       
-      // Apply max formatting if current content exceeds max
-      if (typeof component.config.content === 'number' && 
-          component.config.content > max) {
-        component.element.textContent = String(max);
-        component.element.classList.add(`${component.getClass('badge')}--max`);
-      } else {
-        component.element.classList.remove(`${component.getClass('badge')}--max`);
+      // Apply max formatting if current label exceeds max
+      if (component.config.label !== undefined) {
+        this.setLabel(component.config.label);
       }
       
       return this;
@@ -137,7 +146,7 @@ export const withAPI = ({ visibility, lifecycle }: ApiOptions) =>
      * @param {string} color - Color variant to apply
      * @returns {BadgeComponent} Badge component instance for chaining
      */
-    setColor(color: keyof typeof BADGE_COLORS | BADGE_COLORS) {
+    setColor(color: keyof typeof BADGE_COLORS | (typeof BADGE_COLORS)[keyof typeof BADGE_COLORS]) {
       // Remove existing color classes
       Object.values(BADGE_COLORS).forEach(colorName => {
         component.element.classList.remove(`${component.getClass('badge')}--${colorName}`);
@@ -150,44 +159,32 @@ export const withAPI = ({ visibility, lifecycle }: ApiOptions) =>
     
     /**
      * Sets badge variant
-     * @param {string} variant - Variant to apply
+     * @param {string} variant - Variant to apply (small or large)
      * @returns {BadgeComponent} Badge component instance for chaining
      */
-    setVariant(variant: keyof typeof BADGE_VARIANTS | BADGE_VARIANTS) {
+    setVariant(variant: keyof typeof BADGE_VARIANTS | (typeof BADGE_VARIANTS)[keyof typeof BADGE_VARIANTS]) {
       // Remove existing variant classes
       Object.values(BADGE_VARIANTS).forEach(variantName => {
         component.element.classList.remove(`${component.getClass('badge')}--${variantName}`);
       });
       
-      // Add new variant class if not standard
-      if (variant !== BADGE_VARIANTS.STANDARD) {
-        component.element.classList.add(`${component.getClass('badge')}--${variant}`);
-      }
+      // Add new variant class
+      component.element.classList.add(`${component.getClass('badge')}--${variant}`);
       
-      // Clear content if dot variant
-      if (variant === BADGE_VARIANTS.DOT) {
-        component.element.textContent = '';
-      } else if (component.config.content !== undefined) {
-        this.setContent(component.config.content);
-      }
+      // Update component config
+      component.config.variant = variant;
       
-      return this;
-    },
-    
-    /**
-     * Sets badge size
-     * @param {string} size - Size variant to apply
-     * @returns {BadgeComponent} Badge component instance for chaining
-     */
-    setSize(size: keyof typeof BADGE_SIZES | BADGE_SIZES) {
-      // Remove existing size classes
-      Object.values(BADGE_SIZES).forEach(sizeName => {
-        component.element.classList.remove(`${component.getClass('badge')}--${sizeName}`);
-      });
-      
-      // Add new size class if not medium (default)
-      if (size !== BADGE_SIZES.MEDIUM) {
-        component.element.classList.add(`${component.getClass('badge')}--${size}`);
+      // Update accessibility attributes
+      if (variant === BADGE_VARIANTS.SMALL) {
+        component.element.textContent = '';
+        component.element.setAttribute('aria-hidden', 'true');
+      } else {
+        component.element.setAttribute('role', 'status');
+        
+        // Restore label for large badges
+        if (component.config.label !== undefined) {
+          this.setLabel(component.config.label);
+        }
       }
       
       return this;
@@ -198,7 +195,7 @@ export const withAPI = ({ visibility, lifecycle }: ApiOptions) =>
      * @param {string} position - Position variant to apply
      * @returns {BadgeComponent} Badge component instance for chaining
      */
-    setPosition(position: keyof typeof BADGE_POSITIONS | BADGE_POSITIONS) {
+    setPosition(position: keyof typeof BADGE_POSITIONS | (typeof BADGE_POSITIONS)[keyof typeof BADGE_POSITIONS]) {
       // Remove existing position classes
       Object.values(BADGE_POSITIONS).forEach(posName => {
         component.element.classList.remove(`${component.getClass('badge')}--${posName}`);
@@ -224,6 +221,7 @@ export const withAPI = ({ visibility, lifecycle }: ApiOptions) =>
       // Create a new wrapper to hold the target and badge
       const wrapper = document.createElement('div');
       wrapper.classList.add(component.getClass('badge-wrapper'));
+      wrapper.style.position = 'relative';
       
       // Replace the target with the wrapper
       const parent = target.parentNode;

package/src/components/badge/badge.ts

@@ -9,7 +9,6 @@ import {
   withVisibility,
   withVariant,
   withColor, 
-  withSize,
   withPosition,
   withMax,
   withAttachment
@@ -22,18 +21,33 @@ import { createBaseConfig, getElementConfig, getApiConfig } from './config';
  * Creates a new Badge component
  * @param {BadgeConfig} config - Badge configuration object
  * @returns {BadgeComponent} Badge component instance
+ * 
+ * @example
+ * // Create a small dot badge
+ * const notificationBadge = createBadge({ 
+ *   variant: BADGE_VARIANTS.SMALL,
+ *   target: document.querySelector('.icon-button')
+ * });
+ * 
+ * @example
+ * // Create a large badge with a count
+ * const countBadge = createBadge({
+ *   variant: BADGE_VARIANTS.LARGE,
+ *   label: 5,
+ *   target: document.querySelector('.notification-icon')
+ * });
  */
 const createBadge = (config: BadgeConfig = {}): BadgeComponent => {
   const baseConfig = createBaseConfig(config);
 
   try {
+    // Compose the badge component from multiple feature enhancers
     const badge = pipe(
       createBase,
       withEvents(),
       withElement(getElementConfig(baseConfig)),
       withVariant(baseConfig),
       withColor(baseConfig),
-      withSize(baseConfig),
       withPosition(baseConfig),
       withMax(baseConfig),
       withVisibility(),