@osdk/react-components 0.2.0-beta.17 → 0.2.0-beta.18

package/build/cjs/public/experimental.css

@@ -2,28 +2,67 @@
 .filterList {
   display: flex;
   flex-direction: column;
+  height: 100%;
+}
+.filterListCollapsed {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: var(--osdk-filter-list-collapsed-width);
+  height: 100%;
+  background: var(--osdk-filter-list-bg);
+  border: var(--osdk-filter-list-border);
+  border-radius: var(--osdk-filter-list-border-radius);
+  padding: var(--osdk-surface-spacing) 0;
+  gap: var(--osdk-surface-spacing);
+}
+.expandedContent {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow-y: auto;
   background: var(--osdk-filter-list-bg);
   border: var(--osdk-filter-list-border);
   border-radius: var(--osdk-filter-list-border-radius);
   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);
+.hiddenContent {
+  display: none;
+}
+.expandButton {
+  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);
+  color: var(--osdk-filter-header-collapse-icon-color);
+  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;
   }
 }
-.contentWrapper[data-collapsed=true] {
-  grid-template-rows: 0fr;
-}
-.contentInner {
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  gap: var(--osdk-filter-list-gap);
+.collapsedLabel {
+  writing-mode: vertical-rl;
+  transform: rotate(180deg);
+  font-family: var(--osdk-filter-list-collapsed-label-font-family);
+  font-size: var(--osdk-filter-list-collapsed-label-font-size);
+  color: var(--osdk-filter-list-collapsed-label-color);
+  font-weight: var(--osdk-filter-header-font-weight);
+  user-select: none;
 }
 .addButtonContainer {
   display: flex;
@@ -241,6 +280,14 @@
   color: var(--osdk-filter-header-activeCount-color);
   font-variant-numeric: tabular-nums;
 }
+.actions {
+  display: flex;
+  align-items: center;
+  gap: var(--osdk-surface-spacing);
+  &:empty {
+    display: none;
+  }
+}
 .collapseButton {
   display: flex;
   align-items: center;
@@ -251,6 +298,7 @@
   cursor: pointer;
   border-radius: var(--osdk-filter-header-button-border-radius);
   transition: background-color var(--osdk-filter-header-button-transition);
+  color: var(--osdk-filter-header-collapse-icon-color);
   &:hover {
     background: var(--osdk-filter-header-button-bg-hover);
   }
@@ -265,42 +313,10 @@
     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 {
+.resetButton {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  flex: 1;
-  overflow: hidden;
-  min-width: 0;
-}
-.resetButton {
+  gap: calc(var(--osdk-surface-spacing) * 0.5);
   font-family: var(--osdk-filter-header-font-family);
   font-size: var(--osdk-filter-header-reset-font-size);
   color: var(--osdk-filter-header-reset-color);
@@ -2046,8 +2062,9 @@
 .osdkTableHeaderCell[data-pinned=right]:not(:has(~ [data-pinned=right]):nth-child(n+2)) {
   border-left: var(--osdk-table-pinned-column-border);
 }
-.osdkTableHeaderCell:has([role=checkbox]) {
+.osdkTableSelectionHeaderCell {
   justify-content: center;
+  padding: 0;
 }
 .osdkTableHeaderResizer {
   background: none;