@iyulab/components 0.1.11 → 0.2.1

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 {\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}";
+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}";
 
 export { light as default };

package/dist/components/FloatingElement.d.ts

@@ -18,9 +18,13 @@ export declare class FloatingElement extends BaseElement {
     private rafId;
     private cleanup;
     /**
-     * 연결될 대상 엘리먼트 입니다. 지정하지 않으면 부모 엘리먼트를 사용합니다.
+     * 엘리먼트가 떠 있는 동안의 대상 엘리먼트 입니다.
      */
-    anchor?: HTMLElement;
+    target?: HTMLElement | VirtualElement;
+    /**
+     * 연결될 대상 엘리먼트 입니다. 지정하지 않으면 부모 엘리먼트가 포함됩니다.
+     */
+    anchors?: HTMLElement[];
     /**
      * 앵커 엘리먼트를 찾기 위한 CSS 선택자입니다. querySelector를 사용하여 DOM에서 대상을 검색합니다.
      *
@@ -72,13 +76,17 @@ export declare class FloatingElement extends BaseElement {
     disconnectedCallback(): void;
     protected willUpdate(changedProperties: PropertyValues): void;
     protected updated(changedProperties: PropertyValues): void;
+    /**
+     * for 속성에 따라 element를 기준으로 앵커 엘리먼트를 탐색하여 anchors로 설정합니다.
+     */
+    scan(element: Element): void;
     /**
      * 현재 엘리먼트를 표시합니다.
      *
-     * @param anchor - 위치 계산에 사용할 앵커 엘리먼트입니다. 지정하지 않으면 this.anchor 가 사용됩니다.
+     * @param target - 위치 계산에 사용할 타겟 엘리먼트입니다.
      * @param auto - 표시 후 자동 위치 업데이트 활성화 여부입니다. 기본값은 true 입니다.
      */
-    show(anchor?: Element | VirtualElement, auto?: boolean): Promise<void>;
+    show(target: Element | VirtualElement, auto?: boolean): Promise<void>;
     /**
      * 현재 엘리먼트를 숨깁니다.
      */
@@ -86,7 +94,7 @@ export declare class FloatingElement extends BaseElement {
     /**
      * `floating-ui` 를 이용하여 위치를 계산하고 style 을 적용합니다.
      *
-     * @param target - 위치 계산에 사용할 앵커 엘리먼트입니다.
+     * @param target - 위치 계산에 사용할 타겟 엘리먼트입니다.
      */
     protected reposition(target: Element | VirtualElement): Promise<void>;
     /** 표시 상태 변경 이벤트를 발생시킵니다. */

package/dist/components/FloatingElement.js

@@ -1,6 +1,6 @@
 import { state, property } from 'lit/decorators.js';
 import { autoUpdate, computePosition, offset, shift, flip, autoPlacement } from '@floating-ui/dom';
-import { getParentElement, querySelectorWithin } from '../internals/node-helpers.js';
+import { getParentElement, querySelectorAllWithin } from '../utilities/elements.js';
 import { BaseElement } from './BaseElement.js';
 import { styles } from './FloatingElement.styles.js';
 
@@ -36,7 +36,10 @@ class FloatingElement extends BaseElement {
   }
   connectedCallback() {
     super.connectedCallback();
-    this.anchor ||= getParentElement(this);
+    if (!this.anchors || this.anchors.length === 0) {
+      const parent = getParentElement(this);
+      this.anchors = parent ? [parent] : [];
+    }
   }
   disconnectedCallback() {
     if (this.rafId !== null) cancelAnimationFrame(this.rafId);
@@ -48,8 +51,7 @@ class FloatingElement extends BaseElement {
   willUpdate(changedProperties) {
     super.willUpdate(changedProperties);
     if (changedProperties.has("for")) {
-      const founded = this.for ? querySelectorWithin(this, this.for) : void 0;
-      this.anchor = founded || void 0;
+      this.scan(this);
     }
   }
   updated(changedProperties) {
@@ -60,23 +62,34 @@ class FloatingElement extends BaseElement {
       this.updateVisibleState(this.visible);
     }
   }
+  /**
+   * for 속성에 따라 element를 기준으로 앵커 엘리먼트를 탐색하여 anchors로 설정합니다.
+   */
+  scan(element) {
+    if (this.for) {
+      const anchors = querySelectorAllWithin(element, this.for);
+      this.anchors = Array.from(anchors);
+    } else {
+      const parent = getParentElement(this);
+      this.anchors = parent ? [parent] : [];
+    }
+  }
   /** 
    * 현재 엘리먼트를 표시합니다.
    * 
-   * @param anchor - 위치 계산에 사용할 앵커 엘리먼트입니다. 지정하지 않으면 this.anchor 가 사용됩니다.
+   * @param target - 위치 계산에 사용할 타겟 엘리먼트입니다.
    * @param auto - 표시 후 자동 위치 업데이트 활성화 여부입니다. 기본값은 true 입니다.
    */
-  async show(anchor, auto = true) {
-    anchor ||= this.anchor;
-    if (!anchor) return;
+  async show(target, auto = true) {
     await this.updateComplete;
-    await this.reposition(anchor);
+    await this.reposition(target);
     if (auto === true) {
-      this.cleanup = autoUpdate(anchor, this, () => {
-        this.reposition(anchor);
+      this.cleanup = autoUpdate(target, this, () => {
+        this.reposition(target);
       });
     }
     this.scheduleVisible(true);
+    this.target = target;
   }
   /** 
    * 현재 엘리먼트를 숨깁니다.
@@ -86,11 +99,12 @@ class FloatingElement extends BaseElement {
     if (this.cleanup !== null) this.cleanup();
     this.cleanup = null;
     this.scheduleVisible(false);
+    this.target = void 0;
   }
   /** 
    * `floating-ui` 를 이용하여 위치를 계산하고 style 을 적용합니다. 
    * 
-   * @param target - 위치 계산에 사용할 앵커 엘리먼트입니다.
+   * @param target - 위치 계산에 사용할 타겟 엘리먼트입니다.
    */
   async reposition(target) {
     const position = await computePosition(target, this, {
@@ -152,9 +166,12 @@ class FloatingElement extends BaseElement {
 }
 __decorateClass([
   state()
-], FloatingElement.prototype, "anchor");
+], FloatingElement.prototype, "target");
 __decorateClass([
-  property({ type: String })
+  state()
+], FloatingElement.prototype, "anchors");
+__decorateClass([
+  property({ type: String, reflect: true })
 ], FloatingElement.prototype, "for");
 __decorateClass([
   property({ type: Boolean, reflect: true })

package/dist/components/button/UButton.component.d.ts

@@ -1,4 +1,5 @@
 import { BaseElement } from '../BaseElement.js';
+export type ButtonVariant = "default" | "borderless" | "link";
 /**
  * Button 컴포넌트는 클릭 가능한 버튼을 나타내며, 로딩 상태와 툴팁 기능을 지원합니다.
  * @slot - 버튼 내부에 표시할 콘텐츠를 삽입합니다.
@@ -8,9 +9,15 @@ import { BaseElement } from '../BaseElement.js';
 export declare class UButton extends BaseElement {
     static styles: import('lit').CSSResultGroup[];
     static dependencies: Record<string, typeof BaseElement>;
+    /** 버튼의 스타일 변형을 설정합니다. */
+    variant: ButtonVariant;
     /** 버튼이 비활성화 상태인지 여부를 설정합니다. 비활성화된 버튼은 클릭할 수 없습니다. */
     disabled: boolean;
     /** 버튼이 로딩 상태인지 여부를 설정합니다. 로딩 중에는 버튼이 비활성화되고 스피너가 표시됩니다. */
     loading: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     render(): import('lit-html').TemplateResult<1>;
+    /** 클릭 이벤트 컨트롤 */
+    private handleClick;
 }

package/dist/components/button/UButton.component.js

@@ -16,8 +16,16 @@ var __decorateClass = (decorators, target, key, kind) => {
 class UButton extends BaseElement {
   constructor() {
     super(...arguments);
+    this.variant = "default";
     this.disabled = false;
     this.loading = false;
+    /** 클릭 이벤트 컨트롤 */
+    this.handleClick = (e) => {
+      if (this.disabled || this.loading) {
+        e.preventDefault();
+        e.stopImmediatePropagation();
+      }
+    };
   }
   static {
     this.styles = [super.styles, styles];
@@ -27,6 +35,14 @@ class UButton extends BaseElement {
       "u-spinner": USpinner
     };
   }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("click", this.handleClick);
+  }
+  disconnectedCallback() {
+    this.removeEventListener("click", this.handleClick);
+    super.disconnectedCallback();
+  }
   render() {
     return html`
       <button part="base" 
@@ -36,13 +52,16 @@ class UButton extends BaseElement {
         <slot name="suffix"></slot>
       </button>
       
-      <div class="overlay" part="overlay"
+      <div class="mask" part="mask"
         ?hidden=${!this.loading}>
         <u-spinner></u-spinner>
       </div>
     `;
   }
 }
+__decorateClass([
+  property({ type: String, reflect: true })
+], UButton.prototype, "variant");
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], UButton.prototype, "disabled");

package/dist/components/button/UButton.styles.js

@@ -8,7 +8,7 @@ const styles = css`
     font-size: 14px;
     font-weight: 500;
     line-height: 1.5;
-    padding: 0.5em 1em;
+    padding: 0.5em;
     border: 1px solid var(--u-border-color);
     border-radius: 6px;
     background-color: var(--u-bg-color);
@@ -18,19 +18,57 @@ const styles = css`
     user-select: none;
     cursor: pointer;
   }
-  :host(:hover) {
-    color: var(--u-txt-color-hover);
+
+  /* Style variants */
+  :host([variant="default"]) {
+    color: var(--u-txt-color);
+    border-color: var(--u-border-color);
+    background-color: var(--u-bg-color);
+  }
+  :host([variant="default"]:hover) {
     background-color: var(--u-bg-color-hover);
   }
-  :host(:active) {
-    color: var(--u-txt-color-active);
+  :host([variant="default"]:active) {
+    background-color: var(--u-bg-color-active);
+  }
+
+  :host([variant="borderless"]) {
+    color: var(--u-txt-color);
+    border-color: transparent;
+    background-color: transparent;
+  }
+  :host([variant="borderless"]:hover) {
+    background-color: var(--u-bg-color-hover);
+  }
+  :host([variant="borderless"]:active) {
     background-color: var(--u-bg-color-active);
+  }
+
+  :host([variant="link"]) {
+    color: var(--u-txt-color);
+    border-color: transparent;
+    background-color: transparent;
+  }
+  :host([variant="link"]:hover) {
+    color: var(--u-blue-500, #3b82f6);
+  }
+  :host([variant="link"]:active) {
+    color: var(--u-blue-600, #2563eb);
+  }
+
+  :host(:active) {
     transform: translateY(1px);
   }
-  :host([loading]),
+
   :host([disabled]) {
     color: var(--u-txt-color-disabled);
-    pointer-events: none;
+    cursor: not-allowed;
+  }
+  :host([loading]) {
+    cursor: wait;
+  }
+  :host([loading]) button {
+    visibility: hidden;
   }
 
   button {
@@ -52,6 +90,10 @@ const styles = css`
     display: inline-flex;
     justify-content: center;
   }
+  ::slotted(*) {
+    color: inherit;
+    font-size: inherit;
+  }
   /* 슬롯에 내용이 있을 때 gap 적용 */
   ::slotted([slot="prefix"]) {
     margin-right: 0.5em;
@@ -60,7 +102,7 @@ const styles = css`
     margin-left: 0.5em;
   }
 
-  .overlay {
+  .mask {
     position: absolute;
     z-index: 100;
     top: 0;
@@ -76,6 +118,7 @@ const styles = css`
     font-size: inherit;
     border-radius: inherit;
     background-color: inherit;
+    pointer-events: none;
   }
 `;
 

package/dist/components/dialog/UDialog.component.d.ts

@@ -7,6 +7,8 @@ import { ModalElement } from '../ModalElement.js';
 export declare class UDialog extends ModalElement {
     static styles: import('lit').CSSResultGroup[];
     static dependencies: Record<string, typeof BaseElement>;
+    /** 헤드리스 모드 여부 */
+    headless: boolean;
     /** 타이틀 텍스트 */
     heading: string;
     render(): import('lit-html').TemplateResult<1>;