snice 1.14.3 → 2.1.0

package/components/accordion/snice-accordion-item.ts

@@ -0,0 +1,226 @@
+import { element, property, query, on, watch, ready, dispatch, observe } from 'snice';
+import css from './snice-accordion-item.css?inline';
+import type { SniceAccordionItemElement } from './snice-accordion.types';
+
+@element('snice-accordion-item')
+export class SniceAccordionItem extends HTMLElement implements SniceAccordionItemElement {
+  @property({ attribute: 'item-id', reflect: true })
+  itemId: string = '';
+
+  @property({ type: Boolean, reflect: true })
+  open = false;
+
+  @property({ type: Boolean, reflect: true })
+  disabled = false;
+
+  @query('.accordion-item__content')
+  contentElement?: HTMLElement;
+
+  @query('.accordion-item__content-inner')
+  contentInner?: HTMLElement;
+
+  private isAnimating = false;
+
+  html() {
+    return /*html*/`
+      <button 
+        class="accordion-item__header"
+        aria-expanded="${this.open}"
+        aria-controls="content-${this.itemId}"
+        ${this.disabled ? 'disabled' : ''}
+      >
+        <span class="accordion-item__title">
+          <slot name="header"></slot>
+        </span>
+        <svg class="accordion-item__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M6 9l6 6 6-6"/>
+        </svg>
+      </button>
+      <div 
+        class="accordion-item__content" 
+        id="content-${this.itemId}"
+        role="region"
+        aria-labelledby="header-${this.itemId}"
+      >
+        <div class="accordion-item__content-inner">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+
+  css() {
+    return css;
+  }
+
+  @ready()
+  init() {
+    this.updateContentHeight();
+    
+    // Set initial state
+    if (this.open) {
+      this.expand(false);
+    }
+  }
+
+  @observe('mutation:childList', { subtree: true, throttle: 100 })
+  onContentMutation() {
+    // Only update height if we're open and not animating
+    if (this.open && !this.isAnimating) {
+      this.updateContentHeight();
+    }
+  }
+
+  @watch('open')
+  handleOpenChange() {
+    if (this.open) {
+      this.expand();
+    } else {
+      this.collapse();
+    }
+  }
+
+  @watch('disabled')
+  handleDisabledChange() {
+    const header = this.shadowRoot?.querySelector('.accordion-item__header') as HTMLButtonElement;
+    if (header) {
+      header.disabled = this.disabled;
+    }
+  }
+
+  @on('click', '.accordion-item__header', { preventDefault: true })
+  handleHeaderClick() {
+    if (!this.disabled) {
+      this.toggle();
+    }
+  }
+
+  @on(['keydown:Enter', 'keydown:Space'], '.accordion-item__header', { preventDefault: true })
+  handleHeaderKeydown() {
+    if (!this.disabled) {
+      this.toggle();
+    }
+  }
+
+  toggle() {
+    if (this.isAnimating || this.disabled) return;
+    
+    if (this.open) {
+      this.collapse();
+    } else {
+      this.expand();
+    }
+  }
+
+  expand(animate = true) {
+    if (this.open || this.disabled) return;
+    
+    this.open = true;
+    this.updateAriaExpanded(true);
+    
+    if (this.contentElement) {
+      if (animate) {
+        this.animateExpand();
+      } else {
+        // Instant expand
+        this.contentElement.style.maxHeight = 'none';
+      }
+    }
+    
+    this.dispatchToggleEvent(true);
+  }
+
+  collapse(animate = true) {
+    if (!this.open) return;
+    
+    this.open = false;
+    this.updateAriaExpanded(false);
+    
+    if (this.contentElement) {
+      if (animate) {
+        this.animateCollapse();
+      } else {
+        // Instant collapse
+        this.contentElement.style.maxHeight = '0';
+      }
+    }
+    
+    this.dispatchToggleEvent(false);
+  }
+
+  private animateExpand() {
+    if (!this.contentElement || !this.contentInner) return;
+    
+    this.isAnimating = true;
+    
+    // Use requestAnimationFrame for smoother animation
+    requestAnimationFrame(() => {
+      if (!this.contentElement || !this.contentInner) return;
+      
+      // Get the actual height
+      const height = this.contentInner.scrollHeight;
+      
+      // Set the max-height for animation
+      this.contentElement.style.maxHeight = `${height}px`;
+      
+      // After animation completes, remove the max-height to allow dynamic content
+      this.contentElement.addEventListener('transitionend', () => {
+        if (this.contentElement && this.open) {
+          this.contentElement.style.maxHeight = 'none';
+        }
+        this.isAnimating = false;
+      }, { once: true });
+    });
+  }
+
+  private animateCollapse() {
+    if (!this.contentElement) return;
+    
+    this.isAnimating = true;
+    
+    // Use requestAnimationFrame for smoother animation
+    requestAnimationFrame(() => {
+      if (!this.contentElement) return;
+      
+      // First set the current height explicitly
+      const height = this.contentElement.scrollHeight;
+      this.contentElement.style.maxHeight = `${height}px`;
+      
+      // Force reflow
+      void this.contentElement.offsetHeight;
+      
+      // Then animate to 0
+      requestAnimationFrame(() => {
+        if (!this.contentElement) return;
+        this.contentElement.style.maxHeight = '0';
+        
+        this.contentElement.addEventListener('transitionend', () => {
+          this.isAnimating = false;
+        }, { once: true });
+      });
+    });
+  }
+
+  private updateContentHeight() {
+    if (!this.contentElement || !this.contentInner || this.isAnimating) return;
+    
+    // Use requestAnimationFrame to batch DOM reads/writes
+    requestAnimationFrame(() => {
+      if (!this.contentInner) return;
+      
+      // Set CSS variable for max-height based on content
+      const height = this.contentInner.scrollHeight;
+      this.style.setProperty('--max-height', `${height}px`);
+    });
+  }
+
+  private updateAriaExpanded(expanded: boolean) {
+    const header = this.shadowRoot?.querySelector('.accordion-item__header');
+    header?.setAttribute('aria-expanded', String(expanded));
+  }
+
+  @dispatch('accordion-item-toggle', { bubbles: true, composed: true })
+  private dispatchToggleEvent(open: boolean) {
+    return { itemId: this.itemId, open };
+  }
+}

package/components/accordion/snice-accordion.css

@@ -0,0 +1,31 @@
+:host {
+  --accordion-border-color: #e5e7eb;
+  --accordion-border-radius: 8px;
+  --accordion-header-bg: #ffffff;
+  --accordion-header-bg-hover: #f9fafb;
+  --accordion-header-bg-active: #f3f4f6;
+  --accordion-header-color: #111827;
+  --accordion-header-padding: 1rem; /* 16px */
+  --accordion-content-bg: #ffffff;
+  --accordion-content-padding: 1rem; /* 16px */
+  --accordion-content-color: #4b5563;
+  --accordion-icon-size: 1.25rem; /* 20px */
+  --accordion-animation-duration: 0.3s;
+  
+  display: block;
+  width: 100%;
+}
+
+.accordion {
+  border: 1px solid var(--accordion-border-color);
+  border-radius: var(--accordion-border-radius);
+  overflow: hidden;
+}
+
+::slotted(snice-accordion-item) {
+  display: block;
+}
+
+::slotted(snice-accordion-item:not(:last-child)) {
+  border-bottom: 1px solid var(--accordion-border-color);
+}

package/components/accordion/snice-accordion.ts

@@ -0,0 +1,182 @@
+import { element, property, on, dispatch, ready, queryAll } from 'snice';
+import css from './snice-accordion.css?inline';
+import type { SniceAccordionElement, SniceAccordionItemElement, AccordionOpenEvent, AccordionCloseEvent } from './snice-accordion.types';
+
+@element('snice-accordion')
+export class SniceAccordion extends HTMLElement implements SniceAccordionElement {
+  @property({ type: Boolean, reflect: true })
+  multiple = false;
+
+  @queryAll('snice-accordion-item', { light: true, shadow: false })
+  items?: NodeListOf<SniceAccordionItemElement>;
+
+  activeItems: Set<string> = new Set();
+
+  html() {
+    return /*html*/`
+      <div class="accordion">
+        <slot></slot>
+      </div>
+    `;
+  }
+
+  css() {
+    return css;
+  }
+
+  @ready()
+  init() {
+    // Set up initial state
+    this.updateItems();
+  }
+
+  @on('slotchange', 'slot', { debounce: 50 })
+  handleSlotChange() {
+    this.updateItems();
+  }
+
+  private updateItems() {
+    if (!this.items) return;
+    
+    this.items.forEach((item, index) => {
+      // Set default ID if not provided
+      if (!item.itemId) {
+        item.itemId = `accordion-item-${index}`;
+      }
+      
+      // Track open items
+      if (item.open) {
+        this.activeItems.add(item.itemId);
+      }
+    });
+  }
+
+  @on('accordion-item-toggle')
+  handleItemToggle(event: CustomEvent<{ itemId: string; open: boolean }>) {
+    const { itemId, open } = event.detail;
+    
+    if (open) {
+      // If not multiple mode, close other items
+      if (!this.multiple) {
+        this.activeItems.forEach(id => {
+          if (id !== itemId) {
+            this.closeItem(id);
+          }
+        });
+        this.activeItems.clear();
+      }
+      
+      this.activeItems.add(itemId);
+      this.dispatchOpenEvent(itemId);
+    } else {
+      this.activeItems.delete(itemId);
+      this.dispatchCloseEvent(itemId);
+    }
+  }
+
+  openItem(id: string) {
+    const item = this.querySelector(`snice-accordion-item[item-id="${id}"]`) as SniceAccordionItemElement;
+    if (item && !item.disabled) {
+      item.expand();
+    }
+  }
+
+  closeItem(id: string) {
+    const item = this.querySelector(`snice-accordion-item[item-id="${id}"]`) as SniceAccordionItemElement;
+    if (item) {
+      item.collapse();
+    }
+  }
+
+  toggleItem(id: string) {
+    const item = this.querySelector(`snice-accordion-item[item-id="${id}"]`) as SniceAccordionItemElement;
+    if (item && !item.disabled) {
+      item.toggle();
+    }
+  }
+
+  openAll() {
+    if (!this.multiple || !this.items) return;
+    
+    this.items.forEach(item => {
+      if (!item.disabled) {
+        item.expand();
+      }
+    });
+  }
+
+  closeAll() {
+    if (!this.items) return;
+    
+    this.items.forEach(item => {
+      item.collapse();
+    });
+  }
+
+  @dispatch('accordion-open', { bubbles: true, composed: true })
+  private dispatchOpenEvent(itemId: string): AccordionOpenEvent['detail'] {
+    const item = this.querySelector(`snice-accordion-item[item-id="${itemId}"]`) as SniceAccordionItemElement;
+    return { itemId, item };
+  }
+
+  @dispatch('accordion-close', { bubbles: true, composed: true })
+  private dispatchCloseEvent(itemId: string): AccordionCloseEvent['detail'] {
+    const item = this.querySelector(`snice-accordion-item[item-id="${itemId}"]`) as SniceAccordionItemElement;
+    return { itemId, item };
+  }
+
+  // Keyboard navigation
+  @on('keydown:ArrowDown', { preventDefault: true })
+  handleArrowDown(event: KeyboardEvent) {
+    this.navigateItems(event, 1);
+  }
+
+  @on('keydown:ArrowUp', { preventDefault: true })
+  handleArrowUp(event: KeyboardEvent) {
+    this.navigateItems(event, -1);
+  }
+
+  @on('keydown:Home', { preventDefault: true })
+  handleHome(event: KeyboardEvent) {
+    this.navigateToIndex(event, 0);
+  }
+
+  @on('keydown:End', { preventDefault: true })
+  handleEnd(event: KeyboardEvent) {
+    if (!this.items) return;
+    this.navigateToIndex(event, this.items.length - 1);
+  }
+
+  private navigateItems(event: KeyboardEvent, direction: number) {
+    if (!this.items) return;
+    
+    const items = Array.from(this.items).filter(item => !item.disabled);
+    const currentItem = event.target as SniceAccordionItemElement;
+    const currentIndex = items.indexOf(currentItem);
+    
+    if (currentIndex === -1) return;
+    
+    const nextIndex = direction > 0
+      ? (currentIndex + 1) % items.length
+      : currentIndex - 1 < 0 ? items.length - 1 : currentIndex - 1;
+    
+    const nextItem = items[nextIndex];
+    const button = nextItem.shadowRoot?.querySelector('.accordion-item__header') as HTMLElement;
+    button?.focus();
+  }
+
+  private navigateToIndex(event: KeyboardEvent, index: number) {
+    if (!this.items) return;
+    
+    const items = Array.from(this.items).filter(item => !item.disabled);
+    const currentItem = event.target as SniceAccordionItemElement;
+    
+    if (!items.includes(currentItem)) return;
+    
+    const targetItem = items[index];
+    if (targetItem) {
+      const button = targetItem.shadowRoot?.querySelector('.accordion-item__header') as HTMLElement;
+      button?.focus();
+    }
+  }
+}

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

@@ -0,0 +1,32 @@
+export interface SniceAccordionElement extends HTMLElement {
+  multiple: boolean;
+  activeItems: Set<string>;
+  openItem(id: string): void;
+  closeItem(id: string): void;
+  toggleItem(id: string): void;
+  openAll(): void;
+  closeAll(): void;
+}
+
+export interface SniceAccordionItemElement extends HTMLElement {
+  itemId: string;
+  open: boolean;
+  disabled: boolean;
+  toggle(): void;
+  expand(): void;
+  collapse(): void;
+}
+
+export interface AccordionOpenEvent {
+  detail: {
+    itemId: string;
+    item: SniceAccordionItemElement;
+  };
+}
+
+export interface AccordionCloseEvent {
+  detail: {
+    itemId: string;
+    item: SniceAccordionItemElement;
+  };
+}