@vuu-ui/vuu-layout 0.8.7-debug → 0.8.8-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.
- package/cjs/index.js +3098 -590
- package/cjs/index.js.map +4 -4
- package/esm/index.js +3139 -613
- package/esm/index.js.map +4 -4
- package/index.css +206 -5
- package/index.css.map +3 -3
- package/package.json +5 -5
- package/types/registry/ComponentRegistry.d.ts +0 -1
package/index.css
CHANGED
|
@@ -530,10 +530,10 @@ path.drop-target.centre {
|
|
|
530
530
|
z-index: 2000;
|
|
531
531
|
}
|
|
532
532
|
.vuuDraggable-spacer {
|
|
533
|
-
display: var(--
|
|
534
|
-
height: var(--
|
|
535
|
-
transition: var(--
|
|
536
|
-
width: var(--
|
|
533
|
+
display: var(--vuuDraggable-display, inline-block);
|
|
534
|
+
height: var(--vuuDraggable-spacer-height, var(--tabstrip-height));
|
|
535
|
+
transition: var(--vuuDraggable-transitionProp, width) 0.3s ease;
|
|
536
|
+
width: var(--vuuDraggable-spacer-width, 0);
|
|
537
537
|
}
|
|
538
538
|
.vuuDraggable-dropIndicatorPosition {
|
|
539
539
|
display: var(--saltDraggable-display, inline-block);
|
|
@@ -541,7 +541,7 @@ path.drop-target.centre {
|
|
|
541
541
|
width: 100%;
|
|
542
542
|
}
|
|
543
543
|
.vuuDraggable-dropIndicatorContainer {
|
|
544
|
-
transition: var(--
|
|
544
|
+
transition: var(--vuuDraggable-transitionProp, top) 0.2s ease;
|
|
545
545
|
}
|
|
546
546
|
.vuuDraggable-dropIndicator {
|
|
547
547
|
background-color: var(--salt-palette-accent-background);
|
|
@@ -620,6 +620,206 @@ path.drop-target.centre {
|
|
|
620
620
|
padding: 0;
|
|
621
621
|
}
|
|
622
622
|
|
|
623
|
+
/* ../vuu-ui-controls/src/list/Highlighter.css */
|
|
624
|
+
.saltHighlighter-highlight {
|
|
625
|
+
font-weight: var(--salt-text-fontWeight-strong);
|
|
626
|
+
}
|
|
627
|
+
|
|
628
|
+
/* ../vuu-ui-controls/src/list/CheckboxIcon.css */
|
|
629
|
+
.vuuCheckboxIcon {
|
|
630
|
+
--vuu-icon-size: 14px;
|
|
631
|
+
--vuu-icon-left: -1px;
|
|
632
|
+
--vuu-icon-top: -1px;
|
|
633
|
+
--vuu-icon-svg: var(--vuu-svg-tick);
|
|
634
|
+
border-style: solid;
|
|
635
|
+
border-color: var(--vuuCheckboxIcon-borderColor, var(--salt-selectable-borderColor));
|
|
636
|
+
border-radius: var(--vuuCheckboxIcon-borderRadius, 3px);
|
|
637
|
+
border-width: 1px;
|
|
638
|
+
display: inline-block;
|
|
639
|
+
height: var(--vuuCheckboxIcon-size, 14px);
|
|
640
|
+
position: relative;
|
|
641
|
+
width: var(--vuuCheckboxIcon-size, 14px);
|
|
642
|
+
}
|
|
643
|
+
.vuuCheckboxIcon-checked {
|
|
644
|
+
background-color: var(--vuuCheckboxIcon-background-checked, var(--salt-selectable-background-selected));
|
|
645
|
+
border-color: var(--vuuCheckboxIcon-borderColor-checked, var(--salt-selectable-borderColor-selected));
|
|
646
|
+
}
|
|
647
|
+
.vuuCheckboxIcon-checked:after {
|
|
648
|
+
content: "";
|
|
649
|
+
background-color: white;
|
|
650
|
+
left: var(--vuu-icon-left, auto);
|
|
651
|
+
height: var(--vuu-icon-height, var(--vuu-icon-size, 12px));
|
|
652
|
+
-webkit-mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);
|
|
653
|
+
mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);
|
|
654
|
+
mask-repeat: no-repeat;
|
|
655
|
+
-webkit-mask-repeat: no-repeat;
|
|
656
|
+
position: absolute;
|
|
657
|
+
top: var(--vuu-icon-top, auto);
|
|
658
|
+
width: var(--vuu-icon-width, var(--vuu-icon-size, 12px));
|
|
659
|
+
}
|
|
660
|
+
|
|
661
|
+
/* ../vuu-ui-controls/src/list/ListItem.css */
|
|
662
|
+
.vuuListItem {
|
|
663
|
+
--list-item-text-color: var(--salt-text-primary-foreground);
|
|
664
|
+
--list-item-background: var(--vuuList-item-background, var(--salt-selectable-background));
|
|
665
|
+
--list-item-text-color-active: var(--salt-text-primary-foreground);
|
|
666
|
+
--list-item-background-active: var(--salt-selectable-background-selected);
|
|
667
|
+
--list-item-alignItems: center;
|
|
668
|
+
}
|
|
669
|
+
.vuuListItem.saltHighlighted {
|
|
670
|
+
--saltCheckbox-icon-stroke: var(--salt-selectable-borderColor-hover);
|
|
671
|
+
--list-item-background: var(--salt-selectable-background-hover);
|
|
672
|
+
}
|
|
673
|
+
.vuuListItemHeader {
|
|
674
|
+
font-weight: var(--salt-text-fontWeight-strong);
|
|
675
|
+
}
|
|
676
|
+
.vuuListItemHeader[data-sticky] {
|
|
677
|
+
position: sticky;
|
|
678
|
+
top: 0;
|
|
679
|
+
z-index: 1;
|
|
680
|
+
}
|
|
681
|
+
.vuuListItem {
|
|
682
|
+
color: var(--list-item-text-color);
|
|
683
|
+
cursor: var(--vuuList-item-cursor, pointer);
|
|
684
|
+
background: var(--vuuList-item-background, var(--list-item-background));
|
|
685
|
+
font-size: var(--salt-text-fontSize);
|
|
686
|
+
text-align: var(--salt-text-textAlign);
|
|
687
|
+
line-height: var(--salt-text-lineHeight);
|
|
688
|
+
height: var(--vuuList-item-height, var(--list-item-height, auto));
|
|
689
|
+
margin-bottom: var(--list-item-gap);
|
|
690
|
+
padding: 0 var(--salt-size-unit);
|
|
691
|
+
left: 0;
|
|
692
|
+
right: 0;
|
|
693
|
+
display: flex;
|
|
694
|
+
position: relative;
|
|
695
|
+
align-items: var(--list-item-alignItems);
|
|
696
|
+
white-space: nowrap;
|
|
697
|
+
}
|
|
698
|
+
.vuuListItem:last-child {
|
|
699
|
+
margin-bottom: 0px;
|
|
700
|
+
}
|
|
701
|
+
.vuuListItem-checkbox {
|
|
702
|
+
--list-item-background-active: var(--salt-selectable-background);
|
|
703
|
+
--list-item-text-color-active: var(--salt-text-primary-foreground);
|
|
704
|
+
--list-item-text-padding: 0 0 0 var(--salt-size-unit);
|
|
705
|
+
}
|
|
706
|
+
.vuuListItem[aria-selected=true]:not(.vuuListItem-checkbox) {
|
|
707
|
+
--list-item-background: var(--list-item-background-active);
|
|
708
|
+
color: var(--list-item-text-color-active);
|
|
709
|
+
}
|
|
710
|
+
.vuuListItem.saltDisabled {
|
|
711
|
+
--list-item-text-color: var(--salt-text-primary-foreground-disabled);
|
|
712
|
+
cursor: var(--salt-selectable-cursor-disabled);
|
|
713
|
+
}
|
|
714
|
+
.vuuListItem.vuuFocusVisible {
|
|
715
|
+
outline-style: var(--salt-focused-outlineStyle);
|
|
716
|
+
outline-width: var(--salt-focused-outlineWidth);
|
|
717
|
+
outline-offset: -2px;
|
|
718
|
+
outline-color: var(--salt-focused-outlineColor);
|
|
719
|
+
}
|
|
720
|
+
.vuuListItem.vuuFocusVisible:after {
|
|
721
|
+
content: none;
|
|
722
|
+
}
|
|
723
|
+
.vuuListItem[aria-selected=true]:not(.vuuListItem-checkbox).vuuFocusVisible {
|
|
724
|
+
outline-color: var(--list-item-selected-focus-outlineColor);
|
|
725
|
+
}
|
|
726
|
+
.vuuListItem-textWrapper {
|
|
727
|
+
flex: 1;
|
|
728
|
+
overflow: hidden;
|
|
729
|
+
padding: var(--list-item-text-padding, 0px);
|
|
730
|
+
white-space: nowrap;
|
|
731
|
+
text-overflow: ellipsis;
|
|
732
|
+
}
|
|
733
|
+
.vuuListItem-proxy {
|
|
734
|
+
position: absolute !important;
|
|
735
|
+
visibility: hidden;
|
|
736
|
+
}
|
|
737
|
+
.vuuDraggable-list-item {
|
|
738
|
+
--vuuList-item-height: 24px;
|
|
739
|
+
background-color: white;
|
|
740
|
+
}
|
|
741
|
+
.vuuListItem.vuuDraggable-dragAway {
|
|
742
|
+
display: none;
|
|
743
|
+
}
|
|
744
|
+
|
|
745
|
+
/* ../vuu-ui-controls/src/list/List.css */
|
|
746
|
+
.vuuList {
|
|
747
|
+
--list-background: var(--salt-container-primary-background);
|
|
748
|
+
--list-borderStyle: var(--vuuList-borderStyle,--salt-container-borderStyle);
|
|
749
|
+
--list-borderWidth: var(--salt-size-border);
|
|
750
|
+
--list-height: auto;
|
|
751
|
+
--list-item-height: var(--salt-size-stackable);
|
|
752
|
+
--list-item-gap: 0px;
|
|
753
|
+
--list-maxHeight: 100%;
|
|
754
|
+
--vuuDraggable-display: block;
|
|
755
|
+
--vuuDraggable-spacer-height: 0;
|
|
756
|
+
--vuuDraggable-spacer-width: 100%;
|
|
757
|
+
--vuuDraggable-transitionProp: height;
|
|
758
|
+
background: var(--list-background);
|
|
759
|
+
border-color: var(--salt-container-primary-borderColor);
|
|
760
|
+
border-style: var(--list-borderStyle);
|
|
761
|
+
border-width: var(--list-borderWidth);
|
|
762
|
+
height: var(--saltList-height, var(--list-height));
|
|
763
|
+
max-height: var(--list-maxHeight);
|
|
764
|
+
outline: none;
|
|
765
|
+
overflow-y: auto;
|
|
766
|
+
position: relative;
|
|
767
|
+
user-select: none;
|
|
768
|
+
width: var(--saltList-width, auto);
|
|
769
|
+
}
|
|
770
|
+
.vuuList-borderless {
|
|
771
|
+
--list-borderStyle: none;
|
|
772
|
+
}
|
|
773
|
+
.vuuList-viewport {
|
|
774
|
+
--list-item-height: 30px;
|
|
775
|
+
max-height: calc(var(--list-maxHeight) - 2 * var(--list-borderWidth));
|
|
776
|
+
overflow: auto;
|
|
777
|
+
}
|
|
778
|
+
.vuuListItemHeader {
|
|
779
|
+
--saltList-item-background: var(--list-item-header-background);
|
|
780
|
+
color: var(--list-item-header-color);
|
|
781
|
+
}
|
|
782
|
+
.vuuListItemHeader[data-sticky=true] {
|
|
783
|
+
--saltList-item-background: var(--list-background);
|
|
784
|
+
position: sticky;
|
|
785
|
+
top: 0;
|
|
786
|
+
z-index: 1;
|
|
787
|
+
}
|
|
788
|
+
.vuuList-collapsible .vuuListItemHeader:after {
|
|
789
|
+
border-width: var(--checkbox-borderWidth);
|
|
790
|
+
border-color: var(--checkbox-borderColor);
|
|
791
|
+
content: var(--list-item-header-twisty-content);
|
|
792
|
+
-webkit-mask: var(--list-svg-chevron-down) center center/12px 12px no-repeat;
|
|
793
|
+
mask: var(--list-svg-chevron-down) center center/12px 12px no-repeat;
|
|
794
|
+
background: var(--list-item-header-twisty-color);
|
|
795
|
+
height: 12px;
|
|
796
|
+
left: var(--list-item-header-twisty-left);
|
|
797
|
+
right: var(--list-item-header-twisty-right);
|
|
798
|
+
margin-top: -8px;
|
|
799
|
+
position: absolute;
|
|
800
|
+
top: var(--list-item-header-twisty-top);
|
|
801
|
+
transition: transform 0.3s;
|
|
802
|
+
width: 12px;
|
|
803
|
+
}
|
|
804
|
+
.vuuListItemHeader[aria-expanded=false]:after {
|
|
805
|
+
transform: rotate(-90deg);
|
|
806
|
+
}
|
|
807
|
+
.vuuList-scrollingContentContainer {
|
|
808
|
+
box-sizing: inherit;
|
|
809
|
+
position: relative;
|
|
810
|
+
}
|
|
811
|
+
.vuuList-virtualized .vuuListItem {
|
|
812
|
+
line-height: 30px;
|
|
813
|
+
position: absolute;
|
|
814
|
+
top: 0;
|
|
815
|
+
left: 0;
|
|
816
|
+
right: 0;
|
|
817
|
+
will-change: transform;
|
|
818
|
+
}
|
|
819
|
+
.vuuList.saltFocusVisible:after {
|
|
820
|
+
inset: 2px;
|
|
821
|
+
}
|
|
822
|
+
|
|
623
823
|
/* ../vuu-ui-controls/src/tabstrip/Tabstrip.css */
|
|
624
824
|
.vuuTabstrip {
|
|
625
825
|
--vuuOverflowContainer-background: transparent;
|
|
@@ -708,6 +908,7 @@ path.drop-target.centre {
|
|
|
708
908
|
}
|
|
709
909
|
.vuuDraggable-tabstrip-horizontal {
|
|
710
910
|
--tab-thumb-height: 2px;
|
|
911
|
+
--tab-thumb-left: 0px;
|
|
711
912
|
--tabstrip-height: 28px;
|
|
712
913
|
line-height: var(--tabstrip-height);
|
|
713
914
|
}
|
package/index.css.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../../packages/vuu-layout/src/dock-layout/Drawer.css", "../../../packages/vuu-layout/src/dock-layout/DockLayout.css", "../../../packages/vuu-layout/src/drag-drop/DropMenu.css", "../../../packages/vuu-layout/src/drag-drop/DropTargetRenderer.css", "../../../packages/vuu-layout/src/DraggableLayout.css", "../../../packages/vuu-layout/src/placeholder/Placeholder.css", "../../../packages/vuu-layout/src/flexbox/Splitter.css", "../../../packages/vuu-layout/src/flexbox/Flexbox.css", "../../../packages/vuu-layout/src/flexbox/FluidGrid.css", "../../../packages/vuu-ui-controls/src/drag-drop/Draggable.css", "../../../packages/vuu-ui-controls/src/editable-label/EditableLabel.css", "../../../packages/vuu-ui-controls/src/tabstrip/Tabstrip.css", "../../../packages/vuu-ui-controls/src/tabstrip/TabMenu.css", "../../../packages/vuu-ui-controls/src/tabstrip/Tab.css", "../../../packages/vuu-ui-controls/src/tree/Tree.css", "../../../packages/vuu-layout/src/layout-view/View.css", "../../../packages/vuu-layout/src/layout-header/Header.css", "../../../packages/vuu-layout/src/overflow-container/OverflowContainer.css", "../../../packages/vuu-layout/src/palette/Palette.css", "../../../packages/vuu-layout/src/stack/Stack.css", "../../../packages/vuu-layout/src/tools/devtools-box/layout-configurator.css", "../../../packages/vuu-layout/src/tools/devtools-tree/layout-tree-viewer.css"],
|
|
4
|
-
"sourcesContent": [".vuuDrawer {\n --drawer-leading-edge-border: solid 1px var(--salt-container-primary-borderColor, none);\n --vuu-close-icon-svg: var(--svg-chevron-double-right);\n\n transition: flex-basis;\n transition-duration: var(--drawer-transition-duration);\n position: relative;\n z-index: 1;\n flex-basis: 0;\n flex-grow: 1;\n flex-shrink: 1;\n min-width: 0;\n min-height: 0;\n display: flex;\n}\n\n.vuuDrawer-peekaboo {\n flex-basis: var(--drawer-peek-size);\n flex-grow: 0;\n flex-shrink: 0;\n}\n\n.vuuDrawer-inline.vuuDrawer-open {\n flex-basis: var(--drawer-size);\n flex-grow: 0;\n flex-shrink: 0;\n}\n\n.vuuDrawer-liner {\n background-color: var(--drawer-bg);\n overflow: hidden;\n position: relative;\n}\n\n.vuuDrawer-content {\n height: 100%;\n overflow: hidden;\n position: absolute;\n top: 0;\n right: var(--drawer-peek-size);\n transition: right;\n transition-duration: var(--drawer-transition-duration);\n width: 100%;\n flex: 1 1 100%;\n}\n\n.vuuDrawer-open .vuuDrawer-content {\n right: 0;\n}\n\n/* .vuuDrawer:not(.vuuDrawer-open) .vuuDrawer-liner > * {\n display: none;\n} */\n\n.vuuDrawer-left {\n border-right: var(--drawer-leading-edge-border);\n}\n.vuuDrawer-right {\n border-left: var(--drawer-leading-edge-border);\n}\n.vuuDrawer-top {\n border-bottom: var(--drawer-leading-edge-border);\n}\n.vuuDrawer-bottom {\n border-top: var(--drawer-leading-edge-border);\n}\n\n.vuuDrawer-left .vuuDrawer-liner,\n.vuuDrawer-right .vuuDrawer-liner {\n height: 100%;\n transition: width;\n}\n\n.vuuDrawer-top .vuuDrawer-liner,\n.vuuDrawer-bottom .vuuDrawer-liner {\n width: 100%;\n transition: height;\n}\n\n.vuuDrawer-inline .vuuDrawer-liner {\n width: 100%;\n height: 100%;\n}\n\n.vuuDrawer-over .vuuDrawer-liner {\n position: absolute;\n transition-duration: 0.4s;\n}\n\n.vuuDrawer-over.vuuDrawer-left .vuuDrawer-liner {\n top: 0;\n left: 0;\n width: 0;\n}\n\n.vuuDrawer-over.vuuDrawer-right .vuuDrawer-liner {\n top: 0;\n right: 0;\n width: 0;\n}\n\n.vuuDrawer-over.vuuDrawer-top .vuuDrawer-liner {\n height: 0;\n top: 0;\n left: 0;\n}\n\n.vuuDrawer-over.vuuDrawer-bottom .vuuDrawer-liner {\n bottom: 0;\n height: 0;\n left: 0;\n}\n\n.vuuDrawer-left.vuuDrawer-over.vuuDrawer-peekaboo .vuuDrawer-liner,\n.vuuDrawer-right.vuuDrawer-over.vuuDrawer-peekaboo .vuuDrawer-liner {\n width: var(--drawer-peek-size);\n}\n\n.vuuDrawer-top.vuuDrawer-over.vuuDrawer-peekaboo .vuuDrawer-liner,\n.vuuDrawer-bottom.vuuDrawer-over.vuuDrawer-peekaboo .vuuDrawer-liner {\n height: var(--drawer-peek-size);\n}\n\n.vuuDrawer-left.vuuDrawer-over.vuuDrawer-open .vuuDrawer-liner,\n.vuuDrawer-right.vuuDrawer-over.vuuDrawer-open .vuuDrawer-liner {\n width: var(--drawer-size);\n}\n\n.vuuDrawer-top.vuuDrawer-over.vuuDrawer-open .vuuDrawer-liner,\n.vuuDrawer-bottom.vuuDrawer-over.vuuDrawer-open .vuuDrawer-liner {\n height: var(--drawer-size);\n}\n\n.vuuDrawer-top,\n.vuuDrawer-left {\n order: 0;\n}\n\n.vuuDrawer-bottom,\n.vuuDrawer-right {\n order: 99;\n}\n\n.vuuDrawer-left,\n.vuuDrawer-right {\n flex-direction: column;\n}\n\n.vuuToggleButton-container {\n --saltButton-height: 28px;\n --saltButton-width: 28px;\n --vuu-icon-size: 12px;\n flex: 0 0 28px;\n}\n\n.vuuDrawer-open {\n --vuu-close-icon-svg: var(--svg-chevron-double-left);\n\n}\n", ".vuuDockLayout {\n --chest-bg: var(--hw-chest-bg, inherit);\n --drawer-bg: var(--hw-drawer-bg, inherit);\n --drawer-size: var(--hw-drawer-size, 200px);\n --drawer-peek-size: var(--hw-drawer-peek-size, 32px);\n --drawer-transition-duration: var(--hw-drawer-transition-duration, 0.4s);\n background-color: var(--chest-bg);\n display: flex;\n}\n\n.vuuDockLayout-horizontal {\n flex-direction: row;\n}\n\n.vuuDockLayout-vertical {\n flex-direction: column;\n}\n\n.vuuDockLayout-content {\n background-color: var(--chest-bg);\n flex-grow: 1;\n flex-shrink: 1;\n overflow: hidden;\n /* position: relative; */\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.vuuDockLayout-horizontal .vuuDockLayout-content {\n flex-basis: 100%;\n}\n\n.vuuDockLayout-vertical .vuuDockLayout-content {\n flex-basis: 100%;\n}\n", ".vuuDropMenu {\n margin-left: -50%;\n margin-bottom: -50%;\n background-color: white;\n border: solid 1px var(--grey40);\n display: inline-flex;\n justify-content: center;\n align-items: center;\n padding: 3px;\n border-radius: 3px;\n}\n\n.vuuDropMenu-left,\n.vuuDropMenu-right {\n flex-direction: column;\n}\n\n.vuuDropMenu-bottom {\n transform: translate(0, -30px);\n}\n\n.vuuDropMenu-right {\n transform: translate(-20px, 0);\n}\n\n.vuuDropMenu-item {\n --vuu-icon-size: 20px;\n width: 32px;\n height: 32px;\n background-color: var(--grey20);\n border-bottom: solid 1px var(--grey40);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.vuuDropMenu-item .Icon {\n transform: scale(1.25);\n transform-origin: center center;\n}\n\n.vuuDropMenu-left .vuuDropMenu-item .hwIcon {\n transform: scale(1.25) rotate(180deg);\n transform-origin: center center;\n}\n\n.vuuDropMenu-top .vuuDropMenu-item .hwIcon {\n transform: scale(1.25) rotate(270deg);\n transform-origin: center center;\n}\n\n.vuuDropMenu-bottom .vuuDropMenu-item .hwIcon {\n transform: scale(1.25) rotate(90deg);\n transform-origin: center center;\n}\n\n.vuuDropMenu-item .hwIcon-path {\n fill: grey;\n}\n.vuuDropMenu-item:hover {\n background-color: rgba(200, 200, 200, 0.5);\n}\n\n.vuuDropMenu-item:hover .hwIcon-path-2 {\n fill: blue;\n}\n\n.vuuDropMenu-item:last-child {\n border-bottom: none;\n}\n", "#hw-drag-canvas {\n visibility: hidden;\n z-index: 1;\n position: absolute;\n top: 0px;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: transparent;\n}\n\n#hw-drag-canvas > svg {\n position: absolute;\n}\n\n.drawing #hw-drag-canvas {\n visibility: visible;\n}\n\npath.drop-target {\n stroke: blue;\n stroke-width: 4px;\n fill: transparent;\n}\n\npath.drop-target.centre {\n stroke: red;\n}\n\n#vuu-drop-outline {\n fill: rgba(0,0,255,.3);\n stroke: none;\n stroke-dasharray: 4 2;\n}\n\n#hw-drop-guides {\n fill: none;\n stroke: rgba(0, 0, 0, 0.3);\n stroke-dasharray: 2 3;\n}\n", ".DraggableLayout {\n display: inline-block;\n outline: none;\n}\n\n[data-dragging='true'] {\n position: absolute !important;\n z-index: 100;\n}\n\n.vuuSimpleDraggableWrapper {\n background-color: white;\n box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.2);\n}\n.vuuSimpleDraggableWrapper > * {\n height: 100%;\n width: 100%;\n}\n", ".vuuPlaceholder {\n flex-basis: 0;\n flex-grow: 1;\n flex-shrink: 1;\n}\n\n.vuuPlaceholder-shim {\n flex-grow: 0;\n flex-shrink: 0;\n}\n", ".Splitter {\n --splitter-size: 3px;\n --splitter-border-width: 4px;\n --splitter-border-style: none;\n --splitter-border-color: white;\n\n align-items: center;\n background-color: var(--salt-palette-neutral-secondary-separator);\n border-color: var(--splitter-border-color);\n border-style: var(--splitter-border-style);\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n position: relative;\n outline: none;\n z-index: 1;\n}\n\n.Splitter:hover {\n background-color: var(--salt-palette-neutral-primary-separator);\n}\n.active.Splitter {\n background-color: var(--salt-palette-interact-outline);\n}\n\n.Splitter.column {\n cursor: ns-resize;\n height: var(--splitter-size);\n border-width: var(--splitter-border-width) 0;\n}\n\n.Splitter:not(.column) {\n cursor: ew-resize;\n width: var(--splitter-size);\n border-width: 0 var(--splitter-border-width);\n}\n\n.Splitter:before {\n border: none;\n border-radius: 0;\n content: '';\n display: block;\n padding: 0;\n}\n\n.Splitter .grab-zone {\n position: absolute;\n background-color: rgba(255, 0, 0, 0.01);\n cursor: inherit;\n}\n\n.Splitter.column .grab-zone {\n left: 0;\n right: 0;\n top: -5px;\n bottom: -5px;\n}\n\n.Splitter:not(.column) .grab-zone {\n left: -5px;\n right: -5px;\n top: 0;\n bottom: 0;\n}\n\n.active.Splitter:not(.column) .grab-zone {\n background-color: rgba(255,255,255,.05);\n left: -150px;\n right: -150px;\n}\n\n\n.Splitter:not(.column):before {\n width: 1px;\n height: 10px;\n background: linear-gradient(\n to bottom,\n var(--grey900) 10%,\n transparent 10%,\n transparent 30%,\n var(--grey900) 30%,\n var(--grey900) 40%,\n transparent 40%,\n transparent 60%,\n var(--grey900) 60%,\n var(--grey900) 70%,\n transparent 70%,\n transparent 90%,\n var(--grey900) 90%\n );\n}\n\n.active.Splitter.column:before {\n background: linear-gradient(\n to right,\n #ffffff 10%,\n transparent 10%,\n transparent 30%,\n #ffffff 30%,\n #ffffff 40%,\n transparent 40%,\n transparent 60%,\n #ffffff 60%,\n #ffffff 70%,\n transparent 70%,\n transparent 90%,\n #ffffff 90%\n );\n}\n\n.active.Splitter:not(.column):before {\n background: linear-gradient(\n to bottom,\n #ffffff 10%,\n transparent 10%,\n transparent 30%,\n #ffffff 30%,\n #ffffff 40%,\n transparent 40%,\n transparent 60%,\n #ffffff 60%,\n #ffffff 70%,\n transparent 70%,\n transparent 90%,\n #ffffff 90%\n );\n}\n\n.Splitter.column:before {\n width: 10px;\n height: 1px;\n background: linear-gradient(\n to right,\n var(--grey900) 10%,\n transparent 10%,\n transparent 30%,\n var(--grey900) 30%,\n var(--grey900) 40%,\n transparent 40%,\n transparent 60%,\n var(--grey900) 60%,\n var(--grey900) 70%,\n transparent 70%,\n transparent 90%,\n var(--grey900) 90%\n );\n}\n", ":root {\n --hw-space-unit: 4px;\n --hw-flex-gap: 3;\n --hw-fluid-grid-col-bg: rgba(200, 200, 200, 0.3);\n}\n\n.hwFlexbox {\n background-color: var(--container1-background);\n box-sizing: border-box;\n display: flex;\n gap: calc(var(--spacing) * var(--space));\n min-height: 0;\n min-width: 0;\n overflow: hidden;\n}\n\n.hwFlexbox-column {\n flex-direction: column;\n}\n\n.hwFlexbox-row {\n flex-direction: row;\n}\n\n.hwFlexbox > .Splitter {\n flex-basis: auto;\n flex-grow: 0;\n flex-shrink: 0;\n}\n\n.hwFlexbox.full-page {\n height: 100vh;\n width: 100vw;\n}\n\n.flex-fill {\n border-color: red;\n flex: 0;\n flex-grow: 1;\n flex-shrink: 1;\n}\n\n.vuuView.flex-fill {\n border-color: red;\n}\n", ":root {\n --hw-space-unit: 4px;\n --hw-fluid-grid-col-bg: rgba(252, 209, 232, 0.7);\n}\n\n.hwFluidGrid {\n --gap: var(--gutter-width);\n\n display: flex;\n gap: calc(var(--grid-gap) * var(--hw-space-unit));\n flex-wrap: wrap;\n padding: 0;\n}\n\n.hwFluidGrid > * {\n --gutter-width: calc(var(--hw-flex-gap) * var(--hw-space-unit));\n --gutter-count: calc(var(--parent-col-count) - 1);\n --total-gutter-width: calc(var(--gutter-count) * var(--gutter-width));\n --available-width: calc(100% - var(--total-gutter-width));\n\n flex-basis: 0;\n flex-grow: 1;\n flex-shrink: 1;\n position: relative;\n}\n\n.hwFluidGrid > *:after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: dashed 2px blue;\n}\n\n.hwFluidGrid > [data-xs] {\n --internal-gutter-count: calc(var(--col-span) - 1);\n --percent-width: calc(var(--col-span) / var(--parent-col-count));\n --internal-gutter-width: calc(var(--internal-gutter-count) * var(--gutter-width));\n flex-basis: calc(var(--available-width) * var(--percent-width) + var(--internal-gutter-width));\n flex-grow: 0;\n}\n\n.hwFluidGrid > [data-xs='1'] {\n --col-span: 1;\n}\n.hwFluidGrid > [data-xs='2'] {\n --col-span: 2;\n}\n.hwFluidGrid > [data-xs='3'] {\n --col-span: 3;\n}\n\n.hwFluidGrid > [data-xs='4'] {\n --col-span: 4;\n}\n\n.hwFluidGrid > [data-xs='6'] {\n --col-span: 6;\n}\n\n.hwFluidGrid > [data-xs='8'] {\n --col-span: 8;\n}\n\n.hwFluidGrid > [data-xs='9'] {\n --col-span: 9;\n}\n.hwFluidGrid > [data-xs='10'] {\n --col-span: 10;\n}\n.hwFluidGrid > [data-xs='11'] {\n --col-span: 11;\n}\n\n.hwFluidGrid > [data-xs='12'] {\n --col-span: 12;\n}\n\n@media (min-width: 600px) {\n .hwFluidGrid > [data-sm='1'] {\n --col-span: 1;\n }\n .hwFluidGrid > [data-sm='2'] {\n --col-span: 2;\n }\n\n .hwFluidGrid > [data-sm='3'] {\n --col-span: 3;\n }\n\n .hwFluidGrid > [data-sm='4'] {\n --col-span: 4;\n }\n\n .hwFluidGrid > [data-sm='6'] {\n --col-span: 6;\n }\n\n .hwFluidGrid > [data-sm='8'] {\n --col-span: 8;\n }\n .hwFluidGrid > [data-sm='9'] {\n --col-span: 9;\n }\n .hwFluidGrid > [data-sm='10'] {\n --col-span: 10;\n }\n .hwFluidGrid > [data-sm='11'] {\n --col-span: 11;\n }\n .hwFluidGrid > [data-sm='12'] {\n --col-span: 12;\n }\n}\n\n/* Display the grid background */\n\n.hwFluidGrid-show-grid {\n --gutter-width: calc(var(--hw-flex-gap) * var(--hw-space-unit));\n --grid-gutter-count: calc(var(--grid-col-count, var(--parent-col-count)) - 1);\n --grid-total-gutter-width: calc(var(--grid-gutter-count) * var(--gutter-width));\n --grid-available-width: calc(100% - var(--grid-total-gutter-width));\n --grid-percent-width: calc(1 / var(--grid-col-count, var(--parent-col-count)));\n --column-width: calc(var(--grid-available-width) * var(--grid-percent-width));\n background: repeating-linear-gradient(\n to right,\n var(--hw-fluid-grid-col-bg) 0,\n var(--hw-fluid-grid-col-bg) var(--column-width),\n white var(--column-width),\n white calc(var(--column-width) + var(--gutter-width))\n );\n}\n", ".vuuDraggable {\n background: transparent;\n box-shadow: var(--salt-overlayable-shadow-drag);\n cursor: var(--salt-draggable-grab-cursor-active);\n position: absolute;\n opacity: .95;\n z-index: 2000;\n}\n\n.vuuDraggable-spacer {\n display: var(--saltDraggable-display, inline-block);\n height: var(--saltDraggable-spacer-height, var(--tabstrip-height));\n transition: var(--saltDraggable-transitionProp, width) 0.3s ease;\n width: var(--saltDraggable-spacer-width, 0);\n}\n\n.vuuDraggable-dropIndicatorPosition {\n display: var(--saltDraggable-display, inline-block);\n /* height: var(--saltDraggable-spacer-height, var(--tabstrip-height)); */\n /* width: var(--saltDraggable-spacer-width, 0); */\n height: 0px;\n width: 100%;\n}\n\n.vuuDraggable-dropIndicatorContainer {\n transition: var(--saltDraggable-transitionProp, top) 0.2s ease;\n}\n\n.vuuDraggable-dropIndicator {\n /* height: var(--saltDraggable-spacer-height, var(--tabstrip-height)); */\n /* width: var(--saltDraggable-spacer-width, 0); */\n background-color: var(--salt-palette-accent-background);\n height: 2px;\n width: 100%;\n}\n\n.vuuDraggable-dropIndicator:before {\n content: '';\n width: 6px;\n height: 6px;\n border-radius: 3px;\n background-color: var(--salt-palette-accent-background);\n position: absolute;\n top: -2px;\n left: -3px;\n}\n\n.vuuDraggable-settling {\n transition-property: left, top;\n transition-duration: .15s;\n transition-timing-function: ease-out;\n}\n\n.vuuDraggable-spacer {\n order: 1;\n}", ".vuuEditableLabel {\n --saltInput-background: transparent;\n --saltInput-minWidth: 14px;\n --saltInput-position: absolute;\n --editableLabel-padding: var(--saltEditableLabel-padding, 6px);\n --editableLabel-height: var(--saltEditableLabel-height, 26px);\n color: inherit;\n cursor: default;\n display: flex;\n flex-direction: column;\n font-size: var(--salt-text-fontSize);\n height: var(--editableLabel-height);\n justify-content: center;\n outline: none;\n padding: 0 var(--editableLabel-padding);\n position: relative;\n z-index: var(--salt-zIndex-default);\n}\n\n.vuuEditableLabel:before {\n content: attr(data-text);\n display: block;\n height: 0px;\n visibility: hidden;\n white-space: pre-wrap;\n}\n\n.vuuEditableLabel .saltInput {\n font-weight: var(--salt-text-fontWeight);\n left: var(--editableLabel-padding, 0);\n padding: 0;\n outline-style: none;\n position: absolute;\n right: var(--editableLabel-padding, 0);\n top: var(--saltEditableLabel-top, 2px);\n width: auto;\n}\n\n.vuuEditableLabel .saltInput-activationIndicator {\n display: none;\n}\n\n.vuuEditableLabel-input {\n background-color: transparent;\n border: none;\n box-sizing: content-box;\n display: block;\n flex: 1;\n font: inherit;\n height: 20px;\n margin:0;\n min-width:0;\n outline: none;\n padding: 0;\n}\n", "/* Component class applied to the root element */\n.vuuTabstrip {\n --vuuOverflowContainer-background: transparent;\n /* --tabstrip-height: var(--vuuTabstrip-height, var(--salt-size-stackable)); */\n --tabstrip-dragging-display: none;\n --tabstrip-display: inline-flex;\n --tabstrip-background: transparent;\n\n align-self: var(--saltTabs-tabstrip-alignSelf, stretch);\n font-size: var(--salt-text-fontSize);\n font-weight: var(--vuuTabstrip-fontWeight, var(--salt-text-fontWeight));\n position: relative;\n overflow: visible;\n display: flex;\n min-width: 28px;\n width: var(--tabstrip-width);\n}\n\n/* Tabstrip orientation is horizontal */\n.vuuTabstrip-horizontal {\n --tabstrip-height: var(--vuuTabstrip-height, 28px);\n --tabstrip-width: var(--vuuTabstrip-width, 100%);\n --tab-width: auto;\n --tab-thumb-height: 2px;\n --tab-thumb-left: var(--tab-thumb-offset, 0);\n --tab-thumb-top: auto;\n --tab-thumb-width: var(--tab-thumb-size, 100%);\n align-items: flex-start;\n border-bottom: var(--vuuTabstrip-borderBottom, solid 1px var(--salt-container-primary-borderColor));\n}\n\n/* Tabstrip orientation is vertical */\n.vuuTabstrip-vertical {\n --tabstrip-height: var(--vuuTabstrip-height, 100%);\n --tabstrip-width: var(--vuuTabstrip-width, 100px);\n --tab-width: 100%;\n --tab-thumb-height: var(--tab-thumb-size, 100%);\n --tab-thumb-left: 0;\n --tab-thumb-top: var(--tab-thumb-offset, 0);\n --tab-thumb-width: 2px;\n\n align-self: flex-start;\n display: inline-flex;\n}\n\n.vuuTabstrip-draggingTab .vuuTab {\n pointer-events: none;\n}\n\n.vuuTabstrip-addTabButton {\n --saltButton-height: 20px;\n --saltButton-width: 20px;\n}\n\n.vuuTabstrip-overflowMenu.saltDropdown {\n --saltIcon-margin: 2px 0 0 0px;\n}\n\n.vuuTabstrip-overflowMenu-open {\n --saltButton-background: var(--salt-actionable-secondary-background-active);\n --saltButton-text-color: var(--salt-actionable-secondary-text-color-active);\n}\n\n.vuuTabstrip-overflowMenu-open .saltButton {\n --saltIcon-color: var(--salt-actionable-secondary-foreground-active);\n}\n\n.vuuTabstrip-inner {\n width: 100%;\n align-items: center;\n display: flex;\n flex-basis: auto;\n flex-grow: 0;\n flex-shrink: 1;\n flex-wrap: wrap;\n justify-content: flex-start;\n line-height: var(--tabstrip-height);\n}\n\n.vuuTabstrip-vertical .vuuTabstrip-inner {\n flex-direction: column;\n height: auto;\n}\n\n.vuuTabstrip-centered .vuuTabstrip-inner {\n justify-content: center;\n}\n\n/* Styling applied to Draggable wrapper when used to drag a Tab */\n.vuuDraggable[class*=\"vuuTabstrip\"] {\n --tabstrip-display: flex;\n --tabstrip-height: 100%;\n --tabstrip-dragging-display: block;\n\n --tabs-tab-background: var(--salt-navigable-primary-background-hover);\n --tabs-tab-before-content: \"\";\n --tabs-tab-before-background: var(--salt-navigable-indicator-hover);\n --tabs-tab-before-height: var(--tab-activationIndicator-thumb-height);\n --tabs-tab-before-inset: var(--tab-activationIndicator-inset);\n --tabs-tab-before-width: var(--tab-activationIndicator-thumb-width);\n --tabs-tab-cursor: var(--salt-draggable-grab-cursor-active);\n --tabs-tab-position: static;\n\n font-size: 12px;\n}\n\n.vuuDraggable-tabstrip-horizontal {\n --tab-thumb-height: 2px;\n --tabstrip-height: 28px;\n\n line-height: var(--tabstrip-height);\n}\n\n\n.vuuDraggable[class*=\"tabstrip\"] .vuuTab[aria-selected=\"true\"]:before {\n --tabs-tab-before-background: var(--salt-navigable-indicator-active);\n}\n\n/* [data-overflowed] {\n order: 99;\n visibility: hidden;\n} */\n\n.vuuTabstrip-overflowMenu-dropTarget:after {\n background: var(--salt-selectable-background-selected);\n content: \"\";\n position: absolute;\n height: 2px;\n left: 0;\n right: 0;\n bottom: 0;\n}\n", ".vuuTabMenu {\n top: -2px;\n}", "/* Class applied to root Tab element */\n.vuuTab {\n --saltEditableLabel-padding: 0;\n --saltEditableLabel-height: var(--tabstrip-height);\n --saltInputLegacy-minWidth: 4em;\n --saltEditableLabel-top: 3px;\n\n --tab-background: var(--vuuTab-background, var(--salt-navigable-primary-background));\n --tab-cursor: pointer;\n --tab-position: relative;\n}\n\n.vuuTab {\n align-items: center;\n align-self: stretch;\n background: var(--tab-background);\n border: none;\n border-radius: var(--vuuTab-borderRadius, 0);\n color: var(--salt-text-primary-foreground);\n cursor: var(--vuuTab-cursor, var(--tab-cursor));\n display: var(--tabstrip-display);\n gap: 8px;\n height: var(--vuuTab-height, var(--tabstrip-height));\n letter-spacing: var(--vuuTab-letterSpacing, var(--tab-letterSpacing, 0));\n min-width: var(--vuuTab-minWidth, 40px);\n outline: none;\n padding: var(--vuuTab-padding, 0 24px);\n position: var(--vuuTab-position, var(--tab-position));\n user-select: none;\n width: var(--tab-width)\n}\n\n/* Overrides characteristic used in saltFocusVisible */\n/* .vuuTab.saltFocusVisible:after {\n inset: 2px 2px 4px 2px;\n} */\n\n.vuuTab {\n margin: 0 var(--tab-spacing) 0 0;\n}\n\n.vuuTab-selected {\n background: var(--vuuTab-background-selected, var(--tab-background));\n color: var(--salt-text-primary-foreground);\n font-weight: var(--salt-navigable-fontWeight-active);\n}\n\n/* main content aria of Tab */\n.vuuTab-main {\n align-items: center;;\n border: none;\n color: inherit;\n cursor: inherit;\n display: flex;\n font-family: inherit;\n font-size: inherit;\n font-weight: inherit;\n height: var(--vuuTabstrip-height, var(--salt-size-stackable));\n outline: none;\n position: relative;\n}\n\n.vuuTab-closeable .vuuTab-main {\n border-right: solid transparent var(--salt-size-unit);\n}\n\n.vuuTab .vuuTab-closeButton {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n/* the close Button on a closeable Tab*/\n.vuuTab-close-icon {\n display: none;\n}\n\n.salt-density-touch .vuuTab-close-icon,\n.salt-density-low .vuuTab-close-icon {\n display: block;\n}\n\n.salt-density-touch .vuuTab-close-icon-small,\n.salt-density-low .vuuTab-close-icon-small {\n display: none;\n}\n\n.vuuTab .vuuTab-text {\n display: inline-block;\n position: relative;\n overflow: hidden;\n text-align: var(--salt-text-textAlign-embedded);\n text-overflow: ellipsis;\n top: var(--vuuTab-top, var(--tab-top, auto));\n white-space: nowrap;\n /* ensure content sits above focus ring */\n z-index: var(--salt-zIndex-default);\n}\n\n.vuuTab .vuuTab-text:before {\n height: 0;\n content: attr(data-text);\n display: block;\n visibility: hidden;\n font-weight: var(--salt-navigable-fontWeight-active);\n}\n\n/* FIXME: these are all focusVisible styles, but with a bespoke inset */\n.vuuTab-editing:after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 2px;\n outline-color: var(--salt-focused-outlineColor);\n outline-style: var(--salt-focused-outlineStyle);\n outline-width: var(--salt-focused-outlineWidth);\n outline-offset: -2px;\n}\n\n.vuuTab.vuuFocusVisible {\n background: var(--vuuTab-hover-background, var(--salt-navigable-primary-background-hover));\n outline-color: var(--vuuTab-focusVisible-color, var(--salt-focused-outlineColor));\n outline-style: dashed;\n outline-width: 1px;\n outline-offset: -1px;\n}\n\n.vuuTab:before {\n content: var(--tab-before-content, none);\n content: \"\";\n background: var(--tab-before-background);\n height: var(--tab-before-height);\n inset: var(--tab-before-inset);\n position: absolute;\n width: var(--tab-before-width);\n z-index: 1;\n}\n\n.vuuTabstrip-draggingTab .vuuTab-selected:before {\n --tab-before-content: \"\";\n --tab-before-background: var(--salt-navigable-indicator-color-active);\n --tab-before-height: var(--tab-thumb-height);\n --tab-before-inset: var(--tab-activationIndicator-inset);\n --tab-before-width: var(--tab-activationIndicator-thumb-width);\n}\n\n/* .vuuDraggable .vuuTab:before,\n.vuuTab:not(.vuuTab-selected).saltFocusVisible:before,\n.vuuTab:hover:not(.vuuTab-selected):before {\n --tab-before-content: \"\";\n --tab-before-background: var(--salt-navigable-indicator-hover);\n --tab-before-height: var(--tab-thumb-height);\n --tab-before-inset: var(--tab-activationIndicator-inset);\n --tab-before-width: var(--tab-activationIndicator-thumb-width);\n} */\n\n.vuuTab-selected:before {\n --tab-before-content: \"\";\n background: var(--salt-navigable-indicator-active);\n height: var(--tab-thumb-height);\n position: absolute;\n left: var(--tab-thumb-left);\n bottom: 0px; \n top: var(--tab-thumb-top, auto);\n transition: var(--tab-thumb-transition, none);\n width: var(--tab-thumb-width, 100%);\n}\n\n.vuuTab:hover:not(.vuuTab-closeHover) {\n background: var(--vuuTab-hover-background, var(--salt-navigable-primary-background-hover));\n}\n\n/* .vuuTabstrip.vuuTabThumb-noTransition .vuuTab-selected:before {\n transition: none; \n} */", ".vuuTree {\n --tree-node-collapse: var(--vuuTree-toggle-collapse, var(--svg-tree-node-collapse));\n --tree-node-expand: var(--vuuTree-toggle-expand, var(--svg-tree-node-expand));\n --tree-toggle-width: 12px;\n --tree-icon-color: var(--vuuTree-icon-color, #4c505b);\n --tree-node-expanded-transform: var(--vuuTree-node-expanded-transform, none);\n --tree-node-indent: 0px;\n\n --list-hilited-bg: var(--hw-list-hilited-bg, rgba(0, 0, 0, 0.1));\n --list-item-height: var(--hw-list-item-height, 30px);\n --list-item-padding: var(--hw-list-item-padding, 0 6px);\n --list-item-header-bg: var(--hw-list-item-header-bg, black);\n --list-item-header-color: var(--hw-list-item-header-color, white);\n --list-item-header-font-weight: bold;\n --list-item-header-twisty-color: black;\n --list-item-header-twisty-content: '';\n --list-item-header-twisty-top: 50%;\n --list-item-header-twisty-left: -18px;\n --list-item-header-twisty-right: auto;\n --list-item-selected-bg: var(--hw-list-selected-bg, #1ea7fd);\n --list-item-selected-color: white;\n --list-item-text-color: var(--hw-gray-800);\n --focus-visible-border-color: var(--hw-focus-visible-border-color, rgb(141, 154, 179));\n\n list-style: none;\n margin: 0;\n padding: 0 1px;\n font-size: var(--vuuTree-font-size, 14px);\n max-height: inherit;\n outline: none;\n overflow-y: auto;\n position: relative;\n user-select: none;\n}\n\n.vuuTree-viewport {\n --list-item-height: 30px;\n box-sizing: border-box;\n max-height: inherit;\n overflow: auto;\n}\n\n.vuuTree-scrollingContentContainer {\n box-sizing: inherit;\n position: relative;\n}\n\n.vuuTree-scrollingContentContainer .vuuTreeNode {\n line-height: 30px;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n will-change: transform;\n}\n\n.vuuTreeNode {\n list-style: none;\n}\n\n/* Leaf node or the div child of a collapsible node */\n.vuuTreeNode:not([aria-expanded]),\n.vuuTreeNode[aria-expanded] > .vuuTreeNode-label {\n --checkbox-border-color: black;\n --checkbox-border-width: 1px;\n --checkbox-tick: black;\n --list-item-padding-left: 6px;\n --svg-toggle: var(--tree-node-collapse);\n\n align-items: center;\n color: var(--list-item-text-color);\n display: flex;\n flex-wrap: nowrap;\n height: var(--list-item-height);\n line-height: var(--list-item-height);\n padding: var(--list-item-padding);\n padding-left: var(--padding-left);\n position: relative;\n cursor: default;\n margin: 0;\n white-space: nowrap;\n}\n\n.vuuTreeNode:not([aria-expanded]) {\n --padding-left: calc(\n var(--list-item-padding-left) + var(--tree-toggle-width) + var(--tree-node-indent)\n );\n}\n\n.vuuTreeNode[aria-expanded] > .vuuTreeNode-label {\n --padding-left: calc(\n var(--list-item-padding-left) + var(--tree-toggle-width) + var(--tree-node-indent)\n );\n}\n\n.vuuTreeNode-icon {\n background-color: var(--tree-icon-color);\n display: inline-block;\n height: 18px;\n margin-right: 6px;\n -webkit-mask: var(--vuu-icon-svg) center center/12px 12px no-repeat;\n mask: var(--vuu-icon-svg) center center/12px 12px no-repeat;\n flex: 0 0 18px;\n}\n\n.vuuTreeNode[aria-expanded] {\n flex-direction: column;\n}\n\n.vuuTreeNode[aria-expanded] {\n flex-direction: column;\n height: auto;\n}\n\n.vuuTreeNode > *[role='group'] {\n padding-left: 0px;\n}\n\n.vuuTreeNode {\n padding-left: calc(var(--padding-left) + var(--tree-node-indent));\n}\n\n.vuuTreeNode[aria-level='2'] {\n --tree-node-indent: 12px;\n}\n.vuuTreeNode[aria-level='3'] {\n --tree-node-indent: 24px;\n}\n.vuuTreeNode[aria-level='4'] {\n --tree-node-indent: 36px;\n}\n\n.vuuTreeNode:not(.focusVisible):not(.hwListItemHeader):not([aria-expanded])[data-highlighted],\n.vuuTreeNode:not(.focusVisible):not(.hwListItemHeader)[aria-expanded][data-highlighted]\n > div:first-child {\n background-color: var(--list-hilited-bg);\n}\n\n.vuuTreeNode-toggle {\n cursor: pointer;\n}\n\n.vuuTreeNode > .vuuTreeNode-toggle {\n display: inline-block;\n height: 100%;\n left: 0;\n position: absolute;\n width: calc(var(--list-item-padding-left) + var(--tree-toggle-width));\n}\n\n.vuuTreeNode[aria-expanded] > .vuuTreeNode-label:after {\n content: var(--list-item-header-twisty-content);\n -webkit-mask: var(--svg-toggle) center center/8px 8px no-repeat;\n mask: var(--svg-toggle) center center/8px 8px no-repeat;\n background-color: var(--list-item-header-twisty-color);\n height: 18px;\n margin-top: -9px;\n left: var(--tree-node-indent);\n position: absolute;\n top: var(--list-item-header-twisty-top);\n transition: transform 0.3s;\n width: 18px;\n}\n\n.vuuTreeNode[aria-selected='true'] {\n --list-item-header-twisty-color: var(--list-item-selected-color);\n}\n\n\n.vuuTreeNode:not(.focusVisible):focus {\n background-color: rgba(0, 0, 0, 0.1);\n}\n\n.vuuTreeNode:not([aria-expanded]).focusVisible:before,\n.vuuTreeNode[aria-expanded].focusVisible > div:first-child:before {\n content: '';\n position: absolute;\n top: 0px;\n left: var(--tree-focus-offset, 0px);\n right: 0;\n bottom: 0px;\n border: dotted var(--focus-visible-border-color) 2px;\n background-color: var(--list-hilited-bg);\n}\n\n\n.vuuTreeNode[aria-expanded='false'] > *:first-child:after {\n --svg-toggle: var(--tree-node-expand);\n}\n\n.vuuTreeNode[aria-expanded='true'] > *:first-child:after {\n transform: var(--tree-node-expanded-transform);\n}\n\n/* Selection */\n\n.vuuTree:not(.checkbox-only) .vuuTreeNode:not([aria-expanded])[aria-selected='true'],\n.vuuTree:not(.checkbox-only) .vuuTreeNode[aria-expanded][aria-selected='true'] > div:first-child {\n --checkbox-border-color: var(--list-item-selected-color);\n --checkbox-tick: var(--list-item-selected-color);\n --focus-visible-border-color: var(--list-item-selected-color);\n background-color: var(--list-item-selected-bg);\n color: var(--list-item-selected-color);\n}\n\n.with-checkbox .vuuTreeNode {\n padding-left: 28px;\n}\n\n.with-checkbox .vuuTreeNode:before {\n border-style: solid;\n border-width: var(--checkbox-border-width);\n border-color: var(--checkbox-border-color);\n content: '';\n height: 12px;\n left: 3px;\n margin-top: -7px;\n position: absolute;\n top: 50%;\n width: 12px;\n}\n", ".vuuView {\n border-color: var(--vuuView-borderColor, var(--salt-container-primary-borderColor));\n border-width: var(--vuuView-borderWidth, 1px);\n border-style: var(--vuuView-borderStyle, none);\n\n display: flex;\n flex-direction: column;\n margin: var(--vuuView-margin, 0px);\n min-height: 50px;\n min-width: 50px;\n outline: none;\n overflow: hidden;\n position: relative;\n}\n\n.vuuView.focus-visible:after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: dotted cornflowerblue 2px;\n}\n\n.vuuView.dragging {\n box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);\n}\n\n.vuuView-main {\n /* height: var(--view-content-height);\n width: var(--view-content-width); */\n display: flex;\n flex-direction: var(--vuuView-flexDirection, column);\n flex-wrap: var(--vuuView-flex-wrap, nowrap);\n flex: 1;\n overflow: hidden;\n position: relative;\n}\n\n.vuuView-main > * {\n flex-basis: auto;\n flex-grow: var(--vuuView-flex-grow, 1);\n flex-shrink: var(--vuuView-flex-shrink, 1);\n}\n\n.vuuView-collapsed .vuuView-main {\n display: none;\n}\n\n.vuuView-collapsed + .Splitter {\n display: none;\n}\n\n.vuuView-collapsed .Toolbar-vertical {\n border-right: solid 1px var(--grey40);\n}\n\n.vuuView-collapsed .Toolbar-vertical .toolbar-title {\n display: none;\n}\n", ".vuuHeader {\n --saltButton-height: 24px;\n --saltButton-width: 24px;\n}\n\n.salt-density-high .vuuHeader {\n--saltToolbarField-marginTop: 0;\n}\n\n", ".vuuOverflowContainer {\n --item-gap : 4px;\n --overflow-direction: row; \n --overflow-width: 0px;\n --overflow-order: 99;\n --border-size: calc((var(--overflow-container-height) - 24px) / 2);\n background-color: var(--vuuOverflowContainer-background, black);\n height: var(--overflow-container-height);\n /* padding: 0 10px; */\n}\n\n.vuuOverflowContainer-horizontal {\n --item-align: center;\n --item-margin: 0 0 0 var(--item-gap);\n}\n.vuuOverflowContainer-vertical {\n --item-align: stretch;\n --item-margin: var(--item-gap) 0 0 0;\n --overflow-direction: column; \n \n}\n\n.vuuOverflowContainer-wrapContainer {\n align-items: var(--item-align);\n display: flex;\n flex-direction: var(--overflow-direction);\n flex-wrap: wrap;\n /* gap: 4px; */\n height: var(--overflow-container-height);\n min-width: 44px;\n overflow: hidden;\n position: relative;\n width: 100%;\n\n}\n\n.vuuOverflowContainer-wrapContainer.overflowed {\n --overflow-order: 2;\n --overflow-left: auto;\n --overflow-position: relative;\n --overflow-width: auto;\n}\n\n.vuuOverflowContainer-item:first-child {\n --item-gap: 0;\n}\n\n.vuuOverflowContainer-item:first-child {\n --item-margin: 0;\n}\n\n.vuuOverflowContainer-item {\n align-items: inherit;\n display: flex;\n order: 1;\n position: relative;\n height: var(--overflow-container-height);\n margin: var(--item-margin);\n}\n\n\n.vuuOverflowContainer-item.wrapped {\n --overflow-item-bg: #ccc;\n order: 3;\n}\n\n.vuuOverflowContainer-item:has(.vuuDraggable-dragAway){\n display: none;\n}\n\n.vuuOverflowContainer-item.vuuDropTarget-settling {\n visibility: hidden;\n}\n\n.vuuOverflowContainer-OverflowIndicator {\n align-items: center;\n background-color: transparent;\n display: flex;\n height: var(--overflow-container-height);\n height: var(--overflow-container-height);\n order: var(--overflow-order);\n overflow: hidden;\n left: var(--overflow-left, 100%);\n position: var(--overflow-position, absolute);\n width: var(--overflow-width);\n\n \n}\n\n\n", ".vuuPalette-horizontal {\n align-items: center;\n display: flex;\n}\n\n.vuuPaletteItem {\n --vuu-icon-color: var(--salt-separable-primary-borderColor);\n --vuu-icon-inset: calc(50% - 12px) auto auto -3px;\n --vuu-icon-height: 24px;\n --vuu-icon-width: 24px;\n --list-item-text-padding: 0 0 0 calc(var(--salt-size-unit) * 3);\n}\n\n.vuuPaletteItem[data-draggable]:after {\n height: 22px;\n width: 6px;\n content: \"\";\n position: absolute;\n\n background-image: \n linear-gradient(45deg, rgb(180, 183, 190) 25%, transparent 25%),\n linear-gradient(-45deg, rgb(180, 183, 190) 25%, transparent 25%),\n linear-gradient(45deg, transparent 75%, rgb(180, 183, 190) 25%),\n linear-gradient(-45deg, transparent 75%, rgb(180, 183, 190) 25%);\n background-size: 4px 4px;\n background-position: 0 0, 2px 0, 2px -2px, 0 2px; \n\n}\n\n.vuuSimpleDraggableWrapper > .vuuPaletteItem {\n --vuu-icon-color: var(--salt-selectable-foreground);\n\n}", ".Tabs {\n display: flex;\n box-sizing: border-box;\n flex-direction: column;\n}\n\n.Tabs-horizontal {\n --vuu-tabs-border-style: none solid none none;\n flex-direction: row;\n}\n\n.Tabs .Toolbar:before {\n left: 0;\n width: 100%;\n bottom: 0;\n height: 1px;\n content: '';\n position: absolute;\n background: var(--grey60);\n}\n\n.vuuTabHeader {\n --saltTabs-activationIndicator-background: transparent;\n --saltToolbarField-marginTop: calc(var(--salt-size-unit) - 1px);\n border-color: var(--salt-container-primary-borderColor);\n border-style: var(--vuu-tabs-border-style, none none solid none);\n border-width: 1px;\n}\n\n.vuuTabHeader + .hwFlexbox,\n.vuuTabHeader + * {\n flex: 1;\n}\n\n.vuuTabHeader + .vuuView > .vuuHeader {\n height: 0;\n overflow: hidden;\n}\n\n.Layout-svg-button {\n --spacing-medium: 5px;\n}\n", "[data-design-mode='true'] .Component {\n filter: grayscale(100%);\n opacity: 0.4;\n}\n\n[data-design-mode='true'] .Component:after {\n color: black;\n content: 'Component';\n height: 12px;\n background-color: yellow;\n}\n\n.LayoutConfigurator {\n --margin-color: #f3cea5;\n --border-color: #fddda0;\n --padding-color: #c6d092;\n --content-color: #8cb6c0;\n display: flex;\n flex-direction: column;\n align-items: stretch;\n background-color: var(--margin-color);\n}\n\n.LayoutConfigurator .layout-outer {\n flex: 1 1 auto;\n display: flex;\n flex-direction: column;\n align-items: stretch;\n}\n\n.LayoutBox {\n --hw-control-font-size: 13px;\n --hw-text-input-bg: rgba(255, 255, 255, 0.3);\n --hwTextInput-padding: 3px;\n --hw-text-input-position: absolute;\n --hwTextInput-width: 30px;\n\n flex: 1 1 auto;\n}\n\n.LayoutBox > .layout-top {\n flex: 0 0 40px;\n padding-left: 12px;\n display: flex;\n flex-direction: row;\n align-items: center;\n position: relative;\n}\n\n.LayoutBox > .layout-bottom {\n flex: 0 0 40px;\n position: relative;\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n\n.LayoutBox > .layout-inner > .layout-right,\n.LayoutBox > .layout-inner > .layout-left {\n flex: 0 0 40px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n\n.layout-top,\n.layout-bottom {\n --hw-text-input-margin: 0 0 0 -15px;\n}\n\n.layout-top > .layout-input,\n.layout-bottom > .layout-input {\n left: 50%;\n}\n\n.LayoutBox > .layout-inner {\n flex: 1 1 auto;\n display: flex;\n flex-direction: row;\n align-items: stretch;\n}\n\n.LayoutBox.layout-margin {\n background-color: var(--margin-color);\n border: dashed 2px black;\n}\n\n.LayoutBox.layout-border {\n background-color: var(--border-color);\n border: solid 2px black;\n}\n\n.LayoutBox.layout-padding {\n background-color: var(--padding-color);\n border: dashed 2px black;\n}\n\n.LayoutBox .layout-content {\n flex: 1 1 auto;\n background-color: var(--content-color);\n border: solid 2px #808080;\n}\n\n.LayoutBox .layout-title {\n color: #161616;\n font-size: 11px;\n left: 4px;\n line-height: 15px;\n position: absolute;\n top: 1px;\n}\n", ".hwLayoutTreeViewer {\n}\n\n.hwLayoutTreeNode {\n cursor: default;\n}\n\n.hwLayoutTreeNode:hover {\n background-color: rgba(255, 255, 255, 0.2);\n}\n\n.hwLayoutTreeNode[aria-selected='true'] {\n background-color: cornflowerblue;\n color: white;\n}\n"],
|
|
5
|
-
"mappings": ";AAAA;AACE;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAOF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAGF;AAAA;AAEE;AACA;AAAA;AAGF;AAAA;AAEE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AAAA;AAEE;AAAA;AAGF;AAAA;AAEE;AAAA;AAGF;AAAA;AAEE;AAAA;AAGF;AAAA;AAEE;AAAA;AAGF;AAAA;AAEE;AAAA;AAGF;AAAA;AAEE;AAAA;AAGF;AAAA;AAEE;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;;;AC5JF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AAEA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;;;;;AClCF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AAAA;AAEE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AAAA;AAEF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;;;ACrEF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;;;ACtCF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAEF;AACE;AACA;AAAA;;;AChBF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;;;ACRF;AACE;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAEF;AACE;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAIF;AACE;AACA;AACA;AAAA;AAiBF;AACE;AAAA;AAiBF;AACE;AAAA;AAiBF;AACE;AACA;AACA;AAAA;;;ACnIF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;;;AC3CF;AACE;AACA;AAAA;AAGF;AACE;AAEA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACE;AAAA;AAEF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAAA;AAMJ;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;;AC9HF;AACE;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AAGA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AAGE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AAAA;;;ACtDF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;;
|
|
3
|
+
"sources": ["../../../packages/vuu-layout/src/dock-layout/Drawer.css", "../../../packages/vuu-layout/src/dock-layout/DockLayout.css", "../../../packages/vuu-layout/src/drag-drop/DropMenu.css", "../../../packages/vuu-layout/src/drag-drop/DropTargetRenderer.css", "../../../packages/vuu-layout/src/DraggableLayout.css", "../../../packages/vuu-layout/src/placeholder/Placeholder.css", "../../../packages/vuu-layout/src/flexbox/Splitter.css", "../../../packages/vuu-layout/src/flexbox/Flexbox.css", "../../../packages/vuu-layout/src/flexbox/FluidGrid.css", "../../../packages/vuu-ui-controls/src/drag-drop/Draggable.css", "../../../packages/vuu-ui-controls/src/editable-label/EditableLabel.css", "../../../packages/vuu-ui-controls/src/list/Highlighter.css", "../../../packages/vuu-ui-controls/src/list/CheckboxIcon.css", "../../../packages/vuu-ui-controls/src/list/ListItem.css", "../../../packages/vuu-ui-controls/src/list/List.css", "../../../packages/vuu-ui-controls/src/tabstrip/Tabstrip.css", "../../../packages/vuu-ui-controls/src/tabstrip/TabMenu.css", "../../../packages/vuu-ui-controls/src/tabstrip/Tab.css", "../../../packages/vuu-ui-controls/src/tree/Tree.css", "../../../packages/vuu-layout/src/layout-view/View.css", "../../../packages/vuu-layout/src/layout-header/Header.css", "../../../packages/vuu-layout/src/overflow-container/OverflowContainer.css", "../../../packages/vuu-layout/src/palette/Palette.css", "../../../packages/vuu-layout/src/stack/Stack.css", "../../../packages/vuu-layout/src/tools/devtools-box/layout-configurator.css", "../../../packages/vuu-layout/src/tools/devtools-tree/layout-tree-viewer.css"],
|
|
4
|
+
"sourcesContent": [".vuuDrawer {\n --drawer-leading-edge-border: solid 1px var(--salt-container-primary-borderColor, none);\n --vuu-close-icon-svg: var(--svg-chevron-double-right);\n\n transition: flex-basis;\n transition-duration: var(--drawer-transition-duration);\n position: relative;\n z-index: 1;\n flex-basis: 0;\n flex-grow: 1;\n flex-shrink: 1;\n min-width: 0;\n min-height: 0;\n display: flex;\n}\n\n.vuuDrawer-peekaboo {\n flex-basis: var(--drawer-peek-size);\n flex-grow: 0;\n flex-shrink: 0;\n}\n\n.vuuDrawer-inline.vuuDrawer-open {\n flex-basis: var(--drawer-size);\n flex-grow: 0;\n flex-shrink: 0;\n}\n\n.vuuDrawer-liner {\n background-color: var(--drawer-bg);\n overflow: hidden;\n position: relative;\n}\n\n.vuuDrawer-content {\n height: 100%;\n overflow: hidden;\n position: absolute;\n top: 0;\n right: var(--drawer-peek-size);\n transition: right;\n transition-duration: var(--drawer-transition-duration);\n width: 100%;\n flex: 1 1 100%;\n}\n\n.vuuDrawer-open .vuuDrawer-content {\n right: 0;\n}\n\n/* .vuuDrawer:not(.vuuDrawer-open) .vuuDrawer-liner > * {\n display: none;\n} */\n\n.vuuDrawer-left {\n border-right: var(--drawer-leading-edge-border);\n}\n.vuuDrawer-right {\n border-left: var(--drawer-leading-edge-border);\n}\n.vuuDrawer-top {\n border-bottom: var(--drawer-leading-edge-border);\n}\n.vuuDrawer-bottom {\n border-top: var(--drawer-leading-edge-border);\n}\n\n.vuuDrawer-left .vuuDrawer-liner,\n.vuuDrawer-right .vuuDrawer-liner {\n height: 100%;\n transition: width;\n}\n\n.vuuDrawer-top .vuuDrawer-liner,\n.vuuDrawer-bottom .vuuDrawer-liner {\n width: 100%;\n transition: height;\n}\n\n.vuuDrawer-inline .vuuDrawer-liner {\n width: 100%;\n height: 100%;\n}\n\n.vuuDrawer-over .vuuDrawer-liner {\n position: absolute;\n transition-duration: 0.4s;\n}\n\n.vuuDrawer-over.vuuDrawer-left .vuuDrawer-liner {\n top: 0;\n left: 0;\n width: 0;\n}\n\n.vuuDrawer-over.vuuDrawer-right .vuuDrawer-liner {\n top: 0;\n right: 0;\n width: 0;\n}\n\n.vuuDrawer-over.vuuDrawer-top .vuuDrawer-liner {\n height: 0;\n top: 0;\n left: 0;\n}\n\n.vuuDrawer-over.vuuDrawer-bottom .vuuDrawer-liner {\n bottom: 0;\n height: 0;\n left: 0;\n}\n\n.vuuDrawer-left.vuuDrawer-over.vuuDrawer-peekaboo .vuuDrawer-liner,\n.vuuDrawer-right.vuuDrawer-over.vuuDrawer-peekaboo .vuuDrawer-liner {\n width: var(--drawer-peek-size);\n}\n\n.vuuDrawer-top.vuuDrawer-over.vuuDrawer-peekaboo .vuuDrawer-liner,\n.vuuDrawer-bottom.vuuDrawer-over.vuuDrawer-peekaboo .vuuDrawer-liner {\n height: var(--drawer-peek-size);\n}\n\n.vuuDrawer-left.vuuDrawer-over.vuuDrawer-open .vuuDrawer-liner,\n.vuuDrawer-right.vuuDrawer-over.vuuDrawer-open .vuuDrawer-liner {\n width: var(--drawer-size);\n}\n\n.vuuDrawer-top.vuuDrawer-over.vuuDrawer-open .vuuDrawer-liner,\n.vuuDrawer-bottom.vuuDrawer-over.vuuDrawer-open .vuuDrawer-liner {\n height: var(--drawer-size);\n}\n\n.vuuDrawer-top,\n.vuuDrawer-left {\n order: 0;\n}\n\n.vuuDrawer-bottom,\n.vuuDrawer-right {\n order: 99;\n}\n\n.vuuDrawer-left,\n.vuuDrawer-right {\n flex-direction: column;\n}\n\n.vuuToggleButton-container {\n --saltButton-height: 28px;\n --saltButton-width: 28px;\n --vuu-icon-size: 12px;\n flex: 0 0 28px;\n}\n\n.vuuDrawer-open {\n --vuu-close-icon-svg: var(--svg-chevron-double-left);\n\n}\n", ".vuuDockLayout {\n --chest-bg: var(--hw-chest-bg, inherit);\n --drawer-bg: var(--hw-drawer-bg, inherit);\n --drawer-size: var(--hw-drawer-size, 200px);\n --drawer-peek-size: var(--hw-drawer-peek-size, 32px);\n --drawer-transition-duration: var(--hw-drawer-transition-duration, 0.4s);\n background-color: var(--chest-bg);\n display: flex;\n}\n\n.vuuDockLayout-horizontal {\n flex-direction: row;\n}\n\n.vuuDockLayout-vertical {\n flex-direction: column;\n}\n\n.vuuDockLayout-content {\n background-color: var(--chest-bg);\n flex-grow: 1;\n flex-shrink: 1;\n overflow: hidden;\n /* position: relative; */\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.vuuDockLayout-horizontal .vuuDockLayout-content {\n flex-basis: 100%;\n}\n\n.vuuDockLayout-vertical .vuuDockLayout-content {\n flex-basis: 100%;\n}\n", ".vuuDropMenu {\n margin-left: -50%;\n margin-bottom: -50%;\n background-color: white;\n border: solid 1px var(--grey40);\n display: inline-flex;\n justify-content: center;\n align-items: center;\n padding: 3px;\n border-radius: 3px;\n}\n\n.vuuDropMenu-left,\n.vuuDropMenu-right {\n flex-direction: column;\n}\n\n.vuuDropMenu-bottom {\n transform: translate(0, -30px);\n}\n\n.vuuDropMenu-right {\n transform: translate(-20px, 0);\n}\n\n.vuuDropMenu-item {\n --vuu-icon-size: 20px;\n width: 32px;\n height: 32px;\n background-color: var(--grey20);\n border-bottom: solid 1px var(--grey40);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.vuuDropMenu-item .Icon {\n transform: scale(1.25);\n transform-origin: center center;\n}\n\n.vuuDropMenu-left .vuuDropMenu-item .hwIcon {\n transform: scale(1.25) rotate(180deg);\n transform-origin: center center;\n}\n\n.vuuDropMenu-top .vuuDropMenu-item .hwIcon {\n transform: scale(1.25) rotate(270deg);\n transform-origin: center center;\n}\n\n.vuuDropMenu-bottom .vuuDropMenu-item .hwIcon {\n transform: scale(1.25) rotate(90deg);\n transform-origin: center center;\n}\n\n.vuuDropMenu-item .hwIcon-path {\n fill: grey;\n}\n.vuuDropMenu-item:hover {\n background-color: rgba(200, 200, 200, 0.5);\n}\n\n.vuuDropMenu-item:hover .hwIcon-path-2 {\n fill: blue;\n}\n\n.vuuDropMenu-item:last-child {\n border-bottom: none;\n}\n", "#hw-drag-canvas {\n visibility: hidden;\n z-index: 1;\n position: absolute;\n top: 0px;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: transparent;\n}\n\n#hw-drag-canvas > svg {\n position: absolute;\n}\n\n.drawing #hw-drag-canvas {\n visibility: visible;\n}\n\npath.drop-target {\n stroke: blue;\n stroke-width: 4px;\n fill: transparent;\n}\n\npath.drop-target.centre {\n stroke: red;\n}\n\n#vuu-drop-outline {\n fill: rgba(0,0,255,.3);\n stroke: none;\n stroke-dasharray: 4 2;\n}\n\n#hw-drop-guides {\n fill: none;\n stroke: rgba(0, 0, 0, 0.3);\n stroke-dasharray: 2 3;\n}\n", ".DraggableLayout {\n display: inline-block;\n outline: none;\n}\n\n[data-dragging='true'] {\n position: absolute !important;\n z-index: 100;\n}\n\n.vuuSimpleDraggableWrapper {\n background-color: white;\n box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.2);\n}\n.vuuSimpleDraggableWrapper > * {\n height: 100%;\n width: 100%;\n}\n", ".vuuPlaceholder {\n flex-basis: 0;\n flex-grow: 1;\n flex-shrink: 1;\n}\n\n.vuuPlaceholder-shim {\n flex-grow: 0;\n flex-shrink: 0;\n}\n", ".Splitter {\n --splitter-size: 3px;\n --splitter-border-width: 4px;\n --splitter-border-style: none;\n --splitter-border-color: white;\n\n align-items: center;\n background-color: var(--salt-palette-neutral-secondary-separator);\n border-color: var(--splitter-border-color);\n border-style: var(--splitter-border-style);\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n position: relative;\n outline: none;\n z-index: 1;\n}\n\n.Splitter:hover {\n background-color: var(--salt-palette-neutral-primary-separator);\n}\n.active.Splitter {\n background-color: var(--salt-palette-interact-outline);\n}\n\n.Splitter.column {\n cursor: ns-resize;\n height: var(--splitter-size);\n border-width: var(--splitter-border-width) 0;\n}\n\n.Splitter:not(.column) {\n cursor: ew-resize;\n width: var(--splitter-size);\n border-width: 0 var(--splitter-border-width);\n}\n\n.Splitter:before {\n border: none;\n border-radius: 0;\n content: '';\n display: block;\n padding: 0;\n}\n\n.Splitter .grab-zone {\n position: absolute;\n background-color: rgba(255, 0, 0, 0.01);\n cursor: inherit;\n}\n\n.Splitter.column .grab-zone {\n left: 0;\n right: 0;\n top: -5px;\n bottom: -5px;\n}\n\n.Splitter:not(.column) .grab-zone {\n left: -5px;\n right: -5px;\n top: 0;\n bottom: 0;\n}\n\n.active.Splitter:not(.column) .grab-zone {\n background-color: rgba(255,255,255,.05);\n left: -150px;\n right: -150px;\n}\n\n\n.Splitter:not(.column):before {\n width: 1px;\n height: 10px;\n background: linear-gradient(\n to bottom,\n var(--grey900) 10%,\n transparent 10%,\n transparent 30%,\n var(--grey900) 30%,\n var(--grey900) 40%,\n transparent 40%,\n transparent 60%,\n var(--grey900) 60%,\n var(--grey900) 70%,\n transparent 70%,\n transparent 90%,\n var(--grey900) 90%\n );\n}\n\n.active.Splitter.column:before {\n background: linear-gradient(\n to right,\n #ffffff 10%,\n transparent 10%,\n transparent 30%,\n #ffffff 30%,\n #ffffff 40%,\n transparent 40%,\n transparent 60%,\n #ffffff 60%,\n #ffffff 70%,\n transparent 70%,\n transparent 90%,\n #ffffff 90%\n );\n}\n\n.active.Splitter:not(.column):before {\n background: linear-gradient(\n to bottom,\n #ffffff 10%,\n transparent 10%,\n transparent 30%,\n #ffffff 30%,\n #ffffff 40%,\n transparent 40%,\n transparent 60%,\n #ffffff 60%,\n #ffffff 70%,\n transparent 70%,\n transparent 90%,\n #ffffff 90%\n );\n}\n\n.Splitter.column:before {\n width: 10px;\n height: 1px;\n background: linear-gradient(\n to right,\n var(--grey900) 10%,\n transparent 10%,\n transparent 30%,\n var(--grey900) 30%,\n var(--grey900) 40%,\n transparent 40%,\n transparent 60%,\n var(--grey900) 60%,\n var(--grey900) 70%,\n transparent 70%,\n transparent 90%,\n var(--grey900) 90%\n );\n}\n", ":root {\n --hw-space-unit: 4px;\n --hw-flex-gap: 3;\n --hw-fluid-grid-col-bg: rgba(200, 200, 200, 0.3);\n}\n\n.hwFlexbox {\n background-color: var(--container1-background);\n box-sizing: border-box;\n display: flex;\n gap: calc(var(--spacing) * var(--space));\n min-height: 0;\n min-width: 0;\n overflow: hidden;\n}\n\n.hwFlexbox-column {\n flex-direction: column;\n}\n\n.hwFlexbox-row {\n flex-direction: row;\n}\n\n.hwFlexbox > .Splitter {\n flex-basis: auto;\n flex-grow: 0;\n flex-shrink: 0;\n}\n\n.hwFlexbox.full-page {\n height: 100vh;\n width: 100vw;\n}\n\n.flex-fill {\n border-color: red;\n flex: 0;\n flex-grow: 1;\n flex-shrink: 1;\n}\n\n.vuuView.flex-fill {\n border-color: red;\n}\n", ":root {\n --hw-space-unit: 4px;\n --hw-fluid-grid-col-bg: rgba(252, 209, 232, 0.7);\n}\n\n.hwFluidGrid {\n --gap: var(--gutter-width);\n\n display: flex;\n gap: calc(var(--grid-gap) * var(--hw-space-unit));\n flex-wrap: wrap;\n padding: 0;\n}\n\n.hwFluidGrid > * {\n --gutter-width: calc(var(--hw-flex-gap) * var(--hw-space-unit));\n --gutter-count: calc(var(--parent-col-count) - 1);\n --total-gutter-width: calc(var(--gutter-count) * var(--gutter-width));\n --available-width: calc(100% - var(--total-gutter-width));\n\n flex-basis: 0;\n flex-grow: 1;\n flex-shrink: 1;\n position: relative;\n}\n\n.hwFluidGrid > *:after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: dashed 2px blue;\n}\n\n.hwFluidGrid > [data-xs] {\n --internal-gutter-count: calc(var(--col-span) - 1);\n --percent-width: calc(var(--col-span) / var(--parent-col-count));\n --internal-gutter-width: calc(var(--internal-gutter-count) * var(--gutter-width));\n flex-basis: calc(var(--available-width) * var(--percent-width) + var(--internal-gutter-width));\n flex-grow: 0;\n}\n\n.hwFluidGrid > [data-xs='1'] {\n --col-span: 1;\n}\n.hwFluidGrid > [data-xs='2'] {\n --col-span: 2;\n}\n.hwFluidGrid > [data-xs='3'] {\n --col-span: 3;\n}\n\n.hwFluidGrid > [data-xs='4'] {\n --col-span: 4;\n}\n\n.hwFluidGrid > [data-xs='6'] {\n --col-span: 6;\n}\n\n.hwFluidGrid > [data-xs='8'] {\n --col-span: 8;\n}\n\n.hwFluidGrid > [data-xs='9'] {\n --col-span: 9;\n}\n.hwFluidGrid > [data-xs='10'] {\n --col-span: 10;\n}\n.hwFluidGrid > [data-xs='11'] {\n --col-span: 11;\n}\n\n.hwFluidGrid > [data-xs='12'] {\n --col-span: 12;\n}\n\n@media (min-width: 600px) {\n .hwFluidGrid > [data-sm='1'] {\n --col-span: 1;\n }\n .hwFluidGrid > [data-sm='2'] {\n --col-span: 2;\n }\n\n .hwFluidGrid > [data-sm='3'] {\n --col-span: 3;\n }\n\n .hwFluidGrid > [data-sm='4'] {\n --col-span: 4;\n }\n\n .hwFluidGrid > [data-sm='6'] {\n --col-span: 6;\n }\n\n .hwFluidGrid > [data-sm='8'] {\n --col-span: 8;\n }\n .hwFluidGrid > [data-sm='9'] {\n --col-span: 9;\n }\n .hwFluidGrid > [data-sm='10'] {\n --col-span: 10;\n }\n .hwFluidGrid > [data-sm='11'] {\n --col-span: 11;\n }\n .hwFluidGrid > [data-sm='12'] {\n --col-span: 12;\n }\n}\n\n/* Display the grid background */\n\n.hwFluidGrid-show-grid {\n --gutter-width: calc(var(--hw-flex-gap) * var(--hw-space-unit));\n --grid-gutter-count: calc(var(--grid-col-count, var(--parent-col-count)) - 1);\n --grid-total-gutter-width: calc(var(--grid-gutter-count) * var(--gutter-width));\n --grid-available-width: calc(100% - var(--grid-total-gutter-width));\n --grid-percent-width: calc(1 / var(--grid-col-count, var(--parent-col-count)));\n --column-width: calc(var(--grid-available-width) * var(--grid-percent-width));\n background: repeating-linear-gradient(\n to right,\n var(--hw-fluid-grid-col-bg) 0,\n var(--hw-fluid-grid-col-bg) var(--column-width),\n white var(--column-width),\n white calc(var(--column-width) + var(--gutter-width))\n );\n}\n", ".vuuDraggable {\n background: transparent;\n box-shadow: var(--salt-overlayable-shadow-drag);\n cursor: var(--salt-draggable-grab-cursor-active);\n position: absolute;\n opacity: .95;\n z-index: 2000;\n}\n\n.vuuDraggable-spacer {\n display: var(--vuuDraggable-display, inline-block);\n height: var(--vuuDraggable-spacer-height, var(--tabstrip-height));\n transition: var(--vuuDraggable-transitionProp, width) 0.3s ease;\n width: var(--vuuDraggable-spacer-width, 0);\n}\n\n.vuuDraggable-dropIndicatorPosition {\n display: var(--saltDraggable-display, inline-block);\n /* height: var(--saltDraggable-spacer-height, var(--tabstrip-height)); */\n /* width: var(--saltDraggable-spacer-width, 0); */\n height: 0px;\n width: 100%;\n}\n\n.vuuDraggable-dropIndicatorContainer {\n transition: var(--vuuDraggable-transitionProp, top) 0.2s ease;\n}\n\n.vuuDraggable-dropIndicator {\n /* height: var(--saltDraggable-spacer-height, var(--tabstrip-height)); */\n /* width: var(--saltDraggable-spacer-width, 0); */\n background-color: var(--salt-palette-accent-background);\n height: 2px;\n width: 100%;\n}\n\n.vuuDraggable-dropIndicator:before {\n content: '';\n width: 6px;\n height: 6px;\n border-radius: 3px;\n background-color: var(--salt-palette-accent-background);\n position: absolute;\n top: -2px;\n left: -3px;\n}\n\n.vuuDraggable-settling {\n transition-property: left, top;\n transition-duration: .15s;\n transition-timing-function: ease-out;\n}\n\n.vuuDraggable-spacer {\n order: 1;\n}", ".vuuEditableLabel {\n --saltInput-background: transparent;\n --saltInput-minWidth: 14px;\n --saltInput-position: absolute;\n --editableLabel-padding: var(--saltEditableLabel-padding, 6px);\n --editableLabel-height: var(--saltEditableLabel-height, 26px);\n color: inherit;\n cursor: default;\n display: flex;\n flex-direction: column;\n font-size: var(--salt-text-fontSize);\n height: var(--editableLabel-height);\n justify-content: center;\n outline: none;\n padding: 0 var(--editableLabel-padding);\n position: relative;\n z-index: var(--salt-zIndex-default);\n}\n\n.vuuEditableLabel:before {\n content: attr(data-text);\n display: block;\n height: 0px;\n visibility: hidden;\n white-space: pre-wrap;\n}\n\n.vuuEditableLabel .saltInput {\n font-weight: var(--salt-text-fontWeight);\n left: var(--editableLabel-padding, 0);\n padding: 0;\n outline-style: none;\n position: absolute;\n right: var(--editableLabel-padding, 0);\n top: var(--saltEditableLabel-top, 2px);\n width: auto;\n}\n\n.vuuEditableLabel .saltInput-activationIndicator {\n display: none;\n}\n\n.vuuEditableLabel-input {\n background-color: transparent;\n border: none;\n box-sizing: content-box;\n display: block;\n flex: 1;\n font: inherit;\n height: 20px;\n margin:0;\n min-width:0;\n outline: none;\n padding: 0;\n}\n", ".saltHighlighter-highlight {\n font-weight: var(--salt-text-fontWeight-strong); /* TODO: Check with design */\n}\n", ".vuuCheckboxIcon {\n --vuu-icon-size: 14px;\n --vuu-icon-left: -1px;\n --vuu-icon-top: -1px;\n --vuu-icon-svg: var(--vuu-svg-tick);\n border-style: solid;\n border-color: var(--vuuCheckboxIcon-borderColor, var(--salt-selectable-borderColor));\n border-radius: var(--vuuCheckboxIcon-borderRadius, 3px);\n border-width: 1px;\n display: inline-block;\n height: var(--vuuCheckboxIcon-size, 14px);\n position: relative;\n width: var(--vuuCheckboxIcon-size, 14px);\n}\n\n.vuuCheckboxIcon-checked {\n background-color: var(--vuuCheckboxIcon-background-checked, var(--salt-selectable-background-selected));\n border-color: var(--vuuCheckboxIcon-borderColor-checked, var(--salt-selectable-borderColor-selected));\n}\n\n.vuuCheckboxIcon-checked:after {\n content: \"\";\n background-color: white;\n left: var(--vuu-icon-left, auto);\n height: var(--vuu-icon-height, var(--vuu-icon-size, 12px));\n -webkit-mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);\n mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);\n mask-repeat: no-repeat;\n -webkit-mask-repeat: no-repeat;\n position: absolute;\n top: var(--vuu-icon-top, auto);\n width: var(--vuu-icon-width, var(--vuu-icon-size, 12px));\n}", ".vuuListItem {\n /* Color */\n --list-item-text-color: var(--salt-text-primary-foreground);\n --list-item-background: var(--vuuList-item-background, var(--salt-selectable-background));\n /* --list-item-selected-focus-outlineColor: var(--salt-color-white); TODO: Check token with design */\n --list-item-text-color-active: var(--salt-text-primary-foreground);\n --list-item-background-active: var(--salt-selectable-background-selected);\n --list-item-alignItems: center;\n}\n\n.vuuListItem.saltHighlighted {\n --saltCheckbox-icon-stroke: var(--salt-selectable-borderColor-hover);\n --list-item-background: var(--salt-selectable-background-hover);\n}\n\n.vuuListItemHeader {\n font-weight: var(--salt-text-fontWeight-strong); /* TODO: Check token with design */\n}\n\n.vuuListItemHeader[data-sticky] {\n position: sticky;\n top: 0;\n z-index: 1;\n}\n\n.vuuListItem {\n color: var(--list-item-text-color);\n cursor: var(--vuuList-item-cursor, pointer);\n background: var(--vuuList-item-background, var(--list-item-background));\n font-size: var(--salt-text-fontSize);\n text-align: var(--salt-text-textAlign);\n line-height: var(--salt-text-lineHeight);\n height: var(--vuuList-item-height, var(--list-item-height, auto));\n /* Replaced border-bottom with margin. In design spec, the height of the items should not include gap */\n margin-bottom: var(--list-item-gap);\n padding: 0 var(--salt-size-unit);\n left: 0;\n right: 0;\n display: flex;\n position: relative;\n align-items: var(--list-item-alignItems);\n white-space: nowrap;\n}\n\n.vuuListItem:last-child {\n margin-bottom: 0px;\n}\n\n.vuuListItem-checkbox {\n --list-item-background-active: var(--salt-selectable-background);\n --list-item-text-color-active: var(--salt-text-primary-foreground);\n --list-item-text-padding: 0 0 0 var(--salt-size-unit);\n}\n\n.vuuListItem[aria-selected=\"true\"]:not(.vuuListItem-checkbox) {\n --list-item-background: var(--list-item-background-active);\n color: var(--list-item-text-color-active);\n}\n\n.vuuListItem.saltDisabled {\n --list-item-text-color: var(--salt-text-primary-foreground-disabled);\n cursor: var(--salt-selectable-cursor-disabled);\n}\n\n.vuuListItem.vuuFocusVisible {\n outline-style: var(--salt-focused-outlineStyle);\n outline-width: var(--salt-focused-outlineWidth);\n outline-offset: -2px;\n outline-color: var(--salt-focused-outlineColor);\n}\n\n.vuuListItem.vuuFocusVisible:after {\n content: none;\n}\n\n.vuuListItem[aria-selected=\"true\"]:not(.vuuListItem-checkbox).vuuFocusVisible {\n outline-color: var(--list-item-selected-focus-outlineColor);\n}\n\n.vuuListItem-textWrapper {\n flex: 1;\n overflow: hidden;\n padding: var(--list-item-text-padding, 0px);\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n\n.vuuListItem-proxy {\n position: absolute !important;\n visibility: hidden;\n}\n.vuuDraggable-list-item {\n --vuuList-item-height: 24px;\n background-color: white;\n}\n\n.vuuListItem.vuuDraggable-dragAway {\n display: none;\n}", ".vuuList {\n --list-background: var(--salt-container-primary-background);\n --list-borderStyle: var(--vuuList-borderStyle,--salt-container-borderStyle);\n --list-borderWidth: var(--salt-size-border);\n --list-height: auto;\n --list-item-height: var(--salt-size-stackable);\n --list-item-gap: 0px;\n --list-maxHeight: 100%;\n --vuuDraggable-display: block;\n --vuuDraggable-spacer-height: 0;\n --vuuDraggable-spacer-width: 100%;\n --vuuDraggable-transitionProp: height;\n\n background: var(--list-background);\n border-color: var(--salt-container-primary-borderColor);\n border-style: var(--list-borderStyle);\n border-width: var(--list-borderWidth);\n height: var(--saltList-height, var(--list-height));\n max-height: var(--list-maxHeight);\n outline: none;\n overflow-y: auto;\n position: relative;\n user-select: none;\n width: var(--saltList-width, auto);\n}\n\n.vuuList-borderless {\n --list-borderStyle: none;\n}\n\n/* virtualised list */\n.vuuList-viewport {\n --list-item-height: 30px;\n max-height: calc(var(--list-maxHeight) - 2 * var(--list-borderWidth));\n overflow: auto;\n}\n\n.vuuListItemHeader {\n --saltList-item-background: var(--list-item-header-background);\n color: var(--list-item-header-color);\n}\n\n.vuuListItemHeader[data-sticky=\"true\"] {\n --saltList-item-background: var(--list-background);\n position: sticky;\n top: 0;\n z-index: 1;\n}\n\n.vuuList-collapsible .vuuListItemHeader:after {\n border-width: var(--checkbox-borderWidth);\n border-color: var(--checkbox-borderColor);\n content: var(--list-item-header-twisty-content);\n -webkit-mask: var(--list-svg-chevron-down) center center/12px 12px no-repeat;\n mask: var(--list-svg-chevron-down) center center/12px 12px no-repeat;\n background: var(--list-item-header-twisty-color);\n height: 12px;\n left: var(--list-item-header-twisty-left);\n right: var(--list-item-header-twisty-right);\n margin-top: -8px;\n position: absolute;\n top: var(--list-item-header-twisty-top);\n transition: transform 0.3s;\n width: 12px;\n}\n.vuuListItemHeader[aria-expanded=\"false\"]:after {\n transform: rotate(-90deg);\n}\n\n/* Selection */\n\n.vuuList-scrollingContentContainer {\n box-sizing: inherit;\n position: relative;\n}\n\n.vuuList-virtualized .vuuListItem {\n line-height: 30px;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n will-change: transform;\n}\n.vuuList.saltFocusVisible:after {\n inset: 2px;\n}\n", "/* Component class applied to the root element */\n.vuuTabstrip {\n --vuuOverflowContainer-background: transparent;\n /* --tabstrip-height: var(--vuuTabstrip-height, var(--salt-size-stackable)); */\n --tabstrip-dragging-display: none;\n --tabstrip-display: inline-flex;\n --tabstrip-background: transparent;\n\n align-self: var(--saltTabs-tabstrip-alignSelf, stretch);\n font-size: var(--salt-text-fontSize);\n font-weight: var(--vuuTabstrip-fontWeight, var(--salt-text-fontWeight));\n position: relative;\n overflow: visible;\n display: flex;\n min-width: 28px;\n width: var(--tabstrip-width);\n}\n\n/* Tabstrip orientation is horizontal */\n.vuuTabstrip-horizontal {\n --tabstrip-height: var(--vuuTabstrip-height, 28px);\n --tabstrip-width: var(--vuuTabstrip-width, 100%);\n --tab-width: auto;\n --tab-thumb-height: 2px;\n --tab-thumb-left: var(--tab-thumb-offset, 0);\n --tab-thumb-top: auto;\n --tab-thumb-width: var(--tab-thumb-size, 100%);\n align-items: flex-start;\n border-bottom: var(--vuuTabstrip-borderBottom, solid 1px var(--salt-container-primary-borderColor));\n}\n\n/* Tabstrip orientation is vertical */\n.vuuTabstrip-vertical {\n --tabstrip-height: var(--vuuTabstrip-height, 100%);\n --tabstrip-width: var(--vuuTabstrip-width, 100px);\n --tab-width: 100%;\n --tab-thumb-height: var(--tab-thumb-size, 100%);\n --tab-thumb-left: 0;\n --tab-thumb-top: var(--tab-thumb-offset, 0);\n --tab-thumb-width: 2px;\n\n align-self: flex-start;\n display: inline-flex;\n}\n\n.vuuTabstrip-draggingTab .vuuTab {\n pointer-events: none;\n}\n\n.vuuTabstrip-addTabButton {\n --saltButton-height: 20px;\n --saltButton-width: 20px;\n}\n\n.vuuTabstrip-overflowMenu.saltDropdown {\n --saltIcon-margin: 2px 0 0 0px;\n}\n\n.vuuTabstrip-overflowMenu-open {\n --saltButton-background: var(--salt-actionable-secondary-background-active);\n --saltButton-text-color: var(--salt-actionable-secondary-text-color-active);\n}\n\n.vuuTabstrip-overflowMenu-open .saltButton {\n --saltIcon-color: var(--salt-actionable-secondary-foreground-active);\n}\n\n.vuuTabstrip-inner {\n width: 100%;\n align-items: center;\n display: flex;\n flex-basis: auto;\n flex-grow: 0;\n flex-shrink: 1;\n flex-wrap: wrap;\n justify-content: flex-start;\n line-height: var(--tabstrip-height);\n}\n\n.vuuTabstrip-vertical .vuuTabstrip-inner {\n flex-direction: column;\n height: auto;\n}\n\n.vuuTabstrip-centered .vuuTabstrip-inner {\n justify-content: center;\n}\n\n/* Styling applied to Draggable wrapper when used to drag a Tab */\n.vuuDraggable[class*=\"vuuTabstrip\"] {\n --tabstrip-display: flex;\n --tabstrip-height: 100%;\n --tabstrip-dragging-display: block;\n\n --tabs-tab-background: var(--salt-navigable-primary-background-hover);\n --tabs-tab-before-content: \"\";\n --tabs-tab-before-background: var(--salt-navigable-indicator-hover);\n --tabs-tab-before-height: var(--tab-activationIndicator-thumb-height);\n --tabs-tab-before-inset: var(--tab-activationIndicator-inset);\n --tabs-tab-before-width: var(--tab-activationIndicator-thumb-width);\n --tabs-tab-cursor: var(--salt-draggable-grab-cursor-active);\n --tabs-tab-position: static;\n\n font-size: 12px;\n}\n\n.vuuDraggable-tabstrip-horizontal {\n --tab-thumb-height: 2px;\n --tab-thumb-left: 0px;\n --tabstrip-height: 28px;\n line-height: var(--tabstrip-height);\n}\n\n\n.vuuDraggable[class*=\"tabstrip\"] .vuuTab[aria-selected=\"true\"]:before {\n --tabs-tab-before-background: var(--salt-navigable-indicator-active);\n}\n\n/* [data-overflowed] {\n order: 99;\n visibility: hidden;\n} */\n\n.vuuTabstrip-overflowMenu-dropTarget:after {\n background: var(--salt-selectable-background-selected);\n content: \"\";\n position: absolute;\n height: 2px;\n left: 0;\n right: 0;\n bottom: 0;\n}\n", ".vuuTabMenu {\n top: -2px;\n}", "/* Class applied to root Tab element */\n.vuuTab {\n --saltEditableLabel-padding: 0;\n --saltEditableLabel-height: var(--tabstrip-height);\n --saltInputLegacy-minWidth: 4em;\n --saltEditableLabel-top: 3px;\n\n --tab-background: var(--vuuTab-background, var(--salt-navigable-primary-background));\n --tab-cursor: pointer;\n --tab-position: relative;\n}\n\n.vuuTab {\n align-items: center;\n align-self: stretch;\n background: var(--tab-background);\n border: none;\n border-radius: var(--vuuTab-borderRadius, 0);\n color: var(--salt-text-primary-foreground);\n cursor: var(--vuuTab-cursor, var(--tab-cursor));\n display: var(--tabstrip-display);\n gap: 8px;\n height: var(--vuuTab-height, var(--tabstrip-height));\n letter-spacing: var(--vuuTab-letterSpacing, var(--tab-letterSpacing, 0));\n min-width: var(--vuuTab-minWidth, 40px);\n outline: none;\n padding: var(--vuuTab-padding, 0 24px);\n position: var(--vuuTab-position, var(--tab-position));\n user-select: none;\n width: var(--tab-width)\n}\n\n/* Overrides characteristic used in saltFocusVisible */\n/* .vuuTab.saltFocusVisible:after {\n inset: 2px 2px 4px 2px;\n} */\n\n.vuuTab {\n margin: 0 var(--tab-spacing) 0 0;\n}\n\n.vuuTab-selected {\n background: var(--vuuTab-background-selected, var(--tab-background));\n color: var(--salt-text-primary-foreground);\n font-weight: var(--salt-navigable-fontWeight-active);\n}\n\n/* main content aria of Tab */\n.vuuTab-main {\n align-items: center;;\n border: none;\n color: inherit;\n cursor: inherit;\n display: flex;\n font-family: inherit;\n font-size: inherit;\n font-weight: inherit;\n height: var(--vuuTabstrip-height, var(--salt-size-stackable));\n outline: none;\n position: relative;\n}\n\n.vuuTab-closeable .vuuTab-main {\n border-right: solid transparent var(--salt-size-unit);\n}\n\n.vuuTab .vuuTab-closeButton {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n/* the close Button on a closeable Tab*/\n.vuuTab-close-icon {\n display: none;\n}\n\n.salt-density-touch .vuuTab-close-icon,\n.salt-density-low .vuuTab-close-icon {\n display: block;\n}\n\n.salt-density-touch .vuuTab-close-icon-small,\n.salt-density-low .vuuTab-close-icon-small {\n display: none;\n}\n\n.vuuTab .vuuTab-text {\n display: inline-block;\n position: relative;\n overflow: hidden;\n text-align: var(--salt-text-textAlign-embedded);\n text-overflow: ellipsis;\n top: var(--vuuTab-top, var(--tab-top, auto));\n white-space: nowrap;\n /* ensure content sits above focus ring */\n z-index: var(--salt-zIndex-default);\n}\n\n.vuuTab .vuuTab-text:before {\n height: 0;\n content: attr(data-text);\n display: block;\n visibility: hidden;\n font-weight: var(--salt-navigable-fontWeight-active);\n}\n\n/* FIXME: these are all focusVisible styles, but with a bespoke inset */\n.vuuTab-editing:after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 2px;\n outline-color: var(--salt-focused-outlineColor);\n outline-style: var(--salt-focused-outlineStyle);\n outline-width: var(--salt-focused-outlineWidth);\n outline-offset: -2px;\n}\n\n.vuuTab.vuuFocusVisible {\n background: var(--vuuTab-hover-background, var(--salt-navigable-primary-background-hover));\n outline-color: var(--vuuTab-focusVisible-color, var(--salt-focused-outlineColor));\n outline-style: dashed;\n outline-width: 1px;\n outline-offset: -1px;\n}\n\n.vuuTab:before {\n content: var(--tab-before-content, none);\n content: \"\";\n background: var(--tab-before-background);\n height: var(--tab-before-height);\n inset: var(--tab-before-inset);\n position: absolute;\n width: var(--tab-before-width);\n z-index: 1;\n}\n\n.vuuTabstrip-draggingTab .vuuTab-selected:before {\n --tab-before-content: \"\";\n --tab-before-background: var(--salt-navigable-indicator-color-active);\n --tab-before-height: var(--tab-thumb-height);\n --tab-before-inset: var(--tab-activationIndicator-inset);\n --tab-before-width: var(--tab-activationIndicator-thumb-width);\n}\n\n/* .vuuDraggable .vuuTab:before,\n.vuuTab:not(.vuuTab-selected).saltFocusVisible:before,\n.vuuTab:hover:not(.vuuTab-selected):before {\n --tab-before-content: \"\";\n --tab-before-background: var(--salt-navigable-indicator-hover);\n --tab-before-height: var(--tab-thumb-height);\n --tab-before-inset: var(--tab-activationIndicator-inset);\n --tab-before-width: var(--tab-activationIndicator-thumb-width);\n} */\n\n.vuuTab-selected:before {\n --tab-before-content: \"\";\n background: var(--salt-navigable-indicator-active);\n height: var(--tab-thumb-height);\n position: absolute;\n left: var(--tab-thumb-left);\n bottom: 0px; \n top: var(--tab-thumb-top, auto);\n transition: var(--tab-thumb-transition, none);\n width: var(--tab-thumb-width, 100%);\n}\n\n.vuuTab:hover:not(.vuuTab-closeHover) {\n background: var(--vuuTab-hover-background, var(--salt-navigable-primary-background-hover));\n}\n\n/* .vuuTabstrip.vuuTabThumb-noTransition .vuuTab-selected:before {\n transition: none; \n} */", ".vuuTree {\n --tree-node-collapse: var(--vuuTree-toggle-collapse, var(--svg-tree-node-collapse));\n --tree-node-expand: var(--vuuTree-toggle-expand, var(--svg-tree-node-expand));\n --tree-toggle-width: 12px;\n --tree-icon-color: var(--vuuTree-icon-color, #4c505b);\n --tree-node-expanded-transform: var(--vuuTree-node-expanded-transform, none);\n --tree-node-indent: 0px;\n\n --list-hilited-bg: var(--hw-list-hilited-bg, rgba(0, 0, 0, 0.1));\n --list-item-height: var(--hw-list-item-height, 30px);\n --list-item-padding: var(--hw-list-item-padding, 0 6px);\n --list-item-header-bg: var(--hw-list-item-header-bg, black);\n --list-item-header-color: var(--hw-list-item-header-color, white);\n --list-item-header-font-weight: bold;\n --list-item-header-twisty-color: black;\n --list-item-header-twisty-content: '';\n --list-item-header-twisty-top: 50%;\n --list-item-header-twisty-left: -18px;\n --list-item-header-twisty-right: auto;\n --list-item-selected-bg: var(--hw-list-selected-bg, #1ea7fd);\n --list-item-selected-color: white;\n --list-item-text-color: var(--hw-gray-800);\n --focus-visible-border-color: var(--hw-focus-visible-border-color, rgb(141, 154, 179));\n\n list-style: none;\n margin: 0;\n padding: 0 1px;\n font-size: var(--vuuTree-font-size, 14px);\n max-height: inherit;\n outline: none;\n overflow-y: auto;\n position: relative;\n user-select: none;\n}\n\n.vuuTree-viewport {\n --list-item-height: 30px;\n box-sizing: border-box;\n max-height: inherit;\n overflow: auto;\n}\n\n.vuuTree-scrollingContentContainer {\n box-sizing: inherit;\n position: relative;\n}\n\n.vuuTree-scrollingContentContainer .vuuTreeNode {\n line-height: 30px;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n will-change: transform;\n}\n\n.vuuTreeNode {\n list-style: none;\n}\n\n/* Leaf node or the div child of a collapsible node */\n.vuuTreeNode:not([aria-expanded]),\n.vuuTreeNode[aria-expanded] > .vuuTreeNode-label {\n --checkbox-border-color: black;\n --checkbox-border-width: 1px;\n --checkbox-tick: black;\n --list-item-padding-left: 6px;\n --svg-toggle: var(--tree-node-collapse);\n\n align-items: center;\n color: var(--list-item-text-color);\n display: flex;\n flex-wrap: nowrap;\n height: var(--list-item-height);\n line-height: var(--list-item-height);\n padding: var(--list-item-padding);\n padding-left: var(--padding-left);\n position: relative;\n cursor: default;\n margin: 0;\n white-space: nowrap;\n}\n\n.vuuTreeNode:not([aria-expanded]) {\n --padding-left: calc(\n var(--list-item-padding-left) + var(--tree-toggle-width) + var(--tree-node-indent)\n );\n}\n\n.vuuTreeNode[aria-expanded] > .vuuTreeNode-label {\n --padding-left: calc(\n var(--list-item-padding-left) + var(--tree-toggle-width) + var(--tree-node-indent)\n );\n}\n\n.vuuTreeNode-icon {\n background-color: var(--tree-icon-color);\n display: inline-block;\n height: 18px;\n margin-right: 6px;\n -webkit-mask: var(--vuu-icon-svg) center center/12px 12px no-repeat;\n mask: var(--vuu-icon-svg) center center/12px 12px no-repeat;\n flex: 0 0 18px;\n}\n\n.vuuTreeNode[aria-expanded] {\n flex-direction: column;\n}\n\n.vuuTreeNode[aria-expanded] {\n flex-direction: column;\n height: auto;\n}\n\n.vuuTreeNode > *[role='group'] {\n padding-left: 0px;\n}\n\n.vuuTreeNode {\n padding-left: calc(var(--padding-left) + var(--tree-node-indent));\n}\n\n.vuuTreeNode[aria-level='2'] {\n --tree-node-indent: 12px;\n}\n.vuuTreeNode[aria-level='3'] {\n --tree-node-indent: 24px;\n}\n.vuuTreeNode[aria-level='4'] {\n --tree-node-indent: 36px;\n}\n\n.vuuTreeNode:not(.focusVisible):not(.hwListItemHeader):not([aria-expanded])[data-highlighted],\n.vuuTreeNode:not(.focusVisible):not(.hwListItemHeader)[aria-expanded][data-highlighted]\n > div:first-child {\n background-color: var(--list-hilited-bg);\n}\n\n.vuuTreeNode-toggle {\n cursor: pointer;\n}\n\n.vuuTreeNode > .vuuTreeNode-toggle {\n display: inline-block;\n height: 100%;\n left: 0;\n position: absolute;\n width: calc(var(--list-item-padding-left) + var(--tree-toggle-width));\n}\n\n.vuuTreeNode[aria-expanded] > .vuuTreeNode-label:after {\n content: var(--list-item-header-twisty-content);\n -webkit-mask: var(--svg-toggle) center center/8px 8px no-repeat;\n mask: var(--svg-toggle) center center/8px 8px no-repeat;\n background-color: var(--list-item-header-twisty-color);\n height: 18px;\n margin-top: -9px;\n left: var(--tree-node-indent);\n position: absolute;\n top: var(--list-item-header-twisty-top);\n transition: transform 0.3s;\n width: 18px;\n}\n\n.vuuTreeNode[aria-selected='true'] {\n --list-item-header-twisty-color: var(--list-item-selected-color);\n}\n\n\n.vuuTreeNode:not(.focusVisible):focus {\n background-color: rgba(0, 0, 0, 0.1);\n}\n\n.vuuTreeNode:not([aria-expanded]).focusVisible:before,\n.vuuTreeNode[aria-expanded].focusVisible > div:first-child:before {\n content: '';\n position: absolute;\n top: 0px;\n left: var(--tree-focus-offset, 0px);\n right: 0;\n bottom: 0px;\n border: dotted var(--focus-visible-border-color) 2px;\n background-color: var(--list-hilited-bg);\n}\n\n\n.vuuTreeNode[aria-expanded='false'] > *:first-child:after {\n --svg-toggle: var(--tree-node-expand);\n}\n\n.vuuTreeNode[aria-expanded='true'] > *:first-child:after {\n transform: var(--tree-node-expanded-transform);\n}\n\n/* Selection */\n\n.vuuTree:not(.checkbox-only) .vuuTreeNode:not([aria-expanded])[aria-selected='true'],\n.vuuTree:not(.checkbox-only) .vuuTreeNode[aria-expanded][aria-selected='true'] > div:first-child {\n --checkbox-border-color: var(--list-item-selected-color);\n --checkbox-tick: var(--list-item-selected-color);\n --focus-visible-border-color: var(--list-item-selected-color);\n background-color: var(--list-item-selected-bg);\n color: var(--list-item-selected-color);\n}\n\n.with-checkbox .vuuTreeNode {\n padding-left: 28px;\n}\n\n.with-checkbox .vuuTreeNode:before {\n border-style: solid;\n border-width: var(--checkbox-border-width);\n border-color: var(--checkbox-border-color);\n content: '';\n height: 12px;\n left: 3px;\n margin-top: -7px;\n position: absolute;\n top: 50%;\n width: 12px;\n}\n", ".vuuView {\n border-color: var(--vuuView-borderColor, var(--salt-container-primary-borderColor));\n border-width: var(--vuuView-borderWidth, 1px);\n border-style: var(--vuuView-borderStyle, none);\n\n display: flex;\n flex-direction: column;\n margin: var(--vuuView-margin, 0px);\n min-height: 50px;\n min-width: 50px;\n outline: none;\n overflow: hidden;\n position: relative;\n}\n\n.vuuView.focus-visible:after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: dotted cornflowerblue 2px;\n}\n\n.vuuView.dragging {\n box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);\n}\n\n.vuuView-main {\n /* height: var(--view-content-height);\n width: var(--view-content-width); */\n display: flex;\n flex-direction: var(--vuuView-flexDirection, column);\n flex-wrap: var(--vuuView-flex-wrap, nowrap);\n flex: 1;\n overflow: hidden;\n position: relative;\n}\n\n.vuuView-main > * {\n flex-basis: auto;\n flex-grow: var(--vuuView-flex-grow, 1);\n flex-shrink: var(--vuuView-flex-shrink, 1);\n}\n\n.vuuView-collapsed .vuuView-main {\n display: none;\n}\n\n.vuuView-collapsed + .Splitter {\n display: none;\n}\n\n.vuuView-collapsed .Toolbar-vertical {\n border-right: solid 1px var(--grey40);\n}\n\n.vuuView-collapsed .Toolbar-vertical .toolbar-title {\n display: none;\n}\n", ".vuuHeader {\n --saltButton-height: 24px;\n --saltButton-width: 24px;\n}\n\n.salt-density-high .vuuHeader {\n--saltToolbarField-marginTop: 0;\n}\n\n", ".vuuOverflowContainer {\n --item-gap : 4px;\n --overflow-direction: row; \n --overflow-width: 0px;\n --overflow-order: 99;\n --border-size: calc((var(--overflow-container-height) - 24px) / 2);\n background-color: var(--vuuOverflowContainer-background, black);\n height: var(--overflow-container-height);\n /* padding: 0 10px; */\n}\n\n.vuuOverflowContainer-horizontal {\n --item-align: center;\n --item-margin: 0 0 0 var(--item-gap);\n}\n.vuuOverflowContainer-vertical {\n --item-align: stretch;\n --item-margin: var(--item-gap) 0 0 0;\n --overflow-direction: column; \n \n}\n\n.vuuOverflowContainer-wrapContainer {\n align-items: var(--item-align);\n display: flex;\n flex-direction: var(--overflow-direction);\n flex-wrap: wrap;\n /* gap: 4px; */\n height: var(--overflow-container-height);\n min-width: 44px;\n overflow: hidden;\n position: relative;\n width: 100%;\n\n}\n\n.vuuOverflowContainer-wrapContainer.overflowed {\n --overflow-order: 2;\n --overflow-left: auto;\n --overflow-position: relative;\n --overflow-width: auto;\n}\n\n.vuuOverflowContainer-item:first-child {\n --item-gap: 0;\n}\n\n.vuuOverflowContainer-item:first-child {\n --item-margin: 0;\n}\n\n.vuuOverflowContainer-item {\n align-items: inherit;\n display: flex;\n order: 1;\n position: relative;\n height: var(--overflow-container-height);\n margin: var(--item-margin);\n}\n\n\n.vuuOverflowContainer-item.wrapped {\n --overflow-item-bg: #ccc;\n order: 3;\n}\n\n.vuuOverflowContainer-item:has(.vuuDraggable-dragAway){\n display: none;\n}\n\n.vuuOverflowContainer-item.vuuDropTarget-settling {\n visibility: hidden;\n}\n\n.vuuOverflowContainer-OverflowIndicator {\n align-items: center;\n background-color: transparent;\n display: flex;\n height: var(--overflow-container-height);\n height: var(--overflow-container-height);\n order: var(--overflow-order);\n overflow: hidden;\n left: var(--overflow-left, 100%);\n position: var(--overflow-position, absolute);\n width: var(--overflow-width);\n\n \n}\n\n\n", ".vuuPalette-horizontal {\n align-items: center;\n display: flex;\n}\n\n.vuuPaletteItem {\n --vuu-icon-color: var(--salt-separable-primary-borderColor);\n --vuu-icon-inset: calc(50% - 12px) auto auto -3px;\n --vuu-icon-height: 24px;\n --vuu-icon-width: 24px;\n --list-item-text-padding: 0 0 0 calc(var(--salt-size-unit) * 3);\n}\n\n.vuuPaletteItem[data-draggable]:after {\n height: 22px;\n width: 6px;\n content: \"\";\n position: absolute;\n\n background-image: \n linear-gradient(45deg, rgb(180, 183, 190) 25%, transparent 25%),\n linear-gradient(-45deg, rgb(180, 183, 190) 25%, transparent 25%),\n linear-gradient(45deg, transparent 75%, rgb(180, 183, 190) 25%),\n linear-gradient(-45deg, transparent 75%, rgb(180, 183, 190) 25%);\n background-size: 4px 4px;\n background-position: 0 0, 2px 0, 2px -2px, 0 2px; \n\n}\n\n.vuuSimpleDraggableWrapper > .vuuPaletteItem {\n --vuu-icon-color: var(--salt-selectable-foreground);\n\n}", ".Tabs {\n display: flex;\n box-sizing: border-box;\n flex-direction: column;\n}\n\n.Tabs-horizontal {\n --vuu-tabs-border-style: none solid none none;\n flex-direction: row;\n}\n\n.Tabs .Toolbar:before {\n left: 0;\n width: 100%;\n bottom: 0;\n height: 1px;\n content: '';\n position: absolute;\n background: var(--grey60);\n}\n\n.vuuTabHeader {\n --saltTabs-activationIndicator-background: transparent;\n --saltToolbarField-marginTop: calc(var(--salt-size-unit) - 1px);\n border-color: var(--salt-container-primary-borderColor);\n border-style: var(--vuu-tabs-border-style, none none solid none);\n border-width: 1px;\n}\n\n.vuuTabHeader + .hwFlexbox,\n.vuuTabHeader + * {\n flex: 1;\n}\n\n.vuuTabHeader + .vuuView > .vuuHeader {\n height: 0;\n overflow: hidden;\n}\n\n.Layout-svg-button {\n --spacing-medium: 5px;\n}\n", "[data-design-mode='true'] .Component {\n filter: grayscale(100%);\n opacity: 0.4;\n}\n\n[data-design-mode='true'] .Component:after {\n color: black;\n content: 'Component';\n height: 12px;\n background-color: yellow;\n}\n\n.LayoutConfigurator {\n --margin-color: #f3cea5;\n --border-color: #fddda0;\n --padding-color: #c6d092;\n --content-color: #8cb6c0;\n display: flex;\n flex-direction: column;\n align-items: stretch;\n background-color: var(--margin-color);\n}\n\n.LayoutConfigurator .layout-outer {\n flex: 1 1 auto;\n display: flex;\n flex-direction: column;\n align-items: stretch;\n}\n\n.LayoutBox {\n --hw-control-font-size: 13px;\n --hw-text-input-bg: rgba(255, 255, 255, 0.3);\n --hwTextInput-padding: 3px;\n --hw-text-input-position: absolute;\n --hwTextInput-width: 30px;\n\n flex: 1 1 auto;\n}\n\n.LayoutBox > .layout-top {\n flex: 0 0 40px;\n padding-left: 12px;\n display: flex;\n flex-direction: row;\n align-items: center;\n position: relative;\n}\n\n.LayoutBox > .layout-bottom {\n flex: 0 0 40px;\n position: relative;\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n\n.LayoutBox > .layout-inner > .layout-right,\n.LayoutBox > .layout-inner > .layout-left {\n flex: 0 0 40px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n\n.layout-top,\n.layout-bottom {\n --hw-text-input-margin: 0 0 0 -15px;\n}\n\n.layout-top > .layout-input,\n.layout-bottom > .layout-input {\n left: 50%;\n}\n\n.LayoutBox > .layout-inner {\n flex: 1 1 auto;\n display: flex;\n flex-direction: row;\n align-items: stretch;\n}\n\n.LayoutBox.layout-margin {\n background-color: var(--margin-color);\n border: dashed 2px black;\n}\n\n.LayoutBox.layout-border {\n background-color: var(--border-color);\n border: solid 2px black;\n}\n\n.LayoutBox.layout-padding {\n background-color: var(--padding-color);\n border: dashed 2px black;\n}\n\n.LayoutBox .layout-content {\n flex: 1 1 auto;\n background-color: var(--content-color);\n border: solid 2px #808080;\n}\n\n.LayoutBox .layout-title {\n color: #161616;\n font-size: 11px;\n left: 4px;\n line-height: 15px;\n position: absolute;\n top: 1px;\n}\n", ".hwLayoutTreeViewer {\n}\n\n.hwLayoutTreeNode {\n cursor: default;\n}\n\n.hwLayoutTreeNode:hover {\n background-color: rgba(255, 255, 255, 0.2);\n}\n\n.hwLayoutTreeNode[aria-selected='true'] {\n background-color: cornflowerblue;\n color: white;\n}\n"],
|
|
5
|
+
"mappings": ";AAAA;AACE;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAOF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAGF;AAAA;AAEE;AACA;AAAA;AAGF;AAAA;AAEE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AAAA;AAEE;AAAA;AAGF;AAAA;AAEE;AAAA;AAGF;AAAA;AAEE;AAAA;AAGF;AAAA;AAEE;AAAA;AAGF;AAAA;AAEE;AAAA;AAGF;AAAA;AAEE;AAAA;AAGF;AAAA;AAEE;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;;;AC5JF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AAEA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;;;;;AClCF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AAAA;AAEE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AAAA;AAEF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;;;ACrEF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;;;ACtCF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAEF;AACE;AACA;AAAA;;;AChBF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;;;ACRF;AACE;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAEF;AACE;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAIF;AACE;AACA;AACA;AAAA;AAiBF;AACE;AAAA;AAiBF;AACE;AAAA;AAiBF;AACE;AACA;AACA;AAAA;;;ACnIF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;;;AC3CF;AACE;AACA;AAAA;AAGF;AACE;AAEA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACE;AAAA;AAEF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAAA;AAMJ;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;;AC9HF;AACE;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AAGA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AAGE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AAAA;;;ACtDF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;;ACrDF;AACE;AAAA;;;ACDF;AACI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGJ;AACI;AACA;AAAA;AAGJ;AACI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;;AC/BJ;AAEE;AACA;AAEA;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAEF;AACE;AACA;AAAA;AAGF;AACE;AAAA;;;ACjGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAIF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEF;AACE;AAAA;AAKF;AACE;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AAAA;AAEF;AACE;AAAA;;;ACpFF;AACE;AAEA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAIF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAIF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AAAA;AAIF;AACE;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAIF;AACE;AAAA;AAQF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;;AClIF;AACI;AAAA;;;ACAJ;AACE;AACA;AACA;AACA;AAEA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAQF;AACE;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAIF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAIF;AACE;AAAA;AAGF;AAAA;AAEE;AAAA;AAGF;AAAA;AAEE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAAA;AAIF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAAA;AAaF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;;;AC3KF;AACE;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAIF;AAAA;AAEE;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAKF;AACE;AAAA;AAKF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAGF;AAAA;AAGE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAIF;AACE;AAAA;AAGF;AAAA;AAEE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAIF;AACE;AAAA;AAGF;AACE;AAAA;AAKF;AAAA;AAEE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;;AC3NF;AACE;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AAGE;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;;;AC3DF;AACE;AACA;AAAA;AAGF;AACA;AAAA;;;ACNA;AACI;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAIJ;AACI;AACA;AAAA;AAEJ;AACI;AACA;AACA;AAAA;AAIJ;AACI;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AAAA;AAIJ;AACI;AACA;AACA;AACA;AAAA;AAGJ;AACI;AAAA;AAGJ;AACI;AAAA;AAGJ;AACI;AACA;AACA;AACA;AACA;AACA;AAAA;AAIJ;AACI;AACA;AAAA;AAGJ;AACI;AAAA;AAGJ;AACI;AAAA;AAGJ;AACI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;;ACpFJ;AACE;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAEA;AAAA;AAAA;AAAA;AAAA;AAKA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIF;AACE;AAAA;;;AC9BF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AAAA;AAEE;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AAAA;;;ACxCF;AACE;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAEA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AAAA;AAEE;AACA;AACA;AACA;AACA;AAAA;AAGF;AAAA;AAEE;AAAA;AAGF;AAAA;AAEE;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AAAA;;;AC9GF;AAAA;AAGA;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vuu-ui/vuu-layout",
|
|
3
|
-
"version": "0.8.
|
|
3
|
+
"version": "0.8.8-debug",
|
|
4
4
|
"description": "VUU Layout Components",
|
|
5
5
|
"author": "heswell",
|
|
6
6
|
"license": "Apache-2.0",
|
|
7
7
|
"dependencies": {
|
|
8
|
-
"@salt-ds/core": "1.8.0
|
|
8
|
+
"@salt-ds/core": "1.8.0",
|
|
9
9
|
"@salt-ds/icons": "1.5.1",
|
|
10
|
-
"@salt-ds/lab": "1.0.0-alpha.
|
|
11
|
-
"@vuu-ui/vuu-popups": "0.8.
|
|
12
|
-
"@vuu-ui/vuu-utils": "0.8.
|
|
10
|
+
"@salt-ds/lab": "1.0.0-alpha.15",
|
|
11
|
+
"@vuu-ui/vuu-popups": "0.8.8-debug",
|
|
12
|
+
"@vuu-ui/vuu-utils": "0.8.8-debug"
|
|
13
13
|
},
|
|
14
14
|
"peerDependencies": {
|
|
15
15
|
"classnames": "^2.2.6",
|
|
@@ -10,5 +10,4 @@ export declare const ComponentRegistry: {
|
|
|
10
10
|
export declare function isContainer(componentType: string): boolean;
|
|
11
11
|
export declare function isView(componentType: string): boolean;
|
|
12
12
|
export declare const isLayoutComponent: (type: string) => boolean;
|
|
13
|
-
export declare const isRegistered: (className: string) => boolean;
|
|
14
13
|
export declare function registerComponent(componentName: string, component: FunctionComponent<any>, type?: layoutComponentType): void;
|