vueless 0.0.71 → 0.0.73

package/assets/icons/add.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M445.93-445.93H194.02v-68.14h251.91v-252.15h68.14v252.15h252.15v68.14H514.07v251.91h-68.14v-251.91Z"/></svg>

package/assets/icons/apps.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M223.29-154.5q-29.12 0-48.95-19.84-19.84-19.83-19.84-48.95 0-29.12 19.84-48.91 19.83-19.8 48.95-19.8 29.12 0 48.91 19.8 19.8 19.79 19.8 48.91 0 29.12-19.8 48.95-19.79 19.84-48.91 19.84Zm256.8 0q-29.05 0-48.88-19.84-19.84-19.83-19.84-48.95 0-29.12 19.75-48.91 19.74-19.8 48.79-19.8t48.88 19.8q19.84 19.79 19.84 48.91 0 29.12-19.75 48.95-19.74 19.84-48.79 19.84Zm256.62 0q-29.12 0-48.91-19.84-19.8-19.83-19.8-48.95 0-29.12 19.8-48.91 19.79-19.8 48.91-19.8 29.12 0 48.95 19.8 19.84 19.79 19.84 48.91 0 29.12-19.84 48.95-19.83 19.84-48.95 19.84ZM223.29-411.37q-29.12 0-48.95-19.75-19.84-19.74-19.84-48.79t19.84-48.88q19.83-19.84 48.95-19.84 29.12 0 48.91 19.75 19.8 19.74 19.8 48.79t-19.8 48.88q-19.79 19.84-48.91 19.84Zm256.8 0q-29.05 0-48.88-19.75-19.84-19.74-19.84-48.79t19.75-48.88q19.74-19.84 48.79-19.84t48.88 19.75q19.84 19.74 19.84 48.79t-19.75 48.88q-19.74 19.84-48.79 19.84Zm256.62 0q-29.12 0-48.91-19.75-19.8-19.74-19.8-48.79t19.8-48.88q19.79-19.84 48.91-19.84 29.12 0 48.95 19.75 19.84 19.74 19.84 48.79t-19.84 48.88q-19.83 19.84-48.95 19.84ZM223.29-668q-29.12 0-48.95-19.8-19.84-19.79-19.84-48.91 0-29.12 19.84-48.95 19.83-19.84 48.95-19.84 29.12 0 48.91 19.84 19.8 19.83 19.8 48.95 0 29.12-19.8 48.91-19.79 19.8-48.91 19.8Zm256.8 0q-29.05 0-48.88-19.8-19.84-19.79-19.84-48.91 0-29.12 19.75-48.95 19.74-19.84 48.79-19.84t48.88 19.84q19.84 19.83 19.84 48.95 0 29.12-19.75 48.91-19.74 19.8-48.79 19.8Zm256.62 0q-29.12 0-48.91-19.8-19.8-19.79-19.8-48.91 0-29.12 19.8-48.95 19.79-19.84 48.91-19.84 29.12 0 48.95 19.84 19.84 19.83 19.84 48.95 0 29.12-19.84 48.91-19.83 19.8-48.95 19.8Z"/></svg>

package/assets/icons/arrow_back.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m283.8-445.93 244.18 244.17L480-154.02 154.02-480 480-806.22l47.98 47.98L283.8-514.07h522.42v68.14H283.8Z"/></svg>

package/assets/icons/check.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M378-240.26 148.26-470l48.98-48.98L378-338.22l383.76-383.76L810.74-673 378-240.26Z"/></svg>

package/assets/icons/check_circle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m420.52-294.41 285.63-285.63-50.78-50.03-234.85 234.85-117.85-117.85-49.78 50.03 167.63 168.63Zm59.51 220.39q-83.46 0-157.54-31.88-74.07-31.88-129.39-87.2-55.32-55.32-87.2-129.36-31.88-74.04-31.88-157.51 0-84.46 31.88-158.54 31.88-74.07 87.16-128.9 55.28-54.84 129.34-86.82 74.06-31.99 157.55-31.99 84.48 0 158.59 31.97 74.1 31.97 128.91 86.77 54.82 54.8 86.79 128.88 31.98 74.08 31.98 158.6 0 83.5-31.99 157.57-31.98 74.07-86.82 129.36-54.83 55.29-128.87 87.17-74.04 31.88-158.51 31.88Zm-.03-68.13q141.04 0 239.45-98.75 98.4-98.76 98.4-239.1 0-141.04-98.4-239.45-98.41-98.4-239.57-98.4-140.16 0-238.95 98.4-98.78 98.41-98.78 239.57 0 140.16 98.75 238.95 98.76 98.78 239.1 98.78ZM480-480Z"/></svg>

package/assets/icons/close.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M249-201.26 201.26-249l231-231-231-231L249-758.74l231 231 231-231L758.74-711l-231 231 231 231L711-201.26l-231-231-231 231Z"/></svg>

package/assets/icons/close_small.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m305.02-257.28-47.74-47.74L432.02-480 257.28-653.98l47.74-47.74L480-526.98l173.98-174.74 47.74 47.74L526.98-480l174.74 174.98-47.74 47.74L480-432.02 305.02-257.28Z"/></svg>

package/assets/icons/delete.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M259.09-114.02q-28.45 0-48.41-19.89-19.96-19.89-19.96-48.24v-565.94h-45.07v-68.13h198.28v-34.3h271.9v34.3h198.52v68.13h-45.07v565.94q0 27.6-20.33 47.86-20.34 20.27-48.04 20.27H259.09Zm441.82-634.07H259.09v565.94h441.82v-565.94ZM363.89-266.24h64.07v-399h-64.07v399Zm168.15 0h64.31v-399h-64.31v399ZM259.09-748.09v565.94-565.94Z"/></svg>

package/assets/icons/description.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M319-249.52h322v-62.63H319v62.63Zm0-170h322v-62.63H319v62.63Zm-96.85 345.5q-27.6 0-47.86-20.27-20.27-20.26-20.27-47.86v-675.7q0-27.7 20.27-48.03 20.26-20.34 47.86-20.34h361.48l222.59 222.59v521.48q0 27.6-20.34 47.86-20.33 20.27-48.03 20.27h-515.7Zm326.7-557.83v-186h-326.7v675.7h515.7v-489.7h-189Zm-326.7-186v186-186 675.7-675.7Z"/></svg>

package/assets/icons/drag_indicator.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M347.41-154.5q-30.1 0-51.51-21.43-21.4-21.44-21.4-51.54 0-30.1 21.43-51.31Q317.37-300 347.47-300q30.1 0 51.31 21.25Q420-257.51 420-227.41q0 30.1-21.25 51.51-21.24 21.4-51.34 21.4Zm265.34 0q-30.1 0-51.42-21.43Q540-197.37 540-227.47q0-30.1 21.39-51.31Q582.79-300 612.83-300q30.14 0 51.4 21.25 21.27 21.24 21.27 51.34 0 30.1-21.32 51.51-21.33 21.4-51.43 21.4ZM347.41-407.37q-30.1 0-51.51-21.39-21.4-21.4-21.4-51.44 0-30.23 21.43-51.33 21.44-21.1 51.54-21.1 30.1 0 51.31 21.19Q420-510.26 420-480.14q0 30.12-21.25 51.44-21.24 21.33-51.34 21.33Zm265.34 0q-30.1 0-51.42-21.39Q540-450.16 540-480.2q0-30.23 21.39-51.33 21.4-21.1 51.44-21.1 30.14 0 51.4 21.19 21.27 21.18 21.27 51.3 0 30.12-21.32 51.44-21.33 21.33-51.43 21.33ZM347.41-660q-30.1 0-51.51-21.39-21.4-21.4-21.4-51.44 0-30.14 21.43-51.4 21.44-21.27 51.54-21.27 30.1 0 51.31 21.32Q420-762.85 420-732.75t-21.25 51.42Q377.51-660 347.41-660Zm265.34 0q-30.1 0-51.42-21.39Q540-702.79 540-732.83q0-30.14 21.39-51.4 21.4-21.27 51.44-21.27 30.14 0 51.4 21.32 21.27 21.33 21.27 51.43t-21.32 51.42Q642.85-660 612.75-660Z"/></svg>

package/assets/icons/edit_note.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M154.02-396.85v-68.13h310.76v68.13H154.02Zm0-170.5v-68.13h478.13v68.13H154.02Zm0-170.5v-68.37h478.13v68.37H154.02Zm365.02 583.83v-128.02L741-503q9.51-9.63 21.13-13.91 11.62-4.29 23.5-4.29 12.48 0 24.21 4.86T831.02-502l37 37q9.44 9.48 13.82 21.12 4.38 11.63 4.38 23.27 0 11.96-4.86 24.06-4.86 12.09-14.25 21.57L647.07-154.02H519.04Zm303.59-266.59-37-37 37 37Zm-240 203h38l120.28-121.23-18-19.02-19-18.03-121.28 120.22v38.06Zm140.28-140.28-19-18 37 37-18-19Z"/></svg>

package/assets/icons/emoji_food_beverage.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M154.02-114.02v-68.13h652.2v68.13h-652.2ZM309.8-258.57q-65.17 0-110.48-44.93-45.3-44.93-45.3-109.85v-432.87h664.07q28.1 0 48.11 20.08 20.02 20.08 20.02 48.05v160q0 28.1-20.02 48.12-20.01 20.01-48.11 20.01h-92.66v136.61q0 64.92-45.47 109.85-45.48 44.93-110.55 44.93H309.8Zm.24-519.28H657.3 222.15h87.89Zm415.39 159.76h92.42v-160h-92.42v160ZM569.15-326.93q34.84 0 61.5-26.52 26.65-26.52 26.65-60.14v-364.26H399.15v37.31l71 58q1 1 9 18v150q0 9.6-7 16.8-7 7.2-18 7.2h-151q-11 0-18-7.2t-7-16.8v-150q0-4 9-18l72-58v-37.31h-137v364.26q0 33.62 26.98 60.14 26.97 26.52 60.91 26.52h259.11ZM355.57-777.85h40-40Z"/></svg>

package/assets/icons/error.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M479.93-274.02q16.46 0 27.4-10.74 10.93-10.75 10.93-27.21t-10.86-27.52q-10.86-11.05-27.33-11.05-16.46 0-27.4 11.03-10.93 11.04-10.93 27.5 0 16.47 10.86 27.23 10.86 10.76 27.33 10.76Zm-31-158.74h68.14v-257.07h-68.14v257.07ZM480.3-74.02q-84.2 0-158.04-31.88-73.84-31.88-129.16-87.2-55.32-55.32-87.2-129.2-31.88-73.88-31.88-158.17 0-84.28 31.88-158.2 31.88-73.91 87.16-128.74 55.28-54.84 129.18-86.82 73.9-31.99 158.21-31.99 84.3 0 158.25 31.97 73.94 31.97 128.75 86.77 54.82 54.8 86.79 128.88 31.98 74.08 31.98 158.33 0 84.24-31.99 158.07-31.98 73.84-86.82 128.95-54.83 55.1-128.87 87.17Q564.5-74.02 480.3-74.02Zm.2-68.13q140.54 0 238.95-98.75 98.4-98.76 98.4-239.6 0-140.54-98.22-238.95-98.21-98.4-239.75-98.4-140.16 0-238.95 98.22-98.78 98.21-98.78 239.75 0 140.16 98.75 238.95 98.76 98.78 239.6 98.78ZM480-480Z"/></svg>

package/assets/icons/expand_more.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M480-339.5 234.26-585.24 283-633.98l197 198 197-197 48.74 48.74L480-339.5Z"/></svg>

package/assets/icons/keyboard_arrow_down.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M480-338.26 234.26-584 283-632.74l197 197 197-197L725.74-584 480-338.26Z"/></svg>

package/assets/icons/keyboard_arrow_left.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M561-234.26 314.26-481 561-727.74 609.74-679l-198 198 198 198L561-234.26Z"/></svg>

package/assets/icons/keyboard_arrow_right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m524.26-481-198-198L375-727.74 621.74-481 375-234.26 326.26-283l198-198Z"/></svg>

package/assets/icons/remove.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M194.02-445.93v-68.14h572.2v68.14h-572.2Z"/></svg>

package/assets/icons/search.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M795.76-114.3 531.33-378.5q-29.76 25.26-69.6 39.41-39.84 14.16-85.16 14.16-109.84 0-185.96-76.2Q114.5-477.33 114.5-585t76.2-183.87q76.19-76.2 184.37-76.2 108.17 0 183.86 76.2 75.7 76.2 75.7 184.02 0 43.33-13.64 82.97t-40.92 74.4L845.5-164.04l-49.74 49.74ZM375.65-393.07q79.73 0 135.29-56.24Q566.5-505.55 566.5-585q0-79.45-55.6-135.69-55.59-56.24-135.25-56.24-80.49 0-136.76 56.24-56.26 56.24-56.26 135.69 0 79.45 56.23 135.69 56.23 56.24 136.79 56.24Z"/></svg>

package/assets/icons/star-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m224.15-107.56 67.39-291.29L65.41-594.78l298.52-25.72L480-895.3l116.07 274.8 298.52 25.72-226.13 195.93 67.63 291.29L480-262.3 224.15-107.56Z"/></svg>

package/assets/icons/star.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m326.37-249.79 153.64-91.89 153.64 92.9-41.28-173.94L727.5-540.33l-178.17-15.52L480-720.02l-69.33 163.41-178.17 15.28 135.22 117.38-41.35 174.16ZM224.15-107.56l67.39-291.29L65.41-594.78l298.43-25.67L480-895.3l116.16 274.85 298.43 25.67-226.13 195.93 67.63 291.29L480-262.3 224.15-107.56ZM480-474.52Z"/></svg>

package/assets/icons/upload_file.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M452-203.43h60v-201.96l82.48 82.48 42-42L480-517.15 325.76-362.91l42 42L452-405.39v201.96ZM222.15-74.02q-27.6 0-47.86-20.27-20.27-20.26-20.27-47.86v-675.7q0-27.7 20.27-48.03 20.26-20.34 47.86-20.34h361.48l222.59 222.59v521.48q0 27.6-20.34 47.86-20.33 20.27-48.03 20.27h-515.7Zm326.7-557.83v-186h-326.7v675.7h515.7v-489.7h-189Zm-326.7-186v186-186 675.7-675.7Z"/></svg>

package/assets/icons/visibility-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M480.12-330q70.88 0 120.38-49.62t49.5-120.5q0-70.88-49.62-120.38T479.88-670Q409-670 359.5-620.38T310-499.88q0 70.88 49.62 120.38t120.5 49.5Zm-.3-61.83q-45.15 0-76.57-31.6-31.42-31.6-31.42-76.75t31.6-76.57q31.6-31.42 76.75-31.42t76.57 31.6q31.42 31.6 31.42 76.75t-31.6 76.57q-31.6 31.42-76.75 31.42ZM480-194.5q-147.91 0-267.35-84.67Q93.22-363.85 34.5-500q58.72-136.15 178.15-220.83Q332.09-805.5 480-805.5q147.91 0 267.35 84.67Q866.78-636.15 925.5-500q-58.72 136.15-178.15 220.83Q627.91-194.5 480-194.5Z"/></svg>

package/assets/icons/visibility_off-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M813.85-61.85 649.2-223.74q-35 14-79.24 21.62-44.24 7.62-89.96 7.62-147.2 0-267.75-82.46Q91.7-359.41 34.5-500q19.52-51.76 55.38-101.86t86.38-95.81L50.98-822.48l43.91-45.15 759.87 759.87-40.91 45.91ZM480-330q13.28 0 28.45-2.5 15.16-2.5 25.44-7.26L319.28-553.89q-4.52 11.28-6.9 25.56Q310-514.04 310-500q0 72 50 121t120 49Zm283.74 41.91L629.96-422.11q9.52-15.04 14.78-36.18T650-500q0-71-49.5-120.5T480-670q-20.8 0-41.09 4.76-20.28 4.76-36.8 15.04L287.57-765.5q35-16 90.21-28 55.22-12 107.22-12 143.96 0 264.01 82.34Q869.07-640.83 925.5-500q-25.76 64.48-67.12 118.08-41.36 53.59-94.64 93.83ZM578.07-474l-125.5-125.5q25.17-10.28 52.82-5.1 27.65 5.19 48.5 24.56 20.61 20.61 28.53 46 7.93 25.39-4.35 60.04Z"/></svg>

package/assets/icons/warning.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M34.74-116.89 480-886.22l445.26 769.33H34.74Zm113.8-65.74h662.92L480-754.98 148.54-182.63Zm335.64-54.85q12.96 0 21.87-9.08 8.91-9.09 8.91-22.05t-9.09-21.75q-9.08-8.79-22.05-8.79-12.96 0-21.87 8.96-8.91 8.97-8.91 21.93 0 12.96 9.09 21.87 9.08 8.91 22.05 8.91ZM454-348h60v-222.09h-60V-348Zm26-120.8Z"/></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.71",
+  "version": "0.0.73",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",
@@ -17,14 +17,13 @@
     "release:patch": "release-it patch --ci --npm.publish",
     "release:minor": "release-it minor --ci --npm.publish --git.tag --github.release",
     "release:major": "release-it major --ci --npm.publish --git.tag --github.release",
-    "sb:dev-full": "STORYBOOK_VUELESS_ENV=1 STORYBOOK_FULL=1 storybook dev -p 6006 --no-open",
+    "sb:dev-full": "STORYBOOK_FULL=1 storybook dev -p 6006 --no-open",
     "sb:dev": "storybook dev -p 6006 --docs --no-open",
-    "sb:build": "STORYBOOK_VUELESS_ENV=1 storybook build --docs",
+    "sb:build": "storybook build --docs",
     "sb:preview": "vite preview --host --outDir=storybook-static",
-    "package:prepare": "node src/gen.web-types && rm -rf dist && mkdir -p dist && cp -r src/. package.json LICENSE web-types.json README.md dist/ && rm -rf dist/assets && node dist.prepare"
+    "package:prepare": "node src/gen.web-types && node icons.prepare && rm -rf dist && mkdir -p dist && cp -r src/. package.json LICENSE web-types.json README.md dist/ && node dist.prepare"
   },
   "dependencies": {
-    "@material-symbols/svg-500": "^0.17.3",
     "@tailwindcss/forms": "^0.5.7",
     "@uppy/core": "^3.10.1",
     "@uppy/drag-drop": "^3.1.0",
@@ -37,11 +36,12 @@
     "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
+    "@material-symbols/svg-500": "^0.17.4",
     "@release-it/bumper": "^6.0.1",
     "@vitejs/plugin-vue": "^5.0.4",
     "@vue/eslint-config-prettier": "^9.0.0",
-    "@vueless/plugin-vite": "^0.0.1",
-    "@vueless/storybook": "^0.0.8",
+    "@vueless/plugin-vite": "^0.0.7",
+    "@vueless/storybook": "^0.0.17",
     "autoprefixer": "^10.4.19",
     "cssnano": "^6.1.2",
     "eslint": "^8.55.0",

package/ui.button/index.stories.js

@@ -146,7 +146,6 @@ slotLeft.args = {
       <UIcon
         name="star"
         color="gray"
-        size="md"
        />
     </template>
   `,
@@ -159,7 +158,6 @@ slotRight.args = {
       <UIcon
         name="star"
         color="gray"
-        size="md"
        />
     </template>
   `,

package/ui.button-toggle-item/index.stories.js

@@ -57,7 +57,6 @@ slotLeft.args = {
       <UIcon
         name="star"
         color="green"
-        size="md"
       />
     </template>
   `,
@@ -70,7 +69,6 @@ slotRight.args = {
       <UIcon
         name="star"
         color="green"
-        size="md"
        />
     </template>
   `,

package/ui.container-accordion/configs/default.config.js

@@ -25,6 +25,8 @@ export default /*tw*/ {
     },
   },
   icon: "",
+  expandIconName: "add",
+  collapseIconName: "remove",
   separator: "mt-2 h-px w-full lg:mt-6 bg-gray-100 mt-2.5 group-last:hidden",
   defaultVariants: {
     size: "md",

package/ui.container-accordion/index.vue

@@ -4,7 +4,13 @@
       <div v-bind="titleAttrs">
         <div v-text="title" />
 
-        <UIcon :name="isOpened ? 'remove' : 'add'" :size="size" color="gray" v-bind="iconAttrs" />
+        <UIcon
+          :name="isOpened ? config.collapseIconName : config.expandIconName"
+          :size="size"
+          color="gray"
+          internal
+          v-bind="iconAttrs"
+        />
       </div>
 
       <div :id="`description-${id}`" v-bind="descriptionAttrs" v-text="description" />
@@ -84,7 +90,7 @@ const emit = defineEmits(["itemClicked"]);
 
 const isOpened = ref(false);
 
-const { wrapperAttrs, descriptionAttrs, infoAttrs, titleAttrs, iconAttrs, separatorAttrs } =
+const { config, wrapperAttrs, descriptionAttrs, infoAttrs, titleAttrs, iconAttrs, separatorAttrs } =
   useAttrs(props, { isOpened });
 
 function onClickItem() {

package/ui.container-modal/index.vue

@@ -32,9 +32,10 @@
                     @click="onClickBackLink"
                   >
                     <UIcon
-                      :name="config.backLinkIconName"
+                      internal
                       size="xs"
                       color="gray"
+                      :name="config.backLinkIconName"
                       v-bind="backLinkIconAttrs"
                     />
                     {{ backRoute.title }}
@@ -54,8 +55,9 @@
               <slot name="header-right">
                 <UIcon
                   v-if="closeIcon"
-                  :name="config.closeIconName"
+                  internal
                   interactive
+                  :name="config.closeIconName"
                   :data-cy="`${dataCy}-close`"
                   v-bind="closeIconAttrs"
                   @click="onClickCloseModal"

package/ui.container-page/index.vue

@@ -17,9 +17,10 @@
                 v-bind="backLinkAttrs"
               >
                 <UIcon
-                  :name="config.backLinkIconName"
+                  internal
                   size="xs"
                   color="gray"
+                  :name="config.backLinkIconName"
                   v-bind="backLinkIconAttrs"
                 />
                 {{ backRoute.title }}

package/ui.data-list/index.stories.js

@@ -84,7 +84,6 @@ slotIcons.args = {
       <UIcon
         name="star"
         color="red"
-        size="md"
        />
     </template>
   `,

package/ui.data-list/index.vue

@@ -25,7 +25,7 @@
       <template #item="{ element }">
         <div :id="element.id" :data-cy="`${dataCy}-item`" v-bind="itemWrapperAttrs">
           <div :data-cy="`${dataCy}-item-${element.id}`" v-bind="itemAttrs">
-            <UIcon :name="config.iconDragName" color="gray" v-bind="iconDragAttrs" />
+            <UIcon internal :name="config.iconDragName" color="gray" v-bind="iconDragAttrs" />
 
             <div v-bind="titleAttrs(element.isActive)">
               <slot :item="element">
@@ -44,9 +44,10 @@
 
               <UIcon
                 v-if="!element.isHiddenDelete"
+                internal
                 interactive
-                :name="config.iconDeleteName"
                 color="gray"
+                :name="config.iconDeleteName"
                 :data-cy="`${dataCy}-delete`"
                 :tooltip="currentLocale.delete"
                 v-bind="iconDeleteAttrs"
@@ -55,9 +56,10 @@
 
               <UIcon
                 v-if="!element.isHiddenEdit"
+                internal
                 interactive
-                :name="config.iconEditName"
                 color="gray"
+                :name="config.iconEditName"
                 :data-cy="`${dataCy}-edit`"
                 :tooltip="currentLocale.edit"
                 v-bind="iconEditAttrs"

package/ui.data-table/index.vue

@@ -158,18 +158,20 @@
                     <div v-if="isShownIcon({ index, row })" v-bind="toggleItemButtonAttrs">
                       <UIcon
                         v-if="row.isHidden"
-                        :name="config.expandIconName"
-                        interactive
                         size="xs"
+                        internal
+                        interactive
+                        :name="config.expandIconName"
                         :color="isIconActive(row)"
                         v-bind="expandIconAttrs"
                       />
 
                       <UIcon
                         v-else
-                        :name="config.collapseIconName"
-                        interactive
                         size="xs"
+                        internal
+                        interactive
+                        :name="config.collapseIconName"
                         v-bind="collapseIconAttrs"
                       />
                     </div>

package/ui.dropdown-badge/index.vue

@@ -16,6 +16,7 @@
       <template #right>
         <UIcon
           v-if="!noIcon"
+          internal
           :name="config.iconName"
           :size="iconSize"
           :color="color"

package/ui.dropdown-button/index.vue

@@ -19,6 +19,7 @@
       <template #right>
         <UIcon
           v-if="!noIcon"
+          internal
           :name="config.iconName"
           :size="iconSize"
           :color="iconColor"

package/ui.dropdown-link/index.vue

@@ -19,6 +19,7 @@
         <template #right>
           <UIcon
             v-if="!noIcon"
+            internal
             :name="config.iconName"
             :size="iconSize"
             :color="color"

package/ui.dropdown-list/index.vue

@@ -78,7 +78,13 @@
           </div>
         </div>
         <UButton pill square v-bind="buttonAddAttrs" @click="onClickAddOption">
-          <UIcon color="white" size="xs" :name="config.iconAddName" v-bind="iconAddAttrs" />
+          <UIcon
+            internal
+            color="white"
+            size="xs"
+            :name="config.iconAddName"
+            v-bind="iconAddAttrs"
+          />
         </UButton>
       </template>
     </ul>

package/ui.form-calendar/index.vue

@@ -26,6 +26,7 @@
           <template #right>
             <UIcon
               v-if="!range"
+              internal
               size="sm"
               color="gray"
               variant="light"
@@ -47,6 +48,7 @@
           @click="onClickPrevButton"
         >
           <UIcon
+            internal
             size="sm"
             color="gray"
             variant="light"
@@ -67,6 +69,7 @@
           @click="onClickNextButton"
         >
           <UIcon
+            internal
             size="sm"
             color="gray"
             variant="light"

package/ui.form-checkbox/index.vue

@@ -23,7 +23,13 @@
     />
 
     <label v-if="isChecked" v-bind="iconWrapperCellAttrs" :for="id">
-      <UIcon :name="iconName" :size="iconSize" color="white" v-bind="iconAttrs" />
+      <UIcon
+        internal
+        :name="partial ? config.partialIconName : config.selectedIconName"
+        :size="iconSize"
+        color="white"
+        v-bind="iconAttrs"
+      />
     </label>
 
     <template #footer>
@@ -184,10 +190,6 @@ const checkboxName = ref("");
 
 const { config, checkboxAttrs, iconWrapperCellAttrs, labelAttrs, iconAttrs } = useAttrs(props);
 
-const iconName = computed(() => {
-  return props.partial ? config.value.partialIconName : config.value.selectedIconName;
-});
-
 const iconSize = computed(() => {
   const sizes = {
     sm: "xs",

package/ui.form-color-picker/index.vue

@@ -25,8 +25,9 @@
 
           <UIcon
             v-if="selectedItem === ''"
-            :name="config.iconName"
+            internal
             color="gray"
+            :name="config.iconName"
             v-bind="iconAttrs"
             size="sm"
           />

package/ui.form-date-picker/index.stories.js

@@ -107,7 +107,6 @@ slotIcon.args = {
       <UIcon
         name="star"
         color="black"
-        size="md"
        />
     </template>
   `,

package/ui.form-date-picker-range/composables/attrs.composable.js

@@ -8,6 +8,7 @@ import defaultConfig from "../configs/default.config";
 export default function useAttrs(props, { isShownMenu }) {
   const { config, getAttrs } = useUI(defaultConfig, () => props.config);
 
+  const wrapperAttrs = getAttrs("wrapper");
   const buttonWrapperAttrsRaw = getAttrs("buttonWrapper");
   const buttonAttrsRaw = getAttrs("button");
   const shiftRangeButtonAttrs = getAttrs("shiftRangeButton");
@@ -91,6 +92,7 @@ export default function useAttrs(props, { isShownMenu }) {
 
   return {
     config,
+    wrapperAttrs,
     calendarAttrs,
     inputAttrs,
     menuAttrs,

package/ui.form-date-picker-range/configs/default.config.js

@@ -1,4 +1,5 @@
 export default /*tw*/ {
+  wrapper: "",
   input: "",
   inputActive: {
     block: {
@@ -34,6 +35,7 @@ export default /*tw*/ {
     [&_span]:block [&_span]:font-normal [&_span]:text-brand-500
   `,
   periodButtonIcon: "",
+  periodButtonIconName: "apps",
   periodButtonActive: "bg-zinc-200",
   rangeSwitchWrapper: "mb-2.5 mt-4 flex items-center justify-between py-2",
   rangeSwitchTitle: "font-medium text-sm",

package/ui.form-date-picker-range/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div v-bind="wrapperAttrs">
     <UInput
       v-if="isVariant.input"
       :id="id"
@@ -29,30 +29,32 @@
 
     <div v-if="isVariant.button" v-bind="buttonWrapperAttrs">
       <UButton
-        :disabled="disabled"
+        square
         :size="size"
+        :disabled="disabled"
         v-bind="shiftRangeButtonAttrs"
         @click="onClickShiftRange('prev')"
       >
-        <UIcon interactive size="sm" :name="config.prevIconName" v-bind="prevIconAttrs" />
+        <UIcon internal interactive size="sm" :name="config.prevIconName" v-bind="prevIconAttrs" />
       </UButton>
 
       <UButton
         :id="id"
-        :disabled="disabled"
         :size="size"
+        :disabled="disabled"
         :label="userFormatDate"
         v-bind="buttonAttrs"
         @click="activate"
       />
 
       <UButton
-        :disabled="disabled"
+        square
         :size="size"
+        :disabled="disabled"
         v-bind="shiftRangeButtonAttrs"
         @click="onClickShiftRange('next')"
       >
-        <UIcon interactive size="sm" :name="config.nextIconName" v-bind="nextIconAttrs" />
+        <UIcon internal interactive size="sm" :name="config.nextIconName" v-bind="nextIconAttrs" />
       </UButton>
     </div>
 
@@ -91,8 +93,12 @@
             v-bind="periodButtonAttrs(getPeriodButtonsClasses(PERIOD.ownRange))"
             @click="onClickOwnRange"
           >
-            <UIcon name="apps" size="xs" v-bind="periodButtonIconAttrs" />
-
+            <UIcon
+              internal
+              :name="config.periodButtonIconName"
+              size="xs"
+              v-bind="periodButtonIconAttrs"
+            />
             {{ locale.ownRange }}
           </div>
         </div>
@@ -100,6 +106,7 @@
         <template v-if="!isPeriod.ownRange && !isPeriod.custom">
           <div v-bind="rangeSwitchWrapperAttrs">
             <UIcon
+              internal
               interactive
               color="grayscale"
               size="sm"
@@ -111,7 +118,9 @@
             <div v-bind="rangeSwitchTitleAttrs">
               {{ rangeSwitchTitle }}
             </div>
+
             <UIcon
+              internal
               interactive
               class="icon"
               size="sm"
@@ -128,9 +137,8 @@
               :disabled="isDatePeriodOutOfRange(date)"
               v-bind="periodDateAttrs(getPeriodDateClasses(date))"
               @click="selectDate(date), toggleMenu()"
-            >
-              {{ date.title }}
-            </button>
+              v-text="date.title"
+            />
           </div>
         </template>
 
@@ -374,6 +382,7 @@ const isShownMenu = ref(false);
 
 const {
   config,
+  wrapperAttrs,
   calendarAttrs,
   inputAttrs,
   menuAttrs,

package/ui.form-input/configs/default.config.js

@@ -4,8 +4,8 @@ export default /*tw*/ {
   rightSlot: "flex items-center justify-end whitespace-nowrap pr-4 rounded-r-lg rounded-l-none",
   leftSlot: "flex items-center justify-end whitespace-nowrap pl-4 rounded-l-lg rounded-r-none",
   passwordIcon: "",
-  passwordVisibleIconName: "visibility",
-  passwordHiddenIconName: "visibility_off",
+  passwordVisibleIconName: "visibility-fill",
+  passwordHiddenIconName: "visibility_off-fill",
   block: {
     base: `
       rounded-lg border border-solid border-gray-300 bg-white !opacity-100 relative flex

package/ui.form-input/index.vue

@@ -47,10 +47,10 @@
         <slot name="right-icon">
           <UIcon
             v-if="isTypePassword"
-            :name="passwordIconName"
+            :name="isShownPassword ? config.passwordVisibleIconName : config.passwordHiddenIconName"
             color="gray"
             interactive
-            fill
+            internal
             :data-cy="`${dataCy}-show-password`"
             v-bind="passwordIconAttrs"
             @click="onClickShowPassword"
@@ -283,12 +283,6 @@ const {
   hasSlotContent,
 } = useAttrs(props, { isTypePassword, inputPasswordClasses });
 
-const passwordIconName = computed(() => {
-  return isShownPassword.value
-    ? config.value.passwordVisibleIconName
-    : config.value.passwordHiddenIconName;
-});
-
 const inputType = computed(() => {
   return isShownPassword.value || props.noAutocomplete ? "text" : props.type;
 });

package/ui.form-input-file/index.vue

@@ -11,9 +11,10 @@
         <div :id="fileId" :data-cy="dataCy" v-bind="uploadAttrs">
           <div v-if="!filesData.length" v-bind="blockAttrs">
             <UIcon
-              :name="config.iconUploadFileName"
+              internal
               color="gray"
               :size="componentSize"
+              :name="config.iconUploadFileName"
               v-bind="iconUploadFileAttrs"
             />
 
@@ -24,10 +25,11 @@
             <UFiles :options="filesList" v-bind="filesAttrs">
               <template #right="file">
                 <UIcon
-                  :name="config.iconCloseName"
+                  internal
                   interactive
-                  :size="componentSize"
                   color="gray"
+                  :size="componentSize"
+                  :name="config.iconCloseName"
                   v-bind="iconCloseAttrs"
                   @click="onClickDeleteFile(file)"
                 />

package/ui.form-input-number/index.vue

@@ -11,8 +11,9 @@
       @click="onClickRemove"
     >
       <UIcon
-        :name="config.removeIconName"
+        internal
         :size="size"
+        :name="config.removeIconName"
         :color="isRemoveButtonDisabled ? 'gray' : 'grayscale'"
         :data-cy="`${dataCy}-remove`"
         v-bind="removeIconAttrs"
@@ -35,8 +36,9 @@
       @click="onClickAdd"
     >
       <UIcon
-        :name="config.addIconName"
+        internal
         :size="size"
+        :name="config.addIconName"
         :color="isAddButtonDisabled ? 'gray' : 'grayscale'"
         :data-cy="`${dataCy}-add`"
         v-bind="addIconAttrs"

package/ui.form-input-rating/composables/attrs.composable.js

@@ -19,16 +19,17 @@ export function useAttrs(props) {
   const counterAttrs = getAttrs("counter", { classes: counterClasses });
   const ratingAttrs = getAttrs("rating");
   const wrapperAttrs = getAttrs("wrapper");
-  const iconsAttrs = getAttrs("icons", { isComponent: true });
-  const iconsContainerAttrs = getAttrs("iconsContainer");
+  const iconAttrs = getAttrs("icon", { isComponent: true });
+  const iconWrapperAttrs = getAttrs("iconWrapper");
   const labelAttrs = getAttrs("label", { isComponent: true });
 
   return {
+    config,
     counterAttrs,
     ratingAttrs,
     wrapperAttrs,
-    iconsAttrs,
-    iconsContainerAttrs,
+    iconAttrs,
+    iconWrapperAttrs,
     labelAttrs,
   };
 }

package/ui.form-input-rating/configs/default.config.js

@@ -2,8 +2,10 @@ export default /*tw*/ {
   rating: "flex flex-col",
   label: "",
   wrapper: "",
-  iconsContainer: "leading-none flex",
-  icons: "",
+  iconWrapper: "leading-none flex",
+  icon: "",
+  selectedIconName: "star-fill",
+  unselectedIconName: "star",
   counter: {
     base: "leading-none",
     variants: {

package/ui.form-input-rating/index.vue

@@ -16,16 +16,17 @@
           </slot>
         </div>
 
-        <div v-bind="iconsContainerAttrs">
+        <div v-bind="iconWrapperAttrs">
           <UIcon
             v-for="star in starsNumber"
             :key="star"
-            :data-cy="`${dataCy}-rating-star-${star}`"
-            :name="star <= ratingCounter ? 'star-fill' : 'star'"
-            :size="iconSize"
+            internal
             color="yellow"
+            :size="iconSize"
             :interactive="selectable"
-            v-bind="iconsAttrs"
+            :data-cy="`${dataCy}-rating-star-${star}`"
+            :name="star <= ratingCounter ? config.selectedIconName : config.unselectedIconName"
+            v-bind="iconAttrs"
             @mouseover="onMouseHover(star)"
             @mouseleave="onMouseHover()"
             @click="onClickStar(star)"
@@ -149,7 +150,7 @@ const emit = defineEmits(["update:modelValue"]);
 
 const hovered = ref(null);
 
-const { counterAttrs, ratingAttrs, wrapperAttrs, iconsAttrs, iconsContainerAttrs, labelAttrs } =
+const { config, counterAttrs, ratingAttrs, wrapperAttrs, iconAttrs, iconWrapperAttrs, labelAttrs } =
   useAttrs(props);
 
 const iconSize = computed(() => {

package/ui.form-input-search/index.vue

@@ -36,8 +36,9 @@
 
     <template #right-icon>
       <UIcon
-        color="gray"
+        internal
         interactive
+        color="gray"
         :name="config.closeIconName"
         :data-cy="`${dataCy}-close`"
         :size="iconSize"
@@ -47,9 +48,10 @@
 
       <UIcon
         v-if="!searchButton"
-        color="grayscale"
+        internal
         interactive
         :size="iconSize"
+        color="grayscale"
         :name="config.searchIconName"
         :data-cy="`${dataCy}-search`"
         v-bind="searchIconAttrs"

package/ui.form-radio-card/index.vue

@@ -15,7 +15,7 @@
         >
           <!-- @slot Use it to add icon. -->
           <slot v-if="withIcon" name="icon" :item="item">
-            <UIcon :name="item.iconName" size="xl" :color="color" v-bind="iconAttrs" />
+            <UIcon internal :name="item.iconName" size="xl" :color="color" v-bind="iconAttrs" />
           </slot>
         </URadio>
       </label>

package/ui.form-select/index.vue

@@ -38,6 +38,7 @@
         @mousedown.prevent.stop="toggle"
       >
         <UIcon
+          internal
           interactive
           color="gray"
           :size="size"
@@ -56,6 +57,7 @@
 
       <div v-if="isLocalValue && !noClear && !disabled && !multiple" v-bind="caretClearAttrs">
         <UIcon
+          internal
           interactive
           color="gray"
           :size="size"
@@ -88,6 +90,7 @@
               @click.prevent.capture
             >
               <UIcon
+                internal
                 interactive
                 color="gray"
                 :size="size"
@@ -454,6 +457,15 @@ const labelComponentRef = ref(null);
 const leftSlotWrapperRef = ref(null);
 const innerWrapperRef = ref(null);
 
+defineExpose({
+  dropdownListRef,
+  wrapperRef,
+  searchInputRef,
+  labelComponentRef,
+  leftSlotWrapperRef,
+  innerWrapperRef,
+});
+
 const isTop = computed(() => {
   if (props.openDirection === DIRECTION.top) return true;
   if (props.openDirection === DIRECTION.bottom) return false;

package/ui.form-switch/index.vue

@@ -24,7 +24,8 @@
       <span v-bind="circleAttrs">
         <UIcon
           v-if="toggleIcon"
-          :name="iconName"
+          internal
+          :name="checkedValue ? config.selectedIconName : config.unselectedIconName"
           :color="iconColor"
           :size="iconSize"
           v-bind="iconAttrs"
@@ -185,10 +186,6 @@ const iconColor = computed(() => {
   return checkedValue.value ? props.color : "grayscale";
 });
 
-const iconName = computed(() => {
-  return checkedValue.value ? config.value.selectedIconName : config.value.unselectedIconName;
-});
-
 function toggle() {
   if (!props.disabled) {
     checkedValue.value = !checkedValue.value;

package/ui.form-textarea/index.stories.js

@@ -131,7 +131,6 @@ slotLeft.args = {
       <UIcon
         name="star"
         color="black"
-        size="md"
       />
     </template>
   `,
@@ -144,7 +143,6 @@ slotLeft.args = {
       <UIcon
         name="star"
         color="black"
-        size="md"
       />
     </template>
   `,

package/ui.image-icon/index.vue

@@ -129,40 +129,39 @@ const props = defineProps({
     type: String,
     default: "",
   },
+
+  /**
+   * Mark that Icon used inside Vueless components (used to get icons from vueless library).
+   * @ignore
+   */
+  internal: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emit = defineEmits(["click", "focus", "blur"]);
 
 const { config, wrapperAttrs, containerAttrs, iconAttrs } = useAttrs(props);
 
-let generatedIcons = [];
+const generatedIcons = computed(() => {
+  if (!import.meta.env.PROD) return [];
 
-if (import.meta.env.PROD) {
-  // when building storybook from inside the package (only for Vueless contributors).
-  if (import.meta.env.STORYBOOK_VUELESS_ENV) {
-    generatedIcons = Object.entries(
-      import.meta.glob(`../assets/images/.generated/**/*.svg`, {
-        eager: true,
-        query: "?component",
-      }),
-    );
-  } else {
-    generatedIcons = Object.entries(
-      import.meta.glob(`../../../src/assets/images/.generated/**/*.svg`, {
-        eager: true,
-        query: "?component",
-      }),
-    );
-  }
-}
+  return Object.entries(
+    import.meta.glob(`../assets/icons/**/*.svg`, {
+      eager: true,
+      query: "?component",
+    }),
+  );
+});
 
 const dynamicComponent = computed(() => {
   const FILL_SUFFIX = "-fill";
 
-  const library = config.value.defaultVariants.library;
+  const library = props.internal ? "vueless" : config.value.defaultVariants.library;
   const weight = config.value.defaultVariants.weight;
   const style = config.value.defaultVariants.style;
-  const fill = props.fill || config.value.defaultVariants.fill ? FILL_SUFFIX : "";
+  const isFill = props.name.endsWith(FILL_SUFFIX);
   const name = props.name;
   const src = props.src;
 
@@ -176,12 +175,8 @@ const dynamicComponent = computed(() => {
   if (!name) return "";
 
   function getIcon(params) {
-    const [, component] = generatedIcons.find(([path]) =>
-      params.every((param) => {
-        const skipFilled = fill ? true : !path.includes(FILL_SUFFIX);
-
-        return skipFilled && path.includes(param);
-      }),
+    const [, component] = generatedIcons.value.find(([path]) =>
+      params.every((param) => (isFill || !path.includes(FILL_SUFFIX)) && path.includes(param)),
     );
 
     return component;
@@ -189,18 +184,23 @@ const dynamicComponent = computed(() => {
 
   /* eslint-disable vue/max-len, prettier/prettier */
   const libraries = {
+    "vueless": async () => {
+      return import.meta.env.PROD
+        ? await getIcon([name])
+        : import(/* @vite-ignore */ `../assets/icons/${name}.svg?component`);
+    },
     "@material-symbols": async () => {
       return import.meta.env.PROD
-        ? await getIcon([library, weight, style, name, fill])
-        : import(/* @vite-ignore */ `/node_modules/${library}/svg-${weight}/${style}/${name}${fill}.svg?component`);
+        ? await getIcon([library, weight, style, name])
+        : import(/* @vite-ignore */ `/node_modules/${library}/svg-${weight}/${style}/${name}.svg?component`);
     },
     "bootstrap-icons": async () => {
       return import.meta.env.PROD
-        ? await getIcon([library, name, fill])
-        : import(/* @vite-ignore */ `/node_modules/${library}/icons/${name}${fill}.svg?component`);
+        ? await getIcon([library, name])
+        : import(/* @vite-ignore */ `/node_modules/${library}/icons/${name}.svg?component`);
     },
-    heroicons: async () => {
-      const fillType = fill ? "solid" : "outline";
+    "heroicons": async () => {
+      const fillType = isFill ? "solid" : "outline";
 
       return import.meta.env.PROD
         ? await getIcon([library, style, fillType, name])

package/ui.notify/index.vue

@@ -17,6 +17,7 @@
         color="green"
         variant="light"
         size="md"
+        internal
         :name="config.iconSuccessName"
         v-bind="iconSuccessAttrs"
       />
@@ -27,6 +28,7 @@
         color="orange"
         variant="light"
         size="md"
+        internal
         :name="config.iconWarningName"
         v-bind="iconWarningAttrs"
       />
@@ -37,6 +39,7 @@
         color="red"
         variant="light"
         size="md"
+        internal
         :name="config.iconErrorName"
         v-bind="iconErrorAttrs"
       />
@@ -56,6 +59,7 @@
         color="gray"
         variant="light"
         size="xs"
+        internal
         interactive
         :name="config.iconCloseName"
         v-bind="iconCloseAttrs"

package/ui.text-alert/index.vue

@@ -10,9 +10,10 @@
     <UButton size="sm" variant="thirdary" :color="color" square v-bind="buttonAttrs">
       <UIcon
         v-if="closeIcon"
+        internal
+        size="xs"
         :color="color"
         :name="config.iconName"
-        size="xs"
         :data-cy="`${dataCy}-button`"
         v-bind="iconAttrs"
         @click="onHidden"

package/ui.text-empty/index.vue

@@ -3,7 +3,14 @@
     <div v-bind="headerAttrs">
       <!-- @slot Use it to add something to the header. -->
       <slot name="header">
-        <UIcon :name="config.iconName" color="gray" :size="iconSize" pill v-bind="iconAttrs" />
+        <UIcon
+          internal
+          :name="config.iconName"
+          color="gray"
+          :size="iconSize"
+          pill
+          v-bind="iconAttrs"
+        />
       </slot>
     </div>
 

package/ui.text-file/index.vue

@@ -7,9 +7,10 @@
 
       <UIcon
         v-else
-        :name="config.iconDescriptionName"
-        color="gray"
+        internal
         interactive
+        color="gray"
+        :name="config.iconDescriptionName"
         v-bind="iconAttrs"
         @focus="onFocus"
         @blur="onBlur"

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.71",
+  "version": "0.0.73",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -3193,6 +3193,15 @@
                 "type": "string"
               },
               "default": "\"\""
+            },
+            {
+              "name": "internal",
+              "description": "@ignore: Mark that Icon used inside Vueless components (used to get icons from vueless library).",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
             }
           ],
           "events": [