@wix/patterns 1.480.0 → 1.482.0

package/src/components/EditableTable/useCellFocusAndEditing.ts

@@ -25,6 +25,7 @@ export function useCellFocusAndEditing<T, F extends FiltersMap>({
   const isFocused = cellInteraction.isCellFocused(rowKey, columnId);
   const isEditing = cellInteraction.isCellEditing(rowKey, columnId);
   const isEditable = state.isCellEditable(rowKey, columnId);
+  const isToggle = !!resolved?.toggleValue;
 
   // Register the focused cell's DOM element on the state so
   // scrollFocusedCellIntoView can use it. useLayoutEffect ensures
@@ -68,7 +69,13 @@ export function useCellFocusAndEditing<T, F extends FiltersMap>({
           | HTMLInputElement
           | HTMLTextAreaElement
           | null;
-        if (!input || !('selectionStart' in input)) {
+        // selectionStart is null for inputs without a caret (e.g. checkbox),
+        // and setSelectionRange throws on them.
+        if (
+          !input ||
+          !('selectionStart' in input) ||
+          input.selectionStart == null
+        ) {
           return;
         }
         if (input.selectionStart !== input.selectionEnd) {
@@ -80,20 +87,14 @@ export function useCellFocusAndEditing<T, F extends FiltersMap>({
     } else {
       // Don't steal focus if a descendant already has it (e.g. image cell's
       // inner-focus buttons). The gridcell only needs focusing when it isn't
-      // already within the active focus subtree.
-      if (!cellRef.current?.contains(document.activeElement)) {
+      // already within the active focus subtree. Toggle cells are the
+      // exception: their control stays rendered after the edit ends, and
+      // leaving focus on it would keep its focus ring.
+      if (isToggle || !cellRef.current?.contains(document.activeElement)) {
         cellRef.current?.focus({ preventScroll: true });
       }
     }
-  }, [isFocused, isEditing, cellRef, editInputRef]);
-
-  const handleActivate = useCallback(() => {
-    if (resolved?.toggleValue) {
-      state.cellValue.toggleCell(rowKey, columnId);
-    } else {
-      cellInteraction.startEdit();
-    }
-  }, [resolved, state, rowKey, columnId, cellInteraction]);
+  }, [isFocused, isEditing, isToggle, cellRef, editInputRef]);
 
   // Handle Enter and type-to-edit at the cell level
   const onKeyDown = useCallback(
@@ -115,7 +116,9 @@ export function useCellFocusAndEditing<T, F extends FiltersMap>({
           // needs to be true for useClearFocusOnBlur protection.
           editInputRef.current?.focus();
         } else {
-          handleActivate();
+          // Toggle cells too: the first Enter focuses the control, the second
+          // toggles it.
+          cellInteraction.startEdit();
         }
         return;
       }
@@ -197,7 +200,6 @@ export function useCellFocusAndEditing<T, F extends FiltersMap>({
       state,
       cellInteraction,
       resolved,
-      handleActivate,
     ],
   );
 

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "EmptyStateBase1448918574";
+var _namespace_ = "EmptyStateBase3316164224";
 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":"EmptyStateBase1448918574__root"};
+export var classes = {"root":"EmptyStateBase3316164224__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_ = "EntityPagePlain3293418886";
+var _namespace_ = "EntityPagePlain1697787572";
 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":"EntityPagePlain3293418886__root"};
+export var classes = {"root":"EntityPagePlain1697787572__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_ = "Fade1288758040";
+var _namespace_ = "Fade1078031253";
 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":"Fade1288758040__root"};
+export var classes = {"root":"Fade1078031253__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/FieldActions/FieldActions.tsx

@@ -58,6 +58,7 @@ export const FIELD_ACTIONS: Record<FieldActionKey, FieldActionDef> = {
   hideColumn: {
     label: 'Hide Column',
     dataHook: 'field-action-hide',
+    ctaName: 'Hide Column',
     icon: <HiddenSmall />,
   },
   duplicateField: {
@@ -75,16 +76,19 @@ export const FIELD_ACTIONS: Record<FieldActionKey, FieldActionDef> = {
   sortAscending: {
     label: 'Sort Ascending',
     dataHook: 'field-action-sort-ascending',
+    ctaName: 'Sort Ascending',
     icon: <SortAscendingSmall />,
   },
   sortDescending: {
     label: 'Sort Descending',
     dataHook: 'field-action-sort-descending',
+    ctaName: 'Sort Descending',
     icon: <SortDescendingSmall />,
   },
   filter: {
     label: 'Filter',
     dataHook: 'field-action-filter',
+    ctaName: 'Filter',
     icon: <ContentFilterSmall />,
   },
   archive: {
@@ -123,6 +127,7 @@ export interface FieldActionsBIContext {
   reportBi: ReportBI;
   location: string;
   listSize: number;
+  fieldType?: string;
 }
 
 const MENU_OPEN_CTA_NAME = 'More Actions Menu';
@@ -147,6 +152,7 @@ const reportFieldActionCta = (
       numCtas: cta.numCtas,
       numItems: 1,
       url: typeof window !== 'undefined' ? window.location.href : '',
+      fieldType: bi.fieldType,
     }),
   );
 

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Heading3752481639";
+var _namespace_ = "Heading3651262422";
 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":"Heading3752481639__root"};
+export var classes = {"root":"Heading3651262422__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_ = "ImportStepUpload1828701032";
+var _namespace_ = "ImportStepUpload3876726005";
 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":"ImportStepUpload1828701032__root","fileUpload":"ImportStepUpload1828701032__fileUpload"};
+export var classes = {"root":"ImportStepUpload3876726005__root","fileUpload":"ImportStepUpload3876726005__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_ = "InputOverflow3895210399";
+var _namespace_ = "InputOverflow1901873362";
 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":"InputOverflow3895210399__root"};
+export var classes = {"root":"InputOverflow1901873362__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_ = "LoadingRow3071512975";
+var _namespace_ = "LoadingRow1630393075";
 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":"LoadingRow3071512975__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow3071512975__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow1630393075__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow1630393075__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_ = "MaxHeightText3153275981";
+var _namespace_ = "MaxHeightText3317440117";
 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":"MaxHeightText3153275981__root"};
+export var classes = {"root":"MaxHeightText3317440117__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_ = "MaxLines1956434518";
+var _namespace_ = "MaxLines683350652";
 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":"MaxLines1956434518__root"};
+export var classes = {"root":"MaxLines683350652__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/MoreActions/MoreActions.uni.driver.ts

@@ -2,6 +2,7 @@ import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
 import {
   DropdownLayoutUniDriver,
   PopoverMenuUniDriver,
+  TextUniDriver,
   TooltipUniDriver,
 } from '@wix/design-system/dist/testkit/unidriver';
 
@@ -47,11 +48,16 @@ export const MoreActionsUniDriver = (base: UniDriver, body: UniDriver) => {
       const contentElement = await moreActionsPopoverDriver(
         dataHook,
       ).getContentElement();
-      const className = await DropdownLayoutUniDriver(
+      const options = await DropdownLayoutUniDriver(
         contentElement.$('[data-hook="dropdown-base-dropdownlayout"]'),
         body,
-      ).getListItemAttribute(index, 'class');
-      return /---size-\d+-small(?:\s|$)/.test(className);
+      ).options();
+      const option = await options[index].element();
+      const titleSize = await TextUniDriver(
+        option.$('[data-hook="list-item-action-title"]'),
+        body,
+      ).getSize();
+      return titleSize === 'small';
     },
 
     getTooltip: () => {

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MultiBulkActionToolbar721027204";
+var _namespace_ = "MultiBulkActionToolbar1374359917";
 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":"MultiBulkActionToolbar721027204__root","leftGroupWrapper":"MultiBulkActionToolbar721027204__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar721027204__selectedCountItem","selectedCountText":"MultiBulkActionToolbar721027204__selectedCountText"};
+export var classes = {"root":"MultiBulkActionToolbar1374359917__root","leftGroupWrapper":"MultiBulkActionToolbar1374359917__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar1374359917__selectedCountItem","selectedCountText":"MultiBulkActionToolbar1374359917__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_ = "NestedTablePlaceholderStatesRow2413296369";
+var _namespace_ = "NestedTablePlaceholderStatesRow1683735060";
 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":"NestedTablePlaceholderStatesRow2413296369__root"};
+export var classes = {"root":"NestedTablePlaceholderStatesRow1683735060__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_ = "NestedTableRow1562035783";
+var _namespace_ = "NestedTableRow3763711894";
 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":"NestedTableRow1562035783__root","firstLevel":"NestedTableRow1562035783__firstLevel","placeholder":"NestedTableRow1562035783__placeholder","parentHovered":"NestedTableRow1562035783__parentHovered"};
+export var classes = {"root":"NestedTableRow3763711894__root","firstLevel":"NestedTableRow3763711894__firstLevel","placeholder":"NestedTableRow3763711894__placeholder","parentHovered":"NestedTableRow3763711894__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_ = "MultipleDragOverlayEffect2388374358";
+var _namespace_ = "MultipleDragOverlayEffect2380643530";
 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":"MultipleDragOverlayEffect2388374358__root"};
+export var classes = {"root":"MultipleDragOverlayEffect2380643530__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_ = "NestedTableDragAndDropRow840932573";
+var _namespace_ = "NestedTableDragAndDropRow1669533361";
 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":"NestedTableDragAndDropRow840932573__root"};
+export var classes = {"root":"NestedTableDragAndDropRow1669533361__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_ = "PickerContent322007735";
+var _namespace_ = "PickerContent276930412";
 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":"PickerContent322007735__root"};
+export var classes = {"root":"PickerContent276930412__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_ = "PickerContentAdditionalStep4139521200";
+var _namespace_ = "PickerContentAdditionalStep4012172053";
 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":"PickerContentAdditionalStep4139521200__root","titles":"PickerContentAdditionalStep4139521200__titles","suffix":"PickerContentAdditionalStep4139521200__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep4012172053__root","titles":"PickerContentAdditionalStep4012172053__titles","suffix":"PickerContentAdditionalStep4012172053__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_ = "PickerTableListItem573958891";
+var _namespace_ = "PickerTableListItem2221242724";
 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":"PickerTableListItem573958891__root"};
+export var classes = {"root":"PickerTableListItem2221242724__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/SchemaCard/SchemaCard.tsx

@@ -109,7 +109,7 @@ function _SchemaCard({
         <Box padding="SP4" boxSizing="border-box" width="100%">
           <TextButton
             dataHook="schema-card-add-field"
-            onClick={schemaContext.addField}
+            onClick={() => schemaContext.addField?.('Custom fields widget')}
             prefixIcon={<Add />}
           >
             {t('cairo.customFields.addCustomField.CTA')}

package/src/components/SchemaSource/schemaFieldActions.ts

@@ -83,6 +83,9 @@ export const schemaFieldActionHandlers =
       disabledTooltips: schemaFieldDisabledTooltips(field, {
         canEdit,
         canAddFields: s.fieldsSource.fieldManagement?.canAddFields ?? false,
+        canMakePrimary: sourceState.schema
+          ? sourceState.source.canMakePrimary?.(field, sourceState.schema)
+          : undefined,
       }),
       loading: {
         makePrimary: sourceState.makePrimaryTask.status.isLoading,

package/src/components/SchemaSource/schemaFieldDisable.ts

@@ -5,16 +5,16 @@ const TEXT_TYPES = new Set<Field['type']>(['SHORT_TEXT', 'LONG_TEXT']);
 
 /**
  * Per-action disabled tooltips for a schema-source field. Encodes the schema's
- * data-model rules — only a text field can be the primary/display field, system
- * fields are locked, the primary field can't be deleted — which used to live in
- * the shared
- * FieldActions registry. A key present ⇒ that action renders disabled with the
+ * data-model rules — only a text field can be the primary/display field unless
+ * the source's `canMakePrimary` decides, system fields are locked, the primary
+ * field can't be deleted — which used to live in the shared FieldActions
+ * registry. A key present ⇒ that action renders disabled with the
  * tooltip; an action with no handler ignores its entry. Tooltips match the
  * previous (untranslated) registry strings.
  */
 export const schemaFieldDisabledTooltips = (
   field: Field,
-  perms: { canEdit: boolean; canAddFields: boolean },
+  perms: { canEdit: boolean; canAddFields: boolean; canMakePrimary?: boolean },
 ): Partial<Record<FieldActionKey, string>> => {
   const tooltips: Partial<Record<FieldActionKey, string>> = {};
 
@@ -24,7 +24,12 @@ export const schemaFieldDisabledTooltips = (
     tooltips.makePrimary = 'This is the primary field.';
   } else if (field.isSystem) {
     tooltips.makePrimary = "System fields can't be modified.";
-  } else if (!TEXT_TYPES.has(field.type)) {
+  } else if (perms.canMakePrimary === false) {
+    tooltips.makePrimary = "This field can't be made primary.";
+  } else if (
+    perms.canMakePrimary === undefined &&
+    !TEXT_TYPES.has(field.type)
+  ) {
     tooltips.makePrimary = 'Only text fields can be made primary.';
   }
 

package/src/components/SchemaSource/tableSchemaSource.ts

@@ -113,6 +113,9 @@ class TableSchemaSourceImpl<T> implements TableSchemaSource<T> {
   get canDeleteField() {
     return this.source.canDeleteField;
   }
+  get canMakePrimary() {
+    return this.source.canMakePrimary;
+  }
   get schemaParams() {
     return this.source.schemaParams;
   }

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

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

package/src/components/SearchableCollectionContent/SearchableCollectionContent.uni.driver.ts

@@ -3,6 +3,10 @@ import {
   UniDriver,
 } from '@wix/wix-ui-test-utils/unidriver';
 
+// WDS Highlighter exposes no testkit or attribute for its matches; its class
+// contains the component name in every WDS version.
+const HIGHLIGHTED_MATCH_SELECTOR = 'span[class*="highlighter" i]';
+
 export const SearchableCollectionContentUniDriver = (
   base: UniDriver,
   _body: UniDriver,
@@ -10,9 +14,7 @@ export const SearchableCollectionContentUniDriver = (
   return {
     ...baseUniDriverFactory(base),
     getMatchAtIndex: async (index: number) => {
-      // Find all spans with highlighter classes (contains "Highlighter" in the class name)
-      // Based on the HTML structure: <span class="wds_1_181_0_Highlighter__root wds_1_181_0_Highlighter---emphasize-10-background">a</span>
-      const highlightedSpans = await base.$$('span[class*="Highlighter"]');
+      const highlightedSpans = await base.$$(HIGHLIGHTED_MATCH_SELECTOR);
       const spanCount = await highlightedSpans.count();
 
       // Check if the index is valid
@@ -29,8 +31,7 @@ export const SearchableCollectionContentUniDriver = (
       return text?.trim() || '';
     },
     getNumberOfMatches: async () => {
-      // Count all spans with highlighter classes
-      const highlightedSpans = await base.$$('span[class*="Highlighter"]');
+      const highlightedSpans = await base.$$(HIGHLIGHTED_MATCH_SELECTOR);
       return highlightedSpans.count();
     },
   };

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SetupWidget2732674619";
+var _namespace_ = "SetupWidget741893811";
 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":"SetupWidget2732674619__root","row":"SetupWidget2732674619__row","completedCta":"SetupWidget2732674619__completedCta","secondaryCta":"SetupWidget2732674619__secondaryCta","card":"SetupWidget2732674619__card","stepIcon":"SetupWidget2732674619__stepIcon","chevron":"SetupWidget2732674619__chevron","chevronDisabled":"SetupWidget2732674619__chevronDisabled","inProgressLabel":"SetupWidget2732674619__inProgressLabel"};
+export var classes = {"root":"SetupWidget741893811__root","row":"SetupWidget741893811__row","completedCta":"SetupWidget741893811__completedCta","secondaryCta":"SetupWidget741893811__secondaryCta","card":"SetupWidget741893811__card","stepIcon":"SetupWidget741893811__stepIcon","chevron":"SetupWidget741893811__chevron","chevronDisabled":"SetupWidget741893811__chevronDisabled","inProgressLabel":"SetupWidget741893811__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_ = "SkeletonCard1596130277";
+var _namespace_ = "SkeletonCard1214774736";
 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":"SkeletonCard1596130277__root","headerLoading":"SkeletonCard1596130277__headerLoading"};
+export var classes = {"root":"SkeletonCard1214774736__root","headerLoading":"SkeletonCard1214774736__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_ = "SlidingModal2106370411";
+var _namespace_ = "SlidingModal3226727287";
 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":"SlidingModal2106370411__root"};
+export var classes = {"root":"SlidingModal3226727287__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};