mtrl 0.2.6 → 0.2.8

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/components/top-app-bar/config.ts

@@ -0,0 +1,83 @@
+// src/components/top-app-bar/config.ts
+/**
+ * @module components/top-app-bar
+ * @description Configuration for top app bar component
+ */
+
+import { createComponentConfig, BaseComponentConfig } from '../../core/config/component-config';
+import { PREFIX } from '../../core/config';
+
+/**
+ * Top App Bar types
+ */
+export type TopAppBarType = 'small' | 'medium' | 'large' | 'center';
+
+/**
+ * Configuration options for top app bar
+ */
+export interface TopAppBarConfig extends BaseComponentConfig {
+  /**
+   * Element to use for the container
+   * @default 'header'
+   */
+  tag?: string;
+  
+  /**
+   * Type of top app bar to display
+   * @default 'small'
+   */
+  type?: TopAppBarType;
+  
+  /**
+   * Title text to display in the app bar
+   */
+  title?: string;
+  
+  /**
+   * Whether to enable scrolling behavior
+   * @default true
+   */
+  scrollable?: boolean;
+  
+  /**
+   * Whether to compress medium/large variants to small on scroll
+   * @default true
+   */
+  compressible?: boolean;
+  
+  /**
+   * Scroll threshold in pixels to trigger the scrolled state
+   * @default 4
+   */
+  scrollThreshold?: number;
+  
+  /**
+   * Additional CSS classes to apply
+   */
+  class?: string;
+
+  /**
+   * Optional callback when scrolling changes the bar appearance
+   */
+  onScroll?: (scrolled: boolean) => void;
+}
+
+/**
+ * Default configuration for top app bar
+ */
+export const defaultConfig: Partial<TopAppBarConfig> = {
+  tag: 'header',
+  type: 'small',
+  scrollable: true,
+  compressible: true,
+  scrollThreshold: 4
+};
+
+/**
+ * Creates the configuration for a top app bar component
+ * 
+ * @param {TopAppBarConfig} config - User provided configuration
+ * @returns {TopAppBarConfig} Complete configuration with defaults applied
+ */
+export const createConfig = (config: TopAppBarConfig = {} as TopAppBarConfig): TopAppBarConfig => 
+  createComponentConfig(defaultConfig, config, 'top-app-bar') as TopAppBarConfig;

package/src/components/top-app-bar/index.ts

@@ -0,0 +1,11 @@
+// src/components/top-app-bar/index.ts
+/**
+ * @module components/top-app-bar
+ * @description Top app bar component for application headers
+ */
+
+import { createTopAppBar } from './top-app-bar';
+
+export default createTopAppBar;
+export { createTopAppBar };
+export type { TopAppBarConfig, TopAppBarType } from './config';

package/src/components/top-app-bar/top-app-bar.ts

@@ -0,0 +1,316 @@
+// src/components/top-app-bar/top-app-bar.ts
+/**
+ * @module components/top-app-bar
+ * @description Top app bar implementation
+ */
+
+import { 
+  createBase, 
+  withElement, 
+  withEvents, 
+  withLifecycle,
+  ElementComponent, 
+  BaseComponent 
+} from '../../core/compose';
+
+import { createConfig, TopAppBarConfig, TopAppBarType } from './config';
+
+/**
+ * Top app bar component interface
+ */
+export interface TopAppBar extends ElementComponent {
+  /**
+   * Sets the title of the top app bar
+   * @param {string} title - Title text
+   * @returns {TopAppBar} TopAppBar instance for chaining
+   */
+  setTitle: (title: string) => TopAppBar;
+  
+  /**
+   * Gets the current title
+   * @returns {string} Current title text
+   */
+  getTitle: () => string;
+  
+  /**
+   * Adds a leading navigation icon or element
+   * @param {HTMLElement} element - Element to add to the leading section
+   * @returns {TopAppBar} TopAppBar instance for chaining
+   */
+  addLeadingElement: (element: HTMLElement) => TopAppBar;
+  
+  /**
+   * Adds a trailing action icon or element
+   * @param {HTMLElement} element - Element to add to the trailing section
+   * @returns {TopAppBar} TopAppBar instance for chaining
+   */
+  addTrailingElement: (element: HTMLElement) => TopAppBar;
+  
+  /**
+   * Changes the top app bar type
+   * @param {TopAppBarType} type - New app bar type
+   * @returns {TopAppBar} TopAppBar instance for chaining
+   */
+  setType: (type: TopAppBarType) => TopAppBar;
+  
+  /**
+   * Manually sets the scrolled state
+   * @param {boolean} scrolled - Whether to show the scrolled state
+   * @returns {TopAppBar} TopAppBar instance for chaining
+   */
+  setScrollState: (scrolled: boolean) => TopAppBar;
+  
+  /**
+   * Gets the headline element
+   * @returns {HTMLElement} Headline element
+   */
+  getHeadlineElement: () => HTMLElement;
+  
+  /**
+   * Gets the leading container element
+   * @returns {HTMLElement} Leading container element
+   */
+  getLeadingContainer: () => HTMLElement;
+  
+  /**
+   * Gets the trailing container element
+   * @returns {HTMLElement} Trailing container element
+   */
+  getTrailingContainer: () => HTMLElement;
+}
+
+/**
+ * Creates a top app bar component
+ * 
+ * @param {TopAppBarConfig} config - Configuration options
+ * @returns {TopAppBar} Top app bar component instance
+ */
+export const createTopAppBar = (config: TopAppBarConfig = {}): TopAppBar => {
+  // Process configuration with defaults
+  const componentConfig = createConfig(config);
+  
+  // Create base component
+  const component = createBase(componentConfig);
+  
+  // Create containers for the top app bar structure
+  const createContainers = () => {
+    // Leading section container
+    const leadingContainer = document.createElement('div');
+    leadingContainer.className = `${component.getClass('top-app-bar')}-leading`;
+
+    // Headline element
+    const headlineElement = document.createElement('h1');
+    headlineElement.className = `${component.getClass('top-app-bar')}-headline`;
+    if (componentConfig.title) {
+      headlineElement.textContent = componentConfig.title;
+    }
+
+    // Trailing section container
+    const trailingContainer = document.createElement('div');
+    trailingContainer.className = `${component.getClass('top-app-bar')}-trailing`;
+    
+    return { leadingContainer, headlineElement, trailingContainer };
+  };
+  
+  // Create the main containers
+  const { leadingContainer, headlineElement, trailingContainer } = createContainers();
+  
+  // Determine initial classes based on type
+  const getInitialClasses = () => {
+    const classes = [componentConfig.class];
+    
+    // Add type class if not the default 'small' type
+    if (componentConfig.type !== 'small') {
+      classes.push(`${component.getClass('top-app-bar')}--${componentConfig.type}`);
+    }
+    
+    // Add compressible class if enabled and type is medium or large
+    if (componentConfig.compressible && 
+        (componentConfig.type === 'medium' || componentConfig.type === 'large')) {
+      classes.push(`${component.getClass('top-app-bar')}--compressible`);
+    }
+    
+    return classes.filter(Boolean);
+  };
+  
+  // Apply Element enhancer
+  const enhancedComponent = withElement({
+    tag: componentConfig.tag,
+    componentName: 'top-app-bar',
+    className: getInitialClasses(),
+    attrs: {
+      role: 'banner',
+      'aria-label': 'Top app bar'
+    },
+    interactive: true
+  })(component);
+  
+  // Apply events enhancer for component events
+  const withEventsComponent = withEvents()(enhancedComponent);
+  
+  // Apply lifecycle enhancer for cleanup
+  const withLifecycleComponent = withLifecycle()(withEventsComponent);
+  
+  // Create the DOM structure based on the type
+  const setupDomStructure = () => {
+    if (componentConfig.type === 'medium' || componentConfig.type === 'large') {
+      // For medium and large, create rows
+      const topRow = document.createElement('div');
+      topRow.className = `${component.getClass('top-app-bar')}-row`;
+      topRow.appendChild(leadingContainer);
+      topRow.appendChild(trailingContainer);
+      
+      const bottomRow = document.createElement('div');
+      bottomRow.className = `${component.getClass('top-app-bar')}-row`;
+      bottomRow.appendChild(headlineElement);
+      
+      withLifecycleComponent.element.appendChild(topRow);
+      withLifecycleComponent.element.appendChild(bottomRow);
+    } else {
+      // For small and center-aligned
+      withLifecycleComponent.element.appendChild(leadingContainer);
+      withLifecycleComponent.element.appendChild(headlineElement);
+      withLifecycleComponent.element.appendChild(trailingContainer);
+    }
+  };
+  
+  // Set up the initial DOM structure
+  setupDomStructure();
+  
+  // Track scrolled state
+  let isScrolled = false;
+  
+  // Handle scrolling behavior if enabled
+  if (componentConfig.scrollable) {
+    const handleScroll = () => {
+      const shouldBeScrolled = window.scrollY > componentConfig.scrollThreshold;
+      
+      if (isScrolled !== shouldBeScrolled) {
+        isScrolled = shouldBeScrolled;
+        
+        // Toggle scrolled class
+        if (isScrolled) {
+          withLifecycleComponent.element.classList.add(`${component.getClass('top-app-bar')}--scrolled`);
+        } else {
+          withLifecycleComponent.element.classList.remove(`${component.getClass('top-app-bar')}--scrolled`);
+        }
+        
+        // Call the onScroll callback if provided
+        componentConfig.onScroll?.(isScrolled);
+      }
+    };
+    
+    // Add scroll event listener
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    
+    // Initial check
+    handleScroll();
+    
+    // Clean up event listener on destroy
+    const originalDestroy = withLifecycleComponent.lifecycle.destroy;
+    withLifecycleComponent.lifecycle.destroy = () => {
+      window.removeEventListener('scroll', handleScroll);
+      originalDestroy();
+    };
+  }
+  
+  // Reorganize the DOM for the given type
+  const reorganizeDom = (type: TopAppBarType) => {
+    // Clear existing content
+    while (withLifecycleComponent.element.firstChild) {
+      withLifecycleComponent.element.removeChild(withLifecycleComponent.element.firstChild);
+    }
+    
+    // Update component type class
+    ['small', 'medium', 'large', 'center'].forEach(t => {
+      withLifecycleComponent.element.classList.remove(`${component.getClass('top-app-bar')}--${t}`);
+    });
+    
+    if (type !== 'small') {
+      withLifecycleComponent.element.classList.add(`${component.getClass('top-app-bar')}--${type}`);
+    }
+    
+    // Update compressible class
+    withLifecycleComponent.element.classList.toggle(
+      `${component.getClass('top-app-bar')}--compressible`,
+      componentConfig.compressible && (type === 'medium' || type === 'large')
+    );
+    
+    // Rebuild the DOM structure
+    if (type === 'medium' || type === 'large') {
+      // For medium and large, create rows
+      const topRow = document.createElement('div');
+      topRow.className = `${component.getClass('top-app-bar')}-row`;
+      topRow.appendChild(leadingContainer);
+      topRow.appendChild(trailingContainer);
+      
+      const bottomRow = document.createElement('div');
+      bottomRow.className = `${component.getClass('top-app-bar')}-row`;
+      bottomRow.appendChild(headlineElement);
+      
+      withLifecycleComponent.element.appendChild(topRow);
+      withLifecycleComponent.element.appendChild(bottomRow);
+    } else {
+      // For small and center-aligned
+      withLifecycleComponent.element.appendChild(leadingContainer);
+      withLifecycleComponent.element.appendChild(headlineElement);
+      withLifecycleComponent.element.appendChild(trailingContainer);
+    }
+  };
+  
+  // Create the top app bar interface
+  const topAppBar: TopAppBar = {
+    ...withLifecycleComponent,
+    
+    setTitle(title: string) {
+      headlineElement.textContent = title;
+      return this;
+    },
+    
+    getTitle() {
+      return headlineElement.textContent || '';
+    },
+    
+    addLeadingElement(element: HTMLElement) {
+      leadingContainer.appendChild(element);
+      return this;
+    },
+    
+    addTrailingElement(element: HTMLElement) {
+      trailingContainer.appendChild(element);
+      return this;
+    },
+    
+    setType(type: TopAppBarType) {
+      componentConfig.type = type;
+      reorganizeDom(type);
+      return this;
+    },
+    
+    setScrollState(scrolled: boolean) {
+      isScrolled = scrolled;
+      
+      if (scrolled) {
+        this.element.classList.add(`${component.getClass('top-app-bar')}--scrolled`);
+      } else {
+        this.element.classList.remove(`${component.getClass('top-app-bar')}--scrolled`);
+      }
+      
+      return this;
+    },
+    
+    getHeadlineElement() {
+      return headlineElement;
+    },
+    
+    getLeadingContainer() {
+      return leadingContainer;
+    },
+    
+    getTrailingContainer() {
+      return trailingContainer;
+    }
+  };
+  
+  return topAppBar;
+};

package/src/components/top-app-bar/types.ts

@@ -0,0 +1,140 @@
+// src/components/top-app-bar/types.ts
+/**
+ * @module components/top-app-bar
+ * @description Type definitions for Top App Bar component
+ */
+
+import { ElementComponent } from '../../core/compose';
+
+/**
+ * Top App Bar types
+ * @category Components
+ */
+export type TopAppBarType = 'small' | 'medium' | 'large' | 'center';
+
+/**
+ * Configuration options for Top App Bar component
+ * @category Components
+ */
+export interface TopAppBarConfig {
+  /**
+   * Element to use for the container
+   * @default 'header'
+   */
+  tag?: string;
+  
+  /**
+   * Type of top app bar to display
+   * @default 'small'
+   */
+  type?: TopAppBarType;
+  
+  /**
+   * Title text to display in the app bar
+   */
+  title?: string;
+  
+  /**
+   * Whether to enable scrolling behavior
+   * @default true
+   */
+  scrollable?: boolean;
+  
+  /**
+   * Whether to compress medium/large variants to small on scroll
+   * @default true
+   */
+  compressible?: boolean;
+  
+  /**
+   * Scroll threshold in pixels to trigger the scrolled state
+   * @default 4
+   */
+  scrollThreshold?: number;
+  
+  /**
+   * Additional CSS classes to apply
+   */
+  class?: string;
+
+  /**
+   * Optional callback when scrolling changes the bar appearance
+   */
+  onScroll?: (scrolled: boolean) => void;
+
+  /**
+   * Component prefix for class names
+   * @default 'mtrl'
+   */
+  prefix?: string;
+
+  /**
+   * Component name for class generation
+   */
+  componentName?: string;
+}
+
+/**
+ * Top App Bar component interface
+ * @category Components
+ */
+export interface TopAppBar extends ElementComponent {
+  /**
+   * Sets the title of the top app bar
+   * @param {string} title - Title text
+   * @returns {TopAppBar} TopAppBar instance for chaining
+   */
+  setTitle: (title: string) => TopAppBar;
+  
+  /**
+   * Gets the current title
+   * @returns {string} Current title text
+   */
+  getTitle: () => string;
+  
+  /**
+   * Adds a leading navigation icon or element
+   * @param {HTMLElement} element - Element to add to the leading section
+   * @returns {TopAppBar} TopAppBar instance for chaining
+   */
+  addLeadingElement: (element: HTMLElement) => TopAppBar;
+  
+  /**
+   * Adds a trailing action icon or element
+   * @param {HTMLElement} element - Element to add to the trailing section
+   * @returns {TopAppBar} TopAppBar instance for chaining
+   */
+  addTrailingElement: (element: HTMLElement) => TopAppBar;
+  
+  /**
+   * Changes the top app bar type
+   * @param {TopAppBarType} type - New app bar type
+   * @returns {TopAppBar} TopAppBar instance for chaining
+   */
+  setType: (type: TopAppBarType) => TopAppBar;
+  
+  /**
+   * Manually sets the scrolled state
+   * @param {boolean} scrolled - Whether to show the scrolled state
+   * @returns {TopAppBar} TopAppBar instance for chaining
+   */
+  setScrollState: (scrolled: boolean) => TopAppBar;
+  
+  /**
+   * Gets the headline element
+   * @returns {HTMLElement} Headline element
+   */
+  getHeadlineElement: () => HTMLElement;
+  
+  /**
+   * Gets the leading container element
+   * @returns {HTMLElement} Leading container element
+   */
+  getLeadingContainer: () => HTMLElement;
+  
+  /**
+   * Gets the trailing container element
+   * @returns {HTMLElement} Trailing container element
+   */
+  getTrailingContainer: () => HTMLElement;
+}

package/src/core/build/_ripple.scss

@@ -19,20 +19,20 @@ $component: '#{base.$prefix}-ripple';
   pointer-events: none;
   z-index: 0;
   
-  // Ripple element
   &-wave {
     position: absolute;
     border-radius: 50%;
+    
+    // Make the ripple more visible with these changes:
     background-color: currentColor;
-    transform: scale(0);
-    opacity: 0;
+    opacity: 0;  // Start with 0 opacity
+    transform: scale(0);  // Start slightly larger for better visibility
     pointer-events: none;
     will-change: transform, opacity;
     
     // Animation
-    transition-property: transform, opacity;
-    transition-duration: v.motion('duration-short4');
-    transition-timing-function: v.motion('easing-standard');
+    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
+                opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     
     // Active ripple
     &.active {