@iyulab/components 0.2.2 → 0.3.0

package/dist/assets/styles/light.css

@@ -1,130 +1,130 @@
-:root {
-  color-scheme: light;
-
-  /* Neutral Colors */
-  --u-neutral-0:     #FFFFFF;
-  --u-neutral-50:    #FAFAFA;
-  --u-neutral-100:   #F5F5F5;
-  --u-neutral-200:   #EEEEEE;
-  --u-neutral-300:   #E0E0E0;
-  --u-neutral-400:   #BDBDBD;
-  --u-neutral-500:   #9E9E9E;
-  --u-neutral-600:   #757575;
-  --u-neutral-700:   #616161;
-  --u-neutral-800:   #424242;
-  --u-neutral-900:   #212121;
-  --u-neutral-1000:  #000000;
-
-  /* Blue Colors */
-  --u-blue-0:        #E3F2FD;
-  --u-blue-100:      #BBDEFB;
-  --u-blue-200:      #90CAF9;
-  --u-blue-300:      #64B5F6;
-  --u-blue-400:      #42A5F5;
-  --u-blue-500:      #2196F3;
-  --u-blue-600:      #1E88E5;
-  --u-blue-700:      #1976D2;
-  --u-blue-800:      #1565C0;
-  --u-blue-900:      #0D47A1;
-  --u-blue-1000:     #062A5E;
-
-  /* Green Colors */
-  --u-green-0:       #E8F5E9;
-  --u-green-100:     #C8E6C9;
-  --u-green-200:     #A5D6A7;
-  --u-green-300:     #81C784;
-  --u-green-400:     #66BB6A;
-  --u-green-500:     #4CAF50;
-  --u-green-600:     #43A047;
-  --u-green-700:     #388E3C;
-  --u-green-800:     #2E7D32;
-  --u-green-900:     #1B5E20;
-  --u-green-1000:    #0F3A12;
-
-  /* Yellow Colors */
-  --u-yellow-0:      #FFFDE7;
-  --u-yellow-100:    #FFF9C4;
-  --u-yellow-200:    #FFF59D;
-  --u-yellow-300:    #FFF176;
-  --u-yellow-400:    #FFEE58;
-  --u-yellow-500:    #FFEB3B;
-  --u-yellow-600:    #FDD835;
-  --u-yellow-700:    #FBC02D;
-  --u-yellow-800:    #F9A825;
-  --u-yellow-900:    #F57F17;
-  --u-yellow-1000:   #8A4A00;
-
-  /* Red Colors */
-  --u-red-0:         #FFEBEE;
-  --u-red-100:       #FFCDD2;
-  --u-red-200:       #EF9A9A;
-  --u-red-300:       #E57373;
-  --u-red-400:       #EF5350;
-  --u-red-500:       #F44336;
-  --u-red-600:       #E53935;
-  --u-red-700:       #D32F2F;
-  --u-red-800:       #C62828;
-  --u-red-900:       #B71C1C;
-  --u-red-1000:      #6B0F0F;
-
-  /* text Colors */
-  --u-txt-color:             var(--u-neutral-900);
-  --u-txt-color-inverse:     var(--u-neutral-0);
-  --u-txt-color-hover:       var(--u-blue-600);
-  --u-txt-color-active:      var(--u-blue-600);
-  --u-txt-color-disabled:    var(--u-neutral-400);
-  --u-txt-color-weak:        var(--u-neutral-700);
-  --u-txt-color-strong:      var(--u-neutral-1000);
-
-  --u-link-txt-color:        var(--u-blue-700);
-  --u-tooltip-txt-color:     var(--u-neutral-0);
-
-  /* Icon Colors */
-  --u-icon-color:            var(--u-neutral-700);
-  --u-icon-color-inverse:    var(--u-neutral-0);
-  --u-icon-color-hover:      var(--u-blue-600);
-  --u-icon-color-active:     var(--u-blue-600);
-  --u-icon-color-disabled:   var(--u-neutral-400);
-
-  /* border Colors */
-  --u-border-color:          var(--u-neutral-300);
-  --u-border-color-weak:     var(--u-neutral-200);
-  --u-border-color-strong:   var(--u-neutral-400);
-
-  --u-input-border-color:         var(--u-neutral-300);
-  --u-input-border-color-hover:   var(--u-neutral-400);
-  --u-input-border-color-focus:   var(--u-blue-600);
-  --u-input-border-color-invalid: var(--u-red-600);
-
-  /* background Colors */
-  --u-bg-color:              var(--u-neutral-0);
-  --u-bg-color-inverse:      var(--u-neutral-900);
-  --u-bg-color-hover:        var(--u-neutral-100);
-  --u-bg-color-active:       var(--u-neutral-200);
-  --u-bg-color-disabled:     var(--u-neutral-50);
- 
-  --u-input-bg-color:        var(--u-neutral-0);
-  --u-panel-bg-color:        var(--u-neutral-0);
-  --u-overlay-bg-color:      rgba(0, 0, 0, 0.5);
-  --u-tooltip-bg-color:      rgba(0, 0, 0, 0.75);
-
-  /* Shadow Colors */
-  --u-shadow-color-weaker:   rgba(0, 0, 0, 0.04);
-  --u-shadow-color-weak:     rgba(0, 0, 0, 0.08);
-  --u-shadow-color-normal:   rgba(0, 0, 0, 0.12);
-  --u-shadow-color-strong:   rgba(0, 0, 0, 0.16);
-  --u-shadow-color-stronger: rgba(0, 0, 0, 0.24);
-
-  /* Scrollbar Colors */
-  --u-scrollbar-color:       var(--u-neutral-400);
-  --u-scrollbar-color-hover: var(--u-neutral-500);
-  --u-scrollbar-track-color: transparent;
-
-  /* Font Styles */
-  --u-font-base:    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
-  --u-font-mono:    ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Monaco, 'Courier New', monospace;
-  --u-font-serif:   'Georgia', 'Times New Roman', Times, serif;
-  --u-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
-  --u-font-modern:  'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-  --u-font-rounded: 'Nunito', 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+:root {
+  color-scheme: light;
+
+  /* Neutral Colors */
+  --u-neutral-0:     #FFFFFF;
+  --u-neutral-50:    #FAFAFA;
+  --u-neutral-100:   #F5F5F5;
+  --u-neutral-200:   #EEEEEE;
+  --u-neutral-300:   #E0E0E0;
+  --u-neutral-400:   #BDBDBD;
+  --u-neutral-500:   #9E9E9E;
+  --u-neutral-600:   #757575;
+  --u-neutral-700:   #616161;
+  --u-neutral-800:   #424242;
+  --u-neutral-900:   #212121;
+  --u-neutral-1000:  #000000;
+
+  /* Blue Colors */
+  --u-blue-0:        #E3F2FD;
+  --u-blue-100:      #BBDEFB;
+  --u-blue-200:      #90CAF9;
+  --u-blue-300:      #64B5F6;
+  --u-blue-400:      #42A5F5;
+  --u-blue-500:      #2196F3;
+  --u-blue-600:      #1E88E5;
+  --u-blue-700:      #1976D2;
+  --u-blue-800:      #1565C0;
+  --u-blue-900:      #0D47A1;
+  --u-blue-1000:     #062A5E;
+
+  /* Green Colors */
+  --u-green-0:       #E8F5E9;
+  --u-green-100:     #C8E6C9;
+  --u-green-200:     #A5D6A7;
+  --u-green-300:     #81C784;
+  --u-green-400:     #66BB6A;
+  --u-green-500:     #4CAF50;
+  --u-green-600:     #43A047;
+  --u-green-700:     #388E3C;
+  --u-green-800:     #2E7D32;
+  --u-green-900:     #1B5E20;
+  --u-green-1000:    #0F3A12;
+
+  /* Yellow Colors */
+  --u-yellow-0:      #FFFDE7;
+  --u-yellow-100:    #FFF9C4;
+  --u-yellow-200:    #FFF59D;
+  --u-yellow-300:    #FFF176;
+  --u-yellow-400:    #FFEE58;
+  --u-yellow-500:    #FFEB3B;
+  --u-yellow-600:    #FDD835;
+  --u-yellow-700:    #FBC02D;
+  --u-yellow-800:    #F9A825;
+  --u-yellow-900:    #F57F17;
+  --u-yellow-1000:   #8A4A00;
+
+  /* Red Colors */
+  --u-red-0:         #FFEBEE;
+  --u-red-100:       #FFCDD2;
+  --u-red-200:       #EF9A9A;
+  --u-red-300:       #E57373;
+  --u-red-400:       #EF5350;
+  --u-red-500:       #F44336;
+  --u-red-600:       #E53935;
+  --u-red-700:       #D32F2F;
+  --u-red-800:       #C62828;
+  --u-red-900:       #B71C1C;
+  --u-red-1000:      #6B0F0F;
+
+  /* text Colors */
+  --u-txt-color:             var(--u-neutral-900);
+  --u-txt-color-inverse:     var(--u-neutral-0);
+  --u-txt-color-hover:       var(--u-blue-600);
+  --u-txt-color-active:      var(--u-blue-600);
+  --u-txt-color-disabled:    var(--u-neutral-400);
+  --u-txt-color-weak:        var(--u-neutral-700);
+  --u-txt-color-strong:      var(--u-neutral-1000);
+
+  --u-link-txt-color:        var(--u-blue-700);
+  --u-tooltip-txt-color:     var(--u-neutral-0);
+
+  /* Icon Colors */
+  --u-icon-color:            var(--u-neutral-700);
+  --u-icon-color-inverse:    var(--u-neutral-0);
+  --u-icon-color-hover:      var(--u-blue-600);
+  --u-icon-color-active:     var(--u-blue-600);
+  --u-icon-color-disabled:   var(--u-neutral-400);
+
+  /* border Colors */
+  --u-border-color:          var(--u-neutral-300);
+  --u-border-color-weak:     var(--u-neutral-200);
+  --u-border-color-strong:   var(--u-neutral-400);
+
+  --u-input-border-color:         var(--u-neutral-300);
+  --u-input-border-color-hover:   var(--u-neutral-400);
+  --u-input-border-color-focus:   var(--u-blue-600);
+  --u-input-border-color-invalid: var(--u-red-600);
+
+  /* background Colors */
+  --u-bg-color:              var(--u-neutral-0);
+  --u-bg-color-inverse:      var(--u-neutral-900);
+  --u-bg-color-hover:        var(--u-neutral-100);
+  --u-bg-color-active:       var(--u-neutral-200);
+  --u-bg-color-disabled:     var(--u-neutral-50);
+ 
+  --u-input-bg-color:        var(--u-neutral-0);
+  --u-panel-bg-color:        var(--u-neutral-0);
+  --u-overlay-bg-color:      rgba(0, 0, 0, 0.5);
+  --u-tooltip-bg-color:      rgba(0, 0, 0, 0.75);
+
+  /* Shadow Colors */
+  --u-shadow-color-weaker:   rgba(0, 0, 0, 0.04);
+  --u-shadow-color-weak:     rgba(0, 0, 0, 0.08);
+  --u-shadow-color-normal:   rgba(0, 0, 0, 0.12);
+  --u-shadow-color-strong:   rgba(0, 0, 0, 0.16);
+  --u-shadow-color-stronger: rgba(0, 0, 0, 0.24);
+
+  /* Scrollbar Colors */
+  --u-scrollbar-color:       var(--u-neutral-400);
+  --u-scrollbar-color-hover: var(--u-neutral-500);
+  --u-scrollbar-track-color: transparent;
+
+  /* Font Styles */
+  --u-font-base:    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  --u-font-mono:    ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Monaco, 'Courier New', monospace;
+  --u-font-serif:   'Georgia', 'Times New Roman', Times, serif;
+  --u-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
+  --u-font-modern:  'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --u-font-rounded: 'Nunito', 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
 }

package/dist/assets/styles/light.css.js

@@ -1,3 +1,3 @@
-const light = ":root {\r\n  color-scheme: light;\r\n\r\n  /* Neutral Colors */\r\n  --u-neutral-0:     #FFFFFF;\r\n  --u-neutral-50:    #FAFAFA;\r\n  --u-neutral-100:   #F5F5F5;\r\n  --u-neutral-200:   #EEEEEE;\r\n  --u-neutral-300:   #E0E0E0;\r\n  --u-neutral-400:   #BDBDBD;\r\n  --u-neutral-500:   #9E9E9E;\r\n  --u-neutral-600:   #757575;\r\n  --u-neutral-700:   #616161;\r\n  --u-neutral-800:   #424242;\r\n  --u-neutral-900:   #212121;\r\n  --u-neutral-1000:  #000000;\r\n\r\n  /* Blue Colors */\r\n  --u-blue-0:        #E3F2FD;\r\n  --u-blue-100:      #BBDEFB;\r\n  --u-blue-200:      #90CAF9;\r\n  --u-blue-300:      #64B5F6;\r\n  --u-blue-400:      #42A5F5;\r\n  --u-blue-500:      #2196F3;\r\n  --u-blue-600:      #1E88E5;\r\n  --u-blue-700:      #1976D2;\r\n  --u-blue-800:      #1565C0;\r\n  --u-blue-900:      #0D47A1;\r\n  --u-blue-1000:     #062A5E;\r\n\r\n  /* Green Colors */\r\n  --u-green-0:       #E8F5E9;\r\n  --u-green-100:     #C8E6C9;\r\n  --u-green-200:     #A5D6A7;\r\n  --u-green-300:     #81C784;\r\n  --u-green-400:     #66BB6A;\r\n  --u-green-500:     #4CAF50;\r\n  --u-green-600:     #43A047;\r\n  --u-green-700:     #388E3C;\r\n  --u-green-800:     #2E7D32;\r\n  --u-green-900:     #1B5E20;\r\n  --u-green-1000:    #0F3A12;\r\n\r\n  /* Yellow Colors */\r\n  --u-yellow-0:      #FFFDE7;\r\n  --u-yellow-100:    #FFF9C4;\r\n  --u-yellow-200:    #FFF59D;\r\n  --u-yellow-300:    #FFF176;\r\n  --u-yellow-400:    #FFEE58;\r\n  --u-yellow-500:    #FFEB3B;\r\n  --u-yellow-600:    #FDD835;\r\n  --u-yellow-700:    #FBC02D;\r\n  --u-yellow-800:    #F9A825;\r\n  --u-yellow-900:    #F57F17;\r\n  --u-yellow-1000:   #8A4A00;\r\n\r\n  /* Red Colors */\r\n  --u-red-0:         #FFEBEE;\r\n  --u-red-100:       #FFCDD2;\r\n  --u-red-200:       #EF9A9A;\r\n  --u-red-300:       #E57373;\r\n  --u-red-400:       #EF5350;\r\n  --u-red-500:       #F44336;\r\n  --u-red-600:       #E53935;\r\n  --u-red-700:       #D32F2F;\r\n  --u-red-800:       #C62828;\r\n  --u-red-900:       #B71C1C;\r\n  --u-red-1000:      #6B0F0F;\r\n\r\n  /* text Colors */\r\n  --u-txt-color:             var(--u-neutral-900);\r\n  --u-txt-color-inverse:     var(--u-neutral-0);\r\n  --u-txt-color-hover:       var(--u-blue-600);\r\n  --u-txt-color-active:      var(--u-blue-600);\r\n  --u-txt-color-disabled:    var(--u-neutral-400);\r\n  --u-txt-color-weak:        var(--u-neutral-700);\r\n  --u-txt-color-strong:      var(--u-neutral-1000);\r\n\r\n  --u-link-txt-color:        var(--u-blue-700);\r\n  --u-tooltip-txt-color:     var(--u-neutral-0);\r\n\r\n  /* Icon Colors */\r\n  --u-icon-color:            var(--u-neutral-700);\r\n  --u-icon-color-inverse:    var(--u-neutral-0);\r\n  --u-icon-color-hover:      var(--u-blue-600);\r\n  --u-icon-color-active:     var(--u-blue-600);\r\n  --u-icon-color-disabled:   var(--u-neutral-400);\r\n\r\n  /* border Colors */\r\n  --u-border-color:          var(--u-neutral-300);\r\n  --u-border-color-weak:     var(--u-neutral-200);\r\n  --u-border-color-strong:   var(--u-neutral-400);\r\n\r\n  --u-input-border-color:         var(--u-neutral-300);\r\n  --u-input-border-color-hover:   var(--u-neutral-400);\r\n  --u-input-border-color-focus:   var(--u-blue-600);\r\n  --u-input-border-color-invalid: var(--u-red-600);\r\n\r\n  /* background Colors */\r\n  --u-bg-color:              var(--u-neutral-0);\r\n  --u-bg-color-inverse:      var(--u-neutral-900);\r\n  --u-bg-color-hover:        var(--u-neutral-100);\r\n  --u-bg-color-active:       var(--u-neutral-200);\r\n  --u-bg-color-disabled:     var(--u-neutral-50);\r\n \r\n  --u-input-bg-color:        var(--u-neutral-0);\r\n  --u-panel-bg-color:        var(--u-neutral-0);\r\n  --u-overlay-bg-color:      rgba(0, 0, 0, 0.5);\r\n  --u-tooltip-bg-color:      rgba(0, 0, 0, 0.75);\r\n\r\n  /* Shadow Colors */\r\n  --u-shadow-color-weaker:   rgba(0, 0, 0, 0.04);\r\n  --u-shadow-color-weak:     rgba(0, 0, 0, 0.08);\r\n  --u-shadow-color-normal:   rgba(0, 0, 0, 0.12);\r\n  --u-shadow-color-strong:   rgba(0, 0, 0, 0.16);\r\n  --u-shadow-color-stronger: rgba(0, 0, 0, 0.24);\r\n\r\n  /* Scrollbar Colors */\r\n  --u-scrollbar-color:       var(--u-neutral-400);\r\n  --u-scrollbar-color-hover: var(--u-neutral-500);\r\n  --u-scrollbar-track-color: transparent;\r\n\r\n  /* Font Styles */\r\n  --u-font-base:    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';\r\n  --u-font-mono:    ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Monaco, 'Courier New', monospace;\r\n  --u-font-serif:   'Georgia', 'Times New Roman', Times, serif;\r\n  --u-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;\r\n  --u-font-modern:  'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\r\n  --u-font-rounded: 'Nunito', 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\r\n}";
+const light = ":root {\n  color-scheme: light;\n\n  /* Neutral Colors */\n  --u-neutral-0:     #FFFFFF;\n  --u-neutral-50:    #FAFAFA;\n  --u-neutral-100:   #F5F5F5;\n  --u-neutral-200:   #EEEEEE;\n  --u-neutral-300:   #E0E0E0;\n  --u-neutral-400:   #BDBDBD;\n  --u-neutral-500:   #9E9E9E;\n  --u-neutral-600:   #757575;\n  --u-neutral-700:   #616161;\n  --u-neutral-800:   #424242;\n  --u-neutral-900:   #212121;\n  --u-neutral-1000:  #000000;\n\n  /* Blue Colors */\n  --u-blue-0:        #E3F2FD;\n  --u-blue-100:      #BBDEFB;\n  --u-blue-200:      #90CAF9;\n  --u-blue-300:      #64B5F6;\n  --u-blue-400:      #42A5F5;\n  --u-blue-500:      #2196F3;\n  --u-blue-600:      #1E88E5;\n  --u-blue-700:      #1976D2;\n  --u-blue-800:      #1565C0;\n  --u-blue-900:      #0D47A1;\n  --u-blue-1000:     #062A5E;\n\n  /* Green Colors */\n  --u-green-0:       #E8F5E9;\n  --u-green-100:     #C8E6C9;\n  --u-green-200:     #A5D6A7;\n  --u-green-300:     #81C784;\n  --u-green-400:     #66BB6A;\n  --u-green-500:     #4CAF50;\n  --u-green-600:     #43A047;\n  --u-green-700:     #388E3C;\n  --u-green-800:     #2E7D32;\n  --u-green-900:     #1B5E20;\n  --u-green-1000:    #0F3A12;\n\n  /* Yellow Colors */\n  --u-yellow-0:      #FFFDE7;\n  --u-yellow-100:    #FFF9C4;\n  --u-yellow-200:    #FFF59D;\n  --u-yellow-300:    #FFF176;\n  --u-yellow-400:    #FFEE58;\n  --u-yellow-500:    #FFEB3B;\n  --u-yellow-600:    #FDD835;\n  --u-yellow-700:    #FBC02D;\n  --u-yellow-800:    #F9A825;\n  --u-yellow-900:    #F57F17;\n  --u-yellow-1000:   #8A4A00;\n\n  /* Red Colors */\n  --u-red-0:         #FFEBEE;\n  --u-red-100:       #FFCDD2;\n  --u-red-200:       #EF9A9A;\n  --u-red-300:       #E57373;\n  --u-red-400:       #EF5350;\n  --u-red-500:       #F44336;\n  --u-red-600:       #E53935;\n  --u-red-700:       #D32F2F;\n  --u-red-800:       #C62828;\n  --u-red-900:       #B71C1C;\n  --u-red-1000:      #6B0F0F;\n\n  /* text Colors */\n  --u-txt-color:             var(--u-neutral-900);\n  --u-txt-color-inverse:     var(--u-neutral-0);\n  --u-txt-color-hover:       var(--u-blue-600);\n  --u-txt-color-active:      var(--u-blue-600);\n  --u-txt-color-disabled:    var(--u-neutral-400);\n  --u-txt-color-weak:        var(--u-neutral-700);\n  --u-txt-color-strong:      var(--u-neutral-1000);\n\n  --u-link-txt-color:        var(--u-blue-700);\n  --u-tooltip-txt-color:     var(--u-neutral-0);\n\n  /* Icon Colors */\n  --u-icon-color:            var(--u-neutral-700);\n  --u-icon-color-inverse:    var(--u-neutral-0);\n  --u-icon-color-hover:      var(--u-blue-600);\n  --u-icon-color-active:     var(--u-blue-600);\n  --u-icon-color-disabled:   var(--u-neutral-400);\n\n  /* border Colors */\n  --u-border-color:          var(--u-neutral-300);\n  --u-border-color-weak:     var(--u-neutral-200);\n  --u-border-color-strong:   var(--u-neutral-400);\n\n  --u-input-border-color:         var(--u-neutral-300);\n  --u-input-border-color-hover:   var(--u-neutral-400);\n  --u-input-border-color-focus:   var(--u-blue-600);\n  --u-input-border-color-invalid: var(--u-red-600);\n\n  /* background Colors */\n  --u-bg-color:              var(--u-neutral-0);\n  --u-bg-color-inverse:      var(--u-neutral-900);\n  --u-bg-color-hover:        var(--u-neutral-100);\n  --u-bg-color-active:       var(--u-neutral-200);\n  --u-bg-color-disabled:     var(--u-neutral-50);\n \n  --u-input-bg-color:        var(--u-neutral-0);\n  --u-panel-bg-color:        var(--u-neutral-0);\n  --u-overlay-bg-color:      rgba(0, 0, 0, 0.5);\n  --u-tooltip-bg-color:      rgba(0, 0, 0, 0.75);\n\n  /* Shadow Colors */\n  --u-shadow-color-weaker:   rgba(0, 0, 0, 0.04);\n  --u-shadow-color-weak:     rgba(0, 0, 0, 0.08);\n  --u-shadow-color-normal:   rgba(0, 0, 0, 0.12);\n  --u-shadow-color-strong:   rgba(0, 0, 0, 0.16);\n  --u-shadow-color-stronger: rgba(0, 0, 0, 0.24);\n\n  /* Scrollbar Colors */\n  --u-scrollbar-color:       var(--u-neutral-400);\n  --u-scrollbar-color-hover: var(--u-neutral-500);\n  --u-scrollbar-track-color: transparent;\n\n  /* Font Styles */\n  --u-font-base:    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';\n  --u-font-mono:    ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Monaco, 'Courier New', monospace;\n  --u-font-serif:   'Georgia', 'Times New Roman', Times, serif;\n  --u-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;\n  --u-font-modern:  'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n  --u-font-rounded: 'Nunito', 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n}";
 
 export { light as default };

package/dist/components/card/UCard.component.d.ts

@@ -0,0 +1,21 @@
+import { BaseElement } from '../BaseElement.js';
+/**
+ * Card 컴포넌트는 콘텐츠를 카드 형태로 표시합니다.
+ * @slot - 카드의 메인 콘텐츠를 삽입합니다.
+ * @slot header - 카드 상단의 헤더 영역에 표시할 콘텐츠를 삽입합니다.
+ * @slot footer - 카드 하단의 푸터 영역에 표시할 콘텐츠를 삽입합니다.
+ * @slot media - 카드의 미디어 영역에 표시할 이미지, 비디오 등을 삽입합니다.
+ */
+export declare class UCard extends BaseElement {
+    static styles: import('lit').CSSResultGroup[];
+    /** 카드의 그림자 효과를 제거할지 여부를 설정합니다. */
+    shadowless: boolean;
+    /** 카드의 경계선을 제거할지 여부를 설정합니다. */
+    borderless: boolean;
+    /** 카드에 호버 효과를 적용할지 여부를 설정합니다. */
+    hoverable: boolean;
+    /** 카드의 레이아웃 방향을 설정합니다. 'vertical'(세로) 또는 'horizontal'(가로) */
+    orientation: 'vertical' | 'horizontal';
+    render(): import('lit-html').TemplateResult<1>;
+    private handleSlotChange;
+}

package/dist/components/card/UCard.component.js

@@ -0,0 +1,66 @@
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { BaseElement } from '../BaseElement.js';
+import { styles } from './UCard.styles.js';
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+class UCard extends BaseElement {
+  constructor() {
+    super(...arguments);
+    this.shadowless = false;
+    this.borderless = false;
+    this.hoverable = false;
+    this.orientation = "vertical";
+  }
+  static {
+    this.styles = [super.styles, styles];
+  }
+  render() {
+    return html`
+      <div part="media" class="media">
+        <slot name="media" @slotchange=${this.handleSlotChange}></slot>
+      </div>
+      <div class="content">
+        <header part="header" class="header">
+          <slot name="header" @slotchange=${this.handleSlotChange}></slot>
+        </header>
+        <div part="body" class="body">
+          <slot @slotchange=${this.handleSlotChange}></slot>
+        </div>
+        <footer part="footer" class="footer">
+          <slot name="footer" @slotchange=${this.handleSlotChange}></slot>
+        </footer>
+      </div>
+    `;
+  }
+  handleSlotChange(e) {
+    const slot = e.target;
+    const container = slot.parentElement;
+    const hasContent = slot.assignedNodes({ flatten: true }).length > 0;
+    if (container) {
+      container.classList.toggle("has-content", hasContent);
+    }
+  }
+}
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UCard.prototype, "shadowless");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UCard.prototype, "borderless");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UCard.prototype, "hoverable");
+__decorateClass([
+  property({ type: String, reflect: true })
+], UCard.prototype, "orientation");
+
+export { UCard };

package/dist/components/card/UCard.d.ts

@@ -0,0 +1,7 @@
+import { UCard } from './UCard.component.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        "u-card": UCard;
+    }
+}
+export { UCard };

package/dist/components/card/UCard.js

@@ -0,0 +1,5 @@
+import { UCard } from './UCard.component.js';
+
+UCard.define("u-card");
+
+export { UCard };

package/dist/components/card/UCard.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import('lit').CSSResult;

package/dist/components/card/UCard.styles.js

@@ -0,0 +1,76 @@
+import { css } from 'lit';
+
+const styles = css`
+  :host {
+    display: flex;
+    flex-direction: column;
+    background-color: var(--u-panel-bg-color);
+    border-radius: 8px;
+    overflow: hidden;
+    border: 1px solid var(--u-border-color);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  }
+  :host([borderless]) {
+    border: none;
+  }
+  :host([shadowless]) {
+    box-shadow: none;
+  }
+  :host([hoverable]) {
+    cursor: pointer;
+    transition: all 0.2s ease;
+  }
+  :host([hoverable]:hover) {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  }
+  :host([orientation="horizontal"]) {
+    flex-direction: row;
+  }
+
+  .media {
+    display: none;
+    flex-shrink: 0;
+    overflow: hidden;
+  }
+  .media.has-content {
+    display: block;
+  }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-width: 0;
+  }
+
+  .header {
+    display: none;
+    padding: 16px;
+    border-bottom: 1px solid var(--u-border-color);
+  }
+  .header.has-content {
+    display: block;
+  }
+
+  .body {
+    display: none;
+    flex: 1;
+    padding: 16px;
+  }
+  .body.has-content {
+    display: block;
+  }
+
+  .footer {
+    display: none;
+    padding: 16px;
+    border-top: 1px solid var(--u-border-color);
+  }
+  .footer.has-content {
+    display: block;
+  }
+
+`;
+
+export { styles };

package/dist/components/carousel/UCarousel.component.d.ts

@@ -0,0 +1,67 @@
+import { PropertyValues } from 'lit';
+import { BaseElement } from '../BaseElement.js';
+/**
+ * Carousel 컴포넌트는 여러 슬라이드를 회전하며 표시합니다.
+ *
+ * @slot - 슬라이드로 표시할 콘텐츠. 각 자식 요소가 하나의 슬라이드.
+ * @event u-change - 슬라이드 변경 시. detail: { currentIndex: number }
+ *
+ * @csspart slides - 슬라이드 컨테이너 (aspect-ratio 등 외부 스타일링)
+ * @csspart prev-button - 이전 버튼
+ * @csspart next-button - 다음 버튼
+ * @csspart indicator - 인디케이터 컨테이너
+ * @csspart dot - 인디케이터 도트
+ */
+export declare class UCarousel extends BaseElement {
+    static styles: import('lit').CSSResultGroup[];
+    static dependencies: Record<string, typeof BaseElement>;
+    /** 현재 활성 슬라이드 인덱스 */
+    currentIndex: number;
+    /** 자동 재생 활성화 */
+    autoplay: boolean;
+    /** 자동 재생 간격 (ms) */
+    autoplayInterval: number;
+    /** 이전/다음 네비게이션 버튼 표시 */
+    navigation: boolean;
+    /** 페이지 인디케이터 표시 */
+    pagination: boolean;
+    /** 처음/끝에서 순환 이동 */
+    loop: boolean;
+    /** 드래그로 슬라이드 전환 */
+    draggable: boolean;
+    /** 한 화면에 표시할 슬라이드 수 */
+    slidesPerView: number;
+    /** 한 번에 이동할 슬라이드 수 */
+    slidesPerMove: number;
+    /** 슬라이드 간 간격 (px) */
+    gap: number;
+    private _slideCount;
+    private _isDragging;
+    private _dragOffset;
+    private _autoplayTimer?;
+    private _dragStartX;
+    private _dragStartTime;
+    private get _perView();
+    private get _perMove();
+    private get _maxIndex();
+    private get _pageCount();
+    private get _currentPage();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected willUpdate(changedProperties: PropertyValues): void;
+    protected updated(changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+    /** 이전 슬라이드로 이동 */
+    prev(): void;
+    /** 다음 슬라이드로 이동 */
+    next(): void;
+    /** 지정한 인덱스로 이동 */
+    goTo(index: number): void;
+    private handleSlotChange;
+    private startAutoplay;
+    private stopAutoplay;
+    private handleDragStart;
+    private handlePointerDown;
+    private handlePointerMove;
+    private handlePointerUp;
+}