@dbcdk/react-components 0.0.168 → 0.0.170

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 (12) hide show
  1. package/dist/components/filter-field/FilterField.cjs +125 -89
  2. package/dist/components/filter-field/FilterField.d.ts +3 -1
  3. package/dist/components/filter-field/FilterField.js +127 -91
  4. package/dist/components/filter-field/FilterField.module.css +154 -174
  5. package/dist/components/forms/typeahead/Typeahead.cjs +66 -34
  6. package/dist/components/forms/typeahead/Typeahead.d.ts +7 -1
  7. package/dist/components/forms/typeahead/Typeahead.js +66 -34
  8. package/dist/components/nav-bar/NavBar.module.css +1 -1
  9. package/dist/components/overlay/modal/Modal.cjs +15 -6
  10. package/dist/components/overlay/modal/Modal.d.ts +1 -0
  11. package/dist/components/overlay/modal/Modal.js +15 -6
  12. package/package.json +2 -1
package/dist/components/filter-field/FilterField.module.css CHANGED
@@ -1,283 +1,257 @@
1
1
  .filterField {
2
2
  display: inline-flex;
3
- align-items: stretch;
4
- gap: 0;
5
- position: relative;
6
- z-index: 0;
3
+ align-items: center;
4
+ min-width: 0;
7
5
  font-size: var(--font-size-sm);
8
6
  font-family: var(--font-family);
9
7
  color: var(--color-fg-default);
10
- border: 1px solid transparent;
11
- border-radius: var(--border-radius-default);
12
- overflow: visible;
13
- transition:
14
- background-color var(--transition-fast) var(--ease-standard),
15
- border-color var(--transition-fast) var(--ease-standard),
16
- box-shadow var(--transition-fast) var(--ease-standard),
17
- color var(--transition-fast) var(--ease-standard);
18
8
  }
19
9
 
20
- /* =========================
21
- VARIANTS
22
- ========================= */
10
+ .filterField.sm {
11
+ min-block-size: var(--component-size-sm);
12
+ }
23
13
 
24
- .filterField.surface {
25
- background: var(--color-bg-surface);
26
- border-color: var(--color-border-subtle);
27
- box-shadow: var(--shadow-xs);
14
+ .filterField.md {
15
+ min-block-size: var(--component-size-md);
28
16
  }
29
17
 
30
- .filterField.surface:hover {
31
- border-color: var(--color-border-default);
32
- box-shadow: var(--shadow-sm);
18
+ .filterField.lg {
19
+ min-block-size: var(--component-size-lg);
33
20
  }
34
21
 
35
- .filterField.surface.active {
36
- background: color-mix(in srgb, var(--color-bg-selected) 45%, var(--color-bg-surface));
37
- border-color: var(--color-border-selected);
38
- box-shadow: var(--shadow-sm);
22
+ .label {
23
+ display: flex;
24
+ align-items: center;
25
+ align-self: stretch;
26
+ flex: 0 0 auto;
27
+ min-width: 0;
28
+ padding-inline: var(--spacing-sm) 2px;
29
+ padding-block: 0;
30
+ color: var(--color-fg-muted);
31
+ font-size: var(--font-size-sm);
32
+ font-weight: var(--font-weight-default);
33
+ line-height: var(--line-height-normal);
34
+ white-space: nowrap;
35
+ user-select: none;
36
+ box-sizing: border-box;
39
37
  }
40
38
 
41
- .filterField.outlined {
39
+ .controlGroup {
40
+ display: inline-flex;
41
+ align-items: stretch;
42
+ min-width: 9rem;
43
+ max-width: 100%;
44
+ flex: 1 1 auto;
45
+ overflow: hidden;
46
+ position: relative;
42
47
  background: var(--color-bg-surface);
43
- border-color: var(--color-border-subtle);
44
- box-shadow: none;
48
+ border: 1px solid var(--color-border-subtle);
49
+ border-radius: var(--border-radius-default);
50
+ box-shadow: var(--shadow-xs);
51
+ transition:
52
+ background-color var(--transition-fast) var(--ease-standard),
53
+ border-color var(--transition-fast) var(--ease-standard),
54
+ box-shadow var(--transition-fast) var(--ease-standard);
45
55
  }
46
56
 
47
- .filterField.outlined:hover {
57
+ .surface .controlGroup:hover:not(.disabled) {
48
58
  border-color: var(--color-border-default);
59
+ box-shadow: var(--shadow-sm);
49
60
  }
50
61
 
51
- .filterField.outlined.active {
52
- background: color-mix(in srgb, var(--color-bg-selected) 38%, var(--color-bg-surface));
53
- border-color: var(--color-border-selected);
62
+ .outlined .controlGroup {
54
63
  box-shadow: none;
55
64
  }
56
65
 
57
- .filterField.subtle {
66
+ .outlined .controlGroup:hover:not(.disabled) {
67
+ border-color: var(--color-border-default);
68
+ }
69
+
70
+ .subtle .controlGroup {
58
71
  background: var(--color-bg-toolbar);
59
72
  border-color: transparent;
60
73
  box-shadow: inset 0 0 0 1px transparent;
61
74
  }
62
75
 
63
- .filterField.subtle:hover {
76
+ .subtle .controlGroup:hover:not(.disabled) {
64
77
  background: var(--color-bg-surface-strong);
65
78
  }
66
79
 
67
- .filterField.subtle.active {
68
- background: color-mix(in srgb, var(--color-bg-selected) 55%, var(--color-bg-surface-strong));
69
- border-color: var(--color-border-selected);
70
- box-shadow: inset 0 0 0 1px transparent;
80
+ .filterField.active .controlGroup {
81
+ background: var(--color-bg-surface);
82
+ border-color: var(--color-border-strong);
71
83
  }
72
84
 
73
- .filterField.active .label {
74
- color: var(--color-fg-default);
85
+ .subtle.active .controlGroup {
86
+ background: var(--color-bg-toolbar);
87
+ border-color: color-mix(in srgb, var(--color-border-strong) 75%, transparent);
75
88
  }
76
89
 
77
- /* =========================
78
- FOCUS
79
- ========================= */
80
-
81
- .filterField:focus-within {
82
- z-index: 1;
90
+ .filterField.active .label,
91
+ .filterField.active .operatorTrigger,
92
+ .filterField.active .valueWrapper {
93
+ color: var(--color-fg-default);
83
94
  }
84
95
 
85
- .filterField.surface:focus-within,
86
- .filterField.outlined:focus-within,
87
- .filterField.subtle:focus-within {
88
- border-color: var(--color-border-selected);
96
+ .invalid {
97
+ border-color: var(--color-status-danger-border);
89
98
  }
90
99
 
91
- .filterField.surface:focus-within {
92
- box-shadow: var(--shadow-sm);
100
+ .invalid:focus-within {
101
+ border-color: var(--color-status-danger-border);
93
102
  }
94
103
 
95
- .filterField.outlined:focus-within,
96
- .filterField.subtle:focus-within {
104
+ .disabled {
105
+ background: var(--color-disabled-bg);
106
+ border-color: var(--color-disabled-border);
97
107
  box-shadow: none;
98
108
  }
99
109
 
100
- .filterField.surface.active:focus-within {
101
- box-shadow: var(--shadow-sm);
102
- }
103
-
104
- .filterField.outlined.active:focus-within,
105
- .filterField.subtle.active:focus-within {
106
- box-shadow: none;
107
- }
108
-
109
- /* =========================
110
- SIZES
111
- ========================= */
112
-
113
- .filterField.sm {
114
- block-size: var(--component-size-sm);
110
+ .operatorWrapper {
111
+ display: flex;
112
+ align-items: stretch;
113
+ flex: 0 0 auto;
114
+ min-width: 0;
115
+ position: relative;
115
116
  }
116
117
 
117
- .filterField.md {
118
- block-size: var(--component-size-md);
118
+ .operatorWrapper::after {
119
+ content: '';
120
+ position: absolute;
121
+ top: 50%;
122
+ transform: translateY(-50%);
123
+ right: 0;
124
+ width: 1px;
125
+ height: 1rem;
126
+ background: color-mix(in srgb, var(--color-border-subtle) 70%, transparent);
127
+ pointer-events: none;
119
128
  }
120
129
 
121
- .filterField.lg {
122
- block-size: var(--component-size-lg);
130
+ .operatorWrapper:focus-within::after {
131
+ opacity: 0;
123
132
  }
124
133
 
125
- /* =========================
126
- LABEL
127
- ========================= */
128
-
129
- .filterField .label {
130
- display: inline-flex;
131
- align-items: center;
132
- padding-block: var(--spacing-2xs);
133
- padding-inline: var(--spacing-xs) 0;
134
- font-size: var(--font-size-sm);
135
- color: var(--color-fg-default);
136
- font-weight: 500;
137
- white-space: nowrap;
138
- user-select: none;
139
- }
140
-
141
- /* =========================
142
- OPERATOR
143
- ========================= */
144
-
145
- .filterField .operatorWrapper {
146
- flex: 0 0 auto;
147
- display: flex;
148
- align-items: stretch;
149
- min-width: 0;
150
- }
151
-
152
- .filterField .operatorTrigger {
134
+ .operatorTrigger.operatorTrigger {
153
135
  display: inline-flex;
154
136
  align-items: center;
155
137
  justify-content: center;
156
- gap: var(--spacing-xxs);
138
+ gap: 2px;
157
139
  height: 100%;
158
- padding-block: var(--spacing-2xs);
159
- padding-inline: var(--spacing-xs) var(--spacing-sm);
140
+ min-width: 0;
141
+ padding-inline: var(--spacing-xxs);
160
142
  color: var(--color-fg-muted);
161
143
  background: transparent;
162
144
  border: 0;
145
+ border-radius: 0;
146
+ box-shadow: none;
163
147
  cursor: pointer;
164
- position: relative;
165
- z-index: 0;
148
+ white-space: nowrap;
149
+ font-family: var(--font-family);
150
+ font-size: var(--font-size-xs);
166
151
  font-weight: var(--font-weight-default);
167
- font-size: var(--font-size-sm);
152
+ line-height: 1;
168
153
  transition:
169
154
  background-color var(--transition-fast) var(--ease-standard),
170
- color var(--transition-fast) var(--ease-standard);
171
- flex: 0 0 auto;
172
- white-space: nowrap;
155
+ color var(--transition-fast) var(--ease-standard),
156
+ box-shadow var(--transition-fast) var(--ease-standard);
173
157
  }
174
158
 
175
- .filterField .operatorTrigger:hover:not(:disabled) {
159
+ .operatorTrigger:hover:not(:disabled) {
176
160
  color: var(--color-fg-default);
161
+ background: color-mix(in srgb, var(--color-bg-hover-subtle) 45%, transparent);
177
162
  }
178
163
 
179
- /* =========================
180
- DISABLED
181
- ========================= */
164
+ .operatorTrigger:focus-visible,
165
+ .operatorTriggerOpen {
166
+ position: relative;
167
+ z-index: 1;
168
+ color: var(--color-fg-default);
169
+ background: color-mix(in srgb, var(--color-bg-hover-subtle) 55%, transparent);
170
+ box-shadow: inset 0 0 0 1px var(--color-border-selected);
171
+ outline: none;
172
+ }
182
173
 
183
- .filterField .operatorTrigger:disabled,
184
- .filterField .operatorTrigger[aria-disabled='true'] {
174
+ .operatorTrigger:disabled,
175
+ .operatorTrigger[aria-disabled='true'] {
185
176
  cursor: not-allowed;
186
177
  color: var(--color-disabled-fg);
187
- }
188
-
189
- .filterField.surface .operatorTrigger:disabled,
190
- .filterField.outlined .operatorTrigger:disabled {
191
- }
192
-
193
- .filterField.subtle .operatorTrigger:disabled {
178
+ background: transparent;
194
179
  }
195
180
 
196
181
  .operatorTrigger svg {
197
- height: var(--component-size-xxs);
198
- width: var(--component-size-xxs);
199
182
  flex: 0 0 auto;
183
+ inline-size: var(--component-size-xxs);
184
+ block-size: var(--component-size-xxs);
200
185
  color: currentColor;
201
186
  }
202
187
 
203
- /* =========================
204
- VALUE WRAPPER
205
- ========================= */
188
+ .operatorText {
189
+ white-space: nowrap;
190
+ }
206
191
 
207
- .filterField .valueWrapper {
192
+ .valueWrapper {
208
193
  display: flex;
209
194
  align-items: center;
210
- padding: 0;
211
- height: 100%;
212
- flex: 1 1 auto;
213
195
  min-width: 0;
196
+ flex: 1 1 10rem;
214
197
  position: relative;
215
- padding-inline-start: 0;
216
198
  }
217
199
 
218
- /* Base child sizing */
219
- .filterField .valueWrapper > * {
220
- height: 100%;
221
- min-width: 0;
200
+ .valueWrapper:focus-within {
201
+ box-shadow: inset 0 0 0 1px var(--color-border-selected);
222
202
  }
223
203
 
224
- .filterField .valueWrapper > div {
225
- display: flex;
226
- align-items: center;
227
- height: 100%;
228
- min-width: 0;
204
+ .invalid .valueWrapper:focus-within {
205
+ box-shadow: inset 0 0 0 1px var(--color-status-danger-border);
229
206
  }
230
207
 
231
- /* Fill mode: regular inputs should stretch */
232
- .filterField .valueWrapper:not(.autoWidth) > * {
233
- width: 100%;
208
+ .valueWrapper > * {
209
+ min-width: 0;
234
210
  flex: 1 1 auto;
211
+ width: 100%;
212
+ height: 100%;
235
213
  }
236
214
 
237
- .filterField .valueWrapper:not(.autoWidth) > div {
215
+ .valueWrapper > div {
216
+ display: flex;
217
+ align-items: center;
218
+ min-width: 0;
238
219
  width: 100%;
239
- flex: 1 1 auto;
220
+ height: 100%;
240
221
  }
241
222
 
242
- /* Auto-width mode: let Typeahead keep its measured width */
243
- .filterField .valueWrapper.autoWidth {
244
- flex: 1 1 auto;
223
+ .valueWrapper.autoWidth {
245
224
  width: auto;
246
- min-width: 0;
225
+ flex: 1 1 auto;
247
226
  }
248
227
 
249
- .filterField .valueWrapper.autoWidth > * {
228
+ .valueWrapper.autoWidth > * {
250
229
  width: auto;
251
- flex: 1 1 auto;
252
- min-width: 0;
253
230
  max-width: 100%;
254
231
  }
255
232
 
256
- .filterField .valueWrapper.autoWidth > div {
233
+ .valueWrapper.autoWidth > div {
257
234
  width: auto;
258
- flex: 1 1 auto;
259
- min-width: 0;
260
235
  max-width: 100%;
261
236
  }
262
237
 
263
- /* Embedded Input internals */
264
- .filterField .valueWrapper .field {
238
+ .valueWrapper .field {
265
239
  min-height: unset;
266
240
  height: 100%;
267
241
  block-size: 100%;
268
- box-shadow: none;
269
- border: none;
270
- background: transparent;
271
242
  min-width: 0;
272
243
  width: 100%;
273
244
  flex: 1 1 auto;
245
+ background: transparent;
246
+ border: none;
247
+ box-shadow: none;
274
248
  }
275
249
 
276
- /* Keep a small breathing space inside the filter row */
277
250
  .embeddedInputField {
278
251
  min-width: 0;
279
252
  width: 100%;
280
253
  flex: 1 1 auto;
254
+ padding-inline: 10px var(--spacing-xs);
281
255
  }
282
256
 
283
257
  .embeddedInputElement {
@@ -297,26 +271,32 @@
297
271
  box-sizing: border-box;
298
272
  }
299
273
 
300
- .filterField .valueWrapper .startAdornment {
274
+ .filterField.active .embeddedInputElement {
275
+ font-weight: 600;
276
+ }
277
+
278
+ .filterField.active .embeddedInputElement::placeholder {
279
+ font-weight: var(--font-weight-default);
280
+ }
281
+
282
+ .valueWrapper .startAdornment {
301
283
  margin-left: 0;
302
284
  gap: 2px;
303
285
  min-width: 0;
304
286
  }
305
287
 
306
- /* =========================
307
- TEXT
308
- ========================= */
288
+ .valueWrapper [data-input-role='clear'] {
289
+ color: var(--color-fg-muted);
290
+ background: transparent;
291
+ }
309
292
 
310
- .filterField .operatorText {
311
- white-space: nowrap;
312
- font-family: var(--font-family);
313
- font-size: var(--font-size-xs);
314
- color: currentColor;
293
+ .valueWrapper [data-input-role='clear']:hover {
294
+ background: color-mix(in srgb, var(--color-bg-hover-subtle) 50%, transparent);
315
295
  }
316
296
 
317
297
  .filterField input {
318
- height: 100%;
319
298
  min-width: 0;
299
+ height: 100%;
320
300
  }
321
301
 
322
302
  .filterField input::placeholder {