@vaadin/vaadin-lumo-styles 25.3.0-dev.3a3c2d7d2a → 25.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/vaadin-lumo-styles",
-  "version": "25.3.0-dev.3a3c2d7d2a",
+  "version": "25.3.0",
   "publishConfig": {
     "access": "public"
   },
@@ -42,9 +42,9 @@
     "web-component"
   ],
   "dependencies": {
-    "@vaadin/component-base": "25.3.0-dev.3a3c2d7d2a",
-    "@vaadin/icon": "25.3.0-dev.3a3c2d7d2a",
-    "@vaadin/vaadin-themable-mixin": "25.3.0-dev.3a3c2d7d2a"
+    "@vaadin/component-base": "~25.3.0",
+    "@vaadin/icon": "~25.3.0",
+    "@vaadin/vaadin-themable-mixin": "~25.3.0"
   },
   "devDependencies": {
     "cssnano": "^7.1.1",
@@ -52,5 +52,5 @@
     "postcss-cli": "^11.0.1",
     "postcss-import": "^16.1.1"
   },
-  "gitHead": "ac506ca7800c23e05da55863c56bcedf12812d37"
+  "gitHead": "4133747243c03bf544f6e82cc2ec9f295aaccd65"
 }

package/src/components/ai-field-marker.css

@@ -0,0 +1,21 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2026 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+vaadin-ai-field-marker :is(.badge, .actions > button):focus-visible {
+  outline: var(--vaadin-focus-ring-width, 2px) solid var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
+}
+
+[has-label] > vaadin-ai-field-marker {
+  &::before,
+  .badge {
+    top: calc(var(--lumo-space-m) - 6px);
+  }
+}
+
+:has(> vaadin-ai-field-marker) {
+  --vaadin-ai-field-marker-confidence-low-color: var(--lumo-error-text-color);
+  --vaadin-ai-field-marker-confidence-medium-color: var(--lumo-warning-text-color);
+  --vaadin-ai-field-marker-confidence-high-color: var(--lumo-success-text-color);
+}

package/src/components/badge.css

@@ -5,8 +5,8 @@
  */
 @media lumo_components_badge {
   :host {
-    border-width: var(--vaadin-badge-border-width, 0);
     background: var(--vaadin-badge-background, var(--lumo-primary-color-10pct));
+    border-color: var(--vaadin-badge-border-color, transparent);
     color: var(--vaadin-badge-text-color, var(--lumo-primary-text-color));
     font-family: var(--vaadin-badge-font-family, var(--lumo-font-family));
     font-size: var(--vaadin-badge-font-size, var(--lumo-font-size-s));

package/src/components/dashboard-widget.css

@@ -39,9 +39,6 @@
 
   #content {
     min-height: var(--lumo-size-m);
-    padding-inline: var(--vaadin-dashboard-widget-padding, 0);
-    padding-bottom: var(--vaadin-dashboard-widget-padding, 0);
-    padding-top: 0;
     border-radius: inherit;
     border-top-left-radius: 0;
     border-top-right-radius: 0;

package/src/components/date-picker-month-calendar.css

@@ -5,30 +5,16 @@
  */
 @media lumo_components_date-picker-month-calendar {
   :host {
-    display: block;
-    -webkit-user-select: none;
-    -webkit-tap-highlight-color: transparent;
-    user-select: none;
     font-size: var(--lumo-font-size-m);
     color: var(--lumo-body-text-color);
     text-align: center;
-    padding: 0 var(--lumo-space-xs);
+    padding: var(--vaadin-date-picker-month-padding, 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);
     --_selection-color: var(--vaadin-selection-color, var(--lumo-primary-color));
     --_selection-color-text: var(--vaadin-selection-color-text, var(--lumo-primary-text-color));
   }
 
-  #monthGrid {
-    width: 100%;
-    border-collapse: collapse;
-  }
-
-  #days-container tr,
-  #weekdays-container tr {
-    display: flex;
-  }
-
   [part~='disabled'] {
     pointer-events: none;
   }
@@ -36,53 +22,45 @@
   /* Month header */
 
   [part='month-header'] {
-    color: var(--lumo-header-text-color);
-    font-size: var(--lumo-font-size-l);
-    line-height: 1;
-    font-weight: 500;
+    color: var(--vaadin-date-picker-month-header-color, var(--lumo-header-text-color));
+    font-size: var(--vaadin-date-picker-month-header-font-size, var(--lumo-font-size-l));
     margin-bottom: var(--lumo-space-m);
   }
 
   /* Week days and numbers */
 
-  [part='weekdays'],
-  [part='weekday'],
-  [part='week-number'] {
-    font-size: var(--lumo-font-size-xxs);
+  [part~='weekday'] {
+    color: var(--vaadin-date-picker-weekday-color, var(--lumo-secondary-text-color));
+    font-size: var(--vaadin-date-picker-weekday-font-size, var(--lumo-font-size-xxs));
+    font-weight: var(--vaadin-date-picker-weekday-font-weight, normal);
     line-height: 1;
-    color: var(--lumo-secondary-text-color);
-  }
-
-  [part='weekdays'] {
     margin-bottom: var(--lumo-space-s);
   }
 
-  [part='weekday']:empty,
-  [part='week-number'] {
-    flex-shrink: 0;
-    padding: 0;
-    width: var(--lumo-size-xs);
+  :host([week-numbers]) table {
+    grid-template-columns: var(--lumo-size-xs) repeat(7, 1fr);
   }
 
-  [part='week-number'][hidden],
-  [part='weekday'][hidden] {
-    display: none;
+  :host([week-numbers]) [part~='weekday']:empty {
+    display: flex;
   }
 
-  /* Date and week number cells */
+  [part~='week-number'] {
+    color: var(--vaadin-date-picker-week-number-color, var(--lumo-secondary-text-color));
+    font-size: var(--vaadin-date-picker-week-number-font-size, var(--lumo-font-size-xxs));
+    grid-column: auto;
+    margin: 0;
+  }
 
-  [part~='date'],
-  [part='week-number'] {
-    box-sizing: border-box;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    height: var(--lumo-size-m);
-    position: relative;
+  [part~='week-number']::after {
+    display: none;
   }
 
+  /* Date cells */
+
   [part~='date'] {
-    outline: none;
+    border-radius: var(--vaadin-date-picker-date-border-radius, var(--lumo-border-radius-m));
+    height: var(--vaadin-date-picker-date-height, var(--lumo-size-m));
     transition: color 0.1s;
   }
 
@@ -90,49 +68,41 @@
     cursor: var(--lumo-clickable-cursor);
   }
 
-  [part='weekday'],
-  [part~='date'] {
-    width: calc(100% / 7);
-    padding: 0;
-    font-weight: normal;
-  }
-
-  :host([week-numbers]) [part='weekday']:not(:empty),
-  :host([week-numbers]) [part~='date'] {
-    width: calc((100% - var(--lumo-size-xs)) / 7);
+  [part~='today'] {
+    color: var(--vaadin-date-picker-date-today-color, var(--_selection-color-text));
   }
 
-  /* Today date */
-
-  [part~='date'][part~='today'] {
-    color: var(--_selection-color-text);
+  [part~='selected'] {
+    color: var(--vaadin-date-picker-date-selected-color, var(--lumo-primary-contrast-color));
   }
 
-  /* Focused date */
+  /* Selection, hover and focus indicator */
 
-  [part~='date']::before {
-    content: '';
-    position: absolute;
-    z-index: -1;
+  [part~='date']::after {
     top: 50%;
     left: 50%;
-    transform: translate(-50%, -50%);
-    min-width: 2em;
-    min-height: 2em;
+    translate: -50% -50%;
     width: 80%;
     height: 80%;
-    max-height: 100%;
+    min-width: 2em;
+    min-height: 2em;
     max-width: 100%;
-    border-radius: var(--lumo-border-radius-m);
+    max-height: 100%;
+    aspect-ratio: auto;
+    outline: none;
+  }
+
+  [part~='selected']::after {
+    background: var(--vaadin-date-picker-date-selected-background, var(--_selection-color));
   }
 
-  [part~='date'][part~='focused']::before {
+  [part~='date'][part~='focused']::after {
     box-shadow:
       0 0 0 1px var(--lumo-base-color),
       0 0 0 calc(var(--_focus-ring-width) + 1px) var(--_focus-ring-color);
   }
 
-  :host(:not([focused])) [part~='date'][part~='focused']::before {
+  :host(:not([focused])) [part~='date'][part~='focused']::after {
     animation: vaadin-date-picker-month-calendar-focus-date 1.4s infinite;
   }
 
@@ -144,38 +114,32 @@
     }
   }
 
-  [part~='date']:not(:empty):not([part~='disabled']):not([part~='selected']):hover::before {
+  [part~='date']:not(:empty):not([part~='disabled']):not([part~='selected']):hover::after {
     background-color: var(--lumo-primary-color-10pct);
   }
 
-  [part~='date'][part~='selected'] {
-    color: var(--lumo-primary-contrast-color);
-  }
-
-  [part~='date'][part~='selected']::before {
-    background-color: var(--_selection-color);
-  }
-
-  [part~='date'][part~='disabled'] {
-    color: var(--lumo-disabled-text-color);
-  }
-
   @media (pointer: coarse) {
-    [part~='date']:hover:not([part~='selected'])::before,
-    :host(:not([focus-ring])) [part~='focused']:not([part~='selected'])::before {
+    [part~='date']:hover:not([part~='selected'])::after,
+    :host(:not([focus-ring])) [part~='focused']:not([part~='selected'])::after {
       display: none;
     }
 
-    [part~='date']:not(:empty):not([part~='disabled']):active::before {
+    [part~='date']:not(:empty):not([part~='disabled']):active::after {
       display: block;
     }
 
-    :host(:not([focus-ring])) [part~='date'][part~='selected']::before {
+    :host(:not([focus-ring])) [part~='date'][part~='selected']::after {
       box-shadow: none;
     }
   }
+
   /* Disabled */
 
+  [disabled] {
+    color: var(--vaadin-date-picker-date-disabled-color, var(--lumo-disabled-text-color));
+    opacity: 1;
+  }
+
   :host([disabled]) * {
     color: var(--lumo-disabled-text-color) !important;
   }

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

@@ -27,9 +27,9 @@
     /* prettier-ignore */
     --vaadin-infinite-scroller-item-height:
       calc(
-          var(--lumo-font-size-l) + var(--lumo-space-m)
-        + var(--lumo-font-size-xs) + var(--lumo-space-s)
-        + var(--lumo-size-m) * 6
+          var(--vaadin-date-picker-month-header-font-size, var(--lumo-font-size-l)) + var(--lumo-space-m)
+        + var(--vaadin-date-picker-weekday-font-size, var(--lumo-font-size-xs)) + var(--lumo-space-s)
+        + var(--vaadin-date-picker-date-height, var(--lumo-size-m)) * 6
         + var(--lumo-space-s)
       );
     --vaadin-infinite-scroller-buffer-offset: 10%;

package/src/components/form-item.css

@@ -14,23 +14,15 @@
     margin-left: calc(var(--lumo-border-radius-m) / 4);
     margin-bottom: var(--lumo-space-xs);
     line-height: 1.333;
+    min-height: 1lh;
   }
 
   [part='required-indicator']::after {
     content: var(--vaadin-input-field-required-indicator, var(--lumo-required-field-indicator, '\2022'));
-    transition: opacity 0.2s;
-    opacity: 0;
     color: var(
       --vaadin-input-field-required-indicator-color,
       var(--lumo-required-field-indicator-color, var(--lumo-primary-text-color))
     );
-    position: relative;
-    width: 1em;
-    text-align: center;
-  }
-
-  :host([required]) [part='required-indicator']::after {
-    opacity: 1;
   }
 
   :host([invalid]) [part='required-indicator']::after {

package/src/components/grid-tree-toggle.css

@@ -29,7 +29,7 @@
 
   #level-spacer {
     display: inline-block;
-    width: calc(var(--_level, '0') * var(--vaadin-grid-tree-toggle-level-offset));
+    width: calc(var(--_level, 0) * var(--vaadin-grid-tree-toggle-level-offset));
   }
 
   [part='toggle']::before {

package/src/components/grid.css

@@ -415,6 +415,14 @@
   }
 
   /* Drag and Drop styles */
+
+  /* Draggable cell content; see _filterDragAndDrop in vaadin-grid-drag-and-drop-mixin.js. */
+  ::slotted(vaadin-grid-cell-content[draggable-source]) {
+    -webkit-user-drag: element;
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
   :host([dragover])::after {
     content: '';
     position: absolute;

package/src/components/input-container.css

@@ -135,7 +135,7 @@
 
   /* Invalid */
   :host([invalid]) {
-    background: var(--_invalid-background);
+    --vaadin-input-field-background: var(--_invalid-background);
   }
 
   :host([invalid]:not([readonly]))::after {

package/src/components/message-input.css

@@ -8,6 +8,7 @@
     align-items: flex-start;
     box-sizing: border-box;
     display: flex;
+    flex-wrap: wrap;
     max-height: 50vh;
     overflow: hidden;
     flex-shrink: 0;
@@ -27,4 +28,13 @@
     flex-grow: 1;
     margin-inline-end: var(--lumo-space-s);
   }
+
+  :host([has-prefix]) ::slotted([slot='textarea']) {
+    margin-inline-start: var(--lumo-space-s);
+  }
+
+  ::slotted([slot='header']),
+  ::slotted([slot='footer']) {
+    width: 100%;
+  }
 }

package/src/components/notification-container.css

@@ -39,7 +39,7 @@
     flex: 1 1 0%;
   }
 
-  @media (max-width: 420px) {
+  @media (max-width: 450px) {
     [region-group] {
       flex-direction: column;
       align-items: stretch;

package/src/components/select.css

@@ -57,17 +57,4 @@
     --_lumo-selected-item-height: var(--lumo-size-s);
     --_lumo-selected-item-padding: 0;
   }
-
-  .sr-only {
-    border: 0 !important;
-    clip: rect(1px, 1px, 1px, 1px) !important;
-    clip-path: inset(50%) !important;
-    height: 1px !important;
-    margin: -1px !important;
-    overflow: hidden !important;
-    padding: 0 !important;
-    position: absolute !important;
-    width: 1px !important;
-    white-space: nowrap !important;
-  }
 }

package/src/components/side-nav-item.css

@@ -167,17 +167,4 @@
     color: var(--vaadin-selection-color-text, var(--lumo-primary-text-color));
     border-radius: var(--lumo-border-radius-m);
   }
-
-  .sr-only {
-    border: 0 !important;
-    clip: rect(1px, 1px, 1px, 1px) !important;
-    clip-path: inset(50%) !important;
-    height: 1px !important;
-    margin: -1px !important;
-    overflow: hidden !important;
-    padding: 0 !important;
-    position: absolute !important;
-    width: 1px !important;
-    white-space: nowrap !important;
-  }
 }

package/src/components/switch.css

@@ -0,0 +1,174 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2026 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+@media lumo_components_switch {
+  :host {
+    --_switch-height: var(--vaadin-switch-height, calc(var(--lumo-size-m) / 2));
+    --_marker-height: var(--vaadin-switch-marker-height, round(var(--lumo-size-m) / 2 - 4px, 2px));
+    --_cursor: var(--lumo-clickable-cursor);
+  }
+
+  :host::before {
+    display: none;
+  }
+
+  [part='switch'] {
+    width: var(--_switch-width);
+    height: var(--_switch-height);
+    box-shadow: none;
+    background: var(--vaadin-switch-background, light-dark(var(--lumo-contrast-50pct), var(--lumo-contrast-40pct)));
+    border-color: var(--vaadin-switch-border-color, transparent);
+
+    &::before {
+      position: absolute;
+      transform: scaleX(1.4) scaleY(1.7);
+    }
+  }
+
+  [part='marker'] {
+    background: var(--vaadin-switch-marker-color, var(--lumo-tint));
+    color: var(--vaadin-switch-icon-color, var(--lumo-shade-60pct));
+    scale: var(--vaadin-switch-marker-scale, 1);
+  }
+
+  :host(:not([disabled], [readonly])) [part='marker'] {
+    box-shadow: var(--lumo-box-shadow-xs);
+  }
+
+  ::slotted(label) {
+    color: var(--vaadin-switch-label-color, var(--lumo-body-text-color));
+    font-size: var(--vaadin-switch-label-font-size, var(--lumo-font-size-m));
+    font-weight: var(--vaadin-switch-label-font-weight, var(--vaadin-input-field-label-font-weight, 400));
+  }
+
+  :host([required]) [part='label'] {
+    display: flex;
+    position: relative;
+    max-width: max-content;
+    padding-inline-end: 0;
+  }
+
+  :host([has-label]) ::slotted(label) {
+    padding: var(
+      --vaadin-switch-label-padding,
+      var(--lumo-space-xs) var(--lumo-space-s) var(--lumo-space-xs) var(--lumo-space-xs)
+    );
+  }
+
+  :host([dir='rtl'][has-label]) ::slotted(label) {
+    padding: var(--lumo-space-xs) var(--lumo-space-xs) var(--lumo-space-xs) var(--lumo-space-s);
+  }
+
+  :host([has-label][required]) ::slotted(label) {
+    padding-inline-end: var(--lumo-space-m);
+  }
+
+  :host([required]) [part='required-indicator'] {
+    width: auto;
+    top: var(--lumo-space-xs);
+    right: var(--lumo-space-xs);
+
+    &::after {
+      position: static;
+    }
+  }
+
+  :host([required][dir='rtl']) [part='required-indicator'] {
+    right: auto;
+    left: var(--lumo-space-xs);
+  }
+
+  [part='helper-text'] {
+    padding-inline-start: var(--lumo-space-xs);
+    margin-top: 0;
+  }
+
+  :host([has-helper]) [part='helper-text']::before,
+  :host([has-error-message]) [part='error-message']::before {
+    display: none;
+  }
+
+  :host([has-helper]) [part='helper-text']::after {
+    content: '';
+    display: block;
+    height: 0.4em;
+  }
+
+  :host([has-error-message]) ::slotted(label),
+  :host([has-helper]) ::slotted(label) {
+    padding-bottom: 0;
+  }
+
+  [part='error-message'] {
+    display: block;
+    margin: 0;
+    padding-inline-start: var(--lumo-space-xs);
+
+    &::before {
+      background: transparent;
+    }
+  }
+
+  :host([checked]) {
+    --vaadin-switch-background: var(--lumo-primary-color);
+    --vaadin-switch-marker-color: var(--lumo-primary-contrast-color);
+    --vaadin-switch-icon-color: var(--lumo-primary-color);
+  }
+
+  :host([disabled]) {
+    --vaadin-switch-background: var(--lumo-contrast-10pct);
+    --vaadin-switch-marker-color: var(--lumo-tint-30pct);
+    --vaadin-switch-border-color: transparent;
+    --vaadin-switch-icon-color: var(--lumo-shade-10pct);
+  }
+
+  :host([disabled][checked]) {
+    --vaadin-switch-background: var(--lumo-primary-color-10pct);
+    --vaadin-switch-marker-color: var(--lumo-tint-30pct);
+    --vaadin-switch-icon-color: color-mix(in srgb, var(--lumo-primary-color) 10%, var(--lumo-base-color) 50%);
+  }
+
+  :host([readonly]) {
+    --vaadin-switch-marker-color: var(--lumo-contrast-50pct);
+    --vaadin-switch-marker-scale: 0.8;
+    --_border-style: solid;
+  }
+
+  :host([readonly][checked]) {
+    --vaadin-switch-background: transparent;
+    --_border-style: solid;
+    --vaadin-switch-border-color: var(--lumo-contrast-50pct);
+    --vaadin-switch-marker-color: var(--lumo-secondary-text-color);
+    --vaadin-switch-icon-color: var(--lumo-base-color);
+  }
+
+  :host([invalid]) {
+    --vaadin-switch-background: var(--vaadin-input-field-invalid-background, var(--lumo-error-color-50pct));
+    --_focus-ring-color: var(--lumo-error-color-50pct);
+  }
+
+  /* Active */
+  :host([active]) [part='switch'] {
+    transform: scale(0.95);
+    transition-duration: 0.05s;
+  }
+
+  :host([active]:not([checked])) [part='switch']::before {
+    transition-duration: 0.01s, 0.01s;
+    transform: scale(0);
+    opacity: 0.4;
+  }
+
+  /* Focus ring */
+  :host([focus-ring]) [part='switch'] {
+    box-shadow:
+      0 0 0 1px var(--lumo-base-color),
+      0 0 0 calc(var(--_focus-ring-width) + 1px) var(--_focus-ring-color);
+  }
+
+  :host([readonly][focus-ring]) [part='switch'] {
+    outline: none;
+  }
+}

package/src/components/upload-file.css

@@ -22,17 +22,21 @@
     display: none;
   }
 
-  [part='status'],
-  [part='error'] {
-    color: var(--lumo-secondary-text-color);
-    font-size: var(--lumo-font-size-s);
-  }
-
   [part='name'] {
-    color: var(--lumo-body-text-color);
+    color: var(--vaadin-upload-file-name-color, var(--lumo-body-text-color));
     white-space: nowrap;
   }
 
+  [part='status'] {
+    color: var(--vaadin-upload-file-status-color, var(--lumo-secondary-text-color));
+    font-size: var(--vaadin-upload-file-status-font-size, var(--lumo-font-size-s));
+  }
+
+  [part='error'] {
+    color: var(--vaadin-upload-file-error-color, var(--lumo-error-text-color));
+    font-size: var(--vaadin-upload-file-error-font-size, var(--lumo-font-size-s));
+  }
+
   [part='commands'] {
     align-self: start;
   }
@@ -94,10 +98,6 @@
     content: var(--lumo-icons-cross);
   }
 
-  [part='error'] {
-    color: var(--lumo-error-text-color);
-  }
-
   ::slotted([slot='progress']) {
     margin-inline-end: calc(var(--lumo-icon-size-m) + var(--lumo-space-xs));
   }