@itwin/itwinui-css 0.61.0 → 1.0.0-dev.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 (194) hide show
  1. package/README.md +1 -4
  2. package/css/alert.css +272 -138
  3. package/css/all.css +4070 -5172
  4. package/css/anchor.css +0 -4
  5. package/css/{user-icon.css → avatar.css} +51 -71
  6. package/css/badge.css +1 -1
  7. package/css/blockquote.css +0 -3
  8. package/css/breadcrumbs.css +59 -132
  9. package/css/button.css +255 -340
  10. package/css/carousel.css +6 -14
  11. package/css/checkbox.css +149 -0
  12. package/css/code.css +2 -10
  13. package/css/color-picker.css +5 -43
  14. package/css/date-picker.css +0 -59
  15. package/css/dialog.css +0 -5
  16. package/css/expandable-block.css +0 -31
  17. package/css/fieldset.css +0 -5
  18. package/css/file-upload.css +0 -15
  19. package/css/footer.css +0 -8
  20. package/css/global.css +8 -63
  21. package/css/header.css +312 -398
  22. package/css/icon.css +0 -30
  23. package/css/information-panel.css +1 -15
  24. package/css/input.css +162 -0
  25. package/css/keyboard.css +1 -5
  26. package/css/location-marker.css +0 -11
  27. package/css/menu.css +0 -16
  28. package/css/progress-indicator.css +1 -93
  29. package/css/radio-tile.css +38 -65
  30. package/css/radio.css +156 -0
  31. package/css/select.css +230 -0
  32. package/css/side-navigation.css +5 -20
  33. package/css/skip-to-content.css +0 -3
  34. package/css/slider.css +2 -14
  35. package/css/stepper.css +141 -0
  36. package/css/surface.css +0 -1
  37. package/css/table.css +251 -338
  38. package/css/tabs.css +6 -49
  39. package/css/tag.css +3 -21
  40. package/css/text.css +0 -2
  41. package/css/textarea.css +96 -0
  42. package/css/tile.css +169 -155
  43. package/css/time-picker.css +0 -12
  44. package/css/{toast-notification.css → toast.css} +1 -43
  45. package/css/toggle-switch.css +13 -60
  46. package/css/tooltip.css +0 -3
  47. package/css/tree.css +0 -14
  48. package/css/utils.css +609 -0
  49. package/css/workflow-diagram.css +67 -0
  50. package/package.json +11 -7
  51. package/scss/alert/alert.scss +50 -44
  52. package/scss/alert/classes.scss +24 -4
  53. package/scss/anchor/anchor.scss +76 -1
  54. package/scss/{user-icon/sizes.scss → avatar/avatar-sizes.scss} +6 -5
  55. package/scss/{user-icon/user-icon.scss → avatar/avatar.scss} +35 -70
  56. package/scss/avatar/classes.scss +27 -0
  57. package/scss/{user-icon → avatar}/index.scss +1 -2
  58. package/scss/badge/badge.scss +4 -2
  59. package/scss/blockquote/blockquote.scss +4 -9
  60. package/scss/breadcrumbs/breadcrumbs.scss +13 -18
  61. package/scss/button/borderless.scss +20 -32
  62. package/scss/button/button-group.scss +15 -7
  63. package/scss/button/button.scss +64 -42
  64. package/scss/button/classes.scss +47 -37
  65. package/scss/button/default.scss +33 -41
  66. package/scss/button/idea.scss +4 -2
  67. package/scss/button/index.scss +3 -6
  68. package/scss/button/split-button.scss +45 -0
  69. package/scss/button/variant.scss +44 -0
  70. package/scss/carousel/carousel.scss +12 -23
  71. package/scss/{inputs → checkbox}/checkbox.scss +50 -2
  72. package/scss/checkbox/classes.scss +7 -0
  73. package/scss/checkbox/index.scss +3 -0
  74. package/scss/classes.scss +10 -6
  75. package/scss/code/code.scss +3 -5
  76. package/scss/code/codeblock.scss +7 -21
  77. package/scss/color-picker/color-picker.scss +32 -61
  78. package/scss/date-picker/date-picker.scss +21 -55
  79. package/scss/dialog/dialog.scss +1 -6
  80. package/scss/expandable-block/block.scss +22 -50
  81. package/scss/fieldset/fieldset.scss +6 -12
  82. package/scss/file-upload/file-upload.scss +13 -23
  83. package/scss/footer/footer.scss +5 -15
  84. package/scss/header/classes.scss +70 -2
  85. package/scss/header/header-buttons.scss +316 -0
  86. package/scss/header/header.scss +40 -408
  87. package/scss/header/index.scss +1 -0
  88. package/scss/icon/{mixins.scss → icon.scss} +5 -15
  89. package/scss/icon/index.scss +1 -2
  90. package/scss/index.scss +10 -6
  91. package/scss/information-panel/information-panel.scss +8 -26
  92. package/scss/input/classes.scss +15 -0
  93. package/scss/input/index.scss +4 -0
  94. package/scss/{inputs → input}/input-with-icon.scss +1 -0
  95. package/scss/{inputs → input}/input.scss +15 -25
  96. package/scss/keyboard/keyboard.scss +5 -9
  97. package/scss/location-marker/data-rich.scss +5 -14
  98. package/scss/location-marker/default.scss +1 -3
  99. package/scss/location-marker/location-marker.scss +1 -3
  100. package/scss/location-marker/me.scss +7 -14
  101. package/scss/menu/menu.scss +16 -36
  102. package/scss/non-ideal-state/non-ideal-state.scss +2 -1
  103. package/scss/progress-indicator/classes.scss +0 -4
  104. package/scss/progress-indicator/linear.scss +9 -27
  105. package/scss/progress-indicator/overlay.scss +4 -10
  106. package/scss/progress-indicator/radial.scss +10 -98
  107. package/scss/radio/classes.scss +7 -0
  108. package/scss/radio/index.scss +3 -0
  109. package/scss/{inputs → radio}/radio.scss +1 -1
  110. package/scss/radio-tile/radio-tile.scss +41 -83
  111. package/scss/select/classes.scss +27 -0
  112. package/scss/select/index.scss +3 -0
  113. package/scss/{inputs → select}/select.scss +7 -15
  114. package/scss/side-navigation/side-navigation.scss +26 -34
  115. package/scss/skip-to-content/skip-to-content.scss +2 -3
  116. package/scss/slider/slider.scss +12 -23
  117. package/scss/stepper/classes.scss +32 -0
  118. package/scss/stepper/index.scss +3 -0
  119. package/scss/stepper/stepper.scss +151 -0
  120. package/scss/style/{variables.scss → global-variables.scss} +3 -1
  121. package/scss/style/global.scss +9 -10
  122. package/scss/{icon/variables.scss → style/icon-sizes.scss} +1 -1
  123. package/scss/style/index.scss +6 -6
  124. package/scss/style/theme.scss +0 -39
  125. package/scss/style/typography.scss +5 -4
  126. package/scss/surface/surface.scss +0 -1
  127. package/scss/table/classes.scss +24 -23
  128. package/scss/table/column-filter.scss +2 -5
  129. package/scss/table/index.scss +1 -2
  130. package/scss/table/paginator.scss +22 -30
  131. package/scss/table/sizes.scss +31 -0
  132. package/scss/table/{variables.scss → table-densities.scss} +2 -1
  133. package/scss/table/table.scss +156 -228
  134. package/scss/tabs/borderless.scss +6 -18
  135. package/scss/tabs/default.scss +8 -21
  136. package/scss/tabs/pill.scss +4 -14
  137. package/scss/tabs/tabs.scss +16 -44
  138. package/scss/tag/classes.scss +1 -0
  139. package/scss/tag/tag.scss +9 -19
  140. package/scss/text/mixins.scss +1 -0
  141. package/scss/text/muted.scss +2 -4
  142. package/scss/text/skeleton.scss +8 -11
  143. package/scss/textarea/classes.scss +7 -0
  144. package/scss/textarea/index.scss +3 -0
  145. package/scss/{inputs → textarea}/textarea.scss +2 -1
  146. package/scss/tile/classes.scss +14 -2
  147. package/scss/tile/tile.scss +99 -80
  148. package/scss/time-picker/time-picker.scss +8 -17
  149. package/scss/{toast-notification → toast}/categories.scss +3 -7
  150. package/scss/{toast-notification → toast}/classes.scss +0 -0
  151. package/scss/{toast-notification → toast}/index.scss +0 -0
  152. package/scss/{toast-notification → toast}/toast.scss +7 -16
  153. package/scss/toggle-switch/toggle-switch.scss +11 -30
  154. package/scss/tooltip/tooltip.scss +4 -5
  155. package/scss/tree/tree.scss +10 -22
  156. package/scss/utils/classes.scss +6 -0
  157. package/scss/utils/index.scss +6 -0
  158. package/scss/{inputs → utils/input-container}/classes.scss +0 -48
  159. package/scss/utils/input-container/index.scss +3 -0
  160. package/scss/{inputs/labeled-inputs.scss → utils/input-container/input-container.scss} +16 -113
  161. package/scss/{style → utils}/mixins.scss +26 -43
  162. package/scss/{notification-marker → utils/notification-marker}/classes.scss +0 -0
  163. package/scss/{notification-marker → utils/notification-marker}/index.scss +0 -0
  164. package/scss/{notification-marker → utils/notification-marker}/notification-marker.scss +11 -19
  165. package/scss/{popover → utils/popover}/classes.scss +0 -0
  166. package/scss/{popover → utils/popover}/index.scss +0 -0
  167. package/scss/{popover → utils/popover}/popover.scss +0 -1
  168. package/scss/workflow-diagram/classes.scss +15 -0
  169. package/scss/workflow-diagram/index.scss +3 -0
  170. package/scss/workflow-diagram/workflow-diagram.scss +64 -0
  171. package/src/index.scss +10 -6
  172. package/css/inputs.css +0 -1339
  173. package/css/notification-marker.css +0 -293
  174. package/css/popover.css +0 -14
  175. package/css/reset-global-styles.css +0 -50
  176. package/css/wizard.css +0 -190
  177. package/scss/button/button-icon.scss +0 -12
  178. package/scss/button/cta.scss +0 -31
  179. package/scss/button/disabled.scss +0 -13
  180. package/scss/button/high-visibility.scss +0 -31
  181. package/scss/button/split-menu.scss +0 -66
  182. package/scss/inputs/checkbox-radio.scss +0 -73
  183. package/scss/inputs/index.scss +0 -10
  184. package/scss/reset-global-styles.scss +0 -33
  185. package/scss/style/anchor.scss +0 -82
  186. package/scss/style/ripple.scss +0 -18
  187. package/scss/table/condensed.scss +0 -15
  188. package/scss/table/extra-condensed.scss +0 -19
  189. package/scss/user-icon/classes.scss +0 -27
  190. package/scss/wizard/classes.scss +0 -27
  191. package/scss/wizard/index.scss +0 -5
  192. package/scss/wizard/long.scss +0 -19
  193. package/scss/wizard/wizard.scss +0 -160
  194. package/scss/wizard/workflow.scss +0 -43
package/css/button.css CHANGED
@@ -3,8 +3,6 @@
3
3
  * See LICENSE.md in the project root for license terms and full copyright notice.
4
4
  *--------------------------------------------------------------------------------------------*/
5
5
  .iui-button{
6
- --_iui-button-active-stripe-inset:initial;
7
- --_iui-button-text-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
8
6
  margin:0;
9
7
  padding:0;
10
8
  border:none;
@@ -15,38 +13,31 @@
15
13
  vertical-align:middle;
16
14
  justify-content:center;
17
15
  position:relative;
18
- box-sizing:border-box;
19
16
  border-radius:4px;
20
17
  line-height:22px;
21
- box-shadow:none;
22
18
  font-size:14px;
23
19
  font-weight:400;
24
- text-decoration:none;
25
20
  -webkit-user-select:none;
26
21
  -moz-user-select:none;
27
22
  -ms-user-select:none;
28
23
  user-select:none;
29
24
  cursor:pointer;
30
25
  white-space:nowrap;
31
- border:1px solid transparent;
32
- color:rgba(0, 0, 0, 0.8);
33
- color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
26
+ border:1px solid var(--_iui-button-border-color);
27
+ background:var(--_iui-button-background-color);
34
28
  color:var(--_iui-button-text-color);
35
- padding:0 16px;
36
- height:38px;
37
- gap:8px;
38
- padding:0 16px;
39
- height:38px;
40
- gap:8px;
41
- }
42
- @media (prefers-reduced-motion: no-preference){
43
- .iui-button{
44
- transition:color 0.2s ease-out, background-color 0.2s ease-out, border-color 0.2s ease-out;
45
- }
46
- }
47
- .iui-button:hover{
48
- --_iui-button-text-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
29
+ gap:var(--_iui-button-gap);
30
+ height:var(--_iui-button-height);
31
+ padding-inline:var(--_iui-button-padding-inline);
32
+ transition:background-color 0.2s ease-out, border-color 0.2s ease-out;
33
+ -webkit-tap-highlight-color:transparent;
49
34
  text-decoration:none;
35
+ --_iui-button-gap:8px;
36
+ --_iui-button-height:38px;
37
+ --_iui-button-padding-inline:16px;
38
+ --_iui-button-text-color:var(--iui-text-color);
39
+ --_iui-button-background-color:var(--iui-color-background-1);
40
+ --_iui-button-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
50
41
  }
51
42
  .iui-button:focus-visible{
52
43
  outline:1px solid var(--iui-color-foreground-primary);
@@ -58,435 +49,359 @@
58
49
  outline-offset:-1px;
59
50
  }
60
51
  }
61
- .iui-button[disabled], .iui-button:disabled{
62
- cursor:not-allowed;
63
- background:#edeff2;
64
- border-color:#edeff2;
65
- color:rgba(0, 0, 0, 0.2);
66
- background:var(--iui-color-background-disabled);
67
- border-color:var(--iui-color-background-disabled);
68
- color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
69
- }
70
- .iui-button.iui-active::after{
71
- content:"";
72
- position:absolute;
73
- inset:var(--_iui-button-active-stripe-inset);
74
- background-color:var(--iui-color-foreground-primary);
75
- }
76
- .iui-button.iui-active[disabled]::after, .iui-button.iui-active:disabled::after{
77
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
78
- }
79
- .iui-button.iui-default{
80
- background-color:white;
81
- border-color:rgba(0, 0, 0, 0.4);
82
- background-color:var(--iui-color-background-1);
83
- border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
52
+ .iui-button:hover, .iui-button:active{
53
+ --_iui-button-text-color:var(--iui-color-foreground-body);
54
+ --_iui-button-background-color:var(--iui-color-background-1-overlay);
55
+ --_iui-button-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
56
+ }
57
+ .iui-button:hover .iui-notification-primary::before,
58
+ .iui-button:hover .iui-notification-positive::before,
59
+ .iui-button:hover .iui-notification-warning::before,
60
+ .iui-button:hover .iui-notification-negative::before, .iui-button:active .iui-notification-primary::before,
61
+ .iui-button:active .iui-notification-positive::before,
62
+ .iui-button:active .iui-notification-warning::before,
63
+ .iui-button:active .iui-notification-negative::before{
64
+ border-color:var(--iui-color-background-1-overlay);
84
65
  }
85
- .iui-button.iui-default:focus-visible{
86
- outline:2px solid var(--iui-color-foreground-primary);
66
+ .iui-button:focus{
87
67
  outline-offset:-2px;
68
+ outline-width:2px;
88
69
  }
89
- @supports not selector(*:focus-visible){
90
- .iui-button.iui-default:focus{
91
- outline:2px solid var(--iui-color-foreground-primary);
92
- outline-offset:-2px;
93
- }
70
+ .iui-button[disabled], .iui-button:disabled, .iui-button[aria-disabled=true]{
71
+ --_iui-button-text-color:var(--iui-text-color-placeholder);
72
+ --_iui-button-background-color:var(--iui-color-background-disabled);
73
+ --_iui-button-border-color:var(--iui-color-background-disabled);
74
+ cursor:not-allowed;
75
+ outline-offset:-1px;
76
+ outline-width:1px;
77
+ outline-color:var(--iui-color-foreground-primary);
94
78
  }
95
- .iui-button.iui-default:hover, .iui-button.iui-default:active{
96
- background-color:#f2f2f2;
97
- border-color:black;
98
- background-color:var(--iui-color-background-1-overlay);
99
- border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
100
- }
101
- .iui-button.iui-default:hover .iui-notification-primary::before,
102
- .iui-button.iui-default:hover .iui-notification-positive::before,
103
- .iui-button.iui-default:hover .iui-notification-warning::before,
104
- .iui-button.iui-default:hover .iui-notification-negative::before, .iui-button.iui-default:active .iui-notification-primary::before,
105
- .iui-button.iui-default:active .iui-notification-positive::before,
106
- .iui-button.iui-default:active .iui-notification-warning::before,
107
- .iui-button.iui-default:active .iui-notification-negative::before{
108
- border-color:#f2f2f2;
109
- border-color:var(--iui-color-background-1-overlay);
79
+ .iui-button[data-iui-size=small]{
80
+ --_iui-button-gap:4px;
81
+ --_iui-button-height:27px;
82
+ --_iui-button-padding-inline:8px;
110
83
  }
111
- .iui-button.iui-default.iui-dropdown{
112
- padding-right:8px;
84
+ .iui-button[data-iui-size=large]{
85
+ font-size:16px;
86
+ --_iui-button-gap:12px;
87
+ --_iui-button-height:49px;
88
+ --_iui-button-padding-inline:24px;
89
+ }
90
+ .iui-button[data-iui-variant=borderless]{
91
+ --_iui-button-text-color:var(--iui-text-color);
92
+ --_iui-button-background-color:transparent;
93
+ --_iui-button-border-color:transparent;
94
+ --_iui-button-icon-margin-x:3px;
95
+ --_iui-button-gap:8px;
96
+ --_iui-button-height:38px;
97
+ --_iui-button-padding-inline:16px;
98
+ --_iui-button-padding-inline:8px;
99
+ }
100
+ .iui-button[data-iui-variant=borderless]:where(:hover, :active){
101
+ --_iui-button-text-color:var(--iui-color-foreground-body);
102
+ --_iui-button-background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
103
+ }
104
+ .iui-button[data-iui-variant=borderless]:where(:focus){
105
+ outline-offset:-1px;
106
+ outline-width:1px;
113
107
  }
114
- .iui-button.iui-default.iui-dropdown.iui-small{
115
- padding-right:4px;
108
+ .iui-button[data-iui-variant=borderless]:where([disabled], :disabled, [aria-disabled="true"]){
109
+ --_iui-button-text-color:var(--iui-text-color-placeholder);
110
+ --_iui-button-background-color:transparent;
111
+ --_iui-button-border-color:transparent;
116
112
  }
117
- .iui-button.iui-default.iui-dropdown.iui-large{
118
- padding-right:12px;
113
+ .iui-button[data-iui-variant=borderless][data-iui-size=small]{
114
+ --_iui-button-gap:4px;
115
+ --_iui-button-height:27px;
116
+ --_iui-button-padding-inline:8px;
117
+ --_iui-button-padding-inline:2px;
119
118
  }
120
- .iui-button.iui-default.iui-active:enabled{
121
- position:relative;
122
- color:#008ae0;
123
- color:var(--iui-color-foreground-primary);
119
+ .iui-button[data-iui-variant=borderless][data-iui-size=large]{
120
+ font-size:16px;
121
+ --_iui-button-gap:12px;
122
+ --_iui-button-height:49px;
123
+ --_iui-button-padding-inline:24px;
124
+ --_iui-button-padding-inline:12px;
124
125
  }
125
- .iui-button.iui-default.iui-active:enabled::before{
126
+ .iui-button[data-iui-active=true]{
127
+ --_iui-button-active-stripe-inset:initial;
128
+ --_iui-button-active-stripe-color:var(--iui-color-foreground-primary);
129
+ --_iui-button-text-color:var(--iui-color-foreground-primary);
130
+ --_iui-button-background-color:linear-gradient(
131
+ rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)),
132
+ rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6))
133
+ ),
134
+ linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
135
+ }
136
+ .iui-button[data-iui-active=true]::after{
126
137
  content:"";
127
138
  position:absolute;
128
- inset:0;
129
- background-color:rgba(0, 138, 224, 0.1);
130
- background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
139
+ inset:var(--_iui-button-active-stripe-inset);
140
+ background-color:var(--_iui-button-active-stripe-color);
131
141
  }
132
- .iui-button.iui-default[disabled], .iui-button.iui-default:disabled{
133
- cursor:not-allowed;
134
- background:#edeff2;
135
- border-color:#edeff2;
136
- color:rgba(0, 0, 0, 0.2);
137
- background:var(--iui-color-background-disabled);
138
- border-color:var(--iui-color-background-disabled);
139
- color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
140
- }
141
- .iui-button.iui-high-visibility{
142
- --_iui-button-text-color:var(--iui-color-foreground-accessory);
143
- background-color:#008ae0;
144
- border-color:#008ae0;
145
- color:white;
146
- background-color:var(--iui-color-background-primary);
147
- border-color:var(--iui-color-background-primary);
148
- color:var(--iui-color-foreground-accessory);
149
- color:var(--_iui-button-text-color);
142
+ .iui-button[data-iui-active=true][disabled], .iui-button[data-iui-active=true]:disabled, .iui-button[data-iui-active=true][aria-disabled=true]{
143
+ --_iui-button-active-stripe-color:var(--iui-text-color-placeholder);
144
+ --_iui-button-text-color:var(--iui-text-color-placeholder);
150
145
  }
151
- .iui-button.iui-high-visibility:focus-visible{
152
- outline:1px solid var(--iui-color-foreground-accessory);
153
- outline-offset:-3px;
146
+ .iui-button[data-iui-active=true][disabled], .iui-button[data-iui-active=true]:disabled, .iui-button[data-iui-active=true][aria-disabled=true]{
147
+ --_iui-button-background-color:var(--iui-color-background-disabled);
154
148
  }
155
- @supports not selector(*:focus-visible){
156
- .iui-button.iui-high-visibility:focus{
157
- outline:1px solid var(--iui-color-foreground-accessory);
158
- outline-offset:-3px;
159
- }
149
+ .iui-button[data-iui-active=true][data-iui-variant=borderless]{
150
+ --_iui-button-background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
160
151
  }
161
- .iui-button.iui-high-visibility:hover, .iui-button.iui-high-visibility:active{
162
- background-color:#006bad;
163
- border-color:#006bad;
164
- background-color:var(--iui-color-background-primary-overlay);
165
- border-color:var(--iui-color-background-primary-overlay);
152
+ .iui-button[data-iui-active=true][data-iui-variant=borderless]:where([disabled], :disabled, [aria-disabled="true"]){
153
+ --_iui-button-background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05);
166
154
  }
167
- .iui-button.iui-high-visibility[disabled], .iui-button.iui-high-visibility:disabled{
168
- cursor:not-allowed;
169
- background:#edeff2;
170
- border-color:#edeff2;
171
- color:rgba(0, 0, 0, 0.2);
172
- background:var(--iui-color-background-disabled);
173
- border-color:var(--iui-color-background-disabled);
174
- color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
175
- }
176
- .iui-button.iui-cta{
155
+ .iui-button[data-iui-variant=high-visibility]{
156
+ --_iui-button-background-color:var(--iui-color-background-primary);
177
157
  --_iui-button-text-color:var(--iui-color-foreground-accessory);
178
- background-color:#53a21a;
179
- border-color:#53a21a;
180
- color:white;
181
- background-color:var(--iui-color-background-positive);
182
- border-color:var(--iui-color-background-positive);
183
- color:var(--iui-color-foreground-accessory);
184
- color:var(--_iui-button-text-color);
158
+ --_iui-button-border-color:var(--_iui-button-background-color);
185
159
  }
186
- .iui-button.iui-cta:focus-visible{
187
- outline:1px solid var(--iui-color-foreground-accessory);
160
+ .iui-button[data-iui-variant=high-visibility]:hover, .iui-button[data-iui-variant=high-visibility]:active{
161
+ --_iui-button-background-color:var(--iui-color-background-primary-overlay);
162
+ }
163
+ .iui-button[data-iui-variant=high-visibility]:focus{
164
+ outline-color:var(--iui-color-foreground-accessory);
188
165
  outline-offset:-3px;
166
+ outline-width:1px;
189
167
  }
190
- @supports not selector(*:focus-visible){
191
- .iui-button.iui-cta:focus{
192
- outline:1px solid var(--iui-color-foreground-accessory);
193
- outline-offset:-3px;
194
- }
168
+ .iui-button[data-iui-variant=high-visibility][disabled], .iui-button[data-iui-variant=high-visibility]:disabled, .iui-button[data-iui-variant=high-visibility][aria-disabled=true]{
169
+ --_iui-button-background-color:var(--iui-color-background-disabled);
170
+ --_iui-button-text-color:var(--iui-text-color-placeholder);
171
+ outline-offset:-1px;
172
+ outline-width:1px;
173
+ outline-color:var(--iui-color-foreground-primary);
195
174
  }
196
- .iui-button.iui-cta:hover, .iui-button.iui-cta:active{
197
- background-color:#3d7613;
198
- border-color:#3d7613;
199
- background-color:var(--iui-color-background-positive-overlay);
200
- border-color:var(--iui-color-background-positive-overlay);
175
+ .iui-button[data-iui-variant=cta]{
176
+ --_iui-button-background-color:var(--iui-color-background-positive);
177
+ --_iui-button-text-color:var(--iui-color-foreground-accessory);
178
+ --_iui-button-border-color:var(--_iui-button-background-color);
201
179
  }
202
- .iui-button.iui-cta[disabled], .iui-button.iui-cta:disabled{
203
- cursor:not-allowed;
204
- background:#edeff2;
205
- border-color:#edeff2;
206
- color:rgba(0, 0, 0, 0.2);
207
- background:var(--iui-color-background-disabled);
208
- border-color:var(--iui-color-background-disabled);
209
- color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
210
- }
211
- .iui-button.iui-idea{
180
+ .iui-button[data-iui-variant=cta]:hover, .iui-button[data-iui-variant=cta]:active{
181
+ --_iui-button-background-color:var(--iui-color-background-positive-overlay);
182
+ }
183
+ .iui-button[data-iui-variant=cta]:focus{
184
+ outline-color:var(--iui-color-foreground-accessory);
185
+ outline-offset:-3px;
186
+ outline-width:1px;
187
+ }
188
+ .iui-button[data-iui-variant=cta][disabled], .iui-button[data-iui-variant=cta]:disabled, .iui-button[data-iui-variant=cta][aria-disabled=true]{
189
+ --_iui-button-background-color:var(--iui-color-background-disabled);
190
+ --_iui-button-text-color:var(--iui-text-color-placeholder);
191
+ outline-offset:-1px;
192
+ outline-width:1px;
193
+ outline-color:var(--iui-color-foreground-primary);
194
+ }
195
+ .iui-button[data-iui-variant=idea]{
196
+ --_iui-button-background-color:var(--iui-color-background-primary);
212
197
  --_iui-button-text-color:var(--iui-color-foreground-accessory);
213
- background-color:#008ae0;
214
- border-color:#008ae0;
215
- color:white;
216
- background-color:var(--iui-color-background-primary);
217
- border-color:var(--iui-color-background-primary);
218
- color:var(--iui-color-foreground-accessory);
219
- color:var(--_iui-button-text-color);
220
- border-radius:22px;
198
+ --_iui-button-border-color:var(--_iui-button-background-color);
199
+ border-radius:9999px;
221
200
  box-shadow:0 9px 46px rgba(0, 0, 0, 0.25);
222
201
  position:fixed;
223
202
  bottom:11px;
224
203
  right:16px;
225
204
  }
226
- .iui-button.iui-idea:focus-visible{
227
- outline:1px solid var(--iui-color-foreground-accessory);
205
+ .iui-button[data-iui-variant=idea]:hover, .iui-button[data-iui-variant=idea]:active{
206
+ --_iui-button-background-color:var(--iui-color-background-primary-overlay);
207
+ }
208
+ .iui-button[data-iui-variant=idea]:focus{
209
+ outline-color:var(--iui-color-foreground-accessory);
228
210
  outline-offset:-3px;
211
+ outline-width:1px;
229
212
  }
230
- @supports not selector(*:focus-visible){
231
- .iui-button.iui-idea:focus{
232
- outline:1px solid var(--iui-color-foreground-accessory);
233
- outline-offset:-3px;
234
- }
213
+ .iui-button[data-iui-variant=idea][disabled], .iui-button[data-iui-variant=idea]:disabled, .iui-button[data-iui-variant=idea][aria-disabled=true]{
214
+ --_iui-button-background-color:var(--iui-color-background-disabled);
215
+ --_iui-button-text-color:var(--iui-text-color-placeholder);
216
+ outline-offset:-1px;
217
+ outline-width:1px;
218
+ outline-color:var(--iui-color-foreground-primary);
235
219
  }
236
- .iui-button.iui-idea:hover, .iui-button.iui-idea:active{
237
- background-color:#006bad;
238
- border-color:#006bad;
239
- background-color:var(--iui-color-background-primary-overlay);
240
- border-color:var(--iui-color-background-primary-overlay);
220
+
221
+ .iui-button-icon{
222
+ width:16px;
223
+ height:16px;
224
+ transition:fill 0.2s ease-out;
225
+ fill:currentColor;
241
226
  }
242
- .iui-button.iui-idea[disabled], .iui-button.iui-idea:disabled{
243
- cursor:not-allowed;
244
- background:#edeff2;
245
- border-color:#edeff2;
246
- color:rgba(0, 0, 0, 0.2);
247
- background:var(--iui-color-background-disabled);
248
- border-color:var(--iui-color-background-disabled);
249
- color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
250
- }
251
- .iui-button.iui-borderless{
252
- border-color:transparent;
253
- background-color:transparent;
254
- padding:0 8px;
255
- height:38px;
256
- gap:8px;
257
- }
258
- .iui-button.iui-borderless > .iui-button-icon:only-child{
259
- margin-left:3px;
260
- margin-right:3px;
261
- }
262
- .iui-button.iui-borderless:hover{
263
- background-color:rgba(0, 0, 0, 0.1);
264
- border-color:transparent;
265
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
266
- border-color:transparent;
227
+ .iui-button-icon:only-child{
228
+ margin-left:var(--_iui-button-icon-margin-x);
229
+ margin-right:var(--_iui-button-icon-margin-x);
267
230
  }
268
- .iui-button.iui-borderless.iui-active{
269
- background-color:rgba(0, 138, 224, 0.1);
270
- color:#008ae0;
271
- background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
272
- color:var(--iui-color-foreground-primary);
273
- border-color:transparent;
231
+
232
+ .iui-button-dropdown{
233
+ --_iui-button-padding-inline:16px 8px;
274
234
  }
275
- .iui-button.iui-borderless[disabled], .iui-button.iui-borderless:disabled{
276
- cursor:not-allowed;
277
- background:#edeff2;
278
- border-color:#edeff2;
279
- color:rgba(0, 0, 0, 0.2);
280
- background:var(--iui-color-background-disabled);
281
- border-color:var(--iui-color-background-disabled);
282
- color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
283
- background-color:transparent;
284
- border-color:transparent;
285
- background-color:transparent;
286
- border-color:transparent;
287
- }
288
- .iui-button.iui-borderless[disabled].iui-active, .iui-button.iui-borderless:disabled.iui-active{
289
- background-color:rgba(0, 0, 0, 0.05);
290
- background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05);
291
- }
292
- .iui-button.iui-small{
293
- padding:0 8px;
294
- height:27px;
295
- gap:4px;
296
- }
297
- .iui-button.iui-small.iui-borderless{
298
- padding:0 2px;
299
- height:27px;
300
- gap:4px;
301
- }
302
- .iui-button.iui-large{
303
- padding:0 24px;
304
- height:49px;
305
- font-size:16px;
306
- gap:12px;
235
+ .iui-button-dropdown[data-iui-size=small]{
236
+ --_iui-button-padding-inline:8px 4px;
307
237
  }
308
- .iui-button.iui-large.iui-borderless{
309
- padding:0 12px;
310
- height:49px;
311
- font-size:16px;
312
- gap:12px;
238
+ .iui-button-dropdown[data-iui-size=large]{
239
+ --_iui-button-padding-inline:24px 12px;
313
240
  }
314
241
 
315
- .iui-button-group{
242
+ .iui-button-split{
316
243
  display:inline-flex;
317
244
  align-items:center;
318
245
  isolation:isolate;
246
+ pointer-events:none;
319
247
  }
320
- .iui-button-group > *{
248
+ .iui-button-split > *{
321
249
  display:flex;
322
250
  }
323
- .iui-button-group > * .iui-input-container, .iui-button-group > * .iui-button, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)){
251
+ .iui-button-split > * > *{
252
+ pointer-events:all;
253
+ }
254
+ .iui-button-split > * .iui-input-container, .iui-button-split > * .iui-button, .iui-button-split > * .iui-input:where(:not(.iui-input-container .iui-input)){
324
255
  position:relative;
325
256
  --_iui-button-active-stripe-inset:2px 2px calc(100% - 4px);
326
257
  }
327
- .iui-button-group > * .iui-input-container:hover, .iui-button-group > * .iui-button:hover, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)):hover{
258
+ .iui-button-split > * .iui-input-container:hover, .iui-button-split > * .iui-button:hover, .iui-button-split > * .iui-input:where(:not(.iui-input-container .iui-input)):hover{
328
259
  z-index:1;
329
260
  }
330
- .iui-button-group > * .iui-input-container:focus, .iui-button-group > * .iui-input-container:focus-within, .iui-button-group > * .iui-button:focus, .iui-button-group > * .iui-button:focus-within, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)):focus, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)):focus-within{
331
- z-index:2;
332
- }
333
- .iui-button-group > * .iui-input-container:disabled, .iui-button-group > * .iui-input-container.iui-disabled, .iui-button-group > * .iui-input-container[aria-disabled=true], .iui-button-group > * .iui-button:disabled, .iui-button-group > * .iui-button.iui-disabled, .iui-button-group > * .iui-button[aria-disabled=true], .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)):disabled, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)).iui-disabled, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input))[aria-disabled=true]{
261
+ .iui-button-split > * .iui-input-container:disabled, .iui-button-split > * .iui-input-container.iui-disabled, .iui-button-split > * .iui-input-container[aria-disabled=true], .iui-button-split > * .iui-button:disabled, .iui-button-split > * .iui-button.iui-disabled, .iui-button-split > * .iui-button[aria-disabled=true], .iui-button-split > * .iui-input:where(:not(.iui-input-container .iui-input)):disabled, .iui-button-split > * .iui-input:where(:not(.iui-input-container .iui-input)).iui-disabled, .iui-button-split > * .iui-input:where(:not(.iui-input-container .iui-input))[aria-disabled=true]{
334
262
  z-index:-1;
335
263
  }
336
- .iui-button-group > * .iui-input, .iui-button-group > * .iui-button:where(:not(.iui-borderless)){
264
+ .iui-button-split > * .iui-input-container:focus, .iui-button-split > * .iui-input-container:focus:where([aria-disabled="true"]), .iui-button-split > * .iui-input-container:focus-within, .iui-button-split > * .iui-input-container:focus-within:where([aria-disabled="true"]), .iui-button-split > * .iui-button:focus, .iui-button-split > * .iui-button:focus:where([aria-disabled="true"]), .iui-button-split > * .iui-button:focus-within, .iui-button-split > * .iui-button:focus-within:where([aria-disabled="true"]), .iui-button-split > * .iui-input:where(:not(.iui-input-container .iui-input)):focus, .iui-button-split > * .iui-input:where(:not(.iui-input-container .iui-input)):focus:where([aria-disabled="true"]), .iui-button-split > * .iui-input:where(:not(.iui-input-container .iui-input)):focus-within, .iui-button-split > * .iui-input:where(:not(.iui-input-container .iui-input)):focus-within:where([aria-disabled="true"]){
265
+ z-index:2;
266
+ }
267
+ .iui-button-split > * .iui-input, .iui-button-split > * .iui-button:where(:not([data-iui-variant="borderless"])){
337
268
  border-radius:0;
338
269
  transition-duration:0ms;
339
270
  }
340
- .iui-button-group > * .iui-input:hover, .iui-button-group > * .iui-input:focus, .iui-button-group > * .iui-button:where(:not(.iui-borderless)):hover, .iui-button-group > * .iui-button:where(:not(.iui-borderless)):focus{
271
+ .iui-button-split > * .iui-input:hover, .iui-button-split > * .iui-input:focus, .iui-button-split > * .iui-button:where(:not([data-iui-variant="borderless"])):hover, .iui-button-split > * .iui-button:where(:not([data-iui-variant="borderless"])):focus{
341
272
  transition-duration:0.2s;
342
273
  }
343
- .iui-button-group > *:first-child .iui-input, .iui-button-group > *:first-child .iui-button:where(:not(.iui-borderless)){
274
+ .iui-button-split > *:first-child .iui-input, .iui-button-split > *:first-child .iui-button:where(:not([data-iui-variant="borderless"])){
344
275
  border-top-left-radius:4px;
345
276
  border-bottom-left-radius:4px;
346
277
  }
347
- .iui-button-group > *:last-child .iui-input, .iui-button-group > *:last-child .iui-button:where(:not(.iui-borderless)){
278
+ .iui-button-split > *:last-child .iui-input, .iui-button-split > *:last-child .iui-button:where(:not([data-iui-variant="borderless"])){
348
279
  border-bottom-right-radius:4px;
349
280
  border-top-right-radius:4px;
350
281
  }
351
- .iui-button-group > * + *{
282
+ .iui-button-split > * + *{
352
283
  margin-left:-1px;
353
284
  }
354
- .iui-button-group > *:not(:first-child) :where(.iui-button.iui-default):disabled, .iui-button-group > *:not(:first-child) :where(.iui-button.iui-default).iui-disabled, .iui-button-group > *:not(:first-child) :where(.iui-button.iui-default)[aria-disabled=true]{
285
+ .iui-button-split > *:not(:first-child) :not([data-iui-variant=borderless]):disabled, .iui-button-split > *:not(:first-child) :not([data-iui-variant=borderless]).iui-disabled, .iui-button-split > *:not(:first-child) :not([data-iui-variant=borderless])[aria-disabled=true]{
355
286
  border-left-color:var(--iui-color-background-4);
356
287
  }
357
- .iui-button-group-vertical{
288
+ .iui-button-split:hover{
289
+ background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
290
+ }
291
+ .iui-button-split > *:last-child > .iui-button{
292
+ --_iui-button-padding-inline:4px;
293
+ }
294
+ .iui-button-split > *:last-child > [data-iui-size=small]{
295
+ --_iui-button-padding-inline:2px;
296
+ }
297
+ .iui-button-split > *:last-child > [data-iui-size=large]{
298
+ --_iui-button-padding-inline:8px;
299
+ }
300
+ .iui-button-split > *:first-child > [data-iui-variant=high-visibility],
301
+ .iui-button-split > *:first-child > [data-iui-variant=cta]{
302
+ border-right-color:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-4));
303
+ }
304
+ .iui-button-split > *:last-child > [data-iui-variant=high-visibility],
305
+ .iui-button-split > *:last-child > [data-iui-variant=cta]{
306
+ border-left-color:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-4));
307
+ }
308
+
309
+ .iui-button-group{
358
310
  display:inline-flex;
359
311
  align-items:center;
360
312
  isolation:isolate;
361
- flex-direction:column;
362
- max-height:100%;
313
+ pointer-events:none;
363
314
  }
364
- .iui-button-group-vertical > *{
315
+ .iui-button-group > *{
365
316
  display:flex;
366
317
  }
367
- .iui-button-group-vertical > * .iui-input-container, .iui-button-group-vertical > * .iui-button, .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input)){
318
+ .iui-button-group > * > *{
319
+ pointer-events:all;
320
+ }
321
+ .iui-button-group > * .iui-input-container, .iui-button-group > * .iui-button, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)){
368
322
  position:relative;
369
- --_iui-button-active-stripe-inset:2px calc(100% - 4px) 2px 2px;
323
+ --_iui-button-active-stripe-inset:2px 2px calc(100% - 4px);
370
324
  }
371
- .iui-button-group-vertical > * .iui-input-container:hover, .iui-button-group-vertical > * .iui-button:hover, .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input)):hover{
325
+ .iui-button-group > * .iui-input-container:hover, .iui-button-group > * .iui-button:hover, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)):hover{
372
326
  z-index:1;
373
327
  }
374
- .iui-button-group-vertical > * .iui-input-container:focus, .iui-button-group-vertical > * .iui-input-container:focus-within, .iui-button-group-vertical > * .iui-button:focus, .iui-button-group-vertical > * .iui-button:focus-within, .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input)):focus, .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input)):focus-within{
375
- z-index:2;
376
- }
377
- .iui-button-group-vertical > * .iui-input-container:disabled, .iui-button-group-vertical > * .iui-input-container.iui-disabled, .iui-button-group-vertical > * .iui-input-container[aria-disabled=true], .iui-button-group-vertical > * .iui-button:disabled, .iui-button-group-vertical > * .iui-button.iui-disabled, .iui-button-group-vertical > * .iui-button[aria-disabled=true], .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input)):disabled, .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input)).iui-disabled, .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input))[aria-disabled=true]{
328
+ .iui-button-group > * .iui-input-container:disabled, .iui-button-group > * .iui-input-container.iui-disabled, .iui-button-group > * .iui-input-container[aria-disabled=true], .iui-button-group > * .iui-button:disabled, .iui-button-group > * .iui-button.iui-disabled, .iui-button-group > * .iui-button[aria-disabled=true], .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)):disabled, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)).iui-disabled, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input))[aria-disabled=true]{
378
329
  z-index:-1;
379
330
  }
380
- .iui-button-group-vertical > * .iui-input, .iui-button-group-vertical > * .iui-button:where(:not(.iui-borderless)){
331
+ .iui-button-group > * .iui-input-container:focus, .iui-button-group > * .iui-input-container:focus:where([aria-disabled="true"]), .iui-button-group > * .iui-input-container:focus-within, .iui-button-group > * .iui-input-container:focus-within:where([aria-disabled="true"]), .iui-button-group > * .iui-button:focus, .iui-button-group > * .iui-button:focus:where([aria-disabled="true"]), .iui-button-group > * .iui-button:focus-within, .iui-button-group > * .iui-button:focus-within:where([aria-disabled="true"]), .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)):focus, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)):focus:where([aria-disabled="true"]), .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)):focus-within, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)):focus-within:where([aria-disabled="true"]){
332
+ z-index:2;
333
+ }
334
+ .iui-button-group > * .iui-input, .iui-button-group > * .iui-button:where(:not([data-iui-variant="borderless"])){
381
335
  border-radius:0;
382
336
  transition-duration:0ms;
383
337
  }
384
- .iui-button-group-vertical > * .iui-input:hover, .iui-button-group-vertical > * .iui-input:focus, .iui-button-group-vertical > * .iui-button:where(:not(.iui-borderless)):hover, .iui-button-group-vertical > * .iui-button:where(:not(.iui-borderless)):focus{
338
+ .iui-button-group > * .iui-input:hover, .iui-button-group > * .iui-input:focus, .iui-button-group > * .iui-button:where(:not([data-iui-variant="borderless"])):hover, .iui-button-group > * .iui-button:where(:not([data-iui-variant="borderless"])):focus{
385
339
  transition-duration:0.2s;
386
340
  }
387
- .iui-button-group-vertical > *:first-child .iui-input, .iui-button-group-vertical > *:first-child .iui-button:where(:not(.iui-borderless)){
341
+ .iui-button-group > *:first-child .iui-input, .iui-button-group > *:first-child .iui-button:where(:not([data-iui-variant="borderless"])){
388
342
  border-top-left-radius:4px;
389
- border-top-right-radius:4px;
390
- }
391
- .iui-button-group-vertical > *:last-child .iui-input, .iui-button-group-vertical > *:last-child .iui-button:where(:not(.iui-borderless)){
392
- border-bottom-right-radius:4px;
393
343
  border-bottom-left-radius:4px;
394
344
  }
395
- .iui-button-group-vertical > * + *{
396
- margin-top:-1px;
345
+ .iui-button-group > *:last-child .iui-input, .iui-button-group > *:last-child .iui-button:where(:not([data-iui-variant="borderless"])){
346
+ border-bottom-right-radius:4px;
347
+ border-top-right-radius:4px;
397
348
  }
398
- .iui-button-group-vertical > *:not(:first-child) :where(.iui-button.iui-default):disabled, .iui-button-group-vertical > *:not(:first-child) :where(.iui-button.iui-default).iui-disabled, .iui-button-group-vertical > *:not(:first-child) :where(.iui-button.iui-default)[aria-disabled=true]{
399
- border-top-color:var(--iui-color-background-4);
349
+ .iui-button-group > * + *{
350
+ margin-left:-1px;
400
351
  }
401
- .iui-button-group-overflow-x{
402
- width:100%;
352
+ .iui-button-group > *:not(:first-child) :not([data-iui-variant=borderless]):disabled, .iui-button-group > *:not(:first-child) :not([data-iui-variant=borderless]).iui-disabled, .iui-button-group > *:not(:first-child) :not([data-iui-variant=borderless])[aria-disabled=true]{
353
+ border-left-color:var(--iui-color-background-4);
403
354
  }
404
355
 
405
- .iui-button-split-menu{
356
+ .iui-button-group-vertical{
406
357
  display:inline-flex;
407
358
  align-items:center;
408
359
  isolation:isolate;
360
+ pointer-events:none;
361
+ flex-direction:column;
362
+ max-height:100%;
409
363
  }
410
- .iui-button-split-menu > *{
364
+ .iui-button-group-vertical > *{
411
365
  display:flex;
412
366
  }
413
- .iui-button-split-menu > * .iui-input-container, .iui-button-split-menu > * .iui-button, .iui-button-split-menu > * .iui-input:where(:not(.iui-input-container .iui-input)){
367
+ .iui-button-group-vertical > * > *{
368
+ pointer-events:all;
369
+ }
370
+ .iui-button-group-vertical > * .iui-input-container, .iui-button-group-vertical > * .iui-button, .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input)){
414
371
  position:relative;
415
- --_iui-button-active-stripe-inset:2px 2px calc(100% - 4px);
372
+ --_iui-button-active-stripe-inset:2px calc(100% - 4px) 2px 2px;
416
373
  }
417
- .iui-button-split-menu > * .iui-input-container:hover, .iui-button-split-menu > * .iui-button:hover, .iui-button-split-menu > * .iui-input:where(:not(.iui-input-container .iui-input)):hover{
374
+ .iui-button-group-vertical > * .iui-input-container:hover, .iui-button-group-vertical > * .iui-button:hover, .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input)):hover{
418
375
  z-index:1;
419
376
  }
420
- .iui-button-split-menu > * .iui-input-container:focus, .iui-button-split-menu > * .iui-input-container:focus-within, .iui-button-split-menu > * .iui-button:focus, .iui-button-split-menu > * .iui-button:focus-within, .iui-button-split-menu > * .iui-input:where(:not(.iui-input-container .iui-input)):focus, .iui-button-split-menu > * .iui-input:where(:not(.iui-input-container .iui-input)):focus-within{
421
- z-index:2;
422
- }
423
- .iui-button-split-menu > * .iui-input-container:disabled, .iui-button-split-menu > * .iui-input-container.iui-disabled, .iui-button-split-menu > * .iui-input-container[aria-disabled=true], .iui-button-split-menu > * .iui-button:disabled, .iui-button-split-menu > * .iui-button.iui-disabled, .iui-button-split-menu > * .iui-button[aria-disabled=true], .iui-button-split-menu > * .iui-input:where(:not(.iui-input-container .iui-input)):disabled, .iui-button-split-menu > * .iui-input:where(:not(.iui-input-container .iui-input)).iui-disabled, .iui-button-split-menu > * .iui-input:where(:not(.iui-input-container .iui-input))[aria-disabled=true]{
377
+ .iui-button-group-vertical > * .iui-input-container:disabled, .iui-button-group-vertical > * .iui-input-container.iui-disabled, .iui-button-group-vertical > * .iui-input-container[aria-disabled=true], .iui-button-group-vertical > * .iui-button:disabled, .iui-button-group-vertical > * .iui-button.iui-disabled, .iui-button-group-vertical > * .iui-button[aria-disabled=true], .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input)):disabled, .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input)).iui-disabled, .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input))[aria-disabled=true]{
424
378
  z-index:-1;
425
379
  }
426
- .iui-button-split-menu > * .iui-input, .iui-button-split-menu > * .iui-button:where(:not(.iui-borderless)){
380
+ .iui-button-group-vertical > * .iui-input-container:focus, .iui-button-group-vertical > * .iui-input-container:focus:where([aria-disabled="true"]), .iui-button-group-vertical > * .iui-input-container:focus-within, .iui-button-group-vertical > * .iui-input-container:focus-within:where([aria-disabled="true"]), .iui-button-group-vertical > * .iui-button:focus, .iui-button-group-vertical > * .iui-button:focus:where([aria-disabled="true"]), .iui-button-group-vertical > * .iui-button:focus-within, .iui-button-group-vertical > * .iui-button:focus-within:where([aria-disabled="true"]), .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input)):focus, .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input)):focus:where([aria-disabled="true"]), .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input)):focus-within, .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input)):focus-within:where([aria-disabled="true"]){
381
+ z-index:2;
382
+ }
383
+ .iui-button-group-vertical > * .iui-input, .iui-button-group-vertical > * .iui-button:where(:not([data-iui-variant="borderless"])){
427
384
  border-radius:0;
428
385
  transition-duration:0ms;
429
386
  }
430
- .iui-button-split-menu > * .iui-input:hover, .iui-button-split-menu > * .iui-input:focus, .iui-button-split-menu > * .iui-button:where(:not(.iui-borderless)):hover, .iui-button-split-menu > * .iui-button:where(:not(.iui-borderless)):focus{
387
+ .iui-button-group-vertical > * .iui-input:hover, .iui-button-group-vertical > * .iui-input:focus, .iui-button-group-vertical > * .iui-button:where(:not([data-iui-variant="borderless"])):hover, .iui-button-group-vertical > * .iui-button:where(:not([data-iui-variant="borderless"])):focus{
431
388
  transition-duration:0.2s;
432
389
  }
433
- .iui-button-split-menu > *:first-child .iui-input, .iui-button-split-menu > *:first-child .iui-button:where(:not(.iui-borderless)){
390
+ .iui-button-group-vertical > *:first-child .iui-input, .iui-button-group-vertical > *:first-child .iui-button:where(:not([data-iui-variant="borderless"])){
434
391
  border-top-left-radius:4px;
435
- border-bottom-left-radius:4px;
436
- }
437
- .iui-button-split-menu > *:last-child .iui-input, .iui-button-split-menu > *:last-child .iui-button:where(:not(.iui-borderless)){
438
- border-bottom-right-radius:4px;
439
392
  border-top-right-radius:4px;
440
393
  }
441
- .iui-button-split-menu > * + *{
442
- margin-left:-1px;
443
- }
444
- .iui-button-split-menu > *:not(:first-child) :where(.iui-button.iui-default):disabled, .iui-button-split-menu > *:not(:first-child) :where(.iui-button.iui-default).iui-disabled, .iui-button-split-menu > *:not(:first-child) :where(.iui-button.iui-default)[aria-disabled=true]{
445
- border-left-color:var(--iui-color-background-4);
446
- }
447
- .iui-button-split-menu:hover{
448
- background-color:rgba(0, 0, 0, 0.1);
449
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
450
- }
451
- .iui-button-split-menu > *:first-child > .iui-borderless:hover{
452
- background-color:transparent;
453
- }
454
- .iui-button-split-menu > *:last-child > .iui-button{
455
- padding:4px;
456
- }
457
- .iui-button-split-menu > *:last-child > .iui-small{
458
- padding:2px;
459
- }
460
- .iui-button-split-menu > *:last-child > .iui-large{
461
- padding:8px;
462
- }
463
- .iui-button-split-menu > *:first-child > .iui-high-visibility,
464
- .iui-button-split-menu > *:first-child > .iui-cta{
465
- border-right-color:rgba(255, 255, 255, 0.4);
466
- border-right-color:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-4));
467
- }
468
- .iui-button-split-menu > *:last-child > .iui-high-visibility,
469
- .iui-button-split-menu > *:last-child > .iui-cta{
470
- border-left-color:rgba(255, 255, 255, 0.4);
471
- border-left-color:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-4));
394
+ .iui-button-group-vertical > *:last-child .iui-input, .iui-button-group-vertical > *:last-child .iui-button:where(:not([data-iui-variant="borderless"])){
395
+ border-bottom-right-radius:4px;
396
+ border-bottom-left-radius:4px;
472
397
  }
473
- .iui-button-split-menu.iui-disabled{
474
- background-color:transparent;
475
- background-color:transparent;
398
+ .iui-button-group-vertical > * + *{
399
+ margin-top:-1px;
476
400
  }
477
- .iui-button-split-menu[disabled], .iui-button-split-menu:disabled{
478
- cursor:not-allowed;
479
- background:#edeff2;
480
- border-color:#edeff2;
481
- color:rgba(0, 0, 0, 0.2);
482
- background:var(--iui-color-background-disabled);
483
- border-color:var(--iui-color-background-disabled);
484
- color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
401
+ .iui-button-group-vertical > *:not(:first-child) :not([data-iui-variant=borderless]):disabled, .iui-button-group-vertical > *:not(:first-child) :not([data-iui-variant=borderless]).iui-disabled, .iui-button-group-vertical > *:not(:first-child) :not([data-iui-variant=borderless])[aria-disabled=true]{
402
+ border-top-color:var(--iui-color-background-4);
485
403
  }
486
404
 
487
- .iui-button-icon{
488
- width:16px;
489
- height:16px;
490
- transition:fill 0.2s ease-out;
491
- fill:currentColor;
405
+ .iui-button-group-overflow-x{
406
+ width:100%;
492
407
  }