@odoo/o-spreadsheet 19.5.0-alpha.2 → 19.5.0-alpha.20

package/dist/o_spreadsheet.css

@@ -2,27 +2,29 @@
 /*
  * 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.2
- * @date 2026-07-13T06:26:22.099Z
- * @hash a4d2f90
+ * @version 19.5.0-alpha.20
+ * @date 2026-09-16T08:02:13.220Z
+ * @hash 4784627
  */
 :root {
-  --os-gray-100: light-dark(#f9fafb, #1b1d26);
-  --os-gray-200: light-dark(#e7e9ed, #262a36); /* GRAY_200 */
-  --os-gray-300: light-dark(#d8dadd, #3c3e4b); /* GRAY_300 */
-  --os-gray-400: light-dark(#ced4da, #5a5e6b);
-  --os-gray-500: light-dark(#7c7f89, #6b707f);
-  --os-gray-600: light-dark(#5f636f, #7e8392);
-  --os-gray-700: light-dark(#374151, #b1b3bc);
-  --os-gray-800: light-dark(#1f2937, #d1d1d1);
-  --os-gray-900: light-dark(#111827, #e4e4e4); /* GRAY_900 */
+  --os-gray-100: light-dark(#f8f9fa, #1c1c20);
+  --os-gray-200: light-dark(#e7ebed, #25262b); /* GRAY_200 */
+  --os-gray-300: light-dark(#dee2e6, #3a3b41); /* GRAY_300 */
+  --os-gray-400: light-dark(#ced4da, #56575e);
+  --os-gray-500: light-dark(#adb5bd, #6e6f77);
+  --os-gray-600: light-dark(#6c757d, #88898f);
+  --os-gray-700: light-dark(#495057, #b3b4b8);
+  --os-gray-800: light-dark(#343a40, #d1d1d3);
+  --os-gray-900: light-dark(#212529, #e4e4e5); /* GRAY_900 */
 
   --os-white: light-dark(#ffffff, #000000);
   --os-black: light-dark(#000000, #ffffff);
   --os-white-bg: light-dark(#ffffff, var(--os-gray-200));
   --os-popover-bg: light-dark(#ffffff, var(--os-gray-200));
 
-  --os-default-font: "Roboto", "Arial";
+  --os-canvas-background-color: var(--os-white-bg);
+
+  --os-default-font: "Roboto", "Arial", "Liberation Sans";
   --os-default-font-size: 10px;
   --os-link-color: light-dark(#017e84, #02c7b5);
   --os-link-hover-color: light-dark(#01585c, #4ed8cb);
@@ -138,6 +140,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 +186,6 @@
     }
   }
 
-  @media (max-width: 768px) {
-    .topbar-banner span {
-      overflow: auto;
-      align-items: normal !important;
-    }
-  }
-
   .tool-container {
     display: flex;
     justify-content: center;
@@ -230,7 +227,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 +312,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);
@@ -469,6 +471,40 @@
   }
 }
 
+/* Originates from src/components/standalone_viewport/standalone_viewport.css */
+.o-spreadsheet .o-standalone-viewport {
+  .o-col-resizer {
+    margin-left: -5px;
+    width: 11px;
+    cursor: e-resize;
+
+    .o-col-resizer-handle {
+      display: none;
+    }
+
+    &:hover,
+    &.dragging {
+      .o-col-resizer-handle {
+        margin-left: 5px;
+        display: block;
+        width: 2px;
+        background-color: var(--os-selection-border-color);
+      }
+    }
+  }
+
+  &:has(.o-col-resizer.dragging) {
+    .o-grid-overlay {
+      cursor: e-resize !important;
+    }
+    .o-col-resizer:hover:not(.dragging) {
+      .o-col-resizer-handle {
+        display: none;
+      }
+    }
+  }
+}
+
 /* Originates from src/components/spreadsheet_print/spreadsheet_print.css */
 .o-spreadsheet .o-spreadsheet-print {
   .o-print-header {
@@ -479,44 +515,17 @@
     }
   }
 
+  /* The pages are in the iframe document, styled by PRINT_IFRAME_CSS */
   .o-print-preview {
-    background-color: light-dark(var(--os-gray-200), var(--os-gray-100));
-
-    .o-print-page {
-      /* Don't use css variable to keep white on dark mode */
-      background-color: #ffffff;
-    }
+    flex: 1 1 auto;
+    min-width: 0;
+    height: 100%;
+    border: 0;
   }
 
   .o-sidePanel {
     width: 350px;
   }
-
-  @media print {
-    .o-print-container {
-      overflow: visible !important;
-      height: 100% !important;
-    }
-
-    .o-print-preview {
-      box-shadow: none !important;
-      overflow: visible !important;
-      height: 100% !important;
-
-      .o-print-page {
-        box-shadow: none !important;
-        padding: 0 !important;
-        margin: 0 !important;
-        width: 100% !important;
-        height: 100% !important;
-        break-after: page;
-
-        &:last-child {
-          break-after: auto;
-        }
-      }
-    }
-  }
 }
 
 /* Originates from src/components/spreadsheet/spreadsheet.css */
@@ -591,7 +600,7 @@
     margin-bottom: var(--os-menu-separator-padding);
   }
   .o-hoverable-button {
-    border-radius: 2px;
+    border-radius: 4px;
     cursor: pointer;
     .o-icon {
       color: var(--os-text-body);
@@ -642,6 +651,7 @@
     width: 100%;
     outline: none;
     border-color: var(--os-border-color);
+    border-style: solid;
     color: var(--os-gray-900);
 
     &::placeholder {
@@ -720,17 +730,21 @@
       outline: none;
     }
 
-    > canvas {
-      box-sizing: content-box;
-      border-bottom: 1px solid var(--os-canvas-border-color);
-      border-right: 1px solid var(--os-canvas-border-color);
+    > .os-canvas-background {
+      width: fit-content;
+      > canvas {
+        display: block;
+        box-sizing: content-box;
+        border-bottom: 1px solid var(--os-canvas-border-color);
+        border-right: 1px solid var(--os-canvas-border-color);
+      }
     }
+  }
 
-    .o-grid-overlay {
-      position: absolute;
-      outline: none;
-      z-index: var(--os-components-importance-grid-overlay);
-    }
+  .o-grid-overlay {
+    position: absolute;
+    outline: none;
+    z-index: var(--os-components-importance-grid-overlay);
   }
 
   .o-button {
@@ -819,6 +833,12 @@
       filter: var(--os-dark-mode-filter);
     }
   }
+
+  --oi-font-size: var(--os-icon-font-size);
+
+  .os-canvas-background {
+    background-color: var(--os-canvas-background-color);
+  }
 }
 
 /* Originates from src/components/small_bottom_bar/small_bottom_bar.css */
@@ -826,7 +846,7 @@
   background-color: var(--os-background-gray-color);
 
   .o-selection-button {
-    border-radius: 2px;
+    border-radius: 4px;
     background-color: var(--os-gray-200);
     .o-icon {
       width: 24px;
@@ -1313,6 +1333,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 {
@@ -1527,6 +1593,12 @@
         background-color: var(--os-action-color);
         border-color: var(--os-action-color) !important;
       }
+
+      &:focus {
+        outline: none;
+        box-shadow: 0 0 0 0.25rem rgba(113, 75, 103, 0.25);
+        border-color: var(--os-action-color);
+      }
     }
   }
 }
@@ -1542,7 +1614,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;
@@ -1693,22 +1765,8 @@
   }
 }
 
-/* Originates from src/components/side_panel/chart/chart_type_picker/chart_type_picker.css */
+/* Originates from src/components/side_panel/chart/chart_type_picker_popover/chart_type_picker_popover.css */
 .o-spreadsheet {
-  .o-section .o-select.o-type-selector {
-    height: 30px;
-    padding-left: 35px;
-    padding-top: 5px;
-  }
-  .o-type-selector-preview {
-    left: 5px;
-    top: 3px;
-    .o-chart-preview {
-      width: 24px;
-      height: 24px;
-    }
-  }
-
   .o-popover .o-chart-select-popover {
     .o-chart-type-item {
       cursor: pointer;
@@ -1728,6 +1786,23 @@
   }
 }
 
+/* Originates from src/components/side_panel/chart/chart_type_picker/chart_type_picker.css */
+.o-spreadsheet {
+  .o-section .o-select.o-type-selector {
+    height: 30px;
+    padding-left: 35px;
+    padding-top: 5px;
+  }
+  .o-type-selector-preview {
+    left: 5px;
+    top: 3px;
+    .o-chart-preview {
+      width: 24px;
+      height: 24px;
+    }
+  }
+}
+
 /* Originates from src/components/side_panel/chart/building_blocks/text_styler/text_styler.css */
 .o-spreadsheet {
   .o-chart-title-designer {
@@ -1808,6 +1883,10 @@
     height: fit-content;
     max-height: 200px;
     min-height: 1.2em;
+    border-style: none;
+    &:focus {
+      border-color: var(--os-action-color) !important;
+    }
   }
 
   .o-input-infotext:empty:before {
@@ -1820,10 +1899,13 @@
 /* Originates from src/components/side_panel/carousel_panel/carousel_panel.css */
 .o-spreadsheet .o-carousel-panel {
   .o-carousel-preview {
-    height: 60px;
     border-left: 5px solid transparent;
     background-color: var(--os-white-bg);
 
+    .o-preview-content {
+      height: 60px;
+    }
+
     &:not(:hover):not(.o-dragging) .o-drag-handle {
       display: none !important;
     }
@@ -1957,41 +2039,41 @@
 }
 
 /* Originates from src/components/pivot_html_renderer/pivot_html_renderer.css */
-.o-spreadsheet {
-  .o_pivot_html_renderer {
-    width: 100%;
-    border-collapse: collapse;
+/* css-check-ignore */
 
-    &:hover {
-      cursor: pointer;
-    }
+.o_pivot_html_renderer {
+  width: 100%;
+  border-collapse: collapse;
 
-    td,
-    th {
-      border: 1px solid var(--os-border-color);
-      background-color: var(--os-white-bg);
-      padding: 0.3rem;
-      white-space: nowrap;
+  &:hover {
+    cursor: pointer;
+  }
 
-      &:hover {
-        filter: brightness(0.9);
-      }
-    }
+  td,
+  th {
+    border: 1px solid var(--os-border-color);
+    background-color: var(--os-white-bg);
+    padding: 0.3rem;
+    white-space: nowrap;
 
-    td {
-      text-align: right;
+    &:hover {
+      filter: brightness(0.9);
     }
+  }
 
-    th {
-      background-color: var(--os-background-gray-color);
-      font-weight: bold;
-      color: var(--os-black);
-    }
+  td {
+    text-align: right;
+  }
 
-    .o_missing_value {
-      color: var(--os-gray-600);
-      background: var(--os-button-active-bg);
-    }
+  th {
+    background-color: var(--os-gray-100);
+    font-weight: bold;
+    color: var(--os-black);
+  }
+
+  .o_missing_value {
+    color: var(--os-gray-600);
+    background: var(--os-button-active-bg);
   }
 }
 
@@ -2057,6 +2139,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 {
@@ -2076,10 +2163,6 @@
       .o-menu-item-name {
         min-width: 40%;
       }
-      .o-menu-item-icon {
-        display: inline-block;
-        margin: 0px 8px 0px 0px;
-      }
     }
   }
   &.o-spreadsheet-mobile {
@@ -2206,6 +2289,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;
     }
@@ -2213,13 +2297,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 */
@@ -2501,7 +2635,7 @@
 .o-spreadsheet .o-filter-menu {
   .o-search-icon {
     right: 5px;
-    top: 3px;
+    top: 8px;
     opacity: 0.4;
 
     svg {
@@ -2582,6 +2716,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 {
@@ -2589,10 +2740,10 @@
     z-index: var(--os-components-importance-figure-snap-line);
     &.vertical {
       width: 0px;
-      border-left: 1px dashed black;
+      border-left: 1px dashed var(--os-gray-800);
     }
     &.horizontal {
-      border-top: 1px dashed black;
+      border-top: 1px dashed var(--os-gray-800);
       height: 0px;
     }
   }
@@ -2635,8 +2786,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 {
@@ -2653,17 +2804,10 @@
     z-index: 1;
 
     overflow: hidden;
-    padding-left: 4px; /* Align with MIN_CELL_TEXT_MARGIN */
-
-    border: 1px solid transparent;
-
-    &.o-carousel-header-floating {
-      border: 1px solid var(--os-figure-border-color);
-      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    }
 
     .o-carousel-title {
       max-width: 60%;
+      font-weight: 500;
     }
 
     .o-carousel-tabs {
@@ -2672,18 +2816,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,
@@ -2715,6 +2856,7 @@
   div.o-figure {
     color-scheme: light;
     color: var(--os-text-body);
+    border: 0px solid var(--os-figure-border-color);
 
     position: absolute;
     width: 100%;
@@ -2724,17 +2866,21 @@
     &:focus {
       outline: none;
     }
-  }
 
-  div.o-figure-border {
-    z-index: 1;
-    border: 0px solid var(--os-figure-border-color);
+    &.o-figure-shadow {
+      box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
+    }
 
-    &.o-selected {
-      border-color: var(--os-selection-border-color);
+    &.o-figure-rounded {
+      border-radius: 6px;
     }
   }
 
+  .o-figure-selection-border {
+    z-index: 1;
+    border: 2px solid var(--os-selection-border-color);
+  }
+
   .o-figure-wrapper {
     position: absolute;
     box-sizing: content-box;
@@ -2814,6 +2960,7 @@
       color: var(--os-gray-900) !important;
       height: 20px;
       width: 20px;
+      border-color: transparent;
       &.active,
       &:hover,
       &:target {
@@ -2822,9 +2969,7 @@
       }
 
       .o-icon {
-        width: 14px;
-        height: 14px;
-        font-size: 14px !important;
+        --os-icon-edge-length: 14px;
       }
 
       .o-chart-preview {
@@ -2882,7 +3027,8 @@
     cursor: pointer;
   }
 
-  .o-grid.o-dashboard-grid {
+  .o-dashboard-grid {
+    /* Grid itself is transparent, background is applied on another div on which the dark mode filter is applied */
     background-color: transparent;
   }
 }
@@ -3096,18 +3242,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);
       }
     }
@@ -3124,7 +3274,7 @@
     }
 
     .o-composer-assistant-container {
-      .fa-times-circle {
+      [data-icon="cancel_f"] {
         color: var(--os-primary-button-bg);
       }
     }
@@ -3173,7 +3323,7 @@
       align-items: center;
       margin: 2px;
       padding: 3px;
-      border-radius: 2px;
+      border-radius: 4px;
       cursor: pointer;
       &:not([disabled]):hover {
         background-color: var(--os-background-gray-color-hover);
@@ -3437,12 +3587,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: 4px 4px 4px 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;
+      }
     }
   }
 }
@@ -3493,6 +3662,10 @@
       z-index: 1;
       width: calc(100% - 1px);
     }
+
+    .lock-icon {
+      --os-icon-edge-length: 14px;
+    }
   }
 
   .o-spreadshet-mobile .o-sheet {
@@ -3616,7 +3789,7 @@
     align-items: center;
     margin: 2px 1px;
     padding: 0px 1px;
-    border-radius: 2px;
+    border-radius: 4px;
     min-width: 22px;
   }
   .o-disabled {