@wix/patterns 1.426.0 → 1.430.0

package/src/components/SchemaSource/schemaFieldActions.ts

@@ -28,14 +28,16 @@ export const schemaFieldActionHandlers =
     origin: CustomFieldOrigin;
     location: string;
   }): FieldActionHandlersConfig | null => {
-    const field = s.schema?.fields[fieldId];
+    const { sourceState } = s;
+    const field = sourceState.schema?.fields[fieldId];
     if (!field) {
       return null;
     }
-    const fa = s.fieldActions;
-    const canEdit = s.fieldManagement.canEditField(field);
-    const canDelete = s.schema
-      ? s.source.canDeleteField(field, s.schema)
+    const fa = sourceState.fieldActions;
+    const canEdit =
+      s.fieldsSource.fieldManagement?.canEditField(field) ?? false;
+    const canDelete = sourceState.schema
+      ? sourceState.source.canDeleteField(field, sourceState.schema)
       : false;
 
     const handlers: FieldActionHandlers = {};
@@ -44,14 +46,14 @@ export const schemaFieldActionHandlers =
         panel.openCustomFieldModal({ fieldId, origin });
     }
     if (fa?.makePrimary) {
-      handlers.makePrimary = () => s.makePrimary(fieldId);
+      handlers.makePrimary = () => sourceState.makePrimary(fieldId);
     }
     if (fa?.duplicateField) {
-      handlers.duplicateField = () => s.duplicateField(fieldId);
+      handlers.duplicateField = () => sourceState.duplicateField(fieldId);
     }
     if (fa?.duplicateFieldWithContent) {
       handlers.duplicateFieldWithContent = () =>
-        s.duplicateFieldWithContent(fieldId);
+        sourceState.duplicateFieldWithContent(fieldId);
     }
     if (canDelete && fa?.deleteField) {
       handlers.delete = () =>
@@ -70,12 +72,13 @@ export const schemaFieldActionHandlers =
       handlers,
       disabledTooltips: schemaFieldDisabledTooltips(field, {
         canEdit,
-        canAddFields: s.fieldManagement.canAddFields,
+        canAddFields: s.fieldsSource.fieldManagement?.canAddFields ?? false,
       }),
       loading: {
-        makePrimary: s.makePrimaryTask.status.isLoading,
-        duplicateField: s.duplicateTask.status.isLoading,
-        duplicateFieldWithContent: s.duplicateWithContentTask.status.isLoading,
+        makePrimary: sourceState.makePrimaryTask.status.isLoading,
+        duplicateField: sourceState.duplicateTask.status.isLoading,
+        duplicateFieldWithContent:
+          sourceState.duplicateWithContentTask.status.isLoading,
       },
     };
   };
@@ -84,7 +87,7 @@ export const createSchemaFieldActionsMenu =
   (s: SchemaState<any>) =>
   (panel: CustomFieldsPanelState): FieldActionsMenuBuilder => {
     const handlers = schemaFieldActionHandlers(s, panel);
-    const t = s.container.translate;
+    const t = s.sourceState.container.translate;
     return (args) =>
       buildFieldActionsMenu({
         fieldId: args.fieldId,
@@ -93,9 +96,9 @@ export const createSchemaFieldActionsMenu =
         translate: t,
         tooltipContent: t('cairo.custom-columns.more-actions.tooltip'),
         bi: {
-          reportBi: s.container.reportBi,
+          reportBi: s.sourceState.container.reportBi,
           location: args.location,
-          listSize: s.fields.length,
+          listSize: s.sourceState.fields.length,
         },
       });
   };

package/src/components/SchemaSource/schemaFieldManagement.ts

@@ -1,14 +1,21 @@
-import { FieldDraft, FieldManagement, NonReferenceField } from '@wix/bex-core';
+import {
+  FieldDraft,
+  FieldManagement,
+  NonReferenceField,
+  SourceState,
+} from '@wix/bex-core';
 import { runInAction } from 'mobx';
-import type { SchemaState } from './SchemaState';
+import { standardFieldTypeLabels } from './standardFieldTypeLabels';
 
 /**
- * Builds the source-neutral FieldManagement over SchemaState. add/edit/delete
- * call the schema's FieldActions, then merge the returned fields into the loaded
- * schema so the columns update from the response (no reload). The creatable
- * types, permissions, and can-edit/add rules come from the source.
+ * Builds the source-neutral FieldManagement over a source's state. add/edit/
+ * delete call the schema's FieldActions, then merge the returned fields into
+ * the loaded schema so the columns update from the response (no reload). The
+ * creatable types, permissions, and can-edit/add rules come from the source.
  */
-export const schemaFieldManagement = (s: SchemaState<any>): FieldManagement => {
+export const schemaFieldManagement = (
+  sourceState: SourceState<any>,
+): FieldManagement => {
   const draftToField = (draft: FieldDraft): NonReferenceField => ({
     id: draft.key,
     displayName: draft.name,
@@ -19,29 +26,32 @@ export const schemaFieldManagement = (s: SchemaState<any>): FieldManagement => {
 
   return {
     get canAddFields() {
-      return s.schema ? s.source.canAddFields(s.schema) : false;
+      const { schema, source } = sourceState;
+      return schema ? source.canAddFields(schema) : false;
     },
     addFieldDisabled: false,
-    canEditField: (field) =>
-      s.schema ? s.source.canEditField(field, s.schema) : false,
-    supportsPii: s.source.supportsPii,
-    permissions: s.source.fieldPermissions,
+    canEditField: (field) => {
+      const { schema, source } = sourceState;
+      return schema ? source.canEditField(field, schema) : false;
+    },
+    supportsPii: sourceState.source.supportsPii,
+    permissions: sourceState.source.fieldPermissions,
     // Self-contained: does the delete and reports its own toast (matching the
     // DataExtension source). Rethrows on failure so the shared delete modal stays
     // open for a retry.
     deleteField: async (fieldId) => {
       try {
-        const fields = await s.fieldActions?.deleteField?.(fieldId);
+        const fields = await sourceState.fieldActions?.deleteField?.(fieldId);
         if (fields) {
-          runInAction(() => s.mergeFields(fields));
+          runInAction(() => sourceState.mergeFields(fields));
         }
-        s.notify({
+        sourceState.notify({
           type: 'SUCCESS',
           message: 'Field deleted',
           biName: 'cairo-field-action-delete-success',
         });
       } catch (e) {
-        s.notify({
+        sourceState.notify({
           type: 'ERROR',
           message: "Couldn't delete field",
           biName: 'cairo-field-action-delete-error',
@@ -51,36 +61,48 @@ export const schemaFieldManagement = (s: SchemaState<any>): FieldManagement => {
     },
 
     get creatableFieldTypes() {
-      const t = s.container.translate;
-      return s.source.creatableFieldTypes.map((ft) => ({
-        id: ft.patternsType,
-        label: t(ft.labelKey),
-        namePlaceholder: ft.namePlaceholderKey
-          ? t(ft.namePlaceholderKey)
-          : undefined,
-        patternsType: ft.patternsType,
-      }));
+      const t = sourceState.container.translate;
+      return sourceState.source.creatableFieldTypes.map((ft) => {
+        // The standard pair applies only when the source didn't custom-label
+        // the entry — a custom label with the standard placeholder would show
+        // contradictory copy (the modal falls back to its generic placeholder).
+        const standard =
+          ft.label == null
+            ? standardFieldTypeLabels[ft.patternsType]
+            : undefined;
+        return {
+          id: ft.patternsType,
+          label:
+            ft.label ?? (standard ? t(standard.labelKey) : ft.patternsType),
+          namePlaceholder:
+            ft.namePlaceholder ??
+            (standard ? t(standard.namePlaceholderKey) : undefined),
+          patternsType: ft.patternsType,
+        };
+      });
     },
     get existingFieldKeys() {
-      return s.fields.map((f) => f.id);
+      return sourceState.fields.map((f) => f.id);
     },
 
     addField: async (draft) => {
-      const fields = await s.fieldActions?.addField?.(draftToField(draft));
+      const fields = await sourceState.fieldActions?.addField?.(
+        draftToField(draft),
+      );
       if (fields) {
-        runInAction(() => s.mergeFields(fields));
+        runInAction(() => sourceState.mergeFields(fields));
       }
     },
     editField: async (fieldId, draft) => {
-      const fields = await s.fieldActions?.editField?.(fieldId, {
+      const fields = await sourceState.fieldActions?.editField?.(fieldId, {
         displayName: draft.name,
       });
       if (fields) {
-        runInAction(() => s.mergeFields(fields));
+        runInAction(() => sourceState.mergeFields(fields));
       }
     },
     getFieldDraft: (fieldId) => {
-      const field = s.schema?.fields[fieldId];
+      const field = sourceState.schema?.fields[fieldId];
       if (!field) {
         return undefined;
       }

package/src/components/SchemaSource/schemaFieldsSource.ts

@@ -1,5 +1,6 @@
 import type { FieldsSource } from '@wix/bex-core';
 import type { SchemaState } from './SchemaState';
+import { schemaFieldManagement } from './schemaFieldManagement';
 
 /**
  * Exposes SchemaState as a source-neutral FieldsSource. Reads through to the
@@ -7,17 +8,18 @@ import type { SchemaState } from './SchemaState';
  * archiving, so those members are omitted.
  */
 export const schemaFieldsSource = (s: SchemaState<any>): FieldsSource => {
+  const { sourceState } = s;
   const source: FieldsSource = {
-    load: () => s.load(),
+    load: () => sourceState.load(),
 
     get fields() {
-      return s.fields;
+      return sourceState.fields;
     },
     get filterableFields() {
       return s.filterableFields;
     },
     get manageableFields() {
-      return s.fields.filter((f) => !f.isSystem);
+      return sourceState.fields.filter((f) => !f.isSystem);
     },
     columnIdForField: (field) => field.id,
     queryFieldId: (field) => field.id,
@@ -27,15 +29,15 @@ export const schemaFieldsSource = (s: SchemaState<any>): FieldsSource => {
       [field.id]: value,
     }),
 
-    fieldManagement: s.fieldManagement,
+    fieldManagement: schemaFieldManagement(sourceState),
     get fieldActions() {
-      return s.fieldActions;
+      return sourceState.fieldActions;
     },
 
     // Merge a returned fields map into the loaded schema (e.g. after an import
-    // creates fields). `mergeFields` is a SchemaState action, so the columns
+    // creates fields). `mergeFields` is a SourceState action, so the columns
     // rebuild reactively with no refetch.
-    mergeFields: (fields) => s.mergeFields(fields),
+    mergeFields: (fields) => sourceState.mergeFields(fields),
   };
 
   return source;

package/src/components/SchemaSource/standardFieldTypeLabels.ts

@@ -0,0 +1,47 @@
+import type { PatternsFieldType, TranslationsKeys } from '@wix/bex-core';
+
+/**
+ * The add-field modal's standard name and name-input placeholder per creatable
+ * field type, used when a source declares a type without a custom label.
+ * NUMBER uses the integer variant's copy.
+ */
+export const standardFieldTypeLabels: Partial<
+  Record<
+    PatternsFieldType,
+    { labelKey: TranslationsKeys; namePlaceholderKey: TranslationsKeys }
+  >
+> = {
+  SHORT_TEXT: {
+    labelKey: 'cairo.customFields.fieldType.shortText',
+    namePlaceholderKey:
+      'cairo.customFields.fieldType.shortText.Name.placeholder',
+  },
+  LONG_TEXT: {
+    labelKey: 'cairo.customFields.fieldType.longText',
+    namePlaceholderKey:
+      'cairo.customFields.fieldType.longText.Name.placeholder',
+  },
+  NUMBER: {
+    labelKey: 'cairo.customFields.fieldType.numberInteger',
+    namePlaceholderKey:
+      'cairo.customFields.fieldType.numberInteger.Name.placeholder',
+  },
+  BOOLEAN: {
+    labelKey: 'cairo.customFields.fieldType.checkbox',
+    namePlaceholderKey:
+      'cairo.customFields.fieldType.checkbox.Name.placeholder',
+  },
+  DATE: {
+    labelKey: 'cairo.customFields.fieldType.date',
+    namePlaceholderKey: 'cairo.customFields.fieldType.date.Name.placeholder',
+  },
+  DATETIME: {
+    labelKey: 'cairo.customFields.fieldType.dateAndTime',
+    namePlaceholderKey:
+      'cairo.customFields.fieldType.dateAndTime.Name.placeholder',
+  },
+  URL: {
+    labelKey: 'cairo.customFields.fieldType.url',
+    namePlaceholderKey: 'cairo.customFields.placeholder.url',
+  },
+};

package/src/components/SchemaSource/tableSchemaSource.ts

@@ -1,5 +1,7 @@
+import { SourceState } from '@wix/bex-core';
 import type { SchemaSource } from '@wix/bex-core';
 import type { FieldsSourceProvider } from '../fieldsSourceProvider';
+import type { ToolbarCollectionState } from '../../state';
 import { SchemaState } from './SchemaState';
 
 /**
@@ -8,10 +10,7 @@ import { SchemaState } from './SchemaState';
  * in the table hook — keeps it out of the core table bundle; only consumers that
  * call `tableSchemaSource` pull it in.
  *
- * It stays the full config, so you can still spread and override it. `setOnTable`
- * reads `this`, so any overrides on the (possibly spread) object take effect.
- *
- * `schemaState` exposes the attached state so `useSchemaImport` reads the same
+ * `schemaState` exposes the attached state so the import reads the same
  * live schema the table renders — import always matches the visible columns
  * (including fields it just created, or ones added via the field-management
  * panel), rather than a separate loaded copy.
@@ -21,24 +20,96 @@ export type TableSchemaSource<T = Record<string, unknown>> = SchemaSource<T> &
     readonly schemaState?: SchemaState<T>;
   };
 
-export const tableSchemaSource = <T>(
-  source: SchemaSource<T>,
-): TableSchemaSource<T> => {
-  // Created once on attach and reused, so the table and `useSchemaImport` share
-  // one SchemaState (and one load).
-  let state: SchemaState<T> | undefined;
+/**
+ * Implemented as a class (not an object literal with a `get schemaState()` after
+ * `...source`): a getter placed in a spread literal is evaluated once and
+ * flattened to a static `undefined` data property by Object.assign-based (loose)
+ * object-spread transpilation, which silently drops the live binding — so
+ * the import would never see the loaded fields. A prototype accessor is
+ * always a real accessor, immune to that.
+ *
+ * The wrapped source's members (`collectionConfig`, `loadSchema`, …) are copied
+ * onto the instance so it's usable anywhere a `SchemaSource` is; `state` is
+ * created once on attach and reused, so the table and the import share
+ * one SchemaState (and one load).
+ */
+class TableSchemaSourceImpl<T> implements TableSchemaSource<T> {
+  private state?: SchemaState<T>;
+  private readonly source: SchemaSource<T>;
+
+  // A field + body assignment (not a constructor parameter property — the docs
+  // Storybook's Babel doesn't strip that TS syntax).
+  constructor(source: SchemaSource<T>) {
+    this.source = source;
+  }
 
-  return {
-    ...source,
-    get schemaState() {
-      return state;
-    },
-    setOnTable(toolbar) {
-      state ??= new SchemaState<T>({
+  // Delegate the SchemaSource surface to the wrapped source via getters, so the
+  // instance always reflects it with no copies to keep in sync. Prototype
+  // accessors (unlike a getter inside a `...source` spread literal) survive
+  // Object.assign-based (loose) object-spread transpilation.
+  get collectionId() {
+    return this.source.collectionId;
+  }
+  get paginationMode() {
+    return this.source.paginationMode;
+  }
+  get itemKey() {
+    return this.source.itemKey;
+  }
+  get itemName() {
+    return this.source.itemName;
+  }
+  get getFieldValue() {
+    return this.source.getFieldValue;
+  }
+  get setFieldValue() {
+    return this.source.setFieldValue;
+  }
+  get references() {
+    return this.source.references;
+  }
+  get creatableFieldTypes() {
+    return this.source.creatableFieldTypes;
+  }
+  get fieldPermissions() {
+    return this.source.fieldPermissions;
+  }
+  get supportsPii() {
+    return this.source.supportsPii;
+  }
+  get loadSchema() {
+    return this.source.loadSchema;
+  }
+  get searchableFieldIds() {
+    return this.source.searchableFieldIds;
+  }
+  get canAddFields() {
+    return this.source.canAddFields;
+  }
+  get canEditField() {
+    return this.source.canEditField;
+  }
+  get canDeleteField() {
+    return this.source.canDeleteField;
+  }
+
+  get schemaState(): SchemaState<T> | undefined {
+    return this.state;
+  }
+
+  setOnTable(toolbar: ToolbarCollectionState<any, any>): void {
+    this.state ??= new SchemaState<T>({
+      sourceState: new SourceState<T>({
         container: toolbar.container,
-        source: this,
-      });
-      state.setOnTable(toolbar);
-    },
-  };
-};
+        source: this.source,
+      }),
+    });
+    this.state.setOnTable(toolbar);
+  }
+}
+
+/** @deprecated Pass the source to a `@wix/patterns/schema` collection hook
+ *  instead — no wrapper needed. */
+export const tableSchemaSource = <T>(
+  source: SchemaSource<T>,
+): TableSchemaSource<T> => new TableSchemaSourceImpl<T>(source);

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ScrollableContent350807700";
+var _namespace_ = "ScrollableContent2970276407";
 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":"ScrollableContent350807700__root"};
+export var classes = {"root":"ScrollableContent2970276407__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_ = "SetupWidget1455868437";
+var _namespace_ = "SetupWidget525839026";
 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":"SetupWidget1455868437__root","row":"SetupWidget1455868437__row","completedCta":"SetupWidget1455868437__completedCta","card":"SetupWidget1455868437__card","stepIcon":"SetupWidget1455868437__stepIcon","chevron":"SetupWidget1455868437__chevron","chevronDisabled":"SetupWidget1455868437__chevronDisabled","inProgressLabel":"SetupWidget1455868437__inProgressLabel"};
+export var classes = {"root":"SetupWidget525839026__root","row":"SetupWidget525839026__row","completedCta":"SetupWidget525839026__completedCta","card":"SetupWidget525839026__card","stepIcon":"SetupWidget525839026__stepIcon","chevron":"SetupWidget525839026__chevron","chevronDisabled":"SetupWidget525839026__chevronDisabled","inProgressLabel":"SetupWidget525839026__inProgressLabel"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/SingleSelectFilterBase/SingleSelectFilterBase.tsx

@@ -10,6 +10,7 @@ import { DropdownSelectState } from '../../state';
 import { BuildSectionOptionsArgs, ListItem } from '../../hooks';
 import { FilterProps } from '../../model';
 import { useWindowFlipPopoverProps } from '../../utils/useWindowFlipPopoverProps';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
 export type KeyedItemOption<T> = DropdownLayoutOption & {
   keyedItem: KeyedItem<T>;
@@ -48,6 +49,7 @@ function _SingleSelectFilterBase<V>(props: SingleSelectFilterBaseProps<V>) {
   const { windowFlipPopoverProps, inputRef } = useWindowFlipPopoverProps({
     popoverProps,
   });
+  const isBmHarmonyTheme = useBmHarmonyTheme();
 
   return (
     <Dropdown
@@ -55,7 +57,7 @@ function _SingleSelectFilterBase<V>(props: SingleSelectFilterBaseProps<V>) {
         inputRef.current = ref;
       }}
       dataHook={`collection-filter-${filter.name}`}
-      border="round"
+      border={isBmHarmonyTheme ? undefined : 'round'}
       closeOnSelect
       options={options}
       clearButton={clearButton}

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SkeletonCard2287561488";
+var _namespace_ = "SkeletonCard163200451";
 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":"SkeletonCard2287561488__root","headerLoading":"SkeletonCard2287561488__headerLoading"};
+export var classes = {"root":"SkeletonCard163200451__root","headerLoading":"SkeletonCard163200451__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_ = "SlidingModal2066405265";
+var _namespace_ = "SlidingModal659202655";
 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":"SlidingModal2066405265__root"};
+export var classes = {"root":"SlidingModal659202655__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/TabTotal/TabTotalCounterBadge.tsx

@@ -7,6 +7,7 @@ import {
 } from './useFilterValueTotalState';
 import { FiltersMap } from '@wix/bex-core';
 import { initTabTotal } from '../../state/initTabTotal';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
 export interface TabCounterBadgeProps<V, T, F extends FiltersMap>
   extends UseFilterValueTotalStateParams<V, T, F>,
@@ -15,7 +16,11 @@ export interface TabCounterBadgeProps<V, T, F extends FiltersMap>
 function _TabCounterBadge<V, T = unknown, F extends FiltersMap = FiltersMap>(
   props: TabCounterBadgeProps<V, T, F>,
 ) {
-  const { value, skin = 'neutralStandard', ...rest } = props;
+  const isHarmonyTheme = useBmHarmonyTheme();
+  const defaultSkin = isHarmonyTheme ? 'general' : 'neutralStandard';
+  const defaultSize = isHarmonyTheme ? 'tiny' : 'small';
+
+  const { value, skin = defaultSkin, size = defaultSize, ...rest } = props;
   const state = useFilterValueTotalState(props);
 
   const {
@@ -23,7 +28,7 @@ function _TabCounterBadge<V, T = unknown, F extends FiltersMap = FiltersMap>(
   } = state;
 
   return totalStatus === 'success' && lifecycleState === 'result' ? (
-    <CounterBadge skin={skin} {...rest}>
+    <CounterBadge size={size} skin={skin} {...rest}>
       {total}
     </CounterBadge>
   ) : null;

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

@@ -0,0 +1,36 @@
+.root {
+  display: inline-flex;
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+}
+
+.title {
+  display: flex;
+  width: 100%;
+  min-width: 0;
+}
+
+/* Invisible hit-area around the IconButton so the cursor can travel from the
+   title up to the button without leaving the hover area (interactive=true
+   keeps the popover open while hovering the content). padding-bottom matches
+   moveBy.y so the bridge reaches the title's top edge. */
+.hoverBridge {
+  display: inline-block;
+  padding: 4px 13px 4px 4px;
+  background: transparent;
+}
+
+/* Popover content is portaled to <body> via appendTo="window", so it isn't a
+   descendant of the trigger. WDS sets data-content-element on the portaled
+   element to a unique id that includes our dataHook ("add-field-popover"),
+   so we link to it that way. */
+:global(
+    [data-content-element^='popover-content-add-field-popover-'][data-hook='popover-content'][class]
+  ) {
+  background: transparent;
+  border: none;
+  box-shadow: none;
+  border-radius: 0;
+  padding: 0;
+}

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

@@ -0,0 +1,25 @@
+// @ts-nocheck
+
+
+import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
+
+
+
+var _namespace_ = "AddFieldColumnHeader4116971040";
+var _style_ = classesRuntime.bind(null, _namespace_);
+
+export var cssStates = statesRuntime.bind(null, _namespace_);
+export var style = _style_;
+export var st: import("@stylable/runtime").STFunction = _style_;
+
+export var namespace = _namespace_;
+export var classes = {"root":"AddFieldColumnHeader4116971040__root","title":"AddFieldColumnHeader4116971040__title","hoverBridge":"AddFieldColumnHeader4116971040__hoverBridge"};
+export var keyframes = {}; 
+export var layers = {};
+export var containers = {};
+export var stVars = {}; 
+export var vars = {}; 
+
+
+
+