@vaadin/vaadin-lumo-styles 24.5.0-alpha3 → 24.5.0-alpha5

package/auto-complete.css

@@ -207,104 +207,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 +344,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 +375,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 +440,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 +556,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 +579,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 +796,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 +855,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 +914,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 +973,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 +1032,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 +1333,9 @@
   visibility: visible;
 }
  /* === Z-index === */
+.z-0 {
+  z-index: 0;
+}
 .z-10 {
   z-index: 10;
 }
@@ -1269,6 +1350,9 @@
 }
 .z-50 {
   z-index: 50;
+}
+.z-auto {
+  z-index: auto;
 }
  /* === Responsive design === */
 @media (min-width: 640px) {
@@ -1488,6 +1572,9 @@
 }
 
 /* === Box shadow === */
+.shadow-none {
+  box-shadow: none;
+}
 .shadow-xs {
   box-shadow: var(--lumo-box-shadow-xs);
 }
@@ -2128,20 +2215,20 @@
   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,
     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/package.json

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

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,20 @@
 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,
       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);
   }