@osdk/react-components 0.2.0-beta.14 → 0.2.0-beta.16

package/build/cjs/public/experimental.css

@@ -8,13 +8,30 @@
   padding: var(--osdk-filter-list-padding);
   gap: var(--osdk-filter-list-gap);
 }
+.contentWrapper {
+  display: grid;
+  grid-template-rows: 1fr;
+  transition: grid-template-rows var(--osdk-filter-list-collapse-transition);
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+}
+.contentWrapper[data-collapsed=true] {
+  grid-template-rows: 0fr;
+}
+.contentInner {
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  gap: var(--osdk-filter-list-gap);
+}
 .addButtonContainer {
   display: flex;
   justify-content: center;
   position: sticky;
   bottom: 0;
   padding-top: var(--osdk-filter-list-addButton-padding-top);
-  background: var(--osdk-filter-list-addButton-container-bg, var(--osdk-filter-list-bg));
+  background: var(--osdk-filter-list-addButton-container-bg);
 }
 .addButtonContainer > * {
   flex: 1;
@@ -66,30 +83,30 @@
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  gap: var(--osdk-filter-error-gap, 8px);
-  padding: var(--osdk-filter-error-padding, 8px);
-  border-radius: var(--osdk-filter-error-border-radius, 4px);
-  background-color: var(--osdk-filter-error-bg, color-mix(in srgb, var(--osdk-intent-danger-rest, #c23030) 5%, transparent));
+  gap: var(--osdk-error-boundary-gap, 8px);
+  padding: var(--osdk-error-boundary-padding, 8px);
+  border-radius: var(--osdk-error-boundary-border-radius, 4px);
+  background-color: var(--osdk-error-boundary-bg, color-mix(in srgb, var(--osdk-intent-danger-rest, #c23030) 5%, transparent));
 }
 .errorMessage {
   margin: 0;
-  font-size: var(--osdk-filter-error-font-size, 13px);
-  color: var(--osdk-filter-error-text-color, var(--osdk-intent-danger-rest, #c23030));
+  font-size: var(--osdk-error-boundary-font-size, 13px);
+  color: var(--osdk-error-boundary-text-color, var(--osdk-intent-danger-rest, #c23030));
 }
 .retryButton {
-  padding: var(--osdk-filter-error-button-padding, 4px 8px);
-  border: 1px solid var(--osdk-filter-error-button-border-color, currentColor);
-  border-radius: var(--osdk-filter-error-button-border-radius, 3px);
+  padding: var(--osdk-error-boundary-button-padding, 4px 8px);
+  border: var(--osdk-surface-border-width, 1px) solid var(--osdk-error-boundary-button-border-color, currentColor);
+  border-radius: var(--osdk-error-boundary-button-border-radius, 3px);
   background: transparent;
-  font-size: var(--osdk-filter-error-button-font-size, 12px);
-  color: var(--osdk-filter-error-button-color, inherit);
+  font-size: var(--osdk-error-boundary-button-font-size, 12px);
+  color: var(--osdk-error-boundary-button-color, inherit);
   cursor: pointer;
-  transition: background-color 150ms ease;
+  transition: background-color var(--osdk-filter-input-transition, 150ms ease);
   &:hover {
-    background-color: var(--osdk-filter-error-button-hover-bg, color-mix(in srgb, currentColor 5%, transparent));
+    background-color: var(--osdk-error-boundary-button-hover-bg, color-mix(in srgb, currentColor 5%, transparent));
   }
   &:focus-visible {
-    outline: var(--osdk-filter-input-focus-outline-width, 2px) solid var(--osdk-filter-input-focus-outline-color, currentColor);
+    outline: var(--osdk-filter-input-focus-outline-width, 2px) solid var(--osdk-filter-input-focus-outline-color, rgba(45, 114, 210, 0.6));
     outline-offset: var(--osdk-filter-input-focus-outline-offset, 2px);
   }
   @media (prefers-reduced-motion: reduce) {
@@ -97,6 +114,364 @@
   }
 }
 
+/* src/filter-list/base/FilterListItem.module.css */
+.filterItem {
+  display: flex;
+  flex-direction: column;
+  gap: var(--osdk-filter-item-gap);
+}
+.itemHeader {
+  display: flex;
+  align-items: center;
+}
+.itemLabel {
+  flex: 1;
+  font-family: var(--osdk-filter-item-label-font-family);
+  font-size: var(--osdk-filter-item-label-font-size);
+  font-weight: var(--osdk-filter-item-label-font-weight);
+  color: var(--osdk-filter-item-label-color);
+}
+.itemContent {
+  display: flex;
+  flex-direction: column;
+}
+.dragHandle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--osdk-filter-item-drag-handle-padding);
+  margin-right: var(--osdk-surface-spacing);
+  border: none;
+  background: var(--osdk-filter-item-drag-handle-bg);
+  cursor: var(--osdk-drag-handle-cursor);
+  border-radius: var(--osdk-filter-item-drag-handle-border-radius);
+  color: var(--osdk-filter-item-drag-handle-color);
+  touch-action: none;
+  &:hover {
+    color: var(--osdk-filter-item-drag-handle-color-hover);
+    background: var(--osdk-filter-item-drag-handle-bg-hover);
+  }
+  &:active {
+    cursor: var(--osdk-drag-handle-cursor-active);
+  }
+  &:focus-visible {
+    outline: var(--osdk-filter-input-focus-outline-width) solid var(--osdk-filter-item-drag-handle-focus-outline-color);
+    outline-offset: var(--osdk-filter-input-focus-outline-offset);
+  }
+}
+.excludeToggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--osdk-filter-item-exclude-toggle-padding);
+  margin-left: auto;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  border-radius: var(--osdk-filter-item-exclude-toggle-border-radius);
+  color: var(--osdk-filter-item-exclude-toggle-color);
+  &:hover {
+    color: var(--osdk-filter-item-exclude-toggle-color-hover);
+    background: var(--osdk-filter-item-exclude-toggle-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);
+  }
+}
+.excludeToggle[aria-pressed=true] {
+  color: var(--osdk-filter-item-exclude-toggle-color-active);
+}
+.removeButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--osdk-filter-item-exclude-toggle-padding);
+  margin-left: var(--osdk-surface-spacing);
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  border-radius: var(--osdk-filter-item-exclude-toggle-border-radius);
+  color: var(--osdk-filter-item-exclude-toggle-color);
+  &:hover {
+    color: var(--osdk-filter-item-exclude-toggle-color-hover);
+    background: var(--osdk-filter-item-exclude-toggle-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);
+  }
+}
+.filterItem[data-excluding] {
+  border-left: var(--osdk-filter-item-exclude-border-width) solid var(--osdk-filter-item-exclude-border-color);
+  padding-left: var(--osdk-filter-item-gap);
+}
+.dragging {
+  opacity: var(--osdk-filter-item-dragging-opacity);
+}
+
+/* src/filter-list/base/FilterListHeader.module.css */
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: var(--osdk-filter-header-padding-bottom);
+  border-bottom: var(--osdk-filter-header-border-bottom);
+}
+.titleContainer {
+  display: flex;
+  align-items: center;
+  gap: var(--osdk-filter-header-titleContainer-gap);
+}
+.title {
+  font-family: var(--osdk-filter-header-font-family);
+  font-size: var(--osdk-filter-header-font-size);
+  font-weight: var(--osdk-filter-header-font-weight);
+  color: var(--osdk-filter-header-color);
+  margin: 0;
+}
+.titleIcon {
+  color: var(--osdk-filter-header-icon-color);
+  display: flex;
+  align-items: center;
+}
+.activeCount {
+  font-family: var(--osdk-filter-header-font-family);
+  font-size: var(--osdk-filter-header-activeCount-font-size);
+  color: var(--osdk-filter-header-activeCount-color);
+  font-variant-numeric: tabular-nums;
+}
+.collapseButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--osdk-filter-header-button-padding);
+  border: none;
+  background: var(--osdk-filter-header-button-bg);
+  cursor: pointer;
+  border-radius: var(--osdk-filter-header-button-border-radius);
+  transition: background-color var(--osdk-filter-header-button-transition);
+  &:hover {
+    background: var(--osdk-filter-header-button-bg-hover);
+  }
+  &:active {
+    background: var(--osdk-filter-header-button-bg-active);
+  }
+  &: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;
+  }
+}
+.collapseIcon {
+  display: block;
+  width: var(--osdk-filter-header-collapse-icon-size);
+  height: var(--osdk-filter-header-collapse-icon-size);
+  border-left: var(--osdk-filter-header-collapse-icon-border-width) solid var(--osdk-filter-header-collapse-icon-color);
+  border-bottom: var(--osdk-filter-header-collapse-icon-border-width) solid var(--osdk-filter-header-collapse-icon-color);
+  transform: rotate(-45deg);
+  transition: transform var(--osdk-filter-header-button-transition);
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+}
+.collapsed {
+  transform: rotate(-135deg);
+}
+.headerContentWrapper {
+  display: grid;
+  grid-template-columns: 1fr;
+  overflow: hidden;
+  transition: grid-template-columns var(--osdk-filter-list-collapse-transition);
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+}
+.headerContentWrapper[data-collapsed=true] {
+  grid-template-columns: 0fr;
+}
+.headerContentInner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex: 1;
+  overflow: hidden;
+  min-width: 0;
+}
+.resetButton {
+  font-family: var(--osdk-filter-header-font-family);
+  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;
+  cursor: pointer;
+  padding: var(--osdk-filter-header-reset-padding);
+  border-radius: var(--osdk-filter-header-button-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);
+    cursor: not-allowed;
+  }
+  &: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;
+  }
+}
+
+/* src/filter-list/base/inputs/ContainsTextInput.module.css */
+.textInput {
+  position: relative;
+}
+.inputGroup {
+  display: flex;
+  align-items: center;
+  background: var(--osdk-filter-input-bg);
+  border: var(--osdk-filter-input-border);
+  border-radius: var(--osdk-filter-input-border-radius);
+  padding: var(--osdk-filter-input-padding);
+  gap: var(--osdk-filter-input-gap);
+  transition: border-color var(--osdk-filter-input-transition);
+  &:focus-within {
+    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);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+}
+.searchIcon {
+  color: var(--osdk-filter-input-icon-color);
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+}
+.input {
+  flex: 1;
+  border: none;
+  background: transparent;
+  font-family: var(--osdk-filter-input-font-family);
+  font-size: var(--osdk-filter-input-font-size);
+  color: var(--osdk-filter-input-color);
+  outline: none;
+  &::placeholder {
+    color: var(--osdk-filter-input-placeholder-color);
+  }
+}
+.clearButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--osdk-filter-input-clear-padding);
+  border: none;
+  background: var(--osdk-filter-input-clear-bg);
+  color: var(--osdk-filter-input-icon-color);
+  cursor: pointer;
+  border-radius: var(--osdk-filter-input-clear-border-radius);
+  transition: background-color var(--osdk-filter-input-transition);
+  &:hover {
+    background: var(--osdk-filter-input-clear-bg-hover);
+  }
+  &:active {
+    background: var(--osdk-filter-input-clear-bg-active);
+  }
+  &: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;
+  }
+}
+
+/* src/base-components/switch/Switch.module.css */
+.osdkSwitchRoot {
+  --osdk-switch-track-width: var(--osdk-switch-track-width-override, 28px);
+  --osdk-switch-track-height: var(--osdk-switch-track-height-override, 16px);
+  --osdk-switch-thumb-size: var(--osdk-switch-thumb-size-override, 12px);
+  --osdk-switch-thumb-offset: var(--osdk-switch-thumb-offset-override, 2px);
+  display: inline-flex;
+  align-items: center;
+  width: var(--osdk-switch-track-width);
+  height: var(--osdk-switch-track-height);
+  padding: 0;
+  box-sizing: border-box;
+  cursor: pointer;
+  border-radius: var(--osdk-switch-border-radius, var(--osdk-surface-border-radius));
+  position: relative;
+  border: none;
+  transition: background-color var(--osdk-switch-transition-duration, var(--osdk-emphasis-transition-duration)) var(--osdk-switch-transition-ease, var(--osdk-emphasis-ease-default));
+  &[data-unchecked] {
+    background-color: var(--osdk-switch-track-bg, var(--osdk-intent-default-rest));
+    &:hover {
+      background-color: var(--osdk-switch-track-bg-hover, var(--osdk-intent-default-hover));
+    }
+    &:active {
+      background-color: var(--osdk-switch-track-bg-active, var(--osdk-intent-default-active));
+    }
+  }
+  &[data-checked] {
+    background-color: var(--osdk-switch-track-bg-checked, var(--osdk-intent-primary-rest));
+    &:hover {
+      background-color: var(--osdk-switch-track-bg-checked-hover, var(--osdk-intent-primary-hover));
+    }
+    &:active {
+      background-color: var(--osdk-switch-track-bg-checked-active, var(--osdk-intent-primary-active));
+    }
+  }
+  &[data-disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+  &:focus-visible {
+    outline: var(--osdk-switch-focus-width, var(--osdk-emphasis-focus-width)) solid var(--osdk-switch-focus-color, var(--osdk-emphasis-focus-color));
+    outline-offset: var(--osdk-switch-focus-offset, var(--osdk-emphasis-focus-offset));
+  }
+}
+.osdkSwitchThumb {
+  display: block;
+  width: var(--osdk-switch-thumb-size);
+  height: var(--osdk-switch-thumb-size);
+  background-color: var(--osdk-switch-thumb-bg, var(--osdk-palette-white));
+  border-radius: 50%;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  transition: left var(--osdk-switch-transition-duration, var(--osdk-emphasis-transition-duration)) var(--osdk-switch-transition-ease, var(--osdk-emphasis-ease-default));
+  &[data-unchecked] {
+    left: var(--osdk-switch-thumb-offset);
+  }
+  &[data-checked] {
+    left: calc(var(--osdk-switch-track-width) - var(--osdk-switch-thumb-size) - var(--osdk-switch-thumb-offset));
+  }
+}
+
+/* src/filter-list/base/inputs/ToggleInput.module.css */
+.toggleInput {
+  display: flex;
+  align-items: center;
+}
+.toggleLabel {
+  display: flex;
+  align-items: center;
+  gap: var(--osdk-filter-toggle-label-gap);
+  cursor: pointer;
+}
+.labelText {
+  font-family: var(--osdk-filter-toggle-label-font-family);
+  font-size: var(--osdk-filter-toggle-label-font-size);
+  line-height: var(--osdk-filter-toggle-label-line-height);
+  color: var(--osdk-filter-toggle-label-color);
+}
+
 /* src/base-components/checkbox/Checkbox.module.css */
 .osdkCheckboxRoot {
   display: flex;
@@ -128,9 +503,6 @@
       background-color: var(--osdk-checkbox-bg-checked-active);
     }
   }
-  &:focus {
-    outline: none;
-  }
   &:focus-visible {
     outline: var(--osdk-focus-outline);
     outline-offset: calc(-1 * var(--osdk-focus-visible-outline-offset));
@@ -157,6 +529,11 @@
 .checkboxRow {
   padding: var(--osdk-filter-checkbox-row-padding);
 }
+.checkboxRow[data-select-all] {
+  border-bottom: var(--osdk-filter-checkbox-selectall-border-bottom);
+  padding-bottom: calc(var(--osdk-filter-checkbox-row-padding) + 2px);
+  margin-bottom: 2px;
+}
 .checkboxLabel {
   display: flex;
   align-items: center;
@@ -172,20 +549,27 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.colorDot {
+  width: var(--osdk-filter-checkbox-color-dot-size);
+  height: var(--osdk-filter-checkbox-color-dot-size);
+  border-radius: 50%;
+  flex-shrink: 0;
+}
 
 /* src/filter-list/base/inputs/shared.module.css */
 .loadingMessage,
 .errorMessage,
 .emptyMessage {
-  font-size: var(--osdk-typography-size-body-small);
-  padding: var(--osdk-surface-spacing);
+  font-family: var(--osdk-filter-message-font-family);
+  font-size: var(--osdk-filter-message-font-size);
+  padding: var(--osdk-filter-message-padding);
 }
 .loadingMessage,
 .emptyMessage {
-  color: var(--osdk-typography-color-muted);
+  color: var(--osdk-filter-message-color-muted);
 }
 .errorMessage {
-  color: var(--osdk-intent-danger-rest);
+  color: var(--osdk-filter-message-color-danger);
 }
 .tagContainer {
   display: flex;
@@ -228,110 +612,46 @@
   }
 }
 
-/* src/filter-list/base/inputs/ContainsTextInput.module.css */
-.textInput {
-  position: relative;
-}
-.inputGroup {
-  display: flex;
-  align-items: center;
-  background: var(--osdk-filter-input-bg);
-  border: var(--osdk-filter-input-border);
-  border-radius: var(--osdk-filter-input-border-radius);
-  padding: var(--osdk-filter-input-padding);
-  gap: var(--osdk-filter-input-gap);
-  transition: border-color var(--osdk-filter-input-transition);
-  &:focus-within {
-    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);
-  }
-  @media (prefers-reduced-motion: reduce) {
-    transition: none;
-  }
-}
-.searchIcon {
-  color: var(--osdk-filter-input-icon-color);
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-}
-.input {
-  flex: 1;
-  border: none;
-  background: transparent;
-  font-family: var(--osdk-filter-input-font-family);
-  font-size: var(--osdk-filter-input-font-size);
-  color: var(--osdk-filter-input-color);
-  outline: none;
-  &::placeholder {
-    color: var(--osdk-filter-input-placeholder-color);
-  }
-}
-.clearButton {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--osdk-filter-input-clear-padding);
-  border: none;
-  background: var(--osdk-filter-input-clear-bg);
-  color: var(--osdk-filter-input-icon-color);
-  cursor: pointer;
-  border-radius: var(--osdk-filter-input-clear-border-radius);
-  transition: background-color var(--osdk-filter-input-transition);
-  &:hover {
-    background: var(--osdk-filter-input-clear-bg-hover);
-  }
-  &:active {
-    background: var(--osdk-filter-input-clear-bg-active);
-  }
-  &: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;
-  }
-}
-
 /* src/filter-list/base/inputs/RangeInput.module.css */
 .rangeInput {
   display: flex;
   flex-direction: column;
-  gap: var(--osdk-filter-range-gap, calc(var(--osdk-surface-spacing) * 2));
+  gap: var(--osdk-filter-range-gap);
 }
 .histogramContainer {
   display: flex;
   align-items: flex-end;
-  height: var(--osdk-filter-range-histogram-height, 60px);
-  gap: var(--osdk-filter-range-histogram-bar-gap, 2px);
+  height: var(--osdk-filter-range-histogram-height);
+  gap: var(--osdk-filter-range-histogram-bar-gap);
 }
 .histogramBar {
   flex: 1;
-  background: var(--osdk-filter-range-histogram-bar-color, var(--osdk-custom-color-gray-3));
-  min-width: var(--osdk-filter-range-histogram-bar-min-width, 4px);
-  transition: background-color var(--osdk-emphasis-transition-duration) var(--osdk-emphasis-ease-default);
+  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, var(--osdk-intent-primary-rest));
+  background: var(--osdk-filter-range-histogram-bar-active-color);
 }
 .rangeInputs {
   display: flex;
   align-items: flex-end;
-  gap: var(--osdk-filter-range-inputs-gap, calc(var(--osdk-surface-spacing) * 2));
+  gap: var(--osdk-filter-range-inputs-gap);
 }
 .inputWrapper {
   flex: 1;
   display: flex;
   flex-direction: column;
-  gap: var(--osdk-filter-range-input-wrapper-gap, calc(var(--osdk-surface-spacing) * 1));
+  gap: var(--osdk-filter-range-input-wrapper-gap);
 }
 .inputLabel {
-  font-size: var(--osdk-typography-size-body-small);
-  color: var(--osdk-typography-color-muted);
+  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-size: var(--osdk-typography-size-body-small);
+  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);
@@ -347,8 +667,8 @@
   }
 }
 .separator {
-  padding-bottom: calc(var(--osdk-surface-spacing) * 1.5);
-  color: var(--osdk-typography-color-muted);
+  padding-bottom: calc(var(--osdk-filter-range-inputs-gap) * 0.75);
+  color: var(--osdk-filter-range-separator-color);
 }
 
 /* src/filter-list/base/inputs/LinkedPropertyInput.module.css */
@@ -365,58 +685,64 @@
 .container {
   display: flex;
   flex-direction: column;
-  gap: var(--osdk-filter-listogram-gap, calc(var(--osdk-surface-spacing) * 1));
+  gap: var(--osdk-filter-listogram-gap);
 }
 .row {
   display: flex;
   align-items: center;
-  gap: var(--osdk-filter-listogram-row-gap, calc(var(--osdk-surface-spacing) * 2));
-  padding: var(--osdk-filter-listogram-row-padding, calc(var(--osdk-surface-spacing) * 1));
+  gap: var(--osdk-filter-listogram-row-gap);
+  padding: var(--osdk-filter-listogram-row-padding);
   border: none;
   background: transparent;
   cursor: pointer;
-  border-radius: var(--osdk-surface-border-radius);
+  border-radius: var(--osdk-filter-listogram-row-border-radius);
   text-align: left;
   width: 100%;
-  transition: background-color var(--osdk-emphasis-transition-duration) var(--osdk-emphasis-ease-default);
+  transition: background-color var(--osdk-filter-listogram-row-transition);
   &:hover {
-    background: var(--osdk-surface-background-color-default-hover);
+    background: var(--osdk-filter-listogram-row-bg-hover);
   }
   &:focus-visible {
-    outline: var(--osdk-emphasis-focus-width) solid var(--osdk-emphasis-focus-color);
-    outline-offset: var(--osdk-emphasis-focus-offset);
+    outline: var(--osdk-filter-listogram-row-focus-outline);
+    outline-offset: var(--osdk-filter-listogram-row-focus-offset);
   }
 }
 .row[aria-pressed=true] {
-  background: var(--osdk-surface-background-color-default-active);
+  background: var(--osdk-filter-listogram-row-bg-active);
 }
 .label {
   flex: 1;
-  font-size: var(--osdk-typography-size-body-medium);
-  color: var(--osdk-typography-color-default-rest);
+  font-family: var(--osdk-filter-listogram-label-font-family);
+  font-size: var(--osdk-filter-listogram-label-font-size);
+  color: var(--osdk-filter-listogram-label-color);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 .bar {
   flex: 2;
-  height: var(--osdk-filter-listogram-bar-height, 8px);
-  background: var(--osdk-custom-color-gray-2);
-  border-radius: var(--osdk-surface-border-radius);
+  height: var(--osdk-filter-listogram-bar-height);
+  background: var(--osdk-filter-listogram-bar-bg);
+  border-radius: var(--osdk-filter-listogram-bar-border-radius);
   overflow: hidden;
 }
 .barFill {
+  display: block;
   height: 100%;
-  background: var(--osdk-filter-listogram-bar-color);
-  transition: width var(--osdk-emphasis-transition-duration) var(--osdk-emphasis-ease-default);
+  width: 100%;
+  background: var(--osdk-filter-listogram-row-bar-color, var(--osdk-filter-listogram-bar-color));
+  transform-origin: left;
+  transform: scaleX(var(--osdk-filter-listogram-bar-fill-scale, 0));
+  transition: transform var(--osdk-filter-listogram-bar-fill-transition);
 }
 .row[aria-pressed=true] .barFill {
-  background: var(--osdk-filter-listogram-selected-color);
+  background: var(--osdk-filter-listogram-row-bar-color, var(--osdk-filter-listogram-selected-color));
 }
 .count {
-  font-size: var(--osdk-typography-size-body-small);
+  font-family: var(--osdk-filter-listogram-count-font-family);
+  font-size: var(--osdk-filter-listogram-count-font-size);
   font-variant-numeric: tabular-nums;
-  color: var(--osdk-typography-color-muted);
+  color: var(--osdk-filter-listogram-count-color);
   min-width: 3ch;
   text-align: right;
 }
@@ -428,12 +754,13 @@
   gap: var(--osdk-filter-multiselect-gap);
 }
 .clearAll {
-  font-size: var(--osdk-typography-size-body-small);
-  color: var(--osdk-intent-primary-rest);
+  font-family: var(--osdk-filter-date-clear-font-family);
+  font-size: var(--osdk-filter-date-clear-font-size);
+  color: var(--osdk-filter-date-clear-color);
   background: transparent;
   border: none;
   cursor: pointer;
-  padding: calc(var(--osdk-surface-spacing) * 0.5);
+  padding: var(--osdk-filter-date-clear-padding);
   &:hover {
     text-decoration: underline;
   }
@@ -443,7 +770,8 @@
 }
 .input {
   flex: 1;
-  font-size: var(--osdk-typography-size-body-medium);
+  font-family: var(--osdk-filter-input-font-family);
+  font-size: var(--osdk-filter-timeline-input-font-size);
   padding: var(--osdk-filter-input-padding);
   border: var(--osdk-filter-input-border);
   border-radius: var(--osdk-filter-input-border-radius);
@@ -603,8 +931,43 @@
 .clearButton {
   flex-shrink: 0;
 }
+.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);
+}
+
+/* src/filter-list/base/inputs/NullValueWrapper.module.css */
+.nullWrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--osdk-filter-null-wrapper-gap);
+}
+.nullValueRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--osdk-filter-null-row-padding);
+  border-top: var(--osdk-filter-null-row-border-top);
+}
+.nullLabel {
+  display: flex;
+  align-items: center;
+  gap: var(--osdk-filter-null-label-gap);
+  cursor: pointer;
+}
+.nullLabelText {
+  font-family: var(--osdk-filter-null-label-font-family);
+  font-size: var(--osdk-filter-null-label-font-size);
+  line-height: var(--osdk-filter-null-label-line-height);
+  color: var(--osdk-filter-null-label-color);
+}
 .count {
+  font-family: var(--osdk-filter-null-count-font-family);
+  font-size: var(--osdk-filter-null-count-font-size);
   font-variant-numeric: tabular-nums;
+  color: var(--osdk-filter-null-count-color);
 }
 
 /* src/filter-list/base/inputs/SingleDateInput.module.css */
@@ -619,7 +982,8 @@
 }
 .input {
   flex: 1;
-  font-size: var(--osdk-typography-size-body-medium);
+  font-family: var(--osdk-filter-input-font-family);
+  font-size: var(--osdk-filter-timeline-input-font-size);
   padding: var(--osdk-filter-input-padding);
   border: var(--osdk-filter-input-border);
   border-radius: var(--osdk-filter-input-border-radius);
@@ -697,408 +1061,155 @@
     color: var(--osdk-select-placeholder-color, var(--osdk-typography-color-muted));
   }
 }
-.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);
-  box-sizing: border-box;
-  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;
-  flex-direction: column;
-}
-.selectContainer {
-  display: flex;
-  align-items: center;
-  gap: var(--osdk-filter-select-container-gap);
-  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;
-  }
-}
-
-/* src/filter-list/base/inputs/TextTagsInput.module.css */
-.textTags {
-  display: flex;
-  flex-direction: column;
-  gap: var(--osdk-filter-texttags-gap);
-}
-.input {
-  flex: 1;
-}
-
-/* src/filter-list/base/inputs/TimelineInput.module.css */
-.timeline {
-  display: flex;
-  flex-direction: column;
-  gap: var(--osdk-filter-range-gap, calc(var(--osdk-surface-spacing) * 2));
-}
-.labels {
-  display: flex;
-  align-items: center;
-  gap: var(--osdk-surface-spacing);
-  font-size: var(--osdk-typography-size-body-small);
-  color: var(--osdk-typography-color-muted);
-}
-.clearButton {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: calc(var(--osdk-surface-spacing) * 0.5);
-  border: none;
-  background: transparent;
-  cursor: pointer;
-  color: var(--osdk-iconography-color-muted);
-  border-radius: var(--osdk-surface-border-radius);
-  margin-left: auto;
-  &:hover {
-    background: var(--osdk-surface-background-color-default-hover);
-    color: var(--osdk-typography-color-default-rest);
-  }
-}
-.brush {
-  display: flex;
-  align-items: center;
-  gap: var(--osdk-surface-spacing);
-}
-.brush span {
-  color: var(--osdk-typography-color-muted);
-}
-.input {
-  flex: 1;
-  font-size: var(--osdk-typography-size-body-medium);
-  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);
-  &: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);
-  }
-}
-
-/* src/base-components/switch/Switch.module.css */
-.osdkSwitchRoot {
-  --osdk-switch-track-width: var(--osdk-switch-track-width-override, 28px);
-  --osdk-switch-track-height: var(--osdk-switch-track-height-override, 16px);
-  --osdk-switch-thumb-size: var(--osdk-switch-thumb-size-override, 12px);
-  --osdk-switch-thumb-offset: var(--osdk-switch-thumb-offset-override, 2px);
-  display: inline-flex;
-  align-items: center;
-  width: var(--osdk-switch-track-width);
-  height: var(--osdk-switch-track-height);
-  padding: 0;
-  box-sizing: border-box;
-  cursor: pointer;
-  border-radius: var(--osdk-switch-border-radius, var(--osdk-surface-border-radius));
-  position: relative;
-  border: none;
-  transition: background-color var(--osdk-switch-transition-duration, var(--osdk-emphasis-transition-duration)) var(--osdk-switch-transition-ease, var(--osdk-emphasis-ease-default));
-  &[data-unchecked] {
-    background-color: var(--osdk-switch-track-bg, var(--osdk-intent-default-rest));
-    &:hover {
-      background-color: var(--osdk-switch-track-bg-hover, var(--osdk-intent-default-hover));
-    }
-    &:active {
-      background-color: var(--osdk-switch-track-bg-active, var(--osdk-intent-default-active));
-    }
-  }
-  &[data-checked] {
-    background-color: var(--osdk-switch-track-bg-checked, var(--osdk-intent-primary-rest));
-    &:hover {
-      background-color: var(--osdk-switch-track-bg-checked-hover, var(--osdk-intent-primary-hover));
-    }
-    &:active {
-      background-color: var(--osdk-switch-track-bg-checked-active, var(--osdk-intent-primary-active));
-    }
-  }
-  &[data-disabled] {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-  &:focus-visible {
-    outline: var(--osdk-switch-focus-width, var(--osdk-emphasis-focus-width)) solid var(--osdk-switch-focus-color, var(--osdk-emphasis-focus-color));
-    outline-offset: var(--osdk-switch-focus-offset, var(--osdk-emphasis-focus-offset));
-  }
-}
-.osdkSwitchThumb {
-  display: block;
-  width: var(--osdk-switch-thumb-size);
-  height: var(--osdk-switch-thumb-size);
-  background-color: var(--osdk-switch-thumb-bg, var(--osdk-palette-white));
-  border-radius: 50%;
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  transition: left var(--osdk-switch-transition-duration, var(--osdk-emphasis-transition-duration)) var(--osdk-switch-transition-ease, var(--osdk-emphasis-ease-default));
-  &[data-unchecked] {
-    left: var(--osdk-switch-thumb-offset);
-  }
-  &[data-checked] {
-    left: calc(var(--osdk-switch-track-width) - var(--osdk-switch-thumb-size) - var(--osdk-switch-thumb-offset));
-  }
-}
-
-/* src/filter-list/base/inputs/ToggleInput.module.css */
-.toggleInput {
-  display: flex;
-  align-items: center;
-}
-.toggleLabel {
+.osdkSelectIcon {
   display: flex;
   align-items: center;
-  gap: var(--osdk-filter-toggle-label-gap);
-  cursor: pointer;
+  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);
+  }
 }
-.labelText {
-  font-family: var(--osdk-filter-toggle-label-font-family);
-  font-size: var(--osdk-filter-toggle-label-font-size);
-  line-height: var(--osdk-filter-toggle-label-line-height);
-  color: var(--osdk-filter-toggle-label-color);
+.osdkSelectPositioner {
+  z-index: var(--osdk-select-z-index, var(--osdk-surface-z-index-3));
 }
-
-/* src/filter-list/base/inputs/NullValueWrapper.module.css */
-.nullWrapper {
+.osdkSelectPopup {
   display: flex;
   flex-direction: column;
-  gap: var(--osdk-filter-null-wrapper-gap);
-}
-.nullValueRow {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--osdk-filter-null-row-padding);
-  border-top: var(--osdk-filter-null-row-border-top);
+  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);
+  box-sizing: border-box;
+  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));
 }
-.nullLabel {
+.osdkSelectItem {
   display: flex;
   align-items: center;
-  gap: var(--osdk-filter-null-label-gap);
+  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;
-}
-.nullLabelText {
-  font-family: var(--osdk-filter-null-label-font-family);
-  font-size: var(--osdk-filter-null-label-font-size);
-  line-height: var(--osdk-filter-null-label-line-height);
-  color: var(--osdk-filter-null-label-color);
-}
-.count {
-  font-size: var(--osdk-typography-size-body-small);
-  font-variant-numeric: tabular-nums;
-  color: var(--osdk-typography-color-muted);
+  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/FilterListItem.module.css */
-.filterItem {
+/* src/filter-list/base/inputs/SingleSelectInput.module.css */
+.singleSelect {
   display: flex;
   flex-direction: column;
-  gap: var(--osdk-filter-item-gap);
 }
-.itemHeader {
+.selectContainer {
   display: flex;
   align-items: center;
+  gap: var(--osdk-filter-select-container-gap);
+  position: relative;
 }
-.itemLabel {
-  font-family: var(--osdk-filter-item-label-font-family);
-  font-size: var(--osdk-filter-item-label-font-size);
-  font-weight: var(--osdk-filter-item-label-font-weight);
-  color: var(--osdk-filter-item-label-color);
-}
-.itemContent {
-  display: flex;
-  flex-direction: column;
-}
-.dragHandle {
+.clearButton {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: var(--osdk-filter-item-drag-handle-padding);
-  margin-right: var(--osdk-surface-spacing);
+  padding: var(--osdk-filter-select-clear-padding);
   border: none;
-  background: var(--osdk-filter-item-drag-handle-bg);
-  cursor: var(--osdk-drag-handle-cursor);
-  border-radius: var(--osdk-filter-item-drag-handle-border-radius);
-  color: var(--osdk-filter-item-drag-handle-color);
-  touch-action: 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-item-drag-handle-color-hover);
-    background: var(--osdk-filter-item-drag-handle-bg-hover);
-  }
-  &:active {
-    cursor: var(--osdk-drag-handle-cursor-active);
+    color: var(--osdk-filter-select-clear-color-hover);
+    background-color: var(--osdk-filter-select-clear-bg-hover);
   }
   &:focus-visible {
-    outline: 2px solid var(--osdk-filter-item-drag-handle-focus-outline-color);
-    outline-offset: 2px;
+    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;
   }
-}
-.dragging {
-  opacity: var(--osdk-filter-item-dragging-opacity);
 }
 
-/* src/filter-list/base/FilterListHeader.module.css */
-.header {
+/* src/filter-list/base/inputs/TextTagsInput.module.css */
+.textTags {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding-bottom: var(--osdk-filter-header-padding-bottom);
-  border-bottom: var(--osdk-filter-header-border-bottom);
+  flex-direction: column;
+  gap: var(--osdk-filter-texttags-gap);
 }
-.titleContainer {
-  display: flex;
-  align-items: center;
-  gap: var(--osdk-filter-header-titleContainer-gap);
+.input {
+  flex: 1;
 }
-.title {
-  font-family: var(--osdk-filter-header-font-family);
-  font-size: var(--osdk-filter-header-font-size);
-  font-weight: var(--osdk-filter-header-font-weight);
-  color: var(--osdk-filter-header-color);
-  margin: 0;
+
+/* src/filter-list/base/inputs/TimelineInput.module.css */
+.timeline {
+  display: flex;
+  flex-direction: column;
+  gap: var(--osdk-filter-range-gap);
 }
-.titleIcon {
-  color: var(--osdk-filter-header-icon-color);
+.labels {
   display: flex;
   align-items: center;
+  gap: var(--osdk-filter-timeline-labels-gap);
+  font-family: var(--osdk-filter-timeline-labels-font-family);
+  font-size: var(--osdk-filter-timeline-labels-font-size);
+  color: var(--osdk-filter-timeline-labels-color);
 }
-.activeCount {
-  font-family: var(--osdk-filter-header-font-family);
-  font-size: var(--osdk-filter-header-activeCount-font-size);
-  color: var(--osdk-filter-header-activeCount-color);
-  font-variant-numeric: tabular-nums;
-}
-.collapseButton {
+.clearButton {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: var(--osdk-filter-header-button-padding);
+  padding: var(--osdk-filter-timeline-button-padding);
   border: none;
-  background: var(--osdk-filter-header-button-bg);
+  background: transparent;
   cursor: pointer;
-  border-radius: var(--osdk-filter-header-button-border-radius);
-  transition: background-color var(--osdk-filter-header-button-transition);
+  color: var(--osdk-filter-timeline-button-color);
+  border-radius: var(--osdk-filter-timeline-button-border-radius);
+  margin-left: auto;
   &:hover {
-    background: var(--osdk-filter-header-button-bg-hover);
-  }
-  &:active {
-    background: var(--osdk-filter-header-button-bg-active);
-  }
-  &: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;
+    background: var(--osdk-filter-timeline-button-bg-hover);
+    color: var(--osdk-filter-timeline-button-color-hover);
   }
 }
-.collapseIcon {
-  display: block;
-  width: var(--osdk-filter-header-collapse-icon-size);
-  height: var(--osdk-filter-header-collapse-icon-size);
-  border-left: var(--osdk-filter-header-collapse-icon-border-width) solid var(--osdk-filter-header-collapse-icon-color);
-  border-bottom: var(--osdk-filter-header-collapse-icon-border-width) solid var(--osdk-filter-header-collapse-icon-color);
-  transform: rotate(-45deg);
-  transition: transform var(--osdk-filter-header-button-transition);
-  @media (prefers-reduced-motion: reduce) {
-    transition: none;
-  }
+.brush {
+  display: flex;
+  align-items: center;
+  gap: var(--osdk-filter-timeline-labels-gap);
 }
-.collapseIcon[data-collapsed=true] {
-  transform: rotate(-135deg);
+.brush span {
+  color: var(--osdk-filter-timeline-brush-color);
 }
-.resetButton {
-  font-family: var(--osdk-filter-header-font-family);
-  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;
-  cursor: pointer;
-  padding: var(--osdk-filter-header-reset-padding);
-  border-radius: var(--osdk-filter-header-button-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);
-    cursor: not-allowed;
-  }
-  &:focus-visible {
+.input {
+  flex: 1;
+  font-family: var(--osdk-filter-input-font-family);
+  font-size: var(--osdk-filter-timeline-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);
+  &: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);
   }
-  @media (prefers-reduced-motion: reduce) {
-    transition: none;
-  }
 }
 
 /* src/object-table/EditableCell.module.css */
@@ -1258,9 +1369,6 @@
   border-radius: var(--osdk-surface-border-radius);
   font-size: var(--osdk-typography-size-body-medium);
   cursor: pointer;
-  &:focus {
-    outline: none;
-  }
   &:focus-visible {
     outline: var(--osdk-focus-outline);
     outline-offset: var(--osdk-focus-visible-outline-offset);
@@ -1319,9 +1427,6 @@
   z-index: var(--osdk-surface-z-index-2);
   display: flex;
   flex-direction: column;
-  &:focus {
-    outline: none;
-  }
 }
 .header {
   display: flex;
@@ -1359,9 +1464,6 @@
   &:hover {
     background-color: var(--osdk-surface-background-color-default-hover);
   }
-  &:focus {
-    outline: none;
-  }
   &:focus-visible {
     outline: var(--osdk-focus-outline);
     outline-offset: var(--osdk-focus-visible-outline-offset);
@@ -1405,9 +1507,6 @@
   &:active {
     cursor: var(--osdk-drag-handle-cursor-active);
   }
-  &:focus {
-    outline: none;
-  }
   &:focus-visible {
     outline: var(--osdk-focus-outline);
     outline-offset: var(--osdk-focus-visible-outline-offset);
@@ -1436,9 +1535,6 @@
     color: var(--osdk-typography-color-danger-rest);
     background: oklch(from var(--osdk-surface-background-color-danger-hover) l c h / 0.2);
   }
-  &:focus {
-    outline: none;
-  }
   &:focus-visible {
     outline: var(--osdk-focus-outline);
     outline-offset: var(--osdk-focus-visible-outline-offset);
@@ -1588,9 +1684,6 @@
   border: none;
   cursor: pointer;
   padding: 0;
-  &:focus {
-    outline: none;
-  }
   &:focus-visible {
     outline: var(--osdk-focus-outline);
     outline-offset: var(--osdk-focus-visible-outline-offset);
@@ -1663,9 +1756,6 @@
   white-space: nowrap;
   background: none;
   border: none;
-  &:focus {
-    outline: none;
-  }
   &:focus-visible {
     outline: var(--osdk-focus-outline);
     outline-offset: var(--osdk-focus-visible-outline-offset);
@@ -1758,9 +1848,6 @@
     opacity: 0.5;
     cursor: not-allowed;
   }
-  &:focus {
-    outline: none;
-  }
   &:focus-visible {
     outline: var(--osdk-focus-outline);
     outline-offset: calc(-1 * var(--osdk-focus-visible-outline-offset));
@@ -1976,9 +2063,6 @@
     background-color: var(--osdk-table-header-menu-bg-active);
     color: var(--osdk-table-header-menu-color-active);
   }
-  &:focus {
-    outline: none;
-  }
   &:focus-visible {
     outline: var(--osdk-focus-outline);
     outline-offset: var(--osdk-focus-visible-outline-offset);
@@ -1997,9 +2081,6 @@
   color: var(--osdk-typography-color-default-rest);
   box-shadow: var(--osdk-surface-shadow-2);
   font-size: var(--osdk-typography-size-body-medium);
-  &:focus {
-    outline: none;
-  }
 }
 .osdkHeaderMenuItem {
   justify-content: flex-start;
@@ -2009,9 +2090,6 @@
     background-color: var(--osdk-surface-background-color-default-hover);
     border-radius: var(--osdk-surface-border-radius);
   }
-  &:focus {
-    outline: none;
-  }
   &:focus-visible {
     outline: var(--osdk-focus-outline);
     outline-offset: var(--osdk-focus-visible-outline-offset);