@wix/patterns 1.353.0 → 1.355.0

package/src/components/CollectionToolbar/SearchOrCustomFilter.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SearchOrCustomFilter1326699873";
+var _namespace_ = "SearchOrCustomFilter1165476069";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"SearchOrCustomFilter1326699873__root","search":"SearchOrCustomFilter1326699873__search","searchMobile":"SearchOrCustomFilter1326699873__searchMobile"};
+export var classes = {"root":"SearchOrCustomFilter1165476069__root","search":"SearchOrCustomFilter1165476069__search","searchMobile":"SearchOrCustomFilter1165476069__searchMobile"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionViewsDropdown/AutoCompleteReadonly.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "AutoCompleteReadonly4288019892";
+var _namespace_ = "AutoCompleteReadonly3148335618";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"AutoCompleteReadonly4288019892__root"};
+export var classes = {"root":"AutoCompleteReadonly3148335618__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionViewsDropdown/ViewsDropdown.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ViewsDropdown3936858135";
+var _namespace_ = "ViewsDropdown3089491910";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"ViewsDropdown3936858135__root"};
+export var classes = {"root":"ViewsDropdown3089491910__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionViewsDropdown/ViewsDropdown.tsx

@@ -15,6 +15,7 @@ import { ManageViewPopover } from './ManageViewPopover';
 import {
   buildCategoryOption,
   buildViewOption,
+  getCategoryName,
   getViewName,
 } from './viewsDropdownRenderHelpers';
 import { AutoCompleteReadonly } from './AutoCompleteReadonly';
@@ -52,7 +53,10 @@ function _ViewsDropdown<T, F extends FiltersMap>({
         buildViewOption({ view, viewsState }),
       ),
       ...categories.flatMap((category) => [
-        buildCategoryOption({ category, viewsState }),
+        // Skip category header if category has no displayable name
+        ...(getCategoryName({ category, viewsState })
+          ? [buildCategoryOption({ category, viewsState })]
+          : []),
         ...category.views.map((view) => buildViewOption({ view, viewsState })),
       ]),
     ];

package/src/components/CollectionViewsDropdown/viewsDropdownRenderHelpers.tsx

@@ -7,7 +7,6 @@ import {
   BasicCategory,
   PREDEFINED_VIEWS_ID,
   PrivateView,
-  SAVED_VIEWS_ID,
   ViewsState,
 } from '../../index';
 import { FiltersMap } from '@wix/bex-core';
@@ -21,9 +20,7 @@ export function getCategoryName<F extends FiltersMap>({
   category: BasicCategory;
 }) {
   const { translate: t } = viewsState.collection;
-  if (category.id === SAVED_VIEWS_ID) {
-    return t('cairo.viewDropdown.category.savedViews');
-  }
+
   if (category.id === PREDEFINED_VIEWS_ID) {
     return t('cairo.viewDropdown.category.predefinedViews');
   }

package/src/components/DragHandle/DragHandle.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "DragHandle2356258919";
+var _namespace_ = "DragHandle2191261823";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"DragHandle2356258919__root"};
+export var classes = {"root":"DragHandle2191261823__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EntityPage/EntityPagePlain.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "EntityPagePlain534349056";
+var _namespace_ = "EntityPagePlain2781968927";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"EntityPagePlain534349056__root"};
+export var classes = {"root":"EntityPagePlain2781968927__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Fade/Fade.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Fade3494468580";
+var _namespace_ = "Fade399282970";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Fade3494468580__root"};
+export var classes = {"root":"Fade399282970__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Heading/Heading.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Heading1276693364";
+var _namespace_ = "Heading3533303979";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Heading1276693364__root"};
+export var classes = {"root":"Heading3533303979__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/InputOverflow/InputOverflow.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "InputOverflow3970599810";
+var _namespace_ = "InputOverflow1583143864";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"InputOverflow3970599810__root"};
+export var classes = {"root":"InputOverflow1583143864__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/LoadingRow/LoadingRow.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "LoadingRow1185391886";
+var _namespace_ = "LoadingRow232979932";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,8 +13,8 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"LoadingRow1185391886__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow1185391886__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow232979932__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow232979932__gradientSwoosh"}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 

package/src/components/MaxHeightText/MaxHeightText.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MaxHeightText3189604885";
+var _namespace_ = "MaxHeightText1332070745";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"MaxHeightText3189604885__root"};
+export var classes = {"root":"MaxHeightText1332070745__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/MaxLines/MaxLines.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MaxLines3182666448";
+var _namespace_ = "MaxLines3599357708";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"MaxLines3182666448__root"};
+export var classes = {"root":"MaxLines3599357708__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/MultiBulkActionToolbar/MultiBulkActionToolbar.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MultiBulkActionToolbar2015721343";
+var _namespace_ = "MultiBulkActionToolbar588766161";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"MultiBulkActionToolbar2015721343__root","leftGroupWrapper":"MultiBulkActionToolbar2015721343__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar2015721343__selectedCountItem","selectedCountText":"MultiBulkActionToolbar2015721343__selectedCountText"};
+export var classes = {"root":"MultiBulkActionToolbar588766161__root","leftGroupWrapper":"MultiBulkActionToolbar588766161__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar588766161__selectedCountItem","selectedCountText":"MultiBulkActionToolbar588766161__selectedCountText"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/MultiSelectCheckboxFilterBase/MultiSelectCheckboxFilterBase.tsx

@@ -1,6 +1,5 @@
 import {
   DropdownLayoutOption,
-  DropdownLayoutValueOption,
   MultiSelectCheckbox,
   MultiSelectCheckboxProps,
 } from '@wix/design-system';
@@ -12,7 +11,7 @@ import { FilterProps } from '../../model';
 import { useWindowFlipPopoverProps } from '../../utils/useWindowFlipPopoverProps';
 import { useDropdownTranslationContext } from '../../providers';
 
-export type KeyedItemOption<T> = DropdownLayoutValueOption & {
+export type KeyedItemOption<T> = DropdownLayoutOption & {
   keyedItem: KeyedItem<T>;
 };
 

package/src/components/MultiSelectFilterBase/MultiSelectFilterBase.tsx

@@ -1,6 +1,5 @@
 import {
   DropdownLayoutOption,
-  DropdownLayoutValueOption,
   InputSize,
   MultiSelect,
   MultiSelectProps,
@@ -17,7 +16,7 @@ import { useFilterRenderingContext } from '../FilterRenderingContext';
 import { useWindowFlipPopoverProps } from '../../utils/useWindowFlipPopoverProps';
 import { useDropdownTranslationContext } from '../../providers';
 
-export type KeyedItemOption<T> = DropdownLayoutValueOption & {
+export type KeyedItemOption<T> = DropdownLayoutOption & {
   keyedItem: KeyedItem<T>;
 };
 

package/src/components/NestedTable/NestedTablePlaceholderStatesRow.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTablePlaceholderStatesRow2215866937";
+var _namespace_ = "NestedTablePlaceholderStatesRow1687101870";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"NestedTablePlaceholderStatesRow2215866937__root"};
+export var classes = {"root":"NestedTablePlaceholderStatesRow1687101870__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/NestedTable/NestedTableRow.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTableRow124750162";
+var _namespace_ = "NestedTableRow364668283";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"NestedTableRow124750162__root","firstLevel":"NestedTableRow124750162__firstLevel","placeholder":"NestedTableRow124750162__placeholder","parentHovered":"NestedTableRow124750162__parentHovered"};
+export var classes = {"root":"NestedTableRow364668283__root","firstLevel":"NestedTableRow364668283__firstLevel","placeholder":"NestedTableRow364668283__placeholder","parentHovered":"NestedTableRow364668283__parentHovered"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/NestedTableDragAndDrop/MultipleDragOverlayEffect.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MultipleDragOverlayEffect1565624507";
+var _namespace_ = "MultipleDragOverlayEffect4261246819";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"MultipleDragOverlayEffect1565624507__root"};
+export var classes = {"root":"MultipleDragOverlayEffect4261246819__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/NestedTableDragAndDrop/NestedTableDragAndDropRow.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTableDragAndDropRow3605272399";
+var _namespace_ = "NestedTableDragAndDropRow2674054095";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"NestedTableDragAndDropRow3605272399__root"};
+export var classes = {"root":"NestedTableDragAndDropRow2674054095__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/PickerContent/PickerContent.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerContent1227726627";
+var _namespace_ = "PickerContent485154672";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"PickerContent1227726627__root"};
+export var classes = {"root":"PickerContent485154672__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/PickerContent/PickerContentAdditionalStep.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerContentAdditionalStep4012553907";
+var _namespace_ = "PickerContentAdditionalStep2098613398";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"PickerContentAdditionalStep4012553907__root","titles":"PickerContentAdditionalStep4012553907__titles","suffix":"PickerContentAdditionalStep4012553907__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep2098613398__root","titles":"PickerContentAdditionalStep2098613398__titles","suffix":"PickerContentAdditionalStep2098613398__suffix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/PickerTableListItem/PickerTableListItem.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerTableListItem177832388";
+var _namespace_ = "PickerTableListItem3838836186";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"PickerTableListItem177832388__root"};
+export var classes = {"root":"PickerTableListItem3838836186__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/ScrollableContent/ScrollableContent.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ScrollableContent1892891984";
+var _namespace_ = "ScrollableContent847120716";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"ScrollableContent1892891984__root"};
+export var classes = {"root":"ScrollableContent847120716__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/SingleSelectFilterBase/SingleSelectFilterBase.tsx

@@ -1,6 +1,6 @@
 import {
   Dropdown,
-  DropdownLayoutValueOption,
+  DropdownLayoutOption,
   DropdownPropsControlled,
 } from '@wix/design-system';
 import React from 'react';
@@ -11,7 +11,7 @@ import { BuildSectionOptionsArgs, ListItem } from '../../hooks';
 import { FilterProps } from '../../model';
 import { useWindowFlipPopoverProps } from '../../utils/useWindowFlipPopoverProps';
 
-export type KeyedItemOption<T> = DropdownLayoutValueOption & {
+export type KeyedItemOption<T> = DropdownLayoutOption & {
   keyedItem: KeyedItem<T>;
 };
 

package/src/components/SkeletonCard/SkeletonCard.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SkeletonCard1199588018";
+var _namespace_ = "SkeletonCard89223222";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"SkeletonCard1199588018__root","headerLoading":"SkeletonCard1199588018__headerLoading"};
+export var classes = {"root":"SkeletonCard89223222__root","headerLoading":"SkeletonCard89223222__headerLoading"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/SlidingModal/SlidingModal.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SlidingModal1303239132";
+var _namespace_ = "SlidingModal2713679544";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"SlidingModal1303239132__root"};
+export var classes = {"root":"SlidingModal2713679544__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/TabsFilter/TabTitle.tsx

@@ -9,6 +9,7 @@ export interface TabTitleProps<V> {
   state: TabsResponsiveState;
   text?: string;
   value: V | null | undefined;
+  active?: boolean;
   counterBadge?: (value: V | null | undefined) => ReactNode;
 }
 
@@ -17,6 +18,7 @@ function _TabTitle<V>({
   state,
   text,
   value,
+  active,
   counterBadge,
 }: TabTitleProps<V>) {
   const badge = counterBadge?.(value);
@@ -34,7 +36,7 @@ function _TabTitle<V>({
 
   return (
     <Box
-      className={st(classes.root)}
+      className={st(classes.root, { selected: !!active })}
       dataHook="tabs-filter-tab-title"
       verticalAlign="middle"
       align="center"

package/src/components/TabsFilter/TabsFilter.st.css

@@ -1,3 +1,18 @@
+@property st-global(--wds-color-text-standard-primary);
+@property st-global(--wds-tabs-label-fill);
+@property st-global(--wds-tabs-label-fill-active);
+@property st-global(--wsr-color-B10);
+@property st-global(--wsr-color-D10);
+
+.root {
+  -st-states: selected;
+}
+
 .root .title {
-  color: inherit !important;
+  color: var(--wds-tabs-label-fill, var(--wds-color-text-standard-primary, var(--wsr-color-D10, #000624)));
+}
+
+.root:selected .title,
+.root:hover .title {
+  color: var(--wds-tabs-label-fill-active, var(--wsr-color-B10, #116DFF));
 }

package/src/components/TabsFilter/TabsFilter.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "TabsFilter735757606";
+var _namespace_ = "TabsFilter2340373808";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,12 +13,12 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"TabsFilter735757606__root","title":"TabsFilter735757606__title"};
+export var classes = {"root":"TabsFilter2340373808__root","title":"TabsFilter2340373808__title"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 
-export var vars = {}; 
+export var vars = {"wds-color-text-standard-primary":"--wds-color-text-standard-primary","wds-tabs-label-fill":"--wds-tabs-label-fill","wds-tabs-label-fill-active":"--wds-tabs-label-fill-active","wsr-color-B10":"--wsr-color-B10","wsr-color-D10":"--wsr-color-D10"}; 
 
 
 

package/src/components/TabsFilter/TabsFilter.tsx

@@ -13,7 +13,6 @@ import { observer } from 'mobx-react-lite';
 import { TabTitle } from './TabTitle';
 import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
 import { TabsFilterState } from './TabsFilterState';
-import { classes, st } from './TabsFilter.st.css.js';
 import { TabsDropdown } from './TabsDropdown';
 import { ALL_TAB_ITEM_ID, TabsFilterItemBase } from './types';
 import { TabsDefault } from './TabsDefault';
@@ -131,10 +130,15 @@ function _TabsFilter<V>(props: TabsFilterProps<V>) {
 
   const hideCounterBadge = isTableLoading || isAllCounterBadgeLoading;
 
+  const selectedId = filter.isEmpty
+    ? ALL_TAB_ITEM_ID
+    : itemKey(filter.value[0]);
+
   const items = useMemo<TabsFilterItemBase[]>(() => {
     const _mergedItems = dataProp.map((value, index) => {
+      const id = itemKey(value);
       return {
-        id: itemKey(value),
+        id,
         name: itemName(value),
         title: (
           <TabTitle
@@ -142,6 +146,7 @@ function _TabsFilter<V>(props: TabsFilterProps<V>) {
             state={responsive}
             text={itemName(value)}
             value={value}
+            active={selectedId === id}
             counterBadge={hideCounterBadge ? undefined : counterBadge}
           />
         ),
@@ -167,6 +172,7 @@ function _TabsFilter<V>(props: TabsFilterProps<V>) {
           state={responsive}
           text={all}
           value={undefined}
+          active={selectedId === ALL_TAB_ITEM_ID}
           counterBadge={hideCounterBadge ? undefined : counterBadge}
         />
       ),
@@ -181,7 +187,14 @@ function _TabsFilter<V>(props: TabsFilterProps<V>) {
       minWidth: responsive.itemsMinWidths[index],
       index,
     }));
-  }, [dataProp, all, counterBadge, responsive.panelMinWidth, hideCounterBadge]);
+  }, [
+    dataProp,
+    all,
+    counterBadge,
+    responsive.panelMinWidth,
+    hideCounterBadge,
+    selectedId,
+  ]);
 
   useEffect(
     () =>
@@ -192,10 +205,6 @@ function _TabsFilter<V>(props: TabsFilterProps<V>) {
     [container, state],
   );
 
-  const selectedId = filter.isEmpty
-    ? ALL_TAB_ITEM_ID
-    : itemKey(filter.value[0]);
-
   return (
     <FilterContextProvider value={filter}>
       <Box
@@ -205,7 +214,6 @@ function _TabsFilter<V>(props: TabsFilterProps<V>) {
           }
         }}
         dataHook="collection-tabs-filter"
-        className={st(classes.root)}
         width="100%"
         height={60}
         direction="vertical"