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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/dist/components/UiButton/UiButton.vue.d.ts +1 -1
  2. package/dist/components/UiMenu/UiMenu.vue.d.ts +1 -1
  3. package/dist/dpa-shared-components.js +3184 -4253
  4. package/dist/src/components/UiButton/README.md +8 -8
  5. package/dist/src/components/UiButton/UiButton.stories.ts +1 -1
  6. package/dist/src/components/UiButton/UiButton.vue +11 -6
  7. package/dist/src/components/UiCollapseNavigation/UiCollapseNavigation.vue +1 -1
  8. package/dist/src/components/UiDatePicker/UiDatePicker.vue +1 -1
  9. package/dist/src/components/UiMenu/UiMenu.stories.ts +2 -2
  10. package/dist/src/components/UiMenu/UiMenu.vue +9 -4
  11. package/dist/src/components/UiSearchBar/UiSearchBar.vue +1 -1
  12. package/package.json +11 -16
  13. package/src/components/UiButton/README.md +8 -8
  14. package/src/components/UiButton/UiButton.vue +11 -6
  15. package/src/components/UiCollapseNavigation/UiCollapseNavigation.vue +1 -1
  16. package/src/components/UiDatePicker/UiDatePicker.vue +1 -1
  17. package/src/components/UiMenu/UiMenu.vue +9 -4
  18. package/src/components/UiSearchBar/UiSearchBar.vue +1 -1
package/dist/src/components/UiButton/README.md CHANGED
@@ -40,15 +40,15 @@ import { UiButton } from "@dpa-id-components/dpa-shared-components";
40
40
 
41
41
  ### Props
42
42
 
43
- | Name | Type | Default | Description |
44
- |------|------|---------|-------------|
45
- | `to` | `RouteLocationRaw` | `undefined` | `RouterLink` `to` prop |
46
- | `size` | `"xs"`, `"sm"`, `"md"`, or `"lg"` | `"md"` | |
47
- | `appearance` | `"primary"`, `"secondary"`, `"secondary-alt"`, `"tertiary"`, or `"ghost"` | `"primary"` | |
48
- | `disabled` | `boolean` | `false` | Whether the `button` is disabled |
43
+ | Name | Type | Default | Description |
44
+ |--------------|--------------------------------------------------------------------------------------------|-------------|----------------------------------|
45
+ | `to` | `RouteLocationRaw` | `undefined` | `RouterLink` `to` prop |
46
+ | `size` | `"xs"`, `"sm"`, `"md"`, or `"lg"` | `"md"` | |
47
+ | `appearance` | `"fill-emphasis"`, `"fill-subtle"`, `"outline-emphasis"`, `"outline-subtle"`, or `"ghost"` | `"primary"` | |
48
+ | `disabled` | `boolean` | `false` | Whether the `button` is disabled |
49
49
 
50
50
  ### Slots
51
51
 
52
- | Name | Description |
53
- |-----------|---------------------------------------------|
52
+ | Name | Description |
53
+ |-----------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
54
54
  | `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 CHANGED
@@ -10,7 +10,7 @@ const meta = {
10
10
  component: UiButton,
11
11
  args: {
12
12
  disabled: false,
13
- appearance: "primary",
13
+ appearance: "fill-emphasis",
14
14
  size: "md",
15
15
  to: undefined,
16
16
  },
package/dist/src/components/UiButton/UiButton.vue CHANGED
@@ -42,12 +42,17 @@ defineSlots<{
42
42
  const {
43
43
  to = undefined,
44
44
  size = "md",
45
- appearance = "primary",
45
+ appearance = "fill-emphasis",
46
46
  disabled = false,
47
47
  } = defineProps<{
48
48
  to?: RouteLocationRaw;
49
49
  size?: keyof typeof BUTTON_SIZE_CLASSES;
50
- appearance?: "primary" | "secondary" | "secondary-alt" | "tertiary" | "ghost";
50
+ appearance?:
51
+ | "fill-emphasis"
52
+ | "fill-subtle"
53
+ | "outline-emphasis"
54
+ | "outline-subtle"
55
+ | "ghost";
51
56
  disabled?: boolean;
52
57
  }>();
53
58
 
@@ -69,13 +74,13 @@ const attributes = computed(() => {
69
74
  const appearanceClasses = computed(
70
75
  () =>
71
76
  ({
72
- primary:
77
+ "fill-emphasis":
73
78
  "border-transparent bg-primary text-neutral not-disabled:hover:bg-primary-hover disabled:bg-neutral-faint disabled:text-neutral-soft",
74
- secondary:
79
+ "outline-emphasis":
75
80
  "border-neutral-faint bg-transparent text-primary-emphasis not-disabled:hover:border-neutral-subtle not-disabled:hover:text-primary-hover disabled:text-neutral-faint",
76
- "secondary-alt":
81
+ "outline-subtle":
77
82
  "border-neutral-faint bg-transparent text-neutral-emphasis not-disabled:hover:border-neutral-subtle not-disabled:hover:text-neutral-primary disabled:text-neutral-faint",
78
- tertiary:
83
+ "fill-subtle":
79
84
  "border-transparent bg-neutral-subtle text-neutral not-disabled:hover:bg-neutral-emphasis disabled:bg-neutral-faint disabled:text-neutral-soft",
80
85
  ghost:
81
86
  "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/UiCollapseNavigation/UiCollapseNavigation.vue CHANGED
@@ -1,7 +1,7 @@
1
1
  <template>
2
2
  <div :class="hasBorderTop ? 'border-t border-t-neutral-faint' : ''" />
3
3
  <UiButton
4
- appearance="secondary"
4
+ appearance="outline-emphasis"
5
5
  class="flex w-full justify-between border-none"
6
6
  @click="toggleMenuHandler"
7
7
  >
package/dist/src/components/UiDatePicker/UiDatePicker.vue CHANGED
@@ -70,7 +70,7 @@
70
70
  'w-full min-w-0': triggerWidth === 'full',
71
71
  'flex-none': triggerWidth === 'fit',
72
72
  }"
73
- :appearance="value ? 'primary' : 'secondary-alt'"
73
+ :appearance="value ? 'fill-emphasis' : 'outline-subtle'"
74
74
  :disabled
75
75
  size="sm"
76
76
  data-testid="datepicker-trigger"
package/dist/src/components/UiMenu/UiMenu.stories.ts CHANGED
@@ -31,7 +31,7 @@ const meta = {
31
31
  disabled: false,
32
32
  active: false,
33
33
  iconLeft: undefined,
34
- buttonAppearance: "secondary-alt",
34
+ buttonAppearance: "outline-subtle",
35
35
  filterButtonSize: undefined,
36
36
  defaultTitle: "Default Title",
37
37
  multiLabel: "selected options",
@@ -134,7 +134,7 @@ export const GroupedOptions: Story = {
134
134
  hasSearch: true,
135
135
  resetLabel: "Zurücksetzen",
136
136
  searchPlaceholder: "Suchen",
137
- buttonAppearance: "secondary-alt",
137
+ buttonAppearance: "outline-subtle",
138
138
  listVariant: "checkbox",
139
139
  defaultTitle: "Optionen",
140
140
  hasAutoFocus: true,
package/dist/src/components/UiMenu/UiMenu.vue CHANGED
@@ -11,7 +11,7 @@
11
11
  :class="{
12
12
  'border-neutral-subtle': isPopoverOpen,
13
13
  }"
14
- :appearance="active ? 'primary' : buttonAppearance"
14
+ :appearance="active ? 'fill-emphasis' : buttonAppearance"
15
15
  :disabled
16
16
  :size="filterButtonSize"
17
17
  data-testid="menu-button"
@@ -102,7 +102,7 @@
102
102
 
103
103
  <div v-if="hasResetOption" class="px-2 pt-1.5 pb-2 text-neutral-primary">
104
104
  <UiButton
105
- appearance="secondary"
105
+ appearance="outline-emphasis"
106
106
  :disabled="disabledReset"
107
107
  icon-name="reset"
108
108
  size="xs"
@@ -173,7 +173,7 @@ const {
173
173
  disabled = false,
174
174
  active = false,
175
175
  iconLeft = null,
176
- buttonAppearance = "secondary-alt",
176
+ buttonAppearance = "outline-subtle",
177
177
  filterButtonSize = "sm",
178
178
  defaultTitle = "",
179
179
  multiLabel = "",
@@ -202,7 +202,12 @@ const {
202
202
  disabled?: boolean;
203
203
  active?: boolean;
204
204
  iconLeft?: UiIconName;
205
- buttonAppearance?: "primary" | "secondary" | "secondary-alt" | "ghost";
205
+ buttonAppearance?:
206
+ | "fill-emphasis"
207
+ | "fill-subtle"
208
+ | "outline-emphasis"
209
+ | "outline-subtle"
210
+ | "ghost";
206
211
  filterButtonSize?: "sm" | "xs";
207
212
  defaultTitle?: string;
208
213
  multiLabel?: string;
package/dist/src/components/UiSearchBar/UiSearchBar.vue CHANGED
@@ -51,7 +51,7 @@
51
51
  <UiButton
52
52
  :aria-label="executeSearchButtonTitle"
53
53
  :appearance="
54
- isInputFocused || searchIconHover ? 'primary' : 'ghost'
54
+ isInputFocused || searchIconHover ? 'fill-emphasis' : 'ghost'
55
55
  "
56
56
  size="sm"
57
57
  @click="handleSearchButton"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dpa-id-components/dpa-shared-components",
3
- "version": "22.0.0-next.8",
3
+ "version": "22.0.0-next.9",
4
4
  "description": "Shared Vue components library for dpa projects",
5
5
  "files": [
6
6
  "src",
@@ -44,49 +44,44 @@
44
44
  },
45
45
  "packageManager": {
46
46
  "name": "pnpm",
47
- "version": "11.5.2",
47
+ "version": "11.6.0",
48
48
  "onFail": "download"
49
49
  }
50
50
  },
51
51
  "devDependencies": {
52
- "@babel/core": "7.29.7",
53
- "@babel/preset-env": "7.29.7",
54
52
  "@eslint/js": "10.0.1",
55
- "@storybook/addon-docs": "10.4.2",
56
- "@storybook/addon-links": "10.4.2",
57
- "@storybook/addon-themes": "10.4.2",
58
- "@storybook/builder-vite": "10.4.2",
59
- "@storybook/vue3-vite": "10.4.2",
60
- "@tailwindcss/typography": "0.5.19",
53
+ "@storybook/addon-docs": "10.4.4",
54
+ "@storybook/vue3-vite": "10.4.4",
55
+ "@tailwindcss/typography": "0.5.20",
61
56
  "@tailwindcss/vite": "4.3.0",
62
57
  "@tsconfig/node24": "24.0.4",
63
58
  "@types/jsdom": "28.0.3",
64
- "@types/node": "25.9.1",
59
+ "@types/node": "25.9.3",
65
60
  "@vitejs/plugin-vue": "6.0.7",
66
61
  "@vue/test-utils": "2.4.11",
67
62
  "@vue/tsconfig": "0.9.1",
68
63
  "ajv": "8.20.0",
69
64
  "commit-and-tag-version": "12.7.3",
70
65
  "eslint": "10.4.1",
71
- "eslint-plugin-storybook": "10.4.2",
66
+ "eslint-plugin-storybook": "10.4.4",
72
67
  "husky": "9.1.7",
73
68
  "jsdom": "29.1.1",
74
69
  "npm-run-all2": "9.0.1",
75
- "prettier": "3.8.3",
70
+ "prettier": "3.8.4",
76
71
  "rimraf": "6.1.3",
77
72
  "rollup-plugin-copy": "3.5.0",
78
- "storybook": "10.4.2",
73
+ "storybook": "10.4.4",
79
74
  "tailwindcss": "4.3.0",
80
75
  "typescript": "6.0.3",
81
76
  "unplugin-dts": "1.0.2",
82
77
  "vite": "8.0.16",
83
78
  "vitest": "4.1.8",
84
- "vue": "3.5.35",
79
+ "vue": "3.5.38",
85
80
  "vue-router": "5.1.0",
86
81
  "vue-tsc": "3.3.3"
87
82
  },
88
83
  "dependencies": {
89
- "@floating-ui/vue": "^1.1.11",
84
+ "@floating-ui/vue": "^2.0.0",
90
85
  "@typescript-eslint/parser": "^8.58.2",
91
86
  "@vue/eslint-config-prettier": "^10.2.0",
92
87
  "@vue/eslint-config-typescript": "^14.7.0",
package/src/components/UiButton/README.md CHANGED
@@ -40,15 +40,15 @@ import { UiButton } from "@dpa-id-components/dpa-shared-components";
40
40
 
41
41
  ### Props
42
42
 
43
- | Name | Type | Default | Description |
44
- |------|------|---------|-------------|
45
- | `to` | `RouteLocationRaw` | `undefined` | `RouterLink` `to` prop |
46
- | `size` | `"xs"`, `"sm"`, `"md"`, or `"lg"` | `"md"` | |
47
- | `appearance` | `"primary"`, `"secondary"`, `"secondary-alt"`, `"tertiary"`, or `"ghost"` | `"primary"` | |
48
- | `disabled` | `boolean` | `false` | Whether the `button` is disabled |
43
+ | Name | Type | Default | Description |
44
+ |--------------|--------------------------------------------------------------------------------------------|-------------|----------------------------------|
45
+ | `to` | `RouteLocationRaw` | `undefined` | `RouterLink` `to` prop |
46
+ | `size` | `"xs"`, `"sm"`, `"md"`, or `"lg"` | `"md"` | |
47
+ | `appearance` | `"fill-emphasis"`, `"fill-subtle"`, `"outline-emphasis"`, `"outline-subtle"`, or `"ghost"` | `"primary"` | |
48
+ | `disabled` | `boolean` | `false` | Whether the `button` is disabled |
49
49
 
50
50
  ### Slots
51
51
 
52
- | Name | Description |
53
- |-----------|---------------------------------------------|
52
+ | Name | Description |
53
+ |-----------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
54
54
  | `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 CHANGED
@@ -42,12 +42,17 @@ defineSlots<{
42
42
  const {
43
43
  to = undefined,
44
44
  size = "md",
45
- appearance = "primary",
45
+ appearance = "fill-emphasis",
46
46
  disabled = false,
47
47
  } = defineProps<{
48
48
  to?: RouteLocationRaw;
49
49
  size?: keyof typeof BUTTON_SIZE_CLASSES;
50
- appearance?: "primary" | "secondary" | "secondary-alt" | "tertiary" | "ghost";
50
+ appearance?:
51
+ | "fill-emphasis"
52
+ | "fill-subtle"
53
+ | "outline-emphasis"
54
+ | "outline-subtle"
55
+ | "ghost";
51
56
  disabled?: boolean;
52
57
  }>();
53
58
 
@@ -69,13 +74,13 @@ const attributes = computed(() => {
69
74
  const appearanceClasses = computed(
70
75
  () =>
71
76
  ({
72
- primary:
77
+ "fill-emphasis":
73
78
  "border-transparent bg-primary text-neutral not-disabled:hover:bg-primary-hover disabled:bg-neutral-faint disabled:text-neutral-soft",
74
- secondary:
79
+ "outline-emphasis":
75
80
  "border-neutral-faint bg-transparent text-primary-emphasis not-disabled:hover:border-neutral-subtle not-disabled:hover:text-primary-hover disabled:text-neutral-faint",
76
- "secondary-alt":
81
+ "outline-subtle":
77
82
  "border-neutral-faint bg-transparent text-neutral-emphasis not-disabled:hover:border-neutral-subtle not-disabled:hover:text-neutral-primary disabled:text-neutral-faint",
78
- tertiary:
83
+ "fill-subtle":
79
84
  "border-transparent bg-neutral-subtle text-neutral not-disabled:hover:bg-neutral-emphasis disabled:bg-neutral-faint disabled:text-neutral-soft",
80
85
  ghost:
81
86
  "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 CHANGED
@@ -1,7 +1,7 @@
1
1
  <template>
2
2
  <div :class="hasBorderTop ? 'border-t border-t-neutral-faint' : ''" />
3
3
  <UiButton
4
- appearance="secondary"
4
+ appearance="outline-emphasis"
5
5
  class="flex w-full justify-between border-none"
6
6
  @click="toggleMenuHandler"
7
7
  >
package/src/components/UiDatePicker/UiDatePicker.vue CHANGED
@@ -70,7 +70,7 @@
70
70
  'w-full min-w-0': triggerWidth === 'full',
71
71
  'flex-none': triggerWidth === 'fit',
72
72
  }"
73
- :appearance="value ? 'primary' : 'secondary-alt'"
73
+ :appearance="value ? 'fill-emphasis' : 'outline-subtle'"
74
74
  :disabled
75
75
  size="sm"
76
76
  data-testid="datepicker-trigger"
package/src/components/UiMenu/UiMenu.vue CHANGED
@@ -11,7 +11,7 @@
11
11
  :class="{
12
12
  'border-neutral-subtle': isPopoverOpen,
13
13
  }"
14
- :appearance="active ? 'primary' : buttonAppearance"
14
+ :appearance="active ? 'fill-emphasis' : buttonAppearance"
15
15
  :disabled
16
16
  :size="filterButtonSize"
17
17
  data-testid="menu-button"
@@ -102,7 +102,7 @@
102
102
 
103
103
  <div v-if="hasResetOption" class="px-2 pt-1.5 pb-2 text-neutral-primary">
104
104
  <UiButton
105
- appearance="secondary"
105
+ appearance="outline-emphasis"
106
106
  :disabled="disabledReset"
107
107
  icon-name="reset"
108
108
  size="xs"
@@ -173,7 +173,7 @@ const {
173
173
  disabled = false,
174
174
  active = false,
175
175
  iconLeft = null,
176
- buttonAppearance = "secondary-alt",
176
+ buttonAppearance = "outline-subtle",
177
177
  filterButtonSize = "sm",
178
178
  defaultTitle = "",
179
179
  multiLabel = "",
@@ -202,7 +202,12 @@ const {
202
202
  disabled?: boolean;
203
203
  active?: boolean;
204
204
  iconLeft?: UiIconName;
205
- buttonAppearance?: "primary" | "secondary" | "secondary-alt" | "ghost";
205
+ buttonAppearance?:
206
+ | "fill-emphasis"
207
+ | "fill-subtle"
208
+ | "outline-emphasis"
209
+ | "outline-subtle"
210
+ | "ghost";
206
211
  filterButtonSize?: "sm" | "xs";
207
212
  defaultTitle?: string;
208
213
  multiLabel?: string;
package/src/components/UiSearchBar/UiSearchBar.vue CHANGED
@@ -51,7 +51,7 @@
51
51
  <UiButton
52
52
  :aria-label="executeSearchButtonTitle"
53
53
  :appearance="
54
- isInputFocused || searchIconHover ? 'primary' : 'ghost'
54
+ isInputFocused || searchIconHover ? 'fill-emphasis' : 'ghost'
55
55
  "
56
56
  size="sm"
57
57
  @click="handleSearchButton"