@db-ux/core-components 3.1.17 → 3.1.19

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 (24) hide show
  1. package/CHANGELOG.md +45 -0
  2. package/README.md +1 -1
  3. package/agent/_instructions.md +9 -0
  4. package/build/assets/fallback-icon.svg +3 -0
  5. package/build/assets/icons/fonts/fallback/icon-font-fallback.woff2 +0 -0
  6. package/build/components/accordion-item/accordion-item.css +2 -1
  7. package/build/components/checkbox/checkbox.css +2 -1
  8. package/build/components/custom-select/custom-select.css +8 -1
  9. package/build/components/drawer/drawer.scss +25 -0
  10. package/build/components/infotext/infotext.css +7 -2
  11. package/build/components/input/input.css +2 -1
  12. package/build/components/link/link.css +2 -1
  13. package/build/components/navigation-item/navigation-item.css +2 -1
  14. package/build/components/notification/notification.css +7 -2
  15. package/build/components/select/select.css +8 -1
  16. package/build/components/switch/switch.css +2 -1
  17. package/build/components/tag/tag.css +2 -1
  18. package/build/styles/absolute.css +8 -4
  19. package/build/styles/index.css +7 -3
  20. package/build/styles/internal/_select-components.scss +9 -0
  21. package/build/styles/relative.css +8 -4
  22. package/build/styles/rollup.css +8 -4
  23. package/build/styles/webpack.css +8 -4
  24. package/package.json +9 -4
package/CHANGELOG.md ADDED
@@ -0,0 +1,45 @@
1
+ # @db-ux/core-components
2
+
3
+ ## 3.1.19
4
+
5
+ _version bump_
6
+
7
+
8
+ ## 3.1.18
9
+
10
+ ### Patch Changes
11
+
12
+ - fix(DBTabs): ensure navigation arrows appear correctly on window resize - [see commit 4e65e00](https://github.com/db-ux-design-system/core-web/commit/4e65e00d280cae18baee03b5a7a9b13eec063835):
13
+ - This update resolves an issue where navigation arrows in DBTabs would not appear or update correctly when the window was resized. The component now properly responds to resize events, ensuring arrows are always shown or hidden as needed.
14
+
15
+ - fix(select): jumping placeholder for label above - [see commit 7ed8d22](https://github.com/db-ux-design-system/core-web/commit/7ed8d2225102e0e9044437e95917e11eef4bc73f)
16
+
17
+ - enabled [`@db-ux/agent-cli`](https://www.npmjs.com/package/@db-ux/agent-cli) for every package - [see commit 0233048](https://github.com/db-ux-design-system/core-web/commit/023304869e61f5a506dca66a22d69e5f3d70f4d0):
18
+ - auto-generate/auto-update `.github/copilot-instructions.md`, to ensure GitHub Copilot uses DB UX Components for code generation
19
+
20
+ ## 3.1.17
21
+
22
+ ### Patch Changes
23
+
24
+ - 0c20c00: fix: color mode for textarea resizer control set by color-mode-switch documentation UI component
25
+ - 0c20c00: refactor: enabling `hidden` HTML attribute in every context in which we need to set overwriting styling declarations (`display`)
26
+ - @db-ux/core-foundations@3.1.17
27
+
28
+ ## 3.1.16
29
+
30
+ ### Patch Changes
31
+
32
+ - a28eb71: fix(custom-select): keyboard navigation for option groups in single-select mode:
33
+ - Fixes a keyboard accessibility issue where users could not navigate to options in subsequent option groups using arrow keys in single-select mode.
34
+ - Now, all options are accessible via keyboard regardless of group boundaries.
35
+ - a28eb71: fix: JS framework core-components packages are missing `@db-ux` dependencies
36
+ - @db-ux/core-foundations@3.1.16
37
+
38
+ ## 3.1.15
39
+
40
+ ### Patch Changes
41
+
42
+ - 262964b: fix(Switch): double event firing with Angular signals
43
+ - 262964b: fix(CustomSelect): tags remaining visible when form values are reset
44
+ - 262964b: fix(CustomSelect): custom removeTagsTexts are not applied correctly
45
+ - @db-ux/core-foundations@3.1.15
package/README.md CHANGED
@@ -29,7 +29,7 @@ If you just need the styling follow this:
29
29
 
30
30
  **No!** The `@db-ux/core-components` package **automatically includes** all the foundations (`@db-ux/core-foundations`) you need. You only need to install one package:
31
31
 
32
- - **Use `@db-ux/core-components`** - If you want to use UI components (buttons, inputs, etc.)
32
+ - **Use `@db-ux/core-components`** - If you want to use UI components (buttons, inputs, etc.)
33
33
  - **Use `@db-ux/core-foundations`** - If you only need design tokens, colors, spacing, fonts, and assets without any component styles
34
34
 
35
35
  ## Install
package/agent/_instructions.md ADDED
@@ -0,0 +1,9 @@
1
+ ## Common AI mistakes
2
+
3
+ ### `DBButton` or `db-button`
4
+
5
+ - available variants are `outline`, `brand`, `filled`, `ghost`
6
+ - always use variant `outline` as default
7
+ - use variant `brand` as CTA or primary action
8
+ - if `noText`/`no-text` property is used add a `DBTooltip` or `db-tooltip` inside the Button
9
+ - always add a `type` as property as best practise
package/build/assets/fallback-icon.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="1" height="1">
2
+ <path d="M0 0 L0 0 L0 0 Z" stroke="none" fill-rule="evenodd" fill="transparent"></path>
3
+ </svg>
package/build/components/accordion-item/accordion-item.css CHANGED
@@ -145,7 +145,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
145
145
  color: var(--db-icon-color, inherit);
146
146
  display: inline-block;
147
147
  /*** icon - placeholder ***/
148
- font-family: var(--db-icon-font-family, var(--db-icon-default-font-family, "db-ux-default")) !important;
148
+ font-family: var(--db-icon-font-family, var(--db-icon-default-font-family, "db-ux-default", "icon-font-fallback")) !important;
149
149
  font-size: var(--db-icon-font-size, 1.5rem);
150
150
  -webkit-font-smoothing: antialiased;
151
151
  -moz-osx-font-smoothing: grayscale;
@@ -158,6 +158,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
158
158
  /* stylelint-disable-next-line declaration-property-value-no-unknown */
159
159
  speak: never;
160
160
  text-transform: none;
161
+ overflow: clip;
161
162
  vertical-align: var(--db-icon-vertical-align, middle);
162
163
  block-size: var(--db-icon-font-size, 1.5rem);
163
164
  inline-size: var(--db-icon-font-size, 1.5rem);
package/build/components/checkbox/checkbox.css CHANGED
@@ -66,7 +66,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
66
66
  color: var(--db-icon-color, inherit);
67
67
  display: inline-block;
68
68
  /*** icon - placeholder ***/
69
- font-family: var(--db-icon-font-family, var(--db-icon-default-font-family, "db-ux-default")) !important;
69
+ font-family: var(--db-icon-font-family, var(--db-icon-default-font-family, "db-ux-default", "icon-font-fallback")) !important;
70
70
  font-size: var(--db-icon-font-size, 1.5rem);
71
71
  -webkit-font-smoothing: antialiased;
72
72
  -moz-osx-font-smoothing: grayscale;
@@ -79,6 +79,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
79
79
  /* stylelint-disable-next-line declaration-property-value-no-unknown */
80
80
  speak: never;
81
81
  text-transform: none;
82
+ overflow: clip;
82
83
  vertical-align: var(--db-icon-vertical-align, middle);
83
84
  block-size: var(--db-icon-font-size, 1.5rem);
84
85
  inline-size: var(--db-icon-font-size, 1.5rem);
package/build/components/custom-select/custom-select.css CHANGED
@@ -535,7 +535,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
535
535
  color: var(--db-icon-color, inherit);
536
536
  display: inline-block;
537
537
  /*** icon - placeholder ***/
538
- font-family: var(--db-icon-font-family, var(--db-icon-default-font-family, "db-ux-default")) !important;
538
+ font-family: var(--db-icon-font-family, var(--db-icon-default-font-family, "db-ux-default", "icon-font-fallback")) !important;
539
539
  font-size: var(--db-icon-font-size, 1.5rem);
540
540
  -webkit-font-smoothing: antialiased;
541
541
  -moz-osx-font-smoothing: grayscale;
@@ -548,6 +548,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
548
548
  /* stylelint-disable-next-line declaration-property-value-no-unknown */
549
549
  speak: never;
550
550
  text-transform: none;
551
+ overflow: clip;
551
552
  vertical-align: var(--db-icon-vertical-align, middle);
552
553
  block-size: var(--db-icon-font-size, 1.5rem);
553
554
  inline-size: var(--db-icon-font-size, 1.5rem);
@@ -725,6 +726,12 @@ input[type=radio]:checked) > label {
725
726
  position: absolute;
726
727
  inset-block-start: 0;
727
728
  inset-inline-start: 0;
729
+ opacity: 0;
730
+ }
731
+ @media screen and (prefers-reduced-motion: no-preference) {
732
+ .db-custom-select-placeholder {
733
+ transition: opacity var(--db-transition-straight-emotional), outline var(--db-transition-duration-extra-fast), border-color var(--db-transition-straight-emotional), background-color var(--db-transition-straight-emotional);
734
+ }
728
735
  }
729
736
 
730
737
  .db-custom-select [id$=-placeholder] {
package/build/components/drawer/drawer.scss CHANGED
@@ -26,6 +26,10 @@
26
26
 
27
27
  %full-horizontal {
28
28
  &:not([data-width="full"]) {
29
+ /// Sets the maximum height of the drawer
30
+ /// @propertyname max-block-size
31
+ /// @cssprop --db-drawer-max-height
32
+ /// @default calc(100% - #{variables.$db-spacing-fixed-xl})
29
33
  max-block-size: var(
30
34
  --db-drawer-max-height,
31
35
  calc(100% - #{variables.$db-spacing-fixed-xl})
@@ -87,6 +91,10 @@ $spacings: (
87
91
 
88
92
  .db-drawer-header {
89
93
  // We need this variable to overwrite it inside the header
94
+ /// Controls the bottom padding inside the drawer header
95
+ /// @propertyname padding-block-end
96
+ /// @cssprop --db-drawer-header-padding-block-end
97
+ /// @default #{map.get($spacing, "block")}
90
98
  /* stylelint-disable-next-line db-ux/use-spacings */
91
99
  padding-block-end: var(
92
100
  --db-drawer-header-padding-block-end,
@@ -97,6 +105,10 @@ $spacings: (
97
105
 
98
106
  .db-drawer-content {
99
107
  // We need this variable to overwrite it inside the header
108
+ /// Controls left/right padding inside the drawer content area
109
+ /// @propertyname padding-inline
110
+ /// @cssprop --db-drawer-content-padding-inline
111
+ /// @default #{map.get($spacing, "inline")}
100
112
  /* stylelint-disable-next-line db-ux/use-spacings */
101
113
  padding-inline: var(
102
114
  --db-drawer-content-padding-inline,
@@ -135,6 +147,19 @@ $spacings: (
135
147
  box-shadow: variables.$db-elevation-md;
136
148
 
137
149
  &:not([data-width="full"]) {
150
+ /// Sets the maximum width of the drawer
151
+ /// and some default values for the drawer
152
+ /// @propertyname max-inline-size
153
+ /// @cssprop --db-drawer-max-width
154
+ /// @default calc(100% - #{variables.$db-spacing-fixed-xl})
155
+ ///
156
+ /// @example css - Wide drawer
157
+ /// .db-drawer-wide {
158
+ /// --db-drawer-max-width: 800px;
159
+ /// }
160
+ /// <div class="db-drawer db-drawer-wide">
161
+ /// <!-- wide drawer -->
162
+ /// </div>
138
163
  max-inline-size: var(
139
164
  --db-drawer-max-width,
140
165
  calc(100% - #{variables.$db-spacing-fixed-xl})
package/build/components/infotext/infotext.css CHANGED
@@ -127,7 +127,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
127
127
  color: var(--db-icon-color, inherit);
128
128
  display: inline-block;
129
129
  /*** icon - placeholder ***/
130
- font-family: var(--db-icon-font-family, var(--db-icon-default-font-family, "db-ux-default")) !important;
130
+ font-family: var(--db-icon-font-family, var(--db-icon-default-font-family, "db-ux-default", "icon-font-fallback")) !important;
131
131
  font-size: var(--db-icon-font-size, 1.5rem);
132
132
  -webkit-font-smoothing: antialiased;
133
133
  -moz-osx-font-smoothing: grayscale;
@@ -140,6 +140,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
140
140
  /* stylelint-disable-next-line declaration-property-value-no-unknown */
141
141
  speak: never;
142
142
  text-transform: none;
143
+ overflow: clip;
143
144
  vertical-align: var(--db-icon-vertical-align, middle);
144
145
  block-size: var(--db-icon-font-size, 1.5rem);
145
146
  inline-size: var(--db-icon-font-size, 1.5rem);
@@ -168,7 +169,11 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
168
169
  display: flex;
169
170
  }
170
171
  .db-infotext:not([data-icon]) {
171
- --db-icon-font-family: var(--db-icon-filled-font-family, "db-ux-filled");
172
+ --db-icon-font-family: var(
173
+ --db-icon-filled-font-family,
174
+ "db-ux-filled",
175
+ "icon-font-fallback"
176
+ );
172
177
  }
173
178
  .db-infotext:not([data-icon]):not([data-show-icon-leading=false])::before {
174
179
  --db-icon: "information_circle";
package/build/components/input/input.css CHANGED
@@ -378,7 +378,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
378
378
  color: var(--db-icon-color, inherit);
379
379
  display: inline-block;
380
380
  /*** icon - placeholder ***/
381
- font-family: var(--db-icon-font-family, var(--db-icon-default-font-family, "db-ux-default")) !important;
381
+ font-family: var(--db-icon-font-family, var(--db-icon-default-font-family, "db-ux-default", "icon-font-fallback")) !important;
382
382
  font-size: var(--db-icon-font-size, 1.5rem);
383
383
  -webkit-font-smoothing: antialiased;
384
384
  -moz-osx-font-smoothing: grayscale;
@@ -391,6 +391,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
391
391
  /* stylelint-disable-next-line declaration-property-value-no-unknown */
392
392
  speak: never;
393
393
  text-transform: none;
394
+ overflow: clip;
394
395
  vertical-align: var(--db-icon-vertical-align, middle);
395
396
  block-size: var(--db-icon-font-size, 1.5rem);
396
397
  inline-size: var(--db-icon-font-size, 1.5rem);
package/build/components/link/link.css CHANGED
@@ -210,7 +210,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
210
210
  color: var(--db-icon-color, inherit);
211
211
  display: inline-block;
212
212
  /*** icon - placeholder ***/
213
- font-family: var(--db-icon-font-family, var(--db-icon-default-font-family, "db-ux-default")) !important;
213
+ font-family: var(--db-icon-font-family, var(--db-icon-default-font-family, "db-ux-default", "icon-font-fallback")) !important;
214
214
  font-size: var(--db-icon-font-size, 1.5rem);
215
215
  -webkit-font-smoothing: antialiased;
216
216
  -moz-osx-font-smoothing: grayscale;
@@ -223,6 +223,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
223
223
  /* stylelint-disable-next-line declaration-property-value-no-unknown */
224
224
  speak: never;
225
225
  text-transform: none;
226
+ overflow: clip;
226
227
  vertical-align: var(--db-icon-vertical-align, middle);
227
228
  block-size: var(--db-icon-font-size, 1.5rem);
228
229
  inline-size: var(--db-icon-font-size, 1.5rem);
package/build/components/navigation-item/navigation-item.css CHANGED
@@ -203,7 +203,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
203
203
  color: var(--db-icon-color, inherit);
204
204
  display: inline-block;
205
205
  /*** icon - placeholder ***/
206
- font-family: var(--db-icon-font-family, var(--db-icon-default-font-family, "db-ux-default")) !important;
206
+ font-family: var(--db-icon-font-family, var(--db-icon-default-font-family, "db-ux-default", "icon-font-fallback")) !important;
207
207
  font-size: var(--db-icon-font-size, 1.5rem);
208
208
  -webkit-font-smoothing: antialiased;
209
209
  -moz-osx-font-smoothing: grayscale;
@@ -216,6 +216,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
216
216
  /* stylelint-disable-next-line declaration-property-value-no-unknown */
217
217
  speak: never;
218
218
  text-transform: none;
219
+ overflow: clip;
219
220
  vertical-align: var(--db-icon-vertical-align, middle);
220
221
  block-size: var(--db-icon-font-size, 1.5rem);
221
222
  inline-size: var(--db-icon-font-size, 1.5rem);
package/build/components/notification/notification.css CHANGED
@@ -914,7 +914,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
914
914
  color: var(--db-icon-color, inherit);
915
915
  display: inline-block;
916
916
  /*** icon - placeholder ***/
917
- font-family: var(--db-icon-font-family, var(--db-icon-default-font-family, "db-ux-default")) !important;
917
+ font-family: var(--db-icon-font-family, var(--db-icon-default-font-family, "db-ux-default", "icon-font-fallback")) !important;
918
918
  font-size: var(--db-icon-font-size, 1.5rem);
919
919
  -webkit-font-smoothing: antialiased;
920
920
  -moz-osx-font-smoothing: grayscale;
@@ -927,6 +927,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
927
927
  /* stylelint-disable-next-line declaration-property-value-no-unknown */
928
928
  speak: never;
929
929
  text-transform: none;
930
+ overflow: clip;
930
931
  vertical-align: var(--db-icon-vertical-align, middle);
931
932
  block-size: var(--db-icon-font-size, 1.5rem);
932
933
  inline-size: var(--db-icon-font-size, 1.5rem);
@@ -1271,7 +1272,11 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
1271
1272
  .db-notification[data-icon]::before, .db-notification::before,
1272
1273
  .db-notification img {
1273
1274
  --db-icon-margin-end: 0;
1274
- --db-icon-font-family: var(--db-icon-filled-font-family, "db-ux-filled");
1275
+ --db-icon-font-family: var(
1276
+ --db-icon-filled-font-family,
1277
+ "db-ux-filled",
1278
+ "icon-font-fallback"
1279
+ );
1275
1280
  grid-area: icon;
1276
1281
  }
1277
1282
  .db-notification:has(a)[data-link-variant=inline], .db-notification:has(a)[data-variant=overlay] {
package/build/components/select/select.css CHANGED
@@ -378,7 +378,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
378
378
  color: var(--db-icon-color, inherit);
379
379
  display: inline-block;
380
380
  /*** icon - placeholder ***/
381
- font-family: var(--db-icon-font-family, var(--db-icon-default-font-family, "db-ux-default")) !important;
381
+ font-family: var(--db-icon-font-family, var(--db-icon-default-font-family, "db-ux-default", "icon-font-fallback")) !important;
382
382
  font-size: var(--db-icon-font-size, 1.5rem);
383
383
  -webkit-font-smoothing: antialiased;
384
384
  -moz-osx-font-smoothing: grayscale;
@@ -391,6 +391,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
391
391
  /* stylelint-disable-next-line declaration-property-value-no-unknown */
392
392
  speak: never;
393
393
  text-transform: none;
394
+ overflow: clip;
394
395
  vertical-align: var(--db-icon-vertical-align, middle);
395
396
  block-size: var(--db-icon-font-size, 1.5rem);
396
397
  inline-size: var(--db-icon-font-size, 1.5rem);
@@ -572,6 +573,12 @@ input[type=radio]:checked) > label {
572
573
  position: absolute;
573
574
  inset-block-start: 0;
574
575
  inset-inline-start: 0;
576
+ opacity: 0;
577
+ }
578
+ @media screen and (prefers-reduced-motion: no-preference) {
579
+ .db-select-placeholder {
580
+ transition: opacity var(--db-transition-straight-emotional), outline var(--db-transition-duration-extra-fast), border-color var(--db-transition-straight-emotional), background-color var(--db-transition-straight-emotional);
581
+ }
575
582
  }
576
583
 
577
584
  .db-select [id$=-placeholder] {
package/build/components/switch/switch.css CHANGED
@@ -463,7 +463,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
463
463
  color: var(--db-icon-color, inherit);
464
464
  display: inline-block;
465
465
  /*** icon - placeholder ***/
466
- font-family: var(--db-icon-font-family, var(--db-icon-default-font-family, "db-ux-default")) !important;
466
+ font-family: var(--db-icon-font-family, var(--db-icon-default-font-family, "db-ux-default", "icon-font-fallback")) !important;
467
467
  font-size: var(--db-icon-font-size, 1.5rem);
468
468
  -webkit-font-smoothing: antialiased;
469
469
  -moz-osx-font-smoothing: grayscale;
@@ -476,6 +476,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
476
476
  /* stylelint-disable-next-line declaration-property-value-no-unknown */
477
477
  speak: never;
478
478
  text-transform: none;
479
+ overflow: clip;
479
480
  vertical-align: var(--db-icon-vertical-align, middle);
480
481
  block-size: var(--db-icon-font-size, 1.5rem);
481
482
  inline-size: var(--db-icon-font-size, 1.5rem);
package/build/components/tag/tag.css CHANGED
@@ -969,7 +969,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
969
969
  color: var(--db-icon-color, inherit);
970
970
  display: inline-block;
971
971
  /*** icon - placeholder ***/
972
- font-family: var(--db-icon-font-family, var(--db-icon-default-font-family, "db-ux-default")) !important;
972
+ font-family: var(--db-icon-font-family, var(--db-icon-default-font-family, "db-ux-default", "icon-font-fallback")) !important;
973
973
  font-size: var(--db-icon-font-size, 1.5rem);
974
974
  -webkit-font-smoothing: antialiased;
975
975
  -moz-osx-font-smoothing: grayscale;
@@ -982,6 +982,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
982
982
  /* stylelint-disable-next-line declaration-property-value-no-unknown */
983
983
  speak: never;
984
984
  text-transform: none;
985
+ overflow: clip;
985
986
  vertical-align: var(--db-icon-vertical-align, middle);
986
987
  block-size: var(--db-icon-font-size, 1.5rem);
987
988
  inline-size: var(--db-icon-font-size, 1.5rem);