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

package/dist/tailwindPreset.css

@@ -36,33 +36,12 @@
 }
 
 @theme {
-  /* ToDo: Legacy Classes: remove when removed from components */
-  --color-transparent: rgba(255, 255, 255, 0);
-  --color-alert-red-default: #f53000;
-  --color-alert-red-dark: #ba2400;
-  --color-rainbow-red: #e53935;
-  --color-rainbow-red-dark: #ab000d;
-  --color-rainbow-orange: #ffb300;
-  --color-rainbow-purple: #8e24aa;
-  --color-blue-default: oklch(0.459 0.242 263.397);
-  --color-blue-dark: #0030aa;
-  --color-green-neon: #00e281;
-  --color-green-primary: #00b064;
-  --color-green-night: #006345;
-
-  /* ---Gray Overrides - */
-  --color-gray-100: oklch(0.97 0 0);
-  --color-gray-200: oklch(0.949 0 0);
-  --color-gray-300: oklch(0.916 0 0);
-  --color-gray-400: oklch(0.789 0 0);
-  --color-gray-500: oklch(0.64 0 0);
-  --color-gray-600: oklch(0.593 0 0);
-  --color-gray-700: oklch(0.562 0 0);
-  --color-gray-800: oklch(0.418 0 0);
-  --color-gray-900: oklch(0.248 0 0);
-
-  --color-error: oklch(0.627 0.234 32.5);
-  --color-error-dark: oklch(0.511 0.189 32.9);
+  /* TODO: Remove primitive color definition. */
+  --color-alert-red-default: oklch(0.627 0.234 32.527);
+  --color-error: oklch(0.627 0.234 32.527);
+  /* TODO: Remove primitive color definition. */
+  --color-alert-red-dark: oklch(0.511 0.189 32.898);
+  --color-error-dark: oklch(0.511 0.189 32.898);
   --color-error-darkest: oklch(0.379 0.136 34.1);
 
   --color-red-default: oklch(0.608 0.209 27);
@@ -74,8 +53,12 @@
   --color-purple-default: oklch(0.49 0.208 318);
   --color-purple-dark: oklch(0.357 0.177 314.2);
 
-  --color-primary: oklch(0.459 0.242 263.4);
-  --color-primary-dark: oklch(0.383 0.198 263.2);
+  /* TODO: Remove primitive color definition. */
+  --color-blue-default: oklch(0.459 0.242 263.397);
+  --color-primary: oklch(0.459 0.242 263.397);
+  /* TODO: Remove primitive color definition. */
+  --color-blue-dark: oklch(0.384 0.198 263.247);
+  --color-primary-dark: oklch(0.384 0.198 263.247);
   --color-primary-darkest: oklch(0.29 0.142 262.7);
   --color-primary-light: oklch(0.496 0.263 263.5);
 
@@ -85,10 +68,16 @@
   --color-teal-default: oklch(0.566 0.101 182.5);
   --color-teal-dark: oklch(0.422 0.077 179.8);
 
-  --color-secondary: oklch(0.665 0.165 154.8);
-  --color-secondary-dark: oklch(0.442 0.094 164.1);
+  /* TODO: Remove primitive color definition. */
+  --color-green-primary: oklch(0.665 0.165 154.776);
+  --color-secondary: oklch(0.665 0.165 154.776);
+  /* TODO: Remove primitive color definition. */
+  --color-green-night: oklch(0.442 0.094 164.147);
+  --color-secondary-dark: oklch(0.442 0.094 164.147);
   --color-secondary-darkest: oklch(0.329 0.069 164.9);
-  --color-secondary-light: oklch(0.801 0.2 154.5);
+  /* TODO: Remove primitive color definition. */
+  --color-green-neon: oklch(0.801 0.2 154.544);
+  --color-secondary-light: oklch(0.801 0.2 154.544);
 
   --color-yellow-default: oklch(0.942 0.204 108.5);
   --color-yellow-dark: oklch(0.814 0.173 104.8);
@@ -100,100 +89,119 @@
   --color-brown-default: oklch(0.497 0.123 54.7);
   --color-brown-dark: oklch(0.395 0.096 56.4);
 
-  /* --- Theme primary ---------------------------- */
+  /* Primary */
   --color-primary-hover: var(--color-primary-dark);
   --color-primary-pressed: var(--color-primary-darkest);
   --color-primary-active: var(--color-primary-darkest);
   --color-primary-emphasis: var(--color-primary-light);
 
-  /* --- Theme Secondary ----- */
+  /* Secondary */
   --color-secondary-hover: var(--color-secondary-dark);
   --color-secondary-pressed: var(--color-secondary-darkest);
   --color-secondary-active: var(--color-secondary-darkest);
   --color-secondary-emphasis: var(--color-secondary-light);
 
-  /* --- Signal: Success -------------- */
+  /* Signal: Success */
   --color-success: var(--color-secondary);
   --color-success-hover: var(--color-secondary-dark);
   --color-success-pressed: var(--color-secondary-darkest);
   --color-success-active: var(--color-secondary-darkest);
 
-  /* --- Signal: Error -------------------------------------- */
+  /* Signal: Error */
   --color-error-hover: var(--color-error-dark);
   --color-error-pressed: var(--color-error-darkest);
   --color-error-active: var(--color-error-darkest);
 
-  /* --- Signal: Warning -------------------------------------- */
+  /* Signal: Warning */
   --color-warning: var(--color-orange-default);
   --color-warning-hover: var(--color-orange-dark);
   --color-warning-pressed: var(--color-orange-darkest);
   --color-warning-active: var(--color-orange-darkest);
 
-  /* --- Accent: Red ---------------------------------------- */
+  /* Accent: Red */
   --color-accent-red: var(--color-red-default);
   --color-accent-red-dark: var(--color-red-dark);
 
-  /* --- Accent: Pink --------------------------------------- */
+  /* Accent: Pink */
   --color-accent-pink: var(--color-pink-default);
   --color-accent-pink-dark: var(--color-pink-dark);
 
-  /* --- Accent: Purple ------------------------------------- */
+  /* Accent: Purple */
   --color-accent-purple: var(--color-purple-default);
   --color-accent-purple-dark: var(--color-purple-dark);
 
-  /* --- Accent: Cyan --------------------------------------- */
+  /* Accent: Cyan */
   --color-accent-cyan: var(--color-cyan-default);
   --color-accent-cyan-dark: var(--color-cyan-dark);
 
-  /* --- Accent: Teal --------------------------------------- */
+  /* Accent: Teal */
   --color-accent-teal: var(--color-teal-default);
   --color-accent-teal-dark: var(--color-teal-dark);
 
-  /* --- Accent: Green -------------- */
+  /* Accent: Green */
   --color-accent-green: var(--color-secondary);
   --color-accent-green-hover: var(--color-secondary-dark);
 
-  /* --- Accent: Yellow ------------------------------------- */
+  /* Accent: Yellow */
   --color-accent-yellow: var(--color-yellow-default);
   --color-accent-yellow-dark: var(--color-yellow-dark);
 
-  /* --- Accent: Orange ------------------------------------- */
+  /* Accent: Orange */
   --color-accent-orange: var(--color-orange-default);
   --color-accent-orange-dark: var(--color-orange-dark);
   --color-accent-orange-darkest: var(--color-orange-darkest);
 
-  /* --- Accent: Brown -------------------------------------- */
+  /* Accent: Brown */
   --color-accent-brown: var(--color-brown-default);
   --color-accent-brown-dark: var(--color-brown-dark);
 
-  --color-surface-base: var(--color-gray-100);
-  --color-surface-level-1: var(--color-white);
+  --color-surface-base: var(--color-neutral-whisper);
+  --color-surface-level-1: var(--color-neutral);
 
-  /* --- Overlay & Shadow -------------- */
+  /* Overlay & Shadow */
   --color-overlay: oklch(0 0 0 / 0.75);
   --color-shadow-weak: oklch(0 0 0 / 0.1);
   --color-shadow-medium: oklch(0 0 0 / 0.2);
   --color-shadow-strong: oklch(0 0 0 / 0.35);
 
-  /* --- Neutral  --------------------------- */
-  --color-neutral: var(--color-white);
-  --color-neutral-primary: var(--color-gray-900);
-  --color-neutral-emphasis: var(--color-gray-800);
-  --color-neutral-subtle: var(--color-gray-700);
-  --color-neutral-medium: var(--color-gray-600);
-  --color-neutral-muted: var(--color-gray-500);
-  --color-neutral-soft: var(--color-gray-400);
-  --color-neutral-faint: var(--color-gray-300);
-  --color-neutral-pale: var(--color-gray-200);
-  --color-neutral-whisper: var(--color-gray-100);
+  /* Neutral */
+  --color-transparent: oklch(0 0 0 / 0);
+  --color-neutral: oklch(1 0 0);
+  /* TODO: Remove primitive color definition. */
+  --color-gray-900: oklch(0.248 0 0);
+  --color-neutral-primary: oklch(0.248 0 0);
+  /* TODO: Remove primitive color definition. */
+  --color-gray-800: oklch(0.418 0 0);
+  --color-neutral-emphasis: oklch(0.418 0 0);
+  /* TODO: Remove primitive color definition. */
+  --color-gray-700: oklch(0.562 0 0);
+  --color-neutral-subtle: oklch(0.562 0 0);
+  /* TODO: Remove primitive color definition. */
+  --color-gray-600: oklch(0.593 0 0);
+  --color-neutral-medium: oklch(0.593 0 0);
+  /* TODO: Remove primitive color definition. */
+  --color-gray-500: oklch(0.64 0 0);
+  --color-neutral-muted: oklch(0.64 0 0);
+  /* TODO: Remove primitive color definition. */
+  --color-gray-400: oklch(0.789 0 0);
+  --color-neutral-soft: oklch(0.789 0 0);
+  /* TODO: Remove primitive color definition. */
+  --color-gray-300: oklch(0.916 0 0);
+  --color-neutral-faint: oklch(0.916 0 0);
+  /* TODO: Remove primitive color definition. */
+  --color-gray-200: oklch(0.949 0 0);
+  --color-neutral-pale: oklch(0.949 0 0);
+  /* TODO: Remove primitive color definition. */
+  --color-gray-100: oklch(0.97 0 0);
+  --color-neutral-whisper: oklch(0.97 0 0);
   --color-neutral-disabled: oklch(0 0 0 / 0.2);
-  --color-neutral-inverse-primary: var(--color-white);
+  --color-neutral-inverse-primary: oklch(1 0 0);
   --color-neutral-inverse-subtle: oklch(1 0 0 / 0.8);
   --color-neutral-inverse-muted: oklch(1 0 0 / 0.6);
   --color-neutral-inverse-faint: oklch(1 0 0 / 0.4);
   --color-neutral-inverse-disabled: oklch(1 0 0 / 0.2);
 
-  /* ToDo: shadow-default will be deprecated in favor of shadow-sm  */
+  /* TODO: Remove in favor of shadow-sm. */
   --shadow-default: var(--shadow-sm);
 
   /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dpa-id-components/dpa-shared-components",
-  "version": "22.0.0-next.9",
+  "version": "22.0.0",
   "description": "Shared Vue components library for dpa projects",
   "files": [
     "src",
@@ -40,45 +40,45 @@
   "devEngines": {
     "runtime": {
       "name": "node",
-      "version": "24.16.0"
+      "version": "24.18.0"
     },
     "packageManager": {
       "name": "pnpm",
-      "version": "11.6.0",
+      "version": "11.11.0",
       "onFail": "download"
     }
   },
   "devDependencies": {
     "@eslint/js": "10.0.1",
-    "@storybook/addon-docs": "10.4.4",
-    "@storybook/vue3-vite": "10.4.4",
+    "@storybook/addon-docs": "10.5.0",
+    "@storybook/vue3-vite": "10.5.0",
     "@tailwindcss/typography": "0.5.20",
-    "@tailwindcss/vite": "4.3.0",
+    "@tailwindcss/vite": "4.3.2",
     "@tsconfig/node24": "24.0.4",
     "@types/jsdom": "28.0.3",
-    "@types/node": "25.9.3",
+    "@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.4",
+    "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.4",
+    "npm-run-all2": "9.0.2",
+    "prettier": "3.9.5",
     "rimraf": "6.1.3",
     "rollup-plugin-copy": "3.5.0",
-    "storybook": "10.4.4",
-    "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.38",
+    "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": "^2.0.0",
@@ -105,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/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

@@ -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

@@ -17,11 +17,11 @@
         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,
                 }"

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 {