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

package/index.css

@@ -590,10 +590,10 @@ path.drop-target.centre {
   z-index: 2000;
 }
 .vuuDraggable-spacer {
-  display: var(--saltDraggable-display, inline-block);
-  height: var(--saltDraggable-spacer-height, var(--tabstrip-height));
-  transition: var(--saltDraggable-transitionProp, width) 0.3s ease;
-  width: var(--saltDraggable-spacer-width, 0);
+  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);
@@ -601,7 +601,7 @@ path.drop-target.centre {
   width: 100%;
 }
 .vuuDraggable-dropIndicatorContainer {
-  transition: var(--saltDraggable-transitionProp, top) 0.2s ease;
+  transition: var(--vuuDraggable-transitionProp, top) 0.2s ease;
 }
 .vuuDraggable-dropIndicator {
   background-color: var(--salt-palette-accent-background);
@@ -680,6 +680,206 @@ path.drop-target.centre {
   padding: 0;
 }
 
+/* ../vuu-ui-controls/src/list/Highlighter.css */
+.saltHighlighter-highlight {
+  font-weight: var(--salt-text-fontWeight-strong);
+}
+
+/* ../vuu-ui-controls/src/list/CheckboxIcon.css */
+.vuuCheckboxIcon {
+  --vuu-icon-size: 14px;
+  --vuu-icon-left: -1px;
+  --vuu-icon-top: -1px;
+  --vuu-icon-svg: var(--vuu-svg-tick);
+  border-style: solid;
+  border-color: var(--vuuCheckboxIcon-borderColor, var(--salt-selectable-borderColor));
+  border-radius: var(--vuuCheckboxIcon-borderRadius, 3px);
+  border-width: 1px;
+  display: inline-block;
+  height: var(--vuuCheckboxIcon-size, 14px);
+  position: relative;
+  width: var(--vuuCheckboxIcon-size, 14px);
+}
+.vuuCheckboxIcon-checked {
+  background-color: var(--vuuCheckboxIcon-background-checked, var(--salt-selectable-background-selected));
+  border-color: var(--vuuCheckboxIcon-borderColor-checked, var(--salt-selectable-borderColor-selected));
+}
+.vuuCheckboxIcon-checked:after {
+  content: "";
+  background-color: white;
+  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));
+}
+
+/* ../vuu-ui-controls/src/list/ListItem.css */
+.vuuListItem {
+  --list-item-text-color: var(--salt-text-primary-foreground);
+  --list-item-background: var(--vuuList-item-background, var(--salt-selectable-background));
+  --list-item-text-color-active: var(--salt-text-primary-foreground);
+  --list-item-background-active: var(--salt-selectable-background-selected);
+  --list-item-alignItems: center;
+}
+.vuuListItem.saltHighlighted {
+  --saltCheckbox-icon-stroke: var(--salt-selectable-borderColor-hover);
+  --list-item-background: var(--salt-selectable-background-hover);
+}
+.vuuListItemHeader {
+  font-weight: var(--salt-text-fontWeight-strong);
+}
+.vuuListItemHeader[data-sticky] {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+.vuuListItem {
+  color: var(--list-item-text-color);
+  cursor: var(--vuuList-item-cursor, pointer);
+  background: var(--vuuList-item-background, var(--list-item-background));
+  font-size: var(--salt-text-fontSize);
+  text-align: var(--salt-text-textAlign);
+  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);
+  left: 0;
+  right: 0;
+  display: flex;
+  position: relative;
+  align-items: var(--list-item-alignItems);
+  white-space: nowrap;
+}
+.vuuListItem:last-child {
+  margin-bottom: 0px;
+}
+.vuuListItem-checkbox {
+  --list-item-background-active: var(--salt-selectable-background);
+  --list-item-text-color-active: var(--salt-text-primary-foreground);
+  --list-item-text-padding: 0 0 0 var(--salt-size-unit);
+}
+.vuuListItem[aria-selected=true]:not(.vuuListItem-checkbox) {
+  --list-item-background: var(--list-item-background-active);
+  color: var(--list-item-text-color-active);
+}
+.vuuListItem.saltDisabled {
+  --list-item-text-color: var(--salt-text-primary-foreground-disabled);
+  cursor: var(--salt-selectable-cursor-disabled);
+}
+.vuuListItem.vuuFocusVisible {
+  outline-style: var(--salt-focused-outlineStyle);
+  outline-width: var(--salt-focused-outlineWidth);
+  outline-offset: -2px;
+  outline-color: var(--salt-focused-outlineColor);
+}
+.vuuListItem.vuuFocusVisible:after {
+  content: none;
+}
+.vuuListItem[aria-selected=true]:not(.vuuListItem-checkbox).vuuFocusVisible {
+  outline-color: var(--list-item-selected-focus-outlineColor);
+}
+.vuuListItem-textWrapper {
+  flex: 1;
+  overflow: hidden;
+  padding: var(--list-item-text-padding, 0px);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.vuuListItem-proxy {
+  position: absolute !important;
+  visibility: hidden;
+}
+.vuuDraggable-list-item {
+  --vuuList-item-height: 24px;
+  background-color: white;
+}
+.vuuListItem.vuuDraggable-dragAway {
+  display: none;
+}
+
+/* ../vuu-ui-controls/src/list/List.css */
+.vuuList {
+  --list-background: var(--salt-container-primary-background);
+  --list-borderStyle: var(--vuuList-borderStyle,--salt-container-borderStyle);
+  --list-borderWidth: var(--salt-size-border);
+  --list-height: auto;
+  --list-item-height: var(--salt-size-stackable);
+  --list-item-gap: 0px;
+  --list-maxHeight: 100%;
+  --vuuDraggable-display: block;
+  --vuuDraggable-spacer-height: 0;
+  --vuuDraggable-spacer-width: 100%;
+  --vuuDraggable-transitionProp: height;
+  background: var(--list-background);
+  border-color: var(--salt-container-primary-borderColor);
+  border-style: var(--list-borderStyle);
+  border-width: var(--list-borderWidth);
+  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-borderless {
+  --list-borderStyle: none;
+}
+.vuuList-viewport {
+  --list-item-height: 30px;
+  max-height: calc(var(--list-maxHeight) - 2 * var(--list-borderWidth));
+  overflow: auto;
+}
+.vuuListItemHeader {
+  --saltList-item-background: var(--list-item-header-background);
+  color: var(--list-item-header-color);
+}
+.vuuListItemHeader[data-sticky=true] {
+  --saltList-item-background: var(--list-background);
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+.vuuList-collapsible .vuuListItemHeader:after {
+  border-width: var(--checkbox-borderWidth);
+  border-color: var(--checkbox-borderColor);
+  content: var(--list-item-header-twisty-content);
+  -webkit-mask: var(--list-svg-chevron-down) center center/12px 12px no-repeat;
+  mask: var(--list-svg-chevron-down) center center/12px 12px no-repeat;
+  background: var(--list-item-header-twisty-color);
+  height: 12px;
+  left: var(--list-item-header-twisty-left);
+  right: var(--list-item-header-twisty-right);
+  margin-top: -8px;
+  position: absolute;
+  top: var(--list-item-header-twisty-top);
+  transition: transform 0.3s;
+  width: 12px;
+}
+.vuuListItemHeader[aria-expanded=false]:after {
+  transform: rotate(-90deg);
+}
+.vuuList-scrollingContentContainer {
+  box-sizing: inherit;
+  position: relative;
+}
+.vuuList-virtualized .vuuListItem {
+  line-height: 30px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  will-change: transform;
+}
+.vuuList.saltFocusVisible:after {
+  inset: 2px;
+}
+
 /* ../vuu-ui-controls/src/tabstrip/Tabstrip.css */
 .vuuTabstrip {
   --vuuOverflowContainer-background: transparent;
@@ -768,6 +968,7 @@ path.drop-target.centre {
 }
 .vuuDraggable-tabstrip-horizontal {
   --tab-thumb-height: 2px;
+  --tab-thumb-left: 0px;
   --tabstrip-height: 28px;
   line-height: var(--tabstrip-height);
 }
@@ -1712,6 +1913,8 @@ vuuUserPanel-history {
 .vuuContextPanel-inner {
   background-color: var(--salt-container-primary-background);
   box-shadow: var(--vuu-side-panel-shadow, none);
+  display: flex;
+  flex-direction: column;
   height: 100%;
   padding-bottom: 24px;
   padding-top: 24px;
@@ -1732,7 +1935,7 @@ vuuUserPanel-history {
   align-items: center;
   display: flex;
   flex-wrap: nowrap;
-  height: 27px;
+  flex: 0 0 27px;
   justify-content: space-between;
 }
 .vuuContextPanel-title {
@@ -1740,6 +1943,10 @@ vuuUserPanel-history {
   font-weight: 700;
   white-space: nowrap;
 }
+.vuuContextPanel-content {
+  flex: 1 1 auto;
+  width: 100%;
+}
 
 /* ../vuu-shell/src/shell.css */
 .vuuShell {