@dpa-id-components/dpa-shared-components 17.0.4 → 18.0.0-next.0

package/dist/{tasks-By3KQz_1.js → tasks-DwkW6M5z.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as t, openBlock as e, createElementVNode as o } from "vue";
-import { _ as r } from "./index-p6g8sztL.js";
+import { _ as r } from "./index-CqXXhF6t.js";
 const n = {}, s = {
   width: "24",
   height: "24",

package/dist/{text-EmP8AEje.js → text-Bnsdk2CX.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as o, createElementVNode as r } from "vue";
-import { _ as n } from "./index-p6g8sztL.js";
+import { _ as n } from "./index-CqXXhF6t.js";
 const C = {}, s = {
   width: "24",
   height: "24",

package/dist/{text-circled-DmNf-utq.js → text-circled-2Zg8kuET.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as C, createElementVNode as o } from "vue";
-import { _ as r } from "./index-p6g8sztL.js";
+import { _ as r } from "./index-CqXXhF6t.js";
 const n = {}, s = {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 16 16",

package/dist/{text-filled-D3h_DRRp.js → text-filled-D-P4mQ2T.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as o, createElementVNode as C } from "vue";
-import { _ as r } from "./index-p6g8sztL.js";
+import { _ as r } from "./index-CqXXhF6t.js";
 const n = {}, s = {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 16 16",

package/dist/{thumbs-down-Doc9Aesi.js → thumbs-down-vcWdBnuJ.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as t, createElementVNode as o } from "vue";
-import { _ as r } from "./index-p6g8sztL.js";
+import { _ as r } from "./index-CqXXhF6t.js";
 const n = {}, l = {
   width: "24",
   height: "24",

package/dist/{thumbs-up-CKKCK1tV.js → thumbs-up-C0S5ivme.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as t, createElementVNode as o } from "vue";
-import { _ as r } from "./index-p6g8sztL.js";
+import { _ as r } from "./index-CqXXhF6t.js";
 const n = {}, l = {
   width: "16",
   height: "16",

package/dist/{thumbs-up-double-CpBHpCX3.js → thumbs-up-double-t2aGCQDj.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as t, createElementVNode as o } from "vue";
-import { _ as L } from "./index-p6g8sztL.js";
+import { _ as L } from "./index-CqXXhF6t.js";
 const r = {}, H = {
   width: "16",
   height: "16",

package/dist/{topic-DiuS3Erj.js → topic-Dge1VKfo.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as t, openBlock as e, createElementVNode as o } from "vue";
-import { _ as r } from "./index-p6g8sztL.js";
+import { _ as r } from "./index-CqXXhF6t.js";
 const n = {}, c = {
   width: "24",
   height: "24",

package/dist/{union-D3gpS7c4.js → union-vvbVb03s.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as t, createElementVNode as o } from "vue";
-import { _ as n } from "./index-p6g8sztL.js";
+import { _ as n } from "./index-CqXXhF6t.js";
 const r = {}, s = {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 24 24"

package/dist/{upload-BSUl-gyx.js → upload-DCGXhfEo.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as o, createElementVNode as r } from "vue";
-import { _ as C } from "./index-p6g8sztL.js";
+import { _ as C } from "./index-CqXXhF6t.js";
 const n = {}, l = {
   width: "24",
   height: "24",

package/dist/{video overlay-C5PTDf3d.js → video overlay-FwP_KYF_.js }

@@ -1,5 +1,5 @@
 import { createElementBlock as o, openBlock as t, createElementVNode as r } from "vue";
-import { _ as n } from "./index-p6g8sztL.js";
+import { _ as n } from "./index-CqXXhF6t.js";
 const l = {}, s = {
   width: "24",
   height: "24",

package/dist/{video-4DedruE-.js → video-UVAnKoP4.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as t, createElementVNode as o } from "vue";
-import { _ as r } from "./index-p6g8sztL.js";
+import { _ as r } from "./index-CqXXhF6t.js";
 const n = {}, s = {
   width: "24",
   height: "24",

package/dist/{video-circled-C9VHt1Kb.js → video-circled-Bnk0qFXo.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as t, openBlock as o, createElementVNode as r } from "vue";
-import { _ as C } from "./index-p6g8sztL.js";
+import { _ as C } from "./index-CqXXhF6t.js";
 const n = {}, s = {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 16 16",

package/dist/{video-filled-Dne6YsRs.js → video-filled-DhGo1HTg.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as t, openBlock as o, createElementVNode as r } from "vue";
-import { _ as n } from "./index-p6g8sztL.js";
+import { _ as n } from "./index-CqXXhF6t.js";
 const s = {}, C = {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 16 16",

package/dist/{video-rounded-Cw_swRDw.js → video-rounded-8EL3lpqI.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as t, openBlock as o, createElementVNode as r } from "vue";
-import { _ as n } from "./index-p6g8sztL.js";
+import { _ as n } from "./index-CqXXhF6t.js";
 const s = {}, c = {
   width: "24",
   height: "24",

package/dist/{view-fGBBmPng.js → view-Cc_3J_iT.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as t, createElementVNode as o } from "vue";
-import { _ as r } from "./index-p6g8sztL.js";
+import { _ as r } from "./index-CqXXhF6t.js";
 const n = {}, s = {
   width: "24",
   height: "24",

package/dist/{view-off-XitxxGQh.js → view-off-CCs_R77X.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as t, createElementVNode as o } from "vue";
-import { _ as r } from "./index-p6g8sztL.js";
+import { _ as r } from "./index-CqXXhF6t.js";
 const n = {}, s = {
   width: "24",
   height: "24",

package/dist/{volume-up-RQTvQfNe.js → volume-up-CairJoPC.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as t, createElementVNode as o } from "vue";
-import { _ as r } from "./index-p6g8sztL.js";
+import { _ as r } from "./index-CqXXhF6t.js";
 const n = {}, l = {
   width: "24",
   height: "24",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dpa-id-components/dpa-shared-components",
-  "version": "17.0.4",
+  "version": "18.0.0-next.0",
   "description": "Shared Vue components library for dpa projects",
   "files": [
     "src",
@@ -19,8 +19,8 @@
       "default": "./dist/dpa-shared-components.js"
     },
     "./src/*": "./src/*",
-    "./style.css": "./dist/style.css",
-    "./tailwindConfig": "./dist/tailwind.config.js",
+    "./style": "./dist/style.css",
+    "./tailwindPreset": "./dist/tailwindPreset.css",
     "./eslintConfig": "./dist/eslint.base.config.js",
     "./prettierConfig": "./dist/prettier.config.js"
   },
@@ -52,36 +52,34 @@
     "node": "^23.11.0 || >=24"
   },
   "devDependencies": {
-    "@babel/core": "7.28.0",
-    "@babel/preset-env": "7.28.0",
-    "@eslint/js": "9.32.0",
-    "@storybook/addon-docs": "9.1.1",
-    "@storybook/addon-links": "9.1.1",
-    "@storybook/addon-themes": "9.1.1",
-    "@storybook/builder-vite": "9.1.1",
-    "@storybook/vue3-vite": "9.1.1",
+    "@babel/core": "7.28.3",
+    "@babel/preset-env": "7.28.3",
+    "@eslint/js": "9.33.0",
+    "@storybook/addon-docs": "9.1.2",
+    "@storybook/addon-links": "9.1.2",
+    "@storybook/addon-themes": "9.1.2",
+    "@storybook/builder-vite": "9.1.2",
+    "@storybook/vue3-vite": "9.1.2",
     "@tailwindcss/typography": "0.5.16",
+    "@tailwindcss/vite": "4.1.12",
     "@types/jsdom": "21.1.7",
-    "@types/node": "24.2.0",
+    "@types/node": "24.3.0",
     "@types/uuid": "10.0.0",
     "@vitejs/plugin-vue": "6.0.1",
     "@vue/test-utils": "2.4.6",
     "ajv": "8.17.1",
-    "autoprefixer": "10.4.21",
     "commit-and-tag-version": "12.5.2",
-    "eslint": "9.32.0",
-    "eslint-plugin-storybook": "9.1.1",
+    "eslint": "9.33.0",
+    "eslint-plugin-storybook": "9.1.2",
     "jsdom": "26.1.0",
     "npm-run-all2": "8.0.4",
-    "postcss": "8.5.6",
-    "postcss-focus-visible": "10.0.1",
     "prettier": "3.6.2",
     "rimraf": "6.0.1",
     "rollup-plugin-copy": "3.5.0",
-    "storybook": "9.1.1",
-    "tailwindcss": "3.4.17",
+    "storybook": "9.1.2",
+    "tailwindcss": "4.1.12",
     "typescript": "5.9.2",
-    "vite": "7.1.1",
+    "vite": "7.1.2",
     "vite-plugin-dts": "4.5.4",
     "vitest": "3.2.4",
     "vue": "3.5.18",
@@ -91,8 +89,6 @@
   },
   "dependencies": {
     "@floating-ui/vue": "^1.1.8",
-    "@tailwindcss/container-queries": "^0.1.1",
-    "@tailwindcss/typography": "^0.5.16",
     "@vue/eslint-config-prettier": "^10.2.0",
     "@vue/eslint-config-typescript": "^14.6.0",
     "@vuepic/vue-datepicker": "^11.0.2",
@@ -100,16 +96,18 @@
     "clsx": "^2.1.1",
     "color": "^5.0.0",
     "date-fns": "^4.1.0",
-    "eslint-plugin-tailwindcss": "^3.18.2",
+    "eslint-plugin-better-tailwindcss": "^3.7.5",
     "eslint-plugin-vue": "^10.4.0",
     "globals": "^16.3.0",
-    "tailwind-merge": "^2.6.0",
+    "tailwind-merge": "^3.3.1",
     "uuid": "^11.1.0",
     "vue-eslint-parser": "^10.2.0"
   },
   "peerDependencies": {
+    "@tailwindcss/typography": "^0.5.16",
     "eslint": ">= 9",
-    "tailwindcss": "^3.4.1",
+    "prettier": ">= 3",
+    "tailwindcss": "^4.1.11",
     "vue": "^3.5.0",
     "vue-router": "^4.5.1"
   }

package/src/components/DpaMediaItem/DpaMediaItem.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="mb-px w-full bg-white pb-3 pl-3 pr-4 pt-2 md:pt-3"
+    class="mb-px w-full bg-white pt-2 pr-4 pb-3 pl-3 md:pt-3"
     :class="classObject"
     data-testid="rootDiv"
   >
@@ -42,14 +42,14 @@
             />
             <span
               v-if="imgCount > 1"
-              class="absolute bottom-1 right-1 inline-block h-4 rounded-full bg-gray-900 px-1 align-middle text-xs font-semibold leading-4 text-white"
+              class="absolute right-1 bottom-1 inline-block h-4 rounded-full bg-gray-900 px-1 align-middle text-xs leading-4 font-semibold text-white"
               data-testid="imageCount"
               >{{ imgCount }}</span
             >
           </div>
           <h3
             v-if="$slots.default"
-            class="text-sm font-medium leading-5 group-hover:underline"
+            class="text-sm leading-5 font-medium group-hover:underline"
             :class="{
               'ml-6': !isFulfilled,
               'mr-1': $slots.planning,
@@ -122,7 +122,7 @@ const classObject = computed(() => {
     return "cursor-auto";
   }
   return props.disabled
-    ? "cursor-not-allowed transition shadow border border-gray-300"
-    : "cursor-pointer transition shadow hover:shadow-md group border border-gray-300 hover:border-gray-500";
+    ? "cursor-not-allowed transition shadow-sm border border-gray-300"
+    : "cursor-pointer transition shadow-sm hover:shadow-md group border border-gray-300 hover:border-gray-500";
 });
 </script>

package/src/components/UiAutocomplete/UiAutocomplete.vue

@@ -6,7 +6,6 @@
       :label="label"
       :placeholder="placeholder"
       :model-value="value"
-      class="text-small"
       :chevron="chevron"
       :readonly="readonly"
       is-ui-autocomplete
@@ -39,7 +38,9 @@
           :key="`option-${index}`"
           :value="option"
           :class="`${
-            options && index === options.length - 1 ? 'shadow-none' : 'shadow'
+            options && index === options.length - 1
+              ? 'shadow-none'
+              : 'shadow-sm'
           } ${index === activeDescendant ? 'bg-gray-100' : ''}`"
           :aria-label="option"
           @list-item-click="

package/src/components/UiButton/UiButton.vue

@@ -1,13 +1,15 @@
 <template>
   <component
     :is="component"
-    class="UiButton focus-visible:outline-blue inline-flex items-center whitespace-nowrap font-medium leading-normal focus:outline-none"
-    :class="{
-      'px-4': size !== 'xs',
-      'px-2': size === 'xs',
-      [variantClassName]: true,
-      [sizeClassName]: true,
-    }"
+    :class="
+      cn(
+        'UiButton inline-flex items-center leading-normal font-medium whitespace-nowrap not-disabled:cursor-pointer focus:outline-hidden focus-visible:outline-blue disabled:cursor-not-allowed',
+        size === 'xs' ? 'px-2' : 'px-4',
+        variantClassName,
+        sizeClassName,
+        $attrs.class as string,
+      )
+    "
     v-bind="attributes"
     @click="emit('click')"
   >
@@ -21,6 +23,7 @@ import { computed } from "vue";
 import type { RouteLocationRaw } from "vue-router";
 
 import UiIcon, { type UiIconName } from "../UiIcon/UiIcon.vue";
+import { cn } from "../../utils/cn.js";
 
 const emit = defineEmits<{
   click: [];
@@ -83,10 +86,10 @@ const variantClassName = computed((): string => {
       return `${roundedClass} text-white bg-green-primary hover:bg-night-green`;
     }
     case "transparent": {
-      return `${roundedClass} text-blue-default bg-transparent border-[1px] border-gray-300 hover:text-blue-dark hover:border-gray-700`;
+      return `${roundedClass} text-blue-default bg-transparent border border-gray-300 hover:text-blue-dark hover:border-gray-700`;
     }
     case "white": {
-      return `${roundedClass} text-blue-default bg-white border-[1px] border-gray-300 hover:text-blue-dark hover:border-gray-700`;
+      return `${roundedClass} text-blue-default bg-white border border-gray-300 hover:text-blue-dark hover:border-gray-700`;
     }
     case "gray": {
       return `${roundedClass} text-white bg-gray-700 hover:bg-gray-800`;
@@ -96,9 +99,9 @@ const variantClassName = computed((): string => {
     }
     case "disabled": {
       if (props.disabledVariant === "primary") {
-        return `${roundedClass} text-gray-400 bg-gray-100 cursor-not-allowed`;
+        return `${roundedClass} text-gray-400 bg-gray-100`;
       } else
-        return `${roundedClass} text-gray-400 bg-white cursor-not-allowed border border-gray-400`;
+        return `${roundedClass} text-gray-400 bg-white border border-gray-400`;
     }
     default: {
       return `${roundedClass} text-white bg-blue-default hover:bg-blue-dark`;

package/src/components/UiButtonGroup/UiButtonGroup.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex [&>*:first-child]:rounded-l-full [&>*:last-child]:rounded-r-full [&>*:last-child]:border-r [&>*]:border [&>*]:border-r-0 [&>*]:border-gray-300"
+    class="flex *:border *:border-r-0 *:border-gray-300 [&>*:first-child]:rounded-l-full [&>*:last-child]:rounded-r-full [&>*:last-child]:border-r"
   >
     <slot />
   </div>

package/src/components/UiCheckbox/UiCheckbox.vue

@@ -1,17 +1,17 @@
 <template>
   <label
-    class="text-small flex flex-col"
+    class="flex flex-col"
     :class="
       cn(
         disabled ? 'text-gray-400' : 'cursor-pointer text-gray-900',
-        $attrs.class as HTMLAttributes['class'],
+        $attrs.class as string,
       )
     "
     :data-testid="$attrs['data-testid']"
   >
     <input
       :id="id"
-      class="peer relative size-0 appearance-none self-center focus:outline-none"
+      class="peer relative size-0 appearance-none self-center focus:outline-hidden"
       :class="size"
       type="checkbox"
       :checked="checked"
@@ -25,13 +25,13 @@
       @change="handleChange"
     />
     <span
-      class="flex items-center before:box-border before:inline-block before:shrink-0 before:border-2 before:transition-colors before:content-[''] after:absolute after:block peer-checked:opacity-100 peer-checked:after:content-[url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyMCAyMCcgZmlsbD0nbm9uZSc+PHJlY3QgLz48cGF0aCBmaWxsLXJ1bGU9J2V2ZW5vZGQnIGNsaXAtcnVsZT0nZXZlbm9kZCcgZD0nTTguMjE5NjUgMTVDNy45ODk2NSAxNSA3Ljc2OTY1IDE0LjkwNSA3LjYxMjE1IDE0LjczNzVMMy41NTk2NSAxMC40MjE3QzMuMjQzODEgMTAuMDg2NyAzLjI2MTMxIDkuNTU5MTggMy41OTYzMSA5LjI0NDE4QzMuOTMyMTUgOC45MjkxOCA0LjQ1OTY1IDguOTQ1ODUgNC43NzM4MSA5LjI4MDg1TDguMjExMzEgMTIuOTRMMTUuMjE4IDUuMjcxNjhDMTUuNTI5NiA0LjkzMDg1IDE2LjA1NjMgNC45MDgzNSAxNi4zOTYzIDUuMjE4MzVDMTYuNzM1NSA1LjUyODM1IDE2Ljc1ODggNi4wNTU4NSAxNi40NDg4IDYuMzk1MDFMOC44MzQ2NSAxNC43MjgzQzguNjc4ODEgMTQuOSA4LjQ1NzE1IDE0Ljk5ODMgOC4yMjU0OCAxNUg4LjIxOTY1WicgZmlsbD0nd2hpdGUnLz48L3N2Zz4=)]"
+      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="{
         'before:size-5 after:size-5': size === 'medium',
         'before:size-4 after:size-4': size === 'small',
-        'before:border-blue-default peer-checked:before:bg-blue-default peer-hover:before:border-blue-dark peer-hover:peer-checked:before:bg-blue-dark':
+        'before:border-blue-default peer-checked:before:bg-blue-default peer-hover:before:border-blue-dark peer-checked:peer-hover:before:bg-blue-dark':
           color === 'blue',
-        'before:border-gray-800 peer-checked:before:bg-gray-800 peer-hover:before:border-gray-900 peer-hover:peer-checked:before:bg-gray-900':
+        '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,
@@ -44,7 +44,7 @@
       v-if="'errors' in $slots || showError"
       :id="`${id}-errors`"
       data-testid="errorMessage"
-      class="relative order-last mt-2 bg-alert-red-default px-4 py-1 text-xs font-medium leading-normal text-white transition-all duration-300 ease-in-out"
+      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"
     >
       <slot v-if="'errors' in $slots" name="errors" />
 
@@ -56,7 +56,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, type HTMLAttributes } from "vue";
+import { computed } from "vue";
 import { v4 as uuidv4 } from "uuid";
 
 import { cn } from "../../utils/cn.js";

package/src/components/UiChip/UiChip.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="whitespace-no-wrap min-w-max items-center rounded-full bg-gray-300 align-middle leading-normal text-gray-900"
+    class="min-w-max items-center rounded-full bg-gray-300 align-middle leading-normal whitespace-nowrap text-gray-900"
     :class="[isVisible ? 'inline-flex' : 'hidden', sizeClass, cursorStyle]"
   >
     <slot></slot>

package/src/components/UiCollapseNavigation/UiCollapseNavigation.vue

@@ -1,11 +1,11 @@
 <template>
-  <div :class="hasBorderTop ? 'border-t-[1px] border-t-gray-300' : ''" />
+  <div :class="hasBorderTop ? 'border-t border-t-gray-300' : ''" />
   <UiButton
     color="transparent"
     class="flex w-full justify-between border-none"
     @click="toggleMenuHandler"
   >
-    <h3 class="text-xs font-semibold uppercase tracking-widest text-gray-700">
+    <h3 class="text-xs font-semibold tracking-widest text-gray-700 uppercase">
       {{ headline }}
     </h3>
     <UiIcon

package/src/components/UiDatePicker/UiDatePicker.vue

@@ -88,7 +88,7 @@
             @click="mobileQuickfiltersOpen = !mobileQuickfiltersOpen"
           >
             <span
-              class="p-3 text-xs font-semibold leading-4 tracking-wider text-gray-700"
+              class="p-3 text-xs leading-4 font-semibold tracking-wider text-gray-700"
             >
               {{ props.quickFilterHeadline }}
             </span>
@@ -346,6 +346,8 @@ const mobileQuickfiltersOpen = ref(false);
 </script>
 
 <style>
+@reference "../../tailwindPreset.css";
+
 .singleCalWidth .dp__instance_calendar {
   @apply md:w-[269px];
 }
@@ -391,7 +393,7 @@ const mobileQuickfiltersOpen = ref(false);
 }
 
 .dp__action_extra {
-  @apply order-3 md:order-none md:w-[634px] basis-full border-t border-gray-300 text-gray-700;
+  @apply order-3 md:order-0 md:w-[634px] basis-full border-t border-gray-300 text-gray-700;
 }
 
 .dp__action_extra:empty {
@@ -438,7 +440,7 @@ const mobileQuickfiltersOpen = ref(false);
 }
 
 .dp__range_between {
-  @apply bg-gray-200 !important;
+  @apply bg-gray-200!;
   @apply border-none;
   @apply text-gray-900;
 }

package/src/components/UiDialog/UiDialog.vue

@@ -2,7 +2,7 @@
   <UiOverlay @close="handleClickAway">
     <div
       :class="{
-        'scrolling-touch overflow-y-auto': scrollable,
+        'overflow-y-auto': scrollable,
         'rounded-[24px]': roundedBorder,
       }"
       :style="`
@@ -22,7 +22,7 @@
         v-if="$slots.header"
         :class="
           cn(
-            'flex h-12 items-center justify-between bg-gray-100 py-3 pl-4 pr-2 lg:h-14 lg:py-4 lg:pl-6 lg:pr-3',
+            'flex h-12 items-center justify-between bg-gray-100 py-3 pr-2 pl-4 lg:h-14 lg:py-4 lg:pr-3 lg:pl-6',
             headerClasses,
             { 'rounded-t-[24px]': roundedBorder },
           )
@@ -43,7 +43,7 @@
         :class="
           cn(mainClasses, {
             'px-4 lg:px-6': hasPaddingX,
-            'pb-3 pt-6': hasPaddingY,
+            'pt-6 pb-3': hasPaddingY,
           })
         "
       >

package/src/components/UiFilterBadgeButton/UiFilterBadgeButton.vue

@@ -14,7 +14,7 @@
       :style="{ backgroundColor: fill }"
     />
     <p
-      class="z-0 w-full cursor-pointer text-sm font-medium leading-normal"
+      class="z-0 w-full cursor-pointer text-sm leading-normal font-medium"
       :style="{ color }"
       data-testid="labelText"
       @click.self="emit('click')"

package/src/components/UiFilterButton/UiFilterButton.vue

@@ -2,9 +2,9 @@
   <div
     :class="
       cn(
-        'w-full pl-3 pr-4',
-        $attrs.class as HTMLAttributes['class'],
-        'flex max-w-max cursor-pointer select-none items-center rounded-full ',
+        'w-full pr-4 pl-3',
+        $attrs.class as string,
+        'flex max-w-max cursor-pointer items-center rounded-full select-none',
         variantClasses,
         props.size === 'xs' ? 'py-0.5' : 'py-1.5',
       )
@@ -12,14 +12,14 @@
     @click="onClick"
   >
     <button
-      class="focus-visible:outline-blue w-full rounded-full focus:outline-none"
+      class="w-full rounded-full focus:outline-hidden focus-visible:outline-blue"
       :disabled="disabled"
       type="button"
       data-testid="filter-button"
     >
       <span
         data-testid="filterbutton-title"
-        class="flex w-full items-center justify-between text-sm font-medium leading-normal"
+        class="flex w-full items-center justify-between text-sm leading-normal font-medium"
         :class="`${textColorClass} ${
           props.size === 'xs' ? 'text-xs' : 'text-sm'
         }`"
@@ -65,7 +65,7 @@
 import UiIcon, { type UiIconName } from "../UiIcon/UiIcon.vue";
 import { cn } from "../../utils/cn.js";
 import type { ClassValue } from "clsx";
-import { computed, type HTMLAttributes } from "vue";
+import { computed } from "vue";
 
 const emit = defineEmits<{
   click: [];

package/src/components/UiIconButton/UiIconButton.vue

@@ -2,7 +2,7 @@
   <button
     :disabled="disabled"
     :aria-label="title"
-    class="focus-visible:outline-blue group flex flex-none items-center justify-center rounded-full focus:outline-none"
+    class="group flex flex-none items-center justify-center rounded-full focus:outline-hidden focus-visible:outline-blue"
     :class="[colorClass, backgroundClass, buttonSizeClass]"
     type="button"
     @click="($event) => emit('click', $event)"

package/src/components/UiInfoContent/UiInfoContent.vue

@@ -17,7 +17,7 @@
     </h2>
     <span
       v-if="$slots.default"
-      class="font-regular pt-4 text-center text-base text-gray-800"
+      class="pt-4 text-center text-base text-gray-800"
       data-testid="info-text"
     >
       <slot name="default" />

package/src/components/UiInput/UiInput.vue

@@ -15,7 +15,7 @@
         )
       "
       :for="id"
-      class="pointer-events-none absolute left-3 origin-left select-none px-1 transition-all duration-150"
+      class="pointer-events-none absolute left-3 origin-left px-1 transition-all duration-150 select-none"
     >
       {{ label }}
     </label>
@@ -29,7 +29,7 @@
       :aria-label="label ? label : undefined"
       :readonly="readonly"
       :disabled="disabled"
-      class="peer block h-24 w-full rounded-none text-sm outline-none transition duration-150 placeholder:text-gray-400"
+      class="peer block h-24 w-full rounded-none text-sm outline-hidden transition duration-150 placeholder:text-gray-400 disabled:bg-gray-100"
       :class="
         cn(
           componentClass,
@@ -55,7 +55,7 @@
       :aria-label="label ? label : undefined"
       :readonly="readonly"
       :disabled="disabled"
-      class="peer block h-14 w-full rounded-none text-sm outline-none transition duration-150 placeholder:text-gray-400"
+      class="peer block h-14 w-full rounded-none text-sm outline-hidden transition duration-150 placeholder:text-gray-400 disabled:bg-gray-50"
       :class="
         cn(
           componentClass,
@@ -86,7 +86,7 @@
       :id="addonTextId"
       :class="
         cn(
-          'px-4 py-1 text-xs font-medium leading-normal transition-all duration-150 ease-in-out peer-aria-invalid:bg-alert-red-default peer-aria-invalid:text-white peer-aria-invalid:peer-hover:bg-alert-red-dark peer-aria-invalid:peer-focus: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-hover:peer-aria-invalid:bg-alert-red-dark peer-focus:peer-aria-invalid:bg-alert-red-dark',
           addonClass,
         )
       "
@@ -101,7 +101,7 @@
     <slot name="buttons"></slot>
     <svg
       v-if="chevron"
-      class="pointer-events-none absolute right-4 top-4 size-6 fill-current text-gray-900"
+      class="pointer-events-none absolute top-4 right-4 size-6 fill-current text-gray-900"
       viewBox="0 0 16 16"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"

package/src/components/UiList/UiList.vue

@@ -1,6 +1,6 @@
 <template>
   <ul
-    class="border text-base leading-6 focus:outline-none sm:text-sm sm:leading-5"
+    class="border text-base leading-6 focus:outline-hidden sm:text-sm sm:leading-5"
   >
     <slot />
   </ul>