@vaadin/react-components 24.4.0-alpha3

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

@@ -0,0 +1,492 @@
+/* Generated file, do not edit */
+
+
+  /* === Aspect ratio === */
+  .aspect-square {
+    aspect-ratio: 1 / 1;
+  }
+  .aspect-video {
+    aspect-ratio: 16 / 9;
+  }
+
+  /* === Box sizing === */
+  .box-border {
+    box-sizing: border-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);
+  }
+  .-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;
+    }
+  }

package/css/lumo/utilities/Shadows.module.css

@@ -0,0 +1,19 @@
+/* Generated file, do not edit */
+
+
+  /* === Box shadow === */
+  .shadow-xs {
+    box-shadow: var(--lumo-box-shadow-xs);
+  }
+  .shadow-s {
+    box-shadow: var(--lumo-box-shadow-s);
+  }
+  .shadow-m {
+    box-shadow: var(--lumo-box-shadow-m);
+  }
+  .shadow-l {
+    box-shadow: var(--lumo-box-shadow-l);
+  }
+  .shadow-xl {
+    box-shadow: var(--lumo-box-shadow-xl);
+  }

package/css/lumo/utilities/Sizing.module.css

@@ -0,0 +1,115 @@
+/* Generated file, do not edit */
+
+
+  /* === Height === */
+  .h-0 {
+    height: 0;
+  }
+  .h-xs {
+    height: var(--lumo-size-xs);
+  }
+  .h-s {
+    height: var(--lumo-size-s);
+  }
+  .h-m {
+    height: var(--lumo-size-m);
+  }
+  .h-l {
+    height: var(--lumo-size-l);
+  }
+  .h-xl {
+    height: var(--lumo-size-xl);
+  }
+  .h-auto {
+    height: auto;
+  }
+  .h-full {
+    height: 100%;
+  }
+  .h-screen {
+    height: 100vh;
+  }
+
+  /* === Height (max) === */
+  .max-h-full {
+    max-height: 100%;
+  }
+  .max-h-screen {
+    max-height: 100vh;
+  }
+
+  /* === Height (min) === */
+  .min-h-0 {
+    min-height: 0;
+  }
+  .min-h-full {
+    min-height: 100%;
+  }
+  .min-h-screen {
+    min-height: 100vh;
+  }
+
+  /* === Icon sizing === */
+  .icon-s {
+    height: var(--lumo-icon-size-s);
+    width: var(--lumo-icon-size-s);
+  }
+  .icon-m {
+    height: var(--lumo-icon-size-m);
+    width: var(--lumo-icon-size-m);
+  }
+  .icon-l {
+    height: var(--lumo-icon-size-l);
+    width: var(--lumo-icon-size-l);
+  }
+
+  /* === Width === */
+  .w-xs {
+    width: var(--lumo-size-xs);
+  }
+  .w-s {
+    width: var(--lumo-size-s);
+  }
+  .w-m {
+    width: var(--lumo-size-m);
+  }
+  .w-l {
+    width: var(--lumo-size-l);
+  }
+  .w-xl {
+    width: var(--lumo-size-xl);
+  }
+  .w-auto {
+    width: auto;
+  }
+  .w-full {
+    width: 100%;
+  }
+
+  /* === Width (max) === */
+  .max-w-full {
+    max-width: 100%;
+  }
+  .max-w-screen-sm {
+    max-width: 640px;
+  }
+  .max-w-screen-md {
+    max-width: 768px;
+  }
+  .max-w-screen-lg {
+    max-width: 1024px;
+  }
+  .max-w-screen-xl {
+    max-width: 1280px;
+  }
+  .max-w-screen-2xl {
+    max-width: 1536px;
+  }
+
+  /* === Width (min) === */
+  .min-w-0 {
+    min-width: 0;
+  }
+  .min-w-full {
+    min-width: 100%;
+  }