@vaadin/react-components 24.4.0-alpha10

package/css/lumo/mixins/MenuOverlay.css

@@ -0,0 +1,66 @@
+/* Generated file, do not edit */
+
+@import url(./MenuOverlayCore.css);
+
+
+  /* Small viewport (bottom sheet) styles */
+  /* Use direct media queries instead of the state attributes ([phone] and [fullscreen]) provided by the elements */
+  @media (max-width: 420px), (max-height: 420px) {
+    html {
+      top: 0 !important;
+      right: 0 !important;
+      bottom: var(--vaadin-overlay-viewport-bottom, 0) !important;
+      left: 0 !important;
+      align-items: stretch !important;
+      justify-content: flex-end !important;
+    }
+
+    [part='overlay'] {
+      max-height: 50vh;
+      width: 100vw;
+      border-radius: 0;
+      box-shadow: var(--lumo-box-shadow-xl);
+    }
+
+    /* The content part scrolls instead of the overlay part, because of the gradient fade-out */
+    [part='content'] {
+      padding: 30px var(--lumo-space-m);
+      max-height: inherit;
+      box-sizing: border-box;
+      -webkit-overflow-scrolling: touch;
+      overflow: auto;
+      -webkit-mask-image: linear-gradient(transparent, #000 40px, #000 calc(100% - 40px), transparent);
+      mask-image: linear-gradient(transparent, #000 40px, #000 calc(100% - 40px), transparent);
+    }
+
+    [part='backdrop'] {
+      display: block;
+    }
+
+    /* Animations */
+
+    :host([opening]) [part='overlay'] {
+      animation: 0.2s lumo-mobile-menu-overlay-enter cubic-bezier(0.215, 0.61, 0.355, 1) both;
+    }
+
+    :host([closing]),
+    :host([closing]) [part='backdrop'] {
+      animation-delay: 0.14s;
+    }
+
+    :host([closing]) [part='overlay'] {
+      animation: 0.14s 0.14s lumo-mobile-menu-overlay-exit cubic-bezier(0.55, 0.055, 0.675, 0.19) both;
+    }
+  }
+
+  @keyframes lumo-mobile-menu-overlay-enter {
+    0% {
+      transform: translateY(150%);
+    }
+  }
+
+  @keyframes lumo-mobile-menu-overlay-exit {
+    100% {
+      transform: translateY(150%);
+    }
+  }

package/css/lumo/mixins/MenuOverlayCore.css

@@ -0,0 +1,32 @@
+/* Generated file, do not edit */
+
+
+  html([opening]),
+  :host([closing]) {
+    animation: 0.14s lumo-overlay-dummy-animation;
+  }
+
+  [part='overlay'] {
+    will-change: opacity, transform;
+  }
+
+  :host([opening]) [part='overlay'] {
+    animation: 0.1s lumo-menu-overlay-enter ease-out both;
+  }
+
+  @keyframes lumo-menu-overlay-enter {
+    0% {
+      opacity: 0;
+      transform: translateY(-4px);
+    }
+  }
+
+  :host([closing]) [part='overlay'] {
+    animation: 0.1s lumo-menu-overlay-exit both;
+  }
+
+  @keyframes lumo-menu-overlay-exit {
+    100% {
+      opacity: 0;
+    }
+  }

package/css/lumo/mixins/Overlay.css

@@ -0,0 +1,65 @@
+/* Generated file, do not edit */
+
+
+  html {
+    top: var(--lumo-space-m);
+    right: var(--lumo-space-m);
+    bottom: var(--lumo-space-m);
+    left: var(--lumo-space-m);
+    /* Workaround for Edge issue (only on Surface), where an overflowing vaadin-list-box inside vaadin-select-overlay makes the overlay transparent */
+    /* stylelint-disable-next-line */
+    outline: 0px solid transparent;
+  }
+
+  [part='overlay'] {
+    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);
+    color: var(--lumo-body-text-color);
+    font-family: var(--lumo-font-family);
+    font-size: var(--lumo-font-size-m);
+    font-weight: 400;
+    line-height: var(--lumo-line-height-m);
+    letter-spacing: 0;
+    text-transform: none;
+    -webkit-text-size-adjust: 100%;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  [part='content'] {
+    padding: var(--lumo-space-xs);
+  }
+
+  [part='backdrop'] {
+    background-color: var(--lumo-shade-20pct);
+    animation: 0.2s lumo-overlay-backdrop-enter both;
+    will-change: opacity;
+  }
+
+  @keyframes lumo-overlay-backdrop-enter {
+    0% {
+      opacity: 0;
+    }
+  }
+
+  :host([closing]) [part='backdrop'] {
+    animation: 0.2s lumo-overlay-backdrop-exit both;
+  }
+
+  @keyframes lumo-overlay-backdrop-exit {
+    100% {
+      opacity: 0;
+    }
+  }
+
+  @keyframes lumo-overlay-dummy-animation {
+    0% {
+      opacity: 1;
+    }
+
+    100% {
+      opacity: 1;
+    }
+  }

package/css/lumo/mixins/RequiredField.css

@@ -0,0 +1,114 @@
+/* Generated file, do not edit */
+
+
+  [part='label'] {
+    align-self: flex-start;
+    color: var(--vaadin-input-field-label-color, var(--lumo-secondary-text-color));
+    font-weight: var(--vaadin-input-field-label-font-weight, 500);
+    font-size: var(--vaadin-input-field-label-font-size, var(--lumo-font-size-s));
+    margin-left: calc(var(--lumo-border-radius-m) / 4);
+    transition: color 0.2s;
+    line-height: 1;
+    padding-right: 1em;
+    padding-bottom: 0.5em;
+    /* As a workaround for diacritics being cut off, add a top padding and a
+    negative margin to compensate */
+    padding-top: 0.25em;
+    margin-top: -0.25em;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    position: relative;
+    max-width: 100%;
+    box-sizing: border-box;
+  }
+
+  html([focused]:not([readonly])) [part='label'] {
+    color: var(--vaadin-input-field-focused-label-color, var(--lumo-primary-text-color));
+  }
+
+  :host(:hover:not([readonly]):not([focused])) [part='label'] {
+    color: var(--vaadin-input-field-hovered-label-color, var(--lumo-body-text-color));
+  }
+
+  /* Touch device adjustment */
+  @media (pointer: coarse) {
+    :host(:hover:not([readonly]):not([focused])) [part='label'] {
+      color: var(--vaadin-input-field-label-color, var(--lumo-secondary-text-color));
+    }
+  }
+
+  :host([has-label])::before {
+    margin-top: calc(var(--lumo-font-size-s) * 1.5);
+  }
+
+  :host([has-label][theme~='small'])::before {
+    margin-top: calc(var(--lumo-font-size-xs) * 1.5);
+  }
+
+  :host([has-label]) {
+    padding-top: var(--lumo-space-m);
+  }
+
+  :host([has-label]) ::slotted([slot='tooltip']) {
+    --vaadin-tooltip-offset-bottom: calc((var(--lumo-space-m) - var(--lumo-space-xs)) * -1);
+  }
+
+  :host([required]) [part='required-indicator']::after {
+    content: var(--lumo-required-field-indicator, '\\2022');
+    transition: opacity 0.2s;
+    color: var(--lumo-required-field-indicator-color, var(--lumo-primary-text-color));
+    position: absolute;
+    right: 0;
+    width: 1em;
+    text-align: center;
+  }
+
+  :host([invalid]) [part='required-indicator']::after {
+    color: var(--lumo-required-field-indicator-color, var(--lumo-error-text-color));
+  }
+
+  [part='error-message'] {
+    margin-left: calc(var(--lumo-border-radius-m) / 4);
+    font-size: var(--vaadin-input-field-error-font-size, var(--lumo-font-size-xs));
+    line-height: var(--lumo-line-height-xs);
+    font-weight: var(--vaadin-input-field-error-font-weight, 400);
+    color: var(--vaadin-input-field-error-color, var(--lumo-error-text-color));
+    will-change: max-height;
+    transition: 0.4s max-height;
+    max-height: 5em;
+  }
+
+  :host([has-error-message]) [part='error-message']::before,
+  :host([has-error-message]) [part='error-message']::after {
+    content: '';
+    display: block;
+    height: 0.4em;
+  }
+
+  :host(:not([invalid])) [part='error-message'] {
+    max-height: 0;
+    overflow: hidden;
+  }
+
+  /* RTL specific styles */
+
+  :host([dir='rtl']) [part='label'] {
+    margin-left: 0;
+    margin-right: calc(var(--lumo-border-radius-m) / 4);
+  }
+
+  :host([dir='rtl']) [part='label'] {
+    padding-left: 1em;
+    padding-right: 0;
+  }
+
+  :host([dir='rtl']) [part='required-indicator']::after {
+    right: auto;
+    left: 0;
+  }
+
+  :host([dir='rtl']) [part='error-message'] {
+    margin-left: 0;
+    margin-right: calc(var(--lumo-border-radius-m) / 4);
+  }

package/css/lumo/utilities/Accessibility.module.css

@@ -0,0 +1,15 @@
+/* Generated file, do not edit */
+
+
+  /* === Screen readers === */
+  .sr-only {
+    border-width: 0;
+    clip: rect(0, 0, 0, 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+  }

package/css/lumo/utilities/Background.module.css

@@ -0,0 +1,150 @@
+/* Generated file, do not edit */
+
+
+  /* === Background color === */
+  .bg-base {
+    background-color: var(--lumo-base-color);
+  }
+
+  .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);
+  }
+  .bg-contrast-10 {
+    background-color: var(--lumo-contrast-10pct);
+  }
+  .bg-contrast-20 {
+    background-color: var(--lumo-contrast-20pct);
+  }
+  .bg-contrast-30 {
+    background-color: var(--lumo-contrast-30pct);
+  }
+  .bg-contrast-40 {
+    background-color: var(--lumo-contrast-40pct);
+  }
+  .bg-contrast-50 {
+    background-color: var(--lumo-contrast-50pct);
+  }
+  .bg-contrast-60 {
+    background-color: var(--lumo-contrast-60pct);
+  }
+  .bg-contrast-70 {
+    background-color: var(--lumo-contrast-70pct);
+  }
+  .bg-contrast-80 {
+    background-color: var(--lumo-contrast-80pct);
+  }
+  .bg-contrast-90 {
+    background-color: var(--lumo-contrast-90pct);
+  }
+  .bg-contrast {
+    background-color: var(--lumo-contrast);
+  }
+
+  .bg-primary {
+    background-color: var(--lumo-primary-color);
+  }
+  .bg-primary-50 {
+    background-color: var(--lumo-primary-color-50pct);
+  }
+  .bg-primary-10 {
+    background-color: var(--lumo-primary-color-10pct);
+  }
+
+  .bg-error {
+    background-color: var(--lumo-error-color);
+  }
+  .bg-error-50 {
+    background-color: var(--lumo-error-color-50pct);
+  }
+  .bg-error-10 {
+    background-color: var(--lumo-error-color-10pct);
+  }
+
+  .bg-success {
+    background-color: var(--lumo-success-color);
+  }
+  .bg-success-50 {
+    background-color: var(--lumo-success-color-50pct);
+  }
+  .bg-success-10 {
+    background-color: var(--lumo-success-color-10pct);
+  }
+
+  .bg-warning {
+    background-color: var(--lumo-warning-color);
+  }
+  .bg-warning-10 {
+    background-color: var(--lumo-warning-color-10pct);
+  }

package/css/lumo/utilities/Border.module.css

@@ -0,0 +1,141 @@
+/* Generated file, do not edit */
+
+
+  /* === Border === */
+  .border-0 {
+    border: none;
+  }
+  .border {
+    border: 1px var(--lumo-utility-border-style, solid) var(--lumo-utility-border-color, var(--lumo-contrast-10pct));
+  }
+  .border-b {
+    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 var(--lumo-utility-border-style, solid)
+      var(--lumo-utility-border-color, var(--lumo-contrast-10pct));
+  }
+  .border-r {
+    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 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-10 {
+    --lumo-utility-border-color: var(--lumo-contrast-10pct);
+  }
+  .border-contrast-20 {
+    --lumo-utility-border-color: var(--lumo-contrast-20pct);
+  }
+  .border-contrast-30 {
+    --lumo-utility-border-color: var(--lumo-contrast-30pct);
+  }
+  .border-contrast-40 {
+    --lumo-utility-border-color: var(--lumo-contrast-40pct);
+  }
+  .border-contrast-50 {
+    --lumo-utility-border-color: var(--lumo-contrast-50pct);
+  }
+  .border-contrast-60 {
+    --lumo-utility-border-color: var(--lumo-contrast-60pct);
+  }
+  .border-contrast-70 {
+    --lumo-utility-border-color: var(--lumo-contrast-70pct);
+  }
+  .border-contrast-80 {
+    --lumo-utility-border-color: var(--lumo-contrast-80pct);
+  }
+  .border-contrast-90 {
+    --lumo-utility-border-color: var(--lumo-contrast-90pct);
+  }
+  .border-contrast {
+    --lumo-utility-border-color: var(--lumo-contrast);
+  }
+
+  .border-primary {
+    --lumo-utility-border-color: var(--lumo-primary-color);
+  }
+  .border-primary-50 {
+    --lumo-utility-border-color: var(--lumo-primary-color-50pct);
+  }
+  .border-primary-10 {
+    --lumo-utility-border-color: var(--lumo-primary-color-10pct);
+  }
+
+  .border-error {
+    --lumo-utility-border-color: var(--lumo-error-color);
+  }
+  .border-error-50 {
+    --lumo-utility-border-color: var(--lumo-error-color-50pct);
+  }
+  .border-error-10 {
+    --lumo-utility-border-color: var(--lumo-error-color-10pct);
+  }
+
+  .border-success {
+    --lumo-utility-border-color: var(--lumo-success-color);
+  }
+  .border-success-50 {
+    --lumo-utility-border-color: var(--lumo-success-color-50pct);
+  }
+  .border-success-10 {
+    --lumo-utility-border-color: var(--lumo-success-color-10pct);
+  }
+
+  .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 radius === */
+  .rounded-none {
+    border-radius: 0;
+  }
+  .rounded-s {
+    border-radius: var(--lumo-border-radius-s);
+  }
+  .rounded-m {
+    border-radius: var(--lumo-border-radius-m);
+  }
+  .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));
+  }

package/css/lumo/utilities/Filter.module.css

@@ -0,0 +1,28 @@
+/* Generated file, do not edit */
+
+
+  /* === 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);
+  }