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

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.13
+ * @date 2026-08-21T15:33:45.937Z
+ * @hash a73559e
  */
 :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: 14px;
 }
 
 /* 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);
@@ -311,6 +310,7 @@
   .os-input {
     border-width: 0 0 1px 0;
     border-color: transparent;
+    border-style: solid;
     outline: none;
     text-overflow: ellipsis;
     color: var(--os-text-body);
@@ -676,6 +676,7 @@
     width: 100%;
     outline: none;
     border-color: var(--os-border-color);
+    border-style: solid;
     color: var(--os-gray-900);
 
     &::placeholder {
@@ -853,6 +854,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 +1350,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 +1625,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;
@@ -2097,6 +2146,11 @@
         line-height: calc(
           var(--os-desktop-menu-item-height) - 2 * var(--os-menu-item-padding-vertical)
         );
+        display: inline-block;
+        margin: 0px 8px 0px 0px;
+        .oi {
+          --os-icon-font-size: calc(var(--os-icon-edge-length) - 1px);
+        }
       }
       & {
         &.o-menu-item-active {
@@ -2116,10 +2170,6 @@
       .o-menu-item-name {
         min-width: 40%;
       }
-      .o-menu-item-icon {
-        display: inline-block;
-        margin: 0px 8px 0px 0px;
-      }
     }
   }
   &.o-spreadsheet-mobile {
@@ -2246,6 +2296,7 @@
     width: var(--os-icon-edge-length);
     height: var(--os-icon-edge-length);
     font-size: var(--os-icon-edge-length);
+    --os-icon-font-size: var(--os-icon-edge-length);
     .small-text {
       font: bold 9px sans-serif;
     }
@@ -2253,13 +2304,63 @@
       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: inline-block;
+    font-family: var(--icon-font-family, "Material Symbols Outlined");
+    font-style: normal;
+    font-size: var(--os-icon-font-size, 1em);
+    font-weight: 400 !important;
+    line-height: inherit; /* override of Odoo, we want to keep the line height consistent with the surrounding text */
+    letter-spacing: normal;
+    text-transform: none;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    -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 */
@@ -2541,7 +2642,7 @@
 .o-spreadsheet .o-filter-menu {
   .o-search-icon {
     right: 5px;
-    top: 3px;
+    top: 8px;
     opacity: 0.4;
 
     svg {
@@ -2622,6 +2723,23 @@
   }
 }
 
+/* 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;
+    --os-icon-edge-length: 14px;
+    &.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 +2793,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 {
@@ -2705,18 +2823,15 @@
 
     .o-carousel-button {
       cursor: pointer;
-
-      &.o-carousel-tabs-dropdown {
-        font-size: 16px;
-        line-height: 16px;
-      }
+      --os-icon-edge-length: 14px;
 
       &.o-carousel-full-screen-button {
         margin: 1px;
       }
 
-      &.o-carousel-menu-button {
-        padding: 3px 5px;
+      &.o-carousel-menu-button,
+      &.o-carousel-tabs-dropdown {
+        padding: 3px 2px;
       }
 
       &.active,
@@ -2852,6 +2967,7 @@
       color: var(--os-gray-900) !important;
       height: 20px;
       width: 20px;
+      border-color: transparent;
       &.active,
       &:hover,
       &:target {
@@ -2860,9 +2976,7 @@
       }
 
       .o-icon {
-        width: 14px;
-        height: 14px;
-        font-size: 14px !important;
+        --os-icon-edge-length: 14px;
       }
 
       .o-chart-preview {
@@ -3130,18 +3244,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_f"] {
         color: var(--os-primary-button-bg);
       }
     }
@@ -3158,7 +3276,7 @@
     }
 
     .o-composer-assistant-container {
-      .fa-times-circle {
+      [data-icon="cancel_f"] {
         color: var(--os-primary-button-bg);
       }
     }
@@ -3471,12 +3589,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;
+      }
     }
   }
 }
@@ -3527,6 +3664,10 @@
       z-index: 1;
       width: calc(100% - 1px);
     }
+
+    .lock-icon {
+      --os-icon-edge-length: 14px;
+    }
   }
 
   .o-spreadshet-mobile .o-sheet {