@db-ux/core-components 2.4.4 → 3.0.1

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 (65) hide show
  1. package/README.md +1 -1
  2. package/build/components/accordion/accordion.css +2 -0
  3. package/build/components/accordion-item/accordion-item.css +12 -10
  4. package/build/components/badge/badge.css +2 -0
  5. package/build/components/brand/brand.css +2 -0
  6. package/build/components/button/button.css +43 -31
  7. package/build/components/button/button.scss +16 -19
  8. package/build/components/card/card.css +54 -60
  9. package/build/components/card/card.scss +37 -33
  10. package/build/components/checkbox/checkbox.css +46 -44
  11. package/build/components/checkbox/checkbox.scss +11 -11
  12. package/build/components/custom-select/custom-select.css +49 -32
  13. package/build/components/custom-select/custom-select.scss +5 -7
  14. package/build/components/custom-select-dropdown/custom-select-dropdown.css +14 -6
  15. package/build/components/custom-select-form-field/custom-select-form-field.css +2 -0
  16. package/build/components/custom-select-list/custom-select-list.css +2 -0
  17. package/build/components/custom-select-list-item/custom-select-list-item.css +8 -6
  18. package/build/components/custom-select-list-item/custom-select-list-item.scss +6 -6
  19. package/build/components/divider/divider.css +2 -0
  20. package/build/components/drawer/drawer.css +2 -0
  21. package/build/components/header/header.css +10 -8
  22. package/build/components/icon/icon.css +2 -0
  23. package/build/components/infotext/infotext.css +8 -6
  24. package/build/components/input/input.css +55 -41
  25. package/build/components/input/input.scss +6 -6
  26. package/build/components/link/link.css +24 -26
  27. package/build/components/link/link.scss +7 -14
  28. package/build/components/navigation/navigation.css +4 -2
  29. package/build/components/navigation/navigation.scss +2 -2
  30. package/build/components/navigation-item/navigation-item.css +25 -23
  31. package/build/components/navigation-item/navigation-item.scss +3 -3
  32. package/build/components/notification/notification.css +56 -22
  33. package/build/components/page/page.css +2 -0
  34. package/build/components/popover/popover.css +3 -2
  35. package/build/components/radio/radio.css +28 -26
  36. package/build/components/radio/radio.scss +6 -6
  37. package/build/components/section/section.css +3 -1
  38. package/build/components/select/select.css +35 -21
  39. package/build/components/select/select.scss +1 -1
  40. package/build/components/stack/stack-web-component.css +2 -0
  41. package/build/components/stack/stack.css +2 -0
  42. package/build/components/switch/switch.css +42 -28
  43. package/build/components/switch/switch.scss +3 -3
  44. package/build/components/tab-item/tab-item.css +6 -4
  45. package/build/components/tab-item/tab-item.scss +3 -3
  46. package/build/components/tab-list/tab-list.css +6 -4
  47. package/build/components/tab-panel/tab-panel.css +2 -0
  48. package/build/components/tabs/tabs.css +2 -0
  49. package/build/components/tag/tag.css +72 -40
  50. package/build/components/tag/tag.scss +1 -1
  51. package/build/components/textarea/textarea.css +48 -22
  52. package/build/components/textarea/textarea.scss +1 -1
  53. package/build/components/tooltip/tooltip.css +3 -2
  54. package/build/styles/absolute.css +238 -154
  55. package/build/styles/index.css +141 -105
  56. package/build/styles/internal/_form-components.scss +12 -6
  57. package/build/styles/internal/_icon-passing.scss +1 -1
  58. package/build/styles/internal/_link-components.scss +5 -2
  59. package/build/styles/internal/_popover-component.scss +1 -4
  60. package/build/styles/internal/_scrollbar.scss +4 -4
  61. package/build/styles/internal/_select-components.scss +1 -1
  62. package/build/styles/relative.css +238 -154
  63. package/build/styles/rollup.css +238 -154
  64. package/build/styles/webpack.css +238 -154
  65. package/package.json +24 -24
package/build/components/textarea/textarea.css CHANGED
@@ -6,6 +6,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
6
6
  /* Border */
7
7
  /* Opacity */
8
8
  /* Transitions */
9
+ /* Screen sizes */
10
+ /* Container sizes */
9
11
  .db-textarea[data-hide-label=true] > label, .db-visually-hidden,
10
12
  [data-visually-hidden=true] {
11
13
  clip: rect(0, 0, 0, 0) !important;
@@ -297,7 +299,7 @@ input[type=radio]:checked) > label {
297
299
  border-start-end-radius: var(--db-border-radius-xs);
298
300
  }
299
301
  .db-textarea textarea:is(:hover, :focus)::-webkit-scrollbar-track, .db-textarea textarea:is(:hover, :focus)::-webkit-scrollbar-button:single-button {
300
- background-color: var(--db-adaptive-bg-basic-transparent-hovered);
302
+ background-color: var(--db-adaptive-bg-basic-transparent-full-hovered);
301
303
  }
302
304
  .db-textarea textarea:read-only::-webkit-scrollbar-track, .db-textarea textarea:read-only::-webkit-scrollbar-button:single-button {
303
305
  background-color: var(--db-adaptive-bg-basic-level-1-default);
@@ -306,7 +308,7 @@ input[type=radio]:checked) > label {
306
308
  background-color: var(--db-adaptive-bg-basic-transparent-semi-default);
307
309
  }
308
310
  .db-textarea textarea::-webkit-scrollbar-thumb {
309
- background-color: var(--db-adaptive-bg-basic-transparent-pressed);
311
+ background-color: var(--db-adaptive-bg-basic-transparent-full-pressed);
310
312
  }
311
313
  .db-textarea textarea::-webkit-scrollbar-button:single-button {
312
314
  background-color: var(--db-adaptive-bg-basic-transparent-semi-default);
@@ -316,10 +318,10 @@ input[type=radio]:checked) > label {
316
318
  block-size: calc(var(--db-spacing-fixed-3xs) + var(--db-spacing-fixed-2xs) + var(--db-base-body-icon-font-size-2xs));
317
319
  }
318
320
  .db-textarea textarea::-webkit-scrollbar-button:single-button:is(:hover, :focus) {
319
- background-color: var(--db-adaptive-bg-basic-transparent-hovered);
321
+ background-color: var(--db-adaptive-bg-basic-transparent-full-hovered);
320
322
  }
321
323
  .db-textarea textarea::-webkit-scrollbar-button:single-button:active {
322
- background-color: var(--db-adaptive-bg-basic-transparent-pressed);
324
+ background-color: var(--db-adaptive-bg-basic-transparent-full-pressed);
323
325
  }
324
326
  .db-textarea textarea::-webkit-scrollbar-button:single-button:vertical:decrement {
325
327
  border-start-end-radius: var(--db-border-radius-xs);
@@ -462,11 +464,17 @@ input[type=radio]:checked) [id$=-placeholder] {
462
464
  --db-adaptive-bg-basic-transparent-semi-default: var(
463
465
  --db-successful-bg-basic-transparent-semi-default
464
466
  );
465
- --db-adaptive-bg-basic-transparent-hovered: var(
466
- --db-successful-bg-basic-transparent-hovered
467
+ --db-adaptive-bg-basic-transparent-full-hovered: var(
468
+ --db-successful-bg-basic-transparent-full-hovered
467
469
  );
468
- --db-adaptive-bg-basic-transparent-pressed: var(
469
- --db-successful-bg-basic-transparent-pressed
470
+ --db-adaptive-bg-basic-transparent-full-pressed: var(
471
+ --db-successful-bg-basic-transparent-full-pressed
472
+ );
473
+ --db-adaptive-bg-basic-transparent-semi-hovered: var(
474
+ --db-successful-bg-basic-transparent-semi-hovered
475
+ );
476
+ --db-adaptive-bg-basic-transparent-semi-pressed: var(
477
+ --db-successful-bg-basic-transparent-semi-pressed
470
478
  );
471
479
  --db-adaptive-on-bg-basic-emphasis-100-default: var(
472
480
  --db-successful-on-bg-basic-emphasis-100-default
@@ -510,11 +518,17 @@ input[type=radio]:checked) [id$=-placeholder] {
510
518
  --db-adaptive-bg-basic-transparent-semi-default: var(
511
519
  --db-successful-bg-basic-transparent-semi-default
512
520
  );
513
- --db-adaptive-bg-basic-transparent-hovered: var(
514
- --db-successful-bg-basic-transparent-hovered
521
+ --db-adaptive-bg-basic-transparent-full-hovered: var(
522
+ --db-successful-bg-basic-transparent-full-hovered
523
+ );
524
+ --db-adaptive-bg-basic-transparent-full-pressed: var(
525
+ --db-successful-bg-basic-transparent-full-pressed
526
+ );
527
+ --db-adaptive-bg-basic-transparent-semi-hovered: var(
528
+ --db-successful-bg-basic-transparent-semi-hovered
515
529
  );
516
- --db-adaptive-bg-basic-transparent-pressed: var(
517
- --db-successful-bg-basic-transparent-pressed
530
+ --db-adaptive-bg-basic-transparent-semi-pressed: var(
531
+ --db-successful-bg-basic-transparent-semi-pressed
518
532
  );
519
533
  --db-adaptive-on-bg-basic-emphasis-100-default: var(
520
534
  --db-successful-on-bg-basic-emphasis-100-default
@@ -568,11 +582,17 @@ input[type=radio]:checked) [id$=-placeholder] {
568
582
  --db-adaptive-bg-basic-transparent-semi-default: var(
569
583
  --db-critical-bg-basic-transparent-semi-default
570
584
  );
571
- --db-adaptive-bg-basic-transparent-hovered: var(
572
- --db-critical-bg-basic-transparent-hovered
585
+ --db-adaptive-bg-basic-transparent-full-hovered: var(
586
+ --db-critical-bg-basic-transparent-full-hovered
573
587
  );
574
- --db-adaptive-bg-basic-transparent-pressed: var(
575
- --db-critical-bg-basic-transparent-pressed
588
+ --db-adaptive-bg-basic-transparent-full-pressed: var(
589
+ --db-critical-bg-basic-transparent-full-pressed
590
+ );
591
+ --db-adaptive-bg-basic-transparent-semi-hovered: var(
592
+ --db-critical-bg-basic-transparent-semi-hovered
593
+ );
594
+ --db-adaptive-bg-basic-transparent-semi-pressed: var(
595
+ --db-critical-bg-basic-transparent-semi-pressed
576
596
  );
577
597
  --db-adaptive-on-bg-basic-emphasis-100-default: var(
578
598
  --db-critical-on-bg-basic-emphasis-100-default
@@ -602,11 +622,17 @@ input[type=radio]:checked) [id$=-placeholder] {
602
622
  --db-adaptive-bg-basic-transparent-semi-default: var(
603
623
  --db-critical-bg-basic-transparent-semi-default
604
624
  );
605
- --db-adaptive-bg-basic-transparent-hovered: var(
606
- --db-critical-bg-basic-transparent-hovered
625
+ --db-adaptive-bg-basic-transparent-full-hovered: var(
626
+ --db-critical-bg-basic-transparent-full-hovered
627
+ );
628
+ --db-adaptive-bg-basic-transparent-full-pressed: var(
629
+ --db-critical-bg-basic-transparent-full-pressed
630
+ );
631
+ --db-adaptive-bg-basic-transparent-semi-hovered: var(
632
+ --db-critical-bg-basic-transparent-semi-hovered
607
633
  );
608
- --db-adaptive-bg-basic-transparent-pressed: var(
609
- --db-critical-bg-basic-transparent-pressed
634
+ --db-adaptive-bg-basic-transparent-semi-pressed: var(
635
+ --db-critical-bg-basic-transparent-semi-pressed
610
636
  );
611
637
  --db-adaptive-on-bg-basic-emphasis-100-default: var(
612
638
  --db-critical-on-bg-basic-emphasis-100-default
@@ -650,7 +676,7 @@ input[type=radio]:checked) [id$=-placeholder] {
650
676
  }
651
677
  .db-textarea textarea:hover:not(:disabled, [aria-disabled=true]) {
652
678
  cursor: var(--db-overwrite-cursor, pointer);
653
- background-color: var(--db-adaptive-bg-basic-transparent-hovered);
679
+ background-color: var(--db-adaptive-bg-basic-transparent-semi-hovered);
654
680
  }
655
681
  .db-textarea textarea:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-textarea textarea:hover:not(:disabled, [aria-disabled=true]):is(input) {
656
682
  cursor: initial;
@@ -743,5 +769,5 @@ textarea[aria-disabled=true]) {
743
769
  background-color: var(--db-adaptive-bg-basic-level-1-default) !important;
744
770
  }
745
771
  .db-textarea[data-variant=floating]:has(textarea:is(:focus-within, :not(:placeholder-shown))):has(textarea:not(:disabled):is(:hover, :focus))::after {
746
- background-color: var(--db-adaptive-bg-basic-transparent-hovered);
772
+ background-color: var(--db-adaptive-bg-basic-transparent-semi-hovered);
747
773
  }
package/build/components/textarea/textarea.scss CHANGED
@@ -86,7 +86,7 @@
86
86
 
87
87
  &:has(textarea:not(:disabled):is(:hover, :focus)) {
88
88
  &::after {
89
- background-color: colors.$db-adaptive-bg-basic-transparent-hovered;
89
+ background-color: colors.$db-adaptive-bg-basic-transparent-semi-hovered;
90
90
  }
91
91
  }
92
92
  }
package/build/components/tooltip/tooltip.css CHANGED
@@ -6,6 +6,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
6
6
  /* Border */
7
7
  /* Opacity */
8
8
  /* Transitions */
9
+ /* Screen sizes */
10
+ /* Container sizes */
9
11
  /* Variants for adaptive components like input, select, notification, ... */
10
12
  @layer variables {}
11
13
 
@@ -407,13 +409,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
407
409
  visibility: hidden;
408
410
  z-index: 1337;
409
411
  white-space: normal;
410
- max-inline-size: calc(100vw - 2 * var(--db-spacing-fixed-md));
412
+ max-inline-size: var(--db-container-xs);
411
413
  block-size: fit-content;
412
414
  inline-size: fit-content;
413
415
  }
414
416
  [data-width=fixed].db-tooltip {
415
417
  inline-size: max-content;
416
- max-inline-size: min(var(--db-sizing-3xl), calc(100vw - 2 * var(--db-spacing-fixed-md)));
417
418
  text-align: initial;
418
419
  }
419
420