@ui5/webcomponents 2.28.0-rc.0 → 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 (187) hide show
  1. package/CHANGELOG.md +44 -0
  2. package/dist/.tsbuildinfo +1 -1
  3. package/dist/Bar.d.ts +11 -8
  4. package/dist/Bar.js +11 -9
  5. package/dist/Bar.js.map +1 -1
  6. package/dist/ComboBox.js +1 -0
  7. package/dist/ComboBox.js.map +1 -1
  8. package/dist/DateComponentBase.d.ts +2 -1
  9. package/dist/DateComponentBase.js +9 -12
  10. package/dist/DateComponentBase.js.map +1 -1
  11. package/dist/DatePicker.js +3 -2
  12. package/dist/DatePicker.js.map +1 -1
  13. package/dist/DateRangePicker.js +9 -3
  14. package/dist/DateRangePicker.js.map +1 -1
  15. package/dist/FormTemplate.js +2 -2
  16. package/dist/FormTemplate.js.map +1 -1
  17. package/dist/InputIcon.d.ts +0 -11
  18. package/dist/InputIcon.js +1 -15
  19. package/dist/InputIcon.js.map +1 -1
  20. package/dist/NumericInput.d.ts +4 -2
  21. package/dist/NumericInput.js +35 -2
  22. package/dist/NumericInput.js.map +1 -1
  23. package/dist/SliderTemplate.js +1 -1
  24. package/dist/SliderTemplate.js.map +1 -1
  25. package/dist/Tab.d.ts +0 -5
  26. package/dist/Tab.js +1 -11
  27. package/dist/Tab.js.map +1 -1
  28. package/dist/TabContainer.d.ts +1 -1
  29. package/dist/TabContainer.js +4 -3
  30. package/dist/TabContainer.js.map +1 -1
  31. package/dist/TabInStripTemplate.js +1 -2
  32. package/dist/TabInStripTemplate.js.map +1 -1
  33. package/dist/YearPicker.js +1 -1
  34. package/dist/YearPicker.js.map +1 -1
  35. package/dist/css/themes/Bar.css +1 -1
  36. package/dist/css/themes/ColorPicker.css +1 -1
  37. package/dist/css/themes/Form.css +1 -1
  38. package/dist/css/themes/FormItem.css +1 -1
  39. package/dist/css/themes/FormItemSpan.css +1 -1
  40. package/dist/css/themes/sap_fiori_3/parameters-bundle.css +2 -1
  41. package/dist/css/themes/sap_fiori_3_dark/parameters-bundle.css +2 -1
  42. package/dist/css/themes/sap_fiori_3_hcb/parameters-bundle.css +2 -1
  43. package/dist/css/themes/sap_fiori_3_hcw/parameters-bundle.css +2 -1
  44. package/dist/css/themes/sap_horizon/parameters-bundle.css +1 -1
  45. package/dist/css/themes/sap_horizon_auto/parameters-bundle.css +493 -727
  46. package/dist/css/themes/sap_horizon_dark/parameters-bundle.css +1 -1
  47. package/dist/css/themes/sap_horizon_hc_auto/parameters-bundle.css +475 -695
  48. package/dist/css/themes/sap_horizon_hcb/parameters-bundle.css +1 -1
  49. package/dist/css/themes/sap_horizon_hcw/parameters-bundle.css +1 -1
  50. package/dist/custom-elements-internal.json +129 -128
  51. package/dist/custom-elements.json +126 -126
  52. package/dist/generated/assets/i18n/messagebundle_en_US_saprigi.json +1 -1
  53. package/dist/generated/assets/themes/sap_fiori_3/parameters-bundle.css.json +1 -1
  54. package/dist/generated/assets/themes/sap_fiori_3_dark/parameters-bundle.css.json +1 -1
  55. package/dist/generated/assets/themes/sap_fiori_3_hcb/parameters-bundle.css.json +1 -1
  56. package/dist/generated/assets/themes/sap_fiori_3_hcw/parameters-bundle.css.json +1 -1
  57. package/dist/generated/assets/themes/sap_horizon/parameters-bundle.css.json +1 -1
  58. package/dist/generated/assets/themes/sap_horizon_auto/parameters-bundle.css.json +1 -1
  59. package/dist/generated/assets/themes/sap_horizon_dark/parameters-bundle.css.json +1 -1
  60. package/dist/generated/assets/themes/sap_horizon_hc_auto/parameters-bundle.css.json +1 -1
  61. package/dist/generated/assets/themes/sap_horizon_hcb/parameters-bundle.css.json +1 -1
  62. package/dist/generated/assets/themes/sap_horizon_hcw/parameters-bundle.css.json +1 -1
  63. package/dist/generated/themes/Bar.css.d.ts +1 -1
  64. package/dist/generated/themes/Bar.css.js +1 -1
  65. package/dist/generated/themes/Bar.css.js.map +1 -1
  66. package/dist/generated/themes/ColorPicker.css.d.ts +1 -1
  67. package/dist/generated/themes/ColorPicker.css.js +1 -1
  68. package/dist/generated/themes/ColorPicker.css.js.map +1 -1
  69. package/dist/generated/themes/Form.css.d.ts +1 -1
  70. package/dist/generated/themes/Form.css.js +1 -1
  71. package/dist/generated/themes/Form.css.js.map +1 -1
  72. package/dist/generated/themes/FormItem.css.d.ts +1 -1
  73. package/dist/generated/themes/FormItem.css.js +1 -1
  74. package/dist/generated/themes/FormItem.css.js.map +1 -1
  75. package/dist/generated/themes/FormItemSpan.css.d.ts +1 -1
  76. package/dist/generated/themes/FormItemSpan.css.js +1 -1
  77. package/dist/generated/themes/FormItemSpan.css.js.map +1 -1
  78. package/dist/generated/themes/sap_fiori_3/parameters-bundle.css.d.ts +1 -1
  79. package/dist/generated/themes/sap_fiori_3/parameters-bundle.css.js +2 -1
  80. package/dist/generated/themes/sap_fiori_3/parameters-bundle.css.js.map +1 -1
  81. package/dist/generated/themes/sap_fiori_3_dark/parameters-bundle.css.d.ts +1 -1
  82. package/dist/generated/themes/sap_fiori_3_dark/parameters-bundle.css.js +2 -1
  83. package/dist/generated/themes/sap_fiori_3_dark/parameters-bundle.css.js.map +1 -1
  84. package/dist/generated/themes/sap_fiori_3_hcb/parameters-bundle.css.d.ts +1 -1
  85. package/dist/generated/themes/sap_fiori_3_hcb/parameters-bundle.css.js +2 -1
  86. package/dist/generated/themes/sap_fiori_3_hcb/parameters-bundle.css.js.map +1 -1
  87. package/dist/generated/themes/sap_fiori_3_hcw/parameters-bundle.css.d.ts +1 -1
  88. package/dist/generated/themes/sap_fiori_3_hcw/parameters-bundle.css.js +2 -1
  89. package/dist/generated/themes/sap_fiori_3_hcw/parameters-bundle.css.js.map +1 -1
  90. package/dist/generated/themes/sap_horizon/parameters-bundle.css.d.ts +1 -1
  91. package/dist/generated/themes/sap_horizon/parameters-bundle.css.js +1 -1
  92. package/dist/generated/themes/sap_horizon/parameters-bundle.css.js.map +1 -1
  93. package/dist/generated/themes/sap_horizon_auto/parameters-bundle.css.d.ts +1 -1
  94. package/dist/generated/themes/sap_horizon_auto/parameters-bundle.css.js +493 -727
  95. package/dist/generated/themes/sap_horizon_auto/parameters-bundle.css.js.map +1 -1
  96. package/dist/generated/themes/sap_horizon_dark/parameters-bundle.css.d.ts +1 -1
  97. package/dist/generated/themes/sap_horizon_dark/parameters-bundle.css.js +1 -1
  98. package/dist/generated/themes/sap_horizon_dark/parameters-bundle.css.js.map +1 -1
  99. package/dist/generated/themes/sap_horizon_hc_auto/parameters-bundle.css.d.ts +1 -1
  100. package/dist/generated/themes/sap_horizon_hc_auto/parameters-bundle.css.js +475 -695
  101. package/dist/generated/themes/sap_horizon_hc_auto/parameters-bundle.css.js.map +1 -1
  102. package/dist/generated/themes/sap_horizon_hcb/parameters-bundle.css.d.ts +1 -1
  103. package/dist/generated/themes/sap_horizon_hcb/parameters-bundle.css.js +1 -1
  104. package/dist/generated/themes/sap_horizon_hcb/parameters-bundle.css.js.map +1 -1
  105. package/dist/generated/themes/sap_horizon_hcw/parameters-bundle.css.d.ts +1 -1
  106. package/dist/generated/themes/sap_horizon_hcw/parameters-bundle.css.js +1 -1
  107. package/dist/generated/themes/sap_horizon_hcw/parameters-bundle.css.js.map +1 -1
  108. package/dist/types/BarAccessibleRole.d.ts +2 -1
  109. package/dist/types/BarAccessibleRole.js +2 -1
  110. package/dist/types/BarAccessibleRole.js.map +1 -1
  111. package/dist/vscode.html-custom-data.json +7 -7
  112. package/dist/web-types.json +15 -15
  113. package/package.json +9 -9
  114. package/src/FormTemplate.tsx +2 -2
  115. package/src/SliderTemplate.tsx +1 -1
  116. package/src/TabInStripTemplate.tsx +2 -13
  117. package/src/i18n/messagebundle_en_US_saprigi.properties +16 -0
  118. package/src/themes/Bar.css +1 -1
  119. package/src/themes/ColorPicker.css +1 -5
  120. package/src/themes/Form.css +5 -3
  121. package/src/themes/FormItem.css +4 -0
  122. package/src/themes/FormItemSpan.css +5 -0
  123. package/src/themes/TabInStrip.css +35 -19
  124. package/src/themes/base/CalendarHeader-parameters.css +1 -1
  125. package/src/themes/base/CheckBox-parameters.css +1 -1
  126. package/src/themes/base/Input-parameters.css +1 -1
  127. package/src/themes/base/InputIcon-parameters.css +1 -1
  128. package/src/themes/base/Panel-parameters.css +1 -1
  129. package/src/themes/base/RadioButton-parameters.css +1 -1
  130. package/src/themes/base/RatingIndicator-parameters.css +1 -1
  131. package/src/themes/base/Select-parameters.css +1 -1
  132. package/src/themes/base/SliderHandle-parameters.css +1 -1
  133. package/src/themes/base/SliderScale-parameters.css +1 -1
  134. package/src/themes/base/Switch-parameters.css +1 -1
  135. package/src/themes/base/TabContainer-parameters.css +1 -1
  136. package/src/themes/base/TextArea-parameters.css +1 -1
  137. package/src/themes/base/Tokenizer-parameters.css +1 -1
  138. package/src/themes/base/sizes-parameters.css +1 -1
  139. package/src/themes/sap_fiori_3/Slider-parameters.css +1 -1
  140. package/src/themes/sap_fiori_3/SliderHandle-parameters.css +1 -1
  141. package/src/themes/sap_fiori_3/sizes-parameters.css +1 -1
  142. package/src/themes/sap_fiori_3_dark/Slider-parameters.css +1 -1
  143. package/src/themes/sap_fiori_3_dark/sizes-parameters.css +1 -1
  144. package/src/themes/sap_fiori_3_hcb/Input-parameters.css +1 -1
  145. package/src/themes/sap_fiori_3_hcb/Slider-parameters.css +1 -1
  146. package/src/themes/sap_fiori_3_hcb/TextArea-parameters.css +1 -1
  147. package/src/themes/sap_fiori_3_hcb/sizes-parameters.css +1 -1
  148. package/src/themes/sap_fiori_3_hcw/Input-parameters.css +1 -1
  149. package/src/themes/sap_fiori_3_hcw/Slider-parameters.css +1 -1
  150. package/src/themes/sap_fiori_3_hcw/TextArea-parameters.css +1 -1
  151. package/src/themes/sap_fiori_3_hcw/sizes-parameters.css +1 -1
  152. package/src/themes/sap_horizon/Input-parameters.css +1 -1
  153. package/src/themes/sap_horizon/InputIcon-parameters.css +1 -1
  154. package/src/themes/sap_horizon/RadioButton-parameters.css +1 -1
  155. package/src/themes/sap_horizon/RatingIndicator-parameters.css +1 -1
  156. package/src/themes/sap_horizon/Slider-parameters.css +1 -1
  157. package/src/themes/sap_horizon/Switch-parameters.css +1 -1
  158. package/src/themes/sap_horizon/TextArea-parameters.css +1 -1
  159. package/src/themes/sap_horizon/Token-parameters.css +1 -1
  160. package/src/themes/sap_horizon/sizes-parameters.css +1 -1
  161. package/src/themes/sap_horizon_dark/Input-parameters.css +1 -1
  162. package/src/themes/sap_horizon_dark/InputIcon-parameters.css +1 -1
  163. package/src/themes/sap_horizon_dark/RadioButton-parameters.css +1 -1
  164. package/src/themes/sap_horizon_dark/RatingIndicator-parameters.css +1 -1
  165. package/src/themes/sap_horizon_dark/Slider-parameters.css +1 -1
  166. package/src/themes/sap_horizon_dark/Switch-parameters.css +1 -1
  167. package/src/themes/sap_horizon_dark/TextArea-parameters.css +1 -1
  168. package/src/themes/sap_horizon_dark/Token-parameters.css +1 -1
  169. package/src/themes/sap_horizon_dark/sizes-parameters.css +1 -1
  170. package/src/themes/sap_horizon_hcb/Input-parameters.css +1 -1
  171. package/src/themes/sap_horizon_hcb/InputIcon-parameters.css +1 -1
  172. package/src/themes/sap_horizon_hcb/RadioButton-parameters.css +1 -1
  173. package/src/themes/sap_horizon_hcb/RatingIndicator-parameters.css +1 -1
  174. package/src/themes/sap_horizon_hcb/Slider-parameters.css +1 -1
  175. package/src/themes/sap_horizon_hcb/Switch-parameters.css +1 -1
  176. package/src/themes/sap_horizon_hcb/TextArea-parameters.css +1 -1
  177. package/src/themes/sap_horizon_hcb/Token-parameters.css +1 -1
  178. package/src/themes/sap_horizon_hcb/sizes-parameters.css +1 -1
  179. package/src/themes/sap_horizon_hcw/Input-parameters.css +1 -1
  180. package/src/themes/sap_horizon_hcw/InputIcon-parameters.css +1 -1
  181. package/src/themes/sap_horizon_hcw/RadioButton-parameters.css +1 -1
  182. package/src/themes/sap_horizon_hcw/RatingIndicator-parameters.css +1 -1
  183. package/src/themes/sap_horizon_hcw/Slider-parameters.css +1 -1
  184. package/src/themes/sap_horizon_hcw/Switch-parameters.css +1 -1
  185. package/src/themes/sap_horizon_hcw/TextArea-parameters.css +1 -1
  186. package/src/themes/sap_horizon_hcw/Token-parameters.css +1 -1
  187. package/src/themes/sap_horizon_hcw/sizes-parameters.css +1 -1
@@ -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;