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

package/dist/o-spreadsheet.esm.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
  */
 
 import { useEnv, useSubEnv, onWillUnmount, useComponent, status, Component, useRef, onMounted, useEffect, App, blockDom, useState, onPatched, useExternalListener, onWillUpdateProps, onWillStart, onWillPatch, xml, useChildSubEnv, markRaw, toRaw } from '@odoo/owl';
@@ -587,7 +587,6 @@ var DIRECTION;
 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";
@@ -597,15 +596,10 @@ const SELECTION_BORDER_COLOR = "#3266ca";
 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";
@@ -617,30 +611,9 @@ const CHART_WATERFALL_SUBTOTAL_COLOR = "#AAAAAA";
 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;
@@ -738,9 +711,7 @@ const MIN_COL_WIDTH = 5;
 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;
@@ -748,7 +719,6 @@ const AUTOFILL_EDGE_LENGTH = 8;
 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;
@@ -763,11 +733,6 @@ const MOBILE_WIDTH_BREAKPOINT = 768;
 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",
@@ -821,23 +786,6 @@ const FORBIDDEN_SHEETNAME_CHARS = ["'", "*", "?", "/", "\\", "[", "]"];
 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;
@@ -888,6 +836,7 @@ const tokenColors = {
     ARG_SEPARATOR: functionColor,
     ORPHAN_RIGHT_PAREN: "#ff0000",
 };
+const DRAG_THRESHOLD = 5; // in pixels, to avoid unwanted drag when clicking
 
 //------------------------------------------------------------------------------
 // Miscellaneous
@@ -1366,8 +1315,19 @@ function memoize(func) {
         },
     }[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];
@@ -10663,153 +10623,6 @@ class ComposerFocusStore extends SpreadsheetStore {
     }
 }
 
-/**
- * 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");
@@ -16082,8 +15895,9 @@ function interactiveSort(env, sheetId, anchor, zone, sortDirection, sortOptions)
 }
 
 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 = [];
@@ -24031,15 +23845,6 @@ function getNextNonEmptyBar(bars, startIndex) {
     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),
@@ -24537,18 +24342,15 @@ function createScorecardChartRuntime(chart, getters) {
     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,
@@ -24848,9 +24650,8 @@ class ScorecardChart extends Component {
         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() {
         useEffect(this.createChart.bind(this), () => {
@@ -27023,12 +26824,12 @@ function getDatasetAxisId(definition, dataset) {
     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: {
@@ -27596,7 +27397,7 @@ function createBarChartRuntime(chart, getters) {
             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),
@@ -27783,13 +27584,6 @@ const zoomWindowPlugin = {
     },
 };
 
-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),
@@ -28827,7 +28621,7 @@ function createComboChartRuntime(chart, getters) {
             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),
@@ -28973,7 +28767,7 @@ function createFunnelChartRuntime(chart, getters) {
             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),
@@ -29210,8 +29004,7 @@ function createGaugeChartRuntime(chart, getters) {
         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,
@@ -29395,7 +29188,7 @@ function createGeoChartRuntime(chart, getters) {
             layout: getChartLayout(definition, chartData),
             scales: getGeoChartScales(definition, chartData),
             plugins: {
-                title: getChartTitle(definition),
+                title: getChartTitle(definition, getters),
                 tooltip: getGeoChartTooltip(definition, chartData),
                 legend: { display: false },
             },
@@ -29560,7 +29353,7 @@ function createLineChartRuntime(chart, getters) {
             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),
@@ -29697,7 +29490,7 @@ function createPieChartRuntime(chart, getters) {
                 : 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),
@@ -29851,7 +29644,7 @@ function createPyramidChartRuntime(chart, getters) {
             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),
@@ -30000,7 +29793,7 @@ function createRadarChartRuntime(chart, getters) {
             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),
@@ -30155,7 +29948,7 @@ function createScatterChartRuntime(chart, getters) {
             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),
@@ -30294,7 +30087,7 @@ function createSunburstChartRuntime(chart, getters) {
             ...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),
@@ -30444,7 +30237,7 @@ function createTreeMapChartRuntime(chart, getters) {
             ...CHART_COMMON_OPTIONS,
             layout: getChartLayout(definition, chartData),
             plugins: {
-                title: getChartTitle(definition),
+                title: getChartTitle(definition, getters),
                 legend: { display: false },
                 tooltip: getTreeMapChartTooltip(definition, chartData),
             },
@@ -30607,7 +30400,7 @@ function createWaterfallChartRuntime(chart, getters) {
             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),
@@ -31601,6 +31394,81 @@ function getCarouselItemTitle(getters, item) {
     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.
  */
@@ -31655,59 +31523,6 @@ function useTimeOut() {
     };
 }
 
-//------------------------------------------------------------------------------
-// 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 Component {
     static template = "o-spreadsheet-Menu";
     static props = {
@@ -31884,16 +31699,6 @@ function usePopoverContainer() {
     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 Component {
     static template = "o-spreadsheet-Popover";
     static props = {
@@ -31916,7 +31721,6 @@ class Popover extends Component {
         onMouseWheel: () => { },
         onPopoverMoved: () => { },
         onPopoverHidden: () => { },
-        zIndex: ComponentsImportance.Popover,
     };
     popoverRef = useRef("popover");
     popoverContentRef = useRef("popoverContent");
@@ -31937,11 +31741,6 @@ class Popover extends Component {
         // the element in rendered, so we can still set its position
         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");
@@ -32132,12 +31931,6 @@ class TopRightPopoverContext extends PopoverPositionContext {
 //------------------------------------------------------------------------------
 // Context MenuPopover Component
 //------------------------------------------------------------------------------
-css /* scss */ `
-  .o-menu-wrapper {
-    padding: ${MENU_VERTICAL_PADDING}px 0px;
-    background-color: white;
-  }
-`;
 const TIMEOUT_DELAY = 250;
 class MenuPopover extends Component {
     static template = "o-spreadsheet-Menu-Popover";
@@ -32383,7 +32176,11 @@ class CarouselFigure extends Component {
         onFigureDeleted: Function,
         editFigureStyle: { type: Function, optional: true },
     };
-    static components = { ChartDashboardMenu };
+    static components = { ChartDashboardMenu, MenuPopover };
+    carouselTabsRef = useRef("carouselTabs");
+    carouselTabsDropdownRef = useRef("carouselTabsDropdown");
+    menuState = useState({ isOpen: false, anchorRect: null, menuItems: [] });
+    hiddenItems = [];
     animationStore;
     setup() {
         this.animationStore = useStore(ChartAnimationStore);
@@ -32394,6 +32191,7 @@ class CarouselFigure extends Component {
             else {
                 this.props.editFigureStyle?.({ "pointer-events": "auto" });
             }
+            this.updateTabsVisibility();
         });
     }
     get carousel() {
@@ -32453,6 +32251,49 @@ class CarouselFigure extends Component {
         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 Component {
@@ -32530,79 +32371,6 @@ figureRegistry.add("carousel", {
 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 Component {
     static template = "o-spreadsheet-FigureComponent";
     static props = {
@@ -32647,7 +32415,6 @@ class FigureComponent extends Component {
             top: `${y}px`,
             width: `${width}px`,
             height: `${height}px`,
-            "z-index": String(ComponentsImportance.Figure + (this.isSelected ? 1 : 0)),
         });
     }
     getResizerPosition(resizer) {
@@ -32926,21 +32693,6 @@ class CellPopoverStore extends SpreadsheetStore {
 }
 
 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 Component {
     static maxSize = { maxHeight: ERROR_TOOLTIP_MAX_HEIGHT };
     static template = "o-spreadsheet-ErrorToolTip";
@@ -33041,34 +32793,6 @@ class Collapse extends Component {
     }
 }
 
-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 Component {
     static template = "o-spreadsheet-SidePanelCollapsible";
     static props = {
@@ -33705,27 +33429,6 @@ function updateSelectionWithArrowKeys(ev, selection) {
     }
 }
 
-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 Component {
     static template = "o-spreadsheet-TextValueProvider";
     static props = {
@@ -34027,36 +33730,6 @@ class FunctionDescriptionProvider extends Component {
 }
 
 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 Component {
     static template = "o-spreadsheet-SpeechBubble";
     static props = { content: String, anchorRect: Object };
@@ -34085,85 +33758,6 @@ const CLOSE_ICON_RADIUS = 9;
 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 Component {
     static template = "o-spreadsheet-Composer";
     static props = {
@@ -35836,30 +35430,6 @@ class StandaloneComposerStore extends AbstractComposerStore {
     }
 }
 
-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 Component {
     static template = "o-spreadsheet-StandaloneComposer";
     static props = {
@@ -35927,17 +35497,6 @@ class StandaloneComposer extends Component {
     }
 }
 
-css /* scss */ `
-  .o-dv-input {
-    &.o-invalid {
-      background-color: #ffdddd;
-    }
-    .error-icon {
-      right: 7px;
-      top: 7px;
-    }
-  }
-`;
 class CriterionInput extends Component {
     static template = "o-spreadsheet-CriterionInput";
     static props = {
@@ -36105,8 +35664,6 @@ function startDnd(onPointerMove, onPointerUp) {
     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;
@@ -36115,170 +35672,6 @@ const ITEM_GAP = 2;
 const CONTENT_WIDTH = ITEMS_PER_LINE * (ITEM_EDGE_LENGTH + 2 * ITEM_BORDER_WIDTH) + (ITEMS_PER_LINE - 1) * ITEM_GAP;
 const INNER_GRADIENT_WIDTH = CONTENT_WIDTH - 2 * ITEM_BORDER_WIDTH;
 const INNER_GRADIENT_HEIGHT = CONTENT_WIDTH - 30 - 2 * ITEM_BORDER_WIDTH;
-const CONTAINER_WIDTH = CONTENT_WIDTH + 2 * PICKER_PADDING;
-css /* scss */ `
-  .o-color-picker {
-    padding: ${PICKER_PADDING}px 0;
-    /* FIXME: this is useless, overiden by the popover container */
-    box-shadow: 1px 2px 5px 2px rgba(51, 51, 51, 0.15);
-    background-color: white;
-    line-height: 1.2;
-    overflow-y: auto;
-    overflow-x: hidden;
-    width: ${CONTAINER_WIDTH}px;
-
-    .o-color-picker-section-name {
-      margin: 0px ${ITEM_BORDER_WIDTH}px;
-      padding: 4px ${PICKER_PADDING}px;
-    }
-    .colors-grid {
-      display: grid;
-      padding: ${LINE_VERTICAL_PADDING}px ${PICKER_PADDING}px;
-      grid-template-columns: repeat(${ITEMS_PER_LINE}, 1fr);
-      grid-gap: ${ITEM_GAP}px;
-    }
-    .o-color-picker-toggler-button {
-      display: flex;
-      .o-color-picker-toggler-sign {
-        display: flex;
-        margin: auto auto;
-        width: 55%;
-        height: 55%;
-        .o-icon {
-          width: 100%;
-          height: 100%;
-        }
-      }
-    }
-    .o-color-picker-line-item {
-      width: ${ITEM_EDGE_LENGTH + 2 * ITEM_BORDER_WIDTH}px;
-      height: ${ITEM_EDGE_LENGTH + 2 * ITEM_BORDER_WIDTH}px;
-      margin: 0px;
-      border-radius: 50px;
-      border: ${ITEM_BORDER_WIDTH}px solid #666666;
-      padding: 0px;
-      font-size: 16px;
-      background: white;
-      &:hover {
-        background-color: rgba(0, 0, 0, 0.08);
-        outline: 1px solid gray;
-        cursor: pointer;
-      }
-    }
-    .o-buttons {
-      padding: ${PICKER_PADDING}px;
-      display: flex;
-      .o-cancel {
-        border: ${ITEM_BORDER_WIDTH}px solid #c0c0c0;
-        width: 100%;
-        padding: 5px;
-        font-size: 14px;
-        background: white;
-        border-radius: 4px;
-        &:hover:enabled {
-          background-color: rgba(0, 0, 0, 0.08);
-        }
-      }
-    }
-    .o-add-button {
-      border: ${ITEM_BORDER_WIDTH}px solid #c0c0c0;
-      padding: 4px;
-      background: white;
-      border-radius: 4px;
-      &:hover:enabled {
-        background-color: rgba(0, 0, 0, 0.08);
-      }
-    }
-    .o-separator {
-      border-bottom: ${MENU_SEPARATOR_BORDER_WIDTH}px solid ${SEPARATOR_COLOR};
-      margin-top: ${MENU_SEPARATOR_PADDING}px;
-      margin-bottom: ${MENU_SEPARATOR_PADDING}px;
-    }
-
-    .o-custom-selector {
-      padding: ${PICKER_PADDING + 2}px ${PICKER_PADDING}px;
-      position: relative;
-      .o-gradient {
-        margin-bottom: ${MAGNIFIER_EDGE / 2}px;
-        border: ${ITEM_BORDER_WIDTH}px solid #c0c0c0;
-        width: ${INNER_GRADIENT_WIDTH + 2 * ITEM_BORDER_WIDTH}px;
-        height: ${INNER_GRADIENT_HEIGHT + 2 * ITEM_BORDER_WIDTH}px;
-        position: relative;
-      }
-
-      .magnifier {
-        height: ${MAGNIFIER_EDGE}px;
-        width: ${MAGNIFIER_EDGE}px;
-        border-radius: 50%;
-        border: 2px solid #fff;
-        box-shadow: 0px 0px 3px #c0c0c0;
-        position: absolute;
-        z-index: 2;
-      }
-      .saturation {
-        background: linear-gradient(to right, #fff 0%, transparent 100%);
-      }
-      .lightness {
-        background: linear-gradient(to top, #000 0%, transparent 100%);
-      }
-      .o-hue-picker {
-        border: ${ITEM_BORDER_WIDTH}px solid #c0c0c0;
-        width: 100%;
-        height: 12px;
-        border-radius: 4px;
-        background: linear-gradient(
-          to right,
-          hsl(0 100% 50%) 0%,
-          hsl(0.2turn 100% 50%) 20%,
-          hsl(0.3turn 100% 50%) 30%,
-          hsl(0.4turn 100% 50%) 40%,
-          hsl(0.5turn 100% 50%) 50%,
-          hsl(0.6turn 100% 50%) 60%,
-          hsl(0.7turn 100% 50%) 70%,
-          hsl(0.8turn 100% 50%) 80%,
-          hsl(0.9turn 100% 50%) 90%,
-          hsl(1turn 100% 50%) 100%
-        );
-        position: relative;
-        cursor: crosshair;
-      }
-      .o-hue-slider {
-        margin-top: -3px;
-      }
-      .o-custom-input-preview {
-        padding: 2px 0px;
-        display: flex;
-        input {
-          width: 50%;
-          border-radius: 4px;
-          padding: 4px 23px 4px 10px;
-          height: 24px;
-          border: 1px solid #c0c0c0;
-          margin-right: 2px;
-        }
-        .o-wrong-color {
-          /* FIXME bootstrap class instead? */
-          outline-color: red;
-          border-color: red;
-          &:focus {
-            outline-style: solid;
-            outline-width: 1px;
-          }
-        }
-      }
-      .o-custom-input-buttons {
-        padding: 2px 0px;
-        display: flex;
-        justify-content: end;
-      }
-      .o-color-preview {
-        border: 1px solid #c0c0c0;
-        border-radius: 4px;
-        width: 50%;
-      }
-    }
-  }
-`;
 class ColorPicker extends Component {
     static template = "o-spreadsheet-ColorPicker";
     static props = {
@@ -36433,21 +35826,12 @@ class Section extends Component {
     };
 }
 
-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 Component {
     static template = "o-spreadsheet.RoundColorPicker";
     static components = { Section, ColorPicker };
@@ -36484,12 +35868,6 @@ class RoundColorPicker extends Component {
     }
 }
 
-css /* scss */ `
-  .o-dv-list-item-delete {
-    color: #666666;
-    cursor: pointer;
-  }
-`;
 class ListCriterionForm extends CriterionForm {
     static template = "o-spreadsheet-ListCriterionForm";
     static components = { CriterionInput, RoundColorPicker };
@@ -37203,36 +36581,6 @@ class SelectionInputStore extends SpreadsheetStore {
     }
 }
 
-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/>`
@@ -37731,44 +37079,6 @@ class FilterMenuCriterion extends Component {
     }
 }
 
-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 Component {
     static template = "o-spreadsheet.Checkbox";
     static props = {
@@ -37976,60 +37286,6 @@ class FilterMenuValueList extends Component {
     }
 }
 
-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 Component {
     static template = "o-spreadsheet-FilterMenu";
     static props = {
@@ -38153,55 +37409,6 @@ const FilterMenuPopoverBuilder = {
     },
 };
 
-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 Component {
     static template = "o-spreadsheet-LinkDisplay";
     static props = {
@@ -38432,54 +37639,6 @@ linkMenuRegistry.add("sheet", {
     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 Component {
     static template = "o-spreadsheet-LinkEditor";
     static props = {
@@ -39207,29 +38366,6 @@ function buildTableStyle(name, templateName, primaryColor) {
     };
 }
 
-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
 // -----------------------------------------------------------------------------
@@ -39326,6 +38462,14 @@ function getCaretDownSvg(color) {
         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",
@@ -49095,37 +48239,6 @@ function adjustIndexWithinBounds(index, position, max) {
     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 Component {
     static template = "o-spreadsheet-Autofill";
     static props = {
@@ -49210,16 +48323,6 @@ class TooltipComponent extends Component {
   `;
 }
 
-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 Component {
     static template = "o-spreadsheet-ClientTag";
     static props = {
@@ -49769,28 +48872,6 @@ class CellComposerStore extends AbstractComposerStore {
 
 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.
@@ -49916,6 +48997,7 @@ class GridComposer extends Component {
         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`,
@@ -50186,24 +49268,6 @@ function getAxis(getters, figureUI, dnd, axisType) {
     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
@@ -50432,9 +49496,16 @@ class FiguresContainer extends Component {
             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);
@@ -50628,38 +49699,6 @@ class FiguresContainer extends Component {
     }
 }
 
-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 Component {
     static template = "o-spreadsheet-ValidationMessages";
     static props = {
@@ -50681,20 +49720,6 @@ class ValidationMessages extends Component {
     }
 }
 
-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 Component {
     static template = "o-spreadsheet-GridAddRowsFooter";
     static props = {
@@ -50939,14 +49964,6 @@ class HoveredIconStore extends SpreadsheetStore {
     }
 }
 
-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);
@@ -51192,7 +50209,6 @@ class GridPopover extends Component {
     };
     static components = { Popover };
     cellPopovers;
-    zIndex = ComponentsImportance.GridPopover;
     setup() {
         this.cellPopovers = useStore(CellPopoverStore);
     }
@@ -51511,58 +50527,6 @@ class AbstractResizer extends Component {
         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,
@@ -51705,57 +50669,6 @@ class ColResizer extends AbstractResizer {
         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,
@@ -51896,18 +50809,6 @@ class RowResizer extends AbstractResizer {
         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 Component {
     static props = {
         onOpenContextMenu: Function,
@@ -52862,17 +51763,6 @@ function useWheelHandler(handler) {
     return onMouseWheel;
 }
 
-css /* scss */ `
-  .o-border {
-    position: absolute;
-    &:hover {
-      cursor: grab;
-    }
-  }
-  .o-moving {
-    cursor: grabbing;
-  }
-`;
 class Border extends Component {
     static template = "o-spreadsheet-Border";
     static props = {
@@ -52911,32 +51801,6 @@ class Border extends Component {
 }
 
 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 Component {
     static template = "o-spreadsheet-Corner";
     static props = {
@@ -53002,11 +51866,6 @@ function orientationToDir(or) {
     return { dirX, dirY };
 }
 
-css /*SCSS*/ `
-  .o-highlight {
-    z-index: ${ComponentsImportance.Highlight};
-  }
-`;
 class Highlight extends Component {
     static template = "o-spreadsheet-Highlight";
     static props = {
@@ -53141,24 +52000,6 @@ let ScrollBar$1 = class ScrollBar {
     }
 };
 
-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 Component {
     static props = {
         width: { type: Number, optional: true },
@@ -53321,24 +52162,6 @@ function useAutofocus({ refName }) {
     }, () => [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 Component {
     static template = "o-spreadsheet-TextInput";
     static props = {
@@ -53420,21 +52243,6 @@ class TextInput extends Component {
     }
 }
 
-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 Component {
     static template = "o-spreadsheet-ActionButton";
     static props = {
@@ -53487,41 +52295,6 @@ class ActionButton extends Component {
     }
 }
 
-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 Component {
     static template = "o-spreadsheet-ColorPickerWidget";
     static props = {
@@ -53554,26 +52327,6 @@ class ColorPickerWidget extends Component {
     }
 }
 
-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 Component {
     static template = "o-spreadsheet-FontSizeEditor";
     static props = {
@@ -53649,41 +52402,6 @@ class FontSizeEditor extends Component {
     }
 }
 
-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 Component {
     static template = "o-spreadsheet.TextStyler";
     static components = { ColorPickerWidget, ActionButton, FontSizeEditor };
@@ -54511,27 +53229,6 @@ class BarConfigPanel extends GenericChartConfigPanel {
     }
 }
 
-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 Component {
     static template = "o-spreadsheet.BadgeSelection";
     static props = {
@@ -54541,13 +53238,6 @@ class BadgeSelection extends Component {
     };
 }
 
-css /* scss */ `
-  .o-chart-title-designer {
-    > span {
-      height: 30px;
-    }
-  }
-`;
 class ChartTitle extends Component {
     static template = "o-spreadsheet.ChartTitle";
     static components = { Section, TextStyler };
@@ -54609,31 +53299,12 @@ class AxisDesignEditor extends Component {
     }
 }
 
-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 Component {
     static template = "o-spreadsheet.RadioSelection";
     static props = {
@@ -55130,45 +53801,6 @@ class GaugeChartConfigPanel extends Component {
     }
 }
 
-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 Component {
     static template = "o-spreadsheet-GaugeChartDesignPanel";
     static components = {
@@ -55634,7 +54266,7 @@ class ScorecardChartDesignPanel extends Component {
         return SCORECARD_CHART_TITLE_FONT_SIZE;
     }
     translate(term) {
-        return _t(term);
+        return this.env.model.getters.dynamicTranslate(term);
     }
     setColor(color, colorPickerId) {
         switch (colorPickerId) {
@@ -55974,40 +54606,6 @@ chartSidePanelComponentRegistry
     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 Component {
     static template = "o-spreadsheet-ChartTypePicker";
     static components = { Section, Popover };
@@ -56110,38 +54708,6 @@ class MainChartPanelStore extends SpreadsheetStore {
     }
 }
 
-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 Component {
     static template = "o-spreadsheet-ChartPanel";
     static components = { Section, ChartTypePicker };
@@ -56230,26 +54796,6 @@ class ChartPanel extends Component {
     }
 }
 
-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 Component {
     static template = "o-spreadsheet-IconPicker";
     static props = {
@@ -56287,77 +54833,6 @@ function useHighlights(highlightProvider) {
     }, () => [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 Component {
     static template = "o-spreadsheet-ConditionalFormatPreview";
     icons = ICONS;
@@ -56476,95 +54951,6 @@ class ConditionalFormatPreviewList extends Component {
     }
 }
 
-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 Component {
     static template = "o-spreadsheet-ConditionalFormattingEditor";
     static props = {
@@ -57094,25 +55480,6 @@ class ConditionalFormattingPanel extends Component {
  */
 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 Component {
     static template = "o-spreadsheet-CustomCurrencyPanel";
     static components = { Section, Checkbox };
@@ -57186,7 +55553,7 @@ class CustomCurrencyPanel extends Component {
             });
         }
         const emptyCurrency = {
-            name: _t(CustomCurrencyTerms.Custom),
+            name: CustomCurrencyTerms.Custom,
             code: "",
             symbol: "",
             decimalPlaces: 2,
@@ -57345,31 +55712,6 @@ class DataValidationEditor extends Component {
     }
 }
 
-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 Component {
     static template = "o-spreadsheet-DataValidationPreview";
     static props = {
@@ -57818,38 +56160,6 @@ class FindAndReplaceStore extends SpreadsheetStore {
     }
 }
 
-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 Component {
     static template = "o-spreadsheet-FindAndReplacePanel";
     static components = { SelectionInput, Section, Checkbox, ValidationMessages };
@@ -57960,22 +56270,6 @@ class FindAndReplacePanel extends Component {
     }
 }
 
-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,
@@ -58133,21 +56427,6 @@ class PivotMeasureDisplayPanelStore extends SpreadsheetStore {
     }
 }
 
-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 Component {
     static template = "o-spreadsheet-PivotMeasureDisplayPanel";
     static props = {
@@ -58206,11 +56485,6 @@ function getVisiblePivotCellPositions(getters, pivotId) {
     return positions;
 }
 
-css /* scss */ `
-  .pivot-defer-update {
-    min-height: 40px;
-  }
-`;
 class PivotDeferUpdate extends Component {
     static template = "o-spreadsheet-PivotDeferUpdate";
     static props = {
@@ -58299,25 +56573,6 @@ function getHtmlContentFromPattern(pattern, value, highlightColor, className) {
     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 Component {
     static template = "o-spreadsheet-AddDimensionButton";
     static components = { Popover, TextValueProvider };
@@ -58411,35 +56666,6 @@ class AddDimensionButton extends Component {
     }
 }
 
-// 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 Component {
     static template = "o-spreadsheet-PivotDimension";
     static props = {
@@ -58591,19 +56817,6 @@ class PivotMeasureEditor extends Component {
     }
 }
 
-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 Component {
     static template = "o-spreadsheet-PivotSortSection";
     static components = {
@@ -58649,11 +56862,6 @@ class PivotSortSection extends Component {
     }
 }
 
-css /* scss */ `
-  .add-calculated-measure {
-    cursor: pointer;
-  }
-`;
 class PivotLayoutConfigurator extends Component {
     static template = "o-spreadsheet-PivotLayoutConfigurator";
     static components = {
@@ -58846,12 +57054,13 @@ class PivotLayoutConfigurator extends Component {
     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",
@@ -59467,11 +57676,6 @@ class PivotSidePanel extends Component {
     }
 }
 
-css /* scss */ `
-  .o-checkbox-selection {
-    max-height: 300px;
-  }
-`;
 class RemoveDuplicatesPanel extends Component {
     static template = "o-spreadsheet-RemoveDuplicatesPanel";
     static components = { ValidationMessages, Section, Checkbox };
@@ -59558,12 +57762,6 @@ class RemoveDuplicatesPanel extends Component {
     }
 }
 
-css /* scss */ `
-  .o-locale-preview {
-    border: 1px solid ${GRAY_300};
-    background-color: ${GRAY_100};
-  }
-`;
 class SettingsPanel extends Component {
     static template = "o-spreadsheet-SettingsPanel";
     static components = { Section, ValidationMessages, BadgeSelection };
@@ -59837,34 +58035,6 @@ function drawTexts(ctx, tableStyle, colWidth, rowHeight) {
     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 Component {
     static template = "o-spreadsheet-TableStylePreview";
     static components = { MenuPopover };
@@ -59925,52 +58095,6 @@ class TableStylePreview extends Component {
     }
 }
 
-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 Component {
     static template = "o-spreadsheet-TableStylesPopover";
     static components = { Popover, TableStylePreview };
@@ -60010,31 +58134,6 @@ class TableStylesPopover extends Component {
     }
 }
 
-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 Component {
     static template = "o-spreadsheet-TableStylePicker";
     static components = { TableStylesPopover, TableStylePreview };
@@ -60078,19 +58177,6 @@ class TableStylePicker extends Component {
     }
 }
 
-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 Component {
     static template = "o-spreadsheet-TablePanel";
     static components = { TableStylePicker, SelectionInput, ValidationMessages, Checkbox, Section };
@@ -60242,19 +58328,6 @@ class TablePanel extends Component {
     }
 }
 
-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 Component {
     static template = "o-spreadsheet-TableStyleEditorPanel";
@@ -60689,15 +58762,6 @@ class SidePanelStore extends SpreadsheetStore {
 
 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 Component {
     static template = "o-spreadsheet-TableResizer";
     static props = { table: Object };
@@ -61443,14 +59507,16 @@ class ClickableCellSortIcon extends Component {
             "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) {
@@ -61512,43 +59578,6 @@ class FullScreenChart extends Component {
     }
 }
 
-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 Component {
     static template = "o_spreadsheet.PivotHTMLRenderer";
     static components = { Checkbox };
@@ -70651,6 +68680,30 @@ function togglePivotCollapse(position, env) {
         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"];
@@ -71130,7 +69183,7 @@ function withPivotPresentationLayer (PivotClass) {
                 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) {
@@ -71149,11 +69202,17 @@ function withPivotPresentationLayer (PivotClass) {
                 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);
@@ -75547,6 +73606,21 @@ class DataValidationInsertionPlugin extends UIPlugin {
     }
 }
 
+/**
+ * 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,
@@ -77517,13 +75591,10 @@ class GridSelectionPlugin extends UIPlugin {
         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,
@@ -77567,11 +75638,11 @@ class GridSelectionPlugin extends UIPlugin {
         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", {
@@ -79178,6 +77249,7 @@ const featurePluginRegistry = new Registry()
     .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()
@@ -80489,11 +78561,6 @@ const RIPPLE_KEY_FRAMES = [
     { transform: "scale(0.8)", offset: 0.33 },
     { opacity: "0", transform: "scale(1)", offset: 1 },
 ];
-css /* scss */ `
-  .o-ripple {
-    z-index: 1;
-  }
-`;
 class RippleEffect extends Component {
     static template = "o-spreadsheet-RippleEffect";
     static props = {
@@ -80665,59 +78732,6 @@ function interactiveRenameSheet(env, sheetId, name, errorCallback) {
     }
 }
 
-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 Component {
     static template = "o-spreadsheet-BottomBarSheet";
     static props = {
@@ -80997,20 +79011,6 @@ class AggregateStatisticsStore extends SpreadsheetStore {
     }
 }
 
-// -----------------------------------------------------------------------------
-// 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 Component {
     static template = "o-spreadsheet-BottomBarStatistic";
     static props = {
@@ -81067,77 +79067,6 @@ class BottomBarStatistic extends Component {
 // 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 Component {
     static template = "o-spreadsheet-BottomBar";
     static props = { onClick: Function };
@@ -81393,12 +79322,6 @@ class ClickableCellsStore extends SpreadsheetStore {
     }
 }
 
-css /* scss */ `
-  .o-dashboard-clickable-cell {
-    position: absolute;
-    cursor: pointer;
-  }
-`;
 class SpreadsheetDashboard extends Component {
     static template = "o-spreadsheet-SpreadsheetDashboard";
     static props = { getGridSize: Function };
@@ -81490,27 +79413,6 @@ class SpreadsheetDashboard extends Component {
     }
 }
 
-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 Component {
     static template = "o-spreadsheet-HeaderGroup";
     static props = {
@@ -81661,27 +79563,6 @@ class ColGroup extends AbstractHeaderGroup {
     }
 }
 
-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 Component {
     static template = "o-spreadsheet-HeaderGroupContainer";
     static props = {
@@ -81760,121 +79641,6 @@ function useScreenWidth() {
     };
 }
 
-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 Component {
     static template = "o-spreadsheet-SidePanel";
     static props = {
@@ -82049,11 +79815,6 @@ class RibbonMenu extends Component {
     }
 }
 
-css `
-  .o-small-composer {
-    z-index: ${ComponentsImportance.TopBarComposer};
-  }
-`;
 class SmallBottomBar extends Component {
     static components = { Composer, BottomBar, Ripple, RibbonMenu };
     static template = "o-spreadsheet-SmallBottomBar";
@@ -82141,36 +79902,12 @@ class SmallBottomBar extends Component {
 
 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 Component {
     static template = "o-spreadsheet-TopBarComposer";
     static props = {};
@@ -82206,18 +79943,6 @@ class TopBarComposer extends Component {
         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 });
     }
@@ -82307,79 +80032,6 @@ const BORDER_POSITIONS = [
 // -----------------------------------------------------------------------------
 // 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 Component {
     static template = "o-spreadsheet-BorderEditor";
     static props = {
@@ -82930,90 +80582,6 @@ topBarToolBarRegistry
 // -----------------------------------------------------------------------------
 // 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 Component {
     static template = "o-spreadsheet-TopBar";
     static props = {
@@ -83287,251 +80855,6 @@ class WebClipboardWrapper {
     }
 }
 
-// -----------------------------------------------------------------------------
-// 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 Component {
     static template = "o-spreadsheet-Spreadsheet";
     static props = {
@@ -88357,9 +85680,9 @@ const constants = {
 };
 const chartHelpers = { ...CHART_HELPERS, ...CHART_RUNTIME_HELPERS };
 
-export { AbstractCellClipboardHandler, AbstractChart, AbstractFigureClipboardHandler, CellErrorType, ClientDisconnectedError, CommandResult, CorePlugin, CoreViewPlugin, DispatchResult, EvaluationError, LocalTransportService, Model, PivotRuntimeDefinition, Registry, Revision, SPREADSHEET_DIMENSIONS, Spreadsheet, SpreadsheetPivotTable, UIPlugin, __info__, addFunction, addRenderingLayer, astToFormula, chartHelpers, compile, compileTokens, components, constants, convertAstNodes, coreTypes, findCellInNewZone, functionCache, helpers, hooks, invalidateCFEvaluationCommands, invalidateChartEvaluationCommands, invalidateDependenciesCommands, invalidateEvaluationCommands, iterateAstNodes, links, load, parse, parseTokens, readonlyAllowedCommands, registries, setDefaultSheetViewSize, setTranslationMethod, stores, tokenColors, tokenize };
+export { AbstractCellClipboardHandler, AbstractChart, AbstractFigureClipboardHandler, CellErrorType, ClientDisconnectedError, CommandResult, CorePlugin, CoreViewPlugin, DispatchResult, EvaluationError, LocalTransportService, Model, PivotRuntimeDefinition, Registry, Revision, SPREADSHEET_DIMENSIONS, Spreadsheet, SpreadsheetPivotTable, UIPlugin, __info__, addFunction, addRenderingLayer, astToFormula, chartHelpers, compile, compileTokens, components, constants, convertAstNodes, coreTypes, findCellInNewZone, functionCache, getCaretDownSvg, getCaretUpSvg, helpers, hooks, invalidateCFEvaluationCommands, invalidateChartEvaluationCommands, invalidateDependenciesCommands, invalidateEvaluationCommands, iterateAstNodes, links, load, parse, parseTokens, readonlyAllowedCommands, registries, setDefaultSheetViewSize, setTranslationMethod, stores, tokenColors, 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";