@vaadin/react-components 25.0.0-alpha7 → 25.0.0-beta1

package/css/lumo/utilities/Layout.module.css

@@ -1,498 +1,629 @@
-/* Generated file, do not edit */
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+/* === Aspect ratio === */
+.aspect-square {
+  aspect-ratio: 1 / 1;
+}
 
+.aspect-video {
+  aspect-ratio: 16 / 9;
+}
 
-  /* === Aspect ratio === */
-  .aspect-square {
-    aspect-ratio: 1 / 1;
-  }
-  .aspect-video {
-    aspect-ratio: 16 / 9;
-  }
+/* === Box sizing === */
+.box-border {
+  box-sizing: border-box;
+}
 
-  /* === Box sizing === */
-  .box-border {
-    box-sizing: border-box;
-  }
-  .box-content {
-    box-sizing: content-box;
-  }
+.box-content {
+  box-sizing: content-box;
+}
+
+/* === Display === */
+.block {
+  display: block;
+}
+
+.flex {
+  display: flex;
+}
+
+.grid {
+  display: grid;
+}
+
+.hidden {
+  display: none;
+}
+
+.inline {
+  display: inline;
+}
+
+.inline-block {
+  display: inline-block;
+}
+
+.inline-flex {
+  display: inline-flex;
+}
+
+.inline-grid {
+  display: inline-grid;
+}
+
+/* === Overflow === */
+.overflow-auto {
+  overflow: auto;
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+.overflow-scroll {
+  overflow: scroll;
+}
+
+/* === Position === */
+.absolute {
+  position: absolute;
+}
+
+.fixed {
+  position: fixed;
+}
+
+.static {
+  position: static;
+}
+
+.sticky {
+  position: sticky;
+}
+
+.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);
+}
 
-  /* === Display === */
-  .block {
+.-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-0 {
+  z-index: 0;
+}
+
+.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;
+}
+
+.z-auto {
+  z-index: auto;
+}
+
+/* === Responsive design === */
+@media (min-width: 640px) {
+  /* Display */
+  .sm\:block {
     display: block;
   }
-  .flex {
+
+  .sm\:flex {
     display: flex;
   }
-  .grid {
+
+  .sm\:grid {
     display: grid;
   }
-  .hidden {
+
+  .sm\:hidden {
     display: none;
   }
-  .inline {
+
+  .sm\:inline {
     display: inline;
   }
-  .inline-block {
+
+  .sm\:inline-block {
     display: inline-block;
   }
-  .inline-flex {
+
+  .sm\:inline-flex {
     display: inline-flex;
   }
-  .inline-grid {
-    display: inline-grid;
-  }
 
-  /* === Overflow === */
-  .overflow-auto {
-    overflow: auto;
-  }
-  .overflow-hidden {
-    overflow: hidden;
-  }
-  .overflow-scroll {
-    overflow: scroll;
+  .sm\:inline-grid {
+    display: inline-grid;
   }
 
-  /* === Position === */
-  .absolute {
+  /* Position */
+  .sm\:absolute {
     position: absolute;
   }
-  .fixed {
+
+  .sm\:fixed {
     position: fixed;
   }
-  .static {
-    position: static;
-  }
-  .sticky {
-    position: sticky;
-  }
-  .relative {
+
+  .sm\: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);
+  .sm\:static {
+    position: static;
   }
-  .-bottom-l {
-    bottom: calc(var(--lumo-space-l) / -1);
+
+  .sm\:sticky {
+    position: sticky;
   }
-  .-bottom-xl {
-    bottom: calc(var(--lumo-space-xl) / -1);
+}
+@media (min-width: 768px) {
+  /* Display */
+  .md\:block {
+    display: block;
   }
-  .-bottom-full {
-    bottom: -100%;
+
+  .md\:flex {
+    display: flex;
   }
-  .bottom-0 {
-    bottom: 0;
+
+  .md\:grid {
+    display: grid;
   }
-  .bottom-xs {
-    bottom: var(--lumo-space-xs);
+
+  .md\:hidden {
+    display: none;
   }
-  .bottom-s {
-    bottom: var(--lumo-space-s);
+
+  .md\:inline {
+    display: inline;
   }
-  .bottom-m {
-    bottom: var(--lumo-space-m);
+
+  .md\:inline-block {
+    display: inline-block;
   }
-  .bottom-l {
-    bottom: var(--lumo-space-l);
+
+  .md\:inline-flex {
+    display: inline-flex;
   }
-  .bottom-xl {
-    bottom: var(--lumo-space-xl);
+
+  .md\:inline-grid {
+    display: inline-grid;
   }
-  .bottom-auto {
-    bottom: auto;
+
+  /* Position */
+  .md\:absolute {
+    position: absolute;
   }
-  .bottom-full {
-    bottom: 100%;
+
+  .md\:fixed {
+    position: fixed;
   }
 
-  .-end-xs {
-    inset-inline-end: calc(var(--lumo-space-xs) / -1);
+  .md\:relative {
+    position: relative;
   }
-  .-end-s {
-    inset-inline-end: calc(var(--lumo-space-s) / -1);
+
+  .md\:static {
+    position: static;
   }
-  .-end-m {
-    inset-inline-end: calc(var(--lumo-space-m) / -1);
+
+  .md\:sticky {
+    position: sticky;
   }
-  .-end-l {
-    inset-inline-end: calc(var(--lumo-space-l) / -1);
+}
+@media (min-width: 1024px) {
+  /* Display */
+  .lg\:block {
+    display: block;
   }
-  .-end-xl {
-    inset-inline-end: calc(var(--lumo-space-xl) / -1);
+
+  .lg\:flex {
+    display: flex;
   }
-  .-end-full {
-    inset-inline-end: -100%;
+
+  .lg\:grid {
+    display: grid;
   }
-  .end-0 {
-    inset-inline-end: 0;
+
+  .lg\:hidden {
+    display: none;
   }
-  .end-xs {
-    inset-inline-end: var(--lumo-space-xs);
+
+  .lg\:inline {
+    display: inline;
   }
-  .end-s {
-    inset-inline-end: var(--lumo-space-s);
+
+  .lg\:inline-block {
+    display: inline-block;
   }
-  .end-m {
-    inset-inline-end: var(--lumo-space-m);
+
+  .lg\:inline-flex {
+    display: inline-flex;
   }
-  .end-l {
-    inset-inline-end: var(--lumo-space-l);
+
+  .lg\:inline-grid {
+    display: inline-grid;
   }
-  .end-xl {
-    inset-inline-end: var(--lumo-space-xl);
+
+  /* Position */
+  .lg\:absolute {
+    position: absolute;
   }
-  .end-auto {
-    inset-inline-end: auto;
+
+  .lg\:fixed {
+    position: fixed;
   }
-  .end-full {
-    inset-inline-end: 100%;
+
+  .lg\:relative {
+    position: relative;
   }
 
-  .-start-xs {
-    inset-inline-start: calc(var(--lumo-space-xs) / -1);
+  .lg\:static {
+    position: static;
   }
-  .-start-s {
-    inset-inline-start: calc(var(--lumo-space-s) / -1);
+
+  .lg\:sticky {
+    position: sticky;
   }
-  .-start-m {
-    inset-inline-start: calc(var(--lumo-space-m) / -1);
+}
+@media (min-width: 1280px) {
+  /* Display */
+  .xl\:block {
+    display: block;
   }
-  .-start-l {
-    inset-inline-start: calc(var(--lumo-space-l) / -1);
+
+  .xl\:flex {
+    display: flex;
   }
-  .-start-xl {
-    inset-inline-start: calc(var(--lumo-space-xl) / -1);
+
+  .xl\:grid {
+    display: grid;
   }
-  .-start-full {
-    inset-inline-start: -100%;
+
+  .xl\:hidden {
+    display: none;
   }
-  .start-0 {
-    inset-inline-start: 0;
+
+  .xl\:inline {
+    display: inline;
   }
-  .start-xs {
-    inset-inline-start: var(--lumo-space-xs);
+
+  .xl\:inline-block {
+    display: inline-block;
   }
-  .start-s {
-    inset-inline-start: var(--lumo-space-s);
+
+  .xl\:inline-flex {
+    display: inline-flex;
   }
-  .start-m {
-    inset-inline-start: var(--lumo-space-m);
+
+  .xl\:inline-grid {
+    display: inline-grid;
   }
-  .start-l {
-    inset-inline-start: var(--lumo-space-l);
+
+  /* Position */
+  .xl\:absolute {
+    position: absolute;
   }
-  .start-xl {
-    inset-inline-start: var(--lumo-space-xl);
+
+  .xl\:fixed {
+    position: fixed;
   }
-  .start-auto {
-    inset-inline-start: auto;
+
+  .xl\:relative {
+    position: relative;
   }
-  .start-full {
-    inset-inline-start: 100%;
+
+  .xl\:static {
+    position: static;
   }
 
-  .-top-xs {
-    top: calc(var(--lumo-space-xs) / -1);
+  .xl\:sticky {
+    position: sticky;
   }
-  .-top-s {
-    top: calc(var(--lumo-space-s) / -1);
+}
+@media (min-width: 1536px) {
+  /* Display */
+  .\32xl\:block {
+    display: block;
   }
-  .-top-m {
-    top: calc(var(--lumo-space-m) / -1);
+
+  .\32xl\:flex {
+    display: flex;
   }
-  .-top-l {
-    top: calc(var(--lumo-space-l) / -1);
+
+  .\32xl\:grid {
+    display: grid;
   }
-  .-top-xl {
-    top: calc(var(--lumo-space-xl) / -1);
+
+  .\32xl\:hidden {
+    display: none;
   }
-  .-top-full {
-    top: -100%;
+
+  .\32xl\:inline {
+    display: inline;
   }
-  .top-0 {
-    top: 0;
+
+  .\32xl\:inline-block {
+    display: inline-block;
   }
-  .top-xs {
-    top: var(--lumo-space-xs);
+
+  .\32xl\:inline-flex {
+    display: inline-flex;
   }
-  .top-s {
-    top: var(--lumo-space-s);
+
+  .\32xl\:inline-grid {
+    display: inline-grid;
   }
-  .top-m {
-    top: var(--lumo-space-m);
+
+  /* Position */
+  .\32xl\:absolute {
+    position: absolute;
   }
-  .top-l {
-    top: var(--lumo-space-l);
+
+  .\32xl\:fixed {
+    position: fixed;
   }
-  .top-xl {
-    top: var(--lumo-space-xl);
+
+  .\32xl\:relative {
+    position: relative;
   }
-  .top-auto {
-    top: auto;
+
+  .\32xl\:static {
+    position: static;
   }
-  .top-full {
-    top: 100%;
-  }
-
-  /* === Visibility === */
-  .invisible {
-    visibility: hidden;
-  }
-  .visible {
-    visibility: visible;
-  }
-
-  /* === Z-index === */
-  .z-0 {
-    z-index: 0;
-  }
-  .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;
-  }
-  .z-auto {
-    z-index: auto;
-  }
-
-  /* === 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;
-    }
+
+  .\32xl\:sticky {
+    position: sticky;
   }
+}