@db-ux/core-components 2.2.0 → 2.2.2-intersectionobserver-0b9938c

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/checkbox/checkbox.css +1 -1
  2. package/build/components/popover/popover.css +51 -0
  3. package/build/components/popover/popover.scss +2 -0
  4. package/build/components/radio/radio.css +1 -1
  5. package/build/components/switch/switch.css +1 -1
  6. package/build/components/tooltip/tooltip.css +49 -0
  7. package/build/styles/absolute.css +3 -3
  8. package/build/styles/index.css +3 -3
  9. package/build/styles/internal/_form-components.scss +1 -1
  10. package/build/styles/internal/_popover-component.scss +74 -0
  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 +3 -3
package/build/components/checkbox/checkbox.css CHANGED
@@ -226,7 +226,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
226
226
  display: flex;
227
227
  align-items: flex-start;
228
228
  position: relative;
229
- gap: var(--db-spacing-fixed-xs);
230
229
  color: var(--db-check-element-label-color, var(--db-adaptive-on-bg-basic-emphasis-100-default));
231
230
  }
232
231
  .db-checkbox input {
@@ -239,6 +238,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
239
238
  block-size: var(--db-icon-font-size);
240
239
  inline-size: var(--db-icon-font-size);
241
240
  padding: 0;
241
+ margin-inline-end: var(--db-spacing-fixed-xs);
242
242
  }
243
243
  .db-checkbox[data-size=small] input {
244
244
  margin-inline-end: var(--db-spacing-fixed-2xs);
package/build/components/popover/popover.css CHANGED
@@ -144,6 +144,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
144
144
 
145
145
  .db-popover > article {
146
146
  --db-popover-distance: var(--db-spacing-fixed-2xs);
147
+ /* This is for pure html css without using JS */
147
148
  }
148
149
  .db-popover > article::before {
149
150
  content: "";
@@ -176,6 +177,54 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
176
177
  .db-popover > article:is(.db-tooltip) {
177
178
  --db-popover-distance: var(--db-spacing-fixed-sm);
178
179
  }
180
+ .db-popover > article:not([data-corrected-placement])[data-placement^=bottom][data-placement$=end], .db-popover > article:not([data-corrected-placement])[data-placement^=top][data-placement$=end] {
181
+ inset-inline-end: 0;
182
+ }
183
+ .db-popover > article:not([data-corrected-placement])[data-placement^=bottom][data-placement$=start], .db-popover > article:not([data-corrected-placement])[data-placement^=top][data-placement$=start] {
184
+ inset-inline-start: 0;
185
+ }
186
+ .db-popover > article:not([data-corrected-placement])[data-placement^=left][data-placement$=end], .db-popover > article:not([data-corrected-placement])[data-placement^=right][data-placement$=end] {
187
+ inset-block-end: 0;
188
+ }
189
+ .db-popover > article:not([data-corrected-placement])[data-placement^=left][data-placement$=start], .db-popover > article:not([data-corrected-placement])[data-placement^=right][data-placement$=start] {
190
+ inset-block-start: 0;
191
+ }
192
+ .db-popover > article:not([data-corrected-placement]):not([data-placement]), .db-popover > article:not([data-corrected-placement])[data-placement^=bottom] {
193
+ inset-block-start: calc(100% + var(--db-popover-distance) * var(--db-popover-gap, 0));
194
+ }
195
+ .db-popover > article:not([data-corrected-placement]):not([data-placement])::before, .db-popover > article:not([data-corrected-placement])[data-placement^=bottom]::before {
196
+ inset-inline-start: 0;
197
+ inline-size: 100%;
198
+ block-size: var(--db-popover-distance);
199
+ inset-block-start: calc(-1 * var(--db-popover-distance));
200
+ }
201
+ .db-popover > article:not([data-corrected-placement])[data-placement^=top] {
202
+ inset-block-end: calc(100% + var(--db-popover-distance) * var(--db-popover-gap, 0));
203
+ }
204
+ .db-popover > article:not([data-corrected-placement])[data-placement^=top]::before {
205
+ inset-inline-end: 0;
206
+ inline-size: 100%;
207
+ block-size: var(--db-popover-distance);
208
+ inset-block-end: calc(-1 * var(--db-popover-distance));
209
+ }
210
+ .db-popover > article:not([data-corrected-placement])[data-placement^=left] {
211
+ inset-inline-end: calc(100% + var(--db-popover-distance) * var(--db-popover-gap, 0));
212
+ }
213
+ .db-popover > article:not([data-corrected-placement])[data-placement^=left]::before {
214
+ inset-block-end: 0;
215
+ block-size: 100%;
216
+ inline-size: var(--db-popover-distance);
217
+ inset-inline-end: calc(-1 * var(--db-popover-distance));
218
+ }
219
+ .db-popover > article:not([data-corrected-placement])[data-placement^=right] {
220
+ inset-inline-start: calc(100% + var(--db-popover-distance) * var(--db-popover-gap, 0));
221
+ }
222
+ .db-popover > article:not([data-corrected-placement])[data-placement^=right]::before {
223
+ inset-block-start: 0;
224
+ block-size: 100%;
225
+ inline-size: var(--db-popover-distance);
226
+ inset-inline-start: calc(-1 * var(--db-popover-distance));
227
+ }
179
228
 
180
229
  .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article:not([data-open=false]), .db-popover > article[data-open=true] {
181
230
  visibility: var(--db-show-popover-visibility, visible);
@@ -301,6 +350,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
301
350
  .db-popover {
302
351
  position: relative;
303
352
  display: flex;
353
+ block-size: fit-content;
354
+ inline-size: fit-content;
304
355
  }
305
356
  .db-popover > article {
306
357
  /* stylelint-disable-next-line at-rule-empty-line-before */
package/build/components/popover/popover.scss CHANGED
@@ -5,6 +5,8 @@
5
5
  .db-popover {
6
6
  position: relative;
7
7
  display: flex;
8
+ block-size: fit-content;
9
+ inline-size: fit-content;
8
10
 
9
11
  &:is([data-e2e-hover="true"], :hover, :focus-within) {
10
12
  > article:not([data-open="false"]) {
package/build/components/radio/radio.css CHANGED
@@ -170,7 +170,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
170
170
  display: flex;
171
171
  align-items: flex-start;
172
172
  position: relative;
173
- gap: var(--db-spacing-fixed-xs);
174
173
  color: var(--db-check-element-label-color, var(--db-adaptive-on-bg-basic-emphasis-100-default));
175
174
  }
176
175
  .db-radio input {
@@ -183,6 +182,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
183
182
  block-size: var(--db-icon-font-size);
184
183
  inline-size: var(--db-icon-font-size);
185
184
  padding: 0;
185
+ margin-inline-end: var(--db-spacing-fixed-xs);
186
186
  }
187
187
  .db-radio[data-size=small] input {
188
188
  margin-inline-end: var(--db-spacing-fixed-2xs);
package/build/components/switch/switch.css CHANGED
@@ -521,7 +521,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
521
521
  display: flex;
522
522
  align-items: flex-start;
523
523
  position: relative;
524
- gap: var(--db-spacing-fixed-xs);
525
524
  color: var(--db-check-element-label-color, var(--db-adaptive-on-bg-basic-emphasis-100-default));
526
525
  }
527
526
  .db-switch input {
@@ -534,6 +533,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
534
533
  block-size: var(--db-icon-font-size);
535
534
  inline-size: var(--db-icon-font-size);
536
535
  padding: 0;
536
+ margin-inline-end: var(--db-spacing-fixed-xs);
537
537
  }
538
538
  .db-switch[data-size=small] input {
539
539
  margin-inline-end: var(--db-spacing-fixed-2xs);
package/build/components/tooltip/tooltip.css CHANGED
@@ -214,6 +214,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
214
214
 
215
215
  .db-tooltip {
216
216
  --db-popover-distance: var(--db-spacing-fixed-2xs);
217
+ /* This is for pure html css without using JS */
217
218
  }
218
219
  .db-tooltip::before {
219
220
  content: "";
@@ -246,6 +247,54 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
246
247
  .db-tooltip:is(.db-tooltip) {
247
248
  --db-popover-distance: var(--db-spacing-fixed-sm);
248
249
  }
250
+ .db-tooltip:not([data-corrected-placement])[data-placement^=bottom][data-placement$=end], .db-tooltip:not([data-corrected-placement])[data-placement^=top][data-placement$=end] {
251
+ inset-inline-end: 0;
252
+ }
253
+ .db-tooltip:not([data-corrected-placement])[data-placement^=bottom][data-placement$=start], .db-tooltip:not([data-corrected-placement])[data-placement^=top][data-placement$=start] {
254
+ inset-inline-start: 0;
255
+ }
256
+ .db-tooltip:not([data-corrected-placement])[data-placement^=left][data-placement$=end], .db-tooltip:not([data-corrected-placement])[data-placement^=right][data-placement$=end] {
257
+ inset-block-end: 0;
258
+ }
259
+ .db-tooltip:not([data-corrected-placement])[data-placement^=left][data-placement$=start], .db-tooltip:not([data-corrected-placement])[data-placement^=right][data-placement$=start] {
260
+ inset-block-start: 0;
261
+ }
262
+ .db-tooltip:not([data-corrected-placement]):not([data-placement]), .db-tooltip:not([data-corrected-placement])[data-placement^=bottom] {
263
+ inset-block-start: calc(100% + var(--db-popover-distance) * var(--db-popover-gap, 0));
264
+ }
265
+ .db-tooltip:not([data-corrected-placement]):not([data-placement])::before, .db-tooltip:not([data-corrected-placement])[data-placement^=bottom]::before {
266
+ inset-inline-start: 0;
267
+ inline-size: 100%;
268
+ block-size: var(--db-popover-distance);
269
+ inset-block-start: calc(-1 * var(--db-popover-distance));
270
+ }
271
+ .db-tooltip:not([data-corrected-placement])[data-placement^=top] {
272
+ inset-block-end: calc(100% + var(--db-popover-distance) * var(--db-popover-gap, 0));
273
+ }
274
+ .db-tooltip:not([data-corrected-placement])[data-placement^=top]::before {
275
+ inset-inline-end: 0;
276
+ inline-size: 100%;
277
+ block-size: var(--db-popover-distance);
278
+ inset-block-end: calc(-1 * var(--db-popover-distance));
279
+ }
280
+ .db-tooltip:not([data-corrected-placement])[data-placement^=left] {
281
+ inset-inline-end: calc(100% + var(--db-popover-distance) * var(--db-popover-gap, 0));
282
+ }
283
+ .db-tooltip:not([data-corrected-placement])[data-placement^=left]::before {
284
+ inset-block-end: 0;
285
+ block-size: 100%;
286
+ inline-size: var(--db-popover-distance);
287
+ inset-inline-end: calc(-1 * var(--db-popover-distance));
288
+ }
289
+ .db-tooltip:not([data-corrected-placement])[data-placement^=right] {
290
+ inset-inline-start: calc(100% + var(--db-popover-distance) * var(--db-popover-gap, 0));
291
+ }
292
+ .db-tooltip:not([data-corrected-placement])[data-placement^=right]::before {
293
+ inset-block-start: 0;
294
+ block-size: 100%;
295
+ inline-size: var(--db-popover-distance);
296
+ inset-inline-start: calc(-1 * var(--db-popover-distance));
297
+ }
249
298
 
250
299
  .db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover .db-tooltip:first-of-type, [data-has-tooltip=true]:focus-visible .db-tooltip:first-of-type {
251
300
  visibility: var(--db-show-popover-visibility, visible);