@vuu-ui/vuu-table 0.8.7 → 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/index.css CHANGED
@@ -1,2 +1,2345 @@
1
- .vuuColumnResizer{background-color:var(--columnResizer-color);cursor:col-resize;height:var(--header-height);position:relative;width:4px}.vuuColumnResizer:hover{--columnResizer-color: var(--salt-color-blue-500)}.vuuColumnResizer:after{content:"";position:absolute;width:var(--columnResizer-width, 1px);top:0;bottom:0;right:-1px;background-color:var(--columnResizer-color, var(--salt-separable-tertiary-borderColor));height:var(--columnResizer-height, calc(100% + 1px))}.vuuDraggable{background:transparent;box-shadow:var(--salt-overlayable-shadow-drag);cursor:var(--salt-draggable-grab-cursor-active);position:absolute;opacity:.95;z-index:2000}.vuuDraggable-spacer{display:var(--saltDraggable-display, inline-block);height:var(--saltDraggable-spacer-height, var(--tabstrip-height));transition:var(--saltDraggable-transitionProp, width) .3s ease;width:var(--saltDraggable-spacer-width, 0)}.vuuDraggable-dropIndicatorPosition{display:var(--saltDraggable-display, inline-block);height:0px;width:100%}.vuuDraggable-dropIndicatorContainer{transition:var(--saltDraggable-transitionProp, top) .2s ease}.vuuDraggable-dropIndicator{background-color:var(--salt-palette-accent-background);height:2px;width:100%}.vuuDraggable-dropIndicator:before{content:"";width:6px;height:6px;border-radius:3px;background-color:var(--salt-palette-accent-background);position:absolute;top:-2px;left:-3px}.vuuDraggable-settling{transition-property:left,top;transition-duration:.15s;transition-timing-function:ease-out}.vuuDraggable-spacer{order:1}.vuuEditableLabel{--saltInput-background: transparent;--saltInput-minWidth: 14px;--saltInput-position: absolute;--editableLabel-padding: var(--saltEditableLabel-padding, 6px);--editableLabel-height: var(--saltEditableLabel-height, 26px);color:inherit;cursor:default;display:flex;flex-direction:column;font-size:var(--salt-text-fontSize);height:var(--editableLabel-height);justify-content:center;outline:none;padding:0 var(--editableLabel-padding);position:relative;z-index:var(--salt-zIndex-default)}.vuuEditableLabel:before{content:attr(data-text);display:block;height:0px;visibility:hidden;white-space:pre-wrap}.vuuEditableLabel .saltInput{font-weight:var(--salt-text-fontWeight);left:var(--editableLabel-padding, 0);padding:0;outline-style:none;position:absolute;right:var(--editableLabel-padding, 0);top:var(--saltEditableLabel-top, 2px);width:auto}.vuuEditableLabel .saltInput-activationIndicator{display:none}.vuuEditableLabel-input{background-color:transparent;border:none;box-sizing:content-box;display:block;flex:1;font:inherit;height:20px;margin:0;min-width:0;outline:none;padding:0}.vuuDrawer{--drawer-leading-edge-border: solid 1px var(--salt-container-primary-borderColor, none);--vuu-close-icon-svg: var(--svg-chevron-double-right);transition:flex-basis;transition-duration:var(--drawer-transition-duration);position:relative;z-index:1;flex-basis:0;flex-grow:1;flex-shrink:1;min-width:0;min-height:0;display:flex}.vuuDrawer-peekaboo{flex-basis:var(--drawer-peek-size);flex-grow:0;flex-shrink:0}.vuuDrawer-inline.vuuDrawer-open{flex-basis:var(--drawer-size);flex-grow:0;flex-shrink:0}.vuuDrawer-liner{background-color:var(--drawer-bg);overflow:hidden;position:relative}.vuuDrawer-content{height:100%;overflow:hidden;position:absolute;top:0;right:var(--drawer-peek-size);transition:right;transition-duration:var(--drawer-transition-duration);width:100%;flex:1 1 100%}.vuuDrawer-open .vuuDrawer-content{right:0}.vuuDrawer-left{border-right:var(--drawer-leading-edge-border)}.vuuDrawer-right{border-left:var(--drawer-leading-edge-border)}.vuuDrawer-top{border-bottom:var(--drawer-leading-edge-border)}.vuuDrawer-bottom{border-top:var(--drawer-leading-edge-border)}.vuuDrawer-left .vuuDrawer-liner,.vuuDrawer-right .vuuDrawer-liner{height:100%;transition:width}.vuuDrawer-top .vuuDrawer-liner,.vuuDrawer-bottom .vuuDrawer-liner{width:100%;transition:height}.vuuDrawer-inline .vuuDrawer-liner{width:100%;height:100%}.vuuDrawer-over .vuuDrawer-liner{position:absolute;transition-duration:.4s}.vuuDrawer-over.vuuDrawer-left .vuuDrawer-liner{top:0;left:0;width:0}.vuuDrawer-over.vuuDrawer-right .vuuDrawer-liner{top:0;right:0;width:0}.vuuDrawer-over.vuuDrawer-top .vuuDrawer-liner{height:0;top:0;left:0}.vuuDrawer-over.vuuDrawer-bottom .vuuDrawer-liner{bottom:0;height:0;left:0}.vuuDrawer-left.vuuDrawer-over.vuuDrawer-peekaboo .vuuDrawer-liner,.vuuDrawer-right.vuuDrawer-over.vuuDrawer-peekaboo .vuuDrawer-liner{width:var(--drawer-peek-size)}.vuuDrawer-top.vuuDrawer-over.vuuDrawer-peekaboo .vuuDrawer-liner,.vuuDrawer-bottom.vuuDrawer-over.vuuDrawer-peekaboo .vuuDrawer-liner{height:var(--drawer-peek-size)}.vuuDrawer-left.vuuDrawer-over.vuuDrawer-open .vuuDrawer-liner,.vuuDrawer-right.vuuDrawer-over.vuuDrawer-open .vuuDrawer-liner{width:var(--drawer-size)}.vuuDrawer-top.vuuDrawer-over.vuuDrawer-open .vuuDrawer-liner,.vuuDrawer-bottom.vuuDrawer-over.vuuDrawer-open .vuuDrawer-liner{height:var(--drawer-size)}.vuuDrawer-top,.vuuDrawer-left{order:0}.vuuDrawer-bottom,.vuuDrawer-right{order:99}.vuuDrawer-left,.vuuDrawer-right{flex-direction:column}.vuuToggleButton-container{--saltButton-height: 28px;--saltButton-width: 28px;--vuu-icon-size: 12px;flex:0 0 28px}.vuuDrawer-open{--vuu-close-icon-svg: var(--svg-chevron-double-left)}.vuuDockLayout{--chest-bg: var(--hw-chest-bg, inherit);--drawer-bg: var(--hw-drawer-bg, inherit);--drawer-size: var(--hw-drawer-size, 200px);--drawer-peek-size: var(--hw-drawer-peek-size, 32px);--drawer-transition-duration: var(--hw-drawer-transition-duration, .4s);background-color:var(--chest-bg);display:flex}.vuuDockLayout-horizontal{flex-direction:row}.vuuDockLayout-vertical{flex-direction:column}.vuuDockLayout-content{background-color:var(--chest-bg);flex-grow:1;flex-shrink:1;overflow:hidden;display:flex;align-items:center;justify-content:center}.vuuDockLayout-horizontal .vuuDockLayout-content,.vuuDockLayout-vertical .vuuDockLayout-content{flex-basis:100%}.vuuDropMenu{margin-left:-50%;margin-bottom:-50%;background-color:#fff;border:solid 1px var(--grey40);display:inline-flex;justify-content:center;align-items:center;padding:3px;border-radius:3px}.vuuDropMenu-left,.vuuDropMenu-right{flex-direction:column}.vuuDropMenu-bottom{transform:translateY(-30px)}.vuuDropMenu-right{transform:translate(-20px)}.vuuDropMenu-item{--vuu-icon-size: 20px;width:32px;height:32px;background-color:var(--grey20);border-bottom:solid 1px var(--grey40);cursor:pointer;display:flex;align-items:center;justify-content:center}.vuuDropMenu-item .Icon{transform:scale(1.25);transform-origin:center center}.vuuDropMenu-left .vuuDropMenu-item .hwIcon{transform:scale(1.25) rotate(180deg);transform-origin:center center}.vuuDropMenu-top .vuuDropMenu-item .hwIcon{transform:scale(1.25) rotate(270deg);transform-origin:center center}.vuuDropMenu-bottom .vuuDropMenu-item .hwIcon{transform:scale(1.25) rotate(90deg);transform-origin:center center}.vuuDropMenu-item .hwIcon-path{fill:gray}.vuuDropMenu-item:hover{background-color:#c8c8c880}.vuuDropMenu-item:hover .hwIcon-path-2{fill:#00f}.vuuDropMenu-item:last-child{border-bottom:none}#hw-drag-canvas{visibility:hidden;z-index:1;position:absolute;top:0px;left:0;right:0;bottom:0;background-color:transparent}#hw-drag-canvas>svg{position:absolute}.drawing #hw-drag-canvas{visibility:visible}path.drop-target{stroke:#00f;stroke-width:4px;fill:transparent}path.drop-target.centre{stroke:red}#vuu-drop-outline{fill:#0000ff4d;stroke:none;stroke-dasharray:4 2}#hw-drop-guides{fill:none;stroke:#0000004d;stroke-dasharray:2 3}.DraggableLayout{display:inline-block;outline:none}[data-dragging=true]{position:absolute!important;z-index:100}.vuuSimpleDraggableWrapper{background-color:#fff;box-shadow:0 6px 10px #0003}.vuuSimpleDraggableWrapper>*{height:100%;width:100%}.vuuPlaceholder{flex-basis:0;flex-grow:1;flex-shrink:1}.vuuPlaceholder-shim{flex-grow:0;flex-shrink:0}.Splitter{--splitter-size: 3px;--splitter-border-width: 4px;--splitter-border-style: none;--splitter-border-color: white;align-items:center;background-color:var(--salt-palette-neutral-secondary-separator);border-color:var(--splitter-border-color);border-style:var(--splitter-border-style);box-sizing:border-box;display:flex;justify-content:center;position:relative;outline:none;z-index:1}.Splitter:hover{background-color:var(--salt-palette-neutral-primary-separator)}.active.Splitter{background-color:var(--salt-palette-interact-outline)}.Splitter.column{cursor:ns-resize;height:var(--splitter-size);border-width:var(--splitter-border-width) 0}.Splitter:not(.column){cursor:ew-resize;width:var(--splitter-size);border-width:0 var(--splitter-border-width)}.Splitter:before{border:none;border-radius:0;content:"";display:block;padding:0}.Splitter .grab-zone{position:absolute;background-color:#ff000003;cursor:inherit}.Splitter.column .grab-zone{left:0;right:0;top:-5px;bottom:-5px}.Splitter:not(.column) .grab-zone{left:-5px;right:-5px;top:0;bottom:0}.active.Splitter:not(.column) .grab-zone{background-color:#ffffff0d;left:-150px;right:-150px}.Splitter:not(.column):before{width:1px;height:10px;background:linear-gradient(to bottom,var(--grey900) 10%,transparent 10%,transparent 30%,var(--grey900) 30%,var(--grey900) 40%,transparent 40%,transparent 60%,var(--grey900) 60%,var(--grey900) 70%,transparent 70%,transparent 90%,var(--grey900) 90%)}.active.Splitter.column:before{background:linear-gradient(to right,#ffffff 10%,transparent 10%,transparent 30%,#ffffff 30%,#ffffff 40%,transparent 40%,transparent 60%,#ffffff 60%,#ffffff 70%,transparent 70%,transparent 90%,#ffffff 90%)}.active.Splitter:not(.column):before{background:linear-gradient(to bottom,#ffffff 10%,transparent 10%,transparent 30%,#ffffff 30%,#ffffff 40%,transparent 40%,transparent 60%,#ffffff 60%,#ffffff 70%,transparent 70%,transparent 90%,#ffffff 90%)}.Splitter.column:before{width:10px;height:1px;background:linear-gradient(to right,var(--grey900) 10%,transparent 10%,transparent 30%,var(--grey900) 30%,var(--grey900) 40%,transparent 40%,transparent 60%,var(--grey900) 60%,var(--grey900) 70%,transparent 70%,transparent 90%,var(--grey900) 90%)}:root{--hw-space-unit: 4px;--hw-flex-gap: 3;--hw-fluid-grid-col-bg: rgba(200, 200, 200, .3)}.hwFlexbox{background-color:var(--container1-background);box-sizing:border-box;display:flex;gap:calc(var(--spacing) * var(--space));min-height:0;min-width:0;overflow:hidden}.hwFlexbox-column{flex-direction:column}.hwFlexbox-row{flex-direction:row}.hwFlexbox>.Splitter{flex-basis:auto;flex-grow:0;flex-shrink:0}.hwFlexbox.full-page{height:100vh;width:100vw}.flex-fill{border-color:red;flex:0;flex-grow:1;flex-shrink:1}.vuuView.flex-fill{border-color:red}:root{--hw-space-unit: 4px;--hw-fluid-grid-col-bg: rgba(252, 209, 232, .7)}.hwFluidGrid{--gap: var(--gutter-width);display:flex;gap:calc(var(--grid-gap) * var(--hw-space-unit));flex-wrap:wrap;padding:0}.hwFluidGrid>*{--gutter-width: calc(var(--hw-flex-gap) * var(--hw-space-unit));--gutter-count: calc(var(--parent-col-count) - 1);--total-gutter-width: calc(var(--gutter-count) * var(--gutter-width));--available-width: calc(100% - var(--total-gutter-width));flex-basis:0;flex-grow:1;flex-shrink:1;position:relative}.hwFluidGrid>*:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border:dashed 2px blue}.hwFluidGrid>[data-xs]{--internal-gutter-count: calc(var(--col-span) - 1);--percent-width: calc(var(--col-span) / var(--parent-col-count));--internal-gutter-width: calc(var(--internal-gutter-count) * var(--gutter-width));flex-basis:calc(var(--available-width) * var(--percent-width) + var(--internal-gutter-width));flex-grow:0}.hwFluidGrid>[data-xs="1"]{--col-span: 1}.hwFluidGrid>[data-xs="2"]{--col-span: 2}.hwFluidGrid>[data-xs="3"]{--col-span: 3}.hwFluidGrid>[data-xs="4"]{--col-span: 4}.hwFluidGrid>[data-xs="6"]{--col-span: 6}.hwFluidGrid>[data-xs="8"]{--col-span: 8}.hwFluidGrid>[data-xs="9"]{--col-span: 9}.hwFluidGrid>[data-xs="10"]{--col-span: 10}.hwFluidGrid>[data-xs="11"]{--col-span: 11}.hwFluidGrid>[data-xs="12"]{--col-span: 12}@media (min-width: 600px){.hwFluidGrid>[data-sm="1"]{--col-span: 1}.hwFluidGrid>[data-sm="2"]{--col-span: 2}.hwFluidGrid>[data-sm="3"]{--col-span: 3}.hwFluidGrid>[data-sm="4"]{--col-span: 4}.hwFluidGrid>[data-sm="6"]{--col-span: 6}.hwFluidGrid>[data-sm="8"]{--col-span: 8}.hwFluidGrid>[data-sm="9"]{--col-span: 9}.hwFluidGrid>[data-sm="10"]{--col-span: 10}.hwFluidGrid>[data-sm="11"]{--col-span: 11}.hwFluidGrid>[data-sm="12"]{--col-span: 12}}.hwFluidGrid-show-grid{--gutter-width: calc(var(--hw-flex-gap) * var(--hw-space-unit));--grid-gutter-count: calc(var(--grid-col-count, var(--parent-col-count)) - 1);--grid-total-gutter-width: calc(var(--grid-gutter-count) * var(--gutter-width));--grid-available-width: calc(100% - var(--grid-total-gutter-width));--grid-percent-width: calc(1 / var(--grid-col-count, var(--parent-col-count)));--column-width: calc(var(--grid-available-width) * var(--grid-percent-width));background:repeating-linear-gradient(to right,var(--hw-fluid-grid-col-bg) 0,var(--hw-fluid-grid-col-bg) var(--column-width),white var(--column-width),white calc(var(--column-width) + var(--gutter-width)))}.vuuView{border-color:var(--vuuView-borderColor, var(--salt-container-primary-borderColor));border-width:var(--vuuView-borderWidth, 1px);border-style:var(--vuuView-borderStyle, none);display:flex;flex-direction:column;margin:var(--vuuView-margin, 0px);min-height:50px;min-width:50px;outline:none;overflow:hidden;position:relative}.vuuView.focus-visible:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border:dotted cornflowerblue 2px}.vuuView.dragging{box-shadow:0 6px 12px #0000002d}.vuuView-main{display:flex;flex-direction:var(--vuuView-flexDirection, column);flex-wrap:var(--vuuView-flex-wrap, nowrap);flex:1;overflow:hidden;position:relative}.vuuView-main>*{flex-basis:auto;flex-grow:var(--vuuView-flex-grow, 1);flex-shrink:var(--vuuView-flex-shrink, 1)}.vuuView-collapsed .vuuView-main{display:none}.vuuView-collapsed+.Splitter{display:none}.vuuView-collapsed .Toolbar-vertical{border-right:solid 1px var(--grey40)}.vuuView-collapsed .Toolbar-vertical .toolbar-title{display:none}.vuuHeader{--saltButton-height: 24px;--saltButton-width: 24px}.salt-density-high .vuuHeader{--saltToolbarField-marginTop: 0}.vuuOverflowContainer{--item-gap: 4px;--overflow-direction: row;--overflow-width: 0px;--overflow-order: 99;--border-size: calc((var(--overflow-container-height) - 24px) / 2);background-color:var(--vuuOverflowContainer-background, black);height:var(--overflow-container-height)}.vuuOverflowContainer-horizontal{--item-align: center;--item-margin: 0 0 0 var(--item-gap)}.vuuOverflowContainer-vertical{--item-align: stretch;--item-margin: var(--item-gap) 0 0 0;--overflow-direction: column}.vuuOverflowContainer-wrapContainer{align-items:var(--item-align);display:flex;flex-direction:var(--overflow-direction);flex-wrap:wrap;height:var(--overflow-container-height);min-width:44px;overflow:hidden;position:relative;width:100%}.vuuOverflowContainer-wrapContainer.overflowed{--overflow-order: 2;--overflow-left: auto;--overflow-position: relative;--overflow-width: auto}.vuuOverflowContainer-item:first-child{--item-gap: 0}.vuuOverflowContainer-item:first-child{--item-margin: 0}.vuuOverflowContainer-item{align-items:inherit;display:flex;order:1;position:relative;height:var(--overflow-container-height);margin:var(--item-margin)}.vuuOverflowContainer-item.wrapped{--overflow-item-bg: #ccc;order:3}.vuuOverflowContainer-item:has(.vuuDraggable-dragAway){display:none}.vuuOverflowContainer-item.vuuDropTarget-settling{visibility:hidden}.vuuOverflowContainer-OverflowIndicator{align-items:center;background-color:transparent;display:flex;height:var(--overflow-container-height);order:var(--overflow-order);overflow:hidden;left:var(--overflow-left, 100%);position:var(--overflow-position, absolute);width:var(--overflow-width)}.vuuPalette-horizontal{align-items:center;display:flex}.vuuPaletteItem{--vuu-icon-color: var(--salt-separable-primary-borderColor);--vuu-icon-inset:calc(50% - 12px) auto auto -3px;--vuu-icon-height: 24px;--vuu-icon-width: 24px;--list-item-text-padding: 0 0 0 calc(var(--salt-size-unit) * 3)}.vuuPaletteItem[data-draggable]:after{height:22px;width:6px;content:"";position:absolute;background-image:linear-gradient(45deg,rgb(180,183,190) 25%,transparent 25%),linear-gradient(-45deg,rgb(180,183,190) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgb(180,183,190) 25%),linear-gradient(-45deg,transparent 75%,rgb(180,183,190) 25%);background-size:4px 4px;background-position:0 0,2px 0,2px -2px,0 2px}.vuuSimpleDraggableWrapper>.vuuPaletteItem{--vuu-icon-color: var(--salt-selectable-foreground)}.Tabs{display:flex;box-sizing:border-box;flex-direction:column}.Tabs-horizontal{--vuu-tabs-border-style: none solid none none;flex-direction:row}.Tabs .Toolbar:before{left:0;width:100%;bottom:0;height:1px;content:"";position:absolute;background:var(--grey60)}.vuuTabHeader{--saltTabs-activationIndicator-background: transparent;--saltToolbarField-marginTop: calc(var(--salt-size-unit) - 1px);border-color:var(--salt-container-primary-borderColor);border-style:var(--vuu-tabs-border-style, none none solid none);border-width:1px}.vuuTabHeader+.hwFlexbox,.vuuTabHeader+*{flex:1}.vuuTabHeader+.vuuView>.vuuHeader{height:0;overflow:hidden}.Layout-svg-button{--spacing-medium: 5px}[data-design-mode=true] .Component{filter:grayscale(100%);opacity:.4}[data-design-mode=true] .Component:after{color:#000;content:"Component";height:12px;background-color:#ff0}.LayoutConfigurator{--margin-color: #f3cea5;--border-color: #fddda0;--padding-color: #c6d092;--content-color: #8cb6c0;display:flex;flex-direction:column;align-items:stretch;background-color:var(--margin-color)}.LayoutConfigurator .layout-outer{flex:1 1 auto;display:flex;flex-direction:column;align-items:stretch}.LayoutBox{--hw-control-font-size: 13px;--hw-text-input-bg: rgba(255, 255, 255, .3);--hwTextInput-padding: 3px;--hw-text-input-position: absolute;--hwTextInput-width: 30px;flex:1 1 auto}.LayoutBox>.layout-top{flex:0 0 40px;padding-left:12px;display:flex;flex-direction:row;align-items:center;position:relative}.LayoutBox>.layout-bottom{flex:0 0 40px;position:relative;display:flex;flex-direction:row;align-items:center}.LayoutBox>.layout-inner>.layout-right,.LayoutBox>.layout-inner>.layout-left{flex:0 0 40px;display:flex;flex-direction:column;justify-content:center;align-items:center}.layout-top,.layout-bottom{--hw-text-input-margin: 0 0 0 -15px}.layout-top>.layout-input,.layout-bottom>.layout-input{left:50%}.LayoutBox>.layout-inner{flex:1 1 auto;display:flex;flex-direction:row;align-items:stretch}.LayoutBox.layout-margin{background-color:var(--margin-color);border:dashed 2px black}.LayoutBox.layout-border{background-color:var(--border-color);border:solid 2px black}.LayoutBox.layout-padding{background-color:var(--padding-color);border:dashed 2px black}.LayoutBox .layout-content{flex:1 1 auto;background-color:var(--content-color);border:solid 2px #808080}.LayoutBox .layout-title{color:#161616;font-size:11px;left:4px;line-height:15px;position:absolute;top:1px}.hwLayoutTreeNode{cursor:default}.hwLayoutTreeNode:hover{background-color:#fff3}.hwLayoutTreeNode[aria-selected=true]{background-color:#6495ed;color:#fff}.vuuTabstrip{--vuuOverflowContainer-background: transparent;--tabstrip-dragging-display: none;--tabstrip-display: inline-flex;--tabstrip-background: transparent;align-self:var(--saltTabs-tabstrip-alignSelf, stretch);font-size:var(--salt-text-fontSize);font-weight:var(--vuuTabstrip-fontWeight, var(--salt-text-fontWeight));position:relative;overflow:visible;display:flex;min-width:28px;width:var(--tabstrip-width)}.vuuTabstrip-horizontal{--tabstrip-height: var(--vuuTabstrip-height, 28px);--tabstrip-width: var(--vuuTabstrip-width, 100%);--tab-width: auto;--tab-thumb-height: 2px;--tab-thumb-left: var(--tab-thumb-offset, 0);--tab-thumb-top: auto;--tab-thumb-width: var(--tab-thumb-size, 100%);align-items:flex-start;border-bottom:var(--vuuTabstrip-borderBottom, solid 1px var(--salt-container-primary-borderColor))}.vuuTabstrip-vertical{--tabstrip-height: var(--vuuTabstrip-height, 100%);--tabstrip-width: var(--vuuTabstrip-width, 100px);--tab-width: 100%;--tab-thumb-height: var(--tab-thumb-size, 100%);--tab-thumb-left: 0;--tab-thumb-top: var(--tab-thumb-offset, 0);--tab-thumb-width: 2px;align-self:flex-start;display:inline-flex}.vuuTabstrip-draggingTab .vuuTab{pointer-events:none}.vuuTabstrip-addTabButton{--saltButton-height: 20px;--saltButton-width: 20px}.vuuTabstrip-overflowMenu.saltDropdown{--saltIcon-margin: 2px 0 0 0px}.vuuTabstrip-overflowMenu-open{--saltButton-background: var(--salt-actionable-secondary-background-active);--saltButton-text-color: var(--salt-actionable-secondary-text-color-active)}.vuuTabstrip-overflowMenu-open .saltButton{--saltIcon-color: var(--salt-actionable-secondary-foreground-active)}.vuuTabstrip-inner{width:100%;align-items:center;display:flex;flex-basis:auto;flex-grow:0;flex-shrink:1;flex-wrap:wrap;justify-content:flex-start;line-height:var(--tabstrip-height)}.vuuTabstrip-vertical .vuuTabstrip-inner{flex-direction:column;height:auto}.vuuTabstrip-centered .vuuTabstrip-inner{justify-content:center}.vuuDraggable[class*=vuuTabstrip]{--tabstrip-display: flex;--tabstrip-height: 100%;--tabstrip-dragging-display: block;--tabs-tab-background: var(--salt-navigable-primary-background-hover);--tabs-tab-before-content: "";--tabs-tab-before-background: var(--salt-navigable-indicator-hover);--tabs-tab-before-height: var(--tab-activationIndicator-thumb-height);--tabs-tab-before-inset: var(--tab-activationIndicator-inset);--tabs-tab-before-width: var(--tab-activationIndicator-thumb-width);--tabs-tab-cursor: var(--salt-draggable-grab-cursor-active);--tabs-tab-position: static;font-size:12px}.vuuDraggable-tabstrip-horizontal{--tab-thumb-height: 2px;--tabstrip-height: 28px;line-height:var(--tabstrip-height)}.vuuDraggable[class*=tabstrip] .vuuTab[aria-selected=true]:before{--tabs-tab-before-background: var(--salt-navigable-indicator-active)}.vuuTabstrip-overflowMenu-dropTarget:after{background:var(--salt-selectable-background-selected);content:"";position:absolute;height:2px;left:0;right:0;bottom:0}.vuuTabMenu{top:-2px}.vuuTab{--saltEditableLabel-padding: 0;--saltEditableLabel-height: var(--tabstrip-height);--saltInputLegacy-minWidth: 4em;--saltEditableLabel-top: 3px;--tab-background: var(--vuuTab-background, var(--salt-navigable-primary-background));--tab-cursor: pointer;--tab-position: relative}.vuuTab{align-items:center;align-self:stretch;background:var(--tab-background);border:none;border-radius:var(--vuuTab-borderRadius, 0);color:var(--salt-text-primary-foreground);cursor:var(--vuuTab-cursor, var(--tab-cursor));display:var(--tabstrip-display);gap:8px;height:var(--vuuTab-height, var(--tabstrip-height));letter-spacing:var(--vuuTab-letterSpacing, var(--tab-letterSpacing, 0));min-width:var(--vuuTab-minWidth, 40px);outline:none;padding:var(--vuuTab-padding, 0 24px);position:var(--vuuTab-position, var(--tab-position));user-select:none;width:var(--tab-width)}.vuuTab{margin:0 var(--tab-spacing) 0 0}.vuuTab-selected{background:var(--vuuTab-background-selected, var(--tab-background));color:var(--salt-text-primary-foreground);font-weight:var(--salt-navigable-fontWeight-active)}.vuuTab-main{align-items:center;border:none;color:inherit;cursor:inherit;display:flex;font-family:inherit;font-size:inherit;font-weight:inherit;height:var(--vuuTabstrip-height, var(--salt-size-stackable));outline:none;position:relative}.vuuTab-closeable .vuuTab-main{border-right:solid transparent var(--salt-size-unit)}.vuuTab .vuuTab-closeButton{display:flex;align-items:center;justify-content:center}.vuuTab-close-icon{display:none}.salt-density-touch .vuuTab-close-icon,.salt-density-low .vuuTab-close-icon{display:block}.salt-density-touch .vuuTab-close-icon-small,.salt-density-low .vuuTab-close-icon-small{display:none}.vuuTab .vuuTab-text{display:inline-block;position:relative;overflow:hidden;text-align:var(--salt-text-textAlign-embedded);text-overflow:ellipsis;top:var(--vuuTab-top, var(--tab-top, auto));white-space:nowrap;z-index:var(--salt-zIndex-default)}.vuuTab .vuuTab-text:before{height:0;content:attr(data-text);display:block;visibility:hidden;font-weight:var(--salt-navigable-fontWeight-active)}.vuuTab-editing:after{content:"";position:absolute;top:0;left:0;right:0;bottom:2px;outline-color:var(--salt-focused-outlineColor);outline-style:var(--salt-focused-outlineStyle);outline-width:var(--salt-focused-outlineWidth);outline-offset:-2px}.vuuTab.vuuFocusVisible{background:var(--vuuTab-hover-background, var(--salt-navigable-primary-background-hover));outline-color:var(--vuuTab-focusVisible-color, var(--salt-focused-outlineColor));outline-style:dashed;outline-width:1px;outline-offset:-1px}.vuuTab:before{content:var(--tab-before-content, none);content:"";background:var(--tab-before-background);height:var(--tab-before-height);inset:var(--tab-before-inset);position:absolute;width:var(--tab-before-width);z-index:1}.vuuTabstrip-draggingTab .vuuTab-selected:before{--tab-before-content: "";--tab-before-background: var(--salt-navigable-indicator-color-active);--tab-before-height: var(--tab-thumb-height);--tab-before-inset: var(--tab-activationIndicator-inset);--tab-before-width: var(--tab-activationIndicator-thumb-width)}.vuuTab-selected:before{--tab-before-content: "";background:var(--salt-navigable-indicator-active);height:var(--tab-thumb-height);position:absolute;left:var(--tab-thumb-left);bottom:0px;top:var(--tab-thumb-top, auto);transition:var(--tab-thumb-transition, none);width:var(--tab-thumb-width, 100%)}.vuuTab:hover:not(.vuuTab-closeHover){background:var(--vuuTab-hover-background, var(--salt-navigable-primary-background-hover))}.vuuTree{--tree-node-collapse: var(--vuuTree-toggle-collapse, var(--svg-tree-node-collapse));--tree-node-expand: var(--vuuTree-toggle-expand, var(--svg-tree-node-expand));--tree-toggle-width: 12px;--tree-icon-color: var(--vuuTree-icon-color, #4c505b);--tree-node-expanded-transform: var(--vuuTree-node-expanded-transform, none);--tree-node-indent: 0px;--list-hilited-bg: var(--hw-list-hilited-bg, rgba(0, 0, 0, .1));--list-item-height: var(--hw-list-item-height, 30px);--list-item-padding: var(--hw-list-item-padding, 0 6px);--list-item-header-bg: var(--hw-list-item-header-bg, black);--list-item-header-color: var(--hw-list-item-header-color, white);--list-item-header-font-weight: bold;--list-item-header-twisty-color: black;--list-item-header-twisty-content: "";--list-item-header-twisty-top: 50%;--list-item-header-twisty-left: -18px;--list-item-header-twisty-right: auto;--list-item-selected-bg: var(--hw-list-selected-bg, #1ea7fd);--list-item-selected-color: white;--list-item-text-color: var(--hw-gray-800);--focus-visible-border-color: var(--hw-focus-visible-border-color, rgb(141, 154, 179));list-style:none;margin:0;padding:0 1px;font-size:var(--vuuTree-font-size, 14px);max-height:inherit;outline:none;overflow-y:auto;position:relative;user-select:none}.vuuTree-viewport{--list-item-height: 30px;box-sizing:border-box;max-height:inherit;overflow:auto}.vuuTree-scrollingContentContainer{box-sizing:inherit;position:relative}.vuuTree-scrollingContentContainer .vuuTreeNode{line-height:30px;position:absolute;top:0;left:0;right:0;will-change:transform}.vuuTreeNode{list-style:none}.vuuTreeNode:not([aria-expanded]),.vuuTreeNode[aria-expanded]>.vuuTreeNode-label{--checkbox-border-color: black;--checkbox-border-width: 1px;--checkbox-tick: black;--list-item-padding-left: 6px;--svg-toggle: var(--tree-node-collapse);align-items:center;color:var(--list-item-text-color);display:flex;flex-wrap:nowrap;height:var(--list-item-height);line-height:var(--list-item-height);padding:var(--list-item-padding);padding-left:var(--padding-left);position:relative;cursor:default;margin:0;white-space:nowrap}.vuuTreeNode:not([aria-expanded]){--padding-left: calc( var(--list-item-padding-left) + var(--tree-toggle-width) + var(--tree-node-indent) )}.vuuTreeNode[aria-expanded]>.vuuTreeNode-label{--padding-left: calc( var(--list-item-padding-left) + var(--tree-toggle-width) + var(--tree-node-indent) )}.vuuTreeNode-icon{background-color:var(--tree-icon-color);display:inline-block;height:18px;margin-right:6px;-webkit-mask:var(--vuu-icon-svg) center center/12px 12px no-repeat;mask:var(--vuu-icon-svg) center center/12px 12px no-repeat;flex:0 0 18px}.vuuTreeNode[aria-expanded]{flex-direction:column}.vuuTreeNode[aria-expanded]{flex-direction:column;height:auto}.vuuTreeNode>*[role=group]{padding-left:0}.vuuTreeNode{padding-left:calc(var(--padding-left) + var(--tree-node-indent))}.vuuTreeNode[aria-level="2"]{--tree-node-indent: 12px}.vuuTreeNode[aria-level="3"]{--tree-node-indent: 24px}.vuuTreeNode[aria-level="4"]{--tree-node-indent: 36px}.vuuTreeNode:not(.focusVisible):not(.hwListItemHeader):not([aria-expanded])[data-highlighted],.vuuTreeNode:not(.focusVisible):not(.hwListItemHeader)[aria-expanded][data-highlighted]>div:first-child{background-color:var(--list-hilited-bg)}.vuuTreeNode-toggle{cursor:pointer}.vuuTreeNode>.vuuTreeNode-toggle{display:inline-block;height:100%;left:0;position:absolute;width:calc(var(--list-item-padding-left) + var(--tree-toggle-width))}.vuuTreeNode[aria-expanded]>.vuuTreeNode-label:after{content:var(--list-item-header-twisty-content);-webkit-mask:var(--svg-toggle) center center/8px 8px no-repeat;mask:var(--svg-toggle) center center/8px 8px no-repeat;background-color:var(--list-item-header-twisty-color);height:18px;margin-top:-9px;left:var(--tree-node-indent);position:absolute;top:var(--list-item-header-twisty-top);transition:transform .3s;width:18px}.vuuTreeNode[aria-selected=true]{--list-item-header-twisty-color: var(--list-item-selected-color)}.vuuTreeNode:not(.focusVisible):focus{background-color:#0000001a}.vuuTreeNode:not([aria-expanded]).focusVisible:before,.vuuTreeNode[aria-expanded].focusVisible>div:first-child:before{content:"";position:absolute;top:0px;left:var(--tree-focus-offset, 0px);right:0;bottom:0px;border:dotted var(--focus-visible-border-color) 2px;background-color:var(--list-hilited-bg)}.vuuTreeNode[aria-expanded=false]>*:first-child:after{--svg-toggle: var(--tree-node-expand)}.vuuTreeNode[aria-expanded=true]>*:first-child:after{transform:var(--tree-node-expanded-transform)}.vuuTree:not(.checkbox-only) .vuuTreeNode:not([aria-expanded])[aria-selected=true],.vuuTree:not(.checkbox-only) .vuuTreeNode[aria-expanded][aria-selected=true]>div:first-child{--checkbox-border-color: var(--list-item-selected-color);--checkbox-tick: var(--list-item-selected-color);--focus-visible-border-color: var(--list-item-selected-color);background-color:var(--list-item-selected-bg);color:var(--list-item-selected-color)}.with-checkbox .vuuTreeNode{padding-left:28px}.with-checkbox .vuuTreeNode:before{border-style:solid;border-width:var(--checkbox-border-width);border-color:var(--checkbox-border-color);content:"";height:12px;left:3px;margin-top:-7px;position:absolute;top:50%;width:12px}.vuuTable{--cell-outline-width: 2px;user-select:none}[role=cell]{display:inline-block}[data-align=end]{margin-left:auto}[data-align=end]+[data-align=end]{margin-left:0}.vuuTable-table [role=cell]{--saltEditableLabel-height: 17px;--saltInput-height: 17px;--saltInput-minHeight: 17px;border-right:1px solid var(--vuuTableCell-border-rightColor);border-bottom:1px solid var(--vuuTableCell-border-bottomColor);color:var(--salt-text-primary-foreground);cursor:default;height:var(--vuuTable-rowHeight);line-height:calc(var(--vuuTable-rowHeight) - 1px);overflow:hidden;padding:0 5px;vertical-align:top}.vuuTable-headerCell:focus,.vuuTable [role=cell]:focus{outline:var(--vuuTableCell-outline, dotted var(--salt-color-blue-400) var(--cell-outline-width));outline-offset:calc(var(--cell-outline-width) * -1);box-shadow:inset 0 0 0 var(--cell-outline-width) #fff;border-bottom:none}.vuuTable-headerCell:focus .vuuTable-headerCell-inner{padding-bottom:var(--cell-outline-width)}.vuuTable-headerCell:not(.vuuTable-headerCell-resizing):focus .vuuTable-headerCell-inner{--columnResizer-color: transparent}.vuuTable [role=cell]:focus{border-right:none;padding-bottom:1px}[role=cell][data-editable=true]{--salt-text-fontSize: 10px;--vuu-icon-size: 5px;position:relative}[role=cell][data-editable=true]:after{top:0;content:"";background-color:var(--salt-text-secondary-foreground, black);left:0;height:var(--vuu-icon-height, var(--vuu-icon-size, 12px));-webkit-mask:var(--svg-corner-triangle) center center/var(--vuu-icon-size) var(--vuu-icon-size);mask:var(--svg-corner-triangle) center center/var(--vuu-icon-size) var(--vuu-icon-size);mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;position:absolute;transform:rotate(180deg);width:var(--vuu-icon-width, var(--vuu-icon-size, 12px))}[role=cell]:focus[data-editable],[role=cell]:focus-within[data-editable],[role=cell]:has(.saltEditableLabel-editing){outline:solid var(--salt-color-blue-400) 1px;background-color:#fff;outline-offset:-1px}[role=cell]:focus[data-editable=true]:after,[role=cell]:has(.saltEditableLabel):after{background-color:var(--salt-color-blue-400);left:1px;top:1px}.vuuAlignRight{text-align:right}.vuuTableGroupCell{--spacer-width: 20px;--toggle-icon-transform: var(--row-toggle-icon-transform, none);--vuu-icon-width: 18px;align-items:center;display:inline-flex}.vuuTableGroupCell-spacer{height:100%;position:relative;width:var(--spacer-width)}.vuuTableGroupCell-spacer:after{background:var(--salt-container-primary-borderColor);content:"";position:absolute;top:0;bottom:-1px;left:9px;width:1px}.vuuTableGroupCell-toggle{transition:transform .25s;transform:var(--toggle-icon-transform)}.vuuTableRow{--row-background: var(--table-background);position:absolute;top:0}.vuuTableRow-even{--row-background: var(--row-background-even)}.vuuTableRow{background-color:var(--row-background)}.vuuTableRow-expanded{--row-toggle-icon-transform: rotate(90deg)}.vuuTableRow[aria-selected]{background-color:var(--vuuTableRow-selected-background, var(--salt-selectable-background-selected));--vuuTableCell-border-bottomColor: var(--salt-selectable-borderColor-selected)}.vuuTableRow-preSelected{--vuuTableCell-border-bottomColor: var(--salt-selectable-borderColor-selected)}.salt-theme{--svg-spinner: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="rgb(38, 112, 169)" d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"><animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1s" from="0 50 50" to="360 50 50" repeatCount="indefinite" /></path></svg>')}.vuuTable-groupHeaderCell{--cell-align: "flex-start";text-align:left;background:var(--dataTable-background);cursor:default;height:var(--vuuTableHeaderHeight)}.vuuTable-groupHeaderCell-inner{align-items:center;display:flex;height:100%;padding-left:1px}.vuuTable-groupHeaderCell-label{align-items:center;display:flex;flex:0 0 auto}.vuuTable-groupHeaderCell-col{align-items:center;background-color:inherit;display:inline-flex;flex:0 1 auto;height:calc(var(--vuuTableHeaderHeight) - 2px);justify-content:space-between;padding-right:8px;position:relative}.vuuTable-groupHeaderCell-close{--vuu-icon-height: 18px;--vuu-icon-width: 18px;cursor:pointer;left:3px}.vuuTable-groupHeaderCell-col:nth-child(odd){background-color:var(--salt-color-gray-50)}.vuuTable-groupHeaderCell-col:nth-child(even){background-color:var(--salt-color-gray-40)}.vuuTable-groupHeaderCell-col:first-child{clip-path:polygon(0 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,0 100%);padding-left:3px;z-index:1}.vuuTable-groupHeaderCell-col:not(:first-child){margin-left:-6px;padding-left:12px;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,0 100%,8px 50%)}.vuuTable-groupHeaderCell-resizing{--columnResizer-color: var(--salt-color-blue-500);--columnResizer-height: var(--table-height);--columnResizer-width: 2px}.vuuTable-groupHeaderCell-pending{--pending-content: ""}.vuuTable-groupHeaderCell-col:has(+ .vuuColumnResizer):after{content:var(--pending-content);width:24px;height:24px;background-image:var(--svg-spinner);background-repeat:no-repeat;background-size:cover}.vuuSortIndicator{--menu-icon-size: 18px;--menu-item-icon-color: black;display:flex;flex-direction:column;position:relative;width:18px}.vuuSortPosition{font-size:10px;line-height:10px;text-align:center}.vuuTable-heading:nth-child(2){--heading-top: calc(var(--header-height))}.vuuTable-heading:nth-child(3){--heading-top: calc(var(--header-height) * 2)}.vuuTable-heading:nth-child(3){--heading-top: calc(var(--header-height) * 3)}.vuuTable-headingCell{background:var(--dataTable-background);border-color:var(--salt-separable-tertiary-borderColor);border-style:solid solid solid none;border-width:1px;color:var(--salt-text-secondary-foreground);display:inline-block;height:var(--vuuTableHeaderHeight);padding:0!important}.vuuTable-heading:has(+ .vuuTable-heading)>.vuuTable-headingCell{border-bottom-color:transparent}[role=columnHeader]{--vuuTableCell-border-bottomColor: var(--salt-separable-tertiary-borderColor);--cell-align: "flex-start";display:inline-block;text-align:left;background:var(--dataTable-background);border-right:1px solid var(--vuuTableCell-border-rightColor);border-bottom:1px solid var(--vuuTableCell-border-bottomColor);color:var(--salt-text-secondary-foreground);cursor:default;height:var(--vuuTableHeaderHeight);padding:0!important;vertical-align:top}.vuuTable-headerCell-right{--cell-align: flex-end}.vuuTable-headerCell-inner{align-items:stretch;display:flex;height:100%;padding:0 0 0 3px}.vuuTable-headerCell-inner:has(.vuuFilterIndicator){padding-left:0}.vuuTable-headerCell-label{align-items:center;justify-content:var(--cell-align);display:flex;flex:1 1 auto}.vuuTable-headerCell-resizing{--columnResizer-color: var(--salt-color-blue-500);--columnResizer-height: var(--table-height);--columnResizer-width: 2px}[role=headerCell].vuuPinLeft.vuuEndPin:after{box-shadow:2px 0 5px #0006;content:"";position:absolute;width:1px;background-color:transparent;height:var(--table-height);top:0;right:0px}[role=headerCell].vuuPinRight.vuuEndPin:after{box-shadow:-2px 0 5px #0000004d;content:"";position:absolute;width:1px;background-color:transparent;height:var(--table-height);top:0;left:0px}[role=headerCell]:is(.vuuPinLeft,.vuuPinRight,.vuuPinFloating){top:0;z-index:20}.saltDraggable-vuuTable-headerCell{--dataTable-background: ivory;--vuuTableHeaderHeight: 25px}.vuuFilterIndicator{--menu-icon-size: 12px;--menu-item-icon-color: black;align-items:center;cursor:pointer;display:flex;flex:0 0 18px;flex-direction:column;justify-content:center;position:relative}.vuuFilterIndicator+.vuuTable-headerCell-inner{padding-left:0}.vuuTable-table{--vuuTable-rowHeight: var(--row-height);--vuuTableCell-border-bottomColor: transparent;--vuuTableCell-border-rightColor: var(--salt-separable-tertiary-borderColor);border-collapse:separate;border-spacing:0;border-left:1px solid #ccc;border:none;font-size:var(--vuuTable-font-size, 10px);margin:0;min-height:100%;width:var(--content-width)}.vuuTable-headers{position:sticky;top:0;z-index:1}.vuuTable-body{height:var(--content-height);position:relative}.vuuTable{--dataTable-background: var(--salt-container-primary-background, inherit);--row-background-even: var(--dataTable-background);--row-background-odd: var(--dataTable-background);--table-background: var(--dataTable-background, none);background-color:var(--dataTable-background);position:relative}.vuuTable-zebra{--row-background-even: var(--salt-container-secondary-background)}.vuuTable-scrollbarContainer{--scroll-content-width: calc(var(--content-width) - var(--pinned-width-left));border-bottom:none!important;border-top:none!important;border-left:solid 1px var(--salt-container-primary-borderColor);box-shadow:0 -1px 0 0 var(--salt-container-primary-borderColor);height:var(--viewport-body-height);left:var(--pinned-width-left);overflow:auto;position:absolute;top:var(--total-header-height);width:calc(var(--table-width) - var(--pinned-width-left) + 1px)}.vuuTable-scrollbarContent{height:calc(var(--content-height) + var(--horizontal-scrollbar-height));position:absolute;width:var(--scroll-content-width, var(--content-width))}.vuuTable-contentContainer{--vuuTableHeaderHeight: var(--header-height, 30px);background-color:var(--salt-container-primary-background);height:calc(var(--table-height) - var(--horizontal-scrollbar-height));position:relative;overflow:auto;overscroll-behavior:none;width:calc(var(--table-width) - var(--vertical-scrollbar-width))}.vuuTable-contentContainer::-webkit-scrollbar{display:none}:is(.vuuPinLeft,.vuuPinRight,.vuuPinFloating){background-color:inherit;position:sticky;z-index:1}.vuuTable-settings{--saltButton-height: var(--header-height);--saltButton-width: 15px;position:absolute!important;right:0;top:0}.vuuTable:has(.vuuTable-headerCell-resizing) *{cursor:col-resize}.vuuTable-loading .vuuTable-table{--skeleton-height: 20px;--skeleton-width: calc(var(--content-width) - 8px);--skeleton-left: 4px;--skeleton-row-height: 16px;--skeleton-size: var(--skeleton-width) var(--skeleton-height);--skeleton-row: linear-gradient( var(--salt-color-gray-20-fade-background) var(--skeleton-row-height), transparent 0 );--skeleton-background-image: var(--skeleton-row);background-image:var(--skeleton-background-image);background-repeat:repeat-y;background-size:var(--skeleton-size);background-position-x:var(--skeleton-left);background-position-y:27px}.vuuTable-loading .vuuTable-table:after{animation:shimmer 2s infinite;background:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,.2) 20%,rgba(255,255,255,.6) 60%,rgba(255,255,255,0));content:"";height:var(--table-height);left:0px;position:absolute;transform:translate(-100%);top:var(--header-height);width:var(--content-width)}@keyframes shimmer{to{transform:translate(100%)}}.vuuJsonCell-group{align-items:center;display:inline-flex;height:calc(var(--vuuTable-rowHeight) - 1px);width:100%}.vuuJsonCell-toggle{--vuu-icon-color: var(--salt-text-primary-foreground);--vuu-icon-height: calc(var(--vuuTable-rowHeight) - 1px);--vuu-icon-width: 18px;flex-shrink:0;margin-left:auto}.vuuJsonCell-name{font-weight:var(--salt-typography-fontWeight-semiBold)}.vuuJsonCell-value{overflow:hidden;text-overflow:ellipsis}.vuuMenuItem{--vuu-svg-cog: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M12.9533 8.65331C12.98 8.43998 13 8.22665 13 7.99998C13 7.77331 12.98 7.55998 12.9533 7.34665L14.36 6.24665C14.4867 6.14665 14.52 5.96665 14.44 5.81998L13.1067 3.51331C13.0267 3.36665 12.8467 3.31331 12.7 3.36665L11.04 4.03331C10.6933 3.76665 10.32 3.54665 9.91333 3.37998L9.66 1.61331C9.64 1.45331 9.5 1.33331 9.33333 1.33331H6.66667C6.5 1.33331 6.36 1.45331 6.34 1.61331L6.08667 3.37998C5.68 3.54665 5.30667 3.77331 4.96 4.03331L3.3 3.36665C3.14667 3.30665 2.97333 3.36665 2.89333 3.51331L1.56 5.81998C1.47333 5.96665 1.51333 6.14665 1.64 6.24665L3.04667 7.34665C3.02 7.55998 3 7.77998 3 7.99998C3 8.21998 3.02 8.43998 3.04667 8.65331L1.64 9.75331C1.51333 9.85331 1.48 10.0333 1.56 10.18L2.89333 12.4866C2.97333 12.6333 3.15333 12.6866 3.3 12.6333L4.96 11.9666C5.30667 12.2333 5.68 12.4533 6.08667 12.62L6.34 14.3866C6.36 14.5466 6.5 14.6666 6.66667 14.6666H9.33333C9.5 14.6666 9.64 14.5466 9.66 14.3866L9.91333 12.62C10.32 12.4533 10.6933 12.2266 11.04 11.9666L12.7 12.6333C12.8533 12.6933 13.0267 12.6333 13.1067 12.4866L14.44 10.18C14.52 10.0333 14.4867 9.85331 14.36 9.75331L12.9533 8.65331V8.65331ZM8 10.3333C6.71333 10.3333 5.66667 9.28665 5.66667 7.99998C5.66667 6.71331 6.71333 5.66665 8 5.66665C9.28667 5.66665 10.3333 6.71331 10.3333 7.99998C10.3333 9.28665 9.28667 10.3333 8 10.3333Z"/></svg>')}.vuuTable-columnMenu{--vuu-icon-color: #606477;--vuu-icon-height: 20px;--vuu-icon-left: 0px;--vuu-icon-size: 16px;--vuu-icon-top: 0px;--vuu-icon-width: 20px;border-radius:4px;cursor:pointer;display:inline-block;margin-top:2px;padding:2px}.vuuTable-columnMenu:hover{--vuu-icon-color: #15171B;background-color:#f37880}.vuuTable-columnMenu-open:hover,.vuuTable-columnMenu-open{background-color:#6d18bd;--vuu-icon-color: white}[data-icon=cog]{--vuu-icon-svg: var(--vuu-svg-cog);--vuu-icon-size: 14px}.vuuTableNext-col-header{border-bottom:1px solid #ccc;box-sizing:border-box;cursor:default;display:inline-flex;gap:3px;height:var(--header-height);vertical-align:top}.vuuTableNext-col-header .vuuColumnResizer:hover{--columnResizer-color: var(--vuu-color-purple-10)}.vuuTableNext-col-header-label{line-height:calc(var(--header-height) - 1px)}.vuuTableNext-col-header.vuuPinLeft.vuuEndPin .vuuColumnResizer:before{--height: calc(var(--columnResizer-height) - 15px);--inset-r: calc(var(--pin-width) - 2px);--inset-b: calc(var(--height) - 2px);--clip-path: polygon( 0% 0%, 0% 120%, 2px 120%, 2px 2px, var(--inset-r) 2px, var(--inset-r) var(--inset-b), 2px var(--inset-b), 2px 120%, 120% 120%, 120% 0% );background-color:transparent;border-color:var(--vuu-color-gray-40);border-width:1px;border-style:solid solid solid solid;border-radius:4px;box-shadow:2px 1px 4px #0000001a;clip-path:var(--clip-path);content:"";position:absolute;width:var(--pin-width);top:0;bottom:0;right:-1px;height:var(--height);z-index:-5}.vuuTableNext-col-header.vuuPinRight.vuuEndPin .vuuColumnResizer:before{--height: calc(var(--columnResizer-height) - 15px);--inset-r: calc(var(--pin-width) - 2px);--inset-b: calc(var(--height) - 2px);--clip-path: polygon( -20% 0%, -20% 120%, 2px 120%, 2px 2px, var(--inset-r) 2px, var(--inset-r) var(--inset-b), 2px var(--inset-b), 2px 120%, 120% 120%, 120% 0% );background-color:transparent;border-color:#a9aaad;border-width:1px;border-style:solid solid solid solid;border-radius:4px;box-shadow:-2px 1px 4px #0000001a;clip-path:var(--clip-path);content:"";position:absolute;width:var(--pin-width);top:0;bottom:0;right:0px;height:var(--height);z-index:-5}.vuuTableNextRow{background:#fff;border-bottom:1px solid var(--salt-separable-tertiary-borderColor);box-sizing:border-box;height:var(--row-height);line-height:calc(var(--row-height) - 1px);position:absolute;top:0;white-space:nowrap}.vuuTableNextRow-selected,.vuuTableNextRow-selectedEnd{background-color:#ebebec}.vuuTableNextRow-selectedStart{--vuu-selection-decorator-left-radius: 5px 0 0 0;--vuu-selection-decorator-right-radius: 0 5px 0 0;border-radius:5px 5px 0 0}.vuuTableNextRow-selectedEnd{--vuu-selection-decorator-left-radius: 0 0 0 5px;--vuu-selection-decorator-right-radius: 0 0 5px 0;border-radius:0 0 5px 5px}.vuuTableNextRow-selectedStart.vuuTableNexRow-selectedEnd{--vuu-selection-decorator-left-radius: 5px 0 0 5px;--vuu-selection-decorator-right-radius: 0 5px 5px 0;border-radius:5px}.vuuTableNextRow-selectedStart:after{content:"";position:absolute;top:0;left:4px;height:1px;background-color:var(--vuu-color-purple-10);width:calc(var(--content-width) - 8px);z-index:1}.vuuTableNextRow-selectedEnd{border-bottom-color:var(--vuu-color-purple-10)}.vuuTableNextRow-selectionDecorator{background-color:var(--vuu-selection-decorator-bg, inherit);display:inline-block;position:relative;height:var(--row-height);width:4px;z-index:2}.vuuTableNextRow-selectionDecorator.vuuStickyLeft{left:0;position:sticky}.vuuTableNextRow-selectionDecorator.vuuStickyRight{right:0;position:sticky}.vuuTableNextRow-selected{--vuu-selection-decorator-bg: var(--vuu-color-purple-10)}.vuuTableNextRow-selectedStart,.vuuTableNextRow-selectedEnd{--vuu-selection-decorator-bg: white}.vuuTableNextRow-selectedStart .vuuTableNextRow-selectionDecorator:before,.vuuTableNextRow-selectedEnd .vuuTableNextRow-selectionDecorator:before{content:"";inset:0;position:absolute;background-color:var(--vuu-color-purple-10)}.vuuTableNextRow-selectionDecorator.vuuStickyLeft:before{border-radius:var(--vuu-selection-decorator-left-radius, 0)}.vuuTableNextRow-selectionDecorator.vuuStickyRight:before{border-radius:var(--vuu-selection-decorator-right-radius, 0)}.vuuTableNext{--vuu-table-next-selection-bookend-width: 4px;--columnResizer-height: var(--table-height);--columnResizer-color: transparent;--table-background: var(--salt-container-primary-background);height:var(--table-css-height);background-color:red;position:relative;user-select:none;width:var(--table-css-width)}.vuuTableNext-scrollbarContainer{--scroll-content-width: 1100px;border-bottom:none!important;border-top:none!important;border-left:solid 1px var(--salt-container-primary-borderColor);box-shadow:0 -1px 0 0 var(--salt-container-primary-borderColor);height:var(--viewport-body-height);left:0px;overflow:auto;position:absolute;top:var(--total-header-height);width:var(--table-width)}.vuuTableNext-scrollbarContent{height:calc(var(--content-height) + var(--horizontal-scrollbar-height));position:absolute;width:var(--content-width)}.vuuTableNext-contentContainer{background-color:var(--salt-container-primary-background);height:calc(var(--table-height) - var(--horizontal-scrollbar-height));position:relative;overflow:auto;overscroll-behavior:none;width:calc(var(--table-width) - var(--vertical-scrollbar-width))}.vuuTableNext-contentContainer::-webkit-scrollbar{display:none}.vuuTableNext-table{position:absolute;top:0;left:0;table-layout:fixed;width:var(--content-width);margin:0;border:none;background-color:#fff;border-collapse:separate;border-spacing:0}.vuuTableNext-body{height:var(--content-height)}.vuuTableNextCell{display:inline-block;padding:0 8px;vertical-align:top}.vuuPinLeft,.vuuPinRight{background-color:inherit;position:sticky;z-index:1}.vuuTableNext-col-headings{background-color:#fff;padding:0 var(--vuu-table-next-selection-bookend-width, 0);position:sticky;top:0;z-index:1}.vuuTableNext-col-headers{background-color:var(--table-background);white-space:nowrap}.sizer-cell{background-color:green!important;border:none!important;height:0px}
1
+ /* src/table/ColumnResizer.css */
2
+ .vuuColumnResizer {
3
+ background-color: var(--columnResizer-color);
4
+ cursor: col-resize;
5
+ height: var(--header-height);
6
+ position: relative;
7
+ width: 4px;
8
+ }
9
+ .vuuColumnResizer:hover {
10
+ --columnResizer-color: var(--salt-color-blue-500);
11
+ }
12
+ .vuuColumnResizer:after {
13
+ content: "";
14
+ position: absolute;
15
+ width: var(--columnResizer-width, 1px);
16
+ top: 0;
17
+ bottom: 0;
18
+ right: -1px;
19
+ background-color: var(--columnResizer-color, var(--salt-separable-tertiary-borderColor));
20
+ height: var(--columnResizer-height, calc(100% + 1px));
21
+ }
22
+
23
+ /* ../vuu-ui-controls/src/drag-drop/Draggable.css */
24
+ .vuuDraggable {
25
+ background: transparent;
26
+ box-shadow: var(--salt-overlayable-shadow-drag);
27
+ cursor: var(--salt-draggable-grab-cursor-active);
28
+ position: absolute;
29
+ opacity: .95;
30
+ z-index: 2000;
31
+ }
32
+ .vuuDraggable-spacer {
33
+ display: var(--vuuDraggable-display, inline-block);
34
+ height: var(--vuuDraggable-spacer-height, var(--tabstrip-height));
35
+ transition: var(--vuuDraggable-transitionProp, width) 0.3s ease;
36
+ width: var(--vuuDraggable-spacer-width, 0);
37
+ }
38
+ .vuuDraggable-dropIndicatorPosition {
39
+ display: var(--saltDraggable-display, inline-block);
40
+ height: 0px;
41
+ width: 100%;
42
+ }
43
+ .vuuDraggable-dropIndicatorContainer {
44
+ transition: var(--vuuDraggable-transitionProp, top) 0.2s ease;
45
+ }
46
+ .vuuDraggable-dropIndicator {
47
+ background-color: var(--salt-palette-accent-background);
48
+ height: 2px;
49
+ width: 100%;
50
+ }
51
+ .vuuDraggable-dropIndicator:before {
52
+ content: "";
53
+ width: 6px;
54
+ height: 6px;
55
+ border-radius: 3px;
56
+ background-color: var(--salt-palette-accent-background);
57
+ position: absolute;
58
+ top: -2px;
59
+ left: -3px;
60
+ }
61
+ .vuuDraggable-settling {
62
+ transition-property: left, top;
63
+ transition-duration: .15s;
64
+ transition-timing-function: ease-out;
65
+ }
66
+ .vuuDraggable-spacer {
67
+ order: 1;
68
+ }
69
+
70
+ /* ../vuu-ui-controls/src/editable-label/EditableLabel.css */
71
+ .vuuEditableLabel {
72
+ --saltInput-background: transparent;
73
+ --saltInput-minWidth: 14px;
74
+ --saltInput-position: absolute;
75
+ --editableLabel-padding: var(--saltEditableLabel-padding, 6px);
76
+ --editableLabel-height: var(--saltEditableLabel-height, 26px);
77
+ color: inherit;
78
+ cursor: default;
79
+ display: flex;
80
+ flex-direction: column;
81
+ font-size: var(--salt-text-fontSize);
82
+ height: var(--editableLabel-height);
83
+ justify-content: center;
84
+ outline: none;
85
+ padding: 0 var(--editableLabel-padding);
86
+ position: relative;
87
+ z-index: var(--salt-zIndex-default);
88
+ }
89
+ .vuuEditableLabel:before {
90
+ content: attr(data-text);
91
+ display: block;
92
+ height: 0px;
93
+ visibility: hidden;
94
+ white-space: pre-wrap;
95
+ }
96
+ .vuuEditableLabel .saltInput {
97
+ font-weight: var(--salt-text-fontWeight);
98
+ left: var(--editableLabel-padding, 0);
99
+ padding: 0;
100
+ outline-style: none;
101
+ position: absolute;
102
+ right: var(--editableLabel-padding, 0);
103
+ top: var(--saltEditableLabel-top, 2px);
104
+ width: auto;
105
+ }
106
+ .vuuEditableLabel .saltInput-activationIndicator {
107
+ display: none;
108
+ }
109
+ .vuuEditableLabel-input {
110
+ background-color: transparent;
111
+ border: none;
112
+ box-sizing: content-box;
113
+ display: block;
114
+ flex: 1;
115
+ font: inherit;
116
+ height: 20px;
117
+ margin: 0;
118
+ min-width: 0;
119
+ outline: none;
120
+ padding: 0;
121
+ }
122
+
123
+ /* ../vuu-ui-controls/src/list/Highlighter.css */
124
+ .saltHighlighter-highlight {
125
+ font-weight: var(--salt-text-fontWeight-strong);
126
+ }
127
+
128
+ /* ../vuu-ui-controls/src/list/CheckboxIcon.css */
129
+ .vuuCheckboxIcon {
130
+ --vuu-icon-size: 14px;
131
+ --vuu-icon-left: -1px;
132
+ --vuu-icon-top: -1px;
133
+ --vuu-icon-svg: var(--vuu-svg-tick);
134
+ border-style: solid;
135
+ border-color: var(--vuuCheckboxIcon-borderColor, var(--salt-selectable-borderColor));
136
+ border-radius: var(--vuuCheckboxIcon-borderRadius, 3px);
137
+ border-width: 1px;
138
+ display: inline-block;
139
+ height: var(--vuuCheckboxIcon-size, 14px);
140
+ position: relative;
141
+ width: var(--vuuCheckboxIcon-size, 14px);
142
+ }
143
+ .vuuCheckboxIcon-checked {
144
+ background-color: var(--vuuCheckboxIcon-background-checked, var(--salt-selectable-background-selected));
145
+ border-color: var(--vuuCheckboxIcon-borderColor-checked, var(--salt-selectable-borderColor-selected));
146
+ }
147
+ .vuuCheckboxIcon-checked:after {
148
+ content: "";
149
+ background-color: white;
150
+ left: var(--vuu-icon-left, auto);
151
+ height: var(--vuu-icon-height, var(--vuu-icon-size, 12px));
152
+ -webkit-mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);
153
+ mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);
154
+ mask-repeat: no-repeat;
155
+ -webkit-mask-repeat: no-repeat;
156
+ position: absolute;
157
+ top: var(--vuu-icon-top, auto);
158
+ width: var(--vuu-icon-width, var(--vuu-icon-size, 12px));
159
+ }
160
+
161
+ /* ../vuu-ui-controls/src/list/ListItem.css */
162
+ .vuuListItem {
163
+ --list-item-text-color: var(--salt-text-primary-foreground);
164
+ --list-item-background: var(--vuuList-item-background, var(--salt-selectable-background));
165
+ --list-item-text-color-active: var(--salt-text-primary-foreground);
166
+ --list-item-background-active: var(--salt-selectable-background-selected);
167
+ --list-item-alignItems: center;
168
+ }
169
+ .vuuListItem.saltHighlighted {
170
+ --saltCheckbox-icon-stroke: var(--salt-selectable-borderColor-hover);
171
+ --list-item-background: var(--salt-selectable-background-hover);
172
+ }
173
+ .vuuListItemHeader {
174
+ font-weight: var(--salt-text-fontWeight-strong);
175
+ }
176
+ .vuuListItemHeader[data-sticky] {
177
+ position: sticky;
178
+ top: 0;
179
+ z-index: 1;
180
+ }
181
+ .vuuListItem {
182
+ color: var(--list-item-text-color);
183
+ cursor: var(--vuuList-item-cursor, pointer);
184
+ background: var(--vuuList-item-background, var(--list-item-background));
185
+ font-size: var(--salt-text-fontSize);
186
+ text-align: var(--salt-text-textAlign);
187
+ line-height: var(--salt-text-lineHeight);
188
+ height: var(--vuuList-item-height, var(--list-item-height, auto));
189
+ margin-bottom: var(--list-item-gap);
190
+ padding: 0 var(--salt-size-unit);
191
+ left: 0;
192
+ right: 0;
193
+ display: flex;
194
+ position: relative;
195
+ align-items: var(--list-item-alignItems);
196
+ white-space: nowrap;
197
+ }
198
+ .vuuListItem:last-child {
199
+ margin-bottom: 0px;
200
+ }
201
+ .vuuListItem-checkbox {
202
+ --list-item-background-active: var(--salt-selectable-background);
203
+ --list-item-text-color-active: var(--salt-text-primary-foreground);
204
+ --list-item-text-padding: 0 0 0 var(--salt-size-unit);
205
+ }
206
+ .vuuListItem[aria-selected=true]:not(.vuuListItem-checkbox) {
207
+ --list-item-background: var(--list-item-background-active);
208
+ color: var(--list-item-text-color-active);
209
+ }
210
+ .vuuListItem.saltDisabled {
211
+ --list-item-text-color: var(--salt-text-primary-foreground-disabled);
212
+ cursor: var(--salt-selectable-cursor-disabled);
213
+ }
214
+ .vuuListItem.vuuFocusVisible {
215
+ outline-style: var(--salt-focused-outlineStyle);
216
+ outline-width: var(--salt-focused-outlineWidth);
217
+ outline-offset: -2px;
218
+ outline-color: var(--salt-focused-outlineColor);
219
+ }
220
+ .vuuListItem.vuuFocusVisible:after {
221
+ content: none;
222
+ }
223
+ .vuuListItem[aria-selected=true]:not(.vuuListItem-checkbox).vuuFocusVisible {
224
+ outline-color: var(--list-item-selected-focus-outlineColor);
225
+ }
226
+ .vuuListItem-textWrapper {
227
+ flex: 1;
228
+ overflow: hidden;
229
+ padding: var(--list-item-text-padding, 0px);
230
+ white-space: nowrap;
231
+ text-overflow: ellipsis;
232
+ }
233
+ .vuuListItem-proxy {
234
+ position: absolute !important;
235
+ visibility: hidden;
236
+ }
237
+ .vuuDraggable-list-item {
238
+ --vuuList-item-height: 24px;
239
+ background-color: white;
240
+ }
241
+ .vuuListItem.vuuDraggable-dragAway {
242
+ display: none;
243
+ }
244
+
245
+ /* ../vuu-layout/src/dock-layout/Drawer.css */
246
+ .vuuDrawer {
247
+ --drawer-leading-edge-border: solid 1px var(--salt-container-primary-borderColor, none);
248
+ --vuu-close-icon-svg: var(--svg-chevron-double-right);
249
+ transition: flex-basis;
250
+ transition-duration: var(--drawer-transition-duration);
251
+ position: relative;
252
+ z-index: 1;
253
+ flex-basis: 0;
254
+ flex-grow: 1;
255
+ flex-shrink: 1;
256
+ min-width: 0;
257
+ min-height: 0;
258
+ display: flex;
259
+ }
260
+ .vuuDrawer-peekaboo {
261
+ flex-basis: var(--drawer-peek-size);
262
+ flex-grow: 0;
263
+ flex-shrink: 0;
264
+ }
265
+ .vuuDrawer-inline.vuuDrawer-open {
266
+ flex-basis: var(--drawer-size);
267
+ flex-grow: 0;
268
+ flex-shrink: 0;
269
+ }
270
+ .vuuDrawer-liner {
271
+ background-color: var(--drawer-bg);
272
+ overflow: hidden;
273
+ position: relative;
274
+ }
275
+ .vuuDrawer-content {
276
+ height: 100%;
277
+ overflow: hidden;
278
+ position: absolute;
279
+ top: 0;
280
+ right: var(--drawer-peek-size);
281
+ transition: right;
282
+ transition-duration: var(--drawer-transition-duration);
283
+ width: 100%;
284
+ flex: 1 1 100%;
285
+ }
286
+ .vuuDrawer-open .vuuDrawer-content {
287
+ right: 0;
288
+ }
289
+ .vuuDrawer-left {
290
+ border-right: var(--drawer-leading-edge-border);
291
+ }
292
+ .vuuDrawer-right {
293
+ border-left: var(--drawer-leading-edge-border);
294
+ }
295
+ .vuuDrawer-top {
296
+ border-bottom: var(--drawer-leading-edge-border);
297
+ }
298
+ .vuuDrawer-bottom {
299
+ border-top: var(--drawer-leading-edge-border);
300
+ }
301
+ .vuuDrawer-left .vuuDrawer-liner,
302
+ .vuuDrawer-right .vuuDrawer-liner {
303
+ height: 100%;
304
+ transition: width;
305
+ }
306
+ .vuuDrawer-top .vuuDrawer-liner,
307
+ .vuuDrawer-bottom .vuuDrawer-liner {
308
+ width: 100%;
309
+ transition: height;
310
+ }
311
+ .vuuDrawer-inline .vuuDrawer-liner {
312
+ width: 100%;
313
+ height: 100%;
314
+ }
315
+ .vuuDrawer-over .vuuDrawer-liner {
316
+ position: absolute;
317
+ transition-duration: 0.4s;
318
+ }
319
+ .vuuDrawer-over.vuuDrawer-left .vuuDrawer-liner {
320
+ top: 0;
321
+ left: 0;
322
+ width: 0;
323
+ }
324
+ .vuuDrawer-over.vuuDrawer-right .vuuDrawer-liner {
325
+ top: 0;
326
+ right: 0;
327
+ width: 0;
328
+ }
329
+ .vuuDrawer-over.vuuDrawer-top .vuuDrawer-liner {
330
+ height: 0;
331
+ top: 0;
332
+ left: 0;
333
+ }
334
+ .vuuDrawer-over.vuuDrawer-bottom .vuuDrawer-liner {
335
+ bottom: 0;
336
+ height: 0;
337
+ left: 0;
338
+ }
339
+ .vuuDrawer-left.vuuDrawer-over.vuuDrawer-peekaboo .vuuDrawer-liner,
340
+ .vuuDrawer-right.vuuDrawer-over.vuuDrawer-peekaboo .vuuDrawer-liner {
341
+ width: var(--drawer-peek-size);
342
+ }
343
+ .vuuDrawer-top.vuuDrawer-over.vuuDrawer-peekaboo .vuuDrawer-liner,
344
+ .vuuDrawer-bottom.vuuDrawer-over.vuuDrawer-peekaboo .vuuDrawer-liner {
345
+ height: var(--drawer-peek-size);
346
+ }
347
+ .vuuDrawer-left.vuuDrawer-over.vuuDrawer-open .vuuDrawer-liner,
348
+ .vuuDrawer-right.vuuDrawer-over.vuuDrawer-open .vuuDrawer-liner {
349
+ width: var(--drawer-size);
350
+ }
351
+ .vuuDrawer-top.vuuDrawer-over.vuuDrawer-open .vuuDrawer-liner,
352
+ .vuuDrawer-bottom.vuuDrawer-over.vuuDrawer-open .vuuDrawer-liner {
353
+ height: var(--drawer-size);
354
+ }
355
+ .vuuDrawer-top,
356
+ .vuuDrawer-left {
357
+ order: 0;
358
+ }
359
+ .vuuDrawer-bottom,
360
+ .vuuDrawer-right {
361
+ order: 99;
362
+ }
363
+ .vuuDrawer-left,
364
+ .vuuDrawer-right {
365
+ flex-direction: column;
366
+ }
367
+ .vuuToggleButton-container {
368
+ --saltButton-height: 28px;
369
+ --saltButton-width: 28px;
370
+ --vuu-icon-size: 12px;
371
+ flex: 0 0 28px;
372
+ }
373
+ .vuuDrawer-open {
374
+ --vuu-close-icon-svg: var(--svg-chevron-double-left);
375
+ }
376
+
377
+ /* ../vuu-layout/src/dock-layout/DockLayout.css */
378
+ .vuuDockLayout {
379
+ --chest-bg: var(--hw-chest-bg, inherit);
380
+ --drawer-bg: var(--hw-drawer-bg, inherit);
381
+ --drawer-size: var(--hw-drawer-size, 200px);
382
+ --drawer-peek-size: var(--hw-drawer-peek-size, 32px);
383
+ --drawer-transition-duration: var(--hw-drawer-transition-duration, 0.4s);
384
+ background-color: var(--chest-bg);
385
+ display: flex;
386
+ }
387
+ .vuuDockLayout-horizontal {
388
+ flex-direction: row;
389
+ }
390
+ .vuuDockLayout-vertical {
391
+ flex-direction: column;
392
+ }
393
+ .vuuDockLayout-content {
394
+ background-color: var(--chest-bg);
395
+ flex-grow: 1;
396
+ flex-shrink: 1;
397
+ overflow: hidden;
398
+ display: flex;
399
+ align-items: center;
400
+ justify-content: center;
401
+ }
402
+ .vuuDockLayout-horizontal .vuuDockLayout-content {
403
+ flex-basis: 100%;
404
+ }
405
+ .vuuDockLayout-vertical .vuuDockLayout-content {
406
+ flex-basis: 100%;
407
+ }
408
+
409
+ /* ../vuu-layout/src/Component.css */
410
+
411
+ /* ../vuu-layout/src/drag-drop/DropMenu.css */
412
+ .vuuDropMenu {
413
+ margin-left: -50%;
414
+ margin-bottom: -50%;
415
+ background-color: white;
416
+ border: solid 1px var(--grey40);
417
+ display: inline-flex;
418
+ justify-content: center;
419
+ align-items: center;
420
+ padding: 3px;
421
+ border-radius: 3px;
422
+ }
423
+ .vuuDropMenu-left,
424
+ .vuuDropMenu-right {
425
+ flex-direction: column;
426
+ }
427
+ .vuuDropMenu-bottom {
428
+ transform: translate(0, -30px);
429
+ }
430
+ .vuuDropMenu-right {
431
+ transform: translate(-20px, 0);
432
+ }
433
+ .vuuDropMenu-item {
434
+ --vuu-icon-size: 20px;
435
+ width: 32px;
436
+ height: 32px;
437
+ background-color: var(--grey20);
438
+ border-bottom: solid 1px var(--grey40);
439
+ cursor: pointer;
440
+ display: flex;
441
+ align-items: center;
442
+ justify-content: center;
443
+ }
444
+ .vuuDropMenu-item .Icon {
445
+ transform: scale(1.25);
446
+ transform-origin: center center;
447
+ }
448
+ .vuuDropMenu-left .vuuDropMenu-item .hwIcon {
449
+ transform: scale(1.25) rotate(180deg);
450
+ transform-origin: center center;
451
+ }
452
+ .vuuDropMenu-top .vuuDropMenu-item .hwIcon {
453
+ transform: scale(1.25) rotate(270deg);
454
+ transform-origin: center center;
455
+ }
456
+ .vuuDropMenu-bottom .vuuDropMenu-item .hwIcon {
457
+ transform: scale(1.25) rotate(90deg);
458
+ transform-origin: center center;
459
+ }
460
+ .vuuDropMenu-item .hwIcon-path {
461
+ fill: grey;
462
+ }
463
+ .vuuDropMenu-item:hover {
464
+ background-color: rgba(200, 200, 200, 0.5);
465
+ }
466
+ .vuuDropMenu-item:hover .hwIcon-path-2 {
467
+ fill: blue;
468
+ }
469
+ .vuuDropMenu-item:last-child {
470
+ border-bottom: none;
471
+ }
472
+
473
+ /* ../vuu-layout/src/drag-drop/DropTargetRenderer.css */
474
+ #hw-drag-canvas {
475
+ visibility: hidden;
476
+ z-index: 1;
477
+ position: absolute;
478
+ top: 0px;
479
+ left: 0;
480
+ right: 0;
481
+ bottom: 0;
482
+ background-color: transparent;
483
+ }
484
+ #hw-drag-canvas > svg {
485
+ position: absolute;
486
+ }
487
+ .drawing #hw-drag-canvas {
488
+ visibility: visible;
489
+ }
490
+ path.drop-target {
491
+ stroke: blue;
492
+ stroke-width: 4px;
493
+ fill: transparent;
494
+ }
495
+ path.drop-target.centre {
496
+ stroke: red;
497
+ }
498
+ #vuu-drop-outline {
499
+ fill: rgba(0, 0, 255, .3);
500
+ stroke: none;
501
+ stroke-dasharray: 4 2;
502
+ }
503
+ #hw-drop-guides {
504
+ fill: none;
505
+ stroke: rgba(0, 0, 0, 0.3);
506
+ stroke-dasharray: 2 3;
507
+ }
508
+
509
+ /* ../vuu-layout/src/DraggableLayout.css */
510
+ .DraggableLayout {
511
+ display: inline-block;
512
+ outline: none;
513
+ }
514
+ [data-dragging=true] {
515
+ position: absolute !important;
516
+ z-index: 100;
517
+ }
518
+ .vuuSimpleDraggableWrapper {
519
+ background-color: white;
520
+ box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.2);
521
+ }
522
+ .vuuSimpleDraggableWrapper > * {
523
+ height: 100%;
524
+ width: 100%;
525
+ }
526
+
527
+ /* ../vuu-layout/src/placeholder/Placeholder.css */
528
+ .vuuPlaceholder {
529
+ flex-basis: 0;
530
+ flex-grow: 1;
531
+ flex-shrink: 1;
532
+ }
533
+ .vuuPlaceholder-shim {
534
+ flex-grow: 0;
535
+ flex-shrink: 0;
536
+ }
537
+
538
+ /* ../vuu-layout/src/flexbox/Splitter.css */
539
+ .Splitter {
540
+ --splitter-size: 3px;
541
+ --splitter-border-width: 4px;
542
+ --splitter-border-style: none;
543
+ --splitter-border-color: white;
544
+ align-items: center;
545
+ background-color: var(--salt-palette-neutral-secondary-separator);
546
+ border-color: var(--splitter-border-color);
547
+ border-style: var(--splitter-border-style);
548
+ box-sizing: border-box;
549
+ display: flex;
550
+ justify-content: center;
551
+ position: relative;
552
+ outline: none;
553
+ z-index: 1;
554
+ }
555
+ .Splitter:hover {
556
+ background-color: var(--salt-palette-neutral-primary-separator);
557
+ }
558
+ .active.Splitter {
559
+ background-color: var(--salt-palette-interact-outline);
560
+ }
561
+ .Splitter.column {
562
+ cursor: ns-resize;
563
+ height: var(--splitter-size);
564
+ border-width: var(--splitter-border-width) 0;
565
+ }
566
+ .Splitter:not(.column) {
567
+ cursor: ew-resize;
568
+ width: var(--splitter-size);
569
+ border-width: 0 var(--splitter-border-width);
570
+ }
571
+ .Splitter:before {
572
+ border: none;
573
+ border-radius: 0;
574
+ content: "";
575
+ display: block;
576
+ padding: 0;
577
+ }
578
+ .Splitter .grab-zone {
579
+ position: absolute;
580
+ background-color: rgba(255, 0, 0, 0.01);
581
+ cursor: inherit;
582
+ }
583
+ .Splitter.column .grab-zone {
584
+ left: 0;
585
+ right: 0;
586
+ top: -5px;
587
+ bottom: -5px;
588
+ }
589
+ .Splitter:not(.column) .grab-zone {
590
+ left: -5px;
591
+ right: -5px;
592
+ top: 0;
593
+ bottom: 0;
594
+ }
595
+ .active.Splitter:not(.column) .grab-zone {
596
+ background-color: rgba(255, 255, 255, .05);
597
+ left: -150px;
598
+ right: -150px;
599
+ }
600
+ .Splitter:not(.column):before {
601
+ width: 1px;
602
+ height: 10px;
603
+ background: linear-gradient(to bottom, var(--grey900) 10%, transparent 10%, transparent 30%, var(--grey900) 30%, var(--grey900) 40%, transparent 40%, transparent 60%, var(--grey900) 60%, var(--grey900) 70%, transparent 70%, transparent 90%, var(--grey900) 90%);
604
+ }
605
+ .active.Splitter.column:before {
606
+ background: linear-gradient(to right, #ffffff 10%, transparent 10%, transparent 30%, #ffffff 30%, #ffffff 40%, transparent 40%, transparent 60%, #ffffff 60%, #ffffff 70%, transparent 70%, transparent 90%, #ffffff 90%);
607
+ }
608
+ .active.Splitter:not(.column):before {
609
+ background: linear-gradient(to bottom, #ffffff 10%, transparent 10%, transparent 30%, #ffffff 30%, #ffffff 40%, transparent 40%, transparent 60%, #ffffff 60%, #ffffff 70%, transparent 70%, transparent 90%, #ffffff 90%);
610
+ }
611
+ .Splitter.column:before {
612
+ width: 10px;
613
+ height: 1px;
614
+ background: linear-gradient(to right, var(--grey900) 10%, transparent 10%, transparent 30%, var(--grey900) 30%, var(--grey900) 40%, transparent 40%, transparent 60%, var(--grey900) 60%, var(--grey900) 70%, transparent 70%, transparent 90%, var(--grey900) 90%);
615
+ }
616
+
617
+ /* ../vuu-layout/src/flexbox/Flexbox.css */
618
+ :root {
619
+ --hw-space-unit: 4px;
620
+ --hw-flex-gap: 3;
621
+ --hw-fluid-grid-col-bg: rgba(200, 200, 200, 0.3);
622
+ }
623
+ .hwFlexbox {
624
+ background-color: var(--container1-background);
625
+ box-sizing: border-box;
626
+ display: flex;
627
+ gap: calc(var(--spacing) * var(--space));
628
+ min-height: 0;
629
+ min-width: 0;
630
+ overflow: hidden;
631
+ }
632
+ .hwFlexbox-column {
633
+ flex-direction: column;
634
+ }
635
+ .hwFlexbox-row {
636
+ flex-direction: row;
637
+ }
638
+ .hwFlexbox > .Splitter {
639
+ flex-basis: auto;
640
+ flex-grow: 0;
641
+ flex-shrink: 0;
642
+ }
643
+ .hwFlexbox.full-page {
644
+ height: 100vh;
645
+ width: 100vw;
646
+ }
647
+ .flex-fill {
648
+ border-color: red;
649
+ flex: 0;
650
+ flex-grow: 1;
651
+ flex-shrink: 1;
652
+ }
653
+ .vuuView.flex-fill {
654
+ border-color: red;
655
+ }
656
+
657
+ /* ../vuu-layout/src/flexbox/FluidGrid.css */
658
+ :root {
659
+ --hw-space-unit: 4px;
660
+ --hw-fluid-grid-col-bg: rgba(252, 209, 232, 0.7);
661
+ }
662
+ .hwFluidGrid {
663
+ --gap: var(--gutter-width);
664
+ display: flex;
665
+ gap: calc(var(--grid-gap) * var(--hw-space-unit));
666
+ flex-wrap: wrap;
667
+ padding: 0;
668
+ }
669
+ .hwFluidGrid > * {
670
+ --gutter-width: calc(var(--hw-flex-gap) * var(--hw-space-unit));
671
+ --gutter-count: calc(var(--parent-col-count) - 1);
672
+ --total-gutter-width: calc(var(--gutter-count) * var(--gutter-width));
673
+ --available-width: calc(100% - var(--total-gutter-width));
674
+ flex-basis: 0;
675
+ flex-grow: 1;
676
+ flex-shrink: 1;
677
+ position: relative;
678
+ }
679
+ .hwFluidGrid > *:after {
680
+ content: "";
681
+ position: absolute;
682
+ top: 0;
683
+ left: 0;
684
+ right: 0;
685
+ bottom: 0;
686
+ border: dashed 2px blue;
687
+ }
688
+ .hwFluidGrid > [data-xs] {
689
+ --internal-gutter-count: calc(var(--col-span) - 1);
690
+ --percent-width: calc(var(--col-span) / var(--parent-col-count));
691
+ --internal-gutter-width: calc(var(--internal-gutter-count) * var(--gutter-width));
692
+ flex-basis: calc(var(--available-width) * var(--percent-width) + var(--internal-gutter-width));
693
+ flex-grow: 0;
694
+ }
695
+ .hwFluidGrid > [data-xs="1"] {
696
+ --col-span: 1;
697
+ }
698
+ .hwFluidGrid > [data-xs="2"] {
699
+ --col-span: 2;
700
+ }
701
+ .hwFluidGrid > [data-xs="3"] {
702
+ --col-span: 3;
703
+ }
704
+ .hwFluidGrid > [data-xs="4"] {
705
+ --col-span: 4;
706
+ }
707
+ .hwFluidGrid > [data-xs="6"] {
708
+ --col-span: 6;
709
+ }
710
+ .hwFluidGrid > [data-xs="8"] {
711
+ --col-span: 8;
712
+ }
713
+ .hwFluidGrid > [data-xs="9"] {
714
+ --col-span: 9;
715
+ }
716
+ .hwFluidGrid > [data-xs="10"] {
717
+ --col-span: 10;
718
+ }
719
+ .hwFluidGrid > [data-xs="11"] {
720
+ --col-span: 11;
721
+ }
722
+ .hwFluidGrid > [data-xs="12"] {
723
+ --col-span: 12;
724
+ }
725
+ @media (min-width: 600px) {
726
+ .hwFluidGrid > [data-sm="1"] {
727
+ --col-span: 1;
728
+ }
729
+ .hwFluidGrid > [data-sm="2"] {
730
+ --col-span: 2;
731
+ }
732
+ .hwFluidGrid > [data-sm="3"] {
733
+ --col-span: 3;
734
+ }
735
+ .hwFluidGrid > [data-sm="4"] {
736
+ --col-span: 4;
737
+ }
738
+ .hwFluidGrid > [data-sm="6"] {
739
+ --col-span: 6;
740
+ }
741
+ .hwFluidGrid > [data-sm="8"] {
742
+ --col-span: 8;
743
+ }
744
+ .hwFluidGrid > [data-sm="9"] {
745
+ --col-span: 9;
746
+ }
747
+ .hwFluidGrid > [data-sm="10"] {
748
+ --col-span: 10;
749
+ }
750
+ .hwFluidGrid > [data-sm="11"] {
751
+ --col-span: 11;
752
+ }
753
+ .hwFluidGrid > [data-sm="12"] {
754
+ --col-span: 12;
755
+ }
756
+ }
757
+ .hwFluidGrid-show-grid {
758
+ --gutter-width: calc(var(--hw-flex-gap) * var(--hw-space-unit));
759
+ --grid-gutter-count: calc(var(--grid-col-count, var(--parent-col-count)) - 1);
760
+ --grid-total-gutter-width: calc(var(--grid-gutter-count) * var(--gutter-width));
761
+ --grid-available-width: calc(100% - var(--grid-total-gutter-width));
762
+ --grid-percent-width: calc(1 / var(--grid-col-count, var(--parent-col-count)));
763
+ --column-width: calc(var(--grid-available-width) * var(--grid-percent-width));
764
+ background: repeating-linear-gradient(to right, var(--hw-fluid-grid-col-bg) 0, var(--hw-fluid-grid-col-bg) var(--column-width), white var(--column-width), white calc(var(--column-width) + var(--gutter-width)));
765
+ }
766
+
767
+ /* ../vuu-layout/src/layout-view/View.css */
768
+ .vuuView {
769
+ border-color: var(--vuuView-borderColor, var(--salt-container-primary-borderColor));
770
+ border-width: var(--vuuView-borderWidth, 1px);
771
+ border-style: var(--vuuView-borderStyle, none);
772
+ display: flex;
773
+ flex-direction: column;
774
+ margin: var(--vuuView-margin, 0px);
775
+ min-height: 50px;
776
+ min-width: 50px;
777
+ outline: none;
778
+ overflow: hidden;
779
+ position: relative;
780
+ }
781
+ .vuuView.focus-visible:after {
782
+ content: "";
783
+ position: absolute;
784
+ top: 0;
785
+ left: 0;
786
+ right: 0;
787
+ bottom: 0;
788
+ border: dotted cornflowerblue 2px;
789
+ }
790
+ .vuuView.dragging {
791
+ box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
792
+ }
793
+ .vuuView-main {
794
+ display: flex;
795
+ flex-direction: var(--vuuView-flexDirection, column);
796
+ flex-wrap: var(--vuuView-flex-wrap, nowrap);
797
+ flex: 1;
798
+ overflow: hidden;
799
+ position: relative;
800
+ }
801
+ .vuuView-main > * {
802
+ flex-basis: auto;
803
+ flex-grow: var(--vuuView-flex-grow, 1);
804
+ flex-shrink: var(--vuuView-flex-shrink, 1);
805
+ }
806
+ .vuuView-collapsed .vuuView-main {
807
+ display: none;
808
+ }
809
+ .vuuView-collapsed + .Splitter {
810
+ display: none;
811
+ }
812
+ .vuuView-collapsed .Toolbar-vertical {
813
+ border-right: solid 1px var(--grey40);
814
+ }
815
+ .vuuView-collapsed .Toolbar-vertical .toolbar-title {
816
+ display: none;
817
+ }
818
+
819
+ /* ../vuu-layout/src/layout-header/Header.css */
820
+ .vuuHeader {
821
+ --saltButton-height: 24px;
822
+ --saltButton-width: 24px;
823
+ }
824
+ .salt-density-high .vuuHeader {
825
+ --saltToolbarField-marginTop: 0;
826
+ }
827
+
828
+ /* ../vuu-layout/src/overflow-container/OverflowContainer.css */
829
+ .vuuOverflowContainer {
830
+ --item-gap: 4px;
831
+ --overflow-direction: row;
832
+ --overflow-width: 0px;
833
+ --overflow-order: 99;
834
+ --border-size: calc((var(--overflow-container-height) - 24px) / 2);
835
+ background-color: var(--vuuOverflowContainer-background, black);
836
+ height: var(--overflow-container-height);
837
+ }
838
+ .vuuOverflowContainer-horizontal {
839
+ --item-align: center;
840
+ --item-margin: 0 0 0 var(--item-gap);
841
+ }
842
+ .vuuOverflowContainer-vertical {
843
+ --item-align: stretch;
844
+ --item-margin: var(--item-gap) 0 0 0;
845
+ --overflow-direction: column;
846
+ }
847
+ .vuuOverflowContainer-wrapContainer {
848
+ align-items: var(--item-align);
849
+ display: flex;
850
+ flex-direction: var(--overflow-direction);
851
+ flex-wrap: wrap;
852
+ height: var(--overflow-container-height);
853
+ min-width: 44px;
854
+ overflow: hidden;
855
+ position: relative;
856
+ width: 100%;
857
+ }
858
+ .vuuOverflowContainer-wrapContainer.overflowed {
859
+ --overflow-order: 2;
860
+ --overflow-left: auto;
861
+ --overflow-position: relative;
862
+ --overflow-width: auto;
863
+ }
864
+ .vuuOverflowContainer-item:first-child {
865
+ --item-gap: 0;
866
+ }
867
+ .vuuOverflowContainer-item:first-child {
868
+ --item-margin: 0;
869
+ }
870
+ .vuuOverflowContainer-item {
871
+ align-items: inherit;
872
+ display: flex;
873
+ order: 1;
874
+ position: relative;
875
+ height: var(--overflow-container-height);
876
+ margin: var(--item-margin);
877
+ }
878
+ .vuuOverflowContainer-item.wrapped {
879
+ --overflow-item-bg: #ccc;
880
+ order: 3;
881
+ }
882
+ .vuuOverflowContainer-item:has(.vuuDraggable-dragAway) {
883
+ display: none;
884
+ }
885
+ .vuuOverflowContainer-item.vuuDropTarget-settling {
886
+ visibility: hidden;
887
+ }
888
+ .vuuOverflowContainer-OverflowIndicator {
889
+ align-items: center;
890
+ background-color: transparent;
891
+ display: flex;
892
+ height: var(--overflow-container-height);
893
+ height: var(--overflow-container-height);
894
+ order: var(--overflow-order);
895
+ overflow: hidden;
896
+ left: var(--overflow-left, 100%);
897
+ position: var(--overflow-position, absolute);
898
+ width: var(--overflow-width);
899
+ }
900
+
901
+ /* ../vuu-layout/src/palette/Palette.css */
902
+ .vuuPalette-horizontal {
903
+ align-items: center;
904
+ display: flex;
905
+ }
906
+ .vuuPaletteItem {
907
+ --vuu-icon-color: var(--salt-separable-primary-borderColor);
908
+ --vuu-icon-inset: calc(50% - 12px) auto auto -3px;
909
+ --vuu-icon-height: 24px;
910
+ --vuu-icon-width: 24px;
911
+ --list-item-text-padding: 0 0 0 calc(var(--salt-size-unit) * 3);
912
+ }
913
+ .vuuPaletteItem[data-draggable]:after {
914
+ height: 22px;
915
+ width: 6px;
916
+ content: "";
917
+ position: absolute;
918
+ background-image:
919
+ linear-gradient(45deg, rgb(180, 183, 190) 25%, transparent 25%),
920
+ linear-gradient(-45deg, rgb(180, 183, 190) 25%, transparent 25%),
921
+ linear-gradient(45deg, transparent 75%, rgb(180, 183, 190) 25%),
922
+ linear-gradient(-45deg, transparent 75%, rgb(180, 183, 190) 25%);
923
+ background-size: 4px 4px;
924
+ background-position:
925
+ 0 0,
926
+ 2px 0,
927
+ 2px -2px,
928
+ 0 2px;
929
+ }
930
+ .vuuSimpleDraggableWrapper > .vuuPaletteItem {
931
+ --vuu-icon-color: var(--salt-selectable-foreground);
932
+ }
933
+
934
+ /* ../vuu-layout/src/stack/Stack.css */
935
+ .Tabs {
936
+ display: flex;
937
+ box-sizing: border-box;
938
+ flex-direction: column;
939
+ }
940
+ .Tabs-horizontal {
941
+ --vuu-tabs-border-style: none solid none none;
942
+ flex-direction: row;
943
+ }
944
+ .Tabs .Toolbar:before {
945
+ left: 0;
946
+ width: 100%;
947
+ bottom: 0;
948
+ height: 1px;
949
+ content: "";
950
+ position: absolute;
951
+ background: var(--grey60);
952
+ }
953
+ .vuuTabHeader {
954
+ --saltTabs-activationIndicator-background: transparent;
955
+ --saltToolbarField-marginTop: calc(var(--salt-size-unit) - 1px);
956
+ border-color: var(--salt-container-primary-borderColor);
957
+ border-style: var(--vuu-tabs-border-style, none none solid none);
958
+ border-width: 1px;
959
+ }
960
+ .vuuTabHeader + .hwFlexbox,
961
+ .vuuTabHeader + * {
962
+ flex: 1;
963
+ }
964
+ .vuuTabHeader + .vuuView > .vuuHeader {
965
+ height: 0;
966
+ overflow: hidden;
967
+ }
968
+ .Layout-svg-button {
969
+ --spacing-medium: 5px;
970
+ }
971
+
972
+ /* ../vuu-layout/src/tools/devtools-box/layout-configurator.css */
973
+ [data-design-mode=true] .Component {
974
+ filter: grayscale(100%);
975
+ opacity: 0.4;
976
+ }
977
+ [data-design-mode=true] .Component:after {
978
+ color: black;
979
+ content: "Component";
980
+ height: 12px;
981
+ background-color: yellow;
982
+ }
983
+ .LayoutConfigurator {
984
+ --margin-color: #f3cea5;
985
+ --border-color: #fddda0;
986
+ --padding-color: #c6d092;
987
+ --content-color: #8cb6c0;
988
+ display: flex;
989
+ flex-direction: column;
990
+ align-items: stretch;
991
+ background-color: var(--margin-color);
992
+ }
993
+ .LayoutConfigurator .layout-outer {
994
+ flex: 1 1 auto;
995
+ display: flex;
996
+ flex-direction: column;
997
+ align-items: stretch;
998
+ }
999
+ .LayoutBox {
1000
+ --hw-control-font-size: 13px;
1001
+ --hw-text-input-bg: rgba(255, 255, 255, 0.3);
1002
+ --hwTextInput-padding: 3px;
1003
+ --hw-text-input-position: absolute;
1004
+ --hwTextInput-width: 30px;
1005
+ flex: 1 1 auto;
1006
+ }
1007
+ .LayoutBox > .layout-top {
1008
+ flex: 0 0 40px;
1009
+ padding-left: 12px;
1010
+ display: flex;
1011
+ flex-direction: row;
1012
+ align-items: center;
1013
+ position: relative;
1014
+ }
1015
+ .LayoutBox > .layout-bottom {
1016
+ flex: 0 0 40px;
1017
+ position: relative;
1018
+ display: flex;
1019
+ flex-direction: row;
1020
+ align-items: center;
1021
+ }
1022
+ .LayoutBox > .layout-inner > .layout-right,
1023
+ .LayoutBox > .layout-inner > .layout-left {
1024
+ flex: 0 0 40px;
1025
+ display: flex;
1026
+ flex-direction: column;
1027
+ justify-content: center;
1028
+ align-items: center;
1029
+ }
1030
+ .layout-top,
1031
+ .layout-bottom {
1032
+ --hw-text-input-margin: 0 0 0 -15px;
1033
+ }
1034
+ .layout-top > .layout-input,
1035
+ .layout-bottom > .layout-input {
1036
+ left: 50%;
1037
+ }
1038
+ .LayoutBox > .layout-inner {
1039
+ flex: 1 1 auto;
1040
+ display: flex;
1041
+ flex-direction: row;
1042
+ align-items: stretch;
1043
+ }
1044
+ .LayoutBox.layout-margin {
1045
+ background-color: var(--margin-color);
1046
+ border: dashed 2px black;
1047
+ }
1048
+ .LayoutBox.layout-border {
1049
+ background-color: var(--border-color);
1050
+ border: solid 2px black;
1051
+ }
1052
+ .LayoutBox.layout-padding {
1053
+ background-color: var(--padding-color);
1054
+ border: dashed 2px black;
1055
+ }
1056
+ .LayoutBox .layout-content {
1057
+ flex: 1 1 auto;
1058
+ background-color: var(--content-color);
1059
+ border: solid 2px #808080;
1060
+ }
1061
+ .LayoutBox .layout-title {
1062
+ color: #161616;
1063
+ font-size: 11px;
1064
+ left: 4px;
1065
+ line-height: 15px;
1066
+ position: absolute;
1067
+ top: 1px;
1068
+ }
1069
+
1070
+ /* ../vuu-layout/src/tools/devtools-tree/layout-tree-viewer.css */
1071
+ .hwLayoutTreeViewer {
1072
+ }
1073
+ .hwLayoutTreeNode {
1074
+ cursor: default;
1075
+ }
1076
+ .hwLayoutTreeNode:hover {
1077
+ background-color: rgba(255, 255, 255, 0.2);
1078
+ }
1079
+ .hwLayoutTreeNode[aria-selected=true] {
1080
+ background-color: cornflowerblue;
1081
+ color: white;
1082
+ }
1083
+
1084
+ /* ../vuu-ui-controls/src/list/List.css */
1085
+ .vuuList {
1086
+ --list-background: var(--salt-container-primary-background);
1087
+ --list-borderStyle: var(--vuuList-borderStyle,--salt-container-borderStyle);
1088
+ --list-borderWidth: var(--salt-size-border);
1089
+ --list-height: auto;
1090
+ --list-item-height: var(--salt-size-stackable);
1091
+ --list-item-gap: 0px;
1092
+ --list-maxHeight: 100%;
1093
+ --vuuDraggable-display: block;
1094
+ --vuuDraggable-spacer-height: 0;
1095
+ --vuuDraggable-spacer-width: 100%;
1096
+ --vuuDraggable-transitionProp: height;
1097
+ background: var(--list-background);
1098
+ border-color: var(--salt-container-primary-borderColor);
1099
+ border-style: var(--list-borderStyle);
1100
+ border-width: var(--list-borderWidth);
1101
+ height: var(--saltList-height, var(--list-height));
1102
+ max-height: var(--list-maxHeight);
1103
+ outline: none;
1104
+ overflow-y: auto;
1105
+ position: relative;
1106
+ user-select: none;
1107
+ width: var(--saltList-width, auto);
1108
+ }
1109
+ .vuuList-borderless {
1110
+ --list-borderStyle: none;
1111
+ }
1112
+ .vuuList-viewport {
1113
+ --list-item-height: 30px;
1114
+ max-height: calc(var(--list-maxHeight) - 2 * var(--list-borderWidth));
1115
+ overflow: auto;
1116
+ }
1117
+ .vuuListItemHeader {
1118
+ --saltList-item-background: var(--list-item-header-background);
1119
+ color: var(--list-item-header-color);
1120
+ }
1121
+ .vuuListItemHeader[data-sticky=true] {
1122
+ --saltList-item-background: var(--list-background);
1123
+ position: sticky;
1124
+ top: 0;
1125
+ z-index: 1;
1126
+ }
1127
+ .vuuList-collapsible .vuuListItemHeader:after {
1128
+ border-width: var(--checkbox-borderWidth);
1129
+ border-color: var(--checkbox-borderColor);
1130
+ content: var(--list-item-header-twisty-content);
1131
+ -webkit-mask: var(--list-svg-chevron-down) center center/12px 12px no-repeat;
1132
+ mask: var(--list-svg-chevron-down) center center/12px 12px no-repeat;
1133
+ background: var(--list-item-header-twisty-color);
1134
+ height: 12px;
1135
+ left: var(--list-item-header-twisty-left);
1136
+ right: var(--list-item-header-twisty-right);
1137
+ margin-top: -8px;
1138
+ position: absolute;
1139
+ top: var(--list-item-header-twisty-top);
1140
+ transition: transform 0.3s;
1141
+ width: 12px;
1142
+ }
1143
+ .vuuListItemHeader[aria-expanded=false]:after {
1144
+ transform: rotate(-90deg);
1145
+ }
1146
+ .vuuList-scrollingContentContainer {
1147
+ box-sizing: inherit;
1148
+ position: relative;
1149
+ }
1150
+ .vuuList-virtualized .vuuListItem {
1151
+ line-height: 30px;
1152
+ position: absolute;
1153
+ top: 0;
1154
+ left: 0;
1155
+ right: 0;
1156
+ will-change: transform;
1157
+ }
1158
+ .vuuList.saltFocusVisible:after {
1159
+ inset: 2px;
1160
+ }
1161
+
1162
+ /* ../vuu-ui-controls/src/tabstrip/Tabstrip.css */
1163
+ .vuuTabstrip {
1164
+ --vuuOverflowContainer-background: transparent;
1165
+ --tabstrip-dragging-display: none;
1166
+ --tabstrip-display: inline-flex;
1167
+ --tabstrip-background: transparent;
1168
+ align-self: var(--saltTabs-tabstrip-alignSelf, stretch);
1169
+ font-size: var(--salt-text-fontSize);
1170
+ font-weight: var(--vuuTabstrip-fontWeight, var(--salt-text-fontWeight));
1171
+ position: relative;
1172
+ overflow: visible;
1173
+ display: flex;
1174
+ min-width: 28px;
1175
+ width: var(--tabstrip-width);
1176
+ }
1177
+ .vuuTabstrip-horizontal {
1178
+ --tabstrip-height: var(--vuuTabstrip-height, 28px);
1179
+ --tabstrip-width: var(--vuuTabstrip-width, 100%);
1180
+ --tab-width: auto;
1181
+ --tab-thumb-height: 2px;
1182
+ --tab-thumb-left: var(--tab-thumb-offset, 0);
1183
+ --tab-thumb-top: auto;
1184
+ --tab-thumb-width: var(--tab-thumb-size, 100%);
1185
+ align-items: flex-start;
1186
+ border-bottom: var(--vuuTabstrip-borderBottom, solid 1px var(--salt-container-primary-borderColor));
1187
+ }
1188
+ .vuuTabstrip-vertical {
1189
+ --tabstrip-height: var(--vuuTabstrip-height, 100%);
1190
+ --tabstrip-width: var(--vuuTabstrip-width, 100px);
1191
+ --tab-width: 100%;
1192
+ --tab-thumb-height: var(--tab-thumb-size, 100%);
1193
+ --tab-thumb-left: 0;
1194
+ --tab-thumb-top: var(--tab-thumb-offset, 0);
1195
+ --tab-thumb-width: 2px;
1196
+ align-self: flex-start;
1197
+ display: inline-flex;
1198
+ }
1199
+ .vuuTabstrip-draggingTab .vuuTab {
1200
+ pointer-events: none;
1201
+ }
1202
+ .vuuTabstrip-addTabButton {
1203
+ --saltButton-height: 20px;
1204
+ --saltButton-width: 20px;
1205
+ }
1206
+ .vuuTabstrip-overflowMenu.saltDropdown {
1207
+ --saltIcon-margin: 2px 0 0 0px;
1208
+ }
1209
+ .vuuTabstrip-overflowMenu-open {
1210
+ --saltButton-background: var(--salt-actionable-secondary-background-active);
1211
+ --saltButton-text-color: var(--salt-actionable-secondary-text-color-active);
1212
+ }
1213
+ .vuuTabstrip-overflowMenu-open .saltButton {
1214
+ --saltIcon-color: var(--salt-actionable-secondary-foreground-active);
1215
+ }
1216
+ .vuuTabstrip-inner {
1217
+ width: 100%;
1218
+ align-items: center;
1219
+ display: flex;
1220
+ flex-basis: auto;
1221
+ flex-grow: 0;
1222
+ flex-shrink: 1;
1223
+ flex-wrap: wrap;
1224
+ justify-content: flex-start;
1225
+ line-height: var(--tabstrip-height);
1226
+ }
1227
+ .vuuTabstrip-vertical .vuuTabstrip-inner {
1228
+ flex-direction: column;
1229
+ height: auto;
1230
+ }
1231
+ .vuuTabstrip-centered .vuuTabstrip-inner {
1232
+ justify-content: center;
1233
+ }
1234
+ .vuuDraggable[class*=vuuTabstrip] {
1235
+ --tabstrip-display: flex;
1236
+ --tabstrip-height: 100%;
1237
+ --tabstrip-dragging-display: block;
1238
+ --tabs-tab-background: var(--salt-navigable-primary-background-hover);
1239
+ --tabs-tab-before-content: "";
1240
+ --tabs-tab-before-background: var(--salt-navigable-indicator-hover);
1241
+ --tabs-tab-before-height: var(--tab-activationIndicator-thumb-height);
1242
+ --tabs-tab-before-inset: var(--tab-activationIndicator-inset);
1243
+ --tabs-tab-before-width: var(--tab-activationIndicator-thumb-width);
1244
+ --tabs-tab-cursor: var(--salt-draggable-grab-cursor-active);
1245
+ --tabs-tab-position: static;
1246
+ font-size: 12px;
1247
+ }
1248
+ .vuuDraggable-tabstrip-horizontal {
1249
+ --tab-thumb-height: 2px;
1250
+ --tab-thumb-left: 0px;
1251
+ --tabstrip-height: 28px;
1252
+ line-height: var(--tabstrip-height);
1253
+ }
1254
+ .vuuDraggable[class*=tabstrip] .vuuTab[aria-selected=true]:before {
1255
+ --tabs-tab-before-background: var(--salt-navigable-indicator-active);
1256
+ }
1257
+ .vuuTabstrip-overflowMenu-dropTarget:after {
1258
+ background: var(--salt-selectable-background-selected);
1259
+ content: "";
1260
+ position: absolute;
1261
+ height: 2px;
1262
+ left: 0;
1263
+ right: 0;
1264
+ bottom: 0;
1265
+ }
1266
+
1267
+ /* ../vuu-ui-controls/src/tabstrip/TabMenu.css */
1268
+ .vuuTabMenu {
1269
+ top: -2px;
1270
+ }
1271
+
1272
+ /* ../vuu-ui-controls/src/tabstrip/Tab.css */
1273
+ .vuuTab {
1274
+ --saltEditableLabel-padding: 0;
1275
+ --saltEditableLabel-height: var(--tabstrip-height);
1276
+ --saltInputLegacy-minWidth: 4em;
1277
+ --saltEditableLabel-top: 3px;
1278
+ --tab-background: var(--vuuTab-background, var(--salt-navigable-primary-background));
1279
+ --tab-cursor: pointer;
1280
+ --tab-position: relative;
1281
+ }
1282
+ .vuuTab {
1283
+ align-items: center;
1284
+ align-self: stretch;
1285
+ background: var(--tab-background);
1286
+ border: none;
1287
+ border-radius: var(--vuuTab-borderRadius, 0);
1288
+ color: var(--salt-text-primary-foreground);
1289
+ cursor: var(--vuuTab-cursor, var(--tab-cursor));
1290
+ display: var(--tabstrip-display);
1291
+ gap: 8px;
1292
+ height: var(--vuuTab-height, var(--tabstrip-height));
1293
+ letter-spacing: var(--vuuTab-letterSpacing, var(--tab-letterSpacing, 0));
1294
+ min-width: var(--vuuTab-minWidth, 40px);
1295
+ outline: none;
1296
+ padding: var(--vuuTab-padding, 0 24px);
1297
+ position: var(--vuuTab-position, var(--tab-position));
1298
+ user-select: none;
1299
+ width: var(--tab-width);
1300
+ }
1301
+ .vuuTab {
1302
+ margin: 0 var(--tab-spacing) 0 0;
1303
+ }
1304
+ .vuuTab-selected {
1305
+ background: var(--vuuTab-background-selected, var(--tab-background));
1306
+ color: var(--salt-text-primary-foreground);
1307
+ font-weight: var(--salt-navigable-fontWeight-active);
1308
+ }
1309
+ .vuuTab-main {
1310
+ align-items: center;
1311
+ border: none;
1312
+ color: inherit;
1313
+ cursor: inherit;
1314
+ display: flex;
1315
+ font-family: inherit;
1316
+ font-size: inherit;
1317
+ font-weight: inherit;
1318
+ height: var(--vuuTabstrip-height, var(--salt-size-stackable));
1319
+ outline: none;
1320
+ position: relative;
1321
+ }
1322
+ .vuuTab-closeable .vuuTab-main {
1323
+ border-right: solid transparent var(--salt-size-unit);
1324
+ }
1325
+ .vuuTab .vuuTab-closeButton {
1326
+ display: flex;
1327
+ align-items: center;
1328
+ justify-content: center;
1329
+ }
1330
+ .vuuTab-close-icon {
1331
+ display: none;
1332
+ }
1333
+ .salt-density-touch .vuuTab-close-icon,
1334
+ .salt-density-low .vuuTab-close-icon {
1335
+ display: block;
1336
+ }
1337
+ .salt-density-touch .vuuTab-close-icon-small,
1338
+ .salt-density-low .vuuTab-close-icon-small {
1339
+ display: none;
1340
+ }
1341
+ .vuuTab .vuuTab-text {
1342
+ display: inline-block;
1343
+ position: relative;
1344
+ overflow: hidden;
1345
+ text-align: var(--salt-text-textAlign-embedded);
1346
+ text-overflow: ellipsis;
1347
+ top: var(--vuuTab-top, var(--tab-top, auto));
1348
+ white-space: nowrap;
1349
+ z-index: var(--salt-zIndex-default);
1350
+ }
1351
+ .vuuTab .vuuTab-text:before {
1352
+ height: 0;
1353
+ content: attr(data-text);
1354
+ display: block;
1355
+ visibility: hidden;
1356
+ font-weight: var(--salt-navigable-fontWeight-active);
1357
+ }
1358
+ .vuuTab-editing:after {
1359
+ content: "";
1360
+ position: absolute;
1361
+ top: 0;
1362
+ left: 0;
1363
+ right: 0;
1364
+ bottom: 2px;
1365
+ outline-color: var(--salt-focused-outlineColor);
1366
+ outline-style: var(--salt-focused-outlineStyle);
1367
+ outline-width: var(--salt-focused-outlineWidth);
1368
+ outline-offset: -2px;
1369
+ }
1370
+ .vuuTab.vuuFocusVisible {
1371
+ background: var(--vuuTab-hover-background, var(--salt-navigable-primary-background-hover));
1372
+ outline-color: var(--vuuTab-focusVisible-color, var(--salt-focused-outlineColor));
1373
+ outline-style: dashed;
1374
+ outline-width: 1px;
1375
+ outline-offset: -1px;
1376
+ }
1377
+ .vuuTab:before {
1378
+ content: var(--tab-before-content, none);
1379
+ content: "";
1380
+ background: var(--tab-before-background);
1381
+ height: var(--tab-before-height);
1382
+ inset: var(--tab-before-inset);
1383
+ position: absolute;
1384
+ width: var(--tab-before-width);
1385
+ z-index: 1;
1386
+ }
1387
+ .vuuTabstrip-draggingTab .vuuTab-selected:before {
1388
+ --tab-before-content: "";
1389
+ --tab-before-background: var(--salt-navigable-indicator-color-active);
1390
+ --tab-before-height: var(--tab-thumb-height);
1391
+ --tab-before-inset: var(--tab-activationIndicator-inset);
1392
+ --tab-before-width: var(--tab-activationIndicator-thumb-width);
1393
+ }
1394
+ .vuuTab-selected:before {
1395
+ --tab-before-content: "";
1396
+ background: var(--salt-navigable-indicator-active);
1397
+ height: var(--tab-thumb-height);
1398
+ position: absolute;
1399
+ left: var(--tab-thumb-left);
1400
+ bottom: 0px;
1401
+ top: var(--tab-thumb-top, auto);
1402
+ transition: var(--tab-thumb-transition, none);
1403
+ width: var(--tab-thumb-width, 100%);
1404
+ }
1405
+ .vuuTab:hover:not(.vuuTab-closeHover) {
1406
+ background: var(--vuuTab-hover-background, var(--salt-navigable-primary-background-hover));
1407
+ }
1408
+
1409
+ /* ../vuu-ui-controls/src/tree/Tree.css */
1410
+ .vuuTree {
1411
+ --tree-node-collapse: var(--vuuTree-toggle-collapse, var(--svg-tree-node-collapse));
1412
+ --tree-node-expand: var(--vuuTree-toggle-expand, var(--svg-tree-node-expand));
1413
+ --tree-toggle-width: 12px;
1414
+ --tree-icon-color: var(--vuuTree-icon-color, #4c505b);
1415
+ --tree-node-expanded-transform: var(--vuuTree-node-expanded-transform, none);
1416
+ --tree-node-indent: 0px;
1417
+ --list-hilited-bg: var(--hw-list-hilited-bg, rgba(0, 0, 0, 0.1));
1418
+ --list-item-height: var(--hw-list-item-height, 30px);
1419
+ --list-item-padding: var(--hw-list-item-padding, 0 6px);
1420
+ --list-item-header-bg: var(--hw-list-item-header-bg, black);
1421
+ --list-item-header-color: var(--hw-list-item-header-color, white);
1422
+ --list-item-header-font-weight: bold;
1423
+ --list-item-header-twisty-color: black;
1424
+ --list-item-header-twisty-content: "";
1425
+ --list-item-header-twisty-top: 50%;
1426
+ --list-item-header-twisty-left: -18px;
1427
+ --list-item-header-twisty-right: auto;
1428
+ --list-item-selected-bg: var(--hw-list-selected-bg, #1ea7fd);
1429
+ --list-item-selected-color: white;
1430
+ --list-item-text-color: var(--hw-gray-800);
1431
+ --focus-visible-border-color: var(--hw-focus-visible-border-color, rgb(141, 154, 179));
1432
+ list-style: none;
1433
+ margin: 0;
1434
+ padding: 0 1px;
1435
+ font-size: var(--vuuTree-font-size, 14px);
1436
+ max-height: inherit;
1437
+ outline: none;
1438
+ overflow-y: auto;
1439
+ position: relative;
1440
+ user-select: none;
1441
+ }
1442
+ .vuuTree-viewport {
1443
+ --list-item-height: 30px;
1444
+ box-sizing: border-box;
1445
+ max-height: inherit;
1446
+ overflow: auto;
1447
+ }
1448
+ .vuuTree-scrollingContentContainer {
1449
+ box-sizing: inherit;
1450
+ position: relative;
1451
+ }
1452
+ .vuuTree-scrollingContentContainer .vuuTreeNode {
1453
+ line-height: 30px;
1454
+ position: absolute;
1455
+ top: 0;
1456
+ left: 0;
1457
+ right: 0;
1458
+ will-change: transform;
1459
+ }
1460
+ .vuuTreeNode {
1461
+ list-style: none;
1462
+ }
1463
+ .vuuTreeNode:not([aria-expanded]),
1464
+ .vuuTreeNode[aria-expanded] > .vuuTreeNode-label {
1465
+ --checkbox-border-color: black;
1466
+ --checkbox-border-width: 1px;
1467
+ --checkbox-tick: black;
1468
+ --list-item-padding-left: 6px;
1469
+ --svg-toggle: var(--tree-node-collapse);
1470
+ align-items: center;
1471
+ color: var(--list-item-text-color);
1472
+ display: flex;
1473
+ flex-wrap: nowrap;
1474
+ height: var(--list-item-height);
1475
+ line-height: var(--list-item-height);
1476
+ padding: var(--list-item-padding);
1477
+ padding-left: var(--padding-left);
1478
+ position: relative;
1479
+ cursor: default;
1480
+ margin: 0;
1481
+ white-space: nowrap;
1482
+ }
1483
+ .vuuTreeNode:not([aria-expanded]) {
1484
+ --padding-left: calc( var(--list-item-padding-left) + var(--tree-toggle-width) + var(--tree-node-indent) );
1485
+ }
1486
+ .vuuTreeNode[aria-expanded] > .vuuTreeNode-label {
1487
+ --padding-left: calc( var(--list-item-padding-left) + var(--tree-toggle-width) + var(--tree-node-indent) );
1488
+ }
1489
+ .vuuTreeNode-icon {
1490
+ background-color: var(--tree-icon-color);
1491
+ display: inline-block;
1492
+ height: 18px;
1493
+ margin-right: 6px;
1494
+ -webkit-mask: var(--vuu-icon-svg) center center/12px 12px no-repeat;
1495
+ mask: var(--vuu-icon-svg) center center/12px 12px no-repeat;
1496
+ flex: 0 0 18px;
1497
+ }
1498
+ .vuuTreeNode[aria-expanded] {
1499
+ flex-direction: column;
1500
+ }
1501
+ .vuuTreeNode[aria-expanded] {
1502
+ flex-direction: column;
1503
+ height: auto;
1504
+ }
1505
+ .vuuTreeNode > *[role=group] {
1506
+ padding-left: 0px;
1507
+ }
1508
+ .vuuTreeNode {
1509
+ padding-left: calc(var(--padding-left) + var(--tree-node-indent));
1510
+ }
1511
+ .vuuTreeNode[aria-level="2"] {
1512
+ --tree-node-indent: 12px;
1513
+ }
1514
+ .vuuTreeNode[aria-level="3"] {
1515
+ --tree-node-indent: 24px;
1516
+ }
1517
+ .vuuTreeNode[aria-level="4"] {
1518
+ --tree-node-indent: 36px;
1519
+ }
1520
+ .vuuTreeNode:not(.focusVisible):not(.hwListItemHeader):not([aria-expanded])[data-highlighted],
1521
+ .vuuTreeNode:not(.focusVisible):not(.hwListItemHeader)[aria-expanded][data-highlighted] > div:first-child {
1522
+ background-color: var(--list-hilited-bg);
1523
+ }
1524
+ .vuuTreeNode-toggle {
1525
+ cursor: pointer;
1526
+ }
1527
+ .vuuTreeNode > .vuuTreeNode-toggle {
1528
+ display: inline-block;
1529
+ height: 100%;
1530
+ left: 0;
1531
+ position: absolute;
1532
+ width: calc(var(--list-item-padding-left) + var(--tree-toggle-width));
1533
+ }
1534
+ .vuuTreeNode[aria-expanded] > .vuuTreeNode-label:after {
1535
+ content: var(--list-item-header-twisty-content);
1536
+ -webkit-mask: var(--svg-toggle) center center/8px 8px no-repeat;
1537
+ mask: var(--svg-toggle) center center/8px 8px no-repeat;
1538
+ background-color: var(--list-item-header-twisty-color);
1539
+ height: 18px;
1540
+ margin-top: -9px;
1541
+ left: var(--tree-node-indent);
1542
+ position: absolute;
1543
+ top: var(--list-item-header-twisty-top);
1544
+ transition: transform 0.3s;
1545
+ width: 18px;
1546
+ }
1547
+ .vuuTreeNode[aria-selected=true] {
1548
+ --list-item-header-twisty-color: var(--list-item-selected-color);
1549
+ }
1550
+ .vuuTreeNode:not(.focusVisible):focus {
1551
+ background-color: rgba(0, 0, 0, 0.1);
1552
+ }
1553
+ .vuuTreeNode:not([aria-expanded]).focusVisible:before,
1554
+ .vuuTreeNode[aria-expanded].focusVisible > div:first-child:before {
1555
+ content: "";
1556
+ position: absolute;
1557
+ top: 0px;
1558
+ left: var(--tree-focus-offset, 0px);
1559
+ right: 0;
1560
+ bottom: 0px;
1561
+ border: dotted var(--focus-visible-border-color) 2px;
1562
+ background-color: var(--list-hilited-bg);
1563
+ }
1564
+ .vuuTreeNode[aria-expanded=false] > *:first-child:after {
1565
+ --svg-toggle: var(--tree-node-expand);
1566
+ }
1567
+ .vuuTreeNode[aria-expanded=true] > *:first-child:after {
1568
+ transform: var(--tree-node-expanded-transform);
1569
+ }
1570
+ .vuuTree:not(.checkbox-only) .vuuTreeNode:not([aria-expanded])[aria-selected=true],
1571
+ .vuuTree:not(.checkbox-only) .vuuTreeNode[aria-expanded][aria-selected=true] > div:first-child {
1572
+ --checkbox-border-color: var(--list-item-selected-color);
1573
+ --checkbox-tick: var(--list-item-selected-color);
1574
+ --focus-visible-border-color: var(--list-item-selected-color);
1575
+ background-color: var(--list-item-selected-bg);
1576
+ color: var(--list-item-selected-color);
1577
+ }
1578
+ .with-checkbox .vuuTreeNode {
1579
+ padding-left: 28px;
1580
+ }
1581
+ .with-checkbox .vuuTreeNode:before {
1582
+ border-style: solid;
1583
+ border-width: var(--checkbox-border-width);
1584
+ border-color: var(--checkbox-border-color);
1585
+ content: "";
1586
+ height: 12px;
1587
+ left: 3px;
1588
+ margin-top: -7px;
1589
+ position: absolute;
1590
+ top: 50%;
1591
+ width: 12px;
1592
+ }
1593
+
1594
+ /* src/table/TableCell.css */
1595
+ .vuuTable {
1596
+ --cell-outline-width: 2px;
1597
+ user-select: none;
1598
+ }
1599
+ [role=cell] {
1600
+ display: inline-block;
1601
+ }
1602
+ [data-align=end] {
1603
+ margin-left: auto;
1604
+ }
1605
+ [data-align=end] + [data-align=end] {
1606
+ margin-left: 0;
1607
+ }
1608
+ .vuuTable-table [role=cell] {
1609
+ --saltEditableLabel-height: 17px;
1610
+ --saltInput-height: 17px;
1611
+ --saltInput-minHeight: 17px;
1612
+ border-right: 1px solid var(--vuuTableCell-border-rightColor);
1613
+ border-bottom: 1px solid var(--vuuTableCell-border-bottomColor);
1614
+ color: var(--salt-text-primary-foreground);
1615
+ cursor: default;
1616
+ height: var(--vuuTable-rowHeight);
1617
+ line-height: calc(var(--vuuTable-rowHeight) - 1px);
1618
+ overflow: hidden;
1619
+ padding: 0 5px;
1620
+ vertical-align: top;
1621
+ }
1622
+ .vuuTable-headerCell:focus,
1623
+ .vuuTable [role=cell]:focus {
1624
+ outline: var(--vuuTableCell-outline, dotted var(--salt-color-blue-400) var(--cell-outline-width));
1625
+ outline-offset: calc(var(--cell-outline-width) * -1);
1626
+ box-shadow: inset 0 0 0 var(--cell-outline-width) white;
1627
+ border-bottom: none;
1628
+ }
1629
+ .vuuTable-headerCell:focus .vuuTable-headerCell-inner {
1630
+ padding-bottom: var(--cell-outline-width);
1631
+ }
1632
+ .vuuTable-headerCell:not(.vuuTable-headerCell-resizing):focus .vuuTable-headerCell-inner {
1633
+ --columnResizer-color: transparent;
1634
+ }
1635
+ .vuuTable [role=cell]:focus {
1636
+ border-right: none;
1637
+ padding-bottom: 1px;
1638
+ }
1639
+ [role=cell][data-editable=true] {
1640
+ --salt-text-fontSize: 10px;
1641
+ --vuu-icon-size: 5px;
1642
+ position: relative;
1643
+ }
1644
+ [role=cell][data-editable=true]:after {
1645
+ top: 0;
1646
+ content: "";
1647
+ background-color: var(--salt-text-secondary-foreground, black);
1648
+ left: 0;
1649
+ height: var(--vuu-icon-height, var(--vuu-icon-size, 12px));
1650
+ -webkit-mask: var(--svg-corner-triangle) center center/var(--vuu-icon-size) var(--vuu-icon-size);
1651
+ mask: var(--svg-corner-triangle) center center/var(--vuu-icon-size) var(--vuu-icon-size);
1652
+ mask-repeat: no-repeat;
1653
+ -webkit-mask-repeat: no-repeat;
1654
+ position: absolute;
1655
+ transform: rotate(180deg);
1656
+ width: var(--vuu-icon-width, var(--vuu-icon-size, 12px));
1657
+ }
1658
+ [role=cell]:focus[data-editable],
1659
+ [role=cell]:focus-within[data-editable],
1660
+ [role=cell]:has(.saltEditableLabel-editing) {
1661
+ outline: solid var(--salt-color-blue-400) 1px;
1662
+ background-color: white;
1663
+ outline-offset: -1px;
1664
+ }
1665
+ [role=cell]:focus[data-editable=true]:after,
1666
+ [role=cell]:has(.saltEditableLabel):after {
1667
+ background-color: var(--salt-color-blue-400);
1668
+ left: 1px;
1669
+ top: 1px;
1670
+ }
1671
+ .vuuAlignRight {
1672
+ text-align: right;
1673
+ }
1674
+
1675
+ /* src/table/TableGroupCell.css */
1676
+ .vuuTableGroupCell {
1677
+ --spacer-width: 20px;
1678
+ --toggle-icon-transform: var(--row-toggle-icon-transform, none);
1679
+ --vuu-icon-width: 18px;
1680
+ align-items: center;
1681
+ display: inline-flex;
1682
+ }
1683
+ .vuuTableGroupCell-spacer {
1684
+ height: 100%;
1685
+ position: relative;
1686
+ width: var(--spacer-width);
1687
+ }
1688
+ .vuuTableGroupCell-spacer:after {
1689
+ background: var(--salt-container-primary-borderColor);
1690
+ content: "";
1691
+ position: absolute;
1692
+ top: 0;
1693
+ bottom: -1px;
1694
+ left: 9px;
1695
+ width: 1px;
1696
+ }
1697
+ .vuuTableGroupCell-toggle {
1698
+ transition: transform 0.25s;
1699
+ transform: var(--toggle-icon-transform);
1700
+ }
1701
+
1702
+ /* src/table/TableRow.css */
1703
+ .vuuTableRow {
1704
+ --row-background: var(--table-background);
1705
+ position: absolute;
1706
+ top: 0;
1707
+ }
1708
+ .vuuTableRow-even {
1709
+ --row-background: var(--row-background-even);
1710
+ }
1711
+ .vuuTableRow {
1712
+ background-color: var(--row-background);
1713
+ }
1714
+ .vuuTableRow-expanded {
1715
+ --row-toggle-icon-transform: rotate(90deg);
1716
+ }
1717
+ .vuuTableRow[aria-selected] {
1718
+ background-color: var(--vuuTableRow-selected-background, var(--salt-selectable-background-selected));
1719
+ --vuuTableCell-border-bottomColor: var(--salt-selectable-borderColor-selected);
1720
+ }
1721
+ .vuuTableRow-preSelected {
1722
+ --vuuTableCell-border-bottomColor: var(--salt-selectable-borderColor-selected);
1723
+ }
1724
+
1725
+ /* src/table/TableGroupHeaderCell.css */
1726
+ .salt-theme {
1727
+ --svg-spinner: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="rgb(38, 112, 169)" d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"><animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1s" from="0 50 50" to="360 50 50" repeatCount="indefinite" /></path></svg>');
1728
+ }
1729
+ .vuuTable-groupHeaderCell {
1730
+ --cell-align: "flex-start";
1731
+ text-align: left;
1732
+ background: var(--dataTable-background);
1733
+ cursor: default;
1734
+ height: var(--vuuTableHeaderHeight);
1735
+ }
1736
+ .vuuTable-groupHeaderCell-inner {
1737
+ align-items: center;
1738
+ display: flex;
1739
+ height: 100%;
1740
+ padding-left: 1px;
1741
+ }
1742
+ .vuuTable-groupHeaderCell-label {
1743
+ align-items: center;
1744
+ display: flex;
1745
+ flex: 0 0 auto;
1746
+ }
1747
+ .vuuTable-groupHeaderCell-col {
1748
+ align-items: center;
1749
+ background-color: inherit;
1750
+ display: inline-flex;
1751
+ flex: 0 1 auto;
1752
+ height: calc(var(--vuuTableHeaderHeight) - 2px);
1753
+ justify-content: space-between;
1754
+ padding-right: 8px;
1755
+ position: relative;
1756
+ }
1757
+ .vuuTable-groupHeaderCell-close {
1758
+ --vuu-icon-height: 18px;
1759
+ --vuu-icon-width: 18px;
1760
+ cursor: pointer;
1761
+ left: 3px;
1762
+ }
1763
+ .vuuTable-groupHeaderCell-col:nth-child(odd) {
1764
+ background-color: var(--salt-color-gray-50);
1765
+ }
1766
+ .vuuTable-groupHeaderCell-col:nth-child(even) {
1767
+ background-color: var(--salt-color-gray-40);
1768
+ }
1769
+ .vuuTable-groupHeaderCell-col:first-child {
1770
+ clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%);
1771
+ padding-left: 3px;
1772
+ z-index: 1;
1773
+ }
1774
+ .vuuTable-groupHeaderCell-col:not(:first-child) {
1775
+ margin-left: -6px;
1776
+ padding-left: 12px;
1777
+ clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%, 8px 50%);
1778
+ }
1779
+ .vuuTable-groupHeaderCell-resizing {
1780
+ --columnResizer-color: var(--salt-color-blue-500);
1781
+ --columnResizer-height: var(--table-height);
1782
+ --columnResizer-width: 2px;
1783
+ }
1784
+ .vuuTable-groupHeaderCell-pending {
1785
+ --pending-content: "";
1786
+ }
1787
+ .vuuTable-groupHeaderCell-col:has(+ .vuuColumnResizer):after {
1788
+ content: var(--pending-content);
1789
+ width: 24px;
1790
+ height: 24px;
1791
+ background-image: var(--svg-spinner);
1792
+ background-repeat: no-repeat;
1793
+ background-size: cover;
1794
+ }
1795
+
1796
+ /* src/table/SortIndicator.css */
1797
+ .vuuSortIndicator {
1798
+ --menu-icon-size: 18px;
1799
+ --menu-item-icon-color: black;
1800
+ display: flex;
1801
+ flex-direction: column;
1802
+ position: relative;
1803
+ width: 18px;
1804
+ }
1805
+ .vuuSortPosition {
1806
+ font-size: 10px;
1807
+ line-height: 10px;
1808
+ text-align: center;
1809
+ }
1810
+
1811
+ /* src/table/TableHeaderCell.css */
1812
+ .vuuTable-heading:nth-child(2) {
1813
+ --heading-top: calc(var(--header-height));
1814
+ }
1815
+ .vuuTable-heading:nth-child(3) {
1816
+ --heading-top: calc(var(--header-height) * 2);
1817
+ }
1818
+ .vuuTable-heading:nth-child(3) {
1819
+ --heading-top: calc(var(--header-height) * 3);
1820
+ }
1821
+ .vuuTable-headingCell {
1822
+ background: var(--dataTable-background);
1823
+ border-color: var(--salt-separable-tertiary-borderColor);
1824
+ border-style: solid solid solid none;
1825
+ border-width: 1px;
1826
+ color: var(--salt-text-secondary-foreground);
1827
+ display: inline-block;
1828
+ height: var(--vuuTableHeaderHeight);
1829
+ padding: 0 !important;
1830
+ }
1831
+ .vuuTable-heading:has(+ .vuuTable-heading) > .vuuTable-headingCell {
1832
+ border-bottom-color: transparent;
1833
+ }
1834
+ [role=columnHeader] {
1835
+ --vuuTableCell-border-bottomColor: var(--salt-separable-tertiary-borderColor);
1836
+ --cell-align: "flex-start";
1837
+ display: inline-block;
1838
+ text-align: left;
1839
+ background: var(--dataTable-background);
1840
+ border-right: 1px solid var(--vuuTableCell-border-rightColor);
1841
+ border-bottom: 1px solid var(--vuuTableCell-border-bottomColor);
1842
+ color: var(--salt-text-secondary-foreground);
1843
+ cursor: default;
1844
+ height: var(--vuuTableHeaderHeight);
1845
+ padding: 0 !important;
1846
+ vertical-align: top;
1847
+ }
1848
+ .vuuTable-headerCell-right {
1849
+ --cell-align: flex-end;
1850
+ }
1851
+ .vuuTable-headerCell-inner {
1852
+ align-items: stretch;
1853
+ display: flex;
1854
+ height: 100%;
1855
+ padding: 0 0 0 3px;
1856
+ }
1857
+ .vuuTable-headerCell-inner:has(.vuuFilterIndicator) {
1858
+ padding-left: 0;
1859
+ }
1860
+ .vuuTable-headerCell-label {
1861
+ align-items: center;
1862
+ justify-content: var(--cell-align);
1863
+ display: flex;
1864
+ flex: 1 1 auto;
1865
+ }
1866
+ .vuuTable-headerCell-resizing {
1867
+ --columnResizer-color: var(--salt-color-blue-500);
1868
+ --columnResizer-height: var(--table-height);
1869
+ --columnResizer-width: 2px;
1870
+ }
1871
+ [role=headerCell].vuuPinLeft.vuuEndPin:after {
1872
+ box-shadow: 2px 0px 5px rgba(0, 0, 0, 0.4);
1873
+ content: "";
1874
+ position: absolute;
1875
+ width: 1px;
1876
+ background-color: transparent;
1877
+ height: var(--table-height);
1878
+ top: 0;
1879
+ right: 0px;
1880
+ }
1881
+ [role=headerCell].vuuPinRight.vuuEndPin:after {
1882
+ box-shadow: -2px 0px 5px rgba(0, 0, 0, 0.3);
1883
+ content: "";
1884
+ position: absolute;
1885
+ width: 1px;
1886
+ background-color: transparent;
1887
+ height: var(--table-height);
1888
+ top: 0;
1889
+ left: 0px;
1890
+ }
1891
+ [role=headerCell]:is(.vuuPinLeft, .vuuPinRight, .vuuPinFloating) {
1892
+ top: 0;
1893
+ z-index: 20;
1894
+ }
1895
+ .saltDraggable-vuuTable-headerCell {
1896
+ --dataTable-background: ivory;
1897
+ --vuuTableHeaderHeight: 25px;
1898
+ }
1899
+
1900
+ /* src/table/filter-indicator.css */
1901
+ .vuuFilterIndicator {
1902
+ --menu-icon-size: 12px;
1903
+ --menu-item-icon-color: black;
1904
+ align-items: center;
1905
+ cursor: pointer;
1906
+ display: flex;
1907
+ flex: 0 0 18px;
1908
+ flex-direction: column;
1909
+ justify-content: center;
1910
+ position: relative;
1911
+ }
1912
+ .vuuFilterIndicator + .vuuTable-headerCell-inner {
1913
+ padding-left: 0;
1914
+ }
1915
+
1916
+ /* src/table/RowBasedTable.css */
1917
+ .vuuTable-table {
1918
+ --vuuTable-rowHeight: var(--row-height);
1919
+ --vuuTableCell-border-bottomColor: transparent;
1920
+ --vuuTableCell-border-rightColor: var(--salt-separable-tertiary-borderColor);
1921
+ border-collapse: separate;
1922
+ border-spacing: 0;
1923
+ border-left: 1px solid #ccc;
1924
+ border: none;
1925
+ font-size: var(--vuuTable-font-size, 10px);
1926
+ margin: 0;
1927
+ min-height: 100%;
1928
+ width: var(--content-width);
1929
+ }
1930
+ .vuuTable-headers {
1931
+ position: sticky;
1932
+ top: 0;
1933
+ z-index: 1;
1934
+ }
1935
+ .vuuTable-body {
1936
+ height: var(--content-height);
1937
+ position: relative;
1938
+ }
1939
+
1940
+ /* src/table/Table.css */
1941
+ .vuuTable {
1942
+ --dataTable-background: var(--salt-container-primary-background, inherit);
1943
+ --row-background-even: var(--dataTable-background);
1944
+ --row-background-odd: var(--dataTable-background);
1945
+ --table-background: var(--dataTable-background, none);
1946
+ background-color: var(--dataTable-background);
1947
+ position: relative;
1948
+ }
1949
+ .vuuTable-zebra {
1950
+ --row-background-even: var(--salt-container-secondary-background);
1951
+ }
1952
+ .vuuTable-scrollbarContainer {
1953
+ --scroll-content-width: calc(var(--content-width) - var(--pinned-width-left));
1954
+ border-bottom: none !important;
1955
+ border-top: none !important;
1956
+ border-left: solid 1px var(--salt-container-primary-borderColor);
1957
+ box-shadow: 0px -1px 0px 0px var(--salt-container-primary-borderColor);
1958
+ height: var(--viewport-body-height);
1959
+ left: var(--pinned-width-left);
1960
+ overflow: auto;
1961
+ position: absolute;
1962
+ top: var(--total-header-height);
1963
+ width: calc(var(--table-width) - var(--pinned-width-left) + 1px);
1964
+ }
1965
+ .vuuTable-scrollbarContent {
1966
+ height: calc(var(--content-height) + var(--horizontal-scrollbar-height));
1967
+ position: absolute;
1968
+ width: var(--scroll-content-width, var(--content-width));
1969
+ }
1970
+ .vuuTable-contentContainer {
1971
+ --vuuTableHeaderHeight: var(--header-height, 30px);
1972
+ background-color: var(--salt-container-primary-background);
1973
+ height: calc(var(--table-height) - var(--horizontal-scrollbar-height));
1974
+ position: relative;
1975
+ overflow: auto;
1976
+ overscroll-behavior: none;
1977
+ width: calc(var(--table-width) - var(--vertical-scrollbar-width));
1978
+ }
1979
+ .vuuTable-contentContainer::-webkit-scrollbar {
1980
+ display: none;
1981
+ }
1982
+ :is(.vuuPinLeft, .vuuPinRight, .vuuPinFloating) {
1983
+ background-color: inherit;
1984
+ position: sticky;
1985
+ z-index: 1;
1986
+ }
1987
+ .vuuTable-settings {
1988
+ --saltButton-height: var(--header-height);
1989
+ --saltButton-width: 15px;
1990
+ position: absolute !important;
1991
+ right: 0;
1992
+ top: 0;
1993
+ }
1994
+ .vuuTable:has(.vuuTable-headerCell-resizing) * {
1995
+ cursor: col-resize;
1996
+ }
1997
+
1998
+ /* src/table/Table-loading.css */
1999
+ .vuuTable-loading .vuuTable-table {
2000
+ --skeleton-height: 20px;
2001
+ --skeleton-width: calc(var(--content-width) - 8px);
2002
+ --skeleton-left: 4px;
2003
+ --skeleton-row-height: 16px;
2004
+ --skeleton-size: var(--skeleton-width) var(--skeleton-height);
2005
+ --skeleton-row: linear-gradient( var(--salt-color-gray-20-fade-background) var(--skeleton-row-height), transparent 0 );
2006
+ --skeleton-background-image: var(--skeleton-row);
2007
+ background-image: var(--skeleton-background-image);
2008
+ background-repeat: repeat-y;
2009
+ background-size: var(--skeleton-size);
2010
+ background-position-x: var(--skeleton-left);
2011
+ background-position-y: 27px;
2012
+ }
2013
+ .vuuTable-loading .vuuTable-table {
2014
+ --skeleton-height: 20px;
2015
+ --skeleton-width: calc(var(--content-width) - 8px);
2016
+ --skeleton-left: 4px;
2017
+ --skeleton-row-height: 16px;
2018
+ --skeleton-size: var(--skeleton-width) var(--skeleton-height);
2019
+ --skeleton-row: linear-gradient( var(--salt-color-gray-20-fade-background) var(--skeleton-row-height), transparent 0 );
2020
+ --skeleton-background-image: var(--skeleton-row);
2021
+ background-image: var(--skeleton-background-image);
2022
+ background-repeat: repeat-y;
2023
+ background-size: var(--skeleton-size);
2024
+ background-position-x: var(--skeleton-left);
2025
+ background-position-y: 27px;
2026
+ }
2027
+ .vuuTable-loading .vuuTable-table:after {
2028
+ animation: shimmer 2s infinite;
2029
+ background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .2) 20%, rgba(255, 255, 255, .6) 60%, rgba(255, 255, 255, 0));
2030
+ content: "";
2031
+ height: var(--table-height);
2032
+ left: 0px;
2033
+ position: absolute;
2034
+ transform: translateX(-100%);
2035
+ top: var(--header-height);
2036
+ width: var(--content-width);
2037
+ }
2038
+ @keyframes shimmer {
2039
+ 100% {
2040
+ transform: translateX(100%);
2041
+ }
2042
+ }
2043
+
2044
+ /* src/table/cell-renderers/json-cell/JsonCell.css */
2045
+ .vuuJsonCell-group {
2046
+ align-items: center;
2047
+ display: inline-flex;
2048
+ height: calc(var(--vuuTable-rowHeight) - 1px);
2049
+ width: 100%;
2050
+ }
2051
+ .vuuJsonCell-toggle {
2052
+ --vuu-icon-color: var(--salt-text-primary-foreground);
2053
+ --vuu-icon-height: calc(var(--vuuTable-rowHeight) - 1px);
2054
+ --vuu-icon-width: 18px;
2055
+ flex-shrink: 0;
2056
+ margin-left: auto;
2057
+ }
2058
+ .vuuJsonCell-name {
2059
+ font-weight: var(--salt-typography-fontWeight-semiBold);
2060
+ }
2061
+ .vuuJsonCell-value {
2062
+ overflow: hidden;
2063
+ text-overflow: ellipsis;
2064
+ }
2065
+
2066
+ /* src/table-next/ColumnMenu.css */
2067
+ .vuuMenuItem {
2068
+ --vuu-svg-cog: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M12.9533 8.65331C12.98 8.43998 13 8.22665 13 7.99998C13 7.77331 12.98 7.55998 12.9533 7.34665L14.36 6.24665C14.4867 6.14665 14.52 5.96665 14.44 5.81998L13.1067 3.51331C13.0267 3.36665 12.8467 3.31331 12.7 3.36665L11.04 4.03331C10.6933 3.76665 10.32 3.54665 9.91333 3.37998L9.66 1.61331C9.64 1.45331 9.5 1.33331 9.33333 1.33331H6.66667C6.5 1.33331 6.36 1.45331 6.34 1.61331L6.08667 3.37998C5.68 3.54665 5.30667 3.77331 4.96 4.03331L3.3 3.36665C3.14667 3.30665 2.97333 3.36665 2.89333 3.51331L1.56 5.81998C1.47333 5.96665 1.51333 6.14665 1.64 6.24665L3.04667 7.34665C3.02 7.55998 3 7.77998 3 7.99998C3 8.21998 3.02 8.43998 3.04667 8.65331L1.64 9.75331C1.51333 9.85331 1.48 10.0333 1.56 10.18L2.89333 12.4866C2.97333 12.6333 3.15333 12.6866 3.3 12.6333L4.96 11.9666C5.30667 12.2333 5.68 12.4533 6.08667 12.62L6.34 14.3866C6.36 14.5466 6.5 14.6666 6.66667 14.6666H9.33333C9.5 14.6666 9.64 14.5466 9.66 14.3866L9.91333 12.62C10.32 12.4533 10.6933 12.2266 11.04 11.9666L12.7 12.6333C12.8533 12.6933 13.0267 12.6333 13.1067 12.4866L14.44 10.18C14.52 10.0333 14.4867 9.85331 14.36 9.75331L12.9533 8.65331V8.65331ZM8 10.3333C6.71333 10.3333 5.66667 9.28665 5.66667 7.99998C5.66667 6.71331 6.71333 5.66665 8 5.66665C9.28667 5.66665 10.3333 6.71331 10.3333 7.99998C10.3333 9.28665 9.28667 10.3333 8 10.3333Z"/></svg>');
2069
+ }
2070
+ .vuuTable-columnMenu {
2071
+ --vuu-icon-color: #606477;
2072
+ --vuu-icon-height: 20px;
2073
+ --vuu-icon-left: 0px;
2074
+ --vuu-icon-size: 16px;
2075
+ --vuu-icon-top: 0px;
2076
+ --vuu-icon-width: 20px;
2077
+ border-radius: 4px;
2078
+ cursor: pointer;
2079
+ display: inline-block;
2080
+ margin-top: 2px;
2081
+ padding: 2px;
2082
+ }
2083
+ .vuuTable-columnMenu:hover {
2084
+ --vuu-icon-color: #15171B;
2085
+ background-color: #F37880;
2086
+ }
2087
+ .vuuTable-columnMenu-open:hover,
2088
+ .vuuTable-columnMenu-open {
2089
+ background-color: #6D18BD;
2090
+ --vuu-icon-color: white;
2091
+ }
2092
+ [data-icon=cog] {
2093
+ --vuu-icon-svg: var(--vuu-svg-cog);
2094
+ --vuu-icon-size: 14px;
2095
+ }
2096
+
2097
+ /* src/table-next/column-resizing/ColumnResizer.css */
2098
+ .vuuColumnResizer {
2099
+ background-color: var(--columnResizer-color);
2100
+ cursor: col-resize;
2101
+ height: var(--header-height);
2102
+ position: relative;
2103
+ width: 4px;
2104
+ }
2105
+ .vuuColumnResizer:hover {
2106
+ --columnResizer-color: var(--salt-color-blue-500);
2107
+ }
2108
+ .vuuColumnResizer:after {
2109
+ content: "";
2110
+ position: absolute;
2111
+ width: var(--columnResizer-width, 1px);
2112
+ top: 0;
2113
+ bottom: 0;
2114
+ right: -1px;
2115
+ background-color: var(--columnResizer-color, var(--salt-separable-tertiary-borderColor));
2116
+ height: var(--columnResizer-height, calc(100% + 1px));
2117
+ }
2118
+
2119
+ /* src/table-next/HeaderCell.css */
2120
+ .vuuTableNext-col-header {
2121
+ border-bottom: 1px solid #ccc;
2122
+ box-sizing: border-box;
2123
+ cursor: default;
2124
+ display: inline-flex;
2125
+ gap: 3px;
2126
+ height: var(--header-height);
2127
+ vertical-align: top;
2128
+ }
2129
+ .vuuTableNext-col-header .vuuColumnResizer:hover {
2130
+ --columnResizer-color: var(--vuu-color-purple-10);
2131
+ }
2132
+ .vuuTableNext-col-header-label {
2133
+ line-height: calc(var(--header-height) - 1px);
2134
+ }
2135
+ .vuuTableNext-col-header.vuuPinLeft.vuuEndPin .vuuColumnResizer:before {
2136
+ --height: calc(var(--columnResizer-height) - 15px);
2137
+ --inset-r: calc(var(--pin-width) - 2px);
2138
+ --inset-b: calc(var(--height) - 2px);
2139
+ --clip-path: polygon( 0% 0%, 0% 120%, 2px 120%, 2px 2px, var(--inset-r) 2px, var(--inset-r) var(--inset-b), 2px var(--inset-b), 2px 120%, 120% 120%, 120% 0% );
2140
+ background-color: transparent;
2141
+ border-color: var(--vuu-color-gray-40);
2142
+ border-width: 1px;
2143
+ border-style: solid solid solid solid;
2144
+ border-radius: 4px;
2145
+ box-shadow: 2px 1px 4px 0px rgba(0, 0, 0, 0.10);
2146
+ clip-path: var(--clip-path);
2147
+ content: "";
2148
+ position: absolute;
2149
+ width: var(--pin-width);
2150
+ top: 0;
2151
+ bottom: 0;
2152
+ right: -1px;
2153
+ height: var(--height);
2154
+ z-index: -5;
2155
+ }
2156
+ .vuuTableNext-col-header.vuuPinRight.vuuEndPin .vuuColumnResizer:before {
2157
+ --height: calc(var(--columnResizer-height) - 15px);
2158
+ --inset-r: calc(var(--pin-width) - 2px);
2159
+ --inset-b: calc(var(--height) - 2px);
2160
+ --clip-path: polygon( -20% 0%, -20% 120%, 2px 120%, 2px 2px, var(--inset-r) 2px, var(--inset-r) var(--inset-b), 2px var(--inset-b), 2px 120%, 120% 120%, 120% 0% );
2161
+ background-color: transparent;
2162
+ border-color: #A9AAAD;
2163
+ border-width: 1px;
2164
+ border-style: solid solid solid solid;
2165
+ border-radius: 4px;
2166
+ box-shadow: -2px 1px 4px 0px rgba(0, 0, 0, 0.10);
2167
+ clip-path: var(--clip-path);
2168
+ content: "";
2169
+ position: absolute;
2170
+ width: var(--pin-width);
2171
+ top: 0;
2172
+ bottom: 0;
2173
+ right: 0px;
2174
+ height: var(--height);
2175
+ z-index: -5;
2176
+ }
2177
+
2178
+ /* src/table-next/Row.css */
2179
+ .vuuTableNextRow {
2180
+ background: #fff;
2181
+ border-bottom: 1px solid var(--salt-separable-tertiary-borderColor);
2182
+ box-sizing: border-box;
2183
+ height: var(--row-height);
2184
+ line-height: calc(var(--row-height) - 1px);
2185
+ position: absolute;
2186
+ top: 0;
2187
+ white-space: nowrap;
2188
+ }
2189
+ .vuuTableNextRow-selected,
2190
+ .vuuTableNextRow-selectedEnd {
2191
+ background-color: rgb(235, 235, 236);
2192
+ }
2193
+ .vuuTableNextRow-selectedStart {
2194
+ --vuu-selection-decorator-left-radius: 5px 0 0 0;
2195
+ --vuu-selection-decorator-right-radius: 0 5px 0 0;
2196
+ border-radius: 5px 5px 0 0;
2197
+ }
2198
+ .vuuTableNextRow-selectedEnd {
2199
+ --vuu-selection-decorator-left-radius: 0 0 0 5px;
2200
+ --vuu-selection-decorator-right-radius: 0 0 5px 0;
2201
+ border-radius: 0 0 5px 5px;
2202
+ }
2203
+ .vuuTableNextRow-selectedStart.vuuTableNexRow-selectedEnd {
2204
+ --vuu-selection-decorator-left-radius: 5px 0 0 5px;
2205
+ --vuu-selection-decorator-right-radius: 0 5px 5px 0;
2206
+ border-radius: 5px 5px 5px 5px;
2207
+ }
2208
+ .vuuTableNextRow-selectedStart:after {
2209
+ content: "";
2210
+ position: absolute;
2211
+ top: 0;
2212
+ left: 4px;
2213
+ height: 1px;
2214
+ background-color: var(--vuu-color-purple-10);
2215
+ width: calc(var(--content-width) - 8px);
2216
+ z-index: 1;
2217
+ }
2218
+ .vuuTableNextRow-selectedEnd {
2219
+ border-bottom-color: var(--vuu-color-purple-10);
2220
+ }
2221
+ .vuuTableNextRow-selectionDecorator {
2222
+ background-color: var(--vuu-selection-decorator-bg, inherit);
2223
+ display: inline-block;
2224
+ position: relative;
2225
+ height: var(--row-height);
2226
+ width: 4px;
2227
+ z-index: 2;
2228
+ }
2229
+ .vuuTableNextRow-selectionDecorator.vuuStickyLeft {
2230
+ left: 0;
2231
+ position: sticky;
2232
+ }
2233
+ .vuuTableNextRow-selectionDecorator.vuuStickyRight {
2234
+ right: 0;
2235
+ position: sticky;
2236
+ }
2237
+ .vuuTableNextRow-selected {
2238
+ --vuu-selection-decorator-bg: var(--vuu-color-purple-10);
2239
+ }
2240
+ .vuuTableNextRow-selectedStart {
2241
+ --vuu-selection-decorator-bg: white;
2242
+ }
2243
+ .vuuTableNextRow-selectedEnd {
2244
+ --vuu-selection-decorator-bg: white;
2245
+ }
2246
+ .vuuTableNextRow-selectedStart.vuuTableNextRow-selectedEnd {
2247
+ }
2248
+ .vuuTableNextRow-selectedStart .vuuTableNextRow-selectionDecorator:before,
2249
+ .vuuTableNextRow-selectedEnd .vuuTableNextRow-selectionDecorator:before {
2250
+ content: "";
2251
+ inset: 0;
2252
+ position: absolute;
2253
+ background-color: var(--vuu-color-purple-10);
2254
+ }
2255
+ .vuuTableNextRow-selectionDecorator.vuuStickyLeft:before {
2256
+ border-radius: var(--vuu-selection-decorator-left-radius, 0);
2257
+ }
2258
+ .vuuTableNextRow-selectionDecorator.vuuStickyRight:before {
2259
+ border-radius: var(--vuu-selection-decorator-right-radius, 0);
2260
+ }
2261
+
2262
+ /* src/table-next/TableNext.css */
2263
+ .vuuTableNext {
2264
+ --vuu-table-next-selection-bookend-width: 4px;
2265
+ --columnResizer-height: var(--table-height);
2266
+ --columnResizer-color: transparent;
2267
+ --table-background: var(--salt-container-primary-background);
2268
+ height: var(--table-css-height);
2269
+ background-color: red;
2270
+ position: relative;
2271
+ user-select: none;
2272
+ width: var(--table-css-width);
2273
+ }
2274
+ .vuuTableNext-scrollbarContainer {
2275
+ --scroll-content-width: 1100px;
2276
+ border-bottom: none !important;
2277
+ border-top: none !important;
2278
+ border-left: solid 1px var(--salt-container-primary-borderColor);
2279
+ box-shadow: 0px -1px 0px 0px var(--salt-container-primary-borderColor);
2280
+ height: var(--viewport-body-height);
2281
+ left: 0px;
2282
+ overflow: auto;
2283
+ position: absolute;
2284
+ top: var(--total-header-height);
2285
+ width: var(--table-width);
2286
+ }
2287
+ .vuuTableNext-scrollbarContent {
2288
+ height: calc(var(--content-height) + var(--horizontal-scrollbar-height));
2289
+ position: absolute;
2290
+ width: var(--content-width);
2291
+ }
2292
+ .vuuTableNext-contentContainer {
2293
+ background-color: var(--salt-container-primary-background);
2294
+ height: calc(var(--table-height) - var(--horizontal-scrollbar-height));
2295
+ position: relative;
2296
+ overflow: auto;
2297
+ overscroll-behavior: none;
2298
+ width: calc(var(--table-width) - var(--vertical-scrollbar-width));
2299
+ }
2300
+ .vuuTableNext-contentContainer::-webkit-scrollbar {
2301
+ display: none;
2302
+ }
2303
+ .vuuTableNext-table {
2304
+ position: absolute;
2305
+ top: 0;
2306
+ left: 0;
2307
+ table-layout: fixed;
2308
+ width: var(--content-width);
2309
+ margin: 0;
2310
+ border: none;
2311
+ background-color: #fff;
2312
+ border-collapse: separate;
2313
+ border-spacing: 0;
2314
+ }
2315
+ .vuuTableNext-body {
2316
+ height: var(--content-height);
2317
+ }
2318
+ .vuuTableNextCell {
2319
+ display: inline-block;
2320
+ padding: 0 8px;
2321
+ vertical-align: top;
2322
+ }
2323
+ .vuuPinLeft,
2324
+ .vuuPinRight {
2325
+ background-color: inherit;
2326
+ position: sticky;
2327
+ z-index: 1;
2328
+ }
2329
+ .vuuTableNext-col-headings {
2330
+ background-color: white;
2331
+ padding: 0 var(--vuu-table-next-selection-bookend-width, 0);
2332
+ position: sticky;
2333
+ top: 0;
2334
+ z-index: 1;
2335
+ }
2336
+ .vuuTableNext-col-headers {
2337
+ background-color: var(--table-background);
2338
+ white-space: nowrap;
2339
+ }
2340
+ .sizer-cell {
2341
+ background-color: green !important;
2342
+ border: none !important;
2343
+ height: 0px;
2344
+ }
2
2345
  /*# sourceMappingURL=index.css.map */