@odoo/o-spreadsheet 18.4.0-alpha.7 → 18.4.0-alpha.9

package/dist/o-spreadsheet.iife.js

@@ -2,9 +2,9 @@
 /**
  * This file is generated by o-spreadsheet build tools. Do not edit it.
  * @see https://github.com/odoo/o-spreadsheet
- * @version 18.4.0-alpha.7
- * @date 2025-06-06T09:32:44.285Z
- * @hash 2bfbe64
+ * @version 18.4.0-alpha.9
+ * @date 2025-06-19T18:23:22.025Z
+ * @hash 6d4d685
  */
 
 (function (exports, owl) {
@@ -21,13 +21,21 @@
       const icon = item.icon;
       const secondaryIcon = item.secondaryIcon;
       const itemId = item.id || nextItemId++;
+      const isEnabled = item.isEnabled ? item.isEnabled : () => true;
       return {
           id: itemId.toString(),
           name: typeof name === "function" ? name : () => name,
           isVisible: item.isVisible ? item.isVisible : () => true,
-          isEnabled: item.isEnabled ? item.isEnabled : () => true,
+          isEnabled: isEnabled,
           isActive: item.isActive,
-          execute: item.execute,
+          execute: item.execute
+              ? (env, isMiddleClick) => {
+                  if (isEnabled(env)) {
+                      return item.execute(env, isMiddleClick);
+                  }
+                  return undefined;
+              }
+              : undefined,
           children: children
               ? (env) => {
                   return children
@@ -131,7 +139,7 @@
 
   const CANVAS_SHIFT = 0.5;
   // Colors
-  const HIGHLIGHT_COLOR = "#37A850";
+  const HIGHLIGHT_COLOR = "#017E84";
   const BACKGROUND_GRAY_COLOR = "#f5f5f5";
   const BACKGROUND_HEADER_COLOR = "#F8F9FA";
   const BACKGROUND_HEADER_SELECTED_COLOR = "#E8EAED";
@@ -144,7 +152,7 @@
   const BACKGROUND_CHART_COLOR = "#FFFFFF";
   const DISABLED_TEXT_COLOR = "#CACACA";
   const DEFAULT_COLOR_SCALE_MIDPOINT_COLOR = 0xb6d7a8;
-  const LINK_COLOR = "#017E84";
+  const LINK_COLOR = HIGHLIGHT_COLOR;
   const FILTERS_COLOR = "#188038";
   const SEPARATOR_COLOR = "#E0E2E4";
   const ICONS_COLOR = "#4A4F59";
@@ -173,7 +181,7 @@
   const BUTTON_HOVER_TEXT_COLOR = "#111827";
   const BUTTON_ACTIVE_BG = "#e6f2f3";
   const BUTTON_ACTIVE_TEXT_COLOR = "#111827";
-  const ACTION_COLOR = "#017E84";
+  const ACTION_COLOR = HIGHLIGHT_COLOR;
   const ACTION_COLOR_HOVER = "#01585c";
   const ALERT_WARNING_BG = "#FBEBCC";
   const ALERT_WARNING_BORDER = "#F8E2B3";
@@ -298,6 +306,7 @@
   const GRID_ICON_MARGIN = 2;
   const GRID_ICON_EDGE_LENGTH = 17;
   const FOOTER_HEIGHT = 2 * DEFAULT_CELL_HEIGHT;
+  const DATA_VALIDATION_CHIP_MARGIN = 5;
   // 768px is a common breakpoint for small screens
   // Typically inside Odoo, it is the threshold for switching to mobile view
   const MOBILE_WIDTH_BREAKPOINT = 768;
@@ -643,9 +652,6 @@
   function isDefined(argument) {
       return argument !== undefined;
   }
-  function isNotNull(argument) {
-      return argument !== null;
-  }
   /**
    * Check if all the values of an object, and all the values of the objects inside of it, are undefined.
    */
@@ -1356,9 +1362,16 @@
       if (percentage === 1) {
           return "#000";
       }
+      // increase saturation to compensate and make it more vivid
+      hsla.s = Math.min(100, percentage * hsla.s + hsla.s);
       hsla.l = hsla.l - percentage * hsla.l;
       return hslaToHex(hsla);
   }
+  function chipTextColor(chipBackgroundColor) {
+      return relativeLuminance(chipBackgroundColor) < 0.6
+          ? lightenColor(chipBackgroundColor, 0.9)
+          : darkenColor(chipBackgroundColor, 0.75);
+  }
   const COLORS_SM = [
       "#4EA7F2", // Blue
       "#EA6175", // Red
@@ -1567,6 +1580,19 @@
           this.palette = getAlternatingColorsPalette(paletteSize).filter((c) => !preferredColors.includes(c));
       }
   }
+  class AlternatingColorMap {
+      availableColors;
+      colors = {};
+      constructor(paletteSize = 12) {
+          this.availableColors = new AlternatingColorGenerator(paletteSize);
+      }
+      get(id) {
+          if (!this.colors[id]) {
+              this.colors[id] = this.availableColors.next();
+          }
+          return this.colors[id];
+      }
+  }
   /**
    * Returns a function that maps a value to a color using a color scale defined by the given
    * color/threshold values pairs.
@@ -5006,7 +5032,9 @@
   }
 
   function evaluateLiteral(literalCell, localeFormat) {
-      const value = isTextFormat(localeFormat.format) ? literalCell.content : literalCell.parsedValue;
+      const value = isTextFormat(localeFormat.format) && literalCell.parsedValue !== null
+          ? literalCell.content
+          : literalCell.parsedValue;
       const functionResult = { value, format: localeFormat.format };
       return createEvaluatedCell(functionResult, localeFormat.locale);
   }
@@ -5055,6 +5083,9 @@
       if (isEvaluationError(value)) {
           return errorCell(value, message);
       }
+      if (value === null) {
+          return emptyCell(format);
+      }
       if (isTextFormat(format)) {
           // TO DO:
           // with the next line, the value of the cell is transformed depending on the format.
@@ -5062,9 +5093,6 @@
           // to interpret the value as a number.
           return textCell(toString(value), format, formattedValue);
       }
-      if (value === null) {
-          return emptyCell(format);
-      }
       if (typeof value === "number") {
           if (isDateTimeFormat(format || "")) {
               return dateTimeCell(value, format, formattedValue);
@@ -19352,8 +19380,9 @@ stores.inject(MyMetaStore, storeInstance);
           arg("include_total (boolean, default=TRUE)", _t("Whether to include total/sub-totals or not.")),
           arg("include_column_titles (boolean, default=TRUE)", _t("Whether to include the column titles or not.")),
           arg("column_count (number, optional)", _t("number of columns")),
+          arg("include_measure_titles (boolean, default=TRUE)", _t("Whether to include the measure titles row or not.")),
       ],
-      compute: function (pivotFormulaId, rowCount = { value: 10000 }, includeTotal = { value: true }, includeColumnHeaders = { value: true }, columnCount = { value: Number.MAX_VALUE }) {
+      compute: function (pivotFormulaId, rowCount = { value: 10000 }, includeTotal = { value: true }, includeColumnHeaders = { value: true }, columnCount = { value: Number.MAX_VALUE }, includeMeasureTitles = { value: true }) {
           const _pivotFormulaId = toString(pivotFormulaId);
           const _rowCount = toNumber(rowCount, this.locale);
           if (_rowCount < 0) {
@@ -19363,8 +19392,11 @@ stores.inject(MyMetaStore, storeInstance);
           if (_columnCount < 0) {
               return new EvaluationError(_t("The number of columns must be positive."));
           }
-          const _includeColumnHeaders = toBoolean(includeColumnHeaders);
-          const _includedTotal = toBoolean(includeTotal);
+          const visibilityOptions = {
+              displayColumnHeaders: toBoolean(includeColumnHeaders),
+              displayTotals: toBoolean(includeTotal),
+              displayMeasuresRow: toBoolean(includeMeasureTitles),
+          };
           const pivotId = getPivotId(_pivotFormulaId, this.getters);
           const pivot = this.getters.getPivot(pivotId);
           const coreDefinition = this.getters.getPivotCoreDefinition(pivotId);
@@ -19375,9 +19407,15 @@ stores.inject(MyMetaStore, storeInstance);
               return error;
           }
           const table = pivot.getCollapsedTableStructure();
-          const cells = table.getPivotCells(_includedTotal, _includeColumnHeaders);
-          const headerRows = _includeColumnHeaders ? table.columns.length : 0;
-          const pivotTitle = this.getters.getPivotDisplayName(pivotId);
+          const cells = table.getPivotCells(visibilityOptions);
+          let headerRows = 0;
+          if (visibilityOptions.displayColumnHeaders) {
+              headerRows = table.columns.length - 1;
+          }
+          if (visibilityOptions.displayMeasuresRow) {
+              headerRows++;
+          }
+          const pivotTitle = this.getters.getPivotName(pivotId);
           const tableHeight = Math.min(headerRows + _rowCount, cells[0].length);
           if (tableHeight === 0) {
               return [[{ value: pivotTitle }]];
@@ -19405,7 +19443,7 @@ stores.inject(MyMetaStore, storeInstance);
                   }
               }
           }
-          if (_includeColumnHeaders) {
+          if (visibilityOptions.displayColumnHeaders || visibilityOptions.displayMeasuresRow) {
               result[0][0] = { value: pivotTitle };
           }
           return result;
@@ -21662,6 +21700,7 @@ stores.inject(MyMetaStore, storeInstance);
           if (isTrendLineAxis(dataset.xAxisID) || dataset.hidden) {
               continue;
           }
+          const yAxisScale = chart.scales[dataset.yAxisID];
           for (let i = 0; i < dataset._parsed.length; i++) {
               const parsedValue = dataset._parsed[i];
               const value = Number(chart.config.type === "radar" ? parsedValue.r : parsedValue.y);
@@ -21672,10 +21711,18 @@ stores.inject(MyMetaStore, storeInstance);
               const xPosition = point.x;
               let yPosition = 0;
               if (chart.config.type === "line" || chart.config.type === "radar") {
-                  yPosition = point.y - 10;
+                  yPosition = value < 0 ? point.y + 10 : point.y - 10;
               }
               else {
-                  yPosition = value < 0 ? point.y - point.height / 2 : point.y + point.height / 2;
+                  const yZeroLine = yAxisScale.getPixelForValue(0);
+                  const distanceFromAxisOrigin = Math.abs(yZeroLine - point.y);
+                  const textHeight = 12; // ChartJS default text height
+                  if (distanceFromAxisOrigin < textHeight) {
+                      yPosition = value < 0 ? yZeroLine + textHeight / 2 : yZeroLine - textHeight / 2;
+                  }
+                  else {
+                      yPosition = value < 0 ? point.y - point.height / 2 : point.y + point.height / 2;
+                  }
               }
               yPosition = Math.min(yPosition, yMax);
               yPosition = Math.max(yPosition, yMin);
@@ -21685,7 +21732,7 @@ stores.inject(MyMetaStore, storeInstance);
               }
               for (const otherPosition of textsPositions[xPosition] || []) {
                   if (Math.abs(otherPosition - yPosition) < 13) {
-                      yPosition = otherPosition - 13;
+                      yPosition = value < 0 ? otherPosition + 13 : otherPosition - 13;
                   }
               }
               textsPositions[xPosition].push(yPosition);
@@ -21704,6 +21751,8 @@ stores.inject(MyMetaStore, storeInstance);
           if (isTrendLineAxis(dataset.xAxisID)) {
               return; // ignore trend lines
           }
+          const xAxisScale = chart.scales[dataset.xAxisID];
+          const xZeroLine = xAxisScale.getPixelForValue(0);
           for (let i = 0; i < dataset._parsed.length; i++) {
               const value = Number(dataset._parsed[i].x);
               if (isNaN(value)) {
@@ -21712,17 +21761,27 @@ stores.inject(MyMetaStore, storeInstance);
               const displayValue = options.callback(value, dataset, i);
               const point = dataset.data[i];
               const yPosition = point.y;
-              let xPosition = value < 0 ? point.x + point.width / 2 : point.x - point.width / 2;
-              xPosition = Math.min(xPosition, xMax);
-              xPosition = Math.max(xPosition, xMin);
+              const textWidth = computeTextWidth(ctx, displayValue, { fontSize: 12 }, "px");
+              const distanceFromAxisOrigin = Math.abs(point.x - xZeroLine);
+              const PADDING = 3;
+              let xPosition;
+              if (distanceFromAxisOrigin < textWidth) {
+                  xPosition =
+                      value < 0 ? xZeroLine - textWidth / 2 - PADDING : xZeroLine + textWidth / 2 + PADDING;
+              }
+              else {
+                  xPosition = value < 0 ? point.x + point.width / 2 : point.x - point.width / 2;
+                  xPosition = Math.min(xPosition, xMax);
+                  xPosition = Math.max(xPosition, xMin);
+              }
               // Avoid overlapping texts with same Y
               if (!textsPositions[yPosition]) {
                   textsPositions[yPosition] = [];
               }
-              const textWidth = computeTextWidth(ctx, displayValue, { fontSize: 12 }, "px");
               for (const otherPosition of textsPositions[yPosition]) {
                   if (Math.abs(otherPosition - xPosition) < textWidth) {
-                      xPosition = otherPosition + textWidth + 3;
+                      xPosition =
+                          value < 0 ? otherPosition - textWidth - PADDING : otherPosition + textWidth + PADDING;
                   }
               }
               textsPositions[yPosition].push(xPosition);
@@ -21744,10 +21803,22 @@ stores.inject(MyMetaStore, storeInstance);
               const midAngle = (startAngle + endAngle) / 2;
               const midRadius = (innerRadius + outerRadius) / 2;
               const x = bar.x + midRadius * Math.cos(midAngle);
-              const y = bar.y + midRadius * Math.sin(midAngle) + 7;
+              const y = bar.y + midRadius * Math.sin(midAngle);
+              const displayValue = options.callback(value, dataset, i);
+              const textHeight = 12; // ChartJS default
+              const textWidth = computeTextWidth(ctx, displayValue, { fontSize: textHeight }, "px");
+              const radius = outerRadius - innerRadius;
+              // Check if the text fits in the slice. Not perfect, but good enough heuristic.
+              if (textWidth >= radius || radius < textHeight) {
+                  continue;
+              }
+              const sliceAngle = endAngle - startAngle;
+              const midWidth = 2 * midRadius * Math.tan(sliceAngle / 2);
+              if (sliceAngle < Math.PI / 2 && (textWidth >= midWidth || midWidth < textHeight)) {
+                  continue;
+              }
               ctx.fillStyle = chartFontColor(options.background);
               ctx.strokeStyle = options.background || "#ffffff";
-              const displayValue = options.callback(value, dataset, i);
               drawTextWithBackground(displayValue, x, y, ctx);
           }
       }
@@ -25644,7 +25715,9 @@ stores.inject(MyMetaStore, storeInstance);
           background: definition.background,
           callback: (value, dataset) => {
               value = Math.abs(Number(value));
-              return formatChartDatasetValue(axisFormats, locale)(value, dataset.xAxisID || "x");
+              return value === 0
+                  ? ""
+                  : formatChartDatasetValue(axisFormats, locale)(value, dataset.xAxisID || "x");
           },
       };
   }
@@ -29305,6 +29378,12 @@ stores.inject(MyMetaStore, storeInstance);
           menu.onStopHover?.(this.env);
           this.props.onMouseLeave?.(menu, ev);
       }
+      onClickMenu(menu, ev) {
+          if (!this.isEnabled(menu)) {
+              return;
+          }
+          this.props.onClickMenu?.(menu, ev);
+      }
   }
 
   /**
@@ -29803,9 +29882,6 @@ stores.inject(MyMetaStore, storeInstance);
           this.subMenu.parentMenu = undefined;
       }
       onClickMenu(menu, ev) {
-          if (!this.isEnabled(menu)) {
-              return;
-          }
           if (this.isRoot(menu)) {
               this.openSubMenu(menu, ev.currentTarget);
           }
@@ -31056,11 +31132,9 @@ stores.inject(MyMetaStore, storeInstance);
           if (!value) {
               return false;
           }
-          const range = getters.getRangeFromSheetXC(sheetId, String(criterion.values[0]));
-          const criterionValues = getters.getRangeValues(range);
+          const criterionValues = getters.getDataValidationRangeValues(sheetId, criterion);
           return criterionValues
-              .filter(isNotNull)
-              .map((value) => value.toString().toLowerCase())
+              .map((value) => value.toLowerCase())
               .includes(value.toString().toLowerCase());
       },
       getErrorString: (criterion) => _t("The value must be a value in the range %s", String(criterion.values[0])),
@@ -31232,6 +31306,12 @@ stores.inject(MyMetaStore, storeInstance);
               selectedElement?.scrollIntoView?.({ block: "nearest" });
           }, () => [this.props.selectedIndex, this.autoCompleteListRef.el]);
       }
+      getCss(html) {
+          return cssPropertiesToCss({
+              color: html.color || "#000000",
+              background: html.backgroundColor,
+          });
+      }
   }
 
   class ContentEditableHelper {
@@ -31370,7 +31450,6 @@ stores.inject(MyMetaStore, storeInstance);
                   // We can only modify a node in place if it has the same type as the content
                   // that we would insert, which are spans.
                   // Otherwise, it means that the node has been input by the user, through the keyboard or a copy/paste
-                  // @ts-ignore (somehow required because jest does not like child.tagName despite the prior check)
                   const childIsSpan = child && "tagName" in child && child.tagName === "SPAN";
                   if (childIsSpan && compareContentToSpanElement(content, child)) {
                       continue;
@@ -31405,9 +31484,7 @@ stores.inject(MyMetaStore, storeInstance);
               }
               // Empty line
               if (!p.hasChildNodes()) {
-                  const span = document.createElement("span");
-                  span.appendChild(document.createElement("br"));
-                  p.appendChild(span);
+                  p.appendChild(document.createElement("span"));
               }
               // replace p if necessary
               if (newChild) {
@@ -31454,13 +31531,10 @@ stores.inject(MyMetaStore, storeInstance);
       }
       getText() {
           let text = "";
-          const it = iterateChildren(this.el);
-          let current = it.next();
           let isFirstParagraph = true;
-          while (!current.done) {
-              if (!current.value.hasChildNodes()) {
-                  text += current.value.textContent;
-              }
+          let emptyParagraph = false;
+          const it = iterateChildren(this.el);
+          for (let current = it.next(); !current.done; current = it.next()) {
               if (current.value.nodeName === "P" ||
                   (current.value.nodeName === "DIV" && current.value !== this.el) // On paste, the HTML may contain <div> instead of <p>
               ) {
@@ -31470,8 +31544,15 @@ stores.inject(MyMetaStore, storeInstance);
                   else {
                       text += NEWLINE;
                   }
+                  emptyParagraph = ["<br>", "<span><br></span>"].includes(current.value.innerHTML);
+                  continue;
+              }
+              if (!current.value.hasChildNodes()) {
+                  if (current.value.nodeName === "BR" && !emptyParagraph) {
+                      text += NEWLINE;
+                  }
+                  text += current.value.textContent;
               }
-              current = it.next();
           }
           return text;
       }
@@ -32821,6 +32902,12 @@ stores.inject(MyMetaStore, storeInstance);
           owl.useEffect(() => {
               this.processTokenAtCursor();
           }, () => [this.props.composerStore.editionMode !== "inactive"]);
+          owl.useEffect(() => {
+              this.contentHelper.scrollSelectionIntoView();
+          }, () => [
+              this.props.composerStore.composerSelection.start,
+              this.props.composerStore.composerSelection.end,
+          ]);
       }
       // ---------------------------------------------------------------------------
       // Handlers
@@ -33031,6 +33118,7 @@ stores.inject(MyMetaStore, storeInstance);
           if (this.env.isMobile() && !isIOS()) {
               return;
           }
+          this.debouncedHover.stopDebounce();
           this.contentHelper.removeSelection();
       }
       onMouseup() {
@@ -33109,7 +33197,6 @@ stores.inject(MyMetaStore, storeInstance);
                   const { start, end } = this.props.composerStore.composerSelection;
                   this.contentHelper.selectRange(start, end);
               }
-              this.contentHelper.scrollSelectionIntoView();
           }
           this.shouldProcessInputEvents = true;
       }
@@ -33585,6 +33672,414 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
+  /**
+   * Start listening to pointer events and apply the given callbacks.
+   *
+   * @returns A function to remove the listeners.
+   */
+  function startDnd(onPointerMove, onPointerUp) {
+      const removeListeners = () => {
+          window.removeEventListener("pointerup", _onPointerUp, { capture: true });
+          window.removeEventListener("dragstart", _onDragStart);
+          window.removeEventListener("pointermove", onPointerMove);
+          window.removeEventListener("wheel", onPointerMove);
+      };
+      const _onPointerUp = (ev) => {
+          onPointerUp(ev);
+          removeListeners();
+      };
+      function _onDragStart(ev) {
+          ev.preventDefault();
+      }
+      window.addEventListener("pointerup", _onPointerUp, { capture: true });
+      window.addEventListener("dragstart", _onDragStart);
+      window.addEventListener("pointermove", onPointerMove);
+      // mouse wheel on window is by default a passive event.
+      // preventDefault() is not allowed in passive event handler.
+      // https://chromestatus.com/feature/6662647093133312
+      window.addEventListener("wheel", onPointerMove, { passive: false });
+      return removeListeners;
+  }
+
+  const LINE_VERTICAL_PADDING = 1;
+  const PICKER_PADDING = 8;
+  const ITEM_BORDER_WIDTH = 1;
+  const ITEM_EDGE_LENGTH = 18;
+  const ITEMS_PER_LINE = 10;
+  const MAGNIFIER_EDGE = 16;
+  const ITEM_GAP = 2;
+  const CONTENT_WIDTH = ITEMS_PER_LINE * (ITEM_EDGE_LENGTH + 2 * ITEM_BORDER_WIDTH) + (ITEMS_PER_LINE - 1) * ITEM_GAP;
+  const INNER_GRADIENT_WIDTH = CONTENT_WIDTH - 2 * ITEM_BORDER_WIDTH;
+  const INNER_GRADIENT_HEIGHT = CONTENT_WIDTH - 30 - 2 * ITEM_BORDER_WIDTH;
+  const CONTAINER_WIDTH = CONTENT_WIDTH + 2 * PICKER_PADDING;
+  css /* scss */ `
+  .o-color-picker {
+    padding: ${PICKER_PADDING}px 0;
+    /* FIXME: this is useless, overiden by the popover container */
+    box-shadow: 1px 2px 5px 2px rgba(51, 51, 51, 0.15);
+    background-color: white;
+    line-height: 1.2;
+    overflow-y: auto;
+    overflow-x: hidden;
+    width: ${CONTAINER_WIDTH}px;
+
+    .o-color-picker-section-name {
+      margin: 0px ${ITEM_BORDER_WIDTH}px;
+      padding: 4px ${PICKER_PADDING}px;
+    }
+    .colors-grid {
+      display: grid;
+      padding: ${LINE_VERTICAL_PADDING}px ${PICKER_PADDING}px;
+      grid-template-columns: repeat(${ITEMS_PER_LINE}, 1fr);
+      grid-gap: ${ITEM_GAP}px;
+    }
+    .o-color-picker-toggler-button {
+      display: flex;
+      .o-color-picker-toggler-sign {
+        display: flex;
+        margin: auto auto;
+        width: 55%;
+        height: 55%;
+        .o-icon {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+    .o-color-picker-line-item {
+      width: ${ITEM_EDGE_LENGTH + 2 * ITEM_BORDER_WIDTH}px;
+      height: ${ITEM_EDGE_LENGTH + 2 * ITEM_BORDER_WIDTH}px;
+      margin: 0px;
+      border-radius: 50px;
+      border: ${ITEM_BORDER_WIDTH}px solid #666666;
+      padding: 0px;
+      font-size: 16px;
+      background: white;
+      &:hover {
+        background-color: rgba(0, 0, 0, 0.08);
+        outline: 1px solid gray;
+        cursor: pointer;
+      }
+    }
+    .o-buttons {
+      padding: ${PICKER_PADDING}px;
+      display: flex;
+      .o-cancel {
+        border: ${ITEM_BORDER_WIDTH}px solid #c0c0c0;
+        width: 100%;
+        padding: 5px;
+        font-size: 14px;
+        background: white;
+        border-radius: 4px;
+        &:hover:enabled {
+          background-color: rgba(0, 0, 0, 0.08);
+        }
+      }
+    }
+    .o-add-button {
+      border: ${ITEM_BORDER_WIDTH}px solid #c0c0c0;
+      padding: 4px;
+      background: white;
+      border-radius: 4px;
+      &:hover:enabled {
+        background-color: rgba(0, 0, 0, 0.08);
+      }
+    }
+    .o-separator {
+      border-bottom: ${MENU_SEPARATOR_BORDER_WIDTH}px solid ${SEPARATOR_COLOR};
+      margin-top: ${MENU_SEPARATOR_PADDING}px;
+      margin-bottom: ${MENU_SEPARATOR_PADDING}px;
+    }
+
+    .o-custom-selector {
+      padding: ${PICKER_PADDING + 2}px ${PICKER_PADDING}px;
+      position: relative;
+      .o-gradient {
+        margin-bottom: ${MAGNIFIER_EDGE / 2}px;
+        border: ${ITEM_BORDER_WIDTH}px solid #c0c0c0;
+        width: ${INNER_GRADIENT_WIDTH + 2 * ITEM_BORDER_WIDTH}px;
+        height: ${INNER_GRADIENT_HEIGHT + 2 * ITEM_BORDER_WIDTH}px;
+        position: relative;
+      }
+
+      .magnifier {
+        height: ${MAGNIFIER_EDGE}px;
+        width: ${MAGNIFIER_EDGE}px;
+        border-radius: 50%;
+        border: 2px solid #fff;
+        box-shadow: 0px 0px 3px #c0c0c0;
+        position: absolute;
+        z-index: 2;
+      }
+      .saturation {
+        background: linear-gradient(to right, #fff 0%, transparent 100%);
+      }
+      .lightness {
+        background: linear-gradient(to top, #000 0%, transparent 100%);
+      }
+      .o-hue-picker {
+        border: ${ITEM_BORDER_WIDTH}px solid #c0c0c0;
+        width: 100%;
+        height: 12px;
+        border-radius: 4px;
+        background: linear-gradient(
+          to right,
+          hsl(0 100% 50%) 0%,
+          hsl(0.2turn 100% 50%) 20%,
+          hsl(0.3turn 100% 50%) 30%,
+          hsl(0.4turn 100% 50%) 40%,
+          hsl(0.5turn 100% 50%) 50%,
+          hsl(0.6turn 100% 50%) 60%,
+          hsl(0.7turn 100% 50%) 70%,
+          hsl(0.8turn 100% 50%) 80%,
+          hsl(0.9turn 100% 50%) 90%,
+          hsl(1turn 100% 50%) 100%
+        );
+        position: relative;
+        cursor: crosshair;
+      }
+      .o-hue-slider {
+        margin-top: -3px;
+      }
+      .o-custom-input-preview {
+        padding: 2px 0px;
+        display: flex;
+        input {
+          width: 50%;
+          border-radius: 4px;
+          padding: 4px 23px 4px 10px;
+          height: 24px;
+          border: 1px solid #c0c0c0;
+          margin-right: 2px;
+        }
+        .o-wrong-color {
+          /* FIXME bootstrap class instead? */
+          outline-color: red;
+          border-color: red;
+          &:focus {
+            outline-style: solid;
+            outline-width: 1px;
+          }
+        }
+      }
+      .o-custom-input-buttons {
+        padding: 2px 0px;
+        display: flex;
+        justify-content: end;
+      }
+      .o-color-preview {
+        border: 1px solid #c0c0c0;
+        border-radius: 4px;
+        width: 50%;
+      }
+    }
+  }
+`;
+  class ColorPicker extends owl.Component {
+      static template = "o-spreadsheet-ColorPicker";
+      static props = {
+          onColorPicked: Function,
+          currentColor: { type: String, optional: true },
+          maxHeight: { type: Number, optional: true },
+          anchorRect: Object,
+          disableNoColor: { type: Boolean, optional: true },
+      };
+      static defaultProps = { currentColor: "" };
+      static components = { Popover };
+      COLORS = COLOR_PICKER_DEFAULTS;
+      state = owl.useState({
+          showGradient: false,
+          currentHslaColor: isColorValid(this.props.currentColor)
+              ? { ...hexToHSLA(this.props.currentColor), a: 1 }
+              : { h: 0, s: 100, l: 100, a: 1 },
+          customHexColor: isColorValid(this.props.currentColor) ? toHex(this.props.currentColor) : "",
+      });
+      get colorPickerStyle() {
+          if (this.props.maxHeight !== undefined && this.props.maxHeight <= 0) {
+              return cssPropertiesToCss({ display: "none" });
+          }
+          return "";
+      }
+      get popoverProps() {
+          return {
+              anchorRect: this.props.anchorRect,
+              maxHeight: this.props.maxHeight,
+              positioning: "bottom-left",
+              verticalOffset: 0,
+          };
+      }
+      get gradientHueStyle() {
+          const hue = this.state.currentHslaColor?.h || 0;
+          return cssPropertiesToCss({
+              background: `hsl(${hue} 100% 50%)`,
+          });
+      }
+      get sliderStyle() {
+          const hue = this.state.currentHslaColor?.h || 0;
+          const delta = Math.round((hue / 360) * INNER_GRADIENT_WIDTH);
+          const left = clip(delta, 1, INNER_GRADIENT_WIDTH) - ICON_EDGE_LENGTH / 2;
+          return cssPropertiesToCss({
+              "margin-left": `${left}px`,
+          });
+      }
+      get pointerStyle() {
+          const { s, l } = this.state.currentHslaColor || { s: 0, l: 0 };
+          const left = Math.round(INNER_GRADIENT_WIDTH * clip(s / 100, 0, 1));
+          const top = Math.round(INNER_GRADIENT_HEIGHT * clip(1 - (2 * l) / (200 - s), 0, 1));
+          return cssPropertiesToCss({
+              left: `${-MAGNIFIER_EDGE / 2 + left}px`,
+              top: `${-MAGNIFIER_EDGE / 2 + top}px`,
+              background: hslaToHex(this.state.currentHslaColor),
+          });
+      }
+      get colorPreviewStyle() {
+          return cssPropertiesToCss({
+              "background-color": hslaToHex(this.state.currentHslaColor),
+          });
+      }
+      get checkmarkColor() {
+          return chartFontColor(this.props.currentColor);
+      }
+      get isHexColorInputValid() {
+          return !this.state.customHexColor || isColorValid(this.state.customHexColor);
+      }
+      setCustomGradient({ x, y }) {
+          const offsetX = clip(x, 0, INNER_GRADIENT_WIDTH);
+          const offsetY = clip(y, 0, INNER_GRADIENT_HEIGHT);
+          const deltaX = offsetX / INNER_GRADIENT_WIDTH;
+          const deltaY = offsetY / INNER_GRADIENT_HEIGHT;
+          const s = 100 * deltaX;
+          const l = 100 * (1 - deltaY) * (1 - 0.5 * deltaX);
+          this.updateColor({ s, l });
+      }
+      setCustomHue(x) {
+          // needs to be capped such that h is in [0°, 359°]
+          const h = Math.round(clip((360 * x) / INNER_GRADIENT_WIDTH, 0, 359));
+          this.updateColor({ h });
+      }
+      updateColor(newHsl) {
+          this.state.currentHslaColor = { ...this.state.currentHslaColor, ...newHsl };
+          this.state.customHexColor = hslaToHex(this.state.currentHslaColor);
+      }
+      onColorClick(color) {
+          if (color) {
+              this.props.onColorPicked(toHex(color));
+          }
+      }
+      resetColor() {
+          this.props.onColorPicked("");
+      }
+      toggleColorPicker() {
+          this.state.showGradient = !this.state.showGradient;
+      }
+      dragGradientPointer(ev) {
+          const initialGradientCoordinates = { x: ev.offsetX, y: ev.offsetY };
+          this.setCustomGradient(initialGradientCoordinates);
+          const initialMousePosition = { x: ev.clientX, y: ev.clientY };
+          const onMouseMove = (ev) => {
+              const currentMousePosition = { x: ev.clientX, y: ev.clientY };
+              const deltaX = currentMousePosition.x - initialMousePosition.x;
+              const deltaY = currentMousePosition.y - initialMousePosition.y;
+              const currentGradientCoordinates = {
+                  x: initialGradientCoordinates.x + deltaX,
+                  y: initialGradientCoordinates.y + deltaY,
+              };
+              this.setCustomGradient(currentGradientCoordinates);
+          };
+          startDnd(onMouseMove, () => { });
+      }
+      dragHuePointer(ev) {
+          const initialX = ev.offsetX;
+          const initialMouseX = ev.clientX;
+          this.setCustomHue(initialX);
+          const onMouseMove = (ev) => {
+              const currentMouseX = ev.clientX;
+              const deltaX = currentMouseX - initialMouseX;
+              const x = initialX + deltaX;
+              this.setCustomHue(x);
+          };
+          startDnd(onMouseMove, () => { });
+      }
+      setHexColor(ev) {
+          // only support HEX code input
+          const val = ev.target.value.replace("##", "#").slice(0, 7);
+          this.state.customHexColor = val;
+          if (!isColorValid(val)) ;
+          else {
+              this.state.currentHslaColor = { ...hexToHSLA(val), a: 1 };
+          }
+      }
+      addCustomColor(ev) {
+          if (!isHSLAValid(this.state.currentHslaColor) || !isColorValid(this.state.customHexColor)) {
+              return;
+          }
+          this.props.onColorPicked(toHex(this.state.customHexColor));
+      }
+      isSameColor(color1, color2) {
+          return isSameColor(color1, color2);
+      }
+  }
+
+  class Section extends owl.Component {
+      static template = "o_spreadsheet.Section";
+      static props = {
+          class: { type: String, optional: true },
+          title: { type: String, optional: true },
+          slots: Object,
+      };
+  }
+
+  const TRANSPARENT_BACKGROUND_SVG = /*xml*/ `
+<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10">
+  <path fill="#d9d9d9" d="M5 5h5v5H5zH0V0h5"/>
+</svg>
+`;
+  css /* scss */ `
+  .o-round-color-picker-button {
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+    border: 1px solid ${GRAY_300};
+    background-position: 1px 1px;
+    background-image: url("data:image/svg+xml,${encodeURIComponent(TRANSPARENT_BACKGROUND_SVG)}");
+  }
+`;
+  class RoundColorPicker extends owl.Component {
+      static template = "o-spreadsheet.RoundColorPicker";
+      static components = { Section, ColorPicker };
+      static props = {
+          currentColor: { type: String, optional: true },
+          title: { type: String, optional: true },
+          onColorPicked: Function,
+          disableNoColor: { type: Boolean, optional: true },
+      };
+      colorPickerButtonRef = owl.useRef("colorPickerButton");
+      state;
+      setup() {
+          this.state = owl.useState({ pickerOpened: false });
+          owl.useExternalListener(window, "click", this.closePicker);
+      }
+      closePicker() {
+          this.state.pickerOpened = false;
+      }
+      togglePicker() {
+          this.state.pickerOpened = !this.state.pickerOpened;
+      }
+      onColorPicked(color) {
+          this.props.onColorPicked(color);
+          this.state.pickerOpened = false;
+      }
+      get colorPickerAnchorRect() {
+          const button = this.colorPickerButtonRef.el;
+          return getBoundingRectAsPOJO(button);
+      }
+      get buttonStyle() {
+          return cssPropertiesToCss({
+              background: this.props.currentColor,
+          });
+      }
+  }
+
   css /* scss */ `
   .o-dv-list-item-delete {
     color: #666666;
@@ -33593,7 +34088,7 @@ stores.inject(MyMetaStore, storeInstance);
 `;
   class ListCriterionForm extends CriterionForm {
       static template = "o-spreadsheet-ListCriterionForm";
-      static components = { CriterionInput };
+      static components = { CriterionInput, RoundColorPicker };
       state = owl.useState({
           numberOfValues: Math.max(this.props.criterion.values.length, 2),
       });
@@ -33601,7 +34096,7 @@ stores.inject(MyMetaStore, storeInstance);
           super.setup();
           const setupDefault = (props) => {
               if (props.criterion.displayStyle === undefined) {
-                  this.updateCriterion({ displayStyle: "arrow" });
+                  this.updateCriterion({ displayStyle: "chip" });
               }
           };
           owl.onWillUpdateProps(setupDefault);
@@ -33612,6 +34107,11 @@ stores.inject(MyMetaStore, storeInstance);
           values[index] = value;
           this.updateCriterion({ values });
       }
+      onColorChanged(color, value) {
+          const colors = { ...this.props.criterion.colors };
+          colors[value] = color || undefined;
+          this.updateCriterion({ colors });
+      }
       onAddAnotherValue() {
           this.state.numberOfValues++;
       }
@@ -33647,35 +34147,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  /**
-   * Start listening to pointer events and apply the given callbacks.
-   *
-   * @returns A function to remove the listeners.
-   */
-  function startDnd(onPointerMove, onPointerUp) {
-      const removeListeners = () => {
-          window.removeEventListener("pointerup", _onPointerUp, { capture: true });
-          window.removeEventListener("dragstart", _onDragStart);
-          window.removeEventListener("pointermove", onPointerMove);
-          window.removeEventListener("wheel", onPointerMove);
-      };
-      const _onPointerUp = (ev) => {
-          onPointerUp(ev);
-          removeListeners();
-      };
-      function _onDragStart(ev) {
-          ev.preventDefault();
-      }
-      window.addEventListener("pointerup", _onPointerUp, { capture: true });
-      window.addEventListener("dragstart", _onDragStart);
-      window.addEventListener("pointermove", onPointerMove);
-      // mouse wheel on window is by default a passive event.
-      // preventDefault() is not allowed in passive event handler.
-      // https://chromestatus.com/feature/6662647093133312
-      window.addEventListener("wheel", onPointerMove, { passive: false });
-      return removeListeners;
-  }
-
   function useDragAndDropListItems() {
       let dndHelper;
       const previousCursor = document.body.style.cursor;
@@ -34535,12 +35006,12 @@ stores.inject(MyMetaStore, storeInstance);
 
   class ValueInRangeCriterionForm extends CriterionForm {
       static template = "o-spreadsheet-ValueInRangeCriterionForm";
-      static components = { SelectionInput };
+      static components = { RoundColorPicker, SelectionInput };
       setup() {
           super.setup();
           const setupDefault = (props) => {
               if (props.criterion.displayStyle === undefined) {
-                  this.updateCriterion({ displayStyle: "arrow" });
+                  this.updateCriterion({ displayStyle: "chip" });
               }
           };
           owl.onWillUpdateProps(setupDefault);
@@ -34553,6 +35024,16 @@ stores.inject(MyMetaStore, storeInstance);
           const displayStyle = ev.target.value;
           this.updateCriterion({ displayStyle });
       }
+      onColorChanged(color, value) {
+          const colors = { ...this.props.criterion.colors };
+          colors[value] = color || undefined;
+          this.updateCriterion({ colors });
+      }
+      get values() {
+          const sheetId = this.env.model.getters.getActiveSheetId();
+          const values = this.env.model.getters.getDataValidationRangeValues(sheetId, this.props.criterion);
+          return new Set(values);
+      }
   }
 
   const criterionCategoriesSequences = {
@@ -34940,17 +35421,22 @@ stores.inject(MyMetaStore, storeInstance);
       static components = { FilterMenuValueItem };
       state = owl.useState({
           values: [],
+          displayedValues: [],
           textFilter: "",
           selectedValue: undefined,
+          numberOfDisplayedValues: 50,
+          hasMoreValues: false,
       });
       searchBar = owl.useRef("filterMenuSearchBar");
       setup() {
           owl.onWillUpdateProps((nextProps) => {
               if (!deepEquals(nextProps.filterPosition, this.props.filterPosition)) {
                   this.state.values = this.getFilterHiddenValues(nextProps.filterPosition);
+                  this.computeDisplayedValues();
               }
           });
           this.state.values = this.getFilterHiddenValues(this.props.filterPosition);
+          this.computeDisplayedValues();
       }
       getFilterHiddenValues(position) {
           const sheetId = this.env.model.getters.getActiveSheetId();
@@ -34968,21 +35454,28 @@ stores.inject(MyMetaStore, storeInstance);
           }
           const cellValues = cells.map((val) => val.cellValue);
           const filterValues = filterValue?.filterType === "values" ? filterValue.hiddenValues : [];
-          const strValues = [...cellValues, ...filterValues];
-          const normalizedFilteredValues = filterValues.map(toLowerCase);
-          // Set with lowercase values to avoid duplicates
-          const normalizedValues = [...new Set(strValues.map(toLowerCase))];
-          const sortedValues = normalizedValues.sort((val1, val2) => val1.localeCompare(val2, undefined, { numeric: true, sensitivity: "base" }));
-          return sortedValues.map((normalizedValue) => {
-              let checked = false;
-              if (filterValue?.filterType !== "criterion") {
-                  checked = normalizedFilteredValues.findIndex((val) => val === normalizedValue) === -1;
+          const normalizedFilteredValues = new Set(filterValues.map(toLowerCase));
+          const set = new Set();
+          const values = [];
+          const addValue = (value) => {
+              const normalizedValue = toLowerCase(value);
+              if (!set.has(normalizedValue)) {
+                  values.push({
+                      string: value || "",
+                      checked: filterValue?.filterType !== "criterion"
+                          ? !normalizedFilteredValues.has(normalizedValue)
+                          : false,
+                      normalizedValue,
+                  });
+                  set.add(normalizedValue);
               }
-              return {
-                  checked,
-                  string: strValues.find((val) => toLowerCase(val) === normalizedValue) || "",
-              };
-          });
+          };
+          cellValues.forEach(addValue);
+          filterValues.forEach(addValue);
+          return values.sort((val1, val2) => val1.normalizedValue.localeCompare(val2.normalizedValue, undefined, {
+              numeric: true,
+              sensitivity: "base",
+          }));
       }
       checkValue(value) {
           this.state.selectedValue = value.string;
@@ -34994,25 +35487,37 @@ stores.inject(MyMetaStore, storeInstance);
           this.state.selectedValue = value.string;
       }
       selectAll() {
-          this.displayedValues.forEach((value) => (value.checked = true));
-          this.updateHiddenValues();
+          this.state.displayedValues.forEach((value) => (value.checked = true));
+          this.props.onUpdateHiddenValues([]);
       }
       clearAll() {
-          this.displayedValues.forEach((value) => (value.checked = false));
-          this.updateHiddenValues();
+          this.state.displayedValues.forEach((value) => (value.checked = false));
+          const hiddenValues = this.state.values.map((val) => val.string);
+          this.props.onUpdateHiddenValues(hiddenValues);
       }
       updateHiddenValues() {
           const hiddenValues = this.state.values.filter((val) => !val.checked).map((val) => val.string);
           this.props.onUpdateHiddenValues(hiddenValues);
       }
-      get displayedValues() {
-          if (!this.state.textFilter) {
-              return this.state.values;
-          }
-          return fuzzyLookup(this.state.textFilter, this.state.values, (val) => val.string);
+      updateSearch(ev) {
+          const target = ev.target;
+          this.state.textFilter = target.value;
+          this.state.selectedValue = undefined;
+          this.computeDisplayedValues();
+      }
+      computeDisplayedValues() {
+          const values = !this.state.textFilter
+              ? this.state.values
+              : fuzzyLookup(this.state.textFilter, this.state.values, (val) => val.string);
+          this.state.displayedValues = values.slice(0, this.state.numberOfDisplayedValues);
+          this.state.hasMoreValues = values.length > this.state.numberOfDisplayedValues;
+      }
+      loadMoreValues() {
+          this.state.numberOfDisplayedValues += 100;
+          this.computeDisplayedValues();
       }
       onKeyDown(ev) {
-          const displayedValues = this.displayedValues;
+          const displayedValues = this.state.displayedValues;
           if (displayedValues.length === 0)
               return;
           let selectedIndex = undefined;
@@ -36107,19 +36612,44 @@ stores.inject(MyMetaStore, storeInstance);
       height: 512,
       paths: [{ fillColor: "#E06666", path: DOT_PATH }],
   };
-  const CARET_DOWN = {
-      width: 512,
-      height: 512,
-      paths: [{ fillColor: TEXT_BODY_MUTED, path: "M120 195 h270 l-135 130" }],
-  };
-  const HOVERED_CARET_DOWN = {
-      width: 512,
-      height: 512,
-      paths: [
-          { fillColor: TEXT_BODY_MUTED, path: "M15 15 h482 v482 h-482" },
-          { fillColor: "#fff", path: "M120 195 h270 l-135 130" },
-      ],
-  };
+  function getCaretDownSvg(color) {
+      return {
+          width: 512,
+          height: 512,
+          paths: [{ fillColor: color.textColor || TEXT_BODY_MUTED, path: "M120 195 h270 l-135 130" }],
+      };
+  }
+  function getHoveredCaretDownSvg(color) {
+      return {
+          width: 512,
+          height: 512,
+          paths: [
+              { fillColor: color.textColor || TEXT_BODY_MUTED, path: "M15 15 h482 v482 h-482" },
+              { fillColor: color.fillColor || "#fff", path: "M120 195 h270 l-135 130" },
+          ],
+      };
+  }
+  const CHIP_CARET_DOWN_PATH = "M40 185 h270 l-135 128";
+  function getChipSvg(chipStyle) {
+      return {
+          width: 512,
+          height: 512,
+          paths: [{ fillColor: chipStyle.textColor || TEXT_BODY_MUTED, path: CHIP_CARET_DOWN_PATH }],
+      };
+  }
+  function getHoveredChipSvg(chipStyle) {
+      return {
+          width: 512,
+          height: 512,
+          paths: [
+              {
+                  fillColor: chipStyle.textColor || TEXT_BODY_MUTED,
+                  path: "M0,225 A175,175 0 1,0 350,225 A175,175 0 1,0 0,225",
+              },
+              { fillColor: chipStyle.fillColor || TEXT_BODY_MUTED, path: CHIP_CARET_DOWN_PATH },
+          ],
+      };
+  }
   const CHECKBOX_UNCHECKED = {
       width: 512,
       height: 512,
@@ -38485,7 +39015,7 @@ stores.inject(MyMetaStore, storeInstance);
        */
       handleMissingValue(parentElement, missingElementName, optionalArgs) {
           if (optionalArgs?.required) {
-              if (optionalArgs?.default) {
+              if (optionalArgs?.default !== undefined) {
                   this.warningManager.addParsingWarning(`Missing required ${missingElementName} in element <${parentElement.tagName}> of ${this.currentFile}, replacing it by the default value ${optionalArgs.default}`);
               }
               else {
@@ -41027,6 +41557,10 @@ stores.inject(MyMetaStore, storeInstance);
       });
   };
   const CAN_REMOVE_COLUMNS_ROWS = (dimension, env) => {
+      if ((dimension === "COL" && env.model.getters.getActiveRows().size > 0) ||
+          (dimension === "ROW" && env.model.getters.getActiveCols().size > 0)) {
+          return false;
+      }
       const sheetId = env.model.getters.getActiveSheetId();
       const selectedElements = env.model.getters.getElementsFromSelection(dimension);
       const includesAllVisibleHeaders = env.model.getters.checkElementsIncludeAllVisibleHeaders(sheetId, dimension, selectedElements);
@@ -42581,7 +43115,7 @@ stores.inject(MyMetaStore, storeInstance);
                   criterion: {
                       type: "isValueInList",
                       values: [],
-                      displayStyle: "arrow",
+                      displayStyle: "chip",
                   },
               },
           });
@@ -44496,6 +45030,11 @@ stores.inject(MyMetaStore, storeInstance);
       rect = this.defaultRect;
       isEditing = false;
       isCellReferenceVisible = false;
+      currentEditedCell = {
+          col: 0,
+          row: 0,
+          sheetId: this.env.model.getters.getActiveSheetId(),
+      };
       composerStore;
       composerFocusStore;
       composerInterface;
@@ -44620,12 +45159,17 @@ stores.inject(MyMetaStore, storeInstance);
           if (!isEditing && this.composerFocusStore.activeComposer !== this.composerInterface) {
               this.composerFocusStore.focusComposer(this.composerInterface, { focusMode: "inactive" });
           }
+          let shouldRecomputeRect = !deepEquals(this.currentEditedCell, this.composerStore.currentEditedCell);
           if (this.isEditing !== isEditing) {
               this.isEditing = isEditing;
               if (!isEditing) {
                   this.rect = this.defaultRect;
                   return;
               }
+              this.currentEditedCell = this.composerStore.currentEditedCell;
+              shouldRecomputeRect = true;
+          }
+          if (shouldRecomputeRect) {
               const position = this.env.model.getters.getActivePosition();
               const zone = this.env.model.getters.expandZone(position.sheetId, positionToZone(position));
               this.rect = this.env.model.getters.getVisibleRect(zone);
@@ -45731,11 +46275,14 @@ stores.inject(MyMetaStore, storeInstance);
       onCellClicked(ev) {
           const openedPopover = this.cellPopovers.persistentCellPopover;
           const [col, row] = this.getCartesianCoordinates(ev);
+          const clickedIcon = this.getInteractiveIconAtEvent(ev);
+          if (clickedIcon) {
+              this.env.model.selection.getBackToDefault();
+          }
           this.props.onCellClicked(col, row, {
               expandZone: ev.shiftKey,
               addZone: isCtrlKey(ev),
           }, ev);
-          const clickedIcon = this.getInteractiveIconAtEvent(ev);
           if (clickedIcon?.onClick) {
               clickedIcon.onClick(clickedIcon.position, this.env);
           }
@@ -46600,6 +47147,19 @@ stores.inject(MyMetaStore, storeInstance);
                   const width = box.width * (percentage / 100);
                   ctx.fillRect(box.x, box.y, width, box.height);
               }
+              if (box?.chip) {
+                  ctx.save();
+                  ctx.beginPath();
+                  ctx.rect(box.x, box.y, box.width, box.height);
+                  ctx.clip();
+                  const chip = box.chip;
+                  ctx.fillStyle = chip.color;
+                  const radius = 10;
+                  ctx.beginPath();
+                  ctx.roundRect(chip.x, chip.y, chip.width, chip.height, radius);
+                  ctx.fill();
+                  ctx.restore();
+              }
               if (box.overlayColor) {
                   ctx.fillStyle = box.overlayColor;
                   ctx.fillRect(box.x, box.y, box.width, box.height);
@@ -46739,19 +47299,6 @@ stores.inject(MyMetaStore, storeInstance);
                       ctx.font = font;
                   }
                   ctx.fillStyle = style.textColor || "#000";
-                  // compute horizontal align start point parameter
-                  let x = box.x;
-                  if (align === "left") {
-                      const leftIconSize = box.icons.left ? box.icons.left.size + box.icons.left.margin : 0;
-                      x += MIN_CELL_TEXT_MARGIN + leftIconSize;
-                  }
-                  else if (align === "right") {
-                      const rightIconSize = box.icons.right ? box.icons.right.size + box.icons.right.margin : 0;
-                      x += box.width - MIN_CELL_TEXT_MARGIN - rightIconSize;
-                  }
-                  else {
-                      x += box.width / 2;
-                  }
                   // horizontal align text direction
                   ctx.textAlign = align;
                   // clip rect if needed
@@ -46762,15 +47309,13 @@ stores.inject(MyMetaStore, storeInstance);
                       ctx.rect(x, y, width, height);
                       ctx.clip();
                   }
-                  // compute vertical align start point parameter:
-                  const textLineHeight = computeTextFontSizeInPixels(style);
-                  const numberOfLines = box.content.textLines.length;
-                  let y = this.getters.computeTextYCoordinate(box, textLineHeight, style.verticalAlign, numberOfLines);
+                  const x = box.content.x;
+                  let y = box.content.y;
                   // use the horizontal and the vertical start points to:
                   // fill text / fill strikethrough / fill underline
                   for (const brokenLine of box.content.textLines) {
-                      drawDecoratedText(ctx, brokenLine, { x: Math.round(x), y: Math.round(y) }, style.underline, style.strikethrough);
-                      y += MIN_CELL_TEXT_MARGIN + textLineHeight;
+                      drawDecoratedText(ctx, brokenLine, { x, y }, style.underline, style.strikethrough);
+                      y += MIN_CELL_TEXT_MARGIN + box.content.fontSizePx;
                   }
                   if (box.clipRect) {
                       ctx.restore();
@@ -47005,11 +47550,15 @@ stores.inject(MyMetaStore, storeInstance);
           const showFormula = this.getters.shouldShowFormulas();
           const { x, y, width, height } = this.getters.getRect(zone);
           const { verticalAlign } = this.getters.getCellStyle(position);
+          const chipStyle = this.getters.getDataValidationChipStyle(position);
           let style = this.getters.getCellComputedStyle(position);
           if (this.fingerprints.isEnabled) {
               const fingerprintColor = this.fingerprints.colors.get(position);
               style = { ...style, fillColor: fingerprintColor };
           }
+          if (chipStyle?.textColor) {
+              style = { ...style, textColor: chipStyle.textColor };
+          }
           const dataBarFill = this.fingerprints.isEnabled
               ? undefined
               : this.getters.getConditionalDataBar(position);
@@ -47043,22 +47592,55 @@ stores.inject(MyMetaStore, storeInstance);
           const maxWidth = width - 2 * MIN_CELL_TEXT_MARGIN;
           const multiLineText = this.getters.getCellMultiLineText(position, { maxWidth, wrapText });
           const textWidth = Math.max(...multiLineText.map((line) => this.getters.getTextWidth(line, style) + MIN_CELL_TEXT_MARGIN));
+          const chipMargin = chipStyle ? DATA_VALIDATION_CHIP_MARGIN : 0;
           const leftIconWidth = box.icons.left ? box.icons.left.size + box.icons.left.margin : 0;
+          const leftMargin = leftIconWidth + chipMargin;
           const rightIconWidth = box.icons.right ? box.icons.right.size + box.icons.right.margin : 0;
-          const contentWidth = leftIconWidth + textWidth + rightIconWidth;
+          const rightMargin = rightIconWidth + chipMargin;
+          const contentWidth = leftMargin + textWidth + rightMargin;
           const align = this.computeCellAlignment(position, contentWidth > width);
+          // compute vertical align start point parameter:
+          const numberOfLines = multiLineText.length;
+          const contentY = Math.round(this.getters.computeTextYCoordinate(box, fontSizePX, style.verticalAlign, numberOfLines));
+          // compute horizontal align start point parameter
+          let contentX = box.x;
+          if (align === "left") {
+              contentX += MIN_CELL_TEXT_MARGIN + leftMargin;
+          }
+          else if (align === "right") {
+              contentX += box.width - MIN_CELL_TEXT_MARGIN - rightMargin;
+          }
+          else {
+              contentX += box.width / 2;
+          }
+          contentX = Math.round(contentX);
+          const textHeight = computeTextLinesHeight(fontSizePX, numberOfLines);
           box.content = {
               textLines: multiLineText,
               width: wrapping === "overflow" ? textWidth : width,
               align,
+              x: contentX,
+              y: contentY,
+              fontSizePx: fontSizePX,
           };
+          if (chipStyle?.fillColor) {
+              const chipMarginLeft = leftMargin;
+              const chipMarginRight = DATA_VALIDATION_CHIP_MARGIN;
+              box.chip = {
+                  color: chipStyle.fillColor,
+                  width: box.width - chipMarginLeft - chipMarginRight,
+                  height: textHeight + 2,
+                  x: box.x + chipMarginLeft,
+                  y: contentY - 2,
+              };
+          }
           /** ClipRect */
           const isOverflowing = contentWidth > width || fontSizePX > height;
-          if (box.icons.left || box.icons.right) {
+          if (box.icons.left || box.icons.right || box.chip) {
               box.clipRect = {
-                  x: box.x + leftIconWidth,
+                  x: box.x + leftMargin,
                   y: box.y,
-                  width: Math.max(0, width - leftIconWidth - rightIconWidth),
+                  width: Math.max(0, width - leftMargin - rightMargin),
                   height,
               };
           }
@@ -47758,15 +48340,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  class Section extends owl.Component {
-      static template = "o_spreadsheet.Section";
-      static props = {
-          class: { type: String, optional: true },
-          title: { type: String, optional: true },
-          slots: Object,
-      };
-  }
-
   class ChartDataSeries extends owl.Component {
       static template = "o-spreadsheet.ChartDataSeries";
       static components = { SelectionInput, Section };
@@ -48315,325 +48888,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  const LINE_VERTICAL_PADDING = 1;
-  const PICKER_PADDING = 8;
-  const ITEM_BORDER_WIDTH = 1;
-  const ITEM_EDGE_LENGTH = 18;
-  const ITEMS_PER_LINE = 10;
-  const MAGNIFIER_EDGE = 16;
-  const ITEM_GAP = 2;
-  const CONTENT_WIDTH = ITEMS_PER_LINE * (ITEM_EDGE_LENGTH + 2 * ITEM_BORDER_WIDTH) + (ITEMS_PER_LINE - 1) * ITEM_GAP;
-  const INNER_GRADIENT_WIDTH = CONTENT_WIDTH - 2 * ITEM_BORDER_WIDTH;
-  const INNER_GRADIENT_HEIGHT = CONTENT_WIDTH - 30 - 2 * ITEM_BORDER_WIDTH;
-  const CONTAINER_WIDTH = CONTENT_WIDTH + 2 * PICKER_PADDING;
-  css /* scss */ `
-  .o-color-picker {
-    padding: ${PICKER_PADDING}px 0;
-    /* FIXME: this is useless, overiden by the popover container */
-    box-shadow: 1px 2px 5px 2px rgba(51, 51, 51, 0.15);
-    background-color: white;
-    line-height: 1.2;
-    overflow-y: auto;
-    overflow-x: hidden;
-    width: ${CONTAINER_WIDTH}px;
-
-    .o-color-picker-section-name {
-      margin: 0px ${ITEM_BORDER_WIDTH}px;
-      padding: 4px ${PICKER_PADDING}px;
-    }
-    .colors-grid {
-      display: grid;
-      padding: ${LINE_VERTICAL_PADDING}px ${PICKER_PADDING}px;
-      grid-template-columns: repeat(${ITEMS_PER_LINE}, 1fr);
-      grid-gap: ${ITEM_GAP}px;
-    }
-    .o-color-picker-toggler-button {
-      display: flex;
-      .o-color-picker-toggler-sign {
-        display: flex;
-        margin: auto auto;
-        width: 55%;
-        height: 55%;
-        .o-icon {
-          width: 100%;
-          height: 100%;
-        }
-      }
-    }
-    .o-color-picker-line-item {
-      width: ${ITEM_EDGE_LENGTH + 2 * ITEM_BORDER_WIDTH}px;
-      height: ${ITEM_EDGE_LENGTH + 2 * ITEM_BORDER_WIDTH}px;
-      margin: 0px;
-      border-radius: 50px;
-      border: ${ITEM_BORDER_WIDTH}px solid #666666;
-      padding: 0px;
-      font-size: 16px;
-      background: white;
-      &:hover {
-        background-color: rgba(0, 0, 0, 0.08);
-        outline: 1px solid gray;
-        cursor: pointer;
-      }
-    }
-    .o-buttons {
-      padding: ${PICKER_PADDING}px;
-      display: flex;
-      .o-cancel {
-        border: ${ITEM_BORDER_WIDTH}px solid #c0c0c0;
-        width: 100%;
-        padding: 5px;
-        font-size: 14px;
-        background: white;
-        border-radius: 4px;
-        &:hover:enabled {
-          background-color: rgba(0, 0, 0, 0.08);
-        }
-      }
-    }
-    .o-add-button {
-      border: ${ITEM_BORDER_WIDTH}px solid #c0c0c0;
-      padding: 4px;
-      background: white;
-      border-radius: 4px;
-      &:hover:enabled {
-        background-color: rgba(0, 0, 0, 0.08);
-      }
-    }
-    .o-separator {
-      border-bottom: ${MENU_SEPARATOR_BORDER_WIDTH}px solid ${SEPARATOR_COLOR};
-      margin-top: ${MENU_SEPARATOR_PADDING}px;
-      margin-bottom: ${MENU_SEPARATOR_PADDING}px;
-    }
-
-    .o-custom-selector {
-      padding: ${PICKER_PADDING + 2}px ${PICKER_PADDING}px;
-      position: relative;
-      .o-gradient {
-        margin-bottom: ${MAGNIFIER_EDGE / 2}px;
-        border: ${ITEM_BORDER_WIDTH}px solid #c0c0c0;
-        width: ${INNER_GRADIENT_WIDTH + 2 * ITEM_BORDER_WIDTH}px;
-        height: ${INNER_GRADIENT_HEIGHT + 2 * ITEM_BORDER_WIDTH}px;
-        position: relative;
-      }
-
-      .magnifier {
-        height: ${MAGNIFIER_EDGE}px;
-        width: ${MAGNIFIER_EDGE}px;
-        border-radius: 50%;
-        border: 2px solid #fff;
-        box-shadow: 0px 0px 3px #c0c0c0;
-        position: absolute;
-        z-index: 2;
-      }
-      .saturation {
-        background: linear-gradient(to right, #fff 0%, transparent 100%);
-      }
-      .lightness {
-        background: linear-gradient(to top, #000 0%, transparent 100%);
-      }
-      .o-hue-picker {
-        border: ${ITEM_BORDER_WIDTH}px solid #c0c0c0;
-        width: 100%;
-        height: 12px;
-        border-radius: 4px;
-        background: linear-gradient(
-          to right,
-          hsl(0 100% 50%) 0%,
-          hsl(0.2turn 100% 50%) 20%,
-          hsl(0.3turn 100% 50%) 30%,
-          hsl(0.4turn 100% 50%) 40%,
-          hsl(0.5turn 100% 50%) 50%,
-          hsl(0.6turn 100% 50%) 60%,
-          hsl(0.7turn 100% 50%) 70%,
-          hsl(0.8turn 100% 50%) 80%,
-          hsl(0.9turn 100% 50%) 90%,
-          hsl(1turn 100% 50%) 100%
-        );
-        position: relative;
-        cursor: crosshair;
-      }
-      .o-hue-slider {
-        margin-top: -3px;
-      }
-      .o-custom-input-preview {
-        padding: 2px 0px;
-        display: flex;
-        input {
-          width: 50%;
-          border-radius: 4px;
-          padding: 4px 23px 4px 10px;
-          height: 24px;
-          border: 1px solid #c0c0c0;
-          margin-right: 2px;
-        }
-        .o-wrong-color {
-          /* FIXME bootstrap class instead? */
-          outline-color: red;
-          border-color: red;
-          &:focus {
-            outline-style: solid;
-            outline-width: 1px;
-          }
-        }
-      }
-      .o-custom-input-buttons {
-        padding: 2px 0px;
-        display: flex;
-        justify-content: end;
-      }
-      .o-color-preview {
-        border: 1px solid #c0c0c0;
-        border-radius: 4px;
-        width: 50%;
-      }
-    }
-  }
-`;
-  class ColorPicker extends owl.Component {
-      static template = "o-spreadsheet-ColorPicker";
-      static props = {
-          onColorPicked: Function,
-          currentColor: { type: String, optional: true },
-          maxHeight: { type: Number, optional: true },
-          anchorRect: Object,
-          disableNoColor: { type: Boolean, optional: true },
-      };
-      static defaultProps = { currentColor: "" };
-      static components = { Popover };
-      COLORS = COLOR_PICKER_DEFAULTS;
-      state = owl.useState({
-          showGradient: false,
-          currentHslaColor: isColorValid(this.props.currentColor)
-              ? { ...hexToHSLA(this.props.currentColor), a: 1 }
-              : { h: 0, s: 100, l: 100, a: 1 },
-          customHexColor: isColorValid(this.props.currentColor) ? toHex(this.props.currentColor) : "",
-      });
-      get colorPickerStyle() {
-          if (this.props.maxHeight !== undefined && this.props.maxHeight <= 0) {
-              return cssPropertiesToCss({ display: "none" });
-          }
-          return "";
-      }
-      get popoverProps() {
-          return {
-              anchorRect: this.props.anchorRect,
-              maxHeight: this.props.maxHeight,
-              positioning: "bottom-left",
-              verticalOffset: 0,
-          };
-      }
-      get gradientHueStyle() {
-          const hue = this.state.currentHslaColor?.h || 0;
-          return cssPropertiesToCss({
-              background: `hsl(${hue} 100% 50%)`,
-          });
-      }
-      get sliderStyle() {
-          const hue = this.state.currentHslaColor?.h || 0;
-          const delta = Math.round((hue / 360) * INNER_GRADIENT_WIDTH);
-          const left = clip(delta, 1, INNER_GRADIENT_WIDTH) - ICON_EDGE_LENGTH / 2;
-          return cssPropertiesToCss({
-              "margin-left": `${left}px`,
-          });
-      }
-      get pointerStyle() {
-          const { s, l } = this.state.currentHslaColor || { s: 0, l: 0 };
-          const left = Math.round(INNER_GRADIENT_WIDTH * clip(s / 100, 0, 1));
-          const top = Math.round(INNER_GRADIENT_HEIGHT * clip(1 - (2 * l) / (200 - s), 0, 1));
-          return cssPropertiesToCss({
-              left: `${-MAGNIFIER_EDGE / 2 + left}px`,
-              top: `${-MAGNIFIER_EDGE / 2 + top}px`,
-              background: hslaToHex(this.state.currentHslaColor),
-          });
-      }
-      get colorPreviewStyle() {
-          return cssPropertiesToCss({
-              "background-color": hslaToHex(this.state.currentHslaColor),
-          });
-      }
-      get checkmarkColor() {
-          return chartFontColor(this.props.currentColor);
-      }
-      get isHexColorInputValid() {
-          return !this.state.customHexColor || isColorValid(this.state.customHexColor);
-      }
-      setCustomGradient({ x, y }) {
-          const offsetX = clip(x, 0, INNER_GRADIENT_WIDTH);
-          const offsetY = clip(y, 0, INNER_GRADIENT_HEIGHT);
-          const deltaX = offsetX / INNER_GRADIENT_WIDTH;
-          const deltaY = offsetY / INNER_GRADIENT_HEIGHT;
-          const s = 100 * deltaX;
-          const l = 100 * (1 - deltaY) * (1 - 0.5 * deltaX);
-          this.updateColor({ s, l });
-      }
-      setCustomHue(x) {
-          // needs to be capped such that h is in [0°, 359°]
-          const h = Math.round(clip((360 * x) / INNER_GRADIENT_WIDTH, 0, 359));
-          this.updateColor({ h });
-      }
-      updateColor(newHsl) {
-          this.state.currentHslaColor = { ...this.state.currentHslaColor, ...newHsl };
-          this.state.customHexColor = hslaToHex(this.state.currentHslaColor);
-      }
-      onColorClick(color) {
-          if (color) {
-              this.props.onColorPicked(toHex(color));
-          }
-      }
-      resetColor() {
-          this.props.onColorPicked("");
-      }
-      toggleColorPicker() {
-          this.state.showGradient = !this.state.showGradient;
-      }
-      dragGradientPointer(ev) {
-          const initialGradientCoordinates = { x: ev.offsetX, y: ev.offsetY };
-          this.setCustomGradient(initialGradientCoordinates);
-          const initialMousePosition = { x: ev.clientX, y: ev.clientY };
-          const onMouseMove = (ev) => {
-              const currentMousePosition = { x: ev.clientX, y: ev.clientY };
-              const deltaX = currentMousePosition.x - initialMousePosition.x;
-              const deltaY = currentMousePosition.y - initialMousePosition.y;
-              const currentGradientCoordinates = {
-                  x: initialGradientCoordinates.x + deltaX,
-                  y: initialGradientCoordinates.y + deltaY,
-              };
-              this.setCustomGradient(currentGradientCoordinates);
-          };
-          startDnd(onMouseMove, () => { });
-      }
-      dragHuePointer(ev) {
-          const initialX = ev.offsetX;
-          const initialMouseX = ev.clientX;
-          this.setCustomHue(initialX);
-          const onMouseMove = (ev) => {
-              const currentMouseX = ev.clientX;
-              const deltaX = currentMouseX - initialMouseX;
-              const x = initialX + deltaX;
-              this.setCustomHue(x);
-          };
-          startDnd(onMouseMove, () => { });
-      }
-      setHexColor(ev) {
-          // only support HEX code input
-          const val = ev.target.value.replace("##", "#").slice(0, 7);
-          this.state.customHexColor = val;
-          if (!isColorValid(val)) ;
-          else {
-              this.state.currentHslaColor = { ...hexToHSLA(val), a: 1 };
-          }
-      }
-      addCustomColor(ev) {
-          if (!isHSLAValid(this.state.currentHslaColor) || !isColorValid(this.state.customHexColor)) {
-              return;
-          }
-          this.props.onColorPicked(toHex(this.state.customHexColor));
-      }
-      isSameColor(color1, color2) {
-          return isSameColor(color1, color2);
-      }
-  }
-
   css /* scss */ `
   .o-color-picker-widget {
     display: flex;
@@ -48708,7 +48962,8 @@ stores.inject(MyMetaStore, storeInstance);
     input.o-font-size {
       outline: none;
       height: 20px;
-      width: 23px;
+      width: 31px;
+      text-align: center;
     }
   }
   .o-text-options > div {
@@ -49100,57 +49355,6 @@ stores.inject(MyMetaStore, storeInstance);
       };
   }
 
-  const TRANSPARENT_BACKGROUND_SVG = /*xml*/ `
-<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10">
-  <path fill="#d9d9d9" d="M5 5h5v5H5zH0V0h5"/>
-</svg>
-`;
-  css /* scss */ `
-  .o-round-color-picker-button {
-    width: 20px;
-    height: 20px;
-    cursor: pointer;
-    border: 1px solid ${GRAY_300};
-    background-position: 1px 1px;
-    background-image: url("data:image/svg+xml,${encodeURIComponent(TRANSPARENT_BACKGROUND_SVG)}");
-  }
-`;
-  class RoundColorPicker extends owl.Component {
-      static template = "o-spreadsheet.RoundColorPicker";
-      static components = { Section, ColorPicker };
-      static props = {
-          currentColor: { type: String, optional: true },
-          title: { type: String, optional: true },
-          onColorPicked: Function,
-          disableNoColor: { type: Boolean, optional: true },
-      };
-      colorPickerButtonRef = owl.useRef("colorPickerButton");
-      state;
-      setup() {
-          this.state = owl.useState({ pickerOpened: false });
-          owl.useExternalListener(window, "click", this.closePicker);
-      }
-      closePicker() {
-          this.state.pickerOpened = false;
-      }
-      togglePicker() {
-          this.state.pickerOpened = !this.state.pickerOpened;
-      }
-      onColorPicked(color) {
-          this.props.onColorPicked(color);
-          this.state.pickerOpened = false;
-      }
-      get colorPickerAnchorRect() {
-          const button = this.colorPickerButtonRef.el;
-          return getBoundingRectAsPOJO(button);
-      }
-      get buttonStyle() {
-          return cssPropertiesToCss({
-              background: this.props.currentColor,
-          });
-      }
-  }
-
   class GeneralDesignEditor extends owl.Component {
       static template = "o-spreadsheet-GeneralDesignEditor";
       static components = {
@@ -53786,28 +53990,45 @@ stores.inject(MyMetaStore, storeInstance);
       getNumberOfDataColumns() {
           return this.columns.at(-1)?.length || 0;
       }
-      getPivotCells(includeTotal = true, includeColumnHeaders = true) {
-          const key = JSON.stringify({ includeTotal, includeColumnHeaders });
+      getSkippedRows(visibilityOptions) {
+          const skippedRows = new Set();
+          if (!visibilityOptions.displayColumnHeaders) {
+              for (let i = 0; i < this.columns.length - 1; i++) {
+                  skippedRows.add(i);
+              }
+          }
+          if (!visibilityOptions.displayMeasuresRow) {
+              skippedRows.add(this.columns.length - 1);
+          }
+          return skippedRows;
+      }
+      getPivotCells(visibilityOptions = {
+          displayColumnHeaders: true,
+          displayTotals: true,
+          displayMeasuresRow: true,
+      }) {
+          const key = JSON.stringify(visibilityOptions);
           if (!this.pivotCells[key]) {
+              const { displayTotals } = visibilityOptions;
               const numberOfDataRows = this.rows.length;
               const numberOfDataColumns = this.getNumberOfDataColumns();
               let pivotHeight = this.columns.length + numberOfDataRows;
               let pivotWidth = 1 /*(row headers)*/ + numberOfDataColumns;
-              if (!includeTotal && numberOfDataRows !== 1) {
+              if (!displayTotals && numberOfDataRows !== 1) {
                   pivotHeight -= 1;
               }
-              if (!includeTotal && numberOfDataColumns !== this.measures.length) {
+              if (!displayTotals && numberOfDataColumns !== this.measures.length) {
                   pivotWidth -= this.measures.length;
               }
               const domainArray = [];
-              const startRow = includeColumnHeaders ? 0 : this.columns.length;
+              const skippedRows = this.getSkippedRows(visibilityOptions);
               for (let col = 0; col < pivotWidth; col++) {
                   domainArray.push([]);
-                  for (let row = startRow; row < pivotHeight; row++) {
-                      if (!includeTotal && row === pivotHeight) {
+                  for (let row = 0; row < pivotHeight; row++) {
+                      if (skippedRows.has(row)) {
                           continue;
                       }
-                      domainArray[col].push(this.getPivotCell(col, row, includeTotal));
+                      domainArray[col].push(this.getPivotCell(col, row, displayTotals));
                   }
               }
               this.pivotCells[key] = domainArray;
@@ -59464,7 +59685,7 @@ stores.inject(MyMetaStore, storeInstance);
           if (!rule)
               return false;
           return ((rule.criterion.type === "isValueInList" || rule.criterion.type === "isValueInRange") &&
-              rule.criterion.displayStyle === "arrow");
+              (rule.criterion.displayStyle === "arrow" || rule.criterion.displayStyle === "chip"));
       }
       addDataValidationRule(sheetId, newRule) {
           const rules = this.rules[sheetId];
@@ -61998,7 +62219,9 @@ stores.inject(MyMetaStore, storeInstance);
                   const ranges = cmd.ranges.map((rangeData) => this.getters.getRangeFromRangeData(rangeData));
                   const union = this.getters.getRangesUnion(ranges);
                   const mergesInTarget = this.getters.getMergesInZone(cmd.sheetId, union.zone);
-                  this.dispatch("REMOVE_MERGE", { sheetId: cmd.sheetId, target: mergesInTarget });
+                  if (mergesInTarget.length) {
+                      this.dispatch("REMOVE_MERGE", { sheetId: cmd.sheetId, target: mergesInTarget });
+                  }
                   const id = this.consumeNextId();
                   const config = cmd.config || DEFAULT_TABLE_CONFIG;
                   const newTable = cmd.tableType === "dynamic"
@@ -62097,14 +62320,16 @@ stores.inject(MyMetaStore, storeInstance);
           const zoneToCheckIfEmpty = direction === "down"
               ? { ...zone, bottom: zone.bottom + 1, top: zone.bottom + 1 }
               : { ...zone, right: zone.right + 1, left: zone.right + 1 };
-          for (const position of positions(zoneToCheckIfEmpty)) {
-              const cellPosition = { sheetId, ...position };
-              // Since this plugin is loaded before CellPlugin, the getters still give us the old cell content
-              const cellContent = this.getters.getCell(cellPosition)?.content;
-              if (cellContent ||
-                  this.getters.isInMerge(cellPosition) ||
-                  this.getTablesOverlappingZones(sheetId, [positionToZone(position)]).length) {
-                  return "none";
+          for (let row = zoneToCheckIfEmpty.top; row <= zoneToCheckIfEmpty.bottom; row++) {
+              for (let col = zoneToCheckIfEmpty.left; col <= zoneToCheckIfEmpty.right; col++) {
+                  const cellPosition = { sheetId, col, row };
+                  // Since this plugin is loaded before CellPlugin, the getters still give us the old cell content
+                  const cellContent = this.getters.getCell(cellPosition)?.content;
+                  if (cellContent ||
+                      this.getters.isInMerge(cellPosition) ||
+                      this.getTablesOverlappingZones(sheetId, [positionToZone(cellPosition)]).length) {
+                      return "none";
+                  }
               }
           }
           return direction;
@@ -65826,7 +66051,10 @@ stores.inject(MyMetaStore, storeInstance);
           "getDataValidationInvalidCriterionValueMessage",
           "getInvalidDataValidationMessage",
           "getValidationResultForCellValue",
+          "getDataValidationRangeValues",
           "isCellValidCheckbox",
+          "getDataValidationCellStyle",
+          "getDataValidationChipStyle",
           "isDataValidationInvalid",
       ];
       validationResults = {};
@@ -65847,6 +66075,18 @@ stores.inject(MyMetaStore, storeInstance);
       isDataValidationInvalid(cellPosition) {
           return !this.getValidationResultForCell(cellPosition).isValid;
       }
+      getDataValidationCellStyle(position) {
+          if (this.hasChip(position)) {
+              return undefined; // The style is not applied on the cell if it's a chip
+          }
+          return this.getDataValidationStyle(position);
+      }
+      getDataValidationChipStyle(position) {
+          if (this.hasChip(position)) {
+              return this.getDataValidationStyle(position) ?? { fillColor: GRAY_200 };
+          }
+          return undefined;
+      }
       getInvalidDataValidationMessage(cellPosition) {
           const validationResult = this.getValidationResultForCell(cellPosition);
           return validationResult.isValid ? undefined : validationResult.error;
@@ -65869,6 +66109,11 @@ stores.inject(MyMetaStore, storeInstance);
           }
           return evaluator.isCriterionValueValid(value) ? undefined : evaluator.criterionValueErrorString;
       }
+      getDataValidationRangeValues(sheetId, criterion) {
+          const range = this.getters.getRangeFromSheetXC(sheetId, String(criterion.values[0]));
+          const criterionValues = this.getters.getRangeValues(range);
+          return criterionValues.map((value) => value?.toString()).filter(isDefined);
+      }
       isCellValidCheckbox(cellPosition) {
           if (!this.getters.isMainCellPosition(cellPosition)) {
               return false;
@@ -65888,6 +66133,38 @@ stores.inject(MyMetaStore, storeInstance);
           const error = this.getRuleErrorForCellValue(cellValue, cellPosition, rule);
           return error ? { error, rule, isValid: false } : VALID_RESULT;
       }
+      hasChip(position) {
+          const rule = this.getters.getValidationRuleForCell(position);
+          return ((rule?.criterion.type === "isValueInList" || rule?.criterion.type === "isValueInRange") &&
+              rule.criterion.displayStyle === "chip");
+      }
+      getDataValidationStyle(position) {
+          const rule = this.getters.getValidationRuleForCell(position);
+          if (!rule || this.isDataValidationInvalid(position)) {
+              return undefined;
+          }
+          const evaluatedCell = this.getters.getEvaluatedCell(position);
+          const color = this.getValueColor(rule, evaluatedCell.value);
+          if (!color) {
+              return undefined;
+          }
+          const style = {
+              fillColor: color,
+              textColor: chipTextColor(color),
+          };
+          return style;
+      }
+      getValueColor(rule, value) {
+          if (rule.criterion.type !== "isValueInList" && rule.criterion.type !== "isValueInRange") {
+              return undefined;
+          }
+          for (const criterionValue in rule.criterion.colors) {
+              if (criterionValue.toLowerCase() === String(value).toLowerCase()) {
+                  return rule.criterion.colors[criterionValue];
+              }
+          }
+          return undefined;
+      }
       isValidFormula(value) {
           return !compile(value).isBadExpression;
       }
@@ -65984,12 +66261,35 @@ stores.inject(MyMetaStore, storeInstance);
       }
       return undefined;
   });
+  iconsOnCellRegistry.add("data_validation_chip_icon", (getters, position) => {
+      const chipStyle = getters.getDataValidationChipStyle(position);
+      if (chipStyle) {
+          const cellStyle = getters.getCellComputedStyle(position);
+          return {
+              svg: getChipSvg(chipStyle),
+              hoverSvg: getHoveredChipSvg(chipStyle),
+              priority: 10,
+              horizontalAlign: "right",
+              size: computeTextFontSizeInPixels(cellStyle),
+              margin: 4,
+              position,
+              onClick: (position, env) => {
+                  const { col, row } = position;
+                  env.model.selection.selectCell(col, row);
+                  env.startCellEdition();
+              },
+              type: "data_validation_chip_icon",
+          };
+      }
+      return undefined;
+  });
   iconsOnCellRegistry.add("data_validation_list_icon", (getters, position) => {
       const hasIcon = !getters.isReadonly() && getters.cellHasListDataValidationIcon(position);
       if (hasIcon) {
+          const cellStyle = getters.getCellComputedStyle(position);
           return {
-              svg: CARET_DOWN,
-              hoverSvg: HOVERED_CARET_DOWN,
+              svg: getCaretDownSvg(cellStyle),
+              hoverSvg: getHoveredCaretDownSvg(cellStyle),
               priority: 2,
               horizontalAlign: "right",
               size: GRID_ICON_EDGE_LENGTH,
@@ -67257,10 +67557,15 @@ stores.inject(MyMetaStore, storeInstance);
               const includeTotal = toScalar(args[2]);
               const shouldIncludeTotal = includeTotal === undefined ? true : toBoolean(includeTotal);
               const includeColumnHeaders = toScalar(args[3]);
+              const includeMeasures = toScalar(args[5]);
+              const shouldIncludeMeasures = includeMeasures === undefined ? true : toBoolean(includeMeasures);
               const shouldIncludeColumnHeaders = includeColumnHeaders === undefined ? true : toBoolean(includeColumnHeaders);
-              const pivotCells = pivot
-                  .getCollapsedTableStructure()
-                  .getPivotCells(shouldIncludeTotal, shouldIncludeColumnHeaders);
+              const visibilityOptions = {
+                  displayColumnHeaders: shouldIncludeColumnHeaders,
+                  displayTotals: shouldIncludeTotal,
+                  displayMeasuresRow: shouldIncludeMeasures,
+              };
+              const pivotCells = pivot.getCollapsedTableStructure().getPivotCells(visibilityOptions);
               const pivotCol = position.col - mainPosition.col;
               const pivotRow = position.row - mainPosition.row;
               return pivotCells[pivotCol][pivotRow];
@@ -68526,11 +68831,11 @@ stores.inject(MyMetaStore, storeInstance);
        * transformation function given
        */
       addTransformation(executed, toTransforms, fn) {
+          if (!this.content[executed]) {
+              this.content[executed] = new Map();
+          }
           for (const toTransform of toTransforms) {
-              if (!this.content[toTransform]) {
-                  this.content[toTransform] = new Map();
-              }
-              this.content[toTransform].set(executed, fn);
+              this.content[executed].set(toTransform, fn);
           }
           return this;
       }
@@ -68539,7 +68844,7 @@ stores.inject(MyMetaStore, storeInstance);
        * that the executed command happened.
        */
       getTransformation(toTransform, executed) {
-          return this.content[toTransform] && this.content[toTransform].get(executed);
+          return this.content[executed] && this.content[executed].get(toTransform);
       }
   }
   const otRegistry = new OTRegistry();
@@ -68869,10 +69174,20 @@ stores.inject(MyMetaStore, storeInstance);
    */
   function transformAll(toTransform, executed) {
       let transformedCommands = [...toTransform];
+      const possibleTransformations = new Set(otRegistry.getKeys());
       for (const executedCommand of executed) {
-          transformedCommands = transformedCommands
-              .map((cmd) => transform(cmd, executedCommand))
-              .filter(isDefined);
+          // If the executed command is not in the registry, we skip it
+          // because we know there won't be any transformation impacting the
+          // commands to transform.
+          if (possibleTransformations.has(executedCommand.type)) {
+              transformedCommands = transformedCommands.reduce((acc, cmd) => {
+                  const transformed = transform(cmd, executedCommand);
+                  if (transformed) {
+                      acc.push(transformed);
+                  }
+                  return acc;
+              }, []);
+          }
       }
       return transformedCommands;
   }
@@ -69482,8 +69797,7 @@ stores.inject(MyMetaStore, storeInstance);
           "isFullySynchronized",
       ];
       static layers = ["Selection"];
-      availableColors = new AlternatingColorGenerator(12);
-      colors = {};
+      colors = new AlternatingColorMap(12);
       session;
       constructor(config) {
           super(config);
@@ -69501,7 +69815,7 @@ stores.inject(MyMetaStore, storeInstance);
       }
       getConnectedClients() {
           return [...this.session.getConnectedClients()].map((client) => {
-              return { ...client, color: this.colors[client.id] };
+              return { ...client, color: this.colors.get(client.id) };
           });
       }
       isFullySynchronized() {
@@ -69530,10 +69844,7 @@ stores.inject(MyMetaStore, storeInstance);
                   client.position &&
                   client.position.sheetId === sheetId &&
                   this.isPositionValid(client.position)) {
-                  if (!this.colors[client.id]) {
-                      this.colors[client.id] = this.availableColors.next();
-                  }
-                  clients.push({ ...client, color: this.colors[client.id], position: client.position });
+                  clients.push({ ...client, position: client.position });
               }
           }
           return clients;
@@ -70433,6 +70744,9 @@ stores.inject(MyMetaStore, storeInstance);
           for (const icon of this.getters.getCellIcons(position)) {
               contentWidth += icon.margin + icon.size;
           }
+          if (this.getters.getDataValidationChipStyle(position)) {
+              contentWidth += DATA_VALIDATION_CHIP_MARGIN * 2;
+          }
           if (contentWidth === 0) {
               return 0;
           }
@@ -70590,7 +70904,7 @@ stores.inject(MyMetaStore, storeInstance);
                   }
                   const position = this.getters.getCellPosition(cell.id);
                   const colSize = this.getters.getColSize(sheetId, position.col);
-                  if (cell.isFormula) {
+                  if (cell.isFormula || this.getters.getArrayFormulaSpreadingOn(position)) {
                       const content = this.getters.getEvaluatedCell(position).formattedValue;
                       const evaluatedSize = getCellContentHeight(this.ctx, content, cell?.style, colSize);
                       if (evaluatedSize > evaluatedRowSize && evaluatedSize > DEFAULT_CELL_HEIGHT) {
@@ -70793,6 +71107,8 @@ stores.inject(MyMetaStore, storeInstance);
           if (invalidateEvaluationCommands.has(cmd.type) ||
               cmd.type === "UPDATE_CELL" ||
               cmd.type === "SET_FORMATTING" ||
+              cmd.type === "ADD_DATA_VALIDATION_RULE" ||
+              cmd.type === "REMOVE_DATA_VALIDATION_RULE" ||
               cmd.type === "EVALUATE_CELLS") {
               this.styles = {};
               this.borders = {};
@@ -70864,8 +71180,10 @@ stores.inject(MyMetaStore, storeInstance);
           const cell = this.getters.getCell(position);
           const cfStyle = this.getters.getCellConditionalFormatStyle(position);
           const tableStyle = this.getters.getCellTableStyle(position);
+          const dataValidationStyle = this.getters.getDataValidationCellStyle(position);
           const computedStyle = {
               ...removeFalsyAttributes(tableStyle),
+              ...removeFalsyAttributes(dataValidationStyle),
               ...removeFalsyAttributes(cell?.style),
               ...removeFalsyAttributes(cfStyle),
           };
@@ -72407,9 +72725,10 @@ stores.inject(MyMetaStore, storeInstance);
                   const filteredValues = filterValue.hiddenValues?.map(toLowerCase);
                   if (!filteredValues)
                       continue;
+                  const filteredValuesSet = new Set(filteredValues);
                   for (let row = filteredZone.top; row <= filteredZone.bottom; row++) {
                       const value = this.getCellValueAsString(sheetId, filter.col, row);
-                      if (filteredValues.includes(value)) {
+                      if (filteredValuesSet.has(value)) {
                           hiddenRows.add(row);
                       }
                   }
@@ -74426,19 +74745,29 @@ stores.inject(MyMetaStore, storeInstance);
               (rule.criterion.type !== "isValueInList" && rule.criterion.type !== "isValueInRange")) {
               return [];
           }
-          let values;
-          if (rule.criterion.type === "isValueInList") {
-              values = rule.criterion.values;
-          }
-          else {
-              const range = this.getters.getRangeFromSheetXC(position.sheetId, rule.criterion.values[0]);
-              values = Array.from(new Set(this.getters
-                  .getRangeValues(range)
-                  .filter(isNotNull)
-                  .map((value) => value.toString())
-                  .filter((val) => val !== "")));
-          }
-          return values.map((value) => ({ text: value }));
+          const sheetId = this.composer.currentEditedCell.sheetId;
+          const values = rule.criterion.type === "isValueInRange"
+              ? Array.from(new Set(this.getters.getDataValidationRangeValues(sheetId, rule.criterion)))
+              : rule.criterion.values;
+          const isChip = rule.criterion.displayStyle === "chip";
+          if (!isChip) {
+              return values.map((value) => ({ text: value }));
+          }
+          const colors = rule.criterion.colors;
+          return values.map((value) => {
+              const color = colors?.[value];
+              return {
+                  text: value,
+                  htmlContent: [
+                      {
+                          value,
+                          color: color ? chipTextColor(color) : undefined,
+                          backgroundColor: color || GRAY_200,
+                          classes: ["badge rounded-pill fs-6 fw-normal w-100 mt-1 text-start"],
+                      },
+                  ],
+              };
+          });
       },
       selectProposal(tokenAtCursor, value) {
           this.composer.setCurrentContent(value);
@@ -75091,7 +75420,7 @@ stores.inject(MyMetaStore, storeInstance);
   })
       .addChild("settings", ["file"], {
       name: _t("Settings"),
-      sequence: 100,
+      sequence: 200,
       execute: (env) => env.openSidePanel("Settings"),
       isEnabled: (env) => !env.isSmall,
       icon: "o-spreadsheet-Icon.COG",
@@ -78000,7 +78329,7 @@ stores.inject(MyMetaStore, storeInstance);
 
   .o-spreadsheet-topbar {
     line-height: 1.2;
-    font-size: 13px;
+    font-size: 14px;
     font-weight: 500;
     background-color: #fff;
 
@@ -83259,6 +83588,7 @@ stores.inject(MyMetaStore, storeInstance);
   exports.AbstractChart = AbstractChart;
   exports.AbstractFigureClipboardHandler = AbstractFigureClipboardHandler;
   exports.CellErrorType = CellErrorType;
+  exports.ClientDisconnectedError = ClientDisconnectedError;
   exports.CorePlugin = CorePlugin;
   exports.CoreViewPlugin = CoreViewPlugin;
   exports.DispatchResult = DispatchResult;
@@ -83305,9 +83635,9 @@ stores.inject(MyMetaStore, storeInstance);
   exports.tokenize = tokenize;
 
 
-  __info__.version = "18.4.0-alpha.7";
-  __info__.date = "2025-06-06T09:32:44.285Z";
-  __info__.hash = "2bfbe64";
+  __info__.version = "18.4.0-alpha.9";
+  __info__.date = "2025-06-19T18:23:22.025Z";
+  __info__.hash = "6d4d685";
 
 
 })(this.o_spreadsheet = this.o_spreadsheet || {}, owl);