mtrl 0.3.1 → 0.3.2

package/src/components/slider/config.ts

@@ -4,7 +4,7 @@ import {
   createElementConfig
 } from '../../core/config/component-config';
 import { SliderConfig } from './types';
-import { SLIDER_COLORS, SLIDER_SIZES } from './constants';
+import { SLIDER_COLORS, SLIDER_SIZES } from './types';
 import { createSliderSchema } from './schema';
 
 /**

package/src/components/slider/features/controller.ts

@@ -1,5 +1,5 @@
 // src/components/slider/features/controller.ts
-import { SLIDER_EVENTS } from '../constants';
+import { SLIDER_EVENTS } from '../types';
 import { SliderConfig } from '../types';
 import { createHandlers } from './handlers';
 

package/src/components/slider/features/handlers.ts

@@ -1,5 +1,5 @@
 // src/components/slider/features/handlers.ts
-import { SLIDER_EVENTS } from '../constants';
+import { SLIDER_EVENTS } from '../types';
 import { SliderConfig, SliderEvent } from '../types';
 
 /**

package/src/components/slider/features/states.ts

@@ -1,5 +1,5 @@
 // src/components/slider/features/states.ts
-import { SLIDER_COLORS, SLIDER_SIZES } from '../constants';
+import { SLIDER_COLORS, SLIDER_SIZES } from '../types';
 import { SliderConfig } from '../types';
 
 /**

package/src/components/slider/index.ts

@@ -3,8 +3,15 @@
 // Export main component creator
 export { default } from './slider';
 
-// Export constants
-export { SLIDER_COLORS, SLIDER_SIZES, SLIDER_EVENTS } from './constants';
-
-// Export types for TypeScript users
-export type { SliderConfig, SliderComponent, SliderEvent } from './types';
+// Export constants and types 
+export { 
+  // Constants
+  SLIDER_COLORS,
+  SLIDER_SIZES,
+  SLIDER_EVENTS,
+  
+  // Types
+  type SliderConfig, 
+  type SliderComponent, 
+  type SliderEvent 
+} from './types';

package/src/components/slider/schema.ts

@@ -22,7 +22,7 @@ export function createSliderSchema(component, config: SliderConfig) {
   // Calculate initial position
   const valuePercent = ((value - min) / (max - min)) * 100;
   
-  // Return base structure definition formatted for createStructure
+  // Return base structure definition formatted for createLayout
   return {
     element: {
       options: {

package/src/components/slider/types.ts

@@ -1,5 +1,36 @@
 // src/components/slider/types.ts
 
+/**
+ * Available slider color variants
+ */
+export const SLIDER_COLORS = {
+  PRIMARY: 'primary',
+  SECONDARY: 'secondary',
+  TERTIARY: 'tertiary',
+  ERROR: 'error'
+} as const;
+
+/**
+ * Available slider size variants
+ */
+export const SLIDER_SIZES = {
+  SMALL: 'small',
+  MEDIUM: 'medium',
+  LARGE: 'large'
+} as const;
+
+/**
+ * Available slider events
+ */
+export const SLIDER_EVENTS = {
+  CHANGE: 'change',
+  INPUT: 'input',
+  FOCUS: 'focus',
+  BLUR: 'blur',
+  START: 'start',
+  END: 'end'
+} as const;
+
 /**
  * Available slider color variants
  */

package/src/components/tabs/tab-api.ts

@@ -1,6 +1,6 @@
 // src/components/tabs/tab-api.ts
 import { TabComponent } from './types';
-import { BadgeComponent } from '../badge/types';
+import type { BadgeComponent } from '../badge';
 import createBadge from '../badge';
 
 const TAB_LAYOUT = {

package/src/components/tabs/types.ts

@@ -1,5 +1,5 @@
 // src/components/tabs/types.ts
-import { BadgeComponent } from '../badge/types';
+import type { BadgeComponent } from '../badge';
 import { TabIndicator } from './indicator';
 
 /**

package/src/components/tooltip/api.ts

@@ -1,6 +1,10 @@
 // src/components/tooltip/api.ts
-import { TooltipComponent } from './types';
-import { TOOLTIP_POSITIONS, DEFAULT_OFFSET, DEFAULT_ARROW_SIZE } from './config';
+import { 
+  TooltipComponent, 
+  TOOLTIP_POSITIONS, 
+  DEFAULT_OFFSET, 
+  DEFAULT_ARROW_SIZE 
+} from './types';
 
 interface ApiOptions {
   lifecycle: {

package/src/components/tooltip/config.ts

@@ -3,34 +3,15 @@ import {
   createComponentConfig, 
   createElementConfig
 } from '../../core/config/component-config';
-import { TooltipConfig } from './types';
-
-
-export const TOOLTIP_POSITIONS = {
-  TOP: 'top',
-  RIGHT: 'right',
-  BOTTOM: 'bottom',
-  LEFT: 'left',
-  TOP_START: 'top-start',
-  TOP_END: 'top-end',
-  RIGHT_START: 'right-start',
-  RIGHT_END: 'right-end',
-  BOTTOM_START: 'bottom-start',
-  BOTTOM_END: 'bottom-end',
-  LEFT_START: 'left-start',
-  LEFT_END: 'left-end'
-}
-
-export const TOOLTIP_VARIANTS = {
-  DEFAULT: 'default',
-  RICH: 'rich',
-  PLAIN: 'plain'
-}
-
-export const DEFAULT_SHOW_DELAY = 300
-export const DEFAULT_HIDE_DELAY = 100
-export const DEFAULT_OFFSET = 8
-export const DEFAULT_ARROW_SIZE = 8
+import { 
+  TooltipConfig, 
+  TOOLTIP_POSITIONS,
+  TOOLTIP_VARIANTS,
+  DEFAULT_SHOW_DELAY,
+  DEFAULT_HIDE_DELAY,
+  DEFAULT_OFFSET,
+  DEFAULT_ARROW_SIZE
+} from './types';
 
 /**
  * Default configuration for the Tooltip component

package/src/components/tooltip/index.ts

@@ -1,3 +1,12 @@
 // src/components/tooltip/index.ts
 export { default } from './tooltip';
-export { TooltipConfig, TooltipComponent } from './types';
+export { 
+  TooltipConfig, 
+  TooltipComponent, 
+  TOOLTIP_POSITIONS, 
+  TOOLTIP_VARIANTS,
+  DEFAULT_SHOW_DELAY,
+  DEFAULT_HIDE_DELAY,
+  DEFAULT_OFFSET,
+  DEFAULT_ARROW_SIZE
+} from './types';

package/src/components/tooltip/types.ts

@@ -1,12 +1,47 @@
 // src/components/tooltip/types.ts
 
 /**
- * Available Textfield variants
+ * Tooltip positions
+ */
+export const TOOLTIP_POSITIONS = {
+  TOP: 'top',
+  RIGHT: 'right',
+  BOTTOM: 'bottom',
+  LEFT: 'left',
+  TOP_START: 'top-start',
+  TOP_END: 'top-end',
+  RIGHT_START: 'right-start',
+  RIGHT_END: 'right-end',
+  BOTTOM_START: 'bottom-start',
+  BOTTOM_END: 'bottom-end',
+  LEFT_START: 'left-start',
+  LEFT_END: 'left-end'
+} as const;
+
+/**
+ * Tooltip variants
+ */
+export const TOOLTIP_VARIANTS = {
+  DEFAULT: 'default',
+  RICH: 'rich',
+  PLAIN: 'plain'
+} as const;
+
+/**
+ * Default values
+ */
+export const DEFAULT_SHOW_DELAY = 300;
+export const DEFAULT_HIDE_DELAY = 100;
+export const DEFAULT_OFFSET = 8;
+export const DEFAULT_ARROW_SIZE = 8;
+
+/**
+ * Available Tooltip variants
  */
 export type TooltipVariant = 'default' | 'rich' | 'plain';
 
 /**
- * Available Textfield states
+ * Available Tooltip positions
  */
 export type TooltipPosition = 'top' | 'right' | 'bottom' | 'left' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end';
 
@@ -38,7 +73,7 @@ export interface TooltipConfig {
    * Tooltip variant that determines visual styling
    * @default 'default'
    */
-  variant?: TooltipVariants | string;
+  variant?: TooltipVariant | string;
   
   /** 
    * Whether the tooltip is initially visible

package/src/index.ts

@@ -1,32 +1,130 @@
 // src/index.ts
-export { createElement } from './core/dom/create'
-export { default as createLayout } from './core/layout'
-export { default as createButton } from './components/button'
-export { default as createFab } from './components/fab'
-export { default as createExtendedFab } from './components/extended-fab'
-export { default as createSegmentedButton } from './components/segmented-button'
-export { default as createBottomAppBar } from './components/bottom-app-bar'
-export { default as createBadge } from './components/badge'
-export { default as createCard } from './components/card'
-export { default as createCarousel } from './components/carousel'
-export { default as createCheckbox } from './components/checkbox'
-export { default as createChip } from './components/chip'
-export { default as createDatePicker } from './components/datepicker'
-export { default as createDialog } from './components/dialog'
-export { default as createDivider } from './components/divider'
-export { default as createMenu } from './components/menu'
-export { default as createNavigation } from './components/navigation'
-export { default as createNavigationSystem } from './components/navigation'
-export { default as createProgress } from './components/progress'
-export { default as createRadios } from './components/radios'
-export { default as createSearch } from './components/search'
-export { default as createSheet } from './components/sheet'
-export { default as createSlider } from './components/slider'
-export { default as createSnackbar } from './components/snackbar'
-export { default as createSwitch } from './components/switch'
-export { default as createTabs } from './components/tabs'
-export { default as createTextfield } from './components/textfield'
-export { default as createTimePicker } from './components/timepicker'
-export { default as createTopAppBar } from './components/top-app-bar'
-export { default as createTooltip } from './components/tooltip'
-export { default as createList } from './components/list'
+/**
+ * Main mtrl library exports
+ * 
+ * @packageDocumentation
+ */
+
+// Direct component imports
+import { createElement } from './core/dom/create';
+import createLayout from './core/layout';
+import createBadge from './components/badge';
+import createBottomAppBar from './components/bottom-app-bar';
+import createButton from './components/button';
+import createCard from './components/card';
+import { 
+  createCardContent, 
+  createCardHeader, 
+  createCardActions, 
+  createCardMedia 
+} from './components/card/content';
+import createCarousel from './components/carousel';
+import createCheckbox from './components/checkbox';
+import { createChip, createChips } from './components/chips';
+import createDatePicker from './components/datepicker';
+import createDialog from './components/dialog';
+import { createDivider } from './components/divider';
+import createFab from './components/fab';
+import createExtendedFab from './components/extended-fab';
+import createList, { createListItem } from './components/list';
+import createMenu from './components/menu';
+import createNavigation, { createNavigationSystem } from './components/navigation';
+import createProgress from './components/progress';
+import createRadios from './components/radios';
+import createSearch from './components/search';
+import createSegmentedButton, { createSegment } from './components/segmented-button';
+import createSheet from './components/sheet';
+import createSlider from './components/slider';
+import createSnackbar from './components/snackbar';
+import createSwitch from './components/switch';
+import createTabs, { createTab } from './components/tabs';
+import createTextfield from './components/textfield';
+import createTimePicker from './components/timepicker';
+import createTopAppBar from './components/top-app-bar';
+import createTooltip from './components/tooltip';
+
+// Export all "create*" functions
+export {
+  createElement,
+  createLayout,
+  createBadge,
+  createBottomAppBar,
+  createButton,
+  createCard,
+  createCardContent, 
+  createCardHeader, 
+  createCardActions, 
+  createCardMedia,
+  createCarousel,
+  createCheckbox,
+  createChip,
+  createChipSet,
+  createDatePicker,
+  createDialog,
+  createDivider,
+  createFab,
+  createExtendedFab,
+  createList,
+  createListItem,
+  createMenu,
+  createNavigation,
+  createNavigationSystem,
+  createProgress,
+  createRadios,
+  createSearch,
+  createSegmentedButton,
+  createSegment,
+  createSheet,
+  createSlider,
+  createSnackbar,
+  createSwitch,
+  createTabs,
+  createTab,
+  createTextfield,
+  createTimePicker,
+  createTopAppBar,
+  createTooltip
+};
+
+// Export all "f*" aliases
+export {
+  createElement as fElement,
+  createLayout as fLayout,
+  createBadge as fBadge,
+  createBottomAppBar as fBottomAppBar,
+  createButton as fButton,
+  createCard as fCard,
+  createCardContent as fCardContent, 
+  createCardHeader as fCardHeader, 
+  createCardActions as fCardActions, 
+  createCardMedia as fCardMedia,
+  createCarousel as fCarousel,
+  createCheckbox as fCheckbox,
+  createChip as fChip,
+  createChips as fChips,
+  createDatePicker as fDatePicker,
+  createDialog as fDialog,
+  createDivider as fDivider,
+  createFab as fFab,
+  createExtendedFab as fExtendedFab,
+  createList as fList,
+  createListItem as fListItem,
+  createMenu as fMenu,
+  createNavigation as fNavigation,
+  createNavigationSystem as fNavigationSystem,
+  createProgress as fProgress,
+  createRadios as fRadios,
+  createSearch as fSearch,
+  createSegmentedButton as fSegmentedButton,
+  createSegment as fSegment,
+  createSheet as fSheet,
+  createSlider as fSlider,
+  createSnackbar as fSnackbar,
+  createSwitch as fSwitch,
+  createTabs as fTabs,
+  createTab as fTab,
+  createTextfield as fTextfield,
+  createTimePicker as fTimePicker,
+  createTopAppBar as fTopAppBar,
+  createTooltip as fTooltip
+};

package/src/styles/abstract/_mixins.scss

@@ -37,17 +37,31 @@ $icons: (
 }
 
 // State Layers
-@mixin state-layer($color, $state: 'hover', $selector: '&::before') {
+@mixin state-layer($color, $state: 'hover', $selector: false) {
   position: relative;
   
-  #{$selector} {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background-color: $color;
-    opacity: f.get-state-opacity($state);
-    pointer-events: none;
-    border-radius: inherit;
+  @if $selector == false {
+    // Default behavior - create a pseudo-element for the state layer
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background-color: $color;
+      opacity: f.get-state-opacity($state);
+      pointer-events: none;
+      border-radius: inherit;
+    }
+  } @else {
+    // Use the provided selector
+    #{$selector} {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background-color: $color;
+      opacity: f.get-state-opacity($state);
+      pointer-events: none;
+      border-radius: inherit;
+    }
   }
 }
 

package/src/styles/abstract/_variables.scss

@@ -189,11 +189,18 @@ $card: (
   'padding': 16px
 ) !default;
 
-// Chip configuration
+// Chip configuration - updated with MD3 values
 $chip-config: (
   'height': 32px,
   'border-radius': 8px,
-  'padding-horizontal': 12px
+  'padding-horizontal': 12px,
+  'outlined-border-opacity': 0.12,
+  'outlined-border-hover-opacity': 0.29,
+  'outlined-border-focus-opacity': 0.38,
+  'outlined-selected-border-opacity': 0,
+  'suggestion-height': 48px,
+  'icon-size': 18px,
+  'suggestion-icon-size': 24px
 ) !default;
 
 $button: (
@@ -272,6 +279,9 @@ $spacing-scale: (
   @return map.get($card, $key);
 }
 
-@function chip($key) {
-  @return map.get($chip-config, $key);
+@function chip($key, $fallback: null) {
+  @if map.has-key($chip-config, $key) {
+    @return map.get($chip-config, $key);
+  }
+  @return $fallback;
 }

package/src/styles/components/_card.scss

@@ -302,7 +302,7 @@ $component: '#{base.$prefix}-card';
   
   // State classes
   &--state-disabled {
-    opacity: 0.38; // Use MTRL standard opacity
+    opacity: 0.38; // Use mtrl standard opacity
     pointer-events: none;
   }