@db-ux/core-components 4.13.1-angular-signal-forms6-a1510bb → 4.13.1-angular-signal-forms9-42cbbed

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 (14) hide show
  1. package/build/components/navigation/navigation.css +3 -4
  2. package/build/components/navigation/navigation.scss +4 -4
  3. package/build/components/navigation-item/navigation-item.scss +1 -1
  4. package/build/components/tab-item/tab-item.scss +0 -1
  5. package/build/components/tabs/tabs.css +5 -6
  6. package/build/components/tabs/tabs.scss +15 -15
  7. package/build/styles/absolute.css +3 -3
  8. package/build/styles/bundle.css +3 -3
  9. package/build/styles/index.css +2 -2
  10. package/build/styles/internal/{_db-puls.scss → _indicator.scss} +37 -16
  11. package/build/styles/relative.css +3 -3
  12. package/build/styles/rollup.css +3 -3
  13. package/build/styles/webpack.css +3 -3
  14. package/package.json +4 -4
package/build/components/navigation/navigation.css CHANGED
@@ -24,6 +24,7 @@
24
24
  content: "";
25
25
  position: absolute;
26
26
  border-radius: var(--db-border-radius-xs);
27
+ background: linear-gradient(135deg, var(--db-pride-red, var(--db-brand-on-bg-basic-emphasis-70-default)) 16.7%, var(--db-pride-orange, var(--db-brand-on-bg-basic-emphasis-70-default)) 0, var(--db-pride-orange, var(--db-brand-on-bg-basic-emphasis-70-default)) 33.4%, var(--db-pride-yellow, var(--db-brand-on-bg-basic-emphasis-70-default)) 0, var(--db-pride-yellow, var(--db-brand-on-bg-basic-emphasis-70-default)) 50.1%, var(--db-pride-green, var(--db-brand-on-bg-basic-emphasis-70-default)) 0, var(--db-pride-green, var(--db-brand-on-bg-basic-emphasis-70-default)) 66.8%, var(--db-pride-blue, var(--db-brand-on-bg-basic-emphasis-70-default)) 0, var(--db-pride-blue, var(--db-brand-on-bg-basic-emphasis-70-default)) 83.5%, var(--db-pride-violet, var(--db-brand-on-bg-basic-emphasis-70-default)) 0);
27
28
  }
28
29
  @media (prefers-reduced-motion: no-preference) {
29
30
  .db-navigation > menu .db-navigation-item::after {
@@ -35,8 +36,7 @@
35
36
  block-size: 0;
36
37
  inline-size: var(--db-border-width-xs);
37
38
  transform: translate(0, -50%);
38
- inset-block: 50% auto;
39
- background-color: var(--db-brand-on-bg-basic-emphasis-70-default);
39
+ inset-block: var(--indicator-vertical-inset-block-start, 50%) auto;
40
40
  inset-inline-start: calc(-1 * var(--db-spacing-fixed-xs));
41
41
  }
42
42
  .db-navigation > menu .db-navigation-item {
@@ -48,7 +48,6 @@
48
48
  inline-size: 0;
49
49
  transform: translate(-50%, 0);
50
50
  inset-inline-start: 50%;
51
- background-color: var(--db-brand-on-bg-basic-emphasis-70-default);
52
51
  inset-block: auto calc(-1 * var(--db-spacing-fixed-xs));
53
52
  }
54
53
  }
@@ -57,7 +56,7 @@
57
56
  }
58
57
 
59
58
  .db-navigation > menu .db-navigation-item:has([aria-current=page])::after, .db-navigation > menu .db-navigation-item:has([data-active=true])::after, .db-navigation > menu .db-navigation-item[aria-current=page]::after, .db-navigation > menu .db-navigation-item[data-active=true]::after {
60
- block-size: 100%;
59
+ block-size: var(--indicator-vertical-block-size, 100%);
61
60
  inline-size: var(--db-border-width-xs);
62
61
  }
63
62
  @media (forced-colors: active), print {
package/build/components/navigation/navigation.scss CHANGED
@@ -3,7 +3,7 @@
3
3
  @use "../../styles/internal/component";
4
4
  @use "@db-ux/core-foundations/build/styles/helpers";
5
5
  @use "../../styles/internal/form-components";
6
- @use "../../styles/internal/db-puls";
6
+ @use "../../styles/internal/indicator";
7
7
 
8
8
  .db-navigation {
9
9
  -webkit-tap-highlight-color: transparent; /* for removing the highlight */
@@ -26,7 +26,7 @@
26
26
  }
27
27
 
28
28
  .db-navigation-item {
29
- @extend %db-puls-auto;
29
+ @extend %indicator-auto;
30
30
 
31
31
  .db-navigation-item-expand-button:is(button),
32
32
  .db-navigation-item-expand-button > button {
@@ -86,10 +86,10 @@
86
86
  &:has([data-active="true"]),
87
87
  &[aria-current="page"],
88
88
  &[data-active="true"] {
89
- @extend %show-db-puls-auto;
89
+ @extend %show-indicator-auto;
90
90
  }
91
91
 
92
- // angular workaround: as no direct-child selector can be used, the pulse is hidden from the second level onwards
92
+ // angular workaround: as no direct-child selector can be used, the indicator is hidden from the second level onwards
93
93
  .db-navigation-item {
94
94
  &::after {
95
95
  display: none;
package/build/components/navigation-item/navigation-item.scss CHANGED
@@ -118,7 +118,7 @@
118
118
  text-decoration: none;
119
119
 
120
120
  &:focus-visible {
121
- // We need to increase the z-index on focus-visible for the outline and box-shadow to appear above the pulse
121
+ // We need to increase the z-index on focus-visible for the outline and box-shadow to appear above the indicator
122
122
  z-index: 1;
123
123
  }
124
124
  }
package/build/components/tab-item/tab-item.scss CHANGED
@@ -3,7 +3,6 @@
3
3
  @use "@db-ux/core-foundations/build/styles/icons";
4
4
  @use "@db-ux/core-foundations/build/styles/helpers";
5
5
  @use "../../styles/internal/component";
6
- @use "../../styles/internal/db-puls";
7
6
  @use "../../styles/internal/form-components";
8
7
 
9
8
  $with-icon-padding-calc: calc(
package/build/components/tabs/tabs.css CHANGED
@@ -24,6 +24,7 @@
24
24
  content: "";
25
25
  position: absolute;
26
26
  border-radius: var(--db-border-radius-xs);
27
+ background: linear-gradient(135deg, var(--db-pride-red, var(--db-brand-on-bg-basic-emphasis-70-default)) 16.7%, var(--db-pride-orange, var(--db-brand-on-bg-basic-emphasis-70-default)) 0, var(--db-pride-orange, var(--db-brand-on-bg-basic-emphasis-70-default)) 33.4%, var(--db-pride-yellow, var(--db-brand-on-bg-basic-emphasis-70-default)) 0, var(--db-pride-yellow, var(--db-brand-on-bg-basic-emphasis-70-default)) 50.1%, var(--db-pride-green, var(--db-brand-on-bg-basic-emphasis-70-default)) 0, var(--db-pride-green, var(--db-brand-on-bg-basic-emphasis-70-default)) 66.8%, var(--db-pride-blue, var(--db-brand-on-bg-basic-emphasis-70-default)) 0, var(--db-pride-blue, var(--db-brand-on-bg-basic-emphasis-70-default)) 83.5%, var(--db-pride-violet, var(--db-brand-on-bg-basic-emphasis-70-default)) 0);
27
28
  }
28
29
  @media (prefers-reduced-motion: no-preference) {
29
30
  .db-tabs .db-tab-item::after {
@@ -103,7 +104,6 @@
103
104
  inline-size: 0;
104
105
  transform: translate(-50%, 0);
105
106
  inset-inline-start: 50%;
106
- background-color: var(--db-brand-on-bg-basic-emphasis-70-default);
107
107
  inset-block: auto calc(-1 * var(--db-spacing-fixed-xs));
108
108
  }
109
109
  .db-tabs:not([data-orientation=vertical]) .db-tab-list > ul .db-tab-item:has(input:checked)::after {
@@ -123,8 +123,7 @@
123
123
  block-size: 0;
124
124
  inline-size: var(--db-border-width-xs);
125
125
  transform: translate(0, -50%);
126
- inset-block: 50% auto;
127
- background-color: var(--db-brand-on-bg-basic-emphasis-70-default);
126
+ inset-block: var(--indicator-vertical-inset-block-start, 50%) auto;
128
127
  inset-inline-start: calc(-1 * var(--db-spacing-fixed-xs));
129
128
  }
130
129
  .db-tabs[data-orientation=vertical] .db-tab-list > ul .db-tab-item::after {
@@ -132,7 +131,7 @@
132
131
  z-index: -2;
133
132
  }
134
133
  .db-tabs[data-orientation=vertical] .db-tab-list > ul .db-tab-item:has(input:checked)::after {
135
- block-size: 100%;
134
+ block-size: var(--indicator-vertical-block-size, 100%);
136
135
  inline-size: var(--db-border-width-xs);
137
136
  }
138
137
  @media (forced-colors: active), print {
@@ -207,7 +206,7 @@
207
206
  inline-size: 100%;
208
207
  }
209
208
  .db-tabs:not([data-orientation=vertical]) .db-tab-list {
210
- /* horizontal track for pulse */
209
+ /* horizontal track for indicator */
211
210
  }
212
211
  .db-tabs:not([data-orientation=vertical]) .db-tab-list::before {
213
212
  block-size: var(--db-border-width-xs);
@@ -272,7 +271,7 @@
272
271
  overflow: visible;
273
272
  }
274
273
  .db-tabs[data-orientation=vertical] .db-tab-list {
275
- /* vertical track for pulse */
274
+ /* vertical track for indicator */
276
275
  }
277
276
  .db-tabs[data-orientation=vertical] .db-tab-list::before {
278
277
  inline-size: var(--db-border-width-xs);
package/build/components/tabs/tabs.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  @use "@db-ux/core-foundations/build/styles/variables";
2
2
  @use "@db-ux/core-foundations/build/styles/colors";
3
3
  @use "../../styles/internal/form-components";
4
- @use "../../styles/internal/db-puls";
4
+ @use "../../styles/internal/indicator";
5
5
  @use "@db-ux/core-foundations/build/styles/helpers";
6
6
 
7
7
  $max-tabs: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
@@ -20,12 +20,12 @@ $max-tabs: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
20
20
  }
21
21
  }
22
22
 
23
- %horizontal-pulse {
23
+ %horizontal-indicator {
24
24
  .db-tab-item {
25
- @include db-puls.set-db-puls-horizontal;
25
+ @include indicator.set-indicator-horizontal;
26
26
 
27
27
  &:has(input:checked) {
28
- @include db-puls.show-db-puls-horizontal;
28
+ @include indicator.show-indicator-horizontal;
29
29
 
30
30
  &::after {
31
31
  inset-block-end: calc(
@@ -40,9 +40,9 @@ $max-tabs: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
40
40
  }
41
41
  }
42
42
 
43
- %vertical-pulse {
43
+ %vertical-indicator {
44
44
  .db-tab-item {
45
- @include db-puls.set-db-puls-vertical;
45
+ @include indicator.set-indicator-vertical;
46
46
 
47
47
  &::after {
48
48
  inset-inline-start: 0;
@@ -50,12 +50,12 @@ $max-tabs: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
50
50
  }
51
51
 
52
52
  &:has(input:checked) {
53
- @include db-puls.show-db-puls-vertical;
53
+ @include indicator.show-indicator-vertical;
54
54
  }
55
55
  }
56
56
  }
57
57
 
58
- %pulse-track {
58
+ %indicator-track {
59
59
  background-color: colors.$db-adaptive-bg-basic-transparent-semi-default;
60
60
  content: "";
61
61
  border-radius: variables.$db-border-radius-xs;
@@ -97,7 +97,7 @@ $max-tabs: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
97
97
  }
98
98
 
99
99
  .db-tab-item {
100
- @extend %db-puls;
100
+ @extend %indicator;
101
101
  }
102
102
 
103
103
  /*
@@ -111,9 +111,9 @@ $max-tabs: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
111
111
  }
112
112
 
113
113
  .db-tab-list {
114
- /* horizontal track for pulse */
114
+ /* horizontal track for indicator */
115
115
  &::before {
116
- @extend %pulse-track;
116
+ @extend %indicator-track;
117
117
 
118
118
  block-size: variables.$db-border-width-xs;
119
119
  inset-inline: variables.$db-spacing-fixed-xs;
@@ -127,7 +127,7 @@ $max-tabs: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
127
127
  }
128
128
 
129
129
  > ul {
130
- @extend %horizontal-pulse;
130
+ @extend %horizontal-indicator;
131
131
 
132
132
  overflow: auto hidden;
133
133
  inline-size: 100%;
@@ -217,9 +217,9 @@ $max-tabs: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
217
217
  }
218
218
  }
219
219
 
220
- /* vertical track for pulse */
220
+ /* vertical track for indicator */
221
221
  &::before {
222
- @extend %pulse-track;
222
+ @extend %indicator-track;
223
223
 
224
224
  inline-size: variables.$db-border-width-xs;
225
225
  inset-block: variables.$db-spacing-fixed-xs;
@@ -227,7 +227,7 @@ $max-tabs: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
227
227
  }
228
228
 
229
229
  > ul {
230
- @extend %vertical-pulse;
230
+ @extend %vertical-indicator;
231
231
 
232
232
  flex-direction: column;
233
233
  block-size: 100%;