@vuu-ui/vuu-table-extras 0.8.2 → 0.8.3-debug

package/index.css

@@ -1,2 +1,583 @@
-.vuuTable td:has(> .vuuBackgroundCell){padding:0;text-align:right}.vuuBackgroundCell{padding-right:var(--salt-size-unit);position:relative;z-index:-1}.vuuBackgroundCell-flasher{color:transparent;position:absolute;left:0;right:0;top:0;bottom:0;z-index:-1}.vuuBackgroundCell-flasher{text-align:left}.vuuBackgroundCell-flasher+.num{padding-left:8px}.right .vuuBackgroundCell-flasher{text-align:right}.right .vuuBackgroundCell-flasher+.num{padding-right:8px}.up1>.vuuBackgroundCell-flasher{animation-duration:30s;animation-name:reactbgup1}.up2>.vuuBackgroundCell-flasher{animation-duration:30s;animation-name:reactbgup2}.down1>.vuuBackgroundCell-flasher{animation-duration:30s;animation-name:reactbgdown1}.down2>.vuuBackgroundCell-flasher{animation-duration:30s;animation-name:reactbgdown2}.up1.vuuBackgroundCell-arrowOnly>.vuuBackgroundCell-flasher{animation-duration:30s;animation-name:reactarrowup1}.up2.vuuBackgroundCell-arrowOnly>.vuuBackgroundCell-flasher{animation-duration:30s;animation-name:reactarrowup2}.down1.vuuBackgroundCell-arrowOnly>.vuuBackgroundCell-flasher{animation-duration:30s;animation-name:reactarrowdown1}.down2.vuuBackgroundCell-arrowOnly>.vuuBackgroundCell-flasher{animation-duration:30s;animation-name:reactarrowdown2}.up1.vuuBackgroundCell-arrowBackground>.vuuBackgroundCell-flasher{animation-duration:30s;animation-name:reactbgarrowup1}.up2.vuuBackgroundCell-arrowBackground>.vuuBackgroundCell-flasher{animation-duration:30s;animation-name:reactbgarrowup2}.down1.vuuBackgroundCell-arrowBackground>.vuuBackgroundCell-flasher{animation-duration:30s;animation-name:reactbgarrowdown1}.down2.vuuBackgroundCell-arrowBackground>.vuuBackgroundCell-flasher{animation-duration:30s;animation-name:reactbgarrowdown2}@keyframes reactbgup1{0%{background-color:var(--salt-differential-positive-background)}to{background-color:transparent}}@keyframes reactbgup2{0%{background-color:var(--salt-differential-positive-background)}to{background-color:transparent}}@keyframes reactbgdown1{0%{background-color:var(--salt-differential-negative-background)}to{background-color:transparent}}@keyframes reactbgdown2{0%{background-color:var(--salt-differential-negative-background)}to{background-color:transparent}}@keyframes reactarrowup1{0%{color:var(--salt-differential-positive-foreground)}to{color:transparent}}@keyframes reactarrowup2{0%{color:var(--salt-differential-positive-foreground)}to{color:transparent}}@keyframes reactarrowdown1{0%{color:var(--salt-differential-negative-foreground)}to{color:transparent}}@keyframes reactarrowdown2{0%{color:var(--salt-differential-negative-foreground)}to{color:transparent}}@keyframes reactbgarrowup1{0%{color:var(--salt-differential-positive-foreground);background-color:var(--salt-differential-positive-background)}20%{color:var(--salt-differential-positive-foreground);background-color:transparent}to{color:transparent;background-color:transparent}}@keyframes reactbgarrowup2{0%{color:var(--salt-differential-positive-foreground);background-color:var(--salt-differential-positive-background)}20%{color:var(--salt-differential-positive-foreground);background-color:transparent}to{color:transparent;background-color:transparent}}@keyframes reactbgarrowdown1{0%{color:var(--salt-differential-negative-foreground);background-color:var(--salt-differential-negative-background)}20%{color:var(--salt-differential-negative-foreground);background-color:transparent}to{color:transparent;background-color:transparent}}@keyframes reactbgarrowdown2{0%{color:var(--salt-differential-negative-foreground);background-color:var(--salt-differential-negative-background)}20%{color:var(--salt-differential-negative-foreground);background-color:transparent}to{color:transparent;background-color:transparent}}.vuuProgressCell{align-items:center;display:flex}.vuuProgressCell-track{display:inline-block;flex:auto 1 1;height:4px;overflow:hidden;position:relative}.vuuProgressCell-bg{background-color:var(--salt-measured-background);display:inline-block;height:2px;left:0;position:absolute;top:1px;width:100%}.vuuProgressCell-bar{background-color:var(--salt-measured-fill);display:inline-block;height:100%;left:0;position:absolute;top:0;transform:translate(var(--progress-bar-pct, -100%));width:100%}.vuuProgressCell-text{flex:35px 0 0;text-align:right}.vuuColumnExpressionInput{--vuuFilterEditor-background: var(--salt-container-primary-background);--vuuFilterEditor-color: var(--salt-text-primary-foreground);--vuuFilterEditor-fontFamily: var(--salt-typography-fontFamily);--vuuFilterEditor-fontSize: var(--salt-text-fontSize);--vuuFilterEditor-cursorColor: var(--salt-text-secondary-foreground);--vuuFilterEditor-selectionBackground: var(--salt-text-background-selected);--vuuFilterEditor-tooltipBackground: var(--salt-container-primary-background);--vuuFilterEditor-tooltipBorder: var(--tooltip-status-borderColor) var(--salt-container-borderWidth) var(--salt-container-borderStyle);--vuuFilterEditor-tooltipElevation: var(--salt-overlayable-shadow-popout);--vuuFilterEditor-suggestion-selectedBackground: var(--salt-selectable-background-selected);--vuuFilterEditor-suggestion-selectedColor: var(--salt-text-primary-foreground);--vuuFilterEditor-suggestion-detailColor: var(--salt-text-secondary-foreground-disabled);--vuuFilterEditor-suggestion-height: 24px;--vuuFilterEditor-variableColor: blue;align-items:center;box-sizing:border-box;height:30px}.vuuColumnExpressionInput-FilterButton,.vuuColumnExpressionInput-ClearButton{--vuu-icon-size: 12px;--saltButton-width: 28px}.expression-type-container{margin:0 3px 0 auto;color:var(--salt-text-secondary-foreground)}.expression-kind{display:inline-block;width:50px}.expression-type{display:inline-block;text-align:right;width:50px}.vuuSuggestion{display:flex;align-items:center}.vuuFunctionDoc .function-heading{display:flex;gap:3px}.vuuFunctionDoc .function-name{font-style:italic}.vuuFunctionDoc .param-list{font-style:italic;color:#00f;white-space:pre}.vuuFunctionDoc .function-type{margin-left:auto}.vuuFunctionDoc .example-container{background-color:var(--salt-container-secondary-background);margin:6px 0;padding:3px}.vuuFunctionDoc .example-expression{font-family:var(--salt-typography-fontFamily-code);margin-left:8px;margin-top:6px}.vuuFunctionDoc .example-result{margin-left:8px;margin-top:6px}.vuuColumnListItem{--svg-eye-hidden: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M4.52 5.934L1.393 2.808l1.415-1.415 19.799 19.8-1.415 1.414-3.31-3.31A10.949 10.949 0 0 1 12 21c-5.392 0-9.878-3.88-10.819-9a10.982 10.982 0 0 1 3.34-6.066zm10.237 10.238l-1.464-1.464a3 3 0 0 1-4.001-4.001L7.828 9.243a5 5 0 0 0 6.929 6.929zM7.974 3.76C9.221 3.27 10.58 3 12 3c5.392 0 9.878 3.88 10.819 9a10.947 10.947 0 0 1-2.012 4.592l-3.86-3.86a5 5 0 0 0-5.68-5.68L7.974 3.761z"/></svg>');align-items:center;padding:0!important}.vuuColumnListItem-calculated{--vuu-icon-size: 12px;--column-icon-svg: var(--svg-function);--calculated-background: var(--salt-text-secondary-foreground)}.vuuColumnListItem-hidden{--vuu-icon-size: 14px;--hidden-background: var(--salt-text-secondary-foreground);--hidden-icon-svg: var(--svg-eye-hidden)}.vuuColumnListItem-label{flex:1 1 auto}.vuuColumnListItem-iconType{background-color:var(--calculated-background, transparent);display:inline-block;height:100%;mask:var(--column-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);mask-repeat:no-repeat;-webkit-mask:var(--column-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);-webkit-mask-repeat:no-repeat;width:20px}.vuuColumnListItem-iconHidden{background-color:var(--hidden-background, transparent);display:inline-block;height:100%;mask:var(--hidden-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);mask-repeat:no-repeat;-webkit-mask:var(--hidden-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);-webkit-mask-repeat:no-repeat;width:20px}.vuuColumnPicker{--vuu-icon-color: var(--salt-text-primary-foreground);--vuu-icon-left: 0px;--vuu-icon-size: 12px;display:flex;flex-shrink:0;gap:calc(var(--salt-size-unit) * 2);width:var(--vuuColumnPicker-width, 100%)}.vuuColumnPicker-listColumn{display:flex;flex:1;flex-direction:column}.vuuColumnPicker-listContainer{border:solid 1px var(--salt-container-primary-borderColor);margin-right:var(--salt-size-unit)}.vuuColumnPicker-defineColumn{align-items:center;border-top:solid 1px var(--salt-container-primary-borderColor);display:flex;flex:0 0 calc(100% - var(--salt-size-unit));gap:var(--salt-size-unit);transition:.2s height;margin-top:12px;height:48px}[data-align=right] .vuuColumnPicker-defineColumn{border-top:none;height:0}.vuuColumnPicker-addCalculatedColumn{margin-left:auto;margin-right:var(--salt-size-unit);width:28px}.vuuGridSettingsPanel{--saltFormField-label-width: 150px}.vuuCalculatedColumnPanel{display:flex;flex-direction:column;gap:var(--salt-size-unit)}.vuuDatagridSettingsPanel{--svg-table-settings: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><rect height="3" width="5" x="1" y="10" /><rect height="3" width="5" x="1" y="6" /><rect height="3" width="10" x="7" y="10" /><rect height="3" width="10" x="7" y="6" /><path d="M6,17H1.5a.5.5,0,0,1-.5-.5V14H6Z" /><path d="M16.5,17H7V14H17v2.5A.5.5,0,0,1,16.5,17Z" /><path d="M16.5,1H1.5a.5.5,0,0,0-.5.5V5H17V1.5A.5.5,0,0,0,16.5,1Z" /></svg>');--svg-column-chooser: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M16,1H10V17h6a1,1,0,0,0,1-1V2A1,1,0,0,0,16,1Z" /><path d="M8,1H2A1,1,0,0,0,1,2V16a1,1,0,0,0,1,1H8Z" /></svg>');--svg-column-settings: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M5,17H1.5a.5.5,0,0,1-.5-.5V1.5A.5.5,0,0,1,1.5,1H5Z" /><path d="M8.71,15.4685a1.8065,1.8065,0,0,1-1.11-1.665v-.607a1.806,1.806,0,0,1,1.11-1.665,1.807,1.807,0,0,1,.3875-1.974l.459-.4595a1.792,1.792,0,0,1,1.276-.5285c.057,0,.1115.0115.167.0165V1H7V17H8.773A1.81349,1.81349,0,0,1,8.71,15.4685Z" /><path d="M13.1965,7.6h.607A1.8065,1.8065,0,0,1,15.468,8.7095,1.77249,1.77249,0,0,1,17,8.7815V1.5a.5.5,0,0,0-.5-.5H13V7.63A1.70987,1.70987,0,0,1,13.1965,7.6Z" /><path d="M17.5965,12.893H16.534a3.0709,3.0709,0,0,0-.45-1.0895l.7565-.7565a.3035.3035,0,0,0,0-.429l-.46-.46a.3035.3035,0,0,0-.429,0l-.7555.757a3.07263,3.07263,0,0,0-1.089-.45V9.4035A.3035.3035,0,0,0,13.8035,9.1h-.607a.3035.3035,0,0,0-.3035.3035V10.466a3.07263,3.07263,0,0,0-1.089.45l-.7565-.7565a.3035.3035,0,0,0-.429,0l-.46.46a.3035.3035,0,0,0,0,.429l.7565.7565a3.0709,3.0709,0,0,0-.45,1.0895H9.4035A.3035.3035,0,0,0,9.1,13.198v.607a.3035.3035,0,0,0,.3035.3035H10.466a3.0709,3.0709,0,0,0,.45,1.0895l-.7565.7565a.3035.3035,0,0,0,0,.429l.46.46a.3035.3035,0,0,0,.429,0l.7565-.7565a3.07263,3.07263,0,0,0,1.089.45v1.0625a.3035.3035,0,0,0,.3035.3035h.607a.3035.3035,0,0,0,.3035-.3035V16.534a3.07263,3.07263,0,0,0,1.089-.45l.7565.7565a.3035.3035,0,0,0,.429,0l.46-.46a.3035.3035,0,0,0,0-.429l-.7575-.7555a3.0709,3.0709,0,0,0,.45-1.0895h1.0625a.3035.3035,0,0,0,.3035-.3035v-.6065a.3035.3035,0,0,0-.3035-.3035ZM13.5,15.25a1.75,1.75,0,1,1,1.75-1.75A1.75,1.75,0,0,1,13.5,15.25Z" /></svg>');--saltToolbar-background: transparent;--vuuView-borderStyle: solid;--vuuColumnPicker-width: 100%;--vuuColumnSettings-width: 50%;background-color:var(--salt-container-primary-background);display:flex;flex-direction:column;height:442px;width:520px}[data-icon=column-chooser]{--vuu-icon-svg: var(--svg-column-chooser)}[data-icon=column-settings]{--vuu-icon-svg: var(--svg-column-settings)}[data-icon=table-settings]{--vuu-icon-svg: var(--svg-table-settings)}[data-icon=define-column]{--vuu-icon-svg: var(--svg-function)}.vuuDatagridSettingsPanel-header{flex:0 0 50px}.vuuDatagridSettingsPanel-stack{flex:1;gap:24px;overflow:hidden}.vuuDatagridSettingsPanel-stack>.saltToolbar{--saltToolbar-background: var(--salt-container-secondary-background);--vuu-icon-color: var(--salt-text-secondary-foreground);--vuu-icon-size: 18px;--vuu-icon-height: 36px;--vuu-icon-width: 36px;border-bottom:none}.vuuDatagridSettingsPanel-stack>.saltToolbar .saltTabstrip{--tabs-activationIndicator-inset: 0px auto 0px 1px}.vuuDatagridSettingsPanel-stack>.saltToolbar .saltTab[aria-selected=true],.vuuDatagridSettingsPanel-stack>.saltToolbar .saltTab:hover{--vuu-icon-color: var(--salt-text-primary-foreground)}.vuuDatagridSettingsPanel-stack>.saltToolbar{--saltToolbar-background: var(--salt-container-secondary-background)}.vuuDatagridSettingsPanel-columnPanels{display:flex;flex-flow:nowrap;gap:calc(var(--salt-size-unit) * 1);margin:var(--salt-size-unit) 0;overflow:hidden;position:relative}.vuuDatagridSettingsPanel-columnPanels>*{transition:.3s transform ease-out;transform:translateZ(0)}.vuuDatagridSettingsPanel-columnPanels[data-align=right]>*{transform:translate3d(-235px,0,0)}.vuuDatagridSettingsPanel-columnToolbar{--saltButton-width: 60px}.vuuDatagridSettingsPanel-columnToolbar>.Responsive-inner{align-items:center}.vuuDatagridSettingsPanel-buttonBar{align-items:center;border-top:solid 1px var(--salt-separable-primary-borderColor);display:flex;flex:0 0 40px;gap:var(--salt-size-unit);justify-content:flex-end;padding:0 var(--salt-size-unit)}.vuuDatasourceStats{display:flex;gap:var(--salt-size-unit)}.vuuColumnTypePanel{--settings-panel-marginTop: 0px}.vuuColumnTypePanel-renderer{--saltButton-background: var(--salt-container-secondary-background);--saltButton-background-hover: var(--salt-actionable-secondary-background-hover)}.vuuColumnSettingsPanel{--saltFormField-margin: 3px 0;--saltFormField-label-width: 80px;--saltPanel-padding: var(--salt-size-unit);align-items:flex-start;border-left:solid 1px var(--salt-container-primary-borderColor);display:flex;flex-direction:column;flex-shrink:0;min-width:220px;padding-left:calc(var(--salt-size-unit) * 2);width:var(--vuuColumnSettings-width, auto)}.vuuColumnSettingsPanel-columnTabs{--saltFormField-margin: 0}.vuuColumnSettingsPanel-columnTabs .saltFormField{margin-left:0!important}.vuuColumnSettingsPanel .saltPanel{--saltFormField-margin: 3px 0;margin-top:var(--settings-panel-marginTop, var(--salt-size-unit));align-items:stretch;display:flex;flex-direction:column;gap:var(--salt-size-unit)}.vuuColumnPanelSwitch{white-space:nowrap;width:100%}.vuuColumnSettingsPanel .saltSwitch{margin-left:auto}
+/* src/cell-renderers/background-cell/BackgroundCell.css */
+.vuuTable td:has(> .vuuBackgroundCell) {
+  padding: 0;
+  text-align: right;
+}
+.vuuBackgroundCell {
+  padding-right: var(--salt-size-unit);
+  position: relative;
+  z-index: -1;
+}
+.vuuBackgroundCell-flasher {
+  color: transparent;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: -1;
+}
+.vuuBackgroundCell-flasher {
+  text-align: left;
+}
+.vuuBackgroundCell-flasher + .num {
+  padding-left: 8px;
+}
+.right .vuuBackgroundCell-flasher {
+  text-align: right;
+}
+.right .vuuBackgroundCell-flasher + .num {
+  padding-right: 8px;
+}
+.up1 > .vuuBackgroundCell-flasher {
+  animation-duration: 30s;
+  animation-name: reactbgup1;
+}
+.up2 > .vuuBackgroundCell-flasher {
+  animation-duration: 30s;
+  animation-name: reactbgup2;
+}
+.down1 > .vuuBackgroundCell-flasher {
+  animation-duration: 30s;
+  animation-name: reactbgdown1;
+}
+.down2 > .vuuBackgroundCell-flasher {
+  animation-duration: 30s;
+  animation-name: reactbgdown2;
+}
+.up1.vuuBackgroundCell-arrowOnly > .vuuBackgroundCell-flasher {
+  animation-duration: 30s;
+  animation-name: reactarrowup1;
+}
+.up2.vuuBackgroundCell-arrowOnly > .vuuBackgroundCell-flasher {
+  animation-duration: 30s;
+  animation-name: reactarrowup2;
+}
+.down1.vuuBackgroundCell-arrowOnly > .vuuBackgroundCell-flasher {
+  animation-duration: 30s;
+  animation-name: reactarrowdown1;
+}
+.down2.vuuBackgroundCell-arrowOnly > .vuuBackgroundCell-flasher {
+  animation-duration: 30s;
+  animation-name: reactarrowdown2;
+}
+.up1.vuuBackgroundCell-arrowBackground > .vuuBackgroundCell-flasher {
+  animation-duration: 30s;
+  animation-name: reactbgarrowup1;
+}
+.up2.vuuBackgroundCell-arrowBackground > .vuuBackgroundCell-flasher {
+  animation-duration: 30s;
+  animation-name: reactbgarrowup2;
+}
+.down1.vuuBackgroundCell-arrowBackground > .vuuBackgroundCell-flasher {
+  animation-duration: 30s;
+  animation-name: reactbgarrowdown1;
+}
+.down2.vuuBackgroundCell-arrowBackground > .vuuBackgroundCell-flasher {
+  animation-duration: 30s;
+  animation-name: reactbgarrowdown2;
+}
+
+/* src/cell-renderers/background-cell/FlashingBackground.css */
+@keyframes reactbgup1 {
+  from {
+    background-color: var(--salt-differential-positive-background);
+  }
+  to {
+    background-color: transparent;
+  }
+}
+@keyframes reactbgup2 {
+  from {
+    background-color: var(--salt-differential-positive-background);
+  }
+  to {
+    background-color: transparent;
+  }
+}
+@keyframes reactbgdown1 {
+  from {
+    background-color: var(--salt-differential-negative-background);
+  }
+  to {
+    background-color: transparent;
+  }
+}
+@keyframes reactbgdown2 {
+  from {
+    background-color: var(--salt-differential-negative-background);
+  }
+  to {
+    background-color: transparent;
+  }
+}
+@keyframes reactarrowup1 {
+  from {
+    color: var(--salt-differential-positive-foreground);
+  }
+  to {
+    color: transparent;
+  }
+}
+@keyframes reactarrowup2 {
+  from {
+    color: var(--salt-differential-positive-foreground);
+  }
+  to {
+    color: transparent;
+  }
+}
+@keyframes reactarrowdown1 {
+  from {
+    color: var(--salt-differential-negative-foreground);
+  }
+  to {
+    color: transparent;
+  }
+}
+@keyframes reactarrowdown2 {
+  from {
+    color: var(--salt-differential-negative-foreground);
+  }
+  to {
+    color: transparent;
+  }
+}
+@keyframes reactbgarrowup1 {
+  0% {
+    color: var(--salt-differential-positive-foreground);
+    background-color: var(--salt-differential-positive-background);
+  }
+  20% {
+    color: var(--salt-differential-positive-foreground);
+    background-color: transparent;
+  }
+  100% {
+    color: transparent;
+    background-color: transparent;
+  }
+}
+@keyframes reactbgarrowup2 {
+  0% {
+    color: var(--salt-differential-positive-foreground);
+    background-color: var(--salt-differential-positive-background);
+  }
+  20% {
+    color: var(--salt-differential-positive-foreground);
+    background-color: transparent;
+  }
+  100% {
+    color: transparent;
+    background-color: transparent;
+  }
+}
+@keyframes reactbgarrowdown1 {
+  0% {
+    color: var(--salt-differential-negative-foreground);
+    background-color: var(--salt-differential-negative-background);
+  }
+  20% {
+    color: var(--salt-differential-negative-foreground);
+    background-color: transparent;
+  }
+  100% {
+    color: transparent;
+    background-color: transparent;
+  }
+}
+@keyframes reactbgarrowdown2 {
+  0% {
+    color: var(--salt-differential-negative-foreground);
+    background-color: var(--salt-differential-negative-background);
+  }
+  20% {
+    color: var(--salt-differential-negative-foreground);
+    background-color: transparent;
+  }
+  100% {
+    color: transparent;
+    background-color: transparent;
+  }
+}
+
+/* src/cell-renderers/progress-cell/ProgressCell.css */
+.vuuProgressCell {
+  align-items: center;
+  display: flex;
+}
+.vuuProgressCell-track {
+  display: inline-block;
+  flex: auto 1 1;
+  height: 4px;
+  overflow: hidden;
+  position: relative;
+}
+.vuuProgressCell-bg {
+  background-color: var(--salt-measured-background);
+  display: inline-block;
+  height: 2px;
+  left: 0;
+  position: absolute;
+  top: 1px;
+  width: 100%;
+}
+.vuuProgressCell-bar {
+  background-color: var(--salt-measured-fill);
+  display: inline-block;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  transform: translateX(var(--progress-bar-pct, -100%));
+  width: 100%;
+}
+.vuuProgressCell-text {
+  flex: 35px 0 0;
+  text-align: right;
+}
+
+/* src/column-expression-input/ColumnExpressionInput.css */
+.vuuColumnExpressionInput {
+  --vuuFilterEditor-background: var(--salt-container-primary-background);
+  --vuuFilterEditor-color: var(--salt-text-primary-foreground);
+  --vuuFilterEditor-fontFamily: var(--salt-typography-fontFamily);
+  --vuuFilterEditor-fontSize: var(--salt-text-fontSize);
+  --vuuFilterEditor-cursorColor: var(--salt-text-secondary-foreground);
+  --vuuFilterEditor-selectionBackground: var(--salt-text-background-selected);
+  --vuuFilterEditor-tooltipBackground: var(--salt-container-primary-background);
+  --vuuFilterEditor-tooltipBorder: var(--tooltip-status-borderColor) var(--salt-container-borderWidth) var(--salt-container-borderStyle);
+  --vuuFilterEditor-tooltipElevation: var(--salt-overlayable-shadow-popout);
+  --vuuFilterEditor-suggestion-selectedBackground: var(--salt-selectable-background-selected);
+  --vuuFilterEditor-suggestion-selectedColor: var(--salt-text-primary-foreground);
+  --vuuFilterEditor-suggestion-detailColor: var(--salt-text-secondary-foreground-disabled);
+  --vuuFilterEditor-suggestion-height: 24px;
+  --vuuFilterEditor-variableColor: blue;
+  align-items: center;
+  box-sizing: border-box;
+  height: 30px;
+}
+.vuuColumnExpressionInput-FilterButton,
+.vuuColumnExpressionInput-ClearButton {
+  --vuu-icon-size: 12px;
+  --saltButton-width: 28px;
+}
+.expression-type-container {
+  margin: 0 3px 0 auto;
+  color: var(--salt-text-secondary-foreground);
+}
+.expression-kind {
+  display: inline-block;
+  width: 50px;
+}
+.expression-type {
+  display: inline-block;
+  text-align: right;
+  width: 50px;
+}
+.vuuSuggestion {
+  display: flex;
+  align-items: center;
+}
+.vuuFunctionDoc .function-heading {
+  display: flex;
+  gap: 3px;
+}
+.vuuFunctionDoc .function-name {
+  font-style: italic;
+}
+.vuuFunctionDoc .param-list {
+  font-style: italic;
+  color: blue;
+  white-space: pre;
+}
+.vuuFunctionDoc .function-type {
+  margin-left: auto;
+}
+.vuuFunctionDoc .example-container {
+  background-color: var(--salt-container-secondary-background);
+  margin: 6px 0;
+  padding: 3px;
+}
+.vuuFunctionDoc .example-expression {
+  font-family: var(--salt-typography-fontFamily-code);
+  margin-left: 8px;
+  margin-top: 6px;
+}
+.vuuFunctionDoc .example-result {
+  margin-left: 8px;
+  margin-top: 6px;
+}
+
+/* src/datagrid-configuration-ui/column-picker/ColumnListItem.css */
+.vuuColumnListItem {
+  --svg-eye-hidden: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M4.52 5.934L1.393 2.808l1.415-1.415 19.799 19.8-1.415 1.414-3.31-3.31A10.949 10.949 0 0 1 12 21c-5.392 0-9.878-3.88-10.819-9a10.982 10.982 0 0 1 3.34-6.066zm10.237 10.238l-1.464-1.464a3 3 0 0 1-4.001-4.001L7.828 9.243a5 5 0 0 0 6.929 6.929zM7.974 3.76C9.221 3.27 10.58 3 12 3c5.392 0 9.878 3.88 10.819 9a10.947 10.947 0 0 1-2.012 4.592l-3.86-3.86a5 5 0 0 0-5.68-5.68L7.974 3.761z"/></svg>');
+  align-items: center;
+  padding: 0 !important;
+}
+.vuuColumnListItem-calculated {
+  --vuu-icon-size: 12px;
+  --column-icon-svg: var(--svg-function);
+  --calculated-background: var(--salt-text-secondary-foreground);
+}
+.vuuColumnListItem-hidden {
+  --vuu-icon-size: 14px;
+  --hidden-background: var(--salt-text-secondary-foreground);
+  --hidden-icon-svg: var(--svg-eye-hidden);
+}
+.vuuColumnListItem-label {
+  flex: 1 1 auto;
+}
+.vuuColumnListItem-iconType {
+  background-color: var(--calculated-background, transparent);
+  display: inline-block;
+  height: 100%;
+  mask: var(--column-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);
+  mask-repeat: no-repeat;
+  -webkit-mask: var(--column-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);
+  -webkit-mask-repeat: no-repeat;
+  width: 20px;
+}
+.vuuColumnListItem-iconHidden {
+  background-color: var(--hidden-background, transparent);
+  display: inline-block;
+  height: 100%;
+  mask: var(--hidden-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);
+  mask-repeat: no-repeat;
+  -webkit-mask: var(--hidden-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);
+  -webkit-mask-repeat: no-repeat;
+  width: 20px;
+}
+
+/* src/datagrid-configuration-ui/column-picker/ColumnPicker.css */
+.vuuColumnPicker {
+  --vuu-icon-color: var(--salt-text-primary-foreground);
+  --vuu-icon-left: 0px;
+  --vuu-icon-size: 12px;
+  display: flex;
+  flex-shrink: 0;
+  gap: calc(var(--salt-size-unit) * 2);
+  width: var(--vuuColumnPicker-width, 100%);
+}
+.vuuColumnPicker-listColumn {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+}
+.vuuColumnPicker-listContainer {
+  border: solid 1px var(--salt-container-primary-borderColor);
+  margin-right: var(--salt-size-unit);
+}
+.vuuColumnPicker-defineColumn {
+  align-items: center;
+  border-top: solid 1px var(--salt-container-primary-borderColor);
+  display: flex;
+  flex: 0 0 calc(100% - var(--salt-size-unit));
+  gap: var(--salt-size-unit);
+  transition: .2s height;
+  margin-top: 12px;
+  height: 48px;
+}
+[data-align=right] .vuuColumnPicker-defineColumn {
+  border-top: none;
+  height: 0;
+}
+.vuuColumnPicker-addCalculatedColumn {
+  margin-left: auto;
+  margin-right: var(--salt-size-unit);
+  width: 28px;
+}
+
+/* src/datagrid-configuration-ui/column-type-panel/ColumnTypePanel.css */
+.vuuColumnTypePanel {
+  --settings-panel-marginTop: 0px;
+}
+.vuuColumnTypePanel-renderer {
+  --saltButton-background: var(--salt-container-secondary-background);
+  --saltButton-background-hover: var(--salt-actionable-secondary-background-hover);
+}
+
+/* src/datagrid-configuration-ui/column-settings-panel/ColumnSettingsPanel.css */
+.vuuColumnSettingsPanel {
+  --saltFormField-margin: 3px 0;
+  --saltFormField-label-width: 80px;
+  --saltPanel-padding: var(--salt-size-unit);
+  align-items: flex-start;
+  border-left: solid 1px var(--salt-container-primary-borderColor);
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  min-width: 220px;
+  padding-left: calc(var(--salt-size-unit) * 2);
+  width: var(--vuuColumnSettings-width, auto);
+}
+.vuuColumnSettingsPanel-columnTabs {
+  --saltFormField-margin: 0;
+}
+.vuuColumnSettingsPanel-columnTabs .saltFormField {
+  margin-left: 0 !important;
+}
+.vuuColumnSettingsPanel .saltPanel {
+  --saltFormField-margin: 3px 0;
+  margin-top: var(--settings-panel-marginTop, var(--salt-size-unit));
+  align-items: stretch;
+  display: flex;
+  flex-direction: column;
+  gap: var(--salt-size-unit);
+}
+.vuuColumnPanelSwitch {
+  white-space: nowrap;
+  width: 100%;
+}
+.vuuColumnSettingsPanel .saltSwitch {
+  margin-left: auto;
+}
+
+/* src/datagrid-configuration-ui/settings-panel/GridSettingsPanel.css */
+.vuuGridSettingsPanel {
+  --saltFormField-label-width: 150px;
+}
+
+/* src/datagrid-configuration-ui/calculated-column-panel/CalculatedColumnPanel.css */
+.vuuCalculatedColumnPanel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--salt-size-unit);
+}
+
+/* src/datagrid-configuration-ui/settings-panel/DatagridSettingsPanel.css */
+.vuuDialog-gridConfig {
+}
+.vuuDatagridSettingsPanel {
+  --svg-table-settings: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><rect height="3" width="5" x="1" y="10" /><rect height="3" width="5" x="1" y="6" /><rect height="3" width="10" x="7" y="10" /><rect height="3" width="10" x="7" y="6" /><path d="M6,17H1.5a.5.5,0,0,1-.5-.5V14H6Z" /><path d="M16.5,17H7V14H17v2.5A.5.5,0,0,1,16.5,17Z" /><path d="M16.5,1H1.5a.5.5,0,0,0-.5.5V5H17V1.5A.5.5,0,0,0,16.5,1Z" /></svg>');
+  --svg-column-chooser: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M16,1H10V17h6a1,1,0,0,0,1-1V2A1,1,0,0,0,16,1Z" /><path d="M8,1H2A1,1,0,0,0,1,2V16a1,1,0,0,0,1,1H8Z" /></svg>');
+  --svg-column-settings: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M5,17H1.5a.5.5,0,0,1-.5-.5V1.5A.5.5,0,0,1,1.5,1H5Z" /><path d="M8.71,15.4685a1.8065,1.8065,0,0,1-1.11-1.665v-.607a1.806,1.806,0,0,1,1.11-1.665,1.807,1.807,0,0,1,.3875-1.974l.459-.4595a1.792,1.792,0,0,1,1.276-.5285c.057,0,.1115.0115.167.0165V1H7V17H8.773A1.81349,1.81349,0,0,1,8.71,15.4685Z" /><path d="M13.1965,7.6h.607A1.8065,1.8065,0,0,1,15.468,8.7095,1.77249,1.77249,0,0,1,17,8.7815V1.5a.5.5,0,0,0-.5-.5H13V7.63A1.70987,1.70987,0,0,1,13.1965,7.6Z" /><path d="M17.5965,12.893H16.534a3.0709,3.0709,0,0,0-.45-1.0895l.7565-.7565a.3035.3035,0,0,0,0-.429l-.46-.46a.3035.3035,0,0,0-.429,0l-.7555.757a3.07263,3.07263,0,0,0-1.089-.45V9.4035A.3035.3035,0,0,0,13.8035,9.1h-.607a.3035.3035,0,0,0-.3035.3035V10.466a3.07263,3.07263,0,0,0-1.089.45l-.7565-.7565a.3035.3035,0,0,0-.429,0l-.46.46a.3035.3035,0,0,0,0,.429l.7565.7565a3.0709,3.0709,0,0,0-.45,1.0895H9.4035A.3035.3035,0,0,0,9.1,13.198v.607a.3035.3035,0,0,0,.3035.3035H10.466a3.0709,3.0709,0,0,0,.45,1.0895l-.7565.7565a.3035.3035,0,0,0,0,.429l.46.46a.3035.3035,0,0,0,.429,0l.7565-.7565a3.07263,3.07263,0,0,0,1.089.45v1.0625a.3035.3035,0,0,0,.3035.3035h.607a.3035.3035,0,0,0,.3035-.3035V16.534a3.07263,3.07263,0,0,0,1.089-.45l.7565.7565a.3035.3035,0,0,0,.429,0l.46-.46a.3035.3035,0,0,0,0-.429l-.7575-.7555a3.0709,3.0709,0,0,0,.45-1.0895h1.0625a.3035.3035,0,0,0,.3035-.3035v-.6065a.3035.3035,0,0,0-.3035-.3035ZM13.5,15.25a1.75,1.75,0,1,1,1.75-1.75A1.75,1.75,0,0,1,13.5,15.25Z" /></svg>');
+  --saltToolbar-background: transparent;
+  --vuuView-borderStyle: solid;
+  --vuuColumnPicker-width: 100%;
+  --vuuColumnSettings-width: 50%;
+  background-color: var(--salt-container-primary-background);
+  display: flex;
+  flex-direction: column;
+  height: 442px;
+  width: 520px;
+}
+[data-icon=column-chooser] {
+  --vuu-icon-svg: var(--svg-column-chooser);
+}
+[data-icon=column-settings] {
+  --vuu-icon-svg: var(--svg-column-settings);
+}
+[data-icon=table-settings] {
+  --vuu-icon-svg: var(--svg-table-settings);
+}
+[data-icon=define-column] {
+  --vuu-icon-svg: var(--svg-function);
+}
+.vuuDatagridSettingsPanel-header {
+  flex: 0 0 50px;
+}
+.vuuDatagridSettingsPanel-stack {
+  flex: 1;
+  gap: 24px;
+  overflow: hidden;
+}
+.vuuDatagridSettingsPanel-stack > .saltToolbar {
+  --saltToolbar-background: var(--salt-container-secondary-background);
+  --vuu-icon-color: var(--salt-text-secondary-foreground);
+  --vuu-icon-size: 18px;
+  --vuu-icon-height: 36px;
+  --vuu-icon-width: 36px;
+  border-bottom: none;
+}
+.vuuDatagridSettingsPanel-stack > .saltToolbar .saltTabstrip {
+  --tabs-activationIndicator-inset: 0px auto 0px 1px;
+}
+.vuuDatagridSettingsPanel-stack > .saltToolbar .saltTab[aria-selected=true],
+.vuuDatagridSettingsPanel-stack > .saltToolbar .saltTab:hover {
+  --vuu-icon-color: var(--salt-text-primary-foreground);
+}
+.vuuDatagridSettingsPanel-stack > .saltToolbar {
+  --saltToolbar-background: var(--salt-container-secondary-background);
+}
+.vuuDatagridSettingsPanel-columnPanels {
+  display: flex;
+  flex-flow: nowrap;
+  gap: calc(var(--salt-size-unit) * 1);
+  margin: var(--salt-size-unit) 0;
+  overflow: hidden;
+  position: relative;
+}
+.vuuDatagridSettingsPanel-columnPanels > * {
+  transition: .3s transform ease-out;
+  transform: translate3d(0px, 0px, 0px);
+}
+.vuuDatagridSettingsPanel-columnPanels[data-align=right] > * {
+  transform: translate3d(-235px, 0px, 0px);
+}
+.vuuDatagridSettingsPanel-columnToolbar {
+  --saltButton-width: 60px;
+}
+.vuuDatagridSettingsPanel-columnToolbar > .Responsive-inner {
+  align-items: center;
+}
+.vuuDatagridSettingsPanel-buttonBar {
+  align-items: center;
+  border-top: solid 1px var(--salt-separable-primary-borderColor);
+  display: flex;
+  flex: 0 0 40px;
+  gap: var(--salt-size-unit);
+  justify-content: flex-end;
+  padding: 0 var(--salt-size-unit);
+}
+
+/* src/datasource-stats/DatasourceStats.css */
+.vuuDatasourceStats {
+  display: flex;
+  gap: var(--salt-size-unit);
+}
+
+/* src/table-settings/column-type-panel/ColumnTypePanel.css */
+.vuuColumnTypePanel {
+  --settings-panel-marginTop: 0px;
+}
+.vuuColumnTypePanel-renderer {
+  --saltButton-background: var(--salt-container-secondary-background);
+  --saltButton-background-hover: var(--salt-actionable-secondary-background-hover);
+}
+
+/* src/table-settings/column-settings-panel/ColumnSettingsPanel.css */
+.vuuColumnSettingsPanel {
+  --saltFormField-margin: 3px 0;
+  --saltFormField-label-width: 80px;
+  --saltPanel-padding: var(--salt-size-unit);
+  align-items: flex-start;
+  border-left: solid 1px var(--salt-container-primary-borderColor);
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  min-width: 220px;
+  padding-left: calc(var(--salt-size-unit) * 2);
+  width: var(--vuuColumnSettings-width, auto);
+}
+.vuuColumnSettingsPanel-columnTabs {
+  --saltFormField-margin: 0;
+}
+.vuuColumnSettingsPanel-columnTabs .saltFormField {
+  margin-left: 0 !important;
+}
+.vuuColumnSettingsPanel .saltPanel {
+  --saltFormField-margin: 3px 0;
+  margin-top: var(--settings-panel-marginTop, var(--salt-size-unit));
+  align-items: stretch;
+  display: flex;
+  flex-direction: column;
+  gap: var(--salt-size-unit);
+}
+.vuuColumnPanelSwitch {
+  white-space: nowrap;
+  width: 100%;
+}
+.vuuColumnSettingsPanel .saltSwitch {
+  margin-left: auto;
+}
 /*# sourceMappingURL=index.css.map */