snice 2.1.4 → 2.2.0

package/components/drawer/snice-drawer.ts

@@ -1,287 +0,0 @@
-import { element, property, query, on, watch, dispatch, ready, dispose } from 'snice';
-import css from './snice-drawer.css?inline';
-import type { DrawerPosition, DrawerSize, SniceDrawerElement } from './snice-drawer.types';
-
-@element('snice-drawer')
-export class SniceDrawer extends HTMLElement implements SniceDrawerElement {
-  @property({ type: Boolean, reflect: true })
-  open = false;
-
-  @property({ reflect: true })
-  position: DrawerPosition = 'left';
-
-  @property({ reflect: true })
-  size: DrawerSize = 'medium';
-
-  @property({ type: Boolean, attribute: 'no-backdrop', reflect: true })
-  noBackdrop = false;
-
-  @property({ type: Boolean, attribute: 'no-backdrop-dismiss', reflect: true })
-  noBackdropDismiss = false;
-
-  @property({ type: Boolean, attribute: 'no-escape-dismiss', reflect: true })
-  noEscapeDismiss = false;
-
-  @property({ type: Boolean, attribute: 'no-focus-trap', reflect: true })
-  noFocusTrap = false;
-
-  @property({ type: Boolean, reflect: true })
-  persistent = false;
-
-  @property({ type: Boolean, attribute: 'push-content', reflect: true })
-  pushContent = false;
-
-  @query('.drawer')
-  drawerElement?: HTMLElement;
-
-  @query('.drawer-backdrop')
-  backdropElement?: HTMLElement;
-
-  @query('.drawer-close')
-  closeButton?: HTMLButtonElement;
-
-  @query('.focus-trap-start')
-  focusTrapStart?: HTMLElement;
-
-  @query('.focus-trap-end')
-  focusTrapEnd?: HTMLElement;
-
-  private previousFocus?: HTMLElement;
-  private boundHandleEscape?: (e: KeyboardEvent) => void;
-
-  html() {
-    return /*html*/`
-      <div class="drawer-backdrop" part="backdrop"></div>
-      
-      <div class="drawer" role="dialog" aria-modal="true" tabindex="-1" part="base">
-        <span class="focus-trap-start" tabindex="0"></span>
-        
-        <div class="drawer-header" part="header">
-          <h2 class="drawer-title" part="title">
-            <slot name="title"></slot>
-          </h2>
-          ${!this.persistent ? /*html*/`
-            <button class="drawer-close" type="button" aria-label="Close" part="close">
-              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <path d="M18 6L6 18M6 6l12 12"/>
-              </svg>
-            </button>
-          ` : ''}
-        </div>
-        
-        <div class="drawer-body" part="body">
-          <slot></slot>
-        </div>
-        
-        <div class="drawer-footer" part="footer">
-          <slot name="footer"></slot>
-        </div>
-        
-        <span class="focus-trap-end" tabindex="0"></span>
-      </div>
-    `;
-  }
-
-  css() {
-    return css;
-  }
-
-  @ready()
-  init() {
-    // Ensure default attributes are set
-    if (!this.hasAttribute('position')) {
-      this.setAttribute('position', this.position);
-    }
-    if (!this.hasAttribute('size')) {
-      this.setAttribute('size', this.size);
-    }
-    
-    this.setAttribute('role', 'complementary');
-    this.setAttribute('aria-hidden', String(!this.open));
-    
-    // Pre-set transition for push content mode to avoid jump on first use
-    if (this.pushContent) {
-      const mainContent = document.querySelector('main') || document.body;
-      if (mainContent && mainContent !== document.body) {
-        (mainContent as HTMLElement).style.transition = 'margin 0.3s cubic-bezier(0.4, 0, 0.2, 1)';
-      }
-    }
-    
-    if (this.open) {
-      this.handleOpen();
-    }
-  }
-
-  @watch('open')
-  handleOpenChange() {
-    this.setAttribute('aria-hidden', String(!this.open));
-    
-    if (this.open) {
-      this.handleOpen();
-    } else {
-      this.handleClose();
-    }
-  }
-
-  @on('click', '.drawer-backdrop')
-  handleBackdropClick(e: MouseEvent) {
-    if (!this.noBackdropDismiss && !this.persistent) {
-      e.stopPropagation();
-      this.hide();
-    }
-  }
-
-  @on('click', '.drawer-close')
-  handleCloseClick(e: MouseEvent) {
-    e.stopPropagation();
-    this.hide();
-  }
-
-  @on('focus', '.focus-trap-start')
-  handleFocusTrapStart() {
-    if (!this.noFocusTrap) {
-      // Focus the last focusable element in the drawer
-      const focusableElements = this.getFocusableElements();
-      if (focusableElements.length > 0) {
-        (focusableElements[focusableElements.length - 1] as HTMLElement).focus();
-      }
-    }
-  }
-
-  @on('focus', '.focus-trap-end')
-  handleFocusTrapEnd() {
-    if (!this.noFocusTrap) {
-      // Focus the first focusable element in the drawer
-      const focusableElements = this.getFocusableElements();
-      if (focusableElements.length > 0) {
-        (focusableElements[0] as HTMLElement).focus();
-      }
-    }
-  }
-
-  private handleOpen() {
-    // Store current focus
-    this.previousFocus = document.activeElement as HTMLElement;
-    
-    // Add escape key handler
-    if (!this.noEscapeDismiss && !this.persistent) {
-      this.boundHandleEscape = (e: KeyboardEvent) => {
-        if (e.key === 'Escape') {
-          e.preventDefault();
-          this.hide();
-        }
-      };
-      document.addEventListener('keydown', this.boundHandleEscape);
-    }
-    
-    // Prevent body scroll
-    document.body.style.overflow = 'hidden';
-    
-    // Focus management
-    if (!this.noFocusTrap) {
-      requestAnimationFrame(() => {
-        if (this.drawerElement) {
-          this.drawerElement.focus();
-        }
-      });
-    }
-    
-    // Push content if enabled
-    if (this.pushContent) {
-      this.updatePushContent();
-    }
-    
-    this.dispatchOpenEvent();
-  }
-
-  private handleClose() {
-    // Remove escape key handler
-    if (this.boundHandleEscape) {
-      document.removeEventListener('keydown', this.boundHandleEscape);
-      this.boundHandleEscape = undefined;
-    }
-    
-    // Restore body scroll
-    document.body.style.overflow = '';
-    
-    // Restore focus
-    if (this.previousFocus && this.previousFocus.focus) {
-      this.previousFocus.focus();
-      this.previousFocus = undefined;
-    }
-    
-    // Reset push content
-    if (this.pushContent) {
-      this.updatePushContent();
-    }
-    
-    this.dispatchCloseEvent();
-  }
-
-  private updatePushContent() {
-    if (!this.pushContent) return;
-    
-    // Apply to body or main content container
-    const mainContent = document.querySelector('main') || document.body;
-    if (mainContent && mainContent !== document.body) {
-      // Set transition first if not already set
-      if (!mainContent.style.transition) {
-        (mainContent as HTMLElement).style.transition = 'margin 0.3s cubic-bezier(0.4, 0, 0.2, 1)';
-      }
-      
-      if (this.open) {
-        // Use CSS custom property that's calculated in CSS based on size/position
-        const amount = getComputedStyle(this).getPropertyValue('--drawer-push-amount');
-        const property = this.position === 'left' || this.position === 'right' 
-          ? 'marginLeft' 
-          : 'marginTop';
-        (mainContent as HTMLElement).style[property] = amount || '0px';
-      } else {
-        // Reset margins
-        (mainContent as HTMLElement).style.marginLeft = '';
-        (mainContent as HTMLElement).style.marginTop = '';
-      }
-    }
-  }
-
-  private getFocusableElements(): NodeListOf<Element> {
-    if (!this.drawerElement) return document.querySelectorAll('none');
-    
-    return this.drawerElement.querySelectorAll(
-      'a[href], button:not([disabled]), textarea:not([disabled]), ' +
-      'input:not([disabled]), select:not([disabled]), ' +
-      '[tabindex]:not([tabindex="-1"])'
-    );
-  }
-
-  @dispatch('drawer-open', { bubbles: true, composed: true })
-  private dispatchOpenEvent() {
-    return { drawer: this };
-  }
-
-  @dispatch('drawer-close', { bubbles: true, composed: true })
-  private dispatchCloseEvent() {
-    return { drawer: this };
-  }
-
-  @dispose()
-  cleanup() {
-    if (this.boundHandleEscape) {
-      document.removeEventListener('keydown', this.boundHandleEscape);
-    }
-    document.body.style.overflow = '';
-  }
-
-  // Public API
-  show() {
-    this.open = true;
-  }
-
-  hide() {
-    this.open = false;
-  }
-
-  toggle() {
-    this.open = !this.open;
-  }
-}

package/components/drawer/snice-drawer.types.ts

@@ -1,17 +0,0 @@
-export type DrawerPosition = 'left' | 'right' | 'top' | 'bottom';
-export type DrawerSize = 'small' | 'medium' | 'large' | 'xl' | 'xxl' | 'xxxl' | 'full';
-
-export interface SniceDrawerElement extends HTMLElement {
-  open: boolean;
-  position: DrawerPosition;
-  size: DrawerSize;
-  noBackdrop: boolean;
-  noBackdropDismiss: boolean;
-  noEscapeDismiss: boolean;
-  noFocusTrap: boolean;
-  persistent: boolean;
-  pushContent: boolean;
-  show(): void;
-  hide(): void;
-  toggle(): void;
-}

package/components/global.d.ts

@@ -1,14 +0,0 @@
-declare module '*.css' {
-  const content: string;
-  export default content;
-}
-
-declare module '*.css?inline' {
-  const content: string;
-  export default content;
-}
-
-declare module '*.html' {
-  const content: string;
-  export default content;
-}

package/components/input/demo.html

@@ -1,303 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Input Demo</title>
-  <link rel="stylesheet" href="../theme/theme.css">
-  <style>
-    body {
-      padding: 40px;
-      font-family: var(--snice-font-family);
-      background: var(--snice-color-background);
-      color: var(--snice-color-text);
-      max-width: 800px;
-      margin: 0 auto;
-    }
-    
-    .section {
-      margin-bottom: 40px;
-    }
-    
-    h2 {
-      color: var(--snice-color-text);
-      margin-bottom: 20px;
-      font-size: var(--snice-font-size-2xl);
-    }
-    
-    h3 {
-      color: var(--snice-color-text-secondary);
-      margin-bottom: 16px;
-      font-size: var(--snice-font-size-lg);
-    }
-    
-    .input-group {
-      display: flex;
-      flex-direction: column;
-      gap: 20px;
-      margin-bottom: 20px;
-    }
-    
-    .row {
-      display: flex;
-      gap: 20px;
-      align-items: flex-start;
-    }
-    
-    .row > * {
-      flex: 1;
-    }
-    
-    .output {
-      padding: 10px;
-      background: var(--snice-color-background-secondary);
-      border-radius: var(--snice-border-radius-md);
-      font-family: monospace;
-      font-size: var(--snice-font-size-sm);
-      margin-top: 10px;
-    }
-  </style>
-</head>
-<body>
-  <h2>Input Component Demo</h2>
-  
-  <div class="section">
-    <h3>Basic Inputs</h3>
-    <div class="input-group">
-      <snice-input placeholder="Enter text..." label="Default Input"></snice-input>
-      <snice-input value="Pre-filled value" label="With Value"></snice-input>
-      <snice-input placeholder="Required field" label="Required Input" required></snice-input>
-      <snice-input placeholder="Disabled input" label="Disabled" disabled value="Can't edit this"></snice-input>
-      <snice-input placeholder="Read-only input" label="Read Only" readonly value="Read only value"></snice-input>
-    </div>
-  </div>
-
-  <div class="section">
-    <h3>Input Types</h3>
-    <div class="input-group">
-      <snice-input type="email" placeholder="email@example.com" label="Email" helper-text="Enter a valid email address"></snice-input>
-      <snice-input type="password" placeholder="Enter password" label="Password" password helper-text="Click the eye icon to toggle visibility"></snice-input>
-      <snice-input type="number" placeholder="0" label="Number" min="0" max="100" step="5" helper-text="Min: 0, Max: 100, Step: 5"></snice-input>
-      <snice-input type="tel" placeholder="+1 (555) 000-0000" label="Phone"></snice-input>
-      <snice-input type="url" placeholder="https://example.com" label="URL"></snice-input>
-      <snice-input type="search" placeholder="Search..." label="Search" clearable></snice-input>
-      <snice-input type="date" label="Date"></snice-input>
-      <snice-input type="time" label="Time"></snice-input>
-    </div>
-  </div>
-
-  <div class="section">
-    <h3>Sizes</h3>
-    <div class="input-group">
-      <snice-input size="small" placeholder="Small input" label="Small"></snice-input>
-      <snice-input size="medium" placeholder="Medium input" label="Medium (Default)"></snice-input>
-      <snice-input size="large" placeholder="Large input" label="Large"></snice-input>
-    </div>
-  </div>
-
-  <div class="section">
-    <h3>Variants</h3>
-    <div class="input-group">
-      <snice-input variant="outlined" placeholder="Outlined variant" label="Outlined (Default)"></snice-input>
-      <snice-input variant="filled" placeholder="Filled variant" label="Filled"></snice-input>
-      <snice-input variant="underlined" placeholder="Underlined variant" label="Underlined"></snice-input>
-    </div>
-  </div>
-
-  <div class="section">
-    <h3>With Icons</h3>
-    <div class="input-group">
-      <snice-input 
-        placeholder="Search..." 
-        label="With Prefix Icon"
-        prefix-icon="🔍">
-      </snice-input>
-      <snice-input 
-        placeholder="Enter amount" 
-        label="With Suffix Icon"
-        suffix-icon="💵">
-      </snice-input>
-      <snice-input 
-        placeholder="Email address" 
-        label="With Both Icons"
-        prefix-icon="📧"
-        suffix-icon="✓">
-      </snice-input>
-    </div>
-  </div>
-
-  <div class="section">
-    <h3>Clearable Inputs</h3>
-    <div class="input-group">
-      <snice-input 
-        clearable 
-        value="Clear me!" 
-        label="Clearable Input"
-        helper-text="Hover to see clear button">
-      </snice-input>
-      <snice-input 
-        clearable 
-        value="With suffix icon" 
-        label="Clearable with Icon"
-        suffix-icon="📝">
-      </snice-input>
-    </div>
-  </div>
-
-  <div class="section">
-    <h3>Validation States</h3>
-    <div class="input-group">
-      <snice-input 
-        placeholder="Enter email" 
-        label="Valid State"
-        helper-text="This looks good!">
-      </snice-input>
-      <snice-input 
-        invalid
-        value="invalid@" 
-        label="Invalid State"
-        error-text="Please enter a valid email address">
-      </snice-input>
-      <snice-input 
-        type="email"
-        required
-        placeholder="email@example.com" 
-        label="With Pattern Validation"
-        pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
-        helper-text="Must be a valid email format">
-      </snice-input>
-    </div>
-  </div>
-
-  <div class="section">
-    <h3>Text Length Constraints</h3>
-    <div class="input-group">
-      <snice-input 
-        maxlength="10" 
-        placeholder="Max 10 chars" 
-        label="Max Length"
-        helper-text="Maximum 10 characters allowed">
-      </snice-input>
-      <snice-input 
-        minlength="5" 
-        placeholder="Min 5 chars" 
-        label="Min Length"
-        helper-text="Minimum 5 characters required">
-      </snice-input>
-    </div>
-  </div>
-
-  <div class="section">
-    <h3>Interactive Example</h3>
-    <div class="input-group">
-      <snice-input 
-        id="interactive-input"
-        clearable
-        placeholder="Type something..." 
-        label="Interactive Input"
-        helper-text="Events will be logged below">
-      </snice-input>
-      <div id="output" class="output">
-        <div>Waiting for input...</div>
-      </div>
-    </div>
-  </div>
-
-  <div class="section">
-    <h3>Form Example</h3>
-    <form id="demo-form">
-      <div class="input-group">
-        <div class="row">
-          <snice-input 
-            name="firstName"
-            required
-            placeholder="John" 
-            label="First Name">
-          </snice-input>
-          <snice-input 
-            name="lastName"
-            required
-            placeholder="Doe" 
-            label="Last Name">
-          </snice-input>
-        </div>
-        <snice-input 
-          type="email"
-          name="email"
-          required
-          placeholder="john.doe@example.com" 
-          label="Email Address">
-        </snice-input>
-        <snice-input 
-          type="password"
-          name="password"
-          required
-          password
-          minlength="8"
-          placeholder="Min 8 characters" 
-          label="Password">
-        </snice-input>
-        <snice-input 
-          type="tel"
-          name="phone"
-          placeholder="+1 (555) 000-0000" 
-          label="Phone (Optional)">
-        </snice-input>
-        <button type="submit" style="
-          padding: 10px 20px;
-          background: var(--snice-color-primary);
-          color: white;
-          border: none;
-          border-radius: var(--snice-border-radius-md);
-          cursor: pointer;
-          font-size: var(--snice-font-size-md);
-        ">Submit Form</button>
-      </div>
-    </form>
-  </div>
-
-  <script type="module">
-    import './snice-input.ts';
-    
-    // Interactive example
-    const input = document.getElementById('interactive-input');
-    const output = document.getElementById('output');
-    
-    let eventLog = [];
-    
-    function logEvent(type, detail) {
-      eventLog.unshift(`${type}: ${JSON.stringify(detail)}`);
-      eventLog = eventLog.slice(0, 5);
-      output.innerHTML = eventLog.map(log => `<div>${log}</div>`).join('');
-    }
-    
-    input.addEventListener('@snice/input-input', (e) => {
-      logEvent('input', { value: e.detail.value });
-    });
-    
-    input.addEventListener('@snice/input-change', (e) => {
-      logEvent('change', { value: e.detail.value });
-    });
-    
-    input.addEventListener('@snice/input-focus', () => {
-      logEvent('focus', {});
-    });
-    
-    input.addEventListener('@snice/input-blur', () => {
-      logEvent('blur', {});
-    });
-    
-    input.addEventListener('@snice/input-clear', () => {
-      logEvent('clear', {});
-    });
-    
-    // Form example
-    document.getElementById('demo-form').addEventListener('submit', (e) => {
-      e.preventDefault();
-      const formData = new FormData(e.target);
-      const data = Object.fromEntries(formData);
-      alert('Form submitted with: ' + JSON.stringify(data, null, 2));
-    });
-  </script>
-</body>
-</html>