snice 2.1.5 → 2.2.0

package/components/progress/snice-progress.css

@@ -1,267 +0,0 @@
-:host {
-  --progress-height: 0.5rem; /* 8px */
-  --progress-radius: 4px;
-  --progress-bg: #e5e7eb;
-  --progress-color: #3b82f6;
-  --progress-animation-duration: 1.5s;
-  
-  display: inline-block;
-  width: 100%;
-}
-
-:host([variant="circular"]) {
-  width: auto;
-}
-
-/* Linear Progress Bar */
-.progress {
-  position: relative;
-  width: 100%;
-  background: var(--progress-bg);
-  border-radius: var(--progress-radius);
-  overflow: hidden;
-}
-
-.progress--linear {
-  height: var(--progress-height);
-}
-
-.progress__bar {
-  height: 100%;
-  background: var(--progress-color);
-  border-radius: var(--progress-radius);
-  transition: width 0.3s ease;
-  position: relative;
-  overflow: hidden;
-}
-
-/* Sizes */
-:host([size="small"]) {
-  --progress-height: 0.25rem; /* 4px */
-  --progress-spinner-size: 1.5rem; /* 24px */
-  --progress-spinner-stroke: 3px;
-}
-
-:host([size="medium"]) {
-  --progress-height: 0.5rem; /* 8px */
-  --progress-spinner-size: 2.5rem; /* 40px */
-  --progress-spinner-stroke: 4px;
-}
-
-:host([size="large"]) {
-  --progress-height: 0.75rem; /* 12px */
-  --progress-spinner-size: 3.5rem; /* 56px */
-  --progress-spinner-stroke: 5px;
-}
-
-:host([size="xl"]) {
-  --progress-height: 1rem; /* 16px */
-  --progress-spinner-size: 5rem; /* 80px */
-  --progress-spinner-stroke: 6px;
-}
-
-:host([size="xxl"]) {
-  --progress-height: 1.25rem; /* 20px */
-  --progress-spinner-size: 7.5rem; /* 120px */
-  --progress-spinner-stroke: 8px;
-}
-
-:host([size="xxxl"]) {
-  --progress-height: 1.5rem; /* 24px */
-  --progress-spinner-size: 10rem; /* 160px */
-  --progress-spinner-stroke: 10px;
-}
-
-/* Colors */
-:host([color="primary"]) {
-  --progress-color: #3b82f6;
-}
-
-:host([color="success"]) {
-  --progress-color: #10b981;
-}
-
-:host([color="warning"]) {
-  --progress-color: #f59e0b;
-}
-
-:host([color="error"]) {
-  --progress-color: #ef4444;
-}
-
-:host([color="info"]) {
-  --progress-color: #6366f1;
-}
-
-/* Striped Pattern */
-:host([striped]) .progress__bar::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-image: linear-gradient(
-    45deg,
-    rgba(255, 255, 255, 0.15) 25%,
-    transparent 25%,
-    transparent 50%,
-    rgba(255, 255, 255, 0.15) 50%,
-    rgba(255, 255, 255, 0.15) 75%,
-    transparent 75%,
-    transparent
-  );
-  background-size: 1rem 1rem;
-}
-
-/* Animated Stripes */
-:host([animated]) .progress__bar::after {
-  animation: progress-stripes var(--progress-animation-duration) linear infinite;
-}
-
-@keyframes progress-stripes {
-  from {
-    background-position: 1rem 0;
-  }
-  to {
-    background-position: 0 0;
-  }
-}
-
-/* Indeterminate State */
-:host([indeterminate]) .progress__bar {
-  width: 30% !important;
-  animation: progress-indeterminate var(--progress-animation-duration) ease-in-out infinite;
-}
-
-@keyframes progress-indeterminate {
-  0% {
-    transform: translateX(-100%);
-  }
-  100% {
-    transform: translateX(400%);
-  }
-}
-
-/* Label */
-.progress__label {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  font-size: 0.75rem;
-  font-weight: 600;
-  color: white;
-  text-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
-  white-space: nowrap;
-  z-index: 1;
-}
-
-.progress--with-label {
-  height: calc(var(--progress-height) + 0.5rem); /* +8px */
-  min-height: 1.25rem; /* 20px */
-}
-
-/* Circular Progress */
-.progress--circular {
-  display: inline-block;
-  width: var(--progress-spinner-size, 2.5rem); /* 40px */
-  height: var(--progress-spinner-size, 2.5rem); /* 40px */
-  position: relative;
-  background: transparent;
-}
-
-.progress__circle {
-  transform: rotate(-90deg);
-  width: 100%;
-  height: 100%;
-  background: transparent;
-  shape-rendering: geometricPrecision;
-}
-
-.progress__circle-bg,
-.progress__circle-bar {
-  fill: none;
-  stroke-width: var(--progress-spinner-stroke, 4px);
-  shape-rendering: geometricPrecision;
-  vector-effect: non-scaling-stroke;
-}
-
-.progress__circle-bg {
-  stroke: var(--progress-bg);
-  opacity: 0.2;
-}
-
-.progress__circle-bar {
-  stroke: var(--progress-color);
-  stroke-linecap: round;
-  transition: stroke-dashoffset 0.3s ease;
-}
-
-/* Circular Indeterminate */
-:host([variant="circular"][indeterminate]) .progress__circle {
-  animation: progress-rotate 2s linear infinite;
-}
-
-:host([variant="circular"][indeterminate]) .progress__circle-bar {
-  animation: progress-dash 1.5s ease-in-out infinite;
-}
-
-@keyframes progress-rotate {
-  100% {
-    transform: rotate(270deg);
-  }
-}
-
-@keyframes progress-dash {
-  0% {
-    stroke-dasharray: 1, 150;
-    stroke-dashoffset: 0;
-  }
-  50% {
-    stroke-dasharray: 90, 150;
-    stroke-dashoffset: -35;
-  }
-  100% {
-    stroke-dasharray: 90, 150;
-    stroke-dashoffset: -124;
-  }
-}
-
-/* Circular Label */
-.progress__circle-label {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  font-size: 0.625rem; /* Default medium size */
-  font-weight: 600;
-  color: var(--progress-color);
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-/* Adjust label size for different sizes */
-:host([size="small"]) .progress__circle-label {
-  font-size: 0.375rem;
-}
-
-:host([size="medium"]) .progress__circle-label {
-  font-size: 0.625rem;
-}
-
-:host([size="large"]) .progress__circle-label {
-  font-size: 1rem;
-}
-
-:host([size="xl"]) .progress__circle-label {
-  font-size: 1.25rem;
-}
-
-:host([size="xxl"]) .progress__circle-label {
-  font-size: 1.75rem;
-}
-
-:host([size="xxxl"]) .progress__circle-label {
-  font-size: 2.25rem;
-}

package/components/progress/snice-progress.ts

@@ -1,247 +0,0 @@
-import { element, property, watch, ready, query, dispatch } from 'snice';
-import css from './snice-progress.css?inline';
-import type { ProgressVariant, ProgressSize, ProgressColor, SniceProgressElement } from './snice-progress.types';
-
-@element('snice-progress')
-export class SniceProgress extends HTMLElement implements SniceProgressElement {
-  @property({ type: Number, reflect: true })
-  value = 0;
-
-  @property({ type: Number, reflect: true })
-  max = 100;
-
-  @property({ reflect: true })
-  variant: ProgressVariant = 'linear';
-
-  @property({ reflect: true })
-  size: ProgressSize = 'medium';
-
-  @property({ reflect: true })
-  color: ProgressColor = 'primary';
-
-  @property({ type: Boolean, reflect: true })
-  indeterminate = false;
-
-  @property({ type: Boolean, attribute: 'show-label', reflect: true })
-  showLabel = false;
-
-  @property({ reflect: true })
-  label = '';
-
-  @property({ type: Boolean, reflect: true })
-  striped = false;
-
-  @property({ type: Boolean, reflect: true })
-  animated = false;
-
-  @property({ type: Number, reflect: true })
-  thickness = 4;
-
-  @query('.progress__bar')
-  progressBar?: HTMLElement;
-
-  @query('.progress__circle-bar')
-  circleBar?: SVGCircleElement;
-
-  @query('.progress__label')
-  labelElement?: HTMLElement;
-
-  @query('.progress__circle-label')
-  circleLabelElement?: HTMLElement;
-
-  private radius = 0;
-  private circumference = 0;
-
-  html() {
-    if (this.variant === 'circular') {
-      return this.renderCircular();
-    }
-    return this.renderLinear();
-  }
-
-  css() {
-    return css;
-  }
-
-  private renderLinear() {
-    const percentage = this.getPercentage();
-    const labelText = this.label || `${Math.round(percentage)}%`;
-    
-    return /*html*/`
-      <div class="progress progress--linear ${this.showLabel ? 'progress--with-label' : ''}" 
-           role="progressbar" 
-           aria-valuenow="${this.value}"
-           aria-valuemin="0"
-           aria-valuemax="${this.max}"
-           aria-label="${labelText}">
-        <div class="progress__bar" style="width: ${this.indeterminate ? '' : percentage + '%'}">
-          ${this.showLabel ? /*html*/`
-            <span class="progress__label">${labelText}</span>
-          ` : ''}
-        </div>
-      </div>
-    `;
-  }
-
-  private renderCircular() {
-    const size = this.getSizeValue();
-    const strokeWidth = this.thickness;
-    const radius = (size - strokeWidth * 2) / 2;
-    const circumference = radius * 2 * Math.PI;
-    const percentage = this.getPercentage();
-    const offset = this.indeterminate ? 0 : circumference - (percentage / 100) * circumference;
-    const labelText = this.label || `${Math.round(percentage)}%`;
-    
-    this.radius = radius;
-    this.circumference = circumference;
-    
-    return /*html*/`
-      <div class="progress progress--circular" 
-           role="progressbar"
-           aria-valuenow="${this.value}"
-           aria-valuemin="0"
-           aria-valuemax="${this.max}"
-           aria-label="${labelText}">
-        <svg class="progress__circle" viewBox="0 0 ${size} ${size}">
-          <circle
-            class="progress__circle-bg"
-            cx="${size / 2}"
-            cy="${size / 2}"
-            r="${radius}"
-          />
-          <circle
-            class="progress__circle-bar"
-            cx="${size / 2}"
-            cy="${size / 2}"
-            r="${radius}"
-            stroke-dasharray="${circumference}"
-            stroke-dashoffset="${offset}"
-          />
-        </svg>
-        ${this.showLabel && !this.indeterminate ? /*html*/`
-          <div class="progress__circle-label">${labelText}</div>
-        ` : ''}
-      </div>
-    `;
-  }
-
-  @ready()
-  init() {
-    this.updateProgress();
-  }
-
-  @watch('value', 'max', 'indeterminate')
-  handleProgressChange() {
-    this.updateProgress();
-    this.dispatchProgressChange();
-  }
-
-  @watch('variant')
-  handleVariantChange() {
-    // Re-render when variant changes
-    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));
-      
-      // Re-query elements after re-render
-      this.progressBar = shadow.querySelector('.progress__bar') as HTMLElement;
-      this.circleBar = shadow.querySelector('.progress__circle-bar') as SVGCircleElement;
-      this.labelElement = shadow.querySelector('.progress__label') as HTMLElement;
-      this.circleLabelElement = shadow.querySelector('.progress__circle-label') as HTMLElement;
-      
-      this.updateProgress();
-    }
-  }
-
-  @watch('showLabel', 'label')
-  handleLabelChange() {
-    this.updateLabel();
-  }
-
-  @watch('thickness')
-  handleThicknessChange() {
-    if (this.variant === 'circular') {
-      this.style.setProperty('--progress-spinner-stroke', `${this.thickness}px`);
-      this.handleVariantChange(); // Re-render circular to update stroke
-    }
-  }
-
-  private updateProgress() {
-    const percentage = this.getPercentage();
-    
-    if (this.variant === 'linear' && this.progressBar) {
-      if (!this.indeterminate) {
-        this.progressBar.style.width = `${percentage}%`;
-      }
-      
-      // Update ARIA attributes
-      this.progressBar.parentElement?.setAttribute('aria-valuenow', String(this.value));
-      this.progressBar.parentElement?.setAttribute('aria-valuemax', String(this.max));
-    } else if (this.variant === 'circular' && this.circleBar) {
-      if (!this.indeterminate) {
-        const offset = this.circumference - (percentage / 100) * this.circumference;
-        this.circleBar.style.strokeDashoffset = String(offset);
-      }
-      
-      // Update ARIA attributes
-      this.circleBar.parentElement?.parentElement?.setAttribute('aria-valuenow', String(this.value));
-      this.circleBar.parentElement?.parentElement?.setAttribute('aria-valuemax', String(this.max));
-    }
-    
-    this.updateLabel();
-  }
-
-  private updateLabel() {
-    const percentage = this.getPercentage();
-    const labelText = this.label || `${Math.round(percentage)}%`;
-    
-    if (this.labelElement) {
-      this.labelElement.textContent = labelText;
-    }
-    if (this.circleLabelElement) {
-      this.circleLabelElement.textContent = labelText;
-    }
-  }
-
-  getPercentage(): number {
-    if (this.indeterminate) return 0;
-    if (this.max === 0) return 0;
-    return Math.min(100, Math.max(0, (this.value / this.max) * 100));
-  }
-
-  setProgress(value: number, max?: number) {
-    this.value = value;
-    if (max !== undefined) {
-      this.max = max;
-    }
-  }
-
-  private getSizeValue(): number {
-    switch (this.size) {
-      case 'small': return 24;
-      case 'large': return 56;
-      case 'xl': return 80;
-      case 'xxl': return 120;
-      case 'xxxl': return 160;
-      default: return 40;
-    }
-  }
-
-  @dispatch('progress-change', { bubbles: true, composed: true })
-  private dispatchProgressChange() {
-    return {
-      value: this.value,
-      max: this.max,
-      percentage: this.getPercentage(),
-      indeterminate: this.indeterminate
-    };
-  }
-}

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

@@ -1,19 +0,0 @@
-export type ProgressVariant = 'linear' | 'circular';
-export type ProgressSize = 'small' | 'medium' | 'large' | 'xl' | 'xxl' | 'xxxl';
-export type ProgressColor = 'primary' | 'success' | 'warning' | 'error' | 'info';
-
-export interface SniceProgressElement extends HTMLElement {
-  value: number;
-  max: number;
-  variant: ProgressVariant;
-  size: ProgressSize;
-  color: ProgressColor;
-  indeterminate: boolean;
-  showLabel: boolean;
-  label: string;
-  striped: boolean;
-  animated: boolean;
-  thickness: number;
-  getPercentage(): number;
-  setProgress(value: number, max?: number): void;
-}