@db-ux/core-components 4.0.0 → 4.0.1-0-540218c

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 (35) hide show
  1. package/CHANGELOG.md +5 -0
  2. package/agent/_instructions.md +7 -2
  3. package/build/components/accordion-item/accordion-item.css +4 -1
  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 +2 -0
  7. package/build/components/checkbox/checkbox.css +4 -1
  8. package/build/components/custom-select/custom-select.css +61 -1
  9. package/build/components/custom-select-dropdown/custom-select-dropdown.css +2 -0
  10. package/build/components/custom-select-form-field/custom-select-form-field.css +2 -0
  11. package/build/components/custom-select-list/custom-select-list.css +2 -0
  12. package/build/components/custom-select-list-item/custom-select-list-item.css +2 -0
  13. package/build/components/header/header.css +2 -0
  14. package/build/components/infotext/infotext.css +4 -1
  15. package/build/components/input/input.css +59 -1
  16. package/build/components/link/link.css +4 -1
  17. package/build/components/navigation/navigation.css +2 -0
  18. package/build/components/navigation-item/navigation-item.css +4 -1
  19. package/build/components/notification/notification.css +4 -1
  20. package/build/components/radio/radio.css +2 -0
  21. package/build/components/select/select.css +61 -1
  22. package/build/components/switch/switch.css +4 -1
  23. package/build/components/tab-item/tab-item.css +2 -0
  24. package/build/components/tab-list/tab-list.css +2 -0
  25. package/build/components/tabs/tabs.css +2 -0
  26. package/build/components/tag/tag.css +4 -1
  27. package/build/components/textarea/textarea.css +57 -0
  28. package/build/components/tooltip/tooltip.css +2 -0
  29. package/build/styles/absolute.css +4 -4
  30. package/build/styles/index.css +4 -4
  31. package/build/styles/internal/_form-components.scss +25 -0
  32. package/build/styles/relative.css +4 -4
  33. package/build/styles/rollup.css +4 -4
  34. package/build/styles/webpack.css +4 -4
  35. package/package.json +2 -2
package/build/components/textarea/textarea.css CHANGED
@@ -170,6 +170,8 @@ input[type=radio]:checked) > label {
170
170
 
171
171
  @layer variables {}
172
172
 
173
+ /* Use for body tags like <p> */
174
+ /* Use for headline tags like <h1> */
173
175
  /**
174
176
  * @mixin screen-min-max
175
177
  * @param $data an object like (min:"sm", max:"lg") or (min: "sm")
@@ -399,6 +401,18 @@ input[type=radio]:checked) > label {
399
401
  content: "*"/"";
400
402
  }
401
403
  }
404
+ .db-textarea[data-variant=floating]:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid) label {
405
+ color: var(--db-successful-on-bg-basic-emphasis-80-default);
406
+ }
407
+ .db-textarea[data-variant=floating]:has(textarea[data-custom-validity=valid]) label, .db-textarea[data-variant=floating][data-custom-validity=valid] label {
408
+ color: var(--db-successful-on-bg-basic-emphasis-80-default);
409
+ }
410
+ .db-textarea[data-variant=floating]:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-invalid) label {
411
+ color: var(--db-critical-on-bg-basic-emphasis-80-default);
412
+ }
413
+ .db-textarea[data-variant=floating]:has(textarea[data-custom-validity=invalid]) label, .db-textarea[data-variant=floating][data-custom-validity=invalid] label {
414
+ color: var(--db-critical-on-bg-basic-emphasis-80-default);
415
+ }
402
416
  .db-textarea[data-variant=floating] > label {
403
417
  opacity: var(--db-opacity-xl);
404
418
  position: absolute;
@@ -416,6 +430,14 @@ input[type=radio]:checked) > label {
416
430
  transition: none;
417
431
  opacity: 0;
418
432
  }
433
+ .db-textarea[data-variant=floating] textarea:is([type=date],
434
+ [type=datetime-local],
435
+ [type=month],
436
+ [type=week],
437
+ [type=time]):not(:user-valid)::-webkit-datetime-edit {
438
+ transition: none;
439
+ opacity: 0;
440
+ }
419
441
  .db-textarea[data-variant=floating] textarea {
420
442
  padding-block-start: calc(var(--db-spacing-fixed-3xs) + var(--db-spacing-fixed-2xs) + var(--db-base-body-icon-font-size-2xs));
421
443
  /* stylelint-disable-next-line at-rule-empty-line-before */
@@ -457,6 +479,32 @@ input[type=radio]:checked) [id$=-placeholder] {
457
479
  transition: opacity var(--db-transition-straight-emotional);
458
480
  }
459
481
  }
482
+ .db-textarea[data-variant=floating]:has(textarea:focus-within,
483
+ textarea:is(input, textarea):not(:placeholder-shown),
484
+ > select option:checked:not(.placeholder),
485
+ input[type=checkbox]:checked,
486
+ input[type=radio]:checked) textarea:is([type=date],
487
+ [type=datetime-local],
488
+ [type=month],
489
+ [type=week],
490
+ [type=time]):not(:user-valid)::-webkit-datetime-edit {
491
+ opacity: var(--db-opacity-xl);
492
+ font-family: var(--db-font-family-sans);
493
+ font-style: italic;
494
+ }
495
+ @media screen and (prefers-reduced-motion: no-preference) {
496
+ .db-textarea[data-variant=floating]:has(textarea:focus-within,
497
+ textarea:is(input, textarea):not(:placeholder-shown),
498
+ > select option:checked:not(.placeholder),
499
+ input[type=checkbox]:checked,
500
+ input[type=radio]:checked) textarea:is([type=date],
501
+ [type=datetime-local],
502
+ [type=month],
503
+ [type=week],
504
+ [type=time]):not(:user-valid)::-webkit-datetime-edit {
505
+ transition: opacity var(--db-transition-straight-emotional);
506
+ }
507
+ }
460
508
  .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid):has(> .db-infotext[data-semantic=successful],
461
509
  > db-infotext > .db-infotext[data-semantic=successful]) {
462
510
  --db-textarea-read-only: var(--db-successful-bg-basic-level-1-default);
@@ -684,6 +732,15 @@ input[type=radio]:checked) [id$=-placeholder] {
684
732
  font-family: var(--db-font-family-sans);
685
733
  font-style: italic;
686
734
  }
735
+ .db-textarea textarea:is([type=date],
736
+ [type=datetime-local],
737
+ [type=month],
738
+ [type=week],
739
+ [type=time]):not(:user-valid)::-webkit-datetime-edit {
740
+ opacity: var(--db-opacity-xl);
741
+ font-family: var(--db-font-family-sans);
742
+ font-style: italic;
743
+ }
687
744
  .db-textarea textarea {
688
745
  background-color: var(--db-adaptive-bg-basic-transparent-semi-default);
689
746
  caret-color: var(--db-adaptive-on-bg-basic-emphasis-100-default);
package/build/components/tooltip/tooltip.css CHANGED
@@ -113,6 +113,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
113
113
 
114
114
  @layer variables {}
115
115
 
116
+ /* Use for body tags like <p> */
117
+ /* Use for headline tags like <h1> */
116
118
  @keyframes show-right-to-left {
117
119
  from {
118
120
  transform: translateX(110%);