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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dpa-id-components/dpa-shared-components",
-  "version": "18.0.4",
+  "version": "18.1.0",
   "description": "Shared Vue components library for dpa projects",
   "files": [
     "src",
@@ -50,42 +50,51 @@
   "engines": {
     "node": "^23.11.0 || >=24"
   },
+  "devEngines": {
+    "runtime": {
+      "name": "node",
+      "version": "^24.8.0"
+    },
+    "packageManager": {
+      "name": "npm",
+      "version": "^11.6.0"
+    }
+  },
   "devDependencies": {
-    "@babel/core": "7.28.3",
+    "@babel/core": "7.28.4",
     "@babel/preset-env": "7.28.3",
-    "@eslint/js": "9.34.0",
-    "@storybook/addon-docs": "9.1.4",
-    "@storybook/addon-links": "9.1.4",
-    "@storybook/addon-themes": "9.1.4",
-    "@storybook/builder-vite": "9.1.4",
-    "@storybook/vue3-vite": "9.1.4",
+    "@eslint/js": "9.35.0",
+    "@storybook/addon-docs": "9.1.6",
+    "@storybook/addon-links": "9.1.6",
+    "@storybook/addon-themes": "9.1.6",
+    "@storybook/builder-vite": "9.1.6",
+    "@storybook/vue3-vite": "9.1.6",
     "@tailwindcss/typography": "0.5.16",
     "@tailwindcss/vite": "4.1.13",
     "@types/jsdom": "21.1.7",
-    "@types/node": "24.3.1",
-    "@types/uuid": "10.0.0",
+    "@types/node": "24.5.0",
     "@vitejs/plugin-vue": "6.0.1",
     "@vue/test-utils": "2.4.6",
     "ajv": "8.17.1",
     "commit-and-tag-version": "12.6.0",
-    "eslint": "9.34.0",
-    "eslint-plugin-simple-import-sort": "^12.1.1",
-    "eslint-plugin-storybook": "9.1.4",
-    "jsdom": "26.1.0",
+    "eslint": "9.35.0",
+    "eslint-plugin-simple-import-sort": "12.1.1",
+    "eslint-plugin-storybook": "9.1.6",
+    "jsdom": "27.0.0",
     "npm-run-all2": "8.0.4",
     "prettier": "3.6.2",
     "rimraf": "6.0.1",
     "rollup-plugin-copy": "3.5.0",
-    "storybook": "9.1.4",
+    "storybook": "9.1.6",
     "tailwindcss": "4.1.13",
     "typescript": "5.9.2",
-    "vite": "7.1.4",
+    "vite": "7.1.5",
     "vite-plugin-dts": "4.5.4",
     "vitest": "3.2.4",
     "vue": "3.5.21",
-    "vue-component-meta": "3.0.6",
+    "vue-component-meta": "3.0.7",
     "vue-router": "4.5.1",
-    "vue-tsc": "3.0.6"
+    "vue-tsc": "3.0.7"
   },
   "dependencies": {
     "@floating-ui/vue": "^1.1.8",
@@ -100,7 +109,7 @@
     "eslint-plugin-vue": "^10.4.0",
     "globals": "^16.3.0",
     "tailwind-merge": "^3.3.1",
-    "uuid": "^11.1.0",
+    "uuid": "^13.0.0",
     "vue-eslint-parser": "^10.2.0"
   },
   "peerDependencies": {

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/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(() => {