@odoo/o-spreadsheet 19.5.0-alpha.11 → 19.5.0-alpha.12

package/dist/o_spreadsheet.css

@@ -2,9 +2,9 @@
 /*
  * This file is generated by o-spreadsheet build tools. Do not edit it.
  * @see https://github.com/odoo/o-spreadsheet
- * @version 19.5.0-alpha.11
- * @date 2026-08-12T09:17:26.024Z
- * @hash bc056d7
+ * @version 19.5.0-alpha.12
+ * @date 2026-08-19T09:47:05.537Z
+ * @hash 68ca68e
  */
 :root {
   --os-gray-100: light-dark(#f9fafb, #1b1d26);
@@ -138,6 +138,8 @@
   --os-components-importance-figure-anchor: 1000;
   --os-components-importance-figure-snap-line: 1001;
   --os-components-importance-figure-tooltip: 1002;
+
+  --os-icon-font-size: 17px;
 }
 
 /* Originates from src/components/validation_messages/validation_messages.css */
@@ -182,13 +184,6 @@
     }
   }
 
-  @media (max-width: 768px) {
-    .topbar-banner span {
-      overflow: auto;
-      align-items: normal !important;
-    }
-  }
-
   .tool-container {
     display: flex;
     justify-content: center;
@@ -230,7 +225,11 @@
     }
 
     .topbar-banner {
-      height: var(--os-desktop-topbar-toolbar-height);
+      min-height: var(--os-desktop-topbar-toolbar-height);
+
+      .alert {
+        border: none; /* Remove default bootstrap border */
+      }
 
       .alert-info {
         border-left: 3px solid var(--os-alert-info-border);
@@ -853,6 +852,8 @@
       filter: var(--os-dark-mode-filter);
     }
   }
+
+  --oi-font-size: var(--os-icon-font-size);
 }
 
 /* Originates from src/components/small_bottom_bar/small_bottom_bar.css */
@@ -1347,6 +1348,52 @@
   }
 }
 
+/* Originates from src/components/side_panel/data_analysis/data_analysis_panel.css */
+.o-spreadsheet {
+  .o-chart-suggestions-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 6px;
+  }
+
+  .o-chart-drag-preview {
+    box-sizing: content-box;
+    z-index: 9999;
+  }
+}
+
+/* Originates from src/components/side_panel/data_analysis/chart_suggestion_preview.css */
+.o-spreadsheet {
+  .o-suggestion-canvas-wrap {
+    cursor: grab;
+    height: 120px;
+  }
+  .o-suggestion-canvas-wrap:hover {
+    border-color: var(--o-action-color, #3d9be9);
+  }
+  .o-suggestion-canvas-wrap:active {
+    cursor: grabbing;
+  }
+
+  .o-suggestion-insert-icon {
+    position: absolute;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.35);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.1s;
+
+    .o-icon {
+      width: 32px;
+      height: 32px;
+      color: white;
+    }
+  }
+  .o-suggestion-canvas-wrap:hover .o-suggestion-insert-icon {
+    opacity: 1;
+  }
+}
+
 /* Originates from src/components/side_panel/criterion_form/top_10_criterion/top_10_criterion.css */
 .o-spreadsheet {
   .o-top-10-criterion {
@@ -1576,7 +1623,7 @@
   .o_side_panel_collapsible_title {
     font-size: 16px;
     cursor: pointer;
-    padding: 6px 0px 6px 6px !important;
+    padding: 6px 6px 6px 6px !important;
     .collapsor-arrow {
       transform: rotate(-90deg);
       display: inline-block;
@@ -2253,13 +2300,66 @@
       font: bold 16px sans-serif;
     }
   }
-  .fa-small {
-    font-size: 14px;
-  }
 
   .o-icon.fx-icon {
     color: var(--os-composer-placeholder-color);
   }
+
+  /*
+   * Odoo UI Icon (oi): render Material Symbols through the data-icon attribute.
+   * Mirrors web/static/src/webclient/icons.scss `material-icon-base`, adapted to
+   * the `material-symbols` package whose variable font exposes a FILL axis.
+   */
+  .oi {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-family: var(--icon-font-family, "Material Symbols Outlined");
+    font-style: normal;
+    font-size: var(--oi-font-size, 1em);
+    font-weight: 400 !important;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    speak: never;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  .oi:before {
+    display: inline-block;
+    content: attr(data-icon);
+    text-rendering: geometricPrecision;
+  }
+
+  .oi-filled {
+    -webkit-font-variation-settings: "FILL" 1;
+    font-variation-settings: "FILL" 1;
+  }
+
+  /* Overlap several icons (e.g. a glyph over a background disc).
+  FIXME: this is kept as a compatibility layer, we should try to remove it in the future. */
+  .oi-stack {
+    position: relative;
+    display: inline-block;
+    width: 2em;
+    height: 2em;
+    line-height: 2em;
+    vertical-align: middle;
+  }
+  .oi-stack-1x,
+  .oi-stack-2x {
+    position: absolute;
+    left: 0;
+    width: 100%;
+    text-align: center;
+  }
+  .oi-stack-2x {
+    font-size: 2em;
+  }
 }
 
 /* Originates from src/components/icon_picker/icon_picker.css */
@@ -2622,6 +2722,22 @@
   }
 }
 
+/* Originates from src/components/figures/figure_image/figure_image.css */
+.o-spreadsheet {
+  .o-figure-menu-item {
+    cursor: pointer;
+    color: var(--os-gray-900) !important;
+    height: 20px;
+    width: 20px;
+    &.active,
+    &:hover,
+    &:target {
+      cursor: pointer;
+      background-color: var(--os-background-gray-color-hover);
+    }
+  }
+}
+
 /* Originates from src/components/figures/figure_container/figure_container.css */
 .o-spreadsheet {
   .o-figure-snap-line {
@@ -2675,8 +2791,8 @@
 
 /* Originates from src/components/figures/figure_carousel/figure_carousel.css */
 .o-spreadsheet {
-  .o-carousel-content {
-    height: 0; /* To make flex-fill work */
+  .o-carousel-separator {
+    background-color: var(--os-gray-400);
   }
 
   .o-carousel-empty {
@@ -2706,17 +2822,13 @@
     .o-carousel-button {
       cursor: pointer;
 
-      &.o-carousel-tabs-dropdown {
-        font-size: 16px;
-        line-height: 16px;
-      }
-
       &.o-carousel-full-screen-button {
         margin: 1px;
       }
 
-      &.o-carousel-menu-button {
-        padding: 3px 5px;
+      &.o-carousel-menu-button,
+      &.o-carousel-tabs-dropdown {
+        padding: 1px 2px;
       }
 
       &.active,
@@ -2852,6 +2964,7 @@
       color: var(--os-gray-900) !important;
       height: 20px;
       width: 20px;
+      border-color: transparent;
       &.active,
       &:hover,
       &:target {
@@ -3130,18 +3243,22 @@
       pointer-events: none;
     }
 
-    .fa-stack {
+    .oi-stack {
       /* reset stack size which is doubled by default */
       width: 18px;
       height: 18px;
       line-height: 18px;
     }
 
+    .o-composer-assistant-icon-bg {
+      color: white;
+    }
+
     .force-open-assistant {
       left: -1px;
       top: -1px;
 
-      .fa-question-circle {
+      [data-icon="help"] {
         color: var(--os-primary-button-bg);
       }
     }
@@ -3158,7 +3275,7 @@
     }
 
     .o-composer-assistant-container {
-      .fa-times-circle {
+      [data-icon="cancel"] {
         color: var(--os-primary-button-bg);
       }
     }
@@ -3471,12 +3588,31 @@
 
 /* Originates from src/components/bottom_bar/bottom_bar_statistic/bottom_bar_statistic.css */
 .o-spreadsheet {
-  .o-selection-statistic {
-    margin-right: 20px;
-    padding: 4px 4px 4px 8px;
-    cursor: pointer;
-    &:hover {
-      background-color: var(--os-background-gray-color-hover) !important;
+  .o-bottom-bar-statistic {
+    .o-selection-statistic {
+      margin-right: 10px;
+      padding: 0px 4px 0px 8px;
+      cursor: pointer;
+      &:hover {
+        background-color: var(--os-background-gray-color-hover) !important;
+      }
+    }
+    .o-data-analysis-button {
+      cursor: pointer;
+      &:hover {
+        background-color: var(--os-background-gray-color-hover);
+      }
+      &.active {
+        background-color: var(--os-button-active-bg);
+        .o-icon {
+          color: var(--os-button-active-text-color);
+        }
+      }
+      .o-icon {
+        width: 30px;
+        height: 30px;
+        padding: 4px;
+      }
     }
   }
 }