@vaadin/react-components 25.0.0-alpha8 → 25.0.0-beta2

package/css/lumo/mixins/RequiredField.css

@@ -1,103 +0,0 @@
-/* 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));
-    transition: color 0.2s;
-    line-height: 1;
-    padding-inline-start: calc(var(--lumo-border-radius-m) / 4);
-    padding-inline-end: 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');
-    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='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/FlexboxAndGrid.module.css

@@ -1,613 +0,0 @@
-/* Generated file, do not edit */
-
-
-  /* === Align content === */
-  .content-center {
-    align-content: center;
-  }
-  .content-end {
-    align-content: flex-end;
-  }
-  .content-start {
-    align-content: flex-start;
-  }
-  .content-around {
-    align-content: space-around;
-  }
-  .content-between {
-    align-content: space-between;
-  }
-  .content-evenly {
-    align-content: space-evenly;
-  }
-  .content-stretch {
-    align-content: stretch;
-  }
-
-  /* === Align items === */
-  .items-baseline {
-    align-items: baseline;
-  }
-  .items-center {
-    align-items: center;
-  }
-  .items-end {
-    align-items: flex-end;
-  }
-  .items-start {
-    align-items: flex-start;
-  }
-  .items-stretch {
-    align-items: stretch;
-  }
-
-  /* === Align self === */
-  .self-auto {
-    align-self: auto;
-  }
-  .self-baseline {
-    align-self: baseline;
-  }
-  .self-center {
-    align-self: center;
-  }
-  .self-end {
-    align-self: flex-end;
-  }
-  .self-start {
-    align-self: flex-start;
-  }
-  .self-stretch {
-    align-self: stretch;
-  }
-
-  /* === Flex === */
-  .flex-1 {
-    flex: 1 1 0%;
-  }
-  .flex-auto {
-    flex: 1 1 auto;
-  }
-  .flex-none {
-    flex: none;
-  }
-
-  /* === Flex direction === */
-  .flex-col {
-    flex-direction: column;
-  }
-  .flex-col-reverse {
-    flex-direction: column-reverse;
-  }
-  .flex-row {
-    flex-direction: row;
-  }
-  .flex-row-reverse {
-    flex-direction: row-reverse;
-  }
-
-  /* === Flex grow === */
-  .flex-grow {
-    flex-grow: 1;
-  }
-  .flex-grow-0 {
-    flex-grow: 0;
-  }
-
-  /* === Flex shrink === */
-  .flex-shrink {
-    flex-shrink: 1;
-  }
-  .flex-shrink-0 {
-    flex-shrink: 0;
-  }
-
-  /* === Flex wrap === */
-  .flex-nowrap {
-    flex-wrap: nowrap;
-  }
-  .flex-wrap {
-    flex-wrap: wrap;
-  }
-  .flex-wrap-reverse {
-    flex-wrap: wrap-reverse;
-  }
-
-  /* === Gap === */
-  .gap-xs {
-    gap: var(--lumo-space-xs);
-  }
-  .gap-s {
-    gap: var(--lumo-space-s);
-  }
-  .gap-m {
-    gap: var(--lumo-space-m);
-  }
-  .gap-l {
-    gap: var(--lumo-space-l);
-  }
-  .gap-xl {
-    gap: var(--lumo-space-xl);
-  }
-
-  /* === Gap (column) === */
-  .gap-x-xs {
-    column-gap: var(--lumo-space-xs);
-  }
-  .gap-x-s {
-    column-gap: var(--lumo-space-s);
-  }
-  .gap-x-m {
-    column-gap: var(--lumo-space-m);
-  }
-  .gap-x-l {
-    column-gap: var(--lumo-space-l);
-  }
-  .gap-x-xl {
-    column-gap: var(--lumo-space-xl);
-  }
-
-  /* === Gap (row) === */
-  .gap-y-xs {
-    row-gap: var(--lumo-space-xs);
-  }
-  .gap-y-s {
-    row-gap: var(--lumo-space-s);
-  }
-  .gap-y-m {
-    row-gap: var(--lumo-space-m);
-  }
-  .gap-y-l {
-    row-gap: var(--lumo-space-l);
-  }
-  .gap-y-xl {
-    row-gap: var(--lumo-space-xl);
-  }
-
-  /* === Grid auto flow === */
-  .grid-flow-col {
-    grid-auto-flow: column;
-  }
-  .grid-flow-row {
-    grid-auto-flow: row;
-  }
-
-  /* === Grid columns === */
-  .grid-cols-1 {
-    grid-template-columns: repeat(1, minmax(0, 1fr));
-  }
-  .grid-cols-2 {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-  .grid-cols-3 {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-  .grid-cols-4 {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-  }
-  .grid-cols-5 {
-    grid-template-columns: repeat(5, minmax(0, 1fr));
-  }
-  .grid-cols-6 {
-    grid-template-columns: repeat(6, minmax(0, 1fr));
-  }
-  .grid-cols-7 {
-    grid-template-columns: repeat(7, minmax(0, 1fr));
-  }
-  .grid-cols-8 {
-    grid-template-columns: repeat(8, minmax(0, 1fr));
-  }
-  .grid-cols-9 {
-    grid-template-columns: repeat(9, minmax(0, 1fr));
-  }
-  .grid-cols-10 {
-    grid-template-columns: repeat(10, minmax(0, 1fr));
-  }
-  .grid-cols-11 {
-    grid-template-columns: repeat(11, minmax(0, 1fr));
-  }
-  .grid-cols-12 {
-    grid-template-columns: repeat(12, minmax(0, 1fr));
-  }
-
-  /* === Grid rows === */
-  .grid-rows-1 {
-    grid-template-rows: repeat(1, minmax(0, 1fr));
-  }
-  .grid-rows-2 {
-    grid-template-rows: repeat(2, minmax(0, 1fr));
-  }
-  .grid-rows-3 {
-    grid-template-rows: repeat(3, minmax(0, 1fr));
-  }
-  .grid-rows-4 {
-    grid-template-rows: repeat(4, minmax(0, 1fr));
-  }
-  .grid-rows-5 {
-    grid-template-rows: repeat(5, minmax(0, 1fr));
-  }
-  .grid-rows-6 {
-    grid-template-rows: repeat(6, minmax(0, 1fr));
-  }
-
-  /* === Justify content === */
-  .justify-center {
-    justify-content: center;
-  }
-  .justify-end {
-    justify-content: flex-end;
-  }
-  .justify-start {
-    justify-content: flex-start;
-  }
-  .justify-around {
-    justify-content: space-around;
-  }
-  .justify-between {
-    justify-content: space-between;
-  }
-  .justify-evenly {
-    justify-content: space-evenly;
-  }
-
-  /* === Span (column) === */
-  .col-span-1 {
-    grid-column: span 1 / span 1;
-  }
-  .col-span-2 {
-    grid-column: span 2 / span 2;
-  }
-  .col-span-3 {
-    grid-column: span 3 / span 3;
-  }
-  .col-span-4 {
-    grid-column: span 4 / span 4;
-  }
-  .col-span-5 {
-    grid-column: span 5 / span 5;
-  }
-  .col-span-6 {
-    grid-column: span 6 / span 6;
-  }
-  .col-span-7 {
-    grid-column: span 7 / span 7;
-  }
-  .col-span-8 {
-    grid-column: span 8 / span 8;
-  }
-  .col-span-9 {
-    grid-column: span 9 / span 9;
-  }
-  .col-span-10 {
-    grid-column: span 10 / span 10;
-  }
-  .col-span-11 {
-    grid-column: span 11 / span 11;
-  }
-  .col-span-12 {
-    grid-column: span 12 / span 12;
-  }
-  .col-span-full {
-    grid-column: 1 / -1;
-  }
-
-  /* === Span (row) === */
-  .row-span-1 {
-    grid-row: span 1 / span 1;
-  }
-  .row-span-2 {
-    grid-row: span 2 / span 2;
-  }
-  .row-span-3 {
-    grid-row: span 3 / span 3;
-  }
-  .row-span-4 {
-    grid-row: span 4 / span 4;
-  }
-  .row-span-5 {
-    grid-row: span 5 / span 5;
-  }
-  .row-span-6 {
-    grid-row: span 6 / span 6;
-  }
-  .row-span-full {
-    grid-row: 1 / -1;
-  }
-
-  /* === 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;
-    }
-    .sm\\:flex-row {
-      flex-direction: row;
-    }
-    .sm\\:grid-cols-1 {
-      grid-template-columns: repeat(1, minmax(0, 1fr));
-    }
-    .sm\\:grid-cols-2 {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-    .sm\\:grid-cols-3 {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-    }
-    .sm\\:grid-cols-4 {
-      grid-template-columns: repeat(4, minmax(0, 1fr));
-    }
-    .sm\\:grid-cols-5 {
-      grid-template-columns: repeat(5, minmax(0, 1fr));
-    }
-    .sm\\:grid-cols-6 {
-      grid-template-columns: repeat(6, minmax(0, 1fr));
-    }
-    .sm\\:grid-cols-7 {
-      grid-template-columns: repeat(7, minmax(0, 1fr));
-    }
-    .sm\\:grid-cols-8 {
-      grid-template-columns: repeat(8, minmax(0, 1fr));
-    }
-    .sm\\:grid-cols-9 {
-      grid-template-columns: repeat(9, minmax(0, 1fr));
-    }
-    .sm\\:grid-cols-10 {
-      grid-template-columns: repeat(10, minmax(0, 1fr));
-    }
-    .sm\\:grid-cols-11 {
-      grid-template-columns: repeat(11, minmax(0, 1fr));
-    }
-    .sm\\:grid-cols-12 {
-      grid-template-columns: repeat(12, minmax(0, 1fr));
-    }
-  }
-
-  @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;
-    }
-    .md\\:flex-row {
-      flex-direction: row;
-    }
-    .md\\:grid-cols-1 {
-      grid-template-columns: repeat(1, minmax(0, 1fr));
-    }
-    .md\\:grid-cols-2 {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-    .md\\:grid-cols-3 {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-    }
-    .md\\:grid-cols-4 {
-      grid-template-columns: repeat(4, minmax(0, 1fr));
-    }
-    .md\\:grid-cols-5 {
-      grid-template-columns: repeat(5, minmax(0, 1fr));
-    }
-    .md\\:grid-cols-6 {
-      grid-template-columns: repeat(6, minmax(0, 1fr));
-    }
-    .md\\:grid-cols-7 {
-      grid-template-columns: repeat(7, minmax(0, 1fr));
-    }
-    .md\\:grid-cols-8 {
-      grid-template-columns: repeat(8, minmax(0, 1fr));
-    }
-    .md\\:grid-cols-9 {
-      grid-template-columns: repeat(9, minmax(0, 1fr));
-    }
-    .md\\:grid-cols-10 {
-      grid-template-columns: repeat(10, minmax(0, 1fr));
-    }
-    .md\\:grid-cols-11 {
-      grid-template-columns: repeat(11, minmax(0, 1fr));
-    }
-    .md\\:grid-cols-12 {
-      grid-template-columns: repeat(12, minmax(0, 1fr));
-    }
-  }
-  @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;
-    }
-    .lg\\:flex-row {
-      flex-direction: row;
-    }
-    .lg\\:grid-cols-1 {
-      grid-template-columns: repeat(1, minmax(0, 1fr));
-    }
-    .lg\\:grid-cols-2 {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-    .lg\\:grid-cols-3 {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-    }
-    .lg\\:grid-cols-4 {
-      grid-template-columns: repeat(4, minmax(0, 1fr));
-    }
-    .lg\\:grid-cols-5 {
-      grid-template-columns: repeat(5, minmax(0, 1fr));
-    }
-    .lg\\:grid-cols-6 {
-      grid-template-columns: repeat(6, minmax(0, 1fr));
-    }
-    .lg\\:grid-cols-7 {
-      grid-template-columns: repeat(7, minmax(0, 1fr));
-    }
-    .lg\\:grid-cols-8 {
-      grid-template-columns: repeat(8, minmax(0, 1fr));
-    }
-    .lg\\:grid-cols-9 {
-      grid-template-columns: repeat(9, minmax(0, 1fr));
-    }
-    .lg\\:grid-cols-10 {
-      grid-template-columns: repeat(10, minmax(0, 1fr));
-    }
-    .lg\\:grid-cols-11 {
-      grid-template-columns: repeat(11, minmax(0, 1fr));
-    }
-    .lg\\:grid-cols-12 {
-      grid-template-columns: repeat(12, minmax(0, 1fr));
-    }
-  }
-  @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;
-    }
-    .xl\\:flex-row {
-      flex-direction: row;
-    }
-    .xl\\:grid-cols-1 {
-      grid-template-columns: repeat(1, minmax(0, 1fr));
-    }
-    .xl\\:grid-cols-2 {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-    .xl\\:grid-cols-3 {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-    }
-    .xl\\:grid-cols-4 {
-      grid-template-columns: repeat(4, minmax(0, 1fr));
-    }
-    .xl\\:grid-cols-5 {
-      grid-template-columns: repeat(5, minmax(0, 1fr));
-    }
-    .xl\\:grid-cols-6 {
-      grid-template-columns: repeat(6, minmax(0, 1fr));
-    }
-    .xl\\:grid-cols-7 {
-      grid-template-columns: repeat(7, minmax(0, 1fr));
-    }
-    .xl\\:grid-cols-8 {
-      grid-template-columns: repeat(8, minmax(0, 1fr));
-    }
-    .xl\\:grid-cols-9 {
-      grid-template-columns: repeat(9, minmax(0, 1fr));
-    }
-    .xl\\:grid-cols-10 {
-      grid-template-columns: repeat(10, minmax(0, 1fr));
-    }
-    .xl\\:grid-cols-11 {
-      grid-template-columns: repeat(11, minmax(0, 1fr));
-    }
-    .xl\\:grid-cols-12 {
-      grid-template-columns: repeat(12, minmax(0, 1fr));
-    }
-  }
-  @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;
-    }
-    .\\32xl\\:flex-row {
-      flex-direction: row;
-    }
-    .\\32xl\\:grid-cols-1 {
-      grid-template-columns: repeat(1, minmax(0, 1fr));
-    }
-    .\\32xl\\:grid-cols-2 {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-    .\\32xl\\:grid-cols-3 {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-    }
-    .\\32xl\\:grid-cols-4 {
-      grid-template-columns: repeat(4, minmax(0, 1fr));
-    }
-    .\\32xl\\:grid-cols-5 {
-      grid-template-columns: repeat(5, minmax(0, 1fr));
-    }
-    .\\32xl\\:grid-cols-6 {
-      grid-template-columns: repeat(6, minmax(0, 1fr));
-    }
-    .\\32xl\\:grid-cols-7 {
-      grid-template-columns: repeat(7, minmax(0, 1fr));
-    }
-    .\\32xl\\:grid-cols-8 {
-      grid-template-columns: repeat(8, minmax(0, 1fr));
-    }
-    .\\32xl\\:grid-cols-9 {
-      grid-template-columns: repeat(9, minmax(0, 1fr));
-    }
-    .\\32xl\\:grid-cols-10 {
-      grid-template-columns: repeat(10, minmax(0, 1fr));
-    }
-    .\\32xl\\:grid-cols-11 {
-      grid-template-columns: repeat(11, minmax(0, 1fr));
-    }
-    .\\32xl\\:grid-cols-12 {
-      grid-template-columns: repeat(12, minmax(0, 1fr));
-    }
-  }