@vaadin/aura 25.0.0-alpha20 → 25.0.0-beta1

package/src/components/button.css

@@ -1,29 +1,37 @@
-:where(:root, :host) {
-  --vaadin-button-border-color: var(--vaadin-border-color);
+:where(:root),
+:where(:host) {
   --vaadin-button-shadow: 0 1px 4px -1px hsla(0, 0%, 0%, 0.07);
 }
 
-:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle) {
+:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit) {
   transition: scale 180ms;
   position: relative;
-}
-
-:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle):where(:not([theme~='tertiary'])) {
+  --_accent: light-dark(
+    oklch(from var(--aura-accent-light) calc(l + 0.2) c h / min(0.3, c / 2)),
+    oklch(from var(--aura-accent-dark) calc(l - 0.2) c h / min(0.3, c / 2))
+  );
+  --_accent-border: light-dark(
+    oklch(from var(--aura-accent-light) l calc(c / 2) h / calc(min(0.15, 0.1 + c / 2) + 0.1 * var(--aura-contrast))),
+    oklch(from var(--aura-accent-dark) l calc(c / 2) h / calc(min(0.15, 0.1 + c / 2) + 0.1 * var(--aura-contrast)))
+  );
+  --_background: linear-gradient(var(--_accent), var(--_accent)) var(--aura-surface) padding-box;
+}
+
+:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):where(:not([theme~='tertiary'])) {
   --aura-surface-level: 6;
   --aura-surface-opacity: 0.3;
   box-shadow: var(--vaadin-button-shadow);
 }
 
-:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle):not([theme~='primary'], [theme~='tertiary']) {
-  background: var(--vaadin-button-background, var(--aura-surface) padding-box);
+/* prettier-ignore */
+:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):not([theme~='primary'], [theme~='tertiary']) {
+  background: var(--vaadin-button-background, var(--_background));
+  --vaadin-button-border-color: var(--_accent-border);
 }
 
-:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle):where(:not([theme~='primary'])) {
+:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):where(:not([theme~='primary'])) {
   outline-offset: calc(var(--vaadin-button-border-width, 1px) * -1);
-}
-
-:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle):where([theme~='primary']) {
-  outline-offset: 2px;
+  --vaadin-button-text-color: var(--aura-accent-text);
 }
 
 /*
@@ -31,7 +39,7 @@ Increase padding, but only for buttons that don't have an icon in the default sl
 Buttons that place an icon in the default slot are assumed to be icon-only buttons.
 */
 /* prettier-ignore */
-:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle):not(:has(:is(vaadin-icon, svg, i[class*='fa-'], vaadin-avatar):not([slot]))) {
+:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):not(:has(:is(vaadin-icon, svg, i[class*='fa-'], vaadin-avatar):not([slot]))) {
   --vaadin-button-padding: round(var(--vaadin-padding-s) / 1.4, 1px)
     max(var(--vaadin-padding-m), round(var(--vaadin-radius-m) / 1.5, 1px));
 }
@@ -43,22 +51,27 @@ vaadin-drawer-toggle:empty {
 }
 
 /* prettier-ignore */
-:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle):has([slot='suffix']:is(vaadin-icon, svg, i[class*='fa-'], vaadin-avatar)),
+:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):has([slot='suffix']:is(vaadin-icon, svg, i[class*='fa-'], vaadin-avatar)),
 vaadin-drawer-toggle:empty,
-vaadin-menu-bar-button[aria-haspopup='true'] {
+vaadin-menu-bar-button[aria-haspopup='true']:not([slot='overflow']) {
   padding-inline-end: max(var(--vaadin-padding-s), round(var(--vaadin-radius-m) / 1.75, 1px));
 }
 
-:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle)[theme~='primary'] {
+:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):where([theme~='primary']) {
+  outline-offset: 2px;
   --vaadin-button-font-weight: var(--aura-font-weight-semibold);
-  --vaadin-button-text-color: light-dark(var(--vaadin-background-color), var(--aura-background-dark));
+  --vaadin-button-text-color: var(--aura-accent-contrast);
+  --vaadin-button-background: var(--aura-accent-color);
+  --vaadin-button-border-color: var(--vaadin-border-color-secondary);
+  --vaadin-button-shadow: 0 2px 3px -1px hsla(0, 0%, 0%, 0.24);
 }
 
-:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle)[disabled][theme~='primary'] {
-  --vaadin-button-text-color: var(--vaadin-text-color-secondary);
+/* prettier-ignore */
+:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit)[disabled][theme~='primary']::part(label) {
+  color: color-mix(in srgb, currentColor 50%, transparent);
 }
 
-:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle):not([disabled])::before {
+:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):not([disabled])::before {
   content: '';
   position: absolute;
   inset: calc(var(--vaadin-button-border-width, 1px) * -1);
@@ -72,18 +85,19 @@ vaadin-menu-bar-button[aria-haspopup='true'] {
 }
 
 @supports (color: hsl(0 0 0)) {
-  :is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle):not([disabled])::before {
-    background-color: oklch(from currentColor calc(l + 0.4 - c) c h);
+  :is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):not([disabled])::before {
+    background-color: oklch(from currentColor calc(l + 0.4 - c) c h / calc(1 - l / 2));
   }
 }
 
 @media (any-hover: hover) {
-  :is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle):hover:not([disabled], [active])::before {
-    opacity: 0.05;
+  /* prettier-ignore */
+  :is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):hover:not([disabled], [active])::before {
+    opacity: 0.03;
   }
 
   /* prettier-ignore */
-  :is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle)[theme~='primary']:hover:not([disabled], [active])::before {
+  :is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit)[theme~='primary']:hover:not([disabled], [active])::before {
     opacity: 0.12;
   }
 }
@@ -96,13 +110,18 @@ vaadin-menu-bar-button[aria-haspopup='true'] {
   }
 }
 
-:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle)[active]:not([disabled])::before {
+:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit)[active]:not([disabled]) {
+  box-shadow: none;
+}
+
+:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit)[active]:not([disabled])::before {
   transition-duration: 0s;
   opacity: 0.08;
   background: oklch(from currentColor min(c, 1 - l + c) calc(c * 0.9) h);
 }
 
-:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle)[theme~='primary'][active]:not([disabled])::before {
+/* prettier-ignore */
+:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit)[theme~='primary'][active]:not([disabled])::before {
   opacity: 0.16;
 }
 
@@ -111,3 +130,16 @@ vaadin-menu-bar-button[aria-haspopup='true'] {
     border-inline-start-color: transparent;
   }
 }
+
+/* Color variants */
+
+:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):where(:not([theme~='accent'])) {
+  --aura-accent-light: var(--aura-text-light);
+  --aura-accent-dark: var(--aura-text-dark);
+}
+
+/* prettier-ignore */
+:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):is([theme~='danger'], [theme~='error']) {
+  --aura-accent-light: var(--aura-red);
+  --aura-accent-dark: var(--aura-red);
+}

package/src/components/card.css

@@ -1,4 +1,5 @@
-:where(:root, :host) {
+:where(:root),
+:where(:host) {
   --vaadin-card-title-font-weight: var(--aura-font-weight-medium);
   --vaadin-card-padding: var(--vaadin-padding-l);
   --vaadin-card-gap: var(--vaadin-gap-m) var(--vaadin-gap-l);

package/src/components/checkbox-radio.css

@@ -1,5 +1,6 @@
-:where(:root, :host) {
-  --vaadin-radio-button-dot-size: 6px;
+:where(:root),
+:where(:host) {
+  --vaadin-radio-button-marker-size: 6px;
   --vaadin-checkbox-size: round(1lh - 2px, 2px);
   --vaadin-radio-button-size: round(1lh - 2px, 2px);
 }
@@ -30,15 +31,15 @@ vaadin-radio-button:not([checked])::part(radio) {
 }
 
 vaadin-checkbox:is([checked], [indeterminate]):not([readonly], [disabled])::part(checkbox) {
-  /* TODO add/use selection color */
   --vaadin-checkbox-background: var(--aura-accent-color);
-  --vaadin-checkbox-color: var(--aura-accent-contrast);
+  --vaadin-checkbox-marker-color: var(--aura-accent-contrast);
+  --vaadin-checkbox-border-color: var(--vaadin-border-color-secondary);
 }
 
 vaadin-radio-button[checked]:not([readonly], [disabled])::part(radio) {
-  /* TODO add/use selection color */
   --vaadin-radio-button-background: var(--aura-accent-color);
-  --vaadin-radio-button-color: var(--aura-accent-contrast);
+  --vaadin-radio-button-marker-color: var(--aura-accent-contrast);
+  --vaadin-radio-button-border-color: var(--vaadin-border-color-secondary);
 }
 
 vaadin-checkbox:not([readonly], [disabled])::part(checkbox)::before,

package/src/components/confirm-dialog.css

@@ -0,0 +1,14 @@
+vaadin-confirm-dialog::part(footer) {
+  width: fit-content;
+  margin-inline-start: auto;
+}
+
+vaadin-confirm-dialog::part(cancel-button),
+vaadin-confirm-dialog::part(reject-button),
+vaadin-confirm-dialog::part(confirm-button) {
+  flex: 1;
+}
+
+vaadin-confirm-dialog :is([slot='cancel-button'], [slot='reject-button'], [slot='confirm-button']) {
+  display: flex;
+}

package/src/components/crud.css

@@ -0,0 +1,13 @@
+:where(:root),
+:where(:host) {
+  --vaadin-crud-background: var(--aura-surface) padding-box;
+}
+
+vaadin-crud-edit {
+  padding: var(--vaadin-padding-xs);
+  --vaadin-icon-visual-size: 0.75lh;
+}
+
+vaadin-crud::part(editor) {
+  background: var(--aura-surface);
+}

package/src/components/dashboard.css

@@ -0,0 +1,113 @@
+:where(:root),
+:where(:host) {
+  --vaadin-dashboard-widget-title-font-weight: var(--aura-font-weight-medium);
+  --vaadin-dashboard-widget-header-padding: var(--vaadin-padding-s) var(--vaadin-padding-m);
+  --vaadin-dashboard-header-gap: var(--vaadin-gap-xs);
+  --vaadin-dashboard-widget-border-color: var(--vaadin-border-color-secondary);
+  --vaadin-dashboard-widget-background: var(--aura-surface) padding-box;
+  --vaadin-dashboard-widget-border-radius: var(--vaadin-radius-m);
+}
+
+vaadin-dashboard-widget {
+  border-radius: calc(var(--vaadin-dashboard-widget-border-radius) - var(--vaadin-dashboard-widget-border-width, 1px));
+
+  &::before {
+    inset: calc(var(--vaadin-dashboard-widget-border-width, 1px) * -1);
+    border-radius: var(--vaadin-dashboard-widget-border-radius);
+  }
+
+  &::part(content) {
+    transition: 200ms;
+    transition-property: filter, opacity;
+  }
+
+  &:is([resize-mode], [move-mode])::part(content) {
+    opacity: 0.75;
+    filter: blur(10px);
+    clip-path: inset(0);
+    transition-duration: 50ms;
+  }
+}
+
+vaadin-dashboard-section {
+  vaadin-dashboard-widget {
+    transition: 200ms;
+    transition-property: filter, opacity;
+  }
+
+  &[move-mode] vaadin-dashboard-widget {
+    opacity: 0.75;
+    filter: blur(10px);
+    clip-path: inset(0);
+    transition-duration: 50ms;
+  }
+}
+
+:is(vaadin-dashboard-widget, vaadin-dashboard-section) {
+  &::part(move-forward-button),
+  &::part(move-backward-button),
+  &::part(resize-shrink-height-button),
+  &::part(resize-grow-height-button),
+  &::part(resize-shrink-width-button),
+  &::part(resize-grow-width-button) {
+    background: var(--aura-surface) padding-box;
+    color: var(--vaadin-text-color-secondary);
+    border: 1px solid var(--vaadin-border-color);
+    transition: 120ms color;
+    outline-offset: -1px;
+  }
+
+  &::part(resize-shrink-height-button),
+  &::part(resize-grow-height-button) {
+    margin-top: 0;
+    border-bottom: 0;
+  }
+
+  &::part(move-forward-button),
+  &::part(resize-shrink-width-button),
+  &::part(resize-grow-width-button) {
+    margin-inline-start: 0;
+    border-inline-end: 0;
+  }
+
+  &::part(move-backward-button) {
+    margin-inline-end: 0;
+    border-inline-start: 0;
+  }
+
+  &::part(move-apply-button),
+  &::part(resize-apply-button) {
+    background: var(--aura-accent-color);
+    color: var(--aura-accent-contrast);
+    box-shadow: 0 0 0 3px var(--aura-surface);
+    outline-offset: 2px;
+  }
+
+  &::part(move-button),
+  &::part(remove-button),
+  &::part(resize-button) {
+    color: var(--vaadin-text-color-disabled);
+    transition: 120ms color;
+    outline-offset: -2px;
+  }
+
+  &[editable] {
+    --vaadin-dashboard-widget-header-padding: var(--vaadin-padding-xs);
+  }
+}
+
+@media (any-hover: hover) {
+  :is(vaadin-dashboard-widget, vaadin-dashboard-section) {
+    &::part(move-button):hover,
+    &::part(remove-button):hover,
+    &::part(resize-button):hover,
+    &::part(move-forward-button):hover,
+    &::part(move-backward-button):hover,
+    &::part(resize-shrink-height-button):hover,
+    &::part(resize-grow-height-button):hover,
+    &::part(resize-shrink-width-button):hover,
+    &::part(resize-grow-width-button):hover {
+      color: var(--vaadin-text-color);
+    }
+  }
+}

package/src/components/date-picker.css

@@ -1,4 +1,5 @@
-:where(:root, :host) {
+:where(:root),
+:where(:host) {
   --vaadin-date-picker-year-scroller-background: light-dark(var(--vaadin-background-container), transparent);
   --vaadin-date-picker-month-header-font-weight: var(--aura-font-weight-semibold);
   /* TODO add/use selection color */
@@ -6,7 +7,9 @@
   --vaadin-date-picker-date-selected-color: var(--aura-accent-contrast);
 }
 
-:where(:root, :host, [theme]) {
+:where(:root),
+:where(:host),
+:where([theme]) {
   --vaadin-date-picker-date-width: calc(var(--aura-font-size-m) * 2.5);
   --vaadin-date-picker-year-scroller-width: calc(var(--aura-font-size-m) * 3.5);
 }

package/src/components/dialog.css

@@ -1,10 +1,12 @@
-:where(:root, :host) {
+:where(:root),
+:where(:host) {
   --vaadin-dialog-title-font-size: var(--aura-font-size-l);
   --vaadin-dialog-border-width: 0px;
 }
 
 vaadin-dialog,
-vaadin-confirm-dialog {
+vaadin-confirm-dialog,
+vaadin-crud::part(overlay) {
   color-scheme: var(--aura-content-color-scheme);
 }
 

package/src/components/grid.css

@@ -1,25 +1,28 @@
-:where(:root, :host) {
-  /* TODO should likely be just a color prop, not a background-image */
-  --vaadin-grid-row-selected-background: linear-gradient(
-    var(--vaadin-background-container),
-    var(--vaadin-background-container)
-  );
+:where(:root),
+:where(:host) {
+  --vaadin-grid-row-selected-background-color: color-mix(in srgb, var(--aura-accent-color) 10%, transparent);
+  --vaadin-grid-background: linear-gradient(var(--aura-surface), var(--aura-surface)) var(--aura-background) padding-box;
 }
 
-vaadin-grid[theme~='no-border']::part(first-column-cell) {
-  /* TODO can't use --vaadin-grid-cell-padding, it only works on the host */
-  /* quite difficult to override the cell padding when it’s on the slotted vaadin-grid-cell-content element */
-  --_cell-padding: var(--vaadin-padding-xs) var(--vaadin-padding-s) var(--vaadin-padding-xs) var(--vaadin-padding-l);
-}
-
-vaadin-grid[theme~='no-border']::part(last-column-cell) {
-  --_cell-padding: var(--vaadin-padding-xs) var(--vaadin-padding-l) var(--vaadin-padding-xs) var(--vaadin-padding-s);
+:is(vaadin-grid, vaadin-crud-grid)::part(empty-state) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 /* TODO custom part name: how should we indicate an active row? Should we have a built-in part name? */
 vaadin-grid::part(active-nav-item) {
-  /* TODO should likely be just a color prop, not a background-image */
-  /* TODO need a custom prop in grid base styles that can be used to just highlight a row, which works together with row stripes, selection color, etc. */
-  --vaadin-grid-cell-background: linear-gradient(var(--vaadin-background-container), var(--vaadin-background-container))
-    var(--vaadin-background-color);
+  --vaadin-grid-row-highlight-background-color: var(--vaadin-background-container);
+}
+
+vaadin-grid-sorter::part(indicators) {
+  transition: color 120ms;
+}
+
+:is(vaadin-grid, vaadin-crud)[theme~='column-borders'] {
+  --vaadin-grid-column-border-width: 1px;
+}
+
+:is(vaadin-grid, vaadin-crud)[theme~='no-row-borders'] {
+  --vaadin-grid-row-border-width: 0px;
 }

package/src/components/input-container.css

@@ -1,6 +1,8 @@
-:where(:root, :host, [theme]) {
+:where(:root),
+:where(:host),
+:where([theme]) {
   --vaadin-input-field-background: var(--aura-surface);
-  --vaadin-input-field-error-color: var(--aura-red);
+  --vaadin-input-field-error-color: var(--aura-red-text);
 }
 
 ::part(input-field),

package/src/components/item-overlay.css

@@ -0,0 +1,77 @@
+:where(:root),
+:where(:host) {
+  --vaadin-item-overlay-padding: var(--vaadin-gap-xs);
+  --vaadin-item-border-radius: calc(var(--vaadin-radius-m) - var(--vaadin-item-overlay-padding));
+  --vaadin-item-checkmark-color: var(--aura-accent-text);
+}
+
+:is(
+  vaadin-avatar-group-menu-item,
+  vaadin-combo-box-item,
+  vaadin-context-menu-item,
+  vaadin-time-picker-item,
+  vaadin-item,
+  vaadin-menu-bar-item,
+  vaadin-multi-select-combo-box-item,
+  vaadin-select-item[role]
+) {
+  font-weight: var(--aura-font-weight-medium);
+  --vaadin-item-checkmark-color: var(--aura-accent-text);
+
+  &::part(checkmark) {
+    --vaadin-icon-visual-size: 75%;
+  }
+
+  &::part(content) {
+    display: flex;
+  }
+
+  @media (any-hover: hover) {
+    &:not([disabled], [aria-disabled='true']):hover {
+      background: color-mix(in srgb, var(--aura-accent-color) 10%, transparent);
+
+      &[theme~='filled'] {
+        background: var(--aura-accent-color);
+        color: var(--aura-accent-contrast);
+        --vaadin-text-color: var(--aura-accent-contrast);
+        --vaadin-text-color-secondary: color-mix(in srgb, var(--aura-accent-contrast) 70%, transparent);
+        --vaadin-text-color-disabled: color-mix(in srgb, var(--aura-accent-contrast) 50%, transparent);
+        --vaadin-item-checkmark-color: var(--aura-accent-contrast);
+
+        > * {
+          --aura-red: var(--aura-accent-contrast);
+          --aura-red-text: var(--aura-accent-contrast);
+          --aura-orange: var(--aura-accent-contrast);
+          --aura-orange-text: var(--aura-accent-contrast);
+          --aura-yellow: var(--aura-accent-contrast);
+          --aura-yellow-text: var(--aura-accent-contrast);
+          --aura-green: var(--aura-accent-contrast);
+          --aura-green-text: var(--aura-accent-contrast);
+          --aura-blue: var(--aura-accent-contrast);
+          --aura-blue-text: var(--aura-accent-contrast);
+          --aura-purple: var(--aura-accent-contrast);
+          --aura-purple-text: var(--aura-accent-contrast);
+        }
+      }
+    }
+  }
+
+  &[aria-expanded='true']:not(:hover) {
+    background: var(--vaadin-background-container-strong);
+  }
+
+  &[theme~='danger'] {
+    --aura-accent-light: var(--aura-red);
+    --aura-accent-dark: var(--aura-red);
+    color: var(--aura-red-text);
+  }
+}
+
+/* TODO is there a better selector? */
+[role='menu'] [role='separator'] {
+  margin-block: var(--vaadin-gap-xs);
+  margin-inline-start: calc(
+    var(--vaadin-icon-size, 1lh) + var(--vaadin-item-gap, var(--vaadin-gap-s)) + var(--vaadin-gap-xs) * 2
+  );
+  border-color: var(--vaadin-border-color);
+}

package/src/components/login.css

@@ -0,0 +1,43 @@
+:where(:root),
+:where(:host) {
+  --vaadin-login-form-error-color: var(--aura-red-text);
+  --vaadin-login-form-padding: var(--vaadin-padding-xl);
+  --vaadin-login-overlay-brand-padding: var(--vaadin-padding-xl);
+  --vaadin-login-overlay-brand-background: transparent;
+  --vaadin-login-overlay-title-font-size: 1.5em;
+  --vaadin-login-overlay-title-line-height: 1.2;
+  --vaadin-login-overlay-title-font-weight: var(--aura-font-weight-semibold);
+  --vaadin-login-overlay-title-color: var(--vaadin-text-color);
+  --vaadin-login-overlay-description-color: var(--vaadin-text-color-secondary);
+}
+
+vaadin-login-form::part(error-message) {
+  border-radius: var(--vaadin-radius-m);
+  padding: var(--vaadin-padding-m);
+  background: color-mix(in srgb, var(--aura-red) 10%, transparent);
+}
+
+vaadin-login-form::part(error-message-title) {
+  font-weight: var(--aura-font-weight-semibold);
+}
+
+vaadin-login-overlay {
+  --vaadin-overlay-backdrop-background: var(--aura-app-background);
+
+  &::part(overlay) {
+    --aura-surface-level: 2;
+  }
+
+  &::part(brand) {
+    text-align: center;
+    padding-bottom: 0;
+  }
+
+  &::part(form-title) {
+    display: none;
+  }
+
+  [slot='title'] {
+    letter-spacing: -0.03em;
+  }
+}

package/src/components/menu-bar.css

@@ -0,0 +1,17 @@
+@container not style(--vaadin-menu-bar-gap) {
+  vaadin-menu-bar:not([has-single-button]) vaadin-menu-bar-button:not([first-visible]) {
+    border-inline-start-color: transparent;
+  }
+}
+
+@media (any-hover: hover) {
+  /* Increase specificity to reset hover styles */
+  vaadin-menu-bar-button vaadin-menu-bar-item:not([disabled]):not([tabindex]):hover {
+    background: transparent;
+  }
+}
+
+vaadin-menu-bar-button[slot='overflow'] {
+  font-family: system-ui, sans-serif;
+  font-weight: 600;
+}

package/src/components/multi-select-combo-box.css

@@ -1,4 +1,5 @@
-:where(:root, :host) {
+:where(:root),
+:where(:host) {
   --vaadin-chip-padding: 0.4em;
   --vaadin-chip-background: var(--vaadin-background-container-strong);
 }

package/src/components/notification.css

@@ -1,4 +1,5 @@
-:where(:root, :host) {
+:where(:root),
+:where(:host) {
   --vaadin-notification-border-width: 0px;
   --vaadin-ease-fluid: cubic-bezier(0.78, 0, 0.22, 1);
 }

package/src/components/overlay.css

@@ -1,4 +1,5 @@
-:where(:root, :host) {
+:where(:root),
+:where(:host) {
   --vaadin-overlay-border-width: 0px;
   --vaadin-overlay-backdrop-background: light-dark(
     oklch(from var(--aura-background-light) calc(l * 0.1) c h / 0.15),
@@ -12,7 +13,7 @@
   --aura-overlay-shadow:
     inset 0 0 0 1px var(--aura-overlay-inner-outline-color), 0 0 0 1px var(--aura-overlay-outline-color),
     var(--aura-shadow-m);
-  --aura-overlay-backdrop-filter: blur(12px) brightness(1.2) saturate(1.2);
+  --aura-overlay-backdrop-filter: blur(20px) brightness(1.1) saturate(1.2);
   --aura-overlay-surface-opacity: 0.85;
 
   @media (prefers-reduced-transparency: reduce) {

package/src/components/progress-bar.css

@@ -0,0 +1,17 @@
+:where(:root),
+:where(:host) {
+  --vaadin-progress-bar-border-width: 0px;
+  --vaadin-progress-bar-value-background: linear-gradient(
+    90deg,
+    var(--aura-accent-color),
+    color-mix(in hsl, var(--aura-accent-color) 60%, hsl(45, 31%, 95%))
+  );
+}
+
+vaadin-progress-bar {
+  height: var(--vaadin-gap-s);
+
+  &[dir='rtl']::part(value) {
+    scale: -1;
+  }
+}