@wix/patterns 1.468.0 → 1.469.0

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MaxHeightText3594640238";
+var _namespace_ = "MaxHeightText587563954";
 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":"MaxHeightText3594640238__root"};
+export var classes = {"root":"MaxHeightText587563954__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_ = "MaxLines1821347204";
+var _namespace_ = "MaxLines1899537561";
 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":"MaxLines1821347204__root"};
+export var classes = {"root":"MaxLines1899537561__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_ = "MultiBulkActionToolbar3973334724";
+var _namespace_ = "MultiBulkActionToolbar4001429243";
 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":"MultiBulkActionToolbar3973334724__root","leftGroupWrapper":"MultiBulkActionToolbar3973334724__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar3973334724__selectedCountItem","selectedCountText":"MultiBulkActionToolbar3973334724__selectedCountText"};
+export var classes = {"root":"MultiBulkActionToolbar4001429243__root","leftGroupWrapper":"MultiBulkActionToolbar4001429243__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar4001429243__selectedCountItem","selectedCountText":"MultiBulkActionToolbar4001429243__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_ = "NestedTablePlaceholderStatesRow2500048676";
+var _namespace_ = "NestedTablePlaceholderStatesRow1449507865";
 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":"NestedTablePlaceholderStatesRow2500048676__root"};
+export var classes = {"root":"NestedTablePlaceholderStatesRow1449507865__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_ = "NestedTableRow1727132175";
+var _namespace_ = "NestedTableRow3864270784";
 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":"NestedTableRow1727132175__root","firstLevel":"NestedTableRow1727132175__firstLevel","placeholder":"NestedTableRow1727132175__placeholder","parentHovered":"NestedTableRow1727132175__parentHovered"};
+export var classes = {"root":"NestedTableRow3864270784__root","firstLevel":"NestedTableRow3864270784__firstLevel","placeholder":"NestedTableRow3864270784__placeholder","parentHovered":"NestedTableRow3864270784__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_ = "MultipleDragOverlayEffect2880892721";
+var _namespace_ = "MultipleDragOverlayEffect1578670324";
 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":"MultipleDragOverlayEffect2880892721__root"};
+export var classes = {"root":"MultipleDragOverlayEffect1578670324__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_ = "NestedTableDragAndDropRow2964883176";
+var _namespace_ = "NestedTableDragAndDropRow1288385230";
 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":"NestedTableDragAndDropRow2964883176__root"};
+export var classes = {"root":"NestedTableDragAndDropRow1288385230__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_ = "PickerContent279598614";
+var _namespace_ = "PickerContent3632886375";
 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":"PickerContent279598614__root"};
+export var classes = {"root":"PickerContent3632886375__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_ = "PickerContentAdditionalStep1268835811";
+var _namespace_ = "PickerContentAdditionalStep1191243546";
 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":"PickerContentAdditionalStep1268835811__root","titles":"PickerContentAdditionalStep1268835811__titles","suffix":"PickerContentAdditionalStep1268835811__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep1191243546__root","titles":"PickerContentAdditionalStep1191243546__titles","suffix":"PickerContentAdditionalStep1191243546__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_ = "PickerTableListItem2152260888";
+var _namespace_ = "PickerTableListItem1935451459";
 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":"PickerTableListItem2152260888__root"};
+export var classes = {"root":"PickerTableListItem1935451459__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_ = "ScrollableContent2295773302";
+var _namespace_ = "ScrollableContent493490318";
 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":"ScrollableContent2295773302__root"};
+export var classes = {"root":"ScrollableContent493490318__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_ = "SetupWidget2579698650";
+var _namespace_ = "SetupWidget2110234757";
 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":"SetupWidget2579698650__root","row":"SetupWidget2579698650__row","completedCta":"SetupWidget2579698650__completedCta","secondaryCta":"SetupWidget2579698650__secondaryCta","card":"SetupWidget2579698650__card","stepIcon":"SetupWidget2579698650__stepIcon","chevron":"SetupWidget2579698650__chevron","chevronDisabled":"SetupWidget2579698650__chevronDisabled","inProgressLabel":"SetupWidget2579698650__inProgressLabel"};
+export var classes = {"root":"SetupWidget2110234757__root","row":"SetupWidget2110234757__row","completedCta":"SetupWidget2110234757__completedCta","secondaryCta":"SetupWidget2110234757__secondaryCta","card":"SetupWidget2110234757__card","stepIcon":"SetupWidget2110234757__stepIcon","chevron":"SetupWidget2110234757__chevron","chevronDisabled":"SetupWidget2110234757__chevronDisabled","inProgressLabel":"SetupWidget2110234757__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_ = "SkeletonCard3666684108";
+var _namespace_ = "SkeletonCard1353692677";
 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":"SkeletonCard3666684108__root","headerLoading":"SkeletonCard3666684108__headerLoading"};
+export var classes = {"root":"SkeletonCard1353692677__root","headerLoading":"SkeletonCard1353692677__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_ = "SlidingModal304127389";
+var _namespace_ = "SlidingModal3699716134";
 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":"SlidingModal304127389__root"};
+export var classes = {"root":"SlidingModal3699716134__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_ = "AddFieldColumnHeader475769976";
+var _namespace_ = "AddFieldColumnHeader3342868055";
 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":"AddFieldColumnHeader475769976__root","anchorLayer":"AddFieldColumnHeader475769976__anchorLayer","popover":"AddFieldColumnHeader475769976__popover","title":"AddFieldColumnHeader475769976__title","hoverBridge":"AddFieldColumnHeader475769976__hoverBridge"};
+export var classes = {"root":"AddFieldColumnHeader3342868055__root","anchorLayer":"AddFieldColumnHeader3342868055__anchorLayer","popover":"AddFieldColumnHeader3342868055__popover","title":"AddFieldColumnHeader3342868055__title","hoverBridge":"AddFieldColumnHeader3342868055__hoverBridge"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "TabsFilter1758085590";
+var _namespace_ = "TabsFilter1621023237";
 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":"TabsFilter1758085590__root","titleBox":"TabsFilter1758085590__titleBox"};
+export var classes = {"root":"TabsFilter1621023237__root","titleBox":"TabsFilter1621023237__titleBox"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "ManageTagsModal323279871";
+var _namespace_ = "ManageTagsModal2882622398";
 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":"ManageTagsModal323279871__root"};
+export var classes = {"root":"ManageTagsModal2882622398__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_ = "ToolbarItem37333139";
+var _namespace_ = "ToolbarItem1460566793";
 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":"ToolbarItem37333139__root"};
+export var classes = {"root":"ToolbarItem1460566793__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_ = "ToolbarItemBox4138502288";
+var _namespace_ = "ToolbarItemBox3952381993";
 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":"ToolbarItemBox4138502288__root"};
+export var classes = {"root":"ToolbarItemBox3952381993__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "common3746632953";
+var _namespace_ = "common1675353889";
 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":"common3746632953__root","column":"common3746632953__column","fullHeight":"common3746632953__fullHeight"};
+export var classes = {"root":"common1675353889__root","column":"common1675353889__column","fullHeight":"common1675353889__fullHeight"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/schema/EntityPageFieldsCard.tsx

@@ -21,7 +21,8 @@ export interface EntityPageFieldsCardProps
   title: string;
   subtitle?: string;
   /**
-   * Field ids to offer, in order. Omitted ⇒ every editable schema field.
+   * Field ids to offer, in order. Omitted ⇒ every schema field; system fields
+   * and the id field show their value read-only and can be hidden.
    * Read once, on the first render — a later change is ignored, since the saved
    * show/hide and order are keyed to the list the card started with.
    */

package/src/state/CollectionPage/CollectionPageHeader.st.css.ts

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

package/src/state/CustomColumnsEntityPageState.ts

@@ -9,8 +9,10 @@ import type { ManageFieldsSource } from './ManageFieldsSource';
 import type { CustomColumnsDragAndDrop } from '../components/CustomColumns/CustomColumnsDragAndDrop';
 import type { CustomColumnsDragAndDropState } from './CustomColumnsDragAndDropState';
 import type { Field, SchemaConfig } from '../types/SchemaConfig';
+import { isEntityPageFieldHideable } from './EntityPage/resolveEntityPageFields';
 
-type SchemaFields = Pick<SchemaConfig, 'id' | 'fields'>;
+type SchemaFields = Pick<SchemaConfig, 'id' | 'fields'> &
+  Partial<Pick<SchemaConfig, 'idField'>>;
 
 export interface CustomColumnsEntityPageStateParams {
   panels: SidePanelsState;
@@ -139,9 +141,10 @@ export class CustomColumnsEntityPageState extends CustomColumnsPanelStateBase {
         if (!field) {
           return null;
         }
-        const isRequired = field.validation?.required === true;
-        const hideable = !isRequired;
-        return fieldToColumn(field, hideable);
+        return fieldToColumn(
+          field,
+          isEntityPageFieldHideable(field, this.schema?.idField),
+        );
       })
       .filter(Boolean) as Column[];
   }

package/src/state/EntityPage/resolveEntityPageFields.ts

@@ -1,25 +1,36 @@
 import type { Field } from '@wix/bex-core';
 
-/** The fields an entity page renders: the given ids, or every editable schema
- *  field. Lives here so the fields component and the card that wraps it offer
- *  the same list. */
+/** The given ids, or every schema field. */
 export function resolveEntityPageFields(
   fields: Record<string, Field | undefined>,
-  idField: string,
   fieldIds?: string[],
 ): Field[] {
-  // An explicit fieldIds list is taken as-is — the consumer chose those fields.
   if (fieldIds) {
     return fieldIds
       .map((id) => fields[id])
       .filter((field): field is Field => Boolean(field));
   }
 
-  // By default, skip the id field and system fields (e.g. `_id`, `_manualSort`,
-  // `_createdDate`): they are not user-editable, and rendering a required one
-  // would silently block save (react-hook-form marks the form invalid).
-  return Object.values(fields).filter(
-    (field): field is Field =>
-      Boolean(field) && !field!.isSystem && field!.id !== idField,
+  return Object.values(fields).filter((field): field is Field =>
+    Boolean(field),
+  );
+}
+
+export function isEntityPageReadOnlyField(
+  field: Field,
+  idField: string | undefined,
+): boolean {
+  return field.isSystem === true || field.id === idField;
+}
+
+// Hiding a required input would leave the form invalid with nothing on screen
+// to fix. A read-only field is not in the form, so its `required` does not
+// apply.
+export function isEntityPageFieldHideable(
+  field: Field,
+  idField: string | undefined,
+): boolean {
+  return (
+    isEntityPageReadOnlyField(field, idField) || !field.validation?.required
   );
 }

package/src/state/EntityPageFieldsCardState.ts

@@ -7,7 +7,10 @@ import {
   type WixPatternsContainer,
 } from '@wix/bex-core';
 import type { CustomColumnsDragAndDrop } from '../components/CustomColumns/CustomColumnsDragAndDrop';
-import { resolveEntityPageFields } from './EntityPage/resolveEntityPageFields';
+import {
+  isEntityPageFieldHideable,
+  resolveEntityPageFields,
+} from './EntityPage/resolveEntityPageFields';
 import type { EntityPageState } from './EntityPage/EntityPageState';
 import { SchemaCardState } from './SchemaCard/SchemaCardState';
 import type { SchemaViewConfig } from './SchemaCard/SchemaFieldsState';
@@ -120,22 +123,18 @@ export class EntityPageFieldsCardState {
     return this.params.pageState.schema ?? this.sourceState?.schema ?? null;
   }
 
-  /** The fields the card offers — empty until the schema loads. A required
-   *  field is not hideable: hiding it would leave the form invalid with nothing
-   *  on screen to fix. */
+  /** The fields the card offers — empty until the schema loads. */
   get declaredFields(): SchemaViewConfig[] {
     const { schema } = this;
     if (!schema) {
       return [];
     }
-    return resolveEntityPageFields(
-      schema.fields,
-      schema.idField,
-      this.params.fieldIds,
-    ).map((field) => ({
-      id: field.id,
-      hideable: !field.validation?.required,
-    }));
+    return resolveEntityPageFields(schema.fields, this.params.fieldIds).map(
+      (field) => ({
+        id: field.id,
+        hideable: isEntityPageFieldHideable(field, schema.idField),
+      }),
+    );
   }
 
   /** What the card renders. Before the schema loads this is whatever the card

package/src/state/FormPage/FormPageHeader.st.css.ts

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

package/src/state/buildEditableFieldColumns.ts

@@ -162,6 +162,12 @@ export function buildEditableFieldColumns(
       name: field.displayName,
       isPrimary: field.isPrimary,
       isSystem: field.isSystem,
+      // Also set by buildFieldColumns, and needed here too: this column reaches
+      // the toolbar through simplifyColumn, which always emits the key, so it
+      // would overwrite the display column's value with undefined.
+      infoTooltipProps: field.helpText
+        ? { content: field.helpText }
+        : undefined,
       hideable: true,
       sortable:
         definition?.capabilities?.sortable ??

package/src/state/buildFieldColumns.tsx

@@ -71,6 +71,9 @@ export function buildFieldColumns(
       isPii: field.isPii,
       isSystem: field.isSystem,
       isPrimary: field.isPrimary,
+      infoTooltipProps: field.helpText
+        ? { content: field.helpText }
+        : undefined,
       fieldType: toFieldType(field.type),
       fieldTypeIcons: definition?.display.icons,
       width: layout.width,