@itwin/itwinui-css 0.48.2 → 0.50.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/css/all.css +74 -16
  2. package/css/button.css +40 -8
  3. package/css/carousel.css +23 -7
  4. package/css/modal.css +2 -1
  5. package/css/table.css +9 -0
  6. package/package.json +1 -1
  7. package/scss/button/button-group.scss +38 -8
  8. package/scss/button/classes.scss +4 -0
  9. package/scss/carousel/carousel.scss +13 -5
  10. package/scss/modal/modal.scss +1 -0
  11. package/scss/table/table.scss +16 -0
package/css/all.css CHANGED
@@ -910,7 +910,8 @@ html.iui-theme-dark{
910
910
  .iui-button-group{
911
911
  display:inline-flex;
912
912
  align-items:center;
913
- isolation:isolate; }
913
+ isolation:isolate;
914
+ max-width:100%; }
914
915
  .iui-button-group > *{
915
916
  display:flex; }
916
917
  .iui-button-group > * .iui-input-container, .iui-button-group > * .iui-button, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)){
@@ -931,18 +932,50 @@ html.iui-theme-dark{
931
932
  border-top-left-radius:3px;
932
933
  border-bottom-left-radius:3px; }
933
934
  .iui-button-group > *:last-child .iui-input, .iui-button-group > *:last-child .iui-button:where(:not(.iui-borderless)){
934
- border-top-right-radius:3px;
935
- border-bottom-right-radius:3px; }
935
+ border-bottom-right-radius:3px;
936
+ border-top-right-radius:3px; }
936
937
  .iui-button-group > * + *{
937
938
  margin-left:-1px; }
938
939
  .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"]{
939
- border-left-color:#DCE0E3;
940
940
  border-left-color:var(--iui-color-background-4); }
941
+ .iui-button-group-vertical{
942
+ display:inline-flex;
943
+ align-items:center;
944
+ isolation:isolate;
945
+ flex-direction:column;
946
+ max-height:100%; }
947
+ .iui-button-group-vertical > *{
948
+ display:flex; }
949
+ .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)){
950
+ position:relative;
951
+ --_iui-button-active-stripe-inset:2px calc(100% - 4px) 2px 2px; }
952
+ .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{
953
+ z-index:1; }
954
+ .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{
955
+ z-index:2; }
956
+ .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"]{
957
+ z-index:-1; }
958
+ .iui-button-group-vertical > * .iui-input, .iui-button-group-vertical > * .iui-button:where(:not(.iui-borderless)){
959
+ border-radius:0;
960
+ transition-duration:0ms; }
961
+ .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{
962
+ transition-duration:0.2s; }
963
+ .iui-button-group-vertical > *:first-child .iui-input, .iui-button-group-vertical > *:first-child .iui-button:where(:not(.iui-borderless)){
964
+ border-top-left-radius:3px;
965
+ border-top-right-radius:3px; }
966
+ .iui-button-group-vertical > *:last-child .iui-input, .iui-button-group-vertical > *:last-child .iui-button:where(:not(.iui-borderless)){
967
+ border-bottom-right-radius:3px;
968
+ border-bottom-left-radius:3px; }
969
+ .iui-button-group-vertical > * + *{
970
+ margin-top:-1px; }
971
+ .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"]{
972
+ border-top-color:var(--iui-color-background-4); }
941
973
 
942
974
  .iui-button-split-menu{
943
975
  display:inline-flex;
944
976
  align-items:center;
945
- isolation:isolate; }
977
+ isolation:isolate;
978
+ max-width:100%; }
946
979
  .iui-button-split-menu > *{
947
980
  display:flex; }
948
981
  .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)){
@@ -963,12 +996,11 @@ html.iui-theme-dark{
963
996
  border-top-left-radius:3px;
964
997
  border-bottom-left-radius:3px; }
965
998
  .iui-button-split-menu > *:last-child .iui-input, .iui-button-split-menu > *:last-child .iui-button:where(:not(.iui-borderless)){
966
- border-top-right-radius:3px;
967
- border-bottom-right-radius:3px; }
999
+ border-bottom-right-radius:3px;
1000
+ border-top-right-radius:3px; }
968
1001
  .iui-button-split-menu > * + *{
969
1002
  margin-left:-1px; }
970
1003
  .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"]{
971
- border-left-color:#DCE0E3;
972
1004
  border-left-color:var(--iui-color-background-4); }
973
1005
  .iui-button-split-menu:hover{
974
1006
  background-color:rgba(0, 0, 0, 0.1);
@@ -1020,16 +1052,25 @@ html.iui-theme-dark{
1020
1052
 
1021
1053
  .iui-carousel-slider{
1022
1054
  display:flex;
1055
+ gap:8px;
1023
1056
  list-style:none;
1024
1057
  margin:0;
1025
- padding:0; }
1058
+ padding:0;
1059
+ overflow-x:auto;
1060
+ overflow-x:overlay;
1061
+ -ms-scroll-snap-type:x mandatory;
1062
+ scroll-snap-type:x mandatory;
1063
+ scrollbar-width:none; }
1026
1064
  @media (prefers-reduced-motion: no-preference){
1027
1065
  .iui-carousel-slider{
1028
- transition:transform 0.8s ease-in-out; } }
1066
+ scroll-behavior:smooth; } }
1067
+ .iui-carousel-slider::-webkit-scrollbar{
1068
+ display:none; }
1029
1069
  .iui-carousel-slider-item{
1030
1070
  width:100%;
1031
1071
  flex-shrink:0;
1032
- box-sizing:border-box; }
1072
+ box-sizing:border-box;
1073
+ scroll-snap-align:center; }
1033
1074
 
1034
1075
  .iui-carousel-navigation{
1035
1076
  display:flex;
@@ -1074,7 +1115,16 @@ html.iui-theme-dark{
1074
1115
  background-color:rgba(0, 0, 0, 0.6);
1075
1116
  background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3)); }
1076
1117
  .iui-carousel-navigation-dot.iui-invisible{
1077
- display:none; }
1118
+ -webkit-clip-path:inset(50%);
1119
+ clip-path:inset(50%);
1120
+ overflow:hidden;
1121
+ position:absolute;
1122
+ white-space:nowrap;
1123
+ height:1px;
1124
+ width:1px;
1125
+ padding:0;
1126
+ margin:-1px;
1127
+ border-width:0; }
1078
1128
  .iui-carousel-navigation-dot::after{
1079
1129
  content:'';
1080
1130
  display:block;
@@ -1092,9 +1142,7 @@ html.iui-theme-dark{
1092
1142
  .iui-carousel-navigation-dot.iui-second::after{
1093
1143
  transform:scale(0.75); }
1094
1144
  .iui-carousel-navigation-dot.iui-invisible::after{
1095
- transform:scale(0);
1096
- background-color:rgba(0, 0, 0, 0);
1097
- background-color:rgba(var(--iui-color-foreground-body-rgb), 0); }
1145
+ transform:scale(0); }
1098
1146
  .iui-carousel-navigation-dot.iui-active::after{
1099
1147
  background-color:#008BE1;
1100
1148
  background-color:var(--iui-color-foreground-primary); }
@@ -3887,7 +3935,8 @@ html.iui-theme-dark{
3887
3935
  font-size:18px;
3888
3936
  white-space:nowrap;
3889
3937
  overflow:hidden;
3890
- text-overflow:ellipsis; }
3938
+ text-overflow:ellipsis;
3939
+ line-height:1.5; }
3891
3940
  .iui-modal > .iui-modal-dialog .iui-button-bar{
3892
3941
  margin-top:11px;
3893
3942
  display:flex;
@@ -4855,6 +4904,9 @@ html.iui-theme-dark{
4855
4904
  outline-offset:-1px; } }
4856
4905
  .iui-table-header .iui-cell:not(.iui-slot).iui-actionable{
4857
4906
  cursor:pointer; }
4907
+ .iui-table-header .iui-cell:not(.iui-slot).iui-grabbing{
4908
+ cursor:-webkit-grabbing;
4909
+ cursor:grabbing; }
4858
4910
  .iui-table-header .iui-cell:not(.iui-slot) > .iui-filter-button{
4859
4911
  margin-left:4px;
4860
4912
  margin-right:8px; }
@@ -4894,6 +4946,12 @@ html.iui-theme-dark{
4894
4946
  .iui-table-header .iui-cell:not(.iui-slot):focus .iui-filter-button, .iui-table-header .iui-cell:not(.iui-slot):focus-within .iui-sort,
4895
4947
  .iui-table-header .iui-cell:not(.iui-slot):focus-within .iui-filter-button{
4896
4948
  visibility:visible; }
4949
+ .iui-table-header .iui-reorder-column-right{
4950
+ border-right:2px solid #008BE1;
4951
+ border-right:2px solid var(--iui-color-foreground-primary); }
4952
+ .iui-table-header .iui-reorder-column-left{
4953
+ border-left:2px solid #008BE1;
4954
+ border-left:2px solid var(--iui-color-foreground-primary); }
4897
4955
  .iui-table-header .iui-sort{
4898
4956
  visibility:hidden;
4899
4957
  fill:rgba(0, 0, 0, 0.4);
package/css/button.css CHANGED
@@ -268,7 +268,8 @@
268
268
  .iui-button-group{
269
269
  display:inline-flex;
270
270
  align-items:center;
271
- isolation:isolate; }
271
+ isolation:isolate;
272
+ max-width:100%; }
272
273
  .iui-button-group > *{
273
274
  display:flex; }
274
275
  .iui-button-group > * .iui-input-container, .iui-button-group > * .iui-button, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)){
@@ -289,18 +290,50 @@
289
290
  border-top-left-radius:3px;
290
291
  border-bottom-left-radius:3px; }
291
292
  .iui-button-group > *:last-child .iui-input, .iui-button-group > *:last-child .iui-button:where(:not(.iui-borderless)){
292
- border-top-right-radius:3px;
293
- border-bottom-right-radius:3px; }
293
+ border-bottom-right-radius:3px;
294
+ border-top-right-radius:3px; }
294
295
  .iui-button-group > * + *{
295
296
  margin-left:-1px; }
296
297
  .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"]{
297
- border-left-color:#DCE0E3;
298
298
  border-left-color:var(--iui-color-background-4); }
299
+ .iui-button-group-vertical{
300
+ display:inline-flex;
301
+ align-items:center;
302
+ isolation:isolate;
303
+ flex-direction:column;
304
+ max-height:100%; }
305
+ .iui-button-group-vertical > *{
306
+ display:flex; }
307
+ .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)){
308
+ position:relative;
309
+ --_iui-button-active-stripe-inset:2px calc(100% - 4px) 2px 2px; }
310
+ .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{
311
+ z-index:1; }
312
+ .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{
313
+ z-index:2; }
314
+ .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"]{
315
+ z-index:-1; }
316
+ .iui-button-group-vertical > * .iui-input, .iui-button-group-vertical > * .iui-button:where(:not(.iui-borderless)){
317
+ border-radius:0;
318
+ transition-duration:0ms; }
319
+ .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{
320
+ transition-duration:0.2s; }
321
+ .iui-button-group-vertical > *:first-child .iui-input, .iui-button-group-vertical > *:first-child .iui-button:where(:not(.iui-borderless)){
322
+ border-top-left-radius:3px;
323
+ border-top-right-radius:3px; }
324
+ .iui-button-group-vertical > *:last-child .iui-input, .iui-button-group-vertical > *:last-child .iui-button:where(:not(.iui-borderless)){
325
+ border-bottom-right-radius:3px;
326
+ border-bottom-left-radius:3px; }
327
+ .iui-button-group-vertical > * + *{
328
+ margin-top:-1px; }
329
+ .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"]{
330
+ border-top-color:var(--iui-color-background-4); }
299
331
 
300
332
  .iui-button-split-menu{
301
333
  display:inline-flex;
302
334
  align-items:center;
303
- isolation:isolate; }
335
+ isolation:isolate;
336
+ max-width:100%; }
304
337
  .iui-button-split-menu > *{
305
338
  display:flex; }
306
339
  .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)){
@@ -321,12 +354,11 @@
321
354
  border-top-left-radius:3px;
322
355
  border-bottom-left-radius:3px; }
323
356
  .iui-button-split-menu > *:last-child .iui-input, .iui-button-split-menu > *:last-child .iui-button:where(:not(.iui-borderless)){
324
- border-top-right-radius:3px;
325
- border-bottom-right-radius:3px; }
357
+ border-bottom-right-radius:3px;
358
+ border-top-right-radius:3px; }
326
359
  .iui-button-split-menu > * + *{
327
360
  margin-left:-1px; }
328
361
  .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"]{
329
- border-left-color:#DCE0E3;
330
362
  border-left-color:var(--iui-color-background-4); }
331
363
  .iui-button-split-menu:hover{
332
364
  background-color:rgba(0, 0, 0, 0.1);
package/css/carousel.css CHANGED
@@ -15,16 +15,25 @@
15
15
 
16
16
  .iui-carousel-slider{
17
17
  display:flex;
18
+ gap:8px;
18
19
  list-style:none;
19
20
  margin:0;
20
- padding:0; }
21
+ padding:0;
22
+ overflow-x:auto;
23
+ overflow-x:overlay;
24
+ -ms-scroll-snap-type:x mandatory;
25
+ scroll-snap-type:x mandatory;
26
+ scrollbar-width:none; }
21
27
  @media (prefers-reduced-motion: no-preference){
22
28
  .iui-carousel-slider{
23
- transition:transform 0.8s ease-in-out; } }
29
+ scroll-behavior:smooth; } }
30
+ .iui-carousel-slider::-webkit-scrollbar{
31
+ display:none; }
24
32
  .iui-carousel-slider-item{
25
33
  width:100%;
26
34
  flex-shrink:0;
27
- box-sizing:border-box; }
35
+ box-sizing:border-box;
36
+ scroll-snap-align:center; }
28
37
 
29
38
  .iui-carousel-navigation{
30
39
  display:flex;
@@ -69,7 +78,16 @@
69
78
  background-color:rgba(0, 0, 0, 0.6);
70
79
  background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3)); }
71
80
  .iui-carousel-navigation-dot.iui-invisible{
72
- display:none; }
81
+ -webkit-clip-path:inset(50%);
82
+ clip-path:inset(50%);
83
+ overflow:hidden;
84
+ position:absolute;
85
+ white-space:nowrap;
86
+ height:1px;
87
+ width:1px;
88
+ padding:0;
89
+ margin:-1px;
90
+ border-width:0; }
73
91
  .iui-carousel-navigation-dot::after{
74
92
  content:'';
75
93
  display:block;
@@ -87,9 +105,7 @@
87
105
  .iui-carousel-navigation-dot.iui-second::after{
88
106
  transform:scale(0.75); }
89
107
  .iui-carousel-navigation-dot.iui-invisible::after{
90
- transform:scale(0);
91
- background-color:rgba(0, 0, 0, 0);
92
- background-color:rgba(var(--iui-color-foreground-body-rgb), 0); }
108
+ transform:scale(0); }
93
109
  .iui-carousel-navigation-dot.iui-active::after{
94
110
  background-color:#008BE1;
95
111
  background-color:var(--iui-color-foreground-primary); }
package/css/modal.css CHANGED
@@ -47,7 +47,8 @@
47
47
  font-size:18px;
48
48
  white-space:nowrap;
49
49
  overflow:hidden;
50
- text-overflow:ellipsis; }
50
+ text-overflow:ellipsis;
51
+ line-height:1.5; }
51
52
  .iui-modal > .iui-modal-dialog .iui-button-bar{
52
53
  margin-top:11px;
53
54
  display:flex;
package/css/table.css CHANGED
@@ -63,6 +63,9 @@
63
63
  outline-offset:-1px; } }
64
64
  .iui-table-header .iui-cell:not(.iui-slot).iui-actionable{
65
65
  cursor:pointer; }
66
+ .iui-table-header .iui-cell:not(.iui-slot).iui-grabbing{
67
+ cursor:-webkit-grabbing;
68
+ cursor:grabbing; }
66
69
  .iui-table-header .iui-cell:not(.iui-slot) > .iui-filter-button{
67
70
  margin-left:4px;
68
71
  margin-right:8px; }
@@ -102,6 +105,12 @@
102
105
  .iui-table-header .iui-cell:not(.iui-slot):focus .iui-filter-button, .iui-table-header .iui-cell:not(.iui-slot):focus-within .iui-sort,
103
106
  .iui-table-header .iui-cell:not(.iui-slot):focus-within .iui-filter-button{
104
107
  visibility:visible; }
108
+ .iui-table-header .iui-reorder-column-right{
109
+ border-right:2px solid #008BE1;
110
+ border-right:2px solid var(--iui-color-foreground-primary); }
111
+ .iui-table-header .iui-reorder-column-left{
112
+ border-left:2px solid #008BE1;
113
+ border-left:2px solid var(--iui-color-foreground-primary); }
105
114
  .iui-table-header .iui-sort{
106
115
  visibility:hidden;
107
116
  fill:rgba(0, 0, 0, 0.4);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@itwin/itwinui-css",
3
- "version": "0.48.2",
3
+ "version": "0.50.1",
4
4
  "author": "Bentley Systems",
5
5
  "license": "MIT",
6
6
  "main": "src/index.scss",
package/scss/button/button-group.scss CHANGED
@@ -2,11 +2,21 @@
2
2
  // See LICENSE.md in the project root for license terms and full copyright notice.
3
3
  @import '../style/index';
4
4
 
5
- @mixin iui-button-group {
5
+ /// Mixin for button group or input+button combo group.
6
+ /// @arg $orientation must be one of: horizontal, vertical
7
+ /// Note: Vertical button-group should be used for icon buttons only.
8
+ @mixin iui-button-group($orientation: horizontal) {
6
9
  display: inline-flex;
7
10
  align-items: center;
8
11
  isolation: isolate;
9
12
 
13
+ @if $orientation == 'horizontal' {
14
+ max-width: 100%;
15
+ } @else {
16
+ flex-direction: column;
17
+ max-height: 100%;
18
+ }
19
+
10
20
  $childZindexSelector: '.iui-input-container, .iui-button, .iui-input:where(:not(.iui-input-container .iui-input))';
11
21
  $childBorderSelector: '.iui-input, .iui-button:where(:not(.iui-borderless))';
12
22
  $disabledSelector: '&:disabled, &.iui-disabled, &[aria-disabled="true"]';
@@ -17,8 +27,12 @@
17
27
  #{$childZindexSelector} {
18
28
  position: relative;
19
29
 
20
- // Adds stripe above active button
21
- --_iui-button-active-stripe-inset: #{$iui-xxs} #{$iui-xxs} calc(100% - #{$iui-xs});
30
+ // Adds stripe to active button
31
+ @if $orientation == 'horizontal' {
32
+ --_iui-button-active-stripe-inset: #{$iui-xxs} #{$iui-xxs} calc(100% - #{$iui-xs});
33
+ } @else {
34
+ --_iui-button-active-stripe-inset: #{$iui-xxs} calc(100% - #{$iui-xs}) #{$iui-xxs} #{$iui-xxs};
35
+ }
22
36
 
23
37
  &:hover {
24
38
  z-index: 1;
@@ -50,27 +64,43 @@
50
64
  &:first-child {
51
65
  #{$childBorderSelector} {
52
66
  border-top-left-radius: $iui-border-radius;
53
- border-bottom-left-radius: $iui-border-radius;
67
+
68
+ @if $orientation == 'horizontal' {
69
+ border-bottom-left-radius: $iui-border-radius;
70
+ } @else {
71
+ border-top-right-radius: $iui-border-radius;
72
+ }
54
73
  }
55
74
  }
56
75
 
57
76
  &:last-child {
58
77
  #{$childBorderSelector} {
59
- border-top-right-radius: $iui-border-radius;
60
78
  border-bottom-right-radius: $iui-border-radius;
79
+
80
+ @if $orientation == 'horizontal' {
81
+ border-top-right-radius: $iui-border-radius;
82
+ } @else {
83
+ border-bottom-left-radius: $iui-border-radius;
84
+ }
61
85
  }
62
86
  }
63
87
 
64
88
  // Use negative margin to make adjacent borders overlap
65
89
  + * {
66
- margin-left: -1px;
90
+ @if $orientation == 'horizontal' {
91
+ margin-left: -1px;
92
+ } @else {
93
+ margin-top: -1px;
94
+ }
67
95
  }
68
96
 
69
97
  // Add slight border between disabled items
70
98
  &:not(:first-child) :where(.iui-button.iui-default) {
71
99
  #{$disabledSelector} {
72
- @include themed {
73
- border-left-color: t(iui-color-background-4);
100
+ @if $orientation == 'horizontal' {
101
+ border-left-color: var(--iui-color-background-4);
102
+ } @else {
103
+ border-top-color: var(--iui-color-background-4);
74
104
  }
75
105
  }
76
106
  }
package/scss/button/classes.scss CHANGED
@@ -47,6 +47,10 @@
47
47
 
48
48
  .iui-button-group {
49
49
  @include iui-button-group;
50
+
51
+ &-vertical {
52
+ @include iui-button-group(vertical);
53
+ }
50
54
  }
51
55
 
52
56
  .iui-button-split-menu {
package/scss/carousel/carousel.scss CHANGED
@@ -12,17 +12,28 @@
12
12
 
13
13
  @mixin iui-carousel-slider {
14
14
  display: flex;
15
+ gap: $iui-s;
15
16
  list-style: none;
16
17
  margin: 0;
17
18
  padding: 0;
19
+ overflow-x: auto;
20
+ overflow-x: overlay;
21
+ scroll-snap-type: x mandatory;
18
22
  @media (prefers-reduced-motion: no-preference) {
19
- transition: transform $iui-speed-slow ease-in-out;
23
+ scroll-behavior: smooth;
20
24
  }
21
25
 
26
+ // hide scrollbar
27
+ &::-webkit-scrollbar {
28
+ display: none;
29
+ }
30
+ scrollbar-width: none;
31
+
22
32
  &-item {
23
33
  width: 100%;
24
34
  flex-shrink: 0;
25
35
  box-sizing: border-box;
36
+ scroll-snap-align: center;
26
37
  }
27
38
  }
28
39
 
@@ -73,7 +84,7 @@
73
84
  }
74
85
 
75
86
  &.iui-invisible {
76
- display: none;
87
+ @include visually-hidden;
77
88
  }
78
89
 
79
90
  &::after {
@@ -101,9 +112,6 @@
101
112
 
102
113
  &.iui-invisible::after {
103
114
  transform: scale(0);
104
- @include themed {
105
- background-color: rgba(t(iui-color-foreground-body-rgb), 0);
106
- }
107
115
  }
108
116
 
109
117
  &.iui-active::after {
package/scss/modal/modal.scss CHANGED
@@ -53,6 +53,7 @@
53
53
  white-space: nowrap;
54
54
  overflow: hidden;
55
55
  text-overflow: ellipsis;
56
+ line-height: 1.5;
56
57
  }
57
58
  }
58
59
 
package/scss/table/table.scss CHANGED
@@ -40,6 +40,10 @@
40
40
  cursor: pointer;
41
41
  }
42
42
 
43
+ &.iui-grabbing {
44
+ cursor: grabbing;
45
+ }
46
+
43
47
  > .iui-filter-button {
44
48
  margin-left: $iui-xs;
45
49
  margin-right: $iui-s;
@@ -99,6 +103,18 @@
99
103
  }
100
104
  }
101
105
 
106
+ .iui-reorder-column-right {
107
+ @include themed {
108
+ border-right: $iui-xxs solid t(iui-color-foreground-primary);
109
+ }
110
+ }
111
+
112
+ .iui-reorder-column-left {
113
+ @include themed {
114
+ border-left: $iui-xxs solid t(iui-color-foreground-primary);
115
+ }
116
+ }
117
+
102
118
  // Sort icon
103
119
  .iui-sort {
104
120
  visibility: hidden;