@dpa-id-components/dpa-shared-components 22.0.0-next.8 → 22.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dpa-id-components/dpa-shared-components",
-  "version": "22.0.0-next.8",
+  "version": "22.0.0",
   "description": "Shared Vue components library for dpa projects",
   "files": [
     "src",
@@ -40,53 +40,48 @@
   "devEngines": {
     "runtime": {
       "name": "node",
-      "version": "24.16.0"
+      "version": "24.18.0"
     },
     "packageManager": {
       "name": "pnpm",
-      "version": "11.5.2",
+      "version": "11.11.0",
       "onFail": "download"
     }
   },
   "devDependencies": {
-    "@babel/core": "7.29.7",
-    "@babel/preset-env": "7.29.7",
     "@eslint/js": "10.0.1",
-    "@storybook/addon-docs": "10.4.2",
-    "@storybook/addon-links": "10.4.2",
-    "@storybook/addon-themes": "10.4.2",
-    "@storybook/builder-vite": "10.4.2",
-    "@storybook/vue3-vite": "10.4.2",
-    "@tailwindcss/typography": "0.5.19",
-    "@tailwindcss/vite": "4.3.0",
+    "@storybook/addon-docs": "10.5.0",
+    "@storybook/vue3-vite": "10.5.0",
+    "@tailwindcss/typography": "0.5.20",
+    "@tailwindcss/vite": "4.3.2",
     "@tsconfig/node24": "24.0.4",
     "@types/jsdom": "28.0.3",
-    "@types/node": "25.9.1",
+    "@types/node": "25.9.5",
     "@vitejs/plugin-vue": "6.0.7",
     "@vue/test-utils": "2.4.11",
     "@vue/tsconfig": "0.9.1",
     "ajv": "8.20.0",
     "commit-and-tag-version": "12.7.3",
-    "eslint": "10.4.1",
-    "eslint-plugin-storybook": "10.4.2",
+    "eslint": "10.7.0",
+    "eslint-plugin-storybook": "10.5.0",
     "husky": "9.1.7",
     "jsdom": "29.1.1",
-    "npm-run-all2": "9.0.1",
-    "prettier": "3.8.3",
+    "npm-run-all2": "9.0.2",
+    "prettier": "3.9.5",
     "rimraf": "6.1.3",
     "rollup-plugin-copy": "3.5.0",
-    "storybook": "10.4.2",
-    "tailwindcss": "4.3.0",
+    "storybook": "10.5.0",
+    "tailwindcss": "4.3.2",
     "typescript": "6.0.3",
-    "unplugin-dts": "1.0.2",
-    "vite": "8.0.16",
-    "vitest": "4.1.8",
-    "vue": "3.5.35",
+    "unplugin-dts": "1.0.3",
+    "vite": "8.1.4",
+    "vitest": "4.1.10",
+    "vue": "3.5.39",
     "vue-router": "5.1.0",
-    "vue-tsc": "3.3.3"
+    "vue-tsc": "3.3.7"
   },
   "dependencies": {
-    "@floating-ui/vue": "^1.1.11",
+    "@floating-ui/vue": "^2.0.0",
     "@typescript-eslint/parser": "^8.58.2",
     "@vue/eslint-config-prettier": "^10.2.0",
     "@vue/eslint-config-typescript": "^14.7.0",
@@ -110,7 +105,7 @@
     "prettier": "^3.8.1",
     "tailwindcss": "^4.1.11",
     "vue": "^3.5.0",
-    "vue-router": "^4.6.4 || ^5.0.0"
+    "vue-router": "^5.1.0"
   },
   "scripts": {
     "dev": "storybook dev -p 6006",

package/src/assets/icons/bot.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M12 3C12.5523 3 13 3.44772 13 4V7H18C19.6569 7 21 8.34315 21 10V13H22C22.5523 13 23 13.4477 23 14C23 14.5523 22.5523 15 22 15H21V18C21 19.6569 19.6569 21 18 21H6C4.34315 21 3 19.6569 3 18V15H2C1.44772 15 1 14.5523 1 14C1 13.4477 1.44772 13 2 13H3V10C3 8.34315 4.34315 7 6 7H11V5H8C7.44772 5 7 4.55228 7 4C7 3.44772 7.44772 3 8 3H12ZM6 9C5.44772 9 5 9.44772 5 10V18C5 18.5523 5.44772 19 6 19H18C18.5523 19 19 18.5523 19 18V10C19 9.44772 18.5523 9 18 9H6ZM9 12C9.55228 12 10 12.4477 10 13V15C10 15.5523 9.55228 16 9 16C8.44772 16 8 15.5523 8 15V13C8 12.4477 8.44772 12 9 12ZM15 12C15.5523 12 16 12.4477 16 13V15C16 15.5523 15.5523 16 15 16C14.4477 16 14 15.5523 14 15V13C14 12.4477 14.4477 12 15 12Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/components/UiButton/README.md

@@ -40,15 +40,15 @@ import { UiButton } from "@dpa-id-components/dpa-shared-components";
 
 ### Props
 
-| Name | Type | Default | Description |
-|------|------|---------|-------------|
-| `to` | `RouteLocationRaw` | `undefined` | `RouterLink` `to` prop |
-| `size` | `"xs"`, `"sm"`, `"md"`, or `"lg"` | `"md"`  |  |
-| `appearance` | `"primary"`, `"secondary"`, `"secondary-alt"`, `"tertiary"`, or `"ghost"` | `"primary"` |  |
-| `disabled` | `boolean` | `false` | Whether the `button` is disabled |
+| Name         | Type                                                                                       | Default     | Description                      |
+|--------------|--------------------------------------------------------------------------------------------|-------------|----------------------------------|
+| `to`         | `RouteLocationRaw`                                                                         | `undefined` | `RouterLink` `to` prop           |
+| `size`       | `"xs"`, `"sm"`, `"md"`, or `"lg"`                                                          | `"md"`      |                                  |
+| `appearance` | `"fill-emphasis"`, `"fill-subtle"`, `"outline-emphasis"`, `"outline-subtle"`, or `"ghost"` | `"primary"` |                                  |
+| `disabled`   | `boolean`                                                                                  | `false`     | Whether the `button` is disabled |
 
 ### Slots
 
-| Name      | Description                                 |
-|-----------|---------------------------------------------|
+| Name      | Description                                                                                                                                                                      |
+|-----------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
 | `default` | Button content. Note, that text nodes are wrapped in a `span` element to ensure they can be detected using the CSS selectors responsible for applying icon-only-specific styles. |

package/src/components/UiButton/UiButton.vue

@@ -42,12 +42,17 @@ defineSlots<{
 const {
   to = undefined,
   size = "md",
-  appearance = "primary",
+  appearance = "fill-emphasis",
   disabled = false,
 } = defineProps<{
   to?: RouteLocationRaw;
   size?: keyof typeof BUTTON_SIZE_CLASSES;
-  appearance?: "primary" | "secondary" | "secondary-alt" | "tertiary" | "ghost";
+  appearance?:
+    | "fill-emphasis"
+    | "fill-subtle"
+    | "outline-emphasis"
+    | "outline-subtle"
+    | "ghost";
   disabled?: boolean;
 }>();
 
@@ -69,13 +74,13 @@ const attributes = computed(() => {
 const appearanceClasses = computed(
   () =>
     ({
-      primary:
+      "fill-emphasis":
         "border-transparent bg-primary text-neutral not-disabled:hover:bg-primary-hover disabled:bg-neutral-faint disabled:text-neutral-soft",
-      secondary:
+      "outline-emphasis":
         "border-neutral-faint bg-transparent text-primary-emphasis not-disabled:hover:border-neutral-subtle not-disabled:hover:text-primary-hover disabled:text-neutral-faint",
-      "secondary-alt":
+      "outline-subtle":
         "border-neutral-faint bg-transparent text-neutral-emphasis not-disabled:hover:border-neutral-subtle not-disabled:hover:text-neutral-primary disabled:text-neutral-faint",
-      tertiary:
+      "fill-subtle":
         "border-transparent bg-neutral-subtle text-neutral not-disabled:hover:bg-neutral-emphasis disabled:bg-neutral-faint disabled:text-neutral-soft",
       ghost:
         "border-transparent bg-transparent text-neutral-emphasis not-disabled:hover:border-neutral-subtle not-disabled:hover:text-neutral-primary disabled:text-neutral-faint",

package/src/components/UiChip/UiChip.vue

@@ -31,8 +31,8 @@ defineEmits<{
 }>();
 
 const CHIP_SIZES: Record<Extract<Size, "xs" | "sm" | "md">, string> = {
-  xs: "text-xs",
-  sm: "text-sm/5.5",
+  xs: "text-xs/5",
+  sm: "text-sm/6",
   md: "text-sm/8",
 };
 

package/src/components/UiDatePicker/UiDatePicker.vue

@@ -70,7 +70,7 @@
             'w-full min-w-0': triggerWidth === 'full',
             'flex-none': triggerWidth === 'fit',
           }"
-          :appearance="value ? 'primary' : 'secondary-alt'"
+          :appearance="value ? 'fill-emphasis' : 'outline-subtle'"
           :disabled
           size="sm"
           data-testid="datepicker-trigger"
@@ -152,10 +152,7 @@ export interface PresetRange {
   name?: string;
 }
 export type DateType =
-  | Date
-  | [Date, Date]
-  | string
-  | { month: number; year: number };
+  Date | [Date, Date] | string | { month: number; year: number };
 
 const datePicker =
   useTemplateRef<InstanceType<typeof VueDatePicker>>("datePicker");
@@ -405,11 +402,17 @@ function formatInput(date: Date | [Date, Date]): string {
   --dp-hover-icon-color: var(--color-neutral);
   --dp-primary-disabled-color: var(--color-neutral-soft);
   --dp-primary-text-color: var(--color-neutral);
-  --dp-secondary-color: #c0c4cc;
+  --dp-secondary-color: oklch(0.82 0.012 264.559);
   --dp-border-color: var(--color-neutral-pale);
   --dp-menu-border-color: var(--color-neutral-pale);
-  --dp-range-between-dates-background-color: var(--dp-hover-color, #f3f3f3);
-  --dp-range-between-dates-text-color: var(--dp-hover-text-color, #212121);
-  --dp-range-between-border-color: var(--dp-hover-color, #f3f3f3);
+  --dp-range-between-dates-background-color: var(
+    --dp-hover-color,
+    oklch(0.964 0 0)
+  );
+  --dp-range-between-dates-text-color: var(
+    --dp-hover-text-color,
+    var(--color-neutral-primary)
+  );
+  --dp-range-between-border-color: var(--dp-hover-color, oklch(0.964 0 0));
 }
 </style>

package/src/components/UiDialog/UiDialog.vue

@@ -13,9 +13,12 @@
   >
     <header
       v-if="$slots.header || hasCloseButton"
-      class="flex flex-wrap items-center justify-between gap-4 rounded-t-2xl bg-neutral-whisper px-4 py-2"
+      class="flex flex-wrap items-center justify-between gap-4 rounded-t-2xl bg-neutral-whisper py-2 pr-2 pl-4"
     >
-      <div v-if="$slots.header" class="text-lg font-semibold">
+      <div
+        v-if="$slots.header"
+        class="text-lg font-medium text-neutral-primary"
+      >
         <slot name="header" v-bind="{ close, requestClose }" />
       </div>
 
@@ -31,13 +34,13 @@
       </UiButton>
     </header>
 
-    <div v-if="$slots.default" class="space-y-2 px-4 py-3">
+    <div v-if="$slots.default" class="space-y-2 p-6">
       <slot />
     </div>
 
     <footer
       v-if="$slots.footer"
-      class="flex flex-wrap items-center justify-between gap-2 px-4 py-3"
+      class="flex flex-wrap items-center justify-between gap-2 px-4 pt-2 pb-4"
     >
       <slot name="footer" v-bind="{ close, requestClose }" />
     </footer>
@@ -98,7 +101,7 @@ defineExpose({
 @media (prefers-reduced-motion: no-preference) {
   /* Backdrop */
   .animate::backdrop {
-    background: rgb(0 0 0 / 0%);
+    background: oklch(0 0 0 / 0);
     transition:
       background 0.3s ease,
       display 0.2s ease allow-discrete,
@@ -106,10 +109,10 @@ defineExpose({
   }
 
   .animate[open]::backdrop {
-    background: rgb(0 0 0 / 50%);
+    background: oklch(0 0 0 / 0.5);
 
     @starting-style {
-      background: rgb(0 0 0 / 0%);
+      background: oklch(0 0 0 / 0);
     }
   }
 

package/src/components/UiIcon/icons.ts

@@ -25,6 +25,7 @@ export const icons = {
   "book": () => import("../../assets/icons/book.vue"),
   "bookmark": () => import("../../assets/icons/bookmark.vue"),
   "bookmark-filled": () => import("../../assets/icons/bookmark-filled.vue"),
+  "bot": () => import('../../assets/icons/bot.vue'),
   "box": () => import("../../assets/icons/box.vue"),
   "bulb": () => import("../../assets/icons/bulb.vue"),
   "call": () => import("../../assets/icons/call.vue"),

package/src/components/UiListItem/README.md

@@ -19,18 +19,19 @@
 
 ### Props
 
-| Name              | Type                        | Default    | Description                                              |
-|-------------------|-----------------------------|------------|----------------------------------------------------------|
-| `value`           | `string`                    | `""`       | Sets the value which gets emitted with the click event   |
-| `checkBoxMenu`    | `Boolean`                   | `false`    | Displays checkbox on the beginning of list item          |
-| `isChecked`       | `Boolean`                   | `false`    | Checked attribute of checkbox, if displayed              |
-| `selectable`      | `Boolean`                   | `false`    | Makes the list item selectable                           |
-| `selected`        | `Boolean`                   | `false`    | Displays checkmark at the end of the list item           |
-| `overrideClasses` | `String`                    | `false`    | Adds classes to the inner of the list item               |
-| `iconName`        | `UiIconName`                |            | Icon to be displayed at the beginning of the list item   |
-| `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.                                    |
+| Name              | Type                        | Default    | Description                                                         |
+|-------------------|-----------------------------|------------|---------------------------------------------------------------------|
+| `value`           | `string`                    | `""`       | Sets the value which gets emitted with the click event              |
+| `checkBoxMenu`    | `Boolean`                   | `false`    | Displays checkbox on the beginning of list item                     |
+| `isChecked`       | `Boolean`                   | `false`    | Checked attribute of checkbox, if displayed                         |
+| `selectable`      | `Boolean`                   | `false`    | Makes the list item selectable                                      |
+| `selected`        | `Boolean`                   | `false`    | Displays checkmark at the end of the list item                      |
+| `overrideClasses` | `String`                    | `false`    | Adds classes to the inner of the list item                          |
+| `iconName`        | `UiIconName`                |            | Icon to be displayed at the beginning of the list item              |
+| `iconSize`        | `sm` `md` `lg`              |            | Size of the checkmark icon when selected and selectable is set true |
+| `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.                                               |
 
 ### Events
 

package/src/components/UiListItem/UiListItem.vue

@@ -2,7 +2,7 @@
   <li
     :class="
       cn(
-        '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',
+        'flex cursor-pointer list-none items-center gap-2 p-2 text-sm/4 text-neutral-primary select-none hover:bg-neutral-whisper hover:text-primary focus:bg-neutral-faint focus:outline-hidden focus-visible:focus-outline focus-visible:-outline-offset-2',
         {
           'cursor-default text-neutral-medium': disabled,
           'is-selected': selected,

package/src/components/UiMenu/UiMenu.vue

@@ -11,17 +11,17 @@
         :class="{
           'border-neutral-subtle': isPopoverOpen,
         }"
-        :appearance="active ? 'primary' : buttonAppearance"
+        :appearance="active ? 'fill-emphasis' : buttonAppearance"
         :disabled
         :size="filterButtonSize"
         data-testid="menu-button"
         @click="toggle"
       >
-        <div class="flex items-center gap-2">
-          <UiIcon v-if="iconLeft" :name="iconLeft" size="sm" />
-          {{ selectedOptionLabel }}
+        <div class="flex min-w-0 items-center gap-2 overflow-hidden">
+          <UiIcon v-if="iconLeft" class="shrink-0" :name="iconLeft" size="sm" />
+          <span class="truncate">{{ selectedOptionLabel }}</span>
         </div>
-        <UiIcon name="chevron-down" size="sm" />
+        <UiIcon class="shrink-0" name="chevron-down" size="sm" />
       </UiButton>
     </template>
 
@@ -30,7 +30,7 @@
     >
       <div
         v-if="hasSearch"
-        class="flex items-center gap-2 rounded-t-lg px-4 pt-2.5 pb-1.5 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 p-2 text-neutral-primary [&:has(>input:focus-visible)]:focus-outline [&:has(>input:focus-visible)]:-outline-offset-2"
       >
         <UiIcon
           class="shrink-0 text-neutral-emphasis"
@@ -42,7 +42,7 @@
           v-model="queryModel"
           type="text"
           spellcheck="false"
-          class="w-full text-sm focus:outline-hidden"
+          class="w-full text-sm/4 focus:outline-hidden"
           :placeholder="searchPlaceholder"
           data-testid="menu-search-input"
         />
@@ -70,7 +70,7 @@
             <template v-if="group.options.length > 0">
               <li
                 v-if="group.groupLabel"
-                class="flex h-6 items-center bg-neutral-faint px-4 text-xs font-semibold tracking-wider text-neutral-subtle uppercase"
+                class="flex h-6 items-center bg-neutral-faint px-2 text-xs font-semibold tracking-wider text-neutral-subtle uppercase"
               >
                 {{ group.groupLabel }}
               </li>
@@ -87,7 +87,6 @@
                 :image-src="option.imageSrc"
                 :icon-name="option.iconName"
                 :checkbox-appearance="checkboxAppearance"
-                class="hover:bg-neutral-whisper focus:bg-neutral-faint"
                 :class="{
                   'border-t': option.hasDividerAbove,
                 }"
@@ -102,7 +101,7 @@
 
       <div v-if="hasResetOption" class="px-2 pt-1.5 pb-2 text-neutral-primary">
         <UiButton
-          appearance="secondary"
+          appearance="outline-emphasis"
           :disabled="disabledReset"
           icon-name="reset"
           size="xs"
@@ -173,7 +172,7 @@ const {
   disabled = false,
   active = false,
   iconLeft = null,
-  buttonAppearance = "secondary-alt",
+  buttonAppearance = "outline-subtle",
   filterButtonSize = "sm",
   defaultTitle = "",
   multiLabel = "",
@@ -202,7 +201,12 @@ const {
   disabled?: boolean;
   active?: boolean;
   iconLeft?: UiIconName;
-  buttonAppearance?: "primary" | "secondary" | "secondary-alt" | "ghost";
+  buttonAppearance?:
+    | "fill-emphasis"
+    | "fill-subtle"
+    | "outline-emphasis"
+    | "outline-subtle"
+    | "ghost";
   filterButtonSize?: "sm" | "xs";
   defaultTitle?: string;
   multiLabel?: string;

package/src/components/UiSearchBar/UiSearchBar.vue

@@ -51,7 +51,7 @@
           <UiButton
             :aria-label="executeSearchButtonTitle"
             :appearance="
-              isInputFocused || searchIconHover ? 'primary' : 'ghost'
+              isInputFocused || searchIconHover ? 'fill-emphasis' : 'ghost'
             "
             size="sm"
             @click="handleSearchButton"

package/src/components/UiSelect/UiSelect.vue

@@ -89,7 +89,7 @@ select,
 }
 
 ::picker(select) {
-  @apply mt-1 overscroll-none rounded-lg border border-neutral-faint shadow-md;
+  @apply my-1 overscroll-none rounded-lg border border-neutral-faint shadow-md;
 }
 
 select::picker-icon {