@vaadin/vaadin-lumo-styles 24.2.3 → 24.3.0-alpha10

package/auto-complete.css

@@ -99,9 +99,71 @@
   --lumo-box-shadow-l: 0 3px 18px -2px var(--lumo-shade-20pct), 0 12px 48px -6px var(--lumo-shade-40pct);
   --lumo-box-shadow-xl: 0 4px 24px -3px var(--lumo-shade-20pct), 0 18px 64px -8px var(--lumo-shade-40pct);
   --lumo-clickable-cursor: default;
+  --vaadin-button-background: var(--lumo-contrast-5pct);
+  --vaadin-button-border: none;
+  --vaadin-button-border-radius: var(--lumo-border-radius-m);
+  --vaadin-button-font-size: var(--lumo-font-size-m);
+  --vaadin-button-font-weight: 500;
+  --vaadin-button-height: var(--lumo-size-m);
+  --vaadin-button-margin: var(--lumo-space-xs) 0;
+  --vaadin-button-min-width: calc(var(--vaadin-button-height) * 2);
+  --vaadin-button-padding: 0 calc(var(--vaadin-button-height) / 3 + var(--lumo-border-radius-m) / 2);
+  --vaadin-button-text-color: var(--lumo-primary-text-color);
+  --vaadin-button-primary-background: var(--lumo-primary-color);
+  --vaadin-button-primary-border: none;
+  --vaadin-button-primary-font-weight: 600;
+  --vaadin-button-primary-text-color: var(--lumo-primary-contrast-color);
+  --vaadin-button-tertiary-background: transparent !important;
+  --vaadin-button-tertiary-text-color: var(--lumo-primary-text-color);
+  --vaadin-button-tertiary-font-weight: 500;
+  --vaadin-button-tertiary-padding: 0 calc(var(--vaadin-button-height) / 6);
+  --vaadin-checkbox-background: var(--lumo-contrast-20pct);
+  --vaadin-checkbox-background-hover: var(--lumo-contrast-30pct);
+  --vaadin-checkbox-border-radius: var(--lumo-border-radius-s);
+  --vaadin-checkbox-checkmark-char: var(--lumo-icons-checkmark);
+  --vaadin-checkbox-checkmark-char-indeterminate: '';
+  --vaadin-checkbox-checkmark-color: var(--lumo-primary-contrast-color);
+  --vaadin-checkbox-checkmark-size: calc(var(--vaadin-checkbox-size) + 2px);
+  --vaadin-checkbox-label-color: var(--lumo-body-text-color);
+  --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-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);
+  --vaadin-radio-button-dot-size: 3px;
+  --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-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);
+  --vaadin-focus-ring-color: var(--lumo-primary-color-50pct);
+  --vaadin-focus-ring-width: 2px;
+  --vaadin-input-field-label-color: var(--lumo-secondary-text-color);
+  --vaadin-input-field-focused-label-color: var(--lumo-primary-text-color);
+  --vaadin-input-field-hovered-label-color: var(--lumo-body-text-color);
+  --vaadin-input-field-label-font-size: var(--lumo-font-size-s);
+  --vaadin-input-field-label-font-weight: 500;
+  --vaadin-input-field-helper-color: var(--lumo-secondary-text-color);
+  --vaadin-input-field-helper-font-size: var(--lumo-font-size-xs);
+  --vaadin-input-field-helper-font-weight: 400;
+  --vaadin-input-field-helper-spacing: 0.4em;
+  --vaadin-input-field-error-color: var(--lumo-error-text-color);
+  --vaadin-input-field-error-font-size: var(--lumo-font-size-xs);
+  --vaadin-input-field-error-font-weight: 400;
+  --vaadin-input-field-background: var(--lumo-contrast-10pct);
+  --vaadin-input-field-icon-color: var(--lumo-contrast-60pct);
+  --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-height: var(--lumo-size-m);
+  --vaadin-input-field-hover-highlight: var(--lumo-contrast-50pct);
+  --vaadin-input-field-placeholder-color: var(--lumo-secondary-text-color);
+  --vaadin-input-field-readonly-border: 1px dashed var(--lumo-contrast-30pct);
+  --vaadin-input-field-value-color: var(--lumo-body-text-color);
+  --vaadin-input-field-value-font-size: var(--lumo-font-size-m);
+  --vaadin-input-field-value-font-weight: 400;
   --lumo-font-family: -apple-system, BlinkMacSystemFont, 'Roboto', 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   --lumo-font-size-xxs: 0.75rem;
   --lumo-font-size-xs: 0.8125rem;
@@ -144,6 +206,72 @@
 }
  .bg-transparent {
   background-color: transparent;
+}
+ .bg-tint-5 {
+  background-color: var(--lumo-tint-5pct);
+}
+.bg-tint-10 {
+  background-color: var(--lumo-tint-10pct);
+}
+.bg-tint-20 {
+  background-color: var(--lumo-tint-20pct);
+}
+.bg-tint-30 {
+  background-color: var(--lumo-tint-30pct);
+}
+.bg-tint-40 {
+  background-color: var(--lumo-tint-40pct);
+}
+.bg-tint-50 {
+  background-color: var(--lumo-tint-50pct);
+}
+.bg-tint-60 {
+  background-color: var(--lumo-tint-60pct);
+}
+.bg-tint-70 {
+  background-color: var(--lumo-tint-70pct);
+}
+.bg-tint-80 {
+  background-color: var(--lumo-tint-80pct);
+}
+.bg-tint-90 {
+  background-color: var(--lumo-tint-90pct);
+}
+.bg-tint {
+  background-color: var(--lumo-tint);
+}
+ .bg-shade-5 {
+  background-color: var(--lumo-shade-5pct);
+}
+.bg-shade-10 {
+  background-color: var(--lumo-shade-10pct);
+}
+.bg-shade-20 {
+  background-color: var(--lumo-shade-20pct);
+}
+.bg-shade-30 {
+  background-color: var(--lumo-shade-30pct);
+}
+.bg-shade-40 {
+  background-color: var(--lumo-shade-40pct);
+}
+.bg-shade-50 {
+  background-color: var(--lumo-shade-50pct);
+}
+.bg-shade-60 {
+  background-color: var(--lumo-shade-60pct);
+}
+.bg-shade-70 {
+  background-color: var(--lumo-shade-70pct);
+}
+.bg-shade-80 {
+  background-color: var(--lumo-shade-80pct);
+}
+.bg-shade-90 {
+  background-color: var(--lumo-shade-90pct);
+}
+.bg-shade {
+  background-color: var(--lumo-shade);
 }
  .bg-contrast-5 {
   background-color: var(--lumo-contrast-5pct);
@@ -217,89 +345,106 @@
   border: none;
 }
 .border {
-  border: 1px solid;
+  border: 1px var(--lumo-utility-border-style, solid) var(--lumo-utility-border-color, var(--lumo-contrast-10pct));
 }
 .border-b {
-  border-bottom: 1px solid;
+  border-bottom: 1px var(--lumo-utility-border-style, solid)
+    var(--lumo-utility-border-color, var(--lumo-contrast-10pct));
+}
+.border-e {
+  border-inline-end: 1px var(--lumo-utility-border-style, solid)
+    var(--lumo-utility-border-color, var(--lumo-contrast-10pct));
 }
 .border-l {
-  border-left: 1px solid;
+  border-left: 1px var(--lumo-utility-border-style, solid)
+    var(--lumo-utility-border-color, var(--lumo-contrast-10pct));
 }
 .border-r {
-  border-right: 1px solid;
+  border-right: 1px var(--lumo-utility-border-style, solid)
+    var(--lumo-utility-border-color, var(--lumo-contrast-10pct));
+}
+.border-s {
+  border-inline-start: 1px var(--lumo-utility-border-style, solid)
+    var(--lumo-utility-border-color, var(--lumo-contrast-10pct));
 }
 .border-t {
-  border-top: 1px solid;
+  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 {
-  border-color: var(--lumo-contrast-5pct);
+  --lumo-utility-border-color: var(--lumo-contrast-5pct);
 }
 .border-contrast-10 {
-  border-color: var(--lumo-contrast-10pct);
+  --lumo-utility-border-color: var(--lumo-contrast-10pct);
 }
 .border-contrast-20 {
-  border-color: var(--lumo-contrast-20pct);
+  --lumo-utility-border-color: var(--lumo-contrast-20pct);
 }
 .border-contrast-30 {
-  border-color: var(--lumo-contrast-30pct);
+  --lumo-utility-border-color: var(--lumo-contrast-30pct);
 }
 .border-contrast-40 {
-  border-color: var(--lumo-contrast-40pct);
+  --lumo-utility-border-color: var(--lumo-contrast-40pct);
 }
 .border-contrast-50 {
-  border-color: var(--lumo-contrast-50pct);
+  --lumo-utility-border-color: var(--lumo-contrast-50pct);
 }
 .border-contrast-60 {
-  border-color: var(--lumo-contrast-60pct);
+  --lumo-utility-border-color: var(--lumo-contrast-60pct);
 }
 .border-contrast-70 {
-  border-color: var(--lumo-contrast-70pct);
+  --lumo-utility-border-color: var(--lumo-contrast-70pct);
 }
 .border-contrast-80 {
-  border-color: var(--lumo-contrast-80pct);
+  --lumo-utility-border-color: var(--lumo-contrast-80pct);
 }
 .border-contrast-90 {
-  border-color: var(--lumo-contrast-90pct);
+  --lumo-utility-border-color: var(--lumo-contrast-90pct);
 }
 .border-contrast {
-  border-color: var(--lumo-contrast);
+  --lumo-utility-border-color: var(--lumo-contrast);
 }
  .border-primary {
-  border-color: var(--lumo-primary-color);
+  --lumo-utility-border-color: var(--lumo-primary-color);
 }
 .border-primary-50 {
-  border-color: var(--lumo-primary-color-50pct);
+  --lumo-utility-border-color: var(--lumo-primary-color-50pct);
 }
 .border-primary-10 {
-  border-color: var(--lumo-primary-color-10pct);
+  --lumo-utility-border-color: var(--lumo-primary-color-10pct);
 }
  .border-error {
-  border-color: var(--lumo-error-color);
+  --lumo-utility-border-color: var(--lumo-error-color);
 }
 .border-error-50 {
-  border-color: var(--lumo-error-color-50pct);
+  --lumo-utility-border-color: var(--lumo-error-color-50pct);
 }
 .border-error-10 {
-  border-color: var(--lumo-error-color-10pct);
+  --lumo-utility-border-color: var(--lumo-error-color-10pct);
 }
  .border-success {
-  border-color: var(--lumo-success-color);
+  --lumo-utility-border-color: var(--lumo-success-color);
 }
 .border-success-50 {
-  border-color: var(--lumo-success-color-50pct);
+  --lumo-utility-border-color: var(--lumo-success-color-50pct);
 }
 .border-success-10 {
-  border-color: var(--lumo-success-color-10pct);
+  --lumo-utility-border-color: var(--lumo-success-color-10pct);
 }
  .border-warning {
-  border-color: var(--lumo-warning-color);
+  --lumo-utility-border-color: var(--lumo-warning-color);
 }
 .border-warning-10 {
-  border-color: var(--lumo-warning-color-10pct);
+  --lumo-utility-border-color: var(--lumo-warning-color-10pct);
 }
 .border-warning-strong {
-  border-color: var(--lumo-warning-text-color);
+  --lumo-utility-border-color: var(--lumo-warning-text-color);
 }
  /* === Border radius === */
 .rounded-none {
@@ -314,6 +459,44 @@
 .rounded-l {
   border-radius: var(--lumo-border-radius-l);
 }
+.rounded-full {
+  border-radius: 9999px;
+}
+ /* === Divide === */
+.divide-x > * + * {
+  border-inline-start: 1px var(--lumo-utility-border-style, solid)
+    var(--lumo-utility-border-color, var(--lumo-contrast-10pct));
+}
+.divide-y > * + * {
+  border-block-start: 1px var(--lumo-utility-border-style, solid)
+    var(--lumo-utility-border-color, var(--lumo-contrast-10pct));
+}
+
+/* === Backdrop filter === */
+.backdrop-blur-none {
+  backdrop-filter: blur(0);
+}
+.backdrop-blur-sm {
+  backdrop-filter: blur(4px);
+}
+.backdrop-blur {
+  backdrop-filter: blur(8px);
+}
+.backdrop-blur-md {
+  backdrop-filter: blur(12px);
+}
+.backdrop-blur-lg {
+  backdrop-filter: blur(16px);
+}
+.backdrop-blur-xl {
+  backdrop-filter: blur(24px);
+}
+.backdrop-blur-2xl {
+  backdrop-filter: blur(40px);
+}
+.backdrop-blur-3xl {
+  backdrop-filter: blur(64px);
+}
 
 /* === Align content === */
 .content-center {
@@ -582,6 +765,9 @@
 }
 .col-span-12 {
   grid-column: span 12 / span 12;
+}
+.col-span-full {
+  grid-column: 1 / -1;
 }
  /* === Span (row) === */
 .row-span-1 {
@@ -601,6 +787,9 @@
 }
 .row-span-6 {
   grid-row: span 6 / span 6;
+}
+.row-span-full {
+  grid-row: 1 / -1;
 }
  /* === Responsive design === */
 @media (min-width: 640px) {
@@ -824,7 +1013,14 @@
   }
 }
 
-/* === Box sizing === */
+/* === Aspect ratio === */
+.aspect-square {
+  aspect-ratio: 1 / 1;
+}
+.aspect-video {
+  aspect-ratio: 16 / 9;
+}
+ /* === Box sizing === */
 .box-border {
   box-sizing: border-box;
 }
@@ -838,6 +1034,9 @@
 .flex {
   display: flex;
 }
+.grid {
+  display: grid;
+}
 .hidden {
   display: none;
 }
@@ -852,9 +1051,6 @@
 }
 .inline-grid {
   display: inline-grid;
-}
-.grid {
-  display: grid;
 }
  /* === Overflow === */
 .overflow-auto {
@@ -881,50 +1077,417 @@
 }
 .relative {
   position: relative;
+}
+ /* === Top, end, bottom, start === */
+.-bottom-xs {
+  bottom: calc(var(--lumo-space-xs) / -1);
+}
+.-bottom-s {
+  bottom: calc(var(--lumo-space-s) / -1);
+}
+.-bottom-m {
+  bottom: calc(var(--lumo-space-m) / -1);
+}
+.-bottom-l {
+  bottom: calc(var(--lumo-space-l) / -1);
+}
+.-bottom-xl {
+  bottom: calc(var(--lumo-space-xl) / -1);
+}
+.-bottom-full {
+  bottom: -100%;
+}
+.bottom-0 {
+  bottom: 0;
+}
+.bottom-xs {
+  bottom: var(--lumo-space-xs);
+}
+.bottom-s {
+  bottom: var(--lumo-space-s);
+}
+.bottom-m {
+  bottom: var(--lumo-space-m);
+}
+.bottom-l {
+  bottom: var(--lumo-space-l);
+}
+.bottom-xl {
+  bottom: var(--lumo-space-xl);
+}
+.bottom-auto {
+  bottom: auto;
+}
+.bottom-full {
+  bottom: 100%;
+}
+ .-end-xs {
+  inset-inline-end: calc(var(--lumo-space-xs) / -1);
+}
+.-end-s {
+  inset-inline-end: calc(var(--lumo-space-s) / -1);
+}
+.-end-m {
+  inset-inline-end: calc(var(--lumo-space-m) / -1);
+}
+.-end-l {
+  inset-inline-end: calc(var(--lumo-space-l) / -1);
+}
+.-end-xl {
+  inset-inline-end: calc(var(--lumo-space-xl) / -1);
+}
+.-end-full {
+  inset-inline-end: -100%;
+}
+.end-0 {
+  inset-inline-end: 0;
+}
+.end-xs {
+  inset-inline-end: var(--lumo-space-xs);
+}
+.end-s {
+  inset-inline-end: var(--lumo-space-s);
+}
+.end-m {
+  inset-inline-end: var(--lumo-space-m);
+}
+.end-l {
+  inset-inline-end: var(--lumo-space-l);
+}
+.end-xl {
+  inset-inline-end: var(--lumo-space-xl);
+}
+.end-auto {
+  inset-inline-end: auto;
+}
+.end-full {
+  inset-inline-end: 100%;
+}
+ .-start-xs {
+  inset-inline-start: calc(var(--lumo-space-xs) / -1);
+}
+.-start-s {
+  inset-inline-start: calc(var(--lumo-space-s) / -1);
+}
+.-start-m {
+  inset-inline-start: calc(var(--lumo-space-m) / -1);
+}
+.-start-l {
+  inset-inline-start: calc(var(--lumo-space-l) / -1);
+}
+.-start-xl {
+  inset-inline-start: calc(var(--lumo-space-xl) / -1);
+}
+.-start-full {
+  inset-inline-start: -100%;
+}
+.start-0 {
+  inset-inline-start: 0;
+}
+.start-xs {
+  inset-inline-start: var(--lumo-space-xs);
+}
+.start-s {
+  inset-inline-start: var(--lumo-space-s);
+}
+.start-m {
+  inset-inline-start: var(--lumo-space-m);
+}
+.start-l {
+  inset-inline-start: var(--lumo-space-l);
+}
+.start-xl {
+  inset-inline-start: var(--lumo-space-xl);
+}
+.start-auto {
+  inset-inline-start: auto;
+}
+.start-full {
+  inset-inline-start: 100%;
+}
+ .-top-xs {
+  top: calc(var(--lumo-space-xs) / -1);
+}
+.-top-s {
+  top: calc(var(--lumo-space-s) / -1);
+}
+.-top-m {
+  top: calc(var(--lumo-space-m) / -1);
+}
+.-top-l {
+  top: calc(var(--lumo-space-l) / -1);
+}
+.-top-xl {
+  top: calc(var(--lumo-space-xl) / -1);
+}
+.-top-full {
+  top: -100%;
+}
+.top-0 {
+  top: 0;
+}
+.top-xs {
+  top: var(--lumo-space-xs);
+}
+.top-s {
+  top: var(--lumo-space-s);
+}
+.top-m {
+  top: var(--lumo-space-m);
+}
+.top-l {
+  top: var(--lumo-space-l);
+}
+.top-xl {
+  top: var(--lumo-space-xl);
+}
+.top-auto {
+  top: auto;
+}
+.top-full {
+  top: 100%;
+}
+ /* === Visibility === */
+.invisible {
+  visibility: hidden;
+}
+.visible {
+  visibility: visible;
+}
+ /* === Z-index === */
+.z-10 {
+  z-index: 10;
+}
+.z-20 {
+  z-index: 20;
+}
+.z-30 {
+  z-index: 30;
+}
+.z-40 {
+  z-index: 40;
+}
+.z-50 {
+  z-index: 50;
 }
  /* === Responsive design === */
 @media (min-width: 640px) {
+  /* Display */
+  .sm\:block {
+    display: block;
+  }
   .sm\:flex {
     display: flex;
   }
+  .sm\grid {
+    display: grid;
+  }
   .sm\:hidden {
     display: none;
   }
+  .sm\:inline {
+    display: inline;
+  }
+  .sm\:inline-block {
+    display: inline-block;
+  }
+  .sm\:inline-flex {
+    display: inline-flex;
+  }
+  .sm\:inline-grid {
+    display: inline-grid;
+  }
+   /* Position */
+  .sm\:absolute {
+    position: absolute;
+  }
+  .sm\:fixed {
+    position: fixed;
+  }
+  .sm\:relative {
+    position: relative;
+  }
+  .sm\:static {
+    position: static;
+  }
+  .sm\:sticky {
+    position: sticky;
+  }
 }
 @media (min-width: 768px) {
+  /* Display */
+  .md\:block {
+    display: block;
+  }
   .md\:flex {
     display: flex;
   }
+  .md\grid {
+    display: grid;
+  }
   .md\:hidden {
     display: none;
   }
+  .md\:inline {
+    display: inline;
+  }
+  .md\:inline-block {
+    display: inline-block;
+  }
+  .md\:inline-flex {
+    display: inline-flex;
+  }
+  .md\:inline-grid {
+    display: inline-grid;
+  }
+   /* Position */
+  .md\:absolute {
+    position: absolute;
+  }
+  .md\:fixed {
+    position: fixed;
+  }
+  .md\:relative {
+    position: relative;
+  }
+  .md\:static {
+    position: static;
+  }
+  .md\:sticky {
+    position: sticky;
+  }
 }
 @media (min-width: 1024px) {
+  /* Display */
+  .lg\:block {
+    display: block;
+  }
   .lg\:flex {
     display: flex;
   }
+  .lg\grid {
+    display: grid;
+  }
   .lg\:hidden {
     display: none;
   }
+  .lg\:inline {
+    display: inline;
+  }
+  .lg\:inline-block {
+    display: inline-block;
+  }
+  .lg\:inline-flex {
+    display: inline-flex;
+  }
+  .lg\:inline-grid {
+    display: inline-grid;
+  }
+   /* Position */
+  .lg\:absolute {
+    position: absolute;
+  }
+  .lg\:fixed {
+    position: fixed;
+  }
+  .lg\:relative {
+    position: relative;
+  }
+  .lg\:static {
+    position: static;
+  }
+  .lg\:sticky {
+    position: sticky;
+  }
 }
 @media (min-width: 1280px) {
+  /* Display */
+  .xl\:block {
+    display: block;
+  }
   .xl\:flex {
     display: flex;
   }
+  .xl\grid {
+    display: grid;
+  }
   .xl\:hidden {
     display: none;
   }
+  .xl\:inline {
+    display: inline;
+  }
+  .xl\:inline-block {
+    display: inline-block;
+  }
+  .xl\:inline-flex {
+    display: inline-flex;
+  }
+  .xl\:inline-grid {
+    display: inline-grid;
+  }
+   /* Position */
+  .xl\:absolute {
+    position: absolute;
+  }
+  .xl\:fixed {
+    position: fixed;
+  }
+  .xl\:relative {
+    position: relative;
+  }
+  .xl\:static {
+    position: static;
+  }
+  .xl\:sticky {
+    position: sticky;
+  }
 }
 @media (min-width: 1536px) {
+  /* Display */
+  .\32xl\:block {
+    display: block;
+  }
   .\32xl\:flex {
     display: flex;
   }
+  .\32xl\grid {
+    display: grid;
+  }
   .\32xl\:hidden {
     display: none;
   }
+  .\32xl\:inline {
+    display: inline;
+  }
+  .\32xl\:inline-block {
+    display: inline-block;
+  }
+  .\32xl\:inline-flex {
+    display: inline-flex;
+  }
+  .\32xl\:inline-grid {
+    display: inline-grid;
+  }
+   /* Position */
+  .\32xl\:absolute {
+    position: absolute;
+  }
+  .\32xl\:fixed {
+    position: fixed;
+  }
+  .\32xl\:relative {
+    position: relative;
+  }
+  .\32xl\:static {
+    position: static;
+  }
+  .\32xl\:sticky {
+    position: sticky;
+  }
 }
 
-/* === Box shadows === */
+/* === Box shadow === */
 .shadow-xs {
   box-shadow: var(--lumo-box-shadow-xs);
 }
@@ -1049,8 +1612,20 @@
 }
 
 /* === Margin === */
-.m-auto {
-  margin: auto;
+.-m-xs {
+  margin: calc(var(--lumo-space-xs) / -1);
+}
+.-m-s {
+  margin: calc(var(--lumo-space-s) / -1);
+}
+.-m-m {
+  margin: calc(var(--lumo-space-m) / -1);
+}
+.-m-l {
+  margin: calc(var(--lumo-space-l) / -1);
+}
+.-m-xl {
+  margin: calc(var(--lumo-space-xl) / -1);
 }
 .m-0 {
   margin: 0;
@@ -1069,10 +1644,25 @@
 }
 .m-xl {
   margin: var(--lumo-space-xl);
+}
+.m-auto {
+  margin: auto;
 }
  /* === Margin (bottom) === */
-.mb-auto {
-  margin-bottom: auto;
+.-mb-xs {
+  margin-bottom: calc(var(--lumo-space-xs) / -1);
+}
+.-mb-s {
+  margin-bottom: calc(var(--lumo-space-s) / -1);
+}
+.-mb-m {
+  margin-bottom: calc(var(--lumo-space-m) / -1);
+}
+.-mb-l {
+  margin-bottom: calc(var(--lumo-space-l) / -1);
+}
+.-mb-xl {
+  margin-bottom: calc(var(--lumo-space-xl) / -1);
 }
 .mb-0 {
   margin-bottom: 0;
@@ -1091,10 +1681,25 @@
 }
 .mb-xl {
   margin-bottom: var(--lumo-space-xl);
+}
+.mb-auto {
+  margin-bottom: auto;
 }
  /* === Margin (end) === */
-.me-auto {
-  margin-inline-end: auto;
+.-me-xs {
+  margin-inline-end: calc(var(--lumo-space-xs) / -1);
+}
+.-me-s {
+  margin-inline-end: calc(var(--lumo-space-s) / -1);
+}
+.-me-m {
+  margin-inline-end: calc(var(--lumo-space-m) / -1);
+}
+.-me-l {
+  margin-inline-end: calc(var(--lumo-space-l) / -1);
+}
+.-me-xl {
+  margin-inline-end: calc(var(--lumo-space-xl) / -1);
 }
 .me-0 {
   margin-inline-end: 0;
@@ -1113,39 +1718,62 @@
 }
 .me-xl {
   margin-inline-end: var(--lumo-space-xl);
+}
+.me-auto {
+  margin-inline-end: auto;
 }
  /* === Margin (horizontal) === */
-.mx-auto {
-  margin-left: auto;
-  margin-right: auto;
+.-mx-xs {
+  margin-inline: calc(var(--lumo-space-xs) / -1);
+}
+.-mx-s {
+  margin-inline: calc(var(--lumo-space-s) / -1);
+}
+.-mx-m {
+  margin-inline: calc(var(--lumo-space-m) / -1);
+}
+.-mx-l {
+  margin-inline: calc(var(--lumo-space-l) / -1);
+}
+.-mx-xl {
+  margin-inline: calc(var(--lumo-space-xl) / -1);
 }
 .mx-0 {
-  margin-left: 0;
-  margin-right: 0;
+  margin-inline: 0;
 }
 .mx-xs {
-  margin-left: var(--lumo-space-xs);
-  margin-right: var(--lumo-space-xs);
+  margin-inline: var(--lumo-space-xs);
 }
 .mx-s {
-  margin-left: var(--lumo-space-s);
-  margin-right: var(--lumo-space-s);
+  margin-inline: var(--lumo-space-s);
 }
 .mx-m {
-  margin-left: var(--lumo-space-m);
-  margin-right: var(--lumo-space-m);
+  margin-inline: var(--lumo-space-m);
 }
 .mx-l {
-  margin-left: var(--lumo-space-l);
-  margin-right: var(--lumo-space-l);
+  margin-inline: var(--lumo-space-l);
 }
 .mx-xl {
-  margin-left: var(--lumo-space-xl);
-  margin-right: var(--lumo-space-xl);
+  margin-inline: var(--lumo-space-xl);
+}
+.mx-auto {
+  margin-inline: auto;
 }
  /* === Margin (left) === */
-.ml-auto {
-  margin-left: auto;
+.-ml-xs {
+  margin-left: calc(var(--lumo-space-xs) / -1);
+}
+.-ml-s {
+  margin-left: calc(var(--lumo-space-s) / -1);
+}
+.-ml-m {
+  margin-left: calc(var(--lumo-space-m) / -1);
+}
+.-ml-l {
+  margin-left: calc(var(--lumo-space-l) / -1);
+}
+.-ml-xl {
+  margin-left: calc(var(--lumo-space-xl) / -1);
 }
 .ml-0 {
   margin-left: 0;
@@ -1164,10 +1792,25 @@
 }
 .ml-xl {
   margin-left: var(--lumo-space-xl);
+}
+.ml-auto {
+  margin-left: auto;
 }
  /* === Margin (right) === */
-.mr-auto {
-  margin-right: auto;
+.-mr-xs {
+  margin-right: calc(var(--lumo-space-xs) / -1);
+}
+.-mr-s {
+  margin-right: calc(var(--lumo-space-s) / -1);
+}
+.-mr-m {
+  margin-right: calc(var(--lumo-space-m) / -1);
+}
+.-mr-l {
+  margin-right: calc(var(--lumo-space-l) / -1);
+}
+.-mr-xl {
+  margin-right: calc(var(--lumo-space-xl) / -1);
 }
 .mr-0 {
   margin-right: 0;
@@ -1186,10 +1829,25 @@
 }
 .mr-xl {
   margin-right: var(--lumo-space-xl);
+}
+.mr-auto {
+  margin-right: auto;
 }
  /* === Margin (start) === */
-.ms-auto {
-  margin-inline-start: auto;
+.-ms-xs {
+  margin-inline-start: calc(var(--lumo-space-xs) / -1);
+}
+.-ms-s {
+  margin-inline-start: calc(var(--lumo-space-s) / -1);
+}
+.-ms-m {
+  margin-inline-start: calc(var(--lumo-space-m) / -1);
+}
+.-ms-l {
+  margin-inline-start: calc(var(--lumo-space-l) / -1);
+}
+.-ms-xl {
+  margin-inline-start: calc(var(--lumo-space-xl) / -1);
 }
 .ms-0 {
   margin-inline-start: 0;
@@ -1208,10 +1866,25 @@
 }
 .ms-xl {
   margin-inline-start: var(--lumo-space-xl);
+}
+.ms-auto {
+  margin-inline-start: auto;
 }
  /* === Margin (top) === */
-.mt-auto {
-  margin-top: auto;
+.-mt-xs {
+  margin-top: calc(var(--lumo-space-xs) / -1);
+}
+.-mt-s {
+  margin-top: calc(var(--lumo-space-s) / -1);
+}
+.-mt-m {
+  margin-top: calc(var(--lumo-space-m) / -1);
+}
+.-mt-l {
+  margin-top: calc(var(--lumo-space-l) / -1);
+}
+.-mt-xl {
+  margin-top: calc(var(--lumo-space-xl) / -1);
 }
 .mt-0 {
   margin-top: 0;
@@ -1231,34 +1904,45 @@
 .mt-xl {
   margin-top: var(--lumo-space-xl);
 }
- /* === Margin (vertical) === */
-.my-auto {
-  margin-bottom: auto;
+.mt-auto {
   margin-top: auto;
+}
+ /* === Margin (vertical) === */
+.-my-xs {
+  margin-block: calc(var(--lumo-space-xs) / -1);
+}
+.-my-s {
+  margin-block: calc(var(--lumo-space-s) / -1);
+}
+.-my-m {
+  margin-block: calc(var(--lumo-space-m) / -1);
+}
+.-my-l {
+  margin-block: calc(var(--lumo-space-l) / -1);
+}
+.-my-xl {
+  margin-block: calc(var(--lumo-space-xl) / -1);
 }
 .my-0 {
-  margin-bottom: 0;
-  margin-top: 0;
+  margin-block: 0;
 }
 .my-xs {
-  margin-bottom: var(--lumo-space-xs);
-  margin-top: var(--lumo-space-xs);
+  margin-block: var(--lumo-space-xs);
 }
 .my-s {
-  margin-bottom: var(--lumo-space-s);
-  margin-top: var(--lumo-space-s);
+  margin-block: var(--lumo-space-s);
 }
 .my-m {
-  margin-bottom: var(--lumo-space-m);
-  margin-top: var(--lumo-space-m);
+  margin-block: var(--lumo-space-m);
 }
 .my-l {
-  margin-bottom: var(--lumo-space-l);
-  margin-top: var(--lumo-space-l);
+  margin-block: var(--lumo-space-l);
 }
 .my-xl {
-  margin-bottom: var(--lumo-space-xl);
-  margin-top: var(--lumo-space-xl);
+  margin-block: var(--lumo-space-xl);
+}
+.my-auto {
+  margin-block: auto;
 }
  /* === Padding === */
 .p-0 {
@@ -1444,6 +2128,30 @@
   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-all {
+  transition: all 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);
+}
+.transition-shadow {
+  transition: box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.transition-transform {
+  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
 /* === Font size === */
 .text-2xs {
   font-size: var(--lumo-font-size-xxs);
@@ -1496,6 +2204,30 @@
 }
 .font-black {
   font-weight: 900;
+}
+ /* === Line clamp === */
+[class*='line-clamp-'] {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+}
+.line-clamp-1 {
+  -webkit-line-clamp: 1;
+}
+.line-clamp-2 {
+  -webkit-line-clamp: 2;
+}
+.line-clamp-3 {
+  -webkit-line-clamp: 3;
+}
+.line-clamp-4 {
+  -webkit-line-clamp: 4;
+}
+.line-clamp-5 {
+  -webkit-line-clamp: 5;
+}
+.line-clamp-6 {
+  -webkit-line-clamp: 6;
 }
  /* === Line height === */
 .leading-none {
@@ -1566,6 +2298,16 @@
 }
 .text-warning-contrast {
   color: var(--lumo-warning-contrast-color);
+}
+ /* == Text decoration === */
+.line-through {
+  text-decoration-line: line-through;
+}
+.no-underline {
+  text-decoration-line: none;
+}
+.underline {
+  text-decoration-line: underline;
 }
  /* === Text overflow === */
 .overflow-clip {
@@ -1588,6 +2330,9 @@
 .whitespace-normal {
   white-space: normal;
 }
+.whitespace-break-spaces {
+  white-space: normal;
+}
 .whitespace-nowrap {
   white-space: nowrap;
 }