snice 2.1.5 → 2.2.0

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

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

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

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

@@ -1,32 +0,0 @@
-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;
-  };
-}