@vuu-ui/vuu-ui-controls 0.8.24-debug → 0.8.25-debug

package/index.css

@@ -1,17 +1,17 @@
 /* src/dropdown/Dropdown.css */
 .vuuDropdown {
   --saltIcon-margin: 2px 0 0 8px;
-  display: inline-block;
+  --saltButton-height: var(--vuuDropdown-height);
+  --saltButton-width: var(--vuuDropdown-width);
   line-height: 0;
   position: relative;
-  width: var(--vuuDropdown-width, auto);
 }
 .vuuDropdownButton.saltButton-secondary {
+  --saltButton-background: var(--salt-editable-background);
+  --saltButton-color: var(--salt-editable-foreground);
   --saltButton-borderStyle: solid;
   --saltButton-borderColor: var(--salt-editable-borderColor);
   --saltButton-borderWidth: 1px;
-  --saltButton-borderRadius: 6px;
-  --saltButton-height: var(--vuuDropdown-height, auto);
 }
 .vuuDropdown-fullWidth {
   width: 100%;
@@ -23,9 +23,6 @@
 .vuuDropdown-popup-component {
   --vuuList-borderStyle: none;
 }
-.vuuDropdownButton {
-  width: 100%;
-}
 
 /* src/dropdown/DropdownButton.css */
 .vuuDropdownButton {
@@ -74,6 +71,7 @@
   --vuu-icon-left: -1px;
   --vuu-icon-top: -1px;
   --vuu-icon-svg: var(--vuu-svg-tick);
+  background: var(--salt-editable-primary-background);
   border-style: solid;
   border-color: var( --vuuCheckboxIcon-borderColor, var(--salt-selectable-borderColor) );
   border-radius: var(--vuuCheckboxIcon-borderRadius, 3px);
@@ -111,9 +109,9 @@
 
 /* src/list/ListItem.css */
 .vuuListItem {
-  --list-item-text-color: var(--salt-text-primary-foreground);
+  --list-item-text-color: var(--salt-content-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-text-color-active: var(--salt-selectable-foreground-selected);
   --list-item-background-active: var(--salt-selectable-background-selected);
   --list-item-alignItems: center;
 }
@@ -151,7 +149,7 @@
 }
 .vuuListItem-checkbox {
   --list-item-background-active: var(--salt-selectable-background);
-  --list-item-text-color-active: var(--salt-text-primary-foreground);
+  --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) {
@@ -159,7 +157,7 @@
   color: var(--list-item-text-color-active);
 }
 .vuuListItem.vuuDisabled {
-  --list-item-text-color: var(--salt-text-primary-foreground-disabled);
+  --list-item-text-color: var(--salt-content-primary-foreground-disabled);
   cursor: var(--salt-selectable-cursor-disabled);
 }
 .vuuListItem.vuuFocusVisible {
@@ -202,11 +200,10 @@
   --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);
-  --overflow-top:top:0;
-  --overflow-width: 0px;
   background-color: var(--vuuOverflowContainer-background);
   border-color: var(--overflow-borderColor);
   border-style: var(--overflow-borderStyle);
@@ -214,32 +211,53 @@
   border-right-width: var(--overflow-border-rightWidth);
   border-bottom-width: var(--overflow-border-bottomWidth);
   border-left-width: var(--overflow-border-leftWidth);
-  height: var(--overflow-container-heightWidth);
+  height: var(--vuuOverflowContainer-height,var(--overflow-container-height));
+  width: var(--overflow-container-width);
 }
-.vuuOverflowContainer-horizontal {
+.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-vertical {
+.vuuOverflowContainer.vuuOrientation-horizontal .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: 0;
+  --overflow-height: 0px;
   --overflow-left: 0;
   --overflow-top: 100%;
   --overflow-width: auto;
 }
+.vuuOverflowContainer.vuuOrientation-vertical .vuuOverflowContainer-wrapContainer-overflowed {
+  --overflow-top: auto;
+  --overflow-position: relative;
+  --overflow-height: auto;
+}
 .vuuOverflowContainer-wrapContainer {
-  --border: calc(var(--overflow-border-topWidth) + var(--overflow-border-bottomWidth));
-  --overflow-item-height: calc(var(--overflow-container-height) - var(--border));
   align-items: var(--item-align);
   display: flex;
   flex-direction: var(--overflow-direction);
   flex-wrap: wrap;
-  height: var(--overflow-item-height);
+  height: var(--overflow-wrapper-height);
   justify-content: var(--vuuOverflowContainer-justifyContent, flex-start);
-  min-width: var(--vuuOverflowContainer-minWidth, 44px);
   overflow: hidden;
   position: relative;
   width: 100%;
@@ -250,7 +268,7 @@
   --overflow-position: relative;
   --overflow-width: auto;
 }
-.vuuOverflowContainer-vertical.vuuOverflowContainer-wrapContainer-overflowed {
+.vuuOverflowContainer.vuuOrientation-vertical.vuuOverflowContainer-wrapContainer-overflowed {
   --overflow-height: auto;
 }
 .vuuOverflowContainer-item {
@@ -260,6 +278,7 @@
   position: relative;
   height: var(--overflow-item-height);
   margin: var(--item-margin);
+  width: var(--overflow-item-width);
 }
 .vuuOverflowContainer-item[data-align=right] {
   margin-left: auto;
@@ -267,6 +286,7 @@
 .vuuOverflowContainer-item.wrapped {
   --overflow-item-bg: #ccc;
   order: 3;
+  visibility: hidden;
 }
 .vuuOverflowContainer-item.vuuDraggable-dragAway,
 .vuuOverflowContainer-item:has(.vuuDraggable-dragAway) {
@@ -282,9 +302,6 @@
   height: var(--overflow-height);
   order: var(--overflow-order, 99);
   overflow: hidden;
-  left: var(--overflow-left, 100%);
-  top: var(--overflow-top, 100%);
-  position: var(--overflow-position, absolute);
   width: var(--overflow-width);
 }
 .vuuDraggable-vuuOverflowContainer {
@@ -340,6 +357,14 @@
   order: 1;
 }
 
+/* src/measured-container/MeasuredContainer.css */
+.vuuMeasuredContainer {
+  flex: var(--vuuMeasuredContainer-flex, none);
+  height: var(--vuuMeasuredContainer-height, var(--measured-css-height));
+  min-height: 0;
+  width: var(--measured-css-width);
+}
+
 /* src/list/List.css */
 .vuuList {
   --list-background: var(--salt-container-primary-background);
@@ -425,14 +450,6 @@
   left: 2px;
 }
 
-/* src/measured-container/MeasuredContainer.css */
-.vuuMeasuredContainer {
-  flex: var(--vuuMeasuredContainer-flex, none);
-  height: var(--vuuMeasuredContainer-height, var(--measured-css-height));
-  min-height: 0;
-  width: var(--measured-css-width);
-}
-
 /* src/list/RadioIcon.css */
 .vuuRadioIcon {
   --vuu-icon-size: 12px;
@@ -488,6 +505,17 @@
   grid-template-columns: min-content auto min-content;
 }
 
+/* src/icon-button/Icon.css */
+.vuuIcon {
+  --vuu-icon-left: 0;
+}
+
+/* src/icon-button/IconButton.css */
+.vuuIconButton {
+  --saltButton-padding: var(--salt-size-unit);
+  --saltButton-minWidth: var(--salt-size-base);
+}
+
 /* src/calendar/internal/CalendarWeekHeader.css */
 .saltCalendarWeekHeader {
   --calendar-week-header-underline-color: var(--salt-separable-secondary-borderColor);
@@ -709,6 +737,34 @@
   --vuu-icon-svg: var(--vuu-svg-chevron-right);
 }
 
+/* src/date-input/DateInput.css */
+.vuuDateInput {
+  border: solid 1px var(--salt-editable-borderColor);
+  display: inline-flex;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  gap: 1px;
+  padding: 0 0 0 2px;
+}
+.vuuDateInput .saltInput-input {
+  border: none;
+  outline: none;
+  padding-left: 0;
+}
+.vuuDateInput-calendar {
+  padding: 2px;
+}
+.vuuDatePickerInput:focus {
+  outline: none;
+}
+input[type=date] {
+  font-family: var(--salt-typography-fontFamily);
+  min-width: 80px;
+}
+input[type=date]::-webkit-calendar-picker-indicator {
+  display: none;
+}
+
 /* src/date-picker/input/DatePickerInput.css */
 .vuuDatePickerInput {
   border: none;
@@ -885,17 +941,6 @@ input[type=date]::-webkit-calendar-picker-indicator {
   padding: 0;
 }
 
-/* src/icon-button/Icon.css */
-.vuuIcon {
-  --vuu-icon-left: 0;
-}
-
-/* src/icon-button/IconButton.css */
-.vuuIconButton {
-  --saltButton-padding: var(--salt-size-unit);
-  --saltButton-minWidth: var(--salt-size-base);
-}
-
 /* src/inputs/Checkbox.css */
 .vuuCheckbox {
   --vuuCheckboxIcon-background-checked-enabled: var(--vuu-color-purple-10);
@@ -1054,7 +1099,11 @@ input[type=radio] {
   --saltButton-background-hover: var(--split-background);
   --vuuPopupMenu-background: var(--split-background);
   --vuuPopupMenu-iconSize: 20px;
-  --border-radius: 6px;
+  --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;
@@ -1067,13 +1116,13 @@ input[type=radio] {
   outline-style: none;
 }
 .vuuSplitButton.vuuFocusVisible.vuuSplitButton-primary {
-  --split-background: var(--salt-actionable-primary-background-hover);
+  --split-background: var(--background-hover,var(--salt-actionable-primary-background-hover));
 }
 .vuuSplitButton.vuuFocusVisible.vuuSplitButton-secondary {
-  --split-background: var(--salt-actionable-secondary-background-hover);
+  --split-background: var(--background-hover,var(--salt-actionable-secondary-background-hover));
 }
 .vuuSplitButton.vuuFocusVisible.vuuSplitButton-cta {
-  --split-background: var(--salt-actionable-cta-background-hover);
+  --split-background: var(--background-hover,var(--salt-actionable-cta-background-hover));
 }
 .vuuSplitButton.vuuFocusVisible.vuuSplitButton-cta .vuuSplitButton-trigger {
   --vuu-icon-color: var(--salt-actionable-cta-foreground-hover);
@@ -1085,21 +1134,21 @@ input[type=radio] {
   outline-offset: var(--salt-focused-outlineOffset);
 }
 .vuuSplitButton-primary {
-  --split-background: var(--salt-actionable-primary-background);
+  --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(--salt-actionable-primary-background-hover);
+  --split-background: var(--background-hover, var(--salt-actionable-primary-background-hover));
 }
 .vuuSplitButton-primary:hover:not(.vuuSplitButton-disabled) .saltButton {
   --saltButton-text-color: var(--salt-actionable-primary-foreground-hover);
 }
 .vuuSplitButton-secondary {
   --saltButton-borderColor: var(--split-background);
-  --split-background: var(--salt-actionable-secondary-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);
 }
@@ -1111,7 +1160,7 @@ input[type=radio] {
   --saltButton-text-color: var(--salt-actionable-secondary-foreground-hover);
 }
 .vuuSplitButton-cta {
-  --split-background: var(--salt-actionable-cta-background);
+  --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);
 }
@@ -1140,9 +1189,60 @@ input[type=radio] {
   border-radius: var(--trigger-border-radius);
 }
 
+/* src/split-button/SplitStateButton.css */
+.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);
+}
+.vuuSplitStateButton .saltButton-primary:active,
+.vuuSplitStateButton .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);
+}
+.vuuSplitStateButton[aria-checked=true].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);
+}
+.vuuSplitStateButton:has(.vuuSplitButton-main:active, .vuuSplitButton-main.saltButton-active) .vuuSplitButton-trigger {
+  --vuu-icon-color: var(--salt-actionable-primary-foreground);
+}
+.vuuSplitStateButton:has(.vuuEditableLabel-editing):has(.vuuSplitButton-main:active, .vuuSplitButton-main.saltButton-active) {
+  --split-background: var(--salt-actionable-secondary-background);
+}
+.vuuSplitStateButton:has(.vuuEditableLabel-editing):has(.vuuSplitButton-main:active, .vuuSplitButton-main.saltButton-active) .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);
+}
+.vuuSplitStateButton[aria-checked=true]:has(.vuuEditableLabel-editing):has(.vuuSplitButton-main:active, .vuuSplitButton-main.saltButton-active) .saltButton-primary:active {
+  background: var(--salt-actionable-primary-background-active);
+}
+.vuuSplitStateButton:hover:not(.vuuSplitStateButton-disabled) .saltButton {
+  border-color: var(--salt-actionable-primary-foreground);
+}
+
 /* src/tabstrip/Tabstrip.css */
 .vuuTabstrip {
   --vuuOverflowContainer-background: transparent;
+  --vuuOverflowContainer-borderColor: var(--salt-container-primary-borderColor);
+  --vuuOverflowContainer-width: var(--tabstrip-width);
   --tabstrip-dragging-display: none;
   --tabstrip-display: inline-flex;
   --tabstrip-background: transparent;
@@ -1153,13 +1253,11 @@ input[type=radio] {
   min-width: 28px;
   position: relative;
   overflow: visible;
-  width: var(--tabstrip-width);
 }
-.vuuTabstrip-horizontal {
-  --vuuOverflowContainer-borderColor: var(--salt-container-primary-borderColor);
+.vuuTabstrip.vuuOrientation-horizontal {
   --vuuOverflowContainer-borderStyle: none none solid none;
   --vuuOverflowContainer-borderBottomWidth: 1px;
-  --tabstrip-height: var(--vuuTabstrip-height, 28px);
+  --tabstrip-height: var(--vuuTabstrip-height, var(--overflow-wrapper-height,28px));
   --tabstrip-width: var(--vuuTabstrip-width, 100%);
   --tab-height: var(--tabstrip-height);
   --tab-width: auto;
@@ -1169,7 +1267,7 @@ input[type=radio] {
   --tab-thumb-width: var(--tab-thumb-size, 100%);
   align-items: flex-start;
 }
-.vuuTabstrip-vertical {
+.vuuTabstrip.vuuOrientation-vertical {
   --tabstrip-height: var(--vuuTabstrip-height, 100%);
   --tabstrip-width: var(--vuuTabstrip-width, 100px);
   --tab-height: 50px;
@@ -1205,7 +1303,7 @@ input[type=radio] {
   justify-content: flex-start;
   line-height: var(--tabstrip-height);
 }
-.vuuTabstrip-vertical .vuuTabstrip-inner {
+.vuuTabstrip.vuuOrientation-vertical .vuuTabstrip-inner {
   flex-direction: column;
   height: auto;
 }
@@ -1249,7 +1347,7 @@ input[type=radio] {
 
 /* src/tabstrip/TabMenu.css */
 .vuuTabMenu {
-  top: var(--vuuTabMenu-top, -2px);
+  top: var(--vuuTabMenu-top, 0px);
 }
 
 /* src/tabstrip/Tab.css */
@@ -1258,35 +1356,33 @@ input[type=radio] {
   --saltEditableLabel-height: calc(var(--tabstrip-height) - 2px);
   --saltInputLegacy-minWidth: 4em;
   --saltEditableLabel-top: 2px;
-  --tab-background: var(--vuuTab-background, var(--salt-navigable-primary-background));
+  --tab-background: var(--vuuTab-background, transparent);
   --tab-cursor: pointer;
   --tab-position: relative;
-}
-.vuuTab {
   align-items: center;
   align-self: stretch;
   background: var(--tab-background);
-  border: none;
+  border-color: var(--vuuTab-borderColor, transparent);
+  border-style: var(--vuuTab-borderStyle, none);
+  border-width: var(--vuuTab-borderWidth, 0px);
   border-radius: var(--vuuTab-borderRadius, 0);
-  color: var(--salt-text-primary-foreground);
+  color: var(--salt-content-primary-foreground);
   cursor: var(--vuuTab-cursor, var(--tab-cursor));
   display: var(--tabstrip-display);
   gap: 8px;
   height: var(--vuuTabHeight, var(--tab-height));
   letter-spacing: var(--vuuTab-letterSpacing, var(--tab-letterSpacing, 0));
+  margin: 0 var(--tab-spacing) 0 0;
   min-width: var(--vuuTab-minWidth, 40px);
   outline: none;
-  padding: var(--vuuTab-padding, 0 24px);
+  padding: var(--vuuTab-padding, 0 var(--salt-spacing-200));
   position: var(--vuuTab-position, var(--tab-position));
   user-select: none;
   width: var(--tab-width);
 }
-.vuuTab {
-  margin: 0 var(--tab-spacing) 0 0;
-}
 .vuuTab-selected {
   background: var(--vuuTab-background-selected, var(--tab-background));
-  color: var(--salt-text-primary-foreground);
+  color: var(--salt-content-primary-foreground);
   font-weight: var(--salt-navigable-fontWeight-active);
 }
 .vuuTab-main {