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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dpa-id-components/dpa-shared-components",
-  "version": "22.0.0-next.7",
+  "version": "22.0.0-next.9",
   "description": "Shared Vue components library for dpa projects",
   "files": [
     "src",
@@ -44,53 +44,48 @@
     },
     "packageManager": {
       "name": "pnpm",
-      "version": "11.4.0",
+      "version": "11.6.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.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",
+    "@storybook/addon-docs": "10.4.4",
+    "@storybook/vue3-vite": "10.4.4",
+    "@tailwindcss/typography": "0.5.20",
     "@tailwindcss/vite": "4.3.0",
     "@tsconfig/node24": "24.0.4",
     "@types/jsdom": "28.0.3",
-    "@types/node": "25.9.1",
+    "@types/node": "25.9.3",
     "@vitejs/plugin-vue": "6.0.7",
-    "@vue/test-utils": "2.4.10",
+    "@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.0",
-    "eslint-plugin-storybook": "10.4.1",
+    "eslint": "10.4.1",
+    "eslint-plugin-storybook": "10.4.4",
     "husky": "9.1.7",
     "jsdom": "29.1.1",
     "npm-run-all2": "9.0.1",
-    "prettier": "3.8.3",
+    "prettier": "3.8.4",
     "rimraf": "6.1.3",
     "rollup-plugin-copy": "3.5.0",
-    "storybook": "10.4.1",
+    "storybook": "10.4.4",
     "tailwindcss": "4.3.0",
     "typescript": "6.0.3",
-    "unplugin-dts": "1.0.1",
-    "vite": "8.0.14",
-    "vitest": "4.1.7",
-    "vue": "3.5.35",
+    "unplugin-dts": "1.0.2",
+    "vite": "8.0.16",
+    "vitest": "4.1.8",
+    "vue": "3.5.38",
     "vue-router": "5.1.0",
-    "vue-tsc": "3.3.2"
+    "vue-tsc": "3.3.3"
   },
   "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",
-    "@vuepic/vue-datepicker": "^13.0.0",
+    "@vuepic/vue-datepicker": "^14.0.0",
     "@vueuse/core": "^14.2.1",
     "clsx": "^2.1.1",
     "color": "^5.0.3",

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":
-        "border-neutral-faint bg-neutral text-neutral-emphasis not-disabled:hover:border-neutral-subtle not-disabled:hover:text-neutral-primary disabled:text-neutral-faint",
-      tertiary:
+      "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",
+      "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/UiCollapseNavigation/UiCollapseNavigation.vue

@@ -1,7 +1,7 @@
 <template>
   <div :class="hasBorderTop ? 'border-t border-t-neutral-faint' : ''" />
   <UiButton
-    appearance="secondary"
+    appearance="outline-emphasis"
     class="flex w-full justify-between border-none"
     @click="toggleMenuHandler"
   >

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"

package/src/components/UiMenu/UiMenu.vue

@@ -11,7 +11,7 @@
         :class="{
           'border-neutral-subtle': isPopoverOpen,
         }"
-        :appearance="active ? 'primary' : buttonAppearance"
+        :appearance="active ? 'fill-emphasis' : buttonAppearance"
         :disabled
         :size="filterButtonSize"
         data-testid="menu-button"
@@ -102,7 +102,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 +173,7 @@ const {
   disabled = false,
   active = false,
   iconLeft = null,
-  buttonAppearance = "secondary-alt",
+  buttonAppearance = "outline-subtle",
   filterButtonSize = "sm",
   defaultTitle = "",
   multiLabel = "",
@@ -202,7 +202,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/UiPopover/UiPopover.vue

@@ -4,7 +4,7 @@
 
     <Transition :name="animate ? 'fade-up' : 'none'">
       <div
-        v-show="isOpen"
+        v-if="isOpen"
         ref="floating"
         :style="floatingStyles"
         class="z-10 w-fit [text-align:initial] [--transition-close-duration:100ms] [--transition-duration:200ms]"

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"