@osdk/react-components 0.2.0-beta.26 → 0.2.0-beta.28

package/build/cjs/public/experimental.css

@@ -67,10 +67,7 @@
 .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);
 }
 .addButtonContainer > * {
   flex: 1;
@@ -160,6 +157,13 @@
   gap: var(--osdk-filter-item-gap);
   border-radius: var(--osdk-filter-item-border-radius);
   padding: var(--osdk-filter-item-padding);
+  border: 1px solid transparent;
+}
+.filterItem[data-has-selection] {
+  border-color: var(--osdk-intent-primary-rest);
+}
+.filterItem[data-has-selection] .searchRow {
+  border-color: transparent;
 }
 .itemHeader {
   display: flex;
@@ -243,10 +247,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 +296,6 @@
     transition: none;
   }
 }
-.filterItem:hover [data-exclude-row],
 .excludeRowVisible {
   opacity: 1;
   height: auto;
@@ -610,132 +609,80 @@
   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);
+  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);
 }
-.checkboxLabel {
+.histogramBar[data-in-range=true] {
+  background: var(--osdk-filter-range-histogram-bar-active-color);
+}
+.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);
+.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);
   }
-  to {
-    background: var(--osdk-background-skeleton-to);
+  &::placeholder {
+    color: var(--osdk-filter-input-placeholder-color);
   }
 }
-.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;
+.separator {
+  padding-bottom: calc(var(--osdk-filter-range-inputs-gap) * 0.75);
+  color: var(--osdk-filter-range-separator-color);
 }
 @media (prefers-reduced-motion: reduce) {
-  .skeletonBar {
-    animation: none;
+  .histogramContainer,
+  .rangeInput {
+    transition: none;
   }
 }
 
-/* src/filter-list/base/inputs/CheckboxListSkeleton.module.css */
-.container {
-  display: flex;
-  flex-direction: column;
-  gap: var(--osdk-filter-checkbox-list-gap);
-}
-.row {
-  display: flex;
-  align-items: center;
-  gap: var(--osdk-filter-checkbox-label-gap);
-  padding: var(--osdk-filter-checkbox-row-padding);
-}
-.flexBar {
-  flex: 1;
-}
-
 /* src/filter-list/base/inputs/shared.module.css */
 .loadingMessage,
 .errorMessage,
@@ -792,89 +739,58 @@
   }
 }
 
-/* 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-hover);
+  }
+  &: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 +844,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;
@@ -948,6 +867,9 @@
 .row[aria-pressed=true] .barFill {
   background: var(--osdk-filter-listogram-row-bar-color, var(--osdk-filter-listogram-selected-color));
 }
+.checkbox {
+  display: flex;
+}
 .count {
   font-family: var(--osdk-filter-listogram-count-font-family);
   font-size: var(--osdk-filter-listogram-count-font-size);
@@ -957,6 +879,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;