@iyulab/components 0.1.4 → 0.1.5

package/dist/assets/styles/dark.css

@@ -67,49 +67,53 @@
   --u-red-900:       #FFD2D2;
   --u-red-1000:      #FFF0F0;
 
-  /* Shadow Colors */
-  --u-shadow-weak:   rgba(0, 0, 0, 0.15);
-  --u-shadow-normal: rgba(0, 0, 0, 0.25);
-  --u-shadow-medium: rgba(0, 0, 0, 0.35);
-  --u-shadow-strong: rgba(0, 0, 0, 0.45);
-  --u-shadow-heavy:  rgba(0, 0, 0, 0.60);
+  /* text Colors */
+  --u-txt-color:             var(--u-neutral-900);
+  --u-txt-color-inverse:     var(--u-neutral-100);
+  --u-txt-color-hover:       var(--u-blue-600);
+  --u-txt-color-active:      var(--u-blue-600);
+  --u-txt-color-disabled:    var(--u-neutral-500);
+  --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-100);
+
+  /* Icon Colors */
+  --u-icon-color:            var(--u-neutral-800);
+  --u-icon-color-inverse:    var(--u-neutral-100);
+  --u-icon-color-hover:      var(--u-blue-600);
+  --u-icon-color-active:     var(--u-blue-600);
+  --u-icon-color-disabled:   var(--u-neutral-500);
+
+  /* border Colors */
+  --u-border-color:          var(--u-neutral-400);
+  --u-border-color-weak:     var(--u-neutral-300);
+  --u-border-color-strong:   var(--u-neutral-500);
+
+  --u-input-border-color:         var(--u-neutral-400);
+  --u-input-border-color-hover:   var(--u-neutral-500);
+  --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-100);
   --u-bg-color-inverse:      var(--u-neutral-0);
   --u-bg-color-hover:        var(--u-neutral-300);
   --u-bg-color-active:       var(--u-neutral-400);
-  --u-bg-color-disabled:     var(--u-neutral-200);
+  --u-bg-color-disabled:     var(--u-neutral-100);
   
+  --u-input-bg-color:        var(--u-neutral-200);
   --u-panel-bg-color:        var(--u-neutral-200);
   --u-overlay-bg-color:      rgba(0, 0, 0, 0.7);
   --u-tooltip-bg-color:      rgba(255, 255, 255, 0.85);
 
-  /* border Colors */
-  --u-border-color:          var(--u-neutral-400);
-  --u-border-color-weak:     var(--u-neutral-300);
-  --u-border-color-strong:   var(--u-neutral-500);
-
-  --u-input-border-color:    var(--u-neutral-400);
-  --u-input-border-hover:    var(--u-neutral-500);
-  --u-input-border-focus:    var(--u-blue-600);
-
-  /* text Colors */
-  --u-text-color:            var(--u-neutral-900);
-  --u-text-color-inverse:    var(--u-neutral-100);
-  --u-text-color-hover:      var(--u-blue-600);
-  --u-text-color-disabled:   var(--u-neutral-500);
-
-  --u-soft-text-color:       var(--u-neutral-700);
-  --u-strong-text-color:     var(--u-neutral-1000);
-  --u-link-text-color:       var(--u-blue-700);
-  --u-tooltip-text-color:    var(--u-neutral-100);
-
-  /* Icon Colors */
-  --u-icon-color:            var(--u-neutral-800);
-  --u-icon-color-inverse:    var(--u-neutral-100);
-  --u-icon-color-hover:      var(--u-blue-600);
-  --u-icon-color-disabled:   var(--u-neutral-500);
+  /* Shadow Colors */
+  --u-shadow-color-weaker:   rgba(0, 0, 0, 0.15);
+  --u-shadow-color-weak:     rgba(0, 0, 0, 0.25);
+  --u-shadow-color-normal:   rgba(0, 0, 0, 0.35);
+  --u-shadow-color-strong:   rgba(0, 0, 0, 0.45);
+  --u-shadow-color-stronger: rgba(0, 0, 0, 0.60);
 
   /* Scrollbar Colors */
   --u-scrollbar-color:       var(--u-neutral-500);
@@ -117,10 +121,10 @@
   --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-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-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/dark.css.js

@@ -1,3 +1,3 @@
-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}";
+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  /* text Colors */\n  --u-txt-color:             var(--u-neutral-900);\n  --u-txt-color-inverse:     var(--u-neutral-100);\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-500);\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-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-active:     var(--u-blue-600);\n  --u-icon-color-disabled:   var(--u-neutral-500);\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-color-hover:   var(--u-neutral-500);\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-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-100);\n  \n  --u-input-bg-color:        var(--u-neutral-200);\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  /* Shadow Colors */\n  --u-shadow-color-weaker:   rgba(0, 0, 0, 0.15);\n  --u-shadow-color-weak:     rgba(0, 0, 0, 0.25);\n  --u-shadow-color-normal:   rgba(0, 0, 0, 0.35);\n  --u-shadow-color-strong:   rgba(0, 0, 0, 0.45);\n  --u-shadow-color-stronger: rgba(0, 0, 0, 0.60);\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

@@ -67,50 +67,53 @@
   --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);
+  /* 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-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);
 
-  /* 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);
+  /* 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);
@@ -118,10 +121,10 @@
   --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-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-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  /* 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}";
+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/BaseElement.styles.js

@@ -2,10 +2,10 @@ import { css } from 'lit';
 
 const styles = css`
   :host {
+    color: var(--u-txt-color, inherit);
+    font-family: var(--u-font-base, inherit);
     box-sizing: border-box;
     overflow-wrap: anywhere;
-    color: var(--u-text-color, inherit);
-    font-family: var(--u-font-base, inherit);
   }
 
   :host *,

package/dist/components/alert/Alert.d.ts

@@ -14,7 +14,7 @@ export declare class Alert extends BaseElement {
     /** 상태 (warning, error, info, success, notice) */
     type: AlertType;
     /** 타이틀 라벨 */
-    label?: string;
+    heading?: string;
     /** 본문 내용 */
     content?: string;
     /** 본문 최소 행 수 */
@@ -25,12 +25,16 @@ export declare class Alert extends BaseElement {
     duration: number;
     protected updated(changedProperties: PropertyValues): void;
     render(): import('lit-html').TemplateResult<1>;
-    /** Alert를 표시합니다. */
+    /**
+     * Alert를 표시합니다.
+     */
     show(): Promise<void>;
-    /** Alert를 숨깁니다. */
+    /**
+     * Alert를 숨깁니다.
+     */
     hide(): Promise<void>;
     /** Alert 타입에 따른 아이콘 이름을 반환합니다. */
-    private getIcon;
+    private getIconName;
     /** open 속성 변경에 따른 상태 업데이트를 처리합니다. */
     private updateOpenState;
 }

package/dist/components/alert/Alert.js

@@ -3,6 +3,7 @@ import { property } from 'lit/decorators.js';
 import { BaseElement } from '../BaseElement.js';
 import { Icon } from '../icon/Icon.js';
 import { styles } from './Alert.styles.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -44,34 +45,42 @@ class Alert extends BaseElement {
   }
   render() {
     return html`
-      <div class="container">
-        <div class="header">
-          <u-icon class="icon" 
-            name=${this.getIcon(this.type)}
+      <div class="container" part="base">
+        <div class="header" part="header">
+          <u-icon class="icon" part="icon"
+            .library=${"internal"}
+            .name=${this.getIconName(this.type)}
           ></u-icon>
-          <div class="title">
-            ${this.label || this.type.toUpperCase()}
+          <div class="title" part="title">
+            ${this.heading || this.type.toUpperCase()}
           </div>
-          <u-icon class="close-btn" 
-            name="x-lg" 
+          <u-icon class="close-btn" part="close-btn"
+            .library=${"internal"}
+            .name=${"x-lg"}
             @click=${this.hide}
           ></u-icon>
         </div>
-        <div class="content scrollable">
-          ${this.content || html`<slot></slot>`}
+        <div class="content scrollable" part="content">
+          ${this.content ? unsafeHTML(this.content) : html`<slot></slot>`}
+        </div>
+        <div class="footer" part="footer">
+          <slot name="footer"></slot>
         </div>
-        <div class="footer"></div>
       </div>
     `;
   }
-  /** Alert를 표시합니다. */
+  /**
+   * Alert를 표시합니다. 
+   */
   async show() {
     await this.updateComplete;
     requestAnimationFrame(() => {
       this.open = true;
     });
   }
-  /** Alert를 숨깁니다. */
+  /** 
+   * Alert를 숨깁니다. 
+   */
   async hide() {
     await this.updateComplete;
     requestAnimationFrame(() => {
@@ -79,7 +88,7 @@ class Alert extends BaseElement {
     });
   }
   /** Alert 타입에 따른 아이콘 이름을 반환합니다. */
-  getIcon(type) {
+  getIconName(type) {
     switch (type) {
       case "error":
         return "exclamation-circle-fill";
@@ -118,7 +127,7 @@ __decorateClass([
 ], Alert.prototype, "type");
 __decorateClass([
   property({ type: String })
-], Alert.prototype, "label");
+], Alert.prototype, "heading");
 __decorateClass([
   property({ type: String })
 ], Alert.prototype, "content");

package/dist/components/alert/Alert.styles.js

@@ -1,64 +1,60 @@
 import { css } from 'lit';
 
 const styles = css`
+  :host {
+    --icon-primary-color: var(--u-neutral-700);
+    --min-content-rows: 1;
+    --max-content-rows: 3;
+  }
+
   :host {
     display: block;
     min-width: 300px;
     max-width: 500px;
-    
-    background-color: var(--alert-bg-color);
-    border: 1px solid var(--alert-border-color);
+
     border-radius: 8px;
-    box-shadow: 0 4px 12px var(--u-shadow-medium), 0 2px 4px var(--u-shadow-weak);
+    box-shadow: 0 4px 12px var(--u-shadow-color-normal);
     
     opacity: 0;
     transform: scale(0.8);
     transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
     pointer-events: none;
-
-    --min-content-rows: 1;
-    --max-content-rows: 3;
-    
-    --alert-icon-color: var(--u-neutral-700);
-    --alert-bg-color: var(--u-neutral-100);
-    --alert-border-color: var(--u-neutral-300);
   }
   :host([open]) {
     opacity: 1;
     transform: scale(1);
     pointer-events: auto;
   }
-  
   :host([type="error"]) {
-    --alert-icon-color: var(--u-red-700);
-    --alert-bg-color: var(--u-red-0);
-    --alert-border-color: var(--u-red-100);
+    --icon-primary-color: var(--u-red-700);
+    border-color: var(--u-red-300);
+    background-color: var(--u-red-200);
   }
   :host([type="warning"]) {
-    --alert-icon-color: var(--u-yellow-700);
-    --alert-bg-color: var(--u-yellow-0);
-    --alert-border-color: var(--u-yellow-100);
+    --icon-primary-color: var(--u-yellow-700);
+    border-color: var(--u-yellow-300);
+    background-color: var(--u-yellow-200);
   }
   :host([type="info"]) {
-    --alert-icon-color: var(--u-blue-700);
-    --alert-bg-color: var(--u-blue-0);
-    --alert-border-color: var(--u-blue-100);
+    --icon-primary-color: var(--u-blue-700);
+    border-color: var(--u-blue-300);
+    background-color: var(--u-blue-200);
   }
   :host([type="success"]) {
-    --alert-icon-color: var(--u-green-700);
-    --alert-bg-color: var(--u-green-0);
-    --alert-border-color: var(--u-green-100);
+    --icon-primary-color: var(--u-green-700);
+    border-color: var(--u-green-300);
+    background-color: var(--u-green-200);
   }
   :host([type="notice"]) {
-    --alert-icon-color: var(--u-neutral-700);
-    --alert-bg-color: var(--u-neutral-100);
-    --alert-border-color: var(--u-neutral-300);
+    --icon-primary-color: var(--u-neutral-700);
+    border-color: var(--u-neutral-300);
+    background-color: var(--u-neutral-200);
   }
 
   .container {
     display: flex;
     flex-direction: column;
-    padding: 8px 12px 8px 12px;
+    padding: 8px 12px;
     overflow: hidden;
   }
 
@@ -69,23 +65,21 @@ const styles = css`
     align-items: center;
     gap: 12px;
     margin-bottom: 4px;
+    font-size: 16px;
     user-select: none;
   }
   .header .icon {
     flex-shrink: 0;
-    font-size: 20px;
-    color: var(--alert-icon-color);
-    filter: drop-shadow(0 1px 2px var(--u-shadow-weak));
+    color: var(--icon-primary-color);
   }
   .header .title {
-    flex: 1;
-    font-size: 16px;
+    flex-grow: 1;
     font-weight: 600;
-    line-height: 1.4;
+    line-height: 2;
   }
   .header .close-btn {
     flex-shrink: 0;
-    font-size: 18px;
+    color: var(--u-icon-color);
     cursor: pointer;
   }
   .header .close-btn:hover {
@@ -98,16 +92,15 @@ const styles = css`
 
   .content {
     font-size: 14px;
-    font-weight: 400;
-    color: var(--u-soft-text-color);
-    line-height: 1.6;
+    font-weight: 300;
+    line-height: 1.5;
     min-height: calc(1.6em * var(--min-content-rows));
     max-height: calc(1.6em * var(--max-content-rows));
     overflow-y: auto;
   }
 
   .footer {
-    display: none;
+    display: inline-block;
   }
 `;
 

package/dist/components/alert/index.js

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

package/dist/components/button/Button.js

@@ -29,13 +29,15 @@ class Button extends BaseElement {
   }
   render() {
     return html`
-      <button part="base" ?disabled=${this.disabled || this.loading}>
+      <button part="base" 
+        ?disabled=${this.disabled || this.loading}>
         <slot name="prefix"></slot>
         <slot></slot>
         <slot name="suffix"></slot>
       </button>
       
-      <div class="overlay" ?hidden=${!this.loading}>
+      <div class="overlay" part="overlay"
+        ?hidden=${!this.loading}>
         <u-spinner></u-spinner>
       </div>
     `;

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

@@ -9,31 +9,29 @@ const styles = css`
     font-weight: 500;
     line-height: 1.5;
     padding: 0.5em 1em;
-    background-color: var(--u-bg-color);
     border: 1px solid var(--u-border-color);
     border-radius: 6px;
+    background-color: var(--u-bg-color);
 
     transition: all 0.2s ease;
+    overflow: hidden;
     user-select: none;
     cursor: pointer;
   }
-  :host([loading]),
-  :host([disabled]) {
-    pointer-events: none;
-  }
-  :host([disabled]) {
-    color: var(--u-text-color-disabled);
-  }
   :host(:hover) {
-    color: var(--u-text-color-hover);
+    color: var(--u-txt-color-hover);
     background-color: var(--u-bg-color-hover);
-    border-color: var(--u-border-color-strong);
   }
   :host(:active) {
-    color: var(--u-text-color-active);
+    color: var(--u-txt-color-active);
     background-color: var(--u-bg-color-active);
     transform: translateY(1px);
   }
+  :host([loading]),
+  :host([disabled]) {
+    color: var(--u-txt-color-disabled);
+    pointer-events: none;
+  }
 
   button {
     all: unset;
@@ -49,21 +47,16 @@ const styles = css`
   }
 
   slot {
-    flex: 1 1 auto;
+    flex: 1 0 auto;
     min-width: 0;
     display: inline-flex;
-    align-items: center;
     justify-content: center;
   }
-  slot[name="prefix"],
-  slot[name="suffix"] {
-    flex: 0 0 auto;
-  }
-  /* 슬롯에 내용이 있을 때만 gap 적용 */
-  slot[name="prefix"]:not(:empty) {
+  /* 슬롯에 내용이 있을 때 gap 적용 */
+  ::slotted([slot="prefix"]) {
     margin-right: 0.5em;
   }
-  slot[name="suffix"]:not(:empty) {
+  ::slotted([slot="suffix"]) {
     margin-left: 0.5em;
   }
 

package/dist/components/button/index.js

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

package/dist/components/context-menu/index.js

@@ -0,0 +1,5 @@
+import { ContextMenu } from './ContextMenu.js';
+
+ContextMenu.define("u-context-menu");
+
+export { ContextMenu };

package/dist/components/copy-button/CopyButton.d.ts

@@ -5,11 +5,15 @@ import { BaseElement } from '../BaseElement.js';
 export declare class CopyButton extends BaseElement {
     static styles: import('lit').CSSResultGroup[];
     static dependencies: Record<string, typeof BaseElement>;
-    /** 버튼의 테두리 유무를 설정합니다. 기본값은 true로, 테두리가 없습니다. */
+    /** 버튼의 복사 상태를 설정합니다. 복사가 완료되면 true로 변경됩니다. */
+    copied: boolean;
+    /** 버튼의 테두리 유무를 설정합니다. 기본값은 false입니다. */
     borderless: boolean;
     /** 버튼이 비활성화 상태인지 여부를 설정합니다. 비활성화된 버튼은 클릭할 수 없습니다. */
     disabled: boolean;
-    /** 버튼의 복사 상태를 설정합니다. 복사가 완료되면 true로 변경됩니다. */
-    copied: boolean;
+    /** 복사할 텍스트를 설정합니다. */
+    value: string;
     render(): import('lit-html').TemplateResult<1>;
+    /** 복사 버튼 클릭 핸들러 */
+    private handleButtonClick;
 }