kempo-ui 0.0.76 → 0.0.78

package/icons/label.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h440q19 0 36 8.5t28 23.5l216 288-216 288q-11 15-28 23.5t-36 8.5H160Zm0-80h440l180-240-180-240H160v480Zm220-240Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h440q19 0 36 8.5t28 23.5l216 288-216 288q-11 15-28 23.5t-36 8.5H160Zm0-80h440l180-240-180-240H160v480Zm220-240Z"/></svg>

package/icons/license.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="currentColor" d="M8.75.75V2h.985c.304 0 .603.08.867.231l1.29.736c.038.022.08.033.124.033h2.234a.75.75 0 0 1 0 1.5h-.427l2.111 4.692a.75.75 0 0 1-.154.838l-.53-.53.529.531-.001.002-.002.002-.006.006-.006.005-.01.01-.045.04c-.21.176-.441.327-.686.45C14.556 10.78 13.88 11 13 11a4.498 4.498 0 0 1-2.023-.454 3.544 3.544 0 0 1-.686-.45l-.045-.04-.016-.015-.006-.006-.004-.004v-.001a.75.75 0 0 1-.154-.838L12.178 4.5h-.162c-.305 0-.604-.079-.868-.231l-1.29-.736a.245.245 0 0 0-.124-.033H8.75V13h2.5a.75.75 0 0 1 0 1.5h-6.5a.75.75 0 0 1 0-1.5h2.5V3.5h-.984a.245.245 0 0 0-.124.033l-1.289.737c-.265.15-.564.23-.869.23h-.162l2.112 4.692a.75.75 0 0 1-.154.838l-.53-.53.529.531-.001.002-.002.002-.006.006-.016.015-.045.04c-.21.176-.441.327-.686.45C4.556 10.78 3.88 11 3 11a4.498 4.498 0 0 1-2.023-.454 3.544 3.544 0 0 1-.686-.45l-.045-.04-.016-.015-.006-.006-.004-.004v-.001a.75.75 0 0 1-.154-.838L2.178 4.5H1.75a.75.75 0 0 1 0-1.5h2.234a.249.249 0 0 0 .125-.033l1.288-.737c.265-.15.564-.23.869-.23h.984V.75a.75.75 0 0 1 1.5 0Zm2.945 8.477c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L13 6.327Zm-10 0c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L3 6.327Z"></path></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="currentColor" d="M8.75.75V2h.985c.304 0 .603.08.867.231l1.29.736c.038.022.08.033.124.033h2.234a.75.75 0 0 1 0 1.5h-.427l2.111 4.692a.75.75 0 0 1-.154.838l-.53-.53.529.531-.001.002-.002.002-.006.006-.006.005-.01.01-.045.04c-.21.176-.441.327-.686.45C14.556 10.78 13.88 11 13 11a4.498 4.498 0 0 1-2.023-.454 3.544 3.544 0 0 1-.686-.45l-.045-.04-.016-.015-.006-.006-.004-.004v-.001a.75.75 0 0 1-.154-.838L12.178 4.5h-.162c-.305 0-.604-.079-.868-.231l-1.29-.736a.245.245 0 0 0-.124-.033H8.75V13h2.5a.75.75 0 0 1 0 1.5h-6.5a.75.75 0 0 1 0-1.5h2.5V3.5h-.984a.245.245 0 0 0-.124.033l-1.289.737c-.265.15-.564.23-.869.23h-.162l2.112 4.692a.75.75 0 0 1-.154.838l-.53-.53.529.531-.001.002-.002.002-.006.006-.016.015-.045.04c-.21.176-.441.327-.686.45C4.556 10.78 3.88 11 3 11a4.498 4.498 0 0 1-2.023-.454 3.544 3.544 0 0 1-.686-.45l-.045-.04-.016-.015-.006-.006-.004-.004v-.001a.75.75 0 0 1-.154-.838L2.178 4.5H1.75a.75.75 0 0 1 0-1.5h2.234a.249.249 0 0 0 .125-.033l1.288-.737c.265-.15.564-.23.869-.23h.984V.75a.75.75 0 0 1 1.5 0Zm2.945 8.477c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L13 6.327Zm-10 0c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L3 6.327Z"></path></svg>

package/icons/link.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M440-280H280q-83 0-141.5-58.5T80-480q0-83 58.5-141.5T280-680h160v80H280q-50 0-85 35t-35 85q0 50 35 85t85 35h160v80ZM320-440v-80h320v80H320Zm200 160v-80h160q50 0 85-35t35-85q0-50-35-85t-85-35H520v-80h160q83 0 141.5 58.5T880-480q0 83-58.5 141.5T680-280H520Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M440-280H280q-83 0-141.5-58.5T80-480q0-83 58.5-141.5T280-680h160v80H280q-50 0-85 35t-35 85q0 50 35 85t85 35h160v80ZM320-440v-80h320v80H320Zm200 160v-80h160q50 0 85-35t35-85q0-50-35-85t-85-35H520v-80h160q83 0 141.5 58.5T880-480q0 83-58.5 141.5T680-280H520Z"/></svg>

package/icons/menu.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/></svg>

package/icons/mode-auto.svg

@@ -1 +1 @@
-<svg viewBox="0 -960 960 960" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M 440 -920 L 440 -760 L 520 -760 L 520 -920 L 440 -920 z M 818.67969 -885.5332 L 583.66602 -651.38281 C 553.04363 -670.31258 518.55019 -680 480 -680 C 424.66678 -680 377.49992 -660.49992 338.5 -621.5 C 299.50008 -582.50008 280 -535.33322 280 -480 C 280 -441.71314 289.5643 -407.43184 308.23633 -376.96484 L 97.058594 -166.5625 L 168.59375 -92.332031 L 263.80078 -187.18945 C 267.09506 -183.63709 270.46257 -180.11555 273.9375 -176.64062 C 343.93736 -106.64077 428.9377 -71.640625 528.9375 -71.640625 C 628.9373 -71.640625 713.93764 -106.64077 783.9375 -176.64062 C 853.93736 -246.64049 888.9375 -331.64082 888.9375 -431.64062 C 888.9375 -440.97395 888.60417 -450.14064 887.9375 -459.14062 C 887.27083 -468.14062 886.27083 -476.97398 884.9375 -485.64062 C 865.60421 -458.30735 840.60411 -436.47393 809.9375 -420.14062 C 779.27089 -403.80733 745.60409 -395.64062 708.9375 -395.64062 C 648.93762 -395.64062 597.93742 -416.64072 555.9375 -458.64062 C 552.62172 -461.95641 549.47084 -465.3433 546.42188 -468.77344 L 890.21484 -811.30273 L 818.67969 -885.5332 z M 212 -806 L 155 -747 L 256 -650 L 308 -706 L 212 -806 z M 480 -600 C 495.83397 -600 510.50253 -597.28065 524.08008 -592.01562 L 367.83594 -436.34375 C 362.67843 -449.80488 360 -464.32853 360 -480 C 360 -513.33327 371.66671 -541.66671 395 -565 C 418.33329 -588.33329 446.66673 -600 480 -600 z M 40 -520 L 40 -440 L 200 -440 L 200 -520 L 40 -520 z M 489.73047 -412.28906 C 492.87534 -408.86757 496.09809 -405.48004 499.4375 -402.14062 C 557.10405 -344.47408 626.93766 -315.64062 708.9375 -315.64062 C 722.27081 -315.64062 735.60419 -316.64064 748.9375 -318.64062 C 762.27081 -320.64062 775.60419 -323.3073 788.9375 -326.64062 C 767.60421 -274.64074 733.60407 -232.4739 686.9375 -200.14062 C 640.27093 -167.80736 587.60405 -151.64062 528.9375 -151.64062 C 451.60432 -151.64062 385.60406 -178.97407 330.9375 -233.64062 C 327.48999 -237.08813 324.17746 -240.59082 320.95312 -244.13086 L 489.73047 -412.28906 z " /></svg>
+<svg viewBox="0 -960 960 960" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M 440 -920 L 440 -760 L 520 -760 L 520 -920 L 440 -920 z M 818.67969 -885.5332 L 583.66602 -651.38281 C 553.04363 -670.31258 518.55019 -680 480 -680 C 424.66678 -680 377.49992 -660.49992 338.5 -621.5 C 299.50008 -582.50008 280 -535.33322 280 -480 C 280 -441.71314 289.5643 -407.43184 308.23633 -376.96484 L 97.058594 -166.5625 L 168.59375 -92.332031 L 263.80078 -187.18945 C 267.09506 -183.63709 270.46257 -180.11555 273.9375 -176.64062 C 343.93736 -106.64077 428.9377 -71.640625 528.9375 -71.640625 C 628.9373 -71.640625 713.93764 -106.64077 783.9375 -176.64062 C 853.93736 -246.64049 888.9375 -331.64082 888.9375 -431.64062 C 888.9375 -440.97395 888.60417 -450.14064 887.9375 -459.14062 C 887.27083 -468.14062 886.27083 -476.97398 884.9375 -485.64062 C 865.60421 -458.30735 840.60411 -436.47393 809.9375 -420.14062 C 779.27089 -403.80733 745.60409 -395.64062 708.9375 -395.64062 C 648.93762 -395.64062 597.93742 -416.64072 555.9375 -458.64062 C 552.62172 -461.95641 549.47084 -465.3433 546.42188 -468.77344 L 890.21484 -811.30273 L 818.67969 -885.5332 z M 212 -806 L 155 -747 L 256 -650 L 308 -706 L 212 -806 z M 480 -600 C 495.83397 -600 510.50253 -597.28065 524.08008 -592.01562 L 367.83594 -436.34375 C 362.67843 -449.80488 360 -464.32853 360 -480 C 360 -513.33327 371.66671 -541.66671 395 -565 C 418.33329 -588.33329 446.66673 -600 480 -600 z M 40 -520 L 40 -440 L 200 -440 L 200 -520 L 40 -520 z M 489.73047 -412.28906 C 492.87534 -408.86757 496.09809 -405.48004 499.4375 -402.14062 C 557.10405 -344.47408 626.93766 -315.64062 708.9375 -315.64062 C 722.27081 -315.64062 735.60419 -316.64064 748.9375 -318.64062 C 762.27081 -320.64062 775.60419 -323.3073 788.9375 -326.64062 C 767.60421 -274.64074 733.60407 -232.4739 686.9375 -200.14062 C 640.27093 -167.80736 587.60405 -151.64062 528.9375 -151.64062 C 451.60432 -151.64062 385.60406 -178.97407 330.9375 -233.64062 C 327.48999 -237.08813 324.17746 -240.59082 320.95312 -244.13086 L 489.73047 -412.28906 z " /></svg>

package/icons/mode-dark.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M480-120q-150 0-255-105T120-480q0-150 105-255t255-105q14 0 27.5 1t26.5 3q-41 29-65.5 75.5T444-660q0 90 63 153t153 63q55 0 101-24.5t75-65.5q2 13 3 26.5t1 27.5q0 150-105 255T480-120Zm0-80q88 0 158-48.5T740-375q-20 5-40 8t-40 3q-123 0-209.5-86.5T364-660q0-20 3-40t8-40q-78 32-126.5 102T200-480q0 116 82 198t198 82Zm-10-270Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M480-120q-150 0-255-105T120-480q0-150 105-255t255-105q14 0 27.5 1t26.5 3q-41 29-65.5 75.5T444-660q0 90 63 153t153 63q55 0 101-24.5t75-65.5q2 13 3 26.5t1 27.5q0 150-105 255T480-120Zm0-80q88 0 158-48.5T740-375q-20 5-40 8t-40 3q-123 0-209.5-86.5T364-660q0-20 3-40t8-40q-78 32-126.5 102T200-480q0 116 82 198t198 82Zm-10-270Z"/></svg>

package/icons/mode-light.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M480-360q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35Zm0 80q-83 0-141.5-58.5T280-480q0-83 58.5-141.5T480-680q83 0 141.5 58.5T680-480q0 83-58.5 141.5T480-280ZM200-440H40v-80h160v80Zm720 0H760v-80h160v80ZM440-760v-160h80v160h-80Zm0 720v-160h80v160h-80ZM256-650l-101-97 57-59 96 100-52 56Zm492 496-97-101 53-55 101 97-57 59Zm-98-550 97-101 59 57-100 96-56-52ZM154-212l101-97 55 53-97 101-59-57Zm326-268Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M480-360q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35Zm0 80q-83 0-141.5-58.5T280-480q0-83 58.5-141.5T480-680q83 0 141.5 58.5T680-480q0 83-58.5 141.5T480-280ZM200-440H40v-80h160v80Zm720 0H760v-80h160v80ZM440-760v-160h80v160h-80Zm0 720v-160h80v160h-80ZM256-650l-101-97 57-59 96 100-52 56Zm492 496-97-101 53-55 101 97-57 59Zm-98-550 97-101 59 57-100 96-56-52ZM154-212l101-97 55 53-97 101-59-57Zm326-268Z"/></svg>

package/icons/more_vert.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M480-160q-33 0-56.5-23.5T400-240q0-33 23.5-56.5T480-320q33 0 56.5 23.5T560-240q0 33-23.5 56.5T480-160Zm0-240q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Zm0-240q-33 0-56.5-23.5T400-720q0-33 23.5-56.5T480-800q33 0 56.5 23.5T560-720q0 33-23.5 56.5T480-640Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M480-160q-33 0-56.5-23.5T400-240q0-33 23.5-56.5T480-320q33 0 56.5 23.5T560-240q0 33-23.5 56.5T480-160Zm0-240q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Zm0-240q-33 0-56.5-23.5T400-720q0-33 23.5-56.5T480-800q33 0 56.5 23.5T560-720q0 33-23.5 56.5T480-640Z"/></svg>

package/icons/settings.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm70-80h79l14-106q31-8 57.5-23.5T639-327l99 41 39-68-86-65q5-14 7-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99 42q-22-23-48.5-38.5T533-694l-13-106h-79l-14 106q-31 8-57.5 23.5T321-633l-99-41-39 68 86 64q-5 15-7 30t-2 32q0 16 2 31t7 30l-86 65 39 68 99-42q22 23 48.5 38.5T427-266l13 106Zm42-180q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Zm-2-140Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm70-80h79l14-106q31-8 57.5-23.5T639-327l99 41 39-68-86-65q5-14 7-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99 42q-22-23-48.5-38.5T533-694l-13-106h-79l-14 106q-31 8-57.5 23.5T321-633l-99-41-39 68 86 64q-5 15-7 30t-2 32q0 16 2 31t7 30l-86 65 39 68 99-42q22 23 48.5 38.5T427-266l13 106Zm42-180q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Zm-2-140Z"/></svg>

package/icons/show.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M480-320q75 0 127.5-52.5T660-500q0-75-52.5-127.5T480-680q-75 0-127.5 52.5T300-500q0 75 52.5 127.5T480-320Zm0-72q-45 0-76.5-31.5T372-500q0-45 31.5-76.5T480-608q45 0 76.5 31.5T588-500q0 45-31.5 76.5T480-392Zm0 192q-146 0-266-81.5T40-500q54-137 174-218.5T480-800q146 0 266 81.5T920-500q-54 137-174 218.5T480-200Zm0-300Zm0 220q113 0 207.5-59.5T832-500q-50-101-144.5-160.5T480-720q-113 0-207.5 59.5T128-500q50 101 144.5 160.5T480-280Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M480-320q75 0 127.5-52.5T660-500q0-75-52.5-127.5T480-680q-75 0-127.5 52.5T300-500q0 75 52.5 127.5T480-320Zm0-72q-45 0-76.5-31.5T372-500q0-45 31.5-76.5T480-608q45 0 76.5 31.5T588-500q0 45-31.5 76.5T480-392Zm0 192q-146 0-266-81.5T40-500q54-137 174-218.5T480-800q146 0 266 81.5T920-500q-54 137-174 218.5T480-200Zm0-300Zm0 220q113 0 207.5-59.5T832-500q-50-101-144.5-160.5T480-720q-113 0-207.5 59.5T128-500q50 101 144.5 160.5T480-280Z"/></svg>

package/icons/strikethrough_s.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M486-160q-76 0-135-45t-85-123l88-38q14 48 48.5 79t85.5 31q42 0 76-20t34-64q0-18-7-33t-19-27h112q5 14 7.5 28.5T694-340q0 86-61.5 133T486-160ZM80-480v-80h800v80H80Zm402-326q66 0 115.5 32.5T674-674l-88 39q-9-29-33.5-52T484-710q-41 0-68 18.5T386-640h-96q2-69 54.5-117.5T482-806Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M486-160q-76 0-135-45t-85-123l88-38q14 48 48.5 79t85.5 31q42 0 76-20t34-64q0-18-7-33t-19-27h112q5 14 7.5 28.5T694-340q0 86-61.5 133T486-160ZM80-480v-80h800v80H80Zm402-326q66 0 115.5 32.5T674-674l-88 39q-9-29-33.5-52T484-710q-41 0-68 18.5T386-640h-96q2-69 54.5-117.5T482-806Z"/></svg>

package/icons/table-visibility.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v333q-19-11-39-20t-41-16v-137H520v137q-46 14-86 40t-74 63H200v160h82q11 22 22 42t24 38H200Zm0-320h240v-160H200v160Zm0-240h560v-80H200v80Zm280 200Zm0 0Zm0 0Zm0 0ZM640-40q-91 0-168-48T360-220q35-84 112-132t168-48q91 0 168 48t112 132q-35 84-112 132T640-40Zm0-80q57 0 107.5-26t82.5-74q-32-48-82.5-74T640-320q-57 0-107.5 26T450-220q32 48 82.5 74T640-120Zm0-40q-25 0-42.5-17.5T580-220q0-25 17.5-42.5T640-280q25 0 42.5 17.5T700-220q0 25-17.5 42.5T640-160Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v333q-19-11-39-20t-41-16v-137H520v137q-46 14-86 40t-74 63H200v160h82q11 22 22 42t24 38H200Zm0-320h240v-160H200v160Zm0-240h560v-80H200v80Zm280 200Zm0 0Zm0 0Zm0 0ZM640-40q-91 0-168-48T360-220q35-84 112-132t168-48q91 0 168 48t112 132q-35 84-112 132T640-40Zm0-80q57 0 107.5-26t82.5-74q-32-48-82.5-74T640-320q-57 0-107.5 26T450-220q32 48 82.5 74T640-120Zm0-40q-25 0-42.5-17.5T580-220q0-25 17.5-42.5T640-280q25 0 42.5 17.5T700-220q0 25-17.5 42.5T640-160Z"/></svg>

package/icons/table.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm240-240H200v160h240v-160Zm80 0v160h240v-160H520Zm-80-80v-160H200v160h240Zm80 0h240v-160H520v160ZM200-680h560v-80H200v80Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm240-240H200v160h240v-160Zm80 0v160h240v-160H520Zm-80-80v-160H200v160h240Zm80 0h240v-160H520v160ZM200-680h560v-80H200v80Z"/></svg>

package/icons/warning.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="m40-120 440-760 440 760H40Zm138-80h604L480-720 178-200Zm302-40q17 0 28.5-11.5T520-280q0-17-11.5-28.5T480-320q-17 0-28.5 11.5T440-280q0 17 11.5 28.5T480-240Zm-40-120h80v-200h-80v200Zm40-100Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="m40-120 440-760 440 760H40Zm138-80h604L480-720 178-200Zm302-40q17 0 28.5-11.5T520-280q0-17-11.5-28.5T480-320q-17 0-28.5 11.5T440-280q0 17 11.5 28.5T480-240Zm-40-120h80v-200h-80v200Zm40-100Z"/></svg>

package/icons/wysiwyg.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-480H200v480Zm80-280v-80h400v80H280Zm0 160v-80h240v80H280Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-480H200v480Zm80-280v-80h400v80H280Zm0 160v-80h240v80H280Z"/></svg>

package/package.json

@@ -1,20 +1,28 @@
 {
   "name": "kempo-ui",
-  "version": "0.0.76",
+  "version": "0.0.78",
   "type": "module",
   "description": "A Lit based web-component library",
   "main": "index.js",
+  "bin": {
+    "kempo-icon": "./bin/icon.js",
+    "kempo-geticon": "./bin/get_icon.js",
+    "kempo-listicons": "./bin/list_icons.js",
+    "kempo-highlightcode": "./bin/highlight_code.js"
+  },
   "scripts": {
     "build": "node scripts/build.js",
     "prod": "node scripts/docs.js",
     "dev": "node scripts/docs.js --src --logging silent",
-    "geticon": "node scripts/getIcon.js",
+    "icon": "node bin/icon.js",
+    "geticon": "node bin/get_icon.js",
+    "listicons": "node bin/list_icons.js",
+    "highlightcode": "node bin/highlight_code.js",
     "test": "npx kempo-test",
     "test:gui": "npx kempo-test --gui",
     "test:browser": "npx kempo-test -b",
     "test:node": "npx kempo-test -n",
-    "update-kempo-css": "node scripts/update-kempo-css.js",
-    "update-kempo-ui-cdn": "node scripts/update-kempo-ui-cdn.js"
+    "update-kempo-css": "node scripts/update-kempo-css.js"
   },
   "repository": {
     "type": "git",
@@ -33,6 +41,7 @@
     "terser": "^5.43.1"
   },
   "dependencies": {
+    "@inquirer/prompts": "^8.3.0",
     "kempo-css": "^1.3.11"
   }
 }

package/src/components/Resize.js

@@ -162,6 +162,7 @@ export default class Resize extends ShadowComponent {
 		}
 		:host(:not([resizing=""])) #main {
 			pointer-events: none;
+			user-select: none;
 		}
 		:host([resizing="side"]) #side,
 		:host([resizing="corner"]) #side,

package/src/components/Table.js

@@ -80,86 +80,72 @@ export default class Table extends ShadowComponent {
 
   updated(changedProperties) {
     super.updated(changedProperties);
-    
-    // Update select-all checkbox state when selection or page changes
-    if (this.enableSelection) {
+
+    if(this.enableSelection) {
       const selectAllCheckbox = this.shadowRoot.getElementById('select-all');
-      if (selectAllCheckbox) {
+      if(selectAllCheckbox) {
         selectAllCheckbox.checked = this.allOnPageSelected();
       }
     }
-
-    // Update container widths
-    this.updateContainerWidths();
-  }
-
-  updateContainerWidths() {
-    const totalWidth = this.columnSizes.total + 'px';
-    const fieldsEl = this.shadowRoot.getElementById('fields');
-    const topEl = this.shadowRoot.getElementById('top');
-    const bottomEl = this.shadowRoot.getElementById('bottom');
-    const recordsEl = this.shadowRoot.getElementById('records');
-
-    if (fieldsEl) fieldsEl.style.width = totalWidth;
-    if (topEl) topEl.style.width = totalWidth;
-    if (bottomEl) bottomEl.style.width = totalWidth;
-    if (recordsEl) recordsEl.style.width = totalWidth;
   }
 
   /*
     Rendering Functions
   */
 
-  renderFieldsTemplate() {
-    this.calculateColumnSizes();
-    this.hasTopControls() ? this.setAttribute('top-controls', 'true') : this.removeAttribute('top-controls');
-    this.hasBottomControls() ? this.setAttribute('bottom-controls', 'true') : this.removeAttribute('bottom-controls');
+  renderColgroupTemplate() {
+    const cols = [];
+    if(this.enableSelection) cols.push(html`<col style="width: 40px" />`);
+    if(this.hasBeforeControls()) cols.push(html`<col style="width: ${this.columnSizes.beforeControls}px" />`);
+    this.fields.forEach(({ size, hidden }) => {
+      if(hidden) return;
+      cols.push(size ? html`<col style="width: ${size}px" />` : html`<col />`);
+    });
+    if(this.hasAfterControls()) cols.push(html`<col style="width: ${this.columnSizes.afterControls}px" />`);
+    return cols;
+  }
 
-    const fieldCells = [];
+  getColumnCount() {
+    let count = 0;
+    if(this.enableSelection) count++;
+    if(this.hasBeforeControls()) count++;
+    this.fields.forEach(({ hidden }) => { if(!hidden) count++; });
+    if(this.hasAfterControls()) count++;
+    return count;
+  }
 
-    if (this.enableSelection) {
-      fieldCells.push(html`
-        <div class="field controls cell field-select" style="width: 40px">
-          <input 
-            type="checkbox" 
-            id="select-all"
-            @change=${this.handleSelectAllChange}
-          />
-        </div>
+  renderFieldsTemplate() {
+    const headers = [];
+    if(this.enableSelection) {
+      headers.push(html`
+        <th class="controls field-select">
+          <input type="checkbox" id="select-all" @change=${this.handleSelectAllChange} />
+        </th>
       `);
     }
-    
-    if (this.hasBeforeControls()) {
-      fieldCells.push(html`
-        <div class="field cell field-before-controls" style="width: ${this.columnSizes.beforeControls}px"></div>
-      `);
+    if(this.hasBeforeControls()) {
+      headers.push(html`<th class="controls field-before-controls"></th>`);
     }
-    
     this.fields.forEach(({ name, label, hidden }) => {
-      if (hidden) return;
+      if(hidden) return;
       const sortItem = this.sort.find(item => item.name === name);
       const isCurrentSort = this.sort.length > 0 && this.sort[this.sort.length - 1].name === name;
       const sortClass = sortItem ? (sortItem.asc ? 'sort-asc' : 'sort-desc') : '';
-      
-      fieldCells.push(html`
-        <div 
-          class="field cell ${sortClass}"
-          style="width: ${this.columnSizes[name]}px; ${this.enableSorting ? 'cursor: pointer;' : ''}"
+      headers.push(html`
+        <th
+          class="${sortClass}"
+          style="${this.enableSorting ? 'cursor: pointer;' : ''}"
           @click=${this.enableSorting ? () => this.handleFieldClick(name) : null}
         >
           ${label}
           ${isCurrentSort ? html`<k-icon name="arrow" direction="${sortItem.asc ? 'down' : 'up'}" class="icon-sort"></k-icon>` : ''}
-        </div>
+        </th>
       `);
     });
-    
-    if (this.hasAfterControls()) {
-      fieldCells.push(html`
-        <div class="field cell field-after-controls" style="width: ${this.columnSizes.afterControls}px"></div>
-      `);
+    if(this.hasAfterControls()) {
+      headers.push(html`<th class="controls field-after-controls"></th>`);
     }
-
-    return fieldCells;
+    return headers;
   }
 
   renderRecordsTemplate() {
@@ -182,7 +168,7 @@ export default class Table extends ShadowComponent {
       } else {
         if (fetchStart === null) fetchStart = start + idx;
         fetchCount++;
-        return html`<div class="record fetching"><div class="cell">Loading...</div></div>`;
+        return html`<tr class="record fetching"><td class="cell" colspan="${this.getColumnCount()}">Loading...</td></tr>`;
       }
     });
 
@@ -202,42 +188,41 @@ export default class Table extends ShadowComponent {
 
   renderRecordTemplate(record) {
     const recordCells = [];
-    
-    if (this.enableSelection) {
+
+    if(this.enableSelection) {
       recordCells.push(html`
-        <div class="cell selection controls" style="width: 40px">
-          <input 
-            type="checkbox" 
+        <td class="cell selection controls">
+          <input
+            type="checkbox"
             .checked=${record[selected]}
             @change=${(e) => this.handleRecordSelectionChange(record, e)}
           />
-        </div>
+        </td>
       `);
     }
-    
-    if (this.hasBeforeControls()) {
+
+    if(this.hasBeforeControls()) {
       recordCells.push(this.renderBeforeControlsTemplate());
     }
-    
+
     this.fields.forEach(({ name, formatter, calculator, type, editor, hidden }) => {
-      if (hidden) return;
+      if(hidden) return;
       let value = record[name] || '';
-      
       recordCells.push(html`
-        <div class="cell" data-field=${name} style="width: ${this.columnSizes[name]}px">
+        <td class="cell" data-field=${name}>
           ${record[editing] ? this.renderEditingCell(record, name, value, calculator, editor, type) : this.renderDisplayCell(record, name, value, calculator, formatter)}
-        </div>
+        </td>
       `);
     });
-    
-    if (this.hasAfterControls()) {
+
+    if(this.hasAfterControls()) {
       recordCells.push(this.renderAfterControlsTemplate());
     }
-    
+
     return html`
-      <div class="record ${record[editing] ? 'editing' : ''}" data-index=${record[index]}>
+      <tr class="record ${record[editing] ? 'editing' : ''}" data-index=${record[index]}>
         ${recordCells}
-      </div>
+      </tr>
     `;
   }
 
@@ -280,55 +265,37 @@ export default class Table extends ShadowComponent {
 
   renderBeforeControlsTemplate() {
     const controls = [];
-    
     this.querySelectorAll('[slot="before"]').forEach(control => {
       const tagName = control.tagName.toLowerCase();
       const newControl = document.createElement(tagName);
-      
       Array.from(control.attributes).forEach(attr => {
-        if(attr.name !== 'slot'){
-          newControl.setAttribute(attr.name, attr.value);
-        }
+        if(attr.name !== 'slot') newControl.setAttribute(attr.name, attr.value);
       });
-      
-      if(control.innerHTML){
-        newControl.innerHTML = control.innerHTML;
-      }
-      
+      if(control.innerHTML) newControl.innerHTML = control.innerHTML;
       controls.push(newControl);
     });
-    
     return html`
-      <div class="cell controls controls-before" style="width: ${this.columnSizes.beforeControls}px">
+      <td class="cell controls controls-before">
         ${controls}
-      </div>
+      </td>
     `;
   }
 
   renderAfterControlsTemplate() {
     const controls = [];
-    
     this.querySelectorAll('[slot="after"]').forEach(control => {
       const tagName = control.tagName.toLowerCase();
       const newControl = document.createElement(tagName);
-      
       Array.from(control.attributes).forEach(attr => {
-        if(attr.name !== 'slot'){
-          newControl.setAttribute(attr.name, attr.value);
-        }
+        if(attr.name !== 'slot') newControl.setAttribute(attr.name, attr.value);
       });
-      
-      if(control.innerHTML){
-        newControl.innerHTML = control.innerHTML;
-      }
-      
+      if(control.innerHTML) newControl.innerHTML = control.innerHTML;
       controls.push(newControl);
     });
-    
     return html`
-      <div class="cell controls controls-after" style="width: ${this.columnSizes.afterControls}px">
+      <td class="cell controls controls-after">
         ${controls}
-      </div>
+      </td>
     `;
   }
 
@@ -949,54 +916,19 @@ export default class Table extends ShadowComponent {
   }
 
   calculateColumnSizes() {
-    const newSizes = {};
-    newSizes.total = 0;
-    
-    if (this.enableSelection) newSizes.total += 40;
-    
     const beforeEls = Array.from(this.querySelectorAll('[slot="before"]'));
     const afterEls = Array.from(this.querySelectorAll('[slot="after"]'));
-    
-    newSizes.beforeControls = beforeEls.reduce((total, el) => total + (el.maxWidth || 40), 0);
-    newSizes.afterControls = afterEls.reduce((total, el) => total + (el.maxWidth || 40), 0);
-    
-    if (this.hasBeforeControls()) newSizes.total += newSizes.beforeControls;
-    if (this.hasAfterControls()) newSizes.total += newSizes.afterControls;
-    
-    this.fields.forEach(field => {
-      if (field.size) {
-        newSizes[field.name] = field.size;
-        newSizes.total += field.size;
-      } else {
-        let maxLength = 0;
-        this.records.slice(0, 100).forEach(record => {
-          if(record === null) return;
-          let value = record[field.name];
-          if (field.calculator) {
-            value = field.calculator(record, this);
-          }
-          if (field.formatter) {
-            value = field.formatter(value);
-          }
-          if (value && value.toString().length > maxLength) {
-            maxLength = value.toString().length;
-          }
-        });
-        newSizes[field.name] = Math.max((maxLength * 10 + 32), 128);
-        if (!field.hidden) newSizes.total += newSizes[field.name];
-      }
-    });
-    
+    const newSizes = {
+      beforeControls: beforeEls.reduce((total, el) => total + (el.maxWidth || 40), 0),
+      afterControls: afterEls.reduce((total, el) => total + (el.maxWidth || 40), 0)
+    };
     const hasUndefinedMaxWidth = [...beforeEls, ...afterEls].some(el => el.maxWidth === undefined);
-    
-    if (JSON.stringify(this.columnSizes) !== JSON.stringify(newSizes)) {
+    if(JSON.stringify(this.columnSizes) !== JSON.stringify(newSizes)) {
       this.columnSizes = newSizes;
     }
-    
-    if (hasUndefinedMaxWidth) {
+    if(hasUndefinedMaxWidth) {
       setTimeout(() => this.calculateColumnSizes(), 0);
     }
-    
     return this.columnSizes;
   }
 
@@ -1040,13 +972,12 @@ export default class Table extends ShadowComponent {
   /* Rendering */
 
   render() {
-    if (!this.records || !this.fields) {
+    if(!this.records || !this.fields) {
       return html`
         <div id="wrapper">
           <div id="top"><slot name="top"></slot></div>
-          <div id="table">
-            <div id="fields"></div>
-            <div id="records"></div>
+          <div id="table-container">
+            <table><thead><tr></tr></thead><tbody></tbody></table>
           </div>
           <div id="bottom"><slot></slot></div>
         </div>
@@ -1063,16 +994,23 @@ export default class Table extends ShadowComponent {
 
     return html`
       <div id="wrapper">
-        <div id="top" style="width: ${this.columnSizes.total}px"><slot name="top"></slot></div>
-        <div id="table">
-          <div id="fields" style="width: ${this.columnSizes.total}px">
-            ${this.renderFieldsTemplate()}
-          </div>
-          <div id="records" style="width: ${this.columnSizes.total}px">
-            ${this.renderRecordsTemplate()}
-          </div>
+        <div id="top"><slot name="top"></slot></div>
+        <div id="table-container">
+          <table>
+            <colgroup>
+              ${this.renderColgroupTemplate()}
+            </colgroup>
+            <thead>
+              <tr>
+                ${this.renderFieldsTemplate()}
+              </tr>
+            </thead>
+            <tbody>
+              ${this.renderRecordsTemplate()}
+            </tbody>
+          </table>
         </div>
-        <div id="bottom" style="width: ${this.columnSizes.total}px"><slot></slot></div>
+        <div id="bottom"><slot></slot></div>
       </div>
       <div style="display: none">
         <slot name="before"></slot>
@@ -1084,40 +1022,67 @@ export default class Table extends ShadowComponent {
   static styles = css`
     :host {
       display: block;
-      width: 100%;
-      overflow: auto;
       margin-bottom: var(--spacer);
     }
     #wrapper {
-      width: min-content;
       border: 1px solid var(--c_border);
       border-radius: var(--radius);
+      overflow: hidden;
     }
-    #table {
-      width: min-content;
+    #table-container {
+      overflow-x: auto;
     }
-    #fields,
-    .record {
-      display: flex;
+    table {
+      width: 100%;
+      border-collapse: collapse;
     }
-    #fields {
+    thead tr {
       background-color: var(--c_bg__alt);
-      border-bottom: 1px solid var(--c_border);
     }
-    .record:not([editing="true"]) .cell:not(.controls),
-    #fields .cell:not(.controls) {
+    th, td {
       padding: calc(0.5 * var(--spacer)) var(--spacer);
+      vertical-align: middle;
     }
-    .cell {
-      display: flex;
-      align-items: center;
+    th:not(:last-child),
+    td:not(:last-child) {
+      border-right: 1px solid var(--c_border);
+    }
+    th:first-child,
+    td:first-child {
+      border-left: none;
     }
-    .cell:not(:first-child) {
-      border-left: 1px solid var(--c_border);
+    th:last-child,
+    td:last-child {
+      border-right: none;
     }
-    .record:not(:last-child) .cell {
+    thead tr th {
+      border-top: none;
       border-bottom: 1px solid var(--c_border);
     }
+    tbody tr:not(:last-child) td {
+      border-bottom: 1px solid var(--c_border);
+    }
+    tbody tr:last-child td {
+      border-bottom: none;
+    }
+    th.controls,
+    td.controls {
+      padding: 0;
+    }
+    .field-select,
+    .selection {
+      width: 40px;
+      text-align: center;
+    }
+    .field-select input,
+    .selection input {
+      width: 1.25rem;
+      height: 1.25rem;
+    }
+    .icon-sort {
+      float: right;
+      opacity: 0.5;
+    }
     #top, #bottom {
       display: flex;
       width: 100%;
@@ -1136,21 +1101,6 @@ export default class Table extends ShadowComponent {
     :host(:not([bottom-controls])) #bottom {
       display: none;
     }
-    .field-select,
-    .selection {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-    .field-select input,
-    .selection input {
-      width: 1.25rem;
-      height: 1.25rem;
-    }
-    .icon-sort {
-      float: right;
-      opacity: 0.5;
-    }
   `;
 
   /*

package/src/components/Tree.js

@@ -59,15 +59,14 @@ export default class Tree extends ShadowComponent {
 
 	/* Static Methods */
 	static renderValue(value, key = null, depth = 0, maxDepth = 0){
-		const LeafClass = Tree.nodes.find(n => n.detect(value));
-		if(LeafClass){
-			const instance = new LeafClass(value);
+		const NodeClass = Tree.nodes.find(n => n.detect(value));
+		if(NodeClass && NodeClass.prototype.getChildren === TreeNode.prototype.getChildren){
 			const keyLabel = key !== null
 				? html`<span class="${typeof key === 'number' ? 'tc-muted' : ''}">${key}: </span>`
 				: '';
-			return html`<span class="d-b">${keyLabel}${instance.renderLabel()}</span>`;
+			return html`<span class="d-b">${keyLabel}${new NodeClass(value).renderLabel()}</span>`;
 		}
-		const el = document.createElement(TreeNode.nodeTag);
+		const el = document.createElement((NodeClass ?? TreeNode).nodeTag);
 		el.value = value;
 		el.key = key;
 		el.depth = depth;

package/icons/circle.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>

package/icons/compare.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M400-40v-80H200q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h200v-80h80v880h-80ZM200-240h200v-240L200-240Zm360 120v-360l200 240v-520H560v-80h200q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H560Z"/></svg>