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

package/auto-complete.css

@@ -99,77 +99,6 @@
   --lumo-box-shadow-l: 0 3px 18px -2px var(--lumo-shade-20pct), 0 12px 48px -6px var(--lumo-shade-40pct);
   --lumo-box-shadow-xl: 0 4px 24px -3px var(--lumo-shade-20pct), 0 18px 64px -8px var(--lumo-shade-40pct);
   --lumo-clickable-cursor: default;
-  --vaadin-button-background: var(--lumo-contrast-5pct);
-  --vaadin-button-border: none;
-  --vaadin-button-border-radius: var(--lumo-border-radius-m);
-  --vaadin-button-font-size: var(--lumo-font-size-m);
-  --vaadin-button-font-weight: 500;
-  --vaadin-button-height: var(--lumo-size-m);
-  --vaadin-button-margin: var(--lumo-space-xs) 0;
-  --vaadin-button-min-width: calc(var(--vaadin-button-height) * 2);
-  --vaadin-button-padding: 0 calc(var(--vaadin-button-height) / 3 + var(--lumo-border-radius-m) / 2);
-  --vaadin-button-text-color: var(--lumo-primary-text-color);
-  --vaadin-button-primary-background: var(--lumo-primary-color);
-  --vaadin-button-primary-border: none;
-  --vaadin-button-primary-font-weight: 600;
-  --vaadin-button-primary-text-color: var(--lumo-primary-contrast-color);
-  --vaadin-button-tertiary-background: transparent !important;
-  --vaadin-button-tertiary-text-color: var(--lumo-primary-text-color);
-  --vaadin-button-tertiary-font-weight: 500;
-  --vaadin-button-tertiary-padding: 0 calc(var(--vaadin-button-height) / 6);
-  --vaadin-checkbox-background: var(--lumo-contrast-20pct);
-  --vaadin-checkbox-background-hover: var(--lumo-contrast-30pct);
-  --vaadin-checkbox-border-radius: var(--lumo-border-radius-s);
-  --vaadin-checkbox-checkmark-char: var(--lumo-icons-checkmark);
-  --vaadin-checkbox-checkmark-char-indeterminate: '';
-  --vaadin-checkbox-checkmark-color: var(--lumo-primary-contrast-color);
-  --vaadin-checkbox-checkmark-size: calc(var(--vaadin-checkbox-size) + 2px);
-  --vaadin-checkbox-label-color: var(--lumo-body-text-color);
-  --vaadin-checkbox-label-font-size: var(--lumo-font-size-m);
-  --vaadin-checkbox-label-padding: var(--lumo-space-xs) var(--lumo-space-s) var(--lumo-space-xs) var(--lumo-space-xs);
-  --vaadin-checkbox-size: calc(var(--lumo-size-m) / 2);
-  --vaadin-checkbox-disabled-checkmark-color: var(--lumo-contrast-30pct);
-  --vaadin-checkbox-disabled-background: var(--lumo-contrast-10pct);
-  --vaadin-radio-button-background: var(--lumo-contrast-20pct);
-  --vaadin-radio-button-background-hover: var(--lumo-contrast-30pct);
-  --vaadin-radio-button-dot-color: var(--lumo-primary-contrast-color);
-  --vaadin-radio-button-dot-size: 3px;
-  --vaadin-radio-button-label-color: var(--lumo-body-text-color);
-  --vaadin-radio-button-label-font-size: var(--lumo-font-size-m);
-  --vaadin-radio-button-size: calc(var(--lumo-size-m) / 2);
-  --vaadin-radio-button-disabled-background: var(--lumo-contrast-10pct);
-  --vaadin-radio-button-disabled-dot-color: var(--lumo-contrast-30pct);
-  --vaadin-selection-color: var(--lumo-primary-color);
-  --vaadin-selection-color-text: var(--lumo-primary-text-color);
-  --vaadin-input-field-border-radius: var(--lumo-border-radius-m);
-  --vaadin-focus-ring-color: var(--lumo-primary-color-50pct);
-  --vaadin-focus-ring-width: 2px;
-  --vaadin-input-field-label-color: var(--lumo-secondary-text-color);
-  --vaadin-input-field-focused-label-color: var(--lumo-primary-text-color);
-  --vaadin-input-field-hovered-label-color: var(--lumo-body-text-color);
-  --vaadin-input-field-label-font-size: var(--lumo-font-size-s);
-  --vaadin-input-field-label-font-weight: 500;
-  --vaadin-input-field-helper-color: var(--lumo-secondary-text-color);
-  --vaadin-input-field-helper-font-size: var(--lumo-font-size-xs);
-  --vaadin-input-field-helper-font-weight: 400;
-  --vaadin-input-field-helper-spacing: 0.4em;
-  --vaadin-input-field-error-color: var(--lumo-error-text-color);
-  --vaadin-input-field-error-font-size: var(--lumo-font-size-xs);
-  --vaadin-input-field-error-font-weight: 400;
-  --vaadin-input-field-background: var(--lumo-contrast-10pct);
-  --vaadin-input-field-icon-color: var(--lumo-contrast-60pct);
-  --vaadin-input-field-icon-size: var(--lumo-icon-size-m);
-  --vaadin-input-field-invalid-background: var(--lumo-error-color-10pct);
-  --vaadin-input-field-invalid-hover-highlight: var(--lumo-error-color-50pct);
-  --vaadin-input-field-disabled-background: var(--lumo-contrast-5pct);
-  --vaadin-input-field-disabled-value-color: var(--lumo-disabled-text-color);
-  --vaadin-input-field-height: var(--lumo-size-m);
-  --vaadin-input-field-hover-highlight: var(--lumo-contrast-50pct);
-  --vaadin-input-field-placeholder-color: var(--lumo-secondary-text-color);
-  --vaadin-input-field-readonly-border: 1px dashed var(--lumo-contrast-30pct);
-  --vaadin-input-field-value-color: var(--lumo-body-text-color);
-  --vaadin-input-field-value-font-size: var(--lumo-font-size-m);
-  --vaadin-input-field-value-font-weight: 500;
   --lumo-font-family: -apple-system, BlinkMacSystemFont, 'Roboto', 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   --lumo-font-size-xxs: 0.75rem;
   --lumo-font-size-xs: 0.8125rem;

package/global.css

@@ -4,11 +4,5 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 @import './src/global/badge.css';
-@import './src/global/dark.css';
+@import './src/global/color-scheme.css';
 @import './src/global/typography.css';
-
-:where(:root, :host) {
-  color: var(--lumo-body-text-color);
-  background-color: var(--lumo-base-color);
-  color-scheme: light;
-}

package/package.json

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

package/src/components/avatar-group.css

@@ -24,17 +24,17 @@
     flex-wrap: nowrap;
   }
 
-  ::slotted(vaadin-avatar:not(:first-child)) {
+  ::slotted(vaadin-avatar:not(:first-of-type)) {
     mask-image: url('data:image/svg+xml;utf8,<svg viewBox=%220 0 300 300%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22><path fill-rule=%22evenodd%22 clip-rule=%22evenodd%22 d=%22M300 0H0V300H300V0ZM150 200C177.614 200 200 177.614 200 150C200 122.386 177.614 100 150 100C122.386 100 100 122.386 100 150C100 177.614 122.386 200 150 200Z%22 fill=%22black%22/></svg>');
     mask-size: calc(300% + var(--vaadin-avatar-group-overlap-border) * 6 - var(--vaadin-avatar-outline-width) * 6);
   }
 
-  ::slotted(vaadin-avatar:not([dir='rtl']):not(:first-child)) {
+  ::slotted(vaadin-avatar:not([dir='rtl']):not(:first-of-type)) {
     margin-left: calc(var(--vaadin-avatar-group-overlap) * -1 - var(--vaadin-avatar-outline-width));
     mask-position: calc(50% - var(--vaadin-avatar-size) + var(--vaadin-avatar-group-overlap));
   }
 
-  ::slotted(vaadin-avatar[dir='rtl']:not(:first-child)) {
+  ::slotted(vaadin-avatar[dir='rtl']:not(:first-of-type)) {
     margin-right: calc(var(--vaadin-avatar-group-overlap) * -1);
     mask-position: calc(
       50% + var(--vaadin-avatar-size) - var(--vaadin-avatar-group-overlap) + var(--vaadin-avatar-outline-width)

package/src/components/avatar.css

@@ -5,40 +5,25 @@
  */
 @media lumo_components_avatar {
   :host {
-    position: relative;
-    display: inline-block;
-    flex: none;
-    overflow: hidden;
-    height: var(--vaadin-avatar-size, 64px);
-    width: var(--vaadin-avatar-size, 64px);
+    --vaadin-avatar-outline-width: var(--vaadin-focus-ring-width, 2px);
     border: var(--vaadin-avatar-outline-width) solid transparent;
     margin: calc(var(--vaadin-avatar-outline-width) * -1);
-    background-clip: content-box;
-    --vaadin-avatar-outline-width: var(--vaadin-focus-ring-width, 2px);
     color: var(--lumo-secondary-text-color);
     background-color: var(--lumo-contrast-10pct);
-    border-radius: 50%;
     outline: none;
-    cursor: default;
-    user-select: none;
-    -webkit-tap-highlight-color: transparent;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-  }
-
-  img {
-    height: 100%;
-    width: 100%;
-    object-fit: cover;
+    vertical-align: baseline;
   }
 
   [part='icon'] {
     display: flex;
     align-items: center;
     justify-content: center;
-    height: 100%;
     font-size: var(--vaadin-avatar-size, 64px);
     line-height: 1;
+    mask: none;
+    background: none;
   }
 
   [part='icon']::before {
@@ -51,28 +36,19 @@
     font-family: var(--lumo-font-family);
     font-size: 2.4375em;
     font-weight: 500;
-    fill: currentColor;
-  }
-
-  :host([hidden]),
-  [hidden] {
-    display: none !important;
   }
 
   :host([has-color-index]) {
-    background-color: var(--vaadin-avatar-user-color);
     color: var(--lumo-base-color);
   }
 
   :host([has-color-index])::before {
-    position: absolute;
-    content: '';
-    inset: 0;
-    border-radius: inherit;
+    border: none;
     box-shadow: inset 0 0 0 2px var(--vaadin-avatar-user-color);
   }
 
   :host([focus-ring]) {
+    outline: none;
     border-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
   }
 

package/src/components/button.css

@@ -266,7 +266,6 @@ Note, to make it work, the form fields should have the same "::before" pseudo-el
   /* Icons */
 
   [part] ::slotted(vaadin-icon) {
-    display: inline-block;
     width: var(--lumo-icon-size-m);
     height: var(--lumo-icon-size-m);
   }

package/src/components/icon.css

@@ -5,43 +5,7 @@
  */
 @media lumo_components_icon {
   :host {
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    box-sizing: border-box;
-    vertical-align: middle;
     width: var(--lumo-icon-size-m);
     height: var(--lumo-icon-size-m);
-    fill: currentColor;
-    container-type: size;
-  }
-
-  :host::after,
-  :host::before {
-    line-height: 1;
-    font-size: 100cqh;
-    -webkit-font-smoothing: antialiased;
-    text-rendering: optimizeLegibility;
-    -moz-osx-font-smoothing: grayscale;
-  }
-
-  :host([hidden]) {
-    display: none !important;
-  }
-
-  svg {
-    display: block;
-    width: 100%;
-    height: 100%;
-    /* prevent overflowing icon from clipping, see https://github.com/vaadin/flow-components/issues/5872 */
-    overflow: visible;
-  }
-
-  :host(:is([icon-class], [font-icon-content])) svg {
-    display: none;
-  }
-
-  :host([font-icon-content])::before {
-    content: attr(font-icon-content);
   }
 }

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

@@ -13,7 +13,8 @@
     -webkit-text-size-adjust: 100%;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    max-width: calc(var(--lumo-size-m) * 10);
+    width: calc(var(--lumo-size-m) * 10);
+    max-width: 100%;
     background: var(--lumo-base-color) linear-gradient(var(--lumo-tint-5pct), var(--lumo-tint-5pct));
   }
 
@@ -29,6 +30,11 @@
     padding: var(--lumo-space-l);
   }
 
+  ::slotted(form) {
+    display: flex;
+    flex-direction: column;
+  }
+
   [part='form-title'] {
     margin: 0;
     margin-top: calc(var(--lumo-font-size-xxxl) - var(--lumo-font-size-xxl));

package/src/components/map.css

@@ -5,11 +5,6 @@
  */
 @media lumo_components_map {
   :host {
-    display: block;
-    height: 400px;
-    flex: 1 1 auto;
-    align-self: stretch;
-    overflow: hidden;
     font-family: var(--lumo-font-family);
     font-size: var(--lumo-font-size-m);
     --vaadin-map-controls-inset: var(--lumo-space-xs);
@@ -24,187 +19,46 @@
     --_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
   }
 
-  :host([hidden]) {
-    display: none !important;
-  }
-
   :host(:not([theme~='no-border'])) {
     border-radius: var(--lumo-border-radius-l);
-    position: relative;
   }
 
   :host(:not([theme~='no-border']))::before {
-    content: '';
-    position: absolute;
-    inset: 0;
     border: 1px solid var(--lumo-contrast-10pct);
-    border-radius: inherit;
-    z-index: 1;
-    pointer-events: none;
   }
 
   :host([focus-ring]) {
-    box-shadow: 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
-  }
-
-  #map {
-    width: 100%;
-    height: 100%;
     outline: none;
+    box-shadow: 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
   }
 
-  #map,
-  .ol-viewport,
-  .ol-layers {
-    border-radius: inherit;
-    overflow: hidden;
-  }
-
-  #map:fullscreen {
-    border-radius: 0;
-  }
-
-  #map:-webkit-full-screen {
-    border-radius: 0;
-  }
-
-  /* Functional styles, copied from 'ol/ol.css' */
-
-  .ol-box {
-    box-sizing: border-box;
-    border-radius: 2px;
-    border: 1px solid rgba(0, 0, 0, 0.5);
-    background-color: rgba(255, 255, 255, 0.2);
-    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5);
-  }
-
-  .ol-unsupported {
-    display: none;
-  }
-
-  .ol-viewport,
-  .ol-unselectable {
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    user-select: none;
-    -webkit-tap-highlight-color: transparent;
-  }
-
-  .ol-viewport canvas {
-    all: unset;
-  }
-
-  .ol-selectable {
-    -webkit-touch-callout: default;
-    -webkit-user-select: text;
-    user-select: text;
-  }
-
-  .ol-grabbing {
-    cursor: grabbing;
-  }
-
-  .ol-grab {
-    cursor: move;
-    cursor: grab;
-  }
-
-  /* Control positioning and styling */
-
-  .ol-overlaycontainer-stopevent {
-    /* stylelint-disable declaration-block-no-redundant-longhand-properties */
-    display: grid;
-    grid-template-columns: min-content 1fr min-content;
-    grid-template-rows: min-content 1fr min-content min-content min-content min-content;
-    padding: var(--vaadin-map-controls-inset, 0.25em);
-    box-sizing: border-box;
-    grid-template-areas:
-      'scale mouse-position fullscreen'
-      'overview-map . zoom-extent'
-      'overview-map . compass'
-      'overview-map . zoom-slider'
-      'overview-map . zoom'
-      'overview-map attribution attribution';
-  }
-
-  .ol-mouse-position {
-    grid-area: mouse-position;
-    align-self: start;
-    text-align: center;
-    font-size: 0.625em;
-    color: #000;
-    filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff);
-  }
-
-  .ol-scale-line,
-  .ol-scale-bar {
-    grid-area: scale;
-    position: relative;
-    pointer-events: none !important;
-    color: #000;
+  .ol-overviewmap button span:empty::before,
+  .ol-zoom-in:empty::before,
+  .ol-zoom-out:empty::before,
+  .ol-compass:empty::before,
+  .ol-full-screen button:empty::before,
+  .ol-full-screen-true:empty::before {
+    background: transparent;
+    mask-image: none;
+    display: inline;
+    width: auto;
+    height: auto;
   }
 
-  .ol-scale-line-inner {
-    border: 1px solid rgba(0, 0, 0, 0.5);
-    border-top: none;
-    font-size: 0.625em;
-    text-align: center;
-    will-change: contents, width, filter;
-    transition: all 0.25s;
-    filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff);
+  .ol-control:not(.ol-uncollapsible):hover {
+    box-shadow: var(--lumo-box-shadow-s);
+    background-color: var(--lumo-shade-20pct);
   }
 
   .ol-scale-bar-inner {
-    border: 1px solid rgba(0, 0, 0, 0.5);
-    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5);
-    overflow: hidden;
     border-radius: var(--lumo-border-radius-s);
   }
 
-  .ol-scale-step-marker {
-    display: none;
-  }
-
-  .ol-scale-step-text {
-    position: absolute;
-    top: 0.75em;
-    font-size: 0.625em;
-    color: #000;
-    filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff);
-    white-space: nowrap;
-    overflow: hidden;
-  }
-
-  .ol-scale-text {
-    position: absolute;
-    font-size: 0.625em;
-    top: 2em;
-    color: #000;
-    white-space: nowrap;
-    filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff);
-  }
-
-  .ol-scale-singlebar {
-    height: 0.25em;
-    opacity: 0.5;
-  }
-
-  .ol-compass {
-    grid-area: compass;
-    display: block;
-    will-change: transform;
-  }
-
-  .ol-rotate {
-    grid-area: compass;
-  }
-
   .ol-compass:empty::before {
-    content: var(--vaadin-map-icon-compass, '\\2191');
+    content: var(--vaadin-map-icon-compass);
   }
 
   .ol-full-screen {
-    grid-area: fullscreen;
     height: var(--lumo-size-s);
   }
 
@@ -216,40 +70,19 @@
     content: var(--vaadin-map-icon-close, '\00D7');
   }
 
-  .ol-overviewmap {
-    grid-area: overview-map;
-    align-self: end;
-    width: max-content;
-  }
-
   .ol-overviewmap button span:empty::before {
-    content: var(--vaadin-map-icon-overview-map-collapse, '\25BE');
+    content: var(--vaadin-map-icon-overview-map-collapse);
   }
 
   .ol-overviewmap.ol-collapsed button span:empty::before {
-    content: var(--vaadin-map-icon-overview-map-expand, '\25B4');
+    content: var(--vaadin-map-icon-overview-map-expand);
   }
 
   .ol-overviewmap-map {
-    height: 10em;
-    width: 10em;
     margin: var(--lumo-space-xs);
-    border: 0;
     border-radius: var(--lumo-border-radius-s);
   }
 
-  .ol-overviewmap.ol-collapsed .ol-overviewmap-map,
-  .ol-overviewmap.ol-uncollapsible button {
-    display: none;
-  }
-
-  .ol-overviewmap-box {
-    border: 1px dashed rgba(0, 0, 0, 0.5);
-    filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff);
-    will-change: filter;
-    cursor: move;
-  }
-
   .ol-overviewmap:not(.ol-collapsed),
   .ol-overviewmap:not(.ol-collapsed):hover {
     background-color: var(--lumo-base-color);
@@ -257,19 +90,11 @@
     transition: 0.15s box-shadow;
   }
 
-  .ol-overviewmap:not(.ol-uncollapsible) .ol-overviewmap-map {
-    margin-bottom: 0;
-  }
-
-  .ol-zoomslider {
-    grid-area: zoom-slider;
-    height: 8em;
+  .ol-overviewmap.ol-collapsed button {
+    rotate: none;
   }
 
   .ol-zoomslider button {
-    position: relative;
-    display: block;
-    border-radius: inherit;
     height: var(--lumo-space-m);
   }
 
@@ -277,16 +102,6 @@
     box-shadow: var(--lumo-box-shadow-s);
   }
 
-  .ol-zoomslider:not(.ol-uncollapsible):hover {
-    box-shadow: none;
-    overflow: visible;
-  }
-
-  .ol-zoom-extent {
-    grid-area: zoom-extent;
-    align-self: end;
-  }
-
   .ol-control,
   .ol-scale-bar,
   .ol-scale-line {
@@ -294,7 +109,6 @@
   }
 
   .ol-control {
-    margin: 0.25em;
     border-radius: var(--lumo-border-radius-m);
     transition:
       0.15s box-shadow,
@@ -306,19 +120,7 @@
     background-color: var(--lumo-base-color);
   }
 
-  .ol-control:not(.ol-uncollapsible):hover {
-    box-shadow: var(--lumo-box-shadow-s);
-    background-color: var(--lumo-shade-20pct);
-  }
-
   .ol-control button {
-    appearance: none;
-    border: 0;
-    margin: 0;
-    padding: 0;
-    background: #fff;
-    font: inherit;
-    color: inherit;
     width: var(--lumo-size-s);
     height: var(--lumo-size-s);
     border-radius: inherit;
@@ -327,23 +129,11 @@
     font-weight: 400;
   }
 
-  .ol-control button::-moz-focus-inner {
-    border: none;
-    padding: 0;
-  }
-
   .ol-control button,
   .ol-attribution:not(.ol-uncollapsible) ul {
-    transition: 0.15s opacity;
+    display: block;
     background-color: var(--lumo-base-color);
     color: var(--lumo-body-text-color);
-    opacity: 0.65;
-  }
-
-  .ol-control:hover button,
-  .ol-control button:focus,
-  .ol-attribution:hover ul {
-    opacity: 1;
   }
 
   .ol-control button:hover {
@@ -359,41 +149,15 @@
     box-shadow: 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
   }
 
-  .ol-zoom {
-    grid-area: zoom;
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-  }
-
   .ol-zoom-in:empty::before {
-    content: var(--vaadin-map-icon-zoom-in, '+');
+    content: var(--vaadin-map-icon-zoom-in);
   }
 
   .ol-zoom-out:empty::before {
-    content: var(--vaadin-map-icon-zoom-out, '\2013');
-  }
-
-  button.ol-zoom-in {
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-
-  button.ol-zoom-out {
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-  }
-
-  .ol-attribution {
-    grid-area: attribution;
-    margin-inline-start: auto !important;
-    display: flex;
-    flex-flow: row-reverse;
+    content: var(--vaadin-map-icon-zoom-out);
   }
 
   .ol-attribution.ol-uncollapsible {
-    margin-inline-end: calc(var(--vaadin-map-controls-inset, 0.25em) * -1);
-    margin-block-end: calc(var(--vaadin-map-controls-inset, 0.25em) * -1);
     border-radius: var(--lumo-border-radius-m) 0 0 0;
   }
 
@@ -406,32 +170,13 @@
   }
 
   .ol-attribution ul {
-    display: flex;
-    align-items: center;
-    gap: 1em;
-    list-style: none;
-    margin: 0;
-    font-size: 0.8em;
     font-size: var(--lumo-font-size-xxs);
     color: var(--lumo-secondary-text-color);
     padding: var(--lumo-space-xs) var(--lumo-space-s);
     cursor: default;
   }
 
-  .ol-attribution.ol-collapsed ul {
-    display: none;
-  }
-
-  .ol-attribution.ol-uncollapsible button {
-    display: none;
-  }
-
   .ol-attribution:not(.ol-uncollapsible) ul {
     background-color: var(--lumo-base-color);
   }
-
-  .ol-attribution a {
-    color: inherit;
-    cursor: pointer;
-  }
 }

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

@@ -6,21 +6,16 @@
 @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);
   }
 
-  :host([drawer]) [part='detail'] {
-    box-shadow: var(--lumo-box-shadow-s);
+  [part='detail'] {
+    border-color: var(--lumo-contrast-10pct);
   }
 
-  :host([drawer][orientation='horizontal']) [part='detail'] {
-    border-inline-start: 1px solid var(--lumo-contrast-10pct);
-  }
-
-  :host([drawer][orientation='vertical']) [part='detail'] {
-    border-block-start: 1px solid var(--lumo-contrast-10pct);
-  }
-
-  :host([drawer]) [part='backdrop'] {
+  [part='backdrop'] {
     background-color: var(--lumo-shade-20pct);
   }
 }

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

@@ -12,7 +12,6 @@
   }
 
   [part='content'] ::slotted(vaadin-icon) {
-    display: inline-block;
     width: var(--lumo-icon-size-m);
     height: var(--lumo-icon-size-m);
   }

package/src/components/popover-overlay.css

@@ -5,14 +5,8 @@
  */
 @media lumo_components_popover-overlay {
   :host {
-    --_vaadin-popover-content-width: auto;
-    --_vaadin-popover-content-height: auto;
-    --vaadin-popover-offset-top: var(--_vaadin-popover-default-offset);
-    --vaadin-popover-offset-bottom: var(--_vaadin-popover-default-offset);
-    --vaadin-popover-offset-start: var(--_vaadin-popover-default-offset);
-    --vaadin-popover-offset-end: var(--_vaadin-popover-default-offset);
     --vaadin-popover-arrow-size: 0.5rem;
-    --_vaadin-popover-default-offset: var(--lumo-space-xs);
+    --_default-offset: var(--lumo-space-xs);
   }
 
   [part='overlay'] {
@@ -26,8 +20,6 @@
     overflow: auto;
     box-sizing: border-box;
     max-height: 100%;
-    width: var(--_vaadin-popover-content-width);
-    height: var(--_vaadin-popover-content-height);
     padding: var(--lumo-space-xs) var(--lumo-space-s);
   }
 
@@ -35,8 +27,10 @@
   [part='overlay']::before {
     position: absolute;
     content: '';
-    inset-block: calc(var(--vaadin-popover-offset-top, 0) * -1) calc(var(--vaadin-popover-offset-bottom, 0) * -1);
-    inset-inline: calc(var(--vaadin-popover-offset-start, 0) * -1) calc(var(--vaadin-popover-offset-end, 0) * -1);
+    inset-block: calc(var(--vaadin-popover-offset-top, var(--_default-offset)) * -1)
+      calc(var(--vaadin-popover-offset-bottom, var(--_default-offset)) * -1);
+    inset-inline: calc(var(--vaadin-popover-offset-start, var(--_default-offset)) * -1)
+      calc(var(--vaadin-popover-offset-end, var(--_default-offset)) * -1);
     z-index: -1;
     pointer-events: auto;
   }
@@ -53,7 +47,7 @@
   }
 
   :host([theme~='arrow']) {
-    --_vaadin-popover-default-offset: calc(var(--lumo-space-s) + var(--vaadin-popover-arrow-size) / 2);
+    --_default-offset: calc(var(--lumo-space-s) + var(--vaadin-popover-arrow-size) / 2);
   }
 
   :host([theme~='arrow']) [part='arrow'] {
@@ -66,22 +60,22 @@
 
   :host([position^='top'][top-aligned]) [part='overlay'],
   :host([position^='bottom'][top-aligned]) [part='overlay'] {
-    margin-top: var(--vaadin-popover-offset-top, 0);
+    margin-top: var(--vaadin-popover-offset-top, var(--_default-offset));
   }
 
   :host([position^='top'][bottom-aligned]) [part='overlay'],
   :host([position^='bottom'][bottom-aligned]) [part='overlay'] {
-    margin-bottom: var(--vaadin-popover-offset-bottom, 0);
+    margin-bottom: var(--vaadin-popover-offset-bottom, var(--_default-offset));
   }
 
   :host([position^='start'][start-aligned]) [part='overlay'],
   :host([position^='end'][start-aligned]) [part='overlay'] {
-    margin-inline-start: var(--vaadin-popover-offset-start, 0);
+    margin-inline-start: var(--vaadin-popover-offset-start, var(--_default-offset));
   }
 
   :host([position^='start'][end-aligned]) [part='overlay'],
   :host([position^='end'][end-aligned]) [part='overlay'] {
-    margin-inline-end: var(--vaadin-popover-offset-end, 0);
+    margin-inline-end: var(--vaadin-popover-offset-end, var(--_default-offset));
   }
 
   /* top / bottom position */

package/src/components/select.css

@@ -10,6 +10,10 @@
     --lumo-input-field-pointer-focus-visible: 0;
   }
 
+  ::slotted(div[slot='overlay']) {
+    display: contents;
+  }
+
   :host(:not([theme*='align'])) ::slotted([slot='value']) {
     text-align: start;
   }

package/src/components/split-layout.css

@@ -7,7 +7,6 @@
   :host {
     display: flex;
     overflow: hidden !important;
-    transform: translateZ(0);
   }
 
   :host([hidden]) {

package/src/components/tooltip-overlay.css

@@ -6,10 +6,7 @@
 
 @media lumo_components_tooltip-overlay {
   :host {
-    --vaadin-tooltip-offset-top: var(--lumo-space-xs);
-    --vaadin-tooltip-offset-bottom: var(--lumo-space-xs);
-    --vaadin-tooltip-offset-start: var(--lumo-space-xs);
-    --vaadin-tooltip-offset-end: var(--lumo-space-xs);
+    --_vaadin-tooltip-default-offset: var(--lumo-space-xs);
   }
 
   [part='overlay'] {
@@ -27,22 +24,22 @@
 
   :host([position^='top'][top-aligned]) [part='overlay'],
   :host([position^='bottom'][top-aligned]) [part='overlay'] {
-    margin-top: var(--vaadin-tooltip-offset-top, 0);
+    margin-top: var(--vaadin-tooltip-offset-top, var(--_vaadin-tooltip-default-offset));
   }
 
   :host([position^='top'][bottom-aligned]) [part='overlay'],
   :host([position^='bottom'][bottom-aligned]) [part='overlay'] {
-    margin-bottom: var(--vaadin-tooltip-offset-bottom, 0);
+    margin-bottom: var(--vaadin-tooltip-offset-bottom, var(--_vaadin-tooltip-default-offset));
   }
 
   :host([position^='start'][start-aligned]) [part='overlay'],
   :host([position^='end'][start-aligned]) [part='overlay'] {
-    margin-inline-start: var(--vaadin-tooltip-offset-start, 0);
+    margin-inline-start: var(--vaadin-tooltip-offset-start, var(--_vaadin-tooltip-default-offset));
   }
 
   :host([position^='start'][end-aligned]) [part='overlay'],
   :host([position^='end'][end-aligned]) [part='overlay'] {
-    margin-inline-end: var(--vaadin-tooltip-offset-end, 0);
+    margin-inline-end: var(--vaadin-tooltip-offset-end, var(--_vaadin-tooltip-default-offset));
   }
 
   @media (forced-colors: active) {

package/src/global/{dark.css → color-scheme.css}

@@ -1,8 +1,14 @@
 /**
  * @license
- * Copyright (c) 2017 - 2025 Vaadin Ltd.
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+:where(:root, :host) {
+  color: var(--lumo-body-text-color);
+  background-color: var(--lumo-base-color);
+  color-scheme: light;
+}
+
 [theme~='dark'] {
   /* Base (background) */
   --lumo-base-color: hsl(214, 35%, 21%);

package/src/mixins/overlay.css

@@ -18,6 +18,14 @@
     align-items: center;
     justify-content: center;
 
+    /* Override native [popover] user agent styles */
+    width: auto;
+    height: auto;
+    border: none;
+    padding: 0;
+    background-color: transparent;
+    overflow: visible;
+
     /* Allow centering when max-width/max-height applies. */
     margin: auto;
 

package/style.d.ts

@@ -1,5 +1,3 @@
 import type { CSSResult } from 'lit';
 
-export const globals: CSSResult;
-
 export const style: CSSResult;

package/style.js

@@ -26,94 +26,6 @@ const style = css`
   }
 `;
 
-/**
- * Default values for component-specific custom properties.
- */
-const globals = css`
-  html {
-    /* Button */
-    --vaadin-button-background: var(--lumo-contrast-5pct);
-    --vaadin-button-border: none;
-    --vaadin-button-border-radius: var(--lumo-border-radius-m);
-    --vaadin-button-font-size: var(--lumo-font-size-m);
-    --vaadin-button-font-weight: 500;
-    --vaadin-button-height: var(--lumo-size-m);
-    --vaadin-button-margin: var(--lumo-space-xs) 0;
-    --vaadin-button-min-width: calc(var(--vaadin-button-height) * 2);
-    --vaadin-button-padding: 0 calc(var(--vaadin-button-height) / 3 + var(--lumo-border-radius-m) / 2);
-    --vaadin-button-text-color: var(--lumo-primary-text-color);
-    --vaadin-button-primary-background: var(--lumo-primary-color);
-    --vaadin-button-primary-border: none;
-    --vaadin-button-primary-font-weight: 600;
-    --vaadin-button-primary-text-color: var(--lumo-primary-contrast-color);
-    --vaadin-button-tertiary-background: transparent !important;
-    --vaadin-button-tertiary-text-color: var(--lumo-primary-text-color);
-    --vaadin-button-tertiary-font-weight: 500;
-    --vaadin-button-tertiary-padding: 0 calc(var(--vaadin-button-height) / 6);
-    /* Checkbox */
-    --vaadin-checkbox-background: var(--lumo-contrast-20pct);
-    --vaadin-checkbox-background-hover: var(--lumo-contrast-30pct);
-    --vaadin-checkbox-border-radius: var(--lumo-border-radius-s);
-    --vaadin-checkbox-checkmark-char: var(--lumo-icons-checkmark);
-    --vaadin-checkbox-checkmark-char-indeterminate: '';
-    --vaadin-checkbox-checkmark-color: var(--lumo-primary-contrast-color);
-    --vaadin-checkbox-checkmark-size: calc(var(--vaadin-checkbox-size) + 2px);
-    --vaadin-checkbox-label-color: var(--lumo-body-text-color);
-    --vaadin-checkbox-label-font-size: var(--lumo-font-size-m);
-    --vaadin-checkbox-label-padding: var(--lumo-space-xs) var(--lumo-space-s) var(--lumo-space-xs) var(--lumo-space-xs);
-    --vaadin-checkbox-size: calc(var(--lumo-size-m) / 2);
-    --vaadin-checkbox-disabled-checkmark-color: var(--lumo-contrast-30pct);
-    --vaadin-checkbox-disabled-background: var(--lumo-contrast-10pct);
-    /* Radio button */
-    --vaadin-radio-button-background: var(--lumo-contrast-20pct);
-    --vaadin-radio-button-background-hover: var(--lumo-contrast-30pct);
-    --vaadin-radio-button-dot-color: var(--lumo-primary-contrast-color);
-    --vaadin-radio-button-dot-size: 3px;
-    --vaadin-radio-button-label-color: var(--lumo-body-text-color);
-    --vaadin-radio-button-label-font-size: var(--lumo-font-size-m);
-    --vaadin-radio-button-label-padding: var(--lumo-space-xs) var(--lumo-space-s) var(--lumo-space-xs)
-      var(--lumo-space-xs);
-    --vaadin-radio-button-size: calc(var(--lumo-size-m) / 2);
-    --vaadin-radio-button-disabled-background: var(--lumo-contrast-10pct);
-    --vaadin-radio-button-disabled-dot-color: var(--lumo-contrast-30pct);
-    --vaadin-selection-color: var(--lumo-primary-color);
-    --vaadin-selection-color-text: var(--lumo-primary-text-color);
-    --vaadin-input-field-border-radius: var(--lumo-border-radius-m);
-    --vaadin-focus-ring-color: var(--lumo-primary-color-50pct);
-    --vaadin-focus-ring-width: 2px;
-    /* Label */
-    --vaadin-input-field-label-color: var(--lumo-secondary-text-color);
-    --vaadin-input-field-focused-label-color: var(--lumo-primary-text-color);
-    --vaadin-input-field-hovered-label-color: var(--lumo-body-text-color);
-    --vaadin-input-field-label-font-size: var(--lumo-font-size-s);
-    --vaadin-input-field-label-font-weight: 500;
-    /* Helper */
-    --vaadin-input-field-helper-color: var(--lumo-secondary-text-color);
-    --vaadin-input-field-helper-font-size: var(--lumo-font-size-xs);
-    --vaadin-input-field-helper-font-weight: 400;
-    --vaadin-input-field-helper-spacing: 0.4em;
-    /* Error message */
-    --vaadin-input-field-error-color: var(--lumo-error-text-color);
-    --vaadin-input-field-error-font-size: var(--lumo-font-size-xs);
-    --vaadin-input-field-error-font-weight: 400;
-    /* Input field */
-    --vaadin-input-field-background: var(--lumo-contrast-10pct);
-    --vaadin-input-field-icon-color: var(--lumo-contrast-60pct);
-    --vaadin-input-field-icon-size: var(--lumo-icon-size-m);
-    --vaadin-input-field-invalid-background: var(--lumo-error-color-10pct);
-    --vaadin-input-field-invalid-hover-highlight: var(--lumo-error-color-50pct);
-    --vaadin-input-field-disabled-background: var(--lumo-contrast-5pct);
-    --vaadin-input-field-disabled-value-color: var(--lumo-disabled-text-color);
-    --vaadin-input-field-height: var(--lumo-size-m);
-    --vaadin-input-field-hover-highlight: var(--lumo-contrast-50pct);
-    --vaadin-input-field-placeholder-color: var(--lumo-secondary-text-color);
-    --vaadin-input-field-readonly-border: 1px dashed var(--lumo-contrast-30pct);
-    --vaadin-input-field-value-color: var(--lumo-body-text-color);
-    --vaadin-input-field-value-font-size: var(--lumo-font-size-m);
-    --vaadin-input-field-value-font-weight: 500;
-  }
-`;
-
 addLumoGlobalStyles('style-props', style);
 
-export { globals, style };
+export { style };

package/src/global/style.css

@@ -1,93 +0,0 @@
-/**
- * @license
- * Copyright (c) 2017 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-:where(:root, :host) {
-  /* Button */
-  --vaadin-button-background: var(--lumo-contrast-5pct);
-  --vaadin-button-border: none;
-  --vaadin-button-border-radius: var(--lumo-border-radius-m);
-  --vaadin-button-font-size: var(--lumo-font-size-m);
-  --vaadin-button-font-weight: 500;
-  --vaadin-button-height: var(--lumo-size-m);
-  --vaadin-button-margin: var(--lumo-space-xs) 0;
-  --vaadin-button-min-width: calc(var(--vaadin-button-height) * 2);
-  --vaadin-button-padding: 0 calc(var(--vaadin-button-height) / 3 + var(--lumo-border-radius-m) / 2);
-  --vaadin-button-text-color: var(--lumo-primary-text-color);
-  --vaadin-button-primary-background: var(--lumo-primary-color);
-  --vaadin-button-primary-border: none;
-  --vaadin-button-primary-font-weight: 600;
-  --vaadin-button-primary-text-color: var(--lumo-primary-contrast-color);
-  --vaadin-button-tertiary-background: transparent !important;
-  --vaadin-button-tertiary-text-color: var(--lumo-primary-text-color);
-  --vaadin-button-tertiary-font-weight: 500;
-  --vaadin-button-tertiary-padding: 0 calc(var(--vaadin-button-height) / 6);
-
-  /* Checkbox */
-  --vaadin-checkbox-background: var(--lumo-contrast-20pct);
-  --vaadin-checkbox-background-hover: var(--lumo-contrast-30pct);
-  --vaadin-checkbox-border-radius: var(--lumo-border-radius-s);
-  --vaadin-checkbox-checkmark-char: var(--lumo-icons-checkmark);
-  --vaadin-checkbox-checkmark-char-indeterminate: '';
-  --vaadin-checkbox-checkmark-color: var(--lumo-primary-contrast-color);
-  --vaadin-checkbox-checkmark-size: calc(var(--vaadin-checkbox-size) + 2px);
-  --vaadin-checkbox-label-color: var(--lumo-body-text-color);
-  --vaadin-checkbox-label-font-size: var(--lumo-font-size-m);
-  --vaadin-checkbox-label-padding: var(--lumo-space-xs) var(--lumo-space-s) var(--lumo-space-xs) var(--lumo-space-xs);
-  --vaadin-checkbox-size: calc(var(--lumo-size-m) / 2);
-  --vaadin-checkbox-disabled-checkmark-color: var(--lumo-contrast-30pct);
-  --vaadin-checkbox-disabled-background: var(--lumo-contrast-10pct);
-
-  /* Radio button */
-  --vaadin-radio-button-background: var(--lumo-contrast-20pct);
-  --vaadin-radio-button-background-hover: var(--lumo-contrast-30pct);
-  --vaadin-radio-button-dot-color: var(--lumo-primary-contrast-color);
-  --vaadin-radio-button-dot-size: 3px;
-  --vaadin-radio-button-label-color: var(--lumo-body-text-color);
-  --vaadin-radio-button-label-font-size: var(--lumo-font-size-m);
-  --vaadin-radio-button-label-padding: var(--lumo-space-xs) var(--lumo-space-s) var(--lumo-space-xs)
-    var(--lumo-space-xs);
-  --vaadin-radio-button-size: calc(var(--lumo-size-m) / 2);
-  --vaadin-radio-button-disabled-background: var(--lumo-contrast-10pct);
-  --vaadin-radio-button-disabled-dot-color: var(--lumo-contrast-30pct);
-  --vaadin-selection-color: var(--lumo-primary-color);
-  --vaadin-selection-color-text: var(--lumo-primary-text-color);
-  --vaadin-input-field-border-radius: var(--lumo-border-radius-m);
-  --vaadin-focus-ring-color: var(--lumo-primary-color-50pct);
-  --vaadin-focus-ring-width: 2px;
-
-  /* Label */
-  --vaadin-input-field-label-color: var(--lumo-secondary-text-color);
-  --vaadin-input-field-focused-label-color: var(--lumo-primary-text-color);
-  --vaadin-input-field-hovered-label-color: var(--lumo-body-text-color);
-  --vaadin-input-field-label-font-size: var(--lumo-font-size-s);
-  --vaadin-input-field-label-font-weight: 500;
-
-  /* Helper */
-  --vaadin-input-field-helper-color: var(--lumo-secondary-text-color);
-  --vaadin-input-field-helper-font-size: var(--lumo-font-size-xs);
-  --vaadin-input-field-helper-font-weight: 400;
-  --vaadin-input-field-helper-spacing: 0.4em;
-
-  /* Error message */
-  --vaadin-input-field-error-color: var(--lumo-error-text-color);
-  --vaadin-input-field-error-font-size: var(--lumo-font-size-xs);
-  --vaadin-input-field-error-font-weight: 400;
-
-  /* Input field */
-  --vaadin-input-field-background: var(--lumo-contrast-10pct);
-  --vaadin-input-field-icon-color: var(--lumo-contrast-60pct);
-  --vaadin-input-field-icon-size: var(--lumo-icon-size-m);
-  --vaadin-input-field-invalid-background: var(--lumo-error-color-10pct);
-  --vaadin-input-field-invalid-hover-highlight: var(--lumo-error-color-50pct);
-  --vaadin-input-field-disabled-background: var(--lumo-contrast-5pct);
-  --vaadin-input-field-disabled-value-color: var(--lumo-disabled-text-color);
-  --vaadin-input-field-height: var(--lumo-size-m);
-  --vaadin-input-field-hover-highlight: var(--lumo-contrast-50pct);
-  --vaadin-input-field-placeholder-color: var(--lumo-secondary-text-color);
-  --vaadin-input-field-readonly-border: 1px dashed var(--lumo-contrast-30pct);
-  --vaadin-input-field-value-color: var(--lumo-body-text-color);
-  --vaadin-input-field-value-font-size: var(--lumo-font-size-m);
-  --vaadin-input-field-value-font-weight: 500;
-}