@vaadin/vaadin-lumo-styles 25.0.0-alpha8 → 25.0.0-beta1

package/src/components/dashboard-widget.css

@@ -4,43 +4,15 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 @media lumo_components_dashboard-widget {
-  :host {
-    display: flex;
-    flex-direction: column;
-    grid-column: var(--_item-column);
-    grid-row: var(--_item-row);
-    background: var(--_widget-background);
-    border-radius: var(--_widget-border-radius);
-    box-shadow: var(--_widget-shadow);
-    position: relative;
-  }
-
   :host::before {
-    content: '';
-    position: absolute;
     inset: calc(-1 * var(--_widget-border-width));
     border: var(--_widget-border-width) solid var(--_widget-border-color);
     border-radius: calc(var(--_widget-border-radius) + var(--_widget-border-width));
-    pointer-events: none;
-  }
-
-  :host([hidden]) {
-    display: none !important;
-  }
-
-  :host(:not([editable])) [part~='resize-button'] {
-    display: none;
-  }
-
-  [part~='content'] {
-    flex: 1;
-    overflow: hidden;
   }
 
   /* Widget states */
 
   :host([editable]) {
-    --vaadin-dashboard-widget-shadow: var(--_widget-editable-shadow);
     --_widget-border-color: var(--lumo-contrast-20pct);
     --_widget-border-width: 1px;
   }
@@ -51,7 +23,6 @@
   }
 
   :host([selected]) {
-    --vaadin-dashboard-widget-shadow: var(--_widget-selected-shadow);
     background: var(--lumo-primary-color-10pct);
   }
 
@@ -62,13 +33,7 @@
   }
 
   :host([resizing])::after {
-    content: '';
-    z-index: 2;
-    position: absolute;
     top: -1px;
-    width: var(--_widget-resizer-width, 0);
-    height: var(--_widget-resizer-height, 0);
-    border-radius: inherit;
     background: var(--_drop-target-background-color);
     border: var(--_drop-target-border);
   }
@@ -81,7 +46,7 @@
   }
 
   :host([editable]) header {
-    padding-inline: var(--lumo-space-xs);
+    padding: var(--lumo-space-xs);
   }
 
   [part='title'] {
@@ -113,24 +78,12 @@
   /* Resize handle */
 
   [part~='resize-button'] {
-    z-index: 1;
-    overflow: hidden;
     --_resize-button-offset: min(var(--_gap), var(--_padding), var(--lumo-space-xs));
-    position: absolute;
     bottom: calc(-1 * var(--_resize-button-offset));
     inset-inline-end: calc(-1 * var(--_resize-button-offset));
-    cursor: nwse-resize;
     --icon: var(--lumo-icons-resize-handle);
   }
 
-  :host([dir='rtl']) [part~='resize-button'] {
-    cursor: sw-resize;
-  }
-
-  :host([dir='rtl']) [part~='resize-button'] .icon::before {
-    transform: scaleX(-1);
-  }
-
   /* Accessible resize mode controls */
 
   [part~='resize-apply-button'] {
@@ -145,48 +98,11 @@
     min-width: var(--lumo-size-s);
   }
 
-  [part~='resize-shrink-width-button'] + [part~='resize-grow-width-button'] {
-    margin-left: 1px;
-  }
-
   [part~='resize-grow-height-button'],
   [part~='resize-shrink-height-button'] {
     height: var(--lumo-size-s);
     padding-right: 0;
     padding-left: 0;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-
-  [part~='resize-shrink-height-button']:not([hidden]) + [part~='resize-grow-height-button'] {
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-  }
-
-  [part~='resize-shrink-height-button'] + [part~='resize-grow-height-button'] {
-    margin-top: 1px;
-  }
-
-  :host(:not([dir='rtl'])) [part~='resize-grow-width-button'],
-  :host(:not([dir='rtl'])) [part~='resize-shrink-width-button'] {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-
-  :host([dir='rtl']) [part~='resize-grow-width-button'],
-  :host([dir='rtl']) [part~='resize-shrink-width-button'] {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-  }
-
-  :host(:not([dir='rtl'])) [part~='resize-shrink-width-button']:not([hidden]) + [part~='resize-grow-width-button'] {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-  }
-
-  :host([dir='rtl']) [part~='resize-shrink-width-button']:not([hidden]) + [part~='resize-grow-width-button'] {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
   }
 
   [part~='resize-grow-height-button'],

package/src/components/dashboard.css

@@ -4,15 +4,6 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 @media lumo_components_dashboard {
-  #grid[item-resizing] {
-    -webkit-user-select: none;
-    user-select: none;
-  }
-
-  ::slotted(vaadin-dashboard-widget-wrapper) {
-    display: contents;
-  }
-
   :host {
     --_widget-opacity: 1;
   }

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

@@ -5,15 +5,6 @@
  */
 @media lumo_components_date-picker-overlay-content {
   :host {
-    display: grid;
-    grid-template-areas:
-      'header header'
-      'months years'
-      'toolbar years';
-    grid-template-columns: minmax(0, 1fr) 0;
-    height: 100%;
-    outline: none;
-    position: relative;
     /* Background for the year scroller, placed here as we are using a mask image on the actual years part */
     background-image: linear-gradient(var(--lumo-shade-5pct), var(--lumo-shade-5pct));
     background-size: 57px 100%;
@@ -26,18 +17,6 @@
     background-position: top left;
   }
 
-  :host([desktop]) {
-    grid-template-columns: minmax(0, 1fr) auto;
-  }
-
-  :host([fullscreen][years-visible]) {
-    grid-template-columns: minmax(0, 1fr) auto;
-  }
-
-  [hidden] {
-    display: none !important;
-  }
-
   ::slotted([slot='months']) {
     /* Month calendar height:
           header height + margin-bottom
@@ -55,17 +34,15 @@
       );
     --vaadin-infinite-scroller-buffer-offset: 10%;
     mask-image: linear-gradient(transparent, #000 10%, #000 85%, transparent);
-    position: relative;
   }
 
   ::slotted([slot='years']) {
     /* TODO get rid of fixed magic number */
     --vaadin-infinite-scroller-buffer-width: 57px;
     width: 57px;
-    height: auto;
-    top: 0;
-    bottom: 0;
     font-size: var(--lumo-font-size-s);
+    border: none;
+    background: transparent;
     box-shadow: inset 2px 0 4px 0 var(--lumo-shade-5pct);
     mask-image: linear-gradient(transparent, #000 35%, #000 65%, transparent);
     cursor: var(--lumo-clickable-cursor);
@@ -79,11 +56,6 @@
     --_lumo-date-picker-year-opacity: 1;
   }
 
-  :host([desktop]) ::slotted([slot='years']),
-  :host([years-visible]) ::slotted([slot='years']) {
-    visibility: visible;
-  }
-
   /* Year scroller position indicator */
   ::slotted([slot='years'])::before {
     border: none;
@@ -91,21 +63,17 @@
     height: 1em;
     background-color: var(--lumo-base-color);
     background-image: linear-gradient(var(--lumo-tint-5pct), var(--lumo-tint-5pct));
-    transform: translate(-75%, -50%) rotate(45deg);
     border-top-right-radius: var(--lumo-border-radius-s);
     box-shadow: 2px -2px 6px 0 var(--lumo-shade-5pct);
-    z-index: 1;
+    translate: -75% -50%;
   }
 
   :host([dir='rtl']) ::slotted([slot='years'])::before {
-    right: 0;
-    transform: translate(75%, -50%) rotate(45deg);
+    border-bottom-left-radius: var(--lumo-border-radius-s);
+    translate: 75% -50%;
   }
 
   [part='toolbar'] {
-    display: flex;
-    grid-area: toolbar;
-    justify-content: space-between;
     padding: var(--lumo-space-s);
     border-bottom-left-radius: var(--lumo-border-radius-l);
   }
@@ -113,9 +81,9 @@
   /* Narrow viewport mode (fullscreen) */
 
   :host([fullscreen]) [part='toolbar'] {
-    grid-area: header;
     margin-inline-end: 57px;
     background-color: var(--lumo-base-color);
+    border: none;
   }
 
   [part='toolbar'] ::slotted(vaadin-button) {
@@ -125,8 +93,6 @@
   /* Very narrow screen (year scroller initially hidden) */
 
   [part='years-toggle-button'] {
-    display: flex;
-    align-items: center;
     height: var(--lumo-size-m);
     padding: 0 0.5em;
     border-radius: var(--lumo-border-radius-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/date-picker.css

@@ -17,11 +17,11 @@
     text-align: left;
   }
 
-  [part='toggle-button']::before {
+  [part~='toggle-button']::before {
     content: var(--lumo-icons-calendar);
   }
 
-  [part='clear-button']::before {
+  [part~='clear-button']::before {
     content: var(--lumo-icons-cross);
   }
 

package/src/components/dialog-overlay.css

@@ -69,19 +69,6 @@
     height: auto;
   }
 
-  @media (min-height: 320px) {
-    :host(:is([has-title], [has-header], [has-footer])) .resizer-container {
-      overflow: hidden;
-      display: flex;
-      flex-direction: column;
-    }
-
-    :host(:is([has-title], [has-header], [has-footer])) [part='content'] {
-      flex: 1;
-      overflow: auto;
-    }
-  }
-
   /*
   NOTE(platosha): Make some min-width to prevent collapsing of the content
   taking the parent width, e. g., <vaadin-grid> and such.
@@ -89,6 +76,16 @@
   [part='content'] {
     min-width: 12em; /* matches the default <vaadin-text-field> width */
     padding: var(--lumo-space-l);
+    flex: 1;
+    min-height: 0;
+  }
+
+  :host([overflow]) [part='content'] {
+    overflow: auto;
+  }
+
+  :host([overflow~='top']) [part='header'] {
+    box-shadow: 0 1px 0 0 var(--lumo-contrast-10pct);
   }
 
   :host([has-bounds-set]) [part='overlay'] {
@@ -126,12 +123,6 @@
     padding: 0 !important;
   }
 
-  @media (min-height: 320px) {
-    :host([overflow~='top']) [part='header'] {
-      box-shadow: 0 1px 0 0 var(--lumo-contrast-10pct);
-    }
-  }
-
   /* Animations */
 
   :host([opening]),

package/src/components/grid-pro-edit-select.css

@@ -4,7 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 @media lumo_components_grid-pro-edit-select {
-  :host([theme~='grid-pro-editor']) [part='toggle-button'] {
+  :host([theme~='grid-pro-editor']) [part~='toggle-button'] {
     margin-right: var(--lumo-space-xs);
   }
 

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/grid.css

@@ -4,16 +4,9 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 @media lumo_components_grid {
-  @keyframes vaadin-grid-appear {
-    to {
-      opacity: 1;
-    }
-  }
-
   :host {
     display: flex;
     flex-direction: column;
-    animation: 1ms vaadin-grid-appear;
     height: 400px;
     min-height: var(--_grid-min-height, 0);
     flex: 1 1 auto;

package/src/components/horizontal-layout.css

@@ -31,8 +31,4 @@
   :host([theme~='spacing-xl']) {
     gap: var(--lumo-space-xl);
   }
-
-  :host([theme~='wrap']) {
-    flex-wrap: wrap;
-  }
 }

package/src/components/icon.css

@@ -5,7 +5,7 @@
  */
 @media lumo_components_icon {
   :host {
-    width: var(--lumo-icon-size-m);
-    height: var(--lumo-icon-size-m);
+    width: var(--vaadin-icon-size, var(--lumo-icon-size-m));
+    height: var(--vaadin-icon-size, var(--lumo-icon-size-m));
   }
 }

package/src/components/input-container.css

@@ -9,10 +9,8 @@
     align-items: center;
     flex: 0 1 auto;
     --_border-radius: var(--vaadin-input-field-border-radius, 0);
-    /* stylelint-disable-next-line length-zero-no-unit */
     --_input-border-width: var(--vaadin-input-field-border-width, 0px);
-    /* stylelint-disable-next-line length-zero-no-unit */
-    box-shadow: inset 0 0 0 var(--_input-border-width, 0px) var(--_input-border-color);
+    box-shadow: inset 0 0 0 var(--_input-border-width, 0) var(--_input-border-color);
     background: var(--_background);
     padding: 0 calc(0.375em + var(--_input-container-radius) / 4 - 1px);
     font-weight: var(--vaadin-input-field-value-font-weight, 500);

package/src/components/login-form-wrapper.css

@@ -5,8 +5,11 @@
  */
 @media lumo_components_login-form-wrapper {
   :host {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    padding: var(--lumo-space-l);
     overflow: hidden;
-    display: inline-block;
     font-family: var(--lumo-font-family);
     font-size: var(--lumo-font-size-m);
     line-height: var(--lumo-line-height-m);
@@ -22,20 +25,12 @@
     display: none !important;
   }
 
-  [part='form'] {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    box-sizing: border-box;
-    padding: var(--lumo-space-l);
-  }
-
   ::slotted(form) {
     display: flex;
     flex-direction: column;
   }
 
-  [part='form-title'] {
+  ::slotted([slot='form-title']) {
     margin: 0;
     margin-top: calc(var(--lumo-font-size-xxxl) - var(--lumo-font-size-xxl));
     color: var(--lumo-header-text-color);
@@ -115,20 +110,4 @@
     line-height: var(--lumo-line-height-s);
     color: var(--lumo-secondary-text-color);
   }
-
-  :host([theme~='with-overlay']) {
-    min-height: 100%;
-    display: flex;
-    justify-content: center;
-    max-width: 100%;
-  }
-
-  /* Landscape small screen */
-  @media only screen and (max-height: 600px) and (min-width: 600px) and (orientation: landscape) {
-    :host([theme~='with-overlay']) [part='form'] {
-      height: 100%;
-      flex: 1;
-      padding: 2px;
-    }
-  }
 }

package/src/components/login-overlay-wrapper.css

@@ -51,7 +51,7 @@
     min-height: calc(var(--lumo-size-m) * 5);
   }
 
-  [part='title'] {
+  ::slotted([slot='title']) {
     color: inherit;
     margin: 0;
     font-size: var(--lumo-font-size-xxxl);
@@ -77,6 +77,11 @@
     padding: 0;
   }
 
+  ::slotted(vaadin-login-form-wrapper) {
+    min-height: 100%;
+    max-width: 100%;
+  }
+
   /* Small screen */
   @media only screen and (max-width: 500px) {
     [part='overlay'],
@@ -114,7 +119,7 @@
     }
 
     [part='brand'],
-    [part='form'] {
+    [part='form-wrapper'] {
       flex: auto;
       flex-basis: 0;
       box-sizing: border-box;
@@ -124,10 +129,15 @@
       justify-content: flex-start;
     }
 
-    [part='form'] {
+    [part='form-wrapper'] {
       padding: var(--lumo-space-l);
       overflow: auto;
     }
+
+    ::slotted(vaadin-login-form-wrapper) {
+      flex: 1;
+      padding: 2px;
+    }
   }
 
   /* Landscape really small screen */
@@ -147,7 +157,7 @@
       box-shadow: none;
     }
 
-    [part='form'] {
+    [part='form-wrapper'] {
       height: 100%;
       overflow: auto;
     }

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/message.css

@@ -5,14 +5,12 @@
  */
 @media lumo_components_message {
   :host {
-    display: flex;
-    flex-direction: row;
-    outline: none;
     color: var(--lumo-body-text-color);
     font-family: var(--lumo-font-family);
     font-size: var(--lumo-font-size-m);
     line-height: var(--lumo-line-height-m);
     padding: var(--lumo-space-s) var(--lumo-space-m);
+    gap: 0;
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
     -webkit-text-size-adjust: 100%;
@@ -20,34 +18,25 @@
     --_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
   }
 
-  :host([hidden]) {
-    display: none !important;
-  }
-
-  [part='content'] {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
+  :host(:is(:focus-visible, [focus-ring])) {
+    outline: none;
   }
 
   [part='header'] {
-    align-items: baseline;
-    display: flex;
-    flex-flow: row wrap;
     min-height: calc(var(--lumo-font-size-m) * var(--lumo-line-height-m));
   }
 
   [part='name'] {
-    font-weight: 500;
-    margin-right: var(--lumo-space-s);
+    color: inherit;
+    margin-inline-end: var(--lumo-space-s);
   }
 
   [part='name']:empty {
-    margin-right: 0;
+    margin-inline-end: 0;
   }
 
   [part='message'] {
-    white-space: pre-wrap;
+    color: inherit;
   }
 
   [part='time'] {
@@ -58,25 +47,11 @@
   ::slotted([slot='avatar']) {
     --vaadin-avatar-outline-width: 0;
     --vaadin-avatar-size: var(--lumo-size-m);
-    flex-shrink: 0;
     margin-top: calc(var(--lumo-space-s));
     margin-inline-end: calc(var(--lumo-space-m));
   }
 
-  ::slotted(vaadin-markdown) {
-    white-space: normal;
-  }
-
   :host([focus-ring]) {
     box-shadow: inset 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
   }
-
-  :host([dir='rtl']) [part='name'] {
-    margin-left: var(--lumo-space-s);
-    margin-right: 0;
-  }
-
-  :host([dir='rtl']) [part='name']:empty {
-    margin-left: 0;
-  }
 }