@vaadin/react-components 24.5.0-alpha1 → 24.5.0-alpha11

package/TabSheet.d.ts

@@ -31,8 +31,8 @@ type TabSheetTabProps = Omit<TabProps, 'selected' | 'value'> & {
 export declare const TabSheetTab: (_props: TabSheetTabProps) => null;
 export type TabSheetProps = Partial<Omit<_TabSheetProps, 'items'>>;
 declare const ForwardedTabSheet: React.ForwardRefExoticComponent<Partial<Omit<Partial<import("./utils/createComponent.js").ThemedWebComponentProps<TabSheetElement, Readonly<{
-    onItemsChanged: import("@lit/react").EventName<import("@vaadin/tabsheet/src/vaadin-tabsheet.js").TabSheetItemsChangedEvent>;
-    onSelectedChanged: import("@lit/react").EventName<import("@vaadin/tabsheet/src/vaadin-tabsheet.js").TabSheetSelectedChangedEvent>;
+    onItemsChanged: import("@lit/react").EventName<import("@vaadin/tabsheet").TabSheetEventMap["items-changed"]>;
+    onSelectedChanged: import("@lit/react").EventName<import("@vaadin/tabsheet").TabSheetEventMap["selected-changed"]>;
 }>>>, "items">> & React.RefAttributes<TabSheetElement>>;
 export { ForwardedTabSheet as TabSheet };
 /**

package/TimePicker.d.ts

@@ -1,12 +1,11 @@
-/// <reference types="react" />
 import { type TimePickerElement } from './generated/TimePicker.js';
 export * from './generated/TimePicker.js';
 export declare const TimePicker: import("react").ForwardRefExoticComponent<Partial<import("./utils/createComponent.js").ThemedWebComponentProps<TimePickerElement, Readonly<{
-    onValidated: import("@lit/react").EventName<import("@vaadin/time-picker/src/vaadin-time-picker.js").TimePickerValidatedEvent>;
-    onChange: import("@lit/react").EventName<import("@vaadin/time-picker/src/vaadin-time-picker.js").TimePickerChangeEvent>;
-    onInput: import("@lit/react").EventName<Event>;
-    onValueChanged: import("@lit/react").EventName<import("@vaadin/time-picker/src/vaadin-time-picker.js").TimePickerValueChangedEvent>;
-    onOpenedChanged: import("@lit/react").EventName<import("@vaadin/time-picker/src/vaadin-time-picker.js").TimePickerOpenedChangedEvent>;
-    onInvalidChanged: import("@lit/react").EventName<import("@vaadin/time-picker/src/vaadin-time-picker.js").TimePickerInvalidChangedEvent>;
+    onValidated: import("@lit/react").EventName<import("@vaadin/time-picker").TimePickerEventMap["validated"]>;
+    onChange: import("@lit/react").EventName<import("@vaadin/time-picker").TimePickerEventMap["change"]>;
+    onInput: import("@lit/react").EventName<import("@vaadin/time-picker").TimePickerEventMap["input"]>;
+    onValueChanged: import("@lit/react").EventName<import("@vaadin/time-picker").TimePickerEventMap["value-changed"]>;
+    onOpenedChanged: import("@lit/react").EventName<import("@vaadin/time-picker").TimePickerEventMap["opened-changed"]>;
+    onInvalidChanged: import("@lit/react").EventName<import("@vaadin/time-picker").TimePickerEventMap["invalid-changed"]>;
 }>>> & import("react").RefAttributes<TimePickerElement>>;
 //# sourceMappingURL=TimePicker.d.ts.map

package/TimePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimePicker.d.ts","sourceRoot":"","sources":["src/TimePicker.tsx"],"names":[],"mappings":";AACA,OAAO,EAA6B,KAAK,iBAAiB,EAAwB,MAAM,2BAA2B,CAAC;AAGpH,cAAc,2BAA2B,CAAC;AAE1C,eAAO,MAAM,UAAU;;;;;;;wDAEtB,CAAC"}
+{"version":3,"file":"TimePicker.d.ts","sourceRoot":"","sources":["src/TimePicker.tsx"],"names":[],"mappings":"AACA,OAAO,EAA6B,KAAK,iBAAiB,EAAwB,MAAM,2BAA2B,CAAC;AAGpH,cAAc,2BAA2B,CAAC;AAE1C,eAAO,MAAM,UAAU;;;;;;;wDAEtB,CAAC"}

package/VirtualList.d.ts

@@ -1,5 +1,5 @@
 import { type ComponentType, type ReactElement, type RefAttributes } from 'react';
-import { type VirtualListElement, type VirtualListItemModel, type VirtualListProps as _VirtualListProps } from './generated/VirtualList.js';
+import { type VirtualListDefaultItem, type VirtualListElement, type VirtualListItemModel, type VirtualListProps as _VirtualListProps } from './generated/VirtualList.js';
 import { type ReactModelRendererProps } from './renderers/useModelRenderer.js';
 export * from './generated/VirtualList.js';
 export type VirtualListReactRendererProps<TItem> = ReactModelRendererProps<TItem, VirtualListItemModel<TItem>, VirtualListElement<TItem>>;
@@ -7,6 +7,6 @@ export type VirtualListProps<TItem> = Partial<Omit<_VirtualListProps<TItem>, 'ch
     children?: ComponentType<VirtualListReactRendererProps<TItem>> | null;
     renderer?: ComponentType<VirtualListReactRendererProps<TItem>> | null;
 }>;
-declare const ForwardedVirtualList: <TItem = any>(props: VirtualListProps<TItem> & RefAttributes<VirtualListElement<TItem>>) => ReactElement | null;
+declare const ForwardedVirtualList: <TItem = VirtualListDefaultItem>(props: VirtualListProps<TItem> & RefAttributes<VirtualListElement<TItem>>) => ReactElement | null;
 export { ForwardedVirtualList as VirtualList };
 //# sourceMappingURL=VirtualList.d.ts.map

package/VirtualList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VirtualList.d.ts","sourceRoot":"","sources":["src/VirtualList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,aAAa,EAAiC,KAAK,YAAY,EAAE,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AACjH,OAAO,EAGL,KAAK,kBAAkB,EACvB,KAAK,oBAAoB,EACzB,KAAK,gBAAgB,IAAI,iBAAiB,EAC3C,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,KAAK,uBAAuB,EAAoB,MAAM,iCAAiC,CAAC;AAEjG,cAAc,4BAA4B,CAAC;AAE3C,MAAM,MAAM,6BAA6B,CAAC,KAAK,IAAI,uBAAuB,CACxE,KAAK,EACL,oBAAoB,CAAC,KAAK,CAAC,EAC3B,kBAAkB,CAAC,KAAK,CAAC,CAC1B,CAAC;AAEF,MAAM,MAAM,gBAAgB,CAAC,KAAK,IAAI,OAAO,CAAC,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC,CAAC,GACpG,QAAQ,CAAC;IACP,QAAQ,CAAC,EAAE,aAAa,CAAC,6BAA6B,CAAC,KAAK,CAAC,CAAC,GAAG,IAAI,CAAC;IACtE,QAAQ,CAAC,EAAE,aAAa,CAAC,6BAA6B,CAAC,KAAK,CAAC,CAAC,GAAG,IAAI,CAAC;CACvE,CAAC,CAAC;AAeL,QAAA,MAAM,oBAAoB,uBACjB,iBAAiB,KAAK,CAAC,GAAG,cAAc,mBAAmB,KAAK,CAAC,CAAC,KACtE,YAAY,GAAG,IAAI,CAAC;AAEzB,OAAO,EAAE,oBAAoB,IAAI,WAAW,EAAE,CAAC"}
+{"version":3,"file":"VirtualList.d.ts","sourceRoot":"","sources":["src/VirtualList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,aAAa,EAAiC,KAAK,YAAY,EAAE,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AACjH,OAAO,EAEL,KAAK,sBAAsB,EAC3B,KAAK,kBAAkB,EACvB,KAAK,oBAAoB,EACzB,KAAK,gBAAgB,IAAI,iBAAiB,EAC3C,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,KAAK,uBAAuB,EAAoB,MAAM,iCAAiC,CAAC;AAEjG,cAAc,4BAA4B,CAAC;AAE3C,MAAM,MAAM,6BAA6B,CAAC,KAAK,IAAI,uBAAuB,CACxE,KAAK,EACL,oBAAoB,CAAC,KAAK,CAAC,EAC3B,kBAAkB,CAAC,KAAK,CAAC,CAC1B,CAAC;AAEF,MAAM,MAAM,gBAAgB,CAAC,KAAK,IAAI,OAAO,CAAC,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC,CAAC,GACpG,QAAQ,CAAC;IACP,QAAQ,CAAC,EAAE,aAAa,CAAC,6BAA6B,CAAC,KAAK,CAAC,CAAC,GAAG,IAAI,CAAC;IACtE,QAAQ,CAAC,EAAE,aAAa,CAAC,6BAA6B,CAAC,KAAK,CAAC,CAAC,GAAG,IAAI,CAAC;CACvE,CAAC,CAAC;AAeL,QAAA,MAAM,oBAAoB,EAA8B,CAAC,KAA8B,GAAtB,sBAAsB,EACrF,KAAK,EAAE,gBAAgB,CAAC,KAAK,CAAC,GAAG,aAAa,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAC,KACtE,YAAY,GAAG,IAAI,CAAC;AAEzB,OAAO,EAAE,oBAAoB,IAAI,WAAW,EAAE,CAAC"}

package/css/lumo/Badge.css

@@ -89,15 +89,15 @@
 
   /* Icon */
 
-  [theme~='badge'] vaadin-icon {
+  [theme~='badge'] > vaadin-icon {
     margin: -0.25em 0;
   }
 
-  [theme~='badge'] vaadin-icon:first-child {
+  [theme~='badge'] > vaadin-icon:first-child {
     margin-left: -0.375em;
   }
 
-  [theme~='badge'] vaadin-icon:last-child {
+  [theme~='badge'] > vaadin-icon:last-child {
     margin-right: -0.375em;
   }
 

package/css/lumo/Globals.css

@@ -33,6 +33,8 @@
     --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-checkbox-disabled-checkmark-color: var(--lumo-contrast-30pct);
+    --vaadin-checkbox-disabled-background: var(--lumo-contrast-10pct);
     /* Radio button */
     --vaadin-radio-button-background: var(--lumo-contrast-20pct);
     --vaadin-radio-button-background-hover: var(--lumo-contrast-30pct);
@@ -43,6 +45,8 @@
     --vaadin-radio-button-label-padding: var(--lumo-space-xs) var(--lumo-space-s) var(--lumo-space-xs)
       var(--lumo-space-xs);
     --vaadin-radio-button-size: calc(var(--lumo-size-m) / 2);
+    --vaadin-radio-button-disabled-background: var(--lumo-contrast-10pct);
+    --vaadin-radio-button-disabled-dot-color: var(--lumo-contrast-30pct);
     --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);
@@ -69,6 +73,8 @@
     --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-disabled-background: var(--lumo-contrast-5pct);
+    --vaadin-input-field-disabled-value-color: var(--lumo-disabled-text-color);
     --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);

package/css/lumo/mixins/Overlay.css

@@ -15,7 +15,9 @@
     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);
+    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);

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

@@ -10,106 +10,106 @@
     background-color: transparent;
   }
 
-  .bg-tint-5 {
-    background-color: var(--lumo-tint-5pct);
+  .bg-tint {
+    background-color: var(--lumo-tint);
   }
-  .bg-tint-10 {
-    background-color: var(--lumo-tint-10pct);
+  .bg-tint-90 {
+    background-color: var(--lumo-tint-90pct);
   }
-  .bg-tint-20 {
-    background-color: var(--lumo-tint-20pct);
+  .bg-tint-80 {
+    background-color: var(--lumo-tint-80pct);
   }
-  .bg-tint-30 {
-    background-color: var(--lumo-tint-30pct);
+  .bg-tint-70 {
+    background-color: var(--lumo-tint-70pct);
   }
-  .bg-tint-40 {
-    background-color: var(--lumo-tint-40pct);
+  .bg-tint-60 {
+    background-color: var(--lumo-tint-60pct);
   }
   .bg-tint-50 {
     background-color: var(--lumo-tint-50pct);
   }
-  .bg-tint-60 {
-    background-color: var(--lumo-tint-60pct);
+  .bg-tint-40 {
+    background-color: var(--lumo-tint-40pct);
   }
-  .bg-tint-70 {
-    background-color: var(--lumo-tint-70pct);
+  .bg-tint-30 {
+    background-color: var(--lumo-tint-30pct);
   }
-  .bg-tint-80 {
-    background-color: var(--lumo-tint-80pct);
+  .bg-tint-20 {
+    background-color: var(--lumo-tint-20pct);
   }
-  .bg-tint-90 {
-    background-color: var(--lumo-tint-90pct);
+  .bg-tint-10 {
+    background-color: var(--lumo-tint-10pct);
   }
-  .bg-tint {
-    background-color: var(--lumo-tint);
+  .bg-tint-5 {
+    background-color: var(--lumo-tint-5pct);
   }
 
-  .bg-shade-5 {
-    background-color: var(--lumo-shade-5pct);
+  .bg-shade {
+    background-color: var(--lumo-shade);
   }
-  .bg-shade-10 {
-    background-color: var(--lumo-shade-10pct);
+  .bg-shade-90 {
+    background-color: var(--lumo-shade-90pct);
   }
-  .bg-shade-20 {
-    background-color: var(--lumo-shade-20pct);
+  .bg-shade-80 {
+    background-color: var(--lumo-shade-80pct);
   }
-  .bg-shade-30 {
-    background-color: var(--lumo-shade-30pct);
+  .bg-shade-70 {
+    background-color: var(--lumo-shade-70pct);
   }
-  .bg-shade-40 {
-    background-color: var(--lumo-shade-40pct);
+  .bg-shade-60 {
+    background-color: var(--lumo-shade-60pct);
   }
   .bg-shade-50 {
     background-color: var(--lumo-shade-50pct);
   }
-  .bg-shade-60 {
-    background-color: var(--lumo-shade-60pct);
+  .bg-shade-40 {
+    background-color: var(--lumo-shade-40pct);
   }
-  .bg-shade-70 {
-    background-color: var(--lumo-shade-70pct);
+  .bg-shade-30 {
+    background-color: var(--lumo-shade-30pct);
   }
-  .bg-shade-80 {
-    background-color: var(--lumo-shade-80pct);
+  .bg-shade-20 {
+    background-color: var(--lumo-shade-20pct);
   }
-  .bg-shade-90 {
-    background-color: var(--lumo-shade-90pct);
+  .bg-shade-10 {
+    background-color: var(--lumo-shade-10pct);
   }
-  .bg-shade {
-    background-color: var(--lumo-shade);
+  .bg-shade-5 {
+    background-color: var(--lumo-shade-5pct);
   }
 
-  .bg-contrast-5 {
-    background-color: var(--lumo-contrast-5pct);
+  .bg-contrast {
+    background-color: var(--lumo-contrast);
   }
-  .bg-contrast-10 {
-    background-color: var(--lumo-contrast-10pct);
+  .bg-contrast-90 {
+    background-color: var(--lumo-contrast-90pct);
   }
-  .bg-contrast-20 {
-    background-color: var(--lumo-contrast-20pct);
+  .bg-contrast-80 {
+    background-color: var(--lumo-contrast-80pct);
   }
-  .bg-contrast-30 {
-    background-color: var(--lumo-contrast-30pct);
+  .bg-contrast-70 {
+    background-color: var(--lumo-contrast-70pct);
   }
-  .bg-contrast-40 {
-    background-color: var(--lumo-contrast-40pct);
+  .bg-contrast-60 {
+    background-color: var(--lumo-contrast-60pct);
   }
   .bg-contrast-50 {
     background-color: var(--lumo-contrast-50pct);
   }
-  .bg-contrast-60 {
-    background-color: var(--lumo-contrast-60pct);
+  .bg-contrast-40 {
+    background-color: var(--lumo-contrast-40pct);
   }
-  .bg-contrast-70 {
-    background-color: var(--lumo-contrast-70pct);
+  .bg-contrast-30 {
+    background-color: var(--lumo-contrast-30pct);
   }
-  .bg-contrast-80 {
-    background-color: var(--lumo-contrast-80pct);
+  .bg-contrast-20 {
+    background-color: var(--lumo-contrast-20pct);
   }
-  .bg-contrast-90 {
-    background-color: var(--lumo-contrast-90pct);
+  .bg-contrast-10 {
+    background-color: var(--lumo-contrast-10pct);
   }
-  .bg-contrast {
-    background-color: var(--lumo-contrast);
+  .bg-contrast-5 {
+    background-color: var(--lumo-contrast-5pct);
   }
 
   .bg-primary {

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

@@ -5,6 +5,12 @@
   .border-0 {
     border: none;
   }
+  .border-dashed {
+    --lumo-utility-border-style: dashed;
+  }
+  .border-dotted {
+    --lumo-utility-border-style: dotted;
+  }
   .border {
     border: 1px var(--lumo-utility-border-style, solid) var(--lumo-utility-border-color, var(--lumo-contrast-10pct));
   }
@@ -31,46 +37,40 @@
   .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 {
+    --lumo-utility-border-color: var(--lumo-contrast);
   }
-  .border-contrast-10 {
-    --lumo-utility-border-color: var(--lumo-contrast-10pct);
+  .border-contrast-90 {
+    --lumo-utility-border-color: var(--lumo-contrast-90pct);
   }
-  .border-contrast-20 {
-    --lumo-utility-border-color: var(--lumo-contrast-20pct);
+  .border-contrast-80 {
+    --lumo-utility-border-color: var(--lumo-contrast-80pct);
   }
-  .border-contrast-30 {
-    --lumo-utility-border-color: var(--lumo-contrast-30pct);
+  .border-contrast-70 {
+    --lumo-utility-border-color: var(--lumo-contrast-70pct);
   }
-  .border-contrast-40 {
-    --lumo-utility-border-color: var(--lumo-contrast-40pct);
+  .border-contrast-60 {
+    --lumo-utility-border-color: var(--lumo-contrast-60pct);
   }
   .border-contrast-50 {
     --lumo-utility-border-color: var(--lumo-contrast-50pct);
   }
-  .border-contrast-60 {
-    --lumo-utility-border-color: var(--lumo-contrast-60pct);
+  .border-contrast-40 {
+    --lumo-utility-border-color: var(--lumo-contrast-40pct);
   }
-  .border-contrast-70 {
-    --lumo-utility-border-color: var(--lumo-contrast-70pct);
+  .border-contrast-30 {
+    --lumo-utility-border-color: var(--lumo-contrast-30pct);
   }
-  .border-contrast-80 {
-    --lumo-utility-border-color: var(--lumo-contrast-80pct);
+  .border-contrast-20 {
+    --lumo-utility-border-color: var(--lumo-contrast-20pct);
   }
-  .border-contrast-90 {
-    --lumo-utility-border-color: var(--lumo-contrast-90pct);
+  .border-contrast-10 {
+    --lumo-utility-border-color: var(--lumo-contrast-10pct);
   }
-  .border-contrast {
-    --lumo-utility-border-color: var(--lumo-contrast);
+  .border-contrast-5 {
+    --lumo-utility-border-color: var(--lumo-contrast-5pct);
   }
 
   .border-primary {
@@ -106,12 +106,12 @@
   .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-warning-10 {
+    --lumo-utility-border-color: var(--lumo-warning-color-10pct);
+  }
 
   /* === Border radius === */
   .rounded-none {

package/css/lumo/utilities/FlexboxAndGrid.module.css

@@ -62,8 +62,11 @@
   }
 
   /* === Flex === */
+  .flex-1 {
+    flex: 1 1 0%;
+  }
   .flex-auto {
-    flex: auto;
+    flex: 1 1 auto;
   }
   .flex-none {
     flex: none;
@@ -84,20 +87,20 @@
   }
 
   /* === Flex grow === */
-  .flex-grow-0 {
-    flex-grow: 0;
-  }
   .flex-grow {
     flex-grow: 1;
   }
+  .flex-grow-0 {
+    flex-grow: 0;
+  }
 
   /* === Flex shrink === */
-  .flex-shrink-0 {
-    flex-shrink: 0;
-  }
   .flex-shrink {
     flex-shrink: 1;
   }
+  .flex-shrink-0 {
+    flex-shrink: 0;
+  }
 
   /* === Flex wrap === */
   .flex-nowrap {
@@ -313,6 +316,21 @@
 
   /* === 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;
     }
@@ -358,6 +376,21 @@
   }
 
   @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;
     }
@@ -402,6 +435,21 @@
     }
   }
   @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;
     }
@@ -446,6 +494,21 @@
     }
   }
   @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;
     }
@@ -490,6 +553,21 @@
     }
   }
   @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;
     }

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

@@ -253,6 +253,9 @@
   }
 
   /* === Z-index === */
+  .z-0 {
+    z-index: 0;
+  }
   .z-10 {
     z-index: 10;
   }
@@ -268,6 +271,9 @@
   .z-50 {
     z-index: 50;
   }
+  .z-auto {
+    z-index: auto;
+  }
 
   /* === Responsive design === */
   @media (min-width: 640px) {

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

@@ -2,6 +2,9 @@
 
 
   /* === Box shadow === */
+  .shadow-none {
+    box-shadow: none;
+  }
   .shadow-xs {
     box-shadow: var(--lumo-box-shadow-xs);
   }

package/css/lumo/utilities/Transition.module.css

@@ -1,20 +1,35 @@
 /* Generated file, do not edit */
 
 
-  .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-none {
+    transition: none;
   }
   .transition-all {
     transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
   }
+  .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-colors {
-    transition: color, background-color, border-color, text-decoration-color, fill,
+    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);
   }

package/generated/Accordion.d.ts

@@ -12,5 +12,5 @@ export type AccordionProps = WebComponentProps<AccordionElement, AccordionEventM
 export declare const Accordion: (props: Partial<import("../utils/createComponent.js").ThemedWebComponentProps<AccordionElement, Readonly<{
     onOpenedChanged: EventName<_AccordionEventMap["opened-changed"]>;
     onItemsChanged: EventName<_AccordionEventMap["items-changed"]>;
-}>>> & React.RefAttributes<AccordionElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+}>>> & React.RefAttributes<AccordionElement>) => React.ReactElement | null;
 //# sourceMappingURL=Accordion.d.ts.map

package/generated/Accordion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../src/generated/Accordion.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,EAAE,SAAS,IAAI,gBAAgB,EAAE,KAAK,iBAAiB,IAAI,kBAAkB,EAAG,MAAM,uCAAuC,CAAC;AACrI,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAmB,KAAK,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AACtF,cAAc,uCAAuC,CAAC;AACtD,OAAO,EAAE,gBAAgB,GAAG,CAAC;AAC7B,MAAM,MAAM,iBAAiB,GAAG,QAAQ,CAAC;IACrC,eAAe,EAAE,SAAS,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC,CAAC;IACjE,cAAc,EAAE,SAAS,CAAC,kBAAkB,CAAC,eAAe,CAAC,CAAC,CAAC;CAClE,CAAC,CAAC;AAEH,MAAM,MAAM,cAAc,GAAG,iBAAiB,CAAC,gBAAgB,EAAE,iBAAiB,CAAC,CAAC;AACpF,eAAO,MAAM,SAAS;qBALD,UAAU,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;oBAChD,UAAU,kBAAkB,CAAC,eAAe,CAAC,CAAC;0HAMhE,CAAC"}
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../src/generated/Accordion.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,EAAE,SAAS,IAAI,gBAAgB,EAAE,KAAK,iBAAiB,IAAI,kBAAkB,EAAG,MAAM,uCAAuC,CAAC;AACrI,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAmB,KAAK,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AACtF,cAAc,uCAAuC,CAAC;AACtD,OAAO,EAAE,gBAAgB,GAAG,CAAC;AAC7B,MAAM,MAAM,iBAAiB,GAAG,QAAQ,CAAC;IACrC,eAAe,EAAE,SAAS,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC,CAAC;IACjE,cAAc,EAAE,SAAS,CAAC,kBAAkB,CAAC,eAAe,CAAC,CAAC,CAAC;CAClE,CAAC,CAAC;AAEH,MAAM,MAAM,cAAc,GAAG,iBAAiB,CAAC,gBAAgB,EAAE,iBAAiB,CAAC,CAAC;AACpF,eAAO,MAAM,SAAS;qBALD,SAAS,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;oBAChD,SAAS,CAAC,kBAAkB,CAAC,eAAe,CAAC,CAAC;0EAMhE,CAAC"}

package/generated/AccordionHeading.d.ts

@@ -5,5 +5,5 @@ export * from "@vaadin/accordion/vaadin-accordion-heading.js";
 export { AccordionHeadingElement, };
 export type AccordionHeadingEventMap = Readonly<{}>;
 export type AccordionHeadingProps = WebComponentProps<AccordionHeadingElement, AccordionHeadingEventMap>;
-export declare const AccordionHeading: (props: Partial<import("../utils/createComponent.js").ThemedWebComponentProps<AccordionHeadingElement, Readonly<{}>>> & React.RefAttributes<AccordionHeadingElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+export declare const AccordionHeading: (props: Partial<import("../utils/createComponent.js").ThemedWebComponentProps<AccordionHeadingElement, Readonly<{}>>> & React.RefAttributes<AccordionHeadingElement>) => React.ReactElement | null;
 //# sourceMappingURL=AccordionHeading.d.ts.map

package/generated/AccordionHeading.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionHeading.d.ts","sourceRoot":"","sources":["../src/generated/AccordionHeading.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,IAAI,uBAAuB,EAAG,MAAM,+CAA+C,CAAC;AAC7G,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAmB,KAAK,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AACtF,cAAc,+CAA+C,CAAC;AAC9D,OAAO,EAAE,uBAAuB,GAAG,CAAC;AACpC,MAAM,MAAM,wBAAwB,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;AAEpD,MAAM,MAAM,qBAAqB,GAAG,iBAAiB,CAAC,uBAAuB,EAAE,wBAAwB,CAAC,CAAC;AACzG,eAAO,MAAM,gBAAgB,oPAE3B,CAAC"}
+{"version":3,"file":"AccordionHeading.d.ts","sourceRoot":"","sources":["../src/generated/AccordionHeading.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,IAAI,uBAAuB,EAAG,MAAM,+CAA+C,CAAC;AAC7G,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAmB,KAAK,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AACtF,cAAc,+CAA+C,CAAC;AAC9D,OAAO,EAAE,uBAAuB,GAAG,CAAC;AACpC,MAAM,MAAM,wBAAwB,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;AAEpD,MAAM,MAAM,qBAAqB,GAAG,iBAAiB,CAAC,uBAAuB,EAAE,wBAAwB,CAAC,CAAC;AACzG,eAAO,MAAM,gBAAgB,oMAE3B,CAAC"}

package/generated/AccordionPanel.d.ts

@@ -10,5 +10,5 @@ export type AccordionPanelEventMap = Readonly<{
 export type AccordionPanelProps = WebComponentProps<AccordionPanelElement, AccordionPanelEventMap>;
 export declare const AccordionPanel: (props: Partial<import("../utils/createComponent.js").ThemedWebComponentProps<AccordionPanelElement, Readonly<{
     onOpenedChanged: EventName<_AccordionPanelEventMap["opened-changed"]>;
-}>>> & React.RefAttributes<AccordionPanelElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+}>>> & React.RefAttributes<AccordionPanelElement>) => React.ReactElement | null;
 //# sourceMappingURL=AccordionPanel.d.ts.map

package/generated/AccordionPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionPanel.d.ts","sourceRoot":"","sources":["../src/generated/AccordionPanel.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,EAAE,cAAc,IAAI,qBAAqB,EAAE,KAAK,sBAAsB,IAAI,uBAAuB,EAAG,MAAM,6CAA6C,CAAC;AAC/J,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAmB,KAAK,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AACtF,cAAc,6CAA6C,CAAC;AAC5D,OAAO,EAAE,qBAAqB,GAAG,CAAC;AAClC,MAAM,MAAM,sBAAsB,GAAG,QAAQ,CAAC;IAC1C,eAAe,EAAE,SAAS,CAAC,uBAAuB,CAAC,gBAAgB,CAAC,CAAC,CAAC;CACzE,CAAC,CAAC;AAEH,MAAM,MAAM,mBAAmB,GAAG,iBAAiB,CAAC,qBAAqB,EAAE,sBAAsB,CAAC,CAAC;AACnG,eAAO,MAAM,cAAc;qBAJN,UAAU,uBAAuB,CAAC,gBAAgB,CAAC,CAAC;+HAMvE,CAAC"}
+{"version":3,"file":"AccordionPanel.d.ts","sourceRoot":"","sources":["../src/generated/AccordionPanel.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,EAAE,cAAc,IAAI,qBAAqB,EAAE,KAAK,sBAAsB,IAAI,uBAAuB,EAAG,MAAM,6CAA6C,CAAC;AAC/J,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAmB,KAAK,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AACtF,cAAc,6CAA6C,CAAC;AAC5D,OAAO,EAAE,qBAAqB,GAAG,CAAC;AAClC,MAAM,MAAM,sBAAsB,GAAG,QAAQ,CAAC;IAC1C,eAAe,EAAE,SAAS,CAAC,uBAAuB,CAAC,gBAAgB,CAAC,CAAC,CAAC;CACzE,CAAC,CAAC;AAEH,MAAM,MAAM,mBAAmB,GAAG,iBAAiB,CAAC,qBAAqB,EAAE,sBAAsB,CAAC,CAAC;AACnG,eAAO,MAAM,cAAc;qBAJN,SAAS,CAAC,uBAAuB,CAAC,gBAAgB,CAAC,CAAC;+EAMvE,CAAC"}

package/generated/AppLayout.d.ts

@@ -14,5 +14,5 @@ export declare const AppLayout: (props: Partial<import("../utils/createComponent
     onPrimarySectionChanged: EventName<_AppLayoutEventMap["primary-section-changed"]>;
     onDrawerOpenedChanged: EventName<_AppLayoutEventMap["drawer-opened-changed"]>;
     onOverlayChanged: EventName<_AppLayoutEventMap["overlay-changed"]>;
-}>>> & React.RefAttributes<AppLayoutElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+}>>> & React.RefAttributes<AppLayoutElement>) => React.ReactElement | null;
 //# sourceMappingURL=AppLayout.d.ts.map