@iyulab/components 0.1.3 → 0.1.4

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

@@ -1,3 +1,3 @@
-const dark = ":root[theme=\"dark\"] {\r\n  color-scheme: dark;\r\n\r\n  /* Neutral Colors */\r\n  --u-neutral-0:     #000000;\r\n  --u-neutral-50:    #0A0A0A;\r\n  --u-neutral-100:   #121212;\r\n  --u-neutral-200:   #1E1E1E;\r\n  --u-neutral-300:   #2A2A2A;\r\n  --u-neutral-400:   #3D3D3D;\r\n  --u-neutral-500:   #525252;\r\n  --u-neutral-600:   #6E6E6E;\r\n  --u-neutral-700:   #8A8A8A;\r\n  --u-neutral-800:   #B0B0B0;\r\n  --u-neutral-900:   #D4D4D4;\r\n  --u-neutral-1000:  #FFFFFF;\r\n\r\n  /* Blue Colors */\r\n  --u-blue-0:        #0A1E3D;\r\n  --u-blue-100:      #1E3A5F;\r\n  --u-blue-200:      #2B4F7E;\r\n  --u-blue-300:      #3D6B9E;\r\n  --u-blue-400:      #5284BE;\r\n  --u-blue-500:      #6BA3E3;\r\n  --u-blue-600:      #87B8F5;\r\n  --u-blue-700:      #A5CDFF;\r\n  --u-blue-800:      #C2DEFF;\r\n  --u-blue-900:      #DDEEFF;\r\n  --u-blue-1000:     #F0F7FF;\r\n\r\n  /* Green Colors */\r\n  --u-green-0:       #0D2818;\r\n  --u-green-100:     #1A3F2A;\r\n  --u-green-200:     #285639;\r\n  --u-green-300:     #3A7450;\r\n  --u-green-400:     #4E9268;\r\n  --u-green-500:     #66B584;\r\n  --u-green-600:     #81D19D;\r\n  --u-green-700:     #9FE5B5;\r\n  --u-green-800:     #BEF2CD;\r\n  --u-green-900:     #DDF9E5;\r\n  --u-green-1000:    #F0FDF5;\r\n\r\n  /* Yellow Colors */\r\n  --u-yellow-0:      #2E2200;\r\n  --u-yellow-100:    #4D3A00;\r\n  --u-yellow-200:    #6B5200;\r\n  --u-yellow-300:    #8A6B00;\r\n  --u-yellow-400:    #B08900;\r\n  --u-yellow-500:    #D4A712;\r\n  --u-yellow-600:    #F5C842;\r\n  --u-yellow-700:    #FFE066;\r\n  --u-yellow-800:    #FFED99;\r\n  --u-yellow-900:    #FFF5CC;\r\n  --u-yellow-1000:   #FFFBE6;\r\n\r\n  /* Red Colors */\r\n  --u-red-0:         #2E0A0A;\r\n  --u-red-100:       #4D1717;\r\n  --u-red-200:       #6B2424;\r\n  --u-red-300:       #8F3535;\r\n  --u-red-400:       #B24848;\r\n  --u-red-500:       #D66060;\r\n  --u-red-600:       #F57878;\r\n  --u-red-700:       #FF9494;\r\n  --u-red-800:       #FFB3B3;\r\n  --u-red-900:       #FFD2D2;\r\n  --u-red-1000:      #FFF0F0;\r\n\r\n  /* Shadow Colors */\r\n  --u-shadow-weak:   rgba(0, 0, 0, 0.15);\r\n  --u-shadow-normal: rgba(0, 0, 0, 0.25);\r\n  --u-shadow-medium: rgba(0, 0, 0, 0.35);\r\n  --u-shadow-strong: rgba(0, 0, 0, 0.45);\r\n  --u-shadow-heavy:  rgba(0, 0, 0, 0.60);\r\n\r\n  /* background Colors */\r\n  --u-bg-color:              var(--u-neutral-100);\r\n  --u-bg-color-inverse:      var(--u-neutral-0);\r\n  --u-bg-color-hover:        var(--u-neutral-300);\r\n  --u-bg-color-active:       var(--u-neutral-400);\r\n  --u-bg-color-disabled:     var(--u-neutral-200);\r\n  \r\n  --u-panel-bg-color:        var(--u-neutral-200);\r\n  --u-overlay-bg-color:      rgba(0, 0, 0, 0.7);\r\n  --u-tooltip-bg-color:      rgba(255, 255, 255, 0.85);\r\n\r\n  /* border Colors */\r\n  --u-border-color:          var(--u-neutral-400);\r\n  --u-border-color-weak:     var(--u-neutral-300);\r\n  --u-border-color-strong:   var(--u-neutral-500);\r\n\r\n  --u-input-border-color:    var(--u-neutral-400);\r\n  --u-input-border-hover:    var(--u-neutral-500);\r\n  --u-input-border-focus:    var(--u-blue-600);\r\n\r\n  /* text Colors */\r\n  --u-text-color:            var(--u-neutral-900);\r\n  --u-text-color-inverse:    var(--u-neutral-100);\r\n  --u-text-color-hover:      var(--u-blue-600);\r\n  --u-text-color-disabled:   var(--u-neutral-500);\r\n\r\n  --u-soft-text-color:       var(--u-neutral-700);\r\n  --u-strong-text-color:     var(--u-neutral-1000);\r\n  --u-link-text-color:       var(--u-blue-700);\r\n  --u-tooltip-text-color:    var(--u-neutral-100);\r\n\r\n  /* Icon Colors */\r\n  --u-icon-color:            var(--u-neutral-800);\r\n  --u-icon-color-inverse:    var(--u-neutral-100);\r\n  --u-icon-color-hover:      var(--u-blue-600);\r\n  --u-icon-color-disabled:   var(--u-neutral-500);\r\n\r\n  /* Scrollbar Colors */\r\n  --u-scrollbar-color:       var(--u-neutral-500);\r\n  --u-scrollbar-color-hover: var(--u-neutral-600);\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 dark = ":root[theme=\"dark\"] {\n  color-scheme: dark;\n\n  /* Neutral Colors */\n  --u-neutral-0:     #000000;\n  --u-neutral-50:    #0A0A0A;\n  --u-neutral-100:   #121212;\n  --u-neutral-200:   #1E1E1E;\n  --u-neutral-300:   #2A2A2A;\n  --u-neutral-400:   #3D3D3D;\n  --u-neutral-500:   #525252;\n  --u-neutral-600:   #6E6E6E;\n  --u-neutral-700:   #8A8A8A;\n  --u-neutral-800:   #B0B0B0;\n  --u-neutral-900:   #D4D4D4;\n  --u-neutral-1000:  #FFFFFF;\n\n  /* Blue Colors */\n  --u-blue-0:        #0A1E3D;\n  --u-blue-100:      #1E3A5F;\n  --u-blue-200:      #2B4F7E;\n  --u-blue-300:      #3D6B9E;\n  --u-blue-400:      #5284BE;\n  --u-blue-500:      #6BA3E3;\n  --u-blue-600:      #87B8F5;\n  --u-blue-700:      #A5CDFF;\n  --u-blue-800:      #C2DEFF;\n  --u-blue-900:      #DDEEFF;\n  --u-blue-1000:     #F0F7FF;\n\n  /* Green Colors */\n  --u-green-0:       #0D2818;\n  --u-green-100:     #1A3F2A;\n  --u-green-200:     #285639;\n  --u-green-300:     #3A7450;\n  --u-green-400:     #4E9268;\n  --u-green-500:     #66B584;\n  --u-green-600:     #81D19D;\n  --u-green-700:     #9FE5B5;\n  --u-green-800:     #BEF2CD;\n  --u-green-900:     #DDF9E5;\n  --u-green-1000:    #F0FDF5;\n\n  /* Yellow Colors */\n  --u-yellow-0:      #2E2200;\n  --u-yellow-100:    #4D3A00;\n  --u-yellow-200:    #6B5200;\n  --u-yellow-300:    #8A6B00;\n  --u-yellow-400:    #B08900;\n  --u-yellow-500:    #D4A712;\n  --u-yellow-600:    #F5C842;\n  --u-yellow-700:    #FFE066;\n  --u-yellow-800:    #FFED99;\n  --u-yellow-900:    #FFF5CC;\n  --u-yellow-1000:   #FFFBE6;\n\n  /* Red Colors */\n  --u-red-0:         #2E0A0A;\n  --u-red-100:       #4D1717;\n  --u-red-200:       #6B2424;\n  --u-red-300:       #8F3535;\n  --u-red-400:       #B24848;\n  --u-red-500:       #D66060;\n  --u-red-600:       #F57878;\n  --u-red-700:       #FF9494;\n  --u-red-800:       #FFB3B3;\n  --u-red-900:       #FFD2D2;\n  --u-red-1000:      #FFF0F0;\n\n  /* Shadow Colors */\n  --u-shadow-weak:   rgba(0, 0, 0, 0.15);\n  --u-shadow-normal: rgba(0, 0, 0, 0.25);\n  --u-shadow-medium: rgba(0, 0, 0, 0.35);\n  --u-shadow-strong: rgba(0, 0, 0, 0.45);\n  --u-shadow-heavy:  rgba(0, 0, 0, 0.60);\n\n  /* background Colors */\n  --u-bg-color:              var(--u-neutral-100);\n  --u-bg-color-inverse:      var(--u-neutral-0);\n  --u-bg-color-hover:        var(--u-neutral-300);\n  --u-bg-color-active:       var(--u-neutral-400);\n  --u-bg-color-disabled:     var(--u-neutral-200);\n  \n  --u-panel-bg-color:        var(--u-neutral-200);\n  --u-overlay-bg-color:      rgba(0, 0, 0, 0.7);\n  --u-tooltip-bg-color:      rgba(255, 255, 255, 0.85);\n\n  /* border Colors */\n  --u-border-color:          var(--u-neutral-400);\n  --u-border-color-weak:     var(--u-neutral-300);\n  --u-border-color-strong:   var(--u-neutral-500);\n\n  --u-input-border-color:    var(--u-neutral-400);\n  --u-input-border-hover:    var(--u-neutral-500);\n  --u-input-border-focus:    var(--u-blue-600);\n\n  /* text Colors */\n  --u-text-color:            var(--u-neutral-900);\n  --u-text-color-inverse:    var(--u-neutral-100);\n  --u-text-color-hover:      var(--u-blue-600);\n  --u-text-color-disabled:   var(--u-neutral-500);\n\n  --u-soft-text-color:       var(--u-neutral-700);\n  --u-strong-text-color:     var(--u-neutral-1000);\n  --u-link-text-color:       var(--u-blue-700);\n  --u-tooltip-text-color:    var(--u-neutral-100);\n\n  /* Icon Colors */\n  --u-icon-color:            var(--u-neutral-800);\n  --u-icon-color-inverse:    var(--u-neutral-100);\n  --u-icon-color-hover:      var(--u-blue-600);\n  --u-icon-color-disabled:   var(--u-neutral-500);\n\n  /* Scrollbar Colors */\n  --u-scrollbar-color:       var(--u-neutral-500);\n  --u-scrollbar-color-hover: var(--u-neutral-600);\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 { dark as default };

package/dist/assets/styles/light.css

@@ -1,127 +1,127 @@
-: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;
-
-  /* Shadow Colors */
-  --u-shadow-weak:   rgba(0, 0, 0, 0.04);
-  --u-shadow-normal: rgba(0, 0, 0, 0.08);
-  --u-shadow-medium: rgba(0, 0, 0, 0.12);
-  --u-shadow-strong: rgba(0, 0, 0, 0.16);
-  --u-shadow-heavy:  rgba(0, 0, 0, 0.24);
-
-  /* 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-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);
-
-  /* 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-hover:    var(--u-neutral-400);
-  --u-input-border-focus:    var(--u-blue-600);
-
-  /* text Colors */
-  --u-text-color:            var(--u-neutral-900);
-  --u-text-color-inverse:    var(--u-neutral-0);
-  --u-text-color-hover:      var(--u-blue-600);
-  --u-text-color-active:     var(--u-blue-600);
-  --u-text-color-disabled:   var(--u-neutral-400);
-  
-  --u-soft-text-color:       var(--u-neutral-700);
-  --u-link-text-color:       var(--u-blue-700);
-  --u-tooltip-text-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);
-
-  /* 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;
+
+  /* Shadow Colors */
+  --u-shadow-weak:   rgba(0, 0, 0, 0.04);
+  --u-shadow-normal: rgba(0, 0, 0, 0.08);
+  --u-shadow-medium: rgba(0, 0, 0, 0.12);
+  --u-shadow-strong: rgba(0, 0, 0, 0.16);
+  --u-shadow-heavy:  rgba(0, 0, 0, 0.24);
+
+  /* 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-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);
+
+  /* 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-hover:    var(--u-neutral-400);
+  --u-input-border-focus:    var(--u-blue-600);
+
+  /* text Colors */
+  --u-text-color:            var(--u-neutral-900);
+  --u-text-color-inverse:    var(--u-neutral-0);
+  --u-text-color-hover:      var(--u-blue-600);
+  --u-text-color-active:     var(--u-blue-600);
+  --u-text-color-disabled:   var(--u-neutral-400);
+  
+  --u-soft-text-color:       var(--u-neutral-700);
+  --u-link-text-color:       var(--u-blue-700);
+  --u-tooltip-text-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);
+
+  /* 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  /* Shadow Colors */\r\n  --u-shadow-weak:   rgba(0, 0, 0, 0.04);\r\n  --u-shadow-normal: rgba(0, 0, 0, 0.08);\r\n  --u-shadow-medium: rgba(0, 0, 0, 0.12);\r\n  --u-shadow-strong: rgba(0, 0, 0, 0.16);\r\n  --u-shadow-heavy:  rgba(0, 0, 0, 0.24);\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-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  /* 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-hover:    var(--u-neutral-400);\r\n  --u-input-border-focus:    var(--u-blue-600);\r\n\r\n  /* text Colors */\r\n  --u-text-color:            var(--u-neutral-900);\r\n  --u-text-color-inverse:    var(--u-neutral-0);\r\n  --u-text-color-hover:      var(--u-blue-600);\r\n  --u-text-color-active:     var(--u-blue-600);\r\n  --u-text-color-disabled:   var(--u-neutral-400);\r\n  \r\n  --u-soft-text-color:       var(--u-neutral-700);\r\n  --u-link-text-color:       var(--u-blue-700);\r\n  --u-tooltip-text-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  /* 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  /* Shadow Colors */\n  --u-shadow-weak:   rgba(0, 0, 0, 0.04);\n  --u-shadow-normal: rgba(0, 0, 0, 0.08);\n  --u-shadow-medium: rgba(0, 0, 0, 0.12);\n  --u-shadow-strong: rgba(0, 0, 0, 0.16);\n  --u-shadow-heavy:  rgba(0, 0, 0, 0.24);\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-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  /* 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-hover:    var(--u-neutral-400);\n  --u-input-border-focus:    var(--u-blue-600);\n\n  /* text Colors */\n  --u-text-color:            var(--u-neutral-900);\n  --u-text-color-inverse:    var(--u-neutral-0);\n  --u-text-color-hover:      var(--u-blue-600);\n  --u-text-color-active:     var(--u-blue-600);\n  --u-text-color-disabled:   var(--u-neutral-400);\n  \n  --u-soft-text-color:       var(--u-neutral-700);\n  --u-link-text-color:       var(--u-blue-700);\n  --u-tooltip-text-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  /* 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/BaseElement.styles.js

@@ -22,7 +22,6 @@ const styles = css`
   .scrollable {
     scrollbar-width: thin;
     scrollbar-color: var(--u-scrollbar-color) var(--u-scrollbar-track-color);
-    scrollbar-gutter: stable;
   }
 `;
 

package/dist/components/divider/Divider.d.ts

@@ -0,0 +1,25 @@
+import { nothing } from 'lit';
+import { BaseElement } from '../BaseElement.js';
+/**
+ * Divider 컴포넌트는 엘리먼트 사이에 드래그 가능한 구분선을 표시합니다.
+ */
+export declare class Divider extends BaseElement {
+    static styles: import('lit').CSSResultGroup[];
+    static dependencies: Record<string, typeof BaseElement>;
+    /** 마지막 마우스 위치를 저장합니다. */
+    private position;
+    /** 드래그 중인지 여부를 나타냅니다. */
+    dragging: boolean;
+    /** 드래그 가능 여부를 설정합니다. */
+    draggable: boolean;
+    /** 분할 방향을 설정합니다. */
+    orientation: 'horizontal' | 'vertical';
+    disconnectedCallback(): void;
+    render(): typeof nothing | import('lit-html').TemplateResult<1>;
+    /** 마우스 다운 이벤트 핸들러 */
+    private handleMouseDown;
+    /** 마우스 무브 이벤트 핸들러 */
+    private handleMouseMove;
+    /** 마우스 업 이벤트 핸들러 */
+    private handleMouseUp;
+}

package/dist/components/divider/Divider.js

@@ -0,0 +1,89 @@
+import { html, nothing } from 'lit';
+import { state, property } from 'lit/decorators.js';
+import { BaseElement } from '../BaseElement.js';
+import { styles } from './Divider.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 Divider extends BaseElement {
+  constructor() {
+    super(...arguments);
+    /** 마지막 마우스 위치를 저장합니다. */
+    this.position = 0;
+    this.dragging = false;
+    this.draggable = false;
+    this.orientation = "horizontal";
+    /** 마우스 다운 이벤트 핸들러 */
+    this.handleMouseDown = (e) => {
+      e.preventDefault();
+      this.dragging = true;
+      this.position = this.orientation === "horizontal" ? e.clientX : e.clientY;
+      this.emit("u-dragstart");
+      document.addEventListener("mousemove", this.handleMouseMove);
+      document.addEventListener("mouseup", this.handleMouseUp);
+      document.body.style.userSelect = "none";
+      document.body.style.cursor = this.orientation === "horizontal" ? "col-resize" : "row-resize";
+    };
+    /** 마우스 무브 이벤트 핸들러 */
+    this.handleMouseMove = (e) => {
+      if (!this.dragging) return;
+      e.preventDefault();
+      const position = this.orientation === "horizontal" ? e.clientX : e.clientY;
+      const delta = position - this.position;
+      this.emit("u-drag", { delta });
+      this.position = position;
+    };
+    /** 마우스 업 이벤트 핸들러 */
+    this.handleMouseUp = (_) => {
+      if (!this.dragging) return;
+      this.dragging = false;
+      this.emit("u-dragend");
+      document.removeEventListener("mousemove", this.handleMouseMove);
+      document.removeEventListener("mouseup", this.handleMouseUp);
+      document.body.style.userSelect = "";
+      document.body.style.cursor = "";
+    };
+  }
+  static {
+    this.styles = [super.styles, styles];
+  }
+  static {
+    this.dependencies = {};
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener("mousemove", this.handleMouseMove);
+    document.removeEventListener("mouseup", this.handleMouseUp);
+  }
+  render() {
+    if (this.draggable) {
+      return html`
+        <div class="handler" 
+          ?dragging=${this.dragging}
+          orientation=${this.orientation}
+          @mousedown=${this.handleMouseDown}
+        ></div>
+      `;
+    } else {
+      return nothing;
+    }
+  }
+}
+__decorateClass([
+  state()
+], Divider.prototype, "dragging");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], Divider.prototype, "draggable");
+__decorateClass([
+  property({ type: String, reflect: true })
+], Divider.prototype, "orientation");
+
+export { Divider };

package/dist/components/{split-panel/Splitter.styles.js → divider/Divider.styles.js}

@@ -6,36 +6,46 @@ const styles = css`
     display: block;
     flex-shrink: 0;
     background-color: var(--u-neutral-200, #e5e7eb);
-    transition: background-color 0.2s ease;
 
-    --splitter-size: 2px;
-    --handler-size: 6px;
+    --divider-size: 2px;
+    --handler-size: 4px;
     --handler-color: var(--u-blue-500, #3b82f6);
   }
   :host([orientation="horizontal"]) {
-    width: var(--splitter-size, 2px);
+    width: var(--divider-size, 2px);
     height: 100%;
     cursor: col-resize;
   }
   :host([orientation="vertical"]) {
     width: 100%;
-    height: var(--splitter-size, 2px);
+    height: var(--divider-size, 2px);
     cursor: row-resize;
   }
 
   .handler {
     position: absolute;
     z-index: 100;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
     display: block;
-    width: 300%;
-    height: 300%;
     background-color: var(--handler-color, #3b82f6);
     opacity: 0;
     transition: opacity 0.2s ease;
   }
+  .handler[orientation="horizontal"] {
+    top: 0;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: var(--handler-size, 4px);
+    height: 100%;
+  }
+  .handler[orientation="vertical"] {
+    left: 0;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 100%;
+    height: var(--handler-size, 4px);
+  }
   .handler[dragging],
   .handler:hover {
     opacity: 1;

package/dist/components/divider/index.d.ts

@@ -0,0 +1,7 @@
+import { Divider } from './Divider.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-divider': Divider;
+    }
+}
+export { Divider };

package/dist/components/icon/Icon.d.ts

@@ -6,13 +6,9 @@ export declare class Icon extends BaseElement {
     static styles: import('lit').CSSResultGroup[];
     static dependencies: Record<string, typeof BaseElement>;
     /**
-     * 아이콘을 외부에서 불러올 때 사용되는 기본 경로를 설정합니다.
-     * @default '/assets/icons/'
-     */
-    static remoteBaseUrl: string;
-    /**
-     * 아이콘을 외부에서 로드할때 사용하는 설정입니다.
-     * @see {@link Icon.remoteBaseUrl}에서 외부 기본 경로를 설정할 수 있습니다.
+     * 아이콘을 원격 경로에서 로드할지 여부입니다.
+     * - `false`(기본): 번들된 내부 아이콘 레지스트리(`iconBundle`)에서 아이콘을 찾습니다.
+     * - `true`       : `getBaseUrl()`을 기준으로 원격 SVG 파일을 fetch 합니다.
      * @default false
      */
     remote: boolean;

package/dist/components/icon/Icon.js

@@ -3,7 +3,7 @@ import { property } from 'lit/decorators.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { until } from 'lit/directives/until.js';
 import { BaseElement } from '../BaseElement.js';
-import { icons } from '../../internals/icons.js';
+import { getBaseUrl, iconBundle } from '../../internals/icon-helpers.js';
 import { styles } from './Icon.styles.js';
 
 var __defProp = Object.defineProperty;
@@ -15,7 +15,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-const _Icon = class _Icon extends BaseElement {
+class Icon extends BaseElement {
   constructor() {
     super(...arguments);
     this.remote = false;
@@ -26,13 +26,6 @@ const _Icon = class _Icon extends BaseElement {
   static {
     this.dependencies = {};
   }
-  static {
-    /** 
-     * 아이콘을 외부에서 불러올 때 사용되는 기본 경로를 설정합니다.
-     * @default '/assets/icons/'
-     */
-    this.remoteBaseUrl = "/assets/icons/";
-  }
   render() {
     if (!this.name) return nothing;
     return until(this.load(this.name).then((html) => {
@@ -47,7 +40,8 @@ const _Icon = class _Icon extends BaseElement {
    */
   async load(name) {
     if (this.remote) {
-      const remoteUrl = _Icon.remoteBaseUrl.endsWith("/") ? `${_Icon.remoteBaseUrl}${name}.svg` : `${_Icon.remoteBaseUrl}/${name}.svg`;
+      const baseUrl = getBaseUrl();
+      const remoteUrl = baseUrl.endsWith("/") ? `${baseUrl}${name}.svg` : `${baseUrl}/${name}.svg`;
       try {
         const response = await fetch(remoteUrl);
         if (!response.ok) return void 0;
@@ -57,7 +51,7 @@ const _Icon = class _Icon extends BaseElement {
         return void 0;
       }
     } else {
-      return icons.get(name)?.trim();
+      return iconBundle.get(name)?.trim();
     }
   }
   /**
@@ -68,13 +62,12 @@ const _Icon = class _Icon extends BaseElement {
     if (!html.endsWith("</svg>")) return false;
     return true;
   }
-};
+}
 __decorateClass([
   property({ type: Boolean })
-], _Icon.prototype, "remote");
+], Icon.prototype, "remote");
 __decorateClass([
   property({ type: String })
-], _Icon.prototype, "name");
-let Icon = _Icon;
+], Icon.prototype, "name");
 
 export { Icon };

package/dist/components/index.d.ts

@@ -2,6 +2,7 @@ export * from './alert';
 export * from './button';
 export * from './context-menu';
 export * from './dialog';
+export * from './divider';
 export * from './form';
 export * from './icon';
 export * from './icon-button';

package/dist/components/panel/Panel.d.ts

@@ -5,6 +5,5 @@ import { BaseElement } from '../BaseElement.js';
 export declare class Panel extends BaseElement {
     static styles: import('lit').CSSResultGroup[];
     static dependencies: Record<string, typeof BaseElement>;
-    connectedCallback(): void;
     render(): import('lit-html').TemplateResult<1>;
 }

package/dist/components/panel/Panel.js

@@ -9,10 +9,6 @@ class Panel extends BaseElement {
   static {
     this.dependencies = {};
   }
-  connectedCallback() {
-    super.connectedCallback();
-    this.classList.add("scrollable");
-  }
   render() {
     return html`<slot></slot>`;
   }

package/dist/components/progress-bar/ProgressBar.d.ts

@@ -1,5 +1,5 @@
 import { PropertyValues } from 'lit';
-import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+import { BaseElement } from '../BaseElement.js';
 /**
  * ProgressBar 컴포넌트는 진행 상태를 시각적으로 표시합니다.
  * 로딩 상태나 작업 진행률을 표시하는데 사용됩니다.

package/dist/components/progress-ring/ProgressRing.js

@@ -64,7 +64,9 @@ class ProgressRing extends BaseElement {
           mask="url(#progress-mask)"
         ></circle>
       </svg>
-      <div class="label" part="label">${Math.round(this.progress * 100)}%</div>
+      <div class="label" part="label">
+        ${Math.round(this.progress * 100)}%
+      </div>
     `;
   }
   /**