@odoo/o-spreadsheet 19.5.0-alpha.8 → 20.0.0

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 19.5.0-alpha.8
- @date 2026-08-04T07:11:41.047Z
- @hash c1baebe
+ @version 20.0.0
+ @date 2026-09-17T07:58:19.411Z
+ @hash 9d84039
 -->
 <odoo>
   <t t-name="o-spreadsheet-ValidationMessages">
@@ -16,7 +16,7 @@
               <t t-else="" t-call="o-spreadsheet-Icon.TRIANGLE_EXCLAMATION"/>
             </div>
             <div class="d-flex flex-column overflow-hidden">
-              <span class="ps-2 text-truncate" t-out="msg"/>
+              <span class="ps-2" t-out="msg"/>
             </div>
           </div>
         </div>
@@ -77,7 +77,7 @@
             t-if="this.env.model.getters.isReadonly()"
             class="o-readonly-toolbar d-flex flex-grow-1 align-items-center text-muted">
             <span>
-              <i class="fa fa-eye"/>
+              <i class="oi" data-icon="visibility"/>
               Readonly Access
             </span>
           </div>
@@ -122,23 +122,25 @@
       </div>
       <div
         t-if="this.fingerprints.isEnabled"
-        class="topbar-banner irregularity-map d-flex align-items-center justify-content-between border-top">
+        class="topbar-banner irregularity-map d-flex align-items-stretch justify-content-between border-top">
         <div
           t-on-click="() => this.fingerprints.disable()"
           role="button"
           title="This tool analyzes spreadsheet formulas for patterns and highlights inconsistencies. Irregularities may indicate potential errors in formula structures, references, or arguments. (Click to turn off)"
-          class="h-100 d-flex align-items-center text-info px-3">
-          <t t-call="o-spreadsheet-Icon.IRREGULARITY_MAP"/>
+          class="d-flex align-items-center text-info px-3 text-nowrap">
+          <span class="pe-2">
+            <t t-call="o-spreadsheet-Icon.IRREGULARITY_MAP"/>
+          </span>
           Irregularity map
         </div>
         <div
-          class="ps-3 h-100 flex-fill d-flex justify-content-between rounded-0 alert alert-info ps-0 py-0 my-0">
+          class="ps-3 flex-fill d-flex justify-content-between align-items-center rounded-0 alert alert-info ps-0 py-1 my-0">
           <span class="d-flex align-items-center">
             This tool analyzes formulas for patterns and highlights inconsistencies. Irregularities
             may indicate potential errors in formula structures, references or arguments.
           </span>
           <div
-            class="ps-3 btn o-button-link flex-shrink-0"
+            class="ps-3 btn o-button-link flex-shrink-0 py-0"
             t-on-click="() => this.fingerprints.disable()">
             Turn off
           </div>
@@ -146,18 +148,18 @@
       </div>
       <div
         t-if="!this.env.model.getters.isAutomaticEvaluationEnabled()"
-        class="topbar-banner manual-evaluation d-flex align-items-center justify-content-between border-top">
-        <div class="h-100 d-flex align-items-center text-warning px-3">
-          <i class="fa fa-pause-circle me-1"/>
+        class="topbar-banner manual-evaluation d-flex align-items-stretch justify-content-between border-top">
+        <div class="d-flex align-items-center text-warning px-3 text-nowrap">
+          <i class="oi me-2" data-icon="pause_circle"/>
           Manual calculation
         </div>
         <div
-          class="ps-3 h-100 flex-fill d-flex justify-content-between rounded-0 alert alert-warning ps-0 py-0 my-0">
+          class="ps-3 flex-fill d-flex justify-content-between align-items-center rounded-0 alert alert-warning ps-0 py-1 my-0">
           <span class="d-flex align-items-center">
             Automatic evaluation is disabled. Press F9 to recalculate.
           </span>
           <div
-            class="ps-3 btn o-button-link flex-shrink-0"
+            class="ps-3 btn o-button-link flex-shrink-0 py-0"
             t-on-click="() => this.env.model.dispatch('SET_AUTOMATIC_EVALUATION', { enabled: true })">
             Re-enable
           </div>
@@ -476,13 +478,15 @@
   </t>
 
   <t t-name="o-spreadsheet-StandaloneGridCanvas">
-    <canvas t-ref="this.canvasRef"/>
+    <t t-foreach="this.carouselDataViews" t-as="carouselDataView" t-key="carouselDataView_index">
+      <CarouselDataViewPrint t-props="carouselDataView"/>
+    </t>
   </t>
 
   <t t-name="o-spreadsheet-SpreadsheetPrint">
     <div class="o-spreadsheet-print d-flex flex-column h-100 w-100">
       <t t-set="pages" t-value="this.printStore.printPages"/>
-      <div class="o-print-header flex-shrink-0 d-flex align-items-center d-print-none">
+      <div class="o-print-header flex-shrink-0 d-flex align-items-center">
         <h3 class="m-0 p-3 ps-4 text-white">Print Preview</h3>
         <span class="text-white">
           <t t-out="pages.length"/>
@@ -494,30 +498,8 @@
         <button class="o-button primary flex-grow-0 me-4" t-on-click="this.onPrint">Next</button>
       </div>
       <div class="o-print-container d-flex flex-grow-1 overflow-hidden">
-        <div class="o-print-preview w-100 overflow-auto d-flex flex-column">
-          <div class="mx-auto">
-            <div
-              t-if="pages.length === 0"
-              class="o-print-page o-empty-print-page m-4 shadow d-flex flex-column align-items-center justify-content-center flex-shrink-0"
-              t-att-style="this.pageStyle">
-              <h4 class="fst-italic text-muted">No content to print</h4>
-            </div>
-            <div
-              t-else=""
-              t-foreach="pages"
-              t-as="page"
-              t-key="page_index"
-              class="o-print-page m-4 shadow d-flex justify-content-center flex-shrink-0"
-              t-att-style="this.pageStyle">
-              <StandaloneGridCanvas
-                sheetId="page.sheetId"
-                zone="page.zone"
-                renderingCtx="page.renderingCtx"
-              />
-            </div>
-          </div>
-        </div>
-        <div class="o-sidePanel flex-shrink-0 bg-white border-top border-start d-print-none">
+        <iframe class="o-print-preview" t-ref="this.iframeRef" title="Print preview"/>
+        <div class="o-sidePanel flex-shrink-0 bg-white border-top border-start">
           <div class="o-sidePanelBody pt-4">
             <Section t-if="!this.env.model.getters.isDashboard()">
               <div class="o-section-title">Print content</div>
@@ -571,6 +553,16 @@
           </div>
         </div>
       </div>
+
+      <t t-foreach="pages" t-as="page" t-key="page_index">
+        <StandaloneGridCanvas
+          t-if="this.printIframe.canvases()[page_index]"
+          canvas="this.printIframe.canvases()[page_index]"
+          sheetId="page.sheetId"
+          zone="page.zone"
+          renderingCtx="page.renderingCtx"
+        />
+      </t>
     </div>
   </t>
 
@@ -660,7 +652,7 @@
         <div class="d-flex flex-fill align-items-center bottom-bar-menu border-top border-bottom">
           <Ripple>
             <div class="py-1 px-1 mx-2 ribbon-toggler" t-on-click="this.toggleRibbon">
-              <i class="o-icon fa fa-cog"/>
+              <i class="o-icon oi oi-filled" data-icon="settings_f"/>
             </div>
           </Ripple>
           <BottomBar onClick="this.props.onClick"/>
@@ -676,7 +668,7 @@
           class="o-previous-button px-3 py-1 mx-2 rounded"
           t-on-click="this.onClickBack"
           t-att-title="this.backTitle">
-          <i class="fa fa-angle-left"/>
+          <i class="oi" data-icon="keyboard_arrow_left"/>
         </div>
         <span class="d-flex align-items-center" t-out="this.state.title"/>
       </div>
@@ -692,7 +684,11 @@
   <t t-name="o-spreadsheet-TableStyleEditorPanel">
     <div class="o-table-style-editor-panel">
       <Section title.translate="Style name">
-        <input type="text" class="o-input" t-custom-model="this.state.styleName"/>
+        <TextInput
+          value="this.state.styleName"
+          onChange="(value) => this.state.styleName = value"
+          alwaysShowBorder="true"
+        />
       </Section>
       <Section class="'pt-1'" title.translate="Style color">
         <RoundColorPicker
@@ -913,14 +909,14 @@
           t-if="this.props.onToggleCollapsePanel"
           class="o-collapse-panel o-sidePanelAction rounded"
           t-on-click="this.props.onToggleCollapsePanel">
-          <i class="fa fa-angle-double-right"/>
+          <i class="oi" data-icon="keyboard_double_arrow_right"/>
         </div>
         <div class="o-sidePanelTitle o-fw-bold ms-2" t-out="this.getTitle()"/>
         <div
           t-if="this.props.isPinned"
           class="o-pin-panel o-sidePanelAction ms-auto rounded active"
           t-on-click="this.props.onTogglePinPanel">
-          <i class="fa fa-thumb-tack"/>
+          <i class="oi" data-icon="push_pin"/>
         </div>
         <div
           class="o-sidePanelClose o-sidePanelAction rounded"
@@ -959,13 +955,13 @@
         <div
           t-if="this.props.onToggleCollapsePanel"
           class="o-collapse-panel o-sidePanelAction rounded mb-1">
-          <i class="fa fa-angle-double-left"/>
+          <i class="oi" data-icon="keyboard_double_arrow_left"/>
         </div>
         <div
           t-if="this.props.isPinned"
           class="o-pin-panel o-sidePanelAction ms-auto rounded active"
           t-on-click="this.props.onTogglePinPanel">
-          <i class="fa fa-thumb-tack"/>
+          <i class="oi" data-icon="push_pin"/>
         </div>
         <div
           class="o-sidePanelClose o-sidePanelAction rounded mb-1"
@@ -1084,17 +1080,17 @@
     <div class="o-pivot-panel d-flex flex-column h-100">
       <div class="o-panel d-flex">
         <div
-          class="o-sidePanel-tab o-panel-configuration d-flew flex-grow-1 text-center"
+          class="o-sidePanel-tab o-panel-configuration d-flex flex-grow-1 justify-content-center"
           t-att-class="this.state.panel !== 'configuration' ? 'inactive' : ''"
           t-on-click="this.switchPanel.bind(this, 'configuration')">
-          <i class="fa fa-sliders me-1"/>
+          <i class="oi me-2" data-icon="tune"/>
           Configuration
         </div>
         <div
-          class="o-sidePanel-tab o-panel-design d-flew flex-grow-1 text-center"
+          class="o-sidePanel-tab o-panel-design d-flex flex-grow-1 justify-content-center"
           t-att-class="this.state.panel !== 'design' ? 'inactive' : ''"
           t-on-click="this.switchPanel.bind(this, 'design')">
-          <i class="fa fa-paint-brush me-1"/>
+          <i class="oi me-2" data-icon="design_services"/>
           Design
         </div>
       </div>
@@ -1372,7 +1368,8 @@
               <t t-set="errorMessage" t-value="this.getHugeDimensionErrorMessage(col)"/>
               <i
                 t-if="errorMessage"
-                class="text-warning fa fa-exclamation-triangle"
+                class="text-warning oi"
+                data-icon="warning"
                 t-att-title="errorMessage"
               />
             </t>
@@ -1413,7 +1410,8 @@
               <t t-set="errorMessage" t-value="this.getHugeDimensionErrorMessage(row)"/>
               <i
                 t-if="errorMessage"
-                class="text-warning fa fa-exclamation-triangle"
+                class="text-warning oi"
+                data-icon="warning"
                 t-att-title="errorMessage"
               />
             </t>
@@ -1504,13 +1502,14 @@
         <t t-if="measure.isHidden" t-set="hideTitle">Show</t>
         <t t-else="" t-set="hideTitle">Hide</t>
         <i
-          t-att-class="measure.isHidden ? 'fa fa-eye-slash': 'fa fa-eye'"
+          t-att-data-icon="measure.isHidden ? 'visibility_off_f' : 'visibility_f'"
           t-att-title="hideTitle"
-          class="o-button-icon pe-1 ps-2"
+          class="o-button-icon pe-1 ps-1 oi"
           t-on-click="this.toggleMeasureVisibility"
         />
         <i
-          class="o-button-icon pe-1 ps-2 fa fa-cog"
+          class="o-button-icon pe-1 ps-1 oi oi-filled"
+          data-icon="settings_f"
           title="Show values as"
           t-on-click="this.openShowValuesAs"
         />
@@ -1598,7 +1597,8 @@
         <div class="d-flex flex-rows">
           <t t-call-slot="upper-right-icons"/>
           <i
-            class="o-button-icon fa fa-trash pe-1 ps-2"
+            class="o-button-icon oi oi-filled pe-1 ps-1"
+            data-icon="delete_f"
             t-if="this.props.onRemoved"
             t-on-click="() => this.props.onRemoved(this.props.dimension)"
           />
@@ -1678,7 +1678,8 @@
       />
       <div t-if="this.props.isDirty" class="d-flex align-items-center">
         <i
-          class="o-button-icon pe-0 fa fa-undo"
+          class="o-button-icon pe-0 oi"
+          data-icon="undo"
           title="Discard all changes"
           t-on-click="() => this.props.discard()"
         />
@@ -1711,7 +1712,8 @@
                 selectContentOnFocus="true"
               />
               <i
-                class="o-button-icon ps-3 fa fa-trash"
+                class="o-button-icon ps-3 oi oi-filled"
+                data-icon="delete_f"
                 t-on-click="() => this.onDeleteGroup(group_index)"
               />
             </div>
@@ -1746,8 +1748,10 @@
           <div class="d-flex flex-column gap-1">
             <div class="d-flex justify-content-center mb-3">
               <button class="o-button" t-on-click="this.startProfiling">
-                <i class="fa fa-refresh me-1"/>
-                Re-analyze
+                <div class="d-flex justify-content-center align-content-center">
+                  <i class="oi me-1" data-icon="refresh"/>
+                  Re-analyze
+                </div>
               </button>
             </div>
             <div class="d-flex justify-content-between">
@@ -2059,7 +2063,8 @@
               type="text"
               class="o-input o-input-without-count o-replace"
               t-on-keydown="this.onKeydownReplace"
-              t-custom-model="this.store.toReplace"
+              t-att-value="this.store.toReplace"
+              t-on-input="this.onReplaceInput"
               placeholder="e.g. 'replace me'"
             />
           </div>
@@ -2193,6 +2198,42 @@
     </div>
   </t>
 
+  <div t-name="o-spreadsheet-DataAnalysisPanel" class="o-data-analysis-panel">
+    <Section title.translate="Suggested charts">
+      <div t-if="this.store.hasData" class="px-2 pb-2">
+        <div t-if="this.store.chartSuggestions.length" class="o-chart-suggestions-grid">
+          <t t-foreach="this.store.chartSuggestions" t-as="suggestion" t-key="suggestion_index">
+            <ChartSuggestionPreview
+              definition="suggestion.definition"
+              description="suggestion.description"
+              onPointerDown="(ev) => this.onStartChartSuggestionDrag(suggestion.definition, ev)"
+            />
+          </t>
+        </div>
+        <div t-else="" class="o-data-analysis-empty text-muted p-3 text-center">
+          No chart suggestions available for the selected data. Note that the order of selected
+        columns can impact chart suggestions.
+        </div>
+      </div>
+      <div t-else="" class="o-data-analysis-empty text-muted p-3 text-center">
+        Select cells containing data to see chart suggestions. Note that the order of selected
+        columns can impact chart suggestions.
+      </div>
+    </Section>
+  </div>
+
+  <t t-name="o-spreadsheet-ChartSuggestionPreview">
+    <div
+      class="o-suggestion-canvas-wrap os-theme-dependant overflow-hidden position-relative border rounded"
+      t-on-pointerdown="(ev) => this.props.onPointerDown(ev)"
+      t-att-title="this.props.description">
+      <canvas class="w-100 h-100" t-ref="this.chartCanvasRef"/>
+      <div class="o-suggestion-insert-icon d-flex align-items-center justify-content-center">
+        <t t-call="o-spreadsheet-Icon.INSERT_CHART_SUGGESTION"/>
+      </div>
+    </div>
+  </t>
+
   <t t-name="o-spreadsheet-ValueInRangeCriterionForm">
     <SelectionInput
       ranges="[this.props.criterion.values[0] || '']"
@@ -2381,7 +2422,8 @@
   <t t-name="o-spreadsheet-CalendarButton">
     <div class="o-calendar-button ms-1">
       <button type="button" class="o-button btn" t-on-click="this.openCalendar">
-        <i class="fa fa-calendar"/>
+        <!-- TODORAR  see how we can make filled versions -->
+        <i class="oi oi-filled" data-icon="calendar_today"/>
       </button>
       <input
         type="date"
@@ -2895,17 +2937,17 @@
 
   <t t-name="o-spreadsheet-SidePanelCollapsible">
     <div class="" t-att-class="this.props.class">
-      <div
-        class="o_side_panel_collapsible_title o-fw-bold d-flex align-items-center"
-        t-on-click="() => this.toggle()">
+      <div class="o_side_panel_collapsible_title o-fw-bold d-flex align-items-center">
         <div
           class="collapsor w-100 d-flex align-items-center ps-1"
-          t-att-class="this.state.isCollapsed ? 'collapsed' : ''">
+          t-att-class="this.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-out="this.props.title"/>
         </div>
+        <t t-call-slot="titleButton"/>
       </div>
       <Collapse isCollapsed="this.state.isCollapsed">
         <div class="pt-2">
@@ -2923,7 +2965,8 @@
 
   <t t-name="o-spreadsheet-CogWheelMenu">
     <span
-      class="fa fa-cog os-cog-wheel-menu-icon o-button-icon"
+      class="oi oi-filled os-cog-wheel-menu-icon o-button-icon"
+      data-icon="settings_f"
       t-on-click="this.toggleMenu"
       t-ref="this.buttonRef"
     />
@@ -3390,19 +3433,21 @@
         </Section>
       </t>
     </GeneralDesignEditor>
-    <ChartTitle
-      title="this.props.definition.keyDescr?.text ?? ''"
-      updateTitle="(text) => this.setKeyText(text)"
-      name.translate="Key Value Style"
-      placeholder.translate="Add a key value description"
-      updateStyle.bind="this.updateKeyStyle"
-      style="this.keyStyle"
-    />
-    <SidePanelCollapsible isInitiallyCollapsed="false" title.translate="Baseline">
+    <SidePanelCollapsible isInitiallyCollapsed="false" title.translate="Scorecard Design">
       <t t-set-slot="content">
         <ChartTitle
+          class="'pt-0'"
+          title="this.props.definition.keyDescr?.text ?? ''"
+          updateTitle.bind="this.setKeyText"
+          name.translate="Key Value Style"
+          placeholder.translate="Add a key value description"
+          updateStyle.bind="this.updateKeyStyle"
+          style="this.keyStyle"
+        />
+        <ChartTitle
+          class="'pt-0'"
           title="this.props.definition.baselineDescr?.text ?? ''"
-          updateTitle="(text) => this.setBaselineText(text)"
+          updateTitle.bind="this.setBaselineText"
           name.translate="Baseline Style"
           placeholder.translate="Add a baseline description"
           updateStyle.bind="this.updateBaselineStyle"
@@ -3434,23 +3479,22 @@
   <t t-name="o-spreadsheet-ScorecardChartConfigPanel">
     <div>
       <Section class="'o-data-series'" title.translate="Key value">
-        <SelectionInput
-          ranges="[this.getKeyValueRange()]"
-          isInvalid="this.isKeyValueInvalid"
-          hasSingleRange="true"
-          required="true"
-          onSelectionChanged="(ranges) => this.onKeyValueRangeChanged(ranges)"
-          onSelectionConfirmed="() => this.updateKeyValueRange()"
+        <StandaloneComposer
+          placeholder.translate="Formula"
+          title.translate=""
+          composerContent="this.getKeyValue()"
+          defaultRangeSheetId="this.env.model.getters.getActiveSheetId()"
+          onConfirm.bind="this.onConfirmKeyValue"
         />
       </Section>
       <Section class="'o-data-labels'" title.translate="Baseline configuration">
         <div class="o-section-subtitle">Value</div>
-        <SelectionInput
-          ranges="[this.getBaselineRange()]"
-          isInvalid="this.isBaselineInvalid"
-          hasSingleRange="true"
-          onSelectionChanged="(ranges) => this.onBaselineRangeChanged(ranges)"
-          onSelectionConfirmed="() => this.updateBaselineRange()"
+        <StandaloneComposer
+          placeholder.translate="Formula"
+          title.translate=""
+          composerContent="this.getBaseline()"
+          defaultRangeSheetId="this.env.model.getters.getActiveSheetId()"
+          onConfirm.bind="this.onConfirmBaseline"
         />
         <div class="o-section-subtitle">Format</div>
         <Select
@@ -3542,17 +3586,17 @@
     <div class="o-chart d-flex flex-column h-100" t-if="this.chartId">
       <div class="o-panel d-flex">
         <div
-          class="o-sidePanel-tab o-panel-configuration d-flew flex-grow-1 text-center"
+          class="o-sidePanel-tab o-panel-configuration d-flex flex-grow-1 justify-content-center"
           t-att-class="this.store.panel !== 'configuration' ? 'inactive' : ''"
           t-on-click="this.switchPanel.bind(this, 'configuration')">
-          <i class="fa fa-sliders me-1"/>
+          <i class="oi me-2" data-icon="tune"/>
           Configuration
         </div>
         <div
-          class="o-sidePanel-tab o-panel-design d-flew flex-grow-1 text-center"
+          class="o-sidePanel-tab o-panel-design d-flex flex-grow-1 justify-content-center"
           t-att-class="this.store.panel !== 'design' ? 'inactive' : ''"
           t-on-click="this.switchPanel.bind(this, 'design')">
-          <i class="fa fa-paint-brush me-1"/>
+          <i class="oi me-2" data-icon="design_services"/>
           Design
         </div>
       </div>
@@ -3662,7 +3706,7 @@
         updateChart="this.props.updateChart"
         canUpdateChart="this.props.canUpdateChart"
         onErrorMessagesChanged.bind="this.onErrorMessagesChanged"
-        getLabelRangeOptions.bind="this.getLabelRangeOptions"
+        getLabelRangeOptions="() => []"
         dataSeriesTitle.translate="Hierarchy"
         labelRangeTitle.translate="Values"
       />
@@ -4534,7 +4578,7 @@
         updateChart="this.props.updateChart"
         canUpdateChart="this.props.canUpdateChart"
         onErrorMessagesChanged.bind="this.onErrorMessagesChanged"
-        getLabelRangeOptions.bind="this.getLabelRangeOptions"
+        getLabelRangeOptions="() => []"
         labelRangeTitle.translate="Date range"
       />
 
@@ -4543,7 +4587,7 @@
           <span class="w-100">Horizontal axis</span>
           <Select
             selectedValue="this.getGroupByType('horizontal') || ''"
-            values="this.getGroupByOptions()"
+            values="this.groupByChoices"
             class="'o-horizontal-group-by'"
             onChange="(value) => this.updateGroupBy('horizontal', value)"
           />
@@ -4552,7 +4596,7 @@
           <span class="w-100">Vertical axis</span>
           <Select
             selectedValue="this.getGroupByType('vertical') || ''"
-            values="this.getGroupByOptions()"
+            values="this.groupByChoices"
             class="'o-vertical-group-by'"
             onChange="(value) => this.updateGroupBy('vertical', value)"
           />
@@ -5024,7 +5068,7 @@
   </t>
 
   <t t-name="o-spreadsheet.ChartTitle">
-    <Section class="'o-chart-title'" title="this.props.name">
+    <Section class="'o-chart-title ' + (this.props.class ?? '')" title="this.props.name">
       <TextInput
         value="this.props.title"
         onChange.bind="this.updateTitle"
@@ -5543,7 +5587,7 @@
   </t>
 
   <t t-name="o_spreadsheet.PivotHTMLRenderer">
-    <div class="o_pivot_html_renderer">
+    <div class="w-100">
       <Checkbox
         name="'missing_values'"
         label.translate="Display missing cells only"
@@ -5793,7 +5837,8 @@
             title="Link label"
             placeholder="e.g. 'Link label'"
             class="o-input"
-            t-custom-model="this.state.label"
+            t-att-value="this.state.label"
+            t-on-input="(ev) => this.state.label = ev.target.value"
           />
         </div>
 
@@ -5810,8 +5855,8 @@
               placeholder="e.g. 'http://www.odoo.com'"
               title="Link URL"
               t-ref="this.urlInput"
-              t-custom-model="this.state.url"
-              t-on-input="this.computeLinks"
+              t-att-value="this.state.url"
+              t-on-input="this.onLinkUrlInput"
             />
           </t>
           <t t-else="">
@@ -5828,7 +5873,7 @@
             t-on-click="this.removeLink"
             class="o-remove-url o-button-icon"
             t-translation="off">
-            <i class="fa fa-times"/>
+            <i class="oi" data-icon="close"/>
           </button>
         </div>
       </div>
@@ -6005,12 +6050,12 @@
   </t>
   <t t-name="o-spreadsheet-Icon.CLIPBOARD">
     <div class="o-icon">
-      <i class="fa fa-clipboard"/>
+      <i class="oi" data-icon="assignment"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.COPY">
     <div class="o-icon">
-      <i class="fa fa-clone"/>
+      <i class="oi" data-icon="content_copy"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.CUT">
@@ -6068,7 +6113,7 @@
   </t>
   <t t-name="o-spreadsheet-Icon.SHOW">
     <div class="o-icon">
-      <i class="fa fa-eye"/>
+      <i class="oi" data-icon="visibility"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.FORMULA">
@@ -6201,22 +6246,22 @@
   </t>
   <t t-name="o-spreadsheet-Icon.INSERT_CHART">
     <div class="o-icon">
-      <i class="fa fa-bar-chart"/>
+      <i class="oi" data-icon="bar_chart"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.INSERT_IMAGE">
     <div class="o-icon">
-      <i class="fa fa-file-image-o"/>
+      <i class="oi" data-icon="image"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.INSERT_LINK">
     <div class="o-icon">
-      <i class="fa fa-link"/>
+      <i class="oi" data-icon="link"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.INSERT_CHECKBOX">
     <div class="o-icon">
-      <i class="fa fa-check-square-o"/>
+      <i class="oi" data-icon="check_box"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.INSERT_DROPDOWN">
@@ -6324,7 +6369,7 @@
   </t>
   <t t-name="o-spreadsheet-Icon.IRREGULARITY_MAP">
     <div class="o-icon">
-      <i class="fa fa-align-center fa-rotate-270"/>
+      <i class="oi oi-rotate-270" data-icon="format_align_center"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.ALIGN_RIGHT">
@@ -6507,67 +6552,67 @@
 
   <t t-name="o-spreadsheet-Icon.FULLSCREEN_OUT">
     <div class="o-icon">
-      <i class="fa fa-compress"/>
+      <i class="oi" data-icon="close_fullscreen"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.FULLSCREEN_IN">
     <div class="o-icon">
-      <i class="fa fa-expand"/>
+      <i class="oi" data-icon="expand_content"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.EDIT">
     <div class="o-icon">
-      <i class="fa fa-pencil-square-o"/>
+      <i class="oi" data-icon="edit_square"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.EXTERNAL">
     <div class="o-icon">
-      <i class="fa fa-external-link"/>
+      <i class="oi" data-icon="open_in_new"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.UNLINK">
     <div class="o-icon">
-      <i class="fa fa-chain-broken"/>
+      <i class="oi" data-icon="link_off"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.CARET_UP">
-    <div class="o-icon fa-small">
-      <i class="fa fa-caret-up"/>
+    <div class="o-icon">
+      <i class="oi" data-icon="arrow_drop_up"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.CARET_DOWN">
-    <div class="o-icon fa-small">
-      <i class="fa fa-caret-down"/>
+    <div class="o-icon">
+      <i class="oi" data-icon="arrow_drop_down"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.CARET_RIGHT">
-    <div class="o-icon fa-small">
-      <i class="fa fa-caret-right"/>
+    <div class="o-icon">
+      <i class="oi" data-icon="arrow_right"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.CARET_LEFT">
-    <div class="o-icon fa-small">
-      <i class="fa fa-caret-left"/>
+    <div class="o-icon">
+      <i class="oi" data-icon="arrow_left"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.TRASH">
     <div class="o-icon">
-      <i class="fa fa-trash-o"/>
+      <i class="oi" data-icon="delete"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.TRASH_FILLED">
     <div class="o-icon">
-      <i class="fa fa-trash"/>
+      <i class="oi oi-filled" data-icon="delete_f"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.REFRESH">
     <div class="o-icon">
-      <i class="fa fa-refresh"/>
+      <i class="oi" data-icon="refresh"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.EXCHANGE">
     <div class="o-icon">
-      <i class="fa fa-exchange"/>
+      <i class="oi" data-icon="swap_horiz"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.ARROW_DOWN">
@@ -6670,17 +6715,17 @@
   </t>
   <t t-name="o-spreadsheet-Icon.SORT_ASCENDING">
     <div class="o-icon">
-      <i class="fa fa-sort-alpha-asc"/>
+      <i class="oi" data-icon="sort_by_alpha"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.SORT_DESCENDING">
     <div class="o-icon">
-      <i class="fa fa-sort-alpha-desc"/>
+      <i class="oi" data-icon="sort_by_alpha"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.DATA_CLEANUP">
     <div class="o-icon">
-      <i class="fa fa-magic"/>
+      <i class="oi" data-icon="wand_stars"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.FILTER_ICON">
@@ -6693,17 +6738,17 @@
   </t>
   <t t-name="o-spreadsheet-Icon.FILTER_ICON_ACTIVE">
     <div class="o-icon filter-icon-active">
-      <i class="fa fa-filter"/>
+      <i class="oi oi-filled" data-icon="filter_alt_f"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.SEARCH">
     <div class="o-icon">
-      <i class="fa fa-search"/>
+      <i class="oi" data-icon="search"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.ZOOM">
     <div class="o-icon">
-      <i class="fa fa-search-plus"/>
+      <i class="oi" data-icon="zoom_in"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.CHECK">
@@ -6737,8 +6782,8 @@
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.TRIANGLE_EXCLAMATION">
-    <div class="o-icon fa-small">
-      <i class="fa fa-exclamation-triangle"/>
+    <div class="o-icon">
+      <i class="oi" data-icon="warning"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.SPLIT_TEXT">
@@ -6751,7 +6796,7 @@
   </t>
   <t t-name="o-spreadsheet-Icon.ERROR">
     <div class="o-icon">
-      <i class="fa fa-exclamation-circle"/>
+      <i class="oi" data-icon="error"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.DISPLAY_HEADER">
@@ -6889,7 +6934,7 @@
   </t>
   <t t-name="o-spreadsheet-Icon.INFO">
     <div class="o-icon">
-      <i class="fa fa-info"/>
+      <i class="oi" data-icon="info"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.PIVOT">
@@ -6979,12 +7024,12 @@
   </t>
   <t t-name="o-spreadsheet-Icon.HIDE_SHEET">
     <div class="o-icon">
-      <i class="fa fa-eye-slash"/>
+      <i class="oi" data-icon="visibility_off"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.DOWNLOAD">
     <div class="o-icon">
-      <i class="fa fa-download"/>
+      <i class="oi" data-icon="download"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.CAROUSEL">
@@ -7029,7 +7074,7 @@
   </t>
   <t t-name="o-spreadsheet-Icon.DARK_MODE">
     <div class="o-icon">
-      <i class="fa fa-moon-o"/>
+      <i class="oi" data-icon="dark_mode"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.ROTATION-0">
@@ -7075,26 +7120,26 @@
   </t>
   <t t-name="o-spreadsheet-Icon.THUMB_TACK">
     <div class="o-icon">
-      <i class="fa fa-thumb-tack"/>
+      <i class="oi" data-icon="push_pin"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.LOCK">
     <div class="o-icon">
-      <i class="fa fa-lock"/>
+      <i class="oi" data-icon="lock_f"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.UNLOCK">
     <div class="o-icon">
-      <i class="fa fa-unlock"/>
+      <i class="oi" data-icon="lock_open_f"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.PRINT">
     <div class="o-icon">
-      <i class="fa fa-print"/>
+      <i class="oi" data-icon="print"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.COLUMN_STATS">
-    <svg width="18px" height="18px" viewBox="0 0 512 512">
+    <svg class="o-icon" viewBox="0 0 512 512">
       <path
         d="M319 174c71 0 129 58 129 129 0 27-8 52-23 73l66 66-33 33-66-66c-21 14-46 23-73 23-71 0-129-58-129-129s57-129 129-129m0 47c-45 0-82 37-82 82s36 82 82 82 82-37 82-82-37-82-82-82m-152 70a155 155 0 0 0 0 12c0 12 1 24 4 35H25v-47zM119 33v235H49V33zm94 94v66c-21 20-36 46-43 75h-28V127zm94-47v71a152 152 0 0 0-70 24V80zm94 23v71a152 152 0 0 0-70-24v-47z"
         fill="currentColor"
@@ -7151,7 +7196,26 @@
   </t>
   <t t-name="o-spreadsheet-Icon.CALCULATOR">
     <div class="o-icon">
-      <i class="fa fa-calculator"/>
+      <i class="oi" data-icon="calculate"/>
+    </div>
+  </t>
+  <t t-name="o-spreadsheet-Icon.INSERT_CHART_SUGGESTION">
+    <svg
+      class="o-icon"
+      fill="currentColor"
+      viewBox="0 -960 960 960"
+      xmlns="http://www.w3.org/2000/svg">
+      <!-- Material icon add_chart.
+      TODO remove when we use Material icons directly -->
+      <path
+        xmlns="http://www.w3.org/2000/svg"
+        d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h360v80H200v560h560v-360h80v360q0 33-23.5 56.5T760-120H200Zm80-160h80v-280h-80v280Zm160 0h80v-400h-80v400Zm160 0h80v-160h-80v160Zm80-320v-80h-80v-80h80v-80h80v80h80v80h-80v80h-80ZM480-480Z"
+      />
+    </svg>
+  </t>
+  <t t-name="o-spreadsheet-Icon.MORE_MENU">
+    <div class="o-icon">
+      <i class="oi" data-icon="more_vert"/>
     </div>
   </t>
 
@@ -7494,7 +7558,6 @@
       maxHeight="this.cellPopover.Component.size and this.cellPopover.Component.size.maxHeight"
       maxWidth="this.cellPopover.Component.size and this.cellPopover.Component.size.maxWidth"
       anchorRect="this.cellPopover.anchorRect"
-      containerRect="this.env.getPopoverContainerRect()"
       onMouseWheel="this.props.onMouseWheel"
       class="'o-popover-grid-index'">
       <t
@@ -7515,10 +7578,7 @@
       t-on-click="this.onClick"
       t-on-dblclick.self="this.onDoubleClick"
       t-on-contextmenu.stop.prevent="this.onContextMenu">
-      <GridAddRowsFooter
-        t-if="!this.env.model.getters.isReadonly() and this.props.hasFooter"
-        t-key="this.viewStore.displayedSheetId"
-      />
+      <GridAddRowsFooter t-if="this.isFooterVisible" t-key="this.viewStore.displayedSheetId"/>
       <t t-call-slot="default"/>
     </div>
   </t>
@@ -7579,7 +7639,9 @@
         gridDims="this.viewStore.viewports.getSheetViewDimensionWithHeaders()"
         onInputContextMenu.bind="this.onInputContextMenu"
       />
-      <canvas t-ref="this.canvasRef" class="os-theme-dependant pe-none"/>
+      <div class="os-canvas-background">
+        <canvas t-ref="this.canvasRef" class="os-theme-dependant pe-none"/>
+      </div>
       <t t-set="focused" t-value="this.focusedClients"/>
       <t t-foreach="this.clientsToDisplay" t-as="client" t-key="this.getClientPositionKey(client)">
         <ClientTag
@@ -7613,7 +7675,7 @@
         onClose="() => this.closeMenu()"
       />
       <t
-        t-if="!this.env.model.getters.isReadonly()"
+        t-if="this.displayTableResizer"
         t-foreach="this.staticTables"
         t-as="table"
         t-key="table.id">
@@ -7641,13 +7703,14 @@
       </button>
       <div class="flex-fill">
         <div
-          class="o-fullscreen-figure os-theme-dependant o-figure position-relative border rounded shadow"
+          class="o-fullscreen-figure o-figure-rounded overflow-hidden os-theme-dependant o-figure position-relative border rounded shadow"
           tabindex="1"
           t-ref="this.fullScreenFigureRef"
           t-on-click.stop=""
           t-on-keydown="(ev) => this.onKeyDown(ev)">
           <t>
             <t
+              t-if="this.figureUI.width and this.figureUI.height"
               t-component="this.figureComponent"
               figureUI="this.figureUI"
               isFullScreen="true"
@@ -7851,13 +7914,14 @@
 
   <t t-name="o-spreadsheet-ImageFigure">
     <img t-att-src="this.getImagePath" class="w-100 h-100"/>
-    <div class="o-figure-menu position-absolute m-2" t-if="this.shouldShowMenuButton">
+    <div
+      class="o-figure-menu position-absolute m-2 align-items-center"
+      t-if="this.shouldShowMenuButton">
       <div
-        class="o-figure-menu-item d-flex-align-items-center"
-        t-on-click="this.showMenu"
+        class="o-figure-menu-item d-flex align-items-center justify-content-center rounded p-1"
         t-ref="this.menuButtonRef"
-        t-on-contextmenu.prevent.stop="this.showMenu">
-        <t t-call="o-spreadsheet-Icon.LIST"/>
+        t-on-click="this.showMenu">
+        <t t-call="o-spreadsheet-Icon.MORE_MENU"/>
       </div>
     </div>
   </t>
@@ -7884,7 +7948,7 @@
                 style="this.getFigureStyle(figureUI)"
                 class="this.getFigureClass(figureUI)"
                 onMouseDown="(ev) => this.startDraggingFigure(figureUI, ev)"
-                onClickAnchor="(dirX, dirY, ev) => this.startResize(figureUI, dirX, dirY, ev)"
+                onClickAnchor.bind="this.resizeAllSelectedFigures"
               />
             </t>
           </div>
@@ -7923,11 +7987,13 @@
 
   <t t-name="o-spreadsheet-CarouselFigure">
     <div
-      class="o-carousel w-100 h-100 d-flex flex-column px-4 py-2"
+      class="o-carousel w-100 h-100 position-relative"
       t-att-style="this.carouselStyle"
       t-on-dblclick="this.onCarouselDoubleClick">
       <t t-set="selectedItem" t-value="this.selectedCarouselItem"/>
-      <div class="o-carousel-header d-flex align-items-baseline flex-shrink-0 pt-1 pe-auto">
+      <div
+        class="o-carousel-header d-flex align-items-baseline position-absolute"
+        t-att-style="this.headerStyle">
         <div
           class="o-carousel-title text-truncate flex-shrink-0 pe-2"
           t-out="this.title"
@@ -7943,7 +8009,7 @@
             t-key="item_index"
             t-if="this.carousel.items.length > 1">
             <div
-              class="o-carousel-tab text-truncate px-2 mt-1 flex-shrink-0"
+              class="o-carousel-tab text-truncate px-2 flex-shrink-0"
               t-att-class="{ 'selected': this.isItemSelected(item) }"
               t-att-data-type="item.type"
               t-out="this.getItemTitle(item)"
@@ -7952,11 +8018,13 @@
           </t>
         </div>
         <div
-          class="o-carousel-tabs-dropdown o-carousel-button flex-shrink-0 rounded p-1"
+          class="o-carousel-button o-carousel-tabs-dropdown flex-shrink-0 rounded"
           t-att-class="{'active': this.menuState.isOpen}"
           t-ref="this.carouselTabsDropdownRef"
           t-on-click="this.toggleMenu">
-          <div class="fa fa-angle-down"/>
+          <div class="o-icon">
+            <i class="oi" data-icon="keyboard_arrow_down"/>
+          </div>
           <MenuPopover
             t-if="this.menuState.isOpen"
             menuId="this.menuId"
@@ -7969,28 +8037,32 @@
         <div
           t-if="this.env.model.getters.isDashboard()"
           t-att-title="this.fullScreenButtonTitle"
-          class="o-carousel-full-screen-button fa o-carousel-button rounded p-1 ms-1"
-          t-att-class="{
-            'fa-compress': this.props.isFullScreen,
-            'fa-expand': !this.props.isFullScreen,
-          }"
+          class="o-carousel-full-screen-button oi o-carousel-button rounded p-1 ms-1"
+          t-att-data-icon="this.props.isFullScreen ? 'close_fullscreen' : 'expand_content'"
           t-on-click="this.toggleFullScreen"
         />
         <div
           t-if="!this.env.model.getters.isDashboard()"
-          class="o-carousel-menu-button o-carousel-button fa fa-ellipsis-v rounded ms-1"
-          t-on-click="this.openContextMenu"
-        />
+          class="o-carousel-menu-button o-carousel-button rounded ms-1"
+          t-on-click="this.openContextMenu">
+          <t t-call="o-spreadsheet-Icon.MORE_MENU"/>
+        </div>
       </div>
-      <div t-if="this.title" class="w-100 mt-2 border-bottom"/>
+      <div
+        t-if="this.separatorStyle"
+        class="o-carousel-separator position-absolute"
+        t-att-style="this.separatorStyle"
+      />
       <div
         t-if="!selectedItem"
-        class="o-carousel-empty o-carousel-content w-100 flex-fill d-flex align-items-center justify-content-center">
+        class="o-carousel-empty o-carousel-content position-absolute d-flex align-items-center justify-content-center"
+        t-att-style="this.contentStyle">
         <t t-call="o-spreadsheet-Icon.CAROUSEL"/>
       </div>
       <div
         t-elif="selectedItem.type === 'chart'"
-        class="o-carousel-content w-100 flex-fill position-relative">
+        class="o-carousel-content position-absolute"
+        t-att-style="this.contentStyle">
         <div
           class="o-chart-container w-100 h-100"
           t-on-dblclick.stop="this.onCarouselChartDoubleClick">
@@ -8010,13 +8082,14 @@
       </div>
       <div
         t-elif="selectedItem.type === 'carouselDataView' and selectedItem.range"
-        class="o-carousel-content mb-2 mt-3 h-100 w-100 overflow-hidden">
+        class="o-carousel-content position-absolute overflow-hidden"
+        t-att-style="this.contentStyle">
         <StandaloneViewport
           range="this.removeEmptyHeadersFromRange(selectedItem.range)"
           columnWeights="selectedItem.columnWeights"
           canResizeColumns="this.canResizeDataViewColumns"
           onResizeColumns.bind="this.onResizeColumns"
-          zoomLevel="this.viewStore.zoomLevel"
+          size="this.carouselLayout.contentRect"
         />
       </div>
     </div>
@@ -8024,17 +8097,17 @@
 
   <t t-name="o-spreadsheet-FigureComponent">
     <div
-      class="o-figure-wrapper os-theme-dependant"
-      t-att-class="{'o-figure-selected': this.isSelected}"
+      class="o-figure-wrapper"
+      t-att-class="{'o-figure-selected': this.isSelected, 'os-theme-dependant': this.isThemeDependant}"
       t-att-style="this.wrapperStyle">
       <div
-        class="o-figure w-100 h-100"
-        t-att-class="this.props.class"
+        class="o-figure w-100 h-100 overflow-hidden"
+        t-att-class="this.figureClass"
         t-on-pointerdown.stop="(ev) => this.onMouseDown(ev)"
         t-on-click="this.onClick"
         t-on-contextmenu.prevent.stop="(ev) => !this.env.model.getters.isReadonly() and this.onContextMenu(ev)"
         t-ref="this.figureRef"
-        t-att-style="this.props.style"
+        t-att-style="this.figureStyle"
         t-att-data-id="this.props.figureUI.id"
         tabindex="0"
         t-on-keydown.stop="(ev) => this.onKeyDown(ev)"
@@ -8053,31 +8126,11 @@
           onClose="() => this.menuState.isOpen=false"
           popoverPositioning="'bottom-left'"
         />
-        <div
-          t-if="!this.env.model.getters.isDashboard()"
-          class="position-absolute top-0 start-0 pe-none w-100 h-100">
-          <div
-            class="o-figure-border pe-auto w-100 h-0 position-absolute pb-2"
-            t-att-class="{'o-selected': this.isSelected}"
-            t-att-style="this.getBorderStyle('top')"
-          />
-          <div
-            class="o-figure-border pe-auto h-100 position-absolute start-0 ps-2"
-            t-att-class="{'o-selected': this.isSelected}"
-            t-att-style="this.getBorderStyle('left')"
-          />
-          <div
-            class="o-figure-border pe-auto w-100 position-absolute bottom-0 pt-2"
-            t-att-class="{'o-selected': this.isSelected}"
-            t-att-style="this.getBorderStyle('bottom')"
-          />
-          <div
-            class="o-figure-border pe-auto h-100 position-absolute end-0 pe-2"
-            t-att-class="{'o-selected': this.isSelected}"
-            t-att-style="this.getBorderStyle('right')"
-          />
-        </div>
       </div>
+      <div
+        t-if="this.isSelected"
+        class="o-figure-selection-border position-absolute pe-none w-100 h-100"
+      />
       <t t-if="this.isFigureResizable">
         <div
           class="o-fig-anchor o-top pe-auto"
@@ -8138,7 +8191,7 @@
   <t t-name="o-spreadsheet-ChartMenu">
     <div class="o-chart-menu position-absolute top-0 end-0" t-on-click.stop="">
       <div class="d-flex align-items-center gap-1 p-1 rounded" t-att-style="backgroundColor">
-        <t t-if="this.regionOptions.length > 1">
+        <t t-if="this.env.model.getters.isDashboard() and this.regionOptions.length > 1">
           <Select
             class="'o-chart-menu-item w-auto py-0 px-1 text-muted text-nowrap rounded border-0'"
             popoverClass="'w-auto'"
@@ -8149,7 +8202,7 @@
         </t>
         <t t-foreach="this.getMenuItems()" t-as="item" t-key="item.id">
           <div
-            class="o-chart-menu-item border-0 lh-1 p-1 d-flex align-items-center justify-content-center rounded"
+            class="o-chart-menu-item lh-1 p-1 d-flex align-items-center justify-content-center rounded"
             t-att-title="item.label"
             t-on-click="item.onClick"
             t-att-data-id="item.id">
@@ -8157,10 +8210,11 @@
           </div>
         </t>
         <t t-if="this.isMenuAvailable()">
-          <button
-            class="o-chart-menu-item btn text-muted lh-1 p-1 fa fa-ellipsis-v"
-            t-on-click="this.openContextMenu"
-          />
+          <div
+            class="o-chart-menu-item lh-1 p-1 d-flex align-items-center justify-content-center rounded"
+            t-on-click="this.openContextMenu">
+            <t t-call="o-spreadsheet-Icon.MORE_MENU"/>
+          </div>
         </t>
       </div>
       <InfoPopover
@@ -8258,10 +8312,12 @@
   </t>
 
   <t t-name="o-spreadsheet-SpreadsheetDashboard">
-    <div
-      class="o-dashboard-background position-absolute w-100 h-100 z-0 os-theme-dependant"
-      t-att-style="this.backgroundStyle"
-    />
+    <div class="o-dashboard-background os-canvas-background position-absolute w-100 h-100 z-0">
+      <div
+        class="o-dashboard-sheet-background w-100 h-100 os-theme-dependant"
+        t-att-style="this.backgroundStyle"
+      />
+    </div>
     <div
       class="o-grid o-dashboard-grid o-two-columns o-zoomable z-1"
       tabindex="-1"
@@ -8452,9 +8508,9 @@
           t-on-click.stop="this.openAssistant"
           t-on-pointerdown.prevent.stop=""
           t-on-pointerup.stop=""
-          class="fa-stack position-absolute translate-middle force-open-assistant fs-4">
-          <i class="fa fa-circle fa-stack-1x fa-inverse"/>
-          <i class="fa fa-question-circle fa-stack-1x"/>
+          class="oi-stack position-absolute translate-middle force-open-assistant fs-4">
+          <i class="oi oi-filled oi-stack-1x o-composer-assistant-icon-bg" data-icon="circle_f"/>
+          <i class="oi oi-filled oi-stack-1x" data-icon="help_f"/>
         </span>
         <div
           class="o-composer w-100 text-start"
@@ -8495,9 +8551,9 @@
           role="button"
           t-on-click="this.closeAssistant"
           t-on-pointerdown.prevent.stop=""
-          class="fa-stack position-absolute top-0 start-100 translate-middle fs-4">
-          <i class="fa fa-circle fa-stack-1x fa-inverse"/>
-          <i class="fa fa-times-circle fa-stack-1x"/>
+          class="oi-stack position-absolute top-0 start-100 translate-middle fs-4">
+          <i class="oi oi-filled oi-stack-1x o-composer-assistant-icon-bg" data-icon="circle_f"/>
+          <i class="oi oi-filled oi-stack-1x" data-icon="cancel_f"/>
         </span>
         <div class="o-composer-assistant overflow-auto" t-att-style="this.assistantStyle">
           <FunctionDescriptionProvider
@@ -8644,7 +8700,7 @@
             class="eyedropper d-flex align-items-center justify-content-center rounded-circle"
             t-if="this.canUseEyeDropper"
             t-on-click.stop="this.activateEyedropper">
-            <i class="fa fa-eyedropper"/>
+            <i class="oi" data-icon="colorize"/>
           </div>
         </div>
         <div t-if="this.state.showGradient" class="o-custom-selector">
@@ -8821,16 +8877,24 @@
 
   <t t-name="o-spreadsheet-BottomBarStatistic">
     <t t-set="selectedStatistic" t-value="this.getSelectedStatistic()"/>
-    <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="this.listSelectionStatistics">
-        <t t-out="selectedStatistic"/>
-        <span class="ms-2">
-          <t t-call="o-spreadsheet-Icon.CARET_DOWN"/>
-        </span>
-      </div>
-    </Ripple>
+    <div class="ms-auto d-flex o-bottom-bar-statistic">
+      <Ripple 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="this.listSelectionStatistics">
+          <t t-out="selectedStatistic"/>
+          <span class="ms-2">
+            <t t-call="o-spreadsheet-Icon.CARET_DOWN"/>
+          </span>
+        </div>
+      </Ripple>
+      <span
+        class="o-data-analysis-button me-4 rounded"
+        t-att-class="{ 'active': this.isDataAnalysisOpen }"
+        t-on-click="this.toggleDataAnalysisPanel">
+        <t t-call="o-spreadsheet-Icon.COLUMN_STATS"/>
+      </span>
+    </div>
   </t>
 
   <t t-name="o-spreadsheet-BottomBarSheet">
@@ -8848,7 +8912,7 @@
         t-att-title="this.sheetName"
         t-att-data-id="this.props.sheetId"
         t-att-class="{active: this.isSheetActive}">
-        <span t-if="this.isSheetLocked" class="me-1">
+        <span t-if="this.isSheetLocked" class="me-1 lock-icon">
           <t t-call="o-spreadsheet-Icon.LOCK"/>
         </span>
         <span