mtrl 0.2.7 → 0.2.8

package/src/components/tabs/tab.ts

@@ -8,6 +8,18 @@ import { createTabConfig } from './config';
 import createButton from '../button';
 import createBadge from '../badge';
 
+/**
+ * Tab layout types
+ */
+export const TAB_LAYOUT = {
+  /** Icon-only tab layout */
+  ICON_ONLY: 'icon-only',
+  /** Text-only tab layout */
+  TEXT_ONLY: 'text-only',
+  /** Icon and text layout */
+  ICON_AND_TEXT: 'icon-and-text'
+};
+
 /**
  * Creates a new Tab component following MD3 guidelines
  * @param {TabConfig} config - Tab configuration object
@@ -49,7 +61,7 @@ export const createTab = (config: TabConfig = {}): TabComponent => {
     // Set up tab accessibility attributes
     baseComponent.element.setAttribute('role', 'tab');
     baseComponent.element.setAttribute('aria-selected', 
-      baseConfig.state === TAB_STATES.ACTIVE ? 'true' : 'false');
+      baseConfig.state === 'active' ? 'true' : 'false');
     
     // For better accessibility
     if (baseConfig.value) {
@@ -58,8 +70,8 @@ export const createTab = (config: TabConfig = {}): TabComponent => {
     }
     
     // Add active state if specified in config
-    if (baseConfig.state === TAB_STATES.ACTIVE) {
-      baseComponent.element.classList.add(`${baseComponent.getClass('tab')}--${TAB_STATES.ACTIVE}`);
+    if (baseConfig.state === 'active') {
+      baseComponent.element.classList.add(`${baseComponent.getClass('tab')}--active`);
     }
     
     // Forward button events to our component
@@ -95,7 +107,7 @@ export const createTab = (config: TabConfig = {}): TabComponent => {
       },
       
       activate() {
-        this.element.classList.add(`${this.getClass('tab')}--${TAB_STATES.ACTIVE}`);
+        this.element.classList.add(`${this.getClass('tab')}--active`);
         this.element.setAttribute('aria-selected', 'true');
         
         // Dispatch event for screen readers
@@ -109,13 +121,13 @@ export const createTab = (config: TabConfig = {}): TabComponent => {
       },
       
       deactivate() {
-        this.element.classList.remove(`${this.getClass('tab')}--${TAB_STATES.ACTIVE}`);
+        this.element.classList.remove(`${this.getClass('tab')}--active`);
         this.element.setAttribute('aria-selected', 'false');
         return this;
       },
       
       isActive() {
-        return this.element.classList.contains(`${this.getClass('tab')}--${TAB_STATES.ACTIVE}`);
+        return this.element.classList.contains(`${this.getClass('tab')}--active`);
       },
       
       enable() {

package/src/components/tabs/types.ts

@@ -1,8 +1,18 @@
 // src/components/tabs/types.ts
-import { TABS_VARIANTS, TAB_STATES, TAB_LAYOUT } from './constants';
 import { BadgeComponent } from '../badge/types';
 import { TabIndicator } from './indicator';
 
+/**
+ * Available tabs variants
+ */
+export type TabsVariant = 'primary' | 'secondary';
+
+/**
+ * Available tabs states
+ */
+
+export type TabStates = 'active' | 'inactive' | 'disabled';
+
 /**
  * Configuration for the tab indicator
  * @category Components
@@ -55,7 +65,7 @@ export interface TabConfig {
    * Tab state that determines if it's the active destination
    * @default 'inactive'
    */
-  state?: keyof typeof TAB_STATES | string;
+  state?: TabStates | string;
   
   /** 
    * Whether the tab is initially disabled
@@ -154,7 +164,7 @@ export interface TabsConfig {
    * Tabs variant (primary or secondary)
    * @default 'primary'
    */
-  variant?: keyof typeof TABS_VARIANTS | string;
+  variant?: TabsVariant | string;
   
   /**
    * Initial tabs to create

package/src/components/textfield/config.ts

@@ -5,14 +5,13 @@ import {
   BaseComponentConfig 
 } from '../../core/config/component-config';
 import { TextfieldConfig, BaseComponent, ApiOptions } from './types';
-import { TEXTFIELD_VARIANTS, TEXTFIELD_TYPES } from './constants';
 
 /**
  * Default configuration for the Textfield component
  */
 export const defaultConfig: TextfieldConfig = {
-  type: TEXTFIELD_TYPES.TEXT,
-  variant: TEXTFIELD_VARIANTS.FILLED
+  type: 'text',
+  variant: 'filled'
 };
 
 /**

package/src/components/textfield/index.ts

@@ -1,4 +1,3 @@
 // src/components/textfield/index.ts
 export { default } from './textfield'
-export { TEXTFIELD_VARIANTS, TEXTFIELD_TYPES } from './constants'
 export { TextfieldConfig, TextfieldComponent } from './types'

package/src/components/textfield/types.ts

@@ -1,15 +1,29 @@
 // src/components/textfield/types.ts
-import { TEXTFIELD_VARIANTS, TEXTFIELD_TYPES } from './constants';
+
+/**
+ * Available Textfield variants
+ */
+export type TextfieldVariant = 'filled' | 'outlined';
+
+/**
+ * Available Textfield states
+ */
+export type TextfieldStates = 'active' | 'inactive' | 'disabled';
+
+/**
+ * Available Textfield types
+ */
+export type TextfieldTypes = 'text' | 'password' | 'email' | 'number' | 'tel' | 'url' | 'search' | 'multiline';
 
 /**
  * Configuration interface for the Textfield component
  */
 export interface TextfieldConfig {
   /** Input type (text, password, email, etc.) */
-  type?: keyof typeof TEXTFIELD_TYPES | string;
+  type?: TextfieldTypes | string;
   
   /** Visual variant (filled, outlined) */
-  variant?: keyof typeof TEXTFIELD_VARIANTS | string;
+  variant?: TextfieldVariant | string;
   
   /** Input name attribute */
   name?: string;

package/src/components/timepicker/api.ts

@@ -9,7 +9,7 @@ import {
   TIME_FORMAT,
   TIME_PERIOD
 } from './types';
-import { EVENTS, SELECTORS } from './constants';
+import { EVENTS, SELECTORS } from './config';
 import { formatTime, padZero } from './utils';
 import { renderTimePicker } from './render';
 import { renderClockDial, getTimeValueFromClick } from './clockdial';

package/src/components/timepicker/clockdial.ts

@@ -1,7 +1,7 @@
 // src/components/timepicker/clockdial.ts
 
 import { TimeValue, TIME_FORMAT, TIME_PICKER_TYPE, TIME_PERIOD } from './types';
-import { DIAL_CONSTANTS, TIME_CONSTANTS } from './constants';
+import { DIAL_CONSTANTS, TIME_CONSTANTS } from './config';
 import { padZero } from './utils';
 
 /**

package/src/components/timepicker/config.ts

@@ -9,10 +9,108 @@ import { TimePickerConfig } from './types';
 import { 
   TIME_PICKER_TYPE, 
   TIME_PICKER_ORIENTATION, 
-  TIME_FORMAT,
-  DEFAULT_CLOCK_ICON,
-  DEFAULT_KEYBOARD_ICON
-} from './constants';
+  TIME_FORMAT
+} from './types';
+
+export const DIAL_CONSTANTS = {
+  DIAMETER: 256,
+  INNER_RADIUS: 65,
+  OUTER_RADIUS: 110,
+  NUMBER_SIZE: 40,
+  CENTER_SIZE: 8,
+  HAND_SIZE: 36,
+  TRACK_WIDTH: 2,
+};
+
+/**
+ * Time constants used in the time picker.
+ */
+export const TIME_CONSTANTS = {
+  HOURS_12: Array.from({ length: 12 }, (_, i) => (i === 0 ? 12 : i)),
+  HOURS_24: Array.from({ length: 24 }, (_, i) => i),
+  MINUTES: Array.from({ length: 60 }, (_, i) => i),
+  SECONDS: Array.from({ length: 60 }, (_, i) => i),
+};
+
+/**
+ * Custom events fired by the time picker.
+ */
+export const EVENTS = {
+  CHANGE: 'change',
+  OPEN: 'open',
+  CLOSE: 'close',
+  CONFIRM: 'confirm',
+  CANCEL: 'cancel',
+};
+
+/**
+ * Element selectors for time picker components.
+ * Used for DOM manipulation and event delegation.
+ */
+export const SELECTORS = {
+  CONTAINER: '.mtrl-time-picker',
+  MODAL: '.mtrl-time-picker-modal',
+  DIALOG: '.mtrl-time-picker-dialog',
+  TITLE: '.mtrl-time-picker-title',
+  CONTENT: '.mtrl-time-picker-content',
+  DIAL: '.mtrl-time-picker-dial',
+  DIAL_CANVAS: '.mtrl-time-picker-dial-canvas',
+  DIAL_FACE: '.mtrl-time-picker-dial-face',
+  DIAL_HAND: '.mtrl-time-picker-dial-hand',
+  DIAL_CENTER: '.mtrl-time-picker-dial-center',
+  DIAL_NUMBERS: '.mtrl-time-picker-dial-numbers',
+  DIAL_NUMBER: '.mtrl-time-picker-dial-number',
+  INPUT_CONTAINER: '.mtrl-time-picker-input-container',
+  HOURS_INPUT: '.mtrl-time-picker-hours',
+  MINUTES_INPUT: '.mtrl-time-picker-minutes',
+  SECONDS_INPUT: '.mtrl-time-picker-seconds',
+  SEPARATOR: '.mtrl-time-picker-separator',
+  PERIOD_CONTAINER: '.mtrl-time-picker-period',
+  PERIOD_AM: '.mtrl-time-picker-period-am',
+  PERIOD_PM: '.mtrl-time-picker-period-pm',
+  ACTIONS: '.mtrl-time-picker-actions',
+  TOGGLE_TYPE_BUTTON: '.mtrl-time-picker-toggle-type',
+  CANCEL_BUTTON: '.mtrl-time-picker-cancel',
+  CONFIRM_BUTTON: '.mtrl-time-picker-confirm',
+};
+
+/**
+ * Z-index values for different parts of the time picker.
+ */
+export const Z_INDEX = {
+  MODAL: 1050,
+  DIALOG: 1051,
+};
+
+/**
+ * Default clock icon for time picker.
+ * Simple clock SVG.
+ */
+export const DEFAULT_CLOCK_ICON = `
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <circle cx="12" cy="12" r="10"></circle>
+  <polyline points="12 6 12 12 16 14"></polyline>
+</svg>
+`
+
+/**
+ * Default keyboard icon for time picker.
+ * Simple keyboard SVG.
+ */
+export const DEFAULT_KEYBOARD_ICON = `
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <rect x="2" y="4" width="20" height="16" rx="2" ry="2"></rect>
+  <line x1="6" y1="8" x2="6" y2="8"></line>
+  <line x1="10" y1="8" x2="10" y2="8"></line>
+  <line x1="14" y1="8" x2="14" y2="8"></line>
+  <line x1="18" y1="8" x2="18" y2="8"></line>
+  <line x1="6" y1="12" x2="6" y2="12"></line>
+  <line x1="10" y1="12" x2="10" y2="12"></line>
+  <line x1="14" y1="12" x2="14" y2="12"></line>
+  <line x1="18" y1="12" x2="18" y2="12"></line>
+  <line x1="6" y1="16" x2="18" y2="16"></line>
+</svg>
+`;
 
 /**
  * Default configuration for the TimePicker component

package/src/components/timepicker/index.ts

@@ -1,8 +1,3 @@
+// src/components/timepicker/index.ts
 export { default } from './timepicker';
-export { 
-  TIME_PICKER_TYPE, 
-  TIME_PICKER_ORIENTATION, 
-  TIME_FORMAT, 
-  TIME_PERIOD 
-} from './constants';
 export type { TimePickerConfig, TimePickerComponent, TimeValue } from './types';

package/src/components/timepicker/render.ts

@@ -7,7 +7,7 @@ import {
   DEFAULT_CLOCK_ICON,
   DEFAULT_KEYBOARD_ICON,
   SELECTORS
-} from './constants';
+} from './config';
 import { padZero, convertTo12Hour } from './utils';
 import { renderClockDial, getTimeValueFromClick } from './clockdial';
 

package/src/components/timepicker/timepicker.ts

@@ -15,7 +15,7 @@ import {
   EVENTS,
   SELECTORS,
   Z_INDEX
-} from './constants';
+} from './config';
 import { createTimePickerAPI } from './api';
 import { renderTimePicker } from './render';
 import { parseTime, formatTime } from './utils';

package/src/components/tooltip/api.ts

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

package/src/components/tooltip/config.ts

@@ -4,12 +4,33 @@ import {
   createElementConfig
 } from '../../core/config/component-config';
 import { TooltipConfig } from './types';
-import { 
-  TOOLTIP_POSITIONS, 
-  TOOLTIP_VARIANTS,
-  DEFAULT_SHOW_DELAY,
-  DEFAULT_HIDE_DELAY
-} from './constants';
+
+
+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
 
 /**
  * Default configuration for the Tooltip component

package/src/components/tooltip/index.ts

@@ -1,4 +1,3 @@
 // src/components/tooltip/index.ts
 export { default } from './tooltip';
-export { TOOLTIP_POSITIONS, TOOLTIP_VARIANTS } from './constants';
 export { TooltipConfig, TooltipComponent } from './types';

package/src/components/tooltip/types.ts

@@ -1,5 +1,15 @@
 // src/components/tooltip/types.ts
-import { TOOLTIP_POSITIONS, TOOLTIP_VARIANTS } from './constants';
+
+/**
+ * Available Textfield variants
+ */
+export type TooltipVariant = 'default' | 'rich' | 'plain';
+
+/**
+ * Available Textfield states
+ */
+export type TooltipPosition = 'top' | 'right' | 'bottom' | 'left' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end';
+
 
 /**
  * Configuration interface for the Tooltip component
@@ -22,13 +32,13 @@ export interface TooltipConfig {
    * Tooltip position relative to the target
    * @default 'bottom'
    */
-  position?: keyof typeof TOOLTIP_POSITIONS | string;
+  position?: TooltipPosition | string;
   
   /** 
    * Tooltip variant that determines visual styling
    * @default 'default'
    */
-  variant?: keyof typeof TOOLTIP_VARIANTS | string;
+  variant?: TooltipVariants | string;
   
   /** 
    * Whether the tooltip is initially visible

package/src/core/compose/features/textlabel.ts

@@ -89,9 +89,6 @@ export const withTextLabel = <T extends TextLabelConfig>(config: T = {} as T) =>
       component.element.appendChild(labelElement);
     }
 
-    console.log('componentName', component.componentName)
-    console.log('position', position)
-
     if (position && component.componentName !== 'slider') {
       component.element.classList.add(`${config.prefix}-${config.componentName}--label-${position}`);
     }

package/src/{components/tabs/_styles.scss → styles/components/_tabs.scss}

@@ -90,7 +90,7 @@ $container: '#{base.$prefix}-tabs';
   max-width: 360px;
   padding: 0 16px;
   border: none;
-  border-radius: 5px;
+  border-radius: 5px 5px 0 0;
   background-color: transparent;
   color: t.color('on-surface-variant');
   cursor: pointer;

package/src/{components/textfield/_styles.scss → styles/components/_textfield.scss}

@@ -131,14 +131,14 @@ $component: '#{base.$prefix}-textfield';
   
   // ===== FILLED VARIANT =====
   &--filled {
-    border-bottom: 1px solid t.color('outline');
-    
     .#{$component}-input {
       background-color: t.color('surface-container-highest');
       padding: 20px 16px 7px;
+      border-bottom: 1px solid t.color('outline');
       border-radius: f.get-shape('extra-small') f.get-shape('extra-small') 0 0;
       @include m.motion-transition(background-color, border-color);
-      
+
+
       &:focus {
         padding-bottom: 6px;
       }
@@ -161,6 +161,19 @@ $component: '#{base.$prefix}-textfield';
       }
     }
 
+    &::before {
+      content: '';
+      position: absolute;
+      opacity: 0;
+      bottom: 0;
+      width: 100%;
+      height: 2px;
+      background-color: t.color('primary');
+      border-radius: 0;
+      pointer-events: none;
+      transition: 0.3s opacity ease;
+    }
+
     // Populated field (not empty) or focused field label position
     &:not(.#{$component}--empty) .#{$component}-label,
     &.#{$component}--focused .#{$component}-label {
@@ -168,48 +181,33 @@ $component: '#{base.$prefix}-textfield';
     }
 
     // Focus state
-    &.#{$component}--focused {
-      border-bottom: 2px solid t.color('primary');
-      
+    &.#{$component}--focused {    
       .#{$component}-label {
         color: t.color('primary');
       }
       
-      .#{$component}-input {
-        height: 55px;
-        padding: 20px 16px 6px;
-      }
-
-
-      &:hover {
-        border-bottom: 2px solid t.color('primary');
+      &::before {
+        opacity: 1
       }
     }
     
     // Hover state
-    &:hover {
-      border-bottom: 1px solid t.color('primary');
-      
+    &:hover {    
       .#{$component}-label {
         color: t.color('primary');
       }
     }
     
     // Error state
-    &.#{$component}--error {
-      border-bottom: 2px solid t.color('error');
-      
+    &.#{$component}--error {    
+      &::before {
+        opacity: 1;
+        background-color: t.color('error');
+      }
+
       .#{$component}-label {
         color: t.color('error');
       }
-      
-      &:hover {
-        border-bottom: 2px solid t.color('error');
-      }
-      
-      &.#{$component}--focused {
-        border-bottom: 2px solid t.color('error');
-      }
     }
     
     // Disabled state
@@ -233,13 +231,13 @@ $component: '#{base.$prefix}-textfield';
   
   // ===== OUTLINED VARIANT =====
   &--outlined {
-    border: 1px solid t.color('outline');
     border-radius: f.get-shape('extra-small');
     @include m.motion-transition(border-color);
     
     .#{$component}-input {
       background-color: transparent;
-      padding: 13px 16px 14px;
+      padding: 12px 15px 13px;
+      border: 1px solid t.color('outline');
       @include m.motion-transition(padding);
 
       // Autofill styles for outlined variant
@@ -249,8 +247,6 @@ $component: '#{base.$prefix}-textfield';
         & ~ .#{$component}-label {
           background-color: t.color('surface');
           transform: translateY(-145%) scale(0.75);
-          left: 13px;
-          padding: 0 4px;
         }
       }
 
@@ -258,73 +254,80 @@ $component: '#{base.$prefix}-textfield';
         & ~ .#{$component}-label {
           background-color: t.color('surface');
           transform: translateY(-145%) scale(0.75);
-          left: 13px;
-          padding: 0 4px;
         }
       }
     }
 
+    .#{$component}-label {
+      padding: 0 4px;
+      left: 12px;
+      top: 49%;
+    }
+
+    &::before {
+      content: '';
+      position: absolute;
+      opacity: 0;
+      width: 100%;
+      height: 100%;
+      border: 2px solid t.color('primary');
+      border-radius: f.get-shape('extra-small');
+      pointer-events: none;
+      transition: 0.2s opacity ease;
+    }
+
     // Populated field (not empty) or focused field label position
     &:not(.#{$component}--empty) .#{$component}-label,
     &.#{$component}--focused .#{$component}-label {
-      background-color: t.color('surface');
-      transform: translateY(-145%) scale(0.75);
-      left: 13px;
       padding: 0 4px;
+      background-color: t.color('surface');
+      transform: translateY(-147%) scale(0.75);
+      
     }
 
     // Focus state
     &.#{$component}--focused {
-      border: 2px solid t.color('primary');
-      
-      .#{$component}-label {
-        color: t.color('primary');
-        border-radius: 2px;
-        left: 12px;
+      &::before {
+        opacity: 1;
       }
-      
-      .#{$component}-input {
-        height: 54px;
-        padding: 12px 15px 13px;
-      }
-      
       &:hover {
-        border: 2px solid t.color('primary');
+        &::before {
+          border-width: 2px;
+        }
       }
     }
     
     // Hover state
-    &:hover {
-      border: 1px solid t.color('primary');
-      
+    &:hover {    
       .#{$component}-label {
         color: t.color('primary');
       }
+
+      &::before {
+        opacity: 1;
+        border: 1px solid t.color('primary');
+      }
     }
     
     // Error state
-    &.#{$component}--error {
-      border: 2px solid t.color('error');
-      
+    &.#{$component}--error {    
+      &::before {
+        opacity: 1;
+        border: 2px solid t.color('error');
+      }
+
       .#{$component}-label {
         color: t.color('error');
-        left: 12px;
-      }
-      
-      .#{$component}-input {
-        padding: 12px 15px 13px;
-      }
-      
-      &:hover,
-      &.#{$component}--focused {
-        border: 2px solid t.color('error');
       }
     }
     
     // Disabled state
     &.#{$component}--disabled {
-      border-color: t.alpha('on-surface', 0.38);
       pointer-events: none;
+      &::before {
+        opacity: 1;
+        border: 1px solid t.alpha('on-surface', 0.38);
+      }
     }
     
     // RTL support