@vuu-ui/vuu-ui-controls 0.8.44 → 0.8.45

package/esm/list/ChevronIcon.css

@@ -1,39 +0,0 @@
-.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);
-}

package/esm/list/Highlighter.css

@@ -1,3 +0,0 @@
-.saltHighlighter-highlight {
-  font-weight: var(--salt-text-fontWeight-strong); /* TODO: Check with design */
-}

package/esm/list/List.css

@@ -1,93 +0,0 @@
-.vuuList {
-  --list-background: var(--salt-container-primary-background);
-  --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);
-  --list-item-gap: 0px;
-  --list-maxHeight: 100%;
-  --vuuDraggable-display: block;
-  --vuuDraggable-spacer-height: 0;
-  --vuuDraggable-spacer-width: 100%;
-  --vuuDraggable-transitionProp: height;
-  --vuuMeasuredContainer-height: var(--computed-list-height);
-
-  background: var(--list-background);
-  height: var(--saltList-height, var(--list-height));
-  max-height: var(--list-maxHeight);
-  outline: none;
-  position: relative;
-  user-select: none;
-  width: var(--saltList-width, auto);
-  padding: 0 1px;
-}
-
-.vuuDraggable-list-item {
-  --vuuList-item-background: var(--salt-selectable-background-hover);
-}
-
-.vuuList-contentSized {
-  box-sizing: content-box;
-}
-
-.vuuList-borderless {
-  --list-borderStyle: none;
-}
-
-/* virtualised list */
-.vuuList-viewport {
-  height: var(--computed-list-height, var(--measured-px-height));
-  overflow: auto;
-}
-
-.vuuListHeader {
-  --saltList-item-background: var(--list-item-header-background);
-  color: var(--list-item-header-color);
-  font-weight: 600;
-}
-
-.vuuListHeader[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);
-}
-
-/* Selection */
-
-.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;
-}

package/esm/list/ListItem.css

@@ -1,99 +0,0 @@
-.vuuListItem {
-  /* Color */
-  --list-item-text-color: var(--salt-content-primary-foreground);
-  --list-item-background: var(--vuuList-item-background, var(--salt-selectable-background));
-  /* --list-item-selected-focus-outlineColor: var(--salt-color-white);  TODO: Check token with design */
-  --list-item-text-color-active: var(--salt-selectable-foreground-selected);
-  --list-item-background-active: var(--salt-selectable-background-selected);
-  --list-item-alignItems: center;
-}
-
-.vuuListItem.vuuHighlighted {
-  --saltCheckbox-icon-stroke: var(--salt-selectable-borderColor-hover);
-  --list-item-background: var(--salt-selectable-background-hover);
-}
-
-.vuuListItemHeader {
-  font-weight: var(--salt-text-fontWeight-strong); /*  TODO: Check token with design */
-}
-
-.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));
-  /* Replaced border-bottom with margin. In design spec, the height of the items should not include gap */
-  margin-bottom: var(--list-item-gap);
-  padding: 0 var(--vuuListItem-padding, 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-content-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.vuuDisabled {
-  --list-item-text-color: var(--salt-content-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;
-}

package/esm/list/RadioIcon.css

@@ -1,33 +0,0 @@
-.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));
-}

package/esm/overflow-container/OverflowContainer.css

@@ -1,141 +0,0 @@
-
-.vuuOverflowContainer {
-    --overflow-borderColor: var(--vuuOverflowContainer-borderColor, none);
-    --overflow-borderStyle: var(--vuuOverflowContainer-borderStyle, none);
-    --overflow-borderWidth: var(--vuuOverflowContainer-borderWidth, 0px);
-
-    --overflow-border-topWidth: var(--vuuOverflowContainer-borderTopWidth, var(--overflow-borderWidth));
-    --overflow-border-rightWidth: var(--vuuOverflowContainer-borderRightWidth, var(--overflow-borderWidth));
-    --overflow-border-bottomWidth: var(--vuuOverflowContainer-borderBottomWidth, var(--overflow-borderWidth));
-    --overflow-border-leftWidth: var(--vuuOverflowContainer-borderLeftWidth, var(--overflow-borderWidth));
-    
-    --border: calc(var(--overflow-border-topWidth) + var(--overflow-border-bottomWidth));
-
-    --overflow-item-gap : var(--vuuOverflowContainer-gap,2px);
-    --overflow-direction: row; 
-    --overflow-height: var(--overflow-item-height);
-
-    background-color: var(--vuuOverflowContainer-background);
-    border-color: var(--overflow-borderColor);
-    border-style: var(--overflow-borderStyle);
-    border-top-width: var(--overflow-border-topWidth);
-    border-right-width: var(--overflow-border-rightWidth);
-    border-bottom-width:  var(--overflow-border-bottomWidth);
-    border-left-width: var(--overflow-border-leftWidth);
-    height: var(--vuuOverflowContainer-height,var(--overflow-container-height));
-    width: var(--overflow-container-width);
-}
-
-.vuuOverflowContainer.vuuOrientation-horizontal {
-    --item-align: center;
-    --item-margin: 0 var(--overflow-item-gap) 0 var(--overflow-item-gap);
-    --overflow-container-height: calc(var(--salt-size-base) + var(--salt-spacing-100));
-    --overflow-container-width: var(--vuuOverflowContainer-width, auto);
-    --overflow-wrapper-height: var(--overflow-item-height);
-    --overflow-item-height: var(--vuuOverflowContainer-contentHeight, calc(var(--overflow-container-height) - var(--total-border-size)));
-    --overflow-item-width: auto;
-    --overflow-width: 0px;
-    --total-border-size: calc(var(--overflow-border-topWidth) + var(--overflow-border-bottomWidth));
-
-    min-width: var(--vuuOverflowContainer-minWidth, var(--overflow-container-height));
-
-    .vuuOverflowContainer-wrapContainer-overflowed {
-        --overflow-left: auto;
-        --overflow-position: relative;
-        --overflow-width: auto;
-    }
-    
-}
-.vuuOverflowContainer.vuuOrientation-vertical {
-    --item-align: stretch;
-    --overflow-container-height: 100%;
-    --overflow-container-width: var(--vuuOverflowContainer-width,calc(var(--salt-size-base) + var(--salt-spacing-100)));
-    --overflow-item-height: auto;
-    --overflow-item-width: calc(var(--overflow-container-width) - var(--total-border-size));
-    --overflow-wrapper-height: 100%;
-    --total-border-size: calc(var(--overflow-border-leftWidth) + var(--overflow-border-rightWidth));
-
-    --item-margin: var(--overflow-item-gap) 0 var(--overflow-item-gap) 0;
-    --overflow-direction: column; 
-    --overflow-height: 0px;
-    --overflow-left: 0;
-    --overflow-top: 100%;
-    --overflow-width: auto;
-
-    .vuuOverflowContainer-wrapContainer-overflowed {
-        --overflow-top: auto;
-        --overflow-position: relative;
-        --overflow-height: auto;
-    }
-
-}
-
-.vuuOverflowContainer-wrapContainer {
-    align-items: var(--item-align);
-    display: flex;
-    flex-direction: var(--overflow-direction);
-    flex-wrap: wrap;
-    height: var(--overflow-wrapper-height); 
-    justify-content: var(--vuuOverflowContainer-justifyContent, flex-start);
-    overflow: hidden;
-    position: relative;
-    width: 100%;
-
-}
-
-.vuuOverflowContainer-wrapContainer-overflowed {
-    --overflow-order: 2;
-    --overflow-left: auto;
-    --overflow-position: relative;
-    --overflow-width: auto;
-}
-
-.vuuOverflowContainer.vuuOrientation-vertical.vuuOverflowContainer-wrapContainer-overflowed {
-    --overflow-height: auto;
-}
-
-.vuuOverflowContainer-item {
-    align-items: inherit;
-    display: flex;
-    order: 1;
-    position: relative;
-    height: var(--overflow-item-height);
-    margin: var(--item-margin);
-    width: var(--overflow-item-width);
-}
-
-.vuuOverflowContainer-item[data-align="right"] {
-    margin-left: auto;
-}
-
-.vuuOverflowContainer-item.wrapped {
-    --overflow-item-bg: #ccc;
-    order: 3;
-    visibility: hidden;
-}
-
-.vuuOverflowContainer-item.vuuDraggable-dragAway,
-.vuuOverflowContainer-item:has(.vuuDraggable-dragAway){
-    display: none;
-}
-
-.vuuOverflowContainer-item.vuuDropTarget-settling {
-    visibility: hidden;
-}
-
-.vuuOverflowContainer-OverflowIndicator {
-    align-items: center;
-    background-color: transparent;
-    display: flex;
-    height: var(--overflow-height);
-    order: var(--overflow-order, 99);
-    overflow: hidden;
-    width: var(--overflow-width);
-}
-
-.vuuDraggable-vuuOverflowContainer {
-    align-items: center;
-    display: flex;
-    height: 44px;
-}
-

package/esm/price-ticker/PriceTicker.css

@@ -1,41 +0,0 @@
-@property --price-ticker-color {
-    syntax: '<color>'; /* <- defined as type number for the transition to work */
-    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;
-  }
-  

package/esm/split-button/SplitButton.css

@@ -1,114 +0,0 @@
-.vuuSplitButton {
-    --saltButton-background: var(--split-background);
-    --saltButton-background-hover: var(--split-background);
-    --vuuPopupMenu-background: var(--split-background);
-    --vuuPopupMenu-iconSize: 20px;
-
-    /** less verbose local refs */
-    --background: var(--vuuSplitButton-background);
-    --foreground: var(--vuuSplitButton-foreground);
-    --background-hover: var(--vuuSplitButton-background-hover);
-    --foreground-hover: var(--vuuSplitButton-foreground-hover);
-
-    --border-radius: var(--vuuSplitButton-borderRadius, 0px);
-    --main-border-radius: var(--border-radius) 0 0 var(--border-radius);
-    --trigger-border-radius: 0 var(--border-radius) var(--border-radius) 0;
-    --trigger-border-style: solid solid solid none;
-
-    align-items: center;
-    border: none;
-    border-radius: var(--border-radius);
-    display: flex;
-}
-
-.vuuSplitButton.vuuFocusVisible {
-    .saltButton {
-        outline-style: none;
-    }
-    &.vuuSplitButton-primary {
-        --split-background:  var(--background-hover,var(--salt-actionable-primary-background-hover));
-    }
-    &.vuuSplitButton-secondary {
-        --split-background:  var(--background-hover,var(--salt-actionable-secondary-background-hover));
-    }
-    &.vuuSplitButton-cta {
-        --split-background:  var(--background-hover,var(--salt-actionable-cta-background-hover));
-        .vuuSplitButton-trigger {
-            --vuu-icon-color:  var(--salt-actionable-cta-foreground-hover);
-        }
-    }    
-}
-
-/** TODO move into theme */
-.vuuFocusVisible {
-    outline-style: var(--salt-focused-outlineStyle);
-    outline-width: var(--salt-focused-outlineWidth);
-    outline-color: var(--salt-focused-outlineColor);
-    outline-offset: var(--salt-focused-outlineOffset);
-}
-
-  
-.vuuSplitButton-primary {
-    --split-background:  var(--background, var(--salt-actionable-primary-background));
-    --split-background-active:  var(--salt-actionable-primary-background-active);
-    --split-color-active:  var(--salt-actionable-primary-foreground-active);
-}
-
-.vuuSplitButton-primary:hover:not(.vuuSplitButton-disabled) {
-    --vuuButton-borderColor: var(--split-background);
-    --saltButton-borderColor: var(--split-background);
-    --split-background:  var(--background-hover, var(--salt-actionable-primary-background-hover));
-    .saltButton {
-        --saltButton-text-color: var(--salt-actionable-primary-foreground-hover);
-    }
-}
-
-.vuuSplitButton-secondary {
-    --saltButton-borderColor: var(--split-background);
-    --split-background:  var(--background,var(--salt-actionable-secondary-background));
-    --split-background-active:  var(--salt-actionable-secondary-background-active);
-    --split-color-active:  var(--salt-actionable-secondary-foreground-active);
-}
-
-.vuuSplitButton-secondary:hover:not(.vuuSplitButton-disabled) {
-    --vuuButton-borderColor: var(--split-background);
-    --split-background:  var(--salt-actionable-secondary-background-hover);
-    .saltButton {
-        --saltButton-text-color: var(--salt-actionable-secondary-foreground-hover);
-    }
-}
-
-.vuuSplitButton-cta {
-    --split-background:  var(--background,var(--salt-actionable-cta-background));
-    --split-background-active:  var(--salt-actionable-cta-background-active);
-    --split-color-active:  var(--salt-actionable-cta-foreground-active);
-
-}
-.vuuSplitButton-cta:hover:not(.vuuSplitButton-disabled) {
-    --vuuButton-borderColor: var(--split-background);
-    --split-background:  var(--salt-actionable-cta-background-hover);
-    --split-color: var(--salt-actionable-cta-foreground-hover);
-    .saltButton {
-        --saltButton-text-color: var(--salt-actionable-cta-foreground-hover);
-        --vuu-icon-color: var(--salt-actionable-cta-foreground-hover);
-    }
-}
-
-.vuuSplitButton:has(.vuuSplitButton-main:active, .vuuSplitButton-main.saltButton-active){
-    --split-background: var(--split-background-active);
-    .vuuSplitButton-trigger {
-        --vuu-icon-color: var(--split-color-active);
-    }
-}
-
-.vuuSplitButton-main {
-    border-style: solid none solid solid;
-    border-radius: var(--main-border-radius);
-    padding: 0 4px 0 16px;
-}
-
-.vuuSplitButton-trigger {
-    border-style: var(--trigger-border-style);
-    border-radius: var(--trigger-border-radius);
-}
-

package/esm/split-button/SplitStateButton.css

@@ -1,57 +0,0 @@
-.vuuSplitStateButton {
-    --split-state-background: var(--salt-actionable-secondary-background);
-    --split-state-foreground: var(--salt-actionable-secondary-foreground);
-    --vuuSplitButton-background: var(--split-state-background);
-    --vuuSplitButton-foreground: var(--split-state-foreground);
-    --vuuSplitButton-background-hover: var(--split-state-background);
-    --vuuSplitButton-foreground-hover: var(--split-state-foreground);
- 
-    .saltButton-primary:active, .saltButton-primary.saltButton-active {
-        --saltButton-background-active: var(--salt-actionable-primary-background);
-        --saltButton-text-color-active: var(--salt-actionable-primary-foreground);
-    }
-}
-
-.vuuSplitStateButton[aria-checked="true"]{
-    --vuuButtonIcon-color: var(--salt-actionable-primary-foreground-active);
-    --saltButton-text-color: var(--salt-actionable-primary-foreground-active);
-    --saltButton-text-color-hover: var(--salt-actionable-primary-foreground-active);
-    --split-state-background: var(--salt-actionable-primary-background-active);
-    --split-state-foreground: var(--salt-actionable-primary-foreground-active);
-    &.focusVisible {
-        --split-state-background: var(--salt-actionable-primary-background-active);
-    }
-}
-
-.vuuSplitStateButton[aria-checked="true"]{
-    .vuuEditableLabel-input {
-        color: var(--salt-actionable-primary-foreground-active);
-    }
-}
-
-.vuuSplitStateButton:has(.vuuSplitButton-main:active, .vuuSplitButton-main.saltButton-active){
-    --split-background: var(--salt-actionable-primary-background);
-    .vuuSplitButton-trigger {
-        --vuu-icon-color: var(--salt-actionable-primary-foreground);
-    }
-}
-
-/** These two entries are to prevent the 'active' styling when space is pressed whilst editing a label */
-.vuuSplitStateButton:has(.vuuEditableLabel-editing):has(.vuuSplitButton-main:active, .vuuSplitButton-main.saltButton-active){
-    --split-background: var(--salt-actionable-secondary-background);
-    .saltButton-primary:active {
-        background: var(--salt-actionable-secondary-background);
-    }    
-}
-.vuuSplitStateButton[aria-checked="true"]:has(.vuuEditableLabel-editing):has(.vuuSplitButton-main:active, .vuuSplitButton-main.saltButton-active){
-    --split-background: var(--salt-actionable-primary-background-active);
-    .saltButton-primary:active {
-        background: var(--salt-actionable-primary-background-active);
-    }    
-}
-
-.vuuSplitStateButton:hover:not(.vuuSplitStateButton-disabled) {
-    .saltButton {
-        border-color: var(--salt-actionable-primary-foreground);
-    }
-}

package/esm/tabstrip/TabMenu.css

@@ -1,3 +0,0 @@
-.vuuTabMenu {
-    top: var(--vuuTabMenu-top, 0px);
-}

package/esm/toolbar/Toolbar.css

@@ -1,54 +0,0 @@
-.vuuToolbar {
-    --toolbar-height: var(--vuuToolbar-height, 36px);
-    --toolbar-item-height: var(--vuuToolbarItem-height, 100%);
-    --vuuOverflowContainer-background: var(--vuuToolbar-background);
-    --vuuOverflowContainer-borderColor: var(--vuuToolbar-borderColor);
-    --vuuOverflowContainer-borderStyle: var(--vuuToolbar-borderStyle);
-    --vuuOverflowContainer-borderWidth: var(--vuuToolbar-borderWidth);
-    height: var(--toolbar-height);
-}
-
-.vuuToolbar-alignCenter {
-    --vuuOverflowContainer-justifyContent: center;
-}
-
-.vuuToolbar-alignEnd {
-    --vuuOverflowContainer-justifyContent: flex-end;
-}
-
-/* .vuuToolbarItem {
-    height: var(--toolbar-item-height);
-} */
-
-.vuuToolbar-withSeparators .vuuOverflowContainer-item:not(:first-child):before {
-    content: '';
-    position: absolute;
-    left: calc(-1 * var(--overflow-item-gap));
-    top: calc((var(--toolbar-height) - var(--toolbar-item-height)) /2);
-    width: 1px;
-    /* height: calc(var(--basket-selector-height) - 16px); */
-    height: var(--toolbar-item-height);
-    background-color: var(--vuu-color-gray-05);
-}
-
-
-.vuuToolbarItem.vuuFocusVisible {
-    outline-color: var(--vuuToolbarItem-outlineColor, var(--salt-focused-outlineColor));
-    outline-style: dashed;
-    outline-width: 1px;
-    outline-offset: 0px;
-  }
-
-
-  .vuuToolbarItem:focus,
-  .vuuToolbarItem:focus-visible {
-
-    outline-color: var(--vuuToolbarItem-outlineColor, var(--vuu-color-purple-10));
-    outline-style: dashed;
-    outline-width: 1px;
-    outline-offset: 0px;
-
-}
-
-
-