@ui5/webcomponents 2.28.1 → 2.29.0-rc.0

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 (155) hide show
  1. package/CHANGELOG.md +23 -0
  2. package/dist/.tsbuildinfo +1 -1
  3. package/dist/DateComponentBase.d.ts +2 -1
  4. package/dist/DateComponentBase.js +9 -12
  5. package/dist/DateComponentBase.js.map +1 -1
  6. package/dist/DatePicker.js +3 -2
  7. package/dist/DatePicker.js.map +1 -1
  8. package/dist/DateRangePicker.js +9 -3
  9. package/dist/DateRangePicker.js.map +1 -1
  10. package/dist/NumericInput.d.ts +3 -1
  11. package/dist/NumericInput.js +35 -2
  12. package/dist/NumericInput.js.map +1 -1
  13. package/dist/SliderTemplate.js +1 -1
  14. package/dist/SliderTemplate.js.map +1 -1
  15. package/dist/Tab.d.ts +0 -5
  16. package/dist/Tab.js +1 -11
  17. package/dist/Tab.js.map +1 -1
  18. package/dist/TabContainer.d.ts +1 -1
  19. package/dist/TabContainer.js +4 -3
  20. package/dist/TabContainer.js.map +1 -1
  21. package/dist/TabInStripTemplate.js +1 -2
  22. package/dist/TabInStripTemplate.js.map +1 -1
  23. package/dist/YearPicker.js +1 -1
  24. package/dist/YearPicker.js.map +1 -1
  25. package/dist/css/themes/Bar.css +1 -1
  26. package/dist/css/themes/ColorPicker.css +1 -1
  27. package/dist/css/themes/sap_fiori_3/parameters-bundle.css +2 -1
  28. package/dist/css/themes/sap_fiori_3_dark/parameters-bundle.css +2 -1
  29. package/dist/css/themes/sap_fiori_3_hcb/parameters-bundle.css +2 -1
  30. package/dist/css/themes/sap_fiori_3_hcw/parameters-bundle.css +2 -1
  31. package/dist/css/themes/sap_horizon/parameters-bundle.css +1 -1
  32. package/dist/css/themes/sap_horizon_auto/parameters-bundle.css +493 -727
  33. package/dist/css/themes/sap_horizon_dark/parameters-bundle.css +1 -1
  34. package/dist/css/themes/sap_horizon_hc_auto/parameters-bundle.css +475 -695
  35. package/dist/css/themes/sap_horizon_hcb/parameters-bundle.css +1 -1
  36. package/dist/css/themes/sap_horizon_hcw/parameters-bundle.css +1 -1
  37. package/dist/custom-elements-internal.json +102 -102
  38. package/dist/custom-elements.json +102 -102
  39. package/dist/generated/assets/themes/sap_fiori_3/parameters-bundle.css.json +1 -1
  40. package/dist/generated/assets/themes/sap_fiori_3_dark/parameters-bundle.css.json +1 -1
  41. package/dist/generated/assets/themes/sap_fiori_3_hcb/parameters-bundle.css.json +1 -1
  42. package/dist/generated/assets/themes/sap_fiori_3_hcw/parameters-bundle.css.json +1 -1
  43. package/dist/generated/assets/themes/sap_horizon/parameters-bundle.css.json +1 -1
  44. package/dist/generated/assets/themes/sap_horizon_auto/parameters-bundle.css.json +1 -1
  45. package/dist/generated/assets/themes/sap_horizon_dark/parameters-bundle.css.json +1 -1
  46. package/dist/generated/assets/themes/sap_horizon_hc_auto/parameters-bundle.css.json +1 -1
  47. package/dist/generated/assets/themes/sap_horizon_hcb/parameters-bundle.css.json +1 -1
  48. package/dist/generated/assets/themes/sap_horizon_hcw/parameters-bundle.css.json +1 -1
  49. package/dist/generated/themes/Bar.css.d.ts +1 -1
  50. package/dist/generated/themes/Bar.css.js +1 -1
  51. package/dist/generated/themes/Bar.css.js.map +1 -1
  52. package/dist/generated/themes/ColorPicker.css.d.ts +1 -1
  53. package/dist/generated/themes/ColorPicker.css.js +1 -1
  54. package/dist/generated/themes/ColorPicker.css.js.map +1 -1
  55. package/dist/generated/themes/sap_fiori_3/parameters-bundle.css.d.ts +1 -1
  56. package/dist/generated/themes/sap_fiori_3/parameters-bundle.css.js +2 -1
  57. package/dist/generated/themes/sap_fiori_3/parameters-bundle.css.js.map +1 -1
  58. package/dist/generated/themes/sap_fiori_3_dark/parameters-bundle.css.d.ts +1 -1
  59. package/dist/generated/themes/sap_fiori_3_dark/parameters-bundle.css.js +2 -1
  60. package/dist/generated/themes/sap_fiori_3_dark/parameters-bundle.css.js.map +1 -1
  61. package/dist/generated/themes/sap_fiori_3_hcb/parameters-bundle.css.d.ts +1 -1
  62. package/dist/generated/themes/sap_fiori_3_hcb/parameters-bundle.css.js +2 -1
  63. package/dist/generated/themes/sap_fiori_3_hcb/parameters-bundle.css.js.map +1 -1
  64. package/dist/generated/themes/sap_fiori_3_hcw/parameters-bundle.css.d.ts +1 -1
  65. package/dist/generated/themes/sap_fiori_3_hcw/parameters-bundle.css.js +2 -1
  66. package/dist/generated/themes/sap_fiori_3_hcw/parameters-bundle.css.js.map +1 -1
  67. package/dist/generated/themes/sap_horizon/parameters-bundle.css.d.ts +1 -1
  68. package/dist/generated/themes/sap_horizon/parameters-bundle.css.js +1 -1
  69. package/dist/generated/themes/sap_horizon/parameters-bundle.css.js.map +1 -1
  70. package/dist/generated/themes/sap_horizon_auto/parameters-bundle.css.d.ts +1 -1
  71. package/dist/generated/themes/sap_horizon_auto/parameters-bundle.css.js +493 -727
  72. package/dist/generated/themes/sap_horizon_auto/parameters-bundle.css.js.map +1 -1
  73. package/dist/generated/themes/sap_horizon_dark/parameters-bundle.css.d.ts +1 -1
  74. package/dist/generated/themes/sap_horizon_dark/parameters-bundle.css.js +1 -1
  75. package/dist/generated/themes/sap_horizon_dark/parameters-bundle.css.js.map +1 -1
  76. package/dist/generated/themes/sap_horizon_hc_auto/parameters-bundle.css.d.ts +1 -1
  77. package/dist/generated/themes/sap_horizon_hc_auto/parameters-bundle.css.js +475 -695
  78. package/dist/generated/themes/sap_horizon_hc_auto/parameters-bundle.css.js.map +1 -1
  79. package/dist/generated/themes/sap_horizon_hcb/parameters-bundle.css.d.ts +1 -1
  80. package/dist/generated/themes/sap_horizon_hcb/parameters-bundle.css.js +1 -1
  81. package/dist/generated/themes/sap_horizon_hcb/parameters-bundle.css.js.map +1 -1
  82. package/dist/generated/themes/sap_horizon_hcw/parameters-bundle.css.d.ts +1 -1
  83. package/dist/generated/themes/sap_horizon_hcw/parameters-bundle.css.js +1 -1
  84. package/dist/generated/themes/sap_horizon_hcw/parameters-bundle.css.js.map +1 -1
  85. package/dist/web-types.json +1 -1
  86. package/package.json +9 -9
  87. package/src/SliderTemplate.tsx +1 -1
  88. package/src/TabInStripTemplate.tsx +2 -13
  89. package/src/themes/Bar.css +1 -1
  90. package/src/themes/ColorPicker.css +1 -5
  91. package/src/themes/TabInStrip.css +35 -19
  92. package/src/themes/base/CalendarHeader-parameters.css +1 -1
  93. package/src/themes/base/CheckBox-parameters.css +1 -1
  94. package/src/themes/base/Input-parameters.css +1 -1
  95. package/src/themes/base/InputIcon-parameters.css +1 -1
  96. package/src/themes/base/Panel-parameters.css +1 -1
  97. package/src/themes/base/RadioButton-parameters.css +1 -1
  98. package/src/themes/base/RatingIndicator-parameters.css +1 -1
  99. package/src/themes/base/Select-parameters.css +1 -1
  100. package/src/themes/base/SliderHandle-parameters.css +1 -1
  101. package/src/themes/base/SliderScale-parameters.css +1 -1
  102. package/src/themes/base/Switch-parameters.css +1 -1
  103. package/src/themes/base/TabContainer-parameters.css +1 -1
  104. package/src/themes/base/TextArea-parameters.css +1 -1
  105. package/src/themes/base/Tokenizer-parameters.css +1 -1
  106. package/src/themes/base/sizes-parameters.css +1 -1
  107. package/src/themes/sap_fiori_3/Slider-parameters.css +1 -1
  108. package/src/themes/sap_fiori_3/SliderHandle-parameters.css +1 -1
  109. package/src/themes/sap_fiori_3/sizes-parameters.css +1 -1
  110. package/src/themes/sap_fiori_3_dark/Slider-parameters.css +1 -1
  111. package/src/themes/sap_fiori_3_dark/sizes-parameters.css +1 -1
  112. package/src/themes/sap_fiori_3_hcb/Input-parameters.css +1 -1
  113. package/src/themes/sap_fiori_3_hcb/Slider-parameters.css +1 -1
  114. package/src/themes/sap_fiori_3_hcb/TextArea-parameters.css +1 -1
  115. package/src/themes/sap_fiori_3_hcb/sizes-parameters.css +1 -1
  116. package/src/themes/sap_fiori_3_hcw/Input-parameters.css +1 -1
  117. package/src/themes/sap_fiori_3_hcw/Slider-parameters.css +1 -1
  118. package/src/themes/sap_fiori_3_hcw/TextArea-parameters.css +1 -1
  119. package/src/themes/sap_fiori_3_hcw/sizes-parameters.css +1 -1
  120. package/src/themes/sap_horizon/Input-parameters.css +1 -1
  121. package/src/themes/sap_horizon/InputIcon-parameters.css +1 -1
  122. package/src/themes/sap_horizon/RadioButton-parameters.css +1 -1
  123. package/src/themes/sap_horizon/RatingIndicator-parameters.css +1 -1
  124. package/src/themes/sap_horizon/Slider-parameters.css +1 -1
  125. package/src/themes/sap_horizon/Switch-parameters.css +1 -1
  126. package/src/themes/sap_horizon/TextArea-parameters.css +1 -1
  127. package/src/themes/sap_horizon/Token-parameters.css +1 -1
  128. package/src/themes/sap_horizon/sizes-parameters.css +1 -1
  129. package/src/themes/sap_horizon_dark/Input-parameters.css +1 -1
  130. package/src/themes/sap_horizon_dark/InputIcon-parameters.css +1 -1
  131. package/src/themes/sap_horizon_dark/RadioButton-parameters.css +1 -1
  132. package/src/themes/sap_horizon_dark/RatingIndicator-parameters.css +1 -1
  133. package/src/themes/sap_horizon_dark/Slider-parameters.css +1 -1
  134. package/src/themes/sap_horizon_dark/Switch-parameters.css +1 -1
  135. package/src/themes/sap_horizon_dark/TextArea-parameters.css +1 -1
  136. package/src/themes/sap_horizon_dark/Token-parameters.css +1 -1
  137. package/src/themes/sap_horizon_dark/sizes-parameters.css +1 -1
  138. package/src/themes/sap_horizon_hcb/Input-parameters.css +1 -1
  139. package/src/themes/sap_horizon_hcb/InputIcon-parameters.css +1 -1
  140. package/src/themes/sap_horizon_hcb/RadioButton-parameters.css +1 -1
  141. package/src/themes/sap_horizon_hcb/RatingIndicator-parameters.css +1 -1
  142. package/src/themes/sap_horizon_hcb/Slider-parameters.css +1 -1
  143. package/src/themes/sap_horizon_hcb/Switch-parameters.css +1 -1
  144. package/src/themes/sap_horizon_hcb/TextArea-parameters.css +1 -1
  145. package/src/themes/sap_horizon_hcb/Token-parameters.css +1 -1
  146. package/src/themes/sap_horizon_hcb/sizes-parameters.css +1 -1
  147. package/src/themes/sap_horizon_hcw/Input-parameters.css +1 -1
  148. package/src/themes/sap_horizon_hcw/InputIcon-parameters.css +1 -1
  149. package/src/themes/sap_horizon_hcw/RadioButton-parameters.css +1 -1
  150. package/src/themes/sap_horizon_hcw/RatingIndicator-parameters.css +1 -1
  151. package/src/themes/sap_horizon_hcw/Slider-parameters.css +1 -1
  152. package/src/themes/sap_horizon_hcw/Switch-parameters.css +1 -1
  153. package/src/themes/sap_horizon_hcw/TextArea-parameters.css +1 -1
  154. package/src/themes/sap_horizon_hcw/Token-parameters.css +1 -1
  155. package/src/themes/sap_horizon_hcw/sizes-parameters.css +1 -1
@@ -45,7 +45,7 @@
45
45
  --_ui5_checkbox_right_focus_distance: 0;
46
46
  }
47
47
 
48
- @container style(--ui5_content_density: compact) {
48
+ @ui5-compact-size {
49
49
  :host {
50
50
  --_ui5_checkbox_label_offset: var(--_ui5_checkbox_compact_wrapper_padding);
51
51
  }
@@ -73,7 +73,7 @@
73
73
  --_ui5_input_tokenizer_min_width: 3.5rem;
74
74
  }
75
75
 
76
- @container style(--ui5_content_density: compact) {
76
+ @ui5-compact-size {
77
77
  :host {
78
78
  --_ui5_input_min_width: 2rem;
79
79
  --_ui5_input_min_width_tokenizer_available: 2rem;
@@ -17,7 +17,7 @@
17
17
  --_ui5_input_icon_success_pressed_color: var(--sapButton_Active_TextColor);
18
18
  }
19
19
 
20
- @container style(--ui5_content_density: compact) {
20
+ @ui5-compact-size {
21
21
  :host {
22
22
  --_ui5_input_icon_padding: .25rem .4375rem;
23
23
  }
@@ -16,7 +16,7 @@
16
16
  --_ui5_panel_header_background_color: var(--sapBackgroundColor);
17
17
  }
18
18
 
19
- @container style(--ui5_content_density: compact) {
19
+ @ui5-compact-size {
20
20
  :host {
21
21
  --_ui5_panel_header_button_wrapper_padding: .1875rem .25rem;
22
22
  }
@@ -35,7 +35,7 @@
35
35
  --_ui5_radio_button_read_only_inner_ring_color: var(--sapContent_NonInteractiveIconColor);
36
36
  }
37
37
 
38
- @container style(--ui5_content_density: compact) {
38
+ @ui5-compact-size {
39
39
  :host {
40
40
  --_ui5_radio_button_min_width: 2rem;
41
41
  --_ui5_radio_button_focus_dist: 0.375rem;
@@ -12,7 +12,7 @@
12
12
  --_ui5_rating_indicator_item_size_l: 2rem;
13
13
  }
14
14
 
15
- @container style(--ui5_content_density: compact) {
15
+ @ui5-compact-size {
16
16
  :host {
17
17
  --_ui5_rating_indicator_item_height: 0.67em;
18
18
  --_ui5_rating_indicator_item_width: 0.67em;
@@ -7,7 +7,7 @@
7
7
  --_ui5_select_icon_wrapper_state_height: 100%;
8
8
  }
9
9
 
10
- @container style(--ui5_content_density: compact) {
10
+ @ui5-compact-size {
11
11
  :host {
12
12
  --_ui5_select_icon_width: 2rem;
13
13
  }
@@ -16,7 +16,7 @@
16
16
  --_ui5_slider_handle_box_sizing: border-box;
17
17
  }
18
18
 
19
- @container style(--ui5_content_density: compact) {
19
+ @ui5-compact-size {
20
20
  :host {
21
21
  --_ui5_slider_handle_height: 1.25rem;
22
22
  --_ui5_slider_handle_width: 1.5rem;
@@ -26,7 +26,7 @@
26
26
  --_ui5_slider_scale_progress_border_radius: 0.25rem;
27
27
  }
28
28
 
29
- @container style(--ui5_content_density: compact) {
29
+ @ui5-compact-size {
30
30
  :host {
31
31
  --_ui5_slider_scale_dots_distance: -.75rem;
32
32
  }
@@ -139,7 +139,7 @@
139
139
  --_ui5_switch_readonly_handle_border_style: solid;
140
140
  }
141
141
 
142
- @container style(--ui5_content_density: compact) {
142
+ @ui5-compact-size {
143
143
  :host {
144
144
  --_ui5_switch_height: 2rem;
145
145
  --_ui5_switch_width: 2.5rem;
@@ -76,7 +76,7 @@
76
76
  --_ui5_tc_overflow_text_color: var(--sapButton_TextColor);
77
77
  }
78
78
 
79
- @container style(--ui5_content_density: compact) {
79
+ @ui5-compact-size {
80
80
  :host {
81
81
  --_ui5_tc_header_height: var(--_ui5_tc_item_height);
82
82
  }
@@ -44,7 +44,7 @@
44
44
  --_ui5_textarea_readonly_border_style: var(--sapField_BorderStyle);
45
45
  }
46
46
 
47
- @container style(--ui5_content_density: compact) {
47
+ @ui5-compact-size {
48
48
  :host {
49
49
  --_ui5_textarea_padding_right_and_left: 0.4375rem;
50
50
  --_ui5_textarea_padding_right_and_left_error_warning: 0.375rem;
@@ -5,7 +5,7 @@
5
5
  --_ui5_tokenizer-popover_offset: .3125rem;
6
6
  }
7
7
 
8
- @container style(--ui5_content_density: compact) {
8
+ @ui5-compact-size {
9
9
  :host {
10
10
  --_ui5_tokenizer_gap: 0.375em 0.25rem;
11
11
  --_ui5_tokenizer-popover_offset: .1875rem;
@@ -161,7 +161,7 @@
161
161
  --___ui5-test-both: red;
162
162
  }
163
163
 
164
- @container style(--ui5_content_density: compact) {
164
+ @ui5-compact-size {
165
165
  :host {
166
166
  --___ui5-test-both: blue;
167
167
  --___ui5-test-compact-only: blue;
@@ -3,7 +3,7 @@
3
3
  --_ui5_slider_height: 2.75rem;
4
4
  }
5
5
 
6
- @container style(--ui5_content_density: compact) {
6
+ @ui5-compact-size {
7
7
  :host {
8
8
  --_ui5_slider_root_side_padding: 0 .75rem;
9
9
  --_ui5_slider_height: 2rem;
@@ -13,7 +13,7 @@
13
13
  --_ui5_slider_handle_active_border: 0.125rem solid var(--sapContent_FocusColor);
14
14
  }
15
15
 
16
- @container style(--ui5_content_density: compact) {
16
+ @ui5-compact-size {
17
17
  :host {
18
18
  --_ui5_slider_handle_width: 1.5rem;
19
19
  --_ui5_slider_handle_height: 1.5rem;
@@ -8,7 +8,7 @@
8
8
  --_ui5_color_picker_slider_handle_container_margin_top: 0.25rem;
9
9
  }
10
10
 
11
- @container style(--ui5_content_density: compact) {
11
+ @ui5-compact-size {
12
12
  :host {
13
13
  /* ColorPicker */
14
14
  --_ui5_color_picker_slider_handle_container_margin_top: none;
@@ -3,7 +3,7 @@
3
3
  --_ui5_slider_height: 2.75rem;
4
4
  }
5
5
 
6
- @container style(--ui5_content_density: compact) {
6
+ @ui5-compact-size {
7
7
  :host {
8
8
  --_ui5_slider_root_side_padding: 0 .75rem;
9
9
  --_ui5_slider_height: 2rem;
@@ -8,7 +8,7 @@
8
8
  --_ui5_color_picker_slider_handle_container_margin_top: 0.1875rem;
9
9
  }
10
10
 
11
- @container style(--ui5_content_density: compact) {
11
+ @ui5-compact-size {
12
12
  :host {
13
13
  /* ColorPicker */
14
14
  --_ui5_color_picker_slider_handle_container_margin_top: none;
@@ -20,7 +20,7 @@
20
20
  --_ui5-input_error_placeholder_color: var(--sapField_TextColor);
21
21
  }
22
22
 
23
- @container style(--ui5_content_density: compact) {
23
+ @ui5-compact-size {
24
24
  :host {
25
25
  --_ui5_input_information_icon_padding: .25rem .4375rem;
26
26
  --_ui5_input_information_custom_icon_padding: .25rem .5rem;
@@ -3,7 +3,7 @@
3
3
  --_ui5_slider_height: 2.75rem;
4
4
  }
5
5
 
6
- @container style(--ui5_content_density: compact) {
6
+ @ui5-compact-size {
7
7
  :host {
8
8
  --_ui5_slider_root_side_padding: 0 .75rem;
9
9
  --_ui5_slider_height: 2rem;
@@ -22,7 +22,7 @@
22
22
  --_ui5_textarea_inner_width: 100%;
23
23
  }
24
24
 
25
- @container style(--ui5_content_density: compact) {
25
+ @ui5-compact-size {
26
26
  :host {
27
27
  --_ui5_textarea_padding_top: 0.0625rem;
28
28
  --_ui5_textarea_padding_bottom: 0.0625rem;
@@ -5,7 +5,7 @@
5
5
  --_ui5_color_picker_slider_handle_container_margin_top: -0.125rem;
6
6
  }
7
7
 
8
- @container style(--ui5_content_density: compact) {
8
+ @ui5-compact-size {
9
9
  :host {
10
10
  /* CheckBox */
11
11
  --_ui5_checkbox_focus_position: 0.3125rem;
@@ -20,7 +20,7 @@
20
20
  --_ui5-input_error_placeholder_color: var(--sapField_TextColor);
21
21
  }
22
22
 
23
- @container style(--ui5_content_density: compact) {
23
+ @ui5-compact-size {
24
24
  :host {
25
25
  --_ui5_input_information_icon_padding: .25rem .4375rem;
26
26
  --_ui5_input_information_custom_icon_padding: .25rem .5rem;
@@ -3,7 +3,7 @@
3
3
  --_ui5_slider_height: 2.75rem;
4
4
  }
5
5
 
6
- @container style(--ui5_content_density: compact) {
6
+ @ui5-compact-size {
7
7
  :host {
8
8
  --_ui5_slider_root_side_padding: 0 .75rem;
9
9
  --_ui5_slider_height: 2rem;
@@ -22,7 +22,7 @@
22
22
  --_ui5_textarea_inner_width: 100%;
23
23
  }
24
24
 
25
- @container style(--ui5_content_density: compact) {
25
+ @ui5-compact-size {
26
26
  :host {
27
27
  --_ui5_textarea_padding_top: 0.0625rem;
28
28
  --_ui5_textarea_padding_bottom: 0.0625rem;
@@ -5,7 +5,7 @@
5
5
  --_ui5_color_picker_slider_handle_container_margin_top: -0.125rem;
6
6
  }
7
7
 
8
- @container style(--ui5_content_density: compact) {
8
+ @ui5-compact-size {
9
9
  :host {
10
10
  /* CheckBox */
11
11
  --_ui5_checkbox_focus_position: 0.3125rem;
@@ -30,7 +30,7 @@
30
30
  --_ui5_input_icon_wrapper_success_state_height: calc(100% - var(--_ui5_input_value_state_success_border_width));
31
31
  }
32
32
 
33
- @container style(--ui5_content_density: compact) {
33
+ @ui5-compact-size {
34
34
  :host {
35
35
  --_ui5_input_information_icon_padding: .3125rem .5rem .1875rem .5rem;
36
36
  --_ui5_input_information_focused_icon_padding: .3125rem .5rem .25rem .5rem;
@@ -17,7 +17,7 @@
17
17
  --_ui5_input_icon_success_pressed_color: var(--sapButton_Accept_Selected_TextColor);
18
18
  }
19
19
 
20
- @container style(--ui5_content_density: compact) {
20
+ @ui5-compact-size {
21
21
  :host {
22
22
  --_ui5_input_icon_padding: .3125rem .5rem .25rem .5rem;
23
23
  }
@@ -19,7 +19,7 @@
19
19
  --_ui5_radio_button_focus_dist: 0.375rem;
20
20
  }
21
21
 
22
- @container style(--ui5_content_density: compact) {
22
+ @ui5-compact-size {
23
23
  :host {
24
24
  --_ui5_radio_button_outer_ring_padding: 0.5rem;
25
25
  --_ui5_radio_button_focus_dist: 0.1875rem;
@@ -6,7 +6,7 @@
6
6
  --_ui5_rating_indicator_readonly_item_spacing: 0.1875rem 0.1875rem;
7
7
  }
8
8
 
9
- @container style(--ui5_content_density: compact) {
9
+ @ui5-compact-size {
10
10
  :host {
11
11
  --_ui5_rating_indicator_item_height: 1em;
12
12
  --_ui5_rating_indicator_item_width: 1em;
@@ -3,7 +3,7 @@
3
3
  --_ui5_slider_height: 2.75rem;
4
4
  }
5
5
 
6
- @container style(--ui5_content_density: compact) {
6
+ @ui5-compact-size {
7
7
  :host {
8
8
  --_ui5_slider_root_side_padding: 0 .75rem;
9
9
  --_ui5_slider_height: 2rem;
@@ -126,7 +126,7 @@
126
126
  }
127
127
 
128
128
 
129
- @container style(--ui5_content_density: compact) {
129
+ @ui5-compact-size {
130
130
  :host {
131
131
  --_ui5_switch_width: 2.75rem;
132
132
  --_ui5_switch_min_width: none;
@@ -33,7 +33,7 @@
33
33
  --_ui5_textarea_readonly_border_style: dashed;
34
34
  }
35
35
 
36
- @container style(--ui5_content_density: compact) {
36
+ @ui5-compact-size {
37
37
  :host {
38
38
  --_ui5_textarea_padding_top: 0.1875rem;
39
39
  --_ui5_textarea_padding_bottom: 0.125rem;
@@ -16,7 +16,7 @@
16
16
  --_ui5_token_readonly_padding: 0.25rem 0.3125rem;
17
17
  }
18
18
 
19
- @container style(--ui5_content_density: compact) {
19
+ @ui5-compact-size {
20
20
  :host {
21
21
  --_ui5_token_outline_offset: 0;
22
22
  }
@@ -23,7 +23,7 @@
23
23
  --_ui5_daypicker_two_calendar_item_selected_focus_padding_right: 0.5rem;
24
24
  }
25
25
 
26
- @container style(--ui5_content_density: compact) {
26
+ @ui5-compact-size {
27
27
  :host {
28
28
  --_ui5_textarea_padding_top: 0.1875rem;
29
29
  --_ui5_textarea_padding_bottom: 0.125rem;
@@ -30,7 +30,7 @@
30
30
  --_ui5_input_icon_wrapper_success_state_height: calc(100% - var(--_ui5_input_value_state_success_border_width));
31
31
  }
32
32
 
33
- @container style(--ui5_content_density: compact) {
33
+ @ui5-compact-size {
34
34
  :host {
35
35
  --_ui5_input_information_icon_padding: .3125rem .5rem .1875rem .5rem;
36
36
  --_ui5_input_information_focused_icon_padding: .3125rem .5rem .25rem .5rem;
@@ -17,7 +17,7 @@
17
17
  --_ui5_input_icon_success_pressed_color: var(--sapButton_Accept_Selected_TextColor);
18
18
  }
19
19
 
20
- @container style(--ui5_content_density: compact) {
20
+ @ui5-compact-size {
21
21
  :host {
22
22
  --_ui5_input_icon_padding: .3125rem .5rem .25rem .5rem;
23
23
  }
@@ -19,7 +19,7 @@
19
19
  --_ui5_radio_button_focus_dist: 0.375rem;
20
20
  }
21
21
 
22
- @container style(--ui5_content_density: compact) {
22
+ @ui5-compact-size {
23
23
  :host {
24
24
  --_ui5_radio_button_outer_ring_padding: 0.5rem;
25
25
  --_ui5_radio_button_focus_dist: 0.1875rem;
@@ -6,7 +6,7 @@
6
6
  --_ui5_rating_indicator_readonly_item_spacing: 0.1875rem 0.1875rem;
7
7
  }
8
8
 
9
- @container style(--ui5_content_density: compact) {
9
+ @ui5-compact-size {
10
10
  :host {
11
11
  --_ui5_rating_indicator_item_height: 1em;
12
12
  --_ui5_rating_indicator_item_width: 1em;
@@ -3,7 +3,7 @@
3
3
  --_ui5_slider_height: 2.75rem;
4
4
  }
5
5
 
6
- @container style(--ui5_content_density: compact) {
6
+ @ui5-compact-size {
7
7
  :host {
8
8
  --_ui5_slider_root_side_padding: 0 .75rem;
9
9
  --_ui5_slider_height: 2rem;
@@ -124,7 +124,7 @@
124
124
  --_ui5_switch_icon_height: 1rem;
125
125
  }
126
126
 
127
- @container style(--ui5_content_density: compact) {
127
+ @ui5-compact-size {
128
128
  :host {
129
129
  --_ui5_switch_width: 2.75rem;
130
130
  --_ui5_switch_min_width: none;
@@ -33,7 +33,7 @@
33
33
  --_ui5_textarea_readonly_border_style: dashed;
34
34
  }
35
35
 
36
- @container style(--ui5_content_density: compact) {
36
+ @ui5-compact-size {
37
37
  :host {
38
38
  --_ui5_textarea_padding_top: 0.1875rem;
39
39
  --_ui5_textarea_padding_bottom: 0.125rem;
@@ -16,7 +16,7 @@
16
16
  --_ui5_token_readonly_padding: 0.25rem 0.3125rem;
17
17
  }
18
18
 
19
- @container style(--ui5_content_density: compact) {
19
+ @ui5-compact-size {
20
20
  :host {
21
21
  --_ui5_token_outline_offset: 0;
22
22
  }
@@ -21,7 +21,7 @@
21
21
  --_ui5_daypicker_two_calendar_item_selected_focus_padding_right: 0.5rem;
22
22
  }
23
23
 
24
- @container style(--ui5_content_density: compact) {
24
+ @ui5-compact-size {
25
25
  :host {
26
26
  --_ui5_textarea_padding_top: 0.1875rem;
27
27
  --_ui5_textarea_padding_bottom: 0.125rem;
@@ -23,7 +23,7 @@
23
23
  --_ui5_input_icon_wrapper_height: 100%;
24
24
  }
25
25
 
26
- @container style(--ui5_content_density: compact) {
26
+ @ui5-compact-size {
27
27
  :host {
28
28
  --_ui5_input_custom_icon_padding: .1875rem .5rem;
29
29
  }
@@ -4,7 +4,7 @@
4
4
  --_ui5_input_icon_padding: .5rem .5rem .5rem .5625rem;
5
5
  }
6
6
 
7
- @container style(--ui5_content_density: compact) {
7
+ @ui5-compact-size {
8
8
  :host {
9
9
  --_ui5_input_icon_padding: .1875rem .375rem .1875rem .4375rem;
10
10
  }
@@ -18,7 +18,7 @@
18
18
  --_ui5_radio_button_focus_dist: 0.375rem;
19
19
  }
20
20
 
21
- @container style(--ui5_content_density: compact) {
21
+ @ui5-compact-size {
22
22
  :host {
23
23
  --_ui5_radio_button_outer_ring_padding: 0.5rem;
24
24
  --_ui5_radio_button_focus_dist: 0.1875rem;
@@ -6,7 +6,7 @@
6
6
  --_ui5_rating_indicator_readonly_item_spacing: 0.1875rem 0.1875rem;
7
7
  }
8
8
 
9
- @container style(--ui5_content_density: compact) {
9
+ @ui5-compact-size {
10
10
  :host {
11
11
  --_ui5_rating_indicator_item_height: 1em;
12
12
  --_ui5_rating_indicator_item_width: 1em;
@@ -3,7 +3,7 @@
3
3
  --_ui5_slider_height: 2.75rem;
4
4
  }
5
5
 
6
- @container style(--ui5_content_density: compact) {
6
+ @ui5-compact-size {
7
7
  :host {
8
8
  --_ui5_slider_root_side_padding: 0 .75rem;
9
9
  --_ui5_slider_height: 2rem;
@@ -127,7 +127,7 @@
127
127
  --_ui5_switch_readonly_handle_border_style: solid;
128
128
  }
129
129
 
130
- @container style(--ui5_content_density: compact) {
130
+ @ui5-compact-size {
131
131
  :host {
132
132
  --_ui5_switch_width: 2.75rem;
133
133
  --_ui5_switch_min_width: none;
@@ -26,7 +26,7 @@
26
26
  --_ui5_textarea_inner_width: 100%;
27
27
  }
28
28
 
29
- @container style(--ui5_content_density: compact) {
29
+ @ui5-compact-size {
30
30
  :host {
31
31
  --_ui5_textarea_padding_top: 0.0625rem;
32
32
  --_ui5_textarea_padding_bottom: 0rem;
@@ -10,7 +10,7 @@
10
10
  --_ui5_token_readonly_padding: 0.25rem 0.3125rem;
11
11
  }
12
12
 
13
- @container style(--ui5_content_density: compact) {
13
+ @ui5-compact-size {
14
14
  :host {
15
15
  --_ui5_token_focus_offset: 0;
16
16
  }
@@ -1,6 +1,6 @@
1
1
  @import "../base/sizes-parameters.css";
2
2
 
3
- @container style(--ui5_content_density: compact) {
3
+ @ui5-compact-size {
4
4
  :host {
5
5
  /* ColorPicker */
6
6
  --_ui5_color_picker_slider_handle_container_margin_top: 0.0625rem;
@@ -23,7 +23,7 @@
23
23
  --_ui5_input_icon_wrapper_height: 100%;
24
24
  }
25
25
 
26
- @container style(--ui5_content_density: compact) {
26
+ @ui5-compact-size {
27
27
  :host {
28
28
  --_ui5_input_custom_icon_padding: .1875rem .5rem;
29
29
  }
@@ -4,7 +4,7 @@
4
4
  --_ui5_input_icon_padding: .5rem .5rem .5rem .5625rem;
5
5
  }
6
6
 
7
- @container style(--ui5_content_density: compact) {
7
+ @ui5-compact-size {
8
8
  :host {
9
9
  --_ui5_input_icon_padding: .1875rem .375rem .1875rem .4375rem;
10
10
  }
@@ -22,7 +22,7 @@
22
22
  --_ui5_radio_button_focus_dist: 0.375rem;
23
23
  }
24
24
 
25
- @container style(--ui5_content_density: compact) {
25
+ @ui5-compact-size {
26
26
  :host {
27
27
  --_ui5_radio_button_outer_ring_padding: 0.5rem;
28
28
  --_ui5_radio_button_focus_dist: 0.1875rem;
@@ -6,7 +6,7 @@
6
6
  --_ui5_rating_indicator_readonly_item_spacing: 0.1875rem 0.1875rem;
7
7
  }
8
8
 
9
- @container style(--ui5_content_density: compact) {
9
+ @ui5-compact-size {
10
10
  :host {
11
11
  --_ui5_rating_indicator_item_height: 1em;
12
12
  --_ui5_rating_indicator_item_width: 1em;
@@ -3,7 +3,7 @@
3
3
  --_ui5_slider_height: 2.75rem;
4
4
  }
5
5
 
6
- @container style(--ui5_content_density: compact) {
6
+ @ui5-compact-size {
7
7
  :host {
8
8
  --_ui5_slider_root_side_padding: 0 .75rem;
9
9
  --_ui5_slider_height: 2rem;
@@ -128,7 +128,7 @@
128
128
  --_ui5_switch_readonly_handle_border_style: solid;
129
129
  }
130
130
 
131
- @container style(--ui5_content_density: compact) {
131
+ @ui5-compact-size {
132
132
  :host {
133
133
  --_ui5_switch_width: 2.75rem;
134
134
  --_ui5_switch_min_width: none;
@@ -26,7 +26,7 @@
26
26
  --_ui5_textarea_inner_width: 100%;
27
27
  }
28
28
 
29
- @container style(--ui5_content_density: compact) {
29
+ @ui5-compact-size {
30
30
  :host {
31
31
  --_ui5_textarea_padding_top: 0.0625rem;
32
32
  --_ui5_textarea_padding_bottom: 0rem;
@@ -10,7 +10,7 @@
10
10
  --_ui5_token_readonly_padding: 0.25rem 0.3125rem;
11
11
  }
12
12
 
13
- @container style(--ui5_content_density: compact) {
13
+ @ui5-compact-size {
14
14
  :host {
15
15
  --_ui5_token_focus_offset: 0;
16
16
  }
@@ -1,6 +1,6 @@
1
1
  @import "../base/sizes-parameters.css";
2
2
 
3
- @container style(--ui5_content_density: compact) {
3
+ @ui5-compact-size {
4
4
  :host {
5
5
  /* ColorPicker */
6
6
  --_ui5_color_picker_slider_handle_container_margin_top: 0.0625rem;