@vaadin/vaadin-lumo-styles 24.5.0-alpha1 → 24.5.0-alpha10

package/auto-complete.css

@@ -128,6 +128,8 @@
   --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);
@@ -135,6 +137,8 @@
   --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);
@@ -157,6 +161,8 @@
   --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);
@@ -207,104 +213,104 @@
  .bg-transparent {
   background-color: transparent;
 }
- .bg-tint-5 {
-  background-color: var(--lumo-tint-5pct);
+ .bg-tint {
+  background-color: var(--lumo-tint);
 }
-.bg-tint-10 {
-  background-color: var(--lumo-tint-10pct);
+.bg-tint-90 {
+  background-color: var(--lumo-tint-90pct);
 }
-.bg-tint-20 {
-  background-color: var(--lumo-tint-20pct);
+.bg-tint-80 {
+  background-color: var(--lumo-tint-80pct);
 }
-.bg-tint-30 {
-  background-color: var(--lumo-tint-30pct);
+.bg-tint-70 {
+  background-color: var(--lumo-tint-70pct);
 }
-.bg-tint-40 {
-  background-color: var(--lumo-tint-40pct);
+.bg-tint-60 {
+  background-color: var(--lumo-tint-60pct);
 }
 .bg-tint-50 {
   background-color: var(--lumo-tint-50pct);
 }
-.bg-tint-60 {
-  background-color: var(--lumo-tint-60pct);
+.bg-tint-40 {
+  background-color: var(--lumo-tint-40pct);
 }
-.bg-tint-70 {
-  background-color: var(--lumo-tint-70pct);
+.bg-tint-30 {
+  background-color: var(--lumo-tint-30pct);
 }
-.bg-tint-80 {
-  background-color: var(--lumo-tint-80pct);
+.bg-tint-20 {
+  background-color: var(--lumo-tint-20pct);
 }
-.bg-tint-90 {
-  background-color: var(--lumo-tint-90pct);
+.bg-tint-10 {
+  background-color: var(--lumo-tint-10pct);
 }
-.bg-tint {
-  background-color: var(--lumo-tint);
+.bg-tint-5 {
+  background-color: var(--lumo-tint-5pct);
 }
- .bg-shade-5 {
-  background-color: var(--lumo-shade-5pct);
+ .bg-shade {
+  background-color: var(--lumo-shade);
 }
-.bg-shade-10 {
-  background-color: var(--lumo-shade-10pct);
+.bg-shade-90 {
+  background-color: var(--lumo-shade-90pct);
 }
-.bg-shade-20 {
-  background-color: var(--lumo-shade-20pct);
+.bg-shade-80 {
+  background-color: var(--lumo-shade-80pct);
 }
-.bg-shade-30 {
-  background-color: var(--lumo-shade-30pct);
+.bg-shade-70 {
+  background-color: var(--lumo-shade-70pct);
 }
-.bg-shade-40 {
-  background-color: var(--lumo-shade-40pct);
+.bg-shade-60 {
+  background-color: var(--lumo-shade-60pct);
 }
 .bg-shade-50 {
   background-color: var(--lumo-shade-50pct);
 }
-.bg-shade-60 {
-  background-color: var(--lumo-shade-60pct);
+.bg-shade-40 {
+  background-color: var(--lumo-shade-40pct);
 }
-.bg-shade-70 {
-  background-color: var(--lumo-shade-70pct);
+.bg-shade-30 {
+  background-color: var(--lumo-shade-30pct);
 }
-.bg-shade-80 {
-  background-color: var(--lumo-shade-80pct);
+.bg-shade-20 {
+  background-color: var(--lumo-shade-20pct);
 }
-.bg-shade-90 {
-  background-color: var(--lumo-shade-90pct);
+.bg-shade-10 {
+  background-color: var(--lumo-shade-10pct);
 }
-.bg-shade {
-  background-color: var(--lumo-shade);
+.bg-shade-5 {
+  background-color: var(--lumo-shade-5pct);
 }
- .bg-contrast-5 {
-  background-color: var(--lumo-contrast-5pct);
+ .bg-contrast {
+  background-color: var(--lumo-contrast);
 }
-.bg-contrast-10 {
-  background-color: var(--lumo-contrast-10pct);
+.bg-contrast-90 {
+  background-color: var(--lumo-contrast-90pct);
 }
-.bg-contrast-20 {
-  background-color: var(--lumo-contrast-20pct);
+.bg-contrast-80 {
+  background-color: var(--lumo-contrast-80pct);
 }
-.bg-contrast-30 {
-  background-color: var(--lumo-contrast-30pct);
+.bg-contrast-70 {
+  background-color: var(--lumo-contrast-70pct);
 }
-.bg-contrast-40 {
-  background-color: var(--lumo-contrast-40pct);
+.bg-contrast-60 {
+  background-color: var(--lumo-contrast-60pct);
 }
 .bg-contrast-50 {
   background-color: var(--lumo-contrast-50pct);
 }
-.bg-contrast-60 {
-  background-color: var(--lumo-contrast-60pct);
+.bg-contrast-40 {
+  background-color: var(--lumo-contrast-40pct);
 }
-.bg-contrast-70 {
-  background-color: var(--lumo-contrast-70pct);
+.bg-contrast-30 {
+  background-color: var(--lumo-contrast-30pct);
 }
-.bg-contrast-80 {
-  background-color: var(--lumo-contrast-80pct);
+.bg-contrast-20 {
+  background-color: var(--lumo-contrast-20pct);
 }
-.bg-contrast-90 {
-  background-color: var(--lumo-contrast-90pct);
+.bg-contrast-10 {
+  background-color: var(--lumo-contrast-10pct);
 }
-.bg-contrast {
-  background-color: var(--lumo-contrast);
+.bg-contrast-5 {
+  background-color: var(--lumo-contrast-5pct);
 }
  .bg-primary {
   background-color: var(--lumo-primary-color);
@@ -344,6 +350,12 @@
 .border-0 {
   border: none;
 }
+.border-dashed {
+  --lumo-utility-border-style: dashed;
+}
+.border-dotted {
+  --lumo-utility-border-style: dotted;
+}
 .border {
   border: 1px var(--lumo-utility-border-style, solid) var(--lumo-utility-border-color, var(--lumo-contrast-10pct));
 }
@@ -369,46 +381,40 @@
 }
 .border-t {
   border-top: 1px var(--lumo-utility-border-style, solid) var(--lumo-utility-border-color, var(--lumo-contrast-10pct));
-}
-.border-dashed {
-  --lumo-utility-border-style: dashed;
-}
-.border-dotted {
-  --lumo-utility-border-style: dotted;
 }
  /* === Border color === */
-.border-contrast-5 {
-  --lumo-utility-border-color: var(--lumo-contrast-5pct);
+.border-contrast {
+  --lumo-utility-border-color: var(--lumo-contrast);
 }
-.border-contrast-10 {
-  --lumo-utility-border-color: var(--lumo-contrast-10pct);
+.border-contrast-90 {
+  --lumo-utility-border-color: var(--lumo-contrast-90pct);
 }
-.border-contrast-20 {
-  --lumo-utility-border-color: var(--lumo-contrast-20pct);
+.border-contrast-80 {
+  --lumo-utility-border-color: var(--lumo-contrast-80pct);
 }
-.border-contrast-30 {
-  --lumo-utility-border-color: var(--lumo-contrast-30pct);
+.border-contrast-70 {
+  --lumo-utility-border-color: var(--lumo-contrast-70pct);
 }
-.border-contrast-40 {
-  --lumo-utility-border-color: var(--lumo-contrast-40pct);
+.border-contrast-60 {
+  --lumo-utility-border-color: var(--lumo-contrast-60pct);
 }
 .border-contrast-50 {
   --lumo-utility-border-color: var(--lumo-contrast-50pct);
 }
-.border-contrast-60 {
-  --lumo-utility-border-color: var(--lumo-contrast-60pct);
+.border-contrast-40 {
+  --lumo-utility-border-color: var(--lumo-contrast-40pct);
 }
-.border-contrast-70 {
-  --lumo-utility-border-color: var(--lumo-contrast-70pct);
+.border-contrast-30 {
+  --lumo-utility-border-color: var(--lumo-contrast-30pct);
 }
-.border-contrast-80 {
-  --lumo-utility-border-color: var(--lumo-contrast-80pct);
+.border-contrast-20 {
+  --lumo-utility-border-color: var(--lumo-contrast-20pct);
 }
-.border-contrast-90 {
-  --lumo-utility-border-color: var(--lumo-contrast-90pct);
+.border-contrast-10 {
+  --lumo-utility-border-color: var(--lumo-contrast-10pct);
 }
-.border-contrast {
-  --lumo-utility-border-color: var(--lumo-contrast);
+.border-contrast-5 {
+  --lumo-utility-border-color: var(--lumo-contrast-5pct);
 }
  .border-primary {
   --lumo-utility-border-color: var(--lumo-primary-color);
@@ -440,11 +446,11 @@
  .border-warning {
   --lumo-utility-border-color: var(--lumo-warning-color);
 }
-.border-warning-10 {
-  --lumo-utility-border-color: var(--lumo-warning-color-10pct);
-}
 .border-warning-strong {
   --lumo-utility-border-color: var(--lumo-warning-text-color);
+}
+.border-warning-10 {
+  --lumo-utility-border-color: var(--lumo-warning-color-10pct);
 }
  /* === Border radius === */
 .rounded-none {
@@ -556,8 +562,11 @@
   align-self: stretch;
 }
  /* === Flex === */
+.flex-1 {
+  flex: 1 1 0%;
+}
 .flex-auto {
-  flex: auto;
+  flex: 1 1 auto;
 }
 .flex-none {
   flex: none;
@@ -576,18 +585,18 @@
   flex-direction: row-reverse;
 }
  /* === Flex grow === */
-.flex-grow-0 {
-  flex-grow: 0;
-}
 .flex-grow {
   flex-grow: 1;
 }
- /* === Flex shrink === */
-.flex-shrink-0 {
-  flex-shrink: 0;
+.flex-grow-0 {
+  flex-grow: 0;
 }
+ /* === Flex shrink === */
 .flex-shrink {
   flex-shrink: 1;
+}
+.flex-shrink-0 {
+  flex-shrink: 0;
 }
  /* === Flex wrap === */
 .flex-nowrap {
@@ -793,6 +802,21 @@
 }
  /* === Responsive design === */
 @media (min-width: 640px) {
+  .sm\items-baseline {
+    align-items: baseline;
+  }
+  .sm\items-center {
+    align-items: center;
+  }
+  .sm\items-end {
+    align-items: flex-end;
+  }
+  .sm\items-start {
+    align-items: flex-start;
+  }
+  .sm\items-stretch {
+    align-items: stretch;
+  }
   .sm\:flex-col {
     flex-direction: column;
   }
@@ -837,6 +861,21 @@
   }
 }
  @media (min-width: 768px) {
+  .md\items-baseline {
+    align-items: baseline;
+  }
+  .md\items-center {
+    align-items: center;
+  }
+  .md\items-end {
+    align-items: flex-end;
+  }
+  .md\items-start {
+    align-items: flex-start;
+  }
+  .md\items-stretch {
+    align-items: stretch;
+  }
   .md\:flex-col {
     flex-direction: column;
   }
@@ -881,6 +920,21 @@
   }
 }
 @media (min-width: 1024px) {
+  .lg\items-baseline {
+    align-items: baseline;
+  }
+  .lg\items-center {
+    align-items: center;
+  }
+  .lg\items-end {
+    align-items: flex-end;
+  }
+  .lg\items-start {
+    align-items: flex-start;
+  }
+  .lg\items-stretch {
+    align-items: stretch;
+  }
   .lg\:flex-col {
     flex-direction: column;
   }
@@ -925,6 +979,21 @@
   }
 }
 @media (min-width: 1280px) {
+  .xl\items-baseline {
+    align-items: baseline;
+  }
+  .xl\items-center {
+    align-items: center;
+  }
+  .xl\items-end {
+    align-items: flex-end;
+  }
+  .xl\items-start {
+    align-items: flex-start;
+  }
+  .xl\items-stretch {
+    align-items: stretch;
+  }
   .xl\:flex-col {
     flex-direction: column;
   }
@@ -969,6 +1038,21 @@
   }
 }
 @media (min-width: 1536px) {
+  .\32xl\items-baseline {
+    align-items: baseline;
+  }
+  .\32xl\items-center {
+    align-items: center;
+  }
+  .\32xl\items-end {
+    align-items: flex-end;
+  }
+  .\32xl\items-start {
+    align-items: flex-start;
+  }
+  .\32xl\items-stretch {
+    align-items: stretch;
+  }
   .\32xl\:flex-col {
     flex-direction: column;
   }
@@ -1255,6 +1339,9 @@
   visibility: visible;
 }
  /* === Z-index === */
+.z-0 {
+  z-index: 0;
+}
 .z-10 {
   z-index: 10;
 }
@@ -1269,6 +1356,9 @@
 }
 .z-50 {
   z-index: 50;
+}
+.z-auto {
+  z-index: auto;
 }
  /* === Responsive design === */
 @media (min-width: 640px) {
@@ -1488,6 +1578,9 @@
 }
 
 /* === Box shadow === */
+.shadow-none {
+  box-shadow: none;
+}
 .shadow-xs {
   box-shadow: var(--lumo-box-shadow-xs);
 }
@@ -2128,20 +2221,35 @@
   padding-top: var(--lumo-space-xl);
 }
 
-.transition {
-  transition: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow,
-    transform, filter, backdrop-filter 150ms cubic-bezier(0.4, 0, 0.2, 1);
+.transition-none {
+  transition: none;
 }
 .transition-all {
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
+.transition {
+  transition:
+    color,
+    background-color,
+    border-color,
+    text-decoration-color,
+    fill,
+    stroke,
+    opacity,
+    box-shadow,
+    transform,
+    filter,
+    backdrop-filter 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
 .transition-colors {
-  transition: color, background-color, border-color, text-decoration-color, fill,
+  transition:
+    color,
+    background-color,
+    border-color,
+    text-decoration-color,
+    fill,
     stroke 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
-.transition-none {
-  transition: none;
-}
 .transition-opacity {
   transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }

package/badge.js

@@ -97,15 +97,15 @@ const badge = css`
 
   /* Icon */
 
-  [theme~='badge'] vaadin-icon {
+  [theme~='badge'] > vaadin-icon {
     margin: -0.25em 0;
   }
 
-  [theme~='badge'] vaadin-icon:first-child {
+  [theme~='badge'] > vaadin-icon:first-child {
     margin-left: -0.375em;
   }
 
-  [theme~='badge'] vaadin-icon:last-child {
+  [theme~='badge'] > vaadin-icon:last-child {
     margin-right: -0.375em;
   }
 

package/mixins/input-field-shared.js

@@ -28,6 +28,7 @@ const inputField = css`
     --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
     --_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
     --_input-height: var(--vaadin-input-field-height, var(--lumo-text-field-size));
+    --_disabled-value-color: var(--vaadin-input-field-disabled-value-color, var(--lumo-disabled-text-color));
   }
 
   :host::before {
@@ -89,12 +90,16 @@ const inputField = css`
     --vaadin-input-field-border-color: var(--lumo-contrast-20pct);
   }
 
-  :host([disabled]) [part='label'],
-  :host([disabled]) [part='input-field'] ::slotted(*) {
+  :host([disabled]) [part='label'] {
     color: var(--lumo-disabled-text-color);
     -webkit-text-fill-color: var(--lumo-disabled-text-color);
   }
 
+  :host([disabled]) [part='input-field'] ::slotted(*) {
+    color: var(--_disabled-value-color);
+    -webkit-text-fill-color: var(--_disabled-value-color);
+  }
+
   /* Invalid style */
   :host([invalid]) {
     --vaadin-input-field-border-color: var(--lumo-error-color);

package/mixins/loader.js

@@ -25,7 +25,9 @@ const loader = css`
   }
 
   :host([loading]) [part~='loader'] {
-    animation: 1s linear infinite lumo-loader-rotate, 0.3s 0.1s lumo-loader-fade-in both;
+    animation:
+      1s linear infinite lumo-loader-rotate,
+      0.3s 0.1s lumo-loader-fade-in both;
   }
 
   @keyframes lumo-loader-fade-in {

package/mixins/overlay.js

@@ -24,7 +24,9 @@ const overlay = css`
     background-color: var(--lumo-base-color);
     background-image: linear-gradient(var(--lumo-tint-5pct), var(--lumo-tint-5pct));
     border-radius: var(--lumo-border-radius-m);
-    box-shadow: 0 0 0 1px var(--lumo-shade-5pct), var(--lumo-box-shadow-m);
+    box-shadow:
+      0 0 0 1px var(--lumo-shade-5pct),
+      var(--lumo-box-shadow-m);
     color: var(--lumo-body-text-color);
     font-family: var(--lumo-font-family);
     font-size: var(--lumo-font-size-m);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/vaadin-lumo-styles",
-  "version": "24.5.0-alpha1",
+  "version": "24.5.0-alpha10",
   "publishConfig": {
     "access": "public"
   },
@@ -41,9 +41,9 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "24.5.0-alpha1",
-    "@vaadin/icon": "24.5.0-alpha1",
-    "@vaadin/vaadin-themable-mixin": "24.5.0-alpha1"
+    "@vaadin/component-base": "24.5.0-alpha10",
+    "@vaadin/icon": "24.5.0-alpha10",
+    "@vaadin/vaadin-themable-mixin": "24.5.0-alpha10"
   },
   "devDependencies": {
     "gulp": "^4.0.2",
@@ -52,5 +52,5 @@
     "gulp-sort": "^2.0.0",
     "gulp-svgmin": "^4.1.0"
   },
-  "gitHead": "57806caac5468532a3b4e3dbdda730cd0fca193a"
+  "gitHead": "6f9c37308031af872a98017bfab4de89aeacda51"
 }

package/style.js

@@ -62,6 +62,8 @@ const globals = css`
     --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);
@@ -72,6 +74,8 @@ const globals = css`
     --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);
@@ -98,6 +102,8 @@ const globals = css`
     --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);

package/utilities/background.js

@@ -15,106 +15,106 @@ export const background = css`
     background-color: transparent;
   }
 
-  .bg-tint-5 {
-    background-color: var(--lumo-tint-5pct);
+  .bg-tint {
+    background-color: var(--lumo-tint);
   }
-  .bg-tint-10 {
-    background-color: var(--lumo-tint-10pct);
+  .bg-tint-90 {
+    background-color: var(--lumo-tint-90pct);
   }
-  .bg-tint-20 {
-    background-color: var(--lumo-tint-20pct);
+  .bg-tint-80 {
+    background-color: var(--lumo-tint-80pct);
   }
-  .bg-tint-30 {
-    background-color: var(--lumo-tint-30pct);
+  .bg-tint-70 {
+    background-color: var(--lumo-tint-70pct);
   }
-  .bg-tint-40 {
-    background-color: var(--lumo-tint-40pct);
+  .bg-tint-60 {
+    background-color: var(--lumo-tint-60pct);
   }
   .bg-tint-50 {
     background-color: var(--lumo-tint-50pct);
   }
-  .bg-tint-60 {
-    background-color: var(--lumo-tint-60pct);
+  .bg-tint-40 {
+    background-color: var(--lumo-tint-40pct);
   }
-  .bg-tint-70 {
-    background-color: var(--lumo-tint-70pct);
+  .bg-tint-30 {
+    background-color: var(--lumo-tint-30pct);
   }
-  .bg-tint-80 {
-    background-color: var(--lumo-tint-80pct);
+  .bg-tint-20 {
+    background-color: var(--lumo-tint-20pct);
   }
-  .bg-tint-90 {
-    background-color: var(--lumo-tint-90pct);
+  .bg-tint-10 {
+    background-color: var(--lumo-tint-10pct);
   }
-  .bg-tint {
-    background-color: var(--lumo-tint);
+  .bg-tint-5 {
+    background-color: var(--lumo-tint-5pct);
   }
 
-  .bg-shade-5 {
-    background-color: var(--lumo-shade-5pct);
+  .bg-shade {
+    background-color: var(--lumo-shade);
   }
-  .bg-shade-10 {
-    background-color: var(--lumo-shade-10pct);
+  .bg-shade-90 {
+    background-color: var(--lumo-shade-90pct);
   }
-  .bg-shade-20 {
-    background-color: var(--lumo-shade-20pct);
+  .bg-shade-80 {
+    background-color: var(--lumo-shade-80pct);
   }
-  .bg-shade-30 {
-    background-color: var(--lumo-shade-30pct);
+  .bg-shade-70 {
+    background-color: var(--lumo-shade-70pct);
   }
-  .bg-shade-40 {
-    background-color: var(--lumo-shade-40pct);
+  .bg-shade-60 {
+    background-color: var(--lumo-shade-60pct);
   }
   .bg-shade-50 {
     background-color: var(--lumo-shade-50pct);
   }
-  .bg-shade-60 {
-    background-color: var(--lumo-shade-60pct);
+  .bg-shade-40 {
+    background-color: var(--lumo-shade-40pct);
   }
-  .bg-shade-70 {
-    background-color: var(--lumo-shade-70pct);
+  .bg-shade-30 {
+    background-color: var(--lumo-shade-30pct);
   }
-  .bg-shade-80 {
-    background-color: var(--lumo-shade-80pct);
+  .bg-shade-20 {
+    background-color: var(--lumo-shade-20pct);
   }
-  .bg-shade-90 {
-    background-color: var(--lumo-shade-90pct);
+  .bg-shade-10 {
+    background-color: var(--lumo-shade-10pct);
   }
-  .bg-shade {
-    background-color: var(--lumo-shade);
+  .bg-shade-5 {
+    background-color: var(--lumo-shade-5pct);
   }
 
-  .bg-contrast-5 {
-    background-color: var(--lumo-contrast-5pct);
+  .bg-contrast {
+    background-color: var(--lumo-contrast);
   }
-  .bg-contrast-10 {
-    background-color: var(--lumo-contrast-10pct);
+  .bg-contrast-90 {
+    background-color: var(--lumo-contrast-90pct);
   }
-  .bg-contrast-20 {
-    background-color: var(--lumo-contrast-20pct);
+  .bg-contrast-80 {
+    background-color: var(--lumo-contrast-80pct);
   }
-  .bg-contrast-30 {
-    background-color: var(--lumo-contrast-30pct);
+  .bg-contrast-70 {
+    background-color: var(--lumo-contrast-70pct);
   }
-  .bg-contrast-40 {
-    background-color: var(--lumo-contrast-40pct);
+  .bg-contrast-60 {
+    background-color: var(--lumo-contrast-60pct);
   }
   .bg-contrast-50 {
     background-color: var(--lumo-contrast-50pct);
   }
-  .bg-contrast-60 {
-    background-color: var(--lumo-contrast-60pct);
+  .bg-contrast-40 {
+    background-color: var(--lumo-contrast-40pct);
   }
-  .bg-contrast-70 {
-    background-color: var(--lumo-contrast-70pct);
+  .bg-contrast-30 {
+    background-color: var(--lumo-contrast-30pct);
   }
-  .bg-contrast-80 {
-    background-color: var(--lumo-contrast-80pct);
+  .bg-contrast-20 {
+    background-color: var(--lumo-contrast-20pct);
   }
-  .bg-contrast-90 {
-    background-color: var(--lumo-contrast-90pct);
+  .bg-contrast-10 {
+    background-color: var(--lumo-contrast-10pct);
   }
-  .bg-contrast {
-    background-color: var(--lumo-contrast);
+  .bg-contrast-5 {
+    background-color: var(--lumo-contrast-5pct);
   }
 
   .bg-primary {

package/utilities/border.js

@@ -10,6 +10,12 @@ export const border = css`
   .border-0 {
     border: none;
   }
+  .border-dashed {
+    --lumo-utility-border-style: dashed;
+  }
+  .border-dotted {
+    --lumo-utility-border-style: dotted;
+  }
   .border {
     border: 1px var(--lumo-utility-border-style, solid) var(--lumo-utility-border-color, var(--lumo-contrast-10pct));
   }
@@ -36,46 +42,40 @@ export const border = css`
   .border-t {
     border-top: 1px var(--lumo-utility-border-style, solid) var(--lumo-utility-border-color, var(--lumo-contrast-10pct));
   }
-  .border-dashed {
-    --lumo-utility-border-style: dashed;
-  }
-  .border-dotted {
-    --lumo-utility-border-style: dotted;
-  }
 
   /* === Border color === */
-  .border-contrast-5 {
-    --lumo-utility-border-color: var(--lumo-contrast-5pct);
+  .border-contrast {
+    --lumo-utility-border-color: var(--lumo-contrast);
   }
-  .border-contrast-10 {
-    --lumo-utility-border-color: var(--lumo-contrast-10pct);
+  .border-contrast-90 {
+    --lumo-utility-border-color: var(--lumo-contrast-90pct);
   }
-  .border-contrast-20 {
-    --lumo-utility-border-color: var(--lumo-contrast-20pct);
+  .border-contrast-80 {
+    --lumo-utility-border-color: var(--lumo-contrast-80pct);
   }
-  .border-contrast-30 {
-    --lumo-utility-border-color: var(--lumo-contrast-30pct);
+  .border-contrast-70 {
+    --lumo-utility-border-color: var(--lumo-contrast-70pct);
   }
-  .border-contrast-40 {
-    --lumo-utility-border-color: var(--lumo-contrast-40pct);
+  .border-contrast-60 {
+    --lumo-utility-border-color: var(--lumo-contrast-60pct);
   }
   .border-contrast-50 {
     --lumo-utility-border-color: var(--lumo-contrast-50pct);
   }
-  .border-contrast-60 {
-    --lumo-utility-border-color: var(--lumo-contrast-60pct);
+  .border-contrast-40 {
+    --lumo-utility-border-color: var(--lumo-contrast-40pct);
   }
-  .border-contrast-70 {
-    --lumo-utility-border-color: var(--lumo-contrast-70pct);
+  .border-contrast-30 {
+    --lumo-utility-border-color: var(--lumo-contrast-30pct);
   }
-  .border-contrast-80 {
-    --lumo-utility-border-color: var(--lumo-contrast-80pct);
+  .border-contrast-20 {
+    --lumo-utility-border-color: var(--lumo-contrast-20pct);
   }
-  .border-contrast-90 {
-    --lumo-utility-border-color: var(--lumo-contrast-90pct);
+  .border-contrast-10 {
+    --lumo-utility-border-color: var(--lumo-contrast-10pct);
   }
-  .border-contrast {
-    --lumo-utility-border-color: var(--lumo-contrast);
+  .border-contrast-5 {
+    --lumo-utility-border-color: var(--lumo-contrast-5pct);
   }
 
   .border-primary {
@@ -111,12 +111,12 @@ export const border = css`
   .border-warning {
     --lumo-utility-border-color: var(--lumo-warning-color);
   }
-  .border-warning-10 {
-    --lumo-utility-border-color: var(--lumo-warning-color-10pct);
-  }
   .border-warning-strong {
     --lumo-utility-border-color: var(--lumo-warning-text-color);
   }
+  .border-warning-10 {
+    --lumo-utility-border-color: var(--lumo-warning-color-10pct);
+  }
 
   /* === Border radius === */
   .rounded-none {

package/utilities/flexbox-grid.js

@@ -67,8 +67,11 @@ export const flexboxAndGrid = css`
   }
 
   /* === Flex === */
+  .flex-1 {
+    flex: 1 1 0%;
+  }
   .flex-auto {
-    flex: auto;
+    flex: 1 1 auto;
   }
   .flex-none {
     flex: none;
@@ -89,20 +92,20 @@ export const flexboxAndGrid = css`
   }
 
   /* === Flex grow === */
-  .flex-grow-0 {
-    flex-grow: 0;
-  }
   .flex-grow {
     flex-grow: 1;
   }
+  .flex-grow-0 {
+    flex-grow: 0;
+  }
 
   /* === Flex shrink === */
-  .flex-shrink-0 {
-    flex-shrink: 0;
-  }
   .flex-shrink {
     flex-shrink: 1;
   }
+  .flex-shrink-0 {
+    flex-shrink: 0;
+  }
 
   /* === Flex wrap === */
   .flex-nowrap {
@@ -318,6 +321,21 @@ export const flexboxAndGrid = css`
 
   /* === Responsive design === */
   @media (min-width: 640px) {
+    .sm\\items-baseline {
+      align-items: baseline;
+    }
+    .sm\\items-center {
+      align-items: center;
+    }
+    .sm\\items-end {
+      align-items: flex-end;
+    }
+    .sm\\items-start {
+      align-items: flex-start;
+    }
+    .sm\\items-stretch {
+      align-items: stretch;
+    }
     .sm\\:flex-col {
       flex-direction: column;
     }
@@ -363,6 +381,21 @@ export const flexboxAndGrid = css`
   }
 
   @media (min-width: 768px) {
+    .md\\items-baseline {
+      align-items: baseline;
+    }
+    .md\\items-center {
+      align-items: center;
+    }
+    .md\\items-end {
+      align-items: flex-end;
+    }
+    .md\\items-start {
+      align-items: flex-start;
+    }
+    .md\\items-stretch {
+      align-items: stretch;
+    }
     .md\\:flex-col {
       flex-direction: column;
     }
@@ -407,6 +440,21 @@ export const flexboxAndGrid = css`
     }
   }
   @media (min-width: 1024px) {
+    .lg\\items-baseline {
+      align-items: baseline;
+    }
+    .lg\\items-center {
+      align-items: center;
+    }
+    .lg\\items-end {
+      align-items: flex-end;
+    }
+    .lg\\items-start {
+      align-items: flex-start;
+    }
+    .lg\\items-stretch {
+      align-items: stretch;
+    }
     .lg\\:flex-col {
       flex-direction: column;
     }
@@ -451,6 +499,21 @@ export const flexboxAndGrid = css`
     }
   }
   @media (min-width: 1280px) {
+    .xl\\items-baseline {
+      align-items: baseline;
+    }
+    .xl\\items-center {
+      align-items: center;
+    }
+    .xl\\items-end {
+      align-items: flex-end;
+    }
+    .xl\\items-start {
+      align-items: flex-start;
+    }
+    .xl\\items-stretch {
+      align-items: stretch;
+    }
     .xl\\:flex-col {
       flex-direction: column;
     }
@@ -495,6 +558,21 @@ export const flexboxAndGrid = css`
     }
   }
   @media (min-width: 1536px) {
+    .\\32xl\\items-baseline {
+      align-items: baseline;
+    }
+    .\\32xl\\items-center {
+      align-items: center;
+    }
+    .\\32xl\\items-end {
+      align-items: flex-end;
+    }
+    .\\32xl\\items-start {
+      align-items: flex-start;
+    }
+    .\\32xl\\items-stretch {
+      align-items: stretch;
+    }
     .\\32xl\\:flex-col {
       flex-direction: column;
     }

package/utilities/layout.js

@@ -258,6 +258,9 @@ export const layout = css`
   }
 
   /* === Z-index === */
+  .z-0 {
+    z-index: 0;
+  }
   .z-10 {
     z-index: 10;
   }
@@ -273,6 +276,9 @@ export const layout = css`
   .z-50 {
     z-index: 50;
   }
+  .z-auto {
+    z-index: auto;
+  }
 
   /* === Responsive design === */
   @media (min-width: 640px) {

package/utilities/shadows.js

@@ -7,6 +7,9 @@ import { css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 
 export const shadows = css`
   /* === Box shadow === */
+  .shadow-none {
+    box-shadow: none;
+  }
   .shadow-xs {
     box-shadow: var(--lumo-box-shadow-xs);
   }

package/utilities/transition.js

@@ -6,20 +6,35 @@
 import { css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 
 export const transition = css`
-  .transition {
-    transition: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow,
-      transform, filter, backdrop-filter 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  .transition-none {
+    transition: none;
   }
   .transition-all {
     transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
   }
+  .transition {
+    transition:
+      color,
+      background-color,
+      border-color,
+      text-decoration-color,
+      fill,
+      stroke,
+      opacity,
+      box-shadow,
+      transform,
+      filter,
+      backdrop-filter 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  }
   .transition-colors {
-    transition: color, background-color, border-color, text-decoration-color, fill,
+    transition:
+      color,
+      background-color,
+      border-color,
+      text-decoration-color,
+      fill,
       stroke 150ms cubic-bezier(0.4, 0, 0.2, 1);
   }
-  .transition-none {
-    transition: none;
-  }
   .transition-opacity {
     transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
   }