npm - @vaadin/aura - Versions diffs - 25.0.0-alpha21 → 25.0.0-beta2 - Mend

@vaadin/aura 25.0.0-alpha21 → 25.0.0-beta2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (31) hide show

package/aura.css +5 -1
package/dist/aura.css +1 -1
package/package.json +2 -2
package/src/color-scheme.css +2 -1
package/src/color.css +8 -4
package/src/components/app-layout.css +8 -10
package/src/components/avatar.css +2 -1
package/src/components/button.css +2 -1
package/src/components/card.css +2 -1
package/src/components/checkbox-radio.css +5 -4
package/src/components/crud.css +6 -1
package/src/components/dashboard.css +113 -0
package/src/components/date-picker.css +5 -2
package/src/components/dialog.css +4 -4
package/src/components/grid.css +2 -1
package/src/components/input-container.css +8 -3
package/src/components/item-overlay.css +2 -1
package/src/components/login.css +2 -1
package/src/components/multi-select-combo-box.css +2 -1
package/src/components/notification.css +2 -1
package/src/components/overlay.css +3 -2
package/src/components/progress-bar.css +2 -1
package/src/components/rich-text-editor.css +3 -1
package/src/components/side-nav.css +21 -20
package/src/components/tabs.css +126 -0
package/src/components/upload.css +2 -1
package/src/palette.css +2 -1
package/src/shadow.css +2 -1
package/src/size.css +8 -4
package/src/surface.css +8 -11
package/src/typography.css +23 -17

package/aura.css CHANGED Viewed

@@ -15,6 +15,7 @@
 @import './src/components/confirm-dialog.css';
 @import './src/components/crud.css';
 @import './src/components/date-picker.css';
+@import './src/components/dashboard.css';
 @import './src/components/dialog.css';
 @import './src/components/grid.css';
 @import './src/components/input-container.css';
@@ -30,10 +31,13 @@
 @import './src/components/rich-text-editor.css';
 @import './src/components/select.css';
 @import './src/components/side-nav.css';
+@import './src/components/tabs.css';
 @import './src/components/upload.css';
-:where(:root, :host) {
+:where(:root),
+:where(:host) {
   cursor: default;
   /* TODO: slightly smaller chevron than the one in base styles - consider if we should do this in base styles */
   --_vaadin-icon-chevron-down: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>');
+  --vaadin-aura-theme: 1;
 }

package/dist/aura.css CHANGED Viewed

	@@ -1 +1 @@
1	- :where(:root,:host){--aura-contrast:1;--aura-accent-light:#1858d8;--aura-accent-dark:#3670e2;--_color-base:light-dark(oklch(from var(--aura-background-light) 0.1 calc(c / 2 + c * (1 - c)) h),oklch(from var(--aura-background-dark) 1 c h));--aura-text-light:color-mix(in srgb,var(--_color-base) calc(90% + 5%var(--aura-contrast)),transparent);--aura-text-dark:color-mix(in srgb,#fff calc(90% + 5%var(--aura-contrast)),transparent);--vaadin-text-color:light-dark(var(--aura-text-light),var(--aura-text-dark));--vaadin-text-color-secondary:light-dark(color-mix(in srgb,var(--_color-base) calc(55% + 10%var(--aura-contrast)),transparent),color-mix(in srgb,var(--_color-base) calc(57% + 10%var(--aura-contrast)),transparent));--vaadin-text-color-disabled:color-mix(in srgb,var(--_color-base) calc(30% + 10%var(--aura-contrast)),transparent);--_border-color-base:light-dark(oklch(from var(--aura-background-light) 0.1 c h),oklch(from var(--aura-background-dark) 0.85 c h));--vaadin-border-color:color-mix(in srgb,var(--_border-color-base) calc(14% + 6%var(--aura-contrast)),transparent);--vaadin-border-color-secondary:light-dark(color-mix(in srgb,var(--_border-color-base) max(5%,5% + 3% * var(--aura-contrast)),transparent),color-mix(in srgb,var(--_border-color-base) max(6%,5% + 5% * var(--aura-contrast)),transparent));--aura-background-light:oklch(95% 0.005 260);--aura-background-dark:oklch(20% 0.01 260);--aura-background:light-dark(var(--aura-background-light),var(--aura-background-dark));--_bg-alt:oklch(from var(--aura-background) calc(l + c) min(c,c * 2 - l/20) calc(h + 180 * var(--_safari-17-deg, 1deg) * l * c * 4));--_bg-accent:radial-gradient(circle at 0% 0%,light-dark(oklch(from var(--aura-background-light) min(1,l + c * 3) min(c,c * 3) h),oklch(from var(--aura-background-dark) min(1,l + c) clamp(0,c * 1.5,0.4) h)),transparent 30%);--aura-app-background:var(--_bg-accent),radial-gradient(circle at 25% 0% in xyz,var(--aura-background) 33%,var(--_bg-alt)) var(--aura-background);--vaadin-focus-ring-color:var(--aura-accent-color);accent-color:var(--aura-accent-color);--vaadin-user-color:var(--aura-accent-color);--vaadin-background-container:color-mix(in srgb,var(--_color-base) calc(3% + min(3%, 1% * var(--aura-contrast))),transparent);--vaadin-background-container-strong:color-mix(in srgb,var(--_color-base) calc(7% + min(8%, 1.5% * var(--aura-contrast))),transparent);background:var(--aura-app-background);background-attachment:fixed;background-size:100vw 100vh;color:var(--vaadin-text-color)}:where(:root,:host),vaadin-button,vaadin-checkbox::part(checkbox),vaadin-context-menu-item,vaadin-crud-edit,vaadin-drawer-toggle,vaadin-menu-bar-button,vaadin-menu-bar-item,vaadin-radio-button::part(radio),vaadin-side-nav-item::part(content){--aura-accent-contrast-light:oklch(from var(--aura-accent-light) clamp(0,(0.62 - l) * 1000,1) 0 0/clamp(0.8,(0.62 - l) * 1000,1));--aura-accent-contrast-dark:oklch(from var(--aura-accent-dark) clamp(0,(0.62 - l) * 1000,1) 0 0/clamp(0.8,(0.62 - l) * 1000,1));--aura-accent-text-light:color-mix(in srgb,var(--aura-accent-light) calc(70% - 15%var(--aura-contrast)),var(--vaadin-text-color));--aura-accent-text-dark:color-mix(in srgb,var(--aura-accent-dark) calc(70% - 15%var(--aura-contrast)),var(--vaadin-text-color));--aura-accent-color:light-dark(var(--aura-accent-light),var(--aura-accent-dark));--aura-accent-contrast:light-dark(var(--aura-accent-contrast-light),var(--aura-accent-contrast-dark));--aura-accent-text:light-dark(var(--aura-accent-text-light),var(--aura-accent-text-dark))}@supports (color:hsl(0 0 0)){:where(:root,:host){--_safari-17-deg:1}}:where(h1,h2,h3,h4,h5,h6){color:var(--vaadin-text-color)}:where(:root,:host){--aura-color-scheme:light;--aura-content-color-scheme:var(--aura-color-scheme);--aura-notification-color-scheme:var(--aura-color-scheme)}html{color-scheme:var(--aura-color-scheme)}:where(:root,:host){--aura-red:oklch(0.6 0.22 25);--aura-orange:oklch(0.61 0.4 93);--aura-yellow:oklch(0.9 0.36 105);--aura-green:oklch(0.6 0.28 160);--aura-blue:oklch(0.6 0.3 240);--aura-purple:oklch(0.6 0.3 280);--aura-red-text:color-mix(in srgb,var(--aura-red) calc(70% - 15%var(--aura-contrast)),var(--vaadin-text-color));--aura-orange-text:color-mix(in srgb,var(--aura-orange) calc(70% - 15%var(--aura-contrast)),var(--vaadin-text-color));--aura-yellow-text:color-mix(in srgb,var(--aura-yellow) calc(65% - 15%var(--aura-contrast)),var(--vaadin-text-color));--aura-green-text:color-mix(in srgb,var(--aura-green) calc(70% - 15%var(--aura-contrast)),var(--vaadin-text-color));--aura-blue-text:color-mix(in srgb,var(--aura-blue) calc(70% - 15%var(--aura-contrast)),var(--vaadin-text-color));--aura-purple-text:color-mix(in srgb,var(--aura-purple) calc(70% - 15%var(--aura-contrast)),var(--vaadin-text-color))}:where(:root,:host){--aura-shadow-color:light-dark(oklch(from var(--aura-background-light) calc(l - l * 0.8) calc(c / 10) h/0.2),oklch(from var(--aura-background-dark) calc(l - l * 0.8) calc(c / 10) h/0.2));--aura-shadow-m:0 8px 16px -3px var(--aura-shadow-color)}:where(:root,:host){--aura-base-size:16;--_size-ref:16;--aura-base-radius:3;--vaadin-radius-s:min(0.25lh,round(var(--aura-base-radius) * 1px + 2px,1px));--vaadin-radius-m:round(var(--aura-base-radius) * 2px + 3px,1px);--vaadin-radius-l:round(var(--aura-base-radius) * 1.5px + 10px,1px);--vaadin-icon-stroke-width:1.75}:where(:root,:host,[theme]){--vaadin-padding-xs:round(var(--aura-base-size) * 0.25 * pow(var(--aura-base-size)/var(--_size-ref),0.5) * 1px,1px);--vaadin-padding-s:round(var(--aura-base-size) * 0.5 * pow(var(--aura-base-size)/var(--_size-ref),0.75) * 1px,1px);--vaadin-padding-m:round(var(--aura-base-size) * 0.75 * pow(var(--aura-base-size)/var(--_size-ref),0.3) * 1px,1px);--vaadin-padding-l:calc(var(--aura-base-size)1px);--vaadin-padding-xl:round(var(--aura-base-size) 1.5 * pow(var(--aura-base-size)/var(--_size-ref),0.1) * 1px,1px);--vaadin-padding-container:round(var(--vaadin-padding-s)/1.4,1px) max(var(--vaadin-padding-s),round(var(--vaadin-radius-m)/2,1px));--vaadin-gap-xs:var(--vaadin-padding-xs);--vaadin-gap-s:var(--vaadin-padding-s);--vaadin-gap-m:var(--vaadin-padding-m);--vaadin-gap-l:var(--vaadin-padding-l);--vaadin-gap-xl:var(--vaadin-padding-xl)}@media (pointer:coarse){:where(:root,:host){--aura-base-size:19}}:where(:root,:host){--aura-surface-level:1}.aura-surface,.aura-surface-solid,::part(input-field),::part(overlay),:is(:root,:host),vaadin-accordion-panel[theme~=filled],vaadin-app-layout::part(drawer),vaadin-app-layout::part(navbar),vaadin-button,vaadin-card,vaadin-checkbox::part(checkbox),vaadin-confirm-dialog::part(overlay),vaadin-crud-dialog::part(overlay),vaadin-details[theme~=filled],vaadin-dialog::part(overlay),vaadin-login-overlay::part(overlay),vaadin-master-detail-layout::part(detail),vaadin-menu-bar-button,vaadin-message-input,vaadin-radio-button::part(radio),vaadin-rich-text-editor,vaadin-side-nav-item::part(content),vaadin-upload,vaadin-upload-file{--aura-surface-opacity:0.5;--aura-surface-solid:light-dark(oklch(from var(--aura-background-light) min(1,l + (0.98 - l) * 4 + var(--aura-surface-level) * (0.07 - 0.01 * var(--aura-contrast)) - var(--aura-surface-opacity)/20) clamp(0,c - l/10 * var(--aura-surface-level) + var(--aura-surface-opacity)/40,c) h),oklch(from var(--aura-background-dark) calc(max(l + 0.03, 0.25) + var(--aura-surface-level)(0.03 - var(--aura-contrast)0.008) - var(--aura-surface-opacity)/40) clamp(0,c * (1 + l),0.2) h));--aura-surface:color-mix(in oklab,var(--aura-surface-solid) calc(100%var(--aura-surface-opacity)),transparent);--vaadin-background-color:var(--aura-surface-solid)}.aura-surface{background:var(--aura-surface) padding-box}.aura-surface-solid{--aura-surface-opacity:1;background:var(--aura-surface-solid) padding-box}@font-face{font-display:swap;font-family:Instrument Sans;font-style:normal;font-weight:400 700;src:url(fonts/InstrumentSans/InstrumentSans.woff2) format("woff2")}:where(:root,:host){--aura-font-family-system:system-ui,ui-sans-serif,sans-serif;--aura-font-family-instrument-sans:"Instrument Sans",var(--aura-font-family-system);--aura-font-family:var(--aura-font-family-instrument-sans);--aura-base-font-size:16;--aura-font-size-scale:1.125;--aura-base-line-height:1.4;--aura-font-weight:400;--aura-font-weight-medium:500;--aura-font-weight-semibold:600}@media (pointer:fine){:where(:root,:host){--aura-base-font-size:14}}@supports (-webkit-touch-callout:none){@media (pointer:coarse){:where(:root,:host){font:-apple-system-body}}}:where(:root,:host,[theme]){--aura-font-size-xs:round(var(--aura-font-size-s)/var(--aura-font-size-scale),0.0625rem);--aura-font-size-s:round(var(--aura-font-size-m)/var(--aura-font-size-scale),0.0625rem);--aura-font-size-m:round(var(--aura-base-font-size)/16 1rem,0.0625rem);--aura-font-size-l:round(var(--aura-font-size-m) * var(--aura-font-size-scale),0.0625rem);--aura-font-size-xl:round(var(--aura-font-size-l) * var(--aura-font-size-scale),0.0625rem);--aura-line-height-xs:round(var(--aura-font-size-xs) * var(--aura-base-line-height),0.125rem);--aura-line-height-s:round(var(--aura-font-size-s) * var(--aura-base-line-height),0.125rem);--aura-line-height-m:round(var(--aura-font-size-m) * var(--aura-base-line-height),0.125rem);--aura-line-height-l:round(var(--aura-font-size-l) * var(--aura-base-line-height),0.125rem);--aura-line-height-xl:round(var(--aura-font-size-xl) * var(--aura-base-line-height),0.125rem)}:where(body,:host){font-family:var(--aura-font-family);font-optical-sizing:auto;font-style:normal;font-weight:var(--aura-font-weight);-webkit-font-smoothing:var(--aura-font-smoothing,antialiased);-moz-osx-font-smoothing:var(--aura-font-smoothing,grayscale);-webkit-text-size-adjust:none;text-size-adjust:none}:where(body,:host,[theme]:not(html)){font-size:var(--aura-font-size-m);line-height:var(--aura-line-height-m)}:where(h1,h2,h3,h4,h5,h6){font-weight:var(--aura-font-weight-semibold);margin:0;text-wrap:balance}:where(h1){font-size:var(--aura-font-size-xl);line-height:var(--aura-line-height-xl)}:where(h2,h3){font-size:var(--aura-font-size-l);line-height:var(--aura-line-height-l)}:where(h4,h5){font-size:var(--aura-font-size-m);line-height:var(--aura-line-height-m)}:where(h6){font-size:var(--aura-font-size-s);line-height:var(--aura-line-height-s)}:is(vaadin-details,vaadin-accordion-panel):not([theme~=no-padding])::part(content){padding:var(--vaadin-padding-container);padding-top:0}:is(vaadin-details,vaadin-accordion-panel):not([theme~=no-padding],[theme~=reverse])::part(content){margin-inline-start:calc(var(--vaadin-icon-size, 1lh) + var(--vaadin-details-summary-gap, var(--vaadin-gap-s)))}:is(vaadin-details,vaadin-accordion-panel)[theme~=reverse]{[slot=summary]::part(content){width:100%}[slot=summary]::part(toggle){margin-inline-start:auto;order:1}}:is(vaadin-details,vaadin-accordion-panel)[theme~=filled]{background:var(--aura-surface) padding-box;border:1px solid var(--vaadin-border-color-secondary);border-radius:var(--vaadin-radius-m);&:has(+:is(vaadin-details,vaadin-accordion-panel)[theme~=filled]){border-bottom-left-radius:0;border-bottom-right-radius:0}&+:is(vaadin-details,vaadin-accordion-panel)[theme~=filled]{border-top-color:transparent;border-top-left-radius:0;border-top-right-radius:0;margin-top:-1px}}:where(:root,:host){--aura-app-layout-inset:1.5vmin;--aura-app-layout-radius:var(--vaadin-radius-l);--_aura-mdl-border:1px;--vaadin-app-layout-navbar-padding-top:0;--vaadin-app-layout-navbar-padding-bottom:0;--vaadin-app-layout-navbar-padding-inline-start:0;--vaadin-app-layout-navbar-padding-inline-end:0}@media (height <= 600px),(width <= 800px){html{--aura-app-layout-inset:0px!important;--_aura-mdl-border:0px}}vaadin-app-layout{--_app-layout-radius:clamp(0px,var(--aura-app-layout-radius),var(--aura-app-layout-inset) * 100);padding-block:var(--aura-app-layout-inset);padding-inline-end:var(--aura-app-layout-inset);padding-top:calc(var(--aura-app-layout-inset) + var(--_vaadin-app-layout-navbar-offset-size))}vaadin-app-layout[overlay]{&::part(drawer),&::part(navbar){--vaadin-app-layout-navbar-background:var(--aura-surface);--vaadin-app-layout-drawer-background:var(--aura-surface);--aura-surface-opacity:var(--aura-overlay-surface-opacity);-webkit-backdrop-filter:var(--aura-overlay-backdrop-filter);backdrop-filter:var(--aura-overlay-backdrop-filter)}}vaadin-app-layout:is([overlay],:not([drawer-opened])){padding-inline-start:var(--aura-app-layout-inset)}vaadin-app-layout::part(navbar){justify-content:space-between}vaadin-app-layout:not([overlay])::part(navbar){--vaadin-app-layout-navbar-background:transparent}vaadin-app-layout:not([overlay])::part(drawer){padding-block:var(--aura-app-layout-inset);padding-inline:max(0px,var(--aura-app-layout-inset) - var(--vaadin-padding-s))}vaadin-app-layout>vaadin-scroller[slot=drawer]{padding-inline:var(--vaadin-padding-m);scrollbar-width:thin}vaadin-app-layout>vaadin-scroller:nth-child(1 of [slot=drawer]){padding-top:var(--vaadin-padding-s)}vaadin-app-layout>vaadin-scroller:nth-last-child(1 of [slot=drawer]){padding-bottom:var(--vaadin-padding-s)}vaadin-app-layout>:nth-child(1 of :not([slot])):nth-last-child(1 of :not([slot])){background:linear-gradient(var(--aura-surface),var(--aura-surface)),var(--aura-app-background);background-clip:padding-box;background-origin:border-box;border:var(--_aura-mdl-border) solid var(--vaadin-border-color-secondary);border-block-width:min(var(--aura-app-layout-inset),var(--_aura-mdl-border));border-inline-end-width:min(var(--aura-app-layout-inset),var(--_aura-mdl-border));border-radius:var(--_app-layout-radius);box-sizing:border-box;color:var(--vaadin-text-color);color-scheme:var(--aura-content-color-scheme);min-height:100%}vaadin-app-layout>vaadin-master-detail-layout:nth-child(1 of :not([slot])):nth-last-child(1 of :not([slot])){&:not([drawer])::part(detail),&>vaadin-master-detail-layout{border-end-end-radius:var(--_app-layout-radius);border-start-end-radius:var(--_app-layout-radius)}&::part(backdrop){border-radius:calc(var(--_app-layout-radius) - var(--_aura-mdl-border))}&:is([drawer][has-detail]){border-color:light-dark(var(--vaadin-border-color),var(--vaadin-border-color-secondary))}}vaadin-app-layout:has([slot=navbar]):has([slot=drawer]){padding-top:var(--_vaadin-app-layout-navbar-offset-size);&::part(drawer){padding-top:0}}vaadin-app-layout:has([slot=drawer]):not([overlay]):not([drawer-opened])>:nth-child(1 of :not([slot])):nth-last-child(1 of :not([slot])){border-inline-start-width:min(var(--aura-app-layout-inset),var(--_aura-mdl-border))}vaadin-app-layout:has([slot=navbar]):has([slot=drawer])[drawer-opened]:not([overlay])>:nth-child(1 of :not([slot])):nth-last-child(1 of :not([slot])){border-start-start-radius:var(--aura-app-layout-radius)}vaadin-app-layout:has([slot=navbar]):has([slot=drawer])>:nth-child(1 of :not([slot])):nth-last-child(1 of :not([slot])){border-top-width:var(--_aura-mdl-border)}vaadin-app-layout:has([slot=navbar])>:is(:not([slot]),[slot=drawer]) vaadin-drawer-toggle:not([theme~=permanent]),vaadin-app-layout:not(:has([slot=navbar]))>[slot=drawer] vaadin-drawer-toggle:not([theme~=permanent]){display:none}:where(:root,:host){--vaadin-avatar-border-color:var(--vaadin-border-color-secondary);--vaadin-avatar-background:var(--vaadin-background-container);--vaadin-avatar-font-weight:var(--aura-font-weight-medium);--vaadin-avatar-font-size:var(--aura-font-size-m)}vaadin-avatar:not([img]){--_shade:color-mix(in srgb,var(--vaadin-border-color) 20%,transparent);background-image:linear-gradient(light-dark(transparent,var(--_shade)),transparent 50%,light-dark(var(--_shade),transparent))}:where(:root,:host){--vaadin-button-shadow:0 1px 4px -1px rgba(0,0,0,.07)}:is(vaadin-button,vaadin-menu-bar-button,vaadin-drawer-toggle,vaadin-crud-edit){position:relative;transition:scale .18s;--_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,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,vaadin-crud-edit):where(:not([theme~=primary])){outline-offset:calc(var(--vaadin-button-border-width, 1px)-1);--vaadin-button-text-color:var(--aura-accent-text)}: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))}:is(vaadin-button,vaadin-menu-bar-button):has([slot=prefix]:is(vaadin-icon,svg,i[class=fa-],vaadin-avatar)),vaadin-drawer-toggle:empty{padding-inline-start:max(var(--vaadin-padding-s),round(var(--vaadin-radius-m)/1.75,1px))}: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]: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,vaadin-crud-edit):where([theme~=primary]){outline-offset:2px;--vaadin-button-font-weight:var(--aura-font-weight-semibold);--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 rgba(0,0,0,.24)}: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,vaadin-crud-edit):not([disabled]):before{background-color:currentColor;border-radius:inherit;content:"";inset:calc(var(--vaadin-button-border-width, 1px)-1);opacity:0;pointer-events:none;position:absolute;transition:opacity .1s,background-color .1s}@supports (color:hsl(0 0 0)){:is(vaadin-button,vaadin-menu-bar-button,vaadin-drawer-toggle,vaadin-crud-edit):not([disabled]):before{background-color:oklch(from currentColor calc(l + .4 - c) c h/calc(1 - l / 2))}}@media (any-hover:hover){:is(vaadin-button,vaadin-menu-bar-button,vaadin-drawer-toggle,vaadin-crud-edit):hover:not([disabled],[active]):before{opacity:.03}:is(vaadin-button,vaadin-menu-bar-button,vaadin-drawer-toggle,vaadin-crud-edit)[theme~=primary]:hover:not([disabled],[active]):before{opacity:.12}}@media (min-resolution:2x){:is(vaadin-button,vaadin-menu-bar-button[first-visible][last-visible],vaadin-drawer-toggle)[active]:not([disabled],[aria-disabled=true]){scale:.98;transition-duration:50ms}}: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{background:oklch(from currentColor min(c,1 - l + c) calc(c .9) h);opacity:.08;transition-duration:0s}:is(vaadin-button,vaadin-menu-bar-button,vaadin-drawer-toggle,vaadin-crud-edit)[theme~=primary][active]:not([disabled]):before{opacity:.16}@container style(--_gap: 0){vaadin-menu-bar-button:not(:first-of-type){border-inline-start-color:transparent}}: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)}: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)}:where(:root,: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);--vaadin-card-border-color:var(--vaadin-border-color-secondary);--vaadin-card-background:var(--aura-surface) padding-box}vaadin-card{--vaadin-card-background:var(--aura-surface) padding-box;--aura-surface-level:2}vaadin-card[theme~=outlined]{border:var(--vaadin-card-border-width,1px) solid transparent;--vaadin-card-padding:calc(var(--vaadin-padding-l) - var(--vaadin-card-border-width, 1px))}vaadin-card[theme~=outlined]:before{inset:calc(var(--vaadin-card-border-width, 1px)-1)}vaadin-card[theme~=outlined][theme~=cover-media] [slot=media]:is(img,video,svg,vaadin-icon){margin-inline:calc((var(--_padding) + var(--vaadin-card-border-width, 1px))-1);margin-top:calc((var(--_padding) + var(--vaadin-card-border-width, 1px))-1);width:calc(100% + (var(--_padding) + var(--vaadin-card-border-width, 1px))2)}vaadin-card[theme~=elevated]{--aura-surface-opacity:0.7;--aura-surface-level:3;--_shadow-color:light-dark(oklch(from var(--aura-background-light) calc(l - l * 0.8) calc(c / 10) h/0.1),oklch(from var(--aura-background-dark) calc(l - l * 0.8) calc(c / 10) h/0.2));--vaadin-card-shadow:0 1px 6px -1px var(--_shadow-color);background-clip:padding-box}vaadin-card[theme~=stretch-media]:not([theme~=cover-media]) [slot=media]:is(img,video,svg,vaadin-icon){border-radius:var(--vaadin-radius-s)}:where(:root,:host){--vaadin-radio-button-dot-size:6px;--vaadin-checkbox-size:round(1lh - 2px,2px);--vaadin-radio-button-size:round(1lh - 2px,2px)}vaadin-checkbox::part(checkbox),vaadin-radio-button::part(radio){--vaadin-checkbox-background:var(--aura-surface);--vaadin-radio-button-background:var(--aura-surface);transition:background-color .1s}vaadin-checkbox:not([readonly],[disabled])::part(checkbox),vaadin-radio-button:not([disabled])::part(radio){--aura-surface-level:4;box-shadow:0 2px 1px -1px rgba(0,0,0,.07);--_shade:color-mix(in srgb,var(--vaadin-border-color-secondary) 50%,transparent);background-image:linear-gradient(light-dark(transparent,var(--_shade)),transparent 33%,transparent 66%,light-dark(var(--_shade),transparent))}vaadin-checkbox:not([checked],[indeterminate])::part(checkbox),vaadin-radio-button:not([checked])::part(radio){background-clip:padding-box}vaadin-checkbox:is([checked],[indeterminate]):not([readonly],[disabled])::part(checkbox){--vaadin-checkbox-background:var(--aura-accent-color);--vaadin-checkbox-color:var(--aura-accent-contrast);--vaadin-checkbox-border-color:var(--vaadin-border-color-secondary)}vaadin-radio-button[checked]:not([readonly],[disabled])::part(radio){--vaadin-radio-button-background:var(--aura-accent-color);--vaadin-radio-button-color:var(--aura-accent-contrast);--vaadin-radio-button-border-color:var(--vaadin-border-color-secondary)}vaadin-checkbox:not([readonly],[disabled])::part(checkbox):before,vaadin-radio-button:not([disabled])::part(radio):before{background-color:currentColor;border-radius:inherit;content:"";inset:calc(var(--vaadin-input-field-border-width, 1px)-1);opacity:0;position:absolute;transition:opacity .1s,background-color .1s}@media (any-hover:hover){vaadin-checkbox:hover:not([readonly],[disabled],[active])::part(checkbox):before,vaadin-radio-button:hover:not([disabled],[active])::part(radio):before{opacity:.04}}vaadin-checkbox[active]:not([readonly],[disabled])::part(checkbox):before,vaadin-radio-button[active]:not([disabled])::part(radio):before{background:#000;opacity:.1}vaadin-confirm-dialog::part(footer){margin-inline-start:auto;width:fit-content}vaadin-confirm-dialog::part(cancel-button),vaadin-confirm-dialog::part(confirm-button),vaadin-confirm-dialog::part(reject-button){flex:1}vaadin-confirm-dialog :is([slot=cancel-button],[slot=reject-button],[slot=confirm-button]){display:flex}:where(:root,: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)}:where(:root,: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);--vaadin-date-picker-date-selected-background:var(--aura-accent-color);--vaadin-date-picker-date-selected-color:var(--aura-accent-contrast)}:where(:root,:host,[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)}vaadin-date-picker-month-scroller,vaadin-date-picker-overlay-content::part(toolbar){background:var(--aura-surface)}vaadin-date-picker-year-scroller:before{background:var(--aura-surface-solid) padding-box;height:12px;width:12px}vaadin-date-picker-year::part(year-number){font-size:var(--aura-font-size-s);font-weight:var(--aura-font-weight-medium)}vaadin-date-picker-year[current]::part(year-number){font-weight:var(--aura-font-weight-semibold)}vaadin-date-picker-year[selected]{position:relative}vaadin-date-picker-year[selected]::part(year-number){color:var(--aura-accent-text)}vaadin-date-picker-year[selected]:after{background:var(--aura-accent-color);border-radius:var(--vaadin-radius-s);content:"";height:100%;position:absolute;top:-.5lh;inset-inline:3px;opacity:.1;z-index:-1}vaadin-date-picker-year::part(year-separator){height:8px;line-height:0;text-align:center;translate:0 -50%}vaadin-date-picker-year::part(year-separator):before{background:var(--vaadin-text-color-disabled);border-radius:50%;content:"";display:inline-block;height:3px;width:3px}:where(:root,:host){--vaadin-dialog-title-font-size:var(--aura-font-size-l);--vaadin-dialog-border-width:0px}vaadin-confirm-dialog,vaadin-crud::part(overlay),vaadin-dialog{color-scheme:var(--aura-content-color-scheme)}vaadin-confirm-dialog::part(overlay),vaadin-dialog::part(overlay){--vaadin-dialog-background:var(--aura-surface);--aura-surface-level:4;view-transition-name:vaadin-dialog}vaadin-confirm-dialog::part(message){color:var(--vaadin-text-color-secondary)}::view-transition-group(vaadin-dialog){border-radius:var(--vaadin-dialog-border-radius,var(--vaadin-radius-l));z-index:1}:where(:root,: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}:is(vaadin-grid,vaadin-crud-grid)::part(empty-state){align-items:center;display:flex;justify-content:center}vaadin-grid::part(active-nav-item){--vaadin-grid-row-highlight-background-color:var(--vaadin-background-container)}vaadin-grid-sorter::part(indicators){transition:color .12s}: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}:where(:root,:host,[theme]){--vaadin-input-field-background:var(--aura-surface);--vaadin-input-field-error-color:var(--aura-red-text)}::part(input-field),vaadin-input-container,vaadin-message-input{--vaadin-input-field-background:var(--aura-surface);--aura-surface-level:4;--aura-surface-opacity:0.7;background-clip:padding-box}:not([readonly],[disabled])::part(input-field),vaadin-message-input:not([readonly],[disabled]){box-shadow:0 2px 1px -1px rgba(0,0,0,.04)}[disabled]::part(input-field){--aura-surface-opacity:0.5;--aura-surface-level:1}::part(field-button){transition:color .1s}:not([readonly],[disabled])::part(field-button):active{color:var(--vaadin-text-color)}@media (any-hover:hover){:not([readonly],[disabled])::part(field-button):hover{color:var(--vaadin-text-color)}}:where(:root,: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)}}[role=menu] [role=separator]{border-color:var(--vaadin-border-color);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)}:where(:root,: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){background:color-mix(in srgb,var(--aura-red) 10%,transparent);border-radius:var(--vaadin-radius-m);padding:var(--vaadin-padding-m)}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){padding-bottom:0;text-align:center}&::part(form-title){display:none}[slot=title]{letter-spacing:-.03em}}vaadin-master-detail-layout::part(detail){--aura-surface-level:2;background:var(--aura-surface) padding-box}vaadin-master-detail-layout[drawer]::part(detail){--aura-surface-opacity:var(--aura-overlay-surface-opacity);-webkit-backdrop-filter:var(--aura-overlay-backdrop-filter);backdrop-filter:var(--aura-overlay-backdrop-filter);background:var(--aura-surface) padding-box;box-shadow:inset 1px 0 0 0 var(--aura-overlay-inner-outline-color),-1px 0 0 0 var(--aura-overlay-outline-color),var(--aura-shadow-m)}vaadin-master-detail-layout[containment=viewport][drawer]::part(detail){box-shadow:var(--aura-overlay-shadow)}vaadin-master-detail-layout[containment=viewport][drawer]::part(detail),vaadin-master-detail-layout[theme~=inset-drawer][drawer]::part(detail){border-radius:var(--_app-layout-radius);margin:calc(var(--aura-app-layout-inset)/2)}vaadin-master-detail-layout:not([drawer])::part(detail),vaadin-master-detail-layout>vaadin-master-detail-layout{border-end-end-radius:var(--_app-layout-radius);border-start-end-radius:var(--_app-layout-radius)}::view-transition-group(vaadin-mdl-backdrop),::view-transition-group(vaadin-mdl-detail),::view-transition-group(vaadin-mdl-master){border-radius:var(--_app-layout-radius);overflow:hidden}@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){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}vaadin-message-input vaadin-text-area::part(input-field){--vaadin-input-field-background:transparent}vaadin-message-input[theme~=icon-button] vaadin-message-input-button{color:transparent;contain:strict;height:var(--vaadin-icon-size,1lh);position:relative;width:var(--vaadin-icon-size,1lh)}vaadin-message-input[theme~=icon-button] vaadin-message-input-button:before{background:var(--vaadin-button-text-color);content:"";inset:0;mask-image:var(--_vaadin-icon-paper-airplane);position:absolute}vaadin-message-input[theme~=icon-button][dir=rtl] vaadin-message-input-button:before{scale:-1}@media (forced-colors:active){vaadin-message-input[theme~=icon-button] vaadin-message-input-button{forced-color-adjust:none;--vaadin-button-text-color:CanvasText}}:where(:root,:host){--vaadin-chip-padding:0.4em;--vaadin-chip-background:var(--vaadin-background-container-strong)}vaadin-multi-select-combo-box-chip{--vaadin-chip-height:1lh;--vaadin-icon-size:1.25em;--vaadin-chip-padding:0.4em;--vaadin-chip-border-radius:var(--vaadin-radius-s);--vaadin-chip-border-width:0px}:where(:root,:host){--vaadin-notification-border-width:0px;--vaadin-ease-fluid:cubic-bezier(0.78,0,0.22,1)}vaadin-notification-container{color-scheme:var(--aura-notification-color-scheme)}vaadin-notification-card::part(overlay){--aura-surface-level:4;--vaadin-notification-background:var(--aura-surface);view-transition-name:vaadin-notification}::view-transition-group(vaadin-notification){border-radius:var(--vaadin-notification-border-radius,var(--vaadin-radius-l));z-index:1}@supports (background:-webkit-named-image(i)){::view-transition-group(vaadin-notification){backdrop-filter:none}}vaadin-notification-card vaadin-card{--vaadin-card-gap:var(--vaadin-gap-xs) var(--vaadin-gap-s);color:var(--vaadin-text-color-secondary)}vaadin-notification-card vaadin-button{--aura-surface-level:8;--aura-surface-opacity:0.3}:where(:root,: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),rgba(0,0,0,.3));--aura-overlay-outline-color:light-dark(oklch(from var(--aura-background-light) 0.1 c h/max(0.04,0.03 + 0.04 * var(--aura-contrast))),oklch(from var(--aura-background-dark) 0.1 c h/max(0.04,0.03 + 0.04 * var(--aura-contrast))));--aura-overlay-inner-outline-color:hsla(0deg,0%,100%,max(3%,2% + 4% * var(--aura-contrast)));--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(20px) brightness(1.1) saturate(1.2);--aura-overlay-surface-opacity:0.85;@media (prefers-reduced-transparency:reduce){--aura-overlay-surface-opacity:1!important}}::part(overlay){--vaadin-overlay-background:var(--aura-surface);--aura-surface-level:4;--aura-surface-opacity:var(--aura-overlay-surface-opacity);-webkit-backdrop-filter:var(--aura-overlay-backdrop-filter);backdrop-filter:var(--aura-overlay-backdrop-filter);box-shadow:var(--aura-overlay-shadow);color:var(--vaadin-text-color);font-family:var(--aura-font-family);font-size:var(--aura-font-size-m);font-weight:var(--aura-font-weight);line-height:var(--aura-line-height-m)}:where(:root,: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%,#f6f4ee))}vaadin-progress-bar{height:var(--vaadin-gap-s);&[dir=rtl]::part(value){scale:-1}}:where(:root,:host){--vaadin-rich-text-editor-toolbar-background:transparent;--vaadin-rich-text-editor-toolbar-padding:var(--vaadin-padding-xs);--vaadin-rich-text-editor-toolbar-gap:var(--vaadin-gap-xs) var(--vaadin-gap-m);--vaadin-rich-text-editor-toolbar-button-background:transparent;--vaadin-rich-text-editor-toolbar-button-border-radius:calc(var(--vaadin-radius-m) - 2px);--vaadin-rich-text-editor-toolbar-button-padding:var(--vaadin-padding-xs);--vaadin-rich-text-editor-toolbar-button-text-color:var(--vaadin-text-color-secondary)}vaadin-rich-text-editor{--vaadin-icon-visual-size:90%;--vaadin-rich-text-editor-background:var(--aura-surface) padding-box;--aura-surface-level:4;--aura-surface-opacity:0.7!important;box-shadow:0 2px 1px -1px rgba(0,0,0,.04);&:not(:focus-within){--vaadin-rich-text-editor-toolbar-button-text-color:var(--vaadin-text-color-disabled)}}vaadin-rich-text-editor::part(toolbar){contain:paint}vaadin-rich-text-editor::part(toolbar-group){align-items:center;gap:1px}vaadin-rich-text-editor::part(toolbar-group):before{background:var(--vaadin-border-color-secondary);content:"";height:1lh;position:absolute;translate:calc(var(--vaadin-gap-m)/-2);width:1px}vaadin-rich-text-editor::part(toolbar-button){border:1px solid transparent;outline-offset:calc(var(--vaadin-focus-ring-width)-1);position:relative;transition:color 80ms,background-color 80ms,scale .18s}vaadin-rich-text-editor::part(toolbar-button-pressed){--vaadin-rich-text-editor-toolbar-button-background:transparent}vaadin-rich-text-editor:focus-within::part(toolbar-button-pressed){--vaadin-rich-text-editor-toolbar-button-background:var(--vaadin-background-container-strong) padding-box;--vaadin-rich-text-editor-toolbar-button-text-color:var(--vaadin-text-color);border-color:var(--vaadin-text-color-disabled)}vaadin-rich-text-editor::part(toolbar-button):active{scale:.95;transition-duration:80ms,80ms,50ms}@media (any-hover:hover){vaadin-rich-text-editor::part(toolbar-button):hover{--vaadin-rich-text-editor-toolbar-button-background:var(--vaadin-background-container);--vaadin-rich-text-editor-toolbar-button-text-color:var(--vaadin-text-color)}}vaadin-select-item::part(content){align-items:center;display:flex;gap:inherit}vaadin-select[theme~=subtle]::part(input-field){--vaadin-input-field-border-color:transparent;--vaadin-input-field-background:transparent}vaadin-select[theme~=subtle]::part(toggle-button){opacity:0;transition:opacity .2s;--vaadin-icon-size:0.75lh}vaadin-select[theme~=subtle][focus-ring]::part(toggle-button){opacity:1}@media (any-hover:hover){vaadin-select[theme~=subtle]:hover::part(toggle-button){opacity:1}}vaadin-select[theme~=auto-size]{--vaadin-field-default-width:auto}:where(:root,:host){--vaadin-side-nav-label-line-height:var(--aura-line-height-xs);--vaadin-side-nav-label-font-weight:var(--aura-font-weight-medium);--vaadin-side-nav-item-font-weight:var(--aura-font-weight-medium);--vaadin-side-nav-item-border-width:1px;--vaadin-side-nav-items-gap:var(--vaadin-gap-xs)}vaadin-side-nav+vaadin-side-nav{margin-top:var(--vaadin-gap-l)}vaadin-side-nav-item::part(content){transition:color .12s,border-color .12s,background-color .12s;--aura-surface-level:3}vaadin-side-nav-item:not([disabled])::part(content):hover{--vaadin-side-nav-item-color:var(--vaadin-text-color)}vaadin-side-nav-item[current]::part(content){--_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.05 + c / 2) + 0.1 var(--aura-contrast))),oklch(from var(--aura-accent-dark) l calc(c / 2) h/calc(min(0.15, 0.05 + c / 2) + 0.1 * var(--aura-contrast))));--vaadin-side-nav-item-background:linear-gradient(var(--_accent),var(--_accent)) var(--aura-surface) padding-box;--vaadin-side-nav-item-color:var(--aura-accent-text);--vaadin-side-nav-item-border-color:var(--_accent-border)}vaadin-side-nav[theme~=filled] vaadin-side-nav-item[current]::part(content){--vaadin-side-nav-item-background:var(--aura-accent-color) border-box;--vaadin-side-nav-item-color:var(--aura-accent-contrast);outline-offset:2px}vaadin-side-nav[theme~=filled] vaadin-side-nav-item[current]>:not([slot=children]):not([slot=tooltip]){--vaadin-text-color:var(--vaadin-side-nav-item-color);--vaadin-text-color-secondary:var(--vaadin-side-nav-item-color);--aura-accent-color:var(--vaadin-side-nav-item-color);--aura-accent-text:var(--vaadin-side-nav-item-color);--aura-red:var(--vaadin-side-nav-item-color);--aura-red-text:var(--vaadin-side-nav-item-color);--aura-orange:var(--vaadin-side-nav-item-color);--aura-orange-text:var(--vaadin-side-nav-item-color);--aura-yellow:var(--vaadin-side-nav-item-color);--aura-yellow-text:var(--vaadin-side-nav-item-color);--aura-green:var(--vaadin-side-nav-item-color);--aura-green-text:var(--vaadin-side-nav-item-color);--aura-blue:var(--vaadin-side-nav-item-color);--aura-blue-text:var(--vaadin-side-nav-item-color);--aura-purple:var(--vaadin-side-nav-item-color);--aura-purple-text:var(--vaadin-side-nav-item-color)}:where(:root,:host){--vaadin-upload-background:var(--aura-surface) padding-box;--vaadin-upload-border:1px solid var(--vaadin-border-color-secondary);--vaadin-upload-padding:var(--vaadin-padding-s);--vaadin-upload-file-list-divider-color:var(--vaadin-border-color-secondary);--vaadin-upload-file-list-divider-width:1px;--vaadin-upload-file-error-color:var(--vaadin-text-color-secondary);--vaadin-upload-file-warning-color:var(--aura-red);--vaadin-upload-file-done-color:var(--aura-green);--vaadin-upload-file-name-font-weight:var(--aura-font-weight-medium);--vaadin-upload-file-padding:var(--vaadin-padding-s);--vaadin-upload-file-gap:0 var(--vaadin-gap-s);--vaadin-upload-file-button-padding:var(--vaadin-upload-file-padding);--vaadin-upload-file-button-border-width:0;--vaadin-upload-file-status-font-size:var(--aura-font-size-s);--vaadin-upload-file-status-line-height:var(--aura-line-height-s);--vaadin-upload-file-error-font-size:var(--aura-font-size-s);--vaadin-upload-file-error-line-height:var(--aura-line-height-s);--vaadin-upload-drop-label-color:var(--vaadin-text-color-secondary);--vaadin-upload-drop-label-font-weight:var(--aura-font-weight-medium)}vaadin-upload{--_divider-offset-start:calc(var(--vaadin-padding-s) + var(--vaadin-icon-size, 1lh) + var(--vaadin-gap-s));--_divider-offset-end:var(--vaadin-padding-s)}vaadin-upload::part(primary-buttons){flex-wrap:wrap;gap:var(--vaadin-gap-s) var(--vaadin-gap-m)}vaadin-upload:not([nodrop]) vaadin-button[slot=add-button]{flex:1}vaadin-upload::part(drop-label){flex:100;margin-inline-start:calc(var(--vaadin-upload-padding)-1);min-width:fit-content;padding:var(--vaadin-padding-xs) var(--vaadin-padding-s)}vaadin-upload[dragover-valid]{outline:var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);outline-offset:-1px}vaadin-upload-file-list li{margin-inline:var(--_divider-offset-start) var(--_divider-offset-end);&:first-child{margin-top:0}}vaadin-upload:not([theme~=no-border]) vaadin-upload-file-list:has(li){border-top:1px solid var(--vaadin-border-color-secondary);margin:calc(var(--vaadin-upload-padding)-1);margin-top:var(--vaadin-upload-padding)}vaadin-upload-file{--vaadin-icon-visual-size:0.75lh;border-radius:var(--vaadin-radius-m);margin-inline:calc(var(--_divider-offset-start, 0)-1) calc(var(--_divider-offset-end, 0)-1);padding-block:var(--vaadin-padding-m);&::part(commands),&::part(done-icon),&::part(warning-icon){align-self:baseline}&:not([complete],[error])::part(done-icon){display:block}&:not([complete],[error])::part(done-icon):before{background:var(--vaadin-border-color-secondary)}&::part(commands){margin-block:calc(var(--vaadin-upload-file-button-padding)-1);margin-inline-end:calc(var(--vaadin-upload-file-button-padding)-1)}&::part(remove-button),&::part(retry-button){--vaadin-upload-file-button-text-color:var(--vaadin-text-color-secondary);outline-offset:calc(var(--vaadin-focus-ring-width)*-1)}vaadin-progress-bar{display:block;height:var(--vaadin-gap-xs);margin-top:var(--vaadin-gap-xs)}&:not([error])::part(status){display:-webkit-box;-webkit-line-clamp:2;max-height:2lh;-webkit-box-orient:vertical;overflow:hidden}&[complete]::part(status){height:1lh;max-height:0;transition:max-height .2s;visibility:hidden}&[complete] vaadin-progress-bar{height:0;margin-top:0;transition:height .2s;visibility:hidden}}vaadin-upload[theme~=no-border]{--vaadin-upload-padding:0;--vaadin-upload-background:transparent;--vaadin-upload-border:none;--vaadin-upload-file-list-divider-width:0;--_divider-offset-start:0px;--_divider-offset-end:0px;outline-offset:2px;vaadin-upload-file-list::part(list){display:flex;flex-direction:column;gap:var(--vaadin-gap-s)}vaadin-upload-file-list li:first-child{margin-top:var(--vaadin-gap-s)}vaadin-upload-file{background:var(--aura-surface) padding-box;border:1px solid var(--vaadin-border-color-secondary)}}@media (any-hover:hover){vaadin-upload-file::part(remove-button):hover,vaadin-upload-file::part(retry-button):hover{--vaadin-upload-file-button-text-color:var(--vaadin-text-color)}}:where(:root,:host){cursor:default;--_vaadin-icon-chevron-down:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>')}
1	+ :where(:host),:where(:root){--aura-contrast:1;--aura-accent-light:#1858d8;--aura-accent-dark:#3670e2;--_color-base:light-dark(oklch(from var(--aura-background-light) 0.1 calc(c / 2 + c * (1 - c)) h),oklch(from var(--aura-background-dark) 1 c h));--aura-text-light:color-mix(in srgb,var(--_color-base) calc(90% + 5%var(--aura-contrast)),transparent);--aura-text-dark:color-mix(in srgb,#fff calc(90% + 5%var(--aura-contrast)),transparent);--vaadin-text-color:light-dark(var(--aura-text-light),var(--aura-text-dark));--vaadin-text-color-secondary:light-dark(color-mix(in srgb,var(--_color-base) calc(55% + 10%var(--aura-contrast)),transparent),color-mix(in srgb,var(--_color-base) calc(57% + 10%var(--aura-contrast)),transparent));--vaadin-text-color-disabled:color-mix(in srgb,var(--_color-base) calc(30% + 10%var(--aura-contrast)),transparent);--_border-color-base:light-dark(oklch(from var(--aura-background-light) 0.1 c h),oklch(from var(--aura-background-dark) 0.85 c h));--vaadin-border-color:color-mix(in srgb,var(--_border-color-base) calc(14% + 6%var(--aura-contrast)),transparent);--vaadin-border-color-secondary:light-dark(color-mix(in srgb,var(--_border-color-base) max(5%,5% + 3% * var(--aura-contrast)),transparent),color-mix(in srgb,var(--_border-color-base) max(6%,5% + 5% * var(--aura-contrast)),transparent));--aura-background-light:oklch(95% 0.005 260);--aura-background-dark:oklch(20% 0.01 260);--aura-background:light-dark(var(--aura-background-light),var(--aura-background-dark));--_bg-alt:oklch(from var(--aura-background) calc(l + c) min(c,c * 2 - l/20) calc(h + 180 * var(--_safari-17-deg, 1deg) * l * c * 4));--_bg-accent:radial-gradient(circle at 0% 0%,light-dark(oklch(from var(--aura-background-light) min(1,l + c * 3) min(c,c * 3) h),oklch(from var(--aura-background-dark) min(1,l + c) clamp(0,c * 1.5,0.4) h)),transparent 30%);--aura-app-background:var(--_bg-accent),radial-gradient(circle at 25% 0% in xyz,var(--aura-background) 33%,var(--_bg-alt)) var(--aura-background);--vaadin-focus-ring-color:var(--aura-accent-color);accent-color:var(--aura-accent-color);--vaadin-user-color:var(--aura-accent-color);--vaadin-background-container:color-mix(in srgb,var(--_color-base) calc(3% + min(3%, 1% * var(--aura-contrast))),transparent);--vaadin-background-container-strong:color-mix(in srgb,var(--_color-base) calc(7% + min(8%, 1.5% * var(--aura-contrast))),transparent);background:var(--aura-app-background);background-attachment:fixed;background-size:100vw 100vh;color:var(--vaadin-text-color)}:where(:host),:where(:root),vaadin-button,vaadin-checkbox::part(checkbox),vaadin-context-menu-item,vaadin-crud-edit,vaadin-drawer-toggle,vaadin-menu-bar-button,vaadin-menu-bar-item,vaadin-radio-button::part(radio),vaadin-side-nav-item::part(content),vaadin-tab{--aura-accent-contrast-light:oklch(from var(--aura-accent-light) clamp(0,(0.62 - l) * 1000,1) 0 0/clamp(0.8,(0.62 - l) * 1000,1));--aura-accent-contrast-dark:oklch(from var(--aura-accent-dark) clamp(0,(0.62 - l) * 1000,1) 0 0/clamp(0.8,(0.62 - l) * 1000,1));--aura-accent-text-light:color-mix(in srgb,var(--aura-accent-light) calc(70% - 15%var(--aura-contrast)),var(--vaadin-text-color));--aura-accent-text-dark:color-mix(in srgb,var(--aura-accent-dark) calc(70% - 15%var(--aura-contrast)),var(--vaadin-text-color));--aura-accent-color:light-dark(var(--aura-accent-light),var(--aura-accent-dark));--aura-accent-contrast:light-dark(var(--aura-accent-contrast-light),var(--aura-accent-contrast-dark));--aura-accent-text:light-dark(var(--aura-accent-text-light),var(--aura-accent-text-dark))}@supports (color:hsl(0 0 0)){:where(:host),:where(:root){--_safari-17-deg:1}}:where(h1,h2,h3,h4,h5,h6){color:var(--vaadin-text-color)}:where(:host),:where(:root){--aura-color-scheme:light;--aura-content-color-scheme:var(--aura-color-scheme);--aura-notification-color-scheme:var(--aura-color-scheme)}html{color-scheme:var(--aura-color-scheme)}:where(:host),:where(:root){--aura-red:oklch(0.6 0.22 25);--aura-orange:oklch(0.61 0.4 93);--aura-yellow:oklch(0.9 0.36 105);--aura-green:oklch(0.6 0.28 160);--aura-blue:oklch(0.6 0.3 240);--aura-purple:oklch(0.6 0.3 280);--aura-red-text:color-mix(in srgb,var(--aura-red) calc(70% - 15%var(--aura-contrast)),var(--vaadin-text-color));--aura-orange-text:color-mix(in srgb,var(--aura-orange) calc(70% - 15%var(--aura-contrast)),var(--vaadin-text-color));--aura-yellow-text:color-mix(in srgb,var(--aura-yellow) calc(65% - 15%var(--aura-contrast)),var(--vaadin-text-color));--aura-green-text:color-mix(in srgb,var(--aura-green) calc(70% - 15%var(--aura-contrast)),var(--vaadin-text-color));--aura-blue-text:color-mix(in srgb,var(--aura-blue) calc(70% - 15%var(--aura-contrast)),var(--vaadin-text-color));--aura-purple-text:color-mix(in srgb,var(--aura-purple) calc(70% - 15%var(--aura-contrast)),var(--vaadin-text-color))}:where(:host),:where(:root){--aura-shadow-color:light-dark(oklch(from var(--aura-background-light) calc(l - l * 0.8) calc(c / 10) h/0.2),oklch(from var(--aura-background-dark) calc(l - l * 0.8) calc(c / 10) h/0.2));--aura-shadow-m:0 8px 16px -3px var(--aura-shadow-color)}:where(:host),:where(:root){--aura-base-size:16;--_size-ref:16;--aura-base-radius:3;--vaadin-radius-s:min(0.25lh,round(var(--aura-base-radius) * 1px + 2px,1px));--vaadin-radius-m:round(var(--aura-base-radius) * 2px + 3px,1px);--vaadin-radius-l:round(var(--aura-base-radius) * 1.5px + 10px,1px);--vaadin-icon-stroke-width:1.75}:where(:host),:where(:root),:where([theme]){--vaadin-padding-xs:round(var(--aura-base-size) * 0.25 * pow(var(--aura-base-size)/var(--_size-ref),0.5) * 1px,1px);--vaadin-padding-s:round(var(--aura-base-size) * 0.5 * pow(var(--aura-base-size)/var(--_size-ref),0.75) * 1px,1px);--vaadin-padding-m:round(var(--aura-base-size) * 0.75 * pow(var(--aura-base-size)/var(--_size-ref),0.3) * 1px,1px);--vaadin-padding-l:calc(var(--aura-base-size)1px);--vaadin-padding-xl:round(var(--aura-base-size) 1.5 * pow(var(--aura-base-size)/var(--_size-ref),0.1) * 1px,1px);--vaadin-padding-container:round(var(--vaadin-padding-s)/1.4,1px) max(var(--vaadin-padding-s),round(var(--vaadin-radius-m)/2,1px));--vaadin-gap-xs:var(--vaadin-padding-xs);--vaadin-gap-s:var(--vaadin-padding-s);--vaadin-gap-m:var(--vaadin-padding-m);--vaadin-gap-l:var(--vaadin-padding-l);--vaadin-gap-xl:var(--vaadin-padding-xl)}@media (pointer:coarse){:where(:host),:where(:root){--aura-base-size:18}}:where(:host),:where(:root){--aura-surface-level:1}.aura-surface,.aura-surface-solid,::part(input-field),::part(overlay),:host,:root,vaadin-accordion-panel[theme~=filled],vaadin-app-layout::part(drawer),vaadin-app-layout::part(navbar),vaadin-button,vaadin-card,vaadin-checkbox::part(checkbox),vaadin-confirm-dialog::part(overlay),vaadin-crud-dialog::part(overlay),vaadin-dashboard-widget,vaadin-details[theme~=filled],vaadin-dialog::part(overlay),vaadin-login-overlay::part(overlay),vaadin-master-detail-layout::part(detail),vaadin-menu-bar-button,vaadin-message-input,vaadin-radio-button::part(radio),vaadin-rich-text-editor,vaadin-side-nav-item::part(content),vaadin-tab,vaadin-upload,vaadin-upload-file{--aura-surface-opacity:0.5;--aura-surface-solid:light-dark(oklch(from var(--aura-background-light) min(1,l + (0.98 - l) * 4 + var(--aura-surface-level) * 0.06 - var(--aura-surface-opacity)/20) clamp(0,c - l/10 * var(--aura-surface-level) + var(--aura-surface-opacity)/40,c) h),oklch(from var(--aura-background-dark) calc(max(l + 0.03, 0.25) + var(--aura-surface-level)0.022 - var(--aura-surface-opacity)/40) clamp(0,c (1 + l),0.2) h));--aura-surface:color-mix(in oklab,var(--aura-surface-solid) calc(100%var(--aura-surface-opacity)),transparent);--vaadin-background-color:var(--aura-surface-solid)}.aura-surface{background:var(--aura-surface) padding-box}.aura-surface-solid{--aura-surface-opacity:1;background:var(--aura-surface-solid) padding-box}@font-face{font-display:swap;font-family:Instrument Sans;font-style:normal;font-weight:400 700;src:url(fonts/InstrumentSans/InstrumentSans.woff2) format("woff2")}:where(:host),:where(:root){--aura-font-family-system:system-ui,ui-sans-serif,sans-serif;--aura-font-family-instrument-sans:"Instrument Sans",var(--aura-font-family-system);--aura-font-family:var(--aura-font-family-instrument-sans);--aura-base-font-size:14;--aura-base-line-height:1.4;--aura-font-weight-regular:400;--aura-font-weight-medium:500;--aura-font-weight-semibold:600}@media (pointer:coarse){:where(:host),:where(:root){--vaadin-input-field-value-font-size:max(16px,var(--aura-font-size-m))}}@supports (-webkit-touch-callout:none){@media (pointer:coarse){:where(:host),:where(:root){font:-apple-system-body}}}:where(:host),:where(:root),:where([theme]){--aura-font-size-xs:clamp(0.625rem,round(var(--aura-font-size-m) 0.75,0.0625rem),0.8125rem);--aura-font-size-s:round((var(--aura-font-size-m) + var(--aura-font-size-xs))/2,0.0625rem);--aura-font-size-m:round(var(--aura-base-font-size)/16 * 1rem,0.0625rem);--aura-font-size-l:round(var(--aura-font-size-m) * 1.125,0.0625rem);--aura-font-size-xl:round(var(--aura-font-size-l) * 1.125,0.0625rem);--aura-line-height-xs:round(var(--aura-font-size-xs) * var(--aura-base-line-height),0.125rem);--aura-line-height-s:round(var(--aura-font-size-s) * var(--aura-base-line-height),0.125rem);--aura-line-height-m:round(var(--aura-font-size-m) * var(--aura-base-line-height),0.125rem);--aura-line-height-l:round(var(--aura-font-size-l) * var(--aura-base-line-height),0.125rem);--aura-line-height-xl:round(var(--aura-font-size-xl) * var(--aura-base-line-height),0.125rem)}:where(:host),:where(body){font-family:var(--aura-font-family);font-optical-sizing:auto;font-style:normal;font-weight:var(--aura-font-weight-regular);-webkit-font-smoothing:var(--aura-font-smoothing,antialiased);-moz-osx-font-smoothing:var(--aura-font-smoothing,grayscale);-webkit-text-size-adjust:none;text-size-adjust:none}:where(:host),:where([theme]:not(html)),:where(body){font-size:var(--aura-font-size-m);line-height:var(--aura-line-height-m)}:where(h1,h2,h3,h4,h5,h6){font-weight:var(--aura-font-weight-semibold);margin:0;text-wrap:balance}:where(h1){font-size:var(--aura-font-size-xl);line-height:var(--aura-line-height-xl)}:where(h2,h3){font-size:var(--aura-font-size-l);line-height:var(--aura-line-height-l)}:where(h4,h5){font-size:var(--aura-font-size-m);line-height:var(--aura-line-height-m)}:where(h6){font-size:var(--aura-font-size-s);line-height:var(--aura-line-height-s)}:is(vaadin-details,vaadin-accordion-panel):not([theme~=no-padding])::part(content){padding:var(--vaadin-padding-container);padding-top:0}:is(vaadin-details,vaadin-accordion-panel):not([theme~=no-padding],[theme~=reverse])::part(content){margin-inline-start:calc(var(--vaadin-icon-size, 1lh) + var(--vaadin-details-summary-gap, var(--vaadin-gap-s)))}:is(vaadin-details,vaadin-accordion-panel)[theme~=reverse]{[slot=summary]::part(content){width:100%}[slot=summary]::part(toggle){margin-inline-start:auto;order:1}}:is(vaadin-details,vaadin-accordion-panel)[theme~=filled]{background:var(--aura-surface) padding-box;border:1px solid var(--vaadin-border-color-secondary);border-radius:var(--vaadin-radius-m);&:has(+:is(vaadin-details,vaadin-accordion-panel)[theme~=filled]){border-bottom-left-radius:0;border-bottom-right-radius:0}&+:is(vaadin-details,vaadin-accordion-panel)[theme~=filled]{border-top-color:transparent;border-top-left-radius:0;border-top-right-radius:0;margin-top:-1px}}:where(:host),:where(:root){--aura-app-layout-inset:1.5vmin;--aura-app-layout-radius:var(--vaadin-radius-l);--_aura-mdl-border:1px;--vaadin-app-layout-navbar-padding-top:0;--vaadin-app-layout-navbar-padding-bottom:0;--vaadin-app-layout-navbar-padding-inline-start:0;--vaadin-app-layout-navbar-padding-inline-end:0}@media (height <= 600px),(width <= 800px){html{--aura-app-layout-inset:0px!important;--_aura-mdl-border:0px}}vaadin-app-layout{--_app-layout-radius:clamp(0px,var(--aura-app-layout-radius),var(--aura-app-layout-inset) * 100);padding-block:var(--aura-app-layout-inset);padding-inline-end:var(--aura-app-layout-inset);padding-top:calc(var(--aura-app-layout-inset) + var(--_vaadin-app-layout-navbar-offset-size))}vaadin-app-layout[overlay]{&::part(drawer),&::part(navbar){--vaadin-app-layout-navbar-background:var(--aura-surface);--vaadin-app-layout-drawer-background:var(--aura-surface);--aura-surface-opacity:var(--aura-overlay-surface-opacity);-webkit-backdrop-filter:var(--aura-overlay-backdrop-filter);backdrop-filter:var(--aura-overlay-backdrop-filter)}}vaadin-app-layout:is([overlay],:not([drawer-opened])){padding-inline-start:var(--aura-app-layout-inset)}vaadin-app-layout::part(navbar){justify-content:space-between}vaadin-app-layout:not([overlay])::part(navbar){--vaadin-app-layout-navbar-background:transparent}vaadin-app-layout:not([overlay])::part(drawer){padding-block:var(--aura-app-layout-inset);padding-inline:max(0px,var(--aura-app-layout-inset) - var(--vaadin-padding-s))}vaadin-app-layout>vaadin-scroller[slot=drawer]{padding-inline:var(--vaadin-padding-m);scrollbar-width:thin}vaadin-app-layout>vaadin-scroller:nth-child(1 of [slot=drawer]){padding-top:var(--vaadin-padding-s)}vaadin-app-layout>vaadin-scroller:nth-last-child(1 of [slot=drawer]){padding-bottom:var(--vaadin-padding-s)}vaadin-app-layout>:nth-child(1 of :not([slot])):nth-last-child(1 of :not([slot])){background:linear-gradient(var(--aura-surface),var(--aura-surface)),var(--aura-app-background);background-clip:padding-box;background-origin:border-box;border:var(--_aura-mdl-border) solid var(--vaadin-border-color-secondary);border-block-width:min(var(--aura-app-layout-inset),var(--_aura-mdl-border));border-inline-end-width:min(var(--aura-app-layout-inset),var(--_aura-mdl-border));border-radius:var(--_app-layout-radius);box-sizing:border-box;color:var(--vaadin-text-color);color-scheme:var(--aura-content-color-scheme);min-height:100%}vaadin-app-layout>vaadin-master-detail-layout:nth-child(1 of :not([slot])):nth-last-child(1 of :not([slot])){&:not([drawer])::part(detail),&>vaadin-master-detail-layout{border-end-end-radius:var(--_app-layout-radius);border-start-end-radius:var(--_app-layout-radius)}&::part(backdrop){border-radius:calc(var(--_app-layout-radius) - var(--_aura-mdl-border))}&:is([drawer][has-detail]){border-color:light-dark(var(--vaadin-border-color),var(--vaadin-border-color-secondary))}}vaadin-app-layout[has-navbar][has-drawer]{padding-top:var(--_vaadin-app-layout-navbar-offset-size);&::part(drawer){padding-top:0}}vaadin-app-layout[has-drawer]:not([overlay]):not([drawer-opened])>:nth-child(1 of :not([slot])):nth-last-child(1 of :not([slot])){border-inline-start-width:min(var(--aura-app-layout-inset),var(--_aura-mdl-border))}vaadin-app-layout[has-navbar][has-drawer][drawer-opened]:not([overlay])>:nth-child(1 of :not([slot])):nth-last-child(1 of :not([slot])){border-start-start-radius:var(--aura-app-layout-radius)}vaadin-app-layout[has-navbar][has-drawer]>:nth-child(1 of :not([slot])):nth-last-child(1 of :not([slot])){border-top-width:var(--_aura-mdl-border)}vaadin-app-layout:not([has-navbar])>[slot=drawer] vaadin-drawer-toggle:not([theme~=permanent]),vaadin-app-layout[has-navbar]>:is(:not([slot]),[slot=drawer]) vaadin-drawer-toggle:not([theme~=permanent]){display:none}:where(:host),:where(:root){--vaadin-avatar-border-color:var(--vaadin-border-color-secondary);--vaadin-avatar-background:var(--vaadin-background-container);--vaadin-avatar-font-weight:var(--aura-font-weight-medium);--vaadin-avatar-font-size:var(--aura-font-size-m)}vaadin-avatar:not([img]){--_shade:color-mix(in srgb,var(--vaadin-border-color) 20%,transparent);background-image:linear-gradient(light-dark(transparent,var(--_shade)),transparent 50%,light-dark(var(--_shade),transparent))}:where(:host),:where(:root){--vaadin-button-shadow:0 1px 4px -1px rgba(0,0,0,.07)}:is(vaadin-button,vaadin-menu-bar-button,vaadin-drawer-toggle,vaadin-crud-edit){position:relative;transition:scale .18s;--_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,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,vaadin-crud-edit):where(:not([theme~=primary])){outline-offset:calc(var(--vaadin-button-border-width, 1px)-1);--vaadin-button-text-color:var(--aura-accent-text)}: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))}:is(vaadin-button,vaadin-menu-bar-button):has([slot=prefix]:is(vaadin-icon,svg,i[class=fa-],vaadin-avatar)),vaadin-drawer-toggle:empty{padding-inline-start:max(var(--vaadin-padding-s),round(var(--vaadin-radius-m)/1.75,1px))}: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]: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,vaadin-crud-edit):where([theme~=primary]){outline-offset:2px;--vaadin-button-font-weight:var(--aura-font-weight-semibold);--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 rgba(0,0,0,.24)}: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,vaadin-crud-edit):not([disabled]):before{background-color:currentColor;border-radius:inherit;content:"";inset:calc(var(--vaadin-button-border-width, 1px)-1);opacity:0;pointer-events:none;position:absolute;transition:opacity .1s,background-color .1s}@supports (color:hsl(0 0 0)){:is(vaadin-button,vaadin-menu-bar-button,vaadin-drawer-toggle,vaadin-crud-edit):not([disabled]):before{background-color:oklch(from currentColor calc(l + .4 - c) c h/calc(1 - l / 2))}}@media (any-hover:hover){:is(vaadin-button,vaadin-menu-bar-button,vaadin-drawer-toggle,vaadin-crud-edit):hover:not([disabled],[active]):before{opacity:.03}:is(vaadin-button,vaadin-menu-bar-button,vaadin-drawer-toggle,vaadin-crud-edit)[theme~=primary]:hover:not([disabled],[active]):before{opacity:.12}}@media (min-resolution:2x){:is(vaadin-button,vaadin-menu-bar-button[first-visible][last-visible],vaadin-drawer-toggle)[active]:not([disabled],[aria-disabled=true]){scale:.98;transition-duration:50ms}}: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{background:oklch(from currentColor min(c,1 - l + c) calc(c .9) h);opacity:.08;transition-duration:0s}:is(vaadin-button,vaadin-menu-bar-button,vaadin-drawer-toggle,vaadin-crud-edit)[theme~=primary][active]:not([disabled]):before{opacity:.16}@container style(--_gap: 0){vaadin-menu-bar-button:not(:first-of-type){border-inline-start-color:transparent}}: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)}: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)}:where(:host),:where(:root){--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);--vaadin-card-border-color:var(--vaadin-border-color-secondary);--vaadin-card-background:var(--aura-surface) padding-box}vaadin-card{--vaadin-card-background:var(--aura-surface) padding-box;--aura-surface-level:2}vaadin-card[theme~=outlined]{border:var(--vaadin-card-border-width,1px) solid transparent;--vaadin-card-padding:calc(var(--vaadin-padding-l) - var(--vaadin-card-border-width, 1px))}vaadin-card[theme~=outlined]:before{inset:calc(var(--vaadin-card-border-width, 1px)-1)}vaadin-card[theme~=outlined][theme~=cover-media] [slot=media]:is(img,video,svg,vaadin-icon){margin-inline:calc((var(--_padding) + var(--vaadin-card-border-width, 1px))-1);margin-top:calc((var(--_padding) + var(--vaadin-card-border-width, 1px))-1);width:calc(100% + (var(--_padding) + var(--vaadin-card-border-width, 1px))2)}vaadin-card[theme~=elevated]{--aura-surface-opacity:0.7;--aura-surface-level:3;--_shadow-color:light-dark(oklch(from var(--aura-background-light) calc(l - l * 0.8) calc(c / 10) h/0.1),oklch(from var(--aura-background-dark) calc(l - l * 0.8) calc(c / 10) h/0.2));--vaadin-card-shadow:0 1px 6px -1px var(--_shadow-color);background-clip:padding-box}vaadin-card[theme~=stretch-media]:not([theme~=cover-media]) [slot=media]:is(img,video,svg,vaadin-icon){border-radius:var(--vaadin-radius-s)}:where(:host),:where(:root){--vaadin-radio-button-marker-size:6px;--vaadin-checkbox-size:round(1lh - 2px,2px);--vaadin-radio-button-size:round(1lh - 2px,2px)}vaadin-checkbox::part(checkbox),vaadin-radio-button::part(radio){--vaadin-checkbox-background:var(--aura-surface);--vaadin-radio-button-background:var(--aura-surface);transition:background-color .1s}vaadin-checkbox:not([readonly],[disabled])::part(checkbox),vaadin-radio-button:not([disabled])::part(radio){--aura-surface-level:4;box-shadow:0 2px 1px -1px rgba(0,0,0,.07);--_shade:color-mix(in srgb,var(--vaadin-border-color-secondary) 50%,transparent);background-image:linear-gradient(light-dark(transparent,var(--_shade)),transparent 33%,transparent 66%,light-dark(var(--_shade),transparent))}vaadin-checkbox:not([checked],[indeterminate])::part(checkbox),vaadin-radio-button:not([checked])::part(radio){background-clip:padding-box}vaadin-checkbox:is([checked],[indeterminate]):not([readonly],[disabled])::part(checkbox){--vaadin-checkbox-background:var(--aura-accent-color);--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){--vaadin-radio-button-background:var(--aura-accent-color);--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,vaadin-radio-button:not([disabled])::part(radio):before{background-color:currentColor;border-radius:inherit;content:"";inset:calc(var(--vaadin-input-field-border-width, 1px)-1);opacity:0;position:absolute;transition:opacity .1s,background-color .1s}@media (any-hover:hover){vaadin-checkbox:hover:not([readonly],[disabled],[active])::part(checkbox):before,vaadin-radio-button:hover:not([disabled],[active])::part(radio):before{opacity:.04}}vaadin-checkbox[active]:not([readonly],[disabled])::part(checkbox):before,vaadin-radio-button[active]:not([disabled])::part(radio):before{background:#000;opacity:.1}vaadin-confirm-dialog::part(footer){margin-inline-start:auto;width:fit-content}vaadin-confirm-dialog::part(cancel-button),vaadin-confirm-dialog::part(confirm-button),vaadin-confirm-dialog::part(reject-button){flex:1}vaadin-confirm-dialog :is([slot=cancel-button],[slot=reject-button],[slot=confirm-button]){display:flex}:where(:host),:where(:root){--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)}vaadin-crud vaadin-confirm-dialog{color-scheme:inherit}:where(:host),:where(:root){--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);--vaadin-date-picker-date-selected-background:var(--aura-accent-color);--vaadin-date-picker-date-selected-color:var(--aura-accent-contrast)}:where(:host),:where(:root),: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)}vaadin-date-picker-month-scroller,vaadin-date-picker-overlay-content::part(toolbar){background:var(--aura-surface)}vaadin-date-picker-year-scroller:before{background:var(--aura-surface-solid) padding-box;height:12px;width:12px}vaadin-date-picker-year::part(year-number){font-size:var(--aura-font-size-s);font-weight:var(--aura-font-weight-medium)}vaadin-date-picker-year[current]::part(year-number){font-weight:var(--aura-font-weight-semibold)}vaadin-date-picker-year[selected]{position:relative}vaadin-date-picker-year[selected]::part(year-number){color:var(--aura-accent-text)}vaadin-date-picker-year[selected]:after{background:var(--aura-accent-color);border-radius:var(--vaadin-radius-s);content:"";height:100%;position:absolute;top:-.5lh;inset-inline:3px;opacity:.1;z-index:-1}vaadin-date-picker-year::part(year-separator){height:8px;line-height:0;text-align:center;translate:0 -50%}vaadin-date-picker-year::part(year-separator):before{background:var(--vaadin-text-color-disabled);border-radius:50%;content:"";display:inline-block;height:3px;width:3px}:where(:host),:where(:root){--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{border-radius:var(--vaadin-dashboard-widget-border-radius);inset:calc(var(--vaadin-dashboard-widget-border-width, 1px)-1)}&::part(content){transition:.2s;transition-property:filter,opacity}&:is([resize-mode],[move-mode])::part(content){clip-path:inset(0);filter:blur(10px);opacity:.75;transition-duration:50ms}}vaadin-dashboard-section{vaadin-dashboard-widget{transition:.2s;transition-property:filter,opacity}&[move-mode] vaadin-dashboard-widget{clip-path:inset(0);filter:blur(10px);opacity:.75;transition-duration:50ms}}:is(vaadin-dashboard-widget,vaadin-dashboard-section){&::part(move-backward-button),&::part(move-forward-button),&::part(resize-grow-height-button),&::part(resize-grow-width-button),&::part(resize-shrink-height-button),&::part(resize-shrink-width-button){background:var(--aura-surface) padding-box;border:1px solid var(--vaadin-border-color);color:var(--vaadin-text-color-secondary);outline-offset:-1px;transition:color .12s}&::part(resize-grow-height-button),&::part(resize-shrink-height-button){border-bottom:0;margin-top:0}&::part(move-forward-button),&::part(resize-grow-width-button),&::part(resize-shrink-width-button){border-inline-end:0;margin-inline-start:0}&::part(move-backward-button){border-inline-start:0;margin-inline-end:0}&::part(move-apply-button),&::part(resize-apply-button){background:var(--aura-accent-color);box-shadow:0 0 0 3px var(--aura-surface);color:var(--aura-accent-contrast);outline-offset:2px}&::part(move-button),&::part(remove-button),&::part(resize-button){color:var(--vaadin-text-color-disabled);outline-offset:-2px;transition:color .12s}&[editable]{--vaadin-dashboard-widget-header-padding:var(--vaadin-padding-xs)}}@media (any-hover:hover){:is(vaadin-dashboard-widget,vaadin-dashboard-section){&::part(move-backward-button):hover,&::part(move-button):hover,&::part(move-forward-button):hover,&::part(remove-button):hover,&::part(resize-button):hover,&::part(resize-grow-height-button):hover,&::part(resize-grow-width-button):hover,&::part(resize-shrink-height-button):hover,&::part(resize-shrink-width-button):hover{color:var(--vaadin-text-color)}}}:where(:host),:where(:root){--vaadin-dialog-title-font-size:var(--aura-font-size-l);--vaadin-dialog-border-width:0px}vaadin-confirm-dialog,vaadin-dialog{color-scheme:var(--aura-content-color-scheme,var(--aura-color-scheme))}vaadin-confirm-dialog::part(overlay),vaadin-dialog::part(overlay){--vaadin-dialog-background:var(--aura-surface);--aura-surface-level:4;view-transition-name:vaadin-dialog}vaadin-confirm-dialog::part(message){color:var(--vaadin-text-color-secondary)}::view-transition-group(vaadin-dialog){border-radius:var(--vaadin-dialog-border-radius,var(--vaadin-radius-l));z-index:1}:where(:host),:where(:root){--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}:is(vaadin-grid,vaadin-crud-grid)::part(empty-state){align-items:center;display:flex;justify-content:center}vaadin-grid::part(active-nav-item){--vaadin-grid-row-highlight-background-color:var(--vaadin-background-container)}vaadin-grid-sorter::part(indicators){transition:color .12s}: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}:where(:host),:where(:root),:where([theme]){--vaadin-input-field-background:var(--aura-surface);--vaadin-input-field-error-color:var(--aura-red-text)}::part(input-field),vaadin-input-container,vaadin-message-input{--vaadin-input-field-background:var(--aura-surface);--aura-surface-level:4;--aura-surface-opacity:0.7;background-clip:padding-box}:not([readonly],[disabled])::part(input-field),vaadin-message-input:not([readonly],[disabled]){box-shadow:0 2px 1px -1px rgba(0,0,0,.04)}[readonly]::part(input-field){--aura-surface-opacity:0}[disabled]::part(input-field){--vaadin-input-field-background:var(--vaadin-background-container)}::part(field-button){transition:color .1s}:not([readonly],[disabled])::part(field-button):active{color:var(--vaadin-text-color)}@media (any-hover:hover){:not([readonly],[disabled])::part(field-button):hover{color:var(--vaadin-text-color)}}:where(:host),:where(:root){--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)}}[role=menu] [role=separator]{border-color:var(--vaadin-border-color);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)}:where(:host),:where(:root){--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){background:color-mix(in srgb,var(--aura-red) 10%,transparent);border-radius:var(--vaadin-radius-m);padding:var(--vaadin-padding-m)}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){padding-bottom:0;text-align:center}&::part(form-title){display:none}[slot=title]{letter-spacing:-.03em}}vaadin-master-detail-layout::part(detail){--aura-surface-level:2;background:var(--aura-surface) padding-box}vaadin-master-detail-layout[drawer]::part(detail){--aura-surface-opacity:var(--aura-overlay-surface-opacity);-webkit-backdrop-filter:var(--aura-overlay-backdrop-filter);backdrop-filter:var(--aura-overlay-backdrop-filter);background:var(--aura-surface) padding-box;box-shadow:inset 1px 0 0 0 var(--aura-overlay-inner-outline-color),-1px 0 0 0 var(--aura-overlay-outline-color),var(--aura-shadow-m)}vaadin-master-detail-layout[containment=viewport][drawer]::part(detail){box-shadow:var(--aura-overlay-shadow)}vaadin-master-detail-layout[containment=viewport][drawer]::part(detail),vaadin-master-detail-layout[theme~=inset-drawer][drawer]::part(detail){border-radius:var(--_app-layout-radius);margin:calc(var(--aura-app-layout-inset)/2)}vaadin-master-detail-layout:not([drawer])::part(detail),vaadin-master-detail-layout>vaadin-master-detail-layout{border-end-end-radius:var(--_app-layout-radius);border-start-end-radius:var(--_app-layout-radius)}::view-transition-group(vaadin-mdl-backdrop),::view-transition-group(vaadin-mdl-detail),::view-transition-group(vaadin-mdl-master){border-radius:var(--_app-layout-radius);overflow:hidden}@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){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}vaadin-message-input vaadin-text-area::part(input-field){--vaadin-input-field-background:transparent}vaadin-message-input[theme~=icon-button] vaadin-message-input-button{color:transparent;contain:strict;height:var(--vaadin-icon-size,1lh);position:relative;width:var(--vaadin-icon-size,1lh)}vaadin-message-input[theme~=icon-button] vaadin-message-input-button:before{background:var(--vaadin-button-text-color);content:"";inset:0;mask-image:var(--_vaadin-icon-paper-airplane);position:absolute}vaadin-message-input[theme~=icon-button][dir=rtl] vaadin-message-input-button:before{scale:-1}@media (forced-colors:active){vaadin-message-input[theme~=icon-button] vaadin-message-input-button{forced-color-adjust:none;--vaadin-button-text-color:CanvasText}}:where(:host),:where(:root){--vaadin-chip-padding:0.4em;--vaadin-chip-background:var(--vaadin-background-container-strong)}vaadin-multi-select-combo-box-chip{--vaadin-chip-height:1lh;--vaadin-icon-size:1.25em;--vaadin-chip-padding:0.4em;--vaadin-chip-border-radius:var(--vaadin-radius-s);--vaadin-chip-border-width:0px}:where(:host),:where(:root){--vaadin-notification-border-width:0px;--vaadin-ease-fluid:cubic-bezier(0.78,0,0.22,1)}vaadin-notification-container{color-scheme:var(--aura-notification-color-scheme)}vaadin-notification-card::part(overlay){--aura-surface-level:4;--vaadin-notification-background:var(--aura-surface);view-transition-name:vaadin-notification}::view-transition-group(vaadin-notification){border-radius:var(--vaadin-notification-border-radius,var(--vaadin-radius-l));z-index:1}@supports (background:-webkit-named-image(i)){::view-transition-group(vaadin-notification){backdrop-filter:none}}vaadin-notification-card vaadin-card{--vaadin-card-gap:var(--vaadin-gap-xs) var(--vaadin-gap-s);color:var(--vaadin-text-color-secondary)}vaadin-notification-card vaadin-button{--aura-surface-level:8;--aura-surface-opacity:0.3}:where(:host),:where(:root){--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),rgba(0,0,0,.3));--aura-overlay-outline-color:light-dark(oklch(from var(--aura-background-light) 0.1 c h/max(0.04,0.03 + 0.04 * var(--aura-contrast))),oklch(from var(--aura-background-dark) 0.1 c h/max(0.04,0.03 + 0.04 * var(--aura-contrast))));--aura-overlay-inner-outline-color:hsla(0deg,0%,100%,max(3%,2% + 4% * var(--aura-contrast)));--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(20px) brightness(1.1) saturate(1.2);--aura-overlay-surface-opacity:0.85;@media (prefers-reduced-transparency:reduce){--aura-overlay-surface-opacity:1!important}}::part(overlay){--vaadin-overlay-background:var(--aura-surface);--aura-surface-level:4;--aura-surface-opacity:var(--aura-overlay-surface-opacity);-webkit-backdrop-filter:var(--aura-overlay-backdrop-filter);backdrop-filter:var(--aura-overlay-backdrop-filter);box-shadow:var(--aura-overlay-shadow);color:var(--vaadin-text-color);font-family:var(--aura-font-family);font-size:var(--aura-font-size-m);font-weight:var(--aura-font-weight-regular);line-height:var(--aura-line-height-m)}:where(:host),:where(:root){--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%,#f6f4ee))}vaadin-progress-bar{height:var(--vaadin-gap-s);&[dir=rtl]::part(value){scale:-1}}:where(:host),:where(:root){--vaadin-rich-text-editor-toolbar-background:transparent;--vaadin-rich-text-editor-toolbar-padding:var(--vaadin-padding-xs);--vaadin-rich-text-editor-toolbar-gap:var(--vaadin-gap-xs) var(--vaadin-gap-m);--vaadin-rich-text-editor-toolbar-button-background:transparent;--vaadin-rich-text-editor-toolbar-button-border-radius:calc(var(--vaadin-radius-m) - 2px);--vaadin-rich-text-editor-toolbar-button-padding:var(--vaadin-padding-xs);--vaadin-rich-text-editor-toolbar-button-text-color:var(--vaadin-text-color-secondary)}vaadin-rich-text-editor{--vaadin-icon-visual-size:90%;--vaadin-rich-text-editor-background:var(--aura-surface) padding-box;--aura-surface-level:4;--aura-surface-opacity:0.7!important;box-shadow:0 2px 1px -1px rgba(0,0,0,.04);&:not(:focus-within){--vaadin-rich-text-editor-toolbar-button-text-color:var(--vaadin-text-color-disabled)}}vaadin-rich-text-editor::part(toolbar){border-bottom:1px solid var(--vaadin-border-color-secondary);contain:paint}vaadin-rich-text-editor::part(toolbar-group){align-items:center;gap:1px}vaadin-rich-text-editor::part(toolbar-group):before{background:var(--vaadin-border-color-secondary);content:"";height:1lh;position:absolute;translate:calc(var(--vaadin-gap-m)/-2);width:1px}vaadin-rich-text-editor::part(toolbar-button){border:1px solid transparent;outline-offset:calc(var(--vaadin-focus-ring-width)-1);position:relative;transition:color 80ms,background-color 80ms,scale .18s}vaadin-rich-text-editor::part(toolbar-button-pressed){--vaadin-rich-text-editor-toolbar-button-background:transparent}vaadin-rich-text-editor:focus-within::part(toolbar-button-pressed){--vaadin-rich-text-editor-toolbar-button-background:var(--vaadin-background-container-strong) padding-box;--vaadin-rich-text-editor-toolbar-button-text-color:var(--vaadin-text-color);border-color:var(--vaadin-text-color-disabled)}vaadin-rich-text-editor::part(toolbar-button):active{scale:.95;transition-duration:80ms,80ms,50ms}@media (any-hover:hover){vaadin-rich-text-editor::part(toolbar-button):hover{--vaadin-rich-text-editor-toolbar-button-background:var(--vaadin-background-container);--vaadin-rich-text-editor-toolbar-button-text-color:var(--vaadin-text-color)}}vaadin-select-item::part(content){align-items:center;display:flex;gap:inherit}vaadin-select[theme~=subtle]::part(input-field){--vaadin-input-field-border-color:transparent;--vaadin-input-field-background:transparent}vaadin-select[theme~=subtle]::part(toggle-button){opacity:0;transition:opacity .2s;--vaadin-icon-size:0.75lh}vaadin-select[theme~=subtle][focus-ring]::part(toggle-button){opacity:1}@media (any-hover:hover){vaadin-select[theme~=subtle]:hover::part(toggle-button){opacity:1}}vaadin-select[theme~=auto-size]{--vaadin-field-default-width:auto}:where(:host),:where(:root){--vaadin-side-nav-label-line-height:var(--aura-line-height-xs);--vaadin-side-nav-label-font-weight:var(--aura-font-weight-medium);--vaadin-side-nav-item-font-weight:var(--aura-font-weight-medium);--vaadin-side-nav-item-border-width:1px;--vaadin-side-nav-items-gap:var(--vaadin-gap-xs)}vaadin-side-nav+vaadin-side-nav{margin-top:var(--vaadin-gap-l)}vaadin-side-nav-item::part(content){transition:color .12s,border-color .12s,background-color .12s;--aura-surface-level:3}vaadin-side-nav-item:not([disabled])::part(content):hover{--vaadin-side-nav-item-text-color:var(--vaadin-text-color)}vaadin-side-nav-item[current]::part(content){--_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.05 + c / 2) + 0.1 var(--aura-contrast))),oklch(from var(--aura-accent-dark) l calc(c / 2) h/calc(min(0.15, 0.05 + c / 2) + 0.1 * var(--aura-contrast))));--vaadin-side-nav-item-background:linear-gradient(var(--_accent),var(--_accent)) var(--aura-surface) padding-box;--vaadin-side-nav-item-text-color:var(--aura-accent-text);--vaadin-side-nav-item-border-color:var(--_accent-border)}vaadin-side-nav[theme~=filled] vaadin-side-nav-item[current]::part(content){--vaadin-side-nav-item-background:var(--aura-accent-color) border-box;--vaadin-side-nav-item-text-color:var(--aura-accent-contrast);outline-offset:2px}vaadin-side-nav[theme~=filled] vaadin-side-nav-item[current]>:not([slot=children]):not([slot=tooltip]){--vaadin-text-color:var(--vaadin-side-nav-item-text-color);--vaadin-text-color-secondary:var(--vaadin-side-nav-item-text-color);--aura-accent-color:var(--vaadin-side-nav-item-text-color);--aura-accent-text:var(--vaadin-side-nav-item-text-color);--aura-red:var(--vaadin-side-nav-item-text-color);--aura-red-text:var(--vaadin-side-nav-item-text-color);--aura-orange:var(--vaadin-side-nav-item-text-color);--aura-orange-text:var(--vaadin-side-nav-item-text-color);--aura-yellow:var(--vaadin-side-nav-item-text-color);--aura-yellow-text:var(--vaadin-side-nav-item-text-color);--aura-green:var(--vaadin-side-nav-item-text-color);--aura-green-text:var(--vaadin-side-nav-item-text-color);--aura-blue:var(--vaadin-side-nav-item-text-color);--aura-blue-text:var(--vaadin-side-nav-item-text-color);--aura-purple:var(--vaadin-side-nav-item-text-color);--aura-purple-text:var(--vaadin-side-nav-item-text-color)}:where(:host),:where(:root){--vaadin-tab-font-weight:var(--aura-font-weight-medium);--vaadin-tabs-gap:2px}vaadin-tabs{background:var(--vaadin-background-container);border-radius:calc(var(--vaadin-radius-m) + 3px);contain:paint;padding:3px}vaadin-tabs:not([theme~=accent]){--aura-accent-light:var(--aura-text-light);--aura-accent-dark:var(--aura-text-dark)}vaadin-tabs::part(tabs){margin:-3px;padding:3px;--_mask-fade-start:0.5lh;--_mask-fade-size:2lh;mask-image:linear-gradient(var(--_mask-dir,to right),var(--_mask-start,#000) var(--_mask-fade-start),#000 var(--_mask-fade-size),#000 calc(100% - var(--_mask-fade-size)),var(--_mask-end,#000) calc(100% - var(--_mask-fade-start)))}vaadin-tabs[dir=rtl]::part(tabs){--_mask-dir:to left}vaadin-tabs[orientation=vertical]::part(tabs){--_mask-dir:to bottom;--_mask-fade-start:0px;--_mask-fade-size:0.5lh}vaadin-tabs[overflow~=start]{--_mask-start:transparent}vaadin-tabs[overflow~=end]{--_mask-end:transparent}vaadin-tabs::part(back-button),vaadin-tabs::part(forward-button){align-self:center;background:var(--aura-surface-solid) padding-box;border:1px solid var(--vaadin-border-color);border-radius:var(--vaadin-radius-m);box-shadow:0 1px 4px -1px var(--aura-shadow-color);height:auto;padding:var(--vaadin-padding-xs);transition:opacity .12s}vaadin-tabs::part(back-button){inset-inline-start:5px}vaadin-tabs::part(forward-button){inset-inline-end:5px}vaadin-tab{transition:color .12s,border-color .12s,background-color .12s;--aura-surface-level:8;--aura-surface-opacity:0.7;border:1px solid transparent}vaadin-tab:not([disabled],[selected]):hover{--vaadin-tab-text-color:var(--vaadin-text-color)}vaadin-tab[selected]{--_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.05 + c / 2) + 0.1 * var(--aura-contrast))),oklch(from var(--aura-accent-dark) l calc(c / 2) h/calc(min(0.15, 0.05 + c / 2) + 0.1 * var(--aura-contrast))));--vaadin-tab-background:linear-gradient(var(--_accent),var(--_accent)) var(--aura-surface) padding-box;--vaadin-tab-text-color:var(--aura-accent-text);border-color:var(--_accent-border);box-shadow:0 1px 4px -1px var(--aura-shadow-color)}vaadin-tabs[theme~=filled] vaadin-tab[selected]{--vaadin-tab-background:var(--aura-accent-color) border-box;--vaadin-tab-text-color:var(--aura-accent-contrast);outline-offset:1px}vaadin-tabs[theme~=filled] vaadin-tab[selected]>:not([slot=tooltip]){--vaadin-text-color:var(--vaadin-tab-text-color);--vaadin-text-color-secondary:var(--vaadin-tab-text-color);--aura-accent-color:var(--vaadin-tab-text-color);--aura-accent-text:var(--vaadin-tab-text-color);--aura-red:var(--vaadin-tab-text-color);--aura-red-text:var(--vaadin-tab-text-color);--aura-orange:var(--vaadin-tab-text-color);--aura-orange-text:var(--vaadin-tab-text-color);--aura-yellow:var(--vaadin-tab-text-color);--aura-yellow-text:var(--vaadin-tab-text-color);--aura-green:var(--vaadin-tab-text-color);--aura-green-text:var(--vaadin-tab-text-color);--aura-blue:var(--vaadin-tab-text-color);--aura-blue-text:var(--vaadin-tab-text-color);--aura-purple:var(--vaadin-tab-text-color);--aura-purple-text:var(--vaadin-tab-text-color)}:where(:host),:where(:root){--vaadin-upload-background:var(--aura-surface) padding-box;--vaadin-upload-border:1px solid var(--vaadin-border-color-secondary);--vaadin-upload-padding:var(--vaadin-padding-s);--vaadin-upload-file-list-divider-color:var(--vaadin-border-color-secondary);--vaadin-upload-file-list-divider-width:1px;--vaadin-upload-file-error-color:var(--vaadin-text-color-secondary);--vaadin-upload-file-warning-color:var(--aura-red);--vaadin-upload-file-done-color:var(--aura-green);--vaadin-upload-file-name-font-weight:var(--aura-font-weight-medium);--vaadin-upload-file-padding:var(--vaadin-padding-s);--vaadin-upload-file-gap:0 var(--vaadin-gap-s);--vaadin-upload-file-button-padding:var(--vaadin-upload-file-padding);--vaadin-upload-file-button-border-width:0;--vaadin-upload-file-status-font-size:var(--aura-font-size-s);--vaadin-upload-file-status-line-height:var(--aura-line-height-s);--vaadin-upload-file-error-font-size:var(--aura-font-size-s);--vaadin-upload-file-error-line-height:var(--aura-line-height-s);--vaadin-upload-drop-label-color:var(--vaadin-text-color-secondary);--vaadin-upload-drop-label-font-weight:var(--aura-font-weight-medium)}vaadin-upload{--_divider-offset-start:calc(var(--vaadin-padding-s) + var(--vaadin-icon-size, 1lh) + var(--vaadin-gap-s));--_divider-offset-end:var(--vaadin-padding-s)}vaadin-upload::part(primary-buttons){flex-wrap:wrap;gap:var(--vaadin-gap-s) var(--vaadin-gap-m)}vaadin-upload:not([nodrop]) vaadin-button[slot=add-button]{flex:1}vaadin-upload::part(drop-label){flex:100;margin-inline-start:calc(var(--vaadin-upload-padding)-1);min-width:fit-content;padding:var(--vaadin-padding-xs) var(--vaadin-padding-s)}vaadin-upload[dragover-valid]{outline:var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);outline-offset:-1px}vaadin-upload-file-list li{margin-inline:var(--_divider-offset-start) var(--_divider-offset-end);&:first-child{margin-top:0}}vaadin-upload:not([theme~=no-border]) vaadin-upload-file-list:has(li){border-top:1px solid var(--vaadin-border-color-secondary);margin:calc(var(--vaadin-upload-padding)-1);margin-top:var(--vaadin-upload-padding)}vaadin-upload-file{--vaadin-icon-visual-size:0.75lh;border-radius:var(--vaadin-radius-m);margin-inline:calc(var(--_divider-offset-start, 0)-1) calc(var(--_divider-offset-end, 0)-1);padding-block:var(--vaadin-padding-m);&::part(commands),&::part(done-icon),&::part(warning-icon){align-self:baseline}&:not([complete],[error])::part(done-icon){display:block}&:not([complete],[error])::part(done-icon):before{background:var(--vaadin-border-color-secondary)}&::part(commands){margin-block:calc(var(--vaadin-upload-file-button-padding)-1);margin-inline-end:calc(var(--vaadin-upload-file-button-padding)-1)}&::part(remove-button),&::part(retry-button){--vaadin-upload-file-button-text-color:var(--vaadin-text-color-secondary);outline-offset:calc(var(--vaadin-focus-ring-width)*-1)}vaadin-progress-bar{display:block;height:var(--vaadin-gap-xs);margin-top:var(--vaadin-gap-xs)}&:not([error])::part(status){display:-webkit-box;-webkit-line-clamp:2;max-height:2lh;-webkit-box-orient:vertical;overflow:hidden}&[complete]::part(status){height:1lh;max-height:0;transition:max-height .2s;visibility:hidden}&[complete] vaadin-progress-bar{height:0;margin-top:0;transition:height .2s;visibility:hidden}}vaadin-upload[theme~=no-border]{--vaadin-upload-padding:0;--vaadin-upload-background:transparent;--vaadin-upload-border:none;--vaadin-upload-file-list-divider-width:0;--_divider-offset-start:0px;--_divider-offset-end:0px;outline-offset:2px;vaadin-upload-file-list::part(list){display:flex;flex-direction:column;gap:var(--vaadin-gap-s)}vaadin-upload-file-list li:first-child{margin-top:var(--vaadin-gap-s)}vaadin-upload-file{background:var(--aura-surface) padding-box;border:1px solid var(--vaadin-border-color-secondary)}}@media (any-hover:hover){vaadin-upload-file::part(remove-button):hover,vaadin-upload-file::part(retry-button):hover{--vaadin-upload-file-button-text-color:var(--vaadin-text-color)}}:where(:host),:where(:root){cursor:default;--_vaadin-icon-chevron-down:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>');--vaadin-aura-theme:1}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/aura",
-  "version": "25.0.0-alpha21",
+  "version": "25.0.0-beta2",
   "publishConfig": {
     "access": "public"
   },
@@ -40,5 +40,5 @@
     "postcss-import": "^16.1.1",
     "postcss-url": "^10.1.3"
   },
-  "gitHead": "8fb9e9710c01449edf623a1aaac4655cdc11a933"
+  "gitHead": "e078f8371ae266f05c7ca1ec25686cc489c83f24"
 }

package/src/color-scheme.css CHANGED Viewed

@@ -1,4 +1,5 @@
-:where(:root, :host) {
+:where(:root),
+:where(:host) {
   --aura-color-scheme: light;
   --aura-content-color-scheme: var(--aura-color-scheme);
   --aura-notification-color-scheme: var(--aura-color-scheme);

package/src/color.css CHANGED Viewed

@@ -1,4 +1,5 @@
-:where(:root, :host) {
+:where(:root),
+:where(:host) {
   --aura-contrast: 1;
   --aura-accent-light: hsl(220, 80%, 47%);
@@ -80,7 +81,8 @@
   background-attachment: fixed;
 }
-:where(:root, :host),
+:where(:root),
+:where(:host),
 vaadin-button,
 vaadin-context-menu-item,
 vaadin-crud-edit,
@@ -89,7 +91,8 @@ vaadin-menu-bar-button,
 vaadin-menu-bar-item,
 vaadin-checkbox::part(checkbox),
 vaadin-radio-button::part(radio),
-vaadin-side-nav-item::part(content) {
+vaadin-side-nav-item::part(content),
+vaadin-tab {
   --aura-accent-contrast-light: oklch(
     from var(--aura-accent-light) clamp(0, (0.62 - l) * 1000, 1) 0 0 / clamp(0.8, (0.62 - l) * 1000, 1)
   );
@@ -114,7 +117,8 @@ vaadin-side-nav-item::part(content) {
 }
 @supports (color: hsl(0 0 0)) {
-  :where(:root, :host) {
+  :where(:root),
+  :where(:host) {
     --_safari-17-deg: 1;
   }
 }

package/src/components/app-layout.css CHANGED Viewed

@@ -1,4 +1,5 @@
-:where(:root, :host) {
+:where(:root),
+:where(:host) {
   --aura-app-layout-inset: 1.5vmin;
   --aura-app-layout-radius: var(--vaadin-radius-l);
   --_aura-mdl-border: 1px;
@@ -94,7 +95,7 @@ vaadin-app-layout > vaadin-master-detail-layout:nth-child(1 of :not([slot])):nth
   }
 }
-vaadin-app-layout:has([slot='navbar']):has([slot='drawer']) {
+vaadin-app-layout[has-navbar][has-drawer] {
   padding-top: var(--_vaadin-app-layout-navbar-offset-size);
   &::part(drawer) {
@@ -102,24 +103,21 @@ vaadin-app-layout:has([slot='navbar']):has([slot='drawer']) {
   }
 }
-vaadin-app-layout:has([slot='drawer']):not([overlay]):not([drawer-opened])
+vaadin-app-layout[has-drawer]:not([overlay]):not([drawer-opened])
   > :nth-child(1 of :not([slot])):nth-last-child(1 of :not([slot])) {
   border-inline-start-width: min(var(--aura-app-layout-inset), var(--_aura-mdl-border));
 }
-vaadin-app-layout:has([slot='navbar']):has([slot='drawer'])[drawer-opened]:not([overlay])
+vaadin-app-layout[has-navbar][has-drawer][drawer-opened]:not([overlay])
   > :nth-child(1 of :not([slot])):nth-last-child(1 of :not([slot])) {
   border-start-start-radius: var(--aura-app-layout-radius);
 }
-vaadin-app-layout:has([slot='navbar']):has([slot='drawer'])
-  > :nth-child(1 of :not([slot])):nth-last-child(1 of :not([slot])) {
+vaadin-app-layout[has-navbar][has-drawer] > :nth-child(1 of :not([slot])):nth-last-child(1 of :not([slot])) {
   border-top-width: var(--_aura-mdl-border);
 }
-vaadin-app-layout:has([slot='navbar'])
-  > :is(:not([slot]), [slot='drawer'])
-  vaadin-drawer-toggle:not([theme~='permanent']),
-vaadin-app-layout:not(:has([slot='navbar'])) > [slot='drawer'] vaadin-drawer-toggle:not([theme~='permanent']) {
+vaadin-app-layout[has-navbar] > :is(:not([slot]), [slot='drawer']) vaadin-drawer-toggle:not([theme~='permanent']),
+vaadin-app-layout:not([has-navbar]) > [slot='drawer'] vaadin-drawer-toggle:not([theme~='permanent']) {
   display: none;
 }

package/src/components/avatar.css CHANGED Viewed

@@ -1,4 +1,5 @@
-:where(:root, :host) {
+:where(:root),
+:where(:host) {
   --vaadin-avatar-border-color: var(--vaadin-border-color-secondary);
   --vaadin-avatar-background: var(--vaadin-background-container);
   --vaadin-avatar-font-weight: var(--aura-font-weight-medium);

package/src/components/button.css CHANGED Viewed

@@ -1,4 +1,5 @@
-:where(:root, :host) {
+:where(:root),
+:where(:host) {
   --vaadin-button-shadow: 0 1px 4px -1px hsla(0, 0%, 0%, 0.07);
 }

package/src/components/card.css CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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);
 }
@@ -31,13 +32,13 @@ vaadin-radio-button:not([checked])::part(radio) {
 vaadin-checkbox:is([checked], [indeterminate]):not([readonly], [disabled])::part(checkbox) {
   --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) {
   --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);
 }

package/src/components/crud.css CHANGED Viewed

@@ -1,4 +1,5 @@
-:where(:root, :host) {
+:where(:root),
+:where(:host) {
   --vaadin-crud-background: var(--aura-surface) padding-box;
 }
@@ -10,3 +11,7 @@ vaadin-crud-edit {
 vaadin-crud::part(editor) {
   background: var(--aura-surface);
 }
+vaadin-crud vaadin-confirm-dialog {
+  color-scheme: inherit;
+}

package/src/components/dashboard.css ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -1,12 +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-crud::part(overlay) {
-  color-scheme: var(--aura-content-color-scheme);
+vaadin-confirm-dialog {
+  color-scheme: var(--aura-content-color-scheme, var(--aura-color-scheme));
 }
 vaadin-dialog::part(overlay),

package/src/components/grid.css CHANGED Viewed

@@ -1,4 +1,5 @@
-:where(:root, :host) {
+: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;
 }

package/src/components/input-container.css CHANGED Viewed

@@ -1,4 +1,6 @@
-: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-text);
 }
@@ -17,9 +19,12 @@ vaadin-message-input:not([readonly], [disabled]) {
   box-shadow: 0 2px 1px -1px hsla(0, 0%, 0%, 0.04);
 }
+[readonly]::part(input-field) {
+  --aura-surface-opacity: 0;
+}
 [disabled]::part(input-field) {
-  --aura-surface-opacity: 0.5;
-  --aura-surface-level: 1;
+  --vaadin-input-field-background: var(--vaadin-background-container);
 }
 ::part(field-button) {

package/src/components/item-overlay.css CHANGED Viewed

@@ -1,4 +1,5 @@
-:where(:root, :host) {
+: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);

package/src/components/login.css CHANGED Viewed

@@ -1,4 +1,5 @@
-:where(:root, :host) {
+: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);

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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),
@@ -29,7 +30,7 @@
   backdrop-filter: var(--aura-overlay-backdrop-filter);
   font-family: var(--aura-font-family);
   font-size: var(--aura-font-size-m);
-  font-weight: var(--aura-font-weight);
+  font-weight: var(--aura-font-weight-regular);
   line-height: var(--aura-line-height-m);
   color: var(--vaadin-text-color);
 }

package/src/components/progress-bar.css CHANGED Viewed

@@ -1,4 +1,5 @@
-:where(:root, :host) {
+:where(:root),
+:where(:host) {
   --vaadin-progress-bar-border-width: 0px;
   --vaadin-progress-bar-value-background: linear-gradient(
     90deg,

package/src/components/rich-text-editor.css CHANGED Viewed

@@ -1,4 +1,5 @@
-:where(:root, :host) {
+:where(:root),
+:where(:host) {
   --vaadin-rich-text-editor-toolbar-background: transparent;
   --vaadin-rich-text-editor-toolbar-padding: var(--vaadin-padding-xs);
   --vaadin-rich-text-editor-toolbar-gap: var(--vaadin-gap-xs) var(--vaadin-gap-m);
@@ -22,6 +23,7 @@ vaadin-rich-text-editor {
 vaadin-rich-text-editor::part(toolbar) {
   contain: paint;
+  border-bottom: 1px solid var(--vaadin-border-color-secondary);
 }
 vaadin-rich-text-editor::part(toolbar-group) {

package/src/components/side-nav.css CHANGED Viewed

@@ -1,4 +1,5 @@
-:where(:root, :host) {
+:where(:root),
+:where(:host) {
   --vaadin-side-nav-label-line-height: var(--aura-line-height-xs);
   --vaadin-side-nav-label-font-weight: var(--aura-font-weight-medium);
   --vaadin-side-nav-item-font-weight: var(--aura-font-weight-medium);
@@ -19,7 +20,7 @@ vaadin-side-nav-item::part(content) {
 }
 vaadin-side-nav-item:not([disabled])::part(content):hover {
-  --vaadin-side-nav-item-color: var(--vaadin-text-color);
+  --vaadin-side-nav-item-text-color: var(--vaadin-text-color);
 }
 vaadin-side-nav-item[current]::part(content) {
@@ -32,7 +33,7 @@ vaadin-side-nav-item[current]::part(content) {
     oklch(from var(--aura-accent-dark) l calc(c / 2) h / calc(min(0.15, 0.05 + c / 2) + 0.1 * var(--aura-contrast)))
   );
   --vaadin-side-nav-item-background: linear-gradient(var(--_accent), var(--_accent)) var(--aura-surface) padding-box;
-  --vaadin-side-nav-item-color: var(--aura-accent-text);
+  --vaadin-side-nav-item-text-color: var(--aura-accent-text);
   --vaadin-side-nav-item-border-color: var(--_accent-border);
 }
@@ -40,26 +41,26 @@ vaadin-side-nav-item[current]::part(content) {
 vaadin-side-nav[theme~='filled'] vaadin-side-nav-item[current]::part(content) {
   --vaadin-side-nav-item-background: var(--aura-accent-color) border-box;
-  --vaadin-side-nav-item-color: var(--aura-accent-contrast);
+  --vaadin-side-nav-item-text-color: var(--aura-accent-contrast);
   outline-offset: 2px;
 }
 /* Badges and other content that uses the palette inside a filled nav item */
 vaadin-side-nav[theme~='filled'] vaadin-side-nav-item[current] > :not([slot='children']):not([slot='tooltip']) {
-  --vaadin-text-color: var(--vaadin-side-nav-item-color);
-  --vaadin-text-color-secondary: var(--vaadin-side-nav-item-color);
-  --aura-accent-color: var(--vaadin-side-nav-item-color);
-  --aura-accent-text: var(--vaadin-side-nav-item-color);
-  --aura-red: var(--vaadin-side-nav-item-color);
-  --aura-red-text: var(--vaadin-side-nav-item-color);
-  --aura-orange: var(--vaadin-side-nav-item-color);
-  --aura-orange-text: var(--vaadin-side-nav-item-color);
-  --aura-yellow: var(--vaadin-side-nav-item-color);
-  --aura-yellow-text: var(--vaadin-side-nav-item-color);
-  --aura-green: var(--vaadin-side-nav-item-color);
-  --aura-green-text: var(--vaadin-side-nav-item-color);
-  --aura-blue: var(--vaadin-side-nav-item-color);
-  --aura-blue-text: var(--vaadin-side-nav-item-color);
-  --aura-purple: var(--vaadin-side-nav-item-color);
-  --aura-purple-text: var(--vaadin-side-nav-item-color);
+  --vaadin-text-color: var(--vaadin-side-nav-item-text-color);
+  --vaadin-text-color-secondary: var(--vaadin-side-nav-item-text-color);
+  --aura-accent-color: var(--vaadin-side-nav-item-text-color);
+  --aura-accent-text: var(--vaadin-side-nav-item-text-color);
+  --aura-red: var(--vaadin-side-nav-item-text-color);
+  --aura-red-text: var(--vaadin-side-nav-item-text-color);
+  --aura-orange: var(--vaadin-side-nav-item-text-color);
+  --aura-orange-text: var(--vaadin-side-nav-item-text-color);
+  --aura-yellow: var(--vaadin-side-nav-item-text-color);
+  --aura-yellow-text: var(--vaadin-side-nav-item-text-color);
+  --aura-green: var(--vaadin-side-nav-item-text-color);
+  --aura-green-text: var(--vaadin-side-nav-item-text-color);
+  --aura-blue: var(--vaadin-side-nav-item-text-color);
+  --aura-blue-text: var(--vaadin-side-nav-item-text-color);
+  --aura-purple: var(--vaadin-side-nav-item-text-color);
+  --aura-purple-text: var(--vaadin-side-nav-item-text-color);
 }

package/src/components/tabs.css ADDED Viewed

@@ -0,0 +1,126 @@
+:where(:root),
+:where(:host) {
+  --vaadin-tab-font-weight: var(--aura-font-weight-medium);
+  --vaadin-tabs-gap: 2px;
+}
+vaadin-tabs {
+  background: var(--vaadin-background-container);
+  border-radius: calc(var(--vaadin-radius-m) + 3px);
+  padding: 3px;
+  contain: paint;
+}
+vaadin-tabs:not([theme~='accent']) {
+  --aura-accent-light: var(--aura-text-light);
+  --aura-accent-dark: var(--aura-text-dark);
+}
+vaadin-tabs::part(tabs) {
+  padding: 3px;
+  margin: -3px;
+  --_mask-fade-start: 0.5lh;
+  --_mask-fade-size: 2lh;
+  mask-image: linear-gradient(
+    var(--_mask-dir, to right),
+    var(--_mask-start, black) var(--_mask-fade-start),
+    black var(--_mask-fade-size),
+    black calc(100% - var(--_mask-fade-size)),
+    var(--_mask-end, black) calc(100% - var(--_mask-fade-start))
+  );
+}
+vaadin-tabs[dir='rtl']::part(tabs) {
+  --_mask-dir: to left;
+}
+vaadin-tabs[orientation='vertical']::part(tabs) {
+  --_mask-dir: to bottom;
+  --_mask-fade-start: 0px;
+  --_mask-fade-size: 0.5lh;
+}
+vaadin-tabs[overflow~='start'] {
+  --_mask-start: transparent;
+}
+vaadin-tabs[overflow~='end'] {
+  --_mask-end: transparent;
+}
+vaadin-tabs::part(back-button),
+vaadin-tabs::part(forward-button) {
+  background: var(--aura-surface-solid) padding-box;
+  border: 1px solid var(--vaadin-border-color);
+  border-radius: var(--vaadin-radius-m);
+  padding: var(--vaadin-padding-xs);
+  height: auto;
+  align-self: center;
+  box-shadow: 0 1px 4px -1px var(--aura-shadow-color);
+  transition: opacity 120ms;
+}
+vaadin-tabs::part(back-button) {
+  inset-inline-start: 5px;
+}
+vaadin-tabs::part(forward-button) {
+  inset-inline-end: 5px;
+}
+vaadin-tab {
+  transition:
+    color 120ms,
+    border-color 120ms,
+    background-color 120ms;
+  --aura-surface-level: 8;
+  --aura-surface-opacity: 0.7;
+  border: 1px solid transparent;
+}
+vaadin-tab:not([disabled], [selected]):hover {
+  --vaadin-tab-text-color: var(--vaadin-text-color);
+}
+vaadin-tab[selected] {
+  --_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.05 + c / 2) + 0.1 * var(--aura-contrast))),
+    oklch(from var(--aura-accent-dark) l calc(c / 2) h / calc(min(0.15, 0.05 + c / 2) + 0.1 * var(--aura-contrast)))
+  );
+  --vaadin-tab-background: linear-gradient(var(--_accent), var(--_accent)) var(--aura-surface) padding-box;
+  --vaadin-tab-text-color: var(--aura-accent-text);
+  border-color: var(--_accent-border);
+  box-shadow: 0 1px 4px -1px var(--aura-shadow-color);
+}
+/* Filled variant */
+vaadin-tabs[theme~='filled'] vaadin-tab[selected] {
+  --vaadin-tab-background: var(--aura-accent-color) border-box;
+  --vaadin-tab-text-color: var(--aura-accent-contrast);
+  outline-offset: 1px;
+}
+/* Badges and other content that uses the palette inside a filled nav item */
+vaadin-tabs[theme~='filled'] vaadin-tab[selected] > :not([slot='tooltip']) {
+  --vaadin-text-color: var(--vaadin-tab-text-color);
+  --vaadin-text-color-secondary: var(--vaadin-tab-text-color);
+  --aura-accent-color: var(--vaadin-tab-text-color);
+  --aura-accent-text: var(--vaadin-tab-text-color);
+  --aura-red: var(--vaadin-tab-text-color);
+  --aura-red-text: var(--vaadin-tab-text-color);
+  --aura-orange: var(--vaadin-tab-text-color);
+  --aura-orange-text: var(--vaadin-tab-text-color);
+  --aura-yellow: var(--vaadin-tab-text-color);
+  --aura-yellow-text: var(--vaadin-tab-text-color);
+  --aura-green: var(--vaadin-tab-text-color);
+  --aura-green-text: var(--vaadin-tab-text-color);
+  --aura-blue: var(--vaadin-tab-text-color);
+  --aura-blue-text: var(--vaadin-tab-text-color);
+  --aura-purple: var(--vaadin-tab-text-color);
+  --aura-purple-text: var(--vaadin-tab-text-color);
+}

package/src/components/upload.css CHANGED Viewed

@@ -1,4 +1,5 @@
-:where(:root, :host) {
+:where(:root),
+:where(:host) {
   --vaadin-upload-background: var(--aura-surface) padding-box;
   --vaadin-upload-border: 1px solid var(--vaadin-border-color-secondary);
   --vaadin-upload-padding: var(--vaadin-padding-s);

package/src/palette.css CHANGED Viewed

@@ -1,4 +1,5 @@
-:where(:root, :host) {
+:where(:root),
+:where(:host) {
   --aura-red: oklch(0.6 0.22 25);
   --aura-orange: oklch(0.61 0.4 93);
   --aura-yellow: oklch(0.9 0.36 105);

package/src/shadow.css CHANGED Viewed

@@ -1,4 +1,5 @@
-:where(:root, :host) {
+:where(:root),
+:where(:host) {
   --aura-shadow-color: light-dark(
     oklch(from var(--aura-background-light) calc(l - l * 0.8) calc(c / 10) h / 0.2),
     oklch(from var(--aura-background-dark) calc(l - l * 0.8) calc(c / 10) h / 0.2)

package/src/size.css CHANGED Viewed

@@ -1,4 +1,5 @@
-:where(:root, :host) {
+:where(:root),
+:where(:host) {
   --aura-base-size: 16;
   --_size-ref: 16;
   --aura-base-radius: 3;
@@ -8,7 +9,9 @@
   --vaadin-icon-stroke-width: 1.75;
 }
-:where(:root, :host, [theme]) {
+:where(:root),
+:where(:host),
+:where([theme]) {
   --vaadin-padding-xs: round(
     var(--aura-base-size) * 0.25 * pow(var(--aura-base-size) / var(--_size-ref), 0.5) * 1px,
     1px
@@ -39,7 +42,8 @@
 }
 @media (pointer: coarse) {
-  :where(:root, :host) {
-    --aura-base-size: 19;
+  :where(:root),
+  :where(:host) {
+    --aura-base-size: 18;
   }
 }

package/src/surface.css CHANGED Viewed

@@ -1,9 +1,11 @@
-:where(:root, :host) {
+:where(:root),
+:where(:host) {
   --aura-surface-level: 1;
 }
 /* List all elements that are surfaces */
-:is(:root, :host),
+:root,
+:host,
 .aura-surface,
 .aura-surface-solid,
 vaadin-accordion-panel[theme~='filled'],
@@ -13,12 +15,14 @@ vaadin-button,
 vaadin-card,
 vaadin-checkbox::part(checkbox),
 vaadin-details[theme~='filled'],
+vaadin-dashboard-widget,
 vaadin-master-detail-layout::part(detail),
 vaadin-menu-bar-button,
 vaadin-message-input,
 vaadin-radio-button::part(radio),
 vaadin-rich-text-editor,
 vaadin-side-nav-item::part(content),
+vaadin-tab,
 vaadin-upload,
 vaadin-upload-file,
 ::part(input-field),
@@ -32,19 +36,12 @@ vaadin-crud-dialog::part(overlay) {
   --aura-surface-solid: light-dark(
     oklch(
       from var(--aura-background-light)
-        min(
-          1,
-          l + (0.98 - l) * 4 + var(--aura-surface-level) * (0.07 - 0.01 * var(--aura-contrast)) -
-            var(--aura-surface-opacity) / 20
-        )
+        min(1, l + (0.98 - l) * 4 + var(--aura-surface-level) * 0.06 - var(--aura-surface-opacity) / 20)
         clamp(0, c - l / 10 * var(--aura-surface-level) + var(--aura-surface-opacity) / 40, c) h
     ),
     oklch(
       from var(--aura-background-dark)
-        calc(
-          max(l + 0.03, 0.25) + var(--aura-surface-level) * (0.03 - 0.008 * var(--aura-contrast)) -
-            var(--aura-surface-opacity) / 40
-        )
+        calc(max(l + 0.03, 0.25) + var(--aura-surface-level) * 0.022 - var(--aura-surface-opacity) / 40)
         clamp(0, c * (1 + l), 0.2) h
     )
   );

package/src/typography.css CHANGED Viewed

@@ -1,23 +1,24 @@
 @import './fonts/InstrumentSans/InstrumentSans.css';
-:where(:root, :host) {
+:where(:root),
+:where(:host) {
   --aura-font-family-system: system-ui, ui-sans-serif, sans-serif;
   --aura-font-family-instrument-sans: 'Instrument Sans', var(--aura-font-family-system);
   --aura-font-family: var(--aura-font-family-instrument-sans);
-  --aura-base-font-size: 16;
-  --aura-font-size-scale: 1.125;
+  --aura-base-font-size: 14;
   --aura-base-line-height: 1.4;
-  --aura-font-weight: 400;
+  --aura-font-weight-regular: 400;
   --aura-font-weight-medium: 500;
   --aura-font-weight-semibold: 600;
 }
-@media (pointer: fine) {
-  :where(:root, :host) {
-    --aura-base-font-size: 14;
+@media (pointer: coarse) {
+  :where(:root),
+  :where(:host) {
+    --vaadin-input-field-value-font-size: max(16px, var(--aura-font-size-m));
   }
 }
@@ -29,7 +30,8 @@
 @supports (-webkit-touch-callout: none) {
   @media (pointer: coarse) {
-    :where(:root, :host) {
+    :where(:root),
+    :where(:host) {
       /* iOS/iPadOS optimizations */
       /* Support iOS dynamic text size */
@@ -38,14 +40,15 @@
   }
 }
-:where(:root, :host, [theme]) {
-  --aura-font-size-xs: round(var(--aura-font-size-s) / var(--aura-font-size-scale), 0.0625rem);
-  --aura-font-size-s: round(var(--aura-font-size-m) / var(--aura-font-size-scale), 0.0625rem);
+:where(:root),
+:where(:host),
+:where([theme]) {
+  --aura-font-size-xs: clamp(0.625rem, round(var(--aura-font-size-m) * 0.75, 0.0625rem), 0.8125rem);
+  --aura-font-size-s: round((var(--aura-font-size-m) + var(--aura-font-size-xs)) / 2, 0.0625rem);
   --aura-font-size-m: round(var(--aura-base-font-size) / 16 * 1rem, 0.0625rem);
-  --aura-font-size-l: round(var(--aura-font-size-m) * var(--aura-font-size-scale), 0.0625rem);
-  --aura-font-size-xl: round(var(--aura-font-size-l) * var(--aura-font-size-scale), 0.0625rem);
+  --aura-font-size-l: round(var(--aura-font-size-m) * 1.125, 0.0625rem);
+  --aura-font-size-xl: round(var(--aura-font-size-l) * 1.125, 0.0625rem);
-  /* TODO sometimes in the Aura dev page in Safari, when switching  back to Components view, some of the side nav menu item texts disappear after the view transition. Removing these line heights "fixes" the issue. Another fix is to use system fonts. It sometimes also depends on the browser viewport size. */
   --aura-line-height-xs: round(var(--aura-font-size-xs) * var(--aura-base-line-height), 0.125rem);
   --aura-line-height-s: round(var(--aura-font-size-s) * var(--aura-base-line-height), 0.125rem);
   --aura-line-height-m: round(var(--aura-font-size-m) * var(--aura-base-line-height), 0.125rem);
@@ -53,11 +56,12 @@
   --aura-line-height-xl: round(var(--aura-font-size-xl) * var(--aura-base-line-height), 0.125rem);
 }
-:where(body, :host) {
+:where(body),
+:where(:host) {
   font-family: var(--aura-font-family);
   font-optical-sizing: auto;
   font-style: normal;
-  font-weight: var(--aura-font-weight);
+  font-weight: var(--aura-font-weight-regular);
   /* Set to auto to disable grayscale/anti-aliased font smoothing (and use default sub-pixel anti-aliasing) */
   -webkit-font-smoothing: var(--aura-font-smoothing, antialiased);
@@ -68,7 +72,9 @@
   text-size-adjust: none;
 }
-:where(body, :host, [theme]:not(html)) {
+:where(body),
+:where(:host),
+:where([theme]:not(html)) {
   font-size: var(--aura-font-size-m);
   line-height: var(--aura-line-height-m);
 }