@sekiui/elements 0.0.61 → 0.0.63

package/dist/collection/components/input/seki-input.css

@@ -49,6 +49,13 @@
   --seki-warning-600: hsl(38, 92%, 40%);
   --seki-destructive-500: hsl(0, 84.2%, 60.2%);
   --seki-destructive-600: hsl(0, 72%, 41%);
+
+  /* Chart Colors (shadcn/ui data visualization) */
+  --seki-chart-1: hsl(12, 76%, 61%);
+  --seki-chart-2: hsl(173, 58%, 39%);
+  --seki-chart-3: hsl(197, 37%, 24%);
+  --seki-chart-4: hsl(43, 74%, 66%);
+  --seki-chart-5: hsl(27, 87%, 67%);
 }
 
 /* =============================================================================
@@ -398,15 +405,16 @@
   --seki-sidebar-width-icon: 3rem;
   --seki-sidebar-width-mobile: 18rem;
 
-  /* Sidebar Colors - Light Mode */
-  --seki-sidebar-background: hsl(0, 0%, 98.5%);
-  --seki-sidebar-foreground: hsl(0, 0%, 9%);
-  --seki-sidebar-primary: hsl(0, 0%, 12%);
-  --seki-sidebar-primary-foreground: hsl(0, 0%, 98.5%);
-  --seki-sidebar-accent: hsl(0, 0%, 97%);
-  --seki-sidebar-accent-foreground: hsl(0, 0%, 12%);
-  --seki-sidebar-border: hsl(0, 0%, 90%);
-  --seki-sidebar-ring: hsl(0, 0%, 64%);
+  /* Sidebar Colors - Light Mode (shadcn/ui exact values) */
+  --seki-sidebar-background: hsl(0, 0%, 98%);
+  --seki-sidebar-foreground: hsl(240, 5.3%, 26.1%);
+  --seki-sidebar-primary: hsl(240, 5.9%, 10%);
+  --seki-sidebar-primary-foreground: hsl(0, 0%, 98%);
+  --seki-sidebar-accent: hsl(240, 4.8%, 95.9%);
+  --seki-sidebar-accent-foreground: hsl(240, 5.9%, 10%);
+  --seki-sidebar-border: hsl(220, 13%, 91%);
+  --seki-sidebar-ring: hsl(217.2, 91.2%, 59.8%);
+  --seki-sidebar-muted-foreground: hsl(240, 3.8%, 46.1%);
 
   /* Menu Button Sizing */
   --seki-sidebar-menu-button-height: 2rem;
@@ -445,16 +453,307 @@
   --seki-sidebar-overlay-bg: hsla(0, 0%, 0%, 0.8);
 }
 
-/* Dark Mode Sidebar Tokens */
+/* Dark Mode Sidebar Tokens (shadcn/ui exact values) */
 :host([data-theme='dark']) {
-  --seki-sidebar-background: hsl(0, 0%, 12%);
-  --seki-sidebar-foreground: hsl(0, 0%, 98.5%);
-  --seki-sidebar-primary: hsl(264, 100%, 60%);
-  --seki-sidebar-primary-foreground: hsl(0, 0%, 98.5%);
-  --seki-sidebar-accent: hsl(0, 0%, 18%);
-  --seki-sidebar-accent-foreground: hsl(0, 0%, 98.5%);
-  --seki-sidebar-border: hsla(0, 0%, 100%, 0.1);
-  --seki-sidebar-ring: hsl(0, 0%, 40%);
+  --seki-sidebar-background: hsl(240, 5.9%, 10%);
+  --seki-sidebar-foreground: hsl(240, 4.8%, 95.9%);
+  --seki-sidebar-primary: hsl(0, 0%, 98%);
+  --seki-sidebar-primary-foreground: hsl(240, 5.9%, 10%);
+  --seki-sidebar-accent: hsl(240, 3.7%, 15.9%);
+  --seki-sidebar-accent-foreground: hsl(240, 4.8%, 95.9%);
+  --seki-sidebar-border: hsl(240, 3.7%, 15.9%);
+  --seki-sidebar-ring: hsl(217.2, 91.2%, 59.8%);
+  --seki-sidebar-muted-foreground: hsl(240, 5%, 64.9%);
+}
+
+/**
+ * SekiUI Design Tokens - Animations
+ * Based on Radix UI animation patterns for shadcn/ui compatibility
+ */
+
+:host {
+  /* Animation Durations */
+  --seki-animation-fast: 150ms;
+  --seki-animation-normal: 200ms;
+  --seki-animation-slow: 300ms;
+
+  /* Easing Functions (Radix UI defaults) */
+  --seki-ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --seki-ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --seki-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* Content Height Variable (for accordion-like animations) */
+  --seki-accordion-content-height: auto;
+}
+
+/* =============================================================================
+   FADE ANIMATIONS
+   ============================================================================= */
+
+@keyframes seki-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes seki-fade-out {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+/* =============================================================================
+   SCALE ANIMATIONS (Dialogs, Popovers, Dropdowns)
+   ============================================================================= */
+
+@keyframes seki-scale-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes seki-scale-out {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+}
+
+/* =============================================================================
+   SLIDE ANIMATIONS (Sheets, Sidebars, Drawers)
+   ============================================================================= */
+
+@keyframes seki-slide-in-from-top {
+  from { transform: translateY(-100%); }
+  to { transform: translateY(0); }
+}
+
+@keyframes seki-slide-out-to-top {
+  from { transform: translateY(0); }
+  to { transform: translateY(-100%); }
+}
+
+@keyframes seki-slide-in-from-bottom {
+  from { transform: translateY(100%); }
+  to { transform: translateY(0); }
+}
+
+@keyframes seki-slide-out-to-bottom {
+  from { transform: translateY(0); }
+  to { transform: translateY(100%); }
+}
+
+@keyframes seki-slide-in-from-left {
+  from { transform: translateX(-100%); }
+  to { transform: translateX(0); }
+}
+
+@keyframes seki-slide-out-to-left {
+  from { transform: translateX(0); }
+  to { transform: translateX(-100%); }
+}
+
+@keyframes seki-slide-in-from-right {
+  from { transform: translateX(100%); }
+  to { transform: translateX(0); }
+}
+
+@keyframes seki-slide-out-to-right {
+  from { transform: translateX(0); }
+  to { transform: translateX(100%); }
+}
+
+/* =============================================================================
+   ACCORDION ANIMATIONS
+   ============================================================================= */
+
+@keyframes seki-accordion-down {
+  from {
+    height: 0;
+    opacity: 0;
+  }
+  to {
+    height: var(--seki-accordion-content-height);
+    opacity: 1;
+  }
+}
+
+@keyframes seki-accordion-up {
+  from {
+    height: var(--seki-accordion-content-height);
+    opacity: 1;
+  }
+  to {
+    height: 0;
+    opacity: 0;
+  }
+}
+
+/* =============================================================================
+   ZOOM ANIMATIONS (Tooltips, Menus)
+   ============================================================================= */
+
+@keyframes seki-zoom-in {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes seki-zoom-out {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+}
+
+/* =============================================================================
+   SPIN ANIMATION (Loading indicators)
+   ============================================================================= */
+
+@keyframes seki-spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+/* =============================================================================
+   PULSE ANIMATION (Skeleton loaders)
+   ============================================================================= */
+
+@keyframes seki-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+/* =============================================================================
+   BOUNCE ANIMATION (Attention-grabbing)
+   ============================================================================= */
+
+@keyframes seki-bounce {
+  0%, 100% {
+    transform: translateY(-25%);
+    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+  }
+  50% {
+    transform: translateY(0);
+    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  }
+}
+
+/* =============================================================================
+   COLLAPSIBLE ANIMATIONS
+   ============================================================================= */
+
+@keyframes seki-collapsible-open {
+  from {
+    height: 0;
+    overflow: hidden;
+  }
+  to {
+    height: var(--seki-collapsible-content-height, auto);
+  }
+}
+
+@keyframes seki-collapsible-close {
+  from {
+    height: var(--seki-collapsible-content-height, auto);
+  }
+  to {
+    height: 0;
+    overflow: hidden;
+  }
+}
+
+/* =============================================================================
+   TOAST/NOTIFICATION ANIMATIONS
+   ============================================================================= */
+
+@keyframes seki-toast-slide-in-right {
+  from {
+    transform: translateX(calc(100% + 1rem));
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes seki-toast-slide-out-right {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(calc(100% + 1rem));
+  }
+}
+
+@keyframes seki-toast-swipe-out {
+  from {
+    transform: translateX(var(--seki-toast-swipe-end-x, 0));
+  }
+  to {
+    transform: translateX(calc(100% + 1rem));
+  }
+}
+
+/* =============================================================================
+   UTILITY ANIMATION CLASSES
+   ============================================================================= */
+
+.seki-animate-fade-in {
+  animation: seki-fade-in var(--seki-animation-normal) var(--seki-ease-out);
+}
+
+.seki-animate-fade-out {
+  animation: seki-fade-out var(--seki-animation-normal) var(--seki-ease-in);
+}
+
+.seki-animate-scale-in {
+  animation: seki-scale-in var(--seki-animation-normal) var(--seki-ease-out);
+}
+
+.seki-animate-scale-out {
+  animation: seki-scale-out var(--seki-animation-normal) var(--seki-ease-in);
+}
+
+.seki-animate-spin {
+  animation: seki-spin 1s linear infinite;
+}
+
+.seki-animate-pulse {
+  animation: seki-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+.seki-animate-bounce {
+  animation: seki-bounce 1s infinite;
+}
+
+/* =============================================================================
+   REDUCED MOTION SUPPORT
+   ============================================================================= */
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
 }
 
 
@@ -536,7 +835,7 @@
   border: 0;
   background: transparent;
   font-size: var(--seki-input-font-size);
-  font-weight: 500;
+  font-weight: var(--seki-font-weight-medium, 500);
   margin-right: 0.75rem;
   cursor: pointer;
   color: var(--seki-input-text);

package/dist/collection/components/input/seki-input.js

@@ -75,7 +75,7 @@ export class SekiInput {
         }
     }
     render() {
-        return (h("input", { key: 'cc7ba7d2045db928a5002702359f2af6b9b46362', type: this.type, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, name: this.name, autocomplete: this.autocomplete, min: this.min, max: this.max, step: this.step, pattern: this.pattern, minlength: this.minlength, maxlength: this.maxlength, class: `input input--${this.size}${this.invalid ? ' input--invalid' : ''}`, "aria-label": this.ariaLabel, "aria-describedby": this.ariaDescribedby, "aria-invalid": this.invalid ? 'true' : null, "aria-disabled": this.disabled ? 'true' : null, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur }));
+        return (h("input", { key: 'b4a2a42f3542f66ff9b5ceb478f73dc0786ebe17', type: this.type, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, name: this.name, autocomplete: this.autocomplete, min: this.min, max: this.max, step: this.step, pattern: this.pattern, minlength: this.minlength, maxlength: this.maxlength, class: `input input--${this.size}${this.invalid ? ' input--invalid' : ''}`, "aria-label": this.ariaLabel, "aria-describedby": this.ariaDescribedby, "aria-invalid": this.invalid ? 'true' : null, "aria-disabled": this.disabled ? 'true' : null, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur }));
     }
     static get is() { return "seki-input"; }
     static get encapsulation() { return "shadow"; }