@osdk/react-components 0.2.0-beta.27 → 0.2.0-beta.29

package/build/cjs/public/experimental.css

@@ -20,13 +20,21 @@
   display: flex;
   flex-direction: column;
   height: 100%;
-  overflow-y: auto;
+  overflow: hidden;
   background: var(--osdk-filter-list-bg);
   border: var(--osdk-filter-list-border);
   border-radius: var(--osdk-filter-list-border-radius);
+  box-shadow: var(--osdk-filter-list-shadow);
   padding: var(--osdk-filter-list-padding);
   gap: var(--osdk-filter-list-gap);
 }
+.scrollableContent {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow-y: auto;
+  min-height: 0;
+}
 .hiddenContent {
   display: none;
 }
@@ -67,22 +75,26 @@
 .addButtonContainer {
   display: flex;
   justify-content: center;
-  position: sticky;
-  bottom: 0;
-  padding-top: var(--osdk-filter-list-addButton-padding-top);
+  padding: var(--osdk-filter-list-addButton-container-padding);
   background: var(--osdk-filter-list-addButton-container-bg);
+  border-top: var(--osdk-filter-list-addButton-container-border-top);
+  flex-shrink: 0;
 }
 .addButtonContainer > * {
   flex: 1;
 }
 .addButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   font-family: var(--osdk-filter-header-font-family);
   font-size: var(--osdk-filter-header-reset-font-size);
-  color: var(--osdk-filter-header-reset-color);
+  color: var(--osdk-typography-color-default-rest);
   background: var(--osdk-filter-header-button-bg);
-  border: none;
+  border: var(--osdk-filter-list-addButton-border);
   cursor: pointer;
   padding: var(--osdk-filter-header-reset-padding);
+  min-height: var(--osdk-filter-list-addButton-height);
   border-radius: var(--osdk-filter-header-button-border-radius);
   transition: background-color var(--osdk-filter-header-button-transition);
   &:hover {
@@ -243,10 +255,6 @@
   border-radius: var(--osdk-filter-input-border-radius);
   padding: var(--osdk-filter-input-padding);
   gap: var(--osdk-filter-input-gap);
-  &:focus-within {
-    outline: var(--osdk-filter-input-focus-outline-width) solid var(--osdk-filter-input-focus-outline-color);
-    outline-offset: var(--osdk-filter-input-focus-outline-offset);
-  }
 }
 .searchInput {
   flex: 1;
@@ -296,7 +304,6 @@
     transition: none;
   }
 }
-.filterItem:hover [data-exclude-row],
 .excludeRowVisible {
   opacity: 1;
   height: auto;
@@ -308,6 +315,19 @@
   color: var(--osdk-filter-item-exclude-dropdown-color);
   margin-left: calc(var(--osdk-surface-spacing) * 0.5);
 }
+.clearAllButton {
+  margin-left: auto;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-family: var(--osdk-filter-item-exclude-dropdown-font-family);
+  font-size: var(--osdk-filter-item-exclude-dropdown-font-size);
+  color: var(--osdk-filter-item-exclude-dropdown-color);
+  padding: 0;
+  &:hover {
+    text-decoration: underline;
+  }
+}
 .dragging {
   opacity: var(--osdk-filter-item-dragging-opacity);
 }
@@ -317,13 +337,17 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding-bottom: var(--osdk-filter-header-padding-bottom);
+  padding: var(--osdk-filter-header-padding);
+  gap: var(--osdk-filter-header-gap);
   border-bottom: var(--osdk-filter-header-border-bottom);
+  flex-shrink: 0;
 }
 .titleContainer {
   display: flex;
   align-items: center;
   gap: var(--osdk-filter-header-titleContainer-gap);
+  flex: 1;
+  min-width: 0;
 }
 .title {
   font-family: var(--osdk-filter-header-font-family);
@@ -384,16 +408,17 @@
   font-size: var(--osdk-filter-header-reset-font-size);
   color: var(--osdk-filter-header-reset-color);
   background: var(--osdk-filter-header-button-bg);
-  border: none;
+  border: var(--osdk-filter-header-reset-border);
   cursor: pointer;
   padding: var(--osdk-filter-header-reset-padding);
-  border-radius: var(--osdk-filter-header-button-border-radius);
+  border-radius: var(--osdk-filter-header-reset-border-radius);
   transition: background-color var(--osdk-filter-header-button-transition);
   &:hover:not(:disabled) {
     background: var(--osdk-filter-header-button-bg-hover);
   }
   &:disabled {
     color: var(--osdk-filter-header-reset-color-disabled);
+    border: var(--osdk-filter-header-reset-border-disabled);
     cursor: not-allowed;
   }
   &:focus-visible {
@@ -405,15 +430,110 @@
   }
 }
 
+/* src/base-components/search-bar/SearchBar.module.css */
+.searchBar {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--osdk-surface-spacing) * 3);
+  padding: var(--osdk-surface-spacing) calc(var(--osdk-surface-spacing) * 3);
+  border: var(--osdk-surface-border);
+  border-radius: var(--osdk-surface-border-radius);
+  &:focus-within {
+    outline: var(--osdk-focus-outline);
+    outline-offset: calc(-1 * var(--osdk-focus-visible-outline-offset));
+  }
+}
+.searchIcon {
+  width: var(--osdk-iconography-size-small);
+  height: var(--osdk-iconography-size-small);
+  color: var(--osdk-typography-color-muted);
+  pointer-events: none;
+  flex-shrink: 0;
+}
+.searchInput {
+  border: none;
+  width: 100%;
+  padding: var(--osdk-surface-spacing) 0;
+  font-size: var(--osdk-typography-size-body-medium);
+  background: transparent;
+  &:focus {
+    outline: none;
+  }
+  &::placeholder {
+    color: var(--osdk-typography-color-muted);
+  }
+}
+
+/* src/base-components/searchable-menu/SearchableMenu.module.css */
+.positioner {
+  z-index: var(--osdk-surface-z-index-3);
+}
+.popup {
+  background-color: var(--osdk-surface-background-color-default-rest);
+  border: var(--osdk-surface-border);
+  border-radius: var(--osdk-surface-border-radius);
+  box-shadow: var(--osdk-surface-shadow-2);
+  max-height: calc(var(--osdk-dialog-max-height) * 0.5);
+  overflow-y: auto;
+  width: var(--anchor-width);
+  &:focus {
+    outline: none;
+  }
+  &:focus-visible {
+    outline: var(--osdk-focus-outline);
+    outline-offset: var(--osdk-focus-visible-outline-offset);
+  }
+}
+.searchContainer {
+  border: none;
+  border-bottom: var(--osdk-surface-border);
+  border-radius: 0;
+  position: sticky;
+  top: 0;
+  background-color: var(--osdk-surface-background-color-default-rest);
+}
+.menuItem {
+  display: block;
+  width: 100%;
+  text-align: left;
+  padding: calc(var(--osdk-surface-spacing) * 2) calc(var(--osdk-surface-spacing) * 3);
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: var(--osdk-typography-size-body-medium);
+  color: var(--osdk-typography-color-default-rest);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  &:hover,
+  &[data-highlighted] {
+    background-color: var(--osdk-surface-background-color-default-hover);
+  }
+  &:focus-visible {
+    outline: var(--osdk-focus-outline);
+    outline-offset: var(--osdk-focus-visible-outline-offset);
+  }
+}
+.emptyState {
+  padding: calc(var(--osdk-surface-spacing) * 3);
+  text-align: center;
+  color: var(--osdk-typography-color-muted);
+  font-size: var(--osdk-typography-size-body-medium);
+}
+
 /* src/filter-list/base/AddFilterPopover.module.css */
 .trigger {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   font-family: var(--osdk-filter-header-font-family);
   font-size: var(--osdk-filter-header-reset-font-size);
-  color: var(--osdk-filter-header-reset-color);
+  color: var(--osdk-typography-color-default-rest);
   background: var(--osdk-filter-header-button-bg);
-  border: none;
+  border: var(--osdk-filter-list-addButton-border);
   cursor: pointer;
   padding: var(--osdk-filter-header-reset-padding);
+  min-height: var(--osdk-filter-list-addButton-height);
   border-radius: var(--osdk-filter-header-button-border-radius);
   transition: background-color var(--osdk-filter-header-button-transition);
   width: 100%;
@@ -431,39 +551,6 @@
     transition: none;
   }
 }
-.positioner {
-  z-index: var(--osdk-surface-z-index-3);
-}
-.popup {
-  background: var(--osdk-filter-item-menu-bg);
-  border: var(--osdk-filter-item-menu-border);
-  border-radius: var(--osdk-filter-item-menu-border-radius);
-  box-shadow: var(--osdk-filter-item-menu-shadow);
-  padding: var(--osdk-filter-item-menu-padding);
-}
-.menuItem {
-  display: flex;
-  align-items: center;
-  gap: var(--osdk-surface-spacing);
-  padding: var(--osdk-filter-item-menu-item-padding);
-  font-family: var(--osdk-filter-item-menu-item-font-family);
-  font-size: var(--osdk-filter-item-menu-item-font-size);
-  color: var(--osdk-filter-item-menu-item-color);
-  border-radius: var(--osdk-filter-item-menu-item-border-radius);
-  cursor: pointer;
-  border: none;
-  background: transparent;
-  width: 100%;
-  text-align: left;
-  &:hover,
-  &[data-highlighted] {
-    background: var(--osdk-filter-item-menu-item-bg-hover);
-  }
-  &:focus-visible {
-    outline: var(--osdk-filter-input-focus-outline-width) solid var(--osdk-filter-input-focus-outline-color);
-    outline-offset: var(--osdk-filter-input-focus-outline-offset);
-  }
-}
 
 /* src/filter-list/base/inputs/ContainsTextInput.module.css */
 .textInput {
@@ -610,130 +697,82 @@
   color: var(--osdk-filter-toggle-label-color);
 }
 
-/* src/base-components/checkbox/Checkbox.module.css */
-.osdkCheckboxRoot {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: calc(var(--osdk-checkbox-icon-size) + var(--osdk-checkbox-padding) * 2);
-  min-height: calc(var(--osdk-checkbox-icon-size) + var(--osdk-checkbox-padding) * 2);
-  padding: var(--osdk-checkbox-padding);
-  cursor: pointer;
-  border-radius: var(--osdk-surface-border-radius);
-  border: var(--osdk-checkbox-border);
-  &[data-unchecked] {
-    background-color: var(--osdk-checkbox-bg);
-    &:hover {
-      background-color: var(--osdk-checkbox-bg-hover);
-    }
-    &:active {
-      background-color: var(--osdk-checkbox-bg-active);
-    }
-  }
-  &[data-checked],
-  &[data-indeterminate] {
-    background-color: var(--osdk-checkbox-bg-checked);
-    &:hover {
-      background-color: var(--osdk-checkbox-bg-checked-hover);
-    }
-    &:active {
-      background-color: var(--osdk-checkbox-bg-checked-active);
-    }
-  }
-  &:focus-visible {
-    outline: var(--osdk-focus-outline);
-    outline-offset: calc(-1 * var(--osdk-focus-visible-outline-offset));
-  }
-}
-.osdkCheckboxIndicator {
-  color: var(--osdk-checkbox-checked-foreground);
-  width: var(--osdk-checkbox-icon-size);
-  height: var(--osdk-checkbox-icon-size);
-  &[data-unchecked] {
-    display: none;
-  }
-}
-
-/* src/filter-list/base/inputs/CheckboxListInput.module.css */
-.checkboxList {
+/* src/filter-list/base/inputs/RangeInput.module.css */
+.rangeInput {
   display: flex;
   flex-direction: column;
-  gap: var(--osdk-filter-checkbox-list-gap);
+  gap: var(--osdk-filter-range-gap);
+  min-width: 0;
   transition: opacity var(--osdk-filter-content-fade-duration);
 }
-.checkboxList[data-loading=true] {
+.rangeInput[data-loading=true] {
   opacity: 0.5;
 }
-@media (prefers-reduced-motion: reduce) {
-  .checkboxList {
-    transition: none;
-  }
+.histogramContainer {
+  display: flex;
+  align-items: flex-end;
+  height: var(--osdk-filter-range-histogram-height);
+  gap: var(--osdk-filter-range-histogram-bar-gap);
+  padding-bottom: var(--osdk-filter-range-histogram-padding-bottom);
+  padding-inline: var(--osdk-filter-range-histogram-padding-inline);
+  overflow: hidden;
 }
-.checkboxRow {
-  padding: var(--osdk-filter-checkbox-row-padding);
-  border-radius: var(--osdk-filter-checkbox-row-border-radius);
-  &:hover {
-    background: var(--osdk-filter-checkbox-row-bg-hover);
-  }
+.histogramBar {
+  flex: 1;
+  background: var(--osdk-filter-range-histogram-bar-color);
+  min-width: var(--osdk-filter-range-histogram-bar-min-width);
+  transition: background-color var(--osdk-filter-range-histogram-bar-transition);
+}
+.histogramBar[data-in-range=true] {
+  background: var(--osdk-filter-range-histogram-bar-active-color);
 }
-.checkboxLabel {
+.rangeInputs {
   display: flex;
-  align-items: center;
-  gap: var(--osdk-filter-checkbox-label-gap);
-  cursor: pointer;
+  align-items: flex-end;
+  gap: var(--osdk-filter-range-inputs-gap);
+  min-width: 0;
 }
-.valueText {
-  font-family: var(--osdk-filter-checkbox-value-font-family);
-  font-size: var(--osdk-filter-checkbox-value-font-size);
-  line-height: var(--osdk-filter-checkbox-value-line-height);
-  color: var(--osdk-filter-checkbox-value-color);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.inputWrapper {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--osdk-filter-range-input-wrapper-gap);
+  min-width: 0;
 }
-.colorDot {
-  width: var(--osdk-filter-checkbox-color-dot-size);
-  height: var(--osdk-filter-checkbox-color-dot-size);
-  border-radius: 50%;
-  flex-shrink: 0;
+.inputLabel {
+  font-family: var(--osdk-filter-range-label-font-family);
+  font-size: var(--osdk-filter-range-label-font-size);
+  color: var(--osdk-filter-range-label-color);
 }
-
-/* src/base-components/skeleton/SkeletonBar.module.css */
-@keyframes skeleton-glow {
-  from {
-    background: var(--osdk-background-skeleton-from);
-  }
-  to {
-    background: var(--osdk-background-skeleton-to);
+.input {
+  font-family: var(--osdk-filter-input-font-family);
+  font-size: var(--osdk-filter-input-font-size);
+  padding: var(--osdk-filter-input-padding);
+  border: var(--osdk-filter-input-border);
+  border-radius: var(--osdk-filter-input-border-radius);
+  background: var(--osdk-filter-input-bg);
+  color: var(--osdk-filter-input-color);
+  min-width: 0;
+  &:focus {
+    border-color: var(--osdk-filter-input-focus-border);
+    outline: var(--osdk-filter-input-focus-outline-width) solid var(--osdk-filter-input-focus-outline-color);
+    outline-offset: var(--osdk-filter-input-focus-outline-offset);
   }
-}
-.skeletonBar {
-  animation: 1000ms linear infinite alternate skeleton-glow;
-  background: var(--osdk-background-skeleton-from);
-  border-radius: var(--osdk-surface-border-radius);
-  pointer-events: none;
-  user-select: none;
-}
-@media (prefers-reduced-motion: reduce) {
-  .skeletonBar {
-    animation: none;
+  &::placeholder {
+    color: var(--osdk-filter-input-placeholder-color);
   }
 }
-
-/* src/filter-list/base/inputs/CheckboxListSkeleton.module.css */
-.container {
-  display: flex;
-  flex-direction: column;
-  gap: var(--osdk-filter-checkbox-list-gap);
-}
-.row {
+.separator {
   display: flex;
   align-items: center;
-  gap: var(--osdk-filter-checkbox-label-gap);
-  padding: var(--osdk-filter-checkbox-row-padding);
+  height: calc(var(--osdk-filter-input-font-size) + var(--osdk-filter-input-padding) * 2);
+  color: var(--osdk-filter-range-separator-color);
 }
-.flexBar {
-  flex: 1;
+@media (prefers-reduced-motion: reduce) {
+  .histogramContainer,
+  .rangeInput {
+    transition: none;
+  }
 }
 
 /* src/filter-list/base/inputs/shared.module.css */
@@ -792,89 +831,64 @@
   }
 }
 
-/* src/filter-list/base/inputs/RangeInput.module.css */
-.rangeInput {
+/* src/filter-list/base/inputs/LinkedPropertyInput.module.css */
+.linkedProperty {
   display: flex;
   flex-direction: column;
-  gap: var(--osdk-filter-range-gap);
-  min-width: 0;
-  transition: opacity var(--osdk-filter-content-fade-duration);
-}
-.rangeInput[data-loading=true] {
-  opacity: 0.5;
 }
-.histogramContainer {
-  display: flex;
-  align-items: flex-end;
-  height: var(--osdk-filter-range-histogram-height);
-  gap: var(--osdk-filter-range-histogram-bar-gap);
-  overflow: hidden;
-  opacity: 0;
-  transition: opacity var(--osdk-filter-content-fade-duration);
-}
-.histogramContainer:not([data-empty=true]) {
-  opacity: 1;
-}
-.histogramBar {
-  flex: 1;
-  background: var(--osdk-filter-range-histogram-bar-color);
-  min-width: var(--osdk-filter-range-histogram-bar-min-width);
-  transition: background-color var(--osdk-filter-range-histogram-bar-transition);
-}
-.histogramBar[data-in-range=true] {
-  background: var(--osdk-filter-range-histogram-bar-active-color);
-}
-.rangeInputs {
-  display: flex;
-  align-items: flex-end;
-  gap: var(--osdk-filter-range-inputs-gap);
-  min-width: 0;
-}
-.inputWrapper {
-  flex: 1;
+
+/* src/base-components/checkbox/Checkbox.module.css */
+.osdkCheckboxRoot {
   display: flex;
-  flex-direction: column;
-  gap: var(--osdk-filter-range-input-wrapper-gap);
-  min-width: 0;
-}
-.inputLabel {
-  font-family: var(--osdk-filter-range-label-font-family);
-  font-size: var(--osdk-filter-range-label-font-size);
-  color: var(--osdk-filter-range-label-color);
-}
-.input {
-  font-family: var(--osdk-filter-input-font-family);
-  font-size: var(--osdk-filter-input-font-size);
-  padding: var(--osdk-filter-input-padding);
-  border: var(--osdk-filter-input-border);
-  border-radius: var(--osdk-filter-input-border-radius);
-  background: var(--osdk-filter-input-bg);
-  color: var(--osdk-filter-input-color);
-  min-width: 0;
-  &:focus {
-    border-color: var(--osdk-filter-input-focus-border);
-    outline: var(--osdk-filter-input-focus-outline-width) solid var(--osdk-filter-input-focus-outline-color);
-    outline-offset: var(--osdk-filter-input-focus-outline-offset);
+  align-items: center;
+  justify-content: center;
+  width: calc(var(--osdk-checkbox-icon-size) + var(--osdk-checkbox-padding) * 2);
+  height: calc(var(--osdk-checkbox-icon-size) + var(--osdk-checkbox-padding) * 2);
+  flex-shrink: 0;
+  padding: var(--osdk-checkbox-padding);
+  cursor: pointer;
+  border-radius: var(--osdk-surface-border-radius);
+  border: var(--osdk-checkbox-border);
+  &[data-unchecked] {
+    background-color: var(--osdk-checkbox-bg);
+    &:hover {
+      background-color: var(--osdk-checkbox-bg-hover);
+    }
+    &:active {
+      background-color: var(--osdk-checkbox-bg-active);
+    }
   }
-  &::placeholder {
-    color: var(--osdk-filter-input-placeholder-color);
+  &[data-checked],
+  &[data-indeterminate] {
+    background-color: var(--osdk-checkbox-bg-checked);
+    &:hover {
+      background-color: var(--osdk-checkbox-bg-checked-hover);
+    }
+    &:active {
+      background-color: var(--osdk-checkbox-bg-checked-active);
+    }
   }
-}
-.separator {
-  padding-bottom: calc(var(--osdk-filter-range-inputs-gap) * 0.75);
-  color: var(--osdk-filter-range-separator-color);
-}
-@media (prefers-reduced-motion: reduce) {
-  .histogramContainer,
-  .rangeInput {
-    transition: none;
+  &[data-excluding][data-checked] {
+    background-color: var(--osdk-checkbox-bg-checked);
+    &:hover {
+      background-color: var(--osdk-checkbox-bg-checked-hover);
+    }
+    &:active {
+      background-color: var(--osdk-checkbox-bg-checked-active);
+    }
+  }
+  &:focus-visible {
+    outline: var(--osdk-focus-outline);
+    outline-offset: calc(-1 * var(--osdk-focus-visible-outline-offset));
   }
 }
-
-/* src/filter-list/base/inputs/LinkedPropertyInput.module.css */
-.linkedProperty {
-  display: flex;
-  flex-direction: column;
+.osdkCheckboxIndicator {
+  color: var(--osdk-checkbox-checked-foreground);
+  width: var(--osdk-checkbox-icon-size);
+  height: var(--osdk-checkbox-icon-size);
+  &[data-unchecked] {
+    display: none;
+  }
 }
 
 /* src/filter-list/base/inputs/ListogramInput.module.css */
@@ -928,6 +942,9 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.label[data-excluding] {
+  text-decoration: line-through;
+}
 .bar {
   width: var(--osdk-filter-listogram-bar-width);
   flex-shrink: 0;
@@ -941,6 +958,7 @@
   height: 100%;
   width: 100%;
   background: var(--osdk-filter-listogram-row-bar-color, var(--osdk-filter-listogram-bar-color));
+  border-radius: var(--osdk-filter-listogram-bar-border-radius);
   transform-origin: left;
   transform: scaleX(var(--osdk-filter-listogram-bar-fill-scale, 0));
   transition: transform var(--osdk-filter-listogram-bar-fill-transition);
@@ -948,6 +966,28 @@
 .row[aria-pressed=true] .barFill {
   background: var(--osdk-filter-listogram-row-bar-color, var(--osdk-filter-listogram-selected-color));
 }
+.viewAllButton {
+  display: flex;
+  align-items: center;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-family: var(--osdk-filter-listogram-label-font-family);
+  font-size: var(--osdk-filter-listogram-view-all-font-size);
+  color: var(--osdk-filter-listogram-view-all-color);
+  padding: var(--osdk-filter-listogram-row-padding);
+  text-align: left;
+  &:hover {
+    text-decoration: underline;
+  }
+  &:focus-visible {
+    outline: var(--osdk-filter-listogram-row-focus-outline);
+    outline-offset: var(--osdk-filter-listogram-row-focus-offset);
+  }
+}
+.checkbox {
+  display: flex;
+}
 .count {
   font-family: var(--osdk-filter-listogram-count-font-family);
   font-size: var(--osdk-filter-listogram-count-font-size);
@@ -957,6 +997,28 @@
   text-align: right;
 }
 
+/* src/base-components/skeleton/SkeletonBar.module.css */
+@keyframes skeleton-glow {
+  from {
+    background: var(--osdk-background-skeleton-from);
+  }
+  to {
+    background: var(--osdk-background-skeleton-to);
+  }
+}
+.skeletonBar {
+  animation: 1000ms linear infinite alternate skeleton-glow;
+  background: var(--osdk-background-skeleton-from);
+  border-radius: var(--osdk-surface-border-radius);
+  pointer-events: none;
+  user-select: none;
+}
+@media (prefers-reduced-motion: reduce) {
+  .skeletonBar {
+    animation: none;
+  }
+}
+
 /* src/filter-list/base/inputs/ListogramSkeleton.module.css */
 .container {
   display: flex;
@@ -1044,8 +1106,7 @@
   transition: border-color var( --osdk-combobox-transition-duration, var(--osdk-emphasis-transition-duration) ) var(--osdk-combobox-transition-ease, var(--osdk-emphasis-ease-default));
   &:focus {
     border-color: var( --osdk-combobox-focus-border-color, var(--osdk-intent-primary-rest) );
-    outline: var(--osdk-combobox-focus-width, var(--osdk-emphasis-focus-width)) solid var(--osdk-combobox-focus-color, var(--osdk-emphasis-focus-color));
-    outline-offset: var( --osdk-combobox-focus-offset, var(--osdk-emphasis-focus-offset) );
+    outline: none;
   }
   .osdkComboboxInputWrapper & {
     padding: 0;
@@ -1085,6 +1146,7 @@
 .osdkComboboxItem {
   display: flex;
   align-items: center;
+  gap: calc(var(--osdk-combobox-spacing, var(--osdk-surface-spacing)) * 1.5);
   padding: calc(var(--osdk-combobox-spacing, var(--osdk-surface-spacing)) * 1.5) calc(var(--osdk-combobox-spacing, var(--osdk-surface-spacing)) * 2);
   border-radius: var( --osdk-combobox-border-radius, var(--osdk-surface-border-radius) );
   cursor: pointer;
@@ -1106,6 +1168,18 @@
     opacity: var(--osdk-disabled-opacity, 0.5);
   }
 }
+.osdkComboboxItemIndicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: calc(var(--osdk-combobox-spacing, var(--osdk-surface-spacing)) * 4);
+  flex-shrink: 0;
+  color: var(--osdk-combobox-item-color-selected, var(--osdk-intent-primary-rest));
+  visibility: hidden;
+  &[data-selected] {
+    visibility: visible;
+  }
+}
 .osdkComboboxChips {
   display: flex;
   flex-wrap: wrap;
@@ -1175,19 +1249,19 @@
   flex-direction: column;
   gap: var(--osdk-filter-multiselect-gap);
 }
-.inputRow {
-  display: flex;
-  align-items: center;
-  gap: var(--osdk-filter-multiselect-inputRow-gap);
-}
-.clearButton {
-  flex-shrink: 0;
+.itemLabel {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .itemCount {
   font-family: var(--osdk-filter-multiselect-count-font-family);
   font-size: var(--osdk-filter-multiselect-count-font-size);
   font-variant-numeric: tabular-nums;
   color: var(--osdk-filter-multiselect-count-color);
+  flex-shrink: 0;
 }
 
 /* src/filter-list/base/inputs/NullValueWrapper.module.css */
@@ -1266,115 +1340,6 @@
   }
 }
 
-/* src/base-components/select/Select.module.css */
-.osdkSelectTrigger {
-  display: inline-flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--osdk-select-spacing, var(--osdk-surface-spacing));
-  width: 100%;
-  min-height: var(--osdk-select-min-height, 30px);
-  padding: calc(var(--osdk-select-spacing, var(--osdk-surface-spacing)) * 1.5) calc(var(--osdk-select-spacing, var(--osdk-surface-spacing)) * 2.5);
-  cursor: pointer;
-  border-radius: var( --osdk-select-border-radius, var(--osdk-surface-border-radius) );
-  border: var(--osdk-select-border-width, var(--osdk-surface-border-width)) solid var(--osdk-select-border-color, var(--osdk-surface-border-color-default));
-  background-color: var( --osdk-select-trigger-bg, var(--osdk-surface-background-color-default-rest) );
-  color: var( --osdk-select-trigger-color, var(--osdk-typography-color-default-rest) );
-  font-family: var( --osdk-select-font-family, var(--osdk-typography-family-default) );
-  font-size: var( --osdk-select-font-size, var(--osdk-typography-size-body-medium) );
-  line-height: var( --osdk-select-line-height, var(--osdk-typography-line-height-default) );
-  transition: background-color var( --osdk-select-transition-duration, var(--osdk-emphasis-transition-duration) ) var(--osdk-select-transition-ease, var(--osdk-emphasis-ease-default)), border-color var( --osdk-select-transition-duration, var(--osdk-emphasis-transition-duration) ) var(--osdk-select-transition-ease, var(--osdk-emphasis-ease-default));
-  &:hover {
-    background-color: var( --osdk-select-trigger-bg-hover, var(--osdk-surface-background-color-default-hover) );
-  }
-  &:active {
-    background-color: var( --osdk-select-trigger-bg-active, var(--osdk-surface-background-color-default-active) );
-  }
-  &:focus-visible {
-    outline: var(--osdk-select-focus-width, var(--osdk-emphasis-focus-width)) solid var(--osdk-select-focus-color, var(--osdk-emphasis-focus-color));
-    outline-offset: var( --osdk-select-focus-offset, var(--osdk-emphasis-focus-offset) );
-  }
-  &[data-disabled] {
-    cursor: not-allowed;
-    opacity: var(--osdk-disabled-opacity, 0.5);
-  }
-  &[data-popup-open] {
-    border-color: var( --osdk-select-border-color-active, var(--osdk-intent-primary-rest) );
-  }
-}
-.osdkSelectValueContainer {
-  flex: 1;
-  display: grid;
-  min-width: 0;
-  & > * {
-    grid-area: 1 / 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-}
-.osdkSelectValue {
-  text-align: left;
-}
-.osdkSelectPlaceholder {
-  text-align: left;
-  color: var( --osdk-select-placeholder-color, var(--osdk-typography-color-muted) );
-  pointer-events: none;
-}
-.osdkSelectValue:not([data-placeholder]) ~ .osdkSelectPlaceholder {
-  display: none;
-}
-.osdkSelectIcon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--osdk-select-icon-color, var(--osdk-iconography-color-muted));
-  flex-shrink: 0;
-  transition: transform var( --osdk-select-transition-duration, var(--osdk-emphasis-transition-duration) ) var(--osdk-select-transition-ease, var(--osdk-emphasis-ease-default));
-  [data-popup-open] > & {
-    transform: rotate(180deg);
-  }
-}
-.osdkSelectPositioner {
-  z-index: var(--osdk-select-z-index, var(--osdk-surface-z-index-3));
-}
-.osdkSelectPopup {
-  display: flex;
-  flex-direction: column;
-  min-width: var(--anchor-width);
-  max-height: var(--available-height);
-  overflow-y: auto;
-  padding: calc(var(--osdk-select-spacing, var(--osdk-surface-spacing)) * 1.5);
-  border-radius: var( --osdk-select-border-radius, var(--osdk-surface-border-radius) );
-  border: var(--osdk-select-border-width, var(--osdk-surface-border-width)) solid var(--osdk-select-border-color, var(--osdk-surface-border-color-default));
-  background-color: var( --osdk-select-popup-bg, var(--osdk-surface-background-color-default-rest) );
-  box-shadow: var(--osdk-select-popup-shadow, var(--osdk-surface-shadow-2));
-}
-.osdkSelectItem {
-  display: flex;
-  align-items: center;
-  padding: calc(var(--osdk-select-spacing, var(--osdk-surface-spacing)) * 1.5) calc(var(--osdk-select-spacing, var(--osdk-surface-spacing)) * 2);
-  border-radius: var( --osdk-select-border-radius, var(--osdk-surface-border-radius) );
-  cursor: pointer;
-  font-family: var( --osdk-select-font-family, var(--osdk-typography-family-default) );
-  font-size: var( --osdk-select-font-size, var(--osdk-typography-size-body-medium) );
-  line-height: var( --osdk-select-line-height, var(--osdk-typography-line-height-default) );
-  color: var( --osdk-select-item-color, var(--osdk-typography-color-default-rest) );
-  transition: background-color var( --osdk-select-transition-duration, var(--osdk-emphasis-transition-duration) ) var(--osdk-select-transition-ease, var(--osdk-emphasis-ease-default));
-  &[data-highlighted] {
-    background-color: var( --osdk-select-item-bg-highlighted, var(--osdk-surface-background-color-default-hover) );
-    outline: none;
-  }
-  &[data-selected] {
-    background-color: var( --osdk-select-item-bg-selected, var(--osdk-surface-layer-primary) );
-    color: var( --osdk-select-item-color-selected, var(--osdk-intent-primary-rest) );
-  }
-  &[data-disabled] {
-    cursor: not-allowed;
-    opacity: var(--osdk-disabled-opacity, 0.5);
-  }
-}
-
 /* src/filter-list/base/inputs/SingleSelectInput.module.css */
 .singleSelect {
   display: flex;
@@ -1387,27 +1352,19 @@
   position: relative;
 }
 .clearButton {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--osdk-filter-select-clear-padding);
-  border: none;
-  background: transparent;
-  cursor: pointer;
-  color: var(--osdk-filter-select-clear-color);
-  border-radius: var(--osdk-filter-select-clear-border-radius);
-  transition: color var(--osdk-filter-select-clear-transition), background-color var(--osdk-filter-select-clear-transition);
-  &:hover {
-    color: var(--osdk-filter-select-clear-color-hover);
-    background-color: var(--osdk-filter-select-clear-bg-hover);
-  }
-  &:focus-visible {
-    outline: var(--osdk-filter-input-focus-outline-width) solid var(--osdk-filter-input-focus-outline-color);
-    outline-offset: var(--osdk-filter-input-focus-outline-offset);
-  }
-  @media (prefers-reduced-motion: reduce) {
-    transition: none;
-  }
+  flex-shrink: 0;
+}
+.itemLabel {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.itemCount {
+  font-variant-numeric: tabular-nums;
+  color: var(--osdk-typography-color-muted);
+  flex-shrink: 0;
 }
 
 /* src/filter-list/base/inputs/TextTagsInput.module.css */
@@ -1488,9 +1445,9 @@
   cursor: pointer;
   font-family: var(--osdk-filter-item-exclude-dropdown-font-family);
   font-size: var(--osdk-filter-item-exclude-dropdown-font-size);
-  color: var(--osdk-filter-item-exclude-dropdown-color);
-  padding: calc(var(--osdk-surface-spacing) * 0.5) calc(var(--osdk-surface-spacing) * 1);
-  border-radius: var(--osdk-filter-item-header-action-border-radius);
+  color: var(--osdk-filter-item-exclude-dropdown-trigger-color);
+  padding: calc(var(--osdk-surface-spacing) * 1) calc(var(--osdk-surface-spacing) * 1);
+  border-radius: var(--osdk-filter-item-exclude-dropdown-trigger-border-radius);
   &:hover {
     background: var(--osdk-filter-item-header-action-bg-hover);
   }
@@ -1936,40 +1893,6 @@
   font-style: italic;
 }
 
-/* src/base-components/search-bar/SearchBar.module.css */
-.searchBar {
-  display: flex;
-  align-items: center;
-  gap: calc(var(--osdk-surface-spacing) * 3);
-  padding: var(--osdk-surface-spacing) calc(var(--osdk-surface-spacing) * 3);
-  border: var(--osdk-surface-border);
-  border-radius: var(--osdk-surface-border-radius);
-  &:focus-within {
-    outline: var(--osdk-focus-outline);
-    outline-offset: calc(-1 * var(--osdk-focus-visible-outline-offset));
-  }
-}
-.searchIcon {
-  width: var(--osdk-iconography-size-small);
-  height: var(--osdk-iconography-size-small);
-  color: var(--osdk-typography-color-muted);
-  pointer-events: none;
-  flex-shrink: 0;
-}
-.searchInput {
-  border: none;
-  width: 100%;
-  padding: var(--osdk-surface-spacing) 0;
-  font-size: var(--osdk-typography-size-body-medium);
-  background: transparent;
-  &:focus {
-    outline: none;
-  }
-  &::placeholder {
-    color: var(--osdk-typography-color-muted);
-  }
-}
-
 /* src/object-table/ColumnConfigDialog.module.css */
 .title {
   display: flex;
@@ -2100,8 +2023,7 @@
   transform: rotate(180deg);
 }
 .checkbox {
-  width: var(--osdk-checkbox-icon-size);
-  height: var(--osdk-checkbox-icon-size);
+  flex-shrink: 0;
 }
 .propertyList {
   display: flex;
@@ -2250,60 +2172,6 @@
   flex: 1;
   text-align: left;
 }
-.menuPositioner {
-  z-index: var(--osdk-surface-z-index-2);
-}
-.dropdownMenu {
-  background-color: var(--osdk-surface-background-color-default-rest);
-  border: var(--osdk-surface-border);
-  border-radius: var(--osdk-surface-border-radius);
-  box-shadow: var(--osdk-surface-shadow-2);
-  max-height: calc(var(--osdk-dialog-max-height) * 0.5);
-  overflow-y: auto;
-  width: var(--anchor-width);
-  &:focus {
-    outline: none;
-  }
-  &:focus-visible {
-    outline: var(--osdk-focus-outline);
-    outline-offset: var(--osdk-focus-visible-outline-offset);
-  }
-}
-.menuSearchContainer {
-  border: none;
-  border-bottom: var(--osdk-surface-border);
-  border-radius: 0;
-  position: sticky;
-  top: 0;
-  background-color: var(--osdk-surface-background-color-default-rest);
-}
-.menuEmptyState {
-  padding: calc(var(--osdk-surface-spacing) * 3);
-  text-align: center;
-  color: var(--osdk-typography-color-muted);
-  font-size: var(--osdk-typography-size-body-medium);
-}
-.dropdownItem {
-  display: block;
-  width: 100%;
-  text-align: left;
-  padding: calc(var(--osdk-surface-spacing) * 2) calc(var(--osdk-surface-spacing) * 3);
-  background: none;
-  border: none;
-  cursor: pointer;
-  font-size: var(--osdk-typography-size-body-medium);
-  color: var(--osdk-typography-color-default-rest);
-  &:hover {
-    background-color: var(--osdk-surface-background-color-default-hover);
-  }
-  &:focus {
-    outline: none;
-  }
-  &:focus-visible {
-    outline: var(--osdk-focus-outline);
-    outline-offset: calc(-1 * var(--osdk-focus-visible-outline-offset));
-  }
-}
 .truncate {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -3269,6 +3137,177 @@
   height: var(--osdk-datetime-calendar-fallback-height);
 }
 
+/* src/base-components/select/Select.module.css */
+.osdkSelectTrigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--osdk-select-spacing, var(--osdk-surface-spacing));
+  width: 100%;
+  min-height: var(--osdk-select-min-height, 30px);
+  padding: calc(var(--osdk-select-spacing, var(--osdk-surface-spacing)) * 1.5) calc(var(--osdk-select-spacing, var(--osdk-surface-spacing)) * 2.5);
+  cursor: pointer;
+  border-radius: var( --osdk-select-border-radius, var(--osdk-surface-border-radius) );
+  border: var(--osdk-select-border-width, var(--osdk-surface-border-width)) solid var(--osdk-select-border-color, var(--osdk-surface-border-color-default));
+  background-color: var( --osdk-select-trigger-bg, var(--osdk-surface-background-color-default-rest) );
+  color: var( --osdk-select-trigger-color, var(--osdk-typography-color-default-rest) );
+  font-family: var( --osdk-select-font-family, var(--osdk-typography-family-default) );
+  font-size: var( --osdk-select-font-size, var(--osdk-typography-size-body-medium) );
+  line-height: var( --osdk-select-line-height, var(--osdk-typography-line-height-default) );
+  transition: background-color var( --osdk-select-transition-duration, var(--osdk-emphasis-transition-duration) ) var(--osdk-select-transition-ease, var(--osdk-emphasis-ease-default)), border-color var( --osdk-select-transition-duration, var(--osdk-emphasis-transition-duration) ) var(--osdk-select-transition-ease, var(--osdk-emphasis-ease-default));
+  &:hover {
+    background-color: var( --osdk-select-trigger-bg-hover, var(--osdk-surface-background-color-default-hover) );
+  }
+  &:active {
+    background-color: var( --osdk-select-trigger-bg-active, var(--osdk-surface-background-color-default-active) );
+  }
+  &:focus-visible {
+    outline: var(--osdk-select-focus-width, var(--osdk-emphasis-focus-width)) solid var(--osdk-select-focus-color, var(--osdk-emphasis-focus-color));
+    outline-offset: var( --osdk-select-focus-offset, var(--osdk-emphasis-focus-offset) );
+  }
+  &[data-disabled] {
+    cursor: not-allowed;
+    opacity: var(--osdk-disabled-opacity, 0.5);
+  }
+  &[data-popup-open] {
+    border-color: var( --osdk-select-border-color-active, var(--osdk-intent-primary-rest) );
+  }
+}
+.osdkSelectValueContainer {
+  flex: 1;
+  display: grid;
+  min-width: 0;
+  & > * {
+    grid-area: 1 / 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+.osdkSelectValue {
+  text-align: left;
+}
+.osdkSelectPlaceholder {
+  text-align: left;
+  color: var( --osdk-select-placeholder-color, var(--osdk-typography-color-muted) );
+  pointer-events: none;
+}
+.osdkSelectValue:not([data-placeholder]) ~ .osdkSelectPlaceholder {
+  display: none;
+}
+.osdkSelectIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--osdk-select-icon-color, var(--osdk-iconography-color-muted));
+  flex-shrink: 0;
+  transition: transform var( --osdk-select-transition-duration, var(--osdk-emphasis-transition-duration) ) var(--osdk-select-transition-ease, var(--osdk-emphasis-ease-default));
+  [data-popup-open] > & {
+    transform: rotate(180deg);
+  }
+}
+.osdkSelectPositioner {
+  z-index: var(--osdk-select-z-index, var(--osdk-surface-z-index-3));
+}
+.osdkSelectPopup {
+  display: flex;
+  flex-direction: column;
+  min-width: var(--anchor-width);
+  max-height: var(--available-height);
+  overflow-y: auto;
+  padding: calc(var(--osdk-select-spacing, var(--osdk-surface-spacing)) * 1.5);
+  border-radius: var( --osdk-select-border-radius, var(--osdk-surface-border-radius) );
+  border: var(--osdk-select-border-width, var(--osdk-surface-border-width)) solid var(--osdk-select-border-color, var(--osdk-surface-border-color-default));
+  background-color: var( --osdk-select-popup-bg, var(--osdk-surface-background-color-default-rest) );
+  box-shadow: var(--osdk-select-popup-shadow, var(--osdk-surface-shadow-2));
+}
+.osdkSelectItem {
+  display: flex;
+  align-items: center;
+  padding: calc(var(--osdk-select-spacing, var(--osdk-surface-spacing)) * 1.5) calc(var(--osdk-select-spacing, var(--osdk-surface-spacing)) * 2);
+  border-radius: var( --osdk-select-border-radius, var(--osdk-surface-border-radius) );
+  cursor: pointer;
+  font-family: var( --osdk-select-font-family, var(--osdk-typography-family-default) );
+  font-size: var( --osdk-select-font-size, var(--osdk-typography-size-body-medium) );
+  line-height: var( --osdk-select-line-height, var(--osdk-typography-line-height-default) );
+  color: var( --osdk-select-item-color, var(--osdk-typography-color-default-rest) );
+  transition: background-color var( --osdk-select-transition-duration, var(--osdk-emphasis-transition-duration) ) var(--osdk-select-transition-ease, var(--osdk-emphasis-ease-default));
+  &[data-highlighted] {
+    background-color: var( --osdk-select-item-bg-highlighted, var(--osdk-surface-background-color-default-hover) );
+    outline: none;
+  }
+  &[data-selected] {
+    background-color: var( --osdk-select-item-bg-selected, var(--osdk-surface-layer-primary) );
+    color: var( --osdk-select-item-color-selected, var(--osdk-intent-primary-rest) );
+  }
+  &[data-disabled] {
+    cursor: not-allowed;
+    opacity: var(--osdk-disabled-opacity, 0.5);
+  }
+}
+
+/* src/action-form/fields/NumberInputField.module.css */
+.osdkNumberInputWrapper {
+  display: flex;
+  border-radius: var(--osdk-input-border-radius);
+  border: var(--osdk-input-border-width) solid var(--osdk-input-border-color);
+  background-color: var(--osdk-input-bg);
+  transition: background-color var(--osdk-input-transition-duration) var(--osdk-input-transition-ease), border-color var(--osdk-input-transition-duration) var(--osdk-input-transition-ease);
+  &:hover {
+    background-color: var(--osdk-input-bg-hover);
+  }
+  &:focus-within {
+    outline: var(--osdk-input-focus-width) solid var(--osdk-input-focus-color);
+    outline-offset: var(--osdk-input-focus-offset);
+    border-color: var(--osdk-input-border-color-focus);
+  }
+}
+.osdkNumberInputField {
+  flex: 1;
+  min-width: 0;
+  min-height: var(--osdk-input-min-height);
+  padding: var(--osdk-input-padding);
+  border: none;
+  border-radius: var(--osdk-input-border-radius) 0 0 var(--osdk-input-border-radius);
+  background: transparent;
+  color: var(--osdk-input-color);
+  font-family: var(--osdk-input-font-family);
+  font-size: var(--osdk-input-font-size);
+  line-height: var( --osdk-input-line-height, var(--osdk-typography-line-height-default) );
+  &::placeholder {
+    color: var(--osdk-input-placeholder-color);
+  }
+  &:focus-visible {
+    outline: none;
+  }
+}
+.osdkNumberInputStepper {
+  display: flex;
+  flex-direction: column;
+  border-left: var(--osdk-input-border-width) solid var(--osdk-input-border-color);
+}
+.osdkNumberInputStepButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  padding: 0 calc(var(--osdk-surface-spacing) * 1.5);
+  border: none;
+  background: transparent;
+  color: var(--osdk-input-color);
+  cursor: pointer;
+  line-height: 0;
+  &:hover {
+    background-color: var(--osdk-input-bg-hover);
+  }
+  &:active {
+    background-color: var(--osdk-input-border-color);
+  }
+  & + & {
+    border-top: var(--osdk-input-border-width) solid var(--osdk-input-border-color);
+  }
+}
+
 /* src/action-form/fields/RadioButtonsField.module.css */
 .osdkRadioGroup {
   display: flex;