@wavemaker/foundation-css 12.0.0-next.45068 → 12.0.0-next.45070

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 (3) hide show
  1. foundation-css/foundation/foundation.css +206 -170
  2. foundation-css/foundation/foundation.min.css +1 -1
  3. foundation-css/package.json +1 -1
foundation-css/foundation/foundation.css CHANGED
@@ -502,9 +502,9 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
502
502
  --wm-btn-gap: var(--wm-space-2);
503
503
  --wm-btn-shadow: none;
504
504
  --wm-btn-state-layer-color: var(--wm-color-on-surface-variant);
505
- --wm-btn-hover-state-layer-opacity: var(--wm-opacity-hover);
506
- --wm-btn-focus-state-layer-opacity: var(--wm-opacity-focus);
507
- --wm-btn-active-state-layer-opacity: var(--wm-opacity-active);
505
+ --wm-btn-state-layer-opacity-hover: var(--wm-opacity-hover);
506
+ --wm-btn-state-layer-opacity-focus: var(--wm-opacity-focus);
507
+ --wm-btn-state-layer-opacity-active: var(--wm-opacity-active);
508
508
  --wm-btn-disabled-color: var(--wm-color-on-surface);
509
509
  --wm-btn-disabled-background: var(--wm-color-on-surface-active);
510
510
  --wm-btn-disabled-border-color: var(--wm-color-on-surface-active);
@@ -540,6 +540,10 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
540
540
  --wm-btn-secondary-color: var(--wm-color-on-secondary);
541
541
  --wm-btn-secondary-border-color: var(--wm-color-secondary);
542
542
  --wm-btn-secondary-state-layer-color: var(--wm-color-on-secondary);
543
+ --wm-btn-tertiary-background: var(--wm-color-tertiary);
544
+ --wm-btn-tertiary-color: var(--wm-color-on-tertiary);
545
+ --wm-btn-tertiary-border-color: var(--wm-color-tertiary);
546
+ --wm-btn-tertiary-state-layer-color: var(--wm-color-on-tertiary);
543
547
  --wm-btn-success-background: var(--wm-color-success);
544
548
  --wm-btn-success-color: var(--wm-color-on-success);
545
549
  --wm-btn-success-border-color: var(--wm-color-success);
@@ -558,7 +562,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
558
562
  --wm-btn-danger-state-layer-color: var(--wm-color-on-error);
559
563
  --wm-btn-default-outlined-background: transparent;
560
564
  --wm-btn-default-outlined-color: var(--wm-btn-color);
561
- --wm-btn-default-outlined-border-color: var(--wm-btn-border-color);
565
+ --wm-btn-default-outlined-border-color: var(--wm-color-surface-container-highest);
562
566
  --wm-btn-default-outlined-state-layer-color: var(--wm-btn-color);
563
567
  --wm-btn-primary-outlined-background: transparent;
564
568
  --wm-btn-primary-outlined-color: var(--wm-color-primary);
@@ -568,6 +572,10 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
568
572
  --wm-btn-secondary-outlined-color: var(--wm-color-secondary);
569
573
  --wm-btn-secondary-outlined-border-color: var(--wm-color-secondary);
570
574
  --wm-btn-secondary-outlined-state-layer-color: var(--wm-color-secondary);
575
+ --wm-btn-tertiary-outlined-background: transparent;
576
+ --wm-btn-tertiary-outlined-color: var(--wm-color-tertiary);
577
+ --wm-btn-tertiary-outlined-border-color: var(--wm-color-tertiary);
578
+ --wm-btn-tertiary-outlined-state-layer-color: var(--wm-color-tertiary);
571
579
  --wm-btn-success-outlined-background: transparent;
572
580
  --wm-btn-success-outlined-color: var(--wm-color-success);
573
581
  --wm-btn-success-outlined-border-color: var(--wm-color-success);
@@ -674,6 +682,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
674
682
  --wm-checkbox-selected-state-focus: var(--wm-color-primary-focus);
675
683
  --wm-checkbox-selected-state-active: var(--wm-color-primary-active);
676
684
  --wm-checkbox-icon-size: 10px;
685
+ --wm-checkboxset-item-gap: var(--wm-space-6);
677
686
  /*--form field/composite--*/
678
687
  --wm-caption-font-family: var(--wm-body-large-font-family);
679
688
  --wm-caption-font-size: var(--wm-body-large-font-size);
@@ -751,9 +760,9 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
751
760
  --wm-datepicker-date-letter-spacing: var(--wm-body-medium-letter-spacing);
752
761
  --wm-datepicker-date-other-month-color: var(--wm-color-on-surface-variant);
753
762
  --wm-datepicker-date-state-layer-color: var(--wm-color-on-surface-variant);
754
- --wm-datepicker-date-hover-state-layer-opacity: var(--wm-opacity-hover);
755
- --wm-datepicker-date-focus-state-layer-opacity: var(--wm-opacity-focus);
756
- --wm-datepicker-date-active-state-layer-opacity: var(--wm-opacity-active);
763
+ --wm-datepicker-date-state-layer-opacity-hover: var(--wm-opacity-hover);
764
+ --wm-datepicker-date-state-layer-opacity-focus: var(--wm-opacity-focus);
765
+ --wm-datepicker-date-state-layer-opacity-active: var(--wm-opacity-active);
757
766
  /* dropdown menu variables */
758
767
  --wm-dropdown-menu-background: var(--wm-color-surface);
759
768
  --wm-dropdown-menu-border-radius: var(--wm-radius-xs);
@@ -773,9 +782,9 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
773
782
  --wm-dropdown-menu-item-gap: var(--wm-space-3);
774
783
  --wm-dropdown-menu-item-padding: var(--wm-space-3) var(--wm-space-4);
775
784
  --wm-dropdown-menu-item-state-layer-color: var(--wm-color-on-surface);
776
- --wm-dropdown-menu-item-hover-state-layer-opacity: var(--wm-opacity-hover);
777
- --wm-dropdown-menu-item-focus-state-layer-opacity: var(--wm-opacity-focus);
778
- --wm-dropdown-menu-item-active-state-layer-opacity: var(--wm-opacity-active);
785
+ --wm-dropdown-menu-item-state-layer-opacity-hover: var(--wm-opacity-hover);
786
+ --wm-dropdown-menu-item-state-layer-opacity-focus: var(--wm-opacity-focus);
787
+ --wm-dropdown-menu-item-state-layer-opacity-active: var(--wm-opacity-active);
779
788
  /*--file upload--*/
780
789
  --wm-file-upload-status-padding: var(--wm-space-2);
781
790
  --wm-file-upload-status-border-color: var(--wm-border-color);
@@ -815,9 +824,9 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
815
824
  --wm-list-background: var(--wm-color-surface);
816
825
  --wm-list-min-height: 6rem;
817
826
  --wm-list-state-layer-color: var(--wm-color-on-surface);
818
- --wm-list-hover-state-layer-opacity: var(--wm-opacity-hover);
819
- --wm-list-focus-state-layer-opacity: var(--wm-opacity-focus);
820
- --wm-list-active-state-layer-opacity: var(--wm-opacity-active);
827
+ --wm-list-state-layer-opacity-hover: var(--wm-opacity-hover);
828
+ --wm-list-state-layer-opacity-focus: var(--wm-opacity-focus);
829
+ --wm-list-state-layer-opacity-active: var(--wm-opacity-active);
821
830
  --wm-list-item-background: var(--wm-color-surface-container-lowest);
822
831
  --wm-list-item-background-active: var(--wm-color-secondary-container);
823
832
  --wm-list-item-padding: var(--wm-space-3) var(--wm-space-4);
@@ -900,9 +909,9 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
900
909
  --wm-nav-item-color-selected: var(--wm-color-on-secondary-container);
901
910
  --wm-nav-item-background-selected: var(--wm-color-secondary-container);
902
911
  --wm-nav-item-state-layer-color: var(--wm-color-on-surface);
903
- --wm-nav-item-hover-state-layer-opacity: var(--wm-opacity-hover);
904
- --wm-nav-item-focus-state-layer-opacity: var(--wm-opacity-focus);
905
- --wm-nav-item-active-state-layer-opacity: var(--wm-opacity-active);
912
+ --wm-nav-item-state-layer-opacity-hover: var(--wm-opacity-hover);
913
+ --wm-nav-item-state-layer-opacity-focus: var(--wm-opacity-focus);
914
+ --wm-nav-item-state-layer-opacity-active: var(--wm-opacity-active);
906
915
  --wm-nav-stacked-min-height: var(--wm-nav-stacked-item-min-height);
907
916
  --wm-nav-stacked-background: var(--wm-color-surface-container-low);
908
917
  --wm-nav-stacked-padding: var(--wm-space-3);
@@ -971,9 +980,9 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
971
980
  --wm-aside-nav-item-color-active: var(--wm-color-on-secondary-container);
972
981
  --wm-aside-nav-item-background-active: var(--wm-color-secondary-container);
973
982
  --wm-aside-nav-item-state-layer-color: var(--wm-color-on-surface);
974
- --wm-aside-nav-item-hover-state-layer-opacity: var(--wm-opacity-hover);
975
- --wm-aside-nav-item-focus-state-layer-opacity: var(--wm-opacity-focus);
976
- --wm-aside-nav-item-active-state-layer-opacity: var(--wm-opacity-active);
983
+ --wm-aside-nav-item-state-layer-opacity-hover: var(--wm-opacity-hover);
984
+ --wm-aside-nav-item-state-layer-opacity-focus: var(--wm-opacity-focus);
985
+ --wm-aside-nav-item-state-layer-opacity-active: var(--wm-opacity-active);
977
986
  --wm-aside-nav-item-caret-size: var(--wm-icon-size-sm);
978
987
  --wm-aside-nav-submenu-padding: var(--wm-space-0) var(--wm-space-0) var(--wm-space-0) var(--wm-space-3);
979
988
  --wm-aside-nav-submenu-background: var(--wm-aside-nav-item-background);
@@ -1025,9 +1034,9 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
1025
1034
  --wm-aside-nav-rail-item-icon-color-active: var(--wm-color-on-secondary-container);
1026
1035
  --wm-aside-nav-rail-item-icon-background-active: var(--wm-color-secondary-container);
1027
1036
  --wm-aside-nav-rail-item-icon-state-layer-color: var(--wm-color-on-surface);
1028
- --wm-aside-nav-rail-item-icon-hover-state-layer-opacity: var(--wm-opacity-hover);
1029
- --wm-aside-nav-rail-item-icon-focus-state-layer-opacity: var(--wm-opacity-focus);
1030
- --wm-aside-nav-rail-item-icon-active-state-layer-opacity: var(--wm-opacity-active);
1037
+ --wm-aside-nav-rail-item-icon-state-layer-opacity-hover: var(--wm-opacity-hover);
1038
+ --wm-aside-nav-rail-item-icon-state-layer-opacity-focus: var(--wm-opacity-focus);
1039
+ --wm-aside-nav-rail-item-icon-state-layer-opacity-active: var(--wm-opacity-active);
1031
1040
  --wm-aside-nav-rail-submenu-padding: var(--wm-space-3) var(--wm-space-2);
1032
1041
  --wm-aside-nav-rail-submenu-background: var(--wm-aside-nav-rail-background);
1033
1042
  --wm-aside-nav-rail-submenu-color: var(--wm-aside-nav-rail-color);
@@ -1131,30 +1140,27 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
1131
1140
  --wm-picture-thumbnail-border-width: var(--wm-border-width);
1132
1141
  --wm-picture-thumbnail-background: var(--wm-color-surface-container-low);
1133
1142
  /*--Progress Bar--*/
1134
- --wm-progress-bar-background-inactive: var(--wm-color-surface-bright);
1135
- --wm-progress-bar-background-active: var(--wm-color-surface-tint);
1143
+ --wm-progress-bar-height: 16px;
1144
+ --wm-progress-bar-background-inactive: var(--wm-color-primary-active);
1145
+ --wm-progress-bar-background-active: var(--wm-color-primary);
1146
+ --wm-progress-bar-label-color: var(--wm-color-on-primary);
1136
1147
  --wm-progress-bar-radius: var(--wm-radius-lg);
1137
- --wm-progress-bar-height: var(--wm-space-2);
1138
- --wm-progress-bar-width: var(--wm-space-2);
1139
1148
  --wm-progress-bar-striped: linear-gradient(45deg, var(--wm-color-white-active) 25%, transparent 25%, transparent 50%, var(--wm-color-white-active) 50%, var(--wm-color-white-active) 75%, transparent 75%, transparent);
1140
1149
  --wm-progress-bar-striped-size: var(--wm-space-10) var(--wm-space-10);
1141
1150
  --wm-progress-bar-margin: var(--wm-space-2) var(--wm-space-0);
1142
- --wm-progress-bar-stop-indicator-radius: var(--wm-radius-circle);
1143
- --wm-progress-bar-stop-indicator-height: var(--wm-space-2);
1144
- --wm-progress-bar-stop-indicator-width: var(--wm-space-2);
1145
- --wm-progress-bar-stop-indicator-background: var(--wm-color-surface-tint);
1151
+ --wm-progress-bar-transition-time: 0.5s;
1152
+ --wm-progress-bar-label-success-color: var(--wm-color-on-success);
1146
1153
  --wm-progress-bar-success-background-active: var(--wm-color-success);
1147
- --wm-progress-bar-success-stop-indicator-background: var(--wm-color-success);
1148
- --wm-progress-bar-success-background-inactive: var(--wm-color-success-hover);
1154
+ --wm-progress-bar-success-background-inactive: var(--wm-color-success-active);
1155
+ --wm-progress-bar-label-info-color: var(--wm-color-on-info);
1149
1156
  --wm-progress-bar-info-background-active: var(--wm-color-info);
1150
- --wm-progress-bar-info-stop-indicator-background: var(--wm-color-info);
1151
- --wm-progress-bar-info-background-inactive: var(--wm-color-info-hover);
1157
+ --wm-progress-bar-info-background-inactive: var(--wm-color-info-active);
1158
+ --wm-progress-bar-label-warning-color: var(--wm-color-on-warning);
1152
1159
  --wm-progress-bar-warning-background-active: var(--wm-color-warning);
1153
- --wm-progress-bar-warning-stop-indicator-background: var(--wm-color-warning);
1154
- --wm-progress-bar-warning-background-inactive: var(--wm-color-warning-hover);
1160
+ --wm-progress-bar-warning-background-inactive: var(--wm-color-warning-active);
1161
+ --wm-progress-bar-label-danger-color: var(--wm-color-on-danger);
1155
1162
  --wm-progress-bar-danger-background-active: var(--wm-color-error);
1156
- --wm-progress-bar-danger-stop-indicator-background: var(--wm-color-error);
1157
- --wm-progress-bar-danger-background-inactive: var(--wm-color-error-hover);
1163
+ --wm-progress-bar-danger-background-inactive: var(--wm-color-error-active);
1158
1164
  /*--Progress Circle--*/
1159
1165
  --wm-progress-circle-stroke-inactive: var(--wm-color-secondary-container);
1160
1166
  --wm-progress-circle-stroke-active: var(--wm-color-primary);
@@ -1188,6 +1194,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
1188
1194
  --wm-radiobutton-selected-state-hover: var(--wm-color-primary-hover);
1189
1195
  --wm-radiobutton-selected-state-focus: var(--wm-color-primary-focus);
1190
1196
  --wm-radiobutton-selected-state-active: var(--wm-color-primary-active);
1197
+ --wm-radiobutton-set-item-gap: var(--wm-space-6);
1191
1198
  /*--Rating--*/
1192
1199
  --wm-rating-gap: var(--wm-space-2);
1193
1200
  --wm-rating-icon-gap: var(--wm-space-0);
@@ -1198,20 +1205,26 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
1198
1205
  --wm-rating-icon-opacity-active: 1;
1199
1206
  --wm-rating-icon-opacity-readonly: 0.38;
1200
1207
  /*--segmented button--*/
1201
- --wm-segmented-btn-height: 40px;
1202
- --wm-segmented-btn-border-width: var(--wm-border-width);
1203
- --wm-segmented-btn-border-style: var(--wm-border-style);
1204
- --wm-segmented-btn-border-color: var(--wm-border-color);
1205
- --wm-segmented-btn-radius: var(--wm-radius-pill);
1206
- --wm-segmented-btn-icon-size: var(--wm-icon-size-sm);
1207
- --wm-segmented-btn-background: none;
1208
- --wm-segmented-btn-color: var(--wm-color-on-surface);
1209
- --wm-segmented-btn-background-active: var(--wm-color-secondary-container);
1210
- --wm-segmented-btn-color-active: var(--wm-color-on-secondary-container);
1211
- --wm-segmented-btn-state-layer-color: var(--wm-segmented-btn-color);
1212
- --wm-segmented-btn-hover-state-layer-opacity: var(--wm-opacity-hover);
1213
- --wm-segmented-btn-focus-state-layer-opacity: var(--wm-opacity-focus);
1214
- --wm-segmented-btn-active-state-layer-opacity: var(--wm-opacity-active);
1208
+ --wm-switch-btn-height: 40px;
1209
+ --wm-switch-btn-height-sm: 36px;
1210
+ --wm-switch-btn-height-xs: 32px;
1211
+ --wm-switch-btn-height-xxs: 28px;
1212
+ --wm-switch-btn-padding: var(--wm-space-1) var(--wm-space-4);
1213
+ --wm-switch-btn-border-width: var(--wm-border-width);
1214
+ --wm-switch-btn-border-style: var(--wm-border-style);
1215
+ --wm-switch-btn-border-color: var(--wm-border-color);
1216
+ --wm-switch-btn-radius: var(--wm-radius-pill);
1217
+ --wm-switch-btn-icon-size: var(--wm-icon-size-sm);
1218
+ --wm-switch-btn-background: none;
1219
+ --wm-switch-btn-color: var(--wm-color-on-surface);
1220
+ --wm-switch-btn-background-active: var(--wm-color-secondary-container);
1221
+ --wm-switch-btn-color-active: var(--wm-color-on-secondary-container);
1222
+ --wm-switch-btn-border-color-active: var(--wm-border-color);
1223
+ --wm-switch-btn-state-layer-color: var(--wm-switch-btn-color);
1224
+ --wm-switch-btn-state-layer-color-active: var(--wm-switch-btn-color);
1225
+ --wm-switch-btn-state-layer-opacity-hover: var(--wm-opacity-hover);
1226
+ --wm-switch-btn-state-layer-opacity-focus: var(--wm-opacity-focus);
1227
+ --wm-switch-btn-state-layer-opacity-active: var(--wm-opacity-active);
1215
1228
  --wm-spinner-min-height: 6rem;
1216
1229
  --wm-spinner-background: var(--wm-color-scrim);
1217
1230
  --wm-spinner-background-opacity: 0.3;
@@ -1236,9 +1249,9 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
1236
1249
  --wm-tabs-item-heading-border-style: var(--wm-border-style);
1237
1250
  --wm-tabs-item-heading-border-color: var(--wm-border-color);
1238
1251
  --wm-tabs-item-heading-state-layer-color: var(--wm-color-primary);
1239
- --wm-tabs-item-heading-hover-state-layer-opacity: var(--wm-opacity-hover);
1240
- --wm-tabs-item-heading-focus-state-layer-opacity: var(--wm-opacity-focus);
1241
- --wm-tabs-item-heading-active-state-layer-opacity: var(--wm-opacity-active);
1252
+ --wm-tabs-item-heading-state-layer-opacity-hover: var(--wm-opacity-hover);
1253
+ --wm-tabs-item-heading-state-layer-opacity-focus: var(--wm-opacity-focus);
1254
+ --wm-tabs-item-heading-state-layer-opacity-active: var(--wm-opacity-active);
1242
1255
  --wm-tabs-item-heading-indicator-height: 3px;
1243
1256
  --wm-tabs-item-heading-indicator-width: calc(100% - var(--wm-space-12));
1244
1257
  --wm-tabs-item-heading-indicator-radius: var(--wm-radius-md) var(--wm-radius-md) var(--wm-radius-none) var(--wm-radius-none);
@@ -13924,13 +13937,13 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
13924
13937
  .wm-app button:hover::before,
13925
13938
  .wm-app .btn.hover::before,
13926
13939
  .wm-app button.hover::before {
13927
- opacity: var(--wm-btn-hover-state-layer-opacity);
13940
+ opacity: var(--wm-btn-state-layer-opacity-hover);
13928
13941
  }
13929
13942
  .wm-app .btn:focus::before,
13930
13943
  .wm-app button:focus::before,
13931
13944
  .wm-app .btn.focus::before,
13932
13945
  .wm-app button.focus::before {
13933
- opacity: var(--wm-btn-focus-state-layer-opacity);
13946
+ opacity: var(--wm-btn-state-layer-opacity-focus);
13934
13947
  }
13935
13948
  .wm-app .btn:active::before,
13936
13949
  .wm-app button:active::before,
@@ -13940,7 +13953,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
13940
13953
  .wm-app button:active:hover::before,
13941
13954
  .wm-app .btn:active.focus::before,
13942
13955
  .wm-app button:active.focus::before {
13943
- opacity: var(--wm-btn-active-state-layer-opacity);
13956
+ opacity: var(--wm-btn-state-layer-opacity-active);
13944
13957
  }
13945
13958
  .wm-app .btn-default,
13946
13959
  .wm-app button-default {
@@ -13984,6 +13997,20 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
13984
13997
  --wm-btn-border-color: var(--wm-btn-secondary-outlined-border-color);
13985
13998
  --wm-btn-state-layer-color: var(--wm-btn-secondary-outlined-state-layer-color);
13986
13999
  }
14000
+ .wm-app .btn-tertiary,
14001
+ .wm-app button-tertiary {
14002
+ --wm-btn-color: var(--wm-btn-tertiary-color);
14003
+ --wm-btn-background: var(--wm-btn-tertiary-background);
14004
+ --wm-btn-border-color: var(--wm-btn-tertiary-border-color);
14005
+ --wm-btn-state-layer-color: var(--wm-btn-tertiary-state-layer-color);
14006
+ }
14007
+ .wm-app .btn-tertiary.btn-outlined,
14008
+ .wm-app button-tertiary.btn-outlined {
14009
+ --wm-btn-color: var(--wm-btn-tertiary-outlined-color);
14010
+ --wm-btn-background: var(--wm-btn-tertiary-outlined-background);
14011
+ --wm-btn-border-color: var(--wm-btn-tertiary-outlined-border-color);
14012
+ --wm-btn-state-layer-color: var(--wm-btn-tertiary-outlined-state-layer-color);
14013
+ }
13987
14014
  .wm-app .btn-success,
13988
14015
  .wm-app button-success {
13989
14016
  --wm-btn-color: var(--wm-btn-success-color);
@@ -14060,6 +14087,13 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
14060
14087
  .wm-app button-standard .app-icon {
14061
14088
  margin: 0;
14062
14089
  }
14090
+ .wm-app .btn-text.btn-default,
14091
+ .wm-app button-text.btn-default,
14092
+ .wm-app .btn-standard.btn-default,
14093
+ .wm-app button-standard.btn-default {
14094
+ --wm-btn-color: var(--wm-btn-default-color);
14095
+ --wm-btn-state-layer-color: var(--wm-btn-default-color);
14096
+ }
14063
14097
  .wm-app .btn-elevated,
14064
14098
  .wm-app button-elevated {
14065
14099
  box-shadow: var(--wm-btn-elevated);
@@ -14597,15 +14631,20 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
14597
14631
  margin: 0;
14598
14632
  position: relative;
14599
14633
  }
14600
- .wm-app .app-checkboxset.list-group.inline {
14634
+ .wm-app .app-checkboxset.list-group {
14601
14635
  display: flex;
14602
- flex-wrap: wrap;
14603
- row-gap: 0px;
14604
- column-gap: 32px;
14636
+ flex-wrap: nowrap;
14637
+ column-gap: var(--wm-checkboxset-item-gap);
14638
+ row-gap: calc(var(--wm-checkboxset-item-gap) * 0.25);
14605
14639
  overflow: visible;
14606
14640
  }
14607
- .wm-app .app-checkboxset.list-group.inline > li {
14641
+ .wm-app .app-checkboxset.list-group > li {
14608
14642
  margin: 0;
14643
+ }
14644
+ .wm-app .app-checkboxset.list-group.inline {
14645
+ flex-wrap: wrap;
14646
+ }
14647
+ .wm-app .app-checkboxset.list-group.inline > li {
14609
14648
  width: auto;
14610
14649
  }
14611
14650
  .wm-app .app-checkboxset.list-group.inline > li + li {
@@ -15024,17 +15063,17 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
15024
15063
  }
15025
15064
  .wm-app bs-datepicker-container .bs-datepicker .bs-datepicker-body table td span:hover::before,
15026
15065
  .wm-app bs-datepicker-container .bs-datepicker .bs-datepicker-body table td span.hover::before {
15027
- opacity: var(--wm-datepicker-date-hover-state-layer-opacity);
15066
+ opacity: var(--wm-datepicker-date-state-layer-opacity-hover);
15028
15067
  }
15029
15068
  .wm-app bs-datepicker-container .bs-datepicker .bs-datepicker-body table td span:focus::before,
15030
15069
  .wm-app bs-datepicker-container .bs-datepicker .bs-datepicker-body table td span.focus::before {
15031
- opacity: var(--wm-datepicker-date-focus-state-layer-opacity);
15070
+ opacity: var(--wm-datepicker-date-state-layer-opacity-focus);
15032
15071
  }
15033
15072
  .wm-app bs-datepicker-container .bs-datepicker .bs-datepicker-body table td span:active::before,
15034
15073
  .wm-app bs-datepicker-container .bs-datepicker .bs-datepicker-body table td span:active:focus::before,
15035
15074
  .wm-app bs-datepicker-container .bs-datepicker .bs-datepicker-body table td span:active:hover::before,
15036
15075
  .wm-app bs-datepicker-container .bs-datepicker .bs-datepicker-body table td span:active.focus::before {
15037
- opacity: var(--wm-datepicker-date-active-state-layer-opacity);
15076
+ opacity: var(--wm-datepicker-date-state-layer-opacity-active);
15038
15077
  }
15039
15078
  .wm-app bs-datepicker-container .bs-datepicker .bs-datepicker-body table td span.current-date.text-info:not(.selected) {
15040
15079
  --wm-datepicker-date-color: var(--wm-btn-primary-background);
@@ -15152,13 +15191,13 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
15152
15191
  text-overflow: ellipsis;
15153
15192
  }
15154
15193
  .wm-app .dropdown.app-menu .dropdown-menu .app-menu-item a:hover:before {
15155
- opacity: var(--wm-dropdown-menu-item-hover-state-layer-opacity);
15194
+ opacity: var(--wm-dropdown-menu-item-state-layer-opacity-hover);
15156
15195
  }
15157
15196
  .wm-app .dropdown.app-menu .dropdown-menu .app-menu-item a:focus:before {
15158
- opacity: var(--wm-dropdown-menu-item-focus-state-layer-opacity);
15197
+ opacity: var(--wm-dropdown-menu-item-state-layer-opacity-focus);
15159
15198
  }
15160
15199
  .wm-app .dropdown.app-menu .dropdown-menu .app-menu-item a:active:before {
15161
- opacity: var(--wm-dropdown-menu-item-active-state-layer-opacity);
15200
+ opacity: var(--wm-dropdown-menu-item-state-layer-opacity-active);
15162
15201
  }
15163
15202
  .wm-app .dropdown.app-menu .dropdown-menu.horizontal {
15164
15203
  width: auto;
@@ -15662,17 +15701,17 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
15662
15701
  }
15663
15702
  .wm-app .app-list-item:hover:before,
15664
15703
  .wm-app .app-list-item.hover:before {
15665
- opacity: var(--wm-list-hover-state-layer-opacity);
15704
+ opacity: var(--wm-list-state-layer-opacity-hover);
15666
15705
  }
15667
15706
  .wm-app .app-list-item:focus:before,
15668
15707
  .wm-app .app-list-item.focus:before {
15669
- opacity: var(--wm-list-focus-state-layer-opacity);
15708
+ opacity: var(--wm-list-state-layer-opacity-focus);
15670
15709
  }
15671
15710
  .wm-app .app-list-item:active:before,
15672
15711
  .wm-app .app-list-item:active:focus:before,
15673
15712
  .wm-app .app-list-item:active:hover:before,
15674
15713
  .wm-app .app-list-item:active.focus:before {
15675
- opacity: var(--wm-list-active-state-layer-opacity);
15714
+ opacity: var(--wm-list-state-layer-opacity-active);
15676
15715
  }
15677
15716
  .wm-app .app-list-item.active {
15678
15717
  --wm-list-item-background: var(--wm-list-item-background-active);
@@ -15946,7 +15985,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
15946
15985
  .wm-app .app-nav.nav .app-nav-item > .app-anchor.hover::before,
15947
15986
  .wm-app .app-nav.nav .app-nav-item > .app-menu > .app-anchor.hover::before,
15948
15987
  .wm-app .app-nav.nav .app-nav-item > .app-popover-wrapper > .app-anchor.hover::before {
15949
- opacity: var(--wm-nav-item-hover-state-layer-opacity);
15988
+ opacity: var(--wm-nav-item-state-layer-opacity-hover);
15950
15989
  }
15951
15990
  .wm-app .app-nav.nav .app-nav-item > .app-anchor:focus::before,
15952
15991
  .wm-app .app-nav.nav .app-nav-item > .app-menu > .app-anchor:focus::before,
@@ -15954,7 +15993,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
15954
15993
  .wm-app .app-nav.nav .app-nav-item > .app-anchor.focus::before,
15955
15994
  .wm-app .app-nav.nav .app-nav-item > .app-menu > .app-anchor.focus::before,
15956
15995
  .wm-app .app-nav.nav .app-nav-item > .app-popover-wrapper > .app-anchor.focus::before {
15957
- opacity: var(--wm-nav-item-focus-state-layer-opacity);
15996
+ opacity: var(--wm-nav-item-state-layer-opacity-focus);
15958
15997
  }
15959
15998
  .wm-app .app-nav.nav .app-nav-item > .app-anchor:active::before,
15960
15999
  .wm-app .app-nav.nav .app-nav-item > .app-menu > .app-anchor:active::before,
@@ -15968,7 +16007,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
15968
16007
  .wm-app .app-nav.nav .app-nav-item > .app-anchor:active.focus::before,
15969
16008
  .wm-app .app-nav.nav .app-nav-item > .app-menu > .app-anchor:active.focus::before,
15970
16009
  .wm-app .app-nav.nav .app-nav-item > .app-popover-wrapper > .app-anchor:active.focus::before {
15971
- opacity: var(--wm-nav-item-active-state-layer-opacity);
16010
+ opacity: var(--wm-nav-item-state-layer-opacity-active);
15972
16011
  }
15973
16012
  .wm-app .app-nav.nav .app-nav-item > .app-anchor.active,
15974
16013
  .wm-app .app-nav.nav .app-nav-item > .app-menu > .app-anchor.active,
@@ -16247,7 +16286,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
16247
16286
  .wm-app .app-page .app-right-panel .app-nav .app-nav-item > .app-menu > .app-anchor.hover::before,
16248
16287
  .wm-app .app-page .app-left-panel .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor.hover::before,
16249
16288
  .wm-app .app-page .app-right-panel .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor.hover::before {
16250
- opacity: var(--wm-aside-nav-item-hover-state-layer-opacity);
16289
+ opacity: var(--wm-aside-nav-item-state-layer-opacity-hover);
16251
16290
  }
16252
16291
  .wm-app .app-page .app-left-panel .app-nav .app-nav-item > .app-anchor:focus::before,
16253
16292
  .wm-app .app-page .app-right-panel .app-nav .app-nav-item > .app-anchor:focus::before,
@@ -16261,7 +16300,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
16261
16300
  .wm-app .app-page .app-right-panel .app-nav .app-nav-item > .app-menu > .app-anchor.focus::before,
16262
16301
  .wm-app .app-page .app-left-panel .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor.focus::before,
16263
16302
  .wm-app .app-page .app-right-panel .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor.focus::before {
16264
- opacity: var(--wm-aside-nav-item-focus-state-layer-opacity);
16303
+ opacity: var(--wm-aside-nav-item-state-layer-opacity-focus);
16265
16304
  }
16266
16305
  .wm-app .app-page .app-left-panel .app-nav .app-nav-item > .app-anchor:active::before,
16267
16306
  .wm-app .app-page .app-right-panel .app-nav .app-nav-item > .app-anchor:active::before,
@@ -16287,7 +16326,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
16287
16326
  .wm-app .app-page .app-right-panel .app-nav .app-nav-item > .app-menu > .app-anchor:active.focus::before,
16288
16327
  .wm-app .app-page .app-left-panel .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:active.focus::before,
16289
16328
  .wm-app .app-page .app-right-panel .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:active.focus::before {
16290
- opacity: var(--wm-aside-nav-item-active-state-layer-opacity);
16329
+ opacity: var(--wm-aside-nav-item-state-layer-opacity-active);
16291
16330
  }
16292
16331
  .wm-app .app-page .app-left-panel .app-nav .app-nav-item > .app-anchor.active,
16293
16332
  .wm-app .app-page .app-right-panel .app-nav .app-nav-item > .app-anchor.active,
@@ -16517,7 +16556,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
16517
16556
  .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-menu > .app-anchor.hover > .app-icon:after,
16518
16557
  .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor.hover > .app-icon:after,
16519
16558
  .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor.hover > .app-icon:after {
16520
- opacity: var(--wm-aside-nav-rail-item-icon-hover-state-layer-opacity);
16559
+ opacity: var(--wm-aside-nav-rail-item-icon-state-layer-opacity-hover);
16521
16560
  }
16522
16561
  .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor:focus > .app-icon:after,
16523
16562
  .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor:focus > .app-icon:after,
@@ -16531,7 +16570,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
16531
16570
  .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-menu > .app-anchor.focus > .app-icon:after,
16532
16571
  .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor.focus > .app-icon:after,
16533
16572
  .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor.focus > .app-icon:after {
16534
- opacity: var(--wm-aside-nav-rail-item-icon-focus-state-layer-opacity);
16573
+ opacity: var(--wm-aside-nav-rail-item-icon-state-layer-opacity-focus);
16535
16574
  }
16536
16575
  .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor:active > .app-icon:after,
16537
16576
  .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor:active > .app-icon:after,
@@ -16557,7 +16596,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
16557
16596
  .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-menu > .app-anchor:active.focus > .app-icon:after,
16558
16597
  .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:active.focus > .app-icon:after,
16559
16598
  .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:active.focus > .app-icon:after {
16560
- opacity: var(--wm-aside-nav-rail-item-icon-active-state-layer-opacity);
16599
+ opacity: var(--wm-aside-nav-rail-item-icon-state-layer-opacity-active);
16561
16600
  }
16562
16601
  .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor.active,
16563
16602
  .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor.active,
@@ -16685,7 +16724,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
16685
16724
  }
16686
16725
  .wm-app .app-page .app-left-panel.app-nav-rail .app-nav .app-nav-item > .dropdown.app-menu.open > a > .app-icon:after,
16687
16726
  .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .dropdown.app-menu.open > a > .app-icon:after {
16688
- opacity: var(--wm-aside-nav-rail-item-icon-focus-state-layer-opacity);
16727
+ opacity: var(--wm-aside-nav-rail-item-icon-state-layer-opacity-focus);
16689
16728
  }
16690
16729
  .wm-app .app-page .app-right-panel.app-nav-rail .app-nav .app-nav-item > .dropdown.app-menu .dropdown-menu {
16691
16730
  right: calc(100% + var(--wm-aside-panel-rail-padding-left));
@@ -16761,75 +16800,54 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
16761
16800
  transition: all 0.2s ease-in-out;
16762
16801
  }
16763
16802
  .wm-app .app-progress {
16764
- position: relative;
16803
+ display: flex;
16804
+ align-items: center;
16765
16805
  height: var(--wm-progress-bar-height);
16766
16806
  background: var(--wm-progress-bar-background-inactive);
16767
16807
  border-radius: var(--wm-progress-bar-radius);
16768
16808
  margin: var(--wm-progress-bar-margin);
16769
- transition: width 0.6s ease;
16770
- }
16771
- .wm-app .app-progress:before {
16772
- content: "";
16773
- position: absolute;
16774
- right: 0px;
16775
- height: var(--wm-progress-bar-stop-indicator-height);
16776
- width: var(--wm-progress-bar-stop-indicator-width);
16777
- border-radius: var(--wm-progress-bar-stop-indicator-radius);
16778
- background: var(--wm-progress-bar-stop-indicator-background);
16809
+ transition: width var(--wm-progress-bar-transition-time) ease-in-out;
16810
+ overflow: hidden;
16779
16811
  }
16780
16812
  .wm-app .app-progress .progress-bar {
16781
- position: relative;
16813
+ display: inline-flex;
16814
+ align-items: center;
16815
+ justify-content: center;
16782
16816
  height: 100%;
16783
16817
  background: var(--wm-progress-bar-background-active);
16784
16818
  border-top-left-radius: var(--wm-progress-bar-radius);
16785
16819
  border-bottom-left-radius: var(--wm-progress-bar-radius);
16786
- transition: width 0.6s ease;
16820
+ transition: width var(--wm-progress-bar-transition-time) ease-in-out;
16787
16821
  }
16788
- .wm-app .app-progress .progress-bar[aria-valuenow="100"] {
16789
- border-radius: var(--wm-progress-bar-radius);
16822
+ .wm-app .app-progress .progress-bar.progress-bar-striped {
16823
+ background-image: var(--wm-progress-bar-striped);
16824
+ background-size: var(--wm-progress-bar-striped-size);
16825
+ }
16826
+ .wm-app .app-progress .progress-bar .app-progress-label {
16827
+ color: var(--wm-progress-bar-label-color);
16790
16828
  }
16791
16829
  .wm-app .app-progress .progress-bar .app-progress-label[data-caption-placement=hidden] {
16792
16830
  display: none;
16793
16831
  }
16794
- .wm-app .app-progress:has(.progress-bar-success) {
16832
+ .wm-app .app-progress:has(>.progress-bar-success) {
16795
16833
  --wm-progress-bar-background-inactive: var(--wm-progress-bar-success-background-inactive);
16796
- }
16797
- .wm-app .app-progress:has(.progress-bar-success):before {
16798
- --wm-progress-bar-stop-indicator-background: var(--wm-progress-bar-success-stop-indicator-background);
16799
- }
16800
- .wm-app .app-progress > .progress-bar-success {
16801
16834
  --wm-progress-bar-background-active: var(--wm-progress-bar-success-background-active);
16835
+ --wm-progress-bar-label-color: var(--wm-progress-bar-label-success-color);
16802
16836
  }
16803
- .wm-app .app-progress:has(.progress-bar-info) {
16837
+ .wm-app .app-progress:has(>.progress-bar-info) {
16804
16838
  --wm-progress-bar-background-inactive: var(--wm-progress-bar-info-background-inactive);
16805
- }
16806
- .wm-app .app-progress:has(.progress-bar-info):before {
16807
- --wm-progress-bar-stop-indicator-background: var(--wm-progress-bar-info-stop-indicator-background);
16808
- }
16809
- .wm-app .app-progress > .progress-bar-info {
16810
16839
  --wm-progress-bar-background-active: var(--wm-progress-bar-info-background-active);
16840
+ --wm-progress-bar-label-color: var(--wm-progress-bar-label-info-color);
16811
16841
  }
16812
- .wm-app .app-progress:has(.progress-bar-warning) {
16842
+ .wm-app .app-progress:has(>.progress-bar-warning) {
16813
16843
  --wm-progress-bar-background-inactive: var(--wm-progress-bar-warning-background-inactive);
16814
- }
16815
- .wm-app .app-progress:has(.progress-bar-warning):before {
16816
- --wm-progress-bar-stop-indicator-background: var(--wm-progress-bar-warning-stop-indicator-background);
16817
- }
16818
- .wm-app .app-progress > .progress-bar-warning {
16819
16844
  --wm-progress-bar-background-active: var(--wm-progress-bar-warning-background-active);
16845
+ --wm-progress-bar-label-color: var(--wm-progress-bar-label-warning-color);
16820
16846
  }
16821
- .wm-app .app-progress:has(.progress-bar-danger) {
16847
+ .wm-app .app-progress:has(>.progress-bar-danger) {
16822
16848
  --wm-progress-bar-background-inactive: var(--wm-progress-bar-danger-background-inactive);
16823
- }
16824
- .wm-app .app-progress:has(.progress-bar-danger):before {
16825
- --wm-progress-bar-stop-indicator-background: var(--wm-progress-bar-danger-stop-indicator-background);
16826
- }
16827
- .wm-app .app-progress > .progress-bar-danger {
16828
16849
  --wm-progress-bar-background-active: var(--wm-progress-bar-danger-background-active);
16829
- }
16830
- .wm-app .app-progress > .progress-bar-striped {
16831
- background-image: var(--wm-progress-bar-striped);
16832
- background-size: var(--wm-progress-bar-striped-size);
16850
+ --wm-progress-bar-label-color: var(--wm-progress-bar-label-danger-color);
16833
16851
  }
16834
16852
  .wm-app .app-progress.circle {
16835
16853
  background: unset;
@@ -17009,6 +17027,30 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
17009
17027
  --wm-radiobutton-selected-state-hover: var(--wm-color-error-hover);
17010
17028
  --wm-radiobutton-selected-state-focus: var(--wm-color-error-focus);
17011
17029
  }
17030
+ .wm-app .app-radioset {
17031
+ padding: 0;
17032
+ margin: 0;
17033
+ position: relative;
17034
+ }
17035
+ .wm-app .app-radioset.list-group {
17036
+ display: flex;
17037
+ flex-wrap: nowrap;
17038
+ column-gap: var(--wm-radiobutton-set-item-gap);
17039
+ row-gap: calc(var(--wm-radiobutton-set-item-gap) * 0.25);
17040
+ overflow: visible;
17041
+ }
17042
+ .wm-app .app-radioset.list-group > li {
17043
+ margin: 0;
17044
+ }
17045
+ .wm-app .app-radioset.list-group.inline {
17046
+ flex-wrap: wrap;
17047
+ }
17048
+ .wm-app .app-radioset.list-group.inline > li {
17049
+ width: auto;
17050
+ }
17051
+ .wm-app .app-radioset.list-group.inline > li + li {
17052
+ margin: 0;
17053
+ }
17012
17054
  .wm-app .app-ratings {
17013
17055
  display: inline-flex;
17014
17056
  position: relative;
@@ -17101,67 +17143,61 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
17101
17143
  flex-wrap: nowrap;
17102
17144
  }
17103
17145
  .wm-app .app-switch > .btn-group > .btn {
17104
- background: var(--wm-segmented-btn-background);
17105
- color: var(--wm-segmented-btn-color);
17106
- border-radius: 0;
17107
- margin: 0 -1px;
17146
+ margin: 0px;
17108
17147
  width: 100%;
17109
- min-height: var(--wm-segmented-btn-height);
17110
- height: var(--wm-segmented-btn-height);
17111
- border: var(--wm-segmented-btn-border-width) var(--wm-segmented-btn-border-style) var(--wm-segmented-btn-border-color);
17148
+ min-height: var(--wm-switch-btn-height);
17149
+ height: var(--wm-switch-btn-height);
17150
+ background: var(--wm-switch-btn-background);
17151
+ color: var(--wm-switch-btn-color);
17152
+ padding: var(--wm-switch-btn-padding);
17153
+ border-radius: 0;
17154
+ border: var(--wm-switch-btn-border-width) var(--wm-switch-btn-border-style) var(--wm-switch-btn-border-color);
17112
17155
  }
17113
17156
  .wm-app .app-switch > .btn-group > .btn:first-child {
17114
- border-top-left-radius: var(--wm-segmented-btn-radius);
17115
- border-bottom-left-radius: var(--wm-segmented-btn-radius);
17157
+ border-top-left-radius: var(--wm-switch-btn-radius);
17158
+ border-bottom-left-radius: var(--wm-switch-btn-radius);
17116
17159
  }
17117
17160
  .wm-app .app-switch > .btn-group > .btn:last-child {
17118
- border-top-right-radius: var(--wm-segmented-btn-radius);
17119
- border-bottom-right-radius: var(--wm-segmented-btn-radius);
17161
+ border-top-right-radius: var(--wm-switch-btn-radius);
17162
+ border-bottom-right-radius: var(--wm-switch-btn-radius);
17120
17163
  }
17121
17164
  .wm-app .app-switch > .btn-group > .btn i {
17122
17165
  display: inline-flex;
17123
17166
  align-items: center;
17124
17167
  justify-content: center;
17125
- font-size: var(--wm-segmented-btn-icon-size);
17126
- min-width: var(--wm-segmented-btn-icon-size);
17127
- width: var(--wm-segmented-btn-icon-size);
17128
- height: var(--wm-segmented-btn-icon-size);
17168
+ font-size: var(--wm-switch-btn-icon-size);
17169
+ min-width: var(--wm-switch-btn-icon-size);
17170
+ width: var(--wm-switch-btn-icon-size);
17171
+ height: var(--wm-switch-btn-icon-size);
17129
17172
  margin-left: var(--wm-space-0);
17130
17173
  }
17131
17174
  .wm-app .app-switch > .btn-group > .btn:before {
17132
- content: "";
17133
- top: 0;
17134
- left: 0;
17135
- right: 0;
17136
- bottom: 0;
17137
- position: absolute;
17138
- pointer-events: none;
17139
- border-radius: inherit;
17140
- opacity: 0;
17141
- background: var(--wm-segmented-btn-state-layer-color);
17142
- }
17143
- .wm-app .app-switch > .btn-group > .btn:hover::before,
17144
- .wm-app .app-switch > .btn-group > .btn.hover::before {
17145
- opacity: var(--wm-segmented-btn-hover-state-layer-opacity);
17146
- }
17147
- .wm-app .app-switch > .btn-group > .btn:focus::before,
17148
- .wm-app .app-switch > .btn-group > .btn.focus::before {
17149
- opacity: var(--wm-segmented-btn-focus-state-layer-opacity);
17150
- }
17151
- .wm-app .app-switch > .btn-group > .btn:active::before,
17152
- .wm-app .app-switch > .btn-group > .btn:active:focus::before,
17153
- .wm-app .app-switch > .btn-group > .btn:active:hover::before,
17154
- .wm-app .app-switch > .btn-group > .btn:active.focus::before {
17155
- opacity: var(--wm-segmented-btn-active-state-layer-opacity);
17175
+ --wm-btn-state-layer-color: var(--wm-switch-btn-state-layer-color);
17176
+ --wm-btn-state-layer-opacity-hover: var(--wm-switch-btn-state-layer-opacity-hover);
17177
+ --wm-btn-state-layer-opacity-focus: var(--wm-switch-btn-state-layer-opacity-focus);
17178
+ --wm-btn-state-layer-opacity-active: var(--wm-switch-btn-state-layer-opacity-active);
17156
17179
  }
17157
17180
  .wm-app .app-switch > .btn-group > .btn.selected {
17158
- --wm-segmented-btn-background: var(--wm-segmented-btn-background-active);
17159
- --wm-segmented-btn-color: var(--wm-segmented-btn-color-active);
17160
- --wm-segmented-btn-state-layer-color: var(--wm-segmented-btn-color);
17181
+ --wm-switch-btn-background: var(--wm-switch-btn-background-active);
17182
+ --wm-switch-btn-color: var(--wm-switch-btn-color-active);
17183
+ --wm-switch-btn-border-color: var(--wm-switch-btn-border-color-active);
17184
+ --wm-switch-btn-state-layer-color: var(--wm-switch-btn-state-layer-color-active);
17185
+ }
17186
+ .wm-app .app-switch > .btn-group > .btn + .btn {
17187
+ border-left: none;
17161
17188
  }
17162
17189
  .wm-app .app-switch > .switch-handle {
17163
17190
  display: none;
17164
17191
  }
17192
+ .wm-app .app-switch.density-1 {
17193
+ --wm-switch-btn-height: var(--wm-switch-btn-height-sm);
17194
+ }
17195
+ .wm-app .app-switch.density-2 {
17196
+ --wm-switch-btn-height: var(--wm-switch-btn-height-xs);
17197
+ }
17198
+ .wm-app .app-switch.density-3 {
17199
+ --wm-switch-btn-height: var(--wm-switch-btn-height-xxs);
17200
+ }
17165
17201
  .wm-app .app-spinner {
17166
17202
  min-height: var(--wm-spinner-min-height);
17167
17203
  display: flex;
@@ -17259,13 +17295,13 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
17259
17295
  transition: all 0.2s ease-in-out;
17260
17296
  }
17261
17297
  .wm-app .app-tabs > .nav-tabs > .tab-header .tab-heading:hover:before {
17262
- opacity: var(--wm-tabs-item-heading-hover-state-layer-opacity);
17298
+ opacity: var(--wm-tabs-item-heading-state-layer-opacity-hover);
17263
17299
  }
17264
17300
  .wm-app .app-tabs > .nav-tabs > .tab-header .tab-heading:focus:before {
17265
- opacity: var(--wm-tabs-item-heading-focus-state-layer-opacity);
17301
+ opacity: var(--wm-tabs-item-heading-state-layer-opacity-focus);
17266
17302
  }
17267
17303
  .wm-app .app-tabs > .nav-tabs > .tab-header .tab-heading:active:before {
17268
- opacity: var(--wm-tabs-item-heading-active-state-layer-opacity);
17304
+ opacity: var(--wm-tabs-item-heading-state-layer-opacity-active);
17269
17305
  }
17270
17306
  .wm-app .app-tabs > .nav-tabs > .tab-header .tab-heading span:empty {
17271
17307
  display: none;