@dpa-id-components/dpa-shared-components 18.0.3 → 18.1.0

package/src/assets/icons/picture-gallery.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg
+    width="12"
+    height="12"
+    viewBox="0 0 12 12"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M9.8114 0.424316C9.86295 0.429564 9.91371 0.437831 9.96375 0.447754L9.97351 0.449707C9.98863 0.4528 10.0035 0.456943 10.0184 0.460449C10.0526 0.468471 10.0866 0.476685 10.12 0.486816C10.1391 0.492631 10.1578 0.499857 10.1766 0.506348C10.2089 0.517458 10.241 0.52847 10.2723 0.541504C10.2839 0.546321 10.2951 0.552055 10.3065 0.557129C10.3423 0.573006 10.3776 0.589598 10.412 0.60791C10.4293 0.617106 10.4459 0.627417 10.4628 0.637207C10.4874 0.651511 10.5122 0.665619 10.536 0.681152C10.556 0.694178 10.5752 0.708304 10.5946 0.722168C10.6194 0.739922 10.6441 0.757777 10.6678 0.776855C10.6823 0.788424 10.6958 0.800948 10.7098 0.812988C10.7338 0.833601 10.7574 0.854519 10.7802 0.876465C10.7937 0.889581 10.8071 0.902929 10.8202 0.916504C10.8431 0.940209 10.8651 0.964695 10.8866 0.989746C10.9006 1.00608 10.9142 1.02267 10.9276 1.03955C10.9428 1.0587 10.9572 1.07831 10.9716 1.09814C10.9871 1.11975 11.0029 1.1412 11.0175 1.16357C11.0336 1.18842 11.0485 1.21399 11.0634 1.23975C11.0728 1.25616 11.0818 1.27278 11.0907 1.28955C11.1078 1.32181 11.1236 1.35469 11.1385 1.38818C11.1445 1.40149 11.1505 1.41473 11.1561 1.42822C11.1687 1.45862 11.1795 1.48971 11.1903 1.521C11.1971 1.54083 11.2047 1.5604 11.2108 1.58057C11.236 1.66392 11.2538 1.75 11.2655 1.83838C11.2677 1.85531 11.2716 1.87207 11.2733 1.88916C11.2788 1.94344 11.2821 1.99849 11.2821 2.0542V7.66943L11.2733 7.8374C11.2719 7.85121 11.2682 7.86471 11.2665 7.87842C11.2548 7.97057 11.2362 8.06027 11.2098 8.14697C11.2031 8.16911 11.195 8.19067 11.1874 8.2124C11.1777 8.24 11.1682 8.26753 11.1571 8.29443C11.1485 8.31536 11.1383 8.33548 11.1288 8.35596C11.1176 8.38021 11.107 8.40463 11.0946 8.42822C11.0783 8.45933 11.0601 8.48915 11.0419 8.51904C11.035 8.53041 11.0285 8.54204 11.0214 8.55322C11.0038 8.58064 10.9849 8.60703 10.9657 8.6333C10.9525 8.65137 10.9396 8.66951 10.9257 8.68701C10.911 8.70549 10.8952 8.72291 10.8798 8.74072C10.8612 8.76219 10.8428 8.78373 10.8231 8.8042C10.8067 8.82131 10.7895 8.83762 10.7723 8.854C10.7536 8.87185 10.7343 8.88881 10.7147 8.90576C10.6948 8.92305 10.6749 8.94022 10.6542 8.95654C10.6359 8.97093 10.6174 8.98493 10.5985 8.99854C10.5769 9.01411 10.5555 9.02991 10.5331 9.04443C10.5108 9.05889 10.4877 9.07206 10.4647 9.08545C10.4426 9.09834 10.4201 9.11069 10.3973 9.12256C10.374 9.13472 10.3501 9.14569 10.326 9.15674C10.3062 9.16586 10.2867 9.17574 10.2665 9.18408C10.2367 9.19634 10.2063 9.20676 10.1757 9.21729C10.1558 9.22411 10.1363 9.23172 10.1161 9.23779C10.0843 9.24735 10.0519 9.25456 10.0194 9.26221C10.0012 9.2665 9.98321 9.2722 9.96472 9.27588C9.92715 9.28335 9.88892 9.28762 9.85046 9.29248C9.83547 9.29437 9.82066 9.29783 9.80554 9.29932C9.8039 9.29948 9.8023 9.30014 9.80066 9.30029L9.64343 9.30811H9.05847V9.89307C9.05847 9.96698 9.05135 10.0395 9.04187 10.1108C9.03728 10.1453 9.03294 10.1796 9.02625 10.2134C9.01093 10.2906 8.98852 10.3651 8.96277 10.438C8.95341 10.4645 8.94512 10.4912 8.93445 10.5171C8.92682 10.5356 8.91832 10.5536 8.91003 10.5718C8.89925 10.5954 8.88869 10.6191 8.87683 10.6421C8.86196 10.671 8.84451 10.6982 8.828 10.7261C8.81673 10.7451 8.80584 10.7642 8.79382 10.7827C8.78244 10.8002 8.77069 10.8174 8.75867 10.8345C8.73972 10.8613 8.72056 10.8879 8.70007 10.9136C8.6901 10.9261 8.68013 10.9385 8.6698 10.9507C8.64891 10.9753 8.62665 10.9986 8.60437 11.022C8.58798 11.0392 8.57168 11.0563 8.55457 11.0728C8.5341 11.0924 8.51255 11.1108 8.49109 11.1294C8.47397 11.1442 8.45706 11.1592 8.43933 11.1733C8.41584 11.1921 8.39158 11.2096 8.36707 11.2271C8.35145 11.2382 8.33621 11.2497 8.32019 11.2603C8.29251 11.2785 8.26405 11.2954 8.23523 11.312C8.21805 11.3219 8.20104 11.332 8.18347 11.3413C8.16018 11.3536 8.13613 11.3643 8.11218 11.3755C8.08791 11.3868 8.06384 11.3985 8.03894 11.4087C8.01389 11.4189 7.98842 11.428 7.96277 11.437C7.94172 11.4444 7.92073 11.4519 7.89929 11.4585C7.86721 11.4683 7.83452 11.476 7.80164 11.4839C7.78209 11.4886 7.76285 11.4946 7.74304 11.4985C7.73078 11.501 7.71829 11.5022 7.70593 11.5044C7.66688 11.5113 7.62772 11.5189 7.58777 11.5229L7.4198 11.5317H1.80457L1.63757 11.5229C1.60954 11.5201 1.58216 11.5135 1.55457 11.5093C1.53134 11.5057 1.50812 11.5031 1.48523 11.4985C1.46946 11.4954 1.45396 11.4914 1.43835 11.4878C1.40245 11.4796 1.36688 11.471 1.33191 11.4604C1.31174 11.4544 1.29218 11.4468 1.27234 11.4399C1.24909 11.4319 1.22576 11.4245 1.203 11.4155C1.17865 11.4059 1.1545 11.396 1.13074 11.3853C1.10453 11.3734 1.07904 11.3603 1.05359 11.3472C1.03648 11.3383 1.01956 11.3293 1.00281 11.3198C0.972806 11.3029 0.943711 11.2848 0.914917 11.2661C0.90324 11.2585 0.89123 11.2515 0.879761 11.2437C0.75435 11.1576 0.64078 11.0556 0.543823 10.939C0.538044 10.932 0.532887 10.9245 0.527222 10.9175C0.468092 10.8439 0.414889 10.7654 0.369019 10.6821C0.36551 10.6758 0.362679 10.669 0.359253 10.6626C0.339681 10.6259 0.321362 10.5886 0.304565 10.5503C0.298596 10.5367 0.292595 10.5231 0.286987 10.5093C0.274603 10.4788 0.263379 10.4478 0.252808 10.4165C0.247129 10.3997 0.241347 10.3828 0.236206 10.3657C0.224918 10.3282 0.215527 10.2901 0.206909 10.2515C0.204214 10.2394 0.200547 10.2275 0.19812 10.2153C0.188021 10.1647 0.179994 10.1132 0.174683 10.061C0.169069 10.0059 0.16687 9.94973 0.16687 9.89307V4.27686C0.166903 4.16756 0.17768 4.0608 0.19812 3.95752C0.213026 3.8822 0.23382 3.809 0.258667 3.73779C0.268638 3.70922 0.278432 3.68066 0.289917 3.65283C0.296875 3.63597 0.304879 3.6196 0.312378 3.60303C0.326162 3.57257 0.340765 3.54261 0.356323 3.51318C0.364715 3.49731 0.373798 3.48187 0.38269 3.46631C0.399904 3.43619 0.41737 3.40632 0.436401 3.37744C0.445302 3.36394 0.454459 3.35063 0.463745 3.3374C0.475018 3.32135 0.486098 3.30517 0.497925 3.28955L0.540894 3.23486C0.551913 3.22152 0.563645 3.20878 0.575073 3.1958C0.586191 3.18317 0.597757 3.17097 0.609253 3.15869C0.631131 3.13532 0.653436 3.11239 0.676636 3.09033C0.693176 3.07461 0.710232 3.05946 0.727417 3.04443C0.747094 3.02723 0.767474 3.01089 0.787964 2.99463C0.809997 2.97714 0.832414 2.9602 0.855347 2.94385C0.866745 2.93572 0.877913 2.92728 0.889526 2.91943L0.930542 2.89209L1.02429 2.8374C1.02979 2.83441 1.03535 2.83154 1.04089 2.82861C1.06956 2.81347 1.09914 2.80008 1.12878 2.78662C1.14481 2.77934 1.16034 2.77093 1.17664 2.76416C1.21333 2.74891 1.25096 2.73574 1.28894 2.72314C1.30065 2.71926 1.31227 2.71505 1.3241 2.71143C1.35428 2.70217 1.385 2.69454 1.41589 2.68701C1.43768 2.6817 1.4592 2.67484 1.48132 2.67041C1.48257 2.67016 1.48398 2.67066 1.48523 2.67041L1.63757 2.64795L1.80457 2.63916H2.38953V2.0542C2.38963 1.37548 2.80274 0.793917 3.3905 0.54541C3.58626 0.462598 3.80137 0.416572 4.02722 0.416504H9.64343C9.70009 0.416504 9.75622 0.418699 9.8114 0.424316ZM1.75769 4.04834C1.73249 4.0535 1.70894 4.06316 1.68738 4.07568C1.61787 4.11627 1.57117 4.19159 1.57117 4.27783V9.7749L5.01257 6.9165C5.29097 6.68495 5.67314 6.63828 5.995 6.78369C6.04098 6.80446 6.08574 6.82927 6.12878 6.85791L7.65417 7.87451V4.27783C7.65417 4.19127 7.60693 4.11616 7.53699 4.07568C7.51562 4.06338 7.49257 4.05344 7.46765 4.04834L7.4198 4.04346H1.80457L1.75769 4.04834ZM4.0282 1.8208C3.89912 1.8208 3.79396 1.92515 3.79382 2.0542V2.63916H7.42078C8.15549 2.63924 8.77791 3.12344 8.98523 3.79053C9.0011 3.84156 9.0144 3.89373 9.02527 3.94678C9.03622 4.00021 9.04408 4.05466 9.04968 4.10986C9.05526 4.16478 9.05845 4.22046 9.05847 4.27686V7.90576H9.59851C9.62571 7.90576 9.65098 7.90017 9.67468 7.89307C9.68889 7.88885 9.70283 7.8849 9.7157 7.87842C9.7497 7.86118 9.77876 7.8365 9.80261 7.80615C9.85066 7.74531 9.87683 7.66177 9.87683 7.57178V2.0542C9.8767 1.92515 9.77251 1.8208 9.64343 1.8208H4.0282ZM3.20886 4.74463C3.66096 4.74468 4.03862 5.06578 4.12585 5.49268C4.13828 5.55349 4.14439 5.61664 4.14441 5.68115L4.13953 5.77686C4.13025 5.86832 4.10774 5.95587 4.0741 6.0376C4.0462 6.10533 4.00988 6.16842 3.96765 6.22705C3.95785 6.24066 3.94787 6.25404 3.93738 6.26709C3.92984 6.27646 3.92183 6.28537 3.91394 6.29443C3.9053 6.30437 3.89662 6.31417 3.88757 6.32373C3.87584 6.33612 3.86383 6.34813 3.85144 6.35986C3.83971 6.37099 3.8276 6.38158 3.81531 6.39209C3.80791 6.39841 3.80044 6.40456 3.79285 6.41064C3.77815 6.42244 3.76332 6.43392 3.74792 6.44482C3.73855 6.45145 3.72922 6.45807 3.7196 6.46436C3.70371 6.47475 3.68732 6.48422 3.67078 6.49365C3.66291 6.49813 3.65534 6.50307 3.64734 6.50732C3.60219 6.53137 3.55491 6.55139 3.50574 6.56787C3.49657 6.57094 3.48768 6.57485 3.47839 6.57764C3.39298 6.60331 3.30261 6.61767 3.20886 6.61768L3.11316 6.61279C3.05311 6.60669 2.99451 6.59457 2.93835 6.57764C2.92471 6.57353 2.91169 6.5677 2.89832 6.56299C2.88125 6.55697 2.86413 6.5514 2.84753 6.54443C2.84161 6.54195 2.83582 6.53922 2.82996 6.53662C2.81005 6.52778 2.7905 6.51846 2.77136 6.5083C2.76117 6.5029 2.75105 6.49746 2.74109 6.4917C2.73035 6.48548 2.71933 6.47977 2.70886 6.47314L2.68542 6.45752C2.68176 6.45504 2.67831 6.45224 2.67468 6.44971C2.65634 6.43691 2.63833 6.42371 2.62097 6.40967C2.61325 6.40343 2.60603 6.39661 2.59851 6.39014C2.58541 6.37883 2.57288 6.36698 2.56042 6.35498C2.54947 6.34443 2.53863 6.33382 2.5282 6.32275C2.52061 6.3147 2.51304 6.30666 2.50574 6.29834C2.49416 6.28516 2.48239 6.27213 2.47156 6.2583C2.46265 6.24692 2.45455 6.23494 2.44617 6.22314C2.43884 6.21285 2.4316 6.2025 2.42468 6.19189C2.416 6.17857 2.40828 6.16466 2.40027 6.15088C2.37873 6.11386 2.35903 6.07567 2.34265 6.03564C2.33573 6.01871 2.33004 6.0013 2.3241 5.98389C2.32011 5.97221 2.31591 5.96061 2.31238 5.94873C2.3095 5.93905 2.30714 5.92924 2.30457 5.91943C2.2846 5.84333 2.27234 5.76358 2.27234 5.68115C2.27241 5.22826 2.59395 4.85123 3.02039 4.76416C3.08128 4.75171 3.1443 4.74463 3.20886 4.74463Z"
+    />
+  </svg>
+</template>

package/src/components/UiCheckbox/UiCheckbox.vue

@@ -1,31 +1,32 @@
 <template>
-  <label
-    class="flex flex-col"
+  <UiLabel
     :class="
       cn(
-        disabled ? 'text-gray-400' : 'cursor-pointer text-gray-900',
+        disabled ? 'text-gray-400' : undefined,
+        'flex cursor-pointer flex-col items-start',
         $attrs.class as string,
       )
     "
+    :for="id"
     :data-testid="$attrs['data-testid']"
   >
     <input
       :id="id"
-      class="peer relative size-0 appearance-none self-center focus:outline-hidden"
+      class="peer relative size-0 appearance-none focus:outline-hidden"
       :class="size"
       type="checkbox"
       :checked="checked"
       :aria-checked="checked"
       :disabled="disabled"
-      :aria-invalid="'errors' in $slots || showError"
+      :aria-invalid="Boolean($slots.errors || showError)"
       :aria-errormessage="
-        'errors' in $slots || showError ? `${id}-errors` : undefined
+        $slots.errors || showError ? `${id}-errors` : undefined
       "
       v-bind="{ ...$attrs, class: null, 'data-testid': null }"
       @change="handleChange"
     />
     <span
-      class="flex items-center peer-checked:opacity-100 before:box-border before:inline-block before:shrink-0 before:border-2 before:transition-colors before:content-[''] after:absolute after:block peer-checked:after:content-[url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyMCAyMCcgZmlsbD0nbm9uZSc+PHJlY3QgLz48cGF0aCBmaWxsLXJ1bGU9J2V2ZW5vZGQnIGNsaXAtcnVsZT0nZXZlbm9kZCcgZD0nTTguMjE5NjUgMTVDNy45ODk2NSAxNSA3Ljc2OTY1IDE0LjkwNSA3LjYxMjE1IDE0LjczNzVMMy41NTk2NSAxMC40MjE3QzMuMjQzODEgMTAuMDg2NyAzLjI2MTMxIDkuNTU5MTggMy41OTYzMSA5LjI0NDE4QzMuOTMyMTUgOC45MjkxOCA0LjQ1OTY1IDguOTQ1ODUgNC43NzM4MSA5LjI4MDg1TDguMjExMzEgMTIuOTRMMTUuMjE4IDUuMjcxNjhDMTUuNTI5NiA0LjkzMDg1IDE2LjA1NjMgNC45MDgzNSAxNi4zOTYzIDUuMjE4MzVDMTYuNzM1NSA1LjUyODM1IDE2Ljc1ODggNi4wNTU4NSAxNi40NDg4IDYuMzk1MDFMOC44MzQ2NSAxNC43MjgzQzguNjc4ODEgMTQuOSA4LjQ1NzE1IDE0Ljk5ODMgOC4yMjU0OCAxNUg4LjIxOTY1WicgZmlsbD0nd2hpdGUnLz48L3N2Zz4=)]"
+      class="flex items-center text-base peer-checked:opacity-100 before:box-border before:inline-block before:shrink-0 before:border-2 before:transition-colors before:content-[''] after:absolute after:block peer-checked:after:content-[url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyMCAyMCcgZmlsbD0nbm9uZSc+PHJlY3QgLz48cGF0aCBmaWxsLXJ1bGU9J2V2ZW5vZGQnIGNsaXAtcnVsZT0nZXZlbm9kZCcgZD0nTTguMjE5NjUgMTVDNy45ODk2NSAxNSA3Ljc2OTY1IDE0LjkwNSA3LjYxMjE1IDE0LjczNzVMMy41NTk2NSAxMC40MjE3QzMuMjQzODEgMTAuMDg2NyAzLjI2MTMxIDkuNTU5MTggMy41OTYzMSA5LjI0NDE4QzMuOTMyMTUgOC45MjkxOCA0LjQ1OTY1IDguOTQ1ODUgNC43NzM4MSA5LjI4MDg1TDguMjExMzEgMTIuOTRMMTUuMjE4IDUuMjcxNjhDMTUuNTI5NiA0LjkzMDg1IDE2LjA1NjMgNC45MDgzNSAxNi4zOTYzIDUuMjE4MzVDMTYuNzM1NSA1LjUyODM1IDE2Ljc1ODggNi4wNTU4NSAxNi40NDg4IDYuMzk1MDFMOC44MzQ2NSAxNC43MjgzQzguNjc4ODEgMTQuOSA4LjQ1NzE1IDE0Ljk5ODMgOC4yMjU0OCAxNUg4LjIxOTY1WicgZmlsbD0nd2hpdGUnLz48L3N2Zz4=)]"
       :class="{
         'before:size-5 after:size-5': size === 'medium',
         'before:size-4 after:size-4': size === 'small',
@@ -33,26 +34,27 @@
           color === 'blue',
         'before:border-gray-800 peer-checked:before:bg-gray-800 peer-hover:before:border-gray-900 peer-checked:peer-hover:before:bg-gray-900':
           color === 'gray',
-        'before:border-gray-500 peer-checked:before:bg-gray-500': disabled,
-        'before:mr-2': !!$slots.default,
+        'text-gray-400 before:border-gray-500 peer-checked:before:bg-gray-500':
+          disabled,
+        'before:mr-2': $slots.default,
       }"
     >
       <slot />
     </span>
 
     <div
-      v-if="'errors' in $slots || showError"
+      v-if="$slots.errors || showError"
       :id="`${id}-errors`"
       data-testid="errorMessage"
-      class="relative order-last mt-2 bg-alert-red-default px-4 py-1 text-xs leading-normal font-medium text-white transition-all duration-300 ease-in-out"
+      class="mt-2 bg-alert-red-default px-4 py-1 text-xs leading-normal font-medium text-white transition-all duration-150 ease-in-out peer-aria-invalid:peer-hover:bg-alert-red-dark peer-aria-invalid:peer-focus:bg-alert-red-dark"
     >
-      <slot v-if="'errors' in $slots" name="errors" />
+      <slot v-if="$slots.errors" name="errors" />
 
       <template v-else>
         {{ errorMessage }}
       </template>
     </div>
-  </label>
+  </UiLabel>
 </template>
 
 <script setup lang="ts">
@@ -60,6 +62,7 @@ import { v4 as uuidv4 } from "uuid";
 import { computed } from "vue";
 
 import { cn } from "../../utils/cn.js";
+import UiLabel from "../UiLabel/UiLabel.vue";
 
 const emit = defineEmits<{
   change: [boolean];
@@ -70,7 +73,13 @@ defineOptions({
 });
 
 defineSlots<{
+  /**
+   * Label content.
+   */
   default: () => any;
+  /**
+   * Error content.
+   */
   errors?: () => any;
 }>();
 

package/src/components/UiColorPicker/README.md

@@ -2,15 +2,15 @@
 
 ## Usage
 
-```html
-<!-- SomeComponent.vue using UiColorPicker -->
+```vue
 <template>
-    <label for="colorPicker">Farbe wählen</label>
-    <UiColorPicker id="colorPicker" v-model="colorValue" />
+  <UiLabel for="colorPicker">Farbe wählen</UiLabel>
+  <UiColorPicker id="colorPicker" v-model="colorValue" />
 </template>
 
 <script setup>
-import { UiColorPicker } from "@dpa-id-components/dpa-shared-components";
+import { ref } from "vue";
+import { UiColorPicker, UiLabel } from "@dpa-id-components/dpa-shared-components";
 
 const colorValue = ref("");
 </script>

package/src/components/UiIcon/icons.ts

@@ -132,6 +132,7 @@ export const icons = {
   people: () => import("../../assets/icons/people.vue"),
   phone: () => import("../../assets/icons/phone.vue"),
   picture: () => import("../../assets/icons/picture.vue"),
+  "picture-gallery": () => import("../../assets/icons/picture-gallery.vue"),
   "picture-circled": () => import("../../assets/icons/picture-circled.vue"),
   "picture-filled": () => import("../../assets/icons/picture-filled.vue"),
   pin: () => import("../../assets/icons/pin.vue"),

package/src/components/UiInput/README.md

@@ -63,4 +63,5 @@ import { UiInput } from "@dpa-id-components/dpa-shared-components";
 | Name      | Description                                        |
 |-----------|----------------------------------------------------|
 | `buttons` | slot for rendering a button inside the input field |
+| `default` | Label content |
 | `errors`  | For validation error content that's associated with the form control via `aria-errormessage` |

package/src/components/UiInput/UiInput.vue

@@ -1,24 +1,24 @@
 <template>
-  <!-- ui-input -->
   <div
-    class="group relative"
-    :class="$attrs.class"
+    :class="cn('group relative', $attrs.class as string)"
     :data-testid="$attrs['data-testid']"
   >
-    <label
+    <UiLabel
+      v-if="$slots.default || label"
+      :for="id"
       :class="
         cn(
+          'pointer-events-none absolute left-3 origin-left px-1 transition-all duration-150 select-none',
           labelColorClass,
-          isLabelRaised
-            ? '-translate-y-1/2 bg-white text-xs'
-            : 'translate-y-4 text-sm',
+          isLabelRaised ? '-translate-y-1/2 bg-white text-xs' : 'translate-y-4',
         )
       "
-      :for="id"
-      class="pointer-events-none absolute left-3 origin-left px-1 transition-all duration-150 select-none"
     >
-      {{ label }}
-    </label>
+      <slot>
+        {{ label }}
+      </slot>
+    </UiLabel>
+
     <textarea
       v-if="isTextarea"
       :id="id"
@@ -78,7 +78,7 @@
 
     <div
       v-if="
-        'errors' in $slots ||
+        $slots.errors ||
         status === 'error' ||
         status === 'warning' ||
         status === 'info'
@@ -86,19 +86,19 @@
       :id="addonTextId"
       :class="
         cn(
-          'px-4 py-1 text-xs leading-normal font-medium transition-all duration-150 ease-in-out peer-aria-invalid:bg-alert-red-default peer-aria-invalid:text-white peer-hover:peer-aria-invalid:bg-alert-red-dark peer-focus:peer-aria-invalid:bg-alert-red-dark',
+          'px-4 py-1 text-xs leading-normal font-medium transition-all duration-150 ease-in-out peer-aria-invalid:bg-alert-red-default peer-aria-invalid:text-white peer-enabled:peer-aria-invalid:peer-hover:bg-alert-red-dark peer-enabled:peer-aria-invalid:peer-focus:bg-alert-red-dark',
           addonClass,
         )
       "
     >
-      <slot v-if="'errors' in $slots" name="errors" />
+      <slot v-if="$slots.errors" name="errors" />
 
       <template v-else>
         {{ addonText }}
       </template>
     </div>
 
-    <slot name="buttons"></slot>
+    <slot name="buttons" />
     <svg
       v-if="chevron"
       class="pointer-events-none absolute top-4 right-4 size-6 fill-current text-gray-900"
@@ -118,6 +118,7 @@ import { v4 as uuidv4 } from "uuid";
 import { computed, onBeforeUpdate, onMounted, ref } from "vue";
 
 import { cn } from "../../utils/cn.js";
+import UiLabel from "../UiLabel/UiLabel.vue";
 
 type UiInputStatus = "default" | "info" | "readonly" | "warning" | "error";
 
@@ -127,6 +128,13 @@ defineOptions({
 
 const slots = defineSlots<{
   buttons?: () => any;
+  /**
+   * Label content.
+   */
+  default?: () => any;
+  /**
+   * Error content.
+   */
   errors?: () => any;
 }>();
 
@@ -236,7 +244,7 @@ const addonClass = computed(() => {
     readonly: "",
     error: "",
     warning:
-      "bg-orange-default text-gray-900 peer-hover:bg-orange-dark peer-focus:bg-orange-dark",
+      "bg-orange-default text-gray-900 peer-enabled:peer-hover:bg-orange-dark peer-focus:bg-orange-dark",
     info: "bg-gray-300 text-gray-900",
   }[status.value];
 });
@@ -244,13 +252,13 @@ const addonClass = computed(() => {
 const componentClass = computed(() => {
   return {
     default:
-      "border border-gray-300 p-4 text-gray-900 hover:border-gray-700 focus:border-2 focus:border-blue-default focus:p-inputFocused",
+      "border border-gray-300 p-4 text-gray-900 enabled:hover:border-gray-700 focus:border-2 focus:border-blue-default focus:p-inputFocused",
     readonly: "p-4 text-gray-900 border border-gray-300 text-gray-800",
     error:
-      "border-2 border-alert-red-default p-4 text-gray-900 hover:border-alert-red-dark focus:border-alert-red-dark",
+      "border-2 border-alert-red-default p-4 text-gray-900 enabled:hover:border-alert-red-dark focus:border-alert-red-dark",
     warning:
-      "border-2 border-orange-default p-4 text-gray-900 hover:border-orange-dark focus:border-orange-dark",
-    info: "border border-gray-300 p-4 text-gray-900 hover:border-gray-700 focus:border-gray-700",
+      "border-2 border-orange-default p-4 text-gray-900 enabled:hover:border-orange-dark focus:border-orange-dark",
+    info: "border border-gray-300 p-4 text-gray-900 enabled:hover:border-gray-700 focus:border-gray-700",
   }[status.value];
 });
 

package/src/components/UiLabel/README.md

@@ -0,0 +1,33 @@
+# UiLabel
+
+Wraps the native `label` element. Currently only used to provide some default styles for labels.
+
+## Usage
+
+**Associate with input via `id` attribute**:
+
+```vue
+<UiLabel for="name-input">
+  Name
+</UiLabel>
+
+<UiInput id="name-input" name="name" required />
+```
+
+**Associate with input by wrapping**:
+
+```vue
+<UiLabel>
+  Name
+  <UiInput name="name" required />
+</UiLabel>
+```
+
+**Associate with checkbox**:
+
+```vue
+<UiLabel class="flex">
+  <UiCheckbox name="terms" required />
+  I have read and accept the terms and conditions
+</UiLabel>
+```

package/src/components/UiLabel/UiLabel.vue

@@ -0,0 +1,16 @@
+<template>
+  <label :class="cn('max-w-max items-center text-sm', $attrs.class as string)">
+    <slot />
+  </label>
+</template>
+
+<script setup lang="ts">
+import { cn } from "../../utils/cn.js";
+
+defineSlots<{
+  /**
+   * Label content.
+   */
+  default: () => any;
+}>();
+</script>

package/src/components/UiMenu/UiMenu.vue

@@ -74,7 +74,12 @@
             :grouped-options="groupedOptions"
           >
             <ul
-              v-if="!!groupedOptions"
+              v-if="
+                Array.isArray(groupedOptions) &&
+                groupedOptions.some(
+                  (groupedOption) => groupedOption.options.length > 0,
+                )
+              "
               class="max-h-80 overflow-y-auto"
               tabindex="0"
             >
@@ -82,29 +87,32 @@
                 v-for="groupedOption in groupedOptions"
                 :key="groupedOption.groupLabel"
               >
-                <li
-                  v-if="!!groupedOption.groupLabel"
-                  class="flex h-6 items-center border-t bg-gray-100 px-4 text-xs font-semibold tracking-wider text-gray-700 uppercase first:border-t-0"
-                >
-                  {{ groupedOption.groupLabel }}
-                </li>
-                <UiListItem
-                  v-for="(option, index) in groupedOption.options"
-                  :key="`${groupedOption.groupLabel}-menuOptions-${index}`"
-                  :selected="option.selected"
-                  :selectable="listVariant === 'selectable'"
-                  :is-checked="option.selected"
-                  :check-box-menu="listVariant === 'checkbox'"
-                  :icon-size="iconSize"
-                  :image-shape="imageShape"
-                  :image-src="option.imageSrc"
-                  :checkbox-size="checkboxSize"
-                  :check-box-color="checkboxColor"
-                  class="hover:bg-gray-100 focus:bg-gray-300"
-                  :data-testid="`menu-option-button-${index}`"
-                  @list-item-click="selectOption(option)"
-                  >{{ option.label }}
-                </UiListItem>
+                <template v-if="groupedOption.options.length > 0">
+                  <li
+                    v-if="groupedOption.groupLabel"
+                    class="flex h-6 items-center border-t bg-gray-100 px-4 text-xs font-semibold tracking-wider text-gray-700 uppercase first:border-t-0"
+                  >
+                    {{ groupedOption.groupLabel }}
+                  </li>
+
+                  <UiListItem
+                    v-for="(option, index) in groupedOption.options"
+                    :key="`${groupedOption.groupLabel}-menuOptions-${index}`"
+                    :selected="option.selected"
+                    :selectable="listVariant === 'selectable'"
+                    :is-checked="option.selected"
+                    :check-box-menu="listVariant === 'checkbox'"
+                    :icon-size="iconSize"
+                    :image-shape="imageShape"
+                    :image-src="option.imageSrc"
+                    :checkbox-size="checkboxSize"
+                    :check-box-color="checkboxColor"
+                    class="hover:bg-gray-100 focus:bg-gray-300"
+                    :data-testid="`menu-option-button-${index}`"
+                    @list-item-click="selectOption(option)"
+                    >{{ option.label }}
+                  </UiListItem>
+                </template>
               </template>
             </ul>
             <ul v-else class="max-h-60 overflow-y-auto" tabindex="0">
@@ -184,7 +192,7 @@ export type UiMenuSelectedOption<Value = unknown> = UiMenuOptionType<Value> & {
 };
 
 export type UiMenuGroupedOption<Value = unknown> = {
-  groupLabel: string;
+  groupLabel?: string;
   options: UiMenuOptionType<Value>[];
 };
 

package/src/components/UiRadioInputGroup/UiRadioInputGroup.vue

@@ -9,7 +9,7 @@
     ]"
   >
     <li v-for="option in internalOptions" :key="option.value">
-      <label class="flex items-center text-sm">
+      <UiLabel class="flex">
         <input
           v-model="pickedOption"
           :name="groupName"
@@ -22,11 +22,11 @@
         />
         <span
           class="ml-1 cursor-pointer"
-          :class="[labelClass, disabled ? 'text-gray-500' : 'text-inherit']"
+          :class="[labelClass, disabled ? 'text-gray-500' : '']"
         >
           {{ option.label }}
         </span>
-      </label>
+      </UiLabel>
     </li>
   </ul>
 </template>
@@ -35,6 +35,7 @@
 import { computed } from "vue";
 
 import { cn } from "../../utils/cn.js";
+import UiLabel from "../UiLabel/UiLabel.vue";
 
 export interface UiRadioInputGroupOption<T> {
   value: T;

package/src/components/UiSearchInput/README.md

@@ -2,36 +2,36 @@
 
 ## Usage
 
-```html
+```vue
 <template>
-    <UiSearchInput
-            :has-add-entry-option="true"
-            :model-value="internalValue"
-            label="This is a Label"
-            placeholder="This is a placeholder"
-            @update:model-value="handleInput"
-            @handle-keypress="handleKeypress"
-            @blur="handleBlur"
-    />
+  <UiSearchInput
+    :has-add-entry-option="true"
+    :model-value="internalValue"
+    label="This is a Label"
+    placeholder="This is a placeholder"
+    @update:model-value="handleInput"
+    @handle-keypress="handleKeypress"
+    @blur="handleBlur"
+  />
 </template>
 
 <script setup lang="ts">
-    import { UiSearchInput } from "./UiSearchInput.vue";
+  import { UiSearchInput } from "./UiSearchInput.vue";
 
-    const internalValue = ref([""]);
-    function handleInput(newValue) {
-        internalValue.value = newValue;
-    }
+  const internalValue = ref([""]);
+  function handleInput(newValue) {
+    internalValue.value = newValue;
+  }
 
-    function handleKeypress({ event, value }) {
-        if (event.key === 'Enter') {
-            // do something when enter key is pressed
-        }
+  function handleKeypress({ event, value }) {
+    if (event.key === 'Enter') {
+      // do something when enter key is pressed
     }
+  }
 
-    function handleBlur(value) {
-        // value is the same as from handleInput
-    }
+  function handleBlur(value) {
+    // value is the same as from handleInput
+  }
 </script>
 ```
 
@@ -43,6 +43,12 @@
 | `label`             | `string`   | `""`                  | Sets Label for the input field                            |
 | `placeholder`       | `string`   | `Default placeholder` | Sets Placeholder attribute for the input                  |
 
+### Slots
+
+| Name      | Description   |
+|-----------|---------------|
+| `default` | Label content |
+
 ### Events
 
 | Name                | Type                  | Description                                                                         |

package/src/components/UiSearchInput/UiSearchInput.vue

@@ -10,7 +10,11 @@
       v-if="hasLabel"
       class="col-span-1 flex items-center pr-5 text-sm lg:py-2"
     >
-      <label class="font-medium">{{ label }}</label>
+      <UiLabel :for="id" class="font-medium">
+        <slot>
+          {{ label }}
+        </slot>
+      </UiLabel>
       <slot name="tooltip"></slot>
     </div>
 
@@ -21,6 +25,7 @@
     >
       <div class="flex items-center">
         <input
+          :id="id"
           ref="inputs"
           :value="internalValue[index]"
           type="text"
@@ -56,18 +61,33 @@
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick, ref, watchEffect } from "vue";
+import { v4 as uuidv4 } from "uuid";
+import { computed, nextTick, onBeforeUpdate, ref, watchEffect } from "vue";
 
 import UiIconButton from "../UiIconButton/UiIconButton.vue";
+import UiLabel from "../UiLabel/UiLabel.vue";
+
+const slots = defineSlots<{
+  /**
+   * Label content.
+   */
+  default?: () => any;
+  /**
+   * Tooltip content.
+   */
+  tooltip?: () => any;
+}>();
 
 const props = withDefaults(
   defineProps<{
+    id?: string;
     hasAddEntryOption?: boolean;
     label?: string;
     modelValue: string[];
     placeholder?: string;
   }>(),
   {
+    id: undefined,
     hasAddEntryOption: false,
     placeholder: "Default placeholder",
     label: "",
@@ -89,6 +109,8 @@ const addRow = async () => {
   }
 };
 
+const id = ref(props.id ?? `id-${uuidv4()}`);
+
 const canAddRow = computed(() => {
   return (
     internalValue.value[internalValue.value.length - 1].length > 0 &&
@@ -131,9 +153,15 @@ function handleBlur() {
 const isLastIndex = (index: number) => {
   return index === internalValue.value.length - 1;
 };
+const hasDefaultSlot = ref(false);
+
+// Manually tracks whether the “errors” slot is in use since `useSlots()` isn't reactive and so can't be correctly used inside computed reactive state.
+onBeforeUpdate(() => {
+  hasDefaultSlot.value = "default" in slots;
+});
 
 const hasLabel = computed(() => {
-  return props.label.length > 0;
+  return hasDefaultSlot.value || props.label.length > 0;
 });
 
 const inputWrapperClass = computed(() => {

package/src/components/UiSelect/README.md

@@ -0,0 +1,54 @@
+# UiSelect
+
+Wraps the native `select` element.
+
+## Usage
+
+```vue
+
+<UiSelect
+  v-model="appearance"
+  name="appearance"
+  required
+>
+  Appearance
+
+  <template #options>
+    <option
+      v-for="appearance in appearances"
+      :key="appearance.id"
+      :value="appearance.id"
+    >
+      {{ appearance.name }}
+    </option>
+  </template>
+</UiSelect>
+```
+
+## Props
+
+**Note**: This component binds all non-prop attributes (apart from `class`) on its principal element (the `select` element) instead of the root element. This allows you to add arbitrary HTML attributes (and event listeners) on the principal element without them being explicitly supported by the component.
+
+### modelValue
+
+- **Description**: Sets the `value` IDL attribute of the underlying `select` element. Allows using `v-model` on `UiSelect`.
+- **Type**: `string`
+- **Required**: No
+- **Default**: `undefined`
+
+## Slots
+
+### default
+
+The label content.
+
+### options
+
+Receives arbitrarily many `option` elements (or anything that is allowed in a native `select` element, see [select: Technical summary](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/select#technical_summary)).
+
+## Events
+
+### update:modelValue
+
+- **Description**: Fired when `select` fires `input`. Allows using `v-model` on `UiSelect`.
+- **Type**: `string`