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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dpa-id-components/dpa-shared-components",
-  "version": "22.0.0-next.4",
+  "version": "22.0.0-next.5",
   "description": "Shared Vue components library for dpa projects",
   "files": [
     "src",
@@ -44,41 +44,39 @@
     }
   },
   "devDependencies": {
-    "@babel/core": "7.29.0",
-    "@babel/preset-env": "7.29.5",
     "@eslint/js": "10.0.1",
-    "@storybook/addon-docs": "10.3.6",
-    "@storybook/addon-links": "10.3.6",
-    "@storybook/addon-themes": "10.3.6",
-    "@storybook/builder-vite": "10.3.6",
-    "@storybook/vue3-vite": "10.3.6",
+    "@storybook/addon-docs": "10.4.1",
+    "@storybook/addon-links": "10.4.1",
+    "@storybook/addon-themes": "10.4.1",
+    "@storybook/builder-vite": "10.4.1",
+    "@storybook/vue3-vite": "10.4.1",
     "@tailwindcss/typography": "0.5.19",
-    "@tailwindcss/vite": "4.2.4",
+    "@tailwindcss/vite": "4.3.0",
     "@tsconfig/node24": "24.0.4",
-    "@types/jsdom": "28.0.1",
-    "@types/node": "25.6.2",
-    "@vitejs/plugin-vue": "6.0.6",
+    "@types/jsdom": "28.0.3",
+    "@types/node": "25.9.1",
+    "@vitejs/plugin-vue": "6.0.7",
     "@vue/test-utils": "2.4.10",
     "@vue/tsconfig": "0.9.1",
     "ajv": "8.20.0",
-    "commit-and-tag-version": "12.7.1",
-    "eslint": "10.3.0",
-    "eslint-plugin-storybook": "10.3.6",
+    "commit-and-tag-version": "12.7.3",
+    "eslint": "10.4.0",
+    "eslint-plugin-storybook": "10.4.1",
     "husky": "9.1.7",
     "jsdom": "29.1.1",
-    "npm-run-all2": "8.0.4",
+    "npm-run-all2": "9.0.1",
     "prettier": "3.8.3",
     "rimraf": "6.1.3",
     "rollup-plugin-copy": "3.5.0",
-    "storybook": "10.3.6",
-    "tailwindcss": "4.2.4",
+    "storybook": "10.4.1",
+    "tailwindcss": "4.3.0",
     "typescript": "6.0.3",
-    "unplugin-dts": "1.0.0",
-    "vite": "8.0.11",
-    "vitest": "4.1.5",
+    "unplugin-dts": "1.0.1",
+    "vite": "8.0.14",
+    "vitest": "4.1.7",
     "vue": "3.5.34",
-    "vue-router": "5.0.6",
-    "vue-tsc": "3.2.8"
+    "vue-router": "5.0.7",
+    "vue-tsc": "3.3.1"
   },
   "dependencies": {
     "@floating-ui/vue": "^1.1.11",

package/src/components/UiCheckbox/UiCheckbox.vue

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

package/src/components/UiDialog/UiDialog.vue

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