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

package/src/components/split-layout.css

@@ -4,128 +4,50 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 @media lumo_components_split-layout {
-  :host {
-    display: flex;
-    overflow: hidden !important;
-  }
-
-  :host([hidden]) {
-    display: none !important;
-  }
-
-  :host([orientation='vertical']) {
-    flex-direction: column;
-  }
-
-  :host ::slotted(*) {
-    flex: 1 1 auto;
-    overflow: auto;
-  }
-
   [part='splitter'] {
-    flex: none;
-    position: relative;
-    z-index: 1;
-    overflow: visible;
-    min-width: var(--lumo-space-s);
-    min-height: var(--lumo-space-s);
-    background-color: var(--lumo-contrast-5pct);
+    --_splitter-size: var(--vaadin-split-layout-splitter-size, var(--lumo-space-s));
+    --_splitter-target-size: var(--vaadin-split-layout-splitter-target-size, var(--lumo-space-s));
+    --_handle-size: var(--vaadin-split-layout-handle-size, var(--lumo-space-xs));
+    --_handle-target-size: var(--vaadin-split-layout-handle-target-size, var(--lumo-size-m));
+    background: var(--vaadin-split-layout-splitter-background, var(--lumo-contrast-5pct));
     transition: 0.1s background-color;
   }
 
-  :host(:not([orientation='vertical'])) > [part='splitter'] {
-    cursor: ew-resize;
-  }
-
-  :host([orientation='vertical']) > [part='splitter'] {
-    cursor: ns-resize;
-  }
-
   [part='handle'] {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate3d(-50%, -50%, 0);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: var(--lumo-size-m);
-    height: var(--lumo-size-m);
-  }
-
-  [part='handle']::after {
-    content: '';
-    display: block;
-    --_handle-size: 4px;
-    width: var(--_handle-size);
-    height: 100%;
-    max-width: 100%;
-    max-height: 100%;
+    background: var(--vaadin-split-layout-handle-background, var(--lumo-contrast-30pct));
     border-radius: var(--lumo-border-radius-s);
-    background-color: var(--lumo-contrast-30pct);
-    transition:
-      0.1s opacity,
-      0.1s background-color;
-  }
-
-  :host([orientation='vertical']) [part='handle']::after {
-    width: 100%;
-    height: var(--_handle-size);
   }
 
   /* Active style */
-  [part='splitter']:active [part='handle']::after {
-    background-color: var(--lumo-contrast-50pct);
+  [part='splitter']:active [part='handle'] {
+    background: var(--lumo-contrast-50pct);
   }
 
-  /* Small/minimal */
+  /* Small overrides */
   :host([theme~='small']) > [part='splitter'] {
-    border-left: 1px solid var(--lumo-contrast-10pct);
-    border-top: 1px solid var(--lumo-contrast-10pct);
-  }
-
-  :host(:is([theme~='small'], [theme~='minimal'])) > [part='splitter'] {
-    min-width: 0;
-    min-height: 0;
-    background-color: transparent;
-  }
-
-  :host(:is([theme~='small'], [theme~='minimal'])) > [part='splitter']::after {
-    content: '';
-    position: absolute;
-    inset: -4px;
+    --vaadin-split-layout-handle-size: 5px;
+    background: var(--lumo-contrast-10pct);
   }
 
-  :host(:is([theme~='small'], [theme~='minimal'])) > [part='splitter'] > [part='handle'] {
-    left: calc(50% - 0.5px);
-    top: calc(50% - 0.5px);
+  /* Minimal */
+  :host([theme~='minimal']) > [part='splitter'] {
+    --vaadin-split-layout-splitter-size: 0px;
+    --vaadin-split-layout-handle-size: 5px;
+    --vaadin-split-layout-splitter-target-size: 5px;
   }
 
-  :host(:is([theme~='small'], [theme~='minimal'])) > [part='splitter'] > [part='handle']::after {
+  :host([theme~='minimal']) > [part='splitter'] > [part='handle'] {
     opacity: 0;
-    --_handle-size: 5px;
   }
 
-  :host(:is([theme~='small'], [theme~='minimal'])) > [part='splitter']:hover > [part='handle']::after,
-  :host(:is([theme~='small'], [theme~='minimal'])) > [part='splitter']:active > [part='handle']::after {
+  :host([theme~='minimal']) > [part='splitter']:is(:hover, :active) > [part='handle'] {
     opacity: 1;
   }
 
   /* Hover style */
   @media (any-hover: hover) {
-    [part='splitter']:hover [part='handle']::after {
+    [part='splitter']:hover [part='handle'] {
       background-color: var(--lumo-contrast-40pct);
     }
   }
-
-  @media (forced-colors: active) {
-    [part~='splitter'] {
-      outline: 1px solid;
-    }
-
-    [part~='handle']::after {
-      background-color: AccentColor !important;
-      forced-color-adjust: none;
-    }
-  }
 }

package/src/components/tabsheet.css

@@ -33,6 +33,10 @@
     margin: calc(var(--lumo-space-xs) * -1) calc(var(--lumo-space-s) * -1);
   }
 
+  ::slotted([hidden]) {
+    display: none !important;
+  }
+
   [part='content'] {
     position: relative;
     flex: 1;
@@ -54,6 +58,6 @@
   }
 
   :host([theme~='no-padding']) [part='content'] {
-    padding: 0;
+    padding: 0 !important;
   }
 }

package/src/components/text-area.css

@@ -99,14 +99,14 @@
 
   /* Use sticky positioning to keep prefix/suffix/clear button visible when scrolling textarea container */
   [part='input-field'] ::slotted([slot$='fix']),
-  [part='clear-button'] {
+  [part~='clear-button'] {
     position: sticky;
     top: 0;
     align-self: flex-start;
   }
 
   [part='input-field'] ::slotted(vaadin-icon[slot$='fix']),
-  [part='clear-button'] {
+  [part~='clear-button'] {
     /* Vertically align icon prefix/suffix/clear button with the first line of text */
     top: calc((var(--lumo-icon-size-m) - 1em * var(--lumo-line-height-s)) / -2);
     margin-top: calc((var(--lumo-icon-size-m) - 1em * var(--lumo-line-height-s)) / -2);

package/src/components/time-picker.css

@@ -12,7 +12,7 @@
     cursor: pointer;
   }
 
-  [part='toggle-button']::before {
+  [part~='toggle-button']::before {
     content: var(--lumo-icons-clock);
   }
 

package/src/components/tooltip-overlay.css

@@ -18,10 +18,13 @@
   }
 
   [part='content'] {
-    white-space: pre-wrap;
     padding: var(--lumo-space-xs) var(--lumo-space-s);
   }
 
+  :host(:not([markdown])) [part='content'] {
+    white-space: pre-wrap;
+  }
+
   :host([position^='top'][top-aligned]) [part='overlay'],
   :host([position^='bottom'][top-aligned]) [part='overlay'] {
     margin-top: var(--vaadin-tooltip-offset-top, var(--_vaadin-tooltip-default-offset));

package/src/components/upload-file.css

@@ -5,39 +5,16 @@
  */
 @media lumo_components_upload-file {
   :host {
-    display: block;
-    padding: var(--lumo-space-s) 0;
-    outline: none;
+    padding: var(--vaadin-upload-file-padding, var(--lumo-space-s) 0);
+    gap: var(--vaadin-upload-file-gap, 0 var(--lumo-space-xs));
+    border-radius: var(--vaadin-upload-file-border-radius, var(--lumo-border-radius-s));
     --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
     --_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
   }
 
-  [hidden] {
-    display: none;
-  }
-
-  [part='row'] {
-    list-style-type: none;
-    display: flex;
-    align-items: baseline;
-    justify-content: space-between;
-  }
-
-  button {
-    background: transparent;
-    padding: 0;
-    border: none;
-    box-shadow: none;
-  }
-
-  :host([complete]) ::slotted([slot='progress']),
-  :host([error]) ::slotted([slot='progress']) {
-    display: none !important;
-  }
-
-  :host([focus-ring]) [part='row'] {
-    border-radius: var(--lumo-border-radius-s);
-    box-shadow: 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
+  :host(:focus-visible) {
+    outline: var(--_focus-ring-width) solid var(--_focus-ring-color);
+    outline-offset: calc(var(--_focus-ring-width) * -1);
   }
 
   [part='status'],
@@ -46,57 +23,48 @@
     font-size: var(--lumo-font-size-s);
   }
 
-  [part='info'] {
-    display: flex;
-    align-items: baseline;
-    flex: auto;
-  }
-
-  [part='meta'] {
-    width: 0.001px;
-    flex: 1 1 auto;
-  }
-
   [part='name'] {
+    color: var(--lumo-body-text-color);
     white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
   }
 
   [part='commands'] {
-    display: flex;
-    align-items: baseline;
-    flex: none;
+    align-self: start;
   }
 
   [part$='icon'] {
-    margin-right: var(--lumo-space-xs);
     font-size: var(--lumo-icon-size-m);
     font-family: 'lumo-icons';
     line-height: 1;
-  }
-
-  /* When both icons are hidden, let us keep space for one */
-  [part='done-icon'][hidden] + [part='warning-icon'][hidden] {
-    display: block !important;
-    visibility: hidden;
+    align-self: start;
   }
 
   [part$='button'] {
-    flex: none;
-    margin-left: var(--lumo-space-xs);
+    border: none;
+    box-shadow: none;
+    outline: none;
+    padding: 0;
+    border-radius: var(--lumo-border-radius-s);
     cursor: var(--lumo-clickable-cursor);
   }
 
   [part$='button']:focus {
-    outline: none;
-    border-radius: var(--lumo-border-radius-s);
-    box-shadow: 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
+    outline: var(--_focus-ring-width) solid var(--_focus-ring-color);
+    outline-offset: calc(var(--_focus-ring-width) * -1);
+  }
+
+  /* Vertically align icons / buttons with the first line of text */
+  [part$='icon'],
+  [part$='button'] {
+    margin-top: calc((1em * var(--lumo-line-height-m) - var(--lumo-icon-size-m)) / 2);
   }
 
   [part$='icon']::before,
   [part$='button']::before {
-    vertical-align: -0.25em;
+    background: transparent;
+    mask-image: none;
+    width: auto;
+    height: auto;
   }
 
   [part='done-icon']::before {
@@ -126,8 +94,6 @@
   }
 
   ::slotted([slot='progress']) {
-    width: auto;
-    margin-left: calc(var(--lumo-icon-size-m) + var(--lumo-space-xs));
-    margin-right: calc(var(--lumo-icon-size-m) + var(--lumo-space-xs));
+    margin-inline-end: calc(var(--lumo-icon-size-m) + var(--lumo-space-xs));
   }
 }

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/global/color-scheme.css

@@ -3,7 +3,8 @@
  * 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) {
+:where(:root),
+:where(:host) {
   color: var(--lumo-body-text-color);
   background-color: var(--lumo-base-color);
   color-scheme: light;

package/{user-colors.d.ts → src/global/index.css}

@@ -3,6 +3,6 @@
  * Copyright (c) 2017 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import type { CSSResult } from 'lit';
-
-export const userColors: CSSResult;
+@import './badge.css';
+@import './color-scheme.css';
+@import './typography.css';

package/src/global/typography.css

@@ -3,7 +3,8 @@
  * Copyright (c) 2017 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-:where(body, :host) {
+:where(body),
+:where(:host) {
   font-family: var(--lumo-font-family);
   font-size: var(--lumo-font-size-m);
   line-height: var(--lumo-line-height-m);

package/src/mixins/dashboard-item.css

@@ -5,14 +5,10 @@
  */
 
 @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));
     --_widget-border-radius: var(--vaadin-dashboard-widget-border-radius, var(--lumo-border-radius-l));
-    --_widget-border-width: var(--vaadin-dashboard-widget-border-width, 1px);
     --_widget-border-color: var(--vaadin-dashboard-widget-border-color, var(--lumo-contrast-20pct));
-    --_widget-shadow: var(--vaadin-dashboard-widget-shadow, 0 0 0 0 transparent);
     --_widget-editable-shadow: var(--lumo-box-shadow-s);
     --_widget-selected-shadow:
       0 2px 4px -1px var(--lumo-primary-color-10pct), 0 3px 12px -1px var(--lumo-primary-color-50pct);
@@ -33,166 +29,40 @@
     filter: var(--_widget-filter);
   }
 
-  :host([dragging]) * {
-    visibility: hidden;
-  }
-
-  :host(:not([editable])) [part~='move-button'],
-  :host(:not([editable])) [part~='remove-button'],
-  :host(:not([editable])) #focus-button,
-  :host(:not([editable])) #focus-button-wrapper,
-  :host(:not([editable])) .mode-controls {
-    display: none;
-  }
-
-  #focustrap {
-    display: contents;
-  }
-
-  #focus-button-wrapper,
-  #focus-button {
-    position: absolute;
-    inset: 0;
-    opacity: 0;
-  }
-
-  #focus-button {
-    pointer-events: none;
-    padding: 0;
-    border: none;
-  }
-
-  .mode-controls {
-    position: absolute;
-    inset: 0;
-    z-index: 2;
-  }
-
-  .mode-controls[hidden] {
-    display: none;
-  }
-
-  /* Move-mode buttons */
-  [part~='move-backward-button'],
-  [part~='move-forward-button'],
   [part~='move-apply-button'] {
-    position: absolute;
-    top: 50%;
-  }
-
-  [part~='move-backward-button'] {
-    inset-inline-start: 0;
-    transform: translateY(-50%);
-  }
-
-  [part~='move-forward-button'] {
-    inset-inline-end: 0;
-    transform: translateY(-50%);
-  }
-
-  [part~='move-apply-button'] {
-    left: 50%;
-    transform: translate(-50%, -50%);
     --icon: var(--lumo-icons-checkmark);
     font-size: var(--lumo-icon-size-m);
   }
 
-  :host([first-child]) [part~='move-backward-button'],
-  :host([last-child]) [part~='move-forward-button'] {
-    display: none;
-  }
-
-  /* Resize-mode buttons */
-  [part~='resize-shrink-width-button'],
-  [part~='resize-shrink-height-button'],
-  [part~='resize-grow-width-button'],
-  [part~='resize-grow-height-button'],
-  [part~='resize-apply-button'] {
-    position: absolute;
-  }
-
-  [part~='resize-shrink-width-button'] {
-    inset-inline-end: 0;
-    top: 50%;
-  }
-
-  :host(:not([dir='rtl'])) [part~='resize-shrink-width-button'] {
-    transform: translateY(-50%) translateX(-100%);
-  }
-
-  :host([dir='rtl']) [part~='resize-shrink-width-button'] {
-    transform: translateY(-50%) translateX(100%);
-  }
-
-  .mode-controls:has([part~='resize-grow-width-button'][hidden]) [part~='resize-shrink-width-button'] {
-    transform: translateY(-50%);
-  }
-
-  [part~='resize-grow-width-button'] {
-    inset-inline-start: 100%;
-    top: 50%;
-  }
-
-  :host(:not([dir='rtl'])) [part~='resize-grow-width-button'] {
-    transform: translateY(-50%) translateX(-100%);
-  }
-
-  :host([dir='rtl']) [part~='resize-grow-width-button'] {
-    transform: translateY(-50%) translateX(100%);
-  }
-
-  [part~='resize-shrink-height-button'] {
-    bottom: 0;
-    left: 50%;
-    transform: translateX(-50%) translateY(-100%);
-  }
-
-  [part~='resize-grow-height-button'] {
-    top: 100%;
-    left: 50%;
-    transform: translateX(-50%) translateY(-100%);
-  }
-
-  [part~='resize-apply-button'] {
-    left: 50%;
-    top: 50%;
-
-    transform: translate(-50%, -50%);
-  }
-
   :host([focused]) {
-    z-index: 1;
+    outline: none;
   }
 
   header {
     overflow: hidden;
-    display: flex;
     align-items: start;
-    box-sizing: border-box;
-    justify-content: space-between;
+    gap: 0;
   }
 
   [part='title'] {
-    flex: 1;
     color: var(--lumo-header-text-color);
-    white-space: var(--vaadin-dashboard-widget-title-wrap, wrap);
-    text-overflow: ellipsis;
-    overflow: hidden;
     line-height: var(--lumo-line-height-s);
     margin: 0 0 1px;
-    align-self: safe center;
   }
 
   vaadin-dashboard-button {
     font-family: 'lumo-icons';
     font-size: var(--lumo-icon-size-m);
     margin: 0;
-    z-index: 1;
   }
 
   vaadin-dashboard-button .icon::before {
     display: block;
     content: var(--icon);
+    background: transparent;
+    mask-image: none;
+    width: auto;
+    height: auto;
   }
 
   /* Common styles for non-mode edit buttons */
@@ -219,13 +89,11 @@
 
   /* Drag handle */
   [part~='move-button'] {
-    cursor: move;
     --icon: var(--lumo-icons-drag-handle);
   }
 
   /* Remove button */
   [part~='remove-button'] {
-    cursor: pointer;
     --icon: var(--lumo-icons-cross);
     margin-inline-start: var(--lumo-space-xs);
   }
@@ -237,17 +105,17 @@
 
   /* Move mode */
 
+  :host([move-mode]) :is([part~='move-forward-button'], [part~='move-backward-button']) .icon {
+    rotate: none;
+  }
+
   :host(:not([dir='rtl'])) [part~='move-backward-button'],
   :host([dir='rtl']) [part~='move-forward-button'] {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
     --icon: var(--lumo-icons-angle-left);
   }
 
   :host(:not([dir='rtl'])) [part~='move-forward-button'],
   :host([dir='rtl']) [part~='move-backward-button'] {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
     --icon: var(--lumo-icons-angle-right);
   }
 }

package/src/mixins/field-base.css

@@ -166,7 +166,7 @@
     font-weight: 400;
   }
 
-  [part='clear-button']::before {
+  [part~='clear-button']::before {
     content: var(--lumo-icons-cross);
   }
 

package/src/mixins/field-button.css

@@ -31,16 +31,16 @@
     display: block;
   }
 
-  [part='clear-button'] {
+  [part~='clear-button'] {
     display: none;
     cursor: default;
   }
 
-  [part='clear-button']::before {
+  [part~='clear-button']::before {
     content: '\2715';
   }
 
-  :host([clear-button-visible][has-value]:not([disabled]):not([readonly])) [part='clear-button'] {
+  :host([clear-button-visible][has-value]:not([disabled]):not([readonly])) [part~='clear-button'] {
     display: block;
   }
 }