snice 1.14.3 → 2.1.0

package/components/breadcrumbs/snice-breadcrumbs.ts

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

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

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

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

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

@@ -0,0 +1,169 @@
+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();
+  }
+}