@sekiui/elements 0.0.61 → 0.0.64

package/dist/collection/components/sidebar/seki-sidebar-trigger.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;
+  }
 }
 
 
@@ -482,7 +781,7 @@
   border-radius: var(--seki-radius-md, 0.375rem);
   color: var(--sidebar-foreground);
   cursor: pointer;
-  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
+  transition: background-color 200ms ease-in-out, color 200ms ease-in-out;
 }
 
 .sidebar-trigger:hover:not(:disabled) {

package/dist/collection/components/sidebar/seki-sidebar-trigger.js

@@ -30,7 +30,7 @@ export class SekiSidebarTrigger {
         this._isMobile = event.detail.isMobile;
     }
     render() {
-        return (h(Host, { key: '7751e2bcd4f7abd08a23a8e6ed1d28c5afa52236' }, h("button", { key: '12393157e2b598cc27e0a24885245ee27a3c6131', class: "sidebar-trigger", type: "button", disabled: this.disabled, onClick: this.handleClick, "aria-label": this._isOpen ? 'Close sidebar' : 'Open sidebar', "aria-expanded": this._isOpen ? 'true' : 'false', "data-state": this._isOpen ? 'open' : 'closed' }, h("slot", { key: '224abf5dda64001fa6b88c9261ebe67f45a5677d' }, h("svg", { key: 'f1057ac8f1c87eef4d96dbfb6c60a437dac1a16c', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("rect", { key: '5b988659b789aaeae2c3f518bad01506bf9c5a8d', width: "18", height: "18", x: "3", y: "3", rx: "2" }), h("path", { key: '1b4a03f0f9a67b8050d1e1721d9751b1e7e287aa', d: "M9 3v18" }))), h("span", { key: '12a56721a022b47997b9db375a6bfb7ddaab8c92', class: "sr-only" }, this._isOpen ? 'Close sidebar' : 'Open sidebar'))));
+        return (h(Host, { key: '2f693d10be61688032b74b526854af8dc81fdd43' }, h("button", { key: '643840bdc8cc2a059b99737136eecc51b9a5221a', class: "sidebar-trigger", type: "button", disabled: this.disabled, onClick: this.handleClick, "aria-label": this._isOpen ? 'Close sidebar' : 'Open sidebar', "aria-expanded": this._isOpen ? 'true' : 'false', "data-state": this._isOpen ? 'open' : 'closed' }, h("slot", { key: 'f833fd9e16545e85af783b390539a43c6ad813fe' }, h("svg", { key: 'ff9f3ee7f7d7105bfac2796e259b8f732a38c563', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("rect", { key: '6a1765c30f82f0463439ce3090b67cebd159128f', width: "18", height: "18", x: "3", y: "3", rx: "2" }), h("path", { key: '551da819f857e85861a6fbfab0af9f2ba9c104e3', d: "M9 3v18" }))), h("span", { key: '5f524487ccf0d64dae65cc86671ef39507322553', class: "sr-only" }, this._isOpen ? 'Close sidebar' : 'Open sidebar'))));
     }
     static get is() { return "seki-sidebar-trigger"; }
     static get encapsulation() { return "shadow"; }