@dpa-id-components/dpa-shared-components 22.0.0-next.4 → 22.0.0-next.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dpa-id-components/dpa-shared-components",
-  "version": "22.0.0-next.4",
+  "version": "22.0.0-next.6",
   "description": "Shared Vue components library for dpa projects",
   "files": [
     "src",
@@ -40,52 +40,57 @@
   "devEngines": {
     "runtime": {
       "name": "node",
-      "version": "^24.14.0"
+      "version": "24.16.0"
+    },
+    "packageManager": {
+      "name": "pnpm",
+      "version": "11.4.0",
+      "onFail": "download"
     }
   },
   "devDependencies": {
-    "@babel/core": "7.29.0",
-    "@babel/preset-env": "7.29.5",
+    "@babel/core": "7.29.7",
+    "@babel/preset-env": "7.29.7",
     "@eslint/js": "10.0.1",
-    "@storybook/addon-docs": "10.3.6",
-    "@storybook/addon-links": "10.3.6",
-    "@storybook/addon-themes": "10.3.6",
-    "@storybook/builder-vite": "10.3.6",
-    "@storybook/vue3-vite": "10.3.6",
+    "@storybook/addon-docs": "10.4.1",
+    "@storybook/addon-links": "10.4.1",
+    "@storybook/addon-themes": "10.4.1",
+    "@storybook/builder-vite": "10.4.1",
+    "@storybook/vue3-vite": "10.4.1",
     "@tailwindcss/typography": "0.5.19",
-    "@tailwindcss/vite": "4.2.4",
+    "@tailwindcss/vite": "4.3.0",
     "@tsconfig/node24": "24.0.4",
-    "@types/jsdom": "28.0.1",
-    "@types/node": "25.6.2",
-    "@vitejs/plugin-vue": "6.0.6",
+    "@types/jsdom": "28.0.3",
+    "@types/node": "25.9.1",
+    "@vitejs/plugin-vue": "6.0.7",
     "@vue/test-utils": "2.4.10",
     "@vue/tsconfig": "0.9.1",
     "ajv": "8.20.0",
-    "commit-and-tag-version": "12.7.1",
-    "eslint": "10.3.0",
-    "eslint-plugin-storybook": "10.3.6",
+    "commit-and-tag-version": "12.7.3",
+    "eslint": "10.4.0",
+    "eslint-plugin-storybook": "10.4.1",
     "husky": "9.1.7",
     "jsdom": "29.1.1",
-    "npm-run-all2": "8.0.4",
+    "npm-run-all2": "9.0.1",
     "prettier": "3.8.3",
     "rimraf": "6.1.3",
     "rollup-plugin-copy": "3.5.0",
-    "storybook": "10.3.6",
-    "tailwindcss": "4.2.4",
+    "storybook": "10.4.1",
+    "tailwindcss": "4.3.0",
     "typescript": "6.0.3",
-    "unplugin-dts": "1.0.0",
-    "vite": "8.0.11",
-    "vitest": "4.1.5",
-    "vue": "3.5.34",
-    "vue-router": "5.0.6",
-    "vue-tsc": "3.2.8"
+    "unplugin-dts": "1.0.1",
+    "vite": "8.0.14",
+    "vitest": "4.1.7",
+    "vue": "3.5.35",
+    "vue-router": "5.1.0",
+    "vue-tsc": "3.3.2"
   },
   "dependencies": {
     "@floating-ui/vue": "^1.1.11",
     "@typescript-eslint/parser": "^8.58.2",
     "@vue/eslint-config-prettier": "^10.2.0",
     "@vue/eslint-config-typescript": "^14.7.0",
-    "@vuepic/vue-datepicker": "^12.1.0",
+    "@vuepic/vue-datepicker": "^13.0.0",
     "@vueuse/core": "^14.2.1",
     "clsx": "^2.1.1",
     "color": "^5.0.3",
@@ -99,9 +104,9 @@
     "vue-eslint-parser": "^10.4.0"
   },
   "peerDependencies": {
-    "@eslint/js": "^9.39.2 || ^10.0.1",
+    "@eslint/js": "^10.0.1",
     "@tailwindcss/typography": "^0.5.16",
-    "eslint": "^9.39.2 || ^10.1.0",
+    "eslint": "^10.4.0",
     "prettier": "^3.8.1",
     "tailwindcss": "^4.1.11",
     "vue": "^3.5.0",

package/src/components/UiBadge/UiBadge.vue

@@ -16,31 +16,26 @@ import UiIcon, { type UiIconName } from "../UiIcon/UiIcon.vue";
 const { appearance = "accent-red", iconName = undefined } = defineProps<{
   appearance?:
     | "accent-red"
-    | "accent-red-dark"
     | "accent-orange"
     | "accent-purple"
     | "accent-green"
     | "primary"
     | "neutral-primary"
-    | "neutral-emphasis"
     | "neutral-medium"
     | "neutral-faint";
   iconName?: UiIconName;
 }>();
 
 const colorClass = computed(() => {
-  const colorClasses: Record<string, string> = {
+  return {
     "accent-red": "bg-accent-red text-neutral",
-    "accent-red-dark": "bg-accent-red-dark text-neutral",
     "accent-orange": "bg-accent-orange text-neutral",
     "accent-purple": "bg-accent-purple text-neutral",
     "accent-green": "bg-accent-green text-neutral",
     primary: "bg-primary text-neutral",
     "neutral-primary": "bg-neutral-primary text-neutral",
-    "neutral-emphasis": "bg-neutral-emphasis text-neutral",
     "neutral-medium": "bg-neutral-medium text-neutral",
-    "neutral-faint": "bg-neutral-faint text-neutral-emphasis",
-  };
-  return colorClasses[appearance];
+    "neutral-faint": "bg-neutral-faint text-neutral-subtle",
+  }[appearance];
 });
 </script>

package/src/components/UiCheckbox/README.md

@@ -3,19 +3,19 @@
 ## Usage
 
 ```vue
-<template>
-  <UiCheckbox required name="terms" appearance="secondary">
-    Accept terms and conditions
-  </UiCheckbox>
-</template>
-
-<script setup lang="ts">
-import { UiCheckbox } from "@dpa-id-components/dpa-shared-components";
-</script>
+<UiCheckbox required name="terms" appearance="secondary">
+  Accept terms and conditions
+</UiCheckbox>
 ```
 
 ## API
 
+### Models
+
+| Name      | Type               | Default     | Description          |
+|-----------|--------------------|-------------|----------------------|
+| _default_ | `string[] \| string \| boolean` | `undefined` | Sets the input value |
+
 ### Props
 
 **Note**: This component binds all non-prop attributes (apart from `class`) on its principal element (`input[type="checkbox"]`) 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.

package/src/components/UiCheckbox/UiCheckbox.vue

@@ -41,7 +41,11 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script
+  setup
+  lang="ts"
+  generic="ModelValue extends string[] | string | boolean"
+>
 import { computed, useId } from "vue";
 
 import { cn } from "../../utils/cn.ts";
@@ -75,7 +79,7 @@ const {
   size?: "sm" | "md";
 }>();
 
-const model = defineModel<boolean | string | string[]>();
+const model = defineModel<ModelValue>();
 
 const defaultId = useId();
 const uniqueId = computed(() => id ?? `id-${defaultId}`);

package/src/components/UiDatePicker/UiDatePicker.vue

@@ -130,7 +130,7 @@
         <UiIcon class="text-neutral-subtle" name="chevron-right" size="sm" />
       </template>
       <template #arrow>
-        <div ref="menuArrow" class="dp__arrow_top"></div>
+        <div ref="menuArrow" class="dp--arrow-top"></div>
       </template>
     </VueDatePicker>
   </div>
@@ -306,17 +306,17 @@ function formatInput(date: Date | [Date, Date]): string {
 <style>
 @reference "../../tailwindPreset.css";
 
-.dp__arrow_top {
+.dp--arrow-top {
   left: 10%;
 }
 
-.dp__menu {
+.dp--menu {
   border-radius: var(--radius-2xl);
   box-shadow: var(--shadow-lg);
 }
 
 .dp--year-select,
-.dp__month_year_select {
+.dp--month-year-select {
   border-radius: var(--radius-2xl);
 }
 
@@ -325,45 +325,45 @@ function formatInput(date: Date | [Date, Date]): string {
   padding: 0.25rem;
 }
 
-.dp__flex_display {
+.dp--flex-display {
   gap: 2rem;
 }
 
-.dp__sidebar_left {
+.dp--sidebar-left {
   padding: 0;
 }
 
-.dp__cell_inner {
+.dp--cell-inner {
   border-radius: calc(infinity * 1px);
 }
 
-.dp__cell_inner:hover {
+.dp--cell-inner:hover {
   border-radius: calc(infinity * 1px);
 }
 
-.dp__today {
+.dp--today {
   border: 1px solid var(--color-neutral-primary);
 }
 
-.dp__cell_auto_range,
-.dp__cell_auto_range_start,
-.dp__cell_auto_range_end {
+.dp--cell-auto-range,
+.dp--cell-auto-range-start,
+.dp--cell-auto-range-end {
   border: none;
   color: var(--color-neutral-primary);
   background-color: var(--color-neutral-faint);
 }
 
-.dp__month_year_select {
+.dp--month-year-select {
   font-size: var(--text-base);
   font-weight: var(--font-weight-semibold);
   color: var(--color-neutral-primary);
 }
 
-.dp__calendar_header_separator {
+.dp--calendar-header-separator {
   display: none;
 }
 
-.dp__calendar_header {
+.dp--calendar-header {
   gap: 0.25rem;
   align-items: center;
   font-size: var(--text-xs);
@@ -371,26 +371,26 @@ function formatInput(date: Date | [Date, Date]): string {
   font-weight: var(--font-weight-semibold);
 }
 
-.dp__calendar_header_item {
+.dp--calendar-header-item {
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--color-neutral-subtle);
 }
 
-.dp__calendar_row {
+.dp--calendar-row {
   gap: 0.25rem;
 }
 
-.dp__action_row,
-.dp__action_extra {
+.dp--action-row,
+.dp--action-extra {
   justify-content: end;
   gap: 1rem;
   border-top: 1px solid var(--color-neutral-faint);
   padding: 0.5rem 1rem;
 }
 
-.dp__theme_light {
+.dp--theme-light {
   --dp-font-family: var(--font-sans);
   --dp-month-year-row-height: 2rem; /*Height of the month-year select row*/
   --dp-button-icon-height: 1.5rem; /*Icon sizing in buttons*/

package/src/components/UiDialog/UiDialog.vue

@@ -5,6 +5,7 @@
       cn(
         'fixed inset-0 m-auto w-120 rounded-2xl bg-surface-level-1 text-current shadow-lg backdrop:bg-shadow-strong',
         $attrs.class,
+        { animate },
       )
     "
     @click.self="dialog?.requestClose()"
@@ -64,9 +65,14 @@ defineSlots<{
   }) => any;
 }>();
 
-const { hasCloseButton = true, closeLabel = undefined } = defineProps<{
+const {
+  hasCloseButton = true,
+  closeLabel = undefined,
+  animate = false,
+} = defineProps<{
   hasCloseButton?: boolean;
   closeLabel?: string;
+  animate?: boolean;
 }>();
 
 function close() {
@@ -87,3 +93,45 @@ defineExpose({
   requestClose,
 });
 </script>
+
+<style scoped>
+@media (prefers-reduced-motion: no-preference) {
+  /* Backdrop */
+  .animate::backdrop {
+    background: rgb(0 0 0 / 0%);
+    transition:
+      background 0.3s ease,
+      display 0.2s ease allow-discrete,
+      overlay 0.2s ease allow-discrete;
+  }
+
+  .animate[open]::backdrop {
+    background: rgb(0 0 0 / 50%);
+
+    @starting-style {
+      background: rgb(0 0 0 / 0%);
+    }
+  }
+
+  /* Dialog box — fade + scale */
+  .animate {
+    opacity: 0;
+    transform: scale(0.95);
+    transition:
+      opacity 0.2s ease,
+      transform 0.2s ease,
+      display 0.2s ease allow-discrete,
+      overlay 0.2s ease allow-discrete;
+  }
+
+  .animate[open] {
+    opacity: 1;
+    transform: scale(1);
+
+    @starting-style {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+  }
+}
+</style>

package/src/components/UiInput/README.md

@@ -3,29 +3,40 @@
 ## Usage
 
 ```vue
-<template>
-  <UiInput
-    label="Postal code"
-    id="postal_code-1"
-    name="postal_code"
-    value="04277"
-    required
-    placeholder="12345"
-  ></UiInput>
-</template>
-
-<script setup lang="ts">
-import { UiInput } from "@dpa-id-components/dpa-shared-components";
-</script>
+<UiInput
+  id="postal-code"
+  name="postal_code"
+  value="04277"
+  required
+  placeholder="12345"
+>
+  Postal code
+</UiInput>
+```
+
+**Using `v-model`**:
+
+```vue
+<UiInput v-model="postalCode">
+  Postal code
+</UiInput>
+```
+
+**With `number` value**:
+
+```vue
+<UiInput v-model="count" type="number">
+  Count
+</UiInput>
 ```
 
 ## API
 
 ### Models
 
-| Name      | Type     | Default     | Description          |
-|-----------|----------|-------------|----------------------|
-| _default_ | `string` | `undefined` | Sets the input value |
+| Name      | Type               | Default     | Description          |
+|-----------|--------------------|-------------|----------------------|
+| _default_ | `string \| number` | `undefined` | Sets the input value |
 
 ### Props
 

package/src/components/UiInput/UiInput.vue

@@ -34,7 +34,7 @@
       data-testid="input-value"
       v-bind="{ ...$attrs, class: null }"
       :data-is-label-raised="
-        $attrs.placeholder || isFocused || model ? '' : undefined
+        $attrs.placeholder || isFocused || hasInput ? '' : undefined
       "
       @focus="isFocused = true"
       @blur="isFocused = false"
@@ -55,7 +55,7 @@
       data-testid="input-value"
       v-bind="{ ...$attrs, class: null }"
       :data-is-label-raised="
-        $attrs.placeholder || isFocused || model ? '' : undefined
+        $attrs.placeholder || isFocused || hasInput ? '' : undefined
       "
       @focus="isFocused = true"
       @blur="isFocused = false"
@@ -82,7 +82,7 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" generic="ModelValue extends string | number">
 import { computed, ref, useId } from "vue";
 
 import { cn } from "../../utils/cn.ts";
@@ -130,8 +130,11 @@ const {
   inputStatus?: "info" | "warning" | "error";
 }>();
 
-const model = defineModel<string>();
+const model = defineModel<ModelValue>();
 
+const hasInput = computed(
+  () => model.value !== undefined && model.value !== "",
+);
 const isFocused = ref(false);
 
 const defaultId = useId();

package/src/components/UiListItem/README.md

@@ -31,7 +31,6 @@
 | `imageSrc`        | `String`                    | `""`       | Image to be displayed at the beginning of the list item. |
 | `imageShape`      | `"rounded" | "square"` | `"square"` | Shape pf the image to be displayed.                      |
 | `checkboxColor`   | `"blue" | "gray"`      | `"blue"`   | Checkbox color style.                                    |
-| `checkboxSize`    | `"small" | "medium"`   | `"medium"` | Checkbox size style.                                     |
 
 ### Events
 

package/src/components/UiListItem/UiListItem.vue

@@ -2,11 +2,10 @@
   <li
     :class="
       cn(
-        'flex cursor-pointer list-none items-center gap-2 px-4 py-2 text-sm/normal text-neutral-emphasis select-none hover:text-primary focus:outline-hidden focus-visible:focus-outline focus-visible:-outline-offset-2',
+        'flex cursor-pointer list-none items-center gap-2 px-4 py-1.5 text-sm/normal text-neutral-emphasis select-none hover:text-primary focus:outline-hidden focus-visible:focus-outline focus-visible:-outline-offset-2',
         {
           'cursor-default text-neutral-medium': disabled,
           'is-selected': selected,
-          'py-3': checkboxSize === 'md',
         },
         overrideClasses,
         $attrs.class,
@@ -20,7 +19,7 @@
       :appearance="checkboxAppearance"
       :model-value="isChecked"
       :disabled="disabled"
-      :size="checkboxSize"
+      size="sm"
       @click.stop="$emit('list-item-click', value)"
     >
       <span class="sr-only"><slot /></span>
@@ -65,7 +64,6 @@ const {
   imageSrc = undefined,
   imageShape = "rounded",
   checkboxAppearance = "primary",
-  checkboxSize = "md",
   isChecked = false,
   disabled = false,
 } = defineProps<{
@@ -79,7 +77,6 @@ const {
   imageShape?: "rounded" | "square";
   iconSize?: "sm" | "md" | "lg";
   checkboxAppearance?: "primary" | "secondary";
-  checkboxSize?: "sm" | "md";
   isChecked?: boolean;
   disabled?: boolean;
 }>();

package/src/components/UiMediaTypeIcon/UiMediaTypeIcon.vue

@@ -42,7 +42,7 @@ const iconComponent = computed(() =>
 
 watchEffect(() => {
   if (!icons[name]) {
-    throw new Error(`UiMediaFormatIcon: No icon named “${name}” exists.`);
+    throw new Error(`UiMediaTypeIcon: No icon named “${name}” exists.`);
   }
 });
 </script>

package/src/components/UiMenu/README.md

@@ -89,7 +89,6 @@ const options = ref([
 | `buttonAppearance` | `"primary"`, `"secondary"`, `"secondary-alt"`, or `"ghost"` | `"secondary-alt"` |  |
 | `listVariant`          | `"checkbox" | "selectable" | "blank"`                                                                 | `"blank"`                     | Menu style.                                                                                                                                                                                                                                  |
 | `checkboxColor`        | `"blue" | "gray"`                                                                                          | `"blue"`                      | Checkbox color style.                                                                                                                                                                                                                        |
-| `checkboxSize`         | `"small" | "medium"`                                                                                       | `"medium"`                    | Checkbox size style.                                                                                                                                                                                                                         |
 | `imageShape`           | `"rounded" | "square"`                                                                                     | `"square"`                    | shape of image.                                                                                                                                                                                                                              |
 | `hasResetOption`       | `boolean`                                                                                                       | `false`                       | Toggles option for a reset button                                                                                                                                                                                                            |
 | `resetLabel`           | `string`                                                                                                        | `""`                         | Sets text of reset button.                                                                                                                                                                                                                   |
@@ -142,7 +141,6 @@ Wraps the UiListItem and uses the same settings as in the original UiMenu, helps
 | `listVariant?`   | `"checkbox" | "selectable" | "blank"`   | `blank`     | Provide the list variant, same as in UiMenu.vue           |
 | `iconSize?`      | `"small" | "medium" | "large"`      | `small`     | Provide the icon size, same as in UiMenu.vue              |
 | `imageShape?`    | `"rounded" | "square"`    | `square`    | Provide the imageShape, same as in UiMenu.vue             |
-| `checkboxSize?`  | `"small" | "medium"`  | `medium`    | Provide the checkboxSize, same as in UiMenu.vue           |
 | `checkboxColor?` | `"blue" | "gray"` | `blue`      | Provide the checkboxColor, same as in UiMenu.vue          |
 
 #### Slots

package/src/components/UiMenu/UiMenu.vue

@@ -26,11 +26,11 @@
     </template>
 
     <div
-      class="block w-max max-w-full divide-y overflow-hidden rounded-sm text-base/6 shadow-lg focus:outline-hidden sm:text-sm/5"
+      class="block w-max max-w-full divide-y overflow-hidden rounded-lg border border-neutral-faint bg-neutral text-base/6 shadow-md focus:outline-hidden sm:text-sm/5"
     >
       <div
         v-if="hasSearch"
-        class="flex items-center gap-2 rounded-t-sm px-4 py-2 text-neutral-primary [&:has(>input:focus-visible)]:focus-outline [&:has(>input:focus-visible)]:-outline-offset-2"
+        class="flex items-center gap-2 rounded-t-lg px-4 py-1.5 text-neutral-primary [&:has(>input:focus-visible)]:focus-outline [&:has(>input:focus-visible)]:-outline-offset-2"
       >
         <UiIcon
           class="shrink-0 text-neutral-emphasis"
@@ -51,7 +51,6 @@
       <slot
         v-bind="{
           checkboxAppearance,
-          checkboxSize,
           iconSize,
           imageShape,
           listVariant,
@@ -87,7 +86,6 @@
                 :image-shape="imageShape"
                 :image-src="option.imageSrc"
                 :icon-name="option.iconName"
-                :checkbox-size="checkboxSize"
                 :checkbox-appearance="checkboxAppearance"
                 class="hover:bg-neutral-whisper focus:bg-neutral-faint"
                 :class="{
@@ -102,7 +100,7 @@
         </ul>
       </slot>
 
-      <div v-if="hasResetOption" class="px-4 py-2 text-neutral-primary">
+      <div v-if="hasResetOption" class="px-4 py-1.5 text-neutral-primary">
         <UiButton
           appearance="secondary"
           :disabled="disabledReset"
@@ -154,7 +152,6 @@ export type UiMenuGroupedOption<Value = unknown> = {
 defineSlots<{
   default?: (props: {
     checkboxAppearance: typeof checkboxAppearance;
-    checkboxSize: typeof checkboxSize;
     iconSize: typeof iconSize;
     imageShape: typeof imageShape;
     listVariant: typeof listVariant;
@@ -192,7 +189,6 @@ const {
   // Menu
   iconSize = "sm",
   imageShape = "square",
-  checkboxSize = "md",
   checkboxAppearance = "primary",
   listVariant = "blank",
 } = defineProps<{
@@ -222,7 +218,6 @@ const {
   // Menu
   iconSize?: "sm" | "md" | "lg";
   imageShape?: "rounded" | "square";
-  checkboxSize?: "sm" | "md";
   checkboxAppearance?: "primary" | "secondary";
   listVariant?: "checkbox" | "selectable" | "blank";
 }>();

package/src/components/UiPopover/UiPopover.vue

@@ -18,7 +18,7 @@
         v-show="isOpen"
         ref="floating"
         :style="floatingStyles"
-        class="z-10 w-fit rounded-sm bg-neutral [text-align:initial] [--transition-close-duration:100ms] [--transition-duration:200ms]"
+        class="z-10 w-fit [text-align:initial] [--transition-close-duration:100ms] [--transition-duration:200ms]"
         :data-side="placement"
       >
         <slot v-bind="{ close }" />

package/src/components/UiSelect/UiSelect.vue

@@ -89,7 +89,7 @@ select,
 }
 
 ::picker(select) {
-  @apply shadow-lg border border-neutral-whisper;
+  @apply mt-1 overscroll-none rounded-lg border border-neutral-faint shadow-md;
 }
 
 select::picker-icon {
@@ -97,12 +97,24 @@ select::picker-icon {
 }
 
 select > :deep(option) {
-  @apply flex justify-between items-center px-4 py-3;
+  @apply flex items-center justify-between px-4 py-1.5 focus-visible:focus-outline;
+
+  &:first-child {
+    @apply rounded-t-lg;
+  }
+
+  &:last-child {
+    @apply rounded-b-lg;
+  }
 
   &:enabled:hover {
     @apply bg-neutral-pale;
   }
 
+  &:focus-visible {
+    @apply -outline-offset-2;
+  }
+
   &::checkmark {
     @apply order-1 text-lg;
   }