@vaadin/vaadin-lumo-styles 25.0.0-alpha16 → 25.0.0-alpha18

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;
+    gap: 0 var(--lumo-space-xs);
     --_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'] {
+  :host(:focus-visible) {
     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);
   }
 
   [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/mixins/dashboard-item.css

@@ -6,12 +6,9 @@
 
 @media lumo_mixins_dashboard-item {
   :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);
@@ -32,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 */
@@ -218,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);
   }
@@ -236,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/overlay.css

@@ -38,7 +38,7 @@
     /* CSS API for host */
     --vaadin-overlay-viewport-bottom: 0;
 
-    inset: var(--lumo-space-m) var(--lumo-space-m) var(--lumo-space-m) var(--lumo-space-m);
+    inset: var(--vaadin-overlay-viewport-inset, var(--lumo-space-m));
     /* Workaround for Edge issue (only on Surface), where an overflowing vaadin-list-box inside vaadin-select-overlay makes the overlay transparent */
     /* stylelint-disable-next-line */
     outline: 0px solid transparent;

package/utility.css

@@ -3,7 +3,6 @@
  * Copyright (c) 2000 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-@import './props.css';
 @import './src/utilities/accessibility.css';
 @import './src/utilities/background.css';
 @import './src/utilities/border.css';

package/src/components/upload-file-list.css

@@ -1,24 +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_upload-file-list {
-  :host {
-    display: block;
-  }
-
-  :host([hidden]) {
-    display: none !important;
-  }
-
-  [part='list'] {
-    padding: 0;
-    margin: 0;
-    list-style-type: none;
-  }
-
-  ::slotted(li:not(:first-of-type)) {
-    border-top: 1px solid var(--lumo-contrast-10pct);
-  }
-}