@vuu-ui/vuu-data-react 0.8.17-debug → 0.8.18-debug

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 (10) hide show
  1. package/cjs/index.js +27860 -37622
  2. package/cjs/index.js.map +4 -4
  3. package/esm/index.js +28133 -38094
  4. package/esm/index.js.map +4 -4
  5. package/index.css +1953 -2393
  6. package/index.css.map +3 -3
  7. package/package.json +9 -9
  8. package/types/hooks/useDataSource.d.ts +1 -2
  9. package/types/hooks/useVuuMenuActions.d.ts +1 -2
  10. package/types/hooks/useVuuTables.d.ts +1 -1
package/index.css CHANGED
@@ -164,25 +164,6 @@
164
164
 
165
165
  /* ../vuu-layout/src/Component.css */
166
166
 
167
- /* ../vuu-popups/src/portal/Portal.css */
168
- .vuuPortal {
169
- background-color: var(--salt-container-primary-background);
170
- border-radius: 4px;
171
- box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
172
- position: absolute;
173
- border-color: var(--vuuMenuList-borderColor, var(--salt-container-primary-borderColor));
174
- border-style: solid;
175
- border-width: 1px;
176
- padding: 4px 0;
177
- z-index: 100;
178
- }
179
- .vuuPortal:has(.vuuDropdown-popup-component.vuuList-empty) {
180
- display: none;
181
- }
182
- #vuu-portal-root {
183
- z-index: 1000;
184
- }
185
-
186
167
  /* ../vuu-popups/src/dialog-header/DialogHeader.css */
187
168
  .vuuDialogHeader {
188
169
  --saltButton-height: 28px;
@@ -215,14 +196,52 @@
215
196
  border: var(--vuuDialog-border, solid 1px #ccc);
216
197
  border-radius: 5px;
217
198
  padding: var(--vuuDialog-padding, 16px);
199
+ position: relative;
218
200
  box-shadow: var(--salt-overlayable-shadow, none);
219
201
  height: var(--vuuDialog-height, fit-content);
202
+ overflow: visible;
220
203
  width: var(--vuuDialog-width, fit-content);
221
204
  }
222
205
  .vuuDialog-body {
223
206
  padding-top: 16px;
224
207
  }
225
208
 
209
+ /* ../vuu-popups/src/popup/popup-service.css */
210
+ .vuuPopup {
211
+ box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
212
+ position: absolute;
213
+ top: 0;
214
+ left: 0;
215
+ width: 0;
216
+ height: 0;
217
+ overflow: visible;
218
+ z-index: 1000;
219
+ }
220
+ .vuuPopup {
221
+ position: absolute;
222
+ }
223
+
224
+ /* ../vuu-popups/src/popup/Popup.css */
225
+
226
+ /* ../vuu-popups/src/portal/Portal.css */
227
+ .vuuPortal {
228
+ background-color: var(--salt-container-primary-background);
229
+ border-radius: 4px;
230
+ box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
231
+ position: absolute;
232
+ border-color: var(--vuuMenuList-borderColor, var(--salt-container-primary-borderColor));
233
+ border-style: solid;
234
+ border-width: 1px;
235
+ padding: 4px 0;
236
+ z-index: 100;
237
+ }
238
+ .vuuPortal:has(.vuuDropdown-popup-component.vuuList-empty) {
239
+ display: none;
240
+ }
241
+ #vuu-portal-root {
242
+ z-index: 1000;
243
+ }
244
+
226
245
  /* ../vuu-popups/src/menu/MenuList.css */
227
246
  .vuuMenuList {
228
247
  --salt-focused-outlineStyle: dashed !important;
@@ -272,6 +291,7 @@
272
291
  display: inline-block;
273
292
  flex: 12px 0 0;
274
293
  height: var(--menu-icon-size);
294
+ -webkit-mask-repeat: no-repeat;
275
295
  mask-repeat: no-repeat;
276
296
  width: var(--menu-icon-size);
277
297
  }
@@ -283,8 +303,7 @@
283
303
  }
284
304
  .vuuMenuItem[aria-haspopup=true]:after {
285
305
  content: var(--menu-item-twisty-content);
286
- -webkit-mask: var(--vuu-svg-chevron-right) center center/8px 8px no-repeat;
287
- mask: var(---vuu-svg-chevron-right) center center/8px 8px no-repeat;
306
+ mask: var(--vuu-svg-chevron-right) center center/8px 8px no-repeat;
288
307
  background-color: var(--menu-item-twisty-color);
289
308
  height: 16px;
290
309
  left: var(--menu-item-twisty-left);
@@ -346,23 +365,6 @@
346
365
  border-width: 1px;
347
366
  }
348
367
 
349
- /* ../vuu-popups/src/popup/popup-service.css */
350
- .vuuPopup {
351
- box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
352
- position: absolute;
353
- top: 0;
354
- left: 0;
355
- width: 0;
356
- height: 0;
357
- overflow: visible;
358
- z-index: 1000;
359
- }
360
- .vuuPopup {
361
- position: absolute;
362
- }
363
-
364
- /* ../vuu-popups/src/popup/Popup.css */
365
-
366
368
  /* ../vuu-popups/src/popup-menu/PopupMenu.css */
367
369
  .vuuPopupMenu {
368
370
  --saltButton-height: 24px;
@@ -577,6 +579,7 @@
577
579
  width: var(--vuu-icon-width, var(--vuu-icon-size, 24px));
578
580
  -webkit-mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);
579
581
  mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);
582
+ -webkit-mask-repeat: no-repeat;
580
583
  mask-repeat: no-repeat;
581
584
  }
582
585
  .success-icon {
@@ -714,378 +717,352 @@ path.drop-target.centre {
714
717
  width: 100%;
715
718
  }
716
719
 
717
- /* ../vuu-layout/src/placeholder/LayoutStartPanel.css */
718
- .vuuLayoutStartPanel {
719
- align-items: center;
720
- flex: 0 0 auto !important;
721
- display: flex;
722
- flex-direction: column;
723
- font-weight: 700;
724
- gap: 12px;
720
+ /* ../vuu-ui-controls/src/dropdown/Dropdown.css */
721
+ .vuuDropdown {
722
+ --saltIcon-margin: 2px 0 0 8px;
723
+ display: inline-block;
724
+ line-height: 0;
725
+ position: relative;
726
+ width: var(--vuuDropdown-width, auto);
725
727
  }
726
- .vuuLayoutStartPanel-title {
727
- color: var(--vuu-color-gray-80);
728
- font-size: 28px;
729
- line-height: 1.5;
730
- text-align: center;
728
+ .vuuDropdownButton.saltButton-secondary {
729
+ --saltButton-borderStyle: solid;
730
+ --saltButton-borderColor: var(--salt-editable-borderColor);
731
+ --saltButton-borderWidth: 1px;
732
+ --saltButton-borderRadius: 6px;
733
+ --saltButton-height: var(--vuuDropdown-height, auto);
731
734
  }
732
- .vuuLayoutStartPanel-text {
733
- color: var(--vuu-color-gray-50);
734
- font-size: 18px;
735
- line-height: 1.5;
736
- max-width: 460px;
735
+ .vuuDropdown-fullWidth {
736
+ width: 100%;
737
737
  }
738
- .vuuLayoutStartPanel-addButton {
739
- --vuu-icon-size: 20px;
740
- --saltButton-borderRadius: 28px !important;
741
- --saltButton-height: 56px;
742
- --saltButton-width: 56px;
743
- box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
738
+ .vuuDropdown-popup {
739
+ background: var(--salt-container-primary-background);
740
+ z-index: calc(var(--salt-zIndex-flyover) - 1);
741
+ }
742
+ .vuuDropdown-popup-component {
743
+ --vuuList-borderStyle: none;
744
+ }
745
+ .vuuDropdownButton {
746
+ width: 100%;
744
747
  }
745
748
 
746
- /* ../vuu-layout/src/placeholder/Placeholder.css */
747
- .vuuPlaceholder {
748
- --vuuView-justify: center;
749
- align-items: center;
750
- display: flex;
751
- flex-basis: 0;
752
- flex-grow: 1;
753
- flex-shrink: 1;
749
+ /* ../vuu-ui-controls/src/dropdown/DropdownButton.css */
750
+ .vuuDropdownButton {
751
+ --saltButton-background-hover: var(--salt-actionable-secondary-background);
752
+ --saltButton-background-active: var(--salt-actionable-secondary-background);
753
+ --saltButton-fontWeight: var(--salt-text-fontWeight-strong);
754
+ --saltButton-textAlign: left;
755
+ --saltButton-textTransform: none;
756
+ --saltButton-width: 100%;
757
+ --vuu-icon-size: 16px;
754
758
  }
755
- .vuuPlaceholder-nested {
756
- background-color: red;
759
+ .vuuDropdownButton:active {
760
+ --saltIcon-color: var(--salt-actionable-secondary-foreground);
761
+ --saltButton-text-color-active: var(--salt-actionable-secondary-foreground);
757
762
  }
758
- .vuuPlaceholder-shim {
759
- flex-grow: 0;
760
- flex-shrink: 0;
763
+ .vuuDropdownButton-fullwidth {
764
+ width: 100%;
761
765
  }
762
-
763
- /* ../vuu-layout/src/flexbox/Splitter.css */
764
- .vuuSplitter {
765
- --splitter-background: var(--salt-separable-secondary-borderColor);
766
- --splitter-borderColor: var(--salt-separable-secondary-borderColor);
767
- --splitter-borderStyle: none;
768
- --splitter-borderWidth: 0;
769
- --splitter-size: 3px;
766
+ .vuuDropdownButton-content {
770
767
  align-items: center;
771
- background-color: var(--splitter-background);
772
- border-color: var(--splitter-borderColor);
773
- border-style: var(--splitter-borderStyle);
774
- border-width: var(--splitter-borderWidth);
775
- box-sizing: border-box;
768
+ flex: 1;
769
+ width: 100%;
776
770
  display: flex;
777
- justify-content: center;
778
- position: relative;
771
+ white-space: nowrap;
772
+ }
773
+ .vuuDropdownButton-buttonLabel {
774
+ display: inline-block;
775
+ letter-spacing: 0;
776
+ overflow: hidden;
777
+ text-overflow: ellipsis;
778
+ width: 100%;
779
+ }
780
+ .vuuDropdownButton-formField.saltButton:focus,
781
+ .vuuDropdownButton-formField.saltButton:focus-visible {
779
782
  outline: none;
780
- z-index: 1;
781
783
  }
782
- .vuuSplitter:hover {
783
- --splitter-background: var(--salt-separable-primary-borderColor);
784
+
785
+ /* ../vuu-ui-controls/src/list/Highlighter.css */
786
+ .saltHighlighter-highlight {
787
+ font-weight: var(--salt-text-fontWeight-strong);
784
788
  }
785
- .vuuSplitter-active {
786
- --splitter-background: var(--salt-separable-primary-borderColor);
789
+
790
+ /* ../vuu-ui-controls/src/list/CheckboxIcon.css */
791
+ .vuuCheckboxIcon {
792
+ --vuu-icon-size: 12px;
793
+ --vuu-icon-left: -1px;
794
+ --vuu-icon-top: -1px;
795
+ --vuu-icon-svg: var(--vuu-svg-tick);
796
+ border-style: solid;
797
+ border-color: var( --vuuCheckboxIcon-borderColor, var(--salt-selectable-borderColor) );
798
+ border-radius: var(--vuuCheckboxIcon-borderRadius, 3px);
799
+ border-width: 1px;
800
+ display: inline-block;
801
+ height: var(--vuuCheckboxIcon-size, 12px);
802
+ position: relative;
803
+ width: var(--vuuCheckboxIcon-size, 12px);
787
804
  }
788
- .vuuSplitter-column {
789
- cursor: ns-resize;
790
- height: var(--splitter-size);
805
+ .vuuCheckboxIcon-checked-enabled {
806
+ background-color: var( --vuuCheckboxIcon-background-checked-enabled, var(--vuu-color-purple-10) );
807
+ border-color: var( --vuuCheckboxIcon-borderColor-checked-enabled, var(--vuu-color-purple-10) );
791
808
  }
792
- .vuuSplitter:not(.vuuSplitter-column) {
793
- cursor: ew-resize;
794
- width: var(--splitter-size);
809
+ .vuuCheckboxIcon-checked-disabled {
810
+ background-color: var( --vuuCheckboxIcon-background-checked-disabled, var(--vuu-color-gray-35) );
811
+ border-color: var( --vuuCheckboxIcon-borderColor-checked-disabled, var(--vuu-color-gray-35) );
795
812
  }
796
- .vuuSplitter:before {
797
- border: none;
798
- border-radius: 0;
813
+ .vuuCheckboxIcon-checked-enabled::after,
814
+ .vuuCheckboxIcon-checked-disabled::after {
799
815
  content: "";
800
- display: block;
801
- padding: 0;
802
- }
803
- .vuuSplitter-grab-zone {
816
+ background-color: white;
817
+ left: var(--vuu-icon-left, auto);
818
+ height: var(--vuu-icon-height, var(--vuu-icon-size, 12px));
819
+ -webkit-mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);
820
+ mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);
821
+ mask-repeat: no-repeat;
822
+ -webkit-mask-repeat: no-repeat;
804
823
  position: absolute;
805
- background-color: rgba(255, 0, 0, 0.01);
806
- cursor: inherit;
824
+ top: var(--vuu-icon-top, auto);
825
+ width: var(--vuu-icon-width, var(--vuu-icon-size, 12px));
807
826
  }
808
- .vuuSplitter-column .vuuSplitter-grab-zone {
809
- left: 0;
810
- right: 0;
811
- top: -5px;
812
- bottom: -5px;
827
+ .vuuCheckboxIcon-checked-disabled::after {
828
+ background-color: var( --vuuCheckboxIcon-tick-checked-disabled, var(--vuu-color-gray-30) );
813
829
  }
814
- .vuuSplitter:not(.vuuSplitter-column) .vuuSplitter-grab-zone {
815
- left: -5px;
816
- right: -5px;
817
- top: 0;
818
- bottom: 0;
830
+
831
+ /* ../vuu-ui-controls/src/list/ListItem.css */
832
+ .vuuListItem {
833
+ --list-item-text-color: var(--salt-text-primary-foreground);
834
+ --list-item-background: var(--vuuList-item-background, var(--salt-selectable-background));
835
+ --list-item-text-color-active: var(--salt-text-primary-foreground);
836
+ --list-item-background-active: var(--salt-selectable-background-selected);
837
+ --list-item-alignItems: center;
819
838
  }
820
- .vuuSplitter-active:not(.vuuSplitter-column) .vuuSplitter-grab-zone {
821
- background-color: rgba(255, 255, 255, .05);
822
- left: -150px;
823
- right: -150px;
839
+ .vuuListItem.vuuHighlighted {
840
+ --saltCheckbox-icon-stroke: var(--salt-selectable-borderColor-hover);
841
+ --list-item-background: var(--salt-selectable-background-hover);
824
842
  }
825
- .vuuSplitter:not(.vuuSplitter-column):before {
826
- width: 1px;
827
- height: 10px;
828
- background: linear-gradient(to bottom, var(--grey900) 10%, transparent 10%, transparent 30%, var(--grey900) 30%, var(--grey900) 40%, transparent 40%, transparent 60%, var(--grey900) 60%, var(--grey900) 70%, transparent 70%, transparent 90%, var(--grey900) 90%);
843
+ .vuuListItemHeader {
844
+ font-weight: var(--salt-text-fontWeight-strong);
829
845
  }
830
- .vuuSplitter-active.vuuSplitter-column:before {
831
- background: linear-gradient(to right, #ffffff 10%, transparent 10%, transparent 30%, #ffffff 30%, #ffffff 40%, transparent 40%, transparent 60%, #ffffff 60%, #ffffff 70%, transparent 70%, transparent 90%, #ffffff 90%);
846
+ .vuuListItemHeader[data-sticky] {
847
+ position: sticky;
848
+ top: 0;
849
+ z-index: 1;
832
850
  }
833
- .vuuSplitter-active:not(.vuuSplitter-column):before {
834
- background: linear-gradient(to bottom, #ffffff 10%, transparent 10%, transparent 30%, #ffffff 30%, #ffffff 40%, transparent 40%, transparent 60%, #ffffff 60%, #ffffff 70%, transparent 70%, transparent 90%, #ffffff 90%);
851
+ .vuuListItem {
852
+ color: var(--list-item-text-color);
853
+ cursor: var(--vuuList-item-cursor, pointer);
854
+ background: var(--vuuList-item-background, var(--list-item-background));
855
+ font-size: var(--salt-text-fontSize);
856
+ text-align: var(--salt-text-textAlign);
857
+ line-height: var(--salt-text-lineHeight);
858
+ height: var(--vuuList-item-height, var(--list-item-height, auto));
859
+ margin-bottom: var(--list-item-gap);
860
+ padding: 0 var(--vuuListItem-padding, var(--salt-size-unit));
861
+ left: 0;
862
+ right: 0;
863
+ display: flex;
864
+ position: relative;
865
+ align-items: var(--list-item-alignItems);
866
+ white-space: nowrap;
835
867
  }
836
- .vuuSplitter-column:before {
837
- width: 10px;
838
- height: 1px;
839
- background: linear-gradient(to right, var(--grey900) 10%, transparent 10%, transparent 30%, var(--grey900) 30%, var(--grey900) 40%, transparent 40%, transparent 60%, var(--grey900) 60%, var(--grey900) 70%, transparent 70%, transparent 90%, var(--grey900) 90%);
868
+ .vuuListItem:last-child {
869
+ margin-bottom: 0px;
840
870
  }
841
-
842
- /* ../vuu-layout/src/flexbox/Flexbox.css */
843
- :root {
844
- --hw-space-unit: 4px;
845
- --hw-flex-gap: 3;
846
- --hw-fluid-grid-col-bg: rgba(200, 200, 200, 0.3);
871
+ .vuuListItem-checkbox {
872
+ --list-item-background-active: var(--salt-selectable-background);
873
+ --list-item-text-color-active: var(--salt-text-primary-foreground);
874
+ --list-item-text-padding: 0 0 0 var(--salt-size-unit);
847
875
  }
848
- .hwFlexbox {
849
- background-color: var(--container1-background);
850
- box-sizing: border-box;
851
- display: flex;
852
- gap: calc(var(--spacing) * var(--space));
853
- min-height: 0;
854
- min-width: 0;
855
- overflow: hidden;
876
+ .vuuListItem[aria-selected=true]:not(.vuuListItem-checkbox) {
877
+ --list-item-background: var(--list-item-background-active);
878
+ color: var(--list-item-text-color-active);
856
879
  }
857
- .hwFlexbox-column {
858
- flex-direction: column;
880
+ .vuuListItem.vuuDisabled {
881
+ --list-item-text-color: var(--salt-text-primary-foreground-disabled);
882
+ cursor: var(--salt-selectable-cursor-disabled);
859
883
  }
860
- .hwFlexbox-row {
861
- flex-direction: row;
884
+ .vuuListItem.vuuFocusVisible {
885
+ outline-style: var(--salt-focused-outlineStyle);
886
+ outline-width: var(--salt-focused-outlineWidth);
887
+ outline-offset: -2px;
888
+ outline-color: var(--salt-focused-outlineColor);
862
889
  }
863
- .hwFlexbox > .Splitter {
864
- flex-basis: auto;
865
- flex-grow: 0;
866
- flex-shrink: 0;
890
+ .vuuListItem.vuuFocusVisible:after {
891
+ content: none;
867
892
  }
868
- .hwFlexbox.full-page {
869
- height: 100vh;
870
- width: 100vw;
893
+ .vuuListItem[aria-selected=true]:not(.vuuListItem-checkbox).vuuFocusVisible {
894
+ outline-color: var(--list-item-selected-focus-outlineColor);
871
895
  }
872
- .flex-fill {
873
- border-color: red;
874
- flex: 0;
875
- flex-grow: 1;
876
- flex-shrink: 1;
896
+ .vuuListItem-textWrapper {
897
+ flex: 1;
898
+ overflow: hidden;
899
+ padding: var(--list-item-text-padding, 0px);
900
+ white-space: nowrap;
901
+ text-overflow: ellipsis;
877
902
  }
878
- .vuuView.flex-fill {
879
- border-color: red;
903
+ .vuuListItem-proxy {
904
+ position: absolute !important;
905
+ visibility: hidden;
906
+ }
907
+ .vuuDraggable-list-item {
908
+ --vuuList-item-height: 24px;
909
+ background-color: white;
910
+ }
911
+ .vuuListItem.vuuDraggable-dragAway {
912
+ display: none;
880
913
  }
881
914
 
882
- /* ../vuu-layout/src/flexbox/FluidGrid.css */
883
- :root {
884
- --hw-space-unit: 4px;
885
- --hw-fluid-grid-col-bg: rgba(252, 209, 232, 0.7);
915
+ /* ../vuu-ui-controls/src/drag-drop/Draggable.css */
916
+ .vuuDraggable {
917
+ background: transparent;
918
+ box-shadow: var(--salt-overlayable-shadow-drag);
919
+ cursor: var(--salt-draggable-grab-cursor-active);
920
+ position: absolute;
921
+ opacity: .95;
922
+ z-index: 2000;
886
923
  }
887
- .hwFluidGrid {
888
- --gap: var(--gutter-width);
889
- display: flex;
890
- gap: calc(var(--grid-gap) * var(--hw-space-unit));
891
- flex-wrap: wrap;
892
- padding: 0;
924
+ .vuuDraggable-spacer {
925
+ display: var(--vuuDraggable-display, inline-block);
926
+ height: var(--vuuDraggable-spacer-height, var(--tabstrip-height));
927
+ transition: var(--vuuDraggable-transitionProp, width) 0.3s ease;
928
+ width: var(--vuuDraggable-spacer-width, 0);
893
929
  }
894
- .hwFluidGrid > * {
895
- --gutter-width: calc(var(--hw-flex-gap) * var(--hw-space-unit));
896
- --gutter-count: calc(var(--parent-col-count) - 1);
897
- --total-gutter-width: calc(var(--gutter-count) * var(--gutter-width));
898
- --available-width: calc(100% - var(--total-gutter-width));
899
- flex-basis: 0;
900
- flex-grow: 1;
901
- flex-shrink: 1;
902
- position: relative;
930
+ .vuuDraggable-dropIndicatorPosition {
931
+ display: var(--saltDraggable-display, inline-block);
932
+ height: 0px;
933
+ width: 100%;
903
934
  }
904
- .hwFluidGrid > *:after {
935
+ .vuuDraggable-dropIndicatorContainer {
936
+ transition: var(--vuuDraggable-transitionProp, top) 0.2s ease;
937
+ }
938
+ .vuuDraggable-dropIndicator {
939
+ background-color: var(--salt-palette-accent-background);
940
+ height: 2px;
941
+ width: 100%;
942
+ }
943
+ .vuuDraggable-dropIndicator:before {
905
944
  content: "";
945
+ width: 6px;
946
+ height: 6px;
947
+ border-radius: 3px;
948
+ background-color: var(--salt-palette-accent-background);
906
949
  position: absolute;
907
- top: 0;
908
- left: 0;
909
- right: 0;
910
- bottom: 0;
911
- border: dashed 2px blue;
950
+ top: -2px;
951
+ left: -3px;
912
952
  }
913
- .hwFluidGrid > [data-xs] {
914
- --internal-gutter-count: calc(var(--col-span) - 1);
915
- --percent-width: calc(var(--col-span) / var(--parent-col-count));
916
- --internal-gutter-width: calc(var(--internal-gutter-count) * var(--gutter-width));
917
- flex-basis: calc(var(--available-width) * var(--percent-width) + var(--internal-gutter-width));
918
- flex-grow: 0;
953
+ .vuuDraggable-settling {
954
+ transition-property: left, top;
955
+ transition-duration: .15s;
956
+ transition-timing-function: ease-out;
919
957
  }
920
- .hwFluidGrid > [data-xs="1"] {
921
- --col-span: 1;
958
+ .vuuDraggable-spacer {
959
+ order: 1;
922
960
  }
923
- .hwFluidGrid > [data-xs="2"] {
924
- --col-span: 2;
961
+
962
+ /* ../vuu-ui-controls/src/list/List.css */
963
+ .vuuList {
964
+ --list-background: var(--salt-container-primary-background);
965
+ --list-borderStyle: var(--vuuList-borderStyle,var(--salt-container-borderStyle));
966
+ --list-borderWidth: var(--salt-size-border);
967
+ --list-height: auto;
968
+ --list-item-height: var(--salt-size-stackable);
969
+ --list-item-gap: 0px;
970
+ --list-maxHeight: 100%;
971
+ --vuuDraggable-display: block;
972
+ --vuuDraggable-spacer-height: 0;
973
+ --vuuDraggable-spacer-width: 100%;
974
+ --vuuDraggable-transitionProp: height;
975
+ --vuuMeasuredContainer-height: var(--computed-list-height);
976
+ background: var(--list-background);
977
+ height: var(--saltList-height, var(--list-height));
978
+ max-height: var(--list-maxHeight);
979
+ outline: none;
980
+ position: relative;
981
+ user-select: none;
982
+ width: var(--saltList-width, auto);
983
+ padding: 0 1px;
925
984
  }
926
- .hwFluidGrid > [data-xs="3"] {
927
- --col-span: 3;
985
+ .vuuList-contentSized {
986
+ box-sizing: content-box;
928
987
  }
929
- .hwFluidGrid > [data-xs="4"] {
930
- --col-span: 4;
988
+ .vuuList-borderless {
989
+ --list-borderStyle: none;
931
990
  }
932
- .hwFluidGrid > [data-xs="6"] {
933
- --col-span: 6;
991
+ .vuuList-viewport {
992
+ height: var(--computed-list-height, var(--measured-px-height));
993
+ overflow: auto;
934
994
  }
935
- .hwFluidGrid > [data-xs="8"] {
936
- --col-span: 8;
995
+ .vuuListHeader {
996
+ --saltList-item-background: var(--list-item-header-background);
997
+ color: var(--list-item-header-color);
998
+ font-weight: 600;
937
999
  }
938
- .hwFluidGrid > [data-xs="9"] {
939
- --col-span: 9;
1000
+ .vuuListHeader[data-sticky=true] {
1001
+ --saltList-item-background: var(--list-background);
1002
+ position: sticky;
1003
+ top: 0;
1004
+ z-index: 1;
940
1005
  }
941
- .hwFluidGrid > [data-xs="10"] {
942
- --col-span: 10;
1006
+ .vuuList-collapsible .vuuListItemHeader:after {
1007
+ border-width: var(--checkbox-borderWidth);
1008
+ border-color: var(--checkbox-borderColor);
1009
+ content: var(--list-item-header-twisty-content);
1010
+ -webkit-mask: var(--list-svg-chevron-down) center center/12px 12px no-repeat;
1011
+ mask: var(--list-svg-chevron-down) center center/12px 12px no-repeat;
1012
+ background: var(--list-item-header-twisty-color);
1013
+ height: 12px;
1014
+ left: var(--list-item-header-twisty-left);
1015
+ right: var(--list-item-header-twisty-right);
1016
+ margin-top: -8px;
1017
+ position: absolute;
1018
+ top: var(--list-item-header-twisty-top);
1019
+ transition: transform 0.3s;
1020
+ width: 12px;
943
1021
  }
944
- .hwFluidGrid > [data-xs="11"] {
945
- --col-span: 11;
1022
+ .vuuListItemHeader[aria-expanded=false]:after {
1023
+ transform: rotate(-90deg);
946
1024
  }
947
- .hwFluidGrid > [data-xs="12"] {
948
- --col-span: 12;
1025
+ .vuuList-scrollingContentContainer {
1026
+ box-sizing: inherit;
1027
+ position: relative;
949
1028
  }
950
- @media (min-width: 600px) {
951
- .hwFluidGrid > [data-sm="1"] {
952
- --col-span: 1;
953
- }
954
- .hwFluidGrid > [data-sm="2"] {
955
- --col-span: 2;
956
- }
957
- .hwFluidGrid > [data-sm="3"] {
958
- --col-span: 3;
959
- }
960
- .hwFluidGrid > [data-sm="4"] {
961
- --col-span: 4;
962
- }
963
- .hwFluidGrid > [data-sm="6"] {
964
- --col-span: 6;
965
- }
966
- .hwFluidGrid > [data-sm="8"] {
967
- --col-span: 8;
968
- }
969
- .hwFluidGrid > [data-sm="9"] {
970
- --col-span: 9;
971
- }
972
- .hwFluidGrid > [data-sm="10"] {
973
- --col-span: 10;
974
- }
975
- .hwFluidGrid > [data-sm="11"] {
976
- --col-span: 11;
977
- }
978
- .hwFluidGrid > [data-sm="12"] {
979
- --col-span: 12;
980
- }
981
- }
982
- .hwFluidGrid-show-grid {
983
- --gutter-width: calc(var(--hw-flex-gap) * var(--hw-space-unit));
984
- --grid-gutter-count: calc(var(--grid-col-count, var(--parent-col-count)) - 1);
985
- --grid-total-gutter-width: calc(var(--grid-gutter-count) * var(--gutter-width));
986
- --grid-available-width: calc(100% - var(--grid-total-gutter-width));
987
- --grid-percent-width: calc(1 / var(--grid-col-count, var(--parent-col-count)));
988
- --column-width: calc(var(--grid-available-width) * var(--grid-percent-width));
989
- background: repeating-linear-gradient(to right, var(--hw-fluid-grid-col-bg) 0, var(--hw-fluid-grid-col-bg) var(--column-width), white var(--column-width), white calc(var(--column-width) + var(--gutter-width)));
990
- }
991
-
992
- /* ../vuu-ui-controls/src/dropdown/Dropdown.css */
993
- .vuuDropdown {
994
- --saltIcon-margin: 2px 0 0 8px;
995
- display: inline-block;
996
- line-height: 0;
997
- position: relative;
998
- width: var(--vuuDropdown-width, auto);
999
- }
1000
- .vuuDropdownButton.saltButton-secondary {
1001
- --saltButton-borderStyle: solid;
1002
- --saltButton-borderColor: var(--salt-editable-borderColor);
1003
- --saltButton-borderWidth: 1px;
1004
- --saltButton-borderRadius: 6px;
1005
- --saltButton-height: var(--vuuDropdown-height, auto);
1006
- }
1007
- .vuuDropdown-fullWidth {
1008
- width: 100%;
1009
- }
1010
- .vuuDropdown-popup {
1011
- background: var(--salt-container-primary-background);
1012
- z-index: calc(var(--salt-zIndex-flyover) - 1);
1013
- }
1014
- .vuuDropdown-popup-component {
1015
- --vuuList-borderStyle: none;
1016
- }
1017
- .vuuDropdownButton {
1018
- width: 100%;
1019
- }
1020
-
1021
- /* ../vuu-ui-controls/src/dropdown/DropdownButton.css */
1022
- .vuuDropdownButton {
1023
- --saltButton-background-hover: var(--salt-actionable-secondary-background);
1024
- --saltButton-background-active: var(--salt-actionable-secondary-background);
1025
- --saltButton-fontWeight: var(--salt-text-fontWeight-strong);
1026
- --saltButton-textAlign: left;
1027
- --saltButton-textTransform: none;
1028
- --saltButton-width: 100%;
1029
- --vuu-icon-size: 16px;
1030
- }
1031
- .vuuDropdownButton:active {
1032
- --saltIcon-color: var(--salt-actionable-secondary-foreground);
1033
- --saltButton-text-color-active: var(--salt-actionable-secondary-foreground);
1034
- }
1035
- .vuuDropdownButton-fullwidth {
1036
- width: 100%;
1037
- }
1038
- .vuuDropdownButton-content {
1039
- align-items: center;
1040
- flex: 1;
1041
- width: 100%;
1042
- display: flex;
1043
- white-space: nowrap;
1044
- }
1045
- .vuuDropdownButton-buttonLabel {
1046
- display: inline-block;
1047
- letter-spacing: 0;
1048
- overflow: hidden;
1049
- text-overflow: ellipsis;
1050
- width: 100%;
1051
- }
1052
- .vuuDropdownButton-formField.saltButton:focus,
1053
- .vuuDropdownButton-formField.saltButton:focus-visible {
1054
- outline: none;
1029
+ .vuuList-virtualized .vuuListItem {
1030
+ line-height: 30px;
1031
+ position: absolute;
1032
+ top: 0;
1033
+ left: 0;
1034
+ right: 0;
1035
+ will-change: transform;
1055
1036
  }
1056
-
1057
- /* ../vuu-ui-controls/src/list/Highlighter.css */
1058
- .saltHighlighter-highlight {
1059
- font-weight: var(--salt-text-fontWeight-strong);
1037
+ .vuuList.saltFocusVisible:after {
1038
+ top: 2px;
1039
+ right: 2px;
1040
+ bottom: 2px;
1041
+ left: 2px;
1060
1042
  }
1061
1043
 
1062
- /* ../vuu-ui-controls/src/list/CheckboxIcon.css */
1063
- .vuuCheckboxIcon {
1044
+ /* ../vuu-ui-controls/src/list/RadioIcon.css */
1045
+ .vuuRadioIcon {
1064
1046
  --vuu-icon-size: 12px;
1065
1047
  --vuu-icon-left: -1px;
1066
1048
  --vuu-icon-top: -1px;
1067
- --vuu-icon-svg: var(--vuu-svg-tick);
1049
+ --vuu-icon-svg: var(--vuu-svg-radio);
1068
1050
  border-style: solid;
1069
- border-color: var( --vuuCheckboxIcon-borderColor, var(--salt-selectable-borderColor) );
1070
- border-radius: var(--vuuCheckboxIcon-borderRadius, 3px);
1051
+ border-color: var(--vuuRadioIcon-borderColor, var(--salt-selectable-borderColor));
1052
+ border-radius: 50%;
1071
1053
  border-width: 1px;
1072
1054
  display: inline-block;
1073
- height: var(--vuuCheckboxIcon-size, 12px);
1055
+ height: var(--vuuRadioIcon-size, 12px);
1074
1056
  position: relative;
1075
- width: var(--vuuCheckboxIcon-size, 12px);
1076
- }
1077
- .vuuCheckboxIcon-checked-enabled {
1078
- background-color: var( --vuuCheckboxIcon-background-checked-enabled, var(--vuu-color-purple-10) );
1079
- border-color: var( --vuuCheckboxIcon-borderColor-checked-enabled, var(--vuu-color-purple-10) );
1057
+ width: var(--vuuRadioIcon-size, 12px);
1080
1058
  }
1081
- .vuuCheckboxIcon-checked-disabled {
1082
- background-color: var( --vuuCheckboxIcon-background-checked-disabled, var(--vuu-color-gray-35) );
1083
- border-color: var( --vuuCheckboxIcon-borderColor-checked-disabled, var(--vuu-color-gray-35) );
1059
+ .vuuRadioIcon-checked {
1060
+ background-image: var(--vuu-svg-radio);
1061
+ border: none;
1062
+ background-repeat: no-repeat;
1084
1063
  }
1085
- .vuuCheckboxIcon-checked-enabled::after,
1086
- .vuuCheckboxIcon-checked-disabled::after {
1064
+ .vuuRadioIcon-checked:after {
1087
1065
  content: "";
1088
- background-color: white;
1089
1066
  left: var(--vuu-icon-left, auto);
1090
1067
  height: var(--vuu-icon-height, var(--vuu-icon-size, 12px));
1091
1068
  -webkit-mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);
@@ -1096,405 +1073,167 @@ path.drop-target.centre {
1096
1073
  top: var(--vuu-icon-top, auto);
1097
1074
  width: var(--vuu-icon-width, var(--vuu-icon-size, 12px));
1098
1075
  }
1099
- .vuuCheckboxIcon-checked-disabled::after {
1100
- background-color: var( --vuuCheckboxIcon-tick-checked-disabled, var(--vuu-color-gray-30) );
1101
- }
1102
1076
 
1103
- /* ../vuu-ui-controls/src/list/ListItem.css */
1104
- .vuuListItem {
1105
- --list-item-text-color: var(--salt-text-primary-foreground);
1106
- --list-item-background: var(--vuuList-item-background, var(--salt-selectable-background));
1107
- --list-item-text-color-active: var(--salt-text-primary-foreground);
1108
- --list-item-background-active: var(--salt-selectable-background-selected);
1109
- --list-item-alignItems: center;
1077
+ /* ../vuu-ui-controls/src/list/ChevronIcon.css */
1078
+ .vuuChevronIcon {
1079
+ --vuu-icon-size: 14px;
1080
+ --vuu-icon-left: -1px;
1081
+ --vuu-icon-top: -1px;
1082
+ height: var(--vuuChevronIcon-size, 14px);
1083
+ position: relative;
1084
+ width: var(--vuuChevronIcon-size, 14px);
1085
+ cursor: pointer;
1110
1086
  }
1111
- .vuuListItem.vuuHighlighted {
1112
- --saltCheckbox-icon-stroke: var(--salt-selectable-borderColor-hover);
1113
- --list-item-background: var(--salt-selectable-background-hover);
1087
+ .vuuChevronIcon:after {
1088
+ content: "";
1089
+ background-color: #777C94;
1090
+ left: var(--vuu-icon-left, auto);
1091
+ height: var(--vuu-icon-height, var(--vuu-icon-size, 12px));
1092
+ -webkit-mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);
1093
+ mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);
1094
+ mask-repeat: no-repeat;
1095
+ -webkit-mask-repeat: no-repeat;
1096
+ position: absolute;
1097
+ top: var(--vuu-icon-top, auto);
1098
+ width: var(--vuu-icon-width, var(--vuu-icon-size, 12px));
1114
1099
  }
1115
- .vuuListItemHeader {
1116
- font-weight: var(--salt-text-fontWeight-strong);
1100
+ .vuuChevronIcon.up {
1101
+ --vuu-icon-svg: var(--vuu-svg-chevron-up);
1117
1102
  }
1118
- .vuuListItemHeader[data-sticky] {
1119
- position: sticky;
1120
- top: 0;
1121
- z-index: 1;
1103
+ .vuuChevronIcon.down {
1104
+ --vuu-icon-svg: var(--vuu-svg-chevron-down);
1122
1105
  }
1123
- .vuuListItem {
1124
- color: var(--list-item-text-color);
1125
- cursor: var(--vuuList-item-cursor, pointer);
1126
- background: var(--vuuList-item-background, var(--list-item-background));
1127
- font-size: var(--salt-text-fontSize);
1128
- text-align: var(--salt-text-textAlign);
1129
- line-height: var(--salt-text-lineHeight);
1130
- height: var(--vuuList-item-height, var(--list-item-height, auto));
1131
- margin-bottom: var(--list-item-gap);
1132
- padding: 0 var(--vuuListItem-padding, var(--salt-size-unit));
1133
- left: 0;
1134
- right: 0;
1106
+ .vuuChevronIcon.left {
1107
+ --vuu-icon-svg: var(--vuu-svg-chevron-left);
1108
+ }
1109
+ .vuuChevronIcon.right {
1110
+ --vuu-icon-svg: var(--vuu-svg-chevron-right);
1111
+ }
1112
+
1113
+ /* ../vuu-ui-controls/src/editable-label/EditableLabel.css */
1114
+ .vuuEditableLabel {
1115
+ --editableLabel-padding: var(--vuuEditableLabel-padding, 6px);
1116
+ --editableLabel-height: var(--vuuEditableLabel-height, 26px);
1117
+ --saltInput-background: transparent;
1118
+ --saltInput-height: calc(var(--editableLabel-height) - 4px);
1119
+ --saltInput-minWidth: 14px;
1120
+ color: inherit;
1121
+ cursor: default;
1135
1122
  display: flex;
1123
+ flex-direction: column;
1124
+ font-size: var(--salt-text-fontSize);
1125
+ height: var(--editableLabel-height);
1126
+ justify-content: center;
1127
+ outline: none;
1128
+ overflow: hidden;
1129
+ padding: 0 var(--editableLabel-padding);
1136
1130
  position: relative;
1137
- align-items: var(--list-item-alignItems);
1131
+ text-overflow: ellipsis;
1138
1132
  white-space: nowrap;
1133
+ z-index: var(--salt-zIndex-default);
1139
1134
  }
1140
- .vuuListItem:last-child {
1141
- margin-bottom: 0px;
1135
+ .vuuEditableLabel:before {
1136
+ content: attr(data-text);
1137
+ display: block;
1138
+ height: 0px;
1139
+ visibility: hidden;
1140
+ white-space: pre-wrap;
1142
1141
  }
1143
- .vuuListItem-checkbox {
1144
- --list-item-background-active: var(--salt-selectable-background);
1145
- --list-item-text-color-active: var(--salt-text-primary-foreground);
1146
- --list-item-text-padding: 0 0 0 var(--salt-size-unit);
1142
+ .vuuEditableLabel .saltInput {
1143
+ font-weight: var(--salt-text-fontWeight);
1144
+ left: var(--editableLabel-padding, 0);
1145
+ padding: 0;
1146
+ outline-style: none;
1147
+ position: absolute;
1148
+ right: var(--editableLabel-padding, 0);
1149
+ top: var(--saltEditableLabel-top, 2px);
1150
+ width: auto;
1147
1151
  }
1148
- .vuuListItem[aria-selected=true]:not(.vuuListItem-checkbox) {
1149
- --list-item-background: var(--list-item-background-active);
1150
- color: var(--list-item-text-color-active);
1152
+ .vuuEditableLabel .saltInput-activationIndicator {
1153
+ display: none;
1151
1154
  }
1152
- .vuuListItem.vuuDisabled {
1153
- --list-item-text-color: var(--salt-text-primary-foreground-disabled);
1154
- cursor: var(--salt-selectable-cursor-disabled);
1155
- }
1156
- .vuuListItem.vuuFocusVisible {
1157
- outline-style: var(--salt-focused-outlineStyle);
1158
- outline-width: var(--salt-focused-outlineWidth);
1159
- outline-offset: -2px;
1160
- outline-color: var(--salt-focused-outlineColor);
1161
- }
1162
- .vuuListItem.vuuFocusVisible:after {
1163
- content: none;
1164
- }
1165
- .vuuListItem[aria-selected=true]:not(.vuuListItem-checkbox).vuuFocusVisible {
1166
- outline-color: var(--list-item-selected-focus-outlineColor);
1167
- }
1168
- .vuuListItem-textWrapper {
1155
+ .vuuEditableLabel-input {
1156
+ background-color: transparent;
1157
+ border: none;
1158
+ box-sizing: content-box;
1159
+ color: inherit;
1160
+ display: block;
1169
1161
  flex: 1;
1162
+ font: inherit;
1163
+ height: 20px;
1164
+ margin: 0;
1165
+ min-width: 0;
1166
+ outline: none;
1167
+ padding: 0;
1168
+ }
1169
+ .vuuEditableLabel-label {
1170
1170
  overflow: hidden;
1171
- padding: var(--list-item-text-padding, 0px);
1172
- white-space: nowrap;
1173
1171
  text-overflow: ellipsis;
1174
- }
1175
- .vuuListItem-proxy {
1176
- position: absolute !important;
1177
- visibility: hidden;
1178
- }
1179
- .vuuDraggable-list-item {
1180
- --vuuList-item-height: 24px;
1181
- background-color: white;
1182
- }
1183
- .vuuListItem.vuuDraggable-dragAway {
1184
- display: none;
1172
+ white-space: nowrap;
1185
1173
  }
1186
1174
 
1187
- /* ../vuu-ui-controls/src/drag-drop/Draggable.css */
1188
- .vuuDraggable {
1189
- background: transparent;
1190
- box-shadow: var(--salt-overlayable-shadow-drag);
1191
- cursor: var(--salt-draggable-grab-cursor-active);
1192
- position: absolute;
1193
- opacity: .95;
1194
- z-index: 2000;
1195
- }
1196
- .vuuDraggable-spacer {
1197
- display: var(--vuuDraggable-display, inline-block);
1198
- height: var(--vuuDraggable-spacer-height, var(--tabstrip-height));
1199
- transition: var(--vuuDraggable-transitionProp, width) 0.3s ease;
1200
- width: var(--vuuDraggable-spacer-width, 0);
1201
- }
1202
- .vuuDraggable-dropIndicatorPosition {
1203
- display: var(--saltDraggable-display, inline-block);
1204
- height: 0px;
1205
- width: 100%;
1206
- }
1207
- .vuuDraggable-dropIndicatorContainer {
1208
- transition: var(--vuuDraggable-transitionProp, top) 0.2s ease;
1209
- }
1210
- .vuuDraggable-dropIndicator {
1211
- background-color: var(--salt-palette-accent-background);
1212
- height: 2px;
1213
- width: 100%;
1214
- }
1215
- .vuuDraggable-dropIndicator:before {
1216
- content: "";
1217
- width: 6px;
1218
- height: 6px;
1219
- border-radius: 3px;
1220
- background-color: var(--salt-palette-accent-background);
1221
- position: absolute;
1222
- top: -2px;
1223
- left: -3px;
1224
- }
1225
- .vuuDraggable-settling {
1226
- transition-property: left, top;
1227
- transition-duration: .15s;
1228
- transition-timing-function: ease-out;
1175
+ /* ../vuu-ui-controls/src/vuu-input/VuuInput.css */
1176
+ .vuuInput {
1177
+ --vuu-icon-size: 16px;
1229
1178
  }
1230
- .vuuDraggable-spacer {
1231
- order: 1;
1179
+ .vuuInput-errorIcon:after {
1180
+ cursor: pointer;
1232
1181
  }
1233
1182
 
1234
- /* ../vuu-ui-controls/src/list/List.css */
1235
- .vuuList {
1236
- --list-background: var(--salt-container-primary-background);
1237
- --list-borderStyle: var(--vuuList-borderStyle,var(--salt-container-borderStyle));
1238
- --list-borderWidth: var(--salt-size-border);
1239
- --list-height: auto;
1240
- --list-item-height: var(--salt-size-stackable);
1241
- --list-item-gap: 0px;
1242
- --list-maxHeight: 100%;
1243
- --vuuDraggable-display: block;
1244
- --vuuDraggable-spacer-height: 0;
1245
- --vuuDraggable-spacer-width: 100%;
1246
- --vuuDraggable-transitionProp: height;
1247
- --vuuMeasuredContainer-height: var(--computed-list-height);
1248
- background: var(--list-background);
1249
- height: var(--saltList-height, var(--list-height));
1250
- max-height: var(--list-maxHeight);
1183
+ /* ../vuu-ui-controls/src/expando-input/ExpandoInput.css */
1184
+ .vuuExpandoInput {
1185
+ --salt-editable-secondary-background: white;
1186
+ --expandoInput-height: var(--vuuExpandoInput-height, 26px);
1187
+ --expandoInput-padding: var(--vuuExpandoInput-padding, 6px);
1188
+ --saltInput-height: calc(var(--vuuExpandoInput-height) - 4px);
1189
+ --saltInput-minWidth: var(--vuuExpandoInput-minWidth, 8px);
1190
+ border: var(--vuuExpandoInput-border, none);
1191
+ border-radius: var(--vuuExpandoInput-borderRadius, 0);
1192
+ color: inherit;
1193
+ cursor: default;
1194
+ display: inline-block;
1195
+ font-size: var(--salt-text-fontSize);
1196
+ height: var(--expandoInput-height);
1197
+ min-width: calc(var(--saltInput-minWidth) + 2 * var(--expandoInput-padding));
1251
1198
  outline: none;
1199
+ padding: 0 var(--expandoInput-padding);
1252
1200
  position: relative;
1253
- user-select: none;
1254
- width: var(--saltList-width, auto);
1255
- padding: 0 1px;
1256
- }
1257
- .vuuList-contentSized {
1258
- box-sizing: content-box;
1259
- }
1260
- .vuuList-borderless {
1261
- --list-borderStyle: none;
1262
- }
1263
- .vuuList-viewport {
1264
- height: var(--computed-list-height, var(--measured-px-height));
1265
- overflow: auto;
1266
- }
1267
- .vuuListHeader {
1268
- --saltList-item-background: var(--list-item-header-background);
1269
- color: var(--list-item-header-color);
1270
- font-weight: 600;
1271
- }
1272
- .vuuListHeader[data-sticky=true] {
1273
- --saltList-item-background: var(--list-background);
1274
- position: sticky;
1275
- top: 0;
1276
- z-index: 1;
1277
- }
1278
- .vuuList-collapsible .vuuListItemHeader:after {
1279
- border-width: var(--checkbox-borderWidth);
1280
- border-color: var(--checkbox-borderColor);
1281
- content: var(--list-item-header-twisty-content);
1282
- -webkit-mask: var(--list-svg-chevron-down) center center/12px 12px no-repeat;
1283
- mask: var(--list-svg-chevron-down) center center/12px 12px no-repeat;
1284
- background: var(--list-item-header-twisty-color);
1285
- height: 12px;
1286
- left: var(--list-item-header-twisty-left);
1287
- right: var(--list-item-header-twisty-right);
1288
- margin-top: -8px;
1289
- position: absolute;
1290
- top: var(--list-item-header-twisty-top);
1291
- transition: transform 0.3s;
1292
- width: 12px;
1293
1201
  }
1294
- .vuuListItemHeader[aria-expanded=false]:after {
1295
- transform: rotate(-90deg);
1202
+ .vuuExpandoInput:before {
1203
+ content: attr(data-text);
1204
+ display: block;
1205
+ height: 0px;
1206
+ visibility: hidden;
1207
+ white-space: pre-wrap;
1296
1208
  }
1297
- .vuuList-scrollingContentContainer {
1298
- box-sizing: inherit;
1299
- position: relative;
1209
+ .vuuExpandoInput-error {
1210
+ border-color: var(--vuu-color-red-50);
1300
1211
  }
1301
- .vuuList-virtualized .vuuListItem {
1302
- line-height: 30px;
1212
+ .vuuExpandoInput .saltInput {
1213
+ font-weight: var(--salt-text-fontWeight);
1214
+ left: var(--expandoInput-padding, 0);
1215
+ padding: 0;
1216
+ outline-style: none;
1303
1217
  position: absolute;
1304
- top: 0;
1305
- left: 0;
1306
- right: 0;
1307
- will-change: transform;
1308
- }
1309
- .vuuList.saltFocusVisible:after {
1310
- inset: 2px;
1218
+ right: var(--expandoInput-padding, 0);
1219
+ top: var(--vuuExpandoInput-top, 2px);
1220
+ width: auto;
1311
1221
  }
1312
-
1313
- /* ../vuu-ui-controls/src/list/RadioIcon.css */
1314
- .vuuRadioIcon {
1315
- --vuu-icon-size: 12px;
1316
- --vuu-icon-left: -1px;
1317
- --vuu-icon-top: -1px;
1318
- --vuu-icon-svg: var(--vuu-svg-radio);
1319
- border-style: solid;
1320
- border-color: var(--vuuRadioIcon-borderColor, var(--salt-selectable-borderColor));
1321
- border-radius: 50%;
1322
- border-width: 1px;
1323
- display: inline-block;
1324
- height: var(--vuuRadioIcon-size, 12px);
1325
- position: relative;
1326
- width: var(--vuuRadioIcon-size, 12px);
1222
+ .vuuExpandoInput .saltInput-activationIndicator {
1223
+ display: none;
1327
1224
  }
1328
- .vuuRadioIcon-checked {
1329
- background-image: var(--vuu-svg-radio);
1225
+ .vuuExpandoInput-input {
1226
+ background-color: transparent;
1330
1227
  border: none;
1331
- background-repeat: no-repeat;
1332
- }
1333
- .vuuRadioIcon-checked:after {
1334
- content: "";
1335
- left: var(--vuu-icon-left, auto);
1336
- height: var(--vuu-icon-height, var(--vuu-icon-size, 12px));
1337
- -webkit-mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);
1338
- mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);
1339
- mask-repeat: no-repeat;
1340
- -webkit-mask-repeat: no-repeat;
1341
- position: absolute;
1342
- top: var(--vuu-icon-top, auto);
1343
- width: var(--vuu-icon-width, var(--vuu-icon-size, 12px));
1344
- }
1345
-
1346
- /* ../vuu-ui-controls/src/list/ChevronIcon.css */
1347
- .vuuChevronIcon {
1348
- --vuu-icon-size: 14px;
1349
- --vuu-icon-left: -1px;
1350
- --vuu-icon-top: -1px;
1351
- height: var(--vuuChevronIcon-size, 14px);
1352
- position: relative;
1353
- width: var(--vuuChevronIcon-size, 14px);
1354
- cursor: pointer;
1355
- }
1356
- .vuuChevronIcon:after {
1357
- content: "";
1358
- background-color: #777C94;
1359
- left: var(--vuu-icon-left, auto);
1360
- height: var(--vuu-icon-height, var(--vuu-icon-size, 12px));
1361
- -webkit-mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);
1362
- mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);
1363
- mask-repeat: no-repeat;
1364
- -webkit-mask-repeat: no-repeat;
1365
- position: absolute;
1366
- top: var(--vuu-icon-top, auto);
1367
- width: var(--vuu-icon-width, var(--vuu-icon-size, 12px));
1368
- }
1369
- .vuuChevronIcon.up {
1370
- --vuu-icon-svg: var(--vuu-svg-chevron-up);
1371
- }
1372
- .vuuChevronIcon.down {
1373
- --vuu-icon-svg: var(--vuu-svg-chevron-down);
1374
- }
1375
- .vuuChevronIcon.left {
1376
- --vuu-icon-svg: var(--vuu-svg-chevron-left);
1377
- }
1378
- .vuuChevronIcon.right {
1379
- --vuu-icon-svg: var(--vuu-svg-chevron-right);
1380
- }
1381
-
1382
- /* ../vuu-ui-controls/src/editable-label/EditableLabel.css */
1383
- .vuuEditableLabel {
1384
- --editableLabel-padding: var(--vuuEditableLabel-padding, 6px);
1385
- --editableLabel-height: var(--vuuEditableLabel-height, 26px);
1386
- --saltInput-background: transparent;
1387
- --saltInput-height: calc(var(--editableLabel-height) - 4px);
1388
- --saltInput-minWidth: 14px;
1389
- color: inherit;
1390
- cursor: default;
1391
- display: flex;
1392
- flex-direction: column;
1393
- font-size: var(--salt-text-fontSize);
1394
- height: var(--editableLabel-height);
1395
- justify-content: center;
1396
- outline: none;
1397
- overflow: hidden;
1398
- padding: 0 var(--editableLabel-padding);
1399
- position: relative;
1400
- text-overflow: ellipsis;
1401
- white-space: nowrap;
1402
- z-index: var(--salt-zIndex-default);
1403
- }
1404
- .vuuEditableLabel:before {
1405
- content: attr(data-text);
1406
- display: block;
1407
- height: 0px;
1408
- visibility: hidden;
1409
- white-space: pre-wrap;
1410
- }
1411
- .vuuEditableLabel .saltInput {
1412
- font-weight: var(--salt-text-fontWeight);
1413
- left: var(--editableLabel-padding, 0);
1414
- padding: 0;
1415
- outline-style: none;
1416
- position: absolute;
1417
- right: var(--editableLabel-padding, 0);
1418
- top: var(--saltEditableLabel-top, 2px);
1419
- width: auto;
1420
- }
1421
- .vuuEditableLabel .saltInput-activationIndicator {
1422
- display: none;
1423
- }
1424
- .vuuEditableLabel-input {
1425
- background-color: transparent;
1426
- border: none;
1427
- box-sizing: content-box;
1428
- color: inherit;
1429
- display: block;
1430
- flex: 1;
1431
- font: inherit;
1432
- height: 20px;
1433
- margin: 0;
1434
- min-width: 0;
1435
- outline: none;
1436
- padding: 0;
1437
- }
1438
- .vuuEditableLabel-label {
1439
- overflow: hidden;
1440
- text-overflow: ellipsis;
1441
- white-space: nowrap;
1442
- }
1443
-
1444
- /* ../vuu-ui-controls/src/expando-input/ExpandoInput.css */
1445
- .vuuExpandoInput {
1446
- --salt-editable-secondary-background: white;
1447
- --expandoInput-height: var(--vuuExpandoInput-height, 26px);
1448
- --expandoInput-padding: var(--vuuExpandoInput-padding, 6px);
1449
- --saltInput-height: calc(var(--vuuExpandoInput-height) - 4px);
1450
- --saltInput-minWidth: var(--vuuExpandoInput-minWidth, 8px);
1451
- border: var(--vuuExpandoInput-border, none);
1452
- border-radius: var(--vuuExpandoInput-borderRadius, 0);
1453
- color: inherit;
1454
- cursor: default;
1455
- display: inline-block;
1456
- font-size: var(--salt-text-fontSize);
1457
- height: var(--expandoInput-height);
1458
- min-width: calc(var(--saltInput-minWidth) + 2 * var(--expandoInput-padding));
1459
- outline: none;
1460
- padding: 0 var(--expandoInput-padding);
1461
- position: relative;
1462
- }
1463
- .vuuExpandoInput:before {
1464
- content: attr(data-text);
1465
- display: block;
1466
- height: 0px;
1467
- visibility: hidden;
1468
- white-space: pre-wrap;
1469
- }
1470
- .vuuExpandoInput-error {
1471
- border-color: var(--vuu-color-red-50);
1472
- }
1473
- .vuuExpandoInput .saltInput {
1474
- font-weight: var(--salt-text-fontWeight);
1475
- left: var(--expandoInput-padding, 0);
1476
- padding: 0;
1477
- outline-style: none;
1478
- position: absolute;
1479
- right: var(--expandoInput-padding, 0);
1480
- top: var(--vuuExpandoInput-top, 2px);
1481
- width: auto;
1482
- }
1483
- .vuuExpandoInput .saltInput-activationIndicator {
1484
- display: none;
1485
- }
1486
- .vuuExpandoInput-input {
1487
- background-color: transparent;
1488
- border: none;
1489
- box-sizing: content-box;
1490
- display: block;
1491
- flex: 1;
1492
- font: inherit;
1493
- height: 20px;
1494
- margin: 0;
1495
- min-width: 0;
1496
- outline: none;
1497
- padding: 0;
1228
+ box-sizing: content-box;
1229
+ display: block;
1230
+ flex: 1;
1231
+ font: inherit;
1232
+ height: 20px;
1233
+ margin: 0;
1234
+ min-width: 0;
1235
+ outline: none;
1236
+ padding: 0;
1498
1237
  }
1499
1238
 
1500
1239
  /* ../vuu-ui-controls/src/inputs/Checkbox.css */
@@ -1509,992 +1248,464 @@ path.drop-target.centre {
1509
1248
  font-feature-settings:
1510
1249
  "ss02" on,
1511
1250
  "ss01" on,
1512
- "salt" on,
1513
- "liga" off;
1514
- font-size: 12px;
1515
- font-weight: 400;
1516
- cursor: pointer;
1517
- }
1518
-
1519
- /* ../vuu-ui-controls/src/inputs/RadioButton.css */
1520
- .vuuRadioButton {
1521
- display: flex;
1522
- height: 24px;
1523
- align-items: center;
1524
- gap: 6px;
1525
- color: var(--light-text-primary, #15171B);
1526
- font-family: Nunito Sans A-Variant, sans-serif;
1527
- font-feature-settings:
1528
- "ss02" on,
1529
- "ss01" on,
1530
- "salt" on,
1531
- "liga" off;
1532
- font-size: 12px;
1533
- font-weight: 400;
1534
- cursor: pointer;
1535
- }
1536
- .radio {
1537
- position: relative;
1538
- height: 12px;
1539
- }
1540
- input[type=radio] {
1541
- position: absolute;
1542
- appearance: none;
1543
- width: 100%;
1544
- height: 100%;
1545
- border-radius: 50%;
1546
- margin: 0;
1547
- top: 0;
1548
- }
1549
-
1550
- /* ../vuu-table/src/column-resizing/ColumnResizer.css */
1551
- .vuuColumnResizerNext {
1552
- background-color: var(--columnResizer-color);
1553
- cursor: col-resize;
1554
- height: var(--header-height);
1555
- margin-left: var(--columnResizer-left, auto);
1556
- position: absolute;
1557
- right: -5px;
1558
- width: 8px;
1559
- z-index: 1;
1560
- }
1561
- .vuuColumnResizerNext:hover {
1562
- --columnResizer-color: var(--vuu-color-purple-10);
1563
- }
1564
- .vuuColumnResizerNext:after {
1565
- background-color: var(--columnResizer-color, var(--salt-separable-tertiary-borderColor));
1566
- bottom: 0;
1567
- content: "";
1568
- position: absolute;
1569
- top: 0;
1570
- right: 3px;
1571
- height: var(--columnResizer-height, 0);
1572
- width: 2px;
1573
- }
1574
-
1575
- /* ../vuu-table/src/column-header-pill/ColumnHeaderPill.css */
1576
- .vuuColumnHeaderPill {
1577
- --vuu-icon-size: 14px;
1578
- --menu-item-icon-color: black;
1579
- --vuu-icon-color: white;
1580
- --vuu-icon-height: 12px;
1581
- --vuu-icon-width: 12px;
1582
- align-items: center;
1583
- background: var(--salt-taggable-background-active);
1584
- color: white;
1585
- border-radius: 4px;
1586
- flex: var(--vuuColumnHeaderPill-flex, none);
1587
- font-size: 11px;
1588
- gap: 4px;
1589
- height: 16px;
1590
- display: flex;
1591
- margin: var(--vuuColumnHeaderPill-margin, 0);
1592
- padding: 0 6px;
1593
- position: relative;
1594
- }
1595
- .vuuColumnHeaderPill:hover {
1596
- --vuu-icon-color: var(--vuu-color-gray-80);
1597
- background-color: var(--salt-taggable-background-hover);
1598
- color: var(--vuu-color-gray-80);
1599
- }
1600
- .vuuColumnHeaderPill-removeButton {
1601
- cursor: pointer;
1602
- }
1603
-
1604
- /* ../vuu-table/src/column-header-pill/GroupColumnPill.css */
1605
- .vuuSortPosition {
1606
- font-size: 11px;
1607
- font-weight: 700;
1608
- padding-top: 1px;
1609
- }
1610
-
1611
- /* ../vuu-table/src/column-header-pill/SortIndicator.css */
1612
- .vuuSortPosition {
1613
- font-size: 11px;
1614
- font-weight: 700;
1615
- padding-top: 1px;
1616
- }
1617
-
1618
- /* ../vuu-table/src/header-cell/GroupHeaderCell.css */
1619
- .vuu-theme {
1620
- --svg-spinner: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="rgb(38, 112, 169)" d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"><animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1s" from="0 50 50" to="360 50 50" repeatCount="indefinite" /></path></svg>');
1621
- }
1622
- .vuuTableGroupHeaderCell {
1623
- --vuuColumnHeaderPill-margin: 0;
1624
- --cell-align: "flex-start";
1625
- text-align: left;
1626
- background: var(--dataTable-background);
1627
- cursor: default;
1628
- height: var(--vuuTableHeaderHeight);
1629
- }
1630
- .vuuTableGroupHeaderCell-inner {
1631
- align-items: center;
1632
- display: flex;
1633
- gap: 4px;
1634
- height: 100%;
1635
- padding-left: 1px;
1636
- }
1637
- .vuuTableGroupHeaderCell-col {
1638
- align-items: center;
1639
- background-color: inherit;
1640
- display: inline-flex;
1641
- flex: 0 1 auto;
1642
- height: calc(var(--vuuTableHeaderHeight) - 2px);
1643
- justify-content: space-between;
1644
- padding-right: 8px;
1645
- position: relative;
1646
- }
1647
- .vuuTableGroupHeaderCell-label {
1648
- align-items: center;
1649
- display: flex;
1650
- flex: 0 0 auto;
1651
- }
1652
- .vuuTableGroupHeaderCell-close {
1653
- --vuu-icon-height: 18px;
1654
- --vuu-icon-width: 18px;
1655
- cursor: pointer;
1656
- left: 3px;
1657
- }
1658
- .vuuTableGroupHeaderCell-resizing {
1659
- --columnResizer-color: var(--salt-color-blue-500);
1660
- --columnResizer-height: var(--table-height);
1661
- --columnResizer-width: 2px;
1662
- }
1663
- .vuuTableGroupHeaderCell-pending {
1664
- --pending-content: "";
1665
- }
1666
- .vuuTableGroupHeaderCell-col:has(+ .vuuColumnResizer):after {
1667
- content: var(--pending-content);
1668
- width: 24px;
1669
- height: 24px;
1670
- background-image: var(--svg-spinner);
1671
- background-repeat: no-repeat;
1672
- background-size: cover;
1673
- }
1674
-
1675
- /* ../vuu-table/src/column-menu/ColumnMenu.css */
1676
- .vuuMenuItem {
1677
- --vuu-svg-cog: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M12.9533 8.65331C12.98 8.43998 13 8.22665 13 7.99998C13 7.77331 12.98 7.55998 12.9533 7.34665L14.36 6.24665C14.4867 6.14665 14.52 5.96665 14.44 5.81998L13.1067 3.51331C13.0267 3.36665 12.8467 3.31331 12.7 3.36665L11.04 4.03331C10.6933 3.76665 10.32 3.54665 9.91333 3.37998L9.66 1.61331C9.64 1.45331 9.5 1.33331 9.33333 1.33331H6.66667C6.5 1.33331 6.36 1.45331 6.34 1.61331L6.08667 3.37998C5.68 3.54665 5.30667 3.77331 4.96 4.03331L3.3 3.36665C3.14667 3.30665 2.97333 3.36665 2.89333 3.51331L1.56 5.81998C1.47333 5.96665 1.51333 6.14665 1.64 6.24665L3.04667 7.34665C3.02 7.55998 3 7.77998 3 7.99998C3 8.21998 3.02 8.43998 3.04667 8.65331L1.64 9.75331C1.51333 9.85331 1.48 10.0333 1.56 10.18L2.89333 12.4866C2.97333 12.6333 3.15333 12.6866 3.3 12.6333L4.96 11.9666C5.30667 12.2333 5.68 12.4533 6.08667 12.62L6.34 14.3866C6.36 14.5466 6.5 14.6666 6.66667 14.6666H9.33333C9.5 14.6666 9.64 14.5466 9.66 14.3866L9.91333 12.62C10.32 12.4533 10.6933 12.2266 11.04 11.9666L12.7 12.6333C12.8533 12.6933 13.0267 12.6333 13.1067 12.4866L14.44 10.18C14.52 10.0333 14.4867 9.85331 14.36 9.75331L12.9533 8.65331V8.65331ZM8 10.3333C6.71333 10.3333 5.66667 9.28665 5.66667 7.99998C5.66667 6.71331 6.71333 5.66665 8 5.66665C9.28667 5.66665 10.3333 6.71331 10.3333 7.99998C10.3333 9.28665 9.28667 10.3333 8 10.3333Z"/></svg>');
1678
- }
1679
- .vuuTable-columnMenu {
1680
- --vuu-icon-color: #606477;
1681
- --vuu-icon-height: 20px;
1682
- --vuu-icon-left: 0px;
1683
- --vuu-icon-size: 16px;
1684
- --vuu-icon-top: 0px;
1685
- --vuu-icon-width: 20px;
1686
- border-radius: 4px;
1687
- cursor: pointer;
1688
- display: inline-block;
1689
- flex: 0 0 20px;
1690
- padding: 2px;
1691
- margin: var(--vuuTable-columnMenu-margin, 0);
1692
- width: auto;
1693
- }
1694
- .vuuTable-columnMenu:hover {
1695
- --vuu-icon-color: #15171B;
1696
- background-color: #F37880;
1697
- }
1698
- .vuuTable-columnMenu-open:hover,
1699
- .vuuTable-columnMenu-open {
1700
- background-color: #6D18BD;
1701
- --vuu-icon-color: white;
1702
- }
1703
- [data-icon=cog] {
1704
- --vuu-icon-svg: var(--vuu-svg-cog);
1705
- --vuu-icon-size: 14px;
1706
- }
1707
-
1708
- /* ../vuu-table/src/header-cell/HeaderCell.css */
1709
- .vuuTableGroupHeaderCell,
1710
- .vuuTableHeaderCell {
1711
- --cell-align: "flex-start";
1712
- --vuuColumnHeaderPill-margin: 0;
1713
- --vuuColumnHeaderPill-flex: 0 0 24px;
1714
- align-items: center;
1715
- background-color: var(--vuuTableHeaderCell-background, inherit);
1716
- border-bottom: 1px solid #ccc;
1717
- border-right-color: var(--cell-borderColor);
1718
- border-right-style: solid;
1719
- border-right-width: 1px;
1720
- box-sizing: border-box;
1721
- cursor: default;
1722
- display: inline-flex;
1723
- gap: 4px;
1724
- height: var(--header-height);
1725
- padding: 0 12px 0 4px;
1726
- position: relative;
1727
- vertical-align: top;
1728
- }
1729
- .vuuTableHeaderCell-right {
1730
- --columnResizer-left: 0;
1731
- --vuuTable-columnMenu-margin: 0;
1732
- --vuuColumnHeaderPill-margin: 0 3px 0 0;
1733
- --column-menu-left: 2px;
1734
- justify-content: flex-end;
1735
- padding: 0 3px 0 12px;
1736
- }
1737
- .vuuTableHeaderCell-label {
1738
- flex: 0 1 auto;
1739
- line-height: calc(var(--header-height) - 1px);
1740
- overflow: hidden;
1741
- text-overflow: ellipsis;
1742
- white-space: nowrap;
1743
- }
1744
- .vuuTableHeaderCell-right .vuuTableHeaderCell-label {
1745
- text-align: right;
1746
- }
1747
- .vuuTableHeaderCell-resizing {
1748
- --columnResizer-height: var(--table-height);
1749
- }
1750
- .vuuTableHeaderCell.vuuPinLeft {
1751
- padding-left: 2px;
1752
- }
1753
- .vuuTableHeaderCell.vuuPinLeft.vuuEndPin .vuuColumnResizerNext:before {
1754
- --height: calc(var(--table-height) - var(--horizontal-scrollbar-height));
1755
- --inset-r: calc(var(--pin-width) - 2px);
1756
- --inset-b: calc(var(--height) - 2px);
1757
- --clip-path: polygon( 0% 0%, 0% 120%, 2px 120%, 2px 2px, var(--inset-r) 2px, var(--inset-r) var(--inset-b), 2px var(--inset-b), 2px 120%, 120% 120%, 120% 0% );
1758
- background-color: transparent;
1759
- border-color: var(--vuu-color-gray-40);
1760
- border-width: 1px;
1761
- border-style: solid solid solid solid;
1762
- border-radius: 4px;
1763
- box-shadow: 2px 1px 4px 0px rgba(0, 0, 0, 0.10);
1764
- clip-path: var(--clip-path);
1765
- content: "";
1766
- position: absolute;
1767
- width: var(--pin-width);
1768
- top: 0;
1769
- bottom: 0;
1770
- right: 3px;
1771
- height: var(--height);
1772
- z-index: -5;
1773
- }
1774
- .vuuTableHeaderCell.vuuPinRight.vuuEndPin .vuuColumnResizerNext:before {
1775
- --height: calc(var(--table-height) - var(--horizontal-scrollbar-height));
1776
- --inset-r: calc(var(--pin-width) - 2px);
1777
- --inset-b: calc(var(--height) - 2px);
1778
- --clip-path: polygon( -20% 0%, -20% 120%, 2px 120%, 2px 2px, var(--inset-r) 2px, var(--inset-r) var(--inset-b), 2px var(--inset-b), 2px 120%, 120% 120%, 120% 0% );
1779
- background-color: transparent;
1780
- border-color: #A9AAAD;
1781
- border-width: 1px;
1782
- border-style: solid solid solid solid;
1783
- border-radius: 4px;
1784
- box-shadow: -2px 1px 4px 0px rgba(0, 0, 0, 0.10);
1785
- clip-path: var(--clip-path);
1786
- content: "";
1787
- position: absolute;
1788
- width: var(--pin-width);
1789
- top: 0;
1790
- bottom: 0;
1791
- right: 0px;
1792
- height: var(--height);
1793
- z-index: -5;
1794
- }
1795
- .vuuTableHeaderCell.vuuDraggable-dragAway {
1796
- display: none;
1797
- }
1798
- .vuuTable-headingCell {
1799
- background: var(--dataTable-background);
1800
- border-color: var(--salt-separable-tertiary-borderColor);
1801
- border-style: solid solid solid none;
1802
- border-width: 1px;
1803
- color: var(--salt-text-secondary-foreground);
1804
- display: inline-block;
1805
- height: var(--header-height);
1806
- padding: 0 !important;
1807
- }
1808
-
1809
- /* ../vuu-table/src/table-cell/TableCell.css */
1810
- .vuuTableCell {
1811
- border-right-color: var(--cell-borderColor);
1812
- border-right-style: solid;
1813
- border-right-width: 1px;
1814
- display: inline-block;
1815
- height: 100%;
1816
- overflow: hidden;
1817
- padding: 0 11px 0 12px;
1818
- text-overflow: ellipsis;
1819
- vertical-align: top;
1820
- }
1821
- .vuuTableCell-right {
1822
- text-align: right;
1823
- }
1824
- .vuuTableCell-editable {
1825
- display: inline-flex;
1826
- line-height: 18px;
1827
- padding-bottom: 1px;
1828
- padding-top: 1px;
1829
- text-overflow: unset;
1830
- }
1831
- .vuuTableCell:focus {
1832
- outline: var(--vuuTableCell-outline, solid var(--vuu-color-purple-10) 2px);
1833
- outline-offset: -2px;
1834
- box-shadow: inset 0 0 0 var(--cell-outline-width) white;
1835
- border-bottom: none;
1836
- }
1837
- .vuuTableRow-selected .vuuTableCell:not(.vuuTableCell-editable):focus {
1838
- outline: var(--vuuTableCell-outline, solid var(--vuu-color-purple-10) 2px);
1839
- outline-offset: -1px;
1840
- }
1841
- .vuuTableCell-editable:focus {
1842
- outline: none;
1843
- }
1844
-
1845
- /* ../vuu-table/src/table-cell/TableGroupCell.css */
1846
- .vuuTableGroupCell {
1847
- --group-cell-spacer-width: 20px;
1848
- align-items: center;
1849
- border-right-color: var(--vuuTableGroupCell-borderColor, var(--salt-separable-tertiary-borderColor));
1850
- border-right-style: solid;
1851
- border-right-width: 1px;
1852
- cursor: pointer;
1853
- display: inline-flex;
1854
- height: var(--row-height);
1855
- line-height: 16px;
1856
- }
1857
- .vuuTableGroupCell-toggle {
1858
- --vuu-icon-height: 16px;
1859
- --vuu-icon-size: 16px;
1860
- --vuu-icon-width: 8px;
1861
- margin-right: 4px;
1862
- transition: transform 0.25s;
1863
- transform: var(--toggle-icon-transform);
1864
- }
1865
- .vuuTableGroupCell-spacer {
1866
- width: var(--group-cell-spacer-width);
1867
- }
1868
-
1869
- /* ../vuu-table/src/Row.css */
1870
- .vuuTableRow {
1871
- background: var(--row-background,#fff);
1872
- border-bottom: 1px solid var(--row-borderColor);
1873
- box-sizing: border-box;
1874
- height: var(--row-height);
1875
- line-height: calc(var(--row-height) - 1px);
1876
- position: absolute;
1877
- top: 0;
1878
- white-space: nowrap;
1879
- }
1880
- .vuuTableRow-even {
1881
- --row-background: var(--row-background-even);
1882
- }
1883
- .vuuTableRow-highlighted {
1884
- background-color: var(--vuu-color-gray-10);
1885
- }
1886
- .vuuTableRow-selected,
1887
- .vuuTableRow-selectedEnd {
1888
- background-color: rgb(235, 235, 236);
1889
- }
1890
- .vuuTableRow-selectedStart {
1891
- --vuu-selection-decorator-left-radius: 5px 0 0 0;
1892
- --vuu-selection-decorator-right-radius: 0 5px 0 0;
1893
- border-radius: 5px 5px 0 0;
1894
- }
1895
- .vuuTableRow-selectedEnd {
1896
- --vuu-selection-decorator-left-radius: 0 0 0 5px;
1897
- --vuu-selection-decorator-right-radius: 0 0 5px 0;
1898
- border-radius: 0 0 5px 5px;
1899
- }
1900
- .vuuTableRow-selectedStart.vuuTableRow-selectedEnd {
1901
- --vuu-selection-decorator-left-radius: 5px 0 0 5px;
1902
- --vuu-selection-decorator-right-radius: 0 5px 5px 0;
1903
- border-radius: 5px 5px 5px 5px;
1904
- }
1905
- .vuuTableRow-selectedStart:after {
1906
- content: "";
1907
- position: absolute;
1908
- top: 0;
1909
- left: 4px;
1910
- height: 1px;
1911
- background-color: var(--vuu-color-purple-10);
1912
- width: calc(var(--content-width) - 8px);
1913
- z-index: 1;
1914
- }
1915
- .vuuTableRow-selectedEnd {
1916
- border-bottom-color: var(--vuu-color-purple-10);
1917
- }
1918
- .vuuTableRow-selectionDecorator {
1919
- background-color: var(--vuu-selection-decorator-bg, white);
1920
- display: inline-block;
1921
- position: relative;
1922
- height: var(--row-height);
1923
- width: 4px;
1924
- z-index: 2;
1925
- }
1926
- .vuuTableRow-selectionDecorator.vuuStickyLeft {
1927
- left: 0;
1928
- position: sticky;
1929
- }
1930
- .vuuTableRow-selectionDecorator.vuuStickyRight {
1931
- right: 0;
1932
- position: sticky;
1933
- }
1934
- .vuuTableRow-selected {
1935
- --vuu-selection-decorator-bg: var(--vuu-color-purple-10);
1936
- }
1937
- .vuuTableRow-selectedStart {
1938
- --vuu-selection-decorator-bg: white;
1939
- }
1940
- .vuuTableRow-selectedEnd {
1941
- --vuu-selection-decorator-bg: white;
1942
- }
1943
- .vuuTableRow-selectedStart.vuuTableRow-selectedEnd {
1944
- }
1945
- .vuuTableRow-selectedStart .vuuTableRow-selectionDecorator:before,
1946
- .vuuTableRow-selectedEnd .vuuTableRow-selectionDecorator:before {
1947
- content: "";
1948
- inset: 0;
1949
- position: absolute;
1950
- background-color: var(--vuu-color-purple-10);
1951
- }
1952
- .vuuTableRow-selectionDecorator.vuuStickyLeft:before {
1953
- border-radius: var(--vuu-selection-decorator-left-radius, 0);
1954
- }
1955
- .vuuTableRow-selectionDecorator.vuuStickyRight:before {
1956
- border-radius: var(--vuu-selection-decorator-right-radius, 0);
1957
- }
1958
- .vuuTableRow-expanded {
1959
- --toggle-icon-transform: rotate(90deg);
1960
- }
1961
- .vuuDraggable .vuuTableRow {
1962
- --cell-borderColor: transparent;
1963
- --vuu-selection-decorator-bg: transparent;
1964
- transform: none !important;
1965
- z-index: 1;
1966
- }
1967
-
1968
- /* ../vuu-table-extras/src/cell-renderers/progress-cell/ProgressCell.css */
1969
- .vuuProgressCell {
1970
- align-items: center;
1971
- display: flex;
1972
- }
1973
- .vuuProgressCell-track {
1974
- display: inline-block;
1975
- flex: auto 1 1;
1976
- height: 4px;
1977
- overflow: hidden;
1978
- position: relative;
1979
- }
1980
- .vuuProgressCell-bg {
1981
- background-color: var(--salt-measured-background);
1982
- display: inline-block;
1983
- height: 2px;
1984
- left: 0;
1985
- position: absolute;
1986
- top: 1px;
1987
- width: 100%;
1988
- }
1989
- .vuuProgressCell-bar {
1990
- background-color: var(--salt-measured-fill);
1991
- display: inline-block;
1992
- height: 100%;
1993
- left: 0;
1994
- position: absolute;
1995
- top: 0;
1996
- transform: translateX(var(--progress-bar-pct, -100%));
1997
- width: 100%;
1998
- }
1999
- .vuuProgressCell-text {
2000
- flex: 35px 0 0;
2001
- text-align: right;
2002
- }
2003
-
2004
- /* ../vuu-table-extras/src/cell-renderers-next/background-cell/BackgroundCell.css */
2005
- .vuuTable td:has(> .vuuBackgroundCell) {
2006
- padding: 0;
2007
- text-align: right;
2008
- }
2009
- .vuuBackgroundCell {
2010
- color: var(--background-cell-color);
2011
- padding-right: var(--salt-size-unit);
2012
- position: relative;
2013
- z-index: -1;
2014
- }
2015
- .vuuBackgroundCell-flasher {
2016
- background-color: var(--background-cell-background);
2017
- position: absolute;
2018
- left: 0;
2019
- right: 0;
2020
- top: 0;
2021
- bottom: 0;
2022
- z-index: -1;
2023
- }
2024
- .vuuBackgroundCell-flasher {
2025
- text-align: left;
2026
- }
2027
- .vuuBackgroundCell-flasher + .num {
2028
- padding-left: 8px;
2029
- }
2030
- .right .vuuBackgroundCell-flasher {
2031
- text-align: right;
2032
- }
2033
- .right .vuuBackgroundCell-flasher + .num {
2034
- padding-right: 8px;
2035
- }
2036
- .vuuBackgroundCell-arrowOnly > .vuuBackgroundCell-flasher {
2037
- background-color: transparent;
2038
- }
2039
- .vuuBackgroundCell-backgroundOnly.up1,
2040
- .vuuBackgroundCell-backgroundArrow.up1 {
2041
- animation-duration: 30s;
2042
- animation-name: reactbgup1;
2043
- }
2044
- .vuuBackgroundCell-backgroundOnly.up2,
2045
- .vuuBackgroundCell-backgroundArrow.up2 {
2046
- animation-duration: 30s;
2047
- animation-name: reactbgup2;
2048
- }
2049
- .vuuBackgroundCell-backgroundOnly.down1,
2050
- .vuuBackgroundCell-backgroundArrow.down1 {
2051
- animation-duration: 30s;
2052
- animation-name: reactbgdown1;
2053
- }
2054
- .vuuBackgroundCell-backgroundOnly.down2,
2055
- .vuuBackgroundCell-backgroundArrow.down2 {
2056
- animation-duration: 30s;
2057
- animation-name: reactbgdown2;
2058
- }
2059
- .up1.vuuBackgroundCell-arrowOnly > .vuuBackgroundCell-flasher {
2060
- animation-duration: 30s;
2061
- animation-name: reactarrowup1;
2062
- }
2063
- .up2.vuuBackgroundCell-arrowOnly > .vuuBackgroundCell-flasher {
2064
- animation-duration: 30s;
2065
- animation-name: reactarrowup2;
2066
- }
2067
- .down1.vuuBackgroundCell-arrowOnly > .vuuBackgroundCell-flasher {
2068
- animation-duration: 30s;
2069
- animation-name: reactarrowdown1;
2070
- }
2071
- .down2.vuuBackgroundCell-arrowOnly > .vuuBackgroundCell-flasher {
2072
- animation-duration: 30s;
2073
- animation-name: reactarrowdown2;
2074
- }
2075
- .up1.vuuBackgroundCell-arrowBackground > .vuuBackgroundCell-flasher {
2076
- animation-duration: 30s;
2077
- animation-name: reactbgarrowup1;
1251
+ "salt" on,
1252
+ "liga" off;
1253
+ font-size: 12px;
1254
+ font-weight: 400;
1255
+ cursor: pointer;
2078
1256
  }
2079
- .up2.vuuBackgroundCell-arrowBackground > .vuuBackgroundCell-flasher {
2080
- animation-duration: 30s;
2081
- animation-name: reactbgarrowup2;
1257
+
1258
+ /* ../vuu-ui-controls/src/inputs/RadioButton.css */
1259
+ .vuuRadioButton {
1260
+ display: flex;
1261
+ height: 24px;
1262
+ align-items: center;
1263
+ gap: 6px;
1264
+ color: var(--light-text-primary, #15171B);
1265
+ font-family: Nunito Sans A-Variant, sans-serif;
1266
+ font-feature-settings:
1267
+ "ss02" on,
1268
+ "ss01" on,
1269
+ "salt" on,
1270
+ "liga" off;
1271
+ font-size: 12px;
1272
+ font-weight: 400;
1273
+ cursor: pointer;
2082
1274
  }
2083
- .down1.vuuBackgroundCell-arrowBackground > .vuuBackgroundCell-flasher {
2084
- animation-duration: 30s;
2085
- animation-name: reactbgarrowdown1;
1275
+ .radio {
1276
+ position: relative;
1277
+ height: 12px;
2086
1278
  }
2087
- .down2.vuuBackgroundCell-arrowBackground > .vuuBackgroundCell-flasher {
2088
- animation-duration: 30s;
2089
- animation-name: reactbgarrowdown2;
1279
+ input[type=radio] {
1280
+ position: absolute;
1281
+ -webkit-appearance: none;
1282
+ appearance: none;
1283
+ width: 100%;
1284
+ height: 100%;
1285
+ border-radius: 50%;
1286
+ margin: 0;
1287
+ top: 0;
2090
1288
  }
2091
1289
 
2092
- /* ../vuu-table-extras/src/cell-renderers-next/background-cell/FlashingBackground.css */
2093
- @keyframes reactbgup1 {
2094
- from {
2095
- background-color: var(--vuu-color-green-50);
2096
- color: white;
2097
- }
2098
- to {
2099
- background-color: transparent;
2100
- color: var(--vuu-color-gray-80);
2101
- }
2102
- }
2103
- @keyframes reactbgup2 {
2104
- from {
2105
- background-color: var(--vuu-color-green-50);
2106
- color: #ffffff;
2107
- }
2108
- to {
2109
- background-color: transparent;
2110
- color: var(--vuu-color-gray-80);
2111
- }
1290
+ /* ../vuu-table/src/column-header-pill/ColumnHeaderPill.css */
1291
+ .vuuColumnHeaderPill {
1292
+ --vuu-icon-size: 14px;
1293
+ --menu-item-icon-color: black;
1294
+ --vuu-icon-color: white;
1295
+ --vuu-icon-height: 12px;
1296
+ --vuu-icon-width: 12px;
1297
+ align-items: center;
1298
+ background: var(--salt-taggable-background-active);
1299
+ color: white;
1300
+ border-radius: 4px;
1301
+ flex: var(--vuuColumnHeaderPill-flex, none);
1302
+ font-size: 11px;
1303
+ gap: 4px;
1304
+ height: 16px;
1305
+ display: flex;
1306
+ margin: var(--vuuColumnHeaderPill-margin, 0);
1307
+ padding: 0 6px;
1308
+ position: relative;
2112
1309
  }
2113
- @keyframes reactbgdown1 {
2114
- from {
2115
- background-color: var(--vuu-color-red-50);
2116
- color: white;
2117
- }
2118
- to {
2119
- background-color: transparent;
2120
- color: var(--vuu-color-gray-80);
2121
- }
1310
+ .vuuColumnHeaderPill:hover {
1311
+ --vuu-icon-color: var(--vuu-color-gray-80);
1312
+ background-color: var(--salt-taggable-background-hover);
1313
+ color: var(--vuu-color-gray-80);
2122
1314
  }
2123
- @keyframes reactbgdown2 {
2124
- from {
2125
- background-color: var(--vuu-color-red-50);
2126
- color: white;
2127
- }
2128
- to {
2129
- background-color: transparent;
2130
- color: var(--vuu-color-gray-80);
2131
- }
1315
+ .vuuColumnHeaderPill-removeButton {
1316
+ cursor: pointer;
2132
1317
  }
2133
- @keyframes reactarrowup1 {
2134
- from {
2135
- color: var(--salt-differential-positive-foreground);
2136
- }
2137
- to {
2138
- color: transparent;
2139
- }
1318
+
1319
+ /* ../vuu-table/src/column-header-pill/GroupColumnPill.css */
1320
+ .vuuSortPosition {
1321
+ font-size: 11px;
1322
+ font-weight: 700;
1323
+ padding-top: 1px;
2140
1324
  }
2141
- @keyframes reactarrowup2 {
2142
- from {
2143
- color: var(--salt-differential-positive-foreground);
2144
- }
2145
- to {
2146
- color: transparent;
2147
- }
1325
+
1326
+ /* ../vuu-table/src/column-header-pill/SortIndicator.css */
1327
+ .vuuSortPosition {
1328
+ font-size: 11px;
1329
+ font-weight: 700;
1330
+ padding-top: 1px;
2148
1331
  }
2149
- @keyframes reactarrowdown1 {
2150
- from {
2151
- color: var(--salt-differential-negative-foreground);
2152
- }
2153
- to {
2154
- color: transparent;
2155
- }
1332
+
1333
+ /* ../vuu-table/src/column-resizing/ColumnResizer.css */
1334
+ .vuuColumnResizerNext {
1335
+ background-color: var(--columnResizer-color);
1336
+ cursor: col-resize;
1337
+ height: var(--header-height);
1338
+ margin-left: var(--columnResizer-left, auto);
1339
+ position: absolute;
1340
+ right: -5px;
1341
+ width: 8px;
1342
+ z-index: 1;
2156
1343
  }
2157
- @keyframes reactarrowdown2 {
2158
- from {
2159
- color: var(--salt-differential-negative-foreground);
2160
- }
2161
- to {
2162
- color: transparent;
2163
- }
1344
+ .vuuColumnResizerNext:hover {
1345
+ --columnResizer-color: var(--vuu-color-purple-10);
2164
1346
  }
2165
- @keyframes reactbgarrowup1 {
2166
- 0% {
2167
- color: var(--salt-differential-positive-foreground);
2168
- background-color: var(--vuu-color-green-50);
2169
- }
2170
- 20% {
2171
- color: var(--salt-differential-positive-foreground);
2172
- background-color: transparent;
2173
- }
2174
- 100% {
2175
- color: transparent;
2176
- background-color: transparent;
2177
- }
1347
+ .vuuColumnResizerNext:after {
1348
+ background-color: var(--columnResizer-color, var(--salt-separable-tertiary-borderColor));
1349
+ bottom: 0;
1350
+ content: "";
1351
+ position: absolute;
1352
+ top: 0;
1353
+ right: 3px;
1354
+ height: var(--columnResizer-height, 0);
1355
+ width: 2px;
2178
1356
  }
2179
- @keyframes reactbgarrowup2 {
2180
- 0% {
2181
- color: var(--salt-differential-positive-foreground);
2182
- background-color: var(--vuu-color-green-50);
2183
- }
2184
- 20% {
2185
- color: var(--salt-differential-positive-foreground);
2186
- background-color: transparent;
2187
- }
2188
- 100% {
2189
- color: transparent;
2190
- background-color: transparent;
2191
- }
1357
+
1358
+ /* ../vuu-table/src/header-cell/GroupHeaderCell.css */
1359
+ .vuu-theme {
1360
+ --svg-spinner: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="rgb(38, 112, 169)" d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"><animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1s" from="0 50 50" to="360 50 50" repeatCount="indefinite" /></path></svg>');
2192
1361
  }
2193
- @keyframes reactbgarrowdown1 {
2194
- 0% {
2195
- color: var(--salt-differential-negative-foreground);
2196
- background-color: var(--vuu-color-red-50);
2197
- }
2198
- 20% {
2199
- color: var(--salt-differential-negative-foreground);
2200
- background-color: transparent;
2201
- }
2202
- 100% {
2203
- color: transparent;
2204
- background-color: transparent;
2205
- }
1362
+ .vuuTableGroupHeaderCell {
1363
+ --vuuColumnHeaderPill-margin: 0;
1364
+ --cell-align: "flex-start";
1365
+ text-align: left;
1366
+ background: var(--dataTable-background);
1367
+ cursor: default;
1368
+ height: var(--vuuTableHeaderHeight);
2206
1369
  }
2207
- @keyframes reactbgarrowdown2 {
2208
- 0% {
2209
- color: var(--salt-differential-negative-foreground);
2210
- background-color: var(--vuu-color-red-50);
2211
- }
2212
- 20% {
2213
- color: var(--salt-differential-negative-foreground);
2214
- background-color: transparent;
2215
- }
2216
- 100% {
2217
- color: transparent;
2218
- background-color: transparent;
2219
- }
1370
+ .vuuTableGroupHeaderCell-inner {
1371
+ align-items: center;
1372
+ display: flex;
1373
+ gap: 4px;
1374
+ height: 100%;
1375
+ padding-left: 1px;
2220
1376
  }
2221
-
2222
- /* ../vuu-table-extras/src/cell-renderers-next/background-cell/BackgroundCellConfigurationEditor.css */
2223
- .vuuBackgroundCellConfiguration {
2224
- height: 50px;
2225
- background-color: red;
1377
+ .vuuTableGroupHeaderCell-col {
1378
+ align-items: center;
1379
+ background-color: inherit;
1380
+ display: inline-flex;
1381
+ flex: 0 1 auto;
1382
+ height: calc(var(--vuuTableHeaderHeight) - 2px);
1383
+ justify-content: space-between;
1384
+ padding-right: 8px;
1385
+ position: relative;
2226
1386
  }
2227
-
2228
- /* ../vuu-table-extras/src/column-list/ColumnList.css */
2229
- .vuuColumnList {
2230
- --vuuMeasuredContainer-flex: 1 1 1px;
2231
- --vuu-svg-function: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><path d="M5.8625 10.5V9.625H6.72291L8.4875 7.59792L6.72291 5.54167H5.64375L4.60833 10.8792C4.53055 11.3167 4.36527 11.6545 4.1125 11.8927C3.85972 12.1309 3.53402 12.25 3.13541 12.25C2.7368 12.25 2.40382 12.1333 2.13645 11.9C1.86909 11.6667 1.73541 11.375 1.73541 11.025C1.73541 10.7625 1.80833 10.551 1.95416 10.3906C2.1 10.2302 2.28958 10.15 2.52291 10.15C2.72708 10.15 2.89479 10.2083 3.02604 10.325C3.15729 10.4417 3.22291 10.5972 3.22291 10.7917C3.22291 10.8986 3.20104 10.9983 3.15729 11.0906C3.11354 11.183 3.05277 11.2583 2.975 11.3167C3.01388 11.3361 3.0552 11.3507 3.09895 11.3604C3.1427 11.3701 3.18888 11.375 3.2375 11.375C3.36388 11.375 3.47083 11.3142 3.55833 11.1927C3.64583 11.0712 3.70902 10.9132 3.74791 10.7188L4.75416 5.54167H2.91666V4.66667H4.91458L5.22083 3.12083C5.30833 2.68333 5.48333 2.34549 5.74583 2.10729C6.00833 1.8691 6.33402 1.75 6.72291 1.75C7.12152 1.75 7.44965 1.86667 7.70729 2.1C7.96493 2.33333 8.09375 2.625 8.09375 2.975C8.09375 3.2375 8.02083 3.44896 7.875 3.60938C7.72916 3.76979 7.53958 3.85 7.30625 3.85C7.1118 3.85 6.94652 3.7941 6.81041 3.68229C6.6743 3.57049 6.60625 3.42222 6.60625 3.2375C6.60625 3.14028 6.62569 3.04549 6.66458 2.95312C6.70347 2.86076 6.75208 2.78542 6.81041 2.72708C6.79097 2.70764 6.7618 2.69063 6.72291 2.67604C6.68402 2.66146 6.64513 2.65417 6.60625 2.65417C6.47986 2.65417 6.37048 2.7125 6.27812 2.82917C6.18576 2.94583 6.12013 3.09653 6.08125 3.28125L5.81875 4.66667H8.575V5.54167H7.88958L9.1 6.94167L10.2375 5.54167H9.5375V4.66667H12.25V5.54167H11.4042L9.65416 7.59792L11.4042 9.625H12.25V10.5H9.5375V9.625H10.2375L9.07083 8.26875L7.875 9.625H8.575V10.5H5.8625Z"/></svg>');
2232
- --vuuList-borderStyle: none;
2233
- --vuuListItem-padding: 0;
1387
+ .vuuTableGroupHeaderCell-label {
1388
+ align-items: center;
2234
1389
  display: flex;
2235
- flex-direction: column;
2236
- width: 252px;
1390
+ flex: 0 0 auto;
2237
1391
  }
2238
- [data-icon=function] {
2239
- --vuu-icon-svg: var(--vuu-svg-function);
1392
+ .vuuTableGroupHeaderCell-close {
1393
+ --vuu-icon-height: 18px;
1394
+ --vuu-icon-width: 18px;
1395
+ cursor: pointer;
1396
+ left: 3px;
2240
1397
  }
2241
- .vuuColumnListItem {
2242
- border-bottom: solid 1px var(--salt-separable-tertiary-borderColor);
2243
- padding: 0 6px 0 0;
1398
+ .vuuTableGroupHeaderCell-resizing {
1399
+ --columnResizer-color: var(--salt-color-blue-500);
1400
+ --columnResizer-height: var(--table-height);
1401
+ --columnResizer-width: 2px;
2244
1402
  }
2245
- .vuuColumnList-switch {
2246
- flex: 0 0 32px;
1403
+ .vuuTableGroupHeaderCell-pending {
1404
+ --pending-content: "";
2247
1405
  }
2248
- .vuuColumnList-text {
2249
- flex: 1 1 auto;
1406
+ .vuuTableGroupHeaderCell-col:has(+ .vuuColumnResizer):after {
1407
+ content: var(--pending-content);
1408
+ width: 24px;
1409
+ height: 24px;
1410
+ background-image: var(--svg-spinner);
1411
+ background-repeat: no-repeat;
1412
+ background-size: cover;
2250
1413
  }
2251
- .vuuColumnList-text:hover {
2252
- font-weight: 600;
2253
- text-decoration: underline;
1414
+
1415
+ /* ../vuu-table/src/column-menu/ColumnMenu.css */
1416
+ .vuuMenuItem {
1417
+ --vuu-svg-cog: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M12.9533 8.65331C12.98 8.43998 13 8.22665 13 7.99998C13 7.77331 12.98 7.55998 12.9533 7.34665L14.36 6.24665C14.4867 6.14665 14.52 5.96665 14.44 5.81998L13.1067 3.51331C13.0267 3.36665 12.8467 3.31331 12.7 3.36665L11.04 4.03331C10.6933 3.76665 10.32 3.54665 9.91333 3.37998L9.66 1.61331C9.64 1.45331 9.5 1.33331 9.33333 1.33331H6.66667C6.5 1.33331 6.36 1.45331 6.34 1.61331L6.08667 3.37998C5.68 3.54665 5.30667 3.77331 4.96 4.03331L3.3 3.36665C3.14667 3.30665 2.97333 3.36665 2.89333 3.51331L1.56 5.81998C1.47333 5.96665 1.51333 6.14665 1.64 6.24665L3.04667 7.34665C3.02 7.55998 3 7.77998 3 7.99998C3 8.21998 3.02 8.43998 3.04667 8.65331L1.64 9.75331C1.51333 9.85331 1.48 10.0333 1.56 10.18L2.89333 12.4866C2.97333 12.6333 3.15333 12.6866 3.3 12.6333L4.96 11.9666C5.30667 12.2333 5.68 12.4533 6.08667 12.62L6.34 14.3866C6.36 14.5466 6.5 14.6666 6.66667 14.6666H9.33333C9.5 14.6666 9.64 14.5466 9.66 14.3866L9.91333 12.62C10.32 12.4533 10.6933 12.2266 11.04 11.9666L12.7 12.6333C12.8533 12.6933 13.0267 12.6333 13.1067 12.4866L14.44 10.18C14.52 10.0333 14.4867 9.85331 14.36 9.75331L12.9533 8.65331V8.65331ZM8 10.3333C6.71333 10.3333 5.66667 9.28665 5.66667 7.99998C5.66667 6.71331 6.71333 5.66665 8 5.66665C9.28667 5.66665 10.3333 6.71331 10.3333 7.99998C10.3333 9.28665 9.28667 10.3333 8 10.3333Z"/></svg>');
2254
1418
  }
2255
- .vuuColumnList-checkBox {
1419
+ .vuuTable-columnMenu {
1420
+ --vuu-icon-color: #606477;
1421
+ --vuu-icon-height: 20px;
1422
+ --vuu-icon-left: 0px;
1423
+ --vuu-icon-size: 16px;
1424
+ --vuu-icon-top: 0px;
1425
+ --vuu-icon-width: 20px;
1426
+ border-radius: 4px;
1427
+ cursor: pointer;
1428
+ display: inline-block;
2256
1429
  flex: 0 0 20px;
1430
+ padding: 2px;
1431
+ margin: var(--vuuTable-columnMenu-margin, 0);
1432
+ width: auto;
2257
1433
  }
2258
- .vuuColumnList-icon {
2259
- --vuu-icon-color: var(--vuu-color-gray-45);
2260
- --vuu-icon-size: 16px;
2261
- --vuu-icon-width: 32px;
1434
+ .vuuTable-columnMenu:hover {
1435
+ --vuu-icon-color: #15171B;
1436
+ background-color: #F37880;
2262
1437
  }
2263
- .vuuColumnList-header {
2264
- border-top: solid 2px var(--vuu-color-gray-30);
2265
- flex: 0 0 40px;
2266
- font-size: 14px;
2267
- font-weight: 600;
2268
- padding-top: 24px;
1438
+ .vuuTable-columnMenu-open:hover,
1439
+ .vuuTable-columnMenu-open {
1440
+ background-color: #6D18BD;
1441
+ --vuu-icon-color: white;
2269
1442
  }
2270
- .vuuColumnList-colHeadings {
2271
- border-bottom: solid 2px var(--vuu-color-gray-30);
2272
- color: var(--vuu-color-gray-50);
2273
- display: flex;
2274
- flex: 0 0 24px;
2275
- font-size: 10px;
2276
- justify-content: space-between;
2277
- margin-top: 16px;
2278
- padding-bottom: 8px;
1443
+ [data-icon=cog] {
1444
+ --vuu-icon-svg: var(--vuu-svg-cog);
1445
+ --vuu-icon-size: 14px;
2279
1446
  }
2280
1447
 
2281
- /* ../vuu-table-extras/src/column-expression-input/ColumnExpressionInput.css */
2282
- .vuuColumnExpressionInput {
2283
- --vuuFilterEditor-background: var(--salt-container-primary-background);
2284
- --vuuFilterEditor-color: var(--salt-text-primary-foreground);
2285
- --vuuFilterEditor-fontFamily: var(--salt-typography-fontFamily);
2286
- --vuuFilterEditor-fontSize: var(--salt-text-fontSize);
2287
- --vuuFilterEditor-cursorColor: var(--salt-text-secondary-foreground);
2288
- --vuuFilterEditor-selectionBackground: var(--salt-text-background-selected);
2289
- --vuuFilterEditor-tooltipBackground: var(--salt-container-primary-background);
2290
- --vuuFilterEditor-tooltipBorder: solid 1px var(--vuu-color-purple-10);
2291
- --vuuFilterEditor-tooltipElevation: var(--salt-overlayable-shadow-popout);
2292
- --vuuFilterEditor-suggestion-selectedBackground: var(--vuu-color-gray-10);
2293
- --vuuFilterEditor-suggestion-selectedColor: var(--salt-text-primary-foreground);
2294
- --vuuFilterEditor-suggestion-detailColor: var(--salt-text-secondary-foreground-disabled);
2295
- --vuuFilterEditor-suggestion-height: 24px;
2296
- --vuuFilterEditor-variableColor: var(--vuu-color-purple-10);
1448
+ /* ../vuu-table/src/header-cell/HeaderCell.css */
1449
+ .vuuTableGroupHeaderCell,
1450
+ .vuuTableHeaderCell {
1451
+ --cell-align: "flex-start";
1452
+ --vuuColumnHeaderPill-margin: 0;
1453
+ --vuuColumnHeaderPill-flex: 0 0 24px;
2297
1454
  align-items: center;
1455
+ background-color: var(--vuuTableHeaderCell-background, inherit);
1456
+ border-bottom: 1px solid #ccc;
1457
+ border-right-color: var(--cell-borderColor);
1458
+ border-right-style: solid;
1459
+ border-right-width: 1px;
2298
1460
  box-sizing: border-box;
2299
- height: 30px;
2300
- }
2301
- .vuuColumnExpressionInput-FilterButton,
2302
- .vuuColumnExpressionInput-ClearButton {
2303
- --vuu-icon-size: 12px;
2304
- --saltButton-width: 28px;
1461
+ cursor: default;
1462
+ display: inline-flex;
1463
+ gap: 4px;
1464
+ height: var(--header-height);
1465
+ padding: 0 12px 0 4px;
1466
+ position: relative;
1467
+ vertical-align: top;
2305
1468
  }
2306
- .expression-type-container {
2307
- margin: 0 3px 0 auto;
2308
- color: var(--salt-text-secondary-foreground);
1469
+ .vuuTableHeaderCell-right {
1470
+ --columnResizer-left: 0;
1471
+ --vuuTable-columnMenu-margin: 0;
1472
+ --vuuColumnHeaderPill-margin: 0 3px 0 0;
1473
+ --column-menu-left: 2px;
1474
+ justify-content: flex-end;
1475
+ padding: 0 3px 0 12px;
2309
1476
  }
2310
- .expression-kind {
2311
- display: inline-block;
2312
- width: 50px;
1477
+ .vuuTableHeaderCell-label {
1478
+ flex: 0 1 auto;
1479
+ line-height: calc(var(--header-height) - 1px);
1480
+ overflow: hidden;
1481
+ text-overflow: ellipsis;
1482
+ white-space: nowrap;
2313
1483
  }
2314
- .expression-type {
2315
- display: inline-block;
1484
+ .vuuTableHeaderCell-right .vuuTableHeaderCell-label {
2316
1485
  text-align: right;
2317
- width: 50px;
2318
1486
  }
2319
- .vuuSuggestion {
2320
- display: flex;
2321
- align-items: center;
1487
+ .vuuTableHeaderCell-resizing {
1488
+ --columnResizer-height: var(--table-height);
2322
1489
  }
2323
- .vuuFunctionDoc {
2324
- padding: 13px 7px;
1490
+ .vuuTableHeaderCell.vuuPinLeft {
1491
+ padding-left: 2px;
2325
1492
  }
2326
- .vuuFunctionDoc .function-heading {
2327
- display: flex;
2328
- gap: 3px;
1493
+ .vuuTableHeaderCell.vuuPinLeft.vuuEndPin .vuuColumnResizerNext:before {
1494
+ --height: calc(var(--table-height) - var(--horizontal-scrollbar-height));
1495
+ --inset-r: calc(var(--pin-width) - 2px);
1496
+ --inset-b: calc(var(--height) - 2px);
1497
+ --clip-path: polygon( 0% 0%, 0% 120%, 2px 120%, 2px 2px, var(--inset-r) 2px, var(--inset-r) var(--inset-b), 2px var(--inset-b), 2px 120%, 120% 120%, 120% 0% );
1498
+ background-color: transparent;
1499
+ border-color: var(--vuu-color-gray-40);
1500
+ border-width: 1px;
1501
+ border-style: solid solid solid solid;
1502
+ border-radius: 4px;
1503
+ box-shadow: 2px 1px 4px 0px rgba(0, 0, 0, 0.10);
1504
+ clip-path: var(--clip-path);
1505
+ content: "";
1506
+ position: absolute;
1507
+ width: var(--pin-width);
1508
+ top: 0;
1509
+ bottom: 0;
1510
+ right: 3px;
1511
+ height: var(--height);
1512
+ z-index: -5;
2329
1513
  }
2330
- .vuuFunctionDoc .function-name {
2331
- font-weight: 700;
2332
- text-transform: capitalize;
1514
+ .vuuTableHeaderCell.vuuPinRight.vuuEndPin .vuuColumnResizerNext:before {
1515
+ --height: calc(var(--table-height) - var(--horizontal-scrollbar-height));
1516
+ --inset-r: calc(var(--pin-width) - 2px);
1517
+ --inset-b: calc(var(--height) - 2px);
1518
+ --clip-path: polygon( -20% 0%, -20% 120%, 2px 120%, 2px 2px, var(--inset-r) 2px, var(--inset-r) var(--inset-b), 2px var(--inset-b), 2px 120%, 120% 120%, 120% 0% );
1519
+ background-color: transparent;
1520
+ border-color: #A9AAAD;
1521
+ border-width: 1px;
1522
+ border-style: solid solid solid solid;
1523
+ border-radius: 4px;
1524
+ box-shadow: -2px 1px 4px 0px rgba(0, 0, 0, 0.10);
1525
+ clip-path: var(--clip-path);
1526
+ content: "";
1527
+ position: absolute;
1528
+ width: var(--pin-width);
1529
+ top: 0;
1530
+ bottom: 0;
1531
+ right: 0px;
1532
+ height: var(--height);
1533
+ z-index: -5;
2333
1534
  }
2334
- .vuuFunctionDoc .param-list {
2335
- color: var(--vuu-color-gray-50);
2336
- white-space: pre;
1535
+ .vuuTableHeaderCell.vuuDraggable-dragAway {
1536
+ display: none;
2337
1537
  }
2338
- .vuuFunctionDoc .function-type {
2339
- color: var(--vuu-color-gray-50);
2340
- font-weight: 700;
2341
- margin-left: auto;
2342
- text-transform: capitalize;
1538
+ .vuuTable-headingCell {
1539
+ background: var(--dataTable-background);
1540
+ border-color: var(--salt-separable-tertiary-borderColor);
1541
+ border-style: solid solid solid none;
1542
+ border-width: 1px;
1543
+ color: var(--salt-text-secondary-foreground);
1544
+ display: inline-block;
1545
+ height: var(--header-height);
1546
+ padding: 0 !important;
2343
1547
  }
2344
- .vuuFunctionDoc .example-container {
2345
- background-color: var(--vuu-color-gray-03);
2346
- margin: 6px 0;
2347
- padding: 3px;
1548
+
1549
+ /* ../vuu-table/src/table-cell/TableCell.css */
1550
+ .vuuTableCell {
1551
+ border-right-color: var(--cell-borderColor);
1552
+ border-right-style: solid;
1553
+ border-right-width: 1px;
1554
+ display: inline-block;
1555
+ height: 100%;
1556
+ overflow: hidden;
1557
+ padding: var(--vuuTableCell-padding, 0 11px 0 12px);
1558
+ text-overflow: ellipsis;
1559
+ vertical-align: top;
2348
1560
  }
2349
- .vuuFunctionDoc .example-expression {
2350
- color: var(--vuu-color-gray-80);
2351
- font-family: var(--salt-typography-fontFamily-code);
2352
- font-weight: 500;
2353
- padding: 8px;
1561
+ .vuuTableCell-right {
1562
+ text-align: right;
2354
1563
  }
2355
- .vuuFunctionDoc .example-result {
2356
- margin-left: 8px;
2357
- margin-top: 6px;
1564
+ .vuuTableCell-editable {
1565
+ display: inline-flex;
1566
+ line-height: 18px;
1567
+ padding-bottom: 1px;
1568
+ padding-top: 1px;
1569
+ text-overflow: unset;
2358
1570
  }
2359
-
2360
- /* ../vuu-table-extras/src/column-settings/ColumnNameLabel.css */
2361
- .vuuColumnNameLabel-calculated {
2362
- cursor: pointer;
2363
- display: flex;
2364
- gap: 2px;
1571
+ .vuuTableCell:focus {
1572
+ outline: var(--vuuTableCell-outline, solid var(--vuu-color-purple-10) 2px);
1573
+ outline-offset: -2px;
1574
+ box-shadow: inset 0 0 0 var(--cell-outline-width) white;
1575
+ border-bottom: none;
2365
1576
  }
2366
- .vuuColumnNameLabel-edit {
2367
- margin-left: auto;
1577
+ .vuuTableRow-selected .vuuTableCell:not(.vuuTableCell-editable):focus {
1578
+ outline: var(--vuuTableCell-outline, solid var(--vuu-color-purple-10) 2px);
1579
+ outline-offset: -1px;
2368
1580
  }
2369
- .vuuColumnNameLabel-placeholder {
2370
- color: var(--vuu-color-gray-35);
1581
+ .vuuTableCell-editable:focus {
1582
+ outline: none;
2371
1583
  }
2372
1584
 
2373
- /* ../vuu-table-extras/src/column-settings/ColumnSettingsPanel.css */
2374
- .vuuColumnSettingsPanel {
2375
- --vuu-svg-align-left: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M9.33333 10H2.66667C2.3 10 2 10.3 2 10.6667C2 11.0333 2.3 11.3333 2.66667 11.3333H9.33333C9.7 11.3333 10 11.0333 10 10.6667C10 10.3 9.7 10 9.33333 10ZM9.33333 4.66667H2.66667C2.3 4.66667 2 4.96667 2 5.33333C2 5.7 2.3 6 2.66667 6H9.33333C9.7 6 10 5.7 10 5.33333C10 4.96667 9.7 4.66667 9.33333 4.66667ZM2.66667 8.66667H13.3333C13.7 8.66667 14 8.36667 14 8C14 7.63333 13.7 7.33333 13.3333 7.33333H2.66667C2.3 7.33333 2 7.63333 2 8C2 8.36667 2.3 8.66667 2.66667 8.66667ZM2.66667 14H13.3333C13.7 14 14 13.7 14 13.3333C14 12.9667 13.7 12.6667 13.3333 12.6667H2.66667C2.3 12.6667 2 12.9667 2 13.3333C2 13.7 2.3 14 2.66667 14ZM2 2.66667C2 3.03333 2.3 3.33333 2.66667 3.33333H13.3333C13.7 3.33333 14 3.03333 14 2.66667C14 2.3 13.7 2 13.3333 2H2.66667C2.3 2 2 2.3 2 2.66667Z" /></svg>');
2376
- --vuu-svg-align-right: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M2.66667 14H13.3333C13.7 14 14 13.7 14 13.3333C14 12.9667 13.7 12.6667 13.3333 12.6667H2.66667C2.3 12.6667 2 12.9667 2 13.3333C2 13.7 2.3 14 2.66667 14ZM6.66667 11.3333H13.3333C13.7 11.3333 14 11.0333 14 10.6667C14 10.3 13.7 10 13.3333 10H6.66667C6.3 10 6 10.3 6 10.6667C6 11.0333 6.3 11.3333 6.66667 11.3333ZM2.66667 8.66667H13.3333C13.7 8.66667 14 8.36667 14 8C14 7.63333 13.7 7.33333 13.3333 7.33333H2.66667C2.3 7.33333 2 7.63333 2 8C2 8.36667 2.3 8.66667 2.66667 8.66667ZM6.66667 6H13.3333C13.7 6 14 5.7 14 5.33333C14 4.96667 13.7 4.66667 13.3333 4.66667H6.66667C6.3 4.66667 6 4.96667 6 5.33333C6 5.7 6.3 6 6.66667 6ZM2 2.66667C2 3.03333 2.3 3.33333 2.66667 3.33333H13.3333C13.7 3.33333 14 3.03333 14 2.66667C14 2.3 13.7 2 13.3333 2H2.66667C2.3 2 2 2.3 2 2.66667Z" /></svg>');
2377
- --vuu-svg-pin-left: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M7.33333 9.86V8.66666H13.3333C13.7 8.66666 14 8.36666 14 8C14 7.63333 13.7 7.33333 13.3333 7.33333L7.33333 7.33333V6.14C7.33333 5.84 6.97333 5.69333 6.76667 5.90666L4.90667 7.76666C4.77333 7.89999 4.77333 8.10666 4.90667 8.24L6.76667 10.1C6.97333 10.3067 7.33333 10.16 7.33333 9.86ZM2.66667 13.3333C3.03333 13.3333 3.33333 13.0333 3.33333 12.6667L3.33333 3.33333C3.33333 2.96666 3.03333 2.66666 2.66667 2.66666C2.3 2.66666 2 2.96666 2 3.33333L2 12.6667C2 13.0333 2.3 13.3333 2.66667 13.3333Z" /></svg>');
2378
- --vuu-svg-pin-float: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M6 4.66667H4.66667V6H6V4.66667ZM6 7.33333H4.66667V8.66667H6V7.33333ZM6 2C5.26 2 4.66667 2.6 4.66667 3.33333H6V2ZM8.66667 10H7.33333V11.3333H8.66667V10ZM12.6667 2V3.33333H14C14 2.6 13.4 2 12.6667 2ZM8.66667 2H7.33333V3.33333H8.66667V2ZM6 11.3333V10H4.66667C4.66667 10.7333 5.26 11.3333 6 11.3333ZM12.6667 8.66667H14V7.33333H12.6667V8.66667ZM12.6667 6H14V4.66667H12.6667V6ZM12.6667 11.3333C13.4 11.3333 14 10.7333 14 10H12.6667V11.3333ZM2.66667 4.66667C2.3 4.66667 2 4.96667 2 5.33333V12.6667C2 13.4 2.6 14 3.33333 14H10.6667C11.0333 14 11.3333 13.7 11.3333 13.3333C11.3333 12.9667 11.0333 12.6667 10.6667 12.6667H4C3.63333 12.6667 3.33333 12.3667 3.33333 12V5.33333C3.33333 4.96667 3.03333 4.66667 2.66667 4.66667ZM10 3.33333H11.3333V2H10V3.33333ZM10 11.3333H11.3333V10H10V11.3333Z" /></svg>');
2379
- --vuu-svg-pin-right: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8.66667 6.14V7.33333H2.66667C2.3 7.33333 2 7.63333 2 8C2 8.36666 2.3 8.66666 2.66667 8.66666H8.66667V9.86C8.66667 10.16 9.02667 10.3067 9.23333 10.0933L11.0933 8.23333C11.2267 8.1 11.2267 7.89333 11.0933 7.76L9.23333 5.9C9.02667 5.69333 8.66667 5.84 8.66667 6.14ZM13.3333 13.3333C13.7 13.3333 14 13.0333 14 12.6667V3.33333C14 2.96666 13.7 2.66666 13.3333 2.66666C12.9667 2.66666 12.6667 2.96666 12.6667 3.33333V12.6667C12.6667 13.0333 12.9667 13.3333 13.3333 13.3333Z"/></svg>');
2380
- --vuuDropdown-height: 24px;
2381
- --vuuDropdown-width: 100%;
2382
- --vuuIconToggleButton-iconSize: 16px;
2383
- display: flex;
2384
- flex-direction: column;
2385
- gap: 24px;
2386
- height: 100%;
2387
- padding-top: 24px;
2388
- }
2389
- .vuuColumnSettingsPanel-header {
2390
- border-top: solid 2px var(--vuu-color-gray-30);
2391
- font-size: 14px;
2392
- font-weight: 600;
2393
- padding-top: 24px;
2394
- }
2395
- .vuuColumnSettingsPanel-buttonBar {
1585
+ /* ../vuu-table/src/table-cell/TableGroupCell.css */
1586
+ .vuuTableGroupCell {
1587
+ --group-cell-spacer-width: 20px;
2396
1588
  align-items: center;
2397
- display: flex;
2398
- justify-content: space-between;
2399
- margin-top: auto;
1589
+ border-right-color: var(--vuuTableGroupCell-borderColor, var(--salt-separable-tertiary-borderColor));
1590
+ border-right-style: solid;
1591
+ border-right-width: 1px;
1592
+ cursor: pointer;
1593
+ display: inline-flex;
1594
+ height: var(--row-height);
1595
+ line-height: 16px;
2400
1596
  }
2401
- .vuuColumnSettingsPanel-buttonBar[data-align=right] {
2402
- gap: 6px;
2403
- justify-content: flex-end;
1597
+ .vuuTableGroupCell-toggle {
1598
+ --vuu-icon-height: 16px;
1599
+ --vuu-icon-size: 16px;
1600
+ --vuu-icon-width: 8px;
1601
+ margin-right: 4px;
1602
+ transition: transform 0.25s;
1603
+ transform: var(--toggle-icon-transform);
2404
1604
  }
2405
- .vuuColumnSettingsPanel-buttonNavPrev {
2406
- --vuu-icon-left: 6px;
2407
- padding-left: 24px;
1605
+ .vuuTableGroupCell-spacer {
1606
+ width: var(--group-cell-spacer-width);
2408
1607
  }
2409
- .vuuColumnSettingsPanel-buttonNavNext {
2410
- --vuu-icon-left: calc(100% - 18px);
2411
- padding-right: 24px;
1608
+
1609
+ /* ../vuu-table/src/Row.css */
1610
+ .vuuTableRow {
1611
+ background: var(--row-background,#fff);
1612
+ border-bottom: 1px solid var(--row-borderColor);
1613
+ box-sizing: border-box;
1614
+ height: var(--row-height);
1615
+ line-height: calc(var(--row-height) - 1px);
1616
+ position: absolute;
1617
+ top: 0;
1618
+ white-space: nowrap;
2412
1619
  }
2413
- [data-icon=align-left] {
2414
- --vuu-icon-svg: var(--vuu-svg-align-left);
1620
+ .vuuTableRow-even {
1621
+ --row-background: var(--row-background-even);
2415
1622
  }
2416
- [data-icon=align-right] {
2417
- --vuu-icon-svg: var(--vuu-svg-align-right);
1623
+ .vuuTableRow-highlighted {
1624
+ background-color: var(--vuu-color-gray-10);
2418
1625
  }
2419
- [data-icon=pin-left] {
2420
- --vuu-icon-svg: var(--vuu-svg-pin-left);
1626
+ .vuuTableRow-selected,
1627
+ .vuuTableRow-selectedEnd {
1628
+ background-color: rgb(235, 235, 236);
2421
1629
  }
2422
- [data-icon=pin-float] {
2423
- --vuu-icon-svg: var(--vuu-svg-pin-float);
1630
+ .vuuTableRow-selectedStart {
1631
+ --vuu-selection-decorator-left-radius: 5px 0 0 0;
1632
+ --vuu-selection-decorator-right-radius: 0 5px 0 0;
1633
+ border-radius: 5px 5px 0 0;
2424
1634
  }
2425
- [data-icon=pin-right] {
2426
- --vuu-icon-svg: var(--vuu-svg-pin-right);
1635
+ .vuuTableRow-selectedEnd {
1636
+ --vuu-selection-decorator-left-radius: 0 0 0 5px;
1637
+ --vuu-selection-decorator-right-radius: 0 0 5px 0;
1638
+ border-radius: 0 0 5px 5px;
2427
1639
  }
2428
- .vuuColumnSettingsPanel-editing .vuuColumnNameLabel-edit {
2429
- display: none;
1640
+ .vuuTableRow-selectedStart.vuuTableRow-selectedEnd {
1641
+ --vuu-selection-decorator-left-radius: 5px 0 0 5px;
1642
+ --vuu-selection-decorator-right-radius: 0 5px 5px 0;
1643
+ border-radius: 5px 5px 5px 5px;
2430
1644
  }
2431
-
2432
- /* ../vuu-table-extras/src/datasource-stats/DatasourceStats.css */
2433
- .vuuDatasourceStats {
2434
- color: black;
2435
- display: flex;
2436
- font-size: 10px;
2437
- gap: var(--salt-size-unit);
2438
- padding: 4px 0 0 12px;
1645
+ .vuuTableRow-selectedStart:after {
1646
+ content: "";
1647
+ position: absolute;
1648
+ top: 0;
1649
+ left: 4px;
1650
+ height: 1px;
1651
+ background-color: var(--vuu-color-purple-10);
1652
+ width: calc(var(--content-width) - 8px);
1653
+ z-index: 1;
2439
1654
  }
2440
- .vuuDatasourceStats-label {
2441
- color: var(--vuu-color-gray-50);
1655
+ .vuuTableRow-selectedEnd {
1656
+ border-bottom-color: var(--vuu-color-purple-10);
2442
1657
  }
2443
-
2444
- /* ../vuu-table-extras/src/table-settings/TableSettingsPanel.css */
2445
- .vuuTableSettingsPanel {
2446
- --vuu-svg-text-strikethrough: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 24"><path d="M28.3333 9.33334C28.8867 9.33334 29.3333 8.88668 29.3333 8.33334C29.3333 7.78001 28.8867 7.33334 28.3333 7.33334H20.26L22.26 9.33334H23.48L23.1133 10.1867L24.5067 11.58L25.4733 9.33334H28.3333ZM27.6267 16.5867L18.7467 7.70668C18.4867 7.44668 18.0667 7.44668 17.8067 7.70668C17.5467 7.96668 17.5467 8.38668 17.8067 8.64668L21.98 12.82L20.88 15.38C20.62 15.9933 21.0667 16.6667 21.7267 16.6667C22.0933 16.6667 22.4267 16.4467 22.5733 16.1067L23.38 14.22L26.68 17.52C26.94 17.78 27.36 17.78 27.62 17.52C27.8867 17.2667 27.8867 16.8467 27.6267 16.5867Z"/></svg>');
2447
- --vuu-svg-text-Tt: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 24"><path d="M17.6667 7.66666C17.6667 8.21999 18.1133 8.66666 18.6667 8.66666H21V15.6667C21 16.22 21.4467 16.6667 22 16.6667C22.5533 16.6667 23 16.22 23 15.6667V8.66666H25.3333C25.8867 8.66666 26.3333 8.21999 26.3333 7.66666C26.3333 7.11332 25.8867 6.66666 25.3333 6.66666H18.6667C18.1133 6.66666 17.6667 7.11332 17.6667 7.66666ZM29.3333 9.99999H25.3333C24.78 9.99999 24.3333 10.4467 24.3333 11C24.3333 11.5533 24.78 12 25.3333 12H26.3333V15.6667C26.3333 16.22 26.78 16.6667 27.3333 16.6667C27.8867 16.6667 28.3333 16.22 28.3333 15.6667V12H29.3333C29.8867 12 30.3333 11.5533 30.3333 11C30.3333 10.4467 29.8867 9.99999 29.3333 9.99999Z" /></svg>');
2448
- --vuu-svg-text-T: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 24"><path d="M19.3333 7.66666C19.3333 8.21999 19.78 8.66666 20.3333 8.66666H23V15.6667C23 16.22 23.4467 16.6667 24 16.6667C24.5533 16.6667 25 16.22 25 15.6667V8.66666H27.6667C28.22 8.66666 28.6667 8.21999 28.6667 7.66666C28.6667 7.11332 28.22 6.66666 27.6667 6.66666H20.3333C19.78 6.66666 19.3333 7.11332 19.3333 7.66666Z"/></svg>');
2449
- --vuu-svg-stripes: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><rect x="2" y="2" width="12" height="2" rx="0.3"/><rect x="2" y="5" width="12" height="2" rx="0.3"/><rect x="2" y="8" width="12" height="2" rx="0.3"/><rect x="2" y="11" width="12" height="2" rx="0.3"/></svg>');
2450
- --vuu-svg-row-lines: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><rect x="2" y="3" width="12" height="1" rx="0.3" /><rect x="2" y="6" width="12" height="1" rx="0.3" /><rect x="2" y="9" width="12" height="1" rx="0.3" /><rect x="2" y="12" width="12" height="1" rx="0.3"/></svg>');
2451
- --vuu-svg-col-lines: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><rect x="3" y="14" width="12" height="1" rx="0.3" transform="rotate(-90 3 14)"/><rect x="6" y="14" width="12" height="1" rx="0.3" transform="rotate(-90 6 14)"/><rect x="9" y="14" width="12" height="1" rx="0.3" transform="rotate(-90 9 14)"/><rect x="12" y="14" width="12" height="1" rx="0.3" transform="rotate(-90 12 14)"/></svg>');
2452
- display: flex;
2453
- flex-direction: column;
2454
- gap: 24px;
2455
- height: 100%;
2456
- padding-top: 24px;
1658
+ .vuuTableRow-selectionDecorator {
1659
+ background-color: var(--vuu-selection-decorator-bg, white);
1660
+ display: inline-block;
1661
+ position: relative;
1662
+ height: var(--row-height);
1663
+ width: 4px;
1664
+ z-index: 2;
2457
1665
  }
2458
- .vuuTableSettingsPanel [data-icon=text-strikethrough] {
2459
- --vuu-icon-svg: var(--vuu-svg-text-strikethrough);
1666
+ .vuuTableRow-selectionDecorator.vuuStickyLeft {
1667
+ left: 0;
1668
+ position: sticky;
2460
1669
  }
2461
- .vuuTableSettingsPanel [data-icon=text-Tt] {
2462
- --vuu-icon-svg: var(--vuu-svg-text-Tt);
1670
+ .vuuTableRow-selectionDecorator.vuuStickyRight {
1671
+ right: 0;
1672
+ position: sticky;
2463
1673
  }
2464
- .vuuTableSettingsPanel [data-icon=text-T] {
2465
- --vuu-icon-svg: var(--vuu-svg-text-T);
1674
+ .vuuTableRow-selected {
1675
+ --vuu-selection-decorator-bg: var(--vuu-color-purple-10);
2466
1676
  }
2467
- .vuuTableSettingsPanel [data-icon=col-lines] {
2468
- --vuu-icon-svg: var(--vuu-svg-col-lines);
1677
+ .vuuTableRow-selectedStart {
1678
+ --vuu-selection-decorator-bg: white;
2469
1679
  }
2470
- .vuuTableSettingsPanel [data-icon=row-lines] {
2471
- --vuu-icon-svg: var(--vuu-svg-row-lines);
1680
+ .vuuTableRow-selectedEnd {
1681
+ --vuu-selection-decorator-bg: white;
2472
1682
  }
2473
- .vuuTableSettingsPanel [data-icon=row-striping] {
2474
- --vuu-icon-svg: var(--vuu-svg-stripes);
1683
+ .vuuTableRow-selectedStart.vuuTableRow-selectedEnd {
2475
1684
  }
2476
- .vuuTableSettingsPanel-header {
2477
- border-top: solid 2px var(--vuu-color-gray-30);
2478
- font-size: 14px;
2479
- font-weight: 600;
2480
- padding-top: 24px;
1685
+ .vuuTableRow-selectedStart .vuuTableRow-selectionDecorator:before,
1686
+ .vuuTableRow-selectedEnd .vuuTableRow-selectionDecorator:before {
1687
+ content: "";
1688
+ top: 0;
1689
+ right: 0;
1690
+ bottom: 0;
1691
+ left: 0;
1692
+ position: absolute;
1693
+ background-color: var(--vuu-color-purple-10);
2481
1694
  }
2482
- .vuuTableSettingsPanel .vuuColumnList {
2483
- flex-grow: 1;
2484
- flex-shrink: 1;
2485
- flex-basis: 0;
1695
+ .vuuTableRow-selectionDecorator.vuuStickyLeft:before {
1696
+ border-radius: var(--vuu-selection-decorator-left-radius, 0);
2486
1697
  }
2487
- .vuuTableSettingsPanel-calculatedButtonbar {
2488
- --vuu-icon-size: 16px;
2489
- --saltButton-height: 24px;
2490
- --saltButton-width: 24px;
2491
- align-items: center;
2492
- display: flex;
2493
- flex: 0 0 32px;
2494
- gap: 12px;
1698
+ .vuuTableRow-selectionDecorator.vuuStickyRight:before {
1699
+ border-radius: var(--vuu-selection-decorator-right-radius, 0);
2495
1700
  }
2496
- .vuuGridSeparators {
2497
- --vuuIconToggleButton-iconSize: 16px;
1701
+ .vuuTableRow-expanded {
1702
+ --toggle-icon-transform: rotate(90deg);
1703
+ }
1704
+ .vuuDraggable .vuuTableRow {
1705
+ --cell-borderColor: transparent;
1706
+ --vuu-selection-decorator-bg: transparent;
1707
+ transform: none !important;
1708
+ z-index: 1;
2498
1709
  }
2499
1710
 
2500
1711
  /* ../vuu-table/src/Table.css */
@@ -2508,6 +1719,8 @@ input[type=radio] {
2508
1719
  --cell-borderColor: transparent;
2509
1720
  --row-borderColor: var(--row-background);
2510
1721
  --table-background: var(--salt-container-primary-background);
1722
+ font-family: var(--vuuTable-fontFamily,var(--salt-typography-fontFamily, sans-serif));
1723
+ font-size: var(--vuuTable-fontSize,var(--salt-text-fontSize, 12px));
2511
1724
  position: relative;
2512
1725
  user-select: none;
2513
1726
  }
@@ -2612,19 +1825,6 @@ input[type=radio] {
2612
1825
  --row-height: 25px;
2613
1826
  }
2614
1827
 
2615
- /* ../vuu-table/src/cell-renderers/dropdown-cell/DropdownCell.css */
2616
- .vuuTableDropdownCell {
2617
- --vuu-icon-height: 15px;
2618
- --salt-focused-outlineStyle: none;
2619
- --saltButton-borderRadius: 4px;
2620
- font-weight: 500;
2621
- }
2622
- .vuuTableDropdownCell button:focus-visible {
2623
- --saltButton-borderColor: var(--vuu-color-purple-10);
2624
- --saltButton-borderWidth: 2px;
2625
- padding-left: 3px;
2626
- }
2627
-
2628
1828
  /* ../vuu-table/src/cell-renderers/input-cell/InputCell.css */
2629
1829
  .vuuTableInputCell.saltInput-primary {
2630
1830
  --salt-focused-outlineStyle: none;
@@ -3216,12 +2416,13 @@ input[type=radio] {
3216
2416
  width: 12px;
3217
2417
  }
3218
2418
 
3219
- /* ../vuu-ui-controls/src/vuu-input/VuuInput.css */
3220
- .vuuInput {
3221
- --vuu-icon-size: 16px;
2419
+ /* ../vuu-layout/src/layout-header/Header.css */
2420
+ .vuuHeader {
2421
+ --saltButton-height: 24px;
2422
+ --saltButton-width: 24px;
3222
2423
  }
3223
- .vuuInput-errorIcon:after {
3224
- cursor: pointer;
2424
+ .salt-density-high .vuuHeader {
2425
+ --saltToolbarField-marginTop: 0;
3225
2426
  }
3226
2427
 
3227
2428
  /* ../vuu-layout/src/layout-view/View.css */
@@ -3238,915 +2439,1274 @@ input[type=radio] {
3238
2439
  overflow: hidden;
3239
2440
  position: relative;
3240
2441
  }
3241
- .vuuView.focus-visible:after {
3242
- content: "";
3243
- position: absolute;
3244
- top: 0;
3245
- left: 0;
3246
- right: 0;
3247
- bottom: 0;
3248
- border: dotted cornflowerblue 2px;
2442
+ .vuuView.focus-visible:after {
2443
+ content: "";
2444
+ position: absolute;
2445
+ top: 0;
2446
+ left: 0;
2447
+ right: 0;
2448
+ bottom: 0;
2449
+ border: dotted cornflowerblue 2px;
2450
+ }
2451
+ .vuuView.dragging {
2452
+ box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
2453
+ }
2454
+ .vuuView-main {
2455
+ display: flex;
2456
+ flex-direction: var(--vuuView-flexDirection, column);
2457
+ flex-wrap: var(--vuuView-flex-wrap, nowrap);
2458
+ flex: 1;
2459
+ justify-content: var(--vuuView-justify, flex-start);
2460
+ overflow: hidden;
2461
+ position: relative;
2462
+ }
2463
+ .vuuView-main > * {
2464
+ flex-basis: auto;
2465
+ flex-grow: var(--vuuView-flex-grow, 1);
2466
+ flex-shrink: var(--vuuView-flex-shrink, 1);
2467
+ }
2468
+ .vuuView-collapsed .vuuView-main {
2469
+ display: none;
2470
+ }
2471
+ .vuuView-collapsed + .Splitter {
2472
+ display: none;
2473
+ }
2474
+ .vuuView-collapsed .Toolbar-vertical {
2475
+ border-right: solid 1px var(--grey40);
2476
+ }
2477
+ .vuuView-collapsed .Toolbar-vertical .toolbar-title {
2478
+ display: none;
2479
+ }
2480
+
2481
+ /* ../vuu-layout/src/placeholder/LayoutStartPanel.css */
2482
+ .vuuLayoutStartPanel {
2483
+ align-items: center;
2484
+ flex: 0 0 auto !important;
2485
+ display: flex;
2486
+ flex-direction: column;
2487
+ font-weight: 700;
2488
+ gap: 12px;
2489
+ }
2490
+ .vuuLayoutStartPanel-title {
2491
+ color: var(--vuu-color-gray-80);
2492
+ font-size: 28px;
2493
+ line-height: 1.5;
2494
+ text-align: center;
2495
+ }
2496
+ .vuuLayoutStartPanel-text {
2497
+ color: var(--vuu-color-gray-50);
2498
+ font-size: 18px;
2499
+ line-height: 1.5;
2500
+ max-width: 460px;
2501
+ }
2502
+ .vuuLayoutStartPanel-addButton {
2503
+ --vuu-icon-size: 20px;
2504
+ --saltButton-borderRadius: 28px !important;
2505
+ --saltButton-height: 56px;
2506
+ --saltButton-width: 56px;
2507
+ box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
2508
+ }
2509
+
2510
+ /* ../vuu-layout/src/placeholder/Placeholder.css */
2511
+ .vuuPlaceholder {
2512
+ --vuuView-justify: center;
2513
+ align-items: center;
2514
+ display: flex;
2515
+ flex-basis: 0;
2516
+ flex-grow: 1;
2517
+ flex-shrink: 1;
2518
+ }
2519
+ .vuuPlaceholder-nested {
2520
+ background-color: red;
2521
+ }
2522
+ .vuuPlaceholder-shim {
2523
+ flex-grow: 0;
2524
+ flex-shrink: 0;
2525
+ }
2526
+
2527
+ /* ../vuu-layout/src/flexbox/Splitter.css */
2528
+ .vuuSplitter {
2529
+ --splitter-background: var(--salt-separable-secondary-borderColor);
2530
+ --splitter-borderColor: var(--salt-separable-secondary-borderColor);
2531
+ --splitter-borderStyle: none;
2532
+ --splitter-borderWidth: 0;
2533
+ --splitter-size: 3px;
2534
+ align-items: center;
2535
+ background-color: var(--splitter-background);
2536
+ border-color: var(--splitter-borderColor);
2537
+ border-style: var(--splitter-borderStyle);
2538
+ border-width: var(--splitter-borderWidth);
2539
+ box-sizing: border-box;
2540
+ display: flex;
2541
+ justify-content: center;
2542
+ position: relative;
2543
+ outline: none;
2544
+ z-index: 1;
2545
+ }
2546
+ .vuuSplitter:hover {
2547
+ --splitter-background: var(--salt-separable-primary-borderColor);
2548
+ }
2549
+ .vuuSplitter-active {
2550
+ --splitter-background: var(--salt-separable-primary-borderColor);
2551
+ }
2552
+ .vuuSplitter-column {
2553
+ cursor: ns-resize;
2554
+ height: var(--splitter-size);
2555
+ }
2556
+ .vuuSplitter:not(.vuuSplitter-column) {
2557
+ cursor: ew-resize;
2558
+ width: var(--splitter-size);
2559
+ }
2560
+ .vuuSplitter:before {
2561
+ border: none;
2562
+ border-radius: 0;
2563
+ content: "";
2564
+ display: block;
2565
+ padding: 0;
2566
+ }
2567
+ .vuuSplitter-grab-zone {
2568
+ position: absolute;
2569
+ background-color: rgba(255, 0, 0, 0.01);
2570
+ cursor: inherit;
2571
+ }
2572
+ .vuuSplitter-column .vuuSplitter-grab-zone {
2573
+ left: 0;
2574
+ right: 0;
2575
+ top: -5px;
2576
+ bottom: -5px;
2577
+ }
2578
+ .vuuSplitter:not(.vuuSplitter-column) .vuuSplitter-grab-zone {
2579
+ left: -5px;
2580
+ right: -5px;
2581
+ top: 0;
2582
+ bottom: 0;
2583
+ }
2584
+ .vuuSplitter-active:not(.vuuSplitter-column) .vuuSplitter-grab-zone {
2585
+ background-color: rgba(255, 255, 255, .05);
2586
+ left: -150px;
2587
+ right: -150px;
2588
+ }
2589
+ .vuuSplitter:not(.vuuSplitter-column):before {
2590
+ width: 1px;
2591
+ height: 10px;
2592
+ background:
2593
+ linear-gradient(
2594
+ to bottom,
2595
+ var(--grey900) 10%,
2596
+ transparent 10%,
2597
+ transparent 30%,
2598
+ var(--grey900) 30%,
2599
+ var(--grey900) 40%,
2600
+ transparent 40%,
2601
+ transparent 60%,
2602
+ var(--grey900) 60%,
2603
+ var(--grey900) 70%,
2604
+ transparent 70%,
2605
+ transparent 90%,
2606
+ var(--grey900) 90%);
2607
+ }
2608
+ .vuuSplitter-active.vuuSplitter-column:before {
2609
+ background:
2610
+ linear-gradient(
2611
+ to right,
2612
+ #ffffff 10%,
2613
+ transparent 10%,
2614
+ transparent 30%,
2615
+ #ffffff 30%,
2616
+ #ffffff 40%,
2617
+ transparent 40%,
2618
+ transparent 60%,
2619
+ #ffffff 60%,
2620
+ #ffffff 70%,
2621
+ transparent 70%,
2622
+ transparent 90%,
2623
+ #ffffff 90%);
2624
+ }
2625
+ .vuuSplitter-active:not(.vuuSplitter-column):before {
2626
+ background:
2627
+ linear-gradient(
2628
+ to bottom,
2629
+ #ffffff 10%,
2630
+ transparent 10%,
2631
+ transparent 30%,
2632
+ #ffffff 30%,
2633
+ #ffffff 40%,
2634
+ transparent 40%,
2635
+ transparent 60%,
2636
+ #ffffff 60%,
2637
+ #ffffff 70%,
2638
+ transparent 70%,
2639
+ transparent 90%,
2640
+ #ffffff 90%);
2641
+ }
2642
+ .vuuSplitter-column:before {
2643
+ width: 10px;
2644
+ height: 1px;
2645
+ background:
2646
+ linear-gradient(
2647
+ to right,
2648
+ var(--grey900) 10%,
2649
+ transparent 10%,
2650
+ transparent 30%,
2651
+ var(--grey900) 30%,
2652
+ var(--grey900) 40%,
2653
+ transparent 40%,
2654
+ transparent 60%,
2655
+ var(--grey900) 60%,
2656
+ var(--grey900) 70%,
2657
+ transparent 70%,
2658
+ transparent 90%,
2659
+ var(--grey900) 90%);
2660
+ }
2661
+
2662
+ /* ../vuu-layout/src/flexbox/Flexbox.css */
2663
+ :root {
2664
+ --hw-space-unit: 4px;
2665
+ --hw-flex-gap: 3;
2666
+ --hw-fluid-grid-col-bg: rgba(200, 200, 200, 0.3);
2667
+ }
2668
+ .hwFlexbox {
2669
+ background-color: var(--container1-background);
2670
+ box-sizing: border-box;
2671
+ display: flex;
2672
+ gap: calc(var(--spacing) * var(--space));
2673
+ min-height: 0;
2674
+ min-width: 0;
2675
+ overflow: hidden;
2676
+ }
2677
+ .hwFlexbox-column {
2678
+ flex-direction: column;
2679
+ }
2680
+ .hwFlexbox-row {
2681
+ flex-direction: row;
2682
+ }
2683
+ .hwFlexbox > .Splitter {
2684
+ flex-basis: auto;
2685
+ flex-grow: 0;
2686
+ flex-shrink: 0;
2687
+ }
2688
+ .hwFlexbox.full-page {
2689
+ height: 100vh;
2690
+ width: 100vw;
2691
+ }
2692
+ .flex-fill {
2693
+ border-color: red;
2694
+ flex: 0;
2695
+ flex-grow: 1;
2696
+ flex-shrink: 1;
2697
+ }
2698
+ .vuuView.flex-fill {
2699
+ border-color: red;
2700
+ }
2701
+
2702
+ /* ../vuu-layout/src/flexbox/FluidGrid.css */
2703
+ :root {
2704
+ --hw-space-unit: 4px;
2705
+ --hw-fluid-grid-col-bg: rgba(252, 209, 232, 0.7);
2706
+ }
2707
+ .hwFluidGrid {
2708
+ --gap: var(--gutter-width);
2709
+ display: flex;
2710
+ gap: calc(var(--grid-gap) * var(--hw-space-unit));
2711
+ flex-wrap: wrap;
2712
+ padding: 0;
2713
+ }
2714
+ .hwFluidGrid > * {
2715
+ --gutter-width: calc(var(--hw-flex-gap) * var(--hw-space-unit));
2716
+ --gutter-count: calc(var(--parent-col-count) - 1);
2717
+ --total-gutter-width: calc(var(--gutter-count) * var(--gutter-width));
2718
+ --available-width: calc(100% - var(--total-gutter-width));
2719
+ flex-basis: 0;
2720
+ flex-grow: 1;
2721
+ flex-shrink: 1;
2722
+ position: relative;
2723
+ }
2724
+ .hwFluidGrid > *:after {
2725
+ content: "";
2726
+ position: absolute;
2727
+ top: 0;
2728
+ left: 0;
2729
+ right: 0;
2730
+ bottom: 0;
2731
+ border: dashed 2px blue;
2732
+ }
2733
+ .hwFluidGrid > [data-xs] {
2734
+ --internal-gutter-count: calc(var(--col-span) - 1);
2735
+ --percent-width: calc(var(--col-span) / var(--parent-col-count));
2736
+ --internal-gutter-width: calc(var(--internal-gutter-count) * var(--gutter-width));
2737
+ flex-basis: calc(var(--available-width) * var(--percent-width) + var(--internal-gutter-width));
2738
+ flex-grow: 0;
2739
+ }
2740
+ .hwFluidGrid > [data-xs="1"] {
2741
+ --col-span: 1;
2742
+ }
2743
+ .hwFluidGrid > [data-xs="2"] {
2744
+ --col-span: 2;
3249
2745
  }
3250
- .vuuView.dragging {
3251
- box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
2746
+ .hwFluidGrid > [data-xs="3"] {
2747
+ --col-span: 3;
3252
2748
  }
3253
- .vuuView-main {
3254
- display: flex;
3255
- flex-direction: var(--vuuView-flexDirection, column);
3256
- flex-wrap: var(--vuuView-flex-wrap, nowrap);
3257
- flex: 1;
3258
- justify-content: var(--vuuView-justify, flex-start);
3259
- overflow: hidden;
3260
- position: relative;
2749
+ .hwFluidGrid > [data-xs="4"] {
2750
+ --col-span: 4;
3261
2751
  }
3262
- .vuuView-main > * {
3263
- flex-basis: auto;
3264
- flex-grow: var(--vuuView-flex-grow, 1);
3265
- flex-shrink: var(--vuuView-flex-shrink, 1);
2752
+ .hwFluidGrid > [data-xs="6"] {
2753
+ --col-span: 6;
3266
2754
  }
3267
- .vuuView-collapsed .vuuView-main {
3268
- display: none;
2755
+ .hwFluidGrid > [data-xs="8"] {
2756
+ --col-span: 8;
3269
2757
  }
3270
- .vuuView-collapsed + .Splitter {
3271
- display: none;
2758
+ .hwFluidGrid > [data-xs="9"] {
2759
+ --col-span: 9;
3272
2760
  }
3273
- .vuuView-collapsed .Toolbar-vertical {
3274
- border-right: solid 1px var(--grey40);
2761
+ .hwFluidGrid > [data-xs="10"] {
2762
+ --col-span: 10;
3275
2763
  }
3276
- .vuuView-collapsed .Toolbar-vertical .toolbar-title {
3277
- display: none;
2764
+ .hwFluidGrid > [data-xs="11"] {
2765
+ --col-span: 11;
3278
2766
  }
3279
-
3280
- /* ../vuu-layout/src/layout-header/Header.css */
3281
- .vuuHeader {
3282
- --saltButton-height: 24px;
3283
- --saltButton-width: 24px;
2767
+ .hwFluidGrid > [data-xs="12"] {
2768
+ --col-span: 12;
3284
2769
  }
3285
- .salt-density-high .vuuHeader {
3286
- --saltToolbarField-marginTop: 0;
2770
+ @media (min-width: 600px) {
2771
+ .hwFluidGrid > [data-sm="1"] {
2772
+ --col-span: 1;
2773
+ }
2774
+ .hwFluidGrid > [data-sm="2"] {
2775
+ --col-span: 2;
2776
+ }
2777
+ .hwFluidGrid > [data-sm="3"] {
2778
+ --col-span: 3;
2779
+ }
2780
+ .hwFluidGrid > [data-sm="4"] {
2781
+ --col-span: 4;
2782
+ }
2783
+ .hwFluidGrid > [data-sm="6"] {
2784
+ --col-span: 6;
2785
+ }
2786
+ .hwFluidGrid > [data-sm="8"] {
2787
+ --col-span: 8;
2788
+ }
2789
+ .hwFluidGrid > [data-sm="9"] {
2790
+ --col-span: 9;
2791
+ }
2792
+ .hwFluidGrid > [data-sm="10"] {
2793
+ --col-span: 10;
2794
+ }
2795
+ .hwFluidGrid > [data-sm="11"] {
2796
+ --col-span: 11;
2797
+ }
2798
+ .hwFluidGrid > [data-sm="12"] {
2799
+ --col-span: 12;
2800
+ }
2801
+ }
2802
+ .hwFluidGrid-show-grid {
2803
+ --gutter-width: calc(var(--hw-flex-gap) * var(--hw-space-unit));
2804
+ --grid-gutter-count: calc(var(--grid-col-count, var(--parent-col-count)) - 1);
2805
+ --grid-total-gutter-width: calc(var(--grid-gutter-count) * var(--gutter-width));
2806
+ --grid-available-width: calc(100% - var(--grid-total-gutter-width));
2807
+ --grid-percent-width: calc(1 / var(--grid-col-count, var(--parent-col-count)));
2808
+ --column-width: calc(var(--grid-available-width) * var(--grid-percent-width));
2809
+ background:
2810
+ repeating-linear-gradient(
2811
+ to right,
2812
+ var(--hw-fluid-grid-col-bg) 0,
2813
+ var(--hw-fluid-grid-col-bg) var(--column-width),
2814
+ white var(--column-width),
2815
+ white calc(var(--column-width) + var(--gutter-width)));
3287
2816
  }
3288
2817
 
3289
- /* ../vuu-filters/src/filter-builder-menu/FilterBuilderMenu.css */
3290
- .vuuFilterBuilderMenu {
3291
- margin: 0;
2818
+ /* ../vuu-layout/src/measured-container/MeasuredContainer.css */
2819
+ .vuuMeasuredContainer {
2820
+ flex: var(--vuuMeasuredContainer-flex, none);
2821
+ height: var(--vuuMeasuredContainer-height, var(--measured-css-height));
2822
+ min-height: 0;
2823
+ width: var(--measured-css-width);
3292
2824
  }
3293
- .vuuFilterBuilderMenu-trigger {
3294
- display: inline-block;
3295
- height: 26px;
3296
- width: 0px;
2825
+
2826
+ /* ../vuu-layout/src/overflow-container/OverflowContainer.css */
2827
+ .vuuOverflowContainer {
2828
+ --overflow-borderColor: var(--vuuOverflowContainer-borderColor, none);
2829
+ --overflow-borderStyle: var(--vuuOverflowContainer-borderStyle, none);
2830
+ --overflow-borderWidth: var(--vuuOverflowContainer-borderWidth, 0px);
2831
+ --overflow-border-topWidth: var(--vuuOverflowContainer-borderTopWidth, var(--overflow-borderWidth));
2832
+ --overflow-border-rightWidth: var(--vuuOverflowContainer-borderRightWidth, var(--overflow-borderWidth));
2833
+ --overflow-border-bottomWidth: var(--vuuOverflowContainer-borderBottomWidth, var(--overflow-borderWidth));
2834
+ --overflow-border-leftWidth: var(--vuuOverflowContainer-borderLeftWidth, var(--overflow-borderWidth));
2835
+ --overflow-item-gap: var(--vuuOverflowContainer-gap,2px);
2836
+ --overflow-direction: row;
2837
+ --overflow-height: var(--overflow-item-height);
2838
+ --overflow-top:top:0;
2839
+ --overflow-width: 0px;
2840
+ background-color: var(--vuuOverflowContainer-background);
2841
+ border-color: var(--overflow-borderColor);
2842
+ border-style: var(--overflow-borderStyle);
2843
+ border-top-width: var(--overflow-border-topWidth);
2844
+ border-right-width: var(--overflow-border-rightWidth);
2845
+ border-bottom-width: var(--overflow-border-bottomWidth);
2846
+ border-left-width: var(--overflow-border-leftWidth);
2847
+ height: var(--overflow-container-heightWidth);
3297
2848
  }
3298
- .vuuFilterBuilderMenuList {
3299
- --vuuList-borderStyle: none;
2849
+ .vuuOverflowContainer-horizontal {
2850
+ --item-align: center;
2851
+ --item-margin: 0 var(--overflow-item-gap) 0 var(--overflow-item-gap);
3300
2852
  }
3301
- .vuuListItem:has(.vuuMenuButton) {
3302
- justify-content: center;
2853
+ .vuuOverflowContainer-vertical {
2854
+ --item-align: stretch;
2855
+ --overflow-item-height: auto;
2856
+ --item-margin: var(--overflow-item-gap) 0 var(--overflow-item-gap) 0;
2857
+ --overflow-direction: column;
2858
+ --overflow-height: 0;
2859
+ --overflow-left: 0;
2860
+ --overflow-top: 100%;
2861
+ --overflow-width: auto;
3303
2862
  }
3304
- .vuuMenuButton {
3305
- background-color: white;
3306
- border: solid 1px var(--salt-actionable-primary-foreground);
3307
- border-radius: 6px;
3308
- color: var(--vuu-color-gray-50);
3309
- font-size: 9px;
3310
- padding: 1px 6px;
2863
+ .vuuOverflowContainer-wrapContainer {
2864
+ --border: calc(var(--overflow-border-topWidth) + var(--overflow-border-bottomWidth));
2865
+ --overflow-item-height: calc(var(--overflow-container-height) - var(--border));
2866
+ align-items: var(--item-align);
2867
+ display: flex;
2868
+ flex-direction: var(--overflow-direction);
2869
+ flex-wrap: wrap;
2870
+ height: var(--overflow-item-height);
2871
+ justify-content: var(--vuuOverflowContainer-justifyContent, flex-start);
2872
+ min-width: var(--vuuOverflowContainer-minWidth, 44px);
2873
+ overflow: hidden;
2874
+ position: relative;
2875
+ width: 100%;
3311
2876
  }
3312
-
3313
- /* ../vuu-filters/src/filter-clause/ExpandoCombobox.css */
3314
- .vuuExpandoCombobox {
3315
- --expando-combobox-height: var(--vuuExpandoCombobox-height, 24px);
3316
- --expando-combobox-fontSize: var(--vuuExpandoCombobox-fontSizew, 12px);
3317
- --saltInput-outline: none;
3318
- --saltInput-fontSize: var(--expando-combobox-fontSize);
3319
- --saltInput-height: var(--expando-combobox-height);
3320
- --saltInput-minWidth: 4px;
3321
- display: inline-flex;
3322
- flex-direction: column;
3323
- height: var(--expando-combobox-height);
3324
- min-width: 4px;
3325
- padding: 0;
2877
+ .vuuOverflowContainer-wrapContainer-overflowed {
2878
+ --overflow-order: 2;
2879
+ --overflow-left: auto;
2880
+ --overflow-position: relative;
2881
+ --overflow-width: auto;
3326
2882
  }
3327
- .vuuExpandoCombobox .saltInput {
3328
- background-color: transparent;
3329
- position: absolute;
2883
+ .vuuOverflowContainer-vertical.vuuOverflowContainer-wrapContainer-overflowed {
2884
+ --overflow-height: auto;
3330
2885
  }
3331
- .vuuExpandoCombobox .vuuDropdown {
3332
- height: 100%;
2886
+ .vuuOverflowContainer-item {
2887
+ align-items: inherit;
2888
+ display: flex;
2889
+ order: 1;
2890
+ position: relative;
2891
+ height: var(--overflow-item-height);
2892
+ margin: var(--item-margin);
3333
2893
  }
3334
- .vuuExpandoCombobox-Input.saltInput {
3335
- border: none;
3336
- left: 0px;
3337
- margin: 0;
3338
- min-height: 100%;
3339
- padding: 0;
3340
- right: 0px;
3341
- width: auto;
2894
+ .vuuOverflowContainer-item[data-align=right] {
2895
+ margin-left: auto;
3342
2896
  }
3343
- .vuuExpandoCombobox .saltInput-input {
3344
- border: none;
3345
- box-sizing: content-box;
3346
- display: block;
3347
- flex: 1;
3348
- font: inherit;
3349
- margin: 0;
3350
- min-width: 0;
3351
- outline: none;
3352
- padding: 0;
2897
+ .vuuOverflowContainer-item.wrapped {
2898
+ --overflow-item-bg: #ccc;
2899
+ order: 3;
3353
2900
  }
3354
- .vuuExpandoCombobox:before {
3355
- content: attr(data-text);
3356
- display: block;
3357
- font-size: var(--expando-combobox-fontSize);
3358
- height: 0px;
3359
- overflow: hidden;
3360
- white-space: pre-wrap;
2901
+ .vuuOverflowContainer-item.vuuDraggable-dragAway,
2902
+ .vuuOverflowContainer-item:has(.vuuDraggable-dragAway) {
2903
+ display: none;
3361
2904
  }
3362
-
3363
- /* ../vuu-filters/src/filter-clause/FilterClauseEditor.css */
3364
- .vuuFilterClause {
3365
- --vuuExpandoInput-top: 0;
3366
- --vuuExpandoInput-height: 16px;
3367
- --vuuExpandoCombobox-height: 16px;
3368
- --saltButton-height: 16px;
3369
- --saltButton-width: 16px;
2905
+ .vuuOverflowContainer-item.vuuDropTarget-settling {
2906
+ visibility: hidden;
2907
+ }
2908
+ .vuuOverflowContainer-OverflowIndicator {
2909
+ align-items: center;
2910
+ background-color: transparent;
3370
2911
  display: flex;
3371
- flex-direction: row;
3372
- width: fit-content;
3373
- border-color: var(--vuu-color-gray-45);
3374
- border-radius: 6px;
3375
- border-width: 1px;
3376
- border-style: solid;
3377
- background: #ffffff;
3378
- --salt-focused-outlineStyle: dotted;
2912
+ height: var(--overflow-height);
2913
+ order: var(--overflow-order, 99);
2914
+ overflow: hidden;
2915
+ left: var(--overflow-left, 100%);
2916
+ top: var(--overflow-top, 100%);
2917
+ position: var(--overflow-position, absolute);
2918
+ width: var(--overflow-width);
3379
2919
  }
3380
- .vuuFilterClause:focus-within {
3381
- border-color: var(--vuu-color-purple-10);
2920
+ .vuuDraggable-vuuOverflowContainer {
2921
+ align-items: center;
2922
+ display: flex;
2923
+ height: 44px;
3382
2924
  }
3383
- .vuu-density-high .vuuFilterClause {
3384
- padding: 4px 8px;
3385
- gap: 4px;
3386
- --salt-text-lineHeight: 12px;
3387
- --saltInputLegacy-fontSize: 12px;
3388
- --saltInputLegacy-minWidth: 12px;
2925
+
2926
+ /* ../vuu-layout/src/palette/Palette.css */
2927
+ .vuuPalette {
2928
+ --vuuList-borderStyle: none;
3389
2929
  }
3390
- .vuu-density-high .vuuFilterClause .saltInput {
3391
- padding: 0;
3392
- min-height: 16px;
3393
- height: 16px;
2930
+ .vuuPalette-horizontal {
2931
+ align-items: center;
2932
+ display: flex;
3394
2933
  }
3395
- .vuuFilterClause .vuuExpandoCombobox {
3396
- flex-basis: auto;
3397
- flex-shrink: 0;
3398
- flex-grow: 0;
2934
+ .vuuPaletteItem {
2935
+ --vuu-icon-color: var(--salt-text-primary-foreground);
2936
+ --vuu-icon-left: 0;
2937
+ --vuu-icon-size: 16px;
2938
+ --vuu-icon-top: 11px;
2939
+ --list-item-text-padding: 0 0 0 calc(var(--salt-size-unit) * 3);
2940
+ border-bottom: solid 1px var(--salt-separable-tertiary-borderColor);
2941
+ padding-left: 12px;
2942
+ font-size: 12px;
2943
+ font-weight: 600;
3399
2944
  }
3400
- .vuuFilterClauseOperator-hidden {
3401
- display: none;
2945
+ .vuuSimpleDraggableWrapper > .vuuPaletteItem {
2946
+ --vuu-icon-color: var(--salt-selectable-foreground);
3402
2947
  }
3403
- .vuuFilterClause :not(.vuuFilterClauseNumericValue) .saltInput {
2948
+ .salt-theme .vuuPaletteItem {
2949
+ font-size: 11px;
2950
+ font-weight: normal;
3404
2951
  }
3405
- .vuuFilterClause .saltInput-focused,
3406
- .vuuFilterClause .saltTokenizedInput-focused {
3407
- outline: none;
3408
- color: var(--salt-text-primary-foreground);
2952
+
2953
+ /* ../vuu-layout/src/stack/Stack.css */
2954
+ .vuuTabs {
2955
+ display: flex;
2956
+ box-sizing: border-box;
2957
+ flex-direction: column;
3409
2958
  }
3410
- .vuuFilterClause .saltInput-input::selection {
3411
- color: #ffffff;
2959
+ .vuuTabs-horizontal {
2960
+ --vuu-tabs-border-style: none solid none none;
2961
+ flex-direction: row;
3412
2962
  }
3413
- .vuu-theme .saltList {
3414
- --list-borderWidth: 1px;
3415
- --list-borderStyle: solid;
3416
- border-radius: 4px;
3417
- box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.4);
2963
+ .vuuTabs .Toolbar:before {
2964
+ left: 0;
2965
+ width: 100%;
2966
+ bottom: 0;
2967
+ height: 1px;
2968
+ content: "";
2969
+ position: absolute;
2970
+ background: var(--grey60);
3418
2971
  }
3419
- .saltListItem[aria-selected=true]:not(.saltListItem-checkbox) {
3420
- --list-item-background: var(--list-item-background-active);
3421
- color: var(--list-item-text-color-active);
2972
+ .vuuTabs-tabPanel {
2973
+ display: flex;
2974
+ flex: 1;
2975
+ flex-direction: column;
3422
2976
  }
3423
- .saltTokenizedInput {
3424
- height: 16px;
3425
- min-height: 16px;
2977
+ .vuuTabs-tabPanel > * {
2978
+ flex: 1 1 auto;
3426
2979
  }
3427
- .saltTokenizedInput .saltInputPill {
3428
- --pill-fontSize: 12px;
3429
- --saltButton-borderStyle: none;
3430
- --pill-background: none;
3431
- height: 16px;
3432
- margin: 0;
2980
+ .vuuTabHeader {
2981
+ --saltTabs-activationIndicator-background: transparent;
2982
+ --saltToolbarField-marginTop: calc(var(--salt-size-unit) - 1px);
2983
+ border-color: var(--salt-container-primary-borderColor);
2984
+ border-style: var(--vuu-tabs-border-style, none none solid none);
2985
+ border-width: 1px;
3433
2986
  }
3434
- .saltTokenizedInput-pillGroup {
3435
- padding: 0;
3436
- height: 16px;
2987
+ .vuuTabHeader + .vuuView > .vuuHeader {
2988
+ height: 0;
2989
+ overflow: hidden;
3437
2990
  }
3438
-
3439
- /* ../vuu-filters/src/filter-pill-menu/FilterPillMenu.css */
3440
- .vuuFilterPillMenu {
3441
- top: -1px;
2991
+ .Layout-svg-button {
2992
+ --spacing-medium: 5px;
3442
2993
  }
3443
2994
 
3444
- /* ../vuu-filters/src/filter-pill/FilterPill.css */
3445
- .vuuFilterPill {
3446
- align-items: center;
3447
- background: var(--salt-taggable-background);
3448
- border: solid 1px var(--salt-taggable-foreground);
3449
- border-radius: 24px;
3450
- color: var(--vuu-color-gray-50);
3451
- display: inline-flex;
3452
- max-width: var(--vuuFilterPill-maxWidth, 200px);
3453
- padding: 0 8px;
3454
- position: relative;
3455
- user-select: none;
3456
- outline: none;
2995
+ /* ../vuu-layout/src/toolbar/Toolbar.css */
2996
+ .vuuToolbar {
2997
+ --toolbar-height: var(--vuuToolbar-height, 36px);
2998
+ --toolbar-item-height: var(--vuuToolbarItem-height, 100%);
2999
+ --vuuOverflowContainer-background: var(--vuuToolbar-background);
3000
+ --vuuOverflowContainer-borderColor: var(--vuuToolbar-borderColor);
3001
+ --vuuOverflowContainer-borderStyle: var(--vuuToolbar-borderStyle);
3002
+ --vuuOverflowContainer-borderWidth: var(--vuuToolbar-borderWidth);
3003
+ height: var(--toolbar-height);
3457
3004
  }
3458
- .vuuFilterPill.vuuToolbarItem {
3459
- height: 24px;
3005
+ .vuuToolbar-alignCenter {
3006
+ --vuuOverflowContainer-justifyContent: center;
3460
3007
  }
3461
- .vuuFilterPill[aria-selected=true] {
3462
- --vuuPopupMenu-iconColor: white;
3463
- --salt-text-background-selected: var(--vuu-color-blue-40);
3464
- --salt-text-color-selected: var(--salt-text-primary-foreground);
3465
- --saltInput-background-hover: var(--salt-taggable-background-active);
3466
- --saltInput-color: var(--salt-taggable-foreground-active);
3467
- background: var(--salt-taggable-background-active);
3468
- color: white;
3008
+ .vuuToolbar-alignEnd {
3009
+ --vuuOverflowContainer-justifyContent: flex-end;
3469
3010
  }
3470
- .vuuFilterPill:not([aria-selected="true"]):hover {
3471
- --vuuPopupMenu-iconColor: var(--vuu-color-gray-80);
3472
- background-color: var(--salt-taggable-background-hover);
3473
- border-color: var(--salt-taggable-background-hover);
3474
- color: var(--vuu-color-gray-80);
3011
+ .vuuToolbarItem {
3012
+ height: var(--toolbar-item-height);
3475
3013
  }
3476
-
3477
- /* ../vuu-filters/src/filter-bar/FilterBar.css */
3478
- .vuuFilterBar {
3479
- --vuu-svg-tune: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 18C3 18.55 3.45 19 4 19H9V17H4C3.45 17 3 17.45 3 18ZM3 6C3 6.55 3.45 7 4 7H13V5H4C3.45 5 3 5.45 3 6ZM13 20V19H20C20.55 19 21 18.55 21 18C21 17.45 20.55 17 20 17H13V16C13 15.45 12.55 15 12 15C11.45 15 11 15.45 11 16V20C11 20.55 11.45 21 12 21C12.55 21 13 20.55 13 20ZM7 10V11H4C3.45 11 3 11.45 3 12C3 12.55 3.45 13 4 13H7V14C7 14.55 7.45 15 8 15C8.55 15 9 14.55 9 14V10C9 9.45 8.55 9 8 9C7.45 9 7 9.45 7 10ZM21 12C21 11.45 20.55 11 20 11H11V13H20C20.55 13 21 12.55 21 12ZM16 9C16.55 9 17 8.55 17 8V7H20C20.55 7 21 6.55 21 6C21 5.45 20.55 5 20 5H17V4C17 3.45 16.55 3 16 3C15.45 3 15 3.45 15 4V8C15 8.55 15.45 9 16 9Z" /></svg>');
3480
- --vuuToolbar-height: 28px;
3481
- --salt-container-primary-borderColor: var(--vuu-color-purple-10);
3482
- --vuuOverflowContainer-minWidth: 0;
3483
- --saltButton-height: 26px;
3484
- --saltButton-width: 26px;
3485
- align-items: center;
3486
- background-color: var(--salt-container-secondary-background);
3487
- border-bottom: solid 1px #D6D7DA;
3488
- display: flex;
3489
- flex: var(--vuuFilterBar-flex);
3490
- gap: 4px;
3491
- height: 33px;
3492
- padding: 0px 8px;
3014
+ .vuuToolbar-withSeparators .vuuOverflowContainer-item:not(:first-child):before {
3015
+ content: "";
3016
+ position: absolute;
3017
+ left: calc(-1 * var(--overflow-item-gap));
3018
+ top: calc((var(--toolbar-height) - var(--toolbar-item-height)) /2);
3019
+ width: 1px;
3020
+ height: var(--toolbar-item-height);
3021
+ background-color: var(--vuu-color-gray-05);
3493
3022
  }
3494
- .vuuFilterbar-icon {
3495
- display: inline-block;
3496
- height: 16px;
3497
- width: 16px;
3023
+ .vuuToolbarItem.vuuFocusVisible {
3024
+ outline-color: var(--vuuToolbarItem-outlineColor, var(--salt-focused-outlineColor));
3025
+ outline-style: dashed;
3026
+ outline-width: 1px;
3027
+ outline-offset: 0px;
3498
3028
  }
3499
- .vuuFilterBar [data-icon=tune] {
3500
- --vuu-icon-size: 16px;
3501
- --vuu-icon-svg: var(--vuu-svg-tune);
3029
+ .vuuPopupMenu:focus,
3030
+ .vuuToolbarItem:focus,
3031
+ .vuuToolbarItem:focus-visible {
3032
+ outline-color: var(--vuuToolbarItem-outlineColor, var(--vuu-color-purple-10));
3033
+ outline-style: dashed;
3034
+ outline-width: 1px;
3035
+ outline-offset: 0px;
3502
3036
  }
3503
- .vuuFilterBar [data-icon=plus] {
3504
- --vuu-icon-size: 16px;
3037
+
3038
+ /* ../vuu-layout/src/tools/devtools-box/layout-configurator.css */
3039
+ [data-design-mode=true] .Component {
3040
+ filter: grayscale(100%);
3041
+ opacity: 0.4;
3505
3042
  }
3506
- .vuuFilterBar .vuuToolbar {
3507
- flex: 0 1 auto;
3043
+ [data-design-mode=true] .Component:after {
3044
+ color: black;
3045
+ content: "Component";
3046
+ height: 12px;
3047
+ background-color: yellow;
3508
3048
  }
3509
-
3510
- /* ../vuu-filters/src/filter-input/FilterInput.css */
3511
- .salt-theme {
3512
- --vuuFilterEditor-lineHeight: 28px;
3049
+ .LayoutConfigurator {
3050
+ --margin-color: #f3cea5;
3051
+ --border-color: #fddda0;
3052
+ --padding-color: #c6d092;
3053
+ --content-color: #8cb6c0;
3054
+ display: flex;
3055
+ flex-direction: column;
3056
+ align-items: stretch;
3057
+ background-color: var(--margin-color);
3513
3058
  }
3514
- .salt-density-high {
3515
- --vuuFilterEditor-buttonWidth: 20px;
3516
- --vuuFilterEditor-height: 22px;
3517
- --vuuFilterEditor-lineHeight: 20px;
3059
+ .LayoutConfigurator .layout-outer {
3060
+ flex: 1 1 auto;
3061
+ display: flex;
3062
+ flex-direction: column;
3063
+ align-items: stretch;
3518
3064
  }
3519
- .vuuFilterInput {
3520
- --vuuFilterEditor-background: var(--salt-container-primary-background);
3521
- --vuuFilterEditor-color: var(--salt-text-primary-foreground);
3522
- --vuuFilterEditor-fontFamily: var(--salt-typography-fontFamily);
3523
- --vuuFilterEditor-fontSize: var(--salt-text-fontSize);
3524
- --vuuFilterEditor-cursorColor: var(--salt-text-secondary-foreground);
3525
- --vuuFilterEditor-selectionBackground: var(--salt-text-background-selected);
3526
- --vuuFilterEditor-tooltipBackground: var(--salt-container-primary-background);
3527
- --vuuFilterEditor-tooltipBorder: var(--tooltip-status-borderColor) var(--salt-container-borderWidth) var(--salt-container-borderStyle);
3528
- --vuuFilterEditor-tooltipElevation: var(--salt-overlayable-shadow-popout);
3529
- --vuuFilterEditor-suggestion-selectedBackground: var(--salt-selectable-background-selected);
3530
- --vuuFilterEditor-suggestion-selectedColor: var(--vuuFilterEditor-color);
3531
- --vuuFilterEditor-suggestion-height: 24px;
3532
- --vuuFilterEditor-variableColor: var(--vuu-color_purple-10);
3065
+ .LayoutBox {
3066
+ --hw-control-font-size: 13px;
3067
+ --hw-text-input-bg: rgba(255, 255, 255, 0.3);
3068
+ --hwTextInput-padding: 3px;
3069
+ --hw-text-input-position: absolute;
3070
+ --hwTextInput-width: 30px;
3071
+ flex: 1 1 auto;
3072
+ }
3073
+ .LayoutBox > .layout-top {
3074
+ flex: 0 0 40px;
3075
+ padding-left: 12px;
3076
+ display: flex;
3077
+ flex-direction: row;
3533
3078
  align-items: center;
3534
- border-color: var(--salt-container-secondary-borderColor);
3535
- border-style: solid none;
3536
- border-width: 1px;
3537
- box-sizing: border-box;
3079
+ position: relative;
3080
+ }
3081
+ .LayoutBox > .layout-bottom {
3082
+ flex: 0 0 40px;
3083
+ position: relative;
3538
3084
  display: flex;
3539
- height: var(--vuuFilterEditor-height, 30px);
3085
+ flex-direction: row;
3086
+ align-items: center;
3540
3087
  }
3541
- .vuuFilterInput-Editor {
3542
- flex: 1 1 auto;
3543
- height: 100%;
3088
+ .LayoutBox > .layout-inner > .layout-right,
3089
+ .LayoutBox > .layout-inner > .layout-left {
3090
+ flex: 0 0 40px;
3091
+ display: flex;
3092
+ flex-direction: column;
3093
+ justify-content: center;
3094
+ align-items: center;
3544
3095
  }
3545
- .vuuFilterInput-FilterButton,
3546
- .vuuFilterInput-ClearButton {
3547
- --vuu-icon-size: 12px;
3548
- --saltButton-width: var(--vuuFilterEditor-buttonWidth, 28px);
3096
+ .layout-top,
3097
+ .layout-bottom {
3098
+ --hw-text-input-margin: 0 0 0 -15px;
3549
3099
  }
3550
- .vuuIllustration {
3551
- --vuuFilterEditor-suggestion-selectedBackground:var(--salt-container-secondary-background);
3552
- background: var(--salt-container-secondary-background);
3553
- color: var(--salt-text-secondary-foreground);
3100
+ .layout-top > .layout-input,
3101
+ .layout-bottom > .layout-input {
3102
+ left: 50%;
3554
3103
  }
3555
-
3556
- /* ../vuu-layout/src/measured-container/MeasuredContainer.css */
3557
- .vuuMeasuredContainer {
3558
- flex: var(--vuuMeasuredContainer-flex, none);
3559
- height: var(--vuuMeasuredContainer-height, var(--measured-css-height));
3560
- min-height: 0;
3561
- width: var(--measured-css-width);
3104
+ .LayoutBox > .layout-inner {
3105
+ flex: 1 1 auto;
3106
+ display: flex;
3107
+ flex-direction: row;
3108
+ align-items: stretch;
3562
3109
  }
3563
-
3564
- /* ../vuu-layout/src/overflow-container/OverflowContainer.css */
3565
- .vuuOverflowContainer {
3566
- --overflow-borderColor: var(--vuuOverflowContainer-borderColor, none);
3567
- --overflow-borderStyle: var(--vuuOverflowContainer-borderStyle, none);
3568
- --overflow-borderWidth: var(--vuuOverflowContainer-borderWidth, 0px);
3569
- --overflow-border-topWidth: var(--vuuOverflowContainer-borderTopWidth, var(--overflow-borderWidth));
3570
- --overflow-border-rightWidth: var(--vuuOverflowContainer-borderRightWidth, var(--overflow-borderWidth));
3571
- --overflow-border-bottomWidth: var(--vuuOverflowContainer-borderBottomWidth, var(--overflow-borderWidth));
3572
- --overflow-border-leftWidth: var(--vuuOverflowContainer-borderLeftWidth, var(--overflow-borderWidth));
3573
- --overflow-item-gap: var(--vuuOverflowContainer-gap,2px);
3574
- --overflow-direction: row;
3575
- --overflow-height: var(--overflow-item-height);
3576
- --overflow-top:top:0;
3577
- --overflow-width: 0px;
3578
- background-color: var(--vuuOverflowContainer-background);
3579
- border-color: var(--overflow-borderColor);
3580
- border-style: var(--overflow-borderStyle);
3581
- border-top-width: var(--overflow-border-topWidth);
3582
- border-right-width: var(--overflow-border-rightWidth);
3583
- border-bottom-width: var(--overflow-border-bottomWidth);
3584
- border-left-width: var(--overflow-border-leftWidth);
3585
- height: var(--overflow-container-heightWidth);
3110
+ .LayoutBox.layout-margin {
3111
+ background-color: var(--margin-color);
3112
+ border: dashed 2px black;
3586
3113
  }
3587
- .vuuOverflowContainer-horizontal {
3588
- --item-align: center;
3589
- --item-margin: 0 var(--overflow-item-gap) 0 var(--overflow-item-gap);
3114
+ .LayoutBox.layout-border {
3115
+ background-color: var(--border-color);
3116
+ border: solid 2px black;
3590
3117
  }
3591
- .vuuOverflowContainer-vertical {
3592
- --item-align: stretch;
3593
- --overflow-item-height: auto;
3594
- --item-margin: var(--overflow-item-gap) 0 var(--overflow-item-gap) 0;
3595
- --overflow-direction: column;
3596
- --overflow-height: 0;
3597
- --overflow-left: 0;
3598
- --overflow-top: 100%;
3599
- --overflow-width: auto;
3118
+ .LayoutBox.layout-padding {
3119
+ background-color: var(--padding-color);
3120
+ border: dashed 2px black;
3600
3121
  }
3601
- .vuuOverflowContainer-wrapContainer {
3602
- --border: calc(var(--overflow-border-topWidth) + var(--overflow-border-bottomWidth));
3603
- --overflow-item-height: calc(var(--overflow-container-height) - var(--border));
3604
- align-items: var(--item-align);
3605
- display: flex;
3606
- flex-direction: var(--overflow-direction);
3607
- flex-wrap: wrap;
3608
- height: var(--overflow-item-height);
3609
- justify-content: var(--vuuOverflowContainer-justifyContent, flex-start);
3610
- min-width: var(--vuuOverflowContainer-minWidth, 44px);
3611
- overflow: hidden;
3612
- position: relative;
3613
- width: 100%;
3122
+ .LayoutBox .layout-content {
3123
+ flex: 1 1 auto;
3124
+ background-color: var(--content-color);
3125
+ border: solid 2px #808080;
3614
3126
  }
3615
- .vuuOverflowContainer-wrapContainer-overflowed {
3616
- --overflow-order: 2;
3617
- --overflow-left: auto;
3618
- --overflow-position: relative;
3619
- --overflow-width: auto;
3127
+ .LayoutBox .layout-title {
3128
+ color: #161616;
3129
+ font-size: 11px;
3130
+ left: 4px;
3131
+ line-height: 15px;
3132
+ position: absolute;
3133
+ top: 1px;
3620
3134
  }
3621
- .vuuOverflowContainer-vertical.vuuOverflowContainer-wrapContainer-overflowed {
3622
- --overflow-height: auto;
3135
+
3136
+ /* ../vuu-layout/src/tools/devtools-tree/layout-tree-viewer.css */
3137
+ .hwLayoutTreeViewer {
3623
3138
  }
3624
- .vuuOverflowContainer-item {
3625
- align-items: inherit;
3626
- display: flex;
3627
- order: 1;
3628
- position: relative;
3629
- height: var(--overflow-item-height);
3630
- margin: var(--item-margin);
3139
+ .hwLayoutTreeNode {
3140
+ cursor: default;
3631
3141
  }
3632
- .vuuOverflowContainer-item[data-align=right] {
3633
- margin-left: auto;
3142
+ .hwLayoutTreeNode:hover {
3143
+ background-color: rgba(255, 255, 255, 0.2);
3634
3144
  }
3635
- .vuuOverflowContainer-item.wrapped {
3636
- --overflow-item-bg: #ccc;
3637
- order: 3;
3145
+ .hwLayoutTreeNode[aria-selected=true] {
3146
+ background-color: cornflowerblue;
3147
+ color: white;
3638
3148
  }
3639
- .vuuOverflowContainer-item.vuuDraggable-dragAway,
3640
- .vuuOverflowContainer-item:has(.vuuDraggable-dragAway) {
3641
- display: none;
3149
+
3150
+ /* ../vuu-shell/src/login/LoginPanel.css */
3151
+ .vuuLoginPanel {
3152
+ --saltInput-paddingLeft: 8px;
3153
+ --login-width: 856px;
3154
+ --login-height: 550px;
3155
+ --hwTextInput-border: solid 1px #ccc;
3156
+ --hwTextInput-height: 28px;
3157
+ --hwTextInput-padding: 0 12px;
3158
+ --hwTextInput-width: 100%;
3159
+ --login-row-height: 60px;
3160
+ border-radius: 16px;
3161
+ box-shadow: 0px 24px 44px 0px rgba(0, 0, 0, 0.25);
3162
+ display: flex;
3163
+ height: var(--login-height);
3164
+ margin: 0 auto;
3165
+ width: var(--login-width);
3642
3166
  }
3643
- .vuuOverflowContainer-item.vuuDropTarget-settling {
3644
- visibility: hidden;
3167
+ .vuuLoginPanel .saltInput-primary {
3168
+ --saltInput-height: 36px;
3645
3169
  }
3646
- .vuuOverflowContainer-OverflowIndicator {
3647
- align-items: center;
3648
- background-color: transparent;
3170
+ .vuuLoginPanel-title {
3171
+ justify-content: center;
3172
+ font-size: 28px;
3173
+ font-weight: 400;
3649
3174
  display: flex;
3650
- height: var(--overflow-height);
3651
- order: var(--overflow-order, 99);
3652
- overflow: hidden;
3653
- left: var(--overflow-left, 100%);
3654
- top: var(--overflow-top, 100%);
3655
- position: var(--overflow-position, absolute);
3656
- width: var(--overflow-width);
3657
3175
  }
3658
- .vuuDraggable-vuuOverflowContainer {
3176
+ .vuuLoginPanel-branding {
3659
3177
  align-items: center;
3178
+ background-color: var(--vuu-color-purple-50);
3179
+ border-radius: 16px 0 0 16px;
3660
3180
  display: flex;
3661
- height: 44px;
3662
- }
3663
-
3664
- /* ../vuu-layout/src/palette/Palette.css */
3665
- .vuuPalette {
3666
- --vuuList-borderStyle: none;
3181
+ flex: 0 0 368px;
3182
+ flex-direction: column;
3183
+ gap: 40px;
3184
+ justify-content: center;
3185
+ padding: 40px 100px;
3667
3186
  }
3668
- .vuuPalette-horizontal {
3669
- align-items: center;
3187
+ .vuuLoginPanel-form {
3188
+ background-color: white;
3189
+ border-radius: 0 16px 16px 0px;
3670
3190
  display: flex;
3191
+ flex: 1 1 auto;
3192
+ flex-direction: column;
3193
+ gap: 32px;
3194
+ justify-content: center;
3195
+ padding: 0 40px;
3671
3196
  }
3672
- .vuuPaletteItem {
3673
- --vuu-icon-color: var(--salt-text-primary-foreground);
3674
- --vuu-icon-left: 0;
3197
+ .vuuLoginPanel-password {
3675
3198
  --vuu-icon-size: 16px;
3676
- --vuu-icon-top: 11px;
3677
- --list-item-text-padding: 0 0 0 calc(var(--salt-size-unit) * 3);
3678
- border-bottom: solid 1px var(--salt-separable-tertiary-borderColor);
3679
- padding-left: 12px;
3680
- font-size: 12px;
3681
- font-weight: 600;
3682
3199
  }
3683
- .vuuSimpleDraggableWrapper > .vuuPaletteItem {
3684
- --vuu-icon-color: var(--salt-selectable-foreground);
3200
+ .vuuLoginPanel-appName {
3201
+ color: white;
3202
+ font-size: 18px;
3203
+ font-weight: 700;
3204
+ text-transform: uppercase;
3205
+ }
3206
+ .vuuLoginPanel-login {
3207
+ --saltButton-height: 36px;
3208
+ --saltButton-borderRadius: 6px;
3209
+ width: 100%;
3210
+ }
3211
+
3212
+ /* ../vuu-shell/src/app-header/AppHeader.css */
3213
+ .vuuAppHeader {
3214
+ --saltButton-borderRadius: 6px;
3215
+ --saltButton-text-color: var(--vuu-color-gray-50);
3216
+ --saltButton-padding: 12px;
3217
+ --vuuToolbarItem-height: 26px;
3218
+ --vuuOverflowContainer-gap: 8px;
3219
+ --vuu-icon-color: var(--vuu-color-gray-45);
3220
+ --vuu-icon-size: 16px;
3221
+ --vuuToolbar-background: var(--vuuAppHeader-background, var(--vuu-color-gray-28));
3222
+ --vuuToolbar-borderWidth: 1px;
3223
+ --vuuToolbar-borderStyle: solid;
3224
+ --vuuToolbar-borderColor: var(--vuu-color-gray-30);
3225
+ align-items: center;
3226
+ display: flex;
3227
+ justify-content: flex-end;
3685
3228
  }
3686
- .salt-theme .vuuPaletteItem {
3687
- font-size: 11px;
3688
- font-weight: normal;
3229
+ .vuu-theme .vuuAppHeader {
3230
+ border-radius: 8px;
3231
+ margin-bottom: 8px;
3689
3232
  }
3690
3233
 
3691
- /* ../vuu-layout/src/stack/Stack.css */
3692
- .vuuTabs {
3234
+ /* ../vuu-shell/src/connection-status/ConnectionStatusIcon.css */
3235
+ .vuuStatus-container {
3693
3236
  display: flex;
3694
- box-sizing: border-box;
3695
- flex-direction: column;
3696
3237
  }
3697
- .vuuTabs-horizontal {
3698
- --vuu-tabs-border-style: none solid none none;
3699
- flex-direction: row;
3238
+ .vuuStatus-text {
3239
+ align-self: center;
3700
3240
  }
3701
- .vuuTabs .Toolbar:before {
3702
- left: 0;
3703
- width: 100%;
3241
+ .vuuStatus {
3242
+ --vuu-icon-height: 18px;
3243
+ --vuu-icon-padding: var(--vuuStatus-padding, 6px);
3244
+ --vuu-icon-width: var(--vuuStatus-width, auto);
3245
+ --vuu-icon-min-width: var(--vuuStatus-min-width, 20px);
3246
+ align-items: center;
3247
+ display: inline-flex;
3248
+ height: var(--vuu-icon-height);
3249
+ justify-content: center;
3250
+ min-width: var(--vuu-icon-min-width);
3251
+ padding: 0 var(--vuu-icon-padding);
3252
+ width: var(--vuu-icon-width);
3253
+ position: relative;
3254
+ }
3255
+ .vuuStatus[data-icon]::after {
3256
+ top: 0;
3257
+ right: 0;
3704
3258
  bottom: 0;
3705
- height: 1px;
3259
+ left: 0;
3706
3260
  content: "";
3261
+ box-shadow: 0 0 0 0 black;
3707
3262
  position: absolute;
3708
- background: var(--grey60);
3709
- }
3710
- .vuuTabs-tabPanel {
3711
- display: flex;
3712
- flex: 1;
3713
- flex-direction: column;
3263
+ mask: var(--vuu-icon-svg) center center/20px 20px no-repeat;
3264
+ -webkit-mask: var(--vuu-icon-svg) center center/20px 20px no-repeat;
3714
3265
  }
3715
- .vuuTabs-tabPanel > * {
3716
- flex: 1 1 auto;
3266
+ .vuuActiveStatus::after {
3267
+ --vuu-icon-svg: var(--svg-active-status);
3268
+ background-color: rgb(0, 255, 0);
3717
3269
  }
3718
- .vuuTabHeader {
3719
- --saltTabs-activationIndicator-background: transparent;
3720
- --saltToolbarField-marginTop: calc(var(--salt-size-unit) - 1px);
3721
- border-color: var(--salt-container-primary-borderColor);
3722
- border-style: var(--vuu-tabs-border-style, none none solid none);
3723
- border-width: 1px;
3270
+ .vuuConnectingStatus::after {
3271
+ --vuu-icon-svg: var(--svg-connecting-status);
3272
+ background-color: orange;
3273
+ transform: scale(1);
3274
+ animation: infinite pulse 1s;
3724
3275
  }
3725
- .vuuTabHeader + .vuuView > .vuuHeader {
3726
- height: 0;
3727
- overflow: hidden;
3276
+ .vuuDisconnectedStatus::after {
3277
+ --vuu-icon-svg: var(--svg-disconnected-status);
3278
+ background-color: red;
3279
+ transform: scale(1);
3280
+ animation: infinite pulse 0.5s;
3728
3281
  }
3729
- .Layout-svg-button {
3730
- --spacing-medium: 5px;
3282
+ @keyframes pulse {
3283
+ 0% {
3284
+ transform: scale(0.95);
3285
+ box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
3286
+ }
3287
+ 70% {
3288
+ transform: scale(1);
3289
+ box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
3290
+ }
3291
+ 100% {
3292
+ transform: scale(0.95);
3293
+ box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
3294
+ }
3731
3295
  }
3732
3296
 
3733
- /* ../vuu-layout/src/toolbar/Toolbar.css */
3734
- .vuuToolbar {
3735
- --toolbar-height: var(--vuuToolbar-height, 36px);
3736
- --toolbar-item-height: var(--vuuToolbarItem-height, 100%);
3737
- --vuuOverflowContainer-background: var(--vuuToolbar-background);
3738
- --vuuOverflowContainer-borderColor: var(--vuuToolbar-borderColor);
3739
- --vuuOverflowContainer-borderStyle: var(--vuuToolbar-borderStyle);
3740
- --vuuOverflowContainer-borderWidth: var(--vuuToolbar-borderWidth);
3741
- height: var(--toolbar-height);
3742
- }
3743
- .vuuToolbar-alignCenter {
3744
- --vuuOverflowContainer-justifyContent: center;
3745
- }
3746
- .vuuToolbar-alignEnd {
3747
- --vuuOverflowContainer-justifyContent: flex-end;
3748
- }
3749
- .vuuToolbarItem {
3750
- height: var(--toolbar-item-height);
3751
- }
3752
- .vuuToolbar-withSeparators .vuuOverflowContainer-item:not(:first-child):before {
3753
- content: "";
3754
- position: absolute;
3755
- left: calc(-1 * var(--overflow-item-gap));
3756
- top: calc((var(--toolbar-height) - var(--toolbar-item-height)) /2);
3757
- width: 1px;
3758
- height: var(--toolbar-item-height);
3759
- background-color: var(--vuu-color-gray-05);
3760
- }
3761
- .vuuToolbarItem.vuuFocusVisible {
3762
- outline-color: var(--vuuToolbarItem-outlineColor, var(--salt-focused-outlineColor));
3763
- outline-style: dashed;
3764
- outline-width: 1px;
3765
- outline-offset: 0px;
3297
+ /* ../vuu-shell/src/layout-management/SaveLayoutPanel.css */
3298
+ .saveLayoutPanel {
3299
+ --salt-selectable-foreground-hover: #6d18bdc3;
3300
+ --salt-selectable-foreground-selected: #6D18BD;
3301
+ --salt-selectable-borderColor-selected: #6D18BD;
3302
+ --saltInputLegacy-fontSize: 12px;
3303
+ --salt-text-label-fontSize: 10px;
3304
+ --saltFormFieldLegacy-label-paddingLeft: 0;
3305
+ --saltFormField-label-fontWeight: 400;
3306
+ --saltText-color: var(--text-secondary-foreground, #606477);
3766
3307
  }
3767
- .vuuPopupMenu:focus,
3768
- .vuuToolbarItem:focus,
3769
- .vuuToolbarItem:focus-visible {
3770
- outline-color: var(--vuuToolbarItem-outlineColor, var(--vuu-color-purple-10));
3771
- outline-style: dashed;
3772
- outline-width: 1px;
3773
- outline-offset: 0px;
3308
+ .spinner {
3309
+ width: 100px;
3310
+ height: 100px;
3311
+ background-image: var(--svg-spinner);
3774
3312
  }
3775
-
3776
- /* ../vuu-layout/src/tools/devtools-box/layout-configurator.css */
3777
- [data-design-mode=true] .Component {
3778
- filter: grayscale(100%);
3779
- opacity: 0.4;
3313
+ .saveLayoutPanel-panelContainer {
3314
+ display: flex;
3315
+ flex-direction: column;
3316
+ align-items: flex-start;
3780
3317
  }
3781
- [data-design-mode=true] .Component:after {
3782
- color: black;
3783
- content: "Component";
3784
- height: 12px;
3785
- background-color: yellow;
3318
+ .saveLayoutPanel-panelContent {
3319
+ display: flex;
3320
+ align-items: flex-start;
3321
+ gap: 32px;
3786
3322
  }
3787
- .LayoutConfigurator {
3788
- --margin-color: #f3cea5;
3789
- --border-color: #fddda0;
3790
- --padding-color: #c6d092;
3791
- --content-color: #8cb6c0;
3323
+ .saveLayoutPanel-formContainer {
3792
3324
  display: flex;
3325
+ width: 217px;
3793
3326
  flex-direction: column;
3794
- align-items: stretch;
3795
- background-color: var(--margin-color);
3327
+ align-items: flex-start;
3328
+ gap: 16px;
3796
3329
  }
3797
- .LayoutConfigurator .layout-outer {
3798
- flex: 1 1 auto;
3330
+ .saveLayoutPanel-formField {
3799
3331
  display: flex;
3800
3332
  flex-direction: column;
3801
- align-items: stretch;
3333
+ gap: 1px;
3802
3334
  }
3803
- .LayoutBox {
3804
- --hw-control-font-size: 13px;
3805
- --hw-text-input-bg: rgba(255, 255, 255, 0.3);
3806
- --hwTextInput-padding: 3px;
3807
- --hw-text-input-position: absolute;
3808
- --hwTextInput-width: 30px;
3809
- flex: 1 1 auto;
3335
+ .saveLayoutPanel-inputText {
3336
+ border: none;
3337
+ color: var(--light-text-primary, #15171B);
3338
+ font-family: Nunito Sans A-Variant, serif;
3339
+ font-feature-settings:
3340
+ "ss02" on,
3341
+ "ss01" on,
3342
+ "salt" on,
3343
+ "liga" off;
3344
+ font-size: 12px;
3345
+ font-weight: 400;
3346
+ line-height: 16px;
3347
+ padding-left: 4px;
3348
+ width: 100%;
3349
+ outline: none;
3810
3350
  }
3811
- .LayoutBox > .layout-top {
3812
- flex: 0 0 40px;
3813
- padding-left: 12px;
3351
+ .saveLayoutPanel-settingsGroup {
3814
3352
  display: flex;
3815
- flex-direction: row;
3816
- align-items: center;
3817
- position: relative;
3353
+ flex-wrap: wrap;
3354
+ align-items: flex-end;
3355
+ gap: 10px;
3356
+ width: 100%;
3357
+ line-height: 16px;
3818
3358
  }
3819
- .LayoutBox > .layout-bottom {
3820
- flex: 0 0 40px;
3821
- position: relative;
3359
+ .saveLayoutPanel-screenshotContainer {
3822
3360
  display: flex;
3823
- flex-direction: row;
3361
+ width: 304px;
3362
+ height: 208px;
3363
+ padding: 11px 15.5px;
3364
+ justify-content: center;
3824
3365
  align-items: center;
3366
+ border: 1px solid #E8E8E8;
3367
+ background: var(--dark-text-primary, #FFF);
3825
3368
  }
3826
- .LayoutBox > .layout-inner > .layout-right,
3827
- .LayoutBox > .layout-inner > .layout-left {
3828
- flex: 0 0 40px;
3369
+ .saveLayoutPanel-screenshot {
3370
+ background: lightgray 50% / cover no-repeat;
3371
+ width: 273px;
3372
+ height: 186px;
3373
+ }
3374
+ .saveLayoutPanel-buttonsContainer {
3829
3375
  display: flex;
3830
- flex-direction: column;
3831
- justify-content: center;
3832
- align-items: center;
3376
+ justify-content: flex-end;
3377
+ align-items: flex-start;
3378
+ align-self: stretch;
3379
+ padding-top: 24px;
3380
+ gap: 8px;
3381
+ }
3382
+ .saveLayoutPanel-cancelButton,
3383
+ .saveLayoutPanel-saveButton {
3384
+ display: flex;
3385
+ height: fit-content;
3386
+ padding: 4px 8px;
3387
+ align-items: flex-start;
3388
+ gap: 8px;
3389
+ border-radius: 6px;
3390
+ font-size: 12px;
3391
+ font-style: normal;
3392
+ font-weight: 700;
3393
+ line-height: 133.333%;
3394
+ letter-spacing: 0.48px;
3395
+ text-transform: uppercase;
3396
+ }
3397
+ .saveLayoutPanel-cancelButton {
3398
+ color: var(--actionable-primary-foreground-default, #606477);
3399
+ background: var(--actionable-primary-background-default, #FFF);
3400
+ }
3401
+ .saveLayoutPanel-saveButton {
3402
+ background: #6D18BD;
3403
+ border-color: #6D18BD;
3404
+ color: white;
3833
3405
  }
3834
- .layout-top,
3835
- .layout-bottom {
3836
- --hw-text-input-margin: 0 0 0 -15px;
3406
+ .saveLayoutPanel-saveButton.saltButton:disabled {
3407
+ background: #6D18BD;
3408
+ border-color: #6D18BD;
3409
+ color: white;
3410
+ opacity: 0.3;
3837
3411
  }
3838
- .layout-top > .layout-input,
3839
- .layout-bottom > .layout-input {
3840
- left: 50%;
3412
+ .saveLayoutPanel-saveButton.saltButton:hover {
3413
+ background: #F37880;
3414
+ border-color: #F37880;
3415
+ color: white;
3841
3416
  }
3842
- .LayoutBox > .layout-inner {
3843
- flex: 1 1 auto;
3844
- display: flex;
3845
- flex-direction: row;
3846
- align-items: stretch;
3417
+
3418
+ /* ../vuu-filters/src/filter-builder-menu/FilterBuilderMenu.css */
3419
+ .vuuFilterBuilderMenu {
3420
+ margin: 0;
3847
3421
  }
3848
- .LayoutBox.layout-margin {
3849
- background-color: var(--margin-color);
3850
- border: dashed 2px black;
3422
+ .vuuFilterBuilderMenu-trigger {
3423
+ display: inline-block;
3424
+ height: 26px;
3425
+ width: 0px;
3851
3426
  }
3852
- .LayoutBox.layout-border {
3853
- background-color: var(--border-color);
3854
- border: solid 2px black;
3427
+ .vuuFilterBuilderMenuList {
3428
+ --vuuList-borderStyle: none;
3855
3429
  }
3856
- .LayoutBox.layout-padding {
3857
- background-color: var(--padding-color);
3858
- border: dashed 2px black;
3430
+ .vuuListItem:has(.vuuMenuButton) {
3431
+ justify-content: center;
3859
3432
  }
3860
- .LayoutBox .layout-content {
3861
- flex: 1 1 auto;
3862
- background-color: var(--content-color);
3863
- border: solid 2px #808080;
3433
+ .vuuMenuButton {
3434
+ background-color: white;
3435
+ border: solid 1px var(--salt-actionable-primary-foreground);
3436
+ border-radius: 6px;
3437
+ color: var(--vuu-color-gray-50);
3438
+ font-size: 9px;
3439
+ padding: 1px 6px;
3864
3440
  }
3865
- .LayoutBox .layout-title {
3866
- color: #161616;
3867
- font-size: 11px;
3868
- left: 4px;
3869
- line-height: 15px;
3441
+
3442
+ /* ../vuu-filters/src/filter-clause/ExpandoCombobox.css */
3443
+ .vuuExpandoCombobox {
3444
+ --expando-combobox-height: var(--vuuExpandoCombobox-height, 24px);
3445
+ --expando-combobox-fontSize: var(--vuuExpandoCombobox-fontSizew, 12px);
3446
+ --saltInput-outline: none;
3447
+ --saltInput-fontSize: var(--expando-combobox-fontSize);
3448
+ --saltInput-height: var(--expando-combobox-height);
3449
+ --saltInput-minWidth: 4px;
3450
+ display: inline-flex;
3451
+ flex-direction: column;
3452
+ height: var(--expando-combobox-height);
3453
+ min-width: 4px;
3454
+ padding: 0;
3455
+ }
3456
+ .vuuExpandoCombobox .saltInput {
3457
+ background-color: transparent;
3870
3458
  position: absolute;
3871
- top: 1px;
3872
3459
  }
3873
-
3874
- /* ../vuu-layout/src/tools/devtools-tree/layout-tree-viewer.css */
3875
- .hwLayoutTreeViewer {
3460
+ .vuuExpandoCombobox .vuuDropdown {
3461
+ height: 100%;
3876
3462
  }
3877
- .hwLayoutTreeNode {
3878
- cursor: default;
3463
+ .vuuExpandoCombobox-Input.saltInput {
3464
+ border: none;
3465
+ left: 0px;
3466
+ margin: 0;
3467
+ min-height: 100%;
3468
+ padding: 0;
3469
+ right: 0px;
3470
+ width: auto;
3879
3471
  }
3880
- .hwLayoutTreeNode:hover {
3881
- background-color: rgba(255, 255, 255, 0.2);
3472
+ .vuuExpandoCombobox .saltInput-input {
3473
+ border: none;
3474
+ box-sizing: content-box;
3475
+ display: block;
3476
+ flex: 1;
3477
+ font: inherit;
3478
+ margin: 0;
3479
+ min-width: 0;
3480
+ outline: none;
3481
+ padding: 0;
3882
3482
  }
3883
- .hwLayoutTreeNode[aria-selected=true] {
3884
- background-color: cornflowerblue;
3885
- color: white;
3483
+ .vuuExpandoCombobox:before {
3484
+ content: attr(data-text);
3485
+ display: block;
3486
+ font-size: var(--expando-combobox-fontSize);
3487
+ height: 0px;
3488
+ overflow: hidden;
3489
+ white-space: pre-wrap;
3886
3490
  }
3887
3491
 
3888
- /* ../vuu-shell/src/login/LoginPanel.css */
3889
- .vuuLoginPanel {
3890
- --saltInput-paddingLeft: 8px;
3891
- --login-width: 856px;
3892
- --login-height: 550px;
3893
- --hwTextInput-border: solid 1px #ccc;
3894
- --hwTextInput-height: 28px;
3895
- --hwTextInput-padding: 0 12px;
3896
- --hwTextInput-width: 100%;
3897
- --login-row-height: 60px;
3898
- border-radius: 16px;
3899
- box-shadow: 0px 24px 44px 0px rgba(0, 0, 0, 0.25);
3492
+ /* ../vuu-filters/src/filter-clause/FilterClauseEditor.css */
3493
+ .vuuFilterClause {
3494
+ --vuuExpandoInput-top: 0;
3495
+ --vuuExpandoInput-height: 16px;
3496
+ --vuuExpandoCombobox-height: 16px;
3497
+ --saltButton-height: 16px;
3498
+ --saltButton-width: 16px;
3900
3499
  display: flex;
3901
- height: var(--login-height);
3902
- margin: 0 auto;
3903
- width: var(--login-width);
3500
+ flex-direction: row;
3501
+ width: fit-content;
3502
+ border-color: var(--vuu-color-gray-45);
3503
+ border-radius: 6px;
3504
+ border-width: 1px;
3505
+ border-style: solid;
3506
+ background: #ffffff;
3507
+ --salt-focused-outlineStyle: dotted;
3904
3508
  }
3905
- .vuuLoginPanel .saltInput-primary {
3906
- --saltInput-height: 36px;
3509
+ .vuuFilterClause:focus-within {
3510
+ border-color: var(--vuu-color-purple-10);
3907
3511
  }
3908
- .vuuLoginPanel-title {
3909
- justify-content: center;
3910
- font-size: 28px;
3911
- font-weight: 400;
3912
- display: flex;
3512
+ .vuu-density-high .vuuFilterClause {
3513
+ padding: 4px 8px;
3514
+ gap: 4px;
3515
+ --salt-text-lineHeight: 12px;
3516
+ --saltInputLegacy-fontSize: 12px;
3517
+ --saltInputLegacy-minWidth: 12px;
3913
3518
  }
3914
- .vuuLoginPanel-branding {
3915
- align-items: center;
3916
- background-color: var(--vuu-color-purple-50);
3917
- border-radius: 16px 0 0 16px;
3918
- display: flex;
3919
- flex: 0 0 368px;
3920
- flex-direction: column;
3921
- gap: 40px;
3922
- justify-content: center;
3923
- padding: 40px 100px;
3519
+ .vuu-density-high .vuuFilterClause .saltInput {
3520
+ padding: 0;
3521
+ min-height: 16px;
3522
+ height: 16px;
3924
3523
  }
3925
- .vuuLoginPanel-form {
3926
- background-color: white;
3927
- border-radius: 0 16px 16px 0px;
3928
- display: flex;
3929
- flex: 1 1 auto;
3930
- flex-direction: column;
3931
- gap: 32px;
3932
- justify-content: center;
3933
- padding: 0 40px;
3524
+ .vuuFilterClause .vuuExpandoCombobox {
3525
+ flex-basis: auto;
3526
+ flex-shrink: 0;
3527
+ flex-grow: 0;
3934
3528
  }
3935
- .vuuLoginPanel-password {
3936
- --vuu-icon-size: 16px;
3529
+ .vuuFilterClauseOperator-hidden {
3530
+ display: none;
3937
3531
  }
3938
- .vuuLoginPanel-appName {
3939
- color: white;
3940
- font-size: 18px;
3941
- font-weight: 700;
3942
- text-transform: uppercase;
3532
+ .vuuFilterClause :not(.vuuFilterClauseNumericValue) .saltInput {
3943
3533
  }
3944
- .vuuLoginPanel-login {
3945
- --saltButton-height: 36px;
3946
- --saltButton-borderRadius: 6px;
3947
- width: 100%;
3534
+ .vuuFilterClause .saltInput-focused,
3535
+ .vuuFilterClause .saltTokenizedInput-focused {
3536
+ outline: none;
3537
+ color: var(--salt-text-primary-foreground);
3948
3538
  }
3949
-
3950
- /* ../vuu-shell/src/app-header/AppHeader.css */
3951
- .vuuAppHeader {
3952
- --saltButton-borderRadius: 6px;
3953
- --saltButton-text-color: var(--vuu-color-gray-50);
3954
- --saltButton-padding: 12px;
3955
- --vuuToolbarItem-height: 26px;
3956
- --vuuOverflowContainer-gap: 8px;
3957
- --vuu-icon-color: var(--vuu-color-gray-45);
3958
- --vuu-icon-size: 16px;
3959
- --vuuToolbar-background: var(--vuuAppHeader-background, var(--vuu-color-gray-28));
3960
- --vuuToolbar-borderWidth: 1px;
3961
- --vuuToolbar-borderStyle: solid;
3962
- --vuuToolbar-borderColor: var(--vuu-color-gray-30);
3963
- align-items: center;
3964
- display: flex;
3965
- justify-content: flex-end;
3539
+ .vuuFilterClause .saltInput-input::selection {
3540
+ color: #ffffff;
3966
3541
  }
3967
- .vuu-theme .vuuAppHeader {
3968
- border-radius: 8px;
3969
- margin-bottom: 8px;
3542
+ .vuu-theme .saltList {
3543
+ --list-borderWidth: 1px;
3544
+ --list-borderStyle: solid;
3545
+ border-radius: 4px;
3546
+ box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.4);
3970
3547
  }
3971
-
3972
- /* ../vuu-shell/src/connection-status/ConnectionStatusIcon.css */
3973
- .vuuStatus-container {
3974
- display: flex;
3548
+ .saltListItem[aria-selected=true]:not(.saltListItem-checkbox) {
3549
+ --list-item-background: var(--list-item-background-active);
3550
+ color: var(--list-item-text-color-active);
3975
3551
  }
3976
- .vuuStatus-text {
3977
- align-self: center;
3552
+ .saltTokenizedInput {
3553
+ height: 16px;
3554
+ min-height: 16px;
3555
+ }
3556
+ .saltTokenizedInput .saltInputPill {
3557
+ --pill-fontSize: 12px;
3558
+ --saltButton-borderStyle: none;
3559
+ --pill-background: none;
3560
+ height: 16px;
3561
+ margin: 0;
3562
+ }
3563
+ .saltTokenizedInput-pillGroup {
3564
+ padding: 0;
3565
+ height: 16px;
3566
+ }
3567
+
3568
+ /* ../vuu-filters/src/filter-pill-menu/FilterPillMenu.css */
3569
+ .vuuFilterPillMenu {
3570
+ top: -1px;
3978
3571
  }
3979
- .vuuStatus {
3980
- --vuu-icon-height: 18px;
3981
- --vuu-icon-padding: var(--vuuStatus-padding, 6px);
3982
- --vuu-icon-width: var(--vuuStatus-width, auto);
3983
- --vuu-icon-min-width: var(--vuuStatus-min-width, 20px);
3572
+
3573
+ /* ../vuu-filters/src/filter-pill/FilterPill.css */
3574
+ .vuuFilterPill {
3984
3575
  align-items: center;
3576
+ background: var(--salt-taggable-background);
3577
+ border: solid 1px var(--salt-taggable-foreground);
3578
+ border-radius: 24px;
3579
+ color: var(--vuu-color-gray-50);
3985
3580
  display: inline-flex;
3986
- height: var(--vuu-icon-height);
3987
- justify-content: center;
3988
- min-width: var(--vuu-icon-min-width);
3989
- padding: 0 var(--vuu-icon-padding);
3990
- width: var(--vuu-icon-width);
3581
+ max-width: var(--vuuFilterPill-maxWidth, 200px);
3582
+ padding: 0 8px;
3991
3583
  position: relative;
3584
+ user-select: none;
3585
+ outline: none;
3992
3586
  }
3993
- .vuuStatus[data-icon]::after {
3994
- inset: 0 0 0 0;
3995
- content: "";
3996
- box-shadow: 0 0 0 0 black;
3997
- position: absolute;
3998
- mask: var(--vuu-icon-svg) center center/20px 20px no-repeat;
3999
- -webkit-mask: var(--vuu-icon-svg) center center/20px 20px no-repeat;
3587
+ .vuuFilterPill.vuuToolbarItem {
3588
+ height: 24px;
4000
3589
  }
4001
- .vuuActiveStatus::after {
4002
- --vuu-icon-svg: var(--svg-active-status);
4003
- background-color: rgb(0, 255, 0);
3590
+ .vuuFilterPill[aria-selected=true] {
3591
+ --vuuPopupMenu-iconColor: white;
3592
+ --salt-text-background-selected: var(--vuu-color-blue-40);
3593
+ --salt-text-color-selected: var(--salt-text-primary-foreground);
3594
+ --saltInput-background-hover: var(--salt-taggable-background-active);
3595
+ --saltInput-color: var(--salt-taggable-foreground-active);
3596
+ background: var(--salt-taggable-background-active);
3597
+ color: white;
4004
3598
  }
4005
- .vuuConnectingStatus::after {
4006
- --vuu-icon-svg: var(--svg-connecting-status);
4007
- background-color: orange;
4008
- transform: scale(1);
4009
- animation: infinite pulse 1s;
3599
+ .vuuFilterPill:not([aria-selected=true]):hover {
3600
+ --vuuPopupMenu-iconColor: var(--vuu-color-gray-80);
3601
+ background-color: var(--salt-taggable-background-hover);
3602
+ border-color: var(--salt-taggable-background-hover);
3603
+ color: var(--vuu-color-gray-80);
4010
3604
  }
4011
- .vuuDisconnectedStatus::after {
4012
- --vuu-icon-svg: var(--svg-disconnected-status);
4013
- background-color: red;
4014
- transform: scale(1);
4015
- animation: infinite pulse 0.5s;
3605
+
3606
+ /* ../vuu-filters/src/filter-bar/FilterBar.css */
3607
+ .vuuFilterBar {
3608
+ --vuu-svg-tune: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 18C3 18.55 3.45 19 4 19H9V17H4C3.45 17 3 17.45 3 18ZM3 6C3 6.55 3.45 7 4 7H13V5H4C3.45 5 3 5.45 3 6ZM13 20V19H20C20.55 19 21 18.55 21 18C21 17.45 20.55 17 20 17H13V16C13 15.45 12.55 15 12 15C11.45 15 11 15.45 11 16V20C11 20.55 11.45 21 12 21C12.55 21 13 20.55 13 20ZM7 10V11H4C3.45 11 3 11.45 3 12C3 12.55 3.45 13 4 13H7V14C7 14.55 7.45 15 8 15C8.55 15 9 14.55 9 14V10C9 9.45 8.55 9 8 9C7.45 9 7 9.45 7 10ZM21 12C21 11.45 20.55 11 20 11H11V13H20C20.55 13 21 12.55 21 12ZM16 9C16.55 9 17 8.55 17 8V7H20C20.55 7 21 6.55 21 6C21 5.45 20.55 5 20 5H17V4C17 3.45 16.55 3 16 3C15.45 3 15 3.45 15 4V8C15 8.55 15.45 9 16 9Z" /></svg>');
3609
+ --vuuToolbar-height: 28px;
3610
+ --salt-container-primary-borderColor: var(--vuu-color-purple-10);
3611
+ --vuuOverflowContainer-minWidth: 0;
3612
+ --saltButton-height: 26px;
3613
+ --saltButton-width: 26px;
3614
+ align-items: center;
3615
+ background-color: var(--salt-container-secondary-background);
3616
+ border-bottom: solid 1px #D6D7DA;
3617
+ display: flex;
3618
+ flex: var(--vuuFilterBar-flex);
3619
+ gap: 4px;
3620
+ height: 33px;
3621
+ padding: 0px 8px;
4016
3622
  }
4017
- @keyframes pulse {
4018
- 0% {
4019
- transform: scale(0.95);
4020
- box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
4021
- }
4022
- 70% {
4023
- transform: scale(1);
4024
- box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
4025
- }
4026
- 100% {
4027
- transform: scale(0.95);
4028
- box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
4029
- }
3623
+ .vuuFilterbar-icon {
3624
+ display: inline-block;
3625
+ height: 16px;
3626
+ width: 16px;
4030
3627
  }
4031
-
4032
- /* ../vuu-shell/src/layout-management/SaveLayoutPanel.css */
4033
- .saveLayoutPanel {
4034
- --salt-selectable-foreground-hover: #6d18bdc3;
4035
- --salt-selectable-foreground-selected: #6D18BD;
4036
- --salt-selectable-borderColor-selected: #6D18BD;
4037
- --saltInputLegacy-fontSize: 12px;
4038
- --salt-text-label-fontSize: 10px;
4039
- --saltFormFieldLegacy-label-paddingLeft: 0;
4040
- --saltFormField-label-fontWeight: 400;
4041
- --saltText-color: var(--text-secondary-foreground, #606477);
3628
+ .vuuFilterBar [data-icon=tune] {
3629
+ --vuu-icon-size: 16px;
3630
+ --vuu-icon-svg: var(--vuu-svg-tune);
4042
3631
  }
4043
- .saveLayoutPanel-panelContainer {
4044
- display: flex;
4045
- flex-direction: column;
4046
- align-items: flex-start;
3632
+ .vuuFilterBar [data-icon=plus] {
3633
+ --vuu-icon-size: 16px;
4047
3634
  }
4048
- .saveLayoutPanel-panelContent {
4049
- display: flex;
4050
- align-items: flex-start;
4051
- gap: 32px;
3635
+ .vuuFilterBar .vuuToolbar {
3636
+ flex: 0 1 auto;
4052
3637
  }
4053
- .saveLayoutPanel-formContainer {
4054
- display: flex;
4055
- width: 217px;
4056
- flex-direction: column;
4057
- align-items: flex-start;
4058
- gap: 16px;
3638
+
3639
+ /* ../vuu-filters/src/filter-input/FilterInput.css */
3640
+ .salt-theme {
3641
+ --vuuFilterEditor-lineHeight: 28px;
4059
3642
  }
4060
- .saveLayoutPanel-formField {
3643
+ .salt-density-high {
3644
+ --vuuFilterEditor-buttonWidth: 20px;
3645
+ --vuuFilterEditor-height: 22px;
3646
+ --vuuFilterEditor-lineHeight: 20px;
3647
+ }
3648
+ .vuuFilterInput {
3649
+ --vuuFilterEditor-background: var(--salt-container-primary-background);
3650
+ --vuuFilterEditor-color: var(--salt-text-primary-foreground);
3651
+ --vuuFilterEditor-fontFamily: var(--salt-typography-fontFamily);
3652
+ --vuuFilterEditor-fontSize: var(--salt-text-fontSize);
3653
+ --vuuFilterEditor-cursorColor: var(--salt-text-secondary-foreground);
3654
+ --vuuFilterEditor-selectionBackground: var(--salt-text-background-selected);
3655
+ --vuuFilterEditor-tooltipBackground: var(--salt-container-primary-background);
3656
+ --vuuFilterEditor-tooltipBorder: var(--tooltip-status-borderColor) var(--salt-container-borderWidth) var(--salt-container-borderStyle);
3657
+ --vuuFilterEditor-tooltipElevation: var(--salt-overlayable-shadow-popout);
3658
+ --vuuFilterEditor-suggestion-selectedBackground: var(--salt-selectable-background-selected);
3659
+ --vuuFilterEditor-suggestion-selectedColor: var(--vuuFilterEditor-color);
3660
+ --vuuFilterEditor-suggestion-height: 24px;
3661
+ --vuuFilterEditor-variableColor: var(--vuu-color_purple-10);
3662
+ align-items: center;
3663
+ border-color: var(--salt-container-secondary-borderColor);
3664
+ border-style: solid none;
3665
+ border-width: 1px;
3666
+ box-sizing: border-box;
4061
3667
  display: flex;
4062
- flex-direction: column;
4063
- gap: 1px;
3668
+ height: var(--vuuFilterEditor-height, 30px);
4064
3669
  }
4065
- .saveLayoutPanel-inputText {
4066
- border: none;
4067
- color: var(--light-text-primary, #15171B);
4068
- font-family: Nunito Sans A-Variant, serif;
4069
- font-feature-settings:
4070
- "ss02" on,
4071
- "ss01" on,
4072
- "salt" on,
4073
- "liga" off;
4074
- font-size: 12px;
4075
- font-weight: 400;
4076
- line-height: 16px;
4077
- padding-left: 4px;
4078
- width: 100%;
4079
- outline: none;
3670
+ .vuuFilterInput-Editor {
3671
+ flex: 1 1 auto;
3672
+ height: 100%;
4080
3673
  }
4081
- .saveLayoutPanel-settingsGroup {
4082
- display: flex;
4083
- flex-wrap: wrap;
4084
- align-items: flex-end;
4085
- gap: 10px;
4086
- width: 100%;
4087
- line-height: 16px;
3674
+ .vuuFilterInput-FilterButton,
3675
+ .vuuFilterInput-ClearButton {
3676
+ --vuu-icon-size: 12px;
3677
+ --saltButton-width: var(--vuuFilterEditor-buttonWidth, 28px);
4088
3678
  }
4089
- .saveLayoutPanel-screenshotContainer {
4090
- display: flex;
4091
- width: 304px;
4092
- height: 208px;
4093
- padding: 11px 15.5px;
4094
- justify-content: center;
4095
- align-items: center;
4096
- border: 1px solid #E8E8E8;
4097
- background: var(--dark-text-primary, #FFF);
3679
+ .vuuIllustration {
3680
+ --vuuFilterEditor-suggestion-selectedBackground:var(--salt-container-secondary-background);
3681
+ background: var(--salt-container-secondary-background);
3682
+ color: var(--salt-text-secondary-foreground);
4098
3683
  }
4099
- .saveLayoutPanel-screenshot {
3684
+
3685
+ /* ../vuu-shell/src/layout-management/LayoutTile.css */
3686
+ .vuuLayoutTile-layoutTile {
4100
3687
  display: flex;
4101
- justify-content: center;
4102
3688
  align-items: center;
4103
- background: lightgray 50% / cover no-repeat;
4104
- width: 273px;
4105
- height: 186px;
4106
- flex-shrink: 0;
4107
- }
4108
- .saveLayoutPanel-buttonsContainer {
4109
- display: flex;
4110
- justify-content: flex-end;
4111
- align-items: flex-start;
4112
- align-self: stretch;
4113
- padding-top: 24px;
4114
3689
  gap: 8px;
3690
+ padding: 8px 0px;
3691
+ flex: 1 1 auto;
3692
+ cursor: pointer;
4115
3693
  }
4116
- .saveLayoutPanel-cancelButton,
4117
- .saveLayoutPanel-saveButton {
4118
- display: flex;
4119
- height: fit-content;
4120
- padding: 4px 8px;
4121
- align-items: flex-start;
4122
- gap: 8px;
4123
- border-radius: 6px;
4124
- font-size: 12px;
4125
- font-style: normal;
4126
- font-weight: 700;
3694
+ .vuuLayoutTile-layoutName {
3695
+ color: var(--light-text-primary, #15171B);
3696
+ font-weight: 600;
4127
3697
  line-height: 133.333%;
4128
- letter-spacing: 0.48px;
4129
- text-transform: uppercase;
4130
- }
4131
- .saveLayoutPanel-cancelButton {
4132
- color: var(--actionable-primary-foreground-default, #606477);
4133
- background: var(--actionable-primary-background-default, #FFF);
4134
- }
4135
- .saveLayoutPanel-saveButton {
4136
- background: #6D18BD;
4137
- border-color: #6D18BD;
4138
- color: white;
3698
+ text-transform: capitalize;
4139
3699
  }
4140
- .saveLayoutPanel-saveButton.saltButton:disabled {
4141
- background: #6D18BD;
4142
- border-color: #6D18BD;
4143
- color: white;
4144
- opacity: 0.3;
3700
+ .vuuLayoutTile-screenshot {
3701
+ width: 60px;
3702
+ height: 45.6px;
3703
+ border: 1px solid #D6D7DA;
4145
3704
  }
4146
- .saveLayoutPanel-saveButton.saltButton:hover {
4147
- background: #F37880;
4148
- border-color: #F37880;
4149
- color: white;
3705
+ .vuuLayoutTile-layoutDetails {
3706
+ color: var(--light-text-secondary, #606477);
3707
+ font-size: 10px;
3708
+ font-weight: 600;
3709
+ line-height: 150%;
4150
3710
  }
4151
3711
 
4152
3712
  /* ../vuu-shell/src/layout-management/LayoutList.css */