mtrl 0.2.7 → 0.2.9

package/src/styles/main.scss

@@ -1,32 +1,17 @@
 // src/styles/main.scss
 
+// Import Sass modules
+@use 'sass:map';
+@use 'sass:list' as sasslist;
+@use 'sass:math';
+
 // Abstract layer
 @use 'abstract/base';
-@use 'abstract/variables';
-@use 'abstract/functions';
-@use 'abstract/mixins';
-@use 'abstract/theme';
-
-// Themes
-@use 'themes/index';
+@use 'abstract/variables' as v;
+@use 'abstract/functions' as f;
+@use 'abstract/mixins' as m;
+@use 'abstract/theme' as t;
 
-// Reset
-@use 'base/reset';
-@use 'base/typography';
-
-// Components
-@use '../components/button/styles';
-@use '../components/checkbox/styles';
-@use '../components/container/styles';
-@use '../components/list/styles';
-@use '../components/menu/styles';
-@use '../components/navigation/styles';
-@use '../components/snackbar/styles';
-@use '../components/switch/styles';
-@use '../components/textfield/styles';
-
-
-@use '../core/build/ripple/ripple';
 
 // Utilities
 @use 'utilities/spacing';
@@ -35,41 +20,105 @@
 @use 'utilities/flexbox';
 @use 'utilities/typography';
 
+// Themes
+@use 'themes/index';
+
+// Reset
+@use 'base/reset';
+//@use 'base/typography';
+
+// Components
+@use './components/textfield' as textfield;
+@use './components/badge' as badge;
+@use './components/bottom-app-bar' as bottom-app-bar;
+@use './components/menu' as menu;
+@use './components/slider' as slider;
+@use './components/switch' as switch;
+@use './components/tabs' as tabs;
+@use './components/top-app-bar' as top-app-bar;
+
+@use '../components/styles/button' as button;
+@use '../components/styles/fab' as fab;
+@use '../components/styles/extended-fab' as extended-fab;
+@use '../components/styles/segmented-button' as segmented-button;
+@use '../components/styles/card' as card;
+@use '../components/styles/carousel' as carousel;
+@use '../components/styles/checkbox' as checkbox;
+@use '../components/styles/chip' as chip;
+@use '../components/styles/datepicker' as datepicker;
+@use '../components/styles/dialog' as dialog;
+@use '../components/styles/divider' as divider;
+
+@use '../components/styles/progress' as progress;
+
+@use '../components/styles/radios' as radios;
+@use '../components/styles/timepicker' as timepicker;
+@use '../components/styles/search' as search;
+
+@use '../components/styles/snackbar' as snackbar;
+@use '../components/styles/navigation' as navigation;
+@use '../components/styles/list' as list;
+
+@use '../core/build/ripple';
+
 // Initialize theme system
 :root {
   // Apply the base theme CSS variables
-  @include theme.light-theme;
+  @include t.light-theme;
 
-  // State layer variables
-  @each $key, $value in theme.$mtrl-sys-state {
-    --#{base.$prefix}-sys-state-#{$key}: #{$value};
-  }
+  // State layer variables - accessing individual values
+  --#{base.$prefix}-sys-state-hover-state-layer-opacity: #{v.state('hover-state-layer-opacity')};
+  --#{base.$prefix}-sys-state-focus-state-layer-opacity: #{v.state('focus-state-layer-opacity')};
+  --#{base.$prefix}-sys-state-pressed-state-layer-opacity: #{v.state('pressed-state-layer-opacity')};
+  --#{base.$prefix}-sys-state-dragged-state-layer-opacity: #{v.state('dragged-state-layer-opacity')};
   
-  // Motion variables
-  @each $key, $value in theme.$mtrl-sys-motion {
-    --#{base.$prefix}-sys-motion-#{$key}: #{$value};
-  }
-
-  // Shape variables
-  @each $key, $value in theme.$mtrl-sys-shape {
-    --#{base.$prefix}-sys-shape-#{$key}: #{$value};
-  }
+  // Motion variables - accessing individual values
+  --#{base.$prefix}-sys-motion-duration-short1: #{v.motion('duration-short1')};
+  --#{base.$prefix}-sys-motion-duration-short2: #{v.motion('duration-short2')};
+  --#{base.$prefix}-sys-motion-duration-short3: #{v.motion('duration-short3')};
+  --#{base.$prefix}-sys-motion-duration-short4: #{v.motion('duration-short4')};
+  --#{base.$prefix}-sys-motion-duration-medium1: #{v.motion('duration-medium1')};
+  --#{base.$prefix}-sys-motion-duration-medium2: #{v.motion('duration-medium2')};
+  --#{base.$prefix}-sys-motion-duration-long1: #{v.motion('duration-long1')};
+  --#{base.$prefix}-sys-motion-duration-long2: #{v.motion('duration-long2')};
+  --#{base.$prefix}-sys-motion-easing-standard: #{v.motion('easing-standard')};
+  --#{base.$prefix}-sys-motion-easing-standard-accelerate: #{v.motion('easing-standard-accelerate')};
+  --#{base.$prefix}-sys-motion-easing-standard-decelerate: #{v.motion('easing-standard-decelerate')};
+  --#{base.$prefix}-sys-motion-easing-emphasized: #{v.motion('easing-emphasized')};
+  --#{base.$prefix}-sys-motion-easing-emphasized-accelerate: #{v.motion('easing-emphasized-accelerate')};
+  --#{base.$prefix}-sys-motion-easing-emphasized-decelerate: #{v.motion('easing-emphasized-decelerate')};
+
+  // Shape variables - accessing individual values
+  --#{base.$prefix}-sys-shape-none: #{v.shape('none')};
+  --#{base.$prefix}-sys-shape-extra-tiny: #{v.shape('extra-tiny')};
+  --#{base.$prefix}-sys-shape-tiny: #{v.shape('tiny')};
+  --#{base.$prefix}-sys-shape-extra-small: #{v.shape('extra-small')};
+  --#{base.$prefix}-sys-shape-small: #{v.shape('small')};
+  --#{base.$prefix}-sys-shape-medium: #{v.shape('medium')};
+  --#{base.$prefix}-sys-shape-large: #{v.shape('large')};
+  --#{base.$prefix}-sys-shape-extra-large: #{v.shape('extra-large')};
+  --#{base.$prefix}-sys-shape-full: #{v.shape('full')};
+  --#{base.$prefix}-sys-shape-pill: #{v.shape('pill')};
   
-  // Typography
-  @each $scale, $properties in variables.$typescale {
-    --#{base.$prefix}-sys-typescale-#{$scale}-font-family-name: #{nth(map-get($properties, font-family), 1)};
-    --#{base.$prefix}-sys-typescale-#{$scale}-font-family-fallback: #{if(length(map-get($properties, font-family)) > 1, nth(map-get($properties, font-family), 2), 'sans-serif')};
-    --#{base.$prefix}-sys-typescale-#{$scale}-font-size: #{map-get($properties, font-size)};
-    --#{base.$prefix}-sys-typescale-#{$scale}-line-height: #{map-get($properties, line-height)};
-    --#{base.$prefix}-sys-typescale-#{$scale}-letter-spacing: #{map-get($properties, letter-spacing)};
-    --#{base.$prefix}-sys-typescale-#{$scale}-font-weight: #{map-get($properties, font-weight)};
+  // Typography - extracting individual properties
+  @each $scale, $properties in v.$typescale {
+    $font-family: map.get($properties, 'font-family');
+    $primary-font: sasslist.nth($font-family, 1);
+    $fallback-font: if(sasslist.length($font-family) > 1, sasslist.nth($font-family, 2), 'sans-serif');
+    
+    --#{base.$prefix}-sys-typescale-#{$scale}-font-family-name: #{$primary-font};
+    --#{base.$prefix}-sys-typescale-#{$scale}-font-family-fallback: #{$fallback-font};
+    --#{base.$prefix}-sys-typescale-#{$scale}-font-size: #{map.get($properties, 'font-size')};
+    --#{base.$prefix}-sys-typescale-#{$scale}-line-height: #{map.get($properties, 'line-height')};
+    --#{base.$prefix}-sys-typescale-#{$scale}-letter-spacing: #{map.get($properties, 'letter-spacing')};
+    --#{base.$prefix}-sys-typescale-#{$scale}-font-weight: #{map.get($properties, 'font-weight')};
   }
 }
 
 // Dark mode support
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme]) {
-    @include theme.dark-theme;
+    @include t.dark-theme;
   }
 }
 
@@ -86,7 +135,7 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   
-  @include mixins.motion-transition(background-color, color);
+  @include m.motion-transition(background-color, color);
 }
 
 // Ensure links have the correct contrast
@@ -114,7 +163,7 @@ a {
 html {
   scroll-behavior: smooth;
   
-  @include mixins.reduced-motion {
+  @include m.reduced-motion {
     scroll-behavior: auto;
   }
 }

package/src/components/badge/constants.ts

@@ -1,40 +0,0 @@
-// src/components/badge/constants.ts
-
-/**
- * Badge variants
- * - SMALL: Simple dot badge (6dp diameter)
- * - LARGE: Numbered badge (16dp height)
- */
-export const BADGE_VARIANTS = {
-  SMALL: 'small',
-  LARGE: 'large'
-} as const;
-
-/**
- * Badge colors
- * ERROR is the default
- */
-export const BADGE_COLORS = {
-  ERROR: 'error',      // Default
-  PRIMARY: 'primary',
-  SECONDARY: 'secondary',
-  TERTIARY: 'tertiary',
-  SUCCESS: 'success',
-  WARNING: 'warning',
-  INFO: 'info'
-} as const;
-
-/**
- * Badge positions relative to its container
- */
-export const BADGE_POSITIONS = {
-  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/button/constants.ts

@@ -1,11 +0,0 @@
-// src/components/button/constants.ts
-
-import { RIPPLE_SCHEMA } from '../../core/build/constants'
-
-export const BUTTON_VARIANTS = {
-  FILLED: 'filled',
-  TONAL: 'tonal',
-  OUTLINED: 'outlined',
-  ELEVATED: 'elevated',
-  TEXT: 'text'
-}

package/src/components/card/constants.ts

@@ -1,84 +0,0 @@
-// src/components/card/constants.ts
-
-import { CardVariant, CardElevation } from './types';
-
-/**
- * Card variant types following Material Design 3
- * @enum {string}
- */
-export const CARD_VARIANTS = {
-  /** Elevated card with shadow */
-  ELEVATED: CardVariant.ELEVATED,
-  /** Filled card with higher surface container color */
-  FILLED: CardVariant.FILLED,
-  /** Outlined card with border */
-  OUTLINED: CardVariant.OUTLINED
-};
-
-/**
- * Card elevation levels based on MD3 guidelines
- * Uses the MTRL elevation system values
- * @enum {number}
- */
-export const CARD_ELEVATIONS = {
-  /** No elevation (for filled and outlined variants) */
-  LEVEL0: CardElevation.LEVEL0,
-  /** Default elevation for elevated cards */
-  LEVEL1: CardElevation.LEVEL1,
-  /** Elevation for hovered state */
-  LEVEL2: CardElevation.LEVEL2,
-  /** Elevation for dragged state */
-  LEVEL4: CardElevation.LEVEL4
-};
-
-/**
- * Card validation schema
- * @const {Object}
- */
-export const CARD_SCHEMA = {
-  variant: {
-    type: 'string',
-    enum: Object.values(CARD_VARIANTS),
-    default: CARD_VARIANTS.ELEVATED
-  },
-  interactive: {
-    type: 'boolean',
-    default: false
-  },
-  fullWidth: {
-    type: 'boolean',
-    default: false
-  },
-  clickable: {
-    type: 'boolean',
-    default: false
-  },
-  draggable: {
-    type: 'boolean',
-    default: false
-  },
-  class: {
-    type: 'string',
-    required: false
-  },
-  headerConfig: {
-    type: 'object',
-    required: false
-  },
-  contentConfig: {
-    type: 'object',
-    required: false
-  },
-  actionsConfig: {
-    type: 'object',
-    required: false
-  },
-  mediaConfig: {
-    type: 'object',
-    required: false
-  },
-  aria: {
-    type: 'object',
-    required: false
-  }
-};

package/src/components/datepicker/constants.ts

@@ -1,98 +0,0 @@
-// src/components/datepicker/constants.ts
-
-/**
- * DatePicker variant types
- */
-export const DATEPICKER_VARIANTS = {
-  /** Displays inline with a text field above the calendar */
-  DOCKED: 'docked',
-  
-  /** Displays as a modal dialog */
-  MODAL: 'modal',
-  
-  /** Displays as a modal dialog with text input */
-  MODAL_INPUT: 'modal-input'
-};
-
-/**
- * DatePicker view types
- */
-export const DATEPICKER_VIEWS = {
-  /** Calendar day selection view */
-  DAY: 'day',
-  
-  /** Month selection view */
-  MONTH: 'month',
-  
-  /** Year selection view */
-  YEAR: 'year'
-};
-
-/**
- * DatePicker selection modes
- */
-export const DATEPICKER_SELECTION_MODES = {
-  /** Single date selection */
-  SINGLE: 'single',
-  
-  /** Date range selection */
-  RANGE: 'range'
-};
-
-/**
- * Day names for the calendar
- */
-export const DAY_NAMES = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
-
-/**
- * Month names for the calendar
- */
-export const MONTH_NAMES = [
-  'January', 'February', 'March', 'April', 
-  'May', 'June', 'July', 'August',
-  'September', 'October', 'November', 'December'
-];
-
-/**
- * Month names abbreviated
- */
-export const MONTH_NAMES_SHORT = [
-  'Jan', 'Feb', 'Mar', 'Apr', 
-  'May', 'Jun', 'Jul', 'Aug',
-  'Sep', 'Oct', 'Nov', 'Dec'
-];
-
-/**
- * Default format for displaying dates
- */
-export const DEFAULT_DATE_FORMAT = 'MM/DD/YYYY';
-
-/**
- * CSS class name for today's date
- */
-export const TODAY_CLASS = 'today';
-
-/**
- * CSS class name for selected date
- */
-export const SELECTED_CLASS = 'selected';
-
-/**
- * CSS class name for dates outside the current month
- */
-export const OUTSIDE_MONTH_CLASS = 'outside-month';
-
-/**
- * CSS class for the first date in a range
- */
-export const RANGE_START_CLASS = 'range-start';
-
-/**
- * CSS class for the last date in a range
- */
-export const RANGE_END_CLASS = 'range-end';
-
-/**
- * CSS class for dates between start and end in a range
- */
-export const RANGE_MIDDLE_CLASS = 'range-middle';

package/src/components/dialog/constants.ts

@@ -1,32 +0,0 @@
-// src/components/dialog/constants.ts
-
-export const DIALOG_SIZES = {
-  SMALL: 'small',
-  MEDIUM: 'medium',
-  LARGE: 'large',
-  FULLWIDTH: 'fullwidth',
-  FULLSCREEN: 'fullscreen'
-};
-
-export const DIALOG_ANIMATIONS = {
-  SCALE: 'scale',
-  SLIDE_UP: 'slide-up',
-  SLIDE_DOWN: 'slide-down',
-  FADE: 'fade'
-};
-
-export const DIALOG_FOOTER_ALIGNMENTS = {
-  RIGHT: 'right',
-  LEFT: 'left',
-  CENTER: 'center',
-  SPACE_BETWEEN: 'space-between'
-};
-
-export const DIALOG_EVENTS = {
-  OPEN: 'open',
-  CLOSE: 'close',
-  BEFORE_OPEN: 'beforeopen',
-  BEFORE_CLOSE: 'beforeclose',
-  AFTER_OPEN: 'afteropen',
-  AFTER_CLOSE: 'afterclose'
-};

package/src/components/extended-fab/constants.ts

@@ -1,36 +0,0 @@
-// src/components/extended-fab/constants.ts
-import { FAB_VARIANTS, FAB_POSITIONS } from '../fab/constants'
-
-/**
- * Re-export FAB variants for styling
- */
-export { FAB_VARIANTS }
-
-/**
- * Re-export FAB positions for fixed positioning
- */
-export { FAB_POSITIONS }
-
-/**
- * Extended FAB width behavior options
- */
-export const EXTENDED_FAB_WIDTH = {
-  /** Fixed width based on content */
-  FIXED: 'fixed',
-  /** Fluid width that can adapt to container */
-  FLUID: 'fluid'
-}
-
-/**
- * Extended FAB dimensions
- */
-export const EXTENDED_FAB_DIMENSIONS = {
-  /** Standard height - 56dp */
-  HEIGHT: 56,
-  /** Minimum width - 80dp */
-  MIN_WIDTH: 80,
-  /** Padding - 16dp */
-  PADDING: 16,
-  /** Icon size - 24dp */
-  ICON_SIZE: 24
-}

package/src/components/fab/constants.ts

@@ -1,41 +0,0 @@
-// src/components/fab/constants.ts
-
-/**
- * FAB variants for styling
- */
-export const FAB_VARIANTS = {
-  /** Primary container color with on-primary-container icons */
-  PRIMARY: 'primary',
-  /** Secondary container color with on-secondary-container icons */
-  SECONDARY: 'secondary',
-  /** Tertiary container color with on-tertiary-container icons */
-  TERTIARY: 'tertiary',
-  /** Surface color with primary color icons */
-  SURFACE: 'surface'
-};
-
-/**
- * FAB size variants
- */
-export const FAB_SIZES = {
-  /** Standard FAB size (56dp) */
-  DEFAULT: 'default',
-  /** Small FAB size (40dp) */
-  SMALL: 'small',
-  /** Large FAB size (96dp) */
-  LARGE: 'large'
-};
-
-/**
- * FAB positions for fixed positioning
- */
-export const FAB_POSITIONS = {
-  /** Top right corner */
-  TOP_RIGHT: 'top-right',
-  /** Top left corner */
-  TOP_LEFT: 'top-left',
-  /** Bottom right corner */
-  BOTTOM_RIGHT: 'bottom-right',
-  /** Bottom left corner */
-  BOTTOM_LEFT: 'bottom-left'
-};

package/src/components/menu/constants.ts

@@ -1,154 +0,0 @@
-// src/components/menu/constants.ts
-
-/**
- * Menu alignment options
- */
-export const MENU_ALIGN = {
-  LEFT: 'left',
-  RIGHT: 'right',
-  CENTER: 'center'
-} as const;
-
-/**
- * Menu vertical alignment options
- */
-export const MENU_VERTICAL_ALIGN = {
-  TOP: 'top',
-  BOTTOM: 'bottom',
-  MIDDLE: 'middle'
-} as const;
-
-/**
- * Menu item types
- */
-export const MENU_ITEM_TYPES = {
-  ITEM: 'item',
-  DIVIDER: 'divider'
-} as const;
-
-/**
- * Menu events
- */
-export const MENU_EVENTS = {
-  SELECT: 'select',
-  OPEN: 'open',
-  CLOSE: 'close',
-  SUBMENU_OPEN: 'submenuOpen',
-  SUBMENU_CLOSE: 'submenuClose'
-} as const;
-
-/**
- * Menu states
- */
-export const MENU_STATES = {
-  VISIBLE: 'visible',
-  HIDDEN: 'hidden',
-  DISABLED: 'disabled'
-} as const;
-
-/**
- * Menu element classes
- */
-export const MENU_CLASSES = {
-  ROOT: 'menu',
-  ITEM: 'menu-item',
-  ITEM_CONTAINER: 'menu-item-container',
-  LIST: 'menu-list',
-  DIVIDER: 'menu-divider',
-  SUBMENU: 'menu--submenu'
-} as const;
-
-/**
- * Menu positioning schema
- * Used for validation in component creation
- */
-export const MENU_POSITION_SCHEMA = {
-  type: 'object',
-  properties: {
-    align: {
-      type: 'string',
-      enum: Object.values(MENU_ALIGN),
-      optional: true,
-      default: MENU_ALIGN.LEFT
-    },
-    vAlign: {
-      type: 'string',
-      enum: Object.values(MENU_VERTICAL_ALIGN),
-      optional: true,
-      default: MENU_VERTICAL_ALIGN.BOTTOM
-    },
-    offsetX: {
-      type: 'number',
-      optional: true,
-      default: 0
-    },
-    offsetY: {
-      type: 'number',
-      optional: true,
-      default: 0
-    }
-  }
-} as const;
-
-/**
- * Validation schema for menu configuration
- */
-export const MENU_SCHEMA = {
-  type: 'object',
-  properties: {
-    items: {
-      type: 'array',
-      optional: true,
-      default: []
-    },
-    class: {
-      type: 'string',
-      optional: true
-    },
-    stayOpenOnSelect: {
-      type: 'boolean',
-      optional: true,
-      default: false
-    },
-    openingButton: {
-      optional: true
-    }
-  }
-} as const;
-
-/**
- * Menu item schema
- */
-export const MENU_ITEM_SCHEMA = {
-  type: 'object',
-  properties: {
-    name: {
-      type: 'string',
-      required: true
-    },
-    text: {
-      type: 'string',
-      required: true
-    },
-    type: {
-      type: 'string',
-      enum: Object.values(MENU_ITEM_TYPES),
-      optional: true,
-      default: MENU_ITEM_TYPES.ITEM
-    },
-    disabled: {
-      type: 'boolean',
-      optional: true,
-      default: false
-    },
-    class: {
-      type: 'string',
-      optional: true
-    },
-    items: {
-      type: 'array',
-      optional: true,
-      description: 'Submenu items'
-    }
-  }
-} as const;