@odoo/o-spreadsheet 19.1.0-alpha.0 → 19.1.0-alpha.2

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 19.1.0-alpha.0
- * @date 2025-09-11T07:49:49.483Z
- * @hash 587c928
+ * @version 19.1.0-alpha.2
+ * @date 2025-09-19T07:26:49.306Z
+ * @hash 8cc543d
  */
 
 (function (exports, owl) {
@@ -588,7 +588,6 @@
   const CANVAS_SHIFT = 0.5;
   // Colors
   const HIGHLIGHT_COLOR = "#017E84";
-  const BACKGROUND_GRAY_COLOR = "#f5f5f5";
   const BACKGROUND_HEADER_COLOR = "#F8F9FA";
   const BACKGROUND_HEADER_SELECTED_COLOR = "#E8EAED";
   const BACKGROUND_HEADER_ACTIVE_COLOR = "#595959";
@@ -598,15 +597,10 @@
   const HEADER_BORDER_COLOR = "#C0C0C0";
   const CELL_BORDER_COLOR = "#E2E3E3";
   const BACKGROUND_CHART_COLOR = "#FFFFFF";
-  const DISABLED_TEXT_COLOR = "#CACACA";
   const DEFAULT_COLOR_SCALE_MIDPOINT_COLOR = 0xb6d7a8;
   const LINK_COLOR = HIGHLIGHT_COLOR;
   const FILTERS_COLOR = "#188038";
-  const SEPARATOR_COLOR = "#E0E2E4";
-  const ICONS_COLOR = "#4A4F59";
-  const HEADER_GROUPING_BACKGROUND_COLOR = "#F5F5F5";
   const HEADER_GROUPING_BORDER_COLOR = "#999";
-  const GRID_BORDER_COLOR = "#E2E3E3";
   const FROZEN_PANE_HEADER_BORDER_COLOR = "#BCBCBC";
   const FROZEN_PANE_BORDER_COLOR = "#DADFE8";
   const COMPOSER_ASSISTANT_COLOR = "#9B359B";
@@ -618,30 +612,9 @@
   const GRAY_900 = "#111827";
   const GRAY_300 = "#D8DADD";
   const GRAY_200 = "#E7E9ED";
-  const GRAY_100 = "#F9FAFB";
   const TEXT_BODY = "#374151";
   const TEXT_BODY_MUTED = TEXT_BODY + "C2";
-  const TEXT_HEADING = "#111827";
-  const PRIMARY_BUTTON_BG = "#714B67";
-  const PRIMARY_BUTTON_HOVER_BG = "#624159";
-  const PRIMARY_BUTTON_ACTIVE_BG = "#f1edf0";
-  const BUTTON_BG = GRAY_200;
-  const BUTTON_HOVER_BG = GRAY_300;
-  const BUTTON_HOVER_TEXT_COLOR = "#111827";
-  const BUTTON_ACTIVE_BG = "#e6f2f3";
-  const BUTTON_ACTIVE_TEXT_COLOR = "#111827";
   const ACTION_COLOR = HIGHLIGHT_COLOR;
-  const ACTION_COLOR_HOVER = "#01585c";
-  const ALERT_WARNING_BG = "#FBEBCC";
-  const ALERT_WARNING_BORDER = "#F8E2B3";
-  const ALERT_WARNING_TEXT_COLOR = "#946D23";
-  const ALERT_DANGER_BG = "#D44C591A";
-  const ALERT_DANGER_BORDER = "#C34A41";
-  const ALERT_DANGER_TEXT_COLOR = "#C34A41";
-  const ALERT_INFO_BG = "#CDEDF1";
-  const ALERT_INFO_BORDER = "#98DBE2";
-  const ALERT_INFO_TEXT_COLOR = "#09414A";
-  const BADGE_SELECTED_COLOR = "#E6F2F3";
   const CHART_PADDING = 20;
   const CHART_PADDING_BOTTOM = 10;
   const CHART_PADDING_TOP = 15;
@@ -739,9 +712,7 @@
   const HEADER_HEIGHT = 26;
   const HEADER_WIDTH = 48;
   const DESKTOP_TOPBAR_TOOLBAR_HEIGHT = 34;
-  const MOBILE_TOPBAR_TOOLBAR_HEIGHT = 44;
   const DESKTOP_BOTTOMBAR_HEIGHT = 36;
-  const MOBILE_BOTTOMBAR_HEIGHT = 44;
   const DEFAULT_CELL_WIDTH = 96;
   const DEFAULT_CELL_HEIGHT = 23;
   const SCROLLBAR_WIDTH = 15;
@@ -749,7 +720,6 @@
   const ICON_EDGE_LENGTH = 18;
   const MIN_CF_ICON_MARGIN = 4;
   const MIN_CELL_TEXT_MARGIN = 4;
-  const CF_ICON_EDGE_LENGTH = 15;
   const PADDING_AUTORESIZE_VERTICAL = 3;
   const PADDING_AUTORESIZE_HORIZONTAL = MIN_CELL_TEXT_MARGIN;
   const GROUP_LAYER_WIDTH = 21;
@@ -764,11 +734,6 @@
   const MENU_WIDTH = 250;
   const MENU_VERTICAL_PADDING = 6;
   const DESKTOP_MENU_ITEM_HEIGHT = 26;
-  const MOBILE_MENU_ITEM_HEIGHT = 35;
-  const MENU_ITEM_PADDING_HORIZONTAL = 11;
-  const MENU_ITEM_PADDING_VERTICAL = 4;
-  const MENU_SEPARATOR_BORDER_WIDTH = 1;
-  const MENU_SEPARATOR_PADDING = 5;
   // Style
   const DEFAULT_STYLE = {
       align: "left",
@@ -822,23 +787,6 @@
   const FORBIDDEN_SHEETNAME_CHARS_IN_EXCEL_REGEX = /'|\*|\?|\/|\\|\[|\]/;
   // Cells
   const FORMULA_REF_IDENTIFIER = "|";
-  // Components
-  var ComponentsImportance;
-  (function (ComponentsImportance) {
-      ComponentsImportance[ComponentsImportance["Grid"] = 0] = "Grid";
-      ComponentsImportance[ComponentsImportance["Highlight"] = 5] = "Highlight";
-      ComponentsImportance[ComponentsImportance["HeaderGroupingButton"] = 6] = "HeaderGroupingButton";
-      ComponentsImportance[ComponentsImportance["Figure"] = 10] = "Figure";
-      ComponentsImportance[ComponentsImportance["ScrollBar"] = 15] = "ScrollBar";
-      ComponentsImportance[ComponentsImportance["GridPopover"] = 19] = "GridPopover";
-      ComponentsImportance[ComponentsImportance["GridComposer"] = 20] = "GridComposer";
-      ComponentsImportance[ComponentsImportance["IconPicker"] = 25] = "IconPicker";
-      ComponentsImportance[ComponentsImportance["TopBarComposer"] = 30] = "TopBarComposer";
-      ComponentsImportance[ComponentsImportance["Popover"] = 35] = "Popover";
-      ComponentsImportance[ComponentsImportance["FigureAnchor"] = 1000] = "FigureAnchor";
-      ComponentsImportance[ComponentsImportance["FigureSnapLine"] = 1001] = "FigureSnapLine";
-      ComponentsImportance[ComponentsImportance["FigureTooltip"] = 1002] = "FigureTooltip";
-  })(ComponentsImportance || (ComponentsImportance = {}));
   let DEFAULT_SHEETVIEW_SIZE = 0;
   function getDefaultSheetViewSize() {
       return DEFAULT_SHEETVIEW_SIZE;
@@ -889,6 +837,7 @@
       ARG_SEPARATOR: functionColor,
       ORPHAN_RIGHT_PAREN: "#ff0000",
   };
+  const DRAG_THRESHOLD = 5; // in pixels, to avoid unwanted drag when clicking
 
   //------------------------------------------------------------------------------
   // Miscellaneous
@@ -1367,8 +1316,19 @@
           },
       }[funcName];
   }
+  /**
+   * Removes the specified indexes from the array.
+   * Sparse (empty) elements are transformed to undefined (unless their index is explicitly removed).
+   */
   function removeIndexesFromArray(array, indexes) {
-      return array.filter((_, index) => !indexes.includes(index));
+      const toRemove = new Set(indexes);
+      const newArray = [];
+      for (let i = 0; i < array.length; i++) {
+          if (!toRemove.has(i)) {
+              newArray.push(array[i]);
+          }
+      }
+      return newArray;
   }
   function insertItemsAtIndex(array, items, index) {
       const newArray = [...array];
@@ -10664,153 +10624,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  /**
-   * This file is largely inspired by owl 1.
-   * `css` tag has been removed from owl 2 without workaround to manage css.
-   * So, the solution was to import the behavior of owl 1 directly in our
-   * codebase, with one difference: the css is added to the sheet as soon as the
-   * css tag is executed. In owl 1, the css was added as soon as a Component was
-   * created for the first time.
-   */
-  const STYLESHEETS = {};
-  let nextId = 0;
-  /**
-   * CSS tag helper for defining inline stylesheets.  With this, one can simply define
-   * an inline stylesheet with just the following code:
-   * ```js
-   *     css`.component-a { color: red; }`;
-   * ```
-   */
-  function css(strings, ...args) {
-      const name = `__sheet__${nextId++}`;
-      const value = String.raw(strings, ...args);
-      registerSheet(name, value);
-      activateSheet(name);
-      return name;
-  }
-  function processSheet(str) {
-      const tokens = str.split(/(\{|\}|;)/).map((s) => s.trim());
-      const selectorStack = [];
-      const parts = [];
-      let rules = [];
-      function generateSelector(stackIndex, parentSelector) {
-          const parts = [];
-          for (const selector of selectorStack[stackIndex]) {
-              let part = (parentSelector && parentSelector + " " + selector) || selector;
-              if (part.includes("&")) {
-                  part = selector.replace(/&/g, parentSelector || "");
-              }
-              if (stackIndex < selectorStack.length - 1) {
-                  part = generateSelector(stackIndex + 1, part);
-              }
-              parts.push(part);
-          }
-          return parts.join(", ");
-      }
-      function generateRules() {
-          if (rules.length) {
-              parts.push(generateSelector(0) + " {");
-              parts.push(...rules);
-              parts.push("}");
-              rules = [];
-          }
-      }
-      while (tokens.length) {
-          const token = tokens.shift();
-          if (token === "}") {
-              generateRules();
-              selectorStack.pop();
-          }
-          else {
-              if (tokens[0] === "{") {
-                  generateRules();
-                  selectorStack.push(token.split(/\s*,\s*/));
-                  tokens.shift();
-              }
-              if (tokens[0] === ";") {
-                  rules.push("  " + token + ";");
-              }
-          }
-      }
-      return parts.join("\n");
-  }
-  function registerSheet(id, css) {
-      const sheet = document.createElement("style");
-      sheet.textContent = processSheet(css);
-      STYLESHEETS[id] = sheet;
-  }
-  function activateSheet(id) {
-      const sheet = STYLESHEETS[id];
-      sheet.setAttribute("component", id);
-      document.head.appendChild(sheet);
-  }
-  function getTextDecoration({ strikethrough, underline, }) {
-      if (!strikethrough && !underline) {
-          return "none";
-      }
-      return `${strikethrough ? "line-through" : ""} ${underline ? "underline" : ""}`;
-  }
-  /**
-   * Convert the cell style to CSS properties.
-   */
-  function cellStyleToCss(style) {
-      const attributes = cellTextStyleToCss(style);
-      if (!style)
-          return attributes;
-      if (style.fillColor) {
-          attributes["background"] = style.fillColor;
-      }
-      return attributes;
-  }
-  /**
-   * Convert the cell text style to CSS properties.
-   */
-  function cellTextStyleToCss(style) {
-      const attributes = {};
-      if (!style)
-          return attributes;
-      if (style.bold) {
-          attributes["font-weight"] = "bold";
-      }
-      if (style.italic) {
-          attributes["font-style"] = "italic";
-      }
-      if (style.fontSize) {
-          attributes["font-size"] = `${style.fontSize}px`;
-      }
-      if (style.strikethrough || style.underline) {
-          let decoration = style.strikethrough ? "line-through" : "";
-          decoration = style.underline ? decoration + " underline" : decoration;
-          attributes["text-decoration"] = decoration;
-      }
-      if (style.textColor) {
-          attributes["color"] = style.textColor;
-      }
-      return attributes;
-  }
-  /**
-   * Transform CSS properties into a CSS string.
-   */
-  function cssPropertiesToCss(attributes) {
-      let styleStr = "";
-      for (const attName in attributes) {
-          if (!attributes[attName]) {
-              continue;
-          }
-          styleStr += `${attName}:${attributes[attName]}; `;
-      }
-      return styleStr;
-  }
-  function getElementMargins(el) {
-      const style = window.getComputedStyle(el);
-      return {
-          top: parseInt(style.marginTop, 10) || 0,
-          bottom: parseInt(style.marginBottom, 10) || 0,
-          left: parseInt(style.marginLeft, 10) || 0,
-          right: parseInt(style.marginRight, 10) || 0,
-      };
-  }
-
   const chartJsExtensionRegistry = new Registry();
   function areChartJSExtensionsLoaded() {
       return !!window.Chart.registry.plugins.get("chartShowValuesPlugin");
@@ -16083,8 +15896,9 @@ stores.inject(MyMetaStore, storeInstance);
   }
 
   function sortMatrix(matrix, locale, ...criteria) {
-      for (const [i, value] of criteria.entries()) {
-          assert(value !== undefined, _t("Value for parameter %d is missing, while the function [[FUNCTION_NAME]] expect a number or a range.", i + 1));
+      for (let i = 0; i < criteria.length; i++) {
+          const param = i % 2 === 0 ? "sort_column" : "is_ascending";
+          assert(criteria[i] !== undefined, _t("Value for parameter %s is missing in [[FUNCTION_NAME]].", param));
       }
       const sortingOrders = [];
       const sortColumns = [];
@@ -24032,15 +23846,6 @@ stores.inject(MyMetaStore, storeInstance);
       return bars.find((bar, i) => i > startIndex && bar.height !== 0);
   }
 
-  css /* scss */ `
-  .o-spreadsheet {
-    .o-chart-custom-tooltip {
-      font-size: 12px;
-      background-color: #fff;
-      z-index: ${ComponentsImportance.FigureTooltip};
-    }
-  }
-`;
   chartJsExtensionRegistry.add("chartShowValuesPlugin", {
       register: (Chart) => Chart.register(chartShowValuesPlugin),
       unregister: (Chart) => Chart.unregister(chartShowValuesPlugin),
@@ -24538,18 +24343,15 @@ stores.inject(MyMetaStore, storeInstance);
       return {
           title: {
               ...chart.title,
-              // chart titles are extracted from .json files and they are translated at runtime here
-              text: chart.title.text ? _t(chart.title.text) : "",
+              text: chart.title.text ? getters.dynamicTranslate(chart.title.text) : "",
           },
           keyValue: formattedKeyValue,
-          keyDescr: chart.keyDescr?.text
-              ? _t(chart.keyDescr.text) // descriptions are extracted from .json files and they are translated at runtime here
-              : "",
+          keyDescr: chart.keyDescr?.text ? getters.dynamicTranslate(chart.keyDescr.text) : "",
           baselineDisplay,
           baselineArrow: getBaselineArrowDirection(baselineCell, keyValueCell, chart.baselineMode),
           baselineColor: getBaselineColor(baselineCell, chart.baselineMode, keyValueCell, chart.baselineColorUp, chart.baselineColorDown),
           baselineDescr: chart.baselineMode !== "progress" && chart.baselineDescr?.text
-              ? _t(chart.baselineDescr.text) // descriptions are extracted from .json files and they are translated at runtime here
+              ? getters.dynamicTranslate(chart.baselineDescr.text)
               : "",
           fontColor,
           background,
@@ -24849,9 +24651,8 @@ stores.inject(MyMetaStore, storeInstance);
           return this.env.model.getters.getChartRuntime(this.props.chartId);
       }
       get title() {
-          const title = this.env.model.getters.getChartDefinition(this.props.chartId).title.text ?? "";
-          // chart titles are extracted from .json files and they are translated at runtime here
-          return _t(title);
+          const title = this.env.model.getters.getChartDefinition(this.props.chartId).title.text;
+          return title ? this.env.model.getters.dynamicTranslate(title) : "";
       }
       setup() {
           owl.useEffect(this.createChart.bind(this), () => {
@@ -27024,12 +26825,12 @@ stores.inject(MyMetaStore, storeInstance);
       return axisId || "y";
   }
 
-  function getChartTitle(definition) {
+  function getChartTitle(definition, getters) {
       const chartTitle = definition.title;
       const fontColor = chartMutedFontColor(definition.background);
       return {
           display: !!chartTitle.text,
-          text: _t(chartTitle.text),
+          text: chartTitle.text ? getters.dynamicTranslate(chartTitle.text) : "",
           color: chartTitle?.color ?? fontColor,
           align: chartTitle.align === "center" ? "center" : chartTitle.align === "right" ? "end" : "start",
           font: {
@@ -27597,7 +27398,7 @@ stores.inject(MyMetaStore, storeInstance);
               layout: getChartLayout(definition, chartData),
               scales: getBarChartScales(definition, chartData),
               plugins: {
-                  title: getChartTitle(definition),
+                  title: getChartTitle(definition, getters),
                   legend: getBarChartLegend(definition),
                   tooltip: getBarChartTooltip(definition, chartData),
                   chartShowValuesPlugin: getChartShowValues(definition, chartData),
@@ -27784,13 +27585,6 @@ stores.inject(MyMetaStore, storeInstance);
       },
   };
 
-  css /* scss */ `
-  .o-spreadsheet {
-    .o-master-chart-container {
-      height: ${MASTER_CHART_HEIGHT}px;
-    }
-  }
-`;
   chartJsExtensionRegistry.add("zoomWindowPlugin", {
       register: (Chart) => Chart.register(zoomWindowPlugin),
       unregister: (Chart) => Chart.unregister(zoomWindowPlugin),
@@ -28828,7 +28622,7 @@ stores.inject(MyMetaStore, storeInstance);
               layout: getChartLayout(definition, chartData),
               scales: getBarChartScales(definition, chartData),
               plugins: {
-                  title: getChartTitle(definition),
+                  title: getChartTitle(definition, getters),
                   legend: getComboChartLegend(definition),
                   tooltip: getBarChartTooltip(definition, chartData),
                   chartShowValuesPlugin: getChartShowValues(definition, chartData),
@@ -28974,7 +28768,7 @@ stores.inject(MyMetaStore, storeInstance);
               layout: getChartLayout(definition, chartData),
               scales: getFunnelChartScales(definition, chartData),
               plugins: {
-                  title: getChartTitle(definition),
+                  title: getChartTitle(definition, getters),
                   legend: { display: false },
                   tooltip: getFunnelChartTooltip(definition, chartData),
                   chartShowValuesPlugin: getChartShowValues(definition, chartData),
@@ -29211,8 +29005,7 @@ stores.inject(MyMetaStore, storeInstance);
           background: getters.getStyleOfSingleCellChart(chart.background, dataRange).background,
           title: {
               ...chart.title,
-              // chart titles are extracted from .json files and they are translated at runtime here
-              text: _t(chart.title.text ?? ""),
+              text: chart.title.text ? getters.dynamicTranslate(chart.title.text) : "",
           },
           minValue: {
               value: minValue,
@@ -29396,7 +29189,7 @@ stores.inject(MyMetaStore, storeInstance);
               layout: getChartLayout(definition, chartData),
               scales: getGeoChartScales(definition, chartData),
               plugins: {
-                  title: getChartTitle(definition),
+                  title: getChartTitle(definition, getters),
                   tooltip: getGeoChartTooltip(definition, chartData),
                   legend: { display: false },
               },
@@ -29561,7 +29354,7 @@ stores.inject(MyMetaStore, storeInstance);
               layout: getChartLayout(definition, chartData),
               scales: getLineChartScales(definition, chartData),
               plugins: {
-                  title: getChartTitle(definition),
+                  title: getChartTitle(definition, getters),
                   legend: getLineChartLegend(definition),
                   tooltip: getLineChartTooltip(definition, chartData),
                   chartShowValuesPlugin: getChartShowValues(definition, chartData),
@@ -29698,7 +29491,7 @@ stores.inject(MyMetaStore, storeInstance);
                   : undefined,
               layout: getChartLayout(definition, chartData),
               plugins: {
-                  title: getChartTitle(definition),
+                  title: getChartTitle(definition, getters),
                   legend: getPieChartLegend(definition, chartData),
                   tooltip: getPieChartTooltip(definition, chartData),
                   chartShowValuesPlugin: getChartShowValues(definition, chartData),
@@ -29852,7 +29645,7 @@ stores.inject(MyMetaStore, storeInstance);
               layout: getChartLayout(definition, chartData),
               scales: getPyramidChartScales(definition, chartData),
               plugins: {
-                  title: getChartTitle(definition),
+                  title: getChartTitle(definition, getters),
                   legend: getBarChartLegend(definition),
                   tooltip: getPyramidChartTooltip(definition, chartData),
                   chartShowValuesPlugin: getPyramidChartShowValues(definition, chartData),
@@ -30001,7 +29794,7 @@ stores.inject(MyMetaStore, storeInstance);
               layout: getChartLayout(definition, chartData),
               scales: getRadarChartScales(definition, chartData),
               plugins: {
-                  title: getChartTitle(definition),
+                  title: getChartTitle(definition, getters),
                   legend: getRadarChartLegend(definition),
                   tooltip: getRadarChartTooltip(definition, chartData),
                   chartShowValuesPlugin: getChartShowValues(definition, chartData),
@@ -30156,7 +29949,7 @@ stores.inject(MyMetaStore, storeInstance);
               layout: getChartLayout(definition, chartData),
               scales: getScatterChartScales(definition, chartData),
               plugins: {
-                  title: getChartTitle(definition),
+                  title: getChartTitle(definition, getters),
                   legend: getScatterChartLegend(definition),
                   tooltip: getLineChartTooltip(definition, chartData),
                   chartShowValuesPlugin: getChartShowValues(definition, chartData),
@@ -30295,7 +30088,7 @@ stores.inject(MyMetaStore, storeInstance);
               ...CHART_COMMON_OPTIONS,
               layout: getChartLayout(definition, chartData),
               plugins: {
-                  title: getChartTitle(definition),
+                  title: getChartTitle(definition, getters),
                   legend: getSunburstChartLegend(definition),
                   tooltip: getSunburstChartTooltip(definition, chartData),
                   sunburstLabelsPlugin: getSunburstShowValues(definition, chartData),
@@ -30445,7 +30238,7 @@ stores.inject(MyMetaStore, storeInstance);
               ...CHART_COMMON_OPTIONS,
               layout: getChartLayout(definition, chartData),
               plugins: {
-                  title: getChartTitle(definition),
+                  title: getChartTitle(definition, getters),
                   legend: { display: false },
                   tooltip: getTreeMapChartTooltip(definition, chartData),
               },
@@ -30608,7 +30401,7 @@ stores.inject(MyMetaStore, storeInstance);
               layout: getChartLayout(definition, chartData),
               scales: getWaterfallChartScales(definition, chartData),
               plugins: {
-                  title: getChartTitle(definition),
+                  title: getChartTitle(definition, getters),
                   legend: getWaterfallChartLegend(definition),
                   tooltip: getWaterfallChartTooltip(definition, chartData),
                   chartShowValuesPlugin: getWaterfallChartShowValues(definition, chartData),
@@ -31602,6 +31395,81 @@ stores.inject(MyMetaStore, storeInstance);
       return matchedChart.displayName;
   }
 
+  /**
+   * This file is largely inspired by owl 1.
+   * `css` tag has been removed from owl 2 without workaround to manage css.
+   * So, the solution was to import the behavior of owl 1 directly in our
+   * codebase, with one difference: the css is added to the sheet as soon as the
+   * css tag is executed. In owl 1, the css was added as soon as a Component was
+   * created for the first time.
+   */
+  function getTextDecoration({ strikethrough, underline, }) {
+      if (!strikethrough && !underline) {
+          return "none";
+      }
+      return `${strikethrough ? "line-through" : ""} ${underline ? "underline" : ""}`;
+  }
+  /**
+   * Convert the cell style to CSS properties.
+   */
+  function cellStyleToCss(style) {
+      const attributes = cellTextStyleToCss(style);
+      if (!style)
+          return attributes;
+      if (style.fillColor) {
+          attributes["background"] = style.fillColor;
+      }
+      return attributes;
+  }
+  /**
+   * Convert the cell text style to CSS properties.
+   */
+  function cellTextStyleToCss(style) {
+      const attributes = {};
+      if (!style)
+          return attributes;
+      if (style.bold) {
+          attributes["font-weight"] = "bold";
+      }
+      if (style.italic) {
+          attributes["font-style"] = "italic";
+      }
+      if (style.fontSize) {
+          attributes["font-size"] = `${style.fontSize}px`;
+      }
+      if (style.strikethrough || style.underline) {
+          let decoration = style.strikethrough ? "line-through" : "";
+          decoration = style.underline ? decoration + " underline" : decoration;
+          attributes["text-decoration"] = decoration;
+      }
+      if (style.textColor) {
+          attributes["color"] = style.textColor;
+      }
+      return attributes;
+  }
+  /**
+   * Transform CSS properties into a CSS string.
+   */
+  function cssPropertiesToCss(attributes) {
+      let styleStr = "";
+      for (const attName in attributes) {
+          if (!attributes[attName]) {
+              continue;
+          }
+          styleStr += `${attName}:${attributes[attName]}; `;
+      }
+      return styleStr;
+  }
+  function getElementMargins(el) {
+      const style = window.getComputedStyle(el);
+      return {
+          top: parseInt(style.marginTop, 10) || 0,
+          bottom: parseInt(style.marginBottom, 10) || 0,
+          left: parseInt(style.marginLeft, 10) || 0,
+          right: parseInt(style.marginRight, 10) || 0,
+      };
+  }
+
   /**
    * Repeatedly calls a callback function with a time delay between calls.
    */
@@ -31656,59 +31524,6 @@ stores.inject(MyMetaStore, storeInstance);
       };
   }
 
-  //------------------------------------------------------------------------------
-  // Context Menu Component
-  //------------------------------------------------------------------------------
-  css /* scss */ `
-  .o-menu {
-    background-color: white;
-    user-select: none;
-
-    .o-menu-item {
-      height: ${DESKTOP_MENU_ITEM_HEIGHT}px;
-      padding: ${MENU_ITEM_PADDING_VERTICAL}px ${MENU_ITEM_PADDING_HORIZONTAL}px;
-      cursor: pointer;
-      user-select: none;
-
-      .o-menu-item-name {
-        min-width: 40%;
-      }
-
-      .o-menu-item-icon {
-        display: inline-block;
-        margin: 0px 8px 0px 0px;
-        width: ${DESKTOP_MENU_ITEM_HEIGHT - 2 * MENU_ITEM_PADDING_VERTICAL}px;
-        line-height: ${DESKTOP_MENU_ITEM_HEIGHT - 2 * MENU_ITEM_PADDING_VERTICAL}px;
-      }
-
-      &:not(.disabled) {
-        &:hover,
-        &.o-menu-item-active {
-          background-color: ${BUTTON_ACTIVE_BG};
-          color: ${BUTTON_ACTIVE_TEXT_COLOR};
-        }
-        .o-menu-item-description {
-          color: grey;
-        }
-        .o-menu-item-icon {
-          .o-icon {
-            color: ${ICONS_COLOR};
-          }
-        }
-      }
-      &.disabled {
-        color: ${DISABLED_TEXT_COLOR};
-        cursor: not-allowed;
-      }
-    }
-  }
-
-  .o-spreadsheet-mobile {
-    .o-menu-item {
-      height: ${MOBILE_MENU_ITEM_HEIGHT}px;
-    }
-  }
-`;
   class Menu extends owl.Component {
       static template = "o-spreadsheet-Menu";
       static props = {
@@ -31885,16 +31700,6 @@ stores.inject(MyMetaStore, storeInstance);
       return container;
   }
 
-  css /* scss */ `
-  .o-popover {
-    position: absolute;
-    z-index: ${ComponentsImportance.Popover};
-    overflow: auto;
-    box-shadow: 1px 2px 5px 2px rgb(51 51 51 / 15%);
-    width: fit-content;
-    height: fit-content;
-  }
-`;
   class Popover extends owl.Component {
       static template = "o-spreadsheet-Popover";
       static props = {
@@ -31917,7 +31722,6 @@ stores.inject(MyMetaStore, storeInstance);
           onMouseWheel: () => { },
           onPopoverMoved: () => { },
           onPopoverHidden: () => { },
-          zIndex: ComponentsImportance.Popover,
       };
       popoverRef = owl.useRef("popover");
       popoverContentRef = owl.useRef("popoverContent");
@@ -31938,11 +31742,6 @@ stores.inject(MyMetaStore, storeInstance);
           // the element in rendered, so we can still set its position
           owl.useEffect(this.computePopoverPosition.bind(this));
       }
-      get popoverStyle() {
-          return cssPropertiesToCss({
-              "z-index": `${this.props.zIndex}`,
-          });
-      }
       computePopoverPosition() {
           if (!this.containerRect)
               throw new Error("Popover container is not defined");
@@ -32133,12 +31932,6 @@ stores.inject(MyMetaStore, storeInstance);
   //------------------------------------------------------------------------------
   // Context MenuPopover Component
   //------------------------------------------------------------------------------
-  css /* scss */ `
-  .o-menu-wrapper {
-    padding: ${MENU_VERTICAL_PADDING}px 0px;
-    background-color: white;
-  }
-`;
   const TIMEOUT_DELAY = 250;
   class MenuPopover extends owl.Component {
       static template = "o-spreadsheet-Menu-Popover";
@@ -32384,7 +32177,11 @@ stores.inject(MyMetaStore, storeInstance);
           onFigureDeleted: Function,
           editFigureStyle: { type: Function, optional: true },
       };
-      static components = { ChartDashboardMenu };
+      static components = { ChartDashboardMenu, MenuPopover };
+      carouselTabsRef = owl.useRef("carouselTabs");
+      carouselTabsDropdownRef = owl.useRef("carouselTabsDropdown");
+      menuState = owl.useState({ isOpen: false, anchorRect: null, menuItems: [] });
+      hiddenItems = [];
       animationStore;
       setup() {
           this.animationStore = useStore(ChartAnimationStore);
@@ -32395,6 +32192,7 @@ stores.inject(MyMetaStore, storeInstance);
               else {
                   this.props.editFigureStyle?.({ "pointer-events": "auto" });
               }
+              this.updateTabsVisibility();
           });
       }
       get carousel() {
@@ -32454,6 +32252,49 @@ stores.inject(MyMetaStore, storeInstance);
           const style = { ...DEFAULT_CAROUSEL_TITLE_STYLE, ...this.carousel.title };
           return cssPropertiesToCss(cellTextStyleToCss(chartStyleToCellStyle(style)));
       }
+      updateTabsVisibility() {
+          const tabsContainerEl = this.carouselTabsRef.el;
+          const dropDownEl = this.carouselTabsDropdownRef.el;
+          if (!tabsContainerEl || !dropDownEl) {
+              return;
+          }
+          this.hiddenItems = [];
+          const containerRect = getBoundingRectAsPOJO(tabsContainerEl);
+          const tabs = Array.from(tabsContainerEl.children);
+          for (const tab of tabs) {
+              tab.style.display = "block";
+          }
+          const tabWidths = tabs.map((tab) => getBoundingRectAsPOJO(tab).width);
+          let currentWidth = 0;
+          for (let i = 0; i < tabs.length; i++) {
+              const shouldBeHidden = currentWidth + tabWidths[i] > containerRect.width;
+              currentWidth += tabWidths[i];
+              if (shouldBeHidden) {
+                  tabs[i].style.display = "none";
+                  this.hiddenItems.push(this.carousel.items[i]);
+              }
+          }
+          dropDownEl.style.display = this.hiddenItems.length ? "block" : "none";
+      }
+      get menuId() {
+          return "carousel-tabs-menu-";
+      }
+      toggleMenu(ev) {
+          if (ev.closedMenuId === this.menuId) {
+              this.menuState.isOpen = false;
+              return;
+          }
+          const rect = getRefBoundingRect(this.carouselTabsDropdownRef);
+          const menuItems = this.hiddenItems.map((item) => ({
+              name: this.getItemTitle(item),
+              execute: () => this.onCarouselTabClick(item),
+              isActive: () => this.isItemSelected(item),
+              isReadonlyAllowed: true,
+          }));
+          this.menuState.isOpen = true;
+          this.menuState.anchorRect = rect;
+          this.menuState.menuItems = createActions(menuItems);
+      }
   }
 
   class ChartFigure extends owl.Component {
@@ -32531,79 +32372,6 @@ stores.inject(MyMetaStore, storeInstance);
   const ANCHOR_SIZE = 8;
   const BORDER_WIDTH = 1;
   const ACTIVE_BORDER_WIDTH = 2;
-  css /*SCSS*/ `
-  div.o-figure {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    user-select: none;
-
-    &:focus {
-      outline: none;
-    }
-  }
-
-  div.o-figure-border {
-    z-index: 1;
-  }
-
-  .o-figure-wrapper {
-    position: absolute;
-    box-sizing: content-box;
-    pointer-events: auto;
-
-    .o-fig-anchor {
-      z-index: ${ComponentsImportance.FigureAnchor};
-      position: absolute;
-      width: ${ANCHOR_SIZE}px;
-      height: ${ANCHOR_SIZE}px;
-      background-color: #1a73e8;
-      outline: ${BORDER_WIDTH}px solid white;
-
-      &.o-top {
-        cursor: n-resize;
-      }
-      &.o-topRight {
-        cursor: ne-resize;
-      }
-      &.o-right {
-        cursor: e-resize;
-      }
-      &.o-bottomRight {
-        cursor: se-resize;
-      }
-      &.o-bottom {
-        cursor: s-resize;
-      }
-      &.o-bottomLeft {
-        cursor: sw-resize;
-      }
-      &.o-left {
-        cursor: w-resize;
-      }
-      &.o-topLeft {
-        cursor: nw-resize;
-      }
-    }
-
-    .o-figure-menu {
-      right: 0px;
-      top: 0px;
-      display: none;
-    }
-
-    .o-figure-menu-item {
-      cursor: pointer;
-    }
-
-    .o-figure.active:focus,
-    .o-figure:hover {
-      .o-figure-menu {
-        display: flex;
-      }
-    }
-  }
-`;
   class FigureComponent extends owl.Component {
       static template = "o-spreadsheet-FigureComponent";
       static props = {
@@ -32648,7 +32416,6 @@ stores.inject(MyMetaStore, storeInstance);
               top: `${y}px`,
               width: `${width}px`,
               height: `${height}px`,
-              "z-index": String(ComponentsImportance.Figure + (this.isSelected ? 1 : 0)),
           });
       }
       getResizerPosition(resizer) {
@@ -32927,21 +32694,6 @@ stores.inject(MyMetaStore, storeInstance);
   }
 
   const ERROR_TOOLTIP_MAX_HEIGHT = 80;
-  const ERROR_TOOLTIP_WIDTH = 180;
-  css /* scss */ `
-  .o-error-tooltip {
-    font-size: 13px;
-    background-color: white;
-    border-left: 3px solid red;
-    padding: 10px;
-    width: ${ERROR_TOOLTIP_WIDTH}px;
-    overflow-wrap: break-word;
-
-    .o-error-tooltip-message {
-      overflow: hidden;
-    }
-  }
-`;
   class ErrorToolTip extends owl.Component {
       static maxSize = { maxHeight: ERROR_TOOLTIP_MAX_HEIGHT };
       static template = "o-spreadsheet-ErrorToolTip";
@@ -33042,34 +32794,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  css /* scss */ `
-  .o_side_panel_collapsible_title {
-    font-size: 16px;
-    cursor: pointer;
-    padding: 6px 0px 6px 6px !important;
-
-    .collapsor-arrow {
-      transform: rotate(-90deg);
-      display: inline-block;
-      transform-origin: 8px 11px;
-      transition: transform 0.2s ease-in-out;
-
-      .o-icon {
-        width: 16px;
-        height: 22px;
-      }
-    }
-    .collapsor:not(.collapsed) .collapsor-arrow {
-      transform: rotate(0);
-    }
-
-    .collapsor {
-      width: 100%;
-      transition-delay: 0.35s;
-      transition-property: all;
-    }
-  }
-`;
   class SidePanelCollapsible extends owl.Component {
       static template = "o-spreadsheet-SidePanelCollapsible";
       static props = {
@@ -33706,27 +33430,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  css /* scss */ `
-  .o-autocomplete-dropdown {
-    pointer-events: auto;
-    cursor: pointer;
-    background-color: #fff;
-    max-width: 400px;
-    z-index: 1;
-
-    .o-autocomplete-value-focus {
-      background-color: #f2f2f2;
-    }
-
-    & > div {
-      padding: 1px 5px 5px 5px;
-      .o-autocomplete-description {
-        padding-left: 5px;
-        font-size: 11px;
-      }
-    }
-  }
-`;
   class TextValueProvider extends owl.Component {
       static template = "o-spreadsheet-TextValueProvider";
       static props = {
@@ -34028,36 +33731,6 @@ stores.inject(MyMetaStore, storeInstance);
   }
 
   const BUBBLE_ARROW_SIZE = 7;
-  css /* scss */ `
-  .o-spreadsheet {
-    .o-speech-bubble {
-      background-color: white;
-      box-sizing: border-box;
-      box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.15);
-      border: 1px solid #ccc;
-      z-index: ${ComponentsImportance.Popover};
-
-      &::after {
-        content: "";
-        position: absolute;
-        top: 100%;
-        left: 50%;
-        background-color: white;
-        height: ${BUBBLE_ARROW_SIZE}px;
-        width: ${BUBBLE_ARROW_SIZE}px;
-        transform-origin: top left;
-        transform: translate(0, -67%) rotate(45deg);
-        border-right: 1px solid #ccc;
-        border-bottom: 1px solid #ccc;
-        box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.15);
-      }
-    }
-
-    .o-speech-content {
-      max-width: 300px;
-    }
-  }
-`;
   class SpeechBubble extends owl.Component {
       static template = "o-spreadsheet-SpeechBubble";
       static props = { content: String, anchorRect: Object };
@@ -34086,85 +33759,6 @@ stores.inject(MyMetaStore, storeInstance);
   const selectionIndicatorClass = "selector-flag";
   const highlightParenthesisClass = "highlight-parenthesis-flag";
   const highlightClass = "highlight-flag";
-  const selectionIndicatorColor = "#a9a9a9";
-  const selectionIndicator = "␣";
-  css /* scss */ `
-  .o-composer-container {
-    .o-composer {
-      overflow-y: auto;
-      overflow-x: hidden;
-      word-break: break-all;
-      padding-right: 2px;
-
-      caret-color: black;
-      padding-left: 3px;
-      padding-right: 3px;
-      outline: none;
-
-      tab-size: 4;
-
-      p {
-        margin-bottom: 0px;
-
-        span {
-          white-space: pre-wrap;
-          /* On some browsers (chromium ?) it is somehow possible to hover two of the composer's spans at the same time, leading to
-           * flickering with a succession of onmouseenter/onmouseleave events. A small invisible padding seems to prevent the issue.*/
-          padding-left: 0.01px;
-
-          &.${selectionIndicatorClass}:after {
-            content: "${selectionIndicator}";
-            color: ${selectionIndicatorColor};
-          }
-
-          &.${highlightParenthesisClass}:not(.${highlightClass}) {
-            border-radius: 5px;
-            background-color: lightgray;
-            padding: 1.5px 0px 1.5px 0px;
-          }
-
-          &.${highlightClass} {
-            background-color: #e6edf3;
-          }
-        }
-      }
-    }
-    .o-composer[placeholder]:empty:not(:focus):not(.active)::before {
-      content: attr(placeholder);
-      color: #bdbdbd;
-      position: relative;
-      top: 0%;
-      pointer-events: none;
-    }
-
-    .fa-stack {
-      /* reset stack size which is doubled by default */
-      width: ${CLOSE_ICON_RADIUS * 2}px;
-      height: ${CLOSE_ICON_RADIUS * 2}px;
-      line-height: ${CLOSE_ICON_RADIUS * 2}px;
-    }
-
-    .force-open-assistant {
-      left: -1px;
-      top: -1px;
-
-      .fa-question-circle {
-        color: ${PRIMARY_BUTTON_BG};
-      }
-    }
-
-    .o-composer-assistant {
-      margin-top: 1px;
-
-      .o-semi-bold {
-        /* FIXME: to remove in favor of Bootstrap
-        * 'fw-semibold' when we upgrade to Bootstrap 5.2
-        */
-        font-weight: 600 !important;
-      }
-    }
-  }
-`;
   class Composer extends owl.Component {
       static template = "o-spreadsheet-Composer";
       static props = {
@@ -35837,30 +35431,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  css /* scss */ `
-  .o-spreadsheet {
-    .o-standalone-composer {
-      min-height: 24px;
-
-      border-bottom: 1px solid;
-      border-color: ${GRAY_300};
-
-      &.active {
-        border-color: ${ACTION_COLOR};
-      }
-
-      &.o-invalid {
-        border-bottom: 2px solid red;
-      }
-
-      /* As the standalone composer is potentially very small (eg. in a side panel), we remove the scrollbar display */
-      scrollbar-width: none; /* Firefox */
-      &::-webkit-scrollbar {
-        display: none;
-      }
-    }
-  }
-`;
   class StandaloneComposer extends owl.Component {
       static template = "o-spreadsheet-StandaloneComposer";
       static props = {
@@ -35928,17 +35498,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  css /* scss */ `
-  .o-dv-input {
-    &.o-invalid {
-      background-color: #ffdddd;
-    }
-    .error-icon {
-      right: 7px;
-      top: 7px;
-    }
-  }
-`;
   class CriterionInput extends owl.Component {
       static template = "o-spreadsheet-CriterionInput";
       static props = {
@@ -36106,8 +35665,6 @@ stores.inject(MyMetaStore, storeInstance);
       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;
@@ -36116,170 +35673,6 @@ stores.inject(MyMetaStore, storeInstance);
   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 = {
@@ -36434,21 +35827,12 @@ 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)}");
-  }
-`;
+  // FIXME Encoding version used in css
+  // const TRANSPARENT_BACKGROUND_SVG = /*xml*/ `
+  // <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10">
+  //   <path fill="#d9d9d9" d="M5 5h5v5H5zH0V0h5"/>
+  // </svg>
+  // `;
   class RoundColorPicker extends owl.Component {
       static template = "o-spreadsheet.RoundColorPicker";
       static components = { Section, ColorPicker };
@@ -36485,12 +35869,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  css /* scss */ `
-  .o-dv-list-item-delete {
-    color: #666666;
-    cursor: pointer;
-  }
-`;
   class ListCriterionForm extends CriterionForm {
       static template = "o-spreadsheet-ListCriterionForm";
       static components = { CriterionInput, RoundColorPicker };
@@ -37204,36 +36582,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  css /* scss */ `
-  .o-selection {
-    .o-selection-input {
-      padding: 2px 0px;
-
-      input.o-invalid {
-        background-color: ${ALERT_DANGER_BG};
-      }
-      .input-icon {
-        right: 7px;
-        top: 4px;
-      }
-      .o-drag-handle {
-        cursor: move;
-      }
-    }
-    .o-disabled-ranges {
-      color: #888 !important;
-    }
-    .o-button {
-      flex-grow: 0;
-    }
-
-    /* Make the character a bit bigger
-    compared to its neighbor INPUT box  */
-    .o-remove-selection {
-      font-size: calc(100% + 4px);
-    }
-  }
-`;
   /**
    * This component can be used when the user needs to input some
    * ranges. He can either input the ranges with the regular DOM `<input/>`
@@ -37732,44 +37080,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  const CHECK_SVG = /*xml*/ `
-<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
-  <path fill='none' stroke='#FFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/>
-</svg>
-`;
-  const CHECKBOX_WIDTH = 14;
-  css /* scss */ `
-  label.o-checkbox {
-    input {
-      appearance: none;
-      -webkit-appearance: none;
-      -moz-appearance: none;
-      border-radius: 0;
-      width: ${CHECKBOX_WIDTH}px;
-      height: ${CHECKBOX_WIDTH}px;
-      vertical-align: top;
-      outline: none;
-      border: 1px solid ${GRAY_300};
-      cursor: pointer;
-
-      &:hover {
-        border-color: ${ACTION_COLOR};
-      }
-
-      &:checked {
-        background: url("data:image/svg+xml,${encodeURIComponent(CHECK_SVG)}");
-        background-color: ${ACTION_COLOR};
-        border-color: ${ACTION_COLOR};
-      }
-
-      &:focus {
-        outline: none;
-        box-shadow: 0 0 0 0.25rem rgba(113, 75, 103, 0.25);
-        border-color: ${ACTION_COLOR};
-      }
-    }
-  }
-`;
   class Checkbox extends owl.Component {
       static template = "o-spreadsheet.Checkbox";
       static props = {
@@ -37977,60 +37287,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  css /* scss */ `
-  .o-filter-menu {
-    width: 245px;
-    padding: 8px 0;
-    user-select: none;
-
-    .o-filter-menu-content {
-      padding: 0 16px;
-    }
-
-    .o-sort-item {
-      padding-left: 34px;
-    }
-
-    .o_side_panel_collapsible_title {
-      font-size: inherit;
-      padding: 0 0 4px 0 !important;
-      font-weight: 400 !important;
-
-      .collapsor .o-icon {
-        opacity: 0.8;
-      }
-
-      .collapsor-arrow {
-        transform-origin: 6px 8px;
-
-        .o-icon {
-          width: 12px;
-          height: 16px;
-        }
-      }
-    }
-
-    .o-filter-menu-item {
-      display: flex;
-      cursor: pointer;
-      user-select: none;
-      line-height: 1;
-
-      &.selected,
-      &:hover {
-        background-color: ${BUTTON_ACTIVE_BG};
-      }
-    }
-
-    .o-filter-menu-buttons {
-      margin-top: 9px;
-
-      .o-button {
-        height: 26px;
-      }
-    }
-  }
-`;
   class FilterMenu extends owl.Component {
       static template = "o-spreadsheet-FilterMenu";
       static props = {
@@ -38154,55 +37410,6 @@ stores.inject(MyMetaStore, storeInstance);
       },
   };
 
-  const LINK_TOOLTIP_HEIGHT = 32;
-  const LINK_TOOLTIP_WIDTH = 220;
-  css /* scss */ `
-  .o-link-tool {
-    font-size: 13px;
-    background-color: white;
-    box-shadow: 0 1px 4px 3px rgba(60, 64, 67, 0.15);
-    padding: 6px 12px;
-    border-radius: 4px;
-    display: flex;
-    justify-content: space-between;
-    height: ${LINK_TOOLTIP_HEIGHT}px;
-    width: ${LINK_TOOLTIP_WIDTH}px;
-
-    img {
-      margin-right: 3px;
-      width: 16px;
-      height: 16px;
-    }
-
-    a.o-link {
-      color: ${LINK_COLOR};
-      text-decoration: none;
-      flex-grow: 2;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-    a.o-link:hover {
-      text-decoration: none;
-      color: #001d1f;
-      cursor: pointer;
-    }
-  }
-  .o-link-icon {
-    float: right;
-    padding-left: 5px;
-    .o-icon {
-      height: 16px;
-    }
-  }
-  .o-link-icon .o-icon {
-    height: 13px;
-  }
-  .o-link-icon:hover {
-    cursor: pointer;
-    color: #000;
-  }
-`;
   class LinkDisplay extends owl.Component {
       static template = "o-spreadsheet-LinkDisplay";
       static props = {
@@ -38433,54 +37640,6 @@ stores.inject(MyMetaStore, storeInstance);
       sequence: 10,
   });
 
-  const PADDING = 12;
-  const LINK_EDITOR_WIDTH = 340 + 2 * PADDING;
-  css /* scss */ `
-  .o-link-editor {
-    font-size: 13px;
-    background-color: white;
-    box-shadow: 0 1px 4px 3px rgba(60, 64, 67, 0.15);
-    padding: ${PADDING}px;
-    display: flex;
-    flex-direction: column;
-    border-radius: 4px;
-    width: ${LINK_EDITOR_WIDTH}px;
-
-    .o-section {
-      .o-section-title {
-        font-weight: bold;
-        margin-bottom: 5px;
-      }
-    }
-    .o-buttons {
-      padding-left: 16px;
-      padding-top: 16px;
-      text-align: right;
-    }
-    input.o-input {
-      width: 100%;
-      padding: 0 23px 4px 0;
-    }
-    .o-link-url {
-      position: relative;
-      flex-grow: 1;
-      button {
-        position: absolute;
-        right: 0px;
-        top: 0px;
-        border: none;
-        height: 20px;
-        width: 20px;
-        background-color: #fff;
-        margin: 2px 3px 1px 0px;
-        padding: 0px 1px 0px 0px;
-      }
-      button:hover {
-        cursor: pointer;
-      }
-    }
-  }
-`;
   class LinkEditor extends owl.Component {
       static template = "o-spreadsheet-LinkEditor";
       static props = {
@@ -39208,29 +38367,6 @@ stores.inject(MyMetaStore, storeInstance);
       };
   }
 
-  css /* scss */ `
-  .o-spreadsheet {
-    .o-icon {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: ${ICON_EDGE_LENGTH}px;
-      height: ${ICON_EDGE_LENGTH}px;
-      font-size: ${ICON_EDGE_LENGTH}px;
-      vertical-align: middle;
-
-      .small-text {
-        font: bold 9px sans-serif;
-      }
-      .heavy-text {
-        font: bold 16px sans-serif;
-      }
-    }
-    .fa-small {
-      font-size: 14px;
-    }
-  }
-`;
   // -----------------------------------------------------------------------------
   // We need here the svg of the icons that we need to convert to images for the renderer
   // -----------------------------------------------------------------------------
@@ -39327,6 +38463,14 @@ stores.inject(MyMetaStore, storeInstance);
           paths: [{ fillColor: color.textColor || TEXT_BODY_MUTED, path: "M120 195 h270 l-135 130" }],
       };
   }
+  function getCaretUpSvg(color) {
+      return {
+          name: "CARET_UP",
+          width: 512,
+          height: 512,
+          paths: [{ fillColor: color.textColor || TEXT_BODY_MUTED, path: "M120 325 h270 l-135 -130" }],
+      };
+  }
   function getHoveredCaretDownSvg(color) {
       return {
           name: "CARET_DOWN",
@@ -49096,37 +48240,6 @@ stores.inject(MyMetaStore, storeInstance);
       return index;
   }
 
-  // -----------------------------------------------------------------------------
-  // Autofill
-  // -----------------------------------------------------------------------------
-  css /* scss */ `
-  .o-autofill {
-    position: absolute;
-    height: ${AUTOFILL_EDGE_LENGTH}px;
-    width: ${AUTOFILL_EDGE_LENGTH}px;
-    border: 1px solid white;
-    background-color: #1a73e8;
-  }
-
-  .o-autofill-handler {
-    position: absolute;
-    height: ${AUTOFILL_EDGE_LENGTH}px;
-    width: ${AUTOFILL_EDGE_LENGTH}px;
-    &:hover {
-      cursor: crosshair;
-    }
-  }
-
-  .o-autofill-nextvalue {
-    position: absolute;
-    background-color: #ffffff;
-    border: 1px solid black;
-    padding: 5px;
-    font-size: 12px;
-    pointer-events: none;
-    white-space: nowrap;
-  }
-`;
   class Autofill extends owl.Component {
       static template = "o-spreadsheet-Autofill";
       static props = {
@@ -49211,16 +48324,6 @@ stores.inject(MyMetaStore, storeInstance);
   `;
   }
 
-  css /* scss */ `
-  .o-client-tag {
-    position: absolute;
-    border-top-left-radius: 4px;
-    border-top-right-radius: 4px;
-    font-size: ${DEFAULT_FONT_SIZE};
-    color: white;
-    pointer-events: none;
-  }
-`;
   class ClientTag extends owl.Component {
       static template = "o-spreadsheet-ClientTag";
       static props = {
@@ -49770,28 +48873,6 @@ stores.inject(MyMetaStore, storeInstance);
 
   const COMPOSER_BORDER_WIDTH = 3 * 0.4 * window.devicePixelRatio || 1;
   const GRID_CELL_REFERENCE_TOP_OFFSET = 28;
-  css /* scss */ `
-  div.o-grid-composer {
-    z-index: ${ComponentsImportance.GridComposer};
-    position: absolute;
-    border: ${COMPOSER_BORDER_WIDTH}px solid ${SELECTION_BORDER_COLOR};
-    font-family: ${DEFAULT_FONT};
-
-    display: flex;
-    align-items: center;
-  }
-
-  div.o-cell-reference {
-    position: absolute;
-    z-index: ${ComponentsImportance.GridComposer};
-    background: ${SELECTION_BORDER_COLOR};
-    color: white;
-    font-size: 12px;
-    line-height: 14px;
-    padding: 6px 7px;
-    border-radius: 4px;
-  }
-`;
   /**
    * This component is a composer which positions itself on the grid at the anchor cell.
    * It also applies the style of the cell to the composer input.
@@ -49917,6 +48998,7 @@ stores.inject(MyMetaStore, storeInstance);
           return cssPropertiesToCss({
               left: `${left - 1}px`,
               top: `${top}px`,
+              border: `${COMPOSER_BORDER_WIDTH}px solid ${SELECTION_BORDER_COLOR}`,
               "min-width": `${minWidth}px`,
               "min-height": `${minHeight}px`,
               "max-width": `${maxWidth}px`,
@@ -50187,24 +49269,6 @@ stores.inject(MyMetaStore, storeInstance);
       return { position, axisType: axisType };
   }
 
-  css /*SCSS*/ `
-  .o-figure-snap-line {
-    position: relative;
-    z-index: ${ComponentsImportance.FigureSnapLine};
-    &.vertical {
-      width: 0px;
-      border-left: 1px dashed black;
-    }
-    &.horizontal {
-      border-top: 1px dashed black;
-      height: 0px;
-    }
-  }
-  .o-figure-container {
-    -webkit-user-select: none; /* safari */
-    user-select: none;
-  }
-`;
   /**
    * Each figure ⭐ is positioned inside a container `div` placed and sized
    * according to the split pane the figure is part of, or a separate container for the figure
@@ -50433,9 +49497,16 @@ stores.inject(MyMetaStore, storeInstance);
               maxX: this.env.model.getters.getColDimensions(sheetId, this.env.model.getters.getNumberCols(sheetId) - 1).end,
               maxY: this.env.model.getters.getRowDimensions(sheetId, this.env.model.getters.getNumberRows(sheetId) - 1).end,
           };
+          let hasStartedDnd = false;
           const onMouseMove = (ev) => {
               const getters = this.env.model.getters;
               const currentMousePosition = { x: ev.clientX, y: ev.clientY };
+              const offsetX = Math.abs(currentMousePosition.x - initialMousePosition.x);
+              const offsetY = Math.abs(currentMousePosition.y - initialMousePosition.y);
+              if (!hasStartedDnd && offsetX < DRAG_THRESHOLD && offsetY < DRAG_THRESHOLD) {
+                  return; // add a small threshold to avoid dnd when just clicking
+              }
+              hasStartedDnd = true;
               const draggedFigure = dragFigureForMove(currentMousePosition, initialMousePosition, initialFigure, maxDimensions, initialScrollPosition, getters.getActiveSheetScrollInfo());
               const otherFigures = this.getOtherFigures(initialFigure.id);
               const overlappingCarousel = this.getCarouselOverlappingChart(draggedFigure, otherFigures);
@@ -50629,38 +49700,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  css /* scss */ `
-  .o-validation {
-    border-radius: 4px;
-    border-width: 0 0 0 3px;
-    border-style: solid;
-    gap: 3px;
-
-    .o-icon {
-      margin-right: 5px;
-      height: 1.2em;
-      width: 1.2em;
-    }
-  }
-
-  .o-validation-warning {
-    border-color: ${ALERT_WARNING_BORDER};
-    color: ${ALERT_WARNING_TEXT_COLOR};
-    background-color: ${ALERT_WARNING_BG};
-  }
-
-  .o-validation-error {
-    border-color: ${ALERT_DANGER_BORDER};
-    color: ${ALERT_DANGER_TEXT_COLOR};
-    background-color: ${ALERT_DANGER_BG};
-  }
-
-  .o-validation-info {
-    border-color: ${ALERT_INFO_BORDER};
-    color: ${ALERT_INFO_TEXT_COLOR};
-    background-color: ${ALERT_INFO_BG};
-  }
-`;
   class ValidationMessages extends owl.Component {
       static template = "o-spreadsheet-ValidationMessages";
       static props = {
@@ -50682,20 +49721,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  css /* scss */ `
-  .o-grid-add-rows {
-    input.o-input {
-      width: 60px;
-      height: 30px;
-    }
-
-    .o-validation-error {
-      display: inline-block !important;
-      margin-top: 0;
-      margin-left: 8px;
-    }
-  }
-`;
   class GridAddRowsFooter extends owl.Component {
       static template = "o-spreadsheet-GridAddRowsFooter";
       static props = {
@@ -50940,14 +49965,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  const CURSOR_SVG = /*xml*/ `
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14" height="16"><path d="M6.5.4c1.3-.8 2.9-.1 3.8 1.4l2.9 5.1c.2.4.9 1.6-.4 2.3l-1.6.9 1.8 3.1c.2.4.1 1-.2 1.2l-1.6 1c-.3.1-.9 0-1.1-.4l-1.8-3.1-1.6 1c-.6.4-1.7 0-2.2-.8L0 4.3"/><path fill="#fff" d="M9.1 2a1.4 1.1 60 0 0-1.7-.6L5.5 2.5l.9 1.6-1 .6-.9-1.6-.6.4 1.8 3.1-1.3.7-1.8-3.1-1 .6 3.8 6.6 6.8-3.98M3.9 8.8 10.82 5l.795 1.4-6.81 3.96"/></svg>
-`;
-  css /* scss */ `
-  .o-paint-format-cursor {
-    cursor: url("data:image/svg+xml,${encodeURIComponent(CURSOR_SVG)}"), auto;
-  }
-`;
   function useCellHovered(env, gridRef) {
       const delayedHoveredCell = useStore(DelayedHoveredCellStore);
       const hoveredTable = useStore(HoveredTableStore);
@@ -51193,7 +50210,6 @@ stores.inject(MyMetaStore, storeInstance);
       };
       static components = { Popover };
       cellPopovers;
-      zIndex = ComponentsImportance.GridPopover;
       setup() {
           this.cellPopovers = useStore(CellPopoverStore);
       }
@@ -51512,58 +50528,6 @@ stores.inject(MyMetaStore, storeInstance);
           this.props.onOpenContextMenu(type, ev.clientX, ev.clientY);
       }
   }
-  css /* scss */ `
-  .o-col-resizer {
-    position: absolute;
-    top: 0;
-    left: ${HEADER_WIDTH}px;
-    right: ${SCROLLBAR_WIDTH}px;
-    height: ${HEADER_HEIGHT}px;
-    width: calc(100% - ${HEADER_WIDTH + SCROLLBAR_WIDTH}px);
-    &.o-dragging {
-      cursor: grabbing;
-    }
-    &.o-grab {
-      cursor: grab;
-    }
-    .dragging-col-line {
-      top: ${HEADER_HEIGHT}px;
-      position: absolute;
-      width: 2px;
-      height: 10000px;
-      background-color: black;
-    }
-    .dragging-col-shadow {
-      top: ${HEADER_HEIGHT}px;
-      position: absolute;
-      height: 10000px;
-      background-color: black;
-      opacity: 0.1;
-    }
-    .o-handle {
-      position: absolute;
-      height: ${HEADER_HEIGHT}px;
-      width: 4px;
-      cursor: e-resize;
-      background-color: ${SELECTION_BORDER_COLOR};
-    }
-    .dragging-resizer {
-      top: ${HEADER_HEIGHT}px;
-      position: absolute;
-      margin-left: 2px;
-      width: 1px;
-      height: 10000px;
-      background-color: ${SELECTION_BORDER_COLOR};
-    }
-    .o-unhide {
-      color: ${ICONS_COLOR};
-    }
-    .o-unhide:hover {
-      z-index: ${ComponentsImportance.Grid + 1};
-      background-color: lightgrey;
-    }
-  }
-`;
   class ColResizer extends AbstractResizer {
       static props = {
           onOpenContextMenu: Function,
@@ -51706,57 +50670,6 @@ stores.inject(MyMetaStore, storeInstance);
           return this.env.model.getters.getPaneDivisions(this.sheetId).xSplit > 0;
       }
   }
-  css /* scss */ `
-  .o-row-resizer {
-    position: absolute;
-    top: ${HEADER_HEIGHT}px;
-    left: 0;
-    bottom: ${SCROLLBAR_WIDTH}px;
-    width: ${HEADER_WIDTH}px;
-    &.o-dragging {
-      cursor: grabbing;
-    }
-    &.o-grab {
-      cursor: grab;
-    }
-    .dragging-row-line {
-      left: ${HEADER_WIDTH}px;
-      position: absolute;
-      width: 10000px;
-      height: 2px;
-      background-color: black;
-    }
-    .dragging-row-shadow {
-      left: ${HEADER_WIDTH}px;
-      position: absolute;
-      width: 10000px;
-      background-color: black;
-      opacity: 0.1;
-    }
-    .o-handle {
-      position: absolute;
-      height: 4px;
-      width: ${HEADER_WIDTH}px;
-      cursor: n-resize;
-      background-color: ${SELECTION_BORDER_COLOR};
-    }
-    .dragging-resizer {
-      left: ${HEADER_WIDTH}px;
-      position: absolute;
-      margin-top: 2px;
-      width: 10000px;
-      height: 1px;
-      background-color: ${SELECTION_BORDER_COLOR};
-    }
-    .o-unhide {
-      color: ${ICONS_COLOR};
-    }
-    .o-unhide:hover {
-      z-index: ${ComponentsImportance.Grid + 1};
-      background-color: lightgrey;
-    }
-  }
-`;
   class RowResizer extends AbstractResizer {
       static props = {
           onOpenContextMenu: Function,
@@ -51897,18 +50810,6 @@ stores.inject(MyMetaStore, storeInstance);
           return this.env.model.getters.getPaneDivisions(this.sheetId).ySplit > 0;
       }
   }
-  css /* scss */ `
-  .o-overlay {
-    .all {
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      width: ${HEADER_WIDTH}px;
-      height: ${HEADER_HEIGHT}px;
-    }
-  }
-`;
   class HeadersOverlay extends owl.Component {
       static props = {
           onOpenContextMenu: Function,
@@ -52863,17 +51764,6 @@ stores.inject(MyMetaStore, storeInstance);
       return onMouseWheel;
   }
 
-  css /* scss */ `
-  .o-border {
-    position: absolute;
-    &:hover {
-      cursor: grab;
-    }
-  }
-  .o-moving {
-    cursor: grabbing;
-  }
-`;
   class Border extends owl.Component {
       static template = "o-spreadsheet-Border";
       static props = {
@@ -52912,32 +51802,6 @@ stores.inject(MyMetaStore, storeInstance);
   }
 
   const MOBILE_HANDLER_WIDTH = 40;
-  css /* scss */ `
-  .o-corner {
-    position: absolute;
-  }
-
-  .o-corner-button {
-    border: 1px solid white;
-    height: ${AUTOFILL_EDGE_LENGTH}px;
-    width: ${AUTOFILL_EDGE_LENGTH}px;
-  }
-  .o-corner-nw,
-  .o-corner-se {
-    &:hover {
-      cursor: nwse-resize;
-    }
-  }
-  .o-corner-ne,
-  .o-corner-sw {
-    &:hover {
-      cursor: nesw-resize;
-    }
-  }
-  .o-resizing {
-    cursor: grabbing;
-  }
-`;
   class Corner extends owl.Component {
       static template = "o-spreadsheet-Corner";
       static props = {
@@ -53003,11 +51867,6 @@ stores.inject(MyMetaStore, storeInstance);
       return { dirX, dirY };
   }
 
-  css /*SCSS*/ `
-  .o-highlight {
-    z-index: ${ComponentsImportance.Highlight};
-  }
-`;
   class Highlight extends owl.Component {
       static template = "o-spreadsheet-Highlight";
       static props = {
@@ -53142,24 +52001,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   };
 
-  css /* scss */ `
-  .o-scrollbar {
-    position: absolute;
-    overflow: auto;
-    z-index: ${ComponentsImportance.ScrollBar};
-    background-color: ${BACKGROUND_GRAY_COLOR};
-
-    &.corner {
-      box-sizing: content-box;
-      right: 0px;
-      bottom: 0px;
-      height: ${SCROLLBAR_WIDTH}px;
-      width: ${SCROLLBAR_WIDTH}px;
-      border-top: 1px solid #e2e3e3;
-      border-left: 1px solid #e2e3e3;
-    }
-  }
-`;
   class ScrollBar extends owl.Component {
       static props = {
           width: { type: Number, optional: true },
@@ -53322,24 +52163,6 @@ stores.inject(MyMetaStore, storeInstance);
       }, () => [ref.el]);
   }
 
-  css /* scss */ `
-  .o-spreadsheet {
-    .os-input {
-      border-width: 0 0 1px 0;
-      border-color: transparent;
-      outline: none;
-      text-overflow: ellipsis;
-      color: ${TEXT_BODY};
-    }
-    .os-input:hover,
-    .os-input.o-input-border {
-      border-color: ${GRAY_300};
-    }
-    .os-input:focus {
-      border-color: ${ACTION_COLOR};
-    }
-  }
-`;
   class TextInput extends owl.Component {
       static template = "o-spreadsheet-TextInput";
       static props = {
@@ -53421,21 +52244,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  css /* scss */ `
-  .o-menu-item-button {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin: 2px 1px;
-    padding: 0px 1px;
-    border-radius: 2px;
-    min-width: 22px;
-  }
-  .o-disabled {
-    opacity: 0.6;
-    cursor: default;
-  }
-`;
   class ActionButton extends owl.Component {
       static template = "o-spreadsheet-ActionButton";
       static props = {
@@ -53488,41 +52296,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  css /* scss */ `
-  .o-color-picker-widget {
-    display: flex;
-    position: relative;
-    align-items: center;
-    height: 30px;
-
-    .o-color-picker-button-style {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      margin: 2px;
-      padding: 3px;
-      border-radius: 2px;
-      cursor: pointer;
-      &:not([disabled]):hover {
-        background-color: rgba(0, 0, 0, 0.08);
-      }
-    }
-
-    .o-color-picker-button {
-      > span {
-        border-bottom: 4px solid;
-        height: 20px;
-        margin-top: 2px;
-        display: block;
-      }
-
-      &[disabled] {
-        pointer-events: none;
-        opacity: 0.3;
-      }
-    }
-  }
-`;
   class ColorPickerWidget extends owl.Component {
       static template = "o-spreadsheet-ColorPickerWidget";
       static props = {
@@ -53555,26 +52328,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  css /* scss */ `
-  .o-font-size-editor {
-    width: max-content !important;
-    height: calc(100% - 4px);
-    input.o-font-size {
-      outline: none;
-      height: 20px;
-      width: 31px;
-      text-align: center;
-    }
-  }
-  .o-text-options > div {
-    cursor: pointer;
-    line-height: 26px;
-    padding: 3px 12px;
-    &:hover {
-      background-color: rgba(0, 0, 0, 0.08);
-    }
-  }
-`;
   class FontSizeEditor extends owl.Component {
       static template = "o-spreadsheet-FontSizeEditor";
       static props = {
@@ -53650,41 +52403,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  css /* scss */ `
-  .o-chart-title-designer {
-    .o-hoverable-button {
-      height: 30px;
-    }
-    .o-dropdown-content .o-hoverable-button {
-      height: fit-content;
-    }
-
-    .o-divider {
-      border-right: 1px solid ${GRAY_300};
-      margin: 0px 4px;
-      height: 14px;
-    }
-
-    .o-menu-item-button.active {
-      background-color: #e6f4ea;
-      color: #188038;
-    }
-
-    .o-dropdown-content {
-      overflow-y: auto;
-      overflow-x: hidden;
-      padding: 2px;
-      z-index: 100;
-      box-shadow: 1px 2px 5px 2px rgba(51, 51, 51, 0.15);
-
-      .o-dropdown-line {
-        > span {
-          padding: 4px;
-        }
-      }
-    }
-  }
-`;
   class TextStyler extends owl.Component {
       static template = "o-spreadsheet.TextStyler";
       static components = { ColorPickerWidget, ActionButton, FontSizeEditor };
@@ -54512,27 +53230,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  css /* scss */ `
-  .o-badge-selection {
-    gap: 1px;
-    button.o-button {
-      border-radius: 0;
-      &.selected {
-        color: ${GRAY_900};
-        border-color: ${ACTION_COLOR};
-        background: ${BADGE_SELECTED_COLOR};
-        font-weight: 600;
-      }
-
-      &:first-child {
-        border-radius: 4px 0 0 4px;
-      }
-      &:last-child {
-        border-radius: 0 4px 4px 0;
-      }
-    }
-  }
-`;
   class BadgeSelection extends owl.Component {
       static template = "o-spreadsheet.BadgeSelection";
       static props = {
@@ -54542,13 +53239,6 @@ stores.inject(MyMetaStore, storeInstance);
       };
   }
 
-  css /* scss */ `
-  .o-chart-title-designer {
-    > span {
-      height: 30px;
-    }
-  }
-`;
   class ChartTitle extends owl.Component {
       static template = "o-spreadsheet.ChartTitle";
       static components = { Section, TextStyler };
@@ -54610,31 +53300,12 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  const CIRCLE_SVG = /*xml*/ `
-<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'>
-  <circle r="2" fill="#FFF"/>
-</svg>
-`;
-  css /* scss */ `
-  .o-radio {
-    input {
-      appearance: none;
-      -webkit-appearance: none;
-      -moz-appearance: none;
-      width: 14px;
-      height: 14px;
-      border: 1px solid ${GRAY_300};
-      outline: none;
-      border-radius: 8px;
-
-      &:checked {
-        background: url("data:image/svg+xml,${encodeURIComponent(CIRCLE_SVG)}");
-        background-color: ${ACTION_COLOR};
-        border-color: ${ACTION_COLOR};
-      }
-    }
-  }
-`;
+  // FIXME Encoding version used in css
+  // const CIRCLE_SVG = /*xml*/ `
+  // <svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'>
+  //   <circle r="2" fill="#FFF"/>
+  // </svg>
+  // `;
   class RadioSelection extends owl.Component {
       static template = "o-spreadsheet.RadioSelection";
       static props = {
@@ -55131,45 +53802,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  css /* scss */ `
-  .o-gauge-color-set {
-    table {
-      table-layout: fixed;
-      margin-top: 2%;
-      display: table;
-      text-align: left;
-      font-size: 12px;
-      line-height: 18px;
-      width: 100%;
-      font-size: 12px;
-    }
-
-    td {
-      height: 30px;
-      padding: 6px 0;
-    }
-    th.o-gauge-color-set-colorPicker {
-      width: 8%;
-    }
-    th.o-gauge-color-set-text {
-      width: 25%;
-    }
-    th.o-gauge-color-set-operator {
-      width: 10%;
-    }
-    th.o-gauge-color-set-value {
-      width: 22%;
-    }
-    th.o-gauge-color-set-type {
-      width: 30%;
-    }
-    input,
-    select {
-      width: 100%;
-      height: 100%;
-    }
-  }
-`;
   class GaugeChartDesignPanel extends owl.Component {
       static template = "o-spreadsheet-GaugeChartDesignPanel";
       static components = {
@@ -55635,7 +54267,7 @@ stores.inject(MyMetaStore, storeInstance);
           return SCORECARD_CHART_TITLE_FONT_SIZE;
       }
       translate(term) {
-          return _t(term);
+          return this.env.model.getters.dynamicTranslate(term);
       }
       setColor(color, colorPickerId) {
           switch (colorPickerId) {
@@ -55975,40 +54607,6 @@ stores.inject(MyMetaStore, storeInstance);
       design: TreeMapChartDesignPanel,
   });
 
-  css /* scss */ `
-  .o-section .o-input.o-type-selector {
-    height: 30px;
-    padding-left: 35px;
-    padding-top: 5px;
-  }
-  .o-type-selector-preview {
-    left: 5px;
-    top: 3px;
-    .o-chart-preview {
-      width: 24px;
-      height: 24px;
-    }
-  }
-
-  .o-popover .o-chart-select-popover {
-    background: #fff;
-    .o-chart-type-item {
-      cursor: pointer;
-      padding: 3px 6px;
-      margin: 1px 2px;
-      &.selected,
-      &:hover {
-        border: 1px solid ${ACTION_COLOR};
-        background: ${BADGE_SELECTED_COLOR};
-        padding: 2px 5px;
-      }
-      .o-chart-preview {
-        width: 48px;
-        height: 48px;
-      }
-    }
-  }
-`;
   class ChartTypePicker extends owl.Component {
       static template = "o-spreadsheet-ChartTypePicker";
       static components = { Section, Popover };
@@ -56111,38 +54709,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  css /* scss */ `
-  .o-chart {
-    .o-panel {
-      display: flex;
-      .o-panel-element {
-        flex: 1 0 auto;
-        padding: 8px 0px;
-        text-align: center;
-        cursor: pointer;
-        border-right: 1px solid ${GRAY_300};
-
-        &.inactive {
-          color: ${TEXT_BODY};
-          background-color: ${GRAY_100};
-          border-bottom: 1px solid ${GRAY_300};
-        }
-
-        &:not(.inactive) {
-          color: ${TEXT_HEADING};
-          border-bottom: 1px solid #fff;
-        }
-
-        .fa {
-          margin-right: 4px;
-        }
-      }
-      .o-panel-element:last-child {
-        border-right: none;
-      }
-    }
-  }
-`;
   class ChartPanel extends owl.Component {
       static template = "o-spreadsheet-ChartPanel";
       static components = { Section, ChartTypePicker };
@@ -56231,26 +54797,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  css /* scss */ `
-  .o-icon-picker {
-    position: absolute;
-    z-index: ${ComponentsImportance.IconPicker};
-    box-shadow: 1px 2px 5px 2px rgba(51, 51, 51, 0.15);
-    background-color: white;
-    padding: 2px 1px;
-  }
-  .o-cf-icon-line {
-    display: flex;
-    padding: 0 6px;
-  }
-  .o-icon-picker-item {
-    cursor: pointer;
-    &:hover {
-      background-color: ${BADGE_SELECTED_COLOR};
-      outline: ${ACTION_COLOR} solid 1px;
-    }
-  }
-`;
   class IconPicker extends owl.Component {
       static template = "o-spreadsheet-IconPicker";
       static props = {
@@ -56288,77 +54834,6 @@ stores.inject(MyMetaStore, storeInstance);
       }, () => [highlightProvider.highlights]);
   }
 
-  css /* scss */ `
-  .o-cf-preview {
-    &.o-cf-cursor-ptr {
-      cursor: pointer;
-    }
-
-    border-bottom: 1px solid ${GRAY_300};
-    height: 80px;
-    padding: 10px;
-    position: relative;
-    cursor: pointer;
-    &:hover,
-    &.o-cf-dragging {
-      background-color: ${GRAY_200};
-    }
-
-    &:not(:hover) .o-cf-delete-button {
-      display: none;
-    }
-    .o-cf-preview-icon {
-      border: 1px solid ${GRAY_300};
-      background-color: #fff;
-      position: absolute;
-      height: 50px;
-      width: 50px;
-      .o-icon {
-        width: ${CF_ICON_EDGE_LENGTH}px;
-        height: ${CF_ICON_EDGE_LENGTH}px;
-      }
-    }
-    .o-cf-preview-description {
-      left: 65px;
-      margin-bottom: auto;
-      margin-right: 8px;
-      margin-top: auto;
-      position: relative;
-      width: 142px;
-      .o-cf-preview-description-rule {
-        margin-bottom: 4px;
-        max-height: 2.8em;
-        line-height: 1.4em;
-      }
-      .o-cf-preview-range {
-        font-size: 12px;
-      }
-    }
-    .o-cf-delete {
-      left: 90%;
-      top: 39%;
-      position: absolute;
-    }
-    &:not(:hover):not(.o-cf-dragging) .o-cf-drag-handle {
-      display: none !important;
-    }
-    .o-cf-drag-handle {
-      left: -8px;
-      cursor: move;
-      .o-icon {
-        width: 6px;
-        height: 30px;
-      }
-    }
-
-    .o-icon.arrow-down {
-      color: #e06666;
-    }
-    .o-icon.arrow-up {
-      color: #6aa84f;
-    }
-  }
-`;
   class ConditionalFormatPreview extends owl.Component {
       static template = "o-spreadsheet-ConditionalFormatPreview";
       icons = ICONS;
@@ -56477,95 +54952,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  css /* scss */ `
-  .o-cf-ruleEditor {
-    .o-cf-preview-display {
-      border: 1px solid ${GRAY_300};
-      padding: 10px;
-    }
-
-    .o-cf-cell-is-rule {
-      .o-divider {
-        border-right: 1px solid ${GRAY_300};
-        margin: 4px 6px;
-      }
-    }
-    .o-cf-color-scale-editor {
-      .o-threshold {
-        .o-select-with-input {
-          max-width: 150px;
-        }
-        .o-threshold-value {
-          flex-grow: 1;
-          flex-basis: 60%;
-          min-width: 0px; /* input overflows in Firefox otherwise */
-        }
-        .o-threshold-value input:disabled {
-          background-color: #edebed;
-        }
-      }
-    }
-    .o-cf-iconset-rule {
-      .o-cf-clickable-icon {
-        border: 1px solid ${GRAY_200};
-        border-radius: 4px;
-        cursor: pointer;
-        &:hover {
-          border-color: ${ACTION_COLOR};
-          background-color: ${BADGE_SELECTED_COLOR};
-        }
-        .o-icon {
-          width: ${CF_ICON_EDGE_LENGTH}px;
-          height: ${CF_ICON_EDGE_LENGTH}px;
-        }
-      }
-      .o-cf-iconsets {
-        gap: 11px;
-        .o-cf-iconset {
-          padding: 7px 8px;
-          width: 95px;
-          .o-icon {
-            margin: 0 3px;
-          }
-          svg {
-            vertical-align: baseline;
-          }
-        }
-      }
-      .o-inflection {
-        .o-cf-icon-button {
-          padding: 4px 10px;
-        }
-        table {
-          font-size: 13px;
-          td {
-            padding: 6px 0;
-          }
-
-          th.o-cf-iconset-icons {
-            width: 25px;
-          }
-          th.o-cf-iconset-text {
-            width: 82px;
-          }
-          th.o-cf-iconset-operator {
-            width: 20px;
-          }
-          .o-cf-iconset-type {
-            min-width: 80px;
-          }
-        }
-      }
-    }
-
-    .o-icon.arrow-down {
-      color: #e06666;
-    }
-    .o-icon.arrow-up {
-      color: #6aa84f;
-    }
-  }
-`;
   class ConditionalFormattingEditor extends owl.Component {
       static template = "o-spreadsheet-ConditionalFormattingEditor";
       static props = {
@@ -57095,25 +55481,6 @@ stores.inject(MyMetaStore, storeInstance);
    */
   const currenciesRegistry = new Registry();
 
-  css /* scss */ `
-  .o-custom-currency {
-    .o-format-proposals {
-      color: black;
-    }
-
-    .o-format-examples {
-      background: #f9fafb;
-      padding: 8px;
-      border-radius: 4px;
-      border: 1px solid #d8dadd;
-      color: #374151;
-    }
-
-    table {
-      table-layout: fixed;
-    }
-  }
-`;
   class CustomCurrencyPanel extends owl.Component {
       static template = "o-spreadsheet-CustomCurrencyPanel";
       static components = { Section, Checkbox };
@@ -57187,7 +55554,7 @@ stores.inject(MyMetaStore, storeInstance);
               });
           }
           const emptyCurrency = {
-              name: _t(CustomCurrencyTerms.Custom),
+              name: CustomCurrencyTerms.Custom,
               code: "",
               symbol: "",
               decimalPlaces: 2,
@@ -57346,31 +55713,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  css /* scss */ `
-  .o-sidePanel {
-    .o-dv-preview {
-      height: 70px;
-      cursor: pointer;
-      border-bottom: 1px solid ${FIGURE_BORDER_COLOR};
-
-      .o-dv-container {
-        min-width: 0; /* otherwise flex won't shrink correctly */
-      }
-
-      .o-dv-preview-description {
-        font-size: 13px;
-      }
-
-      &:hover {
-        background-color: rgba(0, 0, 0, 0.08);
-      }
-
-      &:not(:hover) .o-dv-preview-delete {
-        display: none !important;
-      }
-    }
-  }
-`;
   class DataValidationPreview extends owl.Component {
       static template = "o-spreadsheet-DataValidationPreview";
       static props = {
@@ -57819,38 +56161,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  css /* scss */ `
-  .o-find-and-replace {
-    outline: none;
-    height: 100%;
-    .o-input-search-container {
-      display: flex;
-      .o-input-with-count {
-        flex-grow: 1;
-        width: auto;
-      }
-      .o-input-without-count {
-        width: 100%;
-      }
-      .o-input-count {
-        width: fit-content;
-        padding: 4px 0 4px 4px;
-        white-space: nowrap;
-      }
-    }
-
-    .o-result-buttons {
-      .o-button {
-        height: 19px;
-        width: 19px;
-        .o-icon {
-          height: 14px;
-          width: 14px;
-        }
-      }
-    }
-  }
-`;
   class FindAndReplacePanel extends owl.Component {
       static template = "o-spreadsheet-FindAndReplacePanel";
       static components = { SelectionInput, Section, Checkbox, ValidationMessages };
@@ -57961,22 +56271,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  css /* scss */ `
-  .o-more-formats-panel {
-    .format-preview {
-      height: 49px;
-      background-color: white;
-      cursor: pointer;
-
-      &:hover {
-        background-color: rgba(0, 0, 0, 0.08);
-      }
-    }
-    .check-icon {
-      width: 24px;
-    }
-  }
-`;
   const DATE_FORMAT_ACTIONS = createActions([
       formatNumberFullDateTime,
       formatNumberISODate,
@@ -58134,21 +56428,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  css /* scss */ `
-  .o-sidePanel {
-    .o-pivot-measure-display-field,
-    .o-pivot-measure-display-value {
-      border: solid 1px ${GRAY_300};
-      border-radius: 3px;
-    }
-
-    .o-pivot-measure-display-description {
-      white-space: pre-wrap;
-      color: dimgray;
-      border-left: 2px solid ${GRAY_300};
-    }
-  }
-`;
   class PivotMeasureDisplayPanel extends owl.Component {
       static template = "o-spreadsheet-PivotMeasureDisplayPanel";
       static props = {
@@ -58207,11 +56486,6 @@ stores.inject(MyMetaStore, storeInstance);
       return positions;
   }
 
-  css /* scss */ `
-  .pivot-defer-update {
-    min-height: 40px;
-  }
-`;
   class PivotDeferUpdate extends owl.Component {
       static template = "o-spreadsheet-PivotDeferUpdate";
       static props = {
@@ -58300,25 +56574,6 @@ stores.inject(MyMetaStore, storeInstance);
       return pendingHtmlContent.filter((content) => content.value);
   }
 
-  css /* scss */ `
-  input.pivot-dimension-search-field:focus {
-    outline: none;
-  }
-  .pivot-dimension-search-field-icon svg {
-    width: 13px;
-    height: 13px;
-  }
-  .pivot-dimension-search {
-    background-color: white;
-  }
-  .add-dimension.o-button {
-    padding: 2px 7px;
-    font-weight: 400;
-    font-size: 12px;
-    flex-grow: 0;
-    height: inherit;
-  }
-`;
   class AddDimensionButton extends owl.Component {
       static template = "o-spreadsheet-AddDimensionButton";
       static components = { Popover, TextValueProvider };
@@ -58412,35 +56667,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  // don't use bg-white since it's flipped to dark in dark mode and we don't support dark mode
-  css /* scss */ `
-  .pivot-dimension {
-    background-color: white;
-    border: 1px solid ${GRAY_300};
-    border-radius: 4px;
-
-    select.o-input {
-      height: inherit;
-    }
-
-    select > option {
-      background-color: white;
-    }
-
-    .pivot-dim-operator-label {
-      min-width: 120px;
-    }
-
-    &.pivot-dimension-invalid {
-      background-color: #ffdddd;
-      border-color: red !important;
-      select,
-      input {
-        background-color: #ffdddd;
-      }
-    }
-  }
-`;
   class PivotDimension extends owl.Component {
       static template = "o-spreadsheet-PivotDimension";
       static props = {
@@ -58592,19 +56818,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  css /* scss */ `
-  .o-pivot-sort {
-    .o-sort-card {
-      width: fit-content;
-      background-color: ${GRAY_100};
-      border: 1px solid ${GRAY_300};
-
-      .o-sort-value {
-        color: ${PRIMARY_BUTTON_BG};
-      }
-    }
-  }
-`;
   class PivotSortSection extends owl.Component {
       static template = "o-spreadsheet-PivotSortSection";
       static components = {
@@ -58650,11 +56863,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  css /* scss */ `
-  .add-calculated-measure {
-    cursor: pointer;
-  }
-`;
   class PivotLayoutConfigurator extends owl.Component {
       static template = "o-spreadsheet-PivotLayoutConfigurator";
       static components = {
@@ -58847,12 +57055,13 @@ stores.inject(MyMetaStore, storeInstance);
       addCalculatedMeasure() {
           const { measures } = this.props.definition;
           const measureName = this.env.model.getters.generateNewCalculatedMeasureName(measures);
+          const aggregator = "sum";
           this.props.onDimensionsUpdated({
               measures: measures.concat([
                   {
-                      id: this.getMeasureId(measureName),
+                      id: this.getMeasureId(measureName, aggregator),
                       fieldName: measureName,
-                      aggregator: "sum",
+                      aggregator,
                       computedBy: {
                           sheetId: this.env.model.getters.getActiveSheetId(),
                           formula: "=0",
@@ -59468,11 +57677,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  css /* scss */ `
-  .o-checkbox-selection {
-    max-height: 300px;
-  }
-`;
   class RemoveDuplicatesPanel extends owl.Component {
       static template = "o-spreadsheet-RemoveDuplicatesPanel";
       static components = { ValidationMessages, Section, Checkbox };
@@ -59559,12 +57763,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  css /* scss */ `
-  .o-locale-preview {
-    border: 1px solid ${GRAY_300};
-    background-color: ${GRAY_100};
-  }
-`;
   class SettingsPanel extends owl.Component {
       static template = "o-spreadsheet-SettingsPanel";
       static components = { Section, ValidationMessages, BadgeSelection };
@@ -59838,34 +58036,6 @@ stores.inject(MyMetaStore, storeInstance);
       ctx.restore();
   }
 
-  css /* scss */ `
-  .o-table-style-list-item {
-    border: 1px solid transparent;
-    border-radius: 4px;
-    &.selected {
-      border: 1px solid ${ACTION_COLOR};
-      background: ${BADGE_SELECTED_COLOR};
-    }
-
-    &:hover {
-      background: #ddd;
-      .o-table-style-edit-button {
-        display: block !important;
-        right: 0;
-        top: 0;
-        background: #fff;
-        cursor: pointer;
-        border: 1px solid #ddd;
-        padding: 1px 1px 1px 2px;
-        .o-icon {
-          font-size: 12px;
-          width: 12px;
-          height: 12px;
-        }
-      }
-    }
-  }
-`;
   class TableStylePreview extends owl.Component {
       static template = "o-spreadsheet-TableStylePreview";
       static components = { MenuPopover };
@@ -59926,52 +58096,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  css /* scss */ `
-  .o-table-style-popover {
-    /* 7 tables preview + padding by line */
-    width: calc((66px + 4px * 2) * 7 + 1.5rem * 2);
-    background: #fff;
-    font-size: 14px;
-    user-select: none;
-
-    .o-notebook {
-      border-bottom: 1px solid ${GRAY_300};
-
-      .o-notebook-tab {
-        padding: 5px 15px;
-        border: 1px solid ${GRAY_300};
-        margin-bottom: -1px;
-        margin-left: -1px;
-        color: ${TEXT_BODY};
-        cursor: pointer;
-        transition: color 0.2s, border-color 0.2s;
-
-        &.selected {
-          border-bottom-color: #fff;
-          border-top-color: ${PRIMARY_BUTTON_BG};
-          color: ${TEXT_HEADING};
-        }
-      }
-    }
-
-    .o-table-style-list-item {
-      padding: 3px;
-    }
-
-    .o-table-style-popover-preview {
-      width: 66px;
-      height: 51px;
-    }
-
-    .o-new-table-style {
-      font-size: 36px;
-      color: #666;
-      &:hover {
-        background: #f5f5f5;
-      }
-    }
-  }
-`;
   class TableStylesPopover extends owl.Component {
       static template = "o-spreadsheet-TableStylesPopover";
       static components = { Popover, TableStylePreview };
@@ -60011,31 +58135,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  css /* scss */ `
-  .o-table-style-picker {
-    border: 1px solid ${GRAY_300};
-    border-radius: 3px;
-
-    .o-table-style-picker-arrow {
-      border-left: 1px solid ${GRAY_300};
-
-      &:hover {
-        background: #f5f5f5;
-        cursor: pointer;
-      }
-    }
-
-    .o-table-style-list-item {
-      padding: 5px 6px;
-      margin: 5px 2px;
-
-      .o-table-style-picker-preview {
-        width: 51px;
-        height: 36px;
-      }
-    }
-  }
-`;
   class TableStylePicker extends owl.Component {
       static template = "o-spreadsheet-TableStylePicker";
       static components = { TableStylesPopover, TableStylePreview };
@@ -60079,19 +58178,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  css /* scss */ `
-  .o-table-panel {
-    input.o-table-n-of-headers {
-      width: 14px;
-      text-align: center;
-    }
-
-    .o-info-icon {
-      width: 14px;
-      height: 14px;
-    }
-  }
-`;
   class TablePanel extends owl.Component {
       static template = "o-spreadsheet-TablePanel";
       static components = { TableStylePicker, SelectionInput, ValidationMessages, Checkbox, Section };
@@ -60243,19 +58329,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  css /* scss */ `
-  .o-table-style-editor-panel {
-    .o-table-style-list-item {
-      margin: 2px 7px;
-      padding: 6px 9px;
-
-      .o-table-style-edit-template-preview {
-        width: 71px;
-        height: 51px;
-      }
-    }
-  }
-`;
   const DEFAULT_TABLE_STYLE_COLOR = "#3C78D8";
   class TableStyleEditorPanel extends owl.Component {
       static template = "o-spreadsheet-TableStyleEditorPanel";
@@ -60690,15 +58763,6 @@ stores.inject(MyMetaStore, storeInstance);
 
   const SIZE = 3;
   const COLOR = "#777";
-  css /* scss */ `
-  .o-table-resizer {
-    width: ${SIZE * 2}px;
-    height: ${SIZE * 2}px;
-    border-bottom: ${SIZE}px solid ${COLOR};
-    border-right: ${SIZE}px solid ${COLOR};
-    cursor: nwse-resize;
-  }
-`;
   class TableResizer extends owl.Component {
       static template = "o-spreadsheet-TableResizer";
       static props = { table: Object };
@@ -61444,14 +59508,16 @@ stores.inject(MyMetaStore, storeInstance);
               "background-color": this.getBackgroundColor(cellStyle),
           });
       }
-      get icon() {
-          switch (this.props.sortDirection) {
-              case "asc":
-                  return "fa-sort-asc";
-              case "desc":
-                  return "fa-sort-desc";
+      get verticalJustifyClass() {
+          const cellStyle = this.env.model.getters.getCellComputedStyle(this.props.position);
+          switch (cellStyle.verticalAlign) {
+              case "top":
+                  return "justify-content-start";
+              case "middle":
+                  return "justify-content-center";
+              case "bottom":
               default:
-                  return "fa-sort";
+                  return "justify-content-end";
           }
       }
       getBackgroundColor(cellStyle) {
@@ -61513,43 +59579,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  css /* scss */ `
-  .o_pivot_html_renderer {
-    width: 100%;
-    border-collapse: collapse;
-
-    &:hover {
-      cursor: pointer;
-    }
-
-    td,
-    th {
-      border: 1px solid #dee2e6;
-      background-color: #fff;
-      padding: 0.3rem;
-      white-space: nowrap;
-
-      &:hover {
-        filter: brightness(0.9);
-      }
-    }
-
-    td {
-      text-align: right;
-    }
-
-    th {
-      background-color: #f5f5f5;
-      font-weight: bold;
-      color: black;
-    }
-
-    .o_missing_value {
-      color: #46646d;
-      background: #e7f2f6;
-    }
-  }
-`;
   class PivotHTMLRenderer extends owl.Component {
       static template = "o_spreadsheet.PivotHTMLRenderer";
       static components = { Checkbox };
@@ -70652,6 +68681,30 @@ stores.inject(MyMetaStore, storeInstance);
           pivot: { ...definition, collapsedDomains: newDomains },
       });
   }
+  iconsOnCellRegistry.add("pivot_dashboard_sorting", (getters, position) => {
+      if (!getters.isDashboard()) {
+          return undefined;
+      }
+      const pivotCell = getters.getPivotCellFromPosition(position);
+      if (pivotCell.type !== "MEASURE_HEADER") {
+          return undefined;
+      }
+      const sortDirection = getters.getPivotCellSortDirection(position);
+      if (sortDirection !== "asc" && sortDirection !== "desc") {
+          return undefined;
+      }
+      const cellStyle = getters.getCellComputedStyle(position);
+      return {
+          type: `pivot_dashboard_sorting_${sortDirection}`,
+          priority: 5,
+          horizontalAlign: "right",
+          size: GRID_ICON_EDGE_LENGTH,
+          margin: GRID_ICON_MARGIN,
+          svg: sortDirection === "asc" ? getCaretUpSvg(cellStyle) : getCaretDownSvg(cellStyle),
+          position,
+          onClick: undefined, // click is managed by ClickableCellSortIcon
+      };
+  });
 
   class CellIconPlugin extends CoreViewPlugin {
       static getters = ["doesCellHaveGridIcon", "getCellIcons", "getCellIconRect"];
@@ -71131,7 +69184,7 @@ stores.inject(MyMetaStore, storeInstance);
                   return { value: 0 };
               }
               const { columns, rows } = super.definition;
-              if (columns.length + rows.length !== domain.length) {
+              if (measure.aggregator && columns.length + rows.length !== domain.length) {
                   const values = this.getValuesToAggregate(measure, domain);
                   const aggregator = AGGREGATORS_FN[measure.aggregator];
                   if (!aggregator) {
@@ -71150,11 +69203,17 @@ stores.inject(MyMetaStore, storeInstance);
                   if (columns.find((col) => col.nameWithGranularity === symbolName)) {
                       const { colDomain } = domainToColRowDomain(this, domain);
                       const symbolIndex = colDomain.findIndex((node) => node.field === symbolName);
+                      if (symbolIndex === -1) {
+                          return new NotAvailableError();
+                      }
                       return this.getPivotHeaderValueAndFormat(colDomain.slice(0, symbolIndex + 1));
                   }
                   if (rows.find((row) => row.nameWithGranularity === symbolName)) {
                       const { rowDomain } = domainToColRowDomain(this, domain);
                       const symbolIndex = rowDomain.findIndex((row) => row.field === symbolName);
+                      if (symbolIndex === -1) {
+                          return new NotAvailableError();
+                      }
                       return this.getPivotHeaderValueAndFormat(rowDomain.slice(0, symbolIndex + 1));
                   }
                   return this.getPivotCellValueAndFormat(symbolName, domain);
@@ -75548,6 +73607,21 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
+  /**
+   * This plugin provides dynamic translation getter. In o-spreadsheet, it has
+   * no implementation, but this plugin can be replaced by another one to provide
+   * a real implementation.
+   *
+   * For example, in Odoo, the plugin is replaced by a plugin that used the
+   * module namespace to dynamically translate terms.
+   */
+  class DynamicTranslate extends UIPlugin {
+      static getters = ["dynamicTranslate"];
+      dynamicTranslate(term) {
+          return term;
+      }
+  }
+
   const genericRepeatsTransforms = [
       repeatSheetDependantCommand,
       repeatTargetDependantCommand,
@@ -77518,13 +75592,10 @@ stores.inject(MyMetaStore, storeInstance);
           const deltaCol = isBasedBefore && isCol ? thickness : 0;
           const deltaRow = isBasedBefore && !isCol ? thickness : 0;
           const toRemove = isBasedBefore ? cmd.elements.map((el) => el + thickness) : cmd.elements;
-          const originalSize = Object.fromEntries(toRemove.map((element) => {
-              const size = isCol
-                  ? this.getters.getColSize(cmd.sheetId, element)
-                  : this.getters.getUserRowSize(cmd.sheetId, element);
-              const isDefaultCol = isCol && size === DEFAULT_CELL_WIDTH;
-              return [element, isDefaultCol ? undefined : size];
-          }));
+          const originalSize = {};
+          for (const element of toRemove) {
+              originalSize[element] = this.getters.getHeaderSize(cmd.sheetId, cmd.dimension, element);
+          }
           const target = [
               {
                   left: isCol ? start + deltaCol : 0,
@@ -77568,11 +75639,11 @@ stores.inject(MyMetaStore, storeInstance);
           for (const element of toRemove) {
               const size = originalSize[element];
               const currentSize = this.getters.getHeaderSize(cmd.sheetId, cmd.dimension, currentIndex);
-              if (size && size !== currentSize) {
+              if (size !== currentSize) {
                   resizingGroups[size] ??= [];
                   resizingGroups[size].push(currentIndex);
-                  currentIndex += 1;
               }
+              currentIndex += 1;
           }
           for (const size in resizingGroups) {
               this.dispatch("RESIZE_COLUMNS_ROWS", {
@@ -79179,6 +77250,7 @@ stores.inject(MyMetaStore, storeInstance);
       .add("table_ui_resize", TableResizeUI)
       .add("datavalidation_insert", DataValidationInsertionPlugin)
       .add("checkbox_toggle", CheckboxTogglePlugin)
+      .add("dynamic_translate", DynamicTranslate)
       .add("geo_features", GeoFeaturePlugin);
   // Plugins which have a state, but which should not be shared in collaborative
   const statefulUIPluginRegistry = new Registry()
@@ -80490,11 +78562,6 @@ stores.inject(MyMetaStore, storeInstance);
       { transform: "scale(0.8)", offset: 0.33 },
       { opacity: "0", transform: "scale(1)", offset: 1 },
   ];
-  css /* scss */ `
-  .o-ripple {
-    z-index: 1;
-  }
-`;
   class RippleEffect extends owl.Component {
       static template = "o-spreadsheet-RippleEffect";
       static props = {
@@ -80666,59 +78733,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  css /* scss */ `
-  .o-sheet {
-    padding: 0 15px;
-    padding-right: 10px;
-    height: ${DESKTOP_BOTTOMBAR_HEIGHT}px;
-    border-left: 1px solid #c1c1c1;
-    border-right: 1px solid #c1c1c1;
-    margin-left: -1px;
-    cursor: pointer;
-    &:hover {
-      background-color: rgba(0, 0, 0, 0.08);
-    }
-
-    &.active {
-      color: ${ACTION_COLOR};
-      background-color: #ffffff;
-      box-shadow: 0 1px 3px 1px rgba(60, 64, 67, 0.15);
-    }
-
-    .o-sheet-icon {
-      z-index: 1;
-
-      &:hover {
-        background-color: rgba(0, 0, 0, 0.08);
-      }
-    }
-
-    .o-sheet-name {
-      outline: none;
-      padding: 2px 4px;
-
-      &.o-sheet-name-editable {
-        border-radius: 2px;
-        border: 2px solid mediumblue;
-        /* negative margins so nothing moves when the border is added */
-        margin-left: -2px;
-        margin-right: -2px;
-      }
-    }
-
-    .o-sheet-color {
-      bottom: 0;
-      left: 0;
-      height: 6px;
-      z-index: 1;
-      width: calc(100% - 1px);
-    }
-  }
-
-  .o-spreadshet-mobile .o-sheet {
-    height: ${MOBILE_BOTTOMBAR_HEIGHT}px;
-  }
-`;
   class BottomBarSheet extends owl.Component {
       static template = "o-spreadsheet-BottomBarSheet";
       static props = {
@@ -80998,20 +79012,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  // -----------------------------------------------------------------------------
-  // SpreadSheet
-  // -----------------------------------------------------------------------------
-  css /* scss */ `
-  .o-selection-statistic {
-    margin-right: 20px;
-    padding: 4px 4px 4px 8px;
-    color: #333;
-    cursor: pointer;
-    &:hover {
-      background-color: rgba(0, 0, 0, 0.08) !important;
-    }
-  }
-`;
   class BottomBarStatistic extends owl.Component {
       static template = "o-spreadsheet-BottomBarStatistic";
       static props = {
@@ -81068,77 +79068,6 @@ stores.inject(MyMetaStore, storeInstance);
   // SpreadSheet
   // -----------------------------------------------------------------------------
   const MENU_MAX_HEIGHT = 250;
-  css /* scss */ `
-  .o-spreadsheet-bottom-bar {
-    background-color: ${BACKGROUND_GRAY_COLOR};
-    padding-left: ${HEADER_WIDTH}px;
-    font-size: 15px;
-    border-top: 1px solid lightgrey;
-
-    .o-sheet-item {
-      cursor: pointer;
-      &:hover {
-        background-color: rgba(0, 0, 0, 0.08);
-      }
-    }
-
-    .o-all-sheets {
-      max-width: 70%;
-      .o-bottom-bar-fade-out {
-        background-image: linear-gradient(-90deg, #cfcfcf, transparent 1%);
-      }
-
-      .o-bottom-bar-fade-in {
-        z-index: 1;
-        background-image: linear-gradient(90deg, #cfcfcf, transparent 1%);
-      }
-
-      .o-sheet-list {
-        overflow-y: hidden;
-        overflow-x: auto;
-
-        &::-webkit-scrollbar {
-          display: none; /* Chrome */
-        }
-        -ms-overflow-style: none; /* IE and Edge */
-        scrollbar-width: none; /* Firefox */
-      }
-    }
-
-    .o-bottom-bar-arrows {
-      .o-bottom-bar-arrow {
-        cursor: pointer;
-        &:hover:not([class*="o-disabled"]) {
-          .o-icon {
-            opacity: 0.9;
-          }
-        }
-
-        .o-icon {
-          height: 18px;
-          width: 18px;
-          font-size: 18px;
-        }
-      }
-    }
-  }
-
-  .o-spreadsheet-mobile .o-spreadsheet-bottom-bar {
-    padding-left: 0;
-
-    .add-sheet-container {
-      order: 2;
-    }
-
-    .o-add-sheet {
-      margin-left: 0.5rem;
-    }
-
-    .o-all-sheets {
-      max-width: none;
-    }
-  }
-`;
   class BottomBar extends owl.Component {
       static template = "o-spreadsheet-BottomBar";
       static props = { onClick: Function };
@@ -81394,12 +79323,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  css /* scss */ `
-  .o-dashboard-clickable-cell {
-    position: absolute;
-    cursor: pointer;
-  }
-`;
   class SpreadsheetDashboard extends owl.Component {
       static template = "o-spreadsheet-SpreadsheetDashboard";
       static props = { getGridSize: Function };
@@ -81491,27 +79414,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  css /* scss */ `
-  .o-header-group {
-    .o-header-group-header {
-      z-index: ${ComponentsImportance.HeaderGroupingButton};
-      .o-group-fold-button {
-        cursor: pointer;
-        width: 15px;
-        height: 15px;
-        border: 1px solid ${HEADER_GROUPING_BORDER_COLOR};
-        .o-icon {
-          width: 7px;
-          height: 7px;
-        }
-
-        &:hover {
-          border-color: #777;
-        }
-      }
-    }
-  }
-`;
   class AbstractHeaderGroup extends owl.Component {
       static template = "o-spreadsheet-HeaderGroup";
       static props = {
@@ -81662,27 +79564,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  css /* scss */ `
-  .o-header-group-frozen-pane-border {
-    &.o-group-rows {
-      margin-top: -1px;
-      border-bottom: 3px solid ${FROZEN_PANE_HEADER_BORDER_COLOR};
-    }
-    &.o-group-columns {
-      margin-left: -1px;
-      border-right: 3px solid ${FROZEN_PANE_HEADER_BORDER_COLOR};
-    }
-  }
-
-  .o-header-group-main-pane {
-    &.o-group-rows {
-      margin-top: -2px; /* Counteract o-header-group-frozen-pane-border offset */
-    }
-    &.o-group-columns {
-      margin-left: -2px;
-    }
-  }
-`;
   class HeaderGroupContainer extends owl.Component {
       static template = "o-spreadsheet-HeaderGroupContainer";
       static props = {
@@ -81761,121 +79642,6 @@ stores.inject(MyMetaStore, storeInstance);
       };
   }
 
-  css /* scss */ `
-  .o-sidePanel {
-    display: flex;
-    flex-direction: column;
-    overflow-x: hidden;
-    background-color: white;
-    border: solid ${GRAY_300};
-    border-width: 1px 0 0 1px;
-    user-select: none;
-    color: ${TEXT_BODY};
-
-    &.collapsed {
-      padding: 8px;
-      cursor: pointer;
-
-      .o-sidePanelTitle {
-        writing-mode: vertical-rl;
-        text-orientation: mixed;
-      }
-    }
-
-    .o-sidePanelTitle {
-      line-height: 20px;
-      font-size: 16px;
-    }
-
-    .o-sidePanelHeader {
-      padding: 8px;
-      border-bottom: 1px solid ${GRAY_300};
-    }
-
-    .o-sidePanelAction {
-      padding: 5px 10px;
-      cursor: pointer;
-
-      &.active {
-        background-color: ${BUTTON_ACTIVE_BG};
-      }
-
-      &:hover {
-        background-color: ${BUTTON_HOVER_BG};
-      }
-    }
-    .o-sidePanelBody-container {
-      /* This overwrites the min-height: auto; of flex. Without this, a flex div cannot be smaller than its children */
-      min-height: 0;
-    }
-    .o-sidePanelBody {
-      overflow: auto;
-      width: 100%;
-      height: 100%;
-
-      .o-section {
-        padding: 16px;
-
-        .o-section-title {
-          font-weight: 500;
-          margin-bottom: 5px;
-        }
-
-        .o-section-subtitle {
-          font-weight: 500;
-          font-size: 13px;
-          line-height: 14px;
-          margin: 8px 0 4px 0;
-        }
-
-        .o-subsection-left {
-          display: inline-block;
-          width: 47%;
-          margin-right: 3%;
-        }
-
-        .o-subsection-right {
-          display: inline-block;
-          width: 47%;
-          margin-left: 3%;
-        }
-      }
-
-      .o-sidePanel-composer {
-        color: ${TEXT_BODY};
-      }
-    }
-
-    .o-sidePanelButtons {
-      display: flex;
-      gap: 8px;
-    }
-
-    .o-invalid {
-      border-width: 2px;
-      border-color: red;
-    }
-
-    .o-sidePanel-handle-container {
-      width: 8px;
-      position: fixed;
-      top: 50%;
-      z-index: 1;
-    }
-    .o-sidePanel-handle {
-      cursor: col-resize;
-      color: #a9a9a9;
-      .o-icon {
-        height: 25px;
-        margin-left: -5px;
-      }
-    }
-  }
-
-  .o-fw-bold {
-    font-weight: 500;
-  }
-`;
   class SidePanel extends owl.Component {
       static template = "o-spreadsheet-SidePanel";
       static props = {
@@ -82050,11 +79816,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  css `
-  .o-small-composer {
-    z-index: ${ComponentsImportance.TopBarComposer};
-  }
-`;
   class SmallBottomBar extends owl.Component {
       static components = { Composer, BottomBar, Ripple, RibbonMenu };
       static template = "o-spreadsheet-SmallBottomBar";
@@ -82142,36 +79903,12 @@ stores.inject(MyMetaStore, storeInstance);
 
   const COMPOSER_MAX_HEIGHT = 300;
   /* svg free of use from https://uxwing.com/formula-fx-icon/ */
-  const FX_SVG = /*xml*/ `
-<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 121.8 122.9' width='16' height='16' focusable='false'>
-  <path d='m28 34-4 5v2h10l-6 40c-4 22-6 28-7 30-2 2-3 3-5 3-3 0-7-2-9-4H4c-2 2-4 4-4 7s4 6 8 6 9-2 15-8c8-7 13-17 18-39l7-35 13-1 3-6H49c4-23 7-27 11-27 2 0 5 2 8 6h4c1-1 4-4 4-7 0-2-3-6-9-6-5 0-13 4-20 10-6 7-9 14-11 24h-8zm41 16c4-5 7-7 8-7s2 1 5 9l3 12c-7 11-12 17-16 17l-3-1-2-1c-3 0-6 3-6 7s3 7 7 7c6 0 12-6 22-23l3 10c3 9 6 13 10 13 5 0 11-4 18-15l-3-4c-4 6-7 8-8 8-2 0-4-3-6-10l-5-15 8-10 6-4 3 1 3 2c2 0 6-3 6-7s-2-7-6-7c-6 0-11 5-21 20l-2-6c-3-9-5-14-9-14-5 0-12 6-18 15l3 3z' fill='#BDBDBD'/>
-</svg>
-`;
-  css /* scss */ `
-  .o-topbar-composer-container {
-    height: ${DESKTOP_TOPBAR_TOOLBAR_HEIGHT}px;
-  }
-
-  .o-topbar-composer {
-    height: fit-content;
-    margin-top: -1px;
-    margin-bottom: -1px;
-    border: 1px solid;
-    font-family: ${DEFAULT_FONT};
-
-    /* In readonly we always show the fx icon if the composer is empty, not matter the focus */
-    .o-composer:empty:not(:focus):not(.active)::before,
-    &.o-topbar-composer-readonly .o-composer:empty::before {
-      content: url("data:image/svg+xml,${encodeURIComponent(FX_SVG)}");
-      position: relative;
-      top: 20%;
-    }
-  }
-
-  .user-select-text {
-    user-select: text;
-  }
-`;
+  // FIXME This svg is hardcoded in the css file. We should find a better way to handle it.
+  // const FX_SVG = /*xml*/ `
+  // <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 121.8 122.9' width='16' height='16' focusable='false'>
+  //   <path d='m28 34-4 5v2h10l-6 40c-4 22-6 28-7 30-2 2-3 3-5 3-3 0-7-2-9-4H4c-2 2-4 4-4 7s4 6 8 6 9-2 15-8c8-7 13-17 18-39l7-35 13-1 3-6H49c4-23 7-27 11-27 2 0 5 2 8 6h4c1-1 4-4 4-7 0-2-3-6-9-6-5 0-13 4-20 10-6 7-9 14-11 24h-8zm41 16c4-5 7-7 8-7s2 1 5 9l3 12c-7 11-12 17-16 17l-3-1-2-1c-3 0-6 3-6 7s3 7 7 7c6 0 12-6 22-23l3 10c3 9 6 13 10 13 5 0 11-4 18-15l-3-4c-4 6-7 8-8 8-2 0-4-3-6-10l-5-15 8-10 6-4 3 1 3 2c2 0 6-3 6-7s-2-7-6-7c-6 0-11 5-21 20l-2-6c-3-9-5-14-9-14-5 0-12 6-18 15l3 3z' fill='#BDBDBD'/>
+  // </svg>
+  // `;
   class TopBarComposer extends owl.Component {
       static template = "o-spreadsheet-TopBarComposer";
       static props = {};
@@ -82207,18 +79944,6 @@ stores.inject(MyMetaStore, storeInstance);
           style.height = this.focus === "inactive" ? `${DESKTOP_TOPBAR_TOOLBAR_HEIGHT}px` : "fit-content";
           return cssPropertiesToCss(style);
       }
-      get containerStyle() {
-          if (this.focus === "inactive") {
-              return cssPropertiesToCss({
-                  "border-color": SEPARATOR_COLOR,
-                  "border-right": "none",
-              });
-          }
-          return cssPropertiesToCss({
-              "border-color": SELECTION_BORDER_COLOR,
-              "z-index": String(ComponentsImportance.TopBarComposer),
-          });
-      }
       onFocus(selection) {
           this.composerFocusStore.focusComposer(this.composerInterface, { selection });
       }
@@ -82308,79 +80033,6 @@ stores.inject(MyMetaStore, storeInstance);
   // -----------------------------------------------------------------------------
   // Border Editor
   // -----------------------------------------------------------------------------
-  css /* scss */ `
-  .o-border-selector {
-    padding: 4px;
-    background-color: white;
-
-    .o-divider {
-      border-right: 1px solid ${GRAY_300};
-      margin: 0 6px;
-    }
-
-    .o-border-selector-section {
-      .o-dropdown-line {
-        height: 30px;
-        margin: 1px;
-        .o-line-item {
-          padding: 4px;
-          width: 26px;
-          height: 26px;
-          &.active {
-            background-color: ${BUTTON_ACTIVE_BG};
-          }
-        }
-      }
-      .o-border-style-tool {
-        padding: 0px 3px;
-        margin: 2px;
-        height: 25px;
-      }
-    }
-  }
-
-  .o-border-style-dropdown {
-    background: #ffffff;
-    padding: 4px;
-    .o-dropdown-line {
-    }
-    .o-style-preview {
-      margin: 7px 5px 7px 5px;
-      width: 60px;
-      height: 5px;
-    }
-    .o-style-thin {
-      border-bottom: 1px solid #000000;
-    }
-    .o-style-medium {
-      border-bottom: 2px solid #000000;
-    }
-    .o-style-thick {
-      border-bottom: 3px solid #000000;
-    }
-    .o-style-dashed {
-      border-bottom: 1px dashed #000000;
-    }
-    .o-style-dotted {
-      border-bottom: 1px dotted #000000;
-    }
-    .o-dropdown-border-type {
-      cursor: pointer;
-      &:not(.o-disabled):not(.active):hover {
-        background-color: ${BUTTON_HOVER_BG};
-      }
-    }
-    .o-dropdown-border-check {
-      width: 20px;
-      font-size: 12px;
-    }
-    .o-border-picker-button {
-      padding: 0px !important;
-      margin: 5px 0px 0px 0px !important;
-      height: 25px !important;
-    }
-  }
-`;
   class BorderEditor extends owl.Component {
       static template = "o-spreadsheet-BorderEditor";
       static props = {
@@ -82931,90 +80583,6 @@ stores.inject(MyMetaStore, storeInstance);
   // -----------------------------------------------------------------------------
   // TopBar
   // -----------------------------------------------------------------------------
-  css /* scss */ `
-  .o-topbar-divider {
-    border-right: 1px solid ${SEPARATOR_COLOR};
-    width: 0;
-    margin: 0 6px;
-    height: 30px;
-  }
-
-  .o-toolbar-button {
-    height: 30px;
-  }
-
-  .o-spreadsheet-topbar {
-    line-height: 1.2;
-    font-size: 14px;
-    font-weight: 500;
-    background-color: #fff;
-
-    .o-topbar-top {
-      border-bottom: 1px solid ${SEPARATOR_COLOR};
-      padding: 2px 10px;
-
-      /* Menus */
-      .o-topbar-topleft {
-        .o-topbar-menu {
-          padding: 4px 6px;
-          margin: 0 2px;
-
-          &.active {
-            background-color: ${BUTTON_ACTIVE_BG};
-            color: ${BUTTON_ACTIVE_TEXT_COLOR};
-          }
-        }
-      }
-    }
-
-    .irregularity-map {
-      border-top: 1px solid ${SEPARATOR_COLOR};
-      height: ${DESKTOP_TOPBAR_TOOLBAR_HEIGHT}px;
-
-      .alert-info {
-        border-left: 3px solid ${ALERT_INFO_BORDER};
-      }
-    }
-
-    .o-topbar-composer {
-      flex-grow: 1;
-    }
-
-    /* Toolbar */
-    .o-topbar-toolbar {
-      height: ${DESKTOP_TOPBAR_TOOLBAR_HEIGHT}px;
-
-      .o-readonly-toolbar {
-        background-color: ${BACKGROUND_HEADER_COLOR};
-        padding-left: 18px;
-        padding-right: 18px;
-      }
-
-      /* Toolbar */
-      .o-toolbar-tools {
-        cursor: default;
-      }
-    }
-  }
-
-  .o-spreadsheet-mobile {
-    .o-topbar-toolbar {
-      height: ${MOBILE_TOPBAR_TOOLBAR_HEIGHT}px;
-    }
-    .o-topbar-divider {
-      border-width: 2px;
-      border-radius: 4px;
-    }
-
-    .o-toolbar-button {
-      height: 35px;
-      width: 31px;
-      .o-toolbar-button.o-mobile-disabled * {
-      color: ${DISABLED_TEXT_COLOR};
-      cursor: not-allowed;
-    }
-  }
-`;
   class TopBar extends owl.Component {
       static template = "o-spreadsheet-TopBar";
       static props = {
@@ -83288,251 +80856,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  // -----------------------------------------------------------------------------
-  // SpreadSheet
-  // -----------------------------------------------------------------------------
-  const CARET_DOWN_SVG = /*xml*/ `
-<svg xmlns='http://www.w3.org/2000/svg' width='7' height='4' viewBox='0 0 7 4'>
-  <polygon fill='%23374151' points='3.5 4 7 0 0 0'/>
-</svg>
-`;
-  css /* scss */ `
-  .o-spreadsheet {
-    position: relative;
-    display: grid;
-    font-size: 14px;
-
-    .text-muted {
-      color: ${TEXT_BODY_MUTED} !important;
-    }
-    .o-disabled {
-      opacity: 0.4;
-      cursor: default;
-      pointer-events: none;
-    }
-
-    &,
-    *,
-    *:before,
-    *:after {
-      /* rtl not supported ATM */
-      direction: ltr;
-    }
-    .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-hoverable-button {
-      border-radius: 2px;
-      cursor: pointer;
-      .o-icon {
-        color: ${TEXT_BODY};
-      }
-      &:not(.o-disabled):not(.active):hover {
-        background-color: ${BUTTON_HOVER_BG};
-        color: ${BUTTON_HOVER_TEXT_COLOR};
-        .o-icon {
-          color: ${BUTTON_HOVER_TEXT_COLOR};
-        }
-      }
-      &.active {
-        background-color: ${BUTTON_ACTIVE_BG};
-        color: ${BUTTON_ACTIVE_TEXT_COLOR};
-        .o-icon {
-          color: ${BUTTON_ACTIVE_TEXT_COLOR};
-        }
-      }
-    }
-
-    .o-grid-container {
-      display: grid;
-      background-color: ${HEADER_GROUPING_BACKGROUND_COLOR};
-
-      .o-top-left {
-        border: 1px solid ${GRID_BORDER_COLOR};
-        margin-bottom: -1px;
-        margin-right: -1px;
-      }
-
-      .o-column-groups {
-        grid-column-start: 2;
-        border-top: 1px solid ${GRID_BORDER_COLOR};
-      }
-
-      .o-row-groups {
-        grid-row-start: 2;
-      }
-
-      .o-group-grid {
-        border-top: 1px solid ${GRID_BORDER_COLOR};
-        border-left: 1px solid ${GRID_BORDER_COLOR};
-      }
-    }
-
-    .o-input {
-      min-width: 0px;
-      padding: 1px 0;
-      width: 100%;
-      outline: none;
-      border-color: ${GRAY_300};
-      color: ${GRAY_900};
-
-      &::placeholder {
-        opacity: 0.5;
-      }
-      &:focus {
-        border-color: ${ACTION_COLOR};
-      }
-    }
-
-    select.o-input {
-      cursor: pointer;
-      border-width: 0 0 1px 0;
-      padding: 1px 6px 1px 0px;
-
-      appearance: none;
-      -webkit-appearance: none;
-      -moz-appearance: none;
-      background: transparent url("data:image/svg+xml,${encodeURIComponent(CARET_DOWN_SVG)}")
-        no-repeat right center;
-      text-overflow: ellipsis;
-
-      &:disabled {
-        color: ${DISABLED_TEXT_COLOR};
-        opacity: 0.4;
-        cursor: default;
-      }
-    }
-
-    .o-input[type="text"] {
-      border-width: 0 0 1px 0;
-    }
-
-    .o-input[type="number"],
-    .o-number-input {
-      border-width: 0 0 1px 0;
-      /* Remove number input arrows */
-      appearance: textfield;
-      &::-webkit-outer-spin-button,
-      &::-webkit-inner-spin-button {
-        -webkit-appearance: none;
-        margin: 0;
-      }
-    }
-  }
-
-  .o-two-columns {
-    grid-column: 1 / 3;
-  }
-
-  .o-text-icon {
-    vertical-align: middle;
-  }
-`;
-  // -----------------------------------------------------------------------------
-  // GRID STYLE
-  // -----------------------------------------------------------------------------
-  css /* scss */ `
-  .o-grid {
-    position: relative;
-    overflow: hidden;
-    background-color: ${BACKGROUND_GRAY_COLOR};
-    &:focus {
-      outline: none;
-    }
-
-    > canvas {
-      box-sizing: content-box;
-      border-bottom: 1px solid #e2e3e3;
-      border-right: 1px solid #e2e3e3;
-    }
-
-    .o-grid-overlay {
-      position: absolute;
-      outline: none;
-    }
-  }
-
-  .o-button {
-    border: 1px solid;
-    border-radius: 4px;
-    font-weight: 500;
-    font-size: 14px;
-    height: 32px;
-    line-height: 16px;
-    flex-grow: 1;
-    background-color: ${BUTTON_BG};
-    border: 1px solid ${GRAY_200};
-    color: ${TEXT_BODY};
-
-    &:disabled {
-      color: ${DISABLED_TEXT_COLOR};
-    }
-
-    &.primary {
-      background-color: ${PRIMARY_BUTTON_BG};
-      border-color: ${PRIMARY_BUTTON_BG};
-      color: #fff;
-      &:hover:enabled {
-        color: #fff;
-        background-color: ${PRIMARY_BUTTON_HOVER_BG};
-      }
-      &:active:enabled {
-        background-color: ${PRIMARY_BUTTON_ACTIVE_BG};
-        color: ${PRIMARY_BUTTON_BG};
-      }
-      &.o-disabled,
-      &:disabled {
-        opacity: 0.5;
-      }
-    }
-
-    &:hover:enabled {
-      color: ${BUTTON_HOVER_TEXT_COLOR};
-      background-color: ${BUTTON_HOVER_BG};
-    }
-    &:active:enabled {
-      color: ${BUTTON_ACTIVE_TEXT_COLOR};
-      background-color: ${BUTTON_ACTIVE_BG};
-    }
-
-    &.o-disabled,
-    &:disabled {
-      opacity: 0.8;
-    }
-
-    &.o-button-danger:hover {
-      color: #ffffff;
-      background: ${ALERT_DANGER_BORDER};
-    }
-  }
-
-  .o-button-link {
-    cursor: pointer;
-    text-decoration: none;
-    color: ${ACTION_COLOR};
-    font-weight: 500;
-    &:hover,
-    &:active {
-      color: ${ACTION_COLOR_HOVER};
-    }
-  }
-
-  .o-button-icon {
-    cursor: pointer;
-    color: ${TEXT_BODY_MUTED};
-    font-weight: 500;
-    &:hover,
-    &:active {
-      color: ${TEXT_BODY};
-    }
-  }
-
-  .o-spreadsheet-bottombar-wrapper {
-    z-index: ${ComponentsImportance.ScrollBar + 1};
-  }
-`;
   class Spreadsheet extends owl.Component {
       static template = "o-spreadsheet-Spreadsheet";
       static props = {
@@ -88389,6 +85712,8 @@ stores.inject(MyMetaStore, storeInstance);
   exports.coreTypes = coreTypes;
   exports.findCellInNewZone = findCellInNewZone;
   exports.functionCache = functionCache;
+  exports.getCaretDownSvg = getCaretDownSvg;
+  exports.getCaretUpSvg = getCaretUpSvg;
   exports.helpers = helpers;
   exports.hooks = hooks;
   exports.invalidateCFEvaluationCommands = invalidateCFEvaluationCommands;
@@ -88409,9 +85734,9 @@ stores.inject(MyMetaStore, storeInstance);
   exports.tokenize = tokenize;
 
 
-  __info__.version = "19.1.0-alpha.0";
-  __info__.date = "2025-09-11T07:49:49.483Z";
-  __info__.hash = "587c928";
+  __info__.version = "19.1.0-alpha.2";
+  __info__.date = "2025-09-19T07:26:49.306Z";
+  __info__.hash = "8cc543d";
 
 
 })(this.o_spreadsheet = this.o_spreadsheet || {}, owl);