@vaadin/vaadin-lumo-styles 25.0.0-alpha11 → 25.0.0-alpha13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/vaadin-lumo-styles",
-  "version": "25.0.0-alpha11",
+  "version": "25.0.0-alpha13",
   "publishConfig": {
     "access": "public"
   },
@@ -42,9 +42,9 @@
     "web-component"
   ],
   "dependencies": {
-    "@vaadin/component-base": "25.0.0-alpha11",
-    "@vaadin/icon": "25.0.0-alpha11",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha11"
+    "@vaadin/component-base": "25.0.0-alpha13",
+    "@vaadin/icon": "25.0.0-alpha13",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha13"
   },
   "devDependencies": {
     "gulp": "^5.0.1",
@@ -54,5 +54,5 @@
     "imagemin": "^9.0.0",
     "imagemin-svgo": "^10.0.1"
   },
-  "gitHead": "abfd315ba5a7484a613e0768635a4e8fe945a44b"
+  "gitHead": "182de596226343392135468f021bbce9e6402011"
 }

package/src/components/chart.css

@@ -4,7 +4,8 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 @media lumo_components_chart {
-  :host {
+  :host,
+  :root {
     --vaadin-charts-background: var(--lumo-base-color);
     --vaadin-charts-title-label: var(--lumo-header-text-color);
     --vaadin-charts-axis-title: var(--lumo-secondary-text-color);

package/src/components/checkbox.css

@@ -191,10 +191,9 @@
 
   /* Disable hover for touch devices */
   @media (pointer: coarse) {
-    /* prettier-ignore */
     :host(:not([checked]):not([indeterminate]):not([disabled]):not([readonly]):not([invalid]):hover) [part='checkbox'] {
-        background: var(--vaadin-checkbox-background, var(--lumo-contrast-20pct));
-      }
+      background: var(--vaadin-checkbox-background, var(--lumo-contrast-20pct));
+    }
   }
 
   /* Active */

package/src/components/confirm-dialog-overlay.css

@@ -4,10 +4,6 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 @media lumo_components_confirm-dialog-overlay {
-  #resizerContainer {
-    height: 100%;
-  }
-
   [part='header'] {
     pointer-events: auto;
     margin-inline-start: calc(var(--lumo-space-l) - var(--lumo-space-m));

package/src/components/date-picker-overlay.css

@@ -7,20 +7,8 @@
   [part='overlay'] {
     display: flex;
     flex: auto;
-
-    /*
-  Width:
-      date cell widths
-    + month calendar side padding
-    + year scroller width
-  */
-    /* prettier-ignore */
-    width:
-  calc(
-      var(--lumo-size-m) * 7
-    + var(--lumo-space-xs) * 2
-    + 57px
-  );
+    /* Width: date cell widths + month calendar side padding + year scroller width */
+    width: calc(var(--lumo-size-m) * 7 + var(--lumo-space-xs) * 2 + 57px);
     height: 100%;
     max-height: calc(var(--lumo-size-m) * 14);
     overflow: hidden;

package/src/components/grid-pro.css

@@ -37,14 +37,14 @@
 
   /* prettier-ignore */
   :host([theme~='highlight-read-only-cells']) [tabindex]:not([part~='editable-cell']):not([part~='header-cell']):not([part~='footer-cell']) {
-      background-image: repeating-linear-gradient(
-        135deg,
-        transparent,
-        transparent 6px,
-        var(--lumo-contrast-5pct) 6px,
-        var(--lumo-contrast-5pct) 14px
-      );
-    }
+    background-image: repeating-linear-gradient(
+      135deg,
+      transparent,
+      transparent 6px,
+      var(--lumo-contrast-5pct) 6px,
+      var(--lumo-contrast-5pct) 14px
+    );
+  }
 
   /* Loading editor cell styles are used by Flow GridPro */
   :host([loading-editor]) [part~='focused-cell']::before {
@@ -81,4 +81,10 @@
       background-position: max(300%, 8em) 0;
     }
   }
+
+  :host([loading-editor]) [part~='focused-cell'] ::slotted(vaadin-grid-cell-content),
+  [part~='updating-cell'] ::slotted(vaadin-grid-cell-content) {
+    opacity: 0;
+    pointer-events: none;
+  }
 }

package/src/components/menu-bar-button.css

@@ -95,19 +95,19 @@
 
   /* prettier-ignore */
   :host([theme~='dropdown-indicators']:not([slot='overflow']):not([theme~='icon'])[aria-haspopup]) [part='suffix']::after {
-  font-family: lumo-icons;
-  content: var(--lumo-icons-dropdown);
-}
+    font-family: lumo-icons;
+    content: var(--lumo-icons-dropdown);
+  }
 
   /* prettier-ignore */
   :host([theme~='dropdown-indicators']:not([slot='overflow']):not([theme~='icon'])[theme~='tertiary'][aria-haspopup]) [part='suffix'] {
-  inset-inline-start: 0.05em;
-}
+    inset-inline-start: 0.05em;
+  }
 
   /* prettier-ignore */
   :host([theme~='dropdown-indicators']:not([slot='overflow']):not([theme~='icon'])[theme~='tertiary-inline'][aria-haspopup]) [part='suffix'] {
-  inset-inline-start: 0;
-}
+    inset-inline-start: 0;
+  }
 
   /* RTL styles */
   :host([dir='rtl']) {

package/src/components/rich-text-editor.css

@@ -426,25 +426,51 @@
   .ql-align-right {
     text-align: right;
   }
-  /* quill core end */
-
-  blockquote {
-    padding-left: 1em;
-  }
-
-  code,
-  pre {
-    background-color: #f0f0f0;
-  }
 
-  pre {
+  .ql-code-block-container {
+    font-family: monospace;
+    background-color: var(--lumo-contrast-10pct);
+    border-radius: var(--lumo-border-radius-m);
     white-space: pre-wrap;
     margin-bottom: 0.3125em;
     margin-top: 0.3125em;
     padding: 0.3125em 0.625em;
   }
 
+  .ql-editor li {
+    list-style-type: none;
+    position: relative;
+  }
+
+  .ql-editor li > .ql-ui::before {
+    display: inline-block;
+    margin-left: -1.5em;
+    margin-right: 0.3em;
+    text-align: right;
+    white-space: nowrap;
+    width: 1.2em;
+  }
+
+  .ql-editor li[data-list='bullet'] {
+    list-style-type: disc;
+  }
+
+  .ql-editor li[data-list='ordered'] {
+    counter-increment: list-0;
+  }
+
+  .ql-editor li[data-list='ordered'] > .ql-ui::before {
+    content: counter(list-0, decimal) '. ';
+  }
+
+  /* quill core end */
+
+  blockquote {
+    padding-left: 1em;
+  }
+
   code {
+    background-color: var(--lumo-contrast-10pct);
     font-size: 85%;
     padding: 0.125em 0.25em;
   }