@wix/patterns 1.448.0 → 1.449.0

package/src/components/EmptyState/EmptyStateBase.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "EmptyStateBase2972589660";
+var _namespace_ = "EmptyStateBase4129790249";
 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":"EmptyStateBase2972589660__root"};
+export var classes = {"root":"EmptyStateBase4129790249__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_ = "EntityPagePlain4043913473";
+var _namespace_ = "EntityPagePlain1646857300";
 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":"EntityPagePlain4043913473__root"};
+export var classes = {"root":"EntityPagePlain1646857300__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_ = "Fade1668629967";
+var _namespace_ = "Fade2249166449";
 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":"Fade1668629967__root"};
+export var classes = {"root":"Fade2249166449__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_ = "Heading4157349532";
+var _namespace_ = "Heading121350323";
 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":"Heading4157349532__root"};
+export var classes = {"root":"Heading121350323__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/ImportButton/ImportStepUpload.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ImportStepUpload2412524095";
+var _namespace_ = "ImportStepUpload1101526918";
 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":"ImportStepUpload2412524095__root","fileUpload":"ImportStepUpload2412524095__fileUpload"};
+export var classes = {"root":"ImportStepUpload1101526918__root","fileUpload":"ImportStepUpload1101526918__fileUpload"};
 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_ = "InputOverflow3047815737";
+var _namespace_ = "InputOverflow2520141165";
 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":"InputOverflow3047815737__root"};
+export var classes = {"root":"InputOverflow2520141165__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_ = "LoadingRow341580875";
+var _namespace_ = "LoadingRow3388347116";
 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":"LoadingRow341580875__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow341580875__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow3388347116__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow3388347116__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_ = "MaxHeightText173816493";
+var _namespace_ = "MaxHeightText493823936";
 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":"MaxHeightText173816493__root"};
+export var classes = {"root":"MaxHeightText493823936__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_ = "MaxLines2999672862";
+var _namespace_ = "MaxLines2821947960";
 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":"MaxLines2999672862__root"};
+export var classes = {"root":"MaxLines2821947960__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_ = "MultiBulkActionToolbar2726287797";
+var _namespace_ = "MultiBulkActionToolbar1681003559";
 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":"MultiBulkActionToolbar2726287797__root","leftGroupWrapper":"MultiBulkActionToolbar2726287797__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar2726287797__selectedCountItem","selectedCountText":"MultiBulkActionToolbar2726287797__selectedCountText"};
+export var classes = {"root":"MultiBulkActionToolbar1681003559__root","leftGroupWrapper":"MultiBulkActionToolbar1681003559__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar1681003559__selectedCountItem","selectedCountText":"MultiBulkActionToolbar1681003559__selectedCountText"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTablePlaceholderStatesRow1317184787";
+var _namespace_ = "NestedTablePlaceholderStatesRow2027767742";
 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":"NestedTablePlaceholderStatesRow1317184787__root"};
+export var classes = {"root":"NestedTablePlaceholderStatesRow2027767742__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_ = "NestedTableRow3387766753";
+var _namespace_ = "NestedTableRow1044508703";
 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":"NestedTableRow3387766753__root","firstLevel":"NestedTableRow3387766753__firstLevel","placeholder":"NestedTableRow3387766753__placeholder","parentHovered":"NestedTableRow3387766753__parentHovered"};
+export var classes = {"root":"NestedTableRow1044508703__root","firstLevel":"NestedTableRow1044508703__firstLevel","placeholder":"NestedTableRow1044508703__placeholder","parentHovered":"NestedTableRow1044508703__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_ = "MultipleDragOverlayEffect4030766872";
+var _namespace_ = "MultipleDragOverlayEffect1852040764";
 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":"MultipleDragOverlayEffect4030766872__root"};
+export var classes = {"root":"MultipleDragOverlayEffect1852040764__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_ = "NestedTableDragAndDropRow1938450215";
+var _namespace_ = "NestedTableDragAndDropRow3558615481";
 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":"NestedTableDragAndDropRow1938450215__root"};
+export var classes = {"root":"NestedTableDragAndDropRow3558615481__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_ = "PickerContent1207852199";
+var _namespace_ = "PickerContent396127304";
 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":"PickerContent1207852199__root"};
+export var classes = {"root":"PickerContent396127304__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_ = "PickerContentAdditionalStep3295160460";
+var _namespace_ = "PickerContentAdditionalStep3143450510";
 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":"PickerContentAdditionalStep3295160460__root","titles":"PickerContentAdditionalStep3295160460__titles","suffix":"PickerContentAdditionalStep3295160460__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep3143450510__root","titles":"PickerContentAdditionalStep3143450510__titles","suffix":"PickerContentAdditionalStep3143450510__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_ = "PickerTableListItem2371250403";
+var _namespace_ = "PickerTableListItem3262638855";
 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":"PickerTableListItem2371250403__root"};
+export var classes = {"root":"PickerTableListItem3262638855__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/ReferenceFieldFilter/ReferenceFieldFilter.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { OffsetQuery } from '@wix/bex-core';
-import { ReferenceAvatar } from '@wix/patterns-fields';
+import { ReferenceAvatar, useTranslations } from '@wix/patterns-fields';
 import { useFilterCollection } from '../../hooks/useFilterCollection';
 import { MultiSelectCollectionFilter } from '../MultiSelectCollectionFilter';
 import type { FilterProps } from '../../model';
@@ -16,10 +16,16 @@ export type FetchReferenceItems = (
  * way the reference cell's editor does, so a row is recognizable by more than
  * its display name.
  */
-export const referenceFilterOption = (item: ReferenceItem): ListItem => ({
-  title: item.name,
-  prefix: <ReferenceAvatar name={item.name} image={item.image} />,
-});
+export const referenceFilterOption =
+  (translate: ReturnType<typeof useTranslations>['t']) =>
+  (item: ReferenceItem): ListItem => {
+    const name = item.name || translate('patterns-fields.reference.untitled');
+
+    return {
+      title: name,
+      prefix: <ReferenceAvatar name={name} image={item.image} />,
+    };
+  };
 
 /**
  * Names the options collection's cache entry.
@@ -57,6 +63,8 @@ export interface ReferenceFieldFilterProps
  */
 export const ReferenceFieldFilter = (props: ReferenceFieldFilterProps) => {
   const { fetchItems, fieldId, referencedCollectionId, ...filterProps } = props;
+  const { t } = useTranslations();
+  const renderItem = React.useMemo(() => referenceFilterOption(t), [t]);
 
   const collection = useFilterCollection<ReferenceItem>(props.filter, {
     queryName: referenceFilterQueryName(referencedCollectionId, fieldId),
@@ -67,7 +75,7 @@ export const ReferenceFieldFilter = (props: ReferenceFieldFilterProps) => {
     <MultiSelectCollectionFilter
       {...filterProps}
       collection={collection}
-      renderItem={referenceFilterOption}
+      renderItem={renderItem}
     />
   );
 };

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ScrollableContent4182818010";
+var _namespace_ = "ScrollableContent3969433939";
 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":"ScrollableContent4182818010__root"};
+export var classes = {"root":"ScrollableContent3969433939__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SetupWidget799516824";
+var _namespace_ = "SetupWidget2850626784";
 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":"SetupWidget799516824__root","row":"SetupWidget799516824__row","completedCta":"SetupWidget799516824__completedCta","secondaryCta":"SetupWidget799516824__secondaryCta","card":"SetupWidget799516824__card","stepIcon":"SetupWidget799516824__stepIcon","chevron":"SetupWidget799516824__chevron","chevronDisabled":"SetupWidget799516824__chevronDisabled","inProgressLabel":"SetupWidget799516824__inProgressLabel"};
+export var classes = {"root":"SetupWidget2850626784__root","row":"SetupWidget2850626784__row","completedCta":"SetupWidget2850626784__completedCta","secondaryCta":"SetupWidget2850626784__secondaryCta","card":"SetupWidget2850626784__card","stepIcon":"SetupWidget2850626784__stepIcon","chevron":"SetupWidget2850626784__chevron","chevronDisabled":"SetupWidget2850626784__chevronDisabled","inProgressLabel":"SetupWidget2850626784__inProgressLabel"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SkeletonCard571625231";
+var _namespace_ = "SkeletonCard2603318609";
 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":"SkeletonCard571625231__root","headerLoading":"SkeletonCard571625231__headerLoading"};
+export var classes = {"root":"SkeletonCard2603318609__root","headerLoading":"SkeletonCard2603318609__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_ = "SlidingModal1418578916";
+var _namespace_ = "SlidingModal2938545875";
 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":"SlidingModal1418578916__root"};
+export var classes = {"root":"SlidingModal2938545875__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Table/AddFieldColumnHeader.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "AddFieldColumnHeader1179865257";
+var _namespace_ = "AddFieldColumnHeader1907546462";
 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":"AddFieldColumnHeader1179865257__root","title":"AddFieldColumnHeader1179865257__title","hoverBridge":"AddFieldColumnHeader1179865257__hoverBridge"};
+export var classes = {"root":"AddFieldColumnHeader1907546462__root","title":"AddFieldColumnHeader1907546462__title","hoverBridge":"AddFieldColumnHeader1907546462__hoverBridge"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/TabsFilter/TabTitle.tsx

@@ -3,14 +3,13 @@ import React, { useEffect, ReactNode, useRef } from 'react';
 import { observer } from 'mobx-react-lite';
 import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 import { TabsResponsiveState } from './TabsResponsiveState';
-import { classes, st } from './TabsFilter.st.css.js';
+import { classes } from './TabsFilter.st.css.js';
 
 export interface TabTitleProps<V> {
   tabIndex: number;
   state: TabsResponsiveState;
   text?: string;
   value: V | null | undefined;
-  active?: boolean;
   counterBadge?: (value: V | null | undefined) => ReactNode;
 }
 
@@ -19,7 +18,6 @@ function _TabTitle<V>({
   state,
   text,
   value,
-  active,
   counterBadge,
 }: TabTitleProps<V>) {
   const badge = counterBadge?.(value);
@@ -38,14 +36,18 @@ function _TabTitle<V>({
 
   return (
     <Box
-      className={st(classes.root, { selected: !!active })}
+      className={classes.root}
       dataHook="tabs-filter-tab-title"
       verticalAlign="middle"
       align="center"
     >
-      <Box maxWidth={state.itemMaxWidth} flexShrink={1} minWidth={0}>
+      <Box
+        className={classes.titleBox}
+        maxWidth={state.itemMaxWidth}
+        flexShrink={1}
+        minWidth={0}
+      >
         <Text
-          className={st(classes.title)}
           dataHook="title-text"
           ellipsis
           size={isBmHarmonyTheme ? 'small' : undefined}

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

@@ -1,18 +1,5 @@
-@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: 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));
+/* WDS adds a wrapper element around the label when it truncates, and that wrapper
+   sets its own color. The * reaches the wrapper and the text inside it. */
+.root .titleBox * {
+  color: inherit !important;
 }

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "TabsFilter3593242826";
+var _namespace_ = "TabsFilter4199202321";
 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":"TabsFilter3593242826__root","title":"TabsFilter3593242826__title"};
+export var classes = {"root":"TabsFilter4199202321__root","titleBox":"TabsFilter4199202321__titleBox"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 
-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"}; 
+export var vars = {}; 
 
 
 

package/src/components/TabsFilter/TabsFilter.tsx

@@ -162,7 +162,6 @@ function _TabsFilter<V>(props: TabsFilterProps<V>) {
             state={responsive}
             text={itemName(value)}
             value={value}
-            active={selectedId === id}
             counterBadge={hideCounterBadge ? undefined : counterBadge}
           />
         ),
@@ -189,7 +188,6 @@ function _TabsFilter<V>(props: TabsFilterProps<V>) {
           state={responsive}
           text={all}
           value={undefined}
-          active={selectedId === ALL_TAB_ITEM_ID}
           counterBadge={hideCounterBadge ? undefined : counterBadge}
         />
       ),
@@ -211,7 +209,6 @@ function _TabsFilter<V>(props: TabsFilterProps<V>) {
     disabled,
     responsive.panelMinWidth,
     hideCounterBadge,
-    selectedId,
   ]);
 
   useEffect(

package/src/components/Tags/ManageTags/ManageTagsModal/ManageTagsModal.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "ManageTagsModal1381519493";
+var _namespace_ = "ManageTagsModal1052133035";
 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":"ManageTagsModal1381519493__root"};
+export var classes = {"root":"ManageTagsModal1052133035__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ToolbarItem3283321930";
+var _namespace_ = "ToolbarItem3030730344";
 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":"ToolbarItem3283321930__root"};
+export var classes = {"root":"ToolbarItem3030730344__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ToolbarItemBox382728702";
+var _namespace_ = "ToolbarItemBox833067609";
 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":"ToolbarItemBox382728702__root"};
+export var classes = {"root":"ToolbarItemBox833067609__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};