npm - @vuu-ui/vuu-ui-controls - Versions diffs - 0.8.8-debug → 0.8.9-debug - Mend

@vuu-ui/vuu-ui-controls 0.8.8-debug → 0.8.9-debug

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (196) hide show

package/index.css.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../packages/vuu-ui-controls/src/drag-drop/Draggable.css", "../../../packages/vuu-ui-controls/src/editable-label/EditableLabel.css", "../../../packages/vuu-ui-controls/src/list/Highlighter.css", "../../../packages/vuu-ui-controls/src/list/CheckboxIcon.css", "../../../packages/vuu-ui-controls/src/list/ListItem.css", "../../../packages/vuu-ui-controls/src/list/List.css", "../../../packages/vuu-ui-controls/src/tabstrip/Tabstrip.css", "../../../packages/vuu-ui-controls/src/tabstrip/TabMenu.css", "../../../packages/vuu-ui-controls/src/tabstrip/Tab.css", "../../../packages/vuu-ui-controls/src/tree/Tree.css"],
-  "sourcesContent": [".vuuDraggable {\n  background: transparent;\n  box-shadow: var(--salt-overlayable-shadow-drag);\n  cursor: var(--salt-draggable-grab-cursor-active);\n  position: absolute;\n  opacity: .95;\n  z-index: 2000;\n}\n\n.vuuDraggable-spacer {\n  display: var(--vuuDraggable-display, inline-block);\n  height: var(--vuuDraggable-spacer-height, var(--tabstrip-height));\n  transition: var(--vuuDraggable-transitionProp, width) 0.3s ease;\n  width: var(--vuuDraggable-spacer-width, 0);\n}\n\n.vuuDraggable-dropIndicatorPosition {\n  display: var(--saltDraggable-display, inline-block);\n  /* height: var(--saltDraggable-spacer-height, var(--tabstrip-height)); */\n  /* width: var(--saltDraggable-spacer-width, 0); */\n  height: 0px;\n  width: 100%;\n}\n\n.vuuDraggable-dropIndicatorContainer {\n  transition: var(--vuuDraggable-transitionProp, top) 0.2s ease;\n}\n\n.vuuDraggable-dropIndicator {\n  /* height: var(--saltDraggable-spacer-height, var(--tabstrip-height)); */\n  /* width: var(--saltDraggable-spacer-width, 0); */\n  background-color: var(--salt-palette-accent-background);\n  height: 2px;\n  width: 100%;\n}\n\n.vuuDraggable-dropIndicator:before {\n  content: '';\n  width: 6px;\n  height: 6px;\n  border-radius: 3px;\n  background-color: var(--salt-palette-accent-background);\n  position: absolute;\n  top: -2px;\n  left: -3px;\n}\n\n.vuuDraggable-settling {\n  transition-property: left, top;\n  transition-duration: .15s;\n  transition-timing-function: ease-out;\n}\n\n.vuuDraggable-spacer {\n  order: 1;\n}", ".vuuEditableLabel {\n  --saltInput-background: transparent;\n  --saltInput-minWidth: 14px;\n  --saltInput-position: absolute;\n  --editableLabel-padding: var(--saltEditableLabel-padding, 6px);\n  --editableLabel-height: var(--saltEditableLabel-height, 26px);\n  color: inherit;\n  cursor: default;\n  display: flex;\n  flex-direction: column;\n  font-size: var(--salt-text-fontSize);\n  height: var(--editableLabel-height);\n  justify-content: center;\n  outline: none;\n  padding: 0 var(--editableLabel-padding);\n  position: relative;\n  z-index: var(--salt-zIndex-default);\n}\n\n.vuuEditableLabel:before {\n  content: attr(data-text);\n  display: block;\n  height: 0px;\n  visibility: hidden;\n  white-space: pre-wrap;\n}\n\n.vuuEditableLabel .saltInput {\n  font-weight: var(--salt-text-fontWeight);\n  left: var(--editableLabel-padding, 0);\n  padding: 0;\n  outline-style: none;\n  position: absolute;\n  right: var(--editableLabel-padding, 0);\n  top: var(--saltEditableLabel-top, 2px);\n  width: auto;\n}\n\n.vuuEditableLabel .saltInput-activationIndicator {\n  display: none;\n}\n\n.vuuEditableLabel-input {\n  background-color: transparent;\n  border: none;\n  box-sizing: content-box;\n  display: block;\n  flex: 1;\n  font: inherit;\n  height: 20px;\n  margin:0;\n  min-width:0;\n  outline: none;\n  padding: 0;\n}\n", ".saltHighlighter-highlight {\n  font-weight: var(--salt-text-fontWeight-strong); /* TODO: Check with design */\n}\n", ".vuuCheckboxIcon {\n    --vuu-icon-size: 14px;\n    --vuu-icon-left: -1px;\n    --vuu-icon-top: -1px;\n    --vuu-icon-svg: var(--vuu-svg-tick);\n    border-style: solid;\n    border-color: var(--vuuCheckboxIcon-borderColor, var(--salt-selectable-borderColor));\n    border-radius: var(--vuuCheckboxIcon-borderRadius, 3px);\n    border-width: 1px;\n    display: inline-block;\n    height: var(--vuuCheckboxIcon-size, 14px);\n    position: relative;\n    width: var(--vuuCheckboxIcon-size, 14px);\n}\n\n.vuuCheckboxIcon-checked {\n    background-color: var(--vuuCheckboxIcon-background-checked, var(--salt-selectable-background-selected));\n    border-color: var(--vuuCheckboxIcon-borderColor-checked, var(--salt-selectable-borderColor-selected));\n}\n\n.vuuCheckboxIcon-checked:after {\n    content: \"\";\n    background-color: white;\n    left: var(--vuu-icon-left, auto);\n    height: var(--vuu-icon-height, var(--vuu-icon-size, 12px));\n    -webkit-mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);\n    mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);\n    mask-repeat: no-repeat;\n    -webkit-mask-repeat: no-repeat;\n    position: absolute;\n    top: var(--vuu-icon-top, auto);\n    width: var(--vuu-icon-width, var(--vuu-icon-size, 12px));\n}", ".vuuListItem {\n  /* Color */\n  --list-item-text-color: var(--salt-text-primary-foreground);\n  --list-item-background: var(--vuuList-item-background, var(--salt-selectable-background));\n  /* --list-item-selected-focus-outlineColor: var(--salt-color-white);  TODO: Check token with design */\n  --list-item-text-color-active: var(--salt-text-primary-foreground);\n  --list-item-background-active: var(--salt-selectable-background-selected);\n  --list-item-alignItems: center;\n}\n\n.vuuListItem.saltHighlighted {\n  --saltCheckbox-icon-stroke: var(--salt-selectable-borderColor-hover);\n  --list-item-background: var(--salt-selectable-background-hover);\n}\n\n.vuuListItemHeader {\n  font-weight: var(--salt-text-fontWeight-strong); /*  TODO: Check token with design */\n}\n\n.vuuListItemHeader[data-sticky] {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n}\n\n.vuuListItem {\n  color: var(--list-item-text-color);\n  cursor: var(--vuuList-item-cursor, pointer);\n  background: var(--vuuList-item-background, var(--list-item-background));\n  font-size: var(--salt-text-fontSize);\n  text-align: var(--salt-text-textAlign);\n  line-height: var(--salt-text-lineHeight);\n  height: var(--vuuList-item-height, var(--list-item-height, auto));\n  /* Replaced border-bottom with margin. In design spec, the height of the items should not include gap */\n  margin-bottom: var(--list-item-gap);\n  padding: 0 var(--salt-size-unit);\n  left: 0;\n  right: 0;\n  display: flex;\n  position: relative;\n  align-items: var(--list-item-alignItems);\n  white-space: nowrap;\n}\n\n.vuuListItem:last-child {\n  margin-bottom: 0px;\n}\n\n.vuuListItem-checkbox {\n  --list-item-background-active: var(--salt-selectable-background);\n  --list-item-text-color-active: var(--salt-text-primary-foreground);\n  --list-item-text-padding: 0 0 0 var(--salt-size-unit);\n}\n\n.vuuListItem[aria-selected=\"true\"]:not(.vuuListItem-checkbox) {\n  --list-item-background: var(--list-item-background-active);\n  color: var(--list-item-text-color-active);\n}\n\n.vuuListItem.saltDisabled {\n  --list-item-text-color: var(--salt-text-primary-foreground-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n.vuuListItem.vuuFocusVisible {\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: -2px;\n  outline-color: var(--salt-focused-outlineColor);\n}\n\n.vuuListItem.vuuFocusVisible:after {\n  content: none;\n}\n\n.vuuListItem[aria-selected=\"true\"]:not(.vuuListItem-checkbox).vuuFocusVisible {\n  outline-color: var(--list-item-selected-focus-outlineColor);\n}\n\n.vuuListItem-textWrapper {\n  flex: 1;\n  overflow: hidden;\n  padding: var(--list-item-text-padding, 0px);\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.vuuListItem-proxy {\n  position: absolute !important;\n  visibility: hidden;\n}\n.vuuDraggable-list-item {\n  --vuuList-item-height: 24px;\n  background-color: white;\n}\n\n.vuuListItem.vuuDraggable-dragAway {\n  display: none;\n}", ".vuuList {\n  --list-background: var(--salt-container-primary-background);\n  --list-borderStyle: var(--vuuList-borderStyle,--salt-container-borderStyle);\n  --list-borderWidth: var(--salt-size-border);\n  --list-height: auto;\n  --list-item-height: var(--salt-size-stackable);\n  --list-item-gap: 0px;\n  --list-maxHeight: 100%;\n  --vuuDraggable-display: block;\n  --vuuDraggable-spacer-height: 0;\n  --vuuDraggable-spacer-width: 100%;\n  --vuuDraggable-transitionProp: height;\n\n  background: var(--list-background);\n  border-color: var(--salt-container-primary-borderColor);\n  border-style: var(--list-borderStyle);\n  border-width: var(--list-borderWidth);\n  height: var(--saltList-height, var(--list-height));\n  max-height: var(--list-maxHeight);\n  outline: none;\n  overflow-y: auto;\n  position: relative;\n  user-select: none;\n  width: var(--saltList-width, auto);\n}\n\n.vuuList-borderless {\n  --list-borderStyle: none;\n}\n\n/* virtualised list */\n.vuuList-viewport {\n  --list-item-height: 30px;\n  max-height: calc(var(--list-maxHeight) - 2 * var(--list-borderWidth));\n  overflow: auto;\n}\n\n.vuuListItemHeader {\n  --saltList-item-background: var(--list-item-header-background);\n  color: var(--list-item-header-color);\n}\n\n.vuuListItemHeader[data-sticky=\"true\"] {\n  --saltList-item-background: var(--list-background);\n  position: sticky;\n  top: 0;\n  z-index: 1;\n}\n\n.vuuList-collapsible .vuuListItemHeader:after {\n  border-width: var(--checkbox-borderWidth);\n  border-color: var(--checkbox-borderColor);\n  content: var(--list-item-header-twisty-content);\n  -webkit-mask: var(--list-svg-chevron-down) center center/12px 12px no-repeat;\n  mask: var(--list-svg-chevron-down) center center/12px 12px no-repeat;\n  background: var(--list-item-header-twisty-color);\n  height: 12px;\n  left: var(--list-item-header-twisty-left);\n  right: var(--list-item-header-twisty-right);\n  margin-top: -8px;\n  position: absolute;\n  top: var(--list-item-header-twisty-top);\n  transition: transform 0.3s;\n  width: 12px;\n}\n.vuuListItemHeader[aria-expanded=\"false\"]:after {\n  transform: rotate(-90deg);\n}\n\n/* Selection */\n\n.vuuList-scrollingContentContainer {\n  box-sizing: inherit;\n  position: relative;\n}\n\n.vuuList-virtualized .vuuListItem {\n  line-height: 30px;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  will-change: transform;\n}\n.vuuList.saltFocusVisible:after {\n  inset: 2px;\n}\n", "/* Component class applied to the root element */\n.vuuTabstrip {\n  --vuuOverflowContainer-background: transparent;\n  /* --tabstrip-height: var(--vuuTabstrip-height, var(--salt-size-stackable)); */\n  --tabstrip-dragging-display: none;\n  --tabstrip-display: inline-flex;\n  --tabstrip-background: transparent;\n\n  align-self: var(--saltTabs-tabstrip-alignSelf, stretch);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--vuuTabstrip-fontWeight, var(--salt-text-fontWeight));\n  position: relative;\n  overflow: visible;\n  display: flex;\n  min-width: 28px;\n  width: var(--tabstrip-width);\n}\n\n/* Tabstrip orientation is horizontal */\n.vuuTabstrip-horizontal {\n  --tabstrip-height: var(--vuuTabstrip-height, 28px);\n  --tabstrip-width: var(--vuuTabstrip-width, 100%);\n  --tab-width: auto;\n  --tab-thumb-height: 2px;\n  --tab-thumb-left: var(--tab-thumb-offset, 0);\n  --tab-thumb-top: auto;\n  --tab-thumb-width: var(--tab-thumb-size, 100%);\n  align-items: flex-start;\n  border-bottom: var(--vuuTabstrip-borderBottom, solid 1px var(--salt-container-primary-borderColor));\n}\n\n/* Tabstrip orientation is vertical */\n.vuuTabstrip-vertical {\n  --tabstrip-height: var(--vuuTabstrip-height, 100%);\n  --tabstrip-width: var(--vuuTabstrip-width, 100px);\n  --tab-width: 100%;\n  --tab-thumb-height: var(--tab-thumb-size, 100%);\n  --tab-thumb-left: 0;\n  --tab-thumb-top: var(--tab-thumb-offset, 0);\n  --tab-thumb-width: 2px;\n\n  align-self: flex-start;\n  display: inline-flex;\n}\n\n.vuuTabstrip-draggingTab .vuuTab {\n  pointer-events: none;\n}\n\n.vuuTabstrip-addTabButton {\n  --saltButton-height: 20px;\n  --saltButton-width: 20px;\n}\n\n.vuuTabstrip-overflowMenu.saltDropdown {\n  --saltIcon-margin: 2px 0 0 0px;\n}\n\n.vuuTabstrip-overflowMenu-open {\n  --saltButton-background: var(--salt-actionable-secondary-background-active);\n  --saltButton-text-color: var(--salt-actionable-secondary-text-color-active);\n}\n\n.vuuTabstrip-overflowMenu-open .saltButton {\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-active);\n}\n\n.vuuTabstrip-inner {\n  width: 100%;\n  align-items: center;\n  display: flex;\n  flex-basis: auto;\n  flex-grow: 0;\n  flex-shrink: 1;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  line-height: var(--tabstrip-height);\n}\n\n.vuuTabstrip-vertical .vuuTabstrip-inner {\n  flex-direction: column;\n  height: auto;\n}\n\n.vuuTabstrip-centered .vuuTabstrip-inner {\n  justify-content: center;\n}\n\n/* Styling applied to Draggable wrapper when used to drag a Tab */\n.vuuDraggable[class*=\"vuuTabstrip\"] {\n  --tabstrip-display: flex;\n  --tabstrip-height: 100%;\n  --tabstrip-dragging-display: block;\n\n  --tabs-tab-background: var(--salt-navigable-primary-background-hover);\n  --tabs-tab-before-content: \"\";\n  --tabs-tab-before-background: var(--salt-navigable-indicator-hover);\n  --tabs-tab-before-height: var(--tab-activationIndicator-thumb-height);\n  --tabs-tab-before-inset: var(--tab-activationIndicator-inset);\n  --tabs-tab-before-width: var(--tab-activationIndicator-thumb-width);\n  --tabs-tab-cursor: var(--salt-draggable-grab-cursor-active);\n  --tabs-tab-position: static;\n\n  font-size: 12px;\n}\n\n.vuuDraggable-tabstrip-horizontal {\n  --tab-thumb-height: 2px;\n  --tab-thumb-left: 0px;\n  --tabstrip-height: 28px;\n  line-height: var(--tabstrip-height);\n}\n\n\n.vuuDraggable[class*=\"tabstrip\"] .vuuTab[aria-selected=\"true\"]:before {\n  --tabs-tab-before-background: var(--salt-navigable-indicator-active);\n}\n\n/* [data-overflowed] {\n  order: 99;\n  visibility: hidden;\n} */\n\n.vuuTabstrip-overflowMenu-dropTarget:after {\n  background: var(--salt-selectable-background-selected);\n  content: \"\";\n  position: absolute;\n  height: 2px;\n  left: 0;\n  right: 0;\n  bottom: 0;\n}\n", ".vuuTabMenu {\n    top: -2px;\n}", "/* Class applied to root Tab element */\n.vuuTab {\n  --saltEditableLabel-padding: 0;\n  --saltEditableLabel-height: var(--tabstrip-height);\n  --saltInputLegacy-minWidth: 4em;\n  --saltEditableLabel-top: 3px;\n\n  --tab-background: var(--vuuTab-background, var(--salt-navigable-primary-background));\n  --tab-cursor: pointer;\n  --tab-position: relative;\n}\n\n.vuuTab {\n  align-items: center;\n  align-self: stretch;\n  background: var(--tab-background);\n  border: none;\n  border-radius: var(--vuuTab-borderRadius, 0);\n  color: var(--salt-text-primary-foreground);\n  cursor: var(--vuuTab-cursor, var(--tab-cursor));\n  display: var(--tabstrip-display);\n  gap: 8px;\n  height: var(--vuuTab-height, var(--tabstrip-height));\n  letter-spacing: var(--vuuTab-letterSpacing, var(--tab-letterSpacing, 0));\n  min-width: var(--vuuTab-minWidth, 40px);\n  outline: none;\n  padding: var(--vuuTab-padding, 0 24px);\n  position: var(--vuuTab-position, var(--tab-position));\n  user-select: none;\n  width: var(--tab-width)\n}\n\n/* Overrides characteristic used in saltFocusVisible */\n/* .vuuTab.saltFocusVisible:after {\n  inset: 2px 2px 4px 2px;\n} */\n\n.vuuTab {\n  margin: 0 var(--tab-spacing) 0 0;\n}\n\n.vuuTab-selected {\n  background: var(--vuuTab-background-selected, var(--tab-background));\n  color: var(--salt-text-primary-foreground);\n  font-weight: var(--salt-navigable-fontWeight-active);\n}\n\n/* main content aria of Tab */\n.vuuTab-main {\n  align-items: center;;\n  border: none;\n  color: inherit;\n  cursor: inherit;\n  display: flex;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n  height: var(--vuuTabstrip-height, var(--salt-size-stackable));\n  outline: none;\n  position: relative;\n}\n\n.vuuTab-closeable .vuuTab-main {\n  border-right: solid transparent var(--salt-size-unit);\n}\n\n.vuuTab .vuuTab-closeButton {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* the close Button on a closeable Tab*/\n.vuuTab-close-icon {\n  display: none;\n}\n\n.salt-density-touch .vuuTab-close-icon,\n.salt-density-low .vuuTab-close-icon {\n  display: block;\n}\n\n.salt-density-touch .vuuTab-close-icon-small,\n.salt-density-low .vuuTab-close-icon-small {\n  display: none;\n}\n\n.vuuTab .vuuTab-text {\n  display: inline-block;\n  position: relative;\n  overflow: hidden;\n  text-align: var(--salt-text-textAlign-embedded);\n  text-overflow: ellipsis;\n  top: var(--vuuTab-top, var(--tab-top, auto));\n  white-space: nowrap;\n  /* ensure content sits above focus ring */\n  z-index: var(--salt-zIndex-default);\n}\n\n.vuuTab .vuuTab-text:before {\n  height: 0;\n  content: attr(data-text);\n  display: block;\n  visibility: hidden;\n  font-weight: var(--salt-navigable-fontWeight-active);\n}\n\n/* FIXME: these are all focusVisible styles, but with a bespoke inset */\n.vuuTab-editing:after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 2px;\n  outline-color: var(--salt-focused-outlineColor);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: -2px;\n}\n\n.vuuTab.vuuFocusVisible {\n  background: var(--vuuTab-hover-background, var(--salt-navigable-primary-background-hover));\n  outline-color: var(--vuuTab-focusVisible-color, var(--salt-focused-outlineColor));\n  outline-style: dashed;\n  outline-width: 1px;\n  outline-offset: -1px;\n}\n\n.vuuTab:before {\n  content: var(--tab-before-content, none);\n  content: \"\";\n  background: var(--tab-before-background);\n  height: var(--tab-before-height);\n  inset: var(--tab-before-inset);\n  position: absolute;\n  width: var(--tab-before-width);\n  z-index: 1;\n}\n\n.vuuTabstrip-draggingTab .vuuTab-selected:before {\n  --tab-before-content: \"\";\n  --tab-before-background: var(--salt-navigable-indicator-color-active);\n  --tab-before-height: var(--tab-thumb-height);\n  --tab-before-inset: var(--tab-activationIndicator-inset);\n  --tab-before-width: var(--tab-activationIndicator-thumb-width);\n}\n\n/* .vuuDraggable .vuuTab:before,\n.vuuTab:not(.vuuTab-selected).saltFocusVisible:before,\n.vuuTab:hover:not(.vuuTab-selected):before {\n  --tab-before-content: \"\";\n  --tab-before-background: var(--salt-navigable-indicator-hover);\n  --tab-before-height: var(--tab-thumb-height);\n  --tab-before-inset: var(--tab-activationIndicator-inset);\n  --tab-before-width: var(--tab-activationIndicator-thumb-width);\n} */\n\n.vuuTab-selected:before {\n  --tab-before-content: \"\";\n  background: var(--salt-navigable-indicator-active);\n  height: var(--tab-thumb-height);\n  position: absolute;\n  left: var(--tab-thumb-left);\n  bottom: 0px; \n  top: var(--tab-thumb-top, auto);\n  transition: var(--tab-thumb-transition, none);\n  width: var(--tab-thumb-width, 100%);\n}\n\n.vuuTab:hover:not(.vuuTab-closeHover) {\n  background: var(--vuuTab-hover-background, var(--salt-navigable-primary-background-hover));\n}\n\n/* .vuuTabstrip.vuuTabThumb-noTransition .vuuTab-selected:before {\n  transition: none; \n} */", ".vuuTree {\n  --tree-node-collapse: var(--vuuTree-toggle-collapse, var(--svg-tree-node-collapse));\n  --tree-node-expand: var(--vuuTree-toggle-expand, var(--svg-tree-node-expand));\n  --tree-toggle-width: 12px;\n  --tree-icon-color: var(--vuuTree-icon-color, #4c505b);\n  --tree-node-expanded-transform: var(--vuuTree-node-expanded-transform, none);\n  --tree-node-indent: 0px;\n\n  --list-hilited-bg: var(--hw-list-hilited-bg, rgba(0, 0, 0, 0.1));\n  --list-item-height: var(--hw-list-item-height, 30px);\n  --list-item-padding: var(--hw-list-item-padding, 0 6px);\n  --list-item-header-bg: var(--hw-list-item-header-bg, black);\n  --list-item-header-color: var(--hw-list-item-header-color, white);\n  --list-item-header-font-weight: bold;\n  --list-item-header-twisty-color: black;\n  --list-item-header-twisty-content: '';\n  --list-item-header-twisty-top: 50%;\n  --list-item-header-twisty-left: -18px;\n  --list-item-header-twisty-right: auto;\n  --list-item-selected-bg: var(--hw-list-selected-bg, #1ea7fd);\n  --list-item-selected-color: white;\n  --list-item-text-color: var(--hw-gray-800);\n  --focus-visible-border-color: var(--hw-focus-visible-border-color, rgb(141, 154, 179));\n\n  list-style: none;\n  margin: 0;\n  padding: 0 1px;\n  font-size: var(--vuuTree-font-size, 14px);\n  max-height: inherit;\n  outline: none;\n  overflow-y: auto;\n  position: relative;\n  user-select: none;\n}\n\n.vuuTree-viewport {\n  --list-item-height: 30px;\n  box-sizing: border-box;\n  max-height: inherit;\n  overflow: auto;\n}\n\n.vuuTree-scrollingContentContainer {\n  box-sizing: inherit;\n  position: relative;\n}\n\n.vuuTree-scrollingContentContainer .vuuTreeNode {\n  line-height: 30px;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  will-change: transform;\n}\n\n.vuuTreeNode {\n  list-style: none;\n}\n\n/* Leaf node or the div child of a collapsible node */\n.vuuTreeNode:not([aria-expanded]),\n.vuuTreeNode[aria-expanded] > .vuuTreeNode-label {\n  --checkbox-border-color: black;\n  --checkbox-border-width: 1px;\n  --checkbox-tick: black;\n  --list-item-padding-left: 6px;\n  --svg-toggle: var(--tree-node-collapse);\n\n  align-items: center;\n  color: var(--list-item-text-color);\n  display: flex;\n  flex-wrap: nowrap;\n  height: var(--list-item-height);\n  line-height: var(--list-item-height);\n  padding: var(--list-item-padding);\n  padding-left: var(--padding-left);\n  position: relative;\n  cursor: default;\n  margin: 0;\n  white-space: nowrap;\n}\n\n.vuuTreeNode:not([aria-expanded]) {\n  --padding-left: calc(\n    var(--list-item-padding-left) + var(--tree-toggle-width) + var(--tree-node-indent)\n  );\n}\n\n.vuuTreeNode[aria-expanded] > .vuuTreeNode-label {\n  --padding-left: calc(\n    var(--list-item-padding-left) + var(--tree-toggle-width) + var(--tree-node-indent)\n  );\n}\n\n.vuuTreeNode-icon {\n  background-color: var(--tree-icon-color);\n  display: inline-block;\n  height: 18px;\n  margin-right: 6px;\n  -webkit-mask: var(--vuu-icon-svg) center center/12px 12px no-repeat;\n  mask: var(--vuu-icon-svg) center center/12px 12px no-repeat;\n  flex: 0 0 18px;\n}\n\n.vuuTreeNode[aria-expanded] {\n  flex-direction: column;\n}\n\n.vuuTreeNode[aria-expanded] {\n  flex-direction: column;\n  height: auto;\n}\n\n.vuuTreeNode > *[role='group'] {\n  padding-left: 0px;\n}\n\n.vuuTreeNode {\n  padding-left: calc(var(--padding-left) + var(--tree-node-indent));\n}\n\n.vuuTreeNode[aria-level='2'] {\n  --tree-node-indent: 12px;\n}\n.vuuTreeNode[aria-level='3'] {\n  --tree-node-indent: 24px;\n}\n.vuuTreeNode[aria-level='4'] {\n  --tree-node-indent: 36px;\n}\n\n.vuuTreeNode:not(.focusVisible):not(.hwListItemHeader):not([aria-expanded])[data-highlighted],\n.vuuTreeNode:not(.focusVisible):not(.hwListItemHeader)[aria-expanded][data-highlighted]\n  > div:first-child {\n  background-color: var(--list-hilited-bg);\n}\n\n.vuuTreeNode-toggle {\n  cursor: pointer;\n}\n\n.vuuTreeNode > .vuuTreeNode-toggle {\n  display: inline-block;\n  height: 100%;\n  left: 0;\n  position: absolute;\n  width: calc(var(--list-item-padding-left) + var(--tree-toggle-width));\n}\n\n.vuuTreeNode[aria-expanded] > .vuuTreeNode-label:after {\n  content: var(--list-item-header-twisty-content);\n  -webkit-mask: var(--svg-toggle) center center/8px 8px no-repeat;\n  mask: var(--svg-toggle) center center/8px 8px no-repeat;\n  background-color: var(--list-item-header-twisty-color);\n  height: 18px;\n  margin-top: -9px;\n  left: var(--tree-node-indent);\n  position: absolute;\n  top: var(--list-item-header-twisty-top);\n  transition: transform 0.3s;\n  width: 18px;\n}\n\n.vuuTreeNode[aria-selected='true'] {\n  --list-item-header-twisty-color: var(--list-item-selected-color);\n}\n\n\n.vuuTreeNode:not(.focusVisible):focus {\n  background-color: rgba(0, 0, 0, 0.1);\n}\n\n.vuuTreeNode:not([aria-expanded]).focusVisible:before,\n.vuuTreeNode[aria-expanded].focusVisible > div:first-child:before {\n  content: '';\n  position: absolute;\n  top: 0px;\n  left: var(--tree-focus-offset, 0px);\n  right: 0;\n  bottom: 0px;\n  border: dotted var(--focus-visible-border-color) 2px;\n  background-color: var(--list-hilited-bg);\n}\n\n\n.vuuTreeNode[aria-expanded='false'] > *:first-child:after {\n  --svg-toggle: var(--tree-node-expand);\n}\n\n.vuuTreeNode[aria-expanded='true'] > *:first-child:after {\n  transform: var(--tree-node-expanded-transform);\n}\n\n/* Selection */\n\n.vuuTree:not(.checkbox-only) .vuuTreeNode:not([aria-expanded])[aria-selected='true'],\n.vuuTree:not(.checkbox-only) .vuuTreeNode[aria-expanded][aria-selected='true'] > div:first-child {\n  --checkbox-border-color: var(--list-item-selected-color);\n  --checkbox-tick: var(--list-item-selected-color);\n  --focus-visible-border-color: var(--list-item-selected-color);\n  background-color: var(--list-item-selected-bg);\n  color: var(--list-item-selected-color);\n}\n\n.with-checkbox .vuuTreeNode {\n  padding-left: 28px;\n}\n\n.with-checkbox .vuuTreeNode:before {\n  border-style: solid;\n  border-width: var(--checkbox-border-width);\n  border-color: var(--checkbox-border-color);\n  content: '';\n  height: 12px;\n  left: 3px;\n  margin-top: -7px;\n  position: absolute;\n  top: 50%;\n  width: 12px;\n}\n"],
-  "mappings": ";AAAA;AACE;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AAGA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AAGE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AAAA;;;ACtDF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;;ACrDF;AACE;AAAA;;;ACDF;AACI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGJ;AACI;AACA;AAAA;AAGJ;AACI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;;AC/BJ;AAEE;AACA;AAEA;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAEF;AACE;AACA;AAAA;AAGF;AACE;AAAA;;;ACjGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAIF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEF;AACE;AAAA;AAKF;AACE;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AAAA;AAEF;AACE;AAAA;;;ACpFF;AACE;AAEA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAIF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAIF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AAAA;AAIF;AACE;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAIF;AACE;AAAA;AAQF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;;AClIF;AACI;AAAA;;;ACAJ;AACE;AACA;AACA;AACA;AAEA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAQF;AACE;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAIF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAIF;AACE;AAAA;AAGF;AAAA;AAEE;AAAA;AAGF;AAAA;AAEE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAAA;AAIF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAAA;AAaF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;;;AC3KF;AACE;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAIF;AAAA;AAEE;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAKF;AACE;AAAA;AAKF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAGF;AAAA;AAGE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAIF;AACE;AAAA;AAGF;AAAA;AAEE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAIF;AACE;AAAA;AAGF;AACE;AAAA;AAKF;AAAA;AAEE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;",
+  "sources": ["../../../packages/vuu-ui-controls/src/dropdown/Dropdown.css", "../../../packages/vuu-ui-controls/src/dropdown/DropdownButton.css", "../../../packages/vuu-ui-controls/src/list/Highlighter.css", "../../../packages/vuu-ui-controls/src/list/CheckboxIcon.css", "../../../packages/vuu-ui-controls/src/list/ListItem.css", "../../../packages/vuu-ui-controls/src/drag-drop/Draggable.css", "../../../packages/vuu-ui-controls/src/list/List.css", "../../../packages/vuu-ui-controls/src/list/RadioIcon.css", "../../../packages/vuu-ui-controls/src/list/ChevronIcon.css", "../../../packages/vuu-ui-controls/src/editable-label/EditableLabel.css", "../../../packages/vuu-ui-controls/src/expando-input/ExpandoInput.css", "../../../packages/vuu-ui-controls/src/inputs/Checkbox.css", "../../../packages/vuu-ui-controls/src/inputs/RadioButton.css", "../../../packages/vuu-ui-controls/src/instrument-search/SearchCell.css", "../../../packages/vuu-ui-controls/src/instrument-search/InstrumentSearch.css", "../../../packages/vuu-ui-controls/src/price-ticker/PriceTicker.css", "../../../packages/vuu-ui-controls/src/tabstrip/Tabstrip.css", "../../../packages/vuu-ui-controls/src/tabstrip/TabMenu.css", "../../../packages/vuu-ui-controls/src/tabstrip/Tab.css", "../../../packages/vuu-ui-controls/src/tree/Tree.css"],
+  "sourcesContent": [".vuuDropdown {\n  --saltIcon-margin: 2px 0 0 8px;\n  --saltButton-borderStyle: solid;\n  --saltButton-borderColor: var(--salt-editable-borderColor);\n  --saltButton-borderWidth: 1px;\n  --saltButton-borderRadius: 6px;\n  --saltButton-height: var(--vuuDropdown-height, auto);\n\n  display: inline-block;\n  line-height: 0;\n  position: relative;\n  width: var(--vuuDropdown-width, auto);\n}\n\n.vuuDropdown-fullWidth {\n  width: 100%;\n}\n\n.vuuDropdown-popup {\n  background: var(--salt-container-primary-background);\n  z-index: calc(var(--salt-zIndex-flyover) - 1);\n}\n\n.vuuDropdown-popup-component {\n  --vuuList-borderStyle: none;\n}\n\n.vuuDropdownButton {\n  width: 100%;\n}", ".vuuDropdownButton {\n  --saltButton-background-hover: var(--salt-actionable-secondary-background);\n  --saltButton-background-active: var(--salt-actionable-secondary-background);\n  --saltButton-fontWeight: var(--salt-text-fontWeight-strong); /* TODO: Check with design */\n  --saltButton-textAlign: left;\n  --saltButton-textTransform: none;\n  --saltButton-width: 100%;\n\n  --vuu-icon-size: 16px;\n}\n\n.vuuDropdownButton:active {\n  --saltIcon-color: var(--salt-actionable-secondary-foreground);\n  --saltButton-text-color-active: var(--salt-actionable-secondary-foreground);\n}\n\n.vuuDropdownButton-fullwidth {\n  width: 100%;\n}\n\n.vuuDropdownButton-content {\n  align-items: center;\n  flex: 1;\n  width: 100%;\n  display: flex;\n  white-space: nowrap;\n}\n\n.vuuDropdownButton-buttonLabel {\n  display: inline-block;\n  letter-spacing: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  width: 100%;\n}\n\n.vuuDropdownButton-formField.saltButton:focus,\n.vuuDropdownButton-formField.saltButton:focus-visible {\n  outline: none;\n}\n", ".saltHighlighter-highlight {\n  font-weight: var(--salt-text-fontWeight-strong); /* TODO: Check with design */\n}\n", ".vuuCheckboxIcon {\n    --vuu-icon-size: 12px;\n    --vuu-icon-left: -1px;\n    --vuu-icon-top: -1px;\n    --vuu-icon-svg: var(--vuu-svg-tick);\n    border-style: solid;\n    border-color: var(--vuuCheckboxIcon-borderColor, var(--salt-selectable-borderColor));\n    border-radius: var(--vuuCheckboxIcon-borderRadius, 3px);\n    border-width: 1px;\n    display: inline-block;\n    height: var(--vuuCheckboxIcon-size, 12px);\n    position: relative;\n    width: var(--vuuCheckboxIcon-size, 12px);\n}\n\n.vuuCheckboxIcon-checked {\n    background-color: var(--vuuCheckboxIcon-background-checked, var(--salt-selectable-background-selected));\n    border-color: var(--vuuCheckboxIcon-borderColor-checked, var(--salt-selectable-borderColor-selected));\n}\n\n.vuuCheckboxIcon-checked:after {\n    content: \"\";\n    background-color: white;\n    left: var(--vuu-icon-left, auto);\n    height: var(--vuu-icon-height, var(--vuu-icon-size, 12px));\n    -webkit-mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);\n    mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);\n    mask-repeat: no-repeat;\n    -webkit-mask-repeat: no-repeat;\n    position: absolute;\n    top: var(--vuu-icon-top, auto);\n    width: var(--vuu-icon-width, var(--vuu-icon-size, 12px));\n}", ".vuuListItem {\n  /* Color */\n  --list-item-text-color: var(--salt-text-primary-foreground);\n  --list-item-background: var(--vuuList-item-background, var(--salt-selectable-background));\n  /* --list-item-selected-focus-outlineColor: var(--salt-color-white);  TODO: Check token with design */\n  --list-item-text-color-active: var(--salt-text-primary-foreground);\n  --list-item-background-active: var(--salt-selectable-background-selected);\n  --list-item-alignItems: center;\n}\n\n.vuuListItem.vuuHighlighted {\n  --saltCheckbox-icon-stroke: var(--salt-selectable-borderColor-hover);\n  --list-item-background: var(--salt-selectable-background-hover);\n}\n\n.vuuListItemHeader {\n  font-weight: var(--salt-text-fontWeight-strong); /*  TODO: Check token with design */\n}\n\n.vuuListItemHeader[data-sticky] {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n}\n\n.vuuListItem {\n  color: var(--list-item-text-color);\n  cursor: var(--vuuList-item-cursor, pointer);\n  background: var(--vuuList-item-background, var(--list-item-background));\n  font-size: var(--salt-text-fontSize);\n  text-align: var(--salt-text-textAlign);\n  line-height: var(--salt-text-lineHeight);\n  height: var(--vuuList-item-height, var(--list-item-height, auto));\n  /* Replaced border-bottom with margin. In design spec, the height of the items should not include gap */\n  margin-bottom: var(--list-item-gap);\n  padding: 0 var(--vuuListItem-padding, var(--salt-size-unit));\n  left: 0;\n  right: 0;\n  display: flex;\n  position: relative;\n  align-items: var(--list-item-alignItems);\n  white-space: nowrap;\n}\n\n.vuuListItem:last-child {\n  margin-bottom: 0px;\n}\n\n.vuuListItem-checkbox {\n  --list-item-background-active: var(--salt-selectable-background);\n  --list-item-text-color-active: var(--salt-text-primary-foreground);\n  --list-item-text-padding: 0 0 0 var(--salt-size-unit);\n}\n\n.vuuListItem[aria-selected=\"true\"]:not(.vuuListItem-checkbox) {\n  --list-item-background: var(--list-item-background-active);\n  color: var(--list-item-text-color-active);\n}\n\n.vuuListItem.vuuDisabled {\n  --list-item-text-color: var(--salt-text-primary-foreground-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n.vuuListItem.vuuFocusVisible {\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: -2px;\n  outline-color: var(--salt-focused-outlineColor);\n}\n\n.vuuListItem.vuuFocusVisible:after {\n  content: none;\n}\n\n.vuuListItem[aria-selected=\"true\"]:not(.vuuListItem-checkbox).vuuFocusVisible {\n  outline-color: var(--list-item-selected-focus-outlineColor);\n}\n\n.vuuListItem-textWrapper {\n  flex: 1;\n  overflow: hidden;\n  padding: var(--list-item-text-padding, 0px);\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.vuuListItem-proxy {\n  position: absolute !important;\n  visibility: hidden;\n}\n.vuuDraggable-list-item {\n  --vuuList-item-height: 24px;\n  background-color: white;\n}\n\n.vuuListItem.vuuDraggable-dragAway {\n  display: none;\n}", ".vuuDraggable {\n  background: transparent;\n  box-shadow: var(--salt-overlayable-shadow-drag);\n  cursor: var(--salt-draggable-grab-cursor-active);\n  position: absolute;\n  opacity: .95;\n  z-index: 2000;\n}\n\n.vuuDraggable-spacer {\n  display: var(--vuuDraggable-display, inline-block);\n  height: var(--vuuDraggable-spacer-height, var(--tabstrip-height));\n  transition: var(--vuuDraggable-transitionProp, width) 0.3s ease;\n  width: var(--vuuDraggable-spacer-width, 0);\n}\n\n.vuuDraggable-dropIndicatorPosition {\n  display: var(--saltDraggable-display, inline-block);\n  /* height: var(--saltDraggable-spacer-height, var(--tabstrip-height)); */\n  /* width: var(--saltDraggable-spacer-width, 0); */\n  height: 0px;\n  width: 100%;\n}\n\n.vuuDraggable-dropIndicatorContainer {\n  transition: var(--vuuDraggable-transitionProp, top) 0.2s ease;\n}\n\n.vuuDraggable-dropIndicator {\n  /* height: var(--saltDraggable-spacer-height, var(--tabstrip-height)); */\n  /* width: var(--saltDraggable-spacer-width, 0); */\n  background-color: var(--salt-palette-accent-background);\n  height: 2px;\n  width: 100%;\n}\n\n.vuuDraggable-dropIndicator:before {\n  content: '';\n  width: 6px;\n  height: 6px;\n  border-radius: 3px;\n  background-color: var(--salt-palette-accent-background);\n  position: absolute;\n  top: -2px;\n  left: -3px;\n}\n\n.vuuDraggable-settling {\n  transition-property: left, top;\n  transition-duration: .15s;\n  transition-timing-function: ease-out;\n}\n\n.vuuDraggable-spacer {\n  order: 1;\n}", ".vuuList {\n  --list-background: var(--salt-container-primary-background);\n  --list-borderStyle: var(--vuuList-borderStyle,var(--salt-container-borderStyle));\n  --list-borderWidth: var(--salt-size-border);\n  --list-height: auto;\n  --list-item-height: var(--salt-size-stackable);\n  --list-item-gap: 0px;\n  --list-maxHeight: 100%;\n  --vuuDraggable-display: block;\n  --vuuDraggable-spacer-height: 0;\n  --vuuDraggable-spacer-width: 100%;\n  --vuuDraggable-transitionProp: height;\n  --vuuMeasuredContainer-height: var(--computed-list-height);\n\n  background: var(--list-background);\n  border-color: var(--salt-container-primary-borderColor);\n  border-style: var(--list-borderStyle);\n  border-width: var(--list-borderWidth);\n  height: var(--saltList-height, var(--list-height));\n  max-height: var(--list-maxHeight);\n  outline: none;\n  position: relative;\n  user-select: none;\n  width: var(--saltList-width, auto);\n}\n\n.vuuList-contentSized {\n  box-sizing: content-box;\n}\n\n.vuuList-borderless {\n  --list-borderStyle: none;\n}\n\n/* virtualised list */\n.vuuList-viewport {\n  height: var(--computed-list-height, var(--measured-px-height));\n  overflow: auto;\n  width: var(--measured-px-width);\n}\n\n.vuuListItemHeader {\n  --saltList-item-background: var(--list-item-header-background);\n  color: var(--list-item-header-color);\n}\n\n.vuuListItemHeader[data-sticky=\"true\"] {\n  --saltList-item-background: var(--list-background);\n  position: sticky;\n  top: 0;\n  z-index: 1;\n}\n\n.vuuList-collapsible .vuuListItemHeader:after {\n  border-width: var(--checkbox-borderWidth);\n  border-color: var(--checkbox-borderColor);\n  content: var(--list-item-header-twisty-content);\n  -webkit-mask: var(--list-svg-chevron-down) center center/12px 12px no-repeat;\n  mask: var(--list-svg-chevron-down) center center/12px 12px no-repeat;\n  background: var(--list-item-header-twisty-color);\n  height: 12px;\n  left: var(--list-item-header-twisty-left);\n  right: var(--list-item-header-twisty-right);\n  margin-top: -8px;\n  position: absolute;\n  top: var(--list-item-header-twisty-top);\n  transition: transform 0.3s;\n  width: 12px;\n}\n.vuuListItemHeader[aria-expanded=\"false\"]:after {\n  transform: rotate(-90deg);\n}\n\n/* Selection */\n\n.vuuList-scrollingContentContainer {\n  box-sizing: inherit;\n  position: relative;\n}\n\n.vuuList-virtualized .vuuListItem {\n  line-height: 30px;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  will-change: transform;\n}\n.vuuList.saltFocusVisible:after {\n  inset: 2px;\n}\n", ".vuuRadioIcon {\n    --vuu-icon-size: 12px;\n    --vuu-icon-left: -1px;\n    --vuu-icon-top: -1px;\n    --vuu-icon-svg: var(--vuu-svg-radio);\n    border-style: solid;\n    border-color: var(--vuuRadioIcon-borderColor, var(--salt-selectable-borderColor));\n    border-radius: 50%;\n    border-width: 1px;\n    display: inline-block;\n    height: var(--vuuRadioIcon-size, 12px);\n    position: relative;\n    width: var(--vuuRadioIcon-size, 12px);\n}\n\n.vuuRadioIcon-checked {\n    background-image: var(--vuu-svg-radio);\n    border: none;\n    background-repeat: no-repeat;\n}\n\n.vuuRadioIcon-checked:after {\n    content: \"\";\n    left: var(--vuu-icon-left, auto);\n    height: var(--vuu-icon-height, var(--vuu-icon-size, 12px));\n    -webkit-mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);\n    mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);\n    mask-repeat: no-repeat;\n    -webkit-mask-repeat: no-repeat;\n    position: absolute;\n    top: var(--vuu-icon-top, auto);\n    width: var(--vuu-icon-width, var(--vuu-icon-size, 12px));\n}\n", ".vuuChevronIcon {\n    --vuu-icon-size: 14px;\n    --vuu-icon-left: -1px;\n    --vuu-icon-top: -1px;\n    height: var(--vuuChevronIcon-size, 14px);\n    position: relative;\n    width: var(--vuuChevronIcon-size, 14px);\n    cursor: pointer;\n}\n\n.vuuChevronIcon:after {\n    content: \"\";\n    background-color: #777C94;\n    left: var(--vuu-icon-left, auto);\n    height: var(--vuu-icon-height, var(--vuu-icon-size, 12px));\n    -webkit-mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);\n    mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);\n    mask-repeat: no-repeat;\n    -webkit-mask-repeat: no-repeat;\n    position: absolute;\n    top: var(--vuu-icon-top, auto);\n    width: var(--vuu-icon-width, var(--vuu-icon-size, 12px));\n}\n\n.vuuChevronIcon.up {\n  --vuu-icon-svg: var(--vuu-svg-chevron-up);\n}\n\n.vuuChevronIcon.down {\n  --vuu-icon-svg: var(--vuu-svg-chevron-down);\n}\n\n.vuuChevronIcon.left {\n  --vuu-icon-svg: var(--vuu-svg-chevron-left);\n}\n\n.vuuChevronIcon.right {\n  --vuu-icon-svg: var(--vuu-svg-chevron-right);\n}\n", ".vuuEditableLabel {\n  --editableLabel-padding: var(--vuuEditableLabel-padding, 6px);\n  --editableLabel-height: var(--vuuEditableLabel-height, 26px);\n  --saltInput-background: transparent;\n  --saltInput-height: calc(var(--editableLabel-height) - 4px);\n  --saltInput-minWidth: 14px;\n\n  color: inherit;\n  cursor: default;\n  display: flex;\n  flex-direction: column;\n  font-size: var(--salt-text-fontSize);\n  height: var(--editableLabel-height);\n  justify-content: center;\n  max-width: 170px;\n  outline: none;\n  overflow: hidden;\n  padding: 0 var(--editableLabel-padding);\n  position: relative;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  z-index: var(--salt-zIndex-default);\n}\n\n.vuuEditableLabel:before {\n  content: attr(data-text);\n  display: block;\n  height: 0px;\n  visibility: hidden;\n  white-space: pre-wrap;\n}\n\n.vuuEditableLabel .saltInput {\n  font-weight: var(--salt-text-fontWeight);\n  left: var(--editableLabel-padding, 0);\n  padding: 0;\n  outline-style: none;\n  position: absolute;\n  right: var(--editableLabel-padding, 0);\n  top: var(--saltEditableLabel-top, 2px);\n  width: auto;\n}\n\n.vuuEditableLabel .saltInput-activationIndicator {\n  display: none;\n}\n\n.vuuEditableLabel-input {\n  background-color: transparent;\n  border: none;\n  box-sizing: content-box;\n  color: inherit;\n  display: block;\n  flex: 1;\n  font: inherit;\n  height: 20px;\n  margin:0;\n  min-width:0;\n  outline: none;\n  padding: 0;\n}\n\n.vuuEditableLabel-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n", ".vuuExpandoInput {\n\n    --salt-editable-secondary-background: white;\n    --expandoInput-height: var(--vuuExpandoInput-height, 26px);\n    --expandoInput-padding: var(--vuuExpandoInput-padding, 6px);\n\n    --saltInput-height: calc(var(--vuuExpandoInput-height) - 4px);\n    --saltInput-minWidth: var(--vuuExpandoInput-minWidth, 8px);\n  \n    border: var(--vuuExpandoInput-border, none);\n    border-radius: var(--vuuExpandoInput-borderRadius, 0);\n    color: inherit;\n    cursor: default;\n    display: inline-block;\n    font-size: var(--salt-text-fontSize);\n    height: var(--expandoInput-height);\n    min-width: calc(var(--saltInput-minWidth) + 2 * var(--expandoInput-padding));\n    outline: none;\n    padding: 0 var(--expandoInput-padding);\n    position: relative;\n\n}\n\n.vuuExpandoInput:before {\n    content: attr(data-text);\n    display: block;\n    height: 0px;\n    visibility: hidden;\n    white-space: pre-wrap;\n  }\n  \n  .vuuExpandoInput .saltInput {\n    font-weight: var(--salt-text-fontWeight);\n    left: var(--expandoInput-padding, 0);\n    padding: 0;\n    outline-style: none;\n    position: absolute;\n    right: var(--expandoInput-padding, 0);\n    top: var(--vuuExpandoInput-top, 2px);\n    width: auto;\n  }\n  \n  .vuuExpandoInput .saltInput-activationIndicator {\n    display: none;\n  }\n  \n  .vuuExpandoInput-input {\n    background-color: transparent;\n    border: none;\n    box-sizing: content-box;\n    display: block;\n    flex: 1;\n    font: inherit;\n    height: 20px;\n    margin:0;\n    min-width:0;\n    outline: none;\n    padding: 0;\n  }\n  ", ".vuuCheckbox {\n  display: flex;\n  height: 24px;\n  align-items: center;\n  gap: 6px;\n  color: var(--light-text-primary, #15171B);\n  font-feature-settings: 'ss02' on, 'ss01' on, 'salt' on, 'liga' off;\n  font-size: 12px;\n  font-weight: 400;\n  cursor: pointer;\n}", ".vuuRadioButton {\n  display: flex;\n  height: 24px;\n  align-items: center;\n  gap: 6px;\n  color: var(--light-text-primary, #15171B);\n  font-feature-settings: 'ss02' on, 'ss01' on, 'salt' on, 'liga' off;\n  font-size: 12px;\n  font-weight: 400;\n  cursor: pointer;\n}\n\n.radio {\n  position: relative;\n  height: 12px;\n}\n\ninput[type=\"radio\"] {\n\tposition: absolute;\n  appearance: none;\n\twidth: 100%;\n  height: 100%;\n  border-radius: 50%;\n  margin: 0;\n  top: 0;\n}", "\n.vuuSearchCell {\n  --vuu-icon-left: 0;\n  --vuu-icon-size: 16px;\n  --vuu-icon-top: 0px;\n  align-items: center;\n  color: var(--background-cell-color);\n  display: flex;\n  gap: 4px;\n  padding: 0 8px 0 8px;\n  position: relative;\n  z-index: -1;\n}\n\n", ".vuuInstrumentSearch {\n    height: 100%;\n    padding: var(--vuuInstrumentSearch-padding, 12px);\n    display: flex;\n    flex-direction: column;\n}\n\n.vuuInstrumentSearch-inputField {\n    --vuu-icon-size: 16px;\n    flex: 0 0 40px;\n}\n.vuuInstrumentSearch-list {\n    background-color: var(--salt-container-primary-background);\n    flex: 1 1 auto;\n}\n\n.vuuInstrumentSearch .vuuTableNextCell {\n    padding: 0;\n}\n", "@property --price-ticker-color {\n    syntax: '<color>'; /* <- defined as type number for the transition to work */\n    initial-value: #15171B;\n    inherits: false;\n}\n  \n.vuuPriceTicker {\n  align-items: center;\n  display: flex;\n  font-size: var(--vuuPriceTicker-fontSize, var(--salt-text-fontSize));\n  font-weight: var(--vuuPriceTicker-fontWeight, 700);\n  transition-property: color;\n  transition-duration: .3s;;\n}\n\n.vuuPriceTicker.up1 {\n  --vuu-icon-color: var(--vuu-color-green-50);\n  color: var(--vuu-color-green-50);\n    animation-duration: 30s;\n  }\n  \n  .vuuPriceTicker.up2 {\n    --vuu-icon-color: var(--vuu-color-green-50);\n    color: var(--vuu-color-green-50);\n    animation-duration: 30s;\n  }\n  \n  .vuuPriceTicker.down1 {\n    --vuu-icon-transform: rotate(180deg);\n  --vuu-icon-color: var(--vuu-color-red-50);\n    color: var(--vuu-color-red-50);\n    animation-duration: 30s;\n  }\n  \n  .vuuPriceTicker.down2 {\n    --vuu-icon-transform: rotate(180deg);\n    --vuu-icon-color: var(--vuu-color-red-50);\n    color: var(--vuu-color-red-50);\n    animation-duration: 30s;\n  }\n  ", "/* Component class applied to the root element */\n.vuuTabstrip {\n  --vuuOverflowContainer-background: transparent;\n  /* --tabstrip-height: var(--vuuTabstrip-height, var(--salt-size-stackable)); */\n  --tabstrip-dragging-display: none;\n  --tabstrip-display: inline-flex;\n  --tabstrip-background: transparent;\n\n  align-self: var(--saltTabs-tabstrip-alignSelf, stretch);\n  display: flex;\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--vuuTabstrip-fontWeight, var(--salt-text-fontWeight));\n  min-width: 28px;\n  position: relative;\n  overflow: visible;\n  width: var(--tabstrip-width);\n}\n\n/* Tabstrip orientation is horizontal */\n.vuuTabstrip-horizontal {\n  --tabstrip-height: var(--vuuTabstrip-height, 28px);\n  --tabstrip-width: var(--vuuTabstrip-width, 100%);\n  --tab-height: var(--tabstrip-height);\n  --tab-width: auto;\n  --tab-thumb-height: 2px;\n  --tab-thumb-left: var(--tab-thumb-offset, 0);\n  --tab-thumb-top: auto;\n  --tab-thumb-width: var(--tab-thumb-size, 100%);\n  align-items: flex-start;\n  border-bottom: var(--vuuTabstrip-borderBottom, solid 1px var(--salt-container-primary-borderColor));\n}\n\n/* Tabstrip orientation is vertical */\n.vuuTabstrip-vertical {\n  --tabstrip-height: var(--vuuTabstrip-height, 100%);\n  --tabstrip-width: var(--vuuTabstrip-width, 100px);\n  --tab-height: 50px;\n  --tab-width: 100%;\n  --tab-thumb-height: 0;\n  --tab-thumb-left: 0;\n  --tab-thumb-top: var(--tab-thumb-offset, 0);\n  --tab-thumb-width: 2px;\n\n  align-self: flex-start;\n  display: inline-flex;\n}\n\n.vuuTabstrip-draggingTab .vuuTab {\n  pointer-events: none;\n}\n\n.vuuTabstrip-addTabButton {\n  --saltButton-height: 20px;\n  --saltButton-width: 20px;\n}\n\n.vuuTabstrip-overflowMenu.vuuDropdown {\n  --saltIcon-margin: 2px 0 0 0px;\n}\n\n.vuuTabstrip-overflowMenu-open {\n  --saltButton-background: var(--salt-actionable-secondary-background-active);\n  --saltButton-text-color: var(--salt-actionable-secondary-text-color-active);\n}\n\n.vuuTabstrip-overflowMenu-open .saltButton {\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-active);\n}\n\n.vuuTabstrip-inner {\n  width: 100%;\n  align-items: center;\n  display: flex;\n  flex-basis: auto;\n  flex-grow: 0;\n  flex-shrink: 1;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  line-height: var(--tabstrip-height);\n}\n\n.vuuTabstrip-vertical .vuuTabstrip-inner {\n  flex-direction: column;\n  height: auto;\n}\n\n.vuuTabstrip-centered .vuuTabstrip-inner {\n  justify-content: center;\n}\n\n/* Styling applied to Draggable wrapper when used to drag a Tab */\n.vuuDraggable[class*=\"vuuTabstrip\"] {\n  --tabstrip-display: flex;\n  --tabstrip-height: 100%;\n  --tabstrip-dragging-display: block;\n\n  --tabs-tab-background: var(--salt-navigable-primary-background-hover);\n  --tabs-tab-before-content: \"\";\n  --tabs-tab-before-background: var(--salt-navigable-indicator-hover);\n  --tabs-tab-before-height: var(--tab-activationIndicator-thumb-height);\n  --tabs-tab-before-inset: var(--tab-activationIndicator-inset);\n  --tabs-tab-before-width: var(--tab-activationIndicator-thumb-width);\n  --tabs-tab-cursor: var(--salt-draggable-grab-cursor-active);\n  --tabs-tab-position: static;\n\n  font-size: 12px;\n}\n\n.vuuDraggable-tabstrip-horizontal {\n  --tab-thumb-height: 2px;\n  --tab-thumb-left: 0px;\n  --tabstrip-height: 28px;\n  line-height: var(--tabstrip-height);\n}\n\n\n.vuuDraggable[class*=\"tabstrip\"] .vuuTab[aria-selected=\"true\"]:before {\n  --tabs-tab-before-background: var(--salt-navigable-indicator-active);\n}\n\n/* [data-overflowed] {\n  order: 99;\n  visibility: hidden;\n} */\n\n.vuuTabstrip-overflowMenu-dropTarget:after {\n  background: var(--salt-selectable-background-selected);\n  content: \"\";\n  position: absolute;\n  height: 2px;\n  left: 0;\n  right: 0;\n  bottom: 0;\n}\n", ".vuuTabMenu {\n    top: -2px;\n}", "/* Class applied to root Tab element */\n.vuuTab {\n  \n  --saltEditableLabel-padding: 0;\n  --saltEditableLabel-height: calc(var(--tabstrip-height) - 2px);\n  --saltInputLegacy-minWidth: 4em;\n  --saltEditableLabel-top: 2px;\n\n  --tab-background: var(--vuuTab-background, var(--salt-navigable-primary-background));\n  --tab-cursor: pointer;\n  --tab-position: relative;\n}\n\n.vuuTab {\n  align-items: center;\n  align-self: stretch;\n  background: var(--tab-background);\n  border: none;\n  border-radius: var(--vuuTab-borderRadius, 0);\n  color: var(--salt-text-primary-foreground);\n  cursor: var(--vuuTab-cursor, var(--tab-cursor));\n  display: var(--tabstrip-display);\n  gap: 8px;\n  height: var(--vuuTabHeight, var(--tab-height));\n  letter-spacing: var(--vuuTab-letterSpacing, var(--tab-letterSpacing, 0));\n  min-width: var(--vuuTab-minWidth, 40px);\n  outline: none;\n  padding: var(--vuuTab-padding, 0 24px);\n  position: var(--vuuTab-position, var(--tab-position));\n  user-select: none;\n  width: var(--tab-width)\n}\n\n/* Overrides characteristic used in saltFocusVisible */\n/* .vuuTab.saltFocusVisible:after {\n  inset: 2px 2px 4px 2px;\n} */\n\n.vuuTab {\n  margin: 0 var(--tab-spacing) 0 0;\n}\n\n.vuuTab-selected {\n  background: var(--vuuTab-background-selected, var(--tab-background));\n  color: var(--salt-text-primary-foreground);\n  font-weight: var(--salt-navigable-fontWeight-active);\n}\n\n/* main content aria of Tab */\n.vuuTab-main {\n  align-items: center;;\n  border: none;\n  color: inherit;\n  cursor: inherit;\n  display: flex;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n  height: calc(var(--tab-height) - var(--tab-thumb-height));\n  margin-bottom: var(--tab-thumb-height);\n  outline: none;\n  position: relative;\n}\n\n.vuuTab-closeable .vuuTab-main {\n  border-right: solid transparent var(--salt-size-unit);\n}\n\n.vuuTab .vuuTab-closeButton {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* the close Button on a closeable Tab*/\n.vuuTab-close-icon {\n  display: none;\n}\n\n.salt-density-touch .vuuTab-close-icon,\n.salt-density-low .vuuTab-close-icon {\n  display: block;\n}\n\n.salt-density-touch .vuuTab-close-icon-small,\n.salt-density-low .vuuTab-close-icon-small {\n  display: none;\n}\n\n.vuuTab .vuuTab-text {\n  display: inline-block;\n  position: relative;\n  overflow: hidden;\n  text-align: var(--salt-text-textAlign-embedded);\n  text-overflow: ellipsis;\n  top: var(--vuuTab-top, var(--tab-top, auto));\n  white-space: nowrap;\n  /* ensure content sits above focus ring */\n  z-index: var(--salt-zIndex-default);\n}\n\n.vuuTab .vuuTab-text:before {\n  height: 0;\n  content: attr(data-text);\n  display: block;\n  visibility: hidden;\n  font-weight: var(--salt-navigable-fontWeight-active);\n}\n\n/* FIXME: these are all focusVisible styles, but with a bespoke inset */\n.vuuTab-editing:after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 2px;\n  outline-color: var(--salt-focused-outlineColor);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: -2px;\n}\n\n.vuuTab.vuuFocusVisible {\n  background: var(--vuuTab-hover-background, var(--salt-navigable-primary-background-hover));\n  outline-color: var(--vuuTab-focusVisible-color, var(--salt-focused-outlineColor));\n  outline-style: dashed;\n  outline-width: 1px;\n  outline-offset: -1px;\n}\n\n.vuuTab:before {\n  content: var(--tab-before-content, none);\n  content: \"\";\n  background: var(--tab-before-background);\n  height: var(--tab-before-height);\n  inset: var(--tab-before-inset);\n  position: absolute;\n  width: var(--tab-before-width);\n  z-index: 1;\n}\n\n.vuuTabstrip-draggingTab .vuuTab-selected:before {\n  --tab-before-content: \"\";\n  --tab-before-background: var(--salt-navigable-indicator-color-active);\n  --tab-before-height: var(--tab-thumb-height);\n  --tab-before-inset: var(--tab-activationIndicator-inset);\n  --tab-before-width: var(--tab-activationIndicator-thumb-width);\n}\n\n/* .vuuDraggable .vuuTab:before,\n.vuuTab:not(.vuuTab-selected).saltFocusVisible:before,\n.vuuTab:hover:not(.vuuTab-selected):before {\n  --tab-before-content: \"\";\n  --tab-before-background: var(--salt-navigable-indicator-hover);\n  --tab-before-height: var(--tab-thumb-height);\n  --tab-before-inset: var(--tab-activationIndicator-inset);\n  --tab-before-width: var(--tab-activationIndicator-thumb-width);\n} */\n\n.vuuTab-selected:before {\n  --tab-before-content: \"\";\n  background: var(--salt-navigable-indicator-active);\n  height: var(--tab-thumb-height);\n  position: absolute;\n  left: var(--tab-thumb-left);\n  bottom: 0px; \n  top: var(--tab-thumb-top, auto);\n  transition: var(--tab-thumb-transition, none);\n  width: var(--tab-thumb-width, 100%);\n}\n\n.vuuTab:hover:not(.vuuTab-closeHover) {\n  background: var(--vuuTab-hover-background, var(--salt-navigable-primary-background-hover));\n}\n\n/* .vuuTabstrip.vuuTabThumb-noTransition .vuuTab-selected:before {\n  transition: none; \n} */", ".vuuTree {\n  --tree-node-collapse: var(--vuuTree-toggle-collapse, var(--svg-tree-node-collapse));\n  --tree-node-expand: var(--vuuTree-toggle-expand, var(--svg-tree-node-expand));\n  --tree-toggle-width: 12px;\n  --tree-icon-color: var(--vuuTree-icon-color, #4c505b);\n  --tree-node-expanded-transform: var(--vuuTree-node-expanded-transform, none);\n  --tree-node-indent: 0px;\n\n  --list-hilited-bg: var(--hw-list-hilited-bg, rgba(0, 0, 0, 0.1));\n  --list-item-height: var(--hw-list-item-height, 30px);\n  --list-item-padding: var(--hw-list-item-padding, 0 6px);\n  --list-item-header-bg: var(--hw-list-item-header-bg, black);\n  --list-item-header-color: var(--hw-list-item-header-color, white);\n  --list-item-header-font-weight: bold;\n  --list-item-header-twisty-color: black;\n  --list-item-header-twisty-content: '';\n  --list-item-header-twisty-top: 50%;\n  --list-item-header-twisty-left: -18px;\n  --list-item-header-twisty-right: auto;\n  --list-item-selected-bg: var(--hw-list-selected-bg, #1ea7fd);\n  --list-item-selected-color: white;\n  --list-item-text-color: var(--hw-gray-800);\n  --focus-visible-border-color: var(--hw-focus-visible-border-color, rgb(141, 154, 179));\n\n  list-style: none;\n  margin: 0;\n  padding: 0 1px;\n  font-size: var(--vuuTree-font-size, 14px);\n  max-height: inherit;\n  outline: none;\n  overflow-y: auto;\n  position: relative;\n  user-select: none;\n}\n\n.vuuTree-viewport {\n  --list-item-height: 30px;\n  box-sizing: border-box;\n  max-height: inherit;\n  overflow: auto;\n}\n\n.vuuTree-scrollingContentContainer {\n  box-sizing: inherit;\n  position: relative;\n}\n\n.vuuTree-scrollingContentContainer .vuuTreeNode {\n  line-height: 30px;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  will-change: transform;\n}\n\n.vuuTreeNode {\n  list-style: none;\n}\n\n/* Leaf node or the div child of a collapsible node */\n.vuuTreeNode:not([aria-expanded]),\n.vuuTreeNode[aria-expanded] > .vuuTreeNode-label {\n  --checkbox-border-color: black;\n  --checkbox-border-width: 1px;\n  --checkbox-tick: black;\n  --list-item-padding-left: 6px;\n  --svg-toggle: var(--tree-node-collapse);\n\n  align-items: center;\n  color: var(--list-item-text-color);\n  display: flex;\n  flex-wrap: nowrap;\n  height: var(--list-item-height);\n  line-height: var(--list-item-height);\n  padding: var(--list-item-padding);\n  padding-left: var(--padding-left);\n  position: relative;\n  cursor: default;\n  margin: 0;\n  white-space: nowrap;\n}\n\n.vuuTreeNode:not([aria-expanded]) {\n  --padding-left: calc(\n    var(--list-item-padding-left) + var(--tree-toggle-width) + var(--tree-node-indent)\n  );\n}\n\n.vuuTreeNode[aria-expanded] > .vuuTreeNode-label {\n  --padding-left: calc(\n    var(--list-item-padding-left) + var(--tree-toggle-width) + var(--tree-node-indent)\n  );\n}\n\n.vuuTreeNode-icon {\n  background-color: var(--tree-icon-color);\n  display: inline-block;\n  height: 18px;\n  margin-right: 6px;\n  -webkit-mask: var(--vuu-icon-svg) center center/12px 12px no-repeat;\n  mask: var(--vuu-icon-svg) center center/12px 12px no-repeat;\n  flex: 0 0 18px;\n}\n\n.vuuTreeNode[aria-expanded] {\n  flex-direction: column;\n}\n\n.vuuTreeNode[aria-expanded] {\n  flex-direction: column;\n  height: auto;\n}\n\n.vuuTreeNode > *[role='group'] {\n  padding-left: 0px;\n}\n\n.vuuTreeNode {\n  padding-left: calc(var(--padding-left) + var(--tree-node-indent));\n}\n\n.vuuTreeNode[aria-level='2'] {\n  --tree-node-indent: 12px;\n}\n.vuuTreeNode[aria-level='3'] {\n  --tree-node-indent: 24px;\n}\n.vuuTreeNode[aria-level='4'] {\n  --tree-node-indent: 36px;\n}\n\n.vuuTreeNode:not(.focusVisible):not(.hwListItemHeader):not([aria-expanded])[data-highlighted],\n.vuuTreeNode:not(.focusVisible):not(.hwListItemHeader)[aria-expanded][data-highlighted]\n  > div:first-child {\n  background-color: var(--list-hilited-bg);\n}\n\n.vuuTreeNode-toggle {\n  cursor: pointer;\n}\n\n.vuuTreeNode > .vuuTreeNode-toggle {\n  display: inline-block;\n  height: 100%;\n  left: 0;\n  position: absolute;\n  width: calc(var(--list-item-padding-left) + var(--tree-toggle-width));\n}\n\n.vuuTreeNode[aria-expanded] > .vuuTreeNode-label:after {\n  content: var(--list-item-header-twisty-content);\n  -webkit-mask: var(--svg-toggle) center center/8px 8px no-repeat;\n  mask: var(--svg-toggle) center center/8px 8px no-repeat;\n  background-color: var(--list-item-header-twisty-color);\n  height: 18px;\n  margin-top: -9px;\n  left: var(--tree-node-indent);\n  position: absolute;\n  top: var(--list-item-header-twisty-top);\n  transition: transform 0.3s;\n  width: 18px;\n}\n\n.vuuTreeNode[aria-selected='true'] {\n  --list-item-header-twisty-color: var(--list-item-selected-color);\n}\n\n\n.vuuTreeNode:not(.focusVisible):focus {\n  background-color: rgba(0, 0, 0, 0.1);\n}\n\n.vuuTreeNode:not([aria-expanded]).focusVisible:before,\n.vuuTreeNode[aria-expanded].focusVisible > div:first-child:before {\n  content: '';\n  position: absolute;\n  top: 0px;\n  left: var(--tree-focus-offset, 0px);\n  right: 0;\n  bottom: 0px;\n  border: dotted var(--focus-visible-border-color) 2px;\n  background-color: var(--list-hilited-bg);\n}\n\n\n.vuuTreeNode[aria-expanded='false'] > *:first-child:after {\n  --svg-toggle: var(--tree-node-expand);\n}\n\n.vuuTreeNode[aria-expanded='true'] > *:first-child:after {\n  transform: var(--tree-node-expanded-transform);\n}\n\n/* Selection */\n\n.vuuTree:not(.checkbox-only) .vuuTreeNode:not([aria-expanded])[aria-selected='true'],\n.vuuTree:not(.checkbox-only) .vuuTreeNode[aria-expanded][aria-selected='true'] > div:first-child {\n  --checkbox-border-color: var(--list-item-selected-color);\n  --checkbox-tick: var(--list-item-selected-color);\n  --focus-visible-border-color: var(--list-item-selected-color);\n  background-color: var(--list-item-selected-bg);\n  color: var(--list-item-selected-color);\n}\n\n.with-checkbox .vuuTreeNode {\n  padding-left: 28px;\n}\n\n.with-checkbox .vuuTreeNode:before {\n  border-style: solid;\n  border-width: var(--checkbox-border-width);\n  border-color: var(--checkbox-border-color);\n  content: '';\n  height: 12px;\n  left: 3px;\n  margin-top: -7px;\n  position: absolute;\n  top: 50%;\n  width: 12px;\n}\n"],
+  "mappings": ";AAAA;AACE;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;;;AC5BF;AACE;AACA;AACA;AACA;AACA;AACA;AAEA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AAAA;AAEE;AAAA;;;ACtCF;AACE;AAAA;;;ACDF;AACI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGJ;AACI;AACA;AAAA;AAGJ;AACI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;;AC/BJ;AAEE;AACA;AAEA;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAEF;AACE;AACA;AAAA;AAGF;AACE;AAAA;;;ACjGF;AACE;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AAGA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AAGE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AAAA;;;ACtDF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAIF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEF;AACE;AAAA;AAKF;AACE;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AAAA;AAEF;AACE;AAAA;;;ACzFF;AACI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGJ;AACI;AACA;AACA;AAAA;AAGJ;AACI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;;AC/BJ;AACI;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGJ;AACI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGJ;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;;;ACrCF;AACE;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;;;ACjEF;AAEI;AACA;AACA;AAEA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAIJ;AACI;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;;ACzDJ;AACE;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AAAA;;;ACTF;AACE;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACC;AACC;AACD;AACC;AACA;AACA;AACA;AAAA;;;ACvBF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;;ACXF;AACI;AACA;AACA;AACA;AAAA;AAGJ;AACI;AACA;AAAA;AAEJ;AACI;AACA;AAAA;AAGJ;AACI;AAAA;;;ACjBJ;AAMA;AACE;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACE;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACF;AACE;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;;;ACrCJ;AACE;AAEA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAIF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAIF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AAAA;AAIF;AACE;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAIF;AACE;AAAA;AAQF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;;ACpIF;AACI;AAAA;;;ACAJ;AAEE;AACA;AACA;AACA;AAEA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAQF;AACE;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAIF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAIF;AACE;AAAA;AAGF;AAAA;AAEE;AAAA;AAGF;AAAA;AAEE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAAA;AAIF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAAA;AAaF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;;;AC7KF;AACE;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAIF;AAAA;AAEE;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAKF;AACE;AAAA;AAKF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAGF;AAAA;AAGE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAIF;AACE;AAAA;AAGF;AAAA;AAEE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAIF;AACE;AAAA;AAGF;AACE;AAAA;AAKF;AAAA;AAEE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;",
   "names": []
 }

package/package.json CHANGED Viewed

@@ -1,16 +1,18 @@
 {
   "name": "@vuu-ui/vuu-ui-controls",
-  "version": "0.8.8-debug",
+  "version": "0.8.9-debug",
   "description": "VUU UI Controls",
   "author": "heswell",
   "license": "Apache-2.0",
   "dependencies": {
     "@salt-ds/core": "1.8.0",
-    "@vuu-ui/vuu-data": "0.8.8-debug",
-    "@vuu-ui/vuu-data-types": "0.8.8-debug",
-    "@vuu-ui/vuu-layout": "0.8.8-debug",
-    "@vuu-ui/vuu-popups": "0.8.8-debug",
-    "@vuu-ui/vuu-utils": "0.8.8-debug"
+    "@vuu-ui/vuu-data": "0.8.9-debug",
+    "@vuu-ui/vuu-data-types": "0.8.9-debug",
+    "@vuu-ui/vuu-datagrid-types": "0.8.9-debug",
+    "@vuu-ui/vuu-layout": "0.8.9-debug",
+    "@vuu-ui/vuu-table": "0.8.9-debug",
+    "@vuu-ui/vuu-popups": "0.8.9-debug",
+    "@vuu-ui/vuu-utils": "0.8.9-debug"
   },
   "peerDependencies": {
     "classnames": "^2.2.6",

package/types/vuu-popups/src/dialog/Dialog.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import { HTMLAttributes } from "react";
+import "./Dialog.css";
+export interface DialogProps extends HTMLAttributes<HTMLDivElement> {
+    isOpen?: boolean;
+    onClose?: () => void;
+    hideCloseButton?: boolean;
+}
+export declare const Dialog: ({ children, className, isOpen, onClose, title, hideCloseButton, ...props }: DialogProps) => JSX.Element | null;

package/types/vuu-popups/src/dialog/index.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export * from "./Dialog";

package/types/vuu-popups/src/index.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+export * from "./dialog";
+export * from "./menu";
+export * from "./popup";
+export * from "./popup-menu";
+export * from "./portal";
+export * from "./portal-deprecated";
+export * from "./prompt";
+export * from "./tooltip";

package/types/vuu-popups/src/menu/ContextMenu.d.ts ADDED Viewed

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { MenuListProps } from "./MenuList";
+import { PopupCloseCallback } from "../popup";
+import "./ContextMenu.css";
+export interface ContextMenuProps extends Omit<MenuListProps, "onCloseMenu"> {
+    onClose?: PopupCloseCallback;
+    position?: {
+        x: number;
+        y: number;
+    };
+    withPortal?: boolean;
+}
+export declare const ContextMenu: {
+    ({ activatedByKeyboard, children: childrenProp, className, id: idProp, onClose, position, style, ...menuListProps }: ContextMenuProps): JSX.Element;
+    displayName: string;
+};

package/types/vuu-popups/src/menu/MenuList.d.ts ADDED Viewed

@@ -0,0 +1,43 @@
+import React, { FC, HTMLAttributes, ReactElement, ReactNode } from "react";
+import "./MenuList.css";
+export declare const Separator: () => JSX.Element;
+export interface MenuItemGroupProps {
+    children: ReactElement<MenuItemProps>[] | [ReactElement<MenuItemLabelProps>, ...ReactElement<MenuItemProps>[]];
+    label?: string;
+}
+export interface MenuItemProps extends HTMLAttributes<HTMLDivElement> {
+    action?: string;
+    idx?: number;
+    options?: unknown;
+}
+export declare const MenuItemGroup: FC<MenuItemGroupProps>;
+export declare const MenuItem: {
+    ({ children, idx, ...props }: MenuItemProps): JSX.Element;
+    Label: {
+        ({ children }: {
+            children: ReactNode;
+        }): JSX.Element;
+        displayName: string;
+    };
+};
+export interface MenuItemLabelProps {
+    children: ReactNode;
+}
+export declare const isMenuItemLabel: (item: ReactNode) => item is React.ReactElement<MenuItemLabelProps, string | React.JSXElementConstructor<any>>;
+export interface MenuListProps extends HTMLAttributes<HTMLDivElement> {
+    activatedByKeyboard?: boolean;
+    children: ReactElement[];
+    childMenuShowing?: string;
+    defaultHighlightedIdx?: number;
+    highlightedIdx?: number;
+    isRoot?: boolean;
+    listItemProps?: Partial<MenuItemProps>;
+    onActivate?: (menuId: string) => void;
+    onCloseMenu: (idx: number) => void;
+    onOpenMenu?: (menuItemEl: HTMLElement) => void;
+    onHighlightMenuItem?: (idx: number) => void;
+}
+export declare const MenuList: {
+    ({ activatedByKeyboard, childMenuShowing, children, className, defaultHighlightedIdx, highlightedIdx: highlightedIdxProp, id: idProp, isRoot, listItemProps, onHighlightMenuItem, onActivate, onCloseMenu, onOpenMenu, ...props }: MenuListProps): JSX.Element;
+    displayName: string;
+};

package/types/vuu-popups/src/menu/context-menu-provider.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+import type { ContextMenuContextType, MenuActionHandler, MenuBuilder } from "@vuu-ui/vuu-data-types";
+import { ReactNode } from "react";
+export declare const ContextMenuContext: import("react").Context<ContextMenuContextType | null>;
+export interface ContextMenuProviderProps {
+    children: ReactNode;
+    label?: string;
+    menuActionHandler?: MenuActionHandler;
+    menuBuilder: MenuBuilder;
+}
+export declare const ContextMenuProvider: ({ children, label, menuActionHandler, menuBuilder, }: ContextMenuProviderProps) => JSX.Element;

package/types/vuu-popups/src/menu/index.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+export * from "./ContextMenu";
+export * from "./MenuList";
+export * from "./context-menu-provider";
+export * from "./useContextMenu";

package/types/vuu-popups/src/menu/key-code.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+export declare const ArrowUp = "ArrowUp";
+export declare const ArrowDown = "ArrowDown";
+export declare const ArrowLeft = "ArrowLeft";
+export declare const Backspace = "Backspace";
+export declare const ArrowRight = "ArrowRight";
+export declare const Enter = "Enter";
+export declare const Escape = "Escape";
+export declare const Delete = "Delete";
+export declare const isCharacterKey: (evt: KeyboardEvent) => boolean | undefined;
+export declare const isNavigationKey: ({ key }: {
+    key: string;
+}, orientation?: string) => boolean;

package/types/vuu-popups/src/menu/list-dom-utils.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+export declare function listItemIndex(listItemEl: HTMLElement): number | undefined;
+export declare const closestListItem: (el: HTMLElement | null | undefined) => HTMLElement;
+export declare const closestListItemId: (el: HTMLElement) => string | undefined;
+export declare const closestListItemIndex: (el: HTMLElement) => number | undefined;

package/types/vuu-popups/src/menu/use-cascade.d.ts ADDED Viewed

@@ -0,0 +1,25 @@
+import { MouseEvent } from "react";
+import { MenuItemProps } from "./MenuList";
+export type RuntimeMenuDescriptor = {
+    id: string;
+    left: number;
+    top: number;
+};
+export declare const getHostMenuId: (id: string, rootId: string) => string;
+export interface CascadeHookProps {
+    id: string;
+    onActivate: (menuId: string) => void;
+    onMouseEnterItem: (evt: MouseEvent, itemId: string) => void;
+    position: {
+        x: number;
+        y: number;
+    };
+}
+export interface CascadeHooksResult {
+    closeMenu: () => void;
+    handleRender: () => void;
+    listItemProps: Partial<MenuItemProps>;
+    openMenu: (menuItemEl: HTMLElement) => void;
+    openMenus: RuntimeMenuDescriptor[];
+}
+export declare const useCascade: ({ id: rootId, onActivate, onMouseEnterItem, position: { x: posX, y: posY }, }: CascadeHookProps) => CascadeHooksResult;

package/types/vuu-popups/src/menu/use-items-with-ids-next.d.ts ADDED Viewed

@@ -0,0 +1,13 @@
+import { ReactElement } from "react";
+export declare const isMenuItemGroup: (child: ReactElement) => boolean;
+type Menus = {
+    [key: string]: ReactElement[];
+};
+type Actions = {
+    [key: string]: {
+        action: string;
+        options?: unknown;
+    };
+};
+export declare const useItemsWithIdsNext: (childrenProp: ReactElement[], rootId: string) => [Menus, Actions];
+export {};

package/types/vuu-popups/src/menu/use-keyboard-navigation.d.ts ADDED Viewed

@@ -0,0 +1,27 @@
+import { FocusEvent, KeyboardEvent } from "react";
+export interface KeyboardNavigationProps {
+    autoHighlightFirstItem?: boolean;
+    count: number;
+    defaultHighlightedIdx?: number;
+    highlightedIndex?: number;
+    onActivate: (idx: number) => void;
+    onHighlight?: (idx: number) => void;
+    onCloseMenu: (idx: number) => void;
+    onOpenMenu?: (menuItemEl: HTMLElement) => void;
+}
+export interface KeyboardHookListProps {
+    onFocus: (evt: FocusEvent) => void;
+    onKeyDown: (evt: KeyboardEvent) => void;
+    onMouseDownCapture: () => void;
+    onMouseMove: () => void;
+    onMouseLeave: () => void;
+}
+export interface NavigationHookResult {
+    focusVisible: number;
+    controlledHighlighting: boolean;
+    highlightedIndex: number;
+    setHighlightedIndex: (idx: number) => void;
+    listProps: KeyboardHookListProps;
+    setIgnoreFocus: (ignoreFocus: boolean) => void;
+}
+export declare const useKeyboardNavigation: ({ autoHighlightFirstItem, count, defaultHighlightedIdx, highlightedIndex: highlightedIndexProp, onActivate, onHighlight, onCloseMenu, onOpenMenu, }: KeyboardNavigationProps) => NavigationHookResult;

package/types/vuu-popups/src/menu/useContextMenu.d.ts ADDED Viewed

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { MenuActionHandler, MenuBuilder } from "@vuu-ui/vuu-data-types";
+import { ContextMenuProps } from "./ContextMenu";
+export type ContextMenuOptions = {
+    [key: string]: unknown;
+    contextMenu?: JSX.Element;
+    ContextMenuProps?: Partial<ContextMenuProps> & {
+        className?: string;
+        "data-mode"?: string;
+    };
+    controlledComponentId?: string;
+};
+export type EventLike = {
+    clientX: number;
+    clientY: number;
+    preventDefault?: () => void;
+    stopPropagation?: () => void;
+};
+export type ShowContextMenu = (e: EventLike, location: string, options: ContextMenuOptions) => void;
+export declare const useContextMenu: (menuBuilder?: MenuBuilder, menuActionHandler?: MenuActionHandler) => [ShowContextMenu, () => void];

package/types/vuu-popups/src/menu/utils.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export declare const isRoot: (el: HTMLElement) => boolean;
2	+ export declare const hasPopup: (el: HTMLElement, idx: number) => boolean;

package/types/vuu-popups/src/popup/Popup.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+import { HTMLAttributes, RefObject } from "react";
+import "./Popup.css";
+export type PopupPlacement = "below" | "below-center" | "below-full-width" | "center" | "right";
+export interface PopupComponentProps extends HTMLAttributes<HTMLDivElement> {
+    placement: PopupPlacement;
+    anchorElement: RefObject<HTMLElement>;
+    offsetLeft?: number;
+    offsetTop?: number;
+}
+export declare const PopupComponent: ({ children, className, anchorElement, placement, }: PopupComponentProps) => JSX.Element | null;

package/types/vuu-popups/src/popup/index.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+export * from "./popup-service";
+export * from "./Popup";
+export * from "./useAnchoredPosition";

package/types/vuu-popups/src/popup/popup-service.d.ts ADDED Viewed

@@ -0,0 +1,59 @@
+import React, { ReactElement } from "react";
+import { ContextMenuOptions } from "../menu";
+import "./popup-service.css";
+export type PopupCloseCallback = (reason?: PopupCloseReason) => void;
+export type ClickAwayClosePopup = {
+    type: "click-away";
+    mouseEvt: MouseEvent;
+};
+export type EscapeClosePopup = {
+    type: "escape";
+    event: KeyboardEvent;
+};
+export type MenuActionClosePopup = {
+    menuId: string;
+    options: ContextMenuOptions;
+    type: "menu-action";
+};
+export type PopupCloseReason = ClickAwayClosePopup | EscapeClosePopup | MenuActionClosePopup;
+export declare const reasonIsMenuAction: (reason?: PopupCloseReason) => reason is MenuActionClosePopup;
+export declare const reasonIsClickAway: (reason?: PopupCloseReason) => reason is ClickAwayClosePopup;
+export interface ShowPopupProps {
+    depth?: number;
+    /**
+     * if true, focus will be invoked on first focusable element
+     */
+    focus?: boolean;
+    name?: string;
+    group?: string;
+    position?: "above" | "below" | "";
+    left?: number;
+    right?: "auto" | number;
+    top?: number;
+    component: ReactElement;
+    width?: number | "auto";
+}
+export declare class PopupService {
+    static onClose: PopupCloseCallback | undefined;
+    static showPopup({ group, name, left, position, right, top, width, component, }: ShowPopupProps): void;
+    static escapeKeyListener(evt: KeyboardEvent): void;
+    static hidePopup(reason?: PopupCloseReason, name?: string, group?: string): void;
+    static keepWithinThePage(el: HTMLElement, right?: number | "auto"): void;
+}
+export declare class DialogService {
+    static showDialog(dialog: ReactElement): void;
+    static closeDialog(): void;
+}
+export interface PopupProps {
+    children: ReactElement;
+    close?: boolean;
+    depth: number;
+    group?: string;
+    name: string;
+    position?: "above" | "below" | "";
+    width: number;
+}
+export declare const Popup: (props: PopupProps) => React.DetailedReactHTMLElement<{
+    className: string;
+    ref: React.RefObject<HTMLElement>;
+}, HTMLElement>;

package/types/vuu-popups/src/popup/useAnchoredPosition.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import { RefObject } from "react";
+import { PopupPlacement } from "./Popup";
+export interface AnchoredPositionHookProps {
+    anchorElement: RefObject<HTMLElement>;
+    offsetLeft?: number;
+    offsetTop?: number;
+    placement: PopupPlacement;
+}
+export declare const useAnchoredPosition: ({ anchorElement, offsetLeft, offsetTop, placement, }: AnchoredPositionHookProps) => {
+    left: number;
+    top: number;
+} | undefined;

package/types/vuu-popups/src/popup-menu/PopupMenu.d.ts ADDED Viewed

@@ -0,0 +1,16 @@
+import { HTMLAttributes } from "react";
+import { PopupCloseReason } from "@vuu-ui/vuu-popups";
+import "./PopupMenu.css";
+import { MenuActionHandler, MenuBuilder } from "@vuu-ui/vuu-data-types";
+export interface PopupMenuProps extends HTMLAttributes<HTMLButtonElement> {
+    icon?: string;
+    label?: string;
+    menuActionHandler?: MenuActionHandler;
+    menuBuilder?: MenuBuilder;
+    menuLocation?: string;
+    menuOptions?: {
+        [key: string]: unknown;
+    };
+    onMenuClose?: (reason?: PopupCloseReason) => void;
+}
+export declare const PopupMenu: ({ className, label, icon, id: idProp, menuActionHandler, menuBuilder, menuLocation, menuOptions, onMenuClose, tabIndex, ...htmlAttributes }: PopupMenuProps) => JSX.Element;

package/types/vuu-popups/src/popup-menu/index.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export * from "./PopupMenu";

package/types/vuu-popups/src/portal/Portal.d.ts ADDED Viewed

@@ -0,0 +1,30 @@
+import { ReactNode } from "react";
+import "./Portal.css";
+export interface PortalProps {
+    /**
+     * The children to render into the `container`.
+     */
+    children?: ReactNode;
+    /**
+     * An HTML element, component instance, or function that returns either.
+     * The `container` will have the portal children appended to it.
+     *
+     * By default, it uses the body of the top-level document object,
+     * so it's simply `document.body` most of the time.
+     */
+    container?: Element | (() => Element | null) | null;
+    /**
+     * If this node does not exist on the document, it will be created for you.
+     */
+    id?: string;
+    /**
+     * Allow conditional rendering of this Portal, if false, will render nothing.
+     * Defaults to true
+     */
+    open?: boolean;
+}
+/**
+ * Portals provide a first-class way to render children into a DOM node
+ * that exists outside the DOM hierarchy of the parent component.
+ */
+export declare const Portal: ({ children, container: containerProp, id, open, }: PortalProps) => import("react").ReactPortal | null;

package/types/vuu-popups/src/portal/index.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export * from "./Portal";

package/types/vuu-popups/src/portal-deprecated/PortalDeprecated.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import { ReactElement } from "react";
+export interface PortalDeprecatedProps {
+    children: ReactElement;
+    onRender?: () => void;
+    x?: number;
+    y?: number;
+}
+export declare const PortalDeprecated: ({ children, x, y, onRender, }: PortalDeprecatedProps) => null;

package/types/vuu-popups/src/portal-deprecated/index.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+export * from "./PortalDeprecated";
+export * from "./render-portal";
+export * from "./portal-utils";

package/types/vuu-popups/src/portal-deprecated/portal-utils.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const installTheme: (themeId: string) => void;

package/types/vuu-popups/src/portal-deprecated/render-portal.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+import { ReactElement } from "react";
+export interface HTMLContainerProps {
+    className?: string;
+    dataMode?: string;
+    x?: number;
+    y?: number;
+    win?: typeof globalThis;
+}
+export declare const createContainer: (props: HTMLContainerProps) => HTMLDivElement;
+export declare const renderPortal: (component: ReactElement, container: HTMLElement, x: number, y: number, onRender?: () => void) => void;

package/types/vuu-popups/src/prompt/Prompt.d.ts ADDED Viewed

@@ -0,0 +1,14 @@
+import { HTMLAttributes } from "react";
+import { PopupComponentProps } from "../popup";
+import "./Prompt.css";
+export interface PromptProps extends HTMLAttributes<HTMLDialogElement> {
+    PopupProps?: Partial<PopupComponentProps>;
+    cancelButtonLabel?: string;
+    confirmButtonLabel?: string;
+    onCancel: () => void;
+    onConfirm: () => void;
+    icon?: string;
+    text: string;
+    variant?: "warn" | "error" | "info";
+}
+export declare const Prompt: ({ PopupProps, cancelButtonLabel, confirmButtonLabel, icon, onCancel, onConfirm, style, text, title, variant, ...htmlAttributes }: PromptProps) => JSX.Element;

package/types/vuu-popups/src/prompt/index.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export * from "./Prompt";

package/types/vuu-popups/src/tooltip/Tooltip.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import { MouseEventHandler, ReactNode, RefObject } from "react";
+import { TooltipPlacement } from "./useAnchoredPosition";
+import "./Tooltip.css";
+export interface TooltipProps {
+    anchorElement: RefObject<HTMLElement>;
+    children: ReactNode;
+    id?: string;
+    onMouseEnter: MouseEventHandler;
+    onMouseLeave: MouseEventHandler;
+    placement: TooltipPlacement;
+}
+export declare const Tooltip: ({ anchorElement, children, id, onMouseEnter, onMouseLeave, placement, }: TooltipProps) => JSX.Element | null;