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

package/index.css

@@ -1,101 +1,64 @@
-/* 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(--vuuDraggable-display, inline-block);
-  height: var(--vuuDraggable-spacer-height, var(--tabstrip-height));
-  transition: var(--vuuDraggable-transitionProp, width) 0.3s ease;
-  width: var(--vuuDraggable-spacer-width, 0);
-}
-.vuuDraggable-dropIndicatorPosition {
-  display: var(--saltDraggable-display, inline-block);
-  height: 0px;
-  width: 100%;
-}
-.vuuDraggable-dropIndicatorContainer {
-  transition: var(--vuuDraggable-transitionProp, top) 0.2s ease;
+/* src/dropdown/Dropdown.css */
+.vuuDropdown {
+  --saltIcon-margin: 2px 0 0 8px;
+  --saltButton-borderStyle: solid;
+  --saltButton-borderColor: var(--salt-editable-borderColor);
+  --saltButton-borderWidth: 1px;
+  --saltButton-borderRadius: 6px;
+  --saltButton-height: var(--vuuDropdown-height, auto);
+  display: inline-block;
+  line-height: 0;
+  position: relative;
+  width: var(--vuuDropdown-width, auto);
 }
-.vuuDraggable-dropIndicator {
-  background-color: var(--salt-palette-accent-background);
-  height: 2px;
+.vuuDropdown-fullWidth {
   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;
+.vuuDropdown-popup {
+  background: var(--salt-container-primary-background);
+  z-index: calc(var(--salt-zIndex-flyover) - 1);
 }
-.vuuDraggable-settling {
-  transition-property: left, top;
-  transition-duration: .15s;
-  transition-timing-function: ease-out;
+.vuuDropdown-popup-component {
+  --vuuList-borderStyle: none;
 }
-.vuuDraggable-spacer {
-  order: 1;
+.vuuDropdownButton {
+  width: 100%;
 }
 
-/* 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;
+/* src/dropdown/DropdownButton.css */
+.vuuDropdownButton {
+  --saltButton-background-hover: var(--salt-actionable-secondary-background);
+  --saltButton-background-active: var(--salt-actionable-secondary-background);
+  --saltButton-fontWeight: var(--salt-text-fontWeight-strong);
+  --saltButton-textAlign: left;
+  --saltButton-textTransform: none;
+  --saltButton-width: 100%;
+  --vuu-icon-size: 16px;
+}
+.vuuDropdownButton:active {
+  --saltIcon-color: var(--salt-actionable-secondary-foreground);
+  --saltButton-text-color-active: var(--salt-actionable-secondary-foreground);
+}
+.vuuDropdownButton-fullwidth {
+  width: 100%;
 }
-.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;
+.vuuDropdownButton-content {
+  align-items: center;
+  flex: 1;
+  width: 100%;
+  display: flex;
+  white-space: nowrap;
 }
-.vuuEditableLabel .saltInput-activationIndicator {
-  display: none;
+.vuuDropdownButton-buttonLabel {
+  display: inline-block;
+  letter-spacing: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
 }
-.vuuEditableLabel-input {
-  background-color: transparent;
-  border: none;
-  box-sizing: content-box;
-  display: block;
-  flex: 1;
-  font: inherit;
-  height: 20px;
-  margin: 0;
-  min-width: 0;
+.vuuDropdownButton-formField.saltButton:focus,
+.vuuDropdownButton-formField.saltButton:focus-visible {
   outline: none;
-  padding: 0;
 }
 
 /* src/list/Highlighter.css */
@@ -105,7 +68,7 @@
 
 /* src/list/CheckboxIcon.css */
 .vuuCheckboxIcon {
-  --vuu-icon-size: 14px;
+  --vuu-icon-size: 12px;
   --vuu-icon-left: -1px;
   --vuu-icon-top: -1px;
   --vuu-icon-svg: var(--vuu-svg-tick);
@@ -114,9 +77,9 @@
   border-radius: var(--vuuCheckboxIcon-borderRadius, 3px);
   border-width: 1px;
   display: inline-block;
-  height: var(--vuuCheckboxIcon-size, 14px);
+  height: var(--vuuCheckboxIcon-size, 12px);
   position: relative;
-  width: var(--vuuCheckboxIcon-size, 14px);
+  width: var(--vuuCheckboxIcon-size, 12px);
 }
 .vuuCheckboxIcon-checked {
   background-color: var(--vuuCheckboxIcon-background-checked, var(--salt-selectable-background-selected));
@@ -144,7 +107,7 @@
   --list-item-background-active: var(--salt-selectable-background-selected);
   --list-item-alignItems: center;
 }
-.vuuListItem.saltHighlighted {
+.vuuListItem.vuuHighlighted {
   --saltCheckbox-icon-stroke: var(--salt-selectable-borderColor-hover);
   --list-item-background: var(--salt-selectable-background-hover);
 }
@@ -165,7 +128,7 @@
   line-height: var(--salt-text-lineHeight);
   height: var(--vuuList-item-height, var(--list-item-height, auto));
   margin-bottom: var(--list-item-gap);
-  padding: 0 var(--salt-size-unit);
+  padding: 0 var(--vuuListItem-padding, var(--salt-size-unit));
   left: 0;
   right: 0;
   display: flex;
@@ -185,7 +148,7 @@
   --list-item-background: var(--list-item-background-active);
   color: var(--list-item-text-color-active);
 }
-.vuuListItem.saltDisabled {
+.vuuListItem.vuuDisabled {
   --list-item-text-color: var(--salt-text-primary-foreground-disabled);
   cursor: var(--salt-selectable-cursor-disabled);
 }
@@ -220,10 +183,57 @@
   display: none;
 }
 
+/* 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(--vuuDraggable-display, inline-block);
+  height: var(--vuuDraggable-spacer-height, var(--tabstrip-height));
+  transition: var(--vuuDraggable-transitionProp, width) 0.3s ease;
+  width: var(--vuuDraggable-spacer-width, 0);
+}
+.vuuDraggable-dropIndicatorPosition {
+  display: var(--saltDraggable-display, inline-block);
+  height: 0px;
+  width: 100%;
+}
+.vuuDraggable-dropIndicatorContainer {
+  transition: var(--vuuDraggable-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;
+}
+
 /* src/list/List.css */
 .vuuList {
   --list-background: var(--salt-container-primary-background);
-  --list-borderStyle: var(--vuuList-borderStyle,--salt-container-borderStyle);
+  --list-borderStyle: var(--vuuList-borderStyle,var(--salt-container-borderStyle));
   --list-borderWidth: var(--salt-size-border);
   --list-height: auto;
   --list-item-height: var(--salt-size-stackable);
@@ -233,6 +243,7 @@
   --vuuDraggable-spacer-height: 0;
   --vuuDraggable-spacer-width: 100%;
   --vuuDraggable-transitionProp: height;
+  --vuuMeasuredContainer-height: var(--computed-list-height);
   background: var(--list-background);
   border-color: var(--salt-container-primary-borderColor);
   border-style: var(--list-borderStyle);
@@ -240,18 +251,20 @@
   height: var(--saltList-height, var(--list-height));
   max-height: var(--list-maxHeight);
   outline: none;
-  overflow-y: auto;
   position: relative;
   user-select: none;
   width: var(--saltList-width, auto);
 }
+.vuuList-contentSized {
+  box-sizing: content-box;
+}
 .vuuList-borderless {
   --list-borderStyle: none;
 }
 .vuuList-viewport {
-  --list-item-height: 30px;
-  max-height: calc(var(--list-maxHeight) - 2 * var(--list-borderWidth));
+  height: var(--computed-list-height, var(--measured-px-height));
   overflow: auto;
+  width: var(--measured-px-width);
 }
 .vuuListItemHeader {
   --saltList-item-background: var(--list-item-header-background);
@@ -298,6 +311,304 @@
   inset: 2px;
 }
 
+/* src/list/RadioIcon.css */
+.vuuRadioIcon {
+  --vuu-icon-size: 12px;
+  --vuu-icon-left: -1px;
+  --vuu-icon-top: -1px;
+  --vuu-icon-svg: var(--vuu-svg-radio);
+  border-style: solid;
+  border-color: var(--vuuRadioIcon-borderColor, var(--salt-selectable-borderColor));
+  border-radius: 50%;
+  border-width: 1px;
+  display: inline-block;
+  height: var(--vuuRadioIcon-size, 12px);
+  position: relative;
+  width: var(--vuuRadioIcon-size, 12px);
+}
+.vuuRadioIcon-checked {
+  background-image: var(--vuu-svg-radio);
+  border: none;
+  background-repeat: no-repeat;
+}
+.vuuRadioIcon-checked:after {
+  content: "";
+  left: var(--vuu-icon-left, auto);
+  height: var(--vuu-icon-height, var(--vuu-icon-size, 12px));
+  -webkit-mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);
+  mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  position: absolute;
+  top: var(--vuu-icon-top, auto);
+  width: var(--vuu-icon-width, var(--vuu-icon-size, 12px));
+}
+
+/* src/list/ChevronIcon.css */
+.vuuChevronIcon {
+  --vuu-icon-size: 14px;
+  --vuu-icon-left: -1px;
+  --vuu-icon-top: -1px;
+  height: var(--vuuChevronIcon-size, 14px);
+  position: relative;
+  width: var(--vuuChevronIcon-size, 14px);
+  cursor: pointer;
+}
+.vuuChevronIcon:after {
+  content: "";
+  background-color: #777C94;
+  left: var(--vuu-icon-left, auto);
+  height: var(--vuu-icon-height, var(--vuu-icon-size, 12px));
+  -webkit-mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);
+  mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  position: absolute;
+  top: var(--vuu-icon-top, auto);
+  width: var(--vuu-icon-width, var(--vuu-icon-size, 12px));
+}
+.vuuChevronIcon.up {
+  --vuu-icon-svg: var(--vuu-svg-chevron-up);
+}
+.vuuChevronIcon.down {
+  --vuu-icon-svg: var(--vuu-svg-chevron-down);
+}
+.vuuChevronIcon.left {
+  --vuu-icon-svg: var(--vuu-svg-chevron-left);
+}
+.vuuChevronIcon.right {
+  --vuu-icon-svg: var(--vuu-svg-chevron-right);
+}
+
+/* src/editable-label/EditableLabel.css */
+.vuuEditableLabel {
+  --editableLabel-padding: var(--vuuEditableLabel-padding, 6px);
+  --editableLabel-height: var(--vuuEditableLabel-height, 26px);
+  --saltInput-background: transparent;
+  --saltInput-height: calc(var(--editableLabel-height) - 4px);
+  --saltInput-minWidth: 14px;
+  color: inherit;
+  cursor: default;
+  display: flex;
+  flex-direction: column;
+  font-size: var(--salt-text-fontSize);
+  height: var(--editableLabel-height);
+  justify-content: center;
+  max-width: 170px;
+  outline: none;
+  overflow: hidden;
+  padding: 0 var(--editableLabel-padding);
+  position: relative;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  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;
+  color: inherit;
+  display: block;
+  flex: 1;
+  font: inherit;
+  height: 20px;
+  margin: 0;
+  min-width: 0;
+  outline: none;
+  padding: 0;
+}
+.vuuEditableLabel-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* src/expando-input/ExpandoInput.css */
+.vuuExpandoInput {
+  --salt-editable-secondary-background: white;
+  --expandoInput-height: var(--vuuExpandoInput-height, 26px);
+  --expandoInput-padding: var(--vuuExpandoInput-padding, 6px);
+  --saltInput-height: calc(var(--vuuExpandoInput-height) - 4px);
+  --saltInput-minWidth: var(--vuuExpandoInput-minWidth, 8px);
+  border: var(--vuuExpandoInput-border, none);
+  border-radius: var(--vuuExpandoInput-borderRadius, 0);
+  color: inherit;
+  cursor: default;
+  display: inline-block;
+  font-size: var(--salt-text-fontSize);
+  height: var(--expandoInput-height);
+  min-width: calc(var(--saltInput-minWidth) + 2 * var(--expandoInput-padding));
+  outline: none;
+  padding: 0 var(--expandoInput-padding);
+  position: relative;
+}
+.vuuExpandoInput:before {
+  content: attr(data-text);
+  display: block;
+  height: 0px;
+  visibility: hidden;
+  white-space: pre-wrap;
+}
+.vuuExpandoInput .saltInput {
+  font-weight: var(--salt-text-fontWeight);
+  left: var(--expandoInput-padding, 0);
+  padding: 0;
+  outline-style: none;
+  position: absolute;
+  right: var(--expandoInput-padding, 0);
+  top: var(--vuuExpandoInput-top, 2px);
+  width: auto;
+}
+.vuuExpandoInput .saltInput-activationIndicator {
+  display: none;
+}
+.vuuExpandoInput-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;
+}
+
+/* src/inputs/Checkbox.css */
+.vuuCheckbox {
+  display: flex;
+  height: 24px;
+  align-items: center;
+  gap: 6px;
+  color: var(--light-text-primary, #15171B);
+  font-feature-settings:
+    "ss02" on,
+    "ss01" on,
+    "salt" on,
+    "liga" off;
+  font-size: 12px;
+  font-weight: 400;
+  cursor: pointer;
+}
+
+/* src/inputs/RadioButton.css */
+.vuuRadioButton {
+  display: flex;
+  height: 24px;
+  align-items: center;
+  gap: 6px;
+  color: var(--light-text-primary, #15171B);
+  font-feature-settings:
+    "ss02" on,
+    "ss01" on,
+    "salt" on,
+    "liga" off;
+  font-size: 12px;
+  font-weight: 400;
+  cursor: pointer;
+}
+.radio {
+  position: relative;
+  height: 12px;
+}
+input[type=radio] {
+  position: absolute;
+  appearance: none;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  margin: 0;
+  top: 0;
+}
+
+/* src/instrument-search/SearchCell.css */
+.vuuSearchCell {
+  --vuu-icon-left: 0;
+  --vuu-icon-size: 16px;
+  --vuu-icon-top: 0px;
+  align-items: center;
+  color: var(--background-cell-color);
+  display: flex;
+  gap: 4px;
+  padding: 0 8px 0 8px;
+  position: relative;
+  z-index: -1;
+}
+
+/* src/instrument-search/InstrumentSearch.css */
+.vuuInstrumentSearch {
+  height: 100%;
+  padding: var(--vuuInstrumentSearch-padding, 12px);
+  display: flex;
+  flex-direction: column;
+}
+.vuuInstrumentSearch-inputField {
+  --vuu-icon-size: 16px;
+  flex: 0 0 40px;
+}
+.vuuInstrumentSearch-list {
+  background-color: var(--salt-container-primary-background);
+  flex: 1 1 auto;
+}
+.vuuInstrumentSearch .vuuTableNextCell {
+  padding: 0;
+}
+
+/* src/price-ticker/PriceTicker.css */
+@property --price-ticker-color { syntax: "<color>"; initial-value: #15171B; inherits: false; }
+.vuuPriceTicker {
+  align-items: center;
+  display: flex;
+  font-size: var(--vuuPriceTicker-fontSize, var(--salt-text-fontSize));
+  font-weight: var(--vuuPriceTicker-fontWeight, 700);
+  transition-property: color;
+  transition-duration: .3s;
+}
+.vuuPriceTicker.up1 {
+  --vuu-icon-color: var(--vuu-color-green-50);
+  color: var(--vuu-color-green-50);
+  animation-duration: 30s;
+}
+.vuuPriceTicker.up2 {
+  --vuu-icon-color: var(--vuu-color-green-50);
+  color: var(--vuu-color-green-50);
+  animation-duration: 30s;
+}
+.vuuPriceTicker.down1 {
+  --vuu-icon-transform: rotate(180deg);
+  --vuu-icon-color: var(--vuu-color-red-50);
+  color: var(--vuu-color-red-50);
+  animation-duration: 30s;
+}
+.vuuPriceTicker.down2 {
+  --vuu-icon-transform: rotate(180deg);
+  --vuu-icon-color: var(--vuu-color-red-50);
+  color: var(--vuu-color-red-50);
+  animation-duration: 30s;
+}
+
 /* src/tabstrip/Tabstrip.css */
 .vuuTabstrip {
   --vuuOverflowContainer-background: transparent;
@@ -305,17 +616,18 @@
   --tabstrip-display: inline-flex;
   --tabstrip-background: transparent;
   align-self: var(--saltTabs-tabstrip-alignSelf, stretch);
+  display: flex;
   font-size: var(--salt-text-fontSize);
   font-weight: var(--vuuTabstrip-fontWeight, var(--salt-text-fontWeight));
+  min-width: 28px;
   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-height: var(--tabstrip-height);
   --tab-width: auto;
   --tab-thumb-height: 2px;
   --tab-thumb-left: var(--tab-thumb-offset, 0);
@@ -327,8 +639,9 @@
 .vuuTabstrip-vertical {
   --tabstrip-height: var(--vuuTabstrip-height, 100%);
   --tabstrip-width: var(--vuuTabstrip-width, 100px);
+  --tab-height: 50px;
   --tab-width: 100%;
-  --tab-thumb-height: var(--tab-thumb-size, 100%);
+  --tab-thumb-height: 0;
   --tab-thumb-left: 0;
   --tab-thumb-top: var(--tab-thumb-offset, 0);
   --tab-thumb-width: 2px;
@@ -342,7 +655,7 @@
   --saltButton-height: 20px;
   --saltButton-width: 20px;
 }
-.vuuTabstrip-overflowMenu.saltDropdown {
+.vuuTabstrip-overflowMenu.vuuDropdown {
   --saltIcon-margin: 2px 0 0 0px;
 }
 .vuuTabstrip-overflowMenu-open {
@@ -411,9 +724,9 @@
 /* src/tabstrip/Tab.css */
 .vuuTab {
   --saltEditableLabel-padding: 0;
-  --saltEditableLabel-height: var(--tabstrip-height);
+  --saltEditableLabel-height: calc(var(--tabstrip-height) - 2px);
   --saltInputLegacy-minWidth: 4em;
-  --saltEditableLabel-top: 3px;
+  --saltEditableLabel-top: 2px;
   --tab-background: var(--vuuTab-background, var(--salt-navigable-primary-background));
   --tab-cursor: pointer;
   --tab-position: relative;
@@ -428,7 +741,7 @@
   cursor: var(--vuuTab-cursor, var(--tab-cursor));
   display: var(--tabstrip-display);
   gap: 8px;
-  height: var(--vuuTab-height, var(--tabstrip-height));
+  height: var(--vuuTabHeight, var(--tab-height));
   letter-spacing: var(--vuuTab-letterSpacing, var(--tab-letterSpacing, 0));
   min-width: var(--vuuTab-minWidth, 40px);
   outline: none;
@@ -454,7 +767,8 @@
   font-family: inherit;
   font-size: inherit;
   font-weight: inherit;
-  height: var(--vuuTabstrip-height, var(--salt-size-stackable));
+  height: calc(var(--tab-height) - var(--tab-thumb-height));
+  margin-bottom: var(--tab-thumb-height);
   outline: none;
   position: relative;
 }