snice 2.1.5 → 2.2.1

package/components/avatar/snice-avatar.css

@@ -1,131 +0,0 @@
-:host {
-  display: inline-block;
-  --avatar-size: 2.5rem; /* 40px */
-  --avatar-bg: #6b7280;
-  --avatar-color: #ffffff;
-}
-
-.avatar {
-  position: relative;
-  width: var(--avatar-size);
-  height: var(--avatar-size);
-  overflow: hidden;
-  background: var(--avatar-bg);
-  color: var(--avatar-color);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 600;
-  user-select: none;
-}
-
-/* Shapes */
-:host([shape="circle"]) .avatar {
-  border-radius: 50%;
-}
-
-:host([shape="square"]) .avatar {
-  border-radius: 0;
-}
-
-:host([shape="rounded"]) .avatar {
-  border-radius: 8px;
-}
-
-/* Sizes */
-:host([size="xs"]) {
-  --avatar-size: 1.5rem; /* 24px */
-  font-size: 0.625rem; /* 10px */
-}
-
-:host([size="small"]) {
-  --avatar-size: 2rem; /* 32px */
-  font-size: 0.75rem; /* 12px */
-}
-
-:host([size="medium"]) {
-  --avatar-size: 2.5rem; /* 40px */
-  font-size: 0.875rem; /* 14px */
-}
-
-:host([size="large"]) {
-  --avatar-size: 3rem; /* 48px */
-  font-size: 1rem; /* 16px */
-}
-
-:host([size="xl"]) {
-  --avatar-size: 4rem; /* 64px */
-  font-size: 1.25rem; /* 20px */
-}
-
-:host([size="xxl"]) {
-  --avatar-size: 6rem; /* 96px */
-  font-size: 2rem; /* 32px */
-}
-
-/* Image */
-.avatar-image {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  display: block;
-}
-
-.avatar-image--error {
-  display: none;
-}
-
-/* Fallback */
-.avatar-fallback {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  opacity: 0;
-  visibility: hidden;
-  transition: opacity 0.2s ease;
-}
-
-.avatar-fallback--visible {
-  opacity: 1;
-  visibility: visible;
-}
-
-.avatar-icon {
-  width: 60%;
-  height: 60%;
-  opacity: 0.9;
-}
-
-/* Avatar color classes for fallback backgrounds */
-.avatar--red { background: rgb(var(--avatar-color-red, 239 68 68)); }
-.avatar--orange { background: rgb(var(--avatar-color-orange, 251 146 60)); }
-.avatar--yellow { background: rgb(var(--avatar-color-yellow, 234 179 8)); }
-.avatar--lime { background: rgb(var(--avatar-color-lime, 163 230 53)); }
-.avatar--green { background: rgb(var(--avatar-color-green, 34 197 94)); }
-.avatar--teal { background: rgb(var(--avatar-color-teal, 20 184 166)); }
-.avatar--cyan { background: rgb(var(--avatar-color-cyan, 6 182 212)); }
-.avatar--sky { background: rgb(var(--avatar-color-sky, 14 165 233)); }
-.avatar--blue { background: rgb(var(--avatar-color-blue, 59 130 246)); }
-.avatar--indigo { background: rgb(var(--avatar-color-indigo, 99 102 241)); }
-.avatar--violet { background: rgb(var(--avatar-color-violet, 139 92 246)); }
-.avatar--purple { background: rgb(var(--avatar-color-purple, 168 85 247)); }
-.avatar--fuchsia { background: rgb(var(--avatar-color-fuchsia, 217 70 239)); }
-.avatar--pink { background: rgb(var(--avatar-color-pink, 236 72 153)); }
-.avatar--rose { background: rgb(var(--avatar-color-rose, 244 63 94)); }
-
-/* Group avatar support */
-:host(.avatar-group-item) {
-  margin-left: -0.5rem; /* -8px */
-  border: 2px solid white; /* Keep px for crisp borders */
-  border-radius: 50%;
-}
-
-:host(.avatar-group-item:first-child) {
-  margin-left: 0;
-}
-
-:host(.avatar-group-item) .avatar {
-  border: 2px solid white;
-}

package/components/avatar/snice-avatar.ts

@@ -1,136 +0,0 @@
-import { element, property, watch, query, ready, on, part } from 'snice';
-import css from './snice-avatar.css?inline';
-import type { AvatarSize, AvatarShape, SniceAvatarElement } from './snice-avatar.types';
-
-@element('snice-avatar')
-export class SniceAvatar extends HTMLElement implements SniceAvatarElement {
-  @property({ reflect: true })
-  src = '';
-
-  @property({ reflect: true })
-  alt = '';
-
-  @property({ reflect: true })
-  name = '';
-
-  @property({ reflect: true })
-  size: AvatarSize = 'medium';
-
-  @property({ reflect: true })
-  shape: AvatarShape = 'circle';
-
-  @property({ attribute: 'fallback-color', reflect: true })
-  fallbackColor = '#ffffff';
-
-  @property({ attribute: 'fallback-background', reflect: true })
-  fallbackBackground = '';
-
-  @query('.avatar-image')
-  imageElement?: HTMLImageElement;
-
-  @query('.avatar-fallback')
-  fallbackElement?: HTMLElement;
-
-  private imageError = false;
-
-  html() {
-    const colorClass = this.fallbackBackground ? '' : this.getColorClass(this.name);
-    const bgStyle = this.fallbackBackground ? `style="--avatar-bg: ${this.fallbackBackground}; --avatar-color: ${this.fallbackColor}"` : '';
-    
-    return /*html*/`
-      <div class="avatar ${colorClass}" ${bgStyle}>
-        <div part="image-section"></div>
-        <div part="fallback-section"></div>
-      </div>
-    `;
-  }
-
-  @watch('src')
-  @part('image-section')
-  renderImageSection() {
-    return this.src ? /*html*/`
-      <img class="avatar-image ${this.imageError ? 'avatar-image--error' : ''}" 
-           src="${this.src}" 
-           alt="${this.alt || this.name}"
-           loading="lazy">
-    ` : '';
-  }
-
-  @watch('name')
-  @part('fallback-section')
-  renderFallbackSection() {
-    const initials = this.getInitials(this.name);
-    return /*html*/`
-      <div class="avatar-fallback ${!this.src || this.imageError ? 'avatar-fallback--visible' : ''}">
-        ${initials || this.renderIcon()}
-      </div>
-    `;
-  }
-
-  css() {
-    return css;
-  }
-
-  @ready()
-  init() {
-    this.setupImageHandlers();
-  }
-
-  private setupImageHandlers() {
-    if (this.imageElement) {
-      this.imageElement.addEventListener('load', this.handleImageLoad.bind(this));
-      this.imageElement.addEventListener('error', this.handleImageError.bind(this));
-    }
-  }
-
-  @on('load', '.avatar-image')
-  handleImageLoad() {
-    this.imageError = false;
-    this.renderImageSection();
-    this.renderFallbackSection();
-  }
-
-  @on('error', '.avatar-image')
-  handleImageError() {
-    this.imageError = true;
-    this.renderImageSection();
-    this.renderFallbackSection();
-  }
-
-
-  getInitials(name: string): string {
-    if (!name) return '';
-    const words = name.trim().split(/\s+/);
-    if (words.length === 1) {
-      return words[0].substring(0, 2).toUpperCase();
-    }
-    return (words[0][0] + words[words.length - 1][0]).toUpperCase();
-  }
-
-  private getColorClass(name: string): string {
-    if (!name) return '';
-    
-    const colors = [
-      'red', 'orange', 'yellow', 'lime', 'green',
-      'teal', 'cyan', 'sky', 'blue', 'indigo',
-      'violet', 'purple', 'fuchsia', 'pink', 'rose'
-    ];
-    
-    // Hash the name to get a consistent index
-    let hash = 0;
-    for (let i = 0; i < name.length; i++) {
-      hash = name.charCodeAt(i) + ((hash << 5) - hash);
-    }
-    
-    const colorIndex = Math.abs(hash) % colors.length;
-    return `avatar--${colors[colorIndex]}`;
-  }
-
-  private renderIcon(): string {
-    return /*html*/`
-      <svg class="avatar-icon" viewBox="0 0 24 24" fill="currentColor">
-        <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
-      </svg>
-    `;
-  }
-}

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

@@ -1,13 +0,0 @@
-export type AvatarSize = 'xs' | 'small' | 'medium' | 'large' | 'xl' | 'xxl';
-export type AvatarShape = 'circle' | 'square' | 'rounded';
-
-export interface SniceAvatarElement extends HTMLElement {
-  src: string;
-  alt: string;
-  name: string;
-  size: AvatarSize;
-  shape: AvatarShape;
-  fallbackColor: string;
-  fallbackBackground: string;
-  getInitials(name: string): string;
-}