@odoo/o-spreadsheet 18.3.0-alpha.3 → 18.3.1

package/dist/o_spreadsheet.xml

@@ -1,9 +1,9 @@
 <!--
  This file is generated by o-spreadsheet build tools. Do not edit it.
  @see https://github.com/odoo/o-spreadsheet
- @version 18.3.0-alpha.3
- @date 2025-03-07T10:41:46.620Z
- @hash f59f5f6
+ @version 18.3.1
+ @date 2025-05-02T12:34:13.360Z
+ @hash 7b9574b
 -->
 <odoo>
   <t t-name="o-spreadsheet-ValidationMessages">
@@ -28,12 +28,10 @@
   </t>
 
   <t t-name="o-spreadsheet-TopBar">
-    <t t-set="text_color">Text Color</t>
-    <t t-set="fill_color">Fill Color</t>
     <div
       class="o-spreadsheet-topbar o-two-columns d-flex flex-column user-select-none"
       t-on-click="props.onClick">
-      <div class="o-topbar-top d-flex justify-content-between  flex-wrap">
+      <div class="o-topbar-top d-flex justify-content-between">
         <!-- Menus -->
         <div class="o-topbar-topleft d-flex">
           <t t-foreach="menus" t-as="menu" t-key="menu_index">
@@ -122,10 +120,11 @@
     </div>
     <Menu
       t-if="state.menuState.isOpen"
-      position="state.menuState.position"
+      anchorRect="state.menuState.anchorRect"
       menuItems="state.menuState.menuItems"
       onClose="() => this.closeMenus()"
       onMenuClicked="() => this.props.onClick()"
+      popoverPositioning="'bottom-left'"
     />
     <Popover t-if="state.toolsPopoverState.isOpen" t-props="toolsPopoverProps">
       <div class="d-flex px-2 py-1 flex-wrap" style="background-color:white;">
@@ -156,7 +155,13 @@
       onClick.bind="toggleMenu"
       class="props.class"
     />
-    <Menu t-if="isActive" position="state.position" menuItems="state.menuItems" onClose="() => {}"/>
+    <Menu
+      t-if="isActive"
+      anchorRect="state.anchorRect"
+      menuItems="state.menuItems"
+      onClose="() => {}"
+      popoverPositioning="'bottom-left'"
+    />
   </div>
 
   <t t-name="o-spreadsheet-TopBarFontSizeEditor">
@@ -200,7 +205,6 @@
         onColorPicked="(color) => this.setColor(color)"
         title="props.title"
         icon="props.icon"
-        dropdownMaxHeight="dropdownMaxHeight"
         class="props.class"
       />
     </div>
@@ -285,7 +289,7 @@
     <Menu
       t-if="menu.isOpen"
       menuItems="menu.menuItems"
-      position="menu.position"
+      anchorRect="menu.anchorRect"
       onClose.bind="this.closeMenu"
     />
   </t>
@@ -345,7 +349,7 @@
   </t>
 
   <t t-name="o-spreadsheet-Spreadsheet">
-    <div class="o-spreadsheet" t-ref="spreadsheet" t-att-style="getStyle()">
+    <div class="o-spreadsheet h-100 w-100" t-ref="spreadsheet" t-att-style="getStyle()">
       <t t-if="env.isDashboard()">
         <SpreadsheetDashboard/>
       </t>
@@ -656,9 +660,10 @@
     <Menu
       t-if="state.isMenuOpen"
       menuItems="props.menuItems"
-      position="menuPosition"
+      anchorRect="menuAnchorRect"
       onClose.bind="onMenuClosed"
       menuId="menuId"
+      popoverPositioning="'bottom-left'"
     />
   </t>
 
@@ -730,42 +735,44 @@
 
   <t t-name="o-spreadsheet-PivotSpreadsheetSidePanel">
     <t t-set="isReadonly" t-value="env.model.getters.isReadonly()"/>
-    <div
-      class="d-flex flex-column h-100 justify-content-between overflow-hidden"
-      t-att="isReadonly ? ['inert', 1] : []"
-      t-att-class="{ 'pe-none': isReadonly, 'opacity-50': isReadonly }">
+    <div class="d-flex flex-column h-100 justify-content-between overflow-hidden">
       <div class="h-100 position-relative overflow-x-hidden overflow-y-auto" t-ref="pivotSidePanel">
-        <PivotTitleSection pivotId="props.pivotId" flipAxis.bind="flipAxis"/>
-        <Section title.translate="Range">
-          <SelectionInput
-            ranges="ranges"
-            required="true"
-            isInvalid="shouldDisplayInvalidRangeError"
-            hasSingleRange="true"
-            onSelectionChanged="(ranges) => this.onSelectionChanged(ranges)"
-            onSelectionConfirmed="() => this.onSelectionConfirmed()"
-          />
-          <span
-            class="text-danger sp_range_error_message"
-            t-if="shouldDisplayInvalidRangeError"
-            t-esc="pivot.invalidRangeMessage"
-          />
-        </Section>
+        <div
+          t-att="isReadonly ? ['inert', 1] : []"
+          t-att-class="{ 'pe-none opacity-50': isReadonly }">
+          <PivotTitleSection pivotId="props.pivotId" flipAxis.bind="flipAxis"/>
+          <Section title.translate="Range">
+            <SelectionInput
+              ranges="ranges"
+              required="true"
+              isInvalid="shouldDisplayInvalidRangeError"
+              hasSingleRange="true"
+              onSelectionChanged="(ranges) => this.onSelectionChanged(ranges)"
+              onSelectionConfirmed="() => this.onSelectionConfirmed()"
+            />
+            <span
+              class="text-danger sp_range_error_message"
+              t-if="shouldDisplayInvalidRangeError"
+              t-esc="pivot.invalidRangeMessage"
+            />
+          </Section>
 
-        <PivotLayoutConfigurator
-          t-if="!pivot.isInvalidRange"
-          unusedGroupableFields="store.unusedGroupableFields"
-          measureFields="store.measureFields"
-          unusedGranularities="store.unusedGranularities"
-          dateGranularities="store.dateGranularities"
-          datetimeGranularities="store.datetimeGranularities"
-          definition="definition"
-          onDimensionsUpdated.bind="onDimensionsUpdated"
-          getScrollableContainerEl.bind="getScrollableContainerEl"
-          pivotId="props.pivotId"
-        />
+          <PivotLayoutConfigurator
+            t-if="!pivot.isInvalidRange"
+            unusedGroupableFields="store.unusedGroupableFields"
+            measureFields="store.measureFields"
+            unusedGranularities="store.unusedGranularities"
+            dateGranularities="store.dateGranularities"
+            datetimeGranularities="store.datetimeGranularities"
+            definition="definition"
+            onDimensionsUpdated.bind="onDimensionsUpdated"
+            getScrollableContainerEl.bind="getScrollableContainerEl"
+            pivotId="props.pivotId"
+          />
+        </div>
       </div>
       <PivotDeferUpdate
+        t-if="!isReadonly"
         deferUpdate="store.updatesAreDeferred"
         toggleDeferUpdate="(value) => store.deferUpdates(value)"
         isDirty="store.isDirty"
@@ -2065,25 +2072,26 @@
     <div class="" t-att-class="props.class">
       <div class="o_side_panel_collapsible_title o-fw-bold d-flex align-items-center">
         <div
-          t-att-id="'btn-collapse-'+currentId"
-          t-att-class="{ 'collapsed': props.collapsedAtInit }"
           class="collapsor w-100 d-flex align-items-center ps-1"
-          data-bs-toggle="collapse"
-          t-att-data-bs-target="'#box-collapse-'+currentId">
+          t-att-class="state.isCollapsed ? 'collapsed' : ''"
+          t-on-click="() => this.toggle()">
           <span class="collapsor-arrow">
             <t t-call="o-spreadsheet-Icon.ANGLE_DOWN"/>
           </span>
           <div class="ps-2" t-esc="props.title"/>
         </div>
       </div>
-      <div
-        t-att-id="'box-collapse-'+currentId"
-        t-att-class="{'show': !props.collapsedAtInit}"
-        class="collapsible_section collapse">
+      <Collapse isCollapsed="state.isCollapsed">
         <div class="pt-2">
           <t t-slot="content"/>
         </div>
-      </div>
+      </Collapse>
+    </div>
+  </t>
+
+  <t t-name="o-spreadsheet-Collapse">
+    <div t-ref="content" class="os-collapse">
+      <t t-slot="default"/>
     </div>
   </t>
 
@@ -2096,7 +2104,7 @@
     <Menu
       t-if="menuState.isOpen"
       menuId="menuId"
-      position="menuState.position"
+      anchorRect="menuState.anchorRect"
       menuItems="menuState.menuItems"
       onClose="() => this.menuState.isOpen=false"
       width="160"
@@ -2165,7 +2173,7 @@
         </Section>
       </t>
     </GeneralDesignEditor>
-    <SidePanelCollapsible collapsedAtInit="true" title.translate="Waterfall design">
+    <SidePanelCollapsible isInitiallyCollapsed="true" title.translate="Waterfall design">
       <t t-set-slot="content">
         <Section class="'pt-0'" title.translate="Options">
           <t t-set="firstValueAsSubtotal">Use first value as subtotal</t>
@@ -2217,7 +2225,7 @@
         </Section>
       </t>
     </SidePanelCollapsible>
-    <SidePanelCollapsible collapsedAtInit="true" title.translate="Axes">
+    <SidePanelCollapsible isInitiallyCollapsed="true" title.translate="Axes">
       <t t-set-slot="content">
         <AxisDesignEditor
           axesList="axesList"
@@ -2229,6 +2237,199 @@
     </SidePanelCollapsible>
   </t>
 
+  <t t-name="o-spreadsheet-TreeMapChartDesignPanel">
+    <GeneralDesignEditor
+      figureId="props.figureId"
+      definition="props.definition"
+      updateChart="props.updateChart"
+    />
+
+    <SidePanelCollapsible isInitiallyCollapsed="false" title.translate="Tree map colors">
+      <t t-set-slot="content">
+        <Section class="'pt-0'">
+          <BadgeSelection
+            choices="coloringOptionChoices"
+            onChange.bind="changeColoringOption"
+            selectedValue="coloringOptions.type"
+          />
+
+          <t t-if="coloringOptions.type === 'categoryColor'">
+            <TreeMapCategoryColors
+              figureId="props.figureId"
+              definition="props.definition"
+              onColorChanged.bind="onCategoryColorChange"
+            />
+          </t>
+          <t t-else="">
+            <TreeMapColorScale
+              figureId="props.figureId"
+              definition="props.definition"
+              onColorChanged.bind="onColorScaleChange"
+            />
+          </t>
+        </Section>
+      </t>
+    </SidePanelCollapsible>
+
+    <SidePanelCollapsible isInitiallyCollapsed="false" title.translate="Headers and labels">
+      <t t-set-slot="content">
+        <Section title.translate="Headers" class="'pt-0 pb-0'">
+          <Checkbox
+            name="'showHeaders'"
+            label.translate="Show headers"
+            value="showHeaders"
+            onChange="(showHeaders) => props.updateChart(this.props.figureId, { showHeaders })"
+          />
+        </Section>
+        <Section class="'pt-0'" t-if="showHeaders">
+          <TextStyler
+            class="'pt-0 o-header-style'"
+            updateStyle="(headerDesign) => props.updateChart(this.props.figureId, { headerDesign })"
+            style="props.definition.headerDesign || {}"
+            defaultStyle="defaults.headerDesign"
+            hasBackgroundColor="true"
+          />
+        </Section>
+
+        <Section title.translate="Labels" class="'pt-0 pb-0'">
+          <div class="d-flex flex-row gap-4">
+            <Checkbox
+              name="'showLabels'"
+              label.translate="Show labels"
+              value="showLabels"
+              onChange="(showLabels) => props.updateChart(this.props.figureId, { showLabels })"
+            />
+            <Checkbox
+              name="'showValues'"
+              label.translate="Show values"
+              value="showValues"
+              onChange="(showValues) => props.updateChart(this.props.figureId, { showValues })"
+            />
+          </div>
+        </Section>
+        <Section class="'pt-0'" t-if="showValues || showLabels">
+          <TextStyler
+            class="'pt-0 o-values-style'"
+            updateStyle="(valuesDesign) => props.updateChart(this.props.figureId, { valuesDesign })"
+            style="props.definition.valuesDesign || {}"
+            defaultStyle="defaults.valuesDesign"
+            hasVerticalAlign="true"
+          />
+        </Section>
+      </t>
+    </SidePanelCollapsible>
+  </t>
+
+  <t t-name="o-spreadsheet-TreeMapColorScale">
+    <div class="o-min-color d-flex align-items-center mb-2 mt-4">
+      <RoundColorPicker
+        currentColor="coloringOptions.minColor"
+        onColorPicked="(color) => this.setColorScaleColor('minColor', color)"
+        disableNoColor="true"
+      />
+      <span class="ps-2">Color of minimum values</span>
+    </div>
+    <div class="o-mid-color d-flex align-items-center mb-2">
+      <RoundColorPicker
+        currentColor="coloringOptions.midColor"
+        onColorPicked="(color) => this.setColorScaleColor('midColor', color)"
+      />
+      <span class="ps-2">Color of middle values</span>
+    </div>
+    <div class="o-max-color d-flex align-items-center">
+      <RoundColorPicker
+        currentColor="coloringOptions.maxColor"
+        onColorPicked="(color) => this.setColorScaleColor('maxColor', color)"
+        disableNoColor="true"
+      />
+      <span class="ps-2">Color of maximum values</span>
+    </div>
+  </t>
+
+  <t t-name="o-spreadsheet-TreeMapCategoryColors">
+    <div class="mt-3">
+      <div class="o-fw-bold mb-2">Category</div>
+      <t t-foreach="getTreeGroupAndColors()" t-as="group" t-key="group_index">
+        <div class="d-flex align-items-center mb-2" t-att-data-id="group.label">
+          <RoundColorPicker
+            currentColor="group.color"
+            onColorPicked="(color) => this.onGroupColorChanged(group_index, color)"
+          />
+          <span class="ps-2">
+            <span t-esc="'(#' + (group_index +1 ) + ')'" class="o-text-bolder pe-1"/>
+            <span class="text-muted" t-esc="group.label"/>
+          </span>
+        </div>
+      </t>
+
+      <Checkbox
+        name="'useValueBasedGradient'"
+        label.translate="Use value-based gradient"
+        value="coloringOptions.useValueBasedGradient"
+        onChange.bind="useValueBasedGradient"
+        className="'mt-4'"
+      />
+    </div>
+  </t>
+
+  <t t-name="o-spreadsheet-SunburstChartDesignPanel">
+    <GeneralDesignEditor
+      figureId="props.figureId"
+      definition="props.definition"
+      updateChart="props.updateChart">
+      <t t-set-slot="general-extension">
+        <ChartLegend
+          figureId="props.figureId"
+          definition="props.definition"
+          updateChart="props.updateChart"
+        />
+      </t>
+    </GeneralDesignEditor>
+
+    <SidePanelCollapsible isInitiallyCollapsed="false" title.translate="Sunburst options">
+      <t t-set-slot="content">
+        <Section class="'pt-0 o-sunburst-colors'" title.translate="Colors">
+          <t t-foreach="groupColors" t-as="item" t-key="item.label">
+            <div class="d-flex align-items-center mb-2" t-att-data-id="item.label">
+              <RoundColorPicker
+                currentColor="item.color"
+                onColorPicked="(color) => this.onGroupColorChanged(item_index, color)"
+              />
+              <span class="ps-2">
+                <span t-esc="'(#' + (item_index +1 ) + ')'" class="o-text-bolder pe-1"/>
+                <span class="text-muted" t-esc="item.label"/>
+              </span>
+            </div>
+          </t>
+        </Section>
+        <Section title.translate="Labels" class="'pt-0 pb-0'">
+          <div class="d-flex flex-row gap-4">
+            <Checkbox
+              name="'showLabels'"
+              label.translate="Show labels"
+              value="showLabels"
+              onChange="(showLabels) => props.updateChart(this.props.figureId, { showLabels })"
+            />
+            <Checkbox
+              name="'showValues'"
+              label.translate="Show values"
+              value="showValues"
+              onChange="(showValues) => props.updateChart(this.props.figureId, { showValues })"
+            />
+          </div>
+        </Section>
+        <Section class="'pt-0'" t-if="showValues || showLabels">
+          <TextStyler
+            class="'o-values-style'"
+            updateStyle="(valuesDesign) => props.updateChart(this.props.figureId, { valuesDesign })"
+            style="props.definition.valuesDesign || {}"
+            defaultStyle="defaults.valuesDesign"
+          />
+        </Section>
+      </t>
+    </SidePanelCollapsible>
+  </t>
+
   <t t-name="o-spreadsheet-ScorecardChartDesignPanel">
     <t t-set="color_up">Color Up</t>
     <t t-set="color_down">Color Down</t>
@@ -2248,7 +2449,7 @@
         </Section>
       </t>
     </GeneralDesignEditor>
-    <SidePanelCollapsible collapsedAtInit="false" title.translate="Baseline">
+    <SidePanelCollapsible isInitiallyCollapsed="false" title.translate="Baseline">
       <t t-set-slot="content">
         <Section class="'pt-0'" title.translate="Baseline description">
           <input
@@ -2466,6 +2667,29 @@
     </div>
   </t>
 
+  <t t-name="o-spreadsheet-HierarchicalChartConfigPanel">
+    <div>
+      <ChartDataSeries
+        ranges="this.getDataSeriesRanges()"
+        onSelectionChanged.bind="onDataSeriesRangesChanged"
+        onSelectionConfirmed.bind="onDataSeriesConfirmed"
+        onSelectionReordered.bind="onDataSeriesReordered"
+        onSelectionRemoved.bind="onDataSeriesRemoved"
+        title.translate="Hierarchy"
+      />
+      <ChartLabelRange
+        range="this.getLabelRange()"
+        isInvalid="isLabelInvalid"
+        onSelectionChanged.bind="onLabelRangeChanged"
+        onSelectionConfirmed.bind="onLabelRangeConfirmed"
+        options="this.getLabelRangeOptions()"
+        title.translate="Values"
+      />
+
+      <ChartErrorSection t-if="errorMessages.length" messages="errorMessages"/>
+    </div>
+  </t>
+
   <t t-name="o-spreadsheet-GeoChartRegionSelectSection">
     <Section class="'o-geo-region'" title.translate="Region">
       <select class="o-input" t-on-change="this.updateSelectedRegion">
@@ -2501,7 +2725,7 @@
       </t>
     </GeneralDesignEditor>
 
-    <SidePanelCollapsible collapsedAtInit="false" title.translate="Geo chart options">
+    <SidePanelCollapsible isInitiallyCollapsed="false" title.translate="Geo chart options">
       <t t-set-slot="content">
         <Section class="'pt-0 o-color-scale'" title.translate="Color Scale">
           <select class="o-input" t-on-change="this.updateColorScaleType">
@@ -2586,7 +2810,7 @@
       definition="props.definition"
       updateChart="props.updateChart"
     />
-    <SidePanelCollapsible collapsedAtInit="false" title.translate="Gauge Design">
+    <SidePanelCollapsible isInitiallyCollapsed="false" title.translate="Gauge Design">
       <t t-set-slot="content">
         <Section class="'pt-0'" title.translate="Range">
           <div class="o-subsection-left">
@@ -2738,7 +2962,7 @@
       </t>
     </GeneralDesignEditor>
 
-    <SidePanelCollapsible collapsedAtInit="false" title.translate="Funnel options">
+    <SidePanelCollapsible isInitiallyCollapsed="false" title.translate="Funnel options">
       <t t-set-slot="content">
         <Section class="'o-funnel-colors pt-0'" title.translate="Funnel colors">
           <t t-foreach="getFunnelColorItems()" t-as="item" t-key="item_index">
@@ -2789,7 +3013,7 @@
         </Section>
       </t>
     </SeriesWithAxisDesignEditor>
-    <SidePanelCollapsible collapsedAtInit="true" title.translate="Axes">
+    <SidePanelCollapsible isInitiallyCollapsed="true" title.translate="Axes">
       <t t-set-slot="content">
         <AxisDesignEditor
           axesList="axesList"
@@ -2823,7 +3047,7 @@
       </t>
     </GeneralDesignEditor>
     <SeriesWithAxisDesignEditor t-props="props"/>
-    <SidePanelCollapsible collapsedAtInit="true" title.translate="Axes">
+    <SidePanelCollapsible isInitiallyCollapsed="true" title.translate="Axes">
       <t t-set-slot="content">
         <AxisDesignEditor
           axesList="axesList"
@@ -3152,104 +3376,108 @@
       <path stroke="#eb6d00" fill="#ffe1c8" d="M21.5,35.5 h5 l-2.5,7 l-2.5,-7 h1"/>
     </svg>
   </t>
-
-  <t t-name="o-spreadsheet.ChartTitle">
-    <t t-set="placeholder">Add a title</t>
-    <t t-set="title">
-      <t t-if="props.name" t-esc="props.name"/>
-      <t t-else="">Title</t>
-    </t>
-    <Section class="'o-chart-title'" title="title.toString()">
-      <input
-        type="text"
-        class="o-input"
-        t-att-value="props.title"
-        t-on-change="updateTitle"
-        t-att-placeholder="placeholder"
+  <t t-name="o-spreadsheet-ChartPreview.SUNBURST_CHART">
+    <svg viewBox="0 0 48 48" class="o-chart-preview" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fill="#ffe1c8"
+        stroke="#eb6d00"
+        d="M24,12 v8A4,4,0,1,0,27.46,26 L41.32, 34 A20,20,0,0,1,8.679,36.856 L14.807,31.713 A12,12,0,0,1,24,12 M34.4,30 A12,12,0,0,1,14.807,31.713"
       />
-      <div class="o-chart-title-designer position-relative d-flex align-items-center">
-        <span
-          class="o-menu-item-button o-hoverable-button"
-          title="Bold"
-          t-att-class="{active: props.style.bold}"
-          t-on-click="(ev) => this.props.toggleBold()">
-          <span>
-            <t t-call="o-spreadsheet-Icon.BOLD"/>
-          </span>
-        </span>
-        <span
-          class="o-menu-item-button o-hoverable-button"
-          title="Italic"
-          t-att-class="{active: props.style.italic}"
-          t-on-click="(ev) => this.props.toggleItalic()">
-          <span>
-            <t t-call="o-spreadsheet-Icon.ITALIC"/>
-          </span>
-        </span>
-        <div class="o-divider"/>
-        <span
-          class="o-menu-item-button o-hoverable-button"
-          title="Horizontal alignment"
-          t-on-click="(ev) => this.toggleDropdownTool('horizontalChartAlignTool', ev)">
-          <span>
-            <t t-if="props.style.align === 'center'" t-call="o-spreadsheet-Icon.ALIGN_CENTER"/>
-            <t t-elif="props.style.align === 'right'" t-call="o-spreadsheet-Icon.ALIGN_RIGHT"/>
-            <t t-else="" t-call="o-spreadsheet-Icon.ALIGN_LEFT"/>
-          </span>
-          <t t-call="o-spreadsheet-Icon.CARET_DOWN"/>
-        </span>
+      <path
+        fill="#c4e4ff"
+        stroke="#0074d9"
+        d="M24,20 v-16 A20 20, 0, 0, 1, 41.32, 34 L27.46,26 A4,4,0,0,0,24,20 M24,12 A12,12,0,0,1,34.4,30 M33.193,16.287 L39.321,11.144 M36,24 L44,24"
+      />
+    </svg>
+  </t>
+  <t t-name="o-spreadsheet-ChartPreview.TREE_MAP_CHART">
+    <svg viewBox="0 0 48 48" class="o-chart-preview" xmlns="http://www.w3.org/2000/svg">
+      <path fill="#444" d="M2,4 h44 v5 h-44"/>
+      <path fill="#444" d="M2,10 h28 v5 h-28"/>
+      <path fill="#444" d="M31,10 h15 v5 h-15"/>
+      <path fill="#0074d9" d="M2,16 h28 v14 h-28"/>
+      <path fill="#c4e4ff" d="M3,17 h26 v12 h-26"/>
+      <path fill="#0074d9" d="M2,31 h15 v12 h-15"/>
+      <path fill="#c4e4ff" d="M3,32 h13 v10 h-13"/>
+      <path fill="#0074d9" d="M18,31 h12 v12 h-12"/>
+      <path fill="#c4e4ff" d="M19,32 h10 v10 h-10"/>
+      <path fill="#eb6d00" d="M31,16 h15 v27 h-15"/>
+      <path fill="#ffe1c8" d="M32,17 h13 v25 h-13"/>
+    </svg>
+  </t>
+
+  <t t-name="o-spreadsheet.TextStyler">
+    <div
+      class="o-chart-title-designer position-relative d-flex align-items-center"
+      t-att-class="props.class">
+      <ActionButton action="boldButtonAction" class="'o-hoverable-button'"/>
+      <ActionButton action="italicButtonAction" class="'o-hoverable-button'"/>
+      <div class="o-divider" t-if="props.hasHorizontalAlign || props.hasVerticalAlign"/>
+      <div class="o-dropdown position-relative" t-if="props.hasHorizontalAlign">
+        <ActionButton
+          action="horizontalAlignButtonAction"
+          hasTriangleDownIcon="true"
+          t-on-click="(ev) => this.toggleDropdownTool('horizontalAlignTool', ev)"
+          class="'o-hoverable-button'"
+        />
         <div
           class="o-dropdown-content position-absolute top-100 start-0 bg-white"
-          t-if="state.activeTool === 'horizontalChartAlignTool'"
+          t-if="state.activeTool === 'horizontalAlignTool'"
+          t-att-style="dropdownStyle"
           t-on-click.stop="">
           <div class="o-dropdown-line d-flex">
-            <span
-              class="o-menu-item-button o-hoverable-button"
-              t-att-class="{active: props.style.align === 'left'}"
-              title="Left"
-              t-on-click="(ev) => this.updateAlignment('left')">
-              <span>
-                <t t-call="o-spreadsheet-Icon.ALIGN_LEFT"/>
-              </span>
-            </span>
-            <span
-              class="o-menu-item-button o-hoverable-button"
-              t-att-class="{active: props.style.align === 'center'}"
-              title="Center"
-              t-on-click="(ev) => this.updateAlignment('center')">
-              <span>
-                <t t-call="o-spreadsheet-Icon.ALIGN_CENTER"/>
-              </span>
-            </span>
-            <span
-              class="o-menu-item-button o-hoverable-button"
-              t-att-class="{active: props.style.align === 'right'}"
-              title="Right"
-              t-on-click="(ev) => this.updateAlignment('right')">
-              <span>
-                <t t-call="o-spreadsheet-Icon.ALIGN_RIGHT"/>
-              </span>
-            </span>
+            <t t-foreach="horizontalAlignActions" t-as="action" t-key="action_index">
+              <ActionButton action="action" class="'o-hoverable-button'"/>
+            </t>
           </div>
         </div>
-        <div class="o-divider"/>
-        <FontSizeEditor
-          currentFontSize="props.style.fontSize"
-          onFontSizeChanged.bind="this.updateFontSize"
+      </div>
+      <div class="o-dropdown position-relative" t-if="props.hasVerticalAlign">
+        <ActionButton
+          action="verticalAlignButtonAction"
+          hasTriangleDownIcon="true"
+          t-on-click="(ev) => this.toggleDropdownTool('verticalAlignTool', ev)"
           class="'o-hoverable-button'"
         />
-        <div class="o-divider"/>
-        <ColorPickerWidget
-          currentColor="props.style.color"
-          toggleColorPicker="(ev) => this.toggleDropdownTool('fillChartColorTool', ev)"
-          showColorPicker="state.activeTool === 'fillChartColorTool'"
-          onColorPicked.bind="onColorPicked"
-          title="fill_color"
-          icon="'o-spreadsheet-Icon.TEXT_COLOR'"
-          class="'o-hoverable-button o-menu-item-button'"
-        />
+        <div
+          class="o-dropdown-content position-absolute top-100 start-0 bg-white"
+          t-if="state.activeTool === 'verticalAlignTool'"
+          t-att-style="dropdownStyle"
+          t-on-click.stop="">
+          <div class="o-dropdown-line d-flex">
+            <t t-foreach="verticalAlignActions" t-as="action" t-key="action_index">
+              <ActionButton action="action" class="'o-hoverable-button'"/>
+            </t>
+          </div>
+        </div>
       </div>
-    </Section>
+      <div class="o-divider"/>
+      <FontSizeEditor
+        currentFontSize="currentFontSize"
+        onFontSizeChanged.bind="this.updateFontSize"
+        class="'o-hoverable-button'"
+      />
+      <div class="o-divider"/>
+      <ColorPickerWidget
+        currentColor="props.style.color ?? props.defaultStyle?.color"
+        toggleColorPicker="(ev) => this.toggleDropdownTool('fillChartColorTool', ev)"
+        showColorPicker="state.activeTool === 'fillChartColorTool'"
+        onColorPicked.bind="onTextColorChange"
+        title.translate="Text color"
+        icon="'o-spreadsheet-Icon.TEXT_COLOR'"
+        class="'o-hoverable-button o-menu-item-button'"
+      />
+      <ColorPickerWidget
+        t-if="props.hasBackgroundColor"
+        currentColor="props.style.fillColor || props.defaultStyle?.fillColor"
+        toggleColorPicker="(ev) => this.toggleDropdownTool('fillcolorTool', ev)"
+        showColorPicker="state.activeTool === 'fillcolorTool'"
+        onColorPicked.bind="onFillColorChange"
+        title.translate="Fill color"
+        icon="'o-spreadsheet-Icon.FILL_COLOR'"
+        class="'o-hoverable-button o-menu-item-button'"
+      />
+    </div>
   </t>
 
   <t t-name="o-spreadsheet-SeriesWithAxisDesignEditor">
@@ -3344,13 +3572,13 @@
   </t>
 
   <t t-name="o-spreadsheet-SeriesDesignEditor">
-    <SidePanelCollapsible collapsedAtInit="true" title.translate="Data Series">
+    <SidePanelCollapsible isInitiallyCollapsed="true" title.translate="Data Series">
       <t t-set-slot="content">
         <Section class="'pt-0 pb-0'">
           <select
             class="o-input data-series-selector"
             t-model="state.label"
-            t-on-change="(ev) => this.updateSerieEditor(ev)">
+            t-on-change="(ev) => this.updateEditedSeries(ev)">
             <t t-foreach="getDataSeries()" t-as="serie" t-key="serie_index">
               <option
                 t-att-value="serie"
@@ -3363,7 +3591,7 @@
             <div class="d-flex align-items-center">
               <span class="o-section-title mb-0 pe-2">Series color</span>
               <RoundColorPicker
-                currentColor="getDataSerieColor()"
+                currentColor="getDataSeriesColor()"
                 onColorPicked.bind="updateDataSeriesColor"
               />
             </div>
@@ -3372,7 +3600,7 @@
             <input
               class="o-input o-serie-label-editor"
               type="text"
-              t-att-value="getDataSerieLabel()"
+              t-att-value="getDataSeriesLabel()"
               t-on-change="(ev) => this.updateDataSeriesLabel(ev)"
             />
           </Section>
@@ -3441,7 +3669,7 @@
 
   <t t-name="o-spreadsheet-GeneralDesignEditor">
     <t t-set="chart_title">Chart title</t>
-    <SidePanelCollapsible collapsedAtInit="false" title.translate="General">
+    <SidePanelCollapsible isInitiallyCollapsed="false" title.translate="General">
       <t t-set-slot="content">
         <Section class="'o-chart-background-color pt-0 pb-0'" title.translate="Background color">
           <RoundColorPicker
@@ -3453,12 +3681,9 @@
           title="title.text"
           updateTitle.bind="updateTitle"
           name="chart_title"
-          toggleItalic.bind="toggleItalicChartTitle"
-          toggleBold.bind="toggleBoldChartTitle"
-          updateAlignment.bind="updateChartTitleAlignment"
-          updateColor.bind="updateChartTitleColor"
-          style="titleStyle"
-          onFontSizeChanged.bind="updateChartTitleFontSize"
+          updateStyle.bind="updateChartTitleStyle"
+          style="title"
+          defaultStyle="{align: 'left', fontSize: this.props.defaultChartTitleFontSize}"
         />
         <t t-slot="general-extension"/>
       </t>
@@ -3486,6 +3711,29 @@
     </Section>
   </t>
 
+  <t t-name="o-spreadsheet.ChartTitle">
+    <t t-set="placeholder">Add a title</t>
+    <t t-set="title">
+      <t t-if="props.name" t-esc="props.name"/>
+      <t t-else="">Title</t>
+    </t>
+    <Section class="'o-chart-title'" title="title.toString()">
+      <input
+        type="text"
+        class="o-input"
+        t-att-value="props.title"
+        t-on-change="updateTitle"
+        t-att-placeholder="placeholder"
+      />
+      <TextStyler
+        style="props.style"
+        updateStyle="props.updateStyle"
+        defaultStyle="props.defaultStyle"
+        hasHorizontalAlign="true"
+      />
+    </Section>
+  </t>
+
   <t t-name="o-spreadsheet-AxisDesignEditor">
     <t t-set="editor_label">Axis title</t>
     <Section class="'py-0'">
@@ -3498,13 +3746,10 @@
     <ChartTitle
       title="this.getAxisTitle()"
       updateTitle.bind="updateAxisTitle"
+      updateStyle.bind="updateAxisTitleStyle"
       name="editor_label"
-      toggleItalic.bind="toggleItalicAxisTitle"
-      toggleBold.bind="toggleBoldAxisTitle"
-      updateAlignment.bind="updateAxisTitleAlignment"
-      updateColor.bind="updateAxisTitleColor"
       style="axisTitleStyle"
-      onFontSizeChanged.bind="updateAxisTitleFontSize"
+      defaultStyle="{align: 'center', color: '', fontSize: defaultFontSize}"
     />
   </t>
 
@@ -3648,6 +3893,7 @@
         t-att-style="menuStyle"
         t-on-scroll="onScroll"
         t-on-wheel.stop=""
+        t-on-pointerdown.prevent=""
         t-on-click.stop=""
         t-on-mouseover="onMouseOverMainMenu"
         t-on-contextmenu.prevent="">
@@ -3700,7 +3946,7 @@
       <Menu
         t-if="subMenu.isOpen"
         t-key="subMenu.parentMenu.id"
-        position="subMenuPosition"
+        anchorRect="subMenuAnchorRect"
         menuItems="subMenu.menuItems"
         depth="props.depth + 1"
         maxHeight="props.maxHeight"
@@ -3717,8 +3963,7 @@
     <div
       class="o-link-editor"
       t-on-click.stop="() => this.menu.isOpen=false"
-      t-on-keydown="onKeyDown"
-      t-ref="linkEditor">
+      t-on-keydown="onKeyDown">
       <div class="o-section">
         <div class="o-section-title">Text</div>
         <div class="d-flex">
@@ -3755,14 +4000,18 @@
           <button t-if="link.url" t-on-click="removeLink" class="o-remove-url o-button-icon">
             ✖
           </button>
-          <button t-if="!link.url" t-on-click.stop="openMenu" class="o-special-link o-button-icon">
+          <button
+            t-if="!link.url"
+            t-on-click.stop="openMenu"
+            class="o-special-link o-button-icon"
+            t-ref="linkEditorMenuButton">
             <t t-call="o-spreadsheet-Icon.LIST"/>
           </button>
         </div>
       </div>
       <Menu
         t-if="menu.isOpen"
-        position="menuPosition"
+        anchorRect="menuButtonRect"
         menuItems="menuItems"
         onMenuClicked="(ev) => this.onSpecialLink(ev)"
         onClose="() => this.menu.isOpen=false"
@@ -4838,7 +5087,7 @@
     <div class="o-highlight" t-ref="highlight">
       <t t-foreach="['n', 's', 'w', 'e']" t-as="orientation" t-key="orientation">
         <Border
-          onMoveHighlight="(x, y) => this.onMoveHighlight(x,y)"
+          onMoveHighlight.bind="this.onMoveHighlight"
           isMoving='highlightState.shiftingMode === "isMoving"'
           orientation="orientation"
           zone="props.zone"
@@ -4846,7 +5095,7 @@
       </t>
       <t t-foreach="['nw', 'ne', 'sw', 'se']" t-as="orientation" t-key="orientation">
         <Corner
-          onResizeHighlight="(isLeft, isTop) => this.onResizeHighlight(isLeft, isTop)"
+          onResizeHighlight.bind="onResizeHighlight"
           isResizing='highlightState.shiftingMode === "isResizing"'
           orientation="orientation"
           zone="props.zone"
@@ -4886,6 +5135,72 @@
     />
   </t>
 
+  <t t-name="o-spreadsheet-UnhideRowHeaders">
+    <t t-foreach="props.headersGroups" t-as="hiddenItem" t-key="hiddenItem_index">
+      <t t-if="isVisible(hiddenItem[0]-1)">
+        <div
+          class="position-absolute w-100 pe-none"
+          t-att-style="getUnhidePreviousButtonStyle(hiddenItem[0]-1)">
+          <div
+            class="o-unhide rounded end-0 position-absolute pe-auto"
+            t-att-data-index="hiddenItem_index"
+            t-attf-style="bottom: 2px;"
+            t-att-data-direction="'up'"
+            t-on-click="() => this.unhide(hiddenItem)">
+            <t t-call="o-spreadsheet-Icon.CARET_UP"/>
+          </div>
+        </div>
+      </t>
+      <t t-if="isVisible(hiddenItem.at(-1)+1)">
+        <div
+          class="position-absolute w-100 pe-none"
+          t-att-style="getUnhideNextButtonStyle(hiddenItem.at(-1)+1)">
+          <div
+            class="o-unhide rounded end-0 position-absolute pe-auto"
+            t-att-data-index="hiddenItem_index"
+            t-att-data-direction="'down'"
+            t-attf-style="top: 1px;"
+            t-on-click="() => this.unhide(hiddenItem)">
+            <t t-call="o-spreadsheet-Icon.CARET_DOWN"/>
+          </div>
+        </div>
+      </t>
+    </t>
+  </t>
+
+  <t t-name="o-spreadsheet-UnhideColumnHeaders">
+    <t t-foreach="props.headersGroups" t-as="hiddenItem" t-key="hiddenItem_index">
+      <t t-if="isVisible(hiddenItem[0]-1)">
+        <div
+          class="position-absolute d-flex align-items-center pe-none h-100"
+          t-att-style="getUnhidePreviousButtonStyle(hiddenItem[0]-1)">
+          <div
+            class="o-unhide position-absolute rounded pe-auto"
+            t-att-data-index="hiddenItem_index"
+            t-att-data-direction="'left'"
+            t-attf-style="right: 1px;"
+            t-on-click="() => this.unhide(hiddenItem)">
+            <t t-call="o-spreadsheet-Icon.CARET_LEFT"/>
+          </div>
+        </div>
+      </t>
+      <t t-if="isVisible(hiddenItem.at(-1)+1)">
+        <div
+          class="position-absolute d-flex align-items-center pe-none h-100"
+          t-att-style="getUnhideNextButtonStyle(hiddenItem.at(-1)+1)">
+          <div
+            class="o-unhide position-absolute rounded pe-auto"
+            t-att-data-index="hiddenItem_index"
+            t-att-data-direction="'right'"
+            t-attf-style="left: 1px;"
+            t-on-click="() => this.unhide(hiddenItem)">
+            <t t-call="o-spreadsheet-Icon.CARET_RIGHT"/>
+          </div>
+        </div>
+      </t>
+    </t>
+  </t>
+
   <t t-name="o-spreadsheet-HeadersOverlay">
     <div class="o-overlay">
       <ColResizer onOpenContextMenu="props.onOpenContextMenu"/>
@@ -4924,27 +5239,14 @@
           <div class="dragging-resizer" t-if="state.isResizing"/>
         </div>
       </t>
-      <t
-        t-foreach="env.model.getters.getHiddenRowsGroups(env.model.getters.getActiveSheetId())"
-        t-as="hiddenItem"
-        t-key="hiddenItem_index">
-        <div
-          class="position-absolute end-0 translate-middle-y"
-          t-att-style="getUnhideButtonStyle(hiddenItem[0])">
-          <div
-            class="o-unhide rounded mb-1"
-            t-att-class="{'invisible': hiddenItem.includes(0)}"
-            t-att-data-index="hiddenItem_index"
-            t-on-click="() => this.unhide(hiddenItem)">
-            <t t-call="o-spreadsheet-Icon.CARET_UP"/>
-          </div>
-          <div
-            class="o-unhide rounded"
-            t-att-class="{'invisible': hiddenItem.includes(env.model.getters.getNumberRows(env.model.getters.getActiveSheetId())-1)}"
-            t-att-data-index="hiddenItem_index"
-            t-on-click="() => this.unhide(hiddenItem)">
-            <t t-call="o-spreadsheet-Icon.CARET_DOWN"/>
+      <t t-if="env.model.getters.getHiddenRowsGroups(sheetId).length">
+        <t t-if="hasFrozenPane">
+          <div class="position-relative pe-none overflow-hidden" t-att-style="frozenContainerStyle">
+            <UnhideRowHeaders t-props="frozenUnhideHeadersProps"/>
           </div>
+        </t>
+        <div class="pe-none overflow-hidden flex-shrink-0 position-relative h-100">
+          <UnhideRowHeaders t-props="mainUnhideHeadersProps"/>
         </div>
       </t>
     </div>
@@ -4952,7 +5254,7 @@
 
   <t t-name="o-spreadsheet-ColResizer">
     <div
-      class="o-col-resizer"
+      class="o-col-resizer d-flex"
       t-on-pointermove.self="onMouseMove"
       t-on-mouseleave="onMouseLeave"
       t-on-pointerdown.self.prevent="select"
@@ -4980,27 +5282,16 @@
           <div class="dragging-resizer" t-if="state.isResizing"/>
         </div>
       </t>
-      <t
-        t-foreach="env.model.getters.getHiddenColsGroups(env.model.getters.getActiveSheetId())"
-        t-as="hiddenItem"
-        t-key="hiddenItem_index">
-        <div
-          class="position-absolute h-100 d-flex align-items-center translate-middle-x gap-2"
-          t-att-style="getUnhideButtonStyle(hiddenItem[0])">
-          <div
-            class="o-unhide rounded"
-            t-att-class="{'invisible': hiddenItem.includes(0)}"
-            t-att-data-index="hiddenItem_index"
-            t-on-click="() => this.unhide(hiddenItem)">
-            <t t-call="o-spreadsheet-Icon.CARET_LEFT"/>
-          </div>
+      <t t-if="env.model.getters.getHiddenColsGroups(sheetId).length">
+        <t t-if="hasFrozenPane">
           <div
-            class="o-unhide rounded"
-            t-att-class="{'invisible': hiddenItem.includes(env.model.getters.getNumberCols(env.model.getters.getActiveSheetId())-1)}"
-            t-att-data-index="hiddenItem_index"
-            t-on-click="() => this.unhide(hiddenItem)">
-            <t t-call="o-spreadsheet-Icon.CARET_RIGHT"/>
+            class="position-relative pe-none h-100 flex-shrink-0"
+            t-att-style="frozenContainerStyle">
+            <UnhideColumnHeaders t-props="frozenUnhideHeadersProps"/>
           </div>
+        </t>
+        <div class="pe-none overflow-hidden flex-shrink-0 position-relative w-100">
+          <UnhideColumnHeaders t-props="mainUnhideHeadersProps"/>
         </div>
       </t>
     </div>
@@ -5068,7 +5359,7 @@
       <Menu
         t-if="menu.isOpen"
         menuItems="menu.menuItems"
-        position="menu.position"
+        anchorRect="menu.anchorRect"
         onClose.bind="this.closeMenu"
       />
     </div>
@@ -5116,6 +5407,9 @@
   </t>
 
   <t t-name="o-spreadsheet-GridOverlay">
+    <div class="position-absolute" t-att-style="style">
+      <FiguresContainer onFigureDeleted="props.onFigureDeleted"/>
+    </div>
     <div
       t-ref="gridOverlay"
       class="o-grid-overlay overflow-hidden"
@@ -5124,7 +5418,6 @@
       t-on-pointerdown="onMouseDown"
       t-on-dblclick.self="onDoubleClick"
       t-on-contextmenu.stop.prevent="onContextMenu">
-      <FiguresContainer onFigureDeleted="props.onFigureDeleted"/>
       <DataValidationOverlay/>
       <FilterIconsOverlay/>
       <GridAddRowsFooter
@@ -5132,6 +5425,7 @@
         t-key="env.model.getters.getActiveSheetId()"
         focusGrid="props.onFigureDeleted"
       />
+      <t t-slot="default"/>
     </div>
   </t>
 
@@ -5183,7 +5477,6 @@
         onCellClicked.bind="onCellClicked"
         onCellDoubleClicked.bind="onCellDoubleClicked"
         onCellRightClicked.bind="onCellRightClicked"
-        onCellHovered.bind="onCellHovered"
         onGridResized.bind="onGridResized"
         onGridMoved.bind="moveCanvas"
         gridOverlayDimensions="gridOverlayDimensions"
@@ -5225,7 +5518,7 @@
       <Menu
         t-if="menuState.isOpen"
         menuItems="menuState.menuItems"
-        position="menuState.position"
+        anchorRect="menuState.anchorRect"
         onClose="() => this.closeMenu()"
       />
       <t t-foreach="staticTables" t-as="table" t-key="table.id">
@@ -5386,13 +5679,13 @@
           <div
             class="o-figure-viewport-inverse w-0 h-0 overflow-visible position-absolute"
             t-att-style="container.inverseViewportStyle">
-            <t t-foreach="container.figures" t-as="figure" t-key="figure.id">
+            <t t-foreach="container.figures" t-as="figureUI" t-key="figureUI.id">
               <FigureComponent
                 onFigureDeleted="this.props.onFigureDeleted"
-                figure="figure"
-                style="getFigureStyle(figure)"
-                onMouseDown="(ev) => this.startDraggingFigure(figure, ev)"
-                onClickAnchor="(dirX, dirY, ev) => this.startResize(figure, dirX, dirY, ev)"
+                figureUI="figureUI"
+                style="getFigureStyle(figureUI)"
+                onMouseDown="(ev) => this.startDraggingFigure(figureUI, ev)"
+                onClickAnchor="(dirX, dirY, ev) => this.startResize(figureUI, dirX, dirY, ev)"
               />
             </t>
           </div>
@@ -5419,8 +5712,8 @@
     <div class="o-chart-container w-100 h-100" t-on-dblclick="onDoubleClick">
       <t
         t-component="chartComponent"
-        figure="this.props.figure"
-        t-key="this.props.figure.id + '-' + chartType"
+        figureUI="this.props.figureUI"
+        t-key="this.props.figureUI.id"
       />
     </div>
   </t>
@@ -5433,15 +5726,15 @@
         t-on-contextmenu.prevent.stop="(ev) => !env.model.getters.isReadonly() and this.onContextMenu(ev)"
         t-ref="figure"
         t-att-style="props.style"
-        t-att-data-id="props.figure.id"
+        t-att-data-id="props.figureUI.id"
         tabindex="0"
         t-on-keydown="(ev) => this.onKeyDown(ev)"
         t-on-keyup.stop="">
         <t
-          t-component="figureRegistry.get(props.figure.tag).Component"
-          t-key="props.figure.id"
+          t-component="figureRegistry.get(props.figureUI.tag).Component"
+          t-key="props.figureUI.id"
           onFigureDeleted="props.onFigureDeleted"
-          figure="props.figure"
+          figureUI="props.figureUI"
         />
         <div class="o-figure-menu position-absolute m-2" t-if="!env.isDashboard()">
           <div
@@ -5454,7 +5747,7 @@
           </div>
           <Menu
             t-if="menuState.isOpen"
-            position="menuState.position"
+            anchorRect="menuState.anchorRect"
             menuItems="menuState.menuItems"
             onClose="() => this.menuState.isOpen=false"
           />
@@ -5580,31 +5873,30 @@
   </t>
 
   <t t-name="o-spreadsheet-SpreadsheetDashboard">
-    <div class="o-grid o-two-columns" tabindex="-1" t-on-wheel="onMouseWheel">
+    <div class="o-grid o-two-columns" t-ref="dashboard" tabindex="-1" t-on-wheel="onMouseWheel">
       <div class="mx-auto h-100 position-relative" t-ref="grid" t-att-style="gridContainer">
         <GridOverlay
-          onCellHovered.bind="onCellHovered"
           onGridResized.bind="onGridResized"
           onGridMoved.bind="moveCanvas"
-          gridOverlayDimensions="gridOverlayDimensions"
-        />
+          gridOverlayDimensions="gridOverlayDimensions">
+          <div
+            t-foreach="getClickableCells()"
+            t-as="clickableCell"
+            t-key="clickableCell_index"
+            class="o-dashboard-clickable-cell"
+            t-att-title="clickableCell.title"
+            t-on-click="(ev) => this.selectClickableCell(ev, clickableCell)"
+            t-on-auxclick="(ev) => this.selectClickableCell(ev, clickableCell)"
+            t-on-contextmenu.prevent=""
+            t-att-style="getCellClickableStyle(clickableCell.coordinates)"
+          />
+        </GridOverlay>
         <canvas t-ref="canvas"/>
         <GridPopover
           gridRect="getGridRect()"
           onMouseWheel.bind="onMouseWheel"
           onClosePopover.bind="onClosePopover"
         />
-        <div
-          t-foreach="getClickableCells()"
-          t-as="clickableCell"
-          t-key="clickableCell_index"
-          class="o-dashboard-clickable-cell"
-          t-att-title="clickableCell.title"
-          t-on-click="(ev) => this.selectClickableCell(ev, clickableCell)"
-          t-on-auxclick="(ev) => this.selectClickableCell(ev, clickableCell)"
-          t-on-contextmenu.prevent=""
-          t-att-style="getCellClickableStyle(clickableCell.coordinates)"
-        />
       </div>
       <VerticalScrollBar/>
       <HorizontalScrollBar/>
@@ -5616,6 +5908,9 @@
     <div class="o-topbar-composer-container w-100">
       <div
         class="o-topbar-composer position-relative bg-white user-select-text d-flex"
+        t-att-class="{
+          'o-topbar-composer-readonly': env.model.getters.isReadonly(),
+        }"
         t-on-click.stop=""
         t-att-style="containerStyle">
         <Composer
@@ -5646,6 +5941,14 @@
     </div>
   </t>
 
+  <t t-name="o-spreadsheet-SpeechBubble">
+    <t t-portal="'.o-spreadsheet'">
+      <div class="o-speech-bubble position-absolute px-3" t-ref="bubble">
+        <div class="o-speech-content text-truncate pb-1" t-esc="props.content"/>
+      </div>
+    </t>
+  </t>
+
   <t t-name="o-spreadsheet-GridComposer">
     <div
       class="o-cell-reference"
@@ -5661,14 +5964,15 @@
   <t t-name="o-spreadsheet-FunctionDescriptionProvider">
     <div class="o-formula-assistant-container user-select-none shadow">
       <t t-set="context" t-value="getContext()"/>
-      <div class="o-formula-assistant" t-if="context.functionName">
+      <div class="o-formula-assistant" t-if="context.functionDescription.name">
         <div class="o-formula-assistant-head d-flex flex-row justify-content-between">
           <div>
-            <span t-esc="context.functionName"/>
+            <span t-esc="context.functionDescription.name"/>
             (
             <t t-foreach="context.functionDescription.args" t-as="arg" t-key="arg.name">
               <span t-if="arg_index > '0'" t-esc="formulaArgSeparator"/>
-              <span t-att-class="{ 'o-formula-assistant-focus': context.argToFocus === arg_index }">
+              <span
+                t-att-class="{ 'o-formula-assistant-focus': context.argsToFocus.includes(arg_index) }">
                 <span>
                   <span t-if="arg.optional || arg.repeating || arg.default">[</span>
                   <span t-esc="arg.name"/>
@@ -5680,13 +5984,13 @@
             )
           </div>
           <i
-            class="fa fa-caret-up px-2 align-self-start collapsed"
-            data-bs-toggle="collapse"
-            data-bs-target="#formula-assistant-details"
+            class="fa fa-caret-up px-2 align-self-start"
+            t-att-class="state.isCollapsed ? 'collapsed' : ''"
+            t-on-click="() => this.toggle()"
           />
         </div>
 
-        <div id="formula-assistant-details" class="collapse">
+        <Collapse isCollapsed="state.isCollapsed">
           <div class="o-formula-assistant-core pb-3 m-3">
             <div class="o-formula-assistant-gray">ABOUT</div>
             <div t-esc="context.functionDescription.description"/>
@@ -5696,8 +6000,8 @@
             <div
               class="o-formula-assistant-arg p-3 pt-0 display-flex flex-column"
               t-att-class="{
-                  'o-formula-assistant-gray': context.argToFocus >= '0',
-                  'o-formula-assistant-focus': context.argToFocus === arg_index,
+                  'o-formula-assistant-gray': context.argsToFocus.length > 0,
+                  'o-formula-assistant-focus': context.argsToFocus.includes(arg_index),
                 }">
               <div>
                 <span t-esc="arg.name"/>
@@ -5712,7 +6016,7 @@
               <div class="o-formula-assistant-arg-description" t-esc="arg.description"/>
             </div>
           </t>
-        </div>
+        </Collapse>
       </div>
     </div>
   </t>
@@ -5749,6 +6053,7 @@
           t-on-mousewheel.stop=""
           t-on-input="onInput"
           t-on-pointerdown="onMousedown"
+          t-on-pointerup="onMouseup"
           t-on-click="onClick"
           t-on-keyup="onKeyup"
           t-on-paste="onPaste"
@@ -5760,7 +6065,7 @@
         />
       </div>
       <div
-        class="o-composer-assistant-container shadow position-absolute"
+        class="o-composer-assistant-container shadow position-absolute z-1"
         t-att-style="assistantContainerStyle"
         t-if="props.focus !== 'inactive' and !assistant.forcedClosed and assistantIsAvailable">
         <span
@@ -5779,9 +6084,8 @@
           t-on-pointerup.prevent.stop="">
           <FunctionDescriptionProvider
             t-if="functionDescriptionState.showDescription"
-            functionName="functionDescriptionState.functionName"
             functionDescription="functionDescriptionState.functionDescription"
-            argToFocus="functionDescriptionState.argToFocus"
+            argsToFocus="functionDescriptionState.argsToFocus"
           />
           <div
             t-if="functionDescriptionState.showDescription and autoCompleteState.provider"
@@ -5796,6 +6100,11 @@
           />
         </div>
       </div>
+      <SpeechBubble
+        t-if="displaySpeechBubble"
+        content="props.composerStore.hoveredContentEvaluation"
+        anchorRect="composerState.hoveredRect"
+      />
     </div>
   </t>
 
@@ -5816,7 +6125,7 @@
               t-foreach="htmlContent"
               t-as="content"
               t-key="content_index"
-              t-att-class="content.class"
+              t-att-class="content.classes?.join(' ')"
               t-attf-style="color: {{content.color || 'inherit'}};"
               t-esc="content.value"
             />
@@ -5926,7 +6235,6 @@
               t-on-click.stop=""
               t-att-value="state.customHexColor"
               t-on-input="setHexColor"
-              maxlength="7"
             />
             <div class="o-color-preview" t-att-style="colorPreviewStyle"/>
           </div>
@@ -5956,10 +6264,11 @@
   <t t-name="o-spreadsheet-BottomBar">
     <div
       class="o-spreadsheet-bottom-bar o-two-columns d-flex align-items-center overflow-hidden"
+      t-att-class="{'mobile': env.isSmall}"
       t-on-click="props.onClick"
       t-ref="bottomBar"
       t-on-contextmenu.prevent="">
-      <Ripple>
+      <Ripple class="'add-sheet-container'">
         <div
           class="o-sheet-item o-add-sheet me-2 p-1"
           t-if="!env.model.getters.isReadonly()"
@@ -5968,11 +6277,15 @@
         </div>
       </Ripple>
       <Ripple>
-        <div class="o-sheet-item o-list-sheets me-2 p-1" t-on-click="clickListSheets">
+        <div
+          class="o-sheet-item o-list-sheets me-2 p-1"
+          composerFocusableElement="true"
+          tabindex="-1"
+          t-on-click="clickListSheets">
           <t t-call="o-spreadsheet-Icon.LIST"/>
         </div>
       </Ripple>
-      <div class="o-all-sheets position-relative flex-shrink-0 d-flex h-100 me-3">
+      <div class="o-all-sheets position-relative d-flex h-100 flex-fill overflow-hidden">
         <div
           class="o-bottom-bar-fade-in position-absolute h-100 w-100 pe-none"
           t-if="state.isSheetListScrollableLeft"
@@ -5996,47 +6309,48 @@
           t-if="state.isSheetListScrollableRight"
         />
       </div>
-      <div
-        class="o-bottom-bar-arrows d-flex h-100 me-5 align-items-center"
-        t-if="state.isSheetListScrollableLeft || state.isSheetListScrollableRight">
-        <Ripple
-          ignoreClickPosition="true"
-          width="20"
-          height="20"
-          offsetX="1"
-          allowOverflow="true"
-          enabled="state.isSheetListScrollableLeft">
-          <div
-            class="o-bottom-bar-arrow o-bottom-bar-arrow-left d-flex align-items-center me-2"
-            t-att-class="{'o-disabled': !state.isSheetListScrollableLeft}"
-            t-on-click="onArrowLeft">
-            <t t-call="o-spreadsheet-Icon.CARET_LEFT"/>
-          </div>
-        </Ripple>
-        <Ripple
-          ignoreClickPosition="true"
-          width="20"
-          height="20"
-          offsetX="-1"
-          allowOverflow="true"
-          enabled="state.isSheetListScrollableRight">
-          <div
-            class="o-bottom-bar-arrow o-bottom-bar-arrow-right d-flex align-items-center me-4"
-            t-att-class="{'o-disabled': !state.isSheetListScrollableRight}"
-            t-on-click="onArrowRight">
-            <t t-call="o-spreadsheet-Icon.CARET_RIGHT"/>
-          </div>
-        </Ripple>
-      </div>
-
-      <BottomBarStatistic
-        openContextMenu="(x, y, registry) => this.openContextMenu(x, y, 'listSelectionStatistics', registry)"
-        closeContextMenu="() => this.closeContextMenuWithId('listSelectionStatistics')"
-      />
+      <t t-if="!env.isSmall">
+        <div
+          class="o-bottom-bar-arrows d-flex h-100 me-4 align-items-center ms-3"
+          t-if="state.isSheetListScrollableLeft || state.isSheetListScrollableRight">
+          <Ripple
+            ignoreClickPosition="true"
+            width="20"
+            height="20"
+            offsetX="1"
+            allowOverflow="true"
+            enabled="state.isSheetListScrollableLeft">
+            <div
+              class="o-bottom-bar-arrow o-bottom-bar-arrow-left d-flex align-items-center"
+              t-att-class="{'o-disabled': !state.isSheetListScrollableLeft}"
+              t-on-click="onArrowLeft">
+              <t t-call="o-spreadsheet-Icon.CARET_LEFT"/>
+            </div>
+          </Ripple>
+          <Ripple
+            ignoreClickPosition="true"
+            width="20"
+            height="20"
+            offsetX="-1"
+            allowOverflow="true"
+            enabled="state.isSheetListScrollableRight">
+            <div
+              class="o-bottom-bar-arrow o-bottom-bar-arrow-right d-flex align-items-center"
+              t-att-class="{'o-disabled': !state.isSheetListScrollableRight}"
+              t-on-click="onArrowRight">
+              <t t-call="o-spreadsheet-Icon.CARET_RIGHT"/>
+            </div>
+          </Ripple>
+        </div>
+        <BottomBarStatistic
+          openContextMenu="(x, y, registry) => this.openContextMenu(x, y, 'listSelectionStatistics', registry)"
+          closeContextMenu="() => this.closeContextMenuWithId('listSelectionStatistics')"
+        />
+      </t>
 
       <Menu
         t-if="menuState.isOpen"
-        position="menuState.position"
+        anchorRect="menuState.anchorRect"
         menuItems="menuState.menuItems"
         maxHeight="menuMaxHeight"
         onClose="() => this.closeMenu()"
@@ -6047,7 +6361,7 @@
 
   <t t-name="o-spreadsheet-BottomBarStatistic">
     <t t-set="selectedStatistic" t-value="getSelectedStatistic()"/>
-    <Ripple class="'ms-auto'" t-if="selectedStatistic !== undefined">
+    <Ripple class="'ms-auto bottom-statistics'" t-if="selectedStatistic !== undefined">
       <div
         class="o-selection-statistic text-truncate user-select-none me-4 bg-white rounded shadow d-flex align-items-center"
         t-on-click="listSelectionStatistics">
@@ -6077,14 +6391,16 @@
           t-att-class="{'o-sheet-name-editable': state.isEditing }"
           t-ref="sheetNameSpan"
           t-esc="sheetName"
-          t-on-click="(ev) => this.onMouseEventSheetName(ev)"
           t-on-pointerdown="(ev) => this.onMouseEventSheetName(ev)"
           t-on-dblclick="() => this.onDblClick()"
           t-on-focusout="() => this.onFocusOut()"
           t-on-keydown="(ev) => this.onKeyDown(ev)"
           t-att-contenteditable="state.isEditing ? 'true': 'false'"
         />
-        <span class="o-sheet-icon ms-1" t-on-click.stop="(ev) => this.onIconClick(ev)">
+        <span
+          class="o-sheet-icon ms-1"
+          tabindex="-1"
+          t-on-click.stop="(ev) => this.onIconClick(ev)">
           <t t-call="o-spreadsheet-Icon.CARET_DOWN"/>
         </span>
         <div