snice 1.14.3 → 2.1.0

package/components/drawer/snice-drawer.ts

@@ -0,0 +1,287 @@
+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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,303 @@
+<!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>