@atlaskit/editor-plugin-table 42.2.8 → 42.3.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/editor-plugin-table
 
+## 42.3.0
+
+### Minor Changes
+
+- [`e495ce10dcb71`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e495ce10dcb71) -
+  [EDITOR-9904] Keep the table cell options button on its header cell when the editor width or the
+  table's column widths change, with the header stuck or not, behind
+  platform_editor_sticky_cell_options_position
+
+### Patch Changes
+
+- Updated dependencies
+
+## 42.2.9
+
+### Patch Changes
+
+- [`38e1e35d8bf89`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/38e1e35d8bf89) -
+  Clean up experiment `platform_editor_table_q4_patch_8`
+- Updated dependencies
+
 ## 42.2.8
 
 ### Patch Changes

package/dist/cjs/ui/FloatingContextualButton/FixedButton.js

@@ -28,7 +28,9 @@ var calcObserverTargetMargin = exports.calcObserverTargetMargin = function calcO
   return fixedButtonRect.left - tableWrapperRect.left + scrollLeft;
 };
 var FixedButton = exports.FixedButton = function FixedButton(_ref2) {
-  var children = _ref2.children,
+  var _ref2$cellLayoutVersi = _ref2.cellLayoutVersion,
+    cellLayoutVersion = _ref2$cellLayoutVersi === void 0 ? 0 : _ref2$cellLayoutVersi,
+    children = _ref2.children,
     isContextualMenuOpen = _ref2.isContextualMenuOpen,
     mountTo = _ref2.mountTo,
     offset = _ref2.offset,
@@ -92,10 +94,24 @@ var FixedButton = exports.FixedButton = function FixedButton(_ref2) {
     }
   }, [fixedButtonRef, observerTargetRef, tableWrapper, targetCellPosition, targetCellRef, isContextualMenuOpen]);
   var fixedButtonTop = 0;
+
+  // The left position below is read from the cell's current rect, which already includes the
+  // table's horizontal scroll, so the scroll translation accumulated so far must start again.
+  (0, _react.useLayoutEffect)(function () {
+    var fixedButtonRefCurrent = fixedButtonRef.current;
+    var observerTargetRefCurrent = observerTargetRef.current;
+    if (cellLayoutVersion === 0 || !fixedButtonRefCurrent || !observerTargetRefCurrent) {
+      return;
+    }
+    fixedButtonRefCurrent.style.transform = '';
+    scrollDataRef.current = tableWrapper.scrollLeft;
+    leftPosDataRef.current = 0;
+    observerTargetRefCurrent.style.marginLeft = "".concat(calcObserverTargetMargin(tableWrapper, fixedButtonRefCurrent), "px");
+  }, [cellLayoutVersion, tableWrapper]);
   var containerLeft = (0, _react.useMemo)(function () {
     var container = targetCellRef.closest('[data-editor-container="true"]');
     return (container === null || container === void 0 ? void 0 : container.getBoundingClientRect().left) || 0;
-  }, [targetCellRef]);
+  }, [targetCellRef, cellLayoutVersion]);
   var left = (0, _react.useMemo)(function () {
     var targetCellRect = targetCellRef.getBoundingClientRect();
     var baseLeft = calcLeftPos({
@@ -105,7 +121,7 @@ var FixedButton = exports.FixedButton = function FixedButton(_ref2) {
       offset: offset
     });
     return baseLeft - containerLeft;
-  }, [containerLeft, targetCellRef, offset]);
+  }, [containerLeft, targetCellRef, offset, cellLayoutVersion]);
 
   // Using a portal here to ensure wrapperRef has the tableWrapper as an
   // ancestor. This is required to make the Intersection Observer work.

package/dist/cjs/ui/FloatingContextualButton/index.js

@@ -29,6 +29,7 @@ var _types = require("../../types");
 var _stickyHeaderZIndex = require("../sticky-header-z-index");
 var _FixedButton = _interopRequireDefault(require("./FixedButton"));
 var _styles = require("./styles");
+var _useCellLayoutVersion = require("./useCellLayoutVersion");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /**
@@ -96,6 +97,9 @@ var FloatingContextualButtonInner = /*#__PURE__*/_react.default.memo(function (p
   };
   var domAtPos = editorView.domAtPos.bind(editorView);
   var targetCellRef = (0, _utils.findDomRefAtPos)(targetCellPosition, domAtPos);
+  // Re-renders this component when the cell may have moved, so both FixedButton and Popup
+  // reposition: Popup recalculates its position whenever it receives new props.
+  var cellLayoutVersion = (0, _useCellLayoutVersion.useCellLayoutVersion)(targetCellRef);
   (0, _react.useEffect)(function () {
     if (isCellMenuOpenByKeyboard && !isCellMenuOpen) {
       var state = editorView.state,
@@ -188,6 +192,7 @@ var FloatingContextualButtonInner = /*#__PURE__*/_react.default.memo(function (p
   }
   if (stickyHeader && parentSticky && tableWrapper) {
     return (0, _react2.jsx)(_FixedButton.default, {
+      cellLayoutVersion: cellLayoutVersion,
       offset: BUTTON_OFFSET,
       stickyHeader: stickyHeader,
       tableWrapper: tableWrapper,

package/dist/cjs/ui/FloatingContextualButton/useCellLayoutVersion.js

@@ -0,0 +1,58 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useCellLayoutVersion = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _rafSchd = _interopRequireDefault(require("raf-schd"));
+var _fg = require("@atlaskit/platform-feature-flags/fg");
+/**
+ * Counts layout changes that can move the target cell without re-rendering the cell options
+ * button: the editor container resizing (window resize, side panel, product sidebar) or the table
+ * resizing (column scaling). Changing the count re-renders the button so it repositions on its
+ * cell. Stays 0 when the gate is off.
+ */
+var useCellLayoutVersion = exports.useCellLayoutVersion = function useCellLayoutVersion(targetCellRef) {
+  var _useState = (0, _react.useState)(0),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    layoutVersion = _useState2[0],
+    setLayoutVersion = _useState2[1];
+  (0, _react.useEffect)(function () {
+    if (!(0, _fg.fg)('platform_editor_sticky_cell_options_position')) {
+      return;
+    }
+    if (!(targetCellRef instanceof HTMLElement)) {
+      return;
+    }
+    var container = targetCellRef.closest('[data-editor-container="true"]');
+    var table = targetCellRef.closest('table');
+    var bumpLayoutVersion = (0, _rafSchd.default)(function () {
+      return setLayoutVersion(function (version) {
+        return version + 1;
+      });
+    });
+    var hasReceivedInitialEntries = false;
+    var observer = new ResizeObserver(function () {
+      // ResizeObserver reports every observed element once on observe(); that is not a move.
+      if (!hasReceivedInitialEntries) {
+        hasReceivedInitialEntries = true;
+        return;
+      }
+      bumpLayoutVersion();
+    });
+    if (container) {
+      observer.observe(container);
+    }
+    if (table) {
+      observer.observe(table);
+    }
+    return function () {
+      observer.disconnect();
+      bumpLayoutVersion.cancel();
+    };
+  }, [targetCellRef]);
+  return layoutVersion;
+};

package/dist/cjs/ui/common-styles.js

@@ -91,11 +91,11 @@ var baseTableStylesWithoutSharedStyle = function baseTableStylesWithoutSharedSty
   return (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\n\t", "\n\n\t", "\n\n\t", ";\n\n\t.", " {\n\t\ttd.", ", th.", " {\n\t\t\tposition: relative;\n\t\t\toverflow: visible;\n\t\t}\n\n\t\ttd.", " {\n\t\t\tbackground-color: ", ";\n\t\t\t&::after {\n\t\t\t\theight: 100%;\n\t\t\t\tcontent: '';\n\t\t\t\tborder-left: 1px solid ", ";\n\t\t\t\tborder-bottom: 1px solid ", ";\n\t\t\t\tposition: absolute;\n\t\t\t\tright: 0px;\n\t\t\t\ttop: 0px;\n\t\t\t\tbottom: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t}\n\t}\n\n\t.", " {\n\t\t", "\n\t}\n\n\t.", " {\n\t\t", "\n\t}\n\n\t", "\n\n\t", "\n\n\t/* Delete button */\n\t", "\n\t/* Ends Delete button */\n\n\t/* sticky styles */\n\t.", " > .", " .", " .", ":first-of-type {\n\t\tmargin-top: ", "px;\n\t\twidth: ", "px;\n\n\t\tposition: fixed !important;\n\t\tz-index: ", " !important;\n\t\tbox-shadow: 0px -", "px\n\t\t\t", ";\n\t\tborder-right: 0 none;\n\t\t", "/* top set by NumberColumn component */\n\t}\n\n\t.", " .", ".sticky {\n\t\tposition: fixed !important;\n\t\t/* needs to be above row controls */\n\t\tz-index: ", " !important;\n\t\tbackground: ", ";\n\n\t\twidth: ", "px;\n\t\theight: ", "px;\n\t}\n\n\t.", ".sticky .", " {\n\t\tborder-bottom: 0px none;\n\t\tborder-right: 0px none;\n\n\t\theight: ", "px;\n\t\twidth: ", "px;\n\t}\n\n\t", "\n\n\t", "\n\n    .", "\n      .", "\n      .", ".sticky {\n\t\tposition: fixed !important;\n\t\tz-index: ", " !important;\n\t\tdisplay: flex;\n\t\tborder-left: ", "px solid\n\t\t\t", ";\n\t\tmargin-left: -", "px;\n\t}\n\n\t.", " col:first-of-type {\n\t\t/* moving rows out of a table layout does weird things in Chrome */\n\t\tborder-right: 1px solid\n\t\t\t", ";\n\t}\n\n\ttr.sticky {\n\t\tpadding-top: ", "px;\n\t\tposition: fixed;\n\t\tdisplay: grid;\n\n\t\t/* to keep it above cell selection but below date and other nodes popups that are inside sticky header */\n\t\tz-index: ", ";\n\n\t\toverflow-y: visible;\n\t\toverflow-x: hidden;\n\n\t\tgrid-auto-flow: column;\n\n\t\t/* background for where controls apply */\n\t\tbackground: ", ";\n\t\tbox-sizing: content-box;\n\t\tbox-shadow: 0 6px 4px -4px ", ";\n\n\t\tmargin-left: -1px;\n\n\t\t&.no-pointer-events {\n\t\t\tpointer-events: none;\n\t\t}\n\t}\n\n\t.tableView-content-wrap:has(.tableView-content-wrap):has(\n\t\t\t.", "\n\t\t) {\n\t\tpadding-left: unset;\n\t}\n\n\t.tableView-content-wrap:has(.", ") {\n\t\tpadding-left: 15px;\n\t}\n\n\ttr.sticky th {\n\t\tborder-bottom: ", "px solid ", ";\n\t\tmargin-right: -1px;\n\t}\n\n\t.", " tr.sticky > th:last-child {\n\t\tborder-right-width: 1px;\n\t}\n\n\t/* add left edge for first cell */\n\t.", " tr.sticky > th:first-of-type {\n\t\tmargin-left: 0px;\n\t}\n\n\t/* add a little bit so the scroll lines up with the table */\n\t.", " tr.sticky::after {\n\t\tcontent: ' ';\n\t\twidth: ", "px;\n\t}\n\n\t/* use :before element to hide table row insert dots when legacy table sticky header is activated */\n\t.", ".", ":has(tr.sticky)::before {\n\t\tcontent: ' ';\n\t\tposition: sticky;\n\t\tpointer-events: none;\n\t\ttop: 0;\n\t\tfloat: left;\n\t\ttransform: translateX(calc(-1 * (", "px + ", ")));\n\t\tmargin-bottom: calc(\n\t\t\t-1 * (", " - 1px + ", " + ", ")\n\t\t);\n\t\theight: calc(", " - 1px + ", " + ", ");\n\t\twidth: calc(", "px + ", ");\n\t\tbackground: linear-gradient(\n\t\t\tto bottom,\n\t\t\t", "\n\t\t\t\t90%,\n\t\t\ttransparent\n\t\t);\n\t\tz-index: ", ";\n\t}\n\t/* Shift the mask left by the numbered column width so it sits to the left of it. */\n\t.", ".", "[data-number-column='true']:has(tr.sticky)::before {\n\t\ttransform: translateX(\n\t\t\tcalc(\n\t\t\t\t-1 * (", "px + ", " + ", "px)\n\t\t\t)\n\t\t);\n\t}\n\n\t/* To fix jumpiness caused in Chrome Browsers for sticky headers */\n\t.", " .sticky + tr {\n\t\tmin-height: 0px;\n\t}\n\n\t/* move resize line a little in sticky bar */\n\t.", ".", " {\n\t\ttr.sticky td.", ", tr.sticky th.", " {\n\t\t\t.", "::after {\n\t\t\t\tright: ", "px;\n\t\t\t}\n\t\t}\n\n\t\t/* when selected put it back to normal -- :not selector would be nicer */\n\t\ttr.sticky\n\t\t\ttd.", ".", ",\n\t\t\ttr.sticky\n\t\t\tth.", ".", " {\n\t\t\t.", "::after {\n\t\t\t\tright: ", "px;\n\t\t\t}\n\t\t}\n\t}\n\n\ttr.sticky .", ", tr.sticky .", " {\n\t\tz-index: 1;\n\t}\n\n\ttr.", " {\n\t\tposition: sticky;\n\t\ttop: ", "px;\n\t\tz-index: ", ";\n\t\tbox-shadow:\n\t\t\tinset -1px 1px ", ",\n\t\t\tinset 1px -1px ", ";\n\n\t\t&.", " {\n\t\t\t", "\n\t\t\tbox-shadow:\n\t\t\t\tinset -1px 1px ", ",\n\t\t\t\tinset 1px -1px ", ",\n\t\t\t\t0 6px 4px -4px ", ";\n\t\t}\n\n\t\tth.", "::after {\n\t\t\theight: 100%;\n\t\t\tcontent: '';\n\t\t\tborder-left: 1px solid ", ";\n\t\t\tborder-bottom: 1px solid ", ";\n\t\t\tposition: absolute;\n\t\t\tright: 0px;\n\t\t\ttop: 0px;\n\t\t\tbottom: 0;\n\t\t\twidth: 100%;\n\t\t\tdisplay: inline-block;\n\t\t\tpointer-events: none;\n\t\t}\n\t}\n\n\t/** Adds mask above sticky header to prevent table content from bleeding through on scroll */\n\t.", ":has(tr.", ")::before {\n\t\tcontent: ' ';\n\t\tdisplay: block;\n\t\ttop: 0;\n\t\tbox-sizing: border-box;\n\t\twidth: 100%;\n\t\theight: 0;\n\t\tmargin-bottom: -", "px;\n\t\tposition: sticky;\n\t\tborder-top: ", "px solid transparent;\n\t\tz-index: ", ";\n\t}\n\n\t.", ":has(tr.", ")::before {\n\t\tborder-top: ", "px solid\n\t\t\t", ";\n\t}\n\n\t", "\n\n\t/** Corrects position of drag row controls when sticky header top mask is present */\n\t.", ":has(.", ")\n\t\t> .", "\n\t\t> div\n\t\t> .", " {\n\t\ttop: ", "px;\n\t\tz-index: ", ";\n\t}\n\n\t.", ":has(> .", ")\n\t\t> .", " {\n\t\tmargin-top: 0;\n\t}\n\n\t.", "[data-table-header-is-stuck='true']:has(.", ")\n\t\t> .", "\n\t\t> div\n\t\t> .", " {\n\t\tz-index: ", ";\n\t}\n\n\t/** Corrects position of numbered column when sticky header top mask is present */\n\t.", ":has(.", " tr.", ")\n\t\t> .", "\n\t\t> div\n\t\t> .", " {\n\t\ttop: ", "px;\n\t}\n\n\t/** Expands the mask to encompass the numbered column */\n\t.pm-table-wrapper:has([data-number-column='true'] tr.", ")::before {\n\t\tmargin-left: -", "px;\n\t\twidth: calc(100% + ", "px);\n\t}\n\n\t/** Hides the header row drag handle when the position:sticky table header is 'stuck'\n\t *\n\t * 1. We check that the header is 'stuck'.\n\t * - The table container has attribute data-table-header-is-stuck='true' when sticky positioned header is 'stuck'\n\t *\n\t * 2. We check that the header row drag handle is in the first row or the first row is selected\n\t * - The header row drag handle has the data-row-index='0' attribute (i.e. hovered), OR\n\t * - The header row drag handle has the data-selected-row-index='0' attribute\n\t * \t\tAND does not have the data-handle-appearance='default' attribute (i.e. selected)\n\t*/\n\t.", ".", "[data-table-header-is-stuck='true']\n\t.", ":is([data-row-index='0'], [data-selected-row-index='0']:not([data-handle-appearance='default'])) {\n\t\tvisibility: hidden;\n\t}\n\n\t.", " tr.", " {\n\t\ttop: ", "px;\n\t}\n\n\t.", " tr.sticky {\n\t\tpadding-top: ", "px;\n\t}\n\n\t.", ".", "\n\t\t> .", "\n\t\t.", "\n\t\t.", ":first-of-type {\n\t\tmargin-top: ", "px;\n\t}\n\n\t.", ".sticky {\n\t\tborder-top: ", "px solid\n\t\t\t", ";\n\t}\n\n\t", "\n\t", "\n\n\t.less-padding {\n\t\tpadding: 0 ", "px;\n\n\t\t.", ", .", " {\n\t\t\tpadding: 0 ", "px;\n\n\t\t\t/* https://product-fabric.atlassian.net/browse/ED-16386\n\t\t\tFixes issue where the extra padding that is added here throws off the position\n\t\t\tof the rows control dot */\n\t\t\t&::after {\n\t\t\t\tright: 6px !important;\n\t\t\t}\n\t\t}\n\n\t\t.", ".", " {\n\t\t\tleft: -4px;\n\t\t}\n\n\t\t.", " {\n\t\t\tpadding: 0 ", "px;\n\t\t}\n\n\t\t.", ".", " {\n\t\t\tleft: -8px;\n\t\t}\n\n\t\t&.", "[data-number-column='true'] {\n\t\t\tpadding-left: ", "px;\n\t\t}\n\t\t.", " {\n\t\t\tleft: 8px;\n\t\t}\n\t\t.", " {\n\t\t\tright: 8px;\n\t\t}\n\t}\n\n\t> .", " {\n\t\t/**\n       * Prevent margins collapsing, aids with placing the gap-cursor correctly\n       * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing\n       *\n       * TODO: Enable this, many tests will fail!\n       * border-top: 1px solid transparent;\n       */\n\t}\n\n\t/* Breakout only works on top level unless wrapped in fragment mark */\n\t", "\n\n\t", ";\n\t", ";\n\n\t/* Corner controls */\n\t.", " {\n\t\twidth: ", "px;\n\t\theight: ", "px;\n\t\tdisplay: none;\n\n\t\t.", " {\n\t\t\tposition: relative;\n\n\t\t\t", ";\n\t\t}\n\t}\n\n\t.", ".sticky {\n\t\t.", " {\n\t\t\t/* sticky row insert dot overlaps other row insert and messes things up */\n\t\t\tdisplay: none !important;\n\t\t}\n\t}\n\n\t.", " {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\twidth: ", "px;\n\t\theight: ", "px;\n\t\tborder: 1px solid ", ";\n\t\tborder-radius: 0;\n\t\tborder-top-left-radius: ", "px;\n\t\tbackground: ", ";\n\t\tbox-sizing: border-box;\n\t\tpadding: 0;\n\t\t:focus {\n\t\t\toutline: none;\n\t\t}\n\t}\n\t.active .", " {\n\t\tborder-color: ", ";\n\t\tbackground: ", ";\n\t}\n\n\t.", "[data-number-column='true'] {\n\t\t.", ", .", " {\n\t\t\twidth: ", "px;\n\t\t}\n\t\t.", " .", " {\n\t\t\tborder-right-width: 0;\n\t\t}\n\t}\n\n\t:not(.", ") .", ":hover {\n\t\tborder-color: ", ";\n\t\tbackground: ", ";\n\t\tcursor: pointer;\n\t}\n\n\t:not(.", ")\n\t\t.", ".", " {\n\t\tborder-color: ", ";\n\t\tbackground: ", ";\n\t}\n\n\t/* Row controls */\n\t.", " {\n\t\twidth: ", "px;\n\t\tbox-sizing: border-box;\n\t\tdisplay: none;\n\t\tposition: relative;\n\n\t\t", ";\n\n\t\t.", " {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t}\n\t\t.", ":last-child > button {\n\t\t\tborder-bottom-left-radius: ", "px;\n\t\t}\n\t\t.", " {\n\t\t\tposition: relative;\n\t\t\tmargin-top: -1px;\n\t\t}\n\t\t.", ":hover,\n\t\t\t.", ".active,\n\t\t\t.", ":hover {\n\t\t\tz-index: ", ";\n\t\t}\n\n\t\t", "\n\t}\n\n\t.", " {\n\t\tdisplay: grid;\n\t\talign-items: center;\n\t\tposition: absolute;\n\t\tz-index: ", ";\n\n\t\t.", " {\n\t\t\tposition: absolute;\n\t\t\talign-self: end;\n\t\t\theight: 100%;\n\t\t\twidth: 18px;\n\t\t}\n\n\t\t.", " {\n\t\t\tposition: absolute;\n\t\t\tbottom: -3px;\n\t\t\tleft: 2px;\n\t\t\tbackground-color: ", ";\n\t\t\theight: 4px;\n\t\t\twidth: 4px;\n\t\t\tborder-radius: 50%;\n\t\t\tpointer-events: none;\n\t\t}\n\t}\n\n\t.", " {\n\t\t.", " {\n\t\t\theight: ", "px;\n\t\t\tposition: absolute;\n\t\t\ttop: ", ";\n\t\t\tz-index: ", ";\n\t\t}\n\n\t\t.", " {\n\t\t\tposition: absolute;\n\t\t\theight: ", "px;\n\t\t\twidth: 100%;\n\t\t}\n\n\t\t.", " {\n\t\t\tbackground-color: ", ";\n\t\t\theight: 4px;\n\t\t\twidth: 4px;\n\t\t\tborder-radius: 50%;\n\t\t\tposition: absolute;\n\t\t\tright: -2px;\n\t\t}\n\t}\n\n\t.", " {\n\t\tbackground: none;\n\t\tborder: none;\n\t\toutline: none;\n\t\tposition: absolute;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tcursor: pointer;\n\n\t\t:focus {\n\t\t\toutline: none;\n\t\t}\n\t}\n\n\t.", " {\n\t\tcursor: grab;\n\t\tpointer-events: auto;\n\n\t\tline-height: 0;\n\t\tpadding: 0;\n\t\tborder-radius: 6px;\n\t\twidth: max-content;\n\t\tborder: 2px solid ", ";\n\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tbackground: transparent;\n\t\toutline: none;\n\n\t\t&.placeholder {\n\t\t\tbackground-color: transparent;\n\t\t\tborder: 2px solid transparent;\n\t\t}\n\n\t\t&.", " {\n\t\t\tcursor: pointer;\n\t\t\t& svg {\n\t\t\t\t& > rect.", " {\n\t\t\t\t\tfill: ", ";\n\t\t\t\t}\n\t\t\t\t& > rect {\n\t\t\t\t\tfill: ", ";\n\t\t\t\t}\n\t\t\t\t& > g > rect {\n\t\t\t\t\tfill: ", ";\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&:not(.", ") {\n\t\t\t& svg {\n\t\t\t\trect {\n\t\t\t\t\tfill: ", ";\n\t\t\t\t}\n\t\t\t\tg {\n\t\t\t\t\tfill: ", ";\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&:hover {\n\t\t\t\tsvg {\n\t\t\t\t\trect {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t\tg {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&:active {\n\t\t\t\tcursor: grabbing;\n\t\t\t}\n\n\t\t\t&.selected {\n\t\t\t\t:focus {\n\t\t\t\t\toutline: 2px solid ", ";\n\t\t\t\t\toutline-offset: 1px;\n\t\t\t\t}\n\n\t\t\t\t&:active {\n\t\t\t\t\toutline: none;\n\t\t\t\t}\n\n\t\t\t\tsvg {\n\t\t\t\t\trect {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t\tg {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&.danger {\n\t\t\t\tsvg {\n\t\t\t\t\trect {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t\tg {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t", "\n\n\t:not(.", ") .", " {\n\t\t", "\n\t\t", "\n\t}\n\n\t/* Numbered column */\n\t.", " {\n\t\tposition: relative;\n\t\tfloat: right;\n\t\tmargin-left: ", "px;\n\t\ttop: ", "px;\n\t\twidth: ", "px;\n\t\tbox-sizing: border-box;\n\t}\n\n\t.", " {\n\t\tborder: 1px solid ", ";\n\t\tbox-sizing: border-box;\n\t\tmargin-top: -1px;\n\t\tpadding-bottom: 2px;\n\t\tpadding: ", " 2px;\n\t\ttext-align: center;\n\t\tfont-size: ", ";\n\t\tbackground-color: ", ";\n\t\tcolor: ", ";\n\t\tborder-color: ", ";\n\n\t\t:first-child:not(style),\n\t\tstyle:first-child + * {\n\t\t\tmargin-top: 0;\n\t\t}\n\t\t:last-child {\n\t\t\tborder-bottom: 1px solid ", ";\n\t\t}\n\t}\n\n\t/* add a background above the first numbered column cell when sticky header is engaged\n\twhich hides the table when scrolling */\n\t.", "\n\t\t> .", " {\n\t\t.", ":first-of-type::after {\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\theight: 33px;\n\t\t\twidth: 100%;\n\t\t\tbackground-color: ", ";\n\t\t\tposition: absolute;\n\n\t\t\t/* the extra pixel is accounting for borders */\n\t\t\ttop: -34px;\n\t\t\tleft: -1px;\n\t\t}\n\t}\n\n\t.", " {\n\t\t.", ", .", " {\n\t\t\tdisplay: block;\n\t\t}\n\t\t.", " {\n\t\t\tpadding-left: 0px;\n\n\t\t\t.", " {\n\t\t\t\tborder-left: 0 none;\n\t\t\t}\n\n\t\t\t.", ".active {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\n\t\t/* nested tables should be ignored when we apply border-left: 0 to the parent table */\n\t\t.", " {\n\t\t\t.", " {\n\t\t\t\tborder-left: 1px solid ", ";\n\t\t\t}\n\t\t}\n\t}\n\n\t/* Apply numbered column styling when table is selected via text selection (e.g., block menu) */\n\t.", " {\n\t\t.", " {\n\t\t\t.", " {\n\t\t\t\t", "\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\t}\n\n\t:not(.", ") .", " {\n\t\t.", ":not(.", ") {\n\t\t\tcursor: pointer;\n\t\t}\n\t\t.", ":not(.", "):hover {\n\t\t\t", "\n\t\t}\n\t\t.", ".", " {\n\t\t\tbackground-color: ", ";\n\t\t\tborder: 1px solid ", ";\n\t\t\tborder-left: 0;\n\t\t\tcolor: ", ";\n\t\t\tposition: relative;\n\t\t\tz-index: ", ";\n\t\t}\n\t}\n\n\t.tableView-content-wrap.danger {\n\t\t:not(.", ") .", " {\n\t\t\t.", " {\n\t\t\t\tbackground-color: ", ";\n\t\t\t\tborder: 1px solid ", ";\n\t\t\t\tborder-left: 0;\n\t\t\t\tcolor: ", ";\n\t\t\t\tposition: relative;\n\t\t\t\tz-index: ", ";\n\t\t\t}\n\t\t}\n\t}\n\n\t/* Table */\n\t.", " > table {\n\t\ttable-layout: fixed;\n\t\twhite-space: normal;\n\t\tborder-top: none;\n\t\t/* 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212 */\n\t\tmargin-right: -1px;\n\t\t/* Allows better positioning for the shadow sentinels - ED-16668 */\n\t\tposition: relative;\n\n\t\t> tbody > tr {\n\t\t\twhite-space: pre-wrap;\n\t\t}\n\n\t\t.", " + * {\n\t\t\tmargin-top: 0;\n\t\t}\n\n\t\t/*\n       * Headings have a top margin by default, but we don't want this on the\n       * first heading within table header cells.\n       *\n       * This specifically sets margin-top for the first heading within a header\n       * cell when center/right aligned.\n       */\n\t\tth.", " > .fabric-editor-block-mark {\n\t\t\t> h1:first-of-type,\n\t\t\t> h2:first-of-type,\n\t\t\t> h3:first-of-type,\n\t\t\t> h4:first-of-type,\n\t\t\t> h5:first-of-type,\n\t\t\t> h6:first-of-type {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t.", ", .", " {\n\t\t\tposition: relative;\n\t\t}\n\t\t/* Give selected cells a blue overlay */\n\t\t.", "::after, .", "::after {\n\t\t\tz-index: ", ";\n\t\t\tposition: absolute;\n\t\t\tcontent: '';\n\t\t\tleft: 0;\n\t\t\tright: 0;\n\t\t\ttop: 0;\n\t\t\tbottom: 0;\n\t\t\twidth: 100%;\n\t\t\tpointer-events: none;\n\t\t}\n\t\t.", " {\n\t\t\t", "\n\t\t}\n\t\t.", "::after {\n\t\t\tbackground: ", ";\n\t\t\tz-index: ", ";\n\t\t}\n\t\t/* Override border colors for danger state */\n\t\tth.", ".", ",\n\t\t\ttd.", ".", " {\n\t\t\t", "\n\t\t\t&::after {\n\t\t\t\theight: 100%;\n\t\t\t\twidth: 100%;\n\t\t\t\tborder: 1px solid ", ";\n\t\t\t\tcontent: '';\n\t\t\t\tposition: absolute;\n\t\t\t\tleft: -1px;\n\t\t\t\ttop: -1px;\n\t\t\t\tbottom: 0;\n\t\t\t\tz-index: ", ";\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tpointer-events: none;\n\t\t\t\tbackground: ", ";\n\t\t\t}\n\t\t}\n\t\ttd.", ",\n\t\t\ttd.", ",\n\t\t\tth.", ".", ",\n\t\t\tth.", ".", " {\n\t\t\t&::after {\n\t\t\t\theight: 100%;\n\t\t\t\twidth: 100%;\n\t\t\t\tborder: 1px solid ", ";\n\t\t\t\tcontent: '';\n\t\t\t\tposition: absolute;\n\t\t\t\tleft: -1px;\n\t\t\t\ttop: -1px;\n\t\t\t\tbottom: 0;\n\t\t\t\tz-index: ", ";\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t\t&.", "::after {\n\t\t\t\t", ";\n\t\t\t\tz-index: ", ";\n\t\t\t\tbackground: ", ";\n\t\t\t}\n\n\t\t\t&.", ".", "::after {\n\t\t\t\t", ";\n\t\t\t\tz-index: ", ";\n\t\t\t\tbackground: ", ";\n\t\t\t}\n\t\t}\n\t}\n\n\t", "\n\n\t/* override for DnD controls */\n\t.", " {\n\t\tposition: absolute;\n\t\tmargin-top: ", "px;\n\t\tleft: -", "px;\n\t}\n\n\t.", " {\n\t\tposition: absolute;\n\t\t/* this is to fix the misalignment of the numbered column in live page view mode */\n\t\t", "\n\t}\n\n\t.", " {\n\t\tposition: absolute;\n\t\ttop: ", "px;\n\t}\n\n\t.", " > .", " {\n\t\t/* +2px is to overlap the table border on the sides */\n\t\twidth: calc(anchor-size(width) + 2px);\n\t\theight: ", "px;\n\t\tbackground: ", ";\n\t\ttop: unset;\n\t\tposition: fixed;\n\t\tposition-area: top center;\n\t\tposition-visibility: anchors-visible;\n\t\tz-index: ", ";\n\t\t", "\n\t}\n\n\t/** Mask for content to the left of the column controls */\n\n\t.", "[data-number-column=\"true\"] .", " > .", "::before {\n\t\tcontent: '';\n\t\tposition: relative;\n\t\tdisplay: inline-block;\n\t\tmargin-left: -", "px;\n\t\twidth: ", "px;\n\t\theight: ", "px;\n\t\tbackground: ", ";\n\t\tz-index: ", ";\n\t}\n\n\t/** Mask for numbered column content to the left of the header row */\n\t.", "[data-number-column=\"true\"] .", " tr:first-of-type th:first-of-type::before {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tdisplay: inline-block;\n\t\tbox-sizing: border-box;\n\t\tleft: 0;\n\t\twidth: ", ";\n\t\theight: ", ";\n\t\tmargin-left: ", ";\n\t\t", "\n\t\toutline: ", ";\n\t\tborder-left: ", ";\n\t\t", "\n\t\tbackground: ", ";\n\t\tborder-top: 1px solid ", ";\n\t}\n\n\t.ak-editor-selected-node .", "[data-number-column=\"true\"]:not(.", ") .", " tr:first-of-type th:first-of-type {\n\t\t/* Recolour the number-column corner mask to match the selected cells. Keep this identical\n\t\t   to the .selectedCell ::before rule below \u2014 never set margin-top (the base negative\n\t\t   margin aligns the mask) or radius (rounded generically by data-reaches-* rules). */\n\t\t&::before {\n\t\t\toutline: none;\n\t\t\tborder-left-color: ", ";\n\t\t\t", "\n\t\t\tborder-top-color: ", ";\n\t\t\tbackground: ", ";\n\t\t}\n\t}\n\n\t.", "[data-number-column=\"true\"].", " .", " tr:first-of-type th.", ":not(.", "):first-of-type::before, .", "[data-number-column=\"true\"] .", " tr:first-of-type th.", ":not(.", ", .", "):first-of-type::before {\n\t\toutline: none;\n\t\tborder-left-color: ", ";\n\t\t", ";\n\t\tborder-top-color: ", ";\n\t\tbackground: ", ";\n\t}\n\n\t.", "[data-number-column=\"true\"] .", " tr:first-of-type th.", ":first-of-type::before, .", "[data-number-column=\"true\"] .", " tr:first-of-type th.", ":not(.", "):first-of-type::before {\n\t\toutline: none;\n\t\t", "\n\t}\n\t.", "[data-number-column=\"true\"].", ".", " .", " tr:first-of-type th:first-of-type::before, .", "[data-number-column=\"true\"].", " .", " tr:first-of-type th.", ":not(.", "):first-of-type::before {\n\t\toutline: none;\n\t\tborder-left-color: ", ";\n\t\tborder-top-color: ", ";\n\t\tbackground: ", ";\n\t}\n\n\t.", "[data-number-column=\"true\"] .", " .", " th:first-of-type::before {\n\t\tbox-shadow: 0 6px 4px -4px ", ";\n\t}\n\n\t.", "\n\t\t.", ":not(.", " *) {\n\t\t/* !important to override the inline style in the inner controls component */\n\t\tmargin-top: ", "px !important;\n\t}\n\n\t.", " .", " {\n\t\tposition: fixed;\n\t\t/* Keep column controls above the sticky header. */\n\t\tz-index: ", ";\n\t}\n\n\t.", ".", ":has(tr.sticky)\n\t\t.", "\n\t\t.", ":first-of-type {\n\t\tbox-shadow: 0 -5px 0 1px ", ";\n\t}\n\n\t/* nested tables */\n\t.", " {\n\t\t.", " .", " {\n\t\t\tposition: absolute;\n\t\t\tz-index: ", ";\n\t\t}\n\t}\n\n\t.", " {\n\t\tpadding-bottom: 0px;\n\t\t/* fixes gap cursor height */\n\t\toverflow: auto;\n\t\toverflow-y: hidden;\n\t\tposition: relative;\n\t}\n\n\t.", ".", " {\n\t\toverflow: visible;\n\t}\n\n\t", "\n"])), (0, _uiStyles.columnControlsLineMarker)(), (0, _uiStyles.hoveredDeleteButton)(), (0, _uiStyles.hoveredCell)(), _uiStyles.hoveredWarningCell, (0, _uiStyles.insertLine)(), (0, _uiStyles.resizeHandle)(),
   // Only block getSelectionStyles when our replacement (gated by q4) owns the
   // decoration, so node selection is never left unstyled.
-  (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? rangeSelectionStylesForRoundedTable : rangeSelectionStyles, rangeSelectionStylesForFakeBorders, viewModeSortStyles(), (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_sticky_headers_zindex') ? ".".concat(_types2.TableCssClassName.TABLE_CONTAINER, " {\n\t\t\t--ak-editor-table-resize-handle-z-index: ").concat((0, _stickyHeaderZIndex.getTableZIndexes)().mediaResizeHandle, ";\n\t\t}") : '', (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "\n\t\t.ak-editor-panel:not([data-panel-type=\"custom\"]) .".concat(_types2.TableCssClassName.TABLE_CONTAINER, " {\n\t\t\t").concat(_consts2.akEditorTableContainerBg, ": ", "var(--ds-background-accent-blue-subtlest, #E9F2FE)", ";\n\t\t}\n\t\t.ak-editor-panel[data-panel-type=\"note\"] .").concat(_types2.TableCssClassName.TABLE_CONTAINER, " {\n\t\t\t").concat(_consts2.akEditorTableContainerBg, ": ", "var(--ds-background-accent-purple-subtlest, #F8EEFE)", ";\n\t\t}\n\t\t.ak-editor-panel[data-panel-type=\"tip\"] .").concat(_types2.TableCssClassName.TABLE_CONTAINER, " {\n\t\t\t").concat(_consts2.akEditorTableContainerBg, ": ", "var(--ds-background-accent-green-subtlest, #DCFFF1)", ";\n\t\t}\n\t\t.ak-editor-panel[data-panel-type=\"warning\"] .").concat(_types2.TableCssClassName.TABLE_CONTAINER, " {\n\t\t\t").concat(_consts2.akEditorTableContainerBg, ": ", "var(--ds-background-accent-yellow-subtlest, #FEF7C8)", ";\n\t\t}\n\t\t.ak-editor-panel[data-panel-type=\"error\"] .").concat(_types2.TableCssClassName.TABLE_CONTAINER, " {\n\t\t\t").concat(_consts2.akEditorTableContainerBg, ": ", "var(--ds-background-accent-red-subtlest, #FFECEB)", ";\n\t\t}\n\t\t.ak-editor-panel[data-panel-type=\"success\"] .").concat(_types2.TableCssClassName.TABLE_CONTAINER, " {\n\t\t\t").concat(_consts2.akEditorTableContainerBg, ": ", "var(--ds-background-accent-green-subtlest, #DCFFF1)", ";\n\t\t}\n\t") : '', tableAnchorStyles, _types2.TableCssClassName.TABLE_NODE_WRAPPER, _types2.TableCssClassName.TABLE_CELL, _types2.TableCssClassName.TABLE_HEADER_CELL, _types2.TableCssClassName.TABLE_CELL, _consts4.tableCellBackgroundColor, _consts4.tableBorderColor, _consts4.tableBorderColor, _types2.TableCssClassName.CONTROLS_FLOATING_BUTTON_COLUMN, (0, _uiStyles.insertColumnButtonWrapper)(), _types2.TableCssClassName.CONTROLS_FLOATING_BUTTON_ROW, (0, _uiStyles.insertRowButtonWrapper)(), (0, _uiStyles.dragInsertButtonWrapper)(), (0, _uiStyles.dragCornerControlButton)(), (0, _uiStyles.DeleteButton)(), _types2.TableCssClassName.TABLE_STICKY, props.isDragAndDropEnabled ? _types2.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER : _types2.TableCssClassName.ROW_CONTROLS_WRAPPER, _types2.TableCssClassName.NUMBERED_COLUMN, _types2.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts4.stickyRowOffsetTop, _constants.akEditorTableNumberColumnWidth, _constants.akEditorStickyHeaderZIndex, _consts4.stickyRowOffsetTop, (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(_consts2.akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? "\n\t\t\twidth: ".concat(_constants.akEditorTableNumberColumnWidth + 1, "px;\n\t\t\tborder-left: 1px solid ").concat(_consts4.tableBorderColor, ";\n\n\t\t\t/* Keep the new fixed left border in sync with the selected/danger states,\n\t\t\t   which would otherwise leave it the default colour (.active recolours the\n\t\t\t   rest of the border) or drop it entirely (delete-hover sets border-left: 0). */\n\t\t\t&.active {\n\t\t\t\tborder-left-color: ").concat(_consts4.tableBorderSelectedColor, ";\n\t\t\t}\n\t\t\t&.").concat(_types2.TableCssClassName.HOVERED_CELL_IN_DANGER, " {\n\t\t\t\tborder-left: 1px solid ").concat(_consts4.tableBorderDeleteColor, ";\n\t\t\t}\n\t\t\t") : '', _types2.TableCssClassName.TABLE_STICKY, _types2.TableCssClassName.CORNER_CONTROLS, _constants.akEditorSmallZIndex, (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(_consts2.akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", _consts4.tableToolbarSize, _consts4.tableToolbarSize, _types2.TableCssClassName.CORNER_CONTROLS, _types2.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts4.tableToolbarSize, _consts4.tableToolbarSize, tableStickyHeaderColumnControlsDecorationsStyle(), tableStickyHeaderFirefoxFixStyle(), _types2.TableCssClassName.TABLE_STICKY, _types2.TableCssClassName.ROW_CONTROLS, _types2.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _constants.akEditorStickyHeaderZIndex, _consts4.tableToolbarSize, (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(_consts2.akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", _consts4.tableToolbarSize, _types2.TableCssClassName.TABLE_STICKY, (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(_consts2.akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", _consts4.stickyRowOffsetTop, (0, _stickyHeaderZIndex.getTableZIndexes)().header, (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(_consts2.akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", "var(--ds-shadow-overflow-perimeter, #1E1F211f)", _types2.TableCssClassName.NESTED_TABLE_WITH_CONTROLS, _types2.TableCssClassName.NESTED_TABLE_WITH_CONTROLS, _consts4.stickyHeaderBorderBottomWidth, _consts4.tableBorderColor, _types2.TableCssClassName.TABLE_STICKY, _types2.TableCssClassName.TABLE_STICKY, _types2.TableCssClassName.TABLE_STICKY, insertColumnButtonOffset + 1, _types2.TableCssClassName.TABLE_CONTAINER, _types2.TableCssClassName.TABLE_STICKY, _dragHandle.DRAG_HANDLE_WIDTH, "var(--ds-space-150, 12px)", "var(--ds-space-400, 32px)", "var(--ds-space-200, 16px)", "var(--ds-space-300, 24px)", "var(--ds-space-400, 32px)", "var(--ds-space-200, 16px)", "var(--ds-space-300, 24px)", _dragHandle.DRAG_HANDLE_WIDTH, "var(--ds-space-150, 12px)", (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(_consts2.akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", _consts4.rowControlsZIndex + 5, _types2.TableCssClassName.TABLE_CONTAINER, _types2.TableCssClassName.TABLE_STICKY, _dragHandle.DRAG_HANDLE_WIDTH, "var(--ds-space-150, 12px)", _constants.akEditorTableNumberColumnWidth, _types2.TableCssClassName.TABLE_STICKY, _types2.TableCssClassName.TABLE_CONTAINER, _types2.TableCssClassName.TABLE_STICKY, _types2.TableCssClassName.WITH_RESIZE_LINE, _types2.TableCssClassName.WITH_RESIZE_LINE, _types2.TableCssClassName.RESIZE_HANDLE_DECORATION, (_consts4.resizeHandlerAreaWidth - _consts4.resizeLineWidth) / 2 + 1, _types2.TableCssClassName.WITH_RESIZE_LINE, _types2.TableCssClassName.SELECTED_CELL, _types2.TableCssClassName.WITH_RESIZE_LINE, _types2.TableCssClassName.SELECTED_CELL, _types2.TableCssClassName.RESIZE_HANDLE_DECORATION, (_consts4.resizeHandlerAreaWidth - _consts4.resizeLineWidth) / 2, _types2.TableCssClassName.HOVERED_CELL, _types2.TableCssClassName.SELECTED_CELL, _types2.TableCssClassName.NATIVE_STICKY, _table.tableMarginTop, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? _constants.akEditorSmallZIndex : "calc(".concat((0, _stickyHeaderZIndex.getTableZIndexes)().header, ")"), _consts4.tableBorderColor, _consts4.tableBorderColor, _types2.TableCssClassName.NATIVE_STICKY_ACTIVE, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? "z-index: ".concat((0, _stickyHeaderZIndex.getTableZIndexes)().header, ";") : '', _consts4.tableBorderColor, _consts4.tableBorderColor, "var(--ds-shadow-overflow-perimeter, #1E1F211f)", _types2.TableCssClassName.TABLE_HEADER_CELL, _consts4.tableBorderColor, _consts4.tableBorderColor, _types2.TableCssClassName.TABLE_NODE_WRAPPER, _types2.TableCssClassName.NATIVE_STICKY, _table.tableMarginTop, _table.tableMarginTop, (0, _stickyHeaderZIndex.getTableZIndexes)().mask, _types2.TableCssClassName.TABLE_NODE_WRAPPER, _types2.TableCssClassName.NATIVE_STICKY_ACTIVE, _table.tableMarginTop, (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(_consts2.akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_table_q4_patch_8') ? "\n\t/* Borders floor to device pixels at fractional zoom; overlap the sticky row by 1px to avoid a seam. */\n\t.".concat(_types2.TableCssClassName.TABLE_NODE_WRAPPER, ":has(tr.").concat(_types2.TableCssClassName.NATIVE_STICKY, ")::before {\n\t\tborder-top: none;\n\t\theight: ").concat(_table.tableMarginTop + 1, "px;\n\t\tmargin-bottom: -").concat(_table.tableMarginTop + 1, "px;\n\t\tbackground: transparent;\n\t}\n\n\t.").concat(_types2.TableCssClassName.TABLE_NODE_WRAPPER, ":has(tr.").concat(_types2.TableCssClassName.NATIVE_STICKY_ACTIVE, ")::before {\n\t\tborder-top: none;\n\t\tbackground: ").concat((0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(_consts2.akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", ";\n\t}\n\t") : '', _types2.TableCssClassName.TABLE_CONTAINER, _types2.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _types2.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types2.TableCssClassName.DRAG_ROW_CONTROLS, _consts4.tableColumnControlsHeight, (0, _stickyHeaderZIndex.getTableZIndexes)().aboveHeader, _types2.TableCssClassName.TABLE_CONTAINER, _types2.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _types2.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types2.TableCssClassName.TABLE_CONTAINER, _types2.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _types2.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types2.TableCssClassName.DRAG_ROW_CONTROLS, (0, _stickyHeaderZIndex.getTableZIndexes)().belowHeader, _types2.TableCssClassName.TABLE_CONTAINER, _types2.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _types2.TableCssClassName.NATIVE_STICKY, _types2.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types2.TableCssClassName.NUMBERED_COLUMN, _consts4.tableColumnControlsHeight, _types2.TableCssClassName.NATIVE_STICKY, _constants.akEditorTableNumberColumnWidth, _constants.akEditorTableNumberColumnWidth, _types2.TableCssClassName.TABLE_CONTAINER, _types2.TableCssClassName.WITH_CONTROLS, _types2.TableCssClassName.DRAG_ROW_FLOATING_DRAG_HANDLE, _types2.TableCssClassName.WITH_CONTROLS, _types2.TableCssClassName.NATIVE_STICKY, _table.tableMarginTop, _types2.TableCssClassName.WITH_CONTROLS, _consts4.tableControlsSpacing, _types2.TableCssClassName.WITH_CONTROLS, _types2.TableCssClassName.TABLE_STICKY, _types2.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types2.TableCssClassName.NUMBERED_COLUMN, _types2.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts4.tableControlsSpacing, _types2.TableCssClassName.CORNER_CONTROLS, _consts4.tableControlsSpacing - _consts4.tableToolbarSize, (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(_consts2.akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", sentinelStyles, stickyScrollbarStyles, _consts4.tablePadding, _types2.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types2.TableCssClassName.ROW_CONTROLS_WRAPPER, _consts4.tablePadding, _types2.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types2.TableCssClassName.TABLE_CHROMELESS, _types2.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER, _consts4.tablePadding, _types2.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER, _types2.TableCssClassName.TABLE_CHROMELESS, _types2.TableCssClassName.TABLE_CONTAINER, _constants.akEditorTableNumberColumnWidth + _consts4.tablePadding - 1, _styles.TableSharedCssClassName.TABLE_LEFT_BORDER, _styles.TableSharedCssClassName.TABLE_RIGHT_BORDER, _types2.TableCssClassName.NODEVIEW_WRAPPER, breakoutWidthStyling(), (0, _uiStyles.columnControlsDecoration)(), (0, _uiStyles.rowControlsWrapperDotStyle)(), _types2.TableCssClassName.CORNER_CONTROLS, _consts4.tableToolbarSize + 1, cornerControlHeight, _types2.TableCssClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, (0, _uiStyles.InsertMarker)("\n          left: -11px;\n          top: 9px;\n        "), _types2.TableCssClassName.CORNER_CONTROLS, _types2.TableCssClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, _types2.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts4.tableToolbarSize + 1, _consts4.tableToolbarSize + 1, _consts4.tableBorderColor, _consts4.tableBorderRadiusSize, _consts4.tableHeaderCellBackgroundColor, _types2.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts4.tableBorderSelectedColor, _consts4.tableToolbarSelectedColor, _types2.TableCssClassName.TABLE_CONTAINER, _types2.TableCssClassName.CORNER_CONTROLS, _types2.TableCssClassName.CONTROLS_CORNER_BUTTON, _constants.akEditorTableToolbarSize + _constants.akEditorTableNumberColumnWidth + 1, _types2.TableCssClassName.ROW_CONTROLS, _types2.TableCssClassName.CONTROLS_BUTTON, _types2.TableCssClassName.IS_RESIZING, _types2.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts4.tableBorderSelectedColor, _consts4.tableToolbarSelectedColor, _types2.TableCssClassName.IS_RESIZING, _types2.TableCssClassName.CONTROLS_CORNER_BUTTON, _types2.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts4.tableBorderDeleteColor, _consts4.tableToolbarDeleteColor, _types2.TableCssClassName.ROW_CONTROLS, _consts4.tableToolbarSize, (0, _uiStyles.InsertMarker)("\n        bottom: -1px;\n        left: -11px;\n      "), _types2.TableCssClassName.ROW_CONTROLS_INNER, _types2.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _consts4.tableBorderRadiusSize, _types2.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types2.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types2.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types2.TableCssClassName.CONTROLS_BUTTON, _constants.akEditorUnitZIndex, (0, _uiStyles.HeaderButton)("\n        border-bottom: 1px solid ".concat(_consts4.tableBorderColor, ";\n        border-right: 0px;\n        border-radius: 0;\n        height: 100%;\n        width: ").concat(_consts4.tableToolbarSize, "px;\n\n        .").concat(_types2.TableCssClassName.CONTROLS_BUTTON_OVERLAY, " {\n          position: absolute;\n          width: 30px;\n          height: 50%;\n          right: 0;\n          bottom: 0;\n        }\n        .").concat(_types2.TableCssClassName.CONTROLS_BUTTON_OVERLAY, ":first-of-type {\n          top: 0;\n        }\n      ")), _types2.TableCssClassName.DRAG_ROW_CONTROLS, _consts4.rowControlsZIndex + 4, _types2.TableCssClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER, _types2.TableCssClassName.DRAG_ROW_FLOATING_INSERT_DOT, "var(--ds-background-accent-gray-subtler, #DDDEE1)", _types2.TableCssClassName.DRAG_COLUMN_CONTROLS, _types2.TableCssClassName.DRAG_COLUMN_CONTROLS_INNER, _consts4.tableColumnControlsHeight, "var(--ds-space-negative-150, -12px)", (0, _stickyHeaderZIndex.getTableZIndexes)().resizeHandle, _types2.TableCssClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER, _consts4.tableColumnControlsHeight, _types2.TableCssClassName.DRAG_COLUMN_FLOATING_INSERT_DOT, "var(--ds-background-accent-gray-subtler, #DDDEE1)", _types2.TableCssClassName.DRAG_HANDLE_BUTTON_CLICKABLE_ZONE, _types2.TableCssClassName.DRAG_HANDLE_BUTTON_CONTAINER, "var(--ds-surface, #FFFFFF)", _types2.TableCssClassName.DRAG_HANDLE_DISABLED, _types2.TableCssClassName.DRAG_HANDLE_MINIMISED, "var(--ds-background-accent-gray-subtler, #DDDEE1)", "var(--ds-background-accent-gray-subtlest, #F0F1F2)", "var(--ds-icon-disabled, #080F214A)", _types2.TableCssClassName.DRAG_HANDLE_DISABLED, "var(--ds-background-accent-gray-subtler, #DDDEE1)", "var(--ds-icon-subtle, #505258)", "var(--ds-background-accent-blue-subtle, #669DF1)", "var(--ds-icon-inverse, #FFFFFF)", "var(--ds-border-focused, #4688EC)", "var(--ds-background-accent-blue-subtle, #669DF1)", "var(--ds-icon-inverse, #FFFFFF)", "var(--ds-background-accent-red-subtler-pressed, #FD9891)", "var(--ds-border-inverse, #FFFFFF)", (0, _uiStyles.floatingColumnControls)(), _types2.TableCssClassName.IS_RESIZING, _types2.TableCssClassName.ROW_CONTROLS, (0, _uiStyles.HeaderButtonHover)(), (0, _uiStyles.HeaderButtonDanger)(), _types2.TableCssClassName.NUMBERED_COLUMN, _constants.akEditorTableToolbarSize, props.isDragAndDropEnabled ? 0 : _constants.akEditorTableToolbarSize, _constants.akEditorTableNumberColumnWidth + 1, _types2.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts4.tableBorderColor, (0, _constants.relativeSizeToBaseFontSize)(10), (0, _constants.relativeSizeToBaseFontSize)(14), _consts4.tableHeaderCellBackgroundColor, _consts4.tableTextColor, _consts4.tableBorderColor, _consts4.tableBorderColor, _types2.TableCssClassName.TABLE_STICKY, props.isDragAndDropEnabled ? _types2.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER : _types2.TableCssClassName.ROW_CONTROLS_WRAPPER, _types2.TableCssClassName.NUMBERED_COLUMN_BUTTON_DISABLED, "var(--ds-surface, #FFFFFF)", _types2.TableCssClassName.WITH_CONTROLS, _types2.TableCssClassName.CORNER_CONTROLS, _types2.TableCssClassName.ROW_CONTROLS, _types2.TableCssClassName.NUMBERED_COLUMN, _types2.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types2.TableCssClassName.NUMBERED_COLUMN_BUTTON, numberedColumnButtonSelectedStyles, _types2.TableCssClassName.TABLE_CONTAINER, _types2.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts4.tableBorderColor, _constants.akEditorSelectedNodeClassName, _types2.TableCssClassName.NUMBERED_COLUMN, _types2.TableCssClassName.NUMBERED_COLUMN_BUTTON, numberedColumnButtonSelectedStyles, _utils.hideNativeBrowserTextSelectionStyles, _types2.TableCssClassName.IS_RESIZING, _types2.TableCssClassName.WITH_CONTROLS, _types2.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types2.TableCssClassName.NUMBERED_COLUMN_BUTTON_DISABLED, _types2.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types2.TableCssClassName.NUMBERED_COLUMN_BUTTON_DISABLED, numberedColumnButtonSelectedStyles, _types2.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types2.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts4.tableToolbarDeleteColor, _consts4.tableBorderDeleteColor, "var(--ds-text-danger, #AE2E24)", _constants.akEditorUnitZIndex, _types2.TableCssClassName.IS_RESIZING, _types2.TableCssClassName.WITH_CONTROLS, _types2.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts4.tableToolbarDeleteColor, _consts4.tableBorderDeleteColor, "var(--ds-text-danger, #AE2E24)", _constants.akEditorUnitZIndex, _types2.TableCssClassName.TABLE_NODE_WRAPPER, _types2.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types2.TableCssClassName.TABLE_HEADER_CELL, _types2.TableCssClassName.SELECTED_CELL, _types2.TableCssClassName.HOVERED_CELL_IN_DANGER, _types2.TableCssClassName.SELECTED_CELL, _types2.TableCssClassName.HOVERED_CELL_IN_DANGER, _constants.akEditorSmallZIndex, _types2.TableCssClassName.SELECTED_CELL, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? '' /* Cell borders handled by ::after overlay in rounded mode. */ : "border: 1px solid ".concat(_consts4.tableBorderSelectedColor, ";"), _types2.TableCssClassName.SELECTED_CELL, _consts4.tableCellSelectedColor, _constants.akEditorSmallZIndex, _types2.TableCssClassName.TABLE_HEADER_CELL, _types2.TableCssClassName.HOVERED_CELL_IN_DANGER, _types2.TableCssClassName.TABLE_CELL, _types2.TableCssClassName.HOVERED_CELL_IN_DANGER, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? '' /* Cell border colors are handled by the ::after overlay in rounded mode. */ : "border-left-color: ".concat(_consts4.tableBorderDeleteColor, ";\n\t\t\tborder-top-color: ").concat(_consts4.tableBorderDeleteColor, ";"), _consts4.tableBorderDeleteColor, (0, _stickyHeaderZIndex.getTableZIndexes)().dangerOverlay, _consts4.tableCellDeleteColor, _types2.TableCssClassName.HOVERED_CELL, _types2.TableCssClassName.SELECTED_CELL, _types2.TableCssClassName.TABLE_HEADER_CELL, _types2.TableCssClassName.SELECTED_CELL, _types2.TableCssClassName.TABLE_HEADER_CELL, _types2.TableCssClassName.HOVERED_CELL, _consts4.tableBorderSelectedColor, _constants.akEditorSmallZIndex, _types2.TableCssClassName.HOVERED_CELL_IN_DANGER, tableBorderStyles(), (0, _stickyHeaderZIndex.getTableZIndexes)().dangerOverlay, _consts4.tableCellDeleteColor, _types2.TableCssClassName.HOVERED_NO_HIGHLIGHT, _types2.TableCssClassName.HOVERED_CELL_IN_DANGER, tableBorderStyles(), (0, _stickyHeaderZIndex.getTableZIndexes)().dangerOverlay, _consts4.tableCellDeleteColor, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? (0, _roundedTableStyles.roundedTableOverrides)() : '', _types2.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _table.tableMarginTop, _consts4.tableToolbarSize + 1, _types2.TableCssClassName.ROW_CONTROLS_WRAPPER, props.isDragAndDropEnabled ? "\n\t\t\tmargin-top: ".concat(_table.tableMarginTop, "px;\n\t\t\ttop: 0;\n\t\t\tleft: -").concat(_consts4.tableToolbarSize + 1, "px;\n\t\t") : "\n\t\t\t/* top of corner control is table margin top - corner control height + 1 pixel of table border. */\n\t\t\ttop: ".concat(_table.tableMarginTop - cornerControlHeight + 1, "px;\n\t\t\tmargin-top: 0;\n\t\t\tleft: -").concat(_consts4.tableToolbarSize, "px;\n\t\t"), _types2.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER, _table.tableMarginTop, _types2.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _types2.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_table_q4_patch_8') ? _table.tableMarginTop - 1 : _table.tableMarginTop, (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(_consts2.akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", (0, _stickyHeaderZIndex.getTableZIndexes)().aboveHeader, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_table_q4_patch_8') ? "\n\t\t/* Transparent bottom 1px so the sticky header row's top border stays visible. */\n\t\tpadding-bottom: 1px;\n\t\tbackground-clip: content-box;\n\t\t/* Chrome can fall back to start alignment after zoom, covering the header. */\n\t\talign-self: unsafe end;" : "\n\t\t/* Leave a 1px gap so the sticky header row's top border stays visible. */\n\t\ttranslate: 0 -1px;" : "", _types2.TableCssClassName.TABLE_CONTAINER, _types2.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _types2.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER, _constants.akEditorTableNumberColumnWidth + _consts4.dragRowControlsWidth, _constants.akEditorTableNumberColumnWidth + _consts4.dragRowControlsWidth, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_table_q4_patch_8') ? _table.tableMarginTop - 1 : _table.tableMarginTop, (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(_consts2.akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", (0, _stickyHeaderZIndex.getTableZIndexes)().belowHeader, _types2.TableCssClassName.TABLE_CONTAINER, _types2.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? "".concat(_constants.akEditorTableNumberColumnWidth, "px") : "".concat(_constants.akEditorTableNumberColumnWidth - 1, "px"), (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? 'calc(100% + 2px)' : '100%', (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? "-".concat(_constants.akEditorTableNumberColumnWidth + 1, "px") : "-".concat(_constants.akEditorTableNumberColumnWidth, "px"), (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? // Anchor the mask with an explicit `top` so `vertical-align` (data-valign) on the cell
+  (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? rangeSelectionStylesForRoundedTable : rangeSelectionStyles, rangeSelectionStylesForFakeBorders, viewModeSortStyles(), (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_sticky_headers_zindex') ? ".".concat(_types2.TableCssClassName.TABLE_CONTAINER, " {\n\t\t\t--ak-editor-table-resize-handle-z-index: ").concat((0, _stickyHeaderZIndex.getTableZIndexes)().mediaResizeHandle, ";\n\t\t}") : '', (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "\n\t\t.ak-editor-panel:not([data-panel-type=\"custom\"]) .".concat(_types2.TableCssClassName.TABLE_CONTAINER, " {\n\t\t\t").concat(_consts2.akEditorTableContainerBg, ": ", "var(--ds-background-accent-blue-subtlest, #E9F2FE)", ";\n\t\t}\n\t\t.ak-editor-panel[data-panel-type=\"note\"] .").concat(_types2.TableCssClassName.TABLE_CONTAINER, " {\n\t\t\t").concat(_consts2.akEditorTableContainerBg, ": ", "var(--ds-background-accent-purple-subtlest, #F8EEFE)", ";\n\t\t}\n\t\t.ak-editor-panel[data-panel-type=\"tip\"] .").concat(_types2.TableCssClassName.TABLE_CONTAINER, " {\n\t\t\t").concat(_consts2.akEditorTableContainerBg, ": ", "var(--ds-background-accent-green-subtlest, #DCFFF1)", ";\n\t\t}\n\t\t.ak-editor-panel[data-panel-type=\"warning\"] .").concat(_types2.TableCssClassName.TABLE_CONTAINER, " {\n\t\t\t").concat(_consts2.akEditorTableContainerBg, ": ", "var(--ds-background-accent-yellow-subtlest, #FEF7C8)", ";\n\t\t}\n\t\t.ak-editor-panel[data-panel-type=\"error\"] .").concat(_types2.TableCssClassName.TABLE_CONTAINER, " {\n\t\t\t").concat(_consts2.akEditorTableContainerBg, ": ", "var(--ds-background-accent-red-subtlest, #FFECEB)", ";\n\t\t}\n\t\t.ak-editor-panel[data-panel-type=\"success\"] .").concat(_types2.TableCssClassName.TABLE_CONTAINER, " {\n\t\t\t").concat(_consts2.akEditorTableContainerBg, ": ", "var(--ds-background-accent-green-subtlest, #DCFFF1)", ";\n\t\t}\n\t") : '', tableAnchorStyles, _types2.TableCssClassName.TABLE_NODE_WRAPPER, _types2.TableCssClassName.TABLE_CELL, _types2.TableCssClassName.TABLE_HEADER_CELL, _types2.TableCssClassName.TABLE_CELL, _consts4.tableCellBackgroundColor, _consts4.tableBorderColor, _consts4.tableBorderColor, _types2.TableCssClassName.CONTROLS_FLOATING_BUTTON_COLUMN, (0, _uiStyles.insertColumnButtonWrapper)(), _types2.TableCssClassName.CONTROLS_FLOATING_BUTTON_ROW, (0, _uiStyles.insertRowButtonWrapper)(), (0, _uiStyles.dragInsertButtonWrapper)(), (0, _uiStyles.dragCornerControlButton)(), (0, _uiStyles.DeleteButton)(), _types2.TableCssClassName.TABLE_STICKY, props.isDragAndDropEnabled ? _types2.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER : _types2.TableCssClassName.ROW_CONTROLS_WRAPPER, _types2.TableCssClassName.NUMBERED_COLUMN, _types2.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts4.stickyRowOffsetTop, _constants.akEditorTableNumberColumnWidth, _constants.akEditorStickyHeaderZIndex, _consts4.stickyRowOffsetTop, (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(_consts2.akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? "\n\t\t\twidth: ".concat(_constants.akEditorTableNumberColumnWidth + 1, "px;\n\t\t\tborder-left: 1px solid ").concat(_consts4.tableBorderColor, ";\n\n\t\t\t/* Keep the new fixed left border in sync with the selected/danger states,\n\t\t\t   which would otherwise leave it the default colour (.active recolours the\n\t\t\t   rest of the border) or drop it entirely (delete-hover sets border-left: 0). */\n\t\t\t&.active {\n\t\t\t\tborder-left-color: ").concat(_consts4.tableBorderSelectedColor, ";\n\t\t\t}\n\t\t\t&.").concat(_types2.TableCssClassName.HOVERED_CELL_IN_DANGER, " {\n\t\t\t\tborder-left: 1px solid ").concat(_consts4.tableBorderDeleteColor, ";\n\t\t\t}\n\t\t\t") : '', _types2.TableCssClassName.TABLE_STICKY, _types2.TableCssClassName.CORNER_CONTROLS, _constants.akEditorSmallZIndex, (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(_consts2.akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", _consts4.tableToolbarSize, _consts4.tableToolbarSize, _types2.TableCssClassName.CORNER_CONTROLS, _types2.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts4.tableToolbarSize, _consts4.tableToolbarSize, tableStickyHeaderColumnControlsDecorationsStyle(), tableStickyHeaderFirefoxFixStyle(), _types2.TableCssClassName.TABLE_STICKY, _types2.TableCssClassName.ROW_CONTROLS, _types2.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _constants.akEditorStickyHeaderZIndex, _consts4.tableToolbarSize, (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(_consts2.akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", _consts4.tableToolbarSize, _types2.TableCssClassName.TABLE_STICKY, (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(_consts2.akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", _consts4.stickyRowOffsetTop, (0, _stickyHeaderZIndex.getTableZIndexes)().header, (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(_consts2.akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", "var(--ds-shadow-overflow-perimeter, #1E1F211f)", _types2.TableCssClassName.NESTED_TABLE_WITH_CONTROLS, _types2.TableCssClassName.NESTED_TABLE_WITH_CONTROLS, _consts4.stickyHeaderBorderBottomWidth, _consts4.tableBorderColor, _types2.TableCssClassName.TABLE_STICKY, _types2.TableCssClassName.TABLE_STICKY, _types2.TableCssClassName.TABLE_STICKY, insertColumnButtonOffset + 1, _types2.TableCssClassName.TABLE_CONTAINER, _types2.TableCssClassName.TABLE_STICKY, _dragHandle.DRAG_HANDLE_WIDTH, "var(--ds-space-150, 12px)", "var(--ds-space-400, 32px)", "var(--ds-space-200, 16px)", "var(--ds-space-300, 24px)", "var(--ds-space-400, 32px)", "var(--ds-space-200, 16px)", "var(--ds-space-300, 24px)", _dragHandle.DRAG_HANDLE_WIDTH, "var(--ds-space-150, 12px)", (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(_consts2.akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", _consts4.rowControlsZIndex + 5, _types2.TableCssClassName.TABLE_CONTAINER, _types2.TableCssClassName.TABLE_STICKY, _dragHandle.DRAG_HANDLE_WIDTH, "var(--ds-space-150, 12px)", _constants.akEditorTableNumberColumnWidth, _types2.TableCssClassName.TABLE_STICKY, _types2.TableCssClassName.TABLE_CONTAINER, _types2.TableCssClassName.TABLE_STICKY, _types2.TableCssClassName.WITH_RESIZE_LINE, _types2.TableCssClassName.WITH_RESIZE_LINE, _types2.TableCssClassName.RESIZE_HANDLE_DECORATION, (_consts4.resizeHandlerAreaWidth - _consts4.resizeLineWidth) / 2 + 1, _types2.TableCssClassName.WITH_RESIZE_LINE, _types2.TableCssClassName.SELECTED_CELL, _types2.TableCssClassName.WITH_RESIZE_LINE, _types2.TableCssClassName.SELECTED_CELL, _types2.TableCssClassName.RESIZE_HANDLE_DECORATION, (_consts4.resizeHandlerAreaWidth - _consts4.resizeLineWidth) / 2, _types2.TableCssClassName.HOVERED_CELL, _types2.TableCssClassName.SELECTED_CELL, _types2.TableCssClassName.NATIVE_STICKY, _table.tableMarginTop, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? _constants.akEditorSmallZIndex : "calc(".concat((0, _stickyHeaderZIndex.getTableZIndexes)().header, ")"), _consts4.tableBorderColor, _consts4.tableBorderColor, _types2.TableCssClassName.NATIVE_STICKY_ACTIVE, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? "z-index: ".concat((0, _stickyHeaderZIndex.getTableZIndexes)().header, ";") : '', _consts4.tableBorderColor, _consts4.tableBorderColor, "var(--ds-shadow-overflow-perimeter, #1E1F211f)", _types2.TableCssClassName.TABLE_HEADER_CELL, _consts4.tableBorderColor, _consts4.tableBorderColor, _types2.TableCssClassName.TABLE_NODE_WRAPPER, _types2.TableCssClassName.NATIVE_STICKY, _table.tableMarginTop, _table.tableMarginTop, (0, _stickyHeaderZIndex.getTableZIndexes)().mask, _types2.TableCssClassName.TABLE_NODE_WRAPPER, _types2.TableCssClassName.NATIVE_STICKY_ACTIVE, _table.tableMarginTop, (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(_consts2.akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? "\n\t/* Borders floor to device pixels at fractional zoom; overlap the sticky row by 1px to avoid a seam. */\n\t.".concat(_types2.TableCssClassName.TABLE_NODE_WRAPPER, ":has(tr.").concat(_types2.TableCssClassName.NATIVE_STICKY, ")::before {\n\t\tborder-top: none;\n\t\theight: ").concat(_table.tableMarginTop + 1, "px;\n\t\tmargin-bottom: -").concat(_table.tableMarginTop + 1, "px;\n\t\tbackground: transparent;\n\t}\n\n\t.").concat(_types2.TableCssClassName.TABLE_NODE_WRAPPER, ":has(tr.").concat(_types2.TableCssClassName.NATIVE_STICKY_ACTIVE, ")::before {\n\t\tborder-top: none;\n\t\tbackground: ").concat((0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(_consts2.akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", ";\n\t}\n\t") : '', _types2.TableCssClassName.TABLE_CONTAINER, _types2.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _types2.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types2.TableCssClassName.DRAG_ROW_CONTROLS, _consts4.tableColumnControlsHeight, (0, _stickyHeaderZIndex.getTableZIndexes)().aboveHeader, _types2.TableCssClassName.TABLE_CONTAINER, _types2.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _types2.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types2.TableCssClassName.TABLE_CONTAINER, _types2.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _types2.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types2.TableCssClassName.DRAG_ROW_CONTROLS, (0, _stickyHeaderZIndex.getTableZIndexes)().belowHeader, _types2.TableCssClassName.TABLE_CONTAINER, _types2.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _types2.TableCssClassName.NATIVE_STICKY, _types2.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types2.TableCssClassName.NUMBERED_COLUMN, _consts4.tableColumnControlsHeight, _types2.TableCssClassName.NATIVE_STICKY, _constants.akEditorTableNumberColumnWidth, _constants.akEditorTableNumberColumnWidth, _types2.TableCssClassName.TABLE_CONTAINER, _types2.TableCssClassName.WITH_CONTROLS, _types2.TableCssClassName.DRAG_ROW_FLOATING_DRAG_HANDLE, _types2.TableCssClassName.WITH_CONTROLS, _types2.TableCssClassName.NATIVE_STICKY, _table.tableMarginTop, _types2.TableCssClassName.WITH_CONTROLS, _consts4.tableControlsSpacing, _types2.TableCssClassName.WITH_CONTROLS, _types2.TableCssClassName.TABLE_STICKY, _types2.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types2.TableCssClassName.NUMBERED_COLUMN, _types2.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts4.tableControlsSpacing, _types2.TableCssClassName.CORNER_CONTROLS, _consts4.tableControlsSpacing - _consts4.tableToolbarSize, (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(_consts2.akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", sentinelStyles, stickyScrollbarStyles, _consts4.tablePadding, _types2.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types2.TableCssClassName.ROW_CONTROLS_WRAPPER, _consts4.tablePadding, _types2.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types2.TableCssClassName.TABLE_CHROMELESS, _types2.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER, _consts4.tablePadding, _types2.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER, _types2.TableCssClassName.TABLE_CHROMELESS, _types2.TableCssClassName.TABLE_CONTAINER, _constants.akEditorTableNumberColumnWidth + _consts4.tablePadding - 1, _styles.TableSharedCssClassName.TABLE_LEFT_BORDER, _styles.TableSharedCssClassName.TABLE_RIGHT_BORDER, _types2.TableCssClassName.NODEVIEW_WRAPPER, breakoutWidthStyling(), (0, _uiStyles.columnControlsDecoration)(), (0, _uiStyles.rowControlsWrapperDotStyle)(), _types2.TableCssClassName.CORNER_CONTROLS, _consts4.tableToolbarSize + 1, cornerControlHeight, _types2.TableCssClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, (0, _uiStyles.InsertMarker)("\n          left: -11px;\n          top: 9px;\n        "), _types2.TableCssClassName.CORNER_CONTROLS, _types2.TableCssClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, _types2.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts4.tableToolbarSize + 1, _consts4.tableToolbarSize + 1, _consts4.tableBorderColor, _consts4.tableBorderRadiusSize, _consts4.tableHeaderCellBackgroundColor, _types2.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts4.tableBorderSelectedColor, _consts4.tableToolbarSelectedColor, _types2.TableCssClassName.TABLE_CONTAINER, _types2.TableCssClassName.CORNER_CONTROLS, _types2.TableCssClassName.CONTROLS_CORNER_BUTTON, _constants.akEditorTableToolbarSize + _constants.akEditorTableNumberColumnWidth + 1, _types2.TableCssClassName.ROW_CONTROLS, _types2.TableCssClassName.CONTROLS_BUTTON, _types2.TableCssClassName.IS_RESIZING, _types2.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts4.tableBorderSelectedColor, _consts4.tableToolbarSelectedColor, _types2.TableCssClassName.IS_RESIZING, _types2.TableCssClassName.CONTROLS_CORNER_BUTTON, _types2.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts4.tableBorderDeleteColor, _consts4.tableToolbarDeleteColor, _types2.TableCssClassName.ROW_CONTROLS, _consts4.tableToolbarSize, (0, _uiStyles.InsertMarker)("\n        bottom: -1px;\n        left: -11px;\n      "), _types2.TableCssClassName.ROW_CONTROLS_INNER, _types2.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _consts4.tableBorderRadiusSize, _types2.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types2.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types2.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types2.TableCssClassName.CONTROLS_BUTTON, _constants.akEditorUnitZIndex, (0, _uiStyles.HeaderButton)("\n        border-bottom: 1px solid ".concat(_consts4.tableBorderColor, ";\n        border-right: 0px;\n        border-radius: 0;\n        height: 100%;\n        width: ").concat(_consts4.tableToolbarSize, "px;\n\n        .").concat(_types2.TableCssClassName.CONTROLS_BUTTON_OVERLAY, " {\n          position: absolute;\n          width: 30px;\n          height: 50%;\n          right: 0;\n          bottom: 0;\n        }\n        .").concat(_types2.TableCssClassName.CONTROLS_BUTTON_OVERLAY, ":first-of-type {\n          top: 0;\n        }\n      ")), _types2.TableCssClassName.DRAG_ROW_CONTROLS, _consts4.rowControlsZIndex + 4, _types2.TableCssClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER, _types2.TableCssClassName.DRAG_ROW_FLOATING_INSERT_DOT, "var(--ds-background-accent-gray-subtler, #DDDEE1)", _types2.TableCssClassName.DRAG_COLUMN_CONTROLS, _types2.TableCssClassName.DRAG_COLUMN_CONTROLS_INNER, _consts4.tableColumnControlsHeight, "var(--ds-space-negative-150, -12px)", (0, _stickyHeaderZIndex.getTableZIndexes)().resizeHandle, _types2.TableCssClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER, _consts4.tableColumnControlsHeight, _types2.TableCssClassName.DRAG_COLUMN_FLOATING_INSERT_DOT, "var(--ds-background-accent-gray-subtler, #DDDEE1)", _types2.TableCssClassName.DRAG_HANDLE_BUTTON_CLICKABLE_ZONE, _types2.TableCssClassName.DRAG_HANDLE_BUTTON_CONTAINER, "var(--ds-surface, #FFFFFF)", _types2.TableCssClassName.DRAG_HANDLE_DISABLED, _types2.TableCssClassName.DRAG_HANDLE_MINIMISED, "var(--ds-background-accent-gray-subtler, #DDDEE1)", "var(--ds-background-accent-gray-subtlest, #F0F1F2)", "var(--ds-icon-disabled, #080F214A)", _types2.TableCssClassName.DRAG_HANDLE_DISABLED, "var(--ds-background-accent-gray-subtler, #DDDEE1)", "var(--ds-icon-subtle, #505258)", "var(--ds-background-accent-blue-subtle, #669DF1)", "var(--ds-icon-inverse, #FFFFFF)", "var(--ds-border-focused, #4688EC)", "var(--ds-background-accent-blue-subtle, #669DF1)", "var(--ds-icon-inverse, #FFFFFF)", "var(--ds-background-accent-red-subtler-pressed, #FD9891)", "var(--ds-border-inverse, #FFFFFF)", (0, _uiStyles.floatingColumnControls)(), _types2.TableCssClassName.IS_RESIZING, _types2.TableCssClassName.ROW_CONTROLS, (0, _uiStyles.HeaderButtonHover)(), (0, _uiStyles.HeaderButtonDanger)(), _types2.TableCssClassName.NUMBERED_COLUMN, _constants.akEditorTableToolbarSize, props.isDragAndDropEnabled ? 0 : _constants.akEditorTableToolbarSize, _constants.akEditorTableNumberColumnWidth + 1, _types2.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts4.tableBorderColor, (0, _constants.relativeSizeToBaseFontSize)(10), (0, _constants.relativeSizeToBaseFontSize)(14), _consts4.tableHeaderCellBackgroundColor, _consts4.tableTextColor, _consts4.tableBorderColor, _consts4.tableBorderColor, _types2.TableCssClassName.TABLE_STICKY, props.isDragAndDropEnabled ? _types2.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER : _types2.TableCssClassName.ROW_CONTROLS_WRAPPER, _types2.TableCssClassName.NUMBERED_COLUMN_BUTTON_DISABLED, "var(--ds-surface, #FFFFFF)", _types2.TableCssClassName.WITH_CONTROLS, _types2.TableCssClassName.CORNER_CONTROLS, _types2.TableCssClassName.ROW_CONTROLS, _types2.TableCssClassName.NUMBERED_COLUMN, _types2.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types2.TableCssClassName.NUMBERED_COLUMN_BUTTON, numberedColumnButtonSelectedStyles, _types2.TableCssClassName.TABLE_CONTAINER, _types2.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts4.tableBorderColor, _constants.akEditorSelectedNodeClassName, _types2.TableCssClassName.NUMBERED_COLUMN, _types2.TableCssClassName.NUMBERED_COLUMN_BUTTON, numberedColumnButtonSelectedStyles, _utils.hideNativeBrowserTextSelectionStyles, _types2.TableCssClassName.IS_RESIZING, _types2.TableCssClassName.WITH_CONTROLS, _types2.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types2.TableCssClassName.NUMBERED_COLUMN_BUTTON_DISABLED, _types2.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types2.TableCssClassName.NUMBERED_COLUMN_BUTTON_DISABLED, numberedColumnButtonSelectedStyles, _types2.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types2.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts4.tableToolbarDeleteColor, _consts4.tableBorderDeleteColor, "var(--ds-text-danger, #AE2E24)", _constants.akEditorUnitZIndex, _types2.TableCssClassName.IS_RESIZING, _types2.TableCssClassName.WITH_CONTROLS, _types2.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts4.tableToolbarDeleteColor, _consts4.tableBorderDeleteColor, "var(--ds-text-danger, #AE2E24)", _constants.akEditorUnitZIndex, _types2.TableCssClassName.TABLE_NODE_WRAPPER, _types2.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types2.TableCssClassName.TABLE_HEADER_CELL, _types2.TableCssClassName.SELECTED_CELL, _types2.TableCssClassName.HOVERED_CELL_IN_DANGER, _types2.TableCssClassName.SELECTED_CELL, _types2.TableCssClassName.HOVERED_CELL_IN_DANGER, _constants.akEditorSmallZIndex, _types2.TableCssClassName.SELECTED_CELL, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? '' /* Cell borders handled by ::after overlay in rounded mode. */ : "border: 1px solid ".concat(_consts4.tableBorderSelectedColor, ";"), _types2.TableCssClassName.SELECTED_CELL, _consts4.tableCellSelectedColor, _constants.akEditorSmallZIndex, _types2.TableCssClassName.TABLE_HEADER_CELL, _types2.TableCssClassName.HOVERED_CELL_IN_DANGER, _types2.TableCssClassName.TABLE_CELL, _types2.TableCssClassName.HOVERED_CELL_IN_DANGER, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? '' /* Cell border colors are handled by the ::after overlay in rounded mode. */ : "border-left-color: ".concat(_consts4.tableBorderDeleteColor, ";\n\t\t\tborder-top-color: ").concat(_consts4.tableBorderDeleteColor, ";"), _consts4.tableBorderDeleteColor, (0, _stickyHeaderZIndex.getTableZIndexes)().dangerOverlay, _consts4.tableCellDeleteColor, _types2.TableCssClassName.HOVERED_CELL, _types2.TableCssClassName.SELECTED_CELL, _types2.TableCssClassName.TABLE_HEADER_CELL, _types2.TableCssClassName.SELECTED_CELL, _types2.TableCssClassName.TABLE_HEADER_CELL, _types2.TableCssClassName.HOVERED_CELL, _consts4.tableBorderSelectedColor, _constants.akEditorSmallZIndex, _types2.TableCssClassName.HOVERED_CELL_IN_DANGER, tableBorderStyles(), (0, _stickyHeaderZIndex.getTableZIndexes)().dangerOverlay, _consts4.tableCellDeleteColor, _types2.TableCssClassName.HOVERED_NO_HIGHLIGHT, _types2.TableCssClassName.HOVERED_CELL_IN_DANGER, tableBorderStyles(), (0, _stickyHeaderZIndex.getTableZIndexes)().dangerOverlay, _consts4.tableCellDeleteColor, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? (0, _roundedTableStyles.roundedTableOverrides)() : '', _types2.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _table.tableMarginTop, _consts4.tableToolbarSize + 1, _types2.TableCssClassName.ROW_CONTROLS_WRAPPER, props.isDragAndDropEnabled ? "\n\t\t\tmargin-top: ".concat(_table.tableMarginTop, "px;\n\t\t\ttop: 0;\n\t\t\tleft: -").concat(_consts4.tableToolbarSize + 1, "px;\n\t\t") : "\n\t\t\t/* top of corner control is table margin top - corner control height + 1 pixel of table border. */\n\t\t\ttop: ".concat(_table.tableMarginTop - cornerControlHeight + 1, "px;\n\t\t\tmargin-top: 0;\n\t\t\tleft: -").concat(_consts4.tableToolbarSize, "px;\n\t\t"), _types2.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER, _table.tableMarginTop, _types2.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _types2.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? _table.tableMarginTop - 1 : _table.tableMarginTop, (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(_consts2.akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", (0, _stickyHeaderZIndex.getTableZIndexes)().aboveHeader, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? "\n\t\t/* Transparent bottom 1px so the sticky header row's top border stays visible. */\n\t\tpadding-bottom: 1px;\n\t\tbackground-clip: content-box;\n\t\t/* Chrome can fall back to start alignment after zoom, covering the header. */\n\t\talign-self: unsafe end;" : "", _types2.TableCssClassName.TABLE_CONTAINER, _types2.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _types2.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER, _constants.akEditorTableNumberColumnWidth + _consts4.dragRowControlsWidth, _constants.akEditorTableNumberColumnWidth + _consts4.dragRowControlsWidth, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? _table.tableMarginTop - 1 : _table.tableMarginTop, (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(_consts2.akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", (0, _stickyHeaderZIndex.getTableZIndexes)().belowHeader, _types2.TableCssClassName.TABLE_CONTAINER, _types2.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? "".concat(_constants.akEditorTableNumberColumnWidth, "px") : "".concat(_constants.akEditorTableNumberColumnWidth - 1, "px"), (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? 'calc(100% + 2px)' : '100%', (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? "-".concat(_constants.akEditorTableNumberColumnWidth + 1, "px") : "-".concat(_constants.akEditorTableNumberColumnWidth, "px"), (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? // Anchor the mask with an explicit `top` so `vertical-align` (data-valign) on the cell
   // doesn't shift it; the calc reproduces the previous top-aligned offset.
   "top: calc(".concat("var(--ds-space-100, 8px)", " - ", _consts4.stickyRowOffsetTop + 1, "px);") : "margin-top: -".concat(_consts4.stickyRowOffsetTop, "px;"), (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? 'none' : "0.5px solid ".concat(_consts4.tableBorderColor), (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? "1px solid ".concat(_consts4.tableBorderColor) : 'none', (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? "border-bottom: 1px solid ".concat(_consts4.tableBorderColor, ";") : "", "var(--ds-background-accent-gray-subtlest, #F0F1F2)", _consts4.tableBorderColor, _types2.TableCssClassName.TABLE_CONTAINER, _types2.TableCssClassName.TABLE_SELECTED, _types2.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _consts4.tableBorderSelectedColor, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? "border-bottom-color: ".concat(_consts4.tableBorderSelectedColor, ";") : '', _consts4.tableBorderSelectedColor, _consts4.tableHeaderCellSelectedColor, _types2.TableCssClassName.TABLE_CONTAINER, _types2.TableCssClassName.TABLE_SELECTED, _types2.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _types2.TableCssClassName.SELECTED_CELL, _types2.TableCssClassName.HOVERED_CELL_IN_DANGER, _types2.TableCssClassName.TABLE_CONTAINER, _types2.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _types2.TableCssClassName.SELECTED_CELL, _types2.TableCssClassName.HOVERED_CELL_IN_DANGER, _types2.TableCssClassName.COLUMN_SELECTED, _consts4.tableBorderSelectedColor, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? "border-bottom-color: ".concat(_consts4.tableBorderSelectedColor) : '', _consts4.tableBorderSelectedColor, _consts4.tableHeaderCellSelectedColor, _types2.TableCssClassName.TABLE_CONTAINER, _types2.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _types2.TableCssClassName.HOVERED_CELL_IN_DANGER, _types2.TableCssClassName.TABLE_CONTAINER, _types2.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _types2.TableCssClassName.HOVERED_CELL_IN_DANGER, _types2.TableCssClassName.COLUMN_SELECTED, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? // Recolour the corner edges to the delete border and composite the translucent danger
   // fill over the mask's gray so it matches the adjacent cells instead of reading as transparent.
-  "border-left: 1px solid ".concat(_consts4.tableBorderDeleteColor, ";\n\t\t\t\t\t\tborder-top: 1px solid ").concat(_consts4.tableBorderDeleteColor, ";\n\t\t\t\t\t\tborder-bottom: 1px solid ").concat(_consts4.tableBorderDeleteColor, ";\n\t\t\t\t\t\tbackground-color: ", "var(--ds-background-accent-gray-subtlest, #F0F1F2)", ";\n\t\t\t\t\t\tbackground-image: linear-gradient(").concat(_consts4.tableCellDeleteColor, ", ").concat(_consts4.tableCellDeleteColor, ");") : "border-left: unset;\n\t\t\t\t\tborder-top: unset;\n\t\t\t\t\tbackground: ".concat(_consts4.tableCellDeleteColor, ";"), _types2.TableCssClassName.TABLE_CONTAINER, _types2.TableCssClassName.TABLE_SELECTED, _types2.TableCssClassName.HOVERED_DELETE_BUTTON, _types2.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _types2.TableCssClassName.TABLE_CONTAINER, _types2.TableCssClassName.HOVERED_DELETE_BUTTON, _types2.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _types2.TableCssClassName.SELECTED_CELL, _types2.TableCssClassName.COLUMN_SELECTED, _consts4.tableBorderDeleteColor, _consts4.tableBorderDeleteColor, _consts4.tableCellDeleteColor, _types2.TableCssClassName.TABLE_CONTAINER, _types2.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _types2.TableCssClassName.NATIVE_STICKY_ACTIVE, "var(--ds-shadow-overflow-perimeter, #1E1F211f)", _types2.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _types2.TableCssClassName.DRAG_COLUMN_CONTROLS_INNER, _types2.TableCssClassName.NESTED_TABLE_WITH_CONTROLS, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_table_q4_patch_8') ? _table.tableMarginTop - 1 : _table.tableMarginTop, _types2.TableCssClassName.TABLE_STICKY, _types2.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER, (0, _stickyHeaderZIndex.getTableZIndexes)().aboveHeader, _types2.TableCssClassName.TABLE_CONTAINER, _types2.TableCssClassName.WITH_CONTROLS, _types2.TableCssClassName.NUMBERED_COLUMN, _types2.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts4.tableBorderColor, _types2.TableCssClassName.TABLE_CONTAINER, _types2.TableCssClassName.TABLE_STICKY, _types2.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER, _constants.akEditorUnitZIndex, _types2.TableCssClassName.TABLE_NODE_WRAPPER, _types2.TableCssClassName.TABLE_NODE_WRAPPER, _types2.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, (0, _fg.fg)('platform-dst-tokens-finesse') ? selectedCellBorderStyles() : '');
+  "border-left: 1px solid ".concat(_consts4.tableBorderDeleteColor, ";\n\t\t\t\t\t\tborder-top: 1px solid ").concat(_consts4.tableBorderDeleteColor, ";\n\t\t\t\t\t\tborder-bottom: 1px solid ").concat(_consts4.tableBorderDeleteColor, ";\n\t\t\t\t\t\tbackground-color: ", "var(--ds-background-accent-gray-subtlest, #F0F1F2)", ";\n\t\t\t\t\t\tbackground-image: linear-gradient(").concat(_consts4.tableCellDeleteColor, ", ").concat(_consts4.tableCellDeleteColor, ");") : "border-left: unset;\n\t\t\t\t\tborder-top: unset;\n\t\t\t\t\tbackground: ".concat(_consts4.tableCellDeleteColor, ";"), _types2.TableCssClassName.TABLE_CONTAINER, _types2.TableCssClassName.TABLE_SELECTED, _types2.TableCssClassName.HOVERED_DELETE_BUTTON, _types2.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _types2.TableCssClassName.TABLE_CONTAINER, _types2.TableCssClassName.HOVERED_DELETE_BUTTON, _types2.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _types2.TableCssClassName.SELECTED_CELL, _types2.TableCssClassName.COLUMN_SELECTED, _consts4.tableBorderDeleteColor, _consts4.tableBorderDeleteColor, _consts4.tableCellDeleteColor, _types2.TableCssClassName.TABLE_CONTAINER, _types2.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _types2.TableCssClassName.NATIVE_STICKY_ACTIVE, "var(--ds-shadow-overflow-perimeter, #1E1F211f)", _types2.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _types2.TableCssClassName.DRAG_COLUMN_CONTROLS_INNER, _types2.TableCssClassName.NESTED_TABLE_WITH_CONTROLS, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? _table.tableMarginTop - 1 : _table.tableMarginTop, _types2.TableCssClassName.TABLE_STICKY, _types2.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER, (0, _stickyHeaderZIndex.getTableZIndexes)().aboveHeader, _types2.TableCssClassName.TABLE_CONTAINER, _types2.TableCssClassName.WITH_CONTROLS, _types2.TableCssClassName.NUMBERED_COLUMN, _types2.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts4.tableBorderColor, _types2.TableCssClassName.TABLE_CONTAINER, _types2.TableCssClassName.TABLE_STICKY, _types2.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER, _constants.akEditorUnitZIndex, _types2.TableCssClassName.TABLE_NODE_WRAPPER, _types2.TableCssClassName.TABLE_NODE_WRAPPER, _types2.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, (0, _fg.fg)('platform-dst-tokens-finesse') ? selectedCellBorderStyles() : '');
 };
 
 // eslint-disable-next-line @repo/internal/deprecations/deprecation-ticket-required

package/dist/es2019/ui/FloatingContextualButton/FixedButton.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useRef } from 'react';
+import React, { useEffect, useLayoutEffect, useMemo, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import rafSchedule from 'raf-schd';
 import { TableCssClassName as ClassName } from '../../types';
@@ -20,6 +20,7 @@ export const calcObserverTargetMargin = (tableWrapper, fixedButtonRefCurrent) =>
   return fixedButtonRect.left - tableWrapperRect.left + scrollLeft;
 };
 export const FixedButton = ({
+  cellLayoutVersion = 0,
   children,
   isContextualMenuOpen,
   mountTo,
@@ -85,10 +86,24 @@ export const FixedButton = ({
     }
   }, [fixedButtonRef, observerTargetRef, tableWrapper, targetCellPosition, targetCellRef, isContextualMenuOpen]);
   const fixedButtonTop = 0;
+
+  // The left position below is read from the cell's current rect, which already includes the
+  // table's horizontal scroll, so the scroll translation accumulated so far must start again.
+  useLayoutEffect(() => {
+    const fixedButtonRefCurrent = fixedButtonRef.current;
+    const observerTargetRefCurrent = observerTargetRef.current;
+    if (cellLayoutVersion === 0 || !fixedButtonRefCurrent || !observerTargetRefCurrent) {
+      return;
+    }
+    fixedButtonRefCurrent.style.transform = '';
+    scrollDataRef.current = tableWrapper.scrollLeft;
+    leftPosDataRef.current = 0;
+    observerTargetRefCurrent.style.marginLeft = `${calcObserverTargetMargin(tableWrapper, fixedButtonRefCurrent)}px`;
+  }, [cellLayoutVersion, tableWrapper]);
   const containerLeft = useMemo(() => {
     const container = targetCellRef.closest('[data-editor-container="true"]');
     return (container === null || container === void 0 ? void 0 : container.getBoundingClientRect().left) || 0;
-  }, [targetCellRef]);
+  }, [targetCellRef, cellLayoutVersion]);
   const left = useMemo(() => {
     const targetCellRect = targetCellRef.getBoundingClientRect();
     const baseLeft = calcLeftPos({
@@ -98,7 +113,7 @@ export const FixedButton = ({
       offset
     });
     return baseLeft - containerLeft;
-  }, [containerLeft, targetCellRef, offset]);
+  }, [containerLeft, targetCellRef, offset, cellLayoutVersion]);
 
   // Using a portal here to ensure wrapperRef has the tableWrapper as an
   // ancestor. This is required to make the Intersection Observer work.

package/dist/es2019/ui/FloatingContextualButton/index.js

@@ -27,6 +27,7 @@ import { getTableZIndexes } from '../sticky-header-z-index';
 // eslint-disable-next-line import/no-named-as-default
 import FixedButton from './FixedButton';
 import { tableFloatingCellButtonSelectedStyles, tableFloatingCellButtonStyles } from './styles';
+import { useCellLayoutVersion } from './useCellLayoutVersion';
 const BUTTON_OFFSET = 3;
 const CONTEXTUAL_MENU_BUTTON_Z_INDEX = 2;
 const anchorStyles = css({
@@ -95,6 +96,9 @@ const FloatingContextualButtonInner = /*#__PURE__*/React.memo(props => {
   };
   const domAtPos = editorView.domAtPos.bind(editorView);
   const targetCellRef = findDomRefAtPos(targetCellPosition, domAtPos);
+  // Re-renders this component when the cell may have moved, so both FixedButton and Popup
+  // reposition: Popup recalculates its position whenever it receives new props.
+  const cellLayoutVersion = useCellLayoutVersion(targetCellRef);
   useEffect(() => {
     if (isCellMenuOpenByKeyboard && !isCellMenuOpen) {
       const {
@@ -194,6 +198,7 @@ const FloatingContextualButtonInner = /*#__PURE__*/React.memo(props => {
   }
   if (stickyHeader && parentSticky && tableWrapper) {
     return jsx(FixedButton, {
+      cellLayoutVersion: cellLayoutVersion,
       offset: BUTTON_OFFSET,
       stickyHeader: stickyHeader,
       tableWrapper: tableWrapper,

package/dist/es2019/ui/FloatingContextualButton/useCellLayoutVersion.js

@@ -0,0 +1,44 @@
+import { useEffect, useState } from 'react';
+import rafSchedule from 'raf-schd';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
+
+/**
+ * Counts layout changes that can move the target cell without re-rendering the cell options
+ * button: the editor container resizing (window resize, side panel, product sidebar) or the table
+ * resizing (column scaling). Changing the count re-renders the button so it repositions on its
+ * cell. Stays 0 when the gate is off.
+ */
+export const useCellLayoutVersion = targetCellRef => {
+  const [layoutVersion, setLayoutVersion] = useState(0);
+  useEffect(() => {
+    if (!fg('platform_editor_sticky_cell_options_position')) {
+      return;
+    }
+    if (!(targetCellRef instanceof HTMLElement)) {
+      return;
+    }
+    const container = targetCellRef.closest('[data-editor-container="true"]');
+    const table = targetCellRef.closest('table');
+    const bumpLayoutVersion = rafSchedule(() => setLayoutVersion(version => version + 1));
+    let hasReceivedInitialEntries = false;
+    const observer = new ResizeObserver(() => {
+      // ResizeObserver reports every observed element once on observe(); that is not a move.
+      if (!hasReceivedInitialEntries) {
+        hasReceivedInitialEntries = true;
+        return;
+      }
+      bumpLayoutVersion();
+    });
+    if (container) {
+      observer.observe(container);
+    }
+    if (table) {
+      observer.observe(table);
+    }
+    return () => {
+      observer.disconnect();
+      bumpLayoutVersion.cancel();
+    };
+  }, [targetCellRef]);
+  return layoutVersion;
+};

package/dist/es2019/ui/common-styles.js

@@ -549,7 +549,7 @@ expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? rangeS
 			${expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? `var(${akEditorTableContainerBg}, ${"var(--ds-surface, #FFFFFF)"})` : "var(--ds-surface, #FFFFFF)"};
 	}
 
-	${expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && isExperimentEnabled('platform_editor_table_q4_patch_8') ? `
+	${expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? `
 	/* Borders floor to device pixels at fractional zoom; overlap the sticky row by 1px to avoid a seam. */
 	.${ClassName.TABLE_NODE_WRAPPER}:has(tr.${ClassName.NATIVE_STICKY})::before {
 		border-top: none;
@@ -1223,21 +1223,19 @@ expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? rangeS
 	.${ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW} > .${ClassName.DRAG_COLUMN_CONTROLS_WRAPPER} {
 		/* +2px is to overlap the table border on the sides */
 		width: calc(anchor-size(width) + 2px);
-		height: ${expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && isExperimentEnabled('platform_editor_table_q4_patch_8') ? tableMarginTop - 1 : tableMarginTop}px;
+		height: ${expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? tableMarginTop - 1 : tableMarginTop}px;
 		background: ${expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? `var(${akEditorTableContainerBg}, ${"var(--ds-surface, #FFFFFF)"})` : "var(--ds-surface, #FFFFFF)"};
 		top: unset;
 		position: fixed;
 		position-area: top center;
 		position-visibility: anchors-visible;
 		z-index: ${getTableZIndexes().aboveHeader};
-		${expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? isExperimentEnabled('platform_editor_table_q4_patch_8') ? `
+		${expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? `
 		/* Transparent bottom 1px so the sticky header row's top border stays visible. */
 		padding-bottom: 1px;
 		background-clip: content-box;
 		/* Chrome can fall back to start alignment after zoom, covering the header. */
-		align-self: unsafe end;` : `
-		/* Leave a 1px gap so the sticky header row's top border stays visible. */
-		translate: 0 -1px;` : ``}
+		align-self: unsafe end;` : ``}
 	}
 
 	/** Mask for content to the left of the column controls */
@@ -1248,7 +1246,7 @@ expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? rangeS
 		display: inline-block;
 		margin-left: -${akEditorTableNumberColumnWidth + dragRowControlsWidth}px;
 		width: ${akEditorTableNumberColumnWidth + dragRowControlsWidth}px;
-		height: ${expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && isExperimentEnabled('platform_editor_table_q4_patch_8') ? tableMarginTop - 1 : tableMarginTop}px;
+		height: ${expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? tableMarginTop - 1 : tableMarginTop}px;
 		background: ${expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? `var(${akEditorTableContainerBg}, ${"var(--ds-surface, #FFFFFF)"})` : "var(--ds-surface, #FFFFFF)"};
 		z-index: ${getTableZIndexes().belowHeader};
 	}
@@ -1322,7 +1320,7 @@ expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? rangeS
 	.${ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW}
 		.${ClassName.DRAG_COLUMN_CONTROLS_INNER}:not(.${ClassName.NESTED_TABLE_WITH_CONTROLS} *) {
 		/* !important to override the inline style in the inner controls component */
-		margin-top: ${expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && isExperimentEnabled('platform_editor_table_q4_patch_8') ? tableMarginTop - 1 : tableMarginTop}px !important;
+		margin-top: ${expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? tableMarginTop - 1 : tableMarginTop}px !important;
 	}
 
 	.${ClassName.TABLE_STICKY} .${ClassName.DRAG_COLUMN_CONTROLS_WRAPPER} {

package/dist/esm/ui/FloatingContextualButton/FixedButton.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useRef } from 'react';
+import React, { useEffect, useLayoutEffect, useMemo, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import rafSchedule from 'raf-schd';
 import { TableCssClassName as ClassName } from '../../types';
@@ -19,7 +19,9 @@ export var calcObserverTargetMargin = function calcObserverTargetMargin(tableWra
   return fixedButtonRect.left - tableWrapperRect.left + scrollLeft;
 };
 export var FixedButton = function FixedButton(_ref2) {
-  var children = _ref2.children,
+  var _ref2$cellLayoutVersi = _ref2.cellLayoutVersion,
+    cellLayoutVersion = _ref2$cellLayoutVersi === void 0 ? 0 : _ref2$cellLayoutVersi,
+    children = _ref2.children,
     isContextualMenuOpen = _ref2.isContextualMenuOpen,
     mountTo = _ref2.mountTo,
     offset = _ref2.offset,
@@ -83,10 +85,24 @@ export var FixedButton = function FixedButton(_ref2) {
     }
   }, [fixedButtonRef, observerTargetRef, tableWrapper, targetCellPosition, targetCellRef, isContextualMenuOpen]);
   var fixedButtonTop = 0;
+
+  // The left position below is read from the cell's current rect, which already includes the
+  // table's horizontal scroll, so the scroll translation accumulated so far must start again.
+  useLayoutEffect(function () {
+    var fixedButtonRefCurrent = fixedButtonRef.current;
+    var observerTargetRefCurrent = observerTargetRef.current;
+    if (cellLayoutVersion === 0 || !fixedButtonRefCurrent || !observerTargetRefCurrent) {
+      return;
+    }
+    fixedButtonRefCurrent.style.transform = '';
+    scrollDataRef.current = tableWrapper.scrollLeft;
+    leftPosDataRef.current = 0;
+    observerTargetRefCurrent.style.marginLeft = "".concat(calcObserverTargetMargin(tableWrapper, fixedButtonRefCurrent), "px");
+  }, [cellLayoutVersion, tableWrapper]);
   var containerLeft = useMemo(function () {
     var container = targetCellRef.closest('[data-editor-container="true"]');
     return (container === null || container === void 0 ? void 0 : container.getBoundingClientRect().left) || 0;
-  }, [targetCellRef]);
+  }, [targetCellRef, cellLayoutVersion]);
   var left = useMemo(function () {
     var targetCellRect = targetCellRef.getBoundingClientRect();
     var baseLeft = calcLeftPos({
@@ -96,7 +112,7 @@ export var FixedButton = function FixedButton(_ref2) {
       offset: offset
     });
     return baseLeft - containerLeft;
-  }, [containerLeft, targetCellRef, offset]);
+  }, [containerLeft, targetCellRef, offset, cellLayoutVersion]);
 
   // Using a portal here to ensure wrapperRef has the tableWrapper as an
   // ancestor. This is required to make the Intersection Observer work.

package/dist/esm/ui/FloatingContextualButton/index.js

@@ -30,6 +30,7 @@ import { getTableZIndexes } from '../sticky-header-z-index';
 // eslint-disable-next-line import/no-named-as-default
 import FixedButton from './FixedButton';
 import { tableFloatingCellButtonSelectedStyles, tableFloatingCellButtonStyles } from './styles';
+import { useCellLayoutVersion } from './useCellLayoutVersion';
 var BUTTON_OFFSET = 3;
 var CONTEXTUAL_MENU_BUTTON_Z_INDEX = 2;
 var anchorStyles = css({
@@ -89,6 +90,9 @@ var FloatingContextualButtonInner = /*#__PURE__*/React.memo(function (props) {
   };
   var domAtPos = editorView.domAtPos.bind(editorView);
   var targetCellRef = findDomRefAtPos(targetCellPosition, domAtPos);
+  // Re-renders this component when the cell may have moved, so both FixedButton and Popup
+  // reposition: Popup recalculates its position whenever it receives new props.
+  var cellLayoutVersion = useCellLayoutVersion(targetCellRef);
   useEffect(function () {
     if (isCellMenuOpenByKeyboard && !isCellMenuOpen) {
       var state = editorView.state,
@@ -181,6 +185,7 @@ var FloatingContextualButtonInner = /*#__PURE__*/React.memo(function (props) {
   }
   if (stickyHeader && parentSticky && tableWrapper) {
     return jsx(FixedButton, {
+      cellLayoutVersion: cellLayoutVersion,
       offset: BUTTON_OFFSET,
       stickyHeader: stickyHeader,
       tableWrapper: tableWrapper,

package/dist/esm/ui/FloatingContextualButton/useCellLayoutVersion.js

@@ -0,0 +1,52 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useEffect, useState } from 'react';
+import rafSchedule from 'raf-schd';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
+
+/**
+ * Counts layout changes that can move the target cell without re-rendering the cell options
+ * button: the editor container resizing (window resize, side panel, product sidebar) or the table
+ * resizing (column scaling). Changing the count re-renders the button so it repositions on its
+ * cell. Stays 0 when the gate is off.
+ */
+export var useCellLayoutVersion = function useCellLayoutVersion(targetCellRef) {
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    layoutVersion = _useState2[0],
+    setLayoutVersion = _useState2[1];
+  useEffect(function () {
+    if (!fg('platform_editor_sticky_cell_options_position')) {
+      return;
+    }
+    if (!(targetCellRef instanceof HTMLElement)) {
+      return;
+    }
+    var container = targetCellRef.closest('[data-editor-container="true"]');
+    var table = targetCellRef.closest('table');
+    var bumpLayoutVersion = rafSchedule(function () {
+      return setLayoutVersion(function (version) {
+        return version + 1;
+      });
+    });
+    var hasReceivedInitialEntries = false;
+    var observer = new ResizeObserver(function () {
+      // ResizeObserver reports every observed element once on observe(); that is not a move.
+      if (!hasReceivedInitialEntries) {
+        hasReceivedInitialEntries = true;
+        return;
+      }
+      bumpLayoutVersion();
+    });
+    if (container) {
+      observer.observe(container);
+    }
+    if (table) {
+      observer.observe(table);
+    }
+    return function () {
+      observer.disconnect();
+      bumpLayoutVersion.cancel();
+    };
+  }, [targetCellRef]);
+  return layoutVersion;
+};

package/dist/esm/ui/common-styles.js

@@ -86,11 +86,11 @@ var baseTableStylesWithoutSharedStyle = function baseTableStylesWithoutSharedSty
   return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\n\t", "\n\n\t", "\n\n\t", ";\n\n\t.", " {\n\t\ttd.", ", th.", " {\n\t\t\tposition: relative;\n\t\t\toverflow: visible;\n\t\t}\n\n\t\ttd.", " {\n\t\t\tbackground-color: ", ";\n\t\t\t&::after {\n\t\t\t\theight: 100%;\n\t\t\t\tcontent: '';\n\t\t\t\tborder-left: 1px solid ", ";\n\t\t\t\tborder-bottom: 1px solid ", ";\n\t\t\t\tposition: absolute;\n\t\t\t\tright: 0px;\n\t\t\t\ttop: 0px;\n\t\t\t\tbottom: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t}\n\t}\n\n\t.", " {\n\t\t", "\n\t}\n\n\t.", " {\n\t\t", "\n\t}\n\n\t", "\n\n\t", "\n\n\t/* Delete button */\n\t", "\n\t/* Ends Delete button */\n\n\t/* sticky styles */\n\t.", " > .", " .", " .", ":first-of-type {\n\t\tmargin-top: ", "px;\n\t\twidth: ", "px;\n\n\t\tposition: fixed !important;\n\t\tz-index: ", " !important;\n\t\tbox-shadow: 0px -", "px\n\t\t\t", ";\n\t\tborder-right: 0 none;\n\t\t", "/* top set by NumberColumn component */\n\t}\n\n\t.", " .", ".sticky {\n\t\tposition: fixed !important;\n\t\t/* needs to be above row controls */\n\t\tz-index: ", " !important;\n\t\tbackground: ", ";\n\n\t\twidth: ", "px;\n\t\theight: ", "px;\n\t}\n\n\t.", ".sticky .", " {\n\t\tborder-bottom: 0px none;\n\t\tborder-right: 0px none;\n\n\t\theight: ", "px;\n\t\twidth: ", "px;\n\t}\n\n\t", "\n\n\t", "\n\n    .", "\n      .", "\n      .", ".sticky {\n\t\tposition: fixed !important;\n\t\tz-index: ", " !important;\n\t\tdisplay: flex;\n\t\tborder-left: ", "px solid\n\t\t\t", ";\n\t\tmargin-left: -", "px;\n\t}\n\n\t.", " col:first-of-type {\n\t\t/* moving rows out of a table layout does weird things in Chrome */\n\t\tborder-right: 1px solid\n\t\t\t", ";\n\t}\n\n\ttr.sticky {\n\t\tpadding-top: ", "px;\n\t\tposition: fixed;\n\t\tdisplay: grid;\n\n\t\t/* to keep it above cell selection but below date and other nodes popups that are inside sticky header */\n\t\tz-index: ", ";\n\n\t\toverflow-y: visible;\n\t\toverflow-x: hidden;\n\n\t\tgrid-auto-flow: column;\n\n\t\t/* background for where controls apply */\n\t\tbackground: ", ";\n\t\tbox-sizing: content-box;\n\t\tbox-shadow: 0 6px 4px -4px ", ";\n\n\t\tmargin-left: -1px;\n\n\t\t&.no-pointer-events {\n\t\t\tpointer-events: none;\n\t\t}\n\t}\n\n\t.tableView-content-wrap:has(.tableView-content-wrap):has(\n\t\t\t.", "\n\t\t) {\n\t\tpadding-left: unset;\n\t}\n\n\t.tableView-content-wrap:has(.", ") {\n\t\tpadding-left: 15px;\n\t}\n\n\ttr.sticky th {\n\t\tborder-bottom: ", "px solid ", ";\n\t\tmargin-right: -1px;\n\t}\n\n\t.", " tr.sticky > th:last-child {\n\t\tborder-right-width: 1px;\n\t}\n\n\t/* add left edge for first cell */\n\t.", " tr.sticky > th:first-of-type {\n\t\tmargin-left: 0px;\n\t}\n\n\t/* add a little bit so the scroll lines up with the table */\n\t.", " tr.sticky::after {\n\t\tcontent: ' ';\n\t\twidth: ", "px;\n\t}\n\n\t/* use :before element to hide table row insert dots when legacy table sticky header is activated */\n\t.", ".", ":has(tr.sticky)::before {\n\t\tcontent: ' ';\n\t\tposition: sticky;\n\t\tpointer-events: none;\n\t\ttop: 0;\n\t\tfloat: left;\n\t\ttransform: translateX(calc(-1 * (", "px + ", ")));\n\t\tmargin-bottom: calc(\n\t\t\t-1 * (", " - 1px + ", " + ", ")\n\t\t);\n\t\theight: calc(", " - 1px + ", " + ", ");\n\t\twidth: calc(", "px + ", ");\n\t\tbackground: linear-gradient(\n\t\t\tto bottom,\n\t\t\t", "\n\t\t\t\t90%,\n\t\t\ttransparent\n\t\t);\n\t\tz-index: ", ";\n\t}\n\t/* Shift the mask left by the numbered column width so it sits to the left of it. */\n\t.", ".", "[data-number-column='true']:has(tr.sticky)::before {\n\t\ttransform: translateX(\n\t\t\tcalc(\n\t\t\t\t-1 * (", "px + ", " + ", "px)\n\t\t\t)\n\t\t);\n\t}\n\n\t/* To fix jumpiness caused in Chrome Browsers for sticky headers */\n\t.", " .sticky + tr {\n\t\tmin-height: 0px;\n\t}\n\n\t/* move resize line a little in sticky bar */\n\t.", ".", " {\n\t\ttr.sticky td.", ", tr.sticky th.", " {\n\t\t\t.", "::after {\n\t\t\t\tright: ", "px;\n\t\t\t}\n\t\t}\n\n\t\t/* when selected put it back to normal -- :not selector would be nicer */\n\t\ttr.sticky\n\t\t\ttd.", ".", ",\n\t\t\ttr.sticky\n\t\t\tth.", ".", " {\n\t\t\t.", "::after {\n\t\t\t\tright: ", "px;\n\t\t\t}\n\t\t}\n\t}\n\n\ttr.sticky .", ", tr.sticky .", " {\n\t\tz-index: 1;\n\t}\n\n\ttr.", " {\n\t\tposition: sticky;\n\t\ttop: ", "px;\n\t\tz-index: ", ";\n\t\tbox-shadow:\n\t\t\tinset -1px 1px ", ",\n\t\t\tinset 1px -1px ", ";\n\n\t\t&.", " {\n\t\t\t", "\n\t\t\tbox-shadow:\n\t\t\t\tinset -1px 1px ", ",\n\t\t\t\tinset 1px -1px ", ",\n\t\t\t\t0 6px 4px -4px ", ";\n\t\t}\n\n\t\tth.", "::after {\n\t\t\theight: 100%;\n\t\t\tcontent: '';\n\t\t\tborder-left: 1px solid ", ";\n\t\t\tborder-bottom: 1px solid ", ";\n\t\t\tposition: absolute;\n\t\t\tright: 0px;\n\t\t\ttop: 0px;\n\t\t\tbottom: 0;\n\t\t\twidth: 100%;\n\t\t\tdisplay: inline-block;\n\t\t\tpointer-events: none;\n\t\t}\n\t}\n\n\t/** Adds mask above sticky header to prevent table content from bleeding through on scroll */\n\t.", ":has(tr.", ")::before {\n\t\tcontent: ' ';\n\t\tdisplay: block;\n\t\ttop: 0;\n\t\tbox-sizing: border-box;\n\t\twidth: 100%;\n\t\theight: 0;\n\t\tmargin-bottom: -", "px;\n\t\tposition: sticky;\n\t\tborder-top: ", "px solid transparent;\n\t\tz-index: ", ";\n\t}\n\n\t.", ":has(tr.", ")::before {\n\t\tborder-top: ", "px solid\n\t\t\t", ";\n\t}\n\n\t", "\n\n\t/** Corrects position of drag row controls when sticky header top mask is present */\n\t.", ":has(.", ")\n\t\t> .", "\n\t\t> div\n\t\t> .", " {\n\t\ttop: ", "px;\n\t\tz-index: ", ";\n\t}\n\n\t.", ":has(> .", ")\n\t\t> .", " {\n\t\tmargin-top: 0;\n\t}\n\n\t.", "[data-table-header-is-stuck='true']:has(.", ")\n\t\t> .", "\n\t\t> div\n\t\t> .", " {\n\t\tz-index: ", ";\n\t}\n\n\t/** Corrects position of numbered column when sticky header top mask is present */\n\t.", ":has(.", " tr.", ")\n\t\t> .", "\n\t\t> div\n\t\t> .", " {\n\t\ttop: ", "px;\n\t}\n\n\t/** Expands the mask to encompass the numbered column */\n\t.pm-table-wrapper:has([data-number-column='true'] tr.", ")::before {\n\t\tmargin-left: -", "px;\n\t\twidth: calc(100% + ", "px);\n\t}\n\n\t/** Hides the header row drag handle when the position:sticky table header is 'stuck'\n\t *\n\t * 1. We check that the header is 'stuck'.\n\t * - The table container has attribute data-table-header-is-stuck='true' when sticky positioned header is 'stuck'\n\t *\n\t * 2. We check that the header row drag handle is in the first row or the first row is selected\n\t * - The header row drag handle has the data-row-index='0' attribute (i.e. hovered), OR\n\t * - The header row drag handle has the data-selected-row-index='0' attribute\n\t * \t\tAND does not have the data-handle-appearance='default' attribute (i.e. selected)\n\t*/\n\t.", ".", "[data-table-header-is-stuck='true']\n\t.", ":is([data-row-index='0'], [data-selected-row-index='0']:not([data-handle-appearance='default'])) {\n\t\tvisibility: hidden;\n\t}\n\n\t.", " tr.", " {\n\t\ttop: ", "px;\n\t}\n\n\t.", " tr.sticky {\n\t\tpadding-top: ", "px;\n\t}\n\n\t.", ".", "\n\t\t> .", "\n\t\t.", "\n\t\t.", ":first-of-type {\n\t\tmargin-top: ", "px;\n\t}\n\n\t.", ".sticky {\n\t\tborder-top: ", "px solid\n\t\t\t", ";\n\t}\n\n\t", "\n\t", "\n\n\t.less-padding {\n\t\tpadding: 0 ", "px;\n\n\t\t.", ", .", " {\n\t\t\tpadding: 0 ", "px;\n\n\t\t\t/* https://product-fabric.atlassian.net/browse/ED-16386\n\t\t\tFixes issue where the extra padding that is added here throws off the position\n\t\t\tof the rows control dot */\n\t\t\t&::after {\n\t\t\t\tright: 6px !important;\n\t\t\t}\n\t\t}\n\n\t\t.", ".", " {\n\t\t\tleft: -4px;\n\t\t}\n\n\t\t.", " {\n\t\t\tpadding: 0 ", "px;\n\t\t}\n\n\t\t.", ".", " {\n\t\t\tleft: -8px;\n\t\t}\n\n\t\t&.", "[data-number-column='true'] {\n\t\t\tpadding-left: ", "px;\n\t\t}\n\t\t.", " {\n\t\t\tleft: 8px;\n\t\t}\n\t\t.", " {\n\t\t\tright: 8px;\n\t\t}\n\t}\n\n\t> .", " {\n\t\t/**\n       * Prevent margins collapsing, aids with placing the gap-cursor correctly\n       * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing\n       *\n       * TODO: Enable this, many tests will fail!\n       * border-top: 1px solid transparent;\n       */\n\t}\n\n\t/* Breakout only works on top level unless wrapped in fragment mark */\n\t", "\n\n\t", ";\n\t", ";\n\n\t/* Corner controls */\n\t.", " {\n\t\twidth: ", "px;\n\t\theight: ", "px;\n\t\tdisplay: none;\n\n\t\t.", " {\n\t\t\tposition: relative;\n\n\t\t\t", ";\n\t\t}\n\t}\n\n\t.", ".sticky {\n\t\t.", " {\n\t\t\t/* sticky row insert dot overlaps other row insert and messes things up */\n\t\t\tdisplay: none !important;\n\t\t}\n\t}\n\n\t.", " {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\twidth: ", "px;\n\t\theight: ", "px;\n\t\tborder: 1px solid ", ";\n\t\tborder-radius: 0;\n\t\tborder-top-left-radius: ", "px;\n\t\tbackground: ", ";\n\t\tbox-sizing: border-box;\n\t\tpadding: 0;\n\t\t:focus {\n\t\t\toutline: none;\n\t\t}\n\t}\n\t.active .", " {\n\t\tborder-color: ", ";\n\t\tbackground: ", ";\n\t}\n\n\t.", "[data-number-column='true'] {\n\t\t.", ", .", " {\n\t\t\twidth: ", "px;\n\t\t}\n\t\t.", " .", " {\n\t\t\tborder-right-width: 0;\n\t\t}\n\t}\n\n\t:not(.", ") .", ":hover {\n\t\tborder-color: ", ";\n\t\tbackground: ", ";\n\t\tcursor: pointer;\n\t}\n\n\t:not(.", ")\n\t\t.", ".", " {\n\t\tborder-color: ", ";\n\t\tbackground: ", ";\n\t}\n\n\t/* Row controls */\n\t.", " {\n\t\twidth: ", "px;\n\t\tbox-sizing: border-box;\n\t\tdisplay: none;\n\t\tposition: relative;\n\n\t\t", ";\n\n\t\t.", " {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t}\n\t\t.", ":last-child > button {\n\t\t\tborder-bottom-left-radius: ", "px;\n\t\t}\n\t\t.", " {\n\t\t\tposition: relative;\n\t\t\tmargin-top: -1px;\n\t\t}\n\t\t.", ":hover,\n\t\t\t.", ".active,\n\t\t\t.", ":hover {\n\t\t\tz-index: ", ";\n\t\t}\n\n\t\t", "\n\t}\n\n\t.", " {\n\t\tdisplay: grid;\n\t\talign-items: center;\n\t\tposition: absolute;\n\t\tz-index: ", ";\n\n\t\t.", " {\n\t\t\tposition: absolute;\n\t\t\talign-self: end;\n\t\t\theight: 100%;\n\t\t\twidth: 18px;\n\t\t}\n\n\t\t.", " {\n\t\t\tposition: absolute;\n\t\t\tbottom: -3px;\n\t\t\tleft: 2px;\n\t\t\tbackground-color: ", ";\n\t\t\theight: 4px;\n\t\t\twidth: 4px;\n\t\t\tborder-radius: 50%;\n\t\t\tpointer-events: none;\n\t\t}\n\t}\n\n\t.", " {\n\t\t.", " {\n\t\t\theight: ", "px;\n\t\t\tposition: absolute;\n\t\t\ttop: ", ";\n\t\t\tz-index: ", ";\n\t\t}\n\n\t\t.", " {\n\t\t\tposition: absolute;\n\t\t\theight: ", "px;\n\t\t\twidth: 100%;\n\t\t}\n\n\t\t.", " {\n\t\t\tbackground-color: ", ";\n\t\t\theight: 4px;\n\t\t\twidth: 4px;\n\t\t\tborder-radius: 50%;\n\t\t\tposition: absolute;\n\t\t\tright: -2px;\n\t\t}\n\t}\n\n\t.", " {\n\t\tbackground: none;\n\t\tborder: none;\n\t\toutline: none;\n\t\tposition: absolute;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tcursor: pointer;\n\n\t\t:focus {\n\t\t\toutline: none;\n\t\t}\n\t}\n\n\t.", " {\n\t\tcursor: grab;\n\t\tpointer-events: auto;\n\n\t\tline-height: 0;\n\t\tpadding: 0;\n\t\tborder-radius: 6px;\n\t\twidth: max-content;\n\t\tborder: 2px solid ", ";\n\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tbackground: transparent;\n\t\toutline: none;\n\n\t\t&.placeholder {\n\t\t\tbackground-color: transparent;\n\t\t\tborder: 2px solid transparent;\n\t\t}\n\n\t\t&.", " {\n\t\t\tcursor: pointer;\n\t\t\t& svg {\n\t\t\t\t& > rect.", " {\n\t\t\t\t\tfill: ", ";\n\t\t\t\t}\n\t\t\t\t& > rect {\n\t\t\t\t\tfill: ", ";\n\t\t\t\t}\n\t\t\t\t& > g > rect {\n\t\t\t\t\tfill: ", ";\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&:not(.", ") {\n\t\t\t& svg {\n\t\t\t\trect {\n\t\t\t\t\tfill: ", ";\n\t\t\t\t}\n\t\t\t\tg {\n\t\t\t\t\tfill: ", ";\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&:hover {\n\t\t\t\tsvg {\n\t\t\t\t\trect {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t\tg {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&:active {\n\t\t\t\tcursor: grabbing;\n\t\t\t}\n\n\t\t\t&.selected {\n\t\t\t\t:focus {\n\t\t\t\t\toutline: 2px solid ", ";\n\t\t\t\t\toutline-offset: 1px;\n\t\t\t\t}\n\n\t\t\t\t&:active {\n\t\t\t\t\toutline: none;\n\t\t\t\t}\n\n\t\t\t\tsvg {\n\t\t\t\t\trect {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t\tg {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&.danger {\n\t\t\t\tsvg {\n\t\t\t\t\trect {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t\tg {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t", "\n\n\t:not(.", ") .", " {\n\t\t", "\n\t\t", "\n\t}\n\n\t/* Numbered column */\n\t.", " {\n\t\tposition: relative;\n\t\tfloat: right;\n\t\tmargin-left: ", "px;\n\t\ttop: ", "px;\n\t\twidth: ", "px;\n\t\tbox-sizing: border-box;\n\t}\n\n\t.", " {\n\t\tborder: 1px solid ", ";\n\t\tbox-sizing: border-box;\n\t\tmargin-top: -1px;\n\t\tpadding-bottom: 2px;\n\t\tpadding: ", " 2px;\n\t\ttext-align: center;\n\t\tfont-size: ", ";\n\t\tbackground-color: ", ";\n\t\tcolor: ", ";\n\t\tborder-color: ", ";\n\n\t\t:first-child:not(style),\n\t\tstyle:first-child + * {\n\t\t\tmargin-top: 0;\n\t\t}\n\t\t:last-child {\n\t\t\tborder-bottom: 1px solid ", ";\n\t\t}\n\t}\n\n\t/* add a background above the first numbered column cell when sticky header is engaged\n\twhich hides the table when scrolling */\n\t.", "\n\t\t> .", " {\n\t\t.", ":first-of-type::after {\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\theight: 33px;\n\t\t\twidth: 100%;\n\t\t\tbackground-color: ", ";\n\t\t\tposition: absolute;\n\n\t\t\t/* the extra pixel is accounting for borders */\n\t\t\ttop: -34px;\n\t\t\tleft: -1px;\n\t\t}\n\t}\n\n\t.", " {\n\t\t.", ", .", " {\n\t\t\tdisplay: block;\n\t\t}\n\t\t.", " {\n\t\t\tpadding-left: 0px;\n\n\t\t\t.", " {\n\t\t\t\tborder-left: 0 none;\n\t\t\t}\n\n\t\t\t.", ".active {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\n\t\t/* nested tables should be ignored when we apply border-left: 0 to the parent table */\n\t\t.", " {\n\t\t\t.", " {\n\t\t\t\tborder-left: 1px solid ", ";\n\t\t\t}\n\t\t}\n\t}\n\n\t/* Apply numbered column styling when table is selected via text selection (e.g., block menu) */\n\t.", " {\n\t\t.", " {\n\t\t\t.", " {\n\t\t\t\t", "\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\t}\n\n\t:not(.", ") .", " {\n\t\t.", ":not(.", ") {\n\t\t\tcursor: pointer;\n\t\t}\n\t\t.", ":not(.", "):hover {\n\t\t\t", "\n\t\t}\n\t\t.", ".", " {\n\t\t\tbackground-color: ", ";\n\t\t\tborder: 1px solid ", ";\n\t\t\tborder-left: 0;\n\t\t\tcolor: ", ";\n\t\t\tposition: relative;\n\t\t\tz-index: ", ";\n\t\t}\n\t}\n\n\t.tableView-content-wrap.danger {\n\t\t:not(.", ") .", " {\n\t\t\t.", " {\n\t\t\t\tbackground-color: ", ";\n\t\t\t\tborder: 1px solid ", ";\n\t\t\t\tborder-left: 0;\n\t\t\t\tcolor: ", ";\n\t\t\t\tposition: relative;\n\t\t\t\tz-index: ", ";\n\t\t\t}\n\t\t}\n\t}\n\n\t/* Table */\n\t.", " > table {\n\t\ttable-layout: fixed;\n\t\twhite-space: normal;\n\t\tborder-top: none;\n\t\t/* 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212 */\n\t\tmargin-right: -1px;\n\t\t/* Allows better positioning for the shadow sentinels - ED-16668 */\n\t\tposition: relative;\n\n\t\t> tbody > tr {\n\t\t\twhite-space: pre-wrap;\n\t\t}\n\n\t\t.", " + * {\n\t\t\tmargin-top: 0;\n\t\t}\n\n\t\t/*\n       * Headings have a top margin by default, but we don't want this on the\n       * first heading within table header cells.\n       *\n       * This specifically sets margin-top for the first heading within a header\n       * cell when center/right aligned.\n       */\n\t\tth.", " > .fabric-editor-block-mark {\n\t\t\t> h1:first-of-type,\n\t\t\t> h2:first-of-type,\n\t\t\t> h3:first-of-type,\n\t\t\t> h4:first-of-type,\n\t\t\t> h5:first-of-type,\n\t\t\t> h6:first-of-type {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t.", ", .", " {\n\t\t\tposition: relative;\n\t\t}\n\t\t/* Give selected cells a blue overlay */\n\t\t.", "::after, .", "::after {\n\t\t\tz-index: ", ";\n\t\t\tposition: absolute;\n\t\t\tcontent: '';\n\t\t\tleft: 0;\n\t\t\tright: 0;\n\t\t\ttop: 0;\n\t\t\tbottom: 0;\n\t\t\twidth: 100%;\n\t\t\tpointer-events: none;\n\t\t}\n\t\t.", " {\n\t\t\t", "\n\t\t}\n\t\t.", "::after {\n\t\t\tbackground: ", ";\n\t\t\tz-index: ", ";\n\t\t}\n\t\t/* Override border colors for danger state */\n\t\tth.", ".", ",\n\t\t\ttd.", ".", " {\n\t\t\t", "\n\t\t\t&::after {\n\t\t\t\theight: 100%;\n\t\t\t\twidth: 100%;\n\t\t\t\tborder: 1px solid ", ";\n\t\t\t\tcontent: '';\n\t\t\t\tposition: absolute;\n\t\t\t\tleft: -1px;\n\t\t\t\ttop: -1px;\n\t\t\t\tbottom: 0;\n\t\t\t\tz-index: ", ";\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tpointer-events: none;\n\t\t\t\tbackground: ", ";\n\t\t\t}\n\t\t}\n\t\ttd.", ",\n\t\t\ttd.", ",\n\t\t\tth.", ".", ",\n\t\t\tth.", ".", " {\n\t\t\t&::after {\n\t\t\t\theight: 100%;\n\t\t\t\twidth: 100%;\n\t\t\t\tborder: 1px solid ", ";\n\t\t\t\tcontent: '';\n\t\t\t\tposition: absolute;\n\t\t\t\tleft: -1px;\n\t\t\t\ttop: -1px;\n\t\t\t\tbottom: 0;\n\t\t\t\tz-index: ", ";\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t\t&.", "::after {\n\t\t\t\t", ";\n\t\t\t\tz-index: ", ";\n\t\t\t\tbackground: ", ";\n\t\t\t}\n\n\t\t\t&.", ".", "::after {\n\t\t\t\t", ";\n\t\t\t\tz-index: ", ";\n\t\t\t\tbackground: ", ";\n\t\t\t}\n\t\t}\n\t}\n\n\t", "\n\n\t/* override for DnD controls */\n\t.", " {\n\t\tposition: absolute;\n\t\tmargin-top: ", "px;\n\t\tleft: -", "px;\n\t}\n\n\t.", " {\n\t\tposition: absolute;\n\t\t/* this is to fix the misalignment of the numbered column in live page view mode */\n\t\t", "\n\t}\n\n\t.", " {\n\t\tposition: absolute;\n\t\ttop: ", "px;\n\t}\n\n\t.", " > .", " {\n\t\t/* +2px is to overlap the table border on the sides */\n\t\twidth: calc(anchor-size(width) + 2px);\n\t\theight: ", "px;\n\t\tbackground: ", ";\n\t\ttop: unset;\n\t\tposition: fixed;\n\t\tposition-area: top center;\n\t\tposition-visibility: anchors-visible;\n\t\tz-index: ", ";\n\t\t", "\n\t}\n\n\t/** Mask for content to the left of the column controls */\n\n\t.", "[data-number-column=\"true\"] .", " > .", "::before {\n\t\tcontent: '';\n\t\tposition: relative;\n\t\tdisplay: inline-block;\n\t\tmargin-left: -", "px;\n\t\twidth: ", "px;\n\t\theight: ", "px;\n\t\tbackground: ", ";\n\t\tz-index: ", ";\n\t}\n\n\t/** Mask for numbered column content to the left of the header row */\n\t.", "[data-number-column=\"true\"] .", " tr:first-of-type th:first-of-type::before {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tdisplay: inline-block;\n\t\tbox-sizing: border-box;\n\t\tleft: 0;\n\t\twidth: ", ";\n\t\theight: ", ";\n\t\tmargin-left: ", ";\n\t\t", "\n\t\toutline: ", ";\n\t\tborder-left: ", ";\n\t\t", "\n\t\tbackground: ", ";\n\t\tborder-top: 1px solid ", ";\n\t}\n\n\t.ak-editor-selected-node .", "[data-number-column=\"true\"]:not(.", ") .", " tr:first-of-type th:first-of-type {\n\t\t/* Recolour the number-column corner mask to match the selected cells. Keep this identical\n\t\t   to the .selectedCell ::before rule below \u2014 never set margin-top (the base negative\n\t\t   margin aligns the mask) or radius (rounded generically by data-reaches-* rules). */\n\t\t&::before {\n\t\t\toutline: none;\n\t\t\tborder-left-color: ", ";\n\t\t\t", "\n\t\t\tborder-top-color: ", ";\n\t\t\tbackground: ", ";\n\t\t}\n\t}\n\n\t.", "[data-number-column=\"true\"].", " .", " tr:first-of-type th.", ":not(.", "):first-of-type::before, .", "[data-number-column=\"true\"] .", " tr:first-of-type th.", ":not(.", ", .", "):first-of-type::before {\n\t\toutline: none;\n\t\tborder-left-color: ", ";\n\t\t", ";\n\t\tborder-top-color: ", ";\n\t\tbackground: ", ";\n\t}\n\n\t.", "[data-number-column=\"true\"] .", " tr:first-of-type th.", ":first-of-type::before, .", "[data-number-column=\"true\"] .", " tr:first-of-type th.", ":not(.", "):first-of-type::before {\n\t\toutline: none;\n\t\t", "\n\t}\n\t.", "[data-number-column=\"true\"].", ".", " .", " tr:first-of-type th:first-of-type::before, .", "[data-number-column=\"true\"].", " .", " tr:first-of-type th.", ":not(.", "):first-of-type::before {\n\t\toutline: none;\n\t\tborder-left-color: ", ";\n\t\tborder-top-color: ", ";\n\t\tbackground: ", ";\n\t}\n\n\t.", "[data-number-column=\"true\"] .", " .", " th:first-of-type::before {\n\t\tbox-shadow: 0 6px 4px -4px ", ";\n\t}\n\n\t.", "\n\t\t.", ":not(.", " *) {\n\t\t/* !important to override the inline style in the inner controls component */\n\t\tmargin-top: ", "px !important;\n\t}\n\n\t.", " .", " {\n\t\tposition: fixed;\n\t\t/* Keep column controls above the sticky header. */\n\t\tz-index: ", ";\n\t}\n\n\t.", ".", ":has(tr.sticky)\n\t\t.", "\n\t\t.", ":first-of-type {\n\t\tbox-shadow: 0 -5px 0 1px ", ";\n\t}\n\n\t/* nested tables */\n\t.", " {\n\t\t.", " .", " {\n\t\t\tposition: absolute;\n\t\t\tz-index: ", ";\n\t\t}\n\t}\n\n\t.", " {\n\t\tpadding-bottom: 0px;\n\t\t/* fixes gap cursor height */\n\t\toverflow: auto;\n\t\toverflow-y: hidden;\n\t\tposition: relative;\n\t}\n\n\t.", ".", " {\n\t\toverflow: visible;\n\t}\n\n\t", "\n"])), columnControlsLineMarker(), hoveredDeleteButton(), hoveredCell(), hoveredWarningCell, insertLine(), resizeHandle(),
   // Only block getSelectionStyles when our replacement (gated by q4) owns the
   // decoration, so node selection is never left unstyled.
-  expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? rangeSelectionStylesForRoundedTable : rangeSelectionStyles, rangeSelectionStylesForFakeBorders, viewModeSortStyles(), isExperimentEnabled('platform_editor_sticky_headers_zindex') ? ".".concat(ClassName.TABLE_CONTAINER, " {\n\t\t\t--ak-editor-table-resize-handle-z-index: ").concat(getTableZIndexes().mediaResizeHandle, ";\n\t\t}") : '', expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "\n\t\t.ak-editor-panel:not([data-panel-type=\"custom\"]) .".concat(ClassName.TABLE_CONTAINER, " {\n\t\t\t").concat(akEditorTableContainerBg, ": ", "var(--ds-background-accent-blue-subtlest, #E9F2FE)", ";\n\t\t}\n\t\t.ak-editor-panel[data-panel-type=\"note\"] .").concat(ClassName.TABLE_CONTAINER, " {\n\t\t\t").concat(akEditorTableContainerBg, ": ", "var(--ds-background-accent-purple-subtlest, #F8EEFE)", ";\n\t\t}\n\t\t.ak-editor-panel[data-panel-type=\"tip\"] .").concat(ClassName.TABLE_CONTAINER, " {\n\t\t\t").concat(akEditorTableContainerBg, ": ", "var(--ds-background-accent-green-subtlest, #DCFFF1)", ";\n\t\t}\n\t\t.ak-editor-panel[data-panel-type=\"warning\"] .").concat(ClassName.TABLE_CONTAINER, " {\n\t\t\t").concat(akEditorTableContainerBg, ": ", "var(--ds-background-accent-yellow-subtlest, #FEF7C8)", ";\n\t\t}\n\t\t.ak-editor-panel[data-panel-type=\"error\"] .").concat(ClassName.TABLE_CONTAINER, " {\n\t\t\t").concat(akEditorTableContainerBg, ": ", "var(--ds-background-accent-red-subtlest, #FFECEB)", ";\n\t\t}\n\t\t.ak-editor-panel[data-panel-type=\"success\"] .").concat(ClassName.TABLE_CONTAINER, " {\n\t\t\t").concat(akEditorTableContainerBg, ": ", "var(--ds-background-accent-green-subtlest, #DCFFF1)", ";\n\t\t}\n\t") : '', tableAnchorStyles, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_CELL, ClassName.TABLE_HEADER_CELL, ClassName.TABLE_CELL, tableCellBackgroundColor, tableBorderColor, tableBorderColor, ClassName.CONTROLS_FLOATING_BUTTON_COLUMN, insertColumnButtonWrapper(), ClassName.CONTROLS_FLOATING_BUTTON_ROW, insertRowButtonWrapper(), dragInsertButtonWrapper(), dragCornerControlButton(), DeleteButton(), ClassName.TABLE_STICKY, props.isDragAndDropEnabled ? ClassName.DRAG_ROW_CONTROLS_WRAPPER : ClassName.ROW_CONTROLS_WRAPPER, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, stickyRowOffsetTop, akEditorTableNumberColumnWidth, akEditorStickyHeaderZIndex, stickyRowOffsetTop, expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? "\n\t\t\twidth: ".concat(akEditorTableNumberColumnWidth + 1, "px;\n\t\t\tborder-left: 1px solid ").concat(tableBorderColor, ";\n\n\t\t\t/* Keep the new fixed left border in sync with the selected/danger states,\n\t\t\t   which would otherwise leave it the default colour (.active recolours the\n\t\t\t   rest of the border) or drop it entirely (delete-hover sets border-left: 0). */\n\t\t\t&.active {\n\t\t\t\tborder-left-color: ").concat(tableBorderSelectedColor, ";\n\t\t\t}\n\t\t\t&.").concat(ClassName.HOVERED_CELL_IN_DANGER, " {\n\t\t\t\tborder-left: 1px solid ").concat(tableBorderDeleteColor, ";\n\t\t\t}\n\t\t\t") : '', ClassName.TABLE_STICKY, ClassName.CORNER_CONTROLS, akEditorSmallZIndex, expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", tableToolbarSize, tableToolbarSize, ClassName.CORNER_CONTROLS, ClassName.CONTROLS_CORNER_BUTTON, tableToolbarSize, tableToolbarSize, tableStickyHeaderColumnControlsDecorationsStyle(), tableStickyHeaderFirefoxFixStyle(), ClassName.TABLE_STICKY, ClassName.ROW_CONTROLS, ClassName.ROW_CONTROLS_BUTTON_WRAP, akEditorStickyHeaderZIndex, tableToolbarSize, expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", tableToolbarSize, ClassName.TABLE_STICKY, expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", stickyRowOffsetTop, getTableZIndexes().header, expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", "var(--ds-shadow-overflow-perimeter, #1E1F211f)", ClassName.NESTED_TABLE_WITH_CONTROLS, ClassName.NESTED_TABLE_WITH_CONTROLS, stickyHeaderBorderBottomWidth, tableBorderColor, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY, insertColumnButtonOffset + 1, ClassName.TABLE_CONTAINER, ClassName.TABLE_STICKY, DRAG_HANDLE_WIDTH, "var(--ds-space-150, 12px)", "var(--ds-space-400, 32px)", "var(--ds-space-200, 16px)", "var(--ds-space-300, 24px)", "var(--ds-space-400, 32px)", "var(--ds-space-200, 16px)", "var(--ds-space-300, 24px)", DRAG_HANDLE_WIDTH, "var(--ds-space-150, 12px)", expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", rowControlsZIndex + 5, ClassName.TABLE_CONTAINER, ClassName.TABLE_STICKY, DRAG_HANDLE_WIDTH, "var(--ds-space-150, 12px)", akEditorTableNumberColumnWidth, ClassName.TABLE_STICKY, ClassName.TABLE_CONTAINER, ClassName.TABLE_STICKY, ClassName.WITH_RESIZE_LINE, ClassName.WITH_RESIZE_LINE, ClassName.RESIZE_HANDLE_DECORATION, (resizeHandlerAreaWidth - resizeLineWidth) / 2 + 1, ClassName.WITH_RESIZE_LINE, ClassName.SELECTED_CELL, ClassName.WITH_RESIZE_LINE, ClassName.SELECTED_CELL, ClassName.RESIZE_HANDLE_DECORATION, (resizeHandlerAreaWidth - resizeLineWidth) / 2, ClassName.HOVERED_CELL, ClassName.SELECTED_CELL, ClassName.NATIVE_STICKY, tableMarginTop, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? akEditorSmallZIndex : "calc(".concat(getTableZIndexes().header, ")"), tableBorderColor, tableBorderColor, ClassName.NATIVE_STICKY_ACTIVE, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? "z-index: ".concat(getTableZIndexes().header, ";") : '', tableBorderColor, tableBorderColor, "var(--ds-shadow-overflow-perimeter, #1E1F211f)", ClassName.TABLE_HEADER_CELL, tableBorderColor, tableBorderColor, ClassName.TABLE_NODE_WRAPPER, ClassName.NATIVE_STICKY, tableMarginTop, tableMarginTop, getTableZIndexes().mask, ClassName.TABLE_NODE_WRAPPER, ClassName.NATIVE_STICKY_ACTIVE, tableMarginTop, expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && isExperimentEnabled('platform_editor_table_q4_patch_8') ? "\n\t/* Borders floor to device pixels at fractional zoom; overlap the sticky row by 1px to avoid a seam. */\n\t.".concat(ClassName.TABLE_NODE_WRAPPER, ":has(tr.").concat(ClassName.NATIVE_STICKY, ")::before {\n\t\tborder-top: none;\n\t\theight: ").concat(tableMarginTop + 1, "px;\n\t\tmargin-bottom: -").concat(tableMarginTop + 1, "px;\n\t\tbackground: transparent;\n\t}\n\n\t.").concat(ClassName.TABLE_NODE_WRAPPER, ":has(tr.").concat(ClassName.NATIVE_STICKY_ACTIVE, ")::before {\n\t\tborder-top: none;\n\t\tbackground: ").concat(expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", ";\n\t}\n\t") : '', ClassName.TABLE_CONTAINER, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.DRAG_ROW_CONTROLS, tableColumnControlsHeight, getTableZIndexes().aboveHeader, ClassName.TABLE_CONTAINER, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.TABLE_CONTAINER, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.DRAG_ROW_CONTROLS, getTableZIndexes().belowHeader, ClassName.TABLE_CONTAINER, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, ClassName.NATIVE_STICKY, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.NUMBERED_COLUMN, tableColumnControlsHeight, ClassName.NATIVE_STICKY, akEditorTableNumberColumnWidth, akEditorTableNumberColumnWidth, ClassName.TABLE_CONTAINER, ClassName.WITH_CONTROLS, ClassName.DRAG_ROW_FLOATING_DRAG_HANDLE, ClassName.WITH_CONTROLS, ClassName.NATIVE_STICKY, tableMarginTop, ClassName.WITH_CONTROLS, tableControlsSpacing, ClassName.WITH_CONTROLS, ClassName.TABLE_STICKY, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, tableControlsSpacing, ClassName.CORNER_CONTROLS, tableControlsSpacing - tableToolbarSize, expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", sentinelStyles, stickyScrollbarStyles, tablePadding, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.ROW_CONTROLS_WRAPPER, tablePadding, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.TABLE_CHROMELESS, ClassName.DRAG_COLUMN_CONTROLS_WRAPPER, tablePadding, ClassName.DRAG_COLUMN_CONTROLS_WRAPPER, ClassName.TABLE_CHROMELESS, ClassName.TABLE_CONTAINER, akEditorTableNumberColumnWidth + tablePadding - 1, TableSharedCssClassName.TABLE_LEFT_BORDER, TableSharedCssClassName.TABLE_RIGHT_BORDER, ClassName.NODEVIEW_WRAPPER, breakoutWidthStyling(), columnControlsDecoration(), rowControlsWrapperDotStyle(), ClassName.CORNER_CONTROLS, tableToolbarSize + 1, cornerControlHeight, ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, InsertMarker("\n          left: -11px;\n          top: 9px;\n        "), ClassName.CORNER_CONTROLS, ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, ClassName.CONTROLS_CORNER_BUTTON, tableToolbarSize + 1, tableToolbarSize + 1, tableBorderColor, tableBorderRadiusSize, tableHeaderCellBackgroundColor, ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor, tableToolbarSelectedColor, ClassName.TABLE_CONTAINER, ClassName.CORNER_CONTROLS, ClassName.CONTROLS_CORNER_BUTTON, akEditorTableToolbarSize + akEditorTableNumberColumnWidth + 1, ClassName.ROW_CONTROLS, ClassName.CONTROLS_BUTTON, ClassName.IS_RESIZING, ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor, tableToolbarSelectedColor, ClassName.IS_RESIZING, ClassName.CONTROLS_CORNER_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, tableBorderDeleteColor, tableToolbarDeleteColor, ClassName.ROW_CONTROLS, tableToolbarSize, InsertMarker("\n        bottom: -1px;\n        left: -11px;\n      "), ClassName.ROW_CONTROLS_INNER, ClassName.ROW_CONTROLS_BUTTON_WRAP, tableBorderRadiusSize, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.CONTROLS_BUTTON, akEditorUnitZIndex, HeaderButton("\n        border-bottom: 1px solid ".concat(tableBorderColor, ";\n        border-right: 0px;\n        border-radius: 0;\n        height: 100%;\n        width: ").concat(tableToolbarSize, "px;\n\n        .").concat(ClassName.CONTROLS_BUTTON_OVERLAY, " {\n          position: absolute;\n          width: 30px;\n          height: 50%;\n          right: 0;\n          bottom: 0;\n        }\n        .").concat(ClassName.CONTROLS_BUTTON_OVERLAY, ":first-of-type {\n          top: 0;\n        }\n      ")), ClassName.DRAG_ROW_CONTROLS, rowControlsZIndex + 4, ClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER, ClassName.DRAG_ROW_FLOATING_INSERT_DOT, "var(--ds-background-accent-gray-subtler, #DDDEE1)", ClassName.DRAG_COLUMN_CONTROLS, ClassName.DRAG_COLUMN_CONTROLS_INNER, tableColumnControlsHeight, "var(--ds-space-negative-150, -12px)", getTableZIndexes().resizeHandle, ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER, tableColumnControlsHeight, ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT, "var(--ds-background-accent-gray-subtler, #DDDEE1)", ClassName.DRAG_HANDLE_BUTTON_CLICKABLE_ZONE, ClassName.DRAG_HANDLE_BUTTON_CONTAINER, "var(--ds-surface, #FFFFFF)", ClassName.DRAG_HANDLE_DISABLED, ClassName.DRAG_HANDLE_MINIMISED, "var(--ds-background-accent-gray-subtler, #DDDEE1)", "var(--ds-background-accent-gray-subtlest, #F0F1F2)", "var(--ds-icon-disabled, #080F214A)", ClassName.DRAG_HANDLE_DISABLED, "var(--ds-background-accent-gray-subtler, #DDDEE1)", "var(--ds-icon-subtle, #505258)", "var(--ds-background-accent-blue-subtle, #669DF1)", "var(--ds-icon-inverse, #FFFFFF)", "var(--ds-border-focused, #4688EC)", "var(--ds-background-accent-blue-subtle, #669DF1)", "var(--ds-icon-inverse, #FFFFFF)", "var(--ds-background-accent-red-subtler-pressed, #FD9891)", "var(--ds-border-inverse, #FFFFFF)", floatingColumnControls(), ClassName.IS_RESIZING, ClassName.ROW_CONTROLS, HeaderButtonHover(), HeaderButtonDanger(), ClassName.NUMBERED_COLUMN, akEditorTableToolbarSize, props.isDragAndDropEnabled ? 0 : akEditorTableToolbarSize, akEditorTableNumberColumnWidth + 1, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderColor, relativeSizeToBaseFontSize(10), relativeSizeToBaseFontSize(14), tableHeaderCellBackgroundColor, tableTextColor, tableBorderColor, tableBorderColor, ClassName.TABLE_STICKY, props.isDragAndDropEnabled ? ClassName.DRAG_ROW_CONTROLS_WRAPPER : ClassName.ROW_CONTROLS_WRAPPER, ClassName.NUMBERED_COLUMN_BUTTON_DISABLED, "var(--ds-surface, #FFFFFF)", ClassName.WITH_CONTROLS, ClassName.CORNER_CONTROLS, ClassName.ROW_CONTROLS, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON, numberedColumnButtonSelectedStyles, ClassName.TABLE_CONTAINER, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderColor, akEditorSelectedNodeClassName, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, numberedColumnButtonSelectedStyles, hideNativeBrowserTextSelectionStyles, ClassName.IS_RESIZING, ClassName.WITH_CONTROLS, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON_DISABLED, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON_DISABLED, numberedColumnButtonSelectedStyles, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, tableToolbarDeleteColor, tableBorderDeleteColor, "var(--ds-text-danger, #AE2E24)", akEditorUnitZIndex, ClassName.IS_RESIZING, ClassName.WITH_CONTROLS, ClassName.NUMBERED_COLUMN_BUTTON, tableToolbarDeleteColor, tableBorderDeleteColor, "var(--ds-text-danger, #AE2E24)", akEditorUnitZIndex, ClassName.TABLE_NODE_WRAPPER, ClassName.COLUMN_CONTROLS_DECORATIONS, ClassName.TABLE_HEADER_CELL, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL_IN_DANGER, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL_IN_DANGER, akEditorSmallZIndex, ClassName.SELECTED_CELL, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? '' /* Cell borders handled by ::after overlay in rounded mode. */ : "border: 1px solid ".concat(tableBorderSelectedColor, ";"), ClassName.SELECTED_CELL, tableCellSelectedColor, akEditorSmallZIndex, ClassName.TABLE_HEADER_CELL, ClassName.HOVERED_CELL_IN_DANGER, ClassName.TABLE_CELL, ClassName.HOVERED_CELL_IN_DANGER, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? '' /* Cell border colors are handled by the ::after overlay in rounded mode. */ : "border-left-color: ".concat(tableBorderDeleteColor, ";\n\t\t\tborder-top-color: ").concat(tableBorderDeleteColor, ";"), tableBorderDeleteColor, getTableZIndexes().dangerOverlay, tableCellDeleteColor, ClassName.HOVERED_CELL, ClassName.SELECTED_CELL, ClassName.TABLE_HEADER_CELL, ClassName.SELECTED_CELL, ClassName.TABLE_HEADER_CELL, ClassName.HOVERED_CELL, tableBorderSelectedColor, akEditorSmallZIndex, ClassName.HOVERED_CELL_IN_DANGER, tableBorderStyles(), getTableZIndexes().dangerOverlay, tableCellDeleteColor, ClassName.HOVERED_NO_HIGHLIGHT, ClassName.HOVERED_CELL_IN_DANGER, tableBorderStyles(), getTableZIndexes().dangerOverlay, tableCellDeleteColor, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? roundedTableOverrides() : '', ClassName.DRAG_ROW_CONTROLS_WRAPPER, tableMarginTop, tableToolbarSize + 1, ClassName.ROW_CONTROLS_WRAPPER, props.isDragAndDropEnabled ? "\n\t\t\tmargin-top: ".concat(tableMarginTop, "px;\n\t\t\ttop: 0;\n\t\t\tleft: -").concat(tableToolbarSize + 1, "px;\n\t\t") : "\n\t\t\t/* top of corner control is table margin top - corner control height + 1 pixel of table border. */\n\t\t\ttop: ".concat(tableMarginTop - cornerControlHeight + 1, "px;\n\t\t\tmargin-top: 0;\n\t\t\tleft: -").concat(tableToolbarSize, "px;\n\t\t"), ClassName.DRAG_COLUMN_CONTROLS_WRAPPER, tableMarginTop, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, ClassName.DRAG_COLUMN_CONTROLS_WRAPPER, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && isExperimentEnabled('platform_editor_table_q4_patch_8') ? tableMarginTop - 1 : tableMarginTop, expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", getTableZIndexes().aboveHeader, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? isExperimentEnabled('platform_editor_table_q4_patch_8') ? "\n\t\t/* Transparent bottom 1px so the sticky header row's top border stays visible. */\n\t\tpadding-bottom: 1px;\n\t\tbackground-clip: content-box;\n\t\t/* Chrome can fall back to start alignment after zoom, covering the header. */\n\t\talign-self: unsafe end;" : "\n\t\t/* Leave a 1px gap so the sticky header row's top border stays visible. */\n\t\ttranslate: 0 -1px;" : "", ClassName.TABLE_CONTAINER, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, ClassName.DRAG_COLUMN_CONTROLS_WRAPPER, akEditorTableNumberColumnWidth + dragRowControlsWidth, akEditorTableNumberColumnWidth + dragRowControlsWidth, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && isExperimentEnabled('platform_editor_table_q4_patch_8') ? tableMarginTop - 1 : tableMarginTop, expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", getTableZIndexes().belowHeader, ClassName.TABLE_CONTAINER, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? "".concat(akEditorTableNumberColumnWidth, "px") : "".concat(akEditorTableNumberColumnWidth - 1, "px"), expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? 'calc(100% + 2px)' : '100%', expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? "-".concat(akEditorTableNumberColumnWidth + 1, "px") : "-".concat(akEditorTableNumberColumnWidth, "px"), expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? // Anchor the mask with an explicit `top` so `vertical-align` (data-valign) on the cell
+  expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? rangeSelectionStylesForRoundedTable : rangeSelectionStyles, rangeSelectionStylesForFakeBorders, viewModeSortStyles(), isExperimentEnabled('platform_editor_sticky_headers_zindex') ? ".".concat(ClassName.TABLE_CONTAINER, " {\n\t\t\t--ak-editor-table-resize-handle-z-index: ").concat(getTableZIndexes().mediaResizeHandle, ";\n\t\t}") : '', expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "\n\t\t.ak-editor-panel:not([data-panel-type=\"custom\"]) .".concat(ClassName.TABLE_CONTAINER, " {\n\t\t\t").concat(akEditorTableContainerBg, ": ", "var(--ds-background-accent-blue-subtlest, #E9F2FE)", ";\n\t\t}\n\t\t.ak-editor-panel[data-panel-type=\"note\"] .").concat(ClassName.TABLE_CONTAINER, " {\n\t\t\t").concat(akEditorTableContainerBg, ": ", "var(--ds-background-accent-purple-subtlest, #F8EEFE)", ";\n\t\t}\n\t\t.ak-editor-panel[data-panel-type=\"tip\"] .").concat(ClassName.TABLE_CONTAINER, " {\n\t\t\t").concat(akEditorTableContainerBg, ": ", "var(--ds-background-accent-green-subtlest, #DCFFF1)", ";\n\t\t}\n\t\t.ak-editor-panel[data-panel-type=\"warning\"] .").concat(ClassName.TABLE_CONTAINER, " {\n\t\t\t").concat(akEditorTableContainerBg, ": ", "var(--ds-background-accent-yellow-subtlest, #FEF7C8)", ";\n\t\t}\n\t\t.ak-editor-panel[data-panel-type=\"error\"] .").concat(ClassName.TABLE_CONTAINER, " {\n\t\t\t").concat(akEditorTableContainerBg, ": ", "var(--ds-background-accent-red-subtlest, #FFECEB)", ";\n\t\t}\n\t\t.ak-editor-panel[data-panel-type=\"success\"] .").concat(ClassName.TABLE_CONTAINER, " {\n\t\t\t").concat(akEditorTableContainerBg, ": ", "var(--ds-background-accent-green-subtlest, #DCFFF1)", ";\n\t\t}\n\t") : '', tableAnchorStyles, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_CELL, ClassName.TABLE_HEADER_CELL, ClassName.TABLE_CELL, tableCellBackgroundColor, tableBorderColor, tableBorderColor, ClassName.CONTROLS_FLOATING_BUTTON_COLUMN, insertColumnButtonWrapper(), ClassName.CONTROLS_FLOATING_BUTTON_ROW, insertRowButtonWrapper(), dragInsertButtonWrapper(), dragCornerControlButton(), DeleteButton(), ClassName.TABLE_STICKY, props.isDragAndDropEnabled ? ClassName.DRAG_ROW_CONTROLS_WRAPPER : ClassName.ROW_CONTROLS_WRAPPER, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, stickyRowOffsetTop, akEditorTableNumberColumnWidth, akEditorStickyHeaderZIndex, stickyRowOffsetTop, expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? "\n\t\t\twidth: ".concat(akEditorTableNumberColumnWidth + 1, "px;\n\t\t\tborder-left: 1px solid ").concat(tableBorderColor, ";\n\n\t\t\t/* Keep the new fixed left border in sync with the selected/danger states,\n\t\t\t   which would otherwise leave it the default colour (.active recolours the\n\t\t\t   rest of the border) or drop it entirely (delete-hover sets border-left: 0). */\n\t\t\t&.active {\n\t\t\t\tborder-left-color: ").concat(tableBorderSelectedColor, ";\n\t\t\t}\n\t\t\t&.").concat(ClassName.HOVERED_CELL_IN_DANGER, " {\n\t\t\t\tborder-left: 1px solid ").concat(tableBorderDeleteColor, ";\n\t\t\t}\n\t\t\t") : '', ClassName.TABLE_STICKY, ClassName.CORNER_CONTROLS, akEditorSmallZIndex, expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", tableToolbarSize, tableToolbarSize, ClassName.CORNER_CONTROLS, ClassName.CONTROLS_CORNER_BUTTON, tableToolbarSize, tableToolbarSize, tableStickyHeaderColumnControlsDecorationsStyle(), tableStickyHeaderFirefoxFixStyle(), ClassName.TABLE_STICKY, ClassName.ROW_CONTROLS, ClassName.ROW_CONTROLS_BUTTON_WRAP, akEditorStickyHeaderZIndex, tableToolbarSize, expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", tableToolbarSize, ClassName.TABLE_STICKY, expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", stickyRowOffsetTop, getTableZIndexes().header, expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", "var(--ds-shadow-overflow-perimeter, #1E1F211f)", ClassName.NESTED_TABLE_WITH_CONTROLS, ClassName.NESTED_TABLE_WITH_CONTROLS, stickyHeaderBorderBottomWidth, tableBorderColor, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY, insertColumnButtonOffset + 1, ClassName.TABLE_CONTAINER, ClassName.TABLE_STICKY, DRAG_HANDLE_WIDTH, "var(--ds-space-150, 12px)", "var(--ds-space-400, 32px)", "var(--ds-space-200, 16px)", "var(--ds-space-300, 24px)", "var(--ds-space-400, 32px)", "var(--ds-space-200, 16px)", "var(--ds-space-300, 24px)", DRAG_HANDLE_WIDTH, "var(--ds-space-150, 12px)", expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", rowControlsZIndex + 5, ClassName.TABLE_CONTAINER, ClassName.TABLE_STICKY, DRAG_HANDLE_WIDTH, "var(--ds-space-150, 12px)", akEditorTableNumberColumnWidth, ClassName.TABLE_STICKY, ClassName.TABLE_CONTAINER, ClassName.TABLE_STICKY, ClassName.WITH_RESIZE_LINE, ClassName.WITH_RESIZE_LINE, ClassName.RESIZE_HANDLE_DECORATION, (resizeHandlerAreaWidth - resizeLineWidth) / 2 + 1, ClassName.WITH_RESIZE_LINE, ClassName.SELECTED_CELL, ClassName.WITH_RESIZE_LINE, ClassName.SELECTED_CELL, ClassName.RESIZE_HANDLE_DECORATION, (resizeHandlerAreaWidth - resizeLineWidth) / 2, ClassName.HOVERED_CELL, ClassName.SELECTED_CELL, ClassName.NATIVE_STICKY, tableMarginTop, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? akEditorSmallZIndex : "calc(".concat(getTableZIndexes().header, ")"), tableBorderColor, tableBorderColor, ClassName.NATIVE_STICKY_ACTIVE, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? "z-index: ".concat(getTableZIndexes().header, ";") : '', tableBorderColor, tableBorderColor, "var(--ds-shadow-overflow-perimeter, #1E1F211f)", ClassName.TABLE_HEADER_CELL, tableBorderColor, tableBorderColor, ClassName.TABLE_NODE_WRAPPER, ClassName.NATIVE_STICKY, tableMarginTop, tableMarginTop, getTableZIndexes().mask, ClassName.TABLE_NODE_WRAPPER, ClassName.NATIVE_STICKY_ACTIVE, tableMarginTop, expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? "\n\t/* Borders floor to device pixels at fractional zoom; overlap the sticky row by 1px to avoid a seam. */\n\t.".concat(ClassName.TABLE_NODE_WRAPPER, ":has(tr.").concat(ClassName.NATIVE_STICKY, ")::before {\n\t\tborder-top: none;\n\t\theight: ").concat(tableMarginTop + 1, "px;\n\t\tmargin-bottom: -").concat(tableMarginTop + 1, "px;\n\t\tbackground: transparent;\n\t}\n\n\t.").concat(ClassName.TABLE_NODE_WRAPPER, ":has(tr.").concat(ClassName.NATIVE_STICKY_ACTIVE, ")::before {\n\t\tborder-top: none;\n\t\tbackground: ").concat(expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", ";\n\t}\n\t") : '', ClassName.TABLE_CONTAINER, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.DRAG_ROW_CONTROLS, tableColumnControlsHeight, getTableZIndexes().aboveHeader, ClassName.TABLE_CONTAINER, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.TABLE_CONTAINER, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.DRAG_ROW_CONTROLS, getTableZIndexes().belowHeader, ClassName.TABLE_CONTAINER, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, ClassName.NATIVE_STICKY, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.NUMBERED_COLUMN, tableColumnControlsHeight, ClassName.NATIVE_STICKY, akEditorTableNumberColumnWidth, akEditorTableNumberColumnWidth, ClassName.TABLE_CONTAINER, ClassName.WITH_CONTROLS, ClassName.DRAG_ROW_FLOATING_DRAG_HANDLE, ClassName.WITH_CONTROLS, ClassName.NATIVE_STICKY, tableMarginTop, ClassName.WITH_CONTROLS, tableControlsSpacing, ClassName.WITH_CONTROLS, ClassName.TABLE_STICKY, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, tableControlsSpacing, ClassName.CORNER_CONTROLS, tableControlsSpacing - tableToolbarSize, expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", sentinelStyles, stickyScrollbarStyles, tablePadding, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.ROW_CONTROLS_WRAPPER, tablePadding, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.TABLE_CHROMELESS, ClassName.DRAG_COLUMN_CONTROLS_WRAPPER, tablePadding, ClassName.DRAG_COLUMN_CONTROLS_WRAPPER, ClassName.TABLE_CHROMELESS, ClassName.TABLE_CONTAINER, akEditorTableNumberColumnWidth + tablePadding - 1, TableSharedCssClassName.TABLE_LEFT_BORDER, TableSharedCssClassName.TABLE_RIGHT_BORDER, ClassName.NODEVIEW_WRAPPER, breakoutWidthStyling(), columnControlsDecoration(), rowControlsWrapperDotStyle(), ClassName.CORNER_CONTROLS, tableToolbarSize + 1, cornerControlHeight, ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, InsertMarker("\n          left: -11px;\n          top: 9px;\n        "), ClassName.CORNER_CONTROLS, ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, ClassName.CONTROLS_CORNER_BUTTON, tableToolbarSize + 1, tableToolbarSize + 1, tableBorderColor, tableBorderRadiusSize, tableHeaderCellBackgroundColor, ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor, tableToolbarSelectedColor, ClassName.TABLE_CONTAINER, ClassName.CORNER_CONTROLS, ClassName.CONTROLS_CORNER_BUTTON, akEditorTableToolbarSize + akEditorTableNumberColumnWidth + 1, ClassName.ROW_CONTROLS, ClassName.CONTROLS_BUTTON, ClassName.IS_RESIZING, ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor, tableToolbarSelectedColor, ClassName.IS_RESIZING, ClassName.CONTROLS_CORNER_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, tableBorderDeleteColor, tableToolbarDeleteColor, ClassName.ROW_CONTROLS, tableToolbarSize, InsertMarker("\n        bottom: -1px;\n        left: -11px;\n      "), ClassName.ROW_CONTROLS_INNER, ClassName.ROW_CONTROLS_BUTTON_WRAP, tableBorderRadiusSize, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.CONTROLS_BUTTON, akEditorUnitZIndex, HeaderButton("\n        border-bottom: 1px solid ".concat(tableBorderColor, ";\n        border-right: 0px;\n        border-radius: 0;\n        height: 100%;\n        width: ").concat(tableToolbarSize, "px;\n\n        .").concat(ClassName.CONTROLS_BUTTON_OVERLAY, " {\n          position: absolute;\n          width: 30px;\n          height: 50%;\n          right: 0;\n          bottom: 0;\n        }\n        .").concat(ClassName.CONTROLS_BUTTON_OVERLAY, ":first-of-type {\n          top: 0;\n        }\n      ")), ClassName.DRAG_ROW_CONTROLS, rowControlsZIndex + 4, ClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER, ClassName.DRAG_ROW_FLOATING_INSERT_DOT, "var(--ds-background-accent-gray-subtler, #DDDEE1)", ClassName.DRAG_COLUMN_CONTROLS, ClassName.DRAG_COLUMN_CONTROLS_INNER, tableColumnControlsHeight, "var(--ds-space-negative-150, -12px)", getTableZIndexes().resizeHandle, ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER, tableColumnControlsHeight, ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT, "var(--ds-background-accent-gray-subtler, #DDDEE1)", ClassName.DRAG_HANDLE_BUTTON_CLICKABLE_ZONE, ClassName.DRAG_HANDLE_BUTTON_CONTAINER, "var(--ds-surface, #FFFFFF)", ClassName.DRAG_HANDLE_DISABLED, ClassName.DRAG_HANDLE_MINIMISED, "var(--ds-background-accent-gray-subtler, #DDDEE1)", "var(--ds-background-accent-gray-subtlest, #F0F1F2)", "var(--ds-icon-disabled, #080F214A)", ClassName.DRAG_HANDLE_DISABLED, "var(--ds-background-accent-gray-subtler, #DDDEE1)", "var(--ds-icon-subtle, #505258)", "var(--ds-background-accent-blue-subtle, #669DF1)", "var(--ds-icon-inverse, #FFFFFF)", "var(--ds-border-focused, #4688EC)", "var(--ds-background-accent-blue-subtle, #669DF1)", "var(--ds-icon-inverse, #FFFFFF)", "var(--ds-background-accent-red-subtler-pressed, #FD9891)", "var(--ds-border-inverse, #FFFFFF)", floatingColumnControls(), ClassName.IS_RESIZING, ClassName.ROW_CONTROLS, HeaderButtonHover(), HeaderButtonDanger(), ClassName.NUMBERED_COLUMN, akEditorTableToolbarSize, props.isDragAndDropEnabled ? 0 : akEditorTableToolbarSize, akEditorTableNumberColumnWidth + 1, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderColor, relativeSizeToBaseFontSize(10), relativeSizeToBaseFontSize(14), tableHeaderCellBackgroundColor, tableTextColor, tableBorderColor, tableBorderColor, ClassName.TABLE_STICKY, props.isDragAndDropEnabled ? ClassName.DRAG_ROW_CONTROLS_WRAPPER : ClassName.ROW_CONTROLS_WRAPPER, ClassName.NUMBERED_COLUMN_BUTTON_DISABLED, "var(--ds-surface, #FFFFFF)", ClassName.WITH_CONTROLS, ClassName.CORNER_CONTROLS, ClassName.ROW_CONTROLS, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON, numberedColumnButtonSelectedStyles, ClassName.TABLE_CONTAINER, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderColor, akEditorSelectedNodeClassName, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, numberedColumnButtonSelectedStyles, hideNativeBrowserTextSelectionStyles, ClassName.IS_RESIZING, ClassName.WITH_CONTROLS, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON_DISABLED, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON_DISABLED, numberedColumnButtonSelectedStyles, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, tableToolbarDeleteColor, tableBorderDeleteColor, "var(--ds-text-danger, #AE2E24)", akEditorUnitZIndex, ClassName.IS_RESIZING, ClassName.WITH_CONTROLS, ClassName.NUMBERED_COLUMN_BUTTON, tableToolbarDeleteColor, tableBorderDeleteColor, "var(--ds-text-danger, #AE2E24)", akEditorUnitZIndex, ClassName.TABLE_NODE_WRAPPER, ClassName.COLUMN_CONTROLS_DECORATIONS, ClassName.TABLE_HEADER_CELL, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL_IN_DANGER, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL_IN_DANGER, akEditorSmallZIndex, ClassName.SELECTED_CELL, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? '' /* Cell borders handled by ::after overlay in rounded mode. */ : "border: 1px solid ".concat(tableBorderSelectedColor, ";"), ClassName.SELECTED_CELL, tableCellSelectedColor, akEditorSmallZIndex, ClassName.TABLE_HEADER_CELL, ClassName.HOVERED_CELL_IN_DANGER, ClassName.TABLE_CELL, ClassName.HOVERED_CELL_IN_DANGER, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? '' /* Cell border colors are handled by the ::after overlay in rounded mode. */ : "border-left-color: ".concat(tableBorderDeleteColor, ";\n\t\t\tborder-top-color: ").concat(tableBorderDeleteColor, ";"), tableBorderDeleteColor, getTableZIndexes().dangerOverlay, tableCellDeleteColor, ClassName.HOVERED_CELL, ClassName.SELECTED_CELL, ClassName.TABLE_HEADER_CELL, ClassName.SELECTED_CELL, ClassName.TABLE_HEADER_CELL, ClassName.HOVERED_CELL, tableBorderSelectedColor, akEditorSmallZIndex, ClassName.HOVERED_CELL_IN_DANGER, tableBorderStyles(), getTableZIndexes().dangerOverlay, tableCellDeleteColor, ClassName.HOVERED_NO_HIGHLIGHT, ClassName.HOVERED_CELL_IN_DANGER, tableBorderStyles(), getTableZIndexes().dangerOverlay, tableCellDeleteColor, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? roundedTableOverrides() : '', ClassName.DRAG_ROW_CONTROLS_WRAPPER, tableMarginTop, tableToolbarSize + 1, ClassName.ROW_CONTROLS_WRAPPER, props.isDragAndDropEnabled ? "\n\t\t\tmargin-top: ".concat(tableMarginTop, "px;\n\t\t\ttop: 0;\n\t\t\tleft: -").concat(tableToolbarSize + 1, "px;\n\t\t") : "\n\t\t\t/* top of corner control is table margin top - corner control height + 1 pixel of table border. */\n\t\t\ttop: ".concat(tableMarginTop - cornerControlHeight + 1, "px;\n\t\t\tmargin-top: 0;\n\t\t\tleft: -").concat(tableToolbarSize, "px;\n\t\t"), ClassName.DRAG_COLUMN_CONTROLS_WRAPPER, tableMarginTop, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, ClassName.DRAG_COLUMN_CONTROLS_WRAPPER, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? tableMarginTop - 1 : tableMarginTop, expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", getTableZIndexes().aboveHeader, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? "\n\t\t/* Transparent bottom 1px so the sticky header row's top border stays visible. */\n\t\tpadding-bottom: 1px;\n\t\tbackground-clip: content-box;\n\t\t/* Chrome can fall back to start alignment after zoom, covering the header. */\n\t\talign-self: unsafe end;" : "", ClassName.TABLE_CONTAINER, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, ClassName.DRAG_COLUMN_CONTROLS_WRAPPER, akEditorTableNumberColumnWidth + dragRowControlsWidth, akEditorTableNumberColumnWidth + dragRowControlsWidth, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? tableMarginTop - 1 : tableMarginTop, expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", getTableZIndexes().belowHeader, ClassName.TABLE_CONTAINER, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? "".concat(akEditorTableNumberColumnWidth, "px") : "".concat(akEditorTableNumberColumnWidth - 1, "px"), expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? 'calc(100% + 2px)' : '100%', expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? "-".concat(akEditorTableNumberColumnWidth + 1, "px") : "-".concat(akEditorTableNumberColumnWidth, "px"), expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? // Anchor the mask with an explicit `top` so `vertical-align` (data-valign) on the cell
   // doesn't shift it; the calc reproduces the previous top-aligned offset.
   "top: calc(".concat("var(--ds-space-100, 8px)", " - ", stickyRowOffsetTop + 1, "px);") : "margin-top: -".concat(stickyRowOffsetTop, "px;"), expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? 'none' : "0.5px solid ".concat(tableBorderColor), expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? "1px solid ".concat(tableBorderColor) : 'none', expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? "border-bottom: 1px solid ".concat(tableBorderColor, ";") : "", "var(--ds-background-accent-gray-subtlest, #F0F1F2)", tableBorderColor, ClassName.TABLE_CONTAINER, ClassName.TABLE_SELECTED, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, tableBorderSelectedColor, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? "border-bottom-color: ".concat(tableBorderSelectedColor, ";") : '', tableBorderSelectedColor, tableHeaderCellSelectedColor, ClassName.TABLE_CONTAINER, ClassName.TABLE_SELECTED, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL_IN_DANGER, ClassName.TABLE_CONTAINER, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL_IN_DANGER, ClassName.COLUMN_SELECTED, tableBorderSelectedColor, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? "border-bottom-color: ".concat(tableBorderSelectedColor) : '', tableBorderSelectedColor, tableHeaderCellSelectedColor, ClassName.TABLE_CONTAINER, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, ClassName.HOVERED_CELL_IN_DANGER, ClassName.TABLE_CONTAINER, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, ClassName.HOVERED_CELL_IN_DANGER, ClassName.COLUMN_SELECTED, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? // Recolour the corner edges to the delete border and composite the translucent danger
   // fill over the mask's gray so it matches the adjacent cells instead of reading as transparent.
-  "border-left: 1px solid ".concat(tableBorderDeleteColor, ";\n\t\t\t\t\t\tborder-top: 1px solid ").concat(tableBorderDeleteColor, ";\n\t\t\t\t\t\tborder-bottom: 1px solid ").concat(tableBorderDeleteColor, ";\n\t\t\t\t\t\tbackground-color: ", "var(--ds-background-accent-gray-subtlest, #F0F1F2)", ";\n\t\t\t\t\t\tbackground-image: linear-gradient(").concat(tableCellDeleteColor, ", ").concat(tableCellDeleteColor, ");") : "border-left: unset;\n\t\t\t\t\tborder-top: unset;\n\t\t\t\t\tbackground: ".concat(tableCellDeleteColor, ";"), ClassName.TABLE_CONTAINER, ClassName.TABLE_SELECTED, ClassName.HOVERED_DELETE_BUTTON, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, ClassName.TABLE_CONTAINER, ClassName.HOVERED_DELETE_BUTTON, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, ClassName.SELECTED_CELL, ClassName.COLUMN_SELECTED, tableBorderDeleteColor, tableBorderDeleteColor, tableCellDeleteColor, ClassName.TABLE_CONTAINER, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, ClassName.NATIVE_STICKY_ACTIVE, "var(--ds-shadow-overflow-perimeter, #1E1F211f)", ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, ClassName.DRAG_COLUMN_CONTROLS_INNER, ClassName.NESTED_TABLE_WITH_CONTROLS, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && isExperimentEnabled('platform_editor_table_q4_patch_8') ? tableMarginTop - 1 : tableMarginTop, ClassName.TABLE_STICKY, ClassName.DRAG_COLUMN_CONTROLS_WRAPPER, getTableZIndexes().aboveHeader, ClassName.TABLE_CONTAINER, ClassName.WITH_CONTROLS, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderColor, ClassName.TABLE_CONTAINER, ClassName.TABLE_STICKY, ClassName.DRAG_COLUMN_CONTROLS_WRAPPER, akEditorUnitZIndex, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, fg('platform-dst-tokens-finesse') ? selectedCellBorderStyles() : '');
+  "border-left: 1px solid ".concat(tableBorderDeleteColor, ";\n\t\t\t\t\t\tborder-top: 1px solid ").concat(tableBorderDeleteColor, ";\n\t\t\t\t\t\tborder-bottom: 1px solid ").concat(tableBorderDeleteColor, ";\n\t\t\t\t\t\tbackground-color: ", "var(--ds-background-accent-gray-subtlest, #F0F1F2)", ";\n\t\t\t\t\t\tbackground-image: linear-gradient(").concat(tableCellDeleteColor, ", ").concat(tableCellDeleteColor, ");") : "border-left: unset;\n\t\t\t\t\tborder-top: unset;\n\t\t\t\t\tbackground: ".concat(tableCellDeleteColor, ";"), ClassName.TABLE_CONTAINER, ClassName.TABLE_SELECTED, ClassName.HOVERED_DELETE_BUTTON, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, ClassName.TABLE_CONTAINER, ClassName.HOVERED_DELETE_BUTTON, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, ClassName.SELECTED_CELL, ClassName.COLUMN_SELECTED, tableBorderDeleteColor, tableBorderDeleteColor, tableCellDeleteColor, ClassName.TABLE_CONTAINER, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, ClassName.NATIVE_STICKY_ACTIVE, "var(--ds-shadow-overflow-perimeter, #1E1F211f)", ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, ClassName.DRAG_COLUMN_CONTROLS_INNER, ClassName.NESTED_TABLE_WITH_CONTROLS, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? tableMarginTop - 1 : tableMarginTop, ClassName.TABLE_STICKY, ClassName.DRAG_COLUMN_CONTROLS_WRAPPER, getTableZIndexes().aboveHeader, ClassName.TABLE_CONTAINER, ClassName.WITH_CONTROLS, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderColor, ClassName.TABLE_CONTAINER, ClassName.TABLE_STICKY, ClassName.DRAG_COLUMN_CONTROLS_WRAPPER, akEditorUnitZIndex, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, fg('platform-dst-tokens-finesse') ? selectedCellBorderStyles() : '');
 };
 
 // eslint-disable-next-line @repo/internal/deprecations/deprecation-ticket-required

package/dist/types/ui/FloatingContextualButton/FixedButton.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
 import type { RowStickyState } from '../../pm-plugins/sticky-headers/types';
 interface Props {
+    /** Changes when the cell may have moved without a re-render; see `useCellLayoutVersion`. */
+    cellLayoutVersion?: number;
     children: React.ReactNode;
     isContextualMenuOpen: boolean | undefined;
     mountTo: HTMLElement;
@@ -18,5 +20,5 @@ interface CalcLeftPosData {
 }
 export declare const calcLeftPos: ({ buttonWidth, cellRectLeft, cellRefWidth, offset, }: CalcLeftPosData) => number;
 export declare const calcObserverTargetMargin: (tableWrapper: HTMLElement, fixedButtonRefCurrent: HTMLElement) => number;
-export declare const FixedButton: ({ children, isContextualMenuOpen, mountTo, offset, stickyHeader, tableWrapper, targetCellPosition, targetCellRef, }: Props) => React.ReactPortal;
+export declare const FixedButton: ({ cellLayoutVersion, children, isContextualMenuOpen, mountTo, offset, stickyHeader, tableWrapper, targetCellPosition, targetCellRef, }: Props) => React.ReactPortal;
 export default FixedButton;

package/dist/types/ui/FloatingContextualButton/useCellLayoutVersion.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Counts layout changes that can move the target cell without re-rendering the cell options
+ * button: the editor container resizing (window resize, side panel, product sidebar) or the table
+ * resizing (column scaling). Changing the count re-renders the button so it repositions on its
+ * cell. Stays 0 when the gate is off.
+ */
+export declare const useCellLayoutVersion: (targetCellRef: Node | undefined) => number;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "42.2.8",
+	"version": "42.3.0",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -68,12 +68,15 @@
 		"uuid": "^11.1.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^134.5.0",
+		"@atlaskit/editor-common": "^134.6.0",
 		"react": "^18.2.0 || ^19.2.0",
 		"react-dom": "^18.2.0 || ^19.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
 	},
 	"platform-feature-flags": {
+		"platform_editor_sticky_cell_options_position": {
+			"type": "boolean"
+		},
 		"platform_editor_ai_suggestion_table_scroll_fix": {
 			"type": "boolean"
 		},
@@ -107,7 +110,7 @@
 		}
 	},
 	"devDependencies": {
-		"@atlaskit/editor-common": "^134.5.0",
+		"@atlaskit/editor-common": "^134.6.0",
 		"react": "^19.2.0",
 		"react-dom": "^19.2.0",
 		"react-intl": "^7.0.0"