mtrl 0.2.7 → 0.2.9

package/src/core/structure.ts

@@ -0,0 +1,288 @@
+// src/core/structure.ts
+import { createElement } from './dom/create';
+
+/**
+ * Type definitions for structure creation
+ */
+export interface ComponentLike {
+  element: HTMLElement;
+  destroy?: () => void;
+  [key: string]: any;
+}
+
+export interface ElementDefinition {
+  name?: string;
+  creator?: Function;
+  options?: Record<string, any>;
+  children?: Record<string, ElementDefinition>;
+}
+
+export interface StructureDefinition {
+  element?: ElementDefinition;
+  [key: string]: ElementDefinition | any;
+}
+
+/**
+ * Structure result interface with separated structure and utility functions
+ */
+export interface StructureResult {
+  // The raw structure object with all components
+  structure: Record<string, any>;
+  
+  // Reference to the root element for convenience 
+  element: HTMLElement | ComponentLike;
+  
+  // Utility functions
+  get: (name: string) => any;
+  getAll: () => Record<string, any>;
+  destroy: () => void;
+}
+
+/**
+ * Checks if a value is a component object (has an element property)
+ * Uses a faster property check before the instanceof check
+ * @param value Value to check
+ * @returns True if the value is a component-like object
+ */
+function isComponentLike(value: any): value is ComponentLike {
+  return value && 
+         typeof value === 'object' && 
+         'element' in value && 
+         value.element instanceof HTMLElement;
+}
+
+/**
+ * Creates a document fragment for faster DOM operations when appending multiple children
+ * @returns DocumentFragment
+ */
+function createFragment(): DocumentFragment {
+  return document.createDocumentFragment();
+}
+
+/**
+ * Creates a DOM or component structure based on a structure definition
+ * @param definition Structure definition object
+ * @param parentElement Optional parent element to attach structure to
+ * @returns Object containing the structure and utility functions
+ */
+export function createStructure(
+  definition: StructureDefinition, 
+  parentElement: HTMLElement | null = null
+): StructureResult {
+  // Use object literal instead of empty object for faster property access
+  const structure: Record<string, any> = Object.create(null);
+  
+  // Special case for root component creation
+  if (definition.element && !parentElement) {
+    const elementDef = definition.element;
+    const createElementFn = elementDef.creator || createElement;
+    const rootComponent = createElementFn(elementDef.options);
+    const rootElement = isComponentLike(rootComponent) ? rootComponent.element : rootComponent;
+    
+    structure.element = rootComponent;
+    
+    if (elementDef.name) {
+      structure[elementDef.name] = rootComponent;
+    }
+    
+    if (elementDef.children) {
+      // Use fragment for better performance when appending multiple children
+      const fragment = createFragment();
+      let childKeys = Object.keys(elementDef.children);
+      
+      // Process all children first and collect their structures
+      const childStructures = new Array(childKeys.length);
+      
+      for (let i = 0; i < childKeys.length; i++) {
+        const key = childKeys[i];
+        const childDef = elementDef.children[key];
+        
+        // Create child structure and attach to fragment temporarily
+        const childResult = createStructure({ [key]: childDef }, fragment);
+        childStructures[i] = childResult.structure;
+      }
+      
+      // Append fragment to root element (single DOM operation)
+      rootElement.appendChild(fragment);
+      
+      // Now merge all child structures into the main structure
+      for (let i = 0; i < childStructures.length; i++) {
+        Object.assign(structure, childStructures[i]);
+      }
+    }
+    
+    // Create and return the result object with utility functions
+    return createStructureResult(structure);
+  }
+  
+  // Use fragment if we have multiple elements to append to the parent
+  const fragment = parentElement ? createFragment() : null;
+  const keys = Object.keys(definition);
+  const keyLength = keys.length;
+  
+  // Pre-allocate arrays for better performance
+  const elements = new Array(keyLength);
+  const childStructuresToMerge = [];
+  
+  // First pass: create all elements
+  for (let i = 0; i < keyLength; i++) {
+    const key = keys[i];
+    const def = definition[key];
+    
+    // Skip if no definition
+    if (!def) {
+      elements[i] = null;
+      continue;
+    }
+    
+    // Create the element
+    const createElementFn = def.creator || createElement;
+    const created = createElementFn(def.options);
+    elements[i] = created;
+    
+    // Add to structure
+    structure[key] = created;
+    
+    // Add element to structure with its name if different from key
+    if (def.name && def.name !== key) {
+      structure[def.name] = created;
+    }
+  }
+  
+  // Second pass: handle children and append to parent
+  for (let i = 0; i < keyLength; i++) {
+    const key = keys[i];
+    const def = definition[key];
+    const created = elements[i];
+    
+    if (!created || !def) continue;
+    
+    // Get the actual DOM element
+    const element = isComponentLike(created) ? created.element : created;
+    
+    // Append to fragment
+    if (fragment) {
+      fragment.appendChild(element);
+    }
+    
+    // Process children recursively
+    if (def.children) {
+      const childResult = createStructure(def.children, element);
+      childStructuresToMerge.push(childResult.structure);
+    }
+  }
+  
+  // Append fragment to parent (single DOM operation)
+  if (parentElement && fragment) {
+    parentElement.appendChild(fragment);
+  }
+  
+  // Merge all child structures at once
+  for (let i = 0; i < childStructuresToMerge.length; i++) {
+    Object.assign(structure, childStructuresToMerge[i]);
+  }
+  
+  // Create and return the result object with utility functions
+  return createStructureResult(structure);
+}
+
+/**
+ * Creates a result object with the structure and utility functions
+ * @param structure The raw structure object
+ * @returns Result object with structure and utility functions
+ */
+function createStructureResult(structure: Record<string, any>): StructureResult {
+  return {
+    // Raw structure object
+    structure,
+    
+    // Root element reference for convenience
+    element: structure.element,
+    
+    /**
+     * Gets a component by name
+     * @param name Component name
+     * @returns Component if found, null otherwise
+     */
+    get: (name: string): any => {
+      return structure[name] || null;
+    },
+    
+    /**
+     * Gets all components in a flattened map
+     * @returns Object with all components
+     */
+    getAll: (): Record<string, any> => {
+      return flattenStructure(structure);
+    },
+    
+    /**
+     * Destroys the structure, cleaning up all components
+     */
+    destroy: (): void => {
+      // Clean up the root element if it exists
+      if (structure.element) {
+        // If element is a component with a destroy method, call it
+        if (isComponentLike(structure.element) && typeof structure.element.destroy === 'function') {
+          structure.element.destroy();
+        } 
+        // Otherwise, if it's a DOM element or component, remove it from the DOM
+        else if (isComponentLike(structure.element) && structure.element.element.parentNode) {
+          structure.element.element.parentNode.removeChild(structure.element.element);
+        }
+        else if (structure.element instanceof HTMLElement && structure.element.parentNode) {
+          structure.element.parentNode.removeChild(structure.element);
+        }
+      }
+      
+      // Clean up all other components in the structure
+      Object.keys(structure).forEach(key => {
+        if (key === 'element') {
+          return; // Already handled element
+        }
+        
+        const item = structure[key];
+        
+        // Handle component objects
+        if (isComponentLike(item) && typeof item.destroy === 'function') {
+          item.destroy();
+        }
+        // Handle DOM elements
+        else if (item instanceof HTMLElement && item.parentNode) {
+          item.parentNode.removeChild(item);
+        }
+      });
+    }
+  };
+}
+
+/**
+ * Flattens a nested structure into a simple object with element and component references
+ * Optimized version that avoids unnecessary type checks where possible
+ * @param structure Structure object
+ * @returns Flattened structure with all elements and components
+ */
+export function flattenStructure(structure: Record<string, any>): Record<string, any> {
+  const flattened: Record<string, any> = Object.create(null);
+  const keys = Object.keys(structure);
+  
+  for (let i = 0; i < keys.length; i++) {
+    const key = keys[i];
+    const value = structure[key];
+    
+    // Fast path for common cases
+    if (value instanceof HTMLElement || 
+        (value && typeof value === 'object' && 'element' in value)) {
+      flattened[key] = value;
+      continue;
+    }
+    
+    // Skip functions and other non-element/component objects
+    if (typeof value !== 'function' && 
+        (value instanceof Element || isComponentLike(value))) {
+      flattened[key] = value;
+    }
+  }
+  
+  return flattened;
+}

package/src/index.ts

@@ -16,6 +16,7 @@ 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'

package/src/styles/components/_navigation-mobile.scss

@@ -0,0 +1,244 @@
+// src/components/navigation/_mobile.scss
+@use '../../styles/abstract/variables' as v;
+@use '../../styles/abstract/mixins' as m;
+@use '../../styles/abstract/base' as base;
+@use '../../styles/abstract/theme' as t;
+
+$prefix: base.$prefix;
+
+// Mobile navigation overlay
+.#{$prefix}-nav-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: t.alpha('shadow', 0.5);
+  z-index: v.z-index('modal') - 1; // Just below modal level but above most content
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.3s v.motion('easing-standard'), visibility 0.3s v.motion('easing-standard');
+  
+  // Add backdrop blur for a modern effect where supported
+  @supports (backdrop-filter: blur(4px)) {
+    backdrop-filter: blur(4px);
+    background-color: t.alpha('shadow', 0.4);
+  }
+  
+  &.active {
+    opacity: 1;
+    visibility: visible;
+  }
+}
+
+// Close button for mobile drawer
+.#{$prefix}-nav-close-btn {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  display: none; // Hidden by default, shown on mobile
+  align-items: center;
+  justify-content: center;
+  color: t.color('on-surface');
+  z-index: 1;
+  -webkit-tap-highlight-color: transparent; // Removes default mobile tap highlight
+  
+  &:hover {
+    background-color: t.alpha('on-surface', 0.05);
+  }
+  
+  // Touch feedback state
+  &.active {
+    background-color: t.alpha('on-surface', 0.12);
+  }
+  
+  &:focus-visible {
+    outline: 2px solid t.color('primary');
+    outline-offset: 2px;
+  }
+  
+  svg {
+    width: 24px;
+    height: 24px;
+    stroke: currentColor;
+  }
+  
+  // Ensure WCAG-compliant touch target size
+  @media (pointer: coarse) {
+    min-width: 48px;
+    min-height: 48px;
+  }
+}
+
+// Body class to prevent scrolling when drawer is open
+.#{$prefix}-body-drawer-open {
+  overflow: hidden;
+  
+  // On iOS we need to handle the body position differently
+  @supports (-webkit-overflow-scrolling: touch) {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+// Responsive behavior for navigation system - apply to small screens or touch devices
+@media (max-width: 960px), (pointer: coarse) {
+  // Rail navigation
+  .#{$prefix}-nav--rail {
+    width: 56px;
+    z-index: v.z-index('modal') - 1;
+    border-right: 1px solid t.color('outline-variant');
+    
+    // Hide labels on mobile
+    .#{$prefix}-nav-label {
+      display: none;
+    }
+    
+    // Center align items
+    .#{$prefix}-nav-item {
+      justify-content: center;
+      height: 56px;
+      -webkit-tap-highlight-color: transparent; // Remove default mobile highlight
+      
+      // Increase touch targets for better accessibility
+      @media (pointer: coarse) {
+        min-height: 48px;
+        padding: 12px 8px;
+      }
+      
+      // Touch-friendly active state
+      &:active {
+        background-color: t.alpha('on-surface', 0.12);
+      }
+    }
+    
+    // Larger icons on mobile
+    .#{$prefix}-nav-icon {
+      font-size: 1.25rem;
+      
+      // Ensure icon touch target meets WCAG requirements
+      @media (pointer: coarse) {
+        min-width: 44px;
+        min-height: 44px;
+      }
+    }
+  }
+  
+  // Drawer navigation
+  .#{$prefix}-nav--drawer {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 280px;
+    max-width: 85vw;
+    z-index: v.z-index('modal');
+    background-color: t.color('surface');
+    box-shadow: v.elevation('level-3');
+    transform: translateX(-100%);
+    transition: transform 0.3s v.motion('easing-standard');
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch; // Smooth scrolling on iOS
+    
+    &:not(.#{$prefix}-nav--hidden) {
+      transform: translateX(0);
+    }
+    
+    // Optimize drawer items for touch
+    .#{$prefix}-nav-item {
+      -webkit-tap-highlight-color: transparent;
+      
+      @media (pointer: coarse) {
+        min-height: 48px;
+        padding: 12px 16px;
+      }
+      
+      // Touch feedback
+      &:active {
+        background-color: t.alpha('on-surface', 0.12);
+      }
+    }
+    
+    // Support RTL languages
+    @include m.rtl {
+      left: auto;
+      right: 0;
+      transform: translateX(100%);
+      
+      &:not(.#{$prefix}-nav--hidden) {
+        transform: translateX(0);
+      }
+    }
+  }
+}
+
+// Desktop behavior
+@media (min-width: 961px) {
+  .#{$prefix}-nav--drawer {
+    // For desktop, transition by width instead of transform
+    transition: width 0.3s v.motion('easing-standard'), opacity 0.3s v.motion('easing-standard');
+  }
+  
+  .#{$prefix}-nav-close-btn {
+    display: none !important; // Always hidden on desktop
+  }
+  
+  // Hide overlay on desktop
+  .#{$prefix}-nav-overlay.active {
+    opacity: 0;
+    visibility: hidden;
+  }
+}
+
+// Safe area insets for notched devices like iPhone X and newer
+@supports (padding-bottom: env(safe-area-inset-bottom)) {
+  .#{$prefix}-nav--drawer {
+    padding-top: env(safe-area-inset-top);
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+  
+  .#{$prefix}-nav--rail {
+    padding-top: env(safe-area-inset-top);
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+  
+  .#{$prefix}-nav--bar {
+    // For bottom navigation bars
+    &.#{$prefix}-nav--bottom {
+      padding-bottom: env(safe-area-inset-bottom);
+    }
+  }
+}
+
+// Gesture hints for touch interfaces
+@media (pointer: coarse) {
+  // Add visual affordance for swipe gesture
+  .#{$prefix}-nav--drawer:not(.#{$prefix}-nav--hidden) {
+    &::after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      right: 0;
+      width: 4px;
+      height: 40px;
+      border-radius: 4px 0 0 4px;
+      background-color: t.alpha('on-surface', 0.1);
+      transform: translateY(-50%);
+      opacity: 0.5;
+      // Hide after interaction to avoid cognitive load
+      animation: fadeOutAfterDelay 4s forwards;
+    }
+  }
+  
+  @keyframes fadeOutAfterDelay {
+    0%, 50% { opacity: 0.5; }
+    100% { opacity: 0; }
+  }
+}

package/src/styles/components/_navigation-system.scss

@@ -0,0 +1,151 @@
+// src/components/navigation/system.scss
+
+// Navigation system specific styles
+// These complement the existing navigation component styles
+
+$nav-animation-duration: 0.2s;
+$nav-animation-function: cubic-bezier(0.4, 0, 0.2, 1);
+
+// Drawer animation states
+.mtrl-nav--drawer {
+  transition: transform $nav-animation-duration $nav-animation-function,
+              opacity $nav-animation-duration $nav-animation-function;
+  
+  // Hidden state (transform off-screen)
+  &.mtrl-nav--hidden {
+    transform: translateX(-100%);
+    opacity: 0;
+    pointer-events: none;
+  }
+  
+  // Right positioned drawer
+  &.mtrl-nav--right {
+    &.mtrl-nav--hidden {
+      transform: translateX(100%);
+    }
+  }
+  
+  // Animation classes
+  &.mtrl-nav--animate-in {
+    animation: nav-drawer-in $nav-animation-duration $nav-animation-function;
+  }
+  
+  &.mtrl-nav--animate-out {
+    animation: nav-drawer-out $nav-animation-duration $nav-animation-function;
+  }
+}
+
+// Navigation system container (optional - for wrapping rail + drawer)
+.mtrl-nav-system {
+  display: flex;
+  position: relative;
+  
+  // Rail is fixed width
+  .mtrl-nav--rail {
+    flex: 0 0 auto;
+  }
+  
+  // Drawer expands
+  .mtrl-nav--drawer {
+    flex: 1 0 auto;
+  }
+}
+
+// Drawer entry animation
+@keyframes nav-drawer-in {
+  0% {
+    transform: translateX(-20px);
+    opacity: 0;
+  }
+  100% {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+// Drawer exit animation
+@keyframes nav-drawer-out {
+  0% {
+    transform: translateX(0);
+    opacity: 1;
+  }
+  100% {
+    transform: translateX(-20px);
+    opacity: 0;
+  }
+}
+
+// Right-side drawer animations
+.mtrl-nav--drawer.mtrl-nav--right {
+  &.mtrl-nav--animate-in {
+    animation: nav-drawer-right-in $nav-animation-duration $nav-animation-function;
+  }
+  
+  &.mtrl-nav--animate-out {
+    animation: nav-drawer-right-out $nav-animation-duration $nav-animation-function;
+  }
+}
+
+@keyframes nav-drawer-right-in {
+  0% {
+    transform: translateX(20px);
+    opacity: 0;
+  }
+  100% {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes nav-drawer-right-out {
+  0% {
+    transform: translateX(0);
+    opacity: 1;
+  }
+  100% {
+    transform: translateX(20px);
+    opacity: 0;
+  }
+}
+
+// Mobile optimizations
+@media (max-width: 960px) {
+  .mtrl-nav-system {
+    flex-direction: column;
+    
+    .mtrl-nav--rail {
+      // Mobile rail can be top or bottom
+      &.mtrl-nav--top, &.mtrl-nav--bottom {
+        width: 100%;
+      }
+    }
+    
+    .mtrl-nav--drawer {
+      // Mobile drawer takes full width
+      width: 100%;
+      max-width: 100%;
+      
+      &.mtrl-nav--hidden {
+        transform: translateY(-100%);
+      }
+      
+      &.mtrl-nav--bottom {
+        &.mtrl-nav--hidden {
+          transform: translateY(100%);
+        }
+      }
+    }
+  }
+}
+
+// Focus and accessibility enhancements
+.mtrl-nav-system {
+  [role="navigation"] {
+    &:focus-within {
+      outline: 2px solid var(--mtrl-primary-color, #6200ee);
+      outline-offset: -2px;
+    }
+  }
+}
+
+@use 'navigation-mobile'

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;