@vuu-ui/vuu-filters 0.8.7-debug → 0.8.8-debug

package/index.css

@@ -1,3 +1,45 @@
+/* src/filter-pill-menu/FilterPillMenu.css */
+.vuuFilterPillMenu {
+  top: -2px;
+}
+
+/* src/filter-pill/FilterPill.css */
+.vuuFilterPill {
+  align-items: center;
+  border: solid 1px var(--salt-taggable-foreground);
+  border-radius: 26px;
+  display: flex;
+  height: 26px;
+  padding: 0 8px;
+  position: relative;
+}
+
+/* src/filter-bar/FilterBar.css */
+.vuuFilterBar {
+  --vuu-svg-tune: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 18C3 18.55 3.45 19 4 19H9V17H4C3.45 17 3 17.45 3 18ZM3 6C3 6.55 3.45 7 4 7H13V5H4C3.45 5 3 5.45 3 6ZM13 20V19H20C20.55 19 21 18.55 21 18C21 17.45 20.55 17 20 17H13V16C13 15.45 12.55 15 12 15C11.45 15 11 15.45 11 16V20C11 20.55 11.45 21 12 21C12.55 21 13 20.55 13 20ZM7 10V11H4C3.45 11 3 11.45 3 12C3 12.55 3.45 13 4 13H7V14C7 14.55 7.45 15 8 15C8.55 15 9 14.55 9 14V10C9 9.45 8.55 9 8 9C7.45 9 7 9.45 7 10ZM21 12C21 11.45 20.55 11 20 11H11V13H20C20.55 13 21 12.55 21 12ZM16 9C16.55 9 17 8.55 17 8V7H20C20.55 7 21 6.55 21 6C21 5.45 20.55 5 20 5H17V4C17 3.45 16.55 3 16 3C15.45 3 15 3.45 15 4V8C15 8.55 15.45 9 16 9Z" /></svg>');
+  --saltButton-height: 26px;
+  --saltButton-width: 26px;
+  align-items: center;
+  background-color: var(--salt-container-secondary-background);
+  border-bottom: solid 1px #D6D7DA;
+  display: flex;
+  gap: 4px;
+  height: 33px;
+  padding: 4px 8px;
+}
+.vuuFilterbar-icon {
+  display: inline-block;
+  height: 16px;
+  width: 16px;
+}
+.vuuFilterBar [data-icon=tune] {
+  --vuu-icon-size: 16px;
+  --vuu-icon-svg: var(--vuu-svg-tune);
+}
+.vuuFilterBar [data-icon=plus] {
+  --vuu-icon-size: 16px;
+}
+
 /* ../vuu-shell/src/connection-status/ConnectionStatusIcon.css */
 .vuuStatus-container {
   display: flex;
@@ -1181,6 +1223,8 @@ vuuUserPanel-history {
 .vuuContextPanel-inner {
   background-color: var(--salt-container-primary-background);
   box-shadow: var(--vuu-side-panel-shadow, none);
+  display: flex;
+  flex-direction: column;
   height: 100%;
   padding-bottom: 24px;
   padding-top: 24px;
@@ -1201,7 +1245,7 @@ vuuUserPanel-history {
   align-items: center;
   display: flex;
   flex-wrap: nowrap;
-  height: 27px;
+  flex: 0 0 27px;
   justify-content: space-between;
 }
 .vuuContextPanel-title {
@@ -1209,6 +1253,10 @@ vuuUserPanel-history {
   font-weight: 700;
   white-space: nowrap;
 }
+.vuuContextPanel-content {
+  flex: 1 1 auto;
+  width: 100%;
+}
 
 /* ../vuu-shell/src/shell.css */
 .vuuShell {
@@ -1225,763 +1273,6 @@ vuuUserPanel-history {
   height: 100%;
 }
 
-/* ../vuu-popups/src/dialog/Dialog.css */
-.vuuDialog {
-  background: var(--salt-container-primary-background);
-  border: var(--vuuDialog-border, solid 1px #ccc);
-  border-radius: 5px;
-  padding: var(--vuuDialog-padding, 0);
-  box-shadow: var(--salt-overlayable-shadow, none);
-  height: var(--vuuDialog-height, fit-content);
-  width: var(--vuuDialog-width, fit-content);
-}
-.vuuDialog-header {
-  --saltButton-height: 28px;
-  --saltButton-width: 28px;
-  --saltToolbar-background: transparent;
-  --saltToolbar-height: calc(var(--salt-size-base) + 5px);
-  border-bottom: solid 1px var(--salt-container-primary-borderColor);
-}
-.vuuDialog-header > .Responsive-inner {
-  align-items: center;
-}
-.vuuDialog-header > .Responsive-inner > :last-child {
-  right: 2px;
-}
-
-/* ../vuu-popups/src/menu/MenuList.css */
-.vuuMenuList {
-  --context-menu-color: var(--vuuMenuList-color,#161616);
-  --context-menu-padding: var(--hw-list-item-padding, 0 6px);
-  --context-menu-shadow: var(--hw-dialog-shadow, 0 6px 12px rgba(0, 0, 0, 0.175));
-  --focus-visible-border-color: var(--hw-focus-visible-border-color, rgb(141, 154, 179));
-  --context-menu-highlight-bg: #a4d5f4;
-  --context-menu-blur-focus-bg: #e0e4e9;
-  --menu-item-icon-color: black;
-  --menu-item-twisty-color: black;
-  --menu-item-twisty-content: "";
-  --menu-item-twisty-top: 50%;
-  --menu-item-twisty-left: auto;
-  --menu-item-twisty-right: 0px;
-  --menu-icon-size: 12px;
-  background-clip: padding-box;
-  background-color: white;
-  border-radius: 4px;
-  border: solid 1px var(--vuuMenuList-borderColor, rgba(0, 0, 0, 0.15));
-  box-shadow: var(--context-menu-shadow);
-  font-size: var(--vuuMenuList-fontSize, var(--salt-text-label-fontSize));
-  font-weight: var(--salt-typography-fontWeight-semiBold);
-  list-style: none;
-  margin: 2px 0 0;
-  outline: 0;
-  overflow: hidden;
-  padding: var(--vuuMenuList-padding, 0);
-  position: absolute;
-}
-.vuuMenuItem {
-  align-items: center;
-  border-width: 1px;
-  border-color: var(--vuuMenuItem-borderColor, transparent);
-  border-style: var(--vuuMenuItem-borderStyle, none);
-  color: var(--context-menu-color);
-  display: flex;
-  gap: 6px;
-  height: var(--vuuMenuItem-height, var(--hw-list-item-height, 24px));
-  padding: var(--context-menu-padding);
-  padding-right: 24px;
-  position: relative;
-  white-space: nowrap;
-}
-.vuuIconContainer {
-  display: inline-block;
-  flex: 12px 0 0;
-  height: var(--menu-icon-size);
-  mask-repeat: no-repeat;
-  width: var(--menu-icon-size);
-}
-.vuuMenuItem[aria-expanded=true] {
-  background-color: var(--context-menu-blur-focus-bg);
-}
-.vuuMenuItem-separator {
-  border-top: solid 1px var(--context-menu-blur-focus-bg);
-}
-.vuuMenuItem[aria-haspopup=true]:after {
-  content: var(--menu-item-twisty-content);
-  -webkit-mask: var(--vuu-svg-chevron-right) center center/8px 8px no-repeat;
-  mask: var(---vuu-svg-chevron-right) center center/8px 8px no-repeat;
-  background-color: var(--menu-item-twisty-color);
-  height: 16px;
-  left: var(--menu-item-twisty-left);
-  right: var(--menu-item-twisty-right);
-  margin-top: -8px;
-  position: absolute;
-  top: var(--menu-item-twisty-top);
-  transition: transform 0.3s;
-  width: 16px;
-}
-.vuuMenuItem[data-highlighted] {
-  background-color: var(--context-menu-highlight-bg);
-}
-.vuuMenuItem:hover {
-  background-color: var(--context-menu-highlight-bg);
-  cursor: default;
-}
-.vuuMenuList-childMenuShowing .vuuMenuItem[data-highlighted] {
-  background-color: var(--context-menu-blur-focus-bg);
-}
-.vuuMenuItem.focusVisible:before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0px;
-  border: dotted var(--focus-visible-border-color) 2px;
-}
-.vuuPopupContainer.top-bottom-right-right .popup-menu {
-  left: auto;
-  right: 0;
-}
-.popup-menu .menu-item.showing > button,
-.popup-menu .menu-item > button:focus,
-.popup-menu .menu-item > button:hover {
-  text-decoration: none;
-  color: rgb(0, 0, 0);
-  background-color: rgb(220, 220, 220);
-}
-.vuuMenuItem-button:active,
-.vuuMenuItem-button:hover {
-  outline: 0;
-}
-.popup-menu .menu-item.disabled > button {
-  clear: both;
-  font-weight: normal;
-  line-height: 1.5;
-  color: rgb(120, 120, 120);
-  white-space: nowrap;
-  text-decoration: none;
-  cursor: default;
-}
-
-/* ../vuu-popups/src/popup/popup-service.css */
-.vuuPopup {
-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 0;
-  height: 0;
-  overflow: visible;
-  z-index: 1000;
-}
-.vuuPopup {
-  position: absolute;
-}
-
-/* ../vuu-popups/src/popup-menu/PopupMenu.css */
-.vuuPopupMenu {
-  --saltButton-height: 24px;
-  --saltButton-width: 24px;
-  --vuu-icon-color: #606477;
-  --vuu-icon-height: 20px;
-  --vuu-icon-left: 2px;
-  --vuu-icon-size: 16px;
-  --vuu-icon-top: 2px;
-  --vuu-icon-width: 20px;
-  background: var(--vuuPopupMenu-background, transparent);
-  border-radius: 4px;
-  cursor: pointer;
-  display: inline-block;
-  margin-top: 2px;
-  padding: 2px;
-}
-.vuuPopupMenu:hover {
-  --vuu-icon-color: var(--saltButton-text-color-hover);
-}
-.vuuPopupMenu-open {
-  --saltButton-background: var(--salt-actionable-secondary-background-active);
-  --vuu-icon-color: white;
-}
-.vuu-theme .vuuPopupMenu:hover {
-  --saltButton-background-hover: #F37880;
-}
-.vuu-theme .vuuPopupMenu-open {
-  --saltButton-background: #6D18BD;
-}
-
-/* ../vuu-ui-controls/src/drag-drop/Draggable.css */
-.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) 0.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) 0.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;
-}
-
-/* ../vuu-ui-controls/src/editable-label/EditableLabel.css */
-.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;
-}
-
-/* ../vuu-ui-controls/src/tabstrip/Tabstrip.css */
-.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;
-}
-
-/* ../vuu-ui-controls/src/tabstrip/TabMenu.css */
-.vuuTabMenu {
-  top: -2px;
-}
-
-/* ../vuu-ui-controls/src/tabstrip/Tab.css */
-.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));
-}
-
-/* ../vuu-ui-controls/src/tree/Tree.css */
-.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, 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: 0px;
-}
-.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 0.3s;
-  width: 18px;
-}
-.vuuTreeNode[aria-selected=true] {
-  --list-item-header-twisty-color: var(--list-item-selected-color);
-}
-.vuuTreeNode:not(.focusVisible):focus {
-  background-color: rgba(0, 0, 0, 0.1);
-}
-.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;
-}
-
-/* src/filter-pill-menu/FilterPillMenu.css */
-.vuuFilterPillMenu {
-  top: -2px;
-}
-
-/* src/filter-pill/FilterPill.css */
-.vuuFilterPill {
-  align-items: center;
-  border: solid 1px var(--salt-taggable-foreground);
-  border-radius: 26px;
-  display: flex;
-  height: 26px;
-  padding: 0 8px;
-  position: relative;
-}
-
-/* src/filter-bar/FilterBar.css */
-.vuuFilterBar {
-  --vuu-svg-tune: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 18C3 18.55 3.45 19 4 19H9V17H4C3.45 17 3 17.45 3 18ZM3 6C3 6.55 3.45 7 4 7H13V5H4C3.45 5 3 5.45 3 6ZM13 20V19H20C20.55 19 21 18.55 21 18C21 17.45 20.55 17 20 17H13V16C13 15.45 12.55 15 12 15C11.45 15 11 15.45 11 16V20C11 20.55 11.45 21 12 21C12.55 21 13 20.55 13 20ZM7 10V11H4C3.45 11 3 11.45 3 12C3 12.55 3.45 13 4 13H7V14C7 14.55 7.45 15 8 15C8.55 15 9 14.55 9 14V10C9 9.45 8.55 9 8 9C7.45 9 7 9.45 7 10ZM21 12C21 11.45 20.55 11 20 11H11V13H20C20.55 13 21 12.55 21 12ZM16 9C16.55 9 17 8.55 17 8V7H20C20.55 7 21 6.55 21 6C21 5.45 20.55 5 20 5H17V4C17 3.45 16.55 3 16 3C15.45 3 15 3.45 15 4V8C15 8.55 15.45 9 16 9Z" /></svg>');
-  --saltButton-height: 26px;
-  --saltButton-width: 26px;
-  align-items: center;
-  background-color: var(--salt-container-secondary-background);
-  border-bottom: solid 1px #D6D7DA;
-  display: flex;
-  gap: 4px;
-  height: 33px;
-  padding: 4px 8px;
-}
-.vuuFilterbar-icon {
-  display: inline-block;
-  height: 16px;
-  width: 16px;
-}
-.vuuFilterBar [data-icon=tune] {
-  --vuu-icon-size: 16px;
-  --vuu-icon-svg: var(--vuu-svg-tune);
-}
-.vuuFilterBar [data-icon=plus] {
-  --vuu-icon-size: 16px;
-}
-
 /* src/filter-clause/ExpandoCombobox.css */
 .vuuExpandoCombobox {
   --expando-combobox-height: var(--vuuExpandoCombobox-height, 24px);
@@ -2001,7 +1292,7 @@ vuuUserPanel-history {
 .vuuExpandoCombobox .saltDropdown {
   height: 100%;
 }
-.vuuExpandoCombobox .saltInputLegacy {
+.vuuExpandoCombobox-Input {
   border: none;
   left: 0px;
   margin: 0;