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

package/dist/eslint.base.config.js

@@ -30,10 +30,7 @@ export default defineConfigWithVueTs(
       "vue/no-v-html": "off",
     },
     languageOptions: {
-      globals: {
-        ...globals.node,
-        ...globals.browser,
-      },
+      globals: globals.browser,
     },
   },
 

package/dist/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/dist/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/dist/src/components/UiButton/UiButton.stories.ts

@@ -10,7 +10,7 @@ const meta = {
   component: UiButton,
   args: {
     disabled: false,
-    appearance: "primary",
+    appearance: "fill-emphasis",
     size: "md",
     to: undefined,
   },

package/dist/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/dist/src/components/UiChip/UiChip.spec.ts

@@ -6,7 +6,7 @@ import UiChip from "./UiChip.vue";
 describe("UiChip", () => {
   test("renders sm size by default", () => {
     const wrapper = mount(UiChip);
-    expect(wrapper.classes("text-sm/5.5")).toBe(true);
+    expect(wrapper.classes("text-sm/6")).toBe(true);
   });
   test("renders md size", () => {
     const wrapper = mount(UiChip, {

package/dist/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/dist/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/dist/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/dist/src/components/UiFilterBadge/UiFilterBadge.stories.ts

@@ -1,7 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/vue3-vite";
 
-import UiIconButton from "../UiIconButton/UiIconButton.vue";
-
 import UiFilterBadge from "./UiFilterBadge.vue";
 
 const meta = {
@@ -17,7 +15,7 @@ const meta = {
     setup() {
       return { args };
     },
-    components: { UiFilterBadge, UiIconButton },
+    components: { UiFilterBadge },
     template: "<UiFilterBadge v-bind='args'> slot </UiFilterBadge>",
   }),
 } satisfies Meta<typeof UiFilterBadge>;

package/dist/src/components/UiIcon/UiIcon.stories.ts

@@ -58,7 +58,7 @@ export const Overview: Story = {
           <UiIcon
             class="shrink-0"
             :class="{
-              'outline outline-alert-red-default': args.outline,
+              'outline outline-error': args.outline,
             }"
             v-bind="args"
             :name="icon"

package/dist/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/dist/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/dist/src/components/UiListItem/UiListItem.stories.ts

@@ -1,36 +1,10 @@
 import type { Meta, StoryObj } from "@storybook/vue3-vite";
 
-import { icons } from "../UiIcon/icons.ts";
-
 import UiListItem from "./UiListItem.vue";
 
 const meta = {
   title: "Ui/UiListItem",
   component: UiListItem,
-  argTypes: {
-    iconName: {
-      control: "select",
-      options: Object.keys(icons),
-    },
-    iconSize: {
-      control: "select",
-      options: ["small", "medium", "large"],
-    },
-    imageSrc: {
-      control: "text",
-    },
-    imageShape: {
-      control: "select",
-      options: ["rounded", "square"],
-    },
-    value: { control: false },
-    checkBoxMenu: { control: "boolean" },
-    isChecked: { control: "boolean" },
-    selected: { control: "boolean" },
-    selectable: { control: "boolean" },
-    disabled: { control: "boolean" },
-    overrideClasses: { control: "text" },
-  },
   args: {
     iconName: undefined,
     iconSize: "md",

package/dist/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/dist/src/components/UiMediaTypeIcon/UiMediaTypeIcon.stories.ts

@@ -58,7 +58,7 @@ export const Overview: Story = {
           <UiMediaTypeIcon
             class="shrink-0"
             :class="{
-              'outline outline-alert-red-default': args.outline,
+              'outline outline-error': args.outline,
             }"
             v-bind="args"
             :name="icon"

package/dist/src/components/UiMenu/UiMenu.stories.ts

@@ -31,7 +31,7 @@ const meta = {
     disabled: false,
     active: false,
     iconLeft: undefined,
-    buttonAppearance: "secondary-alt",
+    buttonAppearance: "outline-subtle",
     filterButtonSize: undefined,
     defaultTitle: "Default Title",
     multiLabel: "selected options",
@@ -57,6 +57,9 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
+  args: {
+    buttonAppearance: "fill-emphasis",
+  },
   render: (args) => ({
     setup() {
       const options = ref<UiMenuOptionType<string>[]>([
@@ -111,7 +114,7 @@ export const Default: Story = {
     },
     components: { UiMenu },
     template: /*html*/ `
-    <aside class="w-50 h-200 p-4 bg-accent-green">
+    <aside>
       <UiMenu
         v-bind="args"
         v-model:query="args.query"
@@ -128,13 +131,94 @@ export const Default: Story = {
   }),
 };
 
+export const WidthOverride: Story = {
+  args: {
+    buttonAppearance: "fill-emphasis",
+  },
+  render: (args) => ({
+    setup() {
+      const options = ref<UiMenuOptionType<string>[]>([
+        {
+          label: "Option 1",
+          value: "value 1",
+          selected: true,
+          iconName: "info",
+        },
+        {
+          label: "Option 2 is really long, much longer than the rest",
+          value: "value 2",
+          selected: false,
+          iconName: "alert",
+          hasDividerAbove: true,
+        },
+        {
+          label: "Option 3",
+          value: "value 3",
+          selected: false,
+          iconName: "bulb",
+        },
+        {
+          label: "Option 4",
+          value: "value 4",
+          selected: false,
+          iconName: "language",
+        },
+      ]);
+      const filteredOptions = ref(Array.from(options.value));
+
+      const onSelect = (selectedOption: UiMenuSelectedOption<string>) => {
+        for (const option of filteredOptions.value) {
+          option.selected =
+            option.value === selectedOption.value ? true : false;
+        }
+      };
+
+      const onUpdateQuery = (value: string) => {
+        filteredOptions.value = options.value.filter((option) =>
+          option.label.toLowerCase().includes(value.toLowerCase()),
+        );
+      };
+
+      return {
+        args,
+        onSelect,
+        onUpdateQuery,
+        filteredOptions,
+        options,
+      };
+    },
+    components: { UiMenu },
+    template: /*html*/ `
+    <aside class="w-70 h-200 p-4 bg-neutral-pale space-y-4">
+      <UiMenu
+        class="w-full"
+        v-bind="args"
+        v-model:query="args.query"
+        :options="filteredOptions"
+        @option-selected="(option)=> { onSelect(option); optionSelected(option); }"
+        @update:query="(value) => { onUpdateQuery(value); updateQuery(value); }"
+      />
+      <UiMenu
+        class="w-full"
+        v-bind="args"
+        :disabled="true"
+      />
+    </aside>
+  `,
+    methods: {
+      optionSelected: action("option-selected"),
+      updateQuery: action("update:query"),
+    },
+  }),
+};
+
 export const GroupedOptions: Story = {
   args: {
     hasResetOption: true,
     hasSearch: true,
     resetLabel: "Zurücksetzen",
     searchPlaceholder: "Suchen",
-    buttonAppearance: "secondary-alt",
+    buttonAppearance: "outline-subtle",
     listVariant: "checkbox",
     defaultTitle: "Optionen",
     hasAutoFocus: true,
@@ -251,7 +335,6 @@ export const GroupedOptions: Story = {
         v-bind="args"
         v-model:query="args.query"
         :grouped-options="filteredOptions"
-        has-search
         @option-selected="(option)=> { onSelect(option); optionSelected(option); }"
         @update:query="(value) => { onUpdateQuery(value); updateQuery(value); }"
       />

package/dist/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/dist/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/dist/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 {