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

package/components/master-detail-layout.css

@@ -3,9 +3,17 @@
  * Copyright (c) 2000 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-@import '../src/components/master-detail-layout.css';
-
-:is(:root, :host)::before {
-  --vaadin-master-detail-layout-lumo-inject: 1;
-  --vaadin-master-detail-layout-lumo-inject-modules: lumo_components_master-detail-layout;
+:where(:root, :host) {
+  --vaadin-master-detail-layout-backdrop: var(
+    --lumo-shade-20pct
+  );
+  --vaadin-master-detail-layout-detail-background: var(
+    --lumo-base-color
+  );
+  --vaadin-master-detail-layout-detail-shadow:
+    0 0 0 1px var(--lumo-shade-5pct),
+    var(--lumo-box-shadow-m);
+  --vaadin-master-detail-layout-border-color: var(
+    --lumo-contrast-10pct
+  );
 }

package/package.json

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

package/src/components/chart.css

@@ -15,10 +15,6 @@
     --vaadin-charts-grid-line: var(--lumo-contrast-20pct);
     --vaadin-charts-disabled-label: var(--lumo-disabled-text-color);
     --vaadin-charts-contrast: var(--lumo-contrast);
-    --vaadin-charts-contrast-5pct: var(--lumo-contrast-5pct);
-    --vaadin-charts-contrast-10pct: var(--lumo-contrast-10pct);
-    --vaadin-charts-contrast-20pct: var(--lumo-contrast-20pct);
-    --vaadin-charts-contrast-60pct: var(--lumo-contrast-60pct);
     --vaadin-charts-tooltip-background: var(--lumo-base-color);
     --vaadin-charts-tooltip-border-color: inherit;
     --vaadin-charts-button-label: var(--lumo-primary-text-color);
@@ -26,6 +22,7 @@
     --vaadin-charts-button-hover-background: var(--lumo-primary-color-10pct);
     --vaadin-charts-button-active-label: var(--lumo-primary-contrast-color);
     --vaadin-charts-button-active-background: var(--lumo-primary-color);
+    --vaadin-charts-button-border-radius: 2px;
     --vaadin-charts-xaxis-line-width: 0;
     --vaadin-charts-tooltip-background-opacity: 1;
     --vaadin-charts-color-0: #5ac2f7;

package/src/components/form-layout.css

@@ -7,5 +7,6 @@
   :host {
     --vaadin-form-layout-column-spacing: var(--lumo-space-l);
     --vaadin-form-layout-row-spacing: 0;
+    --vaadin-form-layout-label-spacing: 1em;
   }
 }

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/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/multi-select-combo-box.css

@@ -11,6 +11,10 @@
     --_wrapper-gap: 0;
   }
 
+  :host([opened]) {
+    pointer-events: auto;
+  }
+
   #chips {
     display: flex;
     align-items: center;

package/src/components/notification-container.css

@@ -6,13 +6,20 @@
 @media lumo_components_notification-container {
   :host {
     position: fixed;
-    z-index: 1000;
     inset: 0;
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
     align-items: stretch;
     pointer-events: none;
+
+    /* Override native [popover] user agent styles */
+    width: auto;
+    height: auto;
+    border: none;
+    padding: 0;
+    background-color: transparent;
+    overflow: visible;
   }
 
   [region-group] {

package/src/components/popover-overlay.css

@@ -36,7 +36,7 @@
   }
 
   :host([theme~='no-padding']) [part='content'] {
-    padding: 0;
+    padding: 0 !important;
   }
 
   [part='arrow'] {

package/src/components/tabsheet.css

@@ -54,6 +54,6 @@
   }
 
   :host([theme~='no-padding']) [part='content'] {
-    padding: 0;
+    padding: 0 !important;
   }
 }

package/src/components/upload-icon.css

@@ -4,11 +4,17 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 @media lumo_components_upload-icon {
+  :host {
+    display: inline-block;
+  }
+
   :host::before {
     content: var(--lumo-icons-upload);
     font-family: lumo-icons;
     font-size: var(--lumo-icon-size-m);
     line-height: 1;
     vertical-align: -0.25em;
+    background-color: transparent;
+    mask-image: none;
   }
 }

package/src/components/user-tags-overlay.css

@@ -15,10 +15,11 @@
     will-change: opacity, transform;
   }
 
-  ::slotted([part='tags']) {
+  [part='content'] {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
+    padding: 0;
   }
 
   :host([dir='rtl']) [part='overlay'] {
@@ -26,10 +27,6 @@
     right: -4px;
   }
 
-  [part='content'] {
-    padding: 0;
-  }
-
   :host([opening]),
   :host([closing]) {
     animation: 0.14s user-tags-overlay-dummy-animation;

package/src/components/vertical-layout.css

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

package/src/mixins/dashboard-item.css

@@ -5,7 +5,6 @@
  */
 
 @media lumo_mixins_dashboard-item {
-  /* stylelint-disable length-zero-no-unit */
   :host {
     box-sizing: border-box;
     --_widget-background: var(--vaadin-dashboard-widget-background, var(--lumo-base-color));

package/src/components/master-detail-layout.css

@@ -1,21 +0,0 @@
-/**
- * @license
- * Copyright (c) 2000 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-@media lumo_components_master-detail-layout {
-  :host(:is([drawer], [stack])) [part='detail'] {
-    background-color: var(--lumo-base-color);
-    box-shadow:
-      0 0 0 1px var(--lumo-shade-5pct),
-      var(--lumo-box-shadow-m);
-  }
-
-  [part='detail'] {
-    border-color: var(--lumo-contrast-10pct);
-  }
-
-  [part='backdrop'] {
-    background-color: var(--lumo-shade-20pct);
-  }
-}