snice 2.1.5 → 2.2.0

package/components/breadcrumbs/snice-breadcrumbs.ts

@@ -1,191 +0,0 @@
-import { element, property, watch, query, dispatch, on, ready } from 'snice';
-import css from './snice-breadcrumbs.css?inline';
-import type { BreadcrumbItem, BreadcrumbSeparator, BreadcrumbSize, SniceBreadcrumbsElement } from './snice-breadcrumbs.types';
-import type { SniceCrumbElement } from './snice-breadcrumbs.types';
-
-@element('snice-breadcrumbs')
-export class SniceBreadcrumbs extends HTMLElement implements SniceBreadcrumbsElement {
-  @property({ type: Array })
-  items: BreadcrumbItem[] = [];
-
-  @property({ reflect: true })
-  separator: BreadcrumbSeparator = '/';
-
-  @property({ reflect: true })
-  size: BreadcrumbSize = 'medium';
-
-  @property({ type: Number, reflect: true })
-  maxItems = 0;
-
-  @query('.breadcrumb')
-  breadcrumbElement?: HTMLElement;
-
-  private collapsed = true;
-  private slotItems: BreadcrumbItem[] = [];
-
-  html() {
-    const allItems = this.getAllItems();
-    const visibleItems = this.getVisibleItems(allItems);
-    const hasCollapsed = this.maxItems > 0 && allItems.length > this.maxItems && this.collapsed;
-    
-    return /*html*/`
-      <slot style="display: none"></slot>
-      <nav aria-label="Breadcrumb">
-        <ol class="breadcrumb ${hasCollapsed ? 'breadcrumb--collapsed' : ''}">
-          ${visibleItems.map((item, index) => {
-            const isLast = index === visibleItems.length - 1;
-            const isActive = item.active || isLast;
-            const isHidden = hasCollapsed && index > 0 && index < visibleItems.length - 2;
-            
-            return /*html*/`
-              <li class="breadcrumb-item ${isActive ? 'breadcrumb-item--active' : ''} ${isHidden ? 'breadcrumb-item--hidden' : ''}">
-                ${item.href && !isActive ? /*html*/`
-                  <a href="${item.href}" 
-                     class="breadcrumb-link"
-                     aria-current="${isActive ? 'page' : ''}"
-                     tabindex="0">
-                    ${this.renderIcon(item)}
-                    ${item.label}
-                  </a>
-                ` : /*html*/`
-                  <span class="breadcrumb-text" 
-                        aria-current="${isActive ? 'page' : ''}">
-                    ${this.renderIcon(item)}
-                    ${item.label}
-                  </span>
-                `}
-                ${!isLast ? /*html*/`
-                  <span class="breadcrumb-separator" aria-hidden="true">
-                    ${this.separator}
-                  </span>
-                ` : ''}
-              </li>
-              ${hasCollapsed && index === 0 && allItems.length > this.maxItems ? /*html*/`
-                <li class="breadcrumb-item">
-                  <button class="breadcrumb-ellipsis" 
-                          aria-label="Show all breadcrumbs"
-                          tabindex="0">
-                    •••
-                  </button>
-                  <span class="breadcrumb-separator" aria-hidden="true">
-                    ${this.separator}
-                  </span>
-                </li>
-              ` : ''}
-            `;
-          }).join('')}
-        </ol>
-      </nav>
-    `;
-  }
-
-  css() {
-    return css;
-  }
-
-  private getAllItems(): BreadcrumbItem[] {
-    // Prefer slot items if available, otherwise use items property
-    return this.slotItems.length > 0 ? this.slotItems : this.items;
-  }
-
-  private getVisibleItems(allItems: BreadcrumbItem[]): BreadcrumbItem[] {
-    if (this.maxItems <= 0 || allItems.length <= this.maxItems || !this.collapsed) {
-      return allItems;
-    }
-    
-    // Show first item and last (maxItems - 1) items
-    const firstItem = allItems[0];
-    const lastItems = allItems.slice(-(this.maxItems - 1));
-    return [firstItem, ...lastItems];
-  }
-
-  @on('click', '.breadcrumb-ellipsis')
-  handleEllipsisClick() {
-    this.collapsed = false;
-    this.render();
-  }
-
-  @on('click', '.breadcrumb-link')
-  @dispatch('breadcrumb-click')
-  handleLinkClick(event: MouseEvent) {
-    const target = event.target as HTMLAnchorElement;
-    const label = target.textContent?.trim() || '';
-    const href = target.getAttribute('href') || '';
-    
-    // Find the item index
-    const allItems = this.getAllItems();
-    const index = allItems.findIndex(item => item.label === label);
-    
-    return {
-      item: allItems[index],
-      index,
-      href,
-      label
-    };
-  }
-
-  private handleSlotChange() {
-    const slot = this.shadowRoot?.querySelector('slot');
-    if (!slot) return;
-    
-    const crumbs = slot.assignedElements().filter(
-      el => el.tagName.toLowerCase() === 'snice-crumb'
-    ) as SniceCrumbElement[];
-    
-    this.slotItems = crumbs.map(crumb => ({
-      label: crumb.label || crumb.textContent?.trim() || '',
-      href: crumb.href || undefined,
-      icon: crumb.icon || undefined,
-      iconImage: crumb.iconImage || undefined,
-      active: crumb.active || false
-    }));
-    
-    this.render();
-  }
-
-  @ready()
-  init() {
-    // Setup slot change handling
-    const slot = this.shadowRoot?.querySelector('slot');
-    if (slot) {
-      slot.addEventListener('slotchange', () => this.handleSlotChange());
-      // Initial check for slotted content
-      this.handleSlotChange();
-    }
-  }
-
-  @watch('items', 'separator', 'maxItems')
-  updateBreadcrumb() {
-    this.collapsed = true;
-    // Only render if not using slot items, otherwise slot change will handle it
-    if (!this.slotItems || this.slotItems.length === 0) {
-      this.render();
-    }
-  }
-
-  setItems(items: BreadcrumbItem[]) {
-    this.items = items;
-  }
-
-  private renderIcon(item: BreadcrumbItem): string {
-    return /*html*/`
-      <img class="breadcrumb-icon-image" src="${item.iconImage || ''}" alt="" ${item.iconImage ? '' : 'hidden'}>
-      <span class="breadcrumb-icon" ${item.icon ? '' : 'hidden'}>${item.icon || ''}</span>
-    `;
-  }
-
-  private render() {
-    const shadow = this.shadowRoot;
-    if (shadow) {
-      shadow.innerHTML = '';
-      if (this.css) {
-        const style = document.createElement('style');
-        style.textContent = this.css();
-        shadow.appendChild(style);
-      }
-      const template = document.createElement('template');
-      template.innerHTML = this.html();
-      shadow.appendChild(template.content.cloneNode(true));
-    }
-  }
-}

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

@@ -1,26 +0,0 @@
-export type BreadcrumbSeparator = '/' | '>' | '»' | '•' | '|';
-export type BreadcrumbSize = 'small' | 'medium' | 'large';
-
-export interface BreadcrumbItem {
-  label: string;
-  href?: string;
-  icon?: string;
-  iconImage?: string;
-  active?: boolean;
-}
-
-export interface SniceBreadcrumbsElement extends HTMLElement {
-  items: BreadcrumbItem[];
-  separator: BreadcrumbSeparator;
-  size: BreadcrumbSize;
-  maxItems: number;
-  setItems(items: BreadcrumbItem[]): void;
-}
-
-export interface SniceCrumbElement extends HTMLElement {
-  label: string;
-  href: string;
-  icon: string;
-  iconImage: string;
-  active: boolean;
-}

package/components/breadcrumbs/snice-crumb.ts

@@ -1,26 +0,0 @@
-import { element, property } from 'snice';
-import type { SniceCrumbElement } from './snice-breadcrumbs.types';
-
-@element('snice-crumb')
-export class SniceCrumb extends HTMLElement implements SniceCrumbElement {
-  @property({ reflect: true })
-  label = '';
-
-  @property({ reflect: true })
-  href = '';
-
-  @property({ reflect: true })
-  icon = '';
-
-  @property({ attribute: 'icon-image', reflect: true })
-  iconImage = '';
-
-  @property({ type: Boolean, reflect: true })
-  active = false;
-
-  // No shadow DOM - this is a data element
-  connectedCallback() {
-    // Hide the element as it's only for data
-    this.style.display = 'none';
-  }
-}

package/components/button/demo.html

@@ -1,42 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Button 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);
-    }
-    
-    .row {
-      margin-bottom: 20px;
-      display: flex;
-      gap: 10px;
-      align-items: center;
-    }
-    
-    h2 {
-      color: var(--snice-color-text);
-      margin-bottom: 20px;
-    }
-  </style>
-</head>
-<body>
-  <h2>Button Variants</h2>
-  <div class="row">
-    <snice-button variant="default">Default</snice-button>
-    <snice-button variant="primary">Primary</snice-button>
-    <snice-button variant="success">Success</snice-button>
-    <snice-button variant="warning">Warning</snice-button>
-    <snice-button variant="danger">Danger</snice-button>
-    <snice-button variant="text">Text</snice-button>
-  </div>
-
-  <script type="module" src="./snice-button.ts"></script>
-</body>
-</html>

package/components/button/snice-button.css

@@ -1,230 +0,0 @@
-:host {
-  display: inline-block;
-  position: relative;
-  width: auto;
-  cursor: pointer;
-}
-
-:host([disabled]) {
-  cursor: not-allowed;
-}
-
-.button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  border: 1px solid;
-  font-family: var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
-  font-weight: var(--snice-font-weight-medium, 500);
-  text-decoration: none;
-  user-select: none;
-  white-space: nowrap;
-  vertical-align: middle;
-  padding: 0;
-  transition: 
-    color var(--snice-transition-fast, 150ms) ease,
-    background-color var(--snice-transition-fast, 150ms) ease,
-    border-color var(--snice-transition-fast, 150ms) ease,
-    box-shadow var(--snice-transition-fast, 150ms) ease;
-  cursor: inherit;
-  position: relative;
-}
-
-.button:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 var(--snice-focus-ring-width, 2px) var(--snice-focus-ring-color, rgb(59 130 246 / 0.5));
-}
-
-.button--disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-/* Sizes */
-.button--small {
-  font-size: var(--snice-font-size-sm, 0.875rem);
-  height: 1.875rem; /* 30px */
-  padding: 0 var(--snice-spacing-sm, 0.75rem);
-  border-radius: var(--snice-border-radius-md, 0.25rem);
-}
-
-.button--medium {
-  font-size: var(--snice-font-size-md, 1rem);
-  height: 2.5rem; /* 40px */
-  padding: 0 var(--snice-spacing-md, 1rem);
-  border-radius: var(--snice-border-radius-md, 0.25rem);
-}
-
-.button--large {
-  font-size: var(--snice-font-size-lg, 1.125rem);
-  height: 3.125rem; /* 50px */
-  padding: 0 var(--snice-spacing-lg, 1.5rem);
-  border-radius: var(--snice-border-radius-md, 0.25rem);
-}
-
-/* Variants - Default */
-.button--default {
-  background-color: var(--snice-color-background, rgb(255 255 255));
-  color: var(--snice-color-text, rgb(23 23 23));
-  border-color: var(--snice-color-border, rgb(226 226 226));
-}
-
-.button--default:hover:not(.button--disabled) {
-  background-color: var(--snice-color-background-secondary, rgb(250 250 250));
-  border-color: var(--snice-color-border-hover, rgb(204 204 204));
-}
-
-.button--default:active:not(.button--disabled) {
-  background-color: var(--snice-color-background-tertiary, rgb(241 241 241));
-}
-
-/* Variants - Primary */
-.button--primary {
-  background-color: var(--snice-color-primary, rgb(37 99 235));
-  color: var(--snice-color-text-inverse, rgb(250 250 250));
-  border-color: var(--snice-color-primary, rgb(37 99 235));
-}
-
-.button--primary:hover:not(.button--disabled) {
-  background-color: var(--snice-color-primary-hover, rgb(29 78 216));
-  border-color: var(--snice-color-primary-hover, rgb(29 78 216));
-}
-
-.button--primary:active:not(.button--disabled) {
-  background-color: var(--snice-color-primary-hover, rgb(29 78 216));
-}
-
-/* Variants - Success */
-.button--success {
-  background-color: var(--snice-color-success, rgb(22 163 74));
-  color: var(--snice-color-text-inverse, rgb(250 250 250));
-  border-color: var(--snice-color-success, rgb(22 163 74));
-}
-
-.button--success:hover:not(.button--disabled) {
-  background-color: var(--snice-color-success-hover, rgb(21 128 61));
-  border-color: var(--snice-color-success-hover, rgb(21 128 61));
-}
-
-/* Variants - Warning */
-.button--warning {
-  background-color: var(--snice-color-warning, rgb(202 138 4));
-  color: var(--snice-color-text-inverse, rgb(250 250 250));
-  border-color: var(--snice-color-warning, rgb(202 138 4));
-}
-
-.button--warning:hover:not(.button--disabled) {
-  background-color: var(--snice-color-warning-hover, rgb(161 98 7));
-  border-color: var(--snice-color-warning-hover, rgb(161 98 7));
-}
-
-/* Variants - Danger */
-.button--danger {
-  background-color: var(--snice-color-danger, rgb(220 38 38));
-  color: var(--snice-color-text-inverse, rgb(250 250 250));
-  border-color: var(--snice-color-danger, rgb(220 38 38));
-}
-
-.button--danger:hover:not(.button--disabled) {
-  background-color: var(--snice-color-danger-hover, rgb(185 28 28));
-  border-color: var(--snice-color-danger-hover, rgb(185 28 28));
-}
-
-/* Variants - Text */
-.button--text {
-  background-color: transparent;
-  color: var(--snice-color-primary, rgb(37 99 235));
-  border-color: transparent;
-}
-
-.button--text:hover:not(.button--disabled) {
-  background-color: rgb(59 130 246 / 0.1);
-  color: var(--snice-color-primary-hover, rgb(29 78 216));
-}
-
-/* Outline modifier */
-.button--outline.button--default {
-  background-color: transparent;
-  color: var(--snice-color-text, rgb(23 23 23));
-}
-
-.button--outline.button--primary {
-  background-color: transparent;
-  color: var(--snice-color-primary, rgb(37 99 235));
-}
-
-.button--outline.button--success {
-  background-color: transparent;
-  color: var(--snice-color-success, rgb(22 163 74));
-}
-
-.button--outline.button--warning {
-  background-color: transparent;
-  color: var(--snice-color-warning, rgb(202 138 4));
-}
-
-.button--outline.button--danger {
-  background-color: transparent;
-  color: var(--snice-color-danger, rgb(220 38 38));
-}
-
-.button--outline:hover:not(.button--disabled) {
-  background-color: rgb(115 115 115 / 0.1);
-}
-
-/* Shape modifiers */
-.button--pill {
-  border-radius: var(--snice-border-radius-pill, 9999px);
-}
-
-.button--circle {
-  border-radius: var(--snice-border-radius-circle, 50%);
-  width: var(--size);
-  padding: 0;
-}
-
-.button--small.button--circle { --size: 1.875rem; /* 30px */ }
-.button--medium.button--circle { --size: 2.5rem; /* 40px */ }
-.button--large.button--circle { --size: 3.125rem; /* 50px */ }
-
-/* Loading state */
-.button--loading {
-  position: relative;
-  cursor: wait;
-}
-
-.button--loading .label {
-  visibility: hidden;
-}
-
-.spinner {
-  display: none;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 1em;
-  height: 1em;
-}
-
-.button--loading .spinner {
-  display: block;
-}
-
-.spinner::after {
-  content: '';
-  display: block;
-  width: 100%;
-  height: 100%;
-  border: 2px solid currentColor;
-  border-right-color: transparent;
-  border-radius: 50%;
-  animation: spin 0.6s linear infinite;
-}
-
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}

package/components/button/snice-button.ts

@@ -1,169 +0,0 @@
-import { element, property, query, on, dispatch, watch } from 'snice';
-import css from './snice-button.css?inline';
-import type { ButtonVariant, ButtonSize, IconPlacement, SniceButtonElement } from './snice-button.types';
-
-@element('snice-button')
-export class SniceButton extends HTMLElement implements SniceButtonElement {
-  @property({ reflect: true })
-  variant: ButtonVariant = 'default';
-
-  @property({ reflect: true })
-  size: ButtonSize = 'medium';
-
-  @property({ type: Boolean, reflect: true })
-  disabled = false;
-
-  @property({ type: Boolean, reflect: true })
-  loading = false;
-
-  @property({ type: Boolean, reflect: true })
-  outline = false;
-
-  @property({ type: Boolean, reflect: true })
-  pill = false;
-
-  @property({ type: Boolean, reflect: true })
-  circle = false;
-
-  @property({ type: String, reflect: true })
-  href = '';
-
-  @property({ type: String, reflect: true })
-  target = '';
-
-  @property({ type: String, reflect: true })
-  download = '';
-
-  @property({ type: String, reflect: true })
-  icon = '';
-
-  @property({ attribute: 'icon-placement', reflect: true })
-  iconPlacement: IconPlacement = 'start';
-
-
-  @query('.button')
-  button?: HTMLButtonElement;
-
-  @query('.spinner')
-  spinner?: HTMLElement;
-
-  @query('.label')
-  label?: HTMLElement;
-
-  @query('.icon')
-  iconElement?: HTMLImageElement;
-
-  html() {
-    const classes = [
-      'button',
-      `button--${this.variant || 'default'}`,
-      `button--${this.size || 'medium'}`,
-      this.outline ? 'button--outline' : '',
-      this.pill ? 'button--pill' : '',
-      this.circle ? 'button--circle' : '',
-      this.loading ? 'button--loading' : '',
-      this.disabled ? 'button--disabled' : '',
-      this.icon ? `button--has-icon` : '',
-      this.icon ? `button--icon-${this.iconPlacement}` : ''
-    ].filter(Boolean).join(' ');
-
-    const iconElement = this.icon ? /*html*/`
-      <img class="icon" src="${this.icon}" alt="" part="icon" />
-    ` : '';
-
-    return /*html*/`
-      <button class="${classes}" type="button" ${this.disabled ? 'disabled' : ''} part="base">
-        <span class="spinner" part="spinner"></span>
-        ${this.iconPlacement === 'start' ? iconElement : ''}
-        <span class="label" part="label">
-          <slot></slot>
-        </span>
-        ${this.iconPlacement === 'end' ? iconElement : ''}
-      </button>
-    `;
-  }
-
-  css() {
-    return css;
-  }
-
-  @watch('*')
-  updateButtonClasses() {
-    if (!this.button) return;
-    
-    // Rebuild all classes based on current state
-    const classes = [
-      'button',
-      `button--${this.variant}`,
-      `button--${this.size}`,
-      this.outline ? 'button--outline' : '',
-      this.pill ? 'button--pill' : '',
-      this.circle ? 'button--circle' : '',
-      this.loading ? 'button--loading' : '',
-      this.disabled ? 'button--disabled' : '',
-      this.icon ? `button--has-icon` : '',
-      this.icon ? `button--icon-${this.iconPlacement}` : ''
-    ].filter(Boolean);
-    
-    // Set the className directly to avoid class manipulation issues
-    this.button.className = classes.join(' ');
-  }
-
-  @watch('disabled')
-  updateDisabledState() {
-    if (this.button) {
-      this.button.disabled = this.disabled;
-    }
-  }
-
-  // Keep these methods for backwards compatibility if needed
-  setLoading(loading: boolean) {
-    this.loading = loading;
-  }
-
-  setDisabled(disabled: boolean) {
-    this.disabled = disabled;
-  }
-
-  setVariant(variant: typeof this.variant) {
-    this.variant = variant;
-  }
-
-  @on('click')
-  @dispatch('@snice/click')
-  handleClick(event: MouseEvent) {
-    if (this.disabled || this.loading) {
-      event.preventDefault();
-      event.stopPropagation();
-      return;
-    }
-
-    // Handle navigation if href is set
-    if (this.href) {
-      if (this.download) {
-        const a = document.createElement('a');
-        a.href = this.href;
-        a.download = this.download;
-        a.click();
-      } else if (this.target) {
-        window.open(this.href, this.target);
-      } else {
-        window.location.href = this.href;
-      }
-    }
-
-    return { originalEvent: event };
-  }
-
-  focus(options?: FocusOptions) {
-    this.button?.focus(options);
-  }
-
-  blur() {
-    this.button?.blur();
-  }
-
-  click() {
-    this.button?.click();
-  }
-}