@vaadin/aura 25.0.0-rc1 → 25.0.1

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 (27) hide show
  1. package/aura.css +1 -0
  2. package/dist/aura.css +2 -2
  3. package/package.json +2 -2
  4. package/src/color.css +44 -36
  5. package/src/components/accordion-details.css +2 -2
  6. package/src/components/app-layout.css +3 -11
  7. package/src/components/button.css +5 -5
  8. package/src/components/card.css +2 -6
  9. package/src/components/checkbox-radio.css +3 -1
  10. package/src/components/confirm-dialog.css +1 -1
  11. package/src/components/dashboard.css +17 -2
  12. package/src/components/input-container.css +1 -1
  13. package/src/components/item-overlay.css +23 -17
  14. package/src/components/menu-bar.css +10 -1
  15. package/src/components/message-input.css +5 -5
  16. package/src/components/notification.css +2 -0
  17. package/src/components/overlay.css +4 -4
  18. package/src/components/rich-text-editor.css +1 -1
  19. package/src/components/select.css +0 -6
  20. package/src/components/side-nav.css +13 -4
  21. package/src/components/tabs.css +6 -5
  22. package/src/components/tooltip.css +7 -0
  23. package/src/components/upload.css +3 -3
  24. package/src/palette.css +4 -4
  25. package/src/shadow.css +2 -0
  26. package/src/surface.css +3 -3
  27. package/src/typography.css +1 -0
package/aura.css CHANGED
@@ -33,6 +33,7 @@
33
33
  @import './src/components/select.css';
34
34
  @import './src/components/side-nav.css';
35
35
  @import './src/components/tabs.css';
36
+ @import './src/components/tooltip.css';
36
37
  @import './src/components/upload.css';
37
38
 
38
39
  :where(:root),
package/dist/aura.css CHANGED
@@ -1,3 +1,3 @@
1
- :where(:host),:where(:root){--aura-contrast-level:1;--aura-accent-color-light:var(--aura-neutral-light);--aura-accent-color-dark:var(--aura-neutral-dark);--aura-accent-color-light-initial:var(--aura-accent-color-light);--aura-accent-color-dark-initial:var(--aura-accent-color-dark);--aura-background-color-light:oklch(0.95 0.005 248);--aura-background-color-dark:oklch(0.2 0.01 260);--_bg-alt:light-dark(oklch(from var(--aura-background-color-light) calc(l + c) min(c,c * 2 - l/20) calc(h + 180 * var(--_vaadin-safari-17-deg, 1) * l * c * 4)),oklch(from var(--aura-background-color-dark) calc(l + c) min(c,c * 2 - l/20) calc(h + 180 * var(--_vaadin-safari-17-deg, 1) * l * c * 4)));--_bg-accent:radial-gradient(circle at 0% 0%,light-dark(oklch(from var(--aura-background-color-light) min(1,l + c * 3) min(c,c * 3) h),oklch(from var(--aura-background-color-dark) min(1,l + c) clamp(0,c * 1.5,0.4) h)),transparent 30%);--aura-app-background:var(--aura-background-color);@supports (color:hsl(0 0 0)){--aura-app-background:var(--_bg-accent),radial-gradient(circle at 25% 0% in xyz,var(--aura-background-color) 33%,var(--_bg-alt)) var(--aura-background-color)}--vaadin-focus-ring-color:var(--aura-accent-color);--vaadin-user-color:var(--aura-blue);background:var(--aura-app-background);background-attachment:fixed;background-size:100vw 100vh;color:var(--vaadin-text-color)}:where(.aura-accent-color,.aura-accent-neutral,.aura-accent-red,.aura-accent-orange,.aura-accent-yellow,.aura-accent-green,.aura-accent-blue,.aura-accent-purple),:where(:host),:where(:root),vaadin-app-layout>:not([slot]),vaadin-avatar,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-notification-container,vaadin-radio-button::part(radio),vaadin-side-nav-item::part(content),vaadin-tab{--aura-neutral-light:oklch(from var(--aura-background-color-light) calc(0.2 - 0.05 * var(--aura-contrast-level)) calc(c * 0.1) h);--aura-neutral-dark:oklch(from var(--aura-background-color-dark) calc(0.9 + 0.1 * var(--aura-contrast-level)) calc(c * l) h);--vaadin-text-color:light-dark(var(--aura-neutral-light),var(--aura-neutral-dark));--vaadin-text-color-secondary:light-dark(oklch(from var(--aura-background-color-light) calc(l * 0.55 - 0.05 * var(--aura-contrast-level) + c / 2) calc(c * 0.6) h),oklch(from var(--aura-background-color-dark) calc(0.6 + l / 4 + 0.05 * var(--aura-contrast-level)) calc(c * l * 3) h));--vaadin-text-color-disabled:light-dark(oklch(from var(--aura-background-color-light) calc(l * 0.75 - 0.03 * var(--aura-contrast-level)) calc(c * 0.8) h),oklch(from var(--aura-background-color-dark) calc(0.45 + 0.03 * var(--aura-contrast-level)) calc(c * 0.8) h));--_border-color-base:light-dark(oklch(from var(--aura-background-color-light) 0.1 c h),oklch(from var(--aura-background-color-dark) calc(0.8 + max(0, 0.2 - l) + c / 2) calc(c - l / 4) h));--vaadin-border-color:color-mix(in srgb,var(--_border-color-base) calc(14% + 6%*var(--aura-contrast-level)),transparent);--vaadin-border-color-secondary:light-dark(color-mix(in srgb,var(--_border-color-base) max(6%,5% + 3% * var(--aura-contrast-level)),transparent),color-mix(in srgb,var(--_border-color-base) max(8%,7% + 3% * var(--aura-contrast-level)),transparent));--aura-accent-contrast-color-light:oklch(from var(--aura-accent-color-light) clamp(0,(0.62 - l) * 1000,1) 0 0/clamp(0.8,(0.62 - l) * 1000,1));--aura-accent-contrast-color-dark:oklch(from var(--aura-accent-color-dark) clamp(0,(0.62 - l) * 1000,1) 0 0/clamp(0.8,(0.62 - l) * 1000,1));--aura-accent-text-color-light:oklch(from var(--aura-accent-color-light) min(0.55,0.35 - 0.05 * var(--aura-contrast-level) + c) calc(c * 0.9) h);--aura-accent-text-color-dark:oklch(from var(--aura-accent-color-dark) max(0.8,0.9 + 0.05 * var(--aura-contrast-level) - c) calc(c * 0.9) h);--aura-accent-color:light-dark(var(--aura-accent-color-light),var(--aura-accent-color-dark));--aura-accent-contrast-color:light-dark(var(--aura-accent-contrast-color-light),var(--aura-accent-contrast-color-dark));--aura-accent-text-color:light-dark(var(--aura-accent-text-color-light),var(--aura-accent-text-color-dark));--_accent-blend-light:oklch(from var(--aura-accent-color-light) calc(l) c h/min(0.1,c * var(--aura-surface-opacity)));--_accent-blend-dark:oklch(from var(--aura-accent-color-dark) calc(l) c h/min(0.1,c * var(--aura-surface-opacity)));--aura-accent-surface:light-dark(color-mix(in srgb,var(--_accent-blend-light),var(--aura-surface-color-solid) calc(var(--aura-surface-opacity)*100%)),color-mix(in srgb,var(--_accent-blend-dark),var(--aura-surface-color-solid) calc(var(--aura-surface-opacity)*50%)));--aura-accent-border-color:color-mix(in srgb,var(--aura-accent-text-color) calc(14% + 2%*var(--aura-contrast-level)),var(--vaadin-border-color) calc(28% + 2%*var(--aura-contrast-level)));--_color-base:light-dark(oklch(from var(--aura-background-color-light) 0.1 calc(c / 2 + c * (1 - c)) h),oklch(from var(--aura-background-color-dark) 1 c h));--aura-background-color:light-dark(var(--aura-background-color-light),var(--aura-background-color-dark));--vaadin-background-container:color-mix(in srgb,var(--_color-base) calc(3% + min(3%, 1% * var(--aura-contrast-level))),transparent);--vaadin-background-container-strong:color-mix(in srgb,var(--_color-base) calc(7% + min(8%, 1.5% * var(--aura-contrast-level))),transparent);accent-color:var(--aura-accent-color)}:where(h1,h2,h3,h4,h5,h6){color:var(--vaadin-text-color)}:where(a:any-link){color:var(--aura-accent-text-color)}:is(#id,.aura-accent-neutral){--aura-accent-color-light:var(--aura-neutral-light);--aura-accent-color-dark:var(--aura-neutral-dark);--aura-accent-color:light-dark(var(--aura-accent-color-light),var(--aura-accent-color-dark))}:is(#id,[theme~=danger],[theme~=error],.aura-accent-red){--aura-accent-color-light:var(--aura-red);--aura-accent-color-dark:var(--aura-red);--aura-accent-color:light-dark(var(--aura-accent-color-light),var(--aura-accent-color-dark))}:is(#id,.aura-accent-green){--aura-accent-color-light:var(--aura-green);--aura-accent-color-dark:var(--aura-green);--aura-accent-color:light-dark(var(--aura-accent-color-light),var(--aura-accent-color-dark))}:is(#id,.aura-accent-yellow){--aura-accent-color-light:var(--aura-yellow);--aura-accent-color-dark:var(--aura-yellow);--aura-accent-color:light-dark(var(--aura-accent-color-light),var(--aura-accent-color-dark))}:is(#id,.aura-accent-orange){--aura-accent-color-light:var(--aura-orange);--aura-accent-color-dark:var(--aura-orange);--aura-accent-color:light-dark(var(--aura-accent-color-light),var(--aura-accent-color-dark))}:is(#id,.aura-accent-purple){--aura-accent-color-light:var(--aura-purple);--aura-accent-color-dark:var(--aura-purple);--aura-accent-color:light-dark(var(--aura-accent-color-light),var(--aura-accent-color-dark))}:is(#id,.aura-accent-blue){--aura-accent-color-light:var(--aura-blue);--aura-accent-color-dark:var(--aura-blue);--aura-accent-color:light-dark(var(--aura-accent-color-light),var(--aura-accent-color-dark))}:where(vaadin-button,vaadin-menu-bar-button,vaadin-drawer-toggle)>*,:where(vaadin-side-nav-item)>*,:where(vaadin-tab)>*{--aura-accent-color-light:var(--aura-accent-color-light-initial);--aura-accent-color-dark:var(--aura-accent-color-dark-initial);--aura-accent-color:light-dark(var(--aura-accent-color-light-initial),var(--aura-accent-color-dark-initial))}:is(vaadin-button,vaadin-menu-bar-button,vaadin-drawer-toggle)[theme~=primary]>*,:is(vaadin-combo-box-item,vaadin-context-menu-item,vaadin-item,vaadin-menu-bar-item,vaadin-multi-select-combo-box-item,vaadin-select-item[role])[theme~=filled]:not([disabled],[aria-disabled=true]):hover>*,vaadin-side-nav[theme~=filled]>vaadin-side-nav-item[current]>:not([slot=children]):not([slot=tooltip]),vaadin-tabs[theme~=filled]>vaadin-tab[selected]>:not([slot=tooltip]){--vaadin-icon-color:currentColor;--vaadin-text-color:currentColor;--vaadin-text-color-secondary:color-mix(in srgb,currentColor 70%,transparent);--vaadin-text-color-disabled:color-mix(in srgb,currentColor 50%,transparent);--aura-accent-text-color:currentColor;--aura-accent-border-color:color-mix(in srgb,currentColor 30%,transparent);--aura-accent-surface:color-mix(in srgb,currentColor 10%,transparent)}:where(:host),:where(:root){--aura-content-color-scheme:inherit;--aura-notification-color-scheme:inherit}:where(:host),:where(:root){--aura-red:oklch(0.59 0.2 25);--aura-orange:oklch(0.61 0.4 90);--aura-yellow:oklch(0.9 0.45 105);--aura-green:oklch(0.6 0.2 150);--aura-blue:oklch(0.61 0.2 260);--aura-purple:oklch(0.58 0.22 290);--aura-red-text:light-dark(oklch(from var(--aura-red) min(0.55,0.35 - 0.05 * var(--aura-contrast-level) + c * 0.75) calc(c * 0.9) h),oklch(from var(--aura-red) max(0.8,0.9 + 0.05 * var(--aura-contrast-level) - c * 0.75) calc(c * 0.9) h));--aura-orange-text:light-dark(oklch(from var(--aura-orange) min(0.55,0.35 - 0.05 * var(--aura-contrast-level) + c * 0.75) calc(c * 0.9) h),oklch(from var(--aura-orange) max(0.8,0.9 + 0.05 * var(--aura-contrast-level) - c * 0.75) calc(c * 0.9) h));--aura-yellow-text:light-dark(oklch(from var(--aura-yellow) min(0.55,0.35 - 0.05 * var(--aura-contrast-level) + c * 0.75) calc(c * 0.9) h),oklch(from var(--aura-yellow) max(0.8,0.9 + 0.05 * var(--aura-contrast-level) - c * 0.75) calc(c * 0.9) h));--aura-green-text:light-dark(oklch(from var(--aura-green) min(0.55,0.35 - 0.05 * var(--aura-contrast-level) + c * 0.75) calc(c * 0.9) h),oklch(from var(--aura-green) max(0.8,0.9 + 0.05 * var(--aura-contrast-level) - c * 0.75) calc(c * 0.9) h));--aura-blue-text:light-dark(oklch(from var(--aura-blue) min(0.55,0.35 - 0.05 * var(--aura-contrast-level) + c * 0.75) calc(c * 0.9) h),oklch(from var(--aura-blue) max(0.8,0.9 + 0.05 * var(--aura-contrast-level) - c * 0.75) calc(c * 0.9) h));--aura-purple-text:light-dark(oklch(from var(--aura-purple) min(0.55,0.35 - 0.05 * var(--aura-contrast-level) + c * 0.75) calc(c * 0.9) h),oklch(from var(--aura-purple) max(0.8,0.9 + 0.05 * var(--aura-contrast-level) - c * 0.75) calc(c * 0.9) h))}:where(:host),:where(:root){--aura-shadow-color:light-dark(oklch(from var(--aura-background-color-light) calc(l - l * 0.8) calc(c / 10) h/0.2),oklch(from var(--aura-background-color-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-block-container:round(var(--vaadin-padding-s)/1.4,1px);--vaadin-padding-inline-container: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-tabs,vaadin-upload,vaadin-upload-file{--aura-surface-opacity:0.5;--aura-surface-color-solid:light-dark(oklch(from var(--aura-background-color-light) min(1,l + ((1 - l)/4 + 0.06 - var(--aura-surface-opacity)/20) * var(--aura-surface-level)) clamp(0,c - l/10 * var(--aura-surface-level) + var(--aura-surface-opacity)/40,c) h),oklch(from var(--aura-background-color-dark) calc(max(0.03, l) + var(--aura-surface-level)*0.03 + max(0, 0.2 - max(0.03, l))*(1.1 - var(--aura-surface-level)*0.06)) clamp(0,c * (1 + l),0.2) h));--aura-surface-color:color-mix(in oklab,var(--aura-surface-color-solid) calc(100%*var(--aura-surface-opacity)),transparent);--vaadin-background-color:var(--aura-surface-color-solid)}.aura-surface{background:var(--aura-surface-color) padding-box}.aura-surface-solid{--aura-surface-opacity:1;background:var(--aura-surface-color-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)}:where(:host),:where(:root){--vaadin-accordion-heading-gap:var(--vaadin-gap-xs);--vaadin-details-summary-gap:var(--vaadin-gap-xs)}:is(vaadin-details,vaadin-accordion-panel):not([theme~=no-padding])::part(content){padding:var(--vaadin-padding-block-container) var(--vaadin-padding-inline-container);padding-top:0}vaadin-details:not([theme~=no-padding],[theme~=reverse])::part(content){margin-inline-start:calc(var(--vaadin-icon-size, 1lh) + var(--vaadin-details-summary-gap))}vaadin-accordion-panel:not([theme~=no-padding],[theme~=reverse])::part(content){margin-inline-start:calc(var(--vaadin-icon-size, 1lh) + var(--vaadin-accordion-heading-gap))}: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-color) 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-app-layout-border-width:1px;--vaadin-app-layout-navbar-padding-top:max(var(--aura-app-layout-inset),var(--vaadin-padding-s));--vaadin-app-layout-navbar-padding-inline-start:max(var(--aura-app-layout-inset),var(--vaadin-padding-s));--vaadin-app-layout-navbar-padding-inline-end:max(var(--aura-app-layout-inset),var(--vaadin-padding-s))}@media (height <= 600px),(width <= 800px){:where(:host),:where(:root){--aura-app-layout-inset:0px!important;--aura-app-layout-border-width:0px}}vaadin-app-layout{--_app-layout-radius:clamp(0px,var(--aura-app-layout-radius),var(--aura-app-layout-inset) * 100);padding-bottom:var(--aura-app-layout-inset);padding-inline-end:var(--aura-app-layout-inset);padding-top:max(var(--aura-app-layout-inset),var(--_vaadin-app-layout-navbar-offset-size))}vaadin-app-layout[overlay]::part(drawer){--vaadin-app-layout-drawer-background:var(--aura-surface-color);--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])),vaadin-app-layout:not(:has([slot=drawer])){padding-inline-start:var(--aura-app-layout-inset)}vaadin-app-layout::part(navbar){--vaadin-app-layout-navbar-background:transparent;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}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[has-navbar]::part(drawer){padding-top:var(--safe-area-inset-top)}vaadin-app-layout>vaadin-scroller[slot=drawer]{--vaadin-scroller-padding-inline:var(--vaadin-padding-m);scrollbar-width:thin}vaadin-app-layout>vaadin-scroller:nth-child(1 of [slot=drawer]),vaadin-app-layout>vaadin-scroller:nth-last-child(1 of [slot=drawer]){--vaadin-scroller-padding-block: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-color),var(--aura-surface-color)),var(--aura-app-background);background-clip:padding-box;background-origin:border-box;border:var(--aura-app-layout-border-width) solid var(--vaadin-border-color-secondary);border-block-width:min(var(--aura-app-layout-inset),var(--aura-app-layout-border-width));border-inline-width:min(var(--aura-app-layout-inset),var(--aura-app-layout-border-width));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])){height:calc(100% + var(--safe-area-inset-top) + var(--safe-area-inset-bottom));margin-block:calc(var(--safe-area-inset-top)*-1) calc(var(--safe-area-inset-bottom)*-1);margin-inline:calc(var(--safe-area-inset-left)*-1) calc(var(--safe-area-inset-right)*-1);max-height:calc(100% + var(--safe-area-inset-top) + var(--safe-area-inset-bottom));max-width:calc(100% + var(--safe-area-inset-left) + var(--safe-area-inset-right));padding-block:var(--safe-area-inset-top) var(--safe-area-inset-bottom);padding-inline:var(--safe-area-inset-left) var(--safe-area-inset-right);&::part(detail){padding-bottom:var(--safe-area-inset-bottom);padding-top:var(--safe-area-inset-top)}&:dir(ltr)::part(detail){padding-right:var(--safe-area-inset-right)}&:dir(rtl)::part(detail){padding-left:var(--safe-area-inset-left)}&[stack]::part(detail){padding-left:var(--safe-area-inset-left);padding-right:var(--safe-area-inset-right)}&: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-app-layout-border-width))}&:is([drawer][has-detail]){border-color:light-dark(var(--vaadin-border-color),var(--vaadin-border-color-secondary))}}vaadin-app-layout[has-drawer][drawer-opened]:not([overlay])>:nth-child(1 of :not([slot])):nth-last-child(1 of :not([slot])){border-inline-start-width:var(--aura-app-layout-border-width)}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]>:nth-child(1 of :not([slot])):nth-last-child(1 of :not([slot])){border-top-width:var(--aura-app-layout-border-width)}:where(:host),:where(:root){--vaadin-avatar-border-color:var(--aura-accent-border-color);--vaadin-avatar-font-weight:var(--aura-font-weight-medium);--vaadin-avatar-font-size:var(--aura-font-size-m)}vaadin-avatar{color:var(--vaadin-avatar-text-color,var(--aura-accent-text-color));--_shade:color-mix(in srgb,var(--vaadin-border-color) 20%,transparent);background:var(
1
+ :where(:host),:where(:root){--aura-contrast-level:1;--aura-accent-color-light:var(--aura-neutral-light);--aura-accent-color-dark:var(--aura-neutral-dark);--aura-accent-color-light-initial:var(--aura-accent-color-light);--aura-accent-color-dark-initial:var(--aura-accent-color-dark);--aura-background-color-light:oklch(0.95 0.005 248);--aura-background-color-dark:oklch(0.2 0.01 260);--_bg-alt:light-dark(oklch(from var(--aura-background-color-light) calc(l + c) min(c,c * 2 - l/20) calc(h + 180 * var(--_vaadin-safari-17-deg, 1) * l * c * 4)),oklch(from var(--aura-background-color-dark) calc(l + c) min(c,c * 2 - l/20) calc(h + 180 * var(--_vaadin-safari-17-deg, 1) * l * c * 4)));--_bg-accent:radial-gradient(circle at 0% 0%,light-dark(oklch(from var(--aura-background-color-light) min(1,l + c * 3) min(c,c * 3) h),oklch(from var(--aura-background-color-dark) min(1,l + c) clamp(0,c * 1.5,0.4) h)),transparent 30%);--aura-app-background:var(--aura-background-color);--vaadin-focus-ring-color:var(--aura-accent-color);--vaadin-user-color:var(--aura-blue);background:var(--aura-app-background);background-attachment:fixed;background-size:100vw 100vh;color:var(--vaadin-text-color)}@supports (color:hsl(0 0 0)){@scope (:root){:where(:scope){--aura-app-background:var(--_bg-accent),radial-gradient(circle at 25% 0% in xyz,var(--aura-background-color) 33%,var(--_bg-alt)) var(--aura-background-color)}}}:where(.aura-accent-color,.aura-accent-neutral,.aura-accent-red,.aura-accent-orange,.aura-accent-yellow,.aura-accent-green,.aura-accent-blue,.aura-accent-purple),:where(:host),:where(:root),vaadin-app-layout>:not([slot]),vaadin-avatar,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-notification-container,vaadin-radio-button::part(radio),vaadin-side-nav-item::part(content),vaadin-tab{--aura-neutral-light:oklch(from var(--aura-background-color-light) calc(0.2 - 0.05 * var(--aura-contrast-level)) calc(c * l * 0.8) h);--aura-neutral-dark:oklch(from var(--aura-background-color-dark) calc(0.9 + 0.1 * var(--aura-contrast-level)) calc(c * l) h);--aura-neutral:light-dark(var(--aura-neutral-light),var(--aura-neutral-dark));--vaadin-text-color:light-dark(var(--aura-neutral-light),var(--aura-neutral-dark));--vaadin-text-color-secondary:color-mix(in oklch,var(--vaadin-text-color) min(95%,60% + 5% * var(--aura-contrast-level)),transparent);--vaadin-text-color-disabled:color-mix(in oklch,var(--vaadin-text-color) min(95%,30% + 3% * var(--aura-contrast-level)),transparent);--_border-color-base:light-dark(oklch(from var(--aura-background-color-light) 0.1 c h),oklch(from var(--aura-background-color-dark) calc(0.8 + max(0, 0.2 - l) + c / 2) calc(c - l / 4) h));--vaadin-border-color:color-mix(in srgb,var(--_border-color-base) calc(14% + 6%*var(--aura-contrast-level)),transparent);--vaadin-border-color-secondary:light-dark(color-mix(in srgb,var(--_border-color-base) max(6%,5% + 3% * var(--aura-contrast-level)),transparent),color-mix(in srgb,var(--_border-color-base) max(8%,7% + 3% * var(--aura-contrast-level)),transparent));--aura-accent-contrast-color-light:oklch(from var(--aura-accent-color-light) clamp(0,(0.62 - l) * 1000,1) 0 0/clamp(0.8,(0.62 - l) * 1000,1));--aura-accent-contrast-color-dark:oklch(from var(--aura-accent-color-dark) clamp(0,(0.62 - l) * 1000,1) 0 0/clamp(0.8,(0.62 - l) * 1000,1));--aura-accent-text-color-light:oklch(from var(--aura-accent-color-light) min(0.55,0.35 - 0.05 * var(--aura-contrast-level) + c) calc(c * 0.9) h);--aura-accent-text-color-dark:oklch(from var(--aura-accent-color-dark) max(0.8,0.9 + 0.1 * var(--aura-contrast-level) - c * 2) calc(c * 0.9) h);--aura-accent-color:light-dark(var(--aura-accent-color-light),var(--aura-accent-color-dark));--aura-accent-contrast-color:light-dark(var(--aura-accent-contrast-color-light),var(--aura-accent-contrast-color-dark));--aura-accent-text-color:light-dark(var(--aura-accent-text-color-light),var(--aura-accent-text-color-dark));--_accent-surface-light:color-mix(in srgb,oklch(from var(--aura-accent-color-light) l c h/min(1,c + (1 - l)/20)) calc((60% - 6%*abs(var(--aura-surface-level)))*var(--aura-surface-opacity)),var(--aura-surface-color-solid) calc((25% + 20%*abs(var(--aura-surface-level)))*var(--aura-surface-opacity)));--_accent-surface-dark:color-mix(in srgb,oklch(from var(--aura-accent-color-dark) l c h/min(1,c + (1 - l)/10)) calc((60% - 6%*abs(var(--aura-surface-level)))*var(--aura-surface-opacity)),var(--aura-surface-color-solid) calc((40% + 6%*abs(var(--aura-surface-level)))*var(--aura-surface-opacity)));--aura-accent-surface:light-dark(var(--_accent-surface-light),var(--_accent-surface-dark));--_accent-border:light-dark(oklch(from var(--aura-accent-color-light) 0.8 calc(c * 1.1) h/min(1,c + (1 - l)/10)),oklch(from var(--aura-accent-color-dark) 0.8 calc(c * 1.1) h/min(1,c + (1 - l)/10)));--aura-accent-border-color:color-mix(in srgb,var(--_accent-border) calc(30% - 1%*var(--aura-surface-level) + 1%*var(--aura-contrast-level)),var(--vaadin-border-color) 60%);--_color-base:light-dark(oklch(from var(--aura-background-color-light) 0.1 calc(c / 2 + c * (1 - c)) h),oklch(from var(--aura-background-color-dark) 1 c h));--aura-background-color:light-dark(var(--aura-background-color-light),var(--aura-background-color-dark));--vaadin-background-container:color-mix(in srgb,var(--_color-base) calc(3% + min(3%, 1% * var(--aura-contrast-level))),transparent);--vaadin-background-container-strong:color-mix(in srgb,var(--_color-base) calc(7% + min(8%, 1.5% * var(--aura-contrast-level))),transparent);accent-color:var(--aura-accent-color)}:where(h1,h2,h3,h4,h5,h6){color:var(--vaadin-text-color)}:where(a:any-link){color:var(--aura-accent-text-color)}:is(#id,.aura-accent-color){--aura-accent-color-light:var(--aura-accent-color-light-initial);--aura-accent-color-dark:var(--aura-accent-color-dark-initial);--aura-accent-color:light-dark(var(--aura-accent-color-light),var(--aura-accent-color-dark))}:is(#id,.aura-accent-neutral){--aura-accent-color-light:var(--aura-neutral-light);--aura-accent-color-dark:var(--aura-neutral-dark);--aura-accent-color:light-dark(var(--aura-accent-color-light),var(--aura-accent-color-dark))}:is(#id,[theme~=danger],[theme~=error],.aura-accent-red){--aura-accent-color-light:var(--aura-red);--aura-accent-color-dark:var(--aura-red);--aura-accent-color:light-dark(var(--aura-accent-color-light),var(--aura-accent-color-dark))}:is(#id,.aura-accent-green){--aura-accent-color-light:var(--aura-green);--aura-accent-color-dark:var(--aura-green);--aura-accent-color:light-dark(var(--aura-accent-color-light),var(--aura-accent-color-dark))}:is(#id,.aura-accent-yellow){--aura-accent-color-light:var(--aura-yellow);--aura-accent-color-dark:var(--aura-yellow);--aura-accent-color:light-dark(var(--aura-accent-color-light),var(--aura-accent-color-dark))}:is(#id,.aura-accent-orange){--aura-accent-color-light:var(--aura-orange);--aura-accent-color-dark:var(--aura-orange);--aura-accent-color:light-dark(var(--aura-accent-color-light),var(--aura-accent-color-dark))}:is(#id,.aura-accent-purple){--aura-accent-color-light:var(--aura-purple);--aura-accent-color-dark:var(--aura-purple);--aura-accent-color:light-dark(var(--aura-accent-color-light),var(--aura-accent-color-dark))}:is(#id,.aura-accent-blue){--aura-accent-color-light:var(--aura-blue);--aura-accent-color-dark:var(--aura-blue);--aura-accent-color:light-dark(var(--aura-accent-color-light),var(--aura-accent-color-dark))}:where(vaadin-button,vaadin-menu-bar-button,vaadin-drawer-toggle)>*,:where(vaadin-side-nav-item)>*,:where(vaadin-tab)>*{--aura-accent-color-light:var(--aura-accent-color-light-initial);--aura-accent-color-dark:var(--aura-accent-color-dark-initial);--aura-accent-color:light-dark(var(--aura-accent-color-light-initial),var(--aura-accent-color-dark-initial))}:is(vaadin-button,vaadin-menu-bar-button,vaadin-drawer-toggle)[theme~=primary]>*,:is(vaadin-combo-box-item,vaadin-context-menu-item,vaadin-item,vaadin-menu-bar-item,vaadin-multi-select-combo-box-item,vaadin-select-item[role])[theme~=filled]:not([disabled],[aria-disabled=true]):hover>*,vaadin-side-nav[theme~=filled]>vaadin-side-nav-item[current]>:not([slot=children]):not([slot=tooltip]),vaadin-tabs[theme~=filled]>vaadin-tab[selected]>:not([slot=tooltip]){--vaadin-icon-color:currentColor;--vaadin-text-color:currentColor;--vaadin-text-color-secondary:color-mix(in srgb,currentColor 70%,transparent);--vaadin-text-color-disabled:color-mix(in srgb,currentColor 50%,transparent);--aura-accent-text-color:currentColor;--aura-accent-border-color:color-mix(in srgb,currentColor 30%,transparent);--aura-accent-surface:color-mix(in srgb,currentColor 10%,transparent)}:where(:host),:where(:root){--aura-content-color-scheme:inherit;--aura-notification-color-scheme:inherit}:where(:host),:where(:root){--aura-red:oklch(0.59 0.2 25);--aura-orange:oklch(0.61 0.35 87);--aura-yellow:oklch(0.89 0.3 98);--aura-green:oklch(0.6 0.2 155);--aura-blue:oklch(0.55 0.2 264);--aura-purple:oklch(0.58 0.22 290);--aura-red-text:light-dark(oklch(from var(--aura-red) min(0.55,0.35 - 0.05 * var(--aura-contrast-level) + c * 0.75) calc(c * 0.9) h),oklch(from var(--aura-red) max(0.8,0.9 + 0.05 * var(--aura-contrast-level) - c * 0.75) calc(c * 0.9) h));--aura-orange-text:light-dark(oklch(from var(--aura-orange) min(0.55,0.35 - 0.05 * var(--aura-contrast-level) + c * 0.75) calc(c * 0.9) h),oklch(from var(--aura-orange) max(0.8,0.9 + 0.05 * var(--aura-contrast-level) - c * 0.75) calc(c * 0.9) h));--aura-yellow-text:light-dark(oklch(from var(--aura-yellow) min(0.55,0.35 - 0.05 * var(--aura-contrast-level) + c * 0.75) calc(c * 0.9) h),oklch(from var(--aura-yellow) max(0.8,0.9 + 0.05 * var(--aura-contrast-level) - c * 0.75) calc(c * 0.9) h));--aura-green-text:light-dark(oklch(from var(--aura-green) min(0.55,0.35 - 0.05 * var(--aura-contrast-level) + c * 0.75) calc(c * 0.9) h),oklch(from var(--aura-green) max(0.8,0.9 + 0.05 * var(--aura-contrast-level) - c * 0.75) calc(c * 0.9) h));--aura-blue-text:light-dark(oklch(from var(--aura-blue) min(0.55,0.35 - 0.05 * var(--aura-contrast-level) + c * 0.75) calc(c * 0.9) h),oklch(from var(--aura-blue) max(0.8,0.9 + 0.05 * var(--aura-contrast-level) - c * 0.75) calc(c * 0.9) h));--aura-purple-text:light-dark(oklch(from var(--aura-purple) min(0.55,0.35 - 0.05 * var(--aura-contrast-level) + c * 0.75) calc(c * 0.9) h),oklch(from var(--aura-purple) max(0.8,0.9 + 0.05 * var(--aura-contrast-level) - c * 0.75) calc(c * 0.9) h))}:where(:host),:where(:root){--aura-shadow-color:light-dark(oklch(from var(--aura-background-color-light) calc(l - l * 0.8) calc(c / 10) h/0.2),oklch(from var(--aura-background-color-dark) calc(l - l * 0.8) calc(c / 10) h/0.2));--aura-shadow-xs:0 1px 4px -2px var(--aura-shadow-color);--aura-shadow-s:0 2px 5px -1px var(--aura-shadow-color);--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-block-container:round(var(--vaadin-padding-s)/1.4,1px);--vaadin-padding-inline-container: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,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-tabs,vaadin-upload,vaadin-upload-file{--aura-surface-opacity:0.5;--aura-surface-color-solid:light-dark(oklch(from var(--aura-background-color-light) min(1,l + ((1 - l)/2 + 0.04) * var(--aura-surface-level)) clamp(0,c - (c/3 + (l/1000)) * var(--aura-surface-level),c) h),oklch(from var(--aura-background-color-dark) calc(max(0.03, l) + var(--aura-surface-level)*0.03 + max(0, 0.2 - max(0.03, l))*(1.1 - var(--aura-surface-level)*0.06)) clamp(0,c * (1 + l),0.2) h));--aura-surface-color:color-mix(in oklab,var(--aura-surface-color-solid) calc(100%*var(--aura-surface-opacity)),transparent);--vaadin-background-color:var(--aura-surface-color-solid)}.aura-surface{background:var(--aura-surface-color) padding-box}.aura-surface-solid{--aura-surface-opacity:1;background:var(--aura-surface-color-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);--vaadin-icon-baseline-font-family:var(--aura-font-family);--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)}:where(:host),:where(:root){--vaadin-accordion-heading-gap:var(--vaadin-gap-xs);--vaadin-details-summary-gap:var(--vaadin-gap-xs)}:is(vaadin-details,vaadin-accordion-panel):not([theme~=no-padding])::part(content){padding:var(--vaadin-padding-block-container) var(--vaadin-padding-inline-container);padding-top:0}vaadin-details:not([theme~=no-padding],[theme~=reverse])::part(content){margin-inline-start:calc(var(--vaadin-icon-size, 1lh) + var(--vaadin-details-summary-gap))}vaadin-accordion-panel:not([theme~=no-padding],[theme~=reverse])::part(content){margin-inline-start:calc(var(--vaadin-icon-size, 1lh) + var(--vaadin-accordion-heading-gap))}: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-color) 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-app-layout-border-width:1px;--vaadin-app-layout-navbar-padding-top:max(var(--aura-app-layout-inset),var(--vaadin-padding-s));--vaadin-app-layout-navbar-padding-inline-start:max(var(--aura-app-layout-inset),var(--vaadin-padding-s));--vaadin-app-layout-navbar-padding-inline-end:max(var(--aura-app-layout-inset),var(--vaadin-padding-s))}@media (height <= 600px),(width <= 800px){:where(:host),:where(:root){--aura-app-layout-inset:0px!important;--aura-app-layout-border-width:0px}}vaadin-app-layout{--_app-layout-radius:clamp(0px,var(--aura-app-layout-radius),var(--aura-app-layout-inset) * 100);padding-bottom:var(--aura-app-layout-inset);padding-inline-end:var(--aura-app-layout-inset);padding-top:max(var(--aura-app-layout-inset),var(--_vaadin-app-layout-navbar-offset-size))}vaadin-app-layout[overlay]::part(drawer){--vaadin-app-layout-drawer-background:var(--aura-surface-color);--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])),vaadin-app-layout:not([has-drawer]){padding-inline-start:var(--aura-app-layout-inset)}vaadin-app-layout::part(navbar){--vaadin-app-layout-navbar-background:transparent;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}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[has-navbar]::part(drawer){padding-top:var(--safe-area-inset-top)}vaadin-app-layout>vaadin-scroller[slot=drawer]{--vaadin-scroller-padding-inline:var(--vaadin-padding-m);--vaadin-scroller-padding-block:var(--vaadin-padding-s);scrollbar-width:thin}vaadin-app-layout>:nth-child(1 of :not([slot])):nth-last-child(1 of :not([slot])){background:linear-gradient(var(--aura-surface-color),var(--aura-surface-color)),var(--aura-app-background);background-clip:padding-box;background-origin:border-box;border:var(--aura-app-layout-border-width) solid var(--vaadin-border-color-secondary);border-block-width:min(var(--aura-app-layout-inset),var(--aura-app-layout-border-width));border-inline-width:min(var(--aura-app-layout-inset),var(--aura-app-layout-border-width));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])){height:calc(100% + var(--safe-area-inset-top) + var(--safe-area-inset-bottom));margin-block:calc(var(--safe-area-inset-top)*-1) calc(var(--safe-area-inset-bottom)*-1);margin-inline:calc(var(--safe-area-inset-left)*-1) calc(var(--safe-area-inset-right)*-1);max-height:calc(100% + var(--safe-area-inset-top) + var(--safe-area-inset-bottom));max-width:calc(100% + var(--safe-area-inset-left) + var(--safe-area-inset-right));padding-block:var(--safe-area-inset-top) var(--safe-area-inset-bottom);padding-inline:var(--safe-area-inset-left) var(--safe-area-inset-right);&::part(detail){padding-bottom:var(--safe-area-inset-bottom);padding-top:var(--safe-area-inset-top)}&:dir(ltr)::part(detail){padding-right:var(--safe-area-inset-right)}&:dir(rtl)::part(detail){padding-left:var(--safe-area-inset-left)}&[stack]::part(detail){padding-left:var(--safe-area-inset-left);padding-right:var(--safe-area-inset-right)}&: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-app-layout-border-width))}&:is([drawer][has-detail]){border-color:light-dark(var(--vaadin-border-color),var(--vaadin-border-color-secondary))}}vaadin-app-layout[has-drawer][drawer-opened]:not([overlay])>:nth-child(1 of :not([slot])):nth-last-child(1 of :not([slot])){border-inline-start-width:var(--aura-app-layout-border-width)}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]>:nth-child(1 of :not([slot])):nth-last-child(1 of :not([slot])){border-top-width:var(--aura-app-layout-border-width)}:where(:host),:where(:root){--vaadin-avatar-border-color:var(--aura-accent-border-color);--vaadin-avatar-font-weight:var(--aura-font-weight-medium);--vaadin-avatar-font-size:var(--aura-font-size-m)}vaadin-avatar{color:var(--vaadin-avatar-text-color,var(--aura-accent-text-color));--_shade:color-mix(in srgb,var(--vaadin-border-color) 20%,transparent);background:var(
2
2
  --vaadin-avatar-background,linear-gradient(light-dark(transparent,var(--_shade)),transparent 50%,light-dark(var(--_shade),transparent)),var(--aura-accent-surface)
3
- );background-clip:content-box}vaadin-avatar:where([has-color-index]){--aura-accent-color-light:var(--vaadin-avatar-user-color);--aura-accent-color-dark:var(--vaadin-avatar-user-color);--aura-accent-color:light-dark(var(--aura-accent-color-light),var(--aura-accent-color-dark));color:var(--vaadin-avatar-text-color,var(--aura-accent-text-color));--vaadin-avatar-background:var(--vaadin-accent-surface);--vaadin-avatar-text-color:var(--aura-accent-text-color);--vaadin-avatar-border-color:var(--aura-accent-border-color);--vaadin-avatar-border-width:1px}vaadin-avatar[img][has-color-index]{--vaadin-avatar-border-color:var(--aura-accent-color);--vaadin-avatar-border-width:2px}vaadin-avatar[theme~=filled]{background:var(--aura-accent-color) content-box;color:var(--aura-accent-contrast-color)}: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;--_background:var(--aura-accent-surface) padding-box;--vaadin-button-text-color:var(--aura-accent-text-color)}vaadin-drawer-toggle[theme~=tertiary]::part(icon){opacity:.6}: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(--aura-accent-border-color)}:is(vaadin-button,vaadin-menu-bar-button,vaadin-drawer-toggle,vaadin-crud-edit):where(:not([theme~=primary])){outline-offset:calc(var(--vaadin-button-border-width, 1px)*-1)}:is(vaadin-button,vaadin-menu-bar-button,vaadin-drawer-toggle,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-color);--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}}: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-border-width:1px}vaadin-card{background:var(--vaadin-card-background,var(--aura-surface-color) padding-box);background-clip:padding-box;--aura-surface-level:1;--aura-surface-opacity:0.5;border:var(--vaadin-card-border-width) solid transparent;--_padding:calc(var(--vaadin-card-padding) - var(--vaadin-card-border-width, 1px))}vaadin-card[theme~=outlined]{--vaadin-card-border-color:var(--vaadin-border-color)}vaadin-card:before{inset:calc(var(--vaadin-card-border-width)*-1)}vaadin-card[theme~=cover-media] [slot=media]:is(img,video,svg,vaadin-icon){margin-inline:calc((var(--_padding) + var(--vaadin-card-border-width))*-1);margin-top:calc((var(--_padding) + var(--vaadin-card-border-width))*-1);width:calc(100% + (var(--_padding) + var(--vaadin-card-border-width))*2)}vaadin-card[theme~=elevated]{--aura-surface-opacity:0.7;--aura-surface-level:3;background:var(--aura-surface-color) padding-box;--_shadow-color:light-dark(oklch(from var(--aura-background-color-light) calc(l - l * 0.8) calc(c / 10) h/0.1),oklch(from var(--aura-background-color-dark) calc(l - l * 0.8) calc(c / 10) h/0.2));--vaadin-card-shadow:0 1px 4px -1px var(--_shadow-color)}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-charts-background:transparent}: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-color);--vaadin-radio-button-background:var(--aura-surface-color);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-color);--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-color);--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-color) padding-box}vaadin-crud-edit{padding:var(--vaadin-padding-xs);--vaadin-icon-visual-size:0.75lh}vaadin-crud::part(editor){background:var(--aura-surface-color)}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-color)}: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-color)}vaadin-date-picker-year-scroller:before{background:var(--aura-surface-color-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-color)}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-widget-header-gap:var(--vaadin-gap-xs);--vaadin-dashboard-widget-border-color:var(--vaadin-border-color-secondary);--vaadin-dashboard-widget-background:var(--aura-surface-color) 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-color) 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);color:var(--aura-accent-contrast-color);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-color);--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-color),var(--aura-surface-color)) var(--aura-background-color) 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-color);--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-color);--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;--vaadin-icon-visual-size:90%}::part(clear-button){--vaadin-icon-visual-size:75%}: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:max(var(--vaadin-radius-s),var(--vaadin-radius-m) - var(--vaadin-item-overlay-padding));--vaadin-item-checkmark-color:var(--aura-accent-text-color);--vaadin-item-gap:var(--vaadin-gap-s)}: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-color);-webkit-user-select:none;user-select:none;--_highlight-color:light-dark(oklch(from var(--aura-accent-color-light) min(0.9,l) c h/max(0.05,l/4)),oklch(from var(--aura-accent-color-dark) max(0.6,l) c h/max(0.2,l/4)));gap:0;&::part(checkmark){--vaadin-icon-visual-size:75%;margin-inline-start:calc(var(--vaadin-gap-xs)*-1)}&[aria-haspopup=true]:after{--vaadin-icon-visual-size:90%;margin-inline-end:calc(var(--vaadin-gap-xs)*-1)}&::part(content){display:flex;gap:var(--vaadin-item-gap);padding-inline:var(--vaadin-gap-xs)}@media (any-hover:hover){&:not([disabled],[aria-disabled=true]):hover{background:var(--_highlight-color);&[theme~=filled]{background:var(--aura-accent-color);color:var(--aura-accent-contrast-color);--vaadin-text-color:var(--aura-accent-contrast-color);--vaadin-text-color-secondary:color-mix(in srgb,var(--aura-accent-contrast-color) 70%,transparent);--vaadin-text-color-disabled:color-mix(in srgb,var(--aura-accent-contrast-color) 50%,transparent);--vaadin-icon-color:var(--aura-accent-contrast-color);--vaadin-item-checkmark-color:var(--aura-accent-contrast-color)}}}&:active{background:var(--_highlight-color)}&[aria-expanded=true]:not(:hover){background:var(--vaadin-background-container-strong)}&:where([theme~=danger]){color:var(--aura-red-text);>*{--aura-accent-color-light:var(--aura-accent-color-light-initial);--aura-accent-color-dark:var(--aura-accent-color-dark-initial);--aura-accent-color:light-dark(var(--aura-accent-color-light-initial),var(--aura-accent-color-dark-initial))}}}[role=menu] [role=separator]{border-color:var(--vaadin-border-color);margin-block:var(--vaadin-gap-xs);margin-inline:calc(var(--vaadin-gap-xs) + var(--vaadin-padding-inline-container))}: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-color) 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-color) 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-menu-bar-button[aria-haspopup=true]::part(suffix):after{--vaadin-icon-visual-size:90%}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-color);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}:where(:host),:where(:root){--vaadin-overlay-border-width:0px;--vaadin-overlay-backdrop-background:light-dark(oklch(from var(--aura-background-color-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-color-light) 0.1 c h/max(0.04,0.03 + 0.04 * var(--aura-contrast-level))),oklch(from var(--aura-background-color-dark) 0.1 c h/max(0.04,0.03 + 0.04 * var(--aura-contrast-level))));--aura-overlay-inner-outline-color:hsla(0deg,0%,100%,max(3%,2% + 4% * var(--aura-contrast-level)));--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}--vaadin-popover-border-radius:var(--vaadin-radius-l)}::part(overlay){--vaadin-overlay-background:var(--aura-surface-color);--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-height:var(--vaadin-gap-s);--vaadin-progress-bar-value-background:linear-gradient(90deg,var(--aura-accent-color),color-mix(in hsl,var(--aura-accent-color) 60%,#f2f2f2))}vaadin-progress-bar[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-color) 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){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-value-button{font-weight:var(--aura-font-weight-medium)}: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::part(label){gap:var(--vaadin-gap-xs)}vaadin-side-nav-item::part(content){--aura-surface-level:4;--aura-surface-opacity:0.6}vaadin-side-nav-item:not([disabled],[current])::part(content):active{--vaadin-side-nav-item-background:var(--vaadin-background-container)}@media (any-hover:hover){vaadin-side-nav-item:not([disabled],[current])::part(content):hover{transition:color .12s;--vaadin-side-nav-item-text-color:var(--vaadin-text-color)}}vaadin-side-nav-item[current]::part(content){transition:none;--_accent-border:color-mix(in srgb,var(--aura-accent-color) 10%,var(--vaadin-border-color-secondary) 50%);--vaadin-side-nav-item-background:var(--aura-accent-surface) padding-box;--vaadin-side-nav-item-text-color:var(--aura-accent-text-color);--vaadin-side-nav-item-border-color:var(--aura-accent-border-color)}vaadin-side-nav-item::part(toggle-button),vaadin-side-nav::part(toggle-button){--vaadin-icon-visual-size:0.9lh}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-color);--vaadin-text-color:var(--vaadin-side-nav-item-text-color);--vaadin-text-color-secondary:color-mix(in srgb,var(--aura-accent-contrast-color) 70%,transparent);--vaadin-text-color-disabled:color-mix(in srgb,var(--aura-accent-contrast-color) 50%,transparent);--vaadin-icon-color:var(--aura-accent-contrast-color);outline-offset:2px}:where(:host),:where(:root){--vaadin-tab-border-radius:var(--vaadin-radius-m);--vaadin-tab-font-weight:var(--aura-font-weight-medium);--vaadin-tabs-gap:2px;--vaadin-tabs-border-radius:calc(var(--vaadin-tab-border-radius) + var(--vaadin-tabs-padding));--vaadin-tabs-padding:3px;--vaadin-tabs-border-width:1px}vaadin-tabs{contain:paint;--aura-surface-level:-1;--aura-surface-opacity:0.3;background:var(--vaadin-tabs-background,var(--aura-surface-color))}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-color-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{border:var(--vaadin-tab-border-width,1px) solid var(--vaadin-tab-border-color,transparent);transition:color .12s,border-color .12s,background-color .12s}vaadin-tab:not([disabled],[selected]):hover{--vaadin-tab-text-color:var(--vaadin-text-color)}vaadin-tab[selected]{--aura-surface-level:6;--aura-surface-opacity:0.7;--vaadin-tab-background:var(--aura-accent-surface);--vaadin-tab-text-color:var(--aura-accent-text-color);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-color);--vaadin-text-color:var(--aura-accent-contrast-color);--vaadin-text-color-secondary:color-mix(in srgb,var(--aura-accent-contrast-color) 70%,transparent);--vaadin-text-color-disabled:color-mix(in srgb,var(--aura-accent-contrast-color) 50%,transparent);--vaadin-icon-color:var(--aura-accent-contrast-color);outline-offset:1px}:where(:host),:where(:root){--vaadin-upload-background:var(--aura-surface-color) 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-color) 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-aura-theme:1;--_vaadin-icon-checkmark:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>');--_vaadin-icon-menu: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="2" stroke-linecap="round" stroke-linejoin="round" ><path d="M4 5h16"/><path d="M4 12h16"/><path d="M4 19h16"/></svg>')}vaadin-icon[icon^="vaadin:"]{--vaadin-icon-visual-size:80%}
3
+ );background-clip:content-box}vaadin-avatar:where([has-color-index]){--aura-accent-color-light:var(--vaadin-avatar-user-color);--aura-accent-color-dark:var(--vaadin-avatar-user-color);--aura-accent-color:light-dark(var(--aura-accent-color-light),var(--aura-accent-color-dark));color:var(--vaadin-avatar-text-color,var(--aura-accent-text-color));--vaadin-avatar-background:var(--vaadin-accent-surface);--vaadin-avatar-text-color:var(--aura-accent-text-color);--vaadin-avatar-border-color:var(--aura-accent-border-color);--vaadin-avatar-border-width:1px}vaadin-avatar[img][has-color-index]{--vaadin-avatar-border-color:var(--aura-accent-color);--vaadin-avatar-border-width:2px}vaadin-avatar[theme~=filled]{background:var(--aura-accent-color) content-box;color:var(--aura-accent-contrast-color)}:where(:host),:where(:root){--vaadin-button-shadow:var(--aura-shadow-xs)}:is(vaadin-button,vaadin-menu-bar-button,vaadin-drawer-toggle,vaadin-crud-edit){position:relative;transition:scale .18s;--_background:var(--aura-accent-surface) padding-box;--vaadin-button-text-color:var(--aura-accent-text-color)}vaadin-drawer-toggle[theme~=tertiary]::part(icon){opacity:.6}: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(--aura-accent-border-color)}:is(vaadin-button,vaadin-menu-bar-button,vaadin-drawer-toggle,vaadin-crud-edit):where(:not([theme~=primary])){outline-offset:calc(var(--vaadin-button-border-width, 1px)*-1)}:is(vaadin-button,vaadin-menu-bar-button,vaadin-drawer-toggle,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-color);--vaadin-button-background:var(--aura-accent-color);--vaadin-button-border-color:var(--vaadin-border-color-secondary);--vaadin-button-shadow:var(--aura-shadow-s)}: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}}: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-border-width:1px}vaadin-card{background:var(--vaadin-card-background,var(--aura-surface-color) padding-box);background-clip:padding-box;--aura-surface-level:2;--aura-surface-opacity:0.5;border:var(--vaadin-card-border-width) solid transparent;--_padding:calc(var(--vaadin-card-padding) - var(--vaadin-card-border-width, 1px))}vaadin-card[theme~=outlined]{--vaadin-card-border-color:var(--vaadin-border-color)}vaadin-card:before{inset:calc(var(--vaadin-card-border-width)*-1)}vaadin-card[theme~=cover-media] [slot=media]:is(img,video,svg,vaadin-icon){margin-inline:calc((var(--_padding) + var(--vaadin-card-border-width))*-1);margin-top:calc((var(--_padding) + var(--vaadin-card-border-width))*-1);width:calc(100% + (var(--_padding) + var(--vaadin-card-border-width))*2)}vaadin-card[theme~=elevated]{--aura-surface-opacity:0.7;--aura-surface-level:3;background:var(--aura-surface-color) padding-box;box-shadow:var(--vaadin-card-shadow,var(--aura-shadow-s))}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-charts-background:transparent}: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-color);--vaadin-radio-button-background:var(--aura-surface-color);transition:background-color .1s}vaadin-checkbox:not([readonly],[disabled])::part(checkbox),vaadin-radio-button:not([disabled])::part(radio){--aura-surface-level:4;box-shadow:var(--aura-shadow-xs);--_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-color);--vaadin-checkbox-border-color:var(--vaadin-border-color-secondary);box-shadow:var(--aura-shadow-s)}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-color);--vaadin-radio-button-border-color:var(--vaadin-border-color-secondary);box-shadow:var(--aura-shadow-s)}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-color) padding-box}vaadin-crud-edit{padding:var(--vaadin-padding-xs);--vaadin-icon-visual-size:0.75lh}vaadin-crud::part(editor){background:var(--aura-surface-color)}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-color)}: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-color)}vaadin-date-picker-year-scroller:before{background:var(--aura-surface-color-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-color)}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-widget-header-gap:var(--vaadin-gap-xs);--vaadin-dashboard-widget-border-radius:var(--vaadin-radius-m)}vaadin-dashboard-widget{--aura-surface-level:2;--aura-surface-opacity:0.5;background:var(--vaadin-dashboard-widget-background,var(--aura-surface-color) padding-box);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}&[theme~=outlined]{--vaadin-dashboard-widget-border-color:var(--vaadin-border-color)}&[theme~=elevated]{--aura-surface-opacity:0.7;--aura-surface-level:3;box-shadow:var(--vaadin-dashboard-widget-shadow,var(--aura-shadow-s))}&[editable]{--vaadin-dashboard-widget-shadow:var(--aura-shadow-s)}}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-color) 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);color:var(--aura-accent-contrast-color);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-color);--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-color),var(--aura-surface-color)) var(--aura-background-color) 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-color);--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-color);--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:var(--aura-shadow-xs)}[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;--vaadin-icon-visual-size:90%}::part(clear-button){--vaadin-icon-visual-size:75%}: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){--aura-item-overlay-padding-inline:var(--vaadin-padding-xs);--aura-item-overlay-padding-block:var(--vaadin-padding-xs);--vaadin-item-overlay-padding:var(--aura-item-overlay-padding-block) var(--aura-item-overlay-padding-inline);--vaadin-item-border-radius:clamp(0px,var(--aura-item-overlay-padding-inline) * 100,var(--vaadin-radius-m) - min(var(--aura-item-overlay-padding-inline),var(--aura-item-overlay-padding-block)));--vaadin-item-checkmark-color:var(--aura-accent-text-color);--vaadin-item-gap:var(--vaadin-gap-s)}vaadin-avatar-group-menu-item,vaadin-combo-box-item,vaadin-context-menu-item,vaadin-item,vaadin-menu-bar-item,vaadin-multi-select-combo-box-item,vaadin-select-item:where([role]),vaadin-time-picker-item{font-weight:var(--aura-font-weight-medium);--vaadin-item-checkmark-color:var(--aura-accent-text-color);-webkit-user-select:none;user-select:none;--_highlight-color:light-dark(oklch(from var(--aura-accent-color-light) min(0.9,l) c h/max(0.05,l/4)),oklch(from var(--aura-accent-color-dark) max(0.6,l) c h/max(0.2,l/4)));gap:0;padding-inline-start:max(0px,var(--vaadin-padding-inline-container) - var(--aura-item-overlay-padding-inline));&::part(checkmark){--vaadin-icon-visual-size:75%}&[aria-haspopup=true]{padding-inline-end:max(0px,var(--vaadin-padding-inline-container) - var(--aura-item-overlay-padding-inline));&:after{--vaadin-icon-visual-size:90%}}&::part(content){gap:var(--vaadin-item-gap);padding-inline:var(--vaadin-gap-xs)}@media (any-hover:hover){&:not([disabled],[aria-disabled=true]):hover{background:var(--_highlight-color);&[theme~=filled]{background:var(--aura-accent-color);color:var(--aura-accent-contrast-color);--vaadin-text-color:var(--aura-accent-contrast-color);--vaadin-text-color-secondary:color-mix(in srgb,var(--aura-accent-contrast-color) 70%,transparent);--vaadin-text-color-disabled:color-mix(in srgb,var(--aura-accent-contrast-color) 50%,transparent);--vaadin-icon-color:var(--aura-accent-contrast-color);--vaadin-item-checkmark-color:var(--aura-accent-contrast-color)}}}&:active{background:var(--_highlight-color)}&[aria-expanded=true]:not(:hover){background:var(--vaadin-background-container-strong)}&:where([theme~=danger]){color:var(--aura-red-text);>*{--aura-accent-color-light:var(--aura-accent-color-light-initial);--aura-accent-color-dark:var(--aura-accent-color-dark-initial);--aura-accent-color:light-dark(var(--aura-accent-color-light-initial),var(--aura-accent-color-dark-initial))}}}[role=menu] [role=separator]{border-color:var(--vaadin-border-color);margin-block:var(--vaadin-gap-xs);margin-inline:calc(var(--vaadin-gap-xs) + var(--vaadin-padding-inline-container))}: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-color) 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-color) 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-menu-bar-button[aria-haspopup=true]::part(suffix):after{--vaadin-icon-visual-size:90%}vaadin-menu-bar-button>vaadin-menu-bar-item{padding-inline:0}vaadin-menu-bar-button>vaadin-menu-bar-item::part(content){gap:var(--vaadin-button-gap,var(--vaadin-gap-s));padding-inline:0}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-padding:var(--vaadin-padding-m)}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-color);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-border-width:0px;--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}:where(:host),:where(:root){--vaadin-overlay-border-width:0px;--vaadin-overlay-backdrop-background:light-dark(oklch(from var(--aura-background-color-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-color-light) 0.1 c h/max(0.04,0.03 + 0.04 * var(--aura-contrast-level))),oklch(from var(--aura-background-color-dark) 0.1 c h/max(0.04,0.03 + 0.04 * var(--aura-contrast-level))));--aura-overlay-inner-outline-color:hsla(0deg,0%,100%,max(3%,2% + 4% * var(--aura-contrast-level)));--aura-overlay-outline-shadow:inset 0 0 0 1px var(--aura-overlay-inner-outline-color),0 0 0 1px var(--aura-overlay-outline-color);--aura-overlay-shadow: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}--vaadin-popover-border-radius:var(--vaadin-radius-l)}::part(overlay){--vaadin-overlay-background:var(--aura-surface-color);--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-outline-shadow),var(--vaadin-overlay-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-height:var(--vaadin-gap-s);--vaadin-progress-bar-value-background:linear-gradient(90deg,var(--aura-accent-color),color-mix(in hsl,var(--aura-accent-color) 60%,#f2f2f2))}vaadin-progress-bar[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-color) padding-box;--aura-surface-level:4;--aura-surface-opacity:0.7!important;box-shadow:var(--aura-shadow-xs);&: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){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-value-button{font-weight:var(--aura-font-weight-medium)}: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::part(label){gap:var(--vaadin-gap-xs);transition:color 80ms}vaadin-side-nav-item::part(content){--aura-surface-level:6;--aura-surface-opacity:0.3;transition:color 80ms}vaadin-side-nav-item:not([disabled],[current])::part(content):active{--vaadin-side-nav-item-background:var(--vaadin-background-container)}@media (any-hover:hover){vaadin-side-nav::part(label):hover{--vaadin-side-nav-label-color:var(--vaadin-text-color)}vaadin-side-nav-item:not([disabled],[current])::part(content):hover{--vaadin-side-nav-item-text-color:var(--vaadin-text-color)}}vaadin-side-nav-item[current]::part(content){transition:none;--_accent-border:color-mix(in srgb,var(--aura-accent-color) 10%,var(--vaadin-border-color-secondary) 50%);--vaadin-side-nav-item-background:var(--aura-accent-surface) padding-box;--vaadin-side-nav-item-text-color:var(--aura-accent-text-color);--vaadin-side-nav-item-border-color:var(--aura-accent-border-color)}vaadin-side-nav-item::part(toggle-button),vaadin-side-nav::part(toggle-button){--vaadin-icon-visual-size:0.9lh}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-color);--vaadin-text-color:var(--vaadin-side-nav-item-text-color);--vaadin-text-color-secondary:color-mix(in srgb,var(--aura-accent-contrast-color) 70%,transparent);--vaadin-text-color-disabled:color-mix(in srgb,var(--aura-accent-contrast-color) 50%,transparent);--vaadin-icon-color:var(--aura-accent-contrast-color);outline-offset:2px}vaadin-side-nav-item:not([current])>vaadin-icon[slot=prefix]{opacity:.8}:where(:host),:where(:root){--vaadin-tab-border-radius:var(--vaadin-radius-m);--vaadin-tab-font-weight:var(--aura-font-weight-medium);--vaadin-tabs-gap:2px;--vaadin-tabs-border-radius:calc(var(--vaadin-tab-border-radius) + var(--vaadin-tabs-padding));--vaadin-tabs-padding:3px;--vaadin-tabs-border-width:1px}vaadin-tabs{contain:paint;--aura-surface-level:-1;--aura-surface-opacity:0.3;background:var(--vaadin-tabs-background,var(--aura-surface-color))}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-background-color) padding-box;border:1px solid var(--vaadin-border-color-secondary);border-radius:var(--vaadin-radius-m);box-shadow:var(--aura-shadow-s);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{border:var(--vaadin-tab-border-width,1px) solid var(--vaadin-tab-border-color,transparent);transition:color .12s,border-color .12s,background-color .12s}vaadin-tab:not([disabled],[selected]):hover{--vaadin-tab-text-color:var(--vaadin-text-color)}vaadin-tab[selected]{--aura-surface-level:6;--aura-surface-opacity:0.7;--vaadin-tab-background:var(--aura-accent-surface);--vaadin-tab-text-color:var(--aura-accent-text-color);border-color:hsla(0,0%,100%,.05);box-shadow:var(--aura-shadow-s)}vaadin-tabs[theme~=filled]>vaadin-tab[selected]{--vaadin-tab-background:var(--aura-accent-color) border-box;--vaadin-tab-text-color:var(--aura-accent-contrast-color);--vaadin-text-color:var(--aura-accent-contrast-color);--vaadin-text-color-secondary:color-mix(in srgb,var(--aura-accent-contrast-color) 70%,transparent);--vaadin-text-color-disabled:color-mix(in srgb,var(--aura-accent-contrast-color) 50%,transparent);--vaadin-icon-color:var(--aura-accent-contrast-color);outline-offset:1px}vaadin-tooltip::part(overlay){box-shadow:var(--aura-overlay-outline-shadow),var(--vaadin-tooltip-shadow,var(--aura-shadow-s));color:var(--vaadin-tooltip-text-color,var(--vaadin-text-color));font-size:var(--vaadin-tooltip-font-size,var(--aura-font-size-s));font-weight:var(--vaadin-tooltip-font-weight,var(--aura-font-weight-medium));line-height:var(--vaadin-tooltip-line-height,var(--aura-line-height-s))}:where(:host),:where(:root){--vaadin-upload-background:var(--aura-surface-color) 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(>ul>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-color) 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-aura-theme:1;--_vaadin-icon-checkmark:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>');--_vaadin-icon-menu: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="2" stroke-linecap="round" stroke-linejoin="round" ><path d="M4 5h16"/><path d="M4 12h16"/><path d="M4 19h16"/></svg>')}vaadin-icon[icon^="vaadin:"]{--vaadin-icon-visual-size:80%}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/aura",
3
- "version": "25.0.0-rc1",
3
+ "version": "25.0.1",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -40,5 +40,5 @@
40
40
  "postcss-import": "^16.1.1",
41
41
  "postcss-url": "^10.1.3"
42
42
  },
43
- "gitHead": "cea5e86ad18824e5631b63c11150b4d7701869c5"
43
+ "gitHead": "ced28c07a8abee586510349b312452c8a555fd10"
44
44
  }
package/src/color.css CHANGED
@@ -32,12 +32,6 @@
32
32
  );
33
33
  --aura-app-background: var(--aura-background-color);
34
34
 
35
- @supports (color: hsl(0 0 0)) {
36
- --aura-app-background:
37
- var(--_bg-accent),
38
- radial-gradient(circle at 25% 0% in xyz, var(--aura-background-color) 33%, var(--_bg-alt))
39
- var(--aura-background-color);
40
- }
41
35
  --vaadin-focus-ring-color: var(--aura-accent-color);
42
36
  --vaadin-user-color: var(--aura-blue);
43
37
  color: var(--vaadin-text-color);
@@ -46,6 +40,17 @@
46
40
  background-attachment: fixed;
47
41
  }
48
42
 
43
+ @supports (color: hsl(0 0 0)) {
44
+ @scope (:root) {
45
+ :where(:scope) {
46
+ --aura-app-background:
47
+ var(--_bg-accent),
48
+ radial-gradient(circle at 25% 0% in xyz, var(--aura-background-color) 33%, var(--_bg-alt))
49
+ var(--aura-background-color);
50
+ }
51
+ }
52
+ }
53
+
49
54
  :where(:root),
50
55
  :where(:host),
51
56
  vaadin-app-layout > :not([slot]),
@@ -72,25 +77,23 @@ vaadin-tab,
72
77
  .aura-accent-purple
73
78
  ) {
74
79
  --aura-neutral-light: oklch(
75
- from var(--aura-background-color-light) calc(0.2 - 0.05 * var(--aura-contrast-level)) calc(c * 0.1) h
80
+ from var(--aura-background-color-light) calc(0.2 - 0.05 * var(--aura-contrast-level)) calc(c * l * 0.8) h
76
81
  );
77
82
  --aura-neutral-dark: oklch(
78
83
  from var(--aura-background-color-dark) calc(0.9 + 0.1 * var(--aura-contrast-level)) calc(c * l) h
79
84
  );
85
+ --aura-neutral: light-dark(var(--aura-neutral-light), var(--aura-neutral-dark));
80
86
  --vaadin-text-color: light-dark(var(--aura-neutral-light), var(--aura-neutral-dark));
81
- --vaadin-text-color-secondary: light-dark(
82
- oklch(
83
- from var(--aura-background-color-light) calc(l * 0.55 - 0.05 * var(--aura-contrast-level) + c / 2) calc(c * 0.6) h
84
- ),
85
- oklch(
86
- from var(--aura-background-color-dark) calc(0.6 + l / 4 + 0.05 * var(--aura-contrast-level)) calc(c * l * 3) h
87
- )
87
+ --vaadin-text-color-secondary: color-mix(
88
+ in oklch,
89
+ var(--vaadin-text-color) min(95%, 60% + 5% * var(--aura-contrast-level)),
90
+ transparent
88
91
  );
89
- --vaadin-text-color-disabled: light-dark(
90
- oklch(from var(--aura-background-color-light) calc(l * 0.75 - 0.03 * var(--aura-contrast-level)) calc(c * 0.8) h),
91
- oklch(from var(--aura-background-color-dark) calc(0.45 + 0.03 * var(--aura-contrast-level)) calc(c * 0.8) h)
92
+ --vaadin-text-color-disabled: color-mix(
93
+ in oklch,
94
+ var(--vaadin-text-color) min(95%, 30% + 3% * var(--aura-contrast-level)),
95
+ transparent
92
96
  );
93
-
94
97
  --_border-color-base: light-dark(
95
98
  oklch(from var(--aura-background-color-light) 0.1 c h),
96
99
  oklch(from var(--aura-background-color-dark) calc(0.8 + max(0, 0.2 - l) + c / 2) calc(c - l / 4) h)
@@ -114,7 +117,7 @@ vaadin-tab,
114
117
  from var(--aura-accent-color-light) min(0.55, 0.35 - 0.05 * var(--aura-contrast-level) + c) calc(c * 0.9) h
115
118
  );
116
119
  --aura-accent-text-color-dark: oklch(
117
- from var(--aura-accent-color-dark) max(0.8, 0.9 + 0.05 * var(--aura-contrast-level) - c) calc(c * 0.9) h
120
+ from var(--aura-accent-color-dark) max(0.8, 0.9 + 0.1 * var(--aura-contrast-level) - c * 2) calc(c * 0.9) h
118
121
  );
119
122
  --aura-accent-color: light-dark(var(--aura-accent-color-light), var(--aura-accent-color-dark));
120
123
  --aura-accent-contrast-color: light-dark(
@@ -122,28 +125,27 @@ vaadin-tab,
122
125
  var(--aura-accent-contrast-color-dark)
123
126
  );
124
127
  --aura-accent-text-color: light-dark(var(--aura-accent-text-color-light), var(--aura-accent-text-color-dark));
125
- --_accent-blend-light: oklch(
126
- from var(--aura-accent-color-light) calc(l) c h / min(0.1, c * var(--aura-surface-opacity))
128
+ --_accent-surface-light: color-mix(
129
+ in srgb,
130
+ oklch(from var(--aura-accent-color-light) l c h / min(1, c + (1 - l) / 20))
131
+ calc((60% - 6% * abs(var(--aura-surface-level))) * var(--aura-surface-opacity)),
132
+ var(--aura-surface-color-solid) calc((25% + 20% * abs(var(--aura-surface-level))) * var(--aura-surface-opacity))
127
133
  );
128
- --_accent-blend-dark: oklch(
129
- from var(--aura-accent-color-dark) calc(l) c h / min(0.1, c * var(--aura-surface-opacity))
134
+ --_accent-surface-dark: color-mix(
135
+ in srgb,
136
+ oklch(from var(--aura-accent-color-dark) l c h / min(1, c + (1 - l) / 10))
137
+ calc((60% - 6% * abs(var(--aura-surface-level))) * var(--aura-surface-opacity)),
138
+ var(--aura-surface-color-solid) calc((40% + 6% * abs(var(--aura-surface-level))) * var(--aura-surface-opacity))
130
139
  );
131
- --aura-accent-surface: light-dark(
132
- color-mix(
133
- in srgb,
134
- var(--_accent-blend-light),
135
- var(--aura-surface-color-solid) calc(var(--aura-surface-opacity) * 100%)
136
- ),
137
- color-mix(
138
- in srgb,
139
- var(--_accent-blend-dark),
140
- var(--aura-surface-color-solid) calc(var(--aura-surface-opacity) * 50%)
141
- )
140
+ --aura-accent-surface: light-dark(var(--_accent-surface-light), var(--_accent-surface-dark));
141
+ --_accent-border: light-dark(
142
+ oklch(from var(--aura-accent-color-light) 0.8 calc(c * 1.1) h / min(1, c + (1 - l) / 10)),
143
+ oklch(from var(--aura-accent-color-dark) 0.8 calc(c * 1.1) h / min(1, c + (1 - l) / 10))
142
144
  );
143
145
  --aura-accent-border-color: color-mix(
144
146
  in srgb,
145
- var(--aura-accent-text-color) calc(14% + 2% * var(--aura-contrast-level)),
146
- var(--vaadin-border-color) calc(28% + 2% * var(--aura-contrast-level))
147
+ var(--_accent-border) calc(30% - 1% * var(--aura-surface-level) + 1% * var(--aura-contrast-level)),
148
+ var(--vaadin-border-color) 60%
147
149
  );
148
150
  --_color-base: light-dark(
149
151
  oklch(from var(--aura-background-color-light) 0.1 calc(c / 2 + c * (1 - c)) h),
@@ -171,6 +173,12 @@ vaadin-tab,
171
173
  color: var(--aura-accent-text-color);
172
174
  }
173
175
 
176
+ :is(#id, .aura-accent-color) {
177
+ --aura-accent-color-light: var(--aura-accent-color-light-initial);
178
+ --aura-accent-color-dark: var(--aura-accent-color-dark-initial);
179
+ --aura-accent-color: light-dark(var(--aura-accent-color-light), var(--aura-accent-color-dark));
180
+ }
181
+
174
182
  :is(#id, .aura-accent-neutral) {
175
183
  --aura-accent-color-light: var(--aura-neutral-light);
176
184
  --aura-accent-color-dark: var(--aura-neutral-dark);
package/src/components/accordion-details.css CHANGED
@@ -18,11 +18,11 @@ vaadin-accordion-panel:not([theme~='no-padding'], [theme~='reverse'])::part(cont
18
18
  }
19
19
 
20
20
  :is(vaadin-details, vaadin-accordion-panel)[theme~='reverse'] {
21
- [slot='summary']::part(content) {
21
+ > [slot='summary']::part(content) {
22
22
  width: 100%;
23
23
  }
24
24
 
25
- [slot='summary']::part(toggle) {
25
+ > [slot='summary']::part(toggle) {
26
26
  order: 1;
27
27
  margin-inline-start: auto;
28
28
  }
package/src/components/app-layout.css CHANGED
@@ -32,7 +32,7 @@ vaadin-app-layout[overlay]::part(drawer) {
32
32
  }
33
33
 
34
34
  vaadin-app-layout:is([overlay], :not([drawer-opened])),
35
- vaadin-app-layout:not(:has([slot='drawer'])) {
35
+ vaadin-app-layout:not([has-drawer]) {
36
36
  padding-inline-start: var(--aura-app-layout-inset);
37
37
  }
38
38
 
@@ -52,18 +52,10 @@ vaadin-app-layout[has-navbar]::part(drawer) {
52
52
  }
53
53
 
54
54
  vaadin-app-layout > vaadin-scroller[slot='drawer'] {
55
- --vaadin-scroller-padding-inline: var(--vaadin-padding-m);
56
- scrollbar-width: thin;
57
- }
58
-
59
- vaadin-app-layout > vaadin-scroller:nth-child(1 of [slot='drawer']) {
60
55
  /* TODO would need a dedicated padding-top property */
56
+ --vaadin-scroller-padding-inline: var(--vaadin-padding-m);
61
57
  --vaadin-scroller-padding-block: var(--vaadin-padding-s);
62
- }
63
-
64
- vaadin-app-layout > vaadin-scroller:nth-last-child(1 of [slot='drawer']) {
65
- /* TODO would need a dedicated padding-bottom property */
66
- --vaadin-scroller-padding-block: var(--vaadin-padding-s);
58
+ scrollbar-width: thin;
67
59
  }
68
60
 
69
61
  vaadin-app-layout > :nth-child(1 of :not([slot])):nth-last-child(1 of :not([slot])) {
package/src/components/button.css CHANGED
@@ -1,6 +1,6 @@
1
1
  :where(:root),
2
2
  :where(:host) {
3
- --vaadin-button-shadow: 0 1px 4px -1px hsla(0, 0%, 0%, 0.07);
3
+ --vaadin-button-shadow: var(--aura-shadow-xs);
4
4
  }
5
5
 
6
6
  :is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit) {
@@ -35,19 +35,19 @@ Increase padding, but only for buttons that don't have an icon in the default sl
35
35
  Buttons that place an icon in the default slot are assumed to be icon-only buttons.
36
36
  */
37
37
  /* prettier-ignore */
38
- :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]))) {
38
+ :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]))) {
39
39
  --vaadin-button-padding: round(var(--vaadin-padding-s) / 1.4, 1px)
40
40
  max(var(--vaadin-padding-m), round(var(--vaadin-radius-m) / 1.5, 1px));
41
41
  }
42
42
 
43
43
  /* Decrease padding when an icon is placed in the prefix or suffix slot */
44
- :is(vaadin-button, vaadin-menu-bar-button):has([slot='prefix']:is(vaadin-icon, svg, i[class*='fa-'], vaadin-avatar)),
44
+ :is(vaadin-button, vaadin-menu-bar-button):has(> [slot='prefix']:is(vaadin-icon, svg, i[class*='fa-'], vaadin-avatar)),
45
45
  vaadin-drawer-toggle:empty {
46
46
  padding-inline-start: max(var(--vaadin-padding-s), round(var(--vaadin-radius-m) / 1.75, 1px));
47
47
  }
48
48
 
49
49
  /* prettier-ignore */
50
- :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)),
50
+ :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)),
51
51
  vaadin-drawer-toggle:empty,
52
52
  vaadin-menu-bar-button[aria-haspopup='true']:not([slot='overflow']) {
53
53
  padding-inline-end: max(var(--vaadin-padding-s), round(var(--vaadin-radius-m) / 1.75, 1px));
@@ -59,7 +59,7 @@ vaadin-menu-bar-button[aria-haspopup='true']:not([slot='overflow']) {
59
59
  --vaadin-button-text-color: var(--aura-accent-contrast-color);
60
60
  --vaadin-button-background: var(--aura-accent-color);
61
61
  --vaadin-button-border-color: var(--vaadin-border-color-secondary);
62
- --vaadin-button-shadow: 0 2px 3px -1px hsla(0, 0%, 0%, 0.24);
62
+ --vaadin-button-shadow: var(--aura-shadow-s);
63
63
  }
64
64
 
65
65
  /* prettier-ignore */
package/src/components/card.css CHANGED
@@ -10,7 +10,7 @@
10
10
  vaadin-card {
11
11
  background: var(--vaadin-card-background, var(--aura-surface-color) padding-box);
12
12
  background-clip: padding-box;
13
- --aura-surface-level: 1;
13
+ --aura-surface-level: 2;
14
14
  --aura-surface-opacity: 0.5;
15
15
  border: var(--vaadin-card-border-width) solid transparent;
16
16
  --_padding: calc(var(--vaadin-card-padding) - var(--vaadin-card-border-width, 1px));
@@ -35,11 +35,7 @@ vaadin-card[theme~='elevated'] {
35
35
  --aura-surface-opacity: 0.7;
36
36
  --aura-surface-level: 3;
37
37
  background: var(--aura-surface-color) padding-box;
38
- --_shadow-color: light-dark(
39
- oklch(from var(--aura-background-color-light) calc(l - l * 0.8) calc(c / 10) h / 0.1),
40
- oklch(from var(--aura-background-color-dark) calc(l - l * 0.8) calc(c / 10) h / 0.2)
41
- );
42
- --vaadin-card-shadow: 0 1px 4px -1px var(--_shadow-color);
38
+ box-shadow: var(--vaadin-card-shadow, var(--aura-shadow-s));
43
39
  }
44
40
 
45
41
  vaadin-card[theme~='stretch-media']:not([theme~='cover-media']) [slot='media']:is(img, video, svg, vaadin-icon) {
package/src/components/checkbox-radio.css CHANGED
@@ -15,7 +15,7 @@ vaadin-radio-button::part(radio) {
15
15
  vaadin-checkbox:not([readonly], [disabled])::part(checkbox),
16
16
  vaadin-radio-button:not([disabled])::part(radio) {
17
17
  --aura-surface-level: 4;
18
- box-shadow: 0 2px 1px -1px hsla(0, 0%, 0%, 0.07);
18
+ box-shadow: var(--aura-shadow-xs);
19
19
  --_shade: color-mix(in srgb, var(--vaadin-border-color-secondary) 50%, transparent);
20
20
  background-image: linear-gradient(
21
21
  light-dark(transparent, var(--_shade)),
@@ -34,12 +34,14 @@ vaadin-checkbox:is([checked], [indeterminate]):not([readonly], [disabled])::part
34
34
  --vaadin-checkbox-background: var(--aura-accent-color);
35
35
  --vaadin-checkbox-marker-color: var(--aura-accent-contrast-color);
36
36
  --vaadin-checkbox-border-color: var(--vaadin-border-color-secondary);
37
+ box-shadow: var(--aura-shadow-s);
37
38
  }
38
39
 
39
40
  vaadin-radio-button[checked]:not([readonly], [disabled])::part(radio) {
40
41
  --vaadin-radio-button-background: var(--aura-accent-color);
41
42
  --vaadin-radio-button-marker-color: var(--aura-accent-contrast-color);
42
43
  --vaadin-radio-button-border-color: var(--vaadin-border-color-secondary);
44
+ box-shadow: var(--aura-shadow-s);
43
45
  }
44
46
 
45
47
  vaadin-checkbox:not([readonly], [disabled])::part(checkbox)::before,
package/src/components/confirm-dialog.css CHANGED
@@ -9,6 +9,6 @@ vaadin-confirm-dialog::part(confirm-button) {
9
9
  flex: 1;
10
10
  }
11
11
 
12
- vaadin-confirm-dialog :is([slot='cancel-button'], [slot='reject-button'], [slot='confirm-button']) {
12
+ vaadin-confirm-dialog > :is([slot='cancel-button'], [slot='reject-button'], [slot='confirm-button']) {
13
13
  display: flex;
14
14
  }
package/src/components/dashboard.css CHANGED
@@ -3,12 +3,13 @@
3
3
  --vaadin-dashboard-widget-title-font-weight: var(--aura-font-weight-medium);
4
4
  --vaadin-dashboard-widget-header-padding: var(--vaadin-padding-s) var(--vaadin-padding-m);
5
5
  --vaadin-dashboard-widget-header-gap: var(--vaadin-gap-xs);
6
- --vaadin-dashboard-widget-border-color: var(--vaadin-border-color-secondary);
7
- --vaadin-dashboard-widget-background: var(--aura-surface-color) padding-box;
8
6
  --vaadin-dashboard-widget-border-radius: var(--vaadin-radius-m);
9
7
  }
10
8
 
11
9
  vaadin-dashboard-widget {
10
+ --aura-surface-level: 2;
11
+ --aura-surface-opacity: 0.5;
12
+ background: var(--vaadin-dashboard-widget-background, var(--aura-surface-color) padding-box);
12
13
  border-radius: calc(var(--vaadin-dashboard-widget-border-radius) - var(--vaadin-dashboard-widget-border-width, 1px));
13
14
 
14
15
  &::before {
@@ -27,6 +28,20 @@ vaadin-dashboard-widget {
27
28
  clip-path: inset(0);
28
29
  transition-duration: 50ms;
29
30
  }
31
+
32
+ &[theme~='outlined'] {
33
+ --vaadin-dashboard-widget-border-color: var(--vaadin-border-color);
34
+ }
35
+
36
+ &[theme~='elevated'] {
37
+ --aura-surface-opacity: 0.7;
38
+ --aura-surface-level: 3;
39
+ box-shadow: var(--vaadin-dashboard-widget-shadow, var(--aura-shadow-s));
40
+ }
41
+
42
+ &[editable] {
43
+ --vaadin-dashboard-widget-shadow: var(--aura-shadow-s);
44
+ }
30
45
  }
31
46
 
32
47
  vaadin-dashboard-section {
package/src/components/input-container.css CHANGED
@@ -16,7 +16,7 @@ vaadin-input-container {
16
16
 
17
17
  :not([readonly], [disabled])::part(input-field),
18
18
  vaadin-message-input:not([readonly], [disabled]) {
19
- box-shadow: 0 2px 1px -1px hsla(0, 0%, 0%, 0.04);
19
+ box-shadow: var(--aura-shadow-xs);
20
20
  }
21
21
 
22
22
  [readonly]::part(input-field) {
package/src/components/item-overlay.css CHANGED
@@ -1,21 +1,25 @@
1
1
  :where(:root),
2
2
  :where(:host) {
3
- --vaadin-item-overlay-padding: var(--vaadin-gap-xs);
4
- --vaadin-item-border-radius: max(var(--vaadin-radius-s), var(--vaadin-radius-m) - var(--vaadin-item-overlay-padding));
3
+ --aura-item-overlay-padding-inline: var(--vaadin-padding-xs);
4
+ --aura-item-overlay-padding-block: var(--vaadin-padding-xs);
5
+ --vaadin-item-overlay-padding: var(--aura-item-overlay-padding-block) var(--aura-item-overlay-padding-inline);
6
+ --vaadin-item-border-radius: clamp(
7
+ 0px,
8
+ var(--aura-item-overlay-padding-inline) * 100,
9
+ var(--vaadin-radius-m) - min(var(--aura-item-overlay-padding-inline), var(--aura-item-overlay-padding-block))
10
+ );
5
11
  --vaadin-item-checkmark-color: var(--aura-accent-text-color);
6
12
  --vaadin-item-gap: var(--vaadin-gap-s);
7
13
  }
8
14
 
9
- :is(
10
- vaadin-avatar-group-menu-item,
11
- vaadin-combo-box-item,
12
- vaadin-context-menu-item,
13
- vaadin-time-picker-item,
14
- vaadin-item,
15
- vaadin-menu-bar-item,
16
- vaadin-multi-select-combo-box-item,
17
- vaadin-select-item[role]
18
- ) {
15
+ vaadin-avatar-group-menu-item,
16
+ vaadin-combo-box-item,
17
+ vaadin-context-menu-item,
18
+ vaadin-time-picker-item,
19
+ vaadin-item,
20
+ vaadin-menu-bar-item,
21
+ vaadin-multi-select-combo-box-item,
22
+ vaadin-select-item:where([role]) {
19
23
  font-weight: var(--aura-font-weight-medium);
20
24
  --vaadin-item-checkmark-color: var(--aura-accent-text-color);
21
25
  -webkit-user-select: none;
@@ -24,20 +28,22 @@
24
28
  oklch(from var(--aura-accent-color-light) min(0.9, l) c h / max(0.05, l / 4)),
25
29
  oklch(from var(--aura-accent-color-dark) max(0.6, l) c h / max(0.2, l / 4))
26
30
  );
31
+ padding-inline-start: max(0px, var(--vaadin-padding-inline-container) - var(--aura-item-overlay-padding-inline));
27
32
  gap: 0;
28
33
 
29
34
  &::part(checkmark) {
30
35
  --vaadin-icon-visual-size: 75%;
31
- margin-inline-start: calc(var(--vaadin-gap-xs) * -1);
32
36
  }
33
37
 
34
- &[aria-haspopup='true']::after {
35
- --vaadin-icon-visual-size: 90%;
36
- margin-inline-end: calc(var(--vaadin-gap-xs) * -1);
38
+ &[aria-haspopup='true'] {
39
+ padding-inline-end: max(0px, var(--vaadin-padding-inline-container) - var(--aura-item-overlay-padding-inline));
40
+
41
+ &::after {
42
+ --vaadin-icon-visual-size: 90%;
43
+ }
37
44
  }
38
45
 
39
46
  &::part(content) {
40
- display: flex;
41
47
  padding-inline: var(--vaadin-gap-xs);
42
48
  gap: var(--vaadin-item-gap);
43
49
  }
package/src/components/menu-bar.css CHANGED
@@ -6,7 +6,7 @@
6
6
 
7
7
  @media (any-hover: hover) {
8
8
  /* Increase specificity to reset hover styles */
9
- vaadin-menu-bar-button vaadin-menu-bar-item:not([disabled]):not([tabindex]):hover {
9
+ vaadin-menu-bar-button > vaadin-menu-bar-item:not([disabled]):not([tabindex]):hover {
10
10
  background: transparent;
11
11
  }
12
12
  }
@@ -19,3 +19,12 @@ vaadin-menu-bar-button[slot='overflow'] {
19
19
  vaadin-menu-bar-button[aria-haspopup='true']::part(suffix)::after {
20
20
  --vaadin-icon-visual-size: 90%;
21
21
  }
22
+
23
+ vaadin-menu-bar-button > vaadin-menu-bar-item {
24
+ padding-inline: 0;
25
+ }
26
+
27
+ vaadin-menu-bar-button > vaadin-menu-bar-item::part(content) {
28
+ padding-inline: 0;
29
+ gap: var(--vaadin-button-gap, var(--vaadin-gap-s));
30
+ }
package/src/components/message-input.css CHANGED
@@ -1,8 +1,8 @@
1
- vaadin-message-input vaadin-text-area::part(input-field) {
1
+ vaadin-message-input > vaadin-text-area::part(input-field) {
2
2
  --vaadin-input-field-background: transparent;
3
3
  }
4
4
 
5
- vaadin-message-input[theme~='icon-button'] vaadin-message-input-button {
5
+ vaadin-message-input[theme~='icon-button'] > vaadin-message-input-button {
6
6
  width: var(--vaadin-icon-size, 1lh);
7
7
  height: var(--vaadin-icon-size, 1lh);
8
8
  color: transparent;
@@ -10,7 +10,7 @@ vaadin-message-input[theme~='icon-button'] vaadin-message-input-button {
10
10
  contain: strict;
11
11
  }
12
12
 
13
- vaadin-message-input[theme~='icon-button'] vaadin-message-input-button::before {
13
+ vaadin-message-input[theme~='icon-button'] > vaadin-message-input-button::before {
14
14
  content: '';
15
15
  position: absolute;
16
16
  inset: 0;
@@ -18,12 +18,12 @@ vaadin-message-input[theme~='icon-button'] vaadin-message-input-button::before {
18
18
  background: var(--vaadin-button-text-color);
19
19
  }
20
20
 
21
- vaadin-message-input[theme~='icon-button'][dir='rtl'] vaadin-message-input-button::before {
21
+ vaadin-message-input[theme~='icon-button'][dir='rtl'] > vaadin-message-input-button::before {
22
22
  scale: -1;
23
23
  }
24
24
 
25
25
  @media (forced-colors: active) {
26
- vaadin-message-input[theme~='icon-button'] vaadin-message-input-button {
26
+ vaadin-message-input[theme~='icon-button'] > vaadin-message-input-button {
27
27
  forced-color-adjust: none;
28
28
  --vaadin-button-text-color: CanvasText;
29
29
  }
package/src/components/notification.css CHANGED
@@ -2,6 +2,7 @@
2
2
  :where(:host) {
3
3
  --vaadin-notification-border-width: 0px;
4
4
  --vaadin-ease-fluid: cubic-bezier(0.78, 0, 0.22, 1);
5
+ --vaadin-notification-padding: var(--vaadin-padding-m);
5
6
  }
6
7
 
7
8
  vaadin-notification-container {
@@ -33,6 +34,7 @@ vaadin-notification-card::part(overlay) {
33
34
  }
34
35
 
35
36
  vaadin-notification-card vaadin-card {
37
+ --vaadin-card-border-width: 0px;
36
38
  --vaadin-card-gap: var(--vaadin-gap-xs) var(--vaadin-gap-s);
37
39
  color: var(--vaadin-text-color-secondary);
38
40
  }
package/src/components/overlay.css CHANGED
@@ -10,9 +10,9 @@
10
10
  oklch(from var(--aura-background-color-dark) 0.1 c h / max(0.04, 0.03 + 0.04 * var(--aura-contrast-level)))
11
11
  );
12
12
  --aura-overlay-inner-outline-color: hsla(0deg, 0%, 100%, max(3%, 2% + 4% * var(--aura-contrast-level)));
13
- --aura-overlay-shadow:
14
- inset 0 0 0 1px var(--aura-overlay-inner-outline-color), 0 0 0 1px var(--aura-overlay-outline-color),
15
- var(--aura-shadow-m);
13
+ --aura-overlay-outline-shadow:
14
+ inset 0 0 0 1px var(--aura-overlay-inner-outline-color), 0 0 0 1px var(--aura-overlay-outline-color);
15
+ --aura-overlay-shadow: var(--aura-shadow-m);
16
16
  --aura-overlay-backdrop-filter: blur(20px) brightness(1.1) saturate(1.2);
17
17
  --aura-overlay-surface-opacity: 0.85;
18
18
 
@@ -26,7 +26,7 @@
26
26
  --vaadin-overlay-background: var(--aura-surface-color);
27
27
  --aura-surface-level: 4;
28
28
  --aura-surface-opacity: var(--aura-overlay-surface-opacity);
29
- box-shadow: var(--aura-overlay-shadow);
29
+ box-shadow: var(--aura-overlay-outline-shadow), var(--vaadin-overlay-shadow, var(--aura-overlay-shadow));
30
30
  -webkit-backdrop-filter: var(--aura-overlay-backdrop-filter);
31
31
  backdrop-filter: var(--aura-overlay-backdrop-filter);
32
32
  font-family: var(--aura-font-family);
package/src/components/rich-text-editor.css CHANGED
@@ -14,7 +14,7 @@ vaadin-rich-text-editor {
14
14
  --vaadin-rich-text-editor-background: var(--aura-surface-color) padding-box;
15
15
  --aura-surface-level: 4;
16
16
  --aura-surface-opacity: 0.7 !important;
17
- box-shadow: 0 2px 1px -1px hsla(0, 0%, 0%, 0.04);
17
+ box-shadow: var(--aura-shadow-xs);
18
18
 
19
19
  &:not(:focus-within) {
20
20
  --vaadin-rich-text-editor-toolbar-button-text-color: var(--vaadin-text-color-disabled);
package/src/components/select.css CHANGED
@@ -1,9 +1,3 @@
1
- vaadin-select-item::part(content) {
2
- display: flex;
3
- align-items: center;
4
- gap: inherit;
5
- }
6
-
7
1
  vaadin-select-value-button {
8
2
  font-weight: var(--aura-font-weight-medium);
9
3
  }
package/src/components/side-nav.css CHANGED
@@ -13,11 +13,13 @@ vaadin-side-nav + vaadin-side-nav {
13
13
 
14
14
  vaadin-side-nav::part(label) {
15
15
  gap: var(--vaadin-gap-xs);
16
+ transition: color 80ms;
16
17
  }
17
18
 
18
19
  vaadin-side-nav-item::part(content) {
19
- --aura-surface-level: 4;
20
- --aura-surface-opacity: 0.6;
20
+ --aura-surface-level: 6;
21
+ --aura-surface-opacity: 0.3;
22
+ transition: color 80ms;
21
23
  }
22
24
 
23
25
  vaadin-side-nav-item:not([disabled], [current])::part(content):active {
@@ -25,8 +27,11 @@ vaadin-side-nav-item:not([disabled], [current])::part(content):active {
25
27
  }
26
28
 
27
29
  @media (any-hover: hover) {
30
+ vaadin-side-nav::part(label):hover {
31
+ --vaadin-side-nav-label-color: var(--vaadin-text-color);
32
+ }
33
+
28
34
  vaadin-side-nav-item:not([disabled], [current])::part(content):hover {
29
- transition: color 120ms;
30
35
  --vaadin-side-nav-item-text-color: var(--vaadin-text-color);
31
36
  }
32
37
  }
@@ -46,7 +51,7 @@ vaadin-side-nav-item::part(toggle-button) {
46
51
 
47
52
  /* Filled variant */
48
53
 
49
- vaadin-side-nav[theme~='filled'] vaadin-side-nav-item[current]::part(content) {
54
+ vaadin-side-nav[theme~='filled'] > vaadin-side-nav-item[current]::part(content) {
50
55
  --vaadin-side-nav-item-background: var(--aura-accent-color) border-box;
51
56
  --vaadin-side-nav-item-text-color: var(--aura-accent-contrast-color);
52
57
  --vaadin-text-color: var(--vaadin-side-nav-item-text-color);
@@ -55,3 +60,7 @@ vaadin-side-nav[theme~='filled'] vaadin-side-nav-item[current]::part(content) {
55
60
  --vaadin-icon-color: var(--aura-accent-contrast-color);
56
61
  outline-offset: 2px;
57
62
  }
63
+
64
+ vaadin-side-nav-item:not([current]) > vaadin-icon[slot='prefix'] {
65
+ opacity: 0.8;
66
+ }
package/src/components/tabs.css CHANGED
@@ -49,13 +49,13 @@ vaadin-tabs[overflow~='end'] {
49
49
 
50
50
  vaadin-tabs::part(back-button),
51
51
  vaadin-tabs::part(forward-button) {
52
- background: var(--aura-surface-color-solid) padding-box;
53
- border: 1px solid var(--vaadin-border-color);
52
+ background: var(--aura-background-color) padding-box;
53
+ border: 1px solid var(--vaadin-border-color-secondary);
54
54
  border-radius: var(--vaadin-radius-m);
55
55
  padding: var(--vaadin-padding-xs);
56
56
  height: auto;
57
57
  align-self: center;
58
- box-shadow: 0 1px 4px -1px var(--aura-shadow-color);
58
+ box-shadow: var(--aura-shadow-s);
59
59
  transition: opacity 120ms;
60
60
  }
61
61
 
@@ -84,12 +84,13 @@ vaadin-tab[selected] {
84
84
  --aura-surface-opacity: 0.7;
85
85
  --vaadin-tab-background: var(--aura-accent-surface);
86
86
  --vaadin-tab-text-color: var(--aura-accent-text-color);
87
- box-shadow: 0 1px 4px -1px var(--aura-shadow-color);
87
+ box-shadow: var(--aura-shadow-s);
88
+ border-color: hsl(0deg, 100%, 100%, 0.05);
88
89
  }
89
90
 
90
91
  /* Filled variant */
91
92
 
92
- vaadin-tabs[theme~='filled'] vaadin-tab[selected] {
93
+ vaadin-tabs[theme~='filled'] > vaadin-tab[selected] {
93
94
  --vaadin-tab-background: var(--aura-accent-color) border-box;
94
95
  --vaadin-tab-text-color: var(--aura-accent-contrast-color);
95
96
  --vaadin-text-color: var(--aura-accent-contrast-color);
package/src/components/tooltip.css ADDED
@@ -0,0 +1,7 @@
1
+ vaadin-tooltip::part(overlay) {
2
+ color: var(--vaadin-tooltip-text-color, var(--vaadin-text-color));
3
+ font-size: var(--vaadin-tooltip-font-size, var(--aura-font-size-s));
4
+ font-weight: var(--vaadin-tooltip-font-weight, var(--aura-font-weight-medium));
5
+ line-height: var(--vaadin-tooltip-line-height, var(--aura-line-height-s));
6
+ box-shadow: var(--aura-overlay-outline-shadow), var(--vaadin-tooltip-shadow, var(--aura-shadow-s));
7
+ }
package/src/components/upload.css CHANGED
@@ -55,7 +55,7 @@ vaadin-upload-file-list li {
55
55
  }
56
56
  }
57
57
 
58
- vaadin-upload:not([theme~='no-border']) vaadin-upload-file-list:has(li) {
58
+ vaadin-upload:not([theme~='no-border']) > vaadin-upload-file-list:has(> ul > li) {
59
59
  border-top: 1px solid var(--vaadin-border-color-secondary);
60
60
  margin: calc(var(--vaadin-upload-padding) * -1);
61
61
  margin-top: var(--vaadin-upload-padding);
@@ -130,13 +130,13 @@ vaadin-upload[theme~='no-border'] {
130
130
  --_divider-offset-end: 0px;
131
131
  outline-offset: 2px;
132
132
 
133
- vaadin-upload-file-list::part(list) {
133
+ > vaadin-upload-file-list::part(list) {
134
134
  display: flex;
135
135
  flex-direction: column;
136
136
  gap: var(--vaadin-gap-s);
137
137
  }
138
138
 
139
- vaadin-upload-file-list li:first-child {
139
+ > vaadin-upload-file-list li:first-child {
140
140
  margin-top: var(--vaadin-gap-s);
141
141
  }
142
142
 
package/src/palette.css CHANGED
@@ -1,10 +1,10 @@
1
1
  :where(:root),
2
2
  :where(:host) {
3
3
  --aura-red: oklch(0.59 0.2 25);
4
- --aura-orange: oklch(0.61 0.4 90);
5
- --aura-yellow: oklch(0.9 0.45 105);
6
- --aura-green: oklch(0.6 0.2 150);
7
- --aura-blue: oklch(0.61 0.2 260);
4
+ --aura-orange: oklch(0.61 0.35 87);
5
+ --aura-yellow: oklch(0.89 0.3 98);
6
+ --aura-green: oklch(0.6 0.2 155);
7
+ --aura-blue: oklch(0.55 0.2 264);
8
8
  --aura-purple: oklch(0.58 0.22 290);
9
9
 
10
10
  --aura-red-text: light-dark(
package/src/shadow.css CHANGED
@@ -4,5 +4,7 @@
4
4
  oklch(from var(--aura-background-color-light) calc(l - l * 0.8) calc(c / 10) h / 0.2),
5
5
  oklch(from var(--aura-background-color-dark) calc(l - l * 0.8) calc(c / 10) h / 0.2)
6
6
  );
7
+ --aura-shadow-xs: 0 1px 4px -2px var(--aura-shadow-color);
8
+ --aura-shadow-s: 0 2px 5px -1px var(--aura-shadow-color);
7
9
  --aura-shadow-m: 0 8px 16px -3px var(--aura-shadow-color);
8
10
  }
package/src/surface.css CHANGED
@@ -9,6 +9,7 @@
9
9
  .aura-surface,
10
10
  .aura-surface-solid,
11
11
  vaadin-accordion-panel[theme~='filled'],
12
+ vaadin-app-layout,
12
13
  vaadin-app-layout::part(navbar),
13
14
  vaadin-app-layout::part(drawer),
14
15
  vaadin-button,
@@ -36,9 +37,8 @@ vaadin-crud-dialog::part(overlay) {
36
37
 
37
38
  --aura-surface-color-solid: light-dark(
38
39
  oklch(
39
- from var(--aura-background-color-light)
40
- min(1, l + ((1 - l) / 4 + 0.06 - var(--aura-surface-opacity) / 20) * var(--aura-surface-level))
41
- clamp(0, c - l / 10 * var(--aura-surface-level) + var(--aura-surface-opacity) / 40, c) h
40
+ from var(--aura-background-color-light) min(1, l + ((1 - l) / 2 + 0.04) * var(--aura-surface-level))
41
+ clamp(0, c - (c / 3 + (l / 1000)) * var(--aura-surface-level), c) h
42
42
  ),
43
43
  oklch(
44
44
  from var(--aura-background-color-dark)
package/src/typography.css CHANGED
@@ -6,6 +6,7 @@
6
6
  --aura-font-family-instrument-sans: 'Instrument Sans', var(--aura-font-family-system);
7
7
 
8
8
  --aura-font-family: var(--aura-font-family-instrument-sans);
9
+ --vaadin-icon-baseline-font-family: var(--aura-font-family);
9
10
 
10
11
  --aura-base-font-size: 14;
11
12
  --aura-base-line-height: 1.4;